/* ============================================================================
   CB AGENCY · Atelier Financeiro — design system "Dark Luxo + Dourado"
   Tema escuro (padrão) e claro via [data-theme="light"].
   ========================================================================== */

:root,
[data-theme="dark"]{
  /* superfícies — preto quente, vinho-petróleo profundo */
  --bg:#08080c; --bg2:#0d0d14;
  --surface:#12121b; --surface2:#171622; --glass:rgba(22,21,33,.72);
  --line:rgba(212,175,55,.10); --line2:rgba(212,175,55,.22);
  --ink:#f3efe6; --ink2:#b3ab97; --ink3:#7a735f;

  /* OURO — identidade da marca */
  --brand:#d4af37; --brand2:#f3dd9a; --brand-deep:#a9852a;
  --brand-glow:rgba(212,175,55,.30); --brand-soft:rgba(212,175,55,.12);
  --gold-grad:linear-gradient(135deg,#f3dd9a 0%,#d4af37 45%,#a9852a 100%);

  --green:#4cc69a; --green-soft:rgba(76,198,154,.14);
  --red:#e76a7e;   --red-soft:rgba(231,106,126,.14);
  --amber:#e7a13c; --amber-soft:rgba(231,161,60,.14);

  --radius:16px;
  --shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 14px 40px rgba(0,0,0,.5);
  --shadow-gold:0 8px 28px rgba(212,175,55,.18);
  --bg-app:radial-gradient(1100px 640px at 82% -12%,#241a08 0%,transparent 55%),
           radial-gradient(900px 600px at 8% 110%,#1a1410 0%,transparent 55%),
           var(--bg);
}

[data-theme="light"]{
  --bg:#f4f1ea; --bg2:#efe9dd;
  --surface:#fffdf8; --surface2:#fbf7ee; --glass:rgba(255,253,248,.78);
  --line:rgba(120,95,30,.16); --line2:rgba(120,95,30,.28);
  --ink:#211d14; --ink2:#6b6450; --ink3:#9c947c;

  --brand:#a9852a; --brand2:#caa64a; --brand-deep:#7e5f17;
  --brand-glow:rgba(169,133,42,.22); --brand-soft:rgba(169,133,42,.12);
  --gold-grad:linear-gradient(135deg,#caa64a 0%,#a9852a 50%,#7e5f17 100%);

  --green:#1f9d6e; --green-soft:rgba(31,157,110,.13);
  --red:#cf4d63;   --red-soft:rgba(207,77,99,.13);
  --amber:#c07d18; --amber-soft:rgba(192,125,24,.14);

  --shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 12px 30px rgba(90,70,20,.10);
  --shadow-gold:0 8px 24px rgba(169,133,42,.20);
  --bg-app:radial-gradient(1100px 640px at 82% -12%,#f5ead0 0%,transparent 55%),
           radial-gradient(900px 600px at 8% 110%,#efe6d4 0%,transparent 55%),
           var(--bg);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Inter','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  background:var(--bg-app);background-attachment:fixed;
  color:var(--ink);font-size:14px;min-height:100vh;
  transition:background .4s ease,color .25s ease;
}
button{font:inherit;cursor:pointer;color:inherit}
input,select,textarea{font:inherit;color:var(--ink)}
select option{background:var(--surface2);color:var(--ink)}
a{color:var(--brand2);text-decoration:none}
svg.ic{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ─── Login ─────────────────────────────────────────────────────────────── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(900px 600px at 18% 0%,var(--brand-soft),transparent 60%),
             radial-gradient(800px 520px at 92% 100%,rgba(231,161,60,.10),transparent 60%),var(--bg)}
.login-card{position:relative;background:var(--glass);backdrop-filter:blur(20px);
  border:1px solid var(--line2);border-radius:22px;padding:46px 40px;width:420px;max-width:94vw;
  box-shadow:0 36px 90px rgba(0,0,0,.5),var(--shadow-gold)}
.login-card::before{content:"";position:absolute;inset:0;border-radius:22px;padding:1px;
  background:var(--gold-grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.5;pointer-events:none}
.login-card h1{font-family:Georgia,'Times New Roman',serif;font-size:32px;letter-spacing:-.02em;margin-bottom:4px}
.login-card .brand-dot{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.login-card .sub{color:var(--ink2);margin-bottom:28px;font-size:13.5px;letter-spacing:.01em}

/* ─── Shell ─────────────────────────────────────────────────────────────── */
.shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.sidebar{background:linear-gradient(180deg,var(--bg2) 0%,var(--bg) 100%);
  border-right:1px solid var(--line);padding:22px 14px;display:flex;flex-direction:column;gap:2px;
  position:sticky;top:0;height:100vh;overflow-y:auto;z-index:50}
.logo{display:flex;align-items:center;gap:11px;color:var(--ink);font-family:Georgia,serif;font-size:18px;font-weight:600;padding:2px 10px 18px;letter-spacing:.01em}
.logo .mark{width:34px;height:34px;border-radius:10px;background:var(--gold-grad);
  display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-size:14px;font-weight:700;
  color:#1a1405;box-shadow:0 0 22px var(--brand-glow)}
.logo span.sys{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sidebar .org{font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;padding:0 10px 18px;color:var(--ink3)}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;color:var(--ink2);
  font-weight:500;border:none;background:none;width:100%;text-align:left;font-size:13.5px;transition:all .16s;position:relative}
.nav-item:hover{background:var(--brand-soft);color:var(--ink)}
.nav-item.active{background:var(--gold-grad);color:#1a1405;font-weight:600;box-shadow:var(--shadow-gold)}
.nav-item.active svg{stroke-width:2}
.nav-sep{font-size:9.5px;text-transform:uppercase;letter-spacing:.18em;color:var(--ink3);padding:18px 12px 6px}
.sidebar .foot{margin-top:auto;padding:14px 10px 4px;font-size:12.5px;color:var(--ink2);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.sidebar .foot button{display:flex;align-items:center;gap:7px;background:none;border:none;color:var(--ink3);font-size:12.5px;padding:6px 0 0}
.sidebar .foot > div > button:first-child:hover{color:var(--red)}
.theme-toggle{padding:6px !important;border:1px solid var(--line2) !important;border-radius:9px;color:var(--ink2) !important}
.theme-toggle:hover{color:var(--brand2) !important;border-color:var(--brand) !important;background:var(--brand-soft)}

/* Topbar mobile */
.topbar{display:none;align-items:center;gap:12px;padding:14px 16px;background:var(--glass);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60}
.topbar .logo{padding:0;font-size:16px}
.burger{background:none;border:1px solid var(--line2);border-radius:9px;padding:7px 9px;color:var(--ink)}

.main{padding:30px 34px;max-width:1320px;width:100%}
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;gap:12px;flex-wrap:wrap}
.page-head h2{font-family:Georgia,'Times New Roman',serif;font-size:24px;letter-spacing:-.01em;font-weight:600}
.page-head .sub{color:var(--ink2);font-size:13px;margin-top:4px}

/* ─── Cards / KPIs ──────────────────────────────────────────────────────── */
.card{background:linear-gradient(180deg,var(--surface2) 0%,var(--surface) 100%);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;margin-bottom:16px}
.card h3{font-family:Georgia,serif;font-size:15px;font-weight:600;color:var(--ink);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.grid{display:grid;gap:14px}
.grid.kpis{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.grid.two{grid-template-columns:1fr 1fr}
.kpi{background:linear-gradient(180deg,var(--surface2) 0%,var(--surface) 100%);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--gold-grad);opacity:.85}
.kpi .lbl{font-size:11px;color:var(--ink2);margin-bottom:8px;text-transform:uppercase;letter-spacing:.08em}
.kpi .val{font-family:Georgia,serif;font-size:23px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi .val.pos{color:var(--green)} .kpi .val.neg{color:var(--red)}
.kpi .hint{font-size:11px;color:var(--ink3);margin-top:6px}

/* ─── Botões ────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:11px;border:1px solid var(--line2);background:var(--brand-soft);font-weight:600;font-size:13px;color:var(--ink);transition:all .16s}
.btn:hover{border-color:var(--brand);color:var(--brand2);background:var(--brand-soft);transform:translateY(-1px)}
.btn.primary{background:var(--gold-grad);border-color:transparent;color:#1a1405;box-shadow:var(--shadow-gold)}
.btn.primary:hover{filter:brightness(1.08);color:#1a1405}
.btn.primary svg{stroke-width:2.2}
.btn.danger:hover{color:var(--red);border-color:var(--red);background:var(--red-soft)}
.btn.sm{padding:6px 10px;font-size:12px;border-radius:9px}
.btn.ghost{border-color:transparent;background:none}
.btn.icon{padding:6px}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ─── Tabelas ───────────────────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;min-width:560px}
.tbl th{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink3);text-align:left;padding:10px 11px;border-bottom:1px solid var(--line2)}
.tbl td{padding:12px 11px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:13.5px}
.tbl tbody tr{transition:background .14s}
.tbl tbody tr:hover td{background:var(--brand-soft)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl .actions{text-align:right;white-space:nowrap}

.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 11px;border-radius:99px;font-size:11px;font-weight:600;letter-spacing:.02em}
.chip.green{background:var(--green-soft);color:var(--green)}
.chip.red{background:var(--red-soft);color:var(--red)}
.chip.amber{background:var(--amber-soft);color:var(--amber)}
.chip.blue{background:var(--brand-soft);color:var(--brand2)}
.chip.gray{background:rgba(148,148,148,.14);color:var(--ink2)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;box-shadow:0 0 8px currentColor}

/* ─── Formulários ───────────────────────────────────────────────────────── */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.field label{font-size:11px;font-weight:600;color:var(--ink2);text-transform:uppercase;letter-spacing:.06em}
.field input,.field select,.field textarea,.filters input,.filters select{padding:10px 12px;border:1px solid var(--line2);border-radius:11px;background:var(--bg2);font-size:13.5px;color:var(--ink);width:100%}
.field input:focus,.field select:focus,.field textarea:focus,.filters input:focus,.filters select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.field input[type=color]{padding:3px;height:40px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.frow3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}

/* ─── Modal ─────────────────────────────────────────────────────────────── */
.modal-bg{position:fixed;inset:0;background:rgba(4,3,8,.72);backdrop-filter:blur(7px);display:flex;align-items:flex-start;justify-content:center;padding:42px 16px;z-index:100;overflow-y:auto}
.modal{position:relative;background:linear-gradient(180deg,var(--surface2) 0%,var(--surface) 100%);border:1px solid var(--line2);border-radius:20px;width:580px;max-width:100%;padding:28px;box-shadow:0 36px 100px rgba(0,0,0,.6),var(--shadow-gold)}
.modal::before{content:"";position:absolute;top:0;left:24px;right:24px;height:2px;background:var(--gold-grad);opacity:.7;border-radius:2px}
.modal h3{font-family:Georgia,serif;font-size:18px;margin-bottom:18px;font-weight:600}
.modal .modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}

/* ─── Toast ─────────────────────────────────────────────────────────────── */
#toasts{position:fixed;bottom:22px;right:22px;display:flex;flex-direction:column;gap:8px;z-index:200}
.toast{background:linear-gradient(135deg,var(--surface2),var(--surface));border:1px solid var(--line2);color:var(--ink);padding:12px 17px;border-radius:13px;font-size:13px;box-shadow:0 12px 34px rgba(0,0,0,.5);animation:slidein .2s ease;border-left:3px solid var(--brand)}
.toast.err{border-left-color:var(--red);color:var(--red)}
@keyframes slidein{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}

/* ─── Gráfico de barras ─────────────────────────────────────────────────── */
.bars{display:flex;align-items:flex-end;gap:7px;height:160px;padding-top:12px}
.bar-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2px}
.bar{border-radius:4px 4px 2px 2px;min-height:2px}
.bar.rec{background:linear-gradient(180deg,var(--green),#0f8f63);box-shadow:0 0 10px rgba(76,198,154,.25)}
.bar.desp{background:linear-gradient(180deg,#f3dd9a,var(--brand-deep));opacity:.92}
.bar-lbl{font-size:9.5px;color:var(--ink3);text-align:center;margin-top:5px;text-transform:uppercase;letter-spacing:.05em}

/* ─── Tabs ──────────────────────────────────────────────────────────────── */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.tab{padding:10px 17px;border:none;background:none;font-weight:600;color:var(--ink2);border-bottom:2px solid transparent;font-size:13.5px;white-space:nowrap}
.tab.active{color:var(--brand2);border-bottom-color:var(--brand)}

/* ─── Calendário (Agenda Financeira) ────────────────────────────────────── */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal .dow{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink3);text-align:center;padding:4px 0}
.cal-day{background:var(--brand-soft);border:1px solid var(--line);border-radius:11px;min-height:86px;padding:7px 8px;cursor:pointer;transition:all .14s;display:flex;flex-direction:column;gap:3px}
.cal-day:hover{border-color:var(--brand);background:var(--brand-soft);transform:translateY(-1px)}
.cal-day.off{opacity:0;pointer-events:none}
.cal-day.today{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand),0 0 16px var(--brand-glow)}
.cal-day .d{font-size:12px;font-weight:700;color:var(--ink2)}
.cal-day.today .d{color:var(--brand2)}
.cal-day .v{font-size:10.5px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.35}
.cal-day .v.r{color:var(--green)} .cal-day .v.d2{color:var(--red)}
.cal-day .n{font-size:9.5px;color:var(--ink3);margin-top:auto}

.progress{height:7px;background:var(--brand-soft);border-radius:99px;overflow:hidden}
.progress>div{height:100%;background:var(--gold-grad);border-radius:99px;box-shadow:0 0 10px var(--brand-glow)}
.empty{color:var(--ink3);text-align:center;padding:36px;font-size:13px}
.muted{color:var(--ink3);font-size:12px}
.right{text-align:right}

/* ─── Mobile ────────────────────────────────────────────────────────────── */
@media(max-width:900px){
  .shell{display:block}
  .topbar{display:flex}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:260px;transform:translateX(-105%);transition:transform .24s ease;box-shadow:24px 0 60px rgba(0,0,0,.5)}
  .sidebar.open{transform:none}
  .sidebar-veil{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:45}
  .main{padding:16px 14px}
  .grid.two{grid-template-columns:1fr}
  .grid.kpis{grid-template-columns:repeat(2,1fr)}
  .frow,.frow3{grid-template-columns:1fr}
  .page-head{flex-direction:column;align-items:flex-start}
  .bars{height:110px;gap:4px}
  .cal{gap:3px}
  .cal-day{min-height:62px;padding:5px 5px;border-radius:8px}
  .cal-day .v{font-size:9px}
  .modal{padding:18px}
  .chart-head{flex-direction:column;align-items:flex-start;gap:10px}
  .chart-controls{width:100%}
  .donut-wrap{flex-direction:column;align-items:center}
  .chart-svg{min-width:560px}
  .chart-scroll{overflow-x:auto}
}

/* ============================================================================
   Gráficos interativos (charts.js)
   ========================================================================== */
.chart-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.chart-controls{display:flex;gap:8px;flex-wrap:wrap}
.chart-wrap{width:100%}
.chart-svg{width:100%;height:auto;display:block;overflow:visible}
.chart-loading{padding:60px;text-align:center;color:var(--ink3);font-size:13px}

/* Controle segmentado */
.seg{display:inline-flex;background:var(--bg2);border:1px solid var(--line2);border-radius:11px;padding:3px;gap:2px}
.seg-btn{border:none;background:none;color:var(--ink2);font-size:12.5px;font-weight:600;padding:6px 13px;border-radius:8px;transition:all .15s;white-space:nowrap}
.seg-btn:hover{color:var(--ink)}
.seg-btn.active{background:var(--gold-grad);color:#1a1405;box-shadow:var(--shadow-gold)}

/* Legenda */
.chart-legend,.leg-item{display:inline-flex;align-items:center}
.chart-legend{gap:18px;margin-bottom:6px;flex-wrap:wrap}
.leg-item{gap:7px;font-size:12px;color:var(--ink2);font-weight:600}
.leg-dot{width:10px;height:10px;border-radius:3px;display:inline-block}

/* Elementos SVG */
.grid-line{stroke:var(--line);stroke-width:1}
.grid-zero{stroke:var(--ink3);stroke-width:1;stroke-dasharray:3 3;opacity:.6}
.ax-y{fill:var(--ink3);font-size:11px;text-anchor:end}
.ax-x{fill:var(--ink2);font-size:11px;text-anchor:middle}
.bar-rec,.bar-desp{transition:opacity .15s}
.bar-hot{fill:var(--brand-soft);opacity:0;transition:opacity .12s;cursor:pointer}
.bar-hot:hover{opacity:.5}
.pt-dot{transition:r .12s}
.donut-seg{transition:opacity .15s;cursor:pointer}
.donut-seg:hover{opacity:.78}

/* Rosca */
.donut-wrap{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.donut-chart{flex:none;width:230px}
.donut-svg{width:230px;height:230px}
.donut-c1{fill:var(--ink3);font-size:12px;text-anchor:middle}
.donut-c2{fill:var(--ink);font-size:19px;font-weight:700;text-anchor:middle;font-family:Georgia,serif}
.donut-legend{flex:1;min-width:220px;display:flex;flex-direction:column;gap:9px}
.dl-item{display:flex;align-items:center;gap:9px;font-size:13px}
.dl-name{flex:1;color:var(--ink)}
.dl-val{font-variant-numeric:tabular-nums;color:var(--ink2);font-weight:600}

/* Tooltip flutuante */
.chart-tip{position:fixed;display:none;z-index:300;pointer-events:none;
  background:linear-gradient(180deg,var(--surface2),var(--surface));
  border:1px solid var(--line2);border-left:3px solid var(--brand);
  border-radius:12px;padding:11px 13px;box-shadow:0 14px 40px rgba(0,0,0,.55);min-width:170px}
.chart-tip .tip-head{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:8px;font-family:Georgia,serif}
.chart-tip .tip-row{display:flex;align-items:center;gap:7px;font-size:12px;margin-top:4px}
.chart-tip .tip-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.chart-tip .tip-lbl{color:var(--ink2);flex:1}
.chart-tip .tip-val{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}

/* Ranking horizontal (relatórios) */
.rank{display:flex;flex-direction:column;gap:12px;padding:4px 0}
.rank-row{cursor:default}
.rank-top{display:flex;justify-content:space-between;gap:10px;margin-bottom:5px;font-size:13px}
.rank-name{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-val{color:var(--ink2);font-weight:700;font-variant-numeric:tabular-nums;flex:none}
.rank-track{height:9px;background:var(--brand-soft);border-radius:99px;overflow:hidden}
.rank-fill{height:100%;border-radius:99px;transition:width .3s ease;min-width:2px}

/* Cabeçalho dos relatórios */
.rel-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.rel-preset{padding:10px 12px;border:1px solid var(--line2);border-radius:11px;background:var(--bg2);
  color:var(--ink);font-size:14px;font-weight:600;min-width:230px}
.rel-date{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink2)}
.rel-date input{padding:8px 10px;border:1px solid var(--line2);border-radius:10px;background:var(--bg2);color:var(--ink);font-size:13px}

/* Visão semanal da agenda */
.wk-nav{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.wk-range{font-weight:600;font-size:13.5px}
.wk-sum{margin-left:auto;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.wk-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.wk-day{background:var(--brand-soft);border:1px solid var(--line);border-radius:12px;min-height:140px;
  padding:9px;display:flex;flex-direction:column;gap:7px;cursor:pointer;transition:all .14s}
.wk-day:hover{border-color:var(--brand);transform:translateY(-1px)}
.wk-day.off{opacity:.4;pointer-events:none}
.wk-day.today{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand),0 0 14px var(--brand-glow)}
.wk-head{display:flex;align-items:baseline;justify-content:space-between}
.wk-dow{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink3)}
.wk-num{font-size:15px;font-weight:700;font-family:Georgia,serif}
.wk-items{display:flex;flex-direction:column;gap:5px;font-size:11px}
.wk-it{display:flex;justify-content:space-between;gap:6px}
.wk-it-desc{color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wk-it-val{font-weight:700;font-variant-numeric:tabular-nums;flex:none}
.wk-it-val.r{color:var(--green)} .wk-it-val.d2{color:var(--red)}
@media(max-width:900px){
  .wk-grid{grid-template-columns:1fr;gap:6px}
  .wk-day{min-height:auto}
  .rel-preset{min-width:0;width:100%}
}