:root{
  --gold:#f0c14b;
  --gold2:#e8a13a;
  --teal:#36d6c3;
  --text:#f3eee2;
  --muted:#b9bcd6;
  --subtle:#8b8fb0;
  --bg:#05060f;
  --bg2:#0a0c1a;
  --surface:rgba(20,22,40,.72);
  --surface-2:rgba(30,33,58,.6);
  --line:rgba(255,255,255,.12);
  --red:#ff6b6b;
  --green:#46d39a;
  --amber:#f0c14b;
  --radius:16px;
  --shadow:0 20px 50px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1100px 520px at 82% -10%, rgba(240,193,75,.14), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(54,214,195,.10), transparent 60%),
    linear-gradient(180deg,#06070f 0%,#0a0c1a 50%,#05060f 100%);
  background-attachment:fixed;
  min-height:100vh;
}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.hidden{display:none !important}

/* ===== LOCK SCREEN ===== */
.lock-screen{
  position:fixed;inset:0;z-index:100;
  display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(800px 500px at 50% -10%, rgba(240,193,75,.18), transparent 60%),
    linear-gradient(180deg,#06070f,#0a0c1a);
}
.lock-box{
  width:min(92vw,360px);text-align:center;
  padding:36px 26px;border:1px solid var(--line);border-radius:24px;
  background:rgba(20,22,40,.6);backdrop-filter:blur(18px);box-shadow:var(--shadow);
}
.lock-logo{
  width:64px;height:64px;margin:0 auto 18px;border-radius:18px;
  display:grid;place-items:center;font-size:30px;font-weight:900;color:#1a1208;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  box-shadow:0 0 30px rgba(240,193,75,.55);
}
/* Logo grafiti "Carat" beranimasi */
.lock-logo.graffiti{
  width:auto;height:auto;border-radius:0;box-shadow:none;
  padding:4px 6px;margin:0 auto 22px;
  font-family:"Comic Sans MS","Brush Script MT","Segoe UI",system-ui,cursive;
  font-size:48px;font-weight:900;font-style:italic;line-height:1;letter-spacing:.5px;
  color:transparent;
  background:linear-gradient(115deg,#fff3c4 0%,var(--gold) 35%,#b8860b 60%,var(--gold2) 100%);
  background-size:220% 220%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-stroke:1.6px rgba(26,18,8,.55);
  transform-origin:50% 85%;
  animation:graffitiSway 2.8s ease-in-out infinite,
            graffitiGlow 2.8s ease-in-out infinite,
            graffitiShine 3.4s linear infinite;
}
@keyframes graffitiSway{
  0%,100%{transform:rotate(-3deg) skewX(-7deg) translateY(0)}
  25%{transform:rotate(2.5deg) skewX(-3deg) translateY(-4px)}
  50%{transform:rotate(-2deg) skewX(-9deg) translateY(1px)}
  75%{transform:rotate(3.5deg) skewX(-4deg) translateY(-2px)}
}
@keyframes graffitiGlow{
  0%,100%{filter:drop-shadow(0 3px 0 rgba(0,0,0,.4)) drop-shadow(0 0 14px rgba(240,193,75,.5))}
  50%{filter:drop-shadow(0 3px 0 rgba(0,0,0,.4)) drop-shadow(0 0 28px rgba(240,193,75,.95))}
}
@keyframes graffitiShine{
  0%{background-position:0% 50%}
  100%{background-position:220% 50%}
}
@media (prefers-reduced-motion:reduce){
  .lock-logo.graffiti{animation:graffitiGlow 3s ease-in-out infinite}
}
.lock-box h2{margin:0 0 6px;font-size:24px}
.lock-box p{margin:0 0 20px;color:var(--muted);font-size:14px}
#pinInput{
  text-align:center;font-size:26px;letter-spacing:10px;
  padding:14px;margin-bottom:14px;
}
.lock-hint{margin:16px 0 0 !important;font-size:12px;color:var(--subtle)}
.block{width:100%}

/* ===== APP SHELL ===== */
.app{max-width:1160px;min-height:100vh;margin:0 auto;padding:18px 18px 60px}
.topbar{
  position:relative;overflow:hidden;
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:24px;border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(20,22,40,.9),rgba(12,14,30,.85));
  box-shadow:var(--shadow);
}
.topbar::before{
  content:"902";position:absolute;right:18px;bottom:-26px;
  color:rgba(240,193,75,.07);font-size:130px;font-weight:900;pointer-events:none;
}
.topbar>div{position:relative;z-index:1}
.eyebrow{margin:0 0 8px;color:var(--gold);font-size:11px;font-weight:900;letter-spacing:2px;text-transform:uppercase}
h1,h2,h3,p{margin-top:0}
h1{margin:0 0 6px;font-size:clamp(38px,6vw,62px);line-height:.95;letter-spacing:-1px;
  background:linear-gradient(135deg,#fff,var(--gold),var(--gold2));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{margin:0;max-width:520px;color:var(--muted);font-size:13.5px;font-weight:600}
.top-actions{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end;max-width:120px}
.icon-btn{
  width:46px;height:46px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:13px;
  background:rgba(255,255,255,.06);color:#fff;font-size:18px;backdrop-filter:blur(10px);
  transition:.2s;
}
.icon-btn:hover{background:rgba(240,193,75,.16);border-color:rgba(240,193,75,.4);transform:translateY(-2px)}

.status-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0}
.metric{
  min-height:100px;padding:18px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);backdrop-filter:blur(12px);
}
.metric span{display:block;color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px}
.metric strong{display:block;margin-top:10px;font-size:32px;line-height:1;color:var(--text)}
.metric.danger strong{color:var(--red)}
.metric.warn strong{color:var(--gold)}
.metric.ok strong{color:var(--teal)}

.wa-status{
  margin:0 0 14px;padding:9px 14px;border-radius:999px;width:max-content;max-width:100%;
  border:1px solid var(--line);background:rgba(255,107,107,.12);color:var(--red);
  font-size:12.5px;font-weight:800;
}
.wa-status.ok{background:rgba(70,211,154,.14);color:var(--green);border-color:rgba(70,211,154,.3)}

.tabs{
  position:sticky;top:8px;z-index:10;display:flex;gap:6px;padding:6px;margin-bottom:14px;
  border:1px solid var(--line);border-radius:14px;background:rgba(10,12,26,.82);backdrop-filter:blur(16px);
}
.tab{flex:1;border:0;border-radius:10px;padding:12px 8px;background:transparent;color:var(--muted);font-weight:800;font-size:14px;transition:.2s}
.tab.active{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a1208;box-shadow:0 6px 16px rgba(240,193,75,.3)}

main{border:1px solid var(--line);border-radius:var(--radius);background:rgba(10,12,26,.4);backdrop-filter:blur(8px);padding:16px}
.panel{display:none}
.panel.active{display:block}
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:0 0 14px;padding:4px 2px}
.section-head h2{margin:0 0 5px;font-size:22px;color:var(--text)}
.section-head p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}

.primary,.ghost{min-height:44px;border-radius:12px;padding:12px 16px;font-weight:800;border:0;transition:.2s}
.primary{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a1208;box-shadow:0 10px 22px rgba(240,193,75,.28)}
.primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(240,193,75,.42)}
.ghost{background:rgba(255,255,255,.06);color:var(--text);border:1px solid var(--line)}
.ghost:hover{background:rgba(255,255,255,.12)}
.ghost.danger{background:rgba(255,107,107,.1);color:var(--red);border-color:rgba(255,107,107,.3)}
.small{min-height:38px;padding:9px 13px;font-size:13px}

.quick-row{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.file-label{display:inline-flex;align-items:center;justify-content:center}
.file-label input{display:none}
.vault-tools{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.vault-tools .ghost{flex:1;min-width:150px}
.bio-btn{margin-top:10px;border-color:rgba(54,214,195,.28);background:rgba(54,214,195,.09);color:var(--teal)}
.face-vault-box{text-align:center;padding:6px 0 10px}
.face-icon{
  width:72px;height:72px;margin:0 auto 14px;border-radius:24px;display:grid;place-items:center;
  color:#061412;font-weight:900;background:linear-gradient(135deg,var(--teal),var(--gold));
  box-shadow:0 0 34px rgba(54,214,195,.28);
}
.face-vault-box h3{margin:0 0 6px;font-size:24px}
.face-vault-box p{margin:0 auto 14px;max-width:420px;color:var(--muted);font-size:13px;line-height:1.45}
.legacy-vault{margin-top:14px;padding:10px 12px;border:1px dashed var(--line);border-radius:12px;color:var(--muted)}
.legacy-vault summary{cursor:pointer;font-size:12px;font-weight:900;color:var(--subtle)}
.legacy-vault label{margin-top:12px}
.vault-ready{
  margin:12px 0 0;padding:11px 13px;border:1px solid rgba(70,211,154,.24);
  border-radius:12px;background:rgba(70,211,154,.08);color:var(--muted);font-size:12.5px;line-height:1.4;
}
.vault-ready b{color:var(--green)}
.import-guide{
  margin:12px 0 0;padding:12px 13px;border:1px solid rgba(240,193,75,.22);
  border-radius:12px;background:rgba(240,193,75,.07);color:var(--muted);
  display:grid;gap:5px;font-size:12.5px;line-height:1.35;
}
.import-guide b{color:var(--gold);font-size:13px}

/* ===== VISUAL PLANNER ===== */
.planner-shell{
  margin:0 0 18px;border:1px solid rgba(240,193,75,.18);border-radius:18px;
  background:
    linear-gradient(135deg,rgba(240,193,75,.10),transparent 32%),
    linear-gradient(180deg,rgba(20,22,40,.86),rgba(10,12,26,.7));
  box-shadow:0 18px 42px rgba(0,0,0,.34);
  overflow:hidden;
}
.planner-hero{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:18px;border-bottom:1px solid var(--line);
}
.planner-kicker{
  display:inline-flex;margin:0 0 8px;color:var(--teal);font-size:11px;
  font-weight:900;letter-spacing:1.8px;text-transform:uppercase;
}
.planner-hero h3{margin:0 0 7px;font-size:26px;line-height:1.05;color:var(--text)}
.planner-hero p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.planner-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.planner-nav,.planner-modes{display:flex;gap:6px}
.planner-modes{padding:4px;border:1px solid var(--line);border-radius:12px;background:rgba(10,12,26,.55)}
.planner-mode{
  min-height:34px;border:0;border-radius:9px;padding:8px 13px;background:transparent;
  color:var(--muted);font-size:12px;font-weight:900;
}
.planner-mode.on{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a1208}
.time-ruler{
  display:grid;grid-template-columns:repeat(6,1fr);gap:1px;padding:10px 18px;
  color:var(--subtle);font-size:11px;font-weight:900;letter-spacing:.8px;
  background:rgba(255,255,255,.03);
}
.time-ruler span{position:relative}
.time-ruler span::before{
  content:"";position:absolute;left:0;top:22px;width:1px;height:10px;background:rgba(255,255,255,.12);
}
.planner-board{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,.85fr);gap:14px;padding:18px}
.planner-title{margin:0 0 10px;color:var(--gold);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:1px}
.timeline-list{position:relative;display:flex;flex-direction:column;gap:10px}
.timeline-list::before{
  content:"";position:absolute;left:54px;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,var(--line),transparent);
}
.day-track{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:15px;overflow:hidden;background:rgba(3,4,12,.26)}
.hour-row{display:grid;grid-template-columns:72px minmax(0,1fr);min-height:74px;border-bottom:1px solid rgba(255,255,255,.07)}
.hour-row:last-child{border-bottom:0}
.hour-label{padding:12px 8px;color:var(--subtle);font-size:11px;font-weight:900;text-align:center;background:rgba(255,255,255,.025)}
.hour-lane{position:relative;display:flex;flex-direction:column;gap:8px;padding:8px}
.quiet-line{display:block;margin-top:24px;border-top:1px dashed rgba(255,255,255,.08)}
.timeline-item{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;align-items:stretch}
.hour-lane .timeline-item{grid-template-columns:0 minmax(0,1fr);gap:0}
.hour-lane .timeline-time{display:none}
.timeline-time{
  z-index:1;align-self:start;margin-top:12px;padding:6px 8px;border-radius:999px;
  background:#0b0d1c;border:1px solid var(--line);color:var(--text);
  font-size:12px;font-weight:900;text-align:center;
}
.timeline-card{
  min-height:92px;padding:14px 14px 13px;border:1px solid var(--line);border-left-width:4px;
  border-radius:14px;background:rgba(255,255,255,.055);box-shadow:0 10px 26px rgba(0,0,0,.18);
}
.timeline-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.timeline-top span{color:var(--muted);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.7px}
.timeline-edit{
  border:0;border-radius:9px;padding:6px 9px;background:rgba(255,255,255,.08);
  color:var(--text);font-size:12px;font-weight:900;
}
.timeline-card strong{display:block;font-size:17px;line-height:1.2;color:var(--text)}
.timeline-card p{margin:7px 0 0;color:var(--muted);font-size:12.5px;line-height:1.45}
.timeline-item.past{opacity:.62}
.timeline-item.work .timeline-card,.queue-item.work{border-color:rgba(240,193,75,.42)}
.timeline-item.personal .timeline-card,.queue-item.personal{border-color:rgba(54,214,195,.46)}
.timeline-item.home .timeline-card,.queue-item.home{border-color:rgba(70,211,154,.42)}
.timeline-item.money .timeline-card,.queue-item.money{border-color:rgba(255,107,107,.42)}
.timeline-item.other .timeline-card,.queue-item.other{border-color:rgba(185,188,214,.32)}
.planner-queue{display:flex;flex-direction:column;gap:8px}
.queue-item{
  width:100%;text-align:left;border:1px solid var(--line);border-left-width:4px;border-radius:12px;
  background:rgba(255,255,255,.055);color:var(--text);padding:11px 12px;transition:.2s;
}
.queue-item:hover{transform:translateY(-1px);background:rgba(255,255,255,.09)}
.queue-item span{display:block;color:var(--muted);font-size:11.5px;font-weight:800;margin-bottom:4px}
.queue-item strong{display:block;font-size:14px;line-height:1.25}
.queue-empty{padding:16px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);font-size:13px;text-align:center}
.planner-empty{min-height:150px}
.week-board{display:grid;grid-template-columns:repeat(7,minmax(118px,1fr));gap:8px;overflow-x:auto;padding-bottom:4px}
.week-col{min-height:280px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.04);overflow:hidden}
.week-col.today{border-color:rgba(240,193,75,.42);box-shadow:0 0 0 1px rgba(240,193,75,.16) inset}
.week-head{
  width:100%;border:0;border-bottom:1px solid var(--line);background:rgba(255,255,255,.045);
  color:var(--text);padding:10px;display:flex;align-items:center;justify-content:space-between;text-align:left;
}
.week-head span{color:var(--muted);font-size:11px;font-weight:900;text-transform:uppercase}
.week-head strong{font-size:22px;color:var(--gold)}
.week-items{display:flex;flex-direction:column;gap:7px;padding:9px}
.week-item{
  width:100%;border:1px solid var(--line);border-left-width:4px;border-radius:11px;background:rgba(255,255,255,.055);
  color:var(--text);padding:9px;text-align:left;
}
.week-item span{display:block;color:var(--muted);font-size:11px;font-weight:900;margin-bottom:4px}
.week-item strong{display:block;font-size:12.5px;line-height:1.25}
.week-item.work{border-color:rgba(240,193,75,.42)}
.week-item.personal{border-color:rgba(54,214,195,.46)}
.week-item.home{border-color:rgba(70,211,154,.42)}
.week-item.money{border-color:rgba(255,107,107,.42)}
.week-empty{padding:14px 6px;color:var(--subtle);font-size:12px;text-align:center}
.section-head.compact{margin-top:18px;border-top:1px solid var(--line);padding-top:18px}

.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 14px}
.mini{padding:14px 16px;border:1px solid var(--line);border-radius:13px;background:var(--surface-2)}
.mini span{display:block;color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px}
.mini strong{display:block;margin-top:6px;font-size:24px;color:var(--gold)}

.list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.card,.item{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);backdrop-filter:blur(10px)}
.card{padding:18px}
.item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 14px;min-height:150px;padding:16px;transition:.2s}
.item:hover{border-color:rgba(240,193,75,.28);transform:translateY(-2px)}
.name{font-size:17px;font-weight:800;line-height:1.2;color:var(--text)}
.meta{margin-top:5px;color:var(--muted);font-size:12.5px;line-height:1.45}
.amount{font-size:15px;font-weight:800;text-align:right;white-space:nowrap;color:var(--text)}
.amount.spend{color:var(--red)}
.secret{margin-top:8px;font-family:'Consolas',monospace;font-size:14px;letter-spacing:1px;color:var(--subtle);word-break:break-all}
.secret.on{color:var(--gold);font-weight:700}

.pill{display:inline-flex;align-items:center;width:max-content;margin-top:10px;padding:5px 10px;border-radius:999px;background:rgba(54,214,195,.14);color:var(--teal);font-size:11px;font-weight:800}
.pill.due{background:rgba(240,193,75,.16);color:var(--gold)}
.pill.late{background:rgba(255,107,107,.16);color:var(--red)}
.pill.done,.pill.open{background:rgba(70,211,154,.16);color:var(--green)}
.pill.locked{background:rgba(255,107,107,.16);color:var(--red)}

.item-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto}
.item-actions.three{grid-template-columns:1fr 1fr 1fr}
.item-actions.four{grid-template-columns:1fr 1fr}
.item-actions button{min-height:40px;border:0;border-radius:11px;padding:9px 8px;font-weight:800;font-size:13px;transition:.2s}
.item-actions button:hover{filter:brightness(1.15)}
.done-btn{background:rgba(70,211,154,.16);color:var(--green)}
.edit-btn{background:rgba(255,255,255,.08);color:var(--text)}
.copy-btn{background:rgba(54,214,195,.16);color:var(--teal)}
.reveal-btn{background:rgba(240,193,75,.16);color:var(--gold)}
.del-btn{background:rgba(240,75,75,.16);color:#ff6b6b}
.wa-btn{background:rgba(37,211,102,.18);color:#46d39a}
.cal-btn{background:rgba(54,214,195,.14);color:var(--teal)}

/* ===== KALENDAR ===== */
.cal-nav{display:flex;align-items:center;gap:8px;margin:0 0 14px}
.cal-nav .cal-label{flex:1;text-align:center;font-size:18px;font-weight:900;color:var(--gold)}
.cal-nav button{min-width:44px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-dow{text-align:center;font-size:11px;font-weight:900;color:var(--muted);padding:4px 0;text-transform:uppercase}
.cal-cell{position:relative;min-height:62px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2);color:var(--text);font-weight:700;padding:6px;display:flex;flex-direction:column;align-items:flex-start;transition:.15s}
.cal-cell.blank{border:0;background:transparent;pointer-events:none}
.cal-cell:not(.empty):hover{border-color:var(--gold);background:rgba(240,193,75,.12);transform:translateY(-2px)}
.cal-cell.today{border-color:var(--gold);box-shadow:0 0 0 2px rgba(240,193,75,.35) inset}
.cal-cell.today span{color:var(--gold)}
.cal-cell .dots-wrap{margin-top:auto;display:flex;gap:3px}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;vertical-align:middle}
.dot.sch{background:var(--teal)}
.dot.rem{background:var(--gold)}
.cal-list{margin-top:16px;display:flex;flex-direction:column;gap:7px}
.cal-row{padding:10px 13px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);font-size:13.5px}
.cal-row b{display:inline-block;min-width:24px;color:var(--gold)}
.cal-row span{color:var(--muted);font-size:12px;margin-left:6px}
.cal-row.muted{color:var(--muted);text-align:center}
@media(max-width:680px){.cal-cell{min-height:50px;font-size:13px;padding:4px}.cal-grid{gap:4px}}

/* mode toggle Bulan/Setahun */
.cal-modes{display:flex;gap:6px;margin:0 0 12px;padding:5px;border:1px solid var(--line);border-radius:12px;background:rgba(10,12,26,.6);width:max-content}
.cal-mode{border:0;border-radius:9px;padding:9px 18px;background:transparent;color:var(--muted);font-weight:800;font-size:13px}
.cal-mode.on{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a1208}

/* ===== PAPARAN SETAHUN (padat & kemas) ===== */
.year-head{display:flex;align-items:baseline;justify-content:center;gap:14px;margin:2px 0 16px}
.year-num{font-size:clamp(38px,7vw,62px);font-weight:900;line-height:1;letter-spacing:1px;
  background:linear-gradient(135deg,#fff,var(--gold),var(--gold2));-webkit-background-clip:text;background-clip:text;color:transparent}
.year-sub{font-size:11px;font-weight:800;letter-spacing:6px;color:var(--teal)}
.year-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:start}
.ym{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:11px 10px 12px}
.ym-name{text-align:center;font-size:11.5px;font-weight:900;letter-spacing:.5px;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.ym-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.ym-dow{font-style:normal;text-align:center;font-size:9px;font-weight:900;color:var(--subtle);padding-bottom:2px}
.ym-day{font-style:normal;display:grid;place-items:center;height:23px;font-size:10.5px;line-height:1;border-radius:50%;color:var(--muted);cursor:pointer;transition:.12s}
.ym-day.blank{pointer-events:none}
.ym-day:not(.empty):hover{background:rgba(240,193,75,.16);color:var(--text)}
.ym-day.today{background:var(--teal);color:#04130f;font-weight:900}
.ym-day.ev{color:var(--gold);font-weight:900;box-shadow:inset 0 0 0 1.5px var(--gold)}
.ym-day.ev.today{background:var(--gold);color:#1a1208;box-shadow:none}
@media(max-width:900px){.year-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.year-grid{grid-template-columns:repeat(2,1fr);gap:8px}.ym-day{height:26px;font-size:11px}}
@media(max-width:380px){.ym-day{font-size:10.5px}.ym{padding:9px 7px 10px}}

.empty{grid-column:1/-1;min-height:200px;display:grid;place-items:center;text-align:center;border:1px dashed var(--line);border-radius:var(--radius);background:rgba(255,255,255,.02);color:var(--muted);padding:36px 18px}
.hint{margin:12px 0 0;color:var(--subtle);font-size:12.5px;line-height:1.5}
.split{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.top-space{margin-top:12px}

/* search input in vault */
#vaultSearch{margin-top:12px}

/* ===== DIALOG ===== */
dialog{width:min(94vw,540px);border:0;border-radius:20px;padding:0;background:#0d0f1e;color:var(--text);box-shadow:0 30px 90px rgba(0,0,0,.7)}
dialog::backdrop{background:rgba(5,6,15,.7);backdrop-filter:blur(5px)}
.dialog-form{padding:22px}
.dialog-form h3{margin:0 0 16px;font-size:21px;color:var(--text)}
label{display:block;margin-bottom:13px;color:var(--muted);font-size:13px;font-weight:800}
input,select,textarea{display:block;width:100%;margin-top:7px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.05);color:var(--text);padding:13px 12px}
select option{background:#0d0f1e;color:var(--text)}
textarea{resize:vertical}
input::placeholder,textarea::placeholder{color:var(--subtle)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 4px rgba(240,193,75,.14)}
.check{display:flex;align-items:center;gap:10px}
.check input{width:auto;margin:0}
.danger-link{width:100%;margin-top:12px;border:0;background:transparent;color:var(--red);font-weight:800;padding:10px}
.set-block{margin-bottom:18px;padding:14px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.03)}
.set-title{font-size:13px;font-weight:900;color:var(--gold);margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px}

.toast{position:fixed;left:50%;bottom:20px;z-index:200;max-width:88vw;transform:translateX(-50%) translateY(16px);opacity:0;pointer-events:none;border-radius:12px;background:linear-gradient(135deg,#1a1d33,#11132a);border:1px solid var(--line);color:#fff;padding:13px 18px;font-weight:700;box-shadow:var(--shadow);transition:.2s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(min-width:940px){.app{padding-top:24px}.tabs{max-width:760px;margin-left:auto;margin-right:auto}}
@media(max-width:680px){
  .app{padding:12px 12px 40px}
  .topbar{padding:20px 16px}
  .top-actions{max-width:100px}
  .status-grid{grid-template-columns:1fr 1fr}
  main{padding:12px}
  .section-head{display:block}
  .section-head .primary{width:100%;margin-top:12px}
  .planner-hero{display:block;padding:16px}
  .planner-actions{justify-content:stretch;margin-top:12px}
  .planner-nav,.planner-modes{width:100%}
  .planner-nav .ghost,.planner-actions>.ghost{flex:1}
  .planner-mode{flex:1}
  .planner-board{grid-template-columns:1fr;padding:14px}
  .timeline-list::before{left:48px}
  .hour-row{grid-template-columns:56px minmax(0,1fr)}
  .hour-label{font-size:10px;padding:10px 4px}
  .timeline-item{grid-template-columns:66px minmax(0,1fr)}
  .week-board{grid-template-columns:repeat(7,132px)}
  .time-ruler{padding:9px 14px;font-size:10px}
  .list{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
}
@media(max-width:420px){
  h1{font-size:40px}
  .metric{min-height:88px;padding:14px}
  .metric strong{font-size:26px}
  .tab{font-size:13px;padding:11px 6px}
}