*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#071b16;color:#f5f7ef;font-family:Arial,Helvetica,sans-serif;overflow:hidden}button,input,select{font:inherit}button{cursor:pointer}.screen{height:100vh;display:flex;flex-direction:column;padding:2.2vh 3vw 1.4vh;background:radial-gradient(circle at 50% 35%,#123e31 0,#071b16 65%)}.topbar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:1.5vh}.brand{display:flex;align-items:center;gap:1vw}.logo-box{width:5.2vw;height:5.2vw;max-width:72px;max-height:72px;min-width:42px;min-height:42px;border:2px solid #d6b86a;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#d6b86a;font-size:clamp(22px,3vw,42px)}h1{font-size:clamp(20px,2.4vw,42px);letter-spacing:.06em;margin:0 0 .5vh;color:#f0d889}#mosqueLocation{font-size:clamp(12px,1.25vw,22px);opacity:.75}.datebox{text-align:right}.datebox #clock{font-size:clamp(28px,3.3vw,58px);font-weight:bold;letter-spacing:.04em;color:#fff}.datebox div:not(#clock){font-size:clamp(11px,1.1vw,18px);opacity:.8}.hero{text-align:center;flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}.hero #statusLabel{font-size:clamp(13px,1.2vw,22px);letter-spacing:.2em;color:#d6b86a}.next-name{font-size:clamp(24px,3vw,52px);font-weight:bold;margin:.5vh 0;color:#fff}.countdown{font-size:clamp(45px,7.5vw,132px);font-weight:bold;letter-spacing:.05em;line-height:1;color:#f0d889;text-shadow:0 0 25px rgba(240,216,137,.16)}#statusSub{font-size:clamp(12px,1.2vw,20px);opacity:.75;margin-top:1vh}.prayer-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.65vw;margin:1vh 0 1.5vh}.prayer{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:10px;text-align:center;padding:1.2vh .3vw}.prayer .pname{font-size:clamp(10px,1.05vw,19px);font-weight:bold;color:#d6b86a;white-space:nowrap}.prayer .ptime{font-size:clamp(19px,2.2vw,38px);font-weight:bold;margin-top:.55vh}.prayer.active{background:#b99743;color:#071b16;border-color:#f0d889;transform:translateY(-3px)}.prayer.active .pname{color:#071b16}footer{display:flex;align-items:center;min-height:3.5vh;border-top:1px solid rgba(255,255,255,.16);padding-top:.7vh;color:#dce8d6;font-size:clamp(11px,1.1vw,19px);overflow:hidden}#runningText{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.gear{background:transparent;border:0;color:#d6b86a;font-size:22px;margin-left:1vw}.hidden{display:none!important}.settings{position:fixed;inset:0;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:3vh 3vw;overflow:auto}.settings-card{background:#102d24;border:1px solid #52715d;border-radius:16px;width:min(900px,94vw);max-height:94vh;overflow:auto;padding:24px;box-shadow:0 10px 50px #000}.settings-head{display:flex;justify-content:space-between;align-items:center}.settings-head h2{margin:0 0 18px;color:#f0d889}.settings-head button{background:none;border:0;color:#fff;font-size:32px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.form-grid label,.adjust label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:#c8d8c8}.form-grid input,.form-grid select,.adjust input{background:#071b16;color:#fff;border:1px solid #496452;border-radius:7px;padding:10px}.adjust{margin-top:18px}.adjust h3{font-size:15px;color:#f0d889}.adjust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.actions{display:flex;gap:10px;margin-top:22px}.actions button{padding:11px 18px;border:0;border-radius:8px;background:#345646;color:#fff}.actions .primary{background:#b99743;color:#071b16;font-weight:bold}.note{font-size:12px;opacity:.65}
/* TV-first layout: retain landscape composition even when testing on a portrait phone. */
@media (max-width:700px){
  html,body{overflow:auto}
  .screen{min-width:900px;width:100vw;height:100vh;padding:18px 28px}
  .topbar{padding-bottom:12px}
  .prayer-grid{grid-template-columns:repeat(7,1fr);gap:8px}
  .prayer{padding:12px 4px}
  .prayer .pname{font-size:14px}
  .prayer .ptime{font-size:26px}
  .hero{min-height:300px}
  .countdown{font-size:64px}
}

/* FORCE LANDSCAPE PREVIEW ON PORTRAIT PHONES
   The browser cannot always lock orientation unless installed as an app.
   Therefore the entire display is rotated into a real landscape canvas. */
@media (orientation:portrait){
  html,body{width:100%;height:100%;overflow:hidden!important}
  #app{
    position:fixed!important;
    left:0!important;
    top:0!important;
    width:100vh!important;
    height:100vw!important;
    transform-origin:top left!important;
    transform:rotate(90deg) translateY(-100%)!important;
    overflow:hidden!important;
  }
  .screen{
    min-width:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    padding:2.2vh 2.5vw!important;
    overflow:hidden!important;
  }
  .topbar{padding-bottom:1.5vh!important}
  .hero{min-height:0!important;flex:1!important}
  .prayer-grid{grid-template-columns:repeat(7,1fr)!important;gap:1vw!important}
  .prayer{padding:1.2vh .3vw!important}
  .prayer .pname{font-size:clamp(9px,1.05vw,19px)!important}
  .prayer .ptime{font-size:clamp(18px,2.2vw,38px)!important}
  .countdown{font-size:clamp(38px,6vw,110px)!important}
  .settings{width:100%!important;height:100%!important}
}

/* Two-column TV display: schedule + flexible information panel */
.display-columns{display:grid;grid-template-columns:minmax(0,2.25fr) minmax(230px,.9fr);gap:1.4vw;height:100%;min-height:0}
.schedule-panel{display:flex;flex-direction:column;min-width:0;min-height:0}
.info-panel{border:1px solid rgba(214,184,106,.28);border-radius:16px;background:linear-gradient(145deg,rgba(31,82,65,.72),rgba(7,27,22,.82));padding:2.4vh 1.7vw;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.info-title{font-size:clamp(14px,1.25vw,24px);letter-spacing:.15em;color:#d6b86a;font-weight:bold}
.info-clock{font-size:clamp(30px,3.2vw,60px);font-weight:bold;color:#fff;margin-top:1.5vh;letter-spacing:.04em}
.info-date{font-size:clamp(11px,1vw,18px);opacity:.72;line-height:1.45}
.info-divider{height:1px;background:rgba(255,255,255,.16);margin:2vh 0}
.info-label{font-size:clamp(10px,.85vw,15px);letter-spacing:.14em;color:#d6b86a}
.info-next{font-size:clamp(22px,2vw,38px);font-weight:bold;margin-top:.5vh}
.info-time{font-size:clamp(18px,1.5vw,28px);color:#f0d889;margin-top:.3vh}
.info-message{font-size:clamp(14px,1.15vw,21px);line-height:1.55;color:#dce8d6;margin-top:.7vh}
.info-spacer{flex:1}
.info-footer{font-size:clamp(10px,.85vw,15px);line-height:1.6;color:#d6b86a;border-top:1px solid rgba(255,255,255,.14);padding-top:1.5vh}
.info-footer span{color:#dce8d6;opacity:.65}
.schedule-panel .hero{flex:1}
.schedule-panel .prayer-grid{margin-top:1vh}
@media (max-aspect-ratio:1/1){
  .display-columns{grid-template-columns:minmax(0,2.25fr) minmax(190px,.9fr)}
  .info-panel{padding-left:1.4vw;padding-right:1.4vw}
}

.cash-balance{font-size:clamp(24px,2.7vw,52px);font-weight:bold;color:#f0d889;margin-top:1vh;word-break:break-word}.info-message.small{font-size:clamp(12px,1vw,18px);opacity:.8}.iqamah-section{margin-top:1.5vh}

/* Settings fit fix for rotated portrait preview and Android back navigation */
.settings{z-index:50}
@media (orientation:portrait){.settings{align-items:flex-start!important;justify-content:flex-start!important;padding:2vw!important;overflow:auto!important}.settings-card{width:calc(100% - 4vw)!important;max-width:none!important;max-height:calc(100% - 4vw)!important;padding:16px!important;border-radius:12px}.settings-head h2{font-size:20px!important;margin-bottom:10px}.form-grid{gap:8px!important}.form-grid label,.adjust label{font-size:11px!important}.form-grid input,.form-grid select,.adjust input{padding:7px!important;font-size:12px!important}.adjust-grid{gap:7px!important}.actions{margin-top:14px!important}.note{font-size:10px!important}}

/* v0.3.5: bottom area is a dedicated moving running-text ticker */
footer{position:relative}
#runningText{display:block;overflow:hidden;text-overflow:clip;white-space:nowrap;padding-right:2vw}
#runningText::after{content:"";display:inline-block}
@keyframes runningTicker{
  0%{transform:translateX(100%)}
  100%{transform:translateX(-110%)}
}
#runningText{
  animation:runningTicker 24s linear infinite;
  will-change:transform;
}

/* v0.3.6: move settings button out of the running-text lane */
footer{padding-right:0!important}
footer #runningText{width:100%;flex:1;min-width:0}
footer .gear{
  position:fixed;
  right:1.2vw;
  bottom:1.2vh;
  z-index:20;
  margin:0!important;
  width:clamp(34px,3vw,58px);
  height:clamp(34px,3vw,58px);
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(214,184,106,.55);
  border-radius:50%;
  background:rgba(7,27,22,.9);
  box-shadow:0 2px 12px rgba(0,0,0,.25);
}


.pair-btn{position:fixed;right:1.2vw;bottom:7.2vh;z-index:20;width:clamp(34px,3vw,58px);height:clamp(34px,3vw,58px);border-radius:50%;border:1px solid rgba(212,175,55,.55);background:rgba(7,27,22,.92);color:#f1d77a;font-size:clamp(18px,1.8vw,30px);cursor:pointer}.pairing-card{max-width:620px}.pairing-body{text-align:center;padding:18px}.qr-placeholder{width:220px;height:220px;margin:10px auto 18px;border:3px dashed #d4af37;display:grid;place-items:center;font-size:54px;color:#d4af37;background:repeating-linear-gradient(45deg,rgba(212,175,55,.08),rgba(212,175,55,.08) 8px,transparent 8px,transparent 16px)}.qr-placeholder small{font-size:11px;line-height:1.3;padding:8px}.pairing-body h3{margin:8px 0;color:#f1d77a}.pairing-body p{color:#d7e5dc}

/* v0.3.8: tampilan TV lebih bersih */
.pair-btn{display:none!important}
footer .gear{position:fixed!important;right:.55vw!important;bottom:.45vh!important;width:18px!important;height:18px!important;min-width:18px!important;min-height:18px!important;font-size:14px!important;line-height:18px!important;padding:0!important;opacity:.38!important;margin:0!important}
#openPairingFromSettings{background:#345646;color:#fff;border:0;border-radius:8px;padding:11px 18px}
.sync-status{font-size:clamp(8px,.7vw,14px);opacity:.72;margin-top:.25vh;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:24vw}

/* Status teknis sinkronisasi tidak ditampilkan pada layar jamaah */
.sync-status{display:none!important}

/* v0.3.12: countdown ditempatkan paling atas, label animasi titik-titik */
.hero .countdown{order:1;margin-bottom:1.5vh}
.hero #statusLabel{order:2}
.hero .next-name{order:3}
.hero #statusSub{order:4}
.dots{display:inline-block;width:1.8em;text-align:left;overflow:hidden;vertical-align:bottom;animation:dotPulse 1.4s steps(4,end) infinite}
@keyframes dotPulse{0%{width:0}25%{width:.45em}50%{width:.9em}75%{width:1.35em}100%{width:1.8em}}