/* ==========================================================================
   SKIN Deep Glass: degradê azul, cards de vidro, herói profundo,
   navegação em pílula escura e barra inferior no celular.
   Paleta: #0066CC · #0099FF · #EDEDED · #FFC107 · #000033
   ========================================================================== */
:root{
  --radius:22px; --radius-sm:12px;
  --bg:#DCEBFA;
  --surface:rgba(255,255,255,.60);
  --surface-strong:rgba(255,255,255,.90);
  --surface-2:rgba(0,51,102,.04);
  --surface-3:rgba(0,51,102,.07);
  --glass-edge:rgba(255,255,255,.95);
  --line:rgba(0,51,102,.09);
  --line-strong:rgba(0,51,102,.16);
  --shadow:0 1px 1px rgba(0,0,51,.04), 0 18px 40px -22px rgba(0,40,120,.35);
  --deep:linear-gradient(165deg,#3FA6F5 0%,#0A78DC 22%,#0066CC 42%,#0B3A8A 72%,#000033 100%);
  --deep-soft:linear-gradient(180deg,#0B4AA6 0%,#062B6E 55%,#000033 100%);
}
html[data-theme="dark"]{
  --bg:#000024;
  --surface:rgba(18,40,110,.38);
  --surface-strong:rgba(12,28,82,.94);
  --glass-edge:rgba(255,255,255,.10);
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);
}
body{
  background-color:var(--bg);
  background-image:
    radial-gradient(900px 480px at 85% 8%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1200px 700px at -10% 110%, rgba(0,102,204,.40), transparent 60%),
    radial-gradient(900px 600px at 110% 100%, rgba(0,153,255,.30), transparent 60%),
    linear-gradient(180deg,#EEF5FD 0%,#DCEBFA 38%,#BCD7F4 72%,#9CC4EE 100%);
  background-attachment:fixed;
}
html[data-theme="dark"] body{
  background-image:
    radial-gradient(900px 500px at 80% 0%, rgba(0,153,255,.22), transparent 60%),
    radial-gradient(1100px 700px at -10% 110%, rgba(0,102,204,.35), transparent 60%),
    linear-gradient(180deg,#000033 0%,#021651 55%,#06246E 100%);
}

/* cards de vidro */
.card{border-radius:var(--radius);border:1px solid rgba(255,255,255,.7);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%)}
html[data-theme="dark"] .card{border-color:rgba(255,255,255,.08)}
.card.flat{border-radius:16px}
.kpi .k-value{font-weight:700;letter-spacing:-.025em}
.kpi .k-icon{border-radius:50%;background:rgba(0,102,204,.10)}
.cents{opacity:.42;font-weight:inherit}

/* botões em pílula */
.btn{border-radius:999px}
.btn-primary{background:linear-gradient(180deg,#1FA3FF 0%,#0066CC 100%);border-color:transparent;box-shadow:0 10px 22px -10px rgba(0,102,204,.9), inset 0 1px 0 rgba(255,255,255,.35)}
.btn-primary:hover{background:linear-gradient(180deg,#39AEFF 0%,#0A72DA 100%)}
.btn:not(.btn-primary):not(.btn-danger):not(.btn-accent):not(.btn-ghost){background:rgba(255,255,255,.7);border-color:rgba(255,255,255,.9);backdrop-filter:blur(10px)}
html[data-theme="dark"] .btn:not(.btn-primary):not(.btn-danger):not(.btn-accent):not(.btn-ghost){background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.icon-btn{border-radius:50%;background:rgba(255,255,255,.65);border-color:rgba(255,255,255,.9)}
html[data-theme="dark"] .icon-btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
.period-btn,.tb-search,.search-box,.select-inline{border-radius:999px}
.period-btn{background:rgba(255,255,255,.7);border-color:rgba(255,255,255,.9)}
html[data-theme="dark"] .period-btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}

/* topbar transparente */
.topbar{background:rgba(238,245,253,.55);border-bottom-color:rgba(255,255,255,.6)}
html[data-theme="dark"] .topbar{background:rgba(0,0,40,.45);border-bottom-color:rgba(255,255,255,.06)}

/* navegação em pílula escura */
.tb-nav-inner{background:var(--deep-soft);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:5px;box-shadow:0 14px 30px -16px rgba(0,0,51,.7), inset 0 1px 0 rgba(255,255,255,.15)}
.tb-nav a{color:rgba(255,255,255,.72);border-radius:999px}
.tb-nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.tb-nav a.on, html[data-theme="dark"] .tb-nav a.on{background:rgba(255,255,255,.95);color:#0066CC;box-shadow:0 4px 12px -4px rgba(0,0,0,.4)}
.tb-nav .nav-count.warn{background:#FFC107;color:#000033}

/* sidebar profunda */
.sidebar{
  --ink:#fff; --ink-2:rgba(255,255,255,.82); --ink-3:rgba(255,255,255,.55);
  --surface-3:rgba(255,255,255,.10); --line:rgba(255,255,255,.12); --line-strong:rgba(255,255,255,.22);
  --brand-bg:rgba(255,255,255,.14); --brand-ink:#fff; --brand:#FFC107;
  background:var(--deep-soft);color:#fff;border-right:0;box-shadow:inset -1px 0 0 rgba(255,255,255,.08)
}
.sidebar .sb-clients .av{border-radius:50%;background:rgba(0,153,255,.22);color:#fff;border:1.5px solid rgba(255,255,255,.35)}
.sidebar .sb-item.active{background:rgba(255,255,255,.14)}
.sidebar .sb-item.active .av{background:#fff;color:#0066CC;border-color:#fff}
.sidebar .add-client{border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.75)}
.sidebar .add-client:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
.sidebar .sb-foot{border-top-color:rgba(255,255,255,.1)}
.sidebar .sb-count{background:rgba(255,255,255,.14);color:#fff}
.sidebar .sb-status.crit{box-shadow:0 0 0 3px rgba(255,97,102,.3)}

/* herói */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;padding:26px 30px;border-radius:28px;color:#fff;overflow:hidden;
  background:var(--deep);box-shadow:0 30px 60px -28px rgba(0,40,140,.75), inset 0 1px 0 rgba(255,255,255,.35);border:1px solid rgba(255,255,255,.18)}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 220px at 15% -10%, rgba(255,255,255,.45), transparent 60%);pointer-events:none}
.hero::after{content:"";position:absolute;right:-120px;bottom:-160px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle, rgba(0,153,255,.35), transparent 65%);pointer-events:none}
.hero > *{position:relative;z-index:1}
.hero-label{font-size:15px;font-weight:500;color:rgba(255,255,255,.85)}
.hero-value{font-size:clamp(34px,4.4vw,52px);font-weight:700;letter-spacing:-.03em;line-height:1.1;margin:6px 0 14px}
.hero-value .cents{opacity:.45}
.hero-chips{display:flex;gap:8px;flex-wrap:wrap}
.hchip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;font-size:12px;font-weight:600;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px)}
.hchip svg{width:13px;height:13px}
.hero-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.hbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-width:108px;height:74px;padding:0 14px;border-radius:18px;cursor:pointer;color:#fff;font-size:12.5px;font-weight:600;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .15s, transform .1s;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.hbtn:hover{background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.1))}
.hbtn:active{transform:translateY(1px)}
.hbtn svg{width:20px;height:20px}
.hero-side{display:flex;align-items:center;gap:18px}
.ring-track{stroke:rgba(255,255,255,.16)}
.ring-fill{stroke:#fff;filter:drop-shadow(0 0 6px rgba(255,255,255,.35));transition:stroke-dasharray .6s ease}
.ring-exp{fill:#FFC107;stroke:#000033;stroke-width:2}
.ring-center{font-size:30px;font-weight:700;fill:#fff;font-family:Inter,sans-serif;letter-spacing:-.02em}
.ring-sub{font-size:11.5px;font-weight:500;fill:rgba(255,255,255,.75);font-family:Inter,sans-serif}
.hero-legend{display:flex;flex-direction:column;gap:12px;min-width:130px}
.hero-legend div{display:flex;flex-direction:column;padding-left:12px;border-left:2px solid rgba(255,255,255,.3)}
.hero-legend span{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:rgba(255,255,255,.65)}
.hero-legend b{font-size:15px;font-weight:700}

/* abas do cliente em pílula */
.tabs{border-radius:999px;background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.9)}
.tabs a{border-radius:999px}
.tabs a.on{background:linear-gradient(180deg,#1FA3FF,#0066CC);color:#fff;box-shadow:0 6px 14px -8px rgba(0,102,204,.9)}
html[data-theme="dark"] .tabs{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
html[data-theme="dark"] .tabs a.on{color:#fff}

.mock-banner{border-radius:16px}
.modal{border-radius:26px}
.popover{border-radius:18px}
.more-pop{min-width:240px}
.more-pop a.menu-item{text-decoration:none}

/* barra inferior (celular) */
.bottom-nav{display:none}
@media (max-width:1100px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero-side{justify-content:space-between}
}
@media (max-width:900px){
  .tb-nav{display:none}
  .content{padding-bottom:110px}
  .bottom-nav{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;height:66px;padding:6px;gap:4px;border-radius:24px;
    background:var(--deep-soft);border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 40px -12px rgba(0,0,51,.8), inset 0 1px 0 rgba(255,255,255,.18)}
  .bottom-nav a,.bottom-nav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:0;background:transparent;border-radius:18px;color:rgba(255,255,255,.7);font-size:10.5px;font-weight:600;text-decoration:none;position:relative;cursor:pointer;font-family:inherit}
  .bottom-nav svg{width:20px;height:20px}
  .bottom-nav .on{background:rgba(255,255,255,.95);color:#0066CC}
  .bottom-nav .bn-dot{position:absolute;top:8px;right:calc(50% - 16px);width:8px;height:8px;border-radius:50%;background:#FF6166;border:2px solid #062B6E}
  .toasts{bottom:92px}
  .hero{padding:22px 20px;border-radius:26px}
  .hbtn{min-width:0;flex:1;height:68px;font-size:11.5px}
  .hero-side{flex-direction:column;align-items:stretch}
  .hero-side .ring{margin:0 auto}
  .hero-legend{flex-direction:row;justify-content:space-between;min-width:0}
  .hero-legend div{padding-left:8px}
  .hero-legend b{font-size:13.5px}
}
@media (max-width:720px){ .grid.kpi-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .kpi-row .kpi .k-value{font-size:15.5px} .kpi-row .kpi .k-sub{font-size:10.5px} }
.goals-tbl tr.goal-client td{background:rgba(0,102,204,.06);border-top:1px solid var(--line-strong)}
html[data-theme="dark"] .goals-tbl tr.goal-client td{background:rgba(0,153,255,.08)}
.goals-tbl tr.sub td:first-child{padding-left:28px}
.icon-btn.danger-hover:hover{background:var(--crit);color:#fff;border-color:var(--crit)}
.hero-edit{color:#FFC107;text-transform:none;letter-spacing:0;font-weight:700;margin-left:4px;text-decoration:none}
.hero-edit:hover{text-decoration:underline}

/* Calculadora */
.calc-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:start}
.calc-hero{grid-template-columns:minmax(0,1fr)}
.calc-hero .hero-value.neg{color:#FFB3B5}
.hchip.calc-margin.ok{background:rgba(47,196,134,.28);border-color:rgba(120,240,190,.55)}
.hchip.calc-margin.warn{background:rgba(255,193,7,.30);border-color:rgba(255,213,80,.7)}
.hchip.calc-margin.crit{background:rgba(255,97,102,.32);border-color:rgba(255,150,153,.7)}
.calc-profile summary{cursor:pointer;list-style:none;display:flex;align-items:center;flex-wrap:wrap}
.calc-profile summary::-webkit-details-marker{display:none}
.calc-profile summary::after{content:"▾";margin-left:auto;color:var(--ink-3);transition:transform .15s}
.calc-profile[open] summary::after{transform:rotate(180deg)}
@media (max-width:1100px){ .calc-grid{grid-template-columns:minmax(0,1fr)} }