/* ═══════════════════════════════════════════
   BASE
═══════════════════════════════════════════ */
:root { --bg:#040a12; --phone-w:360px; --phone-h:740px; --cyan:#00e5ff; --cyan2:#00bcd4; }
* { margin:0; padding:0; box-sizing:border-box; }
body {
  min-height:100vh; background:var(--bg); display:flex;
  align-items:center; justify-content:center;
  font-family:'Exo 2',sans-serif; overflow:hidden;
}
body::before {
  content:''; position:fixed; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 50% at 20% 50%, rgba(0,100,150,.15) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 80% 50%, rgba(0,50,120,.12) 0%, transparent 70%);
}
.grid-bg {
  position:fixed; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(0,229,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,.03) 1px, transparent 1px);
  background-size:40px 40px;
}
.desktop-label {
  position:fixed; top:30px; left:50%; transform:translateX(-50%);
  font-family:'Share Tech Mono',monospace; color:rgba(0,229,255,.35);
  font-size:11px; letter-spacing:4px; text-transform:uppercase; white-space:nowrap;
}

/* ═══════════════════════════════════════════
   PHONE SHELL
═══════════════════════════════════════════ */
.phone-wrap {
  position:relative; width:var(--phone-w); height:var(--phone-h);
  animation:floatPhone 6s ease-in-out infinite;
}
@keyframes floatPhone {
  0%,100% { transform:translateY(0) rotateY(-2deg); }
  50%     { transform:translateY(-10px) rotateY(2deg); }
}
.phone-shell {
  position:absolute; inset:0; border-radius:50px;
  background:linear-gradient(135deg,#3a3a3c,#2c2c2e,#1c1c1f);
  border:1.2px solid rgba(200,200,200,.15);
  box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 20px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
}
.phone-shell::before {
  content:''; position:absolute; right:-3px; top:140px; width:3px; height:50px;
  background:linear-gradient(180deg,#2c2c2e,#3a3a3c,#2c2c2e); border-radius:0 3px 3px 0;
}
.phone-shell::after {
  content:''; position:absolute; left:-3px; top:120px; width:3px; height:35px;
  background:linear-gradient(180deg,#2c2c2e,#3a3a3c,#2c2c2e); border-radius:3px 0 0 3px;
  box-shadow:0 50px 0 rgba(0,0,0,.15), 0 100px 0 rgba(0,0,0,.15);
}
.phone-screen {
  position:absolute; top:16px; left:12px; right:12px; bottom:16px;
  border-radius:30px; overflow:hidden; background:#040d14;
  transform:translateZ(0); -webkit-transform:translateZ(0); isolation:isolate;
  clip-path: inset(0 0 0 0 round 30px);
  contain: strict;
}

/* Notch + Status */
.notch {
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:130px; height:32px; background:#1c1c1f; border-radius:0 0 22px 22px;
  z-index:100; display:flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid rgba(255,255,255,.05);
}
.notch-cam {
  width:8px; height:8px; border-radius:50%; background:#000;
  border:0.5px solid rgba(100,100,100,.4); box-shadow:0 0 4px rgba(0,0,0,.5);
}
.notch-speaker { width:50px; height:4px; border-radius:2px; background:#000; }
.status-bar {
  position:absolute; top:0; left:0; right:0; height:36px; z-index:99;
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:0 20px 6px; font-family:'Share Tech Mono',monospace;
  font-size:10px; color:rgba(0,229,255,.7);
}
.status-icons { display:flex; gap:6px; align-items:center; }
.status-icons i { font-size:9px; }
.home-indicator {
  position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  width:120px; height:4px; border-radius:2px; background:rgba(200,200,200,.35);
  cursor:pointer; z-index:200; transition:background .2s;
}
.home-indicator:hover { background:rgba(220,220,220,.55); }

/* ═══════════════════════════════════════════
   VIEWS
═══════════════════════════════════════════ */
.view {
  position:absolute; inset:0;
  transition:all .35s cubic-bezier(.4,0,.2,1);
  opacity:0; pointer-events:none; transform:scale(.95);
  border-radius:30px; overflow:hidden;
}
.view.active { opacity:1; pointer-events:all; transform:scale(1); }
/* Critical: children of inactive views must ALSO block events,
   otherwise absolutely-positioned children (tabs, overlays, etc.)
   intercept clicks on views below them in the stack */
.view:not(.active) * { pointer-events:none !important; }
.app-opening { animation:appOpen .35s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes appOpen {
  from { opacity:0; transform:scale(.88); }
  to   { opacity:1; transform:scale(1); }
}
.app-screen {
  background:#040d14; display:flex; flex-direction:column;
  overflow:hidden; height:100%;
}
.app-topbar {
  display:flex; align-items:center; gap:12px; flex-shrink:0;
  height:88px; padding:36px 16px 0; background:rgba(0,0,0,.4);
  border-bottom:1px solid rgba(0,229,255,.1);
}
.app-screen .app-topbar { flex-shrink:0; }
.app-screen .app-content {
  flex:1; position:relative; overflow:hidden; min-height:0;
}
.back-btn {
  background:none; border:none; color:var(--cyan); cursor:pointer;
  display:flex; align-items:center; gap:6px;
  font-family:'Share Tech Mono',monospace; font-size:11px;
  padding:4px; font-weight:700; letter-spacing:0.5px;
}
.app-title {
  font-size:13px; font-weight:700; color:#fff;
  letter-spacing:1px; flex:1; text-align:center;
}
.app-content { flex:1; overflow:hidden; position:relative; }

/* Toast */
.toast {
  position:absolute; top:44px; left:12px; right:12px;
  background:rgba(0,229,255,.1); border:1px solid rgba(0,229,255,.25);
  border-radius:12px; padding:10px 14px; font-size:11px; color:var(--cyan);
  font-family:'Share Tech Mono',monospace; backdrop-filter:blur(10px); z-index:300;
  transform:translateY(-80px); opacity:0; transition:all .35s cubic-bezier(.4,0,.2,1);
}
.toast.show { transform:translateY(0); opacity:1; }

/* Iframe Overlay */
.iframe-overlay {
  position:absolute; inset:0; overflow:hidden;
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:12px;
  background:radial-gradient(ellipse at 50% 40%, #001a2e, #040d14);
}

/* ═══════════════════════════════════════════
   HOME SCREEN
═══════════════════════════════════════════ */
#home-screen {
  background:linear-gradient(180deg,#040d14,#050f1a);
  padding:80px 16px 80px; display:flex; flex-direction:column;
  padding-top:0;
}
.home-greeting {
  text-align:center; margin-bottom:10px; font-size:11px;
  letter-spacing:3px; text-transform:uppercase;
  color:rgba(0,229,255,.4); font-family:'Share Tech Mono',monospace;
  font-weight:700; padding-top:80px; margin-top:0;
}
.home-date {
  text-align:center; margin-bottom:20px; font-size:30px;
  font-weight:700; color:rgba(255,255,255,.85);
}
.home-date span { font-size:11px; color:rgba(0,229,255,.5); display:block; letter-spacing:2px; margin-top:2px; }
.app-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; flex:1; }
.app-icon {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  cursor:pointer; transition:transform .15s;
}
.app-icon:active { transform:scale(.88); }
.app-icon-img {
  width:52px; height:52px; border-radius:14px;
  display:flex; align-items:center; justify-content:center; font-size:22px;
  position:relative; transition:box-shadow .3s;
}
.app-icon:hover .app-icon-img { box-shadow:0 0 20px var(--gc, rgba(0,229,255,.5)); }
.app-icon-label {
  font-size:9px; color:rgba(255,255,255,.6); text-align:center;
  font-family:'Share Tech Mono',monospace; font-weight:600; letter-spacing:0.5px;
}

/* App icon backgrounds */
.ai-google   { background:linear-gradient(135deg,#1a1a2e,#16213e); --gc:rgba(66,133,244,.6); }
.ai-youtube  { background:linear-gradient(135deg,#1a0a0a,#2a0f0f); --gc:rgba(255,0,0,.5); }
.ai-facebook { background:linear-gradient(135deg,#0a0f1a,#0d1530); --gc:rgba(24,119,242,.5); }
.ai-gcash    { background:linear-gradient(135deg,#003d6b,#005a99); --gc:rgba(0,112,186,.8); border:1px solid rgba(0,168,224,.3); }
.ai-calc     { background:linear-gradient(135deg,#1a0a1a,#2a0f2a); --gc:rgba(180,0,255,.5); }
.ai-clock    { background:linear-gradient(135deg,#1a1a0a,#2a2a0a); --gc:rgba(255,200,0,.5); }
.ai-wiki     { background:linear-gradient(135deg,#0f0f0f,#1a1a1a); --gc:rgba(200,200,200,.4); }
.ai-maps     { background:linear-gradient(135deg,#1a3a1a,#2e7d32); --gc:rgba(76,175,80,.6); }
.ai-kai      {
  background:linear-gradient(135deg,#1a1a1a,#4a4a4a); --gc:rgba(200,200,200,.8);
  border:1px solid rgba(150,150,150,.4);
}
.ai-kai::after {
  content:''; position:absolute; inset:-4px; border-radius:18px;
  border:1px solid rgba(200,200,200,.5);
  animation:kaiPulse 2s ease-in-out infinite;
}
@keyframes kaiPulse {
  0%,100% { opacity:.4; transform:scale(1); }
  50%     { opacity:0; transform:scale(1.15); }
}

/* Dock */
.home-dock {
  position:absolute; bottom:16px; left:16px; right:16px;
  background:rgba(0,229,255,.05); border:1px solid rgba(0,229,255,.12);
  border-radius:22px; padding:12px; display:flex; justify-content:center;
  backdrop-filter:blur(10px);
}
.dock-kai-wrapper {
  display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer;
}
.dock-icon {
  width:48px; height:48px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; cursor:pointer;
}
.dock-kai-label {
  font-family:'Share Tech Mono',monospace; font-size:9px;
  color:rgba(255,255,255,0.6); letter-spacing:1.5px; font-weight:700;
}

/* ═══════════════════════════════════════════
   KAI SCREEN
═══════════════════════════════════════════ */
#kai-screen { background:#000; }
#kai-screen.active { display:flex; flex-direction:column; }
.kai-topbar {
  height:44px; margin-top:36px; display:flex; align-items:center;
  padding:0 14px; flex-shrink:0; z-index:10;
}
.kai-back-btn {
  background:rgba(255,255,255,0.08); border:1px solid rgba(150,150,150,0.3);
  border-radius:20px; color:#f0f0f0; font-size:11px; padding:6px 14px 6px 10px;
  font-weight:800; cursor:pointer; font-family:'Share Tech Mono',monospace;
  letter-spacing:1.2px; display:flex; align-items:center; gap:6px;
  backdrop-filter:blur(8px); transition:all .2s;
}
.kai-back-btn:hover { background:rgba(255,255,255,0.15); border-color:rgba(200,200,200,0.5); }
.kai-spline-wrap { width:100%; flex:1; overflow:hidden; clip-path:inset(0 0 36px 0); }
.kai-spline-wrap spline-viewer { width:100%; height:calc(100% + 36px); display:block; }
.kai-bottom {
  flex-shrink:0; display:flex; flex-direction:column; align-items:center;
  gap:6px; padding:14px 16px 22px;
  background:linear-gradient(to top, #000 60%, transparent);
  margin-top:-60px; position:relative; z-index:5;
}
.kai-name {
  color:#ffffff; text-align:center; font-size:52px; font-weight:900;
  letter-spacing:12px; font-family:'Exo 2',sans-serif; margin-bottom:4px;
  text-shadow:
    0 0 30px rgba(255,255,255,0.9),
    0 0 60px rgba(200,200,255,0.4),
    0 4px 12px rgba(0,0,0,0.8);
  text-transform:uppercase;
}
.kai-subtitle {
  color:rgba(255,255,255,0.65); text-align:center; font-size:13px;
  font-family:'Inter',sans-serif; font-weight:600; line-height:1.6;
  margin-bottom:16px; padding:0 12px; letter-spacing:0.3px;
}
.kai-input-bar {
  width:100%; height:54px; border-radius:28px;
  background:rgba(0,0,0,0.6); backdrop-filter:blur(12px);
  border:1.5px solid rgba(255,255,255,0.2);
  display:flex; align-items:center; gap:8px;
  padding:0 12px; cursor:pointer; transition:all .3s ease;
  box-shadow:0 6px 24px rgba(0,0,0,.4);
}
.kai-input-bar:hover {
  background:rgba(30,30,30,0.7); border-color:rgba(255,255,255,0.4);
  box-shadow:0 8px 32px rgba(255,255,255,.15);
}
.kai-input-bar:active { transform:scale(.97); }
.kai-input-bar.listening {
  background:rgba(20,20,20,0.8);
  animation:barPulse .9s ease-in-out infinite;
  border-color:rgba(255,255,255,.8);
  box-shadow:0 0 28px rgba(200,200,200,.4);
}
@keyframes barPulse {
  0%,100% { box-shadow:0 0 16px rgba(200,200,200,.3); }
  50%     { box-shadow:0 0 40px rgba(255,255,255,.6); }
}
.kai-mic-icon {
  width:48px; height:48px; border-radius:50%; background:#ffffff;
  box-shadow:0 0 20px rgba(255,255,255,.5); color:#000; font-size:22px;
  border:none; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; pointer-events:none; transition:transform .2s;
}
.kai-mic-icon:active { transform:scale(.90); }
.kai-bar-text {
  color:#f0f0f0; font-size:15px; font-weight:700;
  font-family:'Inter',sans-serif; flex:1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; letter-spacing:0.5px;
}

/* ═══════════════════════════════════════════
   GCASH APP
═══════════════════════════════════════════ */
#gcash-screen { background:#f0f4f8; display:flex; flex-direction:column; font-family:'Inter',sans-serif; }
.gcash-subview { display:none; flex-direction:column; flex:1; overflow:hidden; }
.gcash-subview.active { display:flex; }

.gcash-header { flex-shrink:0; background:linear-gradient(135deg,#0070ba,#00a8e0); padding:44px 18px 18px; }
.gcash-header-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.gcash-back {
  background:rgba(255,255,255,.2); border:none; border-radius:20px;
  color:#fff; padding:6px 12px; cursor:pointer; font-size:11px; font-weight:700;
  font-family:'Share Tech Mono',monospace; display:flex; align-items:center; gap:5px;
}
.gcash-logo-text { font-size:18px; font-weight:700; color:#fff; letter-spacing:1px; }
.gcash-notif {
  width:32px; height:32px; background:rgba(255,255,255,.2);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:13px;
}
.gcash-balance-card {
  background:rgba(255,255,255,.15); border-radius:16px;
  padding:14px 16px; backdrop-filter:blur(10px);
}
.gcash-balance-label { font-size:11px; color:rgba(255,255,255,.75); margin-bottom:4px; font-weight:700; }
.gcash-balance-amt { font-size:28px; font-weight:700; color:#fff; }
.gcash-balance-sub { font-size:10px; color:rgba(255,255,255,.6); margin-top:2px; }

.gcash-body { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:12px; }
.gcash-body::-webkit-scrollbar { width:2px; }
.gcash-body::-webkit-scrollbar-thumb { background:rgba(0,112,186,.3); }
.gcash-section-title { font-size:10px; font-weight:700; color:#888; letter-spacing:1.5px; text-transform:uppercase; }

.gcash-actions-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.gcash-action-btn {
  display:flex; flex-direction:column; align-items:center; gap:5px;
  cursor:pointer; border:none; background:none; padding:4px; transition:transform .15s;
}
.gcash-action-btn:active { transform:scale(.9); }
.gcash-action-icon {
  width:50px; height:50px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:19px; box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.gcash-action-label { font-size:9px; font-weight:700; color:#444; text-align:center; line-height:1.2; letter-spacing:0.3px; }
.ga-send    { background:linear-gradient(135deg,#0070ba,#00a8e0); }
.ga-receive { background:linear-gradient(135deg,#00b894,#00cec9); }
.ga-pay     { background:linear-gradient(135deg,#6c5ce7,#a29bfe); }
.ga-load    { background:linear-gradient(135deg,#fd79a8,#e84393); }
.ga-bills   { background:linear-gradient(135deg,#fdcb6e,#e17055); }
.ga-bank    { background:linear-gradient(135deg,#636e72,#2d3436); }
.ga-qr      { background:linear-gradient(135deg,#00b894,#55efc4); }
.ga-more    { background:linear-gradient(135deg,#b2bec3,#636e72); }

.gcash-promo {
  background:linear-gradient(135deg,#0070ba,#00c6fb);
  border-radius:14px; padding:14px; color:#fff; position:relative; overflow:hidden;
}
.gcash-promo::after {
  content:''; position:absolute; right:-20px; top:-20px;
  width:90px; height:90px; border-radius:50%; background:rgba(255,255,255,.08);
}
.gcash-promo h3 { font-size:13px; font-weight:700; margin-bottom:3px; }
.gcash-promo p { font-size:10px; opacity:.85; line-height:1.4; }
.gcash-promo-badge {
  display:inline-block; margin-bottom:6px;
  background:rgba(255,255,255,.25); padding:3px 10px; border-radius:20px;
  font-size:9px; font-weight:600;
}

.gcash-txn-list { display:flex; flex-direction:column; gap:2px; }
.gcash-txn { background:#fff; border-radius:10px; padding:11px; display:flex; align-items:center; gap:10px; }
.gcash-txn-icon { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.gcash-txn-info { flex:1; }
.gcash-txn-name { font-size:11px; font-weight:700; color:#222; }
.gcash-txn-date { font-size:9px; color:#999; margin-top:1px; }
.gcash-txn-amt { font-size:12px; font-weight:700; }
.gcash-txn-amt.debit { color:#e74c3c; }
.gcash-txn-amt.credit { color:#00b894; }

.gcash-flow-header {
  background:linear-gradient(135deg,#0070ba,#00a8e0);
  padding:44px 18px 18px; display:flex; align-items:center; gap:12px; flex-shrink:0;
}
.gcash-flow-back {
  background:rgba(255,255,255,.2); border:none; border-radius:50%;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  color:#fff; cursor:pointer; font-size:14px; flex-shrink:0;
}
.gcash-flow-title { font-size:16px; font-weight:700; color:#fff; }
.gcash-flow-body { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:14px; }
.gcash-flow-body::-webkit-scrollbar { width:2px; }

.gcash-steps { display:flex; align-items:center; }
.gcash-step-dot {
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; flex-shrink:0; transition:all .3s;
}
.gcash-step-dot.done    { background:#0070ba; color:#fff; }
.gcash-step-dot.active  { background:#0070ba; color:#fff; box-shadow:0 0 0 4px rgba(0,112,186,.2); }
.gcash-step-dot.pending { background:#e0e0e0; color:#999; }
.gcash-step-line { flex:1; height:2px; background:#e0e0e0; }
.gcash-step-line.done { background:#0070ba; }

.gcash-form-card { background:#fff; border-radius:14px; padding:16px; box-shadow:0 2px 10px rgba(0,0,0,.06); }
.gcash-form-card h3 { font-size:13px; font-weight:700; color:#222; margin-bottom:12px; letter-spacing:0.3px; }
.gcash-label { font-size:11px; font-weight:700; color:#555; margin-bottom:5px; display:block; text-transform:uppercase; letter-spacing:0.5px; }
.gcash-input {
  width:100%; background:#f8f9fa; border:2px solid #e9ecef;
  border-radius:10px; padding:10px 14px; font-size:14px; color:#222;
  font-family:'Inter',sans-serif; outline:none; transition:border-color .2s;
}
.gcash-input:focus { border-color:#0070ba; }
.gcash-input-note { font-size:10px; color:#999; margin-top:4px; }
.gcash-contact-row { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.gcash-contact-chip {
  background:#e8f4fd; border:1px solid #b3d9f5;
  border-radius:20px; padding:5px 12px; font-size:10px; color:#0070ba;
  font-weight:700; cursor:pointer;
}
.gcash-quick-amts { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.gcash-amt-chip {
  background:#f0f4f8; border:1.5px solid #d0dde8;
  border-radius:20px; padding:5px 14px; font-size:11px; font-weight:700;
  color:#0070ba; cursor:pointer; transition:all .15s;
}
.gcash-amt-chip.selected { background:#0070ba; border-color:#0070ba; color:#fff; }

.gcash-review-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 0; border-bottom:1px solid #f0f0f0;
}
.gcash-review-row:last-child { border-bottom:none; }
.gcash-review-label { font-size:11px; color:#888; font-weight:700; }
.gcash-review-val { font-size:12px; font-weight:700; color:#222; }
.gcash-review-amt { font-size:24px; font-weight:800; color:#0070ba; text-align:center; padding:6px 0; }

.gcash-warning {
  background:#fff8e1; border:1px solid #ffcc00;
  border-radius:10px; padding:10px 12px; display:flex; align-items:flex-start; gap:8px;
}
.gcash-warning i { color:#f39c12; font-size:13px; margin-top:1px; flex-shrink:0; }
.gcash-warning p { font-size:10px; color:#555; line-height:1.5; }

.gcash-btn {
  width:100%; padding:13px; border-radius:13px; border:none;
  background:linear-gradient(135deg,#0070ba,#00a8e0); color:#fff;
  font-size:14px; font-weight:700; cursor:pointer; font-family:'Inter',sans-serif;
  box-shadow:0 4px 16px rgba(0,112,186,.3); transition:opacity .2s;
}
.gcash-btn:disabled { opacity:.45; cursor:not-allowed; }
.gcash-btn-ghost {
  width:100%; padding:11px; border-radius:13px;
  background:transparent; border:2px solid #0070ba; color:#0070ba;
  font-size:13px; font-weight:700; cursor:pointer; font-family:'Inter',sans-serif;
}

.gcash-pin-dots { display:flex; gap:14px; justify-content:center; margin:12px 0; }
.gcash-pin-dot { width:14px; height:14px; border-radius:50%; background:#e0e0e0; transition:background .2s; }
.gcash-pin-dot.filled { background:#0070ba; }
.gcash-pin-pad { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.gcash-pin-btn {
  height:52px; border-radius:13px; background:#fff;
  border:1.5px solid #e9ecef; font-size:18px; font-weight:700; color:#222;
  cursor:pointer; font-family:'Inter',sans-serif;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; transition:all .15s;
}
.gcash-pin-btn:active { background:#e8f4fd; border-color:#0070ba; transform:scale(.95); }
.gcash-pin-btn span { font-size:7px; color:#bbb; font-weight:400; letter-spacing:1px; }
.gcash-pin-btn.del { color:#e74c3c; }

.gcash-success {
  flex:1; background:#fff; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:30px 24px; gap:10px;
}
.gcash-success-ring {
  width:88px; height:88px; border-radius:50%;
  background:linear-gradient(135deg,#0070ba,#00a8e0);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 30px rgba(0,112,186,.3); margin-bottom:4px;
}
.gcash-success-ring i { font-size:36px; color:#fff; }
.gcash-success h2 { font-size:20px; font-weight:800; color:#222; }
.gcash-success-amt { font-size:30px; font-weight:800; color:#0070ba; }
.gcash-success p { font-size:12px; color:#888; text-align:center; line-height:1.5; }
.gcash-success-ref { font-size:10px; color:#bbb; font-family:'Share Tech Mono',monospace; }

/* ═══════════════════════════════════════════
   CALCULATOR
═══════════════════════════════════════════ */
#calc-screen .app-content { display:flex; flex-direction:column; padding:16px; gap:10px; }
.calc-display {
  background:rgba(0,0,0,.5); border:1px solid rgba(0,229,255,.15);
  border-radius:12px; padding:16px; text-align:right;
}
.calc-expression { font-size:11px; color:rgba(0,229,255,.4); min-height:16px; font-family:'Share Tech Mono',monospace; font-weight:600; }
.calc-result { font-size:34px; color:#fff; font-weight:700; font-family:'Share Tech Mono',monospace; letter-spacing:1px; }
.calc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.calc-btn {
  height:52px; border-radius:12px; border:1px solid rgba(0,229,255,.12);
  background:rgba(255,255,255,.04); color:#fff; font-size:16px; font-weight:700;
  cursor:pointer; font-family:'Share Tech Mono',monospace;
  display:flex; align-items:center; justify-content:center;
}
.calc-btn:active { transform:scale(.92); }
.calc-btn.op    { background:rgba(0,229,255,.08); color:var(--cyan); }
.calc-btn.eq    { background:rgba(0,229,255,.2); color:var(--cyan); border-color:rgba(0,229,255,.4); }
.calc-btn.clear { background:rgba(255,80,80,.1); color:#ff5050; border-color:rgba(255,80,80,.2); }

/* ═══════════════════════════════════════════
   CLOCK
═══════════════════════════════════════════ */
#clock-screen .app-content { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; }
.clock-analog {
  width:160px; height:160px; border-radius:50%;
  border:2px solid rgba(0,229,255,.3); position:relative; background:rgba(0,229,255,.03);
}
.clock-hand { position:absolute; bottom:50%; left:50%; transform-origin:bottom center; border-radius:4px; }
.hour-hand { width:3px; height:40px; background:rgba(0,229,255,.9); margin-left:-1.5px; }
.min-hand  { width:2px; height:55px; background:rgba(0,229,255,.7); margin-left:-1px; }
.sec-hand  { width:1px; height:60px; background:#ff4060; margin-left:-.5px; }
.clock-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:8px; height:8px; border-radius:50%; background:var(--cyan); }
.clock-digital { font-family:'Share Tech Mono',monospace; font-size:32px; color:var(--cyan); letter-spacing:4px; font-weight:700; }
.clock-date-text { font-family:'Share Tech Mono',monospace; font-size:12px; color:rgba(0,229,255,.5); letter-spacing:2px; font-weight:700; }
.clock-marks { position:absolute; inset:6px; border-radius:50%; }
.clock-mark {
  position:absolute; width:2px; height:8px; background:rgba(0,229,255,.3);
  left:50%; top:0; transform-origin:bottom center; margin-left:-1px;
}

/* ═══════════════════════════════════════════
   WIKI + EXTERNAL
═══════════════════════════════════════════ */
#wiki-screen .app-content { display:flex; flex-direction:column; padding:14px; gap:10px; overflow-y:auto; }
.wiki-search-bar { display:flex; gap:8px; }
.wiki-input {
  flex:1; background:rgba(0,229,255,.06); border:1px solid rgba(0,229,255,.2);
  border-radius:10px; padding:8px 12px; color:#fff; font-size:12px; font-weight:600;
  font-family:'Share Tech Mono',monospace; outline:none;
}
.wiki-search-btn {
  width:36px; height:36px; background:rgba(0,229,255,.15); border:1px solid rgba(0,229,255,.3);
  border-radius:10px; color:var(--cyan); font-weight:700; cursor:pointer; font-size:13px;
  display:flex; align-items:center; justify-content:center;
}
#wiki-result {
  font-size:11px; color:rgba(255,255,255,.7); line-height:1.6;
  font-family:'Share Tech Mono',monospace; background:rgba(0,229,255,.03);
  border:1px solid rgba(0,229,255,.1); border-radius:10px; padding:12px; display:none;
}
.iframe-logo   { font-size:48px; }
.iframe-app-name { font-size:18px; font-weight:700; color:#fff; letter-spacing:2px; }
.iframe-msg    { font-size:11px; color:rgba(0,229,255,.5); font-family:'Share Tech Mono',monospace; font-weight:600; }
.iframe-open-btn {
  margin-top:8px; padding:10px 24px; background:rgba(0,229,255,.12);
  border:1px solid rgba(0,229,255,.35); border-radius:24px; color:var(--cyan);
  font-size:12px; font-weight:700; font-family:'Share Tech Mono',monospace; cursor:pointer;
}

/* ═══════════════════════════════════════════
   KAI GUIDE OVERLAY
═══════════════════════════════════════════ */
#kai-guide-overlay {
  position: absolute;
  inset: 0;
  z-index: 500;
  display: none;
  pointer-events: none;
  border-radius: 30px;
  overflow: hidden;
}
#kai-guide-overlay.active { display: block; }

#kai-guide-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 30px;
}

#kai-guide-ring { pointer-events: none; }

#kai-guide-ring {
  position:absolute; border:3px solid rgba(255,255,255,0.9); border-radius:14px;
  box-shadow:0 0 0 4px rgba(255,255,255,0.1), 0 0 22px rgba(255,255,255,0.3);
  pointer-events:none; animation:guideRing 1.2s ease-in-out infinite;
  transition:all .3s cubic-bezier(.4,0,.2,1);
}
@keyframes guideRing {
  0%,100% { box-shadow:0 0 0 4px rgba(255,255,255,0.1), 0 0 22px rgba(255,255,255,0.25); }
  50%     { box-shadow:0 0 0 10px rgba(255,255,255,0.04), 0 0 40px rgba(255,255,255,0.45); }
}

.guide-tap-ripple {
  position:absolute; border-radius:50%;
  background:rgba(255,255,255,0.2); pointer-events:none;
  animation:tapRipple .6s ease-out forwards;
}
@keyframes tapRipple { from { transform:scale(0); opacity:1; } to { transform:scale(2.5); opacity:0; } }

/* KAI Guide Bubble — Black/White */
#kai-guide-bubble {
  position:absolute;
  background:linear-gradient(145deg, #111111, #1c1c1c);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:20px;
  padding:16px;
  min-width:210px; max-width:280px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 12px 40px rgba(0,0,0,0.85),
    inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter:blur(20px);
  pointer-events:all;
  transition:all .3s cubic-bezier(.4,0,.2,1);
  z-index:505;
}
#kai-guide-bubble::after {
  content:''; position:absolute; width:12px; height:12px;
  background:#161616; transform:rotate(45deg);
  border-right:1px solid rgba(255,255,255,0.12);
  border-bottom:1px solid rgba(255,255,255,0.12);
}
.bubble-arrow-bottom::after { bottom:-6px; left:28px; }
.bubble-arrow-top::after {
  top:-6px; left:28px;
  border-right:none; border-bottom:none;
  border-left:1px solid rgba(255,255,255,0.12);
  border-top:1px solid rgba(255,255,255,0.12);
}

.guide-bubble-header {
  display:flex; align-items:center; gap:8px;
  margin-bottom:12px; padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.guide-kai-avatar {
  width:30px; height:30px; border-radius:50%;
  background:linear-gradient(135deg, #444, #222);
  border:1px solid rgba(255,255,255,0.2);
  box-shadow:0 0 10px rgba(0,0,0,0.6);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; flex-shrink:0;
}
.guide-kai-label {
  font-size:11px; font-weight:800; color:#ffffff;
  font-family:'Share Tech Mono',monospace; letter-spacing:2.5px;
}
.guide-step-badge {
  margin-left:auto;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:20px; padding:2px 8px;
  font-size:10px; font-weight:700; color:rgba(255,255,255,0.7);
  font-family:'Share Tech Mono',monospace; letter-spacing:1px; white-space:nowrap;
}
.guide-message {
  font-size:12.5px; color:rgba(255,255,255,0.85); line-height:1.65;
  font-family:'Inter',sans-serif; font-weight:500; margin-bottom:14px;
}
.guide-tap-hint {
  font-size:10px; font-weight:700; color:rgba(255,255,255,0.6);
  font-family:'Share Tech Mono',monospace; letter-spacing:1px;
  text-align:center; padding:6px 0;
  animation:tapHint 1.4s ease-in-out infinite;
}
@keyframes tapHint {
  0%,100% { opacity:0.5; transform:translateX(0); }
  50%     { opacity:1;   transform:translateX(4px); }
}
.guide-btn-row { display:flex; gap:10px; margin-top:6px; }
.guide-stop-btn {
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:10px; padding:8px 12px;
  font-size:10px; color:rgba(255,255,255,0.35);
  cursor:pointer; font-family:'Share Tech Mono',monospace;
  letter-spacing:1px; transition:all .2s;
}
.guide-stop-btn:hover { border-color:rgba(255,80,80,0.4); color:rgba(255,80,80,0.6); }
.guide-ok-btn {
  flex:1;
  background:linear-gradient(135deg, #ffffff, #d0d0d0);
  border:none; border-radius:10px; padding:8px 14px;
  font-size:12px; font-weight:800; color:#111;
  cursor:pointer; font-family:'Inter',sans-serif;
  box-shadow:0 4px 14px rgba(0,0,0,0.5); transition:all .2s;
}

/* ═══════════════════════════════════════════
   FACEBOOK APP
═══════════════════════════════════════════ */
#facebook-screen { overflow:hidden; }
.fb-subview { display:none; flex-direction:column; height:100%; overflow:hidden; }
.fb-subview.active { display:flex; }

/* Top Nav */
.fb-topnav {
  flex-shrink:0; background:#fff; padding:44px 14px 8px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid #e4e6eb; box-shadow:0 2px 8px rgba(0,0,0,.07);
}
.fb-logo { font-size:22px; font-weight:900; color:#1877f2; font-family:'Inter',sans-serif; letter-spacing:-1px; }
.fb-topnav-icons { display:flex; gap:8px; }
.fb-nav-icon {
  width:36px; height:36px; border-radius:50%; background:#e4e6eb;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; color:#050505; cursor:pointer; position:relative;
}
.fb-badge {
  position:absolute; top:-2px; right:-2px; background:#f02849;
  color:#fff; font-size:8px; font-weight:700; width:14px; height:14px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
}

/* Bottom Nav */
.fb-botnav {
  position:absolute; bottom:0; left:0; right:0;
  background:#fff; border-top:1px solid #e4e6eb;
  display:flex; align-items:center; justify-content:space-around;
  padding:8px 4px 18px; z-index:10;
}
.fb-btn { font-size:18px; color:#65676b; padding:6px 10px; cursor:pointer; border-radius:8px; transition:background .15s; }
.fb-btn.active { color:#1877f2; border-bottom:3px solid #1877f2; border-radius:0; }
.fb-watch-btn {
  width:36px; height:36px; background:#1877f2; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px;
}
.fb-back-home { font-size:14px; color:#65676b; padding:6px 10px; cursor:pointer; }

/* Feed */
.fb-feed { flex:1; overflow-y:auto; padding-bottom:70px; background:#f0f2f5; }
.fb-feed::-webkit-scrollbar { width:2px; }
.fb-card { background:#fff; margin-bottom:8px; }

/* Create Post */
.fb-create-post { padding:10px 12px 0; }
.fb-create-row { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.fb-avatar    { width:38px; height:38px; border-radius:50%; background:#e4e6eb; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.fb-avatar-sm { width:32px; height:32px; border-radius:50%; background:#e4e6eb; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.fb-create-input {
  flex:1; background:#f0f2f5; border-radius:20px; padding:8px 14px;
  font-size:13px; color:#65676b; cursor:pointer; font-family:'Inter',sans-serif;
}
.fb-create-divider { height:1px; background:#e4e6eb; margin:0 -12px; }
.fb-create-actions { display:flex; justify-content:space-around; padding:4px 0; }
.fb-create-action {
  background:none; border:none; display:flex; align-items:center; gap:5px;
  font-size:11px; font-weight:600; color:#65676b; padding:7px 4px;
  cursor:pointer; font-family:'Inter',sans-serif;
}

/* Stories */
.fb-stories-row { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; }
.fb-stories-row::-webkit-scrollbar { display:none; }
.fb-story { display:flex; flex-direction:column; align-items:center; gap:4px; flex-shrink:0; cursor:pointer; }
.fb-story-img {
  width:52px; height:80px; border-radius:10px; background:#e4e6eb;
  display:flex; align-items:center; justify-content:center; font-size:24px;
  border:3px solid #1877f2; overflow:hidden;
}
.fb-story-add .fb-story-img { border-color:#e4e6eb; background:#f0f2f5; font-size:22px; color:#1877f2; font-weight:900; }
.fb-story-name { font-size:9px; font-weight:600; color:#050505; font-family:'Inter',sans-serif; text-align:center; max-width:56px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

/* Posts */
.fb-post { padding:0; }
.fb-post-header { display:flex; align-items:center; gap:8px; padding:10px 12px 6px; }
.fb-post-meta { flex:1; }
.fb-post-name { font-size:13px; font-weight:700; color:#050505; font-family:'Inter',sans-serif; }
.fb-post-time { font-size:10px; color:#65676b; margin-top:1px; font-family:'Inter',sans-serif; }
.fb-post-more { color:#65676b; font-size:14px; padding:4px; }
.fb-post-text { padding:4px 12px 8px; font-size:13px; color:#050505; line-height:1.5; font-family:'Inter',sans-serif; }
.fb-post-img-placeholder { width:100%; height:180px; display:flex; align-items:center; justify-content:center; }
.fb-post-stats { display:flex; justify-content:space-between; padding:6px 12px; font-size:11px; color:#65676b; font-family:'Inter',sans-serif; }
.fb-post-divider { height:1px; background:#e4e6eb; margin:0 12px; }
.fb-post-actions { display:flex; justify-content:space-around; padding:2px 0; }
.fb-action-btn { background:none; border:none; display:flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:#65676b; padding:8px 4px; cursor:pointer; font-family:'Inter',sans-serif; }

/* Flow Header */
.fb-flow-header {
  flex-shrink:0; background:#fff; padding:44px 14px 12px;
  display:flex; align-items:center; gap:10px; border-bottom:1px solid #e4e6eb;
}
.fb-flow-back {
  width:32px; height:32px; border-radius:50%; background:#e4e6eb;
  border:none; display:flex; align-items:center; justify-content:center;
  font-size:13px; cursor:pointer; flex-shrink:0;
}
.fb-flow-title { flex:1; font-size:16px; font-weight:700; color:#050505; font-family:'Inter',sans-serif; }
.fb-flow-next {
  background:#e7f0ff; border:none; border-radius:6px; padding:6px 14px;
  font-size:13px; font-weight:700; color:#1877f2; cursor:pointer;
  font-family:'Inter',sans-serif; transition:background .2s;
}
.fb-flow-next:disabled { opacity:.45; cursor:not-allowed; }
.fb-post-btn {
  background:#1877f2; border:none; border-radius:6px; padding:6px 14px;
  font-size:13px; font-weight:700; color:#fff; cursor:pointer; font-family:'Inter',sans-serif;
}

/* Gallery */
.fb-gallery {
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  flex:1; overflow-y:auto; background:#f0f2f5;
}
.fb-gallery-item {
  aspect-ratio:1; background:#e4e6eb; display:flex; align-items:center;
  justify-content:center; font-size:36px; cursor:pointer;
  transition:all .15s; border:3px solid transparent;
}
.fb-gallery-item.selected { border-color:#1877f2; opacity:.85; }

/* Caption */
.fb-caption-area { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:12px; background:#fff; }
.fb-caption-user { display:flex; align-items:center; gap:10px; }
.fb-privacy-pill {
  display:inline-flex; align-items:center; gap:4px;
  background:#e4e6eb; border-radius:4px; padding:2px 7px;
  font-size:10px; font-weight:600; color:#050505; margin-top:2px; cursor:pointer;
  font-family:'Inter',sans-serif;
}
.fb-caption-input {
  width:100%; min-height:80px; border:none; outline:none; resize:none;
  font-size:16px; color:#050505; font-family:'Inter',sans-serif;
  background:transparent; line-height:1.5;
}
.fb-caption-input::placeholder { color:#bcc0c4; }
.fb-selected-preview {
  width:100%; height:160px; background:#f0f2f5; border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:60px;
}
.fb-caption-tools { flex-shrink:0; background:#fff; border-top:1px solid #e4e6eb; padding:10px 14px; display:flex; flex-direction:column; gap:6px; }
.fb-caption-tool { display:flex; align-items:center; gap:10px; padding:8px 4px; font-size:13px; font-weight:600; color:#050505; font-family:'Inter',sans-serif; cursor:pointer; border-bottom:1px solid #f0f2f5; }

/* Success */
.fb-success {
  flex:1; background:#fff; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px; padding:30px 24px;
}
.fb-success-icon { font-size:56px; }
.fb-success h2 { font-size:20px; font-weight:800; color:#050505; font-family:'Inter',sans-serif; }
.fb-success p { font-size:13px; color:#65676b; text-align:center; font-family:'Inter',sans-serif; }
.fb-success-preview { width:120px; height:120px; background:#f0f2f5; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:56px; }
.fb-back-feed-btn {
  width:100%; padding:12px; border-radius:8px; border:none;
  background:#1877f2; color:#fff; font-size:14px; font-weight:700;
  cursor:pointer; font-family:'Inter',sans-serif;
}
.fb-back-feed-btn.ghost { background:#e4e6eb; color:#050505; margin-top:4px; }

/* ═══════════════════════════════════════════
   UTILITY / ONE-OFF HELPERS
═══════════════════════════════════════════ */

/* GCash action icon colors */
.gcash-action-icon i { color: #fff; font-size: 17px; }

/* GCash transaction icon tints */
.gcash-txn-icon.tint-blue   { background: #e8f4fd; }
.gcash-txn-icon.tint-green  { background: #e8fdf4; }
.gcash-txn-icon.tint-yellow { background: #fff8e1; }

/* GCash review FREE label */
.gcash-review-free { color: #00b894; font-weight: 700; }

/* GCash optional note label */
.gcash-optional { color: #bbb; font-weight: 400; }

/* GCash PIN entry layout */
.gcash-pin-flow-body { align-items: center; padding-top: 20px; gap: 16px; }
.gcash-pin-header    { text-align: center; }
.gcash-pin-emoji     { font-size: 36px; margin-bottom: 8px; }
.gcash-pin-title     { font-size: 14px; font-weight: 700; color: #222; font-family: 'Inter', sans-serif; }
.gcash-pin-hint      { font-size: 11px; color: #888; margin-top: 4px; font-family: 'Inter', sans-serif; }
.gcash-pin-demo      { font-size: 10px; color: #bbb; font-family: 'Inter', sans-serif; }

/* GCash success flow header centered */
.gcash-flow-header-center { justify-content: center; }

/* Facebook post image placeholder gradients */
.fb-img-sunset { background: linear-gradient(135deg, #f6d365, #fda085); }
.fb-img-purple { background: linear-gradient(135deg, #a18cd1, #fbc2eb); }

/* GCash pin btn disabled */
.gcash-pin-btn-disabled { opacity: .3; }

/* GCash back-to-home btn spacing */
.gcash-success-back-btn { margin-top: 14px; }

/* Topbar spacer */
.topbar-spacer { width: 26px; }

/* App content layout variants */
.app-content-calc  { display:flex; flex-direction:column; padding:16px; gap:10px; }
.app-content-clock { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; }
.app-content-wiki  { display:flex; flex-direction:column; padding:14px; gap:10px; overflow-y:auto; }
.app-content-ext   { overflow:hidden; position:relative; flex:1; }

/* Facebook screen root */
#facebook-screen { background:#f0f2f5; display:flex; flex-direction:column; font-family:'Inter',sans-serif; }

/* FB watch btn position fix */
.fb-watch-wrapper { position:relative; top:-6px; }

/* FB create action icon colors */
.fb-icon-live    { color: #f02849; }
.fb-icon-photo   { color: #45bd62; }
.fb-icon-feeling { color: #f7b928; }

/* FB story image gradients */
.fb-story-purple { background: linear-gradient(135deg,#833ab4,#fd1d1d); }
.fb-story-blue   { background: linear-gradient(135deg,#4facfe,#00f2fe); }
.fb-story-pink   { background: linear-gradient(135deg,#f093fb,#f5576c); }

/* FB card padded */
.fb-card-padded { padding: 12px; }

/* FB post emoji size */
.fb-post-emoji { font-size: 40px; }

/* FB caption username */
.fb-caption-username { font-weight:700; font-size:13px; color:#050505; }

/* FB success header */
.fb-flow-header-center { justify-content: center; }

/* ═══════════════════════════════════════════
   GCASH — RECEIVE / QR CODE SCREENS
═══════════════════════════════════════════ */

/* Receive option cards */
.gcash-receive-option {
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  border: 1.5px solid #e9ecef;
  transition: all .15s;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.gcash-receive-option:active { transform: scale(.98); border-color: #0070ba; }
.gcash-receive-option-icon {
  width: 46px; height: 46px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: #fff; flex-shrink: 0;
}
.gcash-receive-option-info { flex: 1; }
.gcash-receive-option-title { font-size: 13px; font-weight: 700; color: #222; font-family: 'Inter', sans-serif; }
.gcash-receive-option-desc  { font-size: 10px; color: #888; margin-top: 2px; line-height: 1.4; font-family: 'Inter', sans-serif; }
.gcash-receive-option-arrow { color: #bbb; font-size: 12px; }

.gcash-receive-tip {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  color: #166534;
  font-family: 'Inter', sans-serif;
  line-height: 1.5;
}
.gcash-receive-tip i { color: #22c55e; font-size: 13px; margin-top: 1px; flex-shrink: 0; }

/* QR Card */
.gcash-qr-card {
  background: #fff;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.gcash-qr-header-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.gcash-avatar-circle {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg,#0070ba,#00a8e0);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.gcash-qr-name   { font-size: 13px; font-weight: 700; color: #222; font-family: 'Inter', sans-serif; }
.gcash-qr-number { font-size: 11px; color: #888; font-family: 'Inter', sans-serif; margin-top: 1px; }

/* QR Frame */
.gcash-qr-frame {
  width: 170px; height: 170px;
  border: 2.5px dashed #d0dde8;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: #f8fafc;
  position: relative;
  overflow: hidden;
}
.gcash-qr-locked {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; color: #bbb; text-align: center; padding: 12px;
}
.gcash-qr-locked i   { font-size: 32px; color: #d0dde8; }
.gcash-qr-locked span { font-size: 11px; font-weight: 700; color: #aaa; font-family: 'Inter', sans-serif; }
.gcash-qr-locked small { font-size: 9px; color: #bbb; font-family: 'Inter', sans-serif; }

.gcash-qr-active  { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gcash-qr-svg     { width: 140px; height: 140px; }
.gcash-qr-scan-label { font-size: 9px; font-weight: 700; color: #0070ba; letter-spacing: 1px; text-transform: uppercase; font-family: 'Share Tech Mono', monospace; }

/* QR amount row */
.gcash-qr-amount-row { width: 100%; }
.gcash-qr-amount-label { font-size: 10px; color: #888; font-weight: 700; font-family: 'Inter', sans-serif; display: block; margin-bottom: 5px; }
.gcash-qr-amount-input-wrap {
  display: flex; align-items: center; gap: 6px;
  background: #f8f9fa; border: 2px solid #e9ecef;
  border-radius: 10px; padding: 8px 12px;
}
.gcash-qr-peso { font-size: 16px; font-weight: 700; color: #0070ba; }
.gcash-qr-amount-input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 16px; font-weight: 700; color: #222; font-family: 'Inter', sans-serif;
}

/* How it works steps */
.gcash-qr-steps-card {
  background: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.gcash-qr-step-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 7px 0;
  font-size: 12px; color: #444; font-family: 'Inter', sans-serif;
  border-bottom: 1px solid #f0f0f0;
}
.gcash-qr-step-row:last-child { border-bottom: none; }
.gcash-qr-step-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg,#00b894,#00cec9);
  color: #fff; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Activate btn icon */
#gcash-activate-qr-btn i { margin-right: 6px; }

/* QR Success display */
.gcash-qr-display {
  background: #f8fafc;
  border: 2px solid #e9ecef;
  border-radius: 16px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gcash-qr-svg-success { width: 130px; height: 130px; }

/* QR Share row */
.gcash-qr-share-row { display: flex; gap: 10px; width: 100%; }
.gcash-qr-share-btn {
  flex: 1; padding: 10px; border-radius: 10px;
  background: #f0f4f8; border: 1.5px solid #d0dde8;
  color: #0070ba; font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: 'Inter', sans-serif;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}

/* Receive option icon colors */
.gcash-roi-green  { background: linear-gradient(135deg,#00b894,#00cec9); }
.gcash-roi-purple { background: linear-gradient(135deg,#6c5ce7,#a29bfe); }
.gcash-roi-blue   { background: linear-gradient(135deg,#0070ba,#00a8e0); }

/* QR active panel hidden by default */
.gcash-qr-active-hidden { display: none; }

/* QR success ring - green */
.gcash-success-ring-green { background: linear-gradient(135deg,#00b894,#00cec9); }

/* QR steps title spacing */
.gcash-qr-steps-title { margin-bottom: 10px; }
.gcash-qr-active-hidden { display: none !important; }

/* ═══════════════════════════════════════════
   FACEBOOK — REACTIONS & SHARE
═══════════════════════════════════════════ */

/* Like button active state */
.fb-action-btn.liked { color: #1877f2; font-weight: 700; }
.fb-action-btn.liked i { color: #1877f2; }

/* Reaction picker bubble */
.fb-reaction-picker {
  display: none;
  position: absolute;
  left: 8px;
  bottom: 54px;
  background: #fff;
  border-radius: 30px;
  padding: 6px 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,.18), 0 1px 6px rgba(0,0,0,.1);
  flex-direction: row;
  gap: 4px;
  z-index: 50;
  border: 1px solid #e4e6eb;
  animation: reactionPop .18s cubic-bezier(.4,0,.2,1);
}
.fb-reaction-picker.visible { display: flex; }
@keyframes reactionPop {
  from { opacity:0; transform: scale(.7) translateY(6px); }
  to   { opacity:1; transform: scale(1) translateY(0); }
}
.fb-reaction-emoji {
  background: none;
  border: none;
  font-size: 26px;
  cursor: pointer;
  padding: 2px 3px;
  border-radius: 50%;
  transition: transform .12s;
  line-height: 1;
}
.fb-reaction-emoji:hover { transform: scale(1.4) translateY(-4px); }

/* Ensure post-actions is relative so picker positions correctly */
.fb-post-actions { position: relative; }

/* Share bottom sheet */
.fb-share-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 60;
}
.fb-share-overlay.visible { display: block; }

.fb-share-sheet {
  position: absolute;
  bottom: -100%;
  left: 0; right: 0;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 10px 16px 32px;
  z-index: 61;
  transition: bottom .3s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 -4px 30px rgba(0,0,0,.15);
}
.fb-share-sheet.open { bottom: 0; }

.fb-share-handle {
  width: 36px; height: 4px;
  background: #e4e6eb;
  border-radius: 2px;
  margin: 0 auto 14px;
}
.fb-share-title {
  font-size: 15px; font-weight: 800; color: #050505;
  font-family: 'Inter', sans-serif;
  text-align: center; margin-bottom: 14px;
}

/* Post preview inside share sheet */
.fb-share-preview {
  display: flex; align-items: flex-start; gap: 10px;
  background: #f0f2f5; border-radius: 12px;
  padding: 10px 12px; margin-bottom: 14px;
  border: 1px solid #e4e6eb;
}
.fb-share-preview-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: #e4e6eb;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.fb-share-preview-name { font-size: 12px; font-weight: 700; color: #050505; font-family: 'Inter', sans-serif; }
.fb-share-preview-text { font-size: 11px; color: #65676b; margin-top: 2px; font-family: 'Inter', sans-serif; line-height: 1.4; }

/* Share options */
.fb-share-options { display: flex; flex-direction: column; gap: 4px; }
.fb-share-option {
  display: flex; align-items: center; gap: 12px;
  background: none; border: none; padding: 10px 4px;
  cursor: pointer; border-radius: 10px;
  transition: background .15s; width: 100%;
  border-bottom: 1px solid #f0f2f5;
}
.fb-share-option:last-child { border-bottom: none; }
.fb-share-option:active { background: #f0f2f5; }
.fb-share-option-icon {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px; flex-shrink: 0;
}
.fb-share-option-info { text-align: left; }
.fb-share-option-title { font-size: 13px; font-weight: 700; color: #050505; font-family: 'Inter', sans-serif; }
.fb-share-option-desc  { font-size: 10px; color: #65676b; margin-top: 1px; font-family: 'Inter', sans-serif; }

/* Share success banner */
.fb-share-success {
  position: absolute;
  bottom: 80px; left: 12px; right: 12px;
  background: #1877f2; color: #fff;
  border-radius: 10px; padding: 11px 14px;
  font-size: 12px; font-weight: 700;
  font-family: 'Inter', sans-serif;
  text-align: center; z-index: 70;
  opacity: 0; transform: translateY(12px);
  transition: all .3s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.fb-share-success.show { opacity: 1; transform: translateY(0); }

/* ═══════════════════════════════════════════
   KAI — SETTINGS BUTTON
═══════════════════════════════════════════ */
.kai-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.kai-settings-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(150,150,150,0.3);
  border-radius: 50%;
  width: 38px; height: 38px;
  color: rgba(255,255,255,0.7);
  font-size: 15px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
  transition: all .2s;
  flex-shrink: 0;
}
.kai-settings-btn:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border-color: rgba(200,200,200,0.5);
  transform: rotate(30deg);
}
.kai-settings-title {
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,0.7);
  letter-spacing: 3px;
  flex: 1;
  text-align: center;
}

/* ═══════════════════════════════════════════
   KAI — SETTINGS SCREEN
═══════════════════════════════════════════ */
#kai-settings-screen {
  background: #000;
}
.kai-settings-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 30px;
}

.kai-settings-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.kai-settings-body::-webkit-scrollbar { width: 2px; }
.kai-settings-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); }

/* Header */
.kai-settings-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 4px 4px;
}
.kai-settings-avatar {
  width: 52px; height: 52px; border-radius: 16px;
  background: linear-gradient(135deg,#1a1a1a,#3a3a3a);
  border: 1px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  box-shadow: 0 0 20px rgba(255,255,255,0.08);
}
.kai-settings-name {
  font-family: 'Exo 2', sans-serif;
  font-size: 18px; font-weight: 900;
  color: #fff; letter-spacing: 6px;
  text-shadow: 0 0 20px rgba(255,255,255,0.4);
}
.kai-settings-desc {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px; color: rgba(255,255,255,0.4);
  letter-spacing: 2px; text-transform: uppercase;
  margin-top: 3px;
}

/* Section labels */
.kai-settings-section { display: flex; flex-direction: column; gap: 8px; }
.kai-settings-section-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px; font-weight: 700;
  color: rgba(255,255,255,0.35);
  letter-spacing: 3px; text-transform: uppercase;
  padding: 0 2px;
  display: flex; align-items: center; gap: 6px;
}
.kai-settings-section-label i { font-size: 10px; }

/* Card */
.kai-settings-card {
  background: linear-gradient(145deg, #111, #1a1a1a);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Row */
.kai-settings-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
}
.kai-settings-row-icon {
  width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px; flex-shrink: 0;
}
.kai-settings-row-info { flex: 1; }
.kai-settings-row-title {
  font-size: 13px; font-weight: 700; color: #fff;
  font-family: 'Inter', sans-serif;
}
.kai-settings-row-desc {
  font-size: 10px; color: rgba(255,255,255,0.4);
  font-family: 'Inter', sans-serif; margin-top: 2px;
}

.kai-settings-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 0 16px;
}

/* Toggle switch */
.kai-toggle {
  width: 46px; height: 26px; border-radius: 13px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.15);
  position: relative; cursor: pointer;
  transition: background .25s, border-color .25s;
  flex-shrink: 0;
}
.kai-toggle.on {
  background: linear-gradient(135deg, #e17055, #d63031);
  border-color: rgba(209,48,49,0.5);
  box-shadow: 0 0 12px rgba(209,48,49,0.3);
}
.kai-toggle-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,255,255,0.5);
  transition: transform .25s cubic-bezier(.4,0,.2,1), background .25s;
}
.kai-toggle.on .kai-toggle-thumb {
  transform: translateX(20px);
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Child lock info box */
.kai-childlock-info {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 16px 14px;
  font-size: 11px; color: rgba(255,255,255,0.35);
  font-family: 'Inter', sans-serif; line-height: 1.5;
}
.kai-childlock-info i { color: rgba(255,255,255,0.25); font-size: 13px; margin-top: 1px; flex-shrink: 0; }
.kai-childlock-info.active { color: rgba(225,112,85,0.8); }
.kai-childlock-info.active i { color: rgba(225,112,85,0.6); }

/* Language options */
.kai-lang-options {
  display: flex; flex-direction: column; gap: 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.kai-lang-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: none; border: none;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  cursor: pointer; transition: background .15s; width: 100%;
  text-align: left;
}
.kai-lang-btn:last-child { border-bottom: none; }
.kai-lang-btn:active { background: rgba(255,255,255,0.05); }
.kai-lang-flag { font-size: 18px; flex-shrink: 0; }
.kai-lang-name {
  flex: 1; font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,0.6);
  font-family: 'Inter', sans-serif;
}
.kai-lang-check { color: rgba(255,255,255,0.15); font-size: 12px; }
.kai-lang-btn.active .kai-lang-name { color: #fff; font-weight: 700; }
.kai-lang-btn.active .kai-lang-check { color: rgba(0,229,255,0.9); }

/* Language preview */
.kai-lang-preview {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px 14px;
  font-size: 11px; color: rgba(0,229,255,0.6);
  font-family: 'Share Tech Mono', monospace;
  font-style: italic; letter-spacing: 0.3px;
}
.kai-lang-preview i { font-size: 12px; flex-shrink: 0; }

/* Coming soon badge */
.kai-coming-soon-badge {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 20px; padding: 3px 8px;
  font-size: 8px; font-weight: 800;
  color: rgba(255,255,255,0.35);
  font-family: 'Share Tech Mono', monospace;
  letter-spacing: 1.5px;
}

/* Strictness placeholder */
.kai-strictness-placeholder {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 16px 14px;
  font-size: 11px; color: rgba(255,255,255,0.25);
  font-family: 'Inter', sans-serif; line-height: 1.5;
}
.kai-strictness-placeholder i { color: rgba(255,255,255,0.15); font-size: 13px; margin-top: 1px; flex-shrink: 0; }

/* Version footer */
.kai-settings-version {
  text-align: center;
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px; color: rgba(255,255,255,0.15);
  letter-spacing: 2px; padding: 4px 0 8px;
}

/* ── Language option two-line layout ── */
.kai-lang-btn { align-items: flex-start; padding: 13px 16px; }
.kai-lang-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.kai-lang-example {
  font-size: 9px;
  color: rgba(255,255,255,0.3);
  font-family: 'Share Tech Mono', monospace;
  letter-spacing: 0.3px;
}
.kai-lang-btn.active .kai-lang-example { color: rgba(0,229,255,0.5); }

/* ── "KAI replies in English" note ── */
.kai-lang-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 16px 14px;
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  font-family: 'Inter', sans-serif;
  line-height: 1.5;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.kai-lang-note i { color: rgba(0,229,255,0.4); font-size: 12px; margin-top: 1px; flex-shrink: 0; }
.kai-lang-note strong { color: rgba(255,255,255,0.6); }

/* ═══════════════════════════════════════════
   SHOPEE APP ICON
═══════════════════════════════════════════ */
.ai-shopee {
  background: linear-gradient(135deg, #ee4d2d, #ff7337) !important;
  font-size: 22px;
}

/* ═══════════════════════════════════════════
   SHOPEE SCREEN
═══════════════════════════════════════════ */
#shopee-screen { background: #f5f5f5; }
#shopee-screen.active { display: flex; flex-direction: column; }

/* subviews */
.sp-subview { display: none; flex: 1; flex-direction: column; overflow: hidden; }
.sp-subview.active { display: flex; }

/* Top bar */
.sp-topbar {
  background: #ee4d2d;
  display: flex; align-items: center; gap: 8px;
  padding: 36px 10px 10px;
  flex-shrink: 0;
}
.sp-topbar .back-btn {
  background: none; border: none; color: #fff;
  font-size: 16px; padding: 4px; cursor: pointer;
  flex-shrink: 0;
}
.sp-search-wrap {
  flex: 1; background: #fff; border-radius: 20px;
  display: flex; align-items: center; padding: 0 10px; gap: 6px;
  height: 34px;
}
.sp-search-icon { color: #ee4d2d; font-size: 12px; }
.sp-search-input {
  flex: 1; border: none; outline: none; font-size: 12px;
  font-family: 'Inter', sans-serif; color: #333; background: transparent;
}
.sp-cart-btn {
  background: none; border: none; color: #fff;
  font-size: 18px; cursor: pointer; position: relative; flex-shrink: 0; padding: 4px;
}
.sp-cart-badge {
  position: absolute; top: -2px; right: -4px;
  background: #ffeb3b; color: #333; font-size: 8px; font-weight: 800;
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif;
}

/* ── Home feed ── */
.sp-home-content { flex: 1; overflow-y: auto; padding-bottom: 20px; }
.sp-banner {
  background: linear-gradient(135deg, #ee4d2d, #ff9a5c);
  margin: 10px; border-radius: 12px; padding: 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.sp-banner-tag { background: rgba(255,255,255,.25); color: #fff; font-size: 9px; font-weight: 800; border-radius: 20px; padding: 3px 8px; display: inline-block; margin-bottom: 6px; font-family: 'Inter', sans-serif; }
.sp-banner-title { font-size: 20px; font-weight: 900; color: #fff; font-family: 'Inter', sans-serif; }
.sp-banner-sub { font-size: 10px; color: rgba(255,255,255,.85); margin-top: 4px; font-family: 'Inter', sans-serif; }
.sp-banner-emoji { font-size: 48px; }

.sp-cats-row { display: flex; gap: 6px; padding: 6px 10px; overflow-x: auto; }
.sp-cats-row::-webkit-scrollbar { display: none; }
.sp-cat { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 52px; cursor: pointer; }
.sp-cat-icon { width: 44px; height: 44px; background: #fff; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.sp-cat-name { font-size: 9px; color: #555; font-family: 'Inter', sans-serif; text-align: center; }

.sp-section-title { font-size: 13px; font-weight: 800; color: #333; padding: 12px 12px 6px; font-family: 'Inter', sans-serif; }

.sp-flash-row { display: flex; gap: 8px; padding: 0 10px 10px; overflow-x: auto; }
.sp-flash-row::-webkit-scrollbar { display: none; }
.sp-flash-item { background: #fff; border-radius: 10px; padding: 10px; min-width: 100px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.06); text-align: center; flex-shrink: 0; }
.sp-flash-emoji { font-size: 28px; }
.sp-flash-name { font-size: 9px; color: #333; margin-top: 4px; font-family: 'Inter', sans-serif; font-weight: 600; }
.sp-flash-price { font-size: 11px; color: #ee4d2d; font-weight: 800; font-family: 'Inter', sans-serif; }
.sp-flash-off { font-size: 9px; background: #ee4d2d; color: #fff; border-radius: 3px; padding: 1px 4px; font-family: 'Inter', sans-serif; font-weight: 800; display: inline-block; margin-top: 2px; }

/* ── Product grid ── */
.sp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 10px 10px; }
.sp-card {
  background: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06); cursor: pointer;
  transition: transform .15s;
}
.sp-card:active { transform: scale(.97); }
.sp-card-img { height: 100px; display: flex; align-items: center; justify-content: center; font-size: 44px; background: #fafafa; }
.sp-card-body { padding: 8px; }
.sp-card-name { font-size: 11px; color: #333; font-family: 'Inter', sans-serif; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sp-card-price { font-size: 13px; color: #ee4d2d; font-weight: 800; font-family: 'Inter', sans-serif; margin-top: 4px; }
.sp-card-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 3px; }
.sp-card-rating { font-size: 9px; color: #f8a100; font-family: 'Inter', sans-serif; }
.sp-card-sold { font-size: 9px; color: #999; font-family: 'Inter', sans-serif; }
.sp-card.kai-top { border: 2px solid #ee4d2d; position: relative; }
.sp-card.kai-top::before { content: '🤖 KAI PICK'; position: absolute; top: 4px; left: 4px; background: #ee4d2d; color: #fff; font-size: 7px; font-weight: 800; border-radius: 4px; padding: 2px 5px; font-family: 'Inter', sans-serif; z-index: 2; }

/* ── Results header ── */
.sp-results-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 6px; background: #fff; border-bottom: 1px solid #eee; flex-shrink: 0; }
.sp-results-label { font-size: 11px; color: #666; font-family: 'Inter', sans-serif; }
.sp-results-label strong { color: #ee4d2d; }
.sp-results-count { font-size: 10px; color: #999; font-family: 'Inter', sans-serif; }

/* ── KAI Recommendation banner ── */
.sp-kai-banner {
  margin: 10px 10px 0;
  background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
  border-radius: 14px; overflow: hidden;
  border: 1.5px solid rgba(238,77,45,.4);
  box-shadow: 0 4px 16px rgba(238,77,45,.15);
  flex-shrink: 0; /* prevent flexbox from squashing banner to 0 height */
}
.sp-kai-banner-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px 8px;
  background: linear-gradient(90deg, rgba(238,77,45,.15), transparent);
}
.sp-kai-banner-icon { font-size: 16px; }
.sp-kai-banner-title { font-size: 12px; font-weight: 800; color: #fff; font-family: 'Inter', sans-serif; flex: 1; }
.sp-kai-banner-badge { background: #ee4d2d; color: #fff; font-size: 8px; font-weight: 800; border-radius: 20px; padding: 2px 7px; font-family: 'Share Tech Mono', monospace; letter-spacing: 1px; }
.sp-kai-rec-card { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; }
.sp-kai-rec-card:active { background: rgba(255,255,255,.05); }
.sp-kai-rec-emoji { font-size: 36px; flex-shrink: 0; background: #111; width: 56px; height: 56px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.sp-kai-rec-info { flex: 1; }
.sp-kai-rec-name { font-size: 11px; font-weight: 700; color: #fff; font-family: 'Inter', sans-serif; }
.sp-kai-rec-price { font-size: 14px; font-weight: 900; color: #ee4d2d; font-family: 'Inter', sans-serif; margin-top: 2px; }
.sp-kai-rec-row { display: flex; gap: 8px; margin-top: 4px; align-items: center; }
.sp-kai-rec-stars { font-size: 10px; color: #f8a100; }
.sp-kai-rec-sold { font-size: 9px; color: rgba(255,255,255,.5); font-family: 'Inter', sans-serif; }
.sp-kai-reason { padding: 6px 12px 10px; font-size: 10px; color: rgba(255,255,255,.5); font-family: 'Inter', sans-serif; font-style: italic; }

/* results grid scrollable */
#sp-results { overflow-y: auto; }
#sp-results .sp-grid { margin-top: 8px; }

/* ── Product detail ── */
.sp-product-scroll { flex: 1; overflow-y: auto; position: relative; }
.sp-product-back {
  position: absolute; top: 10px; left: 10px; z-index: 10;
  background: rgba(255,255,255,.85); border: none; border-radius: 50%;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; cursor: pointer; backdrop-filter: blur(8px); color: #333;
}
.sp-product-img { height: 200px; background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-size: 80px; }
.sp-product-info { padding: 14px; }
.sp-product-name { font-size: 14px; font-weight: 700; color: #333; font-family: 'Inter', sans-serif; line-height: 1.4; }
.sp-product-meta-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.sp-product-rating { font-size: 11px; color: #f8a100; font-family: 'Inter', sans-serif; }
.sp-product-sold { font-size: 11px; color: #999; font-family: 'Inter', sans-serif; }
.sp-product-price { font-size: 22px; font-weight: 900; color: #ee4d2d; font-family: 'Inter', sans-serif; }
.sp-product-shipping { font-size: 10px; color: #27ae60; margin-top: 6px; font-family: 'Inter', sans-serif; display: flex; align-items: center; gap: 5px; }
.sp-product-divider { height: 1px; background: #eee; margin: 12px 0; }
.sp-product-desc { font-size: 11px; color: #666; font-family: 'Inter', sans-serif; line-height: 1.6; }
.sp-product-footer { background: #fff; border-top: 1px solid #eee; padding: 10px 14px; display: flex; gap: 8px; flex-shrink: 0; }
.sp-add-cart-btn { flex: 1; background: #fff; border: 2px solid #ee4d2d; color: #ee4d2d; border-radius: 20px; font-size: 12px; font-weight: 800; font-family: 'Inter', sans-serif; cursor: pointer; padding: 10px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.sp-buy-btn { flex: 1; background: #ee4d2d; border: none; color: #fff; border-radius: 20px; font-size: 12px; font-weight: 800; font-family: 'Inter', sans-serif; cursor: pointer; padding: 10px; }

/* ── Cart ── */
.sp-cart-header { background: #ee4d2d; padding: 36px 12px 12px; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.sp-cart-title { font-size: 15px; font-weight: 800; color: #fff; font-family: 'Inter', sans-serif; }
.sp-cart-items { flex: 1; overflow-y: auto; padding: 10px; }
.sp-cart-item { background: #fff; border-radius: 10px; padding: 10px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.sp-cart-item-emoji { font-size: 32px; flex-shrink: 0; }
.sp-cart-item-info { flex: 1; }
.sp-cart-item-name { font-size: 11px; font-weight: 700; color: #333; font-family: 'Inter', sans-serif; }
.sp-cart-item-price { font-size: 13px; font-weight: 800; color: #ee4d2d; font-family: 'Inter', sans-serif; margin-top: 2px; }
.sp-cart-footer { background: #fff; border-top: 1px solid #eee; padding: 12px 14px; flex-shrink: 0; }
.sp-cart-total-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 13px; font-family: 'Inter', sans-serif; color: #333; }
.sp-cart-total { font-size: 18px; font-weight: 900; color: #ee4d2d; }
.sp-checkout-btn { width: 100%; background: #ee4d2d; border: none; color: #fff; border-radius: 20px; padding: 12px; font-size: 13px; font-weight: 800; font-family: 'Inter', sans-serif; cursor: pointer; }
.sp-empty-cart { text-align: center; padding: 40px 20px; color: #999; font-family: 'Inter', sans-serif; font-size: 13px; }
.sp-empty-cart-emoji { font-size: 48px; display: block; margin-bottom: 10px; }

/* ═══════════════════════════════════════════
   OVERRIDES & NEW FEATURES (moved from index.html)
═══════════════════════════════════════════ */

/* ── K·A·I title ── */
.kai-name {
  font-size: 52px !important;
  letter-spacing: 10px !important;
  font-weight: 900 !important;
  margin-bottom: 6px !important;
}
.kai-subtitle {
  font-weight: 400 !important;
  font-style: italic !important;
  color: rgba(255,255,255,0.55) !important;
  letter-spacing: 0.3px !important;
}

/* ── Home screen — glassmorphism ── */
#home-screen {
  background:
    radial-gradient(ellipse 130% 55% at 15% 5%,  rgba(120,60,255,0.4)  0%, transparent 55%),
    radial-gradient(ellipse 100% 45% at 85% 25%, rgba(0,180,255,0.28)  0%, transparent 55%),
    radial-gradient(ellipse 90%  55% at 50% 95%, rgba(255,60,120,0.22) 0%, transparent 55%),
    linear-gradient(175deg, #07001a 0%, #04091c 45%, #060011 100%) !important;
}
.home-greeting {
  font-size: 12px !important;
  letter-spacing: 3px !important;
  color: rgba(255,255,255,0.45) !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 300 !important;
  padding-top: 70px !important;
  margin-bottom: 2px !important;
}
.home-date {
  font-size: 60px !important;
  font-weight: 200 !important;
  color: #ffffff !important;
  letter-spacing: -3px !important;
  line-height: 1 !important;
  margin-bottom: 2px !important;
  font-family: "Inter", sans-serif !important;
  text-shadow: 0 2px 20px rgba(180,140,255,0.3) !important;
}
.home-date span {
  font-size: 11px !important;
  color: rgba(255,255,255,0.42) !important;
  letter-spacing: 2.5px !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 400 !important;
  margin-top: 5px !important;
  text-transform: uppercase !important;
}
.app-grid {
  gap: 20px 14px !important;
  padding: 6px 2px !important;
  margin-top: 14px !important;
}
.app-icon-img {
  width: 58px !important;
  height: 58px !important;
  border-radius: 17px !important;
  font-size: 26px !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 6px 20px rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  transition: transform .12s ease, box-shadow .18s ease !important;
}
.app-icon:active .app-icon-img { transform: scale(0.87) !important; }
.app-icon:hover .app-icon-img {
  background: rgba(255,255,255,0.13) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.32),
    0 0 24px rgba(255,255,255,0.18),
    0 8px 24px rgba(0,0,0,0.5) !important;
}
.ai-google   { background: rgba(66,133,244,0.22)  !important; border-color: rgba(66,133,244,0.32)  !important; }
.ai-youtube  { background: rgba(255,30,30,0.22)   !important; border-color: rgba(255,30,30,0.32)   !important; }
.ai-facebook { background: rgba(24,119,242,0.22)  !important; border-color: rgba(24,119,242,0.32)  !important; }
.ai-gcash    { background: rgba(0,112,186,0.28)   !important; border-color: rgba(0,168,224,0.36)   !important; }
.ai-calc     { background: rgba(140,0,255,0.22)   !important; border-color: rgba(180,60,255,0.32)  !important; }
.ai-clock    { background: rgba(255,185,0,0.2)    !important; border-color: rgba(255,200,0,0.3)    !important; }
.ai-wiki     { background: rgba(200,200,200,0.1)  !important; border-color: rgba(200,200,200,0.2)  !important; }
.ai-maps     { background: rgba(52,168,83,0.22)   !important; border-color: rgba(76,175,80,0.32)   !important; }
.ai-shopee   { background: rgba(238,77,45,0.24)   !important; border-color: rgba(238,77,45,0.34)   !important; }
.ai-kai      { background: rgba(180,160,255,0.16) !important; border-color: rgba(200,180,255,0.28) !important; }
.ai-contacts { background: rgba(0,200,130,0.22)   !important; border-color: rgba(0,220,140,0.32)   !important; }
.app-icon-label {
  font-size: 10px !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.82) !important;
  letter-spacing: 0px !important;
  text-shadow: 0 1px 5px rgba(0,0,0,0.8) !important;
}
.home-dock {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 32px !important;
  backdrop-filter: blur(40px) !important;
  -webkit-backdrop-filter: blur(40px) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 10px 40px rgba(0,0,0,0.55) !important;
  padding: 14px 28px !important;
}
.dock-icon {
  width: 54px !important;
  height: 54px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 4px 14px rgba(0,0,0,0.35) !important;
}
.dock-kai-label {
  font-family: "Inter", sans-serif !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.72) !important;
  letter-spacing: 0.3px !important;
}

/* ── Banner fix ── */
.sp-kai-banner { flex-shrink: 0 !important; }

/* ── KAI bottom centering ── */
.kai-bottom { align-items: center !important; text-align: center !important; }

/* ── Mode toggle ── */
.kai-mode-toggle {
  display: flex;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 24px;
  padding: 3px;
  gap: 2px;
  margin-bottom: 12px;
  backdrop-filter: blur(12px);
}
.kai-mode-btn {
  flex: 1;
  border: none;
  border-radius: 20px;
  padding: 8px 18px;
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: rgba(255,255,255,0.5);
  background: transparent;
  cursor: pointer;
  transition: all .22s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.kai-mode-btn.active { background: rgba(255,255,255,0.14); color: #ffffff; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.kai-mode-btn:hover:not(.active) { color: rgba(255,255,255,0.75); }

/* ── Chat ── */
.kai-chat-wrap { display: none; flex-direction: column; width: 100%; gap: 8px; }
.kai-chat-wrap.active { display: flex; }
.kai-chat-history {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 130px; overflow-y: auto; padding: 2px 0; scrollbar-width: none;
}
.kai-chat-history::-webkit-scrollbar { display: none; }
.kai-chat-msg {
  max-width: 85%; padding: 8px 13px; border-radius: 16px;
  font-size: 12px; font-family: 'Inter', sans-serif; line-height: 1.45;
  animation: msgIn .2s ease;
}
@keyframes msgIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.kai-chat-msg.user {
  align-self: flex-end;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff; border-bottom-right-radius: 4px;
}
.kai-chat-msg.kai {
  align-self: flex-start;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85); border-bottom-left-radius: 4px;
}
.kai-chat-msg.kai .kai-chat-label {
  font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.4);
  letter-spacing: 1px; margin-bottom: 3px; display: block;
}
.kai-chat-input-row { display: flex; align-items: center; gap: 8px; width: 100%; }
.kai-chat-input {
  flex: 1; height: 48px; border-radius: 24px;
  background: rgba(0,0,0,0.5); border: 1.5px solid rgba(255,255,255,0.18);
  color: #fff; font-size: 14px; font-family: 'Inter', sans-serif;
  padding: 0 16px; outline: none; backdrop-filter: blur(12px); transition: border-color .2s;
}
.kai-chat-input::placeholder { color: rgba(255,255,255,0.35); }
.kai-chat-input:focus { border-color: rgba(255,255,255,0.45); }
.kai-chat-send {
  width: 48px; height: 48px; border-radius: 50%;
  background: #ffffff; border: none; color: #000; font-size: 16px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; box-shadow: 0 4px 16px rgba(255,255,255,0.25);
  transition: transform .15s, box-shadow .15s;
}
.kai-chat-send:hover { transform: scale(1.07); box-shadow: 0 6px 20px rgba(255,255,255,0.35); }
.kai-chat-send:active { transform: scale(0.93); }

/* ═══════════════════════════════════════════
   CONTACTS APP
═══════════════════════════════════════════ */
#contacts-screen { background: linear-gradient(175deg,#040d14,#050a10); display: flex; flex-direction: column; }
.ct-topbar { display: flex; align-items: center; justify-content: space-between; padding: 52px 14px 12px; flex-shrink: 0; }
.ct-back-btn {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 20px; color: #f0f0f0; font-size: 11px; padding: 6px 12px 6px 9px;
  font-weight: 700; cursor: pointer; font-family: 'Share Tech Mono',monospace;
  letter-spacing: 1px; display: flex; align-items: center; gap: 5px;
}
.ct-title { font-family: 'Inter',sans-serif; font-size: 16px; font-weight: 700; color: #fff; }
.ct-search-btn {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%; width: 32px; height: 32px; color: rgba(255,255,255,0.7);
  font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.ct-search-bar {
  display: none; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.07); border-radius: 12px;
  margin: 0 14px 8px; padding: 0 12px; border: 1px solid rgba(255,255,255,0.12);
}
.ct-search-bar.open { display: flex; }
.ct-search-icon { color: rgba(255,255,255,0.35); font-size: 12px; }
.ct-search-input {
  flex: 1; background: none; border: none; outline: none;
  color: #fff; font-size: 13px; padding: 10px 0; font-family: 'Inter',sans-serif;
}
.ct-search-input::placeholder { color: rgba(255,255,255,0.3); }
.ct-list { flex: 1; overflow-y: auto; padding: 0 0 20px; scrollbar-width: none; }
.ct-list::-webkit-scrollbar { display: none; }
.ct-section-header {
  padding: 8px 16px 4px; font-size: 11px; font-weight: 700;
  font-family: 'Inter',sans-serif; color: rgba(0,220,140,0.75);
  letter-spacing: 1.5px; text-transform: uppercase;
}
.ct-row {
  display: flex; align-items: center; gap: 12px; padding: 11px 16px; cursor: pointer;
  transition: background .15s; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ct-row:active { background: rgba(255,255,255,0.06); }
.ct-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.ct-info { flex: 1; min-width: 0; }
.ct-name {
  font-size: 14px; font-weight: 600; color: #fff;
  font-family: 'Inter',sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ct-phone { font-size: 11px; color: rgba(255,255,255,0.45); font-family: 'Inter',sans-serif; margin-top: 1px; }
.ct-call-btn {
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: rgba(0,200,130,0.18); color: rgba(0,220,140,0.9);
  font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.ct-call-btn:active { background: rgba(0,200,130,0.35); }

/* ═══════════════════════════════════════════
   DIAL OVERLAY
═══════════════════════════════════════════ */
.dial-overlay {
  position: absolute; inset: 0; border-radius: 30px;
  background: linear-gradient(175deg, #030809 0%, #050d0a 100%);
  display: none; flex-direction: column; align-items: center; justify-content: center;
  z-index: 800;
}
.dial-overlay.active { display: flex; }
.dial-content {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 40px 24px 36px; width: 100%;
}
.dial-avatar {
  width: 90px; height: 90px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 40px;
  background: rgba(0,220,140,0.1); border: 2px solid rgba(0,220,140,0.25);
  box-shadow: 0 0 40px rgba(0,220,140,0.15);
  animation: dialPulse 1.8s ease-in-out infinite;
}
@keyframes dialPulse {
  0%,100% { box-shadow: 0 0 20px rgba(0,220,140,0.15); }
  50%     { box-shadow: 0 0 50px rgba(0,220,140,0.35); }
}
.dial-avatar.connected { animation: none; border-color: rgba(0,220,140,0.6); box-shadow: 0 0 30px rgba(0,220,140,0.25); }
.dial-name { font-size: 26px; font-weight: 700; color: #fff; font-family: 'Inter',sans-serif; margin-top: 6px; }
.dial-number { font-size: 13px; color: rgba(255,255,255,0.45); font-family: 'Share Tech Mono',monospace; letter-spacing: 1px; }
.dial-status { font-size: 13px; color: rgba(0,220,140,0.8); font-family: 'Inter',sans-serif; letter-spacing: 0.5px; margin-top: 2px; }
.dial-timer { font-size: 24px; font-weight: 200; color: #fff; font-family: 'Share Tech Mono',monospace; letter-spacing: 2px; min-height: 32px; margin-top: 4px; }
.dial-actions { display: flex; gap: 24px; margin-top: 20px; }
.dial-action-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px; padding: 14px 18px; cursor: pointer; color: #fff;
  font-size: 18px; transition: background .2s; font-family: 'Inter',sans-serif;
}
.dial-action-btn span { font-size: 10px; color: rgba(255,255,255,0.55); font-weight: 500; }
.dial-action-btn.active-btn { background: rgba(255,255,255,0.18); }
.dial-action-btn:active { background: rgba(255,255,255,0.2); }
.dial-end-btn {
  width: 68px; height: 68px; border-radius: 50%; border: none;
  background: #e53935; color: #fff; font-size: 26px; cursor: pointer; margin-top: 32px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(229,57,53,0.5); transition: transform .15s, box-shadow .15s;
}
.dial-end-btn:active { transform: scale(0.92); box-shadow: 0 2px 10px rgba(229,57,53,0.4); }
/* ── Gemini typing indicator ── */
.kai-typing-dots { display: inline-flex; gap: 3px; align-items: center; padding: 2px 0; }
.kai-typing-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan, #00e5ff);
  animation: kaiDot 1.2s infinite ease-in-out;
  opacity: 0.4;
}
.kai-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.kai-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes kaiDot {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
  40%            { transform: scale(1.2); opacity: 1; }
}
/* ═══════════════════════════════════════════
   MAPS SCREEN
═══════════════════════════════════════════ */
#maps-screen {
  display: flex; flex-direction: column;
  background: #040d14;
}

/* Topbar */
.maps-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 42px 14px 10px;
  background: linear-gradient(180deg, #071520 0%, #071520cc 100%);
  border-bottom: 1px solid rgba(0,229,255,.1);
  flex-shrink: 0;
  z-index: 10;
}
.maps-back-btn {
  background: rgba(0,229,255,.08); border: 1px solid rgba(0,229,255,.2);
  color: var(--cyan); font-size: 11px; font-family: 'Share Tech Mono',monospace;
  letter-spacing: 1px; border-radius: 20px; padding: 5px 12px; cursor: pointer;
}
.maps-title {
  color: var(--cyan); font-family: 'Share Tech Mono',monospace;
  font-size: 13px; letter-spacing: 2px;
}
.maps-kai-btn {
  background: rgba(0,229,255,.08); border: 1px solid rgba(0,229,255,.2);
  border-radius: 50%; width: 32px; height: 32px; cursor: pointer;
  font-size: 16px; display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.maps-kai-btn:hover { background: rgba(0,229,255,.18); }

/* Search row */
.maps-search-wrap {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px 6px; flex-shrink: 0;
}
.maps-search-bar {
  flex: 1; display: flex; align-items: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(0,229,255,.18);
  border-radius: 24px; padding: 0 12px; gap: 8px;
  transition: border-color .2s;
}
.maps-search-bar:focus-within { border-color: rgba(0,229,255,.5); }
.maps-search-icon { color: rgba(0,229,255,.5); font-size: 12px; flex-shrink: 0; }
.maps-search-input {
  flex: 1; background: none; border: none; outline: none;
  color: #fff; font-size: 13px; font-family: 'Inter',sans-serif;
  padding: 9px 0;
}
.maps-search-input::placeholder { color: rgba(255,255,255,.3); }
.maps-search-clear {
  background: none; border: none; color: rgba(255,255,255,.4);
  cursor: pointer; padding: 4px; font-size: 11px;
  display: none;
}
.maps-search-clear.visible { display: block; }
.maps-dir-btn {
  background: linear-gradient(135deg,var(--cyan),#0097a7);
  border: none; border-radius: 50%; width: 38px; height: 38px;
  color: #000; font-size: 16px; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 12px rgba(0,229,255,.3);
  transition: transform .15s, box-shadow .15s;
}
.maps-dir-btn:active { transform: scale(.92); }

/* Mode tabs */
.maps-mode-tabs {
  display: flex; gap: 6px; padding: 4px 12px 8px; flex-shrink: 0;
}
.maps-mode-tab {
  flex: 1; padding: 6px 0; border-radius: 16px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.5); font-size: 11px; font-family: 'Inter',sans-serif;
  cursor: pointer; transition: all .2s; display: flex; align-items: center;
  justify-content: center; gap: 4px;
}
.maps-mode-tab.active {
  background: rgba(0,229,255,.15); border-color: rgba(0,229,255,.4);
  color: var(--cyan);
}

/* IFrame wrap */
.maps-iframe-wrap {
  flex: 1; position: relative; overflow: hidden; min-height: 0;
}
.maps-iframe-wrap iframe {
  width: 100%; height: 100%; border: 0; display: block;
}
.maps-loading {
  position: absolute; inset: 0; background: rgba(4,13,20,.85);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; color: var(--cyan); font-size: 12px;
  font-family: 'Share Tech Mono',monospace; letter-spacing: 1px;
  display: none;
}
.maps-loading-spinner {
  width: 28px; height: 28px; border: 2px solid rgba(0,229,255,.2);
  border-top-color: var(--cyan); border-radius: 50%;
  animation: mapsSpin .8s linear infinite;
}
@keyframes mapsSpin { to { transform: rotate(360deg); } }

/* Smart Suggestion Panel */
.maps-smart-panel {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(180deg,#071828,#071020);
  border-top: 1px solid rgba(0,229,255,.2);
  border-radius: 18px 18px 0 0;
  padding: 12px 14px 24px;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  z-index: 50;
  max-height: 65%;
  overflow-y: auto;
}
.maps-smart-panel.open { transform: translateY(0); }

.maps-smart-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.maps-smart-title {
  color: var(--cyan); font-size: 12px;
  font-family: 'Share Tech Mono',monospace; letter-spacing: 1px;
  display: flex; align-items: center; gap: 6px;
}
.maps-smart-title i { color: #f9ca24; }
.maps-smart-close {
  background: none; border: none; color: rgba(255,255,255,.4);
  cursor: pointer; font-size: 14px; padding: 4px;
}
.maps-smart-dest {
  font-size: 11px; color: rgba(255,255,255,.45);
  font-family: 'Inter',sans-serif; margin-bottom: 10px;
  padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.maps-smart-options { display: flex; flex-direction: column; gap: 7px; }

.maps-smart-option {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px; padding: 9px 11px;
  transition: border-color .2s;
}
.maps-smart-option.recommended {
  background: rgba(0,229,255,.07); border-color: rgba(0,229,255,.25);
}
.maps-smart-opt-icon { font-size: 20px; flex-shrink: 0; width: 28px; text-align: center; }
.maps-smart-opt-info { flex: 1; }
.maps-smart-opt-name {
  font-size: 12px; color: #fff; font-family: 'Inter',sans-serif;
  font-weight: 600; display: flex; align-items: center; gap: 6px;
}
.maps-smart-opt-detail {
  font-size: 10px; color: rgba(255,255,255,.45);
  font-family: 'Inter',sans-serif; margin-top: 2px; line-height: 1.3;
}
.maps-smart-opt-cost { text-align: right; flex-shrink: 0; }
.maps-smart-opt-fare {
  font-size: 12px; color: #2ecc71; font-weight: 700;
  font-family: 'Share Tech Mono',monospace;
}
.maps-smart-opt-time {
  font-size: 10px; color: rgba(255,255,255,.4);
  font-family: 'Inter',sans-serif; margin-top: 2px;
}
.maps-best-badge {
  background: linear-gradient(90deg,var(--cyan),#0097a7);
  color: #000; font-size: 8px; font-weight: 800;
  padding: 1px 5px; border-radius: 6px; letter-spacing: 0.5px;
}
.maps-smart-tip {
  margin-top: 10px; padding: 8px 10px;
  background: rgba(249,202,36,.07); border: 1px solid rgba(249,202,36,.2);
  border-radius: 10px; font-size: 11px; color: rgba(255,255,255,.6);
  font-family: 'Inter',sans-serif; line-height: 1.4;
}
.maps-smart-tip strong { color: #f9ca24; }

/* ═══════════════════════════════════════════
   FITNESS APP
═══════════════════════════════════════════ */
.ai-fitness { background:linear-gradient(135deg,#0d2b1a,#1a5c2e); --gc:rgba(46,204,113,.7); border:1px solid rgba(46,204,113,.25); }

#fitness-screen {
  display:flex; flex-direction:column; background:#040d14; overflow:hidden;
}

/* ─ Topbar ─ */
.fit-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:42px 14px 10px;
  background:linear-gradient(180deg,#061410,#061410cc);
  border-bottom:1px solid rgba(46,204,113,.12); flex-shrink:0; z-index:10;
}
.fit-back-btn {
  background:rgba(46,204,113,.08); border:1px solid rgba(46,204,113,.2);
  color:#2ecc71; font-size:11px; font-family:'Share Tech Mono',monospace;
  letter-spacing:1px; border-radius:20px; padding:5px 12px; cursor:pointer;
}
.fit-title {
  color:#2ecc71; font-family:'Share Tech Mono',monospace;
  font-size:13px; letter-spacing:2px;
}
.fit-kai-btn {
  background:rgba(46,204,113,.08); border:1px solid rgba(46,204,113,.2);
  border-radius:50%; width:32px; height:32px; cursor:pointer;
  font-size:16px; display:flex; align-items:center; justify-content:center;
}

/* ─ Body + Panels ─ */
.fit-body { flex:1; overflow:hidden; position:relative; }
.fit-tab-panel { position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .25s; }
.fit-tab-panel.active { opacity:1; pointer-events:all; }
.fit-scroll { height:100%; overflow-y:auto; padding:0 12px 80px; }
.fit-scroll::-webkit-scrollbar { display:none; }

/* ─ Bottom Nav ─ */
.fit-tab-nav {
  position:absolute; bottom:0; left:0; right:0; height:58px;
  background:linear-gradient(0deg,#061410,#071810cc);
  border-top:1px solid rgba(46,204,113,.15);
  display:flex; align-items:center; justify-content:space-around;
  padding:0 4px 4px; z-index:20;
}
.fit-nav-btn {
  flex:1; display:flex; flex-direction:column; align-items:center;
  gap:2px; background:none; border:none; cursor:pointer;
  color:rgba(255,255,255,.3); font-size:9px;
  font-family:'Share Tech Mono',monospace; letter-spacing:.5px; padding:6px 0;
  transition:color .2s; max-width:60px;
}
.fit-nav-btn i { font-size:16px; }
.fit-nav-btn.active { color:#2ecc71; }

/* ─ Section title ─ */
.fit-section-title {
  font-family:'Share Tech Mono',monospace; font-size:10px; letter-spacing:2px;
  color:rgba(46,204,113,.7); text-transform:uppercase;
  margin:14px 0 8px; padding-bottom:4px;
  border-bottom:1px solid rgba(46,204,113,.12);
}

/* ─ Greeting ─ */
.fit-dash-greeting { margin:10px 0 14px; }
.fit-dash-name { color:#fff; font-size:16px; font-weight:700; font-family:'Exo 2',sans-serif; }
.fit-dash-date { color:rgba(255,255,255,.35); font-size:11px; font-family:'Share Tech Mono',monospace; }

/* ─ Activity Rings ─ */
.fit-rings-row { display:flex; justify-content:space-around; margin:0 -4px 14px; }
.fit-ring-wrap { display:flex; flex-direction:column; align-items:center; gap:4px; position:relative; }
.fit-ring-svg { width:76px; height:76px; transform:rotate(-90deg); }
.fit-ring-bg { fill:none; stroke:rgba(255,255,255,.07); stroke-width:7; }
.fit-ring-fill { fill:none; stroke-width:7; stroke-linecap:round; transition:stroke-dasharray 1s cubic-bezier(.4,0,.2,1); }
.fit-ring-center {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-54%);
  display:flex; flex-direction:column; align-items:center; line-height:1;
}
.fit-ring-val { color:#fff; font-size:13px; font-weight:800; font-family:'Share Tech Mono',monospace; }
.fit-ring-unit { color:rgba(255,255,255,.4); font-size:8px; }
.fit-ring-label { font-size:9px; color:rgba(255,255,255,.45); font-family:'Share Tech Mono',monospace; letter-spacing:.5px; }

/* ─ Vitals ─ */
.fit-vitals-row { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:2px; }
.fit-vital-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  border-radius:12px; padding:8px 4px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:3px;
}
.fit-vital-card i { font-size:12px; }
.fit-vital-val { color:#fff; font-size:13px; font-weight:700; font-family:'Share Tech Mono',monospace; }
.fit-vital-label { font-size:8px; color:rgba(255,255,255,.35); font-family:'Share Tech Mono',monospace; letter-spacing:.3px; }

/* ─ HR Zones ─ */
.fit-hz-item { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.fit-hz-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.fit-hz-name { font-size:11px; color:rgba(255,255,255,.7); font-family:'Inter',sans-serif; flex:1; }
.fit-hz-range { font-size:10px; color:rgba(255,255,255,.35); font-family:'Share Tech Mono',monospace; }
.fit-hz-bar-wrap { flex:2; background:rgba(255,255,255,.05); border-radius:4px; height:5px; }
.fit-hz-bar { height:5px; border-radius:4px; transition:width .8s; }

/* ─ Quick buttons ─ */
.fit-quick-row { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:6px; margin-bottom:12px; }
.fit-quick-btn {
  background:rgba(46,204,113,.07); border:1px solid rgba(46,204,113,.18);
  color:#2ecc71; font-size:9px; border-radius:12px; padding:8px 4px;
  cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px;
  font-family:'Share Tech Mono',monospace; letter-spacing:.5px; transition:background .2s;
}
.fit-quick-btn i { font-size:16px; }
.fit-quick-btn:active { background:rgba(46,204,113,.2); }

/* ─ Smart Banner ─ */
.fit-smart-banner {
  background:linear-gradient(135deg,rgba(46,204,113,.1),rgba(0,229,255,.07));
  border:1px solid rgba(46,204,113,.25); border-radius:14px;
  padding:12px 14px; margin:8px 0 4px;
}
.fit-smart-banner-head {
  color:#2ecc71; font-size:10px; font-family:'Share Tech Mono',monospace;
  letter-spacing:1.5px; margin-bottom:7px; display:flex; align-items:center; gap:6px;
}
.fit-smart-banner-msg { color:rgba(255,255,255,.75); font-size:12px; font-family:'Inter',sans-serif; line-height:1.5; }

/* ─ Forms ─ */
.fit-form-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.fit-form-label { color:rgba(255,255,255,.5); font-size:11px; font-family:'Share Tech Mono',monospace; flex:1.2; }
.fit-input {
  flex:2; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:10px; color:#fff; font-size:13px; padding:8px 10px;
  font-family:'Inter',sans-serif; outline:none; min-width:0;
}
.fit-input:focus { border-color:rgba(46,204,113,.5); }
.fit-input-sm { max-width:90px; }
.fit-select {
  flex:2; background:#0b1c14; border:1px solid rgba(255,255,255,.12);
  border-radius:10px; color:#fff; font-size:12px; padding:8px 10px;
  font-family:'Inter',sans-serif; outline:none;
}
.fit-intensity-row, .fit-gender-row { display:flex; gap:6px; flex:2; flex-wrap:wrap; }
.fit-int-btn {
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.5); font-size:10px; border-radius:20px;
  padding:5px 11px; cursor:pointer; font-family:'Inter',sans-serif;
  transition:all .2s; white-space:nowrap;
}
.fit-int-btn.active {
  background:rgba(46,204,113,.15); border-color:rgba(46,204,113,.5); color:#2ecc71;
}
.fit-save-btn {
  width:100%; background:linear-gradient(135deg,#1a5c2e,#2ecc71);
  border:none; border-radius:12px; color:#fff; font-size:12px; font-weight:700;
  padding:11px; cursor:pointer; font-family:'Share Tech Mono',monospace;
  letter-spacing:1px; display:flex; align-items:center; justify-content:center; gap:8px;
  transition:opacity .2s; margin-bottom:10px;
}
.fit-save-btn:active { opacity:.8; }
.fit-wk-form, .fit-body-profile, .fit-calc-card {
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  border-radius:14px; padding:12px; margin-bottom:12px;
}

/* ─ Workout history ─ */
.fit-wk-item {
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
  border-radius:12px; padding:10px 12px; margin-bottom:7px;
}
.fit-wk-icon { font-size:22px; flex-shrink:0; }
.fit-wk-info { flex:1; }
.fit-wk-name { color:#fff; font-size:12px; font-weight:600; font-family:'Inter',sans-serif; }
.fit-wk-sub { color:rgba(255,255,255,.4); font-size:10px; font-family:'Share Tech Mono',monospace; margin-top:2px; }
.fit-wk-kcal { color:#ff6b6b; font-size:11px; font-family:'Share Tech Mono',monospace; }

/* ─ Calculator ─ */
.fit-calc-btn {
  background:rgba(0,229,255,.1); border:1px solid rgba(0,229,255,.25);
  color:var(--cyan); border-radius:10px; padding:8px 16px; cursor:pointer;
  font-family:'Share Tech Mono',monospace; font-size:11px; letter-spacing:1px;
  display:flex; align-items:center; gap:6px; transition:background .2s; margin-bottom:8px;
}
.fit-calc-btn:active { background:rgba(0,229,255,.2); }
.fit-calc-result {
  background:rgba(0,229,255,.05); border:1px solid rgba(0,229,255,.15);
  border-radius:10px; padding:10px; font-size:12px;
  font-family:'Share Tech Mono',monospace; color:#fff; line-height:1.6;
  display:none;
}
.fit-calc-result.show { display:block; }

/* ─ Metrics grid ─ */
.fit-metrics-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.fit-metric-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:12px; display:flex; flex-direction:column; gap:4px;
}
.fit-metric-icon { font-size:18px; }
.fit-metric-val { color:#fff; font-size:18px; font-weight:800; font-family:'Share Tech Mono',monospace; }
.fit-metric-val span { font-size:10px; color:rgba(255,255,255,.4); font-weight:400; }
.fit-metric-label { color:rgba(255,255,255,.4); font-size:9px; font-family:'Share Tech Mono',monospace; letter-spacing:.5px; }
.fit-metric-badge {
  font-size:9px; font-weight:700; padding:2px 7px; border-radius:8px;
  align-self:flex-start; margin-top:2px;
}
.badge-green { background:rgba(46,204,113,.2); color:#2ecc71; }
.badge-yellow { background:rgba(249,202,36,.2); color:#f9ca24; }
.badge-red { background:rgba(255,107,107,.2); color:#ff6b6b; }
.badge-blue { background:rgba(0,229,255,.15); color:#00e5ff; }

/* ─ Body fat result ─ */
.fit-bf-hip-row { display:none; }

/* ─ Weight chart ─ */
.fit-weight-chart { margin-bottom:10px; }
.fit-wt-bar-row { display:flex; align-items:flex-end; gap:5px; height:60px; margin-bottom:4px; }
.fit-wt-bar { flex:1; border-radius:4px 4px 0 0; background:linear-gradient(180deg,#2ecc71,#1a5c2e); min-width:0; transition:height .5s; }
.fit-wt-labels { display:flex; gap:5px; }
.fit-wt-label { flex:1; text-align:center; font-size:8px; color:rgba(255,255,255,.3); font-family:'Share Tech Mono',monospace; }

/* ─ Macro bars ─ */
.fit-cal-balance {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:12px 14px; margin-bottom:10px;
}
.fit-cal-bal-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.fit-cal-bal-title { color:rgba(255,255,255,.6); font-size:11px; font-family:'Share Tech Mono',monospace; }
.fit-cal-bal-val { color:#fff; font-size:16px; font-weight:800; font-family:'Share Tech Mono',monospace; }
.fit-cal-bal-bar { height:6px; background:rgba(255,255,255,.07); border-radius:4px; overflow:hidden; }
.fit-cal-bal-fill { height:6px; border-radius:4px; transition:width .8s; }

.fit-macro-bars { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.fit-macro-bar-row { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:12px; padding:10px 12px; }
.fit-macro-top { display:flex; justify-content:space-between; margin-bottom:5px; }
.fit-macro-name { font-size:11px; color:rgba(255,255,255,.6); font-family:'Inter',sans-serif; font-weight:600; }
.fit-macro-nums { font-size:10px; color:rgba(255,255,255,.4); font-family:'Share Tech Mono',monospace; }
.fit-macro-track { height:5px; background:rgba(255,255,255,.06); border-radius:4px; overflow:hidden; }
.fit-macro-fill { height:5px; border-radius:4px; transition:width .8s; }

/* ─ Water tracker ─ */
.fit-water-tracker { margin-bottom:14px; }
.fit-water-glasses { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:8px; }
.fit-water-glass {
  width:28px; height:28px; border-radius:8px; cursor:pointer; display:flex;
  align-items:center; justify-content:center; font-size:16px;
  background:rgba(0,206,201,.1); border:1px solid rgba(0,206,201,.2);
  transition:all .2s;
}
.fit-water-glass.filled { background:rgba(0,206,201,.3); border-color:rgba(0,206,201,.6); }
.fit-water-info { font-size:11px; color:rgba(255,255,255,.4); font-family:'Share Tech Mono',monospace; }

/* ─ Energy panel ─ */
.fit-energy-panel { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.fit-energy-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:10px; display:flex; flex-direction:column; gap:3px;
}
.fit-energy-label { font-size:9px; color:rgba(255,255,255,.4); font-family:'Share Tech Mono',monospace; letter-spacing:.5px; }
.fit-energy-val { font-size:20px; font-weight:800; color:#fff; font-family:'Share Tech Mono',monospace; }
.fit-energy-sub { font-size:9px; color:rgba(255,255,255,.4); font-family:'Inter',sans-serif; }

/* ─ Perf grid ─ */
.fit-perf-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.fit-perf-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:12px; display:flex; flex-direction:column; gap:4px;
}
.fit-perf-icon { font-size:22px; }
.fit-perf-val { font-size:22px; font-weight:800; color:#fff; font-family:'Share Tech Mono',monospace; }
.fit-perf-label { font-size:9px; color:rgba(255,255,255,.4); font-family:'Share Tech Mono',monospace; letter-spacing:.5px; }

/* ─ Volume chart ─ */
.fit-vol-chart { margin-bottom:12px; }
.fit-vol-bars { display:flex; align-items:flex-end; gap:4px; height:70px; margin-bottom:4px; }
.fit-vol-bar { flex:1; border-radius:4px 4px 0 0; background:linear-gradient(180deg,var(--cyan),#0097a7); min-width:0; transition:height .5s; position:relative; }
.fit-vol-bar:hover .fit-vol-bar-tip { opacity:1; }
.fit-vol-day-row { display:flex; gap:4px; }
.fit-vol-day { flex:1; text-align:center; font-size:8px; color:rgba(255,255,255,.3); font-family:'Share Tech Mono',monospace; }

/* ─ VO2 / Recovery ─ */
.fit-vo2-card, .fit-recovery-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:14px; margin-bottom:12px;
}
.fit-vo2-val { font-size:36px; font-weight:900; color:#fff; font-family:'Share Tech Mono',monospace; }
.fit-vo2-unit { font-size:11px; color:rgba(255,255,255,.35); font-family:'Inter',sans-serif; }
.fit-vo2-class { font-size:12px; margin-top:4px; font-family:'Inter',sans-serif; }
.fit-recovery-bar { height:10px; background:rgba(255,255,255,.07); border-radius:6px; margin:10px 0 6px; overflow:hidden; }
.fit-recovery-fill { height:10px; border-radius:6px; transition:width 1s; }
.fit-recovery-score { font-size:28px; font-weight:900; font-family:'Share Tech Mono',monospace; }
.fit-recovery-label { font-size:11px; color:rgba(255,255,255,.45); font-family:'Inter',sans-serif; margin-top:4px; }

/* ─ PRs ─ */
.fit-pr-item {
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 0; border-bottom:1px solid rgba(255,255,255,.05);
  font-family:'Inter',sans-serif;
}
.fit-pr-name { color:rgba(255,255,255,.7); font-size:12px; }
.fit-pr-val { color:#f9ca24; font-size:12px; font-weight:700; font-family:'Share Tech Mono',monospace; }

/* ─ Water buttons (modal) ─ */
.fit-water-btns { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.fit-water-num-btn {
  width:42px; height:42px; border-radius:12px;
  background:rgba(0,206,201,.1); border:1px solid rgba(0,206,201,.2);
  color:#00cec9; font-size:14px; font-weight:700; cursor:pointer;
  font-family:'Share Tech Mono',monospace; transition:all .2s;
}
.fit-water-num-btn.selected { background:rgba(0,206,201,.3); border-color:rgba(0,206,201,.6); color:#fff; }

/* ─ Modals ─ */
.fit-modal-overlay {
  position:absolute; inset:0; background:rgba(0,0,0,.6);
  z-index:80; opacity:0; pointer-events:none; transition:opacity .2s;
}
.fit-modal-overlay.open { opacity:1; pointer-events:all; }
.fit-modal {
  position:absolute; bottom:0; left:0; right:0; z-index:90;
  background:linear-gradient(180deg,#0b1c14,#071210);
  border-top:1px solid rgba(46,204,113,.2); border-radius:22px 22px 0 0;
  padding:20px 16px 40px;
  transform:translateY(100%); transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.fit-modal.open { transform:translateY(0); }
.fit-modal-head {
  display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;
  font-family:'Share Tech Mono',monospace; color:#2ecc71; font-size:13px; letter-spacing:1px;
}
.fit-modal-head button { background:none; border:none; color:rgba(255,255,255,.4); font-size:16px; cursor:pointer; }

/* ── Transport Signage Board ── */
.maps-signage-wrap {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.maps-signage-label {
  font-size: 9px;
  color: rgba(255,255,255,.35);
  font-family: 'Share Tech Mono', monospace;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.maps-signage-board {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.maps-signage-tag {
  background: #1a1200;
  border: 1px solid rgba(255, 210, 0, .35);
  color: #ffe033;
  font-size: 9px;
  font-family: 'Share Tech Mono', monospace;
  font-weight: 700;
  letter-spacing: .8px;
  padding: 3px 7px;
  border-radius: 5px;
  text-transform: uppercase;
  white-space: nowrap;
  /* mimic hand-painted feel */
  text-shadow: 0 0 8px rgba(255,220,0,.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.maps-smart-option.recommended .maps-signage-tag {
  background: #001a0d;
  border-color: rgba(46,204,113,.4);
  color: #2ecc71;
  text-shadow: 0 0 8px rgba(46,204,113,.4);
}