@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
html,body{height:100%;}
body{
  background: linear-gradient(180deg,#0f172a 0%, #0f172a 55%, #0ea5e9 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.wrapper{
  width: 460px;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border-radius: 14px;
  padding: 20px;
  color: #e6eef8;
  box-shadow: 0 8px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
}
.app-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 12px;
}
.brand{display:flex;align-items:center;gap:10px}
.brand h2{font-size:16px;font-weight:700;color:#e6eef8}
.theme-btn{background:transparent;border:0;color:#e6eef8;font-size:18px;cursor:pointer}
.clock-wrap{text-align:center;padding:12px 0}
#time{font-size:40px;font-weight:700;letter-spacing:1px;margin-bottom:6px}
.now-label{font-size:13px;color:#cfe9ff;min-height:18px}
.controls{padding:10px 2px}
.columns{display:flex;gap:8px;margin-bottom:10px}
.column{flex:1}
select{width:100%;height:46px;border-radius:8px;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.02);color:#e6eef8;padding:8px;font-size:15px}
.label-input,.file-input{display:block;margin-bottom:10px;font-size:13px;color:#cfe9ff}
.label-input input{width:100%;margin-top:6px;padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:#e6eef8}
.file-input input{margin-top:6px;color:#cfe9ff}
.actions{display:flex;gap:10px;margin-top:8px}
button#snoozeBtn.secondary{background:transparent;border:1px solid rgba(255,255,255,0.08);color:#e6eef8;padding:10px 12px;border-radius:8px;cursor:pointer}
button#setAlarm{flex:1;background:linear-gradient(90deg,#06b6d4,#6366f1);border:none;padding:10px 14px;border-radius:8px;color:#021022;font-weight:600;cursor:pointer}
.message-area{margin-top:12px;min-height:46px;padding:10px;border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));color:#dff5ff;font-size:14px}

/* Light theme (toggled) */
html.light, html.light body { background: linear-gradient(180deg,#f8fafc,#eef2ff); color: #0b1220; }
html.light .wrapper { background: linear-gradient(135deg, rgba(2,6,23,0.02), rgba(255,255,255,0.96)); color: #0b1220; box-shadow: 0 6px 18px rgba(2,6,23,0.08); }
html.light .brand h2, html.light .now-label, html.light .message-area { color: #0b1220; }
html.light .theme-btn { color: #0b1220; }
html.light select{background:#fff;border:1px solid rgba(2,6,23,0.06);color:#0b1220}
html.light .label-input input{background:#fff;color:#0b1220;border:1px solid rgba(2,6,23,0.06)}
html.light button#snoozeBtn.secondary{background:transparent;border:1px solid rgba(2,6,23,0.06);color:#0b1220}
html.light button#setAlarm{color:#fff}

@media (max-width:520px){
  .wrapper{width:100%;}
  #time{font-size:34px}
}