/* Painel administrativo — mesmo design system do provador (packages/widget/styles.js). */
:root{
  --cx-accent:#3d6bff; --cx-accent-soft:rgba(61,107,255,.12); --cx-danger:#d6455d;
  --cx-ink:#2b3044; --cx-mut:#7d849b; --cx-line:rgba(255,255,255,.75);
  --cx-glass:rgba(255,255,255,.52); --cx-glass-strong:rgba(255,255,255,.8);
  --cx-shadow:0 12px 40px rgba(86,98,140,.14), 0 2px 6px rgba(86,98,140,.06);
  --cx-font:"Inter","SF Pro Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box} [hidden]{display:none!important}
html,body{height:100%}
body{margin:0; font:15px/1.5 var(--cx-font); color:var(--cx-ink); -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(50% 60% at 8% 6%, rgba(214,205,255,.75), transparent 62%),
    radial-gradient(45% 50% at 94% 10%, rgba(196,224,255,.8), transparent 60%),
    radial-gradient(50% 50% at 82% 98%, rgba(255,214,222,.6), transparent 62%),
    radial-gradient(45% 50% at 12% 96%, rgba(205,238,232,.6), transparent 60%),
    linear-gradient(160deg,#eef0f8,#f4f1f8 50%,#e9eef8) fixed}
.glass{background:var(--cx-glass); border:1px solid var(--cx-line); border-radius:28px;
  backdrop-filter:blur(24px) saturate(1.35); -webkit-backdrop-filter:blur(24px) saturate(1.35); box-shadow:var(--cx-shadow)}
h1{font-size:24px; font-weight:600; margin:0; letter-spacing:-.01em}
h2{font-size:18px; font-weight:600; margin:0}
h4,.label{margin:0 0 8px; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--cx-mut)}
.mut{color:var(--cx-mut)} .small{font-size:13px}
button{font-family:inherit}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--cx-accent); outline-offset:2px}

/* botões */
.btn{border:1px solid var(--cx-line); background:var(--cx-glass-strong); color:var(--cx-ink); height:42px; padding:0 18px; border-radius:99px; font:500 14px var(--cx-font); cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; text-decoration:none; transition:transform .2s, box-shadow .2s}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(86,98,140,.16)}
.btn.primary{border:0; background:var(--cx-accent); color:#fff; font-weight:600; box-shadow:0 8px 22px rgba(61,107,255,.32)}
.btn.danger{color:var(--cx-danger)}
.btn.sm{height:34px; padding:0 14px; font-size:13px}
.icon{width:36px; height:36px; padding:0; justify-content:center; border-radius:50%}

/* campos */
.field{display:block; margin-bottom:14px}
.field > span{display:block; font-size:13px; color:var(--cx-mut); margin-bottom:5px}
input[type=text],input[type=number],input[type=password],input[type=email],input[type=search],select{width:100%; height:42px; padding:0 14px; border-radius:14px; border:1px solid var(--cx-line);
  background:var(--cx-glass-strong); font:inherit; color:var(--cx-ink)}
input[type=color]{width:42px; height:42px; padding:3px; border-radius:50%; border:2px solid #fff; background:none; cursor:pointer; box-shadow:0 3px 10px rgba(86,98,140,.22)}
.row{display:grid; gap:12px} .c2{grid-template-columns:1fr 1fr} .c3{grid-template-columns:repeat(3,1fr)}
.switch{appearance:none; -webkit-appearance:none; width:42px; height:24px; border-radius:99px; background:rgba(125,132,155,.3); position:relative; cursor:pointer; transition:background .25s; margin:0; flex:none}
.switch::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.2); transition:left .25s}
.switch:checked{background:var(--cx-accent)} .switch:checked::after{left:21px}

/* estrutura */
.app{display:grid; grid-template-columns:240px minmax(0,1fr); gap:18px; padding:18px; min-height:100%}
.nav{padding:20px 14px; display:flex; flex-direction:column; gap:4px; position:sticky; top:18px; height:calc(100vh - 36px)}
.brand{display:flex; align-items:center; gap:10px; font-weight:600; padding:4px 10px 18px}
.brand i{width:24px; height:24px; border-radius:50%; background:conic-gradient(from 210deg,#9db4ff,#d9c7ff,#ffd3dc,#bfe9e0,#9db4ff); box-shadow:inset 0 0 0 5px rgba(255,255,255,.75)}
.nav a,.nav .soon{display:flex; align-items:center; justify-content:space-between; height:42px; padding:0 14px; border-radius:99px; color:var(--cx-mut); text-decoration:none; font-weight:500; font-size:14px}
.nav a:hover{color:var(--cx-ink)} .nav a.on{background:#fff; color:var(--cx-ink); box-shadow:0 4px 14px rgba(86,98,140,.14)}
.nav .soon{opacity:.6} .nav .soon small{font-size:10px; letter-spacing:.08em; text-transform:uppercase}
.nav .foot{margin-top:auto; display:grid; gap:8px}
main{min-width:0; display:flex; flex-direction:column; gap:18px}
.head{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.head .grow{flex:1; min-width:160px}
.head input[type=search]{max-width:280px}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px}
.stat{padding:18px 20px} .stat b{display:block; font-size:30px; font-weight:600; line-height:1.1; margin-top:4px}

/* cartões de armação */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px}
.card{padding:18px; display:flex; flex-direction:column; gap:12px; transition:transform .25s, box-shadow .25s}
.card:hover{transform:translateY(-2px); box-shadow:0 18px 44px rgba(86,98,140,.18)}
.card.off{opacity:.62}
.thumb{height:104px; border-radius:20px; background:var(--cx-glass-strong); border:1px solid var(--cx-line); display:grid; place-items:center; padding:14px 34px}
.thumb svg{width:100%; max-height:76px}
.card .t{display:flex; justify-content:space-between; gap:10px; align-items:flex-start}
.card .t b{font-weight:600; display:block} .card .t span{font-size:13px; color:var(--cx-mut)}
.chips{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.chip{font-size:12px; padding:3px 10px; border-radius:99px; background:var(--cx-accent-soft); color:var(--cx-accent); font-weight:500}
.dot{width:16px; height:16px; border-radius:50%; border:2px solid #fff; box-shadow:0 1px 4px rgba(86,98,140,.3)}
.card .f{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto}
.card .f label{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--cx-mut); cursor:pointer}
.empty{padding:44px 20px; text-align:center}

/* gaveta de edição */
.scrim{position:fixed; inset:0; background:rgba(40,46,70,.28); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); z-index:10}
.drawer{position:fixed; top:14px; right:14px; bottom:14px; width:min(520px,calc(100vw - 28px)); z-index:11; display:flex; flex-direction:column; background:rgba(255,255,255,.82)}
.drawer header{display:flex; align-items:center; justify-content:space-between; padding:18px 20px 8px}
.drawer .body{flex:1; overflow:auto; padding:8px 20px 20px; scrollbar-width:thin}
.drawer footer{display:flex; gap:10px; padding:14px 20px; border-top:1px solid rgba(125,132,155,.16)}
.preview{height:210px; border-radius:22px; margin-bottom:18px; position:relative; overflow:hidden;
  background:radial-gradient(70% 90% at 30% 20%, rgba(214,205,255,.6), transparent 65%), radial-gradient(70% 90% at 80% 90%, rgba(255,214,222,.55), transparent 65%), #f1f2f9}
.preview canvas{width:100%; height:100%; display:block; cursor:grab; touch-action:none}
.preview small{position:absolute; left:14px; bottom:10px; color:var(--cx-mut); font-size:12px; pointer-events:none}
.shapes{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.shape{border:1px solid var(--cx-line); background:var(--cx-glass-strong); border-radius:16px; padding:10px 8px 6px; cursor:pointer; font:500 12px var(--cx-font); color:var(--cx-mut); text-align:center}
.shape svg{width:100%; height:26px; display:block; margin-bottom:4px}
.shape.on{box-shadow:0 0 0 2px var(--cx-accent); color:var(--cx-accent)}
.line{display:grid; grid-template-columns:42px 1fr auto 36px; gap:10px; align-items:center; margin-bottom:8px}
.line label{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--cx-mut); cursor:pointer; white-space:nowrap}
.checks{display:flex; flex-wrap:wrap; gap:8px}
.check{display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px; border-radius:99px; border:1px solid var(--cx-line); background:var(--cx-glass-strong); font-size:13px; cursor:pointer}
.check:has(input:checked){background:var(--cx-accent-soft); color:var(--cx-accent); border-color:transparent}
.check input{position:absolute; opacity:0; pointer-events:none}
.sec{margin-top:22px}
.err{background:rgba(214,69,93,.1); color:var(--cx-danger); border-radius:14px; padding:10px 14px; font-size:14px; margin-bottom:14px}

/* listas e janelas */
.list{padding:8px 18px}
.item{display:flex; align-items:center; gap:14px; padding:14px 0; flex-wrap:wrap}
.item + .item{border-top:1px solid rgba(125,132,155,.16)}
.item .who{flex:1; min-width:180px} .item .who b{display:block; font-weight:600} .item .who span{font-size:13px; color:var(--cx-mut)}
.item.off .who,.item.off .chip{opacity:.55}
.avatar{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-weight:600; color:#fff; flex:none;
  background:linear-gradient(135deg,#9db4ff,#d9c7ff 55%,#ffd3dc)}
.modal{width:min(440px,calc(100vw - 28px)); padding:26px; color:var(--cx-ink); background:rgba(255,255,255,.9)}
.modal::backdrop{background:rgba(40,46,70,.3); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.modal h2{margin-bottom:14px}
.actions{display:flex; gap:10px; margin-top:18px; align-items:center}

.quick{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px}
.pick{display:block; cursor:pointer; padding:14px 16px; border-radius:18px; border:1px dashed rgba(125,132,155,.5); background:var(--cx-glass-strong); margin-bottom:10px}
.pick b{display:block; font-weight:600; font-size:14px} .pick span{font-size:13px; color:var(--cx-mut)} .pick.ok{border-style:solid; border-color:var(--cx-accent)} .pick.ok span{color:var(--cx-accent)}
.qbtn{text-align:left; cursor:pointer; padding:12px 13px; border-radius:18px; border:1px solid var(--cx-line); background:var(--cx-accent-soft); color:var(--cx-ink); transition:transform .2s, box-shadow .2s}
.qbtn:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(61,107,255,.16)}
.qbtn b{display:block; color:var(--cx-accent); font-weight:600; font-size:14px} .qbtn span{font-size:12.5px; color:var(--cx-mut); line-height:1.35; display:block; margin-top:2px}
@media(max-width:620px){.quick{grid-template-columns:1fr}}
.trace{margin-top:12px}
#tResult{margin-bottom:16px; background:var(--cx-glass-strong); border:1px solid var(--cx-line); border-radius:18px; padding:12px}
#tCanvas{display:block; width:100%; height:auto; border-radius:12px}
#tList{margin:10px 0 0; padding-left:18px; color:var(--cx-mut)} #tList b{color:var(--cx-ink)}

/* entrada e integração */
.login{max-width:400px; margin:14vh auto 0; padding:30px}
.code{background:rgba(43,48,68,.92); color:#e8ebf7; border-radius:18px; padding:16px 18px; font:13px/1.6 ui-monospace,Consolas,monospace; overflow:auto; white-space:pre; margin:8px 0 18px}
.panel{padding:24px}
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); padding:10px 20px; border-radius:99px; background:rgba(43,48,68,.92); color:#fff; font-size:14px; z-index:20; box-shadow:var(--cx-shadow)}

@media(max-width:860px){
  .app{grid-template-columns:1fr; padding:12px}
  .nav{position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; padding:10px}
  .nav .brand{padding:4px 10px} .nav .soon{display:none} .nav .foot{margin:0 0 0 auto; display:flex}
  .shapes{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}