/* آسمان بالای سرم — روی base.css و night-sky.css سوار می‌شود */

/* backdrop-filter و انیمیشن روی section باعث می‌شود position:fixed نسبت به همان بخش حساب شود؛ حالت تمام‌صفحه به این نیاز دارد */
#sky-now{backdrop-filter: none!important; -webkit-backdrop-filter: none!important; animation: none!important; transform: none!important}

.sn-ctrl{display: grid; gap: 10px; margin-bottom: 16px; padding: 14px 16px; border: 1px solid rgba(125, 166, 235, .2); border-radius: 16px; background: rgba(7, 17, 36, .7)}
.sn-row{display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px}
.sn-primary{border-color: rgba(53, 214, 232, .6); background: rgba(53, 214, 232, .1)}
.sn-sel select{font: 500 .86rem 'Noto Sans Arabic', sans-serif; color: var(--text); background: rgba(10, 23, 42, .9); border: 1px solid var(--line2); border-radius: 10px; padding: 7px 12px; min-height: 40px}
.sn-sel select:focus-visible,.sn-time input:focus-visible,.sn-chk input:focus-visible{outline: 2px solid var(--cyan); outline-offset: 3px}
.sn-loc,.sn-tm{font-size: .86rem; color: #b9cde8}
.sn-loc{direction: rtl}
.sn-time{display: flex; align-items: center; gap: 10px; flex: 1 1 220px; font-size: .86rem; color: var(--muted)}
.sn-time input{flex: 1; min-width: 120px; accent-color: var(--cyan)}
.sn-ctrl .sk-msg{margin: 0; min-width: 0; flex: none; font-size: .86rem; line-height: 1.9}
.sn-ctrl .sb{min-height: 40px}

.sn-stage canvas#sn{display: block; width: 100%; aspect-ratio: 4/3; touch-action: manipulation; cursor: crosshair}
.sn-stage canvas#sn:focus-visible{outline: 2px solid var(--cyan); outline-offset: -3px}
.sn-note{padding: 10px 16px; border-top: 1px solid rgba(126, 166, 222, .15); font-size: .84rem; line-height: 1.9; color: #b9cde8; background: rgba(4, 10, 21, .75)}
.sn-bar{gap: 10px 12px}
.sn-seg{display: inline-flex; gap: 6px}
.sn-bar .sb{min-height: 40px}
.sn-bar .sb[aria-pressed="true"]{border-color: rgba(53, 214, 232, .7); background: rgba(53, 214, 232, .12)}
.sn-chk{display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: #b9cde8; cursor: pointer}
.sn-chk input{accent-color: var(--cyan); width: 17px; height: 17px}
.sn-hud[hidden]{display: none}
.sn-hud{display: flex; align-items: center; justify-content: space-between; gap: 10px}

/* پنل کناری */
.sn-info{display: flex; flex-direction: column; gap: 4px; max-height: 760px; overflow: auto; overscroll-behavior: contain}
.sn-sum-l{margin: 18px 0 0}
.sn-sum{margin: 0 0 8px; font-size: .9rem; color: #c8d8ef; line-height: 1.9}
.sn-grp{margin: 12px 0 6px; font-size: .78rem; color: var(--muted)}
#snList ul{list-style: none; margin: 0; padding: 0; display: grid; gap: 4px}
.sn-item{display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 12px; text-align: start; color: var(--text); font-size: .88rem; background: rgba(255, 255, 255, .02); border: 1px solid transparent; border-radius: 12px; cursor: pointer}
.sn-item:hover{border-color: rgba(53, 214, 232, .4); background: rgba(53, 214, 232, .05)}
.sn-item:focus-visible{outline: 2px solid var(--cyan); outline-offset: 2px}
.sn-item[aria-pressed="true"]{border-color: rgba(53, 214, 232, .7); background: rgba(53, 214, 232, .1)}
.sn-item[data-dim]{opacity: .6}
.sn-item i{flex: none; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 8px currentColor}
.sn-nm{flex: 1; min-width: 0}
.sn-nm small{font: 400 .7rem var(--mono); color: var(--muted); direction: ltr; unicode-bidi: isolate}
.sn-pos{flex: none; font-size: .78rem; color: #9fe8ff; white-space: nowrap}
.sn-priv{margin: 16px 2px 0; font-size: .8rem; line-height: 2; color: var(--muted)}

/* حالت تمام‌صفحه (نگاه‌کردن به آسمان) */
html.sn-lock,html.sn-lock body{overflow: hidden}
.sn-stage.ar-full{position: fixed!important; inset: 0; z-index: 300; width: 100vw; height: 100vh; height: 100dvh; max-width: none; border: 0!important; border-radius: 0!important; background: #030916!important}
.sn-stage.ar-full canvas#sn{position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; touch-action: none}
.sn-stage.ar-full .sn-hud{position: absolute; top: 0; left: 0; right: 0; z-index: 2; padding: calc(10px + env(safe-area-inset-top, 0px)) calc(12px + env(safe-area-inset-right, 0px)) 10px calc(12px + env(safe-area-inset-left, 0px)); background: linear-gradient(180deg, rgba(2, 6, 17, .85), rgba(2, 6, 17, 0)); font-size: .84rem; color: #e8f4ff; line-height: 1.8; pointer-events: none}
.sn-stage.ar-full .sn-hud .sb{pointer-events: auto; flex: none}
.sn-stage.ar-full .sn-note{display: none}
.sn-stage.ar-full .sn-bar{position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 10px calc(12px + env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) calc(12px + env(safe-area-inset-left, 0px)); background: linear-gradient(0deg, rgba(2, 6, 17, .92), rgba(2, 6, 17, .55)); border-top: 0!important}
.sn-stage.ar-full .sn-chk{display: none}

@media(max-width:860px){
  .sn-stage canvas#sn{aspect-ratio: 1/1.05}
  .sn-info{max-height: none}
}
@media(max-width:560px){
  .sn-ctrl{padding: 12px}
  .sn-bar .sb{flex: 1 1 auto}
  .sn-seg{width: 100%}
  .sn-seg .sb{flex: 1}
}