/* Panel: modern look over style.css, in the brand colours. Loaded after style.css; nothing here
   changes behaviour. Brand: red #EE2F45 -> pink, cyan #5cc7d4 -> blue. */
:root{--accent:#ee2f45;--accent-2:#5cc7d4;--ink:#121826;--muted:#6b7586;--border:#e7ebf2;--bg:#f4f6fb;--card:#fff;
  --grad:linear-gradient(135deg,#f0283c 0%,#ff5a6e 100%);--grad-cyan:linear-gradient(135deg,#6fd0dc 0%,#2389cf 100%);
  --shadow:0 1px 2px rgba(16,24,40,.04),0 6px 24px rgba(16,24,40,.05);--radius:16px;
  font-family:"Inter","Segoe UI Variable","Segoe UI",system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--bg)}
body{background:var(--bg);-webkit-font-smoothing:antialiased}

/* sidebar: grouped, scrollable, softer */
aside{width:248px;padding:22px 14px 18px;background:linear-gradient(180deg,#0d121d 0%,#121a2a 100%);border-right:1px solid #1d2636;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#2a3446 transparent}
aside .brand{padding:4px 10px;margin-bottom:20px}
aside .brand img.official-logo{height:34px;width:auto}
.sidebar-caption{display:none}
nav{gap:2px}
nav .nav-group{font-size:10.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#5f6b80;padding:16px 12px 6px}
nav .nav-group:first-child{padding-top:4px}
nav a{padding:9px 12px;font-size:13.5px;border-radius:10px;color:#aab3c3;transition:background .15s,color .15s}
nav a:hover{background:#1a2333;color:#fff}
nav a.active{background:var(--grad);color:#fff;box-shadow:0 6px 18px rgba(240,40,60,.28)}
nav .symbol{width:20px;font-size:15px;opacity:.9}
.sidebar-bottom{border-top:1px solid #222c3c;padding:16px 10px 0;margin-top:18px}
.workspace{margin-left:248px;min-height:100vh}

/* header: light glass, sticky */
header{position:sticky;top:0;z-index:20;height:66px;padding:0 32px;background:rgba(255,255,255,.82);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--border)}
.breadcrumb b{color:var(--ink);font-weight:600}
.avatar{background:var(--grad);color:#fff}
.local-badge{background:#ecfbfd;color:#1f8a97}
main#content{padding:28px 32px 40px;max-width:1480px}
footer{padding:18px 32px 28px;color:#9aa3b2;font-size:12px}

/* titles */
.page-top{align-items:flex-end;gap:16px;margin-bottom:22px}
.page-top h1{font-size:28px;letter-spacing:-.6px;margin:0 0 6px;font-weight:750}
.page-top .sub,.sub{color:var(--muted)}

/* cards, metrics, tables */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.metrics{gap:16px}
.metric{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);position:relative;overflow:hidden}
.metric::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad);opacity:.85}
.metric:nth-child(2n)::before{background:var(--grad-cyan)}
.metric strong{font-size:30px;letter-spacing:-.8px}
.metric p{color:var(--muted);font-weight:600;font-size:13px}
table{border-collapse:separate;border-spacing:0}
thead th{background:#f8fafc;color:#7a8496;font-size:11px;letter-spacing:.8px;text-transform:uppercase;font-weight:700;border-bottom:1px solid var(--border)}
tbody tr{transition:background .12s}
tbody tr:hover{background:#fafbfe}
tbody td{border-bottom:1px solid #f0f2f7}
.table-card{overflow:hidden}

/* buttons and fields */
button{border-radius:10px;background:#eef1f6;color:#253046;transition:transform .08s,box-shadow .15s,filter .15s}
button:active{transform:translateY(1px)}
button.primary,.primary{background:var(--grad);color:#fff;box-shadow:0 6px 16px rgba(240,40,60,.22)}
button.primary:hover{filter:brightness(1.05)}
input,select,textarea{border-radius:10px;border:1px solid #dfe4ec;background:#fff;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:#ff7a8a;box-shadow:0 0 0 4px rgba(238,47,69,.12);outline:none}
dialog#modal{border:0;border-radius:20px;box-shadow:0 30px 80px rgba(10,15,30,.35);padding:0;max-width:min(640px,94vw)}
dialog#modal::backdrop{background:rgba(10,14,24,.55);backdrop-filter:blur(3px)}
#modal-body{padding:24px 26px}
#toast{border-radius:12px;box-shadow:0 12px 34px rgba(10,15,30,.25)}

/* Início (dashboard) */
.home-hello{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.home-hello h1{font-size:30px;letter-spacing:-.8px;margin:0 0 6px}
.home-hello p{margin:0;color:var(--muted)}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:18px}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 18px 16px;position:relative;overflow:hidden}
.kpi .ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:18px;margin-bottom:12px;background:#fff1f3}
.kpi.cyan .ico{background:#e7fafc}.kpi.green .ico{background:#e9f9f0}.kpi.amber .ico{background:#fff6e5}.kpi.violet .ico{background:#f1edff}
.kpi b{display:block;font-size:30px;letter-spacing:-1px;line-height:1.1}
.kpi span{display:block;color:var(--muted);font-size:13px;font-weight:600;margin-top:4px}
.kpi small{display:block;color:#8a93a3;font-size:12px;margin-top:8px}
.kpi small em{font-style:normal;color:#0f9f6e;font-weight:700}
.home-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin-bottom:16px}
.home-grid.even{grid-template-columns:1fr 1fr}
.panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px}
.panel h2{font-size:15px;margin:0 0 4px;letter-spacing:-.2px}
.panel .hint{color:var(--muted);font-size:12.5px;margin:0 0 14px}
.chart svg{width:100%;height:auto;display:block}
.legend{display:flex;gap:16px;font-size:12px;color:var(--muted);margin-top:10px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.bars-list{display:flex;flex-direction:column;gap:12px}
.bars-list .row{display:grid;grid-template-columns:70px 1fr 64px;align-items:center;gap:10px;font-size:13px}
.bars-list .track{height:9px;border-radius:9px;background:#eef1f6;overflow:hidden}
.bars-list .fill{height:100%;border-radius:9px;background:var(--grad-cyan)}
.bars-list .fill.hot{background:var(--grad)}
.bars-list .num{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.quick{display:flex;gap:10px;flex-wrap:wrap}
.quick a{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;background:#f3f5fa;font-weight:600;font-size:13px;color:#273147}
.quick a:hover{background:#eceff6}
.empty-note{color:var(--muted);font-size:13px;padding:8px 0}

/* Equipe (owner) */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-block;padding:4px 9px;border-radius:999px;font-size:11.5px;font-weight:700;background:#f1f3f8;color:#4a5568}
.chip.red{background:#fff0f2;color:#d61f38}.chip.cyan{background:#e8fafc;color:#1f8a97}.chip.green{background:#e9f9f0;color:#0f8a5f}.chip.gray{background:#f1f3f8;color:#7a8496}.chip.amber{background:#fff4e0;color:#b26a00}
.share{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:linear-gradient(135deg,#fff5f6,#effbfd);border:1px solid #f3dde1}
.share code{font-size:14px;background:#fff;border:1px solid var(--border);padding:8px 12px;border-radius:10px}
.perm-list{display:grid;gap:10px;margin:8px 0 4px}
.perm-list label{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--border);border-radius:12px;cursor:pointer}
.perm-list label:has(input:checked){border-color:#ff9aa6;background:#fff7f8}
.perm-list input{width:18px;height:18px;margin-top:2px;accent-color:#ee2f45}
.perm-list b{display:block;font-size:14px}.perm-list small{color:var(--muted);font-size:12.5px}
.secret{font-family:ui-monospace,Consolas,monospace;font-size:20px;letter-spacing:1px;background:#121826;color:#fff;padding:14px 16px;border-radius:12px;text-align:center;user-select:all}
.actions-row{display:flex;gap:8px;flex-wrap:wrap}
.actions-row button{padding:7px 11px;font-size:12.5px}

@media (max-width:1100px){.home-grid,.home-grid.even{grid-template-columns:1fr}}
@media (max-width:860px){aside{position:static;width:auto;height:auto}.workspace{margin-left:0}main#content{padding:20px 16px}header{padding:0 16px}}