*{box-sizing:border-box}
body{margin:0;line-height:var(--line-height);background:var(--bg-100);-webkit-font-smoothing:antialiased}
a{color:var(--text-100);text-decoration-color:var(--text-400);text-underline-offset:3px}
a:hover{text-decoration-color:var(--text-200)}
button,input,select,textarea{font:inherit}
button,a,input,select,summary{touch-action:manipulation}
code,kbd,.mono{font-family:var(--font-mono);font-size:.95em}
code{padding:1px 5px;border-radius:var(--radius-sm);background:var(--bg-600);color:var(--text-200)}
.icon{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* Pills: one bright primary per view, everything else quiet. */
button,.button,.refresh{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--control-md);padding:0 14px;border:1px solid transparent;border-radius:var(--radius-full);background:var(--inverse-bg);color:var(--on-inverse);font-size:var(--font-sm);font-weight:500;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
button:hover{background:var(--text-100)}
button.secondary,.button,.refresh{background:var(--bg-500);border-color:var(--line-200);color:var(--text-200)}
button.secondary:hover,.button:hover,.refresh:hover{background:var(--bg-600);color:var(--text-100)}
button:disabled{opacity:.45;cursor:default}
button.delete{background:transparent;border-color:var(--line-200);color:var(--diff-remove)}
button.delete:hover{background:var(--bg-500)}
:focus-visible{outline:2px solid var(--text-200);outline-offset:2px}
input:not([type=checkbox]):not([type=range]),select,textarea{max-width:100%;min-width:0;min-height:var(--control-md);padding:6px 10px;background:var(--bg-500);color:var(--text-100);border:1px solid var(--line-200);border-radius:var(--radius-md);transition:border-color .15s}
input:not([type=checkbox]):not([type=range]):hover,select:hover,textarea:hover{border-color:var(--text-500)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:0}
textarea{line-height:1.5;font-family:var(--font-mono);font-size:var(--font-xs)}
input::placeholder,textarea::placeholder{color:var(--text-400)}
input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px;margin:0}
input[type=range]{accent-color:var(--text-200)}
input[aria-invalid=true]{border-color:var(--diff-remove)!important}
[hidden]{display:none!important}
/* Loading and no-deals states show the scanline tag; loaders use the still one
with reduced motion. */
.loader{display:inline-flex;align-items:center;gap:8px}
.loader::before{content:"";width:16px;height:16px;flex:none;background:url(/assets/brand/glitch-tag-scan.svg) center/contain no-repeat}
.empty-scan{display:block;width:48px;height:48px;margin:0 auto 16px;background:url(/assets/brand/glitch-tag-scan.svg) center/contain no-repeat}
@media (prefers-reduced-motion:reduce){.loader::before{background-image:url(/assets/brand/glitch-tag.svg)}}

/* Frame: bg-100 sidebar beside a rounded bg-300 main panel. */
.site-header{position:fixed;inset:0 auto 0 0;width:228px;z-index:10}
.site-nav{height:100%;display:flex;flex-direction:column;padding:14px 10px 12px;overflow-y:auto}
.site-brand{display:flex;align-items:center;gap:8px;padding:4px 10px 18px;color:var(--text-100);font-size:var(--font-sm);font-weight:500;text-decoration:none;white-space:nowrap}
.brand-mark{display:block;width:39px;height:24px;flex:none}
/* The logo glitches while the brand link is hovered or focused: its shifted slices jump and snap back. */
:is(.site-brand,.member-brand):is(:hover,:focus-visible) .glitch-b{animation:glitch-b 1s steps(1,end) infinite}
:is(.site-brand,.member-brand):is(:hover,:focus-visible) .glitch-c{animation:glitch-c 1s steps(1,end) infinite}
:is(.site-brand,.member-brand):is(:hover,:focus-visible) .glitch-d{animation:glitch-d 1s steps(1,end) infinite}
@keyframes glitch-b{0%{transform:translateX(-18px)}15%{transform:translateX(2px)}30%,100%{transform:none}}
@keyframes glitch-c{0%{transform:none}8%{transform:translateX(14px)}22%{transform:translateX(-4px)}36%,100%{transform:none}}
@keyframes glitch-d{0%{transform:translateX(-22px)}12%{transform:translateX(4px)}26%,100%{transform:none}}
.nav-label{display:block;padding:14px 10px 4px;color:var(--text-400);font-size:var(--font-xs);font-weight:500}
.site-links{list-style:none;margin:0;padding:0}
.site-links a{display:flex;align-items:center;gap:10px;min-height:var(--row-height);padding:0 10px;border-radius:var(--radius-md);color:var(--text-300);font-weight:500;text-decoration:none;transition:background-color .15s,color .15s}
.site-links a:hover{color:var(--text-100);background:var(--bg-200)}
.site-links a[aria-current="page"]{color:var(--text-100);background:var(--bg-400)}
.manual-link{margin-top:10px}
.sidebar-footer{margin-top:auto;padding-top:16px;color:var(--text-300);font-size:var(--font-xs)}
.sidebar-footer select{width:100%;margin-top:6px}
.sidebar-footer details{margin:10px 0 0;padding:0 10px}
.sidebar-footer summary{font-weight:500}
.sidebar-footer label{display:block;margin-top:10px}
.sidebar-footer details a{display:inline-block;margin-top:10px;color:var(--text-300)}
.scanner-status{list-style:none;margin:0;padding:0 10px}
.scanner-status li{display:flex;align-items:center;gap:8px;min-height:24px;color:var(--text-300)}
.scanner-status .name{color:var(--text-200)}
.scanner-status .state{margin-left:auto;white-space:nowrap}
.dot{width:6px;height:6px;flex:none;border-radius:50%;border:1px solid var(--text-400)}
.dot.live{background:var(--signal);border-color:var(--signal)}
.dot.idle{background:var(--text-300);border-color:var(--text-300)}
.dot.error{background:var(--diff-remove);border-color:var(--diff-remove)}
.dot.warning{background:var(--status-progress);border-color:var(--status-progress)}
main{min-width:0;min-height:calc(100vh - 16px);margin:8px 8px 8px 228px;padding:28px 36px 40px;background:var(--bg-300);border:1px solid var(--line-100);border-radius:var(--radius-lg)}
main>*{max-width:1640px}
main.settings>*{max-width:760px}

/* Type */
.heading{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:24px}
.heading p{margin-bottom:0}
h1{font-size:var(--font-title);line-height:34px;font-weight:600;letter-spacing:-.012em;color:var(--text-100);margin:0 0 6px}
h2{font-size:var(--font-md);line-height:24px;font-weight:500;color:var(--text-100);margin:0 0 4px}
p{color:var(--text-300);margin:6px 0 16px}
small,.muted,.subtitle,.date{font-size:var(--font-xs);color:var(--text-300)}
small{display:block;margin-top:2px}
strong{color:var(--text-100);font-weight:500}
.intro{max-width:1000px;margin-bottom:24px}

/* Surfaces: cards step up one token and carry a hairline, never a shadow. */
.panel,.card{min-width:0;padding:20px;background:var(--bg-400);border:1px solid var(--line-200);border-radius:var(--radius-lg)}
.panel>h2+p,.card>h2+p{margin-top:0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:12px}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:12px 0}
.cards .card span{display:block;font-size:var(--font-xs);font-weight:500;color:var(--text-300)}
.cards .card strong{display:block;font-size:var(--font-stat);line-height:34px;margin:8px 0 6px;font-weight:500;letter-spacing:-.012em;font-variant-numeric:tabular-nums}
.cards .card small{min-height:32px}
.charts{display:grid;grid-template-columns:2fr 1fr;gap:12px}
.full{margin-top:12px}
.chart{display:block;max-width:100%;touch-action:pan-y}
.chart text{font-size:11px;fill:var(--text-300);font-family:var(--font-mono)}
.legend{display:flex;flex-wrap:wrap;gap:16px;font-size:var(--font-xs);color:var(--text-300);margin-top:12px}
.swatch{display:inline-block;width:10px;height:2px;margin-right:6px;vertical-align:middle;border-radius:1px}
.swatch.series-1{background:var(--series-1)}
.swatch.series-2{background:var(--series-2)}
.swatch.series-3{background:var(--series-3)}
.swatch.series-4{background:var(--series-4)}
.swatch.series-5{background:var(--series-5)}
.green{color:var(--diff-add)}
.blue,.warning{color:var(--status-progress)}
.error{color:var(--diff-remove)}

/* Tables */
.scroll,.table-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
.table-wrap{border:1px solid var(--line-200);border-radius:var(--radius-lg);background:var(--bg-300)}
table{width:100%;border-collapse:collapse;font-size:var(--font-sm);text-align:left}
th{color:var(--text-300);font-weight:500;font-size:var(--font-xs);white-space:nowrap}
th,td{padding:10px 14px;border-bottom:1px solid var(--line-200);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
.panel th,.panel td{padding:9px 12px 9px 0}
th button{gap:4px;min-height:24px;padding:0;border:0;border-radius:var(--radius-sm);background:transparent;color:inherit;font-size:inherit;font-weight:inherit}
th button:hover{background:transparent;color:var(--text-100)}
th[aria-sort=ascending] button::after{content:'↑'}
th[aria-sort=descending] button::after{content:'↓'}
tbody tr{transition:background-color .1s}
tbody tr:hover{background:var(--bg-400)}
.catalog-table tbody tr{cursor:pointer}
td.product{min-width:280px;max-width:520px}
td.product a{color:var(--text-100);font-weight:500;text-decoration:none}
td.product a:hover{text-decoration:underline}
.ref,.id{font-family:var(--font-mono);font-size:var(--font-xs);color:var(--text-300)}
.price{white-space:nowrap;font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-100)}
.badge,.status-tag{display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border-radius:var(--radius-sm);background:var(--bg-600);font-family:var(--font-mono);font-size:var(--font-xs);white-space:nowrap}
.down{color:var(--diff-add)}
.up{color:var(--diff-remove)}
.empty{padding:48px 16px;text-align:center;color:var(--text-300)}
.empty h2{margin-bottom:4px}

/* Status bars */
.statusbar{display:flex;align-items:center;gap:12px;margin:12px 0;font-family:var(--font-mono);font-size:var(--font-xs)}
.statusbar label{min-width:90px;color:var(--text-200)}
.track{flex:1;height:6px;border-radius:var(--radius-full);background:var(--bg-600);overflow:hidden}
.fill{height:100%;border-radius:var(--radius-full);background:var(--series-1)}
.statusbar b{min-width:45px;text-align:right;font-weight:400;color:var(--text-300)}

/* Toolbars, forms */
.controls,.toolbar,.pager{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.controls label{color:var(--text-300);font-size:var(--font-xs)}
.toolbar{gap:12px;align-items:flex-end;margin-bottom:12px}
.toolbar .search-field{flex:1;min-width:200px;max-width:420px}
.toolbar label{display:flex;flex-direction:column;gap:6px;color:var(--text-300);font-size:var(--font-xs);font-weight:500}
.toolbar>a{align-self:center;color:var(--text-300);font-weight:500}
.toolbar>.muted{flex-basis:100%;margin:0}
.pager{justify-content:space-between;margin-top:12px;color:var(--text-300);font-size:var(--font-xs)}
.field{display:block;color:var(--text-200);font-size:var(--font-sm);font-weight:500;margin-bottom:18px}
.field input,.field select,.field textarea{display:block;width:100%;margin-top:6px;font-weight:400}
.field .muted{display:block;margin-top:6px;font-weight:400;line-height:1.5}
.check{display:flex;gap:10px;align-items:center;min-height:var(--control-md);margin:4px 0 12px;color:var(--text-200)}
.notice,.banner{display:flex;align-items:baseline;gap:10px;padding:12px 16px;border:1px solid var(--line-200);border-radius:var(--radius-md);background:var(--bg-400);margin:16px 0;color:var(--text-200)}
.notice::before,.banner::before{content:'';width:6px;height:6px;flex:none;border-radius:50%;background:var(--diff-add);transform:translateY(-1px)}
.notice.error::before{background:var(--diff-remove)}
.banner.warning::before{background:var(--status-progress)}
p.notice{margin-top:0}
details{margin-top:16px}
summary{cursor:pointer;color:var(--text-300);font-weight:500}
summary:hover{color:var(--text-100)}
pre,.log-view{margin:0;padding:14px 16px;border:1px solid var(--line-200);border-radius:var(--radius-md);background:var(--bg-000);color:var(--text-200);white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--font-mono);font-size:var(--font-xs)}
.log-view{min-height:80px}
.add{margin-top:24px;max-width:720px}
hr{border:0;border-top:1px solid var(--line-200);margin:24px 0}
.photo{width:32px;height:32px;object-fit:contain;float:left;margin-right:12px;border-radius:var(--radius-sm);background:#fff}
/* Product catalog: filters, paging and sorting run on the server, so only one page of rows is ever in the document. */
.shop-tabs{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 16px;padding:3px;width:fit-content;max-width:100%;border:1px solid var(--line-200);border-radius:var(--radius-md);background:var(--bg-200)}
.shop-tabs a{display:inline-flex;align-items:center;gap:8px;min-height:var(--control-sm);padding:0 12px;border-radius:var(--radius-sm);color:var(--text-300);font-weight:500;text-decoration:none;white-space:nowrap}
.shop-tabs a:hover{color:var(--text-100)}
.shop-tabs a[aria-current="page"]{background:var(--bg-500);color:var(--text-100)}
.shop-tabs span{font-family:var(--font-mono);font-size:var(--font-xs);color:var(--text-400);font-variant-numeric:tabular-nums}
.toolbar .export{margin-left:auto;align-self:flex-end}
.js .toolbar .apply{display:none}
#catalog[aria-busy="true"] .table-wrap,#catalog[aria-busy="true"] .pager{opacity:.55;transition:opacity .15s .15s}
.catalog-table{table-layout:fixed;min-width:820px}
.catalog-table col:nth-child(1){width:auto}
.catalog-table col:nth-child(2){width:180px}
.catalog-table col:nth-child(3){width:110px}
.catalog-table col:nth-child(4){width:120px}
.catalog-table col:nth-child(5){width:120px}
.catalog-table td{padding-top:8px;padding-bottom:8px}
.catalog-table .product{overflow-wrap:anywhere}
.catalog-table .product a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.catalog-table .product small{display:block;margin-left:44px}
.catalog-table .photo{margin-top:2px}
.catalog-table span.photo{display:block;background:var(--bg-600)}
.catalog-table .retailer{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-200)}
.catalog-table .num{text-align:right}
.catalog-table th a{color:inherit;text-decoration:none}
.catalog-table th a:hover{color:var(--text-100)}
.catalog-table th[aria-sort="ascending"] a::after{content:' ↑'}
.catalog-table th[aria-sort="descending"] a::after{content:' ↓'}
.catalog-table th[aria-sort="ascending"],.catalog-table th[aria-sort="descending"]{color:var(--text-100)}
.pager .controls{flex-wrap:nowrap}
.toolbar .price-field{width:96px}
.bulk-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin:0 0 12px;padding:8px 12px;border:1px solid var(--line-200);border-radius:var(--radius-md);background:var(--bg-400)}
.bulk-bar .check{margin:0;min-height:0}
.bulk-bar .controls{margin-left:auto}
.bulk-hint{margin:0 0 12px}
.catalog-table .pick{float:left;display:flex;align-items:center;height:32px;margin:2px 10px 0 0;padding-right:2px;cursor:pointer}
.catalog-table .pick+.photo~small{margin-left:70px}
.catalog-table tr.blacklisted .photo{opacity:.4}
.catalog-table tr.blacklisted .product a{color:var(--text-300)}
.pager .page-of{padding:0 8px;font-family:var(--font-mono);white-space:nowrap}
.validation{color:var(--diff-remove);margin:6px 0}
.unsaved{color:var(--status-progress)}
.form-section{padding-top:20px;margin-top:4px;border-top:1px solid var(--line-200)}
.form-section:first-of-type{padding-top:0;border-top:0}
.form-actions{display:flex;gap:8px;align-items:center;margin-top:8px}
.compare{margin-left:0}
.comparison-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.comparison-sample{font-size:var(--font-size-base);margin-bottom:20px}
.comparison-sample .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
dialog{background:var(--bg-300);color:var(--text-200);border:1px solid var(--line-200);border-radius:var(--radius-lg);max-width:480px;padding:24px}
dialog::backdrop{background:rgba(8,9,10,.72)}
dialog .controls{justify-content:flex-end;margin-top:20px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(prefers-reduced-motion:reduce){*{transition:none!important}
}

@media(max-width:1100px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.charts{grid-template-columns:1fr}
.heading{align-items:flex-start;flex-wrap:wrap}
}

@media(max-width:799px){.site-header{position:static;width:100%}
.site-nav{padding:12px 8px 4px}
.site-brand{padding:4px 8px 10px}
.nav-label{display:none}
.site-links{display:flex;flex-wrap:wrap;gap:2px}
.site-links a{min-height:36px}
.site-links .icon{display:none}
.manual-link{margin:0}
.sidebar-footer{padding:8px 0 0;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.scanner-status{display:flex;flex-wrap:wrap;gap:4px 16px}
.sidebar-footer details{margin:0}
main{min-height:0;margin:0 8px 8px;padding:20px 16px}
.cards,.grid,.charts,.comparison-grid{grid-template-columns:1fr}
button,.button,.refresh,input:not([type=checkbox]):not([type=range]),select{min-height:var(--control-lg)}
th button{min-height:40px}
.heading{gap:12px}
.panel,.card{padding:16px}
h1{font-size:24px;line-height:30px;overflow-wrap:anywhere}
.controls{width:100%}
.toolbar{align-items:stretch}
.toolbar label{flex:1}
.toolbar .search-field{max-width:none;flex-basis:100%}
.toolbar .export{margin-left:0;flex-basis:100%}
.pager{flex-direction:column;align-items:stretch}
.pager .controls{justify-content:space-between}
.cards .card small{min-height:0}
}
.back-link{display:inline-block;margin:0 0 20px;color:var(--text-300);font-size:var(--font-sm);font-weight:500;text-decoration:none}
.back-link:hover{color:var(--text-100)}
p:has(>.back-link){margin:0}
.log-view .dot{display:inline-block;vertical-align:middle;margin-right:4px}
.status-cell{white-space:nowrap}
.status-cell .dot{display:inline-block;vertical-align:middle;margin-right:8px}
:root{scrollbar-color:var(--bg-600) transparent}
.site-nav{scrollbar-width:thin}
form.settings{max-width:760px}
/* Discord profile photos; the size comes from the img width and height. */
.avatar{flex:none;border-radius:50%;object-fit:cover;vertical-align:middle;background:var(--bg-600)}
h1 .avatar,td .avatar{margin-right:10px}