/* =====================================================================
   softify.pro — stylesheet
   Design language taken directly from the brand mockup: deep navy
   canvas, a fluid teal→purple gradient wave, mint-green uppercase
   labels and bracket "corner marks" as the recurring signature motif.

   Fonts: intentionally system-stack only (no Google Fonts / external
   font CDN). Loading fonts from Google's servers sends every visitor's
   IP address to a third party before they've given consent — this has
   repeatedly been ruled a GDPR violation for sites serving DACH
   visitors. Self-hosting a webfont is a valid alternative; the current
   stack keeps the site legally simple and fast (zero extra requests).
   ===================================================================== */

:root {
  /* --- color tokens (from brand mockup) --- */
  --bg:            #0a0918;
  --bg-alt:        #100e26;
  --bg-card:       #15132f;
  --border:        rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);

  --accent-green:  #39e6a4;
  --accent-green-dim: #39e6a433;
  --accent-teal:   #52d6d0;
  --accent-purple: #9081f5;

  --text:          #f4f3fa;
  --text-muted:    #a5a2c2;
  --text-faint:    #6f6c8f;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;

  --max-width: 1180px;

  --font-display: -apple-system, "Segoe UI", "Helvetica Neue", Arial, ui-sans-serif, sans-serif;
  --font-body: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, ui-sans-serif, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* Consistent hover feedback on every plain link site-wide (nav,
   footer, portfolio links, inline CTAs, etc.) — the same subtle lift
   used on buttons, just lighter. Uses :where() so it never overrides
   elements with their own more specific hover treatment (like .btn's
   stronger lift+glow, or .portfolio-card's bigger lift) regardless of
   source order, since :where() contributes zero specificity. */
a:where(:not(.btn)) {
  transition: transform 0.16s var(--ease), opacity 0.16s ease;
}
a:where(:not(.btn)):hover {
  transform: translateY(-1px);
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ambient background wave — CSS-only, echoes the brand artwork */
.ambient-wave {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 20% 15%, rgba(82, 214, 208, 0.16), transparent 60%),
    radial-gradient(ellipse 55% 45% at 82% 30%, rgba(144, 129, 245, 0.14), transparent 60%),
    radial-gradient(ellipse 50% 35% at 50% 90%, rgba(57, 230, 164, 0.08), transparent 60%),
    var(--bg);
}

/* corner brackets — the signature motif from the brand mockup */
.corner-marks span {
  position: fixed;
  width: 22px;
  height: 22px;
  border: 2px solid var(--accent-green);
  opacity: 0.55;
  z-index: 5;
  pointer-events: none;
}
.corner-marks .tl { top: 18px; left: 18px; border-right: none; border-bottom: none; }
.corner-marks .tr { top: 18px; right: 18px; border-left: none; border-bottom: none; }
.corner-marks .bl { bottom: 18px; left: 18px; border-right: none; border-top: none; }
.corner-marks .br { bottom: 18px; right: 18px; border-left: none; border-top: none; }
@media (max-width: 640px) { .corner-marks { display: none; } }

/* ---------------------------------------------------------------------
   Splash / intro fade animation (softify.png)
   Sized to the visitor's actual viewport (vw/vh), not a fixed pixel
   size — this makes it scale live as the browser window is resized,
   on any screen resolution, phone or desktop, without any JS needed:
   vw/vh recompute automatically whenever the viewport changes.
   --------------------------------------------------------------------- */
#splash {
  position: fixed;
  inset: 0;
  width: 100vw;
  width: calc(var(--vw, 1vw) * 100);
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  animation: splash-out 0.3s var(--ease) forwards;
  animation-delay: 0.7s;
}
#splash img {
  /* fills as much of the screen as possible while always preserving
     the image's own aspect ratio and never overflowing the viewport.
     Uses the JS-measured --vh/--vw custom properties (accurate on
     mobile browsers with dynamic toolbars) with a plain vw/vh
     fallback for the instant before JS runs / if JS is unavailable. */
  width: auto;
  height: auto;
  max-width: 94vw;
  max-width: calc(var(--vw, 1vw) * 94);
  max-height: 88vh;
  max-height: calc(var(--vh, 1vh) * 88);
  object-fit: contain;
  opacity: 0;
  animation: splash-in 0.2s var(--ease) forwards;
}
/* on very wide/short viewports (e.g. landscape phones, ultrawide
   monitors) prioritise height so the image never looks tiny */
@media (min-aspect-ratio: 16/9) {
  #splash img { max-width: 60vw; max-height: 90vh; }
}
/* on very narrow/tall viewports (portrait phones) prioritise width */
@media (max-aspect-ratio: 3/4) {
  #splash img { max-width: 92vw; max-height: 60vh; }
}
@keyframes splash-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes splash-out {
  0%   { opacity: 1; visibility: visible; }
  99%  { opacity: 0; visibility: visible; }
  100% { opacity: 0; visibility: hidden; pointer-events: none; }
}
body.has-splash { overflow: hidden; }
body.splash-done { overflow: auto; }

/* ---------------------------------------------------------------------
   Page-load spinner (shown briefly on internal navigation, since every
   page is rendered server-side with a MySQL round-trip for translations)
   --------------------------------------------------------------------- */
#page-loader {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 18px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
}
#page-loader.active { opacity: 1; visibility: visible; }
.loader-orbit {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.12);
  border-top-color: var(--accent-green);
  border-right-color: var(--accent-teal);
  animation: spin 0.85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loader-text {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------
   Header / nav
   --------------------------------------------------------------------- */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(14px);
  background: rgba(10, 9, 24, 0.72);
  border-bottom: 1px solid var(--border);
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.logo {
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: 2px;
}
/* .dot styles the accent-colored suffix in "softify.pro" and in
   highlighted mentions of "COCO" (see brand_highlight()/highlight_term()
   in includes/functions.php) — deliberately NOT scoped to .logo, so it
   works the same wherever it's used, not just inside the header/footer
   brand mark. */
.dot { color: var(--accent-green); }

nav.main-nav { display: flex; align-items: center; gap: 28px; }
nav.main-nav a.nav-link {
  text-decoration: none;
  color: var(--text-muted);
  font-size: 14.5px;
  font-weight: 600;
  transition: color 0.2s ease;
  white-space: nowrap;
}
nav.main-nav a.nav-link:hover,
nav.main-nav a.nav-link.active { color: var(--text); }

.nav-actions { display: flex; align-items: center; gap: 14px; }

.lang-switch { position: relative; }
.lang-switch button {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.lang-switch button:hover { border-color: var(--border-strong); }
.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 6px;
  min-width: 190px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
  display: none;
  max-height: 320px;
  overflow-y: auto;
}
.lang-menu.open { display: block; }
.lang-menu a {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-muted);
  font-size: 13.5px;
}
.lang-menu a:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.lang-menu a.active { color: var(--accent-green); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s ease;
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent-green), var(--accent-teal));
  color: #06110c;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(57, 230, 164, 0.25); }
.btn-ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-ghost:hover { background: rgba(255,255,255,0.05); }

.hamburger {
  display: none;
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  width: 42px;
  height: 42px;
  color: var(--text);
  cursor: pointer;
}

/* icon-only links (admin login icon in the nav bar and footer) */
.icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.icon-link:hover { color: var(--accent-green); border-color: var(--border-strong); }
footer .icon-link {
  width: auto;
  height: auto;
  border: none;
  padding: 0;
  color: var(--text-muted);
}
footer .icon-link:hover { color: var(--accent-green); }

/* mobile nav */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 72px 0 0 0;
  background: var(--bg);
  z-index: 90;
  padding: 28px 24px;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  padding: 16px 4px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
}

@media (max-width: 900px) {
  nav.main-nav { display: none; }
  .hamburger { display: block; }
}

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.hero {
  padding: 96px 0 80px;
  text-align: center;
  position: relative;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent-green);
  margin: 0 0 22px;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(34px, 6vw, 62px);
  line-height: 1.08;
  margin: 0 0 22px;
  max-width: 880px;
  margin-inline: auto;
}
.hero-subtitle {
  color: var(--text-muted);
  font-size: clamp(16px, 2vw, 19px);
  max-width: 560px;
  margin: 0 auto 40px;
}
.hero-divider {
  width: 60px;
  height: 1px;
  background: var(--border-strong);
  margin: 0 auto 32px;
}
.hero-art {
  margin: 56px auto 0;
  max-width: 620px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 40px 90px rgba(0,0,0,0.5);
}
.hero-cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.scroll-hint {
  margin-top: 64px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---------------------------------------------------------------------
   Sections
   --------------------------------------------------------------------- */
section { padding: 88px 0; border-top: 1px solid var(--border); }
section:first-of-type { border-top: none; }

.section-head { max-width: 720px; margin-bottom: 44px; }
.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}
.section-head p { color: var(--text-muted); font-size: 16.5px; margin: 0; }

.prose p {
  color: var(--text-muted);
  font-size: 16.5px;
  max-width: 760px;
}
.prose p + p { margin-top: 18px; }
.prose ul, .prose ol {
  color: var(--text-muted);
  font-size: 16.5px;
  max-width: 760px;
  padding-left: 22px;
  margin: 14px 0;
}
.prose li + li { margin-top: 6px; }
.prose h3, .article-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 21px;
  color: var(--text);
  margin: 28px 0 12px;
}
.prose h3:first-child, .article-heading:first-child { margin-top: 0; }
.prose a {
  color: var(--accent-green);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose a:hover { color: var(--text); }

/* Article body text should fill the full card width (matching the
   header image above it), not the narrower 760px reading column used
   for .prose elsewhere on the site (homepage intro, COCO section) —
   scoped to .article-body specifically so those stay untouched. */
.article-body .prose p,
.article-body .prose ul,
.article-body .prose ol {
  max-width: none;
}

/* ---------------------------------------------------------------------
   Articles section (homepage)
   --------------------------------------------------------------------- */
.articles-list { display: flex; flex-direction: column; gap: 40px; margin-top: 12px; }
.article-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  overflow: hidden;
}
.article-card .article-image { width: 100%; aspect-ratio: 21/9; object-fit: cover; display: block; }
.article-card .article-body { padding: 32px 34px; }
@media (max-width: 640px) { .article-card .article-body { padding: 24px; } }
.article-card .article-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(21px, 2.6vw, 27px);
  color: var(--text);
  margin: 0 0 18px;
}
.article-card .pin-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-green);
  margin-bottom: 10px;
}
.articles-more { text-align: center; margin-top: 36px; }

/* pillar / service cards */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 12px;
}
@media (max-width: 880px) { .pillars { grid-template-columns: 1fr; } }

.pillar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
}
.pillar-index {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--accent-green);
  margin-bottom: 18px;
}
.pillar h3 {
  font-family: var(--font-display);
  font-size: 21px;
  margin: 0 0 12px;
  font-weight: 750;
}
.pillar p { color: var(--text-muted); font-size: 15px; margin: 0 0 10px; }
.pillar p:last-child { margin-bottom: 0; }

.coco-figures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 28px;
}
@media (max-width: 720px) { .coco-figures { grid-template-columns: 1fr; } }
.coco-figures figure {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-card);
}
.coco-figures img { width: 100%; }
.coco-figures figcaption {
  padding: 12px 16px;
  font-size: 12.5px;
  color: var(--text-faint);
  border-top: 1px solid var(--border);
}

/* why grid */
.why-block {
  background: linear-gradient(160deg, rgba(57,230,164,0.07), rgba(144,129,245,0.05));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
}
@media (max-width: 640px) { .why-block { padding: 26px; } }

/* portfolio */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 780px) { .portfolio-grid { grid-template-columns: 1fr; } }

.portfolio-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.25s var(--ease), border-color 0.25s ease;
}
.portfolio-card:hover { transform: translateY(-4px); border-color: var(--border-strong); }
.portfolio-thumb {
  aspect-ratio: 16/9;
  width: 100%;
}
.portfolio-body { padding: 24px 26px 28px; }
.portfolio-body h3 {
  font-family: var(--font-display);
  margin: 0 0 8px;
  font-size: 19px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.portfolio-body p { color: var(--text-muted); font-size: 14.5px; margin: 0 0 14px; }
.portfolio-link { font-size: 13px; font-weight: 700; color: var(--accent-green); }

/* contact */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; gap: 36px; } }

.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-muted);
}
.field input,
.field textarea {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  transition: border-color 0.2s ease;
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent-green);
}
.field textarea { resize: vertical; min-height: 130px; }
.field-error { color: #ff8a80; font-size: 12.5px; margin-top: 6px; }
.captcha-row { display: flex; align-items: center; gap: 12px; }
.captcha-row input { max-width: 100px; }
.captcha-label {
  font-size: 14px;
  color: var(--text);
  background: var(--bg-alt);
  border: 1px dashed var(--border-strong);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  user-select: none;
}
/* honeypot: hidden from real users, present for bots that fill everything */
.hp-field { position: absolute; left: -9999px; top: -9999px; opacity: 0; height: 0; }

.form-note { font-size: 12.5px; color: var(--text-faint); margin-top: 14px; }
.alert {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  margin-bottom: 22px;
}
.alert-success { background: rgba(57,230,164,0.12); border: 1px solid rgba(57,230,164,0.35); color: var(--accent-green); }
.alert-error { background: rgba(255,90,90,0.1); border: 1px solid rgba(255,90,90,0.35); color: #ff9d94; }

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
footer.site-footer {
  border-top: 1px solid var(--border);
  padding: 56px 0 34px;
  background: var(--bg-alt);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 40px;
}
.footer-grid.footer-grid--3col {
  grid-template-columns: 1.6fr 1fr 1fr;
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin: 0 0 16px;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-grid a { text-decoration: none; color: var(--text-muted); font-size: 14.5px; }
.footer-grid a:hover { color: var(--text); }

/* protected email links (see includes/functions.php protected_email())
   — styled to match a normal link immediately, so there's no visible
   flash before JS assembles the real mailto: link a moment later */
.protected-email { color: var(--accent-green); cursor: default; }
.footer-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 13px;
}
.footer-bottom > :first-child { justify-self: start; }
.footer-bottom > :last-child { justify-self: end; }
@media (max-width: 560px) {
  .footer-bottom {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 14px;
  }
  .footer-bottom > :first-child,
  .footer-bottom > :last-child { justify-self: center; }
}

/* ---------------------------------------------------------------------
   Admin area (kept simple / functional, distinct light-utility feel)
   --------------------------------------------------------------------- */
.admin-body { background: #0e0d20; min-height: 100vh; }
.admin-shell { display: flex; min-height: 100vh; }
.admin-sidebar {
  width: 230px;
  flex-shrink: 0;
  background: var(--bg-alt);
  border-right: 1px solid var(--border);
  padding: 24px 16px;
}
.admin-sidebar a {
  display: block;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}
.admin-sidebar a:hover, .admin-sidebar a.active { background: rgba(255,255,255,0.06); color: var(--text); }
.admin-main { flex: 1; padding: 36px 40px; max-width: 1000px; }
.admin-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-bottom: 20px;
}
table.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
table.admin-table th, table.admin-table td {
  text-align: left;
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
}
table.admin-table th { color: var(--text-faint); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
}
.badge-admin { background: rgba(57,230,164,0.15); color: var(--accent-green); }
.badge-poweruser { background: rgba(144,129,245,0.18); color: var(--accent-purple); }
.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px;
}

@media (max-width: 760px) {
  .admin-shell { flex-direction: column; }
  .admin-sidebar { width: 100%; display: flex; overflow-x: auto; gap: 4px; padding: 12px; }
  .admin-sidebar a { white-space: nowrap; }
  .admin-main { padding: 24px; }
}

/* ---------------------------------------------------------------------
   Admin article editor: language tabs, HTML toolbar, live preview
   --------------------------------------------------------------------- */
.lang-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.lang-tab-btn {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 13.5px;
  font-weight: 700;
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.lang-tab-btn.active { color: var(--accent-green); border-bottom-color: var(--accent-green); }
.lang-tab-panel { display: none; }
.lang-tab-panel.active { display: block; }

.editor-toolbar { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.editor-toolbar button {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 11px;
  border-radius: 6px;
  cursor: pointer;
}
.editor-toolbar button:hover { color: var(--text); border-color: var(--border-strong); }

.field .editor-textarea {
  width: 100%;
  min-height: 1040px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 12px 14px;
  font-size: 14px;
  font-family: ui-monospace, 'SF Mono', Consolas, monospace;
  line-height: 1.55;
  resize: vertical;
}

.preview-toggle-row { display: flex; justify-content: flex-end; margin: 8px 0 4px; }
.preview-pane {
  display: none;
  margin-top: 10px;
  padding: 26px 30px;
  background: var(--bg-alt);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
}
.preview-pane.active { display: block; }
.preview-pane .article-title { font-family: var(--font-display); font-weight: 800; font-size: 23px; color: var(--text); margin: 0 0 16px; }

.article-thumb-cell { width: 70px; height: 44px; object-fit: cover; border-radius: 4px; background: var(--bg-alt); }
.reorder-btns { display: inline-flex; gap: 4px; }
.reorder-btns button {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 26px;
  height: 26px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
}
.reorder-btns button:hover { color: var(--text); }