:root{font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif;color:#253039;background:#f6f5f0;font-size:15px;line-height:1.6;--ink:#253039;--muted:#718078;--line:#e2e5db;--brand:#245a47;--light:#edf3ea;--blue:#2462a6;--red:#a64038}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}button,a,input,select{touch-action:manipulation}button{cursor:pointer;border:1px solid var(--line);background:white;color:var(--ink);padding:10px 17px;border-radius:9px;font-weight:600;transition:background .15s}button:hover{background:#edf0e8}button:disabled{opacity:.5;cursor:wait}button.primary{background:var(--brand);color:#fff;border-color:var(--brand)}button.primary:hover{background:#1b4838}button.small{padding:5px 11px;font-size:13px}button.quiet{border-color:transparent;background:transparent}button.danger{color:var(--red)}input,select{width:100%;padding:11px 12px;background:#fff;border:1px solid #cbd4c8;border-radius:8px;color:var(--ink)}input[type=checkbox]{width:18px;height:18px;margin:0 9px 0 0;vertical-align:middle}input:focus,select:focus,button:focus-visible,a:focus-visible{outline:3px solid #b2ccdc;outline-offset:2px}label{display:block;font-size:13px;font-weight:600;margin:15px 0 6px}h1,h2,h3,p{margin-top:0}h1{font-size:40px;letter-spacing:-1.6px;line-height:1.25;margin-bottom:20px}h2{font-size:23px;letter-spacing:-.5px;margin-bottom:8px}h3{font-size:16px;margin-bottom:6px}.muted,.hint{color:var(--muted)}.hint{font-size:13px}.eyebrow{text-transform:uppercase;letter-spacing:2.2px;font-size:11px;font-weight:700;color:#59816a}.loading{padding:70px;text-align:center}.topbar{height:84px;padding:0 40px;background:#ffffffc9;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:15px}.brand{display:flex;align-items:center;gap:12px;color:var(--ink);font-size:20px;font-weight:800;letter-spacing:-.7px}.mark{display:grid;place-items:center;width:40px;height:40px;background:var(--brand);color:#fff;border-radius:12px;font-size:23px}.brand small{display:block;font-size:10px;letter-spacing:2px;color:var(--muted);font-weight:600}.header-actions{display:flex;align-items:center;gap:12px;font-size:13px;flex-wrap:wrap}.tag{display:inline-flex;align-items:center;gap:6px;background:var(--light);color:var(--brand);padding:4px 10px;border-radius:30px;font-size:12px;white-space:nowrap}.dot{width:6px;height:6px;background:#548969;border-radius:50%}.tag.warn{background:#fbefce;color:#886222}.tag.bad{background:#f9e6e1;color:#983a34}.tag.info{background:#eaf0fa;color:#2c6198}.shell{max-width:1260px;margin:auto;padding:38px 40px 60px}.hero{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:70px;margin-bottom:38px}.hero-copy{padding:30px 0}.hero-copy h1{font-size:48px}.hero-copy p{max-width:510px;font-size:16px;color:#637269}.hero-copy .eyebrow{margin-bottom:18px}.hero-foot{margin-top:30px;display:flex;gap:20px;font-size:13px;color:var(--muted)}.card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:27px;box-shadow:0 4px 20px #23302203}.login-card{box-shadow:0 18px 45px #293f2110}.card-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:20px}.card-head h2,.card-head h3{margin:0}.section{margin-top:30px}.section-title{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}.section-title h2{margin:0}.code-row{display:flex;gap:8px;align-items:center}.code-row input{min-width:0}.code-row button{white-space:nowrap}.full{width:100%;margin-top:20px}.notice{border:1px solid #e9dcc0;background:#fff9eb;color:#7d6131;padding:14px 18px;border-radius:10px;font-size:13px;margin-bottom:18px}.notice.error{border-color:#e3b5ab;background:#fff1ed;color:#8a342e}.notice.success{border-color:#b7d1bd;background:#eff8ef;color:#345b3d}.message{position:sticky;top:10px;z-index:5}.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.plan{display:flex;flex-direction:column;position:relative;overflow:hidden}.plan .price{font-size:35px;letter-spacing:-1px;margin:16px 0 14px;font-weight:750}.plan .price small{font-size:13px;color:var(--muted);font-weight:400;letter-spacing:0}.plan .primary{margin-top:auto}.plan ul{padding-left:18px;margin:0 0 23px;color:#637269;font-size:13px}.plan-id{overflow-wrap:anywhere;font-size:12px;color:var(--muted)}.empty{text-align:center;padding:42px 20px;background:#fafbf7;border:1px dashed #d5dbcf;border-radius:12px;color:var(--muted);grid-column:1/-1}.empty strong{display:block;color:var(--ink);font-weight:600;margin-bottom:6px}.table-wrap{overflow:auto;width:100%;border:1px solid var(--line);border-radius:10px}table{border-collapse:collapse;text-align:left;width:100%;font-size:13px;white-space:nowrap}th{background:#f5f7f1;font-size:12px;color:#697669;font-weight:600}td,th{padding:13px 15px;border-bottom:1px solid var(--line)}tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:#fafcf7}td.wrap{white-space:normal;max-width:300px;overflow-wrap:anywhere}.mono{font-family:Consolas,monospace;font-size:12px}footer{border-top:1px solid var(--line);padding:23px 40px;color:var(--muted);font-size:12px;display:flex;justify-content:space-between;gap:16px}.workspace{display:grid;grid-template-columns:210px minmax(0,1fr);min-height:calc(100vh - 84px)}.sidebar{border-right:1px solid var(--line);padding:30px 18px;background:#f0f2eb}.sidebar .eyebrow{padding:0 15px;margin-bottom:18px}.nav-button{width:100%;border:none;background:transparent;text-align:left;margin-bottom:8px;padding:12px 15px;font-size:14px;font-weight:500}.nav-button.active{background:#fff;color:var(--brand);box-shadow:0 3px 7px #23432005;font-weight:700}.main{padding:32px 38px 50px;min-width:0;max-width:1600px;width:100%;margin:auto}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin:25px 0}.stat{padding:20px 22px}.stat p{font-size:12px;color:var(--muted);margin:0}.stat strong{font-size:31px;font-weight:650;display:block;margin-top:8px}.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:18px 0}.filters input{max-width:340px}.filters select{max-width:170px}.pager{display:flex;justify-content:flex-end;gap:10px;margin-top:17px}.detail{margin-top:20px}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 25px}.detail-grid div{padding:10px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.detail-grid dt{font-size:12px;color:var(--muted)}.detail-grid dd{margin:3px 0 0;font-size:14px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px}.wide{grid-column:1/-1}.admin-login{max-width:455px;margin:65px auto 90px}.system-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.system-grid p{margin:0}.status-heading{display:flex;gap:12px;align-items:center}.spacer{margin-top:15px}pre{font:12px/1.7 Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;background:#f5f7f2;padding:15px;border-radius:8px;max-height:320px;overflow:auto}dialog{border:1px solid var(--line);border-radius:15px;padding:25px;max-width:450px;width:calc(100% - 35px);color:var(--ink)}dialog::backdrop{background:#10251966}.disclosure{margin:20px 0;font-size:13px;color:var(--muted)}.disclosure summary{cursor:pointer;color:var(--ink)}.check-label{display:flex;align-items:center;font-weight:400;line-height:1.6} .welcome{padding:10px 0} .welcome .tag{margin-bottom:15px}
@media(min-width:1600px){.main{padding-top:45px}.shell{padding-top:48px}}
@media(max-width:1050px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{gap:30px}.hero-copy h1{font-size:38px}.workspace{grid-template-columns:170px minmax(0,1fr)}.main{padding:26px 22px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.topbar{padding:0 25px}}
@media(max-width:720px){.topbar{height:auto;min-height:76px;padding:14px 18px;align-items:flex-start}.brand{font-size:17px}.header-actions{justify-content:flex-end;gap:6px;max-width:60%}.header-actions .email{max-width:155px;overflow:hidden;text-overflow:ellipsis}.shell{padding:24px 18px 35px}.hero{grid-template-columns:1fr;gap:5px;margin-bottom:30px}.hero-copy{padding:10px 0}.hero-copy h1{font-size:34px}.hero-foot{margin:20px 0}.card{padding:21px}.plans{grid-template-columns:1fr}.workspace{display:block}.sidebar{display:flex;gap:5px;padding:12px;border-right:0;border-bottom:1px solid var(--line);overflow:auto}.sidebar .eyebrow{display:none}.nav-button{white-space:nowrap;width:auto;margin:0;font-size:13px;padding:8px 12px}.main{padding:23px 16px}.form-grid,.system-grid,.detail-grid{grid-template-columns:1fr}.stats{gap:10px}.stat{padding:16px}.stat strong{font-size:26px}h1{font-size:28px}.section-title{align-items:flex-start}.section-title .hint{font-size:11px}.admin-login{margin:35px 18px 70px;max-width:none}footer{padding:20px;flex-direction:column}.filters input,.filters select{max-width:none}.table-wrap{border-radius:8px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.customer-page {
  --bg: #f6f1e7; --paper: #fffcf6; --line: #dbcbb5; --ink: #352b24; --muted: #6f6256;
  --brand: #2f6fa7; --brand-dark: #245a88; --soft: #e1eff9; --control: #947d63;
  --success: #346a40; --warning: #835817; --error: #ab3c32;
  color: var(--ink); background: var(--bg); font-family: 'Microsoft YaHei UI', 'PingFang SC', 'Segoe UI', sans-serif;
  font-size: 16px; line-height: 1.6; font-variant-numeric: tabular-nums;
}
.customer-page *, .customer-page *::before, .customer-page *::after { box-sizing: border-box; }
.customer-page h1, .customer-page h2, .customer-page h3, .customer-page p { margin-top: 0; }
.customer-page h1 { font-size: 28px; line-height: 1.35; margin-bottom: 8px; letter-spacing: 0; }
.customer-page h2 { font-size: 20px; line-height: 1.4; letter-spacing: 0; }
.customer-page h3 { font-size: 18px; }
.customer-page .muted, .customer-page .hint { color: var(--muted); }
.customer-page .hint { font-size: 13px; line-height: 1.6; }
.customer-page .eyebrow { color: var(--muted); font-size: 12px; letter-spacing: 1.4px; }
.customer-page button, .customer-page input, .customer-page select { min-height: 44px; font-size: 14px; font-family: inherit; border-radius: 8px; }
.customer-page button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-color: var(--line); background: var(--paper); color: var(--ink); padding: 9px 16px; }
.customer-page button:hover:not(:disabled) { background: var(--soft); border-color: var(--brand); }
.customer-page button.primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.customer-page button.primary:hover:not(:disabled) { background: var(--brand-dark); border-color: var(--brand-dark); }
.customer-page button:disabled { opacity: 1; background: #e9e4db; color: #706a62; border-color: #c5b8a7; cursor: not-allowed; }
.customer-page input, .customer-page select { border: 1px solid var(--control); background: #fff; color: var(--ink); padding: 10px 12px; min-width: 0; }
.customer-page input::placeholder { color: #786e64; }
.customer-page a { color: var(--brand); }
.customer-page :is(button,input,select,summary,a):focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; box-shadow: none; }
.customer-page .topbar { height: 72px; min-height: 72px; padding: 0 32px; border-bottom: 1px solid var(--line); background: var(--paper); }
.customer-page .brand { font-size: 22px; gap: 12px; letter-spacing: 0; color: var(--ink); flex-shrink: 0; }
.customer-page .brand small { font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.portal-logo { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.portal-icon { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; flex-shrink: 0; }
.portal-icon svg { width: 100%; height: 100%; }
.portal-account { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.portal-account .email { max-width: 250px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size: 14px; }
.portal-layout { display: grid; grid-template-columns: 204px minmax(0, 1fr); max-width: 1600px; margin: auto; min-height: calc(100vh - 72px); }
.portal-sidebar { display: flex; flex-direction: column; padding: 24px 16px; border-right: 1px solid var(--line); background: var(--paper); }
.portal-nav { display: grid; gap: 8px; }
.portal-cdk-form { max-width: 760px; }
.portal-cdk-form > button { margin: 12px 0; }
.portal-cdk-confirm { margin-top: 12px; }
.customer-page .portal-nav-item { border: 0; background: transparent; text-align: left; justify-content: flex-start; padding: 12px 14px; gap: 12px; min-height: 48px; }
.customer-page .portal-nav-item.active { color: var(--brand); background: var(--soft); font-weight: 600; }
.customer-page .portal-help { justify-content: flex-start; margin-top: auto; padding: 16px 12px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--muted); }
.portal-main { width: 100%; max-width: 1240px; margin: 0 auto; padding: 24px 28px 0; min-width: 0; }
.portal-page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.portal-page-heading p { margin-bottom: 0; }
.customer-page .tag { border-radius: 6px; padding: 4px 8px; background: #edf4e9; color: var(--success); font-size: 13px; }
.customer-page .card { border: 1px solid var(--line); background: var(--paper); border-radius: 12px; box-shadow: none; }
.customer-page .notice { font-size: 14px; border-color: #d5b789; background: #fff4e1; color: var(--warning); overflow-wrap: anywhere; }
.customer-page .notice.success { color: var(--success); background: #edf5e9; border-color: #96b68b; }
.customer-page .notice.error { color: var(--error); background: #fff0e9; border-color: #c8988c; }
.customer-page .message { position: static; }
.customer-page .message:empty { display: none; }
.portal-registration { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border: 1px solid #d5b789; background: #fff4e1; color: var(--warning); border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.portal-external { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; text-decoration: none; font-weight: 500; }
.portal-external .portal-icon { width: 16px; height: 16px; }
.portal-purchase-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr); align-items: start; gap: 16px; }
.portal-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; min-width: 0; }
.portal-plans.single-plan { grid-template-columns: 1fr; }
.portal-purchase-layout:has(.portal-plans:not(.single-plan)) { grid-template-columns: 1fr; }
.portal-plan { padding: 24px; min-width: 0; }
.portal-plan-heading { display: flex; align-items: flex-start; gap: 16px; }
.portal-plan-heading > .portal-icon { width: 58px; height: 58px; padding: 11px; color: var(--brand); background: var(--soft); border-radius: 12px; }
.portal-plan-heading > div { min-width: 0; }
.portal-plan h2 { margin: 4px 0 8px; font-size: 22px; overflow-wrap: anywhere; }
.portal-plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.portal-plan .price { font-size: 38px; line-height: 1.3; font-weight: 700; color: var(--brand); letter-spacing: -.7px; }
.portal-plan-price .muted { font-size: 14px; }
.portal-features { padding: 14px 0 0; margin: 16px 0 18px 74px; border-top: 1px solid var(--line); display: grid; gap: 7px; list-style: none; font-size: 14px; }
.portal-features li { display: flex; gap: 12px; }
.portal-features li::before { content: '✓'; color: var(--brand); font-weight: 700; }
.portal-plan .full { width: 100%; margin-top: 0; font-size: 16px; }
.customer-page .portal-purchase-note { text-align: center; margin: 8px 0 14px; overflow-wrap: anywhere; }
.portal-plan-info { font-size: 13px; color: var(--muted); }
.portal-plan-info summary { cursor: pointer; padding: 8px 0; min-height: 36px; }
.portal-plan-info p { margin-bottom: 5px; overflow-wrap: anywhere; }
.portal-steps { padding: 20px; }
.portal-steps > summary { font-weight: 700; font-size: 18px; cursor: pointer; min-height: 32px; }
.portal-step-list { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 20px; }
.portal-step-list li { display: flex; align-items: flex-start; gap: 14px; }
.portal-step-number { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; color: var(--warning); background: #f4eadb; font-weight: 600; font-size: 20px; }
.portal-step-list strong { font-size: 14px; }
.portal-step-list p { margin: 2px 0 0; }
.portal-step-note { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; margin: 0; }
.portal-step-note .portal-icon { width: 18px; height: 18px; }
.portal-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 16px 0 20px; }
.customer-page .portal-shortcut { min-width: 0; text-align: left; justify-content: flex-start; gap: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); padding: 16px; }
.portal-shortcut > .portal-icon:first-child { width: 40px; height: 40px; padding: 8px; border-radius: 10px; background: var(--soft); color: var(--brand); }
.portal-shortcut > .portal-icon:last-child { width: 18px; margin-left: auto; color: var(--muted); }
.shortcut-content { min-width: 0; display: grid; gap: 2px; }
.shortcut-content strong { font-size: 14px; }
.portal-faq { scroll-margin-top: 20px; }
.portal-faq h2 { margin-bottom: 10px; font-size: 18px; }
.portal-faq > .card { padding: 0; overflow: hidden; }
.portal-faq details + details { border-top: 1px solid var(--line); }
.portal-faq summary { display: flex; gap: 12px; align-items: center; padding: 11px 18px; cursor: pointer; font-size: 14px; list-style: none; }
.portal-faq summary::after { content: '›'; font-size: 22px; margin-left: auto; }
.portal-faq details[open] summary::after { content: '⌄'; }
.portal-faq summary::-webkit-details-marker { display: none; }
.portal-faq p { padding: 0 18px 14px 54px; font-size: 14px; margin: 0; }
.customer-page footer { padding: 16px 0; margin-top: 0; background: transparent; color: var(--muted); font-size: 12px; gap: 12px; }
.portal-login-gate { padding: 48px 24px; text-align: center; }
.portal-login-gate > .portal-icon { width: 40px; height: 40px; color: var(--brand); margin-bottom: 16px; }
.customer-page:has(dialog[open]) { overflow: hidden; }
.customer-page dialog { background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; max-height: calc(100dvh - 32px); }
.customer-page dialog::backdrop { background: #352b2466; }
.customer-login { width: calc(100% - 32px); max-width: 440px; padding: 28px; overflow: auto; box-shadow: 0 18px 64px #352b2429; }
.customer-login .login-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; background: transparent; padding: 0; font-size: 26px; }
.customer-login > .portal-logo { margin-bottom: 16px; }
.customer-login h2 { font-size: 24px; margin-bottom: 8px; }
.customer-login > .muted { font-size: 14px; margin-bottom: 20px; }
.customer-login label { font-size: 14px; margin-top: 16px; }
.customer-login #login-code { font-size: 20px; letter-spacing: 4px; width: 100%; }
.customer-login #login-code::placeholder { font-size: 14px; letter-spacing: 0; }
.customer-login #login-code[aria-invalid=true] { border-color: var(--error); }
.customer-login .code-row { grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; }
.customer-login .login-send { min-width: 108px; padding: 8px 10px; }
.customer-login .login-feedback { margin-top: 14px; padding: 10px 12px; font-size: 13px; border-radius: 8px; background: #f0eade; color: var(--muted); overflow-wrap: anywhere; }
.customer-login .login-feedback.success { background: #edf5e9; color: var(--success); }
.customer-login .login-feedback.error { background: #fff0e9; color: var(--error); }
.customer-login .full { width: 100%; margin-top: 16px; }
.customer-login .login-registration { margin: 20px 0 0; border-top: 1px solid var(--line); padding-top: 16px; font-size: 13px; color: var(--muted); }
@media (min-width: 1200px) {
  .single-plan + .portal-steps[open] > summary { list-style: none; cursor: default; }
}
@media (max-width: 1199px) {
  .portal-layout { grid-template-columns: 184px minmax(0, 1fr); }
  .portal-main { padding: 24px 20px 0; }
  .portal-purchase-layout { grid-template-columns: 1fr; }
  .portal-step-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .portal-shortcut > .portal-icon:last-child { display: none; }
}
@media (max-width: 850px) {
  .portal-layout { display: block; }
  .portal-sidebar { border-right: 0; border-bottom: 1px solid var(--line); padding: 8px 16px 0; }
  .portal-nav { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 0; }
  .customer-page .portal-nav-item { flex-direction: column; justify-content: center; border-radius: 0; border-bottom: 3px solid transparent; padding: 10px 4px; gap: 6px; }
  .customer-page .portal-nav-item.active { background: transparent; border-bottom-color: var(--brand); }
  .portal-help { display: none !important; }
  .portal-main { padding: 20px 20px 0; }
}
@media (max-width: 580px) {
  .customer-page .topbar { height: auto; min-height: 72px; padding: 10px 16px; flex-wrap: nowrap; align-items: center; gap: 8px; }
  .customer-page .brand { font-size: 18px; gap: 8px; }
  .customer-page .brand small { font-size: 12px; }
  .portal-logo { width: 36px; height: 36px; }
  .customer-page .header-actions { gap: 4px; min-width: 0; }
  .customer-page .header-actions button { padding: 8px 10px; }
  .portal-account .portal-icon { display: none; }
  .portal-account .email { max-width: 100px; font-size: 12px; }
  .portal-sidebar { padding: 0 10px; }
  .customer-page .portal-nav-item { font-size: 13px; }
  .portal-main { padding: 18px 16px 0; }
  .portal-page-heading { margin-bottom: 12px; }
  .portal-page-heading h1 { font-size: 24px; }
  .portal-page-heading p { font-size: 14px; }
  .portal-page-heading .tag { display: none; }
  .portal-registration { flex-wrap: wrap; padding: 8px 10px; font-size: 13px; gap: 5px 8px; margin-bottom: 12px; }
  .portal-registration > .portal-icon { width: 18px; height: 18px; }
  .portal-registration > span:not(.portal-icon) { flex: 1; min-width: 200px; }
  .portal-registration a { margin-left: 26px; min-height: 28px; }
  .portal-plans { grid-template-columns: 1fr; }
  .portal-plan { padding: 18px; }
  .portal-plan-heading { gap: 12px; }
  .portal-plan-heading > .portal-icon { width: 48px; height: 48px; padding: 9px; }
  .portal-plan h2 { font-size: 20px; }
  .portal-plan-price .price { font-size: 36px; }
  .portal-plan .eyebrow { font-size: 12px; letter-spacing: 1px; }
  .portal-features { margin: 14px 0 16px; padding-top: 12px; }
  .portal-purchase-note { margin-bottom: 4px; }
  .portal-steps { padding: 12px 16px; }
  .portal-steps > summary { font-size: 14px; min-height: 24px; }
  .portal-step-list { grid-template-columns: 1fr; gap: 16px; }
  .portal-shortcuts { grid-template-columns: 1fr; gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
  .customer-page .portal-shortcut { border: 0; border-radius: 0; padding: 12px 16px; }
  .customer-page .portal-shortcut + .portal-shortcut { border-top: 1px solid var(--line); }
  .portal-shortcut > .portal-icon:last-child { display: inline-flex; }
  .portal-faq summary { padding: 12px; gap: 8px; }
  .portal-faq p { padding: 0 12px 12px; }
  .customer-login { padding: 24px 20px; }
  .customer-login .portal-logo { margin-bottom: 12px; }
  .customer-login #login-code { font-size: 18px; letter-spacing: 2px; }
  .customer-page footer { flex-wrap: wrap; }
}
@media (max-width: 360px) {
  .customer-page .brand { font-size: 16px; }
  .customer-page .brand small { font-size: 12px; }
  .customer-page .header-actions button .portal-icon { display: none; }
  .portal-account .email { max-width: 60px; }
  .portal-main { padding-left: 12px; padding-right: 12px; }
  .portal-plan { padding: 16px; }
  .portal-plan-price { gap: 3px; }
  .portal-plan-price .price { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .customer-page * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

.customer-page [hidden] { display: none !important; }
.customer-page .portal-orders, .customer-page .portal-devices, .customer-page .portal-wallet-ledger { padding: 24px; margin-bottom: 20px; }
.customer-page .card-head { gap: 16px; align-items: center; }
.customer-page .card-head h2 { margin-bottom: 0; }
.customer-page .portal-status { display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; padding: 4px 8px; font-size: 13px; background: #f0eade; color: var(--muted); }
.portal-status .portal-icon { width: 16px; height: 16px; }
.customer-page .state-awaiting_payment, .customer-page .state-paid, .customer-page .state-sending { color: var(--brand); background: var(--soft); }
.customer-page .state-fulfilled { color: var(--success); background: #edf5e9; }
.customer-page .state-unknown, .customer-page .state-attention { color: var(--warning); background: #fff0d7; }
.customer-page .portal-order-table, .customer-page .portal-ledger, .customer-page .portal-device-table { white-space: normal; table-layout: auto; font-size: 14px; margin-top: 18px; }
.customer-page th { background: #f4ecde; color: var(--muted); font-size: 13px; }
.customer-page td, .customer-page th { padding: 12px; border-color: var(--line); }
.customer-page tr:hover { background: #f8f3e9; }
.customer-page .order-name { width: 34%; overflow-wrap: anywhere; }
.customer-page .order-number { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }
.customer-page .order-amount { font-weight: 600; white-space: nowrap; }
.customer-page .order-status { min-width: 125px; }
.customer-page .order-view { min-width: 100px; }
.customer-page tr.selected { background: var(--soft); }
.customer-page .portal-pairs { display: grid; gap: 0; margin: 18px 0; font-size: 14px; }
.portal-pairs > div { display: grid; grid-template-columns: 130px minmax(0,1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.portal-pairs dt { color: var(--muted); }
.portal-pairs dd { margin: 0; overflow-wrap: anywhere; }
.customer-page .customer-order-drawer { position: fixed; inset: 0 0 0 auto; margin: 0; width: 540px; max-width: 100%; height: 100dvh; max-height: 100dvh; padding: 0; border-radius: 12px 0 0 12px; border-right: 0; }
.customer-order-drawer[open] { display: flex; flex-direction: column; }
.order-drawer-header { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--line); gap: 12px; }
.order-drawer-header h2 { margin: 0; }
.order-drawer-body { flex: 1; min-height: 0; padding: 24px; overflow-y: auto; overscroll-behavior: contain; }
.order-drawer-body h3 { overflow-wrap: anywhere; }
.order-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 8px 0 20px; }
.order-summary .price { color: var(--brand); font-size: 32px; letter-spacing: -.5px; }
.order-dual-status { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 18px; }
.order-dual-status section { padding: 12px; display: grid; gap: 4px; }
.order-dual-status section + section { border-left: 1px solid var(--line); }
.order-dual-status strong { font-size: 14px; }
.order-drawer-footer { flex-shrink: 0; max-height: 40dvh; overflow: auto; border-top: 1px solid var(--line); padding: 14px 24px; background: var(--paper); }
.order-drawer-footer .actions { margin-top: 0; gap: 8px; }
.order-drawer-footer select { max-width: 170px; }
.portal-order-snapshot { margin: 18px 0; }
.portal-order-snapshot summary { cursor: pointer; padding: 8px 0; font-size: 14px; }
.customer-page .customer-quote { max-width: 500px; width: calc(100% - 32px); padding: 24px; overflow: auto; }
.customer-quote h3 { margin-top: 18px; overflow-wrap: anywhere; }
.customer-quote .quote-price { display: block; font-size: 34px; color: var(--brand); }
.customer-quote .actions { justify-content: flex-end; }
.portal-wallet-top { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 18px; margin-bottom: 20px; }
.portal-wallet-top .card { padding: 24px; }
.customer-page .wallet-balance { display: block; font-size: 34px; color: var(--brand); line-height: 1.4; margin-top: 12px; }
.portal-wallet-summary > p { margin-top: 16px; }
.portal-topup label { font-size: 14px; margin-top: 14px; }
.portal-topup .primary { margin-top: 6px; }
.customer-page .portal-field-error { color: var(--error); font-size: 14px; margin: 8px 0; }
.customer-page .portal-field-error:empty { display: none; }
.customer-page input[aria-invalid=true] { border-color: var(--error); }
.ledger-amount { font-weight: 600; white-space: nowrap; }
.ledger-amount.positive { color: var(--success); }
.ledger-balance { white-space: nowrap; }
.ledger-order { overflow-wrap: anywhere; }
.portal-device-controls { display: flex; gap: 12px; margin: 18px 0; }
.portal-device-controls select { flex: 1; width: auto; }
.portal-device-controls button { flex-shrink: 0; }
.customer-page .portal-license-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid var(--line); border-radius: 8px; gap: 0; }
.portal-license-summary > div { display: block; border-bottom: 0; padding: 16px; }
.portal-license-summary > div + div { border-left: 1px solid var(--line); }
.portal-license-summary dd { margin-top: 6px; }
.device-name .portal-icon { vertical-align: middle; color: var(--brand); margin-right: 8px; }
.device-action { width: 210px; }
.device-action .hint { display: block; margin-top: 4px; }
.portal-device-add { margin-top: 20px; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: #f8f3e9; }
.portal-device-add input { max-width: 170px; }
.portal-device-add button { margin-top: 12px; }
@media (max-width: 1199px) {
  .portal-wallet-top { grid-template-columns: 1fr; }
  .customer-page .portal-order-table { font-size: 13px; }
  .customer-page .order-status { min-width: 100px; }
  .customer-page .order-view { min-width: 80px; }
}
@media (max-width: 580px) {
  .customer-page .portal-orders, .customer-page .portal-devices, .customer-page .portal-wallet-ledger { padding: 16px; }
  .portal-wallet-top .card { padding: 20px; }
  .customer-page .portal-order-table, .customer-page .portal-ledger, .customer-page .portal-device-table { display: block; }
  .customer-page :is(.portal-order-table,.portal-ledger,.portal-device-table) thead { display: none; }
  .customer-page :is(.portal-order-table,.portal-ledger,.portal-device-table) tbody { display: grid; gap: 12px; }
  .customer-page :is(.portal-order-table,.portal-ledger,.portal-device-table) tr { display: grid; grid-template-columns: minmax(0,1fr) auto; border: 1px solid var(--line); border-radius: 8px; padding: 12px; gap: 8px; }
  .customer-page :is(.portal-order-table,.portal-ledger,.portal-device-table) td { display: block; border: 0; padding: 0; width: auto; min-width: 0; }
  .customer-page .order-name { grid-column: 1/-1; }
  .customer-page .order-amount { grid-row: 2; }
  .customer-page .order-status { grid-row: 2; grid-column: 2; }
  .customer-page .order-created { grid-column: 1/-1; }
  .customer-page .order-view { grid-column: 1/-1; }
  .order-view button { width: 100%; }
  .customer-page .customer-order-drawer { border-radius: 0; border: 0; }
  .order-drawer-header { padding: 12px 16px; }
  .order-drawer-body { padding: 20px 16px; }
  .order-drawer-footer { padding: 12px 16px; }
  .order-drawer-footer .actions > * { flex-grow: 1; }
  .customer-page .portal-pairs > div { grid-template-columns: 110px minmax(0,1fr); }
  .customer-page .customer-quote { padding: 20px; }
  .customer-page .ledger-time { grid-column: 1/-1; }
  .customer-page .ledger-order { grid-column: 1/-1; grid-row: 4; }
  .customer-page .ledger-kind { grid-row: 2; }
  .customer-page .ledger-amount { grid-row: 2; grid-column: 2; }
  .customer-page .ledger-balance { grid-column: 1/-1; }
  .portal-device-controls { flex-wrap: wrap; }
  .portal-device-controls select { width: 100%; flex-basis: 100%; }
  .portal-device-controls button { width: 100%; }
  .customer-page .portal-license-summary { grid-template-columns: 1fr; }
  .customer-page .portal-license-summary > div { display: grid; }
  .portal-license-summary > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .portal-license-summary dd { margin-top: 0; }
  .customer-page .device-name { grid-column: 1/-1; }
  .customer-page .device-state { grid-column: 1/-1; }
  .customer-page .device-action { grid-column: 1/-1; }
  .portal-device-add { padding: 16px; }
}