/* Developed with love by Abdulrahman Al Huwaymil */
:root{
  --base:#0f172a;          /* slate-900 */
  --card:#111827;          /* slate-800 */
  --text:#e5e7eb;          /* slate-200 */
  --accent:#14b8a6;        /* teal-500 */
  --warn:#f59e0b;          /* amber-500 */
  --muted:#94a3b8;         /* slate-400 */
  --ok:#16a34a;            /* green-600 */
}

@media (prefers-color-scheme: light){
  :root{
    --base:#f8fafc;
    --card:#ffffff;
    --text:#0f172a;
    --accent:#0ea5a4;
    --warn:#d97706;
    --muted:#64748b;
    --ok:#16a34a;
  }
}

html,body{height:100%;}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--base);
  color:var(--text);
  font-family:system-ui, -apple-system, Segoe UI, Roboto, "Noto Naskh Arabic UI", Arial, sans-serif;
}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; background:var(--card);
  border-bottom:1px solid color-mix(in oklab, var(--text) 12%, transparent);
  position:sticky; top:0; z-index:50;
}
.icon-btn{ background:transparent; color:var(--text); border:1px solid color-mix(in oklab, var(--text) 18%, transparent); border-radius:10px; padding:6px 10px; cursor:pointer;}
.icon-btn.close{ float:inline-end; }

.container{ max-width:980px; margin:0 auto; padding:20px; }

.hero{ text-align:center; padding:12px 0 8px; }
.muted{ color:var(--muted); }
.actions{ display:flex; gap:10px; flex-wrap:wrap; }
.actions.center{ justify-content:center; }

.btn{
  padding:12px 16px; border-radius:14px; border:1px solid transparent; cursor:pointer; font-weight:600;
  background:transparent; color:var(--text);
}
.btn.primary{ background:var(--accent); color:#00110f; }
.btn.primary:hover{ filter:brightness(1.05); }
.btn.ok{ background:var(--ok); color:#00110f; }
.btn.warn{ background:var(--warn); color:#221a00; }

.row{ display:grid; grid-template-columns: 180px 1fr; align-items:center; gap:12px; margin:12px 0; }
.row label, .row span{ color:var(--text); }
select, input[type="time"], input[type="number"]{
  width:100%; padding:10px 12px; border-radius:12px; border:1px solid color-mix(in oklab, var(--text) 14%, transparent);
  background:transparent; color:var(--text);
}
.choices{ display:flex; gap:16px; flex-wrap:wrap; }
.choices label{ display:inline-flex; gap:6px; align-items:center; cursor:pointer; }
.list{ display:grid; gap:10px; margin-top:10px; }
.card{
  background:var(--card);
  border:1px solid color-mix(in oklab, var(--text) 12%, transparent);
  border-radius:16px; padding:16px;
  box-shadow: 0 10px 30px color-mix(in oklab, var(--base) 70%, black);
}
.item{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px; border-radius:14px; border:1px solid color-mix(in oklab, var(--text) 12%, transparent); }
.item .left{ display:flex; flex-direction:column; gap:6px; }
.item .right{ display:flex; align-items:center; gap:8px; }

.badge{ background:color-mix(in oklab, var(--accent) 25%, transparent); padding:2px 8px; border-radius:999px; font-size:.85rem; }
.badge.warn{ background:color-mix(in oklab, var(--warn) 25%, transparent); }
.badge.best{ background:color-mix(in oklab, var(--ok) 30%, transparent); }
.note{ color:var(--muted); font-size:.95rem; }

.countdown{ margin-top:16px; }
.clock-container{ display:grid; place-items:center; min-height:320px; }
.digital{ font-size:2.6rem; font-weight:700; }
.analog{ background:transparent; border-radius:50%; border:2px solid color-mix(in oklab, var(--text) 20%, transparent); }

.footer{ text-align:center; padding:20px; color:var(--muted); }

/* Splash page */
.splash{ min-height:100dvh; display:grid; place-items:center; padding:24px; }
.moon-wrap{ text-align:center; }
.moon{ width:120px; height:120px; animation: float 4s ease-in-out infinite; }
.moon-fill{ fill: var(--accent); opacity:.85; }
.star{ fill: var(--text); opacity:.6; }
.site{ width:90px; height:90px; margin-top:8px; }
.screen{ fill:transparent; stroke:var(--text); stroke-width:3; opacity:.4 }
.bar{ fill:var(--accent); opacity:.8 }
.line{ fill:var(--text); opacity:.5 }
@keyframes float{ 0%,100%{ transform: translateY(0px); } 50%{ transform: translateY(-8px); } }
.spinner{ width:28px; height:28px; margin:12px auto 0; border-radius:50%;
  border:3px solid color-mix(in oklab, var(--text) 30%, transparent);
  border-top-color: var(--accent); animation: spin 1s linear infinite;}
@keyframes spin { to { transform: rotate(360deg); } }

/* Drawer */
.drawer{ position:fixed; inset:0; background:color-mix(in oklab, var(--base) 40%, transparent); display:none; }
.drawer[aria-hidden="false"]{ display:block; }
.drawer-content{ position:absolute; inset-inline-end:0; top:0; height:100%; width:min(420px, 92vw); background:var(--card); padding:16px; border-inline-start:1px solid color-mix(in oklab, var(--text) 14%, transparent); }

/* Modal */
.modal{ position:fixed; inset:0; background:color-mix(in oklab, var(--base) 45%, transparent); display:none; place-items:center; padding:20px; }
.modal[open]{ display:grid; }
.modal .card{ max-width:520px; width:100%; }

/* Responsive */
@media (max-width:640px){
  .row{ grid-template-columns: 1fr; }
}

/* THEME SWITCH */
:root[data-theme="dark"]{
  --base:#0f172a !important; --card:#111827 !important; --text:#e5e7eb !important; --accent:#14b8a6 !important; --warn:#f59e0b !important; --muted:#94a3b8 !important; --ok:#16a34a !important;
}
:root[data-theme="light"]{
  --base:#f8fafc !important; --card:#ffffff !important; --text:#0f172a !important; --accent:#0ea5a4 !important; --warn:#d97706 !important; --muted:#64748b !important; --ok:#16a34a !important;
}

/* Focus visibility */
:focus-visible{
  outline: 3px solid color-mix(in oklab, var(--accent) 70%, white);
  outline-offset: 2px;
}

/* Chips */
.chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.chip{ padding:8px 12px; border-radius:999px; border:1px solid color-mix(in oklab, var(--text) 18%, transparent); background:transparent; color:var(--text); cursor:pointer; }
.chip:hover{ border-color: color-mix(in oklab, var(--accent) 40%, transparent); }

/* Analog digital overlay */
.analog-wrap{ position:relative; display:inline-block; }
.analog-digital{
  position:absolute; inset:0; display:grid; place-items:center;
  margin:auto; width:70%; height:70%;
  background: color-mix(in oklab, var(--card) 65%, transparent);
  border:1px solid color-mix(in oklab, var(--text) 18%, transparent);
  border-radius:16px;
  font-size:1.8rem; font-weight:700;
}
/* fallback-time select */
.fallback-time{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid color-mix(in oklab, var(--text) 14%, transparent); background:transparent; color:var(--text); }

/* Emphasized cycle badge */
.badge.cycle{
  background: color-mix(in oklab, var(--warn) 65%, transparent);
  color: #221a00;
  font-size: 1.15rem;
  padding: 6px 12px;
  font-weight: 800;
}
/* Bigger digital overlay inside analog */
.analog-digital{ font-size: 2rem; font-weight: 800; }
/* Improve fallback-time select look */
.fallback-time{
  width:100%; padding:12px 14px; border-radius:14px;
  border:1px solid color-mix(in oklab, var(--text) 20%, transparent);
  background:transparent; color:var(--text);
}
.fallback-time:focus{ outline:3px solid color-mix(in oklab, var(--accent) 60%, white); outline-offset:2px; }

/* Touch-friendly time selects/inputs */
input[type="time"], .fallback-time{
  min-height: 48px;
  font-size: 1.05rem;
}