:root{--bg: #080a0e;--bg-elevated: #101b2e;--surface: #152035;--surface-2: #1d2c47;--border: #2a3a55;--text: #e8edf6;--muted: #8aa3bc;--accent: #ff601f;--accent-ink: #1a1208;--accent-soft: rgba(255, 96, 31, .14);--accent-ring: rgba(255, 96, 31, .45);--fav: #ffd257;--danger: #e06060;--radius: 16px;--tap: 48px;--font-body: "DM Sans", system-ui, sans-serif;--font-display: "Barlow Condensed", "Arial Narrow", sans-serif;color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0}body{background:radial-gradient(1200px 600px at 10% -10%,rgba(255,96,31,.12),transparent 55%),radial-gradient(900px 500px at 100% 0%,rgba(26,111,196,.1),transparent 50%),var(--bg);color:var(--text);font-family:var(--font-body);overscroll-behavior-y:contain}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.gate{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px;padding-top:max(24px,env(safe-area-inset-top))}.gate-card{width:100%;max-width:360px;background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:32px 24px;text-align:center;box-shadow:0 24px 60px #00000059}.gate-logo{margin-bottom:8px}.gate-brand{margin:0;font-family:var(--font-display);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:700}.gate-card h1{font-family:var(--font-display);font-size:36px;font-weight:700;letter-spacing:.02em;margin:4px 0 8px}.pin-input{width:100%;margin-top:18px;padding:16px;font-size:28px;letter-spacing:12px;text-align:center;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:14px;outline:none;font-family:var(--font-body)}.pin-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.pin-error{color:var(--danger);font-size:14px;margin-top:10px}.btn-primary{width:100%;margin-top:18px;min-height:var(--tap);border:none;border-radius:14px;background:var(--accent);color:var(--accent-ink);font-size:17px;font-weight:700;font-family:var(--font-body);cursor:pointer}.btn-primary:disabled{opacity:.6}.btn-ghost{min-height:var(--tap);padding:0 18px;border:1px solid var(--border);border-radius:12px;background:transparent;color:var(--text);font-size:15px;font-family:var(--font-body);cursor:pointer}.link-btn{background:none;border:none;color:var(--muted);font:inherit;cursor:pointer;padding:4px}.muted{color:var(--muted);font-size:14px;margin:0}.app{display:flex;flex-direction:column;height:100%}.topbar{position:sticky;top:0;z-index:10;background:#080a0ee6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:max(10px,env(safe-area-inset-top)) 14px 10px}.topbar-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.brand{display:flex;align-items:center;gap:10px}.brand-text{display:flex;flex-direction:column;line-height:1.05}.brand-mark{font-family:var(--font-display);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700}.brand-title{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:.02em}.sync-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;background:var(--surface-2);color:var(--text);border:1px solid var(--border);border-radius:999px;font-size:14px;font-weight:600;font-family:var(--font-body);cursor:pointer}.sync-btn:hover{border-color:var(--accent)}.sync-btn:disabled{opacity:.7}.sync-btn .spin{display:inline-block;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.search{width:100%;min-height:var(--tap);padding:0 16px;font-size:16px;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:12px;outline:none;font-family:var(--font-body)}.search:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.toolbar{display:flex;gap:8px;margin-top:10px;align-items:center}.view-switch{display:flex;flex:1;min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden}.view-btn{flex:1;min-height:36px;border:none;background:transparent;color:var(--muted);font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;padding:0 4px}.view-btn.view-on{background:var(--accent);color:var(--accent-ink)}.sort-label{flex:0 0 auto}.sort-select{min-height:36px;padding:0 10px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-family:var(--font-body);font-size:13px;font-weight:600}.pills{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.pills::-webkit-scrollbar{display:none}.pills-tags{margin-top:6px}.pill{flex:0 0 auto;min-height:38px;padding:0 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--muted);font-size:13px;font-weight:700;font-family:var(--font-display);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;cursor:pointer}.pill-on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.pill-fav.pill-on{background:var(--fav);border-color:var(--fav);color:#2a2000}.pill-tag:not(.pill-on){border-style:dashed;color:var(--text)}.list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px;padding-bottom:max(14px,env(safe-area-inset-bottom))}.pull-hint{text-align:center;color:var(--muted);font-size:13px;padding:6px 0 10px}.cards{list-style:none;margin:0;padding:0;display:grid;gap:12px}.cards-list{grid-template-columns:1fr;gap:8px}.cards-grid{grid-template-columns:1fr}.cards-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color .15s ease,transform .15s ease}.card:hover{border-color:var(--accent-ring)}.card-list{border-radius:12px}.card-list .card-main{padding:12px 14px}.card-list .card-name{font-size:15px}.card-list .card-foot{margin-top:8px}.card-gallery{border-radius:12px}.card-gallery .card-band{min-height:36px;display:flex;align-items:center;padding:6px 10px}.card-gallery .card-main{padding:10px}.card-gallery .card-name{font-size:13px;font-weight:700;line-height:1.2;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.card-gallery .card-foot{margin-top:8px}.card-gallery .badge{font-size:10px;padding:2px 7px}.card-band-label{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-main{display:block;padding:16px;color:var(--text);text-decoration:none}.card-main:active{background:var(--surface-2)}.card-head{display:flex;align-items:center;gap:8px}.star{color:var(--fav);font-size:16px}.card-name{font-size:17px;font-weight:700;line-height:1.25}.card-notes{color:var(--muted);font-size:14px;margin-top:6px;line-height:1.4}.card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}.card-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}.badge{font-size:11px;font-weight:700;font-family:var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-ring);padding:3px 9px;border-radius:999px}.badge-tag{color:var(--text);background:#8aa3bc1f;border-color:var(--border)}.meta-date{font-size:11px;color:var(--muted)}.open{flex:0 0 auto;font-size:14px;font-weight:700;color:var(--accent)}.backup{display:block;padding:10px 16px;border-top:1px dashed var(--border);color:var(--muted);font-size:13px;text-decoration:none}.backup:active{background:var(--surface-2)}.dash{margin-bottom:8px}.dash-section{margin-bottom:18px}.dash-h{margin:0 0 10px;font-family:var(--font-display);font-size:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.dash-h-filtered{margin-top:8px}.stat-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.stat-row::-webkit-scrollbar{display:none}.stat-chip{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:88px;padding:12px 14px;border-radius:14px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;font-family:var(--font-body);text-align:left}.stat-chip strong{font-family:var(--font-display);font-size:24px;color:var(--accent);line-height:1}.stat-chip span{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}.mini-strip{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.mini-strip::-webkit-scrollbar{display:none}.mini-tile{flex:0 0 auto;width:180px;padding:12px 14px;border-radius:14px;border:1px solid var(--border);background:var(--bg-elevated);color:var(--text);text-decoration:none;display:flex;flex-direction:column;gap:6px}.mini-tile:hover{border-color:var(--accent-ring)}.mini-tile-name{font-size:14px;font-weight:700;line-height:1.25}.mini-tile-meta{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:600}.empty{text-align:center;color:var(--muted);padding:48px 16px;display:grid;gap:16px;justify-items:center}.banner{border-radius:12px;padding:12px 14px;margin-bottom:12px;font-size:14px}.banner.error{background:#e060601f;border:1px solid rgba(224,96,96,.4);color:#ffd5d5;display:flex;justify-content:space-between;align-items:center}.banner.error button{background:none;border:1px solid rgba(224,96,96,.5);color:#ffd5d5;border-radius:8px;padding:4px 10px;cursor:pointer}.statusbar{display:flex;align-items:center;justify-content:center;gap:8px;border-top:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:12px;padding:10px 14px;padding-bottom:max(10px,env(safe-area-inset-bottom))}.statusbar .dot{opacity:.5}@media(min-width:640px){.cards-grid,.cards-dashboard{grid-template-columns:repeat(2,1fr)}.cards-gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.topbar,.list,.statusbar{max-width:980px;margin-left:auto;margin-right:auto}.app-view-gallery .topbar,.app-view-gallery .list,.app-view-gallery .statusbar{max-width:1280px}}@media(min-width:960px){.cards-grid{grid-template-columns:repeat(3,1fr)}.cards-gallery{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}}