:root { color-scheme: light; --ink:#17211f; --muted:#74807c; --line:#e5e9e7; --surface:#fff; --back:#f4f6f5; --green:#1f4b40; --green2:#397064; --blue:#2468d5; --red:#b24b42; --amber:#a56b21; --shadow:0 12px 38px rgba(28,45,40,.07); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--back); font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif; }
button,input,textarea,select { font:inherit; color:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
.is-hidden { display:none !important; }
.admin-auth { min-height:100vh; display:grid; place-items:center; padding:24px; background:#f8f9fa; }
.admin-login { width:min(410px,100%); display:grid; gap:17px; border:1px solid #dadce0; border-radius:24px; padding:40px; background:#fff; box-shadow:0 2px 8px rgba(60,64,67,.08); }
.login-mark { width:44px; height:44px; display:grid; place-items:center; margin:auto; border-radius:14px 14px 14px 4px; color:#fff; background:var(--green); font:21px Georgia,serif; }
.login-logo { width:58px; height:58px; display:block; margin:auto; border-radius:50%; object-fit:cover; mix-blend-mode:multiply; }
.admin-login > p,.modal-card > p { margin:0; color:var(--green2); text-align:center; font-size:10px; font-weight:800; letter-spacing:.22em; }
.admin-login h1 { margin:-7px 0 8px; text-align:center; font-size:25px; font-weight:550; }
label { display:grid; gap:7px; color:#58645f; font-size:12px; font-weight:650; }
input,textarea,select { width:100%; border:1px solid #d7ddda; border-radius:10px; padding:12px 13px; outline:none; background:#fff; font-size:14px; font-weight:400; }
input:focus,textarea:focus,select:focus { border-color:var(--green2); box-shadow:0 0 0 3px rgba(55,103,91,.11); }
textarea { resize:vertical; line-height:1.6; }
.admin-login button,.primary-button { border:0; border-radius:10px; padding:12px 17px; color:#fff; background:var(--green); font-size:13px; font-weight:700; }
.admin-login button:hover,.primary-button:hover { background:#173d34; }
.admin-login a { color:#66736f; text-align:center; text-decoration:none; font-size:12px; }
.form-error { min-height:17px; color:#d93025; font-size:12px; }
.admin-app { min-height:100vh; }
.sidebar { position:fixed; z-index:30; inset:0 auto 0 0; width:238px; display:flex; flex-direction:column; border-right:1px solid #dfe4e1; padding:26px 18px 18px; background:#fbfcfb; }
.admin-brand { display:flex; align-items:center; gap:11px; margin:0 8px 35px; color:var(--ink); text-decoration:none; }
.admin-brand > span { width:38px; height:38px; display:grid; place-items:center; border-radius:12px 12px 12px 4px; color:#fff; background:var(--green); font:18px Georgia,serif; }
.admin-logo { width:40px; height:40px; display:block; border-radius:50%; object-fit:cover; mix-blend-mode:multiply; }
.admin-brand div,.admin-profile div { display:grid; gap:3px; min-width:0; }
.admin-brand strong { font-size:14px; letter-spacing:.04em; }
.admin-brand small,.admin-profile small { overflow:hidden; color:#87918d; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.sidebar nav { display:grid; gap:5px; }
.sidebar nav button { position:relative; display:flex; align-items:center; gap:12px; border:0; border-radius:10px; padding:11px 13px; color:#65716d; background:transparent; text-align:left; font-size:13px; }
.sidebar nav button:hover { color:var(--green); background:#eef2f0; }
.sidebar nav button.active { color:var(--green); background:#e7eeeb; font-weight:700; }
.sidebar nav i { width:18px; color:#84908b; text-align:center; font-style:normal; }
.nav-badge { margin-left:auto; min-width:20px; border-radius:10px; padding:2px 6px; color:#fff; background:#b65e4e; text-align:center; font-size:9px; }
.sidebar-foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid var(--line); padding:18px 6px 2px; }
.admin-profile { min-width:0; display:flex; align-items:center; gap:9px; }
.admin-profile > span,.user-avatar { flex:0 0 auto; width:32px; height:32px; display:grid; place-items:center; border-radius:50%; color:#fff; background:#66887e; font-size:12px; font-weight:700; }
.admin-profile strong { font-size:11px; }
.text-button,.link-button { border:0; padding:5px; color:#74817c; background:transparent; font-size:11px; }
.admin-main { min-height:100vh; margin-left:238px; }
.mobile-head { display:none; }
.admin-section { display:none; padding:42px clamp(28px,4vw,62px) 70px; }
.admin-section.active { display:block; }
.page-head { min-height:74px; display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:27px; }
.page-head p { margin:0 0 8px; color:var(--green2); font-size:9px; font-weight:800; letter-spacing:.24em; }
.page-head h1 { margin:0 0 7px; font-size:29px; font-weight:600; letter-spacing:-.025em; }
.page-head span { color:var(--muted); font-size:12px; }
.outline-button { border:1px solid #ccd5d1; border-radius:10px; padding:10px 13px; color:#57655f; background:#fff; text-decoration:none; font-size:11px; }
.panel { border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:0 1px 2px rgba(28,45,40,.025); overflow:hidden; }
.panel > header { min-height:70px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--line); padding:17px 20px; }
.panel header h2 { margin:0 0 5px; font-size:14px; }
.panel header p { margin:0; color:var(--muted); font-size:10px; }
.metric-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:16px; }
.metric-card { min-height:126px; display:flex; flex-direction:column; justify-content:space-between; border:1px solid var(--line); border-radius:16px; padding:18px; background:#fff; }
.metric-card span { color:var(--muted); font-size:11px; }
.metric-card strong { font-size:27px; font-weight:600; letter-spacing:-.04em; }
.metric-card small { color:#87928e; font-size:9px; }
.metric-card.attention { color:#7d4c16; background:#fffaf2; border-color:#eee1cb; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(250px,.75fr); gap:16px; margin-bottom:16px; }
.traffic-chart { height:260px; display:flex; align-items:flex-end; gap:7px; padding:25px 20px 18px; }
.bar-column { flex:1; min-width:0; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:7px; }
.bar { width:min(24px,80%); min-height:3px; border-radius:5px 5px 2px 2px; background:#628c80; transition:.2s; }
.bar-column:hover .bar { background:var(--green); }
.bar-column span { color:#8b9591; font-size:8px; white-space:nowrap; }
.top-panel #top-products { padding:9px 20px 18px; }
.top-product { display:grid; grid-template-columns:1fr auto; gap:5px; border-bottom:1px solid #eef1ef; padding:13px 0; }
.top-product:last-child { border:0; }
.top-product strong { font-size:12px; }
.top-product span,.top-product small { color:var(--muted); font-size:10px; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; white-space:nowrap; }
th { padding:12px 18px; color:#89938f; background:#fbfcfb; text-align:left; font-size:9px; letter-spacing:.07em; }
td { border-top:1px solid #edf0ee; padding:14px 18px; font-size:11px; }
td strong { display:block; margin-bottom:3px; font-size:12px; }
td small { color:var(--muted); font-size:9px; }
.status { display:inline-flex; align-items:center; border-radius:20px; padding:4px 8px; font-size:9px; font-weight:700; }
.status.awaiting_payment { color:#855a20; background:#fff1d9; }
.status.payment_submitted { color:#245d88; background:#e9f3fb; }
.status.paid,.status.active { color:#27644e; background:#e7f3ed; }
.status.cancelled,.status.disabled { color:#974c44; background:#f9eae8; }
.search-box { width:min(330px,45vw); display:flex; grid-template:none; align-items:center; gap:8px; border:1px solid #d7ddda; border-radius:10px; padding:0 11px; background:#fff; }
.search-box input { border:0; padding:10px 3px; box-shadow:none; }
.table-action { border:0; border-radius:7px; padding:6px 9px; color:#53635d; background:#eef2f0; font-size:9px; }
.order-admin-list,.announcement-list { display:grid; gap:12px; }
.order-admin-card { display:grid; grid-template-columns:minmax(180px,1fr) minmax(180px,1.3fr) auto auto; align-items:center; gap:22px; border:1px solid var(--line); border-radius:15px; padding:18px 20px; background:#fff; }
.order-admin-card h3 { margin:0 0 5px; font-size:13px; }
.order-admin-card p,.order-admin-card small { margin:0; color:var(--muted); font-size:10px; line-height:1.6; }
.order-admin-card strong { font-size:14px; }
.order-admin-card select { width:135px; padding:8px; font-size:10px; }
.proof-link { color:var(--blue); text-decoration:none; font-size:10px; }
.chat-console { min-height:590px; display:grid; grid-template-columns:300px 1fr; }
.conversation-list { border-right:1px solid var(--line); overflow:auto; }
.conversation-item { width:100%; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; border:0; border-bottom:1px solid #eef1ef; padding:14px; background:#fff; text-align:left; }
.conversation-item:hover,.conversation-item.active { background:#f0f4f2; }
.conversation-item div { min-width:0; }
.conversation-item strong,.conversation-item small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conversation-item strong { margin-bottom:4px; font-size:11px; }
.conversation-item small { color:var(--muted); font-size:9px; }
.unread-count { min-width:18px; border-radius:9px; padding:3px; color:#fff; background:#b65e4e; text-align:center; font-size:8px; }
.conversation-main { min-width:0; }
.conversation-empty { height:100%; display:grid; place-items:center; color:#929b98; font-size:12px; }
.conversation-active { height:590px; display:grid; grid-template-rows:66px 1fr auto; }
.conversation-active > header { display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:12px 18px; }
.conversation-active header div:last-child { display:grid; gap:3px; }
.conversation-active header strong { font-size:12px; }
.conversation-active header small { color:var(--muted); font-size:9px; }
.message-list { display:flex; flex-direction:column; gap:10px; overflow:auto; padding:20px; }
.message { position:relative; max-width:72%; align-self:flex-start; border-radius:5px 14px 14px; padding:10px 12px; background:#edf1ef; font-size:11px; line-height:1.6; white-space:pre-wrap; }
.message.mine { align-self:flex-end; border-radius:14px 5px 14px 14px; color:#fff; background:var(--green); }
.message time { display:block; margin-top:4px; opacity:.58; font-size:8px; }
.message-delete { position:absolute; top:-7px; right:-30px; display:none; border:0; padding:3px; color:#8b9692; background:transparent; font-size:9px; }
.message.mine .message-delete { right:auto; left:-30px; }
.message:hover .message-delete { display:block; }
#admin-message-form { display:grid; grid-template-columns:1fr auto; gap:9px; border-top:1px solid var(--line); padding:13px; }
#admin-message-form textarea { min-height:42px; max-height:110px; resize:none; }
#admin-message-form button { border:0; border-radius:9px; padding:0 18px; color:#fff; background:var(--green); font-size:11px; }
.product-admin-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.product-admin-card { overflow:hidden; border:1px solid var(--line); border-radius:16px; background:#fff; }
.product-admin-card img { width:100%; height:180px; display:block; object-fit:contain; object-position:center; background:#edf0ed; }
.product-admin-card > div { padding:16px; }
.product-admin-card h3 { margin:0 0 7px; font-size:14px; }
.product-admin-card p { height:34px; overflow:hidden; margin:0 0 15px; color:var(--muted); font-size:10px; line-height:1.7; }
.product-card-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.product-card-actions { display:flex; gap:6px; }
.product-card-foot strong { font-size:15px; }
.announcement-card { display:grid; grid-template-columns:1fr auto; gap:20px; border:1px solid var(--line); border-radius:15px; padding:19px 21px; background:#fff; }
.announcement-card h3 { margin:0 0 7px; font-size:13px; }
.announcement-card p { margin:0 0 9px; color:#64716c; font-size:11px; line-height:1.7; white-space:pre-wrap; }
.announcement-card small { color:#929b98; font-size:9px; }
.announcement-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:7px; }
.danger-button { border:0; border-radius:7px; padding:7px 9px; color:var(--red); background:#faeeec; font-size:9px; }
.settings-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr); gap:16px; }
.settings-side { display:grid; gap:16px; }
.form-panel { display:grid; gap:15px; padding:0 20px 20px; }
.form-panel > header { margin:0 -20px; }
.qr-preview { width:150px; height:150px; margin:auto; border:1px solid var(--line); border-radius:13px; object-fit:contain; }
.upload-button { display:block; border:1px dashed #b9c4bf; border-radius:9px; padding:10px; color:#56655f; background:#f8faf9; text-align:center; cursor:pointer; font-size:10px; }
.upload-button input { display:none; }
.settings-save { grid-column:1/-1; justify-self:end; min-width:160px; }
dialog { border:0; padding:0; background:transparent; }
dialog::backdrop { background:rgba(22,31,28,.45); backdrop-filter:blur(4px); }
.modal-card { position:relative; width:min(480px,calc(100vw - 30px)); max-height:calc(100vh - 30px); display:grid; gap:15px; overflow:auto; border-radius:18px; padding:28px; background:#fff; box-shadow:var(--shadow); }
.modal-card h2 { margin:-7px 0 5px; text-align:center; font-size:20px; }
.modal-close { position:absolute; top:13px; right:13px; width:30px; height:30px; border:0; border-radius:50%; background:#f0f2f1; font-size:17px; }
.two-columns { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.check { display:flex; align-items:center; gap:8px; font-size:11px; }
.check input { width:auto; }
.checks { padding:4px 0; }
.product-preview { width:100%; height:180px; border-radius:12px; object-fit:contain; object-position:center; background:#eef1ef; }
.toast { position:fixed; z-index:100; left:50%; bottom:26px; transform:translate(-50%,18px); opacity:0; pointer-events:none; border-radius:9px; padding:10px 15px; color:#fff; background:#20372f; box-shadow:var(--shadow); font-size:11px; transition:.2s; }
.toast.show { transform:translate(-50%,0); opacity:1; }
.empty-state { padding:35px; color:#929b98; text-align:center; font-size:11px; }

@media (max-width:1050px) {
  .metric-grid { grid-template-columns:repeat(2,1fr); }
  .dashboard-grid { grid-template-columns:1fr; }
  .product-admin-grid { grid-template-columns:repeat(2,1fr); }
  .order-admin-card { grid-template-columns:1fr 1fr; }
}
@media (max-width:760px) {
  .sidebar { width:220px; transform:translateX(-105%); transition:.2s; box-shadow:var(--shadow); }
  body.menu-open .sidebar { transform:translateX(0); }
  .admin-main { margin-left:0; padding-top:54px; }
  .mobile-head { position:fixed; z-index:25; inset:0 0 auto; height:54px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); padding:0 16px; background:rgba(255,255,255,.95); }
  .mobile-head button { border:0; background:transparent; font-size:20px; }
  .mobile-head strong { font-size:12px; }
  .mobile-head a { color:var(--green); text-decoration:none; font-size:10px; }
  .admin-section { padding:25px 15px 50px; }
  .page-head { display:grid; gap:14px; }
  .search-box { width:100%; }
  .metric-grid { gap:9px; }
  .metric-card { min-height:110px; padding:14px; }
  .metric-card strong { font-size:22px; }
  .traffic-chart { gap:3px; padding-left:8px; padding-right:8px; }
  .bar-column:nth-child(even) span { visibility:hidden; }
  .product-admin-grid { grid-template-columns:1fr; }
  .order-admin-card { grid-template-columns:1fr; gap:12px; }
  .chat-console { grid-template-columns:1fr; }
  .conversation-list { max-height:180px; border-right:0; border-bottom:1px solid var(--line); }
  .conversation-active { height:470px; }
  .settings-grid { grid-template-columns:1fr; }
  .settings-save { grid-column:auto; width:100%; }
  .two-columns { grid-template-columns:1fr; }
}