:root { color-scheme: light; --ink:#182230; --muted:#667085; --line:#e4e7ec; --brand:#4f46e5; --brand-light:#eef2ff; --danger:#b42318; --sidebar-width:230px; }
* { box-sizing:border-box; }
body { margin:0; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:#f8fafc; }
a { color:inherit; text-decoration:none; }

.console-app { display:flex; min-height:100vh; }

.sidebar { width:var(--sidebar-width); background:#fff; border-right:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between; position:fixed; top:0; bottom:0; left:0; z-index:10; }
.sidebar-head { padding:20px 18px 16px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:16px; color:#0f172a; }
.brand img { width:32px; height:32px; border-radius:8px; }
.role-badge { display:inline-block; margin-top:6px; font-size:11px; font-weight:600; padding:2px 8px; border-radius:12px; background:var(--brand-light); color:var(--brand); }

.sidebar-nav { padding:16px 10px; flex:1; overflow-y:auto; }
.nav-group-title { font-size:11px; font-weight:700; color:#94a3b8; letter-spacing:.05em; text-transform:uppercase; padding:10px 10px 6px; }
.nav-group-title:not(:first-child) { margin-top:12px; }
.nav-item { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; font-size:13.5px; font-weight:550; color:#475569; transition:all .15s ease; margin-bottom:3px; }
.nav-item:hover { background:#f1f5f9; color:#0f172a; }
.nav-item.active { background:var(--brand-light); color:var(--brand); font-weight:650; }
.nav-icon { width:18px; text-align:center; font-style:normal; font-size:15px; }

.sidebar-foot { padding:14px 16px; border-top:1px solid var(--line); background:#fafafa; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.user-card-inner { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.user-avatar { width:34px; height:34px; border-radius:10px; background:#eef2ff; color:#4f46e5; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; border:1px solid #c7d2fe; flex-shrink:0; }
.user-meta { flex:1; min-width:0; }
.user-name { font-size:13.5px; font-weight:700; color:#0f172a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-role { font-size:11px; color:#64748b; margin-top:1px; }

.logout-icon-btn { background:transparent; border:none; color:#64748b; width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.15s ease; flex-shrink:0; padding:0; }
.logout-icon-btn:hover { background:#fef2f2; color:#ef4444; }
.sidebar-action-btn { background:transparent; border:none; color:#64748b; width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.15s ease; flex-shrink:0; padding:0; }
.sidebar-action-btn:hover { background:#eef2ff; color:#4f46e5; }

.main-wrapper { flex:1; margin-left:var(--sidebar-width); min-width:0; }
.main-topbar { height:60px; padding:0 32px; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:5; }
.page-title { font-size:18px; font-weight:700; margin:0; }

.container { width:100%; max-width:1160px; padding:30px 32px 60px; margin:0 auto; }
.auth-wrap { min-height:calc(100vh - 64px); display:grid; place-items:center; padding:32px 16px; }
.auth-card { width:min(430px,100%); }

.card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px; box-shadow:0 1px 3px rgba(15,23,42,.03); scroll-margin-top:80px; }
.card + .card { margin-top:20px; }
.title { margin:0 0 7px; font-size:25px; letter-spacing:-.02em; }
.subtitle,.muted { color:var(--muted); }
.subtitle { margin:0 0 24px; line-height:1.6; }
.field { margin:15px 0; }
.field label { display:block; font-size:13px; font-weight:650; margin-bottom:7px; }
input,select { width:100%; height:40px; border:1px solid #cbd5e1; border-radius:8px; padding:0 12px; background:#fff; color:var(--ink); font-size:14px; }
input:focus { outline:3px solid #eef2ff; border-color:#818cf8; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; height:38px; border:0; border-radius:8px; padding:0 14px; font-size:13.5px; font-weight:600; cursor:pointer; background:#f1f5f9; color:#334155; transition:background .15s ease; }
.btn:hover { background:#e2e8f0; }
.btn-primary { background:var(--brand); color:#fff; }
.btn-primary:hover { background:#4338ca; }
.btn-danger { background:#fef2f2; color:var(--danger); }
.btn-danger:hover { background:#fee2e2; }
.btn-small { height:32px; padding:0 10px; font-size:12px; }
.btn-block { width:100%; }
.flash { margin-bottom:16px; border-radius:10px; padding:12px 16px; font-size:14px; background:#ecfdf3; color:#027a48; border:1px solid #abf5d1; }
.flash.error { background:#fef3f2; color:var(--danger); border-color:#fecdca; }

/* 浮动气泡卡片提示 (Toast Notification) */
.toast-container { position:fixed; top:20px; left:calc(50% + var(--sidebar-width) / 2); transform:translateX(-50%); z-index:9999; display:flex; flex-direction:column; align-items:center; gap:10px; pointer-events:none; width:auto; max-width:min(520px, calc(100vw - 32px)); }
.toast-bubble { pointer-events:auto; display:flex; align-items:center; gap:12px; min-width:260px; max-width:100%; padding:12px 18px; border-radius:12px; font-size:14px; font-weight:550; line-height:1.4; background:#ffffff; box-shadow:0 10px 28px -4px rgba(15,23,42,0.12), 0 4px 10px -2px rgba(15,23,42,0.05); border:1px solid #e2e8f0; transition:opacity 0.25s ease, transform 0.25s ease; animation:toastSlideIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.toast-bubble.toast-hiding { opacity:0; transform:translateY(-16px) scale(0.95); pointer-events:none; }
@keyframes toastSlideIn { 0% { opacity:0; transform:translateY(-24px) scale(0.94); } 100% { opacity:1; transform:translateY(0) scale(1); } }
.toast-bubble.toast-success { background:#f0fdf4; border-color:#bbf7d0; color:#166534; }
.toast-bubble.toast-success .toast-icon { color:#16a34a; }
.toast-bubble.toast-error { background:#fef2f2; border-color:#fecaca; color:#991b1b; }
.toast-bubble.toast-error .toast-icon { color:#dc2626; }
.toast-bubble.toast-warning { background:#fffbeb; border-color:#fde68a; color:#92400e; }
.toast-bubble.toast-warning .toast-icon { color:#d97706; }
.toast-bubble.toast-info { background:#eef2ff; border-color:#c7d2fe; color:#3730a3; }
.toast-bubble.toast-info .toast-icon { color:#4f46e5; }
.toast-icon { flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.toast-content { flex:1; word-break:break-word; }
.toast-close { flex-shrink:0; background:transparent; border:none; font-size:18px; line-height:1; width:22px; height:22px; cursor:pointer; color:currentColor; opacity:0.5; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:opacity 0.15s, background 0.15s; margin-left:6px; }
.toast-close:hover { opacity:1; background:rgba(0,0,0,0.06); }

/* 自定义确认弹窗 (Custom Confirmation Modal) */
.modal-backdrop { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(15,23,42,0.5); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); z-index:10000; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; transition:opacity 0.2s ease; }
.modal-backdrop.modal-open { opacity:1; }
.modal-card { background:#ffffff; border-radius:16px; border:1px solid #e2e8f0; box-shadow:0 20px 30px -6px rgba(15,23,42,0.16), 0 10px 15px -4px rgba(15,23,42,0.08); width:100%; max-width:440px; padding:24px; transform:scale(0.94) translateY(8px); transition:transform 0.22s cubic-bezier(0.16, 1, 0.3, 1); }
.modal-backdrop.modal-open .modal-card { transform:scale(1) translateY(0); }
.modal-header { display:flex; align-items:flex-start; gap:16px; }
.modal-icon-wrap { width:44px; height:44px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.modal-icon-wrap.danger { background:#fef2f2; color:#ef4444; border:1px solid #fecaca; }
.modal-icon-wrap.warning { background:#fffbeb; color:#f59e0b; border:1px solid #fde68a; }
.modal-icon-wrap.primary { background:#eef2ff; color:#4f46e5; border:1px solid #c7d2fe; }
.modal-title { margin:0 0 6px; font-size:17px; font-weight:700; color:#0f172a; }
.modal-desc { margin:0; font-size:14px; line-height:1.5; color:#64748b; }
.modal-footer { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:24px; }
.modal-footer .btn { min-width:80px; height:38px; padding:0 16px; font-size:14px; border-radius:8px; }
.btn-secondary { background:#f8fafc; border:1px solid #cbd5e1; color:#475569; }
.btn-secondary:hover { background:#f1f5f9; color:#0f172a; }

.page-head { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:24px; }
.page-head h1 { margin:0 0 6px; font-size:26px; }
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:16px; margin-bottom:20px; align-items:stretch; }
.stats > .card, .grid-2 > .card, .dashboard-charts-grid > .card { margin-top:0; }
.stat { display:flex; flex-direction:column; justify-content:space-between; height:100%; }
.stat strong { display:block; font-size:28px; margin-top:8px; color:#0f172a; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:stretch; }
.grid-2 > .card { display:flex; flex-direction:column; justify-content:flex-start; height:100%; }

.card h2 { margin:0 0 5px; font-size:17px; }
.row { display:flex; align-items:center; gap:10px; }
.between { justify-content:space-between; }
.stack { display:flex; flex-direction:column; gap:10px; }
.key { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:#f1f5f9; border:1px solid #e2e8f0; border-radius:6px; padding:4px 10px; font-size:12.5px; color:#334155; display:inline-block; letter-spacing:0.03em; max-width:100%; vertical-align:middle; }
.secret { background:#0f172a; color:#f8fafc; padding:16px; border-radius:10px; overflow-wrap:anywhere; font-family:ui-monospace,SFMono-Regular,monospace; font-size:13px; }
.badge { display:inline-flex; padding:3px 9px; border-radius:20px; font-size:12px; font-weight:600; background:#ecfdf3; color:#027a48; }
.badge.off { background:#fef3f2; color:#b42318; }
.notice { padding:14px 16px; border:1px solid #fde68a; background:#fffbeb; color:#92400e; border-radius:10px; margin-bottom:20px; font-size:14px; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; font-size:13.5px; table-layout:fixed; }
th,td { text-align:left; padding:12px 12px; border-bottom:1px solid #f1f5f9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
th { color:#64748b; font-weight:600; background:#f8fafc; }
.inline-form { display:flex; align-items:center; gap:7px; }
.inline-form input { width:auto; min-width:260px; height:34px; }
.inline-form input[type=number] { min-width:70px; width:80px; }
.inline-form input[type=date] { min-width:130px; width:140px; }
.inline-form input[type=checkbox] { min-width:auto; width:17px; height:17px; }
.code { margin:12px 0 0; background:#0f172a; color:#cbd5e1; padding:14px; border-radius:8px; overflow:auto; font:12.5px/1.6 ui-monospace,SFMono-Regular,monospace; }
.chart-container { position:relative; width:100%; }
.chart-tooltip { position:absolute; display:none; pointer-events:none; background:rgba(255,255,255,0.96); color:#0f172a; padding:10px 14px; border-radius:10px; font-size:12px; line-height:1.6; border:1px solid #e2e8f0; box-shadow:0 10px 25px -5px rgba(15,23,42,0.12),0 4px 10px -2px rgba(15,23,42,0.05); z-index:20; backdrop-filter:blur(8px); white-space:nowrap; transition:left 0.06s ease, top 0.06s ease, opacity 0.1s ease, transform 0.1s ease; opacity:0; transform:translateY(4px); }
.chart-tooltip.active { display:block; opacity:1; transform:translateY(0); }
.chart-tooltip .tt-title { font-weight:700; margin-bottom:5px; color:#475569; border-bottom:1px solid #f1f5f9; padding-bottom:4px; font-size:12.5px; }
.chart-tooltip .tt-row { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:3px; color:#475569; }
.chart-tooltip .tt-row strong { color:#0f172a; }
.chart-tooltip .tt-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.point-circle { transition: r .15s ease, stroke-width .15s ease; }

/* 开关与配置列表布局 */
.settings-list { display: flex; flex-direction: column; margin: 16px 0 24px 0; }
.setting-item { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--line); gap: 16px; }
.setting-item:last-child { border-bottom: none; }
.setting-info { display: flex; flex-direction: column; gap: 4px; }
.setting-title { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.setting-desc { font-size: 13px; color: var(--muted); }
.setting-control { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* iOS 风格平滑切换开关 (Switch) */
.switch { position: relative; display: inline-block; width: 46px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; margin: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e1; transition: background-color .2s ease, box-shadow .2s ease; border-radius: 24px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #ffffff; transition: transform .2s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 50%; box-shadow: 0 1px 3px rgba(15,23,42,0.2); }
.switch input:checked + .slider { background-color: var(--brand); }
.switch input:focus-visible + .slider { box-shadow: 0 0 0 2px var(--brand-light), 0 0 0 4px var(--brand); }
.switch input:checked + .slider:before { transform: translateX(22px); }

/* 表格小尺寸开关 */
.switch-sm { width: 38px; height: 20px; }
.switch-sm .slider:before { height: 14px; width: 14px; left: 3px; bottom: 3px; }
.switch-sm input:checked + .slider:before { transform: translateX(18px); }


/* 周期切换按钮组 */
.period-tabs { display: inline-flex; background: #f1f5f9; border-radius: 8px; padding: 3px; gap: 2px; border: 1px solid #e2e8f0; }
.period-tab { padding: 5px 12px; font-size: 12.5px; font-weight: 600; color: #64748b; border-radius: 6px; text-decoration: none; transition: all .15s ease; cursor: pointer; border: none; background: transparent; }
.period-tab:hover { color: #0f172a; }
.period-tab.active { background: #ffffff; color: var(--brand); box-shadow: 0 1px 3px rgba(15,23,42,0.08); font-weight: 700; }

/* 动态图表网格双栏 */
.dashboard-charts-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; margin-top: 20px; align-items: start; }

/* 饼图样式 */
.pie-wrapper { display: flex; flex-direction: column; gap: 16px; align-items: center; justify-content: center; padding: 6px 0; }
.pie-svg-box { position: relative; width: 170px; height: 170px; flex-shrink: 0; }
.pie-center-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.pie-center-val { font-size: 22px; font-weight: 800; color: #0f172a; line-height: 1; }
.pie-center-lbl { font-size: 11px; color: #64748b; margin-top: 3px; }

.pie-slice { transition: opacity 0.2s ease, transform 0.2s ease; cursor: pointer; transform-origin: 100px 100px; }
.pie-slice:hover { opacity: 0.85; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15)); }

/* 饼图下方平铺图例 (Pill Tags Legend Grid) */
.pie-pill-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; margin-top: 12px; width: 100%; max-height: 200px; overflow-y: auto; padding: 4px; }
.pie-pill-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 10px; border-radius: 20px; background: #f8fafc; border: 1px solid #f1f5f9; transition: all .15s ease; }
.pie-pill-item:hover { background: #f1f5f9; border-color: #cbd5e1; }
.pie-pill-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pie-pill-name { font-weight: 550; color: #334155; }
.pie-pill-val { font-weight: 700; color: #0f172a; margin-left: 2px; }

/* 柱状排行榜 (Top 10 Ranking Bars) */
.ranking-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.ranking-item { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.ranking-head { display: flex; justify-content: space-between; align-items: center; }
.ranking-name { font-weight: 600; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.ranking-val { font-weight: 700; color: var(--brand); font-family: ui-monospace, SFMono-Regular, monospace; font-size: 12px; }
.ranking-bar-bg { width: 100%; height: 10px; background: #f1f5f9; border-radius: 6px; overflow: hidden; position: relative; }
.ranking-bar-fill { height: 100%; background: linear-gradient(90deg, #6366f1, #4f46e5); border-radius: 6px; transition: width 0.4s ease; }

@media(max-width:840px){
  .console-app { flex-direction:column; }
  .sidebar { width:100%; position:relative; height:auto; border-right:0; border-bottom:1px solid var(--line); }
  .main-wrapper { margin-left:0; }
  .main-topbar { padding:0 16px; }
  .toast-container { left:50%; }
  .stats,.grid-2 { grid-template-columns:1fr; }
  .container { padding:16px; }
}