:root { --sidebar-width:246px; --ink:#20232a; --muted:#747783; --line:#e9e9ed; --surface:#fff; --canvas:#f8f8fa; --accent:#7357e8; --accent-soft:#f0edff; --shadow:0 12px 35px rgba(25, 25, 35, .055); }
* { box-sizing:border-box; }
body { margin:0; background:var(--canvas); color:var(--ink); font-family:"Noto Sans SC", -apple-system, BlinkMacSystemFont, sans-serif; }
button, input, select { font:inherit; } button { cursor:pointer; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:var(--sidebar-width) minmax(0, 1fr); position:relative; transition:grid-template-columns .12s ease; }
.app-shell.sidebar-collapsed { grid-template-columns:0 minmax(0, 1fr); }
.sidebar { background:#202127; color:#e8e8eb; padding:27px 16px 21px; display:flex; flex-direction:column; min-height:100vh; min-width:0; overflow:hidden; transition:padding .22s ease, opacity .16s ease, visibility .16s ease; }
.app-shell.sidebar-collapsed .sidebar { visibility:hidden; opacity:0; padding-left:0; padding-right:0; pointer-events:none; }
.sidebar-resizer { position:fixed; top:0; bottom:0; left:var(--sidebar-width); z-index:19; width:10px; transform:translateX(-5px); cursor:col-resize; touch-action:none; outline:0; }
.sidebar-resizer::after { content:""; position:absolute; inset:0 4px; border-radius:999px; background:transparent; transition:background .16s ease; }
.sidebar-resizer:hover::after,.sidebar-resizer:focus-visible::after { background:var(--accent); }
.app-shell.sidebar-collapsed .sidebar-resizer { display:none; }
body.is-resizing-sidebar,body.is-resizing-sidebar * { cursor:col-resize !important; user-select:none !important; }
.sidebar-toggle { position:fixed; top:50%; left:var(--sidebar-width); z-index:20; transform:translate(0, -50%); width:30px; height:48px; border:1px solid #d9d9e1; border-radius:0 9px 9px 0; background:#fff; color:#656675; box-shadow:0 5px 16px rgba(24,25,34,.12); font-size:25px; font-family:Arial, sans-serif; line-height:1; padding:0 0 3px; transition:left .12s ease, background .16s ease, color .16s ease; }
.sidebar-toggle:hover { background:#f4f2ff; color:var(--accent); }
.app-shell.sidebar-collapsed .sidebar-toggle { left:0; border-radius:0 9px 9px 0; }
.brand { display:flex; align-items:center; gap:10px; padding:0 9px 28px; color:#fff; text-decoration:none; font-weight:700; letter-spacing:.2px; }
.brand-mark { display:grid; place-items:center; width:27px; height:27px; border-radius:8px; background:var(--accent); font-family:"DM Mono"; font-size:18px; }
.add-store-button,.manage-group-button { background:transparent; color:#fff; border:1px solid #53545b; border-radius:8px; padding:10px 12px; text-align:left; font-size:14px; transition:.16s; }.add-store-button:hover,.manage-group-button:hover { background:#303137; border-color:#72737a; }.manage-group-button { margin-top:8px; color:#d7d7de; font-size:13px; }
.sidebar-label { color:#8e8f97; font-size:11px; letter-spacing:1.1px; margin:27px 9px 9px; }.store-list { display:grid; gap:3px; }.store-group { display:grid; gap:2px; }.store-group-head { width:100%; min-width:0; padding:7px 5px 7px 6px; border-radius:7px; background:transparent; color:#e1e1e8; display:grid; grid-template-columns:22px minmax(0,1fr) auto 22px 22px; gap:4px; align-items:center; cursor:pointer; }.store-group-head:hover { background:#2d2e34; }.store-group-head small { color:#8e8f97; font-family:"DM Mono"; padding:0 3px; }.store-group-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }.group-icon-button { appearance:none; border:0; outline:0; width:22px; height:22px; padding:0; background:none; color:#a9abb5; display:grid; place-items:center; line-height:1; box-shadow:none; }.group-icon-button svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }.group-icon-button:hover { background:none; color:#fff; }.group-icon-button:focus-visible { color:#d2cbff; }.group-toggle { color:#b5b1dc; transition:transform .16s ease; }.group-toggle svg { width:16px; height:16px; }.group-toggle.collapsed { transform:rotate(-90deg); }.danger-icon:hover,.danger-icon:focus-visible { color:#ff898e; }.store-group-items { display:grid; gap:2px; padding-left:13px; border-left:1px solid #3a3b42; margin-left:15px; }.store-entry { width:100%; min-width:0; display:flex; align-items:center; gap:2px; }.store-entry.dragging { opacity:.45; }.store-entry.drag-over .store-item { background:#302d3c; box-shadow:inset 3px 0 0 var(--accent); color:#fff; }.store-item { min-width:0; flex:1; border:0; padding:10px 9px; border-radius:7px; background:transparent; color:#bfc0c5; display:flex; gap:10px; align-items:center; text-align:left; overflow:hidden; }.store-item[draggable="true"] { cursor:grab; }.store-item[draggable="true"]:active { cursor:grabbing; }.store-entry:hover .store-item { background:#2d2e34; color:#fff; }.store-entry.active .store-item { background:#383541; color:#fff; }.store-delete-button { flex:0 0 22px; color:#858791; opacity:.78; }.store-entry:hover .store-delete-button,.store-entry.active .store-delete-button { opacity:1; }.store-symbol { color:#aaa6c7; font-size:13px; }.store-item-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.sidebar-footer { color:#85868d; font-size:12px; margin-top:auto; padding:12px 9px 0; }.status-dot { width:7px;height:7px;background:#52bd86;display:inline-block;border-radius:50%;margin-right:5px; }
.content { max-width:1470px; width:100%; padding:40px clamp(24px, 5vw, 74px) 64px; margin:0 auto; }.topbar { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:32px; gap:16px; }.eyebrow { color:#92939c; font-family:"DM Mono", monospace; font-size:10px; letter-spacing:1px; margin:0 0 7px; }.topbar h1 { font-size:28px; letter-spacing:-.7px; margin:0; }.header-actions { display:flex; align-items:center; gap:9px; }.store-updated-at { color:#8e9099; font-size:12px; white-space:nowrap; margin-right:2px; }.button { border:1px solid transparent; border-radius:8px; padding:9px 14px; font-size:13px; font-weight:600; transition:.16s; }.button.primary { background:var(--accent); color:#fff; box-shadow:0 3px 9px rgba(115,87,232,.22); }.button.primary:hover { background:#6548d8; }.button.secondary { background:#fff; border-color:#dedee4; color:#4d4e57; }.button.secondary:hover { border-color:#b8b8c2; }.button.danger { background:#d94a50; color:#fff; box-shadow:0 3px 9px rgba(217,74,80,.18); }.button.danger:hover:not(:disabled) { background:#c83b41; }.button.danger:disabled { cursor:not-allowed; background:#d9d9df; color:#92939b; box-shadow:none; }.button span { margin-left:5px; }.hidden { display:none !important; }
.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:17px; }.stat-grid.has-click-rate { grid-template-columns:repeat(4,1fr); }.stat-card,.chart-card,.panel { background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:10px; }.stat-card { padding:19px 20px 17px; }.stat-card span,.stat-card small { display:block; color:var(--muted); font-size:12px; }.stat-card-head { display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:16px; }.stat-card strong { display:block; font-family:"DM Mono", monospace; font-size:27px; margin:7px 0 3px; font-weight:500; }.stat-card small { color:#999ba4; }.average-range-control { display:flex; align-items:center; gap:3px; }.average-range-control button { border:1px solid #dedee4; background:#fff; color:#8c8d96; border-radius:999px; padding:3px 6px; font-size:10px; line-height:1.2; }.average-range-control button:hover { color:var(--accent); border-color:#cfc8f7; }.average-range-control button.active { color:#fff; background:var(--accent); border-color:var(--accent); }
.chart-card { padding:23px 25px 17px; margin-bottom:17px; }.section-head { display:flex; justify-content:space-between; align-items:start; gap:14px; }.section-head h2 { font-size:17px; margin:0; letter-spacing:-.25px; }.chart-controls { display:grid; justify-items:end; gap:9px; }.metric-tabs { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }.metric-tabs button { border:1px solid #dedee4; background:#fff; color:#686a75; border-radius:999px; padding:6px 10px; font-size:12px; transition:.16s; }.metric-tabs button:hover { color:var(--accent); border-color:#cfc8f7; }.metric-tabs button.active { color:#fff; background:var(--accent); border-color:var(--accent); box-shadow:0 3px 9px rgba(115,87,232,.18); }.range-control { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; align-items:center; color:#9697a0; font-size:12px; }.range-control select,.custom-date-range input { border:1px solid #dedee4; background:#fff; color:#555661; border-radius:6px; font-size:12px; padding:6px 8px; }.range-control select { padding-right:23px; }.custom-date-range { display:flex; align-items:center; gap:4px; }.custom-date-range input { width:118px; }.chart-wrap { height:312px; padding-top:19px; position:relative; }.chart-placeholder { position:absolute; inset:19px 0 0; display:grid; place-items:center; color:#a1a2aa; font-size:13px; }.chart-legend { display:flex; flex-wrap:wrap; gap:8px; padding-top:10px; }.legend-item { --legend-color:var(--accent); border:1px solid #e2e2e8; background:#fff; color:#555661; border-radius:999px; display:flex; align-items:center; gap:7px; padding:6px 10px; font-size:12px; transition:.16s; }.legend-item:hover { border-color:#cac5ec; color:#343641; }.legend-state { width:15px; height:15px; border-radius:4px; border:1.5px solid #c8c9d1; display:inline-block; position:relative; flex:0 0 auto; }.legend-item.chart-mode-checked .legend-state { border-color:var(--legend-color); background:var(--legend-color); }.legend-item.chart-mode-checked .legend-state::after { content:""; position:absolute; left:4px; top:1px; width:4px; height:8px; border:solid #fff; border-width:0 1.5px 1.5px 0; transform:rotate(45deg); }.legend-item.chart-mode-hidden { color:#a1a2aa; background:#fafafa; }.legend-item.chart-mode-hidden .legend-state { background:#fff; }.legend-item.chart-mode-muted { color:rgba(95,98,109,.65); background:#f8f8fa; }.legend-item.chart-mode-muted .legend-state { width:14px; height:14px; border-radius:50%; background:rgba(145,148,160,.45); border-color:rgba(145,148,160,.25); }
.workspace-grid { display:grid; grid-template-columns:minmax(340px,.9fr) minmax(420px,1.1fr); gap:17px; }.panel { min-width:0; padding:21px 22px; }.compact { margin-bottom:15px; }.text-button { padding:3px 0; border:0; color:var(--accent); background:transparent; font-size:13px; font-weight:600; }.text-button:hover { color:#5538c9; }
.panel-search { width:100%; border:1px solid #dedee4; background:#fff; color:#44464f; border-radius:7px; padding:8px 10px; font-size:12px; outline:none; margin:-2px 0 13px; }.panel-search:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }.link-list { display:grid; gap:8px; max-height:532px; overflow-y:auto; padding-right:4px; }.link-row { padding:11px 0; border-bottom:1px solid #f0f0f2; display:grid; grid-template-columns:16px auto 10px minmax(0,1fr) auto; gap:10px; align-items:center; }.link-row:last-child { border:0; }.link-row.dragging { opacity:.48; }.link-row.drag-over { background:#faf9ff; box-shadow:inset 3px 0 0 var(--accent); }.drag-handle { color:#b8b9c1; cursor:grab; user-select:none; touch-action:none; font-size:15px; line-height:1; text-align:center; }.drag-handle:active { cursor:grabbing; }.toggle { appearance:none; width:17px;height:17px;border:1px solid #cbccd2;border-radius:4px;margin:0; position:relative; }.toggle:checked { background:var(--accent);border-color:var(--accent); }.toggle:checked::after { content:""; position:absolute; left:5px; top:2px; width:4px;height:8px; border:solid white; border-width:0 1.5px 1.5px 0; transform:rotate(45deg); }.color-dot { width:9px;height:9px;border-radius:50%; }.link-main { min-width:0; }.link-name { font-size:13px; color:#373840; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.link-url { display:block; color:#999aa3; font-size:11px; margin-top:2px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.row-actions { display:flex; gap:7px; }.mini-button { background:none;border:0;color:#9b9ca5;padding:2px;font-size:12px; }.mini-button:hover { color:var(--accent); }.empty-list { color:#a2a3ab;font-size:13px;padding:17px 0;text-align:center; }
.records-scroll { max-height:532px; overflow:auto; } table { width:100%; border-collapse:collapse; font-size:12px; } th { color:#9697a0; font-weight:500; text-align:left; padding:0 8px 9px; border-bottom:1px solid #ebebef; } td { color:#41424b; padding:10px 8px; border-bottom:1px solid #f1f1f3; } td:last-child, th:last-child { text-align:right; }.record-panel table { table-layout:fixed; }.record-panel th,.record-panel td { width:33.333%; }.record-panel th:nth-child(2),.record-panel td:nth-child(2) { text-align:center; }.order-cell { font-family:"DM Mono"; font-size:13px; }.empty-record { text-align:center; color:#a2a3ab; padding:25px; }
.empty-state { background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:94px 22px; text-align:center; }.empty-icon { color:var(--accent); font-size:35px; }.empty-state h2 { margin:15px 0 7px; font-size:19px; }.empty-state p { color:var(--muted); font-size:13px; margin:0 0 21px; }
dialog { border:0; padding:0; border-radius:12px; width:min(440px,calc(100vw - 32px)); box-shadow:0 20px 65px rgba(0,0,0,.22); } dialog::backdrop { background:rgba(25,25,31,.35); backdrop-filter:blur(2px); }.modal form { padding:23px; }.modal header { display:flex; align-items:center; justify-content:space-between; margin-bottom:21px; }.modal h2 { margin:0; font-size:18px; }.modal label,.color-field { color:#50515a; display:grid; gap:7px; font-size:12px; font-weight:600; margin:14px 0; }.modal label small { color:#999aa3; font-weight:400; line-height:1.5; }.modal input,.modal select { width:100%; padding:10px 11px; border:1px solid #dedee5; border-radius:7px; outline:none; color:#30313a; background:#fff; font-size:13px; }.modal input:focus,.modal select:focus { border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft); }.color-picker { display:flex; align-items:center; gap:10px; }.modal input[type=color] { padding:3px;width:42px;height:34px; cursor:pointer; }.color-presets { display:flex; flex-wrap:wrap; gap:7px; }.color-presets button { width:23px; height:23px; border-radius:50%; border:2px solid transparent; padding:0; background:var(--swatch); box-shadow:0 0 0 1px rgba(0,0,0,.09); }.color-presets button:hover,.color-presets button.active { border-color:#fff; box-shadow:0 0 0 2px var(--swatch); }.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:23px; }
.group-editor-actions { display:flex; justify-content:flex-end; margin:-4px 0 15px; }.group-list { display:grid; gap:8px; max-height:260px; overflow:auto; }.group-row { border:1px solid #ececf1; border-radius:8px; padding:10px 11px; display:flex; justify-content:space-between; align-items:center; gap:10px; }.group-row strong { display:block; color:#363740; font-size:13px; }.group-row span { display:block; color:#999aa3; font-size:11px; margin-top:2px; }.group-row-actions { display:flex; align-items:center; gap:7px; flex:0 0 auto; }.danger-tip strong { color:#c83b41; }.danger-modal .modal-actions { margin-top:20px; }.import-conflict-list { max-height:170px; overflow:auto; margin:0 0 14px; padding:9px 11px; border:1px solid #f0d8d9; background:#fff8f8; border-radius:8px; color:#6f5558; font-size:12px; line-height:1.55; }.import-conflict-list p { margin:0 0 6px; }.import-conflict-list ul { list-style:none; margin:0; padding:0; display:grid; gap:6px; }.import-conflict-list li { display:flex; justify-content:space-between; gap:10px; }.import-conflict-list li strong { color:#584447; font-weight:600; }.import-conflict-list li span { color:#a07277; text-align:right; }
@media (max-width:1100px) { .stat-grid.has-click-rate { grid-template-columns:repeat(2,1fr); } }
@media (max-width:850px) { .app-shell,.app-shell.sidebar-collapsed{grid-template-columns:1fr}.sidebar,.app-shell.sidebar-collapsed .sidebar{min-height:auto;padding:15px;position:sticky;top:0;z-index:5;flex-direction:row;align-items:center;gap:12px;visibility:visible;opacity:1;pointer-events:auto}.sidebar-toggle,.sidebar-resizer{display:none}.brand{padding:0}.sidebar-label,.sidebar-footer{display:none}.add-store-button{margin-left:auto}.manage-group-button{margin-top:0}.store-list{display:flex;overflow:auto}.store-group{display:flex;align-items:center}.store-group-head{width:auto;white-space:nowrap}.store-group-items{display:flex;border-left:0;margin-left:0;padding-left:0}.store-item{width:auto;white-space:nowrap}.content{padding:30px 18px}.workspace-grid{grid-template-columns:1fr}.chart-wrap{height:275px} }
@media (max-width:540px) { .topbar{display:block}.header-actions{margin-top:16px;flex-wrap:wrap}.section-head{display:grid}.chart-controls{justify-items:start}.metric-tabs{justify-content:flex-start}.record-toolbar{flex-wrap:wrap;justify-content:flex-start}.stat-grid,.stat-grid.has-click-rate{grid-template-columns:1fr}.chart-card,.panel{padding:18px}.chart-wrap{height:250px}.range-control label{display:none}.custom-date-range{width:100%;justify-content:flex-start}.link-row{grid-template-columns:16px auto 9px minmax(0,1fr)}.row-actions{grid-column:4}.records-scroll{max-height:360px} }
.record-toolbar { display:flex; align-items:center; gap:8px; }.record-toolbar label { color:#9697a0; font-size:12px; }.record-toolbar input { width:128px; border:1px solid #dedee4; background:#fff; color:#555661; border-radius:6px; padding:6px 8px; font-size:12px; }.record-toolbar .text-button { margin-left:4px; }.dialog-tip { color:#858690; font-size:12px; line-height:1.65; margin:0 0 13px; }.select-all { display:flex !important; align-items:center; grid-template-columns:none !important; gap:8px !important; padding-bottom:11px; border-bottom:1px solid #ececf0; }.select-all input,.export-link-option input { appearance:auto; width:16px !important; height:16px; padding:0 !important; accent-color:var(--accent); }.export-link-list { display:grid; max-height:228px; overflow:auto; }.export-link-option { display:flex !important; align-items:center; grid-template-columns:none !important; gap:9px !important; margin:0 !important; padding:10px 2px; border-bottom:1px solid #f0f0f3; color:#464751 !important; }.export-link-option:last-child { border:0; }.export-color { width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.quick-date-buttons { display:flex; gap:4px; }.quick-date-buttons button { border:1px solid #dedee4; background:#fff; color:#777883; padding:5px 7px; border-radius:5px; font-size:11px; white-space:nowrap; }.quick-date-buttons button:hover { color:var(--accent); border-color:#cfc8f7; }.quick-date-buttons button.active { color:#fff; background:var(--accent); border-color:var(--accent); }