/* Number 1 phase-one DApp. Visual direction: Codex clickable prototype v5 (2026-10-18),
   consolidated into one stylesheet. No inline styles anywhere (CSP style-src 'self'). */
:root{color-scheme:dark;--purple:#b48aff;--muted:#aba1c6;--line:#493766;--ink:#f7f3ff;--deep:#10091d}
*{box-sizing:border-box}
html,body{margin:0;background:#090611;color:var(--ink);font:15px/1.6 Inter,-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif}
button,a,input{font:inherit}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;color:inherit;background:none;border:1px solid var(--line);border-radius:12px;padding:10px 14px}
button:disabled{opacity:.55;cursor:not-allowed}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #d6baff;outline-offset:3px}
.phone{position:relative;max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;overflow:clip;
 background:linear-gradient(180deg,#10071b0d,#10071b22 22%,#10071b33 80%,#10071b11),url('/brand/number1-city.jpg') center top/cover no-repeat,var(--deep)}
@media(min-width:520px){.phone{margin:24px auto;min-height:calc(100vh - 48px);border:1px solid #644595;border-radius:28px;box-shadow:0 0 90px #6e23c522}}

/* Header */
header.top{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:8px;min-height:72px;padding:20px 16px 12px}
.lang,.account-link,.wallet-chip{background:#170b28b8;border:1px solid #704691;color:#e6d6ff;font-size:11px;white-space:nowrap}
.lang{border-radius:16px;padding:8px 10px;min-height:34px}
.account-link{border-radius:16px;min-height:34px;padding:0 10px;display:grid;place-items:center;flex-shrink:0}
.wallet-chip{background:#1a0b31d9;border-color:#8c41db;box-shadow:inset 0 0 12px #a054ec24,0 0 12px #943ee42b;border-radius:16px;padding:9px 9px;min-height:34px}
.wallet-chip span{color:#bca0f9;font-size:9px}

main{padding:4px 16px 32px}
h1{font-size:28px;font-weight:800;line-height:1.3;margin:8px 0 10px;text-shadow:0 2px 7px #140822}
h2{font-size:18px;margin:0 0 12px}
.eyebrow{font-size:13px;color:#f0e4ff;text-shadow:0 2px 6px #000}
.sub,small{color:var(--muted);font-size:12px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all}
.grow{min-width:0;flex:1}

/* Home */
.home-heading{margin:12px 0 0}
.notice{display:flex;align-items:center;gap:9px;margin:24px 0 28px;padding:12px;font-size:11px;color:#ead9ff;border:1px solid #8a57b5;background:#201134dc;
 clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);white-space:nowrap;overflow:hidden}
.announce-icon{color:#fff;text-shadow:0 0 9px #b56bff;font-size:16px}.notice strong{font-size:12px}
.notice-copy{border-left:1px solid #9567ad;padding-left:9px;overflow:hidden;text-overflow:ellipsis}.notice-arrow{margin-left:auto;font-size:22px;line-height:1}
.dashboard{display:grid;grid-template-columns:1fr 1.18fr 1fr;gap:10px;height:444px;margin:0 -4px 24px;filter:drop-shadow(0 0 3px #a75ce135)}
.wing{display:grid;grid-template-rows:repeat(3,1fr);gap:15px;min-width:0}
.wing-right{display:flex;flex-direction:column;justify-content:space-evenly;gap:15px}
.wing-right .tile{height:174px;flex-shrink:0}
.tile{position:relative;isolation:isolate;width:100%;min-width:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:15px 4px 10px;
 clip-path:polygon(13px 0,calc(100% - 12px) 0,100% 13px,100% calc(100% - 13px),calc(100% - 13px) 100%,12px 100%,0 calc(100% - 12px),0 13px);
 background:linear-gradient(135deg,#d8b3f4,#8644bf 25%,#b990da 45%,#633799 65%,#c299e3);transition:filter .18s,transform .18s}
.tile::before{content:'';position:absolute;z-index:-2;inset:1px;background:linear-gradient(145deg,#26123aeb,#160d25f2);clip-path:inherit}
.tile::after{content:'';position:absolute;z-index:-1;inset:6px;clip-path:inherit;background:radial-gradient(ellipse at 50% 20%,#8f41e111,transparent 65%)}
.tile svg{width:35px;height:35px;margin-bottom:14px;filter:drop-shadow(0 0 3px #bc6aff55)}
.tile strong{font-size:16px;font-weight:650;line-height:1.25;text-shadow:0 1px 5px #000;padding:0 2px}
.tile .arrow{position:absolute;bottom:9px;right:9px;font-size:11px;color:#bc91d9}
.tile:hover{transform:translateY(-2px);filter:brightness(1.2)}
.core{position:relative;isolation:isolate;min-width:0;display:flex;flex-direction:column;text-align:center;justify-content:space-around;padding:30px 4px 23px;
 clip-path:polygon(15px 0,calc(100% - 15px) 0,100% 16px,100% calc(100% - 18px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 18px),0 16px);
 background:linear-gradient(135deg,#d9b7f3,#8d51c5 25%,#ba92db 50%,#6e3c9c 80%,#d1a8ed)}
.core::before{content:'';position:absolute;z-index:-2;inset:2px;background:linear-gradient(180deg,#211132f5,#170e27f7);clip-path:inherit}
.core h2{font-size:17px;font-weight:700;margin-bottom:18px;line-height:1.3;padding:0 4px}
.core strong{font-size:34px;color:#e0c4fa;font-variant-numeric:tabular-nums}
.core .divider{height:1px;width:76%;margin:0 auto;background:linear-gradient(90deg,transparent,#805b9c88,transparent)}
.core small{font-size:9px;color:#aa8fc0;letter-spacing:1px}
.footnote{font-size:10px;line-height:1.8;color:#c8b5de;background:#110b1b99;border-radius:8px;padding:10px 12px;margin:18px 0}

/* Cards, lists, forms */
.card{padding:18px;background:linear-gradient(135deg,#29143eed,#160d28ed);border:1px solid #76499c;border-radius:14px;margin:14px 0;box-shadow:inset 0 0 20px #7a3fb012}
.card .value{font-size:27px;display:block;margin:8px 0;color:#e4caff;font-variant-numeric:tabular-nums;word-break:break-all}
.card p{margin:8px 0;font-size:13px;color:#c0b5d3}
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px}.metrics .card{margin:14px 0 0}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.list{display:flex;border-bottom:1px solid #3c2c51;padding:16px 0}.list:last-child{border:0}.list>span{color:#cdb3ef;font-size:12px;text-align:right;flex-shrink:0;max-width:45%}
.badge{font-size:11px;color:#d2b5fb;border:1px solid #65458b;border-radius:20px;padding:2px 9px;white-space:nowrap;display:inline-block}
.back{display:inline-block;font-size:13px;color:#c9a9ee;background:#1a0c2ba6;padding:4px 11px;border:1px solid #654284;border-radius:8px;margin:3px 0 12px}
.primary{background:#7c3aed;border:1px solid #a16af4;border-radius:10px;display:block;text-align:center;padding:13px 16px;width:100%;color:#fff;font-weight:600;margin:14px 0 0}
.secondary-btn{display:block;width:100%;text-align:center;padding:11px;margin:12px 0 0;color:#e2d0fb;border:1px solid #8a57b5;border-radius:10px;background:#1d1030cc}
.secondary{display:block;text-align:center;padding:10px;color:#ccb2ed}
input{display:block;width:100%;background:#150e22;color:#fff;border:1px solid #58416f;border-radius:9px;padding:11px;margin-top:6px}
label.field{display:block;margin:14px 0 4px;color:#c9bdd8;font-size:13px}
.kv{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid #382547;font-size:13px}.kv span:first-child{color:#b4a4c9}.kv span:last-child{text-align:right}
.timeline p{padding-left:20px;border-left:1px solid #7a4ca7}
.avatar{width:56px;height:56px;border:1px solid #a373e5;background:#563080;border-radius:50%;display:grid;place-items:center;font-size:23px;flex-shrink:0}
.empty{text-align:center;padding:45px 20px;color:var(--muted)}
.msg,.hero-login .msg,.card .msg{background:#2b1546f2;color:#f6efff;border:1px solid #b48aff;border-left:4px solid #d6baff;border-radius:10px;padding:10px 12px;font-size:13px;margin:14px 0;word-break:break-word}
.join h2{margin-bottom:6px}

/* Login */
.hero-login{margin:28px 0 0;padding:26px 20px 22px;background:#160b27d9;border:1px solid #8a57b5;border-radius:18px;text-align:center;box-shadow:0 0 40px #6e23c522}
.hero-login .eyebrow{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#cbb3ef}
.hero-login h1{font-size:34px;margin:2px 0 8px}.hero-login p{color:#d8c9ee;font-size:14px;line-height:1.65;margin:14px 4px}
.hero-login .msg{text-align:left}.hero-login .footnote{margin:16px 0 0}

/* Admin */
.stats{display:grid;gap:10px;margin:12px 0}.stats.four{grid-template-columns:1fr 1fr}
.stats div{background:#140b22;border:1px solid #4b346e;border-radius:10px;padding:10px;min-width:0}
.stats b{display:block;font-size:20px;color:#e4caff;word-break:break-all}.stats small{font-size:11px}
.table-wrap{overflow-x:auto;margin:0 -4px}
table{width:100%;border-collapse:collapse;font-size:12px;min-width:420px}
th,td{text-align:left;padding:8px 6px;border-bottom:1px solid #382547;white-space:nowrap}th{color:#b4a4c9;font-weight:600}
.pager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}.pager .secondary-btn{width:auto;margin:0;padding:8px 14px}
.detail{margin-top:12px}

@media(max-width:380px){
 header.top{padding:18px 12px 10px;gap:6px}
 .wallet-chip{font-size:10px;padding:8px 6px}.lang{padding:7px 8px}
 main{padding-left:12px;padding-right:12px}
 .dashboard{grid-template-columns:1fr 1.15fr 1fr;gap:8px;height:432px}.wing-right .tile{height:169px}
 .tile strong{font-size:14px}.tile svg{width:32px;height:32px}.core h2{font-size:15px}.core strong{font-size:30px}
}
/* Customer-approved circle logo (2026-10-18): shown in the sign-in card, not in the header (client decision). */
.hero-login .login-title{margin:14px auto 14px;line-height:0;width:200px;padding:6px 0;background:radial-gradient(circle at 50% 38%,#8b3dff55,transparent 62%)}
.login-logo{display:block;width:168px;height:auto;margin:0 auto;filter:drop-shadow(0 0 18px #9a5cff66)}
.wallet-menu{position:absolute;right:16px;top:66px;z-index:20;min-width:220px;padding:8px;background:#1a0d2cf7;border:1px solid #8a57b5;border-radius:14px;box-shadow:0 12px 40px #000a,0 0 24px #7c3aed33;display:grid;gap:6px}
.wallet-menu-addr{font-size:11px;color:#cbb3ef;margin:2px 4px 6px;line-height:1.4}
.wallet-menu button{width:100%;text-align:left;border:1px solid #4b346e;background:#140b22;border-radius:10px;padding:10px 12px;font-size:13px;color:#efe4ff}
.wallet-menu button:hover{border-color:#a16af4;background:#22113a}.wallet-menu .danger{color:#ffb4c6;border-color:#6b2f4a}

/* Home 3D dashboard (client reference 2026-10-18): tilted side wings, framed image tiles, title bars, bigger type. */
.dashboard{perspective:900px;perspective-origin:50% 45%;height:470px;gap:12px;margin:0 -8px 26px}
.wing{transform:rotateY(24deg);transform-origin:right center;gap:16px}
.wing-right{transform:rotateY(-24deg);transform-origin:left center;gap:18px}
.wing-right .tile{height:190px}
.tile{padding:0;justify-content:flex-start;background:linear-gradient(135deg,#e3c3ff,#8d4be0 22%,#c8a2f0 45%,#6a36a6 68%,#e0bcff);filter:drop-shadow(0 6px 14px #000c) drop-shadow(0 0 8px #a35cff55)}
.tile::before{inset:2px;background:linear-gradient(180deg,#14081f00 0%,#14081f33 45%,#12071dcc 100%),url('/brand/number1-city.jpg') var(--art,50% 30%)/var(--zoom,260%) no-repeat,#160d25}
.tile::after{inset:2px;background:linear-gradient(180deg,#ffffff1f,transparent 22%),radial-gradient(ellipse at 50% 100%,#9b5cff44,transparent 60%)}
.tile-orders{--art:12% 40%}.tile-referrals{--art:85% 75%}.tile-performance{--art:40% 92%}.tile-earnings{--art:70% 18%}.tile-admin{--art:30% 60%}
.tile-bar{display:block;width:100%;padding:10px 3px 9px;background:linear-gradient(180deg,#2a1146f2,#1b0c30d9);border-bottom:1px solid #b88af0aa;box-shadow:0 4px 12px #0008}
.tile-bar strong{display:block;font-size:16.5px;font-weight:800;letter-spacing:0;line-height:1.2;color:#fff;text-shadow:0 0 10px #b06bff,0 2px 4px #000}
.tile-art{flex:1;display:grid;place-items:center;width:100%}
.tile .tile-art svg{width:min(74%,96px);height:auto;aspect-ratio:1;margin:0;filter:drop-shadow(0 0 14px #c58cff) drop-shadow(0 4px 6px #000)}
.tile .arrow{font-size:13px;color:#e5ccff}
.tile:hover{transform:translateZ(14px);filter:brightness(1.15) drop-shadow(0 8px 18px #000c)}
.core{padding:0 6px 16px;justify-content:flex-start;gap:2px;filter:drop-shadow(0 8px 20px #000d) drop-shadow(0 0 12px #a35cff66);background:linear-gradient(135deg,#ecd0ff,#9150d8 25%,#cfa8f3 50%,#7240a8 80%,#e6c4ff)}
.core::before{inset:3px;background:linear-gradient(180deg,#1b0b2ccc 0%,#170a27aa 40%,#13081fee 100%),url('/brand/number1-city.jpg') 50% 55%/320% no-repeat,#170e27}
.core-bar{display:flex;align-items:center;gap:8px;margin:0 -6px 8px;padding:12px 12px;background:linear-gradient(180deg,#2c1249f5,#1d0d33e0);border-bottom:1px solid #c79bf5aa}
.core-bar small{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#f1e3ff;font-weight:700;flex:1}
.core-hex{width:16px;height:16px;border:2px solid #d9b5ff;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.core-lines{width:18px;height:10px;background:repeating-linear-gradient(180deg,#d9b5ff 0 2px,transparent 2px 4px)}
.core-stat{flex:1;display:flex;flex-direction:column;justify-content:center;padding:4px 0}
.core-stat-sm strong{font-size:38px}.core-stat-sm h2{font-size:16px}
.core-foot{margin:8px auto 0;white-space:nowrap;font-size:9px;letter-spacing:.5px;color:#e3ccff;border:1px solid #9c6cd6;border-radius:20px;padding:3px 10px;background:#1d0e31cc}
.core h2{font-size:20px;font-weight:800;margin-bottom:6px;text-shadow:0 0 10px #a35cff,0 2px 4px #000}
.core strong{font-size:52px;line-height:1.05;color:#fff;text-shadow:0 0 18px #b06bff,0 0 4px #e6cfff}
@media(max-width:380px){.dashboard{height:450px;gap:9px}.wing{transform:rotateY(20deg)}.wing-right{transform:rotateY(-20deg)}.tile-bar strong{font-size:16px}.core h2{font-size:17px}.core strong{font-size:44px}.wing-right .tile{height:180px}}
/* Partner tile + admin (three tiles on the right wing) */
.tile-partner{--art:55% 50%}
.wing-right.wing-3{display:grid;grid-template-rows:repeat(3,1fr);gap:16px}.wing-right.wing-3 .tile{height:auto}
.partner-terms .kv span:last-child,.partner-buy .kv span:last-child{font-weight:700;color:#f1e2ff}
.partner-buy input[type=number]{font-size:20px;font-weight:700;text-align:center}

/* Client request 2026-10-18 (2): narrower side wings, wider centre panel with bigger numbers; order price stands out. */
.dashboard{grid-template-columns:.78fr 1.5fr .78fr;gap:10px}
.wing .tile-bar strong{font-size:14px;line-height:1.15;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.tile .tile-art svg{width:min(78%,72px)}
.core h2{font-size:22px}.core strong{font-size:62px}.core-stat-sm strong{font-size:46px}.core-stat-sm h2{font-size:19px}
.core-bar small{font-size:13px}.core-foot{font-size:11px;padding:4px 12px}
.pay-btn{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:12px 16px}
.pay-label{font-size:17px;font-weight:700}.pay-sep{opacity:.6}
.pay-price{font-size:26px;font-weight:900;letter-spacing:.3px;color:#ffd166;text-shadow:0 0 12px #ffb30088,0 2px 3px #0008;font-variant-numeric:tabular-nums}
@media(max-width:380px){.dashboard{grid-template-columns:.76fr 1.5fr .76fr;gap:8px}.core strong{font-size:54px}.core h2{font-size:19px}.wing .tile-bar strong{font-size:13.5px}.pay-price{font-size:23px}}
/* ===== Motion v2 (client feedback 2026-10-18: v1 moved too much). Principle: calm screen, one slow ambient layer,
   one focal effect (centre scan), a one-time entrance, and feedback on touch. transform/opacity only; off for reduced motion. ===== */
#app{position:relative;z-index:1}
/* Ambient: very slow star drift + faint perspective grid (barely noticeable, gives depth) */
.phone::before{content:'';position:absolute;z-index:0;left:0;right:0;top:-160px;height:calc(100% + 160px);pointer-events:none;opacity:.35;
 background:radial-gradient(1.2px 1.2px at 20px 30px,#e9d5ff,transparent),radial-gradient(1px 1px at 90px 110px,#c4b5fd,transparent),radial-gradient(1.3px 1.3px at 140px 60px,#f5d0fe,transparent);
 background-size:160px 160px;animation:n1-drift 60s linear infinite}
.phone::after{content:'';position:absolute;z-index:0;left:-20%;right:-20%;bottom:-6%;height:30%;pointer-events:none;opacity:.18;transform:perspective(320px) rotateX(62deg);transform-origin:50% 100%;
 background:repeating-linear-gradient(90deg,#b26bff88 0 1px,transparent 1px 44px),repeating-linear-gradient(0deg,#b26bff88 0 1px,transparent 1px 44px);
 -webkit-mask-image:linear-gradient(180deg,transparent,#000 75%);mask-image:linear-gradient(180deg,transparent,#000 75%);animation:n1-grid 8s linear infinite}
@keyframes n1-drift{to{transform:translateY(160px)}}
@keyframes n1-grid{to{background-position:0 0,0 44px}}
/* Focal: a thin, slow scan line in the centre panel, with a pause between passes */
.core::after{content:'';position:absolute;z-index:-1;left:6px;right:6px;top:0;height:2px;pointer-events:none;
 background:linear-gradient(90deg,transparent,#e9d5ffcc 30%,#fff 50%,#e9d5ffcc 70%,transparent);box-shadow:0 0 14px 3px #b77bff66;opacity:0;animation:n1-scan 7s ease-in-out infinite}
@keyframes n1-scan{0%{transform:translateY(60px);opacity:0}8%{opacity:.9}55%{opacity:.9}62%{transform:translateY(460px);opacity:0}100%{transform:translateY(460px);opacity:0}}
/* Entrance (first time the home screen appears only): wings swing in, centre rises, numbers count up */
.intro .wing{animation:n1-in-left .9s cubic-bezier(.2,.8,.2,1) both}
.intro .wing-right{animation-name:n1-in-right}
.intro .core{animation:n1-rise .8s cubic-bezier(.2,.8,.2,1) .1s both}
.intro .wing .tile{animation:n1-fade .6s ease both}.intro .wing .tile:nth-child(2){animation-delay:.12s}.intro .wing .tile:nth-child(3){animation-delay:.24s}
.intro .pay-btn,.intro .join{animation:n1-rise .7s cubic-bezier(.2,.8,.2,1) .35s both}
@keyframes n1-in-left{from{opacity:0;transform:rotateY(70deg) translateX(-30px)}to{opacity:1;transform:rotateY(24deg)}}
@keyframes n1-in-right{from{opacity:0;transform:rotateY(-70deg) translateX(30px)}to{opacity:1;transform:rotateY(-24deg)}}
@keyframes n1-rise{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes n1-fade{from{opacity:0}to{opacity:1}}
/* One tile at a time catches the light (a 12 s cycle across the six tiles), never all together */
.tile-bar{position:relative;overflow:hidden}
.tile-bar::after{content:'';position:absolute;top:0;bottom:0;left:0;width:40%;pointer-events:none;background:linear-gradient(100deg,transparent,#ffffff30,transparent);transform:translateX(-130%);animation:n1-sweep 12s ease-in-out infinite}
.wing .tile:nth-child(2) .tile-bar::after{animation-delay:2s}.wing .tile:nth-child(3) .tile-bar::after{animation-delay:4s}
.wing-right .tile:nth-child(1) .tile-bar::after{animation-delay:6s}.wing-right .tile:nth-child(2) .tile-bar::after{animation-delay:8s}.wing-right .tile:nth-child(3) .tile-bar::after{animation-delay:10s}
@keyframes n1-sweep{0%{transform:translateX(-130%)}10%,100%{transform:translateX(330%)}}
/* Touch feedback: tiles press in and glow */
.tile{transition:transform .18s ease,filter .18s ease}.tile:active{transform:scale(.95);filter:drop-shadow(0 0 14px #c58cff) brightness(1.15)}
/* Call to action: a gentle sheen every few seconds; the price stays still (no jitter) */
.primary{position:relative;overflow:hidden}
.pay-btn::after,.partner-buy .primary::after{content:'';position:absolute;top:0;bottom:0;left:0;width:30%;pointer-events:none;background:linear-gradient(100deg,transparent,#ffffff40,transparent);transform:translateX(-150%);animation:n1-cta 5s ease-in-out infinite}
@keyframes n1-cta{0%,70%{transform:translateX(-150%)}100%{transform:translateX(380%)}}
.primary:active{transform:scale(.98)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.boot{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px}
.boot-logo{width:120px;height:auto;animation:n1-boot 1.6s ease-in-out infinite}
.boot-bar{width:120px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#c084fc,transparent);background-size:200% 100%;animation:n1-bar 1.2s linear infinite}
@keyframes n1-boot{0%,100%{opacity:.75;filter:drop-shadow(0 0 8px #a35cff66)}50%{opacity:1;filter:drop-shadow(0 0 22px #c58cffcc)}}
@keyframes n1-bar{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.boot-logo,.boot-bar{animation:none!important}}