/* ============================================================================
   Console — shared by login, admin, client app, template chooser.
   Values transcribed from admin.jsx / app.jsx / links.jsx / states.jsx.
   ========================================================================== */

.console{min-height:100vh;display:flex;background:var(--app-bg);color:var(--ink);
  font-family:var(--font-sans);letter-spacing:-0.005em}

/* ---- Admin sidebar (240) -------------------------------------------------*/
.sidebar{width:240px;background:var(--card);border-right:1px solid var(--line);
  padding:20px 14px;display:flex;flex-direction:column;gap:4px;flex-shrink:0}
.sidebar .brand{display:flex;align-items:center;gap:10px;padding:6px 8px 18px}
.sidebar .brand .mk{width:28px;height:28px;border-radius:8px;background:var(--ink);
  color:var(--paper);display:grid;place-items:center;font-family:var(--font-serif);
  font-style:italic;font-size:18px}
.sidebar .grp{font-size:10.5px;color:var(--mute);padding:10px 10px 4px;
  text-transform:uppercase;letter-spacing:0.08em;font-weight:600}
.sidebar a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;
  color:var(--mute);font-size:13.5px;font-weight:500}
.sidebar a.is-active{background:var(--sand);color:var(--ink);font-weight:600}
.sidebar a:hover{background:var(--sand)}
.sidebar .foot{margin-top:auto;padding:12px 10px;border-radius:12px;
  background:var(--app-bg);font-size:12px;color:var(--mute)}

/* ---- Client compact rail (64) --------------------------------------------*/
/* Expanded by default (icon + label); collapses to the 64px icon rail. */
.rail{width:236px;background:var(--card);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:16px 12px;gap:4px;flex-shrink:0;
  position:sticky;top:0;height:100vh;overflow-y:auto;align-self:flex-start;
  transition:width .16s ease}
.rail .sep{height:1px;background:var(--line);margin:10px 6px}
.rail-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 4px 6px}
.rail-brand{display:flex;align-items:center;gap:10px;font-weight:600;min-width:0}
.rail .mk{width:34px;height:34px;border-radius:10px;background:var(--ink);
  color:var(--paper);display:grid;place-items:center;font-family:var(--font-serif);
  font-style:italic;font-size:22px;flex-shrink:0}
.rail-burger{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);
  background:var(--card);color:var(--mute);display:grid;place-items:center;flex-shrink:0}
.rail-burger:hover{background:var(--sand);color:var(--ink)}
.rail-nav{display:flex;flex-direction:column;gap:4px}
.rail-item{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;
  color:var(--mute);font-size:13.5px;font-weight:500}
.rail-item .rail-ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex-shrink:0}
.rail-item:hover{background:var(--sand);color:var(--ink)}
.rail-item.is-active{background:var(--sand);color:var(--ink);font-weight:600}
/* Footer: the logged-in user (always visible) + an explicit logout. */
/* Pinned directly under the nav (not viewport-bottom) so it's identical
   on every page regardless of content height. */
.rail-foot{margin-top:12px;display:flex;flex-direction:column;gap:4px;
  padding-top:12px;border-top:1px solid var(--line)}
.rail-me{display:flex;align-items:center;gap:10px;padding:8px 6px;
  border-radius:10px;min-width:0;text-decoration:none}
.rail-me:hover{background:var(--sand)}
.rail-me .me{width:38px;height:38px;border-radius:10px;color:#fff;display:grid;place-items:center;
  font-family:var(--font-serif);font-style:italic;font-size:16px;flex-shrink:0;
  background:linear-gradient(135deg,#3A4D74,#1B2A4A)}
.rail-me-name{display:block;font-size:12.5px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-me-sub{display:block;font-size:11px;color:var(--mute);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-out{display:block}
.rail-out-btn{display:flex;align-items:center;gap:10px;width:100%;padding:9px 6px;
  border:0;background:none;border-radius:10px;cursor:pointer;color:var(--mute);
  font:inherit;font-size:12.5px;font-weight:600;text-align:left}
.rail-out-btn .rail-ic{width:38px;display:grid;place-items:center;flex-shrink:0;color:inherit}
.rail-out-btn:hover{background:color-mix(in oklch,#c43d2a 9%,#fff);color:#7a2317}
.rail-label{white-space:nowrap;overflow:hidden}

/* Collapsed = the original compact icon-only rail */
.rail.is-collapsed{width:64px;align-items:center;padding:16px 0}
.rail.is-collapsed .rail-label{display:none}
.rail.is-collapsed .rail-top{flex-direction:column;gap:10px;padding:2px 0 4px}
.rail.is-collapsed .sep{width:34px;margin:8px 0}
.rail.is-collapsed .rail-item{justify-content:center;gap:0;padding:0;background:none}
.rail.is-collapsed .rail-item.is-active .rail-ic{background:var(--sand);color:var(--ink)}
.rail.is-collapsed .rail-item:hover .rail-ic{color:var(--ink)}
.rail.is-collapsed .rail-foot{align-items:center;border-top:0;gap:6px}
.rail.is-collapsed .rail-me{justify-content:center;padding:0;gap:0}
.rail.is-collapsed .rail-out-btn{justify-content:center;gap:0;padding:8px 0;width:auto}
.rail.is-collapsed .rail-out-btn .rail-ic{width:auto}

/* ---- iPhone frame (shared preview wrapper) ------------------------------*/
.iphone{background:#0b0b0c;border-radius:var(--ip-r);padding:var(--ip-bz);position:relative;
  flex-shrink:0;box-shadow:0 0 0 1.5px #000,0 1px 0 rgba(255,255,255,.07) inset,
  0 26px 50px -22px rgba(0,0,0,.55)}
.iphone-screen{position:relative;overflow:hidden;background:#000}

/* ---- Main column + topbar ------------------------------------------------*/
.main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:auto}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:22px 28px;
  border-bottom:1px solid var(--line);background:var(--card);position:sticky;top:0;z-index:3}
.topbar .sub{font-size:11px;color:var(--mute);font-weight:600;letter-spacing:0.08em;
  text-transform:uppercase}
.topbar h1{font-size:22px;font-weight:600;letter-spacing:-0.015em;margin:2px 0 0}
.topbar .tools{display:flex;gap:8px;align-items:center}
.searchbox{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);
  border-radius:10px;background:var(--card);font-size:13px;color:var(--mute);width:240px}
.searchbox kbd{margin-left:auto}

.content{padding:24px 28px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.grid-2{display:grid;grid-template-columns:1fr 360px;gap:20px}
/* Let the 1fr column shrink below content (e.g. the horizontal socials row)
   so it scrolls internally instead of blowing out the page width. */
.grid-2>*{min-width:0}
.col{display:flex;flex-direction:column;gap:18px;min-width:0}
[data-soc-sort]{max-width:100%}

/* ---- Stat card -----------------------------------------------------------*/
.stat{padding:18px 20px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;display:flex;flex-direction:column;gap:6px;min-height:104px}
.stat .k{font-size:11.5px;color:var(--mute);font-weight:600;letter-spacing:0.06em;
  text-transform:uppercase}
.stat .v{font-size:30px;font-family:var(--font-serif);font-style:italic;
  letter-spacing:-0.02em;line-height:1;color:var(--ink)}
.stat .s{font-size:12px;margin-top:auto;color:var(--mute)}
.stat .s.up{color:var(--brand)}

/* ---- Section / panel -----------------------------------------------------*/
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.panel h2,.panel h3{margin:0;font-size:15px;font-weight:600}
.panel .desc{font-size:12px;color:var(--mute);margin-top:2px}

/* ---- Table ---------------------------------------------------------------*/
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl thead th{text-align:left;color:var(--mute);font-size:11.5px;font-weight:600;
  letter-spacing:0.06em;text-transform:uppercase;padding:12px}
.tbl tbody td{padding:14px 12px;border-top:1px solid var(--line)}
.tbl tbody tr:first-child td{border-top:1px solid var(--line)}
.tbl .num{font-family:var(--font-mono);font-size:12px}
.tbl-wrap{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.tbl-wrap .bar{display:flex;justify-content:space-between;align-items:center;
  padding:16px 20px;border-bottom:1px solid var(--line)}
.seg{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;font-size:12px}
.seg a{padding:7px 12px;color:var(--mute);border-right:1px solid var(--line)}
.seg a:last-child{border-right:none}
.seg a.is-active{background:var(--sand);color:var(--ink);font-weight:600}
.avatar{width:34px;height:34px;border-radius:10px;background:var(--sand);display:grid;
  place-items:center;font-family:var(--font-serif);font-style:italic;font-size:16px;color:var(--ink)}

.status{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;
  font-size:11.5px;font-weight:600}
.status .d{width:6px;height:6px;border-radius:3px}
.status.active{background:#E6F3EC;color:#0F5C3A} .status.active .d{background:#1F8A4C}
.status.inactive{background:#F0EEE8;color:#5B5A55} .status.inactive .d{background:#A8A49B}
.status.suspended{background:#FBECEA;color:#8A2F22} .status.suspended .d{background:#C84A36}

/* ---- Bars (chart) --------------------------------------------------------*/
.bars{display:flex;align-items:flex-end;gap:5px;height:180px}
.bars .col2{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;height:100%}
.bars .v{background:var(--brand);border-radius:3px 3px 0 0}
.bars .c{background:var(--sand);border:1px solid #D7CEB1;border-radius:2px}

/* ---- Drawer (right panel) ------------------------------------------------*/
.drawer{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:100vw;background:var(--card);
  border-left:1px solid var(--line);box-shadow:-40px 0 80px -30px rgba(0,0,0,0.18);
  display:flex;flex-direction:column;z-index:70;animation:drawer-in .22s ease}
@keyframes drawer-in{from{transform:translateX(20px);opacity:.6}to{transform:none;opacity:1}}
.drawer-head{display:flex;justify-content:space-between;align-items:flex-start;
  padding:22px 24px 18px;border-bottom:1px solid var(--line2)}
.drawer-head .t{font-size:18px;font-weight:600;letter-spacing:-0.015em}
.drawer-head .s{font-size:13px;color:var(--mute);margin-top:4px;max-width:380px;line-height:1.4}
.drawer-body{flex:1;overflow:auto;padding:20px 24px;display:flex;flex-direction:column;gap:16px}
.drawer-foot{padding:16px 24px;border-top:1px solid var(--line2);background:#FCFBF6;
  display:flex;justify-content:space-between;align-items:center;gap:8px}

/* ---- Login split ---------------------------------------------------------*/
.login{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:var(--app-bg);
  color:var(--ink)}
.login .pane{padding:48px 56px;display:flex;flex-direction:column;align-items:center}
.login .pane>*{width:100%;max-width:380px}
.login .mid{margin:auto 0;max-width:380px;width:100%}
.login h1{margin:0;font-size:46px;line-height:1.05;letter-spacing:-0.03em;font-weight:500}
.login .aside{background:#0E1626;position:relative;overflow:hidden;display:grid;place-items:center}
.login .aside .glow{position:absolute;inset:0;
  background:radial-gradient(80% 70% at 30% 20%, rgba(255,255,255,0.06), transparent 60%)}
/* Login aside — live John Doe card with two cards peeking behind, then a
   confident editorial line. The whole thing reveals on load. */
.login .aside{padding:40px}
.lg-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:52px}
.lg-stack{position:relative;width:300px;height:558px}
.lg-stack>div{position:absolute;top:0;left:50%}
.lg-live,.lg-back,.lg-back-a,.lg-back-b{
  transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .45s ease,filter .45s ease}
.lg-live{z-index:3;transform:translateX(-50%);
  filter:drop-shadow(0 42px 70px rgba(0,0,0,.55));
  animation:lgFront .7s cubic-bezier(.22,1,.36,1) .15s backwards}
/* Two other real templates peeking behind, dimmed so the front pops. */
.lg-back{pointer-events:none;filter:saturate(.92) brightness(.97);
  border-radius:34px;
  box-shadow:0 34px 64px -28px rgba(0,0,0,.6)}
.lg-back-a{z-index:2;opacity:.92;
  transform:translateX(-50%) translate(-128px,30px) rotate(-7deg) scale(.92);
  animation:lgBackA .8s cubic-bezier(.22,1,.36,1) .34s backwards}
.lg-back-b{z-index:1;opacity:.7;
  transform:translateX(-50%) translate(122px,52px) rotate(7deg) scale(.84);
  animation:lgBackB .85s cubic-bezier(.22,1,.36,1) .5s backwards}
@keyframes lgFront{from{opacity:0;transform:translateX(-50%) translateY(36px) scale(.95)}
  to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
@keyframes lgBackA{from{opacity:0;transform:translateX(-50%) translate(-34px,66px) rotate(0) scale(.88)}
  to{opacity:.92;transform:translateX(-50%) translate(-128px,30px) rotate(-7deg) scale(.92)}}
@keyframes lgBackB{from{opacity:0;transform:translateX(-50%) translate(28px,76px) rotate(0) scale(.82)}
  to{opacity:.7;transform:translateX(-50%) translate(122px,52px) rotate(7deg) scale(.84)}}
@media (prefers-reduced-motion:reduce){.lg-live,.lg-back-a,.lg-back-b{animation:none;transition:none}}
/* Hover the stack → the two cards behind fan further out + brighten while
   the front eases back, so they "emerge from behind". */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .lg-stack:hover .lg-back{filter:saturate(1) brightness(1.03)}
  .lg-stack:hover .lg-back-a{opacity:1;
    transform:translateX(-50%) translate(-182px,8px) rotate(-11deg) scale(.96)}
  .lg-stack:hover .lg-back-b{opacity:.92;
    transform:translateX(-50%) translate(178px,28px) rotate(11deg) scale(.89)}
  .lg-stack:hover .lg-live{transform:translateX(-50%) translateY(-4px) scale(.99)}
}
.lg-copy{position:relative;text-align:center;max-width:430px}
.lg-big{margin:0;font-weight:700;line-height:1.04;letter-spacing:-0.032em;
  font-size:clamp(33px,3.3vw,46px);color:#F4F5F3}
.lg-big em{font-family:var(--font-serif);font-style:italic;font-weight:400;
  font-size:1.18em;letter-spacing:-0.01em;color:#E3C079}
.lg-sub{margin:20px auto 0;max-width:360px;font-size:15.5px;line-height:1.62;
  color:rgba(255,255,255,.6)}

/* ---- Demo mode (dev-only 1-click login) ---------------------------------*/
.demo-box{margin-top:22px;padding:16px;border:1px dashed var(--line);
  border-radius:14px;background:color-mix(in oklch,var(--sand) 55%,var(--card))}
.demo-eyebrow{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
.demo-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:#C58A2E;
  box-shadow:0 0 0 3px color-mix(in oklch,#C58A2E 22%,transparent)}
.demo-hint{margin:7px 0 13px;font-size:12.5px;color:var(--mute);line-height:1.45}
.demo-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.demo-btns form{display:flex}
.demo-btn{flex:1;display:flex;align-items:center;gap:10px;justify-content:flex-start;
  padding:11px 13px;text-align:left;width:100%}
.demo-btn span{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.demo-btn b{font-size:13.5px;font-weight:650}
.demo-btn small{font-size:11px;color:var(--mute);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:480px){.demo-btns{grid-template-columns:1fr}}

/* ---- Empty state ---------------------------------------------------------*/
.empty{background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:80px 40px;text-align:center}
.empty h2{margin:0;font-size:32px;font-family:var(--font-serif);font-style:italic;
  letter-spacing:-0.02em}
.empty p{margin:12px auto 0;color:var(--mute);font-size:14px;line-height:1.55;max-width:420px}

/* ---- Responsive: admin desktop-only, client app responsive (DR §06) -----*/
.mobile-block{display:none}
@media (max-width:1023px){
  .admin-shell{display:none}
  .mobile-block{display:flex;min-height:100vh;flex-direction:column;align-items:center;
    justify-content:center;text-align:center;padding:40px;gap:14px}
  .login{grid-template-columns:1fr}
  .login .aside{display:none}
}
@media (max-width:900px){
  .grid-2{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .app-shell .rail{display:none}
  .app-shell .content{padding:16px 16px 96px}
  .app-shell .topbar{padding:14px 18px}
  .bottom-tabs{display:flex !important}
}
.bottom-tabs{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--card);
  border-top:1px solid var(--line);padding:8px 14px max(8px,env(safe-area-inset-bottom));
  justify-content:space-around;z-index:40}
.bottom-tabs a{display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--mute);font-size:10px;font-weight:500;padding:6px 8px}
.bottom-tabs a.is-active{color:var(--ink);font-weight:600}
.bottom-tabs a svg{width:20px;height:20px}
.bottom-tabs .bt-out{color:var(--err-ink,#8A2F22)}

/* Socials sortable cards (Perfil editor) */
.soc-card{transition:opacity .15s ease}
.soc-card.is-off{opacity:.48}
.soc-card[draggable=true]:active{cursor:grabbing}
[data-soc-sort]::-webkit-scrollbar{height:6px}
[data-soc-sort]::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}

/* Per-button colour picker (button drawer) */
.cpx{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid var(--line);border-radius:999px;background:var(--card);font:inherit;font-size:12px;font-weight:600;color:var(--ink);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.cpx:hover{border-color:var(--mute)}
.cpx.on{border-color:var(--ink);box-shadow:0 0 0 3px rgba(15,16,14,.07)}
.cpx-dot{width:14px;height:14px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 1px rgba(0,0,0,.10) inset}

/* Scan-to-preview QR on the Perfil / Cartão editors — branded "scan zone" */
.prev-qr{display:flex;align-items:center;gap:15px;margin-top:16px;padding:14px;
  border:1px solid var(--line);border-radius:16px;background:var(--brand-soft)}
.prev-qr-code{flex:0 0 auto;position:relative;display:block;line-height:0;
  border-radius:12px;background:#fff;padding:11px;
  box-shadow:0 0 0 1px var(--line-soft) inset,0 1px 3px rgba(15,16,14,.06);
  transition:transform .18s ease,box-shadow .18s ease}
.prev-qr-code img{display:block;width:88px;height:88px}
/* camera-viewfinder corner brackets — the scan metaphor, in brand emerald */
.prev-qr-code::before,.prev-qr-code::after{content:"";position:absolute;
  width:13px;height:13px;pointer-events:none}
.prev-qr-code::before{top:7px;left:7px;border-top:2px solid var(--brand);
  border-left:2px solid var(--brand);border-top-left-radius:5px}
.prev-qr-code::after{right:7px;bottom:7px;border-right:2px solid var(--brand);
  border-bottom:2px solid var(--brand);border-bottom-right-radius:5px}
.prev-qr-code:hover{transform:translateY(-1px);
  box-shadow:0 0 0 1px var(--line-soft) inset,0 5px 14px rgba(15,16,14,.11)}
.prev-qr-tx{min-width:0}
.prev-qr-tx .eb{display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
.prev-qr-tx .eb::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--brand);flex:0 0 auto}
.prev-qr-tx p{margin:8px 0 0;font-size:12.5px;line-height:1.46;color:var(--mute-soft)}
/* "Not live yet" QR placeholder — same chrome, dashed border, muted glyph. */
.prev-qr-code.prev-qr-off{width:88px;height:88px;padding:0;display:grid;place-items:center;
  background:repeating-linear-gradient(135deg,#FAF6EB,#FAF6EB 6px,#F0EBDC 6px,#F0EBDC 7px);
  border:1.5px dashed color-mix(in oklch,var(--brand) 30%,var(--line));color:var(--mute);
  box-shadow:none;cursor:default}
.prev-qr-code.prev-qr-off:hover{transform:none;box-shadow:none}
.prev-qr-code.prev-qr-off::before,.prev-qr-code.prev-qr-off::after{border-color:color-mix(in oklch,var(--brand) 40%,var(--line))}

/* Agency palettes — horizontal scroller w/ flat brand colours (no gradient) */
.pal-rail{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;
  padding:2px 2px 12px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.pal-rail::-webkit-scrollbar{height:7px}
.pal-rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.pal-rail::-webkit-scrollbar-track{background:transparent}
.pal-ag{flex:0 0 auto;width:140px;scroll-snap-align:start;margin:0}
.pal-ag button{width:100%;cursor:pointer;text-align:left;padding:0;border-radius:14px;
  background:var(--card);overflow:hidden;border:1px solid var(--line);font:inherit;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.pal-ag button:hover{border-color:var(--mute);transform:translateY(-1px)}
.pal-ag.on button{border:2px solid var(--ink);box-shadow:0 0 0 4px rgba(15,16,14,.06)}
.pal-ag .sw{display:flex;height:48px}
.pal-ag .sw i{flex:1;display:block}
.pal-ag .mt{display:flex;align-items:center;gap:7px;padding:9px 11px}
.pal-ag .mt b{flex:1;min-width:0;font-size:12px;font-weight:650;letter-spacing:-0.01em;
  color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-ag .mt .dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.pal-ag .mt .ck{display:inline-flex;flex:0 0 auto;color:var(--brand)}