/* ============ new moments (agent duel · hack · plot twist), the Custom tab and the prompt sheet ============ */
.bm { display: inline-grid; place-items: center; flex: none; }
.msg.sys, .dm.sys { opacity: 1; transform: none; transition: none; }
.app { grid-template-columns: minmax(0, 1fr); }
.top { min-width: 0; }

/* ---------- top bar ---------- */
.seg button.cust.on { background: linear-gradient(120deg, #5e5ce6, #bf5af2); }
.seg button.cust:not(.on) .sym { color: #d6a8ff; }
.seg .regen { width: 30px; padding: 0; justify-content: center; color: #d6a8ff; }
.rail.compact button:not(.on):not(.nx) .rl { display: none; }
.rail.compact button:not(.on):not(.nx) { padding: 0 6px; }
.rail.compact .dots { padding: 0 4px 0 0; gap: 4px; }

/* ---------- phone: badges ---------- */
.badges { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.badge { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px; border-radius: 12px; background: var(--cp-surface); font-size: 10.5px; font-weight: 600; color: var(--l3); text-align: center; line-height: 1.1; }
.badge i { font-style: normal; font-size: 22px; filter: grayscale(1); opacity: .35; }
.badge.on { color: var(--cp-text-soft); box-shadow: inset 0 0 0 1px rgba(255,214,10,.45); background: rgba(255,214,10,.08); }
.badge.on i { filter: none; opacity: 1; }

/* ---------- phone: agent duel ---------- */
.duel-hero { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 6px 0 4px; }
.vs2 { font-size: 15px; font-weight: 800; color: var(--l3); letter-spacing: .06em; }
.beat { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 11px 14px; border-radius: 14px; background: rgba(255,159,10,.12); box-shadow: inset 0 0 0 1px rgba(255,159,10,.3); }
.beat span { font-size: 12.5px; color: var(--l2); font-weight: 600; } .beat b { grid-row: span 2; align-self: center; font-size: 20px; letter-spacing: -.02em; }
.beat small { font-size: 12px; color: var(--green); font-weight: 600; }
.opt-seg button .em2 { display: block; font-size: 19px; line-height: 1.1; margin-bottom: 2px; }
.opt-seg button:disabled { opacity: .5; }
.msg.agent { align-self: flex-end; background: linear-gradient(135deg, #2f9bff, #2f6bff); color: #fff; border-bottom-right-radius: 6px; }
.msg.agent .who { color: rgba(255,255,255,.85); }
.duel-res { margin-top: 12px; padding: 10px 12px; border-radius: 16px; background: var(--cp-surface); display: flex; flex-direction: column; gap: 4px; animation: msgIn .4s var(--ease) both; }
.dr-row { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; align-items: center; padding: 6px 4px; border-radius: 10px; }
.dr-row span { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--cp-text-soft); }
.dr-row b { font-size: 17px; text-align: right; } .dr-row small { grid-column: 1 / -1; font-size: 11.5px; color: var(--l2); padding-left: 30px; }
.dr-row.win { background: rgba(48,209,88,.12); box-shadow: inset 0 0 0 1px rgba(48,209,88,.35); } .dr-row.win b { color: var(--green); }
.verdict { text-align: center; font-size: 13.5px; font-weight: 700; padding: 6px 0 2px; }
.duel-res.big { margin: 0; padding: 0; background: none; gap: 8px; }
.duel-res.big .dr-row { padding: 10px 12px; } .duel-res.big .dr-row span { font-size: 23px; gap: 12px; } .duel-res.big .dr-row b { font-size: 30px; }
.duel-res.big .dr-row small { font-size: 18px; padding-left: 52px; } .duel-res.big .verdict { font-size: 24px; padding-top: 6px; }

/* ---------- phone: hack ---------- */
.hack-top { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: linear-gradient(135deg, rgba(255,55,95,.18), rgba(255,159,10,.08)); margin-bottom: 8px; }
.hack-top b { display: block; font-size: 17px; } .hack-top small { display: block; font-size: 12.5px; color: var(--cp-text-soft); line-height: 1.3; }
.hack-price { display: flex; align-items: baseline; gap: 8px; padding: 9px 14px; border-radius: 14px; background: var(--cp-surface); margin-bottom: 8px; }
.hack-price span { font-size: 12.5px; color: var(--l2); } .hack-price b { font-size: 18px; } .hack-price em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 700; color: var(--orange); }
.msg.me.hkm { background: linear-gradient(135deg, #ff375f, #ff6b3d); font-family: var(--mono); font-size: 13.5px; }
.msg.sys.shield { color: var(--green); background: rgba(48,209,88,.12); box-shadow: inset 0 0 0 1px rgba(48,209,88,.3); }
.msg.sys.shield.soft { color: #ffd60a; background: rgba(255,214,10,.1); box-shadow: inset 0 0 0 1px rgba(255,214,10,.25); }
.judge { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; margin: -2px 0 4px 4px; font-size: 11.5px; color: var(--l2); }
.judge b { color: var(--yellow); }
.inputbar .rb.send { color: #fff; }

/* ---------- phone: plot twist ---------- */
.tw-calm { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 0 12px; }
.tw-calm .tick { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #00210b; margin-bottom: 10px; animation: pop .6s var(--spring) both; }
.push { position: absolute; left: 10px; right: 10px; top: 52px; z-index: 45; display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 22px; text-align: left; background: rgba(58,58,62,.82); backdrop-filter: blur(24px) saturate(1.6); box-shadow: 0 14px 40px rgba(0,0,0,.55), inset 0 0 0 .5px rgba(255,255,255,.15); animation: pushIn .7s var(--spring) both; }
.push .ph1 { display: flex; justify-content: space-between; font-size: 12px; color: var(--l2); } .push .ph1 b { font-size: 12px; color: var(--l2); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.push > span { flex: 1; min-width: 0; } .push > span > b { display: block; font-size: 15px; margin-top: 1px; } .push > span > small { display: block; font-size: 13.5px; color: var(--cp-text-soft); line-height: 1.3; }
@keyframes pushIn { from { transform: translateY(-120%); opacity: 0; } }
.tw-msg { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 18px; background: var(--cp-surface); margin: 4px 0 12px; animation: msgIn .4s var(--ease) both; }
.tw-msg .who { font-size: 12px; font-weight: 700; color: var(--l2); margin-bottom: 4px; } .tw-msg p { margin: 0; font-size: 15px; line-height: 1.38; }
.tw-opts { display: flex; flex-direction: column; gap: 8px; }
.tw-opt { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--cp-surface); text-align: left; box-shadow: inset 0 0 0 1px var(--glass-stroke); animation: msgIn .4s var(--ease) both; }
.tw-opt:nth-child(2) { animation-delay: .1s; } .tw-opt:nth-child(3) { animation-delay: .2s; }
.tw-opt .em { flex: none; width: 36px; text-align: center; font-size: 28px; } .tw-opt span { flex: 1; } .tw-opt b { display: block; font-size: 15px; } .tw-opt small { display: block; font-size: 12.5px; color: var(--l2); line-height: 1.3; }
.tw-opt:active { transform: scale(.98); }

/* ---------- big screen: agent duel ---------- */
.du { display: grid; grid-template-columns: 470px 1fr 480px; gap: 28px; height: 100%; }
.du-brief { padding: 30px; display: flex; flex-direction: column; gap: 6px; }
.du-brief .top2 { display: flex; align-items: center; gap: 18px; margin-bottom: 10px; } .du-brief .top2 b { display: block; font-size: 32px; } .du-brief .top2 small { font-size: 19px; color: var(--l2); }
.du-ids { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 16px; }
.du-ids .li { display: flex; align-items: center; gap: 14px; } .du-ids b { display: block; font-size: 20px; } .du-ids small { display: block; font-size: 16px; color: var(--l2); }
.du-chat { padding: 26px 30px; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.du-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.du-wait { flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; align-content: center; gap: 30px; text-align: center; }
.du-wait p { flex-basis: 100%; margin: 0; font-size: 28px; color: var(--cp-text-soft); }
.vs3 { font-size: 40px; font-weight: 800; color: var(--l3); }
.du-msgs { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 14px; justify-content: flex-end; }
.dm { max-width: 82%; align-self: flex-start; padding: 16px 22px; border-radius: 28px 28px 28px 8px; background: #2c2c2e; font-size: 25px; line-height: 1.32; animation: msgIn .45s var(--ease) both; }
.dm.me { align-self: flex-end; border-radius: 28px 28px 8px 28px; background: linear-gradient(135deg, #2f9bff, #2f6bff); }
.dm.sys { align-self: center; display: inline-flex; align-items: center; gap: 12px; padding: 10px 20px; border-radius: 22px; font-size: 20px; font-weight: 600; color: var(--l2); background: rgba(255,255,255,.06); }
.dm.sys.ok { color: var(--green); background: rgba(48,209,88,.12); }
.dw { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: rgba(255,255,255,.75); margin-bottom: 6px; }
.dw em { font-style: normal; font-weight: 600; font-size: 15px; color: rgba(255,255,255,.55); padding: 2px 10px; border-radius: 10px; background: rgba(255,255,255,.1); }
.du-side { display: flex; flex-direction: column; gap: 22px; }
.du-score { padding: 26px 30px; display: flex; flex-direction: column; gap: 14px; }
.hva { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .hva div { padding: 14px 18px; border-radius: 20px; background: rgba(255,255,255,.05); }
.hva b { display: block; font-size: 56px; font-weight: 800; letter-spacing: -.03em; line-height: 1; } .hva span { font-size: 19px; color: var(--l2); }
.hva .win { background: rgba(100,210,255,.12); } .hva .win b { color: #64d2ff; }
.hvb { height: 12px; border-radius: 6px; background: rgba(255,159,10,.5); overflow: hidden; } .hvb i { display: block; height: 100%; background: #64d2ff; border-radius: 6px; }
.du-why { padding: 26px 30px; } .du-why p { margin: 12px 0 0; font-size: 26px; line-height: 1.35; font-weight: 600; }

/* ---------- big screen: hack the dealer ---------- */
.hk { display: grid; grid-template-columns: 450px 1fr 470px; gap: 28px; height: 100%; }
.hk-l { display: flex; flex-direction: column; gap: 22px; }
.hk-count { padding: 24px 30px; } .hk-count b { display: block; font-size: 84px; font-weight: 800; letter-spacing: -.04em; line-height: 1.02; }
.hk-zero { display: inline-flex; align-items: baseline; gap: 12px; margin-top: 6px; padding: 8px 16px; border-radius: 16px; background: rgba(48,209,88,.14); color: var(--green); font-size: 22px; font-weight: 700; }
.hk-zero span { font-size: 40px; font-weight: 800; }
.hk-layers { flex: 1; padding: 24px 26px; display: flex; flex-direction: column; gap: 6px; }
.hk-layers .li { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 6px 0; }
.hk-layers b { display: block; font-size: 20px; } .hk-layers small { display: block; font-size: 16px; color: var(--l2); }
.hk-layers em { font-style: normal; font-family: var(--mono); font-size: 18px; color: var(--green); }
.hk-feed { padding: 26px 28px; display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: hidden; }
.hkf { display: grid; grid-template-columns: 50px 1fr 260px; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 20px; background: rgba(255,255,255,.04); }
.hkf .av { width: 48px; height: 48px; font-size: 20px; }
.hkf b { display: block; font-size: 19px; color: var(--l2); } .hkf q { display: block; font-family: var(--mono); font-size: 19px; line-height: 1.3; color: #fff; quotes: "“" "”"; }
.hkf em { font-style: normal; font-size: 19px; font-weight: 700; color: var(--green); padding: 8px 12px; border-radius: 14px; background: rgba(48,209,88,.12); }
.hkf em small { display: block; font-size: 14.5px; font-weight: 600; color: var(--l2); margin-top: 2px; }
.hkf em.soft { color: #ffd60a; background: rgba(255,214,10,.1); } .hkf em.pend { color: var(--l2); background: rgba(255,255,255,.06); display: flex; align-items: center; gap: 10px; }
.hkf.me { background: rgba(255,55,95,.12); box-shadow: inset 0 0 0 2px rgba(255,55,95,.55); }
.hk-fame { padding: 26px 28px; display: flex; flex-direction: column; gap: 10px; }
.hkh { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; box-shadow: inset 0 -1px 0 rgba(255,255,255,.06); }
.hkh .rk { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; font-weight: 800; }
.hkh .rk.g { background: #ffd60a; color: #3a2a00; } .hkh .rk.s { background: #c7c7cc; color: #222; } .hkh .rk.b { background: #c58b56; color: #2a1606; }
.hkh q { display: block; font-size: 20px; line-height: 1.3; font-weight: 600; } .hkh small { display: block; font-size: 16px; color: var(--l2); margin-top: 2px; }
.hkh b { font-size: 26px; color: var(--yellow); } .hkh.me q { color: #ff8fa6; }
.hk-soc { margin-top: auto; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; background: rgba(255,255,255,.05); }
.hk-soc b { display: block; font-size: 20px; } .hk-soc small { display: block; font-size: 16px; color: var(--l2); }

/* ---------- big screen: plot twist ---------- */
.tw { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 24px; }
.tw-ready { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 26px; }
.tw-ready .eyebrow { color: var(--green); }
.tw-go { display: inline-flex; align-items: center; gap: 16px; height: 96px; padding: 0 44px; border-radius: 48px; font-size: 36px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #ff453a, #ff9f0a); box-shadow: 0 20px 60px rgba(255,69,58,.45), inset 0 1px 0 rgba(255,255,255,.3); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 20px 90px rgba(255,69,58,.75), inset 0 1px 0 rgba(255,255,255,.3); transform: scale(1.03); } }
.tw-banner { display: flex; align-items: center; gap: 26px; padding: 22px 30px; border-radius: 30px; background: linear-gradient(90deg, rgba(255,69,58,.28), rgba(255,159,10,.14)); box-shadow: inset 0 0 0 2px rgba(255,69,58,.55); }
.tw-banner.shake { animation: shake .6s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake { 10%, 90% { transform: translateX(-3px); } 20%, 80% { transform: translateX(6px); } 30%, 50%, 70% { transform: translateX(-10px); } 40%, 60% { transform: translateX(10px); } }
.tw-tag { display: inline-flex; align-items: center; gap: 12px; padding: 10px 20px; border-radius: 20px; background: #ff453a; font-size: 26px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.tw-banner b { display: block; font-size: 40px; letter-spacing: -.02em; } .tw-banner small { display: block; font-size: 25px; color: var(--cp-text-soft); }
.tw-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr; align-items: stretch; gap: 10px; }
.tw-step { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 24px; background: rgba(28,28,30,.9); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); position: relative; }
.tw-step b { font-size: 22px; margin-top: 6px; } .tw-step small { font-size: 17px; color: var(--l2); line-height: 1.3; } .tw-step em { position: absolute; right: 16px; top: 16px; font-style: normal; font-family: var(--mono); font-size: 16px; color: var(--green); }
.tw-ar { align-self: center; color: var(--l3); }
.tw-bottom { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.tw-who, .tw-tally { padding: 24px 28px; display: flex; flex-direction: column; gap: 8px; }
.tw-g { display: grid; grid-template-columns: 46px 190px 1fr auto; align-items: center; gap: 14px; padding: 7px 10px; border-radius: 16px; }
.tw-g .av { width: 44px; height: 44px; font-size: 19px; } .tw-g b { font-size: 21px; } .tw-g small { font-size: 18px; color: var(--l2); } .tw-g em { font-style: normal; font-size: 17px; font-weight: 700; color: var(--green); }
.tw-g.me { background: rgba(255,55,95,.12); box-shadow: inset 0 0 0 2px rgba(255,55,95,.5); } .tw-g.me em { color: #ff8fa6; }
.tw-bar { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-radius: 18px; overflow: hidden; background: rgba(255,255,255,.04); font-size: 23px; font-weight: 600; }
.tw-bar span, .tw-bar b { position: relative; z-index: 1; } .tw-bar b { font-size: 28px; }
.tw-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: rgba(255,214,10,.16); transition: width .8s var(--ease); }
.tw-bar.me { box-shadow: inset 0 0 0 2px #ffd60a; } .tw-bar.me i { background: rgba(255,214,10,.3); }

/* ---------- cover: the third story ---------- */
.cv-cards { grid-template-rows: 380px 290px; }
.cv-card { height: auto; }
.cv-custom { grid-column: 1 / -1; display: flex; background: radial-gradient(120% 140% at 100% 0%, rgba(191,90,242,.32), rgba(10,132,255,.12) 45%, #111 75%); box-shadow: inset 0 0 0 1.5px rgba(191,90,242,.45); }
.cv-custom.light { background: radial-gradient(120% 140% at 100% 0%, rgba(191,90,242,.32), rgba(10,132,255,.12) 45%, #111 75%); }
.cv-custom canvas { position: absolute; right: 0; top: 0; bottom: 0; width: 56%; height: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%); }
.dr { grid-template-columns: 560px minmax(0, 1fr) 470px; }
.vs .ppl { flex-wrap: wrap; row-gap: 12px; }
.vs .person small { white-space: normal; }
.cvc-l { position: relative; z-index: 1; width: 52%; padding: 26px 28px; display: flex; flex-direction: column; gap: 12px; }
.cvc-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #d6a8ff; }
.lab2 { display: flex; align-items: center; gap: 14px; } .lab2 b { display: block; font-size: 32px; letter-spacing: -.02em; } .lab2 small { font-size: 19px; color: var(--cp-text-soft); }
.cvc-l p { margin: 0; font-size: 21px; line-height: 1.35; color: var(--cp-text-soft); font-style: italic; }
.cvc-meta { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 17px; color: var(--l2); }
.cv-custom.empty .cvc-l { width: 100%; }
.cvc-h { font-size: 32px; letter-spacing: -.02em; }
.cvc-in { display: flex; align-items: center; gap: 12px; height: 62px; padding: 0 20px; border-radius: 20px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); font-size: 22px; color: var(--l2); }
.cvc-try { display: flex; gap: 10px; flex-wrap: wrap; } .cvc-try span { padding: 8px 14px; border-radius: 16px; background: rgba(255,255,255,.07); font-size: 18px; font-weight: 600; color: var(--cp-text-soft); }

/* ---------- reveal: skeleton column + dense journey ---------- */
.mx .mxg { color: #e6c8ff; background: rgba(191,90,242,.08); }
.mx .hh.mxg { color: #fff; background: rgba(191,90,242,.2); }
.tl.dense::before { left: 152px; }
.tl.dense .tlr { padding: 6px 0; gap: 16px; grid-template-columns: 110px 40px 52px 1fr; }
.tl.dense .tlr b { font-size: 25px; } .tl.dense .tlr small { font-size: 18.5px; }

/* ---------- the prompt sheet ---------- */
.gen { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(0,0,0,.55); backdrop-filter: blur(14px); animation: fadeIn .25s ease both; }
.gen[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } }
.gen-card { width: min(1180px, 94vw); max-height: 90vh; display: flex; flex-direction: column; border-radius: 28px; background: rgba(28,28,30,.96); box-shadow: 0 40px 120px rgba(0,0,0,.7), inset 0 0 0 .5px rgba(255,255,255,.12); overflow: hidden; animation: sheetIn .45s var(--spring) both; }
@keyframes sheetIn { from { transform: translateY(30px) scale(.97); opacity: 0; } }
.gen-top { display: flex; align-items: center; gap: 14px; padding: 18px 22px; box-shadow: inset 0 -.5px 0 var(--sep); }
.gen-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(140deg, #0a84ff, #5e5ce6 55%, #bf5af2); }
.gen-top b { display: block; font-size: 19px; } .gen-top small { font-size: 13px; color: var(--l2); }
.gen-x { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--fill3); }
.gen-body { display: grid; grid-template-columns: 360px 1fr; min-height: 0; flex: 1; }
.gen-form { padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; box-shadow: inset -.5px 0 0 var(--sep); overflow-y: auto; }
.gen-form label { font-size: 13px; font-weight: 600; color: var(--l2); margin-top: 6px; } .gen-form label small { color: var(--l3); font-weight: 500; }
.gen-form textarea, .gen-form input { width: 100%; border: 0; outline: 0; border-radius: 14px; padding: 12px 14px; background: var(--cp-surface-soft); color: #fff; font: 500 15px/1.4 var(--font); resize: none; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .2s; }
.gen-form textarea:focus, .gen-form input:focus { box-shadow: inset 0 0 0 2px var(--cp-accent); }
.gen-form textarea.shake { animation: shake .5s both; box-shadow: inset 0 0 0 2px var(--red); }
.gen-try { display: flex; flex-direction: column; gap: 6px; }
.gen-try button { text-align: left; padding: 9px 12px; border-radius: 12px; background: var(--fill4); font-size: 14px; font-weight: 600; color: var(--cp-text-soft); box-shadow: inset 0 0 0 .5px var(--glass-stroke); }
.gen-try button:hover { background: var(--fill3); } .gen-try button:disabled { opacity: .45; }
.gen-form .btn { margin-top: 10px; background: linear-gradient(120deg, #0a84ff, #5e5ce6 60%, #bf5af2); }
.gen-note { display: flex; gap: 6px; margin: 4px 0 0; font-size: 12px; line-height: 1.4; color: var(--l3); }
.gen-prev { padding: 20px 22px; display: flex; flex-direction: column; min-height: 520px; }
.gen-idle { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 18px; color: var(--l3); }
.gen-idle p { margin: 0; text-align: center; font-size: 14px; }
.gen-skel { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gs { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1.5px dashed rgba(255,255,255,.12); font-size: 14px; font-weight: 600; }
.gen-run { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; min-height: 0; }
.gen-steps { display: flex; flex-direction: column; gap: 6px; }
.gst { display: grid; grid-template-columns: 34px 1fr 22px; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 14px; opacity: .3; transition: opacity .3s, background .3s; }
.gst .gi { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--fill3); }
.gst b { display: block; font-size: 14px; } .gst small { display: block; font-size: 12px; color: var(--l2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; visibility: hidden; }
.gst em { font-style: normal; color: var(--green); display: grid; place-items: center; }
.gst.on { opacity: 1; background: rgba(10,132,255,.1); } .gst.on .gi { background: rgba(10,132,255,.25); color: #64b5ff; }
.gst.done { background: transparent; } .gst.done .gi { background: rgba(48,209,88,.16); color: var(--green); } .gst.done small { visibility: visible; }
.gen-out { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.go-brand { display: flex; align-items: center; gap: 12px; min-height: 52px; animation: msgIn .4s var(--ease) both; }
.go-brand b { display: block; font-size: 18px; } .go-brand small { font-size: 12.5px; color: var(--l2); }
.go-sw { margin-left: auto; display: flex; gap: 5px; } .go-sw i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.go-3d { position: relative; height: 230px; border-radius: 18px; overflow: hidden; background: #111; opacity: 0; transform: scale(.96); transition: opacity .5s, transform .6s var(--spring); }
.go-3d.in { opacity: 1; transform: none; } .go-3d canvas { width: 100%; height: 100%; display: block; }
.go-bits { display: flex; flex-direction: column; gap: 8px; }
.go-row { display: flex; flex-wrap: wrap; gap: 6px; }
.go-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 10px; background: var(--fill4); font-size: 12.5px; font-weight: 600; color: var(--cp-text-soft); }
.go-chip i { width: 12px; height: 12px; border-radius: 50%; }
.go-agent { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--fill4); }
.go-agent b { display: block; font-size: 13.5px; } .go-agent small { display: block; font-size: 11.5px; color: var(--l2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 330px; }
.go-sys { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; } .go-sys b { margin-right: 6px; }
.gen-foot { display: flex; align-items: center; gap: 10px; padding-top: 14px; margin-top: 12px; box-shadow: inset 0 .5px 0 var(--sep); min-height: 58px; }
.gen-foot .btn { width: auto; height: 42px; padding: 0 18px; font-size: 15px; border-radius: 12px; }
.gen-meter { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--l2); } .gen-meter.ok { color: var(--green); }