:root {
  --ink: #12243a;
  --muted: #60738a;
  --blue: #138fea;
  --blue-deep: #0766cb;
  --cyan: #35d7ee;
  --green: #42d991;
  --lime: #a7f064;
  --red: #f04f58;
  --yellow: #ffcf4a;
  --panel: rgba(255, 255, 255, 0.94);
  --line: rgba(21, 83, 129, 0.12);
  --shadow: 0 26px 80px rgba(16, 70, 113, 0.18);
  --radius: 28px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: Inter, ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(circle at 10% 10%, rgba(72, 225, 246, .2), transparent 28%),
    radial-gradient(circle at 90% 4%, rgba(62, 209, 143, .18), transparent 23%),
    linear-gradient(180deg, #f3fcff 0%, #eaf9f3 47%, #f6fbff 100%);
  overflow-x: hidden;
}
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid rgba(19,143,234,.3); outline-offset: 3px; }

.ambient { position: fixed; border-radius: 50%; filter: blur(60px); pointer-events: none; z-index: -1; opacity: .35; }
.ambient-one { width: 320px; height: 320px; background: #3ad5ff; left: -140px; top: 280px; }
.ambient-two { width: 360px; height: 360px; background: #4de792; right: -170px; top: 550px; }

.prototype-ribbon {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 34px; padding: 7px 16px; color: #eafbff; background: #102c45;
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-align: center; text-transform: uppercase;
}
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: #51e89b; box-shadow: 0 0 0 0 rgba(81,232,155,.6); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(81,232,155,0); } 100% { box-shadow: 0 0 0 0 rgba(81,232,155,0); } }

.site-header {
  width: min(1440px, calc(100% - 40px)); margin: 0 auto; height: 88px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; width: max-content; }
.brand-ball, .mini-ball, .scan-ball {
  position: relative; display: inline-block; border-radius: 50%; overflow: hidden;
  background: linear-gradient(#f4525c 0 46%, #172438 46% 55%, #f8fbff 55% 100%);
  box-shadow: inset 0 0 0 2px rgba(13,43,69,.22), 0 6px 14px rgba(23,67,105,.18);
}
.brand-ball { width: 44px; height: 44px; }
.brand-ball::before, .mini-ball::before, .scan-ball::before { content:""; position:absolute; left:0; right:0; top:46%; height:9%; background:#172438; }
.brand-ball span, .mini-ball i, .scan-ball i { position:absolute; width:34%; height:34%; border-radius:50%; background:#fff; border:4px solid #172438; top:50%; left:50%; transform:translate(-50%,-50%); }
.brand-copy { display: flex; flex-direction: column; line-height: .85; letter-spacing: -.05em; }
.brand-copy strong { color: #185bb3; font-size: 20px; }
.brand-copy em { color: #38b7d5; font-style: normal; font-size: 17px; letter-spacing: .04em; }
.brand small { align-self: flex-end; margin-left: -6px; padding: 3px 7px; border-radius: 999px; background: rgba(25,143,234,.1); color: var(--blue-deep); font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.nav-links { display: flex; gap: 32px; }
.nav-links a { color: #385269; text-decoration: none; font-size: 14px; font-weight: 800; transition: color .2s ease; }
.nav-links a:hover { color: var(--blue); }
.sound-toggle {
  justify-self: end; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.75);
  color: #406078; padding: 10px 14px; border-radius: 999px; font-size: 12px; font-weight: 800; box-shadow: 0 8px 24px rgba(40,90,120,.08);
}
.sound-toggle svg { width: 17px; fill: currentColor; }
.sound-toggle[aria-pressed="false"] { color: #8a99a9; }

main { width: min(1440px, calc(100% - 40px)); margin: 0 auto; }
.hero { min-height: 405px; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; padding: 40px 70px 55px; position: relative; overflow: hidden; border-radius: 34px; background:
  linear-gradient(115deg, rgba(255,255,255,.88), rgba(238,255,252,.76)),
  repeating-linear-gradient(35deg, transparent 0 28px, rgba(31,176,156,.045) 29px 31px);
  border: 1px solid rgba(255,255,255,.96); box-shadow: var(--shadow);
}
.hero::before, .hero::after { content:""; position:absolute; background:rgba(46,193,169,.08); border-radius:50%; }
.hero::before { width: 250px; height: 250px; left: -90px; bottom: -120px; }
.hero::after { width: 150px; height: 150px; right: 25%; top: -80px; }
.eyebrow, .section-kicker { color: #168f76; font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow span { color: var(--green); margin-right: 4px; }
.hero h1 { margin: 14px 0 18px; font-size: clamp(44px, 5vw, 76px); line-height: .96; letter-spacing: -.065em; }
.hero h1 span { background: linear-gradient(90deg, #1677db, #28b7d5 50%, #35ca91); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { max-width: 650px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.65; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero-badges span { display: inline-flex; align-items:center; gap:7px; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.82); color: #3f5f72; font-size: 12px; font-weight: 800; border: 1px solid rgba(36,114,142,.1); }
.hero-badges i { display:grid; place-items:center; width:18px; height:18px; border-radius:50%; color:white; background:var(--green); font-style:normal; font-size:11px; }
.hero-orbit { min-height: 290px; position: relative; display: grid; place-items: center; }
.orbit-ring { position:absolute; border: 1px dashed rgba(24,143,234,.24); border-radius:50%; animation: rotate 25s linear infinite; }
.ring-one { width: 285px; height: 285px; }
.ring-two { width: 210px; height: 210px; animation-direction: reverse; animation-duration: 18s; }
@keyframes rotate { to { transform: rotate(360deg); } }
.hero-ball { position:relative; width: 148px; height:148px; border-radius:50%; overflow:hidden; background:linear-gradient(#f55760 0 47%, #162438 47% 55%, #fff 55% 100%); box-shadow: 0 28px 60px rgba(24,89,125,.24), inset 0 0 0 4px rgba(15,50,78,.14); animation: float 4s ease-in-out infinite; }
.hero-ball::before { content:""; position:absolute; left:0; right:0; height:12px; top:46%; background:#162438; }
.hero-ball span { position:absolute; width:48px; height:48px; border-radius:50%; background:white; border:9px solid #162438; left:50%; top:51%; transform:translate(-50%,-50%); box-shadow: inset 0 0 0 4px #d9e8ee; }
@keyframes float { 50% { transform: translateY(-12px) rotate(3deg); } }
.orbit-chip { position:absolute; padding: 9px 13px; border-radius: 14px; background:rgba(255,255,255,.94); box-shadow:0 12px 30px rgba(30,100,130,.15); color:#395b6e; font-size:12px; font-weight:900; backdrop-filter:blur(10px); animation: bob 3s ease-in-out infinite; }
.chip-one { left: 7%; top: 17%; }
.chip-two { right: 0; top: 36%; animation-delay:.4s; }
.chip-three { left: 16%; bottom: 5%; animation-delay:.8s; }
@keyframes bob { 50% { transform: translateY(-7px); } }

.app-layout { display:grid; grid-template-columns:minmax(0,1fr) 350px; gap: 24px; margin-top: 24px; align-items: stretch; }
.builder-card, .chat-card { background:var(--panel); border:1px solid rgba(255,255,255,.95); box-shadow:var(--shadow); border-radius:var(--radius); backdrop-filter:blur(18px); }
.builder-card { overflow:hidden; }
.builder-topbar { display:flex; justify-content:space-between; align-items:center; padding:26px 30px 22px; border-bottom:1px solid var(--line); }
.step-label { display:block; color:var(--blue); font-size:10px; font-weight:1000; letter-spacing:.17em; text-transform:uppercase; }
.builder-topbar h2 { margin:4px 0 0; font-size:24px; letter-spacing:-.04em; }
.server-status { display:inline-flex; align-items:center; gap:8px; padding:8px 11px; border-radius:999px; background:#eefcf5; color:#27845e; font-size:11px; font-weight:850; }
.server-status span { width:8px; height:8px; background:var(--green); border-radius:50%; box-shadow:0 0 0 4px rgba(66,217,145,.14); }
.builder-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr); min-height:680px; }
.configuration-panel { padding:28px 30px 30px; border-right:1px solid var(--line); }
.section-heading { display:flex; align-items:center; gap:13px; margin-bottom:15px; }
.section-heading.compact { margin-top:27px; }
.section-heading .number { display:grid; place-items:center; width:34px; height:34px; border-radius:12px; background:linear-gradient(135deg,#e7f7ff,#e9fff4); color:var(--blue); font-size:11px; font-weight:950; }
.section-heading h3 { margin:0 0 2px; font-size:17px; letter-spacing:-.02em; }
.section-heading p { margin:0; color:#8090a0; font-size:11px; }
.feature-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.feature-card { position:relative; display:flex; align-items:center; gap:11px; min-height:78px; padding:13px 34px 13px 13px; border:1px solid rgba(26,91,134,.12); border-radius:17px; background:#fbfdff; color:var(--ink); text-align:left; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease; }
.feature-card:hover { transform:translateY(-2px); border-color:rgba(19,143,234,.35); box-shadow:0 10px 24px rgba(24,103,150,.1); }
.feature-card.active { border-color:var(--blue); background:linear-gradient(135deg,#eef9ff,#f0fff8); box-shadow:0 10px 25px rgba(19,143,234,.13); }
.feature-icon { flex:0 0 auto; width:43px; height:43px; display:grid; place-items:center; border-radius:14px; background:linear-gradient(145deg,#dff5ff,#ddfff1); color:var(--blue-deep); }
.feature-icon svg { width:22px; fill:currentColor; }
.feature-copy { display:flex; min-width:0; flex-direction:column; gap:3px; }
.feature-copy strong { font-size:13px; }
.feature-copy small { color:#8090a0; font-size:10px; line-height:1.25; }
.select-ring { position:absolute; right:12px; top:50%; transform:translateY(-50%); width:15px; height:15px; border:2px solid #c8d5df; border-radius:50%; }
.feature-card.active .select-ring { border:4px solid var(--blue); box-shadow:0 0 0 3px rgba(19,143,234,.12); }
.joystick-icon { position:relative; }
.joystick-icon::before { content:""; width:24px; height:24px; border-radius:50%; border:3px solid currentColor; box-shadow:inset 0 0 0 5px rgba(19,143,234,.1); }
.joystick-icon i { position:absolute; width:10px; height:10px; border-radius:50%; background:currentColor; }
.input-field { display:block; }
.input-field > span, .field-label { display:block; margin-bottom:8px; color:#42596b; font-size:11px; font-weight:850; }
.input-shell { position:relative; }
.input-shell svg { position:absolute; width:18px; left:14px; top:50%; transform:translateY(-50%); fill:#7f93a5; }
.input-shell input { width:100%; height:50px; border:1px solid rgba(29,87,127,.14); background:#fbfdff; border-radius:14px; padding:0 43px 0 43px; color:var(--ink); font-weight:750; transition:border .2s,box-shadow .2s; }
.input-shell input:focus { border-color:var(--blue); box-shadow:0 0 0 4px rgba(19,143,234,.1); }
.input-check { position:absolute; right:14px; top:50%; transform:translateY(-50%) scale(0); display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--green); color:white; font-size:12px; font-weight:900; transition:transform .2s; }
.input-field.valid .input-check { transform:translateY(-50%) scale(1); }
.input-field > small { display:block; margin-top:6px; color:#92a0ad; font-size:9px; }
.device-field { margin-top:18px; }
.device-tabs { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.device-tab { display:flex; align-items:center; gap:10px; min-height:58px; padding:10px 14px; border:1px solid rgba(29,87,127,.13); border-radius:14px; background:#fbfdff; color:#4b6172; text-align:left; transition:.18s ease; }
.device-tab:hover { transform:translateY(-1px); }
.device-tab.active { border-color:var(--blue); color:var(--blue-deep); background:#eef9ff; box-shadow:0 8px 22px rgba(19,143,234,.11); }
.device-tab svg { width:23px; height:23px; fill:currentColor; }
.device-tab span { display:flex; flex-direction:column; }
.device-tab strong { font-size:12px; }
.device-tab small { color:#8a99a6; font-size:9px; }
.primary-action { position:relative; width:100%; height:58px; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:11px; margin-top:24px; border:0; border-radius:17px; color:white; background:linear-gradient(100deg,#0876df,#1da9e7 48%,#36c992); box-shadow:0 15px 30px rgba(16,132,207,.26); font-size:13px; font-weight:950; letter-spacing:.08em; transition:transform .18s,box-shadow .18s; }
.primary-action:hover { transform:translateY(-2px); box-shadow:0 19px 35px rgba(16,132,207,.32); }
.primary-action:active { transform:translateY(1px) scale(.995); }
.primary-action svg { width:20px; fill:white; }
.action-shine { position:absolute; top:-50%; left:-40%; width:25%; height:200%; background:rgba(255,255,255,.25); transform:rotate(25deg); animation:shine 3.5s infinite; }
@keyframes shine { 55%,100% { left:125%; } }
.mini-ball { width:26px; height:26px; box-shadow:none; }
.mini-ball i { border-width:3px; }
.privacy-note { display:flex; gap:6px; align-items:flex-start; justify-content:center; margin:11px 0 0; color:#8b9aa6; font-size:9px; text-align:center; line-height:1.4; }

.map-panel { position:relative; padding:22px 24px 24px; background:linear-gradient(180deg,#f3fbff,#edf9f4); overflow:hidden; }
.map-panel::before { content:""; position:absolute; width:260px; height:260px; border-radius:50%; background:rgba(64,214,175,.12); right:-90px; top:60px; }
.map-toolbar { position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; color:#6e8795; font-size:10px; font-weight:800; letter-spacing:.04em; }
.live-chip { display:inline-flex; align-items:center; gap:6px; color:#1a8a66; }
.live-chip i { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(66,217,145,.14); }
.phone-frame { position:relative; width:min(300px,88%); aspect-ratio: .56; margin:16px auto 13px; padding:9px; border-radius:41px; background:linear-gradient(145deg,#16364e,#071d30 58%,#315069); box-shadow:0 30px 55px rgba(21,61,86,.34), inset 0 0 0 1px rgba(255,255,255,.24); }
.phone-speaker { position:absolute; z-index:10; top:14px; left:50%; transform:translateX(-50%); width:84px; height:20px; border-radius:0 0 14px 14px; background:#091f31; }
.phone-screen { position:relative; width:100%; height:100%; border-radius:33px; overflow:hidden; background:#a8ebc8; touch-action:none; user-select:none; }
.map-world { position:absolute; inset:-12%; transform:translate(0,0) scale(1); transition:filter .3s; background:
  linear-gradient(24deg, transparent 0 43%, rgba(79,185,126,.25) 44% 54%, transparent 55%),
  repeating-linear-gradient(88deg, transparent 0 53px, rgba(30,126,97,.09) 54px 56px),
  repeating-linear-gradient(0deg, transparent 0 55px, rgba(30,126,97,.08) 56px 58px),
  linear-gradient(145deg,#b8f1cb,#78d5a8);
  transform-origin:center;
}
.water { position:absolute; background:linear-gradient(135deg,#54c9e6,#8ee7ee); opacity:.92; box-shadow:inset 0 0 25px rgba(255,255,255,.3); }
.water-one { width:40%; height:70%; left:-7%; top:-5%; transform:rotate(-11deg); border-radius:0 0 50% 0; }
.water-two { width:44%; height:25%; right:-15%; bottom:7%; transform:rotate(-18deg); border-radius:50%; }
.park { position:absolute; background:rgba(133,224,112,.76); border:2px solid rgba(75,170,89,.25); }
.park-one { width:34%; height:18%; right:9%; top:16%; transform:rotate(12deg); border-radius:30% 20% 35% 25%; }
.park-two { width:31%; height:17%; left:28%; bottom:16%; transform:rotate(-18deg); border-radius:33%; }
.road { position:absolute; z-index:2; background:#e7f6db; border:1px solid rgba(95,181,133,.36); box-shadow:0 0 0 3px rgba(255,255,255,.35); border-radius:999px; }
.major-road-one { width:145%; height:19px; left:-25%; top:48%; transform:rotate(-13deg); }
.major-road-two { width:130%; height:16px; left:-12%; top:29%; transform:rotate(35deg); }
.road-one { width:115%; height:9px; left:-8%; top:68%; transform:rotate(8deg); }
.road-two { width:105%; height:10px; left:10%; top:12%; transform:rotate(78deg); }
.road-three { width:80%; height:8px; right:-8%; top:62%; transform:rotate(62deg); }
.road-four { width:88%; height:8px; left:-11%; top:39%; transform:rotate(18deg); }
.route-line { position:absolute; z-index:4; width:66%; height:38%; left:20%; top:38%; border:4px dashed rgba(30,128,236,.75); border-left-color:transparent; border-bottom-color:transparent; border-radius:50%; transform:rotate(17deg); opacity:0; transition:opacity .25s; }
.map-node { position:absolute; z-index:6; width:28px; height:37px; border:0; background:transparent; filter:drop-shadow(0 5px 5px rgba(28,93,116,.22)); }
.map-node::before { content:""; position:absolute; width:22px; height:22px; border-radius:50% 50% 50% 4px; background:linear-gradient(135deg,#40e5ef,#167ce0); transform:rotate(-45deg); left:3px; top:1px; border:3px solid rgba(255,255,255,.8); }
.map-node span { position:absolute; z-index:2; width:8px; height:8px; border-radius:50%; background:white; left:10px; top:8px; }
.node-one { left:28%; top:20%; }
.node-two { right:20%; top:37%; }
.node-three { left:20%; bottom:20%; }
.gym-node { right:29%; bottom:17%; transform:scale(1.25); }
.gym-node::before { background:linear-gradient(135deg,#ff5b77,#df2b4e); }
.trainer-marker { position:absolute; z-index:12; left:50%; top:51%; width:35px; height:47px; transform:translate(-50%,-50%); transition:left .25s ease,top .25s ease; filter:drop-shadow(0 5px 5px rgba(21,69,96,.28)); }
.trainer-marker .trainer-head { position:absolute; width:13px; height:13px; border-radius:50%; background:#f1b37e; left:11px; top:1px; border:2px solid #2e3448; }
.trainer-marker .trainer-body { position:absolute; width:22px; height:26px; left:6px; top:13px; background:linear-gradient(90deg,#1f67bc 0 50%,#f2f7ff 50%); clip-path:polygon(25% 0,75% 0,100% 36%,74% 50%,68% 100%,52% 100%,50% 56%,48% 100%,30% 100%,25% 50%,0 36%); }
.trainer-marker i { position:absolute; z-index:-1; width:48px; height:18px; left:-7px; bottom:-1px; border-radius:50%; background:rgba(255,255,255,.55); border:2px solid rgba(24,136,230,.5); animation:trainerRing 2s infinite; }
@keyframes trainerRing { 50% { transform:scale(1.22); opacity:.55; } }
.destination-pin { position:absolute; z-index:10; left:72%; top:30%; width:30px; height:42px; opacity:0; transform:translate(-50%,-60%) scale(.4); transition:.25s ease; }
.destination-pin::before { content:""; position:absolute; width:27px; height:27px; border-radius:50% 50% 50% 5px; background:#f05561; border:3px solid white; transform:rotate(-45deg); box-shadow:0 6px 12px rgba(78,58,66,.25); }
.destination-pin span { position:absolute; z-index:2; width:9px; height:9px; border-radius:50%; background:white; left:9px; top:9px; }
.radar-pulse { position:absolute; z-index:3; left:50%; top:51%; border:3px solid rgba(36,151,232,.55); border-radius:50%; transform:translate(-50%,-50%) scale(.2); opacity:0; pointer-events:none; }
.pulse-a { width:140px; height:140px; }
.pulse-b { width:230px; height:230px; }
.walk-dots { position:absolute; z-index:9; left:49%; top:50%; opacity:0; }
.walk-dots i { position:absolute; width:7px; height:11px; border-radius:50%; background:rgba(20,105,210,.75); transform:rotate(25deg); animation:foot 1.3s infinite; }
.walk-dots i:nth-child(1){left:0;top:0}.walk-dots i:nth-child(2){left:18px;top:-15px;animation-delay:.18s}.walk-dots i:nth-child(3){left:33px;top:-34px;animation-delay:.36s}.walk-dots i:nth-child(4){left:51px;top:-52px;animation-delay:.54s}.walk-dots i:nth-child(5){left:70px;top:-70px;animation-delay:.72s}
@keyframes foot { 50% { transform:translateY(-4px) rotate(25deg); opacity:.45; } }
.weather-widget { position:absolute; z-index:20; left:12px; top:28px; display:flex; align-items:center; gap:5px; padding:6px 8px; border-radius:10px; background:rgba(255,255,255,.82); color:#587381; font-size:9px; font-weight:800; backdrop-filter:blur(8px); }
.map-tip { position:absolute; z-index:20; left:50%; top:65px; transform:translateX(-50%); width:max-content; max-width:80%; padding:7px 10px; border-radius:999px; color:white; background:rgba(17,47,70,.75); backdrop-filter:blur(7px); font-size:8px; font-weight:850; letter-spacing:.03em; }
.map-zoom { position:absolute; z-index:20; right:10px; top:52px; display:flex; flex-direction:column; overflow:hidden; border-radius:10px; box-shadow:0 5px 15px rgba(28,70,94,.16); }
.map-zoom button { width:29px; height:29px; border:0; background:rgba(255,255,255,.9); color:#3a6175; font-size:16px; font-weight:800; }
.map-zoom button + button { border-top:1px solid rgba(49,104,134,.12); }
.joystick-control { position:absolute; z-index:22; left:14px; bottom:62px; width:75px; height:75px; border-radius:50%; background:rgba(17,47,70,.28); border:2px solid rgba(255,255,255,.55); box-shadow:inset 0 0 0 8px rgba(255,255,255,.08); touch-action:none; transition:.25s; }
.joystick-knob { position:absolute; left:50%; top:50%; width:34px; height:34px; border-radius:50%; transform:translate(-50%,-50%); background:linear-gradient(145deg,#fff,#bcebf2); border:3px solid rgba(20,105,154,.65); box-shadow:0 7px 14px rgba(15,72,100,.25); }
.scan-button { position:absolute; z-index:22; left:50%; bottom:17px; transform:translateX(-50%); width:58px; height:58px; border-radius:50%; border:5px solid rgba(255,255,255,.9); background:rgba(255,255,255,.92); box-shadow:0 8px 18px rgba(21,70,98,.25); display:grid; place-items:center; }
.scan-button:active { transform:translateX(-50%) scale(.92); }
.scan-ball { width:42px; height:42px; box-shadow:none; }
.scan-button.scanning { animation:scanPop .7s ease; }
@keyframes scanPop { 50% { transform:translateX(-50%) scale(1.16) rotate(12deg); } }
.player-strip { position:absolute; z-index:20; left:10px; bottom:16px; display:flex; align-items:center; gap:7px; }
.player-avatar { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:linear-gradient(145deg,#2b80e3,#4dd6ba); border:3px solid white; color:white; font-size:12px; font-weight:900; box-shadow:0 5px 12px rgba(28,86,111,.22); }
.player-strip > div:nth-child(2) { display:flex; flex-direction:column; padding:4px 28px 4px 2px; color:#1c4258; text-shadow:0 1px 1px white; }
.player-strip strong { max-width:72px; overflow:hidden; text-overflow:ellipsis; font-size:9px; }
.player-strip small { font-size:7px; }
.xp-bar { position:absolute; left:45px; bottom:-2px; width:78px; height:4px; border-radius:999px; background:rgba(255,255,255,.65); overflow:hidden; }
.xp-bar span { display:block; width:65%; height:100%; background:#2ea5ec; }
.preview-status { position:relative; z-index:2; display:flex; align-items:center; gap:10px; padding:12px 13px; border-radius:15px; background:rgba(255,255,255,.82); border:1px solid rgba(35,107,143,.1); box-shadow:0 10px 25px rgba(24,88,115,.1); }
.status-icon { width:34px; height:34px; border-radius:11px; background:linear-gradient(145deg,#dcf4ff,#ddfff1); position:relative; }
.status-icon::before { content:""; position:absolute; width:15px; height:15px; border:3px solid var(--blue); border-radius:50%; left:7px; top:7px; }
.status-icon::after { content:""; position:absolute; width:6px; height:6px; border-radius:50%; background:var(--blue); left:14px; top:14px; }
.preview-status > div:nth-child(2) { display:flex; flex-direction:column; min-width:0; }
.preview-status small { color:#8c9aa5; font-size:8px; font-weight:900; letter-spacing:.08em; }
.preview-status strong { margin-top:2px; font-size:11px; }
.ready-pill { margin-left:auto; padding:6px 8px; border-radius:999px; background:#e9fbf2; color:#2c996c; font-size:8px; font-weight:950; }

.map-panel.feature-teleport .destination-pin { opacity:1; transform:translate(-50%,-60%) scale(1); }
.map-panel:not(.feature-joystick) .joystick-control { opacity:.25; transform:scale(.8); pointer-events:none; }
.map-panel.feature-autowalk .route-line, .map-panel.feature-autowalk .walk-dots { opacity:1; }
.map-panel.feature-autowalk .trainer-marker { animation:autoWalk 5s ease-in-out infinite; }
@keyframes autoWalk { 0%,100% { left:44%; top:59%; } 50% { left:65%; top:35%; } }
.map-panel.feature-gps .radar-pulse { animation:radar 2.3s ease-out infinite; }
.map-panel.feature-gps .pulse-b { animation-delay:.8s; }
@keyframes radar { 0% { opacity:.75; transform:translate(-50%,-50%) scale(.18); } 100% { opacity:0; transform:translate(-50%,-50%) scale(1); } }


.chat-card { display:flex; flex-direction:column; min-height:760px; overflow:hidden; }
.chat-header { display:flex; align-items:center; justify-content:space-between; padding:23px 20px 16px; border-bottom:1px solid var(--line); }
.chat-header > div { display:flex; align-items:center; gap:10px; }
.live-dot { position:relative; width:11px; height:11px; border-radius:50%; background:var(--green); box-shadow:0 0 0 5px rgba(66,217,145,.14); }
.chat-header h2 { margin:0; font-size:18px; letter-spacing:-.03em; }
.chat-header p { margin:2px 0 0; color:#8394a2; font-size:10px; }
.chat-header p strong { color:#2c9c6f; }
.chat-pause { width:34px; height:34px; border:1px solid var(--line); border-radius:11px; background:#f7fbfd; color:#60798c; display:grid; place-items:center; }
.chat-pause svg { width:16px; fill:currentColor; }
.chat-pause[aria-pressed="true"] svg { transform:rotate(90deg); }
.simulation-label { margin:12px 18px 0; padding:7px 9px; border-radius:9px; background:#fff7dc; color:#9a7417; text-align:center; font-size:8px; font-weight:950; letter-spacing:.12em; }
.chat-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin:10px 16px 4px; padding:4px; border-radius:12px; background:#eef5f8; }
.chat-tabs button { padding:7px 4px; border:0; border-radius:9px; background:transparent; color:#7c8f9f; font-size:9px; font-weight:850; }
.chat-tabs button.active { background:white; color:var(--blue-deep); box-shadow:0 4px 10px rgba(30,87,120,.08); }
.chat-feed { flex:1; min-height:0; max-height:620px; padding:8px 16px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#c7dae4 transparent; }
.chat-message { display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:9px; padding:9px 0; border-bottom:1px solid rgba(30,93,127,.07); animation:messageIn .35s ease; }
@keyframes messageIn { from { opacity:0; transform:translateY(8px); } }
.chat-avatar { display:grid; place-items:center; width:34px; height:34px; border-radius:12px; color:white; font-size:10px; font-weight:950; box-shadow:inset 0 0 0 2px rgba(255,255,255,.25); }
.chat-body { min-width:0; }
.chat-meta { display:flex; align-items:center; gap:6px; margin-bottom:2px; }
.chat-meta strong { max-width:120px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:10px; }
.chat-badge { padding:2px 5px; border-radius:999px; background:#e9f8ff; color:#278fc9; font-size:7px; font-weight:950; text-transform:uppercase; }
.chat-message p { margin:0; color:#546b7d; font-size:10px; line-height:1.42; word-break:break-word; }
.chat-time { color:#a4afb9; font-size:7px; padding-top:3px; }
.chat-composer { display:flex; align-items:center; gap:8px; padding:12px 15px; border-top:1px solid var(--line); background:rgba(248,252,253,.9); }
.composer-avatar { display:grid; place-items:center; width:29px; height:29px; flex:0 0 auto; border-radius:10px; color:white; background:linear-gradient(145deg,#1b83dc,#39c997); font-size:9px; font-weight:900; }
.chat-composer button { flex:1; height:34px; border:1px solid rgba(29,87,127,.1); border-radius:11px; background:white; color:#9aa8b2; text-align:left; padding:0 11px; font-size:9px; }
.chat-composer span { font-size:16px; }

.feature-showcase { padding:90px 40px 100px; text-align:center; }
.feature-showcase h2 { margin:10px auto 34px; max-width:720px; font-size:clamp(34px,4vw,54px); line-height:1; letter-spacing:-.055em; }
.showcase-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.showcase-grid article { position:relative; padding:30px 28px; border-radius:22px; background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.94); box-shadow:0 16px 45px rgba(24,83,112,.09); text-align:left; overflow:hidden; }
.showcase-grid article > span { position:absolute; right:16px; top:8px; color:rgba(19,143,234,.08); font-size:70px; font-weight:1000; line-height:1; }
.showcase-grid h3 { position:relative; margin:0 0 8px; font-size:17px; }
.showcase-grid p { position:relative; margin:0; color:#718493; line-height:1.6; font-size:12px; }

footer { width:min(1440px,calc(100% - 40px)); margin:0 auto 30px; display:flex; justify-content:space-between; align-items:center; gap:30px; padding:20px 24px; border-radius:20px; background:#102c45; color:#b9d0de; }
.footer-brand { display:flex; align-items:center; gap:9px; color:white; white-space:nowrap; }
.footer-brand .mini-ball { width:28px; height:28px; }
footer p { max-width:950px; margin:0; font-size:10px; line-height:1.55; text-align:right; }

.modal-backdrop { position:fixed; z-index:1000; inset:0; display:grid; place-items:center; padding:20px; background:rgba(7,25,39,.72); backdrop-filter:blur(12px); }
.modal-backdrop[hidden] { display:none; }
.activation-modal, .locker-modal { position:relative; width:min(700px,100%); max-height:min(760px,calc(100vh - 40px)); overflow:auto; padding:30px; border-radius:28px; background:linear-gradient(180deg,#fff,#f4fbff); box-shadow:0 30px 100px rgba(0,0,0,.38); animation:modalIn .32s cubic-bezier(.2,.85,.3,1.15); }
@keyframes modalIn { from { opacity:0; transform:translateY(18px) scale(.96); } }
.modal-close { position:absolute; right:17px; top:16px; width:36px; height:36px; border:1px solid var(--line); border-radius:12px; color:#587183; background:white; font-size:24px; line-height:1; }
.activation-head { display:flex; align-items:center; gap:17px; padding-right:40px; }
.activation-ball { position:relative; flex:0 0 auto; width:60px; height:60px; border-radius:50%; overflow:hidden; background:linear-gradient(#f0525b 0 46%,#172438 46% 55%,#fff 55%); box-shadow:0 12px 24px rgba(35,89,120,.18); animation:spinBall 2.6s ease-in-out infinite; }
.activation-ball::before { content:""; position:absolute; left:0; right:0; top:46%; height:9%; background:#172438; }
.activation-ball span { position:absolute; width:22px; height:22px; border:5px solid #172438; border-radius:50%; background:white; left:50%; top:50%; transform:translate(-50%,-50%); }
@keyframes spinBall { 50% { transform:rotate(180deg) scale(1.05); } }
.activation-head h2 { margin:5px 0 4px; font-size:25px; letter-spacing:-.04em; }
.activation-head p { margin:0; color:#758794; font-size:12px; }
.progress-wrap { margin:28px 0 17px; }
.progress-meta { display:flex; justify-content:space-between; color:#6f8493; font-size:10px; font-weight:800; }
.progress-meta strong { color:var(--blue-deep); }
.progress-track { height:11px; margin-top:8px; border-radius:999px; background:#dceaf0; overflow:hidden; box-shadow:inset 0 2px 4px rgba(33,81,104,.08); }
.progress-track span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#118bea,#33cfe2,#43d790); box-shadow:0 0 14px rgba(37,198,203,.55); transition:width .45s ease; }
.console-window { overflow:hidden; border-radius:17px; background:#0d2233; box-shadow:0 14px 35px rgba(8,31,47,.24); }
.console-top { height:34px; display:flex; align-items:center; gap:6px; padding:0 12px; background:#142d41; border-bottom:1px solid rgba(255,255,255,.06); }
.console-top span { width:9px; height:9px; border-radius:50%; }
.console-top span:nth-child(1){background:#ff6470}.console-top span:nth-child(2){background:#ffc857}.console-top span:nth-child(3){background:#4bd892}
.console-top em { margin-left:7px; color:#6f8da2; font-style:normal; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:9px; }
.console-output { height:280px; padding:15px; overflow-y:auto; color:#aee9d0; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; line-height:1.75; }
.console-line { display:flex; gap:10px; animation:lineIn .2s ease; }
.console-line .time { color:#54768d; }
.console-line .tag { color:#4ec5ff; }
.console-line.warn .tag { color:#ffd05d; }
.console-line.success .tag { color:#4ee39a; }
@keyframes lineIn { from { opacity:0; transform:translateX(-7px); } }
/* Completion controls stay fully hidden until the console reaches 100%. */
.activation-summary[hidden], .verification-button[hidden] { display:none !important; }
.activation-summary { display:flex; align-items:center; gap:13px; margin-top:17px; padding:15px; border-radius:15px; background:#eafbf2; border:1px solid rgba(42,171,113,.16); animation:completionCardIn .52s cubic-bezier(.2,.8,.2,1) both; }
.success-ring { display:grid; place-items:center; width:38px; height:38px; flex:0 0 auto; border-radius:50%; color:white; background:var(--green); font-weight:900; box-shadow:0 0 0 6px rgba(66,217,145,.12); animation:successRingIn .5s .12s cubic-bezier(.2,.9,.2,1.25) both; }
.activation-summary strong { font-size:12px; }
.activation-summary p { margin:3px 0 0; color:#628373; font-size:9px; line-height:1.4; }
.verification-button, .secondary-action { width:100%; min-height:50px; display:flex; align-items:center; justify-content:center; gap:9px; margin-top:14px; border:0; border-radius:14px; color:white; background:linear-gradient(100deg,#0876df,#1da9e7 55%,#36c992); font-weight:900; font-size:11px; letter-spacing:.04em; box-shadow:0 12px 24px rgba(18,135,199,.2); }
.verification-button { animation:completionButtonIn .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes completionCardIn { from { opacity:0; transform:translateY(14px) scale(.985); filter:blur(3px); } to { opacity:1; transform:none; filter:none; } }
@keyframes completionButtonIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes successRingIn { from { opacity:0; transform:scale(.45) rotate(-18deg); } to { opacity:1; transform:scale(1) rotate(0); } }
.verification-button svg { width:18px; fill:white; }
.locker-modal { width:min(520px,100%); text-align:center; }
.locker-shield { display:grid; place-items:center; width:64px; height:64px; margin:4px auto 14px; border-radius:22px; color:white; background:linear-gradient(145deg,#158ceb,#3bcf96); font-size:28px; font-weight:950; box-shadow:0 14px 30px rgba(17,147,186,.23); }
.locker-modal h2 { margin:6px 0 10px; font-size:28px; letter-spacing:-.04em; }
.locker-modal > p { margin:0 auto 18px; max-width:420px; color:#6f8190; font-size:11px; line-height:1.6; }
.locker-placeholder { min-height:190px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; border:2px dashed rgba(21,130,199,.28); border-radius:20px; background:linear-gradient(135deg,#eef9ff,#effff7); }
.loader-grid { display:grid; grid-template-columns:repeat(3,9px); gap:5px; margin-bottom:15px; }
.loader-grid i { width:9px; height:9px; border-radius:3px; background:var(--blue); animation:gridPulse 1.4s infinite; }
.loader-grid i:nth-child(2n){animation-delay:.15s}.loader-grid i:nth-child(3n){animation-delay:.3s}.loader-grid i:nth-child(5){animation-delay:.45s}
@keyframes gridPulse { 50% { opacity:.25; transform:scale(.75); } }
.locker-placeholder strong { font-size:13px; }
.locker-placeholder small { margin-top:5px; color:#7d909d; font-size:9px; }
.secondary-action { background:#173a52; box-shadow:none; }
.toast { position:fixed; z-index:1200; left:50%; bottom:24px; transform:translate(-50%,30px); opacity:0; pointer-events:none; padding:11px 15px; border-radius:12px; background:#102f46; color:white; box-shadow:0 12px 35px rgba(7,29,43,.28); font-size:10px; font-weight:800; transition:.25s ease; }
.toast.show { transform:translate(-50%,0); opacity:1; }

@media (max-width: 1180px) {
  .app-layout { grid-template-columns:1fr; }
  .chat-card { min-height:540px; }
  .chat-feed { max-height:390px; }
}
@media (max-width: 900px) {
  .site-header { grid-template-columns:1fr auto; }
  .nav-links { display:none; }
  .hero { grid-template-columns:1fr; padding:50px 35px; text-align:center; }
  .hero p { margin-inline:auto; }
  .hero-badges { justify-content:center; }
  .hero-orbit { min-height:260px; margin-top:20px; }
  .builder-grid { grid-template-columns:1fr; }
  .configuration-panel { border-right:0; border-bottom:1px solid var(--line); }
  .map-panel { min-height:720px; }
  .showcase-grid { grid-template-columns:1fr; }
  footer { flex-direction:column; text-align:center; }
  footer p { text-align:center; }
}
@media (max-width: 600px) {
  .prototype-ribbon { font-size:9px; }
  .site-header, main, footer { width:min(100% - 20px,1440px); }
  .site-header { height:74px; }
  .brand small, .sound-toggle span { display:none; }
  .hero { min-height:auto; padding:40px 20px 30px; border-radius:24px; }
  .hero h1 { font-size:43px; }
  .hero p { font-size:14px; }
  .hero-badges { gap:7px; }
  .hero-badges span { font-size:9px; }
  .hero-orbit { transform:scale(.86); margin:-5px 0 -15px; }
  .app-layout { gap:14px; margin-top:14px; }
  .builder-card, .chat-card { border-radius:22px; }
  .builder-topbar { padding:20px 18px; }
  .server-status { display:none; }
  .configuration-panel { padding:22px 18px; }
  .feature-grid { grid-template-columns:1fr; }
  .feature-card { min-height:69px; }
  .map-panel { min-height:630px; padding-inline:14px; }
  .phone-frame { width:min(292px,93%); }
  .feature-showcase { padding:65px 6px 70px; }
  .feature-showcase h2 { font-size:38px; }
  .activation-modal, .locker-modal { padding:24px 18px; border-radius:22px; }
  .activation-head { align-items:flex-start; }
  .activation-ball { width:49px; height:49px; }
  .activation-head h2 { font-size:20px; }
  .console-output { height:240px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.001ms !important; }
}


/* ---------- Theme toggle, multi-select flow and preview CTA ---------- */
.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
}
.theme-toggle,
.sound-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.75);
  color: #406078;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(40,90,120,.08);
  transition: transform .18s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.theme-toggle:hover,
.sound-toggle:hover { transform: translateY(-1px); }
.theme-toggle svg { width: 17px; height: 17px; fill: currentColor; }
.theme-glyph { width: 18px; height: 18px; display: grid; place-items: center; }
.theme-glyph svg { grid-area: 1 / 1; }
.sun-icon { display: none; }
html[data-theme="dark"] .moon-icon { display: none; }
html[data-theme="dark"] .sun-icon { display: block; }

.select-ring {
  display: grid;
  place-items: center;
  border-radius: 6px;
  transition: .18s ease;
}
.select-ring::after {
  content: "✓";
  color: white;
  font-size: 9px;
  line-height: 1;
  font-weight: 1000;
  opacity: 0;
  transform: scale(.55);
  transition: .18s ease;
}
.feature-card.active .select-ring {
  border: 2px solid var(--blue);
  background: var(--blue);
  box-shadow: 0 0 0 3px rgba(19,143,234,.12);
}
.feature-card.active .select-ring::after { opacity: 1; transform: scale(1); }

.confirm-action { background: linear-gradient(100deg,#153f69,#147fc6 54%,#27b9b4); }
.confirm-check {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.24);
  font-size: 13px;
}
.primary-action:disabled {
  cursor: not-allowed;
  filter: grayscale(.45);
  opacity: .5;
  transform: none;
  box-shadow: none;
}
.primary-action:disabled .action-shine { display: none; }

.preview-action-zone {
  position: relative;
  z-index: 3;
  margin-top: 11px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(27,112,160,.12);
  background: rgba(255,255,255,.7);
  box-shadow: 0 12px 28px rgba(24,88,115,.09);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease, background .25s ease;
}
.preview-action-copy { display: flex; flex-direction: column; gap: 3px; }
.preview-step { color: var(--blue); font-size: 8px; font-weight: 1000; letter-spacing: .14em; }
.preview-action-copy strong { font-size: 12px; }
.preview-action-copy small { color: #8495a2; font-size: 9px; line-height: 1.4; }
.preview-get-action { margin-top: 11px; height: 52px; }
.map-panel.confirmed .preview-action-zone {
  border-color: rgba(52,210,145,.42);
  background: rgba(239,255,247,.86);
  box-shadow: 0 16px 34px rgba(39,181,128,.14);
}
.map-panel.confirmed .ready-pill { background: #dff9eb; color: #1d8e60; }
.map-panel.confirm-flash .phone-frame { animation: previewConfirmPulse .75s ease; }
@keyframes previewConfirmPulse {
  40% { transform: scale(1.018); box-shadow: 0 34px 70px rgba(28,139,184,.42), inset 0 0 0 1px rgba(255,255,255,.3); }
}

/* Keep all selected modules visible together. */
.map-panel.feature-teleport .destination-pin { opacity: 1; transform: translate(-50%,-60%) scale(1); }
.map-panel.feature-autowalk .route-line,
.map-panel.feature-autowalk .walk-dots { opacity: 1; }
.map-panel.feature-gps .radar-pulse { animation: radar 2.3s ease-out infinite; }
.map-panel.feature-gps .pulse-b { animation-delay: .8s; }
.map-panel:not(.feature-joystick) .joystick-control { opacity: .24; transform: scale(.82); pointer-events: none; }

/* ---------- Pokémon GO night-map inspired theme ---------- */
html[data-theme="dark"] {
  --ink: #edf8ff;
  --muted: #9cb4c8;
  --blue: #45b7ff;
  --blue-deep: #70c9ff;
  --cyan: #47e4ff;
  --green: #55e5a5;
  --panel: rgba(11,31,52,.93);
  --line: rgba(115,191,239,.15);
  --shadow: 0 28px 85px rgba(0,8,20,.48);
  color-scheme: dark;
}
html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 12% 10%, rgba(34,121,196,.28), transparent 30%),
    radial-gradient(circle at 86% 4%, rgba(45,211,176,.14), transparent 24%),
    radial-gradient(circle at 54% 66%, rgba(28,84,139,.2), transparent 34%),
    linear-gradient(180deg,#061423 0%,#081c31 46%,#071522 100%);
}
html[data-theme="dark"] .ambient-one { background:#147bd1; opacity:.25; }
html[data-theme="dark"] .ambient-two { background:#19c49a; opacity:.18; }
html[data-theme="dark"] .prototype-ribbon { background:#030d18; color:#bfe9ff; border-bottom:1px solid rgba(81,175,234,.14); }
html[data-theme="dark"] .brand-copy strong { color:#75c8ff; }
html[data-theme="dark"] .brand-copy em { color:#55e0eb; }
html[data-theme="dark"] .brand small { background:rgba(70,180,255,.13); color:#8dd3ff; }
html[data-theme="dark"] .nav-links a { color:#9eb7c9; }
html[data-theme="dark"] .nav-links a:hover { color:#68c9ff; }
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .sound-toggle {
  background:rgba(12,35,57,.88);
  color:#b9d7e9;
  border-color:rgba(100,190,243,.18);
  box-shadow:0 10px 25px rgba(0,7,16,.3);
}
html[data-theme="dark"] .hero {
  background:
    linear-gradient(115deg,rgba(11,36,61,.94),rgba(8,27,48,.9)),
    repeating-linear-gradient(35deg,transparent 0 28px,rgba(76,194,238,.04) 29px 31px);
  border-color:rgba(102,190,239,.12);
}
html[data-theme="dark"] .hero::before,
html[data-theme="dark"] .hero::after { background:rgba(49,176,220,.08); }
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .section-kicker { color:#62dfbd; }
html[data-theme="dark"] .hero h1 span { background:linear-gradient(90deg,#67c5ff,#53e4ef 52%,#65e3ac); -webkit-background-clip:text; background-clip:text; color:transparent; }
html[data-theme="dark"] .hero-badges span,
html[data-theme="dark"] .orbit-chip {
  background:rgba(12,39,62,.86);
  color:#c1d9e7;
  border-color:rgba(86,182,235,.14);
  box-shadow:0 12px 30px rgba(0,8,18,.28);
}
html[data-theme="dark"] .orbit-ring { border-color:rgba(91,197,255,.26); }
html[data-theme="dark"] .builder-card,
html[data-theme="dark"] .chat-card { border-color:rgba(93,180,231,.13); }
html[data-theme="dark"] .builder-topbar { background:rgba(6,21,37,.25); }
html[data-theme="dark"] .server-status { background:rgba(30,144,101,.14); color:#74e3b2; }
html[data-theme="dark"] .section-heading .number,
html[data-theme="dark"] .feature-icon,
html[data-theme="dark"] .status-icon {
  background:linear-gradient(145deg,rgba(34,112,173,.3),rgba(31,154,130,.22));
}
html[data-theme="dark"] .section-heading p,
html[data-theme="dark"] .feature-copy small,
html[data-theme="dark"] .device-tab small,
html[data-theme="dark"] .input-field > small { color:#829bad; }
html[data-theme="dark"] .input-field > span,
html[data-theme="dark"] .field-label { color:#b4cad8; }
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .device-tab,
html[data-theme="dark"] .input-shell input,
html[data-theme="dark"] .chat-pause {
  background:#0c2943;
  border-color:rgba(99,184,234,.14);
  color:#e2f2fb;
}
html[data-theme="dark"] .feature-card:hover { border-color:rgba(72,187,255,.46); box-shadow:0 12px 26px rgba(0,8,20,.28); }
html[data-theme="dark"] .feature-card.active,
html[data-theme="dark"] .device-tab.active {
  background:linear-gradient(135deg,rgba(22,91,146,.72),rgba(16,91,84,.5));
  border-color:#4bbcff;
  color:#eaf8ff;
  box-shadow:0 10px 27px rgba(10,116,183,.2);
}
html[data-theme="dark"] .select-ring { border-color:#547087; }
html[data-theme="dark"] .input-shell svg { fill:#7ba5c1; }
html[data-theme="dark"] .input-shell input::placeholder { color:#69879b; }
html[data-theme="dark"] .privacy-note { color:#7691a4; }
html[data-theme="dark"] .map-panel {
  background:
    radial-gradient(circle at 72% 17%,rgba(41,181,177,.1),transparent 32%),
    linear-gradient(180deg,#0a2943,#081e33);
}
html[data-theme="dark"] .map-panel::before { background:rgba(34,186,158,.08); }
html[data-theme="dark"] .map-toolbar { color:#8fb2c5; }
html[data-theme="dark"] .live-chip { color:#70e5b5; }
html[data-theme="dark"] .phone-frame { background:linear-gradient(145deg,#31516b,#020912 56%,#163c5e); box-shadow:0 30px 64px rgba(0,4,12,.62), inset 0 0 0 1px rgba(140,207,244,.18); }
html[data-theme="dark"] .phone-screen { background:#173c54; }
html[data-theme="dark"] .map-world {
  background:
    linear-gradient(24deg,transparent 0 43%,rgba(28,91,113,.42) 44% 54%,transparent 55%),
    repeating-linear-gradient(88deg,transparent 0 53px,rgba(54,130,158,.12) 54px 56px),
    repeating-linear-gradient(0deg,transparent 0 55px,rgba(54,130,158,.11) 56px 58px),
    linear-gradient(145deg,#17485f,#0c2c46);
}
html[data-theme="dark"] .water { background:linear-gradient(135deg,#145a88,#2388a4); box-shadow:inset 0 0 28px rgba(92,216,255,.15); }
html[data-theme="dark"] .park { background:rgba(35,101,88,.72); border-color:rgba(68,182,132,.22); }
html[data-theme="dark"] .road { background:#284e60; border-color:rgba(94,178,197,.22); box-shadow:0 0 0 3px rgba(5,21,34,.34); }
html[data-theme="dark"] .weather-widget,
html[data-theme="dark"] .map-tip,
html[data-theme="dark"] .map-zoom,
html[data-theme="dark"] .joystick-control,
html[data-theme="dark"] .preview-status,
html[data-theme="dark"] .preview-action-zone {
  background:rgba(7,25,42,.82);
  color:#d7ebf6;
  border-color:rgba(98,187,235,.15);
  box-shadow:0 10px 28px rgba(0,7,16,.34);
}
html[data-theme="dark"] .map-zoom button { color:#bad8e8; border-color:rgba(108,189,232,.12); }
html[data-theme="dark"] .player-strip > div:nth-child(2) { color:#e7f7ff; text-shadow:0 1px 2px #06101a; }
html[data-theme="dark"] .xp-bar { background:rgba(13,35,53,.72); }
html[data-theme="dark"] .preview-status small,
html[data-theme="dark"] .preview-action-copy small { color:#809caf; }
html[data-theme="dark"] .map-panel.confirmed .preview-action-zone { background:rgba(14,65,60,.72); border-color:rgba(78,225,170,.34); }
html[data-theme="dark"] .ready-pill { background:rgba(51,189,132,.15); color:#76e6b4; }
html[data-theme="dark"] .simulation-label { background:rgba(19,82,109,.22); color:#79d1ef; }
html[data-theme="dark"] .chat-tabs { background:#071d31; }
html[data-theme="dark"] .chat-tabs button { color:#829eb0; }
html[data-theme="dark"] .chat-tabs button.active { background:#123650; color:#8fd2ff; box-shadow:0 4px 12px rgba(0,7,16,.28); }
html[data-theme="dark"] .chat-message { border-bottom-color:rgba(94,177,221,.08); }
html[data-theme="dark"] .chat-message p { color:#a9c1d0; }
html[data-theme="dark"] .chat-badge { background:rgba(35,143,199,.16); color:#69c8f6; }
html[data-theme="dark"] .chat-time { color:#617d91; }
html[data-theme="dark"] .chat-composer { background:rgba(5,20,34,.82); }
html[data-theme="dark"] .chat-composer button { background:#0d2c47; color:#7793a5; border-color:rgba(90,177,224,.12); }
html[data-theme="dark"] .showcase-grid article {
  background:rgba(10,31,51,.78);
  border-color:rgba(91,180,229,.12);
  box-shadow:0 18px 48px rgba(0,7,16,.28);
}
html[data-theme="dark"] .showcase-grid p { color:#91aabb; }
html[data-theme="dark"] .activation-modal,
html[data-theme="dark"] .locker-modal { background:linear-gradient(180deg,#0d2a44,#081b2d); color:#edf8ff; }
html[data-theme="dark"] .modal-close { background:#102f4a; color:#b8d2e2; }
html[data-theme="dark"] .activation-head p,
html[data-theme="dark"] .locker-modal > p { color:#91aabd; }
html[data-theme="dark"] .progress-track { background:#14344c; }
html[data-theme="dark"] .activation-summary { background:rgba(25,116,81,.2); border-color:rgba(74,220,156,.2); }
html[data-theme="dark"] .activation-summary p { color:#8ebaa5; }
html[data-theme="dark"] .locker-placeholder { background:linear-gradient(135deg,rgba(18,71,109,.54),rgba(13,75,64,.44)); border-color:rgba(77,192,242,.25); }

@media (max-width: 600px) {
  .header-actions { gap: 6px; }
  .theme-toggle,
  .sound-toggle { width: 40px; height: 40px; padding: 0; }
  .theme-label,
  .sound-toggle span { display: none; }
  .preview-action-zone { padding: 12px; }
}

/* ---------- Dark-mode contrast and action hierarchy refinement ----------
   Cyan = selected, amber = next action, green = valid/success. */
html[data-theme="dark"] {
  --night-canvas: #061524;
  --night-panel: #081e32;
  --night-surface: #0b2942;
  --night-surface-raised: #103650;
  --night-border: rgba(117, 194, 236, .22);
  --night-selected: #50c8ff;
  --night-amber: #ffc83d;
  --night-amber-deep: #ff9f2f;
}

html[data-theme="dark"] .builder-card {
  background: linear-gradient(180deg, rgba(8, 29, 48, .98), rgba(6, 22, 37, .97));
  border-color: rgba(104, 188, 235, .2);
  box-shadow: 0 30px 90px rgba(0, 5, 14, .58), inset 0 1px 0 rgba(132, 211, 255, .035);
}

html[data-theme="dark"] .builder-topbar {
  background: linear-gradient(90deg, rgba(6, 22, 38, .98), rgba(9, 35, 55, .92));
  border-bottom-color: rgba(107, 192, 238, .18);
}

html[data-theme="dark"] .configuration-panel {
  background:
    radial-gradient(circle at 8% 8%, rgba(42, 149, 216, .08), transparent 27%),
    linear-gradient(180deg, rgba(7, 27, 45, .92), rgba(6, 23, 39, .96));
  border-right-color: rgba(105, 188, 234, .17);
}

html[data-theme="dark"] .section-heading .number {
  background: linear-gradient(145deg, #114a70, #0d3a58);
  color: #65d0ff;
  border: 1px solid rgba(92, 202, 255, .18);
  box-shadow: inset 0 1px 0 rgba(167, 225, 255, .08);
}

html[data-theme="dark"] .section-heading h3 { color: #f3f9fd; }
html[data-theme="dark"] .section-heading p { color: #8fa9bb; }

html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .device-tab {
  background: linear-gradient(145deg, #0a263e, #0a2237);
  border-color: rgba(105, 181, 224, .2);
  box-shadow: inset 0 1px 0 rgba(150, 216, 255, .025);
}

html[data-theme="dark"] .feature-card:hover,
html[data-theme="dark"] .device-tab:hover {
  background: linear-gradient(145deg, #0e304b, #0b2941);
  border-color: rgba(78, 194, 255, .48);
}

html[data-theme="dark"] .feature-card.active {
  background:
    linear-gradient(90deg, rgba(32, 112, 166, .58), rgba(15, 68, 88, .72)),
    #10344f;
  border-color: var(--night-selected);
  box-shadow:
    inset 4px 0 0 var(--night-selected),
    inset 0 1px 0 rgba(190, 235, 255, .09),
    0 13px 30px rgba(0, 8, 20, .34),
    0 0 0 1px rgba(80, 200, 255, .08);
}

html[data-theme="dark"] .feature-card.active .feature-copy strong { color: #ffffff; }
html[data-theme="dark"] .feature-card.active .feature-copy small { color: #a8c7d9; }

html[data-theme="dark"] .feature-icon {
  background: linear-gradient(145deg, #113a57, #0d334d);
  color: #78cfff;
  border: 1px solid rgba(98, 193, 243, .08);
}

html[data-theme="dark"] .feature-card.active .feature-icon {
  background: linear-gradient(145deg, #17608f, #11607c);
  color: #8cddff;
  border-color: rgba(120, 220, 255, .2);
  box-shadow: 0 8px 20px rgba(0, 10, 25, .2);
}

html[data-theme="dark"] .select-ring {
  background: rgba(3, 15, 27, .3);
  border-color: #587489;
}

html[data-theme="dark"] .feature-card.active .select-ring {
  background: linear-gradient(145deg, #65d7ff, #2aaeff);
  border-color: #92e4ff;
  box-shadow: 0 0 0 5px rgba(61, 183, 244, .14), 0 4px 12px rgba(0, 12, 28, .36);
}

html[data-theme="dark"] .input-shell input {
  background: #0b2942;
  border-color: rgba(111, 190, 234, .23);
  box-shadow: inset 0 1px 0 rgba(152, 216, 252, .025);
}

html[data-theme="dark"] .input-shell input:focus {
  background: #0d304b;
  border-color: #4fc7ff;
  box-shadow: 0 0 0 4px rgba(68, 186, 244, .13), inset 0 1px 0 rgba(168, 226, 255, .04);
}

html[data-theme="dark"] .input-field.valid .input-shell input {
  border-color: rgba(84, 226, 166, .46);
}

html[data-theme="dark"] .device-tab.active {
  background: linear-gradient(135deg, rgba(27, 105, 160, .9), rgba(13, 73, 86, .9));
  border-color: #58caff;
  color: #f3fbff;
  box-shadow: inset 0 1px 0 rgba(192, 237, 255, .1), 0 12px 28px rgba(0, 9, 22, .3);
}

html[data-theme="dark"] .device-tab.active small { color: #a9cbdb; }

/* Warm CTA deliberately separates navigation/action from blue selection states. */
html[data-theme="dark"] .confirm-action {
  color: #082239;
  background: linear-gradient(105deg, #ffdb55 0%, var(--night-amber) 38%, var(--night-amber-deep) 100%);
  border: 1px solid rgba(255, 226, 123, .62);
  box-shadow:
    0 18px 38px rgba(255, 166, 43, .25),
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 -2px 0 rgba(155, 83, 12, .15);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .2);
}

html[data-theme="dark"] .confirm-action:hover {
  box-shadow:
    0 22px 44px rgba(255, 166, 43, .33),
    0 0 0 4px rgba(255, 195, 52, .1),
    inset 0 1px 0 rgba(255, 255, 255, .5);
}

html[data-theme="dark"] .confirm-action .confirm-check {
  color: #082239;
  background: rgba(8, 34, 57, .1);
  border-color: rgba(8, 34, 57, .25);
}

html[data-theme="dark"] .confirm-action svg { fill: #082239; }

/* Keep the animated shine subtle instead of becoming a large color block. */
html[data-theme="dark"] .confirm-action .action-shine {
  width: 15%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  filter: blur(1px);
}

html[data-theme="dark"] .privacy-note {
  color: #7894a8;
  border-top: 1px solid rgba(106, 184, 227, .1);
  padding-top: 11px;
}

html[data-theme="dark"] .map-panel {
  border-left: 1px solid rgba(110, 191, 235, .08);
}

html[data-theme="dark"] .preview-action-zone {
  background: linear-gradient(145deg, rgba(8, 28, 46, .94), rgba(9, 37, 55, .9));
  border-color: rgba(102, 190, 237, .23);
}

html[data-theme="dark"] .map-panel.confirmed .preview-action-zone {
  background: linear-gradient(145deg, rgba(10, 62, 58, .94), rgba(8, 42, 50, .94));
  border-color: rgba(86, 230, 174, .48);
  box-shadow: 0 16px 36px rgba(0, 9, 19, .36), 0 0 0 1px rgba(86, 230, 174, .08);
}

html[data-theme="dark"] .preview-get-action:not(:disabled) {
  background: linear-gradient(100deg, #167ee5, #24aee6 48%, #42d596);
  border: 1px solid rgba(113, 225, 242, .2);
  box-shadow: 0 17px 36px rgba(17, 137, 210, .28);
}

html[data-theme="dark"] .primary-action:disabled {
  background: #183449;
  color: #718b9d;
  border: 1px solid rgba(105, 178, 216, .1);
  opacity: .62;
  filter: none;
}

html[data-theme="dark"] .primary-action:disabled svg { fill: #718b9d; }

@media (max-width: 900px) {
  html[data-theme="dark"] .configuration-panel {
    border-right: 0;
    border-bottom-color: rgba(105, 188, 234, .17);
  }
  html[data-theme="dark"] .map-panel { border-left: 0; }
}

/* =========================================================
   SERVER-BACKED OGADS OFFER INTERFACE
   ========================================================= */
.offers-backdrop { padding:18px; }
.activation-modal[hidden], .locker-modal[hidden] { display:none !important; }
.offers-modal {
  width:min(900px,100%);
  max-height:calc(100vh - 36px);
  padding:26px;
  text-align:left;
  overflow:auto;
  overscroll-behavior:contain;
}
.offers-head { display:flex; align-items:center; gap:16px; padding-right:42px; }
.offers-head .locker-shield { flex:0 0 auto; width:62px; height:62px; margin:0; border-radius:21px; }
.offers-head .locker-shield svg { width:32px; fill:#fff; }
.offers-head h2 { margin:4px 0 5px; font-size:28px; line-height:1.05; }
.offers-head p { max-width:620px; margin:0; color:#6f8190; font-size:11px; line-height:1.55; }

.offer-session-bar {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:stretch;
  gap:12px;
  margin-top:20px;
  padding:12px;
  border:1px solid rgba(36,130,190,.14);
  border-radius:20px;
  background:linear-gradient(135deg,#edf8ff,#f2fff9);
}
.offer-timer-card,
.offer-priority {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:58px;
  padding:10px 14px;
  border:1px solid rgba(39,130,186,.13);
  border-radius:15px;
  background:rgba(255,255,255,.83);
}
.offer-timer-card { min-width:154px; transition:.25s ease; }
.timer-icon { display:grid; place-items:center; width:35px; height:35px; border-radius:12px; color:#fff; background:linear-gradient(145deg,#168ce9,#28bdc8); font-size:21px; font-weight:900; }
.offer-timer-card small,
.offer-priority small { display:block; margin-bottom:3px; color:#78909f; font-size:7px; font-weight:950; letter-spacing:.15em; }
.offer-timer-card strong { color:#173146; font-size:20px; font-variant-numeric:tabular-nums; letter-spacing:.06em; }
.offer-timer-card.warning { border-color:rgba(239,166,42,.42); background:#fff9e9; }
.offer-timer-card.warning .timer-icon { background:linear-gradient(145deg,#f0aa2c,#ef7d30); }
.offer-timer-card.warning strong { color:#bd6d18; }
.offer-timer-card.expired { border-color:rgba(218,77,84,.35); background:#fff1f2; }
.offer-timer-card.expired .timer-icon { background:linear-gradient(145deg,#e85c65,#bd3545); }
.offer-timer-card.expired strong { color:#bd3545; }
.offer-priority { justify-content:center; flex-direction:column; gap:5px; }
.offer-priority > div { display:flex; align-items:center; justify-content:center; gap:7px; }
.offer-priority i { color:#8fa8b7; font-style:normal; font-size:11px; }
.type-chip { display:inline-flex; align-items:center; justify-content:center; min-width:38px; min-height:21px; padding:3px 8px; border-radius:999px; font-size:7px; font-weight:950; letter-spacing:.09em; }
.type-chip.cpi { color:#08784f; background:#dff8eb; border:1px solid rgba(28,172,111,.18); }
.type-chip.cpa { color:#086fa7; background:#dff3ff; border:1px solid rgba(34,153,218,.18); }
.type-chip.pin { color:#a15c05; background:#fff1cf; border:1px solid rgba(228,151,35,.22); }
.offer-refresh {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:105px;
  padding:0 14px;
  border:1px solid rgba(28,126,185,.18);
  border-radius:15px;
  color:#176a99;
  background:#fff;
  font-size:9px;
  font-weight:900;
}
.offer-refresh svg { width:16px; fill:currentColor; transition:transform .3s ease; }
.offer-refresh:hover svg { transform:rotate(90deg); }
.offer-refresh:disabled { opacity:.5; cursor:wait; }

.offer-guidance {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:15px 0 12px;
  color:#6e8494;
  font-size:8px;
  font-weight:800;
}
.offer-guidance span { display:grid; place-items:center; flex:0 0 auto; width:21px; height:21px; border-radius:50%; color:#fff; background:#188bd3; font-size:8px; }
.offer-guidance p { margin:0; }
.offer-guidance i { width:28px; height:1px; background:rgba(52,128,174,.25); }

.offers-status {
  display:flex;
  align-items:center;
  gap:11px;
  min-height:55px;
  padding:11px 14px;
  border:1px solid rgba(32,135,196,.14);
  border-radius:15px;
  background:#f2f9fd;
}
.offers-status strong { display:block; color:#18354a; font-size:10px; }
.offers-status small { display:block; margin-top:3px; color:#7590a2; font-size:8px; }
.status-spinner { flex:0 0 auto; width:22px; height:22px; border:3px solid rgba(25,139,211,.17); border-top-color:#198bd3; border-radius:50%; animation:offerSpin .75s linear infinite; }
.status-symbol { display:grid; place-items:center; flex:0 0 auto; width:25px; height:25px; border-radius:9px; color:#fff; background:#2bc48a; font-size:13px; font-weight:950; }
.offers-status.error { border-color:rgba(224,94,83,.2); background:#fff4f2; }
.offers-status.error .status-symbol { background:#e15b55; }
.offers-status.opened { border-color:rgba(231,161,36,.25); background:#fff9ea; }
.offers-status.opened .status-symbol { background:#e7a124; }
@keyframes offerSpin { to { transform:rotate(360deg); } }

.offers-list { display:grid; gap:10px; margin-top:11px; }
.offer-card {
  --offer-order:0;
  display:grid;
  grid-template-columns:58px minmax(0,1fr) auto;
  align-items:center;
  gap:13px;
  min-height:92px;
  padding:12px;
  border:1px solid rgba(39,128,184,.16);
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 24px rgba(29,91,128,.065);
  animation:offerCardIn .4s ease both;
  animation-delay:calc(var(--offer-order) * 55ms);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
@keyframes offerCardIn { from { opacity:0; transform:translateY(9px); } }
.offer-card:hover { transform:translateY(-2px); border-color:rgba(32,153,218,.35); box-shadow:0 13px 30px rgba(26,98,142,.11); }
.offer-card.started { border-color:rgba(41,190,133,.38); box-shadow:0 10px 28px rgba(41,190,133,.1); }
.offer-logo {
  position:relative;
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  overflow:hidden;
  border:1px solid rgba(34,125,182,.15);
  border-radius:16px;
  background:linear-gradient(145deg,#dff3ff,#e5fff4);
  color:#1879ad;
  font-size:14px;
  font-weight:950;
}
.offer-logo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.offer-logo span { z-index:0; }
.offer-logo:not(.image-failed) span { opacity:0; }
.offer-logo.image-failed span { opacity:1; }
.offer-main { min-width:0; }
.offer-title-row { display:flex; align-items:center; gap:8px; min-width:0; }
.offer-title-row h3 { overflow:hidden; margin:0; color:#173247; font-size:12px; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
.offer-main > p { margin:6px 0 7px; color:#688091; font-size:9px; line-height:1.42; }
.offer-meta { display:flex; flex-wrap:wrap; gap:7px 14px; color:#7b92a1; font-size:7.5px; font-weight:750; }
.offer-meta span { display:flex; align-items:center; gap:4px; }
.offer-meta b { color:#2692ca; font-size:9px; }
.offer-action {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:112px;
  min-height:42px;
  padding:9px 13px;
  border:0;
  border-radius:13px;
  color:#fff;
  background:linear-gradient(105deg,#ed9f22,#f07532);
  box-shadow:0 9px 20px rgba(226,122,34,.2);
  font-size:9px;
  font-weight:950;
  text-decoration:none;
  white-space:nowrap;
}
.offer-action:hover { filter:brightness(1.04); transform:translateY(-1px); }
.offer-action svg { width:15px; fill:currentColor; }
.offer-card.started .offer-action { background:linear-gradient(105deg,#22a975,#39c995); box-shadow:0 9px 20px rgba(31,169,115,.18); }
.demo-offer-action { opacity:.58; cursor:not-allowed; }

.offer-skeleton { pointer-events:none; overflow:hidden; }
.offer-skeleton::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent); animation:skeletonSweep 1.25s infinite; }
.offer-skeleton { position:relative; }
.skeleton-logo { width:58px; height:58px; border-radius:16px; background:#e6f0f5; }
.offer-skeleton > div { display:grid; gap:8px; }
.offer-skeleton i { display:block; width:48%; height:8px; border-radius:999px; background:#e6f0f5; }
.offer-skeleton i:nth-child(2) { width:90%; }
.offer-skeleton i:nth-child(3) { width:67%; }
.skeleton-button { width:112px; height:42px; border-radius:13px; background:#e6f0f5; }
@keyframes skeletonSweep { to { transform:translateX(100%); } }

.offers-empty { display:grid; place-items:center; min-height:205px; padding:25px; border:1px dashed rgba(40,132,186,.25); border-radius:18px; text-align:center; background:#f4fbff; }
.offers-empty > span { display:grid; place-items:center; width:44px; height:44px; margin-bottom:10px; border-radius:15px; color:#fff; background:#299bd6; font-size:22px; font-weight:950; }
.offers-empty strong { color:#18364a; font-size:12px; }
.offers-empty p { max-width:440px; margin:6px auto 0; color:#748d9e; font-size:9px; line-height:1.55; }
.offers-empty button { margin-top:12px; padding:9px 16px; border:0; border-radius:11px; color:#fff; background:#188bd3; font-size:9px; font-weight:900; }
.offers-empty.error > span { background:#df5c55; }

.offer-disclosure {
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin-top:12px;
  padding:11px 13px;
  border:1px solid rgba(222,158,42,.2);
  border-radius:14px;
  background:#fff9e9;
}
.offer-disclosure svg { flex:0 0 auto; width:17px; fill:#d48a17; }
.offer-disclosure p { margin:0; color:#816b40; font-size:7.5px; line-height:1.5; }
.offers-footer-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:11px; }
.offers-footer-actions .secondary-action { width:auto; min-height:39px; margin:0; padding:8px 16px; font-size:8px; }
.offers-footer-actions .secondary-action.muted { color:#477089; background:#e9f3f8; box-shadow:none; }

html[data-theme="dark"] .offers-head p { color:#9cb2c2; }
html[data-theme="dark"] .offer-session-bar { border-color:rgba(75,183,235,.18); background:linear-gradient(135deg,#0d304c,#0d3b43); }
html[data-theme="dark"] .offer-timer-card,
html[data-theme="dark"] .offer-priority { border-color:rgba(90,190,235,.15); background:rgba(8,31,49,.72); }
html[data-theme="dark"] .offer-timer-card strong { color:#ecf8ff; }
html[data-theme="dark"] .offer-timer-card small,
html[data-theme="dark"] .offer-priority small { color:#82a2b7; }
html[data-theme="dark"] .offer-timer-card.warning { background:rgba(115,73,16,.35); border-color:rgba(247,180,61,.38); }
html[data-theme="dark"] .offer-timer-card.warning strong { color:#ffc765; }
html[data-theme="dark"] .offer-timer-card.expired { background:rgba(112,34,45,.35); border-color:rgba(240,91,105,.36); }
html[data-theme="dark"] .offer-timer-card.expired strong { color:#ff8792; }
html[data-theme="dark"] .offer-refresh { color:#b7ddf1; border-color:rgba(92,188,235,.18); background:#10334f; }
html[data-theme="dark"] .offer-guidance { color:#8da8ba; }
html[data-theme="dark"] .offer-guidance span { background:#2b9edb; }
html[data-theme="dark"] .offer-guidance i { background:rgba(107,192,232,.2); }
html[data-theme="dark"] .offers-status { border-color:rgba(74,174,225,.16); background:#0d304b; }
html[data-theme="dark"] .offers-status strong { color:#eef9ff; }
html[data-theme="dark"] .offers-status small { color:#8ea9ba; }
html[data-theme="dark"] .offers-status.error { background:rgba(104,34,40,.38); border-color:rgba(235,100,91,.22); }
html[data-theme="dark"] .offers-status.opened { background:rgba(111,74,17,.35); border-color:rgba(238,174,56,.24); }
html[data-theme="dark"] .offer-card { border-color:rgba(73,165,213,.17); background:linear-gradient(145deg,#103653,#0d2c46); box-shadow:0 10px 28px rgba(0,0,0,.17); }
html[data-theme="dark"] .offer-card:hover { border-color:rgba(77,196,241,.42); box-shadow:0 15px 32px rgba(0,0,0,.25); }
html[data-theme="dark"] .offer-card.started { border-color:rgba(60,216,154,.4); }
html[data-theme="dark"] .offer-title-row h3 { color:#f1f9ff; }
html[data-theme="dark"] .offer-main > p { color:#9ab1c1; }
html[data-theme="dark"] .offer-meta { color:#7f9caf; }
html[data-theme="dark"] .offer-logo { border-color:rgba(83,181,229,.18); background:linear-gradient(145deg,#16466a,#12515a); color:#78d7ff; }
html[data-theme="dark"] .type-chip.cpi { color:#5ee0aa; background:rgba(32,161,107,.18); border-color:rgba(67,218,153,.2); }
html[data-theme="dark"] .type-chip.cpa { color:#69cef8; background:rgba(35,139,196,.18); border-color:rgba(79,191,240,.2); }
html[data-theme="dark"] .type-chip.pin { color:#ffc869; background:rgba(194,124,21,.2); border-color:rgba(245,176,54,.22); }
html[data-theme="dark"] .offer-skeleton i,
html[data-theme="dark"] .skeleton-logo,
html[data-theme="dark"] .skeleton-button { background:#19415d; }
html[data-theme="dark"] .offer-skeleton::after { background:linear-gradient(90deg,transparent,rgba(121,203,240,.1),transparent); }
html[data-theme="dark"] .offers-empty { border-color:rgba(74,178,227,.23); background:#0d304b; }
html[data-theme="dark"] .offers-empty strong { color:#eef9ff; }
html[data-theme="dark"] .offers-empty p { color:#8ea9ba; }
html[data-theme="dark"] .offer-disclosure { border-color:rgba(237,174,57,.2); background:rgba(102,69,18,.34); }
html[data-theme="dark"] .offer-disclosure p { color:#c8ad77; }
html[data-theme="dark"] .offers-footer-actions .secondary-action.muted { color:#a8c6d7; background:#10334f; }

@media (max-width:700px) {
  .offers-backdrop { padding:8px; align-items:flex-end; }
  .offers-modal { width:100%; max-height:94vh; padding:20px 14px 16px; border-radius:24px 24px 0 0; }
  .offers-head { align-items:flex-start; gap:11px; padding-right:32px; }
  .offers-head .locker-shield { width:48px; height:48px; border-radius:16px; }
  .offers-head .locker-shield svg { width:25px; }
  .offers-head h2 { font-size:22px; }
  .offers-head p { font-size:9px; }
  .offer-session-bar { grid-template-columns:1fr auto; gap:8px; padding:9px; }
  .offer-timer-card { min-width:0; }
  .offer-priority { grid-column:1/-1; grid-row:2; min-height:48px; }
  .offer-refresh { min-width:49px; padding:0 10px; font-size:0; }
  .offer-refresh svg { width:18px; }
  .offer-guidance { gap:5px; overflow:hidden; }
  .offer-guidance p { font-size:7px; white-space:nowrap; }
  .offer-guidance i { width:10px; }
  .offer-card { grid-template-columns:48px minmax(0,1fr); gap:10px; min-height:0; padding:11px; }
  .offer-logo { width:48px; height:48px; border-radius:14px; }
  .offer-title-row { align-items:flex-start; }
  .offer-title-row h3 { white-space:normal; font-size:11px; }
  .offer-main > p { font-size:8px; }
  .offer-meta { font-size:7px; }
  .offer-action { grid-column:1/-1; width:100%; min-height:40px; }
  .offers-footer-actions { flex-direction:column; }
  .offers-footer-actions .secondary-action { width:100%; }
}
.offers-footer-actions .secondary-action[hidden] { display:none !important; }

/* =========================================================
   AUTO-DETECTED DEVICE + TWO-OFFER REQUIREMENT
   ========================================================= */
.device-detection-note {
  display:block;
  margin-top:8px;
  color:#718899;
  font-size:8px;
  font-weight:750;
  line-height:1.45;
}
.device-detection-note.locked { color:#1779ad; }
.device-tab:disabled {
  opacity:.42;
  cursor:not-allowed;
  transform:none !important;
  filter:saturate(.55);
}
.device-tab.auto-detected {
  position:relative;
  padding-right:66px;
}
.device-tab.auto-detected::after {
  content:'AUTO';
  position:absolute;
  top:8px;
  right:9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  min-height:18px;
  padding:2px 7px;
  border:1px solid rgba(23,143,206,.2);
  border-radius:999px;
  color:#0879b2;
  background:#dff5ff;
  font-size:6px;
  font-weight:950;
  letter-spacing:.11em;
}

.offer-device-card {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:58px;
  padding:10px 13px;
  border:1px solid rgba(39,130,186,.13);
  border-radius:15px;
  background:rgba(255,255,255,.83);
}
.offer-device-card .device-lock-icon {
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:35px;
  height:35px;
  border-radius:12px;
  color:#fff;
  background:linear-gradient(145deg,#15a379,#2ecaa0);
}
.offer-device-card .device-lock-icon svg { width:18px; fill:currentColor; }
.offer-device-card > div { min-width:0; flex:1; }
.offer-device-card small {
  display:block;
  margin-bottom:3px;
  color:#78909f;
  font-size:7px;
  font-weight:950;
  letter-spacing:.14em;
}
.offer-device-card strong {
  display:block;
  overflow:hidden;
  color:#173146;
  font-size:12px;
  font-weight:950;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.offer-device-card em {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:21px;
  padding:3px 8px;
  border:1px solid rgba(27,169,123,.18);
  border-radius:999px;
  color:#08784f;
  background:#dff8eb;
  font-size:6px;
  font-style:normal;
  font-weight:950;
  letter-spacing:.1em;
}

html[data-theme="dark"] .device-detection-note { color:#86a7bb; }
html[data-theme="dark"] .device-detection-note.locked { color:#65cef8; }
html[data-theme="dark"] .device-tab.auto-detected::after {
  border-color:rgba(91,204,248,.22);
  color:#71d8ff;
  background:rgba(28,139,190,.2);
}
html[data-theme="dark"] .offer-device-card {
  border-color:rgba(90,190,235,.15);
  background:rgba(8,31,49,.72);
}
html[data-theme="dark"] .offer-device-card small { color:#82a2b7; }
html[data-theme="dark"] .offer-device-card strong { color:#eef9ff; }
html[data-theme="dark"] .offer-device-card em {
  border-color:rgba(68,221,167,.2);
  color:#6ce5b9;
  background:rgba(25,151,106,.18);
}

@media (max-width:700px) {
  .offer-device-card {
    grid-column:1/-1;
    grid-row:2;
    min-height:48px;
  }
  .device-tab.auto-detected { padding-right:56px; }
  .device-tab.auto-detected::after { right:7px; min-width:34px; padding-inline:5px; }
}