/* 参考站点的品牌色用于两个后台;H5 共用蓝色品牌,并采用明亮的购物界面。 */ :root { font-family: Inter,"Noto Sans SC","Microsoft YaHei",Arial,sans-serif; color:#111827; background:#f8fafc; --primary:#2f6bff; --line:#e6ebf3; --muted:#667085; } button,.button,input,select,textarea { border-color:#d5ddeb; border-radius:8px; } button,.button { transition:background .15s,border-color .15s; } button:hover,.button:hover { background:#edf4ff; border-color:#a9c2ff; } button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid #78a2ff; outline-offset:3px; } .primary,button[aria-current="page"] { background:var(--primary); border-color:var(--primary); color:white; } .primary { background:linear-gradient(135deg,#3678ff,#2f6bff); box-shadow:0 3px 8px #2f6bff18; } .primary:hover { background:#2057df; color:white; } button:disabled { background:#f2f4f7; border-color:#e4e7ec; color:#98a2b3; box-shadow:none; } a { color:#245fe5; }.muted,.message small { color:var(--muted); } input,select,textarea { padding:10px 12px; }input::placeholder,textarea::placeholder { color:#8893a5; } input:focus,select:focus,textarea:focus { border-color:var(--primary); } h1,h2,h3,strong { font-weight:650; } h2 { letter-spacing:-.3px; } .review-header { background:#fff; border-color:var(--line); padding:10px 20px; }.review-header strong { color:#243959; }.review-header span { color:var(--muted); } .style-guide { padding:10px 20px; background:#f0f5ff; border-bottom:1px solid #dce6f8; font-size:12px; color:#43516b; } .style-guide summary { font-weight:600; color:#245fe5; }.style-guide-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; padding:24px 0 12px; }.style-guide h2 { margin-top:8px; color:#172b4d; }.style-label { font-size:11px; letter-spacing:1px; } .swatches { display:flex; flex-wrap:wrap; gap:16px; }.swatches span { display:flex; align-items:center; gap:7px; }.swatches span::before { content:""; display:block; width:22px; height:22px; border-radius:6px; background:var(--swatch); border:1px solid #d5ddeb; } .review-sidebar { top:65px; border-color:var(--line); border-radius:12px; box-shadow:0 16px 48px #07112626; }.review-sidebar details { border-color:var(--line); } .annotation { border-color:#d5ddeb; color:var(--muted); padding:16px; font-size:12px; } .box,.surface { border-color:var(--line); border-radius:12px; }.box { padding:18px; } .hint { border:1px solid #dce7fb; background:#f3f7ff; border-radius:8px; color:#435777; } .tag { background:#edf4ff; color:#2452aa; border:1px solid #d8e5ff; border-radius:5px; padding:2px 8px; } .placeholder,.empty { border-color:#d5ddeb; background:#f8fafc; border-radius:12px; color:var(--muted); } th,td { border:0; border-bottom:1px solid var(--line); padding:13px 12px; }th { background:#f8fafc; color:#667085; font-weight:600; }tbody tr:hover { background:#f9fbff; } table { margin:14px 0; }.table-wrap { border:1px solid var(--line); border-radius:10px; } .message { border-color:var(--line); border-radius:12px 12px 12px 3px; background:#fff; }.message.customer { background:#edf4ff; border-color:#dbe8ff; border-radius:12px 12px 3px 12px; } .steps span { border-color:#b4cbff; color:#245fe5; } dialog { border:1px solid var(--line); border-radius:16px; box-shadow:0 24px 80px #07112633; }dialog::backdrop { background:#07112666; } #notice:not(:empty) { border:1px solid #cbdcff; background:#edf4ff; color:#204eaa; margin:0; } /* 登录、导航和数据页面使用同一组后台组件。角色权限继续由原有交互决定。 */ .login-layout { background:radial-gradient(ellipse at 10% 10%,#204b9544,transparent 65%),linear-gradient(120deg,#020712,#071126 54%,#0b1835); min-height:calc(100vh - 100px); gap:100px; } .login-intro { color:#d8e1ff; max-width:380px; }.login-intro h1 { color:white; font-size:40px; letter-spacing:2px; }.login-intro h2 { color:white; font-size:24px; }.login-intro p { color:#afbcdd; font-size:15px; } .login-panel { padding:32px; width:420px; border:1px solid #e6ebf3; box-shadow:0 24px 70px #02071255; }.login-panel h2 { font-size:23px; }.login-panel > p { color:var(--muted); }.login-panel form { margin-top:24px; }.login-panel form > button { min-height:44px; }.login-panel .hint { margin-top:20px; font-size:12px; } .admin-session { border-color:var(--line); padding:8px 24px; color:#667085; }.admin-session button { font-size:12px; } .admin-shell { background:#f8fafc; grid-template-columns:216px minmax(0,1fr); } .admin-sidebar { background:#071126; color:#d8e1ff; }.admin-brand { border-color:#ffffff12; padding:24px; color:white; font-size:21px; letter-spacing:1px; }.admin-brand small { color:#8fa5cc; letter-spacing:0; margin-top:4px; } .nav-group { margin:22px 12px; }.nav-group p { color:#91a1bd; padding:0 12px 8px; }.nav-group button { border-radius:7px; padding:10px 12px; color:#c7d3eb; margin-bottom:4px; }.nav-group button:hover { background:#182a49; }.nav-group button[aria-current="page"] { background:#2f6bff; border:0; padding-left:12px; box-shadow:0 4px 12px #0002; color:white; } .admin-topbar { height:64px; border-color:var(--line); }.admin-breadcrumb { color:#748096; }.admin-tabs { border-color:var(--line); }.admin-tabs span { background:#edf4ff; color:#245fe5; border-color:#dce7ff; border-radius:6px; } .admin-title h2 { font-size:22px; }.admin-title > span { color:#748096; }.admin-content > .surface { border-color:var(--line); box-shadow:0 4px 18px #15294d04; padding:24px; } .metric { border-color:var(--line); background:linear-gradient(150deg,#fff,#f8faff); border-radius:10px; padding:20px; }.metric > span { color:#667085; font-size:13px; }.metric strong { font-size:30px; color:#172b4d; font-variant-numeric:tabular-nums; }.metric small { color:#748096; } .chart-placeholder { border-color:var(--line); border-radius:8px; color:#748096; background:repeating-linear-gradient(0deg,#fff,#fff 33px,#edf1f7 34px); } .workspace > section { border-color:var(--line); }.workspace > section:first-child,.workspace > section:last-child { background:#f8fafc; }.workspace > section:nth-child(2) > form { border-color:var(--line); } .session-row { border-color:var(--line); border-radius:6px; }.session-row.active { background:#edf4ff; border-left:3px solid var(--primary); }.session-row small { color:#667085; } /* H5 使用明亮背景和较大的触控范围,AI 与购物操作共享品牌色。 */ .mobile { border:1px solid #dce5f1; border-radius:24px; overflow:hidden; box-shadow:0 18px 60px #1b376214; margin:28px auto; --primary:#245fe5; } .device-status { background:white; color:#344054; padding:12px 20px 5px; }.mobile .mobile-header { border-color:#edf1f7; padding:8px 16px; background:white; }.mobile .mobile-header strong { font-size:18px; }.mobile .mobile-header button { min-height:44px; color:#43516b; } .mobile .content { background:#f6f8fc; padding:16px 16px 80px; }.mobile button,.mobile .button { min-height:44px; }.mobile .box { border-radius:16px; padding:16px; } .mobile .shop-tabs { border-color:#edf1f7; padding:10px 8px; box-shadow:0 -4px 18px #17346105; }.shop-tabs button { color:#667085; border-radius:12px; }.shop-tabs button[aria-current="page"] { background:#edf4ff; color:#245fe5; font-weight:650; } .shop-search { border:1px solid #e3eaf5; border-radius:24px; background:white; color:#748096; padding:11px 16px; } .shop-banner { background:linear-gradient(120deg,#e4edff,#eff7ff); border:1px solid #d9e7ff; border-radius:18px; padding:24px; color:#284778; }.shop-banner h2 { color:#152f5d; font-size:25px; }.shop-banner p { color:#526b92; }.shop-banner .button,.shop-banner button { background:white; border-color:#d1dfff; color:#245fe5; border-radius:22px; } .shortcut-icon { width:32px; height:32px; border:1px solid #d4e3ff; background:#e8f0ff; border-radius:10px; position:relative; }.shortcut-icon::after { content:""; position:absolute; inset:8px; border:2px solid #6089dc; border-radius:3px; }.shortcut:nth-child(2) .shortcut-icon::after { border-radius:9px; }.shortcut:nth-child(3) .shortcut-icon::after { transform:rotate(45deg); } .ai-entry { background:linear-gradient(120deg,#edf4ff,#fff); border:1px solid #c9dcff; border-radius:16px; padding:18px; box-shadow:0 4px 14px #2f6bff06; }.ai-entry strong { color:#245fe5; font-size:17px; }.ai-entry span { color:#4e6790; }.ai-entry:hover { background:#e8f1ff; } .ai-float { background:#245fe5; color:white; border:3px solid white; border-radius:22px; box-shadow:0 6px 18px #245fe533; padding:8px 3px; }.ai-float:hover { background:#174dc9; color:white; } .section-heading h2 { font-size:18px; }.section-heading button { color:#667085; } .goods-card { border:1px solid #e8edf5; border-radius:16px; overflow:hidden; background:white; }.goods-card > div:last-child { padding:14px 12px; }.goods-card strong { font-size:14px; }.goods-card span { color:#245fe5; }.goods-image { background:linear-gradient(135deg,#eef2f8,#e5ecf7); border:0; color:#657794; height:140px; gap:4px; }.goods-image small { color:#748096; }.product-hero { height:240px; border-radius:16px; } .catalog nav button { background:#eef3fb; color:#456089; border-color:#dde6f5; }.profile-card { padding:22px 8px; }.avatar-placeholder { background:#e4edff; border-color:#d1dfff; color:#5577b5; }.order-shortcuts { border-radius:16px; padding:14px 4px; }.account-list { border-radius:12px; overflow:hidden; }.account-list button { border-color:#edf1f7; }.order-card { border-color:#e6ebf3; border-radius:16px; }.product-section { border-color:#e6ebf3; }.cart-total,.purchase-bar { background:white; border-radius:12px; padding:12px; } @media(max-width:1150px) { .admin-shell { grid-template-columns:180px minmax(0,1fr); }.admin-content > .surface { padding:16px; }.login-layout { gap:40px; } } @media(max-width:760px) { .style-guide-grid { grid-template-columns:1fr; gap:16px; }.style-guide { padding:10px 12px; }.login-layout { gap:24px; padding:28px 16px; }.login-intro h1 { font-size:28px; }.login-panel { width:100%; padding:24px; }.admin-shell { grid-template-columns:110px minmax(0,1fr); }.admin-brand { padding:16px 8px; font-size:15px; }.nav-group { margin:16px 5px; }.nav-group p { padding:0 4px 8px; }.nav-group button,.nav-group button[aria-current="page"] { padding:10px 6px; }.admin-content > .surface { padding:8px; }.admin-title h2 { font-size:18px; }.admin-topbar { height:auto; }.mobile { margin:0 auto; border:0; border-radius:0; box-shadow:none; }.review-header { padding:8px; }.review-header > div { display:flex; align-items:center; gap:8px; }.annotation { margin-top:16px; }.metric { padding:14px; } } @media(prefers-reduced-motion:reduce) { button,.button { transition:none; } }