/* ---------- Design tokens ---------- */
:root{
  --navy-900:#071428; --navy-800:#0b2540; --navy-700:#12325a;
  --silver:#c9d6e3; --muted:#9aa6b8; --accent:#1e3a8a; --glass:rgba(255,255,255,0.03);
  --success:#2a9d8f; --danger:#e53e3e; --radius:14px; --shadow:0 10px 30px rgba(2,6,23,0.6);
}
[data-theme="light"]{
  --navy-900:#f7f9fb; --navy-800:#eef2f6; --navy-700:#dfe7ef;
  --silver:#11203b; --muted:#475569; --glass:rgba(0,0,0,0.02);
}

*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  font-family:Inter, 'Noto Sans JP', system-ui,-apple-system, 'Segoe UI', Roboto, sans-serif;
  background:linear-gradient(180deg,var(--navy-900),var(--navy-800));
  color:var(--silver);
  -webkit-font-smoothing:antialiased;
}

/* ---------- Layout ---------- */
.wrap{max-width:1200px;margin:28px auto;padding:20px}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:12px}
.logo{font-weight:800;font-size:1.1rem;color:var(--silver)}
.sub{font-size:0.85rem;color:var(--muted)}

.controls{display:flex;gap:8px;align-items:center}
.btn{background:var(--accent);color:white;padding:8px 12px;border-radius:10px;border:none;cursor:pointer;font-weight:700;box-shadow:var(--shadow);transition:transform .12s ease}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--silver)}
.btn:active{transform:translateY(1px)}

.grid{display:grid;grid-template-columns:340px 1fr;gap:18px}
@media(max-width:980px){.grid{grid-template-columns:1fr}}

.panel{background:rgba(255,255,255,0.02);border-radius:var(--radius);padding:16px;border:1px solid rgba(255,255,255,0.03);box-shadow:var(--shadow)}

h2{margin:0 0 8px 0;color:var(--silver);font-size:1rem}
label{display:block;color:var(--muted);font-size:0.85rem;margin-top:10px}

input[type=number], input[type=text], select, .quick-input{width:100%;padding:10px;border-radius:10px;background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--silver);font-size:0.95rem}
input:focus{outline:none;box-shadow:0 6px 16px rgba(30,58,138,0.12);border-color:var(--accent)}

/* categories list */
.cats{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.cat-row{display:flex;gap:8px;align-items:center}
.cat-row input[type=number]{width:110px}
.cat-name{flex:1;color:var(--silver)}
.cat-actions{display:flex;gap:6px}

/* summary */
.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.summary-item{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));padding:12px;border-radius:10px;text-align:center}
.label-small{font-size:0.85rem;color:var(--muted)}
.value-large{font-size:1.4rem;font-weight:800;color:var(--silver);margin-top:6px}

/* charts */
.charts{display:grid;grid-template-columns:1fr 420px;gap:12px;margin-top:14px}
@media(max-width:980px){.charts{grid-template-columns:1fr}}
.chart-card{padding:12px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent)}
canvas{width:100%;height:260px}

/* right controls */
.right-actions{display:flex;gap:8px;align-items:center;margin-top:10px}
.toggle{display:inline-flex;align-items:center;gap:8px;background:transparent;border-radius:999px;padding:6px 8px;border:1px solid rgba(255,255,255,0.04)}

/* quick add */
.quick-row{display:flex;gap:8px;align-items:center;margin-top:10px}
.quick-input{flex:1}

/* toast */
.toast{position:fixed;right:20px;top:20px;padding:10px 14px;background:var(--accent);color:white;border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,0.4);opacity:0;transform:translateY(-8px);transition:all .28s}
.toast.show{opacity:1;transform:translateY(0)}

/* small responsive tweaks */
footer{margin-top:18px;color:var(--muted);font-size:13px;text-align:center}