/* Simple responsive styles for the vClock clone */
:root{
  --bg:#0f1724;--card:#0b1220;--text:#e6eef8;--accent:#29b6f6;
  --muted:#9fb6c9;
}
*{box-sizing:border-box}
body{font-family:Inter,Segoe UI,Arial,sans-serif;margin:0;background:linear-gradient(180deg,#071122,#0f1724);color:var(--text);min-height:100vh}
.container{max-width:980px;margin:24px auto;padding:18px}
.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.brand{font-weight:700;font-size:20px;color:var(--accent)}
.nav a{color:var(--muted);text-decoration:none;margin-left:10px}
.card{background:rgba(255,255,255,0.03);padding:18px;border-radius:12px;box-shadow:0 6px 18px rgba(2,6,23,0.6)}
.clock-display{font-size:64px;text-align:center;font-weight:600;margin:8px 0}
.controls{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.btn{background:var(--accent);color:#022024;border:none;padding:8px 12px;border-radius:8px;cursor:pointer}
.small{padding:6px 8px;font-size:14px}
.form-row{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:12px}
.input,select{padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--text)}
.footer{font-size:13px;color:var(--muted);text-align:center;margin-top:18px}
.timer-large{font-size:48px;font-weight:600;text-align:center;margin:12px 0}
.list-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:8px}
.link-chip{background:rgba(255,255,255,0.02);padding:8px 10px;border-radius:999px;color:var(--muted);text-decoration:none}
.settings{font-size:14px;color:var(--muted);text-align:center;margin-top:12px}
@media(max-width:520px){.clock-display{font-size:40px}.timer-large{font-size:32px}}
:root[data-theme='dark'] {
  --bg:#0f1724;--card:#0b1220;--text:#e6eef8;--accent:#29b6f6;--muted:#9fb6c9;
}
:root[data-theme='light'] {
  --bg:#f5f5f5;--card:#ffffff;--text:#1a1a1a;--accent:#007acc;--muted:#555;
}
body { background:var(--bg); color:var(--text); }
.card { background:var(--card); color:var(--text); }