/* The logged-in hub: a dark application shell, distinct from the marketing site. */
:root {
  --app-bg: #1c2124;
  --app-side: #14191c;
  --app-panel: #242a2e;
  --app-panel-2: #2c3338;
  --app-line: #333c42;
  --app-ink: #eef1f2;
  --app-ink-2: #c3cbd0;
  --app-muted: #8d9aa2;
  --app-accent: #3fbfa8;
  --app-accent-deep: #0e7c6b;
  --app-amber: #f0a83a;
  --app-red: #ff8a80;
}
body.app { background: var(--app-bg); color: var(--app-ink); min-height: calc(100vh / var(--zoom, 1)); }
.app-shell { display: grid; grid-template-columns: 264px 1fr; min-height: calc(100vh / var(--zoom, 1)); }

/* sidebar */
.side { background: var(--app-side); border-right: 1px solid var(--app-line); padding: 18px 14px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; height: calc(100vh / var(--zoom, 1)); min-height: 0; }
/* When the menu, the plan box and the version line don't all fit, the whole sidebar scrolls as one, so nothing is
   covered or cut in half; when they fit, the spacer keeps the plan box at the bottom. Short windows get a compact box. */
.side { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.side #navlist { flex: 0 0 auto; }
.side .plan-card, .side .ver { flex-shrink: 0; }
@media (max-height: 820px) { .side .plan-card { padding: 10px 12px; } .side .plan-card .pn { display: none; } .side .plan-card .btn { margin-top: 6px; } }
.side .logo { display: block; padding: 8px 10px 22px; }
.side .logo img { height: 40px; display: block; }
.side a.nav, .side .nav { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 9px; color: var(--app-ink-2); text-decoration: none; font-weight: 500; font-size: 14px; white-space: nowrap; }
.side a.nav:hover { background: var(--app-panel); color: var(--app-ink); }
.side a.nav.on { background: var(--app-panel-2); color: var(--app-ink); box-shadow: inset 3px 0 0 var(--app-accent); }
.side .nav svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--app-muted); }
.side a.nav.on svg { color: var(--app-accent); }
.side .nav .soon { margin-left: auto; font-size: 10px; font-weight: 600; color: var(--app-accent); background: rgba(63,191,168,.12); padding: 2px 7px; border-radius: 8px; }
.side .group { padding: 16px 12px 4px; font-size: 12px; color: var(--app-muted); }
.side .spacer { flex: 1; }
.side .plan-card { border: 1px solid var(--app-line); border-radius: 10px; padding: 12px; background: var(--app-panel); font-size: 13px; color: var(--app-ink-2); }
.side .plan-card b { display: block; color: var(--app-ink); margin-bottom: 4px; }
.side .plan-card .btn { margin-top: 10px; width: 100%; padding: 8px 10px; font-size: 13px; }

/* top bar + content */
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 14px; padding: 14px 28px; border-bottom: 1px solid var(--app-line); background: var(--app-bg); position: sticky; top: 0; z-index: 5; }
.topbar h1 { font-size: 20px; }
.topbar .spacer { flex: 1; }
.topbar .who { color: var(--app-muted); font-size: 14px; }
.topbar .plan { padding: 3px 10px; border-radius: 10px; border: 1px solid var(--app-line); font-size: 12px; font-weight: 600; color: var(--app-ink-2); }
.topbar .plan.pro { background: var(--app-accent-deep); border-color: var(--app-accent-deep); color: #fff; }
.topbar .btn { padding: 8px 14px; font-size: 14px; }
.content { padding: 28px; display: flex; flex-direction: column; gap: 22px; }

/* sections: a titled block with rows or tiles inside; darker than the page, lighter than the sidebar */
.sec { background: var(--app-panel); border: 1px solid var(--app-line); border-radius: 12px; overflow: hidden; }
.sec > header { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--app-line); background: var(--app-panel-2); }
.sec > header h2 { font-size: 15px; font-weight: 600; }
.sec > header .sub { color: var(--app-muted); font-size: 13px; }
.sec > header .spacer { flex: 1; }
.sec .body { padding: 20px; }
.sec p { color: var(--app-ink-2); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--app-line); }
.tile { background: var(--app-panel); padding: 18px 20px; }
.tile .k { color: var(--app-muted); font-size: 12px; }
.tile .v { font-family: Poppins, sans-serif; font-size: 26px; font-weight: 600; margin-top: 4px; }
.tile .v.good { color: var(--app-accent); }
.tile .s { color: var(--app-muted); font-size: 12px; margin-top: 4px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 900px) { .two { grid-template-columns: 1fr; } }
.menubtn { display: none; }
.navbackdrop { display: none; }

/* controls inside the shell */
.app .btn { background: var(--app-panel-2); border-color: var(--app-line); color: var(--app-ink); }
.app .btn:hover { background: #343c42; }
.app .btn.primary { background: var(--app-accent-deep); border-color: var(--app-accent-deep); color: #fff; }
.app .btn.primary:hover { background: #0a5c50; }
.app .field input, .app .field select, .app .field textarea { background: var(--app-bg); border-color: var(--app-line); color: var(--app-ink); }
.app .field label[title] span, .app label.field[title] > span { cursor: help; border-bottom: 1px dotted var(--app-muted); }
.app .field label { color: var(--app-ink-2); }
.app .msg { color: var(--app-accent); }
.app .msg.bad { color: var(--app-red); }
.keybox { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.keybox code { flex: 1; padding: 10px 12px; border-radius: 8px; background: var(--app-bg); border: 1px solid var(--app-line); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--app-ink-2); user-select: all; }
.steps-mini { display: grid; gap: 10px; counter-reset: s; margin: 14px 0 0; padding: 0; list-style: none; }
.steps-mini li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; color: var(--app-ink-2); }
.steps-mini li::before { counter-increment: s; content: counter(s); width: 24px; height: 24px; border-radius: 50%; background: var(--app-panel-2); border: 1px solid var(--app-line); display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--app-ink); }
.coming { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--app-line); }
.coming .tile h3 { font-size: 15px; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.coming .tile p { color: var(--app-muted); font-size: 13px; margin: 0; }
.coming .tag { font-size: 10px; font-weight: 600; color: var(--app-accent); background: rgba(63,191,168,.12); padding: 2px 7px; border-radius: 8px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.ok { color: var(--app-accent); font-weight: 600; }
.warn { color: var(--app-amber); font-weight: 600; }

/* ---------- product database ---------- */
.dbwrap { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; align-items: start; }
.dbresults { min-width: 0; }
.dbfilters .body { display: flex; flex-direction: column; gap: 14px; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.chipbtn { font: inherit; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 14px; border: 1px solid var(--app-line); background: var(--app-panel-2); color: var(--app-ink-2); cursor: pointer; }
.chipbtn.on { background: var(--app-accent-deep); border-color: var(--app-accent-deep); color: #fff; }
.dbfilters .ff > label { display: flex; justify-content: space-between; font-weight: 600; font-size: 13px; margin-bottom: 6px; color: var(--app-ink-2); }
.dbfilters .ff > label small { color: var(--app-muted); font-weight: 400; }
.dbfilters .pair { display: flex; align-items: center; gap: 6px; }
.dbfilters .pair span { color: var(--app-muted); font-size: 12px; }
.dbfilters .pair input { font: inherit; width: 100%; min-width: 0; padding: 6px 8px; font-size: 13px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-bg); color: var(--app-ink); color-scheme: dark; }
.cats { max-height: 240px; overflow: auto; border: 1px solid var(--app-line); border-radius: 8px; padding: 4px; background: var(--app-bg); }
.cat { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.cat:hover { background: var(--app-panel-2); }
.cat span { flex: 1; } .cat small { color: var(--app-muted); }
.cat input { accent-color: var(--app-accent); }
.checks { display: flex; gap: 14px; font-size: 13px; }
.checks label { display: flex; gap: 6px; align-items: center; }
.checks input { accent-color: var(--app-accent); }
.sortsel { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--app-muted); }
.sortsel select { font: inherit; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--app-line); background: var(--app-bg); color: var(--app-ink); }
.tablewrap { overflow: auto; }
.dbt { border-collapse: collapse; width: 100%; min-width: 1500px; font-size: 13px; }
.dbt th, .dbt td { padding: 9px 12px; border-bottom: 1px solid var(--app-line); text-align: right; white-space: nowrap; vertical-align: middle; }
.dbt th { position: sticky; top: 0; background: var(--app-panel-2); color: var(--app-muted); font-weight: 600; font-size: 12px; z-index: 1; }
.dbt th.c-product, .dbt td.c-product, .dbt th.c-text, .dbt td.c-text { text-align: left; }
.dbt td.c-product { white-space: normal; min-width: 320px; max-width: 400px; }
.dbt tbody tr:hover td { background: var(--app-panel-2); }
.dbt .prod { display: flex; gap: 10px; align-items: center; min-width: 0; }
.dbt .prod > div { min-width: 0; flex: 1; overflow: hidden; }
.dbt td.c-product { overflow: hidden; }
.dbt .prod img[src=""], .dbt .prod img:not([src]) { visibility: hidden; }
.dbt .prod img { width: 40px; height: 40px; object-fit: contain; border-radius: 6px; background: #fff; }
.dbt .prod a { color: var(--app-ink); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dbt .prod a:hover { text-decoration: underline; }
.dbt .meta { color: var(--app-muted); font-size: 11px; margin-top: 2px; }
.dbt .star { color: var(--app-amber); }
.dbt .blur { filter: blur(5px); user-select: none; color: var(--app-muted); }
.lockmark { font-size: 10px; color: var(--app-accent); }
.btn .lockico { width: 13px; height: 13px; margin-right: 5px; vertical-align: -2px; color: var(--app-accent); }
.dbmsg { padding: 40px; text-align: center; color: var(--app-muted); display: flex; gap: 10px; justify-content: center; align-items: center; }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--app-line); border-top-color: var(--app-accent); animation: spin .8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.pw { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; background: rgba(63,191,168,.10); color: var(--app-ink-2); position: sticky; left: 0; }
.pw strong { color: var(--app-ink); }
.pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 12px; color: var(--app-muted); font-size: 13px; }
@media (max-width: 1000px) { .dbwrap { grid-template-columns: 1fr; } }

.side .ver { color: var(--app-muted); font-size: 11px; padding: 10px 12px 0; }

/* ---------- database: two-state layout ---------- */
.dbpage { position: relative; }
.dbwrap { display: block; }
/* filters mode: filters spread across the width, results hidden */
.mode-filters .dbresults, .mode-filters .filter-tab, .mode-filters #hidefilters { display: none; }
.mode-filters .dbfilters .body { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px 24px; align-items: start; }
.mode-filters .dbfilters .presets, .mode-filters .dbfilters .gobox { grid-column: 1 / -1; }
.mode-filters .dbfilters .gobox { display: flex; justify-content: center; padding-top: 6px; }
.mode-filters .dbfilters .gobox .btn { min-width: 260px; padding: 12px 24px; font-size: 15px; }
.mode-filters .cats { max-height: 180px; }
/* results mode: results take everything; filters live in a bottom sheet */
.mode-results .dbfilters { position: fixed; left: var(--dbleft, 264px); right: 0; top: var(--dbtop, 68px); z-index: 40; max-height: calc(72vh / var(--zoom, 1)); overflow: auto; border-radius: 0 0 14px 14px; box-shadow: 0 16px 48px rgba(0,0,0,.5); transform: translateY(calc(-100% - 80px)); visibility: hidden; transition: transform .22s ease, visibility 0s .22s; }
.mode-results.sheet-open .dbfilters { transform: none; visibility: visible; transition: transform .22s ease; }
.mode-results .dbfilters .body { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px 24px; align-items: start; }
.mode-results .dbfilters .presets, .mode-results .dbfilters .gobox { grid-column: 1 / -1; }
.mode-results .dbfilters .gobox { display: flex; justify-content: center; }
.mode-results .dbfilters .gobox .btn { min-width: 220px; }
.mode-results .cats { max-height: 300px; }
.mode-results .content { padding-bottom: 0; }
.mode-results .content { padding-top: 46px; }
.mode-results .dbresults .sec { display: flex; flex-direction: column; height: calc(calc(100vh / var(--zoom, 1)) - var(--dbtop, 68px) - 46px - 28px); }
.mode-results .tablewrap { flex: 1; max-height: none; }
.mode-results .pager { flex: 0 0 auto; }
/* The filter handle: a thin green bar edge to edge with the tab hanging from its centre, attached to the bottom edge
   of the filter sheet. Closed, the sheet is translated up by its own height so only the handle shows; open, the sheet
   slides down and the handle rides on its bottom edge. One piece, always. */
.filter-handle { position: absolute; left: 0; right: 0; top: 100%; height: 0; display: none; }
.mode-results .filter-handle { display: block; }
.filter-bar { position: absolute; left: 0; right: 0; top: 0; height: 7px; background: #073f36; border-radius: 0 0 14px 14px; box-shadow: 0 3px 10px rgba(0,0,0,.35); pointer-events: none; }
.filter-tab {
  position: absolute; left: 50%; top: 7px; transform: translateX(-50%);
  display: inline-flex; flex-direction: column-reverse; align-items: center; gap: 4px;
  padding: 8px 22px 8px; border: 0; border-radius: 0 0 12px 12px;
  background: #073f36; color: #d8efe9; font: inherit; font-weight: 600; cursor: grab; user-select: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.filter-handle:hover .filter-tab, .filter-handle:hover .filter-bar { background: #0a5c50; color: #fff; }
.filter-tab:active { cursor: grabbing; } .filter-tab:focus { outline: none; } .filter-tab:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; }
.filter-tab .grip { width: 34px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.5); }
.filter-handle.open .filter-tab { flex-direction: column; }
/* the sheet: its body scrolls, the sheet itself doesn't clip (the handle hangs outside it) */
.mode-results .dbfilters { overflow: visible; border-radius: 0; visibility: visible; transform: translateY(-100%); transition: transform .22s ease; z-index: 4; /* under the sticky topbar (5), so the closed sheet hides behind it */ }
.mode-results.sheet-open .dbfilters { transform: none; }
.mode-results .dbfilters .body { max-height: calc(calc(92vh / var(--zoom, 1)) - 130px); overflow: auto; }
/* the sheet sizes to its content (the body scrolls); the footer is a normal block at its bottom, so the handle on the
   sheet's bottom edge always sits just below Reset / Search */
.mode-results .dbfilters { max-height: none; }
.mode-results .dbfilters .ffoot { position: static; }
.mode-results .dbfilters header { position: static; }
@media (max-width: 900px) { .mode-results .dbfilters { left: 0; } }
/* columns menu */
.colswrap { position: relative; }
.colsmenu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 520px; max-width: calc(80vw / var(--zoom, 1)); background: var(--app-panel); border: 1px solid var(--app-line); border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.5); padding: 12px; }
.colsgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px 14px; }
.colsgrid label { display: flex; gap: 8px; align-items: center; font-size: 13px; padding: 5px 6px; border-radius: 6px; cursor: pointer; }
.colsgrid label:hover { background: var(--app-panel-2); }
.colsgrid input { accent-color: var(--app-accent); }
.colsfoot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--app-line); }
.hidden { display: none !important; }
/* bigger logo */
.side .logo { padding: 10px 8px 24px; }
.side .logo img { height: 50px; }

/* ---------- support + admin ---------- */
.app textarea { font: inherit; width: 100%; padding: 10px 12px; border: 1px solid var(--app-line); border-radius: 10px; background: var(--app-bg); color: var(--app-ink); resize: vertical; }
.ticket { border: 1px solid var(--app-line); border-radius: 10px; margin-bottom: 10px; background: var(--app-bg); }
.ticket summary { display: flex; gap: 12px; align-items: center; padding: 10px 14px; cursor: pointer; list-style: none; }
.ticket summary b { flex: 1; }
.ticket summary small { color: var(--app-muted); }
.tstatus { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 8px; background: var(--app-panel-2); color: var(--app-ink-2); }
.tstatus.open { background: rgba(63,191,168,.15); color: var(--app-accent); }
.thread { padding: 0 14px 10px; display: flex; flex-direction: column; gap: 8px; }
.thread .m { padding: 10px 12px; border-radius: 10px; background: var(--app-panel); }
.thread .m.admin { background: rgba(63,191,168,.10); }
.thread .m small { display: block; color: var(--app-muted); margin-bottom: 4px; }
.replybox { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 8px; }
/* folder tabs: every tab is a card on a shared baseline; the active one rises and joins the content */
.tabs { display: flex; gap: 3px; align-items: flex-end; margin-bottom: 18px; border-bottom: 1px solid var(--app-line); padding: 0 6px; }
.tabs button[data-tab] { font: inherit; font-size: 13px; padding: 8px 14px 7px; margin-bottom: -1px; border-radius: 10px 10px 0 0; border: 1px solid var(--app-line); border-bottom: 0; background: var(--app-panel-2); color: var(--app-ink-2); cursor: pointer; position: relative; transform: translateY(2px); transition: transform .12s, background .12s; }
.tabs button[data-tab]:hover { background: var(--app-panel); color: var(--app-ink); transform: translateY(1px); }
.tabs button[data-tab].on { background: var(--app-panel); color: var(--app-ink); font-weight: 600; transform: translateY(0); padding-top: 10px; box-shadow: inset 0 3px 0 var(--app-accent); z-index: 1; }
.tabs button[data-tab].on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--app-panel); }
.tabs .spacer { flex: 1; }
.tabs .sub, .tabs .sortsel, .tabs > .btn { margin-bottom: 8px; }
.tabs .sortsel { font-size: 13px; color: var(--app-ink-2); display: inline-flex; gap: 6px; align-items: center; }
.tabs .sortsel select, .tabs .sortsel input { font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--app-line); border-radius: 6px; background: var(--app-bg); color: var(--app-ink); }
.tabs > .btn { padding: 6px 12px; font-size: 13px; }
.gate { max-width: 560px; }
.ainput { font: inherit; padding: 7px 10px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-bg); color: var(--app-ink); width: 260px; }
.admt { min-width: 0; }
.admt .acts button { font: inherit; font-size: 12px; padding: 4px 8px; margin-right: 4px; border-radius: 6px; border: 1px solid var(--app-line); background: var(--app-panel-2); color: var(--app-ink); cursor: pointer; }
.admt .acts button.danger { color: var(--app-red); }
.seg2 { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--app-panel-2); }
.seg2 button { font: inherit; border: 0; background: none; padding: 5px 12px; border-radius: 7px; color: var(--app-muted); cursor: pointer; }
.seg2 button.on { background: var(--app-bg); color: var(--app-ink); font-weight: 600; }
.switchrow { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.switchrow input { margin-top: 4px; accent-color: var(--app-accent); width: 18px; height: 18px; }
.switchrow small { color: var(--app-muted); }

/* ---------- database filters, organized ---------- */
.dbfilters .body { display: flex !important; flex-direction: column; gap: 22px; padding: 20px 24px 8px; }
.fsec { display: flex; flex-direction: column; gap: 12px; padding: 0; }
.fsec-h { display: flex; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--app-line); padding-bottom: 8px; width: 100%; }
.fsec-h h3 { font-size: 14px; font-weight: 600; }
.fsec-h span { color: var(--app-muted); font-size: 12px; }
.catchips { display: flex; flex-wrap: wrap; gap: 8px; }
.catchip { font: inherit; font-size: 13px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 9px; border: 1px solid var(--app-line); background: var(--app-bg); color: var(--app-ink-2); cursor: pointer; }
.catchip small { color: var(--app-muted); font-size: 11px; }
.catchip:hover { border-color: var(--app-accent); color: var(--app-ink); }
.catchip.on { background: rgba(63,191,168,.14); border-color: var(--app-accent); color: var(--app-ink); }
.catchip.on small { color: var(--app-accent); }
.fgrid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; }
.fgrid3 { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 16px 24px; }
@media (max-width: 1100px) { .fgrid4 { grid-template-columns: repeat(2, 1fr); } .fgrid3 { grid-template-columns: 1fr; } }
.fulchips { display: flex; gap: 8px; flex-wrap: wrap; }
.fulchip { position: relative; }
.fulchip input { position: absolute; opacity: 0; width: 0; height: 0; }
.fulchip span { display: inline-block; padding: 8px 14px; border-radius: 9px; border: 1px solid var(--app-line); background: var(--app-bg); color: var(--app-ink-2); font-size: 13px; cursor: pointer; }
.fulchip input:checked + span { background: rgba(63,191,168,.14); border-color: var(--app-accent); color: var(--app-ink); }
.fulchip input:focus-visible + span { outline: 2px solid var(--app-accent); }
.ffoot { position: sticky; bottom: 0; display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--app-line); background: var(--app-panel-2); }
.ffoot .btn.go { background: #073f36; border-color: #05312b; color: #d8efe9; font-weight: 600; padding: 12px 26px; min-width: 240px; }
.ffoot .btn.go:hover { background: #0a5c50; color: #fff; }
.mode-filters #hidefilters { display: none; }
/* the old grid rules no longer apply to the body */
.mode-filters .dbfilters .body, .mode-results .dbfilters .body { grid-template-columns: none; }

/* categories left, fields right */
.fsplit { display: grid; grid-template-columns: minmax(360px, 46%) 1fr; gap: 24px 36px; align-items: start; }
.fieldcol { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.fieldcol .fgrid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fieldcol .fgrid3 { grid-template-columns: auto 1fr 1fr; gap: 14px 20px; }
/* Listing filters: fulfillment on its own row, the include/exclude fields side by side under it (they were squeezed
   into narrow columns beside the chips). */
.fgrid3.lstgrid, .fieldcol .fgrid3.lstgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fgrid3.lstgrid .ff.ful { grid-column: 1 / -1; }
.fgrid3.lstgrid .ff { min-width: 0; }
.fgrid3.lstgrid .ff .pair input { width: 100%; min-width: 0; }
.subempty { color: var(--app-muted); font-size: 13px; margin: 0; }
@media (max-width: 1100px) { .fsplit { grid-template-columns: 1fr; } }
.catq { font: inherit; font-size: 13px; margin-left: auto; padding: 5px 10px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-bg); color: var(--app-ink); width: 180px; }
.catgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.catgrid .catchip { justify-content: space-between; text-align: left; min-width: 0; }
.catgrid .catchip .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catgrid .catchip small { flex: 0 0 auto; }
.subcats { display: flex; flex-direction: column; gap: 10px; }
.subgroup { padding: 10px 12px; border: 1px dashed var(--app-line); border-radius: 10px; background: rgba(63,191,168,.04); }
.subh { font-size: 12px; font-weight: 600; color: var(--app-ink-2); margin-bottom: 8px; }
.subh span { color: var(--app-muted); font-weight: 400; }
.subchips { display: flex; flex-wrap: wrap; gap: 6px; }
.catchip.sub { padding: 5px 10px; font-size: 12px; }

/* ---------- theme control ---------- */
.ib { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-panel); color: var(--app-ink-2); cursor: pointer; font-size: 17px; }
.ib:hover { color: var(--app-ink); background: var(--app-panel-2); }
.ib svg { width: 18px; height: 18px; }
.themewrap { position: relative; }
.thememenu { position: absolute; right: 0; top: calc(100% + 8px); width: 260px; padding: 12px; border-radius: 10px; background: var(--app-panel); border: 1px solid var(--app-line); box-shadow: 0 16px 40px rgba(0,0,0,.4); z-index: 50; }
.tm-row { display: flex; gap: 6px; margin-bottom: 12px; }
.tm-row button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-size: 13px; padding: 7px; border-radius: 8px; border: 1px solid var(--app-line); background: var(--app-bg); color: var(--app-ink-2); cursor: pointer; }
.tm-row button svg { width: 15px; height: 15px; }
.tm-row button.on { background: var(--app-accent-deep); border-color: var(--app-accent-deep); color: #fff; }
.tm-shade { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; color: var(--app-ink-2); }
.tm-shade span { color: var(--app-muted); }
.tm-shade input { width: 100%; accent-color: var(--app-accent); }
.thememenu small { display: block; margin-top: 6px; color: var(--app-muted); font-size: 12px; }
/* Page size (shell.js, Zoom): <html> carries "zoom" and the same number in --zoom. Zoom scales every length, viewport
   units included, so each vh/vw in this file is divided by var(--zoom, 1) to keep meaning "of the window". Write new
   ones the same way: calc(100vh / var(--zoom, 1)). */
.zoommenu { width: 220px; }
.zm-row { display: flex; align-items: center; gap: 8px; }
.zm-row b { flex: 1; text-align: center; font-size: 15px; font-weight: var(--app-fw-b, 600); color: var(--app-ink); font-variant-numeric: tabular-nums; }
.zm-row button { width: 44px; height: 34px; display: grid; place-items: center; font: inherit; font-size: 20px; line-height: 1; border-radius: 8px; border: 1px solid var(--app-line); background: var(--app-bg); color: var(--app-ink); cursor: pointer; }
.zm-row button:hover:not(:disabled) { background: var(--app-panel-2); }
.zm-row button:disabled, .zm-reset:disabled { opacity: .4; cursor: default; }
.zm-reset { width: 100%; margin-top: 10px; font: inherit; font-size: 13px; padding: 7px; border-radius: 8px; border: 1px solid var(--app-line); background: var(--app-bg); color: var(--app-ink-2); cursor: pointer; }
.zm-reset:hover:not(:disabled) { color: var(--app-ink); background: var(--app-panel-2); }
@media (max-width: 900px) { .zoomwrap { display: none; } }
/* light theme adjustments */
html.light { --app-accent: #0e7c6b; --app-accent-deep: #0a5c50; }
html.light .side .logo img { filter: none; }
html.light .plan-card, html.light .sec, html.light .tile { box-shadow: 0 1px 2px rgba(23,32,38,.06); }
html.light .filter-tab { color: #fff; }
html.light .thread .m.admin { background: rgba(14,124,107,.10); }
html.light .catchip.on, html.light .fulchip input:checked + span { background: rgba(14,124,107,.12); }

/* ---------- light theme: deep-pine sidebar, mint canvas, white panels ---------- */
html.light .side { --app-ink: #eef4f2; --app-ink-2: #cfe0db; --app-muted: #86a9a1; --app-panel: rgba(255,255,255,.07); --app-panel-2: rgba(255,255,255,.13); --app-line: rgba(255,255,255,.12); --app-accent: #5fd3bb; border-right-color: #0d2724; }
html.light .side a.nav, html.light .side .nav { background: transparent; }
html.light .side a.nav:hover { background: rgba(255,255,255,.06); }
html.light .side a.nav.on { background: transparent; color: #fff; box-shadow: inset 3px 0 0 #5fd3bb; }
html.light .side a.nav.on svg { color: #5fd3bb; }
html.light .side .plan-card { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); color: #dbe8e4; }
html.light .side .plan-card b { color: #ffffff; }
html.light .side .plan-card .btn { background: rgba(255,255,255,.12); border-color: transparent; color: #eef4f2; }
html.light .side .ver { color: #86a9a1; }
html.light .topbar { background: var(--app-panel); }
html.light .sec, html.light .panel { box-shadow: 0 1px 3px rgba(23,32,38,.06); }
html.light .sec > header { background: var(--app-panel-2); }
html.light .tile { background: #fff; }
html.light .tiles { background: var(--app-line); }
html.light .btn { background: #fff; }
html.light .btn:hover { background: var(--app-panel-2); }
html.light .filter-bar { background: #0e7c6b; }
html.light .filter-tab { background: #0e7c6b; border-color: #0a5c50; color: #fff; }
html.light .filter-tab:hover { background: #0a5c50; }
html.light .ffoot { background: var(--app-panel-2); }
html.light .subgroup { background: rgba(14,124,107,.05); }
/* inputs stay pure white whatever the shade */
html.light .app .field input, html.light .app .field select, html.light .app .field textarea, html.light .dbfilters .pair input, html.light .catq, html.light .ainput, html.light .app textarea, html.light .sortsel select, html.light .keybox code { background: #fff !important; color: var(--app-ink); border-color: var(--app-line); }
html.light .catchip, html.light .fulchip span, html.light .chipbtn, html.light .catchip.sub { background: #fff; }
html.light .catchip.on, html.light .fulchip input:checked + span, html.light .chipbtn.on { background: rgba(14,124,107,.10); border-color: var(--app-accent); }
html.light .chipbtn.on { background: var(--app-accent-deep); color: #fff; }
html.light .dbt th { background: var(--app-panel-2); }
html.light .dbt tbody tr:hover td { background: var(--app-panel-2); }
html.light .thememenu, html.light .colsmenu { background: #fff; }
html.light .zm-row button, html.light .zm-reset { background: #f6f5f0; }

/* every typed field in the main area is pure white in the light theme */
html.light .main input:not([type=checkbox]):not([type=range]):not([type=radio]), html.light .main textarea, html.light .main select { background: #fff !important; color: var(--app-ink); }

.spark { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.spark small { color: var(--app-muted); font-size: 10px; margin-top: 2px; }
.spark .dim { color: var(--app-muted); font-style: normal; font-size: 11px; }

/* ---------- My Amazon ---------- */
.feat { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 10px; }
.feat li { padding-left: 14px; border-left: 3px solid var(--app-accent); color: var(--app-ink-2); }
.feat li b { display: block; color: var(--app-ink); margin-bottom: 2px; }
.alist { display: flex; flex-direction: column; gap: 8px; }
.al { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--app-line); border-radius: 10px; background: var(--app-bg); }
.al.new { border-color: var(--app-accent); }
.al .ai { font-size: 18px; }
.al small { color: var(--app-muted); }
.cogs { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; max-height: 320px; overflow: auto; }
.cog { display: grid; grid-template-columns: 1fr 130px; gap: 10px; align-items: center; font-size: 13px; }
.cog small { display: block; color: var(--app-muted); font-size: 11px; }
.cog input { font: inherit; padding: 6px 8px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-bg); color: var(--app-ink); }
.dbt td.ok { color: var(--app-accent); font-weight: 600; }

.btn .spin, .body .spin { width: 14px; height: 14px; border-width: 2px; vertical-align: -2px; margin-right: 6px; }

/* ---- product tracker ---- */
.trkpage { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 1000px) { .trkpage { grid-template-columns: 1fr; } }
.trklists { position: sticky; top: 20px; }
.trklist { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.trkl { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; font: inherit; font-size: 14px; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--app-ink-2); cursor: pointer; }
.trkl:hover { background: var(--app-panel-2); color: var(--app-ink); }
.trkl.on { background: var(--app-accent-deep); color: #fff; }
.trkl .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trkl small { color: inherit; opacity: .7; font-size: 12px; margin-left: auto; }
.trkl .lacts { display: none; gap: 2px; margin-left: 4px; }
.trkl:hover .lacts { display: inline-flex; }
.trkl .lacts button { font: inherit; font-size: 12px; width: 22px; height: 22px; border: 0; border-radius: 5px; background: rgba(127,127,127,.15); color: inherit; cursor: pointer; }
.trkl .lacts button:hover { background: rgba(127,127,127,.3); }
.trkempty { color: var(--app-muted); font-size: 13px; padding: 8px 10px; }
.trkhelp { border-top: 1px solid var(--app-line); }
.trkhelp p { color: var(--app-muted); font-size: 13px; margin: 0; }
.trkmain .sec > header { flex-wrap: wrap; row-gap: 10px; }
.trktabs { margin: 0; }
.trktabs .badge { display: inline-block; min-width: 18px; padding: 1px 5px; margin-left: 4px; border-radius: 9px; background: var(--app-red); color: #fff; font-size: 11px; text-align: center; }
.trktabs .badge.hidden { display: none; }
.trkt { min-width: 1180px; }
.trkt td .v { font-weight: 600; }
.trkt td .v.good { color: var(--app-accent); }
.trkt .chg { display: block; font-size: 11px; color: var(--app-muted); }
.trkt .chg.up { color: var(--app-accent); }
.trkt .chg.down { color: var(--app-red); }
.trkt .cat { display: inline-block; padding: 2px 8px; border-radius: 10px; background: var(--app-panel-2); border: 1px solid var(--app-line); font-size: 12px; }
.trkt .note { color: var(--app-ink-2); font-size: 12px; margin-top: 3px; font-style: italic; }
.trkt tr.hit td:first-child { box-shadow: inset 3px 0 0 var(--app-accent); }
.trkt tr.detail td { background: var(--app-bg); text-align: left; white-space: normal; }
.trkt .acts { white-space: nowrap; }
.trkt .ib.sm { width: 28px; height: 28px; font-size: 14px; display: inline-grid; vertical-align: middle; margin-left: 4px; }
.menuwrap { position: relative; display: inline-block; }
.rowmenu { position: absolute; right: 0; top: 32px; z-index: 5; min-width: 220px; padding: 6px; border-radius: 10px; background: var(--app-panel); border: 1px solid var(--app-line); box-shadow: 0 10px 30px rgba(0,0,0,.25); display: flex; flex-direction: column; text-align: left; }
.rowmenu.hidden { display: none; }
.rowmenu button, .rowmenu a { font: inherit; font-size: 13px; text-align: left; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: var(--app-ink); cursor: pointer; text-decoration: none; }
.rowmenu button:hover, .rowmenu a:hover { background: var(--app-panel-2); }
.rowmenu .danger { color: var(--app-red); }
.trkchart { padding: 8px 6px; }
.trkchart .ch-h { display: flex; gap: 12px; align-items: baseline; margin-bottom: 6px; font-size: 13px; }
.trkchart .chart { width: 100%; max-width: 900px; height: auto; display: block; background: var(--app-panel); border: 1px solid var(--app-line); border-radius: 10px; }
.trkchart .legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--app-ink-2); }
.trkchart .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.trkintro { text-align: left; max-width: 640px; }
.trkintro h3 { font-size: 16px; margin-bottom: 6px; }
.trkswitch { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--app-line); border-radius: 10px; background: var(--app-bg); margin-bottom: 16px; font-size: 13px; }
.trkswitch label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.trkswitch input { accent-color: var(--app-accent); margin-top: 3px; }
.al.new { border-color: var(--app-accent); }
.al .tag { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 8px; background: var(--app-panel-2); color: var(--app-ink-2); white-space: nowrap; }
.al .tag.good { color: var(--app-accent); background: rgba(63,191,168,.12); }
.al .tag.warn { color: var(--app-amber); background: rgba(232,151,30,.12); }
.al .meta { color: var(--app-muted); font-size: 12px; margin-top: 3px; }
.al .meta a { color: inherit; }
.dim { color: var(--app-muted); }
/* modal + toast */
.trk-modal { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.45); display: grid; place-items: center; padding: 20px; }
.trk-box { width: 100%; max-width: 620px; background: var(--app-panel); border: 1px solid var(--app-line); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.35); color: var(--app-ink); }
.trk-box > header { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--app-line); }
.trk-box > header h2 { font-size: 16px; }
.trk-box .body { padding: 18px; }
.trk-box .field { margin-bottom: 12px; }
.trk-box .field label { color: var(--app-ink-2); font-size: 13px; }
.trk-box .field input, .trk-box .field textarea, .trk-box .field select { font: inherit; width: 100%; padding: 10px 12px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-bg); color: var(--app-ink); }
.trk-box .field textarea { resize: vertical; font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
.trk-box .two { gap: 14px; }
.trk-box .row { display: flex; gap: 10px; margin-top: 6px; }
html.light .trk-box .field input, html.light .trk-box .field textarea, html.light .trk-box .field select { background: #fff !important; }
.trk-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; z-index: 60; max-width: 560px; padding: 12px 16px; border-radius: 10px; background: var(--app-side); color: #eef4f2; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: .25s; }
.trk-toast.on { transform: translate(-50%, 0); opacity: 1; }

/* tracker: change badges, columns, notification options */
.trkt td.cell { position: relative; }
.trkt .imgwrap { position: relative; display: inline-block; flex: none; }
.chgbadge { position: absolute; top: 2px; right: 6px; z-index: 2; font: inherit; font-size: 10px; font-weight: 700; line-height: 1; padding: 3px 6px; border-radius: 9px; border: 0; cursor: pointer; background: var(--app-panel-2); color: var(--app-ink-2); box-shadow: 0 1px 3px rgba(0,0,0,.25); white-space: nowrap; }
.chgbadge.good { background: var(--app-accent); color: #fff; }
.chgbadge.warn { background: var(--app-amber); color: #172026; }
.chgbadge:hover { filter: brightness(1.1); }
.imgwrap .chgbadge { top: -6px; right: -8px; left: auto; }
.trkt tr.changed td.c-product { box-shadow: inset 3px 0 0 var(--app-amber); }
.trkt tr.hit.changed td.c-product { box-shadow: inset 3px 0 0 var(--app-accent); }
.nopts { display: grid; gap: 6px; margin: 8px 0 10px; }
.nopt { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.nopt input[type=checkbox] { accent-color: var(--app-accent); margin: 0; }
.nopt.mail { margin: 4px 0 8px; padding-top: 10px; border-top: 1px solid var(--app-line); }
.nnum { width: 62px; font: inherit; font-size: 13px; padding: 3px 6px; border: 1px solid var(--app-line); border-radius: 6px; background: var(--app-bg); color: var(--app-ink); text-align: right; }
html.light .nnum { background: #fff; }
.ahead { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 10px; }
.ahead h3 { font-size: 14px; }
.ahead .spacer { flex: 1; }
.al .btn { padding: 4px 10px; font-size: 12px; }

/* database presets */
.preset-desc { margin: 10px 0 0; font-size: 13px; color: var(--app-ink-2); line-height: 1.5; }
.preset-desc.hidden { display: none; }
.preset-desc b { color: var(--app-accent); }
.dbfilters input.preset { border-color: var(--app-accent); box-shadow: 0 0 0 2px rgba(63,191,168,.18); }

/* ---- profit calculator ---- */
.calcpage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 1100px) { .calcpage { grid-template-columns: 1fr; } }
.calccol { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.asinrow { display: flex; gap: 8px; }
.asinrow input { flex: 1; font: inherit; padding: 10px 12px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-bg); color: var(--app-ink); }
html.light .asinrow input { background: #fff; }
.pcard { display: flex; gap: 12px; margin-top: 12px; padding: 12px; border: 1px solid var(--app-line); border-radius: 10px; background: var(--app-bg); }
.pcard img { width: 64px; height: 64px; object-fit: contain; border-radius: 6px; background: #fff; flex: none; }
.pcard .meta { color: var(--app-muted); font-size: 12px; margin-top: 2px; }
.pcard a { color: var(--app-ink); text-decoration: none; }
.calcform .fgroup { margin-bottom: 18px; }
.calcform .fgroup:last-child { margin-bottom: 0; }
.calcform h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--app-muted); margin-bottom: 8px; }
.calcform h3 small { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; }
.calcform .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
@media (max-width: 560px) { .calcform .two { grid-template-columns: 1fr; } }
.calcform .field { margin: 0; }
.calcform .field label { display: block; font-size: 12px; color: var(--app-ink-2); margin-bottom: 4px; }
.calcform .field small { display: block; color: var(--app-muted); font-size: 11px; margin-top: 3px; line-height: 1.35; }
.calcform .inp { display: flex; align-items: center; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-bg); overflow: hidden; }
html.light .calcform .inp, html.light .calcform select, html.light .calcform .dims input { background: #fff; }
.calcform .inp input { flex: 1; min-width: 0; font: inherit; padding: 9px 10px; border: 0; background: transparent; color: var(--app-ink); text-align: right; }
.calcform .inp.pre input { text-align: left; }
.calcform .inp span { padding: 0 10px; color: var(--app-muted); font-size: 12px; white-space: nowrap; }
.calcform .inp:focus-within { border-color: var(--app-accent); }
.calcform select { width: 100%; font: inherit; padding: 9px 10px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-bg); color: var(--app-ink); }
.calcform .dims { display: flex; align-items: center; gap: 4px; }
.calcform .dims input { width: 100%; min-width: 0; font: inherit; padding: 9px 6px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-bg); color: var(--app-ink); text-align: center; }
.calcform .dims span { color: var(--app-muted); font-size: 12px; }
.calcform .tier { padding: 9px 10px; border: 1px dashed var(--app-line); border-radius: 8px; color: var(--app-ink-2); font-size: 14px; }
.calcform .chk { display: flex; gap: 8px; align-items: center; padding: 9px 0; font-size: 13px; color: var(--app-ink); cursor: pointer; }
.calcform .chk input { accent-color: var(--app-accent); margin: 0; }
.segrow { display: flex; gap: 6px; margin-bottom: 12px; }
.segopt { flex: 1; text-align: center; padding: 9px 10px; border: 1px solid var(--app-line); border-radius: 8px; font-size: 13px; cursor: pointer; color: var(--app-ink-2); }
.segopt input { display: none; }
.segopt.on { background: var(--app-accent-deep); border-color: var(--app-accent-deep); color: #fff; font-weight: 600; }
.bignums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
@media (max-width: 700px) { .bignums { grid-template-columns: 1fr 1fr; } }
.bn { padding: 12px; border-radius: 10px; background: var(--app-bg); border: 1px solid var(--app-line); display: flex; flex-direction: column; gap: 2px; }
.bn .l { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--app-muted); }
.bn .v { font-family: Poppins, sans-serif; font-size: 22px; font-weight: 700; }
.bn small { color: var(--app-muted); font-size: 11px; }
.bn.good .v, .v.good, .good { color: var(--app-accent); }
.bn.bad .v, .v.bad, .bad { color: var(--app-red); }
.pbar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--app-panel-2); margin: 4px 0 8px; }
.pbar span { display: block; height: 100%; min-width: 2px; }
.plegend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--app-ink-2); margin-bottom: 14px; }
.plegend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.calct { width: 100%; border-collapse: collapse; font-size: 13px; }
.calct th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--app-muted); padding: 6px 8px; border-bottom: 1px solid var(--app-line); }
.calct td { padding: 7px 8px; border-bottom: 1px solid var(--app-line); vertical-align: top; }
.calct td small { display: block; color: var(--app-muted); font-size: 11px; }
.calct .r { text-align: right; white-space: nowrap; }
.calct tr.top td { font-weight: 600; }
.calct tr.total td { font-weight: 700; font-size: 14px; border-top: 2px solid var(--app-line); border-bottom: 0; }
.calct tr.cur td { background: var(--app-panel-2); font-weight: 600; }
.calct.sens { margin-bottom: 8px; }
.calckv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
@media (max-width: 560px) { .calckv { grid-template-columns: 1fr; } }
.calckv > div { padding: 10px 12px; border: 1px solid var(--app-line); border-radius: 10px; display: flex; flex-direction: column; }
.calckv .l { font-size: 12px; color: var(--app-ink-2); }
.calckv .v { font-family: Poppins, sans-serif; font-size: 18px; font-weight: 600; }
.calckv small { color: var(--app-muted); font-size: 11px; }
.senh { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--app-muted); margin: 6px 0 6px; }
.calcnote { font-size: 12px; line-height: 1.45; }
.calcintro { text-align: left; }
.calcintro h3 { font-size: 16px; margin-bottom: 6px; }
.scen tr.on td { background: var(--app-panel-2); }
.scen .acts { white-space: nowrap; }
.scen .acts .btn { padding: 4px 10px; font-size: 12px; margin-right: 4px; }
.calclink { color: var(--app-accent); text-decoration: none; }
.calclink:hover { text-decoration: underline; }

/* ---- keyword research ---- */
.kwpage { display: flex; flex-direction: column; gap: 22px; }
.kwsearch { display: flex; gap: 8px; }
.kwsearch input { flex: 1; font: inherit; padding: 10px 12px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-bg); color: var(--app-ink); }
.kwsearch select { font: inherit; padding: 10px 12px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-bg); color: var(--app-ink); max-width: 220px; }
html.light .kwsearch input, html.light .kwsearch select, html.light .kwtools input, html.light .kwtools select, html.light .notein { background: #fff; }
.kwrecent { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; }
.kwrecent .lbl, .kwfreq .lbl { font-size: 12px; color: var(--app-muted); margin-right: 4px; }
.chipbtn small, .kwtabs small { font-weight: 400; opacity: .7; }
.chipbtn.sm { padding: 3px 9px; font-size: 12px; }
.kwintro { max-width: 720px; margin: 8px auto; padding: 28px 8px; text-align: left; color: var(--app-ink-2); line-height: 1.55; }
.kwintro h3 { font-size: 18px; margin-bottom: 8px; color: var(--app-ink); font-family: Poppins, sans-serif; }
.kwintro p { margin: 0 0 12px; }
.kwintro ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.kwintro li b { color: var(--app-ink); }
.kwres > header { flex-wrap: wrap; row-gap: 8px; }
.kwtabs { display: flex; gap: 4px; flex-wrap: wrap; }
.kwtabs button { font: inherit; font-size: 13px; padding: 7px 8px 7px 12px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-bg); color: var(--app-ink-2); cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.kwtabs button.on { background: var(--app-accent-deep); border-color: var(--app-accent-deep); color: #fff; }
.kwtabs button span { opacity: .6; padding: 0 3px; }
.kwtabs button span:hover { opacity: 1; }
/* The open seeds compared, in one line (0.59.4): coloured seed names, then a tile per figure. */
.kwcmp { --kc0: var(--app-accent); --kc1: var(--app-amber); --kc2: #a39bff; --kc3: #6cb6f0; display: flex; align-items: stretch; gap: 0; margin-bottom: 14px; padding: 8px 6px; border: 1px solid var(--app-line); border-radius: 10px; background: linear-gradient(180deg, var(--app-panel-2), var(--app-panel)); overflow-x: auto; white-space: nowrap; scrollbar-width: thin; }
html.light .kwcmp { --kc1: #c27a06; --kc2: #6a5fd8; --kc3: #2f7fc4; }
.kwcmp .kc-seeds { display: flex; align-items: center; gap: 8px; padding: 0 14px 0 8px; margin-right: 4px; border-right: 1px solid var(--app-line); }
.kwcmp .kc-seed { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; color: var(--app-ink); }
.kwcmp .kc-seed i { width: 9px; height: 9px; border-radius: 50%; background: var(--kc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kc) 22%, transparent); }
.kwcmp .kc-seed small { color: var(--app-muted); font-weight: 500; }
.kwcmp .kc-vs { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--app-muted); }
.kwcmp .kc-t { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 2px 14px; border-right: 1px solid var(--app-line); }
.kwcmp .kc-t:last-child { border-right: 0; }
.kwcmp .kc-t small { font-size: 10px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--app-muted); }
.kwcmp .kc-t div { display: flex; align-items: baseline; gap: 5px; font-size: 14px; font-variant-numeric: tabular-nums; }
.kwcmp .kc-t b { font-weight: 500; color: var(--kc); opacity: .8; }
.kwcmp .kc-t b.kc-best { font-weight: 700; opacity: 1; }
.kwcmp .kc-dot { font-style: normal; color: var(--app-muted); opacity: .6; }
.kwcmp .kc-shared b { color: var(--app-ink); font-weight: 700; opacity: 1; }
.kwcmp .kc-s0 { --kc: var(--kc0); } .kwcmp .kc-s1 { --kc: var(--kc1); } .kwcmp .kc-s2 { --kc: var(--kc2); } .kwcmp .kc-s3 { --kc: var(--kc3); }
.kwfreq { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.kwfreq .chip { font: inherit; font-size: 12px; padding: 3px 9px; border-radius: 10px; border: 1px solid var(--app-line); background: var(--app-panel-2); color: var(--app-ink); cursor: pointer; }
.kwfreq .chip b { color: var(--app-muted); font-weight: 600; margin-left: 3px; }
.kwfreq .chip.pair { border-color: var(--app-accent); }
.kwtools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; font-size: 13px; color: var(--app-ink-2); }
.kwtools input, .kwtools select { font: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-bg); color: var(--app-ink); }
.kwtools .chk { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.kwtools .chk input { accent-color: var(--app-accent); margin: 0; }
.kwtools .spacer { flex: 1; }
.kwt { min-width: 1080px; }
.kwt th[data-sort] { cursor: pointer; }
.kwt th.on { color: var(--app-accent); }
.kwt .kwname b { color: var(--app-accent-deep); font-weight: 600; }
html:not(.light) .kwt .kwname b { color: var(--app-accent); }
.kwt .tag { display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 6px; margin-left: 6px; background: var(--app-panel-2); color: var(--app-ink-2); vertical-align: middle; }
.kwt .tag.hot { background: rgba(240,168,58,.18); color: var(--app-amber); }
.kwt .tag.saved { background: rgba(63,191,168,.15); color: var(--app-accent); }
.sbar { display: inline-flex; align-items: center; gap: 6px; width: 110px; }
.sbar i { display: block; height: 8px; border-radius: 4px; background: var(--app-accent); max-width: 70px; flex: none; }
.sbar span { font-size: 12px; color: var(--app-ink-2); }
.opp { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; color: #fff; background: #8d9aa2; }
.opp.high { background: var(--app-accent-deep); }
.opp.medium { background: var(--app-amber); color: #172026; }
.opp.unknown { background: var(--app-panel-2); color: var(--app-muted); }
/* Competitor strength: Low is the beatable one (green), High the hard one (red). */
/* Competitor strength under its column: just the level, in a quiet tint that sits in the table (not a badge). */
.cstr { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px; white-space: nowrap; cursor: help; color: #d9b877; background: rgba(240,168,58,.09); border: 1px solid rgba(240,168,58,.16); }
.cstr.low { color: #86c9bc; background: rgba(63,191,168,.08); border-color: rgba(63,191,168,.15); }
.cstr.high { color: #dc9a93; background: rgba(214,69,58,.10); border-color: rgba(214,69,58,.18); }
html.light .cstr { color: #8a6420; background: #fbf6ec; border-color: #f0e6d0; }
html.light .cstr.low { color: #2f7468; background: #f1f7f5; border-color: #dcebe7; }
html.light .cstr.high { color: #a8473f; background: #fbf1ef; border-color: #f0d9d6; }
.dbt .subrank { display: block; font-size: 11px; color: var(--app-muted); white-space: nowrap; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.kwt .acts, .kwsaved .acts { white-space: nowrap; }
.kwt .acts .btn, .kwsaved .acts .btn { padding: 4px 9px; font-size: 12px; margin-right: 4px; }
.kwt tr.detail td { background: var(--app-bg); text-align: left; }
.kwtrend .ch-h { display: flex; gap: 12px; align-items: baseline; margin-bottom: 4px; font-size: 13px; }
.chart.small { width: 100%; max-width: 520px; height: auto; display: block; background: var(--app-panel); border: 1px solid var(--app-line); border-radius: 8px; }
.kwnote { font-size: 12px; line-height: 1.45; margin-top: 10px; }
.notein { width: 100%; min-width: 180px; font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--app-line); border-radius: 6px; background: var(--app-bg); color: var(--app-ink); }
.kwfreq .chip.rel { border-color: var(--app-amber); }
.bigstat { font-family: Poppins, sans-serif; font-size: 28px; font-weight: 700; margin-bottom: 6px; color: var(--app-accent); }
.bigstat small { font-family: inherit; font-size: 13px; font-weight: 500; color: var(--app-muted); }
.kwsources { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; font-size: 13px; }
.kwsources .lbl { font-size: 12px; color: var(--app-muted); margin-right: 4px; }
.kwsources .dim { flex-basis: 100%; font-size: 12px; margin-top: 2px; }
.srcchk { display: inline-flex; gap: 6px; align-items: center; padding: 5px 10px; border: 1px solid var(--app-line); border-radius: 10px; cursor: pointer; color: var(--app-ink-2); }
.srcchk.on { border-color: var(--app-accent); color: var(--app-ink); background: rgba(63,191,168,.1); }
.srcchk input { accent-color: var(--app-accent); margin: 0; }
.srcrow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; font-size: 12px; }
.srcst { display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--app-line); color: var(--app-ink-2); }
.srcst.ok b { color: var(--app-accent); }
.srcst.bad { color: var(--app-red); border-color: rgba(255,138,128,.4); }
.srcst .btn.sm { padding: 2px 8px; font-size: 11px; }
.kwt.multi { min-width: 1200px; }
.sbar.sm { width: 74px; }
.sbar.sm i { max-width: 46px; }
.probe { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: var(--app-bg); border: 1px solid var(--app-line); font-size: 12px; white-space: pre-wrap; color: var(--app-ink-2); }
.probe:empty { display: none; }
.kwpager { display: flex; gap: 8px; align-items: center; margin: 8px 0; font-size: 13px; color: var(--app-ink-2); }
.kwpager select { font: inherit; font-size: 13px; padding: 4px 8px; border: 1px solid var(--app-line); border-radius: 6px; background: var(--app-bg); color: var(--app-ink); }
.kwpager .btn { padding: 4px 10px; font-size: 12px; }
.kwpager .btn:disabled { opacity: .4; cursor: default; }
.kwpager .spacer { flex: 1; }
/* the header row stays visible while the list scrolls */
.kwwrap { max-height: calc(calc(100vh / var(--zoom, 1)) - 150px); overflow: auto; }
.kwwrap thead th { position: sticky; top: 0; z-index: 3; background: var(--app-panel-2); box-shadow: inset 0 -1px 0 var(--app-line); }
.savedsec.hidden { display: none; }
.savedbody { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 18px; }
@media (max-width: 900px) { .savedbody { grid-template-columns: 1fr; } }
.savedlist { border-right: 1px solid var(--app-line); padding-right: 10px; max-height: calc(70vh / var(--zoom, 1)); overflow: auto; }
.savedhead { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.savedhead h3 { font-size: 15px; }
.savedhead .spacer { flex: 1; }
#savedbtn b { margin-left: 4px; color: var(--app-accent); }
.kwnote.top { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: var(--app-bg); border: 1px solid var(--app-line); color: var(--app-ink-2); }
.kwnote.top b { color: var(--app-ink); }
.kwtools .colswrap { position: relative; }

/* ---- rank tracker ---- */
.ranks { display: flex; flex-direction: column; gap: 22px; }
.rankshelp { margin-top: 10px; font-size: 13px; line-height: 1.5; }
.bignums.r4 { grid-template-columns: repeat(4, 1fr); margin: 14px 0; }
.rankt { min-width: 1000px; }
.rankt th[data-sort] { cursor: pointer; }
.rankt th.on { color: var(--app-accent); }
.rankt .chg.up { color: var(--app-accent); font-weight: 600; }
.rankt .chg.down { color: var(--app-red); font-weight: 600; }
.rankt tr.isnew td:first-child { box-shadow: inset 3px 0 0 var(--app-amber); }
.rankt tr.detail td { background: var(--app-bg); text-align: left; white-space: normal; }
.rankt .tag { display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 6px; background: var(--app-panel-2); color: var(--app-ink-2); }
.rankt .tag.hot { background: rgba(240,168,58,.18); color: var(--app-amber); }
.rspark { display: block; }
.rchart { padding: 8px 6px; }
.rchart .ch-h { display: flex; gap: 12px; align-items: baseline; margin-bottom: 6px; font-size: 13px; }
.rchart .chart { width: 100%; max-width: 900px; height: auto; display: block; background: var(--app-panel); border: 1px solid var(--app-line); border-radius: 10px; }
/* tracker: watched keywords */
.kwwatch { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--app-line); }
.kwwatch h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--app-muted); margin-bottom: 8px; }
.kwwatch .addrow { display: flex; gap: 8px; margin: 8px 0; }
.kwwatch .addrow input { flex: 1; max-width: 360px; font: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-bg); color: var(--app-ink); }
.kwwatch table { min-width: 0; width: auto; }
.kwwatch .sugg { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; font-size: 12px; color: var(--app-muted); }
.trkt .kwbtn { padding: 3px 9px; font-size: 11px; }
.kwwt .chg.up { color: var(--app-accent); font-weight: 600; }
.kwwt .chg.down { color: var(--app-red); font-weight: 600; }
.disc { margin: 12px 0 16px; padding: 12px 14px; border: 1px dashed var(--app-line); border-radius: 10px; }
.disc h4 { font-size: 14px; margin-bottom: 4px; }
.disc .dim { font-size: 13px; line-height: 1.45; }
.cands { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 14px; margin: 10px 0; }
.cand { display: flex; gap: 8px; align-items: center; font-size: 13px; cursor: pointer; }
.cand input { accent-color: var(--app-accent); margin: 0; }
.cand small { color: var(--app-muted); }
.disc .addrow { display: flex; gap: 8px; align-items: center; }
.disc .addrow input { font: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-bg); color: var(--app-ink); width: 280px; }
.disc .addrow .spacer { flex: 1; }
.segrow.mk { flex-wrap: wrap; }
.segrow.mk .segopt { flex: 1 1 140px; }
.mknote { display: block; color: var(--app-muted); font-size: 12px; line-height: 1.45; margin-top: 6px; }
.calct.mkt { margin-bottom: 4px; }
.calct.mkt td small { display: inline; margin-left: 6px; color: var(--app-muted); font-size: 11px; }

/* ---- listing export ---- */
.lstpage { display: flex; flex-direction: column; gap: 22px; }
.lstgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
@media (max-width: 1000px) { .lstgrid { grid-template-columns: 1fr; } }
.lstgrid .lbl { display: block; font-size: 12px; color: var(--app-ink-2); margin-bottom: 6px; }
.lstgrid textarea { width: 100%; font: inherit; font-size: 13px; font-family: ui-monospace, Menlo, monospace; padding: 10px 12px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-bg); color: var(--app-ink); resize: vertical; }
html.light .lstgrid textarea, html.light .lstopts input, html.light .lstopts select { background: #fff; }
.lstpick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; font-size: 12px; }
.lstopts { margin-top: 12px; }
.lstopts .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.lstopts .field { margin: 0; }
.lstopts .field label { display: block; font-size: 12px; color: var(--app-ink-2); margin-bottom: 4px; }
.lstopts .field input, .lstopts .field select { width: 100%; font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-bg); color: var(--app-ink); }
.lstopts .field small { display: block; color: var(--app-muted); font-size: 11px; margin-top: 3px; }
.lstacts { display: flex; gap: 12px; align-items: center; margin-top: 14px; }
.lstt { min-width: 900px; }
.lstt tr.warnrow td:first-child { box-shadow: inset 3px 0 0 var(--app-amber); }
.lstt .flag { font-size: 12px; color: var(--app-amber); }
.lstt .good { color: var(--app-accent); font-weight: 600; }
.lstissues { display: grid; gap: 4px; margin-bottom: 12px; }
.lstcols { margin-top: 12px; font-size: 13px; }
.lstcols summary { cursor: pointer; color: var(--app-ink-2); }
.lstcols code { font-size: 11px; background: var(--app-panel-2); padding: 1px 5px; border-radius: 4px; }
.segrow.src { margin-bottom: 14px; max-width: 520px; }
.lstconnect { padding: 14px; border: 1px dashed var(--app-line); border-radius: 10px; font-size: 13px; color: var(--app-ink-2); }
.lsttools { display: flex; gap: 8px; margin: 6px 0 8px; }
.lsttools input { flex: 1; font: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-bg); color: var(--app-ink); }
html.light .lsttools input { background: #fff; }
.minelist { max-height: 340px; overflow: auto; border: 1px solid var(--app-line); border-radius: 10px; }
.mine { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--app-line); cursor: pointer; font-size: 13px; }
.mine:last-child { border-bottom: 0; }
.mine.on { background: rgba(63,191,168,.08); }
.mine input { grid-row: span 2; accent-color: var(--app-accent); margin: 0; }
.mine .nm { color: var(--app-ink); }
.mine .meta { color: var(--app-muted); font-size: 11px; }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; }
.bars .bar { flex: 1; display: flex; align-items: flex-end; height: 100%; }
.bars .bar i { display: block; width: 100%; background: var(--app-accent); border-radius: 3px 3px 0 0; }
.pubres { margin-bottom: 12px; }
ul.plain { padding-left: 18px; display: grid; gap: 6px; }
.admt tr.warnrow td:first-child { box-shadow: inset 3px 0 0 var(--app-red); }
.runres { margin: 12px 0; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--app-accent); background: rgba(63,191,168,.08); font-size: 13px; }
.runres.quiet { border-color: var(--app-line); background: var(--app-bg); }
.runres ul { margin: 8px 0 0; padding-left: 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 4px 16px; }
.runres .kwn { color: var(--app-ink); font-weight: 600; }
.runres .good { color: var(--app-accent); font-weight: 600; }
.runres p { margin: 8px 0 0; font-size: 12px; }


/* ================= Mobile and narrow screens ================= */
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  /* sidebar becomes a drawer */
  .side { position: fixed; top: 0; bottom: 0; left: 0; width: 272px; max-width: calc(86vw / var(--zoom, 1)); height: auto; transform: translateX(-105%); transition: transform .22s ease; z-index: 60; overflow-y: auto; box-shadow: 0 0 40px rgba(0,0,0,.4); }
  body.nav-open .side { transform: none; }
  .navbackdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 55; opacity: 0; pointer-events: none; transition: opacity .2s; }
  body.nav-open .navbackdrop { display: block; opacity: 1; pointer-events: auto; }
  .navbackdrop { display: block; }
  .menubtn { display: inline-grid; }
  /* top bar */
  .topbar { padding: 10px 12px; gap: 8px; }
  .topbar h1 { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .topbar .who { display: none; }
  .topbar .plan { font-size: 11px; padding: 3px 8px; white-space: nowrap; }
  .topbar .btn { padding: 7px 10px; font-size: 13px; }
  /* content */
  .content { padding: 12px; gap: 14px; }
  .sec > header { flex-wrap: wrap; gap: 8px; padding: 12px 14px; row-gap: 8px; }
  .sec > header h2 { font-size: 14px; }
  .sec > header .sub { flex-basis: 100%; order: 10; font-size: 12px; }
  .sec > header .btn, .sec > header .btn.primary { padding: 7px 10px; font-size: 13px; }
  .sec .body { padding: 14px; }
  .tabs { flex-wrap: wrap; row-gap: 6px; }
  .tabs .sub { flex-basis: 100%; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .tile { padding: 14px; }
  .tile .v { font-size: 22px; }
  .dbmsg { padding: 24px 12px; }
  /* every wide table scrolls sideways inside its card instead of breaking the page */
  .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .kwwrap { max-height: calc(calc(100vh / var(--zoom, 1)) - 200px); }
  /* forms: stack, and inputs at 16px so iOS doesn't zoom */
  input, select, textarea { font-size: 16px !important; }
  .kwsearch, .asinrow, .kwtools, .lstacts { flex-wrap: wrap; }
  .kwsearch input, .kwsearch select, .asinrow input { flex-basis: 100%; }
  .kwsearch .btn, .asinrow .btn { flex: 1; }
  .kwtools .spacer { display: none; }
  .kwtools > * { flex: 1 1 auto; }
  .kwpager { flex-wrap: wrap; row-gap: 6px; }
  .kwpager .dim { flex-basis: 100%; order: 5; }
  .segrow, .segrow.mk { flex-wrap: wrap; }
  .segrow .segopt { flex: 1 1 45%; }
  .bignums, .bignums.r4 { grid-template-columns: 1fr 1fr; }
  .calckv { grid-template-columns: 1fr; }
  .calcform .two, .lstopts .two { grid-template-columns: 1fr; }
  .cands { grid-template-columns: 1fr; }
  .disc .addrow { flex-wrap: wrap; }
  .disc .addrow input { width: 100%; }
  /* product database: filters and results stack; the results-mode floating filter panel fills the screen */
  .dbwrap { grid-template-columns: 1fr; }
  .mode-results .dbfilters { left: 0; right: 0; top: 56px; max-height: calc(80vh / var(--zoom, 1)); border-radius: 0; }
  .fgrid4, .fgrid3 { grid-template-columns: 1fr 1fr; }
  .presets, .kwrecent, .kwsources { row-gap: 6px; }
  /* tracker */
  .trkpage { grid-template-columns: 1fr; }
  .trklists { position: static; }
  .trkmain .sec > header .catq { max-width: none; flex-basis: 100%; }
  .colswrap, .colsmenu { position: static; }
  .rowmenu { right: 0; left: auto; }
  /* modals */
  .trk-modal { padding: 8px; align-items: flex-end; }
  .trk-box { max-height: calc(92vh / var(--zoom, 1)); overflow: auto; border-radius: 14px 14px 0 0; }
  .trk-box .two { grid-template-columns: 1fr; }
  /* saved keywords panel, listing export */
  .savedbody { grid-template-columns: 1fr; }
  .savedlist { border-right: 0; padding-right: 0; max-height: 200px; border-bottom: 1px solid var(--app-line); padding-bottom: 8px; }
  .lstgrid { grid-template-columns: 1fr; }
  .minelist { max-height: 260px; }
}
@media (max-width: 480px) {
  .tiles { grid-template-columns: 1fr; }
  .bignums, .bignums.r4 { grid-template-columns: 1fr; }
  .fgrid4, .fgrid3 { grid-template-columns: 1fr; }
  .segrow .segopt { flex-basis: 100%; }
  .topbar .plan { display: none; }
}
/* Hover-only affordances shouldn't hide actions on touch screens */
@media (hover: none) {
  .trkl .lacts { display: inline-flex; }
}
.dbt .meta { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: center; }
.dbt .meta .links { display: inline-flex; gap: 10px; white-space: nowrap; }
.pager { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pager .spacer { flex: 1; }
.pager .psize select, .pager .pgoto input { font: inherit; font-size: 13px; padding: 4px 8px; border: 1px solid var(--app-line); border-radius: 6px; background: var(--app-bg); color: var(--app-ink); }
.pager .pgoto input { width: 72px; text-align: right; }
.pager .psize, .pager .pgoto { font-size: 13px; color: var(--app-ink-2); }
.pager .pnum { font-size: 13px; color: var(--app-ink-2); }
@media (max-width: 900px) {
  .catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catgrid .catchip .nm { white-space: normal; line-height: 1.25; }
  .catgrid .catchip { align-items: flex-start; padding: 8px 10px; }
  .catgrid .catchip small { margin-top: 2px; }
  .dbfilters .ff .pair { flex-wrap: nowrap; }
  .dbfilters .presets .catchip { font-size: 12px; padding: 6px 10px; }
}
@media (max-width: 400px) { .catgrid { grid-template-columns: 1fr; } .catgrid .catchip .nm { white-space: nowrap; } }
.nichebar { display: flex; gap: 12px; align-items: center; padding: 10px 20px; border-bottom: 1px solid var(--app-line); background: var(--app-panel-2); font-size: 13px; color: var(--app-ink-2); }
.nichebar.hidden { display: none; }
.nichebar .nscore { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-family: Poppins, sans-serif; font-weight: 700; font-size: 15px; border: 3px solid var(--app-line); color: var(--app-ink); }
.nichebar .nscore.good { border-color: var(--app-accent); } .nichebar .nscore.mid { border-color: var(--app-amber); } .nichebar .nscore.bad { border-color: var(--app-red); }
.dbfilters .pair select { font: inherit; width: 100%; padding: 7px 9px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-bg); color: var(--app-ink); }
.rulesnote { font-size: 12px; margin-top: 8px; line-height: 1.5; }
.rulesnote .chipbtn { margin-left: 6px; }
.dbfilters .ff .hint { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.4; color: var(--app-muted); }
.dbfilters .pair.short input { max-width: 110px; }
.dbfilters .pair.short span { color: var(--app-muted); font-size: 12px; }
.dbfilters .pair select { padding: 6px 8px; font-size: 13px; }
.fgrid4 { gap: 14px 20px; }
.fgrid4 > .ff, .fgrid3 > .ff { min-width: 0; }
.dbfilters.nohints .hint { display: none; }
.fsec-h .spacer { flex: 1; }
.fsec-h .hinttoggle { font-size: 12px; font-weight: 500; color: var(--app-ink-2); display: inline-flex; gap: 6px; align-items: center; }

/* ---- suggest an improvement ---- */
.suggwrap { position: relative; }
.suggwrap .badge, .topbar .ib .badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--app-red); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.suggwrap .badge.hidden { display: none; }
.suggdrawer { position: absolute; right: 12px; top: calc(100% + 8px); width: min(440px, calc(calc(100vw / var(--zoom, 1)) - 24px)); max-height: min(calc(78vh / var(--zoom, 1)), 640px); overflow: auto; background: var(--app-panel); border: 1px solid var(--app-line); border-radius: 12px; box-shadow: 0 18px 48px rgba(0,0,0,.35); z-index: 50; }
.suggdrawer .sh { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--app-line); font-size: 14px; }
.suggdrawer .sb { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.suggdrawer .lead { font-size: 13px; color: var(--app-ink-2); line-height: 1.5; margin: 0; }
.suggdrawer textarea { width: 100%; font: inherit; font-size: 13px; padding: 9px 10px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-bg); color: var(--app-ink); resize: vertical; }
.suggdrawer .row { display: flex; align-items: center; gap: 10px; }
.suggdrawer .row .spacer { flex: 1; }
.sugglist { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--app-line); padding-top: 10px; }
.sugg { border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-bg); }
.sugg summary { display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; font-size: 13px; list-style: none; }
.sugg summary::-webkit-details-marker { display: none; }
.sugg summary .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--app-ink); }
.sugg summary .m { font-size: 11px; color: var(--app-muted); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sugg.unread summary .t { font-weight: 600; }
.sugg .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--app-red); display: inline-block; }
.sugg .thread { padding: 4px 10px 10px; display: flex; flex-direction: column; gap: 8px; }
.sugg .msg { font-size: 13px; line-height: 1.45; padding: 8px 10px; border-radius: 8px; background: var(--app-panel); white-space: pre-wrap; }
.sugg .msg.admin { background: rgba(63,191,168,.10); border: 1px solid rgba(63,191,168,.35); }
.sugg .msg .who { display: block; font-size: 11px; color: var(--app-muted); margin-bottom: 3px; }
.sugg .reply { display: flex; gap: 8px; align-items: flex-start; }
.sugg .reply textarea { flex: 1; }
.sugg .closed { font-size: 12px; margin: 0; }
.side .navbadge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--app-red); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.tabs button .tabbadge { margin-left: 6px; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--app-red); color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; vertical-align: middle; }
.sugadmin { display: flex; flex-direction: column; gap: 8px; }
.sugadmin .sugg summary { padding: 10px 12px; }
.sugadmin .sugg.awaiting { border-color: var(--app-amber); }
.sugadmin .reply { flex-direction: column; }
.sugadmin .reply textarea { width: 100%; font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-panel); color: var(--app-ink); }
.sugadmin .racts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
@media (max-width: 900px) {
  .fgrid3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fgrid3 > .ff:first-child { grid-column: 1 / -1; }
  .fgrid4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dbfilters .pair, .dbfilters .pair.short { flex-wrap: nowrap; min-width: 0; }
  .dbfilters .pair input { min-width: 0; }
  .dbfilters .pair.short input { max-width: none; }
}
@media (max-width: 480px) { .fgrid3, .fgrid4 { grid-template-columns: minmax(0, 1fr); } }
.rulesh { font-size: 13px; margin: 12px 0 8px; display: flex; align-items: baseline; gap: 8px; }
.rulesh small { font-weight: 400; color: var(--app-muted); font-size: 12px; }

/* ---- my amazon: keywords, listing score, returns ---- */
.kwprod, .lscard { border: 1px solid var(--app-line); border-radius: 10px; background: var(--app-bg); margin-bottom: 8px; }
.kwprod summary, .lscard summary { display: flex; align-items: center; gap: 14px; padding: 12px 14px; cursor: pointer; list-style: none; }
.kwprod summary::-webkit-details-marker, .lscard summary::-webkit-details-marker { display: none; }
.kwprod .t, .lscard .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kwprod .t b, .lscard .t b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kwprod .t small, .lscard .t small { color: var(--app-muted); font-size: 11px; }
.kwprod .m, .lscard .m { font-size: 12px; color: var(--app-ink-2); white-space: nowrap; }
.kwbody, .lsbody { padding: 0 14px 14px; }
.lsscore { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--app-line); font-family: Poppins, sans-serif; font-weight: 700; font-size: 15px; flex: 0 0 auto; line-height: 1; }
.lsscore small { font-size: 9px; font-weight: 600; color: var(--app-muted); }
.lsscore.good { border-color: var(--app-accent); } .lsscore.warn { border-color: var(--app-amber); } .lsscore.bad { border-color: var(--app-red); }
.lsh { display: flex; gap: 12px; align-items: center; padding: 12px 14px; }
.checks { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.checks li { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: start; padding: 8px 10px; border-radius: 8px; background: var(--app-panel); font-size: 13px; }
.checks li.no { border: 1px solid rgba(240,168,58,.35); }
.checks li .ico { font-weight: 700; } .checks li.ok .ico { color: var(--app-accent); } .checks li.no .ico { color: var(--app-amber); }
.checks li .fix { display: block; color: var(--app-ink-2); margin-top: 2px; line-height: 1.45; }
.checks li small { color: var(--app-muted); font-size: 11px; white-space: nowrap; }
.hbar { width: 120px; height: 8px; border-radius: 4px; background: var(--app-panel-2); overflow: hidden; }
.hbar i { display: block; height: 100%; background: var(--app-amber); }
.sec.inner { margin-top: 0; }
.rankt .chg.up { color: var(--app-accent); font-weight: 600; } .rankt .chg.down { color: var(--app-red); font-weight: 600; }
.cat.good { background: rgba(63,191,168,.15); color: var(--app-accent); }
.cat.bad { background: rgba(255,138,128,.15); color: var(--app-red); }
.cat.warn { background: rgba(240,168,58,.15); color: var(--app-amber); }
.dbt tr.warnrow td:first-child { box-shadow: inset 3px 0 0 var(--app-amber); }
.tabs { flex-wrap: wrap; row-gap: 6px; }
/* my amazon tables: long product names truncate so the rest of the row stays on screen */
#apanel .dbt td.c-text { max-width: 420px; }
#apanel .dbt td.c-text > b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#apanel .dbt td.c-text .meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#apanel .dbt td.c-text .flag, #apanel .dbt td.c-text .fix { white-space: normal; }
@media (max-width: 900px) { #apanel .dbt td.c-text { max-width: 220px; } .tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0; } .tabs button[data-tab] { white-space: nowrap; } }
.topbar .topactions { display: inline-flex; gap: 8px; align-items: center; margin-left: 12px; }
.topbar .topactions .btn { padding: 6px 12px; font-size: 13px; }
.topbar .topactions .sortsel { font-size: 12px; color: var(--app-ink-2); display: inline-flex; gap: 6px; align-items: center; }
.topbar .topactions .sortsel select { font: inherit; font-size: 12px; padding: 4px 8px; border: 1px solid var(--app-line); border-radius: 6px; background: var(--app-bg); color: var(--app-ink); }
@media (max-width: 900px) { .topbar .topactions .sortsel { display: none; } }
/* The same controls inside the page (Mac app, where the top bar is hidden, and under 900px): a row under the tabs (0.57.2). */
.pagectl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; margin: -8px 0 14px; }
.pagectl .btn { padding: 6px 12px; font-size: 13px; }
.pagectl .sortsel { font-size: 13px; color: var(--app-ink-2); display: inline-flex; gap: 6px; align-items: center; }
.pagectl .sortsel select { font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--app-line); border-radius: 6px; background: var(--app-bg); color: var(--app-ink); }
.pagectl .synclabel { font-size: 12px; }
@media (max-width: 900px) { .pagectl { justify-content: flex-start; margin-top: -6px; } }

/* tiktok trends in keyword research */
.tttrends { margin-top: 14px; border: 1px solid var(--app-line); border-radius: 10px; background: var(--app-bg); }
.tttrends .tth { display: flex; align-items: center; gap: 10px; padding: 10px 14px; flex-wrap: wrap; font-size: 13px; }
.tttrends .tth .spacer { flex: 1; }
.tttrends .tth .sortsel { font-size: 12px; color: var(--app-ink-2); display: inline-flex; gap: 6px; align-items: center; }
.tttrends .tth .sortsel select { font: inherit; font-size: 12px; padding: 4px 8px; border: 1px solid var(--app-line); border-radius: 6px; background: var(--app-panel); color: var(--app-ink); }
.tttrends .ttbody { padding: 0 14px 12px; }
.tttrends h4 { font-size: 13px; margin: 8px 0 6px; }
.ttt { min-width: 760px; }
.ttt .tag.hot { background: rgba(240,168,58,.18); color: var(--app-amber); font-size: 10px; padding: 1px 5px; border-radius: 5px; }

/* connect pitch */
.sec.pitch header h2 { font-size: 17px; }
.featgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.featgrid .feat { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 3px; padding: 12px 14px; border: 1px solid var(--app-line); border-radius: 10px; background: var(--app-bg); }
.featgrid .feat i { grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 15px; color: var(--app-accent); background: rgba(63,191,168,.12); }
.featgrid .feat b { font-size: 13.5px; }
.featgrid .feat span { font-size: 12.5px; line-height: 1.5; color: var(--app-ink-2); }
.pitchfoot { margin: 14px 0 0; font-size: 12px; color: var(--app-muted); line-height: 1.5; }
.ttneeds { padding: 6px 0 4px; font-size: 13px; color: var(--app-ink-2); line-height: 1.5; }
.ttneeds .row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

/* connect pages: pitch on top, full width; connect card below */
.connectpage { display: flex; flex-direction: column; gap: 18px; }
.connectpage .sec.pitch header { flex-wrap: wrap; }
.connectpage .sec.pitch header h2 { font-size: 22px; font-family: Poppins, sans-serif; letter-spacing: -.01em; }
.connectpage .sec.pitch header .sub { font-size: 13px; }
.connectpage .featgrid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.connectpage .featgrid .feat { border-top: 3px solid var(--tone, var(--app-accent)); background: linear-gradient(180deg, color-mix(in srgb, var(--tone, var(--app-accent)) 10%, var(--app-bg)) 0%, var(--app-bg) 60%); transition: transform .15s, box-shadow .15s; }
.connectpage .featgrid .feat:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.connectpage .featgrid .feat i { background: color-mix(in srgb, var(--tone, var(--app-accent)) 18%, transparent); color: var(--tone, var(--app-accent)); font-size: 16px; }
.connectpage .featgrid .feat b { font-size: 14px; color: var(--app-ink); }
.feat.t1 { --tone: #3fbfa8; } .feat.t2 { --tone: #f0a83a; } .feat.t3 { --tone: #7aa7ff; } .feat.t4 { --tone: #ff8a80; } .feat.t5 { --tone: #c58af9; } .feat.t6 { --tone: #ffd166; }
.connectrow { display: grid; grid-template-columns: minmax(0, 720px); justify-content: start; }
.connectrow .sec header h2 { font-size: 16px; }
.connectrow .btn.primary { font-size: 15px; padding: 12px 22px; }
.srcswitch { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 14px; padding: 4px; border: 1px solid var(--app-line); border-radius: 10px; background: var(--app-panel); }
.srcswitch .lbl { font-size: 12px; color: var(--app-muted); padding: 0 8px; }
.srcswitch button { font: inherit; font-size: 13px; padding: 6px 14px; border-radius: 7px; border: 0; background: transparent; color: var(--app-ink-2); cursor: pointer; }
.srcswitch button.on { background: var(--app-accent-deep); color: #fff; font-weight: 600; }

/* hashtag research */
.kwsearch { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kwsearch input[type=search] { flex: 1; min-width: 240px; font: inherit; padding: 10px 12px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-bg); color: var(--app-ink); }
.kwsearch .sortsel select { font: inherit; padding: 8px 10px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-bg); color: var(--app-ink); }
.srcchk.off { opacity: .55; }
.srcerrs { margin-bottom: 10px; }
.recent { margin-top: 12px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.recent .chip { font: inherit; font-size: 12px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--app-line); background: var(--app-panel-2); color: var(--app-ink); cursor: pointer; }
.subbox { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.subchips { display: flex; flex-wrap: wrap; gap: 6px; }
.subchip { font: inherit; font-size: 12px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--app-line); background: var(--app-panel-2); color: var(--app-ink-2); cursor: pointer; }
.subchip.on { border-color: var(--app-accent); color: var(--app-ink); background: rgba(63,191,168,.12); }
.fsec-h .catq { font: inherit; font-size: 12px; padding: 5px 9px; border: 1px solid var(--app-line); border-radius: 7px; background: var(--app-bg); color: var(--app-ink); width: 170px; }

/* Database results: row actions as plain green text on one line, and Track Product with its hover menu */
/* The links under a product wrap onto a second line when the column is narrow, so the last one (Suppliers) is never cut off. */
.dbt .prod .meta .links { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; white-space: nowrap; }
.dbt .prod .meta .rowact, .dbt .prod a.rowact { display: inline-block; -webkit-line-clamp: unset; -webkit-box-orient: unset; overflow: visible; padding: 0; border: 0; background: none; color: var(--app-accent); font-size: 12.5px; font-weight: 600; line-height: 1.5; text-decoration: none; cursor: pointer; white-space: nowrap; font-family: inherit; }
.dbt .prod .meta .rowact:hover, .dbt .prod a.rowact:hover { text-decoration: none; color: var(--app-accent-deep, var(--app-accent)); filter: brightness(1.15); }
.dbt .rowact.track.on { cursor: default; opacity: .85; }
.dbt .rowact:disabled { opacity: .6; cursor: progress; }
.dbt .trackwrap { position: relative; display: inline-flex; }
.dbt .trackmenu { position: absolute; left: 0; top: 100%; z-index: 20; display: none; flex-direction: column; min-width: 190px; margin-top: 4px; padding: 6px; border-radius: 10px; background: var(--app-panel); border: 1px solid var(--app-line); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.dbt .trackwrap:hover .trackmenu, .dbt .trackwrap:focus-within .trackmenu { display: flex; }
.dbt .trackmenu::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 6px; }
.dbt .trackmenu button, .dbt .trackmenu a { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; border-radius: 7px; background: none; color: inherit; font: inherit; font-size: 13px; text-decoration: none; cursor: pointer; }
.dbt .trackmenu button:hover, .dbt .trackmenu a:hover { background: color-mix(in srgb, var(--app-accent) 18%, transparent); text-decoration: none; }
.dbt .trackmenu button { font-weight: 600; }

/* Product page */
.prodtop { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 16px; }
.prodtop .pimg { width: 96px; height: 96px; object-fit: contain; border-radius: 10px; background: var(--app-panel-2); border: 1px solid var(--app-line); flex: 0 0 96px; }
.prodtop h2 { font-size: 18px; margin: 0 0 4px; line-height: 1.35; }
.prodtop .pmeta { color: var(--app-muted); font-size: 13px; }
.prodtop .pacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.prodhead .tiles { border-top: 1px solid var(--app-line); }
.asinform { display: flex; gap: 8px; margin-top: 12px; } .asinform input { font: inherit; padding: 8px 10px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-bg); color: var(--app-ink); text-transform: uppercase; }
.chips { display: inline-flex; gap: 6px; }
.chips .chip { font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 12px; border: 1px solid var(--app-line); background: var(--app-panel); color: var(--app-ink); cursor: pointer; }
.chips .chip.on { background: var(--app-accent); border-color: var(--app-accent); color: #fff; }
.hgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
/* The shared product summary styles (summarycore.js, 0.59.0) in the hub's colours, light or dark. */
body { --pls-bg: var(--app-panel); --pls-ink: var(--app-ink); --pls-muted: var(--app-muted); --pls-line: var(--app-line); --pls-soft: var(--app-panel-2); --pls-accent: var(--app-accent); --pls-accent-soft: var(--app-panel-2); --pls-accent-line: var(--app-accent);
  --pls-up: var(--app-accent); --pls-down: var(--app-red); --pls-warn-bg: rgba(240,168,58,.12); --pls-warn-ink: var(--app-ink);
  --pls-tint-bg: rgba(240,168,58,.10); --pls-tint-line: rgba(240,168,58,.32); --pls-tint-ink: var(--app-amber);
  --pls-ok-bg: rgba(63,191,168,.10); --pls-ok-line: rgba(63,191,168,.32); --pls-ok-ink: var(--app-accent); }
html.light body { --pls-up: #1d7a43; --pls-down: #b3412e; --pls-warn-bg: #fbf6ea; --pls-warn-ink: #5b4a1f; --pls-tint-bg: #fbf6ec; --pls-tint-line: #f0e6d0; --pls-tint-ink: #8a6420; --pls-ok-bg: #f1f7f5; --pls-ok-line: #dcebe7; --pls-ok-ink: #2f7468; }
/* Competition & details on the product page (0.59.0): label and value pairs in two columns. */
.factgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px; }
.fact { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px dashed var(--app-line); font-size: 13px; }
.fact span { color: var(--app-muted); }
.fact b { font-weight: 600; text-align: right; }
@media (max-width: 700px) { .factgrid { grid-template-columns: 1fr; } }
.hchart { position: relative; padding: 8px 10px 6px; border: 1px solid var(--app-line); border-radius: 10px; background: var(--app-panel-2); }
.hchart .hh { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; font-size: 12px; }
.hchart .hh .now { font-size: 15px; font-weight: 700; } .hchart .hh em { font-style: normal; font-weight: 600; font-size: 11px; color: var(--app-muted); }
.hchart .hh em.good { color: #0e7c6b; } .hchart .hh em.bad { color: #c0392b; }
.hsvg { width: 100%; height: auto; display: block; } .hsvg .ax { font-size: 10px; fill: var(--app-muted); } .hsvg .grid { stroke: var(--app-line); } .hsvg .hit { cursor: crosshair; }
.htip { position: absolute; top: 34px; padding: 4px 8px; border-radius: 6px; background: var(--app-ink); color: var(--app-bg); font-size: 11px; display: flex; flex-direction: column; pointer-events: none; }
.htip.hidden { display: none; }
.hnote { margin: 10px 0 0; font-size: 12px; color: var(--app-muted); }
.grade { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.gscore { display: flex; align-items: baseline; gap: 4px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--app-line); background: var(--app-panel-2); }
.gscore b { font-size: 28px; line-height: 1; } .gscore span { font-size: 13px; color: var(--app-muted); }
.gscore.good b { color: #0e7c6b; } .gscore.mid b { color: #b8730f; } .gscore.bad b { color: #c0392b; }
.glist { display: grid; gap: 0; }
.gitem { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--app-line); font-size: 13px; }
.gitem .gmark { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; margin-top: 2px; display: grid; place-items: center; font-size: 10px; color: #fff; background: var(--app-muted); }
.gitem.ok .gmark { background: #0e7c6b; } .gitem.ok .gmark::before { content: "✓"; } .gitem.warn .gmark { background: #e8971e; } .gitem.warn .gmark::before { content: "!"; } .gitem.bad .gmark { background: #c0392b; } .gitem.bad .gmark::before { content: "×"; } .gitem.na .gmark::before { content: "?"; }
.gitem > div { flex: 1; } .gfix { color: var(--app-muted); font-size: 12px; margin-top: 2px; } .gitem.ok .gfix { display: none; } .gissue::before { content: "• "; } .gpts { color: var(--app-muted); white-space: nowrap; }
.mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.mgrid label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; }
.mgrid label span { width: 100%; color: var(--app-muted); font-size: 12px; } .mgrid label i { font-style: normal; color: var(--app-muted); }
.mgrid input { font: inherit; width: 110px; padding: 6px 8px; border: 1px solid var(--app-line); border-radius: 6px; background: var(--app-bg); color: var(--app-ink); }
.mout { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: baseline; margin-top: 12px; }
.mres { display: flex; align-items: baseline; gap: 6px; } .mres b { font-size: 18px; } .mres span { font-size: 12px; color: var(--app-muted); }
.mres.good b { color: #0e7c6b; } .mres.warn b { color: #b8730f; } .mres.bad b { color: #c0392b; }
.mbreak { width: 100%; font-size: 12px; color: var(--app-muted); }
@media (max-width: 1000px) { .hgrid, .two { grid-template-columns: 1fr; } }

/* Niche columns on the keyword page */
table.kwt td.why { white-space: normal; min-width: 240px; max-width: 380px; font-size: 12px; color: var(--app-muted); text-align: left; line-height: 1.35; }
table.kwt td.c-niche { white-space: nowrap; }
.kwicons { display: inline-flex; gap: 4px; margin-right: 8px; vertical-align: middle; }
.kwicons .ib.sm { width: 24px; height: 24px; font-size: 12px; text-decoration: none; }
.nbar { display: inline-block; width: 90px; height: 8px; border-radius: 4px; background: var(--app-panel-2); vertical-align: middle; margin-right: 8px; overflow: hidden; border: 1px solid var(--app-line); }
.nbar i { display: block; height: 100%; background: var(--app-accent); } .nbar.comp i { background: #e8971e; }
.nring { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 12px; font-weight: 700; vertical-align: middle; margin-right: 6px; background: conic-gradient(var(--app-accent) calc(var(--p) * 1%), var(--app-line) 0); position: relative; }
.nring::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--app-panel); } .nring i { position: relative; font-style: normal; }
.lvl { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 5px; border: 1px solid var(--app-line); color: var(--app-muted); background: var(--app-panel-2); }
.lvl.high { background: #e9f5f2; border-color: #c9e6df; color: #0e6b5d; } .lvl.medium { background: #fdf3e3; border-color: #f2ddb5; color: #8a5a10; }

/* Shared searches (account) */
.sharelist { display: grid; gap: 0; }
.sharerow { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--app-line); font-size: 13px; }
.sharerow .q { flex: 1; min-width: 0; } .sharerow .q b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sharerow .q small { color: var(--app-muted); }

.kwbuilding { display: flex; align-items: center; gap: 10px; margin: 10px 0; padding: 10px 14px; border: 1px solid var(--app-line); border-radius: 10px; background: color-mix(in srgb, var(--app-accent) 10%, var(--app-panel)); font-size: 13px; line-height: 1.4; }
.kwbuilding b { color: var(--app-accent-deep, var(--app-accent)); }
.spin.sm { width: 12px; height: 12px; border-width: 2px; display: inline-block; vertical-align: middle; }

/* Sourcing action */
.btn.source { border-color: #c9e6df; background: #e9f5f2; color: #0e6b5d; }
.btn.source:hover { background: var(--app-accent); border-color: var(--app-accent); color: #fff; }

.sites { margin: 10px 0 0; padding: 0 0 0 18px; font-size: 13px; line-height: 1.5; } .sites li { margin: 4px 0; }
.marketpick { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--app-muted); } .marketpick select { font: inherit; padding: 4px 8px; border: 1px solid var(--app-line); border-radius: 6px; background: var(--app-panel); color: var(--app-ink); }

/* Cleaner keyword page: recent searches behind a button, hints on hover, compact chip rows */
.kwsearch { display: flex; gap: 8px; align-items: center; }
.kwsources { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.kwsources .hint { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--app-line); color: var(--app-muted); font-size: 11px; font-weight: 700; cursor: help; }
.kwrecent { margin-top: 10px; }
.menuwrap { position: relative; display: inline-block; }
.btn .caret { font-size: 10px; margin-left: 4px; opacity: .7; }
.popmenu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 40; min-width: 320px; max-width: 460px; padding: 6px; border: 1px solid var(--app-line); border-radius: 10px; background: var(--app-panel); box-shadow: 0 16px 40px rgba(0,0,0,.28); }
.popmenu button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 7px; background: none; color: var(--app-ink); font: inherit; cursor: pointer; }
.popmenu button:hover { background: rgba(14,124,107,.12); }
.popmenu .t { font-weight: 600; } .popmenu .m { font-size: 11px; color: var(--app-muted); }
.kwfreq { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.kwfreq .morewrap { display: contents; }
.kwpage .sec > .body { padding-bottom: 14px; }

.recentbtn { font: inherit; font-size: 13px; font-weight: 600; padding: 7px 12px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-panel); color: var(--app-ink); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.recentbtn:hover { border-color: var(--app-accent); }
.recentbtn .caret { font-size: 10px; opacity: .7; }
.popmenu.floating { position: fixed; left: 0; top: 0; overflow: auto; z-index: 1000; }

.popmenu, .popmenu.floating { background: var(--app-panel); border-color: var(--app-line); }

.dbt .prod .noimg { width: 40px; height: 40px; border-radius: 6px; background: var(--app-line); flex: 0 0 40px; opacity: .5; }
.dbt .prod img { flex: 0 0 40px; }

.mkbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--app-line); }
.trkl.mk { width: auto; }
.mktag { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; margin-right: 6px; background: var(--app-line); color: var(--app-muted); }
.mktag.wm { background: rgba(26,79,163,.18); color: #7fb0ff; } .mktag.ca, .mktag.uk, .mktag.de { background: rgba(184,115,15,.18); color: #f2bd6a; }

.kw .tag.off, .kwt .tag.off, .tag.off { color: #a33; background: rgba(200,50,50,.1); }

/* Admin → Page reading */
.hdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #b9c2c7; }
.hdot.ok { background: #2e9e6e; } .hdot.warn { background: #e0a020; } .hdot.bad { background: #d2413a; }
tr.bad td { background: rgba(210,65,58,.06); } tr.warn td { background: rgba(224,160,32,.07); }
.spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 18px; }
.spark b { display: inline-block; width: 6px; background: #b9c2c7; border-radius: 1px; }
.spark b.g { background: #2e9e6e; } .spark b.a { background: #e0a020; } .spark b.r { background: #d2413a; }
.cfgpre { max-height: 320px; overflow: auto; font-size: 12px; background: var(--app-panel-2); padding: 10px; border-radius: 8px; }
#prcfg { width: 100%; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 10px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-panel); color: var(--app-ink); }
.chg { display: inline-block; max-width: 420px; white-space: pre-wrap; word-break: break-all; font-size: 11px; }
.row.wrap { flex-wrap: wrap; gap: 8px 16px; } .row .lbl { font-weight: 600; }
#prmc { width: 100%; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 8px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-panel); color: var(--app-ink); margin: 8px 0; }
td.acts { white-space: nowrap; } td.acts .btn { margin-right: 4px; }
tr.ok td { background: rgba(46,158,110,.06); }

/* Pin-the-toolbar-button banner */
.pinbanner { display: flex; align-items: center; gap: 14px; margin: 16px 24px 0; padding: 12px 16px; border-radius: 12px; background: rgba(63,191,168,.12); border: 1px solid rgba(63,191,168,.35); color: var(--app-ink); }
.pinbanner .pin { font-size: 22px; } .pinbanner .t { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 14px; } .pinbanner .t span { color: var(--app-muted); font-size: 13px; }
@media (max-width: 720px) { .pinbanner { flex-wrap: wrap; margin: 12px; } }

/* Embedded in ProfitLupa for Mac: the app supplies the sidebar, toolbar and window; the page is content only. */
html.embed-mac body.app .side, html.embed-mac body.app .topbar { display: none !important; }
html.embed-mac body.app .app-shell { grid-template-columns: 1fr; }
html.embed-mac body.app .main { padding-top: 12px; }
html.embed-mac .pinbanner { display: none; }
html.embed-mac .suggdrawer { position: fixed; right: 16px; top: 12px; z-index: 50; }
.dbt th.c-check, .dbt td.c-check { width: 28px; text-align: center; padding-left: 8px; padding-right: 4px; }
.dbt td.c-check input, .dbt th.c-check input { accent-color: var(--app-accent); }
/* Embedded in the Mac app: no web sidebar or topbar, so the "Show filters" tab hangs from the top edge, centered. */
html.embed-mac .mode-results .dbfilters { left: 0; top: 0; }

/* light theme: type-in fields stay pure white on the warm paper panels */
html.light input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html.light select, html.light textarea { background: #ffffff; }
.pubgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.pubitem { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--app-line); border-radius: 10px; cursor: pointer; }
.pubitem img { width: 36px; height: 36px; object-fit: contain; border-radius: 6px; background: var(--app-panel-2); }
.pubitem span { display: flex; flex-direction: column; min-width: 0; } .pubitem b { font-weight: 500; font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; } .pubitem small { color: var(--app-muted); }
.pubitem:has(input:checked) { border-color: var(--app-accent); background: rgba(63,191,168,.08); }
.pubprog { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 14px; }
.pubprog .bar { flex-basis: 100%; height: 6px; border-radius: 3px; background: var(--app-panel-2); overflow: hidden; }
.pubprog .bar i { display: block; height: 100%; background: var(--app-accent); transition: width .4s; }
.catlist { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; max-height: 260px; overflow: auto; background: var(--app-panel); border: 1px solid var(--app-line); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.catopt { padding: 8px 12px; font-size: 13px; cursor: pointer; } .catopt:hover { background: var(--app-panel-2); }
.dbt.pubres td:last-child { white-space: normal; word-break: break-word; line-height: 1.4; }
.pubnext { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: rgba(63,191,168,.10); border: 1px solid rgba(63,191,168,.35); font-size: 14px; line-height: 1.5; }
/* TikTok publish: tracked list left (5 rows, then scrolls) and the ASIN box right */
.pubcols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.pubhead { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; } .pubhead label { cursor: pointer; }
.publist { display: grid; gap: 6px; max-height: 300px; overflow: auto; padding-right: 4px; }
.pubcols textarea { width: 100%; min-height: 300px; resize: vertical; }
@media (max-width: 900px) { .pubcols { grid-template-columns: 1fr; } .pubcols textarea { min-height: 120px; } }
/* Amazon ↔ TikTok: picture + sideways-scrolling title so the number columns always fit on screen */
.dbt.crosst { table-layout: fixed; width: 100%; }
.dbt.crosst th.c-prod { width: 44%; } .dbt.crosst th.c-note { width: 16%; }
.dbt.crosst td { white-space: normal; vertical-align: middle; }
.dbt.crosst .prodcell { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.dbt.crosst .prodcell img { width: 44px; height: 44px; object-fit: contain; border-radius: 6px; background: var(--app-panel-2); flex: none; }
.dbt.crosst .ptxt { min-width: 0; flex: 1; }
.dbt.crosst .ptitle b { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; font-weight: 500; }
.dbt.crosst .meta { color: var(--app-muted); font-size: 12px; margin-top: 2px; } .dbt.crosst .meta a { color: var(--app-accent); }
.dbt.crosst .btn.sm { padding: 4px 10px; font-size: 12px; }
.connect-link { color: var(--app-accent); font-size: 12px; white-space: normal; }
.nudge { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 16px; border-radius: 10px; background: rgba(63,191,168,.10); border: 1px solid rgba(63,191,168,.35); font-size: 14px; line-height: 1.45; }
.nudge .btn.sm { padding: 6px 12px; font-size: 13px; } .nudge .x { margin-left: auto; background: none; border: 0; color: var(--app-muted); font-size: 16px; cursor: pointer; }
.dbt.crosst td.c-prod, .dbt.crosst th.c-prod { text-align: left; }
.dbt.crosst .noimg, .pubitem .noimg { width: 44px; height: 44px; border-radius: 6px; background: var(--app-panel-2); color: var(--app-muted); display: grid; place-items: center; font-weight: 600; flex: none; }
.dbt .prod .noimg { width: 40px; height: 40px; border-radius: 6px; background: var(--app-panel-2); color: var(--app-muted); display: grid; place-items: center; font-weight: 600; flex: none; }
/* Admin → Usage */
.usage-head .segs, .segs.ustatus { display: inline-flex; gap: 4px; background: var(--app-panel-2); border-radius: 999px; padding: 3px; }
.usage-head .segs button, .segs.ustatus button { font: inherit; font-size: 12px; padding: 5px 12px; border-radius: 999px; border: 0; background: transparent; color: var(--app-ink-2); cursor: pointer; } .usage-head .segs button.on, .segs.ustatus button.on { background: var(--app-accent); color: #14181b; font-weight: 600; }
.ukpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.ukpi { padding: 12px 14px; border-radius: 12px; background: var(--app-panel-2); border-top: 3px solid var(--app-line); } .ukpi small { display: block; color: var(--app-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; } .ukpi b { display: block; font-family: Poppins, sans-serif; font-size: 24px; font-weight: 600; margin: 4px 0 2px; } .ukpi i { font-style: normal; color: var(--app-muted); font-size: 12px; }
.uh { font-size: 13px; color: var(--app-muted); margin: 14px 0 8px; text-transform: uppercase; letter-spacing: .04em; }
.ubars { display: flex; align-items: flex-end; gap: 4px; height: 160px; padding: 6px 0 0; overflow-x: auto; }
.ubar { flex: 1 1 0; min-width: 10px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; }
.ubar .stack { display: flex; flex-direction: column-reverse; border-radius: 4px 4px 0 0; overflow: hidden; min-height: 2px; transition: height .3s; } .ubar .stack i { display: block; min-height: 1px; width: 100%; }
.ubar small { font-size: 9px; color: var(--app-muted); text-align: center; margin-top: 4px; white-space: nowrap; }
.ulegend { display: flex; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--app-muted); } .ulegend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.urow { display: grid; grid-template-columns: 26px minmax(0, 1.2fr) minmax(120px, 1fr) 60px 70px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--app-line); font-size: 13px; }
.urow .pos { color: var(--app-muted); font-weight: 600; } .urow .lab { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .urow .bar { height: 10px; border-radius: 5px; background: var(--app-panel-2); overflow: hidden; } .urow .bar i { display: block; height: 100%; border-radius: 5px; transition: width .4s; } .urow b { text-align: right; } .urow small { color: var(--app-muted); text-align: right; }
.ugrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 1000px) { .ugrid { grid-template-columns: 1fr; } }

/* ===== Dashboard modules ===== */
:root { --c-amz: #ff9900; --c-tt: #fe2c55; --c-wm: #0071dc; }
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.dash-head h2 { font-size: 24px; margin: 0 0 4px; } .dash-head .row { display: flex; gap: 8px; align-items: center; }
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mod { background: var(--app-panel); border: 1px solid var(--app-line); border-radius: 14px; overflow: hidden; min-height: 150px; display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; padding: 0; /* style.css gives every <section> 72px of padding */ }
.mod.wide { grid-column: 1 / -1; }
.mod > header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin: 0; min-height: 0; position: static; border-bottom: 1px solid var(--app-line); background: linear-gradient(90deg, rgba(63,191,168,.08), transparent 60%); }
.mod header h3 { font-size: 14px; margin: 0; font-family: Poppins, sans-serif; font-weight: 600; } .mod header .ic { font-size: 16px; }
.mod header .grip { color: var(--app-muted); cursor: grab; font-size: 15px; line-height: 1; padding: 2px 4px; border-radius: 6px; user-select: none; } .mod header .grip:hover { background: var(--app-panel-2); color: var(--app-ink); } .mod header .grip:active { cursor: grabbing; }
.mod header .mod-x { border: 0; background: none; color: var(--app-muted); cursor: pointer; font-size: 13px; opacity: 0; transition: opacity .15s; } .mod:hover header .mod-x { opacity: 1; }
.mod.dragging { opacity: .5; } .mod.over { transform: scale(1.01); box-shadow: 0 0 0 2px var(--app-accent); }
.mod-body { padding: 14px 16px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.mod-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.mod-kpis .kpi { position: relative; display: block; padding: 10px 12px; border-radius: 10px; background: var(--app-panel-2); color: inherit; text-decoration: none; border: 1px solid transparent; transition: border-color .15s, transform .15s; } a.kpi:hover { border-color: var(--app-accent); transform: translateY(-1px); } a.kpi .go { position: absolute; right: 10px; top: 10px; color: var(--app-accent); opacity: 0; transition: opacity .15s; } a.kpi:hover .go { opacity: 1; }
.mod-kpis small { display: block; color: var(--app-muted); font-size: 11px; } .mod-kpis b { display: block; font-family: Poppins, sans-serif; font-size: 20px; font-weight: 600; margin-top: 2px; }
.mod-kpis b.good, .mod .good { color: var(--app-accent); } .mod-kpis b.bad, .mod .bad { color: #ff7a6b; } .mod-kpis b.warn { color: #ffc233; }
.dspark { display: flex; flex-direction: row; align-items: flex-end; gap: 3px; height: 44px; margin-top: 2px; } .dspark i { display: block; flex: 1 1 0; border-radius: 2px 2px 0 0; opacity: .85; min-width: 3px; }
.mod-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .mod-half { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mod-mk { display: flex; align-items: center; gap: 8px; } .mod-mk small { color: var(--app-muted); }
.mk { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; } .mk.amz { background: rgba(255,153,0,.15); color: #ffb84d; } .mk.tt { background: rgba(254,44,85,.15); color: #ff7a94; } .mk.wm { background: rgba(0,113,220,.15); color: #6fb2ff; }
html.light .mk.amz { color: #9a5b00; } html.light .mk.tt { color: #b3213f; } html.light .mk.wm { color: #0b4f96; }
.mod-connect { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; border-radius: 10px; border: 1px dashed var(--app-line); background: var(--app-panel-2); flex: 1; justify-content: center; } .mod-connect p { margin: 0; color: var(--app-ink-2); font-size: 14px; }
.mod-table { width: 100%; border-collapse: collapse; font-size: 13px; } .mod-table th { text-align: left; color: var(--app-muted); font-weight: 500; font-size: 11px; padding: 4px 8px; } .mod-table td { padding: 8px; border-top: 1px solid var(--app-line); } .mod-table td.r { text-align: right; } .mod-table a { color: var(--app-accent); }
.mod-list { display: flex; flex-direction: column; gap: 6px; } .mod-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--app-panel-2); font-size: 13px; color: inherit; text-decoration: none; } .mod-row .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mod-row small { color: var(--app-muted); white-space: nowrap; }
.mod-row .pill, .mod .pill { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--app-panel); border: 1px solid var(--app-line); white-space: nowrap; } .mod .pill.good { border-color: var(--app-accent); color: var(--app-accent); } .mod .pill.bad { border-color: #ff7a6b; color: #ff7a6b; } .mod .pill.warn { border-color: #ffc233; color: #ffc233; }
.mod-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; padding-top: 6px; } .mod-foot a { color: var(--app-accent); } .mod-foot small { color: var(--app-muted); }
.mod-news .news { padding: 8px 0; border-bottom: 1px solid var(--app-line); } .mod-news .news:last-child { border-bottom: 0; } .mod-news small { color: var(--app-muted); font-size: 11px; } .mod-news b { display: block; font-size: 13.5px; margin: 2px 0; } .mod-news p { margin: 0; font-size: 13px; color: var(--app-ink-2); }
.mod-plan .plan-name { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--app-accent); color: #14181b; font-family: Poppins, sans-serif; font-weight: 600; margin-bottom: 8px; } .mod-plan p { margin: 0; font-size: 14px; color: var(--app-ink-2); }
.mod-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .mod-quick a { padding: 10px 12px; border-radius: 10px; background: var(--app-panel-2); color: inherit; text-decoration: none; font-size: 13px; border: 1px solid transparent; } .mod-quick a:hover { border-color: var(--app-accent); }
.mod-empty { grid-column: 1 / -1; padding: 40px; text-align: center; color: var(--app-muted); border: 1px dashed var(--app-line); border-radius: 14px; }
.dash-catalog { margin-bottom: 16px; } .cat-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .cat-group h4 { margin: 0 0 8px; font-size: 12px; color: var(--app-muted); text-transform: uppercase; letter-spacing: .04em; } .cat-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer; font-size: 14px; } .cat-item .ic { width: 20px; text-align: center; }
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } .mod-cols { grid-template-columns: 1fr; } }
.mod-sub { margin: 4px 0 0; font-size: 11px; color: var(--app-muted); text-transform: uppercase; letter-spacing: .04em; }
.mod-chart { width: 100%; height: 120px; display: block; color: var(--app-ink); } .mod-chart rect:hover { opacity: 1; }
.chart-legend { display: flex; gap: 14px; font-size: 12px; color: var(--app-muted); } .chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.mod-row:hover { border: 0; outline: 1px solid var(--app-accent); }
.chart-x { display: flex; margin: 2px 0 6px; } .chart-x span { flex: 1; text-align: center; font-size: 10px; color: var(--app-muted); white-space: nowrap; }
.daybars { display: flex; align-items: flex-end; gap: 4px; height: 140px; } .daybars .db { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100%; } .daybars .db i { display: block; background: var(--c-wm, #0071dc); border-radius: 3px 3px 0 0; min-height: 2px; opacity: .85; } .daybars .db small { font-size: 9px; color: var(--app-muted); text-align: center; margin-top: 4px; }
.mod-cols.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 1100px) { .mod-cols.three { grid-template-columns: 1fr; } }
.totp-setup-row { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; } .totp-qr { padding: 8px; background: #fff; border-radius: 10px; line-height: 0; } .totp-qr svg { width: 200px; height: 200px; display: block; }
/* Listing export wizard */
.wizard .wstep { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--app-line); }
.wizard .wstep:last-of-type { border-bottom: 0; }
.wizard .wnum { width: 32px; height: 32px; border-radius: 50%; background: var(--app-accent); color: #14181b; font-weight: 700; display: grid; place-items: center; font-family: Poppins, sans-serif; }
.wizard .wbody h3 { margin: 4px 0 12px; font-size: 16px; } .wizard .wbody h3 .dim { font-weight: 400; font-size: 13px; }
.wcards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .wcards.three { grid-template-columns: repeat(3, 1fr); }
.wcard { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-panel-2); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.wcard input { position: absolute; opacity: 0; pointer-events: none; } .wcard .wic { font-size: 22px; line-height: 1; margin-top: 2px; }
.wcard b { display: block; font-size: 14px; } .wcard small { display: block; color: var(--app-muted); font-size: 12px; margin-top: 3px; line-height: 1.4; }
.wcard.on { border-color: var(--app-accent); box-shadow: 0 0 0 2px rgba(63,191,168,.25); background: rgba(63,191,168,.08); }
.wpick { margin-top: 12px; } .wpick textarea { width: 100%; }
.wizard .lstopts .two { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.wgo { display: flex; align-items: center; gap: 14px; padding-top: 16px; } .btn.big { padding: 12px 22px; font-size: 15px; }
@media (max-width: 900px) { .wcards, .wcards.three { grid-template-columns: 1fr; } }
.mod-connect.wide { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .mod-connect.wide .row { display: flex; gap: 8px; flex-wrap: wrap; } .mod-connect.wide .btn .mk { margin-right: 6px; }
.mod-row .bar { height: 8px; border-radius: 4px; background: var(--app-panel); overflow: hidden; min-width: 60px; } .mod-row .bar i { display: block; height: 100%; background: var(--app-accent); border-radius: 4px; }
/* font weight setting (theme menu) */
body.app { font-weight: var(--app-fw, 400); }
body.app b, body.app strong, body.app h1, body.app h2, body.app h3, body.app h4, body.app .btn.primary, body.app th { font-weight: var(--app-fw-b, 600); }
/* the theme menu inside the Mac app: the topbar is hidden, so it floats at the top right */
html.embed-mac #thememenu { position: fixed; top: 12px; right: 16px; z-index: 60; }

/* ===== Keywords page: compact layout ===== */
.kwpage { gap: 12px; }
.kwpage .sec > .body { padding: 12px 16px; }
.kwsearchcard .body { padding: 14px 16px 12px; }
.kwsearch { flex-wrap: nowrap; }
.kwsearch input { padding: 9px 12px; } .kwsearch select { padding: 9px 12px; max-width: 200px; }
.kwsearch .btn { white-space: nowrap; }
.kwmeta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.kwmeta .kwsources { flex: 1 1 auto; margin-top: 0; } .kwmeta .kwrecent { margin: 0; flex: none; }
.kwsearchcard .msg:empty { display: none; } .kwsearchcard .msg { margin: 8px 0 0; }
.kwres > header { padding: 8px 16px; min-height: 0; gap: 10px; }
.kwtabs button { padding: 5px 6px 5px 10px; font-size: 12.5px; }
.kwres > header .sub { font-size: 12px; }
.kwfreq { margin-bottom: 8px; }
.kwfreq { flex-wrap: wrap; }
.kwfreq .chip, .kwfreq .lbl { flex: none; white-space: nowrap; }
.kwfreq .chip { padding: 2px 8px; }
.kwfreq .chipbtn { flex: none; margin-left: 2px; white-space: nowrap; }
.kwtools { gap: 8px 10px; margin-bottom: 8px; }
.kwtools input, .kwtools select { padding: 5px 9px; }
.kwtools #kq { width: 170px; }
.kwtools .btn.sm, .kwtools .ib.sm { padding: 4px 10px; font-size: 12px; }
.kwtools .ib#kwhow { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--app-line); background: transparent; color: var(--app-muted); cursor: pointer; } .kwtools .ib#kwhow.on { background: var(--app-accent); border-color: var(--app-accent); color: #14181b; }
.kwpi { display: inline-flex; align-items: center; gap: 6px; } .kwpi label { display: inline-flex; align-items: center; gap: 6px; }
.kwnote.top { margin: 0 0 8px; padding: 8px 12px; }
.kwbuilding { margin: 6px 0; padding: 8px 12px; }
.kwpager { margin: 6px 0 0; }

.kwmeta { flex-wrap: nowrap; align-items: flex-start; } .kwmeta .kwsources { flex: 1 1 0; min-width: 0; } .kwmeta .kwrecent { flex: none; }
.kwres > header .btn, .kwtools .btn, .kwtools #kcols, .kwsearch .btn.sm, .kwpager .btn { padding: 5px 11px; font-size: 12px; line-height: 1.25; min-height: 0; height: auto; }
.kwsearch .btn { padding: 9px 16px; }
.recentbtn { padding: 5px 10px; font-size: 12px; }
.kwt td, .kwt th { padding-top: 7px; padding-bottom: 7px; }
.kwt td.why { max-width: 260px; font-size: 12px; line-height: 1.35; }
.kwt td.c-niche .nomatch { font-size: 12px; }
table.kwt td.acts .btn, table.kwt td.acts .ib { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
table.kwt td.acts .ib.sm { width: 26px; height: 26px; }
table.kwt td.acts { white-space: nowrap; }
table.kwt td.why { min-width: 200px; max-width: 300px; }

/* ===== Left menu: hide/show, rail, hover-to-peek ===== */
.sidehead { display: flex; align-items: center; justify-content: space-between; position: relative; padding-bottom: 20px; }
.side .sidehead .logo { padding: 8px 4px 0 6px; display: inline-flex; align-items: center; white-space: nowrap; min-width: 0; } .side .sidehead .logo img#sidelogo { height: 36px; width: auto; min-width: 0; flex: 0 1 auto; } .side .sidehead .logo .probadge { flex-shrink: 0; margin-left: 7px; padding: 2px 6px 1px; font-size: 8.5px; letter-spacing: .18em; align-self: center; }
.side .logo img.logomark { display: none; width: 30px; height: 30px; border-radius: 8px; }
.menuwrap { position: relative; }
.sidetoggle { width: 34px; height: 34px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--app-muted); display: grid; place-items: center; cursor: pointer; margin-top: 6px; }
.sidetoggle:hover, .menuwrap.open .sidetoggle { background: var(--app-panel); color: var(--app-ink); border-color: var(--app-line); }
.sidetoggle svg { width: 18px; height: 18px; }
.menupop { display: none; position: absolute; top: 100%; right: 0; width: 248px; z-index: 90; padding: 8px; border-radius: 12px; background: var(--app-panel); border: 1px solid var(--app-line); box-shadow: 0 14px 36px rgba(0,0,0,.4); }
.menuwrap.open .menupop { display: block; }
.side:has(.menuwrap.open) { z-index: 95; } /* the options panel floats over the page (rail mode: to the right of the button) */
.mp-title { padding: 4px 8px 6px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--app-muted); }
.mp-opt { display: block; width: 100%; text-align: left; padding: 9px 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--app-ink); font: inherit; cursor: pointer; }
.mp-opt:hover { background: var(--app-panel-2); border-color: var(--app-line); }
.mp-opt.on { border-color: var(--app-accent); }
.mp-opt b { display: block; font-size: 13.5px; } .mp-opt small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.4; color: var(--app-muted); font-weight: 400; }
.mp-now { margin: 6px 8px 2px; padding-top: 8px; border-top: 1px solid var(--app-line); font-size: 11.5px; color: var(--app-muted); }
@media (min-width: 901px) {
  .app-shell { grid-template-columns: var(--side-w, 264px) minmax(0, 1fr); }
  body.menu-anim .app-shell { transition: grid-template-columns .2s ease; }
  body.side-rail { --side-w: 64px; }
  /* minimized: icons only */
  body.side-rail:not(.side-peek) .side { padding: 14px 8px; overflow: hidden; align-items: stretch; }
  body.side-rail:not(.side-peek) .sidehead { flex-direction: column; gap: 10px; padding-bottom: 12px; align-items: center; }
  body.side-rail:not(.side-peek) .side .logo img#sidelogo { display: none; }
  body.side-rail:not(.side-peek) .side .logo { padding: 4px 0 0; }
  body.side-rail:not(.side-peek) .side .logo img.logomark { display: block; }
  body.side-rail:not(.side-peek) .sidetoggle { margin-top: 0; }
  body.side-rail:not(.side-peek) .side .nav > span:not(.navbadge) { display: none; }
  body.side-rail:not(.side-peek) .side .nav .soon { display: none; }
  body.side-rail:not(.side-peek) .side a.nav, body.side-rail:not(.side-peek) .side span.nav { justify-content: center; padding: 10px 0; gap: 0; position: relative; }
  body.side-rail:not(.side-peek) .side .navbadge { position: absolute; top: 2px; right: 4px; margin: 0; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }
  body.side-rail:not(.side-peek) .side .group { height: 1px; padding: 0; margin: 10px 12px; font-size: 0; background: var(--app-line); }
  body.side-rail:not(.side-peek) .side .plan-card, body.side-rail:not(.side-peek) .side .ver { display: none; }
  /* pointer over the icons: the full menu opens over the page, without moving it */
  .app-shell > .side { grid-column: 1; } .app-shell > .main { grid-column: 2; } /* the page keeps its column while the menu floats over it */
  body.side-rail.side-peek .side { position: fixed; top: 0; left: 0; bottom: 0; width: 264px; height: calc(100vh / var(--zoom, 1)); overflow-y: auto; z-index: 70; box-shadow: 12px 0 32px rgba(0,0,0,.4); }
}
@media (max-width: 900px) { .sidetoggle { display: none; } .sidehead { padding-bottom: 0; } }
@media (min-width: 901px) { .topbar .menubtn { display: none !important; } } /* the menu button now lives beside the logo */

/* Keywords: tick column and picked rows */
.kwt th.c-check, .kwt td.c-check { width: 34px; padding-left: 10px; padding-right: 4px; text-align: center; }
.kwt .c-check input { accent-color: var(--app-accent); margin: 0; cursor: pointer; }
.kwt tr.picked td { background: color-mix(in srgb, var(--app-accent) 9%, transparent); }
.kwfreq:not(.open) .morewrap { display: none; } .kwfreq.open .morewrap { display: contents; }

/* ===== Downloads ===== */
.dl-hero .body { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 22px 24px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(63,191,168,.16), transparent 55%), radial-gradient(90% 140% at 100% 100%, rgba(139,92,246,.14), transparent 55%); }
.dl-hero h2 { font-size: 22px; margin: 0 0 6px; } .dl-hero p { margin: 0; color: var(--app-ink-2); max-width: 640px; }
.dl-now { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--app-line); background: var(--app-panel-2); font-size: 13px; color: var(--app-ink-2); white-space: nowrap; }
.dl-now.ok { border-color: var(--app-accent); color: var(--app-accent); } .dl-now svg { width: 16px; height: 16px; }
.dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.dl-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 16px; border: 1px solid var(--app-line); background: linear-gradient(180deg, color-mix(in srgb, var(--g1) 10%, var(--app-panel)) 0%, var(--app-panel) 46%); transition: transform .15s, box-shadow .15s, border-color .15s; }
.dl-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.18); border-color: color-mix(in srgb, var(--g1) 55%, var(--app-line)); }
.dl-card.is-mine { border-color: color-mix(in srgb, var(--g1) 70%, var(--app-line)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--g1) 45%, transparent); }
.dl-card.is-soon .dl-tile { filter: saturate(.55); opacity: .85; }
.dl-ribbon { position: absolute; top: 14px; right: 14px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, var(--g1), var(--g2)); }
.dl-top { display: flex; align-items: center; gap: 14px; }
.dl-tile { width: 56px; height: 56px; flex: none; border-radius: 15px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--g1), var(--g2)); box-shadow: 0 8px 18px color-mix(in srgb, var(--g1) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.25); }
.dl-tile svg { width: 28px; height: 28px; }
.dl-head h3 { margin: 0; font-size: 17px; font-family: Poppins, sans-serif; } .dl-head small { color: var(--app-muted); font-size: 12px; }
.dl-card p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--app-ink-2); }
.dl-card .dl-note { font-size: 12.5px; color: var(--app-muted); } .dl-card .dl-note a { color: var(--app-accent); }
.dl-foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dl-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--app-line); color: var(--app-muted); }
.dl-pill svg { width: 13px; height: 13px; } .dl-pill.live { color: var(--app-accent); border-color: color-mix(in srgb, var(--app-accent) 55%, transparent); } .dl-pill.ok { color: #fff; background: var(--app-accent-deep); border-color: var(--app-accent-deep); }
.dl-btn { white-space: nowrap; } .dl-btn[disabled] { opacity: .6; cursor: not-allowed; }
/* extension nudge on the database and keyword pages */
.extnudge { display: flex; align-items: center; gap: 14px; margin: 18px 28px 0; padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, #f5a524 55%, var(--app-line)); background: color-mix(in srgb, #f5a524 10%, var(--app-panel)); }
.extnudge .en-ic { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #0f9f6e, #35c4a6); } .extnudge .en-ic svg { width: 18px; height: 18px; }
.extnudge .en-text { flex: 1; font-size: 13.5px; line-height: 1.45; color: var(--app-ink-2); } .extnudge .en-text b { color: var(--app-ink); } .extnudge small { display: block; margin-top: 3px; color: var(--app-muted); font-size: 12px; }
.extnudge .en-x { border: 0; background: none; color: var(--app-muted); cursor: pointer; font-size: 14px; padding: 4px 6px; }
@media (max-width: 900px) { .extnudge { margin: 12px 12px 0; flex-wrap: wrap; } }
.dl-card.is-mine .dl-head { padding-right: 104px; }
.dl-btn { padding: 8px 16px; font-size: 13.5px; }
.dl-card.is-wide { grid-column: span 2; } @media (max-width: 760px) { .dl-card.is-wide { grid-column: auto; } }
.dl-pill.soon { font-weight: 500; }
.extnudge .btn.sm { padding: 6px 12px; font-size: 12.5px; white-space: nowrap; }
/* The filter sheet over results starts where the page starts: after the full menu, or after the icon strip when the
   menu is minimized (the menu's width lives in --side-w). */
@media (min-width: 901px) { .mode-results .dbfilters { left: var(--side-w, 264px); } body.menu-anim .mode-results .dbfilters { transition: transform .22s ease, left .2s ease; } }
.kwsearch #go, .kwsearch #kreset { min-width: 112px; justify-content: center; text-align: center; }

/* Keyword tables: the "Why" text stays on two lines (full text on hover), so rows keep an even, compact height. */
table.kwt td.why .whyc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Inside ProfitLupa for Mac the app draws the menu, so the page takes the whole width. (The web menu's rail/grid rules
   above must not reserve a column here.) */
html.embed-mac body.app .app-shell { grid-template-columns: minmax(0, 1fr) !important; }
html.embed-mac body.app .app-shell > .main { grid-column: 1 !important; }
html.embed-mac .mode-results .dbfilters { left: 0 !important; }

/* Keywords tools: filters on the left, actions on the right. The action group never splits: when the width runs out it
   moves to its own line as a whole, right-aligned. */
.kwtools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.kwtools .kwf, .kwtools .kwa { display: flex; align-items: center; gap: 8px 10px; }
.kwtools .kwf { flex-wrap: wrap; min-width: 0; }
.kwtools .kwa { flex-wrap: nowrap; margin-left: auto; white-space: nowrap; }
/* Sticky column headers in Safari/WebKit (and so the Mac app): collapsed borders let scrolled rows show above a stuck
   header; separate borders with no spacing look the same and stick cleanly. */
.kwwrap table.kwt, .kwwrap table.kwsaved { border-collapse: separate; border-spacing: 0; }
.kwwrap thead th { top: 0; background-clip: padding-box; }
/* Safari/WebKit (and so the Mac app) pins table headers a few pixels below the top of their scroll box, letting a sliver
   of the scrolled rows show above the header. Each pinned header paints a solid band of its own colour upward to cover
   that sliver; the band lies outside the scroll box when the header is flush (Chrome), so it's invisible there. Every
   .tablewrap starts directly with its table, so the band never covers other content. */
.tablewrap thead th { position: sticky; top: 0; z-index: 3; background: var(--app-panel-2); box-shadow: inset 0 -1px 0 var(--app-line), 0 -14px 0 0 var(--app-panel-2); }

/* My Amazon Seller: the Seller Central hub banner */
.scbanner { display: flex; align-items: center; gap: 14px; margin: 18px 28px 0; padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--app-accent) 55%, var(--app-line)); background: linear-gradient(135deg, color-mix(in srgb, var(--app-accent) 12%, var(--app-panel)), color-mix(in srgb, #f5a524 10%, var(--app-panel))); }
.scbanner .scb-ic { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--app-accent-deep, #0e7c6b); color: #fff; font-weight: 700; font-size: 12px; letter-spacing: .5px; }
.scbanner .scb-t { flex: 1; min-width: 0; font-size: 13.5px; } .scbanner .scb-t b { display: block; } .scbanner .scb-t span { display: block; color: var(--app-ink-2); font-size: 13px; }
.scbanner .btn { white-space: nowrap; padding: 7px 14px; font-size: 13px; }
.scbanner .scb-x { border: 0; background: none; color: var(--app-muted); cursor: pointer; font-size: 14px; padding: 4px 6px; }
@media (max-width: 700px) { .scbanner { flex-wrap: wrap; } }
html.embed-mac .scbanner { margin: 12px 16px 0; } @media (max-width: 900px) { .scbanner { margin: 12px 12px 0; } }

/* ===== Admin → Page reading (plain-language view) ===== */
.rd-hero { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--app-line); }
.rd-hero .rd-ic { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 20px; font-weight: 700; color: #fff; }
.rd-hero b { display: block; font-size: 16px; } .rd-hero span:not(.rd-ic) { display: block; color: var(--app-ink-2); font-size: 13.5px; margin-top: 2px; }
.rd-hero.ok { background: color-mix(in srgb, var(--app-accent) 10%, var(--app-panel)); border-color: color-mix(in srgb, var(--app-accent) 45%, var(--app-line)); } .rd-hero.ok .rd-ic { background: var(--app-accent); }
.rd-hero.warn { background: color-mix(in srgb, #f5a524 12%, var(--app-panel)); border-color: color-mix(in srgb, #f5a524 50%, var(--app-line)); } .rd-hero.warn .rd-ic { background: #d9901a; }
.rd-hero.bad { background: color-mix(in srgb, #e5484d 10%, var(--app-panel)); border-color: color-mix(in srgb, #e5484d 45%, var(--app-line)); } .rd-hero.bad .rd-ic { background: #e5484d; }
.rd-hero.idle .rd-ic { background: var(--app-muted); }
.rd-list { display: flex; flex-direction: column; gap: 10px; }
.rd-card { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--app-line); border-left: 4px solid #d9901a; background: var(--app-panel-2); }
.rd-card.bad { border-left-color: #e5484d; }
.rd-card-t { flex: 1; min-width: 0; } .rd-card-t b { display: block; font-size: 14.5px; } .rd-card-t span { display: block; font-size: 13px; color: var(--app-ink-2); margin-top: 2px; }
.rd-card-t .rd-doing { color: var(--app-muted); font-size: 12.5px; margin-top: 6px; }
.rd-acts { display: flex; gap: 6px; flex: none; }
.rd-tl { list-style: none; margin: 0; padding: 0; }
.rd-tl li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--app-line); } .rd-tl li:last-child { border-bottom: 0; }
.rd-tl li > div { flex: 1; min-width: 0; } .rd-tl b { display: block; font-size: 13.5px; } .rd-tl small { display: block; color: var(--app-muted); font-size: 12px; margin-top: 1px; }
.rd-dot { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; background: var(--app-muted); }
.rd-tl li.ok .rd-dot { background: var(--app-accent); } .rd-tl li.warn .rd-dot { background: #d9901a; } .rd-tl li.info .rd-dot { background: #3b82f6; }
.rd-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.rd-group h4 { margin: 0 0 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--app-muted); }
.rd-row { display: grid; grid-template-columns: 124px 1fr auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--app-line); font-size: 13px; }
.rd-row .rd-r { text-align: right; color: var(--app-muted); font-size: 12px; } .rd-row .rd-r small { display: block; font-size: 11px; }
.rd-chip { display: inline-block; text-align: center; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; border: 1px solid var(--app-line); color: var(--app-muted); }
.rd-chip.ok { color: var(--app-accent); border-color: color-mix(in srgb, var(--app-accent) 55%, transparent); } .rd-chip.warn { color: #b7791f; border-color: #e0b45c; } .rd-chip.bad { color: #e5484d; border-color: #eb8a8d; }
.rd-set { display: flex; flex-direction: column; gap: 10px; }
.rd-sw { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--app-line); background: var(--app-panel-2); cursor: pointer; }
.rd-sw.sel { cursor: default; } .rd-sw > span { flex: 1; } .rd-sw b { display: block; font-size: 13.5px; } .rd-sw small { display: block; color: var(--app-muted); font-size: 12px; margin-top: 2px; }
.rd-sw input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--app-accent); flex: none; order: 2; }
.rd-dev summary { padding: 12px 16px; cursor: pointer; } .rd-dev .body h4 { margin: 14px 0 4px; }
.rd-hero b, .rd-card-t b, .rd-tl b, .rd-row .rd-n { color: var(--app-ink); }
.rd-card-t span, .rd-hero span:not(.rd-ic) { color: var(--app-ink-2); }
.rd-row { grid-template-columns: max-content minmax(0, 1fr) max-content; }
.rd-row .rd-r { white-space: nowrap; } .rd-row .rd-r small { white-space: normal; max-width: 170px; margin-left: auto; }
.rd-tl .btn, .rd-card .btn { padding: 5px 12px !important; font-size: 12.5px !important; min-height: 0 !important; }
.rd-chip { min-width: 0; }

/* ===== Downloads (two products) ===== */
.dl2-hero { padding: 26px 28px; border-radius: 16px; margin-bottom: 18px; border: 1px solid var(--app-line);
  background: radial-gradient(120% 160% at 0% 0%, rgba(63,191,168,.20), transparent 55%), radial-gradient(100% 160% at 100% 100%, rgba(139,92,246,.18), transparent 55%), var(--app-panel); }
.dl2-hero h2 { margin: 0 0 6px; font-size: 26px; font-family: Poppins, sans-serif; } .dl2-hero p { margin: 0; max-width: 680px; color: var(--app-ink-2); font-size: 15px; }
.dl2-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .dl2-grid { grid-template-columns: minmax(0, 1fr); } }
.dl2-card { --c1: #0f9f6e; --c2: #35c4a6; position: relative; display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 18px; border: 1px solid var(--app-line); overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 13%, var(--app-panel)) 0%, var(--app-panel) 42%); }
.dl2-card.mac { --c1: #6d28d9; --c2: #a855f7; }
.dl2-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--c1), var(--c2)); }
.dl2-card.mine { border-color: color-mix(in srgb, var(--c1) 55%, var(--app-line)); box-shadow: 0 10px 30px color-mix(in srgb, var(--c1) 16%, transparent); }
.dl2-top { display: flex; align-items: center; gap: 14px; } .dl2-top > div { flex: 1; min-width: 0; }
.dl2-tile { width: 58px; height: 58px; flex: none; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 8px 20px color-mix(in srgb, var(--c1) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.25); }
.dl2-tile svg { width: 30px; height: 30px; }
.dl2-top h3 { margin: 0; font-size: 19px; font-family: Poppins, sans-serif; } .dl2-sub { display: block; color: var(--app-muted); font-size: 13px; margin-top: 2px; }
.dl2-here { flex: none; align-self: flex-start; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.dl2-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dl2-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; border: 1px solid var(--app-line); background: var(--app-panel-2); color: var(--app-ink-2); }
.dl2-chip.on { border-color: color-mix(in srgb, var(--c1) 60%, var(--app-line)); color: var(--app-ink); background: color-mix(in srgb, var(--c1) 12%, var(--app-panel-2)); }
.dl2-chip svg { width: 12px; height: 12px; color: var(--c1); }
.dl2-feat { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.dl2-feat li { position: relative; padding-left: 20px; font-size: 14px; color: var(--app-ink-2); line-height: 1.45; }
.dl2-feat li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.dl2-step { padding: 10px 12px; border-radius: 10px; font-size: 13.5px; background: color-mix(in srgb, #f5a524 12%, var(--app-panel-2)); border: 1px solid color-mix(in srgb, #f5a524 45%, var(--app-line)); }
.dl2-foot { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.dl2-go { padding: 10px 20px !important; font-size: 14.5px !important; }
.dl2-note { flex: 1; min-width: 200px; font-size: 12.5px; color: var(--app-muted); } .dl2-note a { color: var(--app-accent); }
.dl2-installed { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--c1); background: color-mix(in srgb, var(--c1) 12%, var(--app-panel)); border: 1px solid color-mix(in srgb, var(--c1) 45%, var(--app-line)); }
.dl2-installed svg { width: 16px; height: 16px; }
.dl2-share { flex: none; width: 40px; height: 40px; display: inline-grid; place-items: center; padding: 0; border-radius: 10px; cursor: pointer; color: var(--app-ink-2); background: var(--app-panel-2); border: 1px solid var(--app-line); }
.dl2-share:hover { color: var(--c1); border-color: color-mix(in srgb, var(--c1) 55%, var(--app-line)); }
.dl2-share svg { width: 19px; height: 19px; }
.dl2-copied { font-size: 12.5px; font-weight: 600; color: var(--c1); }
html:not(.light) .dl2-card.ext .dl2-share:hover, html:not(.light) .dl2-card.ext .dl2-copied { color: #3fd1b3; }
html:not(.light) .dl2-card.mac .dl2-share:hover, html:not(.light) .dl2-card.mac .dl2-copied { color: #c4b5fd; }
/* dark theme: brighter accents so "Installed" and the chips' ticks stay readable */
html:not(.light) .dl2-card.ext .dl2-installed, html:not(.light) .dl2-card.ext .dl2-chip svg { color: #3fd1b3; }
html:not(.light) .dl2-card.mac .dl2-installed, html:not(.light) .dl2-card.mac .dl2-chip svg { color: #c4b5fd; }
html:not(.light) .dl2-card.mac .dl2-installed { border-color: rgba(196,181,253,.45); background: rgba(139,92,246,.14); }
.dl2-soon { margin: 14px 2px 18px; font-size: 13px; color: var(--app-muted); }
.dl2-card { text-align: left; align-items: stretch; margin: 0; max-width: none; }
.dl2-card > * { margin-left: 0; margin-right: 0; }
.dl2-chips { justify-content: flex-start; } .dl2-feat { margin: 0 !important; padding: 0 !important; }

/* ===== Seller Centers: "not connected yet" card (Shell.mkPitch) ===== */
.mkp { position: relative; margin-bottom: 18px; padding: 26px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--c1) 40%, var(--app-line)); overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 12%, var(--app-panel)) 0%, var(--app-panel) 38%); }
.mkp::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--c1), var(--c2)); }
.mkp-top { display: flex; align-items: center; gap: 16px; }
.mkp-tile { width: 58px; height: 58px; flex: none; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 8px 20px color-mix(in srgb, var(--c1) 35%, transparent); }
.mkp-tile svg { width: 28px; height: 28px; }
.mkp-t { flex: 1; min-width: 0; } .mkp-t h2 { margin: 0; font-size: 22px; font-family: Poppins, sans-serif; } .mkp-t p { margin: 4px 0 0; color: var(--app-muted); font-size: 14px; }
.mkp-go { flex: none; padding: 10px 20px !important; font-size: 14.5px !important; }
.mkp-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 24px; }
.mkp-g h4 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--app-muted); }
.mkp-g ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mkp-g li { position: relative; padding-left: 18px; } .mkp-g li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.mkp-g b { display: block; font-size: 14.5px; } .mkp-g span { display: block; color: var(--app-ink-2); font-size: 13.5px; line-height: 1.45; margin-top: 1px; }
.mkp-foot { margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--app-line); color: var(--app-muted); font-size: 13px; }
@media (max-width: 1000px) { .mkp-groups { grid-template-columns: minmax(0, 1fr); gap: 18px; } .mkp-top { flex-wrap: wrap; } }

/* Menu: Marketplaces with its marketplaces underneath */
.navgrp .navparent { position: relative; }
.navgrp .chev { margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); opacity: .55; transition: transform .15s; }
.navgrp.open .chev { transform: rotate(45deg); }
.navgrp .navsub { display: none; margin: 2px 0 4px 18px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.12); }
.navgrp.open .navsub { display: block; }
.navgrp .nav.sub { padding-top: 7px; padding-bottom: 7px; font-size: 13.5px; }
.navgrp.here > .navparent:not(:hover) { background: transparent; }
/* minimized menu (icon strip): only the parent icon */
@media (min-width: 901px) {
  body.side-rail:not(.side-peek) .navgrp .navsub, body.side-rail:not(.side-peek) .navgrp .chev { display: none !important; }
  body.side-rail:not(.side-peek) .navgrp.here > .navparent { background: rgba(255,255,255,.08); }
}

/* Admin console: roles */
.rolepill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; border: 1px solid var(--app-line); color: var(--app-muted); }
.rolepill.super { color: #c4b5fd; border-color: rgba(167,139,250,.5); background: rgba(139,92,246,.12); } .rolepill.admin { color: var(--app-accent); border-color: color-mix(in srgb, var(--app-accent) 50%, transparent); }
html.light .rolepill.super { color: #6d28d9; }
.rolesel { font: inherit; font-size: 12.5px; padding: 3px 6px; border-radius: 8px; border: 1px solid var(--app-line); background: var(--app-panel-2); color: var(--app-ink); }
.ok2 { color: var(--app-accent); font-weight: 600; }
.tstatus.pending { color: #d9901a; } .tstatus.approved { color: #e5484d; } .tstatus.declined { color: var(--app-muted); }

/* "Hide admin data" switch in the top bar (admins only) */
#adminhide svg { width: 18px; height: 18px; } #adminhide.on { color: #f5a524; border-color: rgba(245,165,36,.55); background: rgba(245,165,36,.12); }

/* Account → Security question */
.secq-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--app-line); } .secq-block h3 { margin: 0 0 4px; font-size: 15px; }
.secq-form { gap: 8px; margin: 10px 0 4px; } .secq-form select, .secq-form input { font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--app-line); background: var(--app-panel-2); color: var(--app-ink); min-width: 220px; }
.warnnote { margin: 6px 0; padding: 8px 12px; border-radius: 8px; font-size: 13.5px; background: rgba(245,165,36,.12); border: 1px solid rgba(245,165,36,.4); }

/* Dashboard: a module waiting for its numbers */
.statwait { display: flex; align-items: center; gap: 12px; padding: 18px 4px; color: var(--app-muted); font-size: 14px; }
.statwait .spin { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--app-accent) 22%, transparent); border-top-color: var(--app-accent); animation: statspin .8s linear infinite; }
@keyframes statspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .statwait .spin { animation-duration: 2.4s; } }

/* Walmart: report upload */
.wmup-drop { display: grid; gap: 2px; place-items: center; text-align: center; padding: 22px; margin: 12px 0; border: 2px dashed var(--app-line); border-radius: 14px; cursor: pointer; background: var(--app-panel-2); }
.wmup-drop:hover { border-color: var(--app-accent); } .wmup-drop small { color: var(--app-muted); }
.wmup-prev { border: 1px solid var(--app-line); border-radius: 12px; padding: 14px; margin: 8px 0 12px; }
.wmup-prev select { font: inherit; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--app-line); background: var(--app-panel-2); color: var(--app-ink); }
.wmup-grid { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: 16px; margin-top: 10px; } .wmup-grid h4 { margin: 0 0 4px; }
.wmup-totals { margin: 10px 0 0; } .need { font-size: 11px; color: #d9901a; font-weight: 600; }
@media (max-width: 900px) { .wmup-grid { grid-template-columns: 1fr; } }
.wmup-grid > div { min-width: 0; } .wmup-grid table { width: 100%; } .wmup-grid td select { width: 100%; max-width: 100%; min-width: 0; }
.wmup-grid { grid-template-columns: minmax(300px, 1fr) minmax(0, 1.6fr); }

/* Account: emails consent, deletion; sign-up consent (login page shares style.css, see there) */
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; cursor: pointer; } .consent input { margin-top: 3px; flex: none; }
.danger-sec header h2 { color: #e5484d; } #del-form input { font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--app-line); background: var(--app-panel-2); color: var(--app-ink); min-width: 0; width: 100%; box-sizing: border-box; } #del-form .pair { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* App Store build of the Mac app: never show buying, prices or billing (safety net on top of the page code) */
html.store-mode:not(.iap-mode) [data-upgrade], html.store-mode [data-portal], html.store-mode:not(.iap-mode) .paid-only { display: none !important; }
html.iap-mode .protag { cursor: pointer; }

/* Language selector (top bar) */
#langbtn { display: inline-flex; align-items: center; gap: 5px; } #langbtn svg { width: 17px; height: 17px; } .lang-cur { font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.langmenu { min-width: 190px; } .lang-opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; padding: 8px 12px; border: 0; background: none; color: var(--app-ink); cursor: pointer; border-radius: 8px; }
.lang-opt:hover { background: var(--app-panel-2); } .lang-opt.on { color: var(--app-accent); font-weight: 600; } .lang-code { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; color: var(--app-muted); width: 22px; }
html[lang="ja"] body, html[lang="ja"] .app { font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", Meiryo, var(--app-font, sans-serif); }
html[lang="zh"] body, html[lang="zh"] .app { font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", var(--app-font, sans-serif); }
/* Admin → Settings → AI spend */
.aihero { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 4px 0 10px; }
.aihero > div { background: var(--app-bg); border: 1px solid var(--app-line); border-radius: 10px; padding: 10px 12px; }
.aihero b { display: block; font-size: 20px; } .aihero small { color: var(--app-muted); }
.aiprog { height: 8px; border-radius: 4px; background: var(--app-line); overflow: hidden; margin: 0 0 12px; } .aiprog i { display: block; height: 100%; background: var(--app-accent); }
.aiprog i.warn { background: #d9a400; } .aiprog i.bad { background: #c43d3d; }
.aibars { display: flex; align-items: flex-end; gap: 4px; height: 70px; padding: 4px 0 0; overflow-x: auto; }
.aibar { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; min-width: 18px; } .aibar i { display: block; width: 14px; background: var(--app-accent); border-radius: 3px 3px 0 0; } .aibar small { font-size: 10px; color: var(--app-muted); }
.aiset label.na { display: inline-flex; flex-direction: column; gap: 4px; font-size: 13px; } .aiset input[type=number] { width: 120px; }
/* Tracker: listing change before/after */
.aldiff { margin: 4px 0 2px; font-size: 13px; } .aldiff summary { cursor: pointer; color: var(--app-muted); }
.aldiff-b { margin-top: 4px; } .aldiff-b s { display: block; color: var(--app-muted); text-decoration: line-through; } .aldiff-b b { display: block; font-weight: 500; }
.aldiff-b p { margin: 0 0 6px; padding-left: 8px; border-left: 2px solid var(--app-accent); } .aldiff-b p.same { border-left-color: var(--app-line); color: var(--app-muted); }
.aldiff-g { font-size: 13px; color: var(--app-muted); }
.claimbox { margin-top: 12px; } .claimbox textarea { width: 100%; font: 13px/1.5 ui-monospace, Menlo, monospace; margin-top: 6px; }

/* ---- Compact widgets shared by the Launch planner and Listing writer ---- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 0 0 10px; } .kpis > div { background: var(--app-bg); border: 1px solid var(--app-line); border-radius: 8px; padding: 8px 10px; } .kpis b { display: block; font-size: 17px; } .kpis small { color: var(--app-muted); font-size: 12px; line-height: 1.3; display: block; }
.btngroup { display: inline-flex; gap: 4px; margin-left: 8px; } .btngroup select { font: inherit; font-size: 13px; padding: 5px 8px; border-radius: 7px; border: 1px solid var(--app-line); background: var(--app-bg); color: var(--app-ink); max-width: 170px; }
.field > span { display: block; font-size: 12.5px; color: var(--app-ink-2); margin: 0 0 3px; } .field input, .field select, .field textarea { font: inherit; font-size: 13px; width: 100%; padding: 7px 9px; border: 1px solid var(--app-line); border-radius: 7px; } .field textarea { line-height: 1.4; resize: vertical; }
.lpnote, .lwnote { font-size: 12.5px; margin: 6px 0 0; }
/* Launch planner */
.lpgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px 16px; } .lpgroup h4 { margin: 2px 0 4px; font-size: 13px; } .lpgroup .field { margin: 4px 0; } .lpgroup .field input { padding: 5px 8px; font-size: 13px; }
.lpchart { width: 100%; max-width: 640px; height: auto; display: block; margin: 4px 0 8px; color: var(--app-accent); }
.lptwo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; align-items: start; }
.lpprog { display: inline-block; width: 110px; height: 7px; border-radius: 4px; background: var(--app-line); overflow: hidden; } .lpprog i { display: block; height: 100%; background: var(--app-accent); }
.lpms { display: flex; flex-direction: column; gap: 3px; } .lpm { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 4px 6px; border-radius: 6px; font-size: 13px; } .lpm:hover { background: var(--app-panel-2); } .lpm.done .lpm-l { text-decoration: line-through; color: var(--app-muted); } .lpm-d { color: var(--app-muted); font-size: 12px; white-space: nowrap; }
.lptasks { display: flex; flex-direction: column; gap: 3px; } .lpt { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; padding: 4px 6px; border-radius: 6px; font-size: 13px; } .lpt:hover { background: var(--app-panel-2); } .lpt.done .lpt-t { text-decoration: line-through; color: var(--app-muted); }
.prio { font: inherit; font-size: 11.5px; font-weight: 700; padding: 2px 6px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; } .prio.high { background: #c43d3d; color: #fff; } .prio.medium { background: #d9a400; color: #1c2124; } .prio.low { background: var(--app-panel-2); color: var(--app-ink); border-color: var(--app-line); }
.lpt .btn-x { border: 0; background: transparent; color: var(--app-muted); font-size: 15px; cursor: pointer; padding: 0 4px; } .lpt .btn-x:hover { color: #c43d3d; }
.lpweeks > summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; } .lpweeks > summary h2 { margin: 0; font-size: 14px; }
@media (max-width: 1200px) { .lpgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .lpgrid, .lptwo { grid-template-columns: 1fr; } }
@media print { .side, .topbar, .lp-head header .btngroup { display: none !important; } .main { margin: 0 !important; } }
/* Listing writer */
.lwcols { display: grid; grid-template-columns: minmax(360px, 520px) minmax(0, 1fr); gap: 0 14px; align-items: start; } .lwresult { position: sticky; top: 12px; }
.lwstep { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; background: var(--app-accent-deep); color: #fff; font-weight: 700; font-size: 12px; margin-right: 8px; flex: none; }
.lwsrc { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; } .lwconnect { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--app-line); background: var(--app-bg); font-size: 13px; } .lwconnect p { margin: 4px 0 8px; color: var(--app-muted); }
.lwgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; } .lwgrid .field { margin: 4px 0; } .lwgrid .wide { grid-column: 1 / -1; } .lwrule { font-size: 12px; margin: 2px 0 6px; }
.lwchips { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 4px; } .chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--app-line); background: var(--app-bg); font-size: 12.5px; color: var(--app-ink); } .chip button { border: 0; background: transparent; color: var(--app-muted); cursor: pointer; font-size: 13px; padding: 0; } .chip.pick { cursor: pointer; font: inherit; font-size: 12.5px; } .chip.pick:hover { border-color: var(--app-accent); } .chip.pick:disabled { opacity: .45; } .chip.pick small { color: var(--app-muted); }
.lwf { margin: 8px 0; } .lwfh { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; font-size: 13px; } .lwfh .spacer { flex: 1; } .lwf .field { margin: 0; } .lwcount.bad { color: #c43d3d; font-weight: 600; }
.lwwarn { margin: 4px 0 8px; padding-left: 18px; color: #d9a400; font-size: 12.5px; } .lwempty .body { min-height: 120px; display: flex; align-items: center; }
@media (max-width: 980px) { .lwcols { grid-template-columns: 1fr; } .lwresult { position: static; } }
.field > span { display: inline-block; } .app .field label[title] span, .app label.field[title] > span { border-bottom: 1px dotted var(--app-muted); }
.lp-head header .btn, .lptwo .btn, .lwcols .btn, .lwresult .btn { padding: 5px 10px; font-size: 13px; } .lwcols .btn.primary { padding: 8px 16px; font-size: 14px; }
.btngroup select { padding: 4px 6px; font-size: 12.5px; }

.delisted { border-left: 3px solid #c43d3d; padding-left: 12px; }

/* ---- paywall: grace banner, Check plans, badges, allowance pills, limit notices ---- */
.gracebanner { display: flex; align-items: center; gap: 14px; margin: 12px 24px 0; padding: 12px 16px; border-radius: 12px; background: linear-gradient(90deg, rgba(29,186,154,.16), rgba(29,186,154,.05)); border: 1px solid rgba(29,186,154,.35); font-size: 13.5px; line-height: 1.45; }
.gracebanner span { flex: 1; } .gracebanner .btn { white-space: nowrap; }
.logo { display: inline-flex; align-items: center; white-space: nowrap; gap: 0; } .side .logo img#sidelogo { min-width: 0; flex: 0 1 auto; width: auto; max-width: 100%; height: auto; max-height: 50px; } .logo .probadge { flex-shrink: 0; margin-left: 4px; }
.founder-tip { display: none; position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: 320px; padding: 14px 16px; border-radius: 12px; background: var(--app-panel); color: var(--app-ink); border: 1px solid var(--app-line); box-shadow: 0 12px 32px rgba(0,0,0,.28); font-weight: 400; letter-spacing: 0; font-size: 13px; line-height: 1.5; white-space: normal; z-index: 60; text-align: left; }
.founder-tip b { display: block; font-size: 14px; margin-bottom: 6px; color: var(--app-accent); } .founder-tip ul { margin: 8px 0 0; padding-left: 18px; }
.founder-badge:not(.hideable):hover .founder-tip, .founder-badge:not(.hideable):focus .founder-tip { display: block; } /* a hideable badge opens its menu by click only (.open) */
.allowpill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; background: var(--app-panel-2); color: var(--app-ink-2); border: 1px solid var(--app-line); }
.allowpill.low { border-color: #e3a71c; color: #e3a71c; } .allowpill.out { border-color: #c43d3d; color: #c43d3d; }
.limitwall { position: fixed; z-index: 70; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, var(--app-bg) 60%, transparent); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.lw-card { position: relative; width: min(470px, 100%); display: grid; gap: 14px; justify-items: center; text-align: center; padding: 30px 28px 26px; border-radius: 16px; background: var(--app-panel); border: 1px solid var(--app-line); box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.lw-card h3 { margin: 0; font-size: 19px; font-family: Poppins, sans-serif; } .lw-sub { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--app-ink-2); }
.lw-timer { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 999px; font-size: 14px; background: var(--app-panel-2); border: 1px solid var(--app-line); } .lw-timer .countdown b { font-size: 17px; }
.lw-x { position: absolute; top: 8px; right: 10px; width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--app-muted); font-size: 22px; line-height: 1; cursor: pointer; } .lw-x:hover { color: var(--app-ink); background: var(--app-panel-2); }
.lw-code { width: 190px; text-align: center; font: inherit; font-size: 22px; letter-spacing: .35em; padding: 10px 10px 10px calc(10px + .35em); border-radius: 10px; border: 1px solid var(--app-line); background: var(--app-panel-2); color: var(--app-ink); font-variant-numeric: tabular-nums; }
.lw-msg { margin: 0; min-height: 1.2em; } .lw-link { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; color: var(--app-accent); cursor: pointer; text-decoration: underline; } .lw-link:disabled { opacity: .5; cursor: default; }
.limitnote { margin: 10px 0; padding: 12px 14px; border-radius: 10px; background: var(--app-panel-2); border-left: 3px solid var(--app-accent); font-size: 13.5px; line-height: 1.5; }
.limitnote b { display: block; margin-bottom: 2px; } .limitnote .btn { margin-left: 8px; }
.srcswitch button.soon { opacity: .6; cursor: default; } .srcswitch button small.soon { font-size: 10px; padding: 1px 6px; border-radius: 999px; background: var(--app-panel-2); color: var(--app-muted); margin-left: 4px; vertical-align: middle; }
.srcswitch button.nudge { animation: nudge .5s; } @keyframes nudge { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.selbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 0; font-size: 13px; }
.emailpanel { width: min(680px, calc(96vw / var(--zoom, 1))); } .emailpanel label { display: block; margin: 10px 0; font-size: 13px; color: var(--app-muted); } .emailpanel input, .emailpanel textarea { display: block; width: 100%; margin-top: 4px; font: inherit; color: var(--app-ink); background: var(--app-panel-2); border: 1px solid var(--app-line); border-radius: 8px; padding: 8px 10px; }
.emailpanel .row { display: flex; gap: 8px; margin-top: 10px; }

.countdown { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; --p: 0%; }
.countdown i { width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(var(--app-accent) var(--p), var(--app-line) 0); transition: background .6s linear; }
.countdown b { font-variant-numeric: tabular-nums; } .countdown.ready i { background: var(--app-accent); } .countdown.ready b { color: var(--app-accent); }
.kwlocked td { opacity: 1; }
.kwlock { position: relative; display: inline-flex; align-items: center; padding: 2px 0; } .kwlock .blur { white-space: nowrap; color: var(--app-ink); filter: blur(4.5px); }
.kwlock .protag { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); box-shadow: 0 2px 8px rgba(0,0,0,.35); }


/* ---- badges: dark glass, gold frame, gold serif letters (Founder's Edition, PRO) ---- */
@font-face { font-family: "PLCinzel"; src: url("fonts/cinzel-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
.probadge, .founder-badge, .pl-badge { position: relative; display: inline-flex; align-items: center; justify-content: center; font-family: "PLCinzel", "Cinzel", "Trajan Pro", Georgia, serif; font-weight: 700; text-transform: uppercase; white-space: nowrap; border-radius: 3px; border: 1.5px solid transparent;
  background: radial-gradient(60% 120% at 12% 110%, rgba(214,160,70,.42), transparent 60%) padding-box, radial-gradient(50% 120% at 88% -10%, rgba(214,160,70,.38), transparent 60%) padding-box, linear-gradient(115deg, #151a20 0%, #2e3a48 34%, #1a2027 50%, #232b34 72%, #303b47 100%) padding-box, linear-gradient(135deg, #fff3c8 0%, #d6a23a 22%, #fbe6a0 48%, #b5832a 74%, #f3d68b 100%) border-box;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 2px 8px rgba(0,0,0,.35), 0 0 12px rgba(214,160,70,.18); vertical-align: middle; cursor: default; }
.probadge::before, .founder-badge::before, .pl-badge::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 42%, transparent 43%); pointer-events: none; }
.probadge > .gl, .founder-badge > .gl, .pl-badge > .gl { position: relative; }
.probadge, .founder-badge, .pl-badge { color: #f3d68b; }
@supports (-webkit-background-clip: text) { .probadge .gl, .founder-badge .gl, .pl-badge .gl { background: linear-gradient(180deg, #fffbe6 0%, #f7df98 38%, #c99231 72%, #f3d68b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(0,0,0,.55)); } }
.probadge { margin-left: 6px; padding: 3px 9px 2px; font-size: 10px; letter-spacing: .2em; }
.founder-badge { padding: 6px 16px 5px; font-size: 11.5px; letter-spacing: .18em; }
.founder-badge i { display: none; }
.founder-badge.big { padding: 9px 26px 8px; font-size: 15px; letter-spacing: .24em; }
.founder-tip { text-transform: none; font-family: "IBM Plex Sans", system-ui, sans-serif; letter-spacing: 0; }

/* ---- plans page: a light canvas in the homepage's palette, inside the hub ---- */
/* Dark by default (the hub's dark theme); html.light switches the canvas to the homepage's light palette. Edge to edge. */
.pl-page { --pk: #eef3f2; --pk2: #c3cfd2; --pm: #8d9ca2; --pl: #26323a; --pt: #2bd1ad; --ptd: #6fe0c6; --pmint: rgba(43,209,173,.14);
  --pcard: #172024; --prow: #20292e; --phov: #1b2529; --pchip: #222c31; --pband: linear-gradient(90deg, rgba(43,209,173,.12), rgba(43,209,173,.05)); --pbandh: rgba(43,209,173,.16); --pgrp: #172024; --pshadow: rgba(0,0,0,.45);
  --pcanvas: radial-gradient(45% 35% at 95% 0%, rgba(46,196,241,.10), transparent 60%), radial-gradient(40% 30% at 0% 100%, rgba(255,194,51,.08), transparent 60%), linear-gradient(180deg, #11171a, #141c20);
  margin: -28px; padding: 28px clamp(18px, calc(3vw / var(--zoom, 1)), 44px) 44px; min-height: calc(calc(100vh / var(--zoom, 1)) - 60px); color: var(--pk); font-family: "IBM Plex Sans", system-ui, sans-serif; background: var(--pcanvas); }
html.light .pl-page { --pk: #172026; --pk2: #3d4a52; --pm: #6b7a83; --pl: #e3e8ea; --pt: #0e7c6b; --ptd: #0a5c50; --pmint: #e8f4f1;
  --pcard: #ffffff; --prow: #eef2f2; --phov: #fafcfc; --pchip: #eef2f2; --pband: linear-gradient(90deg, rgba(14,124,107,.07), rgba(14,124,107,.03)); --pbandh: rgba(14,124,107,.10); --pgrp: #ffffff; --pshadow: rgba(16,40,36,.28);
  --pcanvas: radial-gradient(45% 35% at 95% 0%, rgba(46,196,241,.14), transparent 60%), radial-gradient(40% 30% at 0% 100%, rgba(255,194,51,.16), transparent 60%), #f6f8f8; }
.pl-page > * { max-width: 1320px; margin-left: auto; margin-right: auto; }
.pl-previewbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; padding: 8px 14px; margin-bottom: 18px; border-radius: 12px; background: #fff6d6; color: #5b4300; font-size: 13px; }
.pl-previewbar a { color: #5b4300; } .pl-previewbar a.on { font-weight: 700; text-decoration: none; }
.pl-hero { position: relative; text-align: center; padding: 46px 34px 40px; border-radius: 22px; color: #fff; overflow: hidden;
  background: radial-gradient(60% 90% at 85% 0%, rgba(46,196,241,.20), transparent 60%), radial-gradient(50% 80% at 10% 100%, rgba(255,194,51,.16), transparent 60%), linear-gradient(135deg, #072f2a 0%, #0a463e 45%, #0d574c 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 24px 50px -18px rgba(7,47,42,.55); }
.pl-hero::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(243,214,139,.7), transparent); }
.pl-hero.founder { padding-top: 40px; }
.pl-eyebrow { margin: 0 0 10px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: #f3d68b; }
.pl-hero h1 { margin: 14px auto 12px; font-family: Poppins, sans-serif; font-weight: 600; font-size: clamp(26px, calc(3.6vw / var(--zoom, 1)), 40px); line-height: 1.12; max-width: 22ch; color: #fff; }
.pl-lede { margin: 0 auto; max-width: 62ch; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.86); }
.pl-perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 880px; margin: 26px auto 0; text-align: left; }
.pl-perks > div { position: relative; padding: 16px 16px 16px 66px; border-radius: 16px; background: rgba(255,255,255,.07); border: 1px solid rgba(243,214,139,.28); backdrop-filter: blur(6px); }
.pl-perks i { position: absolute; left: 14px; top: 14px; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 13px; color: #2a1d03; background: linear-gradient(145deg, #fff3c8, #e1b04a 55%, #a97b1e); box-shadow: 0 6px 14px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.6); }
.pl-perks b { display: block; color: #fff; font-size: 15px; } .pl-perks span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.75); }
.pl-page .pl-section { margin-top: 44px; padding: 0; } .pl-head { text-align: center; margin-bottom: 18px; }
.pl-head h2 { margin: 0; font-family: Poppins, sans-serif; font-weight: 600; font-size: 26px; color: var(--pk); } .pl-head p { margin: 6px 0 0; color: var(--pm); font-size: 15px; }
.pl-table { border-radius: 20px; overflow: hidden; background: var(--pcard); border: 1px solid var(--pl); box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 14px 34px -10px var(--pshadow), 0 40px 70px -40px var(--pshadow); }
.pl-tr { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 1fr); }
.pl-tr > div { padding: 18px 22px; font-size: 14.5px; line-height: 1.5; border-top: 1px solid var(--prow); }
.pl-tr > .pro { background: var(--pband); color: var(--ptd); font-weight: 600; display: flex; gap: 10px; align-items: flex-start; }
.pl-tr:not(.pl-th):not(.pl-grp):hover > div { background-color: var(--phov); } .pl-tr:not(.pl-th):not(.pl-grp):hover > .pro { background: var(--pbandh); }
.pl-tr .f { color: var(--pk); font-weight: 500; } .pl-tr .fr { color: var(--pk2); } .pl-tr .fr b { color: var(--pk); }
.pl-th > div { border-top: 0; padding: 18px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--pm); font-weight: 700; align-items: center; }
.pl-th > .pro { background: linear-gradient(135deg, #0a5c50, #0e7c6b); }
.pl-chip { display: inline-block; padding: 6px 16px; border-radius: 999px; font-size: 13px; letter-spacing: .08em; font-weight: 700; }
.pl-chip.free { background: var(--pchip); color: var(--pk2); } .pl-chip.pro { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 0 0 1px rgba(243,214,139,.55); }
.pl-grp > div { border-top: 1px solid var(--prow); padding: 26px 22px 12px; color: var(--pk); display: flex; align-items: center; gap: 14px; background: var(--pgrp); }
.pl-grp > .pro { background: var(--pband); }
.pl-gi { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; box-shadow: 0 6px 14px -4px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.35); }
.pl-gi svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pl-gi.teal { background: linear-gradient(145deg, #2bd1ad, #0e7c6b); } .pl-gi.sky { background: linear-gradient(145deg, #6fdcff, #1a9fd0); } .pl-gi.amber { background: linear-gradient(145deg, #ffd27a, #e8971e); } .pl-gi.violet { background: linear-gradient(145deg, #a99dff, #6c5ce7); }
.ck { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg, #2bd1ad, #0e7c6b); box-shadow: 0 2px 6px rgba(14,124,107,.35); margin-top: 1px; }
.ck svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pl-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; perspective: 1200px; max-width: 1080px; margin: 0 auto; }
.pl-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 26px 22px 22px; border-radius: 20px; background: var(--pcard); border: 1px solid var(--pl); text-align: center; transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 12px 28px -12px var(--pshadow), 0 30px 50px -36px var(--pshadow); }
.pl-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 20px 20px 0 0; background: var(--pm); opacity: .5; } .pl-card.month::before, .pl-card.quarter::before { opacity: 1; }
.pl-card.month::before { background: linear-gradient(90deg, #6fdcff, #1a9fd0); } .pl-card.quarter::before { background: linear-gradient(90deg, #a99dff, #6c5ce7); }
.pl-card:hover { transform: translateY(-6px) rotateX(2deg); box-shadow: 0 1px 2px rgba(16,40,36,.05), 0 22px 40px -14px rgba(16,40,36,.28), 0 40px 60px -40px rgba(16,40,36,.35); }
.pl-card h3 { margin: 4px 0 2px; font-family: Poppins, sans-serif; font-size: 17px; font-weight: 600; letter-spacing: .02em; color: var(--pk2); }
.pl-price { display: flex; flex-direction: column; align-items: center; margin: 6px 0 0; } .pl-price s { font-size: 15px; color: var(--pm); } .pl-price b { font-family: Poppins, sans-serif; font-size: 40px; font-weight: 700; line-height: 1.05; color: var(--pk); } .pl-price small { font-size: 13px; color: var(--pm); margin-top: 2px; }
.pl-note { margin: 6px 0 10px; font-size: 13.5px; color: var(--pk2); min-height: 2.6em; }
.pl-card .pl-badge.ftag { align-self: center; padding: 5px 12px 4px; font-size: 10px; letter-spacing: .14em; margin: 0 0 4px; } .pl-card .ftag-sub { font-size: 12px; font-weight: 600; color: #b5832a; margin-bottom: 10px; } .pl-card.best .ftag-sub { color: #f3d68b; }
.pl-btn { margin-top: auto; display: inline-flex; justify-content: center; align-items: center; padding: 12px 16px; border-radius: 12px; border: 0; font: 600 14.5px/1 "IBM Plex Sans", system-ui, sans-serif; color: #fff; cursor: pointer; background: linear-gradient(180deg, #13917c, #0a5c50); box-shadow: 0 8px 18px -8px rgba(10,92,80,.7), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .15s, box-shadow .15s; }
.pl-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 22px -8px rgba(10,92,80,.8), inset 0 1px 0 rgba(255,255,255,.25); }
.pl-btn.ghost { background: var(--pchip); color: var(--pm); box-shadow: none; cursor: default; } .pl-btn.ghost:hover { transform: none; }
.pl-btn.gold { color: #2a1d03; background: linear-gradient(180deg, #fbe6a0, #d6a23a 60%, #b5832a); box-shadow: 0 10px 22px -8px rgba(181,131,42,.75), inset 0 1px 0 rgba(255,255,255,.6); }
.pl-card.best { color: #fff; border: 1.5px solid transparent; transform: translateY(-10px);
  background: radial-gradient(70% 50% at 100% 0%, rgba(243,214,139,.18), transparent 60%) padding-box, linear-gradient(160deg, #0a463e, #072f2a) padding-box, linear-gradient(135deg, #fff3c8, #d6a23a 30%, #fbe6a0 55%, #b5832a 80%, #f3d68b) border-box;
  box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 26px 50px -16px rgba(7,47,42,.6), 0 0 0 6px rgba(243,214,139,.10); }
.pl-card.best:hover { transform: translateY(-16px) rotateX(2deg); } .pl-card.best::before { display: none; }
.pl-card.best h3 { color: #f3d68b; } .pl-card.best .pl-price b { color: #fff; } .pl-card.best .pl-price s, .pl-card.best .pl-price small { color: rgba(255,255,255,.65); } .pl-card.best .pl-note { color: rgba(255,255,255,.82); }
.pl-ribbon { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 5px 14px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #2a1d03; background: linear-gradient(180deg, #fff3c8, #e1b04a); box-shadow: 0 6px 14px rgba(0,0,0,.25); white-space: nowrap; }
.pl-assure { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.pl-assure > div { position: relative; padding: 14px 16px 14px 60px; border-radius: 16px; background: var(--pcard); border: 1px solid var(--pl); box-shadow: 0 8px 20px -14px var(--pshadow); }
.pl-assure i { position: absolute; left: 14px; top: 14px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-style: normal; color: #fff; background: linear-gradient(145deg, #2bd1ad, #0e7c6b); box-shadow: 0 6px 14px -6px rgba(14,124,107,.6); } .pl-assure i svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pl-assure b { display: block; font-size: 14px; color: var(--pk); } .pl-assure span { display: block; margin-top: 2px; font-size: 13px; color: var(--pm); }
.pl-current { display: flex; align-items: center; gap: 18px; padding: 20px 22px; border-radius: 20px; background: var(--pcard); border: 1px solid var(--pl); box-shadow: 0 14px 30px -14px var(--pshadow); }
.pl-current > div { flex: 1; } .pl-current b { display: block; font-size: 17px; } .pl-current span { color: var(--pm); font-size: 14px; } .pl-current .pl-btn { margin-top: 0; }
.pl-badge.pro-badge { padding: 7px 14px 6px; font-size: 13px; letter-spacing: .22em; }
.pl-fine { max-width: 780px; margin: 26px auto 0; text-align: center; font-size: 12.5px; line-height: 1.6; color: var(--pm); }
@media (max-width: 1000px) { .pl-cards { grid-template-columns: 1fr; max-width: 520px; row-gap: 26px; } .pl-card.best { transform: none; order: -1; } .pl-freebar { grid-template-columns: 1fr; text-align: center; } }
@media (max-width: 700px) { .pl-page { padding: 16px 14px 28px; } .pl-cards, .pl-perks, .pl-assure { grid-template-columns: 1fr; } .pl-tr { grid-template-columns: 1fr 1fr; } .pl-tr > .f { grid-column: 1 / -1; padding-bottom: 4px; border-top: 1px solid var(--prow); } .pl-tr > .fr, .pl-tr > .pro { border-top: 0; } .pl-th > div:first-child, .pl-grp > div:not(:first-child) { display: none; } .pl-grp > div:first-child { grid-column: 1 / -1; } }

/* light plaque: ivory glass, gold frame, bronze-gold letters, for light backgrounds */
html.light .main .founder-badge:not(.big), html.light .pl-card:not(.best) .pl-badge, html.light .pl-current .pl-badge {
  background: radial-gradient(60% 120% at 12% 110%, rgba(214,160,70,.22), transparent 60%) padding-box, radial-gradient(50% 120% at 88% -10%, rgba(214,160,70,.20), transparent 60%) padding-box, linear-gradient(115deg, #fffdf7 0%, #f6ecd4 34%, #fffaf0 50%, #f1e4c6 72%, #fbf3e1 100%) padding-box, linear-gradient(135deg, #f3d68b 0%, #b5832a 25%, #e9c873 50%, #8f6418 75%, #d6a23a 100%) border-box;
  box-shadow: 0 1px 3px rgba(120,85,20,.25), 0 0 8px rgba(214,160,70,.15); color: #8f6418; }
html.light .main .founder-badge:not(.big)::before, html.light .pl-card:not(.best) .pl-badge::before, html.light .pl-current .pl-badge::before { background: linear-gradient(115deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.2) 42%, transparent 43%); }
html.light .main .founder-badge:not(.big) .gl, html.light .pl-card:not(.best) .pl-badge .gl, html.light .pl-current .pl-badge .gl { background: linear-gradient(180deg, #c99231 0%, #9a6b17 45%, #7a520c 70%, #b8862b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(255,255,255,.85)); }

@media (max-width: 900px) { .pl-page { margin: -12px; } }

/* plans page, sales version: display font, prices on top, detailed features */
@font-face { font-family: "PLJakarta"; src: url("fonts/jakarta-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "PLJakarta"; src: url("fonts/jakarta-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "PLJakarta"; src: url("fonts/jakarta-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
.pl-page h1, .pl-page h2, .pl-page h3, .pl-price b, .pl-stats b, .pl-tr .ft, .pl-grp b { font-family: "PLJakarta", Poppins, "IBM Plex Sans", sans-serif; }
.pl-hero h1 { font-weight: 800; letter-spacing: -.02em; font-size: clamp(30px, calc(4.2vw / var(--zoom, 1)), 48px); max-width: 24ch; }
.pl-lede { font-size: 17px; }
.pl-stats { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 26px auto 0; }
.pl-stats > div { min-width: 190px; padding: 12px 18px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(243,214,139,.25); }
.pl-stats b { display: block; font-size: 26px; font-weight: 800; color: #f3d68b; } .pl-stats span { font-size: 13px; color: rgba(255,255,255,.78); }
.pl-head h2 { font-size: clamp(26px, calc(3vw / var(--zoom, 1)), 34px); font-weight: 800; letter-spacing: -.01em; } .pl-head p { font-size: 16px; }
.pl-card h3 { font-size: 21px; font-weight: 800; color: var(--pk); letter-spacing: 0; } .pl-card.best h3 { color: #f3d68b; }
.pl-pitch { margin: 0 0 6px; font-size: 13.5px; color: var(--pm); } .pl-card.best .pl-pitch { color: rgba(255,255,255,.75); }
.pl-price b { font-size: 46px; font-weight: 800; letter-spacing: -.02em; }
.pl-note b { color: var(--pt); } .pl-card.best .pl-note b { color: #f3d68b; }
.pl-inc { list-style: none; margin: 8px 0 16px; padding: 0; display: grid; gap: 7px; text-align: left; font-size: 13.5px; color: var(--pk2); }
.pl-inc li { display: flex; gap: 9px; align-items: center; } .pl-inc svg { width: 18px; height: 18px; flex-shrink: 0; padding: 3px; border-radius: 50%; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; background: linear-gradient(145deg, #2bd1ad, #0e7c6b); }
.pl-card.best .pl-inc { color: rgba(255,255,255,.88); } .pl-card.best .pl-inc svg { background: linear-gradient(145deg, #fbe6a0, #c99231); stroke: #2a1d03; }
.pl-card.month::before { background: linear-gradient(90deg, #6fdcff, #1a9fd0); } .pl-card.quarter::before { background: linear-gradient(90deg, #a99dff, #6c5ce7); }
.pl-freebar { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; max-width: 1080px; margin: 22px auto 0; padding: 18px 24px; border-radius: 18px; background: var(--pcard); border: 1px dashed var(--pl); }
.pl-freebar .fb-l { display: flex; align-items: center; gap: 10px; } .pl-freebar h3 { margin: 0; font-size: 20px; font-weight: 800; }
.pl-freebar .tag { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--pchip); color: var(--pm); }
.pl-freebar .fb-m { color: var(--pk2); font-size: 14px; line-height: 1.5; } .pl-freebar .fb-m b { color: var(--pk); } .pl-freebar .fb-r { color: var(--pt); font-weight: 600; font-size: 14px; white-space: nowrap; text-decoration: none; }
.pl-assure { max-width: 1080px; margin-left: auto; margin-right: auto; }
.pl-grp b { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.005em; text-transform: none; } .pl-grp small { display: block; margin-top: 2px; font-size: 13px; color: var(--pm); font-weight: 400; letter-spacing: 0; text-transform: none; }
.pl-tr .f { display: flex; flex-direction: column; gap: 5px; }
.pl-tr .ft { font-size: 16.5px; font-weight: 700; color: var(--pk); letter-spacing: -.005em; }
.pl-tr .fd { font-size: 13.5px; line-height: 1.55; color: var(--pk2); font-weight: 400; }
.pl-tr .fw { align-self: flex-start; margin-top: 3px; font-size: 11.5px; font-weight: 600; color: var(--pt); background: var(--pmint); padding: 3px 9px; border-radius: 999px; }
.pl-tr .fw::before { content: "Where: "; font-weight: 700; }
.pl-tr .fr, .pl-tr > .pro { align-items: flex-start; padding-top: 22px; }
.pl-endcta { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 22px; padding: 22px 26px; border-radius: 20px; color: #fff; background: radial-gradient(60% 120% at 100% 0%, rgba(243,214,139,.16), transparent 60%), linear-gradient(135deg, #072f2a, #0d574c); box-shadow: 0 20px 40px -18px rgba(7,47,42,.6); }
.pl-endcta b { display: block; font-family: "PLJakarta", Poppins, sans-serif; font-size: 20px; font-weight: 800; } .pl-endcta span { color: rgba(255,255,255,.8); font-size: 14px; } .pl-endcta .pl-btn { margin: 0; text-decoration: none; padding: 13px 22px; }
@media (max-width: 700px) { .pl-tr .fr, .pl-tr > .pro { padding-top: 6px; } .pl-endcta { flex-direction: column; text-align: center; } .pl-stats > div { min-width: 0; flex: 1 1 140px; } }

/* On the plans page itself, every "Check plans" / "Prepare ahead" link that leads to it is hidden. */
body.page-plans #checkplans, body.page-plans .side .plan-card a[href="plans.html"], body.page-plans #gracebanner a[href="plans.html"] { display: none !important; }

/* plans page, wide: the canvas fills the space between the menu and the window edge, content runs full width, the
   hero sits side by side, and the table puts the description in its own column, so the page is much shorter. */
.pl-page { padding: 18px 18px 30px; }
.pl-page > * { max-width: none; }
.pl-cards, .pl-freebar, .pl-assure { max-width: none; }
.pl-page .pl-section { margin-top: 30px; }
.pl-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: center; text-align: left; padding: 30px 34px; }
.pl-hero .ht { min-width: 0; } .pl-hero h1 { margin: 10px 0 10px; max-width: none; } .pl-lede { margin: 0; max-width: 62ch; }
.pl-hero .founder-badge.big { margin-bottom: 4px; }
.pl-hero .pl-stats { margin: 0; display: grid; grid-template-columns: 1fr; gap: 10px; justify-content: stretch; } .pl-hero .pl-stats > div { min-width: 0; display: flex; align-items: baseline; gap: 12px; } .pl-hero .pl-stats b { display: inline; min-width: 3.4em; }
.pl-hero .pl-perks { margin: 0; grid-template-columns: 1fr; max-width: none; gap: 10px; }
.pl-head { margin-bottom: 14px; }
.pl-card { padding: 22px 22px 20px; }
.pl-tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr) minmax(0, .95fr) minmax(0, .95fr); grid-template-areas: "f d fr pro"; }
.pl-tr > .f { grid-area: f; } .pl-tr > .d { grid-area: d; } .pl-tr > .fr { grid-area: fr; } .pl-tr > .pro { grid-area: pro; } .pl-tr > .g { grid-area: g; }
.pl-grp { grid-template-areas: "g g fr pro"; }
.pl-tr > div { padding: 14px 18px; }
.pl-tr > .d { font-size: 13.5px; line-height: 1.55; color: var(--pk2); }
.pl-tr .f { gap: 6px; } .pl-tr .ft { font-size: 16px; }
.pl-tr .fr, .pl-tr > .pro { padding-top: 16px; }
.pl-grp > div { padding: 20px 18px 10px; }
.pl-th > .d { display: block; }
@media (max-width: 1250px) {
  .pl-tr { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "f fr pro" "d fr pro"; }
  .pl-grp { grid-template-areas: "g fr pro"; }
  .pl-tr > .f { padding-bottom: 4px; } .pl-tr > .d { border-top: 0; padding-top: 0; }
  .pl-th > .d { display: none; }
}
@media (max-width: 900px) { .pl-hero { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .pl-tr { grid-template-columns: 1fr 1fr; grid-template-areas: "f f" "d d" "fr pro"; } .pl-grp { grid-template-areas: "g g"; }
  .pl-grp > .fr, .pl-grp > .pro, .pl-th > .f, .pl-th > .d { display: none; } .pl-th { grid-template-areas: "fr pro"; }
  .pl-tr > .fr, .pl-tr > .pro { border-top: 0; padding-top: 6px; }
}
.pl-tr > .d { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; } .pl-th > .d { display: block; }
.pl-tr { grid-template-columns: minmax(0, .9fr) minmax(0, 2fr) minmax(0, .95fr) minmax(0, .95fr); }
.pl-th > div { text-align: left; }
@media (max-width: 1250px) { .pl-tr { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 1fr); } .pl-th > .d { display: none; } }
@media (max-width: 700px) { .pl-tr { grid-template-columns: 1fr 1fr; } }
/* "Where" as a small line under the title (no pill), so the feature column stays short */
.pl-tr .f .fw { background: none; padding: 0; border-radius: 0; margin-top: 0; font-size: 12px; line-height: 1.4; font-weight: 500; color: var(--pt); }
.pl-tr .f .fw::before { content: "→ "; font-weight: 700; }
.pl-tr > .d { display: block; }
.pl-tr { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.9fr) minmax(0, .9fr) minmax(0, .9fr); }
@media (max-width: 1250px) { .pl-tr { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 700px) { .pl-tr { grid-template-columns: 1fr 1fr; } }
.pl-th > div { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; }
@media (max-width: 1250px) { .pl-th > .d { display: none; } }

/* plans page: a little narrower, and three columns again (each feature's description sits under its title) */
.pl-page { padding-left: clamp(18px, calc(3.2vw / var(--zoom, 1)), 48px); padding-right: clamp(18px, calc(3.2vw / var(--zoom, 1)), 48px); }
.pl-tr { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "f fr pro"; }
.pl-grp { grid-template-areas: "g fr pro"; }
.pl-tr > .d { display: none; }
.pl-tr .f { display: flex; flex-direction: column; gap: 5px; }
.pl-tr .f .fd { font-size: 13.5px; line-height: 1.55; color: var(--pk2); font-weight: 400; max-width: 72ch; }
.pl-tr .f .fw { margin-top: 2px; }
.pl-th > .d { display: none; }
@media (max-width: 1250px) { .pl-tr { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "f fr pro"; } .pl-tr > .f { padding-bottom: 14px; } }
@media (max-width: 700px) { .pl-tr { grid-template-columns: 1fr 1fr; grid-template-areas: "f f" "fr pro"; } .pl-grp { grid-template-areas: "g g"; } .pl-th { grid-template-areas: "fr pro"; } }
.pl-tr.pl-th > .f { flex-direction: row; align-items: center; justify-content: flex-start; }

/* plans page: narrower still; a tinted Free column like Pro's; bigger column labels; one-line descriptions */
.pl-page { padding-left: clamp(22px, calc(5.5vw / var(--zoom, 1)), 96px); padding-right: clamp(22px, calc(5.5vw / var(--zoom, 1)), 96px); --pfree: linear-gradient(90deg, rgba(46,196,241,.07), rgba(46,196,241,.035)); --pfreeh: rgba(46,196,241,.11); --pfreehead: linear-gradient(135deg, #1d3442, #24475a); }
html.light .pl-page { --pfree: linear-gradient(90deg, rgba(46,196,241,.08), rgba(46,196,241,.04)); --pfreeh: rgba(46,196,241,.13); --pfreehead: linear-gradient(135deg, #d9f1fb, #c2e8f7); }
.pl-tr > .fr { background: var(--pfree); }
.pl-tr:not(.pl-th):not(.pl-grp):hover > .fr { background: var(--pfreeh); }
.pl-th > .fr { background: var(--pfreehead); }
.pl-grp > .fr { background: var(--pfree); }
.pl-chip { font-size: 16px; padding: 8px 22px; letter-spacing: .12em; }
.pl-chip.free { background: rgba(46,196,241,.18); color: #bfeaff; box-shadow: inset 0 0 0 1px rgba(46,196,241,.45); }
html.light .pl-chip.free { background: #ffffff; color: #11698e; box-shadow: inset 0 0 0 1px rgba(17,105,142,.35); }
.pl-chip.pro { font-size: 16px; }
.pl-tr .f .fd { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; }
.pl-tr .f.open .fd { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.fd-more { align-self: flex-start; padding: 0; margin: -2px 0 0; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--pt); cursor: pointer; }
.fd-more:hover { text-decoration: underline; }
.pl-freebar + .pl-fine { margin: 12px auto 0; max-width: 900px; }

/* plans page: room above the raised Yearly card and its ribbon; the Feature/Free/Pro row stays on screen while the
   table scrolls (under the hub's top bar, until the table ends); the founder rules as a highlighted note. */
.pl-cards { margin-top: 34px; }
.pl-table { overflow: clip; }
.pl-tr.pl-th { position: sticky; top: var(--pl-stick, 66px); z-index: 4; box-shadow: 0 8px 18px -12px rgba(0,0,0,.45); }
.pl-tr.pl-th > .f { background: var(--pcard); }
html.embed-mac .pl-tr.pl-th { top: 0; }
.pl-freebar + .pl-fine { position: relative; max-width: 1080px; margin: 14px auto 0; padding: 14px 18px 14px 52px; border-radius: 14px; text-align: left; font-size: 13.5px; line-height: 1.6; color: var(--pk); background: linear-gradient(90deg, rgba(232,194,92,.16), rgba(232,194,92,.06)); border: 1px solid rgba(232,194,92,.45); }
.pl-freebar + .pl-fine::before { content: "★"; position: absolute; left: 16px; top: 13px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; color: #2a1d03; background: linear-gradient(145deg, #fff3c8, #e1b04a 60%, #a97b1e); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.pl-freebar + .pl-fine b { color: #e1b04a; } html.light .pl-freebar + .pl-fine b { color: #9a6b17; }
.pl-price .pl-tax { margin-top: 3px; font-size: 11.5px; opacity: .8; }
/* plans page, App Store variant (App Store plans page, 17 Oct 2026): Apple's renewal terms and links under the cards,
   the purchase's outcome line, the loading/error/subscribed boxes, and busy Subscribe buttons. */
.pl-storeterms { margin-top: 22px; padding: 16px 20px; border-radius: 16px; background: var(--pcard); border: 1px solid var(--pl); font-size: 12.5px; line-height: 1.6; color: var(--pm); }
.pl-storeterms > p { margin: 0 0 10px; }
.pl-storeacts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.pl-storeacts a { color: var(--pt); font-weight: 600; font-size: 13px; }
.pl-storeacts .sp { flex: 1; }
.pl-storeterms .pl-storemsg { font-size: 14px; font-weight: 600; color: var(--pk2); } .pl-storeterms .pl-storemsg.bad { color: #e0605a; } .pl-storeterms .pl-storemsg.good { color: var(--pt); } html.light .pl-storeterms .pl-storemsg.bad { color: #b8322a; }
.pl-current > .spin { flex: none; width: 20px; height: 20px; }
.pl-current .pl-curplan, .pl-current .pl-curper { color: var(--pk2); font-weight: 600; }
.pl-current .pl-curnote { display: block; margin-top: 2px; }
.pl-page .pl-btn:disabled { opacity: .7; cursor: progress; transform: none; }
.pl-btn .spin { width: 14px; height: 14px; margin-right: 8px; border-color: rgba(255,255,255,.35); border-top-color: currentColor; }
@media (max-width: 700px) { #pl-store .pl-freebar { grid-template-columns: 1fr; gap: 10px; text-align: center; } #pl-store .pl-freebar .fb-l { justify-content: center; } .pl-current { flex-wrap: wrap; } .pl-current > .pl-btn { width: 100%; } .pl-storeacts .sp { flex-basis: 100%; height: 0; } }

.srcswitch button.soon { position: relative; opacity: .6; }
.srcswitch .soontip { position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 700; white-space: nowrap; color: #fff; background: var(--app-accent, #0e7c6b); box-shadow: 0 6px 16px rgba(0,0,0,.25); z-index: 5; pointer-events: none; }

/* the payment window: Stripe's embedded Checkout in a dialog over the hub */
.paydlg { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgba(4, 18, 16, .62); backdrop-filter: blur(3px); }
.paybox { width: min(560px, 100%); max-height: calc(calc(100vh / var(--zoom, 1)) - 40px); display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: #fff; color: #172026; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.paybox header { display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 18px; border-bottom: 1px solid #e6ecec; background: linear-gradient(135deg, #072f2a, #0d574c); color: #fff; }
.paylogo { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; } .paylogo img { width: 22px; height: 22px; border-radius: 6px; }
.paysecure { margin-left: auto; font-size: 12px; opacity: .8; }
.payx { width: 32px; height: 32px; border-radius: 8px; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.paybody { overflow: auto; min-height: 220px; }
.paywait { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 220px; color: #3d4a52; padding: 20px; text-align: center; }
.paythanks { display: grid; gap: 10px; place-items: center; text-align: center; padding: 48px 28px; } .paythanks b { font-size: 18px; } .paythanks span { color: #3d4a52; }
body.paying { overflow: hidden; }
@media (max-width: 600px) { .paydlg { padding: 0; } .paybox { width: 100%; height: 100%; max-height: none; border-radius: 0; } }

/* console: the password dialog for the Paywall switch */
.pwdlg { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgba(4,18,16,.6); backdrop-filter: blur(2px); }
.pwbox { width: min(440px, 100%); padding: 22px 22px 18px; border-radius: 16px; background: var(--app-panel, #242a2e); color: var(--app-ink, #eef3f2); border: 1px solid var(--app-line); box-shadow: 0 24px 60px rgba(0,0,0,.45); display: grid; gap: 12px; }
.pwbox h3 { margin: 0; font-size: 18px; } .pwbox p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--app-ink-2); }
.pwbox label { display: grid; gap: 6px; font-size: 13px; color: var(--app-muted); }
.pwbox input { font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--app-line); background: var(--app-bg, #1d2225); color: var(--app-ink); }
.pwbox .row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.btn.danger { background: #c0392b; border-color: #c0392b; color: #fff; }

/* tracker: select rows and delete them together */
.trkt th.c-check, .trkt td.c-check { width: 34px; text-align: center; padding-left: 12px; padding-right: 4px; }
.trkt input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--app-accent); cursor: pointer; }
.trkt tr.selrow td { background: color-mix(in srgb, var(--app-accent) 9%, transparent); }
.trksel { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--app-accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--app-accent) 35%, transparent); }
.trksel b { font-size: 15px; } .trksel span { margin-right: auto; }

/* dashboard: each module small (half a row) or wide (a full row), switched from its header */
.mod header .mod-size { border: 0; background: none; color: var(--app-muted); cursor: pointer; font-size: 12px; letter-spacing: -2px; padding: 2px 6px; border-radius: 6px; opacity: 0; transition: opacity .15s; }
.mod:hover header .mod-size, .mod header .mod-size:focus-visible { opacity: 1; } .mod header .mod-size:hover { background: var(--app-panel-2); color: var(--app-ink); }
@media (hover: none) { .mod header .mod-size, .mod header .mod-x { opacity: 1; } }

/* console email panel: plain text or a designed HTML email with a live preview */
.emailpanel { width: min(860px, calc(96vw / var(--zoom, 1))); }
.emmode { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--app-panel-2); border: 1px solid var(--app-line); margin: 6px 0 10px; }
.emmode button { font: inherit; font-size: 13px; padding: 6px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--app-ink-2); cursor: pointer; } .emmode button.on { background: var(--app-accent); color: #0b2a24; font-weight: 700; }
.emailpanel textarea#emhtml { width: 100%; }
.empreview { width: 100%; height: 460px; border: 1px solid var(--app-line); border-radius: 12px; background: #fff; }
.emailpanel { max-height: calc(calc(100vh / var(--zoom, 1)) - 32px); display: flex; flex-direction: column; } .emailpanel > .body { overflow: auto; min-height: 0; }
.empreview { height: 380px; }
.trk-box.emailpanel { max-width: 860px; }
.emailpanel input[type=file][hidden] { display: none !important; }

/* email composer: toolbar, Write editor, template menu, the designed email edited in place */
.emtools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px; margin: 4px 0 8px; border: 1px solid var(--app-line); border-radius: 10px; background: var(--app-panel-2); position: sticky; top: 0; z-index: 2; }
.emtools button, .emtools select, .emtools .colorbtn { font: inherit; font-size: 13px; min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--app-ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.emtools select { border-color: var(--app-line); background: var(--app-bg, #1d2225); }
.emtools button:hover, .emtools .colorbtn:hover { background: var(--app-panel); border-color: var(--app-line); }
.emtools .sep { width: 1px; height: 20px; background: var(--app-line); margin: 0 4px; }
.emtools .colorbtn { position: relative; font-weight: 800; text-decoration: underline; text-decoration-color: #0e7c6b; text-decoration-thickness: 3px; }
.emtools .colorbtn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.emwrite { min-height: 260px; max-height: calc(52vh / var(--zoom, 1)); overflow: auto; padding: 16px 18px; border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-bg); color: var(--app-ink); font: 15px/1.6 Arial, Helvetica, sans-serif; outline: none; }
.emwrite a { color: var(--app-accent); }
.emwrite:focus { box-shadow: 0 0 0 2px rgba(43,209,173,.35); }
.emwrite:empty::before { content: attr(data-placeholder); color: var(--app-muted); white-space: pre-line; }
.emwrite img { max-width: 100%; }
.emtpl .menuwrap { position: relative; }
.tplmenu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 10; width: 380px; max-height: 360px; overflow: auto; padding: 6px; border-radius: 12px; background: var(--app-panel); border: 1px solid var(--app-line); box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.tplmenu .tplgrp { padding: 8px 10px 4px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--app-muted); font-weight: 700; }
.tplmenu button[data-preset], .tplmenu button[data-mine] { display: grid; gap: 2px; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--app-ink); font: inherit; cursor: pointer; }
.tplmenu button[data-preset]:hover, .tplmenu button[data-mine]:hover { background: var(--app-panel-2); } .tplmenu small { color: var(--app-muted); font-size: 12px; }
.tplmenu .tplrow { display: flex; align-items: center; gap: 4px; } .tplmenu .tplrow button[data-mine] { flex: 1; }
.empreview { height: 520px; } .emcode { width: 100%; font: 12px/1.5 ui-monospace, Menlo, monospace; }
.paidpill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #f3d68b; background: rgba(225,176,74,.14); border: 1px solid rgba(225,176,74,.45); cursor: help; }
html.light .paidpill { color: #8a5d12; }
.closedlg { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(8,14,18,.6); }
.closebox { width: min(560px, 100%); max-height: calc(calc(100vh / var(--zoom, 1)) - 32px); overflow: auto; display: grid; gap: 12px; padding: 22px; border-radius: 14px; background: var(--app-panel); border: 1px solid var(--app-line); box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.closebox h3 { margin: 0; font-size: 17px; overflow-wrap: anywhere; } .closebox p { margin: 0; } .closebox .field { margin: 0; } .closebox .row { display: flex; gap: 8px; }
.closepay { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; font-size: 13px; background: rgba(225,176,74,.12); border: 1px solid rgba(225,176,74,.4); }
.closewarn { padding: 10px 12px; border-radius: 10px; font-size: 13px; background: rgba(229,72,77,.12); border: 1px solid rgba(229,72,77,.45); } .closepay small { margin-top: 4px; }
.closeopt, .delopt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--app-line); cursor: pointer; }
.closeopt input[type="radio"], .delopt input[type="radio"] { width: 16px !important; min-width: 0 !important; max-width: 16px; height: 16px; padding: 0; margin: 3px 0 0; flex: none; accent-color: var(--app-accent); } .closeopt > span, .delopt > span { display: grid; gap: 2px; font-size: 13.5px; min-width: 0; } .closeopt small, .delopt small { color: var(--app-muted); font-size: 12.5px; line-height: 1.45; }
.closeopt:has(input:checked), .delopt:has(input:checked) { border-color: var(--app-accent); background: color-mix(in srgb, var(--app-accent) 8%, transparent); }
.delopts { display: grid; gap: 8px; } .delopt-h { margin: 0; font-size: 13.5px; font-weight: 600; }
.paywait[hidden] { display: none !important; }
.payterms { display: grid; gap: 12px; padding: 22px; } .payterms h3 { margin: 0; font-size: 17px; } .payterms p { margin: 0; } .payterms .btn { justify-self: start; } .payterms a, .consent a { color: var(--app-accent); }
.paidspan { display: inline-flex; flex-direction: column; gap: 1px; font-size: 12.5px; white-space: nowrap; } .paidspan small { color: var(--app-muted); font-size: 11.5px; font-weight: 600; }
/* dashboard: small modules fill any half-row gap left beside another small module (a wide module after a small one
   no longer leaves an empty space) */
.dash-grid { grid-auto-flow: row dense; }
/* console users table: the Actions cell wraps its buttons instead of running past the table's edge */
#apanel .admt td.acts { max-width: none; white-space: normal; min-width: 360px; }
#apanel .admt td.acts button, #apanel .admt td.acts .paidpill { margin: 2px 4px 2px 0; vertical-align: middle; }

/* ---- console · Users: tabs with counts, filter chips, selection bar, a calmer table, actions in a menu ---- */
.users-sec > header { flex-wrap: wrap; }
.usearch { position: relative; display: flex; align-items: center; } .usearch .ainput { width: 260px; padding-right: 30px; } .usearch .ib { position: absolute; right: 4px; }
.utoolbar { padding: 12px 18px 10px; border-bottom: 1px solid var(--app-line); display: grid; gap: 10px; }
.utoolbar .hint { margin: 0; font-size: 12.5px; }
.utabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--app-panel-2); border: 1px solid var(--app-line); width: max-content; }
.utabs button { font: inherit; font-size: 13.5px; padding: 7px 14px; border: 0; border-radius: 9px; background: transparent; color: var(--app-ink-2); cursor: pointer; }
.utabs button b { font-weight: 700; color: var(--app-muted); margin-left: 2px; } .utabs button.on { background: var(--app-panel); color: var(--app-ink); box-shadow: 0 1px 3px rgba(0,0,0,.25); } .utabs button.on b { color: var(--app-accent); }
.uchips { display: flex; flex-wrap: wrap; gap: 6px; }
.uchips button { font: inherit; font-size: 12.5px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--app-line); background: transparent; color: var(--app-ink-2); cursor: pointer; }
.uchips button b { font-weight: 700; margin-left: 2px; color: var(--app-muted); } .uchips button:hover { border-color: var(--app-accent); }
.uchips button.on { background: var(--app-accent); border-color: var(--app-accent); color: #0b2a24; } .uchips button.on b { color: #0b2a24; }
.urow { display: flex; align-items: center; gap: 10px; } .selall-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--app-ink-2); cursor: pointer; } .selall-lbl input { width: 15px; height: 15px; accent-color: var(--app-accent); }
.selbar2 { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--app-accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--app-accent) 35%, transparent); font-size: 13px; }
.selbar2 b { font-size: 14px; } .selbar2 #selmsg { margin-left: auto; }
table.ut th.c-check, table.ut td.c-check { width: 34px; padding-left: 14px; padding-right: 4px; } table.ut input.selrow { width: 15px; height: 15px; accent-color: var(--app-accent); cursor: pointer; }
/* "uacct", not "acct": that name is the Account page's two-column grid, which turned this cell into a grid and broke the row lines */
table.ut td.uacct { max-width: 340px; } table.ut td.uacct .em { display: block; font-weight: 600; color: var(--app-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.ut .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; } table.ut .tags:empty { display: none; }
.tag { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--app-ink-2); background: var(--app-panel-2); border: 1px solid var(--app-line); }
.tag.gold { color: #f3d68b; background: rgba(225,176,74,.14); border-color: rgba(225,176,74,.45); } html.light .tag.gold { color: #8a5d12; }
.tag.warn { color: #f0b35a; border-color: rgba(240,179,90,.5); } .tag.muted { opacity: .7; }
.planpill { display: inline-flex; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; } .planpill.pro { background: color-mix(in srgb, var(--app-accent) 18%, transparent); color: var(--app-accent); } .planpill.free { background: var(--app-panel-2); color: var(--app-ink-2); }
table.ut td.rowact { width: 44px; text-align: right; padding-right: 12px; } table.ut td.rowact .ib { opacity: .55; } table.ut tr:hover td.rowact .ib { opacity: 1; }
table.ut td small.dim { font-weight: 400; }
.popmenu { position: fixed; z-index: 1200; min-width: 260px; max-width: 320px; padding: 6px; border-radius: 12px; background: var(--app-panel); border: 1px solid var(--app-line); box-shadow: 0 18px 44px rgba(0,0,0,.4); }
.popmenu-head { padding: 6px 10px 8px; font-size: 12px; color: var(--app-muted); border-bottom: 1px solid var(--app-line); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.popmenu-note { padding: 8px 10px; font-size: 12.5px; }
.popmenu button { display: grid; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--app-ink); font: inherit; font-size: 13.5px; cursor: pointer; }
.popmenu button small { font-size: 11.5px; color: var(--app-muted); margin-top: 1px; } .popmenu button:hover { background: var(--app-panel-2); }
.popmenu button.danger { color: #ff8a80; } .popmenu button.danger:hover { background: rgba(255,120,110,.12); }
details.sec > summary { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; } details.sec > summary::-webkit-details-marker { display: none; }
details.sec > summary h2 { margin: 0; font-size: 16px; } details.sec > summary .sub { color: var(--app-muted); font-size: 13px; }
details.sec > summary::after { content: "▸"; margin-left: auto; color: var(--app-muted); } details.sec[open] > summary::after { content: "▾"; }
.pager { display: flex; align-items: center; gap: 8px; padding: 12px 18px; }
.selbar2[hidden] { display: none; }

/* account · Devices */
.devlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.devrow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-panel-2); }
.devrow.me { border-color: color-mix(in srgb, var(--app-accent) 55%, transparent); background: color-mix(in srgb, var(--app-accent) 8%, var(--app-panel-2)); }
.devic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--app-panel); color: var(--app-ink-2); flex: 0 0 auto; }
.devtxt { display: grid; gap: 2px; min-width: 0; flex: 1; } .devtxt b { font-size: 14px; } .devtxt small { color: var(--app-muted); font-size: 12.5px; }

/* database: the "products without a rank" switch sits with the other filters */
.ff.unranked .switchrow.sm { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0 0; font-size: 13px; cursor: pointer; } .ff.unranked .switchrow.sm input { margin-top: 3px; accent-color: var(--app-accent); }
.ff.unranked small { display: block; margin-top: 2px; font-size: 12px; }

/* passkeys: login button and the Security section's list */
.orline { display: flex; align-items: center; gap: 10px; margin: 12px 0 10px; color: var(--app-muted, #8a979d); font-size: 12px; } .orline::before, .orline::after { content: ""; flex: 1; height: 1px; background: var(--app-line, #e3e8ea); }
.passkeybtn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.pkbox { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--app-line); display: grid; gap: 10px; } .pkbox h3 { margin: 0; font-size: 15px; } .pkbox p { margin: 0; }
.pkhint { margin: 6px 0 0; font-size: 12px; color: var(--app-muted, #8a979d); text-align: center; }

/* allowances: counter + "PRO · unlimited" tag, the page strip, the Account list */
.allowwrap { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.protag { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; color: #f3d68b; background: linear-gradient(115deg, #151a20, #2e3a48 45%, #1a2027); border: 1px solid rgba(225,176,74,.6); text-decoration: none; white-space: nowrap; }
a.protag:hover { border-color: #f3d68b; } .protag .pt-s { margin: 0 5px; opacity: .7; }
html.light .protag { color: #8a5d12; background: #fff7e0; border-color: rgba(181,131,42,.55); }
.allowstrip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; padding: 8px 12px; border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-panel); }
.allowstrip .as-l { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--app-muted); }
.allowlist { display: grid; gap: 8px; justify-items: start; }
.limitnote .protag { margin-left: 6px; }

/* login: set up a passkey on the spot */
.pkchoose { display: grid; gap: 10px; margin: 14px 0 6px; }
.btn.linkish { background: none; border: 0; color: var(--app-accent, #0e7c6b); padding: 6px 0; font-weight: 600; cursor: pointer; }
/* dashboard: the one-time passkey suggestion */
.pknudge { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--app-accent) 40%, transparent); background: color-mix(in srgb, var(--app-accent) 8%, var(--app-panel)); }
.pknudge .t { flex: 1; min-width: 240px; } .pknudge .t b { display: block; }

/* ---- Account page: section nav + one column of cards made of setting rows ---- */
.acct { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 28px; max-width: 1080px; margin: 0 auto; align-items: start; }
.acct-nav { position: sticky; top: 76px; display: grid; gap: 2px; }
.acct-nav a { padding: 8px 12px; border-radius: 8px; color: var(--app-ink-2); text-decoration: none; font-size: 13.5px; }
.acct-nav a:hover { background: var(--app-panel); color: var(--app-ink); }
.acct-nav a.on { background: var(--app-panel); color: var(--app-ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--app-accent); }
.acct-main { display: grid; gap: 18px; min-width: 0; }
.acard { background: var(--app-panel); border: 1px solid var(--app-line); border-radius: 14px; overflow: hidden; scroll-margin-top: 80px; }
.acard > .ahead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 14px 20px; border-bottom: 1px solid var(--app-line); }
.acard > .ahead h2 { margin: 0; font-size: 16px; } .acard > .ahead .sub { color: var(--app-muted); font-size: 13px; }
.acard .abody { padding: 16px 20px; }
.arow { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; padding: 16px 20px; }
.arow + .arow { border-top: 1px solid var(--app-line); }
.arow .ar-l b { display: block; font-size: 14px; color: var(--app-ink); }
.arow .ar-l small { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--app-muted); }
.arow .ar-c { min-width: 0; display: grid; gap: 10px; align-content: start; }
.arow .ar-c > * { margin: 0; }
.arow .note { font-size: 13.5px; line-height: 1.5; color: var(--app-ink-2); }
.readonly { padding: 8px 12px; border-radius: 8px; background: var(--app-bg); border: 1px solid var(--app-line); font-size: 14px; color: var(--app-ink); overflow-wrap: anywhere; }
.inlineform { display: grid; gap: 10px; padding: 14px; border-radius: 10px; border: 1px solid var(--app-line); background: var(--app-bg); }
.inlineform .field { margin: 0; } .inlineform .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.inlineform .row { display: flex; gap: 8px; flex-wrap: wrap; }
.arow .ar-c .btn.sm { justify-self: start; }
/* summary card */
.acct-hero { display: flex; align-items: center; gap: 16px; padding: 18px 20px; flex-wrap: wrap; }
.acct-hero .av { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 20px; color: #0b2a24; background: var(--app-accent); flex: 0 0 auto; }
.acct-hero .who { flex: 1; min-width: 220px; display: grid; gap: 6px; } .acct-hero .who b { font-size: 16px; overflow-wrap: anywhere; }
.acct-hero .facts { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 12.5px; color: var(--app-muted); }
.acct-hero .facts span:empty { display: none; }
.acct-hero .act { display: flex; gap: 8px; flex-wrap: wrap; }
.planchip { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--app-bg); border: 1px solid var(--app-line); color: var(--app-ink); }
.planchip.pro { color: var(--app-accent); border-color: color-mix(in srgb, var(--app-accent) 50%, transparent); }
.planchip.big { font-size: 14px; padding: 4px 12px; }
.planline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.allowgrid { display: grid; gap: 8px; justify-items: start; }
/* two-step block inside a row */
#secbody p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; } #secbody .field { margin: 0 0 10px; max-width: 320px; }
/* notifications switch: readable label, clear state */
.acswitch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: var(--app-ink); justify-self: start; }
.acswitch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.acswitch .track { width: 40px; height: 22px; border-radius: 999px; background: var(--app-line); position: relative; transition: background .15s; }
.acswitch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.acswitch input:checked + .track { background: var(--app-accent); } .acswitch input:checked + .track::after { transform: translateX(18px); }
.acswitch input:focus-visible + .track { outline: 2px solid var(--app-accent); outline-offset: 2px; }
/* integrations: one row per link, nothing squeezed */
.intgroup { display: grid; gap: 12px; } .intgroup + .intgroup { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--app-line); }
.intgroup .ih b { display: block; font-size: 14px; } .intgroup .ih span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--app-muted); }
.intlist, .ailist { display: grid; gap: 8px; }
.introw { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.introw .in b { display: block; font-size: 13.5px; } .introw .in small { display: block; font-size: 12px; color: var(--app-muted); line-height: 1.35; }
input.mono { width: 100%; min-width: 0; font: 12.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--app-line); background: var(--app-bg); color: var(--app-ink); text-overflow: ellipsis; }
.airow { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--app-line); }
.airow:first-child { border-top: 0; }
.airow .an b { display: block; font-size: 13.5px; } .airow .an small { display: block; font-size: 12px; line-height: 1.4; color: var(--app-muted); }
.airow .av2 { display: flex; gap: 8px; min-width: 0; }
.dim.small { font-size: 12.5px; }
.btn.danger-ghost { color: #ff8a80; border-color: rgba(255,120,110,.45); }
/* narrow screens: the nav becomes a scrolling row, rows stack */
@media (max-width: 900px) {
  .acct { grid-template-columns: 1fr; gap: 14px; }
  .acct-nav { position: sticky; top: 56px; z-index: 3; display: flex; overflow-x: auto; gap: 4px; padding: 6px; background: var(--app-bg); border-bottom: 1px solid var(--app-line); }
  .acct-nav a { white-space: nowrap; } .acct-nav a.on { box-shadow: inset 0 -2px 0 var(--app-accent); }
  .arow { grid-template-columns: 1fr; gap: 10px; }
  .introw { grid-template-columns: 1fr auto; } .introw .in { grid-column: 1 / -1; }
  .airow { grid-template-columns: 1fr; }
  .inlineform .pair { grid-template-columns: 1fr; }
}
.inlineform[hidden], .acct [hidden] { display: none !important; }
.acct .secq-block { margin: 0; padding: 0; border: 0; display: grid; gap: 10px; }
.acct .btn.sm { padding: 7px 14px; font-size: 13px; border-radius: 9px; }
.acct .devlist .btn.sm { padding: 6px 12px; }
.acct p.dim.small, .acct .dim.small { font-size: 12.5px; }
.acct #secbody p.good { color: var(--app-accent); }
.acct #pklist .devlist { margin-bottom: 8px; }
.acct .devrow { padding: 8px 12px; }
.acct .msg:empty { display: none; }
.airow .an small b, .introw .in small b { display: inline; font-size: inherit; font-weight: 700; color: var(--app-ink-2); }
.acct .intgroup .note, .acct .abody > p.dim, .acct .abody .note { font-size: 13px; line-height: 1.5; color: var(--app-ink-2); margin: 0; }
.acct .abody > p.dim { color: var(--app-muted); }

/* marketplace banners: how connecting works, inside the banner */
.mkp-steps { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(255,255,255,.08); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
html.light .mkp-steps { border-top-color: var(--app-line); }
.mkp-steps li { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; color: var(--app-ink-2); }
.mkp-steps .n { flex: 0 0 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #111; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.mkp-note { margin: 10px 0 0; font-size: 12.5px; color: var(--app-muted); }
.mkp-go[disabled] { opacity: .55; cursor: not-allowed; }
@media (max-width: 900px) { .mkp-steps { grid-template-columns: 1fr; } }
.wcard.off { opacity: .7; text-decoration: none; color: inherit; border-style: dashed; } .wcard.off:hover { opacity: 1; }

/* ---- product database: the market at a glance (seven bars over the matching results, 14 October 2026) ---- */
.dbsum:empty { display: none; }
.dbsum { padding: 12px 16px 14px; border-bottom: 1px solid var(--app-line); }
.dbsum .sumhead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; font-size: 13px; cursor: help; }
.dbsum .sumhead b { font-weight: 600; color: var(--app-ink); }
.dbsum .sumgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0 14px; } /* one line, always: the seven bars share the width */
.dbsum .sumbar { min-width: 0; }
.dbsum .sumbar .sbt { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 12px; color: var(--app-ink-2); margin-bottom: 5px; cursor: help; min-width: 0; }
.dbsum .sumbar .sbt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbsum .sumbar .sbt small { color: var(--app-muted); font-size: 11px; white-space: nowrap; }
.dbsum .sbtrack { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--app-panel-2); }
.dbsum .sbtrack .sg { display: block; height: 100%; cursor: help; }
.dbsum .sbtrack .sg + .sg { box-shadow: inset 1px 0 0 var(--app-bg); }
.dbsum .sblegend { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 5px; font-size: 11px; color: var(--app-muted); }
.dbsum .sblegend span { display: inline-flex; align-items: center; gap: 4px; cursor: help; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.dbsum .sblegend .sg { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.dbsum .sblegend b { color: var(--app-ink-2); font-weight: 600; }
.dbsum .sumbar.thin { opacity: .45; }
/* quiet colours (see the competitor strength labels): the level bar in its three tints, the others in teal steps */
.sg { background: rgba(63,191,168,.35); }
.sg-strength-high { background: #c97b72; } .sg-strength-medium { background: #c9a865; } .sg-strength-low { background: #5fae9f; }
.sg-seller-own, .sg-newcomers-new, .sg-brands-top, .sg-demand-yes, .sg-reviews-few, .sg-size-standard { background: #4fb3a1; }
.sg-seller-fba, .sg-newcomers-old, .sg-brands-rest, .sg-demand-no, .sg-reviews-mid, .sg-size-oversize { background: rgba(79,179,161,.5); }
.sg-seller-self, .sg-reviews-many { background: rgba(79,179,161,.25); }
html.light .sg-strength-high { background: #d99a92; } html.light .sg-strength-medium { background: #e0c48a; } html.light .sg-strength-low { background: #7cc0b3; }

/* On a narrow window the bar's name keeps its room and the "x of y known" note shrinks first (the full text is on hover). */
.dbsum .sumbar .sbt span { flex: 0 1 auto; min-width: 2.5em; }
.dbsum .sumbar .sbt small { flex: 0 100 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---- Hashtag research (0.53) and the interest card (Keywords & niches, the database, the product page) ---- */
.hcards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.hcards > .sec { margin: 0; }
@media (max-width: 900px) { .hcards { grid-template-columns: minmax(0, 1fr); } }
.htabs { margin-bottom: 10px; }
.htable td { vertical-align: middle; }
.htable .acts, .kwt .acts { white-space: nowrap; }
.htable .acts .btn, .kwt .acts .btn { margin-right: 4px; }
.btn.sm.on { border-color: color-mix(in srgb, var(--app-accent) 55%, transparent); color: var(--app-accent); background: color-mix(in srgb, var(--app-accent) 10%, transparent); }
.hspark { vertical-align: middle; stroke: var(--app-muted); }
.hspark.up { stroke: var(--app-accent); } .hspark.down { stroke: #dc9a93; }
/* Rising / Steady / Falling: quiet tints, never solid badges */
.htrend { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 7px; border-radius: 6px; white-space: nowrap; color: var(--app-ink-2); background: var(--app-panel-2); border: 1px solid var(--app-line); }
.htrend.up { color: #86c9bc; background: rgba(63,191,168,.08); border-color: rgba(63,191,168,.15); }
.htrend.down { color: #dc9a93; background: rgba(214,69,58,.08); border-color: rgba(214,69,58,.15); }
html.light .htrend.up { color: #0e6b5d; background: #eef8f5; border-color: #cfe9e2; } html.light .htrend.down { color: #a3392f; background: #fdf1ef; border-color: #f2d3cf; }
.hlock { margin-top: 10px; }
.hideas { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.hidea { border: 1px solid var(--app-line); border-radius: 10px; padding: 10px 12px; background: var(--app-panel-2); }
.hidea b { display: inline-block; margin-bottom: 2px; } .hidea span { display: block; color: var(--app-muted); font-size: 12px; }
.htool + .htool { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--app-line); }
.htool h3 { font-size: 14px; margin: 0 0 2px; } .htool p.dim { margin: 0 0 8px; font-size: 12px; }
.hset { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.hchip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--app-line); background: var(--app-panel-2); color: var(--app-ink); }
.hchip small { color: var(--app-muted); font-size: 10.5px; }
.dbt.mini { min-width: 0; width: 100%; } .dbt.mini td { padding: 7px 10px; }
.htable { min-width: 760px; }
.htable [data-behind] a, .icard a { color: var(--app-accent); text-decoration: none; } .htable [data-behind] a:hover { text-decoration: underline; }
.icard { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: flex-start; padding: 2px 0; }
.icard .icol { min-width: 200px; flex: 1 1 220px; }
.icard .ihead { font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--app-muted); margin-bottom: 4px; }
.icard .ibig { font-size: 18px; font-weight: 600; margin-bottom: 2px; }
.icard .ibig .htrend { font-size: 14px; padding: 2px 9px; }
.icard .isub { color: var(--app-muted); font-size: 12px; margin-bottom: 6px; }
.icard .itags { display: flex; flex-wrap: wrap; gap: 5px; }
.icard .icount { flex-basis: 100%; font-size: 12px; }
.icard .limitnote { margin: 0; }
.isignal { margin-top: 10px; padding: 8px 12px; border-radius: 8px; font-size: 13px; color: var(--app-ink); background: rgba(63,191,168,.07); border: 1px solid rgba(63,191,168,.18); }
.kwinterest:not(:empty) { margin: 6px 0 14px; padding: 12px 14px; border: 1px solid var(--app-line); border-radius: 10px; background: var(--app-panel-2); }
/* Social demand in one line (Keywords & niches, 0.59.4): pills that scroll sideways rather than wrap. */
.kwinterest:has(> .icard.sdc) { padding: 8px 12px; margin: 0 0 14px; }
.icard.sdc { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; padding: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; }
.icard.sdc .sdc-h { font-size: 10px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--app-muted); padding-right: 10px; border-right: 1px solid var(--app-line); }
.icard.sdc .sdc-big { display: inline-flex; align-items: center; gap: 8px; }
.icard.sdc .sdbig { font-size: 17px; }
.icard.sdc .hspark { width: 72px; height: 20px; }
.icard.sdc .sdc-sub { font-size: 12.5px; color: var(--app-ink-2); padding-right: 6px; } .icard.sdc .sdc-sub b { color: var(--app-ink); }
.icard.sdc .sdc-p { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--app-line); background: var(--app-panel); font-size: 12px; }
.icard.sdc .sdc-p > span { color: var(--app-ink-2); } .icard.sdc .sdc-p small { color: var(--app-muted); font-size: 10px; }
.icard.sdc .sdc-p b { font-weight: 600; font-variant-numeric: tabular-nums; } .icard.sdc .sdc-p b.up { color: #86c9bc; } .icard.sdc .sdc-p b.down { color: #dc9a93; }
html.light .icard.sdc .sdc-p b.up { color: #0e6b5d; } html.light .icard.sdc .sdc-p b.down { color: #a3392f; }
.icard.sdc .sdc-tt { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; } .icard.sdc .limitnote { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.icard.sdc .icount { flex-basis: auto; }
.kwinterest .sdc-rel { margin-top: 8px; }
.dbinterest:not(:empty) { padding: 12px 20px; border-bottom: 1px solid var(--app-line); }
.hcards .btn.sm, .htable .btn.sm, .icard .btn.sm, .hlock .btn.sm, #results .kwt .acts .btn.sm, .kwinterest .btn.sm, .dbinterest .btn.sm, #pinterest .btn.sm { padding: 5px 11px; font-size: 12.5px; border-radius: 8px; gap: 6px; }
.htool a:not(.btn), .hcards .dbt.mini a:not(.btn) { color: var(--app-accent); text-decoration: none; } .htool a:not(.btn):hover { text-decoration: underline; }
.htool .row { margin-top: 6px; }
/* Costs & profit (console) */
.cchart { width: 100%; max-width: 900px; height: auto; max-height: 240px; display: block; color: var(--app-ink-2); }
.clegend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--app-ink-2); margin: 6px 0 10px; }
.clegend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.bepro { margin-top: 12px; } .beline { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-bottom: 6px; }
.bebar { height: 10px; border-radius: 6px; background: var(--app-panel-2); border: 1px solid var(--app-line); overflow: hidden; }
.bebar i { display: block; height: 100%; background: var(--app-accent); border-radius: 6px; }
.ukpi.good b { color: var(--app-accent); } .ukpi.bad b { color: #dc9a93; }
.warnsec { border-color: rgba(240,168,58,.45); }
.costform .chips { margin: 0 0 8px; flex-wrap: wrap; }
.clist { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; } .clist li { margin: 4px 0; }
.dbt.mini .acts { white-space: nowrap; } .dbt.mini .btn.sm { padding: 4px 10px; font-size: 12px; border-radius: 7px; }
/* 0.53.2 (15 October 2026): a short or narrow window hid the database's vital buttons.
   The filter panel never grows past the window under the top bar: its fields scroll, its header and Reset / Search
   stay in view; folded away it hides whole (its footer used to stick out under the top bar). Its top follows the top
   bar's real height (database.js measures it), at every width. */
.mode-results .dbfilters { top: var(--dbtop, 68px); display: flex; flex-direction: column; max-height: calc(100vh / var(--zoom, 1) - var(--dbtop, 68px) - 64px); } /* 64px: room for the tab that hangs below it */
.mode-results .dbfilters > header, .mode-results .dbfilters > .ffoot { flex: 0 0 auto; }
.mode-results .dbfilters > .body { flex: 1 1 auto; min-height: 0; max-height: none; overflow: auto; }
@media (max-width: 900px) { .mode-results .dbfilters { top: var(--dbtop, 56px); max-height: calc(100vh / var(--zoom, 1) - var(--dbtop, 56px) - 60px); } }
/* The top bar keeps one line: the title shortens with "…" rather than wrapping, and the email steps aside first. */
.topbar h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 1280px) { .topbar .who { display: none; } }
.topbar > * { flex-shrink: 0; } .topbar > h1, .topbar > .spacer { flex-shrink: 1; }
.topbar .btn, .topbar .plan { white-space: nowrap; }

/* 0.54.0 (15 October 2026): Hashtag research redesigned as one guided page. A start page (search with examples, three
   steps, Rising on TikTok with each hashtag's details opened in place, Trending words, Tracked) and a phrase report
   (verdict and what it means, hashtags with the products behind each, the best products, the post kit, related
   searches). Level and trend labels stay quiet tints. */
.hlayout .sec + .sec, .hlayout .sec + div:not(:empty) { margin-top: 16px; }
.hhero { margin-bottom: 16px; }
.hhero > .body { padding: 18px 20px 14px; }
.hhero .hh { font-size: 18px; font-weight: 600; margin: 0 0 3px; }
.hhero .hsub { margin: 0 0 12px; }
.hhero .kwsearch input { font-size: 15px; padding: 11px 14px; }
.hhero .kwsearch .btn { padding-left: 18px; padding-right: 18px; }
.hsbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; font-size: 12.5px; }
.hsbar .spacer { flex: 1; }
.hex { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hex .dim { margin-right: 2px; }
button.hchip { cursor: pointer; font: inherit; font-size: 12.5px; }
button.hchip:hover { border-color: color-mix(in srgb, var(--app-accent) 55%, transparent); color: var(--app-accent); }
.hex1 { border-style: dashed; background: transparent; }
.linkbtn { border: 0; background: none; padding: 0; font: inherit; color: var(--app-accent); cursor: pointer; }
.linkbtn:hover { text-decoration: underline; }
.hsrcbox { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--app-line); }
.hsteps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--app-line); }
.hstep { display: flex; gap: 10px; align-items: flex-start; padding: 12px 20px; border-right: 1px solid var(--app-line); }
.hstep:last-child { border-right: 0; }
.hstep .n { flex: 0 0 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--app-accent); background: color-mix(in srgb, var(--app-accent) 14%, transparent); }
.hstep b { display: block; font-size: 13px; } .hstep span { display: block; color: var(--app-muted); font-size: 12px; }
.hlayout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.hmain, .hside { min-width: 0; }
.hside .sec > header { flex-wrap: wrap; row-gap: 2px; }
.hhint { display: flex; gap: 8px; padding: 10px 20px; font-size: 12.5px; color: var(--app-ink-2); border-top: 1px solid var(--app-line); background: color-mix(in srgb, var(--app-accent) 5%, transparent); }
.hhint > b { color: var(--app-accent); flex: 0 0 auto; } .hhint a { color: var(--app-accent); }
.hempty { padding: 18px 4px; } .hempty b { display: block; margin-bottom: 3px; } .hempty span { color: var(--app-muted); font-size: 13px; } .hempty a { color: var(--app-accent); }
.hnowrap { white-space: nowrap; }
.hgood { color: #86c9bc; } .hbad { color: #dc9a93; }
html.light .hgood { color: #0e6b5d; } html.light .hbad { color: #a3392f; }
.htagbtn { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--app-ink); cursor: pointer; }
.htagbtn:hover { color: var(--app-accent); }
.htable tr.sel > td { background: color-mix(in srgb, var(--app-accent) 6%, var(--app-panel)); }
.htable tr.sel > td:first-child { box-shadow: inset 3px 0 0 var(--app-accent); }
.htable tr.hdetrow > td { padding: 0; background: var(--app-bg); }
.hdet { display: grid; grid-template-columns: 210px minmax(0, 1fr) 250px; gap: 22px; padding: 16px 18px; white-space: normal; text-align: left; }
.hdet > .dbmsg { grid-column: 1 / -1; }
.hdcol { min-width: 0; }
.hdcol h4 { font-size: 12px; font-weight: 600; color: var(--app-muted); margin: 0 0 8px; }
.hdcol h4 + .hset { margin-top: 0; }
.hdnum { font-size: 12.5px; color: var(--app-ink-2); margin-top: 6px; line-height: 1.7; }
.hdacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.hprod { display: flex; align-items: center; gap: 9px; padding: 6px 0; border-bottom: 1px solid var(--app-line); color: var(--app-ink); text-decoration: none; font-size: 12.5px; }
.hprod:hover .t { color: var(--app-accent); }
.hprod img, .hprod .ph { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 6px; object-fit: contain; background: #fff; }
.hprod .ph { background: var(--app-panel-2); }
.hprod .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hprod .m { color: var(--app-muted); font-size: 11.5px; white-space: nowrap; }
.hlvl { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 5px; white-space: nowrap; border: 1px solid var(--app-line); background: var(--app-panel-2); color: var(--app-ink-2); }
.hlvl.low { color: #86c9bc; background: rgba(63,191,168,.08); border-color: rgba(63,191,168,.18); }
.hlvl.medium { color: #d9b877; background: rgba(240,168,58,.08); border-color: rgba(240,168,58,.18); }
.hlvl.high { color: #dc9a93; background: rgba(214,69,58,.08); border-color: rgba(214,69,58,.18); }
html.light .hlvl.low { color: #0e6b5d; background: #eef8f5; border-color: #cfe9e2; } html.light .hlvl.medium { color: #8a5a10; background: #fdf6e8; border-color: #f2ddb5; } html.light .hlvl.high { color: #a3392f; background: #fdf1ef; border-color: #f2d3cf; }
.hwords { display: flex; flex-direction: column; }
.hword { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 18px; border: 0; border-bottom: 1px solid var(--app-line); background: none; font: inherit; color: var(--app-ink); text-align: left; cursor: pointer; }
.hword:last-child { border-bottom: 0; }
button.hword:hover { background: var(--app-panel-2); } button.hword:hover .k { color: var(--app-accent); }
.hword .k { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hword .v { width: 64px; text-align: right; font-size: 12.5px; color: var(--app-muted); }
.hword .v.hgood { color: #86c9bc; } html.light .hword .v.hgood { color: #0e6b5d; }
.hword.locked { cursor: default; }
.htracked { display: flex; flex-direction: column; }
.htr { display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 18px; border-bottom: 1px solid var(--app-line); }
.htr:last-child { border-bottom: 0; }
.htr .k { flex: 1; min-width: 0; text-align: left; border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--app-ink); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.htr .k:hover { color: var(--app-accent); }
.hback { display: inline-block; margin: 0 0 10px; font-size: 13px; }
#report { margin-bottom: 16px; }
.hkpis { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; border-bottom: 1px solid var(--app-line); }
.hkpi { padding: 14px 20px; border-right: 1px solid var(--app-line); min-width: 0; }
.hkpi:last-child { border-right: 0; }
.hkpi .l { color: var(--app-muted); font-size: 12px; margin-bottom: 4px; }
.hkpi .v { font-size: 21px; font-weight: 700; line-height: 1.25; } .hkpi .v small { font-size: 13px; font-weight: 600; }
.hkpi .v.dim { color: var(--app-muted); font-weight: 600; }
.hkpi .d { color: var(--app-muted); font-size: 12px; margin-top: 3px; } .hkpi .d .btn { margin-top: 6px; margin-left: 0; }
.hkpi .d .hspark { margin-left: 4px; }
.hverdict.strong { color: #86c9bc; } .hverdict.weak { color: #dc9a93; } .hverdict.worth { color: #d9b877; } .hverdict.wait { color: var(--app-ink-2); }
html.light .hverdict.strong { color: #0e6b5d; } html.light .hverdict.weak { color: #a3392f; } html.light .hverdict.worth { color: #8a5a10; }
.hmean { display: flex; gap: 12px; align-items: flex-start; margin: 14px 20px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--app-line); background: var(--app-panel-2); }
.hmean .ic { flex: 0 0 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-weight: 700; color: var(--app-ink-2); background: var(--app-line); }
.hmean b { display: block; margin-bottom: 2px; } .hmean span { color: var(--app-ink-2); font-size: 13px; }
.hmean.strong { background: rgba(63,191,168,.07); border-color: rgba(63,191,168,.28); } .hmean.strong .ic { background: #0e7c6b; color: #fff; }
.hmean.weak { background: rgba(214,69,58,.06); border-color: rgba(214,69,58,.22); } .hmean.weak .ic { background: rgba(214,69,58,.25); color: #f0c3be; }
.hmean.worth { background: rgba(240,168,58,.06); border-color: rgba(240,168,58,.22); } .hmean.worth .ic { background: rgba(240,168,58,.25); color: #f3dcae; }
html.light .hmean.strong { background: #eef8f5; border-color: #cfe9e2; } html.light .hmean.weak { background: #fdf1ef; border-color: #f2d3cf; } html.light .hmean.worth { background: #fdf6e8; border-color: #f2ddb5; }
html.light .hmean.weak .ic { color: #a3392f; } html.light .hmean.worth .ic { color: #8a5a10; }
#hmsg .body { padding: 0 20px 14px; } #hmsg .limitnote { margin: 0; }
.hsrc { font-size: 11.5px; color: var(--app-muted); font-weight: 400; margin-top: 1px; }
.hpgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hpc { display: flex; flex-direction: column; gap: 5px; padding: 10px; border: 1px solid var(--app-line); border-radius: 10px; background: var(--app-panel-2); color: var(--app-ink); text-decoration: none; font-size: 12.5px; min-width: 0; }
.hpc:hover { border-color: color-mix(in srgb, var(--app-accent) 45%, transparent); }
.hpc img, .hpc .ph { width: 100%; height: 96px; object-fit: contain; border-radius: 7px; background: #fff; margin-bottom: 3px; }
.hpc .ph { background: var(--app-line); }
.hpc .t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; min-height: 2.7em; }
.hpc .r { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 12px; }
.hsum { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--app-line); }
.dbsum.hsum .sumgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 18px; }
.hkit { padding: 14px 18px; border-bottom: 1px solid var(--app-line); }
.hkit:last-child { border-bottom: 0; }
.hkit h3 { font-size: 13.5px; margin: 0 0 2px; } .hkit > p.dim { font-size: 12px; margin: 0 0 8px; }
.hkit .row { display: flex; flex-wrap: wrap; gap: 6px; }
.hkit .limitnote { margin: 4px 0 0; }
.hfine { font-size: 11.5px; margin: -4px 0 8px; }
.hx { border: 0; background: none; padding: 0 0 0 2px; font: inherit; color: var(--app-muted); cursor: pointer; line-height: 1; }
.hx:hover { color: #dc9a93; }
.hcreators { display: flex; flex-direction: column; }
.hcr { display: flex; align-items: center; gap: 9px; padding: 6px 0; border-bottom: 1px solid var(--app-line); color: var(--app-ink); text-decoration: none; font-size: 12.5px; }
.hcr:last-child { border-bottom: 0; } .hcr:hover .t { color: var(--app-accent); }
.hcr .av { flex: 0 0 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 12px; color: var(--app-accent); background: color-mix(in srgb, var(--app-accent) 14%, transparent); }
.hcr .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hcr .m { color: var(--app-muted); font-size: 11.5px; white-space: nowrap; }
@media (max-width: 1200px) {
  .hlayout { grid-template-columns: minmax(0, 1fr); }
  .hside { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
  .hlayout .hside .sec + .sec { margin-top: 0; }
  .hdet { grid-template-columns: 180px minmax(0, 1fr); } .hdet > .hdcol:last-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .hsteps { grid-template-columns: minmax(0, 1fr); } .hstep { border-right: 0; border-bottom: 1px solid var(--app-line); } .hstep:last-child { border-bottom: 0; }
  .hkpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hkpi:nth-child(2) { border-right: 0; } .hkpi:nth-child(-n+2) { border-bottom: 1px solid var(--app-line); }
  .hpgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dbsum.hsum .sumgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
  .hdet { grid-template-columns: minmax(0, 1fr); } .hdet > .hdcol:last-child { grid-column: auto; }
  .hhero .kwsearch { flex-wrap: wrap; } .hhero .kwsearch input { flex: 1 1 100%; } .hhero .kwsearch .btn { flex: 1 1 100%; }
  .hmean { margin: 12px 14px; }
}
.hhero .btn.sm, .hlayout .btn.sm, #report .btn.sm, .hdet .btn.sm { padding: 5px 11px; font-size: 12.5px; border-radius: 8px; gap: 6px; line-height: 1.25; min-height: 0; height: auto; }
.hlayout .sec > header .btn.sm + .btn.sm, #report > header .btn.sm + .btn.sm { margin-left: -4px; }
/* 0.54.1: the phrase report paints at once; each figure shows a spinner until it arrives, TikTok's "Reading" while a new
   phrase is read (the page asks again by itself). */
.hkpi .v .spin, .hmean .ic .spin, .hreading .spin { width: 15px; height: 15px; border-width: 2px; vertical-align: -2px; margin: 0; }
.hkpi .v.hreading { font-size: 16px; font-weight: 600; color: var(--app-ink-2); display: flex; align-items: center; gap: 8px; }
.hkpi .v.hreading .spin { margin-right: 0; }
.hmean .ic .spin { border-color: var(--app-panel); border-top-color: var(--app-accent); }
p.msg.hreading { display: flex; align-items: center; gap: 8px; }
/* 0.54.2: a phrase's page in two columns. Left: the report (its four figures two by two) and the products behind it;
   right: the hashtags as a compact list, the post kit, related searches. The search stays until Reset. */
.hlayout.hphrase { grid-template-columns: minmax(0, 1fr) 420px; }
.hphrase #report { margin-bottom: 0; }
.hphrase .hkpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hphrase .hkpi { padding: 12px 18px; }
.hphrase .hkpi:nth-child(2n) { border-right: 0; } .hphrase .hkpi:nth-child(-n+2) { border-bottom: 1px solid var(--app-line); }
.hphrase .hkpi .v { font-size: 19px; }
.hphrase .hmean { margin: 12px 18px; }
.hphrase .hpgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.hphrase .hpc img, .hphrase .hpc .ph { height: 84px; }
.htools { display: flex; gap: 6px; padding: 10px 18px 0; }
.htools .btn.sm { padding: 5px 11px; font-size: 12.5px; border-radius: 8px; }
#htags > .body { padding-top: 4px; padding-bottom: 6px; }
.hlist { display: flex; flex-direction: column; }
.hli { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--app-line); }
.hli:last-child { border-bottom: 0; }
.hli .n { color: var(--app-muted); font-size: 12px; padding-top: 2px; }
.hli .m { min-width: 0; }
.hli .top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hli .top b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hli .top .tr { margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.hli .sub { font-size: 12px; color: var(--app-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hli .sub a { color: var(--app-accent); text-decoration: none; } .hli .sub a:hover { text-decoration: underline; }
.hli .a { grid-column: 2; display: flex; gap: 6px; margin-top: 7px; }
.hli.locked { align-items: center; } .hli.locked .kwlock { grid-column: 2; justify-self: start; }
.hmore { display: block; margin: 8px 0 4px; font-size: 13px; }
@media (max-width: 1200px) { .hlayout.hphrase { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .hphrase .hpgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hli .foot { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.hli .foot .sub { flex: 1; min-width: 0; margin-top: 0; }
.hli .foot .a { grid-column: auto; margin-top: 0; flex: 0 0 auto; }
.hli .a .btn.sm { padding: 3px 9px; font-size: 12px; }
/* 0.54.4: Hashtag research opens on what's trending (the last search one click away under the search box), its
   sources always in view, departments that have no TikTok readings yet show their top searches. */
.hsrcrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.hsrcrow .lbl { font-size: 13px; font-weight: 600; color: var(--app-ink-2); margin-right: 2px; }
.hsrcrow .srcchk { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--app-line); border-radius: 999px; background: var(--app-panel-2); font-size: 13px; font-weight: 600; color: var(--app-ink-2); cursor: pointer; }
.hsrcrow .srcchk.on { border-color: color-mix(in srgb, var(--app-accent) 55%, transparent); background: color-mix(in srgb, var(--app-accent) 12%, transparent); color: var(--app-ink); }
.hsrcrow .srcchk input { accent-color: var(--app-accent); margin: 0; }
.hsrcrow .linkbtn { font-size: 12.5px; margin-left: 4px; }
.hhero .hsrcbox { margin-top: 8px; padding-top: 0; border-top: 0; }
.hhero .hsbar { margin-top: 12px; }
.hresume { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding-left: 12px; border-left: 1px solid var(--app-line); }
.hchip.on { border-color: color-mix(in srgb, var(--app-accent) 55%, transparent); color: var(--app-accent); }
.hsearches { margin: 6px 0 4px; padding: 12px 14px; border: 1px dashed var(--app-line); border-radius: 10px; }
.hsh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 8px; } .hsh b { font-size: 14px; } .hsh .dim { font-size: 12.5px; }
.hsearches .hset { margin: 0; }

/* 0.54.4: module titles across the hub are bigger and stay on one line (the subtitle moves under them when there is no
   room; a title too long for its box ends in "…"). */
.sec > header { flex-wrap: wrap; row-gap: 4px; }
.sec > header h2, .mod header h3 { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; flex-shrink: 0; }
.sec > header .sub { min-width: 0; }
.trk-box > header h2, .connectrow .sec header h2 { font-size: 17px; }
@media (max-width: 900px) { .sec > header h2, .mod header h3 { font-size: 16px; } }
/* 0.54.4: a TikTok lookup in progress (Hashtag research's report, the interest card): a bar and its percentage. */
.ttprog { display: inline-block; width: 90px; height: 7px; border-radius: 4px; background: var(--app-line); overflow: hidden; vertical-align: middle; }
.ttprog i { display: block; height: 100%; background: var(--app-accent); transition: width 1s linear; }
.ttload { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 4px; } .ttload b { font-size: 14px; }
.hkpi .v.hreading .ttprog { width: 110px; }
/* 0.54.7: the interest card is "Social demand" as in the October mockup: the trend, its line, the views gained on the
   matching hashtags and some of them on the left; the hashtags counted, each this week against last week, on the right. */
.icard.sd { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px 28px; align-items: start; }
.icard.sd .sdl, .icard.sd .sdr { min-width: 0; }
.icard.sd .sdr { border-left: 1px solid var(--app-line); padding-left: 24px; }
.icard.sd .ihead { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 500; }
.icard.sd .sdtop { display: flex; align-items: center; gap: 14px; margin: 2px 0 6px; }
.sdbig { font-size: 24px; font-weight: 700; line-height: 1.15; white-space: nowrap; } .sdbig.up { color: #86c9bc; } .sdbig.down { color: #dc9a93; } .sdbig.flat { font-size: 20px; }
html.light .sdbig.up { color: #0e6b5d; } html.light .sdbig.down { color: #a3392f; }
.icard.sd .isub { color: var(--app-ink-2); font-size: 13px; } .icard.sd .isub b { color: var(--app-ink); }
.icard.sd .hchip.broad { color: var(--app-muted); } .icard.sd .hchip small { font-size: 9.5px; text-transform: uppercase; letter-spacing: .03em; }
.icard.sd .sdtt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; font-size: 13px; } .icard.sd .sdtt .limitnote { flex: 1; }
.sdtab { width: 100%; border-collapse: collapse; font-size: 13px; }
.sdtab td { padding: 5px 0; border-bottom: 1px solid var(--app-line); white-space: nowrap; } .sdtab tr:last-child td { border-bottom: 0; }
.sdtab td:first-child { overflow: hidden; text-overflow: ellipsis; max-width: 0; width: 55%; padding-right: 10px; }
.sdtab td.r { text-align: right; } .sdtab td.up { color: #86c9bc; } .sdtab td.down { color: #dc9a93; }
html.light .sdtab td.up { color: #0e6b5d; } html.light .sdtab td.down { color: #a3392f; }
.icard.sd .icount { grid-column: 1 / -1; }
.isignal { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; }
.isignal .ic { flex: 0 0 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: #0e7c6b; color: #fff; font-weight: 700; }
.isignal b { display: block; margin-bottom: 2px; } .isignal span { color: var(--app-ink-2); }
@media (max-width: 900px) { .icard.sd { grid-template-columns: minmax(0, 1fr); } .icard.sd .sdr { border-left: 0; padding-left: 0; border-top: 1px solid var(--app-line); padding-top: 10px; } }
/* 0.54.11: Costs & profit charts redrawn: taller with a scale; vendors as one bar each for a chosen month. */
.cchart { max-height: 280px; }
.clegend b.good { color: #3fbfa8; } .clegend b.bad { color: #dc9a93; }
.vmonths { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.vbars { display: flex; flex-direction: column; gap: 2px; max-width: 900px; }
.vrow { display: grid; grid-template-columns: 150px minmax(0, 1fr) 100px 48px 64px; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--app-line); font-size: 13px; }
.vrow .vname { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vrow .vtrack { height: 12px; border-radius: 6px; background: var(--app-panel-2); overflow: hidden; }
.vrow .vtrack i { display: block; height: 100%; border-radius: 6px; }
.vrow .vamt { text-align: right; font-variant-numeric: tabular-nums; }
.vrow .vshare { text-align: right; color: var(--app-muted); font-variant-numeric: tabular-nums; }
.vrow .vch { text-align: right; font-size: 12px; color: var(--app-muted); } .vrow .vch.bad { color: #dc9a93; } .vrow .vch.good { color: #3fbfa8; }
.vrow.vtotal { border-bottom: 0; font-weight: 700; } .vrow.vtotal .vtrack { background: none; }
.vnote { font-size: 12px; margin-top: 8px; }
@media (max-width: 700px) { .vrow { grid-template-columns: 110px minmax(0, 1fr) 84px 40px; } .vrow .vch { display: none; } }
.vmonths .chip.on { background: color-mix(in srgb, var(--app-accent) 18%, transparent); border-color: color-mix(in srgb, var(--app-accent) 60%, transparent); color: var(--app-ink); }
/* 0.54.11: presets that combine: ready-made mixes (with what they're made of) and switches to mix your own. */
.presets .plbl { font-size: 12px; font-weight: 600; color: var(--app-muted); margin-right: 4px; align-self: center; min-width: 92px; }
.presets.combos { margin-bottom: 8px; }
.presets .chipbtn.combo { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; line-height: 1.25; }
.presets .chipbtn.combo small { font-size: 10.5px; font-weight: 400; opacity: .7; }
.preset-desc span { display: block; margin-bottom: 3px; } .preset-desc span.bad { color: #dc9a93; }

/* Product database filter sheet, compact (0.54.12): numbered steps, presets in two short rows, then category,
   numbers and listing side by side; each filter on one line, its explanation on hover ("Show descriptions" puts it under). */
.dbfilters .body.fbody { gap: 14px; padding: 14px 22px 10px; }
.fstep { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin-bottom: 8px; min-width: 0; }
.fstep .n { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; background: rgba(63,191,168,.16); color: var(--app-accent); }
.fstep b { font-weight: 600; color: var(--app-ink); white-space: nowrap; }
.fstep .dim { color: var(--app-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fstep .spacer { flex: 1; }
.fstep .hinttoggle { font-size: 12px; font-weight: 500; color: var(--app-ink-2); display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; cursor: pointer; }
.fpre { gap: 0; padding-bottom: 12px; border-bottom: 1px solid var(--app-line); }
.prow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.prow .plbl { flex: none; width: 82px; font-size: 11.5px; color: var(--app-muted); text-transform: uppercase; letter-spacing: .04em; }
.prow .chipbtn { padding: 4px 10px; }
.fpre .preset-desc { margin: 8px 0 0 88px; font-size: 12.5px; }
.fcols { display: grid; grid-template-columns: minmax(400px, 1.7fr) minmax(270px, 1fr) minmax(300px, 1.1fr); gap: 0 26px; align-items: start; }
.fcols > .fsec { gap: 0; min-width: 0; }
.fcols > .fsec + .fsec { border-left: 1px solid var(--app-line); padding-left: 26px; }
.fcat .catq { margin: 0 0 8px; width: 100%; box-sizing: border-box; }
.fcat .catgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; max-height: none; overflow: visible; padding-right: 0; }
.fcat .catgrid .catchip { padding: 4px 8px; font-size: 12px; border-radius: 7px; min-height: 30px; align-items: center; }
.fcat .catgrid .catchip .nm { white-space: normal; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fcat .subcats { margin-top: 8px; max-height: 190px; overflow: auto; border: 1px dashed var(--app-line); border-radius: 8px; padding: 8px 10px; }
.fcat .subcats:empty { display: none; }
.fstep .lnkbtn { font: inherit; font-size: 12px; font-weight: 600; color: var(--app-accent); background: none; border: 0; padding: 2px 4px; cursor: pointer; white-space: nowrap; }
.fstep .lnkbtn:hover { text-decoration: underline; }
.frows { display: flex; flex-direction: column; gap: 7px; }
.frow { display: grid; grid-template-columns: 150px minmax(0, 1fr) 12px minmax(0, 1fr); align-items: center; gap: 6px; min-width: 0; }
.frow > label { font-size: 12.5px; font-weight: 600; color: var(--app-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help; }
.frow .to { color: var(--app-muted); font-size: 12px; text-align: center; }
.frow input, .frow select { font: inherit; font-size: 13px; width: 100%; min-width: 0; box-sizing: border-box; padding: 5px 8px; border: 1px solid var(--app-line); border-radius: 7px; background: var(--app-bg); color: var(--app-ink); color-scheme: dark; }
.frow > .wide, .frow > select, .frow > .fulchips { grid-column: 2 / -1; }
.frow .fulchips { gap: 6px; }
.frow .fulchip span { padding: 5px 11px; font-size: 12.5px; }
.frows > .hint { display: block; margin: -3px 0 3px 156px; font-size: 11.5px; line-height: 1.4; color: var(--app-muted); }
.dbfilters.nohints .frows > .hint { display: none; }
.frows .switchrow.sm { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--app-ink-2); margin-top: 2px; }
.frows .switchrow.sm input { margin: 0; width: 15px; height: 15px; flex: none; }
.dbfilters .ffoot { padding: 10px 22px; }
html.light .frow input, html.light .frow select { background: #fff; color-scheme: light; }
@media (max-width: 1250px) {
  .fcols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 24px; }
  .fcols > .fcat { grid-column: 1 / -1; }
  .fcols > .fsec + .fsec { border-left: 0; padding-left: 0; }
  .fcols > .fnum + .flist { border-left: 1px solid var(--app-line); padding-left: 24px; }
  .fcat .catgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .fcols { grid-template-columns: minmax(0, 1fr); }
  .fcols > .fnum + .flist { border-left: 0; padding-left: 0; }
  .fcat .catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .frow { grid-template-columns: 104px minmax(0, 1fr) 10px minmax(0, 1fr); }
  .frows > .hint { margin-left: 0; }
  .prow .plbl { width: 100%; }
  .fpre .preset-desc { margin-left: 0; }
  .fstep .dim { display: none; }
}
/* Narrow screens: the Rising on TikTok table scrolls sideways (min-width 760px), so a hashtag's opened details stay at
   the visible left edge, as wide as the table's box (100cqw), instead of needing a sideways scroll to read.
   max-width is the fallback where container units aren't supported. */
@media (max-width: 900px) {
  .tablewrap:has(> table.htable) { container-type: inline-size; }
  .htable tr.hdetrow > td > .hdet { position: sticky; left: 0; box-sizing: border-box; max-width: calc(100vw / var(--zoom, 1) - 32px); width: 100cqw; }
}
/* Product database, results: the pager and the sort wait while a search loads (database.js sets inert). */
.pager[inert] { opacity: .55; }
/* Narrow screens, results: the "Show filters" tab hangs 57px below the top bar, over the Database buttons (Amazon,
   Walmart, TikTok Shop), which then couldn't be clicked: they move down below it. The pager is made compact (three
   rows of full-size buttons took 173px at 375px). */
@media (max-width: 900px) {
  .content:has(> .dbpage.mode-results) > .srcswitch { margin-top: 52px; }
  .dbresults .pager { gap: 6px; padding: 8px 10px; }
  .dbresults .pager .spacer { display: none; }
  .dbresults .pager .btn { padding: 6px 11px; }
  .dbresults .pager .pgoto input { width: 56px; }
}
/* Just wider, with the menu open, the tab still reaches the TikTok Shop button (the page's padding is 28px there). */
@media (min-width: 901px) and (max-width: 1100px) { .content:has(> .dbpage.mode-results) > .srcswitch { margin-top: 36px; } }

/* The Free bar stacks on narrow screens on the website too: the rule at the phone breakpoint above is overridden by
   the later .pl-freebar layout (17 Oct 2026). */
@media (max-width: 1000px) { .pl-freebar { grid-template-columns: 1fr; text-align: center; } .pl-freebar .fb-l { justify-content: center; } }

/* The Founder's badge, hideable 14 days after the first payment (17 Oct 2026): a click opens its menu with "Hide the
   badge"; the star icon at the top right shows or hides it (gold while it shows). */
.founder-badge.hideable { cursor: pointer; }
.founder-badge.open .founder-tip { display: block; }
.founder-tip .founder-hide { display: block; margin-top: 10px; width: 100%; font: inherit; font-family: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; padding: 7px 10px; border-radius: 8px; border: 1px solid rgba(243,214,139,.45); background: rgba(243,214,139,.08); color: #f3d68b; cursor: pointer; }
.founder-tip .founder-hide:hover { background: rgba(243,214,139,.16); }
html.light .founder-tip .founder-hide { color: #8a5d12; border-color: rgba(154,107,23,.4); background: rgba(154,107,23,.06); }
#founderbtn.on { color: #e1b04a; }
html.light #founderbtn.on { color: #9a6b17; }
/* Narrow screens: the Founder's badge takes its own centred row under the top bar, so the bar's buttons (the star
   among them) stay on screen (17 Oct 2026; the badge pushed the bar 117px past a 375px screen before). */
@media (max-width: 600px) {
  .topbar { flex-wrap: wrap; row-gap: 6px; }
  .topbar #founder-slot:not(:empty) { order: 99; flex-basis: 100%; display: flex; justify-content: center; }
  .founder-badge { padding: 4px 12px 3px; font-size: 10px; letter-spacing: .14em; }
  .founder-tip { width: min(320px, calc(100vw - 32px)); }
}

/* ---- First-run dashboard (0.55.0): loading placeholders, Getting started, the connect banner, the ⚙ menu ---- */
.skel { display: flex; flex-direction: column; gap: 10px; }
.skel-row { display: flex; align-items: center; gap: 10px; }
.skel i, .skel-row span i { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--app-panel-2) 0%, color-mix(in srgb, var(--app-panel-2) 55%, var(--app-line)) 50%, var(--app-panel-2) 100%); background-size: 200% 100%; animation: skel 1.3s ease-in-out infinite; }
.skel .sk-img { width: 30px; height: 30px; flex: none; }
.skel-row span { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.skel .sk-l { height: 10px; width: 70%; } .skel .sk-s { height: 8px; width: 45%; } .skel .sk-r { width: 54px; height: 22px; flex: none; }
@keyframes skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel i, .skel-row span i { animation: none; } }
.mod header { position: relative; cursor: grab; } .mod header button, .mod header select { cursor: pointer; }
.mod-gear { border: 0; background: none; color: var(--app-muted); padding: 4px; border-radius: 7px; display: grid; place-items: center; }
.mod-gear:hover, .mod-gear[aria-expanded="true"] { background: var(--app-panel-2); color: var(--app-ink); }
.mod-menu { position: absolute; z-index: 70; min-width: 190px; padding: 6px; border-radius: 10px; background: var(--app-panel); border: 1px solid var(--app-line); box-shadow: 0 12px 32px rgba(0,0,0,.35); display: flex; flex-direction: column; }
.mod-menu.wide { width: 270px; max-height: 360px; overflow-y: auto; }
.mod-menu button { text-align: left; border: 0; background: none; color: var(--app-ink); padding: 8px 10px; border-radius: 7px; font-size: 13px; display: flex; gap: 8px; align-items: center; cursor: pointer; }
.mod-menu button:hover, .mod-menu button:focus-visible { background: var(--app-panel-2); outline: none; }
.mod-menu button[data-act="close"] { color: #ff9d90; }
.mod-menu .mm-head { font-size: 12px; font-weight: 600; padding: 6px 10px 2px; } .mod-menu .mm-group { font-size: 11px; color: var(--app-muted); text-transform: uppercase; letter-spacing: .04em; padding: 8px 10px 2px; } .mod-menu .mm-none { padding: 6px 10px; font-size: 13px; margin: 0; }
.dash-sect { grid-column: 1 / -1; margin: 8px 0 -4px; font-size: 12.5px; font-family: Poppins, sans-serif; text-transform: uppercase; letter-spacing: .05em; color: var(--app-ink-2); } .dash-sect span { text-transform: none; letter-spacing: 0; font-family: inherit; font-weight: 400; color: var(--app-muted); margin-left: 8px; font-size: 12px; }
.dash-connect { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 18px; padding: 16px 20px; border-radius: 14px; border: 1px solid var(--app-accent); border-left-width: 5px; background: linear-gradient(135deg, color-mix(in srgb, var(--app-accent) 16%, transparent), color-mix(in srgb, var(--app-accent) 4%, transparent)), var(--app-panel); }
.dash-connect .dc-ic { font-size: 26px; } .dash-connect .dc-t { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 3px; } .dash-connect .dc-t b { font-size: 16px; font-family: Poppins, sans-serif; font-weight: 600; } .dash-connect .dc-t span { color: var(--app-ink-2); font-size: 13px; }
.dash-connect .dc-btns { display: flex; gap: 8px; flex-wrap: wrap; } .dash-connect .btn .mk { margin-right: 6px; }
.mod-tools { display: flex; justify-content: flex-end; margin: -4px 0 -2px; } .mod-cat { max-width: 220px; font-size: 12px; padding: 4px 8px; border-radius: 7px; border: 1px solid var(--app-line); background: var(--app-panel-2); color: var(--app-ink); }
.mod-scroll { overflow-x: auto; }
.mod-table td.t { max-width: 360px; } .mod-table td.t a { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-width: 0; } .mod-table td.t a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mod-table td.t a:hover span { color: var(--app-accent); }
.mod-table td.dim, .mod .dim { color: var(--app-muted); } .mod-table td.good { color: var(--app-accent); } .mod-table td.bad { color: #ff7a6b; }
.mod-img { width: 30px; height: 30px; border-radius: 6px; object-fit: contain; background: #fff; flex: none; display: inline-block; } span.mod-img { background: var(--app-panel-2); }
.mod-row .t b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mod-row .t small { display: block; color: var(--app-muted); font-size: 11.5px; white-space: normal; } a.mod-row .t, .mod-row a.t { color: inherit; text-decoration: none; }
.mod-track { white-space: nowrap; } .mod-track.on { color: var(--app-accent); border-color: var(--app-accent); }
.tint { font-size: 11px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: var(--app-panel-2); color: var(--app-ink-2); text-decoration: none; }
.tint.good { background: color-mix(in srgb, var(--app-accent) 12%, transparent); color: var(--app-accent); } .tint.warn { background: rgba(240,168,58,.12); color: #d9a24a; } .tint.bad { background: rgba(255,122,107,.12); color: #ff8f80; }
.nscore { display: flex; align-items: center; gap: 8px; width: 140px; flex: none; } .nscore .bar { flex: 1; height: 7px; border-radius: 4px; background: var(--app-panel); overflow: hidden; } .nscore .bar i { display: block; height: 100%; background: var(--app-accent); } .nscore b { width: 26px; text-align: right; }
.mod-spark { width: 90px; height: 26px; color: var(--app-muted); display: block; } .mod-spark.up { color: var(--app-accent); } .mod-spark.down { color: #ff7a6b; }
.tt-tag { color: #ff6f9f; }
/* Getting started */
.wl { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 24px; }
.wl-intro h3 { font-family: Poppins, sans-serif; font-size: 19px; margin: 0 0 8px; } .wl-intro p { margin: 0 0 14px; color: var(--app-ink-2); font-size: 13.5px; } .wl-intro .wl-help { margin-top: 14px; font-size: 12.5px; } .wl-intro a { color: var(--app-accent); }
.wl-prog { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--app-muted); white-space: nowrap; } .wl-bar { flex: 1; min-width: 80px; height: 6px; border-radius: 3px; background: var(--app-panel-2); overflow: hidden; } .wl-bar i { display: block; height: 100%; background: var(--app-accent); border-radius: 3px; }
.wl-steps { display: flex; flex-direction: column; gap: 8px; }
.wl-step { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--app-line); background: var(--app-panel-2); color: inherit; text-decoration: none; transition: border-color .15s; }
.wl-step:hover { border-color: var(--app-accent); } .wl-step.first { border-color: color-mix(in srgb, var(--app-accent) 55%, transparent); background: color-mix(in srgb, var(--app-accent) 7%, var(--app-panel-2)); }
.wl-n { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--app-line); display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--app-muted); } .wl-step.first .wl-n { border-color: var(--app-accent); color: var(--app-accent); } .wl-step.done .wl-n { background: var(--app-accent); border-color: var(--app-accent); color: #14181b; }
.wl-t b { display: block; font-size: 13.5px; } .wl-t small { color: var(--app-muted); font-size: 12px; } .wl-step.done .wl-t b { color: var(--app-muted); text-decoration: line-through; }
.wl-go { color: var(--app-accent); font-weight: 600; font-size: 12.5px; white-space: nowrap; } .wl-step.done .wl-go { color: var(--app-muted); font-weight: 400; }
.wl-strip { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .wl-strip .wl-prog { width: 220px; } .wl-next { flex: 1; color: var(--app-ink-2); } .wl-next a { color: var(--app-accent); font-weight: 600; }
.wl-dots { display: flex; gap: 6px; } .wl-dots i { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--app-line); display: grid; place-items: center; font-style: normal; font-size: 10px; color: var(--app-muted); } .wl-dots i.ok { background: var(--app-accent); border-color: var(--app-accent); color: #14181b; }
.mod[data-mod="welcome"] { min-height: 0; border-color: color-mix(in srgb, var(--app-accent) 35%, var(--app-line)); }
/* Launch roadmap */
.rm-name { font-size: 13px; color: var(--app-ink-2); margin-top: -4px; }
.rm-road { display: flex; align-items: flex-start; margin: 4px 0; }
.rm-ms { flex: 1; text-align: center; position: relative; font-size: 11.5px; color: var(--app-muted); min-width: 0; }
.rm-ms::before { content: ""; position: absolute; top: 9px; left: -50%; right: 50%; height: 2px; background: var(--app-line); } .rm-ms:first-child::before { display: none; } .rm-ms.done::before, .rm-ms.now::before { background: var(--app-accent); }
.rm-ms i { width: 20px; height: 20px; border-radius: 50%; margin: 0 auto 6px; border: 2px solid var(--app-line); background: var(--app-panel); position: relative; z-index: 1; display: grid; place-items: center; font-size: 10px; font-style: normal; }
.rm-ms.done i { background: var(--app-accent); border-color: var(--app-accent); color: #14181b; } .rm-ms.now i { border-color: var(--app-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-accent) 18%, transparent); }
.rm-ms b { display: block; color: var(--app-ink); font-size: 12px; font-weight: 600; } .rm-ms.now b { color: var(--app-accent); } .rm-ms small { display: block; }
.rm-next { display: flex; flex-direction: column; gap: 4px; } .rm-task { display: flex; gap: 10px; align-items: center; font-size: 13px; } .rm-task .cb { width: 15px; height: 15px; border: 1.5px solid var(--app-line); border-radius: 4px; flex: none; }
@media (max-width: 900px) { .wl { grid-template-columns: 1fr; gap: 14px; } .rm-ms small { display: none; } .dash-connect { padding: 14px; } .nscore { width: 100px; } }
@media (max-width: 600px) { .rm-ms b { font-size: 10.5px; } .wl-strip .wl-prog { width: 100%; } .wl-step { grid-template-columns: 26px 1fr; } .wl-go { grid-column: 2; } }
.mod header .spacer { flex: 1; }
.mod-track { padding: 3px 10px; font-size: 12px; min-height: 0; line-height: 1.4; }
.dash-grid.has-sect { grid-auto-flow: row; }
/* Rows of two with free spots (0.57.0): the board is laid out in order (page-app.js fills every empty half-row with a
   free spot), so no dense packing — a drop lands exactly where it's shown. The spots are invisible until a module is
   dragged; dropping on a wide module shows which side the dragged one will take. */
.dash-grid, .dash-grid.has-sect { grid-auto-flow: row; }
.mod-slot span { pointer-events: none; }
.mod-slot { min-height: 0; border-radius: 14px; border: 2px dashed transparent; display: flex; align-items: center; justify-content: center; color: transparent; font-size: 13px; transition: border-color .15s, background .15s, color .15s; pointer-events: none; }
.dash-grid.drag-on .mod-slot { pointer-events: auto; border-color: var(--app-line); color: var(--app-muted); min-height: 150px; }
.dash-grid.drag-on .mod-slot.over { border-color: var(--app-accent); background: color-mix(in srgb, var(--app-accent) 8%, transparent); color: var(--app-accent); }
.mod.over-left, .mod.over-right { position: relative; transform: none; box-shadow: none; }
.mod.over-left::after, .mod.over-right::after { content: ""; position: absolute; top: 0; bottom: 0; width: 50%; border-radius: 14px; background: color-mix(in srgb, var(--app-accent) 14%, transparent); box-shadow: inset 0 0 0 2px var(--app-accent); pointer-events: none; }
.mod.over-left::after { left: 0; } .mod.over-right::after { right: 0; }
@media (max-width: 900px) { .mod-slot { display: none; } }

/* ---- Loading bars (0.55.2): every .spin becomes a bar that fills, with its % (shell.js Loader). The old spinner
   rules (sizes, borders, rotation) are overridden wherever a spinner sat. ---- */
.spin.pl-load { display: inline-flex !important; align-items: center; gap: 7px; width: auto !important; height: auto !important; border: 0 !important; border-radius: 0 !important; animation: none !important; background: none !important; margin: 0 8px 0 0; vertical-align: middle; font-style: normal; white-space: nowrap; flex: none; }
.pl-load .pl-bar { position: relative; display: inline-block; width: 72px; height: 6px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--app-accent) 16%, transparent); }
.pl-load .pl-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: var(--app-accent); transition: width .15s linear; }
.pl-load .pl-pct { font-size: 12px; font-weight: 600; color: var(--app-accent); font-variant-numeric: tabular-nums; min-width: 2.6em; }
.pl-load .pl-of { font-size: 12px; color: var(--app-muted); } .pl-load .pl-of:empty, .pl-load .pl-ldnote:empty { display: none; }
.pl-load .pl-ldnote { font-size: 12px; color: #d9a24a; }
.spin.sm.pl-load .pl-bar { width: 36px; height: 4px; } .spin.sm.pl-load .pl-pct { font-size: 10.5px; min-width: 2.3em; }
.btn .spin.pl-load .pl-bar, .pl-btn .spin.pl-load .pl-bar { width: 40px; background: rgba(255,255,255,.25); } .btn .spin.pl-load .pl-bar i, .pl-btn .spin.pl-load .pl-bar i { background: currentColor; } .btn .spin.pl-load .pl-pct, .pl-btn .spin.pl-load .pl-pct { color: inherit; }
.statwait .spin.pl-load .pl-bar { width: 140px; height: 8px; border-radius: 4px; }
.pl-box { display: flex; align-items: center; gap: 10px; padding: 14px 2px; color: var(--app-muted); font-size: 13px; }
.pl-box .spin.pl-load .pl-bar { width: min(220px, 40vw); height: 8px; border-radius: 4px; } .pl-box .spin.pl-load .pl-bar i { border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .pl-load .pl-bar i { transition: none; } }
.mod-wait { min-height: 60px; }

/* ---- Results take the screen (0.55.2): shell.js foldOnScroll folds what's above the results ---- */
.rs-anim { transition: max-height .22s ease, opacity .18s ease, margin .22s ease, padding .22s ease; }
.rs-hide { opacity: 0; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; border-top-width: 0 !important; border-bottom-width: 0 !important; pointer-events: none; }
.kwwrap { transition: max-height .22s ease; }
.content.rs-folded .kwpage { gap: 0; }
.content.rs-folded .kwwrap { max-height: calc(calc(100vh / var(--zoom, 1)) - var(--topbar-h, 64px) - 44px); }
.content.rs-folded .kwres { margin-top: 0; }
/* The product database: the source switcher above, the results' header, the glance bars and the "Show filters" tab
   fold; the results box grows into the room (the 46 px the switcher took). */
.mode-results .dbresults .sec { transition: height .22s ease; }
.content.rs-folded .mode-results .dbresults .sec { height: calc(calc(100vh / var(--zoom, 1)) - var(--dbtop, 68px) - 28px - 32px); } /* (32: the room kept for the filters tab, 0.59.5) */
.mode-results .filter-handle { transition: opacity .18s ease, visibility .18s; }
/* 0.59.5 (Lewis: "Show/hide filter button should always be visible, even after folding"): folded, the tab stays,
   smaller, with room left for it above the results. */
.content.rs-folded .mode-results .filter-tab { padding: 4px 18px 5px; gap: 2px; font-size: 13px; }
.content.rs-folded .mode-results .dbresults { padding-top: 32px; transition: padding .22s ease; }

/* Admin · Live now (0.57.2): a small bar line of searches a minute, and the signs of automation as faint tints. */
.lv-spark { display: inline-flex; align-items: flex-end; gap: 1px; height: 18px; width: 64px; margin-left: 6px; vertical-align: middle; }
.lv-spark i { flex: 1; min-height: 1px; background: color-mix(in srgb, var(--app-accent) 55%, transparent); border-radius: 1px; }
.lv-flag { display: inline-block; font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, #e8971e 14%, transparent); color: var(--app-ink); border: 1px solid color-mix(in srgb, #e8971e 35%, transparent); white-space: nowrap; margin: 1px 0; }
.lv-spark.lg { width: 110px; height: 22px; margin: 0 6px 0 0; }

/* Sorting by a click on a column title (0.58.0): every table's titles show they can be clicked; ▲/▼ on the sorted one. */
table:not([data-nosort]) thead th { cursor: pointer; }
table:not([data-nosort]) thead th:hover { color: var(--app-accent); }
table[data-nosort] thead th, thead th[data-nosortcol], thead th:empty { cursor: default; }
thead th.sorted, thead th.on { color: var(--app-accent); }
thead th .sortmark { font-size: 9px; margin-left: 4px; font-weight: 600; }
.sortnote { margin: 6px 0; }
.sortnote .limitnote { margin: 0; }
.srcswitch .lockico { width: 12px; height: 12px; margin-right: 4px; vertical-align: -2px; }
.pronote { margin: 0 0 8px; }


/* TikTok Shop: the last step after TikTok's Authorize (0.59.0) — one big centred card that can't be missed. */
.ttfinish { display: flex; justify-content: center; padding: 40px 16px 60px; }
.ttf-card { width: 100%; max-width: 620px; text-align: center; padding: 36px 32px 30px; border-radius: 18px; background: var(--app-panel); border: 2px solid var(--app-accent); box-shadow: 0 0 0 6px rgba(63,191,168,.10), 0 20px 50px rgba(0,0,0,.30); }
.ttf-steps { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--app-muted); margin-bottom: 22px; }
.ttf-steps .done { color: var(--app-accent); }
.ttf-steps .done::before { content: "✓ "; }
.ttf-steps .now { color: var(--app-ink); font-weight: 700; }
.ttf-icon { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; font-weight: 700; color: #fff; background: var(--app-accent); }
.ttf-card h2 { margin: 0 0 10px; font-size: 24px; line-height: 1.25; color: var(--app-ink); }
.ttf-card p { margin: 0 auto 10px; max-width: 480px; color: var(--app-ink-2); font-size: 14.5px; line-height: 1.5; }
.ttf-go { display: block; width: 100%; max-width: 420px; margin: 22px auto 8px; padding: 18px 24px; border: 0; border-radius: 12px; font: inherit; font-size: 18px; font-weight: 700; color: #fff; background: var(--app-accent); cursor: pointer; animation: ttfpulse 1.8s ease-in-out infinite; }
.ttf-go:hover { filter: brightness(1.08); }
.ttf-go:disabled { opacity: .6; cursor: default; animation: none; }
@keyframes ttfpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(63,191,168,.45); } 50% { box-shadow: 0 0 0 12px rgba(63,191,168,0); } }
@media (prefers-reduced-motion: reduce) { .ttf-go { animation: none; } }
.ttf-later { display: inline-block; margin-top: 6px; font-size: 13px; color: var(--app-muted); }
/* The fold switch in the top bar (shell.js foldOnScroll, 0.59.5), at the size of the bar's other buttons; in the Mac
   app (no top bar) a small button at the top right. */
.topbar .topactions .rs-toggle { padding: 8px 14px; font-size: 14px; }
.rs-toggle.rs-float { position: fixed; top: 10px; right: 16px; z-index: 50; padding: 6px 12px; font-size: 12.5px; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.rs-toggle[aria-pressed="true"] { color: var(--app-accent); }
/* The fold hint (0.59.10): faint words beside the switch while folded; the arrow alone once it has been seen 5 times. */
.rs-hint { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; padding: 4px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--app-muted); font: inherit; font-size: 12.5px; line-height: 1; white-space: nowrap; cursor: pointer; animation: rs-hint-in .25s ease; }
.rs-hint[hidden] { display: none; }
.rs-hint:hover { color: var(--app-ink); background: rgba(127,127,127,.12); }
.rs-hint svg { flex: none; }
.rs-hint.rs-hint-mini span { display: none; }
.rs-hint.rs-hint-mini { padding: 4px 5px; }
.rs-hint.rs-float { position: fixed; top: 14px; z-index: 50; margin: 0; }
@keyframes rs-hint-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .rs-hint span { display: none; } }
/* Keywords & niches: the common words, the filters and the actions in one line (0.59.4, Lewis: "this should also be all
   in one line"). The common words give way first (as many as fit, then Show All); Show All opens them on a line of
   their own above. */
.kwtools.oneline { flex-wrap: nowrap; justify-content: flex-start; gap: 10px; }
.kwtools.oneline > .kwfreq { flex: 1 1 0; min-width: 150px; margin: 0; flex-wrap: nowrap; gap: 6px; overflow: hidden; }
.kwtools.oneline > .kwfreq .lbl { font-size: 12px; color: var(--app-muted); }
.kwtools.oneline > .kwfreq .kfchips { display: flex; gap: 5px; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.kwtools.oneline > .kwfreq:not(.open) .morewrap { display: none; }
.kwtools.oneline .kwf { flex: none; flex-wrap: nowrap; }
.kwtools.oneline .kwa { flex: none; margin-left: 0; }
.kwtools.oneline:has(> .kwfreq.open) { flex-wrap: wrap; }
.kwtools.oneline > .kwfreq.open { flex: 1 1 100%; flex-wrap: wrap; overflow: visible; }
.kwtools.oneline > .kwfreq.open .kfchips { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.kwtools.oneline > .kwfreq.open .morewrap { display: contents; }
/* The four filters as on/off pills (the tick box is kept for the keyboard, out of sight). */
.kwtools.oneline .chk { position: relative; padding: 4px 10px; border: 1px solid var(--app-line); border-radius: 999px; font-size: 12px; white-space: nowrap; user-select: none; }
.kwtools.oneline .chk input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.kwtools.oneline .chk:hover { border-color: var(--app-accent); }
.kwtools.oneline .chk:has(input:checked) { background: color-mix(in srgb, var(--app-accent) 18%, transparent); border-color: var(--app-accent); color: var(--app-ink); }
.kwtools.oneline .chk:has(input:focus-visible) { outline: 2px solid var(--app-accent); outline-offset: 2px; }
.kwtools.oneline #kq { width: 140px; }
/* "Copy selected" shows once a phrase is ticked (it does nothing before); tighter gaps keep the line in one. */
.kwtools.oneline #kcopysel:disabled { display: none; }
.kwtools.oneline, .kwtools.oneline .kwf, .kwtools.oneline .kwa { gap: 7px; }
.kwtools.oneline > .kwfreq { min-width: 0; }
.kwtools.oneline > .kwfreq .lbl { flex: none; white-space: nowrap; }
.kwtools.oneline > .kwfreq .chipbtn { flex: none; }
.kwtools.oneline #kq { width: 120px; }
/* Too little room for the label and two words: only the "Common words (n)" button. */
.kwtools.oneline > .kwfreq { container-type: inline-size; }
.kwtools.oneline > .kwfreq .cw-short { display: none; }
.kwtools.oneline > .kwfreq .chipbtn.few { display: none; }
@container (max-width: 230px) {
  .kwtools.oneline > .kwfreq:not(.open) .lbl, .kwtools.oneline > .kwfreq:not(.open) .kfchips, .kwtools.oneline > .kwfreq .cw-all { display: none; }
  .kwtools.oneline > .kwfreq .cw-short { display: inline; }
  .kwtools.oneline > .kwfreq .chipbtn.few { display: inline-flex; }
}
/* Keywords & niches (0.59.5, Lewis: "when the window get smaller the buttons cut off and there is no way to read them,
   also, those buttons are too small to read. make all the buttons the size of the Log out button"): every button,
   pill, box and menu of the results at the top bar's size (14 px, 8 × 14 padding); the line wraps when the window is
   too narrow, rather than cutting anything off. */
#results.kwres > header .btn, #results .kwtools .btn, #results .kwtools #kcols, #results .kwtools .chipbtn, #results .kwpager .btn,
#results .kwtools.oneline .chk, #results .kwtools select, #results .kwtools input { font-size: 14px; padding: 8px 14px; line-height: 1.6; min-height: 0; height: auto; }
#results .kwtools .btn, #results .kwtools #kcols, #results .kwtools select, #results .kwtools input, #results .kwpager .btn, #results.kwres > header .btn { border-radius: 10px; }
#results .kwtools .kwpi .btn { padding: 8px 12px; }
#results .kwtools .ib#kwhow { width: 36px; height: 36px; font-size: 15px; }
#results .kwtools .dim, #results .kwpager { font-size: 14px; }
#results .kwtools.oneline { flex-wrap: wrap; row-gap: 8px; }
#results .kwtools.oneline .kwf, #results .kwtools.oneline .kwa { flex-wrap: wrap; row-gap: 8px; }
#results .kwtools.oneline .kwa { margin-left: auto; }
#results .kwtools.oneline #kq { width: 170px; }
#results .kwtools.oneline > .kwfreq .chip { font-size: 13px; padding: 4px 10px; }
#results .kwtools select { height: 36px; padding-top: 0; padding-bottom: 0; }
/* Only whole common words: those that don't fit wrap onto a hidden second row (no word cut in half). */
#results .kwtools.oneline > .kwfreq:not(.open) .kfchips { flex-wrap: wrap; align-content: flex-start; max-height: 30px; overflow: hidden; -webkit-mask-image: none; mask-image: none; }
#results .kwtools.oneline > .kwfreq.open .kfchips { max-height: none; }
/* One line when it fits, wrapped when it doesn't, never cut off (0.59.5): the search row, the seeds compared, the
   Social demand line, and room for the "Common words (n)" button. */
.kwsearchcard .kwsearch { flex-wrap: wrap; }
.kwsearchcard .kwsearch > input { flex: 1 1 220px; min-width: 0; }
.kwcmp { flex-wrap: wrap; row-gap: 8px; overflow-x: visible; white-space: normal; }
.kwcmp .kc-t, .kwcmp .kc-seeds { white-space: nowrap; }
.icard.sdc { flex-wrap: wrap; row-gap: 6px; overflow-x: visible; white-space: normal; }
.icard.sdc > * { white-space: nowrap; }
#results .kwtools.oneline > .kwfreq { min-width: 175px; }
/* Reading › Needs attention: when it is happening (0.59.5). */
.rd-when { margin-top: 8px; display: grid; gap: 6px; }
.rd-when .rd-since { font-size: 12.5px; color: var(--app-ink); }
.rd-when .lbl { display: inline-block; min-width: 76px; font-size: 11px; color: var(--app-muted); text-transform: uppercase; letter-spacing: .4px; }
.rd-hours { display: flex; align-items: flex-end; gap: 8px; }
.rd-hours .bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 32px; padding-bottom: 1px; border-bottom: 1px solid var(--app-line); }
.rd-hours .bars i { display: block; width: 7px; border-radius: 2px 2px 0 0; background: color-mix(in srgb, var(--app-accent) 70%, transparent); }
.rd-hours .bars i.low { background: #e5a33a; } .rd-hours .bars i.nil { background: var(--app-line); }
.rd-days { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; color: var(--app-ink-2); }
.rd-days span:not(.lbl) { display: inline-flex; gap: 4px; white-space: nowrap; margin-top: 0; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--app-line); }
.rd-days span.low { border-color: #e5a33a; color: var(--app-ink); }
.rd-days b { font-weight: 600; }
.rd-row .rd-n .rd-note { display: block; font-size: 11.5px; color: var(--app-muted); margin-top: 2px; } /* "Removed by Amazon": the why, under the name (0.59.8) */