:root{
  --bg-teal-1:#E9FBFA;
  --bg-teal-2:#DEF6F4;
  --surface:#FFFFFF;
  --ink:#0B4A54;
  --ink-soft:#4C7C82;
  --ink-faint:#9AB9BC;
  --primary:#0EA5B7;
  --primary-dark:#0A7E8C;
  --line:#D8EEEC;
  --pink:#EC1E85;
  --pink-soft:#FCE4F1;
  --yellow:#FFC93C;
  --yellow-soft:#FFF6DD;
  --red:#E8332B;
  --red-soft:#FDE6E4;
  --purple:#7A3FA6;
  --green:#22B573;
  --green-soft:#E4F8EE;
}
html,body{ height:100%; }
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family:'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  background:
    radial-gradient(circle at 15% 10%, #d4f4f0 0%, transparent 45%),
    radial-gradient(circle at 85% 90%, #fbe3f0 0%, transparent 40%),
    linear-gradient(180deg, #F4FBFA 0%, #EAF7F6 100%);
  -webkit-font-smoothing:antialiased;
}
.font-mono{ font-family:'DM Mono', ui-monospace, monospace; }
.phone-screen{ width:100%; min-height:100vh; height:100vh; background: linear-gradient(180deg, var(--bg-teal-1) 0%, var(--bg-teal-2) 100%); border-radius:0; overflow:hidden; position:relative; display:flex; flex-direction:column; }

#app{ display:flex; flex-direction:column; flex:1; min-height:0; }

#screenContent{ flex:1; min-height:0; overflow-y:auto; }

.app-bottom{ position:sticky; bottom:0; z-index:10; }
.card{ background:var(--surface); border-radius:22px; box-shadow: 0 10px 25px -12px rgba(11,74,84,0.18); border:1px solid var(--line); }
.scroll-hide::-webkit-scrollbar{ display:none; }
.scroll-hide{ -ms-overflow-style:none; scrollbar-width:none; }
.nav-pill{ transition: transform .35s cubic-bezier(.5,1.4,.4,1); }
.nav-btn svg{ transition: all .25s ease; }
.nav-btn.active svg{ stroke:var(--primary-dark); }
.nav-btn.active .nav-label{ color:var(--primary-dark); font-weight:700; }
.nav-label{ transition: all .2s ease; }
.screen-panel{ display:none; animation: fadeUp .35s ease; }
.screen-panel.active{ display:block; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
.pulse-dot{ position:relative; }
.pulse-dot::after{ content:''; position:absolute; inset:-4px; border-radius:999px; background:inherit; opacity:.45; animation: pulseRing 1.6s ease-out infinite; }
@keyframes pulseRing{ 0%{ transform:scale(0.6); opacity:.5;} 100%{ transform:scale(2.2); opacity:0;} }
.chk{ appearance:none; width:22px; height:22px; border-radius:7px; border:2px solid var(--ink-faint); background:#fff; cursor:pointer; flex-shrink:0; position:relative; transition: all .2s; }
.chk:checked{ background:var(--primary); border-color:var(--primary); }
.chk:checked::after{ content:''; position:absolute; left:6px; top:2px; width:6px; height:11px; border-right:2.5px solid white; border-bottom:2.5px solid white; transform:rotate(45deg); }
.rec-ring{ transition: all .3s ease; }
.rec-ring.recording{ background: var(--red) !important; box-shadow:0 0 0 10px var(--red-soft); }
.rec-ring.recording .rec-square{ border-radius:6px !important; width:20px !important; height:20px !important; }
.wave-bars span{ display:inline-block; width:3px; margin-right:2px; background:var(--primary); border-radius:2px; height:6px; }
.wave-bars.playing span{ animation: waveAnim .8s ease-in-out infinite; }
.wave-bars span:nth-child(1){ animation-delay:0s; }
.wave-bars span:nth-child(2){ animation-delay:.1s; }
.wave-bars span:nth-child(3){ animation-delay:.2s; }
.wave-bars span:nth-child(4){ animation-delay:.3s; }
.wave-bars span:nth-child(5){ animation-delay:.15s; }
@keyframes waveAnim{ 0%,100%{ height:5px; } 50%{ height:18px; } }
.btn-disabled{ opacity:.4; pointer-events:none; }