/* ==========================================================================
   I AM Digital Expert — Workspace UI
   Dark-first design system. Brand accent comes from Settings (--accent).
   ========================================================================== */

:root {
  --accent: #6D6AF8;
  --accent-2: color-mix(in oklab, var(--accent) 75%, #fff);
  --accent-soft: color-mix(in oklab, var(--accent) 16%, transparent);

  --bg: #0B0B0C;
  --shell: #161617;
  --panel: #111112;
  --card: #1A1A1C;
  --card-2: #222225;
  --card-3: #2A2A2E;
  --card-foot: #0A0A0B;
  --input: #0E0E10;
  --line: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .12);
  --line-3: rgba(255, 255, 255, .18);
  --text: #F4F4F5;
  --text-2: #A1A1AA;
  --text-3: #71717A;
  --dots: rgba(255, 255, 255, .035);

  --blue: #60A5FA;
  --orange: #FDBA74;
  --amber: #FBBF24;
  --green: #4ADE80;
  --teal: #5EEAD4;
  --violet: #A78BFA;
  --red: #F87171;
  --pink: #F472B6;
  --gray: #8B8B93;

  --radius: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --tile-bg: linear-gradient(180deg, #2B2B2F 0%, #18181A 100%);
  --tile-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 2px 8px rgba(0, 0, 0, .5);
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 10px 30px -12px rgba(0, 0, 0, .6);
  --ring: 0 0 0 3px color-mix(in oklab, var(--accent) 40%, transparent);

  --font: "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #E7E7EA;
  --shell: #F6F6F7;
  --panel: #FBFBFC;
  --card: #FFFFFF;
  --card-2: #F4F4F5;
  --card-3: #E9E9EC;
  --card-foot: #F4F4F6;
  --input: #FFFFFF;
  --line: rgba(9, 9, 11, .08);
  --line-2: rgba(9, 9, 11, .13);
  --line-3: rgba(9, 9, 11, .2);
  --text: #18181B;
  --text-2: #52525B;
  --text-3: #8A8A93;
  --dots: rgba(9, 9, 11, .05);
  --blue: #2563EB;
  --orange: #EA7A1A;
  --amber: #D97706;
  --green: #16A34A;
  --teal: #0D9488;
  --violet: #7C3AED;
  --red: #DC2626;
  --pink: #DB2777;
  --gray: #71717A;
  --tile-bg: linear-gradient(180deg, #FFFFFF 0%, #F1F1F3 100%);
  --tile-shadow: inset 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 3px rgba(0, 0, 0, .12);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -16px rgba(0, 0, 0, .18);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 var(--font);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--text); }
img, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.i { width: 18px; height: 18px; flex: none; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.grow { flex: 1; min-width: 0; }
.hidden { display: none !important; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ───────────────────────── Shell ───────────────────────── */
.shell { display: grid; grid-template-columns: 276px minmax(0, 1fr); min-height: 100vh; background: var(--shell); }
.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: thin;
  padding: 22px 18px 18px; display: flex; flex-direction: column; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 6px 18px; border-bottom: 1px solid var(--line); }
.brand-logo {
  width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(135deg, var(--accent-2), var(--accent) 55%, color-mix(in oklab, var(--accent) 70%, #000));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 14px -4px color-mix(in oklab, var(--accent) 70%, transparent);
  color: #fff; font-weight: 700; font-size: 14px; letter-spacing: -.02em;
}
.brand-logo img { width: 100%; height: 100%; object-fit: cover; }
.brand-name { font-size: 17px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.brand-name small { display: block; font-size: 12px; font-weight: 400; color: var(--text-3); letter-spacing: 0; }

.workspace-card {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-md);
  background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--card-shadow);
}
.workspace-card:hover { border-color: var(--line-3); }
.ws-mark {
  width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center;
  background: color-mix(in oklab, var(--av, var(--accent)) 55%, #fff 0%); color: #fff; font-weight: 600; font-size: 17px;
  background: linear-gradient(160deg, color-mix(in oklab, var(--av, var(--accent)) 80%, #fff), var(--av, var(--accent)));
}
.ws-text { min-width: 0; flex: 1; line-height: 1.25; }
.ws-text b { display: block; font-weight: 500; font-size: 13px; color: var(--text-2); }
.ws-text span { display: block; font-size: 14px; font-weight: 500; }
.ws-text * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.search-trigger {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; border-radius: var(--radius-md);
  background: var(--input); border: 1px solid var(--line); color: var(--text-2); cursor: pointer; text-align: left;
}
.search-trigger:hover { border-color: var(--line-2); color: var(--text); }
.search-trigger span { flex: 1; }
kbd { font: 500 11px/1 var(--mono); padding: 4px 6px; border-radius: 6px; background: var(--card-2); border: 1px solid var(--line); color: var(--text-2); }

.nav-label { font-size: 12.5px; color: var(--text-3); padding: 6px 8px 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; color: var(--text-2);
  border: 1px solid transparent; font-size: 14.5px; position: relative;
}
.nav a:hover { color: var(--text); background: color-mix(in oklab, var(--card) 60%, transparent); }
.nav a.active {
  color: var(--text); background: var(--card); border-color: var(--line-2); box-shadow: var(--card-shadow);
  font-family: var(--mono); font-weight: 500; letter-spacing: .01em;
}
.nav a.active .i { color: var(--text); }
.nav .count {
  margin-left: auto; font: 600 11px/1 var(--font); padding: 4px 7px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-2); font-family: var(--font);
}
[data-theme="light"] .nav .count { color: var(--accent); }
.nav-projects a { font-size: 14px; gap: 10px; padding: 7px 10px; }
.p-tile {
  width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff;
  background: linear-gradient(150deg, color-mix(in oklab, var(--pc, var(--accent)) 75%, #fff), var(--pc, var(--accent)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.p-tile.lg { width: 44px; height: 44px; border-radius: 13px; font-size: 17px; }
.mini-meter { margin-left: auto; display: flex; gap: 2px; align-items: flex-end; height: 14px; padding: 4px 5px; border-radius: 7px; background: var(--card); border: 1px solid var(--line); box-sizing: content-box; }
.mini-meter i { width: 3px; border-radius: 2px; background: var(--card-3); }
.mini-meter i.on { background: var(--green); }
.sidebar-foot { margin-top: auto; display: flex; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.sidebar-foot form { display: contents; }

.main {
  margin: 12px 12px 12px 0; border-radius: 26px; border: 1px solid var(--line-2); background-color: var(--panel);
  background-image: radial-gradient(var(--dots) 1px, transparent 1px); background-size: 18px 18px;
  min-width: 0; display: flex; flex-direction: column; min-height: calc(100vh - 24px);
}
.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px;
  margin: 14px 14px 0; padding: 10px 12px 10px 14px; border-radius: 18px;
  background: color-mix(in oklab, var(--card) 88%, transparent); border: 1px solid var(--line-2);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.crumbs { display: flex; align-items: center; gap: 4px; min-width: 0; flex: 1; }
.crumbs .sep { width: 1px; height: 22px; background: var(--line-2); margin: 0 10px; }
.crumbs h1 { font-size: 17px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumbs .trail { color: var(--text-3); font-size: 14px; display: flex; gap: 6px; align-items: center; min-width: 0; }
.crumbs .trail a:hover { color: var(--text); }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.btn.menu-btn { display: none; }
.page { padding: 18px 14px 40px; display: flex; flex-direction: column; gap: 16px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 4px 4px 0; }
.page-head h2 { font-size: 22px; }
.page-head p { color: var(--text-2); margin-top: 2px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ───────────────────────── Buttons ───────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 14px;
  border-radius: 11px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--text);
  font-weight: 500; font-size: 13.5px; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover { background: var(--card-3); border-color: var(--line-3); }
.btn:active { transform: translateY(1px); }
.btn .i { width: 16px; height: 16px; }
.btn-primary {
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 88%, #fff), var(--accent)); border-color: transparent; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 6px 16px -8px color-mix(in oklab, var(--accent) 80%, transparent);
}
.btn-primary:hover { background: var(--accent); border-color: transparent; filter: brightness(1.08); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--card-2); color: var(--text); border-color: var(--line); }
.btn-danger { color: var(--red); }
.btn-danger:hover { background: color-mix(in oklab, var(--red) 14%, transparent); border-color: color-mix(in oklab, var(--red) 35%, transparent); }
.btn-success { background: color-mix(in oklab, var(--green) 85%, #000); color: #04160A; border-color: transparent; font-weight: 600; }
.btn-success:hover { background: var(--green); }
.btn-sm { height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 9px; gap: 6px; }
.btn-lg { height: 46px; padding: 0 20px; font-size: 15px; border-radius: 13px; }
.btn-icon { width: 38px; padding: 0; }
.btn-icon.btn-sm { width: 30px; }
.btn-block { width: 100%; }
/* Buttons never spill out of their card: full-width buttons wrap long labels instead */
.btn { max-width: 100%; }
.btn-block { white-space: normal; text-align: center; line-height: 1.3; height: auto; min-height: 38px; padding-top: 6px; padding-bottom: 6px; }
.btn-block.btn-sm { min-height: 30px; padding-top: 5px; padding-bottom: 5px; }
.btn-block.btn-lg { min-height: 46px; padding-top: 8px; padding-bottom: 8px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.nav-arrows { display: flex; gap: 2px; }
.nav-arrows .btn { width: 32px; height: 32px; padding: 0; color: var(--text-2); }

/* ───────────────────────── Cards ───────────────────────── */
.card {
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--card-shadow);
  min-width: 0; position: relative;
}
.card-pad { padding: 20px; }
.card-head { display: flex; align-items: center; gap: 14px; padding: 18px 20px; }
.card-head .titles { flex: 1; min-width: 0; }
.card-head h3 { font-size: 16.5px; font-weight: 500; }
.card-head p { color: var(--text-3); font-size: 13.5px; margin-top: 1px; }
.card-body { padding: 0 20px 20px; }
.card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px;
  background: var(--card-foot); border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); color: var(--text-2);
}
.card-foot:hover { color: var(--text); }
.card-foot.good { background: color-mix(in oklab, var(--green) 9%, var(--card-foot)); color: var(--green); }
.tile {
  width: 46px; height: 46px; border-radius: 14px; flex: none; display: grid; place-items: center;
  background: var(--tile-bg); border: 1px solid var(--line-2); box-shadow: var(--tile-shadow); color: var(--text);
}
.tile .i { width: 21px; height: 21px; }
.tile.sm { width: 34px; height: 34px; border-radius: 10px; }
.tile.sm .i { width: 17px; height: 17px; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.section-title h3 { font-size: 15px; font-weight: 500; }
.divider-list > * + * { border-top: 1px solid var(--line); }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-main { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.grid-dash { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.grid-dash > .card, .grid-2 > .card { display: flex; flex-direction: column; }
.grid-dash > .card > .card-foot { margin-top: auto; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; align-items: center; gap: 10px; }
.row-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.between { justify-content: space-between; }

/* Stat tiles */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(122px, 1fr)); gap: 12px; }
.stat { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.stat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; color: var(--text-2); font-size: 12.5px; line-height: 1.35; min-height: 34px; }
.stat-top .i { width: 16px; height: 16px; color: var(--text-3); }
.stat-value { font-size: 30px; font-weight: 500; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-value small { font-size: 13px; color: var(--text-3); font-weight: 400; letter-spacing: 0; margin-left: 4px; }
.stat.warn .stat-value { color: var(--red); }
.stat a.stat-link { position: absolute; inset: 0; border-radius: inherit; }

/* Striped segmented bar (from reference design) */
.segbar { display: flex; gap: 5px; height: 30px; }
.segbar > span {
  border-radius: 7px; min-width: 6px; background-color: var(--c);
  background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .22) 0 5px, transparent 5px 11px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.segbar.thin { height: 10px; gap: 3px; }
.segbar.thin > span { border-radius: 4px; background-image: none; }
.segbar .empty { flex: 1; background: var(--card-3); background-image: none; box-shadow: none; }
.legend { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.legend-row { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.legend-row .sq { width: 16px; height: 16px; border-radius: 5px; background: var(--c); }
.legend-row b { margin-left: auto; font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.legend-row b small { font-size: 14px; color: var(--text-3); font-weight: 400; margin-left: 4px; }
.big-count { display: flex; align-items: baseline; justify-content: space-between; margin: 4px 0 14px; }
.big-count span { font-size: 22px; font-weight: 500; }
.big-count b { font-size: 34px; font-weight: 500; letter-spacing: -.03em; }

.progress { height: 6px; border-radius: 99px; background: var(--card-3); overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: inherit; background: var(--c, var(--green)); }
.progress.lg { height: 10px; }
.pct { font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--text-2); }

/* Bars (workload, reports) */
.hbar-list { display: flex; flex-direction: column; gap: 12px; }
.hbar { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 13.5px; }
.hbar .track { height: 10px; border-radius: 99px; background: var(--card-3); display: flex; overflow: hidden; gap: 2px; }
.hbar .track i { display: block; height: 100%; background: var(--c); }
.hbar .num { text-align: right; white-space: nowrap; min-width: 34px; font-variant-numeric: tabular-nums; color: var(--text-2); }
.vbars { display: flex; align-items: flex-end; gap: 10px; height: 160px; padding-top: 10px; }
.vbars .vcol { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.vbars .bar { width: 100%; max-width: 42px; border-radius: 9px; background: var(--c, var(--accent)); min-height: 3px;
  background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .18) 0 5px, transparent 5px 11px); }
.vbars .lbl { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.vbars .val { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ───────────────────────── Badges, avatars ───────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 8px; font-size: 12px; font-weight: 500;
  color: var(--c, var(--text-2)); background: color-mix(in oklab, var(--c, var(--gray)) 13%, transparent);
  border: 1px solid color-mix(in oklab, var(--c, var(--gray)) 28%, transparent); white-space: nowrap;
}
.badge i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.plain i { display: none; }
.status-backlog { --c: var(--gray); }
.status-todo, .status-planned { --c: #C4C4CC; }
[data-theme="light"] .status-todo, [data-theme="light"] .status-planned { --c: #52525B; }
.status-in_progress { --c: var(--blue); }
.status-internal_review { --c: var(--orange); }
.status-client_review { --c: var(--violet); }
.status-revision { --c: var(--red); }
.status-approved { --c: var(--teal); }
.status-completed { --c: var(--green); }
.status-pending { --c: var(--violet); }
.status-changes_requested { --c: var(--red); }
.status-cancelled { --c: var(--gray); }
.status-active { --c: var(--green); }
.status-planning { --c: var(--blue); }
.status-on_hold { --c: var(--amber); }
.status-archived, .status-disabled { --c: var(--gray); }
.status-invited { --c: var(--amber); }
.vis-client { --c: var(--violet); }
.vis-internal { --c: var(--gray); }

.prio { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--c); }
.prio .i { width: 14px; height: 14px; }
.prio-low { --c: var(--text-3); }
.prio-medium { --c: var(--blue); }
.prio-high { --c: var(--orange); }
.prio-urgent { --c: var(--red); font-weight: 600; }

.avatar {
  --s: 28px; width: var(--s); height: var(--s); border-radius: 50%; flex: none; display: inline-grid; place-items: center;
  font-size: calc(var(--s) * .38); font-weight: 600; color: #fff; letter-spacing: .02em;
  background: linear-gradient(150deg, color-mix(in oklab, var(--av, #6D6AF8) 70%, #fff), var(--av, #6D6AF8));
}
.avatar-xs { --s: 24px; }
.avatar-sm { --s: 28px; }
.avatar-md { --s: 36px; }
.avatar-lg { --s: 52px; }
.avatar-empty { background: var(--card-3); color: var(--text-3); border: 1px dashed var(--line-3); }
.avatar-empty .i { width: 60%; height: 60%; }
.avatar-stack { display: inline-flex; }
.avatar-stack .avatar { box-shadow: 0 0 0 2px var(--card); }
.avatar-stack .avatar + .avatar { margin-left: -7px; }
.avatar-more { background: var(--card-3); color: var(--text-2); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 4px; border-radius: 99px; background: var(--card-2); border: 1px solid var(--line); font-size: 12.5px; }
.chip.no-av { padding-left: 10px; }
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-2); }
.tag .i { width: 14px; height: 14px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--accent)); display: inline-block; flex: none; }
.is-overdue { color: var(--red) !important; }
.is-soon { color: var(--orange) !important; }
.mention { color: var(--accent-2); background: var(--accent-soft); padding: 0 4px; border-radius: 5px; }
[data-theme="light"] .mention { color: var(--accent); }

/* ───────────────────────── Forms ───────────────────────── */
.form { display: flex; flex-direction: column; gap: 16px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .label { font-size: 12.5px; color: var(--text-2); font-weight: 500; }
.field .hint { font-size: 12px; color: var(--text-3); }
.input, .select, .textarea {
  width: 100%; height: 40px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--input);
  color: var(--text); transition: border-color .15s, box-shadow .15s;
}
.textarea { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; line-height: 1.55; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-3); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: color-mix(in oklab, var(--accent) 70%, transparent); box-shadow: var(--ring); }
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.select { appearance: none; padding-right: 32px; cursor: pointer;
  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='%23999' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
.select-sm, .input-sm { height: 32px; font-size: 13px; border-radius: 9px; }
.select[multiple] { height: auto; min-height: 120px; padding: 6px; background-image: none; }
.field-error { color: var(--red); font-size: 12.5px; }
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13.5px; line-height: 1.4; }
.check input { margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.check small { display: block; color: var(--text-3); font-size: 12px; }
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; }
.switch input { appearance: none; width: 36px; height: 21px; border-radius: 99px; background: var(--card-3); border: 1px solid var(--line-2); position: relative; cursor: pointer; transition: background .15s; margin: 0; flex: none; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.switch input:checked { background: var(--accent); border-color: transparent; }
.switch input:checked::after { transform: translateX(15px); }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; padding-top: 4px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filters .input, .filters .select { height: 34px; width: auto; min-width: 140px; font-size: 13px; border-radius: 10px; }
.filters .input[type=search] { min-width: 220px; }
.color-input { width: 46px; height: 40px; padding: 4px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--input); cursor: pointer; }

/* ───────────────────────── Tables & lists ───────────────────────── */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { text-align: left; font-weight: 500; color: var(--text-3); font-size: 12.5px; padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: color-mix(in oklab, var(--card-2) 55%, transparent); }
.table .title-cell { font-weight: 500; min-width: 220px; }
.table .title-cell a:hover { text-decoration: underline; text-underline-offset: 3px; }
.table .sub { display: block; color: var(--text-3); font-size: 12px; font-weight: 400; }
.list-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px; min-width: 0; }
.list-item:hover { background: color-mix(in oklab, var(--card-2) 50%, transparent); }
.list-item .main-col { flex: 1; min-width: 0; }
.list-item .main-col b { font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-item .main-col > span { color: var(--text-3); font-size: 12.5px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px;
  padding: 40px 20px; color: var(--text-2);
}
.empty .tile { margin-bottom: 4px; }
.empty h4 { color: var(--text); font-size: 15px; font-weight: 500; }
.empty p { max-width: 420px; font-size: 13.5px; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); }
.pager-info { color: var(--text-3); font-size: 12.5px; }

/* Tabs */
.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--card); border: 1px solid var(--line-2); width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabs a, .tabs button { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 10px; color: var(--text-2); font-size: 13.5px; white-space: nowrap; border: 1px solid transparent; background: none; cursor: pointer; }
.tabs a:hover, .tabs button:hover { color: var(--text); }
.tabs a.active, .tabs button.active { background: var(--card-3); color: var(--text); border-color: var(--line-2); }
.tabs .i { width: 16px; height: 16px; }
.tabs .count { font-size: 11px; padding: 2px 6px; border-radius: 99px; background: var(--card-2); color: var(--text-2); }

/* ───────────────────────── Project header ───────────────────────── */
.project-hero { display: flex; gap: 16px; align-items: flex-start; padding: 20px; flex-wrap: wrap; }
.project-hero .titles { flex: 1; min-width: 240px; }
.project-hero h2 { font-size: 22px; }
.project-hero .meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; color: var(--text-2); font-size: 13px; align-items: center; }
.project-hero .meta .i { width: 15px; height: 15px; color: var(--text-3); }
.meta-item { display: inline-flex; gap: 6px; align-items: center; }

/* ───────────────────────── Kanban ───────────────────────── */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(272px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; scroll-snap-type: x proximity; }
.col { background: color-mix(in oklab, var(--card) 70%, transparent); border: 1px solid var(--line); border-radius: 18px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 140px; scroll-snap-align: start; }
.col-head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 6px; font-size: 13.5px; font-weight: 500; }
.col-head .dot { background: var(--c); width: 9px; height: 9px; }
.col-head .n { color: var(--text-3); font-weight: 400; font-variant-numeric: tabular-nums; }
.col-head .btn { margin-left: auto; }
.col-body { display: flex; flex-direction: column; gap: 8px; min-height: 60px; border-radius: 12px; transition: background .15s; }
.col-body.drag-over { background: var(--accent-soft); outline: 1px dashed color-mix(in oklab, var(--accent) 60%, transparent); outline-offset: 2px; }
.tcard {
  display: block; background: var(--card); border: 1px solid var(--line-2); border-radius: 14px; padding: 12px; cursor: grab;
  box-shadow: var(--card-shadow); position: relative; border-left: 3px solid var(--c, transparent);
}
.tcard:hover { border-color: var(--line-3); }
.tcard.dragging { opacity: .45; }
.tcard .t-title { font-weight: 500; font-size: 13.5px; line-height: 1.4; margin-bottom: 8px; display: block; }
.tcard .t-meta { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: 12px; flex-wrap: wrap; }
.tcard .t-meta .i { width: 13px; height: 13px; }
.tcard .t-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; gap: 8px; }
.tcard .t-proj { font-size: 11.5px; color: var(--text-3); margin-bottom: 4px; display: block; }
.flag-blocked { color: var(--red); display: inline-flex; gap: 4px; align-items: center; font-size: 11.5px; }
.vis-dot { display: inline-flex; align-items: center; gap: 4px; color: var(--violet); font-size: 11.5px; }

/* ───────────────────────── Task detail ───────────────────────── */
.task-title-input { font-size: 22px; font-weight: 600; letter-spacing: -.015em; background: transparent; border: 1px solid transparent; border-radius: 10px; padding: 4px 8px; margin-left: -8px; width: calc(100% + 8px); }
.task-title-input:hover { border-color: var(--line-2); }
.task-title-input:focus { outline: none; border-color: color-mix(in oklab, var(--accent) 70%, transparent); background: var(--input); }
.props { display: flex; flex-direction: column; }
.prop { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.prop:last-child { border-bottom: 0; }
.prop > span:first-child { color: var(--text-3); font-size: 12.5px; }
.prop .select, .prop .input { height: 34px; font-size: 13px; }
.checklist { display: flex; flex-direction: column; gap: 2px; }
.check-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; }
.check-item:hover { background: var(--card-2); }
.check-item.done .txt { color: var(--text-3); text-decoration: line-through; }
.check-item .txt { flex: 1; min-width: 0; }
.check-item form { display: contents; }
.check-box { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--line-3); display: grid; place-items: center; background: none; cursor: pointer; flex: none; padding: 0; color: transparent; }
.check-item.done .check-box { background: var(--green); border-color: var(--green); color: #052e12; }
.check-box .i { width: 13px; height: 13px; stroke-width: 3; }
.desc { line-height: 1.65; color: var(--text); word-wrap: break-word; }
.desc a, .comment-body a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
[data-theme="light"] .desc a, [data-theme="light"] .comment-body a { color: var(--accent); }

/* Comments */
.comments { display: flex; flex-direction: column; gap: 14px; }
.comment { display: flex; gap: 12px; }
.comment-main { flex: 1; min-width: 0; }
.comment-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-3); margin-bottom: 4px; }
.comment-meta b { color: var(--text); font-weight: 500; font-size: 13.5px; }
.comment-body { background: var(--card-2); border: 1px solid var(--line); padding: 10px 13px; border-radius: 4px 14px 14px 14px; line-height: 1.6; word-wrap: break-word; }
.comment.is-client .comment-body { background: color-mix(in oklab, var(--violet) 9%, var(--card-2)); border-color: color-mix(in oklab, var(--violet) 25%, transparent); }
.comment-actions { display: flex; gap: 4px; margin-top: 4px; }
.comment-actions .btn { height: 24px; font-size: 12px; padding: 0 8px; }
.replies { margin-top: 10px; padding-left: 14px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.composer { display: flex; flex-direction: column; gap: 10px; }
.composer .textarea { min-height: 76px; }
.composer-bar { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--input); border: 1px solid var(--line-2); }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; font-size: 12.5px; color: var(--text-2); }
.seg input:checked + span { background: var(--card-3); color: var(--text); }
.seg input:focus-visible + span { box-shadow: var(--ring); }
.seg .i { width: 14px; height: 14px; }
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; font-size: 13px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--text-2); }
.notice .i { margin-top: 1px; width: 17px; height: 17px; }
.notice.warn { border-color: color-mix(in oklab, var(--orange) 35%, transparent); background: color-mix(in oklab, var(--orange) 9%, transparent); color: var(--text); }
.notice.warn .i { color: var(--orange); }
.notice.info { border-color: color-mix(in oklab, var(--accent) 35%, transparent); background: var(--accent-soft); color: var(--text); }
.notice.info .i { color: var(--accent-2); }
.notice.ok { border-color: color-mix(in oklab, var(--green) 35%, transparent); background: color-mix(in oklab, var(--green) 9%, transparent); color: var(--text); }
.notice.ok .i { color: var(--green); }
.notice.danger { border-color: color-mix(in oklab, var(--red) 35%, transparent); background: color-mix(in oklab, var(--red) 9%, transparent); color: var(--text); }
.notice.danger .i { color: var(--red); }

/* ───────────────────────── Files ───────────────────────── */
.files-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.fcard { background: var(--card); border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--card-shadow); }
.fthumb { aspect-ratio: 16 / 10; background: var(--card-2); display: grid; place-items: center; position: relative; overflow: hidden; cursor: pointer; border: 0; padding: 0; width: 100%; color: var(--text-3); }
.fthumb img, .fthumb video { width: 100%; height: 100%; object-fit: cover; }
.fthumb .i { width: 34px; height: 34px; }
.fthumb .play { position: absolute; width: 44px; height: 44px; border-radius: 50%; background: rgba(0, 0, 0, .55); display: grid; place-items: center; color: #fff; backdrop-filter: blur(4px); }
.fthumb .play .i { width: 20px; height: 20px; margin-left: 2px; }
.fthumb .ext { position: absolute; bottom: 8px; left: 8px; font: 600 10.5px/1 var(--mono); padding: 4px 6px; border-radius: 6px; background: rgba(0, 0, 0, .6); color: #fff; text-transform: uppercase; }
.fbody { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.fbody b { font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.fbody .fmeta { color: var(--text-3); font-size: 11.5px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fbody .factions { display: flex; gap: 4px; margin-top: auto; padding-top: 4px; flex-wrap: wrap; }
.file-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.file-row + .file-row { border-top: 1px solid var(--line); }
.file-row .fi { width: 40px; height: 40px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--line); display: grid; place-items: center; flex: none; overflow: hidden; color: var(--text-2); }
.file-row .fi img { width: 100%; height: 100%; object-fit: cover; }
.file-row .grow b { font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.file-row .grow span { font-size: 12px; color: var(--text-3); }
.dropzone { border: 1.5px dashed var(--line-3); border-radius: 16px; padding: 22px; text-align: center; color: var(--text-2); transition: border-color .15s, background .15s; cursor: pointer; display: block; }
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.dropzone .i { width: 26px; height: 26px; margin: 0 auto 8px; color: var(--text-3); }
.dropzone input[type=file] { display: none; }
.up-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.up-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; font-size: 12.5px; padding: 8px 10px; background: var(--card-2); border-radius: 10px; border: 1px solid var(--line); }
.up-item .progress { grid-column: 1 / -1; }
.up-item.err { border-color: color-mix(in oklab, var(--red) 40%, transparent); }
.up-item.err .st { color: var(--red); }
.up-item.ok .st { color: var(--green); }
.embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ───────────────────────── Timeline (dashboard) ───────────────────────── */
.timeline { overflow-x: auto; }
.tl-grid { --days: 21; display: grid; grid-template-columns: repeat(var(--days), minmax(36px, 1fr)); min-width: 760px; position: relative; }
.tl-head { display: contents; }
.tl-day { font-size: 12px; color: var(--text-3); padding: 12px 0 12px 8px; border-bottom: 1px solid var(--line); border-left: 1px dashed var(--line); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-day.today { color: var(--text); font-weight: 600; }
.tl-day.wk { color: var(--text-2); }
.tl-rows { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(var(--days), minmax(36px, 1fr)); row-gap: 10px; padding: 14px 0 16px; position: relative;
  background-image: repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px calc(100% / var(--days))); }
.tl-today { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: color-mix(in oklab, var(--accent) 75%, transparent); pointer-events: none; }
.tl-today::before { content: ""; position: absolute; top: -4px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.tl-bar {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 10px 0 12px; border-radius: 12px; min-width: 0;
  background: color-mix(in oklab, var(--c) 12%, var(--card)); border: 1px solid color-mix(in oklab, var(--c) 32%, transparent); color: var(--c);
  overflow: hidden; font-size: 14px; font-weight: 500;
}
.tl-bar::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c); }
.tl-bar .p-tile { width: 22px; height: 22px; border-radius: 7px; font-size: 10.5px; }
.tl-bar .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-bar .avatar-stack .avatar { box-shadow: 0 0 0 2px color-mix(in oklab, var(--c) 12%, var(--card)); }
.tl-bar:hover { border-color: var(--c); }

/* ───────────────────────── Calendar ───────────────────────── */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.cal-dow { padding: 10px 12px; font-size: 12px; color: var(--text-3); border-bottom: 1px solid var(--line); }
.cal-cell { min-height: 118px; padding: 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-cell.other { background: color-mix(in oklab, var(--card-foot) 50%, transparent); }
.cal-cell.other .cal-num { color: var(--text-3); }
.cal-num { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--text-2); width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; }
.cal-cell.today .cal-num { background: var(--accent); color: #fff; font-weight: 600; }
.cal-ev { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 7px; border-radius: 7px; background: color-mix(in oklab, var(--c) 13%, transparent); color: var(--text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-left: 2px solid var(--c); }
.cal-ev:hover { background: color-mix(in oklab, var(--c) 22%, transparent); }
.cal-ev.done { opacity: .55; text-decoration: line-through; }
.cal-ev .i { width: 12px; height: 12px; }
.fmeta .i { width: 13px; height: 13px; }
.cal-more { font-size: 11.5px; color: var(--text-3); padding-left: 6px; }

/* ───────────────────────── Activity feed ───────────────────────── */
.feed { display: flex; flex-direction: column; }
.feed-item { display: flex; gap: 12px; padding: 12px 20px; position: relative; }
.feed-item + .feed-item { border-top: 1px solid var(--line); }
.feed-item .ftext { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.5; }
.feed-item .ftext b { font-weight: 500; }
.feed-item .ftime { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.feed-icon { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--card-2); border: 1px solid var(--line); color: var(--text-2); flex: none; }
.feed-icon .i { width: 15px; height: 15px; }

/* ───────────────────────── Chat ───────────────────────── */
.chat { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 0; min-height: calc(100vh - 150px); padding: 0; overflow: hidden; }
.chat-side { border-right: 1px solid var(--line); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.chat-side .nav-label { margin-top: 8px; }
.chan { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; color: var(--text-2); font-size: 13.5px; }
.chan:hover { background: var(--card-2); color: var(--text); }
.chan.active { background: var(--card-3); color: var(--text); }
.chan .i { width: 15px; height: 15px; }
.chan .unread { margin-left: auto; background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 99px; }
.chat-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.chat-head h3 { font-size: 15px; font-weight: 500; }
.chat-stream { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 16px; max-height: calc(100vh - 290px); min-height: 300px; }
.msg { display: flex; gap: 12px; }
.msg-body { flex: 1; min-width: 0; }
.msg-meta { display: flex; gap: 8px; align-items: baseline; font-size: 12px; color: var(--text-3); }
.msg-meta b { color: var(--text); font-size: 13.5px; font-weight: 500; }
.msg-text { line-height: 1.6; margin-top: 2px; word-wrap: break-word; }
.msg-text a { color: var(--accent-2); text-decoration: underline; }
.msg-tools { display: flex; gap: 2px; margin-top: 2px; opacity: 0; transition: opacity .15s; }
.msg:hover .msg-tools, .msg:focus-within .msg-tools { opacity: 1; }
.msg-tools .btn { height: 24px; font-size: 12px; padding: 0 8px; }
.msg-replies { margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.msg-replies:empty { display: none; }
.reply-form { margin-top: 8px; display: flex; gap: 8px; }
.reply-form .input { height: 34px; font-size: 13px; }
.chat-stream.drop { outline: 2px dashed var(--accent); outline-offset: -8px; background: var(--accent-soft); }
.msg-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.msg-img { border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; padding: 0; background: var(--card-2); cursor: zoom-in; max-width: 260px; }
.msg-img img { max-height: 200px; width: auto; object-fit: cover; }
.msg-chip { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--card-2); width: min(340px, 100%); font-size: 12.5px; }
.msg-chip .fi { width: 34px; height: 34px; border-radius: 9px; background: var(--card-3); display: grid; place-items: center; flex: none; color: var(--text-2); }
.msg-chip b { font-weight: 500; font-size: 13px; }
.chat-side .nav-label { display: flex; align-items: center; justify-content: space-between; min-height: 30px; }
.chat-side .nav-label .btn { height: 24px; width: 24px; }
.chan .avatar { --s: 20px; font-size: 9px; }
.chan .i { flex: none; }
.chat-compose { border-top: 1px solid var(--line); padding: 14px 18px; display: flex; gap: 10px; align-items: flex-end; }
.chat-compose .textarea { min-height: 44px; height: 44px; max-height: 180px; }
.day-sep { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: 12px; text-align: center; }
.day-sep::before, .day-sep::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

/* ───────────────────────── Dropdowns, dialogs, toasts ───────────────────────── */
.dd { position: relative; }
.dd > summary { list-style: none; cursor: pointer; }
.dd > summary::-webkit-details-marker { display: none; }
.dd-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; min-width: 220px; padding: 6px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--line-2); box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .6); display: flex; flex-direction: column;
}
.dd-menu.left { right: auto; left: 0; }
.dd-menu a, .dd-menu button { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; font-size: 13.5px; color: var(--text-2); background: none; border: 0; cursor: pointer; text-align: left; width: 100%; }
.dd-menu a:hover, .dd-menu button:hover { background: var(--card-2); color: var(--text); }
.dd-menu .i { width: 16px; height: 16px; }
.dd-menu hr { margin: 6px 0; }
.dd-menu .dd-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.dd-menu .dd-head b { display: block; font-weight: 500; }
.dd-menu .dd-head span { font-size: 12px; color: var(--text-3); }
.dd-menu form { display: contents; }
.dd-menu button.danger { color: var(--red); }
.dd-menu button:disabled { opacity: .5; cursor: not-allowed; }
.person-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.person-row:last-child { border-bottom: 0; }
.person-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; font-size: 12px; }
.person-meta .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-menu { width: 380px; max-width: calc(100vw - 32px); padding: 0; }
.notif-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.notif-list { max-height: 420px; overflow-y: auto; }
.notif { display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
.notif:hover { background: var(--card-2); }
.notif.unread { background: color-mix(in oklab, var(--accent) 7%, transparent); }
.notif.unread::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-top: 7px; flex: none; }
.notif .nt { flex: 1; min-width: 0; }
.notif .nt b { font-weight: 500; display: block; }
.notif .nt span { color: var(--text-3); font-size: 12px; display: block; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notif-foot { display: block; text-align: center; padding: 10px; font-size: 13px; color: var(--text-2); }
.bell { position: relative; }
.bell .badge-dot { position: absolute; top: 4px; right: 4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: var(--red); color: #fff; font: 600 10.5px/17px var(--font); text-align: center; box-shadow: 0 0 0 2px var(--card); }

dialog {
  border: 1px solid var(--line-2); border-radius: 20px; background: var(--card); color: var(--text); padding: 0;
  width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 64px); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7);
}
dialog::backdrop { background: rgba(0, 0, 0, .55); backdrop-filter: blur(3px); }
dialog.wide { width: min(980px, calc(100vw - 32px)); }
.dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.dlg-head h3 { font-size: 16px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlg-body { padding: 20px; overflow-y: auto; max-height: calc(100vh - 180px); }
.dlg-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); }
.preview-stage { display: grid; place-items: center; background: #000; border-radius: 12px; min-height: 240px; overflow: hidden; }
.preview-stage img { max-height: 70vh; object-fit: contain; }
.preview-stage video { max-height: 70vh; width: 100%; background: #000; }
.preview-stage iframe.pdf { width: 100%; height: 70vh; border: 0; background: #fff; }

.palette { width: min(620px, calc(100vw - 32px)); margin-top: 10vh; }
.palette-input { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.palette-input input { flex: 1; border: 0; background: none; font-size: 16px; outline: none; }
.palette-results { max-height: 420px; overflow-y: auto; padding: 6px; }
.palette-results a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; }
.palette-results a.sel, .palette-results a:hover { background: var(--card-2); }
.palette-results .kind { margin-left: auto; font-size: 11.5px; color: var(--text-3); text-transform: capitalize; }
.palette-results .sub { display: block; font-size: 12px; color: var(--text-3); }
.palette-empty { padding: 26px; text-align: center; color: var(--text-3); font-size: 13.5px; }
.palette-group { font-size: 11.5px; color: var(--text-3); padding: 10px 12px 4px; text-transform: uppercase; letter-spacing: .06em; }

.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 100; display: flex; flex-direction: column; gap: 8px; max-width: min(400px, calc(100vw - 36px)); }
.toast {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line-2);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .6); font-size: 13.5px; animation: toast-in .25s ease-out;
}
.toast .i { width: 18px; height: 18px; margin-top: 1px; }
.toast.success .i { color: var(--green); }
.toast.error .i { color: var(--red); }
.toast.info .i { color: var(--blue); }
.toast .x { margin-left: auto; background: none; border: 0; color: var(--text-3); cursor: pointer; padding: 0; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ───────────────────────── Approval panel ───────────────────────── */
.approval-box { border-radius: 18px; border: 1px solid color-mix(in oklab, var(--violet) 35%, transparent); background: color-mix(in oklab, var(--violet) 7%, var(--card)); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.approval-box h3 { font-size: 16px; font-weight: 500; display: flex; gap: 8px; align-items: center; }
.approval-box h3 .i { color: var(--violet); }
.approval-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.history { display: flex; flex-direction: column; gap: 0; }
.history-item { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; position: relative; }
.history-item::before { content: ""; position: absolute; left: 12px; top: 26px; bottom: 0; width: 2px; background: var(--line); }
.history-item:last-child::before { display: none; }
.history-item .hi { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklab, var(--c) 18%, var(--card)); color: var(--c); border: 1px solid color-mix(in oklab, var(--c) 40%, transparent); }
.history-item .hi .i { width: 14px; height: 14px; }
.history-item .hb { font-size: 13.5px; }
.history-item .hb small { display: block; color: var(--text-3); font-size: 12px; }
.history-item blockquote { margin: 6px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--line); color: var(--text); font-size: 13px; }

/* ───────────────────────── Auth pages ───────────────────────── */
.auth-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 32px 16px;
  background-image: radial-gradient(var(--dots) 1px, transparent 1px), radial-gradient(1200px 500px at 50% -10%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 70%);
  background-size: 18px 18px, auto;
}
.auth-card { width: min(440px, 100%); padding: 30px; }
.auth-card.wide { width: min(760px, 100%); }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.auth-card h1 { font-size: 22px; margin-bottom: 4px; }
.auth-card .lead { color: var(--text-2); margin-bottom: 22px; }
.auth-foot { margin-top: 18px; text-align: center; font-size: 13px; color: var(--text-3); }
.auth-foot a { color: var(--text-2); }
.auth-foot a:hover { color: var(--text); }
.req-list { display: grid; gap: 6px; font-size: 13px; }
.req-list div { display: flex; gap: 8px; align-items: center; }
.req-list .ok { color: var(--green); }
.req-list .bad { color: var(--red); }
.req-list .opt { color: var(--orange); }
pre.code { background: var(--input); border: 1px solid var(--line-2); border-radius: 12px; padding: 14px; overflow: auto; font: 12px/1.5 var(--mono); color: var(--text-2); max-height: 360px; }

/* ───────────────────────── Portal ───────────────────────── */
.portal-hero { padding: 26px; display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; overflow: hidden;
  background: radial-gradient(600px 220px at 100% 0%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 70%), var(--card); }
.portal-hero h2 { font-size: 24px; }
.portal-hero p { color: var(--text-2); max-width: 560px; margin-top: 6px; }
.preview-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: color-mix(in oklab, var(--amber) 12%, var(--card)); border: 1px solid color-mix(in oklab, var(--amber) 35%, transparent); font-size: 13px; }
.preview-banner .i { color: var(--amber); }
.preview-banner a { margin-left: auto; }
.proj-card { display: flex; flex-direction: column; gap: 14px; padding: 18px; }
.proj-card:hover { border-color: var(--line-3); }
.proj-card .top { display: flex; gap: 12px; align-items: center; }
.proj-card h4 { font-size: 15px; font-weight: 500; }
.proj-card .top span { font-size: 12.5px; color: var(--text-3); }
.kv { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px 12px; font-size: 13.5px; }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; min-width: 0; word-wrap: break-word; }

/* ───────────────────────── Responsive ───────────────────────── */
@media (max-width: 1200px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-main { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 1024px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; z-index: 80; left: 0; top: 0; bottom: 0; width: 290px; background: var(--shell);
    transform: translateX(-100%); transition: transform .22s ease; box-shadow: 20px 0 60px rgba(0, 0, 0, .5);
  }
  body.nav-open .sidebar { transform: none; }
  body.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 70; }
  .btn.menu-btn { display: inline-flex; }
  .main { margin: 8px; border-radius: 20px; }
  .grid-main, .grid-dash, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .nav-arrows { display: none; }
}
@media (max-width: 720px) {
  body { font-size: 14px; }
  .main { margin: 0; border-radius: 0; border: 0; min-height: 100vh; }
  .topbar { margin: 8px 8px 0; border-radius: 14px; }
  .page { padding: 14px 8px 32px; }
  .grid-2, .grid-4, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid .span-2 { grid-column: auto; }
  .card-head, .card-body, .card-foot, .card-pad { padding-left: 16px; padding-right: 16px; }
  .list-item, .feed-item { padding-left: 16px; padding-right: 16px; }
  .chat { grid-template-columns: minmax(0, 1fr); }
  .chat-side { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 8px; }
  .chat-side .nav-label { display: none; }
  .chan { white-space: nowrap; }
  .hbar { grid-template-columns: 96px minmax(0, 1fr) auto; }
  .cal-cell { min-height: 74px; padding: 4px; }
  .cal-ev { font-size: 10.5px; padding: 2px 4px; }
  .cal-ev .avatar { display: none; }
  .crumbs .trail { display: none; }
  .crumbs .sep { display: none; }
  .stat-value { font-size: 26px; }
  .approval-actions { grid-template-columns: 1fr; }
  .prop { grid-template-columns: 96px minmax(0, 1fr); }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dd { margin-bottom: 8px; }
  .page-head h2 { font-size: 20px; }
  .filters .input, .filters .select, .filters .input[type=search] { min-width: 0; flex: 1 1 140px; }
  .hide-sm { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ───────────────────────── Layout safety ─────────────────────────
   Long client names, emails, links and file names wrap instead of spilling out of their box. */
body { overflow-wrap: anywhere; }
table { overflow-wrap: normal; }
.table .title-cell, .table .sub, .table td a { overflow-wrap: anywhere; }
.main, .page, .card, .card-body, .card-head .titles, .grid > *, .stack > *, .notice > div, .dd-menu, dialog, .titles, .grow, .main-col, .meta-item, .ftext, .hb, blockquote { min-width: 0; }
.input, .select, .textarea { max-width: 100%; min-width: 0; }
.select { text-overflow: ellipsis; }
.page-head > *, .page-actions, .filters { min-width: 0; max-width: 100%; }
.filters .input, .filters .select { min-width: min(140px, 100%); max-width: 100%; }
.filters .input[type=search] { min-width: min(220px, 100%); }
img, video, iframe { max-width: 100%; }
.btn { white-space: normal; height: auto; min-height: 38px; line-height: 1.25; text-align: center; padding-top: 5px; padding-bottom: 5px; }
.btn-sm { min-height: 30px; padding-top: 4px; padding-bottom: 4px; }
.btn-lg { min-height: 46px; padding-top: 8px; padding-bottom: 8px; }
.btn-icon { height: 38px; padding: 0; }
.btn-icon.btn-sm { height: 30px; }
.btn .i, .badge .i, .meta-item .i { flex: none; }
.badge { max-width: 100%; white-space: normal; height: auto; min-height: 24px; padding-top: 2px; padding-bottom: 2px; line-height: 1.3; }
.badge i { flex: none; }
.dd-menu { max-width: calc(100vw - 16px); }
.dd-menu a, .dd-menu button { min-width: 0; }
.tl-day { padding: 8px 0 8px 6px; line-height: 1.25; overflow: hidden; text-overflow: clip; white-space: nowrap; }
.tl-day .dw { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .02em; }
.tl-day b { display: block; font-weight: 500; font-size: 13px; color: var(--text-2); }
.tl-day.today b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; margin-left: -4px; border-radius: 7px; background: var(--accent); color: #fff; font-weight: 600; }
.chip { height: auto; min-height: 26px; max-width: 100%; padding-top: 2px; padding-bottom: 2px; line-height: 1.3; }
.chip .avatar { flex: none; }
.main-col .badge, .t-title .badge, .titles h2 .badge, .titles h3 .badge, td .badge, .count { white-space: nowrap; }
.list-item .main-col b.tline { display: flex; align-items: center; gap: 6px; }
.list-item .main-col b.tline .tt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-item .main-col b.tline .badge { flex: none; }
.list-item .main-col b.tline .badge { max-width: none; }
@media (max-width: 560px) {
  /* phone: title gets its own full line, status / due date / people / priority go underneath */
  .list-item { flex-wrap: wrap; row-gap: 8px; }
  .list-item > .main-col { flex: 1 1 100%; order: -1; }
}
/* Controls never break in the middle of a word — they keep their shape and wrap between words */
.btn, .badge, .chip, .tag, .check, .seg, .tabs, .count, .pct, .switch, kbd, th { overflow-wrap: break-word; }
/* Breadcrumbs: one line, long names end in "…" */
.crumbs .trail { min-width: 0; flex: 0 1 auto; overflow: hidden; }
.crumbs .trail > a, .crumbs .trail > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; min-width: 0; }
.crumbs .trail > .i { flex: none; }
.crumbs h1 { min-width: 0; flex: 1 1 auto; }
.crumbs .trail { max-width: 48%; }
.crumbs .trail > a, .crumbs .trail > span { flex: 0 10 auto; }
.crumbs .trail > :first-child { flex-shrink: 1; min-width: 3.5em; }
.crumbs h1 { flex: 1 1 0; }
.chat-compose .textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Tables: text cells wrap (long titles / emails / links), numbers and badges stay on one line */
.table td { overflow-wrap: break-word; }
.table td.title-cell, .table td:first-child, .table td .sub, .table td a, .table td .truncate-2 { overflow-wrap: anywhere; }
.table td.nowrap, .table td .badge, .table td .tag, .table td .num { overflow-wrap: normal; }
/* Names inside table cells stay on one line and end in "…" instead of stretching the table */
.table td .truncate { display: inline-block; max-width: 200px; vertical-align: middle; }
.table td .row { min-width: 0; }
/* Secondary columns step aside when the table's own area gets narrow */
.table-wrap { container-type: inline-size; }
@container (max-width: 1080px) { .table .hide-sm, .table .hide-md { display: none; } }
@container (max-width: 880px) {
  .table th { white-space: normal; }
  .table td, .table th { padding-left: 10px; padding-right: 10px; }
  .table .title-cell { min-width: 160px; }
  .table td .truncate { max-width: 130px; }
}
@container (max-width: 520px) {
  .table td, .table th { padding-left: 8px; padding-right: 8px; font-size: 12.5px; }
  .table .title-cell { min-width: 120px; }
}

/* ───────────────────────── Client progress updates ───────────────────────── */
.stage-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 3px 11px 3px 9px; border-radius: 99px; font-size: 12.5px; font-weight: 500; line-height: 1.3; max-width: 100%;
  color: var(--text); background: color-mix(in oklab, var(--accent) 16%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 38%, transparent); overflow-wrap: break-word; }
.stage-chip .i { width: 13px; height: 13px; flex: none; color: var(--accent-2, var(--accent)); }
.stage-chip.sm { min-height: 20px; padding: 1px 8px 1px 6px; font-size: 11.5px; gap: 4px; }
.stage-chip.sm .i { width: 11px; height: 11px; }
.list-item .main-col b.tline .stage-chip { flex: none; max-width: 45%; white-space: nowrap; overflow: hidden; }
.list-item .main-col b.tline .stage-chip span { overflow: hidden; text-overflow: ellipsis; }
.tcard .t-stage { display: block; margin: -2px 0 8px; }
.stage-now { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); }
.stage-note { font-size: 13px; color: var(--text-2); line-height: 1.5; margin-top: 4px; }
.stage-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.stage-picks label { position: relative; cursor: pointer; }
.stage-picks input { position: absolute; opacity: 0; pointer-events: none; }
.stage-picks span { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 5px 11px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--card-2); font-size: 12.5px; color: var(--text-2); line-height: 1.3; }
.stage-picks span .i { width: 13px; height: 13px; }
.stage-picks label:hover span { border-color: var(--line-3); color: var(--text); }
.stage-picks input:checked + span { background: color-mix(in oklab, var(--accent) 18%, transparent); border-color: color-mix(in oklab, var(--accent) 60%, transparent); color: var(--text); }
.stage-picks input:focus-visible + span { box-shadow: var(--ring); }
.stage-form .custom-stage { display: none; }
.stage-form:has(input[value="__custom"]:checked) .custom-stage { display: block; }
.stage-hist > summary { list-style: none; margin-bottom: 10px; }
.stage-hist > summary::-webkit-details-marker { display: none; }
.stage-timeline { display: flex; flex-direction: column; }
.st-item { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 12px; position: relative; padding-bottom: 14px; }
.st-item::before { content: ""; position: absolute; left: 6px; top: 14px; bottom: 0; width: 2px; background: var(--line); }
.st-item:last-child { padding-bottom: 0; }
.st-item:last-child::before { display: none; }
.st-dot { width: 14px; height: 14px; border-radius: 50%; margin-top: 4px; background: var(--card-3, var(--card-2)); border: 2px solid var(--line-3, var(--line-2)); }
.st-item.latest .st-dot { background: var(--accent); border-color: color-mix(in oklab, var(--accent) 45%, #fff); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent); }
.st-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.st-body small { font-size: 11.5px; color: var(--text-3); }
.st-task { font-size: 12.5px; color: var(--text-2); }
a.st-task:hover { color: var(--text); text-decoration: underline; }
.stage-banner { display: flex; gap: 12px; align-items: flex-start; margin: 0 20px 20px; padding: 14px 16px; border-radius: 14px;
  background: color-mix(in oklab, var(--accent) 9%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 28%, transparent); }
.cell-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.table td .stage-chip { white-space: nowrap; max-width: 200px; overflow: hidden; }
.table td .stage-chip span { overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   v6 · Project folders, deliverable reviews, notifications, mobile app, avatars
   ========================================================================== */

/* ───────── Avatars with pictures ───────── */
.avatar.has-img { background: var(--card-3); overflow: hidden; padding: 0; }
.avatar.has-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.avatar-xl { --s: 96px; }
.ws-mark.has-img { padding: 0; overflow: hidden; background: var(--card-3); }
.ws-mark.has-img img { width: 100%; height: 100%; object-fit: cover; }

/* ───────── Progress (live) ───────── */
.progress > i { transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.progress.live > i { background: linear-gradient(90deg, color-mix(in oklab, var(--green) 70%, var(--teal)), var(--green)); }
.prog-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.prog-head .pct-big { font-size: 22px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.prog-head .pct-big small { font-size: 12px; font-weight: 400; color: var(--text-3); margin-left: 4px; letter-spacing: 0; }
.prog-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 9px; font-size: 12px; color: var(--text-3); }
.prog-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.prog-legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.prog-legend b { color: var(--text-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.prog-mode { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-3); border: 1px solid var(--line-2); border-radius: 99px; padding: 1px 8px; }
.range { width: 100%; accent-color: var(--accent); }

/* ───────── Folder tiles ───────── */
.folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.folder-grid.sm { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.folder-tile {
  --fc: var(--accent); position: relative; display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 14px; border-radius: 20px;
  background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--card-shadow); transition: border-color .2s, transform .2s;
}
.folder-tile:hover { border-color: color-mix(in oklab, var(--fc) 45%, var(--line-2)); transform: translateY(-2px); }
.folder-art { position: relative; aspect-ratio: 16 / 10.5; margin: 6px 4px 0; }
.folder-art .back {
  position: absolute; inset: 9% 0 0 0; border-radius: 14px;
  background: linear-gradient(170deg, color-mix(in oklab, var(--fc) 62%, #000), color-mix(in oklab, var(--fc) 40%, #000));
}
.folder-art .back::before { content: ""; position: absolute; left: 0; top: -11%; width: 40%; height: 16%; border-radius: 10px 12px 0 0; background: color-mix(in oklab, var(--fc) 62%, #000); }
.folder-art .sheet {
  position: absolute; left: 12%; right: 12%; top: 4%; bottom: 30%; border-radius: 9px; background: #F4F4F5 center / cover no-repeat;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .55); transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.folder-art .sheet:nth-of-type(2) { transform: rotate(-6deg) translate(-6%, 2%); background-color: #E4E4E7; }
.folder-art .sheet:nth-of-type(3) { transform: rotate(5deg) translate(7%, 1%); background-color: #D4D4D8; }
.folder-art .sheet.blank::after { content: ""; position: absolute; left: 14%; right: 30%; top: 18%; height: 7%; border-radius: 4px; background: rgba(0, 0, 0, .12); box-shadow: 0 14px 0 rgba(0, 0, 0, .08), 0 28px 0 rgba(0, 0, 0, .08); }
.folder-tile:hover .folder-art .sheet:nth-of-type(1) { transform: translateY(-10%); }
.folder-tile:hover .folder-art .sheet:nth-of-type(2) { transform: rotate(-9deg) translate(-12%, -6%); }
.folder-tile:hover .folder-art .sheet:nth-of-type(3) { transform: rotate(9deg) translate(13%, -6%); }
.folder-art .front {
  position: absolute; left: 0; right: 0; bottom: 0; height: 50%; border-radius: 14px;
  background: linear-gradient(165deg, color-mix(in oklab, var(--fc) 82%, #fff), var(--fc) 60%, color-mix(in oklab, var(--fc) 80%, #000));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 -8px 22px -10px rgba(0, 0, 0, .55);
  display: flex; align-items: flex-end; justify-content: space-between; padding: 10px 12px; color: #fff;
}
.folder-art .front .fl { font: 600 11px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; opacity: .9; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.folder-art .front .i { width: 18px; height: 18px; opacity: .85; }
.folder-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 0 2px; }
.folder-meta b { font-weight: 500; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-meta span { font-size: 12.5px; color: var(--text-3); }
.folder-flag { position: absolute; top: 10px; left: 10px; z-index: 2; }
.folder-tile.sm { padding: 10px; gap: 8px; border-radius: 16px; }
.folder-tile.sm .folder-art { aspect-ratio: 16 / 9; margin: 4px 2px 0; }
.folder-tile.sm .folder-meta b { font-size: 14px; }
.folder-tile.is-internal .folder-art .front { filter: saturate(.25); }
.folder-tile .tile-menu { position: absolute; top: 8px; right: 8px; z-index: 3; }
.folder-tile.new { border-style: dashed; align-items: center; justify-content: center; color: var(--text-2); min-height: 170px; background: transparent; box-shadow: none; cursor: pointer; text-align: center; }
.folder-tile.new:hover { color: var(--text); background: var(--accent-soft); }
.folder-tile.new .i { width: 26px; height: 26px; }

/* Folder path bar */
.pathbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line-2); font-size: 13.5px; }
.pathbar a, .pathbar span { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pathbar a:hover { color: var(--text); }
.pathbar .cur { color: var(--text); font-weight: 500; }
.pathbar .i { width: 15px; height: 15px; flex: none; }
.pathbar .sepi { color: var(--text-3); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--card); color: var(--text-2); font-size: 13px; white-space: nowrap; }
.chips a:hover { color: var(--text); border-color: var(--line-3); }
.chips a.on { background: var(--card-3); color: var(--text); border-color: var(--line-3); }
.chips a .n { font-size: 11px; padding: 1px 7px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-2); }
[data-theme="light"] .chips a .n { color: var(--accent); }

/* ───────── Deliverable cards ───────── */
.fcard { transition: border-color .2s; }
.fcard:hover { border-color: var(--line-3); }
a.fthumb { color: var(--text-3); }
.fthumb .review-pin { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; justify-content: flex-start; pointer-events: none; }
.review-badge { gap: 5px; }
.review-badge .i { width: 13px; height: 13px; }
.fthumb .review-badge { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: color-mix(in oklab, var(--c) 30%, rgba(0, 0, 0, .55)); color: #fff; border-color: color-mix(in oklab, var(--c) 60%, transparent); }
.fcard.is-pending { border-color: color-mix(in oklab, var(--violet) 45%, var(--line-2)); box-shadow: var(--card-shadow), 0 0 0 1px color-mix(in oklab, var(--violet) 18%, transparent); }
.fcard.is-changes { border-color: color-mix(in oklab, var(--red) 40%, var(--line-2)); }
.fmeta .cc { display: inline-flex; gap: 4px; align-items: center; }
.btn-review { background: color-mix(in oklab, var(--violet) 18%, var(--card-2)); border-color: color-mix(in oklab, var(--violet) 40%, transparent); color: var(--text); }
.btn-review:hover { background: color-mix(in oklab, var(--violet) 28%, var(--card-2)); }

/* ───────── File page ───────── */
.file-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.file-stage { position: relative; display: grid; place-items: center; min-height: 320px; padding: 18px; border-radius: 20px; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #1d1d21, #0b0b0d 75%); border: 1px solid var(--line-2); }
[data-theme="light"] .file-stage { background: radial-gradient(circle at 50% 40%, #f4f4f6, #dedee3 80%); }
.file-stage .stage-tools { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; z-index: 4; }
.file-stage .stage-tools .btn { backdrop-filter: blur(10px); background: rgba(20, 20, 22, .6); color: #fff; border-color: rgba(255, 255, 255, .14); }
.pin-wrap { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.pin-wrap img { max-height: 72vh; width: auto; max-width: 100%; border-radius: 8px; box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .8); user-select: none; -webkit-user-drag: none; }
.pin-wrap.can-pin img { cursor: crosshair; }
.pin {
  position: absolute; z-index: 3; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg);
  display: grid; place-items: center; border: 2px solid #fff; background: var(--accent); color: #fff; font: 700 12px/1 var(--font); cursor: pointer; padding: 0;
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .6); transition: transform .15s;
}
.pin > span { transform: rotate(45deg); }
.pin:hover, .pin.hl { transform: rotate(-45deg) scale(1.18); }
.pin.client { background: var(--violet); }
.pin.draft { background: var(--amber); color: #1a1205; animation: pin-pulse 1.4s ease-in-out infinite; }
@keyframes pin-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--amber) 60%, transparent); } 50% { box-shadow: 0 0 0 10px transparent; } }
.file-stage video { max-height: 72vh; width: 100%; border-radius: 10px; background: #000; }
.file-stage iframe.pdf { width: 100%; height: 75vh; border: 0; border-radius: 10px; background: #fff; }
.file-stage .embed { max-width: 960px; }
.file-stage .doc-ph { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--text-2); text-align: center; padding: 30px; }
.file-stage .doc-ph .tile { width: 70px; height: 70px; border-radius: 20px; }
.file-stage .doc-ph .tile .i { width: 30px; height: 30px; }
.tc-bar { position: relative; height: 26px; margin: 10px 2px 0; border-radius: 8px; background: var(--card-2); border: 1px solid var(--line); }
.tc-bar::before { content: "Comments on the timeline"; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--text-3); pointer-events: none; }
.tc-bar .tc { position: absolute; top: 3px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--violet); color: #fff; font: 700 10px/18px var(--font); text-align: center; border: 2px solid var(--card); cursor: pointer; padding: 0; }
.tc-chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 99px; background: color-mix(in oklab, var(--violet) 18%, transparent); color: var(--text); font: 600 11.5px/1 var(--mono); border: 1px solid color-mix(in oklab, var(--violet) 40%, transparent); cursor: pointer; }
.pin-chip { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--accent); color: #fff; font: 700 11px/1 var(--font); }
.pin-chip.client { background: var(--violet); }
.ver-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ver-chips a { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--card); color: var(--text-2); font: 500 12.5px/1 var(--mono); }
.ver-chips a.on { background: var(--card-3); color: var(--text); border-color: var(--line-3); }
.ver-chips a i { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--gray)); }
.file-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.file-title h2 { font-size: 22px; letter-spacing: -.015em; }
.file-title p { color: var(--text-3); font-size: 13px; margin-top: 3px; }

.review-card { border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--line-2); background: var(--card); box-shadow: var(--card-shadow); }
.review-card.pending { border-color: color-mix(in oklab, var(--violet) 40%, transparent); background: linear-gradient(180deg, color-mix(in oklab, var(--violet) 10%, var(--card)), var(--card) 70%); }
.review-card.approved { border-color: color-mix(in oklab, var(--green) 40%, transparent); background: linear-gradient(180deg, color-mix(in oklab, var(--green) 10%, var(--card)), var(--card) 70%); }
.review-card.changes_requested { border-color: color-mix(in oklab, var(--red) 40%, transparent); background: linear-gradient(180deg, color-mix(in oklab, var(--red) 9%, var(--card)), var(--card) 70%); }
.review-card h3 { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 9px; }
.review-card h3 .ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in oklab, var(--c) 20%, transparent); color: var(--c); flex: none; }
.review-card h3 .ic .i { width: 17px; height: 17px; }
.review-card .sub { color: var(--text-2); font-size: 13px; line-height: 1.5; }
.review-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.review-actions .btn { min-height: 46px; font-size: 14px; white-space: nowrap; padding-left: 10px; padding-right: 10px; }
.review-form { display: none; flex-direction: column; gap: 8px; }
.review-form.open { display: flex; }
.review-quote { padding: 10px 12px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); font-size: 13px; line-height: 1.55; }
.thread-kind { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 99px; color: var(--c); background: color-mix(in oklab, var(--c) 14%, transparent); }
.thread-kind .i { width: 12px; height: 12px; }
.comment.kind-approval .comment-body { border-color: color-mix(in oklab, var(--green) 35%, transparent); background: color-mix(in oklab, var(--green) 8%, var(--card-2)); }
.comment.kind-changes .comment-body { border-color: color-mix(in oklab, var(--red) 35%, transparent); background: color-mix(in oklab, var(--red) 7%, var(--card-2)); }
.comment.hl .comment-body { box-shadow: 0 0 0 2px var(--accent); }
.composer .pin-note { display: none; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text); padding: 8px 10px; border-radius: 10px; background: color-mix(in oklab, var(--amber) 14%, transparent); border: 1px solid color-mix(in oklab, var(--amber) 40%, transparent); }
.composer .pin-note.on { display: flex; }
.composer .pin-note .btn { margin-left: auto; }
.hint-line { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); }
.hint-line .i { width: 14px; height: 14px; }

/* ───────── Notifications panel ───────── */
.ntf-list { display: flex; flex-direction: column; }
.ntf-day { padding: 14px 20px 6px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.ntf { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 20px; border-top: 1px solid var(--line); }
.ntf:hover { background: color-mix(in oklab, var(--card-2) 55%, transparent); }
.ntf.unread { background: color-mix(in oklab, var(--accent) 6%, transparent); }
.ntf.unread::before { content: ""; position: absolute; left: 8px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--accent); }
.ntf .nic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: color-mix(in oklab, var(--c, var(--accent)) 16%, var(--card-2)); color: var(--c, var(--accent)); border: 1px solid color-mix(in oklab, var(--c, var(--accent)) 30%, transparent); }
.ntf .nic .i { width: 19px; height: 19px; }
.ntf .nb b { display: block; font-weight: 500; font-size: 14px; }
.ntf .nb span { display: block; color: var(--text-2); font-size: 13px; margin-top: 2px; white-space: pre-line; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.ntf .nt { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.push-card { display: flex; flex-direction: column; gap: 12px; }
.push-state { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line); font-size: 13px; }
.push-state .dotx { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--gray)); box-shadow: 0 0 0 4px color-mix(in oklab, var(--c, var(--gray)) 20%, transparent); flex: none; }
.device-row { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 8px 0; border-top: 1px solid var(--line); }
.device-row .i { color: var(--text-3); }

/* ───────── Install the app ───────── */
.install-card { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 16px; border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--line-2));
  background: radial-gradient(240px 120px at 0% 0%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 70%), var(--card); }
.install-card img { width: 42px; height: 42px; border-radius: 11px; flex: none; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .6); }
.install-card b { display: block; font-weight: 600; font-size: 13.5px; }
.install-card span { display: block; font-size: 12px; color: var(--text-2); line-height: 1.35; }
.install-card .btn { margin-left: auto; flex: none; }
.ios-steps { display: flex; flex-direction: column; gap: 12px; counter-reset: st; }
.ios-steps li { list-style: none; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: center; font-size: 14px; }
.ios-steps li::before { counter-increment: st; content: counter(st); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-2); font-weight: 600; }
.ios-steps ol { margin: 0; padding: 0; }
.ios-steps .i { width: 16px; height: 16px; vertical-align: -3px; }
.only-standalone { display: none !important; }
html.standalone .only-standalone { display: revert !important; }
html.standalone .hide-standalone { display: none !important; }

/* ───────── Mobile bottom tab bar (portal) ───────── */
.tabbar { display: none; }
@media (max-width: 720px) {
  body.portal .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in oklab, var(--shell) 88%, transparent);
    backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-top: 1px solid var(--line-2);
  }
  .tabbar a, .tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 52px; border-radius: 14px;
    color: var(--text-3); font-size: 10.5px; font-weight: 500; background: none; border: 0; cursor: pointer; letter-spacing: .01em; }
  .tabbar .i { width: 22px; height: 22px; }
  .tabbar .on { color: var(--text); }
  .tabbar .on .i { color: var(--accent-2); }
  .tabbar .tb-badge { position: absolute; top: 4px; left: 50%; margin-left: 6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: var(--red); color: #fff; font: 700 10px/17px var(--font); text-align: center; box-shadow: 0 0 0 2px var(--shell); }
  body.portal .page { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  body.portal .toasts { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .file-layout { grid-template-columns: minmax(0, 1fr); }
  .file-stage { padding: 8px; min-height: 220px; border-radius: 16px; }
  .pin-wrap img { max-height: 62vh; }
  .folder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .folder-grid.sm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .folder-tile { padding: 10px; border-radius: 16px; gap: 8px; }
  .folder-meta b { font-size: 13.5px; }
  .folder-flag { top: 6px; left: 6px; }
  .folder-flag .badge { font-size: 10.5px; padding: 0 6px; min-height: 20px; }
  .files-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fbody { padding: 8px 10px 10px; }
  .fbody .factions .btn span.lbl { display: none; }
  .review-actions { grid-template-columns: 1fr 1fr; }
  .ntf { padding: 12px 14px; grid-template-columns: 36px minmax(0, 1fr); }
  .ntf .nt { grid-column: 2; }
  .ntf .nic { width: 36px; height: 36px; border-radius: 11px; }
  .pathbar { padding: 8px 10px; font-size: 13px; }
  .pathbar a, .pathbar span { max-width: 150px; }
}
@media (display-mode: standalone) { .topbar { padding-top: max(10px, env(safe-area-inset-top)); } }

/* ───────── Owner panel: client activity ───────── */
.act-day { position: sticky; top: 0; z-index: 2; padding: 10px 20px; font-size: 12px; font-weight: 500; color: var(--text-2); background: color-mix(in oklab, var(--card) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; }
.act-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; padding: 12px 20px; align-items: start; border-bottom: 1px solid var(--line); }
.act-row:last-child { border-bottom: 0; }
.act-row:hover { background: color-mix(in oklab, var(--card-2) 50%, transparent); }
.act-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in oklab, var(--c) 15%, var(--card-2)); color: var(--c); border: 1px solid color-mix(in oklab, var(--c) 30%, transparent); }
.act-ic .i { width: 16px; height: 16px; }
.act-main { min-width: 0; font-size: 13.5px; line-height: 1.5; }
.act-main .who { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; vertical-align: middle; }
.act-main .meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: 12px; color: var(--text-3); align-items: center; }
.act-main .meta .i { width: 13px; height: 13px; }
.act-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.kind-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: 600; color: var(--c); background: color-mix(in oklab, var(--c) 13%, transparent); }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 color-mix(in oklab, var(--green) 60%, transparent); animation: live 2s infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--green) 55%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.glance-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.glance-row:last-child { border-bottom: 0; }
.glance-row .sub { display: block; font-size: 12px; color: var(--text-3); }
@media (max-width: 720px) {
  .act-row { grid-template-columns: 30px minmax(0, 1fr); padding: 12px 14px; }
  .act-side { grid-column: 2; flex-direction: row; align-items: center; }
  .act-day { padding: 10px 14px; }
}

/* ───────── Avatar picker ───────── */
.av-hero { display: flex; align-items: center; gap: 16px; }
.av-hero .avatar-xl { box-shadow: 0 0 0 4px var(--card), 0 0 0 5px var(--line-2); }
.av-change { position: relative; display: inline-block; border-radius: 50%; cursor: pointer; border: 0; padding: 0; background: none; }
.av-change .cam { position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; border: 3px solid var(--card); }
.av-change .cam .i { width: 14px; height: 14px; }
.av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; max-height: 52vh; overflow-y: auto; padding: 4px; }
.av-opt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px 8px; border-radius: 16px; border: 1px solid var(--line); background: var(--card-2); cursor: pointer; text-align: center; color: var(--text-2); font-size: 11.5px; line-height: 1.25; transition: border-color .15s, background .15s, transform .15s; }
.av-opt img { width: 64px; height: 64px; border-radius: 50%; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.av-opt:hover { border-color: var(--line-3); color: var(--text); }
.av-opt:hover img { transform: rotate(-8deg) scale(1.08); }
.av-opt input { position: absolute; opacity: 0; pointer-events: none; }
.av-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.av-opt:has(input:focus-visible) { box-shadow: var(--ring); }
.av-drop { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px; border: 1.5px dashed var(--line-3); border-radius: 18px; text-align: center; color: var(--text-2); cursor: pointer; }
.av-drop:hover, .av-drop.over { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.av-drop input { display: none; }
.av-preview { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--card), 0 0 0 5px var(--line-2); }
.av-tabs { margin-bottom: 14px; }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg) scale(1.08); } 75% { transform: rotate(10deg) scale(1.08); } }
.av-opt.spin img { animation: wiggle .5s ease-in-out 2; }
[data-theme="light"] .btn-success { color: #fff; background: var(--green); }
[data-theme="light"] .btn-success:hover { background: color-mix(in oklab, var(--green) 88%, #000); }
@media (max-width: 1024px) { .ntf-aside { order: -1; } }

/* ==========================================================================
   v7 — folders you can always see, client files hub, feedback board, email log
   ========================================================================== */

/* Folder header (inside a folder) */
.folder-head { --fc: var(--accent); display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: linear-gradient(100deg, color-mix(in oklab, var(--fc) 14%, var(--card)), var(--card) 60%); border: 1px solid color-mix(in oklab, var(--fc) 30%, var(--line-2)); }
.folder-head .fh-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(160deg, color-mix(in oklab, var(--fc) 80%, #fff), var(--fc)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.folder-head .fh-icon .i { width: 20px; height: 20px; }
.folder-head .fh-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.folder-head .fh-text b { font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-head .fh-text span { font-size: 12.5px; color: var(--text-3); }

/* Just-created folder */
.folder-tile.is-new { border-color: var(--fc); box-shadow: 0 0 0 3px color-mix(in oklab, var(--fc) 35%, transparent), var(--card-shadow); animation: newfolder 1.6s ease-out 2; }
@keyframes newfolder { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--fc) 60%, transparent), var(--card-shadow); } 70% { box-shadow: 0 0 0 12px transparent, var(--card-shadow); } 100% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--fc) 35%, transparent), var(--card-shadow); } }
.new-badge { --c: var(--green); color: #fff; background: color-mix(in oklab, var(--green) 70%, #000); border: 0; height: 22px; }
.new-badge .i { width: 12px; height: 12px; }

/* Drop files onto a folder tile */
.folder-tile .drop-hint { position: absolute; inset: 0; z-index: 4; display: none; align-items: center; justify-content: center; gap: 8px; border-radius: inherit; background: color-mix(in oklab, var(--fc) 30%, rgba(0, 0, 0, .55)); color: #fff; font-weight: 600; font-size: 14px; pointer-events: none; border: 2px dashed #fff; }
.folder-tile .drop-hint .i { width: 18px; height: 18px; }
.folder-tile.drop-over .drop-hint { display: flex; }
.folder-tile .up-mini { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 5; height: 5px; border-radius: 4px; background: rgba(0, 0, 0, .4); overflow: hidden; }
.folder-tile .up-mini i { display: block; height: 100%; width: 0; background: var(--green); transition: width .2s; }

/* Path bar: keep the current folder readable on phones */
@media (max-width: 720px) {
  .pathbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .pathbar::-webkit-scrollbar { display: none; }
  .pathbar a { max-width: 110px; flex: none; }
  .pathbar .cur { max-width: none; flex: none; }
  .folder-head { padding: 10px; gap: 10px; }
  .folder-head .btn-primary span { display: none; }
}
.show-sm { display: none !important; }
@media (max-width: 720px) { .show-sm { display: flex !important; } }
.work-list { display: flex; flex-direction: column; padding-top: 4px; }
.work-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--text); font-size: 13.5px; }
.work-row:last-child { border-bottom: 0; }
.work-row b { font-weight: 500; }
.work-row:hover b { color: var(--accent-2); }
.work-row .i { width: 13px; height: 13px; vertical-align: -2px; }
@media (max-width: 720px) { .work-row { flex-direction: column; align-items: flex-start; gap: 6px; } }

/* ───────── Feedback board ───────── */
.fb-steps { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-steps > span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 99px; background: var(--card); border: 1px solid var(--line-2); font-size: 12.5px; color: var(--text-2); }
.fb-steps b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; }
.fb-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.fb-draft { position: sticky; top: 92px; }
@media (max-width: 1024px) { .fb-layout { grid-template-columns: 1fr; } .fb-draft { position: static; } }
.fb-locked { display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.fb-locked .i { width: 16px; height: 16px; }
.fb-source { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); font-size: 13px; flex-wrap: wrap; }
.fb-source .i { width: 15px; height: 15px; }
.fb-drop .i { width: 28px; height: 28px; }
.fb-drop.over, .fb-composer.paste-flash .fb-drop { border-color: var(--accent); background: var(--accent-soft); }
.fb-canvas { position: relative; display: block; width: 100%; line-height: 0; border-radius: 12px; overflow: hidden; background: repeating-conic-gradient(var(--card-2) 0 25%, var(--card) 0 50%) 0 0 / 16px 16px; border: 1px solid var(--line-2); padding: 0; cursor: crosshair; }
.fb-canvas img { display: block; width: 100%; max-height: 62vh; object-fit: contain; user-select: none; -webkit-user-drag: none; }
button.fb-canvas { cursor: zoom-in; }
.fb-canvas .pin, .fb-thumb .pin { position: absolute; }
.fb-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fb-item { display: grid; grid-template-columns: 26px 88px minmax(0, 1fr); gap: 10px; padding: 10px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line); align-items: start; }
.fb-item:not(:has(.fb-thumb)) { grid-template-columns: 26px minmax(0, 1fr); }
.fb-num { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--card-3); font-size: 12px; font-weight: 600; flex: none; }
.fb-thumb { width: 88px; display: flex; justify-content: center; }
.fb-shotbox { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: var(--card); cursor: zoom-in; line-height: 0; }
.fb-shotbox img { display: block; width: 100%; height: 100%; }
.fb-thumb .pin { width: 18px; height: 18px; margin: -9px 0 0 -9px; font-size: 9px; border-width: 1.5px; }
.fb-shotwrap { display: flex; justify-content: center; padding: 12px 12px 0; }
.fb-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 13.5px; }
.fb-body p { overflow-wrap: anywhere; }
.fb-kind { align-self: flex-start; gap: 4px; }
.fb-kind .i { width: 12px; height: 12px; }
.fb-edit summary { font-size: 12px; cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 4px; }
.fb-edit summary .i { width: 12px; height: 12px; }
.fb-send { padding-top: 6px; border-top: 1px solid var(--line); }
.fb-sent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.fb-sent { overflow: hidden; }
.fb-sent.is-done { opacity: .78; }
.fb-staff .fb-item { grid-template-columns: 26px 120px minmax(0, 1fr) auto; }
.fb-staff .fb-item:not(:has(.fb-thumb)) { grid-template-columns: 26px minmax(0, 1fr) auto; }
.fb-staff .fb-thumb { width: 120px; }
.fb-staff .fb-item.is-done .fb-body p { text-decoration: line-through; color: var(--text-3); }
@media (max-width: 560px) {
  .fb-item, .fb-staff .fb-item { grid-template-columns: 26px minmax(0, 1fr); }
  .fb-item .fb-thumb { grid-column: 2; width: 100%; }
  .fb-staff .fb-item > form { grid-column: 2; }
}
.fb-cta { display: flex; align-items: center; gap: 12px; color: var(--text); transition: border-color .15s; }
.fb-cta:hover { border-color: color-mix(in oklab, var(--pink) 45%, var(--line-2)); }
.fb-cta > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; flex: 1; font-size: 13.5px; }
.fb-cta > span:nth-child(2) .faint { font-size: 12.5px; }
.feed-item.is-client { background: color-mix(in oklab, var(--pink) 5%, transparent); }
.feed-item .kind-tag { height: 18px; font-size: 10.5px; margin-right: 2px; }
.card-head .chips { margin-left: auto; }

/* ───────── Account security ───────── */
.setup-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; color: var(--text-2); }
.setup-steps b { color: var(--text); font-weight: 500; }
.qr-box { width: 196px; height: 196px; margin: 10px 0 6px; padding: 6px; background: #fff; border-radius: 14px; }
.qr-box svg { width: 100%; height: 100%; display: block; }
.otp-input { font: 600 18px/1 var(--mono); letter-spacing: .18em; text-align: center; }
.codes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 10px 0; }
.codes-grid code { padding: 6px 8px; border-radius: 8px; background: var(--card); border: 1px solid var(--line-2); text-align: center; user-select: all; }
.check-list { display: flex; flex-direction: column; }
.check-row { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.check-row:last-child { border-bottom: 0; }
.check-row .ok { color: var(--green); } .check-row .bad { color: var(--amber); }
.check-row .i { width: 18px; height: 18px; }
.check-row small { display: block; color: var(--text-3); font-size: 12.5px; margin-top: 2px; }

/* ==========================================================================
   v8 · Calmer workspace: grouped menu, inbox, needs-attention, live alerts,
   next-step bar, client conversations, request tracker, owner reports
   ========================================================================== */
.nav a.active { font-family: var(--font); font-weight: 600; letter-spacing: 0; }
.nav .count.hot { background: var(--red); color: #fff; }
[data-theme="light"] .nav .count.hot { color: #fff; }
.nav .count.hidden { display: none; }
.new-btn { height: 40px; }
.nav-group > summary { list-style: none; cursor: pointer; user-select: none; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary .i { width: 15px; height: 15px; transition: transform .15s; }
.nav-group[open] > summary .i { transform: rotate(180deg); }
.sidebar .nav-label.row { display: flex; }

.bell.urgent > summary { color: var(--red); }
.bell.urgent .badge-dot { animation: iam-pulse 1.6s ease-in-out infinite; }
@keyframes iam-pulse { 0%, 100% { box-shadow: 0 0 0 2px var(--card), 0 0 0 0 color-mix(in oklab, var(--red) 60%, transparent); } 50% { box-shadow: 0 0 0 2px var(--card), 0 0 0 6px transparent; } }
@media (prefers-reduced-motion: reduce) { .bell.urgent .badge-dot { animation: none; } }
.btn.muted .i { opacity: .35; }
.notif.tier-low { opacity: .62; }
.notif.tier-low.unread { background: transparent; }
.notif.tier-low.unread::before { background: var(--text-3); }
.notif.tier-high.unread::before { background: var(--red); }
.notif .nt small { display: block; margin-top: 4px; font-size: 11.5px; }
.notif-ic { width: 32px; height: 32px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--card-2); color: var(--text-2); border: 1px solid var(--line); }
.notif.tier-high .notif-ic { color: var(--red); background: color-mix(in oklab, var(--red) 10%, var(--card)); }
.notif-ic .i { width: 16px; height: 16px; }
.count-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; font: 600 11px/1 var(--font); background: var(--card-3); color: var(--text-2); margin-left: 6px; vertical-align: middle; }
.count-pill.hot { background: var(--red); color: #fff; }
.toast.live { text-decoration: none; color: var(--text); border-left: 3px solid var(--blue); cursor: pointer; }
.toast.live.hot { border-left-color: var(--red); }
.toast.live.hot .i { color: var(--red); }
.toast.live b { display: block; font-weight: 600; }
.toast.live small { display: block; color: var(--text-2); font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Dashboard: needs attention */
.stats-4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.attention .card-head h3 { display: flex; align-items: center; }
.attn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 12px; padding: 0 16px 16px; }
.attn-group { border: 1px solid var(--line-2); border-radius: 16px; background: var(--card-2); overflow: hidden; }
.attn-group header { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: color-mix(in oklab, var(--c) 6%, transparent); }
.attn-group header > div { flex: 1; min-width: 0; }
.attn-group header b { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.attn-group header .n { font: 700 11.5px/1 var(--font); color: #fff; background: var(--c); border-radius: 99px; padding: 3px 7px; }
.attn-group header small { display: block; color: var(--text-3); font-size: 12px; margin-top: 2px; }
.attn-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; color: var(--c); background: color-mix(in oklab, var(--c) 14%, transparent); }
.attn-ic .i { width: 16px; height: 16px; }
.attn-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); color: inherit; font-size: 13px; }
.attn-item:last-child { border-bottom: 0; }
.attn-item:hover { background: var(--card-3); }
.attn-item b { display: block; font-weight: 500; }
.attn-item span.truncate { display: block; color: var(--text-3); font-size: 12px; }
.attn-item .when { color: var(--text-3); font-size: 11.5px; white-space: nowrap; }

/* Board: Done column */
.col.status-completed { background: color-mix(in oklab, var(--green) 4%, var(--card)); }
.col.status-completed .tcard { opacity: .78; }
.col-more { display: flex; align-items: center; gap: 6px; justify-content: center; padding: 9px; border-radius: 10px; border: 1px dashed var(--line-2); color: var(--text-3); font-size: 12.5px; }
.col-more:hover { color: var(--text); border-color: var(--line-3); }
.col-more .i { width: 14px; height: 14px; }

/* Task page: next step */
.next-step { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line-2); }
.next-step form { display: inline; }
.ns-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.ns-label b { color: var(--text); font-weight: 600; }
.ns-label .i { color: var(--amber); width: 16px; height: 16px; }
.stage-box > summary::-webkit-details-marker { display: none; }
.stage-box > summary .titles p { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.stage-box[open] > summary .btn { display: none; }
.stage-form:has(option[value="__custom"]:checked) .custom-stage { display: block; }
.qt-more > summary { cursor: pointer; font-size: 13px; }

/* Client conversations (team chat + portal) */
.chan .eye-mark { margin-left: auto; color: var(--violet); }
.chan .eye-mark .i { width: 13px; height: 13px; }
.client-chat-banner { display: flex; align-items: center; gap: 8px; margin: 10px 18px 0; padding: 8px 12px; border-radius: 10px; font-size: 12.5px; background: color-mix(in oklab, var(--violet) 12%, transparent); border: 1px solid color-mix(in oklab, var(--violet) 35%, transparent); color: var(--text); }
.client-chat-banner .i { color: var(--violet); }
.who-tag { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; font-size: 10.5px; font-weight: 600; margin-left: 6px; color: var(--c, var(--accent-2)); background: color-mix(in oklab, var(--c, var(--accent)) 14%, transparent); }
.msg-tools .btn { font-size: 12px; }
.msg.is-editing .msg-text { display: none; }
.msg-edit { display: none; gap: 6px; margin-top: 4px; }
.msg.is-editing .msg-edit { display: flex; }
.msg-edit textarea { flex: 1; min-height: 38px; }
.msg-text .edited { color: var(--text-3); font-size: 11px; margin-left: 4px; }
.portal-chat { display: flex; flex-direction: column; height: calc(100vh - 190px); min-height: 460px; padding: 0; overflow: hidden; }
.portal-chat .chat-stream { flex: 1; }
.portal-chat .chat-compose { border-top: 1px solid var(--line); }
@media (max-width: 860px) { .portal-chat { height: calc(100vh - 230px - env(safe-area-inset-bottom)); } }

/* Client portal: request tracker */
.req-list { display: flex; flex-direction: column; }
.req { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); color: inherit; }
.req:last-child { border-bottom: 0; }
.req:hover { background: var(--card-2); }
.req b { font-weight: 500; }
.req .meta { color: var(--text-3); font-size: 12px; }
.tracker { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tracker span { position: relative; padding-top: 10px; font-size: 11.5px; color: var(--text-3); }
.tracker span::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 4px; background: var(--card-3); }
.tracker span.on { color: var(--text); }
.tracker span.on::before { background: var(--green); }
.tracker span.now::before { background: var(--accent); }
.tracker span.now { color: var(--text); font-weight: 600; }
.attach-list { display: flex; flex-direction: column; gap: 6px; }
.attach-row { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 10px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--line); }

/* Reports */
.rep-table td.num, .rep-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.score { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 22px; padding: 0 8px; border-radius: 99px; font: 600 11.5px/1 var(--font); color: var(--c); background: color-mix(in oklab, var(--c) 14%, transparent); }
.health-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 6px; vertical-align: middle; }

/* Security: integrity */
.integrity-list { font: 12px/1.6 var(--mono); max-height: 220px; overflow: auto; background: var(--input); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.portal-drop { padding: 6px; text-align: left; cursor: default; }
.portal-drop > label .i { width: 18px; height: 18px; margin: 0; }
.portal-drop.drop { border-color: var(--accent); background: var(--accent-soft); }
.portal-drop .attach-list:not(:empty) { padding: 0 8px 8px; }
.attach-row.err { border-color: var(--red); color: var(--red); }
.attach-row .btn { margin-left: 4px; }
.done-group > summary::-webkit-details-marker { display: none; }
.done-group[open] > summary .i { transform: rotate(180deg); }

/* ───── v8.1 Google Drive ───── */
.gd-table td { vertical-align: middle; }
.gd-name { display: inline-flex; align-items: center; gap: 10px; color: var(--text); min-width: 0; max-width: 100%; }
.gd-name span:last-child, .gd-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 52vw; }
.gd-name b { font-weight: 500; }
.gd-name:hover { color: var(--accent, var(--text)); }
.badge.in-drive { --c: var(--blue, #2f6fde); }
.fcard .drive-pin { position: absolute; right: 8px; top: 8px; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 999px; background: rgba(15, 23, 42, .72); color: #fff; font-size: 10.5px; font-weight: 500; }
.fcard .drive-pin .i { width: 11px; height: 11px; }