:root {
  --bg:#f4f6fb; --panel:#fff; --text:#162033; --muted:#778197; --line:#e8ebf2;
  --primary:#635bff; --primary-dark:#5148eb; --primary-soft:#eeedff; --nav:#101828;
  --success:#17a673; --warning:#f59e0b; --danger:#d92d20; --radius:16px;
  --shadow:0 10px 30px rgba(25,35,58,.06); --shadow-hover:0 14px 34px rgba(25,35,58,.11)
}
* { box-sizing:border-box }
html { min-height:100%; background:var(--bg) }
body { margin:0; min-height:100vh; font:14px/1.6 Inter,"PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased }
a { color:var(--primary); text-decoration:none }
button,input,select,textarea { font:inherit }
.app-layout { display:flex; min-height:100vh }
.sidebar { position:fixed; inset:0 auto 0 0; width:248px; padding:24px 16px 16px; display:flex; flex-direction:column; background:linear-gradient(180deg,#111b30 0%,#0d1424 100%); color:#fff; z-index:20; box-shadow:8px 0 30px rgba(10,18,33,.08) }
.brand { display:flex; align-items:center; gap:12px; height:48px; padding:0 10px; margin-bottom:28px; color:#fff }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:linear-gradient(145deg,#766cff,#4e46e5); box-shadow:0 8px 18px rgba(99,91,255,.4); font-size:17px; font-weight:800 }
.brand strong,.brand small { display:block }
.brand strong { font-size:18px; letter-spacing:.5px }
.brand small { margin-top:-2px; color:#7f8aa3; font-size:9px; letter-spacing:1.8px }
.nav-menu { flex:1; overflow-y:auto }
.nav-label { margin:0 12px 8px; color:#667085; font-size:11px; font-weight:700; letter-spacing:1.2px }
.nav-label-spaced { margin-top:23px }
.nav-menu a { position:relative; display:flex; align-items:center; gap:11px; margin:4px 0; padding:11px 13px; border-radius:11px; color:#aeb7c9; transition:.18s ease }
.nav-menu a:hover { color:#fff; background:rgba(255,255,255,.065); transform:translateX(2px) }
.nav-menu a.active { color:#fff; background:linear-gradient(100deg,rgba(99,91,255,.32),rgba(99,91,255,.12)); box-shadow:inset 3px 0 #8179ff }
.nav-icon { display:grid; place-items:center; width:22px; height:22px; color:#8f99ad; font-size:18px; font-weight:500 }
.nav-menu a.active .nav-icon { color:#a9a4ff }
.sidebar-foot { display:flex; align-items:center; gap:10px; padding:14px 9px 2px; border-top:1px solid rgba(255,255,255,.08) }
.avatar { display:grid; place-items:center; flex:0 0 36px; width:36px; height:36px; border-radius:11px; color:#fff; background:linear-gradient(145deg,#28b6a1,#168d87); font-weight:700 }
.sidebar-user { min-width:0; flex:1 }
.sidebar-user strong,.sidebar-user small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.sidebar-user strong { color:#f5f7fb; font-size:13px }
.sidebar-user small { color:#7f8aa3; font-size:11px }
.sidebar-foot form { margin:0 }
.logout-button { width:30px; height:30px; padding:0; border:0; color:#7f8aa3; background:transparent; font-size:18px }
.logout-button:hover { color:#fff; background:rgba(255,255,255,.08) }
.main-shell { min-width:0; width:calc(100% - 248px); margin-left:248px }
.topbar { position:sticky; top:0; z-index:10; height:70px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; border-bottom:1px solid rgba(232,235,242,.85); background:rgba(255,255,255,.9); backdrop-filter:blur(14px) }
.topbar strong { font-size:15px }
.topbar-sub { margin-left:14px; color:#a0a8b8; font-size:12px }
.top-actions { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px }
.online-dot { width:7px; height:7px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 4px #e4f8eb }
.role-chip { margin-left:10px; padding:5px 10px; border-radius:20px; color:#5650d8; background:var(--primary-soft); font-weight:600 }
.content { min-width:0; max-width:1600px; margin:0 auto; padding:30px 34px 52px }
.page-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px }
.page-head h1 { margin:0 0 3px; font-size:25px; line-height:1.35; letter-spacing:-.4px }
.page-head p { margin:0; color:var(--muted) }
.panel { margin-bottom:20px; padding:22px; border:1px solid rgba(232,235,242,.95); border-radius:var(--radius); background:var(--panel); box-shadow:var(--shadow) }
.panel h2 { margin:0 0 18px; font-size:16px; letter-spacing:-.15px }
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-bottom:22px }
.cards.compact { grid-template-columns:repeat(3,1fr); margin:0 }
.metric { position:relative; overflow:hidden; min-height:132px; padding:22px 23px; border:1px solid rgba(232,235,242,.9); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow); transition:.2s ease }
.metric:hover { transform:translateY(-2px); box-shadow:var(--shadow-hover) }
.metric:after { content:""; position:absolute; width:90px; height:90px; right:-27px; top:-27px; border-radius:50%; background:rgba(99,91,255,.09) }
.metric:nth-child(2):after { background:rgba(23,166,115,.1) }
.metric:nth-child(3):after { background:rgba(245,158,11,.11) }
.metric span { display:block; margin-bottom:12px; color:var(--muted); font-size:13px }
.metric strong { display:block; font-size:28px; line-height:1.2; letter-spacing:-.8px }
.metric small { display:block; margin-top:8px; color:#a0a8b8 }
.button,button { display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:8px 15px; border:1px solid #dce1ea; border-radius:10px; color:#344054; background:#fff; cursor:pointer; transition:.17s ease }
.button:hover,button:hover { border-color:#c9cfdb; color:#111827; background:#f8f9fc; transform:translateY(-1px) }
.primary { border-color:var(--primary); color:#fff; background:linear-gradient(135deg,#6c64ff,#5a52ed); box-shadow:0 6px 14px rgba(99,91,255,.2) }
.primary:hover { border-color:var(--primary-dark); color:#fff; background:linear-gradient(135deg,#625aff,#4f47e4); box-shadow:0 8px 18px rgba(99,91,255,.27) }
.wide { width:100% }
.form-panel { padding:26px }
.form-panel h2 { display:flex; align-items:center; gap:8px; margin:8px 0 18px; padding-bottom:12px; border-bottom:1px solid var(--line) }
.form-panel h2:before { content:""; width:4px; height:16px; border-radius:3px; background:var(--primary) }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 22px; margin-bottom:30px }
.field { display:flex; flex-direction:column; gap:7px }
.field label,.stack-form label { color:#344054; font-size:13px; font-weight:650 }
.field input,.field select,.field textarea,.stack-form input,.stack-form select,.stack-form textarea,.search input,.batchbar input,.batchbar select,.inline-form select,.comment-form textarea { width:100%; min-height:42px; padding:9px 12px; border:1px solid #dce1ea; border-radius:10px; outline:0; color:var(--text); background:#fff; transition:.16s ease }
.field textarea,.stack-form textarea,.comment-form textarea { min-height:92px; resize:vertical }
.field input:focus,.field select:focus,.field textarea:focus,.stack-form input:focus,.stack-form select:focus,.stack-form textarea:focus,.search input:focus,.batchbar input:focus,.batchbar select:focus,.inline-form select:focus,.comment-form textarea:focus { border-color:#8c85ff; box-shadow:0 0 0 3px rgba(99,91,255,.11) }
.field input.date-input,.stack-form input.date-input { min-height:46px; padding:10px 46px 10px 14px; border-color:#d8ddec; border-radius:12px; color:#273149; background-color:#fbfcff; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23635bff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; font-variant-numeric:tabular-nums; cursor:pointer }
.field input.date-input:hover,.stack-form input.date-input:hover { border-color:#aaa5f7; background-color:#faf9ff }
.field input.date-input:focus,.stack-form input.date-input:focus { border-color:#7169ef; background-color:#fff; box-shadow:0 0 0 4px rgba(99,91,255,.10) }
input.date-input::-webkit-calendar-picker-indicator { width:30px; height:30px; margin-right:-38px; opacity:0; cursor:pointer }
input.date-input.date-empty::-webkit-datetime-edit { color:transparent }
input.date-input.date-empty::-webkit-date-and-time-value { color:transparent }
.date-field>label:before { content:"日期"; display:inline-flex; margin-right:7px; padding:1px 6px; border-radius:5px; color:#625be3; background:#efedff; font-size:10px; font-weight:700; vertical-align:1px }
.span-2 { grid-column:span 2 }
.actions,.section-head,.batchbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.section-head { justify-content:space-between }
.errorlist { margin:0; padding-left:18px; color:var(--danger); font-size:12px }
.message { display:flex; align-items:center; gap:9px; margin-bottom:16px; padding:11px 14px; border:1px solid #bbefd9; border-radius:11px; color:#087a54; background:#ecfdf5 }
.message.error { border-color:#ffd5d2; color:var(--danger); background:#fff1f0 }
table { width:100%; border-collapse:separate; border-spacing:0 }
th,td { padding:13px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; white-space:nowrap }
th { color:#7d8799; background:#f8f9fc; font-size:11px; font-weight:700; letter-spacing:.3px }
thead th:first-child { border-radius:10px 0 0 10px }
thead th:last-child { border-radius:0 10px 10px 0 }
tbody tr { transition:.15s ease }
tbody tr:hover { background:#fafaff }
tbody tr:last-child td { border-bottom:0 }
td a { font-weight:600 }
.table-wrap { overflow-x:auto }
.empty { padding:38px 20px!important; color:#9aa3b3; text-align:center }
.tag { display:inline-flex; align-items:center; padding:4px 9px; border-radius:20px; color:#514bcf; background:#eeedff; font-size:11px; font-weight:650 }
.tag:before { content:""; width:5px; height:5px; margin-right:5px; border-radius:50%; background:#746cff }
.tag.muted { color:#536175; background:#f0f2f6 }
.tag.muted:before { background:#98a2b3 }
.search { display:flex; gap:8px; max-width:500px; margin-bottom:17px }
.search input { background:#fff }
.order-filter-panel { padding:18px 20px }
.order-filter-grid { display:grid; grid-template-columns:repeat(4,minmax(145px,1fr)); gap:13px 15px }
.order-filter-grid label { display:flex; min-width:0; flex-direction:column; gap:5px }
.order-filter-grid label>span { color:#667085; font-size:11px; font-weight:650 }
.order-filter-grid input,.order-filter-grid select { width:100%; min-height:40px; padding:8px 11px; border:1px solid #dce1ea; border-radius:9px; outline:0; color:var(--text); background:#fff }
.order-filter-grid input:focus,.order-filter-grid select:focus { border-color:#8c85ff; box-shadow:0 0 0 3px rgba(99,91,255,.10) }
.order-filter-grid .filter-wide { grid-column:span 2 }
.filter-actions { display:flex; align-items:center; gap:9px; margin-top:15px; padding-top:14px; border-top:1px solid var(--line) }
.order-filter-grid input.date-input { min-height:40px; padding:8px 42px 8px 11px; background-color:#fbfcff; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23635bff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center }
.money-cell { color:#344054; font-weight:700; font-variant-numeric:tabular-nums }
.money-cell.paid { color:#07865e }
.money-cell.balance { color:#c06a0a }
.money-cell.commission { color:#5d55dc }
.detail-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(330px,1fr); gap:20px }
.details { display:grid; grid-template-columns:128px 1fr; gap:12px 20px; margin:0 }
.details dt { color:var(--muted) }
.details dd { margin:0; color:#253047; font-weight:500 }
.order-info-panel { padding:25px 27px }
.order-details { grid-template-columns:130px minmax(180px,1fr) 130px minmax(180px,1fr); gap:12px 18px }
.financial-summary { padding:22px 24px 24px }
.financial-summary-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px }
.financial-summary-title h2 { margin:0 0 4px; line-height:1.35 }
.financial-summary-title p { margin:0; color:var(--muted); font-size:12px }
.financial-summary-title>span { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:#efedff; color:#5d55dc; font-size:20px; font-weight:800 }
.financial-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px }
.financial-cards article { min-width:0; padding:18px 20px; border:1px solid #e6e9f2; border-radius:14px; background:#fbfcff }
.financial-cards small,.financial-cards strong { display:block }
.financial-cards small { margin-bottom:8px; color:var(--muted) }
.financial-cards strong { color:#263149; font-size:23px; font-variant-numeric:tabular-nums; white-space:nowrap }
.financial-cards .paid { border-color:#d9eee7; background:#f7fcfa }
.financial-cards .paid strong { color:#07865e }
.financial-cards .balance { border-color:#f3e3cb; background:#fffaf3 }
.financial-cards .balance strong { color:#c06a0a }
.refund-inline-record { display:grid; grid-template-columns:repeat(3,minmax(130px,1fr)) minmax(360px,1.5fr); gap:14px; margin:16px 0; padding:16px; border:1px solid var(--line); border-radius:14px; background:#fafbff }
.refund-inline-record>div { min-width:0 }
.refund-inline-record small,.refund-inline-record strong { display:block }
.refund-inline-record small { margin-bottom:7px; color:var(--muted) }
.refund-verification .inline-form { margin-top:0 }
.commission-text { color:#5d55dc!important; font-weight:800!important }
.comments>div { padding:13px 2px; border-bottom:1px solid var(--line) }
.comments small { margin-left:10px; color:var(--muted) }
.comments p { margin:5px 0 }
.comment-form { display:flex; align-items:flex-end; gap:10px; margin-top:16px }
.ranking-grid { display:grid; grid-template-columns:1fr; gap:16px }
.ranking-grid .panel { margin-bottom:0; padding:20px }
.ranking-grid .panel>h2 { display:flex; align-items:center; gap:9px; margin-bottom:14px }
.ranking-grid .panel>h2:before { content:""; width:4px; height:17px; border-radius:4px; background:linear-gradient(#756dff,#5149df) }
.batchbar { margin:-4px 0 18px; padding:14px; border-radius:12px; background:#f8f9fc }
.batchbar label { display:flex; align-items:center; gap:8px; color:#536175; font-size:12px }
.batchbar select { min-width:150px }
.batchbar input { width:100px }
.batch-editor-field { display:flex; align-items:center; gap:8px; color:#536175; font-size:12px }
.editor-picker { position:relative; min-width:280px }
.editor-picker>select { display:none }
.editor-combobox { position:relative; width:100% }
.editor-picker input.editor-picker-search { width:100%; min-height:42px; padding:9px 40px 9px 12px; border:1px solid #dce1ea; border-radius:10px; color:var(--text); background:#fff; outline:0 }
.editor-picker input.editor-picker-search:focus { border-color:#8c85ff; box-shadow:0 0 0 3px rgba(99,91,255,.11) }
.editor-picker-toggle { position:absolute; z-index:2; top:1px; right:1px; width:39px; height:40px; padding:0; border:0; color:#667085; background:transparent; box-shadow:none; font-size:18px }
.editor-picker-toggle:hover { color:var(--primary); background:transparent; box-shadow:none }
.editor-picker-menu { position:absolute; z-index:30; top:calc(100% + 6px); left:0; right:0; max-height:230px; overflow-y:auto; padding:6px; border:1px solid #d9dce7; border-radius:11px; background:#fff; box-shadow:0 14px 35px rgba(24,31,50,.16) }
.editor-picker-option { display:block; width:100%; min-height:38px; padding:8px 10px; border:0; border-radius:8px; color:#344054; background:#fff; box-shadow:none; text-align:left }
.editor-picker-option:hover,.editor-picker-option.selected { color:#5149df; background:#f2f0ff; box-shadow:none }
.batchbar .editor-picker input { width:100% }
.compact-editor-picker { min-width:0 }
.market-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px }
.order-card { position:relative; overflow:hidden; padding:21px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow); transition:.2s ease }
.order-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-hover) }
.order-card-head { display:flex; align-items:center; justify-content:space-between }
.order-card-head strong { color:#5b54e8 }
.order-card h2 { margin:17px 0 12px; font-size:17px }
.order-card dl { display:grid; grid-template-columns:80px 1fr; gap:7px; margin:12px 0 }
.order-card dt { color:var(--muted) }
.order-card dd { margin:0 }
.inline-form { display:flex; gap:7px }
.two-cols { display:grid; grid-template-columns:minmax(320px,.85fr) minmax(0,1.8fr); gap:20px }
.stack-form { max-width:760px }
.stack-form p { display:flex; flex-direction:column; gap:7px; margin:0 0 16px }
.helptext { color:var(--muted); font-size:11px }
.ops-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:20px }
.ops-card { display:flex; align-items:center; gap:13px; padding:17px; border:1px solid var(--line); border-radius:14px; color:var(--text); background:#fff; box-shadow:var(--shadow); transition:.18s ease }
.ops-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-hover) }
.ops-card>div { flex:1 }
.ops-card strong,.ops-card small { display:block }
.ops-card strong { font-size:22px; line-height:1.2 }
.ops-card small { margin-top:3px; color:var(--muted); font-size:12px }
.ops-card>b { color:#b4bac6; font-size:20px }
.ops-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; font-size:19px; font-weight:700 }
.ops-icon.purple { color:#5e57e8; background:#eeedff }
.ops-icon.orange { color:#d97706; background:#fff4df }
.ops-icon.green { color:#079467; background:#e8f8f2 }
.ops-icon.blue { color:#2774d8; background:#eaf3ff }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(300px,.8fr); gap:20px }
.section-note { margin:-13px 0 0; color:var(--muted); font-size:12px }
.rank-list { margin-top:5px }
.rank-item { display:flex; align-items:center; gap:11px; padding:12px 2px; border-bottom:1px solid var(--line) }
.rank-item:last-child { border-bottom:0 }
.rank-no { display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px; border-radius:9px; color:#5d55dc; background:#eeedff; font-size:12px; font-weight:800 }
.rank-item:nth-child(1) .rank-no { color:#9a6700; background:#fff1c7 }
.rank-item:nth-child(2) .rank-no { color:#526071; background:#edf0f4 }
.rank-item:nth-child(3) .rank-no { color:#a95725; background:#ffeadc }
.rank-item>div { min-width:0; flex:1 }
.rank-item strong,.rank-item small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.rank-item strong { font-size:13px }
.rank-item small { color:var(--muted); font-size:11px }
.rank-item>b { color:#39445a; font-size:13px }
.quick-actions { margin-top:17px }
.admin-order-action select { min-width:210px; min-height:38px; padding:7px 10px; border:1px solid #dce1ea; border-radius:10px; background:#fff }
.table-sub { display:block; color:var(--muted); font-size:11px }
.small-button { min-height:32px; padding:5px 10px; font-size:12px }
.status-on,.status-off { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:650 }
.status-on { color:#087a54 }
.status-off { color:#b42318 }
.status-on:before,.status-off:before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor }
.permission-tip { display:flex; align-items:flex-start; gap:12px; padding:15px 17px; border:1px solid #dcd9ff; border-radius:12px; color:#5a55b6; background:#f5f4ff }
.permission-tip span { color:#6f7390 }
.permission-form { max-width:1050px }
.permission-form small { color:var(--muted) }
.permission-scope { max-width:420px; margin-bottom:18px }
.permission-checks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:30px }
.permission-check { display:flex; align-items:center; gap:9px; min-height:44px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; color:#3b465a; background:#fafbfc; cursor:pointer }
.permission-check:hover { border-color:#cfcaff; background:#f7f6ff }
.permission-check input { width:17px; height:17px; accent-color:var(--primary) }
.checkbox-field { justify-content:flex-end }
.checkbox-field>input { width:18px; min-height:18px; accent-color:var(--primary) }
.distribution-box { margin:-4px 0 28px; padding:18px; border:1px solid #dddafe; border-radius:14px; background:linear-gradient(135deg,#faf9ff,#f6f8ff) }
.distribution-box>.field { max-width:520px }
.distribution-fields { margin:16px 0 0 }
.distribution-fields small { color:var(--muted); font-size:11px }
.distribution-guide { display:flex; align-items:center; gap:22px; margin:-4px 0 16px; padding:13px 15px; border:1px solid #e5e3ff; border-radius:11px; color:#666b83; background:#f8f7ff; font-size:12px }
.distribution-guide span { display:flex; align-items:center; gap:7px }
.distribution-guide b { display:grid; place-items:center; width:21px; height:21px; border-radius:50%; color:#fff; background:#6b63ef; font-size:11px }
.dashboard-section-head { display:flex; align-items:end; justify-content:space-between; margin:28px 2px 14px }
.dashboard-section-head h2 { margin:0; font-size:18px }
.dashboard-section-head p { margin:2px 0 0; color:var(--muted); font-size:12px }
.period-stat-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; margin-bottom:22px }
.period-stat-grid.four-periods { grid-template-columns:repeat(4,minmax(0,1fr)) }
.period-stat-card { overflow:hidden; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:var(--shadow) }
.period-stat-card { transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease }
.period-stat-card:hover { border-color:#dcd9ff; transform:translateY(-2px); box-shadow:var(--shadow-hover) }
.period-title { display:flex; align-items:center; gap:10px; padding:16px 18px 13px; border-bottom:1px solid var(--line) }
.period-title span { display:grid; place-items:center; width:31px; height:31px; border-radius:10px; color:#fff; background:linear-gradient(135deg,#746cff,#5750e5); font-weight:800 }
.period-stat-card:nth-child(2) .period-title span { background:linear-gradient(135deg,#22b18a,#0a8f70) }
.period-stat-card:nth-child(3) .period-title span { background:linear-gradient(135deg,#f5a623,#dc7d08) }
.period-stat-card:nth-child(4) .period-title span { background:linear-gradient(135deg,#3d8bfd,#2164d5) }
.period-title strong { font-size:15px }
.period-stat-card dl { display:grid; grid-template-columns:1fr 1fr; margin:0; padding:8px }
.period-stat-card dl>.metric-link { display:flex; min-width:0; min-height:58px; flex-direction:column; justify-content:center; padding:10px 11px; border-radius:9px }
.period-stat-card dl>.metric-link:hover { background:#f8f8ff }
.period-stat-card dt { color:var(--muted); font-size:11px }
.period-stat-card dd { margin:2px 0 0; color:#273149; font-size:15px; font-weight:750 }
.history-query { overflow:hidden; margin-top:30px; border:1px solid #dddafe; border-radius:17px; background:#fff; box-shadow:var(--shadow) }
.history-query>summary { display:flex; align-items:center; gap:13px; padding:17px 20px; list-style:none; cursor:pointer; background:linear-gradient(135deg,#fff,#f7f6ff); transition:.18s ease }
.history-query>summary::-webkit-details-marker { display:none }
.history-query>summary:hover { background:#f5f4ff }
.history-query[open]>summary { border-bottom:1px solid #e5e3ff }
.history-query-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; color:#fff; background:linear-gradient(135deg,#7169ff,#5149e4); box-shadow:0 7px 16px rgba(99,91,255,.2); font-size:20px }
.history-query>summary div { min-width:0; flex:1 }
.history-query>summary strong,.history-query>summary small { display:block }
.history-query>summary strong { font-size:15px }
.history-query>summary small { color:var(--muted); font-size:11px }
.history-query>summary>b { color:#6159e8; font-size:12px }
.history-query[open]>summary>b { font-size:0 }
.history-query[open]>summary>b:after { content:"收起"; font-size:12px }
.history-query-body { padding:22px }
.performance-filter { margin:0 0 16px; padding:18px; border:1px solid var(--line); border-radius:13px; background:#fafbfe }
.performance-filter .section-head { margin-bottom:14px }
.performance-filter .section-note { margin:0 }
.performance-filter-form { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap }
.quick-periods { display:flex; gap:7px; flex-wrap:wrap }
.quick-periods button { padding:8px 13px; border:1px solid #dfe2ec; border-radius:9px; color:#5f687c; background:#fff; cursor:pointer }
.quick-periods button:hover,.quick-periods button.active { border-color:#746cff; color:#5850df; background:#f4f2ff }
.custom-period { display:flex; align-items:end; gap:9px; flex-wrap:wrap }
.custom-period label { display:grid; gap:4px; color:var(--muted); font-size:11px }
.custom-period input { min-width:145px; padding:8px 10px; border:1px solid #dfe2ec; border-radius:8px; color:var(--text); background:#fff }
.custom-period>span { padding-bottom:9px; color:var(--muted) }
.range-result { overflow:hidden; margin:0 0 25px; border:1px solid #dddafe; border-radius:15px; background:linear-gradient(135deg,#fbfaff,#f5f7ff); box-shadow:var(--shadow) }
.range-result-title { display:flex; align-items:center; gap:10px; padding:13px 17px; border-bottom:1px solid #e5e3ff }
.range-result-title span { color:var(--muted); font-size:12px }
.range-result-title strong { color:#554dd8 }
.range-metrics { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); padding:12px }
.range-metrics>.metric-link { display:grid; min-width:0; min-height:60px; align-content:center; gap:5px; padding:8px 15px; border-right:1px solid #e4e3ef }
.range-metrics>.metric-link:last-child { border-right:0 }
.range-metrics small { color:var(--muted) }
.range-metrics strong { color:#273149; font-size:17px }
.history-ranking { padding:19px; border:1px solid var(--line); border-radius:14px; background:#fff }
.history-ranking .section-head { margin-bottom:14px }
.history-ranking .section-note { margin:0 }
.due-count-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:16px }
.due-count-grid>div { display:flex; align-items:baseline; gap:8px; padding:17px 19px; border:1px solid #e5e3ff; border-radius:13px; background:linear-gradient(135deg,#fff,#f8f7ff); box-shadow:var(--shadow) }
.due-count-grid>button { display:flex; align-items:baseline; gap:8px; padding:17px 19px; border:1px solid #e5e3ff; border-radius:13px; background:linear-gradient(135deg,#fff,#f8f7ff); box-shadow:var(--shadow); text-align:left; cursor:pointer; transition:.18s ease }
.due-count-grid>button:hover,.due-count-grid>button.active { border-color:var(--primary); box-shadow:0 8px 20px rgba(99,91,255,.16); transform:translateY(-1px) }
.due-count-grid span { flex:1; color:#616a7e }
.due-count-grid strong { color:#5750db; font-size:25px }
.due-count-grid small { color:var(--muted) }
.required-mark { margin-left:3px; color:#e5484d; font-style:normal }
.radio-options { display:flex; flex-wrap:wrap; gap:9px }
.radio-options>div { display:contents }
.radio-options label { display:flex; align-items:center; gap:7px; min-width:100px; padding:9px 13px; border:1px solid #dce1ea; border-radius:10px; color:#475467; background:#fff; cursor:pointer }
.radio-options label:hover { border-color:#958fff; background:#f8f7ff }
.field .radio-options input { width:16px; min-height:16px; margin:0; accent-color:var(--primary) }
.required-chip,.optional-chip { display:inline-flex; padding:3px 8px; border-radius:20px; font-size:11px; font-weight:700 }
.required-chip { color:#c4322b; background:#fff0ef }
.optional-chip { color:#687386; background:#f0f2f5 }
.custom-field-form { max-width:900px }
.hidden { display:none!important }
.setting-tabs { display:flex; gap:8px; margin:0 0 16px; flex-wrap:wrap }
.setting-tabs a { padding:10px 20px; border:1px solid var(--line); border-radius:10px; color:var(--text); background:#fff; font-weight:700 }
.setting-tabs a.active { color:#fff; border-color:var(--primary); background:var(--primary) }
.notice-badge { margin-left:auto; min-width:20px; height:20px; display:inline-grid; place-items:center; padding:0 5px; border-radius:12px; color:#fff; background:#ff4d6d; font-size:11px }
.notification-bell { position:relative; display:grid; place-items:center; width:36px; height:36px; margin-left:5px; border:1px solid var(--line); border-radius:11px; color:#566176; background:#fff; font-size:20px }
.notification-bell:hover,.notification-bell.active { color:var(--primary); border-color:#cac6ff; background:#f5f4ff }
.notification-bell b { position:absolute; right:-5px; top:-6px; display:grid; place-items:center; min-width:19px; height:19px; padding:0 5px; border:2px solid #fff; border-radius:12px; color:#fff; background:#ff4d6d; font-size:10px }
.notification-list { padding:8px }
.notification-item { display:flex; align-items:center; gap:13px; padding:16px; border-bottom:1px solid var(--line); border-radius:12px; color:var(--text) }
.notification-item:last-child { border-bottom:0 }
.notification-item:hover,.notification-item.unread { background:#f5f4ff }
.notification-item div { display:flex; flex:1; flex-direction:column; gap:4px }
.notification-item small { color:var(--muted) }
.notification-dot { width:9px; height:9px; border-radius:50%; background:#cbd1dc }
.notification-item.unread .notification-dot { background:var(--primary); box-shadow:0 0 0 4px rgba(99,91,255,.12) }
.timeline { display:flex; flex-direction:column }
.timeline-item { display:grid; grid-template-columns:18px 1fr; gap:10px; padding:10px 0 }
.timeline-item>span { position:relative; width:10px; height:10px; margin-top:5px; border-radius:50%; background:var(--primary) }
.timeline-item>span:after { content:""; position:absolute; left:4px; top:10px; width:2px; height:calc(100% + 20px); background:var(--line) }
.timeline-item:last-child>span:after { display:none }
.timeline-item div { display:flex; flex-direction:column; gap:4px }
.timeline-item small,.timeline-item p { margin:0; color:var(--muted) }
.radio-inline { flex-wrap:wrap }
.radio-inline label { display:inline-flex; align-items:center; gap:4px; white-space:nowrap }
.field-lock { display:block; margin-top:3px; color:#a66b00; font-size:10px }
.attachment-slot-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px }
.attachment-slot>div:first-child { display:flex; align-items:center; gap:10px }
.attachment-slot>div:first-child span { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; color:#fff; background:var(--primary); font-weight:800 }
.attachment-slot h2 { margin:0 }
.attachment-slot form { display:flex; flex-direction:column; gap:9px; margin-top:13px }
.attachment-slot input[type=file] { width:100% }
.attachment-entry-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:16px }
.inline-attachment-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; margin-top:16px }
.inline-attachment-card { min-width:0; padding:17px; border:1px solid #e2e0ff; border-radius:14px; background:linear-gradient(135deg,#fff,#faf9ff) }
.attachment-card-title { display:flex; align-items:center; gap:10px }
.attachment-card-title>span { display:grid; place-items:center; flex:0 0 38px; width:38px; height:38px; border-radius:11px; color:#fff; background:linear-gradient(135deg,#746cff,#5650df); font-weight:800 }
.attachment-card-title>div { min-width:0; flex:1 }
.attachment-card-title strong,.attachment-card-title small { display:block }
.attachment-card-title small { color:var(--muted); font-size:11px }
.attachment-card-title>a { font-size:12px }
.mini-file-list { display:grid; gap:6px; margin:13px 0 }
.mini-file-list a { overflow:hidden; padding:7px 9px; border-radius:8px; color:#514bcf; background:#f1f0ff; text-overflow:ellipsis; white-space:nowrap }
.mini-file-list small { padding:7px 2px; color:var(--muted) }
.compact-upload { display:flex; align-items:center; gap:7px; padding-top:12px; border-top:1px solid var(--line) }
.compact-upload select { max-width:145px; min-height:38px; padding:7px 9px; border:1px solid #dce1ea; border-radius:9px; background:#fff }
.compact-upload input[type=file] { min-width:0; flex:1 }
.compact-upload button { flex:0 0 auto }
.inline-create-form { margin-top:17px; padding:19px; border:1px solid #dddafe; border-radius:13px; background:#faf9ff }
.inline-create-form h3 { margin:0 0 15px; font-size:15px }
.inline-create-form .form-grid { margin-bottom:16px }
.inline-action-head { margin-bottom:14px }
.order-action-row { padding-top:4px }
.app-dialog { width:min(480px,calc(100% - 30px)); padding:0; border:0; border-radius:17px; color:var(--text); background:#fff; box-shadow:0 28px 80px rgba(17,24,39,.25) }
.app-dialog::backdrop { background:rgba(16,24,40,.48); backdrop-filter:blur(3px) }
.app-dialog>form { padding:23px }
.dialog-head { display:flex; justify-content:space-between; gap:15px; margin-bottom:20px }
.dialog-head h2 { margin:0 0 3px }
.dialog-head p { margin:0; color:var(--muted) }
.dialog-head>button { width:34px; min-height:34px; padding:0; border:0; font-size:22px }
.dialog-tip { display:block; margin:8px 0 19px; color:var(--muted) }
.attachment-entry-grid>a { display:flex; align-items:center; gap:13px; padding:17px; border:1px solid #e2e0ff; border-radius:13px; color:var(--text); background:linear-gradient(135deg,#fff,#f8f7ff) }
.attachment-entry-grid>a:hover { border-color:#aaa5f7; box-shadow:0 8px 20px rgba(99,91,255,.10) }
.attachment-entry-grid>a>span { display:grid; place-items:center; flex:0 0 40px; width:40px; height:40px; border-radius:11px; color:#fff; background:linear-gradient(135deg,#746cff,#5650df); font-weight:800 }
.attachment-entry-grid>a>div { min-width:0; flex:1 }
.attachment-entry-grid strong,.attachment-entry-grid small { display:block }
.attachment-entry-grid small { color:var(--muted); font-size:11px }
.attachment-entry-grid b { color:#655de5 }
.append-upload { display:flex; align-items:center; gap:14px }
.append-upload>div { min-width:220px; flex:1 }
.append-upload strong,.append-upload small { display:block }
.append-upload small { color:var(--muted) }
.append-upload input[type=file] { max-width:440px; flex:1 }
.attachment-history { display:grid; gap:9px }
.attachment-history>div,.slot-file-list>div { display:flex; align-items:center; gap:10px; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:#fafbfe }
.attachment-history a,.slot-file-list a { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.attachment-history small,.slot-file-list small { color:var(--muted); white-space:nowrap }
.attachment-kind { padding:2px 7px; border-radius:6px; color:#5c55da; background:#eeedff; font-size:10px; font-weight:700 }
.slot-file-list { display:grid; gap:7px; margin:10px 0 14px }
.attachment-setting-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
.attachment-setting-row { display:grid; grid-template-columns:34px 1fr auto; align-items:end; gap:10px; padding:13px; border:1px solid var(--line); border-radius:11px }
.attachment-setting-row>b { display:grid; place-items:center; width:30px; height:38px; border-radius:8px; color:var(--primary); background:#f0efff }
.attachment-setting-row input[type=text] { width:100% }
.attachment-setting-row label { display:flex; align-items:center; gap:5px; padding-bottom:9px }
.department-filter { display:flex; align-items:center; gap:9px; padding:8px 12px; border:1px solid var(--line); border-radius:11px; background:#fff }
.department-filter label { color:var(--muted); font-size:12px }
.order-entry-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 24px; margin-bottom:30px }
.readonly-value,.readonly-money { display:flex; align-items:center; min-height:42px; padding:9px 12px; border:1px solid #e5e8ef; border-radius:10px; color:#4c566b; background:#f8f9fc }
.readonly-money { border:0; padding-left:0; color:#1d2939; background:transparent; font-size:15px; font-weight:750 }
.money-input { position:relative }
.money-input input { padding-right:42px }
.money-input span { position:absolute; right:13px; top:50%; transform:translateY(-50%); color:var(--muted) }
.status-preview { display:flex; flex-wrap:wrap; align-items:center; gap:8px 7px; min-height:42px }
.preview-radio { width:15px; height:15px; border:2px solid #cbd1dc; border-radius:50%; background:#fff }
.preview-radio.selected { border:5px solid #2684ff }
.status-preview b,.mini-option { display:inline-flex; padding:3px 7px; border-radius:5px; color:#4f5b70; background:#f1f3f6; font-size:12px }
.status-preview .preview-blue { color:#1465d8; background:#e7f1ff }
.status-preview .preview-green { color:#087a54; background:#e6f7ef }
.status-preview .preview-orange { color:#cf6500; background:#fff1df }
.status-preview .preview-red { color:#d23b33; background:#ffebe9 }
.status-preview .preview-purple { color:#6552d9; background:#efebff }
.checkbox-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px 12px }
.checkbox-options>div { display:contents }
.checkbox-options label { display:flex; align-items:center; gap:7px; min-height:34px; padding:7px 10px; border:1px solid #e0e4ec; border-radius:9px; color:#475467; background:#fff; cursor:pointer }
.checkbox-options label:hover { border-color:#958fff; background:#f8f7ff }
.field .checkbox-options input { width:16px; min-height:16px; margin:0; accent-color:var(--primary) }
.compact-order-grid { gap:13px 18px; margin-bottom:22px }
.compact-order-grid .checkbox-options { grid-template-columns:repeat(6,minmax(0,1fr)); gap:7px }
.compact-order-grid .checkbox-options label { min-height:30px; padding:5px 8px; font-size:12px }
.compact-order-grid .radio-options { gap:7px }
.compact-order-grid .radio-options label { min-width:0; padding:7px 10px }
.empty-editor-tip { padding:13px 15px; border:1px solid #f0d9a5; border-radius:10px; color:#8a5b00; background:#fff9eb }
.empty-editor-tip a { margin-left:8px; font-weight:750 }
.empty-editor-tip small { display:block; margin-top:5px; color:#8b7350 }
.file-clear-button { align-self:flex-start; min-height:30px; margin-top:4px; padding:5px 10px; border-color:#f3c6c2; color:#b42318; background:#fff5f4; font-size:11px }
.payment-preview { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:-12px 0 27px; padding:14px; border:1px solid #dddafe; border-radius:12px; background:#f8f7ff }
.payment-preview>div { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-radius:9px; background:#fff }
.payment-preview span { color:var(--muted); font-size:12px }
.payment-preview strong { color:#4f46d8; font-size:18px }
.payment-preview small { grid-column:span 2; color:#7b7896 }
.delivery-file-field { align-self:start }
.mini-option { margin:2px; color:#4f46c8; background:#eeedff; white-space:nowrap }
.status-filter { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-bottom:16px; padding:10px 13px; border:1px solid var(--line); border-radius:12px; background:#fff }
.status-filter>span { margin-right:4px; color:var(--muted); font-size:12px }
.status-filter a { padding:7px 12px; border-radius:8px; color:#596579; background:#f4f5f8; font-size:12px; font-weight:650 }
.status-filter a.active { color:#fff; background:var(--primary) }
.finance-status-filter { margin:0; box-shadow:0 8px 24px rgba(38,49,73,.05) }
.option-batch-form .section-head { margin-bottom:16px }
.option-batch-form h2 { margin:0 0 14px }
.option-table input[type=text],.option-table input[type=number] { width:100%; min-height:39px; padding:8px 10px; border:1px solid #dce1ea; border-radius:9px }
.option-table .sort-input { width:90px }
.center-check { display:flex; align-items:center; gap:6px; cursor:pointer }
.center-check input { width:16px; height:16px; accent-color:var(--primary) }
.option-save-bottom { justify-content:flex-end; margin-top:16px }
.voucher-preview { display:flex; align-items:center; gap:8px; color:var(--primary); font-size:12px }
.voucher-preview img { width:72px; height:52px; object-fit:cover; border:1px solid var(--line); border-radius:8px; background:#f4f5f8 }
.voucher-preview:hover img { border-color:var(--primary); box-shadow:0 4px 12px rgba(99,91,255,.18) }
.empty-inline { color:var(--muted); font-size:12px }
.password-form { max-width:680px }
.verify-on-create { display:flex; align-items:flex-start; gap:10px; margin:14px 0 4px; padding:14px 16px; border:1px solid #dcd9ff; border-radius:12px; background:#f7f6ff; cursor:pointer }
.verify-on-create input { width:18px; height:18px; margin-top:2px; accent-color:var(--primary) }
.verify-on-create span { display:flex; flex-direction:column; gap:3px }
.verify-on-create strong { color:#292369; font-size:14px }
.verify-on-create small { color:var(--muted); font-weight:400 }
.success-panel { max-width:680px; text-align:center; padding:45px }
.sidebar-user { min-width:0; flex:1; color:inherit }

/* Login */
.auth-main { min-height:100vh; display:grid; place-items:center; padding:30px; background:radial-gradient(circle at 15% 20%,rgba(99,91,255,.18),transparent 32%),radial-gradient(circle at 85% 80%,rgba(38,184,164,.15),transparent 30%),#f5f7fc }
.login-shell { width:min(960px,100%); min-height:560px; display:grid; grid-template-columns:1.05fr .95fr; overflow:hidden; border:1px solid rgba(255,255,255,.8); border-radius:26px; background:#fff; box-shadow:0 28px 80px rgba(30,42,72,.16) }
.login-visual { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px; color:#fff; background:linear-gradient(145deg,#172239 0%,#222c58 52%,#5048da 100%) }
.login-visual:before,.login-visual:after { content:""; position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.13) }
.login-visual:before { width:380px; height:380px; right:-190px; top:-90px }
.login-visual:after { width:260px; height:260px; left:-110px; bottom:-130px }
.login-brand { position:relative; z-index:1; display:flex; align-items:center; gap:12px; font-size:18px; font-weight:700 }
.login-brand .brand-mark { flex:0 0 40px }
.login-copy { position:relative; z-index:1 }
.login-copy span { display:inline-block; margin-bottom:14px; padding:5px 10px; border:1px solid rgba(255,255,255,.16); border-radius:20px; color:#cbd0ff; background:rgba(255,255,255,.08); font-size:11px; letter-spacing:1px }
.login-copy h2 { max-width:360px; margin:0 0 16px; font-size:34px; line-height:1.3; letter-spacing:-.8px }
.login-copy p { max-width:340px; margin:0; color:#c5cbe1; font-size:14px }
.login-note { position:relative; z-index:1; color:#9fa8c7; font-size:11px }
.login-card { display:flex; flex-direction:column; justify-content:center; padding:58px }
.login-card h1 { margin:0 0 7px; font-size:27px; letter-spacing:-.5px }
.login-card>.login-desc { margin:0 0 32px; color:var(--muted) }
.login-card .stack-form { max-width:none }
.login-card button { height:45px; margin-top:8px }

@media(max-width:1050px) {
  .sidebar { width:214px }
  .main-shell { width:calc(100% - 214px); margin-left:214px }
  .content { padding:26px 24px 44px }
  .topbar { padding:0 24px }
  .cards,.ranking-grid { gap:14px }
  .detail-grid,.two-cols { grid-template-columns:1fr }
  .order-details { grid-template-columns:120px 1fr }
  .market-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .ops-cards { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .dashboard-grid { grid-template-columns:1fr }
  .permission-checks { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .period-stat-grid { grid-template-columns:1fr }
  .period-stat-grid.four-periods { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .range-metrics { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .range-metrics>.metric-link { border-right:0 }
  .attachment-slot-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .order-filter-grid { grid-template-columns:repeat(2,minmax(145px,1fr)) }
}
@media(max-width:760px) {
  .app-layout { display:block }
  .sidebar { position:sticky; top:0; width:100%; height:auto; padding:10px 12px; flex-direction:row; align-items:center }
  .brand { flex:0 0 auto; height:42px; margin:0 12px 0 0; padding:0 }
  .brand-mark { width:34px; height:34px }
  .brand>span:last-child,.nav-label,.sidebar-foot { display:none }
  .nav-menu { display:flex; overflow-x:auto; gap:4px }
  .nav-menu a { flex:0 0 auto; margin:0; padding:9px 11px }
  .nav-icon { display:none }
  .main-shell { width:100%; margin:0 }
  .topbar { height:58px; padding:0 16px }
  .topbar-sub,.top-actions>span:not(.role-chip) { display:none }
  .content { padding:20px 14px 38px }
  .page-head { align-items:flex-start }
  .page-head h1 { font-size:22px }
  .cards,.cards.compact,.ranking-grid,.market-grid,.ops-cards { grid-template-columns:1fr }
  .period-stat-grid.four-periods,.range-metrics { grid-template-columns:1fr }
  .performance-filter-form { align-items:stretch }
  .form-grid { grid-template-columns:1fr }
  .order-filter-grid { grid-template-columns:1fr }
  .order-filter-grid .filter-wide { grid-column:span 1 }
  .order-entry-grid { grid-template-columns:1fr }
  .checkbox-options { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .compact-order-grid .checkbox-options { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .payment-preview { grid-template-columns:1fr }
  .payment-preview small { grid-column:span 1 }
  .attachment-slot-grid,.attachment-setting-grid { grid-template-columns:1fr }
  .attachment-entry-grid { grid-template-columns:1fr }
  .inline-attachment-grid,.financial-cards,.refund-inline-record { grid-template-columns:1fr }
  .compact-upload { align-items:stretch; flex-direction:column }
  .compact-upload select { max-width:none; width:100% }
  .append-upload { align-items:stretch; flex-direction:column }
  .span-2 { grid-column:span 1 }
  .details { grid-template-columns:104px 1fr }
  .comment-form { display:block }
  .batch-editor-field { width:100%; align-items:stretch; flex-direction:column }
  .editor-picker { min-width:0; width:100% }
  .comment-form button { width:100%; margin-top:8px }
  .login-shell { grid-template-columns:1fr; min-height:0 }
  .login-visual { display:none }
  .login-card { padding:38px 28px }
  .auth-main { padding:18px }
  .permission-checks { grid-template-columns:1fr }
  .distribution-guide { align-items:flex-start; flex-direction:column; gap:8px }
  .due-count-grid { grid-template-columns:1fr }
}
.metric-link{color:inherit;text-decoration:none;border-radius:10px;transition:background .15s ease,transform .15s ease}.metric-link:hover{background:#f3f1ff;transform:translateY(-1px)}
.metric-static{cursor:default}.metric-static:hover,.period-stat-card dl>.metric-static:hover,.range-metrics>.metric-static:hover{background:transparent;transform:none}
.record-total-grid{display:grid;grid-template-columns:repeat(3,minmax(170px,1fr));gap:10px}.summary-amount{display:flex;min-width:190px;flex-direction:column;gap:5px;padding:14px 20px;border:1px solid #ddd9ff;border-radius:14px;background:linear-gradient(135deg,#faf9ff,#f1efff);color:inherit;text-decoration:none}.summary-amount small{color:#6f7890}.summary-amount strong{color:#251c74;font-size:22px}.refund-summary{border-color:#ffd9d9;background:#fff8f8}.refund-summary strong{color:#d74747}.net-summary{border-color:#ccecdf;background:#f4fcf8}.net-summary strong{color:#09865b}
.employee-create-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:22px;align-items:start}.employee-create-card{max-width:none}.employee-create-card>.field{margin-bottom:18px}.employee-scope-tip{display:flex;align-items:center;gap:12px;padding:14px 16px;margin-bottom:22px;border:1px solid #ddd9ff;border-radius:12px;background:#f7f5ff}.employee-scope-tip span{color:#6758e8;font-size:12px}.employee-scope-tip strong{font-size:14px}.employee-password-grid{margin-top:4px}.employee-recent-card h2{margin:0 0 6px;line-height:1.4}.employee-recent-card .section-note{margin:0;line-height:1.6}.employee-mini-list{margin-top:20px;display:grid;gap:8px}.employee-mini-list>div{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;background:#f8f9fc}.employee-mini-list .avatar{position:static;width:34px;height:34px;display:grid;place-items:center}.employee-mini-list p{display:flex;flex:1;flex-direction:column;margin:0}.employee-mini-list p small{color:#7b8498}.employee-mini-list em{font-style:normal}.row-sequence{display:inline-grid;place-items:center;min-width:28px;height:28px;border-radius:8px;background:#f0edff;color:#5b4ce2;font-weight:700}
@media(max-width:960px){.employee-create-layout{grid-template-columns:1fr}.record-total-grid{width:100%;grid-template-columns:1fr}.summary-amount{min-width:0;width:100%}}