/* flik Mobile — Variant A "Depth Call" material system (REBUILD)
   Palette ONLY (COMPARISON.md §6, machine-audited in the variants):
   deep navy #0B1D3A + its tints · gold #D4AF37 + its tints/shades ·
   cream #F7F1DE + its tints · functional red only for call semantics.
   Zero cyan, zero terminal hues. One light source (top-left) everywhere. */
:root{
  --navy:#0B1D3A; --navy2:#0E2447; --navy3:#14305C; --navy4:#1D4076; --navy5:#2A4E85;
  --steel:#54677F; --steel2:#5B7CA6; --faint:#6E82A3; --dim:#8A9BB4; --dim2:#A9BADA;
  --deep:#050D1A; --deep2:#081A33;
  --gold:#D4AF37; --gold2:#A9872A; --goldlt:#E7C968; --goldpale:#F0DDA0;
  --goldsoft:#EBCB7E; --bronze:#8C6D1F; --bronze2:#C9973F; --bronze3:#C0802E;
  --cream:#F7F1DE; --cream2:#EDE4CC; --cream3:#FAF6EA; --creamdim:#E7DFC8; --creamline:#DCD2B2;
  --red:#D92C2C; --redsoft:#E05252; --redpale:#FF9C9C;
  --glass:rgba(255,255,255,.09); --glass2:rgba(255,255,255,.14);
  --stroke:rgba(255,255,255,.16);
  --tab-h:68px; --radius:18px;
  font-size:16px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;color:var(--cream);
  font-family:"Avenir Next","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  display:flex;justify-content:center;
  background:
   radial-gradient(520px 340px at 88% -60px, rgba(212,175,55,.20), transparent 62%),
   radial-gradient(700px 600px at 50% 115%, #14305C 0%, transparent 65%),
   linear-gradient(178deg,#0B1D3A 0%, #081A33 46%, #050D1A 100%);
  background-color:var(--deep);
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea{font:inherit;color:inherit}
a{color:var(--goldlt)}
::-webkit-scrollbar{width:0;height:0}
.hidden{display:none!important}
.grow{flex:1;min-width:0}

/* ---------- phone frame ---------- */
.phone{position:relative;width:100%;max-width:430px;height:100dvh;display:flex;flex-direction:column;overflow:hidden;
  background:
   radial-gradient(520px 340px at 88% -60px, rgba(212,175,55,.26), transparent 62%),
   radial-gradient(460px 380px at -90px 30%, rgba(212,175,55,.20), transparent 60%),
   radial-gradient(700px 600px at 50% 115%, #14305C 0%, transparent 65%),
   linear-gradient(178deg,#0B1D3A 0%, #081A33 46%, #050D1A 100%);}
@media(min-width:480px){
  .phone{height:min(920px,96dvh);margin:auto 0;border:1px solid var(--navy5);border-radius:36px;
    box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 8px #050D1A}
}

/* ---------- header / ownership card ---------- */
.app-header{padding:14px 16px 10px;z-index:5}
.brand-row{display:flex;align-items:center;gap:10px}
.logo-badge{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-weight:900;font-size:20px;color:var(--navy);flex:0 0 auto;
  background:linear-gradient(150deg,#F0DDA0,#D4AF37 55%,#A9872A);
  box-shadow:0 8px 18px rgba(212,175,55,.35), inset 0 1px 0 rgba(255,255,255,.75), inset 0 -2px 4px rgba(120,72,0,.35)}
.brand{font-size:21px;font-weight:800}.brand .dot{color:var(--gold)}
.header-actions{margin-left:auto;display:flex;gap:6px}
.icon-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:17px;color:var(--cream);
  background:var(--glass);border:1px solid var(--stroke);backdrop-filter:blur(8px)}
.icon-btn:active{transform:scale(.94)}
.profile-switch{display:flex;align-items:center;gap:6px}
.pfp-stack{display:flex;align-items:center}
.pfp{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:900;color:var(--navy);flex:0 0 auto;
  border:2px solid rgba(255,255,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 6px rgba(0,0,0,.35);margin-left:-7px}
.pfp:first-child{margin-left:0}
.pfp.on{outline:2px solid var(--gold);outline-offset:1px}
.pfp-name{font-size:12px;font-weight:700;color:var(--dim2)}
.owner-card{margin-top:12px;width:100%;text-align:left;display:flex;gap:12px;padding:14px 16px;position:relative;overflow:hidden;border-radius:22px;color:var(--cream);
  background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.05));border:1px solid var(--stroke);backdrop-filter:blur(14px);
  box-shadow:0 18px 34px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.25);min-height:44px}
.owner-card:before{content:"";position:absolute;inset:0;background:radial-gradient(300px 130px at 92% -30px, rgba(212,175,55,.35), transparent 65%);pointer-events:none}
.owner-main{flex:1;min-width:0;display:flex;flex-direction:column}
.owner-lbl{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold);font-weight:800}
.owner-num{font-size:21px;font-weight:800;margin-top:3px;letter-spacing:.4px}
.owner-sub{font-size:12px;color:var(--dim2);margin-top:3px}
.owner-keep{text-align:right;font-size:11px;color:var(--dim2);line-height:1.55;flex:0 0 auto}
.owner-keep b{color:var(--cream);font-size:12px}
.owner-how{color:var(--goldlt);font-weight:700}
.preview-banner{margin-top:10px;display:flex;gap:8px;align-items:center;background:rgba(212,175,55,.13);border:1px solid rgba(212,175,55,.35);
  border-radius:14px;padding:9px 12px;font-size:12px;line-height:1.45;color:var(--goldpale);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}

/* ---------- views ---------- */
.views{flex:1;position:relative;overflow:hidden}
.view{position:absolute;inset:0;overflow-y:auto;padding:12px 12px calc(var(--tab-h) + 18px);display:none}
.view.active{display:block;animation:fade .18s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.view-title{font-size:26px;font-weight:850;margin:4px 4px 2px}
.view-sub{color:var(--dim2);font-size:13px;margin:0 4px 12px}
.view h2.section{font-size:13px;color:var(--gold);text-transform:uppercase;letter-spacing:1.1px;margin:18px 4px 8px}
.searchbar{display:flex;align-items:center;gap:8px;background:rgba(4,10,22,.45);border:1px solid var(--stroke);
  border-radius:999px;padding:10px 14px;margin:2px 2px 12px;color:var(--faint);box-shadow:inset 0 2px 6px rgba(0,0,0,.45);min-height:44px}
.searchbar input{flex:1;background:none;border:0;outline:0;color:var(--cream);font-size:15px}
.searchbar input::placeholder{color:var(--faint)}
.empty{color:var(--dim);text-align:center;padding:34px 20px;font-size:14px;line-height:1.55}
.fineprint{font-size:12.5px;color:var(--dim);line-height:1.5;margin:8px 4px}
.inline-link{color:var(--goldlt);font-weight:700;text-decoration:underline;padding:0;font-size:inherit}
.footer-links{text-align:center;font-size:13px;color:var(--dim);padding:6px 0 10px}
.footer-links a{color:var(--goldlt)}

/* ---------- in-app boot states (shared branded loading language) ---------- */
.boot-inline{display:flex;flex-direction:column;gap:9px;padding:10px 2px}
.boot-inline-head{display:flex;align-items:center;gap:10px;color:var(--dim2);font-size:13.5px;font-weight:600;padding:2px 4px 4px}
.boot-mark-sm{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-weight:900;font-size:17px;color:var(--navy);flex:0 0 auto;
  background:linear-gradient(150deg,#F0DDA0,#D4AF37 55%,#A9872A);box-shadow:0 6px 14px rgba(212,175,55,.35);animation:bootPulse 1.6s ease-in-out infinite}
.skel-card{border-radius:20px;height:74px;
  background:linear-gradient(100deg,rgba(255,255,255,.05) 40%,rgba(255,255,255,.13) 50%,rgba(255,255,255,.05) 60%);
  background-size:200% 100%;animation:skelShimmer 1.3s linear infinite;border:1px solid rgba(255,255,255,.08)}
.load-fail{background:rgba(255,255,255,.07);border:1px solid rgba(212,175,55,.4);border-radius:16px;padding:16px;font-size:14px;line-height:1.55;text-align:center}
.load-fail p{margin:0 0 12px}

/* ---------- conversation list (Variant A glass rows) ---------- */
.chat-row{display:flex;gap:12px;align-items:center;padding:12px 13px;border-radius:20px;width:100%;text-align:left;margin-bottom:9px;min-height:68px;
  background-color:#14305C;background-image:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.11);
  box-shadow:0 10px 22px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.16);backdrop-filter:blur(10px)}
.chat-row:active{transform:scale(.99)}
.avatar{width:52px;height:52px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-weight:800;font-size:17px;color:var(--cream);position:relative;
  background:linear-gradient(145deg,#2A4E85,#14305C);
  box-shadow:0 8px 16px rgba(0,0,0,.4), inset 0 2px 3px rgba(255,255,255,.45), inset 0 -4px 8px rgba(0,0,0,.28), 0 0 0 2px rgba(255,255,255,.14)}
.avatar:after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 32% 26%, rgba(255,255,255,.5), transparent 46%)}
.avatar.av-gold{background:linear-gradient(145deg,#F0DDA0,#A9872A);color:var(--navy)}
.avatar.av-bronze{background:linear-gradient(145deg,#C9973F,#8C6D1F)}
.avatar.av-deep{background:linear-gradient(145deg,#1D4076,#0B1D3A)}
.avatar.av-pale{background:linear-gradient(145deg,#EBCB7E,#C9973F);color:var(--navy)}
.chat-main{flex:1;min-width:0}
.chat-top{display:flex;align-items:baseline;gap:8px}
.chat-name{font-weight:750;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-time{margin-left:auto;font-size:11.5px;color:var(--faint);flex:0 0 auto}
.chat-time.hot{color:var(--gold);font-weight:800}
.chat-snip{display:block;color:var(--dim2);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.chat-snip .tick{color:var(--goldlt);font-weight:800;margin-right:2px}
.chat-snip .missed{color:var(--redpale);font-weight:700}
.sysbadge{font-size:9px;font-weight:900;letter-spacing:1px;color:var(--navy);background:var(--gold);border-radius:5px;padding:2px 5px;vertical-align:2px;white-space:nowrap}
.spamtag{font-size:9.5px;font-weight:900;letter-spacing:.8px;color:var(--redpale);background:rgba(224,82,82,.16);border:1px solid rgba(224,82,82,.4);padding:3px 7px;border-radius:99px;white-space:nowrap}
.unread{min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:linear-gradient(150deg,#F0DDA0,#D4AF37);color:var(--navy);font-size:12px;font-weight:900;display:grid;place-items:center;flex:0 0 auto;
  box-shadow:0 5px 12px rgba(212,175,55,.4), inset 0 1px 0 rgba(255,255,255,.7)}
.swipe-hint{font-size:11px;color:var(--faint);text-align:center;padding:2px 0 8px}

/* ---------- swipe actions on conversation rows ---------- */
.chat-swipe{position:relative;overflow:hidden;border-radius:20px;margin-bottom:9px}
.chat-swipe .chat-row{margin-bottom:0;position:relative;z-index:1;transition:transform .18s ease}
.swipe-actions{position:absolute;top:0;right:0;bottom:0;display:flex;z-index:0}
.swipe-btn{min-width:75px;font-weight:800;font-size:13px;color:var(--cream)}
.swipe-del{background:var(--red)}
.swipe-block{background:var(--navy5)}

/* ---------- layers (thread / claim / verify) ---------- */
.layer{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;
  background:radial-gradient(520px 340px at 88% -60px, rgba(212,175,55,.20), transparent 62%),linear-gradient(178deg,#0B1D3A 0%, #081A33 46%, #050D1A 100%)}
.thread-head{display:flex;align-items:center;gap:11px;padding:10px 14px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border-bottom:1px solid rgba(255,255,255,.09);backdrop-filter:blur(12px)}
.thread-head .avatar{width:42px;height:42px;font-size:14px}
.thread-title{flex:1;min-width:0}
.tname{font-weight:800;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tsub{font-size:12px;color:var(--goldlt)}
.back-btn{color:var(--goldlt);font-size:28px;line-height:1;padding:6px 8px;min-width:44px;min-height:44px}
.head-act{margin-left:2px;width:44px;height:44px;border-radius:50%;border:1px solid var(--stroke);background:var(--glass2);display:grid;place-items:center;font-size:16px;flex:0 0 auto;
  box-shadow:0 6px 14px rgba(0,0,0,.3)}
#thread-scroll{flex:1;overflow-y:auto;padding:14px 14px 8px;display:flex;flex-direction:column;
  background:radial-gradient(420px 300px at 85% 0%, rgba(212,175,55,.12), transparent 60%),radial-gradient(380px 300px at 0% 100%, rgba(212,175,55,.10), transparent 60%)}
.day-divider{align-self:center;font-size:11px;color:var(--dim2);background:rgba(4,10,22,.5);border:1px solid rgba(255,255,255,.1);padding:4px 11px;border-radius:999px;margin:2px 0 12px}
.msg-row{display:flex;margin:2px 0;align-items:flex-end}
.msg-row.me{justify-content:flex-end}
.bubble{max-width:76%;padding:11px 14px;border-radius:21px;font-size:14.5px;line-height:1.45;word-wrap:break-word}
.msg-row.them .bubble{background:linear-gradient(160deg,rgba(255,255,255,.15),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.13);border-bottom-left-radius:7px;
  box-shadow:0 8px 18px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.2);backdrop-filter:blur(8px)}
.msg-row.me .bubble{background:linear-gradient(150deg,#E7C968,#D4AF37 55%,#A9872A);border-bottom-right-radius:7px;color:var(--navy);
  box-shadow:0 10px 20px rgba(212,175,55,.35), inset 0 1px 0 rgba(255,255,255,.35)}
.msg-meta{font-size:10.5px;color:var(--faint);margin:1px 4px 10px}
.msg-meta.me{text-align:right}
.msg-meta .st-read{color:var(--goldlt);font-weight:800}
.evt{align-self:center;display:flex;gap:7px;align-items:center;font-size:12px;color:var(--dim2);background:rgba(4,10,22,.55);border:1px solid rgba(255,255,255,.11);padding:7px 13px;border-radius:999px;margin:6px 0 12px;box-shadow:0 6px 14px rgba(0,0,0,.3)}
.evt b{color:var(--cream)}
.evt .missed{color:var(--redpale);font-weight:700}
.vm-inline{align-self:flex-start;width:86%;border-radius:20px;padding:12px 13px;margin-bottom:12px;
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.14);
  box-shadow:0 12px 24px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.2);backdrop-filter:blur(10px)}
.vm-inline .vh{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:800;letter-spacing:.5px;color:var(--gold)}
.play-btn{width:38px;height:38px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;color:var(--navy);font-size:14px;
  background:linear-gradient(150deg,#F0DDA0,#D4AF37);box-shadow:0 7px 15px rgba(212,175,55,.4), inset 0 1px 0 rgba(255,255,255,.8)}
.wave{display:flex;align-items:center;gap:2.5px;height:30px;margin:10px 0 8px}
.wave i{flex:1;border-radius:3px;background:linear-gradient(180deg,#F7F1DE,#C9BC96);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.wave i.done{background:linear-gradient(180deg,#F0DDA0,#D4AF37)}
.transcript{font-size:13.5px;line-height:1.55;color:var(--cream2)}
.typing{display:inline-flex;gap:4px;padding:12px 14px;background:rgba(255,255,255,.1);border-radius:20px;border-bottom-left-radius:6px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--dim2);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.composer{display:flex;gap:9px;align-items:flex-end;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(5,10,22,.78);border-top:1px solid rgba(255,255,255,.09);backdrop-filter:blur(14px)}
.composer .field{flex:1;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);border-radius:22px;display:flex;align-items:center;padding:0 6px 0 14px;box-shadow:inset 0 2px 6px rgba(0,0,0,.4)}
.composer textarea{flex:1;background:none;border:0;outline:0;resize:none;max-height:110px;padding:11px 0;font-size:15px;color:var(--cream)}
.composer textarea::placeholder{color:var(--faint)}
.send-btn{width:44px;height:44px;border-radius:50%;background:linear-gradient(150deg,#E7C968,#D4AF37 55%,#A9872A);color:var(--navy);font-size:16px;display:grid;place-items:center;flex:0 0 auto;
  box-shadow:0 9px 18px rgba(212,175,55,.4), inset 0 1px 0 rgba(255,255,255,.4)}
.send-btn:active{transform:scale(.93)}
.send-btn:disabled{opacity:.4;box-shadow:none}

/* ---------- calls / recents ---------- */
.call-row{display:flex;gap:12px;align-items:center;padding:12px 13px;border-radius:20px;width:100%;text-align:left;margin-bottom:9px;min-height:64px;
  background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.11);
  box-shadow:0 10px 22px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.16)}
.call-ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.07);border:1px solid var(--stroke);font-size:15px;flex:0 0 auto}
.call-row .who{font-weight:700;font-size:15px}
.call-row .who.missed{color:var(--redpale)}
.call-row .meta{font-size:12.5px;color:var(--dim2);margin-top:1px}
.call-row .when{margin-left:auto;font-size:12px;color:var(--faint);text-align:right;flex:0 0 auto}
.call-row .cb{color:var(--goldlt);font-size:17px;padding:10px;min-width:44px;min-height:44px}

/* ---------- voicemail ---------- */
.vm-card{margin:0 2px 11px;padding:14px 15px;border-radius:22px;
  background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.12);
  box-shadow:0 14px 28px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.18);backdrop-filter:blur(10px)}
.vm-top{display:flex;gap:11px;align-items:center}
.vm-top .avatar{width:44px;height:44px;font-size:14px}
.new-dot{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(212,175,55,.18);flex:0 0 auto}
.vm-name{font-weight:800;font-size:15.5px}
.vm-meta{font-size:12px;color:var(--dim2);margin-top:1px}
.vm-card .transcript{margin-top:10px;color:var(--cream2);font-size:14px}
.vm-label{font-size:10.5px;font-weight:900;letter-spacing:1px;color:var(--gold);margin-top:10px}
.playhead{height:6px;border-radius:99px;background:rgba(255,255,255,.13);margin-top:8px;overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.playhead i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#F0DDA0,#D4AF37);box-shadow:0 0 8px rgba(212,175,55,.6);transition:width .2s linear}
.vm-actions{display:flex;gap:8px;margin-top:12px;align-items:center;flex-wrap:wrap}
.vm-time{margin-left:auto;font-size:11.5px;color:var(--faint)}
.chip-btn{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:var(--cream);border-radius:999px;padding:9px 14px;font-size:13px;font-weight:750;min-height:44px}
.chip-btn.primary{background:linear-gradient(150deg,#F0DDA0,#D4AF37);color:var(--navy);border-color:transparent;box-shadow:0 7px 15px rgba(212,175,55,.35)}
.chip-btn.big{padding:12px 18px;font-size:14.5px;width:100%;margin-top:10px}
.chip-btn.block{display:block;text-align:center;text-decoration:none}
.danger-btn{border-color:rgba(224,82,82,.5);color:var(--redpale)}

/* ---------- dialer ---------- */
#view-keypad.active{display:flex;flex-direction:column}
.dial-display{min-height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.dial-number{font-size:34px;font-weight:700;letter-spacing:1.5px;min-height:42px;text-align:center;word-break:break-all}
.dial-sub{font-size:13px;color:var(--goldlt);font-weight:700;min-height:18px}
.add-contact-link{color:var(--goldlt);font-size:13px;font-weight:700;min-height:18px}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 18px;max-width:320px;margin:8px auto;width:100%}
.key{height:68px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--cream);
  background:linear-gradient(165deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 20px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.25);transition:transform .05s}
.key:active{transform:scale(.93);background:linear-gradient(165deg,#F0DDA0,#D4AF37);color:var(--navy)}
.key .d{font-size:26px;font-weight:600;line-height:1}
.key .l{font-size:9px;letter-spacing:2.5px;color:var(--faint);margin-top:3px;text-transform:uppercase}
.key:active .l{color:var(--navy)}
.dial-actions{display:flex;align-items:center;justify-content:center;gap:26px;margin-top:14px}
.call-big{width:66px;height:66px;border-radius:50%;background:linear-gradient(150deg,#F0DDA0,#D4AF37 55%,#A9872A);color:var(--navy);font-size:26px;display:grid;place-items:center;
  box-shadow:0 10px 24px rgba(212,175,55,.4), inset 0 1px 0 rgba(255,255,255,.5)}
.call-big:active{transform:scale(.94)}
.del-key{font-size:20px;color:var(--dim2);padding:12px;visibility:hidden;min-width:48px;min-height:48px}
.del-key.show{visibility:visible}
.dial-note{font-size:12px;color:var(--dim);text-align:center;margin:14px 8px 0;line-height:1.5}

/* ---------- in-call (Variant A flagship) ---------- */
.incall{position:absolute;inset:0;z-index:40;display:none;overflow:hidden}
.incall.show{display:block;animation:fade .2s ease}
.callbg{position:absolute;inset:-40px;filter:blur(26px) saturate(1.25);transform:scale(1.15);
  background:
   radial-gradient(300px 300px at 68% 30%, rgba(240,221,160,.85), transparent 62%),
   radial-gradient(420px 420px at 30% 22%, rgba(201,151,63,.75), transparent 65%),
   radial-gradient(500px 500px at 55% 75%, rgba(20,48,92,.85), transparent 66%),
   radial-gradient(340px 340px at 12% 88%, rgba(212,175,55,.5), transparent 60%),
   linear-gradient(160deg,#2A4E85,#14305C 45%,#0B1D3A)}
.callshade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,10,22,.42),rgba(5,10,22,.08) 32%,rgba(5,10,22,.16) 58%,rgba(4,8,18,.78))}
.callcontent{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;padding:52px 24px 28px;text-align:center}
.simtag{font-size:10.5px;font-weight:900;letter-spacing:1.4px;color:var(--goldpale);background:rgba(10,20,40,.5);border:1px solid rgba(212,175,55,.5);padding:6px 11px;border-radius:999px;backdrop-filter:blur(8px)}
.bigav-wrap{position:relative;margin-top:28px}
.ringpulse{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(240,221,160,.35)}
.bigav{width:158px;height:158px;border-radius:50%;display:grid;place-items:center;font-size:56px;font-weight:800;color:var(--cream);position:relative;
  background:linear-gradient(150deg,#EBCB7E,#C0802E 60%,#7A5410);
  box-shadow:0 34px 60px rgba(0,0,0,.55), 0 0 0 10px rgba(255,255,255,.13), 0 0 0 26px rgba(255,255,255,.05), inset 0 3px 6px rgba(255,255,255,.55), inset 0 -14px 26px rgba(80,30,0,.45)}
.bigav:after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 32% 24%, rgba(255,255,255,.55), transparent 48%)}
.pip{position:absolute;top:104px;right:18px;width:96px;height:134px;border-radius:20px;overflow:hidden;
  background:linear-gradient(160deg,#2A4E85,#14305C 55%,#0B1D3A);
  border:1.5px solid rgba(255,255,255,.55);
  box-shadow:0 24px 44px rgba(0,0,0,.6), 0 4px 10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.6)}
.pip:before{content:"";position:absolute;left:50%;top:26px;transform:translateX(-50%);width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F2D8B4,#C9973F);box-shadow:0 6px 12px rgba(0,0,0,.3)}
.pip:after{content:"";position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);width:74px;height:52px;border-radius:50% 50% 0 0;background:linear-gradient(180deg,#F0DDA0,#A9872A)}
.pip .pl{position:absolute;left:7px;bottom:7px;z-index:2;font-size:10px;font-weight:800;color:var(--cream);background:rgba(5,10,22,.55);padding:3px 7px;border-radius:99px}
.callname{font-size:31px;font-weight:850;margin-top:24px;text-shadow:0 4px 18px rgba(0,0,0,.5)}
.callnum{color:var(--cream);font-size:15px;margin-top:4px;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.calltime{margin-top:10px;font-size:15px;font-weight:800;color:var(--goldlt);letter-spacing:1px;text-shadow:0 2px 10px rgba(0,0,0,.55);min-height:22px}
.calltime small{display:block;font-size:11px;color:var(--cream2);font-weight:600;letter-spacing:.4px;margin-top:3px}
.cluster{margin-top:auto;width:100%;border-radius:30px;padding:18px 16px 14px;
  background:linear-gradient(165deg,rgba(16,30,58,.62),rgba(8,16,34,.72));border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(22px);box-shadow:0 28px 54px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.28)}
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px 10px}
.ctl{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:var(--cream2);font-weight:650}
.cbtn{width:58px;height:58px;border-radius:50%;border:1px solid rgba(255,255,255,.25);color:var(--cream);font-size:20px;display:grid;place-items:center;
  background:linear-gradient(165deg,rgba(255,255,255,.22),rgba(255,255,255,.06));box-shadow:0 10px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.4)}
.cbtn.on{background:linear-gradient(160deg,#F7F1DE,#F0DDA0);color:var(--navy)}
.in-call-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 14px;max-width:280px;margin:14px auto 2px}
.in-call-pad .key{height:52px;border-radius:20px}
/* Keypad open: the hero compacts so the end-call button NEVER leaves the
   screen (found in QA screenshots — cluster overflow pushed it off). */
.incall.pad-open .bigav{width:84px;height:84px;font-size:30px}
.incall.pad-open .bigav-wrap{margin-top:10px}
.incall.pad-open .callname{font-size:22px;margin-top:10px}
.incall.pad-open .pip{display:none}
.incall.pad-open .cluster{padding:14px 14px 10px}
.incall.pad-open .cgrid{gap:10px 8px}
.incall.pad-open .cbtn{width:48px;height:48px;font-size:17px}
.incall.pad-open .in-call-pad .key{height:44px}
.incall.pad-open .endcall{width:60px;height:60px}
.incall.pad-open .endrow{margin-top:10px}
.in-call-pad .key .d{font-size:20px}
.endrow{display:flex;justify-content:center;margin-top:16px}
.endcall{width:68px;height:68px;border-radius:50%;border:0;color:var(--cream);font-size:25px;transform:rotate(135deg);display:grid;place-items:center;
  background:linear-gradient(150deg,#E05252,#D92C2C);box-shadow:0 16px 32px rgba(217,44,44,.5), inset 0 2px 3px rgba(255,255,255,.5), inset 0 -6px 12px rgba(90,0,0,.4)}
.endcall:active{transform:rotate(135deg) scale(.94)}
.incoming-actions{display:flex;gap:56px;align-items:flex-start;justify-content:center;margin-top:16px}
.acceptcall{width:68px;height:68px;border-radius:50%;border:0;color:var(--navy);font-size:25px;display:grid;place-items:center;
  background:linear-gradient(150deg,#F0DDA0,#D4AF37);box-shadow:0 16px 32px rgba(212,175,55,.5);animation:ringpulse 1.4s infinite}
@keyframes ringpulse{0%{box-shadow:0 0 0 0 rgba(212,175,55,.45)}70%{box-shadow:0 0 0 20px rgba(212,175,55,0)}100%{box-shadow:0 0 0 0 rgba(212,175,55,0)}}

/* ---------- settings ---------- */
.settings-head{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.profile-card{display:flex;gap:14px;align-items:center;border-radius:22px;padding:16px;margin:0 2px 10px;
  background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.05));border:1px solid var(--stroke);
  box-shadow:0 18px 34px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.22)}
.profile-card .avatar{width:56px;height:56px;font-size:20px}
.profile-name{font-weight:800;font-size:18px}
.profile-number{color:var(--dim2);font-size:13px;margin-top:1px}
.profile-card .plan{font-size:11.5px;color:var(--gold);font-weight:800;letter-spacing:.4px;margin-top:3px}
.credit-pill{background:rgba(212,175,55,.13);border:1px solid rgba(212,175,55,.35);color:var(--goldpale);border-radius:999px;padding:5px 11px;font-size:11.5px;font-weight:700;text-align:center}
.profile-stack-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 2px 0}
.stack-lbl{font-size:13px;color:var(--dim2);font-weight:700}
.set-group{border-radius:var(--radius);overflow:hidden;margin:0 2px 6px;
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.11);
  box-shadow:0 12px 24px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.14)}
.set-row{display:flex;align-items:center;gap:12px;padding:14px 16px;width:100%;text-align:left;min-height:52px;color:var(--cream);text-decoration:none}
.set-row + .set-row{border-top:1px solid rgba(255,255,255,.08)}
.set-row.col{flex-direction:column;align-items:stretch}
.set-row .t{font-weight:650;font-size:15px}
.set-row .s{font-size:13px;color:var(--dim2);margin-top:1px;line-height:1.45}
.set-row .val{color:var(--goldlt);font-size:14px;font-weight:700;flex:0 0 auto}
.set-row.danger .t{color:var(--redpale)}
.link-row:active{background:rgba(255,255,255,.06)}
.switch{width:52px;height:32px;border-radius:999px;background:var(--navy5);border:1px solid var(--stroke);position:relative;flex:0 0 auto;transition:background .15s;min-width:52px}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--dim2);transition:left .15s,background .15s}
.switch.on{background:var(--gold2);border-color:var(--gold2)}
.switch.on::after{left:23px;background:var(--cream3)}
.field-lbl{display:block;font-size:12.5px;font-weight:800;letter-spacing:.4px;color:var(--gold);margin:12px 0 6px;text-transform:uppercase}
.text-input{width:100%;background:rgba(4,10,22,.5);border:1px solid var(--stroke);border-radius:14px;padding:12px 14px;color:var(--cream);font-size:15px;outline:0;min-height:48px}
.text-input:disabled{opacity:.55}
.text-area{width:100%;background:rgba(4,10,22,.5);border:1px solid var(--stroke);border-radius:14px;padding:12px 14px;color:var(--cream);font-size:14.5px;line-height:1.5;outline:0;resize:vertical;margin-top:8px}
.color-row{display:flex;gap:10px;margin:6px 0 4px}
.color-dot{width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.3)}
.color-dot.on{outline:3px solid var(--cream);outline-offset:2px}

/* ---------- sheets / claim / verify ---------- */
.sheet-scroll{flex:1;overflow-y:auto;padding:16px 16px calc(var(--tab-h) + 24px)}
.sheet-h{font-size:20px;font-weight:850;margin:6px 0 8px}
.sheet-p{font-size:14.5px;line-height:1.6;color:var(--cream2)}
.state-pill{font-size:11px;font-weight:900;letter-spacing:.8px;color:var(--navy);background:var(--gold);border-radius:99px;padding:3px 9px;vertical-align:3px}
.claim-search-row{display:flex;gap:9px;align-items:stretch}
.claim-search-row .chip-btn{margin-top:0;white-space:nowrap}
.num-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px 15px;border-radius:20px;margin-bottom:9px;min-height:64px;color:var(--cream);
  background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.11);
  box-shadow:0 10px 22px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.16)}
.num-row .n{font-size:18px;font-weight:800;letter-spacing:.3px}
.kind-tag{font-size:10px;font-weight:900;letter-spacing:1px;border-radius:6px;padding:3px 7px;color:var(--navy);background:var(--dim2)}
.kind-tag.easy{background:var(--goldlt)}
.kind-tag.premium{background:var(--gold);color:var(--navy)}
.num-price{margin-left:auto;text-align:right;font-size:12.5px;color:var(--goldlt);font-weight:800;flex:0 0 auto}
.num-price small{display:block;color:var(--dim2);font-weight:600}
.sheet-wrap{position:absolute;inset:0;z-index:50;display:flex;align-items:flex-end;background:rgba(5,10,22,.66);backdrop-filter:blur(4px)}
.sheet{width:100%;border-radius:28px 28px 0 0;padding:22px 20px calc(22px + env(safe-area-inset-bottom));
  background:linear-gradient(170deg,#14305C,#0B1D3A 60%,#081A33);border-top:1px solid var(--stroke);
  box-shadow:0 -20px 50px rgba(0,0,0,.5)}
.sheet h2{font-size:20px;font-weight:850;margin:0 0 8px}
.sheet p{font-size:14.5px;line-height:1.6;color:var(--cream2);margin:0 0 8px}
.verify-block{border-radius:18px;padding:14px 15px;margin-bottom:11px;
  background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.12)}
.verify-block h3{margin:0 0 6px;font-size:15.5px}
.verify-block p,.verify-block li{font-size:14px;line-height:1.6;color:var(--cream2)}
.verify-block ul{margin:6px 0;padding-left:20px}

/* ---------- plans & billing (subscription commerce) ---------- */
.billing-balance{border-radius:22px;padding:16px;margin:2px 2px 6px;
  background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.05));border:1px solid var(--stroke);
  box-shadow:0 18px 34px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.22)}
.billing-planrow{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.billing-planname{font-size:19px;font-weight:850;letter-spacing:.4px}
.meter-row{display:flex;align-items:center;gap:10px;margin:7px 0;font-size:13px;color:var(--dim2)}
.meter-row b{color:var(--cream);font-size:13.5px;flex:0 0 auto}
.meter{flex:1;height:7px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.meter i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#F0DDA0,#D4AF37)}
.billing-cycle-toggle{display:flex;gap:8px;margin:2px 2px 12px;flex-wrap:wrap}
.plan-card{position:relative;border-radius:22px;padding:16px;margin:0 2px 12px;
  background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.12);
  box-shadow:0 14px 28px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.18)}
.plan-card.featured{border-color:rgba(212,175,55,.55)}
.plan-card.current{outline:2px solid var(--gold);outline-offset:1px}
.plan-current-tag{position:absolute;top:12px;right:12px;font-size:9.5px;font-weight:900;letter-spacing:1px;color:var(--navy);background:var(--gold);border-radius:6px;padding:3px 7px}
.plan-name{font-size:17px;font-weight:850;letter-spacing:.6px}
.plan-price{font-size:26px;font-weight:850;margin:4px 0 8px}
.plan-price small{display:block;font-size:12.5px;color:var(--dim2);font-weight:650;margin-top:2px}
.plan-list{margin:0 0 8px;padding-left:18px}
.plan-list li{font-size:14px;line-height:1.55;color:var(--cream2);margin:2px 0}
.plan-fair{font-size:12.5px;line-height:1.55;color:var(--goldpale);background:rgba(212,175,55,.10);border:1px solid rgba(212,175,55,.28);border-radius:12px;padding:9px 11px;margin:8px 0}
.billing-admin{border-radius:var(--radius);margin:0 2px 6px;padding:6px 14px;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px dashed rgba(255,255,255,.22)}
.admin-row{padding:9px 0;font-size:14px}
.admin-row + .admin-row{border-top:1px solid rgba(255,255,255,.08)}
.set-row.danger .t{color:var(--redpale)}

/* ---------- tab bar ---------- */
.tabbar{position:absolute;left:0;right:0;bottom:0;height:var(--tab-h);z-index:20;display:flex;padding-bottom:env(safe-area-inset-bottom);
  background:linear-gradient(180deg,rgba(8,18,38,.55),rgba(5,10,22,.94));border-top:1px solid rgba(255,255,255,.1);backdrop-filter:blur(16px)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--faint);font-size:10.5px;font-weight:700;position:relative;min-height:52px}
.tab .ic{font-size:21px;line-height:1}
.tab.on{color:var(--gold)}
.tab .tdot{position:absolute;top:7px;right:calc(50% - 19px);min-width:17px;height:17px;border-radius:99px;background:var(--redsoft);color:var(--cream);font-size:10px;font-weight:900;display:grid;place-items:center;padding:0 4px;box-shadow:0 3px 8px rgba(0,0,0,.4)}

/* ---------- toast ---------- */
.toast{position:absolute;left:50%;bottom:calc(var(--tab-h) + 22px);transform:translate(-50%,20px);z-index:60;
  background:var(--cream3);color:var(--navy);font-weight:700;font-size:14px;padding:11px 18px;border-radius:999px;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:0 12px 30px rgba(0,0,0,.45);max-width:88%;text-align:center;line-height:1.4}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  .boot-mark-sm,.acceptcall{animation:none!important}
  .view.active{animation:none}
}