/* Client Portal FDS — cores padrão Fábrica de Sites + shell Genesis/Tronn */
:root {
  /* Brand FDS (padrão) */
  --primary: #067EBF;
  --primary-ink: #045a8a;
  --secondary: #B5B5B6;
  --acid: #d6ff3f;
  --acid-ink: #07130f;
  --orange: #ff6b35;

  --ink: #07130f;
  --paper: #f4f1e9;
  --paper-strong: #ebe6d8;
  --dark-panel: #0b1c24;
  --dark-panel-2: #0f2833;
  --muted: #59635e;
  --line: #07130f2b;
  --surface: #ffffff;
  --surface-2: #f7f5ef;

  --green: #1D9A6C;
  --green-bg: #E1F5EC;
  --amber: #C67F16;
  --amber-bg: #FBF0DD;
  --crimson: #c0392b;
  --crimson-bg: #fdecea;

  --sb-text: #c5d6df;
  --sb-text-2: #7f96a3;
  --sb-line: rgba(6,126,191,.28);
  --sb-active: rgba(6,126,191,.22);

  --font-sans: 'Montserrat','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --font-mono: 'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --shadow: 0 1px 2px rgba(7,19,15,.04), 0 12px 28px -16px rgba(7,19,15,.18);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-sans);font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

.shell{display:grid;grid-template-columns:268px 1fr;min-height:100vh}
.sb{background:var(--dark-panel);color:var(--sb-text);display:flex;flex-direction:column;padding:1rem .95rem;position:sticky;top:0;height:100vh;overflow-y:auto}
.sb-brand{display:flex;align-items:center;gap:.75rem;padding:.45rem .4rem 1.1rem}
.sb-brand img{display:block;height:36px;width:auto;max-width:170px;object-fit:contain}
.sb-brand .meta{min-width:0}
.sb-brand b{display:block;font-weight:750;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.sb-brand span{font:600 9px/1.3 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--primary);display:block;margin-top:4px}

.site-switch{display:flex;align-items:center;gap:.6rem;width:100%;background:var(--dark-panel-2);border:1px solid var(--sb-line);border-radius:0;padding:.6rem .7rem;margin-bottom:1rem;cursor:pointer;text-align:left}
.site-switch:hover{border-color:var(--primary)}
.site-avatar{width:30px;height:30px;flex-shrink:0;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.75rem}
.site-meta{min-width:0;flex:1}
.site-meta .n{font-weight:700;font-size:.86rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-meta .u{font-size:.7rem;color:var(--sb-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-menu{background:var(--dark-panel-2);border:1px solid var(--sb-line);margin:-.7rem 0 1rem;overflow:hidden}
.site-menu a{display:block;padding:.55rem .8rem;font-size:.82rem;color:var(--sb-text);border-top:1px solid #ffffff14}
.site-menu a:hover{background:#ffffff08;color:#fff}

.nav-group{margin-bottom:1.05rem}
.nav-label{font:700 9px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--sb-text-2);padding:0 .55rem;margin-bottom:.4rem;display:block}
.nav-item{display:flex;align-items:center;gap:.65rem;padding:.52rem .6rem;font-size:.87rem;font-weight:600;color:var(--sb-text);margin-bottom:.08rem;border-left:2px solid transparent}
.nav-item svg{width:17px;height:17px;flex-shrink:0;opacity:.85}
.nav-item:hover{background:#ffffff08;color:#fff}
.nav-item.active{background:var(--sb-active);color:#fff;border-left-color:var(--primary)}
.nav-item.active svg{opacity:1;color:#7ec8ea}
.sb-foot{margin-top:auto;padding-top:.75rem;border-top:1px solid #ffffff18}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{height:64px;background:color-mix(in srgb,var(--paper) 88%,transparent);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:1rem;padding:0 1.35rem;position:sticky;top:0;z-index:10;backdrop-filter:blur(14px)}
.topbar-logo{display:none;height:28px;width:auto;flex-shrink:0}
.search{display:flex;align-items:center;gap:.55rem;max-width:420px;flex:1;min-width:0;background:var(--surface-2);border:1px solid var(--line);padding:.5rem .75rem;color:var(--muted);font-size:.86rem}
.search svg{width:15px;height:15px;flex-shrink:0}
.search input{min-width:0}
.top-actions{display:flex;align-items:center;gap:.9rem;margin-left:auto;flex-shrink:0}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.75rem}
.content{padding:1.75rem 1.35rem 3rem;max-width:1240px;width:100%;margin:0 auto}

.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}
.page-head h1{font-size:clamp(1.4rem,2.4vw,1.85rem);font-weight:700;letter-spacing:-.03em;margin:0 0 .25rem;line-height:1;color:var(--ink)}
.page-head p{margin:0;color:var(--muted);font-size:.88rem}
.btn{display:inline-flex;align-items:center;gap:.45rem;font-weight:720;font-size:.84rem;padding:.62em 1.05em;border:1px solid var(--primary);cursor:pointer;white-space:nowrap;background:var(--primary);color:#fff;transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{background:var(--primary-ink);box-shadow:6px 6px 0 rgba(6,126,191,.25);transform:translateY(-2px)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-line:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn svg{width:15px;height:15px}

.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.85rem;margin-bottom:1.5rem}
.kpi{background:var(--surface);border:1px solid var(--line);padding:1.1rem 1.15rem;box-shadow:var(--shadow)}
.kpi .l{font:650 10px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.55rem}
.kpi .v{font-family:var(--font-mono);font-size:1.55rem;font-weight:700;letter-spacing:-.03em;color:var(--ink)}

.panel{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.15rem;border-bottom:1px solid var(--line)}
.panel-head h3{margin:0;font-size:.95rem;font-weight:700;letter-spacing:-.015em}
.panel-head a{font-size:.8rem;font-weight:700;color:var(--primary)}
.body-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:1.1rem;align-items:start}

table{width:100%;border-collapse:collapse;font-size:.85rem}
thead th{text-align:left;font:650 10px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:.7rem 1.15rem;border-bottom:1px solid var(--line)}
tbody td{padding:.78rem 1.15rem;border-bottom:1px solid #07130f12;color:#2a3531;vertical-align:middle}
tbody tr:hover{background:var(--surface-2)}
.pill{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:700;padding:.28em .65em;border-radius:100px}
.pill::before{content:"";width:6px;height:6px;border-radius:50%}
.pill.paid{background:var(--green-bg);color:var(--green)}.pill.paid::before{background:var(--green)}
.pill.pending{background:var(--amber-bg);color:var(--amber)}.pill.pending::before{background:var(--amber)}
.pill.shipped{background:#e8f4fb;color:var(--primary-ink)}.pill.shipped::before{background:var(--primary)}
.pill.canceled{background:var(--surface-2);color:var(--muted)}.pill.canceled::before{background:var(--muted)}

.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.8rem;padding:3rem 1rem}
.empty-state h3{margin:0;font-size:1rem;font-weight:700}
.empty-state p{margin:0;color:var(--muted);max-width:26rem;font-size:.88rem}

.login-wrap{min-height:100vh;display:grid;place-items:center;background:radial-gradient(120% 90% at 88% 6%,rgba(6,126,191,.22) 0%,transparent 55%),var(--dark-panel);padding:1.5rem}
.login-card{width:100%;max-width:400px;background:var(--paper);border:1px solid #ffffff18;padding:2rem 1.9rem;box-shadow:0 30px 70px -25px rgba(0,0,0,.55)}
.login-card .brand{display:flex;flex-direction:column;align-items:center;gap:.7rem;margin-bottom:1.5rem;text-align:center}
.login-card .brand img{height:48px;width:auto;object-fit:contain}
.login-card .brand b{font-size:.78rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.fld{margin-bottom:1rem}
.fld label{display:block;font:700 9px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.fld input{width:100%;font:inherit;font-size:.95rem;padding:.72em .9em;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);outline:none}
.fld input:focus{border-color:var(--primary)}
.login-card .btn{width:100%;justify-content:center;margin-top:.4rem}
.login-error{background:var(--crimson-bg);color:var(--crimson);padding:.75rem .9rem;font-size:.85rem;font-weight:600;margin-bottom:1.1rem}
.login-hint{margin-top:1.2rem;text-align:center;font-size:.78rem;color:var(--muted)}
.login-hint a{border-bottom:1px solid var(--line);font-weight:650;color:var(--primary)}

.impersonate-bar{background:var(--primary);color:#fff;padding:.55rem 1.2rem;font-size:.82rem;font-weight:700;display:flex;align-items:center;justify-content:space-between}
.impersonate-bar a{text-decoration:underline;color:#fff}

.toolbar{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;flex-wrap:wrap}
.table-panel{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}

@media (max-width:980px){
  .shell{grid-template-columns:1fr}
  .topbar-logo{display:block}
  .kpi-row{grid-template-columns:1fr 1fr}
  .body-grid{grid-template-columns:1fr}
}
@media (max-width:560px){.kpi-row{grid-template-columns:1fr}}

/* Tabelas de listagem (sites, produtos, notícias, páginas, mídia...) como
   cartões empilhados no mobile -- com várias colunas elas não cabem na tela
   e ficavam cortadas/inacessíveis (os links de ação, sempre na última
   coluna, saíam da área visível sem indicação de scroll horizontal --
   impossível abrir/editar um item pelo celular). Aplica a qualquer
   <table> dentro de .table-panel; cada página só precisa marcar as células
   com data-label. */
@media (max-width:640px){
  .table-panel table thead{display:none}
  .table-panel table,
  .table-panel table tbody,
  .table-panel table tr,
  .table-panel table td{display:block;width:100%}
  .table-panel table{border-collapse:separate}
  .table-panel table tr{border-bottom:1px solid var(--line);padding:.9rem 1.1rem}
  .table-panel table tr:last-child{border-bottom:0}
  .table-panel table td{border:0;padding:.3rem 0;display:flex;justify-content:space-between;align-items:center;gap:.75rem;text-align:left}
  .table-panel table td::before{content:attr(data-label);font:650 10px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);flex-shrink:0}
  .table-panel table td:not([data-label]),
  .table-panel table td[data-label=""]{padding-top:0}
  .table-panel table td:not([data-label])::before,
  .table-panel table td[data-label=""]::before{content:none}
  .table-panel table td[data-label]:first-of-type{font-size:1rem}
  .table-panel table td[data-label]:first-of-type strong{font-size:1rem}
  .table-panel table td.tbl-actions{justify-content:flex-start;flex-wrap:wrap;gap:.5rem;padding-top:.6rem;padding-bottom:0}
  .table-panel table td.tbl-actions .btn,
  .table-panel table td.tbl-actions .btn-line,
  .table-panel table td.tbl-actions form{flex:1 1 auto}
  .table-panel table td.tbl-actions .btn,
  .table-panel table td.tbl-actions .btn-line{width:100%;justify-content:center;box-sizing:border-box}
  .table-panel table td.tbl-actions form .btn,
  .table-panel table td.tbl-actions form .btn-line{width:100%}
  /* Primeira célula "muda" (thumbnail de produto) some no mobile -- vira
     supérflua ao lado do nome do produto na própria linha. */
  .table-panel table td.tbl-thumb{display:none}
}

/* Forms & CRUD */
.fld{margin-bottom:1rem}
.fld label{display:block;font:700 10px/1 var(--font-mono,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.fld input,.fld select,.fld textarea{width:100%;font:inherit;padding:.65em .8em;border:1px solid var(--line);background:var(--surface-2,#f7f5ef);color:var(--ink)}
.fld select{-webkit-appearance:none;appearance:none;color-scheme:light;padding-right:2.2em;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236b7280" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>');background-repeat:no-repeat;background-position:right .7em center;background-size:14px 14px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--primary);outline-offset:1px;border-color:var(--primary)}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.fld-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}
.form-panel{background:var(--surface);border:1px solid var(--line);padding:1.2rem 1.15rem;margin-bottom:1.2rem;box-shadow:var(--shadow)}
.form-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.5rem}
.flash{padding:.85rem 1rem;margin-bottom:1rem;font-weight:650;font-size:.88rem}
.flash.ok{background:var(--green-bg,#E1F5EC);color:var(--green,#1D9A6C)}
.flash.err{background:var(--crimson-bg,#fdecea);color:var(--crimson,#c0392b)}
.tabs-bar{display:flex;gap:.15rem;border-bottom:1px solid var(--line);margin-bottom:1.2rem;overflow-x:auto}
.tabs-bar a{padding:.7em 1em;font-size:.82rem;font-weight:700;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}
.tabs-bar a.on{color:var(--ink);border-bottom-color:var(--primary)}
@media(max-width:720px){.fld-row,.fld-row-3{grid-template-columns:1fr}}

/* ===== Form UX upgrade ===== */
.input-group{display:flex;gap:0;align-items:stretch}
.input-group input{flex:1;border-right:0;border-radius:0}
.input-group .btn,.input-group button{border-radius:0;white-space:nowrap;flex-shrink:0}
.img-field{margin-bottom:1.25rem}
.img-field .preview{margin-bottom:.55rem;min-height:56px}
.img-field .preview img{max-height:80px;max-width:220px;border:1px solid var(--line);padding:6px;background:var(--surface-2);object-fit:contain}
.img-field .preview img.is-dark-bg{background:#0b1c24}
.img-field .hint{font-size:.78rem;color:var(--muted);margin-top:.35rem}
.switch-row{display:flex;align-items:center;gap:.65rem;padding:.55rem 0;font-weight:600}
.switch-row input[type=checkbox]{width:18px;height:18px;accent-color:var(--primary)}
.color-row{display:flex;gap:.5rem;align-items:center}
.color-row input[type=color]{width:44px;height:40px;padding:2px;border:1px solid var(--line);background:var(--surface);cursor:pointer}
.color-row input[type=text]{flex:1}
.form-section-title{font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:1.4rem 0 .7rem;padding-bottom:.4rem;border-bottom:1px solid var(--line)}
.select-field select{width:100%;padding:.65em 2.2em .65em .8em;border:1px solid var(--line);background:var(--surface-2) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236b7280" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>') no-repeat right .7em center/14px 14px;font:inherit;color:var(--ink);-webkit-appearance:none;appearance:none;color-scheme:light}

/* Media modal */
.cp-media-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:1rem}
.cp-media-modal[hidden]{display:none!important}
.cp-media-backdrop{position:absolute;inset:0;background:rgba(7,19,15,.55);backdrop-filter:blur(4px)}
.cp-media-dialog{position:relative;z-index:1;width:min(960px,100%);max-height:90vh;background:var(--surface);border:1px solid var(--line);box-shadow:0 24px 64px rgba(0,0,0,.25);display:flex;flex-direction:column}
.cp-media-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1rem 1.15rem;border-bottom:1px solid var(--line);flex-wrap:wrap}
.cp-media-head strong{display:block;font-size:1rem}
.cp-media-path{display:block;font-size:.78rem;color:var(--muted);margin-top:.2rem;font-family:ui-monospace,monospace}
.cp-media-actions{display:flex;gap:.4rem;flex-wrap:wrap}
.cp-media-body{padding:1rem;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.7rem;min-height:280px;max-height:55vh}
.cp-media-card{border:1px solid var(--line);background:var(--surface-2);padding:.45rem;text-align:center;cursor:pointer;font:inherit;color:var(--ink);display:flex;flex-direction:column;gap:.35rem;min-height:120px}
.cp-media-card:hover{border-color:var(--primary)}
.cp-media-card.is-selected{border-color:var(--primary);outline:2px solid var(--primary);outline-offset:1px}
.cp-media-card img{width:100%;height:72px;object-fit:cover;background:#fff}
.cp-media-card span{font-size:.7rem;word-break:break-all;line-height:1.25}
.cp-media-thumb{height:72px;display:grid;place-items:center;font-size:1.4rem;background:#eef2f5}
.cp-media-empty{grid-column:1/-1;text-align:center;padding:2.5rem 1rem;color:var(--muted)}
.cp-media-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1.15rem;border-top:1px solid var(--line);flex-wrap:wrap}
.cp-media-foot span{font-size:.8rem;color:var(--muted);word-break:break-all}
.cp-media-upload{cursor:pointer;margin:0}

/* ===== Brand logo only + subtitle ===== */
.sb-brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.4rem;
  padding:.35rem .4rem 1rem;
}
.sb-brand img{
  display:block;
  height:36px;
  width:auto;
  max-width:100%;
  object-fit:contain;
}
.sb-brand .brand-sub{
  font:700 9px/1.2 var(--font-mono,monospace);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--primary);
}
.sb-brand .meta{display:none!important}

/* ===== Topbar controls ===== */
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink);cursor:pointer;flex-shrink:0;
}
.icon-btn:hover{border-color:var(--primary);color:var(--primary)}
.top-actions{display:flex;align-items:center;gap:.55rem;margin-left:auto;flex-shrink:0}
.search{display:flex;align-items:center;gap:.55rem;max-width:420px;flex:1;min-width:0;background:var(--surface-2);border:1px solid var(--line);padding:.35rem .75rem;color:var(--muted)}
.search input{
  flex:1;border:0;background:transparent;font:inherit;color:var(--ink);outline:none;min-width:0;padding:.35rem 0;
}
.search input::placeholder{color:var(--muted)}

/* ===== Sidebar collapse ===== */
body.sb-collapsed .shell{grid-template-columns:0 1fr}
body.sb-collapsed .sb{
  width:0;padding:0;overflow:hidden;border:0;opacity:0;pointer-events:none;
}
body.sb-collapsed .topbar-logo{display:block}

/* ===== Dark theme ===== */
html[data-theme="dark"]{
  --ink:#e8eef2;
  --paper:#0b1218;
  --surface:#121c24;
  --surface-2:#18242e;
  --line:#ffffff18;
  --muted:#9aadb8;
  --dark:#070d12;
  --dark-2:#0e1820;
}
html[data-theme="dark"] body{background:var(--paper);color:var(--ink)}
html[data-theme="dark"] .sb{background:#070d12}
html[data-theme="dark"] .topbar{background:rgba(11,18,24,.92)}
html[data-theme="dark"] .panel,
html[data-theme="dark"] .table-panel,
html[data-theme="dark"] .form-panel,
html[data-theme="dark"] .kpi{background:var(--surface);border-color:var(--line)}
html[data-theme="dark"] .btn-line{background:transparent;color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .fld input,
html[data-theme="dark"] .fld select,
html[data-theme="dark"] .fld textarea,
html[data-theme="dark"] .select-field select{background:var(--surface-2) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%239aa5b1" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>') no-repeat right .7em center/14px 14px;color:var(--ink);border-color:var(--line);color-scheme:dark}
html[data-theme="dark"] .fld select{color-scheme:dark;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%239aa5b1" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>')}
html[data-theme="dark"] table th{color:var(--muted)}
html[data-theme="dark"] tbody td{color:var(--ink);border-bottom-color:var(--line)}
html[data-theme="dark"] tbody td a{color:var(--ink)}
html[data-theme="dark"] .cp-media-dialog{background:var(--surface)}
html[data-theme="dark"] .topbar-logo{filter:brightness(0) invert(1)}

/* mobile rules moved to layout block */

/* Sidebar scrollbar: invisível até rolar */
.sb{
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.sb:hover{
  scrollbar-color: rgba(255,255,255,.28) transparent;
}
.sb::-webkit-scrollbar{
  width: 6px;
}
.sb::-webkit-scrollbar-track{
  background: transparent;
}
.sb::-webkit-scrollbar-thumb{
  background: transparent;
  border-radius: 99px;
}
.sb:hover::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.28);
}
.sb::-webkit-scrollbar-thumb:active{
  background: rgba(255,255,255,.45);
}

/* Brand: só logo */
.sb-brand{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:.45rem .4rem 1rem;
}
.sb-brand img{
  display:block;
  height:38px;
  width:auto;
  max-width:180px;
  object-fit:contain;
}
.sb-brand .brand-sub,
.sb-brand .meta{display:none!important}

/* Dashboard site panel */
.dash-kpi .kpi{text-align:center;position:relative}
.kpi-icon{font-size:1.5rem;margin-bottom:.25rem;opacity:.9}
.dash-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:1rem;margin-top:.2rem}
.chart-wrap{padding:.5rem 1rem 1rem;height:220px}
.preview-frame{background:linear-gradient(180deg,#0f172a,#111827);margin:0;overflow:hidden}
.preview-chrome{display:flex;gap:6px;padding:.55rem .75rem;background:rgba(255,255,255,.06)}
.preview-chrome span{width:8px;height:8px;border-radius:50%;background:#ff5f57}
.preview-chrome span:nth-child(2){background:#febc2e}
.preview-chrome span:nth-child(3){background:#28c840}
.preview-body{display:block;position:relative;min-height:260px;text-decoration:none;color:#e2e8f0}
.preview-iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:.35;pointer-events:none;transform:scale(.5);transform-origin:top left;width:200%;height:200%}
.preview-placeholder{position:relative;z-index:1;padding:2rem 1.2rem;display:flex;flex-direction:column;gap:.35rem;min-height:260px;justify-content:flex-end;background:linear-gradient(180deg,transparent 20%,rgba(15,23,42,.85) 70%)}
.preview-badge{display:inline-flex;align-self:flex-start;font:700 10px/1 monospace;letter-spacing:.08em;padding:.3em .55em;background:rgba(6,126,191,.35);color:#9ed4f0;border-radius:99px}
.preview-placeholder strong{font-size:1.15rem}
.preview-placeholder small{opacity:.7}
.preview-placeholder em{font-size:.8rem;color:#60a5fa;font-style:normal;margin-top:.3rem}
.track-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;padding:1rem 1.1rem}
.track-card{border:1px solid var(--line);background:var(--surface-2);padding:1rem;text-align:center}
.track-card strong{display:block;margin:.35rem 0 .2rem;font-size:.88rem}
.track-card small{display:block;color:var(--muted);font-size:.75rem}
.track-letter{font-size:1.5rem;font-weight:800}
.kpi.soft-blue .v{color:#067EBF}
.kpi.soft-green .v{color:#1D9A6C}
.kpi.soft-cyan .v{color:#0aa2c0}
.kpi.soft-amber .v{color:#C67F16}
@media(max-width:1100px){
  .dash-grid{grid-template-columns:1fr}
  .track-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .track-grid{grid-template-columns:1fr}
}

.preview-snapshot{
  display:block;
  width:100%;
  height:280px;
  object-fit:cover;
  object-position:top center;
  background:#0f172a;
}
.preview-body{
  min-height:280px;
}
.preview-placeholder{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:1rem 1.1rem .9rem;
  background:linear-gradient(180deg,transparent,rgba(15,23,42,.92));
  min-height:auto;
  justify-content:flex-end;
}
.preview-iframe{display:none!important}

/* Snapshot preview card — desktop meia-página */
.preview-panel .preview-frame{
  background:#0b1220;
}
.preview-body{
  position:relative;
  display:block;
  min-height:0;
  aspect-ratio:16 / 10;
  overflow:hidden;
  text-decoration:none;
}
.preview-snapshot{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  background:#0f172a;
}
.preview-placeholder{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:.7rem 1rem;
  background:linear-gradient(180deg, transparent 0%, rgba(8,15,28,.55) 55%, rgba(8,15,28,.88) 100%);
  min-height:auto;
  justify-content:flex-end;
  pointer-events:none;
}
.preview-placeholder .preview-badge{
  margin-bottom:.25rem;
}
.preview-placeholder strong{
  font-size:.95rem;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.4);
}
.preview-placeholder small{
  opacity:.85;
  color:#cbd5e1;
}
.preview-placeholder em{display:none}

/* Dual snapshot + scroll on hover */
.preview-dual{
  display:grid;
  grid-template-columns:1fr 120px;
  gap:.6rem;
  padding:.6rem;
  background:#0b1220;
}
.scroll-shot{
  position:relative;
  overflow:hidden;
  background:#0f172a;
  border:1px solid rgba(255,255,255,.08);
}
.scroll-shot.desk{
  aspect-ratio:16/10;
}
.scroll-shot.mob{
  aspect-ratio:9/16;
  max-height:100%;
  border-radius:14px;
  margin:auto;
}
.scroll-shot img{
  display:block;
  width:100%;
  height:auto;
  min-height:100%;
  object-fit:cover;
  object-position:top center;
  transition: transform .8s ease;
}
.scroll-shot:hover img{
  /* revela página inteira descendo */
  object-fit:cover;
  transform: translateY(calc(-100% + 100% * (var(--vh, 220) / var(--ih, 900))));
  animation: shot-scroll 8s linear infinite alternate;
}
@keyframes shot-scroll{
  from { transform: translateY(0); }
  to { transform: translateY(calc(-1 * max(0px, 100% - 220px))); }
}
.scroll-shot.desk:hover img{
  animation: shot-scroll-desk 10s ease-in-out infinite alternate;
}
@keyframes shot-scroll-desk{
  from { transform: translateY(0); }
  to { transform: translateY(calc(-1 * max(0px, 100% - 280px))); }
}

/* Portfolio admin */
.portfolio-admin-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:1rem;
}
.pf-card{
  background:var(--surface);
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
  position:relative;
}
.pf-card.on-air{border-color:color-mix(in srgb, var(--primary) 55%, var(--line))}
.pf-check{
  position:absolute;top:.55rem;left:.55rem;z-index:2;
  background:rgba(255,255,255,.92);padding:.25rem .45rem;font-size:.72rem;font-weight:700;
  display:flex;align-items:center;gap:.35rem;border:1px solid var(--line)
}
html[data-theme="dark"] .pf-check{background:rgba(15,23,42,.9);color:#fff}
.pf-shots{
  display:grid;
  grid-template-columns:1fr 72px;
  gap:.4rem;
  padding:.55rem;
  background:#0b1220;
  min-height:160px;
}
.pf-desk{aspect-ratio:16/10;overflow:hidden}
.pf-mob{aspect-ratio:9/16;overflow:hidden;border-radius:10px;align-self:center}
.pf-desk img,.pf-mob img{width:100%;display:block}
.pf-empty{color:#94a3b8;font-size:.8rem;display:grid;place-items:center;height:100%}
.pf-body{padding:.85rem 1rem 1rem;display:flex;flex-direction:column;gap:.35rem}
.pf-title-row{display:flex;justify-content:space-between;gap:.5rem;align-items:center}
.pf-body small{color:var(--muted)}
.pf-body p{margin:0;font-size:.86rem;color:var(--muted);line-height:1.45}
.pf-tech{font:600 10px/1.3 monospace;color:var(--primary);letter-spacing:.04em}
.pf-actions{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.4rem}
.pf-edit summary{cursor:pointer;font-size:.8rem;color:var(--primary)}
.pf-edit-form{margin-top:.5rem;border-top:1px solid var(--line);padding-top:.6rem}
.pf-edit-form label{display:flex;flex-direction:column;gap:.25rem;font-size:.75rem;margin-bottom:.45rem}
.pf-edit-form input,.pf-edit-form textarea{padding:.45rem .55rem;border:1px solid var(--line);background:var(--surface-2);color:var(--ink)}

/* Preview: desktop e mobile mesma altura */
.preview-dual{
  display:grid;
  grid-template-columns: 1fr 118px;
  gap:.65rem;
  padding:.65rem;
  background:#0b1220;
  align-items:stretch;
  min-height:320px;
}
.preview-dual .scroll-shot.desk,
.preview-dual .scroll-shot.mob{
  height:320px;
  aspect-ratio:auto;
  max-height:320px;
}
.preview-dual .scroll-shot.mob{
  border-radius:16px;
  width:118px;
  margin:0 auto;
}
.preview-dual .scroll-shot img{
  width:100%;
  height:auto;
  min-height:100%;
  object-fit:cover;
  object-position:top center;
}
.preview-dual .scroll-shot:hover img{
  animation: shot-scroll-desk 12s ease-in-out infinite alternate;
}
@keyframes shot-scroll-desk{
  from { transform: translateY(0); }
  to { transform: translateY(calc(-1 * max(0px, 100% - 320px))); }
}

/* Preview mais compacto — desktop e mobile mesma altura */
.preview-dual{
  min-height: 210px !important;
  padding: .5rem !important;
  gap: .5rem !important;
  grid-template-columns: 1fr 92px !important;
}
.preview-dual .scroll-shot.desk,
.preview-dual .scroll-shot.mob{
  height: 210px !important;
  max-height: 210px !important;
}
.preview-dual .scroll-shot.mob{
  width: 92px !important;
  border-radius: 14px !important;
}
@keyframes shot-scroll-desk{
  from { transform: translateY(0); }
  to { transform: translateY(calc(-1 * max(0px, 100% - 210px))); }
}

/* Portfolio create modal + upload */
.pf-modal{
  position:fixed;inset:0;z-index:80;
  background:rgba(7,13,18,.55);
  display:grid;place-items:center;padding:1rem;
}
.pf-modal[hidden]{display:none!important}
.pf-modal-card{
  background:var(--surface);border:1px solid var(--line);
  width:min(520px,100%);max-height:90vh;overflow:auto;
  padding:1.1rem 1.2rem 1.2rem;
}
.pf-modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem}
.pf-modal-head h3{margin:0;font-size:1.05rem}
.pf-create-form label,.pf-edit-form label{display:flex;flex-direction:column;gap:.3rem;font-size:.78rem;margin-bottom:.55rem}
.pf-create-form input,.pf-create-form textarea,
.pf-edit-form input,.pf-edit-form textarea{
  padding:.55rem .65rem;border:1px solid var(--line);background:var(--surface-2);color:var(--ink)
}
.pf-upload-label small{color:var(--muted);font-size:.72rem}
.pf-edit-thumb{max-width:100%;max-height:120px;object-fit:cover;border:1px solid var(--line);margin:.35rem 0}
.pf-modal-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.6rem}
.pf-check-inline{flex-direction:row!important;align-items:center;gap:.45rem!important;font-size:.85rem!important}
.pf-quick-upload{display:inline-block}
.pf-file-btn{position:relative;overflow:hidden;cursor:pointer}
.pf-file-btn input[type=file]{
  position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0
}
.flash.err{background:#fde8e8;color:#9b1c1c;border:1px solid #f5c2c2;padding:.7rem 1rem;margin-bottom:1rem}
html[data-theme="dark"] .flash.err{background:#3a1515;color:#f5b4b4;border-color:#5c2a2a}


/* ===== Layout desktop garantido ===== */
.shell{
  display:grid !important;
  grid-template-columns:268px 1fr !important;
  min-height:100vh;
}
.sb{
  position:sticky !important;
  top:0;
  width:auto !important;
  max-width:none;
  transform:none !important;
  z-index:auto;
  box-shadow:none;
}
.main{min-width:0}
.sb-backdrop{
  display:none !important;
  position:fixed;
  inset:0;
  z-index:55;
  background:rgba(7,13,18,.45);
  backdrop-filter:blur(2px);
  border:0;margin:0;padding:0;
}
body.sb-collapsed .shell{grid-template-columns:0 1fr !important}
body.sb-collapsed .sb{
  width:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  border:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
}

@media (max-width:980px){
  .shell{grid-template-columns:1fr !important}
  .sb{
    display:flex !important;
    flex-direction:column;
    position:fixed !important;
    inset:0 auto 0 0;
    width:min(288px, 88vw) !important;
    max-width:288px;
    height:100vh !important;
    z-index:60;
    transform:translateX(-105%) !important;
    transition:transform .22s ease;
    opacity:1 !important;
    pointer-events:auto !important;
    box-shadow:8px 0 32px rgba(0,0,0,.25);
  }
  body.sb-open .sb{
    transform:translateX(0) !important;
  }
  body.sb-open .sb-backdrop{
    display:block !important;
  }
  body.sb-collapsed .sb{
    transform:translateX(-105%) !important;
    width:min(288px, 88vw) !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }
  .topbar-logo{display:block}
  #btn-menu-toggle{display:inline-flex}
}

/* ---- Media picker: abas Biblioteca / Pexels ---- */
.cp-media-tabs{display:flex;gap:0;border-bottom:1px solid var(--line);padding:0 1rem}
.cp-media-tab{appearance:none;background:none;border:none;border-bottom:2px solid transparent;padding:.65rem .2rem;margin-right:1.25rem;font:inherit;font-size:.85rem;color:var(--muted);cursor:pointer}
.cp-media-tab:hover{color:var(--ink)}
.cp-media-tab.is-active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600}
.cp-media-pexels-search{display:flex;gap:.5rem;padding:.75rem 1rem 0}
.cp-media-pexels-search input{flex:1;padding:.5rem .65rem;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit}
.cp-media-card--pexels img{height:90px}

/* Amostra do logo (aba Design) */
.logo-swatch-card{background:var(--surface-2);border:1px solid var(--line);padding:1rem 1.15rem;margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.7rem}
.logo-swatch-preview{display:flex;align-items:center;justify-content:center;min-height:96px;background:repeating-conic-gradient(#00000008 0% 25%,transparent 0% 50%) 50%/16px 16px;border:1px solid var(--line);padding:1rem}
.logo-swatch-preview img{max-height:120px;max-width:100%;object-fit:contain}
.logo-swatch-empty{font-size:.85rem;color:var(--muted);text-align:center;max-width:32rem}
.logo-swatch-card .hint{margin:0;font-size:.78rem;color:var(--muted)}

.cp-media-upload-list{padding:.75rem 1rem 0;display:grid;gap:.45rem}
.cp-media-upload-list[hidden]{display:none!important}
.cp-upload-row{border:1px solid var(--line);background:var(--surface-2);padding:.55rem .65rem}
.cp-upload-meta{display:flex;justify-content:space-between;gap:.75rem;font-size:.78rem;color:var(--muted);margin-bottom:.35rem}
.cp-upload-meta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-upload-progress{height:7px;background:rgba(0,0,0,.08);overflow:hidden}
.cp-upload-progress-fill{display:block;width:0;height:100%;background:var(--primary);transition:width .15s ease}
.cp-upload-row.is-done .cp-upload-progress-fill{background:#149447}
.cp-upload-row.is-error .cp-upload-progress-fill{background:#dc3545;width:100%}