:root {
    --ink: #17233b; --muted: #718096; --line: #e7ebf2; --paper: #ffffff;
    --canvas: #f4f7fb; --navy: #10244b; --navy-2: #183565; --blue: #3167e3;
    --cyan: #35b9c6; --success: #16886d; --warning: #b56b09; --danger: #c83e4d;
    --shadow: 0 12px 35px rgba(27, 48, 88, .09); --radius: 16px;
}
* { box-sizing: border-box; }
html { font-family: Inter, "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif; color: var(--ink); background: var(--canvas); }
body { margin: 0; min-height: 100vh; }
a { color: var(--blue); text-decoration: none; }
button, input, select, textarea { font: inherit; }
.auth-body { background: radial-gradient(circle at top left, #d9efff 0, transparent 38%), linear-gradient(135deg, #f6f9ff, #eef3f8); }
.auth-main { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-card { width: min(430px, 100%); background: rgba(255,255,255,.94); padding: 36px; border-radius: 24px; box-shadow: var(--shadow); border: 1px solid rgba(255,255,255,.7); }
.auth-card .brand { color: var(--ink); margin-bottom: 32px; }
.auth-card h1 { margin: 0 0 8px; font-size: 30px; }
.auth-card > p { color: var(--muted); margin: 0 0 26px; }
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 252px; padding: 22px 16px; display: flex; flex-direction: column; color: #e9f1ff; background: linear-gradient(180deg, var(--navy), #0c1c3a); z-index: 20; box-shadow: 8px 0 30px rgba(6, 22, 50, .12); }
.brand { display: flex; align-items: center; gap: 12px; color: white; padding: 0 10px; }
.brand-mark { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(145deg, var(--cyan), #5d83ee); color: white; font-weight: 900; font-size: 21px; box-shadow: 0 8px 20px rgba(53,185,198,.3); }
.brand strong, .brand small { display: block; }.brand small { opacity: .65; font-size: 11px; margin-top: 2px; letter-spacing: .08em; }
.nav-list { display: grid; gap: 4px; margin-top: 28px; overflow-y: auto; padding-right: 2px; }
.nav-link { display: flex; align-items: center; gap: 11px; min-height: 43px; padding: 9px 11px; border-radius: 11px; color: #c4d1e9; font-size: 14px; transition: .18s ease; }
.nav-link:hover { color: white; background: rgba(255,255,255,.07); }.nav-link.active { color: white; background: linear-gradient(90deg, rgba(53,185,198,.25), rgba(82,119,229,.18)); box-shadow: inset 3px 0 0 var(--cyan); }
.nav-icon { width: 23px; height: 23px; display: grid; place-items: center; font-size: 10px; border-radius: 7px; background: rgba(255,255,255,.1); font-weight: 800; }
.nav-count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--danger); color: white; display: grid; place-items: center; font-size: 11px; }
.sidebar-user { display: flex; gap: 10px; align-items: center; margin-top: auto; padding: 14px 10px 0; border-top: 1px solid rgba(255,255,255,.1); }.sidebar-user strong,.sidebar-user small { display: block; }.sidebar-user strong { font-size: 13px; }.sidebar-user small { color: #92a4c2; font-size: 11px; margin-top: 3px; }
.avatar { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #274676; color: white; font-weight: 800; }
.main-panel { min-height: 100vh; margin-left: 252px; display: flex; flex-direction: column; }
.topbar { min-height: 91px; padding: 18px 32px; display: flex; align-items: center; gap: 18px; background: rgba(255,255,255,.86); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 10; }
.topbar h1 { margin: 1px 0 0; font-size: 23px; letter-spacing: -.02em; }.eyebrow { margin: 0; color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.topbar-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }.topbar-actions form { margin: 0; }.icon-button { color: var(--ink); font-size: 13px; padding: 8px 10px; }
.menu-toggle { display: none; background: transparent; border: 0; font-size: 24px; }
.content { width: 100%; max-width: 1500px; margin: 0 auto; padding: 30px 32px 40px; flex: 1; }
.footer { display: flex; justify-content: space-between; padding: 18px 32px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); background: #fff; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }.page-actions h2 { margin: 0; font-size: 18px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 7px; min-height: 42px; padding: 9px 16px; border: 0; border-radius: 10px; color: white; background: var(--blue); cursor: pointer; font-weight: 750; font-size: 13px; box-shadow: 0 7px 16px rgba(49,103,227,.17); }.button:hover { filter: brightness(.96); }.button.secondary { background: var(--navy-2); }.button.success { background: var(--success); }.button.warning { background: var(--warning); }.button.danger { background: var(--danger); }.button.ghost { color: var(--ink); background: white; box-shadow: none; border: 1px solid var(--line); }.button.small { min-height: 34px; padding: 6px 11px; font-size: 12px; }.button.block { width: 100%; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 5px 18px rgba(23,35,59,.035); }.card-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 19px 21px; border-bottom: 1px solid var(--line); }.card-header h2,.card-header h3 { margin: 0; font-size: 16px; }.card-body { padding: 21px; }
.grid { display: grid; gap: 20px; }.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.stat-card { padding: 21px; overflow: hidden; position: relative; }.stat-card::after { content:""; width: 80px; height: 80px; position: absolute; right: -20px; top: -25px; border-radius: 50%; background: linear-gradient(135deg, rgba(53,185,198,.16), rgba(49,103,227,.08)); }.stat-card p { margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; }.stat-card strong { display:block; margin-top: 10px; font-size: 28px; letter-spacing: -.04em; }
.table-wrap { overflow-x: auto; }.table { width: 100%; border-collapse: collapse; font-size: 13px; }.table th { padding: 12px 14px; text-align: left; color: var(--muted); font-size: 11px; letter-spacing: .04em; background: #f8fafe; border-bottom: 1px solid var(--line); }.table td { padding: 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }.table tr:last-child td { border-bottom: 0; }.table tr:hover td { background: #fbfcff; }
.badge { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 99px; font-size: 11px; font-weight: 800; background: #eef1f5; color: #59677d; }.badge.success { background: #e4f6f0; color: var(--success); }.badge.danger { background: #fdebee; color: var(--danger); }.badge.warning { background: #fff3dd; color: var(--warning); }.badge.info { background: #e8f1ff; color: #2760c8; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px; }.field { display: grid; gap: 7px; }.field.full { grid-column: 1/-1; }.field label { font-size: 12px; font-weight: 800; color: #47566d; }.field small { color: var(--muted); }.input, .select, .textarea { width: 100%; min-height: 43px; padding: 10px 12px; border: 1px solid #d9e0ea; border-radius: 10px; background: #fff; color: var(--ink); outline: 0; transition: .15s; }.textarea { min-height: 100px; resize: vertical; }.input:focus,.select:focus,.textarea:focus { border-color: #7399ee; box-shadow: 0 0 0 3px rgba(49,103,227,.1); }.form-footer { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.alert { padding: 13px 16px; margin-bottom: 18px; border-radius: 11px; font-size: 13px; border: 1px solid transparent; }.alert.success { background:#e7f6f1; color:#126d59; border-color:#c9eadf; }.alert.danger { background:#fff0f2; color:#a93240; border-color:#f5d3d8; }.alert.warning { background:#fff7e8; color:#8c570f; border-color:#f4e1be; }.alert.info { background:#edf4ff; color:#2458aa; border-color:#d4e3fa; }
.empty { padding: 42px 22px; text-align:center; color:var(--muted); }.empty strong { display:block; color:var(--ink); margin-bottom:6px; }
.meta-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 22px; }.meta-list div { padding-bottom:10px; border-bottom:1px dashed var(--line); }.meta-list dt { color:var(--muted); font-size:11px; font-weight:700; }.meta-list dd { margin:5px 0 0; font-size:14px; }
.inline-form { display:flex; gap:10px; flex-wrap:wrap; align-items:end; }.inline-form .field { min-width:150px; flex:1; }
.product-gallery { display:flex; flex-wrap:wrap; gap:10px; }.product-gallery img { width:100px; height:100px; object-fit:cover; border-radius:12px; border:1px solid var(--line); }
.check-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.check-item { display:flex; gap:10px; align-items:flex-start; padding:12px; border:1px solid var(--line); border-radius:11px; }
.chart-box { position:relative; min-height:280px; }.chart-box canvas { width:100%; height:280px; }
.muted { color:var(--muted); }.text-right { text-align:right; }.mt-20 { margin-top:20px; }.mb-20 { margin-bottom:20px; }.nowrap { white-space:nowrap; }
@media (max-width: 1100px) { .grid-4 { grid-template-columns:repeat(2,1fr); }.grid-3 { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 760px) { .sidebar { transform:translateX(-105%); transition:.22s; }.sidebar.open { transform:translateX(0); }.main-panel { margin-left:0; }.menu-toggle { display:block; }.topbar { padding:15px 18px; }.content { padding:22px 16px; }.grid-2,.grid-3,.grid-4,.form-grid,.check-grid { grid-template-columns:1fr; }.field.full { grid-column:auto; }.topbar-actions .icon-button { display:none; }.footer { padding:16px; }.meta-list { grid-template-columns:1fr; } }