/* ===== css/ui.css ===== */
/* FlacosMedia UI — single source of truth. Do not stack page CSS on top. */

:root,
[data-theme="dark"] {
  color-scheme: dark;
  /* Rampa no escuro: página mais funda, card mais claro — no claro é o
     contrário (--soft cinza, --surface branco). Sem isso os cartões viram
     buracos pretos no cinza e o modo escuro fica chapado. */
  --bg: #09090b;
  --elevated: #121214;
  --surface: #1c1c20;
  --hover: #27272c;
  --soft: #111113;
  --line: rgba(255,255,255,.11);
  --line-strong: rgba(255,255,255,.18);
  --text: #fafafa;
  --secondary: #c6c6ce;
  --muted: #8e8e99;
  --primary: #fafafa;
  --primary-fg: #09090b;
  --accent: #5b9dff;
  --accent-soft: rgba(91,157,255,.22);
  --ok: #4ade80;
  --ok-bg: rgba(74,222,128,.14);
  --bad: #f87171;
  --bad-bg: rgba(248,113,113,.14);
  --warn: #fb923c;
  --warn-bg: rgba(251,146,60,.14);
  --overlay: rgba(0,0,0,.55);
  --shadow: 0 1px 2px rgba(0,0,0,.4);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.42);
  --r: 8px;
  --r-lg: 12px;
  --sidebar: 232px;
  --sidebar-c: 52px;
  --topbar: 52px;
  --px: clamp(16px, 2.2vw, 28px);
  --max: none;
  --font: 'Geist', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.22,1,.36,1);

  /* Legacy aliases — page CSS (reels/bot/pixel/accounts) still use these names */
  --bg-elevated: var(--elevated);
  --sidebar-bg: var(--elevated);
  --surface-hover: var(--hover);
  --soft-2: #25252b;
  --text-secondary: var(--secondary);
  --border: var(--line);
  --border-strong: var(--line-strong);
  --ring: var(--line-strong);
  --primary-hover: #ffffff;
  --accent-hover: #7eb4ff;
  --success: var(--ok);
  --success-bg: var(--ok-bg);
  --danger: var(--bad);
  --error-bg: var(--bad-bg);
  --gold: #facc15;
  --gold-soft: rgba(250,204,21,.1);
  --shadow-xs: var(--shadow);
  --shadow-sm: var(--shadow-lg);
  --shadow-card: 0 0 0 1px var(--line);
  --radius-sm: 6px;
  --radius-md: var(--r);
  --radius-lg: var(--r-lg);
  --radius-full: 999px;
  --sidebar-w: var(--sidebar);
  --sidebar-w-collapsed: var(--sidebar-c);
  --sidebar-pad: 16px;
  --sidebar-nav-gap: 2px;
  --topbar-h: var(--topbar);
  --header-h: var(--topbar);
  --page-x: var(--px);
  --page-py: 28px;
  --page-pb: 64px;
  --panel-x: 20px;
  --page-max: none;
  --content-form: 420px;
  --font-body: var(--font);
  --font-mono: var(--mono);
  --font-xs: 11px;
  --font-sm: 12px;
  --font-md: 13px;
  --font-base: 14px;
  --font-lg: 15px;
  --font-xl: 22px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --gap-page: var(--space-6);
  --gap-section: var(--space-5);
  --gap-card: var(--space-4);
  --gap-inline: var(--space-3);
  --gap-tight: var(--space-2);
  --gap-micro: var(--space-1);
  --ease-out: var(--ease);
  --duration-fast: 100ms;
  --duration: 160ms;
  --duration-slow: 240ms;
  --chart-1: #60a5fa;
  --chart-2: #f472b6;
  --chart-3: #a78bfa;
  --chart-4: #4ade80;
  --chart-5: #fb923c;
  --chart-6: #facc15;
  --chart-7: #22d3ee;
  --chart-8: #f87171;
  --chart-line: var(--chart-1);
  --chart-line-fill: rgba(96,165,250,.18);
  --input-bg: var(--surface);
  --inset-bg: var(--elevated);
  --panel-muted: var(--secondary);
  --shell-glass: color-mix(in srgb, var(--elevated) 90%, transparent);
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #fafafa;
  --elevated: #fff;
  --surface: #fff;
  --hover: #f4f4f5;
  --soft: #f4f4f5;
  --line: #e4e4e7;
  --line-strong: #d4d4d8;
  --text: #3f3f46;
  --secondary: #71717a;
  --muted: #a1a1aa;
  --primary: #52525b;
  --primary-fg: #fafafa;
  --accent: #2563eb;
  --accent-soft: rgba(37,99,235,.1);
  --ok: #16a34a;
  --ok-bg: #f0fdf4;
  --bad: #dc2626;
  --bad-bg: #fef2f2;
  --warn: #c2410c;
  --warn-bg: #fff7ed;
  --overlay: rgba(0,0,0,.4);
  --shadow: 0 1px 2px rgba(0,0,0,.04);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.12);
  --soft-2: #e4e4e7;
  --primary-hover: #3f3f46;
  --accent-hover: #1d4ed8;
  --sidebar-bg: var(--elevated);
  --gold: #ca8a04;
  --gold-soft: #fefce8;
  --chart-1: #2563eb;
  --chart-2: #db2777;
  --chart-3: #7c3aed;
  --chart-4: #16a34a;
  --chart-5: #ea580c;
  --chart-6: #ca8a04;
  --chart-7: #0891b2;
  --chart-8: #dc2626;
  --chart-line: var(--chart-1);
  --chart-line-fill: rgba(37,99,235,.12);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}
html, body { overflow-x: clip; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 var(--font);
  letter-spacing: -.011em;
}
button, input, select, textarea, optgroup, dialog, table, th, td, label { font: inherit; font-family: inherit; }
h1,h2,h3,h4 { margin: 0; font-weight: 600; letter-spacing: -.03em; line-height: 1.25; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--accent-soft); }
:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 2px; }
.sr-only, .visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
@keyframes fm-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fm-pulse { 50% { opacity: .4; } }

/* Shell */
.app { position: relative; z-index: 1; min-height: 100vh; }
.tabs { display: flex; min-height: 100vh; position: relative; z-index: 1; }
.tabs > input[type="radio"], .sidebar-toggle { position: absolute; opacity: 0; pointer-events: none; }
.app-shell { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.app-main { flex: 1; }
.tab-panel { display: none !important; }
#tab-productivity:checked ~ .app-shell #panel-productivity,
#tab-reels:checked ~ .app-shell #panel-reels,
#tab-accounts:checked ~ .app-shell #panel-accounts,
#tab-publish:checked ~ .app-shell #panel-publish,
#tab-analytics:checked ~ .app-shell #panel-analytics,
#tab-downloader:checked ~ .app-shell #panel-downloader,
#tab-studio:checked ~ .app-shell #panel-studio,
#tab-team:checked ~ .app-shell #panel-team,
#tab-bot:checked ~ .app-shell #panel-bot,
#tab-pixel:checked ~ .app-shell #panel-pixel {
  display: block !important;
}

/* Sidebar — see core/sidebar.css (loaded via app.css) */

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 8px; background: var(--primary); color: var(--primary-fg);
}
.brand-mark__logo {
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
[data-theme="light"] .brand-mark {
  background: #111;
  color: #fff;
  border-color: var(--line);
}
.brand--lg .brand-mark { width: 32px; height: 32px; }
.brand--lg .brand-mark__logo { width: 18px; height: 18px; }
.brand-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.brand-text strong { font-size: 13px; font-weight: 650; }
.brand-text span { color: var(--muted); font-size: 11px; }
.user-avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 999px; background: var(--soft); font-size: 11px; font-weight: 650;
}
.theme-toggle__icon--light { display: none; }
[data-theme="light"] .theme-toggle__icon--dark { display: none; }
[data-theme="light"] .theme-toggle__icon--light { display: flex; }
.theme-toggle .theme-toggle__label::before { content: "Modo escuro"; }
[data-theme="light"] .theme-toggle .theme-toggle__label::before { content: "Modo claro"; }

@media (max-width: 768px) {
  .tabs { display: block; }
}

.app-main,
.tab-panels,
.tab-panel {
  width: 100%;
  max-width: none;
  min-width: 0;
}

/* Page — full width beside sidebar */
.page, .fm-page, .bot-dash, .pixel-page, .pixel-dash, .team-page, .publish-page, .accounts-page, .reels-dash, .reel {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 24px var(--px) 56px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: calc(100dvh - var(--topbar-h, var(--topbar)));
  box-sizing: border-box;
}
.fm-hero, .page-hero, .dash-hero, .bot-dash__hero {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 16px;
}
.fm-hero h2, .page-hero__intro h2, .dash-hero h2, .bot-dash__hero h2 {
  font-size: 22px; font-weight: 650; letter-spacing: -.035em;
}
.fm-hero p, .page-hero__desc, .fm-muted { margin: 0; color: var(--muted); font-size: 13px; }
.fm-stats, .fm-props {
  display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0;
}
.fm-stat, .fm-prop {
  display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow);
  font-size: 12px; color: var(--secondary);
}
.fm-stat strong, .fm-prop strong, .fm-prop__value { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }
.fm-prop__name { color: var(--muted); font-size: 11px; }

/* Primitives */
.btn, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 0 12px; border: 1px solid transparent; border-radius: var(--r);
  background: var(--primary); color: var(--primary-fg); font-size: 13px; font-weight: 550; cursor: pointer;
}
.btn:hover, .button:hover { filter: brightness(1.05); }
.btn--primary { background: var(--primary); color: var(--primary-fg); }
.btn--primary:hover { background: var(--primary-hover); color: var(--primary-fg); }
.btn--secondary, .button.secondary, .dropdown-trigger {
  background: var(--surface); border-color: var(--line); color: var(--secondary); box-shadow: var(--shadow);
}
.btn--secondary:hover, .button.secondary:hover, .dropdown-trigger:hover { background: var(--hover); color: var(--text); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--secondary); }
.btn--ghost:hover { background: var(--hover); color: var(--text); }
.btn--sm { min-height: 30px; padding: 0 10px; font-size: 12px; }
.btn--icon { min-height: 0; padding: 0; width: 30px; height: 30px; }
.card, .fm-card, .integrations-card, .bot-card, .pixel-card {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow);
}
label { display: block; margin-bottom: 6px; color: var(--secondary); font-size: 12px; font-weight: 500; }
input, select, textarea {
  width: 100%; padding: 8px 11px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--elevated); color: var(--text); outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line-strong));
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field { margin-bottom: 14px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 20px;
  border: 1px dashed var(--line); border-radius: var(--r-lg); text-align: center;
}
.empty-state__icon {
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 999px; background: var(--soft); color: var(--muted);
}
.empty-state p { margin: 0; color: var(--muted); font-size: 12px; max-width: 36ch; }
.badge, .account-badge, .fm-tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
  background: var(--soft); color: var(--secondary); font-size: 11px; font-weight: 600;
}
.account-badge--warming, .fm-tag--warming { background: var(--warn-bg); color: var(--warn); }
.account-badge--ready, .fm-tag--ready { background: var(--ok-bg); color: var(--ok); }
.account-badge--in_use, .fm-tag--in_use { background: var(--accent-soft); color: var(--accent); }
.account-badge--banned, .fm-tag--banned { background: var(--bad-bg); color: var(--bad); }
.toast, .notice {
  margin: 0; padding: 10px var(--px); text-align: center; font-size: 13px; font-weight: 500;
}
.toast--success, .notice.success { background: var(--ok-bg); color: var(--ok); }
.toast--error, .notice.error { background: var(--bad-bg); color: var(--bad); }
.hint, .quiet, .empty { color: var(--muted); font-size: 12px; }

/* Subnav */
.fm-tabs, .publish-subnav, .dash-subnav, .dash-subnav__tabs, .notion-views {
  display: inline-flex; flex-wrap: wrap; gap: 2px; width: fit-content; padding: 3px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--soft);
}
.fm-tabs button, .publish-subnav__btn, .dash-subnav__tab, .notion-view {
  min-height: 30px; padding: 0 12px; border: 0; border-radius: var(--r); background: transparent;
  color: var(--muted); font: inherit; font-size: 12px; font-weight: 550; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.fm-tabs button.is-active, .publish-subnav__btn.is-active, .dash-subnav__tab.active, .notion-view.is-active {
  background: var(--surface); color: var(--text); box-shadow: var(--shadow);
}

/* Accounts */
.fm-toolbar, .notion-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.fm-toolbar__bar, .notion-db__views {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
}
.fm-search, .notion-toolbar__search { position: relative; display: flex; align-items: center; margin: 0; }
.fm-search svg, .notion-toolbar__search svg { position: absolute; left: 11px; z-index: 1; color: var(--muted); pointer-events: none; }
.fm-search input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.notion-toolbar__search input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
  width: min(220px, 52vw); min-height: 32px; padding: 0 12px 0 34px; font-size: 12px; background: var(--surface);
}
.fm-chip, .notion-chip {
  min-height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--secondary); font: inherit; font-size: 12px; font-weight: 550; cursor: pointer;
}
.fm-chip.is-active, .notion-chip.is-active { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); color: var(--text); }
[data-theme="light"] .fm-chip.is-active,
[data-theme="light"] .notion-chip.is-active {
  color: var(--accent);
  font-weight: 600;
}
.fm-board, .acc-board {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; align-items: start;
}
.fm-col, .acc-col {
  display: flex; flex-direction: column; gap: 8px; min-height: 160px; padding: 10px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: color-mix(in srgb, var(--surface) 75%, transparent);
}
.fm-col__head, .acc-col__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fm-col__count, .acc-col__count {
  min-width: 22px; padding: 2px 7px; border-radius: 999px; background: var(--soft); color: var(--muted);
  font-size: 11px; font-weight: 650; text-align: center;
}
.fm-col__list, .acc-col__list, .accounts-column__cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.fm-col__empty, .acc-col__empty { margin: 0; padding: 14px 8px; color: var(--muted); font-size: 12px; text-align: center; }
.fm-col.is-drop, .acc-col--drop-target { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--accent-soft); }
.fm-col.is-invalid, .acc-col--drop-invalid { border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); opacity: .7; }
.fm-item, .acc-item, .accounts-column__item { margin: 0; }
.fm-card-acc, .acc-card, .account-card {
  display: flex; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow);
}
.fm-card-acc:hover, .acc-card:hover { border-color: var(--line-strong); background: var(--hover); }
.fm-card-acc__drag, .acc-card__drag, .account-card__drag-handle {
  display: inline-flex; align-items: center; justify-content: center; width: 16px; border: 0; background: transparent;
  color: var(--muted); cursor: grab; opacity: .55; padding: 0;
}
.fm-card-acc__body, .acc-card__body, .account-card__main {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; cursor: pointer;
}
.fm-card-acc__row, .notion-card__row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fm-card-acc__name, .acc-card__name, .account-card__name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: var(--text);
}
.fm-card-acc__actions, .acc-card__menu, .account-card__actions { display: inline-flex; gap: 2px; }
.fm-icon-btn, .acc-menu-btn, .account-card__action, .notion-card__btn {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border: 0; border-radius: var(--r); background: transparent; color: var(--muted); cursor: pointer; padding: 0; min-height: 0;
}
.fm-icon-btn:hover, .acc-menu-btn:hover { background: var(--soft); color: var(--text); }
.fm-icon-btn.is-danger:hover, .acc-menu-btn--danger:hover { background: var(--bad-bg); color: var(--bad); }
.fm-card-acc__tags, .acc-card__props { display: flex; flex-wrap: wrap; gap: 4px; }
.accounts-column__placeholder {
  min-height: 52px; border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius: var(--r-lg); background: var(--accent-soft);
}
.fm-table-wrap, .notion-table-wrap {
  overflow: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
}
.fm-table, .accounts-table, .notion-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fm-table th, .fm-table td, .accounts-table th, .accounts-table td, .notion-table th, .notion-table td {
  padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap;
}
.fm-table th, .accounts-table th, .notion-table th {
  background: var(--soft); color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
}
.fm-table tr:last-child td, .accounts-table tr:last-child td { border-bottom: 0; }
.fm-toast, .acc-toast {
  position: fixed; right: 16px; bottom: 16px; z-index: 80; max-width: min(340px, calc(100vw - 32px));
  padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  box-shadow: var(--shadow-lg); font-size: 13px;
}
.fm-toast.is-success, .acc-toast.is-success { border-color: color-mix(in srgb, var(--ok) 30%, var(--line)); }
.fm-toast.is-error, .acc-toast.is-error { border-color: color-mix(in srgb, var(--bad) 30%, var(--line)); }
.fm-view[hidden], .notion-view-panel[hidden], [data-view-panel][hidden] { display: none !important; }
.accounts-table__account { display: flex; align-items: center; gap: 10px; }
.accounts-table__avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: var(--r); border: 1px solid var(--line); background: var(--soft); color: var(--secondary);
}
.accounts-table__avatar--instagram { color: #e1306c; background: color-mix(in srgb, #e1306c 10%, var(--soft)); border-color: color-mix(in srgb, #e1306c 22%, var(--line)); }
.accounts-table__avatar--tiktok { color: var(--text); background: color-mix(in srgb, var(--text) 6%, var(--soft)); }
[data-theme="light"] .accounts-table__avatar--tiktok { color: var(--text); }
.accounts-table__username { font-weight: 600; }
.accounts-table__muted { color: var(--muted); }
.accounts-table__password { display: flex; align-items: center; gap: 8px; }
.accounts-table__pass { font-family: var(--mono); font-size: 12px; }
.accounts-table__actions { display: flex; align-items: center; gap: 6px; }
.accounts-table__copy, .accounts-table__delete {
  border: 0; background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-size: 12px;
}
.accounts-table__growth--up { color: var(--ok); }
.accounts-table__growth--down { color: var(--bad); }

/* Publish */
.publish-composer, .publish-queue, .publish-accounts { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: none; padding: 18px; }
.publish-composer__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.publish-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px 0 10px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--elevated); color: var(--secondary);
  font-size: 12px; font-weight: 550; cursor: pointer;
}
.publish-chip input { width: auto; margin: 0; accent-color: var(--accent); }
.publish-chip:has(input:checked) { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); color: var(--text); }
.publish-composer__footer { display: flex; justify-content: flex-end; }
.publish-alert { padding: 10px 12px; border-radius: var(--r); background: var(--bad-bg); color: var(--bad); font-size: 13px; border: 1px solid transparent; }
.publish-alert.is-success { background: var(--ok-bg); color: var(--ok); }
.publish-view { display: none; }
.publish-view.is-active { display: block; }
.publish-queue__list { display: flex; flex-direction: column; gap: 8px; }
.publish-post {
  display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--elevated);
}
.publish-post__title { margin: 0; font-size: 13px; font-weight: 600; }
.publish-post__meta { color: var(--muted); font-size: 12px; }
.publish-post__status { padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 650; text-transform: uppercase; }
.publish-post__status--SCHEDULED { background: var(--accent-soft); color: var(--accent); }
.publish-post__status--DRAFT { background: var(--soft); color: var(--muted); }
.publish-post__status--PUBLISHED { background: var(--ok-bg); color: var(--ok); }
.publish-post__status--ERROR, .publish-post__status--FAILED { background: var(--bad-bg); color: var(--bad); }
.publish-accounts__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.publish-account { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--elevated); }
.publish-account__top { display: flex; align-items: center; gap: 10px; }
.publish-account__avatar {
  width: 36px; height: 36px; border-radius: 999px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  background: var(--soft); font-weight: 650; font-size: 12px;
}
.publish-account__avatar img { width: 100%; height: 100%; object-fit: cover; }
.publish-accounts__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.publish-queue__filters { display: flex; flex-wrap: wrap; gap: 4px; }
.publish-queue__filters .btn.is-active { background: var(--accent-soft); color: var(--text); }

/* Login styles live in pages/login.css */

/* Dash / Bot / Pixel / Reels alignment */
.dash-subnav__tab svg { width: 14px; height: 14px; }
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 180px;
  padding: 6px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-lg);
  display: none;
}
.dropdown.open .dropdown-menu, .dropdown-menu.is-open { display: block; }
.dropdown-item {
  padding: 8px 10px; border-radius: var(--r); color: var(--secondary); font-size: 13px; cursor: pointer;
}
.dropdown-item:hover, .dropdown-item.active { background: var(--hover); color: var(--text); }
.bot-dash section, .pixel-page section, .reels-dash section { display: flex; flex-direction: column; gap: 14px; }
.bot-dash table, .pixel-page table, .reels-dash table, .data-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface);
}
.bot-dash th, .bot-dash td, .pixel-page th, .pixel-page td, .reels-dash th, .reels-dash td, .data-table th, .data-table td {
  padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left;
}
.bot-dash th, .pixel-page th, .reels-dash th, .data-table th { background: var(--soft); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.stat-card, .metric-card, .overview-card, .page-stat, .accounts-stat {
  display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--line);
  border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow);
}
.item {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; box-shadow: var(--shadow);
}
.reel-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* Modals */
.accounts-modal, .team-modal, .bot-modal {
  margin: auto; padding: 0; max-height: min(90vh, 760px); overflow: hidden;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg);
}
.accounts-modal:not([open]), .team-modal:not([open]), .bot-modal:not([open]) { display: none; }
.accounts-modal::backdrop, .team-modal::backdrop, .bot-modal::backdrop { background: var(--overlay); backdrop-filter: blur(4px); }
.accounts-modal__form, .team-modal__form, .bot-modal__form { display: flex; flex-direction: column; max-height: inherit; min-height: 0; }
.accounts-modal__header, .team-modal__header, .bot-modal__header {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.accounts-modal__body, .team-modal__body, .bot-modal__body {
  flex: 1; min-height: 0; overflow: auto; padding: 18px;
}
.accounts-modal__footer, .team-modal__footer, .bot-modal__footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 18px;
  border-top: 1px solid var(--line); flex-shrink: 0;
}
.accounts-modal__close, .team-modal__close, .bot-modal__close {
  margin-left: auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r); background: transparent; color: var(--muted); cursor: pointer; padding: 0; min-height: 0;
}
.accounts-modal__close:hover, .team-modal__close:hover, .bot-modal__close:hover { background: var(--hover); color: var(--text); }
.platform-picker, .platform-picker__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.platform-picker__card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 72px;
  padding: 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--elevated); color: var(--secondary); cursor: pointer;
}
.platform-picker__card input { display: none; }
.platform-picker__card:has(input:checked) { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); color: var(--text); }
body.modal-open { overflow: hidden; }
body.modal-open .topbar { visibility: hidden; }

/* Mobile dock styles live in core/mobile-nav.css */
.mobile-dock { display: none; }
@media (max-width: 768px) {
  .fm-board, .acc-board { grid-template-columns: 1fr; }
  .field-grid { grid-template-columns: 1fr; }
  .accounts-modal[open], .team-modal[open], .bot-modal[open] {
    position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; margin: 0;
    border-radius: 14px 14px 0 0; max-height: min(92dvh, 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Placeholder dos painéis carregados sob demanda (/panel/:tab) */
.panel-remote-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 40vh;
    color: var(--muted, #8a8f98);
    font-size: 14px;
}
.panel-remote-loading button {
    padding: 6px 14px;
    border: 1px solid var(--line, #333);
    border-radius: 8px;
    background: var(--surface, #1a1c1f);
    color: var(--text, #eee);
    cursor: pointer;
}

/* ===== core/backdrop.css ===== */
/* Ambient backdrop — minimal */

.app-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--bg);
}

.app-backdrop::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 70% 50% at 50% -20%,
        color-mix(in srgb, var(--accent) 8%, transparent),
        transparent 70%
    );
}

[data-theme="light"] .app-backdrop::before {
    background: radial-gradient(
        ellipse 80% 55% at 50% -15%,
        color-mix(in srgb, var(--accent) 8%, transparent),
        transparent 72%
    );
}

.app-backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, color-mix(in srgb, var(--text) 4%, transparent) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 5%, transparent 100%);
    opacity: 0.22;
}

[data-theme="light"] .app-backdrop::after {
    background-image: radial-gradient(circle, color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px);
    opacity: 0.15;
}

.app-backdrop__orb {
    display: none;
}

/* ===== core/design-system.css ===== */
/* FlacosMedia — minimal design system */

:root,
[data-theme="dark"] {
    --r-xl: 12px;
    --r-2xl: 14px;
    --shadow-rich: var(--shadow);
    --shadow-card: 0 0 0 1px var(--line);
}

[data-theme="light"] {
    --shadow-card: 0 0 0 1px var(--border, var(--line));
}

/* Page headers — flat, no card wrapper */
.fm-hero,
.page-hero,
.dash-hero,
.bot-dash__hero,
#panel-reels .ig-page__head,
#panel-reels .ig-head,
#panel-team .team-page__header,
#panel-pixel .pixel-dash__header {
    position: static;
    isolation: auto;
    overflow: visible;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.fm-hero::before,
.page-hero::before,
.dash-hero::before,
.bot-dash__hero::before,
#panel-reels .ig-page__head::before,
#panel-reels .ig-head::before,
#panel-team .team-page__header::before,
#panel-pixel .pixel-dash__header::before,
.fm-hero::after,
.page-hero::after,
.dash-hero::after,
.bot-dash__hero::after,
#panel-reels .ig-page__head::after,
#panel-reels .ig-head::after,
#panel-team .team-page__header::after,
#panel-pixel .pixel-dash__header::after {
    content: none;
    display: none;
}

.fm-hero h2,
.page-hero__intro h2,
.dash-hero h2,
.bot-dash__hero h2,
#panel-reels .ig-page__title h2,
#panel-reels .ig-head__title h2 {
    font-size: 22px;
    font-weight: 650;
    letter-spacing: -0.035em;
}

.fm-stat,
.fm-prop,
.page-hero__tag,
.notion-prop,
.page-stat,
#panel-reels .ig-metric,
#panel-reels .ig-stat {
    border-radius: var(--r, 8px);
    box-shadow: none;
}

.page-stat__icon,
.page-hero .team-stat__icon,
.page-hero .accounts-stat__icon {
    background: var(--soft);
    color: var(--secondary, var(--text-secondary));
}

#panel-reels .ig-metric {
    background: transparent;
    backdrop-filter: none;
}

#panel-reels button.ig-metric:not(:disabled):hover {
    border-color: var(--border-strong, var(--line-strong));
    box-shadow: none;
    background: var(--surface);
}

/* Primary — flat accent */
.btn--primary,
.btn-primary,
.accounts-modal__btn--primary {
    border: 0;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    box-shadow: none;
}

.btn--primary:hover,
.btn-primary:hover,
.accounts-modal__btn--primary:hover {
    background: var(--accent-hover);
    filter: none;
    color: #fff;
}

.btn--primary:active,
.btn-primary:active {
    transform: none;
}

/* Cards — hairline border, light shadow */
.card,
.fm-card,
.integrations-card,
.bot-card,
.pixel-card,
.stat-card,
.metric-card,
.overview-card,
.item,
.publish-composer,
.publish-post,
.publish-account,
.fm-col,
.acc-col,
.fm-table-wrap,
.notion-table-wrap,
.fm-card-acc,
.acc-card,
.account-card,
.team-panel,
.accounts-panel,
.import-panel {
    border-radius: var(--r-lg, 12px);
    box-shadow: var(--shadow);
}

.page-stat {
    box-shadow: var(--shadow);
}

/* Form controls */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
    min-height: 36px;
    padding: 8px 11px;
    border-radius: var(--r, 8px);
    background: var(--input-bg, var(--elevated));
}

[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
[data-theme="light"] select,
[data-theme="light"] textarea {
    background: var(--surface);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
select:focus,
textarea:focus {
    background: var(--hover);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.fm-search,
.notion-toolbar__search {
    margin-bottom: 0;
}

.fm-search input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.notion-toolbar__search input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
    padding: 0 12px 0 34px;
}

#panel-reels .ig-search input {
    padding-left: 32px;
}

label {
    font-weight: 500;
}

.input-group {
    min-height: 40px;
    border-radius: var(--r, 8px);
    background: var(--input-bg, var(--elevated));
}

[data-theme="light"] .input-group {
    background: var(--surface);
}

.input-group__icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--soft);
    color: var(--muted);
}

.input-group:focus-within {
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Subnav */
.fm-tabs,
.publish-subnav,
.dash-subnav,
.dash-subnav__tabs,
.notion-views {
    border-radius: var(--r-lg, 12px);
    box-shadow: none;
}

.fm-tabs button.is-active,
.publish-subnav__btn.is-active,
.dash-subnav__tab.active,
.notion-view.is-active {
    box-shadow: none;
    color: var(--text);
}

/* Modals */
.accounts-modal,
.team-modal,
.bot-modal {
    border-radius: var(--r-lg, 12px);
    box-shadow: var(--shadow-lg);
}

.accounts-modal__header,
.team-modal__header,
.bot-modal__header {
    background: var(--surface);
}

/* Sidebar */
#tab-productivity:checked ~ .sidebar .sidebar__link[for="tab-productivity"],
#tab-reels:checked ~ .sidebar .sidebar__link[for="tab-reels"],
#tab-downloader:checked ~ .sidebar .sidebar__link[for="tab-downloader"],
#tab-studio:checked ~ .sidebar .sidebar__link[for="tab-studio"],
#tab-team:checked ~ .sidebar .sidebar__link[for="tab-team"],
#tab-bot:checked ~ .sidebar .sidebar__link[for="tab-bot"],
#tab-pixel:checked ~ .sidebar .sidebar__link[for="tab-pixel"] {
    background: var(--accent-soft);
    box-shadow: none;
}

#tab-productivity:checked ~ .sidebar .sidebar__link[for="tab-productivity"] .sidebar__link-icon,
#tab-reels:checked ~ .sidebar .sidebar__link[for="tab-reels"] .sidebar__link-icon,
#tab-downloader:checked ~ .sidebar .sidebar__link[for="tab-downloader"] .sidebar__link-icon,
#tab-studio:checked ~ .sidebar .sidebar__link[for="tab-studio"] .sidebar__link-icon,
#tab-team:checked ~ .sidebar .sidebar__link[for="tab-team"] .sidebar__link-icon,
#tab-bot:checked ~ .sidebar .sidebar__link[for="tab-bot"] .sidebar__link-icon,
#tab-pixel:checked ~ .sidebar .sidebar__link[for="tab-pixel"] .sidebar__link-icon {
    color: var(--text);
    opacity: 1;
}

.topbar {
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    box-shadow: none;
}

.empty-state {
    border-radius: var(--r-lg, 12px);
    background: transparent;
}

.empty-state__icon {
    background: var(--soft);
    color: var(--muted);
}

.mobile-dock {
    box-shadow: none;
}

@media (max-width: 768px) {
    .fm-hero,
    .page-hero,
    .dash-hero,
    .bot-dash__hero,
    #panel-reels .ig-page__head,
    #panel-team .team-page__header,
    #panel-pixel .pixel-dash__header {
        padding: 0;
        border-radius: 0;
    }
}

/* ===== core/theme-dark.css ===== */
/* Dark theme — unified surfaces, type and controls across all panels */

[data-theme="dark"] {
    --input-bg: var(--surface);
    --inset-bg: var(--elevated);
    --panel-muted: var(--secondary);
    --shell-glass: color-mix(in srgb, var(--elevated) 90%, transparent);
}

/* Typography */
[data-theme="dark"] h1 {
    color: var(--text);
}

[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] .panel-header h3,
[data-theme="dark"] .chart-card h3,
[data-theme="dark"] .section-label,
[data-theme="dark"] .team-filter-group__label,
[data-theme="dark"] .topbar__nav-label {
    color: var(--secondary);
}

[data-theme="dark"] .hint,
[data-theme="dark"] .quiet,
[data-theme="dark"] .empty,
[data-theme="dark"] .field-hint,
[data-theme="dark"] .publish-empty__text,
[data-theme="dark"] .editor-kicker,
[data-theme="dark"] .pixel-card-head__sub {
    color: var(--secondary);
}

[data-theme="dark"] label,
[data-theme="dark"] .field__label,
[data-theme="dark"] .stat-card .label,
[data-theme="dark"] .page-stat__label,
[data-theme="dark"] .team-stat__label,
[data-theme="dark"] .accounts-stat__label {
    color: var(--secondary);
}

/* Shell */
[data-theme="dark"] .topbar {
    background: var(--shell-glass);
    border-bottom-color: color-mix(in srgb, var(--line) 80%, transparent);
    box-shadow: none;
}

[data-theme="dark"] .mobile-dock {
    background: color-mix(in srgb, var(--elevated) 96%, transparent);
    border-top-color: var(--line);
}

[data-theme="dark"] .mobile-nav__link {
    color: var(--secondary);
}

[data-theme="dark"] .mobile-nav__icon {
    opacity: 0.88;
}

/* Cards & panels */
[data-theme="dark"] .card,
[data-theme="dark"] .fm-card,
[data-theme="dark"] .integrations-card,
[data-theme="dark"] .bot-card,
[data-theme="dark"] .pixel-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .metric-card,
[data-theme="dark"] .overview-card,
[data-theme="dark"] .publish-composer,
[data-theme="dark"] .publish-queue,
[data-theme="dark"] .publish-post,
[data-theme="dark"] .publish-account,
[data-theme="dark"] .team-panel,
[data-theme="dark"] .accounts-panel,
[data-theme="dark"] .fm-col,
[data-theme="dark"] .acc-col,
[data-theme="dark"] .fm-card-acc,
[data-theme="dark"] .acc-card,
[data-theme="dark"] .account-card,
[data-theme="dark"] #panel-bot .panel,
[data-theme="dark"] #panel-bot .chart-card,
[data-theme="dark"] #panel-pixel .pixel-products,
[data-theme="dark"] #panel-pixel .pixel-editor,
[data-theme="dark"] #panel-downloader .dl-shell,
[data-theme="dark"] #panel-reels .ig-composer {
    background: var(--surface);
    border-color: var(--line);
    color: var(--text);
}

[data-theme="dark"] .fm-table-wrap,
[data-theme="dark"] .notion-table-wrap,
[data-theme="dark"] .table-wrap {
    background: var(--surface);
    border-color: var(--line);
}

/* Form controls */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .input-group,
[data-theme="dark"] .fm-select__trigger,
[data-theme="dark"] .dt-picker__trigger,
[data-theme="dark"] #panel-pixel .code-input,
[data-theme="dark"] #panel-pixel .pixel-name-input,
[data-theme="dark"] #panel-pixel .pixel-logs-bar__select,
[data-theme="dark"] #panel-downloader .dl-textarea {
    background: var(--input-bg);
    border-color: var(--line);
    color: var(--text);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--muted);
}

[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] .input-group:focus-within,
[data-theme="dark"] .fm-select__trigger:focus-visible,
[data-theme="dark"] .dt-picker__trigger:focus-visible {
    background: var(--hover);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}

/* Tables */
[data-theme="dark"] .fm-table th,
[data-theme="dark"] .accounts-table th,
[data-theme="dark"] .notion-table th,
[data-theme="dark"] .data-table th,
[data-theme="dark"] #panel-bot .data-table th,
[data-theme="dark"] #panel-team .team-table th {
    background: var(--soft);
    color: var(--secondary);
}

[data-theme="dark"] .fm-table td,
[data-theme="dark"] .accounts-table td,
[data-theme="dark"] .notion-table td,
[data-theme="dark"] .data-table td,
[data-theme="dark"] #panel-bot .data-table td,
[data-theme="dark"] #panel-team .team-table td {
    color: var(--text);
    border-color: var(--line);
}

/* Segmented controls */
[data-theme="dark"] .fm-tabs,
[data-theme="dark"] .publish-subnav,
[data-theme="dark"] .dash-subnav,
[data-theme="dark"] .dash-subnav__tabs,
[data-theme="dark"] .notion-views,
[data-theme="dark"] .team-segment,
[data-theme="dark"] .accounts-toolbar__segment,
[data-theme="dark"] #panel-reels .ig-seg,
[data-theme="dark"] #panel-publish .publish-seg,
[data-theme="dark"] #panel-downloader .dl-composer__platforms {
    background: var(--soft);
    border-color: var(--line);
}

[data-theme="dark"] .fm-tabs button,
[data-theme="dark"] .publish-subnav__btn,
[data-theme="dark"] .dash-subnav__tab,
[data-theme="dark"] .notion-view,
[data-theme="dark"] .team-segment__btn,
[data-theme="dark"] .accounts-toolbar__seg,
[data-theme="dark"] #panel-reels .ig-seg__btn,
[data-theme="dark"] #panel-publish .publish-seg__btn,
[data-theme="dark"] .fm-chip,
[data-theme="dark"] .notion-chip,
[data-theme="dark"] #panel-reels .ig-chip {
    color: var(--secondary);
}

[data-theme="dark"] .fm-tabs button.is-active,
[data-theme="dark"] .publish-subnav__btn.is-active,
[data-theme="dark"] .dash-subnav__tab.active,
[data-theme="dark"] .dash-subnav__tab.is-active,
[data-theme="dark"] .notion-view.is-active,
[data-theme="dark"] .team-segment__btn.is-active,
[data-theme="dark"] .accounts-toolbar__seg.is-active,
[data-theme="dark"] #panel-reels .ig-seg__btn.is-active,
[data-theme="dark"] #panel-publish .publish-seg__btn.is-active,
[data-theme="dark"] .fm-chip.is-active,
[data-theme="dark"] .notion-chip.is-active,
[data-theme="dark"] #panel-reels .ig-chip.is-active {
    background: var(--hover);
    color: var(--text);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line-strong) 70%, transparent);
}

[data-theme="dark"] .fm-chip.is-active,
[data-theme="dark"] .notion-chip.is-active {
    border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
    color: var(--text);
}

/* Secondary buttons */
[data-theme="dark"] .btn--secondary,
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn--ghost,
[data-theme="dark"] .dropdown-trigger {
    color: var(--text);
    border-color: var(--line);
}

[data-theme="dark"] .btn--secondary:hover,
[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn--ghost:hover,
[data-theme="dark"] .dropdown-trigger:hover {
    background: var(--hover);
    color: var(--text);
}

/* Modals & overlays */
[data-theme="dark"] .accounts-modal,
[data-theme="dark"] .team-modal,
[data-theme="dark"] .bot-modal,
[data-theme="dark"] .publish-modal,
[data-theme="dark"] .fm-select__menu,
[data-theme="dark"] .dt-picker__popover {
    background: var(--elevated);
    border-color: var(--line);
    color: var(--text);
}

[data-theme="dark"] .accounts-modal__header,
[data-theme="dark"] .team-modal__header,
[data-theme="dark"] .bot-modal__header {
    background: var(--surface);
    border-color: var(--line);
}

/* Page-specific shells */
[data-theme="dark"] #panel-downloader .dl-composer {
    background: color-mix(in srgb, var(--soft) 45%, var(--surface));
}

[data-theme="dark"] #panel-downloader .dl-cookies {
    background: var(--surface);
    border-color: var(--line);
}

[data-theme="dark"] #panel-reels .ig-composer {
    background: color-mix(in srgb, var(--soft) 40%, var(--surface));
}

[data-theme="dark"] #panel-reels .ig-toolbar,
[data-theme="dark"] #panel-reels .ig-queue__item {
    background: var(--surface);
    border-color: var(--line);
}

[data-theme="dark"] #panel-publish .publish-queue__body,
[data-theme="dark"] #panel-publish .publish-strip,
[data-theme="dark"] #panel-publish .publish-dropzone--reel {
    background: color-mix(in srgb, var(--soft) 35%, var(--surface));
    border-color: var(--line);
}

[data-theme="dark"] #panel-pixel .platform-switch {
    background: var(--soft);
    border-color: var(--line);
}

[data-theme="dark"] #panel-pixel .product-item {
    color: var(--secondary);
}

[data-theme="dark"] #panel-pixel .product-item.is-active,
[data-theme="dark"] #panel-pixel .product-item:hover {
    background: var(--hover);
    color: var(--text);
}

[data-theme="dark"] #panel-bot .stat-card:hover,
[data-theme="dark"] #panel-bot .panel:hover {
    background: var(--hover);
    border-color: var(--line-strong);
}

[data-theme="dark"] #panel-team .team-search input,
[data-theme="dark"] #panel-accounts .accounts-toolbar__search input,
[data-theme="dark"] .fm-search input,
[data-theme="dark"] .notion-toolbar__search input {
    background: var(--input-bg);
    color: var(--text);
}

[data-theme="dark"] .empty-state__icon {
    background: var(--soft);
    color: var(--secondary);
}

[data-theme="dark"] .page-stat__icon,
[data-theme="dark"] .team-stat__icon,
[data-theme="dark"] .accounts-stat__icon {
    background: var(--soft);
    color: var(--text);
}

[data-theme="dark"] .fm-toast,
[data-theme="dark"] .acc-toast {
    background: var(--elevated);
    border-color: var(--line);
    color: var(--text);
}

/* ===== core/page-hero.css ===== */
/* Shared page header */

.page-hero,
.notion-page__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px 20px;
}

.page-hero__intro,
.notion-page__intro {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    max-width: 44rem;
}

.page-hero__intro h2,
.notion-page__title {
    margin: 0;
    font-size: 22px;
    font-weight: 650;
    letter-spacing: -0.035em;
    line-height: 1.2;
}

.page-hero__desc,
.notion-page__desc {
    margin: 0;
    max-width: 52ch;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.notion-page__icon { display: none; }

.page-hero__stats,
.page-hero__tags,
.notion-props {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.page-hero__tag,
.notion-prop {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 12px;
    box-shadow: var(--shadow-xs);
}

.notion-prop__icon {
    display: inline-flex;
    color: var(--muted);
}

.notion-prop__name {
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
}

.notion-prop__value {
    color: var(--text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.page-stat,
.page-hero .team-stat,
.page-hero .accounts-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}

.page-stat__icon,
.page-hero .team-stat__icon,
.page-hero .accounts-stat__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm, 6px);
    background: var(--soft);
    color: var(--text-secondary);
}

.page-stat__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.page-stat__label {
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.page-stat__value {
    margin: 0;
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.page-stat__hint,
.reels-stat__hint,
.accounts-stat__hint,
.team-stat__hint,
.accounts-panel__count-hint {
    display: none;
}

.page-stat--warn .page-stat__icon {
    background: var(--warn-bg);
    color: var(--warn);
}

.page-stat--warn .page-stat__value { color: var(--warn); }

.team-panel,
.accounts-panel,
.import-panel {
    box-shadow: var(--shadow-card);
}

@media (max-width: 768px) {
    .page-hero,
    .notion-page__header {
        flex-direction: column;
        align-items: stretch;
    }

    .page-hero__desc,
    .notion-page__desc { max-width: none; }
}

/* ===== core/sidebar.css ===== */
/* Sidebar — Sequoia Settings structure (solid, aligned rail) */

.sidebar {
    position: sticky;
    top: 0;
    z-index: 200;
    flex-shrink: 0;
    width: var(--sidebar-w);
    height: 100vh;
    border-right: 1px solid var(--line);
    background: var(--elevated);
    box-shadow: none;
    transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1);

    --sidebar-pad: 12px;
    --sidebar-inset: 6px;
    --sidebar-rail: 28px;
    --sidebar-gap: 10px;
    --sidebar-control: 28px;
    --sidebar-text-x: calc(var(--sidebar-inset) + var(--sidebar-rail) + var(--sidebar-gap));
    --sidebar-item-h: 32px;
    --sidebar-section-gap: 18px;
}

.sidebar__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* Header — locked to topbar height for a continuous shell line */
.sidebar__header {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: 8px;
    justify-content: space-between;
    height: var(--topbar-h);
    min-height: var(--topbar-h);
    padding: 0 var(--sidebar-pad);
    box-sizing: border-box;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}

.sidebar__brand {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    min-height: var(--sidebar-control);
}

.sidebar__brand .brand {
    display: flex;
    align-items: center;
    gap: var(--sidebar-gap);
    min-width: 0;
    width: 100%;
    height: var(--sidebar-control);
    padding-left: var(--sidebar-inset);
    box-sizing: border-box;
}

.sidebar__brand .brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
    border-radius: 7px;
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    box-shadow: none;
    color: var(--accent);
    flex-shrink: 0;
    height: var(--sidebar-rail);
    width: var(--sidebar-rail);
}

.sidebar__brand .brand-mark svg,
.sidebar__brand .brand-mark__logo {
    display: block;
    height: 16px;
    width: 16px;
}

.sidebar__brand .brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    line-height: 1;
}

.sidebar__brand .brand-text strong {
    display: block;
    overflow: hidden;
    color: var(--text);
    font-size: 13px;
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar__brand .brand-text span {
    display: none;
}

.sidebar__toolbar {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: 2px;
    height: var(--sidebar-control);
}

.sidebar__collapse,
.sidebar__close {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--muted);
    cursor: pointer;
    display: none;
    flex-shrink: 0;
    height: var(--sidebar-control);
    justify-content: center;
    padding: 0;
    position: relative;
    transition: background 120ms ease, color 120ms ease;
    width: var(--sidebar-control);
}

.sidebar__collapse:hover,
.sidebar__close:hover {
    background: var(--surface-hover);
    color: var(--text);
}

.sidebar__collapse-icon {
    display: block;
    flex-shrink: 0;
    height: 16px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
}

.sidebar__collapse .sidebar__collapse-icon--out {
    display: none;
}

html[data-sidebar-collapsed="true"] .sidebar__collapse .sidebar__collapse-icon--in {
    display: none;
}

html[data-sidebar-collapsed="true"] .sidebar__collapse .sidebar__collapse-icon--out {
    display: block;
}

/* Body / nav */
.sidebar__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px var(--sidebar-pad) 12px;
    scrollbar-color: color-mix(in srgb, var(--border) 70%, transparent) transparent;
    scrollbar-width: thin;
}

.sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: var(--sidebar-section-gap);
}

.sidebar__section {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sidebar__section + .sidebar__section {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.sidebar__section-title {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
    margin: 0 0 2px;
    padding: 4px var(--sidebar-inset) 4px var(--sidebar-text-x);
    text-transform: none;
}

.sidebar__section:first-child .sidebar__section-title {
    padding-top: 2px;
}

.sidebar__menu {
    display: flex;
    flex-direction: column;
    gap: 1px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar__item {
    margin: 0;
}

/* Tree group — fixed sub-topics (Social) */
.sidebar__tree {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
}

.sidebar__tree-head {
    align-items: center;
    color: var(--secondary);
    display: flex;
    font-size: 12px;
    font-weight: 600;
    gap: var(--sidebar-gap);
    letter-spacing: 0.04em;
    line-height: 1;
    min-height: 30px;
    padding: 0 var(--sidebar-inset);
    text-transform: uppercase;
}

.sidebar__tree-head-icon {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    height: var(--sidebar-rail);
    justify-content: center;
    opacity: 0.75;
    width: var(--sidebar-rail);
}

.sidebar__tree-head-icon svg {
    display: block;
    height: 15px;
    width: 15px;
}

.sidebar__tree-head-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar__tree-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    list-style: none;
    margin: 0 0 2px;
    padding: 0 0 0 calc(var(--sidebar-text-x) - 10px);
    position: relative;
}

.sidebar__tree-menu::before {
    background: color-mix(in srgb, var(--line) 80%, transparent);
    bottom: 8px;
    content: "";
    left: calc(var(--sidebar-inset) + var(--sidebar-rail) / 2 - 0.5px);
    position: absolute;
    top: 6px;
    width: 1px;
}

.sidebar__tree-item {
    margin: 0;
    position: relative;
}

.sidebar__tree-item::before {
    background: color-mix(in srgb, var(--line) 80%, transparent);
    content: "";
    height: 1px;
    left: calc(var(--sidebar-inset) + var(--sidebar-rail) / 2 - 8px);
    position: absolute;
    top: calc(var(--sidebar-item-h) / 2);
    width: 8px;
}

.sidebar__sublink {
    align-items: center;
    border-radius: 8px;
    color: var(--secondary);
    cursor: pointer;
    display: flex;
    font-size: 13.5px;
    font-weight: 500;
    gap: 8px;
    line-height: 1.2;
    margin: 0;
    min-height: calc(var(--sidebar-item-h) - 2px);
    padding: 0 10px 0 4px;
    position: relative;
    transition: background 120ms ease, color 120ms ease;
}

.sidebar__sublink-icon {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    height: 24px;
    justify-content: center;
    opacity: 0.8;
    width: 24px;
}

.sidebar__sublink-icon svg {
    display: block;
    height: 16px;
    width: 16px;
}

.sidebar__sublink-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar__sublink:hover {
    background: var(--hover);
    color: var(--text);
}

.sidebar__sublink:hover .sidebar__sublink-icon {
    opacity: 1;
}

.sidebar__sublink.is-active {
    background: var(--accent-soft);
    color: var(--text);
    font-weight: 600;
}

.sidebar__sublink.is-active .sidebar__sublink-icon {
    color: var(--accent);
    opacity: 1;
}

.sidebar__tree.has-active-child .sidebar__tree-head {
    color: var(--text);
}

.sidebar__tree.has-active-child .sidebar__tree-head-icon {
    color: var(--accent);
    opacity: 0.9;
}

.sidebar__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sidebar-gap);
    min-height: var(--sidebar-item-h);
    margin: 0;
    padding: 0 var(--sidebar-inset);
    border-radius: 8px;
    color: var(--secondary);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.2;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.sidebar__link::before {
    display: none;
}

.sidebar__link-icon {
    align-items: center;
    color: inherit;
    display: flex;
    flex-shrink: 0;
    height: var(--sidebar-rail);
    justify-content: center;
    width: var(--sidebar-rail);
    opacity: 0.88;
}

.sidebar__link-icon svg {
    display: block;
    height: 16px;
    width: 16px;
}

.sidebar__link[for="tab-pixel"] .sidebar__link-icon svg {
    transform: scale(1.04);
    transform-origin: center;
}

.sidebar__link-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar__link:hover {
    background: var(--hover);
    color: var(--text);
}

.sidebar__link:hover .sidebar__link-icon {
    opacity: 1;
}

.sidebar__badge {
    background: var(--accent);
    border-radius: 999px;
    color: #fff;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    min-width: 18px;
    padding: 3px 6px;
    text-align: center;
}

#tab-productivity:checked ~ .sidebar .sidebar__link[for="tab-productivity"],
#tab-reels:checked ~ .sidebar .sidebar__link[for="tab-reels"],
#tab-accounts:checked ~ .sidebar .sidebar__link[for="tab-accounts"],
#tab-publish:checked ~ .sidebar .sidebar__link[for="tab-publish"],
#tab-analytics:checked ~ .sidebar .sidebar__link[for="tab-analytics"],
#tab-downloader:checked ~ .sidebar .sidebar__link[for="tab-downloader"],
#tab-studio:checked ~ .sidebar .sidebar__link[for="tab-studio"],
#tab-team:checked ~ .sidebar .sidebar__link[for="tab-team"],
#tab-bot:checked ~ .sidebar .sidebar__link[for="tab-bot"],
#tab-pixel:checked ~ .sidebar .sidebar__link[for="tab-pixel"] {
    background: var(--accent-soft);
    color: var(--text);
    font-weight: 600;
}

#tab-productivity:checked ~ .sidebar .sidebar__link[for="tab-productivity"]::before,
#tab-reels:checked ~ .sidebar .sidebar__link[for="tab-reels"]::before,
#tab-accounts:checked ~ .sidebar .sidebar__link[for="tab-accounts"]::before,
#tab-publish:checked ~ .sidebar .sidebar__link[for="tab-publish"]::before,
#tab-analytics:checked ~ .sidebar .sidebar__link[for="tab-analytics"]::before,
#tab-downloader:checked ~ .sidebar .sidebar__link[for="tab-downloader"]::before,
#tab-studio:checked ~ .sidebar .sidebar__link[for="tab-studio"]::before,
#tab-team:checked ~ .sidebar .sidebar__link[for="tab-team"]::before,
#tab-bot:checked ~ .sidebar .sidebar__link[for="tab-bot"]::before,
#tab-pixel:checked ~ .sidebar .sidebar__link[for="tab-pixel"]::before {
    display: none;
}

#tab-productivity:checked ~ .sidebar .sidebar__link[for="tab-productivity"] .sidebar__link-icon,
#tab-reels:checked ~ .sidebar .sidebar__link[for="tab-reels"] .sidebar__link-icon,
#tab-accounts:checked ~ .sidebar .sidebar__link[for="tab-accounts"] .sidebar__link-icon,
#tab-publish:checked ~ .sidebar .sidebar__link[for="tab-publish"] .sidebar__link-icon,
#tab-analytics:checked ~ .sidebar .sidebar__link[for="tab-analytics"] .sidebar__link-icon,
#tab-downloader:checked ~ .sidebar .sidebar__link[for="tab-downloader"] .sidebar__link-icon,
#tab-studio:checked ~ .sidebar .sidebar__link[for="tab-studio"] .sidebar__link-icon,
#tab-team:checked ~ .sidebar .sidebar__link[for="tab-team"] .sidebar__link-icon,
#tab-bot:checked ~ .sidebar .sidebar__link[for="tab-bot"] .sidebar__link-icon,
#tab-pixel:checked ~ .sidebar .sidebar__link[for="tab-pixel"] .sidebar__link-icon {
    color: var(--accent);
    opacity: 1;
}

/* Footer */
.sidebar__footer {
    border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
    flex-shrink: 0;
    padding: 10px var(--sidebar-pad) 12px;
}

.sidebar__profile {
    align-items: center;
    border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--soft) 45%, var(--surface));
    display: flex;
    gap: var(--sidebar-gap);
    min-height: 44px;
    min-width: 0;
    padding: 6px var(--sidebar-inset) 6px 6px;
    transition: background 120ms ease, border-color 120ms ease;
}

.sidebar__profile:hover {
    background: var(--hover);
    border-color: var(--line-strong);
}

.sidebar__avatar {
    align-items: center;
    background: color-mix(in srgb, var(--accent) 14%, var(--soft));
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
    border-radius: 999px;
    color: var(--text);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 650;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.sidebar__user-meta {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
    min-width: 0;
}

.sidebar__user-name {
    color: var(--text);
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar__user-role {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar__quick-actions {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: 2px;
}

.sidebar__icon-btn,
.sidebar__theme.theme-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    height: var(--sidebar-control);
    justify-content: center;
    padding: 0;
    transition: background 120ms ease, color 120ms ease;
    width: var(--sidebar-control);
}

.sidebar__icon-btn:hover,
.sidebar__theme.theme-toggle:hover {
    background: color-mix(in srgb, var(--surface-hover) 80%, var(--border));
    color: var(--text);
}

.sidebar__logout {
    margin: 0;
}

.sidebar__logout-btn svg,
.sidebar__theme.theme-toggle svg {
    display: block;
}

.theme-toggle__icon {
    align-items: center;
    display: flex;
    justify-content: center;
}

.theme-toggle__icon--light {
    display: none;
}

[data-theme="light"] .theme-toggle__icon--dark {
    display: none;
}

[data-theme="light"] .theme-toggle__icon--light {
    display: flex;
}

.theme-toggle--floating {
    position: fixed;
    right: var(--space-4);
    top: var(--space-4);
    z-index: 50;
}

.sidebar-backdrop {
    display: none;
}

/* Theme — keep sidebar on shared tokens (same tone as the app) */
[data-theme="dark"] .sidebar__link-icon,
[data-theme="dark"] .sidebar__sublink-icon {
    opacity: 0.9;
}

[data-theme="dark"] .sidebar__collapse,
[data-theme="dark"] .sidebar__close,
[data-theme="dark"] .sidebar__icon-btn,
[data-theme="dark"] .sidebar__theme.theme-toggle {
    color: var(--secondary);
}

[data-theme="dark"] .sidebar__collapse:hover,
[data-theme="dark"] .sidebar__close:hover,
[data-theme="dark"] .sidebar__icon-btn:hover,
[data-theme="dark"] .sidebar__theme.theme-toggle:hover {
    background: var(--hover);
    color: var(--text);
}

/* Collapsed (desktop) */
@media (min-width: 769px) {
    .sidebar__collapse {
        display: flex;
    }

    html[data-sidebar-collapsed="true"] .sidebar {
        overflow: visible;
        width: var(--sidebar-w-collapsed);
    }

    html[data-sidebar-collapsed="true"] .sidebar__inner {
        overflow: visible;
    }

    html[data-sidebar-collapsed="true"] .sidebar__header {
        flex-direction: column;
        align-items: center;
        gap: 6px;
        height: auto;
        min-height: var(--topbar-h);
        padding: 10px 8px 8px;
    }

    html[data-sidebar-collapsed="true"] .sidebar__brand {
        display: flex;
        flex: none;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    html[data-sidebar-collapsed="true"] .sidebar__brand .brand {
        gap: 0;
        justify-content: center;
        width: auto;
        padding-left: 0;
        margin: 0;
    }

    html[data-sidebar-collapsed="true"] .sidebar__brand .brand-mark {
        height: 28px;
        width: 28px;
    }

    html[data-sidebar-collapsed="true"] .sidebar__toolbar {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    html[data-sidebar-collapsed="true"] .sidebar__section-title,
    html[data-sidebar-collapsed="true"] .sidebar__link-label,
    html[data-sidebar-collapsed="true"] .sidebar__tree-head-label,
    html[data-sidebar-collapsed="true"] .sidebar__sublink-label,
    html[data-sidebar-collapsed="true"] .sidebar__user-meta,
    html[data-sidebar-collapsed="true"] .sidebar .brand-text {
        display: none;
    }

    html[data-sidebar-collapsed="true"] .sidebar__section + .sidebar__section {
        border-top: 0;
        margin-top: 0;
        padding-top: 0;
    }

    html[data-sidebar-collapsed="true"] .sidebar__body {
        overflow: visible;
        padding: 8px 8px 12px;
    }

    html[data-sidebar-collapsed="true"] .sidebar__nav {
        gap: 8px;
    }

    html[data-sidebar-collapsed="true"] .sidebar__item {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    html[data-sidebar-collapsed="true"] .sidebar__menu {
        align-items: center;
    }

    html[data-sidebar-collapsed="true"] .sidebar__link {
        height: 40px;
        justify-content: center;
        min-height: 40px;
        padding: 0;
        width: 40px;
    }

    html[data-sidebar-collapsed="true"] .sidebar__link::before {
        left: 2px;
        height: 0;
        width: 3px;
    }

    html[data-sidebar-collapsed="true"] #tab-productivity:checked ~ .sidebar .sidebar__link[for="tab-productivity"]::before,
#tab-reels:checked ~ .sidebar .sidebar__link[for="tab-reels"]::before,
    html[data-sidebar-collapsed="true"] #tab-downloader:checked ~ .sidebar .sidebar__link[for="tab-downloader"]::before,
    html[data-sidebar-collapsed="true"] #tab-studio:checked ~ .sidebar .sidebar__link[for="tab-studio"]::before,
    html[data-sidebar-collapsed="true"] #tab-team:checked ~ .sidebar .sidebar__link[for="tab-team"]::before,
    html[data-sidebar-collapsed="true"] #tab-bot:checked ~ .sidebar .sidebar__link[for="tab-bot"]::before,
    html[data-sidebar-collapsed="true"] #tab-pixel:checked ~ .sidebar .sidebar__link[for="tab-pixel"]::before {
        height: 18px;
    }

    html[data-sidebar-collapsed="true"] .sidebar__tree-head {
        display: none;
    }

    html[data-sidebar-collapsed="true"] .sidebar__tree-menu {
        align-items: center;
        gap: 4px;
        padding: 0;
    }

    html[data-sidebar-collapsed="true"] .sidebar__tree-menu::before,
    html[data-sidebar-collapsed="true"] .sidebar__tree-item::before {
        display: none;
    }

    html[data-sidebar-collapsed="true"] .sidebar__tree-item {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    html[data-sidebar-collapsed="true"] .sidebar__sublink {
        height: 40px;
        justify-content: center;
        min-height: 40px;
        padding: 0;
        width: 40px;
    }

    html[data-sidebar-collapsed="true"] .sidebar__sublink-icon {
        height: 20px;
        opacity: 0.88;
        width: 20px;
    }

    html[data-sidebar-collapsed="true"] .sidebar__sublink,
    html[data-sidebar-collapsed="true"] .sidebar__sublink:hover::after {
        position: relative;
    }

    html[data-sidebar-collapsed="true"] .sidebar__sublink:hover::after {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 6px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
        color: var(--text);
        content: attr(data-tooltip);
        font-size: 12px;
        font-weight: 500;
        left: calc(100% + 8px);
        letter-spacing: normal;
        line-height: 1.2;
        padding: 6px 8px;
        pointer-events: none;
        position: absolute;
        text-transform: none;
        top: 50%;
        transform: translateY(-50%);
        white-space: nowrap;
        z-index: 400;
    }

    html[data-sidebar-collapsed="true"] .sidebar__link-icon {
        height: 20px;
        opacity: 0.88;
        width: 20px;
    }

    html[data-sidebar-collapsed="true"] .sidebar__badge {
        font-size: 0;
        height: 7px;
        min-width: 7px;
        padding: 0;
        position: absolute;
        right: 5px;
        top: 5px;
        width: 7px;
    }

    html[data-sidebar-collapsed="true"] .sidebar__footer {
        padding: 8px;
    }

    html[data-sidebar-collapsed="true"] .sidebar__profile {
        align-items: center;
        flex-direction: column;
        gap: 6px;
        padding: 0;
    }

    html[data-sidebar-collapsed="true"] .sidebar__profile:hover {
        background: transparent;
    }

    html[data-sidebar-collapsed="true"] .sidebar__quick-actions {
        flex-direction: column;
        gap: 4px;
        width: 100%;
    }

    html[data-sidebar-collapsed="true"] .sidebar__avatar {
        height: 32px;
        width: 32px;
    }

    html[data-sidebar-collapsed="true"] .sidebar__theme.theme-toggle,
    html[data-sidebar-collapsed="true"] .sidebar__logout-btn {
        height: 40px;
        width: 40px;
    }

    html[data-sidebar-collapsed="true"] .sidebar__link,
    html[data-sidebar-collapsed="true"] .sidebar__collapse,
    html[data-sidebar-collapsed="true"] .sidebar__avatar,
    html[data-sidebar-collapsed="true"] .sidebar__theme,
    html[data-sidebar-collapsed="true"] .sidebar__logout-btn {
        position: relative;
    }

    html[data-sidebar-collapsed="true"] .sidebar__link:hover::after,
    html[data-sidebar-collapsed="true"] .sidebar__collapse:hover::after,
    html[data-sidebar-collapsed="true"] .sidebar__avatar:hover::after,
    html[data-sidebar-collapsed="true"] .sidebar__theme:hover::after,
    html[data-sidebar-collapsed="true"] .sidebar__logout-btn:hover::after {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 6px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
        color: var(--text);
        content: attr(data-tooltip);
        font-size: 12px;
        font-weight: 500;
        left: calc(100% + 8px);
        letter-spacing: normal;
        line-height: 1.2;
        padding: 6px 8px;
        pointer-events: none;
        position: absolute;
        text-transform: none;
        top: 50%;
        transform: translateY(-50%);
        white-space: nowrap;
        z-index: 400;
    }
}

/* Mobile drawer */
@media (max-width: 768px) {
    .sidebar {
        --sidebar-pad: 16px;
        border-right: none;
        height: 100dvh;
        left: 0;
        max-width: min(300px, 84vw);
        position: fixed;
        top: 0;
        transform: translateX(-100%);
        transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1);
        width: min(300px, 84vw);
        z-index: 200;
    }

    .sidebar__inner {
        padding-top: env(safe-area-inset-top, 0px);
    }

    .sidebar__header {
        height: var(--topbar-h);
        min-height: var(--topbar-h);
        padding: 0 var(--sidebar-pad);
    }

    .sidebar__toolbar .sidebar__collapse {
        display: none;
    }

    .sidebar__close {
        display: flex;
    }

    .sidebar__body {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 12px var(--sidebar-pad) 16px;
    }

    .sidebar__link {
        min-height: 40px;
    }

    .sidebar__footer {
        padding:
            10px
            var(--sidebar-pad)
            max(14px, env(safe-area-inset-bottom, 0px));
    }

    .sidebar__profile {
        min-height: 40px;
    }

    .sidebar-backdrop {
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        background: var(--overlay);
        display: block;
        inset: 0;
        opacity: 0;
        pointer-events: none;
        position: fixed;
        transition: opacity 240ms ease;
        z-index: 150;
    }

    .sidebar-toggle:checked ~ .sidebar {
        box-shadow: 8px 0 32px rgba(0, 0, 0, 0.2);
        transform: translateX(0);
    }

    .sidebar-toggle:checked ~ .sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ===== core/topbar.css ===== */
/* Topbar — minimal SaaS shell header */

.topbar {
    --shell-control: 32px;
    position: sticky;
    top: 0;
    z-index: 100;
    isolation: isolate;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: var(--topbar-h);
    min-height: var(--topbar-h);
    padding: 0 var(--page-x, 24px);
    box-sizing: border-box;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
    background: var(--bg);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.topbar__lead {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    height: 100%;
}

.topbar__menu {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--secondary);
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.topbar__menu:hover {
    border-color: var(--line-strong);
    background: var(--hover);
    color: var(--text);
}

.topbar__brand {
    display: none;
    min-width: 0;
}

.topbar__brand .brand {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    height: 100%;
}

.topbar__brand .brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
}

.topbar__brand .brand-mark svg,
.topbar__brand .brand-mark__logo {
    display: block;
    width: 16px;
    height: 16px;
    transform: translateY(0.5px);
}

.topbar__brand .brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1;
}

.topbar__brand .brand-text strong {
    font-size: 13px;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.topbar__nav {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    height: var(--shell-control);
}

.topbar__nav-label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.topbar__nav-page {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 0;
    height: var(--shell-control);
    min-height: var(--shell-control);
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    box-shadow: var(--shadow);
    color: var(--text);
    font-size: 13px;
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1;
    white-space: nowrap;
}

.topbar__page {
    display: none;
    animation: topbar-crumb-in 180ms var(--ease, ease);
}

#tab-productivity:checked ~ .app-shell .topbar__page[data-tab="productivity"],
#tab-reels:checked ~ .app-shell .topbar__page[data-tab="reels"],
#tab-accounts:checked ~ .app-shell .topbar__page[data-tab="accounts"],
#tab-publish:checked ~ .app-shell .topbar__page[data-tab="publish"],
#tab-analytics:checked ~ .app-shell .topbar__page[data-tab="analytics"],
#tab-downloader:checked ~ .app-shell .topbar__page[data-tab="downloader"],
#tab-studio:checked ~ .app-shell .topbar__page[data-tab="studio"],
#tab-team:checked ~ .app-shell .topbar__page[data-tab="team"],
#tab-bot:checked ~ .app-shell .topbar__page[data-tab="bot"],
#tab-pixel:checked ~ .app-shell .topbar__page[data-tab="pixel"] {
    display: inline;
}

.topbar__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
    min-width: 0;
    height: 100%;
}

.topbar__queue {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 220px;
    height: var(--shell-control);
    min-height: var(--shell-control);
    padding: 0 11px;
    border: 1px solid color-mix(in srgb, var(--warn) 24%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--warn-bg) 80%, var(--surface));
    color: var(--warn);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.topbar__queue-dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 16%, transparent);
    animation: topbar-pulse 1.6s ease infinite;
}

.topbar__queue-count,
.topbar__queue-trigger {
    display: none;
}

.topbar__cluster {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: calc(var(--shell-control) + 6px);
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 88%, var(--soft));
    box-shadow: var(--shadow);
    box-sizing: border-box;
}

.topbar__tool,
.topbar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--shell-control);
    height: var(--shell-control);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--secondary);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}

.topbar__tool:hover,
.topbar__icon:hover {
    background: var(--hover);
    color: var(--text);
}

.topbar__tool .theme-toggle__label {
    display: none;
}

.topbar__tool .theme-toggle__icon {
    align-items: center;
    justify-content: center;
}

.topbar__tool .theme-toggle__icon--light {
    display: none;
}

.topbar__tool .theme-toggle__icon--dark {
    display: inline-flex;
}

[data-theme="light"] .topbar__tool .theme-toggle__icon--dark {
    display: none;
}

[data-theme="light"] .topbar__tool .theme-toggle__icon--light {
    display: inline-flex;
}

.topbar__user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 176px;
    height: var(--shell-control);
    min-height: var(--shell-control);
    padding: 0 10px 0 3px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    transition: background 140ms ease;
}

.topbar__user:hover {
    background: var(--hover);
}

.topbar__avatar {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 650;
    line-height: 1;
    background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--accent) 65%, var(--primary)));
    color: var(--primary-fg);
}

.topbar__user-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    min-width: 0;
    padding-right: 2px;
}

.topbar__user-name {
    overflow: hidden;
    color: var(--text);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: -0.01em;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar__user-role {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
}

.topbar__user-role.is-admin {
    padding: 1px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-soft) 75%, var(--surface));
    color: var(--accent);
}

.topbar__logout {
    margin: 0;
}

.topbar__logout-btn:hover {
    background: var(--bad-bg);
    color: var(--bad);
}

@keyframes topbar-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .55; transform: scale(.86); }
}

@keyframes topbar-crumb-in {
    from { opacity: 0; transform: translateY(2px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
    .topbar {
        height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
        min-height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
        padding:
            env(safe-area-inset-top, 0px)
            max(var(--page-x), env(safe-area-inset-right, 0px))
            0
            max(var(--page-x), env(safe-area-inset-left, 0px));
        background: color-mix(in srgb, var(--elevated) 90%, transparent);
    }

    .topbar__lead,
    .topbar__actions {
        height: var(--topbar-h);
        min-height: var(--topbar-h);
        align-items: center;
    }

    .topbar__menu {
        display: inline-flex;
        width: var(--shell-control);
        height: var(--shell-control);
    }

    .topbar__brand {
        display: flex;
        align-items: center;
        height: var(--shell-control);
    }

    .topbar__nav {
        display: none;
    }

    .topbar__cluster {
        gap: 2px;
        height: calc(var(--shell-control) + 6px);
        padding: 3px;
    }

    .topbar__tool,
    .topbar__icon {
        width: var(--shell-control);
        height: var(--shell-control);
    }

    .topbar__action--desktop {
        display: none;
    }

    .topbar__queue {
        justify-content: center;
        width: var(--shell-control);
        min-width: var(--shell-control);
        height: var(--shell-control);
        padding: 0;
    }

    .topbar__queue-dot,
    .topbar__queue-text {
        display: none;
    }

    .topbar__queue-count {
        display: block;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
    }

    .topbar__user {
        max-width: none;
        height: var(--shell-control);
        min-height: var(--shell-control);
        padding: 0 3px;
    }

    .topbar__user-info {
        display: none;
    }

    .topbar__avatar {
        width: 26px;
        height: 26px;
        font-size: 12px;
    }
}

@media (min-width: 420px) and (max-width: 768px) {
    .topbar__user {
        gap: 8px;
        padding: 3px 10px 3px 3px;
    }

    .topbar__user-info {
        display: flex;
        justify-content: center;
    }

    .topbar__user-role {
        display: none;
    }

    .topbar__user-name {
        max-width: 72px;
        font-size: 11px;
    }
}

@media (max-width: 380px) {
    .topbar__brand .brand-text {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .topbar__page,
    .topbar__queue-dot {
        animation: none;
    }
}

/* ===== core/mobile.css ===== */
/* Mobile shell — spacing, safe areas, shared panel patterns */

@media (max-width: 768px) {
    :root,
    [data-theme="dark"],
    [data-theme="light"] {
        --page-x: 16px;
        --page-py: 16px;
        --page-pb: 20px;
        --panel-x: var(--page-x);
        --gap-page: 16px;
        --gap-section: 14px;
        --topbar-h: 56px;
        --mobile-nav-h: 56px;
        --mobile-stack-gap: 14px;
        --mobile-section-gap: 12px;
        --mobile-stat-gap: 8px;
        --mobile-stat-pad-y: 8px;
        --mobile-stat-pad-x: 8px;
        --mobile-stat-value: 18px;
        --mobile-stat-label: 9px;
        --mobile-hero-title: 20px;
        --mobile-touch-min: 44px;
        --px: var(--page-x);
    }

    html {
        -webkit-text-size-adjust: 100%;
    }

    body {
        min-height: 100dvh;
        overflow-x: clip;
    }

    .app,
    .tabs {
        min-height: 100dvh;
        overflow-x: clip;
    }

    .app-shell {
        min-height: 100dvh;
        min-width: 0;
        overflow-x: clip;
        width: 100%;
    }

    .app-main,
    .tab-panels,
    .tab-panel {
        max-width: 100%;
        min-width: 0;
        overflow-x: clip;
    }

    .app-main {
        padding-bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom, 0px));
    }

    /* Unified page shell — same inset everywhere */
    .page,
    .fm-page,
    .bot-dash,
    .pixel-page,
    .pixel-dash,
    .team-page,
    .publish-page,
    .accounts-page,
    .reels-dash,
    .dl-page,
    .ig-page,
    .reel,
    #panel-reels .ig-page,
    #panel-reels .reel,
    #panel-downloader .dl-page,
    #panel-publish .publish-page,
    #panel-analytics .anx,
    #panel-accounts .accounts-page,
    #panel-team .team-page,
    #panel-bot .bot-dash,
    #panel-pixel .pixel-dash {
        box-sizing: border-box;
        gap: var(--mobile-stack-gap);
        margin: 0;
        min-width: 0;
        padding: var(--page-py) var(--page-x) var(--page-pb);
        width: 100%;
    }

    .page-hero,
    .accounts-hero,
    .team-page__header,
    #panel-bot .dash-hero,
    #panel-pixel .pixel-dash__header,
    #panel-reels .ig-head,
    #panel-reels .reel-head,
    #panel-accounts .accounts-page__head,
    #panel-publish .publish-page__head,
    #panel-analytics .anx-head,
    #panel-downloader .dl-head {
        gap: var(--mobile-section-gap);
        min-width: 0;
        width: 100%;
    }

    .page-hero__intro,
    .accounts-hero .page-hero__intro,
    .team-page__intro,
    #panel-bot .dash-hero__copy,
    #panel-pixel .dash-hero__copy,
    #panel-reels .ig-head__title,
    #panel-reels .reel-head__identity {
        gap: var(--space-1);
        min-width: 0;
    }

    .page-hero__intro h2,
    .accounts-hero .page-hero__intro h2,
    .team-page__intro h2,
    #panel-bot .dash-hero__copy h2,
    #panel-pixel .dash-hero__copy h2,
    #panel-reels .ig-head__title h2,
    #panel-reels .reel-head h2,
    #panel-accounts .accounts-page__head h2,
    #panel-publish .publish-page__head h2,
    #panel-analytics .anx-head__title,
    #panel-downloader .dl-head__title,
    h2 {
        font-size: var(--mobile-hero-title);
        letter-spacing: -0.02em;
        line-height: 1.15;
    }

    .page-hero__desc {
        font-size: var(--font-sm);
        max-width: none;
    }

    .toast,
    .notice {
        font-size: var(--font-sm);
        margin-inline: var(--page-x);
        padding: var(--space-3) var(--space-4);
    }

    /* Hero stats — compact grid */
    .page-hero__stats,
    .import-summary,
    .team-page__stats,
    .team-stats,
    .accounts-stats,
    .accounts-summary,
    .ranking-summary {
        display: grid;
        gap: var(--mobile-stat-gap);
        grid-template-columns: repeat(3, minmax(0, 1fr));
        min-width: 0;
        width: 100%;
    }

    .accounts-stats,
    .accounts-summary,
    .team-page__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-stat,
    .accounts-stat,
    .team-stat {
        align-items: center;
        flex-direction: column;
        gap: var(--space-1);
        max-width: none;
        min-width: 0;
        padding: var(--mobile-stat-pad-y) var(--mobile-stat-pad-x);
        text-align: center;
    }

    .accounts-stat--total,
    .team-stat--total {
        flex-direction: row;
        gap: var(--space-2);
        grid-column: 1 / -1;
        padding: var(--space-3);
        text-align: left;
    }

    .accounts-stat--total .accounts-stat__body,
    .team-stat--total .team-stat__body {
        align-items: flex-start;
    }

    .page-stat__body,
    .accounts-stat__body,
    .team-stat__body {
        align-items: center;
        gap: 2px;
        min-width: 0;
    }

    .page-stat__icon,
    .accounts-stat__icon,
    .team-stat__icon {
        height: 30px;
        width: 30px;
    }

    .accounts-stat--total .accounts-stat__icon,
    .team-stat--total .team-stat__icon {
        height: 32px;
        width: 32px;
    }

    .page-stat__value,
    .accounts-stat__value,
    .team-stat__value {
        font-size: var(--mobile-stat-value);
        line-height: 1;
    }

    .accounts-stat--total .accounts-stat__value,
    .team-stat--total .team-stat__value {
        font-size: 22px;
    }

    .page-stat__label,
    .accounts-stat__label,
    .team-stat__label {
        font-size: var(--mobile-stat-label);
        letter-spacing: 0.03em;
        line-height: 1.2;
    }

    .page-stat__hint,
    .accounts-stat__hint,
    .team-stat__hint {
        display: none;
    }

    /* Full-bleed panels edge-to-edge */
    .accounts-panel,
    .team-panel,
    .import-panel,
    .ranking-panel,
    .ranking-panel--queue {
        border-left: 0;
        border-radius: 0;
        border-right: 0;
        margin-left: calc(-1 * var(--page-x));
        margin-right: calc(-1 * var(--page-x));
        overflow: hidden;
    }

    .import-panel__head,
    .import-panel__body,
    .import-panel__foot,
    .accounts-panel__head,
    .accounts-panel__toolbar,
    .accounts-panel__body,
    .team-panel__head,
    .team-panel__toolbar,
    .team-panel__body,
    .ranking-panel__head,
    .ranking-panel__filters,
    .ranking-panel__body {
        padding-left: var(--page-x);
        padding-right: var(--page-x);
    }

    .import-layout {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-section-gap);
        min-width: 0;
    }

    /* Filter scroll — shared pattern */
    .accounts-filter-scroll,
    .team-filter-scroll,
    .ranking-filter-scroll {
        -webkit-overflow-scrolling: touch;
        margin-inline: calc(-1 * var(--page-x));
        min-width: 0;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        padding-block: 1px;
        padding-inline: var(--page-x);
        position: relative;
        scroll-padding-inline: var(--page-x);
        scrollbar-width: none;
    }

    .accounts-filter-scroll::after,
    .team-filter-scroll::after,
    .ranking-filter-scroll::after {
        background: linear-gradient(to right, transparent, var(--bg));
        content: '';
        height: 100%;
        pointer-events: none;
        position: absolute;
        right: 0;
        top: 0;
        width: 24px;
    }

    .accounts-filter-scroll::-webkit-scrollbar,
    .team-filter-scroll::-webkit-scrollbar,
    .ranking-filter-scroll::-webkit-scrollbar {
        display: none;
    }

    .accounts-search input,
    .team-search input,
    .import-editor textarea,
    .accounts-modal input,
    .team-modal input,
    .accounts-modal select,
    .team-modal select,
    .accounts-modal textarea,
    .team-modal textarea {
        font-size: 16px;
    }

    .accounts-search,
    .team-search {
        min-height: var(--mobile-touch-min);
        width: 100%;
    }

    .btn,
    .accounts-modal__footer .btn,
    .team-modal__footer .btn {
        min-height: var(--mobile-touch-min);
    }

    .btn--sm {
        min-height: 40px;
    }

    /* Disable hover lift on touch */
    @media (hover: none) {
        .page-stat:hover,
        .accounts-stat:hover,
        .team-stat:hover,
        .item:hover,
        .account-card:hover {
            box-shadow: var(--shadow-xs);
            transform: none;
        }
    }
}

@media (max-width: 560px) {
    :root,
    [data-theme="dark"],
    [data-theme="light"] {
        --page-x: 14px;
        --page-py: 14px;
        --page-pb: 18px;
        --mobile-stack-gap: 12px;
        --mobile-section-gap: 12px;
        --mobile-stat-gap: 8px;
        --mobile-stat-pad-y: 8px;
        --mobile-stat-pad-x: 6px;
        --mobile-stat-value: 17px;
        --mobile-stat-label: 8px;
        --mobile-hero-title: 20px;
        --px: var(--page-x);
    }

    .page-hero__stats,
    .import-summary,
    .team-stats,
    .ranking-summary,
    .accounts-stats,
    .accounts-summary,
    .team-page__stats {
        gap: var(--mobile-stat-gap);
    }

    .page-stat__icon,
    .accounts-stat__icon,
    .team-stat__icon {
        height: 28px;
        width: 28px;
    }

    .accounts-stat--total,
    .team-stat--total {
        padding: var(--space-2) var(--space-3);
    }

    .accounts-stat--total .accounts-stat__value,
    .team-stat--total .team-stat__value {
        font-size: 20px;
    }

    .account-card__credentials {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 380px) {
    :root,
    [data-theme="dark"],
    [data-theme="light"] {
        --page-x: 12px;
        --mobile-stat-value: 16px;
        --mobile-stat-label: 8px;
        --px: var(--page-x);
    }

    .page-stat__label,
    .accounts-stat__label,
    .team-stat__label,
    .ranking-summary .page-stat__label {
        letter-spacing: 0.02em;
    }
}

/* Scroll lock when mobile drawer is open */
body.sidebar-open {
    overflow: hidden;
    touch-action: none;
}

/* ===== core/mobile-nav.css ===== */
/* Mobile dock — unified action bar + bottom tabs */

.mobile-dock {
    display: none;
}

.mobile-dock__action {
    display: none;
}

@media (max-width: 768px) {
    :root,
    [data-theme="dark"],
    [data-theme="light"] {
        --mobile-dock-action-h: 48px;
    }

    .mobile-dock {
        -webkit-backdrop-filter: blur(20px) saturate(1.2);
        backdrop-filter: blur(20px) saturate(1.2);
        background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
        border-top: 1px solid var(--border);
        bottom: 0;
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.07);
        display: flex;
        flex-direction: column;
        left: 0;
        padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
        position: fixed;
        right: 0;
        z-index: 120;
    }

    [data-theme="dark"] .mobile-dock {
        box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.38);
    }

    .mobile-dock__action {
        align-items: center;
        border-bottom: 1px solid var(--border);
        box-sizing: border-box;
        display: none;
        flex-shrink: 0;
        gap: var(--space-3);
        min-height: var(--mobile-dock-action-h);
        padding: var(--space-2) var(--safe-right, 16px) var(--space-2) var(--safe-left, 16px);
    }

    #tab-reels:checked ~ .mobile-dock .mobile-dock__action--import {
        display: flex;
    }

    .mobile-dock .mobile-dock__action--import[hidden] {
        display: none !important;
    }

    #tab-accounts:checked ~ .mobile-dock .mobile-dock__action--accounts {
        display: flex;
    }

    #tab-team:checked ~ .mobile-dock .mobile-dock__action--team {
        display: flex;
    }

    #tab-downloader:checked ~ .mobile-dock .mobile-dock__action--downloader {
        display: flex;
    }

    .mobile-dock .import-sticky-bar,
    .mobile-dock .accounts-sticky-bar,
    .mobile-dock .team-sticky-bar,
    .mobile-dock .dl-sticky-bar {
        background: transparent;
        border: 0;
        box-shadow: none;
        position: static;
        width: 100%;
    }

    .import-sticky-bar__info {
        display: flex;
        flex: 1;
        flex-direction: column;
        gap: 1px;
        justify-content: center;
        min-width: 0;
        padding-right: var(--space-2);
    }

    .import-sticky-bar__count {
        color: var(--text);
        font-size: var(--font-sm);
        font-weight: 700;
        line-height: 1.15;
    }

    .import-sticky-bar__hint {
        color: var(--muted);
        font-size: 11px;
        line-height: 1.2;
    }

    .import-sticky-bar__submit {
        flex-shrink: 0;
        font-size: var(--font-sm);
        font-weight: 600;
        min-height: 44px;
        min-width: 108px;
        padding-inline: var(--space-4);
        position: relative;
        touch-action: manipulation;
        z-index: 1;
    }

    .import-sticky-bar__submit:not(:disabled):active {
        transform: scale(0.98);
    }

    .import-sticky-bar__submit:disabled {
        background: var(--soft);
        border: 1px solid var(--border);
        color: var(--muted);
        cursor: not-allowed;
        opacity: 1;
        pointer-events: none;
    }

    .accounts-sticky-bar__btn {
        justify-content: center;
        min-height: 40px;
        width: 100%;
    }

    .team-sticky-bar__btn {
        justify-content: center;
        min-height: 40px;
        width: 100%;
    }

    .dl-sticky-bar {
        width: 100%;
    }

    .dl-sticky-bar__submit {
        align-items: center;
        border-radius: 14px;
        display: inline-flex;
        flex: 1 1 auto;
        font-size: 16px;
        font-weight: 650;
        gap: 8px;
        justify-content: center;
        min-height: 48px;
        min-width: 0;
        width: 100%;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    #tab-downloader:checked ~ .mobile-dock .mobile-dock__action--downloader {
        min-height: var(--mobile-dock-action-h, 48px);
        padding: 8px var(--safe-right, 16px) 8px var(--safe-left, 16px);
    }

    /* Tab bar lives inside dock — not fixed on its own */
    .mobile-dock .mobile-nav {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: transparent;
        border-top: 0;
        box-shadow: none;
        display: block;
        flex-shrink: 0;
        padding-bottom: 0;
        position: static;
    }

    .mobile-nav__inner {
        align-items: stretch;
        box-sizing: border-box;
        display: flex;
        gap: 4px;
        height: var(--mobile-nav-h);
        justify-content: stretch;
        padding: 4px max(16px, var(--page-x), env(safe-area-inset-right, 0px)) 4px max(16px, var(--page-x), env(safe-area-inset-left, 0px));
        width: 100%;
    }

    .mobile-nav__link {
        align-items: center;
        background: transparent;
        border: 0;
        color: var(--muted);
        cursor: pointer;
        display: flex;
        flex: 1 1 0;
        justify-content: center;
        min-width: 0;
        padding: 0;
        position: relative;
        -webkit-tap-highlight-color: transparent;
        text-decoration: none;
        transition: color 150ms ease;
    }

    .mobile-nav__pill {
        align-items: center;
        border-radius: var(--radius-lg);
        display: flex;
        flex-direction: column;
        gap: 3px;
        justify-content: center;
        max-width: 100%;
        min-height: 44px;
        min-width: 0;
        padding: 6px 10px;
        position: relative;
        transition: background 180ms ease, transform 120ms ease;
        width: 100%;
    }

    .mobile-nav__link:active .mobile-nav__pill {
        transform: scale(0.96);
    }

    .mobile-nav__icon-wrap {
        display: inline-flex;
        flex-shrink: 0;
        position: relative;
    }

    .mobile-nav__icon {
        align-items: center;
        color: inherit;
        display: inline-flex;
        height: 24px;
        justify-content: center;
        opacity: 0.72;
        transition: color 150ms ease, opacity 150ms ease;
        width: 24px;
    }

    .mobile-nav__icon svg {
        display: block;
    }

    .mobile-nav__link[for="tab-pixel"] .mobile-nav__icon svg {
        transform: scale(1.08);
        transform-origin: center;
    }

    .mobile-nav__label {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.01em;
        line-height: 1.1;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-nav__badge {
        align-items: center;
        background: var(--warn);
        border: 2px solid var(--bg-elevated);
        border-radius: var(--radius-full);
        color: #fff;
        display: inline-flex;
        font-size: 9px;
        font-weight: 700;
        height: 16px;
        justify-content: center;
        min-width: 16px;
        padding: 0 4px;
        position: absolute;
        right: -8px;
        top: -4px;
    }

    #tab-productivity:checked ~ .mobile-dock .mobile-nav__link[for="tab-productivity"],
    #tab-reels:checked ~ .mobile-dock .mobile-nav__link[for="tab-reels"],
    #tab-accounts:checked ~ .mobile-dock .mobile-nav__link[for="tab-accounts"],
    #tab-publish:checked ~ .mobile-dock .mobile-nav__link[for="tab-publish"],
    #tab-analytics:checked ~ .mobile-dock .mobile-nav__link[for="tab-analytics"],
    #tab-downloader:checked ~ .mobile-dock .mobile-nav__link[for="tab-downloader"],
    #tab-studio:checked ~ .mobile-dock .mobile-nav__link[for="tab-studio"],
    #tab-team:checked ~ .mobile-dock .mobile-nav__link[for="tab-team"],
    #tab-bot:checked ~ .mobile-dock .mobile-nav__link[for="tab-bot"],
    #tab-pixel:checked ~ .mobile-dock .mobile-nav__link[for="tab-pixel"] {
        color: var(--text);
    }

    #tab-reels:checked ~ .mobile-dock .mobile-nav__link[for="tab-reels"] .mobile-nav__pill,
    #tab-accounts:checked ~ .mobile-dock .mobile-nav__link[for="tab-accounts"] .mobile-nav__pill,
    #tab-publish:checked ~ .mobile-dock .mobile-nav__link[for="tab-publish"] .mobile-nav__pill,
    #tab-downloader:checked ~ .mobile-dock .mobile-nav__link[for="tab-downloader"] .mobile-nav__pill,
    #tab-studio:checked ~ .mobile-dock .mobile-nav__link[for="tab-studio"] .mobile-nav__pill,
    #tab-team:checked ~ .mobile-dock .mobile-nav__link[for="tab-team"] .mobile-nav__pill,
    #tab-bot:checked ~ .mobile-dock .mobile-nav__link[for="tab-bot"] .mobile-nav__pill,
    #tab-pixel:checked ~ .mobile-dock .mobile-nav__link[for="tab-pixel"] .mobile-nav__pill {
        background: var(--soft);
    }

    #tab-productivity:checked ~ .mobile-dock .mobile-nav__link[for="tab-productivity"] .mobile-nav__icon,
    #tab-reels:checked ~ .mobile-dock .mobile-nav__link[for="tab-reels"] .mobile-nav__icon,
    #tab-accounts:checked ~ .mobile-dock .mobile-nav__link[for="tab-accounts"] .mobile-nav__icon,
    #tab-publish:checked ~ .mobile-dock .mobile-nav__link[for="tab-publish"] .mobile-nav__icon,
    #tab-downloader:checked ~ .mobile-dock .mobile-nav__link[for="tab-downloader"] .mobile-nav__icon,
    #tab-studio:checked ~ .mobile-dock .mobile-nav__link[for="tab-studio"] .mobile-nav__icon,
    #tab-team:checked ~ .mobile-dock .mobile-nav__link[for="tab-team"] .mobile-nav__icon,
    #tab-bot:checked ~ .mobile-dock .mobile-nav__link[for="tab-bot"] .mobile-nav__icon,
    #tab-pixel:checked ~ .mobile-dock .mobile-nav__link[for="tab-pixel"] .mobile-nav__icon {
        opacity: 1;
    }

    #tab-productivity:checked ~ .mobile-dock .mobile-nav__link[for="tab-productivity"] .mobile-nav__label,
    #tab-reels:checked ~ .mobile-dock .mobile-nav__link[for="tab-reels"] .mobile-nav__label,
    #tab-accounts:checked ~ .mobile-dock .mobile-nav__link[for="tab-accounts"] .mobile-nav__label,
    #tab-publish:checked ~ .mobile-dock .mobile-nav__link[for="tab-publish"] .mobile-nav__label,
    #tab-analytics:checked ~ .mobile-dock .mobile-nav__link[for="tab-analytics"] .mobile-nav__label,
    #tab-downloader:checked ~ .mobile-dock .mobile-nav__link[for="tab-downloader"] .mobile-nav__label,
    #tab-studio:checked ~ .mobile-dock .mobile-nav__link[for="tab-studio"] .mobile-nav__label,
    #tab-team:checked ~ .mobile-dock .mobile-nav__link[for="tab-team"] .mobile-nav__label,
    #tab-bot:checked ~ .mobile-dock .mobile-nav__link[for="tab-bot"] .mobile-nav__label,
    #tab-pixel:checked ~ .mobile-dock .mobile-nav__link[for="tab-pixel"] .mobile-nav__label {
        font-weight: 700;
    }

    /* Extra page padding when dock has action row */
    .tabs:has(#tab-reels:checked) #panel-reels .ig-view.is-active[data-reels-view="import"],
    .tabs:has(#tab-reels:checked) #panel-reels .reel-view.is-active[data-reels-view="import"] {
        padding-bottom: calc(var(--mobile-nav-h) + var(--mobile-dock-action-h) + env(safe-area-inset-bottom, 0px) + var(--space-2));
    }

    .tabs:has(#tab-accounts:checked):has([data-accounts-sticky]) .accounts-page {
        padding-bottom: calc(var(--mobile-nav-h) + var(--mobile-dock-action-h) + env(safe-area-inset-bottom, 0px) + var(--space-2));
    }

    .tabs:has(#tab-team:checked):has([data-team-sticky]) .team-page {
        padding-bottom: calc(var(--mobile-nav-h) + var(--mobile-dock-action-h) + env(safe-area-inset-bottom, 0px) + var(--space-2));
    }

    .tabs:has(#tab-downloader:checked) #panel-downloader .dl-page {
        padding-bottom: calc(var(--mobile-dock-action-h) + var(--space-3));
    }

    #tab-downloader:checked ~ .mobile-dock {
        bottom: var(--dl-kb, 0px);
        transition: bottom 140ms ease;
    }

    html.dl-kb-open #tab-downloader:checked ~ .mobile-dock {
        padding-bottom: 0;
    }

    html.dl-kb-open #tab-downloader:checked ~ .mobile-dock .mobile-nav {
        display: none;
    }

    /* Toasts clear the dock */
    .toast,
    .notice,
    .notion-toast,
    .acc-toast,
    .toast-container {
        bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom, 0px) + 16px) !important;
    }

    .tabs:has(.mobile-dock__action:not([hidden])) .toast,
    .tabs:has(.mobile-dock__action:not([hidden])) .toast-container {
        bottom: calc(var(--mobile-nav-h) + var(--mobile-dock-action-h) + env(safe-area-inset-bottom, 0px) + 16px) !important;
    }
}

@media (max-width: 560px) {
    .mobile-nav__inner {
        gap: 2px;
        padding-inline: max(var(--page-x), env(safe-area-inset-left, 0px)) max(var(--page-x), env(safe-area-inset-right, 0px));
    }

    .mobile-nav__pill {
        gap: 2px;
        padding: 5px 4px;
    }

    .mobile-nav__label {
        font-size: 10px;
    }

    .mobile-nav__icon {
        height: 22px;
        width: 22px;
    }

    .import-sticky-bar__submit {
        min-height: 44px;
        min-width: 96px;
    }
}

/* ===== core/modals.css ===== */
/* Shared modal shell */

.accounts-modal,
.team-modal,
.bot-modal {
    margin: auto;
    padding: 0;
    overflow: hidden;
    max-height: min(90vh, 760px);
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

.accounts-modal:not([open]),
.team-modal:not([open]),
.bot-modal:not([open]) {
    display: none;
}

.accounts-modal::backdrop,
.team-modal::backdrop,
.bot-modal::backdrop {
    background: var(--overlay);
    backdrop-filter: blur(4px);
}

.accounts-modal__form,
.team-modal__form,
.bot-modal__form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: inherit;
}

.accounts-modal__header,
.team-modal__header,
.bot-modal__header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
}

.accounts-modal__body,
.team-modal__body,
.bot-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 18px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.accounts-modal__footer,
.team-modal__footer,
.bot-modal__footer {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border-top: 1px solid var(--border);
}

.accounts-modal__close,
.team-modal__close,
.bot-modal__close {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.accounts-modal__close:hover,
.team-modal__close:hover,
.bot-modal__close:hover {
    background: var(--surface-hover);
    color: var(--text);
}

@media (max-width: 768px) {
    .accounts-modal[open],
    .team-modal[open],
    .team-modal--create[open],
    .bot-modal[open] {
        position: fixed;
        inset: auto 0 0 0;
        top: auto;
        width: 100%;
        max-width: none;
        max-height: min(92dvh, 100%);
        margin: 0;
        border-radius: 14px 14px 0 0;
        border-bottom: 0;
        transform: none;
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.3);
    }

    .accounts-modal__footer,
    .team-modal__footer,
    .bot-modal__footer {
        flex-direction: column-reverse;
        padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    }

    .accounts-modal__footer .btn,
    .team-modal__footer .btn,
    .bot-modal__footer .btn {
        width: 100%;
        min-height: 44px;
    }

    .accounts-modal input,
    .team-modal input,
    .accounts-modal select,
    .team-modal select,
    .accounts-modal textarea,
    .team-modal textarea,
    .bot-modal input,
    .bot-modal select,
    .bot-modal textarea {
        font-size: 16px;
    }
}

body.modal-open { overflow: hidden; }
body.modal-open .topbar { visibility: hidden; }

/* ===== core/panels.css ===== */
/* Panel-specific layouts & reel cards */

/* Ranking */
.reels-summary {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-tight);
}

.summary-pill {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    color: var(--muted);
    font-size: var(--font-sm);
    font-weight: 500;
    padding: var(--space-2) var(--space-3);
}

.summary-pill strong {
    color: var(--text);
}

.summary-pill--warn {
    background: var(--warn-bg);
    border-color: rgba(194, 65, 12, 0.15);
    color: var(--warn);
}

.reels-summary-action {
    margin: 0;
}

.section-block {
    display: grid;
    gap: var(--gap-card);
}

.section-label {
    color: var(--muted);
    font-size: var(--font-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.reel-grid {
    display: grid;
    gap: var(--gap-card);
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.reel-grid-full {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.item:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.item.is-processing {
    background: var(--surface);
    border-color: var(--border-strong);
    border-style: dashed;
}

.item.is-error {
    background: var(--surface);
    border-color: rgba(248, 113, 113, 0.35);
}

.item.item-top-pick {
    border-color: var(--gold);
    box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.15);
}

.item-body {
    display: flex;
    flex-direction: column;
    gap: var(--gap-tight);
    padding: var(--space-3) var(--space-4) var(--space-4);
}

.item-top {
    align-items: flex-start;
    display: flex;
    gap: var(--gap-tight);
    justify-content: space-between;
}

.item-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-micro);
}

.item-actions {
    display: flex;
    flex-shrink: 0;
    gap: var(--gap-inline);
}

.item-actions a,
.item-actions button {
    font-size: var(--font-sm);
    font-weight: 500;
    min-height: auto;
    padding: 0;
}

.item-thumb {
    aspect-ratio: 9 / 14;
    background: var(--soft-2);
    overflow: hidden;
    position: relative;
}

.item-thumb a {
    display: block;
    height: 100%;
}

.item-thumb img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.thumb-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, transparent 55%);
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-micro);
    left: 0;
    padding: var(--space-3);
    pointer-events: none;
    position: absolute;
    right: 0;
}

.thumb-views {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
}

.thumb-views span {
    color: rgba(255, 255, 255, 0.6);
    display: block;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.06em;
    margin-bottom: var(--gap-micro);
    text-transform: uppercase;
}

.thumb-rank {
    border-radius: 6px;
    color: #fff;
    font-size: var(--font-xs);
    font-weight: 600;
    left: var(--gap-tight);
    padding: var(--gap-micro) var(--gap-tight);
    position: absolute;
    top: var(--gap-tight);
}

.thumb-rank.rank-1 { background: #ca8a04; }
.thumb-rank.rank-2 { background: #737373; }
.thumb-rank.rank-3 { background: #ea580c; }

.thumb-score {
    border-radius: 6px;
    color: #fff;
    font-size: var(--font-sm);
    font-weight: 600;
    padding: var(--gap-micro) var(--gap-tight);
    position: absolute;
    right: var(--gap-tight);
    top: var(--gap-tight);
}

.thumb-score.score-hot { background: rgba(22, 101, 52, 0.9); }
.thumb-score.score-warm { background: rgba(194, 65, 12, 0.9); }
.thumb-score.score-cool { background: rgba(82, 82, 82, 0.9); }

.item-caption {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--text);
    display: -webkit-box;
    font-size: var(--font-md);
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
    overflow: hidden;
}

.meta {
    color: var(--muted);
    font-size: var(--font-sm);
    margin: 0;
    overflow-wrap: anywhere;
}

.ratio-highlight {
    color: var(--text);
    font-weight: 600;
}

.recommendation {
    background: var(--soft);
    border-left: 2px solid var(--border-strong);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-secondary);
    font-size: var(--font-sm);
    line-height: 1.45;
    margin: 0;
    padding: var(--gap-tight) var(--gap-inline);
}

.metric-grid {
    display: grid;
    gap: var(--gap-tight);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
}

.metric {
    background: var(--soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: 10px;
    font-weight: 500;
    padding: var(--space-2) var(--gap-micro);
    text-align: center;
}

.metric strong {
    color: var(--text);
    display: block;
    font-size: var(--font-sm);
    font-weight: 600;
    line-height: 1.2;
}

.metric.featured {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--text-secondary);
    grid-column: span 4;
}

.metric.featured strong {
    color: var(--primary-fg);
    font-size: var(--font-lg);
}

.metric--score.score-hot {
    background: var(--success-bg);
    border-color: rgba(22, 101, 52, 0.15);
    color: var(--success);
}

.metric--score.score-hot strong { color: var(--success); }

.metric--score.score-warm {
    background: var(--warn-bg);
    border-color: rgba(194, 65, 12, 0.15);
    color: var(--warn);
}

.metric--score.score-warm strong { color: var(--warn); }

.metric-grid.compact-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metric-grid.compact-metrics .metric.featured {
    grid-column: span 3;
}

/* Responsive */
@media (min-width: 900px) {
    .reel-grid-full { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
    .reel-grid-full { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1600px) {
    .reel-grid-full { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .reel-grid,
    .reel-grid-full {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 560px) {
    .reel-grid,
    .reel-grid-full {
        grid-template-columns: 1fr;
    }

    .metric-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .metric.featured {
        grid-column: span 3;
    }
}

/* ===== components/permission-fields.css ===== */
/* Permission form fields — team modals & employee create */

.permission-fields {
    border: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    min-width: 0;
    padding: 0;
}

.permission-fields--cards .permission-fields__legend {
    margin-bottom: var(--space-1);
}

.permission-fields__legend {
    color: var(--text);
    font-size: var(--font-sm);
    font-weight: 600;
    padding: 0;
}

.permission-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.permission-option {
    cursor: pointer;
    display: block;
    position: relative;
}

.permission-option input {
    height: 0;
    opacity: 0;
    position: absolute;
    width: 0;
}

.permission-option__card {
    align-items: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.permission-option:hover .permission-option__card {
    background: var(--accent-soft);
    border-color: var(--border-strong);
}

.permission-option input:checked + .permission-option__card {
    background: var(--accent-soft);
    border-color: var(--text);
    box-shadow: inset 0 0 0 1px var(--text);
}

.permission-option input:focus-visible + .permission-option__card {
    box-shadow: 0 0 0 2px var(--ring);
}

.permission-option__icon {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    display: flex;
    flex-shrink: 0;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.permission-option input:checked + .permission-option__card .permission-option__icon {
    background: var(--text);
    border-color: var(--text);
    color: var(--primary-fg);
}

.permission-option__copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.permission-option__copy strong {
    font-size: var(--font-sm);
    font-weight: 600;
}

.permission-option__copy span {
    color: var(--muted);
    font-size: var(--font-xs);
}

.permission-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.permission-chip {
    cursor: pointer;
    display: inline-flex;
    position: relative;
}

.permission-chip input {
    height: 0;
    opacity: 0;
    position: absolute;
    width: 0;
}

.permission-chip__label {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    color: var(--muted);
    font-size: var(--font-xs);
    font-weight: 600;
    line-height: 1;
    padding: 8px 12px;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
    user-select: none;
    white-space: nowrap;
}

.permission-chip:hover .permission-chip__label {
    background: var(--accent-soft);
    border-color: var(--border-strong);
    color: var(--text-secondary);
}

.permission-chip input:checked + .permission-chip__label {
    background: var(--text);
    border-color: var(--text);
    color: var(--primary-fg);
}

.permission-chip input:focus-visible + .permission-chip__label {
    box-shadow: 0 0 0 2px var(--ring);
}

.permission-chips--accounts {
    margin-top: var(--space-1);
}

.permission-account-scope {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-1);
    padding: var(--space-3);
}

.permission-account-scope--set {
    margin-top: var(--space-2);
}

.permission-account-scope__head {
    align-items: flex-start;
    display: flex;
    gap: var(--space-2);
}

.permission-account-scope__icon {
    align-items: center;
    background: var(--soft-2);
    border-radius: var(--radius-sm);
    color: var(--muted);
    display: inline-flex;
    flex-shrink: 0;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.permission-account-scope__title {
    font-size: var(--font-sm);
    font-weight: 600;
    margin: 0;
}

.permission-account-scope__hint {
    font-size: var(--font-xs);
    margin: 2px 0 0;
}

.permission-account-scope__grid {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.permission-scope-option {
    cursor: pointer;
    display: block;
    position: relative;
}

.permission-scope-option input {
    height: 0;
    opacity: 0;
    position: absolute;
    width: 0;
}

.permission-scope-option__card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 100%;
    padding: var(--space-2);
    transition: border-color 150ms ease, background 150ms ease;
}

.permission-scope-option__card strong {
    font-size: var(--font-sm);
}

.permission-scope-option__card span {
    color: var(--muted);
    font-size: var(--font-xs);
    line-height: 1.35;
}

.permission-scope-option input:checked + .permission-scope-option__card {
    background: var(--accent-soft);
    border-color: var(--border-strong);
}

.permission-scope-option input:focus-visible + .permission-scope-option__card {
    box-shadow: 0 0 0 2px var(--ring);
}

@media (max-width: 768px) {
    .permission-account-scope__grid {
        grid-template-columns: 1fr;
    }
}

/* ===== components/datetime-picker.css ===== */
/* Datetime picker — modern SaaS */

.dt-picker {
    position: relative;
    width: 100%;
}

.dt-picker__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 36px;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: var(--r, 8px);
    background: var(--elevated);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

[data-theme="light"] .dt-picker__trigger {
    background: var(--surface);
}

.dt-picker__trigger:hover {
    border-color: var(--line-strong);
}

.dt-picker__trigger:focus-visible,
.dt-picker__trigger[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    box-shadow: 0 0 0 3px var(--accent-soft);
    outline: none;
}

.dt-picker__value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dt-picker__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    color: var(--muted);
}

.dt-picker__popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 500;
    width: min(420px, calc(100vw - 24px));
    border: 1px solid var(--line);
    border-radius: var(--r-lg, 12px);
    background: var(--surface);
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.32);
}

.dt-picker__popover.is-fixed {
    position: fixed;
    top: auto;
    left: auto;
}

.dt-picker__popover[hidden] {
    display: none;
}

.dt-picker__panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 156px;
    gap: 0;
    border-bottom: 1px solid var(--line);
}

.dt-picker__calendar {
    padding: 14px 14px 12px;
    border-right: 1px solid var(--line);
    min-width: 0;
}

.dt-picker__cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.dt-picker__month {
    flex: 1;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-align: center;
}

.dt-picker__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.dt-picker__nav:hover {
    background: var(--hover);
    color: var(--text);
}

.dt-picker__weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 6px;
}

.dt-picker__weekdays span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.dt-picker__days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.dt-picker__day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 100ms ease, color 100ms ease;
}

.dt-picker__day:hover {
    background: var(--hover);
}

.dt-picker__day.is-outside {
    color: var(--muted);
    opacity: 0.45;
}

.dt-picker__day.is-today:not(.is-selected) {
    box-shadow: inset 0 0 0 1px var(--line-strong);
}

.dt-picker__day.is-selected {
    background: var(--accent);
    color: #fff;
    font-weight: 600;
}

.dt-picker__day.is-selected:hover {
    background: color-mix(in srgb, var(--accent) 88%, #fff);
}

.dt-picker__time {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    padding: 14px 10px 12px;
    background: color-mix(in srgb, var(--soft) 30%, var(--surface));
}

.dt-picker__time-block {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.dt-picker__time-label {
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
}

.dt-picker__time-scroll {
    display: flex;
    flex-direction: column;
    gap: 3px;
    height: 176px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 6px 4px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--elevated);
    scroll-padding-block: 68px;
    scrollbar-width: thin;
    overscroll-behavior: contain;
}

[data-theme="light"] .dt-picker__time-scroll {
    background: var(--surface);
}

.dt-picker__time-scroll::-webkit-scrollbar {
    width: 6px;
}

.dt-picker__time-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted) 35%, transparent);
}

.dt-picker__time-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 100%;
    min-height: 32px;
    padding: 0 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--secondary);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    cursor: pointer;
    transition: background 100ms ease, color 100ms ease;
}

.dt-picker__time-item:hover {
    background: var(--hover);
    color: var(--text);
}

.dt-picker__time-item.is-selected {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

.dt-picker__time-sep {
    flex-shrink: 0;
    align-self: center;
    margin-top: 28px;
    color: var(--muted);
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}

.dt-picker__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--soft) 22%, var(--surface));
}

.dt-picker__foot-btn {
    min-height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--secondary);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.dt-picker__foot-btn:hover {
    background: var(--hover);
    color: var(--text);
}

.dt-picker__foot-btn--primary {
    color: var(--accent);
    font-weight: 600;
}

.dt-picker__foot-btn--primary:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

@media (max-width: 480px) {
    .dt-picker__panel {
        grid-template-columns: 1fr;
    }

    .dt-picker__calendar {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .dt-picker__time {
        padding: 12px 14px 14px;
    }

    .dt-picker__time-scroll {
        height: 140px;
        scroll-padding-block: 48px;
    }
}

/* ===== components/fm-datepicker.css ===== */
/* ==========================================================================
   fm-datepicker — seletor de data/hora (substitui o picker nativo do Chrome)
   Forma macOS: sólido, hairline, raios pequenos. Cores vêm do tema.
   ========================================================================== */

.fm-date {
    position: relative;
    display: block;
    width: 100%;
}

/* Input nativo continua no DOM (carrega o valor do form), só sai da tela. */
.fm-date__native {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

/* --------------------------------------------------------------- trigger */

.fm-date__trigger {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    min-height: var(--pd-ctrl, 32px);
    padding: 0 9px;
    border: 1px solid var(--macos-hairline, var(--line));
    border-radius: var(--macos-control-radius, 7px);
    background: var(--elevated);
    box-shadow: var(--macos-control-shadow);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

[data-theme="light"] .fm-date__trigger {
    background: var(--surface);
}

.fm-date__trigger:hover {
    border-color: var(--line-strong, var(--line));
}

.fm-date__trigger:focus-visible,
.fm-date__trigger[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    box-shadow: 0 0 0 3px var(--accent-soft);
    outline: none;
}

.fm-date__trigger-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--muted);
}

.fm-date__trigger.is-set .fm-date__trigger-icon {
    color: var(--accent);
}

/* Vencida / hoje ganham cor no rótulo — status legível sem abrir o popover. */
.fm-date__trigger.is-overdue .fm-date__trigger-icon,
.fm-date__trigger.is-overdue .fm-date__label {
    color: #ef4444;
}

.fm-date__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fm-date__trigger:not(.is-set) .fm-date__label {
    color: var(--muted);
    font-weight: 400;
}

.fm-date__time-tag {
    flex-shrink: 0;
    color: var(--secondary);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

/* Botão de limpar aparece no hover, no lugar do chevron. */
.fm-date__clear {
    display: none;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.fm-date__clear:hover {
    background: var(--hover);
    color: var(--text);
}

.fm-date__trigger.is-set:hover .fm-date__clear,
.fm-date__trigger.is-set:focus-within .fm-date__clear {
    display: inline-flex;
}

/* --------------------------------------------------------------- popover */

.fm-date__pop {
    position: fixed;
    z-index: 10050;
    width: 282px;
    border: 1px solid var(--macos-hairline, var(--line));
    border-radius: var(--macos-window-radius, 12px);
    background: var(--surface);
    box-shadow: var(--macos-window-shadow, 0 16px 48px rgba(0, 0, 0, 0.34));
    overflow: hidden;
    animation: fm-date-in 120ms cubic-bezier(0.2, 0, 0.2, 1);
}

.fm-date__pop[hidden] {
    display: none;
}

dialog .fm-date__pop {
    position: absolute;
}

@keyframes fm-date-in {
    from { opacity: 0; transform: translateY(-4px) scale(0.985); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .fm-date__pop { animation: none; }
}

/* --------------------------------------------- campo de linguagem natural */

.fm-date__nl {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 11px;
    border-bottom: 1px solid var(--line);
}

.fm-date__nl svg {
    flex-shrink: 0;
    color: var(--muted);
}

.fm-date__nl input {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    outline: none;
}

.fm-date__nl input::placeholder {
    color: var(--muted);
}

/* Eco do que foi entendido — some quando não há match. */
.fm-date__nl-hint {
    flex-shrink: 0;
    padding: 2px 6px;
    border-radius: 5px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.fm-date__nl-hint[hidden] {
    display: none;
}

/* -------------------------------------------------------------- atalhos */

.fm-date__presets {
    display: flex;
    flex-direction: column;
    padding: 5px;
    border-bottom: 1px solid var(--line);
}

.fm-date__preset {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 30px;
    padding: 0 7px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background 90ms ease;
}

.fm-date__preset:hover,
.fm-date__preset.is-active {
    background: var(--hover);
}

.fm-date__preset svg {
    flex-shrink: 0;
    color: var(--muted);
}

.fm-date__preset-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fm-date__preset-when {
    flex-shrink: 0;
    color: var(--muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* Ícones herdam a cor semântica do atalho (hoje verde, amanhã âmbar…). */
.fm-date__preset[data-tone="today"] svg { color: #22c55e; }
.fm-date__preset[data-tone="tomorrow"] svg { color: #f59e0b; }
.fm-date__preset[data-tone="weekend"] svg { color: #6366f1; }
.fm-date__preset[data-tone="next"] svg { color: #8b5cf6; }

/* ------------------------------------------------------------- calendário */

.fm-date__cal {
    padding: 9px 11px 11px;
}

.fm-date__cal-head {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 7px;
}

.fm-date__month {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fm-date__nav {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--secondary);
    cursor: pointer;
    transition: background 90ms ease, color 90ms ease;
}

.fm-date__nav:hover {
    background: var(--hover);
    color: var(--text);
}

.fm-date__weekdays,
.fm-date__days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}

.fm-date__weekdays {
    margin-bottom: 3px;
}

.fm-date__weekdays span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.fm-date__day {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background 90ms ease, color 90ms ease;
}

.fm-date__day:hover:not(:disabled) {
    background: var(--hover);
}

.fm-date__day.is-outside {
    color: color-mix(in srgb, var(--muted) 65%, transparent);
}

.fm-date__day.is-past:not(.is-selected) {
    color: var(--muted);
}

.fm-date__day:disabled {
    cursor: default;
    opacity: 0.3;
}

/* Hoje: ponto abaixo do número, não anel — anel disputa com o selecionado. */
.fm-date__day.is-today::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 50%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--accent);
    transform: translateX(-50%);
}

.fm-date__day.is-selected {
    background: var(--accent);
    color: #fff;
    font-weight: 600;
}

.fm-date__day.is-selected::after {
    background: #fff;
}

.fm-date__day.is-selected:hover {
    background: color-mix(in srgb, var(--accent) 88%, #000);
}

.fm-date__day:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* ------------------------------------------------------------------ hora */

.fm-date__time {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 11px;
    border-top: 1px solid var(--line);
}

.fm-date__time > svg {
    flex-shrink: 0;
    color: var(--muted);
}

.fm-date__time-field {
    width: 74px;
    min-height: 26px;
    padding: 0 7px;
    border: 1px solid var(--macos-hairline, var(--line));
    border-radius: 6px;
    background: var(--elevated);
    color: var(--text);
    font: inherit;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

[data-theme="light"] .fm-date__time-field {
    background: var(--surface);
}

.fm-date__time-field:focus {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    box-shadow: 0 0 0 3px var(--accent-soft);
    outline: none;
}

/* Esconde o relógio nativo do WebKit — abriria o popup do SO por cima. */
.fm-date__time-field::-webkit-calendar-picker-indicator {
    display: none;
}

.fm-date__time-chips {
    display: flex;
    flex: 1;
    gap: 3px;
    min-width: 0;
    justify-content: flex-end;
}

.fm-date__time-chip {
    min-height: 24px;
    padding: 0 7px;
    border: 0;
    border-radius: 5px;
    background: var(--soft);
    color: var(--secondary);
    font: inherit;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background 90ms ease, color 90ms ease;
}

.fm-date__time-chip:hover {
    background: var(--hover);
    color: var(--text);
}

.fm-date__time-chip.is-selected {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

/* ---------------------------------------------------------------- rodapé */

.fm-date__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--soft) 22%, var(--surface));
}

.fm-date__foot-btn {
    min-height: 26px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--secondary);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background 110ms ease, color 110ms ease;
}

.fm-date__foot-btn:hover {
    background: var(--hover);
    color: var(--text);
}

.fm-date__foot-btn--primary {
    border: 1px solid transparent;
    background: var(--accent);
    box-shadow: var(--macos-control-shadow);
    color: #fff;
    font-weight: 600;
}

.fm-date__foot-btn--primary:hover {
    background: color-mix(in srgb, var(--accent) 88%, #000);
    color: #fff;
}

/* ------------------------------------------------------------ compacto */

@media (max-width: 400px) {
    .fm-date__pop {
        width: calc(100vw - 20px);
    }
}

/* ===== components/select.css ===== */
/* Custom select — fm-select (matches datetime-picker) */

.fm-select {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
}

.fm-select--compact {
    width: auto;
}

.fm-select__native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.fm-select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 36px;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: var(--r, 8px);
    background: var(--elevated);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

[data-theme="light"] .fm-select__trigger {
    background: var(--surface);
}

.fm-select--compact .fm-select__trigger {
    min-height: 32px;
    padding: 0 10px;
    font-size: 12px;
}

.fm-select__trigger:hover {
    border-color: var(--line-strong);
}

.fm-select__trigger:focus-visible,
.fm-select__trigger[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    box-shadow: 0 0 0 3px var(--accent-soft);
    outline: none;
}

.fm-select__value {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.fm-select__value > span,
.fm-select__option > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ui.css: `svg { max-width: 100% }` esmaga o ícone num traço vertical
   quando ele é filho de flex (menu/trigger). Travar o tamanho. */
.fm-select__flag {
    display: block;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    max-width: none;
    overflow: visible;
}

.fm-select__chevron {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    transition: transform 140ms ease, color 140ms ease;
}

.fm-select__trigger[aria-expanded="true"] .fm-select__chevron {
    transform: rotate(180deg);
    color: var(--secondary);
}

.fm-select__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1200;
    width: 100%;
    max-height: 240px;
    overflow: auto;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg, 12px);
    background: var(--surface);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
    box-sizing: border-box;
}

.fm-select__menu.is-fixed {
    position: fixed;
    top: auto;
    left: auto;
    z-index: 10050;
}

/* Inside <dialog>, absolute to the dialog box. position:fixed is captured by
   the dialog top-layer (and by contain:layout on ancestors) so viewport
   coordinates land off-screen and the menu looks like it never opened. */
dialog .fm-select__menu.is-fixed {
    position: absolute;
    z-index: 10050;
}

.fm-select__menu[hidden] {
    display: none !important;
}

.fm-select__option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: calc(var(--r, 8px) - 2px);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    overflow: visible;
    transition: background 100ms ease, color 100ms ease;
}

.fm-select__option:hover:not(:disabled) {
    background: var(--hover);
}

.fm-select__option.is-selected {
    background: var(--accent-soft);
    color: var(--text);
    font-weight: 600;
}

.fm-select__option:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
    outline-offset: -2px;
}

.fm-select__option:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Fallback native select styling (before JS / data-native-select) */
select:not(.fm-select__native):not([data-native-select]) {
    appearance: none;
    -webkit-appearance: none;
    min-height: 36px;
    padding: 0 34px 0 11px;
    border: 1px solid var(--line);
    border-radius: var(--r, 8px);
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%23888' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        no-repeat right 10px center / 14px,
        var(--elevated);
    color: var(--text);
    cursor: pointer;
}

[data-theme="light"] select:not(.fm-select__native):not([data-native-select]) {
    background-color: var(--surface);
}

select:not(.fm-select__native):not([data-native-select]):hover {
    border-color: var(--line-strong);
}

select:not(.fm-select__native):not([data-native-select]):focus {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    box-shadow: 0 0 0 3px var(--accent-soft);
    outline: none;
}

/* ===== pages/team.css ===== */
/* Equipe — table layout, stats, filters, badges
   Scoped to #panel-team to beat generic ui.css leftovers */

#panel-team .team-page {
    gap: 20px;
}

#panel-team .team-page__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px 20px;
}

#panel-team .team-page__intro h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 650;
    letter-spacing: -0.035em;
    line-height: 1.2;
}

#panel-team .team-page__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#panel-team .team-stat {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 52px;
    padding: 10px 12px;
    border: 1px solid var(--border, var(--line));
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--shadow, none);
}

#panel-team .team-stat__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--soft);
    color: var(--secondary, var(--text-secondary));
}

#panel-team .team-stat__icon--total {
    background: var(--accent-soft);
    color: var(--accent);
}

#panel-team .team-stat__body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

#panel-team .team-stat__label {
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#panel-team .team-stat__value {
    margin: 0;
    color: var(--text);
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

#panel-team .team-stat__hint {
    display: none;
}

#panel-team .team-page__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Panel card */
#panel-team .team-panel {
    overflow: hidden;
    border: 1px solid var(--border, var(--line));
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--border, var(--line)) 40%, transparent);
}

#panel-team .team-panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border, var(--line));
}

#panel-team .team-panel__title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

#panel-team .team-panel__title h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 650;
    letter-spacing: -0.01em;
}

#panel-team .team-panel__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--soft);
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

#panel-team .team-panel__add {
    gap: 6px;
}

/* Toolbar / filters */
#panel-team .team-panel__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border, var(--line));
    background: color-mix(in srgb, var(--soft) 55%, transparent);
}

#panel-team .team-search {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    min-width: min(100%, 220px);
    max-width: 320px;
}

#panel-team .team-search__icon {
    position: absolute;
    left: 10px;
    display: inline-flex;
    color: var(--muted);
    pointer-events: none;
}

#panel-team .team-search input {
    width: 100%;
    min-height: 34px;
    padding: 0 12px 0 34px;
    border: 1px solid var(--border, var(--line));
    border-radius: 8px;
    background: var(--elevated, var(--bg));
    color: var(--text);
    font: inherit;
    font-size: 13px;
    outline: none;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

#panel-team .team-search input:focus {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border, var(--line)));
    box-shadow: 0 0 0 3px var(--accent-soft);
}

#panel-team .team-filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

#panel-team .team-filter-group__label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

#panel-team .team-filter-scroll {
    min-width: 0;
    overflow-x: auto;
}

#panel-team .team-segment {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border, var(--line));
    border-radius: 9px;
    background: var(--soft);
}

#panel-team .team-segment__btn {
    appearance: none;
    min-height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    font-weight: 550;
    cursor: pointer;
    white-space: nowrap;
    transition: background 120ms ease, color 120ms ease;
}

#panel-team .team-segment__btn:hover {
    color: var(--text);
}

#panel-team .team-segment__btn.is-active {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow, 0 1px 2px rgba(0, 0, 0, 0.06));
}

/* Table */
#panel-team .team-panel__body {
    padding: 0;
}

#panel-team .team-panel__body--empty {
    padding: 40px 20px;
}

#panel-team .team-panel__body--table {
    position: relative;
}

#panel-team .team-table-wrap {
    width: 100%;
    overflow-x: auto;
}

#panel-team .team-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

#panel-team .team-table__head th {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border, var(--line));
    background: color-mix(in srgb, var(--soft) 70%, transparent);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

#panel-team .team-table__row {
    transition: background 120ms ease;
}

#panel-team .team-table__row:hover {
    background: var(--hover, var(--surface-hover));
}

#panel-team .team-table__row[hidden] {
    display: none;
}

#panel-team .team-table__cell {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border, var(--line));
    vertical-align: middle;
}

#panel-team .team-table__body tr:last-child .team-table__cell {
    border-bottom: 0;
}

#panel-team .team-table__cell--actions {
    width: 1%;
    white-space: nowrap;
}

#panel-team .team-table__muted {
    color: var(--muted);
}

/* Member cell — reset list leftovers */
#panel-team .team-member {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

#panel-team .team-member:hover {
    background: transparent;
}

#panel-team .team-member__avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    font-size: 13px;
    font-weight: 650;
    background: var(--soft);
    color: var(--text);
}

#panel-team .team-table__row--admin .team-member__avatar {
    background: var(--accent-soft);
    color: var(--accent);
}

#panel-team .team-member__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

#panel-team .team-member__name-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

#panel-team .team-member__name {
    margin: 0;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: -0.01em;
}

#panel-team .team-member__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 12px;
}

#panel-team .team-member__access-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--muted);
}

#panel-team .team-member__access-time--never {
    opacity: 0.7;
}

/* Badges & access pills */
#panel-team .team-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--soft);
    color: var(--secondary, var(--text-secondary));
    font-size: 11px;
    font-weight: 550;
}

#panel-team .team-badge--admin {
    background: var(--accent-soft);
    color: var(--accent);
}

#panel-team .team-badge--employee {
    background: var(--soft);
    color: var(--muted);
}

#panel-team .team-badge--you {
    background: color-mix(in srgb, var(--ok) 12%, transparent);
    color: var(--ok);
}

#panel-team .team-access-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#panel-team .team-access-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 26px;
    padding: 0 8px;
    border: 1px solid var(--border, var(--line));
    border-radius: 999px;
    background: var(--elevated, var(--bg));
    color: var(--secondary, var(--text-secondary));
    font-size: 11px;
    font-weight: 550;
    white-space: nowrap;
}

#panel-team .team-access-pill--full {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border, var(--line)));
    background: var(--accent-soft);
    color: var(--accent);
}

#panel-team .team-access-pill--empty {
    border-style: dashed;
    color: var(--muted);
}

#panel-team .team-access-pill--instagram {
    border-color: color-mix(in srgb, #e1306c 25%, var(--border, var(--line)));
}

#panel-team .team-access-pill--tiktok {
    border-color: color-mix(in srgb, #69c9d0 25%, var(--border, var(--line)));
}

#panel-team .team-access-pill--warming {
    border-color: color-mix(in srgb, var(--warn) 25%, var(--border, var(--line)));
    color: var(--warn);
}

#panel-team .team-access-pill--ready {
    border-color: color-mix(in srgb, var(--ok) 25%, var(--border, var(--line)));
    color: var(--ok);
}

#panel-team .team-access-pill--banned {
    border-color: color-mix(in srgb, var(--bad, var(--danger)) 25%, var(--border, var(--line)));
    color: var(--bad, var(--danger));
}

/* Row actions */
#panel-team .team-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

#panel-team .team-row-actions form {
    margin: 0;
}

#panel-team .team-row-actions__configure {
    gap: 5px;
}

#panel-team .team-row-actions__delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

#panel-team .team-row-actions__delete:hover {
    background: var(--bad-bg, var(--error-bg));
    color: var(--bad, var(--danger));
}

#panel-team .team-empty-filter {
    padding: 32px 20px;
}

#panel-team .team-empty-filter[hidden] {
    display: none;
}

/* Modal extras */
#panel-team .team-modal__title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

#panel-team .team-modal__avatar {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--soft);
    color: var(--secondary, var(--text-secondary));
}

#panel-team .team-modal__avatar--create {
    background: var(--accent-soft);
    color: var(--accent);
}

#panel-team .team-modal__title {
    margin: 0;
    font-size: 15px;
    font-weight: 650;
}

#panel-team .team-modal__hint {
    margin: 2px 0 0;
}

@media (max-width: 900px) {
    #panel-team .team-table__cell--permissions {
        min-width: 180px;
    }
}

@media (max-width: 768px) {
    #panel-team .team-page__header {
        flex-direction: column;
        align-items: stretch;
    }

    #panel-team .team-page__stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    #panel-team .team-stat--total {
        grid-column: 1 / -1;
    }

    #panel-team .team-panel__head {
        align-items: stretch;
        flex-direction: column;
    }

    #panel-team .team-panel__add {
        width: 100%;
        justify-content: center;
    }

    #panel-team .team-panel__toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    #panel-team .team-search {
        max-width: none;
    }

    #panel-team .team-filter-group {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    #panel-team .team-segment {
        width: 100%;
    }

    #panel-team .team-segment__btn {
        flex: 1;
    }

    #panel-team .team-table__head {
        display: none;
    }

    #panel-team .team-table,
    #panel-team .team-table__body,
    #panel-team .team-table__row,
    #panel-team .team-table__cell {
        display: block;
        width: 100%;
    }

    #panel-team .team-table__row {
        padding: 14px 16px;
        border-bottom: 1px solid var(--border, var(--line));
    }

    #panel-team .team-table__body tr:last-child {
        border-bottom: 0;
    }

    #panel-team .team-table__cell {
        padding: 0;
        border: 0;
    }

    #panel-team .team-table__cell--permissions {
        margin-top: 10px;
    }

    #panel-team .team-table__cell--actions {
        margin-top: 12px;
        width: 100%;
    }

    #panel-team .team-row-actions {
        width: 100%;
        justify-content: stretch;
    }

    #panel-team .team-row-actions__configure {
        flex: 1;
        justify-content: center;
    }
}

/* ===== pages/accounts.css ===== */
/* Accounts — modern SaaS board (keeps legacy class hooks for JS) */

#panel-accounts {
    --acc-line: var(--border);
    --acc-warm: #f59e0b;
    --acc-warm-bg: rgba(245, 158, 11, 0.12);
    --acc-ready: #22c55e;
    --acc-ready-bg: rgba(34, 197, 94, 0.12);
    --acc-banned: #ef4444;
    --acc-banned-bg: rgba(239, 68, 68, 0.12);
    --acc-in-use: #3b82f6;
    --acc-in-use-bg: rgba(59, 130, 246, 0.12);
}

.accounts-page,
.notion-page.accounts-page {
    gap: 18px;
}

/* Toolbar / views */
.notion-db {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.notion-db__views {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 12px;
    padding-bottom: 2px;
}

.notion-views {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--soft);
}

.notion-view {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    font-weight: 550;
    cursor: pointer;
}

.notion-view.is-active {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-xs);
}

.notion-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.notion-toolbar__search {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
}

.notion-toolbar__search svg {
    position: absolute;
    left: 10px;
    color: var(--muted);
    pointer-events: none;
}

.notion-toolbar__search input {
    width: min(220px, 52vw);
    min-height: 32px;
    padding: 0 10px 0 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: 12px;
}

.notion-toolbar__group {
    display: inline-flex;
    gap: 4px;
}

.notion-chip {
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--surface);
    color: var(--text-secondary);
    font: inherit;
    font-size: 12px;
    font-weight: 550;
    cursor: pointer;
}

.notion-chip.is-active {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
    color: var(--text);
}

.notion-toolbar__select {
    margin: 0;
}

.notion-toolbar__select select {
    width: auto;
    min-height: 32px;
    padding: 0 28px 0 10px;
    font-size: 12px;
}

.notion-toolbar__btn {
    min-height: 30px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.notion-toolbar__new,
.accounts-sticky-bar__btn {
    min-height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: var(--primary-fg);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.notion-toolbar__new:hover { background: var(--primary-hover); }

/* Board */
.notion-board,
.acc-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

.notion-col,
.acc-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 180px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.notion-col__head,
.acc-col__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 2px 6px;
}

.notion-col__title,
.acc-col__label {
    margin: 0;
    font-size: 12px;
}

.notion-col__count,
.acc-col__count {
    min-width: 22px;
    padding: 2px 7px;
    border-radius: var(--radius-full);
    background: var(--soft);
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.notion-select,
.acc-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
}

.notion-select--warming,
.acc-tag--warming { background: var(--acc-warm-bg); color: var(--acc-warm); }
.notion-select--ready,
.acc-tag--ready { background: var(--acc-ready-bg); color: var(--acc-ready); }
.notion-select--in_use,
.acc-tag--in_use { background: var(--acc-in-use-bg); color: var(--acc-in-use); }
.notion-select--banned,
.acc-tag--banned { background: var(--acc-banned-bg); color: var(--acc-banned); }
.notion-select--project,
.acc-tag--project { background: var(--soft); color: var(--text-secondary); }

.notion-col__cards,
.acc-col__list,
.accounts-column__cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    min-height: 48px;
}

.notion-col__empty,
.acc-col__empty {
    margin: 0;
    padding: 16px 8px;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}

.acc-col--drop-only {
    border-style: dashed;
}

.acc-col--drop-only .acc-col__drop-hint {
    margin: 0 0 8px;
    padding: 0 8px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
}

.acc-col--drop-only.acc-col--drop-target,
.acc-col--drop-only.is-drop {
    border-style: solid;
}

.acc-col--drop-target,
.accounts-column--drop-target {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    background: var(--accent-soft);
}

.acc-col--drop-invalid,
.accounts-column--drop-invalid {
    border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
    opacity: 0.7;
}

.acc-col--filtered-empty,
.accounts-column--filtered-empty { opacity: 0.45; }

/* Cards */
.notion-card-item,
.acc-item,
.accounts-column__item {
    margin: 0;
}

.notion-card,
.acc-card,
.account-card {
    display: flex;
    gap: 6px;
    align-items: stretch;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    transition: border-color 140ms ease, background 140ms ease;
}

.notion-card:hover,
.acc-card:hover {
    border-color: var(--border-strong);
    background: var(--surface-hover);
}

.notion-card__drag,
.acc-card__drag,
.account-card__drag-handle {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 18px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: grab;
    opacity: 0.55;
}

.notion-card__drag:active { cursor: grabbing; }

.notion-card__inner,
.acc-card__body,
.account-card__main {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    cursor: pointer;
}

.notion-card__row,
.acc-card__row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.acc-card__platform,
.accounts-table__avatar,
.acc-platform-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border, var(--line));
    border-radius: var(--radius-sm, 6px);
    background: var(--soft);
    color: var(--text-secondary, var(--secondary));
}

.acc-card__platform--instagram,
.accounts-table__avatar--instagram,
.acc-platform-icon--instagram {
    color: #e1306c;
    background: color-mix(in srgb, #e1306c 10%, var(--soft));
    border-color: color-mix(in srgb, #e1306c 22%, var(--border, var(--line)));
}

.acc-card__platform--tiktok,
.accounts-table__avatar--tiktok,
.acc-platform-icon--tiktok {
    color: var(--text);
    background: color-mix(in srgb, var(--text) 6%, var(--soft));
    border-color: var(--border, var(--line));
}

[data-theme="light"] .acc-card__platform--tiktok,
[data-theme="light"] .accounts-table__avatar--tiktok,
[data-theme="light"] .acc-platform-icon--tiktok {
    color: var(--text);
}

.notion-card__title,
.acc-card__name,
.account-card__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notion-card__actions,
.acc-card__menu,
.account-card__actions {
    display: inline-flex;
    flex-shrink: 0;
    gap: 2px;
}

.notion-card__btn,
.acc-menu-btn,
.account-card__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.notion-card__btn:hover,
.acc-menu-btn:hover {
    background: var(--soft);
    color: var(--text);
}

.notion-card__btn--danger:hover,
.acc-menu-btn--danger:hover,
.account-card__action--danger:hover {
    background: var(--error-bg);
    color: var(--danger);
}

.notion-card__delete,
.acc-card__delete,
.account-card__delete-form { margin: 0; }

.notion-card__tags,
.acc-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.accounts-column__placeholder {
    min-height: 56px;
    border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--border));
    border-radius: var(--radius-md);
    background: var(--accent-soft);
}

body.accounts-drag-active { cursor: grabbing; }
.acc-board--dragging .notion-card { opacity: 0.92; }

/* Table */
.notion-view-panel[hidden] { display: none !important; }
.notion-view-panel.is-active { display: block; }

.notion-table-wrap {
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.notion-table,
.accounts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.notion-table th,
.notion-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
}

.notion-table th {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: var(--soft);
}

.notion-table tr:last-child td { border-bottom: 0; }
.notion-table tbody tr:hover td { background: var(--surface-hover); }

.notion-toast,
.acc-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 80;
    max-width: min(360px, calc(100vw - 32px));
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    box-shadow: var(--shadow-sm);
}

@media (max-width: 1100px) {
    .notion-board,
    .acc-board {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .notion-db__views {
        align-items: stretch;
        flex-direction: column;
    }

    .notion-toolbar { width: 100%; }
    .notion-toolbar__search input { width: 100%; }
    .notion-toolbar__search { flex: 1; }
}

/* Board refresh */
#panel-accounts .accounts-page {
    gap: 14px;
}

#panel-accounts .accounts-page__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
}

#panel-accounts .accounts-page__head-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    min-width: 0;
}

#panel-accounts .accounts-page__head h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 650;
    letter-spacing: -0.035em;
}

#panel-accounts .accounts-page__views {
    flex-shrink: 0;
}

#panel-accounts .accounts-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 1 1 auto;
    min-width: min(100%, 280px);
}

#panel-accounts .accounts-toolbar__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 5px;
    border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--soft) 55%, var(--surface));
    min-width: 0;
}

#panel-accounts .accounts-toolbar__search {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
    min-width: 0;
}

#panel-accounts .accounts-toolbar__search svg {
    position: absolute;
    left: 10px;
    z-index: 1;
    color: var(--muted);
    pointer-events: none;
}

#panel-accounts .accounts-toolbar__search input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
    width: min(168px, 42vw);
    min-height: 32px;
    margin: 0;
    padding: 0 10px 0 32px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-size: 12.5px;
    box-shadow: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

#panel-accounts .accounts-toolbar__search input:hover {
    border-color: color-mix(in srgb, var(--line) 80%, transparent);
}

#panel-accounts .accounts-toolbar__search input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

#panel-accounts .accounts-toolbar__segment {
    display: inline-flex;
    align-items: stretch;
    padding: 2px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--soft) 80%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

#panel-accounts .accounts-toolbar__seg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 32px;
    min-height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

#panel-accounts .accounts-toolbar__seg svg {
    display: block;
    flex-shrink: 0;
}

#panel-accounts .accounts-toolbar__seg--instagram,
#panel-accounts .accounts-toolbar__seg--tiktok {
    width: 32px;
    padding: 0;
}

#panel-accounts .accounts-toolbar__seg:hover {
    color: var(--text);
}

#panel-accounts .accounts-toolbar__seg.is-active {
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 1px 2px rgba(15, 15, 15, 0.06);
}

#panel-accounts .accounts-toolbar__seg--instagram.is-active {
    color: #e1306c;
}

#panel-accounts .accounts-toolbar__seg--tiktok.is-active {
    color: var(--text);
}

[data-theme="light"] #panel-accounts .accounts-toolbar__seg--tiktok.is-active {
    color: var(--text);
}

#panel-accounts .accounts-toolbar__selects {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

#panel-accounts .accounts-toolbar__select {
    margin: 0;
}

#panel-accounts .accounts-toolbar__select select {
    width: auto;
    min-width: 0;
    max-width: 132px;
    min-height: 32px;
    margin: 0;
    padding: 0 26px 0 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background-color: var(--surface);
    color: var(--text);
    font-size: 12px;
    font-weight: 550;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: border-color 120ms ease;
}

#panel-accounts .accounts-toolbar__select select:hover,
#panel-accounts .accounts-toolbar__select select:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--line) 90%, transparent);
}

#panel-accounts .accounts-toolbar__select select.has-value {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
    background-color: color-mix(in srgb, var(--accent-soft) 45%, var(--surface));
}

#panel-accounts .accounts-toolbar__meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 6px 0 8px;
    border-left: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
    margin-left: 2px;
}

#panel-accounts .accounts-toolbar__meta[hidden] {
    display: none !important;
}

#panel-accounts .accounts-toolbar__count {
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

#panel-accounts .accounts-toolbar__clear {
    min-height: 28px;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--secondary);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

#panel-accounts .accounts-toolbar__clear:hover {
    background: color-mix(in srgb, var(--soft) 90%, var(--surface));
    color: var(--text);
}

#panel-accounts .accounts-toolbar__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: var(--text);
    color: var(--surface);
    font: inherit;
    font-size: 12.5px;
    font-weight: 650;
    letter-spacing: -0.01em;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 120ms ease, transform 120ms ease;
}

#panel-accounts .accounts-toolbar__cta:hover {
    opacity: 0.9;
}

#panel-accounts .accounts-toolbar__cta:active {
    transform: translateY(1px);
}

[data-theme="dark"] #panel-accounts .accounts-toolbar__cta {
    background: var(--accent);
    color: #fff;
}

#panel-accounts .fm-board,
#panel-accounts .acc-board {
    grid-template-columns: repeat(var(--acc-cols, 3), minmax(0, 1fr));
    gap: 14px;
}

#panel-accounts .fm-col,
#panel-accounts .acc-col {
    gap: 10px;
    min-height: 220px;
    padding: 12px;
    border-radius: var(--r-lg, 12px);
    background: color-mix(in srgb, var(--soft) 24%, var(--surface));
}

#panel-accounts .acc-col__head {
    padding: 2px 4px 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

#panel-accounts .acc-col__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: -0.01em;
}

#panel-accounts .acc-col__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--muted);
}

#panel-accounts .acc-col__head--warming .acc-col__dot {
    background: var(--acc-warm);
    box-shadow: 0 0 0 3px var(--acc-warm-bg);
}

#panel-accounts .acc-col__head--ready .acc-col__dot {
    background: var(--acc-ready);
    box-shadow: 0 0 0 3px var(--acc-ready-bg);
}

#panel-accounts .acc-col__head--in_use .acc-col__dot {
    background: var(--acc-in-use);
    box-shadow: 0 0 0 3px var(--acc-in-use-bg);
}

#panel-accounts .acc-col__head--banned .acc-col__dot {
    background: var(--acc-banned);
    box-shadow: 0 0 0 3px var(--acc-banned-bg);
}

#panel-accounts .fm-col__count,
#panel-accounts .acc-col__count {
    min-width: 24px;
    padding: 3px 8px;
    font-size: 11px;
}

#panel-accounts .fm-col__list,
#panel-accounts .acc-col__list,
#panel-accounts .accounts-column__cards {
    gap: 10px;
}

#panel-accounts .fm-card-acc,
#panel-accounts .acc-card,
#panel-accounts .account-card {
    gap: 8px;
    padding: 12px;
    border-radius: var(--r-lg, 12px);
    box-shadow: none;
}

#panel-accounts .account-card--status-ready {
    border-color: color-mix(in srgb, var(--acc-ready) 18%, var(--line));
}

#panel-accounts .account-card--status-in_use {
    border-color: color-mix(in srgb, var(--acc-in-use) 18%, var(--line));
}

#panel-accounts .account-card--status-warming {
    border-color: color-mix(in srgb, var(--acc-warm) 18%, var(--line));
}

#panel-accounts .account-card--status-banned {
    border-color: color-mix(in srgb, var(--acc-banned) 18%, var(--line));
}

#panel-accounts .fm-card-acc__drag,
#panel-accounts .acc-card__drag {
    align-self: flex-start;
    width: 16px;
    height: 28px;
    margin-top: 0;
    opacity: 0.4;
}

#panel-accounts .fm-card-acc:hover .fm-card-acc__drag,
#panel-accounts .acc-card:hover .acc-card__drag {
    opacity: 0.75;
}

#panel-accounts .fm-card-acc__body,
#panel-accounts .acc-card__body {
    gap: 10px;
}

#panel-accounts .acc-card__actions {
    opacity: 0;
    transition: opacity 120ms ease;
}

#panel-accounts .fm-card-acc:hover .acc-card__actions,
#panel-accounts .fm-card-acc:focus-within .acc-card__actions {
    opacity: 1;
}

#panel-accounts .acc-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    /* Align under @username (past platform icon) */
    padding-left: calc(28px + 8px);
    min-height: 22px;
}

#panel-accounts .acc-meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 22px;
    padding: 3px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--elevated);
    color: var(--secondary);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.01em;
    line-height: 1.2;
    white-space: nowrap;
}

#panel-accounts .acc-meta--project {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface));
    color: var(--text);
}

#panel-accounts .acc-meta--tag {
    --tag-fg: var(--secondary);
    --tag-bg: color-mix(in srgb, var(--soft) 72%, var(--surface));
    --tag-bd: color-mix(in srgb, var(--secondary) 20%, var(--line));
    border-color: var(--tag-bd);
    background: var(--tag-bg);
    color: var(--tag-fg);
}

#panel-accounts .acc-meta--tag::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--tag-fg);
    opacity: 0.9;
    flex-shrink: 0;
}

#panel-accounts .account-badge--tag,
#panel-accounts .account-tags__chip {
    --tag-fg: var(--secondary);
    --tag-bg: color-mix(in srgb, var(--soft) 80%, var(--surface));
    --tag-bd: color-mix(in srgb, var(--line) 90%, transparent);
    border: 1px solid var(--tag-bd);
    background: var(--tag-bg);
    color: var(--tag-fg);
}

/* Tag palette — light */
#panel-accounts .acc-tag-c0 {
    --tag-fg: #0f766e;
    --tag-bg: color-mix(in srgb, #14b8a6 14%, var(--surface));
    --tag-bd: color-mix(in srgb, #14b8a6 28%, var(--line));
}

#panel-accounts .acc-tag-c1 {
    --tag-fg: #c2410c;
    --tag-bg: color-mix(in srgb, #f97316 14%, var(--surface));
    --tag-bd: color-mix(in srgb, #f97316 28%, var(--line));
}

#panel-accounts .acc-tag-c2 {
    --tag-fg: #0369a1;
    --tag-bg: color-mix(in srgb, #0ea5e9 14%, var(--surface));
    --tag-bd: color-mix(in srgb, #0ea5e9 28%, var(--line));
}

#panel-accounts .acc-tag-c3 {
    --tag-fg: #a16207;
    --tag-bg: color-mix(in srgb, #eab308 16%, var(--surface));
    --tag-bd: color-mix(in srgb, #eab308 30%, var(--line));
}

#panel-accounts .acc-tag-c4 {
    --tag-fg: #be123c;
    --tag-bg: color-mix(in srgb, #f43f5e 13%, var(--surface));
    --tag-bd: color-mix(in srgb, #f43f5e 26%, var(--line));
}

#panel-accounts .acc-tag-c5 {
    --tag-fg: #4d7c0f;
    --tag-bg: color-mix(in srgb, #84cc16 16%, var(--surface));
    --tag-bd: color-mix(in srgb, #84cc16 30%, var(--line));
}

#panel-accounts .acc-tag-c6 {
    --tag-fg: #4338ca;
    --tag-bg: color-mix(in srgb, #6366f1 13%, var(--surface));
    --tag-bd: color-mix(in srgb, #6366f1 26%, var(--line));
}

#panel-accounts .acc-tag-c7 {
    --tag-fg: #9a3412;
    --tag-bg: color-mix(in srgb, #ea580c 13%, var(--surface));
    --tag-bd: color-mix(in srgb, #ea580c 26%, var(--line));
}

/* Tag palette — dark (fg + bg + border together) */
[data-theme="dark"] #panel-accounts .acc-tag-c0 {
    --tag-fg: #5eead4;
    --tag-bg: color-mix(in srgb, #2dd4bf 16%, var(--surface));
    --tag-bd: color-mix(in srgb, #2dd4bf 34%, var(--line));
}

[data-theme="dark"] #panel-accounts .acc-tag-c1 {
    --tag-fg: #fdba74;
    --tag-bg: color-mix(in srgb, #fb923c 14%, var(--surface));
    --tag-bd: color-mix(in srgb, #fb923c 32%, var(--line));
}

[data-theme="dark"] #panel-accounts .acc-tag-c2 {
    --tag-fg: #7dd3fc;
    --tag-bg: color-mix(in srgb, #38bdf8 14%, var(--surface));
    --tag-bd: color-mix(in srgb, #38bdf8 32%, var(--line));
}

[data-theme="dark"] #panel-accounts .acc-tag-c3 {
    --tag-fg: #fde047;
    --tag-bg: color-mix(in srgb, #eab308 14%, var(--surface));
    --tag-bd: color-mix(in srgb, #eab308 32%, var(--line));
}

[data-theme="dark"] #panel-accounts .acc-tag-c4 {
    --tag-fg: #fda4af;
    --tag-bg: color-mix(in srgb, #fb7185 14%, var(--surface));
    --tag-bd: color-mix(in srgb, #fb7185 32%, var(--line));
}

[data-theme="dark"] #panel-accounts .acc-tag-c5 {
    --tag-fg: #bef264;
    --tag-bg: color-mix(in srgb, #a3e635 14%, var(--surface));
    --tag-bd: color-mix(in srgb, #a3e635 32%, var(--line));
}

[data-theme="dark"] #panel-accounts .acc-tag-c6 {
    --tag-fg: #a5b4fc;
    --tag-bg: color-mix(in srgb, #818cf8 14%, var(--surface));
    --tag-bd: color-mix(in srgb, #818cf8 32%, var(--line));
}

[data-theme="dark"] #panel-accounts .acc-tag-c7 {
    --tag-fg: #fdba74;
    --tag-bg: color-mix(in srgb, #f97316 14%, var(--surface));
    --tag-bd: color-mix(in srgb, #f97316 32%, var(--line));
}

#panel-accounts .acc-meta--tag,
#panel-accounts .acc-meta--project,
#panel-accounts .account-badge--tag,
#panel-accounts .account-badge--project {
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

#panel-accounts .acc-meta--tag:hover,
#panel-accounts .account-badge--tag:hover {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tag-fg) 28%, transparent);
}

#panel-accounts .acc-meta--project:hover,
#panel-accounts .account-badge--project:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

#panel-accounts .acc-meta--tag.is-active,
#panel-accounts .account-badge--tag.is-active {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--tag-fg) 40%, transparent);
}

#panel-accounts .acc-meta--project.is-active,
#panel-accounts .account-badge--project.is-active {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface));
    color: var(--text);
}

#panel-accounts .accounts-table__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

#panel-accounts .account-badge--tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 22px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.01em;
}

#panel-accounts .account-badge--tag::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--tag-fg);
    flex-shrink: 0;
}

#panel-accounts .acc-meta--up {
    border-color: color-mix(in srgb, var(--ok) 22%, var(--line));
    background: var(--ok-bg);
    color: var(--ok);
}

#panel-accounts .acc-meta--down {
    border-color: color-mix(in srgb, var(--bad) 22%, var(--line));
    background: var(--bad-bg);
    color: var(--bad);
}

#panel-accounts .acc-meta--error {
    border-color: color-mix(in srgb, var(--bad) 22%, var(--line));
    background: var(--bad-bg);
    color: var(--bad);
}

#panel-accounts .acc-meta--running {
    border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
    background: var(--accent-soft);
    color: var(--accent);
}

#panel-accounts .acc-card__alert {
    margin: 0;
    padding: 7px 9px;
    border-radius: var(--r, 8px);
    background: var(--bad-bg);
    color: var(--bad);
    font-size: 11px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#panel-accounts .acc-card__alert--warn {
    background: var(--warn-bg);
    color: var(--warn);
}

#panel-accounts .acc-card__publish {
    width: auto;
    min-height: 30px;
    margin-top: 2px;
    padding: 0 12px;
    border-color: color-mix(in srgb, var(--ok) 28%, var(--line));
    background: color-mix(in srgb, var(--ok-bg) 55%, var(--surface));
    color: var(--ok);
    font-size: 11px;
    font-weight: 600;
}

#panel-accounts .acc-card__publish:hover {
    background: var(--ok-bg);
    color: var(--ok);
}

#panel-accounts .acc-card__publish--disconnect {
    border-color: color-mix(in srgb, var(--bad) 24%, var(--line));
    background: color-mix(in srgb, var(--bad-bg, rgba(239, 68, 68, 0.08)) 55%, var(--surface));
    color: var(--bad, #ef4444);
}

#panel-accounts .acc-card__publish--disconnect:hover {
    background: var(--bad-bg, rgba(239, 68, 68, 0.12));
    color: var(--bad, #ef4444);
}

#panel-accounts .fm-col__empty,
#panel-accounts .acc-col__empty {
    padding: 28px 12px;
    border: 1px dashed color-mix(in srgb, var(--line) 80%, transparent);
    border-radius: var(--r-lg, 12px);
    background: color-mix(in srgb, var(--soft) 40%, transparent);
}

@media (max-width: 1480px) {
    #panel-accounts .fm-board,
    #panel-accounts .acc-board {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    #panel-accounts .fm-board,
    #panel-accounts .acc-board {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    #panel-accounts .acc-card__actions {
        opacity: 1;
    }

    #panel-accounts .accounts-page__head {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    #panel-accounts .accounts-page__head-main {
        justify-content: space-between;
        width: 100%;
    }

    #panel-accounts .accounts-toolbar {
        width: 100%;
        justify-content: stretch;
        flex-direction: column;
        align-items: stretch;
    }

    #panel-accounts .accounts-toolbar__filters {
        width: 100%;
    }

    #panel-accounts .accounts-toolbar__search {
        flex: 1 1 100%;
    }

    #panel-accounts .accounts-toolbar__search input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
        width: 100%;
    }

    #panel-accounts .accounts-toolbar__selects {
        flex: 1 1 auto;
    }

    #panel-accounts .accounts-toolbar__select {
        flex: 1 1 auto;
        min-width: 0;
    }

    #panel-accounts .accounts-toolbar__select select {
        width: 100%;
        max-width: none;
    }

    #panel-accounts .accounts-toolbar__meta {
        border-left: 0;
        border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
        margin-left: 0;
        padding: 6px 4px 2px;
        width: 100%;
        justify-content: space-between;
    }

    #panel-accounts .accounts-toolbar__cta {
        width: 100%;
    }
}



/* ===== pages/accounts-modal.css ===== */
/* Accounts modal — edit/create dialogs */

#panel-accounts .accounts-modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
    color: var(--text);
    margin: auto;
    max-height: min(92dvh, 820px);
    max-width: min(calc(100vw - 32px), 540px);
    overflow: hidden;
    padding: 0;
    width: 100%;
}

#panel-accounts .accounts-modal--create {
    max-width: min(calc(100vw - 32px), 520px);
}

#panel-accounts .accounts-modal::backdrop {
    backdrop-filter: blur(6px);
    background: color-mix(in srgb, var(--overlay) 88%, transparent);
}

.accounts-modal__form {
    display: flex;
    flex-direction: column;
    max-height: inherit;
    min-height: 0;
}

.accounts-modal__header {
    align-items: flex-start;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-shrink: 0;
    gap: 12px;
    justify-content: space-between;
    padding: 16px 18px 14px;
    background: color-mix(in srgb, var(--soft) 35%, var(--surface));
}

.accounts-modal__identity {
    align-items: flex-start;
    display: flex;
    flex: 1;
    gap: 12px;
    min-width: 0;
}

.accounts-modal__avatar {
    align-items: center;
    background: var(--soft);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-secondary);
    display: inline-flex;
    flex-shrink: 0;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.accounts-modal__avatar--instagram {
    background: color-mix(in srgb, #e1306c 10%, var(--soft));
    border-color: color-mix(in srgb, #e1306c 22%, var(--border));
    color: #e1306c;
}

.accounts-modal__avatar--tiktok {
    background: color-mix(in srgb, var(--text) 6%, var(--soft));
    border-color: var(--border);
    color: var(--text);
}

.accounts-modal__avatar--create {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
    color: var(--accent);
}

.accounts-modal__intro {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.accounts-modal__title {
    color: var(--text);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.25;
    margin: 0;
}

.accounts-modal__subtitle,
.accounts-modal__meta {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
    margin: 0;
}

.accounts-modal__meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 9px;
}

.accounts-modal__status {
    align-items: center;
    color: var(--text-secondary);
    display: inline-flex;
    font-weight: 500;
    gap: 6px;
}

.accounts-modal__status-dot {
    background: var(--muted);
    border-radius: 999px;
    height: 6px;
    width: 6px;
}

.accounts-modal__status--warming .accounts-modal__status-dot { background: #f59e0b; }
.accounts-modal__status--ready .accounts-modal__status-dot { background: #22c55e; }
.accounts-modal__status--in_use .accounts-modal__status-dot { background: #3b82f6; }
.accounts-modal__status--banned .accounts-modal__status-dot { background: #ef4444; }

.accounts-modal__meta-item::before {
    content: "·";
    margin-right: 7px;
}

.accounts-modal__close {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    height: 32px;
    justify-content: center;
    min-height: 0;
    outline: none;
    padding: 0;
    width: 32px;
    box-shadow: none;
}

.accounts-modal__close:hover {
    background: var(--soft);
    border-color: var(--border);
    color: var(--text);
}

.accounts-modal__close:focus,
.accounts-modal__close:focus-visible {
    outline: none;
    border-color: var(--border-strong, var(--line));
    box-shadow: none;
    background: var(--soft);
}

.accounts-modal__tabs {
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    padding: 8px 20px 0;
}

.accounts-modal__tablist {
    display: flex;
    gap: 18px;
}

.accounts-modal__tab {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 500;
    min-height: 34px;
    padding: 0 1px;
}

.accounts-modal__tab:hover {
    background: transparent;
    color: var(--text-secondary);
}

.accounts-modal__tab.is-active {
    border-bottom-color: var(--text);
    color: var(--text);
}

.accounts-modal__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px;
    -webkit-overflow-scrolling: touch;
}

.accounts-modal__panel {
    display: none;
    flex-direction: column;
    gap: 0;
}

.accounts-modal__panel.is-active {
    display: flex;
}

.accounts-modal__panel[hidden] {
    display: none !important;
}

.accounts-modal__meta-line {
    color: var(--muted);
    font-size: 10px;
    margin: 0;
    text-align: center;
}

.accounts-modal__footer {
    align-items: center;
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--soft) 22%, var(--surface));
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    padding: 12px 18px 14px;
}

.accounts-modal__footer--end {
    justify-content: flex-end;
}

.accounts-modal__link {
    align-items: center;
    color: var(--muted);
    display: inline-flex;
    font-size: 12px;
    font-weight: 550;
    gap: 6px;
    text-decoration: none;
}

.accounts-modal__link:hover {
    color: var(--text);
}

.accounts-modal__actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.accounts-modal__btn {
    align-items: center;
    border-radius: 9px;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    gap: 6px;
    height: 38px;
    justify-content: center;
    min-height: 0;
    padding: 0 14px;
    text-decoration: none;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.accounts-modal__btn--ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.accounts-modal__btn--ghost:hover {
    background: var(--soft);
    border-color: var(--border-strong);
    color: var(--text);
}

.accounts-modal__btn--primary {
    background: var(--accent);
    border: 1px solid transparent;
    color: #fff;
    min-width: 148px;
}

.accounts-modal__btn--primary:hover {
    background: var(--accent-hover);
    color: #fff;
}

/* Account form */
#panel-accounts .account-form,
.accounts-modal .account-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.account-form__group {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.account-form__group--platform,
.account-form__group--status,
.account-form__group--project,
.account-form__group--tags,
.account-form__group--login,
.account-form__group--password {
    width: 100%;
}

.account-form__label {
    color: var(--muted);
    display: block;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0;
}

.account-form__label--icon {
    align-items: center;
    display: inline-flex;
    gap: 6px;
}

.account-form__label--icon svg {
    color: var(--secondary);
    opacity: 0.85;
}

#panel-accounts .account-form input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
.accounts-modal .account-form input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]) {
    background: var(--elevated, var(--surface));
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 14px;
    height: 42px;
    padding: 0 12px;
    width: 100%;
    box-sizing: border-box;
}

#panel-accounts .account-form input:not([type="radio"]):focus,
.accounts-modal .account-form input:not([type="radio"]):focus {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
    outline: none;
}

#panel-accounts .platform-picker,
#panel-accounts .status-picker,
.accounts-modal .platform-picker,
.accounts-modal .status-picker {
    display: grid;
    gap: 8px;
    width: 100%;
}

#panel-accounts .platform-picker,
.accounts-modal .platform-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#panel-accounts .status-picker,
.accounts-modal .status-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.platform-picker__option,
.status-picker__option {
    cursor: pointer;
    margin: 0;
    position: relative;
    min-width: 0;
}

.status-picker__option.is-disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.platform-picker__option input,
.status-picker__option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

#panel-accounts .platform-picker__card,
#panel-accounts .status-picker__pill,
.accounts-modal .platform-picker__card,
.accounts-modal .status-picker__pill {
    align-items: center;
    background: var(--elevated, var(--surface));
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--secondary);
    display: flex;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
    pointer-events: none;
}

#panel-accounts .platform-picker__card,
.accounts-modal .platform-picker__card {
    flex-direction: row;
    gap: 8px;
    min-height: 44px;
    padding: 0 12px;
}

#panel-accounts .platform-picker__card strong,
.accounts-modal .platform-picker__card strong {
    font-size: 13px;
    font-weight: 650;
}

#panel-accounts .status-picker__pill,
.accounts-modal .status-picker__pill {
    font-size: 12px;
    font-weight: 650;
    min-height: 40px;
    padding: 0 8px;
}

.platform-picker__option:hover:not(.is-disabled) .platform-picker__card,
.status-picker__option:hover:not(.is-disabled) .status-picker__pill {
    background: var(--soft);
    border-color: var(--border-strong);
}

#panel-accounts .platform-picker__option--instagram input:checked + .platform-picker__card,
.accounts-modal .platform-picker__option--instagram input:checked + .platform-picker__card {
    background: color-mix(in srgb, #e1306c 12%, var(--surface));
    border-color: color-mix(in srgb, #e1306c 42%, var(--border));
    color: #e1306c;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #e1306c 18%, transparent);
}

#panel-accounts .platform-picker__option--tiktok input:checked + .platform-picker__card,
.accounts-modal .platform-picker__option--tiktok input:checked + .platform-picker__card {
    background: color-mix(in srgb, var(--text) 8%, var(--surface));
    border-color: color-mix(in srgb, var(--text) 28%, var(--border));
    color: var(--text);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent);
}

#panel-accounts .status-picker__option input:checked + .status-picker__pill--warming,
.accounts-modal .status-picker__option input:checked + .status-picker__pill--warming {
    background: color-mix(in srgb, #f59e0b 14%, var(--surface)) !important;
    border-color: color-mix(in srgb, #f59e0b 42%, var(--border)) !important;
    color: #f59e0b !important;
}

#panel-accounts .status-picker__option input:checked + .status-picker__pill--ready,
.accounts-modal .status-picker__option input:checked + .status-picker__pill--ready {
    background: color-mix(in srgb, #22c55e 14%, var(--surface)) !important;
    border-color: color-mix(in srgb, #22c55e 40%, var(--border)) !important;
    color: #22c55e !important;
}

#panel-accounts .status-picker__option input:checked + .status-picker__pill--in-use,
.accounts-modal .status-picker__option input:checked + .status-picker__pill--in-use {
    background: color-mix(in srgb, #3b82f6 14%, var(--surface)) !important;
    border-color: color-mix(in srgb, #3b82f6 42%, var(--border)) !important;
    color: #3b82f6 !important;
}

#panel-accounts .status-picker__option input:checked + .status-picker__pill--banned,
.accounts-modal .status-picker__option input:checked + .status-picker__pill--banned {
    background: color-mix(in srgb, #ef4444 14%, var(--surface)) !important;
    border-color: color-mix(in srgb, #ef4444 40%, var(--border)) !important;
    color: #ef4444 !important;
}

.password-field {
    align-items: stretch;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 8px;
    width: 100%;
}

.password-field__input {
    min-width: 0;
    width: 100%;
}

.password-field__toggle {
    align-items: center;
    background: var(--elevated, var(--surface));
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    height: 42px;
    justify-content: center;
    min-height: 0;
    padding: 0;
    width: 42px;
}

.password-field__toggle:hover,
.password-field__toggle[aria-pressed="true"] {
    background: var(--soft);
    border-color: var(--border-strong);
    color: var(--text);
}

.account-form .field-hint {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
    margin: 0;
}

@media (max-width: 768px) {
    #panel-accounts .accounts-modal {
        border-radius: 16px 16px 0 0;
        margin: auto 0 0;
        max-height: 92dvh;
        max-width: none;
    }

    .accounts-modal__footer {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .accounts-modal__link {
        justify-content: center;
        order: 2;
    }

    .accounts-modal__actions {
        flex-direction: column-reverse;
        margin-left: 0;
        order: 1;
        width: 100%;
    }

    .accounts-modal__btn {
        height: 44px;
        width: 100%;
    }

    .account-form input:not([type="radio"]) {
        font-size: 16px;
    }
}

@media (max-width: 420px) {
    #panel-accounts .status-picker,
    .accounts-modal .status-picker {
        grid-template-columns: 1fr;
    }
}

/* Tag field — same height/feel as other inputs */
.account-tags-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 42px;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--elevated, var(--surface));
    box-sizing: border-box;
    cursor: text;
}

.account-tags-field:focus-within {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.account-tags-field__chips {
    display: contents;
}

.account-tags-field__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    max-width: 100%;
    height: 26px;
    padding: 0 4px 0 8px;
    border: 1px solid color-mix(in srgb, var(--tag-fg, var(--secondary)) 28%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--tag-fg, var(--secondary)) 12%, var(--surface));
    color: var(--tag-fg, var(--text));
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.account-tags-field__chip-label {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
}

.account-tags-field__chip.is-selected {
    box-shadow:
      0 0 0 2px var(--surface),
      0 0 0 4px color-mix(in srgb, var(--tag-fg, var(--accent)) 65%, var(--border));
}

.account-tags-field__edit {
    width: 88px;
    max-width: 140px;
    height: 18px;
    margin: 0;
    padding: 0 2px;
    border: 0;
    border-radius: 4px;
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    color: inherit;
    font: inherit;
    font-weight: 600;
    outline: none;
}

.account-tags-known {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.account-tags-known__label {
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.account-tags-known__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.account-tags-known__chip {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    margin: 0;
    padding: 0 9px;
    border: 1px dashed color-mix(in srgb, var(--tag-fg, var(--secondary)) 35%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--tag-fg, var(--secondary)) 8%, transparent);
    color: var(--tag-fg, var(--text));
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.account-tags-known__chip:hover {
    background: color-mix(in srgb, var(--tag-fg, var(--secondary)) 16%, var(--surface));
}

.account-tags-known__chip.is-active {
    border-style: solid;
    background: color-mix(in srgb, var(--tag-fg, var(--secondary)) 14%, var(--surface));
}

.account-tags-known__chip.acc-tag-c0 { --tag-fg: #2dd4bf; }
.account-tags-known__chip.acc-tag-c1 { --tag-fg: #fb923c; }
.account-tags-known__chip.acc-tag-c2 { --tag-fg: #38bdf8; }
.account-tags-known__chip.acc-tag-c3 { --tag-fg: #eab308; }
.account-tags-known__chip.acc-tag-c4 { --tag-fg: #fb7185; }
.account-tags-known__chip.acc-tag-c5 { --tag-fg: #a3e635; }
.account-tags-known__chip.acc-tag-c6 { --tag-fg: #818cf8; }
.account-tags-known__chip.acc-tag-c7 { --tag-fg: #f97316; }

[data-theme="light"] .account-tags-known__chip.acc-tag-c0 { --tag-fg: #0f766e; }
[data-theme="light"] .account-tags-known__chip.acc-tag-c1 { --tag-fg: #c2410c; }
[data-theme="light"] .account-tags-known__chip.acc-tag-c2 { --tag-fg: #0369a1; }
[data-theme="light"] .account-tags-known__chip.acc-tag-c3 { --tag-fg: #a16207; }
[data-theme="light"] .account-tags-known__chip.acc-tag-c4 { --tag-fg: #be123c; }
[data-theme="light"] .account-tags-known__chip.acc-tag-c5 { --tag-fg: #4d7c0f; }
[data-theme="light"] .account-tags-known__chip.acc-tag-c6 { --tag-fg: #4338ca; }
[data-theme="light"] .account-tags-known__chip.acc-tag-c7 { --tag-fg: #9a3412; }

.account-tags-colors {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.account-tags-colors__swatch {
    width: 22px;
    height: 22px;
    margin: 0;
    padding: 0;
    border: 2px solid color-mix(in srgb, var(--tag-fg, var(--secondary)) 55%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--tag-fg, var(--secondary)) 42%, var(--surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tag-fg, var(--secondary)) 20%, transparent);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.account-tags-colors__swatch:hover {
    transform: scale(1.08);
}

.account-tags-colors__swatch.is-active {
    box-shadow:
      0 0 0 2px var(--surface),
      0 0 0 4px color-mix(in srgb, var(--tag-fg, var(--accent)) 70%, var(--border));
    transform: scale(1.1);
}

.account-tags-colors__swatch.acc-tag-c0 { --tag-fg: #2dd4bf; }
.account-tags-colors__swatch.acc-tag-c1 { --tag-fg: #fb923c; }
.account-tags-colors__swatch.acc-tag-c2 { --tag-fg: #38bdf8; }
.account-tags-colors__swatch.acc-tag-c3 { --tag-fg: #eab308; }
.account-tags-colors__swatch.acc-tag-c4 { --tag-fg: #fb7185; }
.account-tags-colors__swatch.acc-tag-c5 { --tag-fg: #a3e635; }
.account-tags-colors__swatch.acc-tag-c6 { --tag-fg: #818cf8; }
.account-tags-colors__swatch.acc-tag-c7 { --tag-fg: #f97316; }

[data-theme="light"] .account-tags-colors__swatch.acc-tag-c0 { --tag-fg: #0f766e; }
[data-theme="light"] .account-tags-colors__swatch.acc-tag-c1 { --tag-fg: #c2410c; }
[data-theme="light"] .account-tags-colors__swatch.acc-tag-c2 { --tag-fg: #0369a1; }
[data-theme="light"] .account-tags-colors__swatch.acc-tag-c3 { --tag-fg: #a16207; }
[data-theme="light"] .account-tags-colors__swatch.acc-tag-c4 { --tag-fg: #be123c; }
[data-theme="light"] .account-tags-colors__swatch.acc-tag-c5 { --tag-fg: #4d7c0f; }
[data-theme="light"] .account-tags-colors__swatch.acc-tag-c6 { --tag-fg: #4338ca; }
[data-theme="light"] .account-tags-colors__swatch.acc-tag-c7 { --tag-fg: #9a3412; }

.account-tags-field__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    opacity: 0.55;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.account-tags-field__remove:hover {
    opacity: 1;
    background: color-mix(in srgb, var(--text) 10%, transparent);
}

#panel-accounts .account-tags-field__input,
.accounts-modal .account-tags-field__input,
.account-tags-field__input {
    flex: 1 1 96px;
    min-width: 96px;
    width: auto !important;
    height: 26px !important;
    min-height: 26px !important;
    margin: 0 !important;
    padding: 0 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--text) !important;
    font-size: 13px !important;
    line-height: 26px !important;
}

.account-tags-field__input::placeholder {
    color: var(--muted);
}

.account-tags-field__chip.acc-tag-c0 { --tag-fg: #2dd4bf; }
.account-tags-field__chip.acc-tag-c1 { --tag-fg: #fb923c; }
.account-tags-field__chip.acc-tag-c2 { --tag-fg: #38bdf8; }
.account-tags-field__chip.acc-tag-c3 { --tag-fg: #eab308; }
.account-tags-field__chip.acc-tag-c4 { --tag-fg: #fb7185; }
.account-tags-field__chip.acc-tag-c5 { --tag-fg: #a3e635; }
.account-tags-field__chip.acc-tag-c6 { --tag-fg: #818cf8; }
.account-tags-field__chip.acc-tag-c7 { --tag-fg: #f97316; }

[data-theme="light"] .account-tags-field__chip.acc-tag-c0 { --tag-fg: #0f766e; }
[data-theme="light"] .account-tags-field__chip.acc-tag-c1 { --tag-fg: #c2410c; }
[data-theme="light"] .account-tags-field__chip.acc-tag-c2 { --tag-fg: #0369a1; }
[data-theme="light"] .account-tags-field__chip.acc-tag-c3 { --tag-fg: #a16207; }
[data-theme="light"] .account-tags-field__chip.acc-tag-c4 { --tag-fg: #be123c; }
[data-theme="light"] .account-tags-field__chip.acc-tag-c5 { --tag-fg: #4d7c0f; }
[data-theme="light"] .account-tags-field__chip.acc-tag-c6 { --tag-fg: #4338ca; }
[data-theme="light"] .account-tags-field__chip.acc-tag-c7 { --tag-fg: #9a3412; }

/* ===== pages/login.css ===== */
/* Login — minimal */

.login-page {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

.login-page .theme-toggle__label {
    display: none;
}

.login-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--bg);
}

.login-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 70% 50% at 50% -20%,
        color-mix(in srgb, var(--accent) 5%, transparent),
        transparent 70%
    );
}

[data-theme="light"] .login-bg::before {
    background: radial-gradient(
        ellipse 80% 55% at 50% -15%,
        color-mix(in srgb, var(--accent) 8%, transparent),
        transparent 72%
    );
}

.login-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px clamp(20px, 4vw, 32px);
}

.login-top .brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.login-top .brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.login-top .brand-mark svg,
.login-top .brand-mark__logo {
    display: block;
    transform: translateY(0.5px);
}

.login-top .brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1;
}

.login-top .brand-text strong {
    font-size: 14px;
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.login-box__mark svg,
.login-box__mark .brand-mark__logo {
    display: block;
    transform: translateY(0.5px);
}

.login-top__tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.login-top__theme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--border, var(--line));
    border-radius: var(--r, 8px);
    background: var(--surface);
    color: var(--text-secondary, var(--secondary));
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.login-top__theme:hover {
    background: var(--surface-hover, var(--hover));
    color: var(--text);
}

.login-main {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 16px 20px 32px;
}

.login-box {
    width: 100%;
    max-width: 380px;
    padding: 28px 26px 24px;
    border: 1px solid var(--border, var(--line));
    border-radius: var(--r-lg, 12px);
    background: var(--surface);
    box-shadow: var(--shadow);
}

[data-theme="light"] .login-box {
    background: var(--bg-elevated, var(--elevated));
}

.login-box__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    text-align: center;
}

.login-box__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 4px;
    border: 1px solid var(--border, var(--line));
    border-radius: var(--r, 8px);
    background: #111;
    color: #fff;
}

.login-box__head h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 650;
    letter-spacing: -0.035em;
    line-height: 1.15;
}

.login-box__head p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.login-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 16px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--danger, var(--bad)) 24%, transparent);
    border-radius: var(--r, 8px);
    background: var(--error-bg, var(--bad-bg));
    color: var(--danger, var(--bad));
    font-size: 12px;
    line-height: 1.45;
}

.login-alert svg {
    flex-shrink: 0;
    margin-top: 1px;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

.login-field__label {
    color: var(--text-secondary, var(--secondary));
    font-size: 12px;
    font-weight: 550;
}

.login-field input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border, var(--line));
    border-radius: var(--r, 8px);
    background: var(--soft);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

[data-theme="light"] .login-field input {
    background: var(--bg);
}

.login-field input::placeholder {
    color: var(--muted);
}

.login-field input:focus {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border, var(--line)));
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.login-password {
    position: relative;
}

.login-password input {
    padding-right: 40px;
}

.login-password__toggle {
    position: absolute;
    top: 50%;
    right: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background 120ms ease, color 120ms ease;
}

.login-password__toggle:hover {
    color: var(--text);
    background: var(--surface-hover, var(--hover));
}

.login-submit {
    height: 40px;
    margin-top: 4px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--r, 8px);
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.02em;
    cursor: pointer;
    transition: background 140ms ease;
}

.login-submit:hover {
    background: var(--accent-hover);
}

.login-foot {
    position: relative;
    z-index: 2;
    padding: 16px 20px 24px;
    color: var(--muted);
    font-size: 11px;
    text-align: center;
}

@media (max-width: 480px) {
    .login-box {
        padding: 22px 18px 20px;
    }

    .login-box__head h1 {
        font-size: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-top__theme,
    .login-field input,
    .login-submit,
    .login-password__toggle {
        transition: none;
    }
}

/* ===== pages/analytics.css ===== */
/*
 * Aba Analytics.
 *
 * Namespace .anx-* de propósito: core/macos.css, core/shell-premium.css,
 * core/theme-dark.css, core/mobile.css e core/mobile-nav.css carregam DEPOIS
 * deste arquivo no app.css e traziam regras para o prefixo .an-* antigo. Prefixo
 * novo = cascata limpa, sem override invisível.
 *
 * Cores saem sempre dos tokens do ui.css, que já trocam sozinhos entre claro e
 * escuro — nada de cor literal aqui além das marcas das redes sociais.
 */

#panel-analytics {
  --anx-gap: 14px;
  --anx-radius: 10px;
  --anx-radius-sm: 7px;
  --anx-ctrl: 30px;
  --anx-ig: #e1306c;
  --anx-tt: #0891b2;
  --anx-th: #a1a1aa;
  --anx-track: color-mix(in srgb, var(--soft) 55%, transparent);
}

#panel-analytics .anx {
  display: flex;
  flex-direction: column;
  gap: var(--anx-gap);
}

/* ------------------------------------------------------------------ cabeçalho */

#panel-analytics .anx-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px var(--anx-gap);
}

#panel-analytics .anx-head__identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#panel-analytics .anx-head__eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}

#panel-analytics .anx-head__title {
  margin: 0;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -.02em;
  color: var(--text);
}

#panel-analytics .anx-head__meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

#panel-analytics .anx-sync {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

#panel-analytics .anx-sync.is-running { color: var(--accent); }
#panel-analytics .anx-sync.is-error { color: var(--bad); }

#panel-analytics .anx-tabs {
  grid-column: 1 / -1;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--anx-radius-sm);
  background: color-mix(in srgb, var(--soft) 40%, var(--surface));
  width: fit-content;
}

#panel-analytics .anx-tabs__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  height: 27px;
  padding: 0 12px;
  border-radius: 5px;
  cursor: pointer;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}

#panel-analytics .anx-tabs__btn:hover { color: var(--text); }

#panel-analytics .anx-tabs__btn.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}

/* --------------------------------------------------------------------- filtros */

#panel-analytics .anx-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--anx-radius);
  background: var(--surface);
}

#panel-analytics .anx-filters__group {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#panel-analytics .anx-filters__group--end { margin-left: auto; }

#panel-analytics .anx-filters__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

#panel-analytics .anx-seg {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--anx-radius-sm);
  background: var(--inset-bg, color-mix(in srgb, var(--soft) 45%, transparent));
}

#panel-analytics .anx-seg__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  height: 24px;
  padding: 0 9px;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}

#panel-analytics .anx-seg__btn:hover { color: var(--text); }

#panel-analytics .anx-seg__btn.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}

#panel-analytics .anx-seg__icon {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

#panel-analytics .anx-seg__icon.is-instagram { color: var(--anx-ig); }
#panel-analytics .anx-seg__icon.is-tiktok { color: var(--anx-tt); }
#panel-analytics .anx-seg__icon.is-threads { color: var(--anx-th); }

#panel-analytics .anx-range {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#panel-analytics .anx-range__input {
  height: var(--anx-ctrl);
  padding: 0 8px;
  font: inherit;
  font-size: 12px;
  color: var(--text);
  background: var(--input-bg, var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--anx-radius-sm);
  color-scheme: dark;
}

[data-theme="light"] #panel-analytics .anx-range__input { color-scheme: light; }

#panel-analytics .anx-range__sep { color: var(--muted); font-size: 12px; }

#panel-analytics .anx-search { min-width: 180px; }
#panel-analytics .anx-search input { height: var(--anx-ctrl); font-size: 12.5px; }

#panel-analytics .anx-select select {
  height: var(--anx-ctrl);
  font-size: 12.5px;
}

/* ----------------------------------------------------------------- placeholder */

#panel-analytics .anx-stage {
  display: flex;
  flex-direction: column;
  gap: var(--anx-gap);
  min-height: 240px;
}

#panel-analytics .anx-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 48px 20px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--anx-radius);
  background: var(--surface);
  text-align: center;
}

#panel-analytics .anx-state.is-error { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }

#panel-analytics .anx-state__title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}

#panel-analytics .anx-state__text {
  margin: 0;
  max-width: 44ch;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

#panel-analytics .anx-state__pulse {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  border-top-color: var(--accent);
  animation: anx-spin .7s linear infinite;
}

@keyframes anx-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  #panel-analytics .anx-state__pulse { animation: none; }
}

/* -------------------------------------------------------------------- KPIs */

#panel-analytics .anx-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--anx-radius);
  background: var(--line);
  overflow: hidden;
}

#panel-analytics .anx-kpi {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 11px 13px 9px;
  background: var(--surface);
  min-width: 0;
}

#panel-analytics .anx-kpi__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#panel-analytics .anx-kpi__label {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#panel-analytics .anx-kpi__value {
  font-size: 21px;
  font-weight: 620;
  letter-spacing: -.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

#panel-analytics .anx-kpi__foot {
  height: 26px;
  display: flex;
  align-items: flex-end;
}

#panel-analytics .anx-kpi--sm { gap: 3px; }
#panel-analytics .anx-kpi--sm .anx-kpi__value { font-size: 17px; }

/* Delta e sparkline compartilham a leitura de cor: verde sobe, vermelho desce. */

#panel-analytics .anx-delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 1px 5px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

#panel-analytics .anx-delta.is-up { color: var(--ok); background: var(--ok-bg); }
#panel-analytics .anx-delta.is-down { color: var(--bad); background: var(--bad-bg); }
#panel-analytics .anx-delta.is-flat { color: var(--muted); background: transparent; }

#panel-analytics .anx-spark {
  width: 100%;
  height: 26px;
  display: block;
}

#panel-analytics .anx-spark.is-up { color: var(--ok); }
#panel-analytics .anx-spark.is-down { color: var(--bad); }
#panel-analytics .anx-spark--empty { display: block; height: 26px; }

/* ------------------------------------------------------------------- cartões */

#panel-analytics .anx-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--anx-gap);
}

#panel-analytics .anx-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 13px 15px 15px;
  border: 1px solid var(--line);
  border-radius: var(--anx-radius);
  background: var(--surface);
  min-width: 0;
}

#panel-analytics .anx-card--chart { grid-column: 1 / -1; }

#panel-analytics .anx-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

#panel-analytics .anx-card__title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

#panel-analytics .anx-card__sub {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--muted);
}

#panel-analytics .anx-chart {
  position: relative;
  height: 260px;
  min-width: 0;
}

#panel-analytics .anx-chart--sm { height: 150px; }

/*
 * display:block é obrigatório, não cosmético: o estilo padrão do <canvas> é
 * inline, e nesse modo o Chart.js não consegue ler a altura do container e cai
 * no tamanho intrínseco de 300x150 — o gráfico saía minúsculo dentro de uma
 * caixa de 260px.
 */
#panel-analytics .anx-chart canvas {
  display: block;
  max-width: 100%;
}

#panel-analytics .anx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

#panel-analytics .anx-chips--bar { padding: 0 2px; }

#panel-analytics .anx-chip {
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease), background var(--duration) var(--ease);
}

#panel-analytics .anx-chip:hover { color: var(--text); border-color: var(--line-strong); }

#panel-analytics .anx-chip.is-active {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  background: var(--accent-soft);
}

/* ---------------------------------------------------------------- redes/movers */

#panel-analytics .anx-net {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--secondary);
  white-space: nowrap;
}

#panel-analytics .anx-net i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  flex: none;
}

#panel-analytics .anx-net.is-instagram i { background: var(--anx-ig); }
#panel-analytics .anx-net.is-tiktok i { background: var(--anx-tt); }
#panel-analytics .anx-net.is-threads i { background: var(--anx-th); }

#panel-analytics .anx-net-list,
#panel-analytics .anx-mover-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

#panel-analytics .anx-net-row { display: flex; flex-direction: column; gap: 5px; }

#panel-analytics .anx-net-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#panel-analytics .anx-net-row__count {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

#panel-analytics .anx-net-row__bar {
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--anx-track);
  overflow: hidden;
}

#panel-analytics .anx-net-row__bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

#panel-analytics .anx-net-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

#panel-analytics .anx-net-row--empty,
#panel-analytics .anx-mover--empty {
  font-size: 12px;
  color: var(--muted);
}

#panel-analytics .anx-mover__btn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 3px 4px;
  border-radius: var(--anx-radius-sm);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background var(--duration) var(--ease);
}

#panel-analytics .anx-mover__btn:hover { background: var(--hover); }

#panel-analytics .anx-mover__name {
  font-size: 12.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-analytics .anx-mover__value {
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

#panel-analytics .anx-mover__value.is-up { color: var(--ok); }
#panel-analytics .anx-mover__value.is-down { color: var(--bad); }

/* -------------------------------------------------------------------- tabelas */

#panel-analytics .anx-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--anx-gap);
  align-items: start;
}

#panel-analytics .anx-split.has-detail { grid-template-columns: minmax(0, 1fr) 300px; }

#panel-analytics .anx-table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--anx-radius);
  background: var(--surface);
  overflow-x: auto;
  min-width: 0;
}

#panel-analytics .anx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

#panel-analytics .anx-table th,
#panel-analytics .anx-table td {
  padding: 7px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

#panel-analytics .anx-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  user-select: none;
}

#panel-analytics .anx-table th[data-analytics-sort] { cursor: pointer; }
#panel-analytics .anx-table th[data-analytics-sort]:hover { color: var(--text); }
#panel-analytics .anx-table th.is-sorted { color: var(--text); }

#panel-analytics .anx-table th i {
  font-style: normal;
  margin-left: 3px;
  font-size: 9px;
}

#panel-analytics .anx-table td.is-num,
#panel-analytics .anx-table th.is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#panel-analytics .anx-table tbody tr:last-child td { border-bottom: 0; }

#panel-analytics .anx-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--soft) 22%, transparent);
}

#panel-analytics .anx-table tbody tr:hover td { background: var(--hover); }

#panel-analytics .anx-table tbody tr.is-open td {
  background: var(--accent-soft);
  box-shadow: inset 2px 0 0 var(--accent);
}

#panel-analytics .anx-cell {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

#panel-analytics .anx-td-check { width: 30px; }
#panel-analytics .anx-td-check input { cursor: pointer; accent-color: var(--accent); }

#panel-analytics .anx-td-account { max-width: 200px; }
#panel-analytics .anx-td-spark { width: 90px; }
#panel-analytics .anx-td-spark .anx-spark { height: 20px; }
#panel-analytics .anx-td-date { color: var(--muted); font-variant-numeric: tabular-nums; }

#panel-analytics .anx-account {
  display: flex;
  flex-direction: column;
  gap: 1px;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  max-width: 100%;
}

#panel-analytics .anx-account__name {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
}

#panel-analytics .anx-account:hover .anx-account__name { color: var(--accent); }

#panel-analytics .anx-account__meta,
#panel-analytics .anx-post__meta {
  font-size: 10.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

#panel-analytics .anx-td-post {
  max-width: 280px;
  white-space: normal;
}

#panel-analytics .anx-post__title {
  display: block;
  font-size: 12.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280px;
}

#panel-analytics .anx-flag {
  display: inline-block;
  margin-top: 2px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bad);
  background: var(--bad-bg);
  padding: 1px 5px;
  border-radius: var(--radius-full);
}

#panel-analytics .anx-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

#panel-analytics .anx-pager__label {
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------- detalhe */

#panel-analytics .anx-detail {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 13px 15px 15px;
  border: 1px solid var(--line);
  border-radius: var(--anx-radius);
  background: var(--surface);
  position: sticky;
  top: 8px;
}

#panel-analytics .anx-detail__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

#panel-analytics .anx-detail__title {
  display: block;
  font-size: 13.5px;
  font-weight: 620;
  color: var(--text);
}

#panel-analytics .anx-detail__sub {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
}

#panel-analytics .anx-detail__error {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--bad);
  background: var(--bad-bg);
  padding: 7px 9px;
  border-radius: var(--anx-radius-sm);
}

#panel-analytics .anx-detail__foot {
  margin: 0;
  font-size: 10.5px;
  color: var(--muted);
  line-height: 1.5;
}

#panel-analytics .anx-props {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--anx-radius-sm);
  background: var(--line);
  overflow: hidden;
}

#panel-analytics .anx-prop {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 9px;
  background: var(--surface);
  min-width: 0;
}

#panel-analytics .anx-prop dt {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#panel-analytics .anx-prop dd {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------- insights */

#panel-analytics .anx-insights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--anx-gap);
  align-items: start;
}

#panel-analytics .anx-insight {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px 15px 15px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--muted);
  border-radius: var(--anx-radius);
  background: var(--surface);
}

#panel-analytics .anx-insight.is-critical { border-left-color: var(--bad); }
#panel-analytics .anx-insight.is-warning { border-left-color: var(--warn); }
#panel-analytics .anx-insight.is-positive { border-left-color: var(--ok); }
#panel-analytics .anx-insight.is-info { border-left-color: var(--accent); }

#panel-analytics .anx-insight__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

#panel-analytics .anx-insight__title {
  margin: 0;
  font-size: 13px;
  font-weight: 620;
  color: var(--text);
}

#panel-analytics .anx-insight__text {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

#panel-analytics .anx-insight__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--anx-radius-sm);
  background: var(--line);
  overflow: hidden;
}

#panel-analytics .anx-insight__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  background: var(--surface);
  min-width: 0;
}

#panel-analytics .anx-insight__label {
  font-size: 12px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

#panel-analytics .anx-insight__item .anx-net { flex: none; }

#panel-analytics .anx-insight__detail {
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin-left: auto;
  flex: none;
}

/* ---------------------------------------------------------------- responsivo */

@media (max-width: 1180px) {
  #panel-analytics .anx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #panel-analytics .anx-split.has-detail { grid-template-columns: minmax(0, 1fr); }
  #panel-analytics .anx-detail { position: static; }
}

@media (max-width: 860px) {
  #panel-analytics .anx-head { grid-template-columns: 1fr; }
  #panel-analytics .anx-head__meta { justify-content: flex-start; }
  #panel-analytics .anx-grid { grid-template-columns: minmax(0, 1fr); }
  #panel-analytics .anx-filters { gap: 10px 12px; }
  #panel-analytics .anx-filters__group--end { margin-left: 0; width: 100%; }
  #panel-analytics .anx-search { flex: 1; min-width: 140px; }
  #panel-analytics .anx-chart { height: 220px; }
  #panel-analytics .anx-tabs { width: 100%; }
  #panel-analytics .anx-tabs__btn { flex: 1; }
}

@media (max-width: 620px) {
  #panel-analytics .anx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #panel-analytics .anx-seg { overflow-x: auto; max-width: 100%; }
  #panel-analytics .anx-props { grid-template-columns: minmax(0, 1fr); }
}

/* ===== pages/downloader.css ===== */
/* Downloader — composer-focused panel */

#panel-downloader .dl-log .log-line-ok { color: var(--ok); }
#panel-downloader .dl-log .log-line-fail { color: var(--bad); }
#panel-downloader .dl-log .log-line-info { color: var(--accent); }
#panel-downloader .dl-log .log-line-dim { color: var(--muted); }

#panel-downloader .dl-page {
    --dl-radius: 14px;
    --dl-gap: 12px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    min-height: calc(100dvh - var(--topbar-h, 56px));
    padding: 20px var(--page-x, 20px) 24px;
    box-sizing: border-box;
}

/* Header */
#panel-downloader .dl-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
}

#panel-downloader .dl-head__title {
    margin: 0;
    font-size: 22px;
    font-weight: 650;
    letter-spacing: -0.035em;
}

#panel-downloader .dl-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--secondary);
    font-size: 12px;
    font-weight: 600;
}

#panel-downloader .dl-status__dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--muted);
}

#panel-downloader .dl-status.is-ready {
    color: var(--ok);
    border-color: color-mix(in srgb, var(--ok) 24%, var(--line));
    background: var(--ok-bg);
}

#panel-downloader .dl-status.is-ready .dl-status__dot {
    background: var(--ok);
}

#panel-downloader .dl-status.is-running {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
    background: var(--accent-soft);
}

#panel-downloader .dl-status.is-running .dl-status__dot {
    background: var(--accent);
    animation: dl-pulse 1.2s ease-in-out infinite;
}

@keyframes dl-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

#panel-downloader .dl-status.is-done {
    color: var(--ok);
    border-color: color-mix(in srgb, var(--ok) 24%, var(--line));
    background: var(--ok-bg);
}

#panel-downloader .dl-status.is-done .dl-status__dot {
    background: var(--ok);
}

#panel-downloader .dl-status.is-error {
    color: var(--bad);
    border-color: color-mix(in srgb, var(--bad) 24%, var(--line));
    background: var(--bad-bg);
}

#panel-downloader .dl-status.is-error .dl-status__dot {
    background: var(--bad);
}

/* Shell */
#panel-downloader .dl-shell {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: min(680px, calc(100dvh - var(--topbar-h, 56px) - 100px));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--dl-radius);
    background: var(--surface);
}

#panel-downloader .dl-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
    flex: 1;
    min-height: 0;
}

#panel-downloader .dl-main {
    display: flex;
    flex-direction: column;
    gap: var(--dl-gap);
    min-width: 0;
    padding: 16px;
}

/* Composer */
#panel-downloader .dl-composer {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--soft) 35%, var(--surface));
    overflow: hidden;
}

#panel-downloader .dl-composer__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px 14px;
    padding: 14px 14px 0;
}

#panel-downloader .dl-composer__lead {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

#panel-downloader .dl-composer__lead strong {
    font-size: 14px;
    font-weight: 650;
    letter-spacing: -0.02em;
}

#panel-downloader .dl-composer__hint {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

#panel-downloader .dl-composer__actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#panel-downloader .dl-count {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    color: var(--muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

#panel-downloader .dl-count strong {
    color: var(--text);
    font-size: 13px;
    font-weight: 650;
}

#panel-downloader .dl-btn-ghost {
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--secondary);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

#panel-downloader .dl-btn-ghost:hover {
    border-color: var(--line);
    background: var(--surface);
    color: var(--text);
}

#panel-downloader .dl-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 14px 10px;
}

#panel-downloader .dl-platform {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 0 9px 0 7px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--secondary);
    font-size: 11px;
    font-weight: 600;
}

#panel-downloader .dl-platform svg {
    display: block;
    flex-shrink: 0;
}

#panel-downloader .dl-platform--youtube {
    border-color: color-mix(in srgb, #ff0033 22%, var(--line));
    background: color-mix(in srgb, #ff0033 8%, var(--surface));
    color: #c40028;
}

#panel-downloader .dl-platform--tiktok {
    border-color: color-mix(in srgb, var(--text) 14%, var(--line));
    background: color-mix(in srgb, var(--text) 5%, var(--surface));
    color: var(--text);
}

#panel-downloader .dl-platform--instagram {
    border-color: color-mix(in srgb, #e1306c 22%, var(--line));
    background: color-mix(in srgb, #e1306c 8%, var(--surface));
    color: #c13584;
}

#panel-downloader .dl-platform--facebook {
    border-color: color-mix(in srgb, #1877f2 22%, var(--line));
    background: color-mix(in srgb, #1877f2 8%, var(--surface));
    color: #1877f2;
}

#panel-downloader .dl-editor {
    display: flex;
    flex: 1;
    min-height: 280px;
    margin: 0 10px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--surface);
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

#panel-downloader .dl-editor:focus-within {
    border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
}

#panel-downloader .dl-textarea {
    display: block;
    width: 100%;
    min-height: 280px;
    flex: 1;
    margin: 0;
    padding: 14px 16px;
    border: 0;
    background: transparent;
    color: var(--text);
    font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 12.5px;
    line-height: 1.7;
    resize: vertical;
}

#panel-downloader .dl-textarea:focus {
    outline: none;
}

#panel-downloader .dl-textarea::placeholder {
    color: color-mix(in srgb, var(--muted) 78%, transparent);
}

/* Live zone */
#panel-downloader .dl-live {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#panel-downloader .dl-progress {
    animation: dl-fade-up 220ms ease;
}

@keyframes dl-fade-up {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

#panel-downloader .dl-progress {
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent-soft) 50%, var(--surface));
}

#panel-downloader .dl-progress__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

#panel-downloader .dl-progress__copy {
    min-width: 0;
    flex: 1;
}

#panel-downloader .dl-progress__status {
    margin: 0;
    font-size: 13px;
    font-weight: 650;
}

#panel-downloader .dl-progress__url {
    margin: 3px 0 0;
    color: var(--muted);
    font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 11px;
    word-break: break-all;
}

#panel-downloader .dl-progress__cancel:hover {
    color: var(--bad);
    border-color: color-mix(in srgb, var(--bad) 35%, var(--line));
}

#panel-downloader .dl-progress__bar-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

#panel-downloader .dl-progress__bar {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--soft) 80%, var(--surface));
    overflow: hidden;
}

#panel-downloader .dl-progress__fill {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: var(--accent);
    transition: width 0.35s ease;
}

#panel-downloader .dl-progress__pct {
    min-width: 40px;
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

#panel-downloader .dl-log-details__lead {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

#panel-downloader .dl-tally {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    font-size: 12px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}

#panel-downloader .dl-tally[hidden] {
    display: none;
}

#panel-downloader .dl-log-details__summary:has(#dl-stats:not([hidden])) .dl-log-details__hint {
    display: none;
}

#panel-downloader .dl-stat-ok { color: var(--ok); }
#panel-downloader .dl-stat-fail { color: var(--bad); }

/* Log */
#panel-downloader .dl-log-details {
    border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--soft) 20%, var(--surface));
    overflow: hidden;
}

#panel-downloader .dl-log-details__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 650;
    list-style: none;
    user-select: none;
}

#panel-downloader .dl-log-details__summary::-webkit-details-marker {
    display: none;
}

#panel-downloader .dl-log-details__title::before {
    content: "▸";
    display: inline-block;
    margin-right: 8px;
    color: var(--muted);
    transition: transform 0.15s ease;
}

#panel-downloader .dl-log-details[open] .dl-log-details__title::before {
    transform: rotate(90deg);
}

#panel-downloader .dl-log-details__hint {
    color: var(--muted);
    font-size: 11px;
    font-weight: 400;
}

#panel-downloader .dl-log {
    margin: 0;
    min-height: 100px;
    max-height: 220px;
    overflow: auto;
    padding: 0 14px 12px;
    border-top: 1px solid var(--line);
    background: transparent;
    color: var(--secondary);
    font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 11px;
    line-height: 1.55;
}

/* Cookies aside */
#panel-downloader .dl-aside {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-left: 1px solid var(--line);
    background: color-mix(in srgb, var(--soft) 28%, var(--surface));
}

#panel-downloader .dl-cookies {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

#panel-downloader .dl-cookies__summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 16px 12px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

#panel-downloader .dl-cookies__summary::-webkit-details-marker {
    display: none;
}

#panel-downloader .dl-cookies__intro {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

#panel-downloader .dl-cookies__intro strong {
    font-size: 14px;
    font-weight: 650;
    letter-spacing: -0.02em;
}

#panel-downloader .dl-cookies__intro span {
    color: var(--muted);
    font-size: 12px;
}

#panel-downloader .dl-badge {
    flex-shrink: 0;
    padding: 4px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

#panel-downloader .dl-cookies__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 12px;
    padding: 0 16px 16px;
    min-height: 0;
}

#panel-downloader .dl-cookies:not([open]) .dl-cookies__body {
    display: none;
}

#panel-downloader .dl-cookies__grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#panel-downloader .dl-cookie {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    transition: border-color 140ms ease, background 140ms ease;
}

#panel-downloader .dl-cookie:hover {
    border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
}

#panel-downloader .dl-cookie.is-ready {
    border-color: color-mix(in srgb, var(--ok) 28%, var(--line));
    background: color-mix(in srgb, var(--ok-bg) 55%, var(--surface));
}

#panel-downloader .dl-cookie.is-warn {
    border-color: color-mix(in srgb, var(--warn, #d97706) 35%, var(--line));
    background: color-mix(in srgb, var(--warn, #d97706) 8%, var(--surface));
}

#panel-downloader .dl-cookie__brand {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--soft) 70%, var(--surface));
    color: var(--secondary);
    flex-shrink: 0;
}

#panel-downloader .dl-cookie__brand svg {
    display: block;
}

#panel-downloader .dl-cookie__brand-fallback {
    font-size: 10px;
    font-weight: 700;
}

#panel-downloader .dl-cookie[data-platform="instagram"] .dl-cookie__brand {
    background: color-mix(in srgb, #e1306c 14%, var(--surface));
    color: #e1306c;
}

#panel-downloader .dl-cookie[data-platform="tiktok"] .dl-cookie__brand {
    background: color-mix(in srgb, var(--text) 8%, var(--surface));
    color: var(--text);
}

#panel-downloader .dl-cookie[data-platform="youtube"] .dl-cookie__brand {
    background: color-mix(in srgb, #ff0033 12%, var(--surface));
    color: #ff0033;
}

#panel-downloader .dl-cookie[data-platform="facebook"] .dl-cookie__brand {
    background: color-mix(in srgb, #1877f2 12%, var(--surface));
    color: #1877f2;
}

#panel-downloader .dl-cookie__meta {
    flex: 1;
    min-width: 0;
}

#panel-downloader .dl-cookie__name {
    display: block;
    font-size: 12.5px;
    font-weight: 650;
}

#panel-downloader .dl-cookie__state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
}

#panel-downloader .dl-cookie__state.is-ok {
    color: var(--ok);
}

#panel-downloader .dl-cookie__state.is-ok::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--ok);
    flex-shrink: 0;
}

#panel-downloader .dl-cookie__state.is-warn {
    color: var(--warn, #d97706);
}

#panel-downloader .dl-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 10px;
    border: 1px dashed var(--line-strong, var(--line));
    border-radius: 8px;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

#panel-downloader .dl-upload:hover,
#panel-downloader .dl-upload.is-drag {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft);
}

#panel-downloader .dl-cookies__tip {
    margin: auto 0 0;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.45;
}

/* Footer */
#panel-downloader .dl-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: auto;
    padding: 12px 16px;
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 92%, var(--bg));
}

#panel-downloader .dl-footer__left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1;
}

#panel-downloader .dl-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    flex-shrink: 0;
    color: var(--secondary);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

#panel-downloader .dl-toggle__label {
    display: inline;
    white-space: nowrap;
}

#panel-downloader .dl-toggle input {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin: 0;
}

#panel-downloader .dl-footer__hint {
    display: block;
    margin: 0;
    min-width: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#panel-downloader .dl-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex-shrink: 0;
    min-height: 42px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    background: var(--text);
    color: var(--surface);
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: opacity 120ms ease, transform 120ms ease;
}

#panel-downloader .dl-cta:hover:not(:disabled) {
    opacity: 0.9;
}

#panel-downloader .dl-cta:active:not(:disabled) {
    transform: translateY(1px);
}

#panel-downloader .dl-cta:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

#panel-downloader .dl-cta svg {
    display: block;
    flex-shrink: 0;
}

[data-theme="dark"] #panel-downloader .dl-cta {
    background: var(--accent);
    color: #fff;
}

/* Responsive */
@media (max-width: 900px) {
    #panel-downloader .dl-layout {
        grid-template-columns: 1fr;
    }

    #panel-downloader .dl-aside {
        border-left: 0;
        border-top: 1px solid var(--line);
        order: 2;
    }

    #panel-downloader .dl-main {
        order: 1;
    }

    #panel-downloader .dl-cookies__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #panel-downloader .dl-shell {
        min-height: 0;
    }
}

@media (max-width: 768px) {
    #panel-downloader .dl-page {
        gap: var(--mobile-stack-gap, 12px);
        min-height: 0;
        padding: var(--page-py, 14px) var(--page-x, 14px) var(--page-pb, 18px);
    }

    #panel-downloader .dl-shell {
        min-height: 0;
        overflow: visible;
    }

    #panel-downloader .dl-cookies__grid {
        grid-template-columns: 1fr;
    }

    /* CTA lives in mobile-dock action row */
    #panel-downloader .dl-footer {
        display: none;
    }

    #panel-downloader .dl-textarea,
    #panel-downloader .dl-editor {
        min-height: 156px;
        font-size: 16px;
    }
}

/* ===== pages/integrations-shared.css ===== */
/* Shared surfaces for Bot / Pixel dashboards */

.integrations-page,
.bot-page,
.pixel-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 28px var(--page-x) 56px;
    min-height: calc(100dvh - var(--topbar-h));
    box-sizing: border-box;
}

.integrations-subnav,
.bot-subnav,
.pixel-subnav,
.dash-subnav {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    width: fit-content;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--soft);
}

.integrations-subnav__btn,
.bot-subnav__btn,
.pixel-subnav__btn,
.dash-subnav__btn {
    min-height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    font-weight: 550;
    cursor: pointer;
}

.integrations-subnav__btn.is-active,
.bot-subnav__btn.is-active,
.pixel-subnav__btn.is-active,
.dash-subnav__btn.is-active {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-xs);
}

.integrations-card,
.bot-card,
.pixel-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}

.integrations-card__head,
.bot-card__head,
.pixel-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.integrations-card__body,
.bot-card__body,
.pixel-card__body {
    padding: 16px;
}

@media (max-width: 768px) {
    .integrations-page,
    .bot-page,
    .pixel-page {
        padding: var(--page-py, 16px) var(--page-x, 16px) var(--page-pb, 20px);
    }
}

/* ===== pages/bot-modal.css ===== */
/* Bot dashboard modals — estrutura BEM (alinhado a accounts/team) */

.bot-modal {
    --bm-pad: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    color: var(--text);
    margin: auto;
    max-height: min(92vh, 780px);
    max-width: min(94vw, 520px);
    overflow: hidden;
    padding: 0;
    width: 100%;
}

.bot-modal--lg {
    max-width: min(94vw, 640px);
}

.bot-modal:not([open]) {
    display: none;
}

.bot-modal::backdrop {
    backdrop-filter: blur(6px);
}

.bot-modal__form {
    display: flex;
    flex-direction: column;
    max-height: min(92vh, 780px);
    min-height: 0;
}

.bot-modal__header {
    align-items: flex-start;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-shrink: 0;
    gap: var(--space-3);
    justify-content: space-between;
    padding: var(--bm-pad);
}

.bot-modal__intro {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.bot-modal__title {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
    overflow-wrap: anywhere;
}

.bot-modal__subtitle {
    color: var(--muted);
    font-size: var(--font-sm);
    line-height: 1.4;
    margin: 0;
}

.bot-modal__close {
    align-items: center;
    background: var(--soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    height: 32px;
    justify-content: center;
    min-height: 0;
    padding: 0;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
    width: 32px;
}

.bot-modal__close:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
    color: var(--text);
}

.bot-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--bm-pad);
    -webkit-overflow-scrolling: touch;
}

.bot-modal__footer {
    background: var(--soft);
    border-top: 1px solid var(--border);
    display: flex;
    flex-shrink: 0;
    gap: var(--space-2);
    justify-content: flex-end;
    padding: var(--space-4) var(--bm-pad);
}

.bot-modal__section {
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-5);
}

.bot-modal__section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.bot-modal__section-title {
    color: var(--text);
    font-size: var(--font-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: 0 0 var(--space-4);
    text-transform: uppercase;
}

.bot-modal__nested {
    border-left: 2px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-3);
    padding-left: var(--space-4);
}

.bot-modal__field-spaced {
    margin-top: var(--space-3);
}

.bot-modal__hint-block {
    display: block;
    margin-bottom: var(--space-2);
}

.bot-modal__radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin: var(--space-3) 0;
}

.bot-modal__inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.bot-modal__input--narrow {
    max-width: 8rem;
}

.bot-modal__input--time {
    max-width: 9rem;
}

.bot-modal__times-list {
    margin-bottom: var(--space-2);
}

/* Campos do formulário */
.bot-modal .form-row {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bot-modal .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.bot-modal .form-group:last-child {
    margin-bottom: 0;
}

.bot-modal .form-label {
    color: var(--text-secondary);
    font-size: var(--font-sm);
    font-weight: 500;
}

.bot-modal .form-check .form-label {
    margin: 0;
}

.bot-modal .form-input,
.bot-modal .form-textarea,
.bot-modal .form-select,
.bot-modal textarea.form-input {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font: inherit;
    padding: var(--space-3);
    width: 100%;
}

.bot-modal .form-input:focus,
.bot-modal textarea.form-input:focus,
.bot-modal .form-textarea:focus,
.bot-modal .form-select:focus {
    border-color: var(--border-strong);
    box-shadow: 0 0 0 3px var(--ring);
    outline: none;
}

.bot-modal .form-check {
    align-items: center;
    display: flex;
    gap: var(--space-2);
}

.bot-modal .form-hint {
    color: var(--muted);
    font-size: var(--font-sm);
    line-height: 1.45;
    margin: 0;
}

.bot-modal .text-muted {
    color: var(--muted);
}

@media (max-width: 768px) {
    .bot-modal {
        --bm-pad: var(--space-4);
    }

    .bot-modal .form-row,
    .bot-modal .channel-row {
        grid-template-columns: 1fr;
    }

    .bot-modal .channel-row .btn {
        justify-self: start;
    }

    .bot-modal__footer {
        flex-direction: column-reverse;
        gap: var(--space-2);
        padding:
            var(--space-4)
            var(--space-4)
            max(var(--space-4), env(safe-area-inset-bottom, 0px));
    }

    .bot-modal__footer .btn {
        justify-content: center;
        min-height: 44px;
        width: 100%;
    }

    .bot-modal input,
    .bot-modal select,
    .bot-modal textarea {
        font-size: 16px;
    }
}

/* ===== pages/bot-dashboard.css ===== */
/* Bot dashboard — FlacosMedia (substitui CSS legado) */

#panel-bot {
    --bd-muted: var(--muted);
    --bd-soft: var(--soft);
    --bd-surface: var(--surface);
}

#panel-bot .bot-dash {
    background: transparent;
}

#panel-bot .bot-dash__content,
#panel-bot .bot-dash .main {
    display: flex;
    flex-direction: column;
    gap: var(--gap-section);
    margin: 0;
    min-height: 0;
    padding: 0;
    width: 100%;
}

#panel-bot .bot-dash .section {
    display: none;
    flex-direction: column;
    gap: var(--gap-section);
    width: 100%;
}

#panel-bot .bot-dash .section.active {
    display: flex;
}

/* Stats */
#panel-bot .stats-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

#panel-bot .stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-4);
    transition: background var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
}

#panel-bot .stat-card:hover {
    background: var(--hover);
    border-color: var(--line-strong);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

#panel-bot .stat-card .label {
    color: var(--muted);
    font-size: var(--font-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#panel-bot .stat-card .value {
    color: var(--text);
    font-size: clamp(1.25rem, 2.5vw, 1.625rem);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    transition: opacity var(--duration-fast) ease;
}

#panel-bot .stat-card .value.is-skeleton,
#panel-bot .stat-value--updating {
    opacity: 0.55;
}

#panel-bot .stat-card .value.sm {
    font-size: var(--font-md);
    font-weight: 600;
    letter-spacing: -0.01em;
}

#panel-bot .stat-card.success .value { color: var(--success); }
#panel-bot .stat-card.danger .value { color: var(--danger); }
#panel-bot .stat-card.accent .value { color: var(--text); }

/* Charts */
#panel-bot .charts-grid {
    display: grid;
    gap: var(--gap-card);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#panel-bot .chart-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-5);
}

#panel-bot .chart-card.span-2 {
    grid-column: 1 / -1;
}

#panel-bot .chart-card h3 {
    font-size: var(--font-md);
    font-weight: 600;
    margin: 0;
}

#panel-bot .chart-wrap {
    height: clamp(200px, 32vh, 280px);
    min-width: 0;
    position: relative;
    width: 100%;
}

#panel-bot .chart-wrap.sm {
    height: clamp(180px, 28vh, 240px);
}

#panel-bot .chart-wrap canvas {
    display: block;
    max-width: 100%;
}

/* Panels & tables */
#panel-bot .overview-grid {
    display: grid;
    gap: var(--gap-card);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#panel-bot .panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

#panel-bot .panel-spaced {
    margin-top: 0;
}

#panel-bot .panel-header {
    align-items: center;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
}

#panel-bot .panel-header h3 {
    font-size: var(--font-md);
    font-weight: 600;
    margin: 0;
}

#panel-bot .panel-body {
    min-width: 0;
}

#panel-bot .panel-body.padded {
    padding: var(--space-4) var(--space-5);
}

#panel-bot .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#panel-bot table.data-table {
    border-collapse: collapse;
    font-size: var(--font-md);
    min-width: 520px;
    width: 100%;
}

#panel-bot table.data-table th {
    background: var(--soft);
    color: var(--muted);
    font-size: var(--font-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: var(--space-3) var(--space-4);
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

#panel-bot table.data-table td {
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
    padding: var(--space-3) var(--space-4);
    vertical-align: middle;
}

#panel-bot table.data-table tbody tr:hover td {
    background: var(--soft);
    color: var(--text);
}

#panel-bot table.data-table td.empty,
#panel-bot table.data-table td.error {
    color: var(--muted);
    padding: var(--space-6);
    text-align: center;
}

#panel-bot table.data-table td.error {
    color: var(--danger);
}

#panel-bot .list-plain {
    list-style: none;
    margin: 0;
    padding: 0;
}

#panel-bot .list-item-row {
    align-items: center;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
    padding: var(--space-3) 0;
}

#panel-bot .list-item-row:last-child {
    border-bottom: none;
}

#panel-bot .list-item-row strong {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

#panel-bot .mono {
    font-family: var(--font-mono);
    font-size: var(--font-sm);
}

/* Badges */
#panel-bot .badge {
    border-radius: var(--radius-full);
    display: inline-flex;
    font-size: var(--font-xs);
    font-weight: 600;
    padding: 2px 8px;
}

#panel-bot .badge-success { background: var(--success-bg); color: var(--success); }
#panel-bot .badge-danger { background: var(--error-bg); color: var(--danger); }
#panel-bot .badge-warning { background: var(--warn-bg); color: var(--warn); }
#panel-bot .badge-neutral { background: var(--soft); color: var(--text-secondary); }
#panel-bot .badge-accent { background: var(--accent-soft); color: var(--text); }

#panel-bot .tag-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

#panel-bot .text-muted {
    color: var(--muted);
}

#panel-bot .text-danger {
    color: var(--danger);
}

#panel-bot .section--enter {
    animation: dash-in var(--duration-slow) var(--ease-out);
}

#panel-bot .empty-state {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    justify-content: center;
    padding: var(--space-2) 0;
}

#panel-bot .empty-state__title {
    max-width: 42ch;
}

#panel-bot .empty-state__action {
    margin-top: var(--space-1);
}

#panel-bot .skeleton-row td {
    padding: var(--space-3) var(--space-4);
}

#panel-bot .skeleton-line {
    height: 12px;
    width: 72%;
}

#panel-bot .skeleton-row:nth-child(2n) .skeleton-line {
    width: 58%;
}

#panel-bot .skeleton-row:nth-child(3n) .skeleton-line {
    width: 84%;
}

#panel-bot .campaign-row {
    align-items: center;
    gap: var(--space-3);
}

#panel-bot .campaign-row__meta {
    align-items: center;
    display: flex;
    flex: 1;
    gap: var(--space-2);
    min-width: 0;
}

#panel-bot .campaign-row__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#panel-bot .campaign-row__stats {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: var(--space-3);
}

#panel-bot .campaign-bar {
    background: var(--soft);
    border-radius: var(--radius-full);
    height: 6px;
    overflow: hidden;
    width: 72px;
}

#panel-bot .campaign-bar span {
    background: var(--chart-1);
    border-radius: inherit;
    display: block;
    height: 100%;
    width: var(--pct, 0%);
}

#panel-bot .relative-time {
    color: var(--text);
    display: block;
}

#panel-bot .date-absolute {
    display: block;
    font-size: var(--font-xs);
    margin-top: 2px;
}

#panel-bot th [data-user-sort],
#panel-bot [data-user-sort] {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: inherit;
    gap: var(--space-1);
    letter-spacing: inherit;
    min-height: 0;
    padding: 0;
    text-transform: inherit;
}

#panel-bot [data-user-sort].is-sorted {
    color: var(--text);
}

#panel-bot .sort-indicator {
    font-size: var(--font-xs);
    opacity: 0.8;
}

#panel-bot .spinner {
    animation: bd-spin 0.7s linear infinite;
    border: 2px solid var(--border);
    border-radius: 50%;
    border-top-color: var(--text-secondary);
    flex-shrink: 0;
    height: 18px;
    width: 18px;
}

/* Buttons inside bot panel */
/* Modais — componentes específicos do painel (estrutura em bot-modal.css) */
#panel-bot .btn-group,
.bot-modal .btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

#panel-bot .btn-primary,
.bot-modal .btn-primary {
    background: var(--primary);
    border-color: transparent;
    color: var(--primary-fg);
}

#panel-bot .btn-primary:hover:not(:disabled),
.bot-modal .btn-primary:hover:not(:disabled) {
    background: var(--primary-hover);
}

#panel-bot .btn-secondary,
.bot-modal .btn-secondary {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
}

#panel-bot .btn-secondary:hover:not(:disabled),
.bot-modal .btn-secondary:hover:not(:disabled) {
    background: var(--soft);
    border-color: var(--border-strong);
}

#panel-bot .btn-danger,
.bot-modal .btn-danger {
    background: transparent;
    border-color: transparent;
    color: var(--danger);
}

#panel-bot .btn-danger:hover:not(:disabled),
.bot-modal .btn-danger:hover:not(:disabled) {
    background: var(--error-bg);
}

#panel-bot .btn-sm,
.bot-modal .btn-sm {
    font-size: var(--font-sm);
    min-height: 32px;
    padding: var(--space-1) var(--space-3);
}

/* Dropdown */
#panel-bot .dropdown {
    position: relative;
}

#panel-bot .dropdown-trigger {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: var(--font-sm);
    font-weight: 500;
    gap: var(--space-2);
    min-height: 36px;
    padding: var(--space-2) var(--space-3);
}

#panel-bot .dropdown-menu {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    display: none;
    min-width: 180px;
    padding: var(--space-1);
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 50;
}

#panel-bot .dropdown-menu.open {
    display: block;
}

#panel-bot .dropdown-item {
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: var(--font-sm);
    padding: var(--space-2) var(--space-3);
}

#panel-bot .dropdown-item:hover,
#panel-bot .dropdown-item.active {
    background: var(--soft);
    color: var(--text);
}

/* Hero action (bumper) */
#panel-bot .hero-action {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
}

#panel-bot .hero-action p {
    color: var(--muted);
    font-size: var(--font-sm);
    margin: 0;
}

#panel-bot .config-bar {
    align-items: center;
    background: var(--soft);
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
}

#panel-bot .topics-summary {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: var(--space-5);
}

#panel-bot .topics-summary h3 {
    font-size: var(--font-md);
    font-weight: 600;
    margin: 0 0 var(--space-4);
}

#panel-bot .topics-summary ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

#panel-bot .topics-summary li {
    background: var(--soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: var(--font-sm);
    padding: var(--space-3) var(--space-4);
}

#panel-bot .panel-count {
    color: var(--muted);
    display: block;
    font-size: var(--font-sm);
    font-weight: 400;
    margin-top: var(--space-1);
}

#panel-bot .status-running {
    color: var(--success);
}

#panel-bot .alert {
    border-radius: var(--radius-md);
    font-size: var(--font-md);
    padding: var(--space-3) var(--space-4);
}

#panel-bot .alert.hidden {
    display: none;
}

#panel-bot .alert-success {
    background: var(--success-bg);
    border: 1px solid rgba(34, 197, 94, 0.2);
    color: var(--success);
}

#panel-bot .alert-error {
    background: var(--error-bg);
    border: 1px solid rgba(248, 113, 113, 0.25);
    color: var(--danger);
}

/* Search */
#panel-bot .search-wrap {
    align-items: center;
    display: flex;
    gap: var(--space-2);
    min-width: 200px;
    position: relative;
}

#panel-bot .search-wrap svg {
    color: var(--muted);
    flex-shrink: 0;
    height: 16px;
    pointer-events: none;
    width: 16px;
}

#panel-bot .search-input {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font: inherit;
    min-height: 36px;
    padding: var(--space-2) var(--space-3);
    width: 100%;
}

/* Componentes dos modais (estrutura em bot-modal.css) */

/* Telegram editor */
.bot-modal .telegram-editor {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
}

.bot-modal .telegram-editor-toolbar {
    background: var(--soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding: var(--space-1);
}

.bot-modal .telegram-editor-sep {
    align-self: stretch;
    background: var(--border);
    margin: 2px var(--space-1);
    width: 1px;
}

.bot-modal .telegram-editor-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    font: inherit;
    font-size: var(--font-xs);
    font-weight: 600;
    min-height: 28px;
    min-width: 28px;
    padding: 2px 8px;
}

.bot-modal .telegram-editor-btn:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
    color: var(--text);
}

.bot-modal .telegram-editor-btn.fmt-bold { font-weight: 800; }
.bot-modal .telegram-editor-btn.fmt-italic { font-style: italic; }
.bot-modal .telegram-editor-btn.fmt-underline { text-decoration: underline; }
.bot-modal .telegram-editor-btn.fmt-strike { text-decoration: line-through; }
.bot-modal .telegram-editor-btn.fmt-mono { font-family: var(--font-mono); }

.bot-modal .telegram-editor-input {
    min-height: 88px;
    resize: vertical;
}

.bot-modal .channel-row {
    align-items: end;
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr 1fr auto;
    margin-bottom: var(--space-3);
}

/* Bumper modal */
.bot-modal .bumper-topics-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: space-between;
    margin-bottom: var(--space-2);
}

.bot-modal .bumper-topics-loader {
    align-items: center;
    color: var(--muted);
    display: flex;
    font-size: var(--font-sm);
    gap: var(--space-2);
    padding: var(--space-2) 0;
}

.bot-modal .bumper-topics-loader[hidden] {
    display: none;
}

.bot-modal .bumper-topics-select,
.bot-modal .bumper-topics-selected {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.bot-modal .bumper-topic-option {
    align-items: center;
    display: flex;
    gap: var(--space-2);
}

.bot-modal .topic-tag {
    background: var(--soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    display: inline-flex;
    font-size: var(--font-sm);
    padding: var(--space-1) var(--space-2);
}

.bot-modal .schedule-time-row {
    align-items: center;
    display: flex;
    gap: var(--space-2);
    justify-content: space-between;
    margin-bottom: var(--space-2);
}

/* Spinner & toast */
.bot-modal .spinner {
    animation: bd-spin 0.7s linear infinite;
    border: 2px solid var(--border);
    border-radius: 50%;
    border-top-color: var(--text-secondary);
    height: 18px;
    width: 18px;
}

@keyframes bd-spin {
    to { transform: rotate(360deg); }
}

.toast-container {
    bottom: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    pointer-events: none;
    position: fixed;
    right: var(--space-5);
    z-index: 1200;
}

.toast {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    color: var(--text);
    font-size: var(--font-sm);
    opacity: 0;
    padding: var(--space-3) var(--space-4);
    pointer-events: auto;
    transform: translateY(8px);
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}

.toast--in {
    opacity: 1;
    transform: translateY(0);
}

.toast--out {
    opacity: 0;
    transform: translateY(4px);
}

.toast-success {
    background: var(--success-bg);
    border-color: rgba(34, 197, 94, 0.25);
    color: var(--success);
}

.toast-error {
    background: var(--error-bg);
    border-color: rgba(248, 113, 113, 0.25);
    color: var(--danger);
}

.toast-info {
    background: var(--surface);
    border-color: var(--border-strong);
}

@media (max-width: 1100px) {
    #panel-bot .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    #panel-bot .charts-grid,
    #panel-bot .overview-grid {
        grid-template-columns: 1fr;
    }

    #panel-bot .chart-card.span-2 {
        grid-column: auto;
    }
}

@media (max-width: 768px) {
    #panel-bot .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #panel-bot .panel-header {
        align-items: stretch;
        flex-direction: column;
    }

    #panel-bot .panel-header .btn,
    #panel-bot .panel-header .search-wrap,
    #panel-bot .panel-header .dropdown {
        width: 100%;
    }

    #panel-bot .header-actions,
    #panel-bot .header-actions .dropdown,
    #panel-bot .dropdown-trigger {
        width: 100%;
    }

    #panel-bot .dropdown-trigger {
        justify-content: space-between;
    }

    .toast-container {
        left: var(--space-4);
        right: var(--space-4);
    }
}

@media (max-width: 480px) {
    #panel-bot .stats-grid {
        grid-template-columns: 1fr;
    }

    #panel-bot table.data-table {
        font-size: var(--font-sm);
    }
}

/* ===== pages/pixel-dashboard.css ===== */
/* Pixel CAPI — FlacosMedia */

#panel-pixel .muted {
    color: var(--muted);
}

#panel-pixel .btn-sm,
#panel-pixel .btn--sm {
    font-size: var(--font-sm);
    min-height: 32px;
    padding: var(--space-1) var(--space-3);
}

#panel-pixel .method-pill.other {
    background: var(--soft);
    color: var(--text-secondary);
}

#panel-pixel .plat-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

#panel-pixel .sep,
#panel-pixel .dash {
    color: var(--muted);
}

#panel-pixel .log-item-top .sep {
    opacity: 0.6;
}

#panel-pixel {
    --px-meta: #60a5fa;
    --px-meta-soft: rgba(96, 165, 250, 0.12);
    --px-meta-border: rgba(96, 165, 250, 0.28);
    --px-tiktok: #fb7185;
    --px-tiktok-soft: rgba(251, 113, 133, 0.12);
    --px-tiktok-border: rgba(251, 113, 133, 0.28);
}

#panel-pixel .pixel-dash__toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: space-between;
    min-width: 0;
}

#panel-pixel .pixel-dash__toolbar .dash-subnav {
    flex: 1 1 auto;
    min-width: 0;
}

#panel-pixel .pixel-dash__toolbar-actions {
    align-items: center;
    display: none;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-end;
    min-width: 0;
}

#panel-pixel .pixel-dash__toolbar-actions.is-active {
    display: flex;
}

#panel-pixel .pixel-dash__status {
    font-size: var(--font-sm);
    max-width: 28ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#panel-pixel .pixel-dash__select {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font: inherit;
    font-size: var(--font-sm);
    min-height: 32px;
    padding: var(--space-1) var(--space-3);
}

/* Logs toolbar — filtros compactos */
#panel-pixel .pixel-logs-bar {
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--space-2);
}

#panel-pixel .pixel-logs-bar__filters {
    align-items: stretch;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    display: flex;
    flex: 1 1 auto;
    max-width: 400px;
    min-width: 0;
}

#panel-pixel .pixel-logs-bar__field {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
    min-width: 0;
    padding: 6px 12px;
}

#panel-pixel .pixel-logs-bar__field--grow {
    flex: 1 1 auto;
    min-width: 7rem;
}

#panel-pixel .pixel-logs-bar__label {
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1;
    margin: 0;
    text-transform: uppercase;
}

#panel-pixel .pixel-logs-bar__select {
    appearance: none;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-position: right 0 center;
    background-repeat: no-repeat;
    background-size: 12px;
    border: 0;
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-size: var(--font-sm);
    font-weight: 500;
    line-height: 1.3;
    min-height: 0;
    outline: none;
    padding: 0 16px 0 0;
    width: 100%;
}

#panel-pixel .pixel-logs-bar__select:focus-visible {
    outline: 2px solid var(--border-strong);
    outline-offset: 2px;
}

#panel-pixel .pixel-logs-bar__sep {
    align-self: stretch;
    background: var(--border);
    flex-shrink: 0;
    margin-block: 8px;
    width: 1px;
}

#panel-pixel .pixel-logs-bar__btn {
    flex-shrink: 0;
    white-space: nowrap;
}

#panel-pixel .pixel-logs-bar__icon {
    display: block;
    flex-shrink: 0;
}

#panel-pixel .pixel-logs-bar__btn.is-loading .pixel-logs-bar__icon {
    animation: pixel-logs-spin 0.7s linear infinite;
}

@keyframes pixel-logs-spin {
    to { transform: rotate(360deg); }
}

#panel-pixel .pixel-dash__view {
    display: none;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
}

#panel-pixel .pixel-dash__view.is-active {
    display: flex;
}

#panel-pixel .pixel-dash__intro {
    margin: 0;
    max-width: none;
}

#panel-pixel .pixel-workspace {
    align-items: stretch;
    display: grid;
    gap: var(--space-4);
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
    min-height: min(62vh, 640px);
}

#panel-pixel .pixel-products,
#panel-pixel .pixel-editor,
#panel-pixel .logs-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    min-width: 0;
    overflow: hidden;
    padding: 0;
}

#panel-pixel .pixel-products {
    display: flex;
    flex-direction: column;
    max-height: min(62vh, 640px);
}

#panel-pixel .pixel-card-head {
    align-items: center;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-shrink: 0;
    gap: var(--space-3);
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
}

#panel-pixel .pixel-card-head__title {
    font-size: var(--font-md);
    font-weight: 600;
}

#panel-pixel .pixel-card-head__sub {
    color: var(--muted);
    font-size: var(--font-sm);
    margin-top: 2px;
}

#panel-pixel .pixel-products__list {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-2);
    scrollbar-color: var(--border-strong) transparent;
    scrollbar-width: thin;
}

#panel-pixel .pixel-product-search {
    flex-shrink: 0;
    padding: var(--space-2) var(--space-2) 0;
}

#panel-pixel .pixel-product-search .search-input,
#panel-pixel #pixelProductSearch {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font: inherit;
    font-size: var(--font-sm);
    min-height: 34px;
    padding: var(--space-2) var(--space-3);
    width: 100%;
}

#panel-pixel .stat-value--sm {
    font-size: 0.875rem !important;
    font-weight: 600;
    letter-spacing: -0.01em;
}

#panel-pixel .pixel-icon {
    display: block;
    flex-shrink: 0;
    height: 14px;
    width: 14px;
}

#panel-pixel .product-item {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text);
    cursor: pointer;
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    text-align: left;
    transition: background 150ms ease, border-color 150ms ease;
    width: 100%;
}

#panel-pixel .product-item:hover {
    background: var(--soft);
}

#panel-pixel .product-item.is-active {
    background: var(--surface-hover);
    border-color: var(--border);
    box-shadow: inset 2px 0 0 var(--text-secondary);
}

#panel-pixel .product-item__name {
    flex: 1;
    font-size: var(--font-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.3;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#panel-pixel .product-item__badges {
    align-items: center;
    display: inline-flex;
    flex-shrink: 0;
    gap: 6px;
}

#panel-pixel .platform-badge {
    align-items: center;
    background: var(--soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    display: inline-flex;
    gap: 4px;
    height: 24px;
    justify-content: center;
    min-width: 36px;
    padding: 0 8px 0 6px;
}

#panel-pixel .platform-badge--meta {
    color: var(--px-meta);
}

#panel-pixel .platform-badge--tiktok {
    color: var(--px-tiktok);
}

#panel-pixel .platform-badge.is-empty {
    opacity: 0.45;
}

#panel-pixel .platform-badge__count {
    font-size: var(--font-xs);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    line-height: 1;
}

#panel-pixel .editor-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

#panel-pixel .editor-badges .platform-badge {
    height: 26px;
    min-width: 40px;
    padding: 0 10px 0 7px;
}

#panel-pixel .editor-badges .pixel-icon {
    height: 15px;
    width: 15px;
}

#panel-pixel .pixel-editor {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#panel-pixel .pixel-editor__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    scrollbar-color: var(--border-strong) transparent;
    scrollbar-width: thin;
}

#panel-pixel .pixel-editor__footer {
    align-items: center;
    background: color-mix(in srgb, var(--surface) 92%, var(--bg));
    border-top: 1px solid var(--border);
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-end;
    margin-top: auto;
    padding: var(--space-3) var(--space-4);
    position: sticky;
    z-index: 2;
}

#panel-pixel .pixel-editor__footer .pixel-dash__status {
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
    text-align: left;
}

#panel-pixel .pixel-editor__footer [data-pixel-save] {
    flex: 0 0 auto;
    min-width: 160px;
}

#panel-pixel .editor-empty {
    align-items: center;
    color: var(--muted);
    display: flex;
    flex: 1;
    justify-content: center;
    line-height: 1.6;
    min-height: 200px;
    padding: var(--space-6);
    text-align: center;
}

#panel-pixel .pixel-item {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

#panel-pixel .editor-header {
    align-items: flex-start;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
    padding: var(--space-4);
}

#panel-pixel .editor-kicker {
    color: var(--muted);
    font-size: var(--font-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

#panel-pixel .editor-title {
    font-size: var(--font-lg);
    font-weight: 700;
    margin-top: var(--space-1);
}

#panel-pixel .editor-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

#panel-pixel .editor-badge {
    border-radius: var(--radius-full);
    font-size: var(--font-xs);
    font-weight: 600;
    padding: 3px 10px;
}

/* legacy editor-badge — use platform-badge in editor */
#panel-pixel .editor-badge.meta {
    background: var(--px-meta-soft);
    border: 1px solid var(--px-meta-border);
    color: var(--px-meta);
}

#panel-pixel .editor-badge.tiktok {
    background: var(--px-tiktok-soft);
    border: 1px solid var(--px-tiktok-border);
    color: var(--px-tiktok);
}

#panel-pixel .platform-switch {
    background: var(--soft);
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
}

#panel-pixel .platform-tab {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: var(--font-sm);
    font-weight: 500;
    gap: 6px;
    min-height: 32px;
    padding: var(--space-1) var(--space-4);
}

#panel-pixel .platform-tab .pixel-icon {
    height: 15px;
    width: 15px;
}

#panel-pixel .platform-tab.is-active[data-platform="meta"] {
    background: var(--surface);
    border-color: var(--px-meta-border);
    box-shadow: var(--shadow-xs);
    color: var(--px-meta);
    font-weight: 600;
}

#panel-pixel .platform-tab.is-active[data-platform="tiktok"] {
    background: var(--surface);
    border-color: var(--px-tiktok-border);
    box-shadow: var(--shadow-xs);
    color: var(--px-tiktok);
    font-weight: 600;
}

#panel-pixel .editor-body {
    padding: var(--space-4);
}

#panel-pixel .pixel-section + .pixel-section {
    margin-top: var(--space-4);
}

#panel-pixel .section-label {
    color: var(--muted);
    font-size: var(--font-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    margin: 0 0 var(--space-3);
    text-transform: uppercase;
}

#panel-pixel .field-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

#panel-pixel .field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

#panel-pixel .field label {
    color: var(--text-secondary);
    font-size: var(--font-sm);
    font-weight: 500;
    margin: 0;
}

#panel-pixel .field-hint {
    color: var(--muted);
    font-size: var(--font-sm);
    line-height: 1.5;
    margin: 0;
}

#panel-pixel .code-input,
#panel-pixel .pixel-name-input {
    font-family: var(--font-mono);
    font-size: var(--font-sm);
    line-height: 1.45;
    resize: vertical;
}

#panel-pixel .code-input {
    min-height: 0;
}

#panel-pixel .code-input--sm {
    min-height: 4.5rem;
}

#panel-pixel .code-input--md {
    min-height: 6rem;
}

#panel-pixel .btn-danger {
    background: transparent;
    border-color: transparent;
    color: var(--danger);
    flex-shrink: 0;
    min-height: 32px;
}

#panel-pixel .btn-danger:hover {
    background: var(--error-bg);
}

#panel-pixel .err {
    background: var(--error-bg);
    border: 1px solid rgba(248, 113, 113, 0.25);
    border-radius: var(--radius-sm);
    color: var(--danger);
    display: none;
    font-size: var(--font-md);
    padding: var(--space-3) var(--space-4);
}

#panel-pixel .err.show {
    display: block;
}

#panel-pixel .stats-row {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

#panel-pixel .stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: var(--space-4);
}

#panel-pixel .stat-label {
    color: var(--muted);
    font-size: var(--font-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#panel-pixel .stat-value {
    font-size: 1.375rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    margin-top: var(--space-1);
}

#panel-pixel .stat-value small {
    color: var(--muted);
    font-size: var(--font-sm);
    font-weight: 500;
}

#panel-pixel .logs-card {
    display: flex;
    flex-direction: column;
    max-height: min(70vh, 720px);
    min-height: 320px;
}

#panel-pixel .logs-scroll {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-2);
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-2);
    scrollbar-color: var(--border-strong) transparent;
    scrollbar-width: thin;
}

#panel-pixel .log-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
}

#panel-pixel .log-item__head {
    align-items: flex-start;
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
}

#panel-pixel .log-item__main {
    align-items: center;
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-width: 0;
}

#panel-pixel .log-item__product {
    color: var(--text);
    font-size: var(--font-base);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

#panel-pixel .log-item__event {
    background: var(--soft);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: var(--font-xs);
    font-weight: 600;
    padding: 3px 8px;
}

#panel-pixel .log-item__plats {
    align-items: center;
    display: inline-flex;
    gap: 4px;
}

#panel-pixel .log-plat {
    align-items: center;
    color: var(--muted);
    display: inline-flex;
    height: 22px;
    justify-content: center;
    width: 22px;
}

#panel-pixel .log-plat--meta {
    color: var(--px-meta);
}

#panel-pixel .log-plat--tiktok {
    color: var(--px-tiktok);
}

#panel-pixel .log-plat .pixel-icon {
    height: 14px;
    width: 14px;
}

#panel-pixel .log-item__path-only {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--font-sm);
    word-break: break-all;
}

#panel-pixel .log-item__status {
    align-items: center;
    display: inline-flex;
    flex-shrink: 0;
    gap: 6px;
}

#panel-pixel .log-status {
    font-family: var(--font-mono);
    font-size: var(--font-sm);
    font-weight: 700;
    min-width: 2.5ch;
    text-align: right;
}

#panel-pixel .log-item__ms {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    white-space: nowrap;
}

#panel-pixel .log-item__meta {
    align-items: center;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--font-xs);
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border);
}

#panel-pixel .log-item__time {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

#panel-pixel .log-item__path,
#panel-pixel .log-item__ip {
    font-family: var(--font-mono);
    word-break: break-all;
}

#panel-pixel .log-item__path::before,
#panel-pixel .log-item__ip::before {
    content: '·';
    margin-right: var(--space-2);
    opacity: 0.45;
}

#panel-pixel .log-item__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--space-2);
}

#panel-pixel .log-tag {
    background: var(--soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: var(--font-xs);
    line-height: 1.3;
    padding: 3px 8px;
}

#panel-pixel .log-tag--muted {
    color: var(--muted);
    font-family: var(--font-mono);
}

#panel-pixel .log-item__extras {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: var(--space-2);
}

#panel-pixel .log-extra summary {
    color: var(--muted);
    cursor: pointer;
    font-size: var(--font-xs);
    font-weight: 500;
    list-style: none;
    user-select: none;
}

#panel-pixel .log-extra summary::-webkit-details-marker {
    display: none;
}

#panel-pixel .log-extra summary::before {
    content: '▸ ';
    display: inline-block;
    transition: transform 150ms ease;
}

#panel-pixel .log-extra[open] summary::before {
    transform: rotate(90deg);
}

#panel-pixel .log-extra pre {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    line-height: 1.45;
    margin-top: var(--space-2);
    max-height: 200px;
    overflow: auto;
    padding: var(--space-3);
    white-space: pre-wrap;
    word-break: break-word;
}

#panel-pixel .log-extra--error summary {
    color: var(--danger);
}

#panel-pixel .method-pill {
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    font-weight: 700;
    padding: 2px 8px;
}

#panel-pixel .method-pill.POST { background: var(--success-bg); color: var(--success); }
#panel-pixel .method-pill.PUT { background: var(--warn-bg); color: var(--warn); }
#panel-pixel .method-pill.DELETE { background: var(--error-bg); color: var(--danger); }
#panel-pixel .method-pill.GET { background: var(--soft); color: var(--text-secondary); }

#panel-pixel .st { font-family: var(--font-mono); font-size: var(--font-sm); font-weight: 700; }
#panel-pixel .st2xx { color: var(--success); }
#panel-pixel .st3xx { color: var(--muted); }
#panel-pixel .st4xx { color: var(--warn); }
#panel-pixel .st5xx { color: var(--danger); }

@media (max-width: 640px) {
    #panel-pixel .log-item__head {
        flex-direction: column;
    }

    #panel-pixel .log-item__status {
        width: 100%;
    }
}

#panel-pixel .empty {
    color: var(--muted);
    padding: var(--space-6);
    text-align: center;
}

@media (max-width: 900px) {
    #panel-pixel .pixel-workspace {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    #panel-pixel .pixel-products {
        max-height: 260px;
    }
}

@media (max-width: 640px) {
    #panel-pixel .pixel-dash__toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    #panel-pixel .pixel-dash__toolbar-actions:not(.pixel-logs-bar) {
        justify-content: stretch;
        width: 100%;
    }

    #panel-pixel .pixel-dash__toolbar-actions:not(.pixel-logs-bar) .btn,
    #panel-pixel .pixel-dash__toolbar-actions:not(.pixel-logs-bar) .pixel-dash__select {
        flex: 1 1 auto;
        min-width: 0;
    }

    #panel-pixel .pixel-logs-bar {
        flex-wrap: wrap;
        width: 100%;
    }

    #panel-pixel .pixel-logs-bar__filters {
        flex: 1 1 100%;
        max-width: none;
    }

    #panel-pixel .pixel-logs-bar__btn {
        margin-left: auto;
    }

    #panel-pixel .pixel-dash__status {
        flex: 1 1 100%;
        max-width: none;
        text-align: center;
        white-space: normal;
    }
}

/* ===== core/spacing.css ===== */
/* Unified spacing & alignment across panels */

.accounts-page,
.team-page,
.ig-page,
.reel {
    gap: var(--gap-section);
}

/* Panel internal padding — team only (accounts uses accounts.css) */
.team-panel__head,
.team-panel__body {
    padding-left: var(--panel-x);
    padding-right: var(--panel-x);
}

.team-panel__head {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

.team-panel__body {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
}

.team-panel__body--empty {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
}

/* Page heroes */
.team-page__header,
.team-hero,
.ig-head,
.reel-head {
    gap: var(--gap-section);
}

.accounts-hero__copy h2,
.team-page__intro h2,
.team-hero__copy h2,
.ig-head__title h2,
.reel-head h2 {
    margin: 0;
}

/* ===== core/macos.css ===== */
/* macOS Sequoia materials — solid (no glass/blur), FlacosMedia colors */

:root {
    --macos-hairline: color-mix(in srgb, var(--line) 90%, var(--text) 10%);
    --macos-window-shadow:
        0 0 0 1px color-mix(in srgb, var(--line) 75%, transparent),
        0 8px 24px color-mix(in srgb, #000 7%, transparent),
        0 1px 3px color-mix(in srgb, #000 4%, transparent);
    --macos-control-shadow: 0 0.5px 1px color-mix(in srgb, #000 8%, transparent);
    --macos-control-radius: 7px;
    --macos-window-radius: 12px;
    --macos-seg-radius: 8px;
    --macos-ctrl-h: 28px;
}

[data-theme="dark"] {
    --macos-window-shadow:
        0 0 0 1px color-mix(in srgb, var(--line) 90%, transparent),
        0 12px 32px color-mix(in srgb, #000 38%, transparent);
    --macos-control-shadow: 0 1px 2px color-mix(in srgb, #000 30%, transparent);
}

/* Kill glass everywhere in the shell */
.sidebar,
.topbar,
.sidebar__header,
.app-shell {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Sidebar — Sequoia Settings (solid, no glass) */
.sidebar {
    --sidebar-pad: 10px;
    --sidebar-inset: 8px;
    --sidebar-rail: 28px;
    --sidebar-gap: 10px;
    --sidebar-control: 28px;
    --sidebar-text-x: calc(var(--sidebar-inset) + var(--sidebar-rail) + var(--sidebar-gap));
    --sidebar-item-h: 32px;
    --sidebar-section-gap: 16px;
    --sidebar-sel-radius: 7px;
    border-right: 1px solid var(--macos-hairline);
    background: color-mix(in srgb, var(--soft) 55%, var(--elevated));
    box-shadow: none;
}

[data-theme="dark"] .sidebar {
    background: color-mix(in srgb, var(--elevated) 92%, #000);
}

.sidebar__header {
    height: 52px;
    min-height: 52px;
    padding: 0 10px 0 var(--sidebar-pad);
    border-bottom: 1px solid var(--macos-hairline);
    background: transparent;
}

.sidebar__footer {
    padding: 8px var(--sidebar-pad) 10px;
    border-top: 1px solid var(--macos-hairline);
    background: transparent;
}

.sidebar__brand .brand {
    padding-left: var(--sidebar-inset);
    gap: 8px;
}

.sidebar__brand .brand-mark {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 28%, transparent);
}

.sidebar__brand .brand-mark svg,
.sidebar__brand .brand-mark__logo {
    width: 16px;
    height: 16px;
    color: #fff;
}

.sidebar__brand .brand-text strong {
    font-size: 14px;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--text);
}

.sidebar__brand .brand-text span {
    display: none;
}

.sidebar__collapse,
.sidebar__close {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    color: var(--muted);
}

.sidebar__collapse:hover,
.sidebar__close:hover {
    background: color-mix(in srgb, var(--text) 6%, transparent);
    color: var(--text);
}

.sidebar__body {
    padding: 8px var(--sidebar-pad) 10px;
}

.sidebar__nav {
    gap: var(--sidebar-section-gap);
}

.sidebar__section {
    gap: 1px;
}

.sidebar__section + .sidebar__section {
    border-top: 0;
    padding-top: 0;
}

.sidebar__section-title {
    margin: 0 0 3px !important;
    padding: 2px var(--sidebar-inset) 3px var(--sidebar-text-x) !important;
    color: var(--muted) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
    text-transform: none !important;
}

.sidebar__menu {
    gap: 1px;
}

.sidebar__link,
.sidebar__sublink {
    min-height: var(--sidebar-item-h) !important;
    padding: 0 var(--sidebar-inset) !important;
    border-radius: var(--sidebar-sel-radius) !important;
    color: var(--secondary) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: -0.015em !important;
    box-shadow: none !important;
}

.sidebar__link::before {
    display: none !important;
}

.sidebar__link-icon,
.sidebar__sublink-icon {
    width: var(--sidebar-rail) !important;
    height: var(--sidebar-rail) !important;
    color: var(--muted) !important;
    opacity: 1 !important;
}

.sidebar__link-icon svg,
.sidebar__sublink-icon svg {
    width: 16px !important;
    height: 16px !important;
}

/* Sidebar interaction states are owned by shell-premium.css. */

.sidebar__badge {
    min-width: 16px;
    min-height: 16px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    font-weight: 650;
    line-height: 16px;
}

.sidebar__profile {
    gap: 8px;
    min-height: 40px;
    padding: 4px;
    border: 0 !important;
    border-radius: 8px;
    background: transparent !important;
}

.sidebar__profile:hover {
    background: color-mix(in srgb, var(--text) 5.5%, transparent) !important;
    border-color: transparent !important;
}

.sidebar__avatar {
    width: 26px;
    height: 26px;
    border: 0;
    background: color-mix(in srgb, var(--accent) 18%, var(--soft));
    color: var(--text);
    font-size: 11px;
    font-weight: 650;
}

.sidebar__user-name {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.sidebar__user-role {
    color: var(--muted);
    font-size: 12px;
}

.sidebar__icon-btn,
.sidebar__theme.theme-toggle {
    width: 26px;
    height: 26px;
    border-radius: 6px;
}

.sidebar__icon-btn:hover,
.sidebar__theme.theme-toggle:hover {
    background: color-mix(in srgb, var(--text) 6%, transparent);
}

@media (min-width: 769px) {
    html[data-sidebar-collapsed="true"] .sidebar__link,
    html[data-sidebar-collapsed="true"] .sidebar__sublink {
        justify-content: center;
        width: 32px;
        padding: 0 !important;
    }

    html[data-sidebar-collapsed="true"] .sidebar__profile {
        justify-content: center;
    }
}

/* Topbar — solid titlebar */
.topbar {
    border-bottom: 1px solid var(--macos-hairline);
    background: var(--bg) !important;
    box-shadow: none;
}

.app-shell {
    background: var(--bg);
}

/* Cards = solid document windows */
.card,
.fm-card,
.integrations-card,
.bot-card,
.pixel-card,
.stat-card,
.metric-card,
.overview-card {
    border: 1px solid var(--macos-hairline);
    border-radius: var(--macos-window-radius);
    background: var(--surface);
    box-shadow: var(--macos-window-shadow);
}

/* Push buttons — Sequoia density */
.btn,
.button {
    min-height: var(--macos-ctrl-h);
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: var(--macos-control-radius);
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    font-weight: 550;
    letter-spacing: -0.01em;
    box-shadow: var(--macos-control-shadow);
    filter: none;
}

.btn:hover,
.button:hover {
    filter: none;
    background: var(--hover);
    border-color: var(--line-strong);
}

.btn:active,
.button:active {
    background: var(--soft);
    box-shadow: inset 0 1px 1px color-mix(in srgb, #000 10%, transparent);
}

.btn--primary,
.btn-primary,
.accounts-modal__btn--primary {
    border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line));
    border-radius: var(--macos-control-radius);
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 22%, transparent);
}

.btn--primary:hover,
.btn-primary:hover,
.accounts-modal__btn--primary:hover {
    filter: none;
    background: var(--accent-hover);
    color: #fff;
}

.btn--secondary,
.button.secondary,
.dropdown-trigger {
    background: var(--surface);
    border-color: var(--line);
    color: var(--secondary);
    box-shadow: var(--macos-control-shadow);
}

.btn--ghost {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--secondary);
}

.btn--ghost:hover {
    background: var(--hover);
    color: var(--text);
}

.btn--sm {
    min-height: 26px;
    padding: 0 9px;
    font-size: 12px;
}

/* Fields — solid inset */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
    min-height: var(--macos-ctrl-h);
    border: 1px solid var(--line);
    border-radius: var(--macos-control-radius);
    background: var(--elevated);
    box-shadow: inset 0 1px 1px color-mix(in srgb, #000 4%, transparent);
}

input:focus,
select:focus,
textarea:focus {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* —— Publish document window —— */
#panel-publish .publish-composer,
#panel-publish .publish-composer.card,
#panel-publish .publish-composer--reels,
#panel-publish .publish-queue {
    border: 1px solid var(--publish-border);
    border-radius: var(--publish-radius);
    background: var(--publish-surface);
    box-shadow: var(--macos-window-shadow);
    overflow: hidden;
}

#panel-publish .publish-toolbar {
    --tb-h: 30px;
    --tb-track: color-mix(in srgb, var(--soft) 78%, var(--elevated));
    --tb-pill-shadow:
        0 0.5px 0 color-mix(in srgb, #fff 8%, transparent),
        0 1px 2px color-mix(in srgb, #000 14%, transparent);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 16px 14px;
    border-bottom: 1px solid var(--publish-border);
    background: var(--publish-surface);
}

[data-theme="dark"] #panel-publish .publish-toolbar {
    --tb-track: color-mix(in srgb, var(--elevated) 70%, #000);
    --tb-pill-shadow:
        0 0.5px 0 color-mix(in srgb, #fff 5%, transparent),
        0 1px 3px color-mix(in srgb, #000 36%, transparent);
}

#panel-publish .publish-toolbar__row {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 16px 22px;
}

#panel-publish .publish-toolbar__cluster,
#panel-publish .publish-compose-mode--bar {
    display: grid;
    grid-template-rows: auto var(--tb-h);
    align-content: start;
    align-items: start;
    justify-items: start;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    border-left: 0;
    background: transparent;
    min-height: 0;
}

#panel-publish .publish-toolbar__cluster:first-child {
    padding-left: 0;
    border-left: 0;
}

#panel-publish .publish-toolbar__cluster + .publish-toolbar__cluster,
#panel-publish .publish-toolbar__cluster + .publish-compose-mode--bar:not([hidden]),
#panel-publish .publish-compose-mode--bar:not([hidden]) + .publish-toolbar__cluster {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
}

#panel-publish .publish-toolbar__cluster + .publish-toolbar__cluster::before,
#panel-publish .publish-toolbar__cluster + .publish-compose-mode--bar:not([hidden])::before,
#panel-publish .publish-compose-mode--bar:not([hidden]) + .publish-toolbar__cluster::before {
    display: none !important;
    content: none !important;
}

#panel-publish .publish-toolbar__label {
    display: block;
    height: auto;
    margin: 0;
    padding: 0 2px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-transform: none;
    line-height: 1.2;
}

/* Shared NSSegmentedControl track */
#panel-publish .publish-page__head .publish-subnav,
#panel-publish .publish-page__head .fm-tabs.publish-subnav,
#panel-publish .publish-toolbar .publish-platforms--compact,
#panel-publish .publish-toolbar .publish-seg--format,
#panel-publish .publish-compose-mode__inner,
#panel-publish .publish-queue .publish-seg {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: stretch;
    width: fit-content;
    max-width: 100%;
    height: var(--tb-h, 30px);
    min-height: var(--tb-h, 30px);
    margin: 0;
    padding: 2px;
    gap: 0;
    border: 0;
    border-radius: 8px;
    background: var(--tb-track, var(--soft));
    box-shadow: inset 0 1px 1px color-mix(in srgb, #000 7%, transparent);
    overflow: hidden;
}

#panel-publish .publish-page__head .publish-subnav,
#panel-publish .publish-page__head .fm-tabs.publish-subnav {
    overflow-x: auto;
}

#panel-publish .publish-toolbar .publish-seg--format {
    min-width: 0;
}

#panel-publish .publish-compose-mode__inner {
    min-width: 0;
}

#panel-publish .publish-page__head .publish-subnav__btn,
#panel-publish .publish-toolbar .publish-platforms--compact .publish-platform,
#panel-publish .publish-toolbar .publish-seg--format .publish-seg__btn,
#panel-publish .publish-compose-mode__card,
#panel-publish .publish-queue .publish-seg__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--secondary);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1;
    box-shadow: none;
    outline: none;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

#panel-publish .publish-page__head .publish-subnav__btn::after {
    display: none !important;
}

#panel-publish .publish-toolbar .publish-platforms--compact .publish-platform {
    padding: 0 11px;
}

#panel-publish .publish-page__head .publish-subnav__btn:hover,
#panel-publish .publish-toolbar .publish-platforms--compact .publish-platform:hover,
#panel-publish .publish-toolbar .publish-seg--format .publish-seg__btn:hover,
#panel-publish .publish-compose-mode__card:hover {
    color: var(--text);
    background: transparent;
}

#panel-publish .publish-page__head .publish-subnav__btn.is-active,
#panel-publish .publish-toolbar .publish-platforms--compact .publish-platform:has(input:checked),
#panel-publish .publish-toolbar .publish-seg--format .publish-seg__btn.is-active,
#panel-publish .publish-toolbar .publish-seg--format .publish-seg__btn:has(input:checked),
#panel-publish .publish-compose-mode__card.is-active,
#panel-publish .publish-queue .publish-seg__btn.is-active {
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    box-shadow: var(--tb-pill-shadow, var(--macos-control-shadow));
}

#panel-publish .publish-page__head .publish-subnav__btn.is-active svg,
#panel-publish .publish-toolbar .publish-platforms--compact .publish-platform:has(input:checked) .publish-platform__icon {
    color: var(--publish-blue);
}

#panel-publish .publish-page__head .publish-subnav__btn.is-active::after {
    display: none !important;
}

#panel-publish .publish-toolbar .publish-platforms--compact .publish-platform__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    line-height: 0;
    color: var(--muted);
}

#panel-publish .publish-toolbar .publish-platforms--compact .publish-platform__icon svg {
    width: 14px;
    height: 14px;
}

#panel-publish .publish-toolbar .publish-platforms--compact .publish-platform:focus-within {
    outline: none;
}

#panel-publish .publish-compose-mode__copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

#panel-publish .publish-compose-mode__copy strong {
    font-size: inherit;
    font-weight: inherit;
}

#panel-publish .publish-toolbar__accounts {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--publish-border);
}

#panel-publish .publish-accounts-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    min-height: 30px;
}

#panel-publish .publish-accounts-head__meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#panel-publish .publish-accounts-head__meta .publish-toolbar__label {
    padding: 0;
    font-size: 11px;
    font-weight: 500;
}

#panel-publish .publish-accounts-bar__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 22px;
    padding: 0 8px;
    border: 0;
    border-radius: 999px;
    background: var(--tb-track, var(--soft));
    color: var(--secondary);
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

#panel-publish .publish-accounts-head__actions {
    display: inline-grid;
    grid-auto-flow: column;
    align-items: stretch;
    height: 28px;
    padding: 2px;
    border: 0;
    border-radius: 7px;
    background: var(--tb-track, var(--soft));
    box-shadow: inset 0 1px 1px color-mix(in srgb, #000 6%, transparent);
}

#panel-publish .publish-accounts-head__actions .btn {
    min-height: 0;
    height: 100%;
    padding: 0 10px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--secondary);
    font-size: 12px;
    font-weight: 500;
    box-shadow: none;
}

#panel-publish .publish-accounts-head__actions .btn:hover {
    color: var(--text);
    background: transparent;
}

#panel-publish .publish-accounts-bar__search {
    position: relative;
    margin-left: auto;
    display: flex;
    align-items: center;
    width: min(200px, 100%);
    max-width: 200px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: var(--tb-track, var(--soft));
    box-shadow: inset 0 1px 1px color-mix(in srgb, #000 6%, transparent);
}

#panel-publish .publish-accounts-bar__search svg {
    left: 9px;
    width: 13px;
    height: 13px;
    color: var(--muted);
}

#panel-publish .publish-accounts-bar__search input {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0 10px 0 28px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text);
    font-size: 12.5px;
    box-shadow: none;
}

#panel-publish .publish-accounts-bar__search input::placeholder {
    color: var(--muted);
}

#panel-publish .publish-account-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-height: none;
    overflow: visible;
    padding: 0;
}

#panel-publish .publish-account-pill,
#panel-publish .publish-toolbar .publish-account-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 2px 10px 2px 2px;
    border: 0;
    border-radius: 999px;
    background: var(--tb-track, var(--soft));
    color: var(--secondary);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1;
    box-shadow: none;
    outline: none;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

#panel-publish .publish-account-pill:hover,
#panel-publish .publish-toolbar .publish-account-pill:hover {
    background: color-mix(in srgb, var(--soft) 55%, var(--hover));
    color: var(--text);
    transform: none;
}

#panel-publish .publish-account-pill:has(input:checked),
#panel-publish .publish-toolbar .publish-account-pill:has(input:checked) {
    border: 0;
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    box-shadow: var(--tb-pill-shadow, var(--macos-control-shadow));
}

#panel-publish .publish-account-pill__avatar,
#panel-publish .publish-toolbar .publish-account-pill__avatar {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 0.5px color-mix(in srgb, #000 12%, transparent);
}

#panel-publish .publish-account-pill__name {
    max-width: 148px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#panel-publish .publish-account-pill__badges {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--muted);
}

#panel-publish .publish-account-pill:has(input:checked) .publish-account-pill__badges {
    color: var(--publish-blue);
}

#panel-publish .publish-bulk-stats--bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    min-height: 36px;
    margin: 0;
    padding: 8px 16px;
    border: 0;
    border-bottom: 1px solid var(--publish-border);
    border-radius: 0;
    background: color-mix(in srgb, var(--soft) 40%, var(--surface));
}

#panel-publish .publish-bulk-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 4px 9px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--elevated) 55%, transparent);
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1;
}

#panel-publish .publish-bulk-stat strong {
    color: var(--text);
    font-size: 12px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

#panel-publish .publish-bulk-stat--status {
    margin-left: auto;
    padding: 5px 10px;
    border: 0 !important;
    border-style: solid !important;
    border-radius: 7px;
    background: color-mix(in srgb, var(--publish-blue) 12%, var(--surface));
    color: var(--publish-blue);
    font-size: 12px;
    font-weight: 600;
}

#panel-publish .publish-bulk-stat--status.is-warning {
    background: color-mix(in srgb, #d97706 14%, var(--surface));
    color: color-mix(in srgb, #d97706 82%, var(--text));
    border: 0 !important;
}

@media (max-width: 760px) {
    #panel-publish .publish-toolbar__row {
        gap: 12px;
    }

    #panel-publish .publish-toolbar__cluster,
    #panel-publish .publish-compose-mode--bar {
        width: 100%;
    }

    #panel-publish .publish-toolbar .publish-platforms--compact,
    #panel-publish .publish-toolbar .publish-seg--format,
    #panel-publish .publish-compose-mode__inner {
        width: 100%;
        grid-auto-columns: 1fr;
    }

    #panel-publish .publish-toolbar__cluster + .publish-toolbar__cluster,
    #panel-publish .publish-toolbar__cluster + .publish-compose-mode--bar:not([hidden]),
    #panel-publish .publish-compose-mode--bar:not([hidden]) + .publish-toolbar__cluster {
        padding-top: 0;
        border-top: 0;
    }

    #panel-publish .publish-accounts-bar__search {
        margin-left: 0;
        width: 100%;
        max-width: none;
    }

    #panel-publish .publish-bulk-stat--status {
        margin-left: 0;
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

#panel-publish .publish-workspace {
    background: var(--publish-canvas);
}

#panel-publish .publish-compose-zone--media,
#panel-publish .publish-stage__media {
    gap: 12px;
    padding: 14px 16px 16px;
    background: var(--publish-surface);
}

#panel-publish .publish-stage__media-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    min-height: 28px;
}

#panel-publish .publish-stage__title {
    margin: 0;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: -0.01em;
}

#panel-publish .publish-stage__media-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    min-width: 0;
}

#panel-publish .publish-media-panel__count {
    min-width: 22px;
    min-height: 20px;
    padding: 0 7px;
    border: 0;
    border-radius: 999px;
    background: var(--tb-track, var(--soft));
    color: var(--secondary);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

#panel-publish .publish-stage__hint {
    margin: 0;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

#panel-publish .publish-stage__limits {
    margin: 0;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: color-mix(in srgb, var(--soft) 55%, var(--surface));
    color: var(--secondary);
    font-size: 11.5px;
    line-height: 1.35;
}

#panel-publish .publish-stage__limits[hidden],
#panel-publish .publish-media-list[hidden],
#panel-publish .publish-media-panel__toolbar[hidden],
#panel-publish .publish-bulk-media-tools[hidden],
#panel-publish .publish-url-fallback[hidden] {
    display: none !important;
}

#panel-publish .publish-media-panel__toolbar {
    display: inline-grid;
    grid-auto-flow: column;
    align-items: stretch;
    height: 26px;
    margin: 0;
    padding: 2px;
    border: 0;
    border-radius: 7px;
    background: var(--tb-track, var(--soft));
    box-shadow: inset 0 1px 1px color-mix(in srgb, #000 6%, transparent);
    width: auto;
}

#panel-publish .publish-media-panel__toolbar .btn {
    min-height: 0;
    height: 100%;
    padding: 0 10px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--secondary);
    font-size: 12px;
    font-weight: 500;
    box-shadow: none;
}

#panel-publish .publish-media-panel__toolbar .btn:hover {
    color: var(--text);
    background: transparent;
}

#panel-publish .publish-media-panel__toolbar .btn[hidden] {
    display: none !important;
}

#panel-publish .publish-dropzone--reel,
#panel-publish .publish-composer .publish-compose-zone--media .publish-dropzone--reel,
#panel-publish .publish-composer.publish-composer--bulk .publish-compose-zone--media .publish-dropzone--reel,
#panel-publish .publish-dropzone--reel.publish-dropzone--bulk {
    display: grid !important;
    place-items: center;
    box-sizing: border-box;
    flex: 0 0 auto !important;
    align-self: stretch;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 9 / 16;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(58vh, 460px) !important;
    margin: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 18px;
    background: color-mix(in srgb, var(--soft) 55%, var(--elevated));
    box-shadow: inset 0 0 0 1px var(--publish-border);
    cursor: pointer;
    transition: background 140ms ease, box-shadow 140ms ease;
    overflow: hidden;
}

#panel-publish .publish-composer--post .publish-dropzone--reel,
#panel-publish .publish-composer--post .publish-compose-zone--media .publish-dropzone--reel {
    aspect-ratio: 1 / 1;
    width: 100% !important;
    max-height: min(42vh, 320px) !important;
    border-radius: 14px;
}

#panel-publish .publish-stage__media:has(.publish-media-list--bulk:not([hidden])) .publish-dropzone--reel,
#panel-publish .publish-stage__media:has(.publish-media-list--grid:not([hidden])) .publish-dropzone--reel {
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(42vh, 340px) !important;
    align-self: stretch;
    margin-inline: 0;
}

#panel-publish .publish-composer--story .publish-dropzone--reel,
#panel-publish .publish-composer--story .publish-compose-zone--media .publish-dropzone--reel,
#panel-publish .publish-composer--reel .publish-dropzone--reel,
#panel-publish .publish-composer--reel .publish-compose-zone--media .publish-dropzone--reel,
#panel-publish .publish-composer--reels .publish-dropzone--reel,
#panel-publish .publish-composer--reels .publish-compose-zone--media .publish-dropzone--reel {
    aspect-ratio: 9 / 16;
    border-radius: 18px;
}

#panel-publish .publish-composer .publish-compose-zone--media .publish-dropzone--reel:hover,
#panel-publish .publish-composer .publish-compose-zone--media .publish-dropzone--reel.is-dragover {
    background: color-mix(in srgb, var(--publish-blue) 10%, var(--surface));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--publish-blue) 40%, var(--publish-border)),
        0 0 0 3px color-mix(in srgb, var(--publish-blue) 12%, transparent);
}

#panel-publish .publish-dropzone__frame {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 10px;
    width: 100%;
    height: 100%;
    padding: 20px 14px;
    text-align: center;
}

#panel-publish .publish-dropzone__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: var(--surface);
    color: var(--publish-blue);
    box-shadow: var(--tb-pill-shadow, var(--macos-control-shadow));
}

#panel-publish .publish-dropzone__copy {
    display: grid;
    gap: 4px;
    justify-items: center;
}

#panel-publish .publish-dropzone__copy strong {
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
}

#panel-publish .publish-dropzone__copy span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

#panel-publish .publish-dropzone__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--publish-blue);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: 0.01em;
    box-shadow: var(--macos-control-shadow);
    pointer-events: none;
}

#panel-publish .publish-media-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    align-self: stretch;
    box-sizing: border-box;
    overflow-x: hidden;
}

#panel-publish .publish-media-list__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 0;
    min-height: 30px;
    margin: 0;
    padding: 6px 10px;
    border: 0;
    border-radius: 8px;
    background: var(--tb-track, var(--soft));
    font-size: 12px;
    box-sizing: border-box;
}

#panel-publish .publish-media-list__summary.is-pending {
    background: color-mix(in srgb, #d97706 12%, var(--surface));
    color: color-mix(in srgb, #d97706 80%, var(--text));
}

#panel-publish .publish-media-list__summary.is-ready {
    background: color-mix(in srgb, #16a34a 12%, var(--surface));
    color: color-mix(in srgb, #16a34a 78%, var(--text));
}

#panel-publish .publish-media-list__grid,
#panel-publish .publish-media-list--grid .publish-media-list__grid,
#panel-publish .publish-media-list--bulk .publish-media-list__grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 !important;
    max-height: none;
    overflow: visible !important;
    scrollbar-gutter: auto !important;
    box-sizing: border-box;
}

#panel-publish .publish-media-card,
#panel-publish .publish-toolbar .publish-media-card {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) 28px !important;
    align-items: center !important;
    justify-items: stretch;
    column-gap: 8px !important;
    row-gap: 0 !important;
    gap: 0 8px !important;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    min-height: 40px;
    margin: 0;
    padding: 6px 8px !important;
    border: 0 !important;
    border-radius: 8px;
    background: var(--tb-track, var(--soft));
    box-sizing: border-box;
    transform: none !important;
}

#panel-publish .publish-media-card--single {
    grid-template-columns: minmax(0, 1fr) 28px !important;
}

#panel-publish .publish-media-card__index {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    max-width: 24px;
    margin: 0;
    padding: 0;
    border-radius: 6px;
    background: color-mix(in srgb, var(--publish-blue) 14%, var(--surface));
    color: var(--publish-blue);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    justify-self: start;
}

#panel-publish .publish-media-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    width: 100%;
    overflow: hidden;
}

#panel-publish .publish-media-card__body strong,
#panel-publish .publish-media-card__body span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: transparent;
}

#panel-publish .publish-media-card__body strong {
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

#panel-publish .publish-media-card__body span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
}

#panel-publish .publish-media-card__remove {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    max-width: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    color: var(--muted);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    justify-self: end;
    transform: none !important;
}

#panel-publish .publish-media-card__remove:hover {
    background: color-mix(in srgb, #ef4444 12%, var(--surface));
    color: #ef4444;
}

#panel-publish .publish-bulk-media-tools {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 2px 8px 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-sizing: border-box;
}

#panel-publish .publish-bulk-media-tools .publish-check--compact {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.2;
    box-sizing: border-box;
}

#panel-publish .publish-bulk-media-tools .publish-check--compact input {
    width: 14px;
    height: 14px;
    min-width: 14px;
    margin: 0 !important;
    padding: 0;
    flex-shrink: 0;
    align-self: center;
    accent-color: var(--publish-blue);
    vertical-align: middle;
}

#panel-publish .publish-bulk-media-tools .publish-check--compact span {
    display: block;
    min-width: 0;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

#panel-publish .publish-url-fallback {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

#panel-publish .publish-url-fallback summary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
}

#panel-publish .publish-url-fallback summary::-webkit-details-marker {
    display: none;
}

#panel-publish .publish-url-fallback summary:hover {
    color: var(--publish-blue);
}

#panel-publish .publish-url-fallback[open] summary {
    margin-bottom: 8px;
    color: var(--text);
}

#panel-publish .publish-url-fallback textarea {
    min-height: 64px;
    border: 1px solid var(--publish-border);
    border-radius: 8px;
    background: var(--elevated);
    box-shadow: inset 0 1px 1px color-mix(in srgb, #000 3%, transparent);
    font-size: 12.5px;
}

#panel-publish .publish-rail-card--preview,
#panel-publish .publish-rail-card:not(.publish-rail-card--preview) {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid var(--publish-border);
    border-radius: 10px;
    background: var(--publish-surface);
    box-shadow: var(--macos-control-shadow);
}

#panel-publish .publish-post-preview__card {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

#panel-publish .publish-caption__field textarea,
#panel-publish .publish-stage__caption textarea {
    border: 1px solid var(--publish-border);
    border-radius: 8px;
    background: var(--elevated);
    box-shadow: inset 0 1px 1px color-mix(in srgb, #000 3%, transparent);
    font-size: 13px;
}

#panel-publish .publish-rail__submit .btn--lg {
    min-height: 36px;
    border-radius: var(--macos-control-radius);
    background: var(--publish-blue);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--publish-blue) 28%, transparent);
}

#panel-publish .publish-rail__submit .btn--lg:hover {
    background: var(--publish-blue-hover);
}

#panel-publish .publish-page__actions .btn {
    min-height: var(--macos-ctrl-h);
    border-radius: var(--macos-control-radius);
    box-shadow: var(--macos-control-shadow);
}

#panel-publish .publish-page__head h2 {
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 680;
    letter-spacing: -0.04em;
}

#panel-publish .publish-page__eyebrow {
    color: var(--publish-blue);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

#panel-publish .publish-queue .publish-post {
    border: 1px solid var(--publish-border);
    border-radius: 10px;
    box-shadow: var(--macos-control-shadow);
}

/* -----------------------------------------------------------
   Publish motion — Sequoia (presence + hierarchy, not noise)
   ----------------------------------------------------------- */

@keyframes macos-pub-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes macos-pub-fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes macos-pub-pop {
    0% {
        transform: scale(0.94);
    }
    55% {
        transform: scale(1.03);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes macos-pub-pill {
    from {
        opacity: 0;
        transform: translateY(4px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes macos-pub-breathe {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-1.5px);
    }
}

@keyframes macos-pub-ring {
    0%,
    100% {
        box-shadow:
            0 0 0 0 color-mix(in srgb, var(--publish-blue) 0%, transparent),
            inset 0 1px 1px color-mix(in srgb, #000 4%, transparent);
    }
    50% {
        box-shadow:
            0 0 0 3px color-mix(in srgb, var(--publish-blue) 12%, transparent),
            inset 0 1px 1px color-mix(in srgb, #000 4%, transparent);
    }
}

#panel-publish .publish-page__head {
    animation: macos-pub-fade 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

#panel-publish .publish-view.is-active .publish-composer,
#panel-publish .publish-view.is-active .publish-queue,
#panel-publish .publish-view.is-active .publish-accounts {
    animation: macos-pub-enter 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

#panel-publish .publish-view.is-active .publish-toolbar {
    animation: macos-pub-fade 340ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 40ms;
}

#panel-publish .publish-view.is-active .publish-stage {
    animation: macos-pub-fade 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 80ms;
}

#panel-publish .publish-view.is-active .publish-rail {
    animation: macos-pub-fade 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 120ms;
}

#panel-publish .publish-alert:not([hidden]),
#panel-publish .publish-bulk-stats--bar:not([hidden]) {
    animation: macos-pub-fade 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

#panel-publish .publish-page__head .publish-subnav__btn,
#panel-publish .publish-toolbar .publish-platforms--compact .publish-platform,
#panel-publish .publish-toolbar .publish-seg--format .publish-seg__btn,
#panel-publish .publish-compose-mode__card,
#panel-publish .publish-queue .publish-seg__btn {
    transition:
        background 160ms cubic-bezier(0.22, 1, 0.36, 1),
        color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

#panel-publish .publish-account-pill,
#panel-publish .publish-toolbar .publish-account-pill {
    animation: none;
    transition:
        border-color 120ms ease,
        background 120ms ease,
        color 120ms ease,
        box-shadow 120ms ease;
}

#panel-publish .publish-account-pills.is-entering .publish-account-pill {
    animation: macos-pub-pill 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--pill-i, 0) * 18ms);
}

#panel-publish .publish-account-pill:hover {
    transform: none;
}

#panel-publish .publish-account-pill.is-pop {
    animation: macos-pub-pop 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

#panel-publish .publish-media-list__summary,
#panel-publish .publish-media-card {
    animation: macos-pub-fade 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

#panel-publish .publish-media-card {
    animation-delay: calc(var(--card-i, 0) * 36ms);
    transition: background 140ms ease;
}

#panel-publish .publish-media-card__remove {
    transition: background 140ms ease, color 140ms ease;
}

#panel-publish .publish-dropzone--reel,
#panel-publish .publish-composer .publish-compose-zone--media .publish-dropzone--reel {
    transition:
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease,
        transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

#panel-publish .publish-composer .publish-compose-zone--media .publish-dropzone--reel:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--publish-blue) 10%, transparent);
}

#panel-publish .publish-composer .publish-compose-zone--media .publish-dropzone--reel.is-dragover {
    transform: scale(1.012);
    animation: macos-pub-ring 1.2s ease-in-out infinite;
}

#panel-publish .publish-dropzone__icon {
    animation: macos-pub-breathe 2.8s ease-in-out infinite;
    transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), background 160ms ease, color 160ms ease;
}

#panel-publish .publish-composer .publish-compose-zone--media .publish-dropzone--reel:hover .publish-dropzone__icon,
#panel-publish .publish-composer .publish-compose-zone--media .publish-dropzone--reel.is-dragover .publish-dropzone__icon {
    animation: none;
    transform: translateY(-2px) scale(1.06);
}

#panel-publish .publish-dropzone--reel.is-filled .publish-dropzone__icon {
    animation: none;
    background: rgb(0 0 0 / 48%);
    color: #fff;
    box-shadow: none;
}

#panel-publish .publish-dropzone__icon {
    color: var(--publish-blue);
}

#panel-publish .publish-dropzone__icon svg {
    color: inherit;
    stroke: currentColor;
}

#panel-publish .publish-compose-options__body {
    animation: macos-pub-fade 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

#panel-publish .publish-compose-options:not([open]) .publish-compose-options__body {
    animation: none;
}

#panel-publish .publish-compose-options__summary::after {
    transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

#panel-publish .publish-rail-card:not(.publish-rail-card--preview),
#panel-publish .publish-post-preview__card {
    transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease;
}

#panel-publish .publish-rail-card:not(.publish-rail-card--preview):hover {
    transform: translateY(-1px);
}

#panel-publish .publish-rail-card--preview:hover .publish-post-preview__card {
    transform: translateY(-2px);
}

#panel-publish .publish-rail__submit .btn--lg {
    position: relative;
    overflow: hidden;
    transition:
        transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 180ms ease,
        filter 160ms ease,
        background 160ms ease;
}

#panel-publish .publish-rail__submit .btn--lg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 28%,
        color-mix(in srgb, #fff 20%, transparent) 48%,
        transparent 64%
    );
    transform: translateX(-120%);
    transition: transform 520ms ease;
    pointer-events: none;
}

#panel-publish .publish-rail__submit .btn--lg:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--publish-blue) 28%, transparent);
}

#panel-publish .publish-rail__submit .btn--lg:hover::after {
    transform: translateX(120%);
}

#panel-publish .publish-rail__submit .btn--lg:active {
    transform: translateY(0) scale(0.985);
}

#panel-publish .publish-queue .publish-post {
    animation: macos-pub-fade 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--post-i, 0) * 32ms);
    transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 160ms ease;
}

#panel-publish .publish-queue .publish-post:hover {
    transform: translateY(-1px);
}

#panel-publish .publish-page__actions .btn {
    transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 160ms ease, background 160ms ease;
}

#panel-publish .publish-page__actions .btn:hover {
    transform: translateY(-0.5px);
}

#panel-publish .publish-page__actions .btn:active {
    transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
    #panel-publish .publish-page__head,
    #panel-publish .publish-view.is-active .publish-composer,
    #panel-publish .publish-view.is-active .publish-queue,
    #panel-publish .publish-view.is-active .publish-accounts,
    #panel-publish .publish-view.is-active .publish-toolbar,
    #panel-publish .publish-view.is-active .publish-stage,
    #panel-publish .publish-view.is-active .publish-rail,
    #panel-publish .publish-alert:not([hidden]),
    #panel-publish .publish-bulk-stats--bar:not([hidden]),
    #panel-publish .publish-account-pill,
    #panel-publish .publish-toolbar .publish-account-pill,
    #panel-publish .publish-page__head .publish-subnav__btn.is-active,
    #panel-publish .publish-toolbar .publish-platforms--compact .publish-platform:has(input:checked),
    #panel-publish .publish-toolbar .publish-seg--format .publish-seg__btn.is-active,
    #panel-publish .publish-compose-mode__card.is-active,
    #panel-publish .publish-queue .publish-seg__btn.is-active,
    #panel-publish .publish-media-list__summary,
    #panel-publish .publish-media-card,
    #panel-publish .publish-dropzone__icon,
    #panel-publish .publish-compose-options__body,
    #panel-publish .publish-queue .publish-post,
    #panel-publish .publish-composer .publish-compose-zone--media .publish-dropzone--reel.is-dragover {
        animation: none !important;
    }

    #panel-publish .publish-account-pill,
    #panel-publish .publish-media-card,
    #panel-publish .publish-dropzone--reel,
    #panel-publish .publish-rail-card:not(.publish-rail-card--preview),
    #panel-publish .publish-post-preview__card,
    #panel-publish .publish-rail__submit .btn--lg,
    #panel-publish .publish-queue .publish-post,
    #panel-publish .publish-page__actions .btn,
    #panel-publish .publish-page__head .publish-subnav__btn,
    #panel-publish .publish-toolbar .publish-platforms--compact .publish-platform,
    #panel-publish .publish-toolbar .publish-seg--format .publish-seg__btn,
    #panel-publish .publish-compose-mode__card {
        transition: none !important;
        transform: none !important;
    }

    #panel-publish .publish-rail__submit .btn--lg::after {
        display: none;
    }
}

@media (max-width: 760px) {
    #panel-publish .publish-toolbar__cluster,
    #panel-publish .publish-compose-mode--bar {
        width: 100%;
        padding: 0;
        border-left: 0;
    }

    #panel-publish .publish-toolbar__cluster + .publish-toolbar__cluster,
    #panel-publish .publish-toolbar__cluster + .publish-compose-mode--bar:not([hidden]),
    #panel-publish .publish-compose-mode--bar:not([hidden]) + .publish-toolbar__cluster {
        padding-left: 0;
        padding-top: 10px;
        border-left: 0;
        border-top: 1px solid var(--publish-border);
    }

    #panel-publish .publish-page__head .publish-subnav,
    #panel-publish .publish-page__head .fm-tabs.publish-subnav {
        width: 100%;
    }

    #panel-publish .publish-stage__media-meta {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
    }

    #panel-publish .publish-media-panel__toolbar {
        width: 100%;
        grid-auto-columns: 1fr;
    }
}

/*
 * A aba Analytics foi reescrita com o namespace .anx-* e define a própria
 * superfície em pages/analytics.css. As regras .an-* que existiam aqui
 * sobrescreviam o CSS da página (este arquivo carrega depois) e não têm mais
 * alvo.
 */

/* ===== core/shell-premium.css ===== */
/* FlacosMedia premium shell — authoritative sidebar, topbar and mobile navigation layer */
:root,
[data-theme="dark"],
[data-theme="light"] {
    --sidebar-w: 244px;
    --sidebar-w-collapsed: 52px;
    --topbar-h: 52px;
    --shell-control: 32px;
    --shell-line: color-mix(in srgb, var(--line) 82%, transparent);
    --shell-glass: color-mix(in srgb, var(--elevated) 88%, transparent);
    --shell-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Global sidebar — compact, same density as productivity */
.sidebar {
    --sidebar-pad: 12px;
    --sidebar-inset: 10px;
    --sidebar-rail: 22px;
    --sidebar-gap: 10px;
    --sidebar-control: 28px;
    --sidebar-item-h: 36px;
    --sidebar-section-gap: 16px;
    width: var(--sidebar-w);
    border-right: 1px solid var(--shell-line);
    background: var(--elevated);
    transition: width 200ms var(--shell-ease), transform 200ms var(--shell-ease);
}

.sidebar__header {
    height: var(--topbar-h);
    min-height: var(--topbar-h);
    padding: 0 var(--sidebar-pad);
    border-bottom: 1px solid var(--shell-line);
}

.sidebar__brand .brand {
    gap: 9px;
    height: 32px;
    padding-left: 2px;
}

.sidebar__brand .brand-mark {
    width: 28px;
    height: 28px;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    box-shadow: none;
    color: var(--accent);
}

.sidebar__brand .brand-mark svg,
.sidebar__brand .brand-mark__logo { width: 16px; height: 16px; }
.sidebar__brand .brand-text { gap: 0; }
.sidebar__brand .brand-text strong { font-size: 14px; font-weight: 650; letter-spacing: -.02em; }
.sidebar__brand .brand-text span { display: none; }

.sidebar__collapse,
.sidebar__close {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 7px;
}
.sidebar__collapse:hover,
.sidebar__close:hover {
    border-color: transparent;
    background: var(--hover);
}

.sidebar__body {
    padding: 12px var(--sidebar-pad) 12px;
    mask-image: none;
}

.sidebar__nav { gap: var(--sidebar-section-gap); }
.sidebar__section { gap: 4px; }
.sidebar__section + .sidebar__section { position: relative; padding-top: 12px; }
.sidebar__section + .sidebar__section::before {
    position: absolute;
    top: 5px;
    right: var(--sidebar-inset);
    left: var(--sidebar-inset);
    height: 1px;
    background: color-mix(in srgb, var(--line) 88%, transparent);
    content: "";
}
.sidebar__section-title {
    margin: 0;
    padding: 2px var(--sidebar-inset) 6px;
    color: var(--secondary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}
.sidebar__menu { gap: 2px; }

.sidebar__link {
    min-height: var(--sidebar-item-h);
    gap: var(--sidebar-gap);
    padding: 0 var(--sidebar-inset);
    border: 0;
    border-radius: 10px;
    color: var(--text);
    font-size: 13.5px;
    font-weight: 550;
    letter-spacing: -0.015em;
    transition: background 120ms ease, color 120ms ease;
}
.sidebar__link::before { display: none; }
.sidebar__link-icon {
    width: var(--sidebar-rail);
    height: var(--sidebar-rail);
    border-radius: 0;
    background: transparent;
    color: var(--secondary);
    opacity: 1;
    transform: none;
    transition: color 120ms ease;
}
.sidebar__link-icon svg { width: 18px; height: 18px; stroke-width: 1.85; }
.sidebar__link:hover {
    border-color: transparent;
    background: var(--hover);
    color: var(--text);
    transform: none;
}
.sidebar__link:hover .sidebar__link-icon {
    background: transparent;
    color: var(--text);
    transform: none;
}
.sidebar__link:focus-visible { outline-offset: -2px; }

#tab-productivity:checked ~ .sidebar .sidebar__link[for="tab-productivity"],
#tab-reels:checked ~ .sidebar .sidebar__link[for="tab-reels"],
#tab-accounts:checked ~ .sidebar .sidebar__link[for="tab-accounts"],
#tab-publish:checked ~ .sidebar .sidebar__link[for="tab-publish"],
#tab-analytics:checked ~ .sidebar .sidebar__link[for="tab-analytics"],
#tab-downloader:checked ~ .sidebar .sidebar__link[for="tab-downloader"],
#tab-studio:checked ~ .sidebar .sidebar__link[for="tab-studio"],
#tab-team:checked ~ .sidebar .sidebar__link[for="tab-team"],
#tab-bot:checked ~ .sidebar .sidebar__link[for="tab-bot"],
#tab-pixel:checked ~ .sidebar .sidebar__link[for="tab-pixel"] {
    background: color-mix(in srgb, var(--accent) 16%, var(--surface));
    color: var(--accent);
    font-weight: 650;
    transform: none;
}
#tab-productivity:checked ~ .sidebar .sidebar__link[for="tab-productivity"]::before,
#tab-reels:checked ~ .sidebar .sidebar__link[for="tab-reels"]::before,
#tab-accounts:checked ~ .sidebar .sidebar__link[for="tab-accounts"]::before,
#tab-publish:checked ~ .sidebar .sidebar__link[for="tab-publish"]::before,
#tab-analytics:checked ~ .sidebar .sidebar__link[for="tab-analytics"]::before,
#tab-downloader:checked ~ .sidebar .sidebar__link[for="tab-downloader"]::before,
#tab-studio:checked ~ .sidebar .sidebar__link[for="tab-studio"]::before,
#tab-team:checked ~ .sidebar .sidebar__link[for="tab-team"]::before,
#tab-bot:checked ~ .sidebar .sidebar__link[for="tab-bot"]::before,
#tab-pixel:checked ~ .sidebar .sidebar__link[for="tab-pixel"]::before { display: none; }
#tab-productivity:checked ~ .sidebar .sidebar__link[for="tab-productivity"] .sidebar__link-icon,
#tab-reels:checked ~ .sidebar .sidebar__link[for="tab-reels"] .sidebar__link-icon,
#tab-accounts:checked ~ .sidebar .sidebar__link[for="tab-accounts"] .sidebar__link-icon,
#tab-publish:checked ~ .sidebar .sidebar__link[for="tab-publish"] .sidebar__link-icon,
#tab-analytics:checked ~ .sidebar .sidebar__link[for="tab-analytics"] .sidebar__link-icon,
#tab-downloader:checked ~ .sidebar .sidebar__link[for="tab-downloader"] .sidebar__link-icon,
#tab-studio:checked ~ .sidebar .sidebar__link[for="tab-studio"] .sidebar__link-icon,
#tab-team:checked ~ .sidebar .sidebar__link[for="tab-team"] .sidebar__link-icon,
#tab-bot:checked ~ .sidebar .sidebar__link[for="tab-bot"] .sidebar__link-icon,
#tab-pixel:checked ~ .sidebar .sidebar__link[for="tab-pixel"] .sidebar__link-icon {
    background: transparent;
    color: var(--accent);
}

.sidebar__badge {
    min-width: 18px;
    padding: 2px 6px;
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: none;
}

.sidebar__footer { padding: 8px var(--sidebar-pad) 10px; border-top: 1px solid var(--shell-line); }
.sidebar__profile {
    min-height: 36px;
    gap: 8px;
    padding: 4px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
}
.sidebar__profile:hover { border-color: transparent; background: var(--hover); }
.sidebar__avatar {
    width: 26px;
    height: 26px;
    background: color-mix(in srgb, var(--accent) 16%, var(--soft));
    color: var(--text);
    font-size: 11px;
    box-shadow: none;
}
.sidebar__user-name { font-size: 13px; font-weight: 650; }
.sidebar__user-role { font-size: 11.5px; letter-spacing: 0; text-transform: none; color: var(--secondary); }
.sidebar__quick-actions { gap: 2px; }
.sidebar__icon-btn { width: 26px; height: 26px; border-radius: 7px; }

/* Collapsed sidebar */
@media (min-width: 769px) {
    .sidebar__collapse { display: inline-flex; }
    html[data-sidebar-collapsed="true"] .sidebar { width: var(--sidebar-w-collapsed); }
    html[data-sidebar-collapsed="true"] .sidebar__header {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0;
        height: var(--topbar-h);
        min-height: var(--topbar-h);
        padding: 0;
    }
    html[data-sidebar-collapsed="true"] .sidebar__brand {
        display: flex;
        flex: none;
        align-items: center;
        justify-content: center;
        width: 100%;
        cursor: pointer;
    }
    html[data-sidebar-collapsed="true"] .sidebar__brand .brand {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        padding: 0;
        margin: 0;
        gap: 0;
    }
    html[data-sidebar-collapsed="true"] .sidebar__brand .brand-mark {
        width: 28px;
        height: 28px;
        border-radius: 8px;
    }
    html[data-sidebar-collapsed="true"] .sidebar__brand .brand-text,
    html[data-sidebar-collapsed="true"] .sidebar__section-title,
    html[data-sidebar-collapsed="true"] .sidebar__link-label,
    html[data-sidebar-collapsed="true"] .sidebar__user-meta,
    html[data-sidebar-collapsed="true"] .sidebar__quick-actions,
    html[data-sidebar-collapsed="true"] .sidebar__badge,
    html[data-sidebar-collapsed="true"] .sidebar__toolbar { display: none; }
    html[data-sidebar-collapsed="true"] .sidebar__body {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 6px 0 8px;
    }
    html[data-sidebar-collapsed="true"] .sidebar__nav {
        align-items: center;
        gap: 6px;
        width: 100%;
    }
    html[data-sidebar-collapsed="true"] .sidebar__section {
        align-items: center;
        gap: 2px;
        width: 100%;
    }
    html[data-sidebar-collapsed="true"] .sidebar__section + .sidebar__section { padding-top: 6px; }
    html[data-sidebar-collapsed="true"] .sidebar__section + .sidebar__section::before {
        top: 2px;
        right: 16px;
        left: 16px;
    }
    html[data-sidebar-collapsed="true"] .sidebar__menu {
        align-items: center;
        width: 100%;
    }
    html[data-sidebar-collapsed="true"] .sidebar__link {
        justify-content: center;
        width: 32px !important;
        min-height: 32px !important;
        height: 32px;
        padding: 0 !important;
        margin-inline: auto;
    }
    html[data-sidebar-collapsed="true"] .sidebar__link-icon {
        width: 20px !important;
        height: 20px !important;
        background: transparent !important;
    }
    html[data-sidebar-collapsed="true"] .sidebar__footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 8px 0 10px;
    }
    html[data-sidebar-collapsed="true"] .sidebar__profile {
        justify-content: center;
        width: 32px;
        min-height: 32px;
        padding: 0;
        margin-inline: auto;
        background: transparent;
        border: 0;
    }
    html[data-sidebar-collapsed="true"] .sidebar__avatar {
        width: 26px;
        height: 26px;
    }
}

/* Global topbar */
.topbar {
    --shell-control: 36px;
    height: var(--topbar-h);
    min-height: var(--topbar-h);
    padding: 0 clamp(18px, 2.2vw, 30px);
    border-bottom: 1px solid var(--shell-line);
    background: color-mix(in srgb, var(--bg) 84%, transparent);
    box-shadow: 0 1px 0 color-mix(in srgb, white 2%, transparent);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.topbar__lead { gap: 10px; }
.topbar__nav { gap: 7px; }
.topbar__nav-label { color: var(--muted); font-size: 11.5px; font-weight: 550; letter-spacing: 0; text-transform: none; }
.topbar__nav-separator { color: color-mix(in srgb, var(--muted) 65%, transparent); }
.topbar__nav-page {
    height: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 12px;
    font-weight: 700;
}
.topbar__page { animation: topbar-crumb-in 180ms var(--shell-ease); }
.topbar__actions { gap: 9px; }

.topbar__command {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 146px;
    height: var(--shell-control);
    padding: 0 7px 0 11px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    box-shadow: var(--shadow);
    color: var(--muted);
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease, transform 140ms ease;
}
.topbar__command > span { flex: 1; text-align: left; font-size: 11.5px; }
.topbar__command kbd,
.shell-switcher kbd {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-width: 22px;
    min-height: 22px;
    padding: 0 6px;
    border: 1px solid var(--line);
    border-bottom-color: var(--line-strong);
    border-radius: 6px;
    background: var(--soft);
    color: var(--muted);
    font: 10px/1 var(--mono);
}
.topbar__command:hover { border-color: var(--line-strong); background: var(--surface); color: var(--text); transform: translateY(-1px); }
.topbar__queue {
    height: var(--shell-control);
    padding: 0 10px;
    border-radius: 10px;
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 5%, transparent);
}
.topbar__cluster {
    height: 42px;
    padding: 3px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 76%, transparent);
}
.topbar__tool,
.topbar__icon { border-radius: 9px; }
.topbar__user { border-radius: 9px; }
.topbar__avatar { border-radius: 8px; }
.topbar__user-role.is-admin { padding-inline: 5px; }

/* Quick switcher */
.shell-switcher {
    width: min(92vw, 560px);
    max-height: min(78vh, 620px);
    margin: max(10vh, 72px) auto auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    background: var(--elevated);
    color: var(--text);
    box-shadow: 0 28px 80px rgba(0, 0, 0, .28), inset 0 1px 0 color-mix(in srgb, white 7%, transparent);
}
.shell-switcher::backdrop { background: rgba(4, 6, 12, .52); backdrop-filter: blur(6px); }
.shell-switcher__panel { display: flex; flex-direction: column; min-height: 0; }
.shell-switcher__header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 11px;
    min-height: 62px;
    padding: 0 16px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
}
.shell-switcher__header input {
    width: 100%;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text);
    font-size: 16px;
    font-weight: 520;
}
.shell-switcher__header input::placeholder { color: var(--muted); }
.shell-switcher__meta,
.shell-switcher__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
    padding: 0 14px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.shell-switcher__meta { background: color-mix(in srgb, var(--soft) 52%, transparent); }
.shell-switcher__results { max-height: 390px; overflow-y: auto; padding: 7px; }
.shell-switcher__item {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 5px 9px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--secondary);
    cursor: pointer;
    text-align: left;
}
.shell-switcher__item:hover,
.shell-switcher__item.is-active { border-color: color-mix(in srgb, var(--accent) 16%, var(--line)); background: var(--accent-soft); color: var(--text); }
.shell-switcher__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--surface); color: var(--muted); }
.shell-switcher__item.is-active .shell-switcher__icon { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent); }
.shell-switcher__icon svg { width: 17px; height: 17px; }
.shell-switcher__copy { display: grid; gap: 2px; min-width: 0; }
.shell-switcher__copy strong { overflow: hidden; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.shell-switcher__copy small { color: var(--muted); font-size: 9px; }
.shell-switcher__item > kbd { opacity: 0; }
.shell-switcher__item.is-active > kbd { opacity: 1; }
.shell-switcher__footer { min-height: 38px; border-top: 1px solid var(--line); text-transform: none; }
.shell-switcher__footer span { display: inline-flex; align-items: center; gap: 4px; }
.shell-switcher__footer kbd { min-width: 20px; min-height: 20px; padding: 0 5px; }
.shell-switcher__empty { display: grid; place-items: center; min-height: 160px; color: var(--muted); text-align: center; }
.shell-switcher__empty strong { color: var(--secondary); font-size: 12px; }
.shell-switcher__empty span { font-size: 10px; }

/* Mobile shell */
@media (max-width: 768px) {
    :root,
    [data-theme="dark"],
    [data-theme="light"] { --topbar-h: 58px; }

    .topbar {
        gap: 8px;
        height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
        min-height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
        padding:
            env(safe-area-inset-top, 0px)
            max(12px, env(safe-area-inset-right, 0px))
            0
            max(12px, env(safe-area-inset-left, 0px));
        background: color-mix(in srgb, var(--bg) 90%, transparent);
    }
    .topbar__menu { display: inline-flex; width: 38px; height: 38px; border-radius: 10px; }
    .topbar__brand { display: none; }
    .topbar__nav { display: flex; min-width: 0; }
    .topbar__nav-label, .topbar__nav-separator { display: none; }
    .topbar__nav-page { max-width: min(34vw, 160px); overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
    .topbar__command { width: 38px; min-width: 38px; padding: 0; justify-content: center; }
    .topbar__command > span, .topbar__command kbd { display: none; }
    .topbar__queue { width: 34px; padding: 0; justify-content: center; }
    .topbar__queue-text { display: none; }
    .topbar__queue-count { display: inline; font-size: 10px; }
    .topbar__cluster { height: 40px; }
    .topbar__cluster .theme-toggle {
        display: inline-flex;
        width: 38px;
        height: 38px;
    }
    .topbar__user-info, .topbar__logout { display: none; }
    .topbar__user { width: 32px; padding: 0 3px; }

    .sidebar {
        top: 8px;
        bottom: 8px;
        left: 8px;
        width: min(314px, calc(100vw - 28px));
        height: calc(100dvh - 16px);
        border: 1px solid var(--line-strong);
        border-radius: 18px;
        box-shadow: none;
        transform: translateX(calc(-100% - 18px));
    }
    #sidebar-open:checked ~ .sidebar {
        transform: translateX(0);
        box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
    }
    .sidebar__header { padding-inline: 15px; }
    .sidebar__close { display: inline-flex; }
    .sidebar__body { padding: 14px 15px 18px; mask-image: none; }
    .sidebar__footer { padding: 12px 15px 14px; }
    .sidebar-backdrop { background: rgba(3,5,10,.48); backdrop-filter: blur(5px); }

    .mobile-dock {
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border: 0;
        border-top: 1px solid var(--line-strong);
        border-radius: 0;
        background: var(--elevated);
        box-shadow: 0 -8px 28px rgba(0,0,0,.18);
    }
    .mobile-nav__inner { height: 56px; align-items: center; justify-content: stretch; overflow-x: hidden; padding: 4px 6px; }
    .mobile-nav__link { flex: 1 1 0; align-self: center; height: 48px; min-width: 0; }
    .mobile-nav__pill { height: 48px; min-height: 48px; border-radius: 10px; padding: 4px 2px; gap: 2px; }
    .mobile-nav__icon { width: 22px; height: 22px; }
    .mobile-nav__label { font-size: 10px; line-height: 1; }
    #tab-productivity:checked ~ .mobile-dock .mobile-nav__link[for="tab-productivity"] .mobile-nav__pill,
    #tab-reels:checked ~ .mobile-dock .mobile-nav__link[for="tab-reels"] .mobile-nav__pill,
    #tab-accounts:checked ~ .mobile-dock .mobile-nav__link[for="tab-accounts"] .mobile-nav__pill,
    #tab-publish:checked ~ .mobile-dock .mobile-nav__link[for="tab-publish"] .mobile-nav__pill,
    #tab-analytics:checked ~ .mobile-dock .mobile-nav__link[for="tab-analytics"] .mobile-nav__pill,
    #tab-downloader:checked ~ .mobile-dock .mobile-nav__link[for="tab-downloader"] .mobile-nav__pill,
    #tab-studio:checked ~ .mobile-dock .mobile-nav__link[for="tab-studio"] .mobile-nav__pill,
    #tab-team:checked ~ .mobile-dock .mobile-nav__link[for="tab-team"] .mobile-nav__pill,
    #tab-bot:checked ~ .mobile-dock .mobile-nav__link[for="tab-bot"] .mobile-nav__pill,
    #tab-pixel:checked ~ .mobile-dock .mobile-nav__link[for="tab-pixel"] .mobile-nav__pill {
        background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 15%, var(--surface)), color-mix(in srgb, var(--accent) 7%, var(--surface)));
        color: var(--accent);
    }
    .shell-switcher { margin-top: 12px; width: calc(100vw - 24px); max-height: calc(100dvh - 24px); border-radius: 14px; }
    .shell-switcher__results { max-height: calc(100dvh - 190px); }
}

@media (max-width: 560px) {
    .mobile-nav__inner { gap: 1px; }
    .mobile-nav__pill { padding-inline: 3px; }
    .mobile-nav__label { max-width: 56px; }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .sidebar__link,
    .sidebar__link::before,
    .sidebar__link-icon,
    .topbar__command,
    .topbar__page,
    .mobile-nav__link,
    .mobile-nav__pill,
    .mobile-nav__icon { transition-duration: .01ms !important; animation-duration: .01ms !important; }
    .mobile-nav__pill { transform: none !important; }
}

/* ==========================================================================
   Marca da sidebar: contraste do ícone
   ==========================================================================
   Acidente de camadas. macos.css define o mark com fundo azul sólido e ícone
   branco; este arquivo vem depois e troca o fundo por um gradiente quase
   branco no tema claro — mas não redefinia a cor. Sobrava estrela branca em
   fundo branco: contraste medido de 1,04, contra o mínimo de 3:1 para
   elemento gráfico.

   A cor acompanha o tema porque o gradiente também acompanha: no claro o
   fundo é pálido e pede o azul da marca (4,36); no escuro é azul-marinho e o
   branco rende muito mais (14,14 contra 3,84 do azul).
   ========================================================================== */
.sidebar__brand .brand-mark,
.sidebar__brand .brand-mark svg,
.sidebar__brand .brand-mark__logo { color: var(--accent); }

[data-theme="dark"] .sidebar__brand .brand-mark,
[data-theme="dark"] .sidebar__brand .brand-mark svg,
[data-theme="dark"] .sidebar__brand .brand-mark__logo { color: #fff; }

[data-theme="light"] .sidebar__brand .brand-mark {
    background: #111;
    border-color: var(--line);
    color: #fff;
}
[data-theme="light"] .sidebar__brand .brand-mark svg,
[data-theme="light"] .sidebar__brand .brand-mark__logo { color: #fff; }

/* ===== pages/productivity.css ===== */
/* Productivity workspace — visual/component layer.
   Geometria (alturas, raios, breakpoints, rail) vive só em productivity-align.css.
   Não acrescente outra passada de tamanho aqui. */
#panel-productivity { min-height: calc(100dvh - var(--topbar-h, 52px)); overflow: hidden; contain: layout style; }
@media (max-width: 768px) {
    /* contain:layout quebra position:fixed dos filhos — dock flutuava no meio da tela */
    #panel-productivity {
        contain: none;
        min-height: 0;
        overflow: visible;
    }
    #panel-productivity .pd-workspace {
        min-height: 0;
    }
}
#panel-productivity [hidden] { display: none !important; }
#panel-productivity button, #panel-productivity input, #panel-productivity select, #panel-productivity textarea { font: inherit; }
#panel-productivity button { color: inherit; }
/* Calha horizontal única: header e conteúdo têm de começar na mesma coluna. */
#panel-productivity .pd-workspace { --pd-gutter: clamp(16px, 2.4vw, 44px); --pd-rail: 260px; --pd-detail: 400px; position: relative; display: grid; grid-template-columns: var(--pd-rail) minmax(0, 1fr); min-height: calc(100dvh - var(--topbar-h, 52px)); background: var(--bg); color: var(--text); }
/* Traço no CSS em vez de repetido como atributo em cada <svg>: com 8 ícones
   por tarefa, esses atributos sozinhos pesavam ~110 bytes por ícone no markup.
   Valores idênticos aos que o partial e o icon() emitiam. Elementos internos
   com fill/stroke próprios (ex.: os círculos de 'more') continuam vencendo,
   porque atributo de apresentação no próprio elemento bate valor herdado. */
#panel-productivity .pd-icon { display: block; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#panel-productivity .pd-eyebrow { display: block; margin-bottom: 4px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
#panel-productivity kbd { min-width: 22px; padding: 2px 6px; border: 1px solid var(--line); border-bottom-color: var(--line-strong); border-radius: 5px; background: var(--soft); color: var(--muted); font: 11px/1.3 var(--mono); text-align: center; }
#panel-productivity .pd-icon-btn, #panel-productivity .pd-mini-btn { display: inline-grid; flex: 0 0 auto; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--secondary); cursor: pointer; transition: background var(--duration) ease, color var(--duration) ease, transform var(--duration-fast) ease; }
#panel-productivity .pd-icon-btn { width: 40px; height: 40px; border: 1px solid var(--line); background: var(--surface); }
#panel-productivity .pd-mini-btn { width: 30px; height: 30px; }
#panel-productivity .pd-icon-btn:hover, #panel-productivity .pd-mini-btn:hover { background: var(--hover); color: var(--text); }
#panel-productivity .pd-icon-btn:active, #panel-productivity .pd-primary-btn:active { transform: translateY(1px); }
#panel-productivity :is(button, input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Local navigation */
#panel-productivity .pd-rail { z-index: 5; display: flex; flex-direction: column; min-width: 0; height: calc(100dvh - var(--topbar-h, 52px)); overflow: hidden; border-right: 1px solid var(--line); background: var(--elevated); }
#panel-productivity .pd-rail__top { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 10px; }
#panel-productivity .pd-rail__top h2 { font-size: 17px; letter-spacing: -.01em; }
#panel-productivity .pd-rail__close { display: none; }
#panel-productivity .pd-capture-btn { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 14px 14px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 650; cursor: pointer; }
#panel-productivity .pd-capture-btn span { flex: 1; text-align: left; }
#panel-productivity .pd-capture-btn kbd { border-color: color-mix(in srgb, var(--accent) 20%, var(--line)); background: var(--surface); color: var(--accent); }
#panel-productivity .pd-nav { flex: 1; overflow-y: auto; padding: 0 10px 20px; scrollbar-width: thin; }
#panel-productivity .pd-nav__group { padding: 10px 0; border-top: 1px solid var(--line); }
#panel-productivity .pd-nav__group:first-child { border-top: 0; }
#panel-productivity .pd-nav__label { padding: 0 10px 6px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
#panel-productivity .pd-nav__heading { display: flex; align-items: center; justify-content: space-between; }
#panel-productivity .pd-nav__item { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--secondary); font-size: 13.5px; cursor: pointer; }
#panel-productivity .pd-nav__item > span:first-child { display: flex; align-items: center; gap: 10px; min-width: 0; }
#panel-productivity .pd-nav__item:hover { background: var(--hover); color: var(--text); }
#panel-productivity .pd-nav__item.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
#panel-productivity .pd-nav__count { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
#panel-productivity .pd-projects { padding: 2px 0 0 16px; }
#panel-productivity .pd-project-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--project-color, var(--accent)); }
#panel-productivity .pd-rail__footer { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
#panel-productivity .pd-rail__footer > span { flex: 1; }
#panel-productivity .pd-sync-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
#panel-productivity .pd-sync-dot.is-syncing { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }

/* Header and stage */
#panel-productivity .pd-main { min-width: 0; height: calc(100dvh - var(--topbar-h, 52px)); overflow-y: auto; }
#panel-productivity .pd-header { position: sticky; z-index: 4; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; padding: 12px var(--pd-gutter); border-bottom: 1px solid var(--line); background: var(--bg); }
#panel-productivity .pd-header__title { display: flex; align-items: center; gap: 12px; min-width: 0; }
#panel-productivity .pd-header h1 { font-size: clamp(19px, 2vw, 24px); letter-spacing: -.01em; }
#panel-productivity .pd-header p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
#panel-productivity .pd-menu-btn { display: none; }
#panel-productivity .pd-header__actions { display: flex; align-items: center; gap: 10px; }
#panel-productivity .pd-search { position: relative; display: flex; align-items: center; width: min(30vw, 360px); min-width: 200px; color: var(--muted); }
#panel-productivity .pd-search > .pd-icon { position: absolute; left: 12px; pointer-events: none; }
#panel-productivity .pd-search input { width: 100%; height: 40px; padding: 0 38px 0 38px; border: 1px solid var(--line); border-radius: 9px; outline: 0; background: var(--surface); color: var(--text); font-size: 13.5px; }
#panel-productivity .pd-search input:focus { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 0 0 3px var(--accent-soft); }
#panel-productivity .pd-search kbd { position: absolute; right: 9px; }
#panel-productivity .pd-primary-btn, #panel-productivity .pd-secondary-btn, #panel-productivity .pd-danger-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 9px; font-size: 13.5px; font-weight: 650; cursor: pointer; }
#panel-productivity .pd-primary-btn { border: 1px solid var(--accent); background: var(--accent); color: white; }
#panel-productivity .pd-secondary-btn { border: 1px solid var(--line); background: var(--surface); color: var(--secondary); }
#panel-productivity .pd-danger-btn { border: 1px solid var(--bad); background: var(--bad); color: white; }
#panel-productivity .pd-text-btn { border: 0; background: transparent; color: var(--accent); font-size: 13px; font-weight: 650; cursor: pointer; }
#panel-productivity .pd-filterbar { display: flex; align-items: end; gap: 12px; padding: 12px clamp(20px, 3vw, 44px); border-bottom: 1px solid var(--line); background: var(--elevated); }
#panel-productivity .pd-filterbar label { display: grid; gap: 4px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
#panel-productivity .pd-filterbar :is(input, select) { height: 34px; min-width: 140px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--text); font-size: 12.5px; text-transform: none; }
/* O header ocupa a largura toda de .pd-main. Um stage centrado e limitado a
   1280px deslocava o conteúdo ~210px para dentro num monitor de 1920 — o vão
   contra a lateral. Mesma calha nos dois, as bordas coincidem. */
#panel-productivity .pd-stage { width: 100%; margin: 0; padding: 28px var(--pd-gutter) 88px; }
/* Barra de resumo: anel + identidade à esquerda, números e ação à direita.
   O grid antigo tinha uma coluna central de largura fixa, então a barra de
   progresso boiava sozinha no meio de um vão que crescia com a tela. */
#panel-productivity .pd-summary { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
#panel-productivity .pd-summary__head { display: grid; gap: 1px; min-width: 0; }
#panel-productivity .pd-summary__head strong { font-size: 15px; letter-spacing: -0.01em; }
#panel-productivity .pd-summary__head span { color: var(--muted); font-size: 12.5px; }

/* Os números pertencem à identidade, então ficam junto dela; só a ação é
   ancorada à direita (mesmo padrão do header). Empurrar os chips para a
   direita abria um vão de ~700px no meio do card. */
#panel-productivity .pd-summary__stats { display: flex; flex-wrap: wrap; gap: 6px; }
#panel-productivity .pd-summary__stat { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--soft); color: var(--secondary); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
#panel-productivity .pd-summary__stat b { color: var(--text); font-weight: 600; }
#panel-productivity .pd-summary__stat i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
#panel-productivity .pd-summary__stat[data-tone="done"] { color: var(--ok); }
#panel-productivity .pd-summary__stat[data-tone="overdue"] { background: color-mix(in srgb, #ef4444 14%, transparent); color: #ef4444; }
#panel-productivity .pd-summary__stat[data-tone="overdue"] b { color: inherit; }

#panel-productivity .pd-summary__action { display: inline-flex; flex-shrink: 0; align-items: center; gap: 7px; margin-left: auto; min-height: 32px; padding: 0 13px; border: 1px solid var(--macos-hairline, var(--line)); border-radius: var(--macos-control-radius, 7px); background: var(--elevated); box-shadow: var(--macos-control-shadow); color: var(--text); font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background 120ms ease, border-color 120ms ease; }
#panel-productivity .pd-summary__action:hover { border-color: var(--line-strong); background: var(--hover); }
#panel-productivity .pd-summary__action svg { color: var(--accent); }

/* Anel: a porcentagem ganha um lugar, em vez de ficar implícita numa barra. */
#panel-productivity .pd-ring { position: relative; flex-shrink: 0; width: 44px; height: 44px; }
#panel-productivity .pd-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
#panel-productivity .pd-ring circle { fill: none; stroke-width: 4; }
#panel-productivity .pd-ring__track { stroke: var(--soft); }
/* 2πr, r=16 — o JS só mexe no offset. */
#panel-productivity .pd-ring__fill { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 100.53; stroke-dashoffset: 100.53; transition: stroke-dashoffset 420ms var(--ease); }
#panel-productivity .pd-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Tasks */
#panel-productivity .pd-task-group + .pd-task-group { margin-top: 32px; }
#panel-productivity .pd-task-group__head { display: flex; align-items: center; gap: 10px; min-height: 36px; margin-bottom: 8px; padding: 0 6px; }
#panel-productivity .pd-task-group__head h2 { font-size: 15px; letter-spacing: -.01em; }
#panel-productivity .pd-task-group__head span { color: var(--muted); font-size: 12px; }
#panel-productivity .pd-task-group__head button { margin-left: auto; }
#panel-productivity .pd-task-list { display: grid; gap: 8px; }
/* Rows are uniform and independent: skip layout/paint for off-screen ones and keep
   each row's work from invalidating its neighbours. This is what keeps long lists smooth. */
/* --pd-task-line = altura da linha do título. Checkbox vive na title-row
   (flex align-items:center) para alinhar com o texto, não com o card inteiro. */
#panel-productivity .pd-task { --priority-color: transparent; --pd-task-line: 20px; --pd-check-size: 18px; position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: start; align-content: start; column-gap: 10px; row-gap: 0; min-height: 0; padding: 10px 12px 10px 8px; border: 1px solid var(--line); border-left: 3px solid var(--priority-color); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); contain: layout paint style; }
/* content-visibility: auto foi retirado daqui. As linhas variam de 48 a
   ~110px conforme tags/checklist/projeto, e a estimativa fixa de 68px
   fazia o layout saltar ao rolar: deslocamento acumulado medido em
   0,1017 com a propriedade contra 0 sem ela. O ganho de render que ela
   prometia nunca apareceu na medição. */
#panel-productivity .pd-task:hover { border-color: var(--line-strong); }
#panel-productivity .pd-task.is-selected { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); background: color-mix(in srgb, var(--accent-soft) 35%, var(--surface)); }
#panel-productivity .pd-task.is-completing { opacity: .45; transform: translateX(8px); }
#panel-productivity .pd-task.is-dragging { opacity: .35; }
#panel-productivity .pd-task.is-drop-target { box-shadow: 0 -2px 0 var(--accent); }
#panel-productivity .pd-drag { display: grid; place-items: center; height: var(--pd-task-line); border: 0; background: transparent; color: var(--muted); cursor: grab; opacity: 0; }
#panel-productivity .pd-task:hover .pd-drag, #panel-productivity .pd-drag:focus-visible { opacity: 1; }
#panel-productivity .pd-check { position: relative; flex-shrink: 0; display: grid; place-items: center; width: var(--pd-check-size); height: var(--pd-check-size); margin: 0; padding: 0; border: 1.5px solid var(--line-strong); border-radius: 50%; background: transparent; color: white; cursor: pointer; }
#panel-productivity .pd-check:hover { border-color: var(--accent); background: var(--accent-soft); }
#panel-productivity .pd-task.is-completed .pd-check { border-color: var(--ok); background: var(--ok); }
#panel-productivity .pd-task.is-completed .pd-task__title { color: var(--muted); text-decoration: line-through; }
#panel-productivity .pd-task__body { min-width: 0; cursor: pointer; }
#panel-productivity .pd-task__copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#panel-productivity .pd-task__title-row { display: flex; align-items: center; gap: 10px; min-height: var(--pd-task-line); font-size: 14.5px; line-height: var(--pd-task-line); }
#panel-productivity .pd-task__title { flex: 1; min-width: 0; overflow: hidden; color: var(--text); font-size: 14.5px; font-weight: 570; line-height: var(--pd-task-line); text-overflow: ellipsis; white-space: nowrap; }
#panel-productivity .pd-task__meta { display: flex; align-items: center; gap: 8px; min-height: 18px; margin: 0; padding-left: calc(var(--pd-check-size) + 10px); color: var(--muted); font-size: 12px; line-height: 1; }
#panel-productivity .pd-task__meta:empty { display: none; }
#panel-productivity .pd-task__title-row:has(.pd-item-icon) + .pd-task__meta { padding-left: calc(var(--pd-check-size) + 10px + 1.45em); }
#panel-productivity .pd-task__meta > * { display: inline-flex; align-items: center; gap: 4px; height: 18px; box-sizing: border-box; white-space: nowrap; line-height: 1; }
#panel-productivity .pd-task__meta .is-overdue { color: var(--bad); }
#panel-productivity .pd-tag { padding: 2px 7px; border-radius: 999px; background: var(--soft); color: var(--secondary); }
/* Botões de 32px recuados para centrar na mesma linha do título. */
#panel-productivity .pd-task__actions { display: flex; align-items: center; gap: 3px; margin-top: calc((var(--pd-task-line) - 32px) / 2); opacity: 0; }
#panel-productivity .pd-task:hover .pd-task__actions, #panel-productivity .pd-task:focus-within .pd-task__actions { opacity: 1; }
#panel-productivity .pd-task__actions button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
#panel-productivity .pd-task__actions button:hover { background: var(--hover); color: var(--text); }
#panel-productivity .pd-task__actions button.is-active { color: var(--accent); }
#panel-productivity .pd-priority-1 { --priority-color: var(--bad); } #panel-productivity .pd-priority-2 { --priority-color: var(--warn); } #panel-productivity .pd-priority-3 { --priority-color: var(--chart-6); }
#panel-productivity .pd-add-inline { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 42px; margin-top: 8px; padding: 0 12px; border: 1px dashed transparent; border-radius: 10px; background: transparent; color: var(--muted); font-size: 13px; cursor: pointer; }
#panel-productivity .pd-add-inline:hover { border-color: var(--line); background: var(--surface); color: var(--accent); }
#panel-productivity .pd-bulkbar { position: sticky; z-index: 3; top: 100px; display: flex; align-items: center; gap: 8px; width: max-content; margin: -8px auto 18px; padding: 8px 10px 8px 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--elevated); box-shadow: var(--shadow-lg); font-size: 12px; }
#panel-productivity .pd-bulkbar button { padding: 6px 10px; border: 0; border-radius: 6px; background: var(--soft); cursor: pointer; }

/* Empty/loading */
#panel-productivity .pd-skeleton { display: grid; gap: 8px; }
#panel-productivity .pd-skeleton span { display: block; height: 68px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(100deg, var(--surface) 25%, var(--hover) 45%, var(--surface) 65%); background-size: 220% 100%; animation: pd-shimmer 1.4s linear infinite; }
@keyframes pd-shimmer { to { background-position: -220% 0; } }
#panel-productivity .pd-empty { display: grid; place-items: center; min-height: 360px; padding: 56px; text-align: center; }
#panel-productivity .pd-empty__icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 16px; border-radius: 18px; background: var(--accent-soft); color: var(--accent); }
#panel-productivity .pd-empty h2 { font-size: 18px; }
#panel-productivity .pd-empty p { max-width: 360px; margin: 8px 0 20px; color: var(--muted); font-size: 13px; }

/* Detail panel */
#panel-productivity .pd-workspace.has-detail { grid-template-columns: var(--pd-rail) minmax(0, 1fr) var(--pd-detail); }
#panel-productivity .pd-detail { z-index: 6; height: calc(100dvh - var(--topbar-h, 52px)); overflow-y: auto; border-left: 1px solid var(--line); background: var(--elevated); }
#panel-productivity .pd-detail__head { position: sticky; z-index: 2; top: 0; display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 18px; border-bottom: 1px solid var(--line); background: var(--elevated); color: var(--muted); font-size: 12.5px; font-weight: 650; }
#panel-productivity .pd-detail__head > div { display: flex; gap: 6px; }
#panel-productivity .pd-detail__head .pd-icon-btn { width: 34px; height: 34px; border: 0; background: transparent; }
#panel-productivity .pd-detail-form { display: grid; gap: 20px; padding: 24px; }
#panel-productivity .pd-detail-title { width: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 22px; font-weight: 650; line-height: 1.3; resize: none; }
#panel-productivity .pd-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#panel-productivity .pd-field { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
#panel-productivity .pd-field :is(input, select, textarea) { width: 100%; min-height: 40px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; outline: 0; background: var(--surface); color: var(--text); font-size: 13px; font-weight: 400; letter-spacing: normal; text-transform: none; }
#panel-productivity .pd-field--wide { grid-column: 1 / -1; }
#panel-productivity .pd-notes-tabs { display: flex; gap: 5px; margin-bottom: 8px; }
#panel-productivity .pd-notes-tabs button { padding: 6px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; }
#panel-productivity .pd-notes-tabs button.is-active { background: var(--soft); color: var(--text); }
#panel-productivity .pd-markdown { min-height: 140px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--secondary); font-size: 13px; line-height: 1.65; }
#panel-productivity .pd-markdown :is(h1,h2,h3) { margin: 10px 0 6px; font-size: 15px; } #panel-productivity .pd-markdown p { margin: 5px 0; } #panel-productivity .pd-markdown code { padding: 1px 5px; border-radius: 4px; background: var(--soft); font-family: var(--mono); }
#panel-productivity .pd-backlink { color: var(--accent); font-weight: 600; cursor: pointer; }
#panel-productivity .pd-attachments { display: grid; gap: 8px; }
#panel-productivity .pd-attachment { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 12px; }
#panel-productivity .pd-attachment span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#panel-productivity .pd-detail-actions { display: flex; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
#panel-productivity .pd-detail-actions .pd-danger-btn { margin-left: auto; }

/* Focus, habits, insights */
#panel-productivity .pd-focus-view { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .75fr); gap: 20px; }
#panel-productivity .pd-focus-card, #panel-productivity .pd-focus-side, #panel-productivity .pd-habit-card, #panel-productivity .pd-metric-card, #panel-productivity .pd-insight-panels section { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
#panel-productivity .pd-focus-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
#panel-productivity .pd-focus-card h2 { font-size: 24px; } #panel-productivity .pd-focus-card > p { max-width: 440px; margin: 10px 0; color: var(--muted); font-size: 14px; }
#panel-productivity .pd-timer { margin: 24px 0; font: 700 clamp(58px, 9vw, 94px)/1 var(--mono); letter-spacing: -.08em; font-variant-numeric: tabular-nums; }
#panel-productivity .pd-timer-face {
    position: relative;
    display: grid;
    width: min(260px, 70vw);
    aspect-ratio: 1;
    margin: 12px auto 8px;
}
#panel-productivity .pd-timer-ring {
    grid-area: 1 / 1;
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform: rotate(-90deg);
}
#panel-productivity .pd-timer-ring circle {
    stroke-width: 5.5;
    stroke-linecap: round;
}
#panel-productivity .pd-timer-ring__track { stroke: var(--line); }
#panel-productivity .pd-timer-ring__fill {
    stroke: var(--accent);
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    transition: stroke 180ms ease;
}
#panel-productivity .pd-timer-face.is-break .pd-timer-ring__fill { stroke: var(--ok, #34d399); }
#panel-productivity .pd-timer-face__copy {
    grid-area: 1 / 1;
    place-self: center;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
#panel-productivity .pd-timer-face .pd-timer {
    margin: 0;
    line-height: 1;
}
#panel-productivity .pd-timer-face .pd-timer__phase {
    position: absolute;
    top: 100%;
    left: 50%;
    margin: 8px 0 0;
    transform: translateX(-50%);
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}
#panel-productivity .pd-timer__modes { display: flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--soft); }
#panel-productivity .pd-timer__modes button { padding: 8px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; }
#panel-productivity .pd-timer__modes button.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
#panel-productivity .pd-timer__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; justify-content: center; }
#panel-productivity .pd-timer__tools { display: flex; gap: 8px; width: 100%; justify-content: center; }
#panel-productivity .pd-timer__tool {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 64px;
    min-height: 44px;
    padding: 8px 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}
#panel-productivity .pd-timer__tool:hover { background: var(--hover); color: var(--text); }
#panel-productivity .pd-timer__tool.is-active,
#panel-productivity .pd-timer__tool[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); }
#panel-productivity .pd-timer__tool.is-muted { opacity: .55; }
#panel-productivity .pd-timer__tool-label { font-size: 11px; font-weight: 650; letter-spacing: .02em; }
#panel-productivity .pd-timer__actions .pd-primary-btn.is-pause {
    background: var(--soft);
    color: var(--text);
}
#panel-productivity .pd-focus-side { padding: 22px; } #panel-productivity .pd-focus-side h3 { margin-bottom: 14px; font-size: 15px; }
#panel-productivity .pd-queue-item { padding: 12px; border-bottom: 1px solid var(--line); color: var(--secondary); font-size: 13px; }
#panel-productivity .pd-focus-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
#panel-productivity .pd-focus-stats span { display: grid; padding: 12px; border-radius: 10px; background: var(--soft); color: var(--muted); font-size: 11px; } #panel-productivity .pd-focus-stats strong { color: var(--text); font-size: 18px; }
#panel-productivity .pd-section-head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 22px; } #panel-productivity .pd-section-head h2 { font-size: 24px; }
#panel-productivity .pd-habit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
#panel-productivity .pd-habit-card { padding: 20px; min-height: 140px; }
#panel-productivity .pd-habit-card__head { display: flex; align-items: center; gap: 12px; } #panel-productivity .pd-habit-card__head > div { flex: 1; } #panel-productivity .pd-habit-card h3 { font-size: 16px; } #panel-productivity .pd-habit-card p { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; }
#panel-productivity .pd-habit-check { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); cursor: pointer; } #panel-productivity .pd-habit-check.is-done { border-color: var(--ok); background: var(--ok); color: white; }
#panel-productivity .pd-streak { display: flex; gap: 6px; margin-top: 16px; } #panel-productivity .pd-streak span { flex: 1; height: 8px; border-radius: 4px; background: var(--soft); } #panel-productivity .pd-streak span.is-done { background: var(--ok); }
#panel-productivity .pd-metric-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 14px; }
#panel-productivity .pd-metric-card { padding: 20px; min-height: 110px; } #panel-productivity .pd-metric-card span { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } #panel-productivity .pd-metric-card strong { display: block; margin: 8px 0 4px; font-size: 28px; } #panel-productivity .pd-metric-card small { color: var(--ok); font-size: 11px; }
#panel-productivity .pd-insight-panels { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-top: 14px; } #panel-productivity .pd-insight-panels section { padding: 20px; } #panel-productivity .pd-insight-panels h3 { font-size: 15px; }
#panel-productivity .pd-bars { display: flex; align-items: end; gap: 10px; height: 190px; padding-top: 22px; } #panel-productivity .pd-bar { display: grid; flex: 1; grid-template-rows: 1fr auto; gap: 6px; height: 100%; color: var(--muted); font-size: 10px; text-align: center; } #panel-productivity .pd-bar i { align-self: end; display: block; min-height: 4px; border-radius: 4px 4px 2px 2px; background: var(--accent); }
#panel-productivity .pd-project-time { display: grid; gap: 14px; margin-top: 8px; } #panel-productivity .pd-project-time__row { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 10px; font-size: 13px; } #panel-productivity .pd-project-time__row i { width: 10px; height: 10px; border-radius: 50%; }

/* Modal and feedback */
#panel-productivity .pd-modal { width: min(96vw, 820px); max-height: min(92dvh, 900px); padding: 0; overflow: auto; border: 1px solid var(--line-strong); border-radius: 20px; background: var(--elevated); color: var(--text); box-shadow: 0 28px 80px rgba(0,0,0,.18), var(--shadow-lg); }
#panel-productivity .pd-modal::backdrop { background: color-mix(in srgb, var(--overlay) 92%, #000 8%); }
#panel-productivity .pd-modal form { margin: 0; padding: 32px 36px 28px; }
#panel-productivity .pd-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
#panel-productivity .pd-modal__head h2 { font-size: 26px; line-height: 1.2; letter-spacing: -.02em; }
#panel-productivity .pd-modal__head .pd-eyebrow { margin-bottom: 6px; font-size: 11px; }
#panel-productivity .pd-modal__head .pd-icon-btn { width: 42px; height: 42px; }
#panel-productivity .pd-capture__title {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  margin: 0;
  padding: 10px 0 18px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font-size: 28px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -.02em;
}
#panel-productivity .pd-capture__title:focus {
  border-color: transparent;
  border-bottom-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: none;
}
#panel-productivity .pd-capture__title::placeholder { color: var(--muted); font-weight: 500; }
#panel-productivity .pd-capture textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: 120px;
  margin: 18px 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  outline: 0;
  background: var(--surface);
  box-shadow: none;
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
  resize: vertical;
}
#panel-productivity .pd-capture__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
#panel-productivity .pd-capture__fields label { display: grid; gap: 7px; margin: 0; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
#panel-productivity .pd-capture__fields :is(input,select) {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 46px;
  height: 46px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: none;
  color: var(--text);
  font-size: 14px;
  text-transform: none;
}
#panel-productivity .pd-capture__fields :is(input,select):focus { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 0 0 3px var(--accent-soft); outline: 0; }
#panel-productivity .pd-tag-input { display: flex; align-items: center; gap: 10px; margin-top: 16px; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); box-shadow: none; }
#panel-productivity .pd-tag-input input {
  flex: 1;
  width: auto;
  max-width: none;
  min-height: 0;
  height: 46px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font-size: 14px;
}
#panel-productivity .pd-tag-input input:focus { border: 0; box-shadow: none; }
#panel-productivity .pd-modal__footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
#panel-productivity .pd-modal__footer > span { color: var(--muted); font-size: 13px; line-height: 1.4; }
#panel-productivity .pd-modal__footer > div { display: flex; flex-wrap: wrap; gap: 10px; }
#panel-productivity .pd-modal__footer .pd-primary-btn,
#panel-productivity .pd-modal__footer .pd-secondary-btn,
#panel-productivity .pd-modal__footer .pd-danger-btn { min-height: 44px; padding: 0 18px; font-size: 14px; }
#panel-productivity .pd-confirm { width: min(94vw, 520px); }
#panel-productivity .pd-confirm form { padding: 32px 36px; }
#panel-productivity .pd-confirm h2 { margin: 0 0 10px; font-size: 24px; letter-spacing: -.02em; }
#panel-productivity .pd-confirm p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
#panel-productivity .pd-confirm .pd-modal__footer { margin-top: 24px; }
#panel-productivity .pd-shortcuts { width: min(94vw, 560px); }
#panel-productivity .pd-shortcuts form { padding: 28px 32px 24px; }
#panel-productivity .pd-shortcuts dl { margin: 4px 0 0; }
#panel-productivity .pd-shortcuts dl div { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 10px 0; border-top: 1px solid var(--line); }
#panel-productivity .pd-shortcuts dt { color: var(--secondary); font-size: 15px; }
#panel-productivity .pd-shortcuts dd { margin: 0; display: flex; gap: 6px; }
#panel-productivity .pd-toast-region { position: fixed; z-index: 50; right: 22px; bottom: 22px; display: grid; gap: 8px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
#panel-productivity .pd-toast { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--elevated); box-shadow: var(--shadow-lg); color: var(--secondary); font-size: 13px; animation: pd-toast-in 220ms var(--ease); pointer-events: auto; } #panel-productivity .pd-toast > span { flex: 1; } #panel-productivity .pd-toast button { border: 0; background: transparent; color: var(--accent); font-size: 12px; font-weight: 700; cursor: pointer; }
@keyframes pd-toast-in { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 1180px) {
  #panel-productivity .pd-workspace.has-detail { grid-template-columns: var(--pd-rail) minmax(0,1fr); }
  #panel-productivity .pd-detail { position: absolute; inset: 0 0 0 auto; width: min(var(--pd-detail), 92vw); box-shadow: var(--shadow-lg); }
  #panel-productivity .pd-workspace.has-detail .pd-scrim { position: absolute; z-index: 5; inset: 0; display: block !important; background: var(--overlay); }
}
@media (max-width: 820px) {
  #panel-productivity .pd-workspace { grid-template-columns: 1fr; }
  #panel-productivity .pd-rail { position: absolute; inset: 0 auto 0 0; width: min(280px, 88vw); transform: translateX(-102%); box-shadow: none; transition: transform 220ms var(--ease); }
  #panel-productivity .pd-workspace.is-rail-open .pd-rail { transform: translateX(0); box-shadow: var(--shadow-lg); }
  #panel-productivity .pd-workspace.is-rail-open .pd-scrim { position: absolute; z-index: 4; inset: 0; display: block !important; background: var(--overlay); }
  #panel-productivity .pd-rail__close, #panel-productivity .pd-menu-btn { display: inline-grid; }
  #panel-productivity .pd-header { min-height: 60px; padding: 8px 14px; }
  #panel-productivity .pd-header p { display: none; }
  #panel-productivity .pd-search { width: 190px; min-width: 0; }
  #panel-productivity .pd-stage { padding: 20px 14px 80px; }
  #panel-productivity .pd-focus-view, #panel-productivity .pd-insight-panels { grid-template-columns: 1fr; }
  #panel-productivity .pd-habit-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  #panel-productivity .pd-header__actions > .pd-primary-btn span, #panel-productivity .pd-search kbd { display: none; }
  #panel-productivity .pd-header__actions > .pd-icon-btn { display: inline-grid; width: 34px; height: 34px; }
  #panel-productivity .pd-header__actions > .pd-primary-btn { width: 36px; padding: 0; }
  #panel-productivity .pd-search { width: min(38vw, 170px); }
  #panel-productivity .pd-search input { padding-right: 8px; }
  #panel-productivity .pd-header h1 { font-size: 19px; }
  /* Estreito: anel + identidade na primeira linha, números e ação na segunda. */
  #panel-productivity .pd-summary { flex-wrap: wrap; gap: 12px 14px; }
  #panel-productivity .pd-summary__head { flex: 1 1 auto; }
  #panel-productivity .pd-summary__stats { flex: 1 1 100%; margin-left: 0; }
  #panel-productivity .pd-summary__action { flex: 0 0 auto; margin-left: auto; }
  #panel-productivity .pd-task { grid-template-columns: 0 minmax(0,1fr) auto; padding-left: 8px; } #panel-productivity .pd-drag { overflow: hidden; opacity: 0; }
  #panel-productivity .pd-task__meta .pd-hide-mobile { display: none; } #panel-productivity .pd-task__actions { opacity: 1; } #panel-productivity .pd-task__actions button:not(:last-child) { display: none; }
  #panel-productivity .pd-filterbar { overflow-x: auto; align-items: end; }
  #panel-productivity .pd-modal form { padding: 24px 20px 20px; }
  #panel-productivity .pd-capture__title { font-size: 22px; }
  #panel-productivity .pd-capture__fields { grid-template-columns: 1fr 1fr; }
  #panel-productivity .pd-container-fields { grid-template-columns: 1fr; }
  #panel-productivity .pd-modal__footer > span { display: none; }
  #panel-productivity .pd-modal__footer { justify-content: flex-end; }
  #panel-productivity .pd-metric-grid { grid-template-columns: 1fr 1fr; }
  #panel-productivity .pd-timer { font-size: 58px; }
  #panel-productivity .pd-focus-card { min-height: 410px; padding: 25px 12px; }
}
#panel-productivity .pd-today-game { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0; margin-bottom: 14px; overflow: hidden; border: 1px solid color-mix(in srgb,var(--accent) 24%,var(--line)); border-radius: 13px; background: linear-gradient(100deg,color-mix(in srgb,var(--accent-soft) 54%,var(--surface)),var(--surface)); }
#panel-productivity .pd-today-game > button { display: grid; grid-template-columns: 42px auto minmax(120px,1fr) auto; align-items: center; gap: 12px; min-height: 72px; padding: 12px 16px; border: 0; background: transparent; cursor: pointer; text-align: left; }
#panel-productivity .pd-today-level { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--accent); color: white; font-size: 15px; font-weight: 800; }
#panel-productivity .pd-today-game > button > span:nth-child(2) { display: grid; }
#panel-productivity .pd-today-game small { color: var(--muted); font-size: 11px; }
#panel-productivity .pd-today-game strong { font-size: 14px; }
#panel-productivity .pd-today-game i { height: 7px; overflow: hidden; border-radius: 999px; background: var(--soft); }
#panel-productivity .pd-today-game i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--accent),var(--chart-3)); }
#panel-productivity .pd-today-streak { display: grid; place-items: center; min-width: 44px; color: var(--warn); }
#panel-productivity .pd-today-quests { display: flex; align-items: center; gap: 10px; height: 100%; padding: 0 16px; border-left: 1px solid var(--line); color: var(--muted); font-size: 12px; }
#panel-productivity .pd-today-quests button { border: 0; background: transparent; color: var(--accent); font-size: 12px; font-weight: 700; cursor: pointer; }
#panel-productivity .pd-suggestions { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
#panel-productivity .pd-suggestions > div, #panel-productivity .pd-suggestions > button { min-height: 96px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-align: left; }
#panel-productivity .pd-suggestions > div { border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); background: color-mix(in srgb, var(--accent-soft) 52%, var(--surface)); }
#panel-productivity .pd-suggestions h2 { font-size: 16px; }
#panel-productivity .pd-suggestions > button { display: grid; align-content: center; cursor: pointer; }
#panel-productivity .pd-suggestions > button:hover { border-color: var(--accent); transform: translateY(-1px); }
#panel-productivity .pd-suggestions strong { overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
#panel-productivity .pd-suggestions span { color: var(--muted); font-size: 12px; text-transform: capitalize; }
#panel-productivity .pd-ritual-card { display: grid; gap: 14px; margin-bottom: 28px; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 45%, var(--surface)), var(--surface)); box-shadow: var(--shadow); }
#panel-productivity .pd-ritual-card h2 { font-size: 20px; }
#panel-productivity .pd-ritual-card :is(input, textarea) { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--elevated); color: var(--text); font-size: 14px; resize: vertical; }
#panel-productivity .pd-ritual-card .pd-primary-btn { justify-self: end; }
#panel-productivity .pd-review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#panel-productivity .pd-resource-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; margin-bottom: 28px; }
#panel-productivity .pd-resource-card { display: grid; align-content: start; min-height: 200px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); text-align: left; }
#panel-productivity button.pd-resource-card { cursor: pointer; }
#panel-productivity .pd-resource-card h3 { margin: 6px 0 10px; font-size: 17px; line-height: 1.3; }
#panel-productivity .pd-resource-card p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
#panel-productivity .pd-resource-card small { margin-top: auto; padding-top: 14px; color: var(--accent); font-size: 12px; }
#panel-productivity .pd-resource-card--new { place-items: center; align-content: center; gap: 8px; border-style: dashed; color: var(--muted); }
#panel-productivity .pd-resource-card--new:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 760px) { #panel-productivity .pd-suggestions { grid-template-columns: 1fr; } #panel-productivity .pd-suggestions > button:nth-of-type(n+3) { display: none; } #panel-productivity .pd-resource-grid { grid-template-columns: 1fr; } #panel-productivity .pd-review-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { #panel-productivity .pd-resource-grid { grid-template-columns: 1fr; } }
/* PARA entities and ethical gameful progression */
#panel-productivity .pd-player-card { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 11px; margin: 0 12px 12px; padding: 12px; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface)); cursor: pointer; text-align: left; }
#panel-productivity .pd-player-card:hover, #panel-productivity .pd-player-card.is-active { border-color: color-mix(in srgb, var(--accent) 48%, var(--line)); background: color-mix(in srgb, var(--accent-soft) 56%, var(--surface)); }
#panel-productivity .pd-player-card__level { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent); box-shadow: 0 7px 18px color-mix(in srgb, var(--accent) 24%, transparent); color: white; font-size: 16px; font-weight: 800; }
#panel-productivity .pd-player-card__copy { display: grid; gap: 4px; min-width: 0; }
#panel-productivity .pd-player-card__copy strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
#panel-productivity .pd-player-card__copy > span { height: 5px; overflow: hidden; border-radius: 999px; background: var(--soft); }
#panel-productivity .pd-player-card__copy i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--chart-3)); transition: width 500ms var(--ease); }
#panel-productivity .pd-player-card__copy small { color: var(--muted); font-size: 11px; }
#panel-productivity .pd-player-card__streak { display: grid; place-items: center; min-width: 42px; color: var(--warn); }
#panel-productivity .pd-player-card__streak b { font-size: 17px; }
#panel-productivity .pd-player-card__streak small { color: var(--muted); font-size: 9px; text-transform: uppercase; }

#panel-productivity .pd-para-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; padding: 2px 2px 14px; border-bottom: 1px solid var(--line); }
#panel-productivity .pd-para-hero h2 { font-size: 20px; line-height: 1.2; letter-spacing: -.02em; }
#panel-productivity .pd-para-hero p { max-width: 680px; margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
#panel-productivity .pd-container-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 18px; }
#panel-productivity .pd-container-card { position: relative; display: grid; grid-template-rows: auto auto minmax(64px,1fr) auto auto auto; min-height: 300px; padding: 22px 22px 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
#panel-productivity .pd-container-card::before { position: absolute; inset: 0 0 auto; height: 4px; background: var(--container-color); content: ""; }
#panel-productivity .pd-container-card:hover { border-color: var(--line-strong); }
#panel-productivity .pd-container-card.is-complete { background: color-mix(in srgb, var(--ok-bg) 34%, var(--surface)); }
#panel-productivity .pd-container-card__top { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
#panel-productivity .pd-container-card__top i { width: 9px; height: 9px; border-radius: 50%; background: var(--container-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--container-color) 15%, transparent); }
#panel-productivity .pd-container-card__top button { margin-left: auto; padding: 6px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; }
#panel-productivity .pd-container-card__top button:hover { background: var(--soft); color: var(--text); }
#panel-productivity .pd-container-card h3 { margin-top: 14px; font-size: 20px; line-height: 1.25; letter-spacing: -.02em; }
#panel-productivity .pd-container-card > p { display: -webkit-box; overflow: hidden; margin: 10px 0 18px; color: var(--muted); font-size: 13px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
#panel-productivity .pd-container-card__meta { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--muted); font-size: 11px; }
#panel-productivity .pd-container-card__meta span { display: inline-flex; align-items: center; gap: 4px; }
#panel-productivity .pd-container-progress { height: 7px; margin: 18px 0 12px; overflow: hidden; border-radius: 999px; background: var(--soft); }
#panel-productivity .pd-container-progress span { display: block; height: 100%; border-radius: inherit; background: var(--container-color); }
#panel-productivity .pd-container-card footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#panel-productivity .pd-container-card footer > strong { font-size: 13px; }
#panel-productivity .pd-container-card footer > div { display: flex; gap: 6px; }
#panel-productivity .pd-container-card footer button { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 6px 10px; border: 0; border-radius: 8px; background: var(--soft); color: var(--secondary); font-size: 11px; font-weight: 600; cursor: pointer; }
#panel-productivity .pd-container-card footer button:hover { background: var(--accent-soft); color: var(--accent); }
#panel-productivity .pd-container-card footer button[data-container-action="delete"] { color: var(--bad); }
#panel-productivity .pd-container-card footer button[data-container-action="delete"]:hover { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
#panel-productivity .pd-bulkbar button[data-pd-bulk-delete] { color: var(--bad); }
#panel-productivity .pd-para-empty { display: grid; grid-column: 1/-1; place-items: center; min-height: 440px; padding: 60px; text-align: center; }
#panel-productivity .pd-para-empty > div { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 16px; border-radius: 20px; background: var(--accent-soft); color: var(--accent); }
#panel-productivity .pd-para-empty h3 { font-size: 20px; }
#panel-productivity .pd-para-empty p { max-width: 480px; margin: 8px 0 20px; color: var(--muted); font-size: 14px; }
#panel-productivity .pd-container-modal { width: min(96vw, 760px); }
#panel-productivity .pd-container-modal form { display: grid; gap: 18px; }
#panel-productivity .pd-container-modal .pd-field span { font-size: 11px; }
#panel-productivity .pd-container-modal .pd-field :is(input, select, textarea) { min-height: 46px; padding: 11px 13px; border-radius: 10px; font-size: 14px; }
#panel-productivity .pd-container-modal .pd-field textarea { min-height: 120px; line-height: 1.55; }
#panel-productivity .pd-container-modal input[type=color] { padding: 6px; height: 46px; }
#panel-productivity .pd-container-fields { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

/* Life Dashboard — one flat surface level, hairline separation, colour reserved for state. */
#panel-productivity .pd-game-view { display: grid; gap: 14px; }
#panel-productivity .pd-game-hero { position: relative; display: grid; grid-template-columns: auto minmax(280px,1fr) auto; align-items: center; gap: 28px; padding: 30px 32px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
#panel-productivity .pd-game-avatar { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 20px; background: var(--accent); color: white; }
#panel-productivity .pd-game-avatar span { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
#panel-productivity .pd-player-card__level.is-wide,
#panel-productivity .pd-game-avatar span.is-wide { font-size: 13px; letter-spacing: -.04em; }
#panel-productivity .pd-player-card__level.is-huge,
#panel-productivity .pd-game-avatar span.is-huge { font-size: 10px; letter-spacing: -.06em; }
#panel-productivity .pd-game-next { margin: 4px 0 12px; color: var(--muted); font-size: 13px; }
#panel-productivity .pd-rank-road {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#panel-productivity .pd-rank-road li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 92px;
  padding: 12px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
  text-align: center;
}
#panel-productivity .pd-rank-road li.is-current { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
#panel-productivity .pd-rank-road b { display: block; font-size: 18px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
#panel-productivity .pd-rank-road span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.6em;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  text-wrap: balance;
}
#panel-productivity .pd-game-identity h2 { font-size: 24px; font-weight: 620; letter-spacing: -.025em; }
#panel-productivity .pd-game-identity > p { margin: 5px 0 12px; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
#panel-productivity .pd-game-xp { display: grid; grid-template-columns: minmax(140px,320px) auto; align-items: center; gap: 12px; }
#panel-productivity .pd-game-xp > span { height: 5px; overflow: hidden; border-radius: 999px; background: var(--soft); }
#panel-productivity .pd-game-xp i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent); transition: width 500ms var(--ease); }
#panel-productivity .pd-game-xp small { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
/* Vitals read as a stat row, not four nested cards. */
#panel-productivity .pd-game-vitals { display: grid; grid-template-columns: repeat(4, minmax(64px, auto)); gap: 28px; }
#panel-productivity .pd-game-vitals > div { display: grid; gap: 3px; justify-items: end; text-align: right; }
#panel-productivity .pd-game-vitals strong { font-size: 24px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
#panel-productivity .pd-game-vitals span { color: var(--muted); font-size: 10px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
#panel-productivity .pd-game-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
#panel-productivity .pd-game-panel { padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
#panel-productivity .pd-game-panel--wide { margin-top: 0; }
#panel-productivity .pd-game-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
#panel-productivity .pd-game-panel__head p { margin: 2px 0 0; color: var(--muted); font-size: 12px; font-weight: 500; }
#panel-productivity .pd-game-panel__head > span, #panel-productivity .pd-game-panel__head > strong { color: var(--muted); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }

/* Quests: borderless rows separated by hairlines — the list, not each item, is the object. */
#panel-productivity .pd-quest-list { display: grid; }
#panel-productivity .pd-quest { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 14px; min-height: 62px; padding: 12px 0; border-top: 1px solid var(--line); background: none; }
#panel-productivity .pd-quest:first-child { border-top: 0; padding-top: 0; }
#panel-productivity .pd-quest__check { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--soft); color: var(--muted); transition: background var(--duration) ease, color var(--duration) ease; }
#panel-productivity .pd-quest--task_completed .pd-quest__check { background: var(--accent-soft); color: var(--accent); }
#panel-productivity .pd-quest--focus_session_completed .pd-quest__check { background: color-mix(in srgb, var(--chart-3) 14%, transparent); color: var(--chart-3); }
#panel-productivity .pd-quest--habit_completed .pd-quest__check { background: var(--ok-bg); color: var(--ok); }
#panel-productivity .pd-quest.is-complete .pd-quest__check { background: var(--ok); color: white; }
#panel-productivity .pd-quest > div { display: grid; gap: 2px; min-width: 0; }
#panel-productivity .pd-quest strong { font-size: 14px; font-weight: 560; letter-spacing: -.01em; }
#panel-productivity .pd-quest > div > span { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
#panel-productivity .pd-quest.is-complete strong { color: var(--muted); }
#panel-productivity .pd-quest > b { color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
#panel-productivity .pd-quest.is-complete > b { color: var(--ok); }

/* Achievements: locked state is muted, not dimmed — dimming muddies the whole card. */
#panel-productivity .pd-achievement-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* --hover is the token that reads as a subtle lift in both themes; a transparent
   mix of --soft disappears against the white light-theme surface. */
#panel-productivity .pd-achievement { display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 12px; border: 1px solid transparent; border-radius: 12px; background: var(--hover); transition: border-color var(--duration) ease, background var(--duration) ease; }
#panel-productivity .pd-achievement:hover { border-color: var(--line-strong); }
#panel-productivity .pd-achievement.is-unlocked { border-color: color-mix(in srgb, var(--warn) 28%, transparent); background: color-mix(in srgb, var(--warn-bg) 40%, transparent); }
#panel-productivity .pd-achievement__icon { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--muted) 12%, transparent); color: var(--muted); }
#panel-productivity .pd-achievement.is-unlocked .pd-achievement__icon { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
#panel-productivity .pd-achievement > div { display: grid; gap: 2px; min-width: 0; }
#panel-productivity .pd-achievement strong { font-size: 13px; font-weight: 560; letter-spacing: -.01em; color: var(--muted); }
#panel-productivity .pd-achievement.is-unlocked strong { color: var(--text); }
#panel-productivity .pd-achievement small { color: var(--muted); font-size: 11px; line-height: 1.35; opacity: .8; }

/* Momentum: a track per day so empty days still read as part of the series,
   rather than as disconnected stubs floating in whitespace. */
#panel-productivity .pd-momentum-strip { display: grid; grid-template-columns: repeat(7,1fr); gap: 8px; min-height: 104px; }
#panel-productivity .pd-momentum-day { display: grid; grid-template-rows: 1fr auto auto; place-items: center; gap: 9px; color: var(--muted); }
#panel-productivity .pd-momentum-day::before { grid-area: 1 / 1; width: 8px; height: 100%; border-radius: 999px; background: var(--soft); content: ""; }
#panel-productivity .pd-momentum-day i { grid-area: 1 / 1; align-self: end; display: block; width: 8px; height: max(8px,var(--xp)); border-radius: 999px; background: var(--line-strong); transition: height 400ms var(--ease); }
#panel-productivity .pd-momentum-day.is-active i { background: var(--accent); }
#panel-productivity .pd-momentum-day strong { color: var(--secondary); font-size: 12px; font-weight: 560; font-variant-numeric: tabular-nums; }
#panel-productivity .pd-momentum-day span { font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
#panel-productivity .pd-xp-pop { position: fixed; z-index: 80; top: 82px; left: 50%; padding: 9px 14px; border: 1px solid color-mix(in srgb,var(--accent) 35%,var(--line)); border-radius: 999px; background: var(--elevated); box-shadow: var(--shadow-lg); color: var(--accent); font-size: 13px; font-weight: 800; pointer-events: none; animation: pd-xp-pop 1.5s var(--ease) both; }
@keyframes pd-xp-pop { 0% { opacity:0; transform:translate(-50%,12px) scale(.9); } 20%,75% { opacity:1; transform:translate(-50%,0) scale(1); } 100% { opacity:0; transform:translate(-50%,-16px) scale(.96); } }

@media (max-width: 1080px) { #panel-productivity .pd-container-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); } #panel-productivity .pd-game-hero { grid-template-columns: auto 1fr; row-gap: 22px; } #panel-productivity .pd-game-vitals { grid-column: 1/-1; grid-template-columns: repeat(4,1fr); gap: 16px; padding-top: 22px; border-top: 1px solid var(--line); } #panel-productivity .pd-game-vitals > div { justify-items: start; text-align: left; } #panel-productivity .pd-rank-road { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { #panel-productivity .pd-player-card { margin-inline: 12px; } #panel-productivity .pd-container-grid, #panel-productivity .pd-game-layout { grid-template-columns: 1fr; } #panel-productivity .pd-container-card { min-height: 260px; padding: 18px; } #panel-productivity .pd-game-hero { grid-template-columns: auto 1fr; gap: 18px; padding: 20px; } #panel-productivity .pd-game-avatar { width: 54px; height: 54px; border-radius: 16px; } #panel-productivity .pd-game-avatar span { font-size: 21px; } #panel-productivity .pd-game-identity h2 { font-size: 19px; } #panel-productivity .pd-game-identity > p { margin-bottom: 14px; } #panel-productivity .pd-game-vitals { grid-template-columns: repeat(2,1fr); gap: 18px; padding-top: 18px; } #panel-productivity .pd-container-fields { grid-template-columns: 1fr; } #panel-productivity .pd-rank-road { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { #panel-productivity .pd-today-game { grid-template-columns: 1fr; } #panel-productivity .pd-today-quests { justify-content: space-between; min-height: 34px; border-top: 1px solid var(--line); border-left: 0; } #panel-productivity .pd-today-game > button { grid-template-columns: 34px 1fr auto; } #panel-productivity .pd-today-game i { display: none; } }
@media (max-width: 420px) { #panel-productivity .pd-search { width: 94px; } #panel-productivity .pd-header__actions { gap: 4px; } #panel-productivity .pd-header__actions > .pd-icon-btn, #panel-productivity .pd-header__actions > .pd-primary-btn { width: 32px; min-height: 32px; } }
@media (max-width: 480px) { #panel-productivity .pd-para-hero { align-items: stretch; flex-direction: column; } #panel-productivity .pd-para-hero .pd-primary-btn { width: 100%; } #panel-productivity .pd-game-hero { grid-template-columns: 1fr; text-align: center; } #panel-productivity .pd-game-avatar { margin: auto; } #panel-productivity .pd-game-xp { grid-template-columns: 1fr; justify-items: center; } #panel-productivity .pd-game-xp > span { width: 100%; } #panel-productivity .pd-game-vitals > div { justify-items: center; text-align: center; } #panel-productivity .pd-achievement-grid { grid-template-columns: 1fr; } #panel-productivity .pd-momentum-strip { gap: 4px; } }
@media (prefers-reduced-motion: reduce) {
  #panel-productivity *, #panel-productivity *::before, #panel-productivity *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* —— Visual polish: quieter chrome, clearer hierarchy —— */
#panel-productivity .pd-workspace {
  background:
    radial-gradient(1200px 480px at 12% -10%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 55%),
    radial-gradient(900px 420px at 100% 0%, color-mix(in srgb, var(--chart-3, var(--accent)) 6%, transparent), transparent 50%),
    var(--bg);
}

#panel-productivity .pd-rail {
  background: color-mix(in srgb, var(--elevated) 92%, var(--bg));
  backdrop-filter: blur(10px);
}

#panel-productivity .pd-rail__top {
  padding: 22px 18px 10px;
}

#panel-productivity .pd-rail__top h2 {
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.03em;
}

#panel-productivity .pd-capture-btn {
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
  transition: background var(--duration) ease, transform var(--duration-fast) ease, border-color var(--duration) ease;
}

#panel-productivity .pd-capture-btn:hover {
  background: color-mix(in srgb, var(--accent-soft) 80%, var(--surface));
  transform: translateY(-1px);
}

#panel-productivity .pd-player-card {
  border-radius: 14px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface) 62%);
  box-shadow: none;
}

#panel-productivity .pd-player-card__level {
  background: var(--accent);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 22%, transparent);
}

#panel-productivity .pd-nav__item {
  border-radius: 10px;
  transition: background var(--duration) ease, color var(--duration) ease;
}

#panel-productivity .pd-nav__item.is-active {
  box-shadow: inset 3px 0 0 var(--accent);
}

#panel-productivity .pd-header {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px);
  border-bottom-color: color-mix(in srgb, var(--line) 80%, transparent);
}

#panel-productivity .pd-header h1 {
  letter-spacing: -0.035em;
  font-weight: 650;
}

#panel-productivity .pd-search input {
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface) 88%, var(--elevated));
}

#panel-productivity .pd-primary-btn {
  border-radius: 11px;
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 18%, transparent) inset, 0 8px 18px color-mix(in srgb, var(--accent) 18%, transparent);
}

#panel-productivity .pd-secondary-btn,
#panel-productivity .pd-danger-btn {
  border-radius: 11px;
}

#panel-productivity .pd-summary {
  border: 0;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 70%, var(--elevated));
  box-shadow: inset 0 0 0 1px var(--line);
}

#panel-productivity .pd-task {
  min-height: 62px;
  border-radius: 14px;
  border-color: color-mix(in srgb, var(--line) 85%, transparent);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: none;
  transition: border-color var(--duration) ease, background var(--duration) ease, transform var(--duration-fast) ease;
}

#panel-productivity .pd-task:hover {
  border-color: var(--line-strong);
  background: var(--surface);
  transform: translateY(-1px);
}

#panel-productivity .pd-task.is-selected {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}

#panel-productivity .pd-check {
  border-width: 1.5px;
  transition: border-color var(--duration) ease, background var(--duration) ease, transform var(--duration-fast) ease;
}

#panel-productivity .pd-check:hover {
  transform: scale(1.06);
}

#panel-productivity .pd-task__title {
  font-size: 14px;
  font-weight: 560;
  letter-spacing: -0.01em;
}

#panel-productivity .pd-bulkbar {
  border-radius: 999px;
  padding: 7px 8px 7px 16px;
  background: color-mix(in srgb, var(--elevated) 92%, transparent);
  backdrop-filter: blur(10px);
}

#panel-productivity .pd-bulkbar button {
  border-radius: 999px;
  font-weight: 600;
}

#panel-productivity .pd-para-hero {
  padding-bottom: 22px;
  border-bottom: 0;
  position: relative;
}

#panel-productivity .pd-para-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent 85%);
}

#panel-productivity .pd-para-hero h2 {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 650;
}

#panel-productivity .pd-container-card {
  min-height: 280px;
  padding: 20px 20px 16px;
  border-radius: 18px;
  border-color: color-mix(in srgb, var(--line) 90%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--container-color) 7%, var(--surface)), var(--surface) 42%);
  box-shadow: none;
  transition: border-color var(--duration) ease, transform var(--duration-fast) ease, background var(--duration) ease;
}

#panel-productivity .pd-container-card::before {
  height: 3px;
  opacity: 0.95;
}

#panel-productivity .pd-container-card:hover {
  border-color: color-mix(in srgb, var(--container-color) 35%, var(--line-strong));
  transform: translateY(-2px);
}

#panel-productivity .pd-container-card h3 {
  margin-top: 12px;
  font-size: 18px;
  font-weight: 650;
}

#panel-productivity .pd-container-card__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

#panel-productivity .pd-container-card footer button {
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--soft) 70%, transparent);
  font-size: 11px;
  transition: background var(--duration) ease, color var(--duration) ease;
}

#panel-productivity .pd-container-card footer button[data-container-action="task"] {
  background: color-mix(in srgb, var(--accent-soft) 70%, transparent);
  color: var(--accent);
}

#panel-productivity .pd-container-card footer .pd-container-card__danger,
#panel-productivity .pd-container-card footer button[data-container-action="delete"] {
  margin-left: 2px;
  background: transparent;
  color: var(--bad);
}

#panel-productivity .pd-container-card footer .pd-container-card__danger:hover,
#panel-productivity .pd-container-card footer button[data-container-action="delete"]:hover {
  background: color-mix(in srgb, var(--bad) 12%, transparent);
  color: var(--bad);
}

#panel-productivity .pd-container-progress {
  height: 5px;
  margin: 16px 0 12px;
}

#panel-productivity .pd-detail {
  background: color-mix(in srgb, var(--elevated) 96%, var(--bg));
}

#panel-productivity .pd-detail-title {
  font-size: 21px;
  letter-spacing: -0.03em;
}

#panel-productivity .pd-detail-actions {
  gap: 10px;
  padding-top: 14px;
}

#panel-productivity .pd-detail-actions .pd-secondary-btn {
  min-height: 38px;
  padding: 0 14px;
}

#panel-productivity .pd-detail-actions .pd-danger-btn {
  min-height: 38px;
  padding: 0 14px;
  border-color: color-mix(in srgb, var(--bad) 35%, var(--line));
  background: color-mix(in srgb, var(--bad) 10%, var(--surface));
  color: var(--bad);
  box-shadow: none;
}

#panel-productivity .pd-detail-actions .pd-danger-btn:hover {
  background: var(--bad);
  border-color: var(--bad);
  color: white;
}

#panel-productivity .pd-empty__icon,
#panel-productivity .pd-para-empty > div {
  border-radius: 22px;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 12%, transparent);
}

#panel-productivity .pd-focus-card,
#panel-productivity .pd-habit-card,
#panel-productivity .pd-metric-card,
#panel-productivity .pd-resource-card,
#panel-productivity .pd-game-panel,
#panel-productivity .pd-game-hero {
  box-shadow: none;
  border-color: color-mix(in srgb, var(--line) 90%, transparent);
}

#panel-productivity .pd-game-avatar {
  background: var(--accent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 22%, transparent);
}

#panel-productivity .pd-today-game {
  border-radius: 16px;
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  background: linear-gradient(105deg, color-mix(in srgb, var(--accent-soft) 40%, var(--surface)), var(--surface));
}

#panel-productivity .pd-today-level {
  border-radius: 14px;
  background: var(--accent);
  box-shadow: 0 8px 16px color-mix(in srgb, var(--accent) 20%, transparent);
}

#panel-productivity .pd-modal {
  border-radius: 22px;
  border-color: color-mix(in srgb, var(--line-strong) 80%, transparent);
}

@media (max-width: 820px) {
  #panel-productivity .pd-workspace {
    background: var(--bg);
  }
  #panel-productivity .pd-container-card:hover,
  #panel-productivity .pd-task:hover {
    transform: none;
  }
}
/* ============================================================================
   Board view + agrupamento configurável
   Colunas derivadas do "agrupar por"; arrastar entre colunas altera o campo.
   ========================================================================= */

/* Segmented de layout, no padrão dos outros controles do sistema. */
#panel-productivity .pd-layout-seg {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border-radius: var(--macos-seg-radius, 8px);
    background: var(--soft);
}
#panel-productivity .pd-layout-seg button {
    min-height: 24px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--secondary);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: -.01em;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
#panel-productivity .pd-layout-seg button.is-active {
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    box-shadow: var(--macos-control-shadow);
}
#panel-productivity .pd-groupby select {
    height: var(--macos-ctrl-h, 28px);
    padding: 0 24px 0 9px;
    border: 1px solid var(--line);
    border-radius: var(--macos-control-radius, 7px);
    background: var(--surface);
    color: var(--secondary);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
}

/* Colunas: rolagem horizontal, cada uma com altura própria. */
#panel-productivity .pd-board {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 1fr);
    gap: 12px;
    align-items: start;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: thin;
}
#panel-productivity .pd-board-col {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 120px;
    padding: 12px 8px 8px;
    border: 1px solid var(--macos-hairline);
    border-radius: var(--macos-window-radius, 12px);
    background: color-mix(in srgb, var(--soft) 35%, transparent);
    transition: background 140ms ease, border-color 140ms ease;
}
#panel-productivity .pd-board-col.is-drop-column {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    background: var(--accent-soft);
}
#panel-productivity .pd-board-col__head {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 6px 8px;
}
#panel-productivity .pd-board-col__head h3 {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: -.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#panel-productivity .pd-board-col__head span {
    color: var(--muted);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}
#panel-productivity .pd-board-col__list { display: grid; gap: 4px; min-height: 24px; }

/* No board o card volta a ter duas linhas: a coluna é estreita. */
#panel-productivity .pd-board .pd-task {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 0;
    padding: 8px 9px;
    background: var(--surface);
}
#panel-productivity .pd-board .pd-drag { display: none; }
#panel-productivity .pd-board .pd-task__actions { grid-column: 3; }
#panel-productivity .pd-board .pd-task__meta { flex-wrap: wrap; }

/* A stage do board usa a largura toda: colunas já rolam sozinhas. */
#panel-productivity .pd-workspace.is-board .pd-stage { width: 100%; }

@media (max-width: 820px) {
    #panel-productivity .pd-layout-seg,
    #panel-productivity .pd-groupby { display: none; }
}

/* Na coluna estreita do board, truncar em uma linha esconde quase o título
   inteiro; duas linhas cabem sem perder densidade. */
#panel-productivity .pd-board .pd-task__title {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
#panel-productivity .pd-board .pd-task__title-row { align-items: flex-start; }

/* ============================================================================
   Tags — modelo multi-select
   Mesma paleta de 8 cores das Contas, para a mesma tag ter a mesma cor em
   todo o painel. Chips clicáveis filtram; o campo de entrada tem autocomplete.
   ========================================================================= */
#panel-productivity .pd-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border: 1px solid var(--tag-bd, var(--line));
    border-radius: 999px;
    background: var(--tag-bg, var(--soft));
    color: var(--tag-fg, var(--secondary));
    font-size: 11px;
    font-weight: 550;
    line-height: 1.5;
    white-space: nowrap;
}
#panel-productivity .pd-task .pd-tag { cursor: pointer; }
#panel-productivity .pd-task .pd-tag:hover { border-color: var(--tag-fg, var(--line-strong)); }
#panel-productivity .pd-tag--more { background: var(--soft); color: var(--muted); border-color: var(--line); }

#panel-productivity .pd-tag-c0 { --tag-fg: #0f766e; --tag-bg: color-mix(in srgb, #14b8a6 14%, var(--surface)); --tag-bd: color-mix(in srgb, #14b8a6 28%, var(--line)); }
#panel-productivity .pd-tag-c1 { --tag-fg: #c2410c; --tag-bg: color-mix(in srgb, #f97316 14%, var(--surface)); --tag-bd: color-mix(in srgb, #f97316 28%, var(--line)); }
#panel-productivity .pd-tag-c2 { --tag-fg: #0369a1; --tag-bg: color-mix(in srgb, #0ea5e9 14%, var(--surface)); --tag-bd: color-mix(in srgb, #0ea5e9 28%, var(--line)); }
#panel-productivity .pd-tag-c3 { --tag-fg: #a16207; --tag-bg: color-mix(in srgb, #eab308 16%, var(--surface)); --tag-bd: color-mix(in srgb, #eab308 30%, var(--line)); }
#panel-productivity .pd-tag-c4 { --tag-fg: #be123c; --tag-bg: color-mix(in srgb, #f43f5e 13%, var(--surface)); --tag-bd: color-mix(in srgb, #f43f5e 26%, var(--line)); }
#panel-productivity .pd-tag-c5 { --tag-fg: #4d7c0f; --tag-bg: color-mix(in srgb, #84cc16 16%, var(--surface)); --tag-bd: color-mix(in srgb, #84cc16 30%, var(--line)); }
#panel-productivity .pd-tag-c6 { --tag-fg: #4338ca; --tag-bg: color-mix(in srgb, #6366f1 13%, var(--surface)); --tag-bd: color-mix(in srgb, #6366f1 26%, var(--line)); }
#panel-productivity .pd-tag-c7 { --tag-fg: #9a3412; --tag-bg: color-mix(in srgb, #ea580c 13%, var(--surface)); --tag-bd: color-mix(in srgb, #ea580c 26%, var(--line)); }

[data-theme="dark"] #panel-productivity .pd-tag-c0 { --tag-fg: #5eead4; --tag-bg: color-mix(in srgb, #2dd4bf 16%, var(--surface)); --tag-bd: color-mix(in srgb, #2dd4bf 34%, var(--line)); }
[data-theme="dark"] #panel-productivity .pd-tag-c1 { --tag-fg: #fdba74; --tag-bg: color-mix(in srgb, #fb923c 14%, var(--surface)); --tag-bd: color-mix(in srgb, #fb923c 32%, var(--line)); }
[data-theme="dark"] #panel-productivity .pd-tag-c2 { --tag-fg: #7dd3fc; --tag-bg: color-mix(in srgb, #38bdf8 14%, var(--surface)); --tag-bd: color-mix(in srgb, #38bdf8 32%, var(--line)); }
[data-theme="dark"] #panel-productivity .pd-tag-c3 { --tag-fg: #fde047; --tag-bg: color-mix(in srgb, #facc15 14%, var(--surface)); --tag-bd: color-mix(in srgb, #facc15 30%, var(--line)); }
[data-theme="dark"] #panel-productivity .pd-tag-c4 { --tag-fg: #fda4af; --tag-bg: color-mix(in srgb, #fb7185 14%, var(--surface)); --tag-bd: color-mix(in srgb, #fb7185 30%, var(--line)); }
[data-theme="dark"] #panel-productivity .pd-tag-c5 { --tag-fg: #bef264; --tag-bg: color-mix(in srgb, #a3e635 14%, var(--surface)); --tag-bd: color-mix(in srgb, #a3e635 30%, var(--line)); }
[data-theme="dark"] #panel-productivity .pd-tag-c6 { --tag-fg: #a5b4fc; --tag-bg: color-mix(in srgb, #818cf8 15%, var(--surface)); --tag-bd: color-mix(in srgb, #818cf8 32%, var(--line)); }
[data-theme="dark"] #panel-productivity .pd-tag-c7 { --tag-fg: #fdba74; --tag-bg: color-mix(in srgb, #f97316 14%, var(--surface)); --tag-bd: color-mix(in srgb, #f97316 30%, var(--line)); }

/* ---- Campo de tags com chips + autocomplete ---- */
#panel-productivity .pd-tagfield {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    min-height: var(--macos-ctrl-h, 28px);
    padding: 3px 6px;
    border: 1px solid var(--line);
    border-radius: var(--macos-control-radius, 7px);
    background: var(--elevated);
    box-shadow: inset 0 1px 1px color-mix(in srgb, #000 4%, transparent);
}
#panel-productivity .pd-tagfield:focus-within {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
    box-shadow: 0 0 0 3px var(--accent-soft);
}
#panel-productivity .pd-tagfield__chips { display: contents; }
#panel-productivity .pd-tagfield .pd-tag { font-size: 11.5px; }
#panel-productivity .pd-tag__x {
    display: grid;
    place-items: center;
    width: 13px;
    height: 13px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 13px;
    line-height: 1;
    opacity: .6;
    cursor: pointer;
}
#panel-productivity .pd-tag__x:hover { opacity: 1; background: color-mix(in srgb, currentColor 18%, transparent); }
#panel-productivity .pd-tagfield__input {
    flex: 1;
    min-width: 90px;
    height: 22px;
    padding: 0 2px;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text);
    font-size: 13px;
}
#panel-productivity .pd-tagfield__input:focus { border: 0 !important; box-shadow: none !important; }
#panel-productivity .pd-tagfield__menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    display: grid;
    gap: 1px;
    width: min(280px, 100%);
    max-height: 230px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--macos-hairline);
    border-radius: 9px;
    background: var(--elevated);
    box-shadow: var(--macos-window-shadow), 0 12px 28px color-mix(in srgb, #000 20%, transparent);
}
/* No dialog, absolute (não fixed): contain:layout do painel e o top-layer
   capturam position:fixed e o menu some fora da tela. */
#panel-productivity .pd-tagfield__menu.is-fixed {
    position: absolute;
    top: auto;
    left: auto;
    z-index: 10050;
}
#panel-productivity .pd-tagfield__menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
}
#panel-productivity .pd-tagfield__menu button:hover { background: var(--hover); }
#panel-productivity .pd-tagfield__menu button small { margin-left: auto; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
#panel-productivity .pd-tagfield__menu .is-create { color: var(--secondary); }
#panel-productivity .pd-tagfield__menu .is-create strong { color: var(--accent); }

/* ============================================================================
   Checklist, calendário, views salvas e slash commands
   ========================================================================= */

/* ---- Checklist ---- */
#panel-productivity .pd-checklist { display: grid; gap: 6px; }
#panel-productivity .pd-checklist__head {
    display: flex; align-items: center; gap: 8px;
    color: var(--muted); font-size: 11.5px; font-weight: 500;
}
#panel-productivity .pd-checklist__head small { font-variant-numeric: tabular-nums; }
#panel-productivity .pd-checklist__bar {
    flex: 1; height: 4px; overflow: hidden; border-radius: 999px; background: var(--soft);
}
#panel-productivity .pd-checklist__bar b { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width 240ms var(--ease); }
#panel-productivity .pd-checklist__items { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
#panel-productivity .pd-checklist__item {
    display: grid; grid-template-columns: 18px minmax(0,1fr) 20px; align-items: center; gap: 8px;
    padding: 2px 2px 2px 0; border-radius: 6px;
}
#panel-productivity .pd-checklist__item:hover { background: var(--hover); }
#panel-productivity .pd-checklist__box {
    display: grid; place-items: center; width: 15px; height: 15px; padding: 0;
    border: 1.5px solid var(--line-strong); border-radius: 4px; background: transparent;
    color: #fff; cursor: pointer;
}
#panel-productivity .pd-checklist__item.is-done .pd-checklist__box { border-color: var(--accent); background: var(--accent); }
#panel-productivity .pd-checklist__text {
    min-height: 24px !important; height: 24px; padding: 0 4px !important;
    border: 1px solid transparent !important; border-radius: 5px;
    background: transparent !important; box-shadow: none !important;
    color: var(--text); font-size: 12.5px;
}
#panel-productivity .pd-checklist__text:focus { border-color: var(--line) !important; background: var(--elevated) !important; box-shadow: none !important; }
#panel-productivity .pd-checklist__item.is-done .pd-checklist__text { color: var(--muted); text-decoration: line-through; }
#panel-productivity .pd-checklist__x {
    width: 18px; height: 18px; padding: 0; border: 0; border-radius: 4px;
    background: transparent; color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer; opacity: 0;
}
#panel-productivity .pd-checklist__item:hover .pd-checklist__x { opacity: 1; }
#panel-productivity .pd-checklist__add {
    min-height: 26px !important; height: 26px; margin-top: 2px; padding: 0 6px !important;
    border: 1px dashed var(--line) !important; border-radius: 6px;
    background: transparent !important; box-shadow: none !important; font-size: 12.5px;
}
#panel-productivity .pd-check-progress {
    display: inline-flex; align-items: center; gap: 3px;
    color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums;
}
#panel-productivity .pd-check-progress.is-complete { color: var(--ok); }

/* ---- Somatório de coluna ---- */
#panel-productivity .pd-board-col__sum {
    display: flex; align-items: center; gap: 4px; margin: -4px 6px 6px;
    color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums;
}

/* ---- Calendário (mês / semana / dia) ---- */
#panel-productivity .pd-workspace.is-calendar .pd-groupby,
#panel-productivity .pd-workspace.is-calendar .pd-layout-seg,
#panel-productivity .pd-workspace.is-calendar [data-pd-sort] { display: none; }
#panel-productivity .pd-workspace.is-calendar .pd-summary { display: none; }
#panel-productivity .pd-cal { display: grid; gap: 12px; min-height: 0; }
#panel-productivity .pd-cal__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
}
#panel-productivity .pd-cal__nav { display: flex; align-items: center; gap: 6px; min-width: 0; }
#panel-productivity .pd-cal__head strong {
  min-width: 0; font-size: 15px; font-weight: 650; text-transform: capitalize; white-space: nowrap;
}
#panel-productivity .pd-cal__head .pd-icon-btn { width: 28px; height: 28px; font-size: 16px; }
#panel-productivity .pd-cal__modes {
  display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius: 9px; background: var(--elevated);
}
#panel-productivity .pd-cal__modes button {
  min-height: 28px; padding: 0 11px; border: 0; border-radius: 7px;
  background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
#panel-productivity .pd-cal__modes button.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
#panel-productivity .pd-cal__grid--month {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px;
  overflow: hidden; border: 1px solid var(--macos-hairline, var(--line)); border-radius: var(--macos-window-radius, 12px);
  background: var(--line);
}
#panel-productivity .pd-cal__wd {
  padding: 7px 8px; background: var(--elevated);
  color: var(--muted); font-size: 11px; font-weight: 650; text-align: center;
}
#panel-productivity .pd-cal__day {
  display: flex; flex-direction: column; gap: 3px; min-height: 100px; padding: 5px;
  background: var(--surface); transition: background 120ms ease;
}
#panel-productivity .pd-cal__day.is-outside { background: color-mix(in srgb, var(--surface) 60%, var(--bg)); }
#panel-productivity .pd-cal__day.is-outside .pd-cal__num { opacity: .4; }
#panel-productivity .pd-cal__day.is-drop-column,
#panel-productivity .pd-cal__slot.is-drop-column,
#panel-productivity .pd-cal__allday-cell.is-drop-column { background: var(--accent-soft); outline: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
#panel-productivity .pd-cal__num {
  display: inline-grid; place-items: center; width: 22px; height: 22px; margin: 0; padding: 0;
  border: 0; border-radius: 999px; background: transparent; color: var(--muted);
  font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; cursor: pointer;
}
#panel-productivity .pd-cal__num:hover { background: var(--hover); color: var(--text); }
#panel-productivity .pd-cal__day.is-today .pd-cal__num {
  background: var(--accent); color: #fff; font-weight: 700;
}
#panel-productivity .pd-cal__items { display: grid; gap: 2px; align-content: start; }
#panel-productivity .pd-cal__task,
#panel-productivity .pd-cal__block {
  overflow: hidden; padding: 2px 6px; border-left: 2px solid var(--priority-color, var(--line-strong));
  border-radius: 4px; background: var(--soft); color: var(--text);
  font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; cursor: grab;
}
#panel-productivity .pd-cal__task:hover,
#panel-productivity .pd-cal__block:hover { background: var(--hover); }
#panel-productivity .pd-cal__task.is-completed,
#panel-productivity .pd-cal__block.is-completed { color: var(--muted); text-decoration: line-through; }
#panel-productivity .pd-cal__task.is-dragging,
#panel-productivity .pd-cal__block.is-dragging {
  opacity: .45;
  pointer-events: none;
}
#panel-productivity .pd-cal__task,
#panel-productivity .pd-cal__block { user-select: none; }
#panel-productivity .pd-cal__time {
  margin-right: 4px; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums;
}
#panel-productivity .pd-cal__more {
  margin: 0; padding: 0 4px; border: 0; background: transparent; color: var(--accent);
  font: inherit; font-size: 10.5px; font-weight: 650; text-align: left; cursor: pointer;
}
#panel-productivity .pd-cal__undated {
  display: grid; gap: 5px; padding: 10px;
  border: 1px dashed var(--line); border-radius: 10px;
}
#panel-productivity .pd-cal__undated > span { color: var(--muted); font-size: 11.5px; font-weight: 600; }
#panel-productivity .pd-cal__undated .pd-cal__items { grid-auto-flow: column; grid-auto-columns: minmax(120px, 180px); overflow-x: auto; }

/* Semana / dia — grade horária */
#panel-productivity .pd-cal__week {
  display: grid; gap: 0; overflow: hidden;
  border: 1px solid var(--macos-hairline, var(--line)); border-radius: var(--macos-window-radius, 12px);
  background: var(--elevated);
}
#panel-productivity .pd-cal__week-head,
#panel-productivity .pd-cal__allday,
#panel-productivity .pd-cal__scroll {
  display: grid; grid-template-columns: 56px 1fr;
}
#panel-productivity .pd-cal__week-head { border-bottom: 1px solid var(--line); background: var(--elevated); }
#panel-productivity .pd-cal__week-head > div:last-child,
#panel-productivity .pd-cal__allday > :last-child,
#panel-productivity .pd-cal__cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
#panel-productivity .pd-cal[data-cal-mode="week"] .pd-cal__week-head > div:last-child,
#panel-productivity .pd-cal[data-cal-mode="week"] .pd-cal__allday > :last-child,
#panel-productivity .pd-cal[data-cal-mode="week"] .pd-cal__cols { grid-template-columns: repeat(7, minmax(0, 1fr)); }
#panel-productivity .pd-cal[data-cal-mode="day"] .pd-cal__week-head > div:last-child,
#panel-productivity .pd-cal[data-cal-mode="day"] .pd-cal__allday > :last-child,
#panel-productivity .pd-cal[data-cal-mode="day"] .pd-cal__cols { grid-template-columns: minmax(0, 1fr); }
#panel-productivity .pd-cal__gutter-spacer,
#panel-productivity .pd-cal__allday-label {
  display: flex; align-items: center; justify-content: flex-end; padding: 0 8px;
  color: var(--muted); font-size: 10px; font-weight: 650;
}
#panel-productivity .pd-cal__col-head {
  display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-left: 1px solid var(--line);
  background: transparent; color: var(--muted); font-size: 11px; cursor: pointer;
}
#panel-productivity .pd-cal__col-head strong {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px;
  color: var(--text); font-size: 15px; font-weight: 700;
}
#panel-productivity .pd-cal__col-head.is-today strong { background: var(--accent); color: #fff; }
#panel-productivity .pd-cal__allday {
  min-height: 36px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 70%, var(--elevated));
}
#panel-productivity .pd-cal__allday-cell {
  display: flex; flex-wrap: wrap; gap: 3px; align-content: flex-start; min-height: 36px; padding: 4px;
  border-left: 1px solid var(--line);
}
#panel-productivity .pd-cal__scroll {
  max-height: min(68vh, 720px); overflow: auto; background: var(--bg);
}
#panel-productivity .pd-cal__gutter {
  display: grid; grid-auto-rows: var(--cal-hour, 52px);
  color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; text-align: right;
}
#panel-productivity .pd-cal__gutter span { padding: 0 8px; transform: translateY(-6px); }
#panel-productivity .pd-cal__cols { min-width: 0; }
#panel-productivity .pd-cal__col { position: relative; min-width: 0; border-left: 1px solid var(--line); }
#panel-productivity .pd-cal__slots { position: relative; display: grid; grid-auto-rows: var(--cal-hour, 52px); }
#panel-productivity .pd-cal__slot {
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
#panel-productivity .pd-cal__block {
  position: absolute; right: 4px; left: 4px; z-index: 2;
  display: flex; flex-direction: column; gap: 2px; padding: 4px 6px;
  overflow: hidden; border-radius: 6px; background: color-mix(in srgb, var(--accent-soft) 80%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
  white-space: normal; line-height: 1.25;
}
#panel-productivity .pd-cal__block .pd-cal__time { display: block; margin: 0; }

@media (max-width: 820px) {
  #panel-productivity .pd-cal__day { min-height: 72px; }
  #panel-productivity .pd-cal__head { gap: 8px; }
  #panel-productivity .pd-cal__modes { width: 100%; }
  #panel-productivity .pd-cal__modes button { flex: 1; }
}

/* ---- Views salvas ---- */
#panel-productivity .pd-saved-view { position: relative; }
#panel-productivity .pd-saved-view__x { opacity: 0; color: var(--muted); font-size: 14px; cursor: pointer; }
#panel-productivity .pd-saved-view:hover .pd-saved-view__x { opacity: 1; }
#panel-productivity .pd-saved-view__x:hover { color: var(--bad); }

/* ---- Slash commands ---- */
#panel-productivity .pd-slash {
    position: absolute; z-index: 40; bottom: 8px; left: 8px;
    display: grid; gap: 1px; width: min(260px, calc(100% - 16px)); max-height: 220px; overflow-y: auto;
    padding: 4px; border: 1px solid var(--macos-hairline); border-radius: 9px;
    background: var(--elevated);
    box-shadow: var(--macos-window-shadow), 0 12px 28px color-mix(in srgb, #000 22%, transparent);
}
#panel-productivity .pd-slash button {
    display: flex; align-items: center; gap: 8px; padding: 5px 7px;
    border: 0; border-radius: 6px; background: transparent; color: var(--text);
    font: inherit; font-size: 12.5px; text-align: left; cursor: pointer;
}
#panel-productivity .pd-slash button:hover { background: var(--hover); }
#panel-productivity .pd-slash strong { font-weight: 550; }
#panel-productivity .pd-slash small { margin-left: auto; color: var(--muted); font-family: var(--mono); font-size: 10.5px; }

/* ============================================================================
   Emoji identificador (page icons)
   ========================================================================= */
#panel-productivity .pd-item-icon {
    flex: 0 0 auto;
    font-size: 13px;
    line-height: 1;
    /* Fontes de emoji só entram aqui: o resto da UI segue a fonte do sistema. */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
#panel-productivity .pd-item-icon--lg { font-size: 16px; }

#panel-productivity .pd-title-row { display: flex; align-items: flex-start; gap: 8px; width: 100%; }
#panel-productivity .pd-title-row > input,
#panel-productivity .pd-title-row > textarea { flex: 1; min-width: 0; }

#panel-productivity .pd-emoji-btn {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--macos-control-radius, 7px);
    background: var(--surface);
    font-size: 16px;
    line-height: 1;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}
#panel-productivity .pd-emoji-btn:hover { border-color: var(--line-strong); background: var(--hover); }
#panel-productivity .pd-emoji-btn.is-empty { opacity: .45; }
#panel-productivity .pd-emoji-btn.is-empty:hover { opacity: 1; }

#panel-productivity .pd-emoji {
    position: absolute;
    z-index: 60;
    top: calc(100% + 6px);
    left: 0;
    display: grid;
    gap: 6px;
    width: 268px;
    padding: 8px;
    border: 1px solid var(--macos-hairline);
    border-radius: 10px;
    background: var(--elevated);
    box-shadow: var(--macos-window-shadow), 0 14px 32px color-mix(in srgb, #000 22%, transparent);
}
#panel-productivity .pd-emoji__search {
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 8px !important;
    border-radius: 6px;
    font-size: 12.5px;
}
#panel-productivity .pd-emoji__scroll { display: grid; gap: 8px; max-height: 230px; overflow-y: auto; scrollbar-width: thin; }
#panel-productivity .pd-emoji__group > span {
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 600;
}
#panel-productivity .pd-emoji__group > div { display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px; }
#panel-productivity .pd-emoji [data-emoji] {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-size: 17px;
    line-height: 1;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    cursor: pointer;
}
#panel-productivity .pd-emoji [data-emoji]:hover { background: var(--hover); }
#panel-productivity .pd-emoji__clear {
    min-height: 26px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}
#panel-productivity .pd-emoji__clear:hover { background: var(--hover); color: var(--text); }

/* ============================================================================
   Cards de projeto/área/recurso — redesenho
   O card antigo tinha ordem confusa (tipo em cima, % perdido no rodapé),
   altura fixa de 300px com vazio no meio, e a edição escondida num "⋯".
   Agora: identidade no topo, progresso legível, ações explícitas no rodapé.
   ========================================================================= */
#panel-productivity .pd-container-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    padding: 14px;
    border: 1px solid var(--macos-hairline);
    border-radius: var(--macos-window-radius, 12px);
    background: var(--surface);
    box-shadow: var(--macos-control-shadow);
    cursor: pointer;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
#panel-productivity .pd-container-card:hover {
    border-color: color-mix(in srgb, var(--container-color, var(--accent)) 40%, var(--line));
    box-shadow: var(--macos-window-shadow);
}
#panel-productivity .pd-container-card:focus-visible {
    outline: 0;
    border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
    box-shadow: 0 0 0 3px var(--accent-soft);
}
/* A faixa de cor vira um filete lateral: menos peso que a barra do topo. */
#panel-productivity .pd-container-card::before {
    inset: 12px auto 12px 0;
    width: 3px;
    height: auto;
    border-radius: 999px;
    background: var(--container-color, var(--accent));
    opacity: .85;
}
#panel-productivity .pd-container-card.is-complete { background: color-mix(in srgb, var(--ok-bg) 30%, var(--surface)); }

#panel-productivity .pd-container-card__head { display: flex; align-items: center; gap: 10px; margin-left: 8px; }
#panel-productivity .pd-container-card__avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--container-color, var(--accent)) 14%, var(--soft));
    color: var(--container-color, var(--accent));
    font-size: 13px;
    font-weight: 650;
}
#panel-productivity .pd-container-card__id { display: grid; gap: 1px; min-width: 0; flex: 1; }
#panel-productivity .pd-container-card__id h3 {
    margin: 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: 620;
    letter-spacing: -.015em;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#panel-productivity .pd-container-card__id small {
    color: var(--muted);
    font-size: 11px;
    text-transform: capitalize;
}
#panel-productivity .pd-container-card__pct {
    flex: 0 0 auto;
    color: var(--text);
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
#panel-productivity .pd-container-card__pct i { font-size: 11px; font-style: normal; color: var(--muted); }

#panel-productivity .pd-container-card > p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0 0 0 8px;
    color: var(--secondary);
    font-size: 12.5px;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
#panel-productivity .pd-container-card > p.is-placeholder { color: var(--muted); font-style: italic; }

#panel-productivity .pd-container-progress {
    height: 4px;
    margin: 0 0 0 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--soft);
}
#panel-productivity .pd-container-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--container-color, var(--accent));
    transition: width 260ms var(--ease);
}
#panel-productivity .pd-container-card__meta {
    display: flex;
    gap: 12px;
    margin-left: 8px;
    color: var(--muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

/* Ações só aparecem no hover — o card em repouso fica limpo. */
#panel-productivity .pd-container-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 2px 0 0 8px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
}
/* Visíveis por padrão: escondê-las no hover deixava um vazio no card e
   repetia o erro do "⋯", que foi justamente o que escondeu a edição. */

#panel-productivity .pd-container-card__actions button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
    padding: 0 9px;
    border: 0;
    border-radius: 6px;
    background: var(--soft);
    color: var(--secondary);
    font: inherit;
    font-size: 11.5px;
    font-weight: 550;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
#panel-productivity .pd-container-card__actions button:hover { background: var(--hover); color: var(--text); }
#panel-productivity .pd-container-card__actions button.is-primary { background: var(--accent-soft); color: var(--accent); }
#panel-productivity .pd-container-card__actions .pd-container-card__danger {
    margin-left: auto;
    padding: 0 7px;
    background: transparent;
    color: var(--muted);
}
#panel-productivity .pd-container-card__actions .pd-container-card__danger:hover { background: var(--bad-bg); color: var(--bad); }

#panel-productivity .pd-container-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 12px;
}

/* ============================================================================
   Alinhamento da toolbar
   Os controles do cabeçalho não fechavam na mesma linha: o select "Group"
   ficava com 36px (uma regra global de select impõe min-height, que vence
   `height`), enquanto busca, segmented, ícones e "Add task" tinham 28px.
   O item mais alto puxava a linha e sobravam 3px de diferença entre os
   centros dos controles.
   ========================================================================= */
#panel-productivity .pd-header__actions { align-items: center; }

/* min-height é o que precisa ceder — só `height` não vence a regra global. */
#panel-productivity .pd-groupby select {
    min-height: var(--macos-ctrl-h, 28px);
    height: var(--macos-ctrl-h, 28px);
    line-height: 1;
}
/* O wrapper era block e ganhava altura própria, deslocando o select. */
#panel-productivity .pd-groupby {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

/* Mesma trava para os demais controles da toolbar: todos na altura de sistema. */
#panel-productivity .pd-search,
#panel-productivity .pd-search input,
#panel-productivity .pd-layout-seg,
#panel-productivity .pd-header__actions > .pd-icon-btn,
#panel-productivity .pd-header__actions > .pd-primary-btn {
    min-height: var(--macos-ctrl-h, 28px);
    height: var(--macos-ctrl-h, 28px);
    align-self: center;
}
/* O trilho do segmented é 24px de botão + 2px de padding em cima e embaixo. */
#panel-productivity .pd-layout-seg { box-sizing: border-box; }

/* A busca carregava margin-bottom: 6px de uma regra base. Num container com
   align-items: center, essa margem entra na caixa do item: o container passava
   a ter 34px (28 + 6) e a busca ficava 3px acima dos demais controles. */
#panel-productivity .pd-header__actions > .pd-search { margin: 0; }

/* NÃO RESOLVIDO — as ações do card PARA quebram em duas linhas.
   Cinco botões de texto (Editar · Tarefa · Finalizar · Arquivar · excluir)
   pedem ~300px num card de 264px. Tentei compactar padding e gap: não coube,
   e apertar mais só empurra o problema para o próximo nome de projeto longo.
   A saída real é de design, não de CSS — transformar as ações secundárias em
   ícones ou movê-las para um menu "⋯". Fica registrado em vez de meia-correção.
   O wrap em si está correto (align-items: center, duas linhas alinhadas). */
#panel-productivity .pd-container-card__actions { gap: 4px; }

/* Botão de som do timer: quando mudo, recua para não parecer estado de erro. */
#panel-productivity [data-pd-chime-toggle].is-muted { color: var(--muted); opacity: .7; }
#panel-productivity [data-pd-chime-toggle].is-muted:hover { opacity: 1; }


/* ============================================================================
   Legibilidade
   O passe macOS usou a escala nativa do sistema (controles 28px, texto 13px),
   que é calibrada para tela Retina a curta distância. Num monitor comum, dentro
   do navegador, isso lê pequeno demais. Aqui a escala sobe para um tamanho
   confortável de leitura, preservando as proporções e o caráter do desenho.
   --pd-ctrl é o análogo local de --macos-ctrl-h.
   ========================================================================= */
#panel-productivity { --pd-ctrl: 32px; }

/* ---- Controles ---- */
#panel-productivity .pd-icon-btn,
#panel-productivity .pd-header__actions > .pd-icon-btn {
    width: var(--pd-ctrl);
    height: var(--pd-ctrl);
}
#panel-productivity .pd-primary-btn,
#panel-productivity .pd-secondary-btn,
#panel-productivity .pd-danger-btn,
#panel-productivity .pd-capture-btn {
    min-height: var(--pd-ctrl);
    height: auto;
    padding: 0 14px;
    font-size: 14px;
}
#panel-productivity .pd-header__actions > .pd-primary-btn,
#panel-productivity .pd-search,
#panel-productivity .pd-search input,
#panel-productivity .pd-layout-seg,
#panel-productivity .pd-groupby select {
    min-height: var(--pd-ctrl);
    height: var(--pd-ctrl);
    font-size: 13.5px;
}
#panel-productivity .pd-layout-seg button { min-height: 26px; font-size: 13.5px; padding: 0 12px; }
#panel-productivity .pd-text-btn { font-size: 13.5px; }

/* ---- Campos ---- */
#panel-productivity .pd-filterbar :is(input, select),
#panel-productivity .pd-field :is(input, select, textarea),
#panel-productivity .pd-capture__fields :is(input, select),
#panel-productivity .pd-container-modal .pd-field :is(input, select),
#panel-productivity .pd-ritual-card :is(input, textarea),
#panel-productivity .pd-tagfield {
    min-height: var(--pd-ctrl);
    font-size: 14px;
}
#panel-productivity .pd-capture__fields :is(input, select),
#panel-productivity .pd-container-modal .pd-field :is(input, select) { height: var(--pd-ctrl); }
#panel-productivity .pd-capture textarea,
#panel-productivity .pd-container-modal .pd-field textarea { font-size: 14px; line-height: 1.5; }

/* ---- Navegação lateral ---- */
#panel-productivity .pd-nav__item { min-height: 34px; font-size: 14px; }
#panel-productivity .pd-nav__label { font-size: 12px; }
#panel-productivity .pd-nav__count { font-size: 12.5px; }

/* ---- Tarefas: o texto que mais se lê na aba ---- */
#panel-productivity .pd-task__title { font-size: 14.5px; }
#panel-productivity .pd-task__meta { font-size: 12.5px; }
#panel-productivity .pd-tag,
#panel-productivity .pd-check-progress { font-size: 12px; padding: 2px 8px; }
#panel-productivity .pd-task-group__head h2 { font-size: 15px; }
#panel-productivity .pd-task-group__head span { font-size: 13px; }
#panel-productivity .pd-add-inline { font-size: 13.5px; min-height: 38px; }

/* ---- Board ---- */
#panel-productivity .pd-board-col__head h3 { font-size: 13.5px; }
#panel-productivity .pd-board-col__head span,
#panel-productivity .pd-board-col__sum { font-size: 12.5px; }

/* ---- Cards PARA ---- */
#panel-productivity .pd-container-card__id h3 { font-size: 15px; }
#panel-productivity .pd-container-card__id small { font-size: 12px; }
#panel-productivity .pd-container-card > p { font-size: 13.5px; }
#panel-productivity .pd-container-card__meta { font-size: 12px; }
#panel-productivity .pd-container-card__actions button { min-height: 28px; font-size: 12.5px; }
#panel-productivity .pd-container-card__pct { font-size: 18px; }

/* ---- Sheets ---- */
#panel-productivity .pd-modal { width: min(94vw, 640px); }
#panel-productivity .pd-modal__head h2 { font-size: 17px; }
#panel-productivity .pd-modal__head .pd-eyebrow { font-size: 12px; }
#panel-productivity .pd-capture__title { font-size: 19px; }
#panel-productivity .pd-capture__fields label,
#panel-productivity .pd-container-modal .pd-field > span { font-size: 12.5px; }
#panel-productivity .pd-modal__footer > span { font-size: 12.5px; }
#panel-productivity .pd-modal__footer .pd-primary-btn,
#panel-productivity .pd-modal__footer .pd-secondary-btn,
#panel-productivity .pd-modal__footer .pd-danger-btn { min-height: var(--pd-ctrl); font-size: 13.5px; }

/* ---- Cabeçalho e detalhe ---- */
#panel-productivity .pd-header h1 { font-size: clamp(21px, 2.1vw, 27px); }
#panel-productivity .pd-header p { font-size: 13.5px; }
#panel-productivity .pd-eyebrow { font-size: 12px; }
#panel-productivity .pd-detail-title { font-size: 20px; }
#panel-productivity .pd-detail-form { gap: 18px; }
#panel-productivity .pd-checklist__item { font-size: 14px; }
#panel-productivity .pd-checklist__text { font-size: 14px; }
#panel-productivity .pd-markdown { font-size: 14px; }

/* ---- Listas e painéis diversos ---- */
#panel-productivity .pd-metric-card strong { font-size: 30px; }
#panel-productivity .pd-habit-card h3 { font-size: 16px; }
#panel-productivity .pd-quest strong { font-size: 15px; }
#panel-productivity .pd-quest > div > span,
#panel-productivity .pd-quest > b { font-size: 13px; }
#panel-productivity .pd-achievement strong { font-size: 14px; }
#panel-productivity .pd-achievement small { font-size: 12px; }
#panel-productivity .pd-game-vitals strong { font-size: 26px; }
#panel-productivity .pd-game-vitals span { font-size: 11px; }

/* ============================================================================
   Barra lateral redimensionável e escala responsiva
   O rail era fixo em 260px. Agora tem largura ajustável por arraste, com
   padrão menor, e a área principal acompanha em vez de espremer.
   ========================================================================= */
#panel-productivity .pd-workspace {
    /* Padrão menor que os 260px antigos; o JS sobrescreve com o valor salvo. */
    --pd-rail: 220px;
    --pd-detail: clamp(320px, 26vw, 420px);
    grid-template-columns: var(--pd-rail) minmax(0, 1fr);
}

/* Alça de redimensionar: faixa fina na borda do rail, visível só ao mirar. */
@media (min-width: 821px) {
    #panel-productivity .pd-rail { position: relative; }
}
#panel-productivity .pd-rail__resize {
    position: absolute;
    z-index: 10;
    inset: 0 -3px 0 auto;
    width: 7px;
    background: transparent;
    cursor: col-resize;
    touch-action: none;
}
#panel-productivity .pd-rail__resize::after {
    position: absolute;
    inset: 0 auto 0 3px;
    width: 2px;
    border-radius: 999px;
    background: var(--accent);
    opacity: 0;
    transition: opacity 120ms ease;
    content: "";
}
#panel-productivity .pd-rail__resize:hover::after,
#panel-productivity .pd-rail__resize:focus-visible::after,
#panel-productivity .pd-workspace.is-resizing .pd-rail__resize::after { opacity: 1; }
#panel-productivity .pd-rail__resize:focus-visible { outline: none; }

/* Durante o arraste: sem seleção de texto e sem transição atrapalhando. */
#panel-productivity .pd-workspace.is-resizing { user-select: none; cursor: col-resize; }
#panel-productivity .pd-workspace.is-resizing * { pointer-events: none; }
#panel-productivity .pd-workspace.is-resizing .pd-rail__resize { pointer-events: auto; }

/* Rail estreito: o texto some antes de espremer, e sobra só o ícone. */
#panel-productivity .pd-rail { container-type: inline-size; container-name: pd-rail; }
@container pd-rail (max-width: 200px) {
    #panel-productivity .pd-nav__item { padding: 0 6px; font-size: 13px; }
    #panel-productivity .pd-player-card { grid-template-columns: 36px minmax(0,1fr); }
    #panel-productivity .pd-player-card__streak { display: none; }
    #panel-productivity .pd-capture-btn kbd { display: none; }
    #panel-productivity .pd-rail__footer > span { display: none; }
}

/* A calha agora vem de --pd-gutter, compartilhada com o header. */

/* Em telas médias o detalhe vira sobreposição — já era assim, mas agora o
   rail encolhe antes disso, ganhando espaço para a lista. */
@media (max-width: 1180px) {
    #panel-productivity .pd-workspace { --pd-rail: clamp(180px, 18vw, 220px); }
}

/* ============================================================================
   Estados vazios
   Estavam espalhados: 360–440px de altura mínima, 56–60px de padding e
   margens soltas em cada filho, o que deixava ícone, título, texto e botão
   distantes uns dos outros. Vira um bloco coeso com gap único.
   ========================================================================= */
#panel-productivity .pd-empty {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 6px;
    min-height: 220px;
    padding: 28px 24px;
}
#panel-productivity .pd-empty__icon {
    width: 44px;
    height: 44px;
    margin-bottom: 4px;
    border-radius: 13px;
}
#panel-productivity .pd-empty__icon svg { width: 20px; height: 20px; }
#panel-productivity .pd-empty h2 { margin: 0; font-size: 16px; font-weight: 620; letter-spacing: -.015em; }
#panel-productivity .pd-empty p {
    max-width: 320px;
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
}
#panel-productivity .pd-empty .pd-primary-btn { margin-top: 10px; }

/* Mesmo tratamento no estado vazio das views PARA, que era ainda mais espaçado. */
#panel-productivity .pd-para-empty {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 6px;
    min-height: 260px;
    padding: 32px 24px;
}
#panel-productivity .pd-para-empty > div {
    width: 48px;
    height: 48px;
    margin-bottom: 4px;
    border-radius: 14px;
}
#panel-productivity .pd-para-empty h3 { margin: 0; font-size: 17px; letter-spacing: -.015em; }
#panel-productivity .pd-para-empty p { max-width: 380px; margin: 0; font-size: 13px; line-height: 1.45; }
#panel-productivity .pd-para-empty .pd-primary-btn { margin-top: 10px; }

/* O bloco de título era espremido pela toolbar: "Make space for what matters."
   quebrava em quatro linhas numa coluna estreita. O título ganha prioridade de
   espaço, e a toolbar cede — ela já encolhe bem, o texto não. */
#panel-productivity .pd-header { flex-wrap: wrap; gap: 10px 16px; }
#panel-productivity .pd-header__title { flex: 1 1 260px; min-width: 0; }
#panel-productivity .pd-header__title p {
    max-width: 46ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Sem wrap: deixar quebrar jogava o "Add task" para uma segunda linha.
   A toolbar fica numa linha só e a busca é quem cede largura. */
#panel-productivity .pd-header__actions { flex: 0 1 auto; flex-wrap: nowrap; justify-content: flex-end; }
#panel-productivity .pd-header__actions > .pd-search { flex: 0 1 auto; min-width: 120px; }
#panel-productivity .pd-header__actions > .pd-search input { min-width: 0; }
/* Abaixo disso o subtítulo é o primeiro a sair: é contexto, não informação. */
@media (max-width: 1100px) {
    #panel-productivity .pd-header__title p { display: none; }
}

/* Bandeiras de prioridade no dropdown (padrão Todoist).
   O <option> nativo não renderiza SVG; quem desenha é o fm-select, habilitado
   nesse campo por data-fm-select-force. */
#panel-productivity .fm-select__flag {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    max-width: none;
}
/* O contorno do P4 recua: "sem prioridade" não deve competir com as demais. */
#panel-productivity .fm-select__flag[stroke="currentColor"] { color: var(--muted); opacity: .6; }
#panel-productivity .fm-select__trigger { min-height: var(--pd-ctrl, 32px); font-size: 14px; }
#panel-productivity .fm-select__option { font-size: 14px; }

/* ==========================================================================
   Projeto: vínculo com área, ciclo de vida e sinais de saúde
   ========================================================================== */

/* Agrupamento por área na visão de projetos */
/* Com grupos, o container externo vira bloco: cada área ocupa uma faixa. */
#panel-productivity .pd-container-grid.is-grouped { display: block; }

#panel-productivity .pd-area-group + .pd-area-group { margin-top: 26px; }
#panel-productivity .pd-area-group__head {
    display: flex; align-items: center; gap: 9px;
    min-height: 30px; margin-bottom: 10px; padding: 0 2px;
}
#panel-productivity .pd-area-group__head h3 {
    margin: 0; color: var(--text); font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
}
#panel-productivity .pd-area-group__head span {
    min-width: 20px; padding: 1px 7px; border-radius: 999px;
    background: var(--soft); color: var(--muted);
    font-size: 11.5px; font-variant-numeric: tabular-nums; text-align: center;
}

/* Etiqueta da área dentro do card do projeto */
#panel-productivity .pd-area-tag { color: var(--secondary); font-weight: 500; }

/* Estado do projeto */
#panel-productivity .pd-lifecycle {
    flex-shrink: 0; align-self: flex-start;
    padding: 2px 8px; border-radius: 999px;
    background: var(--soft); color: var(--secondary);
    font-size: 11px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap;
}
#panel-productivity .pd-lifecycle[data-state="planning"] { background: color-mix(in srgb, #8b5cf6 16%, transparent); color: #8b5cf6; }
#panel-productivity .pd-lifecycle[data-state="active"]   { background: color-mix(in srgb, #22c55e 16%, transparent); color: #22c55e; }
#panel-productivity .pd-lifecycle[data-state="paused"]   { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #f59e0b; }
#panel-productivity .pd-lifecycle[data-state="done"]     { background: var(--soft); color: var(--muted); }

/* Próxima ação — a linha que responde "por onde eu continuo" */
#panel-productivity .pd-next-action {
    display: flex; align-items: center; gap: 8px;
    width: 100%; min-height: 34px; margin: 2px 0 10px; padding: 0 10px;
    border: 1px solid var(--macos-hairline, var(--line));
    border-radius: var(--macos-control-radius, 7px);
    background: var(--elevated); color: var(--text);
    font: inherit; font-size: 12.5px; text-align: left; cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}
[data-theme="light"] #panel-productivity .pd-next-action { background: var(--surface); }
#panel-productivity .pd-next-action:hover { border-color: var(--line-strong); background: var(--hover); }
#panel-productivity .pd-next-action > svg { flex-shrink: 0; color: var(--accent); }
#panel-productivity .pd-next-action > span {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#panel-productivity .pd-next-action > b {
    flex-shrink: 0; color: var(--muted); font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums;
}
#panel-productivity .pd-next-action > b.is-overdue { color: var(--bad); }
/* Sem tarefas e tudo-concluído não são botões: não levam a lugar nenhum. */
#panel-productivity .pd-next-action.is-empty,
#panel-productivity .pd-next-action.is-done {
    border-style: dashed; background: transparent; color: var(--muted); cursor: default;
}
#panel-productivity .pd-next-action.is-empty:hover,
#panel-productivity .pd-next-action.is-done:hover { border-color: var(--macos-hairline, var(--line)); background: transparent; }
#panel-productivity .pd-next-action.is-done > svg { color: var(--ok); }
#panel-productivity .pd-next-action.is-empty > svg { color: var(--muted); }

/* Sinal de saúde no rodapé de métricas */
#panel-productivity .pd-health {
    margin-left: auto; padding: 1px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 600; white-space: nowrap;
}
#panel-productivity .pd-health[data-tone="ok"]      { background: var(--soft); color: var(--secondary); }
#panel-productivity .pd-health[data-tone="stalled"] { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #f59e0b; }
#panel-productivity .pd-health[data-tone="risk"]    { background: color-mix(in srgb, #ef4444 16%, transparent); color: #ef4444; }

/* ==========================================================================
   Modal de projeto / área / recurso
   ========================================================================== */

/* Campos escondidos por tipo (deadline e XP só existem em projeto) deixavam
   buraco numa grade fixa de 3 colunas — o "Color" sozinho ocupava um terço e
   o resto ficava vazio. auto-fit reparte só entre os visíveis. */
#panel-productivity .pd-container-modal .pd-container-fields {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

/* Nome: o emoji e o campo têm de dividir a mesma linha de base. */
#panel-productivity .pd-container-modal .pd-title-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}
/* stretch + aspect-ratio em vez de altura fixa: o input é estilizado em vários
   pontos do arquivo e já mediu 28 e 32px conforme a camada que vence. Assim o
   botão acompanha, em vez de eu perseguir o número. */
#panel-productivity .pd-container-modal .pd-title-row > .pd-emoji-btn {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    aspect-ratio: 1;
    border-radius: var(--macos-control-radius, 7px);
    font-size: 15px;
    line-height: 1;
}
#panel-productivity .pd-container-modal .pd-title-row > input { flex: 1; min-width: 0; }

/* Cor vive na linha do nome, junto do emoji: as três compõem a identidade do
   item. Sozinha numa linha própria ela esticava para a largura toda do modal
   e virava uma barra azul gigante. */
#panel-productivity .pd-container-modal .pd-title-row > input[type="color"] {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    aspect-ratio: 1;
    padding: 3px;
    border: 1px solid var(--macos-hairline, var(--line));
    border-radius: var(--macos-control-radius, 7px);
    background: var(--elevated);
    box-shadow: none;
    cursor: pointer;
}
[data-theme="light"] #panel-productivity .pd-container-modal .pd-title-row > input[type="color"] { background: var(--surface); }
#panel-productivity .pd-container-modal .pd-title-row > input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
#panel-productivity .pd-container-modal .pd-title-row > input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: calc(var(--macos-control-radius, 7px) - 4px);
}

/* Contexto: três linhas bastam. rows=5 empurrava o rodapé para fora da vista
   em telas baixas e deixava o modal com cara de formulário vazio. */
#panel-productivity .pd-container-modal .pd-field textarea {
    min-height: 68px;
    max-height: 180px;
    resize: vertical;
}

/* Ritmo vertical: rótulo colado no campo, campos respirando entre si. */
#panel-productivity .pd-container-modal form { gap: 14px; }
#panel-productivity .pd-container-modal .pd-field { gap: 5px; }

/* Catálogo completo: a lista cresceu de 70 para 1914, então o painel precisa
   de altura para valer a pena rolar, e de um estado de "nada encontrado". */
#panel-productivity .pd-emoji__scroll { max-height: 320px; }
#panel-productivity .pd-emoji__empty {
    margin: 0; padding: 18px 12px;
    color: var(--muted); font-size: 12.5px; text-align: center;
}

/* ==========================================================================
   Sinalização por ícone: grupos, estados e chips
   ========================================================================== */

/* Glifo do cabeçalho de grupo. Herda a cor do contexto, exceto quando o
   grupo carrega tom próprio (vencidas) ou cor de bandeira (prioridade). */
#panel-productivity .pd-group-glyph {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    color: var(--muted);
}
#panel-productivity .pd-group-glyph[data-tone="risk"] { color: var(--bad); }
#panel-productivity .pd-group-glyph[style*="--glyph"] svg { color: var(--glyph); }
/* P4 não tem cor: bandeira vazada, como no seletor de prioridade. */
#panel-productivity .pd-group-glyph[style*="--glyph:currentColor"] { color: var(--muted); }

#panel-productivity .pd-task-group__head > .pd-group-glyph,
#panel-productivity .pd-task-group__head > .pd-item-icon { margin-right: -3px; }
#panel-productivity .pd-board-col__head > .pd-group-glyph { margin-right: -2px; }
#panel-productivity .pd-area-group__head > .pd-group-glyph,
#panel-productivity .pd-area-group__head > .pd-item-icon { flex-shrink: 0; }

/* Chips do resumo: o ícone substituiu a bolinha genérica. */
#panel-productivity .pd-summary__stat > svg { flex-shrink: 0; }

/* Estado e saúde do projeto passam a ter ícone antes do texto. */
#panel-productivity .pd-lifecycle,
#panel-productivity .pd-health {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
#panel-productivity .pd-lifecycle > svg,
#panel-productivity .pd-health > svg { flex-shrink: 0; }

/* Rótulos da barra de filtros ganham ícone. */
#panel-productivity .pd-filterbar > label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
#panel-productivity .pd-filterbar > label > svg { flex-shrink: 0; color: var(--muted); }

/* Rótulos de campo nos modais ganham ícone. O .pd-field é grid, então o
   rótulo precisa ser flex por conta própria para o ícone ficar na linha. */
#panel-productivity .pd-capture__fields > label > span:first-child,
#panel-productivity .pd-container-modal .pd-field > span:first-child,
#panel-productivity .pd-field__label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
#panel-productivity .pd-capture__fields > label > span:first-child > svg,
#panel-productivity .pd-container-modal .pd-field > span:first-child > svg,
#panel-productivity .pd-field__label > i > svg {
    flex-shrink: 0;
    color: var(--muted);
}
#panel-productivity .pd-field__label > i { display: inline-flex; }
#panel-productivity .pd-field__label > b { font: inherit; }

/* ==========================================================================
   Metas: lista de projetos dentro do card
   ========================================================================== */
#panel-productivity .pd-goal-projects {
    display: grid;
    gap: 3px;
    margin: 2px 0 10px;
}
#panel-productivity .pd-goal-project {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    min-height: 26px;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--secondary);
    font: inherit;
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
    transition: background 90ms ease, color 90ms ease;
}
#panel-productivity .pd-goal-project:hover { background: var(--hover); color: var(--text); }
#panel-productivity .pd-goal-project > svg { flex-shrink: 0; color: var(--muted); }
#panel-productivity .pd-goal-project > span {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Projeto concluído: risco no texto, como na tarefa feita. */
#panel-productivity .pd-goal-project.is-done > svg { color: var(--ok); }
#panel-productivity .pd-goal-project.is-done > span { color: var(--muted); text-decoration: line-through; }

/* ==========================================================================
   Caminho da meta — marcos (Ultimate Brain)
   ========================================================================== */
#panel-productivity .pd-path__hint {
    margin: 4px 0 10px;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.4;
    text-transform: none;
}
#panel-productivity .pd-path {
    display: grid;
    gap: 4px;
    margin-bottom: 8px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}
#panel-productivity .pd-path__step {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 4px;
}
#panel-productivity .pd-path__check,
#panel-productivity .pd-path__remove {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}
#panel-productivity .pd-path__check:hover,
#panel-productivity .pd-path__remove:hover { background: var(--hover); color: var(--text); }
#panel-productivity .pd-path__check:disabled { opacity: .45; cursor: default; }
#panel-productivity .pd-path__step.is-done .pd-path__check { color: var(--ok); }
#panel-productivity .pd-field .pd-path__name {
    width: 100%;
    min-width: 0;
    height: 32px;
    min-height: 32px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13.5px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}
#panel-productivity .pd-field .pd-path__name:hover,
#panel-productivity .pd-field .pd-path__name:focus {
    border-color: var(--border, var(--line));
    background: var(--surface);
    outline: none;
}
#panel-productivity .pd-path__step.is-done .pd-path__name {
    color: var(--muted);
    text-decoration: line-through;
}
#panel-productivity .pd-path__add {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}
#panel-productivity .pd-field .pd-path__add input {
    width: 100%;
    min-width: 0;
    height: var(--pd-control-h, 34px);
    min-height: var(--pd-control-h, 34px);
    padding: 0 10px;
    border: 1px solid var(--border, var(--line));
    border-radius: var(--pd-control-radius, 9px);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 13.5px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}
#panel-productivity .pd-path__add input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent, #4f7cff) 55%, var(--border));
}

#panel-productivity .pd-goal-path {
    display: grid;
    gap: 0;
    margin: 4px 0 10px;
    padding: 0;
    list-style: none;
}
#panel-productivity .pd-goal-step { min-width: 0; }
#panel-productivity .pd-goal-step__hit {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    width: 100%;
    padding: 1px 4px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--secondary);
    font: inherit;
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
}
#panel-productivity .pd-goal-step__hit:hover { background: var(--hover); color: var(--text); }
#panel-productivity .pd-goal-step__rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 22px;
    padding-top: 4px;
}
#panel-productivity .pd-goal-step__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid var(--muted);
    background: transparent;
    flex-shrink: 0;
}
#panel-productivity .pd-goal-step__line {
    flex: 1;
    width: 1.5px;
    min-height: 10px;
    margin-top: 3px;
    background: var(--border);
}
#panel-productivity .pd-goal-step.is-done .pd-goal-step__dot {
    border-color: var(--ok);
    background: var(--ok);
}
#panel-productivity .pd-goal-step.is-done .pd-goal-step__name {
    color: var(--muted);
    text-decoration: line-through;
}
#panel-productivity .pd-goal-step.is-next .pd-goal-step__dot {
    border-color: var(--accent, #4f7cff);
    background: var(--accent, #4f7cff);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #4f7cff) 22%, transparent);
}
#panel-productivity .pd-goal-step.is-next .pd-goal-step__name {
    color: var(--text);
    font-weight: 600;
}
#panel-productivity .pd-goal-step__name {
    min-width: 0;
    padding: 2px 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#panel-productivity .pd-goal-step--more {
    padding: 0 4px 2px 24px;
    color: var(--muted);
    font-size: 12px;
}

/* ==========================================================================
   Card de container: alinhamento e rodapé
   ========================================================================== */

/* O recuo de 8px estava em head/meta/actions mas não no parágrafo nem na
   próxima ação — cada bloco começava numa coluna diferente. O padding do
   card já define a margem; a coluna passa a ser uma só. */
#panel-productivity .pd-container-card__head,
#panel-productivity .pd-container-card__meta,
#panel-productivity .pd-container-card__actions,
#panel-productivity .pd-container-card > p,
#panel-productivity .pd-container-progress,
#panel-productivity .pd-next-action,
#panel-productivity .pd-goal-projects,
#panel-productivity .pd-goal-path { margin-left: 0; }
#panel-productivity .pd-container-card__actions { margin-top: 2px; }

/* Uma linha só. Antes, com wrap, a lixeira (que tem margin-left:auto) caía
   sozinha numa segunda linha assim que o card ficava estreito. */
#panel-productivity .pd-container-card__actions {
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
}
#panel-productivity .pd-container-card__tools {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}
/* Ferramentas são ícone: sem fundo em repouso, para o "+ Tarefa" ser o único
   botão com peso visual. */
#panel-productivity .pd-container-card__tools button {
    display: grid;
    place-items: center;
    width: 26px;
    min-height: 26px;
    padding: 0;
    background: transparent;
    color: var(--muted);
}
#panel-productivity .pd-container-card__tools button:hover { background: var(--hover); color: var(--text); }
#panel-productivity .pd-container-card__tools .pd-container-card__danger { margin-left: 0; }
#panel-productivity .pd-container-card__tools .pd-container-card__danger:hover { background: var(--bad-bg); color: var(--bad); }

/* Barra de progresso continua legível em 0% — antes sumia. */
#panel-productivity .pd-container-progress {
    height: 4px;
    border-radius: 999px;
    background: var(--soft);
    overflow: hidden;
}

/* Subtítulo do card numa linha só: quebrando, deixava o separador "·"
   pendurado no fim da primeira linha. */
#panel-productivity .pd-container-card__id small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   Card estilo Notion: identidade limpa, metadados discretos
   ========================================================================== */

/* Emoji sem caixa colorida. A caixa só existe quando não há emoji e o card
   cai na inicial — aí ela serve para dar forma à letra. */
#panel-productivity .pd-container-card__avatar:has(.pd-item-icon) {
    width: auto;
    min-width: 26px;
    background: transparent;
    font-size: 20px;
    line-height: 1;
}
/* Alinha o emoji com a primeira linha do título, não com o centro do bloco. */
#panel-productivity .pd-container-card__head { align-items: flex-start; }
#panel-productivity .pd-container-card__avatar { margin-top: 0; }

/* Estado deixou de ser pílula e virou marca na linha de metadados: o título
   passa a ter a largura inteira, em vez de truncar por causa dela. */
#panel-productivity .pd-container-card__id small .pd-lifecycle {
    display: inline-flex;
    gap: 3px;
    padding: 0;
    background: none;
    font-size: inherit;
    font-weight: 500;
    vertical-align: baseline;
}
#panel-productivity .pd-container-card__id small .pd-lifecycle > svg { width: 11px; height: 11px; }

/* Percentual discreto: informa sem competir com o nome. */
#panel-productivity .pd-container-card__pct {
    margin-top: 1px;
    color: var(--secondary);
    font-size: 13px;
    font-weight: 600;
}
#panel-productivity .pd-container-card__pct i { font-size: 10px; }

/* Título com espaço para respirar. */
#panel-productivity .pd-container-card__id h3 { font-size: 14.5px; line-height: 1.3; }
#panel-productivity .pd-container-card__id { gap: 2px; }

/* ==========================================================================
   Seletor de projetos da meta
   ========================================================================== */
#panel-productivity .pd-picklist {
    display: grid;
    gap: 6px;
    padding: 7px;
    border: 1px solid var(--macos-hairline, var(--line));
    border-radius: var(--macos-control-radius, 7px);
    background: var(--elevated);
}
[data-theme="light"] #panel-productivity .pd-picklist { background: var(--surface); }
#panel-productivity .pd-picklist__search {
    min-height: 26px;
    padding: 0 8px;
    border: 1px solid var(--macos-hairline, var(--line));
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 12.5px;
}
#panel-productivity .pd-picklist__search[hidden] { display: none; }
/* Teto para a lista não empurrar o rodapé do modal para fora da vista. */
#panel-productivity .pd-picklist__items {
    display: grid;
    gap: 1px;
    max-height: 132px;
    overflow-y: auto;
    scrollbar-width: thin;
}
#panel-productivity .pd-picklist__item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    padding: 0 7px;
    border-radius: 6px;
    color: var(--text);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}
#panel-productivity .pd-picklist__item:hover { background: var(--hover); }
#panel-productivity .pd-picklist__item[hidden] { display: none; }
/* A regra geral de input do modal (altura, padding, largura cheia) também
   pegava a caixinha e ela ocupava a linha inteira, zerando o nome ao lado. */
#panel-productivity .pd-picklist__item input[type="checkbox"] {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    accent-color: var(--accent);
}
#panel-productivity .pd-picklist__item > span {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Dono atual, quando o projeto já pertence a outra meta ou área. */
#panel-productivity .pd-picklist__item > em {
    flex-shrink: 0;
    color: var(--muted);
    font-size: 11.5px;
    font-style: normal;
}
#panel-productivity .pd-picklist__empty {
    margin: 0; padding: 10px 7px;
    color: var(--muted); font-size: 12.5px; font-weight: 400; text-transform: none; letter-spacing: 0;
}

/* ==========================================================================
   Rodapé dos modais
   ========================================================================== */

/* Os botões estavam num contêiner com flex-wrap: wrap. Assim que o modal
   estreitava, "Cancel" e "Save changes" empilhavam um sobre o outro enquanto
   a dica ao lado quebrava em duas linhas — daí a sensação de desalinho.
   Botão de ação não quebra linha: quem cede espaço é o texto. */
#panel-productivity .pd-modal__footer > div {
    flex-wrap: nowrap;
    flex-shrink: 0;
}
#panel-productivity .pd-modal__footer > span {
    display: -webkit-box;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Prioridade na linha da tarefa. A cor vinha só da barra na borda esquerda,
   que sinaliza que existe prioridade mas não diz qual. */
#panel-productivity .pd-prio {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
}
#panel-productivity .pd-prio > svg { flex-shrink: 0; display: block; width: 11px; height: 11px; max-width: none; }
#panel-productivity .pd-prio[data-p="1"] { background: color-mix(in srgb, #ef4444 14%, transparent); color: #ef4444; }
#panel-productivity .pd-prio[data-p="2"] { background: color-mix(in srgb, #f59e0b 14%, transparent); color: #f59e0b; }
#panel-productivity .pd-prio[data-p="3"] { background: color-mix(in srgb, #3b82f6 14%, transparent); color: #3b82f6; }
[data-theme="dark"] #panel-productivity .pd-prio[data-p="1"] { background: color-mix(in srgb, #f87171 22%, transparent); color: #fca5a5; }
[data-theme="dark"] #panel-productivity .pd-prio[data-p="2"] { background: color-mix(in srgb, #fb923c 24%, transparent); color: #fdba74; }
[data-theme="dark"] #panel-productivity .pd-prio[data-p="3"] { background: color-mix(in srgb, #60a5fa 22%, transparent); color: #93c5fd; }

/* Emoji dentro do título, no fluxo do texto — vertical-align opera
   sobre a linha de base das letras, não sobre uma caixa flex à parte. */
#panel-productivity .pd-task__title > .pd-item-icon {
    display: inline-block;
    width: auto;
    height: auto;
    margin-right: 0.35em;
    font-size: 1.05em;
    line-height: 1;
    vertical-align: -0.22em;
    transform: none;
}
#panel-productivity .pd-task__title {
    line-height: var(--pd-task-line);
}
#panel-productivity .pd-board .pd-task__title {
    height: auto;
    line-height: 1.35;
}
#panel-productivity .pd-task__meta svg.pd-icon {
    display: block;
    flex-shrink: 0;
    width: 12px;
    height: 12px;
}
#panel-productivity .pd-task__meta .pd-meta-project {
    gap: 5px;
}
#panel-productivity .pd-task__meta .pd-project-dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    font-style: normal;
}
#panel-productivity .pd-task__meta .pd-tag,
#panel-productivity .pd-task__meta .pd-check-progress {
    height: 18px;
    padding: 0 7px;
    font-size: 11px;
    box-sizing: border-box;
}
/* ── Render só do que está na viewport ─────────────────────────────────────
   Com 500 tarefas a lista tem dezenas de grupos; sem isto o browser calcula
   estilo e layout de todos em cada repaint, mesmo dos que estão a três telas
   de distância. content-visibility: auto pula render dos grupos fora da
   viewport; contain-intrinsic-size reserva uma altura estimada para o scroll
   não pular quando um grupo entra/sai do skip. As linhas (.pd-task) já têm
   contain: layout paint style — isto completa o par no nível do grupo. */
#panel-productivity .pd-task-group {
    content-visibility: auto;
    contain-intrinsic-size: auto 340px;
}

/* Colunas do board: mesmo raciocínio, cada card fora da viewport da coluna
   (rolagem vertical interna) pode ser pulado. O board reusa .pd-task como
   card dentro de .pd-board-col__list. */
#panel-productivity .pd-board-col__list > .pd-task {
    content-visibility: auto;
    contain-intrinsic-size: auto 96px;
}

/* Fase 1+ produtividade */
#panel-productivity .pd-capture-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
#panel-productivity .pd-capture-chip { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2, rgba(255,255,255,.08)); border: 1px solid var(--border, rgba(255,255,255,.12)); }
#panel-productivity .pd-capture-chip.is-warn { border-color: #f59e0b; color: #f59e0b; }
#panel-productivity .pd-task.is-focused,
#panel-productivity .pd-task:focus,
#panel-productivity .pd-task:focus-visible {
  outline: none;
  box-shadow: none;
}
#panel-productivity .pd-frog { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; margin-bottom: 12px; border-radius: 14px; background: linear-gradient(135deg, rgba(74,222,128,.12), rgba(79,124,255,.1)); border: 1px solid rgba(74,222,128,.25); }
#panel-productivity .pd-frog h2 { margin: 0 0 4px; font-size: 15px; }
#panel-productivity .pd-frog p { margin: 0; opacity: .85; font-size: 13px; }
#panel-productivity .pd-frog__actions { display: flex; gap: 8px; flex-wrap: wrap; }
#panel-productivity .pd-frog__actions button { border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 12px; }
#panel-productivity .pd-frog__actions button.is-active { background: var(--accent); color: #fff; border-color: transparent; }
#panel-productivity .pd-timer__phase { text-align: center; font-size: 12px; opacity: .8; margin: 4px 0 0; }
#panel-productivity .pd-triage { max-width: 640px; margin: 0 auto; padding: 24px; border-radius: 16px; background: var(--surface-1); border: 1px solid var(--border); }
#panel-productivity .pd-table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: 12px; }
#panel-productivity .pd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
#panel-productivity .pd-idea-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#panel-productivity .pd-idea-column { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--elevated) 70%, var(--surface)); }
#panel-productivity .pd-idea-column[data-col="ideas"] { border-top: 2px solid var(--accent); }
#panel-productivity .pd-idea-column[data-col="exploring"] { border-top: 2px solid var(--warn); }
#panel-productivity .pd-idea-column[data-col="committed"] { border-top: 2px solid var(--ok); }
#panel-productivity .pd-idea-column__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
#panel-productivity .pd-idea-column__head h3 { margin: 0; font-size: 13px; font-weight: 650; letter-spacing: -.01em; }
#panel-productivity .pd-idea-column__count { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; text-align: center; }
#panel-productivity .pd-idea-column__list { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 88px; }
#panel-productivity .pd-idea-column__empty { margin: auto 0; color: var(--muted); font-size: 12.5px; line-height: 1.4; text-align: center; }
#panel-productivity .pd-idea-card { margin: 0; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 13px; }
#panel-productivity .pd-idea-card p { margin: 0; line-height: 1.45; }
#panel-productivity .pd-idea-card__actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
#panel-productivity .pd-idea-card__actions button { min-height: 22px; padding: 0 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--elevated); color: var(--secondary); font-size: 11px; cursor: pointer; }
#panel-productivity .pd-idea-card__actions button:hover { border-color: var(--accent); color: var(--accent); }
#panel-productivity .pd-idea-card__del { width: 22px; padding: 0; color: var(--muted); }
#panel-productivity .pd-idea-card__del:hover { border-color: var(--bad); color: var(--bad); }
#panel-productivity .pd-cycle-card { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--elevated); }
#panel-productivity .pd-cycle-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
#panel-productivity .pd-cycle-card header strong { display: block; margin-top: 2px; font-size: 14.5px; letter-spacing: -.015em; }
#panel-productivity .pd-cycle-card > p { margin: 0; color: var(--secondary); font-size: 13px; line-height: 1.45; }
#panel-productivity .pd-cycle-roadmap { margin: 0; padding-left: 16px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
#panel-productivity .pd-cycle-form { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; margin-top: 12px; }
#panel-productivity .pd-cycle-form input[type="text"], #panel-productivity .pd-idea-form input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--surface); }
#panel-productivity .pd-idea-form { display: flex; gap: 6px; margin: 0; }
#panel-productivity .pd-idea-form .pd-mini-btn { width: 32px; height: 32px; border: 1px solid var(--line); background: var(--surface); }
#panel-productivity .pd-gantt__bar.is-blocked { opacity: .55; border: 1px dashed rgba(239,68,68,.6); }
#panel-productivity .pd-table-edit { width: 100%; font: inherit; padding: 4px 6px; border: 1px solid var(--accent); border-radius: 6px; background: var(--surface); }
#panel-productivity .pd-estimate-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
#panel-productivity .pd-estimate-row.is-over em { color: #f59e0b; }
#panel-productivity .pd-estimate-row.is-under em { color: #22c55e; }

#panel-productivity .pd-rituals__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
#panel-productivity .pd-rituals__head h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -.02em;
}
#panel-productivity .pd-rituals__head .pd-eyebrow { margin-bottom: 3px; }
#panel-productivity .pd-rituals__head .pd-secondary-btn {
    min-height: 32px;
    padding: 0 12px;
    font-size: 13px;
}
#panel-productivity .pd-idea-board,
#panel-productivity .pd-cycles,
#panel-productivity .pd-retro {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    height: 100%;
}
#panel-productivity .pd-idea-columns { flex: 1 1 auto; }
#panel-productivity .pd-retro { margin-bottom: 0; }
#panel-productivity .pd-retro-grid { display: grid; gap: 10px; }
#panel-productivity .pd-retro-field {
    display: grid;
    gap: 3px;
    padding: 10px 12px 12px;
    border: 1px solid var(--line);
    border-top-width: 2px;
    border-radius: 12px;
    background: var(--elevated);
}
#panel-productivity .pd-retro-field[data-tone="start"] { border-top-color: var(--ok); }
#panel-productivity .pd-retro-field[data-tone="stop"] { border-top-color: var(--bad); }
#panel-productivity .pd-retro-field[data-tone="continue"] { border-top-color: var(--accent); }
#panel-productivity .pd-retro-field span { font-size: 13px; font-weight: 650; }
#panel-productivity .pd-retro-field small { color: var(--muted); font-size: 11.5px; }
#panel-productivity .pd-retro-field textarea {
    width: 100%;
    min-height: 84px;
    margin-top: 6px;
    padding: 10px 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-size: 13.5px;
    line-height: 1.45;
    resize: vertical;
}
#panel-productivity .pd-retro__foot { display: flex; justify-content: flex-end; }
#panel-productivity .pd-cycle-list { display: grid; gap: 10px; flex: 1 1 auto; align-content: start; }
#panel-productivity .pd-cycles__empty {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 12px 8px 4px;
    text-align: center;
}
#panel-productivity .pd-cycles__empty h3 { margin: 0; font-size: 14.5px; }
#panel-productivity .pd-cycles__empty p {
    margin: 0;
    max-width: 32ch;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}
@media (max-width: 1280px) {
    #panel-productivity .pd-retro-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
    #panel-productivity .pd-retro-grid,
    #panel-productivity .pd-review-grid { grid-template-columns: 1fr; }
}

#panel-productivity .pd-day-form,
#panel-productivity .pd-day-side,
#panel-productivity .pd-review {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    height: 100%;
}
#panel-productivity .pd-day-form .pd-routine-field:has(textarea) { flex: 1; }
#panel-productivity .pd-routine-field { display: grid; gap: 6px; }
#panel-productivity .pd-routine-field span { font-size: 13px; font-weight: 650; }
#panel-productivity .pd-routine-field :is(input, textarea) {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--elevated);
    color: var(--text);
    font-size: 14px;
    line-height: 1.45;
    resize: vertical;
}
#panel-productivity .pd-day-side { padding: 20px; }
#panel-productivity .pd-day-frog {
    display: grid;
    gap: 4px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--ok) 28%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--ok) 8%, var(--surface));
    text-align: left;
    cursor: pointer;
}
#panel-productivity .pd-day-frog strong { font-size: 15px; letter-spacing: -.015em; }
#panel-productivity .pd-day-frog small { color: var(--muted); font-size: 12px; }
#panel-productivity .pd-day-side__list { display: grid; flex: 1; align-content: start; }
#panel-productivity .pd-day-side__empty {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}
#panel-productivity .pd-retro-field[data-tone="next"] { border-top-color: var(--secondary); }
#panel-productivity .pd-queue-item {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 12px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
}
#panel-productivity .pd-queue-item__mark {
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--line-strong);
    border-radius: 50%;
    background: transparent;
}
#panel-productivity .pd-queue-item__copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
#panel-productivity .pd-queue-item__copy strong {
    overflow: hidden;
    font-size: inherit;
    font-weight: 600;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#panel-productivity .pd-queue-item__copy small {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#panel-productivity .pd-queue-item__now {
    flex-shrink: 0;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
#panel-productivity .pd-focus-side__count {
    color: var(--muted);
    font-size: 13px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}
#panel-productivity .pd-queue-item:hover { background: var(--hover); }
#panel-productivity .pd-queue-item.is-active {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--text);
    font-weight: 400;
}
#panel-productivity .pd-queue-item.is-active .pd-queue-item__mark {
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: inset 0 0 0 3px var(--elevated, var(--surface));
}
#panel-productivity .pd-focus-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
#panel-productivity .pd-focus-card .pd-rituals__head,
#panel-productivity .pd-focus-side .pd-rituals__head {
    align-self: stretch;
    text-align: left;
}
#panel-productivity .pd-focus-card__task {
    max-width: 28ch;
    margin: 8px 0 0;
    color: var(--text);
    font-size: 18px;
    font-weight: 650;
    letter-spacing: -.02em;
    line-height: 1.3;
}
#panel-productivity .pd-focus-side { display: flex; flex-direction: column; gap: 12px; }
#panel-productivity .pd-focus-side [data-pd-focus-queue] { flex: 1; min-height: 80px; }
#panel-productivity .pd-habits-view .pd-rituals__head { margin-bottom: 16px; }
#panel-productivity .pd-habits-view .pd-rituals__head .pd-secondary-btn { flex: 0 0 auto; }
#panel-productivity .pd-insights-view:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
#panel-productivity .pd-insights-view > .pd-rituals__head { margin-bottom: 2px; }
#panel-productivity .pd-bars:has(.pd-panel-empty) {
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 140px;
    padding-top: 0;
}
#panel-productivity .pd-insights-view select {
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
}
#panel-productivity .pd-insight-panels .pd-rituals__head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 650;
}
#panel-productivity .pd-caldav-open { margin-top: auto; align-self: start; }
#panel-productivity .pd-panel-empty {
    margin: auto;
    padding: 24px 8px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
}
#panel-productivity .pd-streak {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    margin-top: 16px;
}
#panel-productivity .pd-streak span {
    display: grid;
    gap: 5px;
    justify-items: center;
    height: auto;
    background: transparent;
}
#panel-productivity .pd-streak span i {
    display: block;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: var(--soft);
}
#panel-productivity .pd-streak span.is-done i { background: var(--ok); }
#panel-productivity .pd-streak span b {
    color: var(--muted);
    font-size: 10px;
    font-weight: 650;
}

#panel-productivity .pd-insight-panels { grid-template-columns: repeat(3, 1fr); margin-top: 0; }
@media (max-width: 1180px) { #panel-productivity .pd-insight-panels { grid-template-columns: 1fr; } }
#panel-productivity .pd-palette__item { display: flex; flex-direction: column; width: 100%; padding: 10px 14px; border: none; background: transparent; text-align: left; cursor: pointer; }
#panel-productivity .pd-palette__item.is-active { background: var(--surface-2); }

/* ============================================================================
   Cards PARA — acabamento SaaS premium
   ========================================================================= */
#panel-productivity .pd-container-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 16px;
}
#panel-productivity .pd-area-group + .pd-area-group { margin-top: 32px; }
#panel-productivity .pd-area-group__head {
    min-height: 36px;
    margin-bottom: 12px;
    padding-inline: 4px;
}
#panel-productivity .pd-area-group__head h3 {
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -.015em;
}

#panel-productivity .pd-container-card {
    isolation: isolate;
    gap: 13px;
    min-height: 286px;
    padding: 19px;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--container-color, var(--accent)) 13%, var(--macos-hairline, var(--line)));
    border-radius: 15px;
    background:
        radial-gradient(circle at 0 0, color-mix(in srgb, var(--container-color, var(--accent)) 8%, transparent), transparent 38%),
        linear-gradient(155deg, color-mix(in srgb, var(--surface) 97%, var(--container-color, var(--accent)) 3%), var(--surface));
    box-shadow:
        0 1px 2px color-mix(in srgb, #000 5%, transparent),
        0 8px 24px color-mix(in srgb, #000 5%, transparent);
    cursor: pointer;
    transform: translateY(0);
    transition: transform 180ms var(--ease), border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
#panel-productivity .pd-container-card:hover {
    border-color: color-mix(in srgb, var(--container-color, var(--accent)) 38%, var(--line));
    background:
        radial-gradient(circle at 0 0, color-mix(in srgb, var(--container-color, var(--accent)) 12%, transparent), transparent 42%),
        linear-gradient(155deg, color-mix(in srgb, var(--surface) 95%, var(--container-color, var(--accent)) 5%), var(--surface));
    box-shadow:
        0 2px 4px color-mix(in srgb, #000 6%, transparent),
        0 16px 38px color-mix(in srgb, #000 10%, transparent);
    transform: translateY(-2px);
}
#panel-productivity .pd-container-card:active { transform: translateY(-1px); }
#panel-productivity .pd-container-card::before {
    z-index: 2;
    inset: 12px auto 12px 0;
    width: 4px;
    border-radius: 0 999px 999px 0;
    opacity: 1;
    box-shadow: 0 0 18px color-mix(in srgb, var(--container-color, var(--accent)) 30%, transparent);
}
#panel-productivity .pd-container-card::after {
    position: absolute;
    z-index: -1;
    top: -70px;
    right: -70px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--container-color, var(--accent)) 5%, transparent);
    content: "";
    pointer-events: none;
}
#panel-productivity .pd-container-card.is-complete {
    border-color: color-mix(in srgb, var(--ok) 22%, var(--line));
    background:
        radial-gradient(circle at 0 0, color-mix(in srgb, var(--ok) 9%, transparent), transparent 40%),
        var(--surface);
}

#panel-productivity .pd-container-card__head {
    gap: 12px;
    min-height: 48px;
}
#panel-productivity .pd-container-card__avatar {
    width: 42px;
    height: 42px;
    border: 1px solid color-mix(in srgb, var(--container-color, var(--accent)) 18%, transparent);
    border-radius: 12px;
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--container-color, var(--accent)) 16%, var(--surface)),
        color-mix(in srgb, var(--container-color, var(--accent)) 7%, var(--soft)));
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
    font-size: 17px;
}
#panel-productivity .pd-container-card__avatar .pd-item-icon { font-size: 19px; }
#panel-productivity .pd-container-card__id { gap: 4px; }
#panel-productivity .pd-container-card__id h3 {
    font-size: 16px;
    font-weight: 680;
    letter-spacing: -.02em;
}
#panel-productivity .pd-container-card__id small {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-height: 19px;
    color: var(--muted);
    font-size: 11.5px;
}
#panel-productivity .pd-container-card__pct {
    position: relative;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 3px;
    border-radius: 50%;
    background: conic-gradient(
        var(--container-color, var(--accent)) calc(var(--container-progress, 0) * 1%),
        color-mix(in srgb, var(--soft) 86%, transparent) 0
    );
}
#panel-productivity .pd-container-card__pct::before {
    position: absolute;
    inset: 4px;
    border-radius: inherit;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent);
    content: "";
}
#panel-productivity .pd-container-card__pct > span {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: baseline;
}
#panel-productivity .pd-container-card__pct b {
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
#panel-productivity .pd-container-card__pct i {
    margin-left: 1px;
    font-size: 9px;
}

#panel-productivity .pd-container-card > p {
    min-height: 38px;
    color: var(--secondary);
    font-size: 13px;
    line-height: 1.5;
}
#panel-productivity .pd-container-card > p.is-placeholder {
    color: color-mix(in srgb, var(--muted) 84%, transparent);
    font-style: normal;
}

#panel-productivity .pd-next-action {
    min-height: 42px;
    margin: 0;
    padding: 0 12px;
    border-color: color-mix(in srgb, var(--container-color, var(--accent)) 15%, var(--line));
    border-radius: 10px;
    background: color-mix(in srgb, var(--container-color, var(--accent)) 4%, var(--elevated));
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent);
    font-size: 13px;
}
#panel-productivity .pd-next-action > svg {
    box-sizing: content-box;
    padding: 5px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--container-color, var(--accent)) 11%, transparent);
    color: var(--container-color, var(--accent));
}
#panel-productivity .pd-next-action:hover {
    border-color: color-mix(in srgb, var(--container-color, var(--accent)) 34%, var(--line));
    background: color-mix(in srgb, var(--container-color, var(--accent)) 8%, var(--surface));
}

#panel-productivity .pd-container-progress {
    height: 6px;
    margin-top: auto;
    background: color-mix(in srgb, var(--soft) 90%, transparent);
    box-shadow: inset 0 1px 1px color-mix(in srgb, #000 5%, transparent);
}
#panel-productivity .pd-container-progress span {
    min-width: 0;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--container-color, var(--accent)) 76%, var(--accent)),
        var(--container-color, var(--accent)));
    box-shadow: 0 0 10px color-mix(in srgb, var(--container-color, var(--accent)) 22%, transparent);
}
#panel-productivity .pd-container-card__meta {
    align-items: center;
    gap: 8px 14px;
    min-height: 22px;
    color: var(--muted);
    font-size: 12px;
}
#panel-productivity .pd-container-card__meta > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
#panel-productivity .pd-container-card__meta > span > svg { opacity: .72; }
#panel-productivity .pd-container-card__meta .pd-health { margin-left: auto; }

#panel-productivity .pd-container-card__actions {
    min-height: 44px;
    margin-top: 0;
    padding-top: 11px;
    border-top-color: color-mix(in srgb, var(--line) 80%, transparent);
}
#panel-productivity .pd-container-card__actions button.is-primary {
    min-height: 30px;
    padding-inline: 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 12.5px;
    font-weight: 620;
}
#panel-productivity .pd-container-card__actions button.is-primary:hover {
    border-color: color-mix(in srgb, var(--accent) 24%, transparent);
    background: color-mix(in srgb, var(--accent) 15%, var(--surface));
}
#panel-productivity .pd-container-card__tools {
    gap: 4px;
    opacity: .72;
    transition: opacity 140ms ease;
}
#panel-productivity .pd-container-card:hover .pd-container-card__tools,
#panel-productivity .pd-container-card:focus-within .pd-container-card__tools { opacity: 1; }
#panel-productivity .pd-container-card__tools button {
    width: 30px;
    min-height: 30px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: color-mix(in srgb, var(--soft) 55%, transparent);
}
#panel-productivity .pd-container-card__tools button:hover {
    border-color: var(--line);
    background: var(--hover);
}
#panel-productivity .pd-container-card__tools .pd-container-card__danger {
    margin-left: 2px;
    color: var(--bad);
    opacity: .8;
}

@media (max-width: 600px) {
    #panel-productivity .pd-container-card {
        min-height: 270px;
        padding: 16px;
    }
    #panel-productivity .pd-container-card__avatar {
        width: 38px;
        height: 38px;
    }
    #panel-productivity .pd-container-card__pct {
        width: 42px;
        height: 42px;
    }
    #panel-productivity .pd-container-card__tools { opacity: 1; }
}

/* ==========================================================================
   Mobile — contraste, cards e modo foco imersivo
   ========================================================================== */
@media (max-width: 768px) {
    #panel-productivity .pd-summary,
    #panel-productivity .pd-task,
    #panel-productivity .pd-frog,
    #panel-productivity .pd-today-game,
    #panel-productivity .pd-suggestions > div,
    #panel-productivity .pd-suggestions > button,
    #panel-productivity .pd-container-card,
    #panel-productivity .pd-habit-card,
    #panel-productivity .pd-metric-card {
        border-color: var(--line-strong);
        box-shadow: 0 1px 3px color-mix(in srgb, #000 5%, transparent);
    }

    #panel-productivity .pd-summary {
        background: var(--elevated);
    }

    #panel-productivity .pd-task-group__head h2 {
        color: var(--text);
        font-weight: 650;
    }

    #panel-productivity .pd-empty,
    #panel-productivity .pd-para-empty {
        min-height: min(50vh, 360px);
        padding: 32px 20px;
    }

    #panel-productivity .pd-empty__icon,
    #panel-productivity .pd-para-empty > div {
        background: color-mix(in srgb, var(--accent) 14%, var(--elevated));
        box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 16%, transparent);
    }

    /* Modo foco — fundo limpo, sem wash azul nem glow no número */
    #panel-productivity .pd-workspace.is-focus-mode .pd-stage,
    [data-theme="light"] #panel-productivity .pd-workspace.is-focus-mode .pd-stage,
    [data-theme="dark"] #panel-productivity .pd-workspace.is-focus-mode .pd-stage {
        background: var(--bg);
    }

    #panel-productivity .pd-workspace.is-focus-mode .pd-focus-card,
    [data-theme="dark"] #panel-productivity .pd-workspace.is-focus-mode .pd-focus-card {
        border: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        color: var(--text);
    }

    #panel-productivity .pd-workspace.is-focus-mode .pd-focus-card > p {
        color: var(--secondary);
    }

    #panel-productivity .pd-workspace.is-focus-mode .pd-timer {
        color: var(--text);
        text-shadow: none;
    }

    #panel-productivity .pd-workspace.is-focus-mode .pd-timer__modes {
        width: 100%;
        max-width: 320px;
        background: color-mix(in srgb, var(--soft) 88%, transparent);
    }

    #panel-productivity .pd-workspace.is-focus-mode .pd-timer__modes button.is-active {
        background: var(--elevated);
        color: var(--accent);
        font-weight: 650;
    }

    #panel-productivity .pd-workspace.is-focus-mode .pd-focus-side {
        border: 1px solid var(--line-strong);
        background: var(--elevated);
        box-shadow: 0 1px 3px color-mix(in srgb, #000 5%, transparent);
    }

    #panel-productivity .pd-workspace.is-focus-mode .pd-focus-stats span {
        background: var(--soft);
    }
}

#panel-productivity .pd-notify-btn {
    position: relative;
    overflow: visible;
}
#panel-productivity .pd-notify-btn__badge {
    position: absolute;
    top: -3px;
    right: -3px;
    z-index: 1;
    box-sizing: border-box;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border: 2px solid var(--elevated);
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    line-height: 12px;
    text-align: center;
}
#panel-productivity .pd-notify-btn__badge.is-dot {
    min-width: 10px;
    width: 10px;
    height: 10px;
    padding: 0;
    top: 0;
    right: 0;
}
#panel-productivity .pd-notify {
    z-index: 180;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: var(--elevated);
    color: var(--text);
}
#panel-productivity .pd-notify[hidden] { display: none !important; }
#panel-productivity .pd-notify__head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 8px 12px 8px 16px;
    border-bottom: 1px solid var(--line);
}
#panel-productivity .pd-notify__head h2 {
    flex: 1;
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.02em;
}
#panel-productivity .pd-notify__clear {
    border: 0;
    background: transparent;
    color: var(--accent);
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
}
#panel-productivity .pd-notify__enable {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 12px 0;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}
#panel-productivity .pd-notify__enable[hidden] { display: none !important; }
#panel-productivity .pd-notify__enable div { flex: 1; min-width: 0; }
#panel-productivity .pd-notify__enable strong { display: block; font-size: 14px; }
#panel-productivity .pd-notify__enable span { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.35; }
#panel-productivity .pd-notify__enable .pd-primary-btn {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 14px;
}
#panel-productivity .pd-notify__list {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 8px 8px 16px;
    -webkit-overflow-scrolling: touch;
}
#panel-productivity .pd-notify__empty {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 48px 20px;
    color: var(--muted);
    text-align: center;
}
#panel-productivity .pd-notify__empty p {
    margin: 8px 0 0;
    color: var(--text);
    font-size: 15px;
    font-weight: 650;
}
#panel-productivity .pd-notify__empty span { font-size: 13px; }
#panel-productivity .pd-notify__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
#panel-productivity .pd-notify__item:active { background: var(--hover); }
#panel-productivity .pd-notify__item i {
    display: grid;
    flex: 0 0 32px;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 12%, var(--soft));
    color: var(--accent);
}
#panel-productivity .pd-notify__item span { min-width: 0; }
#panel-productivity .pd-notify__item b {
    display: block;
    overflow: hidden;
    font-size: 14px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#panel-productivity .pd-notify__item small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
}

@media (min-width: 769px) {
    #panel-productivity .pd-notify {
        position: fixed;
        top: calc(var(--topbar-h, 52px) + 16px);
        right: 20px;
        width: min(380px, calc(100vw - 32px));
        max-height: min(70vh, 560px);
        border: 1px solid var(--line);
        border-radius: 16px;
        box-shadow: var(--shadow-lg);
    }
}

@media (max-width: 768px) {
    #panel-productivity .pd-notify {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        height: min(82dvh, 680px);
        max-height: min(82dvh, 680px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border: 0;
        border-top: 1px solid var(--line);
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -16px 48px rgba(0, 0, 0, .28);
    }
}


/* ===== pages/productivity-align.css ===== */
/* ==========================================================================
   Productivity — única camada de geometria
   Fonte de verdade para tamanho, ritmo e responsividade. O acabamento visual
   fica em productivity.css; não crie um terceiro arquivo de alinhamento.
   ========================================================================== */

#panel-productivity {
    --pd-gutter: clamp(18px, 2.35vw, 40px);
    --pd-control-h: 34px;
    --pd-control-radius: 9px;
    --pd-panel-radius: 14px;
    --pd-section-gap: 24px;
    --pd-row-gap: 8px;
    --pd-header-h: 68px;
    --pd-shell-offset: var(--topbar-h, 60px);
    min-height: calc(100dvh - var(--pd-shell-offset));
}

#panel-productivity,
#panel-productivity * {
    box-sizing: border-box;
}

/* Shell ------------------------------------------------------------------- */
#panel-productivity .pd-workspace {
    --pd-rail: clamp(210px, 15vw, 260px);
    --pd-detail: clamp(360px, 30vw, 440px);
    width: 100%;
    height: calc(100dvh - var(--pd-shell-offset));
    min-height: 0;
    grid-template-columns: var(--pd-rail) minmax(0, 1fr);
    background: var(--bg);
}

#panel-productivity .pd-workspace.has-detail {
    grid-template-columns: var(--pd-rail) minmax(0, 1fr) var(--pd-detail);
}

#panel-productivity .pd-rail,
#panel-productivity .pd-main,
#panel-productivity .pd-detail {
    height: calc(100dvh - var(--pd-shell-offset));
    min-height: 0;
}

#panel-productivity .pd-main {
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

#panel-productivity .pd-rail,
#panel-productivity .pd-header,
#panel-productivity .pd-detail__head {
    backdrop-filter: none;
}

/* One control scale ------------------------------------------------------- */
#panel-productivity :is(
    .pd-icon-btn,
    .pd-primary-btn,
    .pd-secondary-btn,
    .pd-danger-btn,
    .pd-summary__action,
    .pd-search input,
    .pd-groupby select,
    .pd-filterbar select,
    .pd-section-head > select
) {
    height: var(--pd-control-h);
    min-height: var(--pd-control-h);
    border-radius: var(--pd-control-radius);
}

#panel-productivity .pd-icon-btn {
    width: var(--pd-control-h);
    padding: 0;
}

#panel-productivity :is(.pd-primary-btn, .pd-secondary-btn, .pd-danger-btn) {
    padding-inline: 14px;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
}

#panel-productivity :is(button, input, select, textarea):focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Rail ------------------------------------------------------------------- */
#panel-productivity .pd-rail {
    --pd-rail-pad: 12px;
    border-right: 1px solid var(--macos-hairline, var(--line));
    background: var(--elevated);
}

#panel-productivity .pd-rail__top {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 12px var(--pd-rail-pad) 4px;
}

#panel-productivity .pd-rail__top h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.02em;
}

#panel-productivity .pd-capture-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    min-height: 36px;
    margin: 0 var(--pd-rail-pad) 8px;
    padding: 0 8px 0 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    border-radius: 9px;
    background: var(--accent-soft);
    box-shadow: none;
    color: var(--accent);
    font-size: 13px;
    font-weight: 620;
    line-height: 1;
}

#panel-productivity .pd-capture-btn svg {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
}

#panel-productivity .pd-capture-btn span {
    flex: 1 1 auto;
    text-align: left;
}

#panel-productivity .pd-capture-btn kbd {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
    background: var(--surface);
    color: var(--accent);
    font-size: 10px;
}

#panel-productivity .pd-capture-btn:hover {
    transform: none;
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}

#panel-productivity .pd-player-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin: 0 var(--pd-rail-pad) 8px;
    padding: 9px 10px;
    border: 1px solid var(--macos-hairline, var(--line));
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--macos-control-shadow);
}

#panel-productivity .pd-player-card:hover,
#panel-productivity .pd-player-card.is-active {
    border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface));
}

#panel-productivity .pd-player-card__level {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    box-shadow: none;
    font-size: 14px;
    font-weight: 750;
}

#panel-productivity .pd-player-card__copy {
    gap: 5px;
}

#panel-productivity .pd-player-card__copy strong {
    font-size: 12.5px;
    font-weight: 620;
}

#panel-productivity .pd-player-card__copy > span {
    height: 4px;
}

#panel-productivity .pd-player-card__copy small {
    font-size: 10.5px;
}

#panel-productivity .pd-player-card__streak {
    min-width: 0;
    padding-left: 8px;
    border-left: 1px solid var(--line);
    color: var(--secondary);
}

#panel-productivity .pd-player-card__streak b {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

#panel-productivity .pd-player-card__streak small {
    max-width: none;
    color: var(--muted);
    font-size: 9px;
    font-weight: 650;
    letter-spacing: .04em;
    line-height: 1.2;
    text-transform: uppercase;
    text-align: center;
}

#panel-productivity .pd-nav {
    padding: 2px 8px 18px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--muted) 32%, transparent) transparent;
}

#panel-productivity .pd-nav::-webkit-scrollbar { width: 8px; }
#panel-productivity .pd-nav::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 99px;
    background: color-mix(in srgb, var(--muted) 32%, transparent);
    background-clip: padding-box;
}

#panel-productivity .pd-nav__group {
    padding: 6px 0 4px;
    border-top: 0;
}

#panel-productivity .pd-nav__group + .pd-nav__group {
    margin-top: 2px;
    padding-top: 8px;
    border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

#panel-productivity .pd-nav__group:first-child {
    padding-top: 2px;
    border-top: 0;
}

#panel-productivity .pd-nav__label {
    display: block;
    padding: 0 8px 5px;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#panel-productivity .pd-nav__heading {
    display: flex;
    align-items: center;
    min-height: 24px;
    margin-bottom: 2px;
    padding-right: 2px;
}

#panel-productivity .pd-nav__heading .pd-nav__label {
    flex: 1 1 auto;
    padding-bottom: 0;
}

#panel-productivity .pd-nav__heading .pd-mini-btn {
    width: 22px;
    height: 22px;
    border-radius: 6px;
}

#panel-productivity .pd-nav__item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 8px;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    color: var(--secondary);
    font-size: 13px;
    font-weight: 520;
}

#panel-productivity .pd-nav__item > span:first-child {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#panel-productivity .pd-nav__item svg,
#panel-productivity .pd-nav__item .pd-item-icon {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    color: var(--muted);
}

#panel-productivity .pd-nav__item .pd-project-dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin-inline: 4px;
}

#panel-productivity .pd-nav__item:hover {
    background: var(--hover);
    color: var(--text);
}

#panel-productivity .pd-nav__item.is-active {
    background: var(--accent-soft);
    box-shadow: none;
    color: var(--accent);
    font-weight: 620;
}

#panel-productivity .pd-nav__item.is-active svg,
#panel-productivity .pd-nav__item.is-active .pd-nav__count {
    color: var(--accent);
    opacity: 1;
}

#panel-productivity .pd-nav__count {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--soft);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

#panel-productivity .pd-nav__count:empty {
    display: none;
}

#panel-productivity .pd-nav__item.is-active .pd-nav__count {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}

#panel-productivity .pd-projects {
    display: grid;
    gap: 1px;
    margin: 1px 0 4px;
    padding: 0 0 2px 14px;
}
#panel-productivity .pd-projects:empty {
    display: none;
}
#panel-productivity .pd-nav__item--child {
    min-height: 28px;
    color: var(--secondary);
    font-size: 12.5px;
    font-weight: 500;
}
#panel-productivity .pd-nav__item--child > span:first-child {
    gap: 8px;
}

#panel-productivity .pd-nav__extras {
    margin-top: 2px;
}
#panel-productivity .pd-nav__extras > summary {
    list-style: none;
    cursor: pointer;
    color: var(--muted);
    font-size: 12px;
    font-weight: 620;
}
#panel-productivity .pd-nav__extras > summary::-webkit-details-marker { display: none; }
#panel-productivity .pd-nav__extras > summary::after {
    content: '';
    width: 5px;
    height: 5px;
    margin-left: auto;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: .55;
}
#panel-productivity .pd-nav__extras[open] > summary::after {
    transform: rotate(-135deg);
}
#panel-productivity .pd-nav__extras > .pd-nav__item {
    width: 100%;
}

#panel-productivity .pd-rail__footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding-inline: var(--pd-rail-pad);
    font-size: 11.5px;
}
#panel-productivity .pd-rail__footer .pd-mini-btn {
    width: 26px;
    height: 26px;
    min-height: 26px;
    color: var(--secondary);
}
#panel-productivity .pd-rail__footer .pd-mini-btn svg {
    display: block;
    stroke-width: 2;
}

/* Header and filters ------------------------------------------------------ */
#panel-productivity .pd-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: var(--pd-header-h);
    padding: 12px var(--pd-gutter);
    border-bottom: 1px solid var(--macos-hairline, var(--line));
    background: var(--bg);
}

#panel-productivity .pd-header__title {
    flex: 0 1 auto;
    min-width: 90px;
}

#panel-productivity .pd-header h1 {
    margin: 0;
    font-size: clamp(20px, 1.55vw, 24px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.025em;
}

#panel-productivity .pd-header__actions {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

#panel-productivity .pd-header__actions > * {
    flex-shrink: 0;
}

#panel-productivity .pd-header__actions > .pd-search {
    flex: 1 1 320px;
    width: min(30vw, 400px);
    max-width: 400px;
    min-width: 200px;
}

#panel-productivity .pd-search input {
    width: 100%;
    padding-inline: 38px 34px;
    font-size: 13px;
}

#panel-productivity .pd-search > .pd-icon {
    left: 11px;
}

#panel-productivity .pd-layout-seg {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: var(--pd-control-h);
    padding: 3px;
    border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
    border-radius: 10px;
    background: var(--soft);
}

#panel-productivity .pd-layout-seg button {
    height: 26px;
    min-height: 26px;
    padding-inline: 10px;
    border-radius: 7px;
    font-size: 12px;
    line-height: 1;
}

#panel-productivity .pd-layout-seg button.is-active {
    background: var(--surface);
    box-shadow: var(--macos-control-shadow);
}

#panel-productivity .pd-groupby select {
    max-width: 178px;
    padding-inline: 10px 28px;
    font-size: 12px;
}

#panel-productivity .pd-filterbar {
    align-items: end;
    gap: 12px;
    padding: 12px var(--pd-gutter);
    border-bottom: 1px solid var(--macos-hairline, var(--line));
    background: var(--elevated);
}

#panel-productivity .pd-filterbar > label {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 5px;
}

#panel-productivity .pd-filterbar > label > select {
    grid-column: 1 / -1;
    min-width: 150px;
    font-size: 12.5px;
}

#panel-productivity .pd-filterbar .pd-text-btn {
    align-self: end;
    min-height: var(--pd-control-h);
    padding-inline: 8px;
}

/* Stage and section rhythm ------------------------------------------------ */
#panel-productivity .pd-stage {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: var(--pd-section-gap) var(--pd-gutter) 88px;
}

#panel-productivity :is(
    .pd-list-view,
    .pd-para-view,
    .pd-game-view,
    .pd-focus-view,
    .pd-habits-view,
    .pd-insights-view
) {
    width: 100%;
    min-width: 0;
}

#panel-productivity .pd-section-head,
#panel-productivity .pd-para-hero {
    align-items: center;
    min-height: 42px;
    margin-bottom: 20px;
}

#panel-productivity .pd-section-head h2,
#panel-productivity .pd-para-hero h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.025em;
}

/* Summary ---------------------------------------------------------------- */
#panel-productivity .pd-summary {
    display: grid;
    grid-template-columns: 48px minmax(120px, auto) minmax(0, 1fr) auto;
    grid-template-areas: "ring head stats action";
    align-items: center;
    gap: 12px 16px;
    min-height: 74px;
    margin-bottom: var(--pd-section-gap);
    padding: 13px 16px;
    border-radius: var(--pd-panel-radius);
}

#panel-productivity .pd-ring {
    grid-area: ring;
    width: 46px;
    height: 46px;
}

#panel-productivity .pd-summary__head {
    grid-area: head;
    min-width: 0;
}

#panel-productivity .pd-summary__stats {
    grid-area: stats;
    align-self: center;
    margin: 0;
}

#panel-productivity .pd-summary__action {
    grid-area: action;
    justify-self: end;
    margin: 0;
    padding-inline: 12px;
}

#panel-productivity .pd-summary__stat {
    min-height: 28px;
    padding-inline: 10px;
}

/* Task list --------------------------------------------------------------- */
#panel-productivity .pd-task-group + .pd-task-group {
    margin-top: 28px;
}

#panel-productivity .pd-task-group__head {
    min-height: 34px;
    margin-bottom: 8px;
    padding-inline: 4px;
}

#panel-productivity .pd-task-list {
    gap: var(--pd-row-gap);
}

#panel-productivity .pd-task {
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: start;
    min-height: 54px;
    padding: 10px 10px 10px 7px;
    border-radius: 11px;
}

#panel-productivity .pd-drag {
    align-self: start;
}

#panel-productivity .pd-task__title-row {
    align-items: flex-start;
    min-height: 22px;
}

#panel-productivity .pd-check {
    flex: 0 0 var(--pd-check-size, 18px);
    align-self: start;
    box-sizing: border-box;
    width: var(--pd-check-size, 18px);
    height: var(--pd-check-size, 18px);
    min-width: var(--pd-check-size, 18px);
    min-height: var(--pd-check-size, 18px);
    max-width: var(--pd-check-size, 18px);
    max-height: var(--pd-check-size, 18px);
    margin-top: 2px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}

#panel-productivity .pd-task__title {
    line-height: 22px;
}

#panel-productivity .pd-task__meta {
    min-height: 20px;
    padding-top: 2px;
    row-gap: 4px;
}

#panel-productivity .pd-task__actions {
    align-self: start;
    margin-top: -4px;
}

#panel-productivity .pd-task__actions button {
    width: 30px;
    height: 30px;
}

#panel-productivity .pd-add-inline {
    min-height: 38px;
    margin-top: 7px;
}

#panel-productivity .pd-bulkbar {
    top: 10px;
}

#panel-productivity .pd-list-view:has(.pd-triage, .pd-triage-empty, .pd-rituals, .pd-review) .pd-summary,
#panel-productivity .pd-list-view:has(.pd-triage, .pd-triage-empty, .pd-rituals, .pd-review) .pd-bulkbar {
    display: none !important;
}

#panel-productivity .pd-task-groups:has(> .pd-triage, > .pd-triage-empty) {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    padding: 28px 12px 48px;
}

#panel-productivity .pd-task-groups:has(> .pd-rituals, > .pd-review) {
    display: block;
    width: 100%;
    min-height: min(58vh, 620px);
    padding: 0;
}

#panel-productivity .pd-triage,
#panel-productivity .pd-triage-empty {
    display: grid;
    width: min(100%, 520px);
    margin: 0 auto;
}

#panel-productivity .pd-triage-empty {
    justify-items: center;
    padding: 56px 36px;
    text-align: center;
}

#panel-productivity .pd-triage {
    gap: 22px;
    padding: 22px 22px 18px;
}

#panel-productivity .pd-triage__head h2 {
    margin: 6px 0 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.25;
    cursor: pointer;
}

#panel-productivity .pd-triage__head h2:hover {
    color: var(--accent);
}

#panel-productivity .pd-triage__count {
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#panel-productivity .pd-triage__meta {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

#panel-productivity .pd-triage__field {
    display: grid;
    gap: 8px;
}

#panel-productivity .pd-triage__label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
}

#panel-productivity .pd-triage__label kbd {
    min-width: 18px;
    padding: 1px 5px;
    text-transform: none;
    letter-spacing: 0;
}

#panel-productivity .pd-triage__chips,
#panel-productivity .pd-triage__prios,
#panel-productivity .pd-triage__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#panel-productivity .pd-triage__chip,
#panel-productivity .pd-triage__prio,
#panel-productivity .pd-triage__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--macos-hairline, var(--line));
    border-radius: 9px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 550;
    cursor: pointer;
}

#panel-productivity .pd-triage__chip:hover,
#panel-productivity .pd-triage__prio:hover,
#panel-productivity .pd-triage__btn:hover {
    background: var(--hover);
}

#panel-productivity .pd-triage__chip.is-active {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    color: var(--accent);
}

#panel-productivity .pd-triage__prio {
    min-width: 44px;
    padding: 0 10px;
    font-variant-numeric: tabular-nums;
}

#panel-productivity .pd-triage__prio[data-p="1"] { color: #ef4444; }
#panel-productivity .pd-triage__prio[data-p="2"] { color: #f59e0b; }
#panel-productivity .pd-triage__prio[data-p="3"] { color: #3b82f6; }
#panel-productivity .pd-triage__prio[data-p="4"] { color: var(--muted); }

#panel-productivity .pd-triage__prio.is-active {
    border-color: currentColor;
    background: color-mix(in srgb, currentColor 12%, var(--surface));
    font-weight: 700;
}

#panel-productivity .pd-triage__foot {
    padding-top: 6px;
    border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}

#panel-productivity .pd-triage__btn kbd {
    min-width: 16px;
    padding: 0 4px;
    border-color: color-mix(in srgb, currentColor 18%, var(--line));
    background: transparent;
    color: inherit;
    opacity: .7;
}

#panel-productivity .pd-triage__btn--primary {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

#panel-productivity .pd-triage__btn--primary:hover {
    filter: brightness(1.05);
    background: var(--accent);
}

#panel-productivity .pd-triage__btn--quiet {
    margin-left: auto;
    color: var(--muted);
}

#panel-productivity .pd-triage-empty .pd-empty__icon {
    margin-bottom: 16px;
}

#panel-productivity .pd-triage-empty h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.025em;
}

#panel-productivity .pd-triage-empty p {
    max-width: 36ch;
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

/* Shared premium surfaces ------------------------------------------------- */
#panel-productivity :is(
    .pd-focus-card,
    .pd-focus-side,
    .pd-habit-card,
    .pd-metric-card,
    .pd-insight-panels section,
    .pd-game-hero,
    .pd-game-panel,
    .pd-ritual-card,
    .pd-idea-board,
    .pd-cycles,
    .pd-day-side,
    .pd-triage,
    .pd-triage-empty
) {
    border: 1px solid var(--macos-hairline, var(--line));
    border-radius: var(--pd-panel-radius);
    background: var(--surface);
    box-shadow: var(--macos-window-shadow);
}

#panel-productivity .pd-frog {
    align-items: center;
    min-height: 64px;
    margin-bottom: 14px;
    padding: 13px 16px;
    border: 1px solid color-mix(in srgb, var(--ok) 24%, var(--line));
    border-radius: var(--pd-panel-radius);
    background: color-mix(in srgb, var(--ok) 7%, var(--surface));
}

#panel-productivity .pd-frog h2 {
    margin: 0 0 3px;
    font-size: 15px;
}

#panel-productivity .pd-frog p {
    margin: 0;
    color: var(--secondary);
    font-size: 12.5px;
}

#panel-productivity .pd-frog__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

#panel-productivity .pd-frog__actions button {
    min-height: 30px;
    padding-inline: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

#panel-productivity .pd-today-game,
#panel-productivity .pd-suggestions > div,
#panel-productivity .pd-suggestions > button {
    border-radius: var(--pd-panel-radius);
    box-shadow: var(--macos-control-shadow);
}

#panel-productivity .pd-suggestions {
    grid-template-columns: minmax(180px, .9fr) repeat(3, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: var(--pd-section-gap);
}

#panel-productivity .pd-suggestions > div,
#panel-productivity .pd-suggestions > button {
    min-width: 0;
    min-height: 92px;
}

#panel-productivity .pd-ritual-card {
    gap: 12px;
    margin-bottom: 0;
    padding: 20px;
}

#panel-productivity .pd-ritual-card :is(input, textarea) {
    background: var(--elevated);
}

/* Focus, habits, insights and game --------------------------------------- */
#panel-productivity .pd-focus-view {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr);
    align-items: stretch;
    gap: 18px;
}

#panel-productivity .pd-focus-card {
    min-height: clamp(430px, 62vh, 560px);
    padding: clamp(28px, 4vw, 48px);
}

#panel-productivity .pd-focus-side {
    min-width: 0;
    padding: 20px;
}

#panel-productivity .pd-timer__actions {
    flex-wrap: wrap;
    justify-content: center;
}

#panel-productivity .pd-timer__mode-sm {
    display: none;
}

#panel-productivity .pd-habit-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    align-items: stretch;
    gap: 16px;
}

#panel-productivity .pd-habit-card {
    height: 100%;
    min-height: 150px;
    padding: 20px;
}

#panel-productivity .pd-metric-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    align-items: stretch;
    gap: 14px;
}

#panel-productivity .pd-metric-card {
    height: 100%;
    min-height: 118px;
    padding: 18px;
}

#panel-productivity .pd-insight-panels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 14px;
    margin-top: 0;
}

#panel-productivity .pd-insight-panels section {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 280px;
    padding: 20px;
}

#panel-productivity .pd-game-hero {
    grid-template-columns: auto minmax(240px, 1fr) auto;
    gap: 24px;
    padding: 26px 28px;
}

#panel-productivity .pd-game-layout {
    align-items: stretch;
    gap: 16px;
}

#panel-productivity .pd-game-panel {
    min-width: 0;
    height: 100%;
    padding: 22px;
}

/* Board, table, Gantt and calendar --------------------------------------- */
#panel-productivity .pd-board {
    grid-auto-columns: minmax(288px, 1fr);
    align-items: start;
    gap: 14px;
    padding: 2px 2px 16px;
}

#panel-productivity .pd-board-col {
    gap: 8px;
    min-height: 190px;
    padding: 12px 9px 10px;
    border-radius: var(--pd-panel-radius);
}

#panel-productivity .pd-board-col__head {
    min-height: 32px;
    padding: 0 6px 8px;
}

#panel-productivity .pd-board-col__list {
    gap: 8px;
}

#panel-productivity .pd-board .pd-task {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 76px;
    padding: 11px;
}

#panel-productivity .pd-board .pd-task__body {
    grid-column: 1;
}

#panel-productivity .pd-board .pd-task__actions {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    margin-top: -4px;
}

#panel-productivity .pd-table-wrap,
#panel-productivity .pd-gantt {
    border-radius: var(--pd-panel-radius);
}

#panel-productivity :is(.pd-table, .pd-gantt table) th {
    height: 42px;
    padding-inline: 14px;
}

#panel-productivity :is(.pd-table, .pd-gantt table) td {
    height: 46px;
    padding: 8px 14px;
}

#panel-productivity .pd-cal {
    --pd-cal-inset: 6px;
    --pd-cal-time: 2.75em;
    gap: 14px;
}

#panel-productivity .pd-cal__head {
    min-height: 40px;
}

#panel-productivity .pd-cal__wd {
    padding: 8px var(--pd-cal-inset) 7px;
    text-align: left;
}

#panel-productivity .pd-cal__day {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    min-height: 132px;
    padding: 5px var(--pd-cal-inset) 6px;
}

#panel-productivity .pd-cal__num {
    flex: 0 0 auto;
    align-self: flex-start;
    margin: 0 0 0 2px;
}

#panel-productivity .pd-cal__items {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    min-width: 0;
    width: 100%;
}

#panel-productivity .pd-cal__task,
#panel-productivity .pd-cal__block {
    --priority-color: var(--muted);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    min-width: 0;
    overflow: hidden;
    border: 0;
    border-left: 3px solid var(--priority-color);
    background: color-mix(in srgb, var(--priority-color) 16%, var(--surface));
    color: var(--text);
    font-weight: 650;
    line-height: 1.25;
    white-space: normal;
    cursor: grab;
}

#panel-productivity .pd-cal__task.pd-priority-1,
#panel-productivity .pd-cal__block.pd-priority-1 { --priority-color: #ef4444; }
#panel-productivity .pd-cal__task.pd-priority-2,
#panel-productivity .pd-cal__block.pd-priority-2 { --priority-color: #f59e0b; }
#panel-productivity .pd-cal__task.pd-priority-3,
#panel-productivity .pd-cal__block.pd-priority-3 { --priority-color: #3b82f6; }
#panel-productivity .pd-cal__task.pd-priority-4,
#panel-productivity .pd-cal__block.pd-priority-4 { --priority-color: var(--muted); }

#panel-productivity .pd-cal__task {
    width: 100%;
    min-height: 0;
    padding: 3px 6px 3px 6px;
    border-radius: 6px;
    font-size: 12px;
}

#panel-productivity .pd-cal__task-row {
    display: flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
    width: 100%;
}

#panel-productivity .pd-cal__task .pd-cal__time {
    flex: 0 0 var(--pd-cal-time);
    width: var(--pd-cal-time);
    margin: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    line-height: inherit;
    text-align: left;
}

#panel-productivity .pd-cal__task-title {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#panel-productivity .pd-cal__task-meta {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 550;
    line-height: 1.3;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#panel-productivity .pd-cal__task.has-time .pd-cal__task-meta {
    padding-left: calc(var(--pd-cal-time) + 5px);
}

#panel-productivity .pd-cal__task:hover,
#panel-productivity .pd-cal__block:hover {
    background: color-mix(in srgb, var(--priority-color) 24%, var(--surface));
}

#panel-productivity .pd-cal__more {
    display: block;
    width: 100%;
    min-height: 18px;
    margin: 0;
    padding: 1px 6px 0;
    text-align: left;
    font-size: 11px;
}

#panel-productivity .pd-cal__undated .pd-cal__items {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
}

#panel-productivity .pd-cal__undated .pd-cal__task {
    flex: 0 0 168px;
    width: 168px;
}

#panel-productivity .pd-cal__allday-cell {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 3px;
    padding: 4px 5px;
    overflow: hidden;
}

#panel-productivity .pd-cal__allday-cell .pd-cal__task {
    padding: 2px 6px;
}

#panel-productivity .pd-cal__allday-cell .pd-cal__task-meta {
    display: none;
}

#panel-productivity .pd-cal__block {
    position: absolute;
    z-index: 2;
    right: 4px;
    left: 4px;
    min-height: 0;
    padding: 3px 6px 4px 7px;
    border-radius: 6px;
    font-size: 12px;
}

#panel-productivity .pd-cal__block .pd-cal__time {
    display: block;
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    color: var(--muted);
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    line-height: 1.2;
    text-align: left;
}

#panel-productivity .pd-cal__block .pd-cal__task-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    word-break: break-word;
    white-space: normal;
    text-overflow: ellipsis;
}

/* Rituals ---------------------------------------------------------------- */
#panel-productivity .pd-rituals {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, .8fr);
    align-items: stretch;
    gap: 18px;
}

#panel-productivity .pd-idea-board {
    grid-row: span 2;
}

#panel-productivity .pd-idea-board,
#panel-productivity .pd-cycles,
#panel-productivity .pd-day-side {
    min-width: 0;
    padding: 20px;
}

#panel-productivity .pd-idea-columns {
    align-items: stretch;
    gap: 10px;
}

#panel-productivity .pd-idea-column {
    min-width: 0;
    min-height: 0;
    border-radius: 10px;
}

#panel-productivity .pd-idea-card,
#panel-productivity .pd-cycle-card {
    border-radius: 9px;
}

/* Detail ----------------------------------------------------------------- */
#panel-productivity .pd-detail {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-left: 1px solid var(--macos-hairline, var(--line));
    background: var(--elevated);
}

#panel-productivity .pd-detail__head {
    flex: 0 0 auto;
    height: 52px;
    padding-inline: 18px;
    background: var(--elevated);
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
}

#panel-productivity .pd-detail [data-pd-detail-content] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

#panel-productivity .pd-detail-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 100%;
    padding: 0 0 16px;
}

#panel-productivity .pd-detail-hero {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 18px 16px;
}

#panel-productivity .pd-detail-hero .pd-emoji-btn {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin-top: 2px;
    border-radius: 11px;
}

#panel-productivity .pd-detail-title {
    flex: 1 1 auto;
    min-height: 44px;
    max-height: 88px;
    padding: 4px 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.025em;
    resize: none;
}

#panel-productivity .pd-detail-section {
    display: grid;
    gap: 8px;
    padding: 14px 18px;
    border-top: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
}

#panel-productivity .pd-detail-section > h3,
#panel-productivity .pd-detail-section__head h3,
#panel-productivity .pd-checklist__head > span {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
}

#panel-productivity .pd-detail-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 28px;
}

#panel-productivity .pd-prop-list {
    display: grid;
    gap: 6px;
}

#panel-productivity .pd-prop {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin: 0;
    color: inherit;
    font-size: inherit;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

#panel-productivity .pd-prop > span {
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 520;
    letter-spacing: 0;
    text-transform: none;
}

#panel-productivity .pd-prop :is(input, select),
#panel-productivity .pd-detail-section > input,
#panel-productivity .pd-detail-section textarea {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--soft);
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
}

#panel-productivity .pd-prop :is(input, select):hover,
#panel-productivity .pd-detail-section > input:hover {
    border-color: var(--line);
}

#panel-productivity .pd-prop :is(input, select):focus,
#panel-productivity .pd-detail-section > input:focus,
#panel-productivity .pd-detail-section textarea:focus {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

#panel-productivity .pd-prop .fm-select,
#panel-productivity .pd-prop .fm-select__trigger {
    width: 100%;
    min-height: 34px;
    height: 34px;
}

#panel-productivity .pd-detail-section textarea {
    height: auto;
    min-height: 120px;
    padding: 10px 12px;
    line-height: 1.5;
    resize: vertical;
}

#panel-productivity .pd-detail-section--notes .pd-field {
    gap: 0;
}

#panel-productivity .pd-notes-tabs {
    margin: 0;
    padding: 2px;
    border-radius: 8px;
    background: var(--soft);
}

#panel-productivity .pd-notes-tabs button {
    min-height: 24px;
    padding: 0 9px;
    border-radius: 6px;
    font-size: 12px;
}

#panel-productivity .pd-notes-tabs button.is-active {
    background: var(--surface);
    box-shadow: var(--macos-control-shadow);
}

#panel-productivity .pd-detail-attach-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

#panel-productivity .pd-detail-attach-actions .pd-add-inline {
    width: auto;
    min-height: 30px;
    margin: 0;
    padding-inline: 8px;
}

#panel-productivity .pd-detail-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: auto;
    padding: 14px 18px 4px;
    border-top: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
}

#panel-productivity .pd-detail-actions .pd-secondary-btn,
#panel-productivity .pd-detail-actions .pd-danger-btn {
    min-height: 34px;
    padding: 0 10px;
    font-size: 12.5px;
}

#panel-productivity .pd-detail-actions .pd-danger-btn {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
    border-color: color-mix(in srgb, var(--bad) 28%, var(--line));
    background: transparent;
    color: var(--bad);
}

#panel-productivity .pd-detail-actions .pd-danger-btn:hover {
    background: var(--bad-bg);
}

/* Modals ----------------------------------------------------------------- */
#panel-productivity .pd-modal {
    width: min(92vw, 520px);
    max-height: min(90dvh, 860px);
    border-radius: 16px;
}

#panel-productivity .pd-modal:is(.pd-capture, .pd-container-modal) {
    width: min(94vw, 620px);
}

#panel-productivity .pd-modal.pd-note-editor {
    width: min(94vw, 760px);
}

#panel-productivity .pd-modal form {
    min-width: 0;
    padding: 22px;
}

#panel-productivity .pd-modal__head {
    align-items: center;
    min-height: 38px;
    margin-bottom: 20px;
}

#panel-productivity .pd-modal__head h2 {
    margin: 0;
    font-size: 21px;
    line-height: 1.2;
}

#panel-productivity .pd-modal__head .pd-icon-btn {
    width: var(--pd-control-h);
    height: var(--pd-control-h);
}

#panel-productivity .pd-modal__footer {
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

#panel-productivity .pd-modal__footer > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

/* Medium desktop --------------------------------------------------------- */
@media (max-width: 1280px) and (min-width: 821px) {
    #panel-productivity {
        --pd-header-h: 112px;
    }

    #panel-productivity .pd-workspace {
        --pd-rail: clamp(196px, 18vw, 230px);
    }

    #panel-productivity .pd-workspace.has-detail {
        grid-template-columns: var(--pd-rail) minmax(0, 1fr);
    }

    #panel-productivity .pd-workspace.has-detail .pd-detail {
        position: absolute;
        top: 0;
        right: 0;
        width: min(400px, calc(100vw - var(--pd-rail)));
        box-shadow: -18px 0 46px color-mix(in srgb, #000 15%, transparent);
    }

    #panel-productivity .pd-header {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        padding-block: 11px;
    }

    #panel-productivity .pd-header__actions {
        justify-content: flex-start;
        width: 100%;
    }

    #panel-productivity .pd-header__actions > .pd-search {
        flex: 1 1 260px;
        width: auto;
        max-width: none;
    }

    #panel-productivity .pd-groupby {
        display: none;
    }

    #panel-productivity .pd-insight-panels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #panel-productivity .pd-insight-panels section:first-child {
        grid-column: 1 / -1;
    }

    #panel-productivity .pd-suggestions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #panel-productivity .pd-rituals {
        grid-template-columns: 1fr;
    }

    #panel-productivity .pd-idea-board {
        grid-row: auto;
    }
}

/* Tablet and mobile ------------------------------------------------------ */
@media (max-width: 820px) {
    #panel-productivity {
        --pd-gutter: 14px;
        --pd-header-h: 60px;
    }

    #panel-productivity .pd-workspace,
    #panel-productivity .pd-workspace.has-detail {
        grid-template-columns: minmax(0, 1fr);
    }

    #panel-productivity .pd-header {
        display: flex;
        gap: 8px;
        min-height: var(--pd-header-h);
        padding: 10px var(--pd-gutter);
    }

    #panel-productivity .pd-header__title {
        flex: 0 0 auto;
        min-width: 0;
    }

    #panel-productivity .pd-header h1 {
        max-width: 28vw;
        overflow: hidden;
        font-size: 19px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #panel-productivity .pd-header__actions {
        gap: 6px;
    }

    #panel-productivity .pd-header__actions > .pd-search {
        flex: 1 1 auto;
        width: auto;
        max-width: none;
        min-width: 100px;
    }

    #panel-productivity .pd-layout-seg,
    #panel-productivity .pd-groupby,
    #panel-productivity [data-pd-sort] {
        display: none;
    }

    #panel-productivity .pd-search kbd {
        display: none;
    }

    #panel-productivity .pd-search input {
        padding-right: 10px;
    }

    #panel-productivity .pd-stage {
        padding: 18px var(--pd-gutter) 76px;
    }

    #panel-productivity .pd-summary {
        grid-template-columns: 46px minmax(0, 1fr) auto;
        grid-template-areas:
            "ring head action"
            "stats stats stats";
        gap: 10px 12px;
    }

    #panel-productivity .pd-summary__stats {
        align-self: start;
    }

    #panel-productivity .pd-focus-view,
    #panel-productivity .pd-insight-panels,
    #panel-productivity .pd-rituals,
    #panel-productivity .pd-idea-columns {
        grid-template-columns: 1fr;
    }

    #panel-productivity .pd-insight-panels section:first-child {
        grid-column: auto;
    }

    #panel-productivity .pd-idea-board {
        grid-row: auto;
    }

    #panel-productivity .pd-suggestions {
        grid-template-columns: 1fr;
    }

    #panel-productivity .pd-suggestions > button:nth-of-type(n+3) {
        display: none;
    }

    #panel-productivity .pd-workspace.has-detail .pd-detail,
    #panel-productivity .pd-detail {
        position: absolute;
        top: 0;
        right: 0;
        width: min(100%, 420px);
        box-shadow: -18px 0 46px color-mix(in srgb, #000 16%, transparent);
    }

    #panel-productivity .pd-game-hero {
        grid-template-columns: auto 1fr;
    }

    #panel-productivity .pd-game-vitals {
        grid-column: 1 / -1;
    }
}

.pd-mobile-dock {
    display: none;
}

/* Mobile: um dock só — o menu global vai para a sidebar. */
@media (max-width: 768px) {
    #tab-productivity:checked ~ .app-shell .app-main {
        display: block;
        min-height: 0;
        overflow: visible;
        padding-bottom: 0;
    }

    #tab-productivity:checked ~ .app-shell #panel-productivity {
        display: block !important;
        height: auto;
        max-height: none;
        min-height: 0;
        overflow: visible;
    }

    #panel-productivity {
        --pd-mobile-dock-h: 56px;
        --pd-shell-offset: calc(var(--topbar-h, 56px) + env(safe-area-inset-top, 0px));
    }

    .app:has(#tab-productivity:checked),
    .tabs:has(#tab-productivity:checked),
    #tab-productivity:checked ~ .app-shell,
    #tab-productivity:checked ~ .app-shell .app-main,
    #tab-productivity:checked ~ .app-shell .tab-panels {
        overflow: visible;
    }

    #tab-productivity:checked ~ .mobile-dock {
        display: none !important;
    }

    #tab-productivity:checked ~ .pd-mobile-dock {
        display: grid;
    }
}

/* Compact phones --------------------------------------------------------- */
@media (max-width: 480px) {
    #panel-productivity {
        --pd-gutter: 12px;
        --pd-control-h: 32px;
    }

    #panel-productivity .pd-header h1 {
        display: block;
        max-width: none;
        overflow: hidden;
        font-size: 17px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #panel-productivity .pd-header__actions > .pd-search {
        min-width: 0;
    }

    #panel-productivity .pd-header__actions > .pd-primary-btn {
        width: var(--pd-control-h);
        padding: 0;
    }

    #panel-productivity .pd-header__actions > .pd-primary-btn span {
        display: none;
    }

    #panel-productivity .pd-summary {
        grid-template-columns: 42px minmax(0, 1fr);
        grid-template-areas:
            "ring head"
            "stats stats"
            "action action";
        padding: 12px;
    }

    #panel-productivity .pd-ring {
        width: 42px;
        height: 42px;
    }

    #panel-productivity .pd-summary__action {
        justify-self: stretch;
        justify-content: center;
        width: 100%;
    }

    #panel-productivity .pd-task {
        grid-template-columns: 0 minmax(0, 1fr) auto;
        min-height: 52px;
        padding-right: 7px;
    }

    #panel-productivity .pd-task__title {
        white-space: normal;
    }

    #panel-productivity .pd-task__meta {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    #panel-productivity .pd-task__actions button:not(:last-child) {
        display: none;
    }

    #panel-productivity .pd-frog {
        align-items: stretch;
        flex-direction: column;
    }

    #panel-productivity .pd-frog__actions {
        justify-content: flex-start;
    }

    #panel-productivity .pd-today-game {
        grid-template-columns: 1fr;
    }

    #panel-productivity .pd-game-hero {
        grid-template-columns: 1fr;
        padding: 20px;
        text-align: center;
    }

    #panel-productivity .pd-game-avatar {
        margin-inline: auto;
    }

    #panel-productivity .pd-game-vitals {
        grid-template-columns: repeat(2, 1fr);
    }

    #panel-productivity .pd-prop {
        grid-template-columns: 78px minmax(0, 1fr);
        gap: 8px;
    }

    #panel-productivity .pd-detail-actions {
        grid-template-columns: 1fr;
    }

    #panel-productivity .pd-detail-actions .pd-danger-btn {
        grid-column: auto;
    }

    #panel-productivity .pd-modal form {
        padding: 18px;
    }

    #panel-productivity .pd-modal__footer {
        align-items: stretch;
        flex-direction: column;
    }

    #panel-productivity .pd-modal__footer > div {
        width: 100%;
    }

    #panel-productivity .pd-modal__footer :is(.pd-primary-btn, .pd-secondary-btn, .pd-danger-btn) {
        flex: 1;
    }
}

/* PARA cards — compact, content-sized */
#panel-productivity .pd-container-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    align-items: start;
    gap: 14px;
}

#panel-productivity .pd-container-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    padding: 14px 14px 12px 16px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--container-color, var(--accent)) 16%, var(--macos-hairline, var(--line)));
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 1px 2px color-mix(in srgb, #000 4%, transparent);
    transform: none;
}

#panel-productivity .pd-container-card::after,
#panel-productivity .pd-container-card::before { display: none; }

#panel-productivity .pd-container-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px color-mix(in srgb, #000 8%, transparent);
}

#panel-productivity .pd-container-card__head {
    align-items: center;
    gap: 10px;
    min-height: 0;
}

#panel-productivity .pd-container-card__avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 16px;
}

#panel-productivity .pd-container-card__avatar .pd-item-icon { font-size: 17px; }

#panel-productivity .pd-container-card__id { gap: 2px; }
#panel-productivity .pd-container-card__id h3 {
    font-size: 14.5px;
    font-weight: 680;
    line-height: 1.25;
}
#panel-productivity .pd-container-card__id small {
    min-height: 0;
    gap: 6px;
    font-size: 11px;
}

#panel-productivity .pd-type-chip {
    color: var(--secondary);
    font-weight: 600;
}

#panel-productivity .pd-container-card__pct {
    width: 38px;
    height: 38px;
}

#panel-productivity .pd-container-card__pct b { font-size: 11px; }
#panel-productivity .pd-container-card__pct i { font-size: 8px; }
#panel-productivity .pd-container-card__pct::before { inset: 3px; }

#panel-productivity .pd-container-card > p {
    min-height: 0;
    margin: 0;
    color: var(--secondary);
    font-size: 12.5px;
    line-height: 1.4;
    -webkit-line-clamp: 2;
}

#panel-productivity .pd-container-card > p.is-placeholder {
    color: var(--muted);
}

#panel-productivity .pd-container-card__stats {
    display: grid;
    gap: 8px;
}

#panel-productivity .pd-container-progress {
    height: 5px;
    margin: 0;
}

#panel-productivity .pd-container-card__meta {
    min-height: 0;
    color: var(--secondary);
    font-size: 12px;
}

#panel-productivity .pd-container-card.is-empty .pd-container-card__meta {
    color: var(--muted);
}

#panel-productivity .pd-next-action {
    min-height: 36px;
    padding-inline: 10px;
    border-radius: 9px;
}

#panel-productivity .pd-container-card__actions {
    min-height: 0;
    padding-top: 10px;
}

#panel-productivity .pd-container-card__tools {
    opacity: .85;
}

@media (max-width: 600px) {
    #panel-productivity .pd-container-card {
        min-height: 0;
        padding: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #panel-productivity *,
    #panel-productivity *::before,
    #panel-productivity *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ==========================================================================
   PARA cards — hierarquia legível, cor só para identificar
   Cada bloco tem rótulo. A cor do container pinta avatar, chip e anel —
   não o fundo inteiro.
   ========================================================================== */
#panel-productivity .pd-container-card {
    gap: 12px;
    min-height: 0;
    padding: 14px 14px 12px 16px;
    border: 1px solid var(--macos-hairline, var(--line));
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 1px 2px color-mix(in srgb, #000 4%, transparent);
    transform: none;
    transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
#panel-productivity .pd-container-card::after,
#panel-productivity .pd-container-card::before { display: none; }
#panel-productivity .pd-container-card:hover,
#panel-productivity .pd-container-card:active {
    transform: none;
    border-color: color-mix(in srgb, var(--container-color, var(--line-strong)) 28%, var(--line));
    background: var(--surface);
    box-shadow: 0 2px 8px color-mix(in srgb, #000 6%, transparent);
}
#panel-productivity .pd-container-card.is-complete {
    background: var(--surface);
    border-color: var(--macos-hairline, var(--line));
}

#panel-productivity .pd-container-card__head {
    min-height: 0;
    gap: 10px;
}
#panel-productivity .pd-container-card__avatar {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: color-mix(in srgb, var(--container-color, var(--soft)) 18%, var(--soft));
    box-shadow: none;
    color: var(--container-color, var(--secondary));
    font-size: 13px;
    font-weight: 700;
}
#panel-productivity .pd-container-card__avatar .pd-item-icon { font-size: 16px; }
#panel-productivity .pd-container-card__id { gap: 4px; }
#panel-productivity .pd-container-card__id h3 {
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -.015em;
    color: var(--text);
}
#panel-productivity .pd-container-card__id small {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    min-height: 0;
    overflow: visible;
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    white-space: normal;
    text-overflow: unset;
}

#panel-productivity .pd-type-chip {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--container-color, var(--soft)) 14%, var(--soft));
    color: var(--container-color, var(--secondary));
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
#panel-productivity .pd-area-tag,
#panel-productivity .pd-card-date {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--soft);
    color: var(--secondary);
    font-size: 11px;
    font-weight: 550;
}

#panel-productivity .pd-container-card__pct {
    width: 36px;
    height: 36px;
    padding: 0;
    background: conic-gradient(
        var(--container-color, var(--text)) calc(var(--container-progress, 0) * 1%),
        var(--line) 0
    );
}
#panel-productivity .pd-container-card__pct::before {
    inset: 3px;
    box-shadow: none;
    background: var(--surface);
}
#panel-productivity .pd-container-card:hover .pd-container-card__pct::before {
    background: var(--surface);
}
#panel-productivity .pd-container-card__pct b {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text);
}
#panel-productivity .pd-container-card__pct i {
    font-size: 8px;
    color: var(--muted);
}

#panel-productivity .pd-container-card > p,
#panel-productivity .pd-container-card__outcome {
    min-height: 0;
    margin: 0;
    color: var(--secondary);
    font-size: 13px;
    line-height: 1.45;
}
#panel-productivity .pd-container-card > p.is-placeholder,
#panel-productivity .pd-container-card__outcome.is-placeholder {
    color: var(--muted);
    font-style: italic;
}

#panel-productivity .pd-card-block {
    display: grid;
    gap: 6px;
    padding: 8px 10px 10px;
    border: 1px solid var(--macos-hairline, var(--line));
    border-radius: 10px;
    background: color-mix(in srgb, var(--soft) 55%, var(--surface));
}
#panel-productivity .pd-card-block__label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
#panel-productivity .pd-card-block__label > svg {
    flex-shrink: 0;
    opacity: .8;
}
#panel-productivity .pd-card-block__label > em {
    margin-left: auto;
    font-style: normal;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
    color: var(--secondary);
}

#panel-productivity .pd-goal-path { margin: 0; }
#panel-productivity .pd-goal-step.is-next .pd-goal-step__dot {
    border-color: var(--container-color, var(--text));
    background: var(--container-color, var(--text));
    box-shadow: none;
}
#panel-productivity .pd-goal-step.is-next .pd-goal-step__name {
    color: var(--text);
    font-weight: 600;
}
#panel-productivity .pd-goal-step.is-done .pd-goal-step__dot {
    border-color: var(--muted);
    background: var(--muted);
}
#panel-productivity .pd-goal-step__hit:hover { background: color-mix(in srgb, var(--hover) 80%, transparent); }

#panel-productivity .pd-container-progress {
    height: 3px;
    background: var(--line);
    box-shadow: none;
}
#panel-productivity .pd-container-progress span {
    background: var(--container-color, var(--text));
    box-shadow: none;
}

#panel-productivity .pd-next-action {
    min-height: 32px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    color: var(--text);
    font-size: 13px;
}
#panel-productivity .pd-next-action > svg {
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
}
#panel-productivity .pd-next-action:hover {
    background: var(--hover);
    color: var(--text);
    border-color: transparent;
}

#panel-productivity .pd-container-card__meta {
    min-height: 0;
    color: var(--muted);
    font-size: 12px;
}
#panel-productivity .pd-container-card__actions {
    min-height: 0;
    padding-top: 8px;
    border-top: 1px solid var(--macos-hairline, var(--line));
}
#panel-productivity .pd-container-card__actions button.is-primary {
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-size: 12.5px;
    font-weight: 600;
}
#panel-productivity .pd-container-card__actions button.is-primary:hover {
    background: var(--hover);
    color: var(--text);
    border-color: var(--line-strong, var(--line));
}
#panel-productivity .pd-container-card__tools {
    opacity: .7;
}
#panel-productivity .pd-container-card__tools button {
    width: 26px;
    min-height: 26px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
}
#panel-productivity .pd-container-card__tools button:hover {
    background: var(--hover);
    color: var(--text);
    border-color: transparent;
}

@media (max-width: 600px) {
    #panel-productivity .pd-container-card {
        min-height: 0;
        padding: 16px;
    }
    #panel-productivity .pd-container-card__avatar,
    #panel-productivity .pd-container-card__avatar:has(.pd-item-icon),
    #panel-productivity .pd-container-card__pct {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }
}

/* ==========================================================================
   Coluna única do card
   Recuos de 8px, avatar que encolhia com emoji e anel 36px vs 32px
   deixavam título, resultado, caminho e rodapé em eixos diferentes.
   ========================================================================== */
#panel-productivity .pd-para-hero {
    margin-bottom: 16px;
    padding: 0 0 12px;
}
#panel-productivity .pd-area-group__head {
    min-height: 28px;
    margin-bottom: 10px;
    padding: 0;
}
#panel-productivity .pd-container-grid { gap: 14px; }

#panel-productivity .pd-container-card {
    gap: 12px;
    padding: 16px;
}
#panel-productivity .pd-container-card__head,
#panel-productivity .pd-container-card__id,
#panel-productivity .pd-container-card__outcome,
#panel-productivity .pd-container-card > p,
#panel-productivity .pd-container-card__stats,
#panel-productivity .pd-container-card__meta,
#panel-productivity .pd-container-card__actions,
#panel-productivity .pd-container-progress,
#panel-productivity .pd-card-block,
#panel-productivity .pd-next-action,
#panel-productivity .pd-goal-projects,
#panel-productivity .pd-goal-path {
    margin: 0;
}

#panel-productivity .pd-container-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
}
#panel-productivity .pd-container-card__avatar,
#panel-productivity .pd-container-card__avatar:has(.pd-item-icon) {
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    width: 32px;
    min-width: 32px;
    height: 32px;
    margin: 0;
    background: color-mix(in srgb, var(--container-color, var(--soft)) 18%, var(--soft));
    font-size: 13px;
    line-height: 1;
}
#panel-productivity .pd-container-card__avatar .pd-item-icon,
#panel-productivity .pd-container-card__avatar .pd-item-icon--lg {
    font-size: 16px;
    line-height: 1;
}
#panel-productivity .pd-container-card__id {
    display: grid;
    gap: 5px;
    min-width: 0;
    flex: 1;
}
#panel-productivity .pd-container-card__id h3 {
    margin: 0;
    line-height: 1.25;
}
#panel-productivity .pd-container-card__id small {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin: 0;
    overflow: visible;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    text-transform: none;
    white-space: normal;
    text-overflow: unset;
}
#panel-productivity .pd-type-chip,
#panel-productivity .pd-area-tag,
#panel-productivity .pd-card-date,
#panel-productivity .pd-container-card__id small .pd-lifecycle {
    display: inline-flex;
    align-items: center;
    height: 18px;
    box-sizing: border-box;
    line-height: 18px;
    vertical-align: middle;
}

#panel-productivity .pd-container-card__pct {
    display: grid;
    flex: 0 0 32px;
    place-items: center;
    width: 32px;
    min-width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
}
#panel-productivity .pd-container-card__pct::before { inset: 3px; }

#panel-productivity .pd-container-card__outcome,
#panel-productivity .pd-container-card > p {
    margin: 0;
    line-height: 1.45;
}

#panel-productivity .pd-card-block {
    gap: 8px;
    padding: 10px;
}
#panel-productivity .pd-card-block__label {
    min-height: 16px;
    line-height: 16px;
}
#panel-productivity .pd-card-block .pd-next-action {
    min-height: 28px;
    margin: 0;
    padding: 0;
}
#panel-productivity .pd-goal-path,
#panel-productivity .pd-goal-projects {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
}
#panel-productivity .pd-goal-step__hit,
#panel-productivity .pd-goal-project {
    min-height: 24px;
    padding: 2px 0;
    border-radius: 6px;
}
#panel-productivity .pd-goal-step__hit {
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}
#panel-productivity .pd-goal-step__rail { padding-top: 6px; }
#panel-productivity .pd-goal-step__name { padding: 3px 0 4px; }
#panel-productivity .pd-goal-project { padding-inline: 0; }

#panel-productivity .pd-container-card__stats {
    display: grid;
    gap: 8px;
    margin: 0;
}
#panel-productivity .pd-container-card__stats:empty { display: none; }
#panel-productivity .pd-container-progress {
    height: 3px;
    margin: 0;
}
#panel-productivity .pd-container-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0;
    min-height: 16px;
}

#panel-productivity .pd-container-card__actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    margin: 0;
    padding-top: 10px;
}
#panel-productivity .pd-container-card__actions button,
#panel-productivity .pd-container-card__actions button.is-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    min-height: 28px;
}
#panel-productivity .pd-container-card__tools {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    margin-left: auto;
    opacity: 1;
}
#panel-productivity .pd-container-card__tools button {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft);
    color: var(--text);
    opacity: 1;
}
#panel-productivity .pd-container-card__tools button .pd-icon {
    width: 16px;
    height: 16px;
    stroke-width: 2.25;
}
#panel-productivity .pd-container-card__tools button:hover {
    background: var(--hover);
    border-color: var(--line-strong, var(--line));
    color: var(--text);
}
#panel-productivity .pd-container-card__tools .pd-container-card__danger {
    color: #dc2626;
    background: color-mix(in srgb, #dc2626 10%, var(--surface));
    border-color: color-mix(in srgb, #dc2626 28%, var(--line));
}
#panel-productivity .pd-container-card__tools .pd-container-card__danger:hover {
    color: #b91c1c;
    background: color-mix(in srgb, #dc2626 16%, var(--surface));
}

/* Próxima ação: título completo (quebra em 2 linhas), data embaixo, ícone no eixo do texto.
   Status do projeto: selo na mesma fileira, sem cair sozinho à direita. */
#panel-productivity .pd-card-block__label {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 14px;
    line-height: 1;
}
#panel-productivity .pd-card-block__label > svg {
    display: block;
    width: 13px;
    height: 13px;
    color: var(--secondary);
    opacity: 1;
    stroke-width: 2.1;
}

#panel-productivity .pd-next-action,
#panel-productivity .pd-card-block .pd-next-action {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    align-items: start;
    column-gap: 8px;
    row-gap: 0;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: var(--surface);
    box-shadow: none;
    color: var(--text);
    font-size: 13px;
    line-height: 1.35;
    text-align: left;
}
#panel-productivity .pd-next-action > svg,
#panel-productivity .pd-card-block .pd-next-action > svg {
    display: block;
    width: 14px;
    height: 14px;
    margin-top: 1.5px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    opacity: 1;
    stroke-width: 2.15;
}
#panel-productivity .pd-next-action__body,
#panel-productivity .pd-next-action > .pd-next-action__body {
    display: grid;
    gap: 3px;
    min-width: 0;
    overflow: visible;
    white-space: normal;
    text-overflow: unset;
}
#panel-productivity .pd-next-action .pd-next-action__title {
    display: block;
    min-width: 0;
    overflow: visible;
    color: var(--text);
    font-weight: 550;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-overflow: unset;
}
#panel-productivity .pd-next-action > b,
#panel-productivity .pd-next-action__body > b {
    display: block;
    min-width: 0;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    white-space: nowrap;
}
#panel-productivity .pd-next-action > b.is-overdue,
#panel-productivity .pd-next-action__body > b.is-overdue {
    color: var(--bad);
}
#panel-productivity .pd-next-action.is-empty,
#panel-productivity .pd-next-action.is-done {
    background: transparent;
    color: var(--muted);
}
#panel-productivity .pd-next-action.is-empty > svg,
#panel-productivity .pd-next-action.is-done > svg { color: var(--secondary); }
#panel-productivity .pd-next-action.is-empty .pd-next-action__title,
#panel-productivity .pd-next-action.is-done .pd-next-action__title {
    color: var(--secondary);
    font-weight: 500;
}

#panel-productivity .pd-container-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px 10px;
    min-height: 22px;
    color: var(--secondary);
    font-size: 12px;
    font-weight: 550;
}
#panel-productivity .pd-container-card__meta > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1;
}
#panel-productivity .pd-container-card__meta > span > svg {
    display: block;
    color: var(--text);
    opacity: 1;
    stroke-width: 2.15;
}
#panel-productivity .pd-container-card__meta .pd-health {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 0;
    padding: 3px 8px;
    line-height: 1;
}
#panel-productivity .pd-container-card__meta .pd-health > svg {
    display: block;
    opacity: 1;
    stroke-width: 2.15;
}

#panel-productivity .pd-card-block {
    gap: 2px;
    padding: 6px 8px;
}
#panel-productivity .pd-card-block__label { display: none; }
#panel-productivity .pd-container-card__stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 0;
}
#panel-productivity .pd-container-card__stats .pd-health {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 3px 8px;
    line-height: 1;
}
#panel-productivity .pd-container-card__stats .pd-health > svg {
    display: block;
    opacity: 1;
    stroke-width: 2.15;
}

/* Fora da lista: some busca, layout e filtros de tarefa. */
#panel-productivity .pd-workspace:not(.is-task-chrome) .pd-search,
#panel-productivity .pd-workspace:not(.is-task-chrome) .pd-layout-seg,
#panel-productivity .pd-workspace:not(.is-task-chrome) .pd-groupby,
#panel-productivity .pd-workspace:not(.is-task-chrome) [data-pd-filter-open],
#panel-productivity .pd-workspace:not(.is-task-chrome) [data-pd-sort] {
    display: none;
}

#panel-productivity .pd-habits-view:not([hidden]) {
    display: flex;
    flex-direction: column;
    min-height: min(52vh, 520px);
}
#panel-productivity .pd-habit-grid {
    width: 100%;
}
#panel-productivity .pd-habit-grid:has(> .pd-empty) {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: min(48vh, 440px);
}
#panel-productivity .pd-habit-grid > .pd-empty {
    min-height: 0;
    padding: 12px;
}

/* O empty do Hoje não pode virar flex-row com sapo/jogo/sugestões ao lado. */
#panel-productivity .pd-task-groups:has(> .pd-empty) {
    display: block;
    min-height: 0;
}
#panel-productivity .pd-task-groups:has(> .pd-empty:only-child) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(220px, 40vh, 380px);
}
#panel-productivity .pd-today-game,
#panel-productivity .pd-frog,
#panel-productivity .pd-suggestions {
    width: 100%;
    min-width: 0;
}
#panel-productivity .pd-container-card > .pd-next-action,
#panel-productivity .pd-next-action {
    min-height: 0;
    padding: 8px 10px;
}

/* ==========================================================================
   Modais — sheet Notion (head/body/footer). Só aplica display em [open].
   ========================================================================== */
#panel-productivity .pd-modal:not([open]) {
    display: none;
}
#panel-productivity .pd-modal[open] {
    display: flex;
    flex-direction: column;
    width: min(92vw, 480px);
    max-height: min(88dvh, 720px);
    margin: auto;
    padding: 0;
    overflow: visible;
    border: 1px solid var(--line);
    border-radius: var(--pd-panel-radius, 14px);
    background: var(--elevated);
    color: var(--text);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--line) 55%, transparent),
        0 18px 48px color-mix(in srgb, #000 22%, transparent);
}
#panel-productivity .pd-modal--sm[open] {
    width: min(92vw, 400px);
    max-height: min(80dvh, 560px);
}
#panel-productivity .pd-modal.pd-capture[open],
#panel-productivity .pd-modal.pd-container-modal[open] {
    width: min(94vw, 560px);
}
#panel-productivity .pd-modal.pd-note-editor[open] {
    width: min(94vw, 720px);
    max-height: min(90dvh, 820px);
}
#panel-productivity .pd-modal[data-pd-caldav-modal][open] {
    width: min(92vw, 460px);
}
#panel-productivity .pd-modal::backdrop {
    background: color-mix(in srgb, #000 28%, transparent);
}

#panel-productivity .pd-modal[open] > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: inherit;
    margin: 0;
    padding: 0;
    gap: 0;
    overflow: hidden;
    border-radius: inherit;
}

#panel-productivity .pd-modal__head {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    margin: 0;
    padding: 10px 14px 10px 16px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--soft) 28%, var(--elevated));
}
#panel-productivity .pd-modal__head h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -.015em;
    color: var(--text);
}
#panel-productivity .pd-modal__head .pd-icon-btn {
    width: 28px;
    height: 28px;
    min-height: 28px;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--secondary);
}
#panel-productivity .pd-modal__head .pd-icon-btn:hover {
    background: var(--hover);
    color: var(--text);
}
#panel-productivity .pd-modal__head .pd-icon-btn svg {
    display: block;
    stroke-width: 2.15;
}

#panel-productivity .pd-modal__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    overflow: auto;
    padding: 16px;
}
#panel-productivity .pd-modal__body > .pd-muted {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--secondary);
}

#panel-productivity .pd-modal__footer {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
    padding: 10px 16px 12px;
    border-top: 1px solid var(--line);
    background: var(--elevated);
}
#panel-productivity .pd-modal__footer:has(> span:not(:empty)) {
    justify-content: space-between;
}
#panel-productivity .pd-modal__footer > span {
    color: var(--muted);
    font-size: 12px;
}
#panel-productivity .pd-modal__footer > span:empty {
    display: none;
}
#panel-productivity .pd-modal__footer > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
}
#panel-productivity .pd-modal__footer:has(> span:not(:empty)) > div {
    margin-left: 0;
}
#panel-productivity .pd-modal__footer .pd-primary-btn,
#panel-productivity .pd-modal__footer .pd-secondary-btn,
#panel-productivity .pd-modal__footer .pd-danger-btn {
    min-height: 32px;
    height: 32px;
    min-width: 72px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 550;
}
#panel-productivity .pd-modal__footer kbd {
    min-width: 18px;
    padding: 1px 5px;
    font-size: 11px;
}

/* Campos --------------------------------------------------------------- */
#panel-productivity .pd-modal .pd-field {
    display: grid;
    gap: 6px;
    margin: 0;
    color: var(--secondary);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
#panel-productivity .pd-modal .pd-field > span,
#panel-productivity .pd-modal .pd-field__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--secondary);
    font-size: 12.5px;
    font-weight: 500;
}
#panel-productivity .pd-modal .pd-field > span > svg,
#panel-productivity .pd-modal .pd-field__label svg {
    flex-shrink: 0;
    color: var(--muted);
    stroke-width: 2.15;
}
#panel-productivity .pd-modal .pd-field :is(input, select, textarea):not(.pd-tagfield__input):not([type="hidden"]),
#panel-productivity .pd-capture__fields :is(input, select):not(.pd-tagfield__input):not([type="hidden"]) {
    width: 100%;
    min-width: 0;
    min-height: 32px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
}
#panel-productivity .pd-modal .pd-field textarea,
#panel-productivity .pd-capture textarea {
    height: auto;
    min-height: 72px;
    padding: 8px 10px;
    line-height: 1.45;
    resize: vertical;
}
#panel-productivity .pd-modal .pd-field--row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
#panel-productivity .pd-modal .pd-field--row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-height: 16px;
    padding: 0;
}
#panel-productivity .pd-modal .fm-select,
#panel-productivity .pd-modal .fm-select__trigger {
    width: 100%;
    min-width: 0;
    min-height: 32px;
    height: 32px;
}
#panel-productivity .pd-modal .pd-container-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

/* Captura: duas colunas de propriedade (rótulo | controle) */
#panel-productivity .pd-capture .pd-title-row {
    align-items: center;
    gap: 10px;
}
#panel-productivity .pd-capture .pd-emoji-btn,
#panel-productivity .pd-container-modal .pd-emoji-btn {
    width: 36px;
    height: 36px;
    min-height: 36px;
    font-size: 18px;
    border-radius: 8px;
    background: var(--soft);
}
#panel-productivity .pd-container-modal .pd-title-row {
    align-items: center;
}
#panel-productivity .pd-container-modal .pd-title-row > input[type="color"] {
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 3px;
    border-radius: 8px;
}
#panel-productivity .pd-modal .pd-emoji-btn.is-empty {
    opacity: .78;
}
#panel-productivity .pd-modal .pd-emoji-btn.is-empty:hover {
    opacity: 1;
}
#panel-productivity .pd-capture__title {
    flex: 1;
    width: auto;
    min-width: 0;
    padding: 2px 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.02em;
}
#panel-productivity .pd-capture textarea {
    margin: 0;
    min-height: 64px;
}
#panel-productivity .pd-capture__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 18px;
}
#panel-productivity .pd-capture__fields > label {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--secondary);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
#panel-productivity .pd-capture__fields > label > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--secondary);
}
#panel-productivity .pd-capture__fields > label > span:first-child > svg {
    flex-shrink: 0;
    color: var(--muted);
    stroke-width: 2.15;
}
#panel-productivity .pd-tag-input {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--muted);
    overflow: visible;
}
#panel-productivity .pd-tag-input > svg {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
}
#panel-productivity .pd-tag-input input[type="hidden"] {
    display: none !important;
}
#panel-productivity .pd-tagfield {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 32px;
    height: auto;
    padding: 3px 8px;
    box-sizing: border-box;
    overflow: visible;
}
#panel-productivity .pd-tag-input input,
#panel-productivity .pd-tagfield__input {
    flex: 1 1 auto;
    width: auto;
    min-width: 8ch;
    height: 24px;
    min-height: 24px;
    max-height: 24px;
    margin: 0;
    padding: 0 2px;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 13px;
    line-height: 24px;
}

/* Confirmação: alinhada à esquerda, não alerta macOS */
#panel-productivity .pd-confirm[open] {
    width: min(92vw, 400px);
}
#panel-productivity .pd-confirm form,
#panel-productivity .pd-confirm .pd-modal__head,
#panel-productivity .pd-confirm .pd-modal__body {
    text-align: left;
}
#panel-productivity .pd-confirm .pd-modal__body p {
    margin: 0;
    color: var(--secondary);
    font-size: 13.5px;
    line-height: 1.5;
}
#panel-productivity .pd-confirm .pd-modal__footer {
    justify-content: flex-end;
    border-top: 1px solid var(--line);
    padding-top: 10px;
}
#panel-productivity .pd-confirm .pd-modal__footer > div {
    width: auto;
    margin-left: auto;
}
#panel-productivity .pd-confirm .pd-modal__footer button {
    flex: none;
}

/* Atalhos */
#panel-productivity .pd-shortcuts dl {
    display: grid;
    gap: 0;
    margin: 0;
}
#panel-productivity .pd-shortcuts dl > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 34px;
    padding: 4px 0;
    border-top: 1px solid var(--line);
}
#panel-productivity .pd-shortcuts dl > div:first-child {
    border-top: 0;
    padding-top: 0;
}
#panel-productivity .pd-shortcuts dt {
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
}
#panel-productivity .pd-shortcuts dd {
    display: flex;
    gap: 4px;
    margin: 0;
}

/* Nota */
#panel-productivity .pd-note-editor .pd-modal__body {
    gap: 10px;
    min-height: min(52dvh, 480px);
}
#panel-productivity .pd-note-editor__title {
    width: 100%;
    min-height: 40px;
    height: auto;
    padding: 4px 0 8px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 22px;
    font-weight: 650;
    letter-spacing: -.02em;
}
#panel-productivity .pd-note-editor textarea[name="markdown"] {
    flex: 1 1 auto;
    min-height: 220px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.5;
    resize: vertical;
}
#panel-productivity .pd-note-editor .pd-notes-tabs {
    width: max-content;
}

@media (max-width: 560px) {
    #panel-productivity .pd-capture__fields {
        grid-template-columns: 1fr;
    }
    #panel-productivity .pd-modal__footer {
        flex-direction: row;
        align-items: center;
    }
    #panel-productivity .pd-modal__footer > span {
        display: none;
    }
    #panel-productivity .pd-modal__footer > div {
        width: 100%;
    }
    #panel-productivity .pd-modal__footer :is(.pd-primary-btn, .pd-secondary-btn, .pd-danger-btn) {
        flex: 1;
    }
}

/* ==========================================================================
   Mobile shell — dock, canvas e modo foco
   ========================================================================== */
@media (max-width: 768px) {
    #panel-productivity .pd-workspace {
        display: block;
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        max-height: none;
    }

    #panel-productivity .pd-rail {
        position: absolute !important;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 8;
        width: min(280px, 88vw);
        height: 100% !important;
        max-height: none;
        transform: translateX(-102%);
        box-shadow: none;
        visibility: hidden;
        pointer-events: none;
        transition: transform 220ms var(--ease, ease), visibility 0s 220ms;
    }

    #panel-productivity .pd-workspace.is-rail-open .pd-rail {
        transform: translateX(0);
        box-shadow: 18px 0 48px rgba(0, 0, 0, .28);
        visibility: visible;
        pointer-events: auto;
        transition: transform 220ms var(--ease, ease), visibility 0s;
    }

    #panel-productivity .pd-rail__resize {
        display: none;
    }

    #panel-productivity .pd-rail,
    #panel-productivity .pd-main,
    #panel-productivity .pd-detail {
        height: auto;
    }

    #panel-productivity .pd-main {
        display: block;
        grid-row: auto;
        grid-column: auto;
        height: auto;
        min-height: 0;
        overflow: visible;
        padding-bottom: 0;
        background: var(--soft);
    }

    #panel-productivity .pd-stage {
        height: auto;
        min-height: 0;
        overflow: visible;
        padding: 16px var(--pd-gutter) calc(var(--pd-mobile-dock-h, 54px) + env(safe-area-inset-bottom, 0px) + 28px);
    }

    #tab-productivity:checked ~ .pd-mobile-dock {
        position: fixed;
        z-index: 130;
        inset: auto 0 0 0;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: stretch;
        justify-items: stretch;
        column-gap: 0;
        box-sizing: border-box;
        height: calc(var(--pd-mobile-dock-h, 56px) + env(safe-area-inset-bottom, 0px));
        padding: 0 2px env(safe-area-inset-bottom, 0px);
        border-top: 1px solid var(--line);
        background: var(--elevated);
        box-shadow: 0 -4px 24px color-mix(in srgb, #000 8%, transparent);
        overflow: visible;
    }

    .pd-mobile-dock__item,
    .pd-mobile-dock__fab {
        -webkit-appearance: none;
        appearance: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 3px;
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        height: 100%;
        min-height: 0;
        max-height: none;
        margin: 0;
        padding: 6px 0 0;
        border: 0;
        background: transparent;
        color: var(--muted);
        font: inherit;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .pd-mobile-dock__item:focus,
    .pd-mobile-dock__item:focus-visible,
    .pd-mobile-dock__fab:focus,
    .pd-mobile-dock__fab:focus-visible {
        outline: none;
        box-shadow: none;
    }

    .pd-mobile-dock__icon {
        display: grid;
        place-items: center;
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        border-radius: 10px;
        background: transparent;
    }

    .pd-mobile-dock__item svg,
    .pd-mobile-dock__fab svg {
        display: block;
        width: 22px;
        height: 22px;
        flex: none;
        stroke: currentColor;
    }

    .pd-mobile-dock__label {
        display: block;
        flex: 0 0 12px;
        width: 100%;
        max-width: 100%;
        height: 12px;
        overflow: hidden;
        color: inherit;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: -0.02em;
        line-height: 12px;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pd-mobile-dock__item.is-active {
        color: var(--accent);
    }

    .pd-mobile-dock__item.is-active .pd-mobile-dock__icon {
        background: color-mix(in srgb, var(--accent) 14%, transparent);
    }

    .pd-mobile-dock__fab::after {
        content: "";
        flex: 0 0 12px;
        width: 100%;
        height: 12px;
    }

    .pd-mobile-dock__fab .pd-mobile-dock__icon {
        border-radius: 50%;
        background: var(--accent);
        color: #fff;
        box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
    }

    #panel-productivity .pd-header {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        flex: 0 0 auto;
        gap: 10px;
        min-height: 0;
        padding: 10px var(--pd-gutter) 12px;
        border-bottom: 1px solid var(--line);
        background: var(--elevated);
        box-shadow: 0 1px 0 color-mix(in srgb, var(--line) 70%, transparent);
    }

    #panel-productivity .pd-header h1 {
        display: block;
        max-width: none;
        overflow: hidden;
        font-size: 22px;
        letter-spacing: -.03em;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #panel-productivity .pd-header__actions {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
    }

    #panel-productivity .pd-header__actions > .pd-search {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        max-width: none;
    }

    #panel-productivity .pd-header__actions > .pd-icon-btn,
    #panel-productivity .pd-header__actions > .pd-primary-btn {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        max-width: 36px;
        max-height: 36px;
        padding: 0;
    }

    #panel-productivity .pd-notify-btn {
        overflow: visible;
    }

    #panel-productivity .pd-menu-btn {
        display: none;
    }

    #panel-productivity .pd-toast-region {
        right: 14px;
        bottom: calc(var(--pd-mobile-dock-h, 54px) + env(safe-area-inset-bottom, 0px) + 12px);
        width: min(360px, calc(100vw - 28px));
    }

    #panel-productivity .pd-workspace.is-focus-mode .pd-header {
        display: none;
    }

    #panel-productivity .pd-workspace.is-focus-mode .pd-main {
        background: transparent;
    }

    #panel-productivity .pd-workspace.is-focus-mode .pd-stage {
        padding: 0;
    }

    #panel-productivity .pd-workspace.is-focus-mode .pd-focus-view {
        display: flex;
        flex: 1;
        flex-direction: column;
        gap: 12px;
        min-height: 0;
        padding: 18px var(--pd-gutter) 12px;
    }

    #panel-productivity .pd-workspace.is-focus-mode .pd-focus-card {
        flex: 1 1 auto;
        min-height: min(58vh, 480px);
        padding: 28px 18px 24px;
    }

    #panel-productivity .pd-workspace.is-focus-mode .pd-focus-side {
        flex: 0 0 auto;
        padding: 16px;
    }

    #panel-productivity .pd-workspace.is-focus-mode .pd-timer {
        font-size: clamp(64px, 22vw, 88px);
    }

    #panel-productivity .pd-workspace.is-focus-mode .pd-timer__actions {
        flex-wrap: wrap;
        justify-content: center;
    }

    #panel-productivity .pd-workspace.is-focus-mode .pd-timer__actions .pd-primary-btn {
        flex: 1 1 100%;
        max-width: 280px;
        min-height: 48px;
    }
}

@media (min-width: 769px) {
    .pd-mobile-dock {
        display: none;
    }
}

/* iPhone / celular — uma camada só, por cima das queries anteriores. */
@media (max-width: 768px) {
    html.pd-overlay-open,
    html.pd-overlay-open body {
        overflow: hidden;
    }

    .app:has(#tab-productivity:checked),
    .tabs:has(#tab-productivity:checked) {
        overflow: visible !important;
        overflow-x: visible !important;
        contain: none;
        transform: none;
    }

    #panel-productivity {
        contain: none !important;
        overflow: visible !important;
        transform: none !important;
        animation: none !important;
        filter: none;
    }

    #panel-productivity .pd-workspace {
        position: relative;
    }

    #panel-productivity .pd-scrim {
        position: fixed !important;
        inset: 0;
        z-index: 150;
        display: block !important;
        background: rgba(0, 0, 0, .46);
    }

    #panel-productivity .pd-scrim[hidden] {
        display: none !important;
    }

    #panel-productivity .pd-rail {
        position: fixed !important;
        top: 0;
        right: auto;
        bottom: 0;
        left: 0;
        z-index: 160;
        width: min(320px, 86vw);
        height: auto !important;
        max-height: none;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--elevated);
        box-shadow: none;
    }

    #panel-productivity .pd-workspace.is-rail-open .pd-rail {
        box-shadow: 18px 0 48px rgba(0, 0, 0, .28);
    }

    #panel-productivity .pd-rail__close {
        display: inline-grid;
    }

    #panel-productivity .pd-workspace.has-detail .pd-detail,
    #panel-productivity .pd-detail {
        position: fixed !important;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 170;
        width: 100%;
        height: min(88dvh, 740px);
        max-height: min(88dvh, 740px);
        border: 0;
        border-top: 1px solid var(--line);
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -16px 48px rgba(0, 0, 0, .28);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    #panel-productivity .pd-detail[hidden] {
        display: none !important;
    }

    body:has(.pd-workspace.is-rail-open) .pd-mobile-dock,
    body:has(.pd-workspace.has-detail) .pd-mobile-dock,
    body:has(.pd-workspace.has-notify) .pd-mobile-dock {
        visibility: hidden;
        pointer-events: none;
    }

    #panel-productivity .pd-menu-btn {
        display: inline-grid;
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
    }

    #panel-productivity .pd-header__title {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    #panel-productivity [data-pd-sort] {
        display: inline-grid;
    }

    #panel-productivity .pd-search {
        width: auto;
    }

    #panel-productivity .pd-search input {
        height: 40px;
        font-size: 16px;
    }

    #panel-productivity .pd-filterbar {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 8px;
        padding: 10px var(--pd-gutter) 12px;
    }

    #panel-productivity .pd-filterbar > label {
        flex: 1 1 140px;
        min-width: 0;
    }

    #panel-productivity .pd-filterbar :is(input, select) {
        width: 100%;
        min-width: 0;
        height: 40px;
        font-size: 16px;
    }

    #panel-productivity .pd-empty {
        min-height: 220px;
        padding: 28px 16px 40px;
    }

    #panel-productivity .pd-section-head {
        margin-bottom: 12px;
    }

    #panel-productivity .pd-section-head h2 {
        font-size: 15px;
    }

    #panel-productivity .pd-frog {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px;
    }

    #panel-productivity .pd-frog__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    #panel-productivity .pd-frog__actions button {
        flex: 1 1 auto;
        min-height: 36px;
    }

    #panel-productivity .pd-task__actions {
        align-self: start;
        opacity: 1;
        margin-top: 2px;
    }

    #panel-productivity .pd-bulkbar {
        position: fixed;
        top: auto;
        right: 12px;
        bottom: calc(var(--pd-mobile-dock-h, 56px) + env(safe-area-inset-bottom, 0px) + 12px);
        left: 12px;
        z-index: 120;
        width: auto;
        max-width: none;
        margin: 0;
        justify-content: center;
    }

    #panel-productivity .pd-board {
        display: flex;
        align-items: stretch;
        gap: 12px;
        overflow-x: auto;
        padding-bottom: 8px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    #panel-productivity .pd-board-col {
        flex: 0 0 min(78vw, 300px);
        scroll-snap-align: start;
    }

    #panel-productivity .pd-table-wrap,
    #panel-productivity .pd-gantt,
    #panel-productivity .pd-cal {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #panel-productivity .pd-triage,
    #panel-productivity .pd-triage-empty {
        width: 100%;
        max-width: none;
    }

    #panel-productivity .pd-modal {
        width: 100%;
        max-width: none;
        max-height: min(92dvh, 100%);
        margin: auto 0 0;
        border-radius: 18px 18px 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    #panel-productivity .pd-modal form {
        padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    }

    #panel-productivity .pd-modal :is(input, select, textarea):not(.pd-tagfield__input) {
        font-size: 16px;
    }

    #panel-productivity .pd-tagfield {
        min-height: 40px;
    }

    #panel-productivity .pd-tagfield__input {
        height: 28px;
        min-height: 28px;
        max-height: 28px;
        font-size: 16px;
        line-height: 28px;
    }

    #panel-productivity .pd-workspace.is-focus-mode .pd-focus-view {
        padding: 16px var(--pd-gutter) calc(var(--pd-mobile-dock-h, 56px) + env(safe-area-inset-bottom, 0px) + 16px);
    }

    #panel-productivity .pd-focus-card {
        min-height: 0;
        padding: 22px 16px;
    }

    #panel-productivity .pd-container-grid,
    #panel-productivity .pd-resource-grid,
    #panel-productivity .pd-habit-grid {
        grid-template-columns: 1fr;
    }

    #panel-productivity .pd-prop {
        grid-template-columns: 1fr;
    }

    #panel-productivity .pd-toast-region {
        bottom: calc(var(--pd-mobile-dock-h, 56px) + env(safe-area-inset-bottom, 0px) + 12px);
    }

    /* Foco: sessão no telefone, sem a janela de duas colunas do desktop. */
    #panel-productivity .pd-workspace.is-focus-mode .pd-main {
        background: var(--bg);
    }

    #panel-productivity .pd-workspace.is-focus-mode .pd-stage {
        padding: 8px var(--pd-gutter) calc(var(--pd-mobile-dock-h, 56px) + env(safe-area-inset-bottom, 0px) + 12px);
    }

    #panel-productivity .pd-focus-view,
    #panel-productivity .pd-workspace.is-focus-mode .pd-focus-view {
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-height: 0;
        padding: 0;
    }

    #panel-productivity .pd-focus-card,
    #panel-productivity .pd-workspace.is-focus-mode .pd-focus-card {
        display: flex;
        flex: none;
        flex-direction: column;
        align-items: center;
        min-height: 0;
        padding: 22px 16px 18px;
        border: 0;
        border-radius: 20px;
        background: var(--elevated);
        box-shadow: none;
    }

    #panel-productivity .pd-focus-card .pd-rituals__head {
        display: none;
    }

    #panel-productivity .pd-focus-card__task {
        max-width: 100%;
        margin: 0 0 4px;
        padding: 0 4px;
        font-size: 17px;
        font-weight: 650;
        letter-spacing: -.03em;
        line-height: 1.3;
    }

    #panel-productivity .pd-timer,
    #panel-productivity .pd-workspace.is-focus-mode .pd-timer {
        margin: 8px 0 16px;
        font-size: clamp(56px, 17vw, 78px);
        letter-spacing: -.07em;
        line-height: 1;
    }

    #panel-productivity .pd-timer__modes {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        max-width: 100%;
        gap: 0;
        padding: 3px;
        border-radius: 12px;
    }

    #panel-productivity .pd-timer__modes button {
        min-width: 0;
        height: 36px;
        padding: 0 4px;
        border-radius: 9px;
        font-size: 13px;
        font-weight: 650;
        white-space: nowrap;
    }

    #panel-productivity .pd-timer__mode-lg {
        display: none;
    }

    #panel-productivity .pd-timer__mode-sm {
        display: inline;
    }

    #panel-productivity .pd-timer__phase {
        display: none;
    }

    #panel-productivity .pd-timer__actions,
    #panel-productivity .pd-workspace.is-focus-mode .pd-timer__actions {
        display: grid;
        grid-template-columns: repeat(3, 44px);
        flex-wrap: unset;
        justify-content: center;
        justify-items: center;
        align-items: center;
        width: 100%;
        margin-top: 16px;
        gap: 10px;
    }

    #panel-productivity .pd-timer__actions .pd-primary-btn,
    #panel-productivity .pd-workspace.is-focus-mode .pd-timer__actions .pd-primary-btn {
        grid-column: 1 / -1;
        flex: none;
        width: 100%;
        max-width: none;
        min-height: 48px;
        height: 48px;
        border-radius: 14px;
        font-size: 16px;
    }

    #panel-productivity .pd-timer__actions .pd-secondary-btn {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 44px;
        border-radius: 12px;
    }

    #panel-productivity .pd-timer__actions .pd-icon-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        border-radius: 50%;
    }

    #panel-productivity [data-pd-auto-break].is-active {
        color: var(--accent);
        background: var(--accent-soft);
    }

    #panel-productivity .pd-focus-side {
        display: flex;
        flex-direction: column;
        gap: 0;
        min-width: 0;
        padding: 0;
        overflow: hidden;
        border: 0;
        border-radius: 16px;
        background: var(--elevated);
        box-shadow: none;
    }

    #panel-productivity .pd-focus-side .pd-rituals__head {
        align-items: center;
        min-height: 48px;
        margin: 0;
        padding: 12px 16px 8px;
    }

    #panel-productivity .pd-focus-side .pd-eyebrow {
        display: none;
    }

    #panel-productivity .pd-focus-side h2 {
        font-size: 16px;
    }

    #panel-productivity .pd-focus-side [data-pd-focus-queue] {
        flex: none;
        min-height: 0;
    }

    #panel-productivity .pd-queue-item {
        display: flex;
        align-items: center;
        min-height: 48px;
        padding: 10px 16px;
        border-bottom: .5px solid var(--line);
        font-size: 15px;
        line-height: 1.3;
        text-align: left;
    }

    #panel-productivity .pd-queue-item:last-child {
        border-bottom: 0;
    }

    #panel-productivity .pd-focus-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        margin: 0;
        border-top: .5px solid var(--line);
    }

    #panel-productivity .pd-focus-stats span {
        padding: 14px 16px;
        border-radius: 0;
        background: transparent;
        font-size: 12px;
        text-align: left;
    }

    #panel-productivity .pd-focus-stats span + span {
        border-left: .5px solid var(--line);
    }

    #panel-productivity .pd-focus-stats strong {
        display: block;
        margin-bottom: 2px;
        font-size: 18px;
        font-weight: 650;
        letter-spacing: -.03em;
    }

    #panel-productivity .pd-panel-empty {
        padding: 20px 16px;
        font-size: 14px;
    }
}

/* ===== pages/productivity-phone.css ===== */
/* ==========================================================================
   Produtividade no celular — leitura, não desktop encolhido.
   Carrega depois de productivity-align.css. Só @media ≤768px.
   ========================================================================== */

@media (max-width: 768px) {
    #panel-productivity {
        --pd-gutter: 16px;
        --pd-row-gap: 0;
        --pd-check-size: 22px;
        --pd-task-line: 22px;
    }

    #panel-productivity .pd-main {
        background: var(--bg);
    }

    /* Cabeçalho: título grande, busca e sino. + / sort / menu ficam no dock. */
    #panel-productivity .pd-header {
        gap: 10px;
        padding: 8px var(--pd-gutter) 10px;
        background: var(--bg);
        border-bottom-color: transparent;
        box-shadow: none;
    }

    #panel-productivity .pd-header__title {
        display: flex;
        align-items: center;
        width: 100%;
        gap: 0;
        min-height: 34px;
    }

    #panel-productivity .pd-header h1 {
        max-width: none;
        overflow: hidden;
        margin: 0;
        font-size: 28px;
        font-weight: 760;
        letter-spacing: -.045em;
        line-height: 1.1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #panel-productivity .pd-menu-btn,
    #panel-productivity .pd-header__actions > .pd-primary-btn,
    #panel-productivity .pd-header__actions > [data-pd-sort],
    #panel-productivity .pd-layout-seg,
    #panel-productivity .pd-groupby {
        display: none !important;
    }

    #panel-productivity .pd-header__actions {
        align-items: center;
        gap: 8px;
    }

    #panel-productivity .pd-search {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
        height: 40px;
    }

    #panel-productivity .pd-search input {
        height: 40px;
        font-size: 16px;
    }

    #panel-productivity .pd-header__actions > .pd-icon-btn {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        max-width: 40px;
        max-height: 40px;
        padding: 0;
    }

    #panel-productivity .pd-stage {
        padding: 4px var(--pd-gutter) calc(var(--pd-mobile-dock-h, 56px) + env(safe-area-inset-bottom, 0px) + 24px);
    }

    /* Resumo numa linha: anel + “3 de 8”. Plano do dia fica no rail. */
    #panel-productivity .pd-summary {
        display: flex !important;
        align-items: center;
        gap: 12px;
        min-height: 0;
        margin: 0 0 4px;
        padding: 4px 0 10px;
        border: 0;
        background: transparent;
        box-shadow: none;
        grid-template-columns: none;
        grid-template-areas: none;
    }

    #panel-productivity .pd-ring {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
    }

    #panel-productivity .pd-summary__head {
        flex: 1 1 auto;
        min-width: 0;
    }

    #panel-productivity .pd-summary__head strong {
        font-size: 13px;
        font-weight: 650;
    }

    #panel-productivity .pd-summary__head span {
        font-size: 12.5px;
    }

    #panel-productivity .pd-summary__stats,
    #panel-productivity .pd-summary__action {
        display: none !important;
    }

    /* Rã compacta, em português. */
    #panel-productivity .pd-frog {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        min-height: 0;
        margin: 0 0 12px;
        padding: 14px 16px;
        border-radius: 14px;
        text-align: left;
    }

    #panel-productivity .pd-frog h2 {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--muted);
    }

    #panel-productivity .pd-frog p {
        font-size: 15px;
        font-weight: 650;
        line-height: 1.3;
        color: var(--text);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    #panel-productivity .pd-frog__actions {
        display: grid;
        grid-auto-columns: 1fr;
        grid-auto-flow: column;
        width: 100%;
        gap: 8px;
    }

    #panel-productivity .pd-frog__actions button {
        width: 100%;
        min-height: 36px;
        padding: 0 10px;
        font-size: 13px;
    }

    #panel-productivity .pd-frog [data-action="open-frog"] {
        display: none;
    }

    #panel-productivity .pd-suggestions {
        display: none;
    }

    /* Grupos estilo Lembretes: cabeçalho solto + cartão único. */
    #panel-productivity .pd-task-group + .pd-task-group {
        margin-top: 8px;
    }

    #panel-productivity .pd-task-group__head {
        min-height: 0;
        margin: 0;
        padding: 16px 16px 8px;
        background: transparent;
        border: 0;
    }

    #panel-productivity .pd-task-group__head h2 {
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--muted);
    }

    #panel-productivity .pd-task-group__head button {
        display: none;
    }

    #panel-productivity .pd-task-list {
        display: flex;
        flex-direction: column;
        gap: 0;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    #panel-productivity .pd-task-group:not(:has(.pd-add-inline)) .pd-task-list {
        border-radius: 0;
    }

    #panel-productivity .pd-add-inline {
        min-height: 44px;
        margin: 0 0 6px;
        padding: 0 16px;
        border: 0;
        border-radius: 0;
        background: transparent;
        font-size: 14px;
        justify-content: flex-start;
        text-align: left;
    }

    /* Linha de tarefa: título legível, checkbox tocável, sem arraste nem ⋮. */
    #panel-productivity .pd-task {
        --pd-check-size: 22px;
        --pd-task-line: 22px;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        min-height: 56px;
        margin: 0;
        padding: 12px 16px;
        border: 0;
        border-bottom: 1px solid var(--line);
        border-radius: 0;
        border-left: 0;
        background: transparent;
        box-shadow: none;
        contain: none;
        transform: none;
        -webkit-tap-highlight-color: transparent;
    }

    #panel-productivity .pd-task:first-child {
        border-top: 1px solid var(--line);
    }

    #panel-productivity .pd-task::before {
        content: "";
        position: absolute;
        top: 12px;
        bottom: 12px;
        left: 0;
        width: 3px;
        border-radius: 0 2px 2px 0;
        background: var(--priority-color);
    }

    #panel-productivity .pd-task.pd-priority-4::before {
        content: none;
    }

    #panel-productivity .pd-task-group:not(:has(.pd-add-inline)) .pd-task:last-child {
        border-bottom: 0;
    }

    #panel-productivity .pd-task:hover,
    #panel-productivity .pd-task:active {
        transform: none;
        box-shadow: none;
        background: color-mix(in srgb, var(--hover, var(--soft)) 70%, transparent);
    }

    #panel-productivity .pd-drag,
    #panel-productivity .pd-task__actions {
        display: none !important;
    }

    #panel-productivity .pd-task__title-row {
        align-items: flex-start;
        gap: 12px;
        min-height: 22px;
        font-size: 16.5px;
        line-height: 22px;
    }

    #panel-productivity .pd-check {
        position: relative;
        width: 22px;
        height: 22px;
        min-width: 22px;
        min-height: 22px;
        max-width: 22px;
        max-height: 22px;
        margin-top: 0;
        border-width: 2px;
    }

    /* Área de toque ~44px, recuo à direita para não cobrir o título. */
    #panel-productivity .pd-check::before {
        content: "";
        position: absolute;
        top: -11px;
        right: -6px;
        bottom: -11px;
        left: -11px;
    }

    #panel-productivity .pd-task__title {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        color: var(--text);
        font-size: 16.5px;
        font-weight: 600;
        letter-spacing: -.02em;
        line-height: 22px;
        white-space: normal;
        text-overflow: unset;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
    }

    #panel-productivity .pd-task.is-completed .pd-task__title {
        color: var(--muted);
    }

    #panel-productivity .pd-task__meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 10px;
        min-height: 0;
        margin-top: 4px;
        padding-left: calc(22px + 12px);
        overflow: visible;
        font-size: 12.5px;
        line-height: 1.25;
    }

    #panel-productivity .pd-task__title-row:has(.pd-item-icon) + .pd-task__meta {
        padding-left: calc(22px + 12px + 1.45em);
    }

    #panel-productivity .pd-task__meta > * {
        height: auto;
        min-height: 18px;
        white-space: nowrap;
    }

    /* Projeto visível no celular — só a estimativa continua escondida. */
    #panel-productivity .pd-task__meta .pd-hide-mobile {
        display: none !important;
    }

    #panel-productivity .pd-task__meta .pd-meta-project {
        display: inline-flex !important;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #panel-productivity .pd-empty {
        padding: 36px 12px;
    }

    #panel-productivity .pd-empty h2 {
        font-size: 20px;
    }

    #panel-productivity .pd-triage__head h2 {
        font-size: 22px;
        font-weight: 700;
        line-height: 1.3;
        white-space: normal;
    }

    #panel-productivity .pd-triage__foot kbd,
    #panel-productivity .pd-triage__label kbd {
        display: none;
    }

    /* Timer: coluna única — anel, modos e botões na mesma largura. */
    #panel-productivity .pd-workspace.is-focus-mode .pd-header {
        display: none;
    }

    #panel-productivity .pd-workspace.is-focus-mode .pd-main,
    #panel-productivity .pd-workspace.is-focus-mode .pd-stage {
        background: var(--bg);
    }

    #panel-productivity .pd-workspace.is-focus-mode .pd-stage {
        padding: 8px var(--pd-gutter) calc(var(--pd-mobile-dock-h, 56px) + env(safe-area-inset-bottom, 0px) + 12px);
    }

    #panel-productivity .pd-focus-view,
    #panel-productivity .pd-workspace.is-focus-mode .pd-focus-view {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        min-height: 0;
        padding: 0;
    }

    #panel-productivity .pd-focus-card,
    #panel-productivity .pd-workspace.is-focus-mode .pd-focus-card {
        --pd-timer-col: min(280px, 100%);
        display: flex;
        flex: none;
        flex-direction: column;
        align-items: center;
        min-height: 0;
        padding: 18px 16px 16px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        text-align: center;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    #panel-productivity .pd-focus-card .pd-rituals__head {
        display: none;
    }

    #panel-productivity .pd-focus-card__task,
    #panel-productivity .pd-timer-face,
    #panel-productivity .pd-timer__modes,
    #panel-productivity .pd-timer__actions,
    #panel-productivity .pd-workspace.is-focus-mode .pd-timer__actions {
        width: var(--pd-timer-col);
        max-width: 100%;
        box-sizing: border-box;
    }

    #panel-productivity .pd-focus-card__task {
        margin: 0 0 4px;
        padding: 0;
        font-size: 16px;
        font-weight: 650;
        letter-spacing: -.02em;
        line-height: 1.3;
        text-align: center;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    #panel-productivity .pd-timer-face {
        width: var(--pd-timer-col);
        margin: 2px auto 18px;
    }

    #panel-productivity .pd-timer-ring {
        position: static;
        inset: auto;
    }

    #panel-productivity .pd-timer-ring circle {
        stroke-width: 6.5;
    }

    #panel-productivity .pd-timer-face .pd-timer,
    #panel-productivity .pd-timer,
    #panel-productivity .pd-workspace.is-focus-mode .pd-timer {
        margin: 0;
        font-size: clamp(46px, 13vw, 58px);
        letter-spacing: -.06em;
        line-height: 1;
        font-variant-numeric: tabular-nums;
        text-shadow: none;
    }

    #panel-productivity .pd-timer-face .pd-timer__phase,
    #panel-productivity .pd-timer__phase {
        display: block;
        top: 100%;
        margin: 8px 0 0;
        font-size: 11px;
        letter-spacing: .08em;
    }

    #panel-productivity .pd-timer__modes {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
        margin: 0;
        padding: 4px;
        border-radius: 14px;
    }

    #panel-productivity .pd-timer__modes button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        height: 40px;
        padding: 0 4px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 650;
        line-height: 1;
        white-space: nowrap;
    }

    #panel-productivity .pd-timer__mode-lg {
        display: none;
    }

    #panel-productivity .pd-timer__mode-sm {
        display: inline;
    }

    #panel-productivity .pd-timer__actions,
    #panel-productivity .pd-workspace.is-focus-mode .pd-timer__actions {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
        margin-top: 12px;
        gap: 10px;
        grid-template-columns: none;
        justify-items: stretch;
    }

    #panel-productivity .pd-timer__actions .pd-primary-btn,
    #panel-productivity .pd-workspace.is-focus-mode .pd-timer__actions .pd-primary-btn {
        grid-column: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        max-width: none;
        min-height: 52px;
        height: 52px;
        padding: 0 16px;
        border-radius: 16px;
        font-size: 17px;
        font-weight: 700;
        line-height: 1;
    }

    #panel-productivity .pd-timer__actions .pd-primary-btn svg,
    #panel-productivity .pd-timer__actions [data-pd-timer-toggle-icon] {
        display: grid;
        place-items: center;
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
    }

    #panel-productivity .pd-timer__actions .pd-secondary-btn {
        grid-column: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 44px;
        border-radius: 12px;
        font-size: 15px;
    }

    #panel-productivity .pd-timer__tools {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        gap: 6px;
        margin: 0;
    }

    #panel-productivity .pd-timer__tool {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        min-width: 0;
        min-height: 52px;
        padding: 8px 4px;
        border-radius: 14px;
        background: var(--soft);
        color: var(--text);
        line-height: 1;
    }

    #panel-productivity .pd-timer__tool > svg,
    #panel-productivity .pd-timer__tool > [aria-hidden],
    #panel-productivity .pd-timer__tool > [data-pd-chime-icon] {
        display: grid;
        place-items: center;
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        font-size: 16px;
        line-height: 1;
    }

    #panel-productivity .pd-timer__tool-label {
        font-size: 11px;
        font-weight: 650;
        letter-spacing: .01em;
        line-height: 1;
    }

    #panel-productivity .pd-timer__actions .pd-icon-btn {
        display: none;
    }

    #panel-productivity [data-pd-auto-break].is-active {
        color: var(--accent);
        background: color-mix(in srgb, var(--accent) 16%, var(--soft));
    }

    #panel-productivity .pd-focus-side {
        overflow: visible;
        border: 0;
        border-top: 1px solid var(--line);
        border-radius: 0;
        background: transparent;
        text-align: left;
        box-shadow: none;
    }

    #panel-productivity .pd-focus-side__head,
    #panel-productivity .pd-focus-side .pd-rituals__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 0;
        margin: 0;
        padding: 14px 16px 10px;
    }

    #panel-productivity .pd-focus-side .pd-eyebrow {
        display: none;
    }

    #panel-productivity .pd-focus-side h2 {
        margin: 0;
        font-size: 17px;
        font-weight: 760;
        letter-spacing: -.03em;
        line-height: 1.2;
    }

    #panel-productivity .pd-focus-side__count {
        color: var(--muted);
        font-size: 13px;
        font-weight: 650;
        font-variant-numeric: tabular-nums;
    }

    #panel-productivity .pd-focus-side [data-pd-focus-queue] {
        flex: none;
        min-height: 0;
        border-top: 1px solid var(--line);
    }

    #panel-productivity .pd-queue-item,
    #panel-productivity .pd-workspace.is-focus-mode .pd-queue-item {
        display: grid;
        grid-template-columns: 20px minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        min-height: 56px;
        padding: 12px 16px;
        border: 0;
        border-bottom: 1px solid var(--line);
        background: transparent;
        color: var(--text);
        font-size: 15.5px;
        line-height: 1.3;
        text-align: left;
        -webkit-tap-highlight-color: transparent;
    }

    #panel-productivity .pd-queue-item:last-child {
        border-bottom: 0;
    }

    #panel-productivity .pd-queue-item__mark {
        width: 18px;
        height: 18px;
        border-width: 2px;
    }

    #panel-productivity .pd-queue-item__copy strong {
        display: -webkit-box;
        overflow: hidden;
        font-size: 15.5px;
        font-weight: 600;
        line-height: 1.3;
        white-space: normal;
        text-overflow: unset;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    #panel-productivity .pd-queue-item__copy small {
        font-size: 12.5px;
    }

    #panel-productivity .pd-queue-item.is-active {
        background: color-mix(in srgb, var(--accent) 12%, transparent);
        color: var(--text);
    }

    #panel-productivity .pd-queue-item__now {
        padding: 4px 8px;
        font-size: 11px;
    }

    #panel-productivity .pd-focus-stats,
    #panel-productivity .pd-workspace.is-focus-mode .pd-focus-stats {
        display: flex;
        align-items: baseline;
        justify-content: flex-start;
        gap: 16px;
        margin: 0;
        padding: 10px 16px 12px;
        border-top: 1px solid var(--line);
        background: var(--soft);
        grid-template-columns: none;
    }

    #panel-productivity .pd-focus-stats span,
    #panel-productivity .pd-workspace.is-focus-mode .pd-focus-stats span {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: baseline;
        gap: 6px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.2;
        text-align: left;
    }

    #panel-productivity .pd-focus-stats span + span {
        border: 0;
        margin-left: auto;
    }

    #panel-productivity .pd-focus-stats strong {
        display: inline;
        margin: 0;
        color: var(--text);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0;
    }

    #panel-productivity .pd-panel-empty {
        padding: 20px 16px;
        font-size: 14px;
        text-align: left;
    }

    .pd-mobile-dock__item.is-running .pd-mobile-dock__label {
        font-variant-numeric: tabular-nums;
        font-weight: 600;
        color: var(--accent);
    }
}

/* Modo escuro: página funda, cartão mais claro, Focar visível. */
[data-theme="dark"] #panel-productivity .pd-header h1 {
    color: var(--text);
}

[data-theme="dark"] #panel-productivity .pd-search input {
    background: var(--surface);
    border-color: var(--line-strong);
}

[data-theme="dark"] #panel-productivity .pd-frog {
    background: color-mix(in srgb, var(--ok) 14%, var(--surface));
    border-color: color-mix(in srgb, var(--ok) 38%, var(--line));
}

[data-theme="dark"] #panel-productivity .pd-frog__actions .pd-secondary-btn,
[data-theme="dark"] #panel-productivity .pd-frog__actions button:not(.pd-primary-btn):not(.is-active) {
    background: color-mix(in srgb, #fff 10%, var(--surface));
    border-color: var(--line-strong);
    color: var(--text);
}

[data-theme="dark"] #panel-productivity .pd-secondary-btn {
    background: color-mix(in srgb, #fff 8%, var(--surface));
    border-color: var(--line-strong);
    color: var(--text);
}

[data-theme="dark"] #panel-productivity .pd-task__meta .pd-project-dot {
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--project-color, var(--accent)) 55%, transparent);
}

/* ===== pages/publish-density.css ===== */
/* ============================================================================
   Publish — fonte única
   Mesmo contrato do Downloader: uma janela, um ritmo de 32px e o campo de
   trabalho como herói. As antigas camadas publish não entram mais no bundle.
   Este arquivo contém compositor, preview, fila, contas, modais e responsivo.
   ========================================================================= */

#panel-publish {
    --pub-ctrl: 32px;
    --pub-gap: 16px;
    --pub-pad: 16px;
    --pub-rail: 280px;
    --pub-line: var(--macos-hairline, var(--line));
    --pub-radius: var(--macos-window-radius, 12px);
    --pub-well: color-mix(in srgb, var(--soft) 58%, var(--elevated, var(--surface)));
    --publish-blue: var(--accent);
    --publish-blue-hover: color-mix(in srgb, var(--accent) 86%, #000);
    --publish-blue-soft: var(--accent-soft);
    --publish-canvas: var(--surface);
    --publish-subtle: var(--pub-well);
    --tb-h: var(--pub-ctrl);
    --pc-ctrl: var(--pub-ctrl);
    --pc-media: 100%;
    --pc-rail: var(--pub-rail);
}

#panel-publish,
#panel-publish * {
    box-sizing: border-box;
}

/* ---- Página ------------------------------------------------------------- */

#panel-publish .publish-page {
    gap: var(--pub-gap);
    min-height: calc(100dvh - var(--topbar-h, 56px));
    padding: 18px var(--page-x, var(--px, 20px)) 20px;
}

#panel-publish .publish-page__head {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px 14px;
    min-height: var(--pub-ctrl);
    padding: 0;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
}

#panel-publish .publish-page__identity { flex: 1 1 auto; min-width: 0; }
#panel-publish .publish-page__eyebrow,
#panel-publish .publish-page__description { display: none !important; }

#panel-publish .publish-page__head h2,
#panel-publish .publish-page__heading {
    margin: 0;
    color: var(--text);
    font-size: 22px;
    font-weight: 650;
    letter-spacing: -0.035em;
    line-height: var(--pub-ctrl);
}

#panel-publish .publish-page__head .publish-subnav,
#panel-publish .publish-page__head .fm-tabs.publish-subnav {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 2px;
    width: auto;
    height: var(--pub-ctrl);
    min-height: var(--pub-ctrl);
    margin: 0;
    padding: 2px;
    overflow: hidden;
    border: 1px solid var(--pub-line);
    border-radius: 9px;
    background: color-mix(in srgb, var(--soft) 55%, var(--surface));
}

#panel-publish .publish-page__head .publish-subnav__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    min-height: 28px;
    padding: 0 11px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    font-weight: 550;
    box-shadow: none;
}
#panel-publish .publish-page__head .publish-subnav__btn::after { display: none !important; content: none; }
#panel-publish .publish-page__head .publish-subnav__btn:hover {
    color: var(--text);
    background: var(--hover);
}
#panel-publish .publish-page__head .publish-subnav__btn.is-active {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--macos-control-shadow);
}
#panel-publish .publish-page__head .publish-subnav__btn.is-active svg { color: var(--accent); }

#panel-publish .publish-page__actions { flex: 0 0 auto; margin-left: auto; }
#panel-publish .publish-page__actions .btn {
    height: var(--pub-ctrl);
    min-height: var(--pub-ctrl);
    padding: 0 11px;
    border: 1px solid var(--pub-line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--macos-control-shadow);
    color: var(--secondary);
    font-size: 12.5px;
    font-weight: 550;
}

/* ---- Uma janela --------------------------------------------------------- */

#panel-publish .publish-composer,
#panel-publish .publish-composer.card,
#panel-publish .publish-composer--reels,
#panel-publish .publish-queue,
#panel-publish .publish-queue.card {
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--pub-line) !important;
    border-radius: var(--pub-radius) !important;
    background: var(--surface) !important;
    box-shadow: var(--macos-window-shadow, none);
}

#panel-publish .publish-view.is-active[data-publish-panel="compose"] {
    display: block !important;
    min-height: 0;
}

#panel-publish .publish-composer .publish-composer__layout,
#panel-publish .publish-composer .publish-composer-body {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column !important;
    width: 100%;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
}

/* ---- Chrome: redes / formato / destinos -------------------------------- */

#panel-publish .publish-toolbar {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    padding: 12px var(--pub-pad);
    border-bottom: 1px solid var(--pub-line);
    background: color-mix(in srgb, var(--soft) 38%, var(--surface));
}

#panel-publish .publish-toolbar__row {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center !important;
    gap: 8px 10px !important;
    min-height: var(--pub-ctrl);
    padding: 0 !important;
}

#panel-publish .publish-toolbar__cluster,
#panel-publish .publish-compose-mode--bar {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    grid-template-rows: none !important;
    grid-template-columns: none !important;
    align-items: center !important;
    gap: 0 !important;
    min-height: var(--pub-ctrl);
    margin: 0;
    padding: 0 12px 0 0 !important;
    border: 0 !important;
    border-right: 1px solid var(--pub-line) !important;
    background: transparent !important;
}

#panel-publish .publish-toolbar__cluster:last-of-type {
    border-right: 0 !important;
    padding-right: 0 !important;
}

#panel-publish .publish-compose-mode--bar:not([hidden]) {
    padding-left: 12px !important;
    border-right: 0 !important;
    border-left: 1px solid var(--pub-line) !important;
}

#panel-publish .publish-toolbar .publish-platforms--compact,
#panel-publish .publish-toolbar .publish-seg--format,
#panel-publish .publish-compose-mode__inner,
#panel-publish .publish-queue .publish-seg {
    display: inline-flex !important;
    align-items: center;
    height: var(--pub-ctrl) !important;
    min-height: var(--pub-ctrl) !important;
    padding: 2px;
    border: 0;
    border-radius: 8px;
    background: color-mix(in srgb, var(--soft) 78%, var(--elevated, var(--surface)));
    box-shadow: inset 0 1px 1px color-mix(in srgb, #000 7%, transparent);
}

#panel-publish .publish-toolbar .publish-platforms--compact .publish-platform,
#panel-publish .publish-toolbar .publish-seg--format .publish-seg__btn,
#panel-publish .publish-compose-mode__card,
#panel-publish .publish-queue .publish-seg__btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 0 !important;
    padding: 0 11px;
    border: 0 !important;
    border-radius: 6px;
    background: transparent;
    color: var(--secondary);
    font-size: 12.5px;
    font-weight: 550;
    box-shadow: none !important;
}

#panel-publish .publish-toolbar .publish-platforms--compact .publish-platform:has(input:checked),
#panel-publish .publish-toolbar .publish-seg--format .publish-seg__btn.is-active,
#panel-publish .publish-toolbar .publish-seg--format .publish-seg__btn:has(input:checked),
#panel-publish .publish-compose-mode__card.is-active,
#panel-publish .publish-queue .publish-seg__btn.is-active {
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    box-shadow: var(--macos-control-shadow) !important;
}

#panel-publish .publish-toolbar .publish-platforms--compact .publish-platform:has(input:checked) .publish-platform__icon {
    color: var(--accent);
}

#panel-publish .publish-toolbar__accounts {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--pub-line);
}

#panel-publish .publish-accounts-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    min-height: var(--pub-ctrl);
}

#panel-publish .publish-accounts-head__meta .publish-toolbar__label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#panel-publish .publish-accounts-bar__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    min-height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--soft) 70%, var(--surface));
    color: var(--secondary);
    font-size: 11.5px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

#panel-publish .publish-account-pill,
#panel-publish .publish-toolbar .publish-account-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--pub-ctrl);
    padding: 2px 10px 2px 2px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--soft) 70%, var(--surface));
    color: var(--secondary);
    font-size: 12.5px;
    font-weight: 550;
}

#panel-publish .publish-account-pill__avatar,
#panel-publish .publish-toolbar .publish-account-pill__avatar {
    display: grid;
    place-items: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--soft);
    color: var(--secondary);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

#panel-publish .publish-account-pill__avatar img,
#panel-publish .publish-toolbar .publish-account-pill__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

#panel-publish .publish-account-pill:has(input:checked),
#panel-publish .publish-toolbar .publish-account-pill:has(input:checked) {
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    box-shadow: var(--macos-control-shadow);
}

#panel-publish .publish-accounts-bar__folder { display: inline-flex; align-items: center; margin: 0; }
#panel-publish .publish-accounts-bar__folder[hidden],
#panel-publish .publish-accounts-bar__folder.is-hidden { display: none !important; }
#panel-publish .publish-accounts-bar__folder select,
#panel-publish .publish-accounts-bar__search {
    height: var(--pub-ctrl);
    min-height: var(--pub-ctrl);
}

#panel-publish .publish-team-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: 10px;
    padding: 9px 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent-soft) 45%, transparent);
    color: var(--secondary);
    font-size: 12px;
}
#panel-publish .publish-team-notice > span { flex: 1; min-width: 180px; }
#panel-publish .publish-team-notice strong { color: var(--text); font-variant-numeric: tabular-nums; }
#panel-publish .publish-team-notice button {
    min-height: 28px;
    padding: 0 11px;
    border: 0;
    border-radius: 7px;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
#panel-publish .publish-team-notice button[data-publish-clear-matching] {
    background: transparent;
    color: var(--muted);
}

#panel-publish .publish-bulk-stats--bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    min-height: 36px;
    margin: 0;
    padding: 8px var(--pub-pad);
    border-bottom: 1px solid var(--pub-line);
    background: color-mix(in srgb, var(--soft) 28%, var(--surface));
}

/* ---- Workspace: trabalho | publicação ----------------------------------- */

#panel-publish .publish-workspace,
#panel-publish .publish-composer .publish-composer-body > .publish-workspace {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    width: 100%;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    background: var(--surface) !important;
}

#panel-publish .publish-workspace__main {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    border: 0 !important;
    background: var(--surface) !important;
}

#panel-publish .publish-stage {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
}

#panel-publish .publish-stage__media,
#panel-publish .publish-compose-zone--media,
#panel-publish .publish-stage__caption,
#panel-publish .publish-compose-zone--write {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px;
    width: 100%;
    min-width: 0;
    height: auto !important;
    padding: 14px var(--pub-pad) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--surface) !important;
    box-shadow: none !important;
}

#panel-publish .publish-stage__media,
#panel-publish .publish-compose-zone--media {
    flex: 0 0 auto !important;
    gap: 14px;
    padding-bottom: 18px !important;
}

#panel-publish .publish-stage__caption,
#panel-publish .publish-compose-zone--write {
    flex: 1 1 auto !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--pub-line) !important;
}

#panel-publish .publish-stage__title,
#panel-publish .publish-caption__head h3,
#panel-publish .publish-rail-card__title {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.2;
}

#panel-publish .publish-stage__media-head,
#panel-publish .publish-caption__head {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    min-height: 24px;
    width: 100%;
}

#panel-publish .publish-media-panel__toolbar:not([hidden]) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#panel-publish .publish-stage__media-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

#panel-publish .publish-stage__limits {
    display: block;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
}
#panel-publish .publish-stage__limits[hidden] { display: none; }

#panel-publish .publish-media-panel__count,
#panel-publish .publish-caption__count {
    color: var(--muted);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}

/* Dropzone: poço de envio, não um telefone 9:16. */
#panel-publish .publish-dropzone--reel,
#panel-publish .publish-composer .publish-compose-zone--media .publish-dropzone--reel,
#panel-publish .publish-composer.publish-composer--bulk .publish-compose-zone--media .publish-dropzone--reel,
#panel-publish .publish-dropzone--reel.publish-dropzone--bulk,
#panel-publish .publish-composer--post .publish-dropzone--reel,
#panel-publish .publish-composer--post .publish-compose-zone--media .publish-dropzone--reel,
#panel-publish .publish-composer--story .publish-dropzone--reel,
#panel-publish .publish-composer--reel .publish-dropzone--reel,
#panel-publish .publish-composer--reels .publish-dropzone--reel {
    display: grid !important;
    place-items: center;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: auto !important;
    height: 156px !important;
    min-height: 156px !important;
    max-height: none !important;
    margin: 0 !important;
    border: 1px dashed color-mix(in srgb, var(--line-strong, var(--line)) 80%, var(--muted)) !important;
    border-radius: 10px !important;
    background: var(--pub-well) !important;
    box-shadow: none !important;
}

#panel-publish .publish-dropzone--reel.is-filled,
#panel-publish .publish-composer .publish-compose-zone--media .publish-dropzone--reel.is-filled {
    height: 168px !important;
    min-height: 168px !important;
    max-height: 180px !important;
    border-style: solid !important;
    border-color: var(--pub-line) !important;
    background: #111 !important;
}

#panel-publish .publish-composer .publish-compose-zone--media .publish-dropzone--reel:hover,
#panel-publish .publish-composer .publish-compose-zone--media .publish-dropzone--reel.is-dragover {
    background: color-mix(in srgb, var(--accent-soft) 65%, var(--surface)) !important;
    border-color: color-mix(in srgb, var(--accent) 50%, var(--line)) !important;
    box-shadow: none !important;
}

#panel-publish .publish-dropzone__frame {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 12px;
    text-align: center;
}

#panel-publish .publish-dropzone__icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--macos-control-shadow);
}

#panel-publish .publish-dropzone__copy strong {
    font-size: 13px;
    font-weight: 620;
    color: var(--text);
}
#panel-publish .publish-dropzone__copy span {
    color: var(--muted);
    font-size: 12px;
}

#panel-publish .publish-url-fallback,
#panel-publish label.publish-url-fallback {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
}
#panel-publish .publish-url-fallback[hidden] {
    display: none !important;
}

#panel-publish .publish-url-fallback__label {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#panel-publish .publish-url-fallback textarea {
    flex: 1 1 auto;
    min-height: var(--pub-ctrl) !important;
    max-height: 64px;
    width: auto !important;
    margin: 0;
    padding: 6px 10px !important;
    border: 1px solid var(--pub-line) !important;
    border-radius: 8px !important;
    background: var(--elevated, var(--surface)) !important;
    color: var(--text);
    font-size: 12.5px;
    line-height: 1.4;
    resize: vertical;
}

/* Legenda = herói, como o textarea do Downloader. */
#panel-publish .publish-stage__caption .publish-caption__field {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column;
    min-height: 280px;
    margin: 0;
}

#panel-publish .publish-stage__caption .publish-caption__field textarea,
#panel-publish .publish-caption__field textarea,
#panel-publish .publish-stage__caption textarea {
    flex: 1 1 auto !important;
    width: 100%;
    min-height: 280px !important;
    max-height: none !important;
    height: auto !important;
    padding: 14px 16px !important;
    border: 1px solid var(--pub-line) !important;
    border-radius: 10px !important;
    background: var(--elevated, var(--surface)) !important;
    box-shadow: inset 0 1px 1px color-mix(in srgb, #000 4%, transparent);
    color: var(--text);
    font-size: 14.5px;
    line-height: 1.55;
    resize: vertical;
}

#panel-publish .publish-stage__caption .publish-caption__field textarea:focus,
#panel-publish .publish-stage__caption textarea:focus {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--line)) !important;
    box-shadow: 0 0 0 3px var(--accent-soft);
    outline: 0;
}

#panel-publish .publish-compose-options {
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px solid var(--pub-line);
}

#panel-publish .publish-compose-options__title {
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ---- Rail --------------------------------------------------------------- */

#panel-publish .publish-rail {
    display: flex !important;
    flex-direction: column;
    min-width: 0;
    height: auto !important;
    max-height: none;
    overflow: visible !important;
    border-top: 1px solid var(--pub-line) !important;
    background: color-mix(in srgb, var(--soft) 28%, var(--surface)) !important;
}

#panel-publish .publish-rail__scroll {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    padding: 14px var(--pub-pad);
    overflow: visible !important;
}

#panel-publish .publish-rail-card,
#panel-publish .publish-rail-card:not(.publish-rail-card--preview),
#panel-publish .publish-rail-card--preview {
    padding: 12px !important;
    border: 1px solid var(--pub-line) !important;
    border-radius: 10px !important;
    background: var(--surface) !important;
    box-shadow: none !important;
}

#panel-publish .publish-rail-card__head { margin: 0 0 10px; }

#panel-publish .publish-post-preview__phone {
    width: min(100%, 220px) !important;
    max-width: 220px !important;
    margin-inline: auto;
}

#panel-publish .publish-rail__submit {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px var(--pub-pad) 16px;
    border-top: 1px solid var(--pub-line);
    background: var(--surface);
}

#panel-publish .publish-rail__submit .btn--lg,
#panel-publish .publish-composer .publish-rail__submit .btn--lg {
    min-height: 40px;
    border: 0;
    border-radius: 9px;
    background: var(--accent);
    color: #fff;
    font-size: 13.5px;
    font-weight: 620;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 28%, transparent);
}

#panel-publish .publish-rail-card--schedule select,
#panel-publish .publish-rail-card--schedule input {
    min-height: var(--pub-ctrl);
    border-radius: 8px;
}

/* Preview: disco do áudio no Reels. */
#panel-publish .publish-preview__reel-disc {
    display: block;
    width: 26px;
    height: 26px;
    margin-top: 2px;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    border-radius: 7px;
    background:
        radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.85) 22%, transparent 23%),
        linear-gradient(135deg, #833ab4, #fd1d1d 55%, #fcb045);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    animation: pd-reel-disc 8s linear infinite;
}
@keyframes pd-reel-disc { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    #panel-publish .publish-preview__reel-disc { animation: none; }
}

/* ---- Fila / contas ------------------------------------------------------ */

#panel-publish .publish-queue__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px var(--pub-pad);
    border-bottom: 1px solid var(--pub-line);
    background: color-mix(in srgb, var(--soft) 32%, var(--surface));
}

#panel-publish .publish-accounts__bar.card {
    border-color: var(--pub-line);
    border-radius: 12px;
    box-shadow: none;
}

#panel-publish .publish-queue__count,
#panel-publish .publish-accounts__kpi-value,
#panel-publish .publish-rail-card__head span {
    font-variant-numeric: tabular-nums;
}

/* ---- Desktop: trabalho à esquerda, publicação à direita ----------------- */

@media (min-width: 1020px) {
    #panel-publish .publish-workspace,
    #panel-publish .publish-composer .publish-composer-body > .publish-workspace {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) var(--pub-rail) !important;
        align-items: start !important;
    }

    #panel-publish .publish-workspace__main {
        border-right: 1px solid var(--pub-line) !important;
        border-bottom: 0 !important;
    }

    #panel-publish .publish-rail {
        position: sticky;
        top: 12px;
        align-self: start;
        max-height: calc(100dvh - 24px);
        border-top: 0 !important;
        border-left: 0;
        overflow: hidden !important;
    }

    #panel-publish .publish-rail__scroll {
        min-height: 0;
        overflow-y: auto !important;
        scrollbar-width: thin;
    }

    #panel-publish .publish-stage__caption .publish-caption__field textarea,
    #panel-publish .publish-stage__caption textarea {
        min-height: 320px !important;
    }
}

@media (max-width: 760px) {
    #panel-publish .publish-page__head {
        display: flex !important;
        gap: 10px 12px;
    }

    #panel-publish .publish-page__head .publish-subnav,
    #panel-publish .publish-page__head .fm-tabs.publish-subnav {
        order: 3;
        width: 100%;
    }

    #panel-publish .publish-page__head .publish-subnav__btn {
        flex: 1 1 0;
        justify-content: center;
    }

    #panel-publish .publish-page__head .publish-subnav__btn svg { display: none; }

    #panel-publish .publish-page__actions .btn span { display: none; }
    #panel-publish .publish-page__actions .btn {
        width: var(--pub-ctrl);
        padding: 0;
        justify-content: center;
    }

    #panel-publish .publish-toolbar__cluster,
    #panel-publish .publish-compose-mode--bar {
        width: auto;
        padding: 0 !important;
        border-right: 0 !important;
    }

    #panel-publish .publish-stage__caption .publish-caption__field,
    #panel-publish .publish-stage__caption .publish-caption__field textarea,
    #panel-publish .publish-stage__caption textarea {
        min-height: 180px !important;
    }
}

/* ============================================================================
   Acabamento — mesma geometria, superfície mais cuidada
   ========================================================================= */

#panel-publish .publish-stage__title,
#panel-publish .publish-caption__head h3,
#panel-publish .publish-rail-card__title,
#panel-publish .publish-accounts-head__meta .publish-toolbar__label,
#panel-publish .publish-compose-options__title {
    color: var(--text);
    font-size: 13px;
    font-weight: 620;
    letter-spacing: -0.015em;
    text-transform: none;
}

#panel-publish .publish-stage__hint,
#panel-publish .publish-media-panel__count,
#panel-publish .publish-caption__count,
#panel-publish .publish-compose-options__hint {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

#panel-publish .publish-media-panel__count,
#panel-publish .publish-caption__count,
#panel-publish .publish-accounts-bar__count {
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
}

/* Dropzone: poço de envio com respiro, ainda sem telefone 9:16. */
#panel-publish .publish-dropzone--reel,
#panel-publish .publish-composer .publish-compose-zone--media .publish-dropzone--reel,
#panel-publish .publish-composer.publish-composer--bulk .publish-compose-zone--media .publish-dropzone--reel,
#panel-publish .publish-dropzone--reel.publish-dropzone--bulk,
#panel-publish .publish-composer--post .publish-dropzone--reel,
#panel-publish .publish-composer--post .publish-compose-zone--media .publish-dropzone--reel,
#panel-publish .publish-composer--story .publish-dropzone--reel,
#panel-publish .publish-composer--reel .publish-dropzone--reel,
#panel-publish .publish-composer--reels .publish-dropzone--reel {
    height: 156px !important;
    min-height: 156px !important;
    max-height: none !important;
    border-radius: 12px !important;
    border-style: dashed !important;
    border-color: color-mix(in srgb, var(--line) 88%, var(--text) 12%) !important;
    background: color-mix(in srgb, var(--soft) 42%, var(--elevated, var(--surface))) !important;
    transition: border-color 140ms ease, background 140ms ease;
}

#panel-publish .publish-dropzone {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

#panel-publish .publish-dropzone__preview {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}
#panel-publish .publish-dropzone__preview :is(img, video) {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#panel-publish .publish-dropzone.is-filled .publish-dropzone__preview::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.08));
    content: "";
}
#panel-publish .publish-dropzone.is-filled .publish-dropzone__frame {
    position: relative;
    z-index: 2;
    justify-content: flex-start;
    color: #fff;
}
#panel-publish .publish-dropzone.is-filled .publish-dropzone__copy strong,
#panel-publish .publish-dropzone.is-filled .publish-dropzone__copy span {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
}

#panel-publish .publish-dropzone--reel.is-filled,
#panel-publish .publish-composer .publish-compose-zone--media .publish-dropzone--reel.is-filled {
    height: 168px !important;
    min-height: 168px !important;
    max-height: 180px !important;
}

#panel-publish .publish-dropzone__frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 28px 20px;
    text-align: center;
}

#panel-publish .publish-dropzone.is-filled .publish-dropzone__frame {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    padding: 20px 22px;
}

#panel-publish .publish-dropzone__icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 12px;
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--macos-control-shadow);
}

#panel-publish .publish-dropzone__copy {
    display: grid;
    gap: 4px;
    justify-items: center;
}

#panel-publish .publish-dropzone.is-filled .publish-dropzone__copy {
    justify-items: start;
}

#panel-publish .publish-dropzone__copy strong {
    font-size: 13.5px;
    font-weight: 620;
    letter-spacing: -0.02em;
}

#panel-publish .publish-dropzone__copy span {
    font-size: 12px;
}

#panel-publish .publish-url-fallback textarea:focus {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--line)) !important;
    box-shadow: 0 0 0 3px var(--accent-soft);
    outline: 0;
}

#panel-publish .publish-kbd {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    margin-left: auto;
    padding: 0 6px;
    border: 1px solid var(--pub-line);
    border-radius: 5px;
    background: var(--surface);
    color: var(--muted);
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: 0.01em;
    line-height: 1;
}

#panel-publish .publish-rail__hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

/* Caption: papel de escrever. */
#panel-publish .publish-stage__caption .publish-caption__field textarea,
#panel-publish .publish-caption__field textarea,
#panel-publish .publish-stage__caption textarea {
    padding: 16px 16px 18px !important;
    border-radius: 10px !important;
    background: var(--elevated, var(--surface)) !important;
    box-shadow: none;
    font-size: 15px;
    font-weight: 450;
    letter-spacing: -0.011em;
    line-height: 1.6;
}

#panel-publish .publish-stage__caption textarea::placeholder,
#panel-publish .publish-caption__field textarea::placeholder {
    color: color-mix(in srgb, var(--muted) 78%, transparent);
}

/* Contas: pílula com hairline. */
#panel-publish .publish-account-pill,
#panel-publish .publish-toolbar .publish-account-pill {
    border: 1px solid transparent;
    background: color-mix(in srgb, var(--soft) 55%, var(--surface));
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
#panel-publish .publish-account-pill:hover,
#panel-publish .publish-toolbar .publish-account-pill:hover {
    background: var(--hover);
    color: var(--text);
}
#panel-publish .publish-account-pill:has(input:checked),
#panel-publish .publish-toolbar .publish-account-pill:has(input:checked) {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
    background: var(--surface);
    box-shadow: var(--macos-control-shadow);
}

#panel-publish .publish-toolbar .publish-platform--instagram:has(input:checked) .publish-platform__icon { color: #e1306c; }
#panel-publish .publish-toolbar .publish-platform--tiktok:has(input:checked) .publish-platform__icon { color: var(--text); }
#panel-publish .publish-toolbar .publish-platform--threads:has(input:checked) .publish-platform__icon { color: var(--text); }

#panel-publish .publish-compose-options {
    border-top-color: color-mix(in srgb, var(--pub-line) 80%, transparent);
}

#panel-publish .publish-compose-options__summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    cursor: pointer;
    list-style: none;
}
#panel-publish .publish-compose-options__summary::-webkit-details-marker { display: none; }

#panel-publish .publish-rail {
    background: color-mix(in srgb, var(--soft) 22%, var(--surface)) !important;
}

#panel-publish .publish-post-preview__phone {
    border-radius: 22px;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--line) 80%, transparent),
        0 10px 28px color-mix(in srgb, #000 12%, transparent);
}

#panel-publish .publish-rail__hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

#panel-publish .publish-rail__submit .btn--lg,
#panel-publish .publish-composer .publish-rail__submit .btn--lg {
    transition: filter 140ms ease, background 140ms ease;
}
#panel-publish .publish-rail__submit .btn--lg:hover,
#panel-publish .publish-composer .publish-rail__submit .btn--lg:hover {
    filter: brightness(1.06);
}

#panel-publish .publish-rail-card--schedule select,
#panel-publish .publish-rail-card--schedule input:not([type="checkbox"]):not([type="radio"]) {
    border: 1px solid var(--pub-line);
    background: var(--elevated, var(--surface));
    color: var(--text);
    font-size: 13px;
}

[data-theme="dark"] #panel-publish .publish-dropzone--reel,
[data-theme="dark"] #panel-publish .publish-composer .publish-compose-zone--media .publish-dropzone--reel {
    background: color-mix(in srgb, var(--elevated) 70%, #000) !important;
}

[data-theme="dark"] #panel-publish .publish-stage__caption textarea,
[data-theme="dark"] #panel-publish .publish-caption__field textarea {
    background: color-mix(in srgb, var(--elevated) 88%, #000) !important;
}

/* ============================================================================
   Contrato completo — esta é a única folha do Publicar
   ========================================================================= */

#panel-publish [hidden] { display: none !important; }

#panel-publish .publish-platform > input,
#panel-publish .publish-seg__btn > input,
#panel-publish .publish-account-pill > input,
#panel-publish .publish-dropzone > input[type="file"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

#panel-publish .publish-view { display: none; min-width: 0; }
#panel-publish .publish-view.is-active { display: block; }

#panel-publish .publish-alert {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--bad) 28%, var(--line));
    border-left: 3px solid var(--bad);
    border-radius: 9px;
    background: color-mix(in srgb, var(--bad) 7%, var(--surface));
    color: var(--text);
    font-size: 13px;
}
#panel-publish .publish-alert.is-success {
    border-color: color-mix(in srgb, var(--ok) 28%, var(--line));
    border-left-color: var(--ok);
    background: color-mix(in srgb, var(--ok) 7%, var(--surface));
}

/* Loaders e vazios -------------------------------------------------------- */

#panel-publish .publish-account-loader,
#panel-publish .publish-empty,
#panel-publish .publish-accounts-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 72px;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}
#panel-publish .publish-account-loader__spin {
    width: 15px;
    height: 15px;
    border: 2px solid var(--line);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: publish-spin 700ms linear infinite;
}
@keyframes publish-spin { to { transform: rotate(1turn); } }

#panel-publish .publish-empty--queue,
#panel-publish .publish-accounts-empty {
    flex-direction: column;
    min-height: 260px;
    padding: 32px;
}
#panel-publish .publish-empty__icon,
#panel-publish .publish-accounts-empty__icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--soft);
    color: var(--muted);
}
#panel-publish .publish-empty__title,
#panel-publish .publish-accounts-empty__title {
    margin: 0;
    color: var(--text);
    font-size: 14px;
    font-weight: 620;
}
#panel-publish .publish-empty__text,
#panel-publish .publish-accounts-empty__text { max-width: 420px; margin: 0; line-height: 1.5; }
#panel-publish .publish-accounts-empty__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Mídia e bulk ------------------------------------------------------------ */

#panel-publish .publish-media-list {
    display: grid;
    gap: 7px;
    width: 100%;
}
#panel-publish .publish-media-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 6px 8px;
    border: 1px solid var(--pub-line);
    border-radius: 9px;
    background: var(--elevated, var(--surface));
}
#panel-publish .publish-media-card--single {
    grid-template-columns: minmax(0, 1fr) auto;
}
#panel-publish .publish-media-card__index {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--soft);
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
}
#panel-publish .publish-media-card__body { min-width: 0; }
#panel-publish .publish-media-card__body strong,
#panel-publish .publish-media-card__body span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#panel-publish .publish-media-card__body strong {
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
}
#panel-publish .publish-media-card__body span {
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
}
#panel-publish .publish-media-card__thumb {
    width: 42px;
    height: 42px;
    overflow: hidden;
    border-radius: 7px;
    background: var(--soft);
}
#panel-publish .publish-media-card__thumb :is(img, video) {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#panel-publish .publish-media-card__copy { min-width: 0; }
#panel-publish .publish-media-card__copy strong,
#panel-publish .publish-media-card__copy span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#panel-publish .publish-media-card__copy strong { color: var(--text); font-size: 12.5px; }
#panel-publish .publish-media-card__copy span { margin-top: 2px; color: var(--muted); font-size: 11.5px; }
#panel-publish .publish-media-card__remove,
#panel-publish .publish-bulk-caption__remove {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}
#panel-publish .publish-media-card__remove:hover,
#panel-publish .publish-bulk-caption__remove:hover {
    background: color-mix(in srgb, var(--bad) 10%, transparent);
    color: var(--bad);
}

#panel-publish .publish-bulk-stats--bar { min-height: 42px; }
#panel-publish .publish-bulk-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    color: var(--muted);
    font-size: 11.5px;
}
#panel-publish .publish-bulk-stat strong { color: var(--text); font-size: 12px; }
#panel-publish .publish-bulk-stat--status { margin-left: auto; color: var(--ok); font-weight: 620; }
#panel-publish .publish-bulk-stat--status.is-warning { color: #d97706; }

#panel-publish .publish-bulk-captions { display: grid; gap: 10px; }
#panel-publish .publish-bulk-captions__head,
#panel-publish .publish-bulk-caption {
    display: flex;
    align-items: center;
    gap: 9px;
}
#panel-publish .publish-bulk-captions__head { justify-content: space-between; }
#panel-publish .publish-bulk-captions__hint { margin: 2px 0 0; font-size: 11.5px; }
#panel-publish .publish-bulk-captions__list { display: grid; gap: 8px; }
#panel-publish .publish-bulk-caption__index {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 7px;
    background: var(--soft);
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
}
#panel-publish .publish-bulk-caption .field { flex: 1; min-width: 0; }
#panel-publish .publish-bulk-caption textarea { min-height: 88px !important; }

#panel-publish .publish-check {
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto;
    min-height: 28px;
    margin: 0;
    color: var(--secondary);
    font-size: 12.5px;
}
#panel-publish input[type="checkbox"],
#panel-publish input[type="radio"] {
    width: 14px;
    min-width: 14px;
    max-width: 14px;
    height: 14px;
    min-height: 14px;
    margin: 0;
    padding: 0;
    flex: 0 0 14px;
    accent-color: var(--accent);
    box-shadow: none;
}
#panel-publish .publish-check > span,
#panel-publish .publish-music-toggle > span {
    min-width: 0;
    line-height: 1.35;
}

/* Opções e campos avançados ---------------------------------------------- */

#panel-publish .publish-compose-options__summary {
    justify-content: flex-start;
    user-select: none;
}
#panel-publish .publish-compose-options__summary::after {
    width: 7px;
    height: 7px;
    margin-left: auto;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    color: var(--muted);
    content: "";
    transform: rotate(45deg) translateY(-2px);
    transition: transform 140ms ease;
}
#panel-publish .publish-compose-options[open] > .publish-compose-options__summary::after {
    transform: rotate(225deg) translate(-2px, -2px);
}
#panel-publish .publish-compose-options__body {
    display: grid;
    gap: 14px;
    padding: 12px 0 2px;
}
#panel-publish .publish-stage-panel {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--pub-line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--soft) 22%, var(--surface));
}
#panel-publish .publish-stage-panel__title {
    margin: 0;
    color: var(--text);
    font-size: 12.5px;
    font-weight: 620;
}
#panel-publish .publish-stage-panel__stack,
#panel-publish .publish-block__stack,
#panel-publish .publish-music-panel,
#panel-publish .publish-advanced__body {
    display: grid;
    gap: 10px;
}
#panel-publish .publish-stage-panel--reel .publish-stage-panel__stack,
#panel-publish .publish-stage-panel--tiktok .publish-stage-panel__stack {
    gap: 4px;
}
#panel-publish .publish-reel-music,
#panel-publish .publish-tiktok-music {
    display: grid;
    gap: 8px;
}
#panel-publish .publish-music-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto;
    min-height: 28px;
    margin: 0;
    color: var(--secondary);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
}
#panel-publish .publish-stage-panel--advanced {
    padding: 0;
    border: 0;
    background: transparent;
}
#panel-publish .publish-stage-panel--advanced > .publish-stage-panel__title {
    display: none;
}
#panel-publish .publish-stage-panel--advanced .publish-stage-panel__stack {
    gap: 8px;
}
#panel-publish .publish-field-grid,
#panel-publish .publish-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
#panel-publish .publish-check-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

#panel-publish .publish-advanced {
    overflow: hidden;
    border: 1px solid var(--pub-line);
    border-radius: 9px;
    background: var(--surface);
}
#panel-publish .publish-advanced__summary {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    padding: 0 11px;
    color: var(--secondary);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
#panel-publish .publish-advanced__summary::-webkit-details-marker { display: none; }
#panel-publish .publish-advanced__chevron {
    width: 7px;
    height: 7px;
    margin-left: auto;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
}
#panel-publish .publish-advanced[open] .publish-advanced__chevron { transform: rotate(225deg); }
#panel-publish .publish-advanced__body {
    padding: 12px;
    border-top: 1px solid var(--pub-line);
}
#panel-publish .publish-advanced__brand {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--soft);
}
#panel-publish .publish-advanced__hint,
#panel-publish .publish-music-note,
#panel-publish .publish-music-hint { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.45; }

#panel-publish .publish-music-search,
#panel-publish .publish-music-selected,
#panel-publish .publish-music-volumes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 10px;
}
#panel-publish .publish-music-selected {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 9px 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
    border-radius: 8px;
    background: var(--accent-soft);
}
#panel-publish .publish-music-selected__copy { min-width: 0; }
#panel-publish .publish-music-selected__copy :is(strong, span) {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#panel-publish .publish-music-results,
#panel-publish .publish-search-results { display: grid; gap: 5px; max-height: 240px; overflow-y: auto; }
#panel-publish .publish-music-result,
#panel-publish .publish-search-result {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    padding: 7px 9px;
    border: 1px solid var(--pub-line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--secondary);
    text-align: left;
    cursor: pointer;
}
#panel-publish .publish-music-result:hover,
#panel-publish .publish-search-result:hover,
#panel-publish .publish-music-result.is-active {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
    background: var(--accent-soft);
    color: var(--text);
}

#panel-publish .publish-tagged__row,
#panel-publish .publish-carousel-meta__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 80px 80px auto;
    align-items: end;
    gap: 8px;
    padding: 9px;
    border: 1px solid var(--pub-line);
    border-radius: 9px;
}
#panel-publish .publish-carousel-meta__item { grid-template-columns: auto minmax(0, 1fr); }

/* Rail e distribuição ----------------------------------------------------- */

#panel-publish .publish-rail-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
#panel-publish .publish-rail-card__badge {
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
}
#panel-publish .publish-rail-card__stack { display: grid; gap: 8px; }
#panel-publish .publish-bulk-preview__table { overflow: hidden; border: 1px solid var(--pub-line); border-radius: 8px; }
#panel-publish .publish-bulk-preview__header,
#panel-publish .publish-bulk-preview__row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 42px 52px;
    align-items: center;
    gap: 6px;
    padding: 7px 8px;
    font-size: 11px;
}
#panel-publish .publish-bulk-preview__header {
    background: var(--soft);
    color: var(--muted);
    font-weight: 650;
}
#panel-publish .publish-bulk-preview__row { border-top: 1px solid var(--pub-line); color: var(--secondary); cursor: pointer; }
#panel-publish .publish-bulk-preview__row.is-active { background: var(--accent-soft); color: var(--text); }

/* Preview — mockup único e estados por plataforma ------------------------ */

#panel-publish .publish-post-preview { width: 100%; }
#panel-publish .publish-post-preview__card {
    width: 100%;
    max-width: 230px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--line) 75%, #000);
    border-radius: 22px;
    background: #090909;
    color: #fff;
}
#panel-publish .publish-post-preview__phone,
#panel-publish .publish-post-preview__screen { width: 100% !important; max-width: none !important; }
#panel-publish .publish-post-preview__screen {
    position: relative;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
    background: #0b0b0b;
}
#panel-publish .publish-post-preview__stage {
    position: relative;
    min-height: 360px;
    overflow: hidden;
    background: #111;
}
#panel-publish .publish-post-preview__media {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #151515;
}
#panel-publish .publish-post-preview__media-inner,
#panel-publish .publish-post-preview__media :is(img, video) {
    width: 100%;
    height: 100%;
}
#panel-publish .publish-post-preview__media :is(img, video) { object-fit: cover; }
#panel-publish .publish-post-preview__media-placeholder {
    display: grid;
    justify-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.56);
    font-size: 11px;
}
#panel-publish .publish-preview__chrome { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
#panel-publish .publish-preview__immersive-ui,
#panel-publish .publish-preview__story-ui { position: absolute; inset: 0; }

#panel-publish .publish-preview__reel-top,
#panel-publish .publish-preview__tiktok-top,
#panel-publish .publish-preview__story-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 12px;
    color: #fff;
    font-size: 13px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}
#panel-publish .publish-preview__tiktok-top { justify-content: center; gap: 14px; }
#panel-publish .publish-preview__tiktok-top .is-active { font-weight: 700; }

#panel-publish .publish-preview__reel-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30px;
    align-items: end;
    gap: 8px;
    padding: 36px 10px 12px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
}
#panel-publish .publish-preview__account {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
}
#panel-publish .publish-post-preview__avatar {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    overflow: hidden;
    border-radius: 50%;
    background: #333;
    color: #fff;
    font-size: 10px;
}
#panel-publish .publish-post-preview__avatar img { width: 100%; height: 100%; object-fit: cover; }
#panel-publish .publish-preview__follow {
    padding: 3px 6px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 5px;
    font-size: 9px;
}
#panel-publish .publish-post-preview__caption,
#panel-publish .publish-post-preview__audio { margin-top: 6px; color: #fff; font-size: 10px; line-height: 1.35; }
#panel-publish .publish-post-preview__caption p { margin: 0; }
#panel-publish .publish-post-preview__caption-empty { color: rgba(255, 255, 255, 0.55); }
#panel-publish .publish-caption-hidden { display: none; }
#panel-publish .publish-caption-fold { color: rgba(255, 255, 255, 0.7); }
#panel-publish .publish-preview__actions { display: grid; justify-items: center; gap: 10px; }
#panel-publish .publish-preview__action {
    display: grid;
    justify-items: center;
    gap: 2px;
    width: 28px;
    min-width: 28px;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #fff;
    font-size: 8px;
    pointer-events: none;
}
#panel-publish .publish-preview__action svg { width: 20px; height: 20px; }
#panel-publish .publish-preview__action small {
    color: #fff;
    font-size: 7.5px;
    line-height: 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

#panel-publish .publish-post-preview__card--reel .publish-preview__tiktok-top,
#panel-publish .publish-post-preview__card--reel .publish-preview__story-ui,
#panel-publish .publish-post-preview__card--tiktok .publish-preview__reel-top,
#panel-publish .publish-post-preview__card--tiktok .publish-preview__story-ui {
    display: none;
}
#panel-publish .publish-post-preview__card--reel .publish-preview__reel-top,
#panel-publish .publish-post-preview__card--tiktok .publish-preview__tiktok-top {
    display: flex;
}

#panel-publish .publish-preview__story-ui,
#panel-publish .publish-preview__threads-ui,
#panel-publish .publish-preview__feed-head,
#panel-publish .publish-preview__feed-actions,
#panel-publish .publish-preview__feed-likes,
#panel-publish .publish-preview__feed-caption { display: none; }

#panel-publish .publish-post-preview__card--story .publish-preview__immersive-ui { display: none; }
#panel-publish .publish-post-preview__card--story .publish-preview__story-ui { display: block; }
#panel-publish .publish-preview__progress {
    display: flex;
    gap: 3px;
    padding: 8px 8px 0;
}
#panel-publish .publish-preview__progress span { flex: 1; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.35); }
#panel-publish .publish-preview__progress .is-active { background: #fff; }
#panel-publish .publish-preview__story-body { position: absolute; inset: 54px 12px 58px; display: grid; place-items: center; }
#panel-publish .publish-preview__story-sticker { padding: 8px 10px; border-radius: 7px; background: rgba(0, 0, 0, 0.45); font-size: 10px; }
#panel-publish .publish-preview__story-reply {
    position: absolute;
    right: 10px;
    bottom: 12px;
    left: 10px;
    display: flex;
    align-items: center;
    gap: 7px;
}
#panel-publish .publish-preview__story-reply-input {
    flex: 1;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 999px;
    font-size: 9px;
}

#panel-publish .publish-post-preview__card--post { background: #fff; color: #111; }
#panel-publish .publish-post-preview__card--post .publish-post-preview__screen { background: #fff; color: #111; }
#panel-publish .publish-post-preview__card--post .publish-preview__immersive-ui { display: none; }
#panel-publish .publish-post-preview__card--post .publish-preview__feed-head {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    padding: 7px 9px;
    color: #111;
    font-size: 10px;
}
#panel-publish .publish-post-preview__card--post .publish-post-preview__stage { min-height: 230px; }
#panel-publish .publish-post-preview__card--post .publish-preview__feed-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px;
    color: #111;
}
#panel-publish .publish-preview__feed-actions-left { display: flex; gap: 10px; }
#panel-publish .publish-preview__feed-actions svg { width: 18px; height: 18px; }
#panel-publish .publish-post-preview__card--post .publish-preview__feed-likes,
#panel-publish .publish-post-preview__card--post .publish-preview__feed-caption {
    display: block;
    margin: 0;
    padding: 0 9px 8px;
    color: #111;
    font-size: 9.5px;
}
#panel-publish .publish-post-preview__card--post .publish-post-preview__caption { color: #111; }
#panel-publish .publish-post-preview__card--post .publish-post-preview__caption-empty { color: #777; }

#panel-publish .publish-post-preview__card--threads { background: var(--surface); color: var(--text); }
#panel-publish .publish-post-preview__card--threads .publish-preview__threads-ui {
    display: block;
    min-height: 310px;
    padding: 14px 11px;
    background: var(--surface);
    color: var(--text);
}
#panel-publish .publish-post-preview__card--threads .publish-post-preview__stage,
#panel-publish .publish-post-preview__card--threads .publish-preview__chrome { display: none; }
#panel-publish .publish-preview__threads-post { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; }
#panel-publish .publish-preview__threads-rail { display: flex; flex-direction: column; align-items: center; gap: 5px; }
#panel-publish .publish-preview__threads-line { width: 1px; min-height: 180px; flex: 1; background: var(--line); }
#panel-publish .publish-preview__threads-head,
#panel-publish .publish-preview__threads-meta,
#panel-publish .publish-preview__threads-actions { display: flex; align-items: center; gap: 8px; }
#panel-publish .publish-preview__threads-head { justify-content: space-between; font-size: 10px; }
#panel-publish .publish-preview__threads-text { margin: 8px 0; font-size: 10px; line-height: 1.45; }
#panel-publish .publish-preview__threads-text p { margin: 0; }
#panel-publish .publish-preview__threads-media-slot {
    min-height: 160px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--soft);
}
#panel-publish .publish-preview__threads-media-slot .publish-post-preview__media { position: relative; min-height: 160px; }
#panel-publish .publish-preview__threads-actions { margin-top: 9px; }
#panel-publish .publish-preview__threads-actions svg { width: 16px; height: 16px; }

#panel-publish .publish-post-preview__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 8px;
    padding: 8px 9px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: #111;
    color: rgba(255, 255, 255, 0.62);
    font-size: 8.5px;
}
#panel-publish .publish-post-preview__when { display: inline-flex; align-items: center; gap: 4px; }
#panel-publish .publish-post-preview__platforms { display: inline-flex; gap: 4px; margin-left: auto; }
#panel-publish .publish-post-preview__platform { display: inline-flex; align-items: center; gap: 3px; }

/* Fila ------------------------------------------------------------------- */

#panel-publish .publish-queue__toolbar-end { display: flex; align-items: center; gap: 9px; margin-left: auto; }
#panel-publish .publish-queue__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--soft);
    color: var(--secondary);
    font-size: 11px;
    font-weight: 650;
}
#panel-publish .publish-queue__filter {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: 12px;
}
#panel-publish .publish-queue__filter-label { display: inline-flex; align-items: center; gap: 5px; }
#panel-publish .publish-queue__body { min-height: 300px; }
#panel-publish .publish-queue__list { display: grid; }
#panel-publish .publish-post {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(220px, auto) auto auto;
    align-items: center;
    gap: 12px 18px;
    min-height: 66px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--pub-line);
    background: var(--surface);
}
#panel-publish .publish-post:last-child { border-bottom: 0; }
#panel-publish .publish-post:hover { background: color-mix(in srgb, var(--hover) 45%, var(--surface)); }
#panel-publish .publish-post__title {
    margin: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 13px;
    font-weight: 580;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#panel-publish .publish-post__meta,
#panel-publish .publish-post__platforms,
#panel-publish .publish-post__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
#panel-publish .publish-post__meta { color: var(--muted); font-size: 11.5px; }
#panel-publish .publish-post__platform,
#panel-publish .publish-post__team,
#panel-publish .publish-post__when { display: inline-flex; align-items: center; gap: 4px; }
#panel-publish .publish-post__status {
    padding: 4px 7px;
    border-radius: 999px;
    background: var(--soft);
    color: var(--secondary);
    font-size: 10.5px;
    font-weight: 650;
}
#panel-publish .publish-post__status--PUBLISHED,
#panel-publish .publish-post__status--POSTED { background: color-mix(in srgb, var(--ok) 12%, var(--surface)); color: var(--ok); }
#panel-publish .publish-post__status--ERROR,
#panel-publish .publish-post__status--FAILED { background: color-mix(in srgb, var(--bad) 12%, var(--surface)); color: var(--bad); }
#panel-publish .publish-post__status--SCHEDULED { background: var(--accent-soft); color: var(--accent); }

/* Contas ----------------------------------------------------------------- */

#panel-publish .publish-accounts { display: grid; gap: 14px; }
#panel-publish .publish-accounts__overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
#panel-publish .publish-accounts__kpi {
    display: grid;
    gap: 3px;
    padding: 14px;
    border: 1px solid var(--pub-line);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: none;
}
#panel-publish .publish-accounts__kpi-value { color: var(--text); font-size: 22px; font-weight: 680; letter-spacing: -0.04em; }
#panel-publish .publish-accounts__kpi-label { color: var(--muted); font-size: 11.5px; }
#panel-publish .publish-accounts__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px;
}
#panel-publish .publish-accounts__search { flex: 1 1 240px; max-width: 420px; }
#panel-publish .publish-accounts__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
#panel-publish .publish-accounts__tip {
    padding: 10px 12px;
    border: 1px solid var(--pub-line);
    border-radius: 10px;
    background: var(--surface);
}
#panel-publish .publish-accounts__tip summary {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--secondary);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
#panel-publish .publish-accounts__tip p { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
#panel-publish .publish-accounts__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 12px;
}
#panel-publish .publish-acc-card {
    overflow: hidden;
    border: 1px solid var(--pub-line);
    border-radius: 11px;
    background: var(--surface);
    box-shadow: none;
}
#panel-publish .publish-acc-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 13px;
    border-bottom: 1px solid var(--pub-line);
}
#panel-publish .publish-acc-card__identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
#panel-publish .publish-acc-card__avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--soft);
    color: var(--secondary);
    font-weight: 650;
}
#panel-publish .publish-acc-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
#panel-publish .publish-acc-card__meta { min-width: 0; }
#panel-publish .publish-acc-card__title-row,
#panel-publish .publish-acc-card__aside,
#panel-publish .publish-acc-card__progress { display: flex; align-items: center; gap: 7px; }
#panel-publish .publish-acc-card__title-row h4 { margin: 0; color: var(--text); font-size: 13.5px; }
#panel-publish .publish-acc-card__sub { margin: 3px 0 0; overflow: hidden; color: var(--muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
#panel-publish .publish-acc-card__badge {
    padding: 3px 6px;
    border-radius: 999px;
    background: var(--soft);
    color: var(--muted);
    font-size: 9.5px;
    font-weight: 650;
}
#panel-publish .publish-acc-card__badge.is-ok { background: color-mix(in srgb, var(--ok) 12%, var(--surface)); color: var(--ok); }
#panel-publish .publish-acc-card__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
#panel-publish .publish-acc-card__dot.is-on { background: var(--ok); }
#panel-publish .publish-acc-card__platforms { margin: 0; padding: 0; list-style: none; }
#panel-publish .publish-acc-row {
    display: grid;
    grid-template-columns: 28px 76px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--pub-line);
}
#panel-publish .publish-acc-row:last-child { border-bottom: 0; }
#panel-publish .publish-acc-row__icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--soft);
    color: var(--muted);
}
#panel-publish .publish-acc-row.is-connected .publish-acc-row__icon { color: var(--text); }
#panel-publish .publish-acc-row__name { color: var(--secondary); font-size: 12px; font-weight: 600; }
#panel-publish .publish-acc-row__handle { overflow: hidden; color: var(--muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }

/* Modais e detalhes ------------------------------------------------------- */

#panel-publish .publish-modal {
    width: min(520px, calc(100vw - 32px));
    max-height: min(760px, calc(100dvh - 32px));
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--pub-line);
    border-radius: 13px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 24px 64px color-mix(in srgb, #000 30%, transparent);
}
#panel-publish .publish-modal--wide { width: min(760px, calc(100vw - 32px)); }
#panel-publish .publish-modal::backdrop { background: color-mix(in srgb, #000 48%, transparent); }
#panel-publish .publish-modal__head,
#panel-publish .publish-modal__foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--pub-line);
}
#panel-publish .publish-modal__head h3 { margin: 0; font-size: 14px; }
#panel-publish .publish-modal__head .btn { margin-left: auto; }
#panel-publish .publish-modal__body { display: grid; gap: 12px; padding: 14px; overflow-y: auto; }
#panel-publish .publish-modal__foot { justify-content: flex-end; border-top: 1px solid var(--pub-line); border-bottom: 0; }
#panel-publish .publish-analytics-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
#panel-publish .publish-analytics-grid__item {
    display: grid;
    gap: 4px;
    padding: 11px;
    border: 1px solid var(--pub-line);
    border-radius: 9px;
    background: var(--elevated, var(--surface));
}
#panel-publish .publish-analytics-grid__item span { color: var(--muted); font-size: 11px; }
#panel-publish .publish-analytics-grid__item strong { color: var(--text); font-size: 18px; }
#panel-publish .publish-comments { display: grid; gap: 12px; }
#panel-publish .publish-comments__actions,
#panel-publish .publish-comments__reply { display: flex; gap: 8px; }
#panel-publish .publish-comments__reply input { flex: 1; }
#panel-publish .publish-comment { padding: 10px; border: 1px solid var(--pub-line); border-radius: 9px; }
#panel-publish .publish-comment p { margin: 5px 0 0; font-size: 12.5px; line-height: 1.5; }

/* Responsivo ------------------------------------------------------------- */

@media (max-width: 1019px) {
    #panel-publish .publish-post-preview__card { max-width: 220px; }
    #panel-publish .publish-rail__scroll {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
    #panel-publish .publish-rail-card--preview { grid-row: span 2; }
}

@media (max-width: 760px) {
    #panel-publish .publish-toolbar .publish-platforms--compact,
    #panel-publish .publish-toolbar .publish-seg--format,
    #panel-publish .publish-compose-mode__inner {
        width: 100%;
    }
    #panel-publish .publish-toolbar__cluster {
        width: 100%;
        border-right: 0 !important;
    }
    #panel-publish .publish-toolbar .publish-platforms--compact > *,
    #panel-publish .publish-toolbar .publish-seg--format > * { flex: 1; }
    #panel-publish .publish-accounts-head__actions,
    #panel-publish .publish-accounts-bar__search { width: 100%; margin-left: 0; }
    #panel-publish .publish-rail__scroll { display: flex !important; }
    #panel-publish .publish-post {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
    }
    #panel-publish .publish-post__meta,
    #panel-publish .publish-post__actions { grid-column: 1 / -1; }
    #panel-publish .publish-post__actions { justify-content: flex-end; }
    #panel-publish .publish-accounts__overview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #panel-publish .publish-accounts__grid { grid-template-columns: minmax(0, 1fr); }
    #panel-publish .publish-field-grid,
    #panel-publish .publish-check-grid,
    #panel-publish .publish-music-search,
    #panel-publish .publish-music-volumes { grid-template-columns: minmax(0, 1fr); }
    #panel-publish .publish-tagged__row { grid-template-columns: minmax(0, 1fr) 64px 64px auto; }
    #panel-publish .publish-analytics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
    #panel-publish .publish-page { padding-inline: 12px; }
    #panel-publish .publish-accounts__overview { grid-template-columns: 1fr; }
    #panel-publish .publish-acc-row {
        grid-template-columns: 28px minmax(0, 1fr) auto;
    }
    #panel-publish .publish-acc-row__handle { grid-column: 2; }
    #panel-publish .publish-acc-row__action { grid-column: 3; grid-row: 1 / span 2; }
    #panel-publish .publish-analytics-grid { grid-template-columns: 1fr; }
}

/* ===== pages/reels.css ===== */
/*
 * Aba Instagram (Reels).
 *
 * Namespace .reel-* de propósito: core/macos.css, core/shell-premium.css,
 * core/theme-dark.css, core/design-system.css e core/mobile.css ainda
 * carregam regras para o prefixo .ig-* antigo. Prefixo novo = cascata limpa.
 *
 * Cores saem dos tokens do ui.css. A única cor de marca aqui é o rosa
 * do Instagram, usada em ícone, chip ativo e score quente.
 */

#panel-reels {
    --reel-gap: 14px;
    --reel-radius: 12px;
    --reel-radius-sm: 7px;
    --reel-ctrl: 30px;
    --reel-accent: #e1306c;
    --reel-thumb: 88px;
}

#panel-reels .reel {
    display: flex;
    flex-direction: column;
    gap: var(--reel-gap);
    margin: 0;
    min-width: 0;
    width: 100%;
}

#panel-reels .reel-view {
    display: none;
    flex-direction: column;
    gap: var(--reel-gap);
    min-width: 0;
    width: 100%;
}

#panel-reels .reel-view.is-active {
    display: flex;
}

/* ------------------------------------------------------------------ cabeçalho */

#panel-reels .reel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    min-width: 0;
}

#panel-reels .reel-head__identity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

#panel-reels .reel-head__icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--reel-radius-sm);
    background: color-mix(in srgb, var(--reel-accent) 12%, var(--soft));
    color: var(--reel-accent);
}

#panel-reels .reel-head__icon svg {
    display: block;
}

#panel-reels .reel-head h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 650;
    letter-spacing: -.022em;
    line-height: 1;
}

#panel-reels .reel-tabs {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: var(--reel-radius-sm);
    background: color-mix(in srgb, var(--soft) 40%, var(--surface));
}

#panel-reels .reel-tabs__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    appearance: none;
    height: 27px;
    padding: 0 11px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: -.01em;
    white-space: nowrap;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

#panel-reels .reel-tabs__btn svg {
    display: block;
    flex-shrink: 0;
    opacity: .7;
}

#panel-reels .reel-tabs__btn:hover {
    color: var(--text);
}

#panel-reels .reel-tabs__btn.is-active {
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    box-shadow: var(--shadow);
}

#panel-reels .reel-tabs__btn.is-active svg {
    opacity: 1;
    color: var(--reel-accent);
}

#panel-reels .reel-tabs__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--reel-accent) 14%, var(--surface));
    color: var(--reel-accent);
    font-size: 10px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

#panel-reels .reel-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

#panel-reels .reel-stat,
#panel-reels button.reel-stat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: var(--reel-ctrl);
    min-height: var(--reel-ctrl);
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: var(--reel-radius-sm);
    background: var(--surface);
    color: inherit;
    font: inherit;
    line-height: 1;
    cursor: default;
    box-shadow: var(--macos-control-shadow, 0 .5px 1px color-mix(in srgb, #000 8%, transparent));
}

#panel-reels button.reel-stat:not(:disabled) {
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}

#panel-reels button.reel-stat:not(:disabled):hover {
    background: var(--hover);
    border-color: var(--line-strong);
}

#panel-reels button.reel-stat:disabled {
    opacity: .5;
}

#panel-reels .reel-stat strong {
    font-size: 12.5px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

#panel-reels .reel-stat > span:last-child {
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
}

#panel-reels .reel-stat--warn {
    border-color: color-mix(in srgb, var(--warn, #fb923c) 30%, var(--line));
    background: color-mix(in srgb, var(--warn, #fb923c) 8%, var(--surface));
}

#panel-reels .reel-stat--warn strong {
    color: var(--warn, #fb923c);
}

/* ------------------------------------------------------------------ importar */

#panel-reels .reel-import,
#panel-reels .reel-composer {
    min-width: 0;
    width: 100%;
}

#panel-reels .reel-composer {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--reel-radius);
    background: var(--surface);
    box-shadow: var(--macos-window-shadow, var(--shadow));
}

#panel-reels .reel-composer__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--soft) 40%, var(--surface));
}

#panel-reels .reel-composer__lead {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    flex: 1 1 220px;
}

#panel-reels .reel-composer__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

#panel-reels .reel-composer__title-row h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 650;
    letter-spacing: -.02em;
    line-height: 1;
}

#panel-reels .reel-composer__status {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: var(--secondary);
    font-size: 12px;
    line-height: 1;
}

#panel-reels .reel-composer__status [data-import-link-count].is-active {
    color: var(--text);
    font-weight: 600;
}

#panel-reels .reel-composer__meta {
    color: var(--muted);
}

#panel-reels .reel-composer__rules {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#panel-reels .reel-composer__rules li {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 11px;
    font-weight: 550;
    line-height: 1;
}

#panel-reels .reel-composer__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

#panel-reels .reel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--reel-ctrl);
    min-height: var(--reel-ctrl);
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--reel-radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 12.5px;
    font-weight: 550;
    letter-spacing: -.01em;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--macos-control-shadow, 0 .5px 1px color-mix(in srgb, #000 8%, transparent));
    transition: background 120ms ease, border-color 120ms ease, opacity 120ms ease;
}

#panel-reels .reel-btn svg {
    display: block;
    flex-shrink: 0;
}

#panel-reels .reel-btn:hover {
    background: var(--hover);
    border-color: var(--line-strong);
}

#panel-reels .reel-btn--ghost {
    border-color: transparent;
    background: transparent;
    color: var(--secondary);
    box-shadow: none;
}

#panel-reels .reel-btn--ghost:hover {
    border-color: var(--line);
    background: var(--surface);
    color: var(--text);
}

#panel-reels .reel-btn--primary {
    border-color: transparent;
    background: var(--text);
    color: var(--surface);
    font-weight: 600;
}

#panel-reels .reel-btn--primary:hover {
    opacity: .9;
    background: var(--text);
}

[data-theme="dark"] #panel-reels .reel-btn--primary {
    background: var(--reel-accent);
    color: #fff;
}

#panel-reels .reel-btn--primary:disabled {
    opacity: .45;
    cursor: default;
}

#panel-reels .reel-composer__editor {
    display: flex;
    flex: 1;
    min-height: 280px;
    margin: 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: color-mix(in srgb, var(--soft) 22%, var(--surface));
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

#panel-reels .reel-composer__editor:focus-within {
    border-color: color-mix(in srgb, var(--reel-accent) 36%, var(--line));
    background: var(--surface);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--reel-accent) 10%, transparent);
}

#panel-reels .reel-composer__input {
    display: block;
    width: 100%;
    min-height: 280px;
    flex: 1;
    margin: 0;
    padding: 14px 16px;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--text);
    font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 12.5px;
    line-height: 1.7;
    resize: vertical;
}

#panel-reels .reel-composer__input:focus {
    outline: none;
}

#panel-reels .reel-composer__input::placeholder {
    color: color-mix(in srgb, var(--muted) 80%, transparent);
}

/* ------------------------------------------------------------------ ranking */

#panel-reels .reel-board {
    display: flex;
    flex-direction: column;
    gap: var(--reel-gap);
    min-width: 0;
    width: 100%;
}

#panel-reels .reel-queue,
#panel-reels .reel-panel {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--reel-radius);
    background: var(--surface);
    box-shadow: var(--macos-window-shadow, var(--shadow));
}

#panel-reels .reel-queue__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    list-style: none;
    cursor: pointer;
    user-select: none;
}

#panel-reels .reel-queue__head::-webkit-details-marker {
    display: none;
}

#panel-reels .reel-queue__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: -.01em;
}

#panel-reels .reel-queue__count {
    min-width: 22px;
    padding: 3px 8px;
    border: 1px solid color-mix(in srgb, var(--warn, #fb923c) 28%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--warn, #fb923c) 12%, var(--surface));
    color: var(--warn, #fb923c);
    font-size: 11px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

#panel-reels .reel-queue__body {
    padding: 12px 14px;
    border-top: 1px solid var(--line);
}

#panel-reels .reel-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

#panel-reels .reel-toolbar {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 94%, var(--bg));
}

#panel-reels .reel-toolbar__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

#panel-reels .reel-toolbar__summary {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    min-width: 0;
    color: var(--muted);
    font-size: 12px;
}

#panel-reels .reel-toolbar__summary strong {
    color: var(--text);
    font-size: 15px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    line-height: 1;
}

#panel-reels .reel-toolbar__tools {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

#panel-reels .reel-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 1 200px;
    width: 200px;
    max-width: 100%;
    margin: 0 !important;
}

#panel-reels .reel-search svg {
    position: absolute;
    left: 10px;
    z-index: 1;
    color: var(--muted);
    pointer-events: none;
}

#panel-reels .reel-search input {
    width: 100%;
    height: var(--reel-ctrl);
    min-height: var(--reel-ctrl);
    margin: 0;
    padding: 0 10px 0 32px;
    border: 1px solid var(--line);
    border-radius: var(--reel-radius-sm);
    background: var(--elevated);
    color: var(--text);
    font-size: 13px;
    box-shadow: inset 0 1px 1px color-mix(in srgb, #000 4%, transparent);
}

#panel-reels .reel-search input:focus {
    outline: 0;
    border-color: color-mix(in srgb, var(--reel-accent) 40%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--reel-accent) 10%, transparent);
}

#panel-reels .reel-density {
    display: inline-flex;
    flex-shrink: 0;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--line);
    border-radius: var(--reel-radius-sm);
    background: color-mix(in srgb, var(--soft) 45%, transparent);
}

#panel-reels .reel-density button {
    appearance: none;
    min-height: 24px;
    padding: 0 9px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

#panel-reels .reel-density button:hover {
    color: var(--text);
}

#panel-reels .reel-density button.is-active {
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    box-shadow: var(--shadow);
}

#panel-reels .reel-toolbar__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    min-width: 0;
}

#panel-reels .reel-filter {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

#panel-reels .reel-filter--grow {
    flex: 1 1 280px;
    min-width: 0;
}

#panel-reels .reel-filter__label {
    flex-shrink: 0;
    color: var(--muted);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .07em;
    line-height: 1;
    text-transform: uppercase;
}

#panel-reels .reel-chips {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

#panel-reels .reel-chips--scroll {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

#panel-reels .reel-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    min-height: 24px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--secondary);
    font: inherit;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: -.01em;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

#panel-reels .reel-chip:hover {
    background: var(--hover);
    border-color: var(--line-strong);
    color: var(--text);
}

#panel-reels .reel-chip.is-active {
    border-color: color-mix(in srgb, var(--reel-accent) 40%, var(--line));
    background: color-mix(in srgb, var(--reel-accent) 12%, var(--surface));
    color: var(--reel-accent);
    font-weight: 600;
}

#panel-reels .reel-range {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    min-width: 0;
    padding: 8px 10px;
    border: 1px dashed color-mix(in srgb, var(--line) 90%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--soft) 35%, transparent);
}

#panel-reels .reel-range[hidden] {
    display: none !important;
}

#panel-reels .reel-range__field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    min-width: 0;
}

#panel-reels .reel-range__label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 550;
    white-space: nowrap;
}

#panel-reels .reel-range__field input {
    width: auto;
    min-width: 136px;
    max-width: 100%;
    height: var(--reel-ctrl);
    min-height: var(--reel-ctrl);
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: var(--reel-radius-sm);
    background: var(--elevated);
    color: var(--text);
    font-size: 13px;
    box-shadow: inset 0 1px 1px color-mix(in srgb, #000 4%, transparent);
}

#panel-reels .reel-range__field input:focus {
    outline: 0;
    border-color: color-mix(in srgb, var(--reel-accent) 40%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--reel-accent) 10%, transparent);
}

#panel-reels .reel-range__sep {
    color: var(--muted);
    font-size: 12px;
    font-weight: 550;
    white-space: nowrap;
}

#panel-reels .reel-panel__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
}

#panel-reels .reel-empty {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

#panel-reels .reel-empty[hidden] {
    display: none !important;
}

#panel-reels .reel-board .empty-state {
    padding: 48px 20px;
    border: 1px dashed var(--line);
    border-radius: var(--reel-radius);
    background: color-mix(in srgb, var(--soft) 30%, var(--surface));
}

/* ------------------------------------------------------------------ grids */

#panel-reels .reel-grid {
    display: grid;
    gap: 12px;
    min-width: 0;
    width: 100%;
    grid-template-columns: 1fr;
}

#panel-reels .reel-grid--queue {
    grid-template-columns: 1fr;
}

#panel-reels .reel-panel[data-rank-density="list"] .reel-grid--ranked {
    grid-template-columns: 1fr;
}

#panel-reels .reel-panel[data-rank-density="grid"] .reel-grid--ranked {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    align-items: stretch;
}

/* ------------------------------------------------------------------ cards */

#panel-reels .reel-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--macos-control-shadow, var(--shadow));
    transition: border-color 140ms ease;
}

#panel-reels .reel-card:hover {
    border-color: var(--line-strong);
}

#panel-reels .reel-card--pick {
    border-color: color-mix(in srgb, var(--reel-accent) 28%, var(--line));
}

#panel-reels .reel-card--error {
    border-color: color-mix(in srgb, var(--danger, #ef4444) 40%, var(--line));
}

#panel-reels .reel-card__media {
    position: relative;
    background: color-mix(in srgb, var(--bg) 80%, #000);
}

#panel-reels .reel-card__media-link {
    display: block;
    line-height: 0;
}

#panel-reels .reel-card__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

#panel-reels .reel-card__media--empty {
    aspect-ratio: 4 / 5;
    background:
        linear-gradient(160deg,
            color-mix(in srgb, var(--bg) 65%, var(--surface)),
            color-mix(in srgb, var(--surface) 75%, var(--line)));
}

#panel-reels .reel-card__media--empty img {
    display: none;
}

#panel-reels .reel-card__rank,
#panel-reels .reel-card__views {
    position: absolute;
    color: #fff;
    font-size: 11px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

#panel-reels .reel-card__rank {
    top: 8px;
    left: 8px;
    padding: 5px 7px;
    border-radius: 6px;
    background: color-mix(in srgb, #111 72%, transparent);
}

#panel-reels .reel-card__views {
    bottom: 8px;
    left: 8px;
    padding: 5px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, #111 68%, transparent);
}

#panel-reels .reel-card__body {
    display: grid;
    flex: 1;
    grid-template-rows: 1fr auto;
    min-width: 0;
    min-height: 0;
}

#panel-reels .reel-card__main {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 12px 12px 0;
}

#panel-reels .reel-card__row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

#panel-reels .reel-card__user {
    overflow: hidden;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: -.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#panel-reels .reel-card__user--muted {
    color: var(--muted);
    font-weight: 500;
}

#panel-reels .reel-card__tag {
    flex-shrink: 0;
    padding: 3px 7px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: color-mix(in srgb, var(--soft) 70%, var(--surface));
    color: var(--muted);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
}

#panel-reels .reel-card__tag--error {
    border-color: color-mix(in srgb, var(--danger, #ef4444) 45%, var(--line));
    color: var(--danger, #ef4444);
}

#panel-reels .reel-card__score {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    margin-left: auto;
    padding: 3px 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

#panel-reels .reel-card__score.is-hot {
    border-color: color-mix(in srgb, #f59e0b 35%, var(--line));
    background: color-mix(in srgb, #f59e0b 14%, var(--surface));
    color: #b45309;
}

#panel-reels .reel-card__score.is-warm {
    border-color: color-mix(in srgb, #22c55e 32%, var(--line));
    background: color-mix(in srgb, #22c55e 12%, var(--surface));
    color: #15803d;
}

#panel-reels .reel-card__score.is-cool {
    border-color: color-mix(in srgb, #3b82f6 30%, var(--line));
    background: color-mix(in srgb, #3b82f6 12%, var(--surface));
    color: #1d4ed8;
}

[data-theme="dark"] #panel-reels .reel-card__score.is-hot { color: #fbbf24; }
[data-theme="dark"] #panel-reels .reel-card__score.is-warm { color: #86efac; }
[data-theme="dark"] #panel-reels .reel-card__score.is-cool { color: #93c5fd; }

#panel-reels .reel-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: 0;
    color: var(--muted);
    font-size: 11px;
}

#panel-reels .reel-card__title {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

#panel-reels .reel-card__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 2px 0 0;
}

#panel-reels .reel-card__metrics div {
    min-width: 0;
}

#panel-reels .reel-card__metrics dt {
    margin: 0;
    color: var(--muted);
    font-size: 10px;
    font-weight: 550;
    letter-spacing: .04em;
    text-transform: uppercase;
}

#panel-reels .reel-card__metrics dd {
    margin: 3px 0 0;
    font-size: 13px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

#panel-reels .reel-card__actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
    height: 38px;
    min-height: 38px;
    margin-top: auto;
    border-top: 1px solid var(--line);
}

#panel-reels .reel-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 8px;
    border: 0;
    border-right: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

#panel-reels .reel-card__btn:last-child,
#panel-reels .reel-card__delete:last-child .reel-card__btn {
    border-right: 0;
}

#panel-reels .reel-card__btn:hover {
    background: var(--hover);
    color: var(--text);
}

#panel-reels .reel-card__btn--danger:hover {
    background: color-mix(in srgb, var(--danger, #ef4444) 12%, transparent);
    color: var(--danger, #ef4444);
}

#panel-reels .reel-card__delete {
    display: contents;
}

#panel-reels .reel-card--queue .reel-card__main {
    padding-bottom: 12px;
}

/* ------------------------------------------------------------------ lista */

#panel-reels .reel-panel[data-rank-density="list"] .reel-card {
    display: grid;
    grid-template-columns: var(--reel-thumb) minmax(0, 1fr);
    align-items: stretch;
    min-height: 108px;
}

#panel-reels .reel-panel[data-rank-density="list"] .reel-card__media,
#panel-reels .reel-panel[data-rank-density="list"] .reel-card__media--empty {
    align-self: stretch;
    width: var(--reel-thumb);
    height: 100%;
    min-height: 108px;
    aspect-ratio: auto;
}

#panel-reels .reel-panel[data-rank-density="list"] .reel-card__media img {
    height: 100%;
    min-height: 108px;
    aspect-ratio: auto;
    object-fit: cover;
}

#panel-reels .reel-panel[data-rank-density="list"] .reel-card__views {
    display: none;
}

#panel-reels .reel-panel[data-rank-density="list"] .reel-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    min-height: 108px;
}

#panel-reels .reel-panel[data-rank-density="list"] .reel-card__main {
    gap: 6px;
    justify-content: center;
    padding: 12px 14px 10px;
}

#panel-reels .reel-panel[data-rank-density="list"] .reel-card__title {
    -webkit-line-clamp: 1;
    line-clamp: 1;
}

#panel-reels .reel-panel[data-rank-density="list"] .reel-card__metrics {
    grid-template-columns: repeat(3, max-content);
    gap: 12px;
}

#panel-reels .reel-panel[data-rank-density="grid"] .reel-card {
    height: 100%;
}

#panel-reels .reel-panel[data-rank-density="grid"] .reel-card__meta {
    display: none;
}

@media (min-width: 960px) {
    #panel-reels .reel-head {
        flex-wrap: nowrap;
    }

    #panel-reels .reel-stats {
        flex-shrink: 0;
    }

    #panel-reels .reel-panel[data-rank-density="list"] .reel-card {
        grid-template-columns: var(--reel-thumb) minmax(0, 1fr) auto;
    }

    #panel-reels .reel-panel[data-rank-density="list"] .reel-card__body {
        display: contents;
    }

    #panel-reels .reel-panel[data-rank-density="list"] .reel-card__main {
        padding: 14px 16px;
    }

    #panel-reels .reel-panel[data-rank-density="list"] .reel-card__actions {
        display: flex;
        flex-direction: column;
        align-content: center;
        width: 96px;
        min-width: 96px;
        height: auto;
        min-height: 100%;
        border-top: 0;
        border-left: 1px solid var(--line);
    }

    #panel-reels .reel-panel[data-rank-density="list"] .reel-card__btn {
        flex: 1;
        height: auto;
        min-height: 34px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    #panel-reels .reel-panel[data-rank-density="list"] .reel-card__btn:last-child,
    #panel-reels .reel-panel[data-rank-density="list"] .reel-card__delete:last-child .reel-card__btn {
        border-bottom: 0;
    }
}

@media (min-width: 1400px) {
    #panel-reels .reel-panel[data-rank-density="grid"] .reel-grid--ranked {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }
}

@media (max-width: 640px) {
    #panel-reels .reel-head {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    #panel-reels .reel-head__identity {
        width: 100%;
    }

    #panel-reels .reel-tabs {
        width: 100%;
    }

    #panel-reels .reel-tabs__btn {
        flex: 1;
    }

    #panel-reels .reel-stats {
        width: 100%;
        margin-left: 0;
    }

    #panel-reels .reel-composer__bar {
        flex-direction: column;
        align-items: stretch;
    }

    #panel-reels .reel-composer__actions {
        justify-content: stretch;
    }

    #panel-reels .reel-composer__actions .reel-btn {
        flex: 1 1 auto;
    }

    #panel-reels .reel-composer__submit {
        display: none;
    }

    #panel-reels .reel-composer__input,
    #panel-reels .reel-composer__editor {
        min-height: 200px;
    }

    #panel-reels .reel-toolbar__top {
        grid-template-columns: 1fr;
    }

    #panel-reels .reel-toolbar__tools {
        width: 100%;
    }

    #panel-reels .reel-search {
        flex: 1 1 auto;
        width: auto;
    }

    #panel-reels .reel-toolbar__filters {
        flex-direction: column;
        align-items: stretch;
    }

    #panel-reels .reel-filter,
    #panel-reels .reel-filter--grow {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    #panel-reels .reel-range {
        flex-direction: column;
        align-items: stretch;
    }

    #panel-reels .reel-range__field {
        width: 100%;
    }

    #panel-reels .reel-range__field input {
        flex: 1;
        width: 100%;
    }

    #panel-reels .reel-panel[data-rank-density="list"] .reel-card {
        grid-template-columns: 72px minmax(0, 1fr);
        min-height: 96px;
    }

    #panel-reels .reel-panel[data-rank-density="list"] .reel-card__media,
    #panel-reels .reel-panel[data-rank-density="list"] .reel-card__media--empty,
    #panel-reels .reel-panel[data-rank-density="list"] .reel-card__media img {
        width: 72px;
        min-height: 96px;
    }

    #panel-reels .reel-panel[data-rank-density="list"] .reel-card__metrics {
        display: none;
    }

    #panel-reels .reel-panel[data-rank-density="grid"] .reel-grid--ranked {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    #panel-reels .reel-panel[data-rank-density="grid"] .reel-card__main {
        padding: 10px 10px 0;
    }

    #panel-reels .reel-panel[data-rank-density="grid"] .reel-card__metrics {
        grid-template-columns: 1fr 1fr;
    }

    #panel-reels .reel-panel[data-rank-density="grid"] .reel-card__metrics div:first-child {
        display: none;
    }

    .tabs:has(#tab-reels:checked) #panel-reels .reel-view.is-active[data-reels-view="import"] {
        padding-bottom: calc(var(--mobile-nav-h, 56px) + var(--mobile-dock-action-h, 48px) + env(safe-area-inset-bottom, 0px) + 8px);
    }
}

@media (max-width: 480px) {
    #panel-reels .reel-head h2 {
        font-size: 20px;
    }
}

/* ===== pages/downloader-macos.css ===== */
/* ============================================================================
   Downloader — camada visual (última na cascata)
   Geometria, ritmo e estados. O downloader.css guarda o esqueleto e os IDs;
   daqui para baixo esta aba precisa parecer o resto do painel: uma superfície,
   hairline, o campo de links como herói. Sem card-dentro-de-card.
   ========================================================================= */

#panel-downloader {
    --dl-radius: 12px;
    --dl-control: var(--macos-ctrl-h, 28px);
    --dl-gap: 16px;
}

#panel-downloader .dl-page {
    gap: 16px;
    min-height: calc(100dvh - var(--topbar-h, 56px));
    padding: 18px var(--page-x, 20px) 20px;
}

/* ---- Cabeçalho ---------------------------------------------------------- */

#panel-downloader .dl-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    min-height: 40px;
    padding: 0 0 2px;
    border-bottom: 0;
}

#panel-downloader .dl-head__copy {
    min-width: 0;
}

#panel-downloader .dl-head__title,
#panel-downloader .dl-head h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 650;
    letter-spacing: -0.035em;
    line-height: 1.15;
}

#panel-downloader .dl-head__lede {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
}

#panel-downloader .dl-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: var(--dl-control);
    padding: 0 11px 0 9px;
    border: 1px solid var(--macos-hairline, var(--line));
    border-radius: 999px;
    background: var(--surface);
    box-shadow: var(--macos-control-shadow);
    color: var(--secondary);
    font-size: 12px;
    font-weight: 550;
    letter-spacing: -0.01em;
}

#panel-downloader .dl-status__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--muted);
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 16%, transparent);
}

#panel-downloader .dl-status.is-ready,
#panel-downloader .dl-status.is-done {
    color: var(--ok);
    border-color: color-mix(in srgb, var(--ok) 28%, var(--line));
    background: color-mix(in srgb, var(--ok) 8%, var(--surface));
}
#panel-downloader .dl-status.is-ready .dl-status__dot,
#panel-downloader .dl-status.is-done .dl-status__dot { background: var(--ok); }

#panel-downloader .dl-status.is-running {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
    background: var(--accent-soft);
}
#panel-downloader .dl-status.is-running .dl-status__dot {
    background: var(--accent);
    animation: dl-pulse 1.4s ease-in-out infinite;
}

#panel-downloader .dl-status.is-error {
    color: var(--bad);
    border-color: color-mix(in srgb, var(--bad) 28%, var(--line));
    background: color-mix(in srgb, var(--bad) 8%, var(--surface));
}
#panel-downloader .dl-status.is-error .dl-status__dot { background: var(--bad); }

@keyframes dl-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
    #panel-downloader .dl-status.is-running .dl-status__dot { animation: none; }
}

/* ---- Workspace: uma janela, duas colunas -------------------------------- */

#panel-downloader .dl-shell {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--macos-hairline, var(--line));
    border-radius: var(--macos-window-radius, 12px);
    background: var(--surface);
    box-shadow: var(--macos-window-shadow);
}

#panel-downloader .dl-layout {
    grid-template-columns: minmax(0, 1fr) 280px;
}

#panel-downloader .dl-main {
    gap: 12px;
    padding: 16px 16px 12px;
}

/* Composer e aside NÃO são janelas — o shell já é a janela. */
#panel-downloader .dl-composer,
#panel-downloader .dl-aside,
#panel-downloader .dl-cookies {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

#panel-downloader .dl-composer {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

#panel-downloader .dl-composer__bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 10px;
    padding: 0 2px 12px;
}

#panel-downloader .dl-composer__lead {
    display: flex;
    flex-direction: column;
    grid-column: 1;
    grid-row: 1;
    gap: 1px;
    min-width: 0;
}

#panel-downloader .dl-composer__lead strong {
    font-size: 13px;
    font-weight: 620;
    letter-spacing: -0.015em;
}

#panel-downloader .dl-composer__hint {
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

#panel-downloader .dl-composer__actions {
    display: inline-flex;
    align-items: center;
    grid-column: 2;
    grid-row: 1;
    gap: 8px;
    margin: 0;
    flex-wrap: nowrap;
}

#panel-downloader .dl-count {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    box-shadow: none;
}
#panel-downloader .dl-count strong {
    color: var(--text);
    font-size: 13px;
    font-weight: 650;
}

#panel-downloader .dl-btn-ghost {
    height: var(--dl-control);
    min-height: var(--dl-control);
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: var(--macos-control-radius, 7px);
    background: var(--surface);
    box-shadow: var(--macos-control-shadow);
    color: var(--secondary);
    font-size: 12.5px;
    font-weight: 550;
    letter-spacing: -0.01em;
}
#panel-downloader .dl-btn-ghost:hover {
    background: var(--hover);
    color: var(--text);
}

/* Plataformas: ícone + nome curto, na barra, não numa faixa extra. */
#panel-downloader .dl-platforms {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    grid-column: 1 / -1;
    grid-row: 2;
    gap: 6px;
    padding: 0;
    min-width: 0;
}

#panel-downloader .dl-platform {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 8px 0 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--elevated);
    box-shadow: none;
    font-size: 11px;
    font-weight: 600;
    transform: none;
}
#panel-downloader .dl-platform:hover { transform: none; }
#panel-downloader .dl-platform svg { width: 13px; height: 13px; }
#panel-downloader .dl-platform span { line-height: 1; }

#panel-downloader .dl-platform--youtube {
    border-color: color-mix(in srgb, #ff0033 22%, var(--line));
    background: color-mix(in srgb, #ff0033 9%, var(--surface));
    color: #c40028;
}
#panel-downloader .dl-platform--tiktok {
    border-color: color-mix(in srgb, var(--text) 14%, var(--line));
    background: color-mix(in srgb, var(--text) 6%, var(--surface));
    color: var(--text);
}
#panel-downloader .dl-platform--instagram {
    border-color: color-mix(in srgb, #e1306c 22%, var(--line));
    background: color-mix(in srgb, #e1306c 9%, var(--surface));
    color: #c13584;
}
#panel-downloader .dl-platform--facebook {
    border-color: color-mix(in srgb, #1877f2 22%, var(--line));
    background: color-mix(in srgb, #1877f2 9%, var(--surface));
    color: #1877f2;
}

[data-theme="dark"] #panel-downloader .dl-platform--youtube { color: #ff6b81; }
[data-theme="dark"] #panel-downloader .dl-platform--instagram { color: #f777aa; }
[data-theme="dark"] #panel-downloader .dl-platform--facebook { color: #6aa8ff; }

/* Campo: inset, ocupa o restante da coluna. */
#panel-downloader .dl-editor {
    display: flex;
    flex: 1;
    min-height: 320px;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--elevated);
    box-shadow: inset 0 1px 1px color-mix(in srgb, #000 4%, transparent);
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
#panel-downloader .dl-editor:focus-within {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
    box-shadow: 0 0 0 3px var(--accent-soft);
}

#panel-downloader .dl-textarea {
    min-height: 320px;
    padding: 14px 16px;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.7;
    color: var(--text);
    resize: none;
}
#panel-downloader .dl-textarea::placeholder {
    color: color-mix(in srgb, var(--muted) 72%, transparent);
    line-height: 1.9;
}

#panel-downloader :is(input, select):not([type="checkbox"]):not([type="radio"]):focus,
#panel-downloader :is(input, select, textarea):focus {
    outline: 0;
}

/* ---- Progresso (card, não pílula) --------------------------------------- */

#panel-downloader .dl-progress {
    padding: 12px 14px;
    overflow: visible;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface));
}

#panel-downloader .dl-progress__top { align-items: flex-start; gap: 12px; }
#panel-downloader .dl-progress__status {
    font-size: 13px;
    font-weight: 620;
    letter-spacing: -0.01em;
}
#panel-downloader .dl-progress__url {
    color: var(--muted);
    font-family: var(--mono);
    font-size: 11.5px;
    opacity: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

#panel-downloader .dl-progress__bar-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 4.5ch;
    align-items: center;
    gap: 10px;
}

#panel-downloader .dl-progress__bar {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--soft) 70%, var(--surface));
}

#panel-downloader .dl-progress__fill,
#panel-downloader #dl-progress-fill {
    position: relative;
    background: var(--accent);
    transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
#panel-downloader #dl-progress-fill::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, #fff 40%, transparent), transparent);
    animation: dl-sheen 1.6s linear infinite;
    content: "";
}
@keyframes dl-sheen {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
    #panel-downloader #dl-progress-fill::after { animation: none; }
}

#panel-downloader .dl-progress__pct {
    min-width: 0;
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

#panel-downloader .dl-progress__cancel:hover {
    color: var(--bad);
    border-color: color-mix(in srgb, var(--bad) 35%, var(--line));
}

/* ---- Resultado ---------------------------------------------------------- */

#panel-downloader .dl-tally {
    gap: 12px;
    margin: 0;
    font-size: 12px;
}
#panel-downloader .dl-stat-ok { color: var(--ok); font-weight: 620; }
#panel-downloader .dl-stat-fail { color: var(--bad); font-weight: 620; }

/* ---- Log ---------------------------------------------------------------- */

#panel-downloader .dl-log-details {
    border: 1px solid var(--macos-hairline, var(--line));
    border-radius: 10px;
    background: color-mix(in srgb, var(--soft) 35%, var(--surface));
}
#panel-downloader .dl-log-details__summary {
    padding: 8px 12px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
#panel-downloader .dl-log-details__hint {
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 500;
}
#panel-downloader .dl-log {
    max-height: 200px;
    padding: 10px 12px 12px;
    border-top: 1px solid var(--macos-hairline, var(--line));
    border-radius: 0;
    background: color-mix(in srgb, var(--soft) 40%, var(--elevated));
    font-family: var(--mono);
    font-size: 11.5px;
    line-height: 1.6;
    scrollbar-width: thin;
}
#panel-downloader .dl-log .log-line-ok { color: var(--ok); }
#panel-downloader .dl-log .log-line-fail { color: var(--bad); }
#panel-downloader .dl-log .log-line-info { color: var(--accent); }
#panel-downloader .dl-log .log-line-dim { color: color-mix(in srgb, var(--muted) 80%, transparent); }

/* ---- Rail de cookies ---------------------------------------------------- */

#panel-downloader .dl-aside {
    border-left: 1px solid var(--macos-hairline, var(--line));
    background: color-mix(in srgb, var(--soft) 40%, var(--surface));
}

#panel-downloader .dl-cookies__summary {
    align-items: center;
    padding: 16px 16px 12px;
}

#panel-downloader .dl-log-details__summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

#panel-downloader .dl-cookies__intro strong {
    font-size: 13px;
    font-weight: 620;
    letter-spacing: -0.015em;
}
#panel-downloader .dl-cookies__intro span {
    color: var(--muted);
    font-size: 11.5px;
}

#panel-downloader .dl-badge {
    height: 22px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    line-height: 20px;
}

#panel-downloader .dl-cookie {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 6px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    box-shadow: none;
    transition: background 120ms ease;
}
#panel-downloader .dl-cookie:hover {
    border-color: transparent;
    background: var(--hover);
}
#panel-downloader .dl-cookie.is-ready {
    border-color: transparent;
    background: color-mix(in srgb, var(--ok) 8%, transparent);
}
#panel-downloader .dl-cookie.is-warn {
    border-color: transparent;
    background: color-mix(in srgb, var(--warn, #d97706) 8%, transparent);
}

#panel-downloader .dl-cookie__brand {
    width: 28px;
    height: 28px;
    border-radius: 8px;
}

#panel-downloader .dl-cookie__name {
    font-size: 12.5px;
    font-weight: 620;
}

#panel-downloader .dl-cookie__state {
    margin-top: 2px;
    padding: 0;
    border-radius: 0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
}
#panel-downloader .dl-cookie__state.is-ok { color: var(--ok); }
#panel-downloader .dl-cookie__state.is-warn { color: var(--warn, #d97706); }

#panel-downloader .dl-upload {
    min-height: var(--dl-control);
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: var(--macos-control-radius, 7px);
    background: var(--surface);
    box-shadow: var(--macos-control-shadow);
    color: var(--secondary);
    font-size: 11.5px;
    font-weight: 550;
}
#panel-downloader .dl-upload:hover,
#panel-downloader .dl-upload.is-drag {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
    background: var(--accent-soft);
}

#panel-downloader .dl-cookies__tip {
    margin-top: auto;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.45;
}

/* ---- Rodapé / CTA ------------------------------------------------------- */

#panel-downloader .dl-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    border-top: 1px solid var(--macos-hairline, var(--line));
    background: color-mix(in srgb, var(--soft) 28%, var(--surface));
}

#panel-downloader .dl-toggle {
    color: var(--secondary);
    font-size: 13px;
    font-weight: 500;
}
#panel-downloader .dl-toggle__copy {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    min-width: 0;
}
#panel-downloader .dl-toggle__label {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
#panel-downloader .dl-footer__hint {
    display: inline;
    color: var(--muted);
    font-size: 12px;
}
#panel-downloader .dl-switch {
    display: none;
}

#panel-downloader .dl-cta {
    gap: 8px;
    height: 36px;
    min-height: 36px;
    padding: 0 16px;
    border: 0;
    border-radius: 9px;
    background: var(--accent);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 28%, transparent);
    color: #fff;
    font-size: 13px;
    font-weight: 620;
    letter-spacing: -0.015em;
}
#panel-downloader .dl-cta:hover:not(:disabled) { opacity: 0.92; }
#panel-downloader .dl-cta:disabled { opacity: 0.5; }
[data-theme="dark"] #panel-downloader .dl-cta {
    background: var(--accent);
    color: #fff;
}

/* ---- Responsivo --------------------------------------------------------- */

@media (max-width: 960px) {
    #panel-downloader .dl-layout { grid-template-columns: 1fr; }
    #panel-downloader .dl-aside {
        border-left: 0;
        border-top: 1px solid var(--macos-hairline, var(--line));
    }
    #panel-downloader .dl-cookies__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    #panel-downloader {
        --dl-control: 36px;
        --dl-radius: 16px;
        --dl-inset: 16px;
        --dl-row: 52px;
        --dl-stack: 12px;
    }

    #panel-downloader .dl-page {
        gap: 0;
        min-height: 0;
        padding:
            12px
            var(--safe-right, max(var(--dl-inset), env(safe-area-inset-right, 0px)))
            16px
            var(--safe-left, max(var(--dl-inset), env(safe-area-inset-left, 0px)));
    }

    /* Topbar já diz Downloader */
    #panel-downloader .dl-head {
        display: none;
    }

    #panel-downloader .dl-shell {
        display: flex;
        flex: none;
        flex-direction: column;
        gap: var(--dl-stack);
        min-height: 0;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    #panel-downloader .dl-layout,
    #panel-downloader .dl-main {
        display: contents;
    }

    #panel-downloader .dl-composer { order: 1; }
    #panel-downloader .dl-footer { order: 2; }
    #panel-downloader .dl-live { order: 3; }
    #panel-downloader .dl-aside { order: 4; }
    #panel-downloader .dl-log-details { order: 5; }

    #panel-downloader .dl-composer {
        display: grid;
        flex: none;
        grid-template-areas:
            "actions"
            "editor"
            "platforms";
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        overflow: hidden;
        border-radius: var(--dl-radius);
        background: var(--elevated);
    }

    #panel-downloader .dl-composer__bar {
        display: contents;
    }

    #panel-downloader .dl-composer__lead {
        display: none;
    }

    #panel-downloader .dl-composer__actions {
        grid-area: actions;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        width: 100%;
        margin: 0;
        gap: 8px;
        padding: 10px var(--dl-inset) 8px;
        min-height: 52px;
        box-sizing: border-box;
    }

    #panel-downloader .dl-count {
        display: inline-flex;
        align-items: center;
        height: 36px;
        margin: 0;
        font-size: 13px;
        line-height: 1;
    }

    #panel-downloader .dl-count strong {
        font-size: 15px;
        line-height: 1;
    }

    #panel-downloader .dl-btn-ghost {
        height: 36px;
        min-height: 36px;
        padding: 0 14px;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
        box-shadow: none;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    #panel-downloader #dl-btn-paste {
        border: 0;
        background: var(--accent);
        color: #fff;
    }

    #panel-downloader #dl-btn-clear {
        border: 0;
        background: var(--soft);
        color: var(--text);
    }

    #panel-downloader .dl-platforms {
        grid-area: platforms;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: start;
        gap: 0;
        width: 100%;
        margin: 0;
        padding: 8px 4px 12px;
        border-top: 0.5px solid var(--line);
        box-sizing: border-box;
    }

    #panel-downloader .dl-platform {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        min-height: 52px;
        height: auto;
        gap: 6px;
        padding: 4px 2px 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: var(--muted);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0;
        line-height: 1.2;
        text-align: center;
    }

    #panel-downloader .dl-platform span {
        display: block;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 1.2;
        text-align: center;
    }

    #panel-downloader .dl-platform svg {
        display: block;
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        margin: 0 auto;
    }

    #panel-downloader .dl-platform--youtube,
    #panel-downloader .dl-platform--tiktok,
    #panel-downloader .dl-platform--instagram,
    #panel-downloader .dl-platform--facebook {
        border: 0;
        background: transparent;
    }

    #panel-downloader .dl-editor {
        grid-area: editor;
        flex: none;
        min-height: 180px;
        margin: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    #panel-downloader .dl-editor:focus-within {
        box-shadow: none;
    }

    #panel-downloader .dl-textarea {
        min-height: 180px;
        padding: 4px var(--dl-inset) 12px;
        font-family: var(--font-body, inherit);
        font-size: 16px;
        line-height: 1.45;
        resize: none;
        -webkit-appearance: none;
    }

    #panel-downloader .dl-live {
        display: flex;
        flex-direction: column;
        gap: var(--dl-stack);
    }

    #panel-downloader .dl-progress {
        border: 0;
        border-radius: var(--dl-radius);
        box-shadow: none;
        padding: 14px var(--dl-inset);
    }

    #panel-downloader .dl-progress__top {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    #panel-downloader .dl-progress__url {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        word-break: break-all;
    }

    #panel-downloader .dl-progress__cancel {
        align-self: stretch;
        height: 40px;
        min-height: 40px;
        border-radius: 999px;
    }

    #panel-downloader .dl-progress__bar-wrap {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 4.5ch;
        align-items: center;
        gap: 10px;
    }

    #panel-downloader .dl-tally {
        margin: 0;
    }

    #panel-downloader .dl-aside {
        display: flex;
        flex: none;
        border: 0;
        background: transparent;
        min-height: 0;
    }

    #panel-downloader .dl-cookies,
    #panel-downloader .dl-log-details {
        display: flex;
        flex: none;
        flex-direction: column;
        width: 100%;
        min-height: 0;
        overflow: hidden;
        border: 0;
        border-radius: var(--dl-radius);
        background: var(--elevated);
        box-shadow: none;
    }

    #panel-downloader .dl-cookies__summary,
    #panel-downloader .dl-log-details__summary {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        justify-content: stretch;
        gap: 12px;
        min-height: var(--dl-row);
        padding: 0 var(--dl-inset);
        line-height: 1;
        box-sizing: border-box;
    }

    #panel-downloader .dl-cookies__intro {
        gap: 0;
    }

    #panel-downloader .dl-cookies__intro span,
    #panel-downloader .dl-log-details__hint,
    #panel-downloader .dl-cookies__tip {
        display: none;
    }

    #panel-downloader .dl-cookies__intro strong,
    #panel-downloader .dl-log-details__title {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.2;
    }

    #panel-downloader .dl-log-details__title::before {
        display: none;
    }

    #panel-downloader .dl-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 22px;
        padding: 0 8px;
        line-height: 1;
    }

    #panel-downloader .dl-cookies__body {
        flex: none;
        gap: 0;
        padding: 0;
        min-height: 0;
    }

    #panel-downloader .dl-cookies__grid {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
    }

    #panel-downloader .dl-cookie {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        min-height: var(--dl-row);
        padding: 0 var(--dl-inset);
        border: 0;
        border-top: 0.5px solid var(--line);
        border-radius: 0;
        background: transparent;
        box-sizing: border-box;
    }

    #panel-downloader .dl-cookie.is-ready,
    #panel-downloader .dl-cookie.is-warn {
        background: transparent;
    }

    #panel-downloader .dl-cookie__brand {
        display: grid;
        place-items: center;
        width: 28px;
        height: 28px;
        border-radius: 8px;
        flex-shrink: 0;
    }

    #panel-downloader .dl-cookie__meta {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        min-width: 0;
        flex: 1;
    }

    #panel-downloader .dl-cookie__name {
        font-size: 15px;
        font-weight: 600;
        line-height: 1.2;
    }

    #panel-downloader .dl-cookie__state {
        margin: 0;
        font-size: 12px;
        line-height: 1.2;
    }

    #panel-downloader .dl-upload {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 32px;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        color: var(--accent);
        font-size: 15px;
        font-weight: 600;
        line-height: 1;
        touch-action: manipulation;
    }

    #panel-downloader .dl-log {
        max-height: 140px;
        margin: 0;
        padding: 12px var(--dl-inset) 14px;
        border-top: 0.5px solid var(--line);
        font-size: 12px;
        -webkit-overflow-scrolling: touch;
    }

    #panel-downloader .dl-footer {
        display: flex;
        flex: none;
        order: 2;
        align-items: center;
        justify-content: stretch;
        gap: 0;
        margin-top: 0;
        padding: 0 var(--dl-inset);
        border: 0;
        border-radius: var(--dl-radius);
        background: var(--elevated);
        box-shadow: none;
        min-height: var(--dl-row);
        box-sizing: border-box;
    }

    #panel-downloader .dl-footer__left {
        display: flex;
        align-items: center;
        width: 100%;
        flex: 1;
        min-width: 0;
        gap: 0;
    }

    #panel-downloader .dl-cta {
        display: none;
    }

    #panel-downloader .dl-toggle {
        position: relative;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: var(--dl-row);
        margin: 0 !important;
        gap: 12px;
        color: var(--text);
        white-space: normal;
    }

    #panel-downloader .dl-toggle__copy {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 2px;
        min-width: 0;
        flex: 1;
    }

    #panel-downloader .dl-toggle__label {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.2;
        color: var(--text);
        white-space: nowrap;
    }

    #panel-downloader .dl-footer__hint {
        display: block;
        font-size: 12px;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    #panel-downloader .dl-toggle input {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
    }

    #panel-downloader .dl-switch {
        display: block;
        position: relative;
        width: 51px;
        height: 31px;
        flex-shrink: 0;
        border-radius: 999px;
        background: color-mix(in srgb, var(--text) 22%, var(--surface));
        transition: background 180ms ease;
    }

    #panel-downloader .dl-switch::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        width: 27px;
        height: 27px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
        transition: transform 180ms ease;
    }

    #panel-downloader .dl-toggle:has(input:checked) .dl-switch {
        background: var(--accent);
    }

    #panel-downloader .dl-toggle:has(input:checked) .dl-switch::after {
        transform: translateX(20px);
    }
}

/* ===== pages/studio.css ===== */
/* Studio — same tokens as the rest of the panel */

#panel-studio {
    --st-accent: var(--accent);
    --st-accent-2: var(--accent-hover);
    --st-radius: 12px;
    --st-soft: var(--soft);
    --st-stroke: var(--line);
    --st-raised: var(--surface);
    --st-content: 100%;
    --st-chat: 920px;
    --st-gutter: clamp(20px, 3.2vw, 56px);
    --st-pad-x: 16px;
    --st-text-x: var(--st-pad-x);
    --st-rail: max(var(--st-gutter), calc((100% - var(--st-chat)) / 2));
    --st-control-h: 32px;
    --st-motion: 160ms ease;
    --st-spring: 200ms ease;
    width: 100%;
    height: calc(100dvh - var(--topbar-h, 56px));
    overflow: hidden;
}

#tab-studio:checked ~ .app-shell .app-main {
    padding: 0;
    overflow: hidden;
}

#panel-studio,
#panel-studio * {
    box-sizing: border-box;
    scrollbar-width: none;
}

#panel-studio *::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

#panel-studio *,
#panel-studio *::before,
#panel-studio *::after {
    box-sizing: border-box;
}

#panel-studio .st-page {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
}

#panel-studio .st-col {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
}

#panel-studio .st-head {
    position: relative;
    z-index: 4;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    width: 100%;
    min-height: 52px;
    /* Mesma calha do thread e do compositor: com --st-head-x o "Studio" ficava
       a 56px da janela enquanto a conversa começava a 340px. */
    padding: 8px var(--st-rail);
    border-bottom: 1px solid transparent;
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: blur(18px) saturate(1.15);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    transition: border-color var(--st-motion);
}

/* A linha só aparece quando há conteúdo passando por baixo do vidro. */
#panel-studio.is-scrolled .st-head {
    border-bottom-color: color-mix(in srgb, var(--line) 82%, transparent);
}

#panel-studio .st-head::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    transform: scaleX(0);
    transform-origin: center;
    opacity: 0;
    pointer-events: none;
}

#panel-studio.is-running .st-head::after {
    opacity: 1;
    animation: st-progress 1.4s var(--ease, ease) infinite;
}

#panel-studio .st-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

#panel-studio .st-brand > div { min-width: 0; }

#panel-studio .st-feather {
    display: block;
    flex: none;
    max-width: none;
}

#panel-studio .st-brand__mark {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 9px;
    background: linear-gradient(
        158deg,
        color-mix(in srgb, var(--accent) 88%, #fff),
        color-mix(in srgb, var(--accent) 66%, #1d4ed8)
    );
    color: #fff;
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--accent) 34%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 26%, transparent);
}

#panel-studio .st-brand__mark .st-feather {
    animation: none;
}

#panel-studio .st-brand__eyebrow,
#panel-studio .st-head__lede {
    display: none;
}

#panel-studio .st-head__title {
    margin: 0;
    color: var(--text);
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -0.024em;
    line-height: 1.2;
}

#panel-studio .st-head__actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: 10px;
}

#panel-studio .st-clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    margin-left: 0;
    padding: 0 11px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    box-shadow: none;
    transition:
        color var(--st-motion),
        background var(--st-motion);
}

#panel-studio .st-clear:active {
    transform: none;
}

#panel-studio .st-clear:hover {
    color: var(--bad, #e5484d);
    border-color: transparent;
    background: color-mix(in srgb, var(--bad, #e5484d) 9%, transparent);
    transform: none;
}

#panel-studio .st-clear svg { max-width: none; }

#panel-studio .st-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 12px 0 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
    color: var(--secondary);
    font-size: 13px;
    font-weight: 550;
    letter-spacing: -0.01em;
    white-space: nowrap;
    box-shadow: var(--shadow);
    transition:
        color var(--st-motion),
        border-color var(--st-motion),
        background var(--st-motion);
}

#panel-studio .st-status__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--muted);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--muted) 16%, transparent);
}

#panel-studio .st-status.is-ready {
    color: var(--ok);
}
#panel-studio .st-status.is-ready .st-status__dot {
    background: var(--ok);
    box-shadow: 0 0 0 3px var(--ok-bg);
}

#panel-studio .st-status.is-running {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}
#panel-studio .st-status.is-running .st-status__dot {
    background: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    animation: st-pulse 1.2s ease-in-out infinite;
}

#panel-studio .st-status.is-error {
    color: var(--bad);
}
#panel-studio .st-status.is-error .st-status__dot {
    background: var(--bad);
    box-shadow: 0 0 0 3px var(--bad-bg);
}

@keyframes st-pulse {
    50% { opacity: 0.35; transform: scale(0.85); }
}

@keyframes st-progress {
    0% { transform: scaleX(0.12); opacity: 0.35; }
    50% { transform: scaleX(0.72); opacity: 1; }
    100% { transform: scaleX(0.12); opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    #panel-studio .st-status.is-running .st-status__dot { animation: none; }
}

#panel-studio .st-shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    flex: 1;
    min-width: 0;
    min-height: 0;
}

/* O thread rola sob o header; sem esse fade o texto aparecia cortado na
   borda de cima. */
#panel-studio .st-shell::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 7;
    height: 20px;
    pointer-events: none;
    background: linear-gradient(to bottom, var(--bg), transparent);
}

#panel-studio .st-shell::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 7;
    height: clamp(72px, 14vh, 120px);
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        color-mix(in srgb, var(--bg) 55%, transparent) 52%,
        var(--bg) 100%
    );
}

#panel-studio .st-thread {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    margin: 0;
    padding: 20px var(--st-rail) var(--st-dock-h, 280px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

#panel-studio .st-thread:has(.st-empty) {
    justify-content: center;
    padding-top: 0;
}

#panel-studio .st-thread::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

#panel-studio .st-gallery {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    padding: 20px var(--st-rail) var(--st-dock-h, 280px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

#panel-studio .st-gallery:has(.st-gallery__empty) {
    justify-content: center;
    padding-top: 0;
}

#panel-studio .st-gallery[hidden] {
    display: none !important;
}

#panel-studio .st-gallery__empty,
#panel-studio .st-gallery__grid {
    width: 100%;
    max-width: none;
    margin: 0;
}

#panel-studio .st-turn {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    animation: st-fade-in 180ms ease both;
}

#panel-studio .st-turn--user,
#panel-studio .st-turn--bot {
    animation-name: st-fade-in;
}

#panel-studio .st-turn--user {
    align-items: flex-end;
}

#panel-studio .st-thread > .st-turn--user:first-child {
    padding-top: 0;
}

#panel-studio .st-turn--bot {
    align-items: stretch;
}

/* Pergunta + resposta formam um par; o espaço maior separa um par do próximo,
   em vez de todos os turnos flutuarem à mesma distância. */
#panel-studio .st-turn--bot + .st-turn--user {
    margin-top: 16px;
}

#panel-studio .st-avatar { display: none; }

#panel-studio .st-prompt {
    width: fit-content;
    max-width: min(78%, 34rem);
    min-width: 0;
    padding: 11px 15px;
    border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
    border-radius: 20px 20px 7px 20px;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--accent) 10%, var(--surface)),
        color-mix(in srgb, var(--accent) 5%, var(--surface))
    );
    color: var(--text);
    box-shadow: 0 1px 2px color-mix(in srgb, #000 7%, transparent);
    overflow-wrap: anywhere;
}

#panel-studio .st-bubble {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text);
    overflow-wrap: anywhere;
}

#panel-studio .st-prompt__text,
#panel-studio .st-bubble__text {
    margin: 0;
    padding: 0;
    color: var(--text);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.45;
    white-space: pre-wrap;
}

#panel-studio .st-bubble__text {
    padding-inline: var(--st-text-x);
    font-weight: 430;
    line-height: 1.6;
}

/* Linha longa demais cansa: 74ch é o limite de leitura, mesmo com a coluna
   do chat mais larga por causa das imagens. */
#panel-studio .st-bubble__text,
#panel-studio .st-result__text {
    max-width: calc(74ch + var(--st-text-x) * 2);
    text-wrap: pretty;
}

#panel-studio .st-bubble__head,
#panel-studio .st-result__head,
#panel-studio .st-typing .st-result__head {
    display: none;
}

#panel-studio .st-sources,
#panel-studio .st-bubble__refs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    padding-inline: 0;
}

#panel-studio .st-prompt .st-sources {
    justify-content: flex-end;
    align-items: flex-end;
    margin-top: 8px;
}

#panel-studio .st-prompt--refs {
    max-width: none;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

#panel-studio .st-prompt--refs .st-sources {
    margin-top: 0;
}

#panel-studio .st-source,
#panel-studio .st-bubble__ref,
#panel-studio .st-bubble__chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 220px;
    height: 28px;
    padding: 0 10px 0 4px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--secondary);
    font-size: 12px;
    font-weight: 550;
    line-height: 1;
    white-space: nowrap;
}

#panel-studio .st-prompt .st-source {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    height: auto;
    max-width: 88px;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    font-size: 11px;
    font-weight: 550;
    line-height: 1.2;
}

#panel-studio .st-source img,
#panel-studio .st-source video,
#panel-studio .st-bubble__ref img,
#panel-studio .st-bubble__ref video {
    display: block;
    flex: none;
    width: 20px;
    height: 20px;
    object-fit: cover;
    border-radius: 999px;
    background: var(--soft);
}

#panel-studio .st-prompt .st-source img,
#panel-studio .st-prompt .st-source video,
#panel-studio .st-prompt .st-source__ph {
    width: 72px;
    height: 72px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--soft);
    object-fit: cover;
    box-shadow: 0 1px 3px color-mix(in srgb, #000 10%, transparent);
}

#panel-studio .st-prompt .st-source__ph {
    display: grid;
    place-items: center;
    color: var(--muted);
}

#panel-studio .st-prompt .st-source__ph svg {
    display: block;
}

#panel-studio .st-source span,
#panel-studio .st-bubble__chip {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

#panel-studio .st-prompt .st-source span {
    max-width: 80px;
    text-align: center;
}

#panel-studio .st-result {
    width: 100%;
    min-width: 0;
}

#panel-studio .st-result__text,
#panel-studio .st-result__error {
    margin: 0;
    padding-inline: var(--st-text-x);
    color: var(--text);
    font-size: 15px;
    font-weight: 430;
    letter-spacing: -0.011em;
    line-height: 1.6;
    white-space: pre-wrap;
}

#panel-studio .st-result__error {
    color: var(--bad);
}

#panel-studio .st-result__text + .st-thumbs,
#panel-studio .st-result__text + .st-result__actions,
#panel-studio .st-result__error + .st-result__actions {
    margin-top: 14px;
}

#panel-studio .st-thumbs + .st-result__actions {
    margin-top: 10px;
}

#panel-studio .st-result__actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding-inline: calc(var(--st-text-x) - 8px);
    opacity: 0.5;
    transition: opacity var(--st-motion);
}

/* Discretas por padrão, nítidas quando a mão está no turno — ficam sempre
   clicáveis, só não competem com o resultado. */
#panel-studio .st-turn:hover .st-result__actions,
#panel-studio .st-turn:focus-within .st-result__actions,
#panel-studio .st-thread > .st-turn:last-child .st-result__actions {
    opacity: 1;
}

@media (hover: none) {
    #panel-studio .st-result__actions { opacity: 1; }
}

#panel-studio .st-result__act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: color var(--st-motion), background var(--st-motion);
}

#panel-studio .st-result__act svg {
    width: 15px;
    height: 15px;
    max-width: none;
}

#panel-studio .st-result__act:hover {
    background: var(--soft);
    color: var(--text);
}

#panel-studio .st-result__act:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

#panel-studio .st-result__act.is-on {
    color: var(--accent);
}

#panel-studio .st-gallery__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    max-width: 420px;
    min-height: 0;
    margin: 0 auto;
    padding: 8px 16px 28px;
    color: var(--muted);
    text-align: center;
    animation: st-empty-in 420ms ease both;
}

#panel-studio .st-gallery__empty-art {
    position: relative;
    width: 176px;
    height: 118px;
    margin: 0 0 22px;
}

#panel-studio .st-gallery__empty-art::before {
    content: "";
    position: absolute;
    inset: 18% 6%;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--accent) 28%, transparent),
        transparent 68%
    );
    filter: blur(22px);
    pointer-events: none;
}

#panel-studio .st-gallery__empty-tile {
    position: absolute;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
    border-radius: 16px;
    background: linear-gradient(
        160deg,
        color-mix(in srgb, var(--accent) 10%, var(--surface)),
        var(--surface) 72%
    );
    box-shadow:
        var(--shadow),
        0 10px 28px color-mix(in srgb, #000 22%, transparent);
    color: var(--accent);
}

#panel-studio .st-gallery__empty-tile svg {
    opacity: 0.9;
}

#panel-studio .st-gallery__empty-tile--a {
    top: 18px;
    left: 0;
    width: 78px;
    height: 92px;
    transform: rotate(-12deg);
    opacity: 0.72;
}

#panel-studio .st-gallery__empty-tile--b {
    top: 0;
    left: 50%;
    z-index: 2;
    width: 96px;
    height: 96px;
    margin-left: -48px;
    border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
    background: linear-gradient(
        160deg,
        color-mix(in srgb, var(--accent) 18%, var(--surface)),
        var(--surface) 68%
    );
    box-shadow:
        var(--shadow),
        0 0 0 6px color-mix(in srgb, var(--accent) 7%, transparent),
        0 14px 32px color-mix(in srgb, #000 28%, transparent);
    animation: st-empty-float 4.2s ease-in-out infinite;
}

#panel-studio .st-gallery__empty-tile--c {
    top: 18px;
    right: 0;
    width: 78px;
    height: 92px;
    transform: rotate(12deg);
    opacity: 0.72;
}

#panel-studio .st-gallery__empty-title {
    color: var(--text);
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 650;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

#panel-studio .st-gallery__empty-sub {
    max-width: 34ch;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.5;
}

#panel-studio .st-gallery__empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    margin-top: 18px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: -0.01em;
    cursor: pointer;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 28%, transparent);
    transition:
        background var(--st-motion),
        box-shadow var(--st-motion),
        transform var(--st-spring);
}

#panel-studio .st-gallery__empty-cta svg {
    color: #fff;
    opacity: 1;
}

#panel-studio .st-gallery__empty-cta:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 36%, transparent);
}

#panel-studio .st-gallery__empty-cta:active {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    #panel-studio .st-gallery__empty-tile--b { animation: none; }
    #panel-studio .st-gallery__empty-cta:hover { transform: none; }
}

#panel-studio .st-gallery__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 10px;
    width: 100%;
    max-width: none;
}

#panel-studio .st-gallery__item {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    cursor: zoom-in;
    transition: border-color var(--st-motion), box-shadow var(--st-motion);
}

#panel-studio .st-gallery__item:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow);
}

#panel-studio .st-gallery__item img,
#panel-studio .st-gallery__item video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: transparent;
    opacity: 0;
    transition: opacity 280ms ease;
}

#panel-studio .st-gallery__item.is-ready img,
#panel-studio .st-gallery__item.is-ready video {
    opacity: 1;
}

#panel-studio .st-gallery__item.is-loading::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            110deg,
            var(--soft) 20%,
            color-mix(in srgb, var(--accent) 10%, var(--surface)) 48%,
            var(--soft) 72%
        );
    background-size: 220% 100%;
    animation: st-media-shimmer 1.15s ease-in-out infinite;
    pointer-events: none;
}

#panel-studio .st-gallery__item.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border: 2px solid color-mix(in srgb, var(--text) 12%, transparent);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: st-spin 0.7s linear infinite;
    pointer-events: none;
}

#panel-studio .st-gallery__item.is-loading .st-gallery__time {
    opacity: 0;
}

#panel-studio .st-gallery__item--video::after {
    content: "";
    position: absolute;
    inset: auto 8px 8px auto;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid #fff;
    filter: drop-shadow(0 1px 2px color-mix(in srgb, #000 40%, transparent));
    pointer-events: none;
}

#panel-studio .st-gallery__time {
    position: absolute;
    left: 8px;
    bottom: 8px;
    padding: 2px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, #000 62%, transparent);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    pointer-events: none;
}

#panel-studio .st-gallery__item--pending {
    display: grid;
    place-items: center;
    overflow: hidden;
    cursor: default;
    content-visibility: visible;
    border-color: var(--line);
    background: var(--soft);
    box-shadow: none;
    animation: st-gallery-pending-in 280ms ease both;
    animation-delay: calc(var(--st-pending-i, 0) * 60ms);
}

#panel-studio .st-gallery__item--pending:hover {
    border-color: var(--line);
    box-shadow: none;
}

#panel-studio .st-gallery__item--pending::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 36%,
        color-mix(in srgb, var(--text) 5.5%, transparent) 50%,
        transparent 64%
    );
    background-size: 220% 100%;
    animation: st-media-shimmer 1.6s ease-in-out infinite;
    pointer-events: none;
}

#panel-studio .st-gallery__pending-core {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#panel-studio .st-gallery__spin {
    width: 22px;
    height: 22px;
    border: 2px solid color-mix(in srgb, var(--text) 12%, transparent);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: st-spin 0.7s linear infinite;
}

#panel-studio .st-gallery__pending-label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
}

#panel-studio .st-gallery__pending-label::after {
    display: inline-block;
    overflow: hidden;
    width: 1.1em;
    content: "...";
    vertical-align: bottom;
    animation: st-gallery-ellipsis 1.2s steps(4, end) infinite;
}

@keyframes st-spin {
    to { transform: rotate(360deg); }
}

@keyframes st-media-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

@keyframes st-gallery-ellipsis {
    0% { width: 0; }
    100% { width: 1.1em; }
}

@keyframes st-gallery-pending-in {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

#panel-studio .st-view-switch {
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 34px;
    padding: 3px;
    border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--text) 4.5%, var(--soft));
    box-shadow: inset 0 1px 1px color-mix(in srgb, #000 4%, transparent);
}

#panel-studio .st-view-switch__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
    cursor: pointer;
    transition: color var(--st-motion), background var(--st-motion), box-shadow var(--st-motion);
}

#panel-studio .st-view-switch__btn svg {
    flex: none;
    width: 14px;
    height: 14px;
}

#panel-studio .st-view-switch__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text) 10%, transparent);
    color: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
}

#panel-studio .st-view-switch__count[hidden] {
    display: none;
}

#panel-studio .st-view-switch__btn:hover {
    color: var(--text);
}

#panel-studio .st-view-switch__btn.is-on {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 38%, transparent);
}

#panel-studio .st-view-switch__btn.is-on .st-view-switch__count {
    background: color-mix(in srgb, #fff 22%, transparent);
}

#panel-studio.is-gallery .st-thread {
    display: none !important;
}

#panel-studio .st-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 8px 16px 28px;
    color: var(--text);
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 650;
    letter-spacing: -0.03em;
    line-height: 1.2;
    text-align: center;
    animation: st-empty-in 420ms ease both;
}

#panel-studio .st-empty__mark {
    position: relative;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
    border-radius: 18px;
    background: linear-gradient(
        160deg,
        color-mix(in srgb, var(--accent) 18%, var(--surface)),
        var(--surface) 68%
    );
    color: var(--accent);
    box-shadow:
        var(--shadow),
        0 0 0 6px color-mix(in srgb, var(--accent) 7%, transparent),
        0 14px 32px color-mix(in srgb, #000 28%, transparent);
    animation: st-empty-float 4.2s ease-in-out infinite;
}

#panel-studio .st-empty__mark::before {
    content: "";
    position: absolute;
    inset: -18px;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--accent) 28%, transparent),
        transparent 68%
    );
    filter: blur(16px);
    pointer-events: none;
}

#panel-studio .st-empty__title {
    display: block;
    color: var(--text);
}

#panel-studio .st-empty__sub {
    max-width: 34ch;
    margin-top: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
    #panel-studio .st-empty__mark { animation: none; }
}

/* Falha vira cartão: o texto vermelho solto se perdia no meio do thread. */
#panel-studio .st-result--error {
    width: fit-content;
    max-width: 100%;
    padding: 12px 15px;
    border: 1px solid color-mix(in srgb, var(--bad, #e5484d) 26%, transparent);
    border-left-width: 3px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--bad, #e5484d) 7%, var(--surface));
}

#panel-studio .st-result--error .st-result__text,
#panel-studio .st-result--error .st-result__actions {
    padding-inline: 0;
}

#panel-studio .st-result--error .st-result__error {
    margin: 0;
    padding: 6px 0 0;
    color: var(--secondary);
    font-size: 13.5px;
    line-height: 1.5;
}

#panel-studio .st-result--error .st-result__text:first-child {
    color: var(--bad, #e5484d);
    font-weight: 550;
}

#panel-studio .st-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-inline: var(--st-text-x);
    box-sizing: border-box;
}

#panel-studio .st-thumbs a.st-source {
    display: inline-flex;
    width: auto;
    height: 28px;
    max-width: 220px;
    max-height: none;
    padding: 0 10px;
    overflow: hidden;
    border-radius: 999px;
    box-shadow: none;
    cursor: pointer;
    line-height: 1;
    font-size: 12px;
    font-weight: 550;
    color: var(--secondary);
    text-decoration: none;
}

#panel-studio .st-thumbs a,
#panel-studio .st-thumbs .st-thumb {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: none;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    line-height: 0;
    box-shadow: var(--shadow);
    cursor: zoom-in;
    transition: border-color var(--st-motion), box-shadow var(--st-motion);
}

/* Vários arquivos: grade quadrada como a Galeria — alturas iguais, sem os
   degraus que aspect ratios diferentes criavam no flex. O clique abre o
   original, então recortar a miniatura não esconde nada. */
#panel-studio .st-thumbs:not(.st-thumbs--solo) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}

#panel-studio .st-thumbs:not(.st-thumbs--solo) a,
#panel-studio .st-thumbs:not(.st-thumbs--solo) .st-thumb {
    width: 100%;
    aspect-ratio: 1;
}

#panel-studio .st-thumbs:not(.st-thumbs--solo) img,
#panel-studio .st-thumbs:not(.st-thumbs--solo) video {
    height: 100%;
    max-height: none;
    object-fit: cover;
}

#panel-studio .st-thumbs a.st-source {
    justify-self: start;
    align-self: start;
    aspect-ratio: auto;
}

/* Um arquivo só: o cartão abraça a imagem em vez de esticar até a largura da
   coluna e deixar duas faixas vazias em volta de um retrato. */
#panel-studio .st-thumbs--solo a,
#panel-studio .st-thumbs--solo .st-thumb {
    width: auto;
    max-width: 100%;
}

#panel-studio .st-thumbs--solo img,
#panel-studio .st-thumbs--solo video {
    width: auto;
    max-width: 100%;
}

#panel-studio .st-thumbs--solo .st-thumb.is-loading {
    width: min(380px, 100%);
    min-height: 280px;
}

#panel-studio .st-thumbs img,
#panel-studio .st-thumbs video {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: min(56dvh, 640px);
    margin: 0;
    object-fit: contain;
    object-position: center;
    background: transparent;
    opacity: 0;
    transition: opacity 280ms ease, transform 320ms var(--motion-ease, ease);
}

#panel-studio .st-thumbs .is-ready img,
#panel-studio .st-thumbs .is-ready video {
    opacity: 1;
}

#panel-studio .st-thumbs .st-thumb.is-loading {
    min-height: 168px;
}

#panel-studio .st-thumbs .st-thumb.is-loading::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            110deg,
            var(--soft) 20%,
            color-mix(in srgb, var(--accent) 10%, var(--surface)) 48%,
            var(--soft) 72%
        );
    background-size: 220% 100%;
    animation: st-media-shimmer 1.15s ease-in-out infinite;
    pointer-events: none;
}

#panel-studio .st-thumbs .st-thumb.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border: 2px solid color-mix(in srgb, var(--text) 12%, transparent);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: st-spin 0.7s linear infinite;
    pointer-events: none;
}

#panel-studio .st-thumbs--solo img,
#panel-studio .st-thumbs--solo video {
    max-height: min(56dvh, 640px);
}

#panel-studio .st-thumbs a,
#panel-studio .st-thumbs .st-thumb {
    transition:
        border-color var(--st-motion),
        box-shadow var(--st-motion),
        transform var(--st-spring);
}

#panel-studio .st-thumbs a:hover,
#panel-studio .st-thumbs .st-thumb:hover {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--line-strong));
    box-shadow:
        var(--shadow-lg, var(--shadow)),
        0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
    transform: translateY(-2px);
}

#panel-studio .st-thumbs .st-thumb:hover.is-ready img,
#panel-studio .st-thumbs .st-thumb:hover.is-ready video {
    transform: scale(1.015);
}

#panel-studio .st-thumbs .st-thumb:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    #panel-studio .st-thumbs a:hover,
    #panel-studio .st-thumbs .st-thumb:hover {
        transform: none;
    }

    #panel-studio .st-thumbs .st-thumb:hover.is-ready img,
    #panel-studio .st-thumbs .st-thumb:hover.is-ready video {
        transform: none;
    }
}

#panel-studio .st-lightbox {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 18px;
}

#panel-studio .st-lightbox[hidden] { display: none; }

#panel-studio .st-lightbox__scrim {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: color-mix(in srgb, var(--bg, #0c0c0e) 72%, transparent);
    backdrop-filter: blur(8px);
    cursor: zoom-out;
}

#panel-studio .st-lightbox__frame {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(920px, 100%);
    max-height: 100%;
    min-width: 0;
}

#panel-studio .st-lightbox__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

#panel-studio .st-lightbox__name {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 12px;
    font-weight: 550;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#panel-studio .st-lightbox__actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

#panel-studio .st-lightbox__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 12px;
    font-weight: 550;
    text-decoration: none;
    cursor: pointer;
}

#panel-studio .st-lightbox__btn svg { max-width: none; }

#panel-studio .st-lightbox__btn:hover {
    border-color: var(--line-strong);
    background: var(--st-soft);
}

#panel-studio .st-lightbox__stage {
    display: grid;
    place-items: center;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, #000 55%, var(--surface));
    box-shadow: var(--shadow-card);
}

#panel-studio .st-lightbox__stage img,
#panel-studio .st-lightbox__stage video {
    display: block;
    max-width: 100%;
    max-height: min(78dvh, 820px);
    object-fit: contain;
}

#panel-studio .st-lightbox__stage .st-thumb-gone {
    min-height: 180px;
    border: 0;
    background: transparent;
}

#panel-studio .st-thumb-gone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 112px;
    border: 1px dashed var(--line);
    border-radius: var(--r, 8px);
    background: var(--soft);
    color: var(--muted);
    font-size: 11px;
}

#panel-studio .st-thumb-gone svg {
    max-width: none;
    opacity: 0.55;
}

#panel-studio .st-gallery__item > .st-thumb-gone {
    position: absolute;
    inset: 0;
    min-height: 0;
    border: 0;
    border-radius: 0;
}

#panel-studio .st-result.st-typing {
    width: min(100%, 340px);
    padding: 12px 14px 11px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}

#panel-studio .st-gen__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    color: var(--text);
    font-size: 13px;
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

#panel-studio .st-gen__label {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#panel-studio .st-gen__pct {
    flex: none;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

#panel-studio .st-gen__track {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text) 14%, transparent);
}

#panel-studio .st-gen__fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--accent);
    transition: width 220ms ease;
}

#panel-studio .st-gallery__item--pending .st-gallery__pending-core {
    position: absolute;
    z-index: 1;
    right: 10px;
    bottom: 10px;
    left: 10px;
    display: block;
    width: auto;
    padding: 10px 12px 9px;
    border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(10px);
}

#panel-studio .st-gallery__item--pending .st-gen__head {
    margin-bottom: 7px;
    font-size: 12.5px;
}

@media (prefers-reduced-motion: reduce) {
    #panel-studio .st-gen__fill { transition: none; }
}

#panel-studio .st-dock {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 8;
    display: flex;
    justify-content: center;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 14px var(--st-rail) 16px;
    overflow: visible;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        color-mix(in srgb, var(--bg) 72%, transparent) 18%,
        var(--bg) 42%,
        var(--bg) 100%
    );
    box-shadow: none;
}

#panel-studio .st-dock__inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
}

#panel-studio .st-toolrail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: var(--st-control-h);
    margin: 0 0 10px;
    /* +1px por causa da borda do compositor: assim os chips começam na mesma
       linha vertical dos pills que ficam logo abaixo. */
    padding-inline: calc(var(--st-pad-x) + 1px);
    overflow: visible;
    background: transparent;
}

#panel-studio .st-toolrail:has(#st-chips-prev:not([hidden])) {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

/* O fade só existe do lado onde ainda há chip escondido — antes ele vivia
   ligado à direita e apagava a borda do último chip mesmo no fim da rolagem.
   As classes vêm do syncChipNav(). */
#panel-studio .st-chips-scroller {
    --st-fade-l: 0px;
    --st-fade-r: 0px;
    min-width: 0;
    overflow: hidden;
    background: transparent;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 var(--st-fade-l),
        #000 calc(100% - var(--st-fade-r)),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 var(--st-fade-l),
        #000 calc(100% - var(--st-fade-r)),
        transparent 100%
    );
    transition: -webkit-mask-image var(--st-motion), mask-image var(--st-motion);
}

#panel-studio .st-toolrail.is-overflow-start .st-chips-scroller {
    --st-fade-l: 26px;
}

#panel-studio .st-toolrail.is-overflow-end .st-chips-scroller {
    --st-fade-r: 26px;
}

#panel-studio .st-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    scroll-behavior: smooth;
    width: 100%;
    min-width: 0;
    height: var(--st-control-h);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
    background: transparent;
    scroll-padding-inline: 8px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

#panel-studio .st-chips::-webkit-scrollbar { display: none; }

#panel-studio .st-rail-nav {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--st-control-h);
    height: var(--st-control-h);
    min-width: var(--st-control-h);
    min-height: var(--st-control-h);
    padding: 0;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--st-soft);
    color: var(--muted);
    line-height: 0;
    cursor: pointer;
    box-shadow: none;
    transition:
        color var(--st-motion),
        background var(--st-motion),
        border-color var(--st-motion);
}

#panel-studio .st-rail-nav svg {
    display: block;
    flex: none;
    width: 14px;
    height: 14px;
    max-width: none;
    margin: 0;
}

#panel-studio .st-rail-nav:hover {
    border-color: color-mix(in srgb, var(--accent) 26%, transparent);
    background: var(--accent-soft);
    color: var(--accent);
}

#panel-studio .st-rail-nav:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

#panel-studio .st-rail-nav[hidden] { display: none; }

/* Mesma linguagem dos pills do compositor: sem contorno, fundo soft. Nove
   chips com borda de 1px enchiam a régua de linhas. */
#panel-studio .st-chip {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    scroll-snap-align: start;
    box-sizing: border-box;
    height: var(--st-control-h);
    min-height: var(--st-control-h);
    max-height: var(--st-control-h);
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--st-soft);
    color: var(--secondary);
    font-size: 12px;
    font-weight: 550;
    letter-spacing: -0.01em;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition:
        color var(--st-motion),
        border-color var(--st-motion),
        background var(--st-motion),
        box-shadow var(--st-motion);
}

#panel-studio .st-chip svg {
    flex: none;
    width: 14px;
    height: 14px;
    max-width: none;
    opacity: 0.7;
}

#panel-studio .st-chip:hover {
    background: color-mix(in srgb, var(--st-soft) 70%, var(--text) 6%);
    color: var(--text);
}

#panel-studio .st-chip:hover svg {
    opacity: 0.9;
}

#panel-studio .st-chip:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

#panel-studio .st-chip.is-on {
    border-color: color-mix(in srgb, var(--accent) 34%, transparent);
    background: var(--accent-soft);
    color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent);
}

#panel-studio .st-chip.is-on svg {
    opacity: 1;
}

#panel-studio.has-thread .st-head {
    min-height: 52px;
}

#panel-studio .st-composer {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    /* 4px da toolbar + 8px aqui = 12px abaixo dos pills, igual aos 12px acima
       do segmento Imagem/Vídeo. */
    padding-bottom: 8px;
    container-type: inline-size;
    container-name: st-dock;
    border: 1px solid color-mix(in srgb, var(--st-stroke) 88%, transparent);
    border-radius: 26px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--text) 3.2%, transparent), transparent 22px),
        var(--surface);
    box-shadow:
        var(--shadow),
        0 18px 40px color-mix(in srgb, #000 7%, transparent);
    transition:
        border-color 180ms var(--motion-ease, ease),
        box-shadow 180ms var(--motion-ease, ease);
}

#panel-studio.is-running .st-composer {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--st-stroke));
    box-shadow:
        var(--shadow),
        0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
}

#panel-studio .st-composer:focus-within {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
    box-shadow:
        var(--shadow),
        0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}

#panel-studio.is-drop .st-composer {
    border-color: color-mix(in srgb, var(--st-accent) 45%, var(--st-stroke));
}

#panel-studio .st-drop {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    padding: 24px;
    background: color-mix(in srgb, var(--bg, #0c0c0e) 52%, transparent);
    backdrop-filter: blur(6px);
    pointer-events: none;
}

#panel-studio .st-drop[hidden] { display: none; }

#panel-studio .st-drop__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    max-width: 360px;
    padding: 22px 26px;
    border: 1px dashed color-mix(in srgb, var(--st-accent) 55%, var(--st-stroke));
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    color: var(--text);
    text-align: center;
    box-shadow: var(--shadow-card);
}

#panel-studio .st-drop__card svg {
    max-width: none;
    margin-bottom: 4px;
    color: var(--st-accent);
}

#panel-studio .st-drop__card strong {
    font-size: 14px;
    font-weight: 650;
}

#panel-studio .st-drop__card span {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4;
}

#panel-studio .st-aio,
#panel-studio .st-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* 8px embaixo + 8px do topo da toolbar = a hairline fica no meio do vão. */
    padding: 12px var(--st-pad-x) 8px;
}

#panel-studio .st-aio[hidden],
#panel-studio .st-fields[hidden],
#panel-studio .st-swap__body[hidden],
#panel-studio .st-toolbar.is-generic #st-toolbar-aio,
#panel-studio .st-toolbar:not(.is-generic) #st-toolbar-generic,
#panel-studio #st-toolbar-generic[hidden],
#panel-studio #st-face-swap-btn[hidden],
#panel-studio #st-batch-btn[hidden] { display: none !important; }

#panel-studio .st-seg {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    margin: 0;
    padding: 3px;
    border-radius: 11px;
    background: var(--st-soft);
    isolation: isolate;
}

#panel-studio .st-seg::before {
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 2.5px);
    border-radius: 9px;
    background: color-mix(in srgb, var(--st-accent) 12%, transparent);
    transform: translateX(0);
    transition: transform var(--st-motion);
    z-index: 0;
    pointer-events: none;
}

#panel-studio .st-seg:has([data-st-mode="video"].is-on)::before {
    transform: translateX(calc(100% + 4px));
}

#panel-studio .st-seg__btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: color var(--st-motion);
}

#panel-studio .st-seg__btn:active {
    opacity: 0.85;
}

#panel-studio .st-seg__btn:hover {
    color: var(--text);
}

#panel-studio .st-seg__btn svg { flex: none; }

#panel-studio .st-seg__btn.is-on {
    background: transparent;
    color: var(--st-accent);
}

#panel-studio label {
    margin-bottom: 0;
}

#panel-studio .st-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12px;
    color: var(--muted);
}

#panel-studio .st-motion {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

#panel-studio .st-motion[hidden] { display: none; }

#panel-studio .st-motion__slot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 112px;
    padding: 12px 10px;
    overflow: hidden;
    border: 1px dashed color-mix(in srgb, var(--st-stroke) 88%, var(--muted));
    border-radius: 16px;
    background: color-mix(in srgb, var(--st-soft) 72%, transparent);
    color: var(--muted);
    text-align: center;
    cursor: pointer;
    transition:
        border-color var(--st-motion),
        background var(--st-motion),
        min-height var(--st-motion);
}

#panel-studio .st-motion__slot:hover,
#panel-studio .st-motion__slot.is-over {
    border-color: color-mix(in srgb, var(--st-accent) 50%, var(--st-stroke));
    background: color-mix(in srgb, var(--st-accent) 8%, transparent);
}

#panel-studio .st-motion__slot:hover .st-slot__ico,
#panel-studio .st-generic__files .st-slot:hover .st-slot__ico {
    color: var(--st-accent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-accent) 32%, var(--st-stroke));
}

#panel-studio .st-motion__slot:not(.has-file),
#panel-studio .st-generic__files .st-slot:not(.has-file) {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    justify-items: start;
    min-height: 64px;
    padding: 10px 14px;
    column-gap: 12px;
    row-gap: 1px;
    text-align: left;
}

#panel-studio .st-slot__ico {
    display: grid;
    place-items: center;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--st-stroke);
    color: var(--secondary);
}

#panel-studio .st-motion__slot:not(.has-file) > svg {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: center;
    width: 16px;
    height: 16px;
}

#panel-studio .st-slot__ico svg,
#panel-studio .st-motion__slot .st-slot__ico svg,
#panel-studio .st-generic__files .st-slot .st-slot__ico svg {
    display: block;
    width: 16px;
    height: 16px;
    max-width: none;
    color: currentColor;
}

#panel-studio .st-motion__slot:not(.has-file) strong,
#panel-studio .st-generic__files .st-slot:not(.has-file) strong {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
}

#panel-studio .st-motion__slot:not(.has-file) > span:not(.st-slot__ico),
#panel-studio .st-generic__files .st-slot:not(.has-file) > .st-slot__helper {
    grid-column: 2;
    grid-row: 2;
}

#panel-studio .st-motion__slot.has-file > .st-slot__ico,
#panel-studio .st-generic__files .st-slot.has-file > .st-slot__ico {
    display: none;
}

#panel-studio .st-motion__slot strong {
    color: var(--text);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;
}

#panel-studio .st-motion__slot > span {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.3;
}

#panel-studio .st-motion__slot.has-file {
    padding: 0;
    border-style: solid;
    border-color: color-mix(in srgb, var(--st-accent) 45%, var(--st-stroke));
}

#panel-studio .st-motion__preview {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--st-soft);
}

/* A imagem aparece inteira; o fundo é ela mesma desfocada, então a faixa
   larga e baixa do cartão não recorta mais o assunto. */
#panel-studio .st-motion__preview img,
#panel-studio .st-motion__preview video {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#panel-studio .st-motion__preview .st-motion__blur {
    position: absolute;
    inset: 0;
    z-index: 0;
    object-fit: cover;
    filter: blur(18px) brightness(0.62) saturate(1.15);
    transform: scale(1.25);
    pointer-events: none;
}

#panel-studio .st-motion__cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 22px 10px 8px;
    background: linear-gradient(to top, color-mix(in srgb, #000 78%, transparent), transparent);
    color: #fff;
    font-size: 11.5px;
    font-weight: 650;
    letter-spacing: -0.01em;
    line-height: 1.3;
    text-align: left;
    text-shadow: 0 1px 2px color-mix(in srgb, #000 55%, transparent);
}

/* `.st-motion__slot > span` e `.st-slot strong` são mais específicos que a
   classe da legenda e puxavam o texto para a cor de apoio, em cima da foto. */
#panel-studio .st-motion__slot > .st-motion__cap,
#panel-studio .st-slot > .st-motion__cap {
    color: #fff;
    font-size: 11.5px;
    font-weight: 650;
}

#panel-studio .st-motion__cap > .st-motion__cap-name {
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font: inherit;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#panel-studio .st-motion__cap > .st-motion__cap-meta {
    flex: none;
    margin-left: auto;
    color: color-mix(in srgb, #fff 72%, transparent);
    font-size: 10.5px;
    font-weight: 550;
    font-variant-numeric: tabular-nums;
}

#panel-studio .st-motion__slot .st-ref__x,
#panel-studio .st-generic__files .st-slot .st-ref__x {
    top: 7px;
    right: 7px;
    z-index: 3;
    width: 22px;
    height: 22px;
    border-color: color-mix(in srgb, #fff 22%, transparent);
    background: color-mix(in srgb, #000 52%, transparent);
    backdrop-filter: blur(6px);
    opacity: 1;
}


#panel-studio .st-refs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
}

#panel-studio .st-refs[hidden] {
    display: none !important;
}

#panel-studio .st-batch {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 var(--st-pad-x) 10px;
}

#panel-studio .st-aio[hidden] ~ .st-batch {
    padding-top: 12px;
}

#panel-studio .st-batch[hidden] {
    display: none !important;
}

#panel-studio .st-batch__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 20px;
}

#panel-studio .st-batch__bar strong {
    font-size: 12px;
    font-weight: 650;
    letter-spacing: -0.01em;
}

#panel-studio .st-batch__count {
    margin-right: auto;
    color: var(--muted);
    font-size: 12px;
}

#panel-studio .st-batch__act {
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

#panel-studio .st-batch__act:hover {
    color: var(--text);
}

#panel-studio .st-batch__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#panel-studio .st-batch__item,
#panel-studio .st-batch__add {
    position: relative;
    width: 56px;
    height: 56px;
    border: 1px solid var(--st-stroke);
    border-radius: 12px;
    background: var(--st-soft);
    overflow: hidden;
}

#panel-studio .st-batch__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#panel-studio .st-batch__n {
    position: absolute;
    left: 4px;
    bottom: 4px;
    display: grid;
    place-items: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: color-mix(in srgb, #000 62%, transparent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

#panel-studio .st-batch__add {
    display: grid;
    place-items: center;
    border-style: dashed;
    color: var(--muted);
    cursor: pointer;
}

#panel-studio .st-batch__add:hover {
    border-color: color-mix(in srgb, var(--st-accent) 45%, var(--st-stroke));
    color: var(--st-accent);
}

#panel-studio #st-batch-btn {
    height: var(--st-control-h);
    min-height: var(--st-control-h);
    max-height: var(--st-control-h);
}

#panel-studio .st-ref {
    position: relative;
    width: 56px;
    height: 56px;
    border: 1px solid var(--st-stroke);
    border-radius: 12px;
    background: var(--st-soft);
    overflow: hidden;
    transition: border-color var(--st-motion);
}

#panel-studio .st-ref:hover {
    border-color: color-mix(in srgb, var(--st-accent) 45%, var(--st-stroke));
}

#panel-studio .st-ref img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#panel-studio .st-ref--video {
    display: grid;
    place-items: center;
    color: var(--muted);
}

#panel-studio .st-ref__x {
    position: absolute;
    top: 3px;
    right: 3px;
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    padding: 0;
    border: 1px solid color-mix(in srgb, #000 35%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, #000 62%, transparent);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition:
        opacity var(--st-motion),
        background var(--st-motion);
}

#panel-studio .st-ref:hover .st-ref__x,
#panel-studio .st-batch__item:hover .st-ref__x,
#panel-studio .st-ref__x:focus-visible { opacity: 1; }

#panel-studio .st-ref__x:hover { background: color-mix(in srgb, var(--danger, #e5484d) 80%, #000); }

#panel-studio .st-attach.has-files > summary {
    border-color: color-mix(in srgb, var(--st-accent) 45%, var(--st-stroke));
    color: var(--st-accent);
}

@keyframes st-ref-in {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

#panel-studio .st-field--prompt,
#panel-studio .st-fields .st-field--prompt {
    display: block;
    gap: 0;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
}

#panel-studio .st-field--prompt textarea {
    display: block;
    width: 100%;
    min-height: 64px;
    max-height: 200px;
    padding: 2px 0 6px;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 15px;
    letter-spacing: -0.011em;
    line-height: 1.55;
    resize: none;
    outline: none;
    box-shadow: none;
    transition:
        color var(--st-motion),
        min-height var(--st-motion);
}

#panel-studio .st-field--prompt textarea:hover,
#panel-studio .st-field--prompt textarea:focus,
#panel-studio .st-field--prompt textarea:focus-visible {
    border: 0;
    outline: none;
    background: transparent;
    box-shadow: none;
}

#panel-studio .st-field--prompt textarea::placeholder {
    color: color-mix(in srgb, var(--muted) 80%, transparent);
}

#panel-studio .st-toolbar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: calc(var(--st-control-h) + 12px);
    max-height: none;
    /* Simétrico: com 18px à direita o Gerar terminava 2px mais para dentro que
       o pill do modelo começava, e a hairline (que usa --st-pad-x) não batia
       com a borda direita da barra. */
    padding: 8px var(--st-pad-x) 4px;
    border-top: 0;
}

#panel-studio .st-toolbar::before {
    content: "";
    position: absolute;
    left: var(--st-pad-x);
    right: var(--st-pad-x);
    top: 0;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        color-mix(in srgb, var(--st-stroke) 90%, transparent) 10%,
        color-mix(in srgb, var(--st-stroke) 90%, transparent) 90%,
        transparent
    );
    pointer-events: none;
}

#panel-studio .st-toolbar__tools,
#panel-studio .st-toolbar__left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    gap: 6px;
    min-width: 0;
    width: auto;
    height: var(--st-control-h);
    max-height: var(--st-control-h);
    overflow: visible;
}

/* Sem isso o `display: flex` vence o [hidden] e a barra escondida ainda
   ocupa uma coluna do grid da toolbar no celular. */
#panel-studio .st-toolbar__tools[hidden] {
    display: none;
}

/* Encolhe os rótulos antes de deixar qualquer controle sair da linha. */
#panel-studio .st-toolbar__tools > *,
#panel-studio .st-toolbar__left > * {
    flex: 0 1 auto;
    min-width: 0;
    width: auto;
    height: var(--st-control-h);
    margin: 0;
    align-self: center;
}

#panel-studio .st-toolbar__tools[hidden],
#panel-studio .st-toolbar__left[hidden] {
    display: none !important;
}

#panel-studio .st-toolbar__tools::-webkit-scrollbar,
#panel-studio .st-toolbar__left::-webkit-scrollbar { display: none; }

#panel-studio .st-toolbar svg,
#panel-studio .st-chip svg,
#panel-studio .st-seg svg,
#panel-studio .st-cta svg {
    display: block;
    flex: none;
    max-width: none;
}

#panel-studio .st-pill,
#panel-studio .st-dd > summary,
#panel-studio .st-menu > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    height: var(--st-control-h);
    min-height: var(--st-control-h);
    max-height: var(--st-control-h);
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--st-soft);
    color: var(--secondary);
    font-size: 12px;
    font-weight: 550;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    list-style: none;
    overflow: hidden;
    transition:
        color var(--st-motion),
        border-color var(--st-motion),
        background var(--st-motion),
        box-shadow var(--st-motion);
}

#panel-studio .st-pill:hover,
#panel-studio .st-dd > summary:hover,
#panel-studio .st-menu > summary:hover {
    background: color-mix(in srgb, var(--st-soft) 70%, var(--text) 6%);
    color: var(--text);
}

#panel-studio .st-pill:active,
#panel-studio .st-dd > summary:active,
#panel-studio .st-menu > summary:active {
    opacity: 0.9;
}

#panel-studio .st-pill svg,
#panel-studio .st-dd > summary svg,
#panel-studio .st-menu > summary svg {
    display: block;
    flex: none;
    width: 14px;
    height: 14px;
    max-width: none;
    color: currentColor;
}

#panel-studio .st-flag {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 13px;
    overflow: hidden;
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 14%, transparent);
    background: var(--surface);
}

#panel-studio .st-flag svg,
#panel-studio .st-pill .st-flag svg,
#panel-studio .st-dd > summary .st-flag svg,
#panel-studio .st-dd__item .st-flag svg {
    display: block;
    width: 18px !important;
    height: 13px !important;
    color: inherit;
}

#panel-studio .st-chevron {
    width: 12px !important;
    height: 12px !important;
    opacity: 0.55;
    transition: transform var(--st-motion), opacity var(--st-motion);
}

#panel-studio .st-dd[open] > summary .st-chevron,
#panel-studio .st-menu[open] > summary .st-chevron {
    transform: rotate(180deg);
    opacity: 0.85;
}

#panel-studio .st-pill select {
    width: auto;
    min-width: 88px;
    max-width: 128px;
    padding: 0 2px 0 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 12px;
    outline: none;
    appearance: none;
    cursor: pointer;
}

#panel-studio details[open] > summary,
#panel-studio .st-pill.is-on {
    border-color: color-mix(in srgb, var(--accent) 28%, transparent);
    background: var(--accent-soft);
    color: var(--accent);
    box-shadow: none;
}

#panel-studio .st-toolbar__hint,
#panel-studio .st-node-active {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#panel-studio .st-node-active,
#panel-studio .st-toolbar__hint {
    display: none;
}

#panel-studio .st-slot.is-missing {
    border-color: var(--bad);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 18%, transparent);
    animation: st-slot-miss 0.55s ease 2;
}

@keyframes st-slot-miss {
    50% { transform: scale(0.985); }
}

#panel-studio .st-toolbar__hint:not([hidden]) {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--muted);
}

#panel-studio .st-toolbar__hint.is-error {
    color: var(--bad);
}

#panel-studio .st-toolbar__hint.is-ready {
    color: var(--muted);
}

#panel-studio .st-pill__k {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
}

#panel-studio .st-pill--toggle {
    position: relative;
    gap: 0;
}

#panel-studio .st-pill--toggle > .st-pill__text {
    max-width: none;
    line-height: 1;
}

#panel-studio .st-pill--toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

#panel-studio .st-pill--check {
    display: none;
}

#panel-studio .st-pill--toggle:has(input:checked) {
    border-color: color-mix(in srgb, var(--st-accent) 28%, transparent);
    background: color-mix(in srgb, var(--st-accent) 12%, transparent);
    color: var(--st-accent);
}

#panel-studio .st-pill--num {
    gap: 6px;
    padding-right: 8px;
}

#panel-studio .st-pill--num input {
    width: 52px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 12px;
    outline: none;
}

#panel-studio .st-cta {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    align-self: center;
    gap: 7px;
    box-sizing: border-box;
    height: var(--st-control-h);
    min-height: var(--st-control-h);
    max-height: var(--st-control-h);
    margin: 0;
    padding: 0 14px 0 16px;
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: -0.01em;
    line-height: 1;
    overflow: hidden;
    cursor: pointer;
    z-index: 1;
    flex-shrink: 0;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 45%, transparent);
    transition:
        background var(--st-motion),
        opacity var(--st-motion),
        transform var(--st-motion),
        box-shadow var(--st-motion);
}

#panel-studio .st-cta svg {
    width: 13px;
    height: 13px;
    max-width: none;
}

#panel-studio .st-cta:hover {
    background: var(--accent-hover);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 28%, transparent);
}

#panel-studio .st-cta:active {
    transform: translateY(0.5px);
}

#panel-studio .st-cta:disabled,
#panel-studio .st-cta.is-loading {
    opacity: 0.55;
    cursor: not-allowed;
}

/* A barra é uma linha só: os rótulos dos botões de ação viram ícone antes
   de qualquer controle ser empurrado para fora. */
@container st-dock (max-width: 1040px) {
    #panel-studio #st-face-swap-btn,
    #panel-studio #st-batch-btn,
    #panel-studio .st-toolbar .st-menu > summary {
        gap: 0;
        padding: 0 9px;
        font-size: 0;
    }

    #panel-studio #st-face-swap-btn svg,
    #panel-studio #st-batch-btn svg,
    #panel-studio .st-toolbar .st-menu > summary svg {
        width: 14px;
        height: 14px;
    }
}

@container st-dock (max-width: 760px) {
    #panel-studio .st-toolbar .st-pill__text {
        max-width: 86px;
    }
}

#panel-studio .st-field--docked { display: none; }

#panel-studio .st-dd,
#panel-studio .st-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: none;
    height: var(--st-control-h);
    min-height: var(--st-control-h);
    max-height: var(--st-control-h);
}

#panel-studio .st-dd > summary,
#panel-studio .st-menu > summary {
    align-self: center;
}

#panel-studio .st-toolbar__tools > .st-dd,
#panel-studio .st-toolbar__left > .st-dd {
    flex: 0 1 auto;
    min-width: 0;
}

#panel-studio .st-dd > input,
#panel-studio .st-dd__menu > input {
    display: none !important;
}

#panel-studio .st-dd > summary::-webkit-details-marker,
#panel-studio .st-menu > summary::-webkit-details-marker,
#panel-studio .st-dd > summary::marker,
#panel-studio .st-menu > summary::marker {
    display: none;
    content: "";
}

#panel-studio .st-pill__text {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 132px;
    overflow: hidden;
    line-height: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    align-self: center;
}

#panel-studio .st-pill__k,
#panel-studio .st-dd__ico--pill,
#panel-studio .st-ar-ico,
#panel-studio .st-size-ico,
#panel-studio .st-chevron {
    align-self: center;
}

#panel-studio details[open] > summary .st-chevron {
    transform: rotate(180deg);
    opacity: 0.85;
}

#panel-studio .st-dd__ico {
    display: grid;
    place-items: center;
    flex: none;
    align-self: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--soft);
    color: var(--text);
}

#panel-studio .st-dd__ico svg {
    width: 15px;
    height: 15px;
}

#panel-studio .st-dd__ico--pill {
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    background: transparent;
}

#panel-studio .st-dd__ico--pill svg {
    width: 14px;
    height: 14px;
}

#panel-studio .st-ar-ico,
#panel-studio .st-size-ico {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    color: currentColor;
}

#panel-studio .st-ar-ico svg,
#panel-studio .st-size-ico svg {
    display: block;
    width: 14px;
    height: 14px;
}

#panel-studio .st-dd[open],
#panel-studio .st-menu[open] {
    z-index: 80;
}

#panel-studio .st-float-root {
    position: absolute;
    inset: 0;
    z-index: 80;
    overflow: visible;
    pointer-events: none;
}

#panel-studio .st-float-root > .st-dd__menu,
#panel-studio .st-float-root > .st-popover {
    display: block;
    position: absolute;
    pointer-events: auto;
}

#panel-studio .st-dd__menu {
    display: none;
    position: fixed;
    z-index: 4000;
    min-width: 168px;
    max-width: min(360px, calc(100vw - 20px));
    max-height: min(52vh, 420px);
    padding: 6px;
    overflow: auto;
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    scrollbar-width: thin;
    overscroll-behavior: contain;
}

#panel-studio .st-dd[open] > .st-dd__menu,
#panel-studio .st-menu[open] > .st-popover {
    display: block;
    animation: st-fade-in 120ms ease both;
    transform-origin: bottom left;
}

#panel-studio .st-dd__menu--wide { min-width: 320px; }

/* Folha inferior do celular (posição vem do pinMenu). */
#panel-studio .is-sheet {
    border-radius: 22px;
    border-color: var(--line);
    box-shadow:
        0 -10px 44px color-mix(in srgb, #000 30%, transparent),
        var(--shadow-lg);
    animation: st-sheet-in 200ms var(--motion-ease, ease) both;
}

#panel-studio .is-sheet::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    margin: 2px auto 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text) 16%, transparent);
}

#panel-studio .st-dd__menu.is-sheet {
    padding: 8px 10px 12px;
}

#panel-studio .st-dd__menu.is-sheet .st-dd__item {
    min-height: 50px;
    padding: 10px 12px;
    border-radius: 14px;
}

#panel-studio .st-dd__menu.is-sheet .st-dd__item--row {
    min-height: 44px;
}

#panel-studio .st-popover.is-sheet {
    padding: 8px 14px 16px;
}

@keyframes st-sheet-in {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}
#panel-studio .st-dd__menu--tight { min-width: 108px; }

#panel-studio .st-dd__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition:
        color var(--st-motion),
        background var(--st-motion);
}

#panel-studio .st-dd__item.is-on { background: color-mix(in srgb, var(--text) 6%, transparent); }

#panel-studio .st-dd__item--row {
    gap: 8px;
    min-height: 36px;
    padding: 6px 10px;
}

#panel-studio .st-dd__item--row .st-ar-ico,
#panel-studio .st-dd__item--row .st-size-ico { margin-right: 2px; }

#panel-studio .st-dd__item:hover {
    background: var(--st-soft);
}

#panel-studio .st-dd__copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    gap: 1px;
}

#panel-studio .st-dd__copy strong {
    font-size: 13px;
    font-weight: 650;
    line-height: 1.25;
}

#panel-studio .st-dd__copy em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    line-height: 1.3;
}

#panel-studio .st-dd__tags {
    display: flex;
    flex: none;
    align-items: center;
    align-self: center;
    gap: 4px;
    margin-left: auto;
}

#panel-studio .st-dd__tags i {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--st-soft);
    color: var(--secondary);
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
}

#panel-studio .st-dd__item > svg:last-child {
    display: block;
    flex: none;
    align-self: center;
    width: 14px;
    height: 14px;
    margin-left: auto;
    color: var(--text);
}

#panel-studio .st-dd__tags + svg:last-child {
    margin-left: 8px;
}

/* O check existe só na opção ativa. Sem reservar a coluna dele, os selos
   (Ref, Lote) das outras linhas terminavam 22px mais à direita e a lista
   ficava com a margem direita serrilhada. */
#panel-studio .st-dd__item:not(:has(> svg:last-child)) {
    padding-right: 32px;
}

#panel-studio #st-face-swap-btn {
    height: var(--st-control-h);
    min-height: var(--st-control-h);
    max-height: var(--st-control-h);
}

#panel-studio .st-stepper {
    display: inline-flex;
    flex: none;
    align-items: center;
    height: var(--st-control-h);
    min-height: var(--st-control-h);
    max-height: var(--st-control-h);
    padding: 0 6px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--st-soft);
    color: var(--secondary);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    overflow: hidden;
    transition:
        color var(--st-motion),
        border-color var(--st-motion),
        background var(--st-motion);
}

#panel-studio .st-stepper__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition:
        color var(--st-motion),
        background var(--st-motion);
}

#panel-studio .st-stepper__btn:hover {
    background: var(--st-soft);
}

#panel-studio .st-stepper span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 100%;
    line-height: 1;
    text-align: center;
}

#panel-studio .st-dd__menu,
#panel-studio .st-popover {
    box-sizing: border-box;
}

#panel-studio .st-popover {
    display: none;
    position: fixed;
    z-index: 4000;
    width: min(560px, calc(100vw - 24px));
    max-width: calc(100vw - 20px);
    max-height: min(70vh, 640px);
    padding: 12px;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent;
}

#panel-studio .st-popover::-webkit-scrollbar {
    display: block;
    width: 5px;
}

#panel-studio .st-popover::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted) 40%, transparent);
}

#panel-studio .st-popover__head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
}

#panel-studio .st-popover__head strong { font-size: 13px; font-weight: 650; color: var(--text); }
#panel-studio .st-popover__head span { color: var(--muted); font-size: 11px; line-height: 1.35; }

#panel-studio .st-settings {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#panel-studio .st-settings__section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

#panel-studio .st-settings__title {
    margin: 0;
    color: var(--muted);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#panel-studio .st-popover--settings .st-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    margin: 0;
}

#panel-studio .st-popover--settings .st-field span {
    display: block;
    color: var(--secondary);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}

#panel-studio .st-popover--settings .st-field--negative {
    margin: 0;
}

#panel-studio .st-popover--settings .st-field--negative textarea {
    min-height: 44px;
    max-height: 72px;
    padding: 6px 8px;
    font-size: 12px;
    line-height: 1.4;
    resize: none;
}

#panel-studio .st-popover--settings .st-settings__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
    align-items: start;
}

#panel-studio .st-popover--settings .st-settings__grid .st-field--wide {
    grid-column: 1 / -1;
}

#panel-studio .st-popover--settings .st-settings__grid .st-field--docked {
    display: none;
}

#panel-studio .st-popover--settings .st-settings__grid .st-field input:not([type="checkbox"]),
#panel-studio .st-popover--settings .st-settings__grid .st-field select,
#panel-studio .st-popover--settings .st-field--negative textarea,
#panel-studio .st-popover--settings .st-settings__grid .st-field--wide textarea {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid var(--st-stroke);
    border-radius: 8px;
    background: var(--st-soft);
    color: var(--text);
    font: inherit;
}

#panel-studio .st-popover--settings .st-settings__grid .st-field input:not([type="checkbox"]),
#panel-studio .st-popover--settings .st-settings__grid .st-field select {
    height: 32px;
    min-height: 32px;
    padding: 0 8px;
    font-size: 12px;
    line-height: 1;
}

#panel-studio .st-popover--settings .st-settings__grid .st-field--wide textarea {
    min-height: 48px;
    max-height: 72px;
    padding: 6px 8px;
    font-size: 12px;
    line-height: 1.4;
    resize: vertical;
}

#panel-studio .st-popover--settings .st-settings__toggles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

#panel-studio .st-popover--settings .st-settings__toggles .st-field--bool {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 32px;
    height: 32px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid var(--st-stroke);
    border-radius: 8px;
    background: var(--st-soft);
    cursor: pointer;
}

#panel-studio .st-popover--settings .st-settings__toggles .st-field--bool span {
    order: 0;
    flex: 1;
    min-width: 0;
    font-size: 11px;
    font-weight: 550;
    line-height: 1.2;
}

#panel-studio .st-popover--settings .st-settings__toggles .st-field--bool input[type="checkbox"] {
    flex: none;
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--st-accent);
}

#panel-studio .st-popover--settings .st-swap__body .st-field--bool {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--st-stroke);
    border-radius: 8px;
    background: var(--st-soft);
    cursor: pointer;
}

#panel-studio .st-popover--settings .st-swap__body .st-field--bool span {
    order: 0;
    flex: 1;
    font-size: 11px;
    font-weight: 550;
    line-height: 1.2;
    white-space: normal;
}

#panel-studio .st-popover--settings .st-swap__body .st-field--bool input[type="checkbox"] {
    flex: none;
    width: 15px;
    height: 15px;
    margin: 0;
}

#panel-studio .st-popover--settings .st-swap__body .st-field:not(.st-field--bool) {
    gap: 4px;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

#panel-studio .st-popover--settings .st-swap__body .st-field:not(.st-field--bool) select,
#panel-studio .st-popover--settings .st-swap__body .st-field:not(.st-field--bool) input:not([type="checkbox"]) {
    height: 32px;
    min-height: 32px;
    padding: 0 8px;
    font-size: 12px;
}

#panel-studio .st-popover--settings .st-swap__body .st-field--wide textarea {
    min-height: 48px;
    max-height: 72px;
    padding: 6px 8px;
    font-size: 12px;
    line-height: 1.4;
    resize: vertical;
}

#panel-studio .st-popover--settings .st-aio__block {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    gap: 8px;
}

#panel-studio .st-popover--settings .st-presets {
    gap: 6px;
}

#panel-studio .st-popover--settings .st-preset {
    padding: 8px;
    gap: 5px;
    border-radius: 10px;
}

#panel-studio .st-popover--settings .st-preset__n {
    font-size: 11px;
}

#panel-studio .st-popover--settings .st-preset button {
    height: 26px;
    font-size: 11px;
}

#panel-studio .st-aio__block strong {
    font-size: 13px;
    font-weight: 650;
    color: var(--text);
    letter-spacing: -0.01em;
}

#panel-studio .st-slots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

#panel-studio .st-aio__grid,
#panel-studio .st-fields-grid,
#panel-studio .st-generic__extras {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

#panel-studio .st-aio__grid > *,
#panel-studio .st-fields-grid > *,
#panel-studio .st-generic__extras > * {
    min-width: 0;
}

#panel-studio .st-slot {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 78px;
    padding: 10px;
    overflow: hidden;
    border: 1px dashed var(--st-stroke);
    border-radius: 12px;
    background: var(--st-soft);
    font-size: 12px;
    cursor: pointer;
    transition:
        border-color var(--st-motion),
        background var(--st-motion);
}

#panel-studio .st-slot:hover {
    border-color: color-mix(in srgb, var(--st-accent) 45%, var(--st-stroke));
    background: color-mix(in srgb, var(--st-accent) 6%, transparent);
}

#panel-studio .st-slot strong {
    display: block;
    margin-bottom: 3px;
    color: var(--text);
    font-size: 11px;
}

#panel-studio .st-generic__files .st-slot strong {
    margin: 0;
    color: var(--text);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;
}

#panel-studio .st-slot__helper {
    overflow: hidden;
    color: var(--muted);
    font-size: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#panel-studio .st-slot.has-file {
    border-style: solid;
    border-color: color-mix(in srgb, var(--st-accent) 45%, var(--st-stroke));
}

#panel-studio .st-slot.has-file .st-slot__helper { color: var(--st-accent); }

#panel-studio .st-popover--files .st-slot input[type="file"],
#panel-studio .st-fields .st-slot input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

#panel-studio .st-fields {
    overflow: visible;
}

#panel-studio .st-generic__files {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    padding: 0;
}

#panel-studio .st-generic__files:has(> :only-child) {
    grid-template-columns: 1fr;
}

#panel-studio .st-generic__files .st-slot {
    flex: none;
    max-width: none;
    min-height: 112px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 12px 10px;
    overflow: hidden;
    border-radius: 16px;
    color: var(--muted);
    text-align: center;
}

#panel-studio .st-generic__files .st-slot:hover {
    border-color: color-mix(in srgb, var(--st-accent) 50%, var(--st-stroke));
    background: color-mix(in srgb, var(--st-accent) 8%, transparent);
}

#panel-studio .st-generic__files .st-slot > svg {
    display: block;
    width: 20px;
    height: 20px;
    max-width: none;
    color: var(--muted);
}

#panel-studio .st-generic__files .st-slot.has-file {
    padding: 0;
    background: var(--soft);
}

/* Com arquivo o cartão vira preview, então precisa de altura para a imagem
   caber inteira — 112px deixavam um selo, não um preview. */
#panel-studio .st-motion__slot.has-file,
#panel-studio .st-generic__files .st-slot.has-file {
    min-height: 132px;
}

#panel-studio .st-generic__files:has(> :only-child) .st-slot.has-file {
    min-height: 176px;
}

#panel-studio .st-generic__files .st-slot.has-file > svg,
#panel-studio .st-generic__files .st-slot.has-file > .st-slot__ico,
#panel-studio .st-generic__files .st-slot.has-file > strong,
#panel-studio .st-generic__files .st-slot.has-file > .st-slot__helper {
    visibility: hidden;
}

#panel-studio .st-generic__files .st-slot .st-motion__preview {
    z-index: 1;
}

#panel-studio .st-generic__files .st-slot .st-motion__cap,
#panel-studio .st-generic__files .st-slot .st-ref__x {
    z-index: 2;
}

#panel-studio .st-generic__lede {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

#panel-studio .st-generic__lead {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#panel-studio .st-generic__files + .st-generic__lead {
    margin-top: 8px;
    padding-top: 2px;
}

#panel-studio .st-fields .st-generic__lead .st-field--prompt.st-field--url {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

#panel-studio .st-fields .st-generic__lead .st-field--url .st-url-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 16px;
    height: 16px;
    min-width: 16px;
    overflow: visible;
    line-height: 0;
    color: #e1306c;
}

#panel-studio .st-fields .st-generic__lead .st-field--url .st-url-ico svg {
    display: block;
    width: 16px;
    height: 16px;
}

#panel-studio .st-fields .st-generic__lead .st-field--url input[type="text"] {
    display: block;
    flex: 1;
    width: auto;
    min-width: 0;
    min-height: 0;
    height: 22px;
    padding: 0;
    line-height: 22px;
    font-size: 14px;
}

#panel-studio .st-generic__lead .st-field--prompt {
    border: 0;
    box-shadow: none;
}

#panel-studio .st-generic__lead .st-field--prompt input[type="text"],
#panel-studio .st-generic__lead .st-field--prompt input[type="url"] {
    display: block;
    width: 100%;
    min-height: 40px;
    padding: 0 0 4px;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 14px;
    line-height: 1.5;
    outline: none;
    box-shadow: none;
}

#panel-studio .st-generic__lead .st-field--prompt input:hover,
#panel-studio .st-generic__lead .st-field--prompt input:focus,
#panel-studio .st-generic__lead .st-field--prompt input:focus-visible {
    border: 0;
    outline: none;
    background: transparent;
    box-shadow: none;
}

#panel-studio .st-aio__grid .st-field--wide,
#panel-studio .st-generic__extras .st-field:has(textarea),
#panel-studio .st-generic__extras .st-field--wide {
    grid-column: 1 / -1;
}

#panel-studio .st-fields .st-field:not(.st-field--prompt) input:not([type="checkbox"]),
#panel-studio .st-fields .st-field:not(.st-field--prompt) select,
#panel-studio .st-fields .st-field:not(.st-field--prompt) textarea,
#panel-studio .st-popover .st-field input:not([type="checkbox"]),
#panel-studio .st-popover .st-field select,
#panel-studio .st-popover .st-field textarea {
    width: 100%;
    min-width: 0;
    padding: 7px 9px;
    border: 1px solid var(--st-stroke);
    border-radius: 8px;
    background: var(--st-soft);
    color: var(--text);
    font: inherit;
}

#panel-studio .st-field span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#panel-studio .st-field--wide span,
#panel-studio .st-field--negative span {
    white-space: normal;
}

#panel-studio .st-field--bool {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid var(--st-stroke);
    border-radius: 10px;
    background: var(--st-soft);
}

#panel-studio .st-field--bool input[type="checkbox"] {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--st-accent);
}

#panel-studio .st-field--negative { margin-bottom: 12px; }
#panel-studio .st-field--negative textarea { resize: vertical; }

#panel-studio .st-aio__block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    padding: 10px;
    border: 1px solid var(--st-stroke);
    border-radius: 12px;
}

#panel-studio .st-aio .st-swap {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}

#panel-studio .st-aio .st-swap[hidden] {
    display: none !important;
}

#panel-studio .st-aio .st-swap__body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
}

#panel-studio .st-aio .st-swap__body > * {
    flex: none;
    min-width: 0;
    height: var(--st-control-h);
    margin: 0;
    align-self: center;
}

#panel-studio .st-aio .st-swap__body .st-dd {
    display: inline-flex;
    align-items: center;
}

#panel-studio .st-aio .st-swap__body .st-dd > summary {
    border-radius: 10px;
}

#panel-studio .st-aio .st-swap__body .st-pill--toggle {
    gap: 0;
}

#panel-studio .st-aio .st-swap__body .st-pill--check {
    display: none;
}

#panel-studio .st-aio .st-swap__body .st-dd > summary .st-pill__k {
    color: var(--muted);
}

#panel-studio .st-swap__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#panel-studio .st-swap__head > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#panel-studio .st-swap__hint { color: var(--muted); font-size: 12px; }

#panel-studio .st-swap__body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 4px;
}

#panel-studio .st-swap__body > * { min-width: 0; }
#panel-studio .st-swap__body .st-field--wide { grid-column: 1 / -1; }

#panel-studio .st-toggle { position: relative; display: inline-flex; }
#panel-studio .st-toggle input { position: absolute; opacity: 0; }
#panel-studio .st-toggle > span {
    position: relative;
    width: 34px;
    height: 19px;
    border-radius: 999px;
    background: var(--st-soft);
    box-shadow: inset 0 0 0 1px var(--st-stroke);
}
#panel-studio .st-toggle > span::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--muted);
    transition: .18s ease;
}
#panel-studio .st-toggle input:checked + span { background: var(--st-accent); }
#panel-studio .st-toggle input:checked + span::after {
    left: 18px;
    background: #fff;
}

#panel-studio .st-presets {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

#panel-studio .st-preset {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--st-stroke);
    border-radius: 12px;
    background: color-mix(in srgb, var(--soft) 55%, transparent);
}

#panel-studio .st-preset__n {
    color: var(--text);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: -0.02em;
}

#panel-studio .st-preset__actions {
    display: flex;
    gap: 6px;
}

#panel-studio .st-preset button {
    flex: 1;
    height: 28px;
    border: 0;
    border-radius: 7px;
    background: color-mix(in srgb, var(--text) 7%, transparent);
    color: var(--secondary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    transition:
        color var(--st-motion),
        background var(--st-motion);
}

#panel-studio .st-preset button:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--text) 12%, transparent);
}

#panel-studio .st-preset button.st-preset__save:hover {
    color: var(--accent);
    background: var(--accent-soft);
}

@keyframes st-spark {
    0%, 100% { transform: scale(1) rotate(0); }
    50% { transform: scale(1.08) rotate(4deg); }
}

@keyframes st-page-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes st-head-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes st-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes st-pop-in {
    from { opacity: 0; transform: scale(0.94) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes st-slide-down {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes st-field-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes st-chip-in {
    from { opacity: 0; transform: translateY(6px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes st-chip-pulse {
    0%, 100% { transform: scale(1); }
    45% { transform: scale(1.04); }
}

@keyframes st-composer-in {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes st-composer-glow {
    0%, 100% {
        box-shadow:
            var(--shadow-card),
            0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent);
    }
    50% {
        box-shadow:
            var(--shadow-card),
            0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent),
            0 10px 28px color-mix(in srgb, var(--accent) 12%, transparent);
    }
}

@keyframes st-cta-shimmer {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
}

@keyframes st-drop-bounce {
    0% { opacity: 0; transform: scale(0.92) translateY(10px); }
    65% { transform: scale(1.02) translateY(-2px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes st-drop-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes st-media-in {
    from { opacity: 0; transform: scale(0.97) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes st-mark-in {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes st-empty-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes st-empty-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes st-msg-in {
    from { opacity: 0; transform: translateY(7px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes st-msg-in-user {
    from { opacity: 0; transform: translateX(12px) translateY(4px) scale(0.98); }
    to { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
}

@keyframes st-msg-in-bot {
    from { opacity: 0; transform: translateX(-12px) translateY(4px) scale(0.98); }
    to { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
}

@keyframes st-dock-in {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes st-menu-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

#panel-studio button:focus-visible,
#panel-studio summary:focus-visible,
#panel-studio input:focus-visible,
#panel-studio textarea:focus-visible,
#panel-studio select:focus-visible,
#panel-studio .st-slot:has(input:focus-visible) {
    outline: 2px solid color-mix(in srgb, var(--accent) 68%, transparent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    #panel-studio *,
    #panel-studio *::before,
    #panel-studio *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 900px) {
    #panel-studio {
        --st-chat: 100%;
        --st-gutter: 16px;
    }
}

@media (max-width: 768px) {
    #tab-studio:checked ~ .app-shell .app-main {
        padding: 0;
    }

    #panel-studio {
        --st-gutter: 16px;
        --st-pad-x: 12px;
        --st-control-h: 34px;
        --st-chat: 100%;
        --safe-bottom: max(18px, env(safe-area-inset-bottom, 0px));
        height: calc(
            100dvh
            - var(--topbar-h, 56px)
            - env(safe-area-inset-top, 0px)
            - var(--mobile-nav-h, 56px)
            - var(--safe-bottom, env(safe-area-inset-bottom, 0px))
        );
    }

    #panel-studio .st-page {
        height: 100%;
        min-height: 0;
    }

    #panel-studio .st-head {
        min-height: 48px;
        padding: 6px max(var(--st-rail), env(safe-area-inset-right, 0px)) 6px max(var(--st-rail), env(safe-area-inset-left, 0px));
    }

    #panel-studio .st-head__title {
        font-size: 14px;
        letter-spacing: -0.02em;
    }

    #panel-studio .st-brand {
        gap: 8px;
    }

    #panel-studio .st-brand__mark {
        width: 24px;
        height: 24px;
        border-radius: 7px;
    }

    #panel-studio .st-brand__eyebrow,
    #panel-studio .st-head__lede,
    #panel-studio .st-toolbar__hint,
    #panel-studio .st-node-active { display: none; }

    #panel-studio .st-clear {
        width: 36px;
        height: 36px;
        gap: 0;
        margin: 0;
        padding: 0;
        justify-content: center;
        border-radius: 999px;
    }

    #panel-studio .st-clear__label {
        display: none;
    }

    #panel-studio .st-thread {
        padding: 16px var(--st-rail) var(--st-dock-h, 280px);
    }

    #panel-studio .st-gallery {
        padding: 12px var(--st-rail) var(--st-dock-h, 280px);
    }

    #panel-studio .st-gallery__grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 8px;
    }

    #panel-studio .st-view-switch {
        height: 34px;
        padding: 3px;
    }

    #panel-studio .st-view-switch__btn {
        height: 28px;
        padding: 0 10px;
        font-size: 12px;
    }

    #panel-studio .st-thread {
        gap: 12px;
    }

    #panel-studio .st-turn--bot + .st-turn--user {
        margin-top: 12px;
    }

    #panel-studio .st-prompt {
        max-width: 88%;
        padding: 10px 13px;
        border-radius: 18px 18px 6px 18px;
    }

    #panel-studio .st-prompt__text,
    #panel-studio .st-bubble__text {
        font-size: 15px;
    }

    #panel-studio .st-result__text {
        font-size: 15px;
        line-height: 1.65;
    }

    /* Alvo de toque: 32px de ícone era pequeno para copiar/baixar. */
    #panel-studio .st-result__act {
        width: 38px;
        height: 38px;
    }

    #panel-studio .st-result__actions {
        gap: 4px;
        padding-inline: calc(var(--st-text-x) - 9px);
    }

    #panel-studio .st-prompt .st-source img,
    #panel-studio .st-prompt .st-source video,
    #panel-studio .st-prompt .st-source__ph {
        width: 64px;
        height: 64px;
        border-radius: 14px;
    }

    #panel-studio .st-lightbox {
        padding: 10px;
    }

    #panel-studio .st-lightbox__stage img,
    #panel-studio .st-lightbox__stage video {
        max-height: 62dvh;
    }

    #panel-studio .st-lightbox__bar {
        gap: 8px;
    }

    #panel-studio .st-lightbox__btn {
        height: 34px;
        padding: 0 12px;
    }

    #panel-studio .st-thumbs a,
    #panel-studio .st-thumbs .st-thumb {
        border-radius: 14px;
    }

    #panel-studio .st-thumbs img,
    #panel-studio .st-thumbs video,
    #panel-studio .st-thumbs--solo img,
    #panel-studio .st-thumbs--solo video {
        max-height: min(42dvh, 420px);
    }

    #panel-studio .st-empty {
        font-size: 22px;
        padding: 4px 8px 20px;
    }

    #panel-studio .st-empty__mark {
        width: 52px;
        height: 52px;
        margin-bottom: 16px;
        border-radius: 14px;
    }

    #panel-studio .st-gallery__empty-art {
        width: 148px;
        height: 104px;
        margin-bottom: 16px;
    }

    #panel-studio .st-gallery__empty-tile--a,
    #panel-studio .st-gallery__empty-tile--c {
        width: 68px;
        height: 80px;
        border-radius: 14px;
    }

    #panel-studio .st-gallery__empty-tile--b {
        width: 84px;
        height: 84px;
        margin-left: -42px;
        border-radius: 14px;
    }

    #panel-studio .st-gallery__empty-title {
        font-size: 20px;
    }

    #panel-studio .st-gallery__empty-cta {
        height: 38px;
        padding: 0 18px;
    }

    /* Sobe junto com o teclado (--st-kb vem do visualViewport) e respeita a
       barra de gestos do sistema. */
    #panel-studio .st-dock {
        bottom: var(--st-kb, 0px);
        padding:
            10px
            max(var(--st-rail), env(safe-area-inset-right, 0px))
            12px
            max(var(--st-rail), env(safe-area-inset-left, 0px));
        transition: bottom 140ms var(--motion-ease, ease);
    }

    #panel-studio .st-toolrail { margin: 0 0 8px; }

    #panel-studio .st-chips-scroller {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    #panel-studio .st-chips {
        width: max-content;
        min-width: 100%;
        overflow: visible;
        padding-inline-end: 20px;
        scroll-padding-inline: 8px 24px;
    }

    #panel-studio .st-chip {
        flex: 0 0 auto;
        height: var(--st-control-h);
        padding: 0 12px;
        font-size: 12.5px;
    }

    /* No dedo a régua se rola direto; as setas só roubavam largura. */
    #panel-studio .st-rail-nav {
        display: none;
    }

    #panel-studio .st-toolrail,
    #panel-studio .st-toolrail:has(#st-chips-prev:not([hidden])) {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Imagem/Vídeo ocupa a linha inteira: dois alvos largos em vez de duas
       pílulas pequenas encostadas na esquerda. */
    #panel-studio .st-seg {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    #panel-studio .st-seg__btn {
        justify-content: center;
        height: 30px;
        font-size: 12.5px;
    }

    #panel-studio .st-composer {
        border-radius: 22px;
    }

    #panel-studio .st-aio,
    #panel-studio .st-fields {
        gap: 8px;
        padding: 10px var(--st-pad-x) 4px;
    }

    #panel-studio .st-field--prompt textarea {
        min-height: 56px;
        max-height: 140px;
        font-size: 16px;
        line-height: 1.5;
    }

    /* Duas colunas: a tira de controles rola no dedo, o Gerar fica fora dela.
       Nenhum controle é encolhido nem cortado, e o botão principal está
       sempre no mesmo lugar. */
    #panel-studio .st-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        height: auto;
        min-height: 0;
        max-height: none;
        padding: 8px var(--st-pad-x) 6px;
    }

    #panel-studio .st-toolbar__tools,
    #panel-studio .st-toolbar__left {
        min-width: 0;
        height: var(--st-control-h);
        max-height: var(--st-control-h);
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 0;
        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        padding-inline-end: 20px;
        -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent);
        mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent);
    }

    #panel-studio .st-toolbar__tools > *,
    #panel-studio .st-toolbar__left > *,
    #panel-studio .st-toolbar__tools > .st-dd,
    #panel-studio .st-toolbar__left > .st-dd,
    #panel-studio .st-toolbar__tools > .st-menu,
    #panel-studio .st-toolbar__left > .st-menu,
    #panel-studio .st-toolbar__tools > .st-stepper,
    #panel-studio .st-toolbar__left > .st-stepper {
        flex: 0 0 auto;
        min-width: max-content;
        width: auto;
        max-width: none;
        scroll-snap-align: start;
    }

    /* Como a tira rola, o rótulo pode aparecer inteiro. */
    #panel-studio .st-toolbar .st-pill__text {
        max-width: none;
        flex: none;
    }

    #panel-studio .st-cta {
        flex: 0 0 auto;
        height: 38px;
        min-height: 38px;
        max-height: 38px;
        padding: 0 16px;
        border-radius: 999px;
        margin: 0;
        font-size: 13px;
    }

    #panel-studio .st-motion {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    #panel-studio .st-motion__slot,
    #panel-studio .st-generic__files .st-slot {
        min-height: 84px;
        padding: 10px 8px;
        border-radius: 12px;
    }

    #panel-studio .st-motion__slot.has-file,
    #panel-studio .st-generic__files .st-slot.has-file {
        min-height: 108px;
    }

    #panel-studio .st-generic__files:has(> :only-child) .st-slot.has-file {
        min-height: 148px;
    }

    #panel-studio .st-dd__menu--wide { min-width: min(320px, calc(100vw - 24px)); }

    #panel-studio .st-slots {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #panel-studio .st-popover {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        max-height: min(56vh, 440px);
        padding: 12px;
    }

    #panel-studio .st-popover--settings .st-settings__grid,
    #panel-studio .st-popover--settings .st-settings__toggles {
        grid-template-columns: 1fr;
    }

    #panel-studio .st-fields-grid,
    #panel-studio .st-generic__extras,
    #panel-studio .st-swap__body {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 460px) {
    #panel-studio {
        --st-gutter: 14px;
    }

    #panel-studio .st-slots { grid-template-columns: 1fr; }

    #panel-studio .st-thumbs:not(.st-thumbs--solo) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    #panel-studio .st-menu > summary { font-size: 0; gap: 0; padding: 0 9px; }
    #panel-studio .st-menu > summary svg { width: 15px; height: 15px; }

    #panel-studio .st-seg { margin: 0; }
    #panel-studio .st-motion { grid-template-columns: 1fr; }
    #panel-studio .st-aio .st-swap__body { gap: 6px; }
    #panel-studio .st-motion__slot,
    #panel-studio .st-generic__files .st-slot { min-height: 80px; }
    #panel-studio .st-refs { gap: 8px; padding: 0; }
    #panel-studio .st-ref,
    #panel-studio .st-batch__item,
    #panel-studio .st-batch__add { width: 44px; height: 44px; border-radius: 10px; }
    #panel-studio .st-ref__x { opacity: 1; }
    #panel-studio .st-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    #panel-studio .st-gallery__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    #panel-studio .st-prompt { max-width: 92%; }

    #panel-studio .st-view-switch__btn { padding: 0 9px; }

    #panel-studio .st-empty { font-size: 20px; }
}

/* Visual seco: superfícies planas, sem vidro/glow, foco no trabalho. */

#panel-studio .st-head {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--line);
}

#panel-studio.is-scrolled .st-head {
    border-bottom-color: var(--line);
}

#panel-studio .st-brand__mark {
    background: var(--accent);
    box-shadow: none;
}

#panel-studio .st-shell::before,
#panel-studio .st-shell::after {
    display: none;
}

#panel-studio .st-prompt {
    border-color: var(--line);
    border-radius: 10px 10px 4px 10px;
    background: var(--soft);
    box-shadow: none;
}

#panel-studio .st-empty {
    max-width: 28rem;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

#panel-studio .st-empty__mark,
#panel-studio .st-empty__mark::before {
    display: none;
}

#panel-studio .st-gallery__empty-art {
    display: none;
}

#panel-studio .st-gallery__empty-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

#panel-studio .st-gallery__empty-cta,
#panel-studio .st-gallery__empty-cta:hover {
    box-shadow: none;
}

#panel-studio .st-gallery__item,
#panel-studio .st-gallery__item:hover {
    box-shadow: none;
}

#panel-studio .st-gallery__item.is-loading::before,
#panel-studio .st-thumbs .st-thumb.is-loading::before,
#panel-studio .st-gallery__item--pending::before {
    background:
        linear-gradient(
            110deg,
            var(--soft) 20%,
            var(--surface) 48%,
            var(--soft) 72%
        );
    background-size: 220% 100%;
    animation: st-media-shimmer 1.15s ease-in-out infinite;
}

#panel-studio .st-gallery__item--pending .st-gallery__pending-core {
    border-color: var(--line);
    background: var(--surface);
    backdrop-filter: none;
}

#panel-studio .st-view-switch__btn.is-on,
#panel-studio .st-status,
#panel-studio .st-chip.is-on {
    box-shadow: none;
}

#panel-studio .st-dock {
    padding-top: 12px;
    border-top: 1px solid var(--line);
    background: var(--bg);
}

#panel-studio .st-composer {
    border-color: var(--line);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: none;
}

#panel-studio.is-running .st-composer,
#panel-studio .st-composer:focus-within {
    box-shadow: none;
}

#panel-studio .st-toolbar::before {
    background: var(--line);
}

#panel-studio .st-cta,
#panel-studio .st-cta:hover {
    box-shadow: none;
}

#panel-studio .st-drop {
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: none;
}

#panel-studio .st-drop__card {
    box-shadow: none;
}

#panel-studio .st-dd__menu,
#panel-studio .st-popover {
    box-shadow: 0 8px 24px color-mix(in srgb, #000 18%, transparent);
}

#panel-studio .st-result.st-typing {
    border-radius: 10px;
    box-shadow: none;
}