:root{
  --bg:#0b1020;
  --panel:#111827;
  --border:#263247;
  --text:#f8fafc;
  --muted:#94a3b8;
  --brand:#60a5fa;
  --ok:#34d399;
  --warn:#fbbf24;
  --danger:#fb7185;
  --card-shadow:0 10px 24px rgba(0,0,0,.22);
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans TC","PingFang TC","Microsoft JhengHei",Arial,sans-serif;
  background:
    radial-gradient(1000px 500px at 10% -10%, rgba(96,165,250,.18), transparent 60%),
    radial-gradient(1000px 500px at 90% -20%, rgba(52,211,153,.12), transparent 60%),
    var(--bg);
  color:var(--text);
}
a{ color:inherit; text-decoration:none; }
button, input, select{ font:inherit; }
.page{ max-width:1080px; margin:0 auto; padding:12px 12px 32px; }
.topbar{
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(12px);
  background:linear-gradient(to bottom, rgba(11,16,32,.92), rgba(11,16,32,.72));
  border-bottom:1px solid rgba(148,163,184,.12);
}
.topbar-inner{ max-width:1080px; margin:0 auto; padding:10px 12px; }
.app-title{ font-size:18px; font-weight:800; margin:0; }
.top-line{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.muted{ color:var(--muted); }
.subtext{ font-size:12px; color:var(--muted); line-height:1.6; margin-top:4px; }
.nav-tabs{ display:flex; gap:8px; margin-top:10px; }
.tab{
  padding:8px 12px; border-radius:999px; border:1px solid rgba(148,163,184,.2);
  background:rgba(255,255,255,.04); font-size:13px;
}
.tab.active{
  border-color:rgba(96,165,250,.4); color:#dbeafe; background:rgba(96,165,250,.12);
}
.surface{
  background:rgba(15,23,42,.82); border:1px solid var(--border); border-radius:18px; box-shadow:var(--card-shadow);
}
.toolbar, .event-editor{ margin-top:14px; padding:12px; }
.toolbar-row, .left-tools, .right-tools{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;
}
.left-tools, .right-tools{ justify-content:flex-start; }
.pill{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px;
  border-radius:999px; background:rgba(255,255,255,.05);
  border:1px solid rgba(148,163,184,.18); color:var(--muted); font-size:13px;
}
.pill strong{ color:var(--text); }
.status-active{ color:#d1fae5; border-color:rgba(52,211,153,.35); background:rgba(52,211,153,.12); }
.status-soon{ color:#fef3c7; border-color:rgba(251,191,36,.35); background:rgba(251,191,36,.12); }
input[type="text"], input[type="number"], select{
  min-height:42px; border-radius:12px; border:1px solid rgba(148,163,184,.22);
  background:rgba(255,255,255,.05); color:var(--text); padding:10px 12px; outline:none;
}
input::placeholder{ color:#7c8ca3; }
.primary-btn, .ghost-btn, .file-label{
  min-height:42px; border-radius:12px; border:1px solid rgba(148,163,184,.22);
  background:rgba(255,255,255,.06); color:var(--text); padding:10px 14px;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
}
.primary-btn{ background:rgba(96,165,250,.18); border-color:rgba(96,165,250,.35); }
.ghost-btn.danger{ border-color:rgba(251,113,133,.35); color:#fecdd3; }
.file-label input{ display:none; }
.section-title{ font-size:15px; font-weight:800; margin:0 0 10px; }
.grid{ display:grid; gap:12px; margin-top:14px; }
.clock-grid{ grid-template-columns:1fr; }
.clock-card, .event-card{
  background:rgba(15,23,42,.88); border:1px solid var(--border);
  border-radius:18px; padding:14px; box-shadow:var(--card-shadow);
}
.card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.card-top h3{ margin:0; font-size:18px; }
.badge{
  white-space:nowrap; border-radius:999px; padding:6px 10px; font-size:12px;
  border:1px solid rgba(148,163,184,.2); color:var(--muted);
}
.badge.active{
  border-color:rgba(52,211,153,.35); color:#d1fae5; background:rgba(52,211,153,.12);
}
.badge.soon{
  border-color:rgba(251,191,36,.35); color:#fef3c7; background:rgba(251,191,36,.12);
}
.clock-block{ margin-top:14px; }
.label{ font-size:12px; color:var(--muted); margin-bottom:4px; }
.big-time{ font-size:28px; font-weight:900; letter-spacing:.4px; }
.small-line{ margin-top:6px; font-size:12px; color:var(--muted); }
.meta-list{ margin-top:14px; display:grid; gap:8px; }
.meta-list > div{ display:flex; gap:10px; justify-content:space-between; align-items:flex-start; font-size:13px; }
.meta-list strong{ text-align:right; }
.card-actions{ margin-top:14px; display:flex; gap:8px; flex-wrap:wrap; }
.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.dialog{
  width:min(560px, calc(100% - 24px)); border:none; border-radius:18px;
  background:#0f172a; color:var(--text); padding:0;
}
.dialog::backdrop{ background:rgba(0,0,0,.55); }
.dialog-body{ padding:16px; }
.form-grid{ display:grid; gap:12px; }
.form-actions{ display:flex; gap:8px; margin-top:14px; }
.event-row{
  display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)) auto;
  gap:8px; margin-top:8px;
}
.detail-grid{ display:grid; gap:10px; margin-top:14px; }
.detail-block{
  background:rgba(255,255,255,.03); border:1px solid rgba(148,163,184,.12);
  border-radius:14px; padding:10px;
}
.detail-block .value{ font-size:14px; line-height:1.5; }
.detail-block .strong{ font-weight:800; }
.event-card.active{ border-color:rgba(52,211,153,.35); }
.event-card.soon{ border-color:rgba(251,191,36,.35); }
.toast{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%); opacity:0;
  transition:opacity .18s ease, transform .18s ease; pointer-events:none; z-index:50;
  padding:10px 14px; border-radius:999px; background:rgba(15,23,42,.92);
  border:1px solid rgba(148,163,184,.2); color:var(--text);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(-4px); }
@media (min-width: 720px){
  .clock-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .detail-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1040px){
  .clock-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 719px){
  .page{ padding-left:10px; padding-right:10px; }
  .topbar-inner{ padding-left:10px; padding-right:10px; }
  .app-title{ font-size:16px; }
  .subtext{ font-size:11px; }
  .event-row{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .event-row button{ grid-column:1 / -1; }
  .big-time{ font-size:24px; }
}