:root { font-family: Inter, "Microsoft YaHei", sans-serif; color: #f5f0e6; background: #10100f; letter-spacing: 0; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { min-height: 100vh; margin: 0; background: #10100f; }
.topbar { height: 68px; background: #171715; border-bottom: 1px solid #3f382c; display: flex; align-items: center; justify-content: space-between; padding: 0 max(24px, calc((100vw - 1440px) / 2)); position: sticky; top: 0; z-index: 5; }
.brand { display: flex; align-items: baseline; gap: 12px; }
.topbar strong { color: #edc479; font-size: 25px; line-height: 1; font-weight: 750; }
.topbar span { color: #9d9588; font-size: 13px; }
.topbar a { color: #cfc6b6; font-size: 13px; text-decoration: none; }
.topbar a:hover { color: #f3cf8b; }
.topbar nav { display: flex; align-items: center; gap: 20px; }
main { max-width: 1440px; margin: 0 auto; padding: 34px 28px 56px; }
#appView { display: grid; grid-template-columns: 236px minmax(0, 1fr); column-gap: 48px; align-items: start; }
#appView > .page-heading, #appView > .metrics, #appView > .tab-page { grid-column: 2; }
.login-shell { min-height: calc(100vh - 126px); display: grid; place-items: center; }
.panel { background: #1a1917; border: 1px solid #39342c; border-radius: 6px; padding: 22px; margin-bottom: 18px; box-shadow: 0 16px 38px rgba(0, 0, 0, .18); }
.login-panel { width: min(410px, 100%); border-top: 2px solid #d7aa5b; }
.verification-intro { display: flex; align-items: center; gap: 10px; padding: 11px 12px; margin: 0 0 17px; background: #211d16; border: 1px solid #55452d; border-radius: 4px; }
.verification-mark { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid #a27a3e; color: #edc479; font: 700 11px/1 Inter, sans-serif; }
.verification-intro strong, .verification-intro small { display: block; }
.verification-intro strong { color: #f2dfb9; font-size: 13px; }
.verification-intro small { margin-top: 2px; color: #9c927f; font-size: 11px; }
.application-fields { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
.application-wide { grid-column: 1 / -1; }
.document-heading { display: flex; justify-content: space-between; gap: 12px; padding-top: 4px; margin: 4px 0 10px; color: #d8c6a5; font-size: 12px; }
.document-heading small { color: #8f877b; font-size: 11px; }
.document-upload-grid, .document-review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.document-upload { position: relative; display: grid; place-items: center; min-height: 142px; gap: 6px; padding: 18px; margin: 0 0 17px; overflow: hidden; border: 1px dashed #76613c; border-radius: 4px; background: #151411; text-align: center; cursor: pointer; }
.document-upload:hover { border-color: #d4a75d; background: #1d1a14; }
.document-upload input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.document-upload strong { z-index: 1; color: #d9c5a0; font-size: 12px; }
.document-upload small { z-index: 1; color: #837968; font-size: 11px; }
.document-icon { z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #947545; color: #e5ba70; font-size: 21px; font-weight: 300; }
.document-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.document-upload.has-file::after { content: '已选择'; position: absolute; right: 8px; top: 8px; z-index: 2; padding: 3px 6px; background: #203c2d; color: #bce0c7; font-size: 10px; }
.consent { display: flex; align-items: flex-start; gap: 8px; color: #9e9585; line-height: 1.55; }
.consent input { width: 15px; height: 15px; margin-top: 2px; accent-color: #d4a75d; }
.modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.68); }
.modal-surface { width: min(900px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 22px; border: 1px solid #514631; border-radius: 6px; background: #1a1917; box-shadow: 0 24px 70px rgba(0,0,0,.5); }
.document-review-grid figure { margin: 0; padding: 10px; border: 1px solid #39342c; background: #11110f; }
.document-review-grid figcaption { margin-bottom: 8px; color: #bcb2a2; font-size: 12px; }
.document-review-grid img { display: block; width: 100%; max-height: 320px; object-fit: contain; background: #0c0c0b; }
h1 { font-size: 28px; line-height: 1.2; margin: 0 0 8px; font-weight: 700; }
h2 { color: #f2dfb9; font-size: 15px; margin: 0 0 18px; font-weight: 700; }
label { display: grid; gap: 7px; color: #bcb2a2; font-size: 12px; margin: 0 0 14px; }
input, select, textarea { height: 40px; border: 1px solid #50483b; border-radius: 4px; padding: 0 11px; background: #11110f; color: #f5f0e6; font: inherit; font-size: 13px; }
select option { background: #1a1917; }
textarea { height: auto; min-height: 84px; padding: 10px 11px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #766f64; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(224, 176, 93, .35); border-color: #d7aa5b; }
button { height: 38px; border: 1px solid #d4a75d; border-radius: 4px; background: #d4a75d; color: #18140e; padding: 0 16px; font-weight: 700; cursor: pointer; font: inherit; font-size: 13px; }
button:hover { background: #f0cc8d; border-color: #f0cc8d; }
button.secondary, .logout-button { background: transparent; border-color: #595044; color: #d7c8ae; }
button.secondary:hover, .logout-button:hover { background: #2a2620; border-color: #a98a55; color: #f3cf8b; }
button.danger { background: #702f2a; border-color: #9d4940; color: #fff1e9; }
button.danger:hover { background: #8d3930; border-color: #bd5f55; }
button.small { height: 30px; padding: 0 10px; font-size: 12px; }
.logout-button { height: 32px; padding: 0 12px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 25px; padding-bottom: 20px; border-bottom: 1px solid #332f29; }
.page-heading h1 { color: #fbf6ed; }
.page-heading p { margin: 0; color: #948c80; font-size: 13px; }
.heading-actions { display: flex; align-items: center; gap: 10px; }
.status { padding: 7px 11px; border: 1px solid #67532f; border-radius: 3px; background: #251f15; color: #e8c17b; font-size: 12px; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.metric { min-width: 0; padding: 18px; background: #1a1917; border: 1px solid #39342c; border-radius: 6px; border-top-color: #796340; }
.metric span { display: block; color: #998f80; font-size: 12px; margin-bottom: 9px; }
.metric strong { color: #faf4e9; font-size: 25px; line-height: 1.25; overflow-wrap: anywhere; }
.tabs, .admin-tabs { display: flex; gap: 2px; overflow: auto; margin: 0 0 20px; border-bottom: 1px solid #403a30; }
.tabs button, .admin-tabs button { height: 42px; padding: 0 17px; border: 0; border-radius: 0; border-bottom: 2px solid transparent; background: transparent; color: #9f9688; font-weight: 500; white-space: nowrap; }
.tabs button:hover, .admin-tabs button:hover { background: #201e1a; color: #e5c585; }
.tabs button.active, .admin-tabs button.active { color: #f0c77f; border-bottom-color: #e1b76f; background: #211e18; }
#tabs { grid-column: 1; grid-row: 1 / span 20; position: sticky; top: 92px; display: grid; gap: 7px; margin: 0; padding: 10px; border: 1px solid #3b352c; border-radius: 6px; background: #151411; }
#tabs button { width: 100%; height: 42px; justify-content: flex-start; padding: 0 14px; border: 1px solid transparent; border-radius: 4px; border-bottom: 1px solid transparent; text-align: left; }
#tabs button.active { border-color: #7e643b; background: #2b251d; box-shadow: inset 3px 0 0 #dfb66f, inset 0 1px 0 rgba(247, 213, 151, .2); }
.grid.two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.panel-heading h2 { margin-bottom: 0; }
.search-line { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.search-line input { width: min(320px, 42vw); height: 34px; }
.search-line button { height: 34px; }
.muted, small { color: #8f877b; font-size: 12px; }
.error { color: #e77c6d; font-size: 13px; }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 10px; color: #ece4d6; font-size: 13px; }
.kv div:nth-child(odd) { color: #938a7c; }
.copy-line { display: flex; align-items: center; gap: 8px; min-width: 220px; }
.copy-line a, .support-card a { color: #e3bb76; text-decoration: none; overflow-wrap: anywhere; }
.top-gap { margin-top: 18px; }
.compact-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.status-stack { display: grid; gap: 4px; min-width: 112px; }
.status-stack small { color: #8f877b; }
.compact-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: end; }
.compact-form h2, .compact-form p { grid-column: 1 / -1; }
.compact-form label, .virtual-batch-form label { margin-bottom: 0; }
.virtual-batch-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.progress-cell { min-width: 190px; display: grid; gap: 5px; }
.progress-track { height: 7px; overflow: hidden; border-radius: 2px; background: #312d26; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: #d9ac5f; transition: width .4s ease; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; color: #ddd4c6; font-size: 12px; }
th, td { text-align: left; padding: 11px 9px; border-bottom: 1px solid #312e28; white-space: nowrap; }
th { color: #a69b8a; font-weight: 600; background: #211f1b; }
tbody tr:hover { background: #211e1a; }
.badge { display: inline-block; padding: 3px 7px; border: 1px solid #53493b; border-radius: 3px; background: #2a251e; color: #d8c4a0; }
.badge.accent { background: #202a34; border-color: #3d5870; color: #94c6e8; }
.badge.green, .dot.green { background: #1b382b; border-color: #3d7658; color: #94d5ad; }
.badge.red, .dot.red { background: #3b211f; border-color: #77423d; color: #ec9386; }
.support-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.support-card { min-height: 132px; border: 1px solid #40392e; border-radius: 5px; background: #161513; padding: 14px; display: grid; grid-template-columns: 38px 1fr 72px; gap: 12px; align-items: center; }
.support-card h3 { color: #f0e5d2; margin: 0 0 8px; font-size: 15px; }
.support-card img { width: 72px; height: 72px; object-fit: contain; border: 1px solid #4d4538; }
.support-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #17130e; background: #d4a75d; font-weight: 800; font-size: 12px; }
.support-icon.line, .support-icon.whatsapp, .support-icon.telegram { background: #d4a75d; }
.support-edit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.qr-upload-preview { width: 112px; height: 112px; object-fit: contain; border: 1px solid #4d4538; background: #11110f; margin-top: 2px; }
fieldset { border: 1px solid #413a30; border-radius: 5px; padding: 14px; min-width: 0; }
legend { padding: 0 6px; color: #e3bb76; font-weight: 700; }
.message-form { display: grid; grid-template-columns: 180px 1fr auto; gap: 10px; align-items: start; margin-bottom: 16px; }
.message-form textarea { min-height: 40px; }
.message-cell { white-space: normal; min-width: 220px; max-width: 440px; }
.actions, .actions-wrap { display: flex; gap: 6px; }
.actions-wrap { flex-wrap: wrap; min-width: 270px; }
.actions-wrap button { flex: 0 0 auto; }
.actions button { height: 30px; font-size: 12px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; margin-right: 5px; }
.tab-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #d45c50; margin-left: 7px; vertical-align: middle; }
.legend { display: grid; gap: 12px; color: #b8af9f; font-size: 13px; }
button:disabled { opacity: .5; cursor: not-allowed; }
code { font-family: Consolas, monospace; background: #29241d; color: #f0d092; padding: 2px 5px; border-radius: 3px; }
#toast { position: fixed; right: 24px; bottom: 24px; background: #eee0c3; color: #251c11; border: 1px solid #f4dba5; padding: 12px 16px; border-radius: 4px; opacity: 0; transform: translateY(10px); transition: .2s; pointer-events: none; font-size: 13px; font-weight: 700; }
#toast.show { opacity: 1; transform: none; }
/* Clear visual hierarchy: gold commits an action; outlined controls support it. */
form > button:not(.secondary):not(.danger), .panel-heading > button:not(.secondary):not(.danger) { min-width: 112px; margin-top: 4px; }
.heading-actions { gap: 12px; }
.heading-actions .secondary { min-width: 74px; }
.search-line { padding: 3px; border: 1px solid #40392e; border-radius: 5px; background: #12110f; }
.search-line input { border: 0; background: transparent; }
.search-line input:focus { outline: 0; box-shadow: none; }
.search-line:focus-within { border-color: #b99155; box-shadow: 0 0 0 2px rgba(224, 176, 93, .12); }
.search-line button { min-width: 64px; border-radius: 3px; }
.actions { align-items: center; flex-wrap: wrap; gap: 7px; }
.actions-wrap { min-width: 0; max-width: 360px; }
.actions button { min-width: 56px; border-color: #554a3b; background: #26221c; color: #dac7a8; }
.actions button:hover { border-color: #bd965a; background: #332c22; color: #f3d290; }
.actions button:not(.secondary):not(.danger) { border-color: #b89154; background: #b89154; color: #17130d; }
.actions button:not(.secondary):not(.danger):hover { border-color: #e5be78; background: #e5be78; }
.actions button.danger { border-color: #88483f; background: transparent; color: #e7a095; }
.actions button.danger:hover { border-color: #bc5c50; background: #4b2623; color: #ffd0c9; }
.tabs, .admin-tabs { gap: 6px; padding: 5px; border: 1px solid #3b352c; border-radius: 6px; background: #151411; }
.tabs button, .admin-tabs button { height: 34px; border: 1px solid transparent; border-radius: 3px; border-bottom: 1px solid transparent; }
.tabs button.active, .admin-tabs button.active { border-color: #7e643b; background: #2b251d; box-shadow: inset 0 1px 0 rgba(247, 213, 151, .2); }
.tabs button:hover, .admin-tabs button:hover { border-color: #4e4333; }
.panel-heading { padding-bottom: 14px; border-bottom: 1px solid #312d26; }
.panel-heading + .table-wrap, .panel-heading + div[id$="Table"] { margin-top: 4px; }
td .actions { min-height: 30px; }
@media (max-width: 800px) { main { padding: 24px 16px 40px; } #appView { display: block; } #appView > .page-heading, #appView > .metrics, #appView > .tab-page { grid-column: auto; } #tabs { position: static; display: flex; grid-column: auto; grid-row: auto; margin: 0 0 20px; padding: 5px; overflow-x: auto; } #tabs button { width: auto; min-width: max-content; height: 34px; justify-content: center; text-align: center; box-shadow: none; } .topbar { padding: 0 16px; } .metrics { grid-template-columns: 1fr 1fr; } .grid.two, .compact-form, .support-edit-grid, .virtual-batch-form { grid-template-columns: 1fr; } .support-grid { grid-template-columns: 1fr; } .message-form { grid-template-columns: 1fr; } .message-form select { width: 100%; } .panel-heading { align-items: stretch; flex-direction: column; } .search-line { margin-left: 0; } .search-line input { width: 100%; } .search-line button { flex: 0 0 auto; } .page-heading { align-items: start; gap: 12px; } .heading-actions { align-items: flex-end; flex-direction: column; } .kv { grid-template-columns: 1fr; } .topbar span { display: none; } }
@media (max-width: 480px) { .metrics, .compact-metrics { grid-template-columns: 1fr; } .topbar a { display: none; } .topbar strong { font-size: 23px; } .tabs button, .admin-tabs button { padding: 0 13px; } .panel { padding: 16px; } }
@media (max-width: 800px) { .tabs, .admin-tabs { gap: 3px; } .tabs button, .admin-tabs button { padding: 0 12px; } .actions-wrap { max-width: none; } .actions button { flex: 1 0 auto; } form > button:not(.secondary):not(.danger) { width: 100%; } }