:root {
--bg: #ffffff;
--bg-muted: #fafafa;
--bg-hover: #f3f4f6;
--border: #e5e7eb;
--border-strong: #d1d5db;
--text: #111827;
--text-muted: #6b7280;
--text-soft: #9ca3af;
--accent: #2563eb;
--accent-soft: #eff6ff;
--app-nudge-bg: var(--accent-soft); /* light blue, same as the rest of the app — backdrop for every "get the Mac app" nudge */
--app-nudge-border: rgba(37, 99, 235, 0.15); /* faint blue edge */
--danger: #dc2626;
--success: #16a34a;
--warning: #d97706;
--radius: 10px;
--radius-sm: 6px;
--shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.04);
--font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* Authentic Instagram brand gradient — used ONLY by the IG account finder
so that one feature reads unmistakably as "Instagram, separate tool". */
--ig-gradient: linear-gradient(45deg, #feda75 0%, #fa7e1e 24%, #d62976 52%, #962fbf 76%, #4f5bd5 100%);
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
background: var(--bg);
color: var(--text);
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
.app-shell {
display: flex;
/* Viewport-locked shell: each pane (sidebar, content) owns its own
scroll. Without a fixed height the whole page would scroll and the
sidebar's single-scroll behaviour below couldn't work. */
height: 100vh;
overflow: hidden;
}
/* Sidebar */
.sidebar {
width: 256px;
flex-shrink: 0;
border-right: 1px solid var(--border);
background: var(--bg-muted);
display: flex;
flex-direction: column;
padding: 20px 14px;
/* ONE overall scroll for the whole sidebar. Sections inside never
scroll on their own — they just grow as topics/creators are added
and the entire sidebar scrolls as a single unit. */
overflow-y: auto;
overflow-x: hidden;
}
.brand {
display: flex;
align-items: center;
gap: 10px;
padding: 4px 8px 18px;
text-decoration: none;
color: inherit;
}
.brand:hover .brand-name {
color: var(--accent);
}
.sidebar-section-title {
text-decoration: none;
color: var(--text-soft);
}
.sidebar-section-title:hover {
color: var(--text);
}
.brand-dot {
width: 10px;
height: 10px;
border-radius: 50%;
/* background: var(--accent); — V2 blue; V3 brand = the pink→orange icon gradient */
background: linear-gradient(135deg, #ff0090 0%, #ff4b3c 50%, #ff8200 100%);
flex-shrink: 0;
}
/* Pulses only while work is in flight. Idle = solid accent (never
grey — the dot is a "the app is alive" signal, not a job indicator). */
.brand-dot.is-busy {
animation: brand-dot-pulse 1.2s ease-in-out infinite;
}
@keyframes brand-dot-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(0.7); opacity: 0.55; }
}
/* Brand name + status sit on a single line, like "Randm.Reels Watching".
Status borrows the brand-name's size for visual continuity but stays
regular-weight + muted so the eye lands on the name first. */
.brand-text {
display: flex;
flex-direction: row;
align-items: baseline;
gap: 6px;
min-width: 0;
}
.brand-name {
font-weight: 600;
font-size: 15px;
letter-spacing: -0.01em;
/* Never wrap and never give up width to the status — the channel mark below
sits on the same line and the status is what ellipsizes. */
white-space: nowrap;
flex-shrink: 0;
}
/* In the narrow sidebar the channel label is a superscript in the brand
gradient, not a pill — a pill wrapped under the name and ate the status. */
.brand-name .badge-channel {
background: linear-gradient(135deg, #ff0090 0%, #ff4b3c 50%, #ff8200 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
padding: 0;
margin-left: 2px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.03em;
vertical-align: 6px;
display: inline;
}
.brand-status {
font-size: 15px;
font-weight: 400;
color: var(--text-soft);
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.brand-status.is-busy {
color: var(--accent);
}
.brand-status.is-link {
cursor: pointer;
}
.sidebar-section {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 14px;
}
.sidebar-section-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 12px;
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-soft);
font-weight: 600;
}
.sidebar-section-title {
user-select: none;
}
.sidebar-new {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--accent);
border: 1px solid var(--accent);
color: #fff;
text-decoration: none;
line-height: 1;
transition: background-color 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease;
box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25);
}
.sidebar-new svg {
width: 12px;
height: 12px;
}
.sidebar-new:hover {
background: #1d4ed8;
border-color: #1d4ed8;
box-shadow: 0 2px 4px rgba(37, 99, 235, 0.35);
}
.sidebar-new:active {
transform: scale(0.95);
}
/* Topics / Watchlist grow with their content — no internal scroll, no
space-splitting. A hairline rule + extra top padding splits them away
from the section above so they read as distinct sections instead of
one long blurred list. The whole sidebar (.sidebar) is the single
scroll container; these just get taller as rows are added. */
.sidebar-section-grow {
border-top: 1px solid var(--border);
padding-top: 18px;
margin-top: 6px;
}
.topics-list {
display: flex;
flex-direction: column;
gap: 0;
padding-right: 2px;
}
/* Hairline divider between consecutive (non-active) topic rows. Looks
like a subtle group inside the sidebar instead of a wall of text;
the active row sits on the accent-soft background so it visually
stands out without needing the divider. */
.topics-list .topic-row + .topic-row {
border-top: 1px solid var(--border);
}
.topics-list .topic-row.is-active,
.topics-list .topic-row.is-active + .topic-row {
border-top-color: transparent;
}
.sidebar-empty {
padding: 8px 12px;
font-size: 12px;
color: var(--text-soft);
font-style: italic;
}
.topic-row {
display: flex;
flex-direction: column;
gap: 2px;
padding: 9px 10px;
/* No corner radius: the row-to-row hairline (border-top below) is
drawn on this box, so a radius made the divider ends curve. Flush
rows = straight dividers. */
border-radius: 0;
border-top: 1px solid transparent; /* keeps height stable when divider toggles on/off */
color: var(--text);
text-decoration: none;
font-size: 13px;
transition: background-color 0.1s ease;
}
.topic-row:hover {
background: var(--bg-hover);
}
.topic-row.is-active {
background: var(--accent-soft);
color: var(--accent);
}
.topic-row-title {
display: flex;
align-items: center;
gap: 6px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.topic-row-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
flex-shrink: 0;
color: var(--text-soft);
}
.topic-row-icon svg {
width: 14px;
height: 14px;
}
.topic-row.is-active .topic-row-icon {
color: var(--accent);
}
.topic-row-title-text {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.topic-row-meta {
font-size: 11px;
color: var(--text-soft);
font-weight: 400;
}
.topic-row.is-active .topic-row-meta {
color: var(--accent);
opacity: 0.7;
}
.topic-mini-badge {
display: inline-flex;
align-items: center;
padding: 0 5px;
border-radius: 999px;
background: var(--bg-hover);
color: var(--text-muted);
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.5;
}
.topic-mini-badge.is-paused {
background: #fef3c7;
color: #92400e;
}
/* "+N new since you last opened this topic" — the most actionable
signal in the list, so it borrows the accent so the eye lands on
topics that have fresh videos waiting. */
.topic-mini-badge.is-new {
background: var(--accent-soft);
color: var(--accent);
}
/* Schedule line under the query: "every 6h · in 3h" / "· due now" /
"· paused". Same muted treatment as the query meta line. */
.topic-row-sched {
font-size: 11px;
color: var(--text-soft);
font-weight: 400;
}
.topic-row.is-active .topic-row-sched {
color: var(--accent);
opacity: 0.7;
}
/* Drag-to-reorder + live scrape indicator (sidebar). The row becomes a
[grip | body] flex; the body keeps the original stacked layout. */
.topic-row {
flex-direction: row;
align-items: flex-start;
gap: 7px;
cursor: grab;
}
.topic-row-grip {
flex-shrink: 0;
width: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 1px;
font-size: 11px;
line-height: 1;
letter-spacing: -1px;
color: var(--text-soft);
opacity: 0.45;
cursor: grab;
user-select: none;
}
.topic-row:hover .topic-row-grip {
opacity: 0.8;
}
.topic-row-body {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
.topic-row.is-dragging {
opacity: 0.45;
cursor: grabbing;
background: var(--bg-hover);
}
.topic-row-sched.is-scraping {
display: flex;
align-items: center;
gap: 5px;
color: var(--accent);
font-weight: 600;
}
.topic-row-sched .scrape-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
animation: brand-dot-pulse 1s ease-in-out infinite;
}
.nav {
display: flex;
flex-direction: column;
gap: 6px;
}
/* Tools are explicit buttons: a raised white surface with a border and
shadow — deliberately unlike the flat, borderless topic rows below,
so the two sections never read as one continuous list. */
.nav-item {
display: flex;
align-items: center;
padding: 9px 12px;
border-radius: var(--radius-sm);
background: var(--bg);
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
color: var(--text);
text-decoration: none;
font-weight: 500;
font-size: 13.5px;
transition: background-color 0.1s ease, color 0.1s ease,
border-color 0.1s ease, box-shadow 0.1s ease, transform 0.05s ease;
}
.nav-item:hover {
background: var(--bg-hover);
border-color: var(--border-strong);
color: var(--text);
}
.nav-item:active {
transform: translateY(1px);
box-shadow: none;
}
.nav-item.is-active {
background: var(--accent-soft);
border-color: var(--accent);
color: var(--accent);
}
.sidebar-footer {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 1px;
padding-top: 8px;
border-top: 1px solid var(--border);
}
/* Empty in local mode (no account) — don't leave a stray divider line. */
.sidebar-footer:empty {
display: none;
}
/* Hosted: signed-in identity + sign-out, sitting quietly under the nav. */
.account-email {
padding: 2px 12px 4px;
font-size: 11.5px;
line-height: 1.2;
color: var(--text-soft);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.account-logout {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
padding: 8px 12px;
border: 0;
background: none;
color: var(--text-muted);
font-family: inherit;
font-size: 13px;
font-weight: 500;
border-radius: var(--radius-sm);
cursor: pointer;
text-align: left;
transition: background-color 0.12s ease, color 0.12s ease;
}
.account-logout:hover {
background: var(--bg-hover);
color: var(--danger);
}
.account-logout:active {
transform: translateY(0.5px);
}
.account-logout svg {
width: 15px;
height: 15px;
flex: none;
opacity: 0.85;
}
/* Main */
.main {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
.topbar {
height: 56px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 28px;
background: var(--bg);
}
.topbar-title {
font-size: 15px;
font-weight: 600;
}
.topbar-status {
display: flex;
align-items: center;
gap: 10px;
color: var(--text-muted);
font-size: 12.5px;
}
/* (Activity indicator moved to the sidebar brand area — see .brand-dot
and .brand-status above. The topbar chip is gone.) */
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--text-soft);
}
.status-dot.is-ok {
background: var(--success);
}
.status-dot.is-err {
background: var(--danger);
}
.topbar-right {
display: flex;
align-items: center;
gap: 14px;
}
/* Global preview-sound toggle — a quiet icon button next to the status. Muted
(gray) by default; accent when sound is on. */
.sound-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: none;
color: var(--text-soft);
cursor: pointer;
transition: color 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}
.sound-toggle:hover { color: var(--text); background: var(--bg-hover); }
.sound-toggle.is-on { color: var(--accent); }
/* Impersonation strip — fixed at the top while an admin is "viewing as" someone;
the shell shifts down so nothing hides under it. */
#impersonation-banner {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 34px;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
background: var(--accent);
color: #fff;
font-size: 13px;
padding: 0 16px;
}
#impersonation-banner button {
font: inherit;
font-size: 12px;
font-weight: 600;
padding: 3px 12px;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 999px;
background: rgba(255, 255, 255, 0.15);
color: #fff;
cursor: pointer;
}
#impersonation-banner button:hover { background: rgba(255, 255, 255, 0.28); }
body.is-impersonating .app-shell { height: calc(100vh - 34px); margin-top: 34px; }
.content {
flex: 1;
padding: 28px;
/* Vertical scroll only. If this were `overflow: auto` the whole
content pane (topic head, stat tiles, scrape-state) would scroll
sideways together with the wide videos table on narrow screens —
"разъезжается". Horizontal overflow is owned exclusively by
`.vt-scroll` so only the table moves. */
overflow-y: auto;
overflow-x: hidden;
min-width: 0;
}
/* Page header */
.page-header {
margin-bottom: 24px;
}
.page-title {
font-size: 22px;
font-weight: 600;
margin: 0 0 6px;
letter-spacing: -0.01em;
}
.page-subtitle {
color: var(--text-muted);
font-size: 13.5px;
margin: 0;
}
/* Empty state */
.empty {
border: 1px dashed var(--border-strong);
border-radius: var(--radius);
padding: 40px 28px;
text-align: center;
color: var(--text-muted);
background: var(--bg-muted);
}
.empty-title {
font-weight: 600;
color: var(--text);
margin-bottom: 6px;
}
/* Form */
.card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 22px 24px;
box-shadow: var(--shadow-sm);
max-width: 720px;
}
.card + .card {
margin-top: 16px;
}
.card-title {
font-size: 14px;
font-weight: 600;
margin: 0 0 4px;
}
.card-hint {
font-size: 12.5px;
color: var(--text-muted);
margin: 0 0 18px;
}
.field {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 14px;
}
/* Local-only fields (e.g. the per-user Telegram bot token / chat id) are hidden
in hosted, where Telegram is a shared bot + per-workspace bind. */
.field-local-only.is-hidden { display: none; }
.field-label {
font-size: 12.5px;
font-weight: 500;
color: var(--text-muted);
}
.field input {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 13.5px;
font-family: inherit;
background: var(--bg);
color: var(--text);
transition: border-color 0.1s ease, box-shadow 0.1s ease;
}
.field input:focus {
outline: none;
}
body.input-keyboard .field input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.actions {
display: flex;
align-items: center;
gap: 10px;
margin-top: 6px;
}
.btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--text);
font-size: 13px;
font-weight: 500;
cursor: pointer;
font-family: inherit;
text-decoration: none;
line-height: 1.2;
transition: background-color 0.1s ease, border-color 0.1s ease, opacity 0.1s ease, box-shadow 0.1s ease, transform 0.1s ease;
}
.btn-lg {
padding: 11px 22px;
font-size: 14px;
font-weight: 600;
gap: 8px;
}
.btn-lg svg {
width: 14px;
height: 14px;
}
.btn-primary.btn-lg {
box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}
.btn-primary.btn-lg:hover:not(:disabled) {
box-shadow: 0 3px 10px rgba(37, 99, 235, 0.32);
transform: translateY(-1px);
}
.btn:hover:not(:disabled) {
background: var(--bg-hover);
}
.btn-primary {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.btn-primary:hover:not(:disabled) {
background: #1d4ed8;
border-color: #1d4ed8;
}
/* First-run call-to-action: the topic was just created and has no
scrape yet, so "Start scraping" gets a soft pulsing accent ring to
pull the eye. Same brand colour (accent stays reserved for primary
actions) — only the halo signals "do this next". Drops to a normal
primary button the moment there's any scrape history. */
.btn-primary.is-cta {
animation: btn-cta-pulse 1.35s ease-in-out infinite;
}
.btn-primary.is-cta:hover:not(:disabled) {
animation: none;
}
/* Expanding ring + a small lift/brighten so it actually reads as
"press me" across the room, not a barely-there halo. */
@keyframes btn-cta-pulse {
0% {
box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.55);
transform: scale(1);
background: var(--accent);
}
50% {
box-shadow: 0 0 0 12px rgba(37, 99, 235, 0);
transform: scale(1.045);
background: #1d4ed8;
}
100% {
box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
transform: scale(1);
background: var(--accent);
}
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.inline-msg {
font-size: 12.5px;
color: var(--text-muted);
}
.inline-msg.is-ok {
color: var(--success);
}
.inline-msg.is-err {
color: var(--danger);
}
.text-err {
color: var(--danger);
}
/* Spending card */
.cost-headline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg-muted);
}
.cost-headline.is-over {
border-color: var(--danger);
background: #fef2f2;
}
.cost-headline-label {
font-size: 12.5px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 600;
}
.cost-headline-value {
font-size: 20px;
font-weight: 700;
letter-spacing: -0.01em;
}
.cost-headline.is-over .cost-headline-value {
color: var(--danger);
}
.cost-of {
font-size: 13px;
font-weight: 500;
color: var(--text-soft);
}
/* Daily-spend mini chart (inline SVG, stacked Apify + HikerAPI) */
.cost-chart-wrap {
margin: 12px 0 4px;
position: relative;
}
.cost-chart {
display: block;
width: 100%;
height: 84px;
}
.cost-bar-apify { fill: var(--accent); }
.cost-bar-hiker { fill: #f59e0b; }
.cost-bar-sc { fill: #10b981; }
.cost-chart-legend {
display: flex;
align-items: center;
gap: 14px;
margin-top: 4px;
font-size: 11.5px;
color: var(--text-muted);
}
.cost-chart-legend span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.cost-chart-span {
margin-left: auto;
color: var(--text-soft);
}
.cost-dot {
width: 9px;
height: 9px;
border-radius: 2px;
display: inline-block;
}
.cost-dot-apify { background: var(--accent); }
.cost-dot-hiker { background: #f59e0b; }
.cost-dot-sc { background: #10b981; }
.cost-dot-other { background: var(--text-soft); }
/* Transparent full-height hover targets, one per day column. */
.cost-hit {
fill: transparent;
cursor: default;
}
.cost-hit:hover {
fill: var(--accent);
fill-opacity: 0.07;
}
/* Custom hover tooltip over the daily-spend chart. */
.cost-tip {
position: absolute;
z-index: 6;
pointer-events: none;
min-width: 132px;
padding: 7px 9px;
border-radius: 8px;
background: var(--text);
color: #fff;
font-size: 11.5px;
line-height: 1.5;
box-shadow: 0 6px 18px rgba(17, 24, 39, 0.22);
}
.cost-tip[hidden] { display: none; }
.cost-tip-day {
font-weight: 700;
margin-bottom: 3px;
}
.cost-tip-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.cost-tip-row > span {
display: inline-flex;
align-items: center;
gap: 6px;
opacity: 0.85;
}
.cost-tip-row > b { font-variant-numeric: tabular-nums; }
.cost-tip-total {
margin-top: 4px;
padding-top: 4px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
opacity: 1;
}
.cost-table {
width: 100%;
border-collapse: collapse;
margin-top: 12px;
font-size: 13px;
}
.cost-table th,
.cost-table td {
padding: 7px 10px;
text-align: left;
border-bottom: 1px solid var(--border);
}
.cost-table th {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-soft);
font-weight: 600;
}
.cost-table .num {
text-align: right;
font-variant-numeric: tabular-nums;
}
.cost-table tfoot td {
font-weight: 700;
border-bottom: none;
}
.cost-empty {
color: var(--text-soft);
font-style: italic;
}
.cost-limit-field {
margin-top: 16px;
}
.cost-limit-row {
display: flex;
align-items: center;
gap: 10px;
}
.cost-limit-row input {
width: 120px;
}
.cost-limit-row .btn {
flex-shrink: 0;
}
.btn-sm {
padding: 5px 12px;
font-size: 12px;
}
.field-validate {
display: flex;
align-items: center;
gap: 10px;
margin-top: 6px;
}
.tg-subtoggles {
margin: 12px 0 0 34px;
padding-left: 14px;
border-left: 2px solid var(--border);
display: flex;
flex-direction: column;
gap: 10px;
transition: opacity 0.1s ease;
}
.tg-subtoggles.is-disabled {
opacity: 0.45;
}
.danger-card {
border-color: #fecaca;
}
.danger-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.danger-row-title {
font-weight: 600;
font-size: 13.5px;
}
.danger-row-note {
font-size: 12px;
color: var(--text-muted);
margin-top: 2px;
max-width: 520px;
}
.danger-row .btn-danger {
flex-shrink: 0;
}
.danger-divider {
height: 1px;
background: var(--border);
margin: 14px 0;
}
.shutdown-screen {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
height: 100vh;
text-align: center;
font-size: 18px;
font-weight: 600;
color: var(--text);
font-family: var(--font-sans);
}
.shutdown-screen span {
font-size: 13px;
font-weight: 400;
color: var(--text-muted);
}
.muted {
color: var(--text-soft);
}
/* Settings → Scrapers section */
.scraper-row {
display: grid;
grid-template-columns: 44px 1fr;
gap: 14px;
align-items: start;
padding: 12px 0;
border-bottom: 1px solid var(--border);
}
.scraper-row:last-child {
border-bottom: none;
}
.scraper-toggle {
display: inline-flex;
align-items: center;
cursor: pointer;
position: relative;
}
.scraper-toggle input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.scraper-toggle-track {
display: inline-block;
width: 36px;
height: 20px;
border-radius: 999px;
background: var(--bg-hover);
border: 1px solid var(--border);
position: relative;
transition: background-color 0.12s ease, border-color 0.12s ease;
}
.scraper-toggle-knob {
position: absolute;
top: 2px;
left: 2px;
width: 14px;
height: 14px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
transition: transform 0.14s ease;
}
.scraper-toggle input[type="checkbox"]:checked + .scraper-toggle-track {
background: var(--accent);
border-color: var(--accent);
}
.scraper-toggle input[type="checkbox"]:checked + .scraper-toggle-track .scraper-toggle-knob {
transform: translateX(16px);
}
body.input-keyboard .scraper-toggle input[type="checkbox"]:focus + .scraper-toggle-track {
box-shadow: 0 0 0 3px var(--accent-soft);
}
.scraper-body {
display: flex;
flex-direction: column;
gap: 2px;
}
.scraper-title {
font-size: 13.5px;
font-weight: 600;
color: var(--text);
}
.scraper-note {
font-size: 12px;
color: var(--text-muted);
}
.scraper-status {
font-size: 11.5px;
color: var(--text-muted);
margin-top: 4px;
}
/* Downloads */
.downloads-form-card {
max-width: none;
}
.downloads-form {
display: flex;
gap: 10px;
align-items: center;
}
.downloads-form input,
.downloads-form select {
padding: 9px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 13.5px;
font-family: inherit;
background: var(--bg);
color: var(--text);
}
.downloads-form input {
flex: 1;
min-width: 0; /* allow shrink when the form is narrow */
}
/* (.downloads-form select layout lives near the chevron styling
further down, so flex / width / min-width sit alongside the
appearance overrides instead of competing across two blocks.) */
.downloads-form input:focus,
.downloads-form select:focus {
outline: none;
}
body.input-keyboard .downloads-form input:focus,
body.input-keyboard .downloads-form select:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.downloads-list {
margin-top: 22px;
display: grid;
/* Smaller cards — ~5 per row on a normal laptop instead of 3. */
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 14px;
}
.dl-card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: var(--shadow-sm);
}
.dl-media {
position: relative;
display: block;
width: 100%;
/* Vertical-first: most content is 9:16 reels. Let the full portrait
ratio show (the old 360px cap squashed it toward square on wide
cards). The taller cap only kicks in on unusually wide columns. */
aspect-ratio: 9 / 16;
max-height: 460px;
background: #0f172a;
overflow: hidden;
text-decoration: none;
color: inherit;
}
.dl-media.is-clickable {
cursor: pointer;
}
.dl-media img,
.dl-media video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.dl-media video {
opacity: 0;
transition: opacity 0.15s ease;
}
.dl-media.is-hoverable:hover video {
opacity: 1;
}
/* Sits under the cover while it loads — and stays visible when there's no
cover at all (the img removes itself on error), so it must read as "no preview"
rather than a broken black hole: a faint centred image glyph. */
.thumb-placeholder {
position: absolute;
inset: 0;
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}
.thumb-placeholder::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 30px;
height: 30px;
opacity: .3;
background: no-repeat center / contain
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
}
.dl-overlay {
position: absolute;
left: 10px;
top: 10px;
display: flex;
gap: 6px;
flex-wrap: wrap;
max-width: calc(100% - 20px);
}
.dl-status,
.quality-badge,
.platform-badge {
display: inline-flex;
align-items: center;
padding: 3px 9px;
font-size: 10.5px;
font-weight: 600;
border-radius: 999px;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.4;
}
.dl-status {
background: rgba(15, 23, 42, 0.78);
color: #fff;
backdrop-filter: blur(6px);
}
.dl-status.is-done {
background: rgba(22, 163, 74, 0.95);
color: #fff;
}
.dl-status.is-failed {
background: rgba(220, 38, 38, 0.95);
color: #fff;
}
.dl-status.is-active {
background: rgba(37, 99, 235, 0.92);
color: #fff;
}
.quality-badge {
background: rgba(255, 255, 255, 0.85);
color: var(--text);
backdrop-filter: blur(6px);
}
.quality-badge.quality-best {
background: rgba(15, 23, 42, 0.78);
color: #fff;
}
/* Static / carousel downloads: a "photo" / "N slides" badge in the
media overlay, and a clickable slide strip in the card body. */
.dl-kind-badge {
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
background: rgba(15, 23, 42, 0.78);
color: #fff;
backdrop-filter: blur(6px);
}
/* Carousel pager — flip slides inside the preview. The slide img/video
fills the media box via the existing .dl-media img/video rules. */
.dl-car-track {
position: absolute;
inset: 0;
}
.dl-car-track > a {
display: block;
width: 100%;
height: 100%;
}
.dl-car-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
border: none;
border-radius: 999px;
background: rgba(15, 23, 42, 0.55);
color: #fff;
font-size: 18px;
line-height: 1;
cursor: pointer;
z-index: 4;
display: flex;
align-items: center;
justify-content: center;
}
.dl-car-nav:hover {
background: rgba(15, 23, 42, 0.82);
}
.dl-car-prev { left: 8px; }
.dl-car-next { right: 8px; }
.dl-car-count {
position: absolute;
bottom: 8px;
left: 50%;
transform: translateX(-50%);
z-index: 4;
padding: 2px 10px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.72);
color: #fff;
font-size: 11px;
font-weight: 600;
}
.platform-badge {
gap: 5px;
padding-left: 8px;
padding-right: 10px;
color: #fff;
}
.platform-badge svg {
width: 12px;
height: 12px;
flex-shrink: 0;
}
.platform-badge.platform-youtube {
background: #ff0000;
}
.platform-badge.platform-tiktok {
background: #111;
}
.platform-badge.platform-instagram {
background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.platform-badge.platform-unknown {
background: #475569;
}
/* Read-only network tag (topic list cards + detail header) — a quiet
pill with a brand-colored icon. Not interactive. */
.net-tag {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 9px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
background: var(--bg-hover);
color: var(--text-muted);
}
.net-tag svg { width: 12px; height: 12px; flex-shrink: 0; }
.net-tag.platform-tiktok svg { color: #111; }
.net-tag.platform-instagram svg { color: #cc2366; }
/* Icon-only network marker for the sidebar rows. */
.net-mini {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.net-mini svg { width: 13px; height: 13px; }
.net-mini.platform-tiktok svg { color: #111; }
.net-mini.platform-instagram svg { color: #cc2366; }
.dl-body {
flex: 1;
padding: 14px 16px 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.dl-title {
font-size: 16px;
color: var(--text);
font-weight: 600;
line-height: 1.3;
word-break: break-word;
/* No max-height / no auto-shrink: long titles wrap onto extra lines.
Action rows still line up across the row via .dl-card flex layout
and `.dl-actions { margin-top: auto }`. */
}
/* Captions clamp to 2 lines so chatty posts can't blow up the grid row's
height. The "See more" toggle (JS) removes this class to reveal the
full text. */
.dl-title.is-clamped {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.dl-caption-toggle {
align-self: flex-start;
margin-top: -4px;
padding: 0;
border: none;
background: none;
color: var(--accent, #2563eb);
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.dl-caption-toggle:hover { text-decoration: underline; }
.dl-tags {
font-size: 11px;
color: var(--text-muted);
line-height: 1.35;
max-height: 30px;
overflow: hidden;
overflow-wrap: anywhere;
}
.dl-meta-row {
display: flex;
flex-wrap: wrap;
gap: 5px 12px;
font-size: 12px;
color: var(--text-muted);
align-items: center;
}
.dl-meta-item {
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
color: inherit;
text-decoration: none;
}
.dl-meta-item svg {
width: 13px;
height: 13px;
color: var(--text-soft);
flex-shrink: 0;
}
.dl-meta-item.is-link {
color: var(--text);
}
.dl-meta-item.is-link:hover {
color: var(--accent);
}
.dl-meta-item.is-link:hover svg {
color: var(--accent);
}
.dl-error {
font-size: 12px;
color: var(--danger);
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: var(--radius-sm);
padding: 6px 8px;
}
.dl-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: auto;
min-height: 30px;
align-items: flex-end;
}
.dl-actions .btn {
padding: 6px 12px;
font-size: 12.5px;
}
.btn-ghost-danger {
color: var(--danger);
}
.btn-ghost-danger:hover:not(:disabled) {
background: #fef2f2;
border-color: #fecaca;
}
.btn-danger {
background: var(--danger);
border-color: var(--danger);
color: #fff;
}
.btn-danger:hover:not(:disabled) {
background: #b91c1c;
border-color: #b91c1c;
}
/* Modal */
.app-modal-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.48);
backdrop-filter: blur(2px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
animation: app-modal-fade 0.12s ease-out;
}
@keyframes app-modal-fade {
from { opacity: 0; }
to { opacity: 1; }
}
.app-modal {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
width: 100%;
max-width: 420px;
margin: 0 24px;
padding: 22px 24px 18px;
animation: app-modal-pop 0.14s ease-out;
}
@keyframes app-modal-pop {
from { transform: translateY(6px) scale(0.98); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
.app-modal-title {
font-size: 20px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--text);
}
.app-modal-body {
margin-top: 8px;
font-size: 13.5px;
color: var(--text-muted);
line-height: 1.45;
/* Honour explicit \n in the message string — used to break the refresh
confirmation into a few scannable lines instead of a wall of text. */
white-space: pre-line;
}
/* Optional label/value list used in confirm dialogs that summarise a
paid action (refresh, etc). Label sits muted, value is bold and
inherits the body text colour so the value is what your eye lands
on first. */
.app-modal-details {
margin: 12px 0 0;
display: flex;
flex-direction: column;
gap: 4px;
font-size: 13.5px;
line-height: 1.5;
}
.app-modal-detail {
display: flex;
gap: 6px;
align-items: baseline;
}
.app-modal-detail dt {
color: var(--text-muted);
font-weight: 400;
margin: 0;
}
.app-modal-detail dd {
margin: 0;
color: var(--text);
font-weight: 600;
}
.app-modal-actions {
margin-top: 20px;
display: flex;
justify-content: flex-end;
gap: 8px;
}
.app-modal-title.is-danger {
color: var(--danger);
}
/* groupDialog: name input + colour palette. The input matches the standard
.field input (same border/size/colour) so it doesn't read as a foreign box. */
.app-modal-input {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 13.5px;
font-family: inherit;
color: var(--text);
background: var(--bg);
margin-bottom: 14px;
}
.app-modal-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.app-modal-swlabel { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
color: var(--text-soft); margin: 0 2px 9px; }
/* Exactly the group-header edit popover's swatches (.wlg-sw): 32px, left-aligned,
wrapping — 15 of them read as two tidy rows. Don't reinvent the size. */
.app-modal-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.app-modal-swatch {
width: 32px; height: 32px; flex: none;
border-radius: 6px; border: 1px solid rgba(15, 23, 42, 0.1);
padding: 0; cursor: pointer; transition: transform 0.1s;
}
.app-modal-swatch:hover { transform: scale(1.06); }
.app-modal-swatch.is-active { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
/* Watchlist groups in the sidebar: collapsible coloured sections. Headers are
also drag-drop targets ("file this creator here"). */
.wl-group-head {
display: flex;
align-items: center;
gap: 7px;
padding: 4px 8px 3px;
margin-top: 6px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
cursor: pointer;
user-select: none;
}
.wl-group-head:hover { background: var(--bg-hover); }
.wl-group-head.is-drop { background: var(--accent-soft); outline: 1px dashed var(--accent); }
/* Notion-style twist: a colour dot at rest that crossfades to a rotating
chevron on row-hover (⌄ open / › collapsed, 0.2s ease-out — same easing as
Notion). The button folds the list; the rest of the band opens the group. */
.wl-group-tw { position: relative; width: 18px; height: 18px; flex: none;
border: none; background: none; padding: 0; cursor: pointer; border-radius: 4px;
display: inline-flex; align-items: center; justify-content: center;
font-family: inherit; color: var(--text-muted); }
.wl-group-dot { position: absolute; width: 8px; height: 8px; border-radius: 3px;
background: var(--gc, var(--border-strong)); opacity: 1; transition: opacity .12s ease; }
.wl-group-chev { position: absolute; width: 15px; height: 15px; opacity: 0;
transform: rotate(0deg); transition: opacity .12s ease, transform .2s ease-out; }
.wl-group-head:hover .wl-group-dot { opacity: 0; }
.wl-group-head:hover .wl-group-chev { opacity: 1; }
.wl-group-head:hover .wl-group-tw { color: var(--text); }
.wl-group-head.is-collapsed .wl-group-chev { transform: rotate(-90deg); }
.wl-group-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-group-count { margin-left: auto; font-weight: 500; font-size: 11px; color: var(--text-soft); }
/* Real-group band: colour-tinted, two lines (name + weekly signal). The dot
carries the group colour; on hover it becomes the fold chevron. --gc = colour. */
.wl-group-band { align-items: center; gap: 7px; border-radius: 8px; padding: 6px 8px 6px 6px; margin: 1px 0;
cursor: pointer; background: color-mix(in srgb, var(--gc) 13%, transparent);
transition: background .02s ease-in; }
.wl-group-band:hover { background: color-mix(in srgb, var(--gc) 20%, transparent); }
.wl-group-band:hover .wl-group-tw { background: color-mix(in srgb, var(--gc) 34%, transparent); }
.wl-group-main { flex: 1; min-width: 0; }
.wl-group-band .wl-group-name { font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.2; }
.wl-group-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-group-body.is-collapsed { display: none; }
.wl-group-body .topic-row { margin-left: 8px; }
/* "+" menu: New group / Track a creator */
.sidebar-plus-menu {
position: absolute;
right: 4px;
top: calc(100% + 2px);
z-index: 40;
min-width: 176px;
padding: 4px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(17, 24, 39, 0.12);
}
.sidebar-plus-menu button {
display: block;
width: 100%;
text-align: left;
padding: 7px 10px;
border: none;
background: none;
border-radius: 6px;
font: inherit;
font-size: 13px;
color: var(--text);
cursor: pointer;
}
.sidebar-plus-menu button:hover { background: var(--bg-hover); }
.wl-group-name { color: inherit; text-decoration: none; }
a.wl-group-name:hover { color: var(--accent); }
/* Group page (#/watchlist/group/{id}) */
.wlg-page { max-width: none; } /* full width, like Topics / Watchlist */
.wlg-head { display: flex; align-items: center; gap: 10px; row-gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
/* full-size header actions — one line each; wrap to a second row when narrow
rather than squeezing the title into an ellipsis. */
.wlg-head .btn { white-space: nowrap; }
.wlg-chip { width: 12px; height: 12px; border-radius: 4px; }
.wlg-spacer { flex: 1; }
.wlg-stats { display: flex; gap: 24px; color: var(--text-muted); font-size: 12.5px; margin: 4px 0 22px; }
.wlg-stats b { color: var(--text); font-weight: 600; }
/* "Refresh now" progress bar (polls until every creator finishes checking). */
.wlg-refreshbar { margin: 0 0 18px; padding: 8px 14px; border-radius: 8px; font-size: 12.5px;
font-weight: 600; background: var(--accent-soft); color: var(--accent);
border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.wlg-refreshbar[hidden] { display: none; }
/* group scrape-cadence picker (overrides each creator's interval when set) —
lives in the header row next to Refresh now; sized to sit level with the
buttons (same height / radius family) so the row reads as one control group. */
.wlg-interval-wrap { display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; color: var(--text-muted); white-space: nowrap; }
/* Same chrome as `.field select` (custom chevron, padding, radius) so it doesn't
look crooked next to the styled selects elsewhere — just auto-width for the row. */
.wlg-interval { font-family: inherit; font-size: 13px; padding: 8px 30px 8px 12px;
border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg);
color: var(--text); cursor: pointer; appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; }
/* Group header: inline-editable name + Notion-style colour popover */
/* The name is the SAME control as the Topics title, one-to-one — it reuses
.topic-head-name / .topic-head-name-edit verbatim (font, padding, border,
grey editing box, hover, keyboard focus halo) AND the same click-to-swap
mechanism (the
hides, the full-width replaces it). The name
area is the flex-grower of the header row, so the edit field stretches to
full width exactly like on Topics; the action buttons sit past it and don't
move when editing (the swapped
/ share one box height). */
.wlg-namewrap { flex: 1 1 auto; min-width: 0; }
/* display:block (not the inherited inline-block) so the