/* ============================================================
   ClickService — Painel Superadmin (Revenda SPI Evolution)
   Premium • sidebar retrátil • claro/escuro • responsivo
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  --blue-500:#2b8fff; --blue-600:#1e6ff0; --blue-700:#0d47c9;
  --orange:#f7941d;   --orange-2:#ff7a18;
  --primary:var(--blue-600); --secondary:var(--orange);
  --grad:linear-gradient(135deg,var(--blue-600) 0%,var(--blue-500) 45%,var(--orange) 125%);
  --grad-soft:linear-gradient(135deg,rgba(30,111,240,.16),rgba(247,148,29,.12));

  --bg:#080f20; --bg-2:#0a1428; --panel:#0f1d38; --panel-2:#12233f;
  --sidebar:#0b1730; --card:#101f3c;
  --border:rgba(255,255,255,.08); --border-2:rgba(255,255,255,.14);
  --text:#e9eefb; --muted:#94a3c4; --muted-2:#6b7aa0;
  --shadow:0 20px 60px -20px rgba(0,0,0,.6);
  --shadow-lg:0 30px 80px -24px rgba(0,0,0,.7);
  --ring:rgba(43,143,255,.45);
  --ok:#22c55e; --warn:#f7941d; --danger:#ef4444; --info:#2b8fff;
  --radius:16px; --radius-sm:11px;
  --sbw:264px; --sbw-collapsed:78px; --topbar:66px;
}
[data-theme="light"]{
  --bg:#eaf0fb; --bg-2:#e4ebf7; --panel:#ffffff; --panel-2:#f5f8ff;
  --sidebar:#0c1a34; --card:#ffffff;
  --border:rgba(13,30,60,.10); --border-2:rgba(13,30,60,.16);
  --text:#0e1b34; --muted:#556488; --muted-2:#8492b4;
  --shadow:0 18px 46px -22px rgba(30,60,120,.32);
  --shadow-lg:0 26px 64px -26px rgba(30,60,120,.4);
  --ring:rgba(30,111,240,.35); --card:#ffffff;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);
  line-height:1.55;-webkit-font-smoothing:antialiased;
  transition:background .4s ease,color .3s ease;
}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;line-height:1.15;margin:0}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::selection{background:rgba(43,143,255,.35)}

/* ambient */
.bg-fx{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bg-fx .glow{position:absolute;border-radius:50%;filter:blur(100px);opacity:.4}
.bg-fx .g1{width:420px;height:420px;background:var(--blue-600);top:-120px;right:-60px}
.bg-fx .g2{width:360px;height:360px;background:var(--orange);bottom:-120px;left:-60px;opacity:.25}

/* ================= LAYOUT ================= */
.admin{min-height:100vh;position:relative;z-index:1}
.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:var(--sbw);z-index:60;
  background:linear-gradient(180deg,var(--sidebar),#0a1630);
  border-right:1px solid rgba(255,255,255,.06);
  display:flex;flex-direction:column;color:#dbe6ff;
  transition:width .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1);
}
.sidebar::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 60% at 0% 0%,rgba(30,111,240,.14),transparent 60%);pointer-events:none}
.sb-brand{display:flex;align-items:center;gap:12px;padding:16px 18px;min-height:var(--topbar);border-bottom:1px solid rgba(255,255,255,.06)}
.sb-brand img{width:40px;height:40px;border-radius:11px;flex:none;box-shadow:0 6px 18px -6px rgba(0,0,0,.6)}
.sb-brand .bt{display:flex;flex-direction:column;overflow:hidden;white-space:nowrap}
.sb-brand .bt b{font-family:'Space Grotesk';font-size:15px;letter-spacing:.2px}
.sb-brand .bt span{font-size:11px;color:#8ea4cc;letter-spacing:.4px;text-transform:uppercase}

.sb-nav{flex:1;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:3px}
.sb-nav::-webkit-scrollbar{width:6px}
.sb-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:10px}
.sb-sec{font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:#6c81aa;padding:14px 12px 6px;white-space:nowrap}
.sb-link{
  display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;
  color:#b9c8e8;font-weight:500;font-size:14.5px;white-space:nowrap;position:relative;
  transition:background .18s,color .18s,transform .18s;
}
.sb-link svg{width:20px;height:20px;flex:none;stroke-width:1.9}
.sb-link:hover{background:rgba(255,255,255,.06);color:#fff}
.sb-link.active{background:var(--grad-soft);color:#fff}
.sb-link.active::before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:4px;height:22px;border-radius:0 6px 6px 0;background:var(--grad)}
.sb-link .lbl{overflow:hidden}
.sb-foot{padding:12px;border-top:1px solid rgba(255,255,255,.06)}
.sb-foot .evo{font-size:10.5px;color:#5f75a0;padding:4px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* collapsed (desktop) */
.admin.collapsed .sidebar{width:var(--sbw-collapsed)}
.admin.collapsed .sb-brand .bt,
.admin.collapsed .sb-nav .lbl,
.admin.collapsed .sb-sec,
.admin.collapsed .sb-foot .evo{opacity:0;width:0;pointer-events:none}
.admin.collapsed .sb-brand{justify-content:center;padding:16px 8px}
.admin.collapsed .sb-link{justify-content:center;padding:11px}
.admin.collapsed .sb-link.active::before{left:-12px}
.admin.collapsed .main{margin-left:var(--sbw-collapsed)}

/* main */
.main{margin-left:var(--sbw);transition:margin-left .3s cubic-bezier(.4,0,.2,1);min-height:100vh;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:40;height:var(--topbar);display:flex;align-items:center;gap:14px;
  padding:0 22px;background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--border);
}
.icon-btn{
  width:40px;height:40px;border-radius:11px;border:1px solid var(--border);background:var(--panel);
  color:var(--text);display:grid;place-items:center;cursor:pointer;flex:none;
  transition:background .18s,border-color .18s,transform .12s;
}
.icon-btn:hover{background:var(--panel-2);border-color:var(--border-2)}
.icon-btn:active{transform:scale(.94)}
.icon-btn svg{width:20px;height:20px;stroke-width:2}
.tb-title{font-family:'Space Grotesk';font-size:17px;font-weight:600}
.tb-crumb{font-size:12px;color:var(--muted)}
.tb-spacer{flex:1}
.tb-user{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 14px;border:1px solid var(--border);border-radius:40px;background:var(--panel)}
.tb-user .av{width:30px;height:30px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px;font-family:'Space Grotesk'}
.tb-user .un{font-size:13px;font-weight:600;line-height:1.1}
.tb-user .ur{font-size:11px;color:var(--muted)}
@media(max-width:560px){.tb-user .un,.tb-user .ur{display:none}.tb-user{padding:5px;border-radius:50%}}

.content{padding:26px 22px 60px;max-width:1240px;width:100%;margin:0 auto;flex:1}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.page-head h1{font-size:26px;letter-spacing:-.5px}
.page-head p{color:var(--muted);font-size:14px;margin:4px 0 0}

/* ================= CARDS / STATS ================= */
.grid{display:grid;gap:16px}
.stats{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.card.pad{padding:20px}
.stat{padding:20px;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:var(--grad-soft);opacity:.6}
.stat .ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--grad-soft);color:var(--blue-500);margin-bottom:4px;position:relative;z-index:1}
.stat .ic svg{width:23px;height:23px;stroke-width:2}
.stat .lbl{font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;position:relative;z-index:1}
.stat .val{font-family:'Space Grotesk';font-size:28px;font-weight:700;line-height:1;position:relative;z-index:1}
.stat .sub{font-size:12px;color:var(--muted-2);position:relative;z-index:1}
.stat.green .ic{color:var(--ok)} .stat.orange .ic{color:var(--orange)} .stat.blue .ic{color:var(--blue-500)}

.section{margin-top:26px}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.section-head h2{font-size:18px}

/* ================= TABLE ================= */
.table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border);background:var(--card);box-shadow:var(--shadow)}
table.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
table.tbl th{
  text-align:left;font-weight:600;font-size:11.5px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--muted);padding:14px 16px;border-bottom:1px solid var(--border);white-space:nowrap;
  background:color-mix(in srgb,var(--panel-2) 60%,transparent);position:sticky;top:0
}
table.tbl td{padding:13px 16px;border-bottom:1px solid var(--border);vertical-align:middle}
table.tbl tr:last-child td{border-bottom:none}
table.tbl tbody tr{transition:background .15s}
table.tbl tbody tr:hover{background:color-mix(in srgb,var(--blue-600) 6%,transparent)}
.t-strong{font-weight:600}
.t-mono{font-family:'JetBrains Mono',monospace;font-size:12.5px}
.t-mut{color:var(--muted);font-size:12.5px}
.empty{padding:52px 20px;text-align:center;color:var(--muted)}
.empty svg{width:46px;height:46px;opacity:.4;margin-bottom:10px}

/* status pills */
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:40px;font-size:12px;font-weight:600;line-height:1.4;white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.ok{color:var(--ok);background:rgba(34,197,94,.12)}
.pill.pending{color:var(--orange);background:rgba(247,148,29,.13)}
.pill.fail{color:var(--danger);background:rgba(239,68,68,.12)}
.pill.mut{color:var(--muted);background:rgba(148,163,196,.14)}
.pill.info{color:var(--blue-500);background:rgba(43,143,255,.13)}

/* ================= BUTTONS ================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  border:1px solid transparent;border-radius:12px;padding:11px 18px;font-size:14px;font-weight:600;
  transition:transform .12s,box-shadow .2s,background .2s,border-color .2s,opacity .2s;white-space:nowrap
}
.btn svg{width:18px;height:18px;stroke-width:2}
.btn:active{transform:translateY(1px) scale(.99)}
.btn.primary{background:var(--grad);color:#fff;box-shadow:0 12px 26px -12px rgba(30,111,240,.7)}
.btn.primary:hover{box-shadow:0 16px 32px -12px rgba(30,111,240,.85)}
.btn.ghost{background:var(--panel);color:var(--text);border-color:var(--border)}
.btn.ghost:hover{background:var(--panel-2);border-color:var(--border-2)}
.btn.danger{background:rgba(239,68,68,.12);color:var(--danger);border-color:rgba(239,68,68,.3)}
.btn.danger:hover{background:rgba(239,68,68,.2)}
.btn.sm{padding:8px 13px;font-size:13px;border-radius:10px}
.btn.block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.act-row{display:flex;gap:7px;flex-wrap:wrap}
.act{
  width:34px;height:34px;border-radius:9px;border:1px solid var(--border);background:var(--panel);
  color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:all .15s
}
.act svg{width:16px;height:16px;stroke-width:2}
.act:hover{color:var(--text);border-color:var(--border-2);background:var(--panel-2)}
.act.dz:hover{color:var(--danger);border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.1)}
.act.gz:hover{color:var(--ok);border-color:rgba(34,197,94,.4);background:rgba(34,197,94,.1)}

/* ================= FORMS ================= */
.form-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:13px;font-weight:600;color:var(--text)}
.field .hint{font-size:12px;color:var(--muted-2)}
.input,textarea,select{
  width:100%;padding:11px 13px;border-radius:11px;border:1px solid var(--border);
  background:var(--panel);color:var(--text);font-size:14px;font-family:inherit;
  transition:border-color .18s,box-shadow .18s,background .18s;
}
textarea{resize:vertical;min-height:92px;line-height:1.5}
.input:focus,textarea:focus,select:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 4px var(--ring)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2394a3c4' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:38px}
.input-mono{font-family:'JetBrains Mono',monospace;font-size:13px}
.input-group{display:flex;gap:8px}
.input-group .input{flex:1}

/* toggle switch */
.switch{position:relative;display:inline-flex;align-items:center;gap:11px;cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{width:46px;height:26px;border-radius:40px;background:var(--panel-2);border:1px solid var(--border-2);transition:background .2s;flex:none;position:relative}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.3);transition:transform .22s cubic-bezier(.4,0,.2,1)}
.switch input:checked+.track{background:var(--grad);border-color:transparent}
.switch input:checked+.track::after{transform:translateX(20px)}
.switch .stx{font-size:13.5px;font-weight:500}

.divider{height:1px;background:var(--border);margin:22px 0}
.form-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:6px}

/* tabs */
.tabs{display:flex;gap:4px;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:5px;margin-bottom:20px;overflow-x:auto}
.tab{padding:9px 16px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;transition:all .18s;border:none;background:transparent}
.tab.active{background:var(--grad-soft);color:var(--text)}
.tab-panel{display:none;animation:fade .3s ease}
.tab-panel.active{display:block}

/* repeater (features/faq editor) */
.rep-item{border:1px solid var(--border);border-radius:14px;padding:16px;background:var(--panel);margin-bottom:12px;position:relative}
.rep-item .rep-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.rep-item .rep-head span{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.chip-list{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 10px 7px 13px;border-radius:40px;background:var(--panel-2);border:1px solid var(--border);font-size:13px}
.chip button{border:none;background:transparent;color:var(--muted);cursor:pointer;display:grid;place-items:center;padding:0}
.chip button:hover{color:var(--danger)}

/* ================= MODAL (premium) ================= */
.modal-overlay{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(6,12,26,.62);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .25s
}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal{
  width:100%;max-width:460px;background:var(--card);border:1px solid var(--border-2);border-radius:22px;
  box-shadow:var(--shadow-lg);transform:translateY(18px) scale(.96);opacity:0;
  transition:transform .32s cubic-bezier(.34,1.56,.64,1),opacity .25s;overflow:hidden;position:relative
}
.modal.lg{max-width:680px}
.modal-overlay.open .modal{transform:translateY(0) scale(1);opacity:1}
.modal-accent{height:4px;background:var(--grad)}
.modal.danger .modal-accent{background:linear-gradient(90deg,#ef4444,#f97316)}
.modal-body{padding:26px 26px 8px;text-align:center}
.modal.form-modal .modal-body{text-align:left}
.modal-ic{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;margin:0 auto 16px;background:var(--grad-soft);color:var(--blue-500)}
.modal.danger .modal-ic{background:rgba(239,68,68,.14);color:var(--danger)}
.modal.ok .modal-ic{background:rgba(34,197,94,.14);color:var(--ok)}
.modal-ic svg{width:30px;height:30px;stroke-width:2}
.modal h3{font-size:20px;margin-bottom:8px}
.modal-msg{color:var(--muted);font-size:14.5px;line-height:1.6}
.modal-foot{display:flex;gap:10px;padding:22px 26px 26px}
.modal-foot .btn{flex:1}
.modal.form-modal .modal-foot{padding-top:12px}
.modal-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:10px;border:none;background:var(--panel);color:var(--muted);cursor:pointer;display:grid;place-items:center;z-index:2}
.modal-close:hover{color:var(--text);background:var(--panel-2)}
.modal-scroll{max-height:min(70vh,640px);overflow-y:auto;padding:26px 26px 8px}

/* ================= TOAST ================= */
.toast-wrap{position:fixed;top:18px;right:18px;z-index:300;display:flex;flex-direction:column;gap:10px;max-width:calc(100vw - 36px)}
.toast{
  display:flex;align-items:flex-start;gap:12px;min-width:280px;max-width:380px;padding:14px 16px;
  border-radius:14px;background:var(--card);border:1px solid var(--border-2);box-shadow:var(--shadow-lg);
  transform:translateX(120%);opacity:0;transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .3s;position:relative;overflow:hidden
}
.toast.show{transform:translateX(0);opacity:1}
.toast::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.toast.ok::before{background:var(--ok)} .toast.err::before{background:var(--danger)}
.toast.info::before{background:var(--blue-500)} .toast.warn::before{background:var(--orange)}
.toast .ti{width:22px;height:22px;flex:none;margin-top:1px}
.toast.ok .ti{color:var(--ok)} .toast.err .ti{color:var(--danger)}
.toast.info .ti{color:var(--blue-500)} .toast.warn .ti{color:var(--orange)}
.toast .tc{flex:1}
.toast .tt{font-weight:600;font-size:14px;margin-bottom:2px}
.toast .tm{font-size:13px;color:var(--muted);line-height:1.4}
.toast .tx{border:none;background:transparent;color:var(--muted-2);cursor:pointer;padding:0;display:grid;place-items:center}
.toast .tx:hover{color:var(--text)}
.toast .bar{position:absolute;bottom:0;left:0;height:3px;background:var(--grad);animation:shrink linear forwards}

/* login */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;position:relative;z-index:1}
.login-card{width:100%;max-width:410px;background:var(--card);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow-lg);padding:38px 34px;position:relative;overflow:hidden}
.login-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad)}
.login-logo{text-align:center;margin-bottom:24px}
.login-logo img{width:74px;height:74px;border-radius:20px;box-shadow:0 12px 30px -10px rgba(0,0,0,.6)}
.login-logo h1{font-size:22px;margin-top:14px}
.login-logo p{color:var(--muted);font-size:13px;margin:4px 0 0}
.login-card .field{margin-bottom:15px}

/* misc */
.copy-inline{cursor:pointer;transition:color .15s}
.copy-inline:hover{color:var(--blue-500)}
.help-box{background:var(--grad-soft);border:1px solid var(--border);border-radius:14px;padding:14px 16px;font-size:13px;color:var(--muted);display:flex;gap:11px;align-items:flex-start}
.help-box svg{width:19px;height:19px;flex:none;color:var(--blue-500);margin-top:1px}
.overlay-scrim{position:fixed;inset:0;background:rgba(6,12,26,.5);z-index:55;opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(2px)}

@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes shrink{from{width:100%}to{width:0}}
.reveal{animation:fade .4s ease both}

/* ================= RESPONSIVE ================= */
@media(max-width:920px){
  .sidebar{transform:translateX(-100%);box-shadow:var(--shadow-lg);width:var(--sbw)!important}
  .admin.sb-open .sidebar{transform:translateX(0)}
  .admin.sb-open .overlay-scrim{opacity:1;pointer-events:auto}
  .main{margin-left:0!important}
  .admin.collapsed .sb-brand .bt,.admin.collapsed .sb-nav .lbl,.admin.collapsed .sb-sec,.admin.collapsed .sb-foot .evo{opacity:1;width:auto}
  .admin.collapsed .sb-brand{justify-content:flex-start;padding:16px 18px}
  .admin.collapsed .sb-link{justify-content:flex-start;padding:11px 12px}
}
@media(max-width:560px){
  .content{padding:20px 14px 50px}
  .page-head h1{font-size:22px}
  .modal-foot{flex-direction:column-reverse}
  .toast-wrap{left:12px;right:12px;top:12px}
  .toast{min-width:0;max-width:none}
}

/* mobile card table */
@media(max-width:680px){
  .table-wrap.cards table.tbl,.table-wrap.cards thead,.table-wrap.cards tbody,.table-wrap.cards th,.table-wrap.cards td,.table-wrap.cards tr{display:block;min-width:0}
  .table-wrap.cards{overflow:visible;border:none;background:transparent;box-shadow:none}
  .table-wrap.cards thead{display:none}
  .table-wrap.cards tr{background:var(--card);border:1px solid var(--border);border-radius:14px;margin-bottom:12px;padding:6px 4px;box-shadow:var(--shadow)}
  .table-wrap.cards td{border:none;padding:8px 16px;display:flex;justify-content:space-between;align-items:center;gap:14px;text-align:right}
  .table-wrap.cards td::before{content:attr(data-label);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);text-align:left}
  .table-wrap.cards td:last-child{justify-content:flex-end}
}

/* ============================================================
   PREMIUM PACK — admin (aditivo, sobrescreve via cascata)
   Corrige: autofill quebrando o tema, botões azuis→laranja,
   círculo dos stat cards, cantos do login. Não altera funções.
   ============================================================ */

/* ---- Autofill do Chrome não quebra mais o tema escuro/claro ---- */
.input:-webkit-autofill, .input:-webkit-autofill:hover, .input:-webkit-autofill:focus,
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  -webkit-text-fill-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--panel) inset !important;
  box-shadow: 0 0 0 1000px var(--panel) inset !important;
  caret-color: var(--text); border-color: var(--border) !important;
  transition: background-color 9999s ease-out 0s;
}

/* ---- Botão base: habilita brilho deslizante ---- */
.btn { position: relative; overflow: hidden; isolation: isolate; }

/* ---- Botão primário LARANJA + sweep (igual à landing) ---- */
.btn.primary {
  background: linear-gradient(135deg, #ff9d33 0%, #f7941d 46%, #ef6c0a 100%);
  box-shadow: 0 12px 28px -12px rgba(247,148,29,.6), inset 0 1px 0 rgba(255,255,255,.28);
  text-shadow: 0 1px 2px rgba(120,55,0,.32);
}
.btn.primary::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(120deg, transparent 22%, rgba(255,255,255,.45) 50%, transparent 78%);
  transform: translateX(-130%); transition: transform .6s ease;
}
.btn.primary:hover {
  box-shadow: 0 18px 40px -12px rgba(247,148,29,.8), inset 0 1px 0 rgba(255,255,255,.34);
}
.btn.primary:hover::before { transform: translateX(130%); }

/* ---- Botão fantasma: toque laranja no hover ---- */
.btn.ghost:hover { border-color: rgba(247,148,29,.5); }

/* ---- Login: cantos do detalhe superior + brilho suave no CTA ---- */
.login-card::before { border-radius: 24px 24px 0 0; }
.login-card .btn.primary { animation: admCtaGlow 3.6s ease-in-out infinite; }
@keyframes admCtaGlow {
  0%,100% { box-shadow: 0 12px 28px -12px rgba(247,148,29,.55), inset 0 1px 0 rgba(255,255,255,.28); }
  50%     { box-shadow: 0 16px 40px -12px rgba(247,148,29,.85), inset 0 1px 0 rgba(255,255,255,.32); }
}

/* ---- Stat cards: círculo vira glow discreto + linha de marca + hover ---- */
.card.stat { transition: transform .3s cubic-bezier(.34,1.4,.5,1), box-shadow .3s, border-color .3s; }
.card.stat::after {
  width: 160px; height: 160px; right: -46px; top: -46px; opacity: .55; border-radius: 50%;
  background: radial-gradient(circle at 32% 32%, rgba(247,148,29,.20), rgba(30,111,240,.12) 52%, transparent 72%);
}
.card.stat::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--blue-500), var(--orange)); opacity: .9;
}
.card.stat:hover { transform: translateY(-5px); border-color: var(--border-2); box-shadow: var(--shadow-lg); }
.card.stat .ic { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.card.stat:hover .ic { transform: scale(1.08) rotate(-4deg); }

/* ---- Sidebar: barra do item ativo em laranja ---- */
.sb-link.active::before { background: linear-gradient(180deg, var(--orange), var(--blue-500)); }

/* ---- Tabelas: leve realce no hover das linhas ---- */
table.tbl tbody tr:hover { background: color-mix(in srgb, var(--orange) 5%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .login-card .btn.primary { animation: none !important; }
}

/* ---- Drag handle (reordenar planos) ---- */
.drag-cell { width: 44px; }
.drag-handle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px; cursor: grab;
  color: var(--muted-2); transition: background .15s, color .15s;
}
.drag-handle:hover { color: var(--text); background: var(--panel-2); }
.drag-handle:active { cursor: grabbing; }
table.tbl tr.dragging { opacity: .5; background: var(--panel-2); }
table.tbl tr.dragging td { border-color: transparent; }
@media (max-width: 680px) {
  .table-wrap.cards .drag-cell { justify-content: flex-start; }
  .table-wrap.cards .drag-cell::before { content: "Ordenar"; }
}