/* Client app: login / signup / forgot, the /start wizard, dashboard, order page, account.
   Loaded only on those pages (head: front-matter). Everything here builds on site.css components. */

/* ---------- auth pages ---------- */
.page-auth main{min-height:calc(100vh - var(--nav-h) - 120px)}
.auth-card{margin-top:44px;margin-bottom:28px}
.auth-card h1{font-size:27px;letter-spacing:-.035em}
.auth-card .sub{color:var(--muted);font-size:15px;margin-top:-8px}
.auth-card form{display:grid;gap:14px}
.auth-card .btn.block{height:50px}
.auth-card .foot{font-size:14px;color:var(--muted);text-align:center}
.auth-card .foot a,.auth-foot a{color:var(--ink);font-weight:600;text-underline-offset:3px}
.auth-foot{max-width:440px;margin:0 auto 72px;text-align:center;font-size:13px;color:var(--faint)}
.auth-skel{display:grid;gap:14px}
.auth-skel .skeleton{height:46px;border-radius:12px}
.auth-skel .skeleton.t{height:30px;width:60%}
.auth-skel .skeleton.s{height:18px;width:80%}
.field .lrow{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.field .lrow a{font-size:12.5px;color:var(--muted);text-underline-offset:3px}
.auth-inline{display:grid;gap:14px;padding:20px;border-radius:var(--r-inner);background:#fff;box-shadow:inset 0 0 0 1.5px var(--ink)}
.auth-inline h3{font-size:17px}
.auth-inline .btn.block{height:48px}
.auth-inline .foot{font-size:13.5px;color:var(--muted)}
.auth-inline .foot a,.auth-inline .foot .link{color:var(--ink);font-weight:600;text-underline-offset:3px}
.signed-as{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-inner);background:var(--soft);font-size:14px}
.signed-as .grow{flex:1;min-width:0}
.signed-as b{display:block;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.signed-as span{display:block;color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- /start wizard ---------- */
.wiz-wrap{max-width:1040px;padding-top:28px;padding-bottom:72px}
.wiz-top{display:grid;gap:10px;margin-bottom:18px}
.wiz-top .steps{overflow:hidden}
.wiz-progress{display:none;gap:12px;align-items:center;font:600 12.5px var(--mono);color:var(--muted);letter-spacing:.02em}
.wiz-progress .progress{flex:1}
.wiz-progress .progress i{transition:width .3s var(--ease)}
.wiz{display:grid;gap:22px;padding:28px}
.wiz-q{display:grid;gap:18px;animation:qin .32s var(--ease-out)}
@keyframes qin{from{opacity:0;transform:translateY(8px)}}
.wiz-q .qh{display:grid;gap:8px}
.wiz-q h2{font-size:clamp(24px,3vw,31px);letter-spacing:-.035em}
.wiz-q .qh p{color:var(--muted);font-size:15.5px;max-width:52ch}
.wiz-q .lead{font-size:16px}
.wiz .radio-card{padding:18px;gap:8px;min-height:88px}
.wiz .radio-card .t{font-size:16px;padding-right:22px;overflow-wrap:anywhere}
.wiz .radio-card .t svg{flex:none}
.wiz .radio-card .d{font-size:13.5px}
.wiz .radio-card .p{display:flex;align-items:baseline;gap:5px}
.wiz .radio-card .p small{font-size:12.5px;font-weight:500;color:var(--muted);letter-spacing:0}
.wiz .radio-card .p.free{color:var(--green)}
.wiz .radio-cards.c2 .radio-card.wide{grid-column:1/-1}
.rc-tag{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:99px;background:var(--green-soft);color:var(--green);font:600 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.wiz form,.wiz .fields{display:grid;gap:16px}
.wiz .fields .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.howto{display:grid;gap:12px;padding:18px 20px;border-radius:var(--r-inner);background:var(--soft)}
.howto .hd{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:600;font-size:15px}
.howto .hd .btn{flex:none}
.howto ol{margin:0;padding-left:22px;display:grid;gap:8px;font-size:14.5px;line-height:1.55}
.howto b{font-weight:600;background:#fff;padding:1px 7px;border-radius:7px;box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap}
.howto .note{font-size:13px;color:var(--muted);line-height:1.5}
.howto .note b{background:transparent;box-shadow:none;padding:0;color:var(--ink)}
.method-extra{display:grid;gap:12px;padding:16px;border-radius:var(--r-inner);background:#fff;box-shadow:inset 0 0 0 1px var(--line);animation:qin .25s var(--ease-out)}
.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chips .lbl{font-size:13px;color:var(--muted);margin-right:4px}
.pending-file{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--soft);font-size:14px}
.pending-file svg{width:16px;height:16px;color:var(--muted);flex:none}
.pending-file .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.pending-file .s{color:var(--faint);font-size:12.5px;font-family:var(--mono);white-space:nowrap}
.shot-prev{width:100%;max-height:220px;object-fit:contain;border-radius:12px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
.sum-card{border-radius:var(--r-inner);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;background:#fff}
.sum-row{display:grid;grid-template-columns:118px minmax(0,1fr) auto;gap:10px;padding:12px 16px;border-top:1px solid var(--line);font-size:14px;align-items:start}
.sum-row:first-child{border-top:0}
.sum-row .k{color:var(--muted)}
.sum-row .v{min-width:0;overflow-wrap:anywhere}
.sum-row .v small{display:block;color:var(--muted);font-size:13px}
.sum-row .link{font-size:13px;white-space:nowrap}
.price-lines{display:grid;gap:8px;font-size:14.5px;padding:16px;border-radius:var(--r-inner);background:var(--soft)}
.price-lines .pl{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.price-lines .pl .m{font-variant-numeric:tabular-nums;font-weight:600}
.price-lines .pl.disc{color:var(--green)}
.price-lines .pl.total{font-weight:700;font-size:18px;padding-top:10px;border-top:1px solid var(--line)}
.price-lines .pl.total .m{font-size:20px;letter-spacing:-.02em}
.code-row{display:grid;gap:6px}
.code-row .input-row input{text-transform:uppercase;font-family:var(--mono);font-weight:600;letter-spacing:.06em}
.code-row .input-row .btn{height:46px;flex:none}
.code-ok{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--green);font-weight:600}
.code-ok svg{width:16px;height:16px}
.place{display:grid;gap:12px}
.place .btn.lg{height:56px}
.place .terms{font-size:12.5px;color:var(--faint);text-align:center;line-height:1.5}
.place .terms a{color:var(--muted)}
.summary .panel{padding:20px;display:grid;gap:14px}
.summary .panel h4{font-size:12px;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:600}
.summary .srow{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.summary .srow .k{color:var(--muted)}
.summary .srow .v{font-weight:600;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.summary .srow.total{padding-top:12px;border-top:1px solid var(--line);font-size:16px}
.summary .srow.total .v{font-size:20px;letter-spacing:-.03em}
.summary .trust-list{display:grid;gap:8px;font-size:13.5px;color:var(--muted);padding-top:12px;border-top:1px solid var(--line)}
.summary .trust-list span{display:flex;gap:8px;align-items:flex-start;line-height:1.4}
.summary .trust-list svg{width:16px;height:16px;flex:none;color:var(--green);margin-top:2px}
.wiz-saved{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--faint)}
.wiz-saved svg{width:14px;height:14px}
.wizard-nav .btn svg{width:16px;height:16px}
@media (max-width:900px){.wiz-top .steps .s span{display:none}.wizard .summary{display:none}}
@media (max-width:600px){.wiz-top .steps{display:none}.wiz-progress{display:flex}.wiz{padding:20px}.wiz .fields .two{grid-template-columns:1fr}.sum-row{grid-template-columns:1fr;gap:4px}.sum-row .k{font-size:12.5px}}

/* ---------- app shell shared ---------- */
body.app .app-main{max-width:1180px}
.app-head .meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;color:var(--muted);font-size:14px;margin-top:8px}
.app-head .kicker{display:block;margin-bottom:6px}
.app-head .btn svg{width:16px;height:16px}
.offline-state,.err-state{display:grid;gap:10px;justify-items:center;text-align:center;padding:40px 20px;color:var(--muted)}
.skel-rows{display:grid;gap:10px}
.skel-rows .skeleton{height:66px;border-radius:14px}
.skel-lines{display:grid;gap:10px}
.skel-lines .skeleton{height:16px}
.skel-lines .skeleton.w60{width:60%} .skel-lines .skeleton.w40{width:40%} .skel-lines .skeleton.w80{width:80%}
.panel .ptitle{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.panel .ptitle h3{font-size:17px}
.panel .ptitle .btn svg{width:14px;height:14px}

/* ---------- dashboard ---------- */
.dash-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.order-row .avatar{background:var(--soft);font-weight:700}
.order-row .sub{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.order-row .sub .mono{font-size:12px}
.order-row .chip{flex:none}
.order-row .chev{color:var(--faint);display:grid}
.order-row .chev svg{width:18px;height:18px}
.empty.big{padding:56px 20px}
.empty.big .ic{width:64px;height:64px;border-radius:20px}
.empty.big .ic svg{width:28px;height:28px}
.empty.big b{font-size:20px;letter-spacing:-.02em}
.empty.big .btn{margin-top:8px}
.help-card p{color:var(--muted);font-size:14.5px}
.help-card .btn{justify-self:start}
@media (max-width:900px){.dash-grid{grid-template-columns:1fr}}
@media (max-width:600px){.order-row .chev{display:none}.order-row .chip{height:24px;font-size:11.5px;padding:0 9px}}

/* ---------- order page ---------- */
.order-back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;font-size:13.5px;font-weight:500;margin-bottom:10px}
.order-back svg{width:15px;height:15px}
.order-back:hover{color:var(--ink)}
.order-id{display:inline-flex;align-items:center;gap:2px;height:28px;padding:0 2px 0 10px;border-radius:99px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font:600 12.5px var(--mono);letter-spacing:.04em;color:var(--ink)}
.order-id .btn.icon{width:24px;height:24px;border-radius:99px;box-shadow:none;background:transparent}
.order-id .btn.icon svg{width:13px;height:13px}
.order-id .btn.icon:hover{background:var(--soft);transform:none}
.banner{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:var(--r-card);background:#fff;box-shadow:0 0 0 1px var(--line),var(--shadow)}
.banner .ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none;background:var(--soft);color:var(--ink)}
.banner .ic svg{width:20px;height:20px}
.banner.info .ic{background:var(--blue-soft);color:var(--blue)}
.banner.warn .ic{background:var(--amber-soft);color:var(--amber)}
.banner.warn{box-shadow:0 0 0 1px var(--amber-line),var(--shadow)}
.banner.ok .ic{background:var(--green-soft);color:var(--green)}
.banner.ok{box-shadow:0 0 0 1px var(--green-line),var(--shadow)}
.banner .bd{display:grid;gap:4px;flex:1;min-width:0}
.banner h3{font-size:18px}
.banner p{color:var(--muted);font-size:14.5px;line-height:1.5}
.banner .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.banner .sub-panel{margin-top:10px;padding:12px 14px;border-radius:12px;background:var(--soft);font-size:14px;line-height:1.5;display:grid;gap:8px}
.banner .sub-panel .btn{justify-self:start}
.ocols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.ocols .omain{grid-column:1;grid-row:1 / span 2;display:grid;gap:20px;min-width:0}
.ocols .oside1{grid-column:2;grid-row:1;display:grid;gap:20px;min-width:0}
.ocols .oside2{grid-column:2;grid-row:2;display:grid;gap:20px;min-width:0}
.engineer{display:flex;gap:12px;align-items:center}
.engineer .avatar{width:44px;height:44px;font-size:16px;display:grid;place-items:center}
.engineer b{display:block;font-size:15px}
.engineer span:not(.avatar):not(.kicker){display:block;font-size:13px;color:var(--muted)}
.engineer .kicker{display:block}
.chat-panel .chat{min-height:380px;max-height:640px}
.chat .msg .avatar{width:34px;height:34px;font-size:13px}
.chat .msg .bubble a{color:inherit;text-underline-offset:3px}
.chat .msg .att{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.chat .msg .att svg{width:14px;height:14px}
.chat .meta.pending{color:var(--faint)}
.chat .compose .btn svg{width:16px;height:16px}
.chat-hint{font-size:12px;color:var(--faint);margin-top:6px;text-align:right}
.file-list{display:grid;gap:8px}
.file-row .btn{flex:none}
.file-row .btn svg{width:14px;height:14px}
.file-row .d{color:var(--faint);font-size:12px;white-space:nowrap}
.upload-prog{display:grid;gap:6px;font-size:13px;color:var(--muted)}
.kv-list{display:grid;gap:14px}
.kv-list .kvi{display:grid;gap:4px}
.kv-list .kvi .k{font:600 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.kv-list .kvi .v{font-size:14.5px;overflow-wrap:anywhere;line-height:1.5}
.kv-list .kvi .v a{color:var(--ink);text-underline-offset:3px}
.kv-list .kvi .v .muted{font-size:13.5px}
.rej-text{white-space:pre-wrap;font-size:13.5px;line-height:1.55;color:#2b2f36;background:var(--soft);padding:12px 14px;border-radius:12px;max-height:190px;overflow:auto;font-family:var(--font)}
.help-foot{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-inner);background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:14px;color:var(--muted);line-height:1.5}
.help-foot svg{width:18px;height:18px;flex:none;color:var(--ink);margin-top:2px}
.help-foot a{color:var(--ink);font-weight:600;text-underline-offset:3px}
.timeline .d .note{display:block;color:var(--ink);font-size:13.5px;margin-top:2px}
@media (max-width:900px){.ocols{grid-template-columns:1fr}.ocols .omain,.ocols .oside1,.ocols .oside2{grid-column:1;grid-row:auto}}
@media (max-width:600px){.banner{padding:16px}.banner .ic{width:36px;height:36px;border-radius:11px}.banner .ic svg{width:18px;height:18px}.chat-panel .chat{min-height:320px;max-height:60vh}}

/* ---------- account ---------- */
.acct-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.acct-grid .col{display:grid;gap:20px;min-width:0}
.acct-grid .panel.pad{display:grid;gap:16px}
.acct-grid form{display:grid;gap:14px}
.acct-grid form .btn{justify-self:start}
.acct-grid .panel h3{font-size:17px}
.acct-grid .panel .desc{color:var(--muted);font-size:14px;margin-top:-8px;line-height:1.5}
.acct-row{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.danger-zone{box-shadow:0 0 0 1px var(--red-line),var(--shadow)}
.partner-card{display:grid;gap:10px}
.partner-card .ic{width:40px;height:40px;border-radius:12px;background:var(--soft);display:grid;place-items:center}
.partner-card .ic svg{width:20px;height:20px}
.partner-card p{color:var(--muted);font-size:14px}
.partner-card .btn{justify-self:start}
@media (max-width:900px){.acct-grid{grid-template-columns:1fr}}