:root { --bg:#f5f6fb; --surface:#fff; --surface-2:#f0f1f8; --accent:#6653e8; --accent-soft:#eeeaff; }
html { background:var(--bg); }
.hero { padding:26px 28px; margin-bottom:24px; border:1px solid var(--line); border-radius:22px; background:linear-gradient(110deg,var(--surface) 35%,var(--accent-soft)); }
.hero h1 { margin:7px 0; font-size:40px; }
.hero p { max-width:390px; line-height:1.6; }
.hero-stats { padding:10px 0; }
.hero-stats button { min-height:44px; }
.eyebrow { font-size:9px; letter-spacing:1.4px; }
.brand-mark { box-shadow:0 5px 16px #6653e821; }
.sidebar { padding-top:30px; }
.server-card { display:flex; align-items:center; gap:9px; margin-bottom:12px; padding:14px 12px; border:1px solid var(--line); border-radius:14px; background:var(--bg); }
.server-card strong,.server-card small { display:block; }
.server-card strong { font-size:12px; font-weight:600; }
.server-card small { margin-top:4px; font-size:10px; color:var(--muted); }
.app-card { transition:border-color .18s,box-shadow .18s; }
.app-card:hover { box-shadow:0 8px 26px #2822440a; }
.connection-banner { padding:13px 15px; margin-bottom:18px; background:#fff3df; border:1px solid #edd8b2; border-radius:12px; color:#896222; font-size:12px; line-height:1.5; }
.settings-body { padding:22px 24px; }
.setting-label { display:block; font-size:14px; font-weight:650; margin-bottom:10px; }
.setting-group { margin-top:24px; padding-top:22px; border-top:1px solid var(--line); }
.setting-group h3 { font-size:14px; margin:0; }
.setting-group p { font-size:12px; line-height:1.65; color:var(--muted); overflow-wrap:anywhere; }
.settings-actions { display:grid; gap:10px; }
.settings-actions .file-button { font-size:14px; }
.login-screen { position:fixed; z-index:200; inset:0; display:grid; place-items:center; overflow:auto; padding:calc(24px + var(--safe-top)) 20px calc(24px + var(--safe-bottom)); background:radial-gradient(ellipse at 20% 10%,var(--accent-soft),var(--bg) 65%); }
.login-card { width:min(410px,100%); padding:34px; border:1px solid var(--line); border-radius:26px; background:var(--surface); box-shadow:0 20px 70px #2720470a; }
.login-card .brand-mark { width:52px; height:52px; border-radius:17px; margin-bottom:24px; }
.login-card .brand-mark svg { width:28px; height:28px; }
.login-card h1 { font-size:29px; letter-spacing:-1px; line-height:1.2; margin:10px 0; }
.login-card p { font-size:13px; color:var(--muted); line-height:1.6; }
.login-card label { display:block; font-size:12px; font-weight:650; margin:28px 0 8px; }
.login-card input { display:block; width:100%; height:48px; padding:0 12px; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:12px; }
.login-card button { margin-top:14px; width:100%; }
.login-card small { display:block; font-size:11px; color:var(--muted); line-height:1.6; }
#loginError { color:var(--danger); }
.is-locked { overflow:hidden; }
.is-locked .app-shell,.is-locked .bottom-nav { visibility:hidden; }
[data-theme="dark"] { color-scheme:dark; --bg:#121622; --surface:#1a2030; --surface-2:#252c3f; --text:#edf0fa; --muted:#a0aac1; --line:#2d354b; --accent:#a697ff; --accent-soft:#302a50; --success:#60c5a3; --danger:#ff819d; }
[data-theme="dark"] .hero { background:linear-gradient(115deg,var(--surface) 35%,#27213e); }
[data-theme="dark"] .topbar,[data-theme="dark"] .bottom-nav,[data-theme="dark"] .sheet-header { background:rgba(26,32,48,.96); }
[data-theme="dark"] .primary-button,[data-theme="dark"] .brand-mark { background:#7965ea; color:#fff; }
[data-theme="dark"] .secondary-button,[data-theme="dark"] .file-button,[data-theme="dark"] .icon-button,[data-theme="dark"] .filter-button,[data-theme="dark"] .sort-control select,[data-theme="dark"] .version-select { color:var(--text); background:var(--surface-2); border-color:var(--line); }
[data-theme="dark"] .source-input-row input,[data-theme="dark"] .date-fields input,[data-theme="dark"] .check-box { color:var(--text); background:var(--bg); border-color:var(--line); }
[data-theme="dark"] .search-box:focus-within { background:#2c2843; border-color:#71648f; }
[data-theme="dark"] .source-label,[data-theme="dark"] .version-chip,[data-theme="dark"] .source-type-hints span { color:#c0b4ff; }
[data-theme="dark"] .version-chip,[data-theme="dark"] .open-button { background:var(--accent-soft); }
[data-theme="dark"] .hero-stats strong,[data-theme="dark"] .version-summary strong,[data-theme="dark"] .version-details b { color:#c2cbe1; }
[data-theme="dark"] .about-box p { color:var(--muted); }
[data-theme="dark"] .card-footer { border-color:var(--line); }
[data-theme="dark"] .date-presets button { background:var(--surface-2); color:var(--text); }
[data-theme="dark"] .date-presets button.active { background:var(--accent-soft); border-color:var(--accent); }
[data-theme="dark"] .source-delete { background:#3b2638; }
[data-theme="dark"] .source-manager-head button { color:var(--text); }
[data-theme="dark"] .connection-banner { background:#332c22; border-color:#55442a; color:#e1c798; }
@media (min-width:761px) { #settingsButton { display:none; } .content { padding-top:28px; } }
@media (min-width:1280px) { .app-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px) {
  .hero { padding:0; border:0; background:none; margin-bottom:18px; }
  .hero h1 { font-size:32px; margin:5px 0; }
  .hero p { font-size:12px; }
  .hero-stats { margin-top:3px; padding:0; }
  [data-theme="dark"] .hero { background:none; }
  .settings-body { padding:20px; }
  .topbar { padding-top:calc(9px + var(--safe-top)); }
  .mobile-brand { font-size:17px; gap:7px; }
  .top-actions { gap:5px; }
  .content { padding-top:20px; }
  .login-card { padding:26px; }
}
@media (max-width:374px) { .mobile-brand .brand-mark { width:26px; height:26px; border-radius:8px; } .top-actions { gap:3px; } .library-toolbar { grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr); } }