:root { color-scheme: light; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --ink:#17231d; --muted:#6d7d74; --line:#e4ebe7; --paper:#fff; --canvas:#f4f7f5; --nav:#12251e; --green:#15915a; --green-dark:#0d7145; --green-soft:#e8f7ee; --warning:#a96912; --warning-soft:#fff6df; --danger:#b64747; --danger-soft:#fff0ef; }
* { box-sizing:border-box; }
body { margin:0; background:var(--canvas); color:var(--ink); line-height:1.55; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
:focus-visible { outline:3px solid #8bd9ad; outline-offset:2px; }
.admin-shell { min-height:100vh; display:flex; }
.sidebar { width:240px; flex:0 0 240px; display:flex; flex-direction:column; padding:28px 18px 20px; background:var(--nav); color:#dcece3; }
.brand { display:flex; align-items:center; gap:10px; color:#fff; font-weight:750; letter-spacing:.01em; }
.brand-dark { color:var(--ink); }
.brand-mark { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; background:#43c47f; color:#0d3524; font-weight:850; }
.sidebar-caption,.eyebrow { margin:9px 0; color:#8eb6a2; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.side-nav { display:grid; gap:7px; margin-top:28px; }
.side-nav a { padding:11px 13px; border-radius:10px; color:#b7d1c4; font-size:14px; }
.side-nav a:hover,.side-nav a.active { background:#244638; color:#fff; }
.sidebar-foot { margin-top:auto; padding:12px; color:#8eb6a2; font-size:12px; border-top:1px solid #274337; }
.status-dot { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#54dc8b; }
.main-area { min-width:0; flex:1; }
.topbar { min-height:74px; display:flex; align-items:center; justify-content:space-between; padding:0 42px; background:var(--paper); border-bottom:1px solid var(--line); }
.topbar strong { font-size:14px; }
.page-wrap { max-width:1280px; margin:0 auto; padding:36px 42px 60px; }
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:26px; }
.page-head h1 { margin:0; font-size:28px; letter-spacing:-.03em; }
.page-head p,.muted { margin:6px 0 0; color:var(--muted); font-size:14px; }
.card { padding:24px; background:var(--paper); border:1px solid var(--line); border-radius:16px; box-shadow:0 8px 24px rgba(25,57,42,.04); }
.card + .card { margin-top:18px; }
.card-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.card-title h2 { margin:0; font-size:16px; }
.stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:18px; }
.stat-card { padding:20px; background:var(--paper); border:1px solid var(--line); border-radius:14px; }
.stat-label { color:var(--muted); font-size:13px; }
.stat-value { margin-top:8px; font-size:27px; font-weight:750; letter-spacing:-.03em; }
.stat-note { margin-top:4px; color:var(--muted); font-size:12px; }
.stack-form { display:grid; gap:16px; }
.inline-form { display:flex; align-items:end; gap:10px; flex-wrap:wrap; margin-bottom:20px; }.inline-form input { width:min(280px,100%); }
label { display:grid; gap:7px; color:#3b4b43; font-size:13px; font-weight:600; }
input,select { width:100%; padding:11px 12px; border:1px solid #d5e0da; border-radius:9px; background:#fff; color:var(--ink); }
input:focus,select:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(21,145,90,.12); outline:0; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:0 15px; border:1px solid transparent; border-radius:9px; cursor:pointer; font-weight:700; font-size:13px; }
.button-primary { background:var(--green); color:#fff; }
.button-primary:hover { background:var(--green-dark); }
.button-ghost { background:#fff; color:#3d5649; border-color:var(--line); }
.button-danger { background:var(--danger-soft); color:var(--danger); border-color:#f3caca; }
.button-wide { width:100%; }
.notice { padding:12px 14px; border-radius:10px; font-size:13px; }
.notice-warning { background:var(--warning-soft); color:var(--warning); }
.notice-danger { background:var(--danger-soft); color:var(--danger); }
.notice-success { background:var(--green-soft); color:var(--green-dark); }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:12px; }
table { width:100%; border-collapse:collapse; min-width:680px; background:#fff; }
th,td { padding:14px 16px; text-align:left; border-bottom:1px solid var(--line); font-size:13px; white-space:nowrap; }
th { color:var(--muted); background:#fbfcfb; font-size:12px; font-weight:650; }
tr:last-child td { border-bottom:0; }
.badge { display:inline-flex; padding:4px 9px; border-radius:99px; font-size:12px; font-weight:700; }
.badge.success { background:var(--green-soft); color:var(--green-dark); }.badge.warning { background:var(--warning-soft); color:var(--warning); }.badge.danger { background:var(--danger-soft); color:var(--danger); }.badge.neutral { background:#eef2f0; color:#607068; }
.filter-bar { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; align-items:end; margin-bottom:18px; }
.empty-state { padding:40px 20px; text-align:center; color:var(--muted); }
.login-body { min-height:100vh; display:grid; place-items:center; padding:24px; background:linear-gradient(145deg,#edf8f1,#f7faf8); }
.login-card { width:min(100%,420px); padding:34px; background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:0 22px 60px rgba(22,69,46,.12); }
.login-card h1 { margin:28px 0 4px; font-size:28px; }.login-card .notice { margin:18px 0; }.login-foot { margin:24px 0 0; color:var(--muted); text-align:center; font-size:12px; }
.pay-body { min-height:100vh; display:grid; place-items:center; padding:24px; background:linear-gradient(145deg,#eaf7ef,#f8fbf9); }
.pay-card { width:min(100%,520px); padding:28px; background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:0 24px 70px rgba(22,69,46,.13); }
.pay-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:20px; border-bottom:1px solid var(--line); }.secure-label { color:var(--green-dark); font-size:12px; font-weight:700; }
.user-body { min-height:100vh; padding:28px 16px; background:linear-gradient(145deg,#eaf7ef,#f8fbf9); }
.user-shell { width:min(100%,760px); margin:0 auto; display:grid; gap:18px; }
.user-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 22px; background:#fff; border:1px solid var(--line); border-radius:18px; }
.user-head .muted { margin-left:44px; }
.user-balance { display:grid; gap:4px; padding:26px; border-radius:20px; background:linear-gradient(135deg,#123d2c,#168554); color:#fff; box-shadow:0 18px 45px rgba(20,93,59,.18); }
.user-balance span,.user-balance small { color:#cbe7d8; }.user-balance strong { font-size:40px; letter-spacing:-.04em; }
.pay-summary { padding:25px 0 20px; text-align:center; }.pay-summary h1 { margin:5px 0; font-size:20px; }.order-number,.expiry-hint { margin:5px 0; color:var(--muted); font-size:12px; }.pay-amount { margin:17px 0 4px; color:var(--green-dark); font-size:44px; font-weight:800; letter-spacing:-.05em; }.pay-amount span { margin-right:3px; font-size:22px; }
.step-row { display:flex; align-items:center; justify-content:center; gap:8px; margin:8px 0 22px; color:var(--muted); font-size:12px; }.step { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#eaf0ec; color:#708077; font-weight:700; }.step.current,.step.done { background:var(--green); color:#fff; }.step-line { width:32px; height:1px; background:#d7e2db; }.pay-form { display:grid; gap:16px; }.bound-user { padding:12px 14px; background:var(--green-soft); border-radius:10px; color:var(--green-dark); font-size:13px; }.bound-user strong { display:block; margin-top:3px; }.pay-button { min-height:48px; font-size:15px; }.pay-safe { margin:20px 0 0; color:var(--muted); text-align:center; font-size:12px; }.result-card { text-align:center; }.result-icon { width:66px; height:66px; display:grid; place-items:center; margin:4px auto 18px; border-radius:50%; font-size:35px; font-weight:800; }.result-icon.success { background:var(--green-soft); color:var(--green-dark); }.result-icon.danger { background:var(--danger-soft); color:var(--danger); }.result-card h1 { margin:0; }.result-amount { margin:20px 0; font-size:32px; font-weight:800; color:var(--green-dark); }.result-meta { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:18px 0; padding:15px; background:#f8faf9; border-radius:12px; }.result-meta div { display:grid; gap:3px; }.result-meta span { color:var(--muted); font-size:12px; }.result-meta strong { font-size:14px; }
@media (max-width:900px) { .sidebar { width:210px; flex-basis:210px; }.topbar,.page-wrap { padding-left:24px; padding-right:24px; }.stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:720px) { .admin-shell { display:block; }.sidebar { width:auto; min-height:0; padding:16px; }.sidebar-caption,.sidebar-foot { display:none; }.side-nav { display:flex; overflow:auto; margin-top:16px; }.side-nav a { white-space:nowrap; }.topbar { padding:14px 16px; }.page-wrap { padding:24px 16px 40px; }.page-head { display:block; }.page-head .button { margin-top:16px; }.stats-grid,.filter-bar { grid-template-columns:1fr; }.card { padding:18px; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; transition:none !important; } }