:root{--bg:#f4f6fa;--panel:#fff;--border:#e6e9ef;--text:#1f2430;--muted:#8a93a6;--primary:#2563eb;--primary-dark:#1d4ed8;--amber:#d99412;--amber-bg:#fdf6e3;--green:#16a34a;--red:#dc2626;--radius:12px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,-apple-system,Roboto,sans-serif;font-size:14px}h1{margin:0;font-size:22px}h2{margin:0 0 4px;font-size:18px}h3{margin:0;font-size:15px}.muted{color:var(--muted)}.small{font-size:12px}.strong{font-weight:600}.pad{padding:16px}.mt{margin-top:8px}.btn{cursor:pointer;color:var(--text);background:#eef1f6;border:1px solid #0000;border-radius:8px;padding:9px 16px;font-size:14px;font-weight:500;transition:background .15s,border-color .15s}.btn:hover{background:#e4e8ef}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-sm{padding:5px 10px;font-size:12px}.btn-block{width:100%}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark)}.btn-amber{background:var(--amber);color:#fff}.btn-amber:hover{filter:brightness(.95)}.btn-green{background:var(--green);color:#fff}.btn-ghost{border-color:var(--border);background:#fff}.btn-ghost:hover{background:#f7f8fb}.btn-danger-ghost{color:var(--red);background:#fff;border-color:#f3c4c4}.login-screen{background:linear-gradient(135deg,#eef2fb,#f6f8fc);place-items:center;min-height:100%;display:grid}.login-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;flex-direction:column;gap:6px;width:360px;padding:28px;display:flex;box-shadow:0 10px 40px #1e325a14}.login-card h1{margin-top:12px}.login-card label{color:var(--muted);margin-top:10px;font-size:12px}.login-card input{margin-top:4px}.login-card .btn{margin-top:16px}.login-card .captcha{margin-top:10px}.login-card .captcha-row{align-items:center;gap:8px;margin-top:4px;display:flex}.login-card .captcha-question{white-space:nowrap;font-weight:600}.login-card .captcha-row input{flex:none;width:90px;margin-top:0}.login-card .captcha-refresh{cursor:pointer;color:var(--muted);background:0 0;border:none;padding:4px;font-size:16px}.login-card .captcha-refresh:hover{color:var(--text)}.brand{align-items:center;gap:10px;display:flex}.brand-mark{background:var(--primary);color:#fff;border-radius:9px;place-items:center;width:34px;height:34px;font-size:18px;font-weight:700;display:grid}.brand-name{font-size:14px;font-weight:700}.brand-sub{color:var(--muted);font-size:11px}.app-shell{grid-template-columns:220px 1fr;min-height:100%;display:grid}.sidebar{background:var(--panel);border-right:1px solid var(--border);flex-direction:column;gap:4px;padding:18px 14px;display:flex}.nav-section{letter-spacing:.08em;color:var(--muted);margin:16px 6px 6px;font-size:10px}.nav-item{color:var(--text);cursor:pointer;border-radius:8px;padding:9px 12px;font-size:13px;text-decoration:none;display:block}.nav-item:hover{background:#f2f4f8}.nav-item.active{background:var(--primary);color:#fff}.sidebar-footer{border-top:1px solid var(--border);margin-top:auto;padding-top:12px}.main{padding:22px 28px}.page-header{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.header-actions{align-items:center;gap:10px;display:flex}.client-select{border:1px solid var(--border);background:#fff;border-radius:8px;min-width:220px;padding:9px 12px;font-size:14px;font-weight:500}.client-banner{justify-content:space-between;align-items:center;margin:18px 0 6px;display:flex}.client-title{font-size:18px;font-weight:700}.tabs{border-bottom:1px solid var(--border);gap:4px;margin:18px 0 20px;display:flex}.tab{cursor:pointer;color:var(--muted);background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-1px;padding:12px 14px;font-size:14px;font-weight:500}.tab.active{color:var(--primary);border-bottom-color:var(--primary)}.tab-badge{background:var(--red);color:#fff;border-radius:999px;margin-left:6px;padding:1px 7px;font-size:11px}.stat-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;display:grid}.stat-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);align-items:flex-start;gap:14px;padding:18px;display:flex}.stat-icon{border-radius:9px;flex-shrink:0;place-items:center;width:38px;height:38px;font-size:16px;display:grid}.stat-icon.violet{background:#efe9ff}.stat-icon.pink{background:#fde9f3}.stat-icon.blue{background:#e6efff}.stat-icon.green{background:#e4f7ec}.stat-label{color:var(--muted);font-size:13px}.stat-value{margin-top:2px;font-size:24px;font-weight:700}.stat-sub{color:var(--muted);margin-top:2px;font-size:12px}.stat-sub.danger{color:var(--red)}.stat-sub.ok{color:var(--green)}.generate-banner{background:var(--amber-bg);border-radius:var(--radius);text-align:center;color:#8a6d1a;border:1px solid #f1e3b8;flex-direction:column;align-items:center;gap:14px;margin-top:20px;padding:26px;display:flex}.info-banner{border-radius:var(--radius);color:#166534;background:#ecfdf3;border:1px solid #c4ecd2;align-items:center;gap:12px;margin-top:20px;padding:14px 18px;display:flex}.warn-box{color:#92670c;background:#fffbeb;border:1px solid #fde68a;border-radius:8px;margin:12px 0;padding:10px 14px;font-size:13px}.conn-error-banner{background:#fff8f0;border:1px solid #f5c07a;border-left:4px solid #e07b00;border-radius:10px;align-items:flex-start;gap:14px;margin:12px 0;padding:14px 16px;display:flex}.conn-error-icon{flex-shrink:0;padding-top:2px;font-size:18px;line-height:1}.conn-error-body{flex:1}.conn-error-title{color:#9a4f00;font-size:14px;font-weight:600}.conn-error-detail{color:#7a5530;margin-top:3px;font-size:13px}.not-connected-state{text-align:center;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;align-items:center;gap:12px;margin-top:20px;padding:60px 40px;display:flex}.not-connected-icon{font-size:42px}.not-connected-state h2{color:var(--text);margin:0}.not-connected-state p{color:var(--muted);max-width:440px;margin:0;font-size:14px}.not-connected-steps{border:1px solid var(--border);text-align:left;background:#f7f9fc;border-radius:10px;flex-direction:column;gap:10px;width:100%;max-width:460px;padding:18px 22px;display:flex}.step{color:var(--text);align-items:flex-start;gap:12px;font-size:13px;display:flex}.step-num{background:var(--primary);color:#fff;border-radius:999px;flex-shrink:0;place-items:center;width:22px;height:22px;margin-top:1px;font-size:12px;font-weight:700;display:grid}.error-box{color:var(--red);background:#fef2f2;border:1px solid #fecaca;border-radius:8px;margin:8px 0;padding:10px 14px;font-size:13px}.error-detail{white-space:pre-wrap;word-break:break-all;color:#7f1d1d;background:#fff0f0;border-radius:6px;max-height:160px;margin:8px 0 0;padding:8px;font-family:monospace;font-size:11px;overflow-y:auto}.pad-v{padding:6px 0}.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);margin-top:8px;overflow:hidden}.card-head{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:16px 18px;display:flex}.empty{text-align:center;color:var(--muted);padding:40px}.data-table{border-collapse:collapse;width:100%}.data-table th{text-align:left;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border);padding:12px 18px;font-size:11px;font-weight:600}.data-table td{border-bottom:1px solid #f1f3f7;padding:13px 18px}.data-table tr:last-child td{border-bottom:none}.row-actions{gap:8px;display:flex}.badge{border-radius:999px;padding:3px 9px;font-size:11px;font-weight:600}.badge-green{color:#166534;background:#e4f7ec}.badge-amber{color:#92670c;background:#fdf3e0}.badge-red{color:#b91c1c;background:#fdecec}.badge-gray{color:#5b6577;background:#eef1f6}input,select{border:1px solid var(--border);width:100%;color:var(--text);background:#fff;border-radius:8px;padding:9px 11px;font-size:14px}input:focus,select:focus{border-color:var(--primary);outline:none}.modal-backdrop{z-index:50;background:#141c2d73;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal{background:var(--panel);border-radius:14px;width:420px;max-width:100%;max-height:90vh;padding:24px;overflow:auto;box-shadow:0 20px 60px #141e3c40}.modal-wide{width:560px}.modal label{color:var(--muted);margin:12px 0 4px;font-size:12px;display:block}.field-hint{color:var(--muted);margin:4px 0 0;font-size:11px}.field-hint code{background:#eef1f6;border-radius:4px;padding:1px 5px;font-size:11px}.input-with-fix{align-items:center;gap:8px;display:flex}.input-with-fix input{flex:1}.fix-btn{white-space:nowrap}.baseurl-preview{border:1px solid var(--border);background:#f7f9fc;border-radius:8px;margin-top:6px;padding:10px 12px;font-size:12px}.baseurl-preview-title{color:var(--muted);margin-bottom:6px;font-size:11px}.baseurl-table{border-collapse:collapse;width:100%}.baseurl-table tr+tr td{padding-top:4px}.baseurl-purpose{color:var(--muted);white-space:nowrap;padding-right:12px;font-size:11px}.baseurl-url code{word-break:break-all;background:#eef1f6;border-radius:4px;padding:2px 6px;font-size:11px}.baseurl-tip{color:var(--muted);border-top:1px solid var(--border);margin-top:8px;padding-top:8px;font-size:11px}.baseurl-tip a{color:var(--primary);text-decoration:none}.baseurl-tip a:hover{text-decoration:underline}.baseurl-localhost-warn{color:#7a4f00;background:#fff8f0;border:1px solid #f5c07a;border-radius:6px;margin-top:8px;padding:8px 10px;font-size:11px;line-height:1.5}.baseurl-localhost-warn code{background:#fde8c0;border-radius:3px;padding:1px 4px}.form-row{grid-template-columns:1fr 1fr;gap:14px;display:grid}.checkbox-field{align-items:flex-end;padding-bottom:9px;display:flex}.checkbox-field label{color:var(--text);align-items:center;gap:8px;margin:0;display:flex}.checkbox-field input{width:auto}.modal-actions{justify-content:flex-end;gap:10px;margin-top:20px;display:flex}.modal-actions.spread{justify-content:space-between}.gen-row{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:10px 0;display:flex}.gen-total{background:var(--amber-bg);color:#8a6d1a;border:1px solid #f1e3b8;border-radius:8px;justify-content:space-between;align-items:center;margin-top:14px;padding:12px 14px;font-size:13px;display:flex}.gen-total-amount{font-size:14px}.gen-total-amount strong{font-size:17px}