/* Look measured from ArbitrageOne's FlipHunter list (scripts/capture_a1_design.py, 12.10.2026):
   font Kanit 14.56px/300, header bar #909197, 186px rows on #0d0e13 with 10px spacing, market tables, pill colours. */
:root { --bg: #0b0420; --panel: #0d0e13; --bar: #1c1636; --line: #262a36; --text: #e0e3e7; --muted: #8d91a0;
        --link: #7b94ef; --accent: #7c6cf0; --red-bar: #b44a45; --cell-line: #454751; --th: #181a30;
        --row-h: 210px;  /* 186px row + 20px reason line + 4px air; 186px while the reason line is off */
        /* ArbitrageOne's column widths at a 2000px viewport as fr (they add up to the 1976px row there, so 1fr = 1px);
           wider screens grow proportionally, down to ~1760px the minimums apply (no horizontal scroll at 1920px) */
        --cols: minmax(39px, 39fr) minmax(79px, 79fr) minmax(360px, 456fr) minmax(560px, 606fr) minmax(116px, 116fr)
                minmax(136px, 136fr) minmax(31px, 31fr) minmax(200px, 270fr) minmax(100px, 119fr) minmax(110px, 124fr); }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 300 14.56px/1.5 Kanit, system-ui, sans-serif; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1em; height: 1em; vertical-align: -0.125em; }
.login { max-width: 320px; margin: 12vh auto; display: grid; gap: 12px; background: var(--bar); padding: 24px; border-radius: 10px; }
.login input { width: 100%; padding: 8px; }
.error { color: #ff8f80; }
.top { position: sticky; top: 0; z-index: 3; display: flex; gap: 16px; align-items: center; padding: 8px 16px; background: var(--bar); border-bottom: 1px solid var(--line); }
.tabs a { margin-right: 12px; color: var(--muted); font-weight: 500; }
.tabs a.active { color: var(--text); border-bottom: 2px solid var(--accent); }
.status { flex: 1; font-size: 12px; }
.status.ok { color: var(--muted); }
.status.bad { color: #fff; background: var(--red-bar); padding: 4px 8px; border-radius: 4px; }
button.link { background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; }
.toolbar { position: sticky; top: 41px; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 8px 16px; background: var(--bg); border-bottom: 1px solid var(--line); }
.toolbar fieldset { border: 1px solid var(--line); padding: 2px 6px; margin: 0; }
.toolbar legend { font-size: 11px; color: var(--muted); }
.toolbar input, .toolbar select, .toolbar button { background: var(--bar); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; font: inherit; }
.toolbar .sep { width: 1px; height: 22px; background: var(--line); }
main { padding: 12px 12px 8px; }
.empty { padding: 40px; text-align: center; color: var(--muted); }

/* header bar: 46px, #909197 with dark text, rounded ends */
.colhead { display: grid; grid-template-columns: var(--cols); height: 46px; margin-bottom: 20px; background: #909197;
           color: var(--panel); border-radius: 10px; font-weight: 400; line-height: 21.84px; text-align: center; }
.colhead > span { padding: 12px 8px; white-space: nowrap; overflow: hidden; }
.colhead .h-warn .ic { width: 15px; height: 15px; vertical-align: -2px; }

/* one deal = one 186px row like ArbitrageOne (+ our reason line when switched on) */
.deal { position: relative; height: var(--row-h); overflow: hidden; display: grid; grid-template-columns: var(--cols);
        grid-template-rows: 186px 20px; margin-bottom: 10px; background: var(--panel); border-radius: 10px;
        color: #fff; line-height: 21.84px; }
.deal > * { grid-row: 1; min-width: 0; }
.deal.unseen { box-shadow: inset 3px 0 0 #e0803a; }
body.hide-reasons { --row-h: 186px; }
body.hide-reasons .deal .reasons { display: none; }
.deal .reasons { grid-row: 2; grid-column: 1 / -1; padding: 0 12px; line-height: 20px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deal .reasons > span + span::before { content: " · "; }

.c-icon { grid-column: 1; display: grid; place-items: center; padding: 8px 8px 8px 16px; color: var(--link); }
.c-icon .ic { width: 15px; height: 17px; }
.c-time { grid-column: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 8px; text-align: center; }
/* our extras, small, above and below the time */
.badges, .seenby { grid-column: 1 / 3; display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; padding: 0 4px 0 12px;
                   font-size: 10.5px; line-height: 15px; z-index: 1; }
.badges { align-self: start; padding-top: 12px; }
.seenby { align-self: end; padding-bottom: 10px; color: var(--muted); column-gap: 6px; }
.b { padding: 0 6px; border-radius: 8px; font-weight: 400; white-space: nowrap; }
.b-green { background: #5b815a; color: #ccf5e7; } .b-yellow { background: #916900; color: #fff5cd; }
.b-proven { background: #3d3478; color: #e2ddff; }

/* Keepa: 440px block, flag tabs left, 401x140 chart in a 1px frame */
.c-keepa { grid-column: 3; display: grid; place-items: center; padding: 8px; }
.kwrap { display: flex; width: 100%; max-width: 440px; }  /* 440px like A1, shrinks with its column */
.flags { width: 37px; flex: none; display: flex; flex-direction: column; align-items: flex-end; }
.flag { width: 28px; height: 32px; margin-bottom: -1px; padding: 4px 0; border: 0; background: transparent; border-radius: 6px 0 0 6px; cursor: pointer; display: grid; place-items: center; }
.flag.active { background: #909197; }
.c-chart { flex: 1; min-width: 0; aspect-ratio: 403 / 142; border: 1px solid #2b2e45; background: var(--th); }
.c-chart > img { width: 100%; height: 100%; object-fit: fill; display: block; }
.c-chart a { display: grid; place-items: center; height: 100%; }

/* International verkaufen: two boxed tables side by side */
.c-markets { grid-column: 4; display: flex; gap: 8px; align-items: center; padding: 8px; }
.mt { flex: 1 1 0; min-width: 0; border-collapse: collapse; white-space: nowrap; }
.mt thead tr { background: var(--th); }
.mt th { height: 34px; padding: 4px 8px; font-weight: 500; text-align: center; border-bottom: 1px solid var(--cell-line); }
.mt td { height: 34px; padding: 4px 8px; text-align: right; border-bottom: 1px solid var(--cell-line); }
.mt tr.m-rejected, .mt tr.m-none { opacity: .25; }
.mt .fcell { padding: 4px 8px 4px 6px; text-align: left; width: 42px; }
.mt .fcell a { display: inline-block; line-height: 0; }
.mt .scell { text-align: left; padding-right: 0; }
.mt .dcell { padding-left: 0; }
.mt .var, .mt .ret { text-align: center; }
.sold b { font-weight: 400; }
.sold .ic { width: 15px; height: 15px; stroke: var(--panel); vertical-align: -2px; }
.drops .ic { width: 16px; height: 15px; vertical-align: -2px; }
.vcount { display: inline-block; background: #1d283c; color: var(--link); border-radius: 10px; padding: 3.2px 4.8px; font-size: 14.4px; font-weight: 400; line-height: 1; margin-right: 4px; }
.single { display: inline-block; line-height: 0; }
.single .ic { width: 22px; height: 22px; stroke: #5b815a; vertical-align: middle; }  /* mint badge, green check */
.pill { display: inline-block; padding: 3.2px 4.8px; border-radius: 10px; font-size: 13.104px; font-weight: 400; line-height: 1; }
.mt-calc .pill { display: block; text-align: right; }
.pill.profit { text-decoration: underline dotted; text-underline-offset: 2px; }
.p-green { background: #5b815a; color: #ccf5e7; } .p-red { background: #b44a45; color: #ffd6e0; }
.p-orange { background: #916900; color: #fff5cd; } .p-grey { background: #454751; color: #e0e3e7; }
.p-dark { background: #2b2d36; color: #e0e3e7; }

.c-img { grid-column: 5; display: grid; place-items: center; padding: 8px; }
.c-img .thumb > img { width: 100px; height: 100px; object-fit: contain; }
/* ArbitrageOne-style hover card: instant, CSS-only show; position:fixed so the row's overflow:hidden cannot clip it
   (app.js places it beside the thumbnail and keeps it inside the window) */
.c-img .thumb { display: block; width: 100px; height: 100px; }
.pop { position: fixed; z-index: 50; left: 0; top: 0; width: 312px; padding: 12px 16px 16px; border-radius: 10px; background: #343a59;
       color: #fff; box-shadow: 0 6px 24px rgba(0, 0, 0, .55); font-size: 13px; line-height: 20px; font-weight: 400;
       visibility: hidden; pointer-events: none; text-align: left; }
.pop::before { content: ""; position: absolute; right: 100%; top: calc(var(--ay, 50%) - 8px); border: 8px solid transparent; border-right-color: #343a59; }
.pop-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 40px; margin-bottom: 8px; }
.c-img .pop .pop-img { display: block; width: 280px; height: 280px; object-fit: contain; background: #fff; }
.c-img .thumb:hover .pop, .c-chart:hover .cpop { visibility: visible; }
/* enlarged Keepa chart like ArbitrageOne: 800x280 (1000x350 aspect) card below the chart, arrow up; app.js adds .above
   (card opens upward, arrow down) when there is no room below, and sets --ax to the chart's centre */
.cpop { width: 828px; padding: 14px; border-radius: 12px; }
.cpop::before { right: auto; left: calc(var(--ax, 50%) - 8px); top: auto; bottom: 100%; border-right-color: transparent; border-bottom-color: #343a59; }
.cpop.above::before { bottom: auto; top: 100%; border-bottom-color: transparent; border-top-color: #343a59; }
.c-chart .cpop-img { display: block; width: 800px; height: 280px; object-fit: fill; background: var(--th); }
.c-buy { grid-column: 6; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 8px; white-space: nowrap; }
.c-buy .nb { border-collapse: collapse; }
.c-buy .nb td { padding: 1px; }
.c-buy .nb td:first-child { padding-right: 9px; text-align: left; }
.c-buy .add { margin-top: 11px; }
.c-buy .pill { margin-top: 2px; }
.c-buy .sell-link { margin-top: 6px; font-size: 12.5px; line-height: 18px; }
.c-warn { grid-column: 7; }
.c-product { grid-column: 8; display: grid; grid-template-columns: 34% minmax(0, 1fr) 30px; grid-auto-rows: 24px; align-content: center; padding: 8px; white-space: nowrap; }
.c-product > span { padding: 1px; overflow: hidden; text-overflow: ellipsis; }
.c-product .k { text-align: center; }
.c-product .v { text-align: right; }
.c-product .i { text-align: center; }
.c-product .asin { text-decoration: underline; }
.c-unlock { grid-column: 9; }
.c-last { grid-column: 10; display: grid; place-items: center; padding: 8px 16px 8px 8px; text-align: center; font-size: 13px; }

/* Flags drawn in CSS: Windows has no flag emoji glyphs */
.fl { display: inline-block; width: 19px; height: 14px; border-radius: 6px; vertical-align: -2px; }
.c-product .fl { width: 15px; height: 15px; border-radius: 50%; }
.fl-de { background: linear-gradient(#000 33.3%, #dd0000 0 66.6%, #ffce00 0); }
.fl-fr { background: linear-gradient(90deg, #0055a4 33.3%, #fff 0 66.6%, #ef4135 0); }
.fl-it { background: linear-gradient(90deg, #009246 33.3%, #fff 0 66.6%, #ce2b37 0); }
.fl-es { background: linear-gradient(#aa151b 25%, #f1bf00 0 75%, #aa151b 0); }
.copy { background: none; border: 0; color: var(--link); cursor: pointer; padding: 0; line-height: 0; }
.copy .ic { width: 13px; height: 15px; }
.copy:hover, .copy.copied { color: #fff; }

/* Bewerten tab: reason line always on, rating panel as third grid row */
body.rate-mode { --row-h: 302px; }
body.rate-mode .deal { grid-template-rows: 186px 20px 92px; }
body.rate-mode .deal .reasons { display: block; }
.deal .rate { grid-row: 3; grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;
              padding: 6px 12px; border-top: 1px solid var(--line); }
.rate button { background: var(--bar); color: var(--text); border: 1px solid var(--line); border-radius: 6px;
               padding: 4px 10px; font: inherit; cursor: pointer; }
.rate .r-yes { border-color: #2e8b57; }
.rate .r-no { border-color: var(--red-bar); }
.rate .r-reasons { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; color: var(--muted); max-width: 640px; }
.rate .r-note { flex: 1; min-width: 320px; height: 52px; resize: none; background: var(--bar); color: var(--text);
                border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; font: inherit; font-size: 13px; }
.rate .r-msg { font-size: 12px; color: var(--muted); }
.deal.current { box-shadow: inset 3px 0 0 var(--accent); }
/* "Bereits bewertet": the chosen verdict is filled and marked by a bar on the left (Marc 13.10.2026) */
.rate[data-verdict="ja"] .r-yes { background: #2e8b57; border-color: #2e8b57; color: #fff; font-weight: 500; }
.rate[data-verdict="nein"] .r-no { background: var(--red-bar); border-color: var(--red-bar); color: #fff; font-weight: 500; }
.rate[data-verdict="skip"] .r-skip { background: #5a5d6b; border-color: #5a5d6b; color: #fff; }
.deal:has(.rate[data-verdict="ja"]) { box-shadow: inset 6px 0 0 #2e8b57; }
.deal:has(.rate[data-verdict="nein"]) { box-shadow: inset 6px 0 0 var(--red-bar); }
.deal:has(.rate[data-verdict="skip"]) { box-shadow: inset 6px 0 0 #5a5d6b; }
.rate[data-verdict="ja"] .r-msg { color: #5fd08f; }
.rate[data-verdict="nein"] .r-msg { color: #ff8f80; }
.deal.saving { display: none; }
.rate-help .keys { font-size: 12px; color: var(--muted); }
.rate-help .tabs a { font-size: 13px; }