:root{
  --bg:#0e1116;
  --panel:#151a22;
  --panel-2:#1b2230;
  --border:#2a3443;
  --text:#e7edf5;
  --muted:#9aa7b2;
  --accent:#5aa0ff;
  --green:#39d98a;
  --yellow:#f6c343;
  --red:#ff6b6b;
  --blue:#6c8cff;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--text);
}
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:28px 32px; border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,#121722, #0e1116);
}
.title h1{margin:0;font-size:26px}
.subtitle{color:var(--muted);font-size:13px;margin-top:6px}
.meta{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.stamp{color:var(--muted);font-size:12px}
.actions{display:flex;gap:8px}
.btn{
  background:var(--panel); color:var(--text); padding:8px 12px; border-radius:8px;
  text-decoration:none; border:1px solid var(--border); font-size:12px;
}
.btn.ghost{background:transparent}

.summary{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:20px 32px;
}
.card{background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:16px}
.label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.value{font-size:18px;margin-top:10px}
.hint{color:var(--muted);font-size:12px;margin-top:6px}

.strip{margin:0 32px 12px; background:var(--panel-2); border:1px solid var(--border); border-radius:12px; padding:12px 16px; display:flex; align-items:center; gap:12px}
.strip-title{font-weight:600}
.strip-items{display:flex; gap:8px; flex-wrap:wrap}
.pill{padding:4px 8px;border-radius:999px;font-size:12px;border:1px solid var(--border)}

.grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; padding:16px 32px 8px;
}
.tile{background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:10px}
.tile h3{margin:0;font-size:16px}
.status{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 8px;border-radius:999px;border:1px solid var(--border)}
.status.active{background:rgba(57,217,138,.12);color:var(--green)}
.status.blocked{background:rgba(255,107,107,.12);color:var(--red)}
.status.paused{background:rgba(246,195,67,.12);color:var(--yellow)}
.status.done{background:rgba(108,140,255,.12);color:var(--blue)}
.next{font-weight:600}
.meta-row{display:flex;justify-content:space-between;color:var(--muted);font-size:12px}
.links a{color:var(--accent);font-size:12px;text-decoration:none;margin-right:10px}

.updates{padding:12px 32px 40px}
.updates h2{margin:0 0 12px 0;font-size:16px}
.updates-list{display:grid;gap:8px}
.update{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:12px; color:var(--muted); font-size:13px}
.update strong{color:var(--text)}

/* Waiting For section */
.waiting-for{padding:12px 32px 20px}

/* Usage Meter */
.usage-meter { padding: 0 32px 20px; }
.meter-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.meter-header h2 { margin: 0; font-size: 16px; }
.meter-meta { font-size: 13px; color: var(--muted); }
.meter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.meter-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.meter-info { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px; }
.meter-model { font-weight: 600; }
.meter-cost { color: var(--accent); }
.meter-bar-bg { background: var(--border); height: 8px; border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.meter-bar-fill { background: var(--accent); height: 100%; width: 0%; transition: width 0.5s ease; }
.meter-stats { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }

.section-header{display:flex;justify-content:space-between;align-items:center;margin:0 0 12px 0}
.section-header h2{margin:0;font-size:16px}
.count{color:var(--muted);font-size:13px}
.waiting-list{display:grid;gap:10px}
.waiting-item{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:14px}
.waiting-main{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.waiting-what{font-weight:600}
.waiting-who{color:var(--muted);font-size:13px}
.waiting-meta{display:flex;gap:12px;margin-bottom:8px;font-size:12px}
.waiting-age{color:var(--yellow)}
.waiting-remind{color:var(--green)}
.waiting-category{text-transform:uppercase;font-size:10px;letter-spacing:0.1em;color:var(--accent);border:1px solid var(--border);padding:2px 6px;border-radius:4px}
.waiting-context{color:var(--muted);font-size:12px;line-height:1.4}

@media(max-width:900px){
  .summary{grid-template-columns:1fr}
  .topbar{flex-direction:column;align-items:flex-start;gap:12px}
  .meta{align-items:flex-start}
}
