:root{--bg:#0d0c16;--panel:#171522;--ink:#f7f4ff;--muted:#9b96ad;--line:#302c43;--accent:#b986ff;--accent2:#6df7d4}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;color:var(--ink);font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif;min-height:100vh;overflow-x:hidden;background:radial-gradient(circle at 80% 15%,#2a1746 0,transparent 32%),radial-gradient(circle at 5% 80%,#10372f 0,transparent 27%),var(--bg)}
button,textarea{font:inherit}
#stars{position:fixed;inset:0;pointer-events:none;z-index:0}
.noise{position:fixed;inset:0;pointer-events:none;opacity:.045;z-index:1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}
.glow{position:fixed;top:0;left:0;width:280px;height:280px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,rgba(185,134,255,.16) 0,transparent 70%);transition:transform .12s ease-out}
main{position:relative;z-index:2;width:min(1080px,calc(100% - 36px));margin:auto;min-height:calc(100vh - 64px)}
header{display:flex;align-items:center;justify-content:space-between;padding:26px 0;border-bottom:1px solid var(--line)}
.brand{color:var(--ink);text-decoration:none;font:900 20px/1 monospace;letter-spacing:2px}
.brand span{color:var(--accent2)}
.header-right{display:flex;align-items:center;gap:16px}
.status{font:600 12px monospace;color:var(--muted);letter-spacing:.6px}
.status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent2);box-shadow:0 0 12px var(--accent2);margin-right:8px;animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.4}}
.lang-switch{display:flex;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.lang-switch button{background:transparent;border:0;color:var(--muted);padding:6px 12px;font:700 12px monospace;cursor:pointer;transition:.15s}
.lang-switch button.active{background:var(--accent);color:#0d0c16}
.creator{padding:clamp(56px,8vw,100px) 0 42px;animation:rise .6s ease-out}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.eyebrow{color:var(--accent2);font:700 12px monospace;letter-spacing:1.5px;margin-bottom:22px}
h1{font-size:clamp(42px,7.5vw,88px);line-height:1.02;letter-spacing:-4px;margin:0;max-width:900px}
h1 em{color:transparent;-webkit-text-stroke:1px #d1c9df;font-style:normal;animation:shine 4s linear infinite;background:linear-gradient(90deg,transparent 40%,rgba(255,255,255,.9) 50%,transparent 60%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text}
@keyframes shine{0%{background-position:200% 0}100%{background-position:-50% 0}}
.lead{color:var(--muted);font-size:clamp(16px,2vw,20px);margin:28px 0 38px}
.prompt-wrap{display:flex;align-items:stretch;background:#f5f1fb;padding:8px;border-radius:4px;box-shadow:9px 9px 0 #2d2540,0 0 60px rgba(185,134,255,.14);max-width:900px;transition:box-shadow .2s}
.prompt-wrap:focus-within{box-shadow:9px 9px 0 #6d39a5,0 0 80px rgba(185,134,255,.28)}
textarea{flex:1;resize:none;border:0;outline:0;background:transparent;padding:18px;color:#171321;font-size:17px;line-height:1.5;min-height:78px}
textarea::placeholder{color:#777083}
#generate{border:0;background:#171321;color:white;padding:0 26px;min-width:155px;font-weight:800;cursor:pointer;display:flex;gap:18px;align-items:center;justify-content:center;transition:background .15s}
#generate:hover{background:#6d39a5}
#generate b{font-size:20px}
.examples{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:24px}
.examples span{color:#777187;font:12px monospace}
.examples button{border:1px solid var(--line);background:#16141f;color:#bbb5ca;padding:9px 13px;cursor:pointer;transition:.15s}
.examples button:hover{border-color:var(--accent);color:white;transform:translateY(-1px)}
.privacy{font-size:12px;color:#686274;margin-top:22px}
.hidden{display:none!important}

/* recent wall */
.recent{padding:10px 0 80px;animation:rise .8s ease-out}
.recent-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.recent-head h2{font-size:18px;margin:0;letter-spacing:-.5px}
.recent-head .total{font:12px monospace;color:var(--muted)}
.recent-head .total b{color:var(--accent2)}
.recent-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.wall-empty{grid-column:1/-1;color:#514b5e;font-size:13px;padding:26px;border:1px dashed var(--line);text-align:center}
.wall-card{--app:#9b62df;position:relative;background:#141220;border:1px solid var(--line);padding:16px 16px 14px;border-radius:4px;overflow:hidden;transition:transform .18s,border-color .18s;animation:rise .5s ease-out backwards}
.wall-card:nth-child(2n){animation-delay:.06s}.wall-card:nth-child(3n){animation-delay:.12s}
.wall-card:hover{transform:translateY(-3px);border-color:var(--app)}
.wall-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--app)}
.wall-emoji{font-size:24px;display:block;margin-bottom:10px}
.wall-title{display:block;font-size:14px;font-weight:700;line-height:1.35}
.wall-likes{display:inline-block;margin-top:10px;font:700 11px monospace;color:var(--accent2)}

/* loading */
.loading{min-height:68vh;display:flex;flex-direction:column;align-items:center;justify-content:center}
.loading h2{margin:25px 0 8px}
.loading p{color:var(--muted)}
.pixel-loader{display:grid;grid-template-columns:repeat(2,16px);gap:5px;transform:rotate(45deg)}
.pixel-loader i{height:16px;background:var(--accent);animation:blink 1s infinite}
.pixel-loader i:nth-child(2){animation-delay:.15s}
.pixel-loader i:nth-child(3){animation-delay:.3s}
.pixel-loader i:nth-child(4){animation-delay:.45s}
@keyframes blink{50%{opacity:.15;transform:scale(.65)}}

/* generated app stage */
.app-stage{padding:26px 0 64px;animation:rise .5s ease-out}
.stage-bar{display:flex;justify-content:space-between;align-items:center;color:var(--accent2);font:700 11px monospace;letter-spacing:1.5px;margin-bottom:28px}
.stage-bar button{background:none;border:0;color:var(--muted);cursor:pointer;padding:8px 0;font:inherit}
.stage-bar button:hover{color:white}
.generated-app{--app:#b986ff;position:relative;background:#f6f2fb;color:#171321;min-height:600px;max-width:720px;margin:auto;padding:clamp(26px,5vw,56px);border-radius:3px;box-shadow:12px 12px 0 color-mix(in srgb,var(--app) 40%,#13101d),0 0 70px color-mix(in srgb,var(--app) 22%,transparent)}
.app-hero{border-bottom:2px solid #211b2a;padding-bottom:28px;margin-bottom:30px}
.app-emoji{font-size:48px;animation:float 3s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-7px)}}
.app-hero h2{font-size:clamp(30px,6vw,54px);line-height:1.04;letter-spacing:-2px;margin:15px 0 10px}
.app-hero p{color:#645c70;margin:0}
.progress{height:6px;background:#ded7e7;margin:0 0 34px;border-radius:3px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--app);transition:width .35s ease;border-radius:3px}
.question-number{font:700 11px monospace;color:#71677c;letter-spacing:1px}
.question h3{font-size:25px;line-height:1.3;margin:10px 0 24px}
.options{display:grid;gap:12px}
.option{border:2px solid #d8d0e1;background:white;color:#231d2b;text-align:left;padding:17px 18px;font-weight:700;cursor:pointer;transition:.15s;border-radius:2px}
.option:hover{border-color:var(--app);transform:translateX(4px);box-shadow:-4px 4px 0 color-mix(in srgb,var(--app) 30%,transparent)}
.option:active{transform:translateX(4px) scale(.99)}
.result{text-align:center;padding:18px 0}
.result .badge{display:inline-block;background:var(--app);color:#14101c;padding:7px 12px;font:800 11px monospace;letter-spacing:1px}
.result h3{font-size:42px;margin:18px 0 12px}
.result-desc{font-size:18px;line-height:1.7;color:#51485d}
.action-card{text-align:left;background:#1a1620;color:white;margin:30px 0;padding:22px;border-radius:2px}
.action-card small{color:var(--accent2);font:700 11px monospace}
.action-card p{margin:9px 0 0;line-height:1.5}
.result-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.result-actions button{border:2px solid #201a27;background:white;padding:13px 17px;font-weight:800;cursor:pointer;border-radius:2px;transition:.15s}
.result-actions button:hover{transform:translateY(-2px)}
.result-actions .useful{background:#201a27;color:white}
.result-actions .useful:disabled{opacity:.7;cursor:default;transform:none}

/* score ring */
.score-ring{--p:0;position:relative;width:110px;height:110px;margin:26px auto 6px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:conic-gradient(var(--app) calc(var(--p)*1%),#e4ddec 0);animation:ringIn .9s ease-out}
.score-ring::before{content:"";position:absolute;inset:9px;border-radius:50%;background:#f6f2fb}
.score-ring b{position:relative;font-size:32px;line-height:1}
.score-ring small{position:relative;font:700 10px monospace;color:#71677c}
@keyframes ringIn{from{--p:0}}

/* confetti */
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;left:50%;bottom:30%;width:8px;height:8px;animation:conf 1.4s cubic-bezier(.15,.85,.45,1) forwards}
@keyframes conf{0%{transform:translate(0,0) rotate(0);opacity:1}80%{opacity:1}100%{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}

.error{padding:30px;border:1px solid #ff6b7e;color:#ff99a6;text-align:center}
footer{position:relative;z-index:2;height:64px;display:flex;align-items:center;justify-content:center;color:#514b5e;font:10px monospace;letter-spacing:1px}
@media(max-width:650px){
  main{width:min(100% - 24px,1080px)}
  header{padding:20px 0}
  .status{display:none}
  .creator{padding-top:54px}
  h1{letter-spacing:-2.5px}
  .prompt-wrap{display:block;padding:6px;box-shadow:6px 6px 0 #2d2540}
  textarea{width:100%;min-height:105px}
  #generate{width:100%;height:54px}
  .examples{align-items:flex-start}
  .examples span{width:100%}
  .generated-app{padding:26px 20px;min-height:560px}
  .glow{display:none}
}

/* app type badge */
.app-type-badge{display:inline-block;margin-top:12px;padding:4px 10px;border:1px solid #c9bed8;color:#71677c;font:700 10px monospace;letter-spacing:1.5px;border-radius:2px;text-transform:uppercase}

/* timeline */
.timeline{position:relative;padding-left:26px}
.timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--app),#d8d0e1)}
.tl-item{position:relative;margin-bottom:26px;animation:rise .5s ease-out backwards}
.tl-dot{position:absolute;left:-25px;top:5px;width:12px;height:12px;background:var(--app);border:3px solid #f6f2fb;box-shadow:0 0 0 2px var(--app);border-radius:50%}
.tl-label{display:inline-block;background:#1a1620;color:#fff;font:700 11px monospace;letter-spacing:1px;padding:4px 10px;border-radius:2px;margin-bottom:8px}
.tl-body h3{font-size:20px;margin:0 0 8px}
.tl-body>p{color:#51485d;line-height:1.65;margin:0 0 10px}
.tl-insight{background:#ece5f4;border-left:3px solid var(--app);padding:12px 14px;border-radius:0 2px 2px 0}
.tl-insight small{color:#71677c;font:700 10px monospace;letter-spacing:1px}
.tl-insight p{margin:5px 0 0;font-size:14px;color:#3c3448}

/* checklist */
.check-summary{font:600 14px/1.6 monospace;color:#3c3448;margin-bottom:20px}
.check-summary b{color:var(--app);font-size:20px}
.check-praise{color:#71677c;font-family:inherit;font-size:13px}
.check-group{margin-bottom:20px}
.check-group h4{font:800 12px monospace;letter-spacing:1.5px;color:#71677c;margin:0 0 10px;text-transform:uppercase}
.check-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:white;border:2px solid #d8d0e1;padding:13px 15px;margin-bottom:8px;cursor:pointer;font-weight:600;color:#231d2b;border-radius:2px;transition:.15s}
.check-item i{flex:none;width:18px;height:18px;border:2px solid #b9aec6;border-radius:2px;position:relative;transition:.15s}
.check-item:hover{border-color:var(--app)}
.check-item.done{border-color:var(--app);background:color-mix(in srgb,var(--app) 8%,white);color:#71677c}
.check-item.done span{text-decoration:line-through}
.check-item.done i{background:var(--app);border-color:var(--app)}
.check-item.done i::after{content:"✓";position:absolute;inset:0;color:white;font:800 13px/16px monospace;text-align:center}

/* compare */
.cmp-grid{display:grid;gap:6px 10px;align-items:center;margin-bottom:18px}
.cmp-corner{min-height:1px}
.cmp-head{position:relative;text-align:center;font-size:15px;padding:10px 6px;background:#ece5f4;border-radius:2px}
.cmp-head.winner{background:var(--app);color:#14101c}
.cmp-crown{position:absolute;top:-11px;right:6px;font-size:14px}
.cmp-dim{font:700 11px monospace;color:#71677c;letter-spacing:.5px;padding-right:4px}
.cmp-cell{display:flex;align-items:center;gap:8px;background:white;border:1px solid #e1d9ea;padding:8px 10px;border-radius:2px}
.cmp-bar{flex:1;height:8px;background:#e4ddec;border-radius:4px;overflow:hidden}
.cmp-bar i{display:block;height:100%;background:var(--app);border-radius:4px;animation:barIn .7s ease-out}
@keyframes barIn{from{width:0}}
.cmp-cell span{font:800 12px monospace;color:#3c3448;width:14px;text-align:right}
.cmp-total{justify-content:center;border-width:2px;border-color:#c9bed8}
.cmp-total.winner{border-color:var(--app);background:color-mix(in srgb,var(--app) 10%,white)}
.cmp-total b{font-size:18px}
.cmp-total small{color:#71677c;font:700 10px monospace}
.cmp-total-label{font-size:10px}
.cmp-notes p{font-size:13px;color:#51485d;margin:6px 0;line-height:1.5}

/* factcard */
.fc-hint{text-align:center;font:700 11px monospace;letter-spacing:1px;color:#71677c;margin-bottom:14px}
.fc-card{position:relative;display:block;width:100%;min-height:220px;border:0;background:transparent;cursor:pointer;perspective:900px;padding:0}
.fc-front,.fc-back{display:flex;align-items:center;justify-content:center;text-align:center;padding:34px 26px;border-radius:4px;backface-visibility:hidden;transition:transform .5s cubic-bezier(.3,.7,.3,1);min-height:220px;box-shadow:6px 6px 0 #d8d0e1}
.fc-front{background:#1a1620;color:white;font-size:clamp(20px,4.5vw,28px);font-weight:800;line-height:1.35;transform:rotateY(0)}
.fc-back{position:absolute;inset:0;background:var(--app);color:#14101c;font-size:16px;line-height:1.65;transform:rotateY(180deg)}
.fc-card.flip .fc-front{transform:rotateY(-180deg)}
.fc-card.flip .fc-back{transform:rotateY(0)}
.fc-nav{display:flex;justify-content:space-between;align-items:center;margin:18px 0 8px}
.fc-nav button{border:2px solid #201a27;background:white;padding:9px 14px;font-weight:800;cursor:pointer;border-radius:2px;transition:.15s}
.fc-nav button:hover:not(:disabled){transform:translateY(-2px)}
.fc-nav button:disabled{opacity:.35;cursor:default}
.fc-nav span{font:700 12px monospace;color:#71677c}