:root{ --bg: #0b1020; --card: #151a2c; --accent: #ffd700; --accent2: #7daea3; --text: #f5f7fa; --muted: #7e8ba3; --radius: 18px; --gap: 22px; --max-width: 1100px; --shadow: 0 8px 32px 0 rgba(31,38,135,0.37); --glass: rgba(17, 20, 33, 0.7); } /* Theme overrides (set via data-theme attr on ) */ html[data-theme="light"]{ --bg: #f5f7fa; --card: #e3e9f0; --accent: #7daea3; --text: #1a1a1a; --muted: #5a5a5a; --glass: rgba(255,255,255,0.7); } html[data-theme="green"]{ --bg: #233d1e; --card: #1b2f18; --accent: #a3c586; --text: #eaf7e1; --muted: #b5cfb0; --glass: rgba(35,61,30,0.7); } *{box-sizing:border-box} body{ margin:0; min-height:100vh; background:linear-gradient(120deg,var(--bg) 0%, #09111a 100%); color:var(--text); font-family: 'Inter', 'Roboto', sans-serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; display:flex; align-items:center; justify-content:center; padding:24px; transition: background 0.5s; background-attachment: fixed; } /* App grid */ .app-grid{ width:100%; max-width:var(--max-width); display:grid; gap:var(--gap); grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; } /* header */ .site-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 24px; background:var(--glass); border-radius:var(--radius); box-shadow: var(--shadow); border:1px solid rgba(255,255,255,0.08); backdrop-filter: blur(8px); transition: background 0.4s; } .brand h1{ margin:0; font-size:1.5rem; letter-spacing:2px; background: linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .brand small{color:var(--muted);font-size:0.95em} .header-controls{display:flex;align-items:center;gap:12px} .font-wrap select{ padding:7px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.10); background:var(--glass); color:var(--text); font-weight:500; box-shadow:0 2px 8px rgba(2,6,23,0.08); transition: background 0.3s; } /* main player card */ .player-card{ background:var(--glass); border-radius:var(--radius); padding:28px 24px; box-shadow: var(--shadow); border:1px solid rgba(255,255,255,0.08); backdrop-filter: blur(12px); transition: background 0.4s; position:relative; overflow:hidden; } .player-card::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 80% 20%, var(--accent) 0%, transparent 60%); opacity:0.08; pointer-events:none; } /* player grid */ .player-grid{ display:grid; grid-template-columns: 220px 1fr; gap:28px; align-items:center; } /* cover */ .cover{ border-radius:14px; overflow:hidden; height:220px; box-shadow:0 8px 32px rgba(0,0,0,0.25); border:2px solid var(--accent); background:linear-gradient(135deg, var(--accent) 0%, transparent 100%); transition: border 0.3s; } .cover img{ width:100%; height:100%; object-fit:cover; display:block; filter: saturate(1.1) contrast(1.05); transition: filter 0.3s; } /* controls */ .player-controls .buttons{ display:flex; gap:12px; margin-top:16px; } .btn{ padding:12px 18px; border-radius:12px; border:none; background:linear-gradient(90deg, var(--accent), var(--accent2)); color:var(--bg); cursor:pointer; box-shadow:0 6px 18px rgba(2,6,23,0.25); font-weight:600; font-size:1.1em; transition: transform 0.1s, box-shadow 0.2s; } .btn:active{transform:scale(0.97)} #themeBtn{ background:transparent; border:1.5px solid var(--accent); color:var(--accent); box-shadow:none; padding:10px 14px; transition: border 0.2s, color 0.2s; } #themeBtn:hover{ background:var(--accent); color:var(--bg); } /* progress */ .progress-row{ display:flex; align-items:center; gap:10px; margin-top:18px; } .progress-row input[type="range"]{ flex:1; accent-color: var(--accent); height:4px; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius:4px; outline:none; } /* settings aside */ .settings{ padding:18px; border-radius:var(--radius); background:var(--glass); display:flex; flex-direction:column; gap:12px; border:1px solid rgba(255,255,255,0.08); box-shadow:0 2px 12px rgba(2,6,23,0.10); backdrop-filter: blur(8px); transition: background 0.4s; } .settings input[type="text"]{ padding:10px; border-radius:8px; border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.03); color:var(--text); font-size:1em; } .theme-buttons{ display:flex; gap:10px; margin-top:8px; } .theme-btn{ padding:9px 14px; border-radius:8px; border:1.5px solid var(--accent2); cursor:pointer; background:linear-gradient(90deg, transparent, var(--accent2) 80%); color:var(--text); font-weight:500; transition: background 0.2s, color 0.2s; } .theme-btn:hover{ background:var(--accent2); color:var(--bg); } /* footer */ .site-footer{ display:flex; justify-content:center; padding:10px; color:var(--muted); font-size:1.05em; letter-spacing:1px; } /* Responsive: tablet */ @media (max-width:900px){ .player-grid{grid-template-columns: 1fr; grid-template-rows: auto auto} .cover{height:200px} .app-grid{grid-template-columns:1fr;grid-template-rows:auto 1fr auto auto} .player-card{padding:18px 10px;} } /* Responsive: mobile */ @media (max-width:480px){ body{padding:8px} .cover{height:140px} .brand h1{font-size:1.1rem} .player-card{padding:10px 4px;} .font-wrap select{font-size:14px} .site-header{padding:10px 8px;} } /* helper */ .visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap} img{height: 40px; width: 56px;} #trackSelect{ padding:7px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.10); background:var(--glass); color:var(--text); font-weight:500; box-shadow:0 2px 8px rgba(2,6,23,0.08); transition: background 0.3s; }