*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg: #f5f9ff;--color-surface: #ffffff;--color-surface-2: #f1f5fb;--color-border: #e2e8f0;--color-text: #1e293b;--color-text-muted: #64748b;--color-primary: #2563eb;--color-primary-hover: #1d4ed8;--color-primary-tint: #dbeafe;--color-danger: #dc2626;--color-success: #16a34a;--color-warning: #d97706;--color-info: #0ea5e9;--tint-danger: #fef2f2;--tint-success: #f0fdf4;--tint-warning: #fffbeb;--tint-info: #f0f9ff;--tint-violet: #f5f3ff;--on-tint-danger: #b91c1c;--on-tint-success: #15803d;--on-tint-warning: #92400e;--on-tint-info: #0369a1;--on-tint-violet: #7c3aed;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--font-sans: "Be Vietnam Pro", "Inter", "Segoe UI", system-ui, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;--font-h1: 22px;--font-h2: 18px;--font-h3: 15px;--radius: 10px;--radius-sm: 6px;--shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);--shadow-md: 0 4px 12px rgba(15, 23, 42, .08);--shadow-lg: 0 12px 32px rgba(15, 23, 42, .16);--sidebar-width: 216px;--sidebar-width-collapsed: 64px;--topbar-height: 56px}body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);font-size:14px;line-height:1.55;letter-spacing:-.006em;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}h1,h2,h3,h4{letter-spacing:-.02em;line-height:1.25}a{color:var(--color-primary);text-decoration:none}a:hover{text-decoration:underline}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);min-height:36px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;cursor:pointer;border:none;transition:background .15s,opacity .15s,box-shadow .15s,border-color .15s;white-space:nowrap}.btn:disabled{opacity:.55;cursor:not-allowed}.btn:focus-visible{outline:none;box-shadow:0 0 0 3px #2563eb4d}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--color-primary-hover)}.btn-danger{background:var(--color-danger);color:#fff}.btn-danger:hover:not(:disabled){background:#b91c1c}.btn-success{background:var(--color-success);color:#fff}.btn-success:hover:not(:disabled){background:#15803d}.btn-ghost{background:var(--color-surface);color:var(--color-text-muted);border:1px solid var(--color-border)}.btn-ghost:hover:not(:disabled){background:var(--color-surface-2);color:var(--color-text);border-color:#cbd5e1}.btn-sm{padding:4px 10px;min-height:28px;font-size:12px}.form-group{display:flex;flex-direction:column;gap:var(--space-1);margin-bottom:var(--space-4)}.form-group label{font-size:12px;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.04em}.input{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text);padding:var(--space-2) var(--space-3);font-size:14px;width:100%;outline:none;transition:border-color .15s,box-shadow .15s}.input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #2563eb26}.input::placeholder{color:#94a3b8}select.input{cursor:pointer}.table-wrap{overflow-x:auto;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);box-shadow:var(--shadow-sm)}table{width:100%;border-collapse:collapse}th{background:var(--color-surface-2);color:var(--color-text-muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:var(--space-3) var(--space-4);text-align:left;border-bottom:1px solid var(--color-border);white-space:nowrap}td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);vertical-align:middle;font-size:13px}tr:last-child td{border-bottom:none}tbody tr:hover td{background:var(--color-surface-2)}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-6);box-shadow:var(--shadow-sm)}.page{padding:var(--space-6);max-width:100%}.page-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-6);flex-wrap:wrap}.page-title{font-size:var(--font-h1);font-weight:700;letter-spacing:-.01em}.section-title{font-size:var(--font-h3);font-weight:600;letter-spacing:-.01em;color:var(--color-text)}.grid-2,.grid-3{display:grid;gap:var(--space-5)}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-auto{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}@media(max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.4;white-space:nowrap}.alert{padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);font-size:13px;margin-bottom:var(--space-4)}.alert-error{background:var(--tint-danger);border:1px solid #fecaca;color:var(--on-tint-danger)}.alert-success{background:var(--tint-success);border:1px solid #bbf7d0;color:var(--on-tint-success)}.alert-info{background:var(--tint-info);border:1px solid #bae6fd;color:var(--on-tint-info)}.spinner{display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle}.spinner-lg{width:28px;height:28px;border-width:3px}@keyframes spin{to{transform:rotate(360deg)}}@keyframes toast-in{0%{opacity:0;transform:translate(12px)}to{opacity:1;transform:translate(0)}}.skeleton{background:linear-gradient(90deg,#eef2f7 25%,#e2e8f0 37%,#eef2f7 63%);background-size:400% 100%;border-radius:var(--radius-sm);animation:shimmer 1.4s ease infinite}@keyframes shimmer{0%{background-position:100% 50%}to{background-position:0 50%}}.state-block{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-8) var(--space-4);color:var(--color-text-muted);text-align:center}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-8) var(--space-4);color:var(--color-text-muted);text-align:center}.empty-state-title{font-size:14px;font-weight:600;color:var(--color-text)}.text-muted{color:var(--color-text-muted)}.text-mono{font-family:var(--font-mono);font-size:12px}.flex-gap{display:flex;gap:var(--space-2);align-items:center}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.app-shell{display:flex;min-height:100vh}.sidebar{width:var(--sidebar-w, var(--sidebar-width));background:var(--color-surface);border-right:1px solid var(--color-border);display:flex;flex-direction:column;flex-shrink:0;position:fixed;top:0;bottom:0;left:0;z-index:10;transition:width .2s ease}.sidebar-brand{display:flex;align-items:center;gap:var(--space-2);height:var(--topbar-height);padding:0 var(--space-4);border-bottom:1px solid var(--color-border);font-weight:700;font-size:15px;color:var(--color-primary);white-space:nowrap;overflow:hidden;letter-spacing:-.01em}.sidebar-brand-mark{width:30px;height:30px;flex-shrink:0;border-radius:var(--radius-sm);background:var(--color-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;letter-spacing:-.02em}.sidebar-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--space-2) 0}.sidebar-link{display:flex;align-items:center;gap:var(--space-3);margin:1px var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);font-size:13px;font-weight:500;color:var(--color-text);white-space:nowrap;overflow:hidden;transition:background .12s,color .12s}.sidebar-link:hover{background:var(--color-surface-2);text-decoration:none}.sidebar-link.active{background:var(--color-primary-tint);color:var(--color-primary);font-weight:600}.sidebar-link:focus-visible{outline:none;box-shadow:0 0 0 2px #2563eb66}.sidebar-link svg{flex-shrink:0}.sidebar-section{padding:var(--space-3) var(--space-4) var(--space-1);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-muted);white-space:nowrap;overflow:hidden}.sidebar-foot{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);border-top:1px solid var(--color-border)}.sidebar-user{padding:0 var(--space-2);font-size:12px;color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar.collapsed .sidebar-label,.sidebar.collapsed .sidebar-section,.sidebar.collapsed .sidebar-user,.sidebar.collapsed .sidebar-brand-text,.sidebar.collapsed .sidebar-btn-label{display:none}.sidebar.collapsed .sidebar-link,.sidebar.collapsed .sidebar-brand,.sidebar.collapsed .sidebar-foot .btn{justify-content:center}.sidebar.collapsed .sidebar-brand{padding:0}.sidebar.collapsed .sidebar-link{padding:var(--space-2)}.app-main{margin-left:var(--sidebar-w, var(--sidebar-width));flex:1;display:flex;flex-direction:column;min-height:100vh;min-width:0;transition:margin-left .2s ease}.discovery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;max-height:calc(100vh - 240px);overflow-y:auto;padding:2px}.discovery-card{display:flex;flex-direction:column;text-align:left;padding:0;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);cursor:pointer;overflow:hidden;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}.discovery-card:hover{transform:translateY(-3px);border-color:var(--color-primary);box-shadow:var(--shadow-lg)}.discovery-card:disabled{opacity:.6;cursor:default}.discovery-card-thumb{position:relative;width:100%;aspect-ratio:9 / 16;background:var(--color-surface-2);overflow:hidden}.discovery-card-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s ease}.discovery-card:hover .discovery-card-thumb img{transform:scale(1.05)}.discovery-card-play{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:34px;color:#fff;background:#0f172a26;opacity:0;transition:opacity .15s ease}.discovery-card:hover .discovery-card-play{opacity:1}.discovery-card-rank{position:absolute;top:6px;left:6px;background:#0f172ab3;color:#fff;font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px}.discovery-hashtag{display:inline-block;font-size:11px;color:var(--color-primary);background:var(--color-primary-tint);border-radius:999px;padding:1px 7px;margin:0 4px 4px 0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}