:root{--bg:#f5f7fb;--panel:#fff;--panel-soft:#f9fbff;--text:#13213a;--muted:#64748b;--line:#dbe3ef;--blue:#2368f2;--blue-soft:#e8f0ff;--green:#18b981;--green-soft:#ddf8ed;--violet:#8b5cf6;--violet-soft:#f0eaff;--orange:#f28b25;--orange-soft:#fff0df;--cyan:#1aa7bd;--cyan-soft:#e3f8fb;--shadow:0 18px 48px #2238621a}*{box-sizing:border-box}html{background:radial-gradient(circle at 12% 8%, #2368f217, transparent 24rem), linear-gradient(180deg, #fbfcff 0%, var(--bg) 32rem);min-width:320px}body{color:var(--text);margin:0;font-family:Aptos Display,Aptos,Segoe UI,sans-serif}button,input,select{font:inherit}button{cursor:pointer}.dashboard-shell{width:min(1500px,100% - 32px);margin:0 auto;padding:24px 0 32px}.dashboard-header{justify-content:space-between;align-items:center;gap:24px;margin-bottom:18px;display:flex}.eyebrow,.subtle,.panel-heading p,.kpi-card em{color:var(--muted)}.eyebrow{letter-spacing:0;text-transform:uppercase;margin:0 0 4px;font-size:.78rem;font-weight:800}h1,h2,p{margin:0}h1{font-size:clamp(1.7rem,3vw,2.35rem);line-height:1.05}h2{font-size:1rem;line-height:1.2}.subtle{margin-top:6px;font-size:.98rem}.header-actions,.filter-bar,.date-pill,.icon-button,.search-field,.reset-button{align-items:center;display:flex}.header-actions{flex-wrap:wrap;justify-content:flex-end;gap:10px}.status-pill,.icon-button,.reset-button{border:1px solid var(--line);background:var(--panel);min-height:42px;color:var(--text);border-radius:8px;box-shadow:0 8px 20px #1e2c480d}.status-pill{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;min-width:220px;padding:8px 14px;display:grid}.status-pill svg{color:var(--blue)}.status-pill span{gap:2px;min-width:0;display:grid}.status-pill small{color:var(--muted);text-transform:uppercase;letter-spacing:0;font-size:.72rem;font-weight:800}.status-pill strong{color:var(--text);text-overflow:ellipsis;white-space:nowrap;font-size:.82rem;font-weight:800;overflow:hidden}.icon-button,.reset-button{gap:8px;padding:0 16px;font-weight:800}.icon-button:disabled{cursor:wait;opacity:.72}.filter-toggle-button svg{color:var(--blue)}.header-menu{position:relative}.header-menu-popover{z-index:25;border:1px solid var(--line);background:var(--panel);border-radius:10px;gap:6px;min-width:180px;padding:8px;display:grid;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 18px 48px #22386229}.header-menu-popover small{color:var(--muted);text-transform:uppercase;padding:4px 6px;font-size:.72rem;font-weight:900}.header-menu-popover button{color:var(--text);text-align:left;background:0 0;border:0;border-radius:8px;padding:9px 8px;font-weight:850}.header-menu-popover button:hover,.header-menu-popover button:focus-visible{background:var(--blue-soft)}.header-menu-popover button span{align-items:center;gap:8px;display:flex}.header-menu-popover svg{color:var(--blue)}.spin{animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.filter-bar{grid-template-columns:minmax(260px,1.45fr) minmax(210px,1fr) repeat(6,minmax(140px,.8fr)) auto;gap:10px;margin-bottom:14px;display:grid}.search-field,.metric-toggle,.checkbox-filter,.select-filter{border:1px solid var(--line);background:#ffffffeb;border-radius:8px;min-width:0;min-height:48px;box-shadow:0 8px 24px #1e2c480a}.search-field{gap:10px;padding:0 14px}.search-field svg{color:var(--muted);flex:none}.search-field input,.select-filter select{min-width:0;color:var(--text);background:0 0;border:0;outline:0}.search-field input{width:100%}.select-filter{justify-content:space-between;align-items:center;gap:8px;padding:7px 12px;display:flex;position:relative}.select-filter:after{border-right:1.5px solid var(--text);border-bottom:1.5px solid var(--text);content:"";pointer-events:none;flex:none;width:6px;height:6px;transform:rotate(45deg)translateY(-2px)}.checkbox-filter{margin:0;padding:0;position:relative}.checkbox-filter summary{cursor:pointer;justify-content:space-between;align-items:center;gap:8px;min-height:46px;padding:7px 12px;list-style:none;display:flex}.checkbox-filter summary::-webkit-details-marker{display:none}.checkbox-filter summary:after{border-right:1.5px solid var(--text);border-bottom:1.5px solid var(--text);content:"";flex:none;width:6px;height:6px;transition:transform .16s;transform:rotate(45deg)translateY(-2px)}.checkbox-filter[open] summary{border-bottom:1px solid var(--line);background:var(--panel-soft)}.checkbox-filter[open] summary:after{transform:rotate(225deg)translate(-1px,-1px)}.metric-toggle{grid-template-rows:auto auto;gap:5px;padding:6px 8px 7px;display:grid}.metric-toggle>span,.checkbox-filter summary span,.select-filter span{color:var(--muted);flex:none;font-size:.72rem;font-weight:800}.checkbox-filter summary strong{min-width:0;color:var(--blue);text-overflow:ellipsis;white-space:nowrap;margin-left:auto;font-size:.72rem;font-weight:900;overflow:hidden}.checkbox-list{z-index:20;border:1px solid var(--line);background:var(--panel);border-radius:8px;gap:2px;max-height:260px;padding:6px;display:grid;position:absolute;top:calc(100% + 6px);left:0;right:0;overflow:auto;box-shadow:0 18px 48px #22386229}.checkbox-list label{min-width:0;color:var(--text);border-radius:6px;align-items:center;gap:7px;padding:7px 6px;font-size:.78rem;font-weight:800;display:flex}.checkbox-list label:hover{background:var(--blue-soft)}.checkbox-list input{width:14px;height:14px;accent-color:var(--blue);flex:none}.checkbox-list label span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.metric-toggle>div{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;display:grid}.metric-toggle button{min-width:0;color:var(--muted);white-space:nowrap;background:0 0;border:0;border-radius:6px;padding:6px 7px;font-size:.78rem;font-weight:850}.metric-toggle button.active{background:var(--blue);color:#fff;box-shadow:0 6px 14px #2368f22e}.select-filter select{appearance:none;width:auto;color:var(--blue);text-align:right;text-overflow:ellipsis;white-space:nowrap;flex:auto;margin-left:auto;padding-right:0;font-size:.72rem;font-weight:900;overflow:hidden}.select-filter select option{color:var(--text)}.reset-button{justify-content:center}.reset-button span{background:var(--blue);color:#fff;border-radius:999px;place-items:center;min-width:22px;min-height:22px;font-size:.78rem;display:inline-grid}.notice{color:#7a4c00;background:#fff8e8;border:1px solid #f3c677;border-radius:8px;margin:0 0 14px;padding:12px 14px;font-weight:750}.kpi-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:12px;display:grid}.kpi-card{border:1px solid var(--line);background:var(--panel);min-width:0;min-height:132px;color:var(--text);text-align:left;box-shadow:var(--shadow);border-radius:8px;grid-template-columns:54px minmax(0,1fr);align-items:center;gap:14px;padding:18px;transition:transform .18s,border-color .18s,box-shadow .18s;display:grid}.kpi-card:hover,.bar-row:hover,.category-row:hover,.compact-rank button:hover,.mini-table tr:hover{transform:translateY(-1px)}.kpi-icon{border-radius:50%;place-items:center;width:54px;height:54px;display:grid}.kpi-card small,.kpi-card strong,.kpi-card em{display:block}.kpi-card small{font-size:.8rem;font-weight:800}.kpi-card strong{text-overflow:ellipsis;white-space:nowrap;margin-top:6px;font-size:1.45rem;line-height:1.15;overflow:hidden}.kpi-card em{margin-top:7px;font-size:.78rem;font-style:normal;font-weight:750}.kpi-card.blue .kpi-icon{background:var(--blue-soft);color:var(--blue)}.kpi-card.green .kpi-icon{background:var(--green-soft);color:var(--green)}.kpi-card.violet .kpi-icon{background:var(--violet-soft);color:var(--violet)}.kpi-card.orange .kpi-icon{background:var(--orange-soft);color:var(--orange)}.kpi-card.cyan .kpi-icon{background:var(--cyan-soft);color:var(--cyan)}.analytics-grid{grid-template-columns:1.1fr 1fr .95fr;gap:12px;display:grid}.panel,.transaction-panel{border:1px solid var(--line);min-width:0;box-shadow:var(--shadow);background:#fffffff0;border-radius:8px}.panel{min-height:228px;padding:14px}.trend-panel{grid-column:span 2}.top-rank-row{grid-column:1/-1;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;display:grid}.rank-panel{min-height:0;padding:14px}.rank-panel .panel-heading{margin-bottom:10px}.rank-panel .panel-heading h2{color:var(--text);text-overflow:ellipsis;white-space:nowrap;font-size:.86rem;overflow:hidden}.rank-panel .compact-rank{gap:6px}.rank-panel .compact-rank button{grid-template-columns:20px minmax(0,1fr) minmax(48px,auto);gap:5px 8px;padding:7px}.rank-panel .rank-index{grid-area:1/1/span 2}.rank-panel .rank-avatar{display:none}.rank-panel .rank-label{grid-area:1/2/auto/-1}.rank-panel .rank-bar{grid-area:2/2;height:7px}.rank-panel .compact-rank strong{color:var(--muted);text-align:right;grid-area:2/3;font-size:.74rem;line-height:1.1}.view-all-button{border:1px solid var(--line);background:var(--panel-soft);color:var(--blue);border-radius:8px;padding:7px 10px;font-size:.76rem;font-weight:900}.view-all-button:hover,.view-all-button:focus-visible{background:var(--blue-soft)}.icon-button.compact{justify-content:center;width:34px;min-height:34px;padding:0}.rank-modal-backdrop{z-index:30;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#13213a5c;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.rank-modal{border:1px solid var(--line);background:#fffffffa;border-radius:8px;grid-template-rows:auto minmax(0,1fr);width:min(720px,100%);max-height:min(720px,100vh - 40px);display:grid;overflow:hidden;box-shadow:0 30px 80px #13213a38}.rank-modal-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:flex-start;gap:16px;padding:16px;display:flex}.rank-modal-header p{color:var(--muted);margin-top:4px;font-size:.82rem;font-weight:800}.rank-modal-body{min-height:0;padding:12px 16px 16px;overflow:auto}.rank-modal-body .compact-rank button{grid-template-columns:32px 38px minmax(140px,1fr) minmax(110px,.85fr) 96px}.panel-heading{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.panel-heading.compact{align-items:center;margin-bottom:10px}.panel-heading span:not(.source-pill){border:1px solid var(--line);color:var(--muted);border-radius:8px;padding:8px 12px;font-size:.78rem;font-weight:800}.legend{color:var(--muted);flex-wrap:wrap;align-items:center;gap:10px;font-size:.78rem;font-weight:800;display:flex}.legend-line,.legend-bar{border-radius:999px;width:24px;height:4px}.legend-line{background:#35c7928a}.legend-bar{background:#2f7df6}.trend-period-select{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:8px;padding:7px 30px 7px 10px;font-size:.78rem;font-weight:900}.legend-note{border:1px solid var(--line);color:var(--muted);background:#f7faff;border-radius:999px;margin-left:auto;padding:5px 9px;font-size:.72rem;font-weight:900}.trend-chart{border-top:1px dashed var(--line);margin-top:10px;padding-top:10px}.trend-visual{border:1px solid var(--line);background:linear-gradient(180deg, #fffffffa, #fafcfffa), var(--panel);border-radius:8px;height:220px;position:relative;overflow:hidden}.trend-svg{pointer-events:none;width:100%;height:100%;display:block}.trend-grid-line{stroke:#64748b1c;stroke-width:1px}.trend-selected-band{fill:#2368f20b;stroke:#2368f21a}.trend-bar{filter:drop-shadow(0 10px 14px #2f7df61f)}.trend-average-polyline{opacity:.58}.trend-average-area{fill:url(#trend-average-area)}.trend-average-dot{fill:#fff;stroke:#35c792ad;stroke-width:2px}.trend-axis-label,.trend-month-label{fill:var(--muted);font-size:12px;font-weight:800}.trend-axis-label{letter-spacing:0}.trend-axis-title{font-size:11px;font-weight:900}.trend-month-label{font-size:11px}.trend-month-label.active{fill:var(--blue);font-weight:950}.trend-hitlayer{position:absolute;inset:0}.trend-hit{color:inherit;background:0 0;border:0;position:absolute;top:0;bottom:0;transform:translate(-50%)}.trend-hit:before{content:"";background:0 0;border-radius:10px;transition:background .16s;position:absolute;inset:10px 0 36px}.trend-hit:hover:before,.trend-hit:focus-visible:before,.trend-hit.active:before{background:#2368f20f}.trend-hit.active:before{box-shadow:inset 0 0 0 1px #2368f21f}.trend-tooltip{z-index:2;border:1px solid var(--line);opacity:0;pointer-events:none;background:#fffffffa;border-radius:10px;gap:6px;width:max-content;min-width:210px;max-width:250px;padding:11px 12px;transition:opacity .14s,translate .14s;display:grid;position:absolute;bottom:42px;left:50%;translate:-50% 8px;box-shadow:0 18px 36px #1e2c4829}.trend-hit:hover .trend-tooltip,.trend-hit:focus-visible .trend-tooltip,.trend-tooltip.visible{opacity:1;translate:-50%}.trend-tooltip strong{color:var(--text);font-size:.86rem;font-weight:900}.trend-tooltip em{color:var(--muted);justify-content:space-between;align-items:center;gap:12px;font-size:.74rem;font-style:normal;font-weight:800;display:flex}.trend-tooltip span{color:var(--text)}.bar-list,.category-list,.compact-rank,.insight-list{gap:8px;display:grid}.bar-row{color:var(--text);text-align:left;background:0 0;border:0;border-radius:8px;grid-template-columns:112px minmax(120px,1fr) 84px;align-items:center;gap:12px;padding:7px;display:grid}.bar-row.active,.compact-rank button.active{background:var(--blue-soft)}.bar-track,.rank-bar{background:#e8eef8;border-radius:999px;height:10px;overflow:hidden}.bar-track span,.rank-bar i{border-radius:inherit;background:linear-gradient(90deg, var(--blue), #58a5ff);height:100%;display:block}.bar-row span,.bar-row strong,.category-row,.compact-rank button,.mini-table,.transaction-table{font-size:.82rem}.category-panel{grid-template-columns:190px minmax(0,1fr);align-items:center;gap:18px;display:grid}.donut{width:172px;height:172px;box-shadow:inset 0 0 0 38px var(--panel);border-radius:50%;align-content:center;place-items:center;display:grid}.donut span,.donut small{text-align:center;display:block}.donut span{font-size:1.25rem;font-weight:900}.donut small{color:var(--muted);font-weight:800}.category-row,.compact-rank button{min-width:0;color:var(--text);background:0 0;border:0;border-radius:8px;padding:8px}.category-row{text-align:left;justify-content:space-between;gap:10px;display:flex}.category-row span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.compact-rank button{text-align:left;grid-template-columns:24px 36px minmax(72px,1fr) minmax(80px,.7fr) 78px;align-items:center;gap:10px;display:grid}.rank-index{color:var(--muted);font-weight:850}.rank-avatar{width:34px;height:34px;color:var(--blue);background:#eef4ff;border-radius:50%;place-items:center;font-size:.76rem;font-weight:900;display:grid}.rank-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mini-table,.transaction-table{border-collapse:collapse;width:100%}.mini-table th,.mini-table td,.transaction-table th,.transaction-table td{border-bottom:1px solid var(--line);text-align:left;padding:10px 8px}.mini-table th,.transaction-table th{color:var(--muted);font-size:.74rem;font-weight:900}.mini-table tr{cursor:pointer}.insight-card{border:1px solid var(--line);background:var(--panel-soft);border-radius:8px;grid-template-columns:30px minmax(0,1fr);gap:8px;padding:8px 10px;display:grid}.insight-card>span{background:var(--blue-soft);width:28px;height:28px;color:var(--blue);border-radius:50%;place-items:center;display:grid}.insight-card strong{margin-bottom:2px;font-size:.78rem;display:block}.insight-card p{color:var(--muted);font-size:.72rem;line-height:1.28}.transaction-panel{margin-top:12px;padding:16px}.transaction-panel .panel-heading{margin-bottom:12px}.transaction-tools{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px;display:flex}.transaction-panel p{color:var(--muted);margin-top:4px;font-size:.86rem;font-weight:750}.source-pill{text-transform:capitalize;border-radius:999px;padding:7px 11px;font-size:.78rem;font-weight:900}.source-pill.database{background:var(--green-soft);color:#08744e}.source-pill.sample{background:var(--orange-soft);color:#9c5512}.pager{border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:8px;align-items:center;gap:8px;padding:6px 10px;font-size:.78rem;font-weight:800;display:inline-flex}.pager button{border:1px solid var(--line);background:var(--panel-soft);width:30px;height:30px;color:var(--text);border-radius:8px;place-items:center;display:grid}.pager button:disabled{cursor:not-allowed;opacity:.45}.table-scroll{overflow-x:auto}.transaction-table{min-width:1180px}.transaction-table tbody tr:nth-child(odd){background:#fbfdff}.transaction-table td{vertical-align:top}.transaction-table td strong,.transaction-table td span{display:block}.transaction-table td span{color:var(--muted);margin-top:2px;font-size:.76rem}@media (max-width:1200px){.filter-bar,.kpi-grid,.analytics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.search-field,.trend-panel{grid-column:span 2}.top-rank-row{grid-template-columns:repeat(2,minmax(0,1fr))}.trend-visual{height:260px}}@media (max-width:760px){.dashboard-shell{width:min(100% - 20px,560px);padding-top:14px}.dashboard-header,.panel-heading{flex-direction:column;align-items:stretch}.header-actions{justify-content:stretch}.status-pill,.icon-button{flex:1;justify-content:center}.status-pill{min-width:0}.filter-bar,.kpi-grid,.analytics-grid{grid-template-columns:1fr}.search-field,.trend-panel{grid-column:auto}.top-rank-row{grid-template-columns:1fr}.rank-modal-backdrop{align-items:stretch;padding:10px}.rank-modal{max-height:calc(100vh - 20px)}.kpi-card{min-height:112px}.trend-visual{height:238px}.bar-row,.category-panel,.compact-rank button{grid-template-columns:1fr}.rank-panel .compact-rank button{grid-template-columns:20px minmax(0,1fr) minmax(48px,auto)}.legend-note{margin-left:0}.trend-tooltip{min-width:150px;max-width:176px}.transaction-tools{justify-content:flex-start}.donut{margin:0 auto}}