*,:before,:after{box-sizing:border-box}:root{--primary:#8b5cf6;--accent:#ec4899;--bg:#fff;--bg-secondary:#f9fafb;--text:#111827;--text-secondary:#6b7280;--border:#e5e7eb;--error:#ef4444}body{-webkit-font-smoothing:antialiased;background:var(--bg);color:var(--text);margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.screen{min-height:100vh;padding-bottom:80px}.container{max-width:1200px;margin:0 auto;padding:24px}.header{background:var(--primary);color:#fff;margin-bottom:24px;padding:24px}.header h1{margin:0;font-size:28px;font-weight:700}.header p{opacity:.9;margin:8px 0 0;font-size:14px}.tabs{background:var(--bg);border-top:1px solid var(--border);z-index:100;display:flex;position:fixed;bottom:0;left:0;right:0}.tab{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;flex:1;padding:16px;font-size:14px;font-weight:500;transition:color .2s,background .2s}.tab:hover{background:var(--bg-secondary)}.tab.active{color:var(--primary);border-top:2px solid var(--primary)}.album-list{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:24px;display:grid}.album-card{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:16px;transition:box-shadow .2s,transform .2s}.album-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.album-card h3{color:var(--text);margin:0 0 8px;font-size:18px;font-weight:600}.album-card p{color:var(--text-secondary);margin:4px 0;font-size:14px}.album-actions{gap:8px;margin-top:12px;display:flex}.btn{cursor:pointer;border:none;border-radius:6px;padding:8px 16px;font-size:14px;font-weight:500;transition:background .2s,transform .1s}.btn:hover{transform:scale(1.02)}.btn:active{transform:scale(.98)}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:#7c3aed}.btn-accent{background:var(--accent);color:#fff}.btn-accent:hover{background:#db2777}.btn-secondary{background:var(--bg-secondary);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{background:var(--border)}.btn-small{padding:6px 12px;font-size:13px}.btn-danger{background:var(--error);color:#fff}.btn-danger:hover{background:#dc2626}.form-group{margin-bottom:16px}.form-group label{color:var(--text);margin-bottom:6px;font-size:14px;font-weight:500;display:block}.form-group input,.form-group select{border:1px solid var(--border);background:var(--bg);width:100%;color:var(--text);border-radius:6px;padding:10px 12px;font-family:inherit;font-size:14px}.form-group input:focus,.form-group select:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px #8b5cf61a}.checkbox-group{align-items:center;gap:8px;display:flex}.checkbox-group input[type=checkbox]{cursor:pointer;width:auto}.modal-overlay{z-index:1000;background:#00000080;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.modal{background:var(--bg);border-radius:12px;width:100%;max-width:500px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 25px -5px #0000001a}.modal-header{border-bottom:1px solid var(--border);padding:20px 24px}.modal-header h2{margin:0;font-size:20px;font-weight:600}.modal-body{padding:24px}.modal-footer{border-top:1px solid var(--border);justify-content:flex-end;gap:12px;padding:16px 24px;display:flex}.empty-state{text-align:center;padding:60px 24px}.empty-state h2{color:var(--text-secondary);margin:0 0 8px;font-size:20px}.empty-state p{color:var(--text-secondary);margin:0 0 24px}.badge{border-radius:12px;padding:4px 12px;font-size:12px;font-weight:500;display:inline-block}.badge-listened{color:#16a34a;background:#22c55e1a}.badge-unplayed{color:var(--accent);background:#ec48991a}