/* screen themes */
.iph .s-cream { background: #F9F8F5;  color: #1C1C1E; }
.iph .s-stone { background: #EFEEE9;  color: #1C1C1E; }
.iph .s-white { background: #FFFFFF;     color: #1C1C1E; }
.iph .s-night { background: #1C1C1E;  color: #FFFFFF; }
.iph .s-aegean { background: #243C5E;     color: #FFFFFF; }


/* ── STATUS BAR ── */
.iph .sbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 14px 0;
  flex-shrink: 0;
}
.iph .sbar-t { font-size: 10px; font-weight: 700; }
.iph .sbar-b {
  width: 18px; height: 9px;
  border: 1px solid currentColor;
  border-radius: 2px;
  opacity: .45;
  position: relative;
}
.iph .sbar-b::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 1px;
  background: currentColor;
}

/* ── BODY AREA ── */
.iph .body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.iph .scroll { overflow-y: auto; flex: 1; }
.iph .scroll::-webkit-scrollbar { display: none; }

/* ── NAV BAR ── */
.iph .nav {
  display: flex;
  height: 50px;
  flex-shrink: 0;
}
.iph .nav-light {
  background: #FFFFFF;
  border-top: .5px solid #E0DED9;
}
.iph .nav-dark {
  background: rgba(255,255,255,0.04);
  border-top: .5px solid rgba(255,255,255,0.08);
}
.iph .nav-stone {
  background: #EFEEE9;
  border-top: .5px solid #E0DED9;
}
.iph .nav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.iph .nav-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
}
.iph .nav-light .nav-dot { background: #E0DED9; }
.iph .nav-dark  .nav-dot { background: rgba(255,255,255,0.12); }
.iph .nav-stone .nav-dot { background: #E0DED9; }
.iph .nav-tab.on .nav-dot { background: #243C5E; }
.iph .nav-dark .nav-tab.on .nav-dot { background: #8EACBF; }
.iph .nav-lbl {
  font-family: 'DM Mono', monospace;
  font-size: 6px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9A9894;
}
.iph .nav-light .nav-tab.on .nav-lbl { color: #243C5E; font-weight: 700; }
.iph .nav-dark  .nav-tab.on .nav-lbl { color: #8EACBF; font-weight: 700; }
.iph .nav-stone .nav-tab.on .nav-lbl { color: #243C5E; font-weight: 700; }

/* ── TYPOGRAPHY ── */
.iph .mono { font-family: 'DM Mono', monospace; }
.iph .lbl { font-family: 'DM Mono', monospace; font-size: 7px; letter-spacing: .12em; text-transform: uppercase; }
.iph .h1 { font-size: 22px; font-weight: 800; letter-spacing: -.04em; line-height: .92; }
.iph .h2 { font-size: 16px; font-weight: 800; letter-spacing: -.03em; line-height: .95; }
.iph .h3 { font-size: 13px; font-weight: 700; letter-spacing: -.02em; }
.iph .h4 { font-size: 11px; font-weight: 700; }
.iph .body { font-size: 11px; line-height: 1.6; }
.iph .small { font-size: 9px; }
.iph .muted { color: #9A9894; }
.iph .aegean { color: #243C5E; }
.iph .green { color: #4E8C5A; }
.iph .red { color: #C05E3A; }
.iph .sky { color: #8EACBF; }
.iph .white { color: #FFFFFF; }

/* ── LAYOUT ── */
.iph .p { padding: 12px; }
.iph .p-sm { padding: 8px 12px; }
.iph .p-h { padding: 0 12px; }
.iph .row-sb { display: flex; justify-content: space-between; align-items: center; }
.iph .row-c { display: flex; align-items: center; gap: 8px; }
.iph .col { display: flex; flex-direction: column; }
.iph .gap-4 { gap: 4px; }
.iph .gap-6 { gap: 6px; }
.iph .gap-8 { gap: 8px; }
.iph .gap-10 { gap: 10px; }
.iph .mt-4 { margin-top: 4px; }
.iph .mt-6 { margin-top: 6px; }
.iph .mt-8 { margin-top: 8px; }
.iph .mt-10 { margin-top: 10px; }
.iph .mb-4 { margin-bottom: 4px; }
.iph .mb-6 { margin-bottom: 6px; }
.iph .mb-8 { margin-bottom: 8px; }
.iph .mb-10 { margin-bottom: 10px; }
.iph .center { text-align: center; }
.iph .flex-1 { flex: 1; }

/* ── COMPONENTS ── */
.iph .card {
  background: #FFFFFF;
  border-radius: 10px;
  border: .5px solid #E0DED9;
  overflow: hidden;
}
.iph .card-stone {
  background: #EFEEE9;
  border-radius: 10px;
  border: .5px solid #E0DED9;
  overflow: hidden;
}
.iph .card-ae {
  background: #D6E0ED;
  border-radius: 10px;
  border: .5px solid #E0DED9;
  overflow: hidden;
}
.iph .card-dark {
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
  border: .5px solid rgba(255,255,255,0.1);
  overflow: hidden;
}
.iph .card-ae-solid {
  background: #243C5E;
  border-radius: 10px;
  overflow: hidden;
}

.iph .divider { height: .5px; background: #E0DED9; }
.iph .divider-dark { height: .5px; background: rgba(255,255,255,0.08); }

.iph .tag {
  display: inline-block;
  font-family: 'DM Mono', monospace;
  font-size: 6px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
}
.iph .tag-ok { background: #E8F4EC; color: #4E8C5A; }
.iph .tag-lo { background: #FBEAE2; color: #C05E3A; }
.iph .tag-rx { background: #D6E0ED; color: #243C5E; }
.iph .tag-new { background: #243C5E; color: #FFFFFF; }
.iph .tag-free { background: #E8F4EC; color: #4E8C5A; border: .5px solid rgba(78,140,90,0.3); }
.iph .tag-act { background: #E8F4EC; color: #4E8C5A; }

.iph .pill {
  font-family: 'DM Mono', monospace;
  font-size: 7px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
}
.iph .pill-on { background: #243C5E; color: #FFFFFF; }
.iph .pill-off { border: .5px solid #E0DED9; color: #9A9894; }
.iph .pill-off-dk { border: .5px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.45); }

.iph .btn {
  border-radius: 100px;
  text-align: center;
  font-weight: 700;
  cursor: default;
}
.iph .btn-primary {
  background: #243C5E;
  color: #FFFFFF;
  padding: 10px 16px;
  font-size: 12px;
}
.iph .btn-sm {
  background: #243C5E;
  color: #FFFFFF;
  font-family: 'DM Mono', monospace;
  font-size: 6.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 100px;
}
.iph .btn-outline {
  border: .5px solid #E0DED9;
  color: #1C1C1E;
  padding: 9px 16px;
  font-size: 12px;
}

.iph .ellen {
  background: #D6E0ED;
  border-radius: 9px;
  border: .5px solid #E0DED9;
  padding: 8px 10px;
  display: flex;
  gap: 7px;
  align-items: flex-start;
}
.iph .ellen-dark {
  background: rgba(36,60,94,0.5);
  border-color: rgba(36,60,94,0.8);
}
.iph .ellen-av {
  width: 15px; height: 15px;
  border-radius: 50%;
  background: #243C5E;
  color: #FFFFFF;
  font-size: 6.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.iph .ellen-dark .ellen-av { background: #8EACBF; color: #1C1C1E; }

.iph .bubble-e {
  background: rgba(255,255,255,0.09);
  border-radius: 10px 10px 10px 2px;
  padding: 8px 10px;
  font-size: 9.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.9);
  margin-bottom: 6px;
  max-width: 88%;
}
.iph .bubble-u {
  background: #243C5E;
  border-radius: 10px 10px 2px 10px;
  padding: 8px 10px;
  font-size: 9.5px;
  line-height: 1.55;
  color: #FFFFFF;
  margin-bottom: 6px;
  max-width: 80%;
  margin-left: auto;
}

.iph .subnav {
  display: flex;
  border-bottom: .5px solid #E0DED9;
  flex-shrink: 0;
}
.iph .subnav-tab {
  flex: 1;
  text-align: center;
  padding: 6px 0;
  font-family: 'DM Mono', monospace;
  font-size: 6.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #9A9894;
}
.iph .subnav-tab.on {
  color: #243C5E;
  border-bottom: 1.5px solid #243C5E;
}

.iph .field {
  background: #FFFFFF;
  border: .5px solid #E0DED9;
  border-radius: 9px;
  padding: 9px 12px;
}
.iph .field.focus {
  border-color: #243C5E;
  box-shadow: 0 0 0 3px rgba(36,60,94,0.08);
}

.iph .prog {
  height: 3px;
  background: #EFEEE9;
  border-radius: 2px;
  overflow: hidden;
}
.iph .prog-fill {
  height: 100%;
  border-radius: 2px;
}

.iph .metric {
  background: #FFFFFF;
  border-radius: 9px;
  border: .5px solid #E0DED9;
  padding: 8px 10px;
}
.iph .metric .val {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  color: #1C1C1E;
}
.iph .metric .lbl {
  font-family: 'DM Mono', monospace;
  font-size: 6px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9A9894;
  margin-top: 3px;
}
.iph .metric .delta {
  font-size: 8px;
  margin-top: 2px;
}

.iph .toggle {
  width: 30px; height: 17px;
  border-radius: 100px;
  position: relative;
  flex-shrink: 0;
}
.iph .toggle::after {
  content: '';
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #FFFFFF;
  position: absolute;
  top: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.iph .toggle.on { background: #243C5E; }
.iph .toggle.off { background: #E0DED9; }
.iph .toggle.on::after { left: 15px; }
.iph .toggle.off::after { left: 2px; }

.iph .setting-row {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-bottom: .5px solid #E0DED9;
  justify-content: space-between;
  gap: 10px;
}
.iph .setting-row:last-child { border-bottom: none; }

.iph .avatar-lg {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #243C5E;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.iph .avatar-md {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #6F7C4A;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.iph .ob-dots { display: flex; gap: 5px; justify-content: center; }
.iph .ob-dot { width: 6px; height: 6px; border-radius: 50%; background: #E0DED9; }
.iph .ob-dot.on { width: 18px; border-radius: 3px; background: #243C5E; }

.iph .back-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 4px;
}
.iph .back-arrow { font-size: 14px; color: #243C5E; }

.iph .icon-box {
  width: 28px; height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
}

.iph .ring-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.iph .ring-inner {
  position: absolute;
  text-align: center;
}

.iph .search {
  background: #EFEEE9;
  border: .5px solid #E0DED9;
  border-radius: 100px;
  padding: 8px 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  color: #9A9894;
}


@keyframes pulse-glow{0%,100%{box-shadow:0 0 60px rgba(36,60,94,.8),0 0 120px rgba(36,60,94,.4)}50%{box-shadow:0 0 80px rgba(36,60,94,1),0 0 160px rgba(36,60,94,.6),0 0 240px rgba(142,172,191,.2)}}

/* ═══════════════════════════════════════
   iPHONE 15 PRO SHELL SYSTEM
   Aspect ratio: 393:852 = 2.168:1
   Use data-w attribute to set width; height is automatic
═══════════════════════════════════════ */
.iph-wrap {
  display:inline-block;
  position:relative;
}
.iph-shell {
  position:relative;
  background:linear-gradient(158deg,#e0ded7 0%,#edeae2 45%,#d6d3cb 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.65),
    0 0 0 1.5px rgba(37,36,36,.13),
    4px 4px 0 rgba(37,36,36,.05),
    0 28px 60px rgba(0,0,0,.16),
    0 8px 20px rgba(0,0,0,.07);
}
/* side button accents */
.iph-shell::before {
  content:'';
  position:absolute;
  top:22%;right:-2px;
  width:3px;height:14%;
  background:linear-gradient(#d0cec7,#c8c6be);
  border-radius:0 2px 2px 0;
  box-shadow:1px 0 2px rgba(0,0,0,.15);
}
.iph-shell::after {
  content:'';
  position:absolute;
  top:12%;left:-2px;
  width:3px;height:9%;
  background:linear-gradient(#d0cec7,#c8c6be);
  border-radius:2px 0 0 2px;
  box-shadow:-1px 0 2px rgba(0,0,0,.12);
}
.iph-screen {
  overflow:hidden;
  position:relative;
  background:var(--cream);
}
/* Dynamic Island */
.iph-di {
  position:absolute;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  background:#0a0a0a;
  border-radius:20px;
  z-index:10;
  /* width/height set inline per phone size */
}
/* Status bar */
.iph-status {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
  color:var(--night);
}
.iph-status-time {
  font-family:var(--h);
  font-weight:600;
  letter-spacing:-.01em;
}
.iph-status-icons {
  display:flex;
  align-items:center;
  gap:5px;
}
.iph-status-bar {
  width:24px; height:12px;
  border:1.5px solid currentColor;
  border-radius:3px;
  position:relative;
  opacity:.8;
}
.iph-status-bar::after {
  content:'';
  position:absolute;
  top:2px;left:2px;right:3px;bottom:2px;
  background:currentColor;
  border-radius:1.5px;
}
.iph-status-bar::before {
  content:'';
  position:absolute;
  right:-4px;top:50%;
  transform:translateY(-50%);
  width:2px;height:6px;
  background:currentColor;
  border-radius:0 1px 1px 0;
  opacity:.4;
}
/* Signal dots */
.iph-signal {
  display:flex;align-items:flex-end;gap:1.5px;
}
.iph-signal span {
  display:block;width:3px;border-radius:1px;background:currentColor;
}
/* Home indicator */
.iph-home {
  position:absolute;
  bottom:7px;
  left:50%;
  transform:translateX(-50%);
  height:5px;
  background:rgba(37,36,36,.25);
  border-radius:3px;
}
/* Tab bar */
.iph-tabs {
  display:flex;
  justify-content:space-around;
  border-top:1px solid var(--b1);
  background:rgba(249,248,245,.96);
  backdrop-filter:blur(20px);
}
.iph-tab {
  display:flex;flex-direction:column;align-items:center;
  font-family:var(--m);font-size:6px;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(37,36,36,.3);
  gap:3px;padding:8px 4px 4px;
}
.iph-tab.on { color:var(--aegean); }
.iph-tab-dot {
  width:4px;height:4px;border-radius:50%;
  background:var(--aegean);
}