:root { --bg:#f5f6f8; --surface:#fff; --ink:#17191d; --muted:#747881; --line:#e5e7eb; --blue:#2563eb; --green:#1f9d6a; --amber:#b17815; --coral:#d45b4b; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--ink); font-family:"DM Sans","Noto Sans SC",system-ui,sans-serif; }
button,input { font:inherit; }
button:focus-visible,input:focus-visible { outline:3px solid rgba(37,99,235,.18); outline-offset:2px; }
.hidden { display:none !important; }
.admin-shell { min-height:100vh; }
.auth-view { min-height:100vh; display:grid; place-items:center; padding:24px; }
.auth-card { width:min(410px,100%); padding:30px; border:1px solid var(--line); border-radius:10px; background:var(--surface); box-shadow:0 20px 60px rgba(20,25,35,.08); }
.brand { display:inline-flex; align-items:center; gap:9px; color:var(--ink); text-decoration:none; font-weight:700; }
.brand-mark { display:grid; place-items:center; width:30px; height:30px; border-radius:7px; background:var(--ink); color:#fff; }
.auth-card .brand { margin-bottom:48px; }
.eyebrow { margin:0 0 6px; color:#92969e; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
h1,h2,p { margin-top:0; }
h1 { margin-bottom:8px; font-size:25px; }
h2 { margin:0; font-size:16px; }
.muted { color:var(--muted); font-size:12px; line-height:1.6; }
form { display:grid; gap:15px; margin-top:26px; }
label { display:grid; gap:7px; color:#555961; font-size:11px; font-weight:600; }
input { height:42px; padding:0 12px; border:1px solid #dfe1e6; border-radius:7px; outline:0; color:var(--ink); background:#fff; }
.primary-button,.ghost-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; height:38px; padding:0 13px; border:0; border-radius:7px; cursor:pointer; font-size:11px; font-weight:600; }
.primary-button { background:var(--ink); color:white; }
.primary-button svg { width:15px; }
.ghost-button { border:1px solid var(--line); background:white; color:#5e626b; }
.ghost-button:hover { background:#f8f9fb; }
.ghost-button svg { width:14px; }
.form-message,.admin-message { min-height:18px; margin-top:13px; color:var(--coral); font-size:11px; }
.admin-topbar { height:72px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 34px; border-bottom:1px solid var(--line); background:#fff; }
.brand-lockup,.admin-user { display:flex; align-items:center; gap:12px; }
.divider-label { color:#c4c7cd; }
.brand-lockup strong { font-size:13px; }
.admin-user { color:#5f636b; font-size:11px; }
.role-badge { display:inline-flex; align-items:center; width:max-content; padding:4px 7px; border-radius:5px; background:#eef3ff; color:var(--blue); font-size:9px; font-weight:700; }
.admin-content { max-width:1360px; margin:0 auto; padding:34px; }
.page-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:22px; }
.page-heading h1 { margin-bottom:5px; }
.page-heading p { margin-bottom:0; }
.stats-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:13px; margin-bottom:18px; }
.stat-card { display:flex; align-items:center; gap:12px; min-height:100px; padding:16px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.stat-card > div { display:grid; gap:5px; }
.stat-card span:not(.stat-icon) { color:var(--muted); font-size:10px; }
.stat-card strong { font-size:24px; }
.stat-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:8px; }
.stat-icon svg { width:17px; }
.stat-icon.blue { color:var(--blue); background:#e9f0ff; }.stat-icon.amber { color:var(--amber); background:#fff4d8; }.stat-icon.green { color:var(--green); background:#e6f7ef; }.stat-icon.coral { color:var(--coral); background:#ffebe7; }
.admin-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; align-items:start; }
.panel { padding:18px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:15px; }
.panel-heading .ghost-button { height:31px; padding:0 9px; font-size:10px; }
.panel-heading .ghost-button svg { width:13px; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:10px; }
th { padding:9px 10px; border-bottom:1px solid var(--line); color:#969aa2; font-size:9px; font-weight:600; text-align:left; white-space:nowrap; }
td { padding:12px 10px; border-bottom:1px solid #f0f1f3; color:#646872; white-space:nowrap; }
td:first-child { max-width:310px; overflow:hidden; color:var(--ink); text-overflow:ellipsis; }
.status-pill { display:inline-flex; padding:4px 7px; border-radius:5px; background:#f0f1f3; color:#6c7078; font-size:9px; }.status-pill.success { color:#18724c; background:#e7f7ef; }.status-pill.running { color:#315cae; background:#e9f0ff; }.status-pill.failed { color:#a3483b; background:#ffebe7; }
.empty-cell { padding:20px 10px; color:#a0a3aa; text-align:center; font-size:10px; }
.side-column { display:grid; gap:16px; }
.status-dot { width:7px; height:7px; border-radius:50%; background:#b9bdc5; }.status-dot.ready { background:var(--green); box-shadow:0 0 0 3px rgba(31,157,106,.12); }
dl { display:grid; gap:12px; margin:0; }.config-panel dl div { display:flex; justify-content:space-between; gap:15px; padding-bottom:10px; border-bottom:1px solid #f0f1f3; }.config-panel dl div:last-child { padding-bottom:0; border:0; }.config-panel dt { color:#969aa2; font-size:9px; }.config-panel dd { max-width:175px; overflow:hidden; margin:0; color:#34373d; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.api-settings-panel { margin-top:16px; }.api-settings-form { display:grid; gap:12px; }.api-settings-form fieldset { min-width:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin:0; padding:12px; border:1px solid var(--line); border-radius:7px; background:#fafbfc; }.api-settings-form legend { grid-column:1/-1; padding:0 4px; color:#34373d; font-size:11px; font-weight:700; }.api-settings-form label { display:grid; gap:5px; color:#646871; font-size:9px; }.api-settings-form input { width:100%; height:34px; padding:0 9px; border:1px solid #dfe1e6; border-radius:6px; background:#fff; font:inherit; font-size:10px; }.api-status { grid-column:1/-1; min-height:14px; margin:0; color:#18724c; font-size:9px; }.form-actions { display:flex; align-items:center; gap:12px; }.form-actions .form-message { min-height:16px; color:var(--coral); font-size:10px; }.form-actions .form-message.success { color:#18724c; }
.role-title { display:flex; align-items:center; gap:9px; margin-bottom:14px; }.role-title strong { font-size:12px; }.permission-list { display:flex; flex-wrap:wrap; gap:6px; }.permission { padding:5px 7px; border-radius:5px; color:#59616e; background:#f2f4f7; font-size:9px; }
.audit-panel { margin-top:16px; }.small { font-size:10px; }.audit-list { display:grid; gap:0; max-height:250px; overflow:auto; }.audit-row { display:grid; grid-template-columns:170px 1fr auto; gap:14px; padding:11px 0; border-bottom:1px solid #f0f1f3; font-size:10px; }.audit-row:last-child { border:0; }.audit-row strong { font-weight:600; }.audit-row span { color:var(--muted); }.audit-row time { color:#9b9ea5; font-size:9px; }
.lower-grid { margin-top:16px; }.inline-form { display:flex; align-items:end; gap:10px; margin:0; }.inline-form label { min-width:115px; }.inline-form select,.inline-form input { height:36px; padding:0 9px; border:1px solid #dfe1e6; border-radius:6px; background:#fff; font:inherit; font-size:11px; }.inline-form .primary-button { height:36px; white-space:nowrap; }.generated-cards { display:grid; gap:6px; margin-top:15px; max-height:120px; overflow:auto; }.generated-card { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border-radius:6px; background:#f2f7ff; color:#31548d; font-family:ui-monospace,monospace; font-size:10px; }.generated-card button { border:0; background:none; color:#2563eb; font-size:10px; cursor:pointer; }.user-status { color:#18724c; }.user-status.suspended { color:#ad4d3d; }.license-label { color:#315cae; font-size:9px; }.user-action { border:1px solid #dfe1e6; background:#fff; color:#5e626b; border-radius:5px; padding:4px 8px; font:inherit; font-size:9px; cursor:pointer; }.user-action:hover { background:#f8f9fb; }.user-action:disabled { opacity:.5; cursor:wait; }
.card-history-panel { margin-top:16px; }.card-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }.card-filters input,.card-filters select { height:32px; padding:0 9px; border:1px solid #dfe1e6; border-radius:6px; background:#fff; font:inherit; font-size:10px; }.card-filters input { min-width:240px; flex:1; }.card-filters .ghost-button { height:32px; font-size:10px; }.mono { font-family:ui-monospace,monospace; font-size:9px; }.card-detail { display:flex; flex-wrap:wrap; gap:8px 16px; padding:10px 12px; margin-bottom:12px; border-radius:6px; background:#f5f8ff; color:#5b6474; font-size:10px; }.card-detail.hidden { display:none; }.card-detail strong { color:#2f4f8e; font-family:ui-monospace,monospace; }.detail-backdrop { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:20px; background:rgba(15,20,30,.36); }.detail-backdrop.hidden { display:none; }.detail-modal { position:relative; width:min(620px,100%); max-height:min(720px,90vh); overflow:auto; padding:24px; border-radius:10px; background:#fff; box-shadow:0 24px 80px rgba(15,20,30,.24); }.detail-modal .modal-close { top:15px; right:15px; border:0; font-size:18px; line-height:1; }.detail-modal h2 { margin:0 0 16px; font-size:19px; }.detail-modal h3 { margin:20px 0 8px; font-size:12px; }.detail-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }.detail-grid div { display:grid; gap:4px; padding:10px; border-radius:6px; background:#f6f7f9; }.detail-grid span { color:#969aa2; font-size:9px; }.detail-grid strong { font-size:11px; }.detail-list { display:grid; gap:6px; }.detail-row { display:flex; justify-content:space-between; gap:12px; padding:9px 10px; border-bottom:1px solid #f0f1f3; font-size:10px; }.detail-row strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.detail-row span { color:#8a8e96; white-space:nowrap; }
.agreement-history-panel{margin-top:16px}.agreement-evidence-modal{width:min(780px,100%)}.agreement-evidence-modal .detail-grid strong{overflow-wrap:anywhere;word-break:break-all}.agreement-evidence-actions{display:flex;justify-content:flex-end;margin-top:14px}.agreement-evidence-actions a,.evidence-download-link{text-decoration:none}.evidence-integrity{margin-top:12px;padding:10px 12px;border-radius:7px;background:#e8f7ef;color:#18724c;font-size:10px}.evidence-integrity.failed{background:#ffebe7;color:#a3483b}.agreement-evidence-content{max-height:360px;overflow:auto;margin:0;padding:16px;border:1px solid var(--line);border-radius:7px;background:#f7f8fa;color:#3f4651;font:11px/1.85 "Noto Sans SC",system-ui,sans-serif;white-space:pre-wrap;word-break:break-word}
.points-positive { color:#18724c; font-weight:700; }.points-negative { color:#ad4d3d; font-weight:700; }
.recharge-modal { width:min(430px,100%); }.recharge-modal form { margin-top:18px; }.recharge-modal .form-message { margin-bottom:0; }
.pricing-settings-panel { margin-top:16px; }.pricing-settings-panel .panel-heading a { text-decoration:none; }.pricing-form { gap:18px; margin-top:0; }.pricing-form fieldset { min-width:0; margin:0; padding:0; border:0; }.pricing-form legend { margin-bottom:10px; color:#555961; font-size:11px; font-weight:700; }.pricing-fields { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }.pricing-fields.rule-fields { grid-template-columns:repeat(3,minmax(0,1fr)); }.pricing-fields input { width:100%; }.membership-price-editor { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }.membership-price-editor > div { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:11px; border:1px solid var(--line); border-radius:7px; background:#fafbfc; }.membership-price-editor strong { grid-column:1/-1; font-size:11px; }.pricing-form-footer { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-top:16px; border-top:1px solid var(--line); }.pricing-form-footer > div { display:grid; gap:3px; }.pricing-form-footer strong { font-size:11px; }.pricing-form-footer span,.pricing-form-footer small { color:var(--muted); font-size:9px; }.pricing-form-footer .primary-button { white-space:nowrap; }.pricing-message { min-height:16px; margin:0; color:var(--coral); font-size:10px; }.pricing-message.success { color:#18724c; }.referral-settings-fields { align-items:end; }.referral-rule-hint { align-self:center; margin:0; line-height:1.5; }.referral-admin-summary { margin-top:10px; padding:9px 10px; border-radius:6px; background:#f5f8ff; color:#31548d; font-size:10px; }
.usage-cost-table { display:grid; gap:6px; margin-top:12px; }.usage-cost-table > div { display:grid; grid-template-columns:140px repeat(3,minmax(0,1fr)); gap:8px; align-items:center; }.usage-cost-table > div:not(.usage-cost-heading) { padding:8px; border:1px solid var(--line); border-radius:7px; background:#fafbfc; }.usage-cost-table strong,.usage-cost-table span { font-size:10px; }.usage-cost-heading { padding:0 8px; color:var(--muted); }.usage-cost-table input { width:100%; }
.settings-grid { margin-top:16px; grid-template-columns:repeat(3,minmax(0,1fr)); }.settings-form { margin-top:0; }.settings-form textarea,.settings-form select { width:100%; padding:10px 11px; border:1px solid #dfe1e6; border-radius:7px; outline:0; background:#fff; font:inherit; font-size:11px; resize:vertical; }.settings-form .primary-button { width:max-content; }.qr-preview-wrap { display:flex; align-items:center; gap:10px; min-height:0; }.qr-preview { width:120px; height:120px; object-fit:contain; padding:5px; border:1px solid var(--line); border-radius:7px; background:#fff; }.help-steps-editor { display:grid; gap:8px; }.help-step-edit { display:grid; grid-template-columns:24px minmax(150px,.55fr) minmax(230px,1fr); gap:8px; align-items:end; padding:9px; border:1px solid var(--line); border-radius:7px; }.help-step-edit > span { align-self:center; display:grid; place-items:center; width:24px; height:24px; border-radius:5px; background:#edf2ff; color:var(--blue); font-size:10px; font-weight:700; }.help-media-editor { grid-column:2/-1; display:grid; grid-template-columns:170px minmax(0,1fr); gap:10px; align-items:center; padding-top:2px; }.help-media-preview { width:170px; aspect-ratio:16/9; overflow:hidden; display:grid; place-items:center; border:1px solid var(--line); border-radius:7px; background:#f5f7fa; }.help-media-preview img,.help-media-preview video { width:100%; height:100%; object-fit:contain; background:#111; }.help-media-preview.empty { align-content:center; gap:4px; color:var(--muted); }.help-media-preview.empty svg { width:20px; }.help-media-preview.empty span { font-size:9px; }.help-media-actions { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }.help-media-actions small { width:100%; color:var(--muted); font-size:9px; }.help-media-upload { cursor:pointer; }.help-media-upload.uploading { opacity:.5; pointer-events:none; }.media-upload-hint { margin:0; color:var(--muted); font-size:9px; }.notification-settings-panel { margin-top:16px; }.notification-editor { display:grid; gap:8px; }.notification-edit { display:grid; grid-template-columns:110px minmax(180px,1fr) 58px 34px; gap:8px; align-items:center; padding:9px; border:1px solid var(--line); border-radius:7px; }.notification-edit input,.notification-edit select { min-width:0; width:100%; }.notification-rich-editor { grid-column:1/-1; display:grid; gap:6px; }.notification-format-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-height:34px; padding:4px 6px; border:1px solid var(--line); border-bottom:0; border-radius:7px 7px 0 0; background:#f7f8fa; }.notification-format-toolbar > span { margin-right:auto; color:var(--muted); font-size:9px; }.notification-format-toolbar > small { color:var(--muted); font-size:9px; }.notification-format-toolbar > small.limit-exceeded { color:#b33c32; font-weight:700; }.notification-content-editor { min-height:96px; max-height:240px; overflow:auto; margin-top:-6px; padding:11px 12px; border:1px solid var(--line); border-radius:0 0 7px 7px; background:#fff; color:#30343b; font-size:14px; line-height:1.7; white-space:pre-wrap; outline:0; }.notification-content-editor:focus { border-color:#8aa5d6; box-shadow:0 0 0 2px rgba(55,100,180,.1); }.notification-content-editor:empty::before { content:attr(data-placeholder); color:#a0a5ad; pointer-events:none; }.notification-color-label,.notification-size-label { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:9px; white-space:nowrap; }.notification-color-label input { width:34px; height:30px; padding:2px; border:1px solid var(--line); border-radius:5px; background:#fff; cursor:pointer; }.notification-size-label select { width:88px; height:30px; padding:0 6px; border:1px solid var(--line); border-radius:5px; background:#fff; font-size:9px; cursor:pointer; }.notification-media-editor { grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding-top:2px; }.notification-image-preview { width:120px; height:68px; overflow:hidden; border:1px solid var(--line); border-radius:6px; background:#f5f6f8; }.notification-image-preview img { width:100%; height:100%; object-fit:contain; }.notification-media-editor small { color:var(--muted); font-size:9px; }.switch-label { display:flex; grid-auto-flow:column; align-items:center; gap:5px; white-space:nowrap; }.switch-label input { width:15px; height:15px; }.icon-delete { width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line); border-radius:6px; background:#fff; color:#a34b40; cursor:pointer; }.icon-delete svg { width:14px; }
.settings-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.settings-grid > .settings-panel:last-child { grid-column:1/-1; }
.payment-qr-editor { display:grid; gap:8px; }.payment-qr-item { display:grid; grid-template-columns:68px minmax(0,1fr) 34px; align-items:center; gap:8px; padding:8px; border:1px solid var(--line); border-radius:7px; }.payment-qr-item img { width:68px; height:68px; object-fit:contain; border-radius:5px; background:#f5f6f8; }.payment-qr-item input { width:100%; height:34px; padding:0 8px; border:1px solid var(--line); border-radius:6px; font-size:10px; }
@media (max-width:1180px) { .stats-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:900px) { .admin-topbar { padding:0 18px; }.admin-content { padding:24px 18px 60px; }.stats-grid { grid-template-columns:repeat(2,1fr); }.admin-grid { grid-template-columns:1fr; }.side-column { grid-template-columns:repeat(2,minmax(0,1fr)); }.pricing-fields,.pricing-fields.rule-fields,.membership-price-editor { grid-template-columns:repeat(2,minmax(0,1fr)); }.notification-edit { grid-template-columns:110px 1fr 58px 34px; } }
@media (max-width:620px) { .admin-topbar { height:auto; min-height:68px; align-items:flex-start; padding-block:15px; }.brand-lockup { align-items:flex-start; }.divider-label,.brand-lockup strong { display:none; }.admin-user { flex-wrap:wrap; justify-content:flex-end; }.admin-user > span:not(.role-badge) { display:none; }.admin-content { padding:20px 13px 50px; }.page-heading { align-items:flex-start; }.stats-grid { gap:8px; }.stat-card { min-height:82px; padding:11px; }.stat-card strong { font-size:20px; }.side-column { grid-template-columns:1fr; }.audit-row { grid-template-columns:1fr; gap:4px; }.detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.detail-row { display:grid; gap:4px; }.detail-row span { white-space:normal; }.card-filters input { min-width:0; flex-basis:100%; }.pricing-fields,.pricing-fields.rule-fields,.membership-price-editor { grid-template-columns:1fr; }.pricing-form-footer { align-items:stretch; flex-direction:column; }.pricing-form-footer .primary-button,.settings-form .primary-button { width:100%; }.api-settings-form fieldset { grid-template-columns:1fr; }.api-settings-form legend,.api-status { grid-column:1; }.form-actions { align-items:stretch; flex-direction:column; }.form-actions .primary-button { width:100%; }.help-step-edit { grid-template-columns:24px 1fr; }.help-step-edit label:last-of-type { grid-column:1/-1; }.help-media-editor { grid-column:1/-1; grid-template-columns:1fr; }.help-media-preview { width:100%; }.notification-edit { grid-template-columns:1fr 70px 34px; }.notification-edit select { grid-column:1/2; }.notification-edit input[data-notification-title] { grid-column:1/-1; grid-row:2; }.notification-format-toolbar > span { width:100%; margin-right:0; }.notification-format-toolbar .ghost-button { padding-inline:8px; } }

.admin-content{padding-left:220px;max-width:1560px;min-height:calc(100vh - 72px)}
.admin-navigation{position:fixed;top:92px;left:20px;width:175px;display:grid;gap:8px;padding:14px;background:#fff;border:1px solid #e5e9f0;border-radius:14px;box-sizing:border-box}
.admin-navigation button{padding:13px 10px;border:0;border-radius:9px;text-align:left;background:transparent;color:#596373;cursor:pointer;font:inherit}
.admin-navigation button.active{background:#edf3ff;color:#2563eb;font-weight:700}
.admin-category{display:grid;gap:20px;min-width:0}.admin-category[hidden]{display:none}
.admin-category>.panel{margin:0;min-width:0}.admin-shortcuts{display:flex;gap:12px;flex-wrap:wrap}
.admin-category .api-settings-form{width:100%}
@media(max-width:900px){.admin-content{padding-left:18px}.admin-navigation{position:static;width:100%;display:flex;overflow-x:auto;margin-bottom:24px}.admin-navigation button{white-space:nowrap;flex:none}}