:root { --ink:#172033; --muted:#667085; --line:#e4e7ec; --brand:#5b55e8; --soft:#f6f7ff; --good:#0f9d6a; --danger:#b42318; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:#f5f6fa; color:var(--ink); font:15px/1.5 Inter,"Microsoft YaHei",system-ui,sans-serif; }
button,input,select { font:inherit; }
button { border:0; border-radius:8px; cursor:pointer; background:var(--brand); color:#fff; padding:10px 15px; font-weight:650; }
button.secondary { background:#fff; color:var(--brand); border:1px solid #cfcdf8; }
button.danger { background:#fff1f0; color:var(--danger); border:1px solid #fecdca; }
button:disabled { opacity:.55; cursor:not-allowed; }
.shell { max-width:1180px; padding:38px 22px 70px; margin:auto; }
.top { display:flex; justify-content:space-between; align-items:end; gap:16px; margin-bottom:25px; }
h1,h2,h3,p { margin-top:0; } h1 { font-size:28px; margin-bottom:5px; } h2 { font-size:20px; font-weight:800; margin-bottom:16px; } .muted { color:var(--muted); }
.grid { display:grid; grid-template-columns:360px 1fr; gap:20px; align-items:start; }
.card { background:#fff; border:1px solid var(--line); box-shadow:0 2px 8px #1018280a; border-radius:13px; padding:22px; }
label { display:block; color:#344054; font-size:13px; font-weight:600; margin:0 0 12px; }
input { width:100%; display:block; border:1px solid #d0d5dd; border-radius:7px; padding:9px 10px; margin-top:5px; color:var(--ink); background:#fff; }
select { width:100%; display:block; border:1px solid #d0d5dd; border-radius:7px; padding:9px 10px; margin-top:5px; color:var(--ink); background:#fff; }
.actions { display:flex; gap:9px; flex-wrap:wrap; margin-top:16px; }
.customers { display:grid; gap:12px; }
.customer { border:1px solid var(--line); border-radius:10px; padding:15px; }
.customer-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.customer h3 { margin:0; font-size:16px; }.customer p { margin:3px 0 0; font-size:13px; color:var(--muted); }
.progress-edit { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:14px 0; }
.check { display:flex; align-items:center; gap:7px; margin:0; font-size:13px; font-weight:500; }.check input { width:auto; margin:0; accent-color:var(--brand); }
.link-box { border-radius:8px; padding:9px; background:var(--soft); color:#3c378f; font-size:12px; word-break:break-all; margin-top:12px; }
.toast { position:fixed; bottom:25px; left:50%; translate:-50% 0; background:#172033; color:#fff; border-radius:9px; padding:10px 15px; opacity:0; pointer-events:none; transition:.2s; }.toast.show { opacity:1; }
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:22px; background:#f4f6f8; }.login-card { width:min(100%,400px); background:#fff; padding:36px; border-radius:12px; box-shadow:0 10px 28px #10182812; border:1px solid #e4e7ec; }.login-card h1 { font-size:24px; margin:0 0 24px; }.login-card button { width:100%; margin-top:5px; }.login-error { background:#fff1f0; color:var(--danger); border:1px solid #fecdca; border-radius:7px; padding:8px 10px; font-size:13px; margin:-2px 0 12px; }
.portal { max-width:830px; }.hero { background:#eef2f6; color:#1f2937; border:1px solid #dfe5ec; padding:24px 30px; border-radius:12px; margin-bottom:18px; }.hero h1 { margin:0; }
.brand-banner { display:flex; justify-content:center; align-items:center; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:18px; }.brand-banner img { display:block; width:min(100%,340px); height:auto; border-radius:7px; }
.details { display:grid; grid-template-columns:repeat(2,1fr); gap:0; }.detail { padding:14px 0; border-bottom:1px solid var(--line); font-size:16px; font-weight:600; }.detail:nth-child(odd) { padding-right:20px; }.detail b { display:block; color:var(--muted); font-size:13px; font-weight:600; margin-bottom:3px; }
.timeline { position:relative; display:grid; gap:0; }.step { position:relative; display:grid; grid-template-columns:34px 1fr; min-height:65px; }.dot { position:relative; width:26px; height:26px; border:2px solid #d0d5dd; border-radius:50%; background:#fff; text-align:center; line-height:22px; color:#98a2b3; font-size:12px; font-weight:700; z-index:1; }.step:not(:last-child)::after { content:""; position:absolute; width:2px; top:27px; bottom:0; left:12px; background:#e4e7ec; }.step.done .dot { color:#fff; background:var(--good); border-color:var(--good); }.step.done:not(:last-child)::after { background:var(--good); }.step.active .dot { border-color:var(--brand); box-shadow:0 0 0 5px #5b55e81a; color:var(--brand); }.step-title { padding:2px 0; font-weight:700; }.step-note { color:var(--muted); font-size:13px; margin-top:3px; }.payment { background:#f9f9ff; border:1px solid #dfddff; padding:14px; border-radius:9px; margin:7px 0 18px 34px; }.payment code { display:block; font-size:15px; word-break:break-all; padding:7px 0; color:#302c82; }.error { margin:80px auto; text-align:center; }.hidden { display:none!important; }
.payment-pending { display:inline-block; margin-top:5px; color:#9a6700; background:#fff8e6; border:1px solid #f7d687; border-radius:7px; padding:8px 10px; font-size:13px; font-weight:600; }
.payment-note { margin:0 0 10px; color:#667085; font-size:13px; }
.qr-preview { display:block; width:150px; height:150px; object-fit:contain; margin-top:8px; border:1px solid var(--line); border-radius:8px; padding:4px; }.client-qr-code { display:block; width:min(100%,220px); height:auto; object-fit:contain; margin:9px 0; border:1px solid var(--line); border-radius:8px; padding:5px; background:#fff; }
@media (max-width:760px) { .grid { grid-template-columns:1fr; }.shell { padding:25px 15px; }.top { align-items:start; flex-direction:column; }.progress-edit { grid-template-columns:1fr; }.details { grid-template-columns:1fr; }.detail:nth-child(odd) { padding-right:0; } }