:root { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; color: #1a241f; background: #edf2ef; font-synthesis: none; --green:#087847; --green-bright:#08a95f; --line:#dde6e1; --muted:#6c7a72; --surface:#fff; --orange:#f2a62f; }
* { box-sizing: border-box; letter-spacing: 0; }
body { min-width: 1024px; min-height: 100vh; margin: 0; background: #edf2ef; }
button,input,select { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.login-screen { min-height: 100vh; display: grid; place-items: center; background: #edf2ef; }
.login-panel { width: 380px; padding: 36px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 18px 54px rgba(23,48,34,.12); }
.admin-logo { position: relative; width: 62px; height: 62px; margin: 0 auto; display: grid; place-items: center; border-radius: 8px; color: #fff; background: var(--green); font-size: 14px; font-weight: 800; }
.admin-logo i { position: absolute; right: -6px; bottom: -6px; width: 24px; height: 24px; display: grid; place-items: center; border: 3px solid #fff; border-radius: 50%; color: #fff; background: var(--green-bright); font-style: normal; font-size: 15px; }
.login-panel h1 { margin: 24px 0 6px; text-align: center; font-size: 22px; }.login-panel > p { margin: 0 0 26px; color: var(--muted); text-align: center; font-size: 13px; }
.login-panel label { margin-top: 15px; display: grid; gap: 7px; color: #425047; font-size: 13px; font-weight: 600; }.login-panel input { height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; outline: 0; }.login-panel input:focus { border-color: var(--green-bright); box-shadow: 0 0 0 3px rgba(8,169,95,.12); }
.login-panel button { width: 100%; height: 44px; margin-top: 24px; border: 0; border-radius: 6px; color: #fff; background: var(--green); font-weight: 700; }.login-error { min-height: 18px; margin-top: 10px; display: block; color: #c83b45; text-align: center; font-size: 12px; }
.admin-shell { min-height: 100vh; display: grid; grid-template-columns: 228px minmax(0,1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 22px 16px; display: flex; flex-direction: column; color: #fff; background: #17231d; }
.brand { padding: 0 8px 24px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.1); }.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: var(--green-bright); font-size: 12px; font-weight: 800; }.brand > div:last-child { display: grid; gap: 3px; }.brand strong { font-size: 15px; }.brand span { color: #9caf9f; font-size: 11px; }
nav { margin-top: 20px; display: grid; gap: 5px; }nav button { height: 42px; padding: 0 12px; border: 0; border-radius: 6px; display: flex; align-items: center; gap: 11px; color: #aebcb4; background: transparent; text-align: left; font-size: 13px; }nav button:hover { color: #fff; background: rgba(255,255,255,.06); }nav button.active { color: #fff; background: var(--green); font-weight: 650; }.nav-icon { width: 20px; text-align: center; font-size: 16px; }
.sidebar-foot { margin-top: auto; padding: 16px 8px 0; display: grid; gap: 10px; border-top: 1px solid rgba(255,255,255,.1); }.sidebar-foot span { color: #9caf9f; font-size: 11px; }.sidebar-foot button { width: fit-content; padding: 0; border: 0; color: #c9d4ce; background: transparent; font-size: 12px; }
.workspace { min-width: 0; }.topbar { height: 82px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: #fff; }.topbar h1 { margin: 0; font-size: 20px; }.topbar p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }.topbar-actions { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 11px; }.icon-button { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 6px; color: var(--green); background: #fff; font-size: 18px; }
.content-view { padding: 24px 28px 40px; }.metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }.metric-grid article { min-height: 126px; padding: 19px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }.metric-grid span { color: var(--muted); font-size: 12px; }.metric-grid strong { margin: 12px 0 7px; display: block; font-size: 29px; }.metric-grid small { color: #829088; font-size: 11px; }
.data-section,.settings-form section { margin-top: 20px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }.data-section.full { margin-top: 0; }.section-head { min-height: 70px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }.section-head h2 { margin: 0; font-size: 15px; }.section-head p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }.text-button { border: 0; color: var(--green); background: transparent; font-size: 12px; font-weight: 650; }
.table-wrap { overflow: auto; }table { width: 100%; border-collapse: collapse; font-size: 12px; }th,td { height: 52px; padding: 0 16px; border-bottom: 1px solid #edf1ef; text-align: left; white-space: nowrap; }th { color: #6d7b74; background: #fafcfb; font-size: 11px; font-weight: 600; }tbody tr:hover { background: #fafcfb; }tbody tr:last-child td { border-bottom: 0; }.empty-cell { height: 180px; color: var(--muted); text-align: center; }.status { padding: 4px 8px; border-radius: 4px; font-size: 10px; font-weight: 650; }.status-queued { color: #8c5a06; background: #fff3d9; }.status-processing { color: #2858ba; background: #eaf0ff; }.status-completed { color: #087847; background: #e6f7ef; }.status-failed { color: #b8323d; background: #ffecee; }.status-cancelled { color: #65726b; background: #edf2ef; }.premium-tag { color: #73520a; font-weight: 650; }.retry-button { padding: 5px 8px; border: 1px solid var(--line); border-radius: 4px; color: var(--green); background: #fff; font-size: 11px; }
select,.search-input,.settings-form input { height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; color: #28332d; background: #fff; outline: 0; font-size: 12px; }.search-input { width: 220px; }
.settings-form { display: grid; gap: 18px; }.settings-form section { margin-top: 0; }.form-grid { padding: 20px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }.form-grid label { display: grid; gap: 8px; color: #4c5a52; font-size: 12px; font-weight: 600; }.toggle-label { grid-template-columns: 1fr auto; align-items: center; }.toggle-label input { position: absolute; opacity: 0; pointer-events: none; }.toggle-label i { position: relative; width: 40px; height: 22px; border-radius: 11px; background: #cdd8d2; }.toggle-label i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .16s ease; }.toggle-label input:checked + i { background: var(--green-bright); }.toggle-label input:checked + i::after { transform: translateX(18px); }.settings-actions { display: flex; justify-content: flex-end; }.settings-actions button { height: 40px; padding: 0 22px; border: 0; border-radius: 5px; color: #fff; background: var(--green); font-weight: 650; }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 20; padding: 10px 15px; transform: translateX(-50%); border-radius: 5px; color: #fff; background: rgba(23,35,29,.92); box-shadow: 0 10px 30px rgba(0,0,0,.16); font-size: 12px; }
@media (max-width: 1180px) { .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }