:root{
  --bg:#f7f8fa; --card:#ffffff; --text:#1f2937; --muted:#6b7280;
  --brand:#2563eb; --brand-600:#1d4ed8;
  --border:#e5e7eb; --shadow:0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);
  --radius:14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  background:var(--bg); color:var(--text); line-height:1.4;
}
.container{width:100%; max-width:1100px; margin:0 auto; padding:16px;}

.app-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:12px 16px; background:var(--card); border-bottom:1px solid var(--border);
}
.app-brand{display:flex; align-items:center; gap:12px}
.app-logo{font-size:26px}
.app-title{font-size:18px; margin:0}
.app-subtitle{margin:0; color:var(--muted); font-size:13px}
.app-header__right{display:flex; gap:8px; align-items:center}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 14px; border-radius:10px; border:1px solid var(--border);
  background:#fff; color:var(--text); cursor:pointer; font-weight:600;
  box-shadow:var(--shadow); text-decoration:none;
}
.btn:hover{filter:brightness(.98)}
.btn-primary{background:var(--brand); color:#fff; border-color:transparent}
.btn-primary:hover{background:var(--brand-600)}
.btn-ghost{background:#fff; color:var(--text)}

.input{
  width:100%; padding:10px 12px; border:1px solid var(--border);
  border-radius:10px; background:#fff; color:var(--text);
}

.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden; margin-bottom:16px;
}
.card-header{padding:14px 16px; border-bottom:1px solid var(--border)}
.card-header h2{margin:0; font-size:18px}
.card-body{padding:16px}

.grid{display:grid; gap:16px}
.grid-2{grid-template-columns:1fr}
@media (min-width: 800px){ .grid-2{grid-template-columns:1fr 1fr} }

.info-card{
  background:#eef6ff; border:1px solid #dbeafe; color:#0f172a;
  padding:12px 14px; border-radius:12px; margin:8px 0 16px; box-shadow:var(--shadow);
}

.links-stack{display:flex; flex-direction:column; gap:10px}
.muted{color:var(--muted)}
.pill{
  display:inline-flex; gap:6px; align-items:center; font-size:12px;
  padding:4px 8px; border-radius:999px; background:#f1f5f9; border:1px solid var(--border); color:#334155;
}
.row-wrap{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.stack{display:flex; flex-direction:column; gap:10px}

.modal-overlay{
  position: fixed; inset: 0; display:none; align-items:center; justify-content:center;
  background: rgba(0,0,0,.55); z-index: 2147483647; padding:16px;
}
.modal-content{
  background:#fff; border-radius:14px; border:1px solid var(--border);
  width:100%; max-width:560px; padding:16px; box-shadow:var(--shadow); position:relative;
}
.modal-close{position:absolute; top:10px; right:12px; font-size:22px; cursor:pointer}

.list{display:flex; flex-direction:column; gap:10px}
.list-item{
  width:100%; text-align:left; padding:12px 12px; border-radius:12px;
  border:1px solid var(--border); background:#fff; box-shadow:var(--shadow);
  cursor:pointer;
}
.list-title{font-weight:700}
.list-sub{color:var(--muted); font-size:13px; margin-top:2px}
.empty{color:var(--muted); padding:10px}

body.dark{background:#0b1220; color:#e5e7eb}
body.dark .app-header, body.dark .card, body.dark .modal-content{background:#111827; border-color:#1f2937}
body.dark .btn, body.dark .input, body.dark .list-item{background:#0b1220; color:#e5e7eb; border-color:#1f2937}
body.dark .btn-primary{background:#1d4ed8}
body.dark .info-card{background:#0b213f; border-color:#0b213f; color:#e5e7eb}