:root { color-scheme: dark; font-family: Inter, "Microsoft YaHei", system-ui, sans-serif; background: #07111f; color: #eef5ff; }
* { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: #07111f; } button { font: inherit; cursor: pointer; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 244px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 25px 16px; background: #081827; border-right: 1px solid #16324f; }
.brand { display: flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; padding: 7px 9px 30px; font-size: .9rem; line-height: 1.35; }.brand span { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:#1c68b4; font-size:.72rem; letter-spacing:.04em; }.brand em { color:#7bb5ff; font-style:normal; font-weight:500; }
nav { display: grid; gap: 5px; }.nav-item { display:flex; gap:12px; align-items:center; border:0; border-radius:9px; background:transparent; color:#a8bbcf; padding:11px 12px; text-align:left; }.nav-item span { width:17px; text-align:center; color:#6d92b8; }.nav-item:hover { background:#102b46; color:#fff; }.nav-item.active { background:#174b7c; color:#fff; font-weight:650; }.nav-item.active span { color:#b7d9ff; }.sidebar-footer { margin-top:auto; padding:16px 10px 4px; color:#7190ae; font-size:.8rem; }.dot { display:inline-block; width:7px; height:7px; margin-right:6px; background:#47d49f; border-radius:50%; }
.content { min-width:0; padding:38px 42px 64px; background:radial-gradient(circle at 80% -5%, #163a61 0, transparent 30rem), #07111f; }.topbar { display:flex; justify-content:space-between; align-items:start; gap:20px; max-width:1280px; margin:0 auto 28px; }.eyebrow { color:#7bb5ff; font-size:.72rem; font-weight:700; letter-spacing:.16em; margin:0 0 8px; } h1 { margin:0; font-size:clamp(1.8rem,3vw,2.5rem); letter-spacing:-.04em; } h2 { margin:0; font-size:1rem; } p { margin:0; }
.topbar > button, #sync { border:1px solid #3f75b8; background:#1d5da4; color:#fff; border-radius:9px; padding:10px 14px; }.topbar > button:hover, #sync:hover { background:#2671c6; }.topbar > button:disabled, #sync:disabled { opacity:.6; cursor:not-allowed; }
.page { display:none; max-width:1280px; margin:0 auto; }.page.active { display:block; }.notice, .panel, .metric, .analytics-card, .permission-shop { background:rgba(13, 29, 49, .88); border:1px solid #21466f; border-radius:13px; }.notice { display:flex; justify-content:space-between; gap:16px; padding:16px 18px; margin-bottom:14px; }.notice span, .panel p, .section-head p, .metric small, .table-meta { color:#9eb0c7; }.metric-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; }.metric { min-height:158px; padding:18px; }.metric p { color:#9eb0c7; font-size:.82rem; margin-bottom:12px; }.metric h2 { font-size:1.35rem; margin-bottom:14px; }.metric small { display:block; line-height:1.45; }.status { display:inline-block; margin-bottom:12px; padding:4px 9px; border-radius:99px; background:#243449; color:#c8d6e8; font-size:.78rem; }.ready .status { background:#143c33; color:#85e1c0; }.pending .status { background:#4c3a14; color:#f0cb78; }.error .status { background:#4d2429; color:#ffb1b9; }
.panel { margin-top:14px; padding:20px; }.action-panel { display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center; }.action-panel h2 { margin-bottom:8px; }.action-panel .result { grid-column:1 / -1; display:none; padding-top:3px; color:#c7d8eb; }.action-panel .result.show { display:block; }.panel ol { margin:12px 0 0; padding-left:20px; color:#c7d8eb; line-height:1.9; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; }.section-head h2 { font-size:1.16rem; margin-bottom:7px; }.filters { display:flex; gap:6px; }.filter { border:1px solid #285078; background:#0d2339; color:#a9c1d8; border-radius:7px; padding:7px 11px; font-size:.84rem; }.filter.active { background:#1c5b99; color:#fff; border-color:#4a86bf; }
.table-panel { margin-top:0; padding:0; overflow:hidden; }.table-meta { padding:15px 18px; border-bottom:1px solid #1e3e61; font-size:.88rem; }.table-wrap { overflow:auto; } table { width:100%; min-width:760px; border-collapse:collapse; text-align:left; } th { color:#87a7c7; background:#0a1c2d; font-size:.75rem; letter-spacing:.04em; text-transform:uppercase; } th, td { padding:13px 16px; border-bottom:1px solid #183856; vertical-align:top; } td { color:#d5e5f5; font-size:.87rem; }.empty { color:#9eb0c7; text-align:center; padding:28px; }.tag { display:inline-block; border-radius:99px; padding:3px 8px; color:#b8d9ff; background:#112d49; font-size:.76rem; }.muted { color:#90a9c0; }.error-text { color:#ffb1b9; max-width:260px; white-space:normal; }
.product-thumb{display:block;width:42px;height:42px;border-radius:9px;object-fit:cover;border:1px solid rgba(125,188,255,.2);background:#0a1c2d}.product-thumb.placeholder{display:grid;place-items:center;color:#6f8ba7}.table-sub{display:block;margin-top:5px;color:#8ca5bd;font-size:.75rem;font-weight:400}.pagination{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 16px;color:#9eb0c7;font-size:.82rem}.pagination button,.date-filter button{border:1px solid rgba(125,188,255,.27);border-radius:7px;background:rgba(18,53,84,.62);color:#dceeff;padding:7px 10px}.pagination button:disabled{opacity:.42;cursor:not-allowed}.date-filter{display:flex;align-items:end;flex-wrap:wrap;gap:10px;padding:12px 14px;border-bottom:1px solid rgba(125,188,255,.14);background:rgba(6,20,34,.24)}.date-filter label{display:grid;gap:5px;color:#9eb0c7;font-size:.76rem}.date-filter input{min-height:34px;border:1px solid rgba(125,188,255,.22);border-radius:7px;background:rgba(7,23,37,.74);color:#eaf5ff;padding:6px 8px;font:inherit;color-scheme:dark}.date-filter button:last-child{background:rgba(32,100,170,.68);border-color:rgba(139,200,255,.45)}
.analytics-grid, .permission-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.analytics-card, .permission-shop { padding:18px; }.analytics-card header, .permission-shop h3 { display:flex; justify-content:space-between; gap:12px; margin:0 0 10px; font-size:1rem; }.analytics-card p { color:#9eb0c7; font-size:.85rem; margin-bottom:12px; }.payload { max-height:280px; overflow:auto; padding:12px; margin:0; border-radius:8px; background:#071725; border:1px solid #193a59; color:#b8d9ff; font:12px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; white-space:pre-wrap; }.scope-list { display:flex; flex-wrap:wrap; gap:7px; }.scope-list code { color:#a7d2ff; background:#102844; border:1px solid #21466f; border-radius:6px; padding:4px 6px; font-size:.75rem; }
.insight-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.insight-card{padding:18px;border:1px solid rgba(125,188,255,.19);border-radius:13px;background:rgba(13,29,49,.67);box-shadow:inset 0 1px 0 rgba(193,229,255,.16),0 16px 42px rgba(0,0,0,.13);backdrop-filter:blur(18px) saturate(140%)}.insight-card.high{border-color:rgba(255,170,109,.45)}.insight-card.positive{border-color:rgba(105,225,177,.35)}.insight-head{display:flex;gap:12px;align-items:flex-start}.insight-head h3{margin:8px 0 5px;font-size:.98rem;line-height:1.4}.insight-head small{color:#8ca5bd;font-size:.75rem}.insight-recommendation{margin:16px 0 13px;line-height:1.6;color:#d5e5f5}.insight-metrics{display:flex;flex-wrap:wrap;gap:7px}.insight-metrics span{padding:5px 7px;border-radius:6px;background:rgba(7,23,37,.55);color:#9ebbd6;font-size:.76rem}
.cost-editor form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.cost-editor label{display:grid;gap:6px;color:#b8cbe0;font-size:.82rem}.cost-editor input,.cost-editor textarea{width:100%;border:1px solid rgba(125,188,255,.24);border-radius:8px;background:rgba(7,23,37,.72);color:#eef5ff;padding:9px;font:inherit}.cost-editor textarea{min-height:78px;resize:vertical}.cost-editor .cost-note{grid-column:span 2}.form-actions{align-self:end}.row-action,.release-link{border:1px solid rgba(125,188,255,.3);border-radius:8px;background:rgba(21,77,126,.65);color:#e8f5ff;padding:7px 10px;text-decoration:none}.release-list{display:grid;gap:14px}.release-entry{padding:15px;border:1px solid rgba(125,188,255,.14);border-radius:11px;background:rgba(5,19,32,.28)}.release-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.release-heading strong{color:#b9dcff;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.release-heading span{color:#8ca5bd;font-size:.78rem}.release-entry h3{margin:9px 0 12px;font-size:1rem}.release-group{display:flex;gap:12px;align-items:flex-start;margin-top:8px}.release-group h4{min-width:36px;margin:0;padding:3px 7px;border-radius:6px;font-size:.74rem;background:rgba(70,133,202,.2);color:#b7dcff}.release-修复 h4{background:rgba(84,177,137,.18);color:#97e5c3}.release-group ul{margin:0;padding-left:18px;color:#bbcbdd;font-size:.84rem;line-height:1.65}
@media (max-width: 900px) { .app-shell { grid-template-columns:1fr; }.sidebar { position:static; height:auto; padding:14px 16px; }.brand { padding-bottom:14px; } nav { grid-template-columns:repeat(3,1fr); }.nav-item { justify-content:center; font-size:.8rem; }.sidebar-footer { display:none; }.content { padding:28px 18px 48px; }.metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 580px) { nav { grid-template-columns:repeat(2,1fr); }.topbar, .notice, .section-head { align-items:flex-start; flex-direction:column; }.metric-grid, .analytics-grid, .permission-grid,.insight-grid { grid-template-columns:1fr; }.action-panel { grid-template-columns:1fr; }.action-panel #sync { justify-self:start; } }
@media (max-width:580px){.date-filter{align-items:stretch}.date-filter label{width:100%}.date-filter button{width:100%}.pagination{justify-content:flex-start;flex-wrap:wrap}}
@media (max-width:900px){.cost-editor form{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:580px){.cost-editor form{grid-template-columns:1fr}.cost-editor .cost-note{grid-column:auto}.release-group{display:block}.release-group h4{display:inline-block;margin-bottom:7px}}
.toast-region{position:fixed;z-index:20;right:24px;bottom:24px;display:grid;gap:10px;pointer-events:none}.toast{min-width:260px;max-width:420px;padding:13px 15px;border-radius:12px;background:rgba(15,39,63,.84);border:1px solid rgba(125,188,255,.25);box-shadow:inset 0 1px 0 rgba(218,241,255,.2),0 18px 42px rgba(0,0,0,.28);backdrop-filter:blur(18px);animation:toast-in .35s cubic-bezier(.2,.8,.2,1) both}.toast.success{border-color:rgba(105,225,177,.35)}.toast.error{border-color:rgba(255,151,160,.4)}
.app-shell{background:radial-gradient(circle at 80% -5%,rgba(39,117,193,.3) 0,transparent 30rem),radial-gradient(circle at 25% 120%,rgba(69,54,138,.15) 0,transparent 26rem),#07111f}.sidebar{background:rgba(8,24,39,.72);border-right-color:rgba(125,188,255,.19);backdrop-filter:blur(22px) saturate(145%);-webkit-backdrop-filter:blur(22px) saturate(145%)}.brand img{width:38px;height:38px;filter:drop-shadow(0 5px 10px rgba(31,128,242,.28));transition:transform .35s cubic-bezier(.2,.8,.2,1)}.brand:hover img{transform:rotate(-7deg) scale(1.08)}.content{background:transparent}.notice,.panel,.metric,.analytics-card,.permission-shop{background:rgba(13,29,49,.67);border-color:rgba(125,188,255,.19);box-shadow:inset 0 1px 0 rgba(193,229,255,.18),0 16px 42px rgba(0,0,0,.13);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}.notice,.panel,.metric,.analytics-card,.permission-shop{position:relative;overflow:hidden}.notice::before,.panel::before,.metric::before,.analytics-card::before,.permission-shop::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(219,241,255,.5),transparent);opacity:.55}.metric{transition:transform .28s ease,border-color .28s ease,background .28s ease;animation:card-in .5s both}.metric:nth-child(2){animation-delay:.04s}.metric:nth-child(3){animation-delay:.08s}.metric:nth-child(4){animation-delay:.12s}.metric:hover{transform:translateY(-3px);border-color:rgba(144,205,255,.42);background:rgba(20,46,73,.76)}
.topbar>button,#sync,.login-card form button{position:relative;overflow:hidden;border:1px solid rgba(139,200,255,.46);background:linear-gradient(135deg,rgba(42,126,215,.94),rgba(24,81,154,.94));box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 24px rgba(6,50,101,.22);transition:transform .18s ease,box-shadow .25s ease,filter .25s ease}.topbar>button::after,#sync::after,.login-card form button::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 22%,rgba(255,255,255,.22) 45%,transparent 66%);transform:translateX(-120%);transition:transform .62s ease}.topbar>button:hover::after,#sync:hover::after,.login-card form button:hover::after{transform:translateX(120%)}.topbar>button:hover,#sync:hover,.login-card form button:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 12px 28px rgba(9,66,131,.32)}.topbar>button:active,#sync:active,.login-card form button:active{transform:translateY(1px) scale(.985)}.is-loading .button-label{opacity:.55}.is-loading::before{content:"";display:inline-block;width:14px;height:14px;margin-right:8px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;vertical-align:-2px;animation:spin .7s linear infinite}
.action-panel .result{padding:10px 12px;border-radius:8px;background:rgba(10,29,47,.45)}.action-panel .result.show{animation:fade-up .3s ease both}.table-tabs{display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid rgba(125,188,255,.14)}.data-tab{border:1px solid transparent;border-radius:8px;padding:7px 10px;color:#9eb0c7;background:transparent;transition:background .2s ease,color .2s ease,transform .2s ease}.data-tab:hover{background:rgba(97,164,228,.12);color:#eaf5ff}.data-tab:active{transform:scale(.97)}.data-tab.active{background:rgba(48,120,197,.44);border-color:rgba(144,205,255,.28);color:#fff}.raw-panel summary{cursor:pointer;color:#b9d8f5}.raw-panel[open] summary{margin-bottom:16px}.analytics-summary{margin-bottom:14px}
.login-card{background:rgba(13,29,49,.82);border-color:rgba(125,188,255,.2);box-shadow:inset 0 1px 0 rgba(193,229,255,.18),0 24px 80px rgba(0,0,0,.26);backdrop-filter:blur(22px) saturate(145%);-webkit-backdrop-filter:blur(22px) saturate(145%);animation:card-in .55s both}.login-mark{width:48px;height:48px;background:transparent;filter:drop-shadow(0 7px 15px rgba(41,134,237,.3))}.login-card input{background:rgba(7,23,37,.72);transition:border .2s,box-shadow .2s,background .2s}.login-card input:focus{outline:0;border-color:#55a0e5;background:rgba(7,23,37,.94);box-shadow:0 0 0 3px rgba(77,154,225,.16)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.sidebar{background:#081827}.notice,.panel,.metric,.analytics-card,.permission-shop,.login-card{background:#0d1d31}.toast{background:#0f273f}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes card-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-up{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes toast-in{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
.login-body { display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 70% 0,#163a61 0,transparent 30rem),#07111f; }.login-card { width:min(100%,420px); padding:34px; border:1px solid #21466f; border-radius:16px; background:rgba(13,29,49,.95); box-shadow:0 24px 80px rgba(0,0,0,.26); }.login-mark { display:grid; place-items:center; width:42px; height:42px; margin-bottom:22px; border-radius:12px; background:#1c68b4; font-size:.85rem; font-weight:800; }.login-card h1 { margin-bottom:10px; }.login-hint { color:#9eb0c7; margin-bottom:24px; }.login-card form { display:grid; gap:14px; }.login-card label { display:grid; gap:7px; color:#b8cbe0; font-size:.85rem; }.login-card input { width:100%; border:1px solid #285078; border-radius:8px; background:#071725; color:#fff; padding:11px 12px; font:inherit; }.login-card input:focus { outline:2px solid #347fc7; border-color:transparent; }.login-card form button { margin-top:4px; border:1px solid #3f75b8; border-radius:8px; background:#1d5da4; color:#fff; padding:11px; }.login-card small { display:block; margin-top:20px; color:#7190ae; line-height:1.5; }.login-card #login-error { min-height:1.2em; color:#ffb1b9; font-size:.85rem; }