:root {
  --ink: #171715;
  --paper: #f4f3ef;
  --white: #fff;
  --muted: #77756f;
  --line: #dfddd7;
  --lime: #d9ff5c;
  --orange: #ff6840;
  --purple: #bcb2ff;
  --blue: #92d2ff;
  --green: #20875b;
  --red: #d64b3f;
  --sidebar: 238px;
  --shadow: 0 24px 70px rgba(25, 24, 20, .14);
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { color: inherit; font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.logo-mark { width: 23px; height: 23px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; transform: rotate(45deg); }
.logo-mark i { display: block; background: currentColor; }.logo-mark i:nth-child(2), .logo-mark i:nth-child(3) { background: var(--orange); }
.kicker { color: var(--orange); font-size: 9px; font-weight: 800; letter-spacing: .17em; }

.login-screen { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; background: #f8f7f3; }
.login-art { position: relative; overflow: hidden; background: var(--lime); }
.login-art::after { content: ""; width: 36vw; height: 36vw; position: absolute; right: -8vw; bottom: -12vw; border-radius: 50%; background: var(--orange); }
.login-brand { position: absolute; z-index: 5; top: 42px; left: 5vw; display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 900; letter-spacing: .14em; }
.login-orbit { position: absolute; inset: 15%; border: 1px solid rgba(23,23,21,.3); border-radius: 50%; transform: rotate(28deg); }.login-orbit.two { inset: 22% 8%; transform: rotate(-18deg); }
.login-poster { width: 260px; height: 360px; padding: 25px; position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--ink); box-shadow: 18px 30px 50px rgba(30,30,15,.2); }
.poster-one { z-index: 2; background: #f8f4e9; transform: translate(-72%,-51%) rotate(-8deg); }.poster-one small, .poster-one span { font-size: 8px; font-weight: 800; letter-spacing: .12em; }.poster-one strong { font-family: Georgia, serif; font-size: 47px; font-weight: 400; line-height: .86; }
.poster-two { background: var(--purple); transform: translate(-10%,-41%) rotate(9deg); }.poster-two strong { font-family: Arial Black, sans-serif; font-size: 40px; line-height: .85; letter-spacing: -.08em; }.poster-two i { width: 125px; height: 125px; align-self: center; border-radius: 50%; background: var(--ink); box-shadow: 32px 12px 0 var(--orange); }
.login-art > p { position: absolute; z-index: 5; left: 5vw; bottom: 42px; font-family: Georgia, "Songti SC", serif; font-size: 18px; }
.login-panel { padding: 7vw; display: grid; place-items: center; }
.login-card { width: min(410px, 100%); }.mobile-login-logo { display: none; }.login-card h1 { margin: 14px 0 8px; font-family: Georgia, "Songti SC", serif; font-size: 50px; font-weight: 400; letter-spacing: -.04em; }.login-card > p { margin: 0 0 36px; color: var(--muted); font-size: 13px; }.login-card label, .admin-dialog label { margin-top: 17px; display: grid; gap: 9px; font-size: 11px; font-weight: 700; }.login-card input, .admin-dialog input, .admin-dialog select, .admin-dialog textarea { width: 100%; padding: 13px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; outline: none; transition: border .2s; }.login-card input:focus, .admin-dialog input:focus, .admin-dialog select:focus, .admin-dialog textarea:focus { border-color: var(--ink); }.login-card > small { margin-top: 18px; display: block; color: #aaa7a0; text-align: center; font-size: 10px; }
.login-error, .form-error { min-height: 19px; margin-top: 12px; color: var(--red); font-size: 11px; }
.primary-button { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 22px; border: 1px solid var(--ink); border-radius: 3px; background: var(--ink); color: white; font-weight: 720; font-size: 12px; transition: transform .2s, box-shadow .2s; }.primary-button:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(23,23,21,.18); }.primary-button b { color: var(--lime); font-size: 17px; }.primary-button:disabled { opacity: .55; cursor: wait; transform: none; }
.login-button { width: 100%; min-height: 52px; margin-top: 7px; justify-content: space-between; padding: 0 20px; }

.admin-shell { min-height: 100vh; }
.sidebar { width: var(--sidebar); height: 100vh; padding: 29px 18px 22px; position: fixed; z-index: 30; left: 0; top: 0; display: flex; flex-direction: column; background: var(--ink); color: white; }
.sidebar-brand { height: 48px; padding: 0 10px; display: flex; align-items: center; gap: 12px; font-weight: 900; letter-spacing: .11em; }.sidebar-brand small { margin-left: 4px; color: #88877f; font-size: 7px; letter-spacing: .15em; }
.admin-nav { margin-top: 42px; display: grid; gap: 5px; }
.nav-item { width: 100%; min-height: 45px; padding: 0 12px; position: relative; display: grid; grid-template-columns: 21px 1fr auto; align-items: center; gap: 12px; border: 0; border-radius: 4px; background: transparent; color: #97968f; text-align: left; font-size: 12px; transition: .2s; }.nav-item:hover { background: #242421; color: white; }.nav-item.is-active { background: var(--lime); color: var(--ink); font-weight: 750; }.nav-item svg { width: 18px; }.nav-item b { min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center; border-radius: 30px; background: #30302d; color: #c5c4bd; font-size: 8px; }.nav-item.is-active b { background: var(--ink); color: white; }.nav-item i { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.sidebar-bottom { margin-top: auto; display: grid; gap: 4px; }.sidebar-bottom > a, .sidebar-bottom > button { min-height: 39px; padding: 0 12px; display: flex; align-items: center; gap: 11px; border: 0; background: transparent; color: #898880; font-size: 11px; text-align: left; }.sidebar-bottom > a:hover, .sidebar-bottom > button:hover { color: white; }.sidebar-bottom svg { width: 17px; }
.merchant-profile { margin-top: 15px; padding: 18px 6px 0; display: flex; align-items: center; gap: 11px; border-top: 1px solid #30302d; }.merchant-profile > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--purple); color: var(--ink); font-size: 10px; font-weight: 850; }.merchant-profile > div { min-width: 0; display: grid; gap: 4px; }.merchant-profile strong { font-size: 10px; }.merchant-profile small { max-width: 140px; overflow: hidden; color: #7b7972; font-size: 8px; text-overflow: ellipsis; }

.admin-main { min-height: 100vh; margin-left: var(--sidebar); }
.topbar { min-height: 82px; padding: 0 3vw; position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 25px; border-bottom: 1px solid var(--line); background: rgba(244,243,239,.9); backdrop-filter: blur(16px); }.topbar > div:first-of-type { display: grid; gap: 7px; }.topbar span#breadcrumb { color: #8c8a84; font-size: 9px; letter-spacing: .04em; }.topbar strong#pageTitle { font-family: Georgia, "Songti SC", serif; font-size: 17px; font-weight: 400; }.topbar-actions { display: flex; align-items: center; gap: 10px; }.icon-control, .menu-button { width: 42px; height: 42px; position: relative; display: grid; place-items: center; border: 1px solid var(--line); background: white; }.icon-control i { width: 6px; height: 6px; position: absolute; right: 9px; top: 8px; border: 1px solid white; border-radius: 50%; background: var(--orange); }.menu-button { display: none; }
.content { padding: 30px 3vw 60px; }
.date-row { margin-bottom: 18px; display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; }.date-row button, .panel-head > button { padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 10px; }
.stats-grid { display: grid; grid-template-columns: 1.35fr repeat(3, 1fr); gap: 13px; }
.stat-card { min-height: 160px; padding: 20px; position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; border: 1px solid var(--line); background: white; }.stat-card > span { margin-bottom: 8px; color: var(--muted); font-size: 10px; }.stat-card > strong { font-family: Georgia, serif; font-size: 33px; font-weight: 400; }.stat-card > small { margin-top: 7px; color: #9b9993; font-size: 8px; }.stat-card > small b { color: var(--green); }
.stat-dark { color: white; background: var(--ink); border-color: var(--ink); }.stat-dark > strong { margin-top: auto; font-size: 40px; }.stat-dark > small { color: #82817a; }.stat-top { display: flex; align-items: center; justify-content: space-between; color: #c9c8c1; font-size: 9px; }.stat-top i { padding: 5px 7px; border-radius: 20px; background: rgba(217,255,92,.12); color: var(--lime); font-style: normal; }.mini-bars { height: 40px; position: absolute; right: 15px; bottom: 16px; display: flex; align-items: end; gap: 3px; opacity: .65; }.mini-bars i { width: 4px; background: var(--lime); border-radius: 3px 3px 0 0; }
.stat-icon { width: 34px; height: 34px; position: absolute; right: 17px; top: 17px; display: grid; place-items: center; border-radius: 50%; }.stat-icon svg { width: 16px; }.stat-icon.orange { background: #ffe0d6; color: #bb3e1d; }.stat-icon.purple { background: #e9e5ff; color: #594f96; }.stat-icon.lime { background: #efffc5; color: #4b6310; }

.dashboard-grid { margin-top: 13px; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(270px, .7fr); gap: 13px; }
.panel { border: 1px solid var(--line); background: white; }.sales-panel, .stock-panel { min-height: 372px; padding: 22px; }.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }.panel-head small { color: var(--orange); font-size: 7px; font-weight: 850; letter-spacing: .16em; }.panel-head h2 { margin: 5px 0 0; font-family: Georgia, "Songti SC", serif; font-size: 22px; font-weight: 400; }.period-tabs { display: flex; gap: 3px; }.period-tabs button { padding: 7px 10px; border: 1px solid transparent; background: transparent; color: var(--muted); font-size: 8px; }.period-tabs button.is-active { border-color: var(--line); color: var(--ink); background: var(--paper); }
.chart-summary { margin-top: 18px; display: flex; align-items: baseline; gap: 10px; }.chart-summary strong { font-family: Georgia, serif; font-size: 28px; }.chart-summary span { color: var(--muted); font-size: 8px; }.sales-chart { height: 225px; margin-top: 10px; position: relative; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to bottom, transparent 0 54px, #eeece7 54px 55px); }.sales-chart svg { width: 100%; height: 100%; overflow: visible; }.sales-chart .chart-line { fill: none; stroke: var(--orange); stroke-width: 2; vector-effect: non-scaling-stroke; }.sales-chart .chart-area { fill: url(#chartGradient); stroke: none; }.sales-chart circle { fill: white; stroke: var(--orange); stroke-width: 2; }.sales-chart text { fill: #9b9993; font-size: 7px; }
.stock-list { margin-top: 18px; }.stock-item { padding: 13px 0; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 11px; border-top: 1px solid #edebe5; }.stock-thumb, .table-thumb { display: grid; place-items: center; border: 1px solid rgba(23,23,21,.1); font-family: Georgia, serif; font-size: 7px; line-height: .85; text-align: center; }.stock-thumb { width: 38px; height: 46px; }.stock-item > div { min-width: 0; display: grid; gap: 5px; }.stock-item strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.stock-item small { color: var(--muted); font-size: 7px; }.stock-item button { padding: 5px 8px; border: 1px solid var(--line); background: white; font-size: 8px; }.stock-count { color: var(--red) !important; font-weight: 800; }

.recent-panel { margin-top: 13px; padding: 22px; }.recent-panel .panel-head { margin-bottom: 18px; }
.table-wrap { width: 100%; overflow-x: auto; } table { width: 100%; border-collapse: collapse; } th { padding: 10px 12px; color: #96938d; font-size: 8px; font-weight: 650; letter-spacing: .04em; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; } td { padding: 14px 12px; border-bottom: 1px solid #eeece7; font-size: 9px; vertical-align: middle; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover { background: #fbfaf7; }.order-id { font-family: ui-monospace, Consolas, monospace; color: #5f5d57; }.customer-cell { display: grid; gap: 4px; }.customer-cell strong { font-size: 9px; }.customer-cell small { color: var(--muted); font-size: 7px; }.amount-cell { font-family: Georgia,serif; font-size: 13px; }.status-badge { width: max-content; padding: 5px 8px; display: inline-flex; align-items: center; gap: 5px; border-radius: 30px; font-size: 7px; font-weight: 750; }.status-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }.status-active, .status-paid, .status-completed { background: #e8f5ed; color: var(--green); }.status-draft, .status-pending { background: #fff2d8; color: #a46a00; }.status-archived, .status-cancelled { background: #ededeb; color: #77756f; }.status-delivered { background: #e9e7ff; color: #594f96; }.status-refunded { background: #ffe6e1; color: var(--red); }

.view-heading { margin-bottom: 27px; display: flex; align-items: end; justify-content: space-between; gap: 25px; }.view-heading h1 { margin: 8px 0 6px; font-family: Georgia, "Songti SC", serif; font-size: 41px; font-weight: 400; letter-spacing: -.04em; }.view-heading p { margin: 0; color: var(--muted); font-size: 11px; }.filter-bar { margin-bottom: 13px; display: flex; gap: 8px; }.admin-search { min-width: 300px; height: 42px; padding: 0 13px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); background: white; }.admin-search svg { width: 16px; }.admin-search input { width: 100%; border: 0; outline: none; font-size: 10px; }.filter-bar select { min-width: 130px; padding: 0 13px; border: 1px solid var(--line); background: white; color: #66645f; font-size: 9px; }
.catalog-panel { padding: 18px 20px 8px; }.catalog-summary { padding: 0 2px 14px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 9px; }.catalog-summary strong { color: var(--ink); }.catalog-summary small { font-size: 8px; }.product-cell { min-width: 230px; display: flex; align-items: center; gap: 12px; }.table-thumb { width: 42px; height: 51px; flex: 0 0 auto; }.product-cell > div { display: grid; gap: 4px; }.product-cell strong { max-width: 210px; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.product-cell small { color: var(--muted); font-size: 7px; }.stock-value { font-weight: 750; }.stock-value.is-low { color: var(--red); }.row-actions { min-width: 135px; display: flex; justify-content: flex-end; gap: 5px; }.row-actions button { padding: 6px 8px; border: 1px solid var(--line); background: white; font-size: 8px; }.row-actions button:hover { border-color: var(--ink); }.row-actions .danger-action:hover { border-color: var(--red); color: var(--red); }.empty-table { padding: 70px 20px; color: var(--muted); text-align: center; font-size: 11px; }.order-status-select { padding: 7px 25px 7px 8px; border: 1px solid var(--line); background: white; font-size: 8px; }

.inventory-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }.inventory-card { min-height: 190px; padding: 18px; position: relative; display: grid; grid-template-columns: 68px 1fr; align-items: center; gap: 17px; border: 1px solid var(--line); background: white; }.inventory-art { width: 68px; height: 88px; display: grid; place-items: center; border: 1px solid rgba(23,23,21,.15); font-family: Georgia,serif; font-size: 10px; line-height: .85; text-align: center; }.inventory-card-content { min-width: 0; display: grid; gap: 7px; }.inventory-card h3 { margin: 0; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.inventory-card small { color: var(--muted); font-size: 8px; }.inventory-number { margin: 5px 0; display: flex; align-items: baseline; gap: 5px; }.inventory-number strong { font-family: Georgia,serif; font-size: 30px; }.inventory-number span { color: var(--muted); font-size: 8px; }.inventory-number.is-low strong { color: var(--red); }.inventory-card button { width: max-content; padding: 7px 10px; border: 1px solid var(--ink); background: white; font-size: 8px; font-weight: 700; }

.art-1 { background: var(--lime); }.art-2 { background: var(--purple); }.art-3 { background: var(--orange); }.art-4 { background: var(--blue); }.art-5 { background: #ffdfcf; }.art-6 { background: #8174dd; color: white; }.art-7 { background: #dffe9a; }.art-8 { background: var(--ink); color: var(--orange); }

.admin-dialog { width: min(690px, calc(100% - 30px)); max-height: calc(100vh - 38px); padding: 0; overflow: auto; border: 0; background: white; box-shadow: var(--shadow); }.admin-dialog::backdrop { background: rgba(23,23,21,.58); backdrop-filter: blur(4px); }.admin-dialog form { padding: 28px; }.dialog-head { padding-bottom: 19px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); }.dialog-head h2 { margin: 6px 0 0; font-family: Georgia, "Songti SC", serif; font-size: 29px; font-weight: 400; }.dialog-close { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: white; font-size: 21px; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }.form-grid .span-two { grid-column: span 2; }.admin-dialog label small { color: var(--muted); font-size: 7px; font-weight: 400; }.admin-dialog textarea { resize: vertical; line-height: 1.6; }.dialog-actions { padding-top: 18px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); }.secondary-button { min-height: 44px; padding: 0 17px; border: 1px solid var(--line); background: white; font-size: 11px; }.restock-dialog { width: min(440px, calc(100% - 30px)); }.restock-product { margin: 22px 0; padding: 15px; display: grid; grid-template-columns: 44px 1fr; gap: 13px; align-items: center; background: var(--paper); }.restock-product .table-thumb { width: 44px; height: 54px; }.restock-product div:last-child { display: grid; gap: 5px; }.restock-product strong { font-size: 10px; }.restock-product small { color: var(--muted); font-size: 8px; }
.status-payment_review { background: #fff0cf; color: #b45b00; }.order-deliver-button { min-width: 72px; padding: 7px 9px; border: 1px solid var(--line); background: white; font-size: 8px; font-weight: 700; white-space: nowrap; }.order-deliver-button:hover { border-color: var(--ink); }.order-deliver-button.is-urgent { border-color: var(--orange); background: #fff2e8; color: #b34820; }.fulfill-dialog { width: min(590px, calc(100% - 30px)); }.fulfill-order { margin: 20px 0 14px; padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 13px; background: var(--paper); }.fulfill-order > div { min-width: 0; display: grid; gap: 4px; }.fulfill-order small { color: var(--muted); font-size: 7px; }.fulfill-order strong { overflow-wrap: anywhere; font-size: 9px; }.verify-warning { padding: 12px 14px; display: grid; gap: 5px; border-left: 3px solid var(--orange); background: #fff3e9; }.verify-warning strong { color: #9a3c1d; font-size: 9px; }.verify-warning span { color: #805e4f; font-size: 8px; line-height: 1.6; }.copy-keys-button { margin: 9px 0 16px auto; padding: 7px 10px; display: block; border: 1px solid var(--line); background: white; font-size: 8px; }
.admin-toast { min-width: 250px; padding: 13px 18px; position: fixed; z-index: 100; right: 25px; bottom: 25px; border-left: 4px solid var(--lime); background: var(--ink); color: white; box-shadow: var(--shadow); font-size: 10px; opacity: 0; pointer-events: none; transform: translateY(15px); transition: .22s; }.admin-toast.is-visible { opacity: 1; transform: translateY(0); }.admin-toast.is-error { border-color: var(--orange); }
.mobile-overlay { position: fixed; inset: 0; z-index: 25; background: rgba(23,23,21,.55); }

@media (max-width: 1100px) {
  :root { --sidebar: 210px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }.dashboard-grid { grid-template-columns: 1fr; }.stock-panel { min-height: auto; }.inventory-cards { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .login-screen { grid-template-columns: 1fr; }.login-art { display: none; }.login-panel { min-height: 100vh; padding: 30px 6vw; }.mobile-login-logo { margin-bottom: 60px; display: flex; align-items: center; gap: 12px; font-weight: 900; letter-spacing: .14em; }
  .sidebar { width: 240px; transform: translateX(-102%); transition: transform .25s; }.sidebar.is-open { transform: translateX(0); }.admin-main { margin-left: 0; }.menu-button { display: grid; flex: 0 0 auto; }.topbar { padding: 0 4vw; }.topbar strong#pageTitle { max-width: 185px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.topbar .primary-button { width: 42px; padding: 0; }.topbar .primary-button span { display: none; }.icon-control { display: none; }.content { padding: 24px 4vw 50px; }
  .stats-grid { grid-template-columns: 1fr; }.stat-card { min-height: 145px; }.dashboard-grid { grid-template-columns: 1fr; }.sales-panel { padding: 17px; }.period-tabs { display: none; }.recent-panel { padding: 17px; }
  .view-heading { align-items: flex-start; }.view-heading .primary-button { width: 44px; padding: 0; }.view-heading .primary-button span { display: none; }.view-heading h1 { font-size: 35px; }.filter-bar { flex-wrap: wrap; }.admin-search { min-width: 100%; }.filter-bar select { flex: 1; height: 40px; }.catalog-panel { padding: 12px; }.catalog-summary small { display: none; }.inventory-cards { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }.form-grid .span-two { grid-column: auto; }.admin-dialog form { padding: 20px; }.fulfill-order { grid-template-columns: 1fr; }.admin-toast { left: 18px; right: 18px; bottom: 18px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }