:root{
  --bg1:#06251f;
  --bg2:#0c3f34;
  --card:rgba(255,255,255,.105);
  --card2:rgba(255,255,255,.16);
  --text:#fffaf1;
  --muted:#d8d1c3;
  --accent:#d9b66a;
  --accent2:#54d5b2;
  --line:rgba(255,255,255,.14);
  --shadow:0 18px 50px rgba(0,0,0,.28);
  --danger:#ff9b9b;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Tahoma,Arial,sans-serif}
body{color:var(--text)}
.screen-page,.admin-page,.system-page{
  min-height:100vh;min-height:100dvh;
  background:
    radial-gradient(circle at top left, rgba(217,182,106,.26), transparent 34%),
    radial-gradient(circle at bottom right, rgba(84,213,178,.2), transparent 30%),
    linear-gradient(145deg,var(--bg1),var(--bg2));
  overflow-x:hidden;
}
.theme-night{--bg1:#050914;--bg2:#13254c;--accent:#bac6ff;--accent2:#69d7ff}
.theme-gold{--bg1:#180f07;--bg2:#4a3318;--accent:#ffd77f;--accent2:#deb45d}
.theme-snow{
  --bg1:#f5efe2;--bg2:#e5eee8;--card:rgba(255,255,255,.78);--card2:rgba(255,255,255,.92);
  --text:#173c35;--muted:#536961;--accent:#b48931;--accent2:#0f766e;--line:rgba(15,118,110,.13)
}
.phone-frame,.admin-phone{
  width:min(100%,480px);min-height:100dvh;margin:auto;
  padding:calc(12px + env(safe-area-inset-top)) 12px calc(14px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:12px;
}
.screen-card,.admin-card{
  position:relative;overflow:hidden;border:1px solid var(--line);border-radius:26px;
  background:var(--card);box-shadow:var(--shadow);backdrop-filter:blur(16px);padding:16px;
}
.screen-card:before,.admin-card:before{
  content:"";position:absolute;inset:0;opacity:.08;pointer-events:none;
  background-image:
    linear-gradient(45deg,transparent 48%,var(--accent) 49%,transparent 50%),
    linear-gradient(-45deg,transparent 48%,var(--accent2) 49%,transparent 50%);
  background-size:34px 34px;
}
.screen-card>*{position:relative;z-index:1}
.mosque-line{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
h1{margin:0;color:var(--accent);font-size:26px;line-height:1.25}
h2{margin:0 0 14px;color:var(--accent);font-size:20px}
#mosquePlace,.muted{margin:5px 0 0;color:var(--muted);font-size:14px}
.sound-btn,.link-btn,.primary-btn,.secondary-btn,.ghost-btn{
  border:0;border-radius:16px;padding:12px 14px;font-weight:900;font:inherit;cursor:pointer;text-decoration:none;text-align:center
}
.sound-btn,.primary-btn{background:var(--accent);color:#1d1608}
.secondary-btn{background:rgba(255,255,255,.12);color:var(--text);border:1px solid var(--line)}
.ghost-btn{background:rgba(255,255,255,.08);color:var(--text)}
.sound-btn{border-radius:999px;padding:9px 11px;white-space:nowrap;font-size:12px}
.date-line{display:grid;gap:4px;margin-top:14px;color:var(--muted);font-size:13px;line-height:1.6}
.clock{
  direction:ltr;text-align:center;font-weight:900;font-size:60px;line-height:1;
  margin:16px 0 10px;letter-spacing:1px;text-shadow:0 10px 28px rgba(0,0,0,.22)
}
.mode-pill{
  width:max-content;max-width:100%;margin:auto;border:1px solid var(--line);
  background:var(--card2);border-radius:999px;padding:8px 13px;color:var(--muted);font-size:14px
}
.focus-card{text-align:center;padding:18px 14px}
.label,.section-title{color:var(--muted);font-weight:800;font-size:14px}
.big-prayer{font-size:52px;font-weight:900;color:var(--accent);margin:3px 0}
.countdown{direction:ltr;font-size:48px;font-weight:900;letter-spacing:1px}
.subtext{color:var(--muted);font-size:15px;margin-top:4px}
.prayer-list{display:grid;gap:8px;margin-top:12px}
.prayer-row{
  display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;
  border:1px solid var(--line);border-radius:18px;padding:10px 12px;background:rgba(255,255,255,.08)
}
.prayer-row.current{background:rgba(217,182,106,.22);border-color:rgba(217,182,106,.42)}
.prayer-row.next{background:rgba(84,213,178,.14);border-color:rgba(84,213,178,.32)}
.prayer-title{font-size:18px;font-weight:900}
.prayer-times{direction:ltr;color:var(--muted);font-size:13px;line-height:1.7;text-align:left}
.status{font-size:12px;border-radius:999px;padding:5px 9px;background:var(--card2);display:inline-block;margin-top:6px}
.message-card p{margin:10px 0 0;font-size:17px;line-height:1.8;color:var(--text)}
.connection-state{text-align:center;color:var(--muted);font-size:12px;padding:4px 0}

/* Forms */
.admin-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.admin-head h1{font-size:24px;color:var(--accent)}
.admin-head p{margin:5px 0 0;color:var(--muted);font-size:13px}
.admin-head a{background:var(--accent);color:#1d1608;text-decoration:none;border-radius:14px;padding:10px 12px;font-weight:900}
.admin-card>*{position:relative;z-index:1}
.card-head{display:flex;justify-content:space-between;gap:12px;align-items:center}
label{display:grid;gap:7px;margin-bottom:13px;font-weight:800;font-size:14px;color:var(--muted)}
input,select,textarea{
  width:100%;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.10);
  padding:12px;font:inherit;color:var(--text);outline:none
}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.45)}
textarea{resize:vertical}
.check-row{grid-template-columns:auto 1fr;align-items:center}
.check-row input{width:20px;height:20px}
.hint,#saveMsg,#loginMsg,#systemMsg{color:var(--accent2);font-weight:800;font-size:13px;min-height:18px;line-height:1.7}
.error{color:var(--danger)!important}
.hidden{display:none!important}
.times-editor{display:grid;gap:10px}
.time-item{background:rgba(255,255,255,.08);border-radius:18px;border:1px solid var(--line);padding:12px}
.time-item-title{font-weight:900;margin-bottom:10px;color:var(--accent)}
.time-inputs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sticky-actions{
  position:sticky;bottom:0;background:linear-gradient(to top,rgba(6,37,31,1) 82%,transparent);
  padding:18px 0 0;display:grid;gap:9px
}
.result-box{
  background:rgba(255,255,255,.10);border:1px solid var(--line);border-radius:18px;padding:14px;margin-top:12px;line-height:1.9;
  word-break:break-word
}
.code-big{direction:ltr;font-size:22px;color:var(--accent);font-weight:900;text-align:center;letter-spacing:1px}
.nav-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:370px){
  .clock{font-size:52px}.big-prayer{font-size:46px}.countdown{font-size:42px}
  .time-inputs{grid-template-columns:1fr}
}