.phone-demo-section{ padding-top:20px; }
.phone-demo-layout{ display:flex; align-items:center; justify-content:center; gap:64px; margin-top:10px; }
.phone-shell{ display:flex; justify-content:center; }

.phone-use-panel{ width:290px; padding:30px 0; }
.phone-use-kicker{ margin:0 0 14px; color:var(--dusk); font-size:0.7rem; font-weight:700; letter-spacing:0.14em; }
.phone-use-icon{ width:48px; height:48px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; border-radius:14px; background:var(--paper-2); font-size:1.35rem; }
.phone-use-panel h3{ font-size:2rem; line-height:1.1; }
.phone-use-panel > p:not(.phone-use-kicker){ margin:12px 0 22px; color:var(--ink-soft); font-size:0.95rem; line-height:1.6; }
.phone-use-rule{ width:54px; height:2px; margin-bottom:18px; background:var(--amber); }
.phone-use-panel strong{ font-size:0.82rem; }
.phone-use-panel ul{ display:flex; flex-direction:column; gap:8px; margin:12px 0 0; padding:0; list-style:none; color:var(--ink-soft); font-size:0.84rem; }
.phone-use-panel li{ display:flex; align-items:flex-start; gap:9px; }
.phone-use-panel li::before{ content:"✓"; color:var(--safety); font-weight:700; }

.phone-frame{
  width:300px;
  background:#12161C;
  border-radius:38px;
  padding:12px;
  box-shadow:0 30px 60px rgba(27,36,48,0.28), 0 0 0 1px rgba(0,0,0,0.06);
}
.phone-notch{
  width:90px; height:18px;
  background:#12161C;
  border-radius:0 0 14px 14px;
  margin:0 auto -18px;
  position:relative; z-index:2;
}
.phone-screen{
  background:var(--paper);
  border-radius:28px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:600px;
  position:relative;
}
.phone-screen.phone-locked > *:not(.phone-auth-gate){ filter:blur(2px); pointer-events:none; user-select:none; }
.phone-screen:not(.phone-locked) .phone-auth-gate{ display:none; }
.phone-auth-gate{
  position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center;
  padding:22px; background:rgba(246,242,234,0.72); backdrop-filter:blur(4px);
}
.phone-auth-card{
  width:100%; padding:20px 18px 18px; text-align:center; background:var(--white);
  border:1px solid var(--line); border-radius:16px; box-shadow:0 14px 30px rgba(27,36,48,0.12);
}
.phone-auth-doodle{ height:56px; position:relative; margin:0 auto 7px; width:150px; }
.doodle-sun{ position:absolute; top:5px; left:18px; width:22px; height:22px; border:2px solid var(--coral); border-radius:50%; }
.doodle-sun::before, .doodle-sun::after{ content:""; position:absolute; width:6px; height:2px; background:var(--coral); top:8px; left:-8px; box-shadow:30px 0 var(--coral); }
.doodle-sun::after{ transform:rotate(90deg); left:8px; top:-7px; box-shadow:0 30px var(--coral); }
.doodle-route{ position:absolute; left:39px; top:25px; width:75px; height:25px; border-top:2px dashed var(--dusk); border-radius:50%; transform:rotate(-8deg); animation:doodle-drift 2.8s ease-in-out infinite; }
.doodle-pin{ position:absolute; right:12px; bottom:3px; width:15px; height:15px; border:2px solid var(--safety); border-radius:50% 50% 50% 0; transform:rotate(-45deg); }
.doodle-pin::after{ content:""; position:absolute; inset:4px; border:1px solid var(--safety); border-radius:50%; }
.doodle-plane{ position:absolute; right:41px; top:18px; width:19px; height:13px; border-top:2px solid var(--ink); border-right:2px solid var(--ink); transform:rotate(23deg) skew(-12deg); animation:doodle-float 2.8s ease-in-out infinite; }
.doodle-plane::after{ content:""; position:absolute; left:-9px; top:8px; width:13px; border-top:1px solid var(--ink); transform:rotate(-24deg); }
@keyframes doodle-drift{ 0%,100%{ transform:rotate(-8deg) translateX(0); } 50%{ transform:rotate(-4deg) translateX(5px); } }
@keyframes doodle-float{ 0%,100%{ transform:rotate(23deg) translate(0,0); } 50%{ transform:rotate(18deg) translate(4px,-4px); } }
.phone-auth-card strong{ display:block; color:var(--ink); font-family:'Newsreader',serif; font-size:1.2rem; }
.phone-auth-card p{ margin:7px 0 16px; color:var(--ink-soft); font-size:0.75rem; line-height:1.45; }
.phone-auth-link{ display:block; padding:9px 12px; margin-top:7px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--white); font-size:0.76rem; font-weight:700; text-decoration:none; }
.phone-auth-link-primary{ border-color:var(--coral); background:var(--coral); color:#fff !important; }
.app-topbar{
  padding:22px 18px 12px;
  font-family:'Newsreader',serif;
  font-weight:600;
  font-size:1.1rem;
  color:var(--ink);
  border-bottom:1px solid var(--line);
  flex-shrink:0;
}
.app-content{ flex:1; overflow-y:auto; padding:14px 16px; }
.app-panel{ display:none; }
.app-panel.active{ display:block; animation:panel-fade .3s ease; }
@keyframes panel-fade{ from{opacity:0;} to{opacity:1;} }

.app-search input{
  width:100%; padding:10px 14px; border-radius:999px; border:1px solid var(--line);
  background:var(--white); font-family:'Public Sans'; font-size:0.85rem; color:var(--ink-soft); margin-bottom:12px;
}
.disc-card, .chat-list-row{
  display:flex; align-items:center; gap:10px;
  background:var(--white); border:1px solid var(--line); border-radius:12px;
  padding:10px 12px; margin-bottom:8px;
}
.chat-list-row.active-row{ border-color:var(--dusk); }
.disc-avatar{ width:36px; height:36px; border-radius:50%; flex-shrink:0; }
.group-avatar{ display:flex; align-items:center; justify-content:center; font-size:1rem; background:var(--paper-2); }
.disc-info{ flex:1; min-width:0; display:flex; flex-direction:column; }
.disc-info strong{ font-size:0.83rem; font-weight:600; color:var(--ink); }
.disc-info span{ font-size:0.74rem; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.disc-badge{ font-size:0.64rem; font-weight:700; background:var(--safety); color:#EAF6F2; padding:3px 8px; border-radius:999px; flex-shrink:0; }

.post-card{ background:var(--white); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:12px; }
.post-photo{ height:120px; }
.post-meta{ padding:10px 12px; display:flex; flex-direction:column; gap:2px; }
.post-meta strong{ font-size:0.82rem; }
.post-meta span{ font-size:0.78rem; color:var(--ink-soft); }

.ai-messages{ display:flex; flex-direction:column; gap:8px; padding-bottom:10px; min-height:380px; }
.ai-msg{ max-width:85%; padding:9px 13px; border-radius:14px; font-size:0.82rem; line-height:1.45; }
.ai-msg.bot{ background:var(--white); border:1px solid var(--line); align-self:flex-start; border-bottom-left-radius:4px; }
.ai-msg.bot{ display:flex; flex-direction:column; gap:5px; }
.ai-msg.bot .ai-heading{ color:var(--ink); font-family:'Newsreader',serif; font-size:0.94rem; margin-top:3px; }
.ai-msg.bot .ai-heading:first-child{ margin-top:0; }
.ai-msg.bot .ai-heading strong{ font-weight:700; }
.ai-msg.bot .ai-bullet{ padding-left:12px; position:relative; }
.ai-msg.bot .ai-bullet::before{ content:""; width:4px; height:4px; border-radius:50%; background:var(--dusk); position:absolute; left:2px; top:0.55em; }
.ai-msg.bot .ai-line{ color:var(--ink-soft); }
.ai-msg.bot em{ color:var(--dusk); font-style:italic; }
.ai-msg.bot code{ padding:1px 4px; border-radius:4px; background:var(--paper-2); color:var(--ink); font-size:0.78em; }
.ai-msg.user{ background:var(--ink); color:var(--paper); align-self:flex-end; border-bottom-right-radius:4px; }
.ai-msg.error{ background:#FBEAE6; color:#B3402F; border:1px solid #F0CFC7; align-self:flex-start; }
.ai-typing{ display:inline-flex; gap:3px; padding:9px 13px; background:var(--white); border:1px solid var(--line); border-radius:14px; align-self:flex-start; }
.ai-typing span{ width:5px; height:5px; border-radius:50%; background:var(--ink-soft); animation:ai-dot 1s infinite ease-in-out; }
.ai-typing span:nth-child(2){ animation-delay:.15s; } .ai-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes ai-dot{ 0%,80%,100%{ transform:translateY(0); opacity:0.5; } 40%{ transform:translateY(-3px); opacity:1; } }

.app-input-row, .ai-input-row{
  position:sticky; bottom:0;
  display:flex; gap:8px; padding:10px 0 4px; background:var(--paper);
}
.ai-input-row input{
  flex:1; padding:10px 14px; border-radius:999px; border:1px solid var(--line);
  background:var(--white); font-family:'Public Sans'; font-size:0.85rem; color:var(--ink);
}
.ai-input-row button{
  width:38px; height:38px; border-radius:50%; border:none; background:var(--dusk); color:#fff;
  font-size:1rem; cursor:pointer; flex-shrink:0;
}

.profile-head{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.profile-head strong{ display:block; font-size:0.95rem; }
.profile-stats{ display:flex; justify-content:space-between; background:var(--white); border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:14px; }
.profile-stats div{ text-align:center; flex:1; }
.profile-stats strong{ display:block; font-family:'Newsreader',serif; font-size:1.1rem; }
.profile-stats span{ font-size:0.7rem; color:var(--ink-soft); }
.profile-row{ display:flex; justify-content:space-between; align-items:center; font-size:0.83rem; padding:10px 0; border-top:1px solid var(--line); }
.toggle{ width:32px; height:18px; border-radius:999px; background:var(--line); position:relative; display:inline-block; }
.toggle::after{ content:""; width:14px; height:14px; border-radius:50%; background:#fff; position:absolute; top:2px; left:2px; transition:left .2s ease; }
.toggle.on{ background:var(--safety); }
.toggle.on::after{ left:16px; }

.pass-kicker{ color:var(--dusk); font-size:0.58rem; font-weight:700; letter-spacing:0.12em; margin-bottom:7px; }
.pass-intro h3{ margin:0; font-family:'Newsreader',serif; font-size:1.38rem; font-weight:600; color:var(--ink); }
.pass-intro p{ margin:5px 0 14px; color:var(--ink-soft); font-size:0.76rem; line-height:1.45; }
.pass-card{ background:var(--ink); color:var(--paper); border-radius:14px; padding:14px; margin-bottom:10px; }
.pass-price{ font-family:'Newsreader',serif; font-size:2rem; line-height:1; }
.pass-price span{ color:var(--coral); font-size:1.25rem; }
.pass-price small{ color:#C8D0D0; font-family:'Public Sans',sans-serif; font-size:0.68rem; }
.pass-note{ color:#C8D0D0; font-size:0.65rem; margin:7px 0 12px; }
.pass-button{ display:flex; align-items:center; justify-content:space-between; background:var(--coral); color:#fff; border-radius:8px; padding:9px 11px; font-size:0.76rem; font-weight:700; text-decoration:none; }
.pass-button span{ font-size:1rem; }
.pass-balance{ display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-bottom:12px; }
.pass-balance div{ display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); border-radius:10px; padding:9px; }
.pass-icon{ color:var(--coral); font-size:0.9rem; margin-bottom:3px; }
.pass-balance strong{ color:var(--ink); font-size:0.78rem; }
.pass-balance small{ color:var(--ink-soft); font-size:0.62rem; margin-top:2px; }
.pass-feature{ display:flex; gap:8px; padding:9px 0; border-top:1px solid var(--line); }
.pass-feature > span{ color:var(--safety); font-weight:700; font-size:0.75rem; }
.pass-feature div{ display:flex; flex-direction:column; gap:2px; }
.pass-feature strong{ color:var(--ink); font-size:0.72rem; }
.pass-feature small{ color:var(--ink-soft); font-size:0.63rem; line-height:1.35; }

.app-tabbar{
  display:flex; justify-content:space-between; padding:8px 10px 14px;
  border-top:1px solid var(--line); background:var(--paper); flex-shrink:0;
}
.app-tab{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  background:none; border:none; font-family:'Public Sans'; font-size:0.58rem; color:var(--ink-soft);
  cursor:pointer; padding:4px 0;
}
.app-tab span{ font-size:1.05rem; }
.app-tab.active{ color:var(--dusk); font-weight:600; }

@media (max-width:480px){
  .phone-demo-layout{ gap:28px; }
  .phone-frame{ width:260px; }
  .phone-screen{ height:540px; }
}

@media (max-width:760px){
  .phone-demo-layout{ flex-direction:column; gap:26px; align-items:center; }
  .phone-use-panel{ width:min(290px,100%); padding:0; text-align:center; }
  .phone-use-icon{ margin-left:auto; margin-right:auto; }
  .phone-use-rule{ margin-left:auto; margin-right:auto; }
  .phone-use-panel ul{ text-align:left; }
}