/* ==========================================================================
   LSR Studio — Design System (shared by every page in LSR-STUDIO/)
   Dark, technological, futuristic. Serif-italic display + monospace HUD
   labels + system sans body, blue/cyan accent, animated grid/glow/glass.
   ========================================================================== */

:root{
  color-scheme: dark;

  /* ---------- surfaces ---------- */
  --ink:#05060a;
  --ink-soft:#0d0f16;
  --ink-elevated:#141824;
  --ink-raised:#1b202e;
  --ink-glass: rgba(20,24,36,.55);
  --line: rgba(255,255,255,.09);
  --line-strong: rgba(255,255,255,.16);
  --line-bright: rgba(120,166,255,.35);

  /* ---------- text ---------- */
  --text:#eef1f7;
  --graphite:#9aa2b5;
  --graphite-soft:#6a7086;

  /* ---------- accent (brand blue + secondary cyan) ---------- */
  --accent:#3b74ff;
  --accent-bright:#5c8bff;
  --accent-soft: rgba(59,116,255,.14);
  --accent-deep:#0a1638;
  --accent-2:#2ee6d6;
  --accent-2-soft: rgba(46,230,214,.14);
  --grad-brand: linear-gradient(120deg, #5c8bff 0%, #7fa8ff 45%, #2ee6d6 100%);

  /* ---------- status ---------- */
  --ok:#38c793;
  --ok-soft:rgba(56,199,147,.14);
  --warn:#e8a545;
  --warn-soft:rgba(232,165,69,.14);
  --crit:#ef5a72;
  --crit-soft:rgba(239,90,114,.14);

  /* ---------- type ---------- */
  --font-display: 'Iowan Old Style','Palatino Linotype','Book Antiqua', Georgia, 'Times New Roman', serif;
  --font-mono: 'Cascadia Code','JetBrains Mono', Consolas, 'SF Mono', 'Roboto Mono', ui-monospace, monospace;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* ---------- fx ---------- */
  --grid-size: 42px;
  --grid-color: rgba(92,139,255,.07);
  --grid-color-2: rgba(46,230,214,.05);
  --radius-sm: 2px;
  --radius: 3px;
  --radius-lg: 4px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
  margin:0;background:var(--ink);color:var(--text);font-family:var(--font-body);
  line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;}
img{max-width:100%;}
button{font-family:inherit;}
::selection{background:var(--accent-soft);color:var(--text);}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--ink);}
::-webkit-scrollbar-thumb{background:var(--ink-raised);border-radius:8px;border:2px solid var(--ink);}
::-webkit-scrollbar-thumb:hover{background:var(--accent-deep);}

h1,h2,h3{font-family:var(--font-display);font-weight:400;margin:0;text-wrap:balance;}
em{font-style:italic;color:var(--accent-bright);}

.wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(20px,4vw,32px);}
.eyebrow{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-bright);margin:0 0 14px;display:flex;align-items:center;gap:8px;
}
.eyebrow::before{content:"";width:14px;height:1px;background:var(--accent-bright);box-shadow:0 0 6px var(--accent-bright);}

/* ==========================================================================
   FX layers — grid / scanline / orbs / spotlight
   ========================================================================== */
.fx-grid{position:relative;}
.fx-grid::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.6;
  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size:var(--grid-size) var(--grid-size);
}
.fx-grid.fx-grid-radial::before{
  mask-image:radial-gradient(60% 85% at 50% 20%, #000 0%, transparent 72%);
  -webkit-mask-image:radial-gradient(60% 85% at 50% 20%, #000 0%, transparent 72%);
}
.fx-grid.fx-grid-fade-b::before{
  mask-image:linear-gradient(to bottom, #000, transparent 88%);
  -webkit-mask-image:linear-gradient(to bottom, #000, transparent 88%);
}
.fx-grid > *{position:relative;z-index:1;}

.fx-scan{position:relative;overflow:hidden;}
.fx-scan::after{
  content:"";position:absolute;left:0;right:0;height:120px;top:-140px;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom, transparent, rgba(92,139,255,.10) 45%, rgba(46,230,214,.06) 55%, transparent);
}
@media (prefers-reduced-motion:no-preference){
  .fx-scan::after{animation:scanSweep 7s linear infinite;}
}
@keyframes scanSweep{0%{top:-140px;}100%{top:110%;}}

.orb{position:absolute;border-radius:50%;filter:blur(40px);pointer-events:none;opacity:.65;z-index:0;}
.orb-blue{background:radial-gradient(circle, rgba(59,116,255,.55), transparent 70%);}
.orb-cyan{background:radial-gradient(circle, rgba(46,230,214,.4), transparent 70%);}
@media (prefers-reduced-motion:no-preference){
  .orb{animation:orbFloat 12s ease-in-out infinite;}
}
@keyframes orbFloat{0%,100%{transform:translate(0,0);}50%{transform:translate(18px,-22px);}}

.glow-base{position:absolute;inset:auto 0 -40% 0;height:70%;pointer-events:none;z-index:0;
  background:radial-gradient(50% 100% at 50% 100%, var(--accent-deep) 0%, transparent 70%);}

/* cursor-reactive spotlight: JS sets --mx/--my (0-100%) on .fx-spotlight */
.fx-spotlight{position:relative;isolation:isolate;}
.fx-spotlight::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(92,139,255,.14), transparent 60%);
}
.fx-spotlight:hover::before{opacity:1;}
.fx-spotlight > *{position:relative;z-index:1;}

canvas.fx-particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.55;}

/* ==========================================================================
   Glass / cards / HUD framing
   ========================================================================== */
.glass{
  background:var(--ink-glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:var(--radius);
}
.panel{background:var(--ink-soft);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--line);
}
.panel-head h2{font-family:var(--font-body);font-weight:600;font-size:.95rem;margin:0;color:var(--text);}
.panel-head .count{font-family:var(--font-mono);font-size:.7rem;color:var(--graphite-soft);}

.hud-corners{position:relative;}
.hud-corners::before, .hud-corners::after{
  content:"";position:absolute;width:12px;height:12px;pointer-events:none;opacity:.7;z-index:2;
  border-color:var(--accent-bright);border-style:solid;border-width:0;transition:opacity .2s ease;
}
.hud-corners::before{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px;}
.hud-corners::after{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px;}

.glow-border{position:relative;border-radius:var(--radius);}
.glow-border::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;z-index:-1;opacity:0;
  background:var(--grad-brand);transition:opacity .3s ease;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.glow-border:hover::before, .glow-border:focus-within::before{opacity:1;}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-size:.88rem;font-weight:600;text-decoration:none;
  padding:13px 24px;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 48%,transparent 66%);
  transform:translateX(-120%);
}
.btn > *{position:relative;z-index:2;}
@media (prefers-reduced-motion:no-preference){
  .btn::before{transition:transform .55s ease;}
  .btn:hover::before{transform:translateX(120%);}
  .btn:hover{transform:translateY(-1px);}
}
.btn-primary{background:var(--accent);color:#04070f;border-color:var(--accent);}
.btn-primary:hover{box-shadow:0 0 0 1px rgba(92,139,255,.4), 0 14px 34px -12px rgba(59,116,255,.65);background:var(--accent-bright);}
.btn-outline{background:transparent;border-color:var(--line-strong);color:var(--text);}
.btn-outline:hover{border-color:var(--accent);color:var(--accent-bright);box-shadow:0 0 18px rgba(59,116,255,.28);}
.btn-ghost{background:transparent;border-color:transparent;color:var(--graphite);padding:10px 14px;}
.btn-ghost:hover{color:var(--text);background:var(--ink-elevated);}
.btn-sm{padding:9px 16px;font-size:.78rem;}
.btn-block{width:100%;justify-content:center;}
.btn-danger{background:var(--crit-soft);border-color:rgba(239,90,114,.4);color:#ffb4c1;}
.btn-danger:hover{background:rgba(239,90,114,.22);box-shadow:0 0 18px rgba(239,90,114,.3);}
.btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none;}

/* ==========================================================================
   Badges / pills / tags
   ========================================================================== */
.badge{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-bright);border:1px solid rgba(92,139,255,.35);background:var(--accent-soft);
  border-radius:999px;padding:5px 14px;display:inline-flex;align-items:center;gap:6px;
}
.tag-soon{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--warn);background:var(--warn-soft);border-radius:999px;padding:3px 8px;
}
.pill{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;
}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor;}
.pill.ok{background:var(--ok-soft);color:var(--ok);}
.pill.warn{background:var(--warn-soft);color:var(--warn);}
.pill.crit{background:var(--crit-soft);color:var(--crit);}
.pill.neutral{background:var(--ink-elevated);color:var(--graphite);}
.svc-tag{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.04em;color:var(--graphite);
  background:var(--ink-elevated);border:1px solid var(--line);border-radius:2px;padding:3px 7px;
}

/* ==========================================================================
   Forms
   ========================================================================== */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;}
.field label{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--graphite-soft);
}
.field input, .field select, .field textarea{
  background:var(--ink);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--text);
  padding:12px 13px;font-size:.9rem;font-family:inherit;width:100%;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
.field textarea{resize:vertical;min-height:96px;}
.pw-field{position:relative;width:100%;}
.pw-field input{padding-right:42px;width:100%;}
.pw-toggle{
  position:absolute;top:50%;right:6px;transform:translateY(-50%);
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;border-radius:var(--radius-sm);color:var(--graphite-soft);
  cursor:pointer;transition:color .15s ease,background .15s ease;
}
.pw-toggle:hover{color:var(--text);background:rgba(255,255,255,.06);}
.pw-toggle:focus-visible{outline:none;box-shadow:0 0 0 2px var(--accent-soft);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:560px){.field-row{grid-template-columns:1fr;}}
.help-text{font-size:.76rem;color:var(--graphite-soft);margin-top:-10px;margin-bottom:16px;}
.error{
  display:flex;gap:8px;align-items:flex-start;
  background:var(--crit-soft);border:1px solid rgba(239,90,114,.35);border-radius:var(--radius-sm);
  padding:10px 12px;font-size:.8rem;color:#ffb4c1;margin-bottom:16px;
}
.error[hidden]{display:none;}
.success{
  display:flex;gap:8px;align-items:flex-start;
  background:var(--ok-soft);border:1px solid rgba(56,199,147,.35);border-radius:var(--radius-sm);
  padding:10px 12px;font-size:.8rem;color:#a8f0d6;margin-bottom:16px;
}
.success[hidden]{display:none;}

/* ==========================================================================
   Auth shell (login / recover / reset)
   ========================================================================== */
.authpage{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;overflow:hidden;
}
.auth{width:100%;max-width:400px;position:relative;z-index:1;}
.auth .brand{display:flex;justify-content:center;margin-bottom:18px;text-decoration:none;}
.auth .brand img{height:52px;width:auto;display:block;}
.auth .badge-row{display:flex;justify-content:center;margin-bottom:22px;}
.auth .card{background:var(--ink-soft);border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px 26px;position:relative;}
.auth .card-eyebrow{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-bright);margin:0 0 10px;text-align:center;
}
.auth h1{font-family:var(--font-display);font-weight:400;font-style:italic;font-size:1.6rem;margin:0 0 22px;text-align:center;}
.auth .row-between{display:flex;align-items:center;justify-content:flex-end;margin:2px 0 22px;flex-wrap:wrap;gap:8px;}
.auth .row-between.between{justify-content:space-between;}
.link-accent{font-family:var(--font-mono);font-size:.76rem;color:var(--accent-bright);text-decoration:none;}
.link-accent:hover{text-decoration:underline;}
.foot-note{text-align:center;margin-top:22px;font-family:var(--font-mono);font-size:.7rem;color:var(--graphite-soft);}
.back-link{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:.76rem;
  color:var(--graphite-soft);text-decoration:none;margin-bottom:18px;transition:color .15s ease;
}
.back-link:hover{color:var(--accent-bright);}

/* ==========================================================================
   Public site nav / footer (index.html)
   ========================================================================== */
.nav{
  position:sticky;top:0;z-index:50;background:rgba(5,6,10,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:12px;}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;flex:none;}
.brand img{height:38px;width:auto;display:block;}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0;}
.nav-links a{font-size:.82rem;letter-spacing:.02em;color:var(--graphite);text-decoration:none;transition:color .15s ease;white-space:nowrap;}
.nav-links a:hover{color:var(--text);}
.nav-right{display:flex;align-items:center;gap:14px;}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:var(--radius);color:var(--text);width:38px;height:38px;align-items:center;justify-content:center;cursor:pointer;}
.nav-toggle svg{width:18px;height:18px;}
/* "Client area" item shown only inside the mobile hamburger menu (on desktop the
   .nav-cta button in .nav-right already serves this, so it stays hidden here). */
.nav-links-cta{display:none;}
@media (max-width:920px){
  .nav-links{
    position:fixed;inset:60px 0 auto 0;background:var(--ink-soft);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:flex-start;gap:0;padding:8px 0;
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;
  }
  .nav-links.open{transform:translateY(0);opacity:1;pointer-events:auto;}
  .nav-links li{width:100%;}
  .nav-links a{display:block;padding:13px clamp(20px,4vw,32px);width:100%;}
  .nav-links a:hover{background:var(--ink-elevated);}
  .nav-toggle{display:flex;}
  .nav-cta{display:none;}
  .nav-links-cta{display:block;margin-top:4px;border-top:1px solid var(--line);}
  .nav-links-cta a{color:var(--accent-bright);font-weight:600;}
}

footer{border-top:1px solid var(--line);padding-block:44px 26px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;margin-bottom:32px;}
@media (max-width:700px){.footer-grid{grid-template-columns:1fr;gap:28px;}}
.footer-brand img{height:32px;margin-bottom:10px;display:block;}
.footer-brand p{color:var(--graphite-soft);font-size:.82rem;max-width:32ch;margin:0;}
.footer-col h4{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite-soft);margin:0 0 14px;}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.footer-col a{font-size:.85rem;color:var(--graphite);text-decoration:none;transition:color .15s ease;}
.footer-col a:hover{color:var(--accent-bright);}
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:22px;border-top:1px solid var(--line);font-family:var(--font-mono);font-size:.72rem;color:var(--graphite-soft);
}
.footer-social{display:flex;gap:14px;}
.footer-social a{color:var(--graphite-soft);display:flex;}
.footer-social a:hover{color:var(--accent-bright);}
.footer-social svg{width:17px;height:17px;}

/* ==========================================================================
   App shell — sidebar + topbar (admin-*.html, cliente*.html)
   ========================================================================== */
.shell{
  display:grid;grid-template-columns:var(--sidebar-w, 248px) 16px 1fr;min-height:100vh;
  transition:grid-template-columns .2s var(--ease);
}
.shell.dragging{transition:none;}
.shell.collapsed{grid-template-columns:0px 16px 1fr;}

.sidebar{
  background:var(--ink-soft);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:22px 18px;
  position:sticky;top:0;height:100vh;overflow:hidden;transition:opacity .15s ease;
}
.shell.collapsed .sidebar{opacity:0;pointer-events:none;}
.sidebar::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;z-index:0;
  background-image:linear-gradient(var(--grid-color) 1px, transparent 1px),linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size:36px 36px;
  mask-image:linear-gradient(to bottom, #000, transparent 85%);-webkit-mask-image:linear-gradient(to bottom, #000, transparent 85%);
}
.sidebar > *{position:relative;z-index:1;}
.sidebar .brand{display:flex;align-items:center;gap:8px;margin-bottom:16px;text-decoration:none;}
.sidebar .brand img{height:72px;width:auto;display:block;}
.brand-role{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--graphite-soft);margin:0 0 30px;padding-left:2px;
}
.brand-role b{color:var(--accent-bright);}

nav.side-nav{display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto;}
.side-nav a{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);text-decoration:none;
  font-size:.87rem;color:var(--graphite);border-left:2px solid transparent;
  transition:background .15s ease,color .15s ease;
}
.side-nav a:hover{background:var(--ink-elevated);color:var(--text);}
.side-nav a[aria-current="page"]{
  color:var(--text);background:var(--ink-elevated);border-left-color:var(--accent);
  box-shadow:inset 2px 0 8px -2px rgba(59,116,255,.5);
}
.side-nav .dot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.6;flex:none;}

.side-foot{border-top:1px solid var(--line);margin-top:16px;padding-top:16px;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.admin-chip{display:flex;align-items:center;gap:10px;min-width:0;}
.avatar{
  width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--accent-bright);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.72rem;
  border:1px solid rgba(92,139,255,.3);flex:none;
}
.admin-chip .who{display:flex;flex-direction:column;line-height:1.25;min-width:0;}
.admin-chip .name{font-size:.82rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.admin-chip .role{font-family:var(--font-mono);font-size:.63rem;letter-spacing:.06em;color:var(--graphite-soft);text-transform:uppercase;}
.signout{font-family:var(--font-mono);font-size:.7rem;color:var(--graphite-soft);text-decoration:none;flex:none;}
.signout:hover{color:var(--accent-bright);}

.side-utility{margin-top:4px;padding-top:10px;border-top:1px solid var(--line);}
.side-utility a{
  display:flex;align-items:center;padding:6px 12px;border-radius:var(--radius-sm);text-decoration:none;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--graphite-soft);transition:color .15s ease;
}
.side-utility a:hover{color:var(--accent-bright);}
.side-utility a:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px;}

.side-lang{padding-top:2px;padding-bottom:14px;}
.langpills, .curr-pills{display:flex;gap:4px;border:1px solid var(--line);border-radius:999px;padding:3px;}
.langpill, .currpill{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;
  padding:5px 10px;border-radius:999px;border:none;background:transparent;color:var(--graphite-soft);cursor:pointer;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease,transform .15s ease;
}
.langpill[aria-pressed="true"], .currpill[aria-pressed="true"]{background:var(--accent);color:#03060f;box-shadow:0 0 14px rgba(59,116,255,.55);}
.langpill:hover:not([aria-pressed="true"]), .currpill:hover:not([aria-pressed="true"]){color:var(--text);transform:translateY(-1px);}
.langpill:focus-visible, .currpill:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px;}

.resizer{position:sticky;top:0;height:100vh;cursor:col-resize;display:flex;align-items:center;justify-content:center;}
.resizer::before{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--line);transition:background .15s ease,box-shadow .15s ease;}
.resizer:hover::before,.shell.dragging .resizer::before{background:var(--accent-bright);box-shadow:0 0 8px rgba(92,139,255,.55);}
.resizer-toggle{
  position:relative;z-index:1;width:16px;height:44px;border-radius:8px;padding:0;
  border:1px solid var(--line);background:var(--ink-elevated);color:var(--graphite-soft);
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.65rem;line-height:1;
  transition:color .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.resizer-toggle:hover{color:var(--accent-bright);border-color:var(--accent);box-shadow:0 0 10px rgba(59,116,255,.4);}
.resizer-toggle:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px;}
@media (max-width:760px){.resizer{display:none;}}

main{padding:clamp(22px,3vw,40px) clamp(22px,4vw,48px) 60px;min-width:0;}
.topbar{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px;flex-wrap:wrap;}
.topbar h1{font-family:var(--font-display);font-weight:400;font-style:italic;font-size:clamp(1.6rem,2.6vw,2.2rem);margin:0;color:var(--text);}
.topbar-meta{font-family:var(--font-mono);font-size:.72rem;color:var(--graphite-soft);text-align:right;}
.topbar-meta b{color:var(--graphite);font-weight:400;}
.topbar-utils{display:flex;align-items:center;gap:14px;}
.topbar-right{display:flex;flex-direction:column;align-items:flex-end;gap:10px;}

.bell-wrap{position:relative;}
.bell-btn{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--ink-soft);
  color:var(--graphite);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;
  transition:color .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.bell-btn svg{width:16px;height:16px;}
.bell-btn:hover{color:var(--accent-bright);border-color:var(--accent);box-shadow:0 0 12px rgba(59,116,255,.3);}
.bell-dot{position:absolute;top:6px;right:7px;width:6px;height:6px;border-radius:50%;background:var(--accent-bright);box-shadow:0 0 6px rgba(92,139,255,.8);}
.bell-panel{
  position:absolute;top:calc(100% + 10px);right:0;width:260px;background:var(--ink-elevated);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:16px;font-size:.82rem;color:var(--graphite);box-shadow:0 20px 40px -20px rgba(0,0,0,.6);
  display:none;z-index:30;
}
.bell-panel.open{display:block;}
.bell-panel p{margin:0;}
.topbar-avatar{
  width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent-bright);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.72rem;
  border:1px solid rgba(92,139,255,.3);flex:none;
}

.sidebar-mobile-toggle{
  display:none;width:36px;height:36px;flex:none;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--ink-elevated);
  color:var(--graphite);font-size:1.1rem;line-height:1;cursor:pointer;
  transition:color .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.sidebar-mobile-toggle:hover{color:var(--accent-bright);border-color:var(--accent);}
.mobile-nav-backdrop{
  display:none;position:fixed;inset:0;background:rgba(3,6,15,.6);z-index:40;
}

@media (max-width:760px){
  .shell{grid-template-columns:1fr;}
  .sidebar{position:relative;height:auto;flex-direction:row;align-items:center;justify-content:space-between;padding:14px 16px;}
  .brand-role,nav.side-nav,.side-foot,.side-lang,.side-utility{display:none;}
  .sidebar-mobile-toggle{display:flex;}

  .shell.mobile-nav-open .mobile-nav-backdrop{display:block;}
  .shell.mobile-nav-open .sidebar{
    position:fixed;inset:0;height:100vh;z-index:50;
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    overflow-y:auto;padding:22px 18px;
  }
  .shell.mobile-nav-open .brand-role{display:block;}
  .shell.mobile-nav-open nav.side-nav{display:flex;margin-top:10px;}
  .shell.mobile-nav-open .side-foot{display:flex;}
  .shell.mobile-nav-open .side-lang{display:block;}
  .shell.mobile-nav-open .side-utility{display:block;}
}

/* ==========================================================================
   Stat tiles
   ========================================================================== */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:40px;}
.tile{background:var(--ink-soft);padding:20px 22px;transition:background .2s ease,box-shadow .2s ease;position:relative;}
.tile:hover{background:var(--ink-elevated);box-shadow:inset 0 1px 0 rgba(92,139,255,.15);}
.tile .label{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite-soft);margin:0 0 12px;}
.tile .value{font-family:var(--font-display);font-size:1.9rem;color:var(--text);font-variant-numeric:tabular-nums;margin:0 0 8px;}
.tile .delta{font-family:var(--font-mono);font-size:.72rem;display:flex;align-items:center;gap:5px;}
.delta.up{color:var(--ok);}
.delta.warn{color:var(--warn);}
.delta.flat{color:var(--graphite-soft);}
@media (max-width:980px){.tiles{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.tiles{grid-template-columns:1fr;}}

/* 6-tile variant (dashboard: + "Assinaturas ativas" + "Invoices a vencer") */
.tiles.tiles-6{grid-template-columns:repeat(3,1fr);}
@media (max-width:980px){.tiles.tiles-6{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.tiles.tiles-6{grid-template-columns:1fr;}}

/* ==========================================================================
   Panels grid / table / feed
   ========================================================================== */
.panels{display:grid;grid-template-columns:1.7fr 1fr;gap:24px;align-items:start;}
@media (max-width:980px){.panels{grid-template-columns:1fr;}}

.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;min-width:720px;}
thead th{
  text-align:left;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--graphite-soft);padding:12px 20px;border-bottom:1px solid var(--line);font-weight:400;
}
tbody td{padding:14px 20px;border-bottom:1px solid var(--line);font-size:.86rem;color:var(--text);vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--ink-elevated);}
.client-name{font-weight:600;}
.client-sub{display:block;font-size:.74rem;color:var(--graphite-soft);margin-top:2px;font-weight:400;}
.autopay-dot{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:.76rem;color:var(--graphite);}
.autopay-dot .lamp{width:8px;height:8px;border-radius:50%;background:var(--graphite-soft);}
.autopay-dot.on .lamp{background:var(--accent-bright);box-shadow:0 0 6px rgba(92,139,255,.6);}
.lang-code{font-family:var(--font-mono);font-size:.72rem;color:var(--graphite);}
.next-charge{font-variant-numeric:tabular-nums;}

.feed{list-style:none;margin:0;padding:14px 20px 18px;display:flex;flex-direction:column;gap:16px;}
.feed li{display:flex;gap:12px;}
.feed time{font-family:var(--font-mono);font-size:.66rem;color:var(--graphite-soft);white-space:nowrap;padding-top:2px;}
.feed p{margin:0;font-size:.84rem;color:var(--text);line-height:1.5;}
.feed p b{font-weight:600;}
.feed .tag{font-family:var(--font-mono);font-size:.66rem;color:var(--graphite-soft);display:block;margin-top:2px;}

/* ==========================================================================
   Charts row
   ========================================================================== */
.charts-row{display:grid;grid-template-columns:1.6fr 1fr;gap:24px;margin-bottom:24px;align-items:start;}
@media (max-width:980px){.charts-row{grid-template-columns:1fr;}}
.chart-card{background:var(--ink-soft);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.chart-body{padding:18px 20px 20px;}
.revenue-svg{width:100%;height:150px;display:block;}
.donut-wrap{display:flex;align-items:center;gap:20px;padding:8px 4px 4px;}
.donut-svg{width:118px;height:118px;flex:none;}
.donut-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;flex:1;}
.donut-legend li{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.82rem;}
.donut-legend .dotlabel{display:flex;align-items:center;gap:8px;color:var(--graphite);}
.donut-legend .swatch{width:8px;height:8px;border-radius:50%;flex:none;}
.donut-legend b{color:var(--text);font-variant-numeric:tabular-nums;}
.fx-convert{font-family:var(--font-mono);font-size:.7rem;color:var(--graphite-soft);margin:0 0 8px;}

/* ==========================================================================
   Reveal-on-scroll + count-up
   ========================================================================== */
.reveal{opacity:0;transform:translateY(14px);}
@media (prefers-reduced-motion:no-preference){.reveal{transition:opacity .6s var(--ease),transform .6s var(--ease);}}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;}}
.reveal.in{opacity:1;transform:none;}
.reveal-stagger.in > *{transition-delay:calc(var(--i,0) * 60ms);}

/* ==========================================================================
   Misc utility
   ========================================================================== */
.divider{border:none;border-top:1px solid var(--line);margin:0;}
.section-head{max-width:640px;margin:0 auto 44px;text-align:center;}
.section-head h2{font-size:clamp(1.6rem,3.2vw,2.3rem);margin-bottom:14px;}
.section-head p{color:var(--graphite);margin:0;}
section.pad{padding-block:clamp(56px,8vw,88px);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

dialog.lsr-modal{border:none;border-radius:var(--radius);padding:0;background:var(--ink-soft);color:var(--text);max-width:460px;width:calc(100% - 40px);box-shadow:0 30px 70px -20px rgba(0,0,0,.6);}
dialog.lsr-modal::backdrop{background:rgba(3,4,8,.72);backdrop-filter:blur(2px);}
.lsr-modal .cm-body{padding:24px 24px 4px;}
.lsr-modal h3{margin:0 0 10px;font-family:var(--font-body);font-weight:600;font-size:1.02rem;}
.lsr-modal p{margin:0 0 12px;font-size:.86rem;color:var(--graphite);line-height:1.55;}
.lsr-modal .cm-actions{display:flex;justify-content:flex-end;gap:10px;padding:14px 24px;border-top:1px solid var(--line);}

/* ==========================================================================
   In-page tabs — shared by pages merged behind one nav item
   (ex: admin-clients.html "Lista"/"Cadastro", admin-finance.html
   "Faturamento"/"Invoices"). Reuse this instead of a bespoke tab per page.
   ========================================================================== */
.view-tabs{display:flex;gap:26px;border-bottom:1px solid var(--line);margin-bottom:28px;overflow-x:auto;}
.view-tab{
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.03em;white-space:nowrap;
  padding:0 0 12px;border:none;background:transparent;color:var(--graphite-soft);
  cursor:pointer;position:relative;transition:color .15s ease;
}
.view-tab:hover{color:var(--text);}
.view-tab:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px;}
.view-tab[aria-selected="true"]{color:var(--text);}
.view-tab[aria-selected="true"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--grad-brand);box-shadow:0 0 8px rgba(59,116,255,.5);
}
.view-panel[hidden]{display:none;}

/* ==========================================================================
   Global search (topbar) — shared markup across every admin-*.html page;
   logic lives in assets/admin-global-search.js (no duplicated JS per page).
   ========================================================================== */
.global-search-row{margin-bottom:24px;}
.global-search{position:relative;max-width:420px;}
.global-search-icon{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);width:15px;height:15px;
  color:var(--graphite-soft);pointer-events:none;
}
.global-search-input{
  width:100%;background:var(--ink-soft);border:1px solid var(--line);border-radius:999px;color:var(--text);
  padding:11px 16px 11px 38px;font-size:.84rem;font-family:inherit;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.global-search-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.global-search-input::-webkit-search-cancel-button{cursor:pointer;}
.global-search-results{
  position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--ink-elevated);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:0 20px 40px -20px rgba(0,0,0,.6);max-height:360px;overflow-y:auto;
  z-index:60;padding:6px;
}
.global-search-results[hidden]{display:none;}
.gsr-group-label{
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--graphite-soft);padding:9px 10px 5px;
}
.gsr-item{
  display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:var(--radius-sm);
  text-decoration:none;color:var(--text);
}
.gsr-item:hover,.gsr-item.active{background:var(--ink-raised);}
.gsr-item:focus-visible{outline:2px solid var(--accent-bright);outline-offset:-2px;}
.gsr-item .gsr-title{font-size:.84rem;}
.gsr-item .gsr-sub{font-size:.72rem;color:var(--graphite-soft);}
.gsr-empty,.gsr-hint{padding:14px 10px;font-size:.8rem;color:var(--graphite-soft);text-align:center;}
@media (max-width:760px){.global-search{max-width:none;}}

/* target/focus highlight for a row opened from the global search */
tbody tr.gsr-highlight{animation:gsrFlash 1.8s ease;}
@keyframes gsrFlash{
  0%,100%{background:transparent;}
  15%,55%{background:var(--accent-soft);}
}
.svc-card:target{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 10px 30px -18px rgba(59,116,255,.65);}

/* ==========================================================================
   Chip filters — small pill segmented control used to filter a list without
   a full page reload (ex: admin-clients.html "Clientes Ativos / Leads /
   Clientes Arquivados"). Same visual language as .pill/.langpill, but reused
   as a standalone group instead of a page-wide language switch.
   ========================================================================== */
.chip-filters{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;}
.chip-filter{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;
  padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--graphite-soft);
  cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.chip-filter:hover:not([aria-selected="true"]){color:var(--text);border-color:var(--line-strong);}
.chip-filter:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px;}
.chip-filter[aria-selected="true"]{background:var(--accent-soft);border-color:rgba(92,139,255,.4);color:var(--accent-bright);}
.chip-filter .chip-count{font-variant-numeric:tabular-nums;opacity:.75;margin-left:4px;}

/* ==========================================================================
   Client detail view (admin-clients.html #viewDetalhe, logic in
   assets/admin-client-detail.js) — breadcrumb, sub-tabs, key/value summary,
   file cards, timeline. Reuses .panel/.table-wrap/.form-grid/.feed/.tiles
   wherever the shape already matches; only truly new layouts get a class
   here (see 03-documentacao-tecnica.md, "Front-end", entrega 2026-07-16).
   ========================================================================== */
.detail-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px;}
.detail-header-name{font-family:var(--font-display);font-weight:400;font-style:italic;font-size:clamp(1.4rem,2.4vw,1.9rem);margin:0 0 6px;}
.detail-header-sub{font-family:var(--font-mono);font-size:.78rem;color:var(--graphite-soft);display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.detail-header-actions{display:flex;gap:10px;flex-wrap:wrap;flex:none;}

/* Sub-tabs (client-detail's 9 tabs, and each project's 8 sub-tabs) reuse
   .view-tabs/.view-tab as-is — no new selector needed, see admin-clients.html. */
/* Réguas de aba com muitos itens (detalhe do cliente = 9 abas, sub-abas de
   projeto = 8, projeto no portal do cliente): quebram linha em vez de esconder
   as últimas abas atrás de um scroll horizontal sem indicador — assim
   "Costs & Profitability" (a 9ª) nunca fica invisível fora da tela. */
.subtabs-scroll{flex-wrap:wrap;gap:10px 22px;}

.kv-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;padding:20px 22px;}
@media (max-width:640px){.kv-grid{grid-template-columns:1fr;}}
.kv-grid .kv-item.span-2{grid-column:1 / -1;}
.kv-item .k{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--graphite-soft);margin:0 0 5px;
}
.kv-item .v{font-size:.9rem;color:var(--text);margin:0;line-height:1.5;white-space:pre-line;}
.kv-item .v.muted{color:var(--graphite-soft);font-style:italic;}

.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.mini-stat{background:var(--ink-soft);padding:16px 18px;}
.mini-stat .label{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite-soft);margin:0 0 8px;}
.mini-stat .value{font-family:var(--font-display);font-size:1.4rem;color:var(--text);margin:0;font-variant-numeric:tabular-nums;}
@media (max-width:640px){.mini-stats{grid-template-columns:1fr;}}

.file-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;padding:20px 22px;}
.file-card{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--ink);padding:14px 16px;display:flex;flex-direction:column;gap:8px;}
.file-card .file-name{font-size:.86rem;font-weight:600;color:var(--text);word-break:break-word;}
.file-card .file-meta{font-family:var(--font-mono);font-size:.68rem;color:var(--graphite-soft);}
.file-card .file-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:6px;}
.file-upload-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;padding:18px 22px;border-bottom:1px solid var(--line);}
.file-upload-row .field{margin-bottom:0;}
.check-inline{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text);cursor:pointer;white-space:nowrap;}
.check-inline input{accent-color:var(--accent-bright);width:auto;}

.timeline{list-style:none;margin:0;padding:6px 22px 20px;display:flex;flex-direction:column;gap:0;}
.timeline li{display:flex;gap:14px;padding:13px 0;border-top:1px solid var(--line);}
.timeline li:first-child{border-top:none;}
.timeline time{font-family:var(--font-mono);font-size:.68rem;color:var(--graphite-soft);white-space:nowrap;padding-top:2px;min-width:118px;}
.timeline .tl-body p{margin:0 0 3px;font-size:.85rem;color:var(--text);line-height:1.5;}
.timeline .tl-tag{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-bright);}
@media (max-width:560px){.timeline li{flex-direction:column;gap:4px;} .timeline time{min-width:0;}}

.profit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:1px;}
@media (max-width:760px){.profit-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:420px){.profit-grid{grid-template-columns:1fr;}}
.profit-cell{background:var(--ink-soft);padding:16px 18px;}
.profit-cell .label{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite-soft);margin:0 0 8px;}
.profit-cell .value{font-family:var(--font-display);font-size:1.3rem;color:var(--text);margin:0;font-variant-numeric:tabular-nums;}
.profit-currency-block{margin-bottom:18px;}
.profit-currency-block:last-child{margin-bottom:0;}
.profit-currency-label{font-family:var(--font-mono);font-size:.7rem;color:var(--graphite-soft);margin:0 0 8px 2px;}

.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;padding:20px 22px;}
.svc-card{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--ink);padding:14px 16px;display:flex;flex-direction:column;gap:8px;}
.svc-card .svc-card-title{font-size:.88rem;font-weight:600;}
.svc-card .svc-card-meta{font-family:var(--font-mono);font-size:.68rem;color:var(--graphite-soft);}
.svc-card .svc-card-actions{margin-top:auto;padding-top:6px;}

/* ==========================================================================
   Client area — persistent sidebar (cliente*.html): Overview / Services /
   Payments / Support / Profile + Sign Out (visually separate). Markup
   duplicated per page (same pattern already used by the top .nav header),
   CSS centralized here — see sistemas-web/05-requisitos-arquitetura-google-
   ads-cliente.md, seção 1. Premium SaaS redesign 2026-07-18: link treatment
   here now diverges from the shared .side-nav a base (admin sidebar) on
   purpose — icons instead of bullet dots, more generous spacing/radius,
   hover translateX, a solid accent bar + tinted background on the active
   item — scoped under .client-sidebar precisely so the admin sidebar
   (.sidebar .side-nav, a different parent class) is untouched. Three
   responsive tiers below: desktop keeps the sidebar permanently visible,
   tablet (641–1024px) collapses it to an icon-only rail, mobile (≤640px)
   hides it behind a full-screen hamburger drawer.
   ========================================================================== */
.client-shell{display:flex;align-items:flex-start;max-width:1160px;margin:0 auto;}
.client-sidebar{
  width:236px;flex:none;position:sticky;top:0;align-self:flex-start;
  padding:32px clamp(16px,3vw,22px);display:flex;flex-direction:column;
  transition:width .2s var(--ease);
}
.client-sidebar nav.side-nav{display:flex;flex-direction:column;gap:5px;}
.client-sidebar .side-nav a{
  font-size:.91rem;font-weight:500;letter-spacing:.005em;padding:11px 13px;gap:13px;
  border-radius:12px;border-left:none;position:relative;
  transition:background .18s var(--ease),color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.client-sidebar .side-nav a:hover{background:var(--ink-elevated);color:var(--text);transform:translateX(3px);}
.client-sidebar .side-nav a[aria-current="page"]{
  color:var(--accent-bright);background:linear-gradient(90deg, var(--accent-soft), transparent);
  box-shadow:none;
}
.client-sidebar .side-nav a[aria-current="page"]::before{
  content:"";position:absolute;left:-1px;top:8px;bottom:8px;width:3px;border-radius:3px;
  background:var(--accent);box-shadow:0 0 10px rgba(59,116,255,.7);
}
.side-nav-icon{width:19px;height:19px;flex:none;display:flex;align-items:center;justify-content:center;color:inherit;}
.side-nav-icon svg{width:100%;height:100%;}
.client-sidebar .side-nav a[aria-current="page"] .side-nav-icon{color:var(--accent-bright);}

.client-signout{
  display:flex;align-items:center;gap:13px;padding:11px 13px;margin-top:14px;padding-top:18px;
  border-top:1px solid var(--line);border-radius:12px;text-decoration:none;
  font-size:.91rem;font-weight:500;color:var(--graphite-soft);
  transition:color .18s var(--ease),background .18s var(--ease),transform .18s var(--ease);
}
.client-signout:hover{color:var(--accent-bright);background:var(--ink-elevated);transform:translateX(3px);}
.client-content{flex:1;min-width:0;}

/* ---------- responsive tiers (redesign 2026-07-18: was a single ≤1024px
   drawer for both tablet and mobile; now 3 distinct tiers matching a
   premium SaaS shell — desktop keeps the permanent sidebar, tablet gets a
   collapsible icon rail, mobile gets a full-screen hamburger drawer) ----------
   Toggle/backdrop markup and the open/close JS live in assets/client-nav.js
   (same .client-sidebar-toggle / .client-nav-backdrop / .client-shell.
   mobile-nav-open mechanics reused for both tiers below — only the CSS
   response to that one state differs per breakpoint, so no JS changes were
   needed to add the tablet rail). */
.client-sidebar-toggle{
  display:none;width:38px;height:38px;flex:none;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--ink-elevated);
  color:var(--graphite);font-size:1.1rem;line-height:1;cursor:pointer;
  transition:color .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.client-sidebar-toggle:hover{color:var(--accent-bright);border-color:var(--accent);box-shadow:0 0 10px rgba(59,116,255,.3);}
.client-nav-backdrop{display:none;position:fixed;inset:0;background:rgba(3,6,15,.65);backdrop-filter:blur(2px);z-index:40;}
.client-shell.mobile-nav-open .client-nav-backdrop{display:block;}

/* Toggle button shows on tablet + mobile alike; desktop (>1024px) keeps
   the sidebar permanently visible with no toggle at all. Mobile turns it
   back off further down (≤640px) once the bottom nav takes over. */
@media (max-width:1024px){
  .client-sidebar-toggle{display:flex;}
}

/* ---------- mobile bottom navigation bar (native-app style) ----------
   Replaces the full-screen hamburger drawer below 640px only — tablet
   keeps its collapsible icon rail above untouched. Markup is duplicated
   per page next to .client-sidebar (same pattern), hidden by default here
   and switched on inside the ≤640px tier below. Icons are the same
   outline SVGs already used in .client-sidebar .side-nav — no new visual
   language, just a second, mobile-only rendering of the same 5 links. */
.client-bottom-nav{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;
  justify-content:space-around;align-items:stretch;
  min-height:calc(64px + env(safe-area-inset-bottom));
  padding-bottom:calc(14px + env(safe-area-inset-bottom));
  background:rgba(9,9,9,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid #262626;border-radius:18px 18px 0 0;
  box-shadow:0 -10px 26px -12px rgba(0,0,0,.6);
}
.client-bottom-nav a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-width:56px;min-height:56px;padding:11px 6px 9px;position:relative;
  text-decoration:none;color:#6a7086;transition:color .2s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.client-bottom-nav .bn-icon{width:26px;height:26px;display:flex;align-items:center;justify-content:center;transition:color .2s var(--ease),transform .2s var(--ease);}
.client-bottom-nav .bn-icon svg{width:100%;height:100%;}
.client-bottom-nav .bn-label{font-size:.67rem;font-weight:500;letter-spacing:.01em;}
.client-bottom-nav a:active .bn-icon{transform:scale(.94);}
.client-bottom-nav a[aria-current="page"]{color:#fff;}
.client-bottom-nav a[aria-current="page"] .bn-icon{color:#1473e6;transform:scale(1.05);}
.client-bottom-nav a[aria-current="page"]::before{
  content:"";position:absolute;top:4px;left:50%;transform:translateX(-50%);
  width:16px;height:3px;border-radius:3px;background:#1473e6;box-shadow:0 0 8px rgba(20,115,230,.7);
}

/* ---------- tablet (641–1024px): collapsible icon rail ----------
   Sidebar stays on-screen by default as a narrow icon-only rail (labels
   kept in the DOM for screen readers via .sr-only, not removed) instead of
   disappearing like on mobile — the toggle expands it in place to the full
   labeled sidebar as an overlay; collapses back on toggle/backdrop/Escape. */
@media (min-width:641px) and (max-width:1024px){
  .client-shell{display:flex;max-width:none;}
  .client-sidebar{width:78px;padding:28px 12px;align-items:center;}
  .client-sidebar nav.side-nav{width:100%;align-items:center;}
  .client-sidebar .side-nav a{justify-content:center;padding:12px;width:52px;}
  .client-sidebar .side-nav-label,.client-signout .side-nav-label{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }
  .client-signout{justify-content:center;padding:12px;width:52px;align-self:center;}

  .client-shell.mobile-nav-open .client-sidebar{
    width:250px;align-items:stretch;
    position:fixed;top:0;bottom:0;left:0;z-index:50;height:100vh;
    padding:28px 18px;overflow-y:auto;background:var(--ink-soft);
    box-shadow:24px 0 60px -24px rgba(0,0,0,.65);
  }
  .client-shell.mobile-nav-open .client-sidebar nav.side-nav{align-items:stretch;}
  .client-shell.mobile-nav-open .client-sidebar .side-nav a{justify-content:flex-start;width:auto;}
  .client-shell.mobile-nav-open .client-signout{justify-content:flex-start;width:auto;align-self:stretch;}
  .client-shell.mobile-nav-open .client-sidebar .side-nav-label,
  .client-shell.mobile-nav-open .client-signout .side-nav-label{
    position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal;
  }
}

/* ---------- mobile (≤640px): native bottom navigation bar ----------
   Was a full-screen hamburger drawer sharing mechanics with the tablet
   rail above; now the permanent mobile standard for the Client Dashboard
   is a fixed bottom bar instead (see .client-bottom-nav above) — the
   sidebar/toggle/backdrop are simply turned off here, tablet (641–1024px)
   is untouched. */
@media (max-width:640px){
  .client-shell{display:block;max-width:none;}
  .client-sidebar{display:none;}
  .client-sidebar-toggle{display:none;}
  .client-nav-backdrop{display:none;}

  .client-bottom-nav{display:flex;}
  /* Adds clearance so the last bit of page content / the footer never sits
     underneath the fixed bar — .client-shell + footer scopes this to only
     the footer that immediately follows the client-area shell (the 6
     authenticated client-*.html pages), never the public site/admin footer. */
  .client-shell + footer{padding-bottom:calc(92px + env(safe-area-inset-bottom));}

  /* ---------- decluttered top bar ----------
     Rendering every client-*.html page at a 375px viewport and walking
     every element's getBoundingClientRect() showed .nav-right laying out
     ~390px wide (hamburger + language pills + a full "Support" pill + bell
     + avatar name) — ~120px past the viewport. That overflowing header row
     is what let the page be dragged sideways on a real phone even with
     overflow-x:hidden already set on html/body (that rule only clips the
     document's own scrollable width; it does nothing about a sticky
     header laying out wider than the viewport). Fixed at the source
     instead of adding another overflow mask: Support already lives in the
     bottom nav below (redundant here), the drawer toggle is gone with the
     old drawer, and the name label is dropped in favor of the avatar alone
     — language pills + bell + avatar comfortably fit under 640px, safe-
     scoped to .client-topnav so the public site/admin header are untouched. */
  .client-topnav .nav-support{display:none;}
  .client-topnav .who .name{display:none;}
  .client-topnav .nav-right{gap:8px;}
  .client-topnav .brand img{height:34px;}
}

/* ==========================================================================
   Client area — Google Ads performance dashboard indicator bar (shared by
   the "Desempenho" tab of client-project.html, assets/client-google-ads-
   dashboard.js). Red -> yellow -> green/gray (insufficient data), color
   always driven by the backend rules engine (config/google-ads/rules/*.js
   via api/_lib/google-ads/rules-engine.js), never a hardcoded threshold in
   this file — this is only the visual bar, not the classification logic.
   ========================================================================== */
.gads-indicator{background:var(--ink-soft);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;display:flex;flex-direction:column;gap:8px;}
.gads-indicator .label{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite-soft);}
.gads-indicator .value-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.gads-indicator .value{font-family:var(--font-display);font-size:1.3rem;color:var(--text);font-variant-numeric:tabular-nums;}
.gads-indicator .delta{font-family:var(--font-mono);font-size:.7rem;}
.gads-indicator .delta.up{color:var(--ok);}
.gads-indicator .delta.down{color:var(--crit);}
.gads-indicator .delta.flat{color:var(--graphite-soft);}
.gads-bar-track{height:6px;border-radius:999px;background:var(--ink);border:1px solid var(--line);overflow:hidden;}
.gads-bar-fill{height:100%;border-radius:999px;transition:width .4s ease;}
/* Vocabulário real de api/_lib/google-ads/rules-engine.js (evaluateCtr/
   evaluateConversionRate: excelente/bom/atencao/ruim/insuficiente;
   evaluateCpa: verde/amarelo/atencao/vermelho/meta_invalida/sem_meta/
   insuficiente; evaluateRoas: dentro_da_meta/abaixo_da_meta/
   significativamente_abaixo/sem_meta/insuficiente) — nunca um valor
   inventado aqui, só mapeamento de cor para o que o backend já devolve. */
.gads-bar-fill.excelente,.gads-bar-fill.bom,.gads-bar-fill.dentro_da_meta,.gads-bar-fill.verde{background:var(--ok);box-shadow:0 0 8px rgba(56,199,147,.5);}
.gads-bar-fill.atencao,.gads-bar-fill.amarelo,.gads-bar-fill.abaixo_da_meta{background:var(--warn);box-shadow:0 0 8px rgba(232,165,69,.5);}
.gads-bar-fill.ruim,.gads-bar-fill.vermelho,.gads-bar-fill.significativamente_abaixo{background:var(--crit);box-shadow:0 0 8px rgba(239,90,114,.5);}
.gads-bar-fill.insuficiente,.gads-bar-fill.meta_invalida,.gads-bar-fill.sem_meta{background:var(--graphite-soft);box-shadow:none;}
.gads-indicator .classification{font-size:.76rem;color:var(--graphite);}
.gads-indicator .classification.insuficiente,.gads-indicator .classification.sem_meta,.gads-indicator .classification.meta_invalida{color:var(--graphite-soft);font-style:italic;}