/* ==========================================================================
   Monitoring Temp and Humid — iPhone 12 Pro Max dashboard, v2
   Token system (Apple light-glass)
   Color   bg pastel wash · glass rgba(255,255,255,.55) blur(20px)
           temp accent #FF9500 (iOS orange) · humid accent #0A84FF (iOS blue)
           text primary #1c1c1e · text secondary #6e6e73 · hairline rgba(60,60,67,.14)
   Type    -apple-system / SF Pro stack throughout, tabular numerals for data
   Layout  428x926 iPhone 12 Pro Max frame, live Jalali date/clock at top,
           two frosted-glass ring gauges (no needle — glowing end-cap only)
   Signature  translucent iOS-control-center cards floating on a soft pastel
              blur field, ring gauges with a luminous terminal dot
   ========================================================================== */

:root{
  --temp:        #FF9500;
  --temp-soft:   #FFB74D;
  --humid:       #0A84FF;
  --humid-soft:  #5AC8FA;

  --text-1:      #000000;
  --text-2:      #000000;
  --text-3:      #000000;

  --glass:       rgba(255,255,255,0.55);
  --glass-strong:rgba(255,255,255,0.72);
  --glass-border:rgba(255,255,255,0.85);
  --hairline:    rgba(60,60,67,0.13);
  --track:       rgba(60,60,67,0.10);

  --font-apple: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}

*{ box-sizing: border-box; margin:0; padding:0; }

html,body{ height:100%; font-family: var(--font-apple); -webkit-font-smoothing: antialiased; }

/* ---------------- stage / backdrop ---------------- */
.stage{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 24px;
  background:
    radial-gradient(circle at 12% 15%, #ffe0c9 0%, transparent 40%),
    radial-gradient(circle at 88% 12%, #cfe8ff 0%, transparent 42%),
    radial-gradient(circle at 20% 92%, #e3d9ff 0%, transparent 40%),
    radial-gradient(circle at 85% 88%, #d3f3ea 0%, transparent 42%),
    linear-gradient(180deg,#f6f7f9 0%, #eceef2 100%);
}

/* ==================================================================
   iPhone 12 Pro Max frame — logical viewport 428 x 926
   ================================================================== */
.iphone{
  position:relative;
  width: 428px;
  height: 926px;
  background: linear-gradient(155deg, #f4f5f7 0%, #dcdfe4 45%, #eceef1 100%);
  border-radius: 62px;
  padding: 14px;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.6) inset,
    0 40px 90px -20px rgba(30,35,45,0.28),
    0 4px 18px rgba(30,35,45,0.14);
  flex-shrink:0;
}

.iphone-buttons .btn{
  position:absolute;
  background: linear-gradient(90deg,#c7cad0,#e4e6ea);
  border-radius:3px;
}
.iphone-buttons .mute{      left:-3px; top:158px; width:4px; height:32px; }
.iphone-buttons .vol-up{    left:-3px; top:210px; width:4px; height:58px; }
.iphone-buttons .vol-down{  left:-3px; top:280px; width:4px; height:58px; }
.iphone-buttons .power{     right:-3px; top:230px; width:4px; height:90px; }

.iphone-screen{
  position:relative;
  width:100%;
  height:100%;
  background:
    radial-gradient(circle at 18% 8%, rgba(255,159,90,0.16), transparent 38%),
    radial-gradient(circle at 88% 78%, rgba(10,132,255,0.14), transparent 42%),
    linear-gradient(180deg,#f8f9fb 0%, #eef0f4 100%);
  border-radius: 50px;
  overflow:hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}

/* ---------------- status bar ---------------- */
.status-bar{
  position:relative;
  height:47px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 26px 0 30px;
  color: var(--text-1);
}
.sb-time{ font-weight:600; font-size:15px; letter-spacing:0.3px; padding-top:2px; }
.sb-notch{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:154px; height:30px; background:#000; border-radius:0 0 20px 20px;
}
.sb-icons{ display:flex; align-items:center; gap:6px; padding-top:2px; }
.sb-icons svg{ fill:var(--text-1); }
.sb-battery{
  width:24px; height:12px; border:1.3px solid var(--text-1);
  border-radius:3px; padding:1.5px; opacity:0.95;
}
.sb-battery-fill{ display:block; width:78%; height:100%; background:var(--text-1); border-radius:1px; }

/* ---------------- app content ---------------- */
.app{
  height: calc(100% - 47px - 30px);
  padding: 8px 22px 0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* live date/time row, top of screen */
.datetime-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 14px;
  background: var(--glass);
  border:1px solid rgba(0,0,0,0.55);
  border-radius:16px;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    0 12px 26px rgba(0,0,0,0.2),
    0 3px 8px rgba(0,0,0,0.12);
}
.datetime-text{
  font-variant-numeric: tabular-nums;
  font-size:13px;
  font-weight:600;
  color: var(--text-1);
  letter-spacing:0.2px;
}
.live-dot{
  display:flex; align-items:center; gap:5px;
  font-size:10px; font-weight:700; letter-spacing:1.2px;
  color:#000000;
}
.live-dot i{
  width:6px; height:6px; border-radius:50%;
  background: var(--humid);
  box-shadow: 0 0 6px 2px rgba(10,132,255,0.55);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:0.35; transform:scale(0.72); }
}

/* offline state — solid red dot, no pulse, red text, unmistakable */
.live-dot.is-offline{
  color:#FF3B30;
}
.live-dot.is-offline i{
  background:#FF3B30;
  box-shadow: 0 0 6px 2px rgba(255,59,48,0.55);
  animation:none;
  opacity:1;
  transform:scale(1);
}

.app-header{ padding: 0 4px; }
.app-title{
  font-weight:600;
  font-size:13px;
  line-height:1.2;
  color: var(--text-2);
  letter-spacing:0.4px;
  text-align:center;
}

/* ---------------- gauge card ---------------- */
.gauge-card{
  flex:1;
  min-height:0;
  background: var(--glass);
  border:1px solid rgba(0,0,0,0.55);
  border-radius:26px;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    0 14px 34px rgba(0,0,0,0.22),
    0 4px 10px rgba(0,0,0,0.12);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  position:relative;
  padding: 10px 0 6px;
}

.card-head{
  position:absolute;
  top:14px; left:18px; right:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.card-tag{
  font-size:13px;
  font-weight:700;
  letter-spacing:0.2px;
  color:#000000;
}
.refresh-pill{
  font-size:10.5px;
  font-weight:600;
  color: var(--text-2);
  background: rgba(60,60,67,0.08);
  border:1px solid var(--hairline);
  padding:3px 8px;
  border-radius:20px;
  letter-spacing:0.3px;
}

.gauge-wrap{
  position:relative;
  width: 256px;
  height: 256px;
  margin-top: 16px;
}

.gauge-svg{ width:100%; height:100%; overflow:visible; }

.gauge-track{
  fill:none;
  stroke: var(--track);
  stroke-width:18;
  stroke-linecap:round;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: rotate(135deg);
  stroke-dasharray: 471.24 157.08;
}
.gauge-fill-outline{
  fill:none;
  stroke: #000;
  stroke-width:22;
  stroke-linecap:round;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: rotate(135deg);
  stroke-dasharray: 0 628.32;
  opacity:0.9;
  transition: stroke-dasharray .6s cubic-bezier(.4,0,.2,1);
}
.gauge-fill{
  fill:none;
  stroke: var(--temp);
  stroke-width:18;
  stroke-linecap:round;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: rotate(135deg);
  stroke-dasharray: 0 628.32;
  transition: stroke-dasharray .6s cubic-bezier(.4,0,.2,1), stroke .4s ease;
}

.gauge-ticks line{ stroke: rgba(60,60,67,0.18); stroke-width:1.4; }
.gauge-ticks line.major{ stroke: rgba(60,60,67,0.32); stroke-width:2; }
.gauge-ticks text.tick-label{
  fill:#000000;
  font-family: var(--font-apple);
  font-size:10.5px;
  font-weight:600;
  font-variant-numeric: tabular-nums;
}

/* glowing end-cap instead of a needle */
.gauge-cap{
  fill:#fff;
  stroke: var(--temp);
  stroke-width:3;
  filter: drop-shadow(0 0 6px rgba(255,149,0,0.65));
  transition: cx .6s cubic-bezier(.4,0,.2,1), cy .6s cubic-bezier(.4,0,.2,1);
}
.gauge-cap.cap-humid{
  stroke: var(--humid);
  filter: drop-shadow(0 0 6px rgba(10,132,255,0.65));
}

/* center readout */
.gauge-readout{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  pointer-events:none;
}
.readout-value{
  font-family: var(--font-apple);
  font-weight:700;
  font-size:40px;
  color: var(--text-1);
  letter-spacing:0.2px;
  line-height:1;
  font-variant-numeric: tabular-nums;
  display:flex;
  align-items:baseline;
  justify-content:center;
}
.readout-value .sign{ font-size:26px; color:var(--text-2); margin-right:1px; }
.readout-value .unit{ font-size:16px; font-weight:600; color: var(--text-2); margin-left:3px; }
.readout-label{
  margin-top:6px;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:1.6px;
  color: var(--text-3);
}

/* range caps */
.range-cap{
  position:absolute;
  font-size:10.5px;
  font-weight:600;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.cap-min{ left:2px; bottom:14px; }
.cap-max{ right:2px; bottom:14px; }

/* ---------------- footer ---------------- */
.app-footer{
  padding: 2px 4px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:10.5px;
  font-weight:500;
  color: var(--text-2);
  letter-spacing:0.2px;
}
.footer-item{ display:flex; align-items:center; gap:6px; }
.dot-ok{
  width:6px; height:6px; border-radius:50%;
  background:#34C759;
  box-shadow:0 0 6px 1px rgba(52,199,89,0.6);
  display:inline-block;
}

.home-indicator{
  position:absolute;
  bottom:8px; left:50%;
  transform:translateX(-50%);
  width:134px; height:5px;
  border-radius:3px;
  background: var(--text-1);
  opacity:0.85;
}

/* ---------------- small-viewport safety ---------------- */
@media (max-width: 480px){
  .stage{ padding:20px 0; }
  .iphone{ transform: scale(0.86); }
}
@media (max-width: 400px){
  .iphone{ transform: scale(0.74); }
}