:root{
  --bg: #0f1115;
  --panel: #161a22;
  --card: #1b2130;
  --text: #e6ebf2;
  --muted: #a8b0bf;
  --primary: #4f8cff;
  --success: #22c55e;
  --danger: #ef4444;
  --warn: #f59e0b;
  --border: #2a3040;
  --shadow: 0 6px 20px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Noto Sans TC, sans-serif;
  background: var(--bg); color: var(--text);
}

.app-header{
  position: sticky; top: 0; z-index: 10;
  display:flex; justify-content:space-between; align-items:center;
  padding: .75rem 1rem; background: rgba(15,17,21,.8); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:.75rem}
.logo{width:36px; height:36px; border-radius:10px; background: linear-gradient(135deg, var(--primary), #8b5cf6); display:grid; place-items:center; font-weight:700}
.titles h1{font-size:1rem; margin:.1rem 0}
.subtitle{margin:0; color:var(--muted); font-size:.8rem}

main{padding: 1rem; padding-bottom: 5.5rem; max-width: 1100px; margin: 0 auto}
.section{margin: 1rem 0}
.split{display:grid; gap:1rem}
.split>.section,.split>.panel{min-width:0}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}}

.cards{display:grid; gap:.75rem}
@media(min-width:700px){.cards{grid-template-columns: repeat(2, 1fr)}}
@media(min-width:1100px){.cards{grid-template-columns: repeat(3, 1fr)}}
.card,.panel{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:1rem; box-shadow: var(--shadow)}
.panel{background:var(--panel)}
.list{display:flex; flex-direction:column; gap:.5rem}
.list .item{display:flex; gap:.75rem; align-items:flex-start; background:var(--panel); border:1px solid var(--border); padding:.75rem; border-radius:12px}

.metrics{display:grid; gap:.5rem}
.metric{display:flex; justify-content:space-between; align-items:center; background:var(--panel); border:1px solid var(--border); padding:.75rem; border-radius:12px}
.metric .value{font-weight:700}
.progress{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding: .75rem}
.progressbar{height:10px; background:#22283a; border-radius:999px; overflow:hidden}
.progressbar>div{height:100%; background: linear-gradient(90deg, var(--primary), #22d3ee)}
.hint{color:var(--muted); font-size:.9rem; margin-top:.5rem}

.toolbar{display:flex; justify-content:space-between; align-items:center; gap: .75rem; margin:.5rem 0}
.filters{display:flex; gap:.75rem; align-items:center}
.filters input[placeholder]{min-width: 240px}
.form-grid{display:grid; gap:.75rem}
.row{display:flex; gap:.5rem}
.row.end{justify-content:flex-end}

.btn{background:#242a3c; color:var(--text); border:1px solid var(--border); padding:.55rem .9rem; border-radius:10px; cursor:pointer}
.btn.primary{background:var(--primary); border-color: transparent; color:white}
.btn.success{background:var(--success); border-color: transparent}
.btn.danger{background:var(--danger); border-color: transparent}
.icon-btn{background:transparent; border:1px solid var(--border); color:var(--text); border-radius:10px; padding:.4rem .6rem; cursor:pointer}

input,select,textarea{width:100%; background:#0f1320; color:var(--text); border:1px solid var(--border); border-radius:10px; padding:.5rem}
label{display:grid; gap:.3rem; font-size:.9rem; color:var(--muted)}

.flashcard{min-height: 220px; background:var(--card); border:1px solid var(--border); border-radius:16px; display:grid; place-items:center; padding:1rem; box-shadow: var(--shadow)}
.flashcard .qa{width:100%}
.flashcard .q{font-size:1.05rem}
.flashcard .a{margin-top: .75rem; color: var(--muted)}
.card-actions{display:flex; gap:.5rem; margin-top:.75rem}

.tabbar{position: fixed; bottom: 0; left: 0; right: 0; display:grid; grid-template-columns: repeat(6,1fr); gap:.25rem; padding:.25rem; background: rgba(15,17,21,.8); backdrop-filter: blur(6px); border-top:1px solid var(--border)}
.tabbar button{background:transparent; color:var(--muted); border:none; padding:.6rem .2rem; border-radius:10px}
.tabbar button.active{background:#1a2030; color:var(--text); border:1px solid var(--border)}

.view{display:none}
.view.active{display:block}

.graph{min-height:160px; background: repeating-linear-gradient(45deg, #141a28, #141a28 10px, #0e1320 10px, #0e1320 20px); border:1px solid var(--border); border-radius:14px; padding:1rem}
.bullets{color:var(--muted)}

.modal{border:none; border-radius:16px; padding:0; background: var(--panel); color:var(--text); box-shadow: var(--shadow)}
.modal::backdrop{background: rgba(0,0,0,.5)}
.modal form{padding:1rem; min-width: 320px}

.tag{display:inline-block; padding:.15rem .5rem; border-radius:999px; border:1px solid var(--border); color:var(--muted); font-size:.75rem}
.tag.primary{background:rgba(79,140,255,.15); color:#b7d1ff; border-color:transparent}
.kpi{display:flex; gap:.5rem; align-items:center}
.kpi .pill{padding:.1rem .45rem; border-radius:999px; background:#1a2030; border:1px solid var(--border); color:var(--muted); font-size:.75rem}

footer{color:var(--muted); text-align:center; padding:2rem 1rem}