/* Ноорог засварын өрөө — soft admin-dashboard look: white sidebar, pastel lavender / yellow / blue cards */
/* the design kit's fonts, for the font samples in a style's breakdown */
@font-face { font-family: 'Fira Sans Extra Condensed'; font-weight: 900; font-display: swap; src: url(fonts/FiraSansExtraCondensed_900Black.ttf) format('truetype'); }
@font-face { font-family: 'Montserrat'; font-weight: 900; font-display: swap; src: url(fonts/Montserrat_900Black.ttf) format('truetype'); }
@font-face { font-family: 'Bahnschrift'; font-weight: 300 700; font-display: swap; src: url(fonts/bahnschrift.ttf) format('truetype'); }
@font-face { font-family: 'Google Sans'; font-weight: 400 700; font-display: swap; src: url(fonts/GoogleSans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Google Sans'; font-weight: 400 700; font-display: swap; src: url(fonts/GoogleSans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Google Sans'; font-weight: 400 700; font-display: swap; src: url(fonts/GoogleSans-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Google Sans'; font-weight: 400 700; font-display: swap; src: url(fonts/GoogleSans-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }

:root {
  --bg: #f3f4f8; --panel: #FAFAFA; --panel-2: #f6f7fb; --ink: #2b2b38; --ink-2: #5d6072; --muted: #7d8091; --line: #eceef4; --line-2: #dde0e9;
  --lav: #d6d0fb; --lav-soft: #efedfe; --lav-ink: #6b5fd8;
  --yel: #fcd5b5; --yel-soft: #fdeee2; --yel-ink: #c45a14;
  --blu: #c9ecfb; --blu-soft: #eaf7fd; --blu-ink: #2a8fbf;
  --accent: #fde030; --accent-ink: #1c1c26;
  --ok: #1f9d55; --ok-soft: #e3f6ea; --bad: #e5484d; --bad-soft: #fdecec; --warn: #b07b00;
  --r: 18px;
  color-scheme: light;
}
/* dark theme: the theme button in the sidebar sets data-theme="dark" on <html> (app.js), remembered per browser */
:root[data-theme="dark"] {
  --bg: #111217; --panel: #1a1b22; --panel-2: #23242d; --ink: #ecedf2; --ink-2: #b7b9c7; --muted: #8e90a0; --line: #2a2b35; --line-2: #3a3c48;
  --lav: #463f7a; --lav-soft: #26233a; --lav-ink: #b6acff;
  --yel: #5a3820; --yel-soft: #2c2119; --yel-ink: #f5a66b;
  --blu: #1e4558; --blu-soft: #182a33; --blu-ink: #6fc8ef;
  --ok: #4ade80; --ok-soft: rgba(74, 222, 128, 0.13); --bad: #f87171; --bad-soft: rgba(248, 113, 113, 0.13); --warn: #f0b44c;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* no visible scrollbars anywhere; scrolling with the wheel, trackpad or keys still works */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.5 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  display: grid; grid-template-columns: 250px minmax(0, 1fr); height: 100vh; overflow: hidden;
}
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
a { color: inherit; }
code { font: 12.5px/1.4 ui-monospace, Menlo, Consolas, monospace; background: var(--panel-2); border: 1px solid var(--line); padding: 1px 6px; border-radius: 6px; }
:focus-visible { outline: 2px solid var(--blu-ink); outline-offset: 2px; }

/* ---------------------------------------------------------------- sidebar */
.side { background: var(--panel); display: flex; flex-direction: column; padding: 26px 18px 18px; overflow: auto; border-right: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 0 26px 8px; }
.logo { display: block; flex: 1; min-width: 0; }
/* the wordmark file is yellow; brightness(0) turns every visible pixel black (#000) and keeps the transparency */
.logo img { display: block; width: 75%; height: auto; filter: brightness(0); }
[data-theme="dark"] .logo img { filter: brightness(0) invert(1); }
.sidetoggle { width: 36px; height: 36px; padding: 0; border-radius: 10px; background: transparent; color: var(--muted); flex: none; }
.sidetoggle:hover { background: var(--panel-2); color: var(--ink); filter: none; }

/* collapsed sidebar: icons only, remembered per browser (app.js); phones use the top bar instead */
@media (min-width: 861px) {
  body { transition: grid-template-columns 0.2s ease; }
  body.side-collapsed { grid-template-columns: 84px minmax(0, 1fr); }
  .side-collapsed .side { padding-left: 14px; padding-right: 14px; }
  .side-collapsed .brand { justify-content: center; padding-left: 0; }
  .side-collapsed .logo, .side-collapsed .navlabel { display: none; }
  .side-collapsed #nav a, .side-collapsed .nav2 a { justify-content: center; padding: 12px 0; font-size: 0; gap: 0; }
  .side-collapsed #nav a svg, .side-collapsed .nav2 a svg { width: 22px; height: 22px; }
  .side-collapsed .side-foot { flex-direction: column; }
}
.navlabel { padding: 18px 12px 8px; font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
#nav, .nav2 { display: flex; flex-direction: column; gap: 4px; }
.nav2 { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
#nav a, .nav2 a { display: flex; align-items: center; gap: 14px; padding: 11px 14px; border-radius: 12px; color: var(--ink-2); text-decoration: none; font-size: 15.5px; }
#nav a svg, .nav2 a svg { color: var(--muted); }
#nav a:hover, .nav2 a:hover { background: var(--panel-2); color: var(--ink); }
#nav a.active, .nav2 a.active { background: var(--blu); color: var(--ink); font-weight: 500; }
#nav a.active svg, .nav2 a.active svg { color: var(--ink); }
.side-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding-top: 16px; }
.themebtn { width: 44px; height: 44px; padding: 0; border-radius: 12px; background: var(--panel-2); color: var(--ink); flex: none; }
.themebtn:hover { filter: none; background: var(--line-2); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #b4b6c2; flex: none; }
.dot.on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }
.dot.off { background: var(--bad); box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.16); }

/* ---------------------------------------------------------------- top bar */
main { overflow: auto; padding: 0 32px 80px; scroll-padding-top: 90px; }
.topbar { position: sticky; top: 0; z-index: 8; display: flex; align-items: center; gap: 14px; max-width: 1400px; margin: 0 auto; padding: 22px 0 46px; height: 140px; box-sizing: border-box; /* same height on every page (the dashboard row holds the greeting), so it never shifts */ background: var(--bg); }
/* the bottom 40px of the top bar fades out, so content scrolling under it melts away instead of being cut off */
.topbar { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent); }
.search { display: flex; align-items: center; gap: 10px; width: 320px; max-width: 45vw; margin: 0; padding: 0 16px; height: 46px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--muted); font-weight: 400; }
.search input { border: 0; background: transparent; margin: 0; padding: 0; height: 100%; box-shadow: none !important; }
.search { display: none !important; } /* page titles use the top row now; Projects has its own name search */
.tophead { flex: 1; min-width: 0; }
.topbar > .grow { display: none; }
.tophead .pagehead { margin: 0; align-items: center; flex-wrap: nowrap; }
.tophead .pagehead > div { min-width: 0; flex: 1; }
.tophead .pagehead > .crewpick, .tophead .pagehead > .ownerpick { flex: none; } /* the title shrinks, not the pickers */
.tophead .lead { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tophead .btn { margin-right: 6px; }
/* the top row's boxes share one height: page buttons and pickers match the 46px profile box */
.tophead .pagehead > .btn, .tophead .pagehead > button { height: 46px; }
.tophead .ownerpick select, .tophead .crewbtn { height: 46px; }
.search:focus-within { background: var(--panel); }
.ibtn { position: relative; width: 46px; height: 46px; border-radius: 50%; background: var(--panel); color: var(--ink); border: 0; padding: 0; display: inline-grid; place-items: center; text-decoration: none; }
.ibtn:hover { filter: none; background: var(--panel-2); }
.ibtn.sm { width: 32px; height: 32px; background: transparent; border: 1px solid var(--line-2); border-radius: 9px; }
.ibtn.sm svg { width: 16px; height: 16px; }
.badge { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--lav-ink); color: #FAFAFA; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.badge.err { background: var(--bad); }
.me { display: flex; align-items: center; gap: 10px; height: 46px; padding: 5px 18px 5px 5px; margin-left: 8px; border-radius: 999px; background: var(--panel); text-decoration: none; }
/* activity bell: a bare icon to the right of the profile */
.bellbtn { position: relative; width: 40px; height: 40px; padding: 0; border-radius: 10px; background: transparent; color: var(--ink); display: inline-grid; place-items: center; }
.bellbtn svg { width: 22px; height: 22px; }
.bellbtn:hover { background: var(--panel); filter: none; }
.bellbtn .badge { top: 2px; right: 0; }
.me-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; min-width: 0; }
.me-txt b { font-weight: 600; font-size: 15px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-txt span { font-size: 12.5px; color: var(--muted); }
.me .av { width: 36px; height: 36px; font-size: 14px; position: relative; overflow: visible; }
.me .av.on::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: #22c55e; border: 2px solid var(--panel); z-index: 1; }

/* avatars: a photo, or initials on a colour picked from the member id */
.av { width: 34px; height: 34px; border-radius: 50%; flex: none; display: inline-grid; place-items: center; font-size: 13px; font-weight: 600; color: #2b2b38; background: var(--lav) center / cover no-repeat; text-transform: uppercase; letter-spacing: 0.02em; }
.av.sm { width: 26px; height: 26px; font-size: 10.5px; }
.av.lg { width: 48px; height: 48px; font-size: 17px; }
.av.xl { width: 112px; height: 112px; font-size: 36px; }
.av.none { background: var(--panel-2); color: var(--muted); border: 1px dashed var(--line-2); }
.avs { display: inline-flex; }
.avs .av { border: 2px solid var(--panel); margin-left: -7px; }
.avs .av:first-child { margin-left: 0; }

/* ---------------------------------------------------------------- pages */
.page { display: none; max-width: 1400px; margin: 0 auto; padding-top: 0; } /* every page starts the same distance under the top bar; blocks are 20px apart */
.page.active { display: block; }
/* switching pages (and project steps): a quick, light fade-up */
.page.active, #new[data-view] .wstep, #poster[data-view] .wstep { animation: pagein 0.18s ease-out; }
@keyframes pagein { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .page.active, .wstep { animation: none; } }
.ctxbar { display: none; align-items: center; gap: 12px; flex-wrap: wrap; max-width: 1400px; margin: 0 auto 6px; }
body[data-group="tools"] .ctxbar { display: flex; }
.subtabs { display: flex; gap: 4px; background: var(--panel); padding: 5px; border-radius: 14px; flex-wrap: wrap; }
.subtabs a { padding: 7px 16px; border-radius: 10px; text-decoration: none; font-size: 14.5px; color: var(--ink-2); }
.subtabs a:hover { color: var(--ink); background: var(--panel-2); }
.subtabs a.active { background: var(--blu); color: var(--ink); font-weight: 500; }
.seqpick { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin: 0; color: var(--muted); font-weight: 400; }
.seqpick select { min-width: 200px; margin: 0; padding: 8px 12px; }
.grow { flex: 1; }

.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 0 0 20px; flex-wrap: wrap; }
h1 { margin: 0 0 4px; font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
h2 { margin: 0 0 12px; font-size: 19px; font-weight: 600; }
h3 { margin: 0 0 10px; font-size: 15.5px; font-weight: 600; }
.lead { color: var(--muted); margin: 0; max-width: 700px; }
/* dashboard reminder: today's events as a yellow pill with a live dot; lines rise in and lift away */
#dLead.event { display: inline-flex; align-items: center; max-width: 100%; margin-top: 4px; padding: 3px 12px 3px 10px; line-height: 22px; border-radius: 999px; background: var(--yel-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--yel-ink) 25%, transparent); color: var(--ink); overflow: hidden; }
#dLead.event::before { content: ""; flex: none; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: #f5a524; animation: livedot 1.8s ease-out infinite; }
@keyframes livedot { 0% { box-shadow: 0 0 0 0 rgba(245, 165, 36, 0.55); } 80%, 100% { box-shadow: 0 0 0 8px rgba(245, 165, 36, 0); } }
.lin { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.lin.in { animation: leadin 0.42s cubic-bezier(0.16, 1, 0.3, 1); }
.lin.out { animation: leadout 0.28s ease-in forwards; }
@keyframes leadin { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }
@keyframes leadout { to { opacity: 0; transform: translateY(-10px); filter: blur(4px); } }
#dLead .lk { color: var(--yel-ink); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em; }
#dLead .lt { font-weight: 700; font-variant-numeric: tabular-nums; }
#dLead .lx { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (prefers-reduced-motion: reduce) { .lin.in, .lin.out, #dLead.event::before { animation: none; } }
.back { display: inline-flex; margin-bottom: 4px; color: var(--muted); text-decoration: none; font-size: 14px; }
.back:hover { color: var(--ink); }
.card { background: var(--panel); border-radius: var(--r); padding: 22px 24px; margin-bottom: 20px; }
.cardhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.cardhead h2 { margin: 0; min-width: 0; }
.cardhead > a { white-space: nowrap; }
.cardhead > p, .cardhead > .chip { min-width: 0; white-space: normal; text-align: right; }
.cardhead a { color: var(--muted); font-size: 14px; text-decoration: none; letter-spacing: 0.02em; }
.cardhead a:hover { color: var(--ink); }
.cardhead p { margin: 0; }
.hint, small { color: var(--muted); font-size: 13.5px; }
small { display: block; margin-top: 4px; font-weight: 400; }
.muted { color: var(--muted); }
.opt { font-weight: 400; font-size: 12.5px; color: var(--muted); margin-left: 4px; }
i.n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--yel); font-style: normal; font-size: 13px; margin-right: 8px; vertical-align: 1px; }
.sechead { margin: 30px 0 4px; font-size: 20px; }
.page > .sechead:first-child, .page > [hidden]:first-child + .sechead { margin-top: 0; }
.sechint { margin: 0 0 14px; }
h2.sechead + .members, h2.sechead + .taskgrid { margin-top: 14px; }

/* ---------------------------------------------------------------- forms */
label { display: block; margin: 10px 0; font-weight: 500; font-size: 14px; }
label.check { display: flex; align-items: center; gap: 10px; font-weight: 400; }
label.check.pad { margin-top: 36px; }
input, select, textarea {
  font: inherit; width: 100%; margin-top: 6px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 12px;
  background: var(--panel); color: var(--ink); font-weight: 400;
}
input::placeholder, textarea::placeholder { color: #a9abb8; }
input:focus, select:focus, textarea:focus { outline: none; }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); flex: none; }
textarea { resize: vertical; }
.row { display: flex; gap: 10px; align-items: center; }
.row input { margin: 0; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; }
.actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; align-items: center; }
.tabs { display: flex; gap: 20px; margin-bottom: 8px; flex-wrap: wrap; }
.tabs label { display: flex; gap: 8px; align-items: center; font-weight: 400; }

/* ---------------------------------------------------------------- buttons */
button, .btn, .btnlike {
  font: inherit; font-weight: 500; font-size: 14.5px; padding: 10px 20px; border-radius: 12px; border: 1px solid transparent; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: filter 0.12s, background 0.12s;
}
button:hover, .btn:hover, .btnlike:hover { filter: brightness(0.96); }
button.ghost, .ghostlike { background: var(--panel); color: var(--ink); border-color: var(--line-2); }
button.ghost:hover { background: var(--panel-2); filter: none; }
button.small, .btnlike.small { padding: 5px 12px; font-size: 13px; border-radius: 9px; }
button.lg { padding: 14px 28px; font-size: 16px; border-radius: 14px; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.busy { position: relative; color: transparent !important; }
button.busy::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--ink); border-top-color: transparent; animation: spin 0.8s linear infinite;
}
button.stop { background: var(--bad); color: #FAFAFA; }
button.danger { background: transparent; color: var(--bad); border-color: transparent; }
button.danger:hover { background: var(--bad-soft); }
.iconbtn { background: transparent; color: var(--muted); padding: 6px; border-radius: 9px; }
.iconbtn:hover { background: var(--panel-2); color: var(--ink); filter: none; }
.btnlike { margin: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- dashboard */
.dash { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 20px; align-items: start; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.stat { --tc: var(--lav); --tc-soft: var(--lav-soft); --tc-ink: var(--lav-ink); position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; padding: 18px 20px 20px; min-height: 150px; border-radius: 18px; text-decoration: none; color: var(--ink);
  background: linear-gradient(155deg, var(--tc-soft) 0%, var(--panel) 80%); border: 1px solid var(--line); transition: box-shadow 0.25s var(--ease-out, ease-out), border-color 0.25s; }
.stat.yel { --tc: var(--yel); --tc-soft: var(--yel-soft); --tc-ink: var(--yel-ink); }
.stat.blu { --tc: var(--blu); --tc-soft: var(--blu-soft); --tc-ink: var(--blu-ink); }
/* a soft glow of the card's colour in the corner */
.stat::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 170px; height: 170px; border-radius: 50%; background: var(--tc); opacity: 0.35; filter: blur(30px); pointer-events: none; }
.stat:hover { box-shadow: 0 12px 30px rgba(20, 20, 40, 0.14); border-color: var(--line-2); } /* no lift: a card that moves off the cursor flickers */
.stat .sic { position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--panel); color: var(--tc-ink); box-shadow: 0 2px 8px rgba(20, 20, 40, 0.08); z-index: 1; }
.stat .sic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.stat b { position: relative; z-index: 1; font-size: 36px; font-weight: 700; margin-top: auto; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat > span:last-child { position: relative; z-index: 1; font-size: 14px; color: var(--ink-2); font-weight: 500; }
/* light theme: a clearer tint in the card's colour, a solid icon tile, a coloured edge and shadow */
html:not([data-theme="dark"]) .stat {
  background: radial-gradient(110% 85% at 100% 0%, color-mix(in srgb, var(--tc) 75%, #FAFAFA) 0%, transparent 62%), linear-gradient(165deg, var(--tc-soft) 0%, #FAFAFA 78%);
  border-color: color-mix(in srgb, var(--tc-ink) 16%, #FAFAFA);
  box-shadow: 0 1px 2px rgba(20, 20, 40, 0.04), 0 10px 26px -14px color-mix(in srgb, var(--tc-ink) 55%, transparent); }
html:not([data-theme="dark"]) .stat::after { left: -50px; right: auto; bottom: -90px; background: var(--tc-ink); opacity: 0.08; }
html:not([data-theme="dark"]) .stat:hover { box-shadow: 0 2px 4px rgba(20, 20, 40, 0.05), 0 16px 32px -14px color-mix(in srgb, var(--tc-ink) 60%, transparent); }
html:not([data-theme="dark"]) .stat .sic { background: var(--tc-ink); color: #FAFAFA; box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--tc-ink) 60%, transparent); }
html:not([data-theme="dark"]) .stat .spill { background: #FAFAFA; border: 1px solid color-mix(in srgb, var(--tc-ink) 14%, #FAFAFA); }
html:not([data-theme="dark"]) .stat > span:last-child { color: color-mix(in srgb, var(--tc-ink) 55%, var(--ink-2)); }
.spill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: var(--panel); font-size: 12px; font-weight: 600; color: var(--ok); }
.spill:empty { visibility: hidden; }
.spill.down { color: var(--bad); }
.spill.flat { color: var(--ink-2); }
.dash-row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr); gap: 20px; }
.dash-row.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dash-row .card, .dash-side .card { margin-bottom: 20px; }
.legend { display: flex; gap: 18px; font-size: 13.5px; color: var(--ink-2); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: 0; }
.legend i.y { background: #f08a3c; } .legend i.b { background: #8fd3f5; }

/* last project: a ring and four stages */
.last { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.ring { position: relative; width: 190px; height: 190px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring circle { fill: none; }
.ring .glow { fill: color-mix(in srgb, var(--ink) 4%, transparent); stroke: var(--line); stroke-width: 1; }
.ring .seg { stroke-width: 14; stroke-linecap: round; stroke: color-mix(in srgb, var(--ink) 8%, transparent); transition: stroke 0.3s; }
.ring .seg.done { stroke: url(#ringY); filter: drop-shadow(0 4px 8px rgba(240, 138, 60, 0.3)); }
.ring .seg.now { stroke: var(--blu-ink); animation: segpulse 1.8s ease-in-out infinite; }
@keyframes segpulse { 50% { opacity: 0.45; } }
.ring .mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.ring .mid b { font-size: 34px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ring .mid span { font-size: 12.5px; color: var(--muted); }
.rstate { margin-top: 6px; padding: 2px 10px; border-radius: 999px; font-style: normal; font-size: 11.5px; font-weight: 600; }
.rstate.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.rstate.run { background: var(--blu-soft); color: var(--blu-ink); }
.rstate.err { background: var(--bad-soft); color: var(--bad); }
.last > div { max-width: 100%; min-width: 0; } /* the name block stays inside the card */
.last .pname { font-weight: 600; font-size: 17px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.last .pdate { font-size: 13px; color: var(--muted); }
.stages { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; list-style: none; padding: 0; margin: 0; text-align: left; }
.stages li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
.stages li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); flex: none; }
.stages li.done { color: var(--ink); }
.stages li.done::before { background: linear-gradient(135deg, #f7a868, #e8762c); }
.stages li.now { color: var(--ink); font-weight: 600; }
.stages li.now::before { background: var(--blu-ink); box-shadow: 0 0 0 3px var(--blu); }
.last-now { margin: 0; font-size: 13.5px; color: var(--muted); }
.last-now b { color: var(--ink); font-weight: 500; }

/* week chart */
.chartcard { display: flex; flex-direction: column; } /* the chart takes the card's full height */
.chart { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; margin-top: 6px; }
.chart .plot { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; min-height: 260px; }
.chart .day { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 10px 0 8px; border-radius: 16px; cursor: default; transition: background 0.15s; }
.chart .day:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.chart .day.today { background: color-mix(in srgb, var(--ink) 5%, transparent); }
/* every day's bars stand on the same line: the tracks fill the space above a label of fixed height */
.chart .trks { position: relative; flex: 1; width: 100%; display: flex; justify-content: center; gap: 4px; align-items: stretch; padding-top: 26px; }
.chart .trks::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 1px; background: var(--line-2); }
.chart .trk { position: relative; width: 14px; border-radius: 7px 7px 3px 3px; display: flex; align-items: flex-end;
  background: color-mix(in srgb, var(--ink) 5%, transparent); }
.chart .trk i { position: relative; display: block; width: 100%; border-radius: 7px 7px 3px 3px; transition: height 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.15s; }
.chart .trk i::before { content: ""; position: absolute; inset: 2px 3px auto; height: 35%; max-height: 22px; border-radius: 5px; background: linear-gradient(rgba(250, 250, 250, 0.45), transparent); }
.chart .trk.y i { background: linear-gradient(to top, #e8762c, #f7a868); box-shadow: 0 6px 16px -4px rgba(240, 138, 60, 0.45); }
.chart .trk.b i { background: linear-gradient(to top, #4fb0e2, #a9def7); box-shadow: 0 6px 16px -4px rgba(79, 176, 226, 0.55); }
.chart .day:hover .trk i { filter: brightness(1.08); }
.chart .trk em { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); min-width: 20px; padding: 1px 5px; border-radius: 6px; background: var(--panel-2); font-style: normal; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; color: var(--ink); font-variant-numeric: tabular-nums; box-shadow: 0 1px 3px rgba(20, 20, 40, 0.12); }
.chart .dl { height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; line-height: 1.15; }
.chart .dl span { font-size: 12px; color: var(--muted); }
.chart .dl b { display: grid; place-items: center; min-width: 26px; height: 26px; border-radius: 50%; font-size: 14px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.chart .day.today .dl span { color: var(--ink); font-weight: 600; }
.chart .day.today .dl b { background: var(--ink); color: var(--panel); }
.ch-tip { position: absolute; z-index: 2; pointer-events: none; padding: 9px 12px; border-radius: 12px; background: var(--ink); color: var(--panel); font-size: 12.5px; box-shadow: 0 8px 24px rgba(20, 20, 40, 0.25); white-space: nowrap; }
.ch-tip b { display: block; margin-bottom: 3px; font-size: 13px; }
.ch-tip span { display: flex; align-items: center; gap: 6px; }
.ch-tip i { width: 8px; height: 8px; border-radius: 50%; } .ch-tip i.y { background: #f08a3c; } .ch-tip i.b { background: #8fd3f5; }

/* calendar strip + agenda */
.week-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.week-head b { font-size: 18px; font-weight: 600; }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.week button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0; border-radius: 10px; background: transparent; color: var(--ink); font-weight: 500; font-size: 18px; }
.week button span { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.week button:hover { background: var(--panel-2); filter: none; }
.week button.sel { background: var(--blu-soft); }
.week button.today b { color: var(--blu-ink); }
.week button i { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.week button i.has { background: var(--lav-ink); }
.agenda-head { margin: 22px 0 14px; }
.agenda { display: flex; flex-direction: column; gap: 12px; }
.ag { display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: center; padding: 14px 16px; border-radius: 12px; text-decoration: none; }
.ag.c0 { background: var(--lav-soft); } .ag.c1 { background: var(--yel-soft); } .ag.c2 { background: var(--blu-soft); }
.ag .when { font-size: 13.5px; font-weight: 500; padding-right: 12px; border-right: 1px solid var(--line-2); align-self: stretch; display: flex; align-items: center; }
.ag .what { padding-left: 16px; min-width: 0; }
.ag .what span { display: block; font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag .what b { display: block; font-weight: 500; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag.isdone .what b { text-decoration: line-through; color: var(--muted); }
.ag.ev { position: relative; background: var(--panel); border: 1px solid var(--line-2); }
.ag.ev .when { color: var(--blu-ink); gap: 8px; align-items: center; }
/* the time column: start and end joined by a rail of two dots, the length underneath */
.tw-rail { display: flex; flex-direction: column; align-items: center; padding: 6px 0; flex: none; }
.tw-rail i { width: 8px; height: 8px; border-radius: 50%; border: 2px solid currentColor; box-sizing: border-box; flex: none; }
.tw-rail i:first-child { background: currentColor; }
.tw-rail u { flex: none; height: 12px; width: 2px; margin: 2px 0; border-radius: 1px; background: color-mix(in srgb, currentColor 35%, transparent); }
.tw-times { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
.tw-times b { display: block; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.ag.ev.live .when { color: var(--ok); }
.ag.ev.live .tw-rail i:first-child { animation: evlive 1.6s ease-in-out infinite; }
@keyframes evlive { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 25%, transparent); } }
.ag.ev.past { opacity: 0.55; }
.ag.notime { grid-template-columns: minmax(0, 1fr); } /* no time given: no time column */
.ag.notime .what { padding-left: 0; }
.evact { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s; }
.ag.ev:hover .evact, .ag.ev:focus-within .evact { opacity: 1; }
.evbtn { width: 30px; height: 30px; padding: 0; border-radius: 8px; background: var(--panel-2); color: var(--ink-2); }
.evbtn svg { width: 16px; height: 16px; }
.evbtn:hover { background: var(--blu-soft); color: var(--blu-ink); filter: none; }
.evbtn.del:hover { background: var(--bad-soft); color: var(--bad); }
@media (hover: none) { .evact { opacity: 1; } }
.evform { margin: -4px 0 14px; padding: 12px; border-radius: 12px; background: var(--panel-2); }
.evday { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.evtimes { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 8px; }
.evtimes label { flex: 1; margin: 0; font-size: 12px; font-weight: 500; color: var(--muted); }
.tpick { width: 100%; margin-top: 3px; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); color: var(--ink); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.tpick:hover { border-color: var(--muted); filter: none; }
.tpick svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; flex: none; }
.tpick .muted { color: var(--muted); font-weight: 500; }
.timemenu { width: 236px; }
.tm-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 10px 8px; border-bottom: 1px solid var(--line); }
.tm-chip { padding: 4px 9px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel); color: var(--ink-2); font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tm-chip:hover { color: var(--ink); filter: none; }
.tm-chip b { color: var(--blu-ink); font-weight: 600; }
.tm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 6px; height: 200px; }
.tm-col { overflow: auto; display: flex; flex-direction: column; gap: 2px; scrollbar-width: none; }
.tm-col::-webkit-scrollbar { display: none; }
.tm-col button { flex: none; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tm-col button:hover { background: var(--panel-2); color: var(--ink); filter: none; }
.tm-col button.sel { background: var(--blu-ink); color: #FAFAFA; font-weight: 700; }
.tm-ok { color: var(--blu-ink); border-color: var(--blu-ink); }
.evtimes > span { padding-bottom: 10px; color: var(--muted); }
.evtitle { margin: 0; padding: 8px 10px; }
.evrow { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; }
.evrow input { margin: 0; padding: 8px 10px; }
.evform .actions { margin-top: 10px; }
.agenda .none, .msgs .none, .tlist .none, .plist .none { color: var(--muted); font-size: 14px; padding: 12px 0; }

/* member activity, styled like a message list */
.msgs { display: flex; flex-direction: column; gap: 18px; }
.msg { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: start; text-decoration: none; }
.msg .av { width: 48px; height: 48px; font-size: 16px; }
.msg-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.msg-top b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-top time { font-size: 12px; color: var(--muted); white-space: nowrap; }
.msg p { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* project rows */
.plist { display: flex; flex-direction: column; }
.pitem { display: flex; align-items: center; gap: 14px; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.pitem:last-child { border-bottom: 0; }
.pitem .pic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--lav-soft); color: var(--lav-ink); }
.pitem:nth-child(3n+2) .pic { background: var(--yel-soft); color: var(--yel-ink); }
.pitem:nth-child(3n+3) .pic { background: var(--blu-soft); color: var(--blu-ink); }
.pitem .pmain { flex: 1; min-width: 0; }
.pitem .pname { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pitem .pdate { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pitem .ptime { font-variant-numeric: tabular-nums; }
.pitem.cur .pname::after { content: "нээлттэй"; margin-left: 8px; font-size: 11px; font-weight: 500; color: var(--blu-ink); background: var(--blu-soft); border-radius: 999px; padding: 2px 8px; vertical-align: 2px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; background: var(--panel-2); color: var(--ink-2); white-space: nowrap; }
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.busy { background: var(--yel-soft); color: var(--yel-ink); }
.chip.err { background: var(--bad-soft); color: var(--bad); }
.chip.lav { background: var(--lav-soft); color: var(--lav-ink); }
.chip.done { background: var(--ok); color: #FAFAFA; }
/* a finished project: green tick on its picture */
.pitem .pic { position: relative; aspect-ratio: 1; } /* every project picture is square */
.pitem.finished .pic::after { content: "✓"; position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%; background: var(--ok); color: #FAFAFA; font-size: 11px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--panel); z-index: 1; }
.meter { display: block; height: 7px; border-radius: 4px; background: var(--line); overflow: hidden; margin: 6px 0 2px; }
.meter i { display: block; height: 100%; width: 0; background: #f6d955; border-radius: 4px; transition: width 0.3s; }

/* task rows */
.tlist { display: flex; flex-direction: column; }
.trow { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.trow:last-child { border-bottom: 0; }
.trow .tt { flex: 1; min-width: 0; }
.trow .tt b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow .tt span { display: block; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow time { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.tick { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--ok-soft); color: var(--ok); font-size: 13px; font-weight: 700; flex: none; }

/* ---------------------------------------------------------------- projects */
.newproj { display: flex; align-items: center; gap: 18px; padding: 22px 26px; border-radius: var(--r); background: var(--lav); text-decoration: none; margin-bottom: 20px; }
.newproj .plus { width: 54px; height: 54px; border-radius: 16px; background: var(--panel); display: grid; place-items: center; font-size: 30px; font-weight: 400; flex: none; }
.newproj b { display: block; font-size: 19px; font-weight: 600; }
.newproj span span { color: var(--ink-2); font-size: 14.5px; }
.newproj:hover { filter: brightness(0.98); }
.newproj > .caret { margin-left: auto; width: 24px; height: 24px; }
.btn > .caret { width: 16px; height: 16px; margin-right: -4px; }

/* «+ Шинэ төсөл» menu: Reels / Poster / Carousel */
.newmenu { position: fixed; z-index: 35; width: 330px; padding: 8px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(20, 20, 40, 0.18); animation: pop 0.12s ease-out; }
.nm-head { padding: 6px 10px 6px; font-size: 12.5px; color: var(--muted); }
.newmenu button { display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; padding: 10px; border-radius: 12px; background: transparent; color: var(--ink); text-align: left; font-weight: 400; white-space: normal; }
.newmenu button:hover:not(:disabled), .newmenu button:focus-visible { background: var(--panel-2); filter: none; }
.newmenu button:disabled { opacity: 1; cursor: default; }
.newmenu button:disabled .nm-ic, .newmenu button:disabled .nm-txt { opacity: 0.5; }
.nm-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--lav-soft); color: var(--lav-ink); }
.newmenu button:nth-of-type(2) .nm-ic { background: var(--yel-soft); color: var(--yel-ink); }
.newmenu button:nth-of-type(3) .nm-ic { background: var(--blu-soft); color: var(--blu-ink); }
.nm-txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.nm-txt b { font-weight: 600; font-size: 15px; }
.nm-txt span { font-size: 13px; color: var(--muted); }
/* project history: one box, a month line, a small day line, then plain rows */
.histcard { padding-bottom: 14px; }
.histhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 6px; flex-wrap: wrap; }
.histhead h2 { margin: 0; }
/* Projects: one search box holding the active filters as chips and a filter button */
.psearch { display: flex; align-items: center; gap: 6px; width: min(460px, 100%); min-height: 44px; padding: 4px 6px 4px 14px; border-radius: 999px; background: var(--panel-2); border: 1px solid transparent; transition: border-color 0.15s, box-shadow 0.15s; }
.psearch:focus-within { background: var(--panel); }
.psearch .ps-ic { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; }
.ps-chips { display: flex; gap: 4px; flex: none; }
.ps-chips:empty { display: none; }
.ps-chip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 4px 0 8px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line-2); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ps-chip svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ps-chip .av { margin-left: -4px; }
.ps-chip button { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: var(--panel-2); color: var(--muted); font-size: 13px; line-height: 1; display: grid; place-items: center; }
.ps-chip button:hover { background: var(--bad-soft); color: var(--bad); filter: none; }
.psearch input { flex: 1; min-width: 80px; margin: 0; padding: 6px 4px; border: 0; background: transparent; box-shadow: none; }
.psearch input:focus { box-shadow: none; }
.ps-filter { position: relative; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); display: grid; place-items: center; flex: none; }
.ps-filter:hover, .ps-filter.open { background: var(--panel); filter: none; }
.ps-filter svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ps-filter.on::after { content: ""; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--blu-ink); }
.pitem .pdel { width: 32px; height: 32px; color: var(--muted); opacity: 0; transition: opacity 0.12s; }
.pitem:hover .pdel, .pitem .pdel:focus-visible { opacity: 1; }
.pitem .pdel:hover { color: var(--bad); background: var(--bad-soft); }
@media (hover: none) { .pitem .pdel { opacity: 1; } }
.h-month { padding: 18px 0 2px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; }
.h-month:not(:first-child) { margin-top: 10px; border-top: 1px solid var(--line); }
.h-day { padding: 12px 0 4px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.h-day span { font-weight: 400; color: var(--muted); }
.h-day span::before { content: " · "; }
.history .pitem { margin: 0 -12px; padding: 9px 12px; border: 0; border-radius: 12px; }
.history .pitem:hover { background: var(--panel-2); }
.history .pitem .pic, .history .pitem:nth-child(n) .pic { width: 36px; height: 36px; border-radius: 10px; background: var(--panel-2); color: var(--muted); }
.history .pitem:hover .pic { background: var(--panel); }
.history .none { padding: 18px 0 6px; }

/* a project's temporary team: avatars + a button that opens the member checklist */
.crewpick { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
.crewpick .avs .av { border-color: var(--bg); }
.crewbtn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: 12px; font-size: 13.5px; font-weight: 500; }
.crewbtn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.crewmenu { position: fixed; z-index: 45; width: 260px; max-height: 360px; overflow: auto; padding: 8px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line-2); box-shadow: 0 12px 34px rgba(20, 20, 40, 0.22); animation: pop 0.1s ease-out; }
.crewmenu .cm-head { font-size: 12.5px; color: var(--muted); padding: 4px 8px 8px; }
.crewmenu label { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 9px; margin: 0; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; }
.crewmenu label:hover { background: var(--panel-2); }
.crewmenu label > span:not(.av) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crewmenu label em { font-style: normal; font-size: 12px; color: var(--muted); }
.crew.newcrew, .crew.newcrew:nth-child(n) { background: transparent; border: 1.5px dashed var(--line-2); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; min-height: 200px; }
.crew.newcrew b { font-size: 16px; font-weight: 600; }
.crew.newcrew .hint { margin: 0 0 8px; max-width: 260px; }
.nc-plus { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--lav-soft); color: var(--lav-ink); font-size: 24px; line-height: 1; margin-bottom: 4px; }
.nc-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.crew.newcrew select { margin: 6px 0 0; width: 100%; }
.crew-head .crewedit { padding: 4px 10px; font-size: 13px; }
.crew .tpchip { display: inline-block; margin: 0; }
/* a project's brief on its team card: three lines, «Дэлгэрэнгүй» shows the rest */
.tpbrief { margin: -2px 0 12px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--panel) 70%, transparent); }
.tpbrief p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); white-space: pre-line; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.tpbrief.open p { display: block; }
.tpmore { margin-top: 4px; padding: 0; border: 0; background: none; color: var(--blu-ink); font-size: 12.5px; font-weight: 600; }
.modal.tpform textarea { margin-top: 6px; resize: vertical; }
.tpbriefro { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); font-size: 13.5px; white-space: pre-line; color: var(--ink-2); }
.tpmeta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -4px 0 12px; font-size: 12.5px; }
.tpdates { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); font-weight: 500; }
.tpdates svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.tpleft { padding: 1px 8px; border-radius: 999px; background: var(--panel); color: var(--ink-2); font-weight: 600; font-size: 11.5px; }
.tpleft.soon { background: var(--yel-soft); color: var(--yel-ink); }
.tpleft.late { background: var(--bad-soft); color: var(--bad); }
.modal.tpform { width: min(480px, 100%); }
.modal.tpform h2 { margin: 0 0 12px; font-size: 18px; }
.modal.tpform label { display: block; margin-bottom: 10px; }
.modal.tpform p.hint { font-size: 13px; font-weight: 400; margin: 2px 0 12px; }
.modal.tpform .tpname { font-size: 15px; font-weight: 600; margin: 0 0 12px; }
.tppeople { margin: 4px 0 14px; }
.tppeople .tplabel { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.tppeople .tplabel .opt { font-weight: 400; }
.tplist { max-height: 250px; overflow: auto; padding: 4px; border: 1px solid var(--line-2); border-radius: 12px; }
.modal.tpform .pk-row b em { font-style: normal; font-size: 11.5px; color: var(--muted); font-weight: 400; }
.crew li .who b span { display: inline; font-size: inherit; color: inherit; }
.crew li .who b .tag { display: inline-block; font-size: 11.5px; padding: 1px 8px; border-radius: 999px; background: var(--panel); color: var(--ink-2); margin-left: 6px; font-weight: 500; }
/* member form: photo, and the admin-only password and access fields */
.mfback[hidden] { display: none; }
.mfback { align-items: start; overflow: auto; padding: 40px 16px; }
.mfback .addmember { width: min(760px, 100%); margin: 0 auto; box-shadow: 0 24px 70px rgba(10, 10, 20, 0.45); animation: pop 0.14s ease-out; }
.mfphoto { display: flex; align-items: center; gap: 14px; margin: 4px 0 14px; }
.mfadmin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 18px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.mfcheck { display: flex; align-items: flex-start; gap: 10px; padding-top: 26px; cursor: pointer; }
.mfcheck input { margin-top: 3px; }
.mfcheck b { display: block; font-weight: 600; }
.mfcheck small { display: block; color: var(--muted); font-weight: 400; }
button.danger { color: var(--bad); }
/* Reels step 4: the Premiere tools for doing things by hand */
@media (max-width: 860px) { .mfadmin { grid-template-columns: 1fr; } .mfcheck { padding-top: 0; } }
.ownerpick { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; color: var(--muted); font-weight: 400; }
.ownerpick select { width: auto; min-width: 180px; margin: 0; padding: 8px 12px; }

/* ---------------------------------------------------------------- tasks */
.addtask { display: grid; grid-template-columns: minmax(0, 1fr) 200px 180px 186px auto; gap: 10px; padding: 14px; align-items: center; }
.addtask input, .addtask select { margin: 0; }
.pick { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 12px 0 8px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); color: var(--ink); font-weight: 500; font-size: 14px; min-width: 0; text-align: left; transition: border-color 0.15s, box-shadow 0.15s; }
.pick:hover { border-color: var(--muted); filter: none; }
.pick .pk-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick .pk-lbl.muted { color: var(--muted); }
.pick .pk-chev { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; transition: transform 0.15s; }
.pick.open .pk-chev { transform: rotate(180deg); }
.pick .avs .av { border-color: var(--panel); }
/* Settings → keys: one row per key */
.keys { display: grid; gap: 10px; margin-top: 12px; }
.kgroup { border-radius: 14px; background: var(--panel-2); }
.kgroup summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; border-radius: 14px; }
.kgroup summary::-webkit-details-marker { display: none; }
.kgroup summary::before { content: none; }
.kgroup summary .pk-ic { width: 38px; height: 38px; border-radius: 11px; flex: none; }
.kgroup summary .pk-ic svg { width: 18px; height: 18px; }
.kg-t { flex: 1; min-width: 0; }
.kg-t b { display: block; font-weight: 600; }
.kg-t small { display: block; font-size: 12.5px; color: var(--muted); }
.kg-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.kg-st i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.kg-st.all i { background: var(--ok); } .kg-st.some i { background: var(--warn); } .kg-st.none { color: var(--muted); }
.kg-chev { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; }
.kgroup[open] .kg-chev { transform: rotate(180deg); }
.kg-rows { display: grid; gap: 4px; padding: 0 14px 12px; }
.krow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px) 200px; gap: 12px; align-items: center; padding: 12px 0 0 50px; border-top: 1px solid var(--line); }
.krow:first-child { border-top: 0; padding-top: 4px; }
.krow .pk-ic { width: 40px; height: 40px; border-radius: 12px; }
.krow .pk-ic svg { width: 19px; height: 19px; }
.krow b { display: block; font-weight: 600; }
.krow .kdesc { display: block; font-size: 12.5px; color: var(--muted); }
.krow .kst { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; font-weight: 600; }
.krow .kst i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.krow .kst.off { color: var(--muted); } .krow .kst.off i { background: var(--line-2); }
.krow .kst code { font-size: 11.5px; }
.krow input { margin: 0; }
.krow .kact { display: flex; gap: 6px; } /* a fixed column, so every row's field lines up */
@media (max-width: 860px) { .krow { grid-template-columns: minmax(0, 1fr); padding-left: 0; } .kg-t small { display: none; } }
.whopick { height: 46px; min-width: 210px; }
.whopick .pk-lbl { display: flex; flex-direction: column; line-height: 1.2; }
.whopick .pk-lbl small { font-size: 11px; color: var(--muted); font-weight: 500; }
.whopick .pk-lbl b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-n { min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--panel-2); color: var(--ink-2); font-size: 11.5px; font-weight: 600; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.pk-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--lav-soft); color: var(--lav-ink); }
.pk-ic.none { background: var(--panel-2); color: var(--muted); }
.pk-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pickmenu { position: fixed; z-index: 45; max-width: 380px; display: flex; flex-direction: column; border-radius: 16px; background: var(--panel); border: 1px solid var(--line-2); box-shadow: 0 16px 40px rgba(20, 20, 40, 0.25); animation: pop 0.1s ease-out; overflow: hidden; }
.pk-search { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.pk-search svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; flex: none; }
.pk-search input { border: 0; background: transparent; padding: 4px 0; margin: 0; box-shadow: none; font-size: 14px; }
.pk-search input:focus { box-shadow: none; }
.pk-list { max-height: 320px; overflow: auto; padding: 6px; }
.pk-group { padding: 10px 10px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.pk-row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); text-align: left; font-weight: 400; }
.pk-row:hover { background: var(--panel-2); filter: none; }
.pk-row .pk-t { flex: 1; min-width: 0; }
.pk-row .pk-t b { display: block; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-row .pk-t b span { display: inline; font-size: inherit; color: inherit; }
.pk-row .pk-t b em { font-style: normal; font-size: 11.5px; color: var(--muted); font-weight: 400; }
.pk-row .pk-t span { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-ok { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--blu-ink); stroke-width: 2.4; opacity: 0; }
.pk-row.sel .pk-ok { opacity: 1; }
.pk-row.sel { background: var(--blu-soft); }
.pk-box { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; flex: none; transition: background 0.12s, border-color 0.12s; }
.pk-box svg { width: 12px; height: 12px; fill: none; stroke: #FAFAFA; stroke-width: 3; opacity: 0; }
.pk-row.sel .pk-box { background: var(--blu-ink); border-color: var(--blu-ink); }
.pk-row.sel .pk-box svg { opacity: 1; }
.pk-foot { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--line); font-size: 12px; }
.pk-new { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--blu-ink); font-weight: 600; font-size: 14px; }
.pk-new:hover { background: var(--panel-2); filter: none; }
.pk-new svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.pk-mini { padding: 4px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: transparent; color: var(--ink-2); font-size: 12.5px; font-weight: 500; }
.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.col { border-radius: var(--r); padding: 12px; min-height: 140px; background: var(--panel); }
.colhead { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; }
.colhead b { font-weight: 600; font-size: 16px; }
.colhead b::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; vertical-align: 0; }
.col[data-status="todo"] .colhead b::before { background: var(--lav-ink); }
.col[data-status="doing"] .colhead b::before { background: #f2c94c; }
.col[data-status="done"] .colhead b::before { background: var(--ok); }
.colhead .count { font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--panel-2); border-radius: 999px; padding: 1px 9px; }
.colbody { display: flex; flex-direction: column; gap: 10px; }
.colbody:empty::before { content: "Ажил алга"; color: var(--muted); font-size: 13.5px; padding: 18px 6px; text-align: center; }
.tcard { border-radius: 14px; padding: 12px 14px; }
.col[data-status="todo"] .tcard { background: var(--lav-soft); }
.col[data-status="doing"] .tcard { background: var(--yel-soft); }
.col[data-status="done"] .tcard { background: var(--blu-soft); }
.tcard-top { display: flex; gap: 10px; align-items: flex-start; }
.tcard-top input[type=checkbox] { margin-top: 2px; accent-color: var(--ok); }
.tcard-title { flex: 1; font-weight: 500; font-size: 14.5px; word-break: break-word; }
.tcard.isdone .tcard-title { text-decoration: line-through; color: var(--muted); }
.tcard-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; color: var(--ink-2); }
.tcard-meta a { color: var(--ink); text-decoration: none; font-weight: 500; }
.tcard-meta a:hover { text-decoration: underline; }
.tcard-meta .late { color: var(--bad); font-weight: 600; }
/* a task's status: a coloured pill (Хийх lavender, Хийж байна yellow, Дууссан green) that opens a small menu */
.stpill { --st: var(--lav-ink); --st-soft: var(--lav-soft); margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); font-size: 12.5px; font-weight: 600; box-shadow: 0 1px 3px rgba(20, 20, 40, 0.06); }
.stpill:hover { filter: brightness(0.97); }
.stpill i, .st-row i { width: 8px; height: 8px; border-radius: 50%; background: var(--st); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--st) 22%, transparent); }
.stpill svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; opacity: 0.6; }
.st-doing { --st: #f08a3c; --st-soft: var(--yel-soft); }
.st-done { --st: var(--ok); --st-soft: color-mix(in srgb, var(--ok) 16%, transparent); }
.st-todo { --st: var(--lav-ink); --st-soft: var(--lav-soft); }
.st-row { padding: 9px 10px; }
.st-row i { margin: 0 4px 0 2px; }
.tcard .tdel { padding: 0 4px; background: transparent; color: var(--muted); font-size: 17px; line-height: 1; }
.taskgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.task { display: flex; flex-direction: column; gap: 6px; background: var(--panel); border-radius: var(--r); padding: 20px; text-decoration: none; }
.task svg { width: 22px; height: 22px; padding: 11px; box-sizing: content-box; border-radius: 14px; background: var(--lav-soft); color: var(--lav-ink); margin-bottom: 8px; }
.task:nth-child(2) svg { background: var(--yel-soft); color: var(--yel-ink); }
.task:nth-child(3) svg { background: var(--blu-soft); color: var(--blu-ink); }
.task:nth-child(5) svg { background: var(--yel-soft); color: var(--yel-ink); }
.task b { font-weight: 600; }
.task span { color: var(--muted); font-size: 14px; }

/* ---------------------------------------------------------------- team */
.members { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 20px; }
.members { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); align-items: start; }
.tcardteam { --tc-soft: var(--lav-soft); --tc-ink: var(--lav-ink); position: relative; overflow: hidden; background: linear-gradient(180deg, var(--tc-soft) 0, var(--panel) 110px); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 10px; transition: transform 0.15s, box-shadow 0.15s; }
.tcardteam.c1 { --tc-soft: var(--yel-soft); --tc-ink: var(--yel-ink); } .tcardteam.c2 { --tc-soft: var(--blu-soft); --tc-ink: var(--blu-ink); }
.tcardteam:hover { box-shadow: 0 10px 28px rgba(20, 20, 40, 0.12); }
.tt-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: none; background: var(--panel); color: var(--tc-ink); box-shadow: 0 2px 8px rgba(20, 20, 40, 0.08); }
.tt-ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tt-title { flex: 1; min-width: 0; }
.tt-avs .av { border-color: var(--panel); }
.tt-avs .av.more { background: var(--panel-2); color: var(--ink-2); font-size: 11px; font-weight: 600; display: grid; place-items: center; }
.tt-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.tt-head h3 { margin: 0; font-size: 17px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-head .muted { font-size: 13px; }
.tpfield { margin: 10px 0; }
.tplabel { display: block; font-weight: 500; font-size: 14px; margin-bottom: 6px; }
.teampick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); min-height: 44px; }
.tpchip { padding: 5px 12px; border-radius: 999px; background: var(--panel-2); color: var(--ink-2); font-size: 13px; font-weight: 500; border: 1px solid transparent; }
.tpchip:hover { filter: none; border-color: var(--line-2); }
.tpchip.sel { background: var(--blu); color: var(--ink); }
.tpchip.sel::before { content: "✓ "; }
.tpnew { flex: 1; min-width: 110px; border: 0; margin: 0; padding: 5px 6px; background: transparent; box-shadow: none !important; font-size: 13px; }
.tt-n { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.tcardteam .tt-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 8px; border: 0; }
.tt-p { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 0 -2px; border-radius: 12px; min-width: 0; transition: background 0.12s; }
.tt-p:hover { background: var(--panel-2); }
.tt-p.isme b { color: var(--blu-ink); }
.tt-p > div { min-width: 0; }
.tt-p b { display: block; font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-p em { display: block; font-style: normal; font-size: 12.5px; color: var(--ink-2); }
.tt-p > div > span { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-faces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tt-face { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--panel-2); font-size: 13px; font-weight: 500; }
.mlist { padding: 6px 22px; }
.tt-team { width: 120px; font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-mail { width: 200px; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 860px) { .tt-team, .tt-mail { display: none; } }
.tt-person { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.tt-person:last-child { border-bottom: 0; }
.tt-person.isme .tt-who b span:first-child { color: var(--blu-ink); }
.tt-who { flex: 1; min-width: 0; }
.tt-who b { display: block; font-weight: 600; font-size: 14.5px; }
.tt-who > span { display: block; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-person .medit { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; flex: none; align-self: center; margin: 0; opacity: 0; transition: opacity 0.15s; }
.tt-person .medit svg { width: 17px; height: 17px; }
.tt-person .medit-gap { width: 32px; flex: none; } /* no edit button for others' rows without admin access */
.tt-person:hover .medit, .tt-person .medit:focus-visible { opacity: 1; }
@media (hover: none) { .tt-person .medit { opacity: 1; } }
.mteam { grid-column: 1 / -1; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 6px 0 -6px; }
.mcard { background: var(--panel); border-radius: var(--r); padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.mhead { display: flex; align-items: center; gap: 14px; }
.mhead .mname { font-weight: 600; font-size: 16px; }
.mhead > div { flex: 1; min-width: 0; }
.medit { align-self: flex-start; gap: 6px; }
.medit svg { width: 15px; height: 15px; }
.mhead .mname em { font-style: normal; font-weight: 400; color: var(--muted); }
.mhead .mrole { font-size: 13.5px; color: var(--muted); }
.mstat { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--muted); }
.mstat b { color: var(--ink); font-weight: 600; }
.mnow { font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.mnow .lbl { font-size: 12.5px; color: var(--muted); }
.mnow span.item { display: flex; gap: 10px; align-items: baseline; }
.mnow span.item::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #f2c94c; flex: none; transform: translateY(-1px); }
.mcontact { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; }
.mcontact a { text-decoration: none; }
.mcontact a:hover { color: var(--ink); }
.crews { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 20px; margin-bottom: 20px; }
.crew { border-radius: var(--r); padding: 16px 18px; }
.crew:nth-child(3n+1) { background: var(--lav-soft); } .crew:nth-child(3n+2) { background: var(--yel-soft); } .crew:nth-child(3n+3) { background: var(--blu-soft); }
.crew-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.crew-head b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.crew-head a { font-size: 13.5px; color: var(--ink-2); text-decoration: none; }
.crew ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.crew li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.crew li .who { flex: 1; min-width: 0; }
.crew li .who span { display: block; font-size: 12.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty-card { background: var(--panel); border-radius: var(--r); padding: 26px; text-align: center; color: var(--muted); grid-column: 1 / -1; }
.empty-card .btn, .empty-card button { margin-top: 12px; }

/* ---------------------------------------------------------------- settings: profile */
.profile-grid { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 30px; }
.photo { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding-top: 6px; }
.photo small { margin: 0; }
.subh { margin: 18px 0 0; font-size: 14px; color: var(--muted); font-weight: 500; }

/* ---------------------------------------------------------------- project wizard */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0 0 20px; gap: 12px; }
.steps li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: var(--panel); color: var(--muted); font-weight: 500; font-size: 14.5px; cursor: pointer; user-select: none; }
.steps li i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13.5px; background: var(--panel-2); color: var(--ink-2); flex: none; }
.steps li.done { color: var(--ink); }
.steps li.done i { background: var(--ok-soft); color: var(--ok); font-size: 0; }
.steps li.done i::before { content: "✓"; font-size: 14px; }
.steps li.cur { background: var(--blu); color: var(--ink); }
.steps li.cur i { background: var(--panel); color: var(--ink); font-size: 13.5px; }
.steps li.cur i::before { content: none; }
.steps li.locked { opacity: 0.55; cursor: not-allowed; }
.wstep { display: none; }
#new[data-view="1"] #w1, #new[data-view="2"] #w2, #new[data-view="3"] #w3, #new[data-view="4"] #w4 { display: block; }
#poster[data-view="1"] #p1, #poster[data-view="2"] #p2, #poster[data-view="3"] #p3, #poster[data-view="4"] #p4 { display: block; }
.stepfoot { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }

.drop {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 60px 20px; margin: 4px 0 0;
  border: 2px dashed var(--line-2); border-radius: var(--r); cursor: pointer; font-weight: 400; background: var(--panel-2);
}
.drop svg { width: 30px; height: 30px; padding: 16px; box-sizing: content-box; border-radius: 50%; background: var(--lav); margin-bottom: 8px; }
.drop b { font-size: 18px; font-weight: 600; }
.drop:hover, .drop.over { border-color: var(--lav-ink); background: var(--lav-soft); }
.bar { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; margin-top: 14px; }
.bar div { height: 100%; width: 0; background: var(--lav-ink); transition: width 0.2s; }

.fs { padding: 20px 0; border-top: 1px solid var(--line); }
.cardhead + .fs { border-top: 0; padding-top: 2px; }
.fs h3 { display: flex; align-items: center; gap: 10px; }
.fs h3 i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12.5px; background: var(--yel); }
.fs textarea { margin-top: 0; }
.styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.style { position: relative; border: 1px solid var(--line-2); border-radius: 14px; padding: 10px 10px 12px; cursor: pointer; background: var(--panel); }
.style:hover { border-color: var(--muted); }
.style.sel::after { content: "✓"; position: absolute; top: 16px; right: 16px; width: 24px; height: 24px; border-radius: 50%; background: var(--panel); color: var(--blu-ink); display: grid; place-items: center; font-size: 13px; font-weight: 700; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); }
.style .sheet { width: 100%; height: 70px; object-fit: cover; border-radius: 9px; margin-bottom: 10px; display: block; background: #16161d; }
.style .sws { display: flex; height: 70px; margin-bottom: 10px; border-radius: 9px; overflow: hidden; }
.style .sws i { flex: 1; }
.style b { display: block; font-size: 14.5px; font-weight: 600; }
.style span { font-size: 13px; color: var(--muted); }
.style.add { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-style: dashed; min-height: 136px; background: transparent; text-decoration: none; }
.style.add .plus { width: 40px; height: 40px; border-radius: 12px; background: var(--lav-soft); color: var(--lav-ink); display: grid; place-items: center; font-size: 24px; line-height: 1; margin-bottom: 8px; }

.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mode { display: block; position: relative; border: 1px solid var(--line-2); border-radius: 14px; padding: 16px 18px 16px 50px; margin: 0; background: var(--panel); font-weight: 400; cursor: pointer; }
.mode input { position: absolute; left: 18px; top: 19px; }
.mode:has(input:checked) { border-color: var(--blu-ink); background: var(--blu-soft); }
.mode b { font-weight: 600; }
.mode b em { font-style: normal; font-size: 11.5px; font-weight: 500; padding: 2px 9px; border-radius: 999px; background: var(--yel); margin-left: 6px; vertical-align: 1px; }
.mode span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 4px; }
.mode button { margin-top: 8px; }
.cstate.ok { color: var(--ok); } .cstate.err { color: var(--bad); }
.mode .cstate { font-weight: 500; }

details { margin-top: 12px; }
summary { cursor: pointer; font-weight: 500; list-style: none; display: flex; align-items: center; gap: 8px; }
summary::-webkit-details-marker { display: none; }
summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s; margin: 0 4px 0 2px; }
details[open] > summary::before { transform: rotate(45deg); }
details.more { border-radius: 14px; padding: 14px 18px; margin-top: 4px; background: var(--panel-2); }
details.more[open] > summary { margin-bottom: 6px; }

/* reference images */
/* poster / carousel styles learned from examples (designs.js) */
.style .dscol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; height: 70px; margin-bottom: 10px; border-radius: 9px; overflow: hidden; background: var(--panel-2); }
.style .dscol img { width: 100%; height: 100%; object-fit: cover; display: block; }
.style .dscol.n1 { grid-template-columns: 1fr; } .style .dscol.n2 { grid-template-columns: repeat(2, 1fr); } .style .dscol.n3 { grid-template-columns: repeat(3, 1fr); }
.style .dscol .empty { grid-column: 1 / -1; display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.style.off { opacity: 0.55; cursor: default; }
.style .dsst { display: inline-block; margin-top: 6px; }
.dsedit { margin-top: 16px; padding: 18px; border-radius: 16px; background: var(--panel-2); }
.dsedit .dshead { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; }
.dsedit .dshead input { flex: 1; margin: 0; font-weight: 600; }
.dsedit .refs { background: var(--panel); }
.dslink { display: flex; gap: 8px; margin-top: 10px; }
.dslink input { flex: 1; margin: 0; }
.dslinks { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.dslinks li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dslinks a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.dslearned { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--panel); }
.dslearned .sws { display: flex; gap: 6px; margin: 8px 0 4px; }
.dslearned .sws i { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line-2); }
.dsedit .progsteps { margin-top: 10px; }
/* Assets: making a style (Бичлэг / Постер / Carousel), the ⋯ menu on a style, and a style's breakdown */
.mkhead { align-items: center; }
.seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: 12px; background: var(--panel-2); }
.seg button { padding: 7px 16px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); font-weight: 500; font-size: 14px; }
.seg button.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 4px rgba(20, 20, 40, 0.12); }
#refBox .dsedit { margin-top: 4px; padding: 0; background: none; }
.style .more { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; padding: 0; border-radius: 9px; display: grid; place-items: center; background: rgba(18, 18, 18, 0.72); color: #FAFAFA; font-size: 18px; line-height: 1; border: 0; opacity: 0; transition: opacity 0.12s; z-index: 1; }
.style:hover .more, .style .more:focus-visible, .style .more.open { opacity: 1; }
.style.sel .more { right: 46px; }
@media (hover: none) { .style .more { opacity: 1; } }
.moremenu { position: fixed; z-index: 45; min-width: 190px; padding: 6px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line-2); box-shadow: 0 12px 34px rgba(20, 20, 40, 0.22); display: flex; flex-direction: column; animation: pop 0.1s ease-out; }
.moremenu button { display: flex; align-items: center; gap: 10px; justify-content: flex-start; padding: 9px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font-weight: 500; font-size: 14px; text-align: left; }
.moremenu button:hover { background: var(--panel-2); filter: none; }
.moremenu button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.moremenu button.del { color: var(--bad); }
.modal.bd { width: min(760px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 0; }
.bd-top { display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px 16px; border-bottom: 1px solid var(--line); }
.bd-top h2 { margin: 0 0 4px; font-size: 20px; }
.bd-top p { margin: 0; color: var(--ink-2); font-size: 14px; font-weight: 400; }
.bd-top .iconbtn { margin-left: auto; flex: none; }
.bd-body { padding: 18px 24px 24px; display: grid; gap: 18px; }
.bd-sec h3 { margin: 0 0 8px; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; }
.bd-sec > p { margin: 0; font-size: 14.5px; }
.bd-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.bd-color { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 12px; background: var(--panel-2); }
.bd-color i { width: 38px; height: 38px; border-radius: 9px; flex: none; border: 1px solid var(--line-2); }
.bd-color b { display: block; font-size: 13px; font-family: ui-monospace, Menlo, monospace; font-weight: 500; }
.bd-color span { font-size: 12.5px; color: var(--muted); }
.bd-fonts { display: grid; gap: 10px; }
.bd-font { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: end; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); }
.bd-font .sample { font-size: 34px; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-font .meta { text-align: right; font-size: 12.5px; color: var(--muted); }
.bd-font .meta b { display: block; color: var(--ink); font-size: 13.5px; font-weight: 600; }
.bd-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.bd-list { margin: 0; padding-left: 18px; font-size: 14px; display: grid; gap: 4px; }
.bd-kv { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 6px 12px; font-size: 14px; margin: 0; }
.bd-kv dt { color: var(--muted); }
.bd-kv dd { margin: 0; }
.bd-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.bd-imgs img, .bd-sheet { width: 100%; border-radius: 10px; display: block; background: var(--panel-2); }
.bd-imgs img { aspect-ratio: 4 / 5; object-fit: cover; }
.refs { border: 1px dashed var(--line-2); border-radius: 14px; padding: 10px 14px; margin: 12px 0 0; }
.refs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; }
.refs-head b { font-weight: 500; }
.refs-drop { display: none; font-size: 13px; text-align: center; padding: 10px; margin-top: 8px; border-radius: 10px; }
.refs-drop.over { display: block; background: var(--lav); }
.refs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.refs-grid:not(:empty) { margin-top: 10px; }
.ref { position: relative; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); }
.ref img { width: 100%; height: 92px; object-fit: cover; display: block; }
.ref .refnote { width: 100%; border: 0; border-top: 1px solid var(--line); margin: 0; padding: 6px 8px; font-size: 12px; border-radius: 0; }
.ref .refdel { position: absolute; top: 4px; right: 4px; padding: 2px 7px; font-size: 12px; border-radius: 7px; background: rgba(0, 0, 0, 0.6); color: #FAFAFA; }
.ref .refnew { position: absolute; top: 4px; left: 4px; padding: 2px 7px; font-size: 11px; border-radius: 7px; background: var(--yel); font-weight: 600; }

/* progress */
.prog { box-shadow: 0 0 0 2px var(--blu); }
.prog.failed { box-shadow: 0 0 0 2px var(--bad); }
.prog-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.prog-head h2 { margin: 0; }
.spin { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--blu); border-top-color: var(--blu-ink); animation: spin 0.8s linear infinite; flex: none; }
.prog:not(.running) .spin, .prog:not(.running) .prog-bar { display: none; }
.prog-bar { height: 5px; border-radius: 3px; background: var(--blu-soft); overflow: hidden; margin: 14px 0 0; }
.prog-bar div { width: 30%; height: 100%; background: var(--blu-ink); border-radius: 3px; animation: slide 1.4s ease-in-out infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.prog-now { margin: 12px 0 0; }
.prog-more { margin-top: 10px; color: var(--muted); font-size: 14px; }
.progsteps { margin: 8px 0 0; padding-left: 20px; }
.progsteps li { padding: 2px 0; }

/* review */
.review { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 24px; align-items: start; }
.review.land { grid-template-columns: minmax(0, 1fr); }
.player { position: sticky; top: 90px; }
.player video { width: 100%; max-height: 74vh; background: #000; border-radius: 14px; display: block; aspect-ratio: 9 / 16; object-fit: contain; }
.review.land .player { position: static; }
.review.land .player video { aspect-ratio: 16 / 9; max-height: 60vh; }
.editor > .hint { margin-top: 0; }
.panel { border-radius: 14px; padding: 16px 18px; margin: 0 0 14px; background: var(--panel-2); }
details.panel > summary { font-size: 15.5px; }
.srtbtn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.srtbtn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
details.panel[open] > summary { margin-bottom: 12px; }
.panel h3 { margin-bottom: 8px; }
.agentsum { white-space: pre-wrap; font-size: 14px; background: var(--panel); border-radius: 12px; padding: 12px 14px; max-height: 240px; overflow: auto; }
.feedback { margin-top: 14px; border-top: 1px solid var(--line-2); padding-top: 6px; }
.caplist { max-height: 440px; overflow: auto; display: flex; flex-direction: column; gap: 5px; }
.caprow { display: grid; grid-template-columns: 64px 1fr; gap: 8px; align-items: center; }
.caprow input { margin: 0; padding: 7px 12px; }
.tchip { padding: 5px 0; font-size: 12px; font-weight: 500; background: var(--panel); color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 9px; font-variant-numeric: tabular-nums; }
.tchip:hover { background: var(--blu-soft); filter: none; }

/* scenes */
.scenelist { display: flex; flex-direction: column; gap: 10px; max-height: 620px; overflow: auto; }
.scene { border-radius: 12px; padding: 10px 12px; background: var(--panel); }
.sc-head { display: grid; grid-template-columns: minmax(120px, 1.4fr) 76px 76px minmax(110px, 1.2fr) minmax(80px, 1fr) auto auto; gap: 8px; align-items: end; }
.sc-head label { margin: 0; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.sc-head input, .sc-head select { margin: 3px 0 0; padding: 6px 8px; font-size: 13px; color: var(--ink); border-radius: 9px; }
.scene textarea { margin-top: 8px; font: 12px/1.45 ui-monospace, Menlo, Consolas, monospace; border-radius: 9px; }
.sc-meta { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* graphics list (project review + graphics tool) */
.kinds { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--muted); margin-bottom: 14px; }
.kinds b { color: var(--ink); margin-right: 4px; font-weight: 500; }
.glist { display: flex; flex-direction: column; gap: 10px; }
.gitem { border-radius: 14px; padding: 10px 14px 14px; background: var(--panel-2); }
.panel .gitem { background: var(--panel); }
.gi-head { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.gi-head label { margin: 0; font-size: 11.5px; color: var(--muted); }
.gi-head select, .gi-head input { margin: 3px 0 0; padding: 6px 8px; font-size: 13px; color: var(--ink); border-radius: 9px; }
.gi-head .k { width: 140px; }
.gi-head .t { width: 92px; }
.gi-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0 10px; margin-top: 4px; }
.gi-body label { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); }
.gi-body input, .gi-body select, .gi-body textarea { margin: 3px 0 0; padding: 6px 8px; font-size: 13px; color: var(--ink); border-radius: 9px; }
.gi-body label.wide { grid-column: 1 / -1; }
.gitem .ctx { color: var(--muted); font-size: 12.5px; margin-top: 8px; }
.stills { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 14px; }
.stills figure { margin: 0; background: #5a6470; border-radius: 12px; overflow: hidden; }
.stills img { width: 100%; display: block; aspect-ratio: 9/16; object-fit: contain; }
.stills figcaption { font-size: 12px; padding: 6px 8px; background: var(--panel); }

/* send */
.checks { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 10px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; }
.checks svg { color: var(--ok); margin-top: 1px; }
.need { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px; background: var(--panel-2); font-size: 14px; }
.sendrow { align-items: stretch; }
.exportdir { flex: 0 1 340px; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel-2); }
.exportdir > svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-linejoin: round; }
.exportdir > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.exportdir .hint { font-size: 11.5px; margin: 0; }
.exportdir input { border: 0; background: transparent; padding: 0; box-shadow: none; font: 13px/1.4 ui-monospace, Menlo, Consolas, monospace; color: var(--ink); }
.exportdir input:focus { box-shadow: none; }
.exportdir input:placeholder-shown { font-family: inherit; }
.exportdir button { flex: none; }
.exportdir .xbtn { padding: 6px 10px; font-size: 16px; line-height: 1; }
.cacct { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 16px; margin: 4px 0 14px; border-radius: 14px; background: var(--panel-2); }
.cacct-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--yel-soft); flex: none; }
.cacct-ic svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.8; }
.cacct > div { display: flex; flex-direction: column; min-width: 0; }
.cacct .hint { font-size: 12px; margin: 0; }
.cacct b { font-weight: 600; word-break: break-all; }
.mainproj { margin-top: 16px; border-radius: 14px; padding: 16px 18px; background: var(--yel-soft); display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.mainproj b { display: block; font-size: 17px; margin: 2px 0; font-weight: 600; }
.mainproj code { font-size: 12px; word-break: break-all; color: var(--muted); }
.mainproj .actions { margin: 0; }

/* misc */
.list .seq { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.list .seq:last-child { border-bottom: 0; }
.assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; font-size: 14px; }
.assets .ok { color: var(--ok); } .assets .no { color: var(--warn); }
.result { margin: 12px 0 0; white-space: pre-wrap; }
.result:empty { display: none; }
.result.ok { color: var(--ok); } .result.err { color: var(--bad); }
.howto { margin: 0 0 12px; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }

/* ---------------------------------------------------------------- activity log drawer + toasts */
/* activity: a notification box that drops down under the bell (app.js places it) */
.log {
  position: fixed; top: 80px; right: 24px; width: 380px; max-width: calc(100vw - 32px); max-height: min(520px, 70vh); z-index: 30;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 50px rgba(30, 30, 60, 0.18);
  display: flex; flex-direction: column; font-size: 14px; overflow: hidden;
  opacity: 0; transform: translateY(-6px) scale(0.98); transform-origin: top right; pointer-events: none; visibility: hidden;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.log.open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.loghead { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 16px; }
.loghead b { font-weight: 600; }
#log { list-style: none; margin: 0; padding: 6px 18px 20px; overflow: auto; flex: 1; }
#log:empty::before { content: "Одоогоор юу ч алга."; display: block; color: var(--muted); padding: 14px 0; }
#log li { padding: 10px 0; border-bottom: 1px solid var(--line); }
#log li.err { color: var(--bad); } #log li.ok { color: var(--ok); }
#log time { color: var(--muted); font-size: 11.5px; display: block; }
.toasts { position: fixed; right: 24px; bottom: 24px; z-index: 30; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast {
  pointer-events: auto; max-width: 440px; display: flex; gap: 10px; align-items: flex-start; padding: 12px 12px 12px 16px; border-radius: 14px; font-size: 14px;
  background: #2b2b38; color: #FAFAFA; box-shadow: 0 10px 30px rgba(30, 30, 60, 0.25); animation: pop 0.18s ease-out;
}
.toast.err { background: var(--bad); }
.toast.ok::before { content: "✓"; color: #6ee7a0; font-weight: 700; }
.toast button { padding: 0 4px; background: transparent; color: inherit; opacity: 0.7; font-size: 17px; line-height: 1; }
@keyframes pop { from { transform: translateY(8px); opacity: 0; } }
/* ---------------------------------------------------------------- poster */
.pfields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.pfields label.wide { grid-column: 1 / -1; }
.pfields.compact { grid-template-columns: 1fr; }
.pfields.compact label { margin: 6px 0; font-size: 13px; }
.pfields.compact input, .pfields.compact textarea { padding: 8px 12px; margin-top: 4px; }
.fs.first { border-top: 0; padding-top: 2px; }
.sizes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.size { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px 12px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); color: var(--ink); font-weight: 400; white-space: normal; }
.size:hover { border-color: var(--muted); filter: none; }
.size.sel { background: var(--blu-soft); }
.size .shape { height: 84px; width: 84px; display: grid; place-items: center; margin-bottom: 6px; }
.size .shape i { display: block; max-width: 84px; max-height: 84px; height: 84px; border-radius: 6px; background: var(--lav); }
.size.sel .shape i { background: var(--blu-ink); }
.size b { font-weight: 600; font-size: 14.5px; }
.size span:last-child { font-size: 12.5px; color: var(--muted); }
.variants { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.variant { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 10px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--panel); color: var(--ink); text-align: left; font-weight: 400; white-space: normal; }
.variant:hover { border-color: var(--muted); filter: none; }
.vimg { display: block; aspect-ratio: var(--ar, 4/5); border-radius: 10px; overflow: hidden; background: var(--panel-2); }
.vimg img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vtxt b { display: block; font-weight: 600; }
.vtxt span { display: block; font-size: 13px; color: var(--muted); }
.vpick { align-self: flex-start; font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 999px; background: var(--panel-2); }
.variant.sel .vpick { background: var(--blu); }
.psum { margin: 0 0 16px; }
.psum .agentsum { margin-top: 10px; background: var(--panel-2); }
.pedit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pedit .panel { margin: 0; }
.pscope { margin: 10px 0 0; }
/* carousel: slide list (step 1 and 3), slide strips (step 3), slide gallery (step 4) */
.cslides { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 4px; }
.cslide { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); }
.cslide .cnum { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 13px; background: var(--yel-soft); color: var(--ink); margin-top: 4px; }
.cslide .cfields { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cslide .cfields input, .cslide .cfields textarea { margin: 0; }
.cslide .cfields small { color: var(--muted); font-size: 12px; }
.cslide .cdel { margin-top: 2px; }
.cslides.compact .cslide { padding: 8px; gap: 8px; grid-template-columns: 26px minmax(0, 1fr) auto; }
.cslides.compact .cnum { width: 24px; height: 24px; font-size: 12px; }
.cslides.compact input, .cslides.compact textarea { padding: 7px 10px; font-size: 13px; }
.cslides .cadd { align-self: flex-start; }
.variants.car { grid-template-columns: 1fr; }
.cstrip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.cstrip img { height: 230px; aspect-ratio: var(--ar, 4/5); flex: none; border-radius: 8px; background: var(--panel-2); object-fit: cover; }
.pfinal.car { grid-template-columns: minmax(0, 1fr); }
.cfinal { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.cfinal a { position: relative; display: block; border-radius: 10px; overflow: hidden; background: var(--panel-2); }
.cfinal img { width: 100%; display: block; }
.cfinal a span { position: absolute; left: 8px; top: 8px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(18, 18, 18, 0.7); color: #FAFAFA; }
.psbtn { display: inline-flex; align-items: center; gap: 8px; background: #001e36; color: #31a8ff; border: 1px solid #0b3b5e; }
.psbtn:hover { background: #022a4a; filter: none; }
.ps-badge { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; border: 1.5px solid #31a8ff; font-size: 11px; font-weight: 800; letter-spacing: -0.02em; }
.pfinal { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 28px; align-items: center; }
.pfinal img { width: 100%; border-radius: 12px; background: var(--panel-2); display: block; box-shadow: 0 10px 30px rgba(20, 20, 40, 0.12); }
.pfinal h2 { font-size: 22px; margin-bottom: 4px; }
.pitem .pic.thumb { overflow: visible; padding: 0; } /* not hidden: the finished tick sits over the corner */
.pitem .pic.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }

/* ---------------------------------------------------------------- sign-in */
body.locked > .side, body.locked > main { visibility: hidden; }
.login { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; background: var(--bg); overflow: auto; }
.login-card { width: min(440px, 100%); background: var(--panel); border-radius: 22px; padding: 34px 32px 26px; box-shadow: 0 20px 60px rgba(30, 30, 60, 0.1); animation: pagein 0.3s ease-out; }
.login-logo { width: 120px; display: block; margin-bottom: 26px; filter: brightness(0); }
[data-theme="dark"] .login-logo { filter: brightness(0) invert(1); }
.login-card h1 { margin-bottom: 4px; }
.login-card .lead { margin-bottom: 22px; }
.lg-btn { width: 100%; height: 46px; }
/* «Намайг сана»: a switch with a short line on what it keeps */
.lg-remember { display: flex; align-items: center; gap: 12px; margin: 6px 0 4px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 12px; cursor: pointer; font-weight: 400; transition: border-color 0.15s, background 0.15s; }
.lg-remember:hover { background: var(--panel-2); }
.lg-remember input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.lg-sw { position: relative; width: 38px; height: 22px; flex: none; border-radius: 999px; background: var(--line-2); transition: background 0.18s; }
.lg-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #FAFAFA; box-shadow: 0 1px 3px rgba(20, 20, 40, 0.25); transition: transform 0.18s; }
.lg-remember input:checked + .lg-sw { background: var(--ok); }
.lg-remember input:checked + .lg-sw::after { transform: translateX(16px); }
.lg-remember input:focus-visible + .lg-sw { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 30%, transparent); }
.lg-rtext { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.lg-rtext b { font-size: 14px; font-weight: 500; }
.lg-rtext small { font-size: 12px; color: var(--muted); }
#lgForm .actions, #lgReg .actions { flex-direction: column; align-items: stretch; }

.modal-back { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgba(12, 12, 22, 0.55); -webkit-backdrop-filter: blur(6px) saturate(0.8); backdrop-filter: blur(6px) saturate(0.8); animation: pop 0.12s ease-out; } /* the page behind blurs and dims so the window has the focus */
.modal { width: min(420px, 100%); background: var(--panel); border-radius: var(--r); padding: 22px 24px; box-shadow: 0 20px 60px rgba(20, 20, 40, 0.3); }
.modal p { margin: 0 0 4px; font-size: 16px; font-weight: 500; }
.modal .actions { justify-content: flex-end; }
.modal input { margin: 12px 0 6px; }
button.danger-solid { background: var(--bad); color: #FAFAFA; }
html[lang="en"] #log:empty::before { content: "Nothing yet."; }
html[lang="en"] .colbody:empty::before { content: "No tasks"; }
html[lang="en"] .pitem.cur .pname::after { content: "open"; }

/* ---------------------------------------------------------------- narrow screens */
@media (max-width: 1280px) {
  .dash { grid-template-columns: minmax(0, 1fr); }
  .dash-side { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .dash-side .card { margin-bottom: 0; }
}
@media (max-width: 1100px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-row, .dash-row.even { grid-template-columns: 1fr; }
  .addtask { grid-template-columns: 1fr 1fr; }
  .addtask #tTitle { grid-column: 1 / -1; }
  .review { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); }
  .sc-head { grid-template-columns: 1fr 1fr 1fr; }
  .me-txt { display: none; }
  .me { padding: 5px; }
}
@media (max-width: 860px) {
  body { display: block; height: auto; overflow: auto; }
  .side { position: sticky; top: 0; z-index: 10; flex-direction: row; align-items: center; gap: 8px; padding: 10px 12px; overflow-x: auto; border: 0; border-bottom: 1px solid var(--line); }
  .brand { padding: 0 4px 0 0; }
  .logo { flex: none; }
  .logo img { width: 96px; }
  .sidetoggle, .navlabel { display: none; }
  .side-foot { margin: 0 0 0 8px; padding: 0; }
  .themebtn { width: 36px; height: 36px; border-radius: 10px; }
  #nav, .nav2 { flex-direction: row; }
  .nav2 { margin: 0; padding: 0; border: 0; }
  #nav a, .nav2 a { padding: 8px 10px; white-space: nowrap; font-size: 14px; gap: 6px; }
  #nav a svg, .nav2 a svg { display: none; }
  .nav2 a[data-scroll] { display: none; }
  main { overflow: visible; padding: 0 16px 60px; }
  .topbar { position: static; padding: 14px 0 20px; height: auto; -webkit-mask-image: none; mask-image: none; }
  .search { width: auto; flex: 1; max-width: none; }
  .topbar { flex-wrap: wrap; }
  .tophead { order: 3; flex-basis: 100%; }
  .me { margin-left: auto; }
  .tophead .pagehead { flex-wrap: wrap; }
  .tophead .lead { white-space: normal; }
  .topbar .grow { display: none; }
  h1 { font-size: 24px; }
  .card { padding: 18px 16px; }
  .grid2, .grid3, .modes, .review, .profile-grid, .dash-side, .members, .crews, .pfields, .pedit, .pfinal, .variants { grid-template-columns: 1fr; }
  .sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { gap: 12px; }
  .stat { min-height: 116px; padding: 14px 16px 16px; }
  .stat b { font-size: 26px; }
  .player { position: static; max-width: 320px; }
  .steps li span { display: none; }
  .steps li { justify-content: center; }
  .seqpick select { min-width: 0; }
  .pitem { flex-wrap: wrap; }
  .pitem .pmain { min-width: 0; flex-basis: 50%; }
  .pitem .chips { order: 3; width: 100%; justify-content: flex-start; padding-left: 58px; }
  .history .pitem .chips { padding-left: 50px; }
  .pitem .chips:empty { display: none; }
}

/* ---------------------------------------------------------------- a member's page: a slim header, open and finished work, insights */
a.tt-p { color: inherit; text-decoration: none; }
.tt-person[data-mview], .crew li[data-mview] { cursor: pointer; }
.tt-person[data-mview]:hover .tt-who b > span:first-child, .crew li[data-mview]:hover .who b > span:first-child { color: var(--blu-ink); }
.mp-back { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.mp-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-left: -4px; }
.mp-id { flex: 1; min-width: 0; }
.mp-id h2 { margin: 0; font-size: 19px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mp-id h2 em { font-style: normal; font-weight: 500; font-size: 15px; color: var(--muted); }
.mp-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 5px; font-size: 13.5px; color: var(--ink-2); }
.mp-sub > span:first-child { margin-right: 4px; }
.mp-note { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-head svg, .mp-card svg, .mp-side svg, .mp-more svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.mp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .mp-grid { grid-template-columns: minmax(0, 1fr); } }
.mp-card .cardhead h2, .mp-side .cardhead h2 { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.mp-hic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--lav-soft); color: var(--lav-ink); flex: none; }
.mp-count { font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--panel-2); border-radius: 999px; padding: 1px 9px; font-variant-numeric: tabular-nums; }
.mp-none { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }

.mp-task { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); min-width: 0; }
.mp-list > .mp-task:first-child { border-top: 0; padding-top: 2px; }
.mp-tt { flex: 1; min-width: 0; }
.mp-tt b { display: block; font-weight: 500; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-tt > span { display: block; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-tt a { color: inherit; text-decoration: none; } .mp-tt a:hover { color: var(--blu-ink); }
.mp-task .stpill { margin-left: 0; flex: none; }
.mp-due { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mp-due svg { width: 13px; height: 13px; }
.mp-due em { font-style: normal; font-weight: 600; margin-right: 2px; }
.mp-due.soon { color: var(--warn); } .mp-due.late { color: var(--bad); }
.mp-task.done time { font-size: 12.5px; color: var(--muted); white-space: nowrap; min-width: 54px; text-align: right; font-variant-numeric: tabular-nums; }
.mp-ok { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); flex: none; }
.mp-ok svg { width: 13px; height: 13px; stroke-width: 2.6; }

.mp-group { border: 1px solid var(--line); border-radius: 14px; padding: 4px 14px; margin-top: 10px; }
.mp-group:first-of-type { margin-top: 0; }
.mp-ghead { display: flex; align-items: center; gap: 10px; padding: 9px 0; min-width: 0; }
.mp-ghead b { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-ghead b a { color: inherit; text-decoration: none; } .mp-ghead b a:hover { color: var(--blu-ink); }
.mp-ghead .pk-ic { width: 28px; height: 28px; border-radius: 8px; }
.mp-ghead .avs { display: flex; flex: none; }
.mp-ghead .avs > * { margin-left: -6px; } .mp-ghead .avs > :first-child { margin-left: 0; }
.mp-ghead .avs .av { box-shadow: 0 0 0 2px var(--panel); }

.mp-week + .mp-week { margin-top: 14px; }
.mp-whead { display: flex; align-items: baseline; gap: 10px; padding: 4px 0 8px; }
.mp-whead b { font-size: 13.5px; font-weight: 600; }
.mp-whead > span:not(.mp-count) { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mp-whead .mp-count { margin-left: auto; }
.mp-week .mp-none { padding: 10px 0; border-top: 1px solid var(--line); margin: 0; }
.mp-more { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 16px; }

.mp-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.mp-kpi { background: var(--panel-2); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.mp-kpi > span { display: block; font-size: 12px; color: var(--ink-2); margin-bottom: 4px; }
.mp-kpi > div { display: flex; align-items: baseline; gap: 3px; flex-wrap: wrap; }
.mp-kpi b { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mp-kpi small { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.mp-delta { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px; margin-left: 6px; align-self: center; }
.mp-delta.up { background: var(--ok-soft); color: var(--ok); } .mp-delta.down { background: var(--bad-soft); color: var(--bad); }
.mp-lbl { display: block; font-size: 12px; color: var(--ink-2); margin-bottom: 10px; }
.mp-chart { margin-bottom: 18px; }
.mp-bars { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; align-items: end; }
.mp-bar { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.mp-bar i { width: 100%; max-width: 24px; border-radius: 6px 6px 3px 3px; background: var(--lav); }
.mp-bar.cur i { background: var(--lav-ink); }
.mp-bar em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--ink-2); min-height: 13px; font-variant-numeric: tabular-nums; }
.mp-bar small { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mp-bar.cur small { color: var(--lav-ink); font-weight: 600; }
.mp-ins { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mp-ins li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.4; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); }
.mp-ins li i { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--lav-ink); }
.mp-ins li.ok i { background: var(--ok); } .mp-ins li.warn i { background: var(--warn); } .mp-ins li.bad i { background: var(--bad); }

/* a team project's owner, picked in its create and edit windows */
.tpowner { margin: 0 0 12px; }
.tpowner .tplabel { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.tpowner .pick { width: 100%; }
.tpowner .pick .pk-lbl b { font-weight: 500; }
.tpowner .pick.need { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.tpownerro { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }
.tpownerro .pk-ic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* Tasks → «Идэвхтэй ажлууд» (admins): a small card per person */
.ao { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-bottom: 20px; align-items: start; }
.ao-card { background: var(--panel); border-radius: 16px; padding: 14px 16px 12px; min-width: 0; }
.ao-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ao-who[data-mview] { cursor: pointer; }
.ao-who[data-mview]:hover b { color: var(--blu-ink); }
.ao-name { flex: 1; min-width: 0; line-height: 1.25; }
.ao-name b { display: block; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ao-name small { display: block; font-size: 11.5px; color: var(--muted); }
.ao-name small span { font-variant-numeric: tabular-nums; }
.ao-name em { font-style: normal; color: var(--bad); }
.ao-n { font-size: 18px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ao-bar { display: block; height: 3px; margin: 10px 0 6px; border-radius: 2px; background: color-mix(in srgb, var(--lav-ink) 22%, transparent); overflow: hidden; }
.ao-bar i { display: block; height: 100%; background: #f08a3c; }
.ao-t { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; min-width: 0; }
.ao-t > i { width: 6px; height: 6px; border-radius: 50%; background: var(--st); flex: none; }
.ao-tt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.ao-due { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.ao-due.late { color: var(--bad); font-weight: 600; }
.ao-more { margin-top: 4px; padding: 2px 0; border: 0; background: none; color: var(--blu-ink); font-size: 12px; font-weight: 600; }
.ao-more:hover { filter: none; text-decoration: underline; }
.pk-tip { display: flex; align-items: flex-start; gap: 8px; padding: 2px 4px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.pk-tip svg { width: 15px; height: 15px; flex: none; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* the profile box's menu: edit my profile, sign out */
.me-chev { width: 14px; height: 14px; flex: none; margin-left: 2px; fill: none; stroke: var(--muted); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s; }
.me.open .me-chev { transform: rotate(180deg); }
.memenu { position: fixed; z-index: 45; width: 250px; padding: 6px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line-2); box-shadow: 0 16px 40px rgba(20, 20, 40, 0.22); animation: pop 0.1s ease-out; }
.mm-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; min-width: 0; }
.mm-head > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.mm-head b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-head small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.memenu > a, .memenu > button { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; height: 38px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; text-align: left; }
.memenu > a:hover, .memenu > button:hover { background: var(--panel-2); filter: none; }
.memenu svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--ink-2); }
.memenu .mm-out, .memenu .mm-out svg { color: var(--bad); }
.memenu .mm-out:hover { background: var(--bad-soft); }
.mm-sep { height: 1px; margin: 6px 4px; background: var(--line); }

/* a team project's sub tasks («Дэд ажлууд»), inside its card in Temporary teams */
.subs { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.subs-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.subs-head b { font-size: 13px; font-weight: 600; }
.subs-bar { flex: 1; max-width: 120px; height: 4px; margin-left: auto; border-radius: 2px; background: var(--line); overflow: hidden; }
.subs-bar i { display: block; height: 100%; background: var(--ok); }
.subs-n { font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.sub { display: flex; align-items: center; gap: 9px; min-height: 34px; padding: 3px 0; font-size: 13.5px; }
.sub input[type="checkbox"] { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--ok); }
.sub-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub.done .sub-t { color: var(--muted); text-decoration: line-through; }
.sub-doing { width: 7px; height: 7px; border-radius: 50%; background: #f08a3c; flex: none; }
.sub-due { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.sub-due.late { color: var(--bad); font-weight: 600; }
.sub .av.sm { width: 22px; height: 22px; font-size: 9.5px; }
.sub-del { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 16px; line-height: 1; opacity: 0; flex: none; }
.sub:hover .sub-del { opacity: 1; }
.sub-del:hover { background: var(--bad-soft); color: var(--bad); filter: none; }
.sub-add { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 2px 4px 2px 0; border-radius: 10px; }
.sub-add:focus-within { background: var(--panel); }
.sub-plus { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.sub-add input { flex: 1; min-width: 0; height: 32px; padding: 0 4px; border: 0; background: none; font-size: 13.5px; box-shadow: none; }
.sub-add input:focus { outline: none; box-shadow: none; }
.sub-who { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; flex: none; }
.sub-who .pk-ic { width: 26px; height: 26px; border-radius: 50%; }
.sub-who .av.sm { width: 26px; height: 26px; }
.sub-who:hover { filter: none; }
.subchip svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.sub .sub-who { width: 26px; height: 26px; }
.sub .sub-who .pk-ic { width: 22px; height: 22px; border-radius: 50%; border: 1.5px dashed var(--line-2); background: none; }
.sub .sub-who .pk-ic svg { width: 12px; height: 12px; }
.sub .sub-who.empty { opacity: 0.7; }
.sub:hover .sub-who.empty { opacity: 1; }

/* the task form: a new task, or — with a project picked — a comment on that project */
.tinput { position: relative; display: block; margin: 0; min-width: 0; }
.tinput input { width: 100%; padding-left: 46px; }
.tmode { position: absolute; left: 7px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--yel-soft); color: var(--yel-ink); transition: background 0.15s, color 0.15s; pointer-events: none; }
.tmode svg, #tGo svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.commenting .tmode { background: var(--blu-soft); color: var(--blu-ink); }
.commenting .tinput input { border-color: color-mix(in srgb, var(--blu-ink) 45%, var(--line-2)); }
.addtask .pick:disabled, .addtask input:disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(1); }
#tGo { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.commenting #tGo { background: var(--blu-ink); color: #FAFAFA; }
/* a project's comments: a chip on its tasks and team card, opening the thread */
.cchip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border: 0; border-radius: 999px; background: var(--blu-soft); color: var(--blu-ink); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cchip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cchip.zero { background: none; color: var(--muted); opacity: 0.55; padding: 0 5px; }
.cchip:hover { filter: none; opacity: 1; }
.cpop { width: 340px; }
.cp-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); min-width: 0; }
.cp-head svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--blu-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cp-head b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-list { max-height: 300px; overflow-y: auto; padding: 4px 14px; }
.cp-item { display: flex; gap: 10px; padding: 9px 0; }
.cp-body { flex: 1; min-width: 0; }
.cp-meta { display: flex; align-items: baseline; gap: 8px; }
.cp-meta b { font-size: 13px; font-weight: 600; }
.cp-meta time { font-size: 11.5px; color: var(--muted); }
.cp-body p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.cp-del { margin-left: auto; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 15px; line-height: 1; opacity: 0; }
.cp-item:hover .cp-del { opacity: 1; }
.cp-del:hover { background: var(--bad-soft); color: var(--bad); filter: none; }
.cp-none { margin: 12px 0; font-size: 13px; color: var(--muted); }
.cp-new { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--line); }
.cp-new input { flex: 1; min-width: 0; height: 36px; margin: 0; }
.cp-new .iconbtn { width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--blu-ink); color: #FAFAFA; display: grid; place-items: center; padding: 0; }
.cp-new .iconbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* a comment acted on: ticked off with who did it */
.cp-count { margin-left: auto; flex: none; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cp-done { align-self: flex-start; width: 26px; height: 26px; margin-top: 2px; padding: 0; flex: none; border-radius: 50%; border: 1.5px solid var(--line-2); background: none; color: transparent; display: grid; place-items: center; transition: background 0.12s, color 0.12s, border-color 0.12s; }
.cp-done svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cp-done:hover { filter: none; border-color: var(--ok); color: var(--ok); }
.cp-done.on { background: var(--ok); border-color: var(--ok); color: #FAFAFA; }
.cp-item.done p { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.cp-item.done > .av { opacity: 0.6; }
.cp-by { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 11.5px; color: var(--ok); font-weight: 500; }
.cp-by svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cchip.alldone { background: var(--ok-soft); color: var(--ok); }
.chip.master { background: var(--yel-soft); color: var(--yel-ink); font-weight: 600; }
/* a member's page: the nickname leads, Овог (faded) and Нэр after it on the same line, a thin bar between */
.mp-id h2 { align-items: baseline; row-gap: 2px; }
.mp-nick { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.mp-names { display: inline-flex; align-items: baseline; gap: 6px; padding-left: 12px; margin-left: 4px; border-left: 1.5px solid var(--line-2); font-size: 22px; line-height: 1.1; letter-spacing: -0.01em; } /* one size with the nickname; weight and colour tell them apart */
.mp-last { color: var(--muted); font-weight: 400; }
.mp-first { color: var(--ink-2); font-weight: 400; }
.mp-id h2 .chip { align-self: center; }

/* a member's page header: tinted in their colour, a ringed photo, name and role, contact and «Засах» as pills */
.mp-head { position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px; padding: 20px 22px;
  background: linear-gradient(105deg, color-mix(in srgb, var(--mc) 42%, var(--panel)) 0%, color-mix(in srgb, var(--mc) 12%, var(--panel)) 38%, var(--panel) 70%); }
.mp-head::before { content: ""; position: absolute; left: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: var(--mc); opacity: 0.35; filter: blur(50px); pointer-events: none; }
.mp-head > * { position: relative; }
.mp-avwrap { flex: none; display: grid; place-items: center; }
.av.mp-av { width: 68px; height: 68px; font-size: 24px; box-shadow: 0 0 0 4px var(--panel), 0 8px 22px rgba(20, 20, 40, 0.16); }
.mp-sub { gap: 8px; margin-top: 7px; }
.mp-role { font-weight: 500; color: var(--ink-2); }
.mp-team { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 999px; background: color-mix(in srgb, var(--panel) 75%, transparent); border: 1px solid var(--line); font-size: 12px; font-weight: 500; color: var(--ink-2); }
.mp-team svg { width: 13px; height: 13px; }
.mp-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.mp-pill { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--panel) 80%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--ink-2); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.mp-pill:hover { color: var(--ink); filter: none; }
.mp-pill svg { width: 15px; height: 15px; }
.mp-edit { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) { .mp-pill span { display: none; } .mp-pill:not(.mp-edit) { width: 36px; padding: 0; justify-content: center; } }
@media (max-width: 700px) { .mp-head { flex-wrap: wrap; } .mp-actions { flex-basis: 100%; justify-content: flex-start; } }
:root[data-theme="dark"] .mp-head { background: linear-gradient(105deg, color-mix(in srgb, var(--mc) 16%, var(--panel)) 0%, color-mix(in srgb, var(--mc) 5%, var(--panel)) 40%, var(--panel) 70%); }
:root[data-theme="dark"] .mp-head::before { opacity: 0.14; }

/* Copywriting: a big writing area, the brief and where it goes beside it */
.copygrid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
@media (max-width: 1000px) { .copygrid { grid-template-columns: minmax(0, 1fr); } }
.copy-ed { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.copy-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.copy-foot button { display: inline-flex; align-items: center; gap: 6px; }
.copy-foot svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cp-count { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cp-count b { color: var(--ink-2); font-weight: 600; }
.cp-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 6px; font-size: 13px; }
.cp-meta > span:first-child { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.cp-saved { font-size: 12.5px; color: var(--muted); white-space: nowrap; }

/* Projects → the search box's filter panel: opens under it on click, one-click chips */
.psearch { cursor: text; }
.psearch.open { background: var(--panel); }
.pspanel { position: fixed; z-index: 45; max-width: calc(100vw - 24px); padding: 14px 16px 10px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line-2); box-shadow: 0 16px 40px rgba(20, 20, 40, 0.18); animation: pop 0.1s ease-out; }
.pp-sec + .pp-sec { margin-top: 12px; }
.pp-lbl { display: block; margin-bottom: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.pp-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 168px; overflow-y: auto; }
.pp-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel); color: var(--ink-2); font-size: 13px; font-weight: 500; }
.pp-chip:hover { filter: none; color: var(--ink); }
.pp-chip svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pp-chip .av.sm { width: 22px; height: 22px; font-size: 9.5px; margin-left: -6px; }
.pp-n { font-size: 11.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.pp-chip.on { background: var(--blu-soft); color: var(--blu-ink); }
.pp-chip.on .pp-n { color: var(--blu-ink); }
.pp-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.pp-foot b { color: var(--ink-2); }
.pp-reset { height: 28px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--blu-ink); font-size: 12.5px; font-weight: 600; }
.pp-reset:hover { background: var(--blu-soft); filter: none; }

/* Copywriting editor, laid out like Google Docs: a rounded toolbar, then a white page on a grey canvas */
.dtool { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; margin: 10px 10px 0; padding: 4px 8px; border-radius: 999px; background: var(--panel-2); }
.dtool button { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ink-2); display: grid; place-items: center; font-size: 15px; line-height: 1; }
.dtool button:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); filter: none; }
.dtool button.on { background: var(--blu-soft); color: var(--blu-ink); }
.dtool svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dtool b, .dtool u, .dtool s { font-family: Georgia, 'Times New Roman', serif; font-size: 16px; }
.dtool .dt-i { font-family: Georgia, 'Times New Roman', serif; font-size: 16px; font-style: italic; }
.dsep { width: 1px; height: 20px; margin: 0 5px; background: var(--line-2); }
#cpBlock { width: auto; height: 32px; margin: 0; padding: 0 28px 0 10px; border: 0; border-radius: 8px; background-color: transparent; font-size: 13.5px; font-weight: 500; color: var(--ink-2); box-shadow: none; }
#cpBlock:hover { background-color: color-mix(in srgb, var(--ink) 8%, transparent); }
.dcanvas { flex: none; min-height: 400px; height: calc(100vh - 320px); overflow-y: auto; padding: 22px 16px 40px; background: var(--panel-2); margin-top: 10px; }
.dsheet { max-width: 760px; min-height: 980px; margin: 0 auto; padding: 52px 64px 64px; background: #FAFAFA; color: #202124; border-radius: 4px; box-shadow: 0 1px 3px rgba(60, 64, 67, 0.15), 0 4px 12px rgba(60, 64, 67, 0.08); }
:root[data-theme="dark"] .dsheet { background: #1f1f24; color: #e8e8ee; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.dpage { min-height: 760px; color: inherit; font-family: Arial, 'Helvetica Neue', sans-serif; font-size: 15px; line-height: 1.6; outline: none; overflow-wrap: anywhere; }
.dpage.empty::before { content: attr(placeholder); color: #9aa0a6; pointer-events: none; float: left; height: 0; }
.dpage p, .dpage div { margin: 0 0 0.5em; }
.dpage h1 { font-size: 26px; font-weight: 700; margin: 0.6em 0 0.3em; line-height: 1.25; }
.dpage h2 { font-size: 20px; font-weight: 700; margin: 0.6em 0 0.3em; line-height: 1.3; }
.dpage h3 { font-size: 16.5px; font-weight: 700; margin: 0.6em 0 0.25em; color: #444; }
:root[data-theme="dark"] .dpage h3 { color: #cfcfd8; }
.dpage h1:first-child, .dpage h2:first-child, .dpage h3:first-child { margin-top: 0; }
.dpage ul, .dpage ol { margin: 0 0 0.6em; padding-left: 1.6em; }
.dpage li { margin: 0.15em 0; }
.dpage blockquote { margin: 0.4em 0 0.8em; padding: 2px 0 2px 14px; border-left: 3px solid #dadce0; color: #5f6368; }
.dpage a { color: #1a73e8; text-decoration: underline; cursor: text; }
.dpage span[style*="background"] { color: #202124; border-radius: 2px; }
@media (max-width: 700px) { .dsheet { padding: 28px 22px; } .dcanvas { padding: 12px 8px 30px; } }

/* Copywriting side panel: what the text becomes next, and its review */
.copy-side { display: flex; flex-direction: column; gap: 14px; }
.cs-card { margin: 0; padding: 18px 18px 16px; }
.cs-card h3 { margin: 0 0 4px; font-size: 15px; }
.cs-card .hint { margin: 0 0 12px; font-size: 13px; }
.cs-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cs-kinds button { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); color: var(--ink-2); font-size: 13.5px; font-weight: 500; }
.cs-kinds button:hover { filter: none; color: var(--ink); }
.cs-kinds button.on { background: var(--lav-soft); color: var(--lav-ink); }
.cs-kinds svg, .cs-make svg, .rv-btns svg, .rv-go svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cs-make { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 12px; background: var(--lav-ink); color: #FAFAFA; }
.rv-state { display: flex; align-items: center; gap: 10px; margin: 8px 0 12px; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; }
.rv-state > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 5px; min-width: 0; }
.rv-state small { flex-basis: 100%; font-size: 12px; color: var(--muted); }
.rv-state.pending { background: var(--yel-soft); }
.rv-state.approved { background: var(--ok-soft); color: var(--ok); }
.rv-state.approved b, .rv-state.changes b { color: var(--ink); }
.rv-state.changes { background: var(--bad-soft); color: var(--bad); }
.rv-answer textarea, .rv-send textarea { width: 100%; margin: 0 0 8px; resize: vertical; font-size: 13.5px; }
.rv-btns { display: flex; gap: 8px; margin-bottom: 14px; }
.rv-btns button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.rv-ok { background: var(--ok); color: #FAFAFA; }
.rv-send { display: flex; flex-direction: column; gap: 0; margin-top: 8px; }
.rv-who { width: 100%; margin-bottom: 8px; }
.rv-go { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }


/* ---------------------------------------------------------------- Copywriting page, polished */
.copy-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.copy-main .copy-ed { margin: 0; }
/* header: a document tile, the title written big, a meta line, the save state */
.cp-head { display: flex; align-items: center; gap: 16px; margin: 0; padding: 16px 20px; position: relative; overflow: hidden; }
.cp-head::after { content: ""; position: absolute; right: -60px; top: -90px; width: 240px; height: 240px; border-radius: 50%; background: var(--lav); opacity: 0.25; filter: blur(40px); pointer-events: none; }
.cp-doc { position: relative; z-index: 1; width: 48px; height: 48px; flex: none; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, var(--lav-soft), var(--lav)); color: var(--lav-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lav-ink) 15%, transparent); }
.cp-doc svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cp-headmain { position: relative; z-index: 1; flex: 1; min-width: 0; }
#cpDocTitle { display: block; width: 100%; height: 38px; margin: 0; padding: 0 2px; border: 0; border-radius: 6px; background: none; font-size: 23px; font-weight: 700; letter-spacing: -0.015em; box-shadow: none; }
#cpDocTitle:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
#cpDocTitle:focus { outline: none; background: none; box-shadow: inset 0 -2px 0 var(--lav-ink); border-radius: 0; }
#cpDocTitle::placeholder { color: var(--muted); font-weight: 600; }
.cp-head .cp-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; padding: 0 2px; font-size: 12.5px; color: var(--muted); }
.cp-meta > i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.6; }
.cp-meta .cm-who { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-weight: 500; }
.cp-meta .cm-who .av.sm { width: 20px; height: 20px; font-size: 9px; }
.cp-meta .cm-kind { color: var(--lav-ink); font-weight: 600; }
.cp-meta .cm-done { color: var(--ok); font-weight: 600; }
.cp-meta .cchip { margin-left: 4px; }
.cp-saved { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; flex: none; height: 28px; padding: 0 11px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--muted); }
.cp-saved:empty { display: none; }
.cp-saved::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cp-saved.ok { background: var(--ok-soft); color: var(--ok); }
.cp-saved.busy { background: var(--yel-soft); color: var(--yel-ink); }
.cp-saved.busy::before { animation: evlive 1.2s ease-in-out infinite; }
/* the editor card: a floating toolbar over a soft canvas */
.copy-ed { border: 1px solid var(--line); }
.dtool { margin: 12px 12px 0; padding: 5px 10px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(20, 20, 40, 0.06); }
.dcanvas { margin-top: 0; padding-top: 18px; background: linear-gradient(180deg, var(--panel) 0, var(--panel-2) 60px); }
.dsheet { border-radius: 6px; }
.copy-foot { background: var(--panel); }
.copy-foot .cp-count { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--panel-2); }
#cpSave { padding-left: 14px; padding-right: 16px; }
/* side: card heads with an icon tile; the next-step choices as colour tiles */
.cs-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.cs-head h3 { margin: 1px 0 2px; }
.cs-head .hint { margin: 0; }
.cs-ic { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; }
.cs-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cs-ic.lav { background: var(--lav-soft); color: var(--lav-ink); } .cs-ic.yel { background: var(--yel-soft); color: var(--yel-ink); }
.cs-kinds button { position: relative; height: 46px; padding: 0 10px; gap: 9px; border-radius: 13px; transition: border-color 0.12s, background 0.12s, transform 0.12s; }
.cs-kinds button:hover { box-shadow: 0 6px 14px -10px rgba(20, 20, 40, 0.4); }
.ck-ic { width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center; }
.k-text .ck-ic { background: var(--panel-2); color: var(--ink-2); }
.k-reels .ck-ic { background: var(--yel-soft); color: var(--yel-ink); }
.k-poster .ck-ic { background: var(--lav-soft); color: var(--lav-ink); }
.k-car .ck-ic { background: var(--blu-soft); color: var(--blu-ink); }
.cs-kinds button.on { background: var(--lav-soft); color: var(--ink); }
.cs-kinds button.on::after { content: "✓"; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--lav-ink); color: #FAFAFA; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--panel); }
.cs-make { height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--lav-ink), color-mix(in srgb, var(--lav-ink) 70%, #b06bff)); box-shadow: 0 6px 16px color-mix(in srgb, var(--lav-ink) 30%, transparent); font-weight: 600; }
.cs-make:hover { filter: brightness(1.05); }
.rv-go { height: 42px; border-radius: 12px; font-weight: 600; }
.rv-go:disabled { background: var(--panel-2); color: var(--muted); opacity: 1; }
.rv-btns button { height: 40px; border-radius: 12px; }

/* the writing area: no paper sheet — one clean column on the card itself, roomy type, a quiet focus line */
.dcanvas { padding: 34px 28px 60px; background: var(--panel); }
.dsheet, :root[data-theme="dark"] .dsheet { max-width: 700px; min-height: 0; margin: 0 auto; padding: 0; background: none; color: var(--ink); border-radius: 0; box-shadow: none; }
.dpage { min-height: 320px; font-size: 16.5px; line-height: 1.75; color: var(--ink); caret-color: var(--lav-ink); }
.dpage p, .dpage div { margin: 0 0 0.7em; }
.dpage h1 { font-size: 28px; letter-spacing: -0.015em; margin: 0.7em 0 0.35em; }
.dpage h2 { font-size: 21px; letter-spacing: -0.01em; }
.dpage h3, :root[data-theme="dark"] .dpage h3 { color: var(--ink-2); }
.dpage blockquote { border-left-color: var(--lav); color: var(--ink-2); }
.dpage a { color: var(--blu-ink); }
.dpage.empty::before { color: var(--muted); font-size: 16.5px; font-weight: 400; }
.dpage ::selection { background: color-mix(in srgb, var(--lav-ink) 22%, transparent); }

/* Settings → Google */
.g-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.g-head h2 { margin: 0 0 2px; }
.g-head .hint { margin: 0; }
.g-logo { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--panel-2); }
.g-logo svg { width: 20px; height: 20px; }
.g-on, .g-off { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); font-size: 14px; }
.g-on { background: var(--ok-soft); }
.g-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.g-dot.off { background: var(--muted); box-shadow: none; }
.g-connect { background: #1a73e8; color: #FAFAFA; }
.g-help { margin-top: 10px; font-size: 13.5px; }
.g-help summary { cursor: pointer; color: var(--blu-ink); font-weight: 500; }
.g-steps { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.g-steps a { color: var(--blu-ink); }
.g-uri { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 6px 6px 10px; border-radius: 10px; background: var(--panel-2); }
.g-uri code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 12.5px; }
/* Copywriting → send to a client */
.cs-ic.blu { background: var(--blu-soft); color: var(--blu-ink); }
.sd-form { display: flex; flex-direction: column; gap: 8px; }
.sd-row { display: grid; grid-template-columns: 1fr; gap: 8px; }
.sd-form input, .sd-form select, .sd-form textarea { width: 100%; margin: 0; font-size: 13.5px; }
.sd-form textarea { resize: vertical; }
.sd-warn { margin: 0; padding: 7px 10px; border-radius: 10px; background: var(--yel-soft); color: var(--yel-ink); font-size: 12.5px; }
.sd-go { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 42px; border-radius: 12px; background: #1a73e8; color: #FAFAFA; font-weight: 600; }
.sd-go svg, .sd-item svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sd-from { margin: 0; font-size: 12px; color: var(--muted); text-align: center; }
.sd-need { margin: 0; font-size: 13px; color: var(--ink-2); }
.sd-need a { color: var(--blu-ink); font-weight: 500; }
.sd-list { display: grid; gap: 6px; margin-bottom: 12px; }
.sd-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--blu-soft); color: var(--blu-ink); text-decoration: none; }
.sd-item > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sd-item b { color: var(--ink); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-item small { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-open { font-size: 12px; font-weight: 600; flex: none; }
.dtool { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.dtool::-webkit-scrollbar { display: none; }
.dtool > * { flex: none; }
.sd-fail { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--bad); }

/* Copywriting: the title sits in the top bar, minimal — no card, just the words and a quiet line under them */
.cp-top { align-items: center; }
.cp-titlewrap { flex: 1; min-width: 0; }
.cp-top #cpDocTitle { display: block; width: 100%; height: auto; margin: 0 0 2px -6px; padding: 2px 6px; border: 0; border-radius: 8px; background: none; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; box-shadow: none; text-overflow: ellipsis; }
.cp-top #cpDocTitle:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.cp-top #cpDocTitle:focus { outline: none; background: var(--panel); }
.cp-top #cpDocTitle::placeholder { color: var(--muted); font-weight: 600; }
.cp-top .cp-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; padding: 0; font-size: 12.5px; color: var(--muted); }
.cp-top .cp-meta .cm-kind { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); font-weight: 500; }
.cp-top .cp-meta .cm-kind svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cp-top .cp-saved { margin-left: 12px; }
/* the title in the top bar stays plain text when clicked: no box, no background, just the cursor */
.cp-top #cpDocTitle, .cp-top #cpDocTitle:hover, .cp-top #cpDocTitle:focus { background: none; box-shadow: none; outline: none; border: 0; }
.cp-top #cpDocTitle { margin-left: 0; padding: 2px 0; caret-color: var(--lav-ink); }

/* Copywriting → next step: one quiet line, opening to change the type and who makes it */
.cn-card { padding: 6px; }
.cn-sum { display: flex; align-items: center; gap: 10px; width: 100%; height: auto; padding: 8px 10px; border: 0; border-radius: 12px; background: none; color: var(--ink); text-align: left; }
.cn-sum:hover { background: var(--panel-2); filter: none; }
.cn-ic { width: 32px; height: 32px; flex: none; border-radius: 9px; display: grid; place-items: center; }
.cn-ic svg, .cn-kinds svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.cn-ic.k-text { background: var(--panel-2); color: var(--ink-2); } .cn-ic.k-reels { background: var(--yel-soft); color: var(--yel-ink); }
.cn-ic.k-poster { background: var(--lav-soft); color: var(--lav-ink); } .cn-ic.k-carousel { background: var(--blu-soft); color: var(--blu-ink); }
.cn-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.cn-txt small { font-size: 11.5px; color: var(--muted); }
.cn-txt b { font-size: 14px; font-weight: 600; }
.cn-person { display: inline-flex; align-items: center; gap: 6px; max-width: 120px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); overflow: hidden; white-space: nowrap; }
.cn-person span { overflow: hidden; text-overflow: ellipsis; }
.cn-person .av.sm { width: 22px; height: 22px; font-size: 9.5px; }
.cn-person.none { color: var(--muted); font-weight: 400; }
.cn-chev { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; transition: transform 0.15s; }
.cn-card.open .cn-chev { transform: rotate(180deg); }
.cn-body { display: flex; flex-direction: column; gap: 8px; padding: 6px 10px 10px; }
.cn-lbl { margin-top: 4px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.cn-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.cn-kinds button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel); color: var(--ink-2); font-size: 13px; font-weight: 500; }
.cn-kinds button:hover { filter: none; color: var(--ink); }
.cn-kinds button.on { background: var(--lav-soft); border-color: var(--lav-ink); color: var(--lav-ink); }
.cn-who { width: 100%; height: 42px; }
.modal.cpnew .cn-kinds { margin: 6px 0 14px; }
.modal.cpnew .cp-prodrow { margin-bottom: 6px; }
.modal.cpnew .cp-prodrow .tplabel { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; }
.pk-empty { margin: 6px 10px 10px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.cn-note { margin: 2px 0 0; font-size: 12px; line-height: 1.4; color: var(--muted); }
.cn-save { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; margin-top: 4px; border-radius: 10px; font-size: 13.5px; font-weight: 600; }
.cn-save svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cn-save:disabled { background: var(--panel-2); color: var(--muted); opacity: 1; }

body.media-only .prem-only { display: none; } /* Settings: Premiere connection, project and sequences are not the Media team's */
body.not-admin .admin-only { display: none; } /* Settings: the API keys card */

/* the bell: notifications above the activity log */
.bellbtn .badge.ntf { right: auto; left: 0; background: var(--bad); }
.ntf { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#ntfList { list-style: none; margin: 0; padding: 4px 10px 8px; overflow: auto; flex: 1; min-height: 0; }
#ntfList li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 8px; border-radius: 10px; font-size: 13.5px; line-height: 1.45; cursor: pointer; color: var(--ink-2); }
#ntfList li:hover { background: var(--panel-2); }
#ntfList li.new { color: var(--ink); background: var(--blu-soft); }
#ntfList li.new:hover { background: color-mix(in srgb, var(--blu-soft) 70%, var(--panel-2)); }
#ntfList li > span:last-child { min-width: 0; }
#ntfList time { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); }
#ntfList .av.sm { flex: none; margin-top: 1px; }

/* Copywriting → review: the steps in the Review card, and the bar above the text */
.rv-steps { list-style: none; display: flex; gap: 4px; margin: 0 0 14px; padding: 0; }
.rv-steps li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; font-size: 11px; color: var(--muted); text-align: center; }
.rv-steps li::before { content: ""; position: absolute; top: 11px; left: calc(-50% + 14px); right: calc(50% + 14px); height: 2px; background: var(--line-2); }
.rv-steps li:first-child::before { display: none; }
.rv-steps li.done::before, .rv-steps li.now::before { background: var(--ok); }
.rv-steps i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 700; background: var(--panel-2); color: var(--muted); position: relative; z-index: 1; }
.rv-steps li.done i { background: var(--ok); color: #FAFAFA; }
.rv-steps li.now i { background: var(--lav-ink); color: #FAFAFA; box-shadow: 0 0 0 3px var(--lav-soft); }
.rv-steps li.done span, .rv-steps li.now span { color: var(--ink-2); font-weight: 600; }
.rvbar { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); }
.rvbar.ask { background: var(--lav-soft); border-color: color-mix(in srgb, var(--lav-ink) 30%, transparent); }
.rvbar.wait { background: var(--yel-soft); border-color: transparent; }
.rvbar.changes { background: var(--bad-soft); border-color: transparent; }
.rvbar.approved { background: var(--ok-soft); border-color: transparent; }
.rvb-top { display: flex; gap: 10px; align-items: flex-start; }
.rvb-top .av.sm { margin-top: 2px; flex: none; }
.rvb-txt { min-width: 0; line-height: 1.4; }
.rvb-txt b { display: block; font-size: 14px; font-weight: 600; }
.rvb-txt small { display: block; font-size: 12.5px; color: var(--ink-2); }
.rvb-txt q { display: block; margin-top: 6px; padding: 6px 10px; border-left: 3px solid currentColor; border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--panel) 70%, transparent); font-size: 13.5px; quotes: none; color: var(--ink); }
.rvbar.changes .rvb-txt q { border-left-color: var(--bad); }
.rvb-act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rvb-act input { flex: 1; min-width: 180px; height: 38px; margin: 0; font-size: 13.5px; }
.rvb-act button { height: 38px; display: inline-flex; align-items: center; gap: 6px; }
.rvb-act svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rvb-c b { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--blu-ink); color: #FAFAFA; font-size: 11px; display: inline-grid; place-items: center; }

/* the bell's activity list: compact rows — a status mark, the message in plain ink, the time on the right */
#log { padding: 6px 10px 14px; }
#log:empty::before { padding: 14px 8px; font-size: 13.5px; }
#log li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 8px; border-bottom: 0; border-radius: 10px; color: var(--ink); font-size: 13.5px; line-height: 1.45; }
#log li:hover { background: var(--panel-2); }
#log li + li { margin-top: 2px; }
#log li.err, #log li.ok { color: var(--ink); }
.lg-ic { width: 20px; height: 20px; flex: none; margin-top: 0; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--panel-2); color: var(--muted); }
.lg-ic:empty::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
#log li.ok .lg-ic { background: var(--ok-soft); color: var(--ok); }
#log li.err .lg-ic { background: var(--bad-soft); color: var(--bad); }
#log li.err .lg-t { color: var(--bad); }
.lg-t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
#log li time { display: block; flex: none; margin: 1px 0 0; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* the bell's counts: one clear badge at the top right, above the icon, with a ring in the page colour */
.bellbtn { overflow: visible; }
.bellbtn .badge, .bellbtn .badge.ntf { top: -2px; right: -3px; left: auto; z-index: 1; min-width: 19px; height: 19px; padding: 0 5px; line-height: 15px; font-size: 11px; border: 2px solid var(--bg); box-sizing: border-box; }
.bellbtn .badge.ntf { background: var(--bad); }

/* Copywriting: the writing area by type — a tip, a part button, numbered slides or scenes */
.dkind { margin: 10px 12px 0; padding: 8px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); background: var(--panel-2); }
.k-reels .dkind { background: var(--yel-soft); color: var(--yel-ink); }
.k-poster .dkind { background: var(--lav-soft); color: var(--lav-ink); }
.k-carousel .dkind { background: var(--blu-soft); color: var(--blu-ink); }
#cpKindTip { display: flex; align-items: center; gap: 10px; }
#cpKindTip[hidden] { display: none; }
#cpKindTxt { flex: 1; min-width: 0; }
.dt-part { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--panel); color: inherit; font-size: 12.5px; font-weight: 700; }
.dt-part:hover { filter: none; }
.dt-part svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
/* each heading is a part: numbered on the left — Слайд 2, 3 … after the cover, or Хэсэг 1, 2 … */
.k-carousel .dpage, .k-reels .dpage { counter-reset: part; }
.k-carousel .dpage { counter-reset: part 1; }
.k-carousel .dpage :is(h1, h2, h3), .k-reels .dpage :is(h1, h2, h3) { counter-increment: part; position: relative; margin-top: 1.4em; padding-top: 1.1em; border-top: 1px dashed var(--line-2); }
.k-carousel .dpage :is(h1, h2, h3):first-child, .k-reels .dpage :is(h1, h2, h3):first-child { margin-top: 0; }
.k-carousel .dpage :is(h1, h2, h3)::before { content: "СЛАЙД " counter(part); }
.k-reels .dpage :is(h1, h2, h3)::before { content: "ХЭСЭГ " counter(part); }
.k-carousel .dpage :is(h1, h2, h3)::before, .k-reels .dpage :is(h1, h2, h3)::before { position: absolute; top: 0; left: 0; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--muted); pointer-events: none; }
.k-poster .dpage > :first-child:not(h1):not(h2):not(h3) { font-size: 18px; font-weight: 600; }
.cp-count .warn, .cp-count .warn b { color: var(--bad); }
/* an empty page shows only its placeholder: no «СЛАЙД 2» / «ХЭСЭГ 1» label or divider under it to collide with */
.dpage.empty :is(h1, h2, h3)::before { content: none; }
.dpage.empty :is(h1, h2, h3) { border-top: 0; padding-top: 0; margin-top: 0; }

/* a new notification: a card in the bottom-right — who, what, «Нээх»; a thin bar shows it running out */
.ntf-card { pointer-events: auto; position: relative; overflow: hidden; display: flex; gap: 12px; align-items: flex-start; width: 360px; max-width: calc(100vw - 32px); padding: 14px 14px 16px; border-radius: 16px; background: var(--panel); color: var(--ink); border: 1px solid var(--line-2); box-shadow: 0 14px 40px rgba(20, 20, 40, 0.18); animation: ncin 0.24s cubic-bezier(.2, .9, .3, 1.2); }
.ntf-card.out { animation: ncout 0.22s ease-in forwards; }
@keyframes ncin { from { opacity: 0; transform: translateY(12px) scale(0.97); } }
@keyframes ncout { to { opacity: 0; transform: translateX(24px); } }
.ntf-card > .av { flex: none; width: 38px; height: 38px; }
.nc-body { flex: 1; min-width: 0; }
.nc-body b { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--blu-ink); }
.nc-body p { margin: 3px 0 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.nc-open { margin-top: 8px; height: 30px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 600; background: var(--blu-ink); color: #FAFAFA; }
.nc-x { flex: none; width: 26px; height: 26px; padding: 0; margin: -4px -4px 0 0; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 18px; line-height: 1; }
.nc-x:hover { background: var(--panel-2); color: var(--ink); filter: none; }
.nc-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--blu-ink); opacity: 0.6; transform-origin: left; animation: ncbar 15s linear forwards; }
.ntf-card.hold .nc-bar { animation-play-state: paused; }
@keyframes ncbar { to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .ntf-card, .ntf-card.out { animation: none; } .nc-bar { display: none; } }

/* a notification laid out: label · project · who · their words */
.nb { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.nk { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
.nk.lav { background: var(--lav-soft); color: var(--lav-ink); }
.nk.bad { background: var(--bad-soft); color: var(--bad); }
.nk.ok { background: var(--ok-soft); color: var(--ok); }
.nk.blu { background: var(--blu-soft); color: var(--blu-ink); }
.nb-who { font-size: 12.5px; color: var(--ink-2); }
.nb-who time, .nb > time { display: inline; margin: 0; font-size: 12px; color: var(--muted); }
.nb-note { display: block; align-self: stretch; margin-top: 3px; padding: 6px 10px; border-left: 3px solid var(--line-2); border-radius: 0 8px 8px 0; background: var(--panel-2); font-size: 13px; line-height: 1.45; color: var(--ink); quotes: none; overflow-wrap: anywhere; }
.nk.bad ~ .nb-note { border-left-color: var(--bad); }
.nk.lav ~ .nb-note { border-left-color: var(--lav-ink); }
.nb-line { font-size: 13.5px; line-height: 1.45; }
#ntfList li.new .nb-note { background: var(--panel); }
.nc-body .nb-title { text-transform: none; letter-spacing: 0; color: var(--ink); font-size: 14.5px; font-weight: 700; }

/* the review bar: round number, folded history, one comment box with «send back» or «approve» */
.rvb-top { position: relative; }
.rvb-txt { flex: 1; }
.rvb-round { flex: none; align-self: flex-start; display: inline-flex; align-items: baseline; gap: 1px; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--panel); font-size: 11.5px; font-weight: 600; color: var(--ink-2); line-height: 22px; }
.rvb-hist { border-radius: 10px; background: color-mix(in srgb, var(--panel) 70%, transparent); }
.rvb-hist summary { display: flex; align-items: center; gap: 6px; padding: 7px 10px; cursor: pointer; list-style: none; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.rvb-hist summary::-webkit-details-marker { display: none; }
.rvb-hist summary svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; transform: rotate(-90deg); transition: transform 0.15s; }
.rvb-hist[open] summary svg { transform: none; }
.rvb-hist summary b { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--panel-2); font-size: 11px; display: inline-grid; place-items: center; }
.rvh { list-style: none; margin: 0; padding: 2px 10px 10px; display: grid; gap: 8px; }
.rvh li { display: flex; gap: 9px; align-items: flex-start; padding-left: 10px; border-left: 2px solid var(--line-2); }
.rvh li.bad { border-left-color: var(--bad); } .rvh li.ok { border-left-color: var(--ok); } .rvh li.lav { border-left-color: var(--lav-ink); }
.rvh li .av.sm { width: 22px; height: 22px; font-size: 9.5px; flex: none; }
.rvh-who { font-size: 12.5px; color: var(--ink-2); }
.rvh-who b { color: var(--ink); font-weight: 600; }
.rvh-who time { font-size: 11.5px; color: var(--muted); }
.rvh p { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.rvb-reply { display: flex; flex-direction: column; gap: 8px; }
.rvb-reply textarea { width: 100%; margin: 0; resize: vertical; min-height: 58px; font-size: 13.5px; line-height: 1.45; background: var(--panel); }
.rvb-btns { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.rvb-btns button { height: 38px; display: inline-flex; align-items: center; gap: 6px; }
.rvb-btns svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* a text sent back with a comment is ordinary back-and-forth, not an error: calm blue, not red */
.rvbar.changes { background: var(--blu-soft); border-color: transparent; }
.rvbar.changes .rvb-txt q { border-left-color: var(--blu-ink); background: var(--panel); }
.rvh li.blu { border-left-color: var(--blu-ink); }
.nk.blu ~ .nb-note { border-left-color: var(--blu-ink); }
.rvb-hist summary::marker { content: ""; }
.chip.blu { background: var(--blu-soft); color: var(--blu-ink); }

/* the comment thread inside the review bar */
.rvb-thread { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 10px; border-radius: 12px; background: color-mix(in srgb, var(--panel) 75%, transparent); }
.th-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.th-list li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 4px; border-radius: 10px; }
.th-list li .av.sm { width: 26px; height: 26px; flex: none; margin-top: 1px; }
.th-body { flex: 1; min-width: 0; }
.th-who { font-size: 12.5px; color: var(--muted); }
.th-who b { color: var(--ink); font-weight: 600; }
.th-ok { color: var(--ok); font-weight: 600; }
.th-body p { margin: 2px 0 0; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.th-list li.done .th-body p { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.th-more { align-self: flex-start; height: 26px; padding: 0 8px; border: 0; border-radius: 8px; background: none; color: var(--blu-ink); font-size: 12.5px; font-weight: 600; }
.th-more:hover { background: var(--panel-2); filter: none; }
.th-reply { display: flex; gap: 6px; align-items: center; }
.th-reply input { flex: 1; min-width: 0; height: 38px; margin: 0; font-size: 13.5px; background: var(--panel); }
.th-reply .iconbtn { width: 38px; height: 38px; flex: none; padding: 0; border-radius: 10px; background: var(--blu-ink); color: #FAFAFA; display: grid; place-items: center; }
.th-reply .iconbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.th-list li.th-new:not(.done) { background: var(--panel); box-shadow: 0 1px 3px rgba(20, 20, 40, 0.06); }
.th-who .nk { height: 18px; padding: 0 7px; font-size: 10.5px; vertical-align: 1px; }

/* Copywriting → «Хянуулах»: the comments as a small chat — soft bubbles, mine on the right */
.rv-chat { margin: 0 0 14px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--panel); }
.ch-head { display: flex; align-items: center; gap: 6px; padding: 10px 14px; font-size: 12.5px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); }
.ch-head b { min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--panel-2); color: var(--ink-2); font-size: 11px; display: inline-grid; place-items: center; }
.ch-list { list-style: none; margin: 0; padding: 10px 12px 12px; max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; background: var(--panel-2); scrollbar-width: thin; }
.ch-list li { display: flex; align-items: flex-end; gap: 7px; max-width: 88%; }
.ch-list li.head { margin-top: 10px; }
.ch-list li:first-child { margin-top: 0; }
.ch-list li.ch-mine { align-self: flex-end; }
.ch-list li .av.sm { width: 24px; height: 24px; font-size: 9.5px; flex: none; margin-bottom: 2px; }
.ch-gap { width: 24px; flex: none; }
.ch-b { min-width: 0; padding: 7px 11px 6px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.ch-list li:not(.ch-mine).head .ch-b { border-top-left-radius: 6px; }
.ch-list li.ch-mine .ch-b { background: var(--blu-soft); border-color: transparent; }
.ch-list li.ch-mine.head .ch-b { border-top-right-radius: 6px; }
.ch-name { display: block; margin-bottom: 1px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.ch-b .nk { display: inline-flex; height: auto; padding: 0; margin: 0 0 1px; background: none; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.ch-b .nk.blu { color: var(--blu-ink); } .ch-b .nk.ok { color: var(--ok); }
.ch-b p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.ch-meta { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 2px; font-size: 10.5px; color: var(--muted); }
.ch-done { width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 10px; font-weight: 700; line-height: 1; opacity: 0; transition: opacity 0.12s; }
.ch-list li:hover .ch-done, .ch-done.on { opacity: 1; }
.ch-done:hover { filter: none; background: var(--ok-soft); color: var(--ok); }
.ch-done.on { background: var(--ok); color: #FAFAFA; }
.ch-list li.done .ch-b p { color: var(--muted); text-decoration: line-through; }
.ch-empty { margin: 0; padding: 18px 14px; font-size: 12.5px; color: var(--muted); text-align: center; background: var(--panel-2); }
.ch-reply { display: flex; gap: 6px; align-items: center; padding: 8px 8px 8px 10px; background: var(--panel); border-top: 1px solid var(--line); }
.ch-reply input { flex: 1; min-width: 0; height: 36px; margin: 0; border: 1px solid var(--line-2); border-radius: 999px; padding: 0 14px; font-size: 13.5px; background: var(--panel-2); box-shadow: none; }
.ch-reply input:focus { background: var(--panel); outline: none; }
.ch-reply button { width: 36px; height: 36px; flex: none; padding: 0; border-radius: 50%; background: var(--blu-ink); color: #FAFAFA; display: grid; place-items: center; }
.ch-reply button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Copywriting → «Хянуулах»: where the review stands, one small line (and the reviewer's two buttons) */
.rv-status { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 10px; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); font-size: 13px; }
.rv-status.ask { background: var(--lav-soft); }
.rv-status.wait { background: var(--yel-soft); }
.rv-status.back { background: var(--blu-soft); }
.rv-status.ok { background: var(--ok-soft); }
.rv-status > .av.sm { width: 26px; height: 26px; flex: none; }
.rs-txt { flex: 1; min-width: 0; line-height: 1.35; }
.rs-txt > span { display: block; color: var(--ink-2); }
.rs-txt b { color: var(--ink); font-weight: 600; }
.rs-txt small { display: block; font-size: 11.5px; color: var(--muted); }
.rs-txt q { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ink); quotes: none; overflow-wrap: anywhere; }
.rs-txt q::before { content: "“"; color: var(--muted); } .rs-txt q::after { content: "”"; color: var(--muted); }
.rs-round { display: inline-flex; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--panel); font-size: 10.5px; font-weight: 600; color: var(--ink-2); vertical-align: 1px; }
.rs-btns { flex-basis: 100%; display: flex; gap: 6px; }
.rs-btns button { flex: 1; height: 32px; padding: 0 10px; border-radius: 9px; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.rs-btns svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rv-send + .rv-chat { margin-top: 14px; } /* send for review sits above the chat */
/* the photo sits at the top of each run of messages, beside its first bubble */
.ch-list li { align-items: flex-start; }
.ch-list li .av.sm { margin: 2px 0 0; }

/* the chat: who is reviewing (pinned on top), and the review's steps as small centred lines */
.ch-pin { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; background: var(--lav-soft); border-bottom: 1px solid var(--line); font-size: 12px; }
.ch-pin-l { font-weight: 600; color: var(--lav-ink); margin-right: 2px; }
.ch-rev { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px 0 2px; border-radius: 999px; background: var(--panel); color: var(--ink); font-weight: 500; }
.ch-rev .av.sm { width: 22px; height: 22px; font-size: 9px; }
.ch-rev em { font-style: normal; font-weight: 700; color: var(--muted); }
.ch-rev.approved em { color: var(--ok); } .ch-rev.changes em { color: var(--blu-ink); }
.ch-list li.ch-step { align-self: center; max-width: 100%; display: block; margin: 8px 0 4px; padding: 3px 10px; border-radius: 999px; background: var(--panel); border: 1px dashed var(--line-2); font-size: 11.5px; color: var(--ink-2); text-align: center; }
.ch-list li.ch-step b { color: var(--ink); font-weight: 600; }
.ch-list li.ch-step time { color: var(--muted); }
.ch-list li.ch-step.approved { border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.rv-who .avs { display: flex; flex: none; }
.rv-who .avs .av { margin-left: -6px; box-shadow: 0 0 0 2px var(--panel); }
.rv-who .avs .av:first-child { margin-left: 0; }

/* the writing area grows with its text — the page scrolls, not a box inside it; the toolbar stays in reach */
.copy-ed { overflow: visible; }
.dcanvas { height: auto; min-height: 460px; overflow: visible; }
.copy-ed .dtool { position: sticky; top: 112px; z-index: 3; }
.copy-foot { border-radius: 0 0 var(--r) var(--r); }
/* the bell: no white square on hover or press — a soft round tint instead */
.bellbtn, .bellbtn:hover, .bellbtn:active, .bellbtn:focus { background: transparent; border-color: transparent; box-shadow: none; filter: none; }
.bellbtn { border-radius: 50%; transition: background 0.15s, color 0.15s; }
.bellbtn:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.bellbtn:active { background: color-mix(in srgb, var(--ink) 12%, transparent); }
.bellbtn:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }
/* the actions bar now sits on top of the editor card */
.copy-ed > .copy-foot { order: -1; border-top: 0; border-bottom: 1px solid var(--line); border-radius: var(--r) var(--r) 0 0; }
/* the editor card's corners: the inner parts follow its curve (it can't clip them — the toolbar stays sticky) */
.copy-ed > .copy-foot { border-radius: calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0; }
.copy-ed > .dcanvas { border-radius: 0 0 calc(var(--r) - 1px) calc(var(--r) - 1px); }

/* the editor's top scrolls with the page (pinning it was tried and dropped) */
.ed-head { padding-bottom: 8px; border-radius: calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0; }
.ed-head > .copy-foot { border-radius: calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0; border-top: 0; border-bottom: 1px solid var(--line); }
.copy-ed .dtool { position: static; }

/* «Client-д илгээх»: the button on the editor, and its small window */
#cpSendOpen { background: #1a73e8; color: #FAFAFA; padding-left: 12px; padding-right: 14px; }
#cpSendOpen svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.modal.sendmodal { width: min(420px, 100%); padding: 20px 20px 18px; }
.sendmodal .cs-head { align-items: flex-start; }
.sendmodal .cs-head > div { flex: 1; }
.sm-x { width: 30px; height: 30px; flex: none; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); display: grid; place-items: center; }
.sm-x:hover { background: var(--panel-2); filter: none; }
.sm-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

/* «Client-д илгээх» before the review approved it: dimmed; the window says why */
#cpSendOpen.locked { background: var(--panel-2); color: var(--muted); }
.sd-lock { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--blu-soft, #eef3fd); color: var(--ink-2); }
.sd-lock svg { width: 18px; height: 18px; flex: none; margin-top: 1px; fill: none; stroke: var(--blu-ink, #1a73e8); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sd-lock span { display: grid; gap: 2px; }
.sd-lock b { font-size: 13.5px; color: var(--ink); font-weight: 600; }
.sd-lock small { font-size: 12.5px; line-height: 1.45; }

/* «Зөв бичих»: mistakes in red in the text, and a dropdown of corrections on a click */
#cpSpell svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#cpSpell.busy { pointer-events: none; color: var(--muted); }
#cpSpell.busy svg { animation: sppulse 0.9s ease-in-out infinite alternate; }
@keyframes sppulse { to { opacity: 0.25; } }
#cpSpell .sp-n { min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px; border-radius: 999px; background: #e5484d; color: #FAFAFA; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
::highlight(spell) { color: #d93036; text-decoration: underline wavy #e5484d; text-decoration-thickness: 1.5px; text-underline-offset: 3px; background: rgba(229, 72, 77, 0.08); }
.spp { position: fixed; z-index: 45; min-width: 180px; max-width: 300px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 34px rgba(20, 20, 40, 0.18); animation: pop 0.1s ease-out; }
.spp[hidden] { display: none; }
.spp-why { padding: 4px 8px 6px; font-size: 11.5px; color: var(--muted); }
.spp button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 7px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.spp button:hover { background: var(--panel-2); filter: none; }
.spp-opt.best { font-weight: 600; color: var(--blu-ink, #1a73e8); }
.spp-act { font-size: 13px !important; color: var(--ink-2) !important; }
.spp-act b { font-size: 11px; font-weight: 700; color: var(--muted); }
.spp-sep { height: 1px; margin: 4px 6px; background: var(--line); }

/* «+ Шинэ загвар» tiles (Materials and the new-project style picker): only admins make styles */
body.not-admin .style.add { display: none; }

/* ---------------------------------------------------------------- tablets (iPad): portrait 744–860, landscape 861–1180 */
body { height: 100dvh; } /* Safari's toolbars: the real visible height */
@media (max-width: 860px) { body { height: auto; } }
@media (max-width: 1100px) and (min-width: 700px) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* three short cards fit side by side */
}
@media (max-width: 760px) { .board { grid-template-columns: 1fr; } }
@media (max-width: 1100px) and (min-width: 761px) {
  .board { gap: 12px; }
  .col { padding: 10px; }
}
@media (max-width: 860px) and (min-width: 700px) {
  main { padding: 0 24px 60px; }
  .side { padding: 10px 24px; }
  #nav a, .nav2 a { padding: 9px 12px; font-size: 14.5px; }
}
/* touch: what only shows on hover is always there, and taps get a finger-sized target */
@media (hover: none) {
  .sub-del, .cp-del, .ch-done { opacity: 1; }
  button.small, .btnlike.small { min-height: 36px; }
  #nav a, .nav2 a { min-height: 44px; }
  .dtool button { min-width: 36px; min-height: 36px; }
}

/* a style's code: its moves played on a sample, and its files */
.modal.codemodal { width: min(980px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; overflow: hidden; }
.cm-head { display: flex; align-items: center; gap: 10px; }
.cm-head > div { flex: 1; min-width: 0; }
.cm-head h3 { margin: 0; font-size: 15px; }
.cm-head .hint { margin: 0; }
.cm-head svg, .cm-move svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cm-busy:empty { display: none; }
.cm-busy { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--blu-soft, #eef3fd); font-size: 13px; color: var(--ink-2); }
.cm-busy .err { color: #c0262d; }
.cm-busy .spin { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--blu-ink, #1a73e8); animation: spspin 0.8s linear infinite; }
.cm-prev { display: grid; gap: 8px; }
.cm-prev[hidden] { display: none; }
.cm-prev iframe { width: 100%; aspect-ratio: 16 / 9; max-height: 38vh; border: 0; border-radius: 12px; background: #e9eaf0; }
.cm-moves { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-move { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px 0 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.cm-move svg { width: 11px; height: 11px; }
.cm-move:hover { background: var(--panel-2); filter: none; }
.cm-move.on { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.cm-use { margin: 0; min-height: 18px; font-size: 12.5px; }
.cm-files { display: flex; flex-direction: column; gap: 6px; min-height: 0; flex: 1; }
.cm-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.cm-tab { height: 28px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: 500 12.5px ui-monospace, Menlo, monospace; cursor: pointer; display: inline-flex; align-items: center; }
.cm-tab:hover { background: var(--panel-2); color: var(--ink); filter: none; }
.cm-tab.on { background: var(--panel-2); color: var(--ink); }
.cm-add { font-family: inherit; color: var(--blu-ink, #1a73e8); }
.cm-text { flex: 1; min-height: 200px; resize: vertical; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); color: var(--ink); font: 12.5px/1.55 ui-monospace, Menlo, Consolas, monospace; tab-size: 2; white-space: pre; }
.cm-text[readonly] { color: var(--ink-2); }
.cm-foot { display: flex; align-items: center; gap: 8px; }
.cm-foot [hidden] { display: none; }

/* «Задгай файл болгох»: one button with a list of apps (Photoshop, Figma, Canva), and the window for Figma / Canva */
.opendrop { position: relative; display: inline-flex; }
.openbtn { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: var(--panel); border: 0; }
.openbtn:hover { filter: none; opacity: 0.92; }
.openbtn svg { width: 17px; height: 17px; }
.openbtn .caret { width: 15px; height: 15px; margin-left: 2px; transition: transform 0.15s; }
.openbtn[aria-expanded="true"] .caret { transform: rotate(180deg); }
.od-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; min-width: 270px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px rgba(20, 20, 40, 0.16); animation: pop 0.12s ease-out; }
.od-menu[hidden] { display: none; }
.od-item { display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.od-item:hover { background: var(--panel-2); filter: none; }
.od-item.busy { opacity: 0.6; }
.od-ic { width: 32px; height: 32px; flex: none; border-radius: 9px; display: grid; place-items: center; }
.od-ic.ps-badge { background: #001e36; color: #31a8ff; border: 0; font-size: 12px; }
.od-ic.fig-ic { background: #1e1e1e; }
.od-ic.fig-ic .app-ic { width: 13px; height: 19px; }
.od-ic.canva-ic { background: linear-gradient(135deg, #00c4cc, #7d2ae8); color: #FAFAFA; border-radius: 50%; font: italic 800 16px/1 Georgia, serif; }
.od-t { display: grid; gap: 1px; min-width: 0; }
.od-t b { font-size: 14px; font-weight: 600; }
.od-t small { font-size: 12px; color: var(--muted); }
.app-ic { width: 15px; height: 22px; flex: none; }
.canva-ic { display: grid; place-items: center; }
.appmodal { width: min(440px, 100%); }
.am-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.am-head > div { flex: 1; min-width: 0; }
.am-head h3 { margin: 0; font-size: 15.5px; }
.am-head .hint { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-head .app-ic { width: 20px; height: 30px; }
.am-head .canva-ic { width: 30px; height: 30px; border-radius: 50%; font: italic 800 17px/1 Georgia, serif; background: linear-gradient(135deg, #00c4cc, #7d2ae8); color: #FAFAFA; }
.am-steps { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 6px; font-size: 13.5px; color: var(--ink-2); }
.am-steps kbd { font: 600 12px ui-monospace, Menlo, monospace; padding: 1px 5px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel-2); }
.am-act { display: flex; flex-wrap: wrap; gap: 8px; }
.am-act svg { width: 15px; height: 15px; }
.appmodal .am-note { margin: 12px 0 0; font-size: 12px; line-height: 1.45; }
.am-act .ghostlike { border: 1px solid var(--line-2); }
.am-act .ghostlike:hover { background: var(--panel-2); filter: none; }

/* ---------------------------------------------------------------- «AI туслах»: the Media team's writing chat */
body:not(.can-ai) #nav .ai-nav { display: none; }
body.media-only #nav .assets-nav { display: none; } /* the Media team makes no videos, posters or carousels */
:root { --ai-y: #FDE030; --ai-y2: #E8C400; --ai-k: #0B0B0B; --ai-a: var(--ai-y); --ai-grad: linear-gradient(135deg, #FFE95A, var(--ai-y) 45%, var(--ai-y2)); --ai-ease: cubic-bezier(0.22, 1, 0.36, 1); } /* Noorog: logo yellow + ink */
.ai-wrap { display: grid; grid-template-columns: 272px minmax(0, 1fr); height: calc(100dvh - 176px); min-height: 480px; max-width: 1400px; margin: 0 auto;
  background: var(--panel); border-radius: var(--r); overflow: hidden; } /* the app's card */

/* the list */
.ai-side { display: flex; flex-direction: column; gap: 2px; padding: 0 10px 12px; background: var(--panel); border-right: 1px solid var(--line); min-height: 0; }
.ai-find { display: flex; align-items: center; gap: 8px; height: 32px; margin: 0; padding: 0 10px; border-radius: 10px; background: none; border: 1px solid transparent; color: var(--muted); font-weight: 400; transition: background 0.15s, border-color 0.15s; }
.ai-find:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.ai-find:focus-within { background: var(--panel); border-color: var(--line); }
.ai-find svg { width: 14px; height: 14px; opacity: 0.8; }
.ai-find input::placeholder { color: var(--muted); opacity: 0.8; }
.ai-find input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 0; margin: 0; height: 100%; font: inherit; font-size: 13px; color: var(--ink); box-shadow: none; }
.ai-chats { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin: 0 -4px; padding: 0 4px; }
.ai-group { padding: 12px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.ai-chat { position: relative; display: flex; align-items: center; justify-content: flex-start; width: 100%; min-height: 38px; padding: 8px 34px 8px 12px; border: 0; border-radius: 11px; background: none; color: var(--ink-2); text-align: left; font: inherit; cursor: pointer;
  animation: aiSlide 0.35s var(--ai-ease) both; animation-delay: calc(var(--i, 0) * 25ms); transition: background 0.15s, color 0.15s; }
.ai-chat span { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-chat:hover { background: var(--panel); color: var(--ink); filter: none; }
.ai-chat.on { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.ai-chat.out { animation: aiOut 0.18s ease-in forwards; }
.ai-del { position: absolute; right: 6px; top: 50%; transform: translateY(-50%) scale(0.9); width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); opacity: 0; transition: opacity 0.15s, transform 0.15s; }
.ai-del svg { width: 14px; height: 14px; }
.ai-chat:hover .ai-del { opacity: 1; transform: translateY(-50%) scale(1); }
.ai-del:hover { background: var(--bad-soft); color: var(--bad); }
@media (hover: none) { .ai-del { opacity: 1; } }
.ai-none { margin: 18px 10px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.ai-skills-note { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: none; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.ai-skills-note svg { width: 15px; height: 15px; }

/* the conversation */
.ai-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: var(--panel); }
.ai-top { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px; border-bottom: 1px solid var(--line); flex: none; }
.ai-back { display: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--ink-2); place-items: center; }
.ai-title { flex: 1; min-width: 0; margin: 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-title.muted { color: var(--muted); font-weight: 500; }
.ai-model { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--panel-2); font-size: 12px; font-weight: 600; color: var(--ink-2); }
.ai-model i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
.ai-thread { flex: 1; overflow-y: auto; padding: 32px clamp(16px, 4vw, 56px) 28px; scroll-behavior: auto; -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent); }
.ai-msgs { display: flex; flex-direction: column; gap: 52px; max-width: 760px; margin: 0 auto; }
.ai-msg.bot + .ai-msg.mine { margin-top: 24px; } /* a new turn */
.ai-msg { display: flex; gap: 14px; }
.ai-msg.in { animation: aiRise 0.45s var(--ai-ease) both; }
.ai-msg.mine { justify-content: flex-end; }
.ai-msg.mine .ai-bubble { max-width: min(76%, 560px); padding: 10px 16px; border-radius: 18px 18px 6px 18px; background: var(--ink); color: var(--panel); font-size: 14.5px; line-height: 1.55; box-shadow: none; } /* no shadow: it read as less space below */
.ai-msg.mine.in { animation-name: aiFromRight; }
.ai-av { position: relative; width: 32px; height: 32px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--ai-k); color: #FAFAFA; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.6); }
.ai-av svg { width: 17px; height: 17px; }
.ai-msg.live .ai-av::after { content: ''; position: absolute; inset: -4px; border-radius: 14px; border: 2px solid var(--muted); opacity: 0; animation: aiPing 1.6s ease-out infinite; }
.ai-msg.live .ai-av svg { animation: aiSpin 2.4s var(--ai-ease) infinite; }
.ai-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ai-msg.bot .ai-bubble { padding-top: 5px; font-size: 14.75px; line-height: 1.65; color: var(--ink); overflow-wrap: anywhere; }
.ai-bubble p { margin: 0 0 12px; } .ai-bubble > :last-child { margin-bottom: 0; }
.ai-bubble b { font-weight: 650; }
.ai-bubble ul, .ai-bubble ol { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 6px; }
.ai-bubble li { padding-left: 2px; }
.ai-bubble li::marker { color: var(--muted); font-weight: 600; }
.ai-bubble h4 { margin: 22px 0 8px; font-size: 15px; font-weight: 650; line-height: 1.4; }
.ai-bubble h4:first-child { margin-top: 0; }
.ai-bubble code { font-size: 13px; }
.ai-bubble blockquote { margin: 0 0 12px; padding: 8px 14px; border-left: 3px solid var(--line-2); background: var(--panel-2); border-radius: 0 10px 10px 0; }
.ai-bubble hr { border: 0; height: 1px; background: var(--line); margin: 20px 0; }
.ai-bubble hr + h4 { margin-top: 0; }
.ai-bubble a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.ai-table { margin: 0 0 12px; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.ai-table table { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.5; }
.ai-table th { text-align: left; padding: 9px 12px; background: var(--panel-2); font-weight: 600; white-space: nowrap; }
.ai-table td { padding: 9px 12px; border-top: 1px solid var(--line); vertical-align: top; }
.ai-bubble.writing > :last-child::after { content: ''; display: inline-block; width: 8px; height: 1.05em; margin-left: 3px; vertical-align: -2px; border-radius: 2px; background: var(--ink); animation: aiCaret 0.9s steps(1) infinite; }
.ai-stopped { display: inline-flex; margin-top: 8px; padding: 2px 9px; border-radius: 999px; background: var(--panel-2); font-size: 11.5px; font-style: normal; color: var(--muted); }
.ai-useds { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-right: 6px; font-size: 12px; color: var(--muted); animation: aiPop 0.35s var(--ai-ease) both; }
.au-skills { font-weight: 500; }
.au-web { display: inline-flex; align-items: center; gap: 5px; }
.au-web svg { width: 13px; height: 13px; }
.au-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line-2); }
.ai-think { display: inline-flex; align-items: center; gap: 10px; }
.ai-think-t { font-size: 13.5px; font-weight: 500; background: linear-gradient(90deg, var(--muted) 30%, var(--ink) 50%, var(--muted) 70%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: aiShimmer 1.6s linear infinite; }
.ai-dots { display: inline-flex; gap: 4px; }
.ai-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: aiDot 1.1s ease-in-out infinite; }
.ai-dots i:nth-child(2) { animation-delay: 0.14s; } .ai-dots i:nth-child(3) { animation-delay: 0.28s; }
.ai-tools { display: flex; align-items: center; gap: 2px; min-height: 30px; margin: -2px 0 0; }
.ai-tools > .ai-tool:first-child { margin-left: -10px; } /* no skills line: the button's padding sits outside the text edge */
.ai-tool { opacity: 0; }
.ai-msg.bot:hover .ai-tool { opacity: 1; } /* with the time, on hover only */
.ai-msg.live .ai-tool { display: none; } /* while it writes: only what it uses shows */
.ai-tool { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: 9px; background: none; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; transition: opacity 0.2s, background 0.15s, color 0.15s; }
.ai-tool svg { width: 15px; height: 15px; }
.ai-tool:hover { background: var(--panel-2); color: var(--ink); filter: none; }
.ai-tool.done { color: var(--ok); }
@media (hover: none) { .ai-tool { opacity: 1; } }

/* the empty chat */
.ai-thread.empty { display: flex; flex-direction: column; }
.ai-empty { max-width: 720px; width: 100%; margin: auto; text-align: center; padding: 10px 0 20px; } /* centred, and scrolls when the screen is short */
.ai-orb { position: relative; isolation: isolate; width: 76px; height: 76px; margin: 0 auto 22px; display: grid; place-items: center; color: #FAFAFA; animation: aiRise 0.6s var(--ai-ease) both; }
/* the first look: a turning violet – blue – pink gradient with a soft glow of the same colours, a white spark floating on it */
.ai-orb span { position: absolute; inset: 0; border-radius: 26px; background: conic-gradient(from 0deg, #8b5cf6, #3b82f6, #ec4899, #8b5cf6); animation: aiOrb 6s linear infinite; }
.ai-orb span + span { display: block; inset: -10px; filter: blur(18px); opacity: 0.55; border-radius: 32px; z-index: -1; }
.ai-orb svg { position: relative; width: 34px; height: 34px; stroke-width: 1.6; animation: aiFloat 3s ease-in-out infinite; }
.ai-empty h2 { margin: 0 0 8px; font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -0.01em; animation: aiRise 0.6s var(--ai-ease) 0.06s both; }
.ai-sub { margin: 0 auto 28px; max-width: 460px; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; animation: aiRise 0.6s var(--ai-ease) 0.12s both; }
.ai-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; text-align: left; }
.ai-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 1px; align-items: center; justify-content: stretch; justify-items: start; text-align: left; padding: 14px 14px 14px 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); color: var(--ink); font: inherit; cursor: pointer; overflow: hidden;
  animation: aiRise 0.55s var(--ai-ease) both; animation-delay: calc(0.18s + var(--i) * 0.05s); transition: transform 0.25s var(--ai-ease), box-shadow 0.25s, border-color 0.25s; }
.ai-card::before { content: ''; position: absolute; inset: 0; background: var(--panel-2); opacity: 0; transition: opacity 0.25s; }
.ai-card:hover { border-color: var(--line-2); box-shadow: 0 12px 26px -18px rgba(20, 20, 40, 0.35); filter: none; }
.ai-card:hover::before { opacity: 1; }
.ai-card-ic { grid-row: span 2; position: relative; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--panel-2); color: var(--ink-2); transition: transform 0.3s var(--ai-ease), background 0.25s, color 0.25s; }
.ai-card:hover .ai-card-ic { transform: scale(1.06); background: var(--ai-k); color: #FAFAFA; }
.ai-card-ic svg { width: 18px; height: 18px; }
.ai-card b { position: relative; font-size: 14px; font-weight: 600; align-self: end; }
.ai-card small { position: relative; font-size: 12.5px; color: var(--muted); align-self: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* the box: the text and the send button */
.ai-foot { flex: none; padding: 0 clamp(14px, 3vw, 40px) 12px; }
.ai-compose { display: flex; align-items: flex-end; gap: 10px; max-width: 800px; margin: 0 auto; padding: 8px 8px 8px 18px; border: 1px solid var(--line-2); border-radius: 22px; background: var(--panel);
  box-shadow: 0 8px 24px -18px rgba(20, 20, 40, 0.35); transition: border-color 0.2s, box-shadow 0.2s; }
.ai-compose:focus-within { box-shadow: 0 10px 28px -18px rgba(20, 20, 40, 0.45); }
.ai-compose textarea { flex: 1; min-width: 0; min-height: 24px; max-height: 220px; margin: 0; padding: 7px 0; border: 0; outline: 0; resize: none; background: none; color: var(--ink); font: inherit; font-size: 15px; line-height: 1.5; box-shadow: none; }
.ai-compose textarea::placeholder { color: var(--muted); }
.ai-go { position: relative; width: 34px; height: 34px; flex: none; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); color: var(--muted); transition: background 0.2s, color 0.2s, transform 0.2s var(--ai-ease); }
.ai-go.ready { background: var(--ink); color: var(--panel); }
.ai-go.ready:hover { transform: scale(1.06); filter: none; }
.ai-go:active { transform: scale(0.94); }
.ai-go .go { width: 17px; height: 17px; stroke-width: 2.3; transition: transform 0.25s var(--ai-ease), opacity 0.2s; }
.ai-go .st { position: absolute; width: 11px; height: 11px; border-radius: 3px; background: currentColor; opacity: 0; transform: scale(0.4); transition: opacity 0.2s, transform 0.25s var(--ai-ease); }
.ai-compose.busy .ai-go .go { opacity: 0; transform: scale(0.4); }
.ai-compose.busy .ai-go .st { opacity: 1; transform: none; }
.ai-disclaimer { max-width: 800px; margin: 8px auto 0; text-align: center; font-size: 11.5px; color: var(--muted); }
@media (max-width: 860px) { .ai-disclaimer { display: none; } }

@keyframes aiRise { from { opacity: 0; transform: translateY(12px) scale(0.985); } }
@keyframes aiFromRight { from { opacity: 0; transform: translate(14px, 6px) scale(0.97); } }
@keyframes aiSlide { from { opacity: 0; transform: translateX(-8px); } }
@keyframes aiOut { to { opacity: 0; transform: translateX(-12px); height: 0; min-height: 0; padding-top: 0; padding-bottom: 0; } }
@keyframes aiPop { from { opacity: 0; transform: scale(0.85); } }
@keyframes aiPing { 0% { opacity: 0.7; transform: scale(0.9); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes aiSpin { 0%, 70% { transform: rotate(0); } 100% { transform: rotate(180deg); } }
@keyframes aiDot { 0%, 80%, 100% { opacity: 0.35; transform: translateY(0) scale(0.85); } 40% { opacity: 1; transform: translateY(-4px) scale(1); } }
@keyframes aiShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes aiCaret { 50% { opacity: 0; } }
@keyframes aiOrb { to { transform: rotate(360deg); } }
@keyframes aiFloat { 50% { transform: translateY(-3px) rotate(8deg); } }
@keyframes aiRing { to { --ai-ang: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .ai-msg.in, .ai-card, .ai-chat, .ai-orb, .ai-orb span, .ai-orb svg, .ai-empty h2, .ai-sub, .ai-used, .ai-compose.busy::before, .ai-msg.live .ai-av svg, .ai-msg.live .ai-av::after { animation: none !important; }
}
@media (max-width: 1240px) { .ai-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .ai-wrap { grid-template-columns: 1fr; height: calc(100dvh - 200px); border-radius: 20px; }
  .ai-main { display: none; }
  .ai-main.open { display: flex; }
  .ai-wrap:has(.ai-main.open) .ai-side { display: none; }
  .ai-back { display: grid; }
  .ai-cards { grid-template-columns: 1fr 1fr; }
}
/* «AI туслах»: the chat and its list show a thin scrollbar (the app hides them elsewhere) */
.ai-thread, .ai-chats { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.ai-thread::-webkit-scrollbar, .ai-chats::-webkit-scrollbar { display: block; width: 10px; }
.ai-thread::-webkit-scrollbar-track, .ai-chats::-webkit-scrollbar-track { background: transparent; }
.ai-thread::-webkit-scrollbar-thumb, .ai-chats::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
.ai-thread::-webkit-scrollbar-thumb:hover, .ai-chats::-webkit-scrollbar-thumb:hover { background-color: var(--muted); }
/* «AI туслах» fills the screen below the top bar exactly: only the chat scrolls inside, the page itself stays still */
@media (min-width: 861px) {
  body[data-page="assistant"] #main { overflow: hidden; padding-bottom: 24px; }
  body[data-page="assistant"] .ai-wrap { height: calc(100dvh - 140px - 24px); min-height: 420px; }
}

/* «AI туслах»: when a message was written, shown on hover — left of a question, at the end of a reply's row */
.ai-at { flex: none; align-self: center; font-size: 11.5px; color: var(--muted); white-space: nowrap; opacity: 0; transition: opacity 0.18s; pointer-events: none; }
.ai-msg:hover .ai-at { opacity: 1; }
.ai-msg.mine { align-items: center; gap: 10px; }
.ai-tools .ai-at { margin-left: 6px; }
@media (hover: none) { .ai-at { display: none; } }
.ai-side .ai-find { padding-left: 10px; } /* the search icon under the + */
/* a question's time sits under its bubble, on the right */
.ai-msg.mine { position: relative; flex-direction: column; align-items: flex-end; }
.ai-msg.mine .ai-at { position: absolute; right: 4px; top: 100%; margin-top: 6px; } /* takes no room: hovering moves nothing */


/* the list's header, like the chat's top bar: «Чатууд» and a small «+ Шинэ чат» pill (the look of the «Claude» one) */
.ai-shead { display: flex; align-items: center; gap: 10px; height: 56px; margin: 0 -10px 8px; padding: 0 12px 0 20px; border-bottom: 1px solid var(--line); flex: none; }
.ai-shead h3 { flex: 1; margin: 0; font-size: 15px; font-weight: 600; }
.ai-newpill { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px 0 8px; border: 0; border-radius: 999px; background: var(--panel-2); color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s; }
.ai-newpill svg { width: 14px; height: 14px; stroke-width: 2.2; }
.ai-newpill:hover { background: color-mix(in srgb, var(--ink) 8%, var(--panel-2)); color: var(--ink); filter: none; }
.ai-chat:hover, .ai-chat.on { background: var(--panel-2); } /* on white: the soft grey of the app */

/* ================================================================ motion
   One light layer over the whole app. Only opacity and transform move (the browser does those on the GPU, without
   re-laying out or re-painting the page); short times; nothing loops except small «working» signs; all of it off
   when the system asks for less motion. */
:root { --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.55, 0, 1, 0.45); }

/* moving between pages: a plain fade, nothing slides */
.page.active { animation: mPage 0.22s ease-out both; }
@keyframes mPage { from { opacity: 0; } }

/* windows: the backdrop only fades (its blur stays still); the window grows in a touch */
.modal-back { animation: mFade 0.16s ease-out both; }
.modal-back > .modal, .modal-back > div:first-child { animation: mPop 0.24s var(--ease-out) both; }
@keyframes mFade { from { opacity: 0; } }
@keyframes mPop { from { opacity: 0; transform: translateY(8px) scale(0.97); } }

/* menus and pickers open from where they hang */
.moremenu, .memenu { transform-origin: top right; animation: mMenu 0.16s var(--ease-out) both; }
@keyframes mMenu { from { opacity: 0; transform: translateY(-4px) scale(0.97); } }

/* buttons answer a press; links, rows and nav ease their colour instead of snapping */
button, .btn, .btnlike { transition: filter 0.15s, background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.12s var(--ease-out); }
button:not(:disabled):active, .btn:active, .btnlike:active { transform: scale(0.97); }
#nav a, .nav2 a { transition: background-color 0.18s, color 0.18s; }
#nav a svg, .nav2 a svg { transition: color 0.18s, transform 0.25s var(--ease-out); }
#nav a:hover svg, .nav2 a:hover svg { transform: translateX(1px) scale(1.06); }
.tcard, .pitem, .trow, .ao-t, .crew li, .tt-person, .style, .ag { transition: background-color 0.15s, border-color 0.15s, box-shadow 0.2s; }
input, select, textarea { transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s; }

/* «working» signs, made cheap: they pulse in opacity instead of re-painting a growing shadow every frame */
@keyframes livedot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.8); } }
@keyframes evlive { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.ai-orb span:first-child { will-change: transform; } /* the turning gradient keeps its own layer */
.ai-orb span + span { animation: none; } /* its blurred glow stays still: a blur that turns is costly */

/* less motion when the system asks for it (and in the background the browser pauses these anyway) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------- in and out, alike everywhere
   In: 0.2–0.24 s, easing out (fast start, soft landing). Out: 0.16 s, easing in, the same way back (app.js plays it
   before a popup is removed). Windows shown and hidden with [hidden] fade both ways in CSS. */
:root { --m-in: 0.22s; --m-out: 0.16s; }
.newmenu, .crewmenu, .pickmenu, .moremenu, .memenu { transform-origin: top center; animation: mMenu var(--m-in) var(--ease-out) both; }
.toast { animation: mToast var(--m-in) var(--ease-out) both; }
.modal-back { animation: mFade var(--m-in) ease-out both; }
.modal-back > .modal, .modal-back > div:first-child { animation: mPop 0.24s var(--ease-out) both; }
@keyframes mToast { from { opacity: 0; transform: translateY(8px) scale(0.97); } }

.m-out { pointer-events: none !important; }
.newmenu.m-out, .crewmenu.m-out, .pickmenu.m-out, .moremenu.m-out, .memenu.m-out { animation: mMenuOut var(--m-out) var(--ease-in) both !important; }
.toast.m-out { animation: mToastOut var(--m-out) var(--ease-in) both !important; }
.modal-back.m-out { animation: mFadeOut var(--m-out) ease-in both !important; }
.modal-back.m-out > .modal, .modal-back.m-out > div:first-child { animation: mPopOut var(--m-out) var(--ease-in) both !important; }
@keyframes mMenuOut { to { opacity: 0; transform: translateY(-4px) scale(0.97); } }
@keyframes mToastOut { to { opacity: 0; transform: translateX(14px); } }
@keyframes mFadeOut { to { opacity: 0; } }
@keyframes mPopOut { to { opacity: 0; transform: translateY(6px) scale(0.97); } }

/* windows that are hidden rather than removed (Client-д илгээх …): fade out, then go */
.modal-back { transition: opacity var(--m-out) ease-in, display var(--m-out) allow-discrete; }
.modal-back[hidden] { display: none; opacity: 0; }

/* the profile box: hidden until it knows who it is (at once from memory, else when the team loads), then fades in */
#meBox { opacity: 0; transition: opacity 0.2s ease-out; }
#meBox.ready { opacity: 1; }

/* first load: hidden until app scripts have built the page (index.html), then one soft fade-in */
html.boot body { opacity: 0; }
body { transition: opacity 0.2s ease-out; }

/* the date picker: the button reads like the others («Хугацаагүй», «Маргааш», «10 сарын 31, Ба»); the menu has quick picks and a month */
.datepick { min-width: 0; }
.datepick .pk-ic.late { background: var(--bad-soft); color: var(--bad); }
.dp-x { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 6px; color: var(--muted); font-size: 16px; line-height: 1; }
.dp-x:hover { background: var(--panel-2); color: var(--ink); }
.datemenu { width: 288px; }
.datemenu .tm-chip.on { border-color: var(--ink); color: var(--ink); }
.dp-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 4px; }
.dp-head b { font-size: 14px; font-weight: 600; }
.dp-nav { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ink-2); display: grid; place-items: center; }
.dp-nav:hover { background: var(--panel-2); filter: none; }
.dp-nav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 4px 10px 10px; }
.dp-grid i { font-style: normal; text-align: center; font-size: 11px; font-weight: 600; color: var(--muted); padding: 4px 0; }
.dp-grid button { height: 34px; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--ink); font-size: 13.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.dp-grid button:hover { background: var(--panel-2); filter: none; }
.dp-grid button.past { color: var(--muted); }
.dp-grid button.today { box-shadow: inset 0 0 0 1.5px var(--line-2); font-weight: 700; }
.dp-grid button.sel { background: var(--ink); color: var(--panel); font-weight: 700; box-shadow: none; }

.dp-grid button:disabled { color: var(--line-2); background: none; cursor: default; opacity: 1; }
.dp-nav:disabled { opacity: 0.3; cursor: default; }

/* the stat cards' blurred glow keeps its own layer, so a hover never makes it re-draw */
.stat::after { transform: translateZ(0); }
.stat .sic { transition: transform 0.3s var(--ease-out); }
.stat:hover .sic { transform: scale(1.06); } /* the small icon answers instead of the whole card */

/* links in AI replies (sources, articles): open in a new tab, marked with a small ↗ */
.ai-bubble a.ai-link { display: inline-flex; align-items: center; gap: 3px; color: var(--blu-ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--blu-ink) 35%, transparent); text-underline-offset: 3px; overflow-wrap: anywhere; }
.ai-bubble a.ai-link:hover { text-decoration-color: currentColor; }
.ai-bubble a.ai-link svg { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.7; }

/* ---------------------------------------------------------------- clicks don't paint things blue
   Controls (buttons, links that act as buttons, cards, chips, menus, the sidebar) aren't text to select: clicking or
   double-clicking them no longer highlights their words. Real text (chats, the editor, inputs, descriptions) selects as
   before, in a soft brand tint instead of system blue. The focus ring stays for the keyboard (Tab), not for mouse clicks. */
button, .btn, .btnlike, .pick, .chip, .tm-chip, .side, #nav a, .nav2 a, .stat, .ai-card, .ai-chat, .ai-newpill, .moremenu, .memenu,
.newmenu, .crewmenu, .pickmenu, .dp-grid, .tcard .tdel, .seg, .lang, .style, .cs-kinds button, .od-item, .ai-tool, .ai-skill, label.ai-find,
.me, .bellbtn, .newproj, a.stat, .pk-row, .tabs, .cm-move, .cm-tab, [role="menuitem"], [role="tab"] {
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
input, textarea, [contenteditable="true"], .ai-bubble, .dpage { -webkit-user-select: text; user-select: text; }
::selection { background: color-mix(in srgb, var(--ink) 22%, transparent); color: inherit; }
:focus:not(:focus-visible) { outline: none; }
a, button { -webkit-tap-highlight-color: transparent; }
/* menus focus their first item when they open (for the keyboard): no blue frame for that — the item just gets the soft hover
   background, which is also how the keyboard sees where it is */
.newmenu :focus-visible, .moremenu :focus-visible, .memenu :focus-visible, .pickmenu :focus-visible, .crewmenu :focus-visible,
.od-menu :focus-visible, .datemenu :focus-visible, .spp :focus-visible { outline: none; }
.newmenu button:focus, .moremenu button:focus, .memenu > a:focus, .memenu > button:focus, .pk-row:focus, .od-item:focus { outline: none; }
/* fields: a calm frame when clicked, not a blue glow */

/* Settings → Gmail: my email footer */
.g-foot { display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.gf-head { display: grid; gap: 2px; }
.gf-head b { font-size: 14px; font-weight: 600; }
.gf-head .hint { margin: 0; font-size: 12.5px; }
.gf-edit { position: relative; }
.gf-back, .g-foot textarea { margin: 0; padding: 10px 14px; border: 1px solid transparent; border-radius: 12px; font: inherit; font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: break-word; letter-spacing: normal; }
.g-foot textarea { position: relative; display: block; width: 100%; min-height: 168px; resize: vertical; background: transparent; border-color: var(--line-2); color: var(--ink); }
.gf-back { position: absolute; inset: 0; overflow: hidden; color: transparent; background: var(--panel); pointer-events: none; }
.gf-back mark { color: transparent; background: color-mix(in srgb, var(--yel-ink) 30%, transparent); border-radius: 4px; }
.gf-left { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--yel-ink); }
.gf-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--yel-ink); }
.gf-act { display: flex; align-items: center; gap: 8px; }
.gf-saved { font-size: 12.5px; color: var(--ok); }

/* the footer form and its preview */
.gf-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.gf-form label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; margin: 0; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.gf-form label input { flex: 1 0 100%; }
.gf-form label em { font-style: normal; font-weight: 500; color: var(--muted); margin-left: 4px; }
.gf-form label.wide { grid-column: 1 / -1; }
.gf-form input { margin: 0; font-size: 14px; }
.gf-form input.todo { background: color-mix(in srgb, var(--yel-ink) 10%, var(--panel)); border-color: color-mix(in srgb, var(--yel-ink) 40%, var(--line-2)); }
.gf-form input::placeholder { color: color-mix(in srgb, var(--yel-ink) 70%, var(--muted)); }
.gf-prev { border: 1px dashed var(--line-2); border-radius: 12px; padding: 12px 16px; background: #FAFAFA; }
.gf-prev-l { display: block; margin-bottom: 8px; font-size: 11.5px; font-weight: 600; color: #8a8f99; text-transform: uppercase; letter-spacing: 0.04em; }
#gFootPrev { font: 14px/1.6 Arial, sans-serif; color: #202124; }
#gFootPrev p { margin: 0 0 10px; }
.gf-logo { margin-top: 6px; font: 800 15px/1 'Montserrat', Arial, sans-serif; letter-spacing: 0.06em; color: #0b0b0b; }
@media (max-width: 700px) { .gf-form { grid-template-columns: 1fr; } }

/* Client-д илгээх: locked while it sends, then a clear «sent» */
.sd-form.sending input, .sd-form.sending select, .sd-form.sending textarea { opacity: 0.55; }
.sd-go:disabled { opacity: 1; cursor: progress; }
.sd-spin { width: 15px; height: 15px; flex: none; border-radius: 50%; border: 2px solid rgba(250, 250, 250, 0.35); border-top-color: #FAFAFA; animation: spin 0.8s linear infinite; }
.sd-done { display: grid; justify-items: center; gap: 6px; padding: 22px 8px 14px; text-align: center; animation: mPop 0.3s var(--ease-out) both; }
.sd-check { width: 52px; height: 52px; margin-bottom: 6px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); }
.sd-check svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sd-done b { font-size: 17px; }
.sd-done span { font-size: 14px; color: var(--ink-2); }
.sd-done a { margin-top: 4px; font-size: 13.5px; color: var(--blu-ink); }

.sd-note { margin: -2px 2px 2px; font-size: 12px; color: var(--muted); }

/* Client-д илгээх: several addresses as chips in one box; the note under it small and quiet */
.sd-to { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; margin: 0; padding: 6px 8px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); cursor: text; font-weight: 400; }
.sd-to input { flex: 1; min-width: 160px; margin: 0; padding: 4px 6px; border: 0; outline: 0; background: none; box-shadow: none !important; font-size: 13.5px; }
.sd-chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 4px 0 10px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); font-size: 13px; color: var(--ink); }
.sd-chip button { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 15px; line-height: 1; display: grid; place-items: center; }
.sd-chip button:hover { background: var(--line); color: var(--ink); filter: none; }
.sendmodal .sd-note { margin: -2px 4px 2px; font-size: 11.5px; line-height: 1.45; color: var(--muted); opacity: 0.75; }

.sendmodal .sd-sub { margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); opacity: 0.8; } /* one quiet line under the title */

/* the bell: notifications only — a quiet line when there are none */
.ntf-empty { margin: 0; padding: 22px 16px 26px; text-align: center; font-size: 13.5px; color: var(--muted); }
.ntf-empty[hidden] { display: none; }

/* the bell's panel: the size of the right column, and the page behind softly blurred while it is open */
.log { max-height: none; transform: translateY(-6px); transform-origin: top center; }
.log-back { position: fixed; inset: 0; z-index: 29; background: rgba(12, 12, 22, 0.22); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  opacity: 0; visibility: hidden; transition: opacity 0.18s ease, visibility 0.18s; }
body.log-open .log-back { opacity: 1; visibility: visible; }
.ntf-empty { flex: 1; display: grid; place-items: center; }
.nb-many { color: var(--muted); }

/* birthdays: a quiet pill on the profile; on the day itself the person is lifted out */
.mp-bday svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mp-bday.today { color: #FAFAFA; background: var(--lav-ink); border-color: var(--lav-ink); font-weight: 600; }
.mp-head.is-bday .mp-avwrap { border-radius: 50%; box-shadow: 0 0 0 3px var(--lav-ink), 0 0 26px color-mix(in srgb, var(--lav-ink) 45%, transparent); }
#dBday { display: grid; gap: 10px; margin-bottom: 20px; }
#dBday[hidden] { display: none; }
.bday-strip { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; color: var(--ink); text-decoration: none; background: color-mix(in srgb, var(--lav-ink) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--lav-ink) 45%, var(--line)); }
.bday-ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--lav-ink); color: #FAFAFA; }
.bday-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bday-t { flex: 1; min-width: 0; font-size: 14.5px; } .bday-t b { font-weight: 600; }
.bday-go { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.msg.is-bday p { color: var(--ink); }
.bday-mini { width: 15px; height: 15px; fill: none; stroke: var(--lav-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; }

/* the master admin's rename and delete buttons on a team card */
.tt-tools { display: flex; gap: 2px; flex: none; }
.tt-tool { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; border-radius: 8px; background: transparent; color: var(--muted); }
.tt-tool:hover { background: var(--panel-2); color: var(--ink); filter: none; }
.tt-tool svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* a member's own teams on their profile: to read, not to pick */
.teampick.fixed { border-color: transparent; background: transparent; padding: 6px 0; }
.teampick.fixed .tpchip:hover { border-color: transparent; }

/* Insights */
.in-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.in-sort { position: relative; margin-left: auto; }
.in-bar .seg { height: 40px; box-sizing: border-box; }
.in-bar .seg button { display: flex; align-items: center; gap: 7px; padding: 0 14px; }
.in-bar .seg svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.in-bar .seg button.on svg { opacity: 1; }
@media (max-width: 600px) { .in-bar .seg button { padding: 0 10px; } }
.in-sortbtn { display: inline-flex; align-items: center; gap: 6px; height: 40px; box-sizing: border-box; padding: 0 14px; border: 0; border-radius: 12px; background: var(--panel-2); color: var(--ink-2); font-size: 14px; font-weight: 500; }
.in-sortbtn:hover, .in-sortbtn[aria-expanded="true"] { filter: none; color: var(--ink); }
.in-sort .in-sortbtn { padding-right: 10px; }
.in-sortbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s; }
.in-sortbtn[aria-expanded="true"] svg { transform: rotate(180deg); }
.in-sortmenu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; min-width: 150px; padding: 4px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28); }
.in-sortmenu button { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font-size: 14px; font-weight: 500; text-align: left; }
.in-sortmenu button:hover { background: var(--panel-2); color: var(--ink); filter: none; }
.in-sortmenu button[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.in-totals { display: flex; flex-wrap: wrap; gap: 16px 48px; margin-bottom: 28px; }
.in-total b { display: block; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.in-total span { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.in-note { margin: 0 0 16px; font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; }
.in-note.bad { color: var(--bad); }
.in-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.in-card { display: flex; flex-direction: column; padding: 8px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); color: var(--ink); text-decoration: none; transition: border-color 0.2s; }
.in-card:hover { border-color: var(--line-2); }
.in-thumb { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 12px; background: var(--panel-2); }
.in-pic { position: absolute; inset: 0; background: center / cover no-repeat; transition: transform 0.4s var(--ease-out); }
.in-card:hover .in-pic { transform: scale(1.03); }
.in-tag { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; background: rgba(12, 12, 18, 0.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #FAFAFA; font-size: 11.5px; font-weight: 500; }
.in-dot { width: 6px; height: 6px; border-radius: 50%; }
.in-dot.facebook { background: #6ea2ff; }
.in-dot.instagram { background: #f27aa8; }
.in-dot.youtube { background: #ff6b6b; }
.in-body { display: flex; flex-direction: column; flex: 1; padding: 12px 8px 6px; }
.in-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.7em; font-size: 14.5px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.in-meta { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.in-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.in-n b { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.in-n small { display: block; margin-top: 1px; font-size: 11.5px; color: var(--muted); }
@media (max-width: 600px) { .in-sortmenu { right: auto; left: 0; } .in-sort { margin-left: 0; } .in-list { grid-template-columns: 1fr; } }

/* Settings → Accounts: Claude Code and Google as dropdowns, like the key groups */
.acct-list { margin-top: 12px; }
.acct-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.acct-st.ok::before { background: var(--ok); } .acct-st.err::before { background: var(--warn); }
.acct-st.ok, .acct-st.err { color: var(--ink-2); }
.acct-body { padding: 2px 14px 14px; }
.acct-body .cacct { margin-top: 0; background: var(--panel); }
.acct-body .cstate { margin: 0 0 6px; }
.acct-body .hint:last-child { margin-bottom: 0; }
.acct-body .g-off { background: var(--panel); }
.kgroup.closing .kg-chev { transform: none !important; } /* the arrow turns back as the dropdown starts to close */
.kg-chev { transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1) !important; }


/* video style runs: each step with how long it took; the one in progress turns */
.progsteps li { display: flex; align-items: baseline; gap: 10px; }
.progsteps li time { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.progsteps li.done::marker { content: "✓  "; color: var(--ok); }
.progsteps li.cur::marker { content: "◌  "; color: var(--muted); }
.progsteps li.cur > span { color: var(--ink); font-weight: 500; }
.modal.refine { width: min(560px, 100%); }
.modal.refine textarea { width: 100%; margin: 4px 0 4px; }
.rf-notes { margin-bottom: 12px; font-size: 13px; color: var(--ink-2); }
.rf-notes ol { margin: 6px 0 0; padding-left: 20px; }
.rf-notes li { padding: 2px 0; }
.modal.refine .actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }

/* the notifications open without dimming or blurring the page (the see-through layer still closes them on a click) */
.log-back { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* the crew menu's «Team project» switch, above the people */
.crewmenu .cm-shared { align-items: flex-start; margin-bottom: 6px; padding: 10px 8px; border-bottom: 1px solid var(--line); border-radius: 9px 9px 0 0; }
.crewmenu .cm-shared input { margin-top: 3px; }
.crewmenu .cm-shared b { display: block; font-weight: 600; }
.crewmenu .cm-shared small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--muted); white-space: normal; }
.crewmenu .cm-shared.off { opacity: 0.6; cursor: default; }
.crewmenu .cm-shared > span { white-space: normal !important; }
.crewbtn.shared { border-color: var(--lav-ink); color: var(--lav-ink); }

/* step 1: what to make from the video */
.scopes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 4px 0 16px; }
.scope { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); color: var(--ink); text-align: left; white-space: normal; font-weight: 400; }
.scope:hover { filter: none; }
.scope.on { background: var(--blu-soft); }
.scope .pk-ic { margin-bottom: 6px; }
.scope b { font-size: 14.5px; font-weight: 600; }
.scope > span:last-child { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
@media (max-width: 860px) { .scopes { grid-template-columns: 1fr 1fr; } }

/* review workspaces: tabs, the Subtitles list and look, the Sound panel; the music library on Assets */
.wstabs { display: flex; margin: 2px 0 14px; }
.wstabs button { display: inline-flex; align-items: center; gap: 7px; flex: 1; justify-content: center; }
.wstabs svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ws-off { display: none !important; }
.caplook { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 6px 0 12px; }
.caplook label { margin: 0; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.caplook input, .caplook select { margin-top: 4px; padding: 7px 9px; font-size: 13.5px; }
.caphead { display: grid; grid-template-columns: 34px 70px 70px minmax(0, 1fr) 30px; gap: 6px; padding: 0 2px 4px; font-size: 11.5px; color: var(--muted); }
.caphead span:first-child { grid-column: 2; }
.caplist .caprow { display: grid; grid-template-columns: 34px 70px 70px minmax(0, 1fr) 30px; gap: 6px; align-items: center; margin-bottom: 6px; }
.caprow input, .sfxrow input, .sfxrow select { margin: 0; padding: 6px 8px; font-size: 13.5px; }
.caprow .tchip, .sfxrow .tchip { padding: 0; height: 30px; display: grid; place-items: center; }
.tchip svg, .mplay svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.cdel { padding: 0 8px; height: 30px; color: var(--muted); }
.muslist { display: grid; gap: 6px; margin: 8px 0; }
.musrow-pick { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); cursor: pointer; font-weight: 400; }
.musrow-pick.on { background: var(--blu-soft); }
.mp-t { flex: 1; min-width: 0; }
.mp-t b { display: block; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-t small { display: block; font-size: 12px; color: var(--muted); }
.mplay { width: 32px; height: 30px; padding: 0; display: grid; place-items: center; }
.mplay.playing { background: var(--blu-soft); color: var(--blu-ink); }
.musrow { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; flex-wrap: wrap; }
.mixrow { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 6px 0 12px; }
.mixrow label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; font-weight: 500; }
.mixrow input[type=range] { width: 140px; margin: 0; padding: 0; }
.mixrow output { font-size: 12.5px; color: var(--muted); min-width: 38px; }
#soundBox h3 { margin: 4px 0 2px; font-size: 15px; }
#soundBox h3 + .hint { margin-top: 0; }
.sfxlist { display: grid; gap: 6px; }
.sfxrow { display: grid; grid-template-columns: 52px 70px minmax(0, 1fr) 90px 32px 30px; gap: 6px; align-items: center; }
.sfxrow input[type=range] { padding: 0; }
.mladd { gap: 10px; flex-wrap: wrap; }
.mladd input, .mladd select { width: auto; flex: 1; min-width: 160px; margin: 0; }
.mlist { display: grid; gap: 6px; margin-top: 10px; }
.mlrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
@media (max-width: 860px) { .caplook { grid-template-columns: 1fr 1fr; } .sfxrow { grid-template-columns: 52px 64px minmax(0, 1fr) 30px 30px; } .sfxrow input[type=range] { display: none; } }

/* the drop area waits until «what to make» is chosen */
.drop.locked { opacity: 0.45; cursor: not-allowed; }
.drop.locked:hover, .drop.locked.over { border-color: var(--line-2); background: transparent; }
.drop.locked b::after { content: " — choose what to make first"; font-weight: 500; font-size: 14px; color: var(--muted); }

/* the preview's plain subtitles (a text track): readable, not styled like the edit */
#pv::cue { font: 600 18px/1.3 'Google Sans', system-ui, sans-serif; color: #FAFAFA; background: rgba(0, 0, 0, 0.55); }

/* a project with its video: its choice is fixed */
.scopes.fixed .scope { cursor: default; }
.scopes.fixed .scope:not(.on) { opacity: 0.45; }
.scopes.fixed .scope:hover { border-color: var(--line-2); }
.drop.locked.has-video b::after { content: " — this project already has its video"; }

/* project form dropdowns (selects.js): a button like the other fields, a small menu with a tick on the choice */
.fsel { position: relative; display: block; margin-top: 6px; }
.fsel > select { display: none; }
.fsel-btn { display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; padding: 0 12px 0 14px; border: 1px solid var(--line-2); border-radius: 12px;
  background: var(--panel); color: var(--ink); font: inherit; font-size: 14px; font-weight: 400; text-align: left; cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s; }
.fsel-btn:hover { filter: none; }
.fsel-btn:not(:disabled):active { transform: none; }
.fsel.open .fsel-btn, .fsel-btn:focus-visible { outline: none; }
.fsel-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsel-chev { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s var(--ease-out), stroke 0.15s; }
.fsel-btn:hover .fsel-chev, .fsel.open .fsel-chev { stroke: var(--ink); }
.fsel.open .fsel-chev { transform: rotate(180deg); }
.fsel-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; display: grid; gap: 2px; padding: 5px; border: 1px solid var(--line-2); border-radius: 14px;
  background: var(--panel); box-shadow: 0 14px 34px rgba(20, 20, 40, 0.22); transform-origin: top center; animation: mMenu 0.16s var(--ease-out) both; }
.fsel.up .fsel-menu { top: auto; bottom: calc(100% + 6px); transform-origin: bottom center; }
.fsel-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent;
  color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 400; text-align: left; cursor: pointer; }
.fsel-menu button span { flex: 1; min-width: 0; }
.fsel-menu button:hover, .fsel-menu button:focus { outline: none; background: var(--panel-2); color: var(--ink); filter: none; }
.fsel-menu button[aria-selected="true"] { color: var(--ink); font-weight: 500; }
.fsel-tick { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.fsel-menu button[aria-selected="true"] .fsel-tick { opacity: 1; }
.fsel-menu button:disabled { opacity: 0.4; cursor: default; }

/* Basics: language, format and words per caption line share one row (a hidden one leaves the others the room) */
.frow { display: flex; gap: 0 18px; }
.frow > label { flex: 1 1 0; min-width: 0; }
.frow > label[hidden] { display: none; }
@media (max-width: 900px) { .frow { flex-direction: column; } }
.frow > label > input { height: 44px; margin-top: 6px; }

/* the project's way back sits in the steps' row, drawn like a step */
.stepsrow { display: flex; gap: 12px; margin: 0 0 20px; }
.stepsrow .steps { flex: 1; min-width: 0; margin: 0; }
.stepback { display: flex; align-items: center; gap: 12px; flex: none; padding: 12px 18px 12px 16px; border-radius: 14px; background: var(--panel);
  color: var(--muted); font-weight: 500; font-size: 14.5px; text-decoration: none; transition: background-color 0.15s, color 0.15s; }
.stepback i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); flex: none; }
.stepback svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s var(--ease-out); }
.stepback:hover { color: var(--ink); background: var(--panel-2); }
.stepback:hover i { background: var(--panel); }
.stepback:hover svg { transform: translateX(-2px); }
@media (max-width: 900px) { .stepback span { display: none; } .stepback { padding: 12px; } }

/* sign-in greeting: the words rise in one after another, then the hand waves */
.lg-hello { margin: 0 0 24px; font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.lg-hello > span { display: inline-block; animation: lgWord 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(0.15s + var(--i) * 0.11s); }
.lg-hello .lg-wave { transform-origin: 70% 75%; animation: lgWord 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both, lgWave 1.4s ease-in-out 1 none; animation-delay: calc(0.15s + var(--i) * 0.11s), 1.15s; }
.login-card #lgTitle { font-size: 18px; color: var(--ink-2); }
@keyframes lgWord { from { opacity: 0; transform: translateY(14px) scale(0.96); filter: blur(6px); } }
@keyframes lgWave { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(16deg); } 30% { transform: rotate(-8deg); } 45% { transform: rotate(14deg); } 60% { transform: rotate(-4deg); } 75% { transform: rotate(10deg); } }
@media (prefers-reduced-motion: reduce) { .lg-hello > span, .lg-hello .lg-wave { animation: none; } }

/* sign-in: the email field carries its icon instead of a label */
.lg-field { position: relative; }
.lg-field > svg { position: absolute; left: 15px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; transition: stroke 0.15s; }
.lg-field > input { margin-top: 0; padding-left: 44px; }
.lg-field:focus-within > svg { stroke: var(--ink); }
.lg-pw > input { padding-right: 46px; }
.lg-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; }
.lg-eye:hover { color: var(--ink); background: var(--panel-2); filter: none; }
.lg-eye:not(:disabled):active { transform: translateY(-50%) scale(0.92); }
.lg-eye svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* «Remember me»: a quiet line under the fields, not a box of its own */
.lg-remember { gap: 10px; margin: 4px 0 6px; padding: 4px 0; border: 0; border-radius: 0; background: none; width: fit-content; }
.lg-remember:hover { background: none; }
.lg-remember .lg-sw { width: 30px; height: 18px; background: var(--line-2); }
.lg-remember .lg-sw::after { top: 2px; left: 2px; width: 14px; height: 14px; box-shadow: none; }
.lg-remember input:checked + .lg-sw { background: var(--ok); }
.lg-remember input:checked + .lg-sw::after { transform: translateX(12px); background: #FAFAFA; }
.lg-remember input:focus-visible + .lg-sw { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.lg-remember .lg-rtext b { font-size: 13.5px; font-weight: 400; color: var(--muted); transition: color 0.15s; }
.lg-remember:hover .lg-rtext b { color: var(--ink-2); }
.lg-remember .lg-rtext small { display: none; }
.fsel-menu { max-height: 320px; overflow-y: auto; }

/* Assets → a style → «Fonts & colours» (stylelook.js) */
.modal.lookm { width: min(560px, 100%); }
.lk-prev { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 16px; padding: 20px 22px; margin-bottom: 18px; border-radius: 16px;
  background: var(--lk-bg); color: var(--lk-text); overflow: hidden; transition: background-color 0.2s, color 0.2s; }
.lk-prev .lk-pill { grid-column: 1 / -1; justify-self: start; padding: 5px 12px; border-radius: 999px; background: var(--lk-accent); color: var(--lk-bg); font-size: 13px; }
.lk-prev .lk-title { max-width: 300px; font-size: 34px; line-height: 1; min-width: 0; overflow-wrap: anywhere; }
.lk-prev.upper .lk-title { text-transform: uppercase; }
.lk-prev .lk-num { font-size: 54px; line-height: 0.9; color: var(--lk-accent2); }
.lk-prev .lk-panel { grid-column: 1 / -1; justify-self: start; padding: 8px 14px; border-radius: 10px; background: var(--lk-panel); font-size: 16px; }
.lk-h { margin: 4px 0 8px; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.lk-type { display: grid; gap: 8px; }
.modal.tpform .lk-row { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 12px; margin: 0; font-weight: 500; font-size: 14px; }
.lk-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 12px; border-radius: 12px; background: var(--panel-2); }
.lk-tabs button { flex: 1; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; }
.lk-tabs button:hover { color: var(--ink); filter: none; }
.lk-tabs button[aria-selected="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }
.lk-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.lk-seg button { padding: 7px 11px; border: 1px solid var(--line-2); border-radius: 9px; background: transparent; color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.lk-seg button:hover { color: var(--ink); filter: none; }
.lk-seg button.on { border-color: var(--ink); background: var(--ink); color: var(--panel); }
.lk-range { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lk-range input[type=range] { flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; background: none; accent-color: var(--ink); box-shadow: none; }
.lk-range output { width: 64px; flex: none; font: 500 12.5px ui-monospace, Menlo, monospace; color: var(--ink-2); text-align: right; }
.lk-reset { width: 26px; height: 26px; flex: none; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 15px; cursor: pointer; }
.lk-reset:hover { background: var(--panel-2); color: var(--ink); filter: none; }
.lk-prev [data-r] { cursor: pointer; outline: 2px dashed transparent; outline-offset: 4px; border-radius: 4px; transition: outline-color 0.15s; }
.lk-prev [data-r].editing { outline-color: color-mix(in srgb, var(--lk-text) 45%, transparent); }
.lk-row .fsel { margin-top: 0; }
.lk-up { display: flex; align-items: center; gap: 12px; margin: 14px 0 18px; padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: 12px; transition: border-color 0.15s, background-color 0.15s; }
.lk-up.over { border-color: var(--ink-2); background: var(--panel-2); }
.lk-upbtns { display: flex; flex-direction: column; gap: 6px; flex: none; }
.lk-up button { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.lk-up button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lk-up small { font-size: 12px; color: var(--muted); line-height: 1.35; }
.lk-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 6px; }
.modal.tpform .lk-color { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 12px; cursor: pointer; }
.lk-color input[type=color] { width: 30px; height: 30px; flex: none; margin: 0; padding: 0; border: 1px solid var(--line-2); border-radius: 8px; background: none; cursor: pointer; }
.lk-color input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.lk-color input[type=color]::-webkit-color-swatch { border: 0; border-radius: 7px; }
.lk-color > span { display: grid; min-width: 0; }
.lk-color b { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.lk-color input[type=text] { margin: 0; padding: 0; border: 0; background: none; font: 500 13px ui-monospace, Menlo, monospace; color: var(--ink); box-shadow: none; }
.lk-color input[type=text]:focus { box-shadow: none; }
@media (max-width: 560px) { .modal.tpform .lk-row { grid-template-columns: 1fr; gap: 4px; } .lk-up { flex-direction: column; align-items: flex-start; } }
.modal-back:has(.lookm) { overflow-y: auto; align-items: start; }
.modal.lookm { margin: 16px 0; }
.lk-warn { margin: 0 0 0 132px; padding: 8px 10px; border-radius: 9px; background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--ink); font-size: 12.5px; line-height: 1.4; }
@media (max-width: 560px) { .lk-warn { margin-left: 0; } }

/* sign in: «Remember me» and a narrower Sign in button share one row */
#lgForm .actions.lg-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: nowrap; margin-top: 14px; }
#lgForm .lg-row .lg-remember { margin: 0; flex: 0 1 auto; min-width: 0; }
#lgForm .lg-row .lg-btn { width: auto; min-width: 132px; height: 42px; padding: 0 26px; flex: none; }

/* AI assistant attachments: the clip button, the files in the box (a picture or a file card, ✕ to take it out), and a sent
   message's files over its bubble */
.ai-compose { flex-wrap: wrap; padding-left: 8px; }
.ai-files { flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 6px 2px; }
.ai-files[hidden] { display: none; }
.ai-attach { width: 34px; height: 34px; flex: none; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: var(--muted); transition: background 0.15s, color 0.15s; }
.ai-attach:hover { background: transparent; color: var(--ink); filter: none; }
.ai-attach svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ai-chip { position: relative; display: flex; align-items: center; gap: 10px; max-width: 250px; padding: 6px 30px 6px 6px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); animation: aiChipIn 0.22s var(--ai-ease) both; }
@keyframes aiChipIn { from { opacity: 0; transform: translateY(4px) scale(0.97); } }
.ai-chip img, .ai-chip > i { width: 38px; height: 38px; flex: none; border-radius: 8px; object-fit: cover; }
.ai-chip > i { display: grid; place-items: center; background: var(--line); color: var(--ink-2); }
.ai-chip > i svg, .ai-att-file i svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ai-chip-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ai-chip-t b, .ai-att-file b { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-chip-t small, .ai-att-file small { font-size: 11.5px; color: var(--muted); }
.ai-chip.up { animation: aiChipIn 0.22s var(--ai-ease) both, aiChipUp 1.1s ease-in-out infinite alternate; }
@keyframes aiChipUp { to { opacity: 0.55; } }
.ai-chip.err { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.ai-chip.err small { color: var(--bad); }
.ai-chip-x { position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: var(--muted); }
.ai-chip-x:hover { background: var(--line-2); color: var(--ink); filter: none; }
.ai-chip-x svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
#aiMain.ai-drop .ai-compose { border-style: dashed; background: var(--panel-2); }
.ai-att { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: min(76%, 560px); margin-bottom: 6px; }
.ai-att-img img { display: block; max-width: 220px; max-height: 180px; border-radius: 14px; object-fit: cover; border: 1px solid var(--line); }
.ai-att-file { display: flex; align-items: center; gap: 10px; max-width: 280px; padding: 8px 14px 8px 8px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.ai-att-file i { width: 36px; height: 36px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--line); color: var(--ink-2); }
.ai-att-file span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }

/* the sidebar folds and unfolds smoothly: the column narrows, the names fade, the logo shrinks away and the icons stay where they
   are (the same padding open or folded, so a folded icon sits in the middle of the 84 px column) */
@media (min-width: 861px) {
  body.side-anim { transition: grid-template-columns 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
  .side { overflow-x: hidden; }
  .side-collapsed .side { padding-left: 18px; padding-right: 18px; }
  #nav a, .nav2 a { white-space: nowrap; overflow: hidden; }
  .side-collapsed #nav a, .side-collapsed .nav2 a { justify-content: flex-start; padding: 11px 14px; font-size: 15.5px; gap: 14px; }
  .side-collapsed #nav a svg, .side-collapsed .nav2 a svg { width: 20px; height: 20px; }
  .side .nl { transition: opacity 0.2s ease 0.08s, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
  .side-collapsed .side .nl { opacity: 0; transform: translateX(-6px); transition: opacity 0.12s ease, transform 0.2s ease; }
  .brand { transition: gap 0.32s cubic-bezier(0.22, 1, 0.36, 1), padding 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
  .side-collapsed .brand { gap: 0; padding-left: 0; justify-content: center; }
  .logo { transition: flex-grow 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s ease 0.08s; overflow: hidden; }
  .side-collapsed .logo { display: block; flex-grow: 0; opacity: 0; pointer-events: none; transition: flex-grow 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.12s ease; }
  .logo img { width: 120px; min-width: 120px; } /* its open size: it is clipped, not squeezed, while the logo folds away */
}

/* the active section's highlight: one pill that slides behind the menu to the section just opened (app.js) */
@media (min-width: 861px) {
  .side { position: relative; }
  .nav-pill { position: absolute; top: 0; left: 18px; right: 18px; z-index: 0; border-radius: 12px; background: var(--blu); pointer-events: none; opacity: 0;
    transition: transform 0.42s cubic-bezier(0.34, 1.32, 0.5, 1), height 0.3s ease, opacity 0.2s ease; will-change: transform; }
  .nav-pill.still { transition: none; }
  .side.has-pill #nav a, .side.has-pill .nav2 a { position: relative; z-index: 1; }
  .side.has-pill #nav a.active, .side.has-pill .nav2 a.active, .side.has-pill #nav a.active:hover, .side.has-pill .nav2 a.active:hover { background: transparent; }
  .side.has-pill #nav a svg, .side.has-pill .nav2 a svg { transition: color 0.25s ease; }
}

/* profile: hours worked (a card above the performance summary) */
.mp-aside { display: grid; gap: 20px; align-content: start; min-width: 0; }
.mp-hours .cardhead { gap: 10px; }
.mp-bars.mp-bars7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mp-live, .mp-seen { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.mp-live { color: var(--ok); }
.mp-live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }
.mp-seen { color: var(--muted); font-weight: 500; }
.mp-hnote { margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted); }

/* «Active projects»: a gradient in the studio yellow #FFC801 (the other two cards keep their tints) */
.stat.lav { --tc: #FFC801; --tc-soft: color-mix(in srgb, #FFC801 20%, var(--panel)); --tc-ink: #FFC801; }
.stat.lav::after { opacity: 0.28; }
html:not([data-theme="dark"]) .stat.lav { --tc-soft: color-mix(in srgb, #FFC801 30%, #FAFAFA); --tc-ink: #b08700; }
html:not([data-theme="dark"]) .stat.lav::after { background: #FFC801; opacity: 0.22; }
html:not([data-theme="dark"]) .stat.lav .sic { background: #FFC801; color: #3a2c00; }

/* «Hours worked this week»: a gradient in #72C4FF */
.stat.blu { --tc: #72C4FF; --tc-soft: color-mix(in srgb, #72C4FF 20%, var(--panel)); --tc-ink: #72C4FF; }
.stat.blu::after { opacity: 0.3; }
html:not([data-theme="dark"]) .stat.blu { --tc-soft: color-mix(in srgb, #72C4FF 30%, #FAFAFA); --tc-ink: #1f7fc0; }
html:not([data-theme="dark"]) .stat.blu::after { background: #72C4FF; opacity: 0.22; }
html:not([data-theme="dark"]) .stat.blu .sic { background: #72C4FF; color: #0b3550; }

/* «Tasks done this week»: a gradient in #0EB04B */
.stat.yel { --tc: #0EB04B; --tc-soft: color-mix(in srgb, #0EB04B 20%, var(--panel)); --tc-ink: #2fd06b; }
.stat.yel::after { opacity: 0.3; }
html:not([data-theme="dark"]) .stat.yel { --tc-soft: color-mix(in srgb, #0EB04B 22%, #FAFAFA); --tc-ink: #0a8a3a; }
html:not([data-theme="dark"]) .stat.yel::after { background: #0EB04B; opacity: 0.18; }
html:not([data-theme="dark"]) .stat.yel .sic { background: #0EB04B; color: #FAFAFA; }

/* dashboard: active projects (in the place of the old «latest project» ring) */
.dash-row.one { grid-template-columns: minmax(0, 1fr); }
.acard { display: flex; flex-direction: column; }
.acard .cardhead h2 { display: flex; align-items: center; gap: 8px; }
.ac-n { font-size: 12px; font-weight: 600; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center; background: color-mix(in srgb, #FFC801 18%, transparent); color: #FFC801; }
.ac-n:empty { display: none; }
html:not([data-theme="dark"]) .ac-n { color: #8a6a00; background: color-mix(in srgb, #FFC801 30%, transparent); }
.alist { display: flex; flex-direction: column; gap: 4px; margin: 0 -10px; }
.arow { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border-radius: 14px; cursor: pointer; transition: background-color 0.15s; }
.arow:hover { background: var(--panel-2); }
.arow:focus-visible { outline: 2px solid var(--blu-ink); outline-offset: -2px; }
.ac-pic { position: relative; width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; overflow: hidden; background: var(--lav-soft); color: var(--lav-ink); }
.arow.k-copy .ac-pic { background: var(--blu-soft); color: var(--blu-ink); }
.arow.k-poster .ac-pic, .arow.k-carousel .ac-pic { background: var(--yel-soft); color: var(--yel-ink); }
.ac-pic svg { width: 21px; height: 21px; }
.ac-pic.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ac-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ac-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ac-name { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-top .av.xs { width: 22px; height: 22px; font-size: 9px; flex: none; }
.ac-meta { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.ac-meta > span + span::before { content: "·"; margin-right: 6px; color: var(--line-2); }
.ac-st { overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); font-weight: 500; }
.ac-st.busy { color: var(--yel-ink); display: inline-flex; align-items: center; gap: 5px; }
.ac-st.busy i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: acPulse 1.2s ease-in-out infinite; }
.ac-st.err { color: var(--bad); } .ac-st.ok { color: var(--ok); }
@keyframes acPulse { 50% { opacity: 0.3; } }
.ac-prog { display: flex; align-items: center; gap: 3px; margin-top: 2px; }
.ac-prog i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.ac-prog i.on { background: #FFC801; }
.ac-prog i.now { background: color-mix(in srgb, #FFC801 38%, var(--line)); }
.ac-prog em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--muted); margin-left: 6px; font-variant-numeric: tabular-nums; }
.ac-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 6px 0; }
/* the active projects need room for their names: the two cards of the row share it more evenly */
.dash-row:not(.even):not(.one) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.acard .cardhead h2 { white-space: nowrap; }

/* dashboard poll (a design preview with sample data; the logic comes later) */
.pollcard .cardhead h2 { display: flex; align-items: center; gap: 10px; }
.pl-hic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, #72C4FF 18%, transparent); color: #72C4FF; }
.pl-hic svg { width: 16px; height: 16px; }
.pl-tag { font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; padding: 2px 8px; border-radius: 999px; background: var(--panel-2); color: var(--muted); }
.pl-who { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.pl-who b { color: var(--ink-2); font-weight: 600; }
.pl-end { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.pl-end svg { width: 13px; height: 13px; }
.av.xs { width: 22px; height: 22px; font-size: 9.5px; flex: none; }
.pl-q { margin: 0 0 14px; font-size: 15.5px; font-weight: 600; line-height: 1.4; }
.pl-opts { display: grid; gap: 8px; }
.pl-opt { all: unset; box-sizing: border-box; position: relative; overflow: hidden; display: block; width: 100%; border-radius: 12px; background: var(--panel-2); cursor: pointer; }
.pl-opt:focus-visible { outline: 2px solid var(--blu-ink); outline-offset: 2px; }
.pl-fill { position: absolute; inset: 0 auto 0 0; width: var(--p); background: color-mix(in srgb, var(--ink) 7%, transparent); border-radius: inherit; }
.pl-opt.mine .pl-fill { background: color-mix(in srgb, #72C4FF 24%, transparent); }
.pl-row { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; min-height: 22px; }
.pl-radio { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; color: transparent; transition: background-color 0.15s, border-color 0.15s; }
.pl-radio svg { width: 11px; height: 11px; stroke-width: 2.6; }
.pl-opt.mine .pl-radio { background: #72C4FF; border-color: #72C4FF; color: #0b2233; }
.pl-text { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-avs { display: flex; flex: none; padding-left: 6px; }
.pl-avs .av { width: 20px; height: 20px; font-size: 8.5px; border: 2px solid var(--panel-2); margin-left: -6px; }
.pl-row b { flex: none; min-width: 36px; text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.pl-opt.mine .pl-row b { color: var(--ink); }
.pl-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.pl-link { all: unset; cursor: pointer; font-weight: 600; color: var(--ink-2); }
.pl-link:hover { color: var(--ink); }

/* dashboard «New tasks»: work handed to me, newest first */
.ntcard .cardhead h2 { display: flex; align-items: center; gap: 10px; }
.nt-hic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, #0EB04B 18%, transparent); color: #2fd06b; }
.nt-hic svg { width: 16px; height: 16px; }
html:not([data-theme="dark"]) .nt-hic { color: #0a8a3a; }
.nt-n { font-size: 12px; font-weight: 600; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center; background: #0EB04B; color: #FAFAFA; }
.nt-n:empty { display: none; }
.ntlist { display: flex; flex-direction: column; gap: 2px; margin: 0 -10px; }
.ntrow { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; color: inherit; text-decoration: none; transition: background-color 0.15s; }
.ntrow:hover { background: var(--panel-2); }
.ntrow .av.nt-av { width: 38px; height: 38px; font-size: 13px; flex: none; }
.nt-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; background: var(--panel-2); color: var(--ink-2); }
.nt-ic.proj { background: var(--lav-soft); color: var(--lav-ink); }
.nt-ic svg { width: 18px; height: 18px; }
.ntrow.is-new::before { content: ""; position: absolute; left: 2px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: #0EB04B; }
.nt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nt-title { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-sub b { color: var(--ink-2); font-weight: 600; }
.nt-end { display: flex; align-items: center; gap: 8px; flex: none; }
.nt-end time { font-size: 12px; color: var(--muted); min-width: 56px; text-align: right; font-variant-numeric: tabular-nums; }
.nt-due, .nt-st { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--panel-2); color: var(--ink-2); white-space: nowrap; }
.nt-due.soon { background: color-mix(in srgb, #FFC801 18%, transparent); color: #e0b000; }
.nt-due.late { background: var(--bad-soft); color: var(--bad); }
.nt-st { background: color-mix(in srgb, #72C4FF 18%, transparent); color: #72C4FF; }
html:not([data-theme="dark"]) .nt-due.soon { color: #8a6a00; }
html:not([data-theme="dark"]) .nt-st { color: #1f7fc0; }
.nt-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 18px 0 8px; font-size: 13px; color: var(--muted); }
.nt-empty b { color: var(--ink); font-size: 14.5px; margin-top: 6px; }
.nt-hic.big { width: 44px; height: 44px; border-radius: 13px; }
.nt-hic.big svg { width: 22px; height: 22px; }
@media (max-width: 600px) { .nt-end time { display: none; } }

/* «New tasks» as a stack of cards: the newest in front, the next two peeking out below it */
.nt-stack { position: relative; padding-bottom: calc(var(--behind) * 8px); }
.nt-peek { position: absolute; left: 14px; right: 14px; bottom: 0; height: 30px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); cursor: pointer; transition: transform 0.2s; }
.nt-peek.p1 { bottom: calc((var(--behind) - 1) * 8px); left: 12px; right: 12px; opacity: 0.75; }
.nt-peek.p2 { bottom: 0; left: 26px; right: 26px; opacity: 0.45; }
.nt-stack:hover .nt-peek.p1 { transform: translateY(2px); }
.nt-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; background: var(--panel-2); border: 1px solid var(--line-2); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.5); }
.nt-top .av.nt-av, .nt-top .nt-ic { width: 44px; height: 44px; border-radius: 13px; }
.nt-top .av.nt-av { border-radius: 50%; font-size: 15px; }
.nt-top .nt-ic { background: var(--panel); }
.nt-top .nt-ic.proj { background: var(--lav-soft); }
.nt-top .nt-ic svg { width: 20px; height: 20px; }
.nt-titlerow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nt-top .nt-title { font-size: 16px; }
.nt-new { flex: none; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: #0EB04B; color: #FAFAFA; }
.nt-top .nt-sub { font-size: 13px; }
.nt-chips { display: flex; gap: 6px; margin-top: 6px; }
.nt-top .nt-due, .nt-top .nt-st { background: var(--panel); }
.nt-top .nt-due.soon { background: color-mix(in srgb, #FFC801 18%, transparent); }
.nt-top .nt-due.late { background: var(--bad-soft); }
.nt-top .nt-st { background: color-mix(in srgb, #72C4FF 18%, transparent); }
.nt-acts { display: flex; align-items: center; gap: 8px; flex: none; }
.nt-acts .small { height: 34px; padding: 0 16px; }
.nt-acts a.btn { display: inline-flex; align-items: center; text-decoration: none; }
.nt-top.enter { animation: ntIn 0.38s cubic-bezier(0.22, 1, 0.36, 1); }
.nt-top.enter.back { animation-name: ntBack; }
@keyframes ntIn { from { transform: translateY(14px) scale(0.96); opacity: 0.4; } }
@keyframes ntBack { from { transform: translateY(-10px) scale(1.02); opacity: 0.4; } }
.nt-pager { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 12px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.nt-pager span { margin-right: 4px; }
@media (max-width: 600px) { .nt-top { flex-wrap: wrap; } .nt-acts { width: 100%; justify-content: flex-end; } }
@media (prefers-reduced-motion: reduce) { .nt-top.enter { animation: none; } }
/* the stack, more visibly layered; the pager sits in the card head */
.nt-stack { padding-bottom: calc(var(--behind) * 11px); }
.nt-peek { height: 40px; background: color-mix(in srgb, var(--ink) 5%, var(--panel-2)); border-color: var(--line-2); }
.nt-peek.p1 { bottom: calc((var(--behind) - 1) * 11px); left: 14px; right: 14px; opacity: 0.85; }
.nt-peek.p2 { left: 30px; right: 30px; opacity: 0.55; }
.ntcard .cardhead { gap: 12px; }
.ntcard .cardhead h2 { margin-right: auto; }
.nt-pager { margin-top: 0; }
.nt-pager:empty { display: none; }

/* «New tasks» as «Next up»: the most pressing task large on the left, the next three small on the right */
.nu { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; }
.nu.solo { grid-template-columns: minmax(0, 1fr); }
.nu-hero { --tone: #0EB04B; position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(150deg, color-mix(in srgb, var(--tone) 14%, var(--panel-2)) 0%, var(--panel-2) 70%); border: 1px solid color-mix(in srgb, var(--tone) 22%, var(--line)); }
.nu-hero.t-soon { --tone: #FFC801; } .nu-hero.t-doing { --tone: #72C4FF; } .nu-hero.t-late { --tone: var(--bad); }
.nu-hero.enter { animation: ntIn 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.nu-lbl { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--tone); }
.nu-lbl i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }
html:not([data-theme="dark"]) .nu-hero.t-soon .nu-lbl { color: #8a6a00; }
html:not([data-theme="dark"]) .nu-hero.t-new .nu-lbl { color: #0a8a3a; }
html:not([data-theme="dark"]) .nu-hero.t-doing .nu-lbl { color: #1f7fc0; }
.nu-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nu-title b { font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.nu-who { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); min-width: 0; }
.nu-who > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nu-who b { color: var(--ink-2); font-weight: 600; }
.nu-who .av.nu-av { width: 24px; height: 24px; font-size: 10px; flex: none; }
.nu-who .nt-ic.nu-av { width: 24px; height: 24px; border-radius: 7px; background: var(--panel); }
.nu-who .nt-ic.nu-av svg { width: 13px; height: 13px; }
.nu-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nu-proj { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; background: var(--panel); color: var(--ink-2); }
.nu-proj span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nu-proj svg { width: 13px; height: 13px; flex: none; }
.nu-meta .nt-due { background: var(--panel); }
.nu-acts { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; }
.nu-acts .small { height: 34px; padding: 0 18px; }
.nu-acts a.btn { display: inline-flex; align-items: center; text-decoration: none; }
.nu-rest { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.nu-item { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 13px; background: var(--panel-2); cursor: pointer; transition: background-color 0.15s, transform 0.15s; min-width: 0; }
.nu-item:hover { background: color-mix(in srgb, var(--ink) 5%, var(--panel-2)); }
.nu-item:focus-visible { outline: 2px solid var(--blu-ink); outline-offset: 2px; }
.nu-item .av.nu-sav { width: 30px; height: 30px; font-size: 11px; flex: none; }
.nu-item .nt-ic.nu-sav { width: 30px; height: 30px; border-radius: 9px; background: var(--panel); }
.nu-item .nt-ic.nu-sav.proj { background: var(--lav-soft); }
.nu-item .nt-ic.nu-sav svg { width: 15px; height: 15px; }
.nu-it { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.nu-it b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nu-it span { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nu-it span b { font-size: inherit; color: var(--ink-2); }
.nu-when { flex: none; font-size: 11px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.nu-when.soon { color: #e0b000; } .nu-when.late { color: var(--bad); }
.nu-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.nu-dot.doing { background: #72C4FF; }
.nu-more { font-size: 12.5px; font-weight: 600; color: var(--muted); text-decoration: none; padding: 2px 4px; }
.nu-more:hover { color: var(--ink); }
@media (max-width: 700px) { .nu { grid-template-columns: minmax(0, 1fr); } }

/* «Next up»: a note on the right of the big card */
.nu { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.nu-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; }
.nu-left { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.nu-note { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--panel) 70%, transparent); border: 1px solid var(--line); }
.nu-nhead { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.nu-nhead > svg { width: 13px; height: 13px; }
.nu-nedit { all: unset; margin-left: auto; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; cursor: pointer; color: var(--muted); }
.nu-nedit:hover { background: var(--panel-2); color: var(--ink); }
.nu-nedit svg { width: 13px; height: 13px; }
.nu-ntext { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; }
.nu-nempty { all: unset; cursor: pointer; font-size: 12.5px; line-height: 1.5; color: var(--muted); padding: 8px 10px; border-radius: 9px; border: 1px dashed var(--line-2); }
.nu-nempty:hover { color: var(--ink-2); border-color: var(--muted); }
.nu-nta { width: 100%; box-sizing: border-box; resize: vertical; min-height: 84px; font: inherit; font-size: 13px; line-height: 1.45; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--ink); }
.nu-nta:focus { outline: none; border-color: var(--muted); }
.nu-nbtns { display: flex; gap: 6px; }
.nu-nbtns .small { height: 30px; padding: 0 12px; }
/* side by side while the card is wide enough for both (about 400px), stacked below that */
.nu-hero { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* the bell's list: two lines a row, the time on the right, unread marked by a dot and bolder text (no tinted block) */
#ntfList { display: flex; flex-direction: column; gap: 2px; }
#ntfList li, #ntfList li.new { align-items: center; gap: 12px; padding: 10px 10px; background: transparent; color: var(--ink-2); }
#ntfList li:hover, #ntfList li.new:hover { background: var(--panel-2); }
#ntfList li .av.sm { width: 32px; height: 32px; margin: 0; }
.nr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nr-title { font-size: 13.5px; font-weight: 500; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nr-title.nr-plain { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#ntfList li.new .nr-title { font-weight: 700; color: var(--ink); }
.nr-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nr-kind { font-weight: 600; }
.nr-kind.blu { color: var(--blu-ink); } .nr-kind.lav { color: var(--lav-ink); } .nr-kind.ok { color: var(--ok); } .nr-kind.bad { color: var(--bad); }
.nr-note { font-size: 12.5px; color: var(--muted); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nr-end { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; align-self: flex-start; padding-top: 2px; }
#ntfList .nr-end time { display: block; margin: 0; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.nr-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blu-ink); }

/* the task form's dates: Start and Deadline tabs on top, the days between them shaded */
.dp-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 10px 0; }
.dp-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink-2); text-align: left; }
.dp-tab span { font-size: 11px; font-weight: 600; color: var(--muted); }
.dp-tab b { font-size: 13px; font-weight: 600; }
.dp-tab:hover { filter: none; color: var(--ink); }
.dp-tab.on { border-color: var(--ink); color: var(--ink); }
.dp-grid button.inrange { background: color-mix(in srgb, var(--ink) 9%, transparent); border-radius: 0; }
.dp-grid button.rs { border-radius: 9px 0 0 9px; }
.dp-grid button.re { border-radius: 0 9px 9px 0; }

/* a time for the start or the deadline, under the month */
.dp-time { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px 10px 10px; border-top: 1px solid var(--line); }
.dp-time > span { font-size: 11.5px; font-weight: 600; color: var(--muted); margin-right: 2px; }
.dp-time input[type="time"] { height: 28px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); font: inherit; font-size: 12.5px; color-scheme: dark; }
html:not([data-theme="dark"]) .dp-time input[type="time"] { color-scheme: light; }
.datemenu .pk-foot { display: flex; align-items: center; }
.datemenu .pk-foot .grow { flex: 1; }
.dp-done { font-weight: 600; color: var(--ink); }

/* the date menu's time: a header with the chosen time, two wheels (hour : minute) and quick picks — no browser time field */
.dp-time { display: block; padding: 10px 10px 8px; border-top: 1px solid var(--line); }
.dp-thead { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dp-thead > span { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.dp-thead b { margin-left: auto; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dp-thead b.muted { color: var(--muted); font-weight: 500; font-size: 13px; }
.dp-tclear { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: var(--panel-2); color: var(--muted); font-size: 14px; line-height: 1; display: grid; place-items: center; }
.dp-tclear:hover { color: var(--ink); filter: none; }
.dp-tbody { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; }
.dp-wheels { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 102px; border-radius: 12px; background: var(--panel-2); overflow: hidden; }
.dp-wheels::before { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 30px; margin-top: -15px; border-radius: 9px; background: color-mix(in srgb, var(--ink) 8%, transparent); pointer-events: none; }
.dp-wheel { position: relative; height: 100%; overflow-y: auto; scrollbar-width: none; padding: 36px 0; box-sizing: border-box; display: flex; flex-direction: column;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 34%, #000 66%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 34%, #000 66%, transparent 100%); scroll-snap-type: y mandatory; }
.dp-wheel::-webkit-scrollbar { display: none; }
.dp-wheel button { flex: none; height: 30px; padding: 0; border: 0; background: none; color: var(--ink-2); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; scroll-snap-align: center; }
.dp-wheel button:hover { color: var(--ink); filter: none; }
.dp-wheel button.sel { color: var(--ink); font-weight: 700; font-size: 17px; }
.dp-wheels.empty .dp-wheel button { color: var(--muted); }
.dp-colon { font-style: normal; font-weight: 700; color: var(--muted); position: relative; }
.dp-tquick { display: flex; flex-direction: column; gap: 6px; }
.dp-tquick button { flex: 1; min-width: 62px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel); color: var(--ink-2); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dp-tquick button:hover { color: var(--ink); filter: none; }
.dp-tquick button.on { border-color: var(--ink); color: var(--ink); }

/* the new-task form in two rows: what to do and «Add» on top; type, project, people and dates under it */
.addtask { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.addtask .tinput { grid-column: 1 / 4; grid-row: 1; }
.addtask #tGo { grid-column: 4; grid-row: 1; height: 46px; }
.addtask #tTypeBtn, .addtask #tProjBtn, .addtask #tPeople, .addtask .datepick { grid-row: 2; min-width: 0; }
@media (max-width: 760px) {
  .addtask { grid-template-columns: 1fr 1fr; }
  .addtask .tinput { grid-column: 1 / -1; }
  .addtask #tGo { grid-column: 1 / -1; grid-row: 4; }
  .addtask #tTypeBtn, .addtask #tProjBtn { grid-row: 2; }
  .addtask #tPeople, .addtask .datepick { grid-row: 3; }
}
/* task types: an icon colour each, on the picker and on the board's cards */
.ty-reels { --ty: #a99bff; } .ty-poster { --ty: #f5a66b; } .ty-carousel { --ty: #ffc801; } .ty-copy { --ty: #72c4ff; } .ty-shoot { --ty: #ff8fa3; }
.ty-edit { --ty: #b58cff; } .ty-social { --ty: #2fd06b; } .ty-meeting { --ty: #9aa0b4; } .ty-idea { --ty: #ffd166; } .ty-other { --ty: #9aa0b4; }
.pk-ic[class*="ty-"] { color: var(--ty); background: color-mix(in srgb, var(--ty) 16%, transparent); }
.ttype { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 2px 8px 2px 6px; border-radius: 999px; color: var(--ty); background: color-mix(in srgb, var(--ty) 14%, transparent); }
.ttype svg { width: 12px; height: 12px; }
html:not([data-theme="dark"]) .ttype, html:not([data-theme="dark"]) .pk-ic[class*="ty-"] { color: color-mix(in srgb, var(--ty) 70%, #000); }

/* a typed task's way into its work: «Start Copywriting →» / «Open Reels →» */
.workbtn { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ty) 40%, transparent);
  background: color-mix(in srgb, var(--ty) 14%, transparent); color: var(--ty); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.workbtn:hover { background: color-mix(in srgb, var(--ty) 24%, transparent); filter: none; }
.workbtn svg { width: 14px; height: 14px; }
.workbtn .wb-go { width: 12px; height: 12px; transition: transform 0.15s; }
.workbtn:hover .wb-go { transform: translateX(2px); }
html:not([data-theme="dark"]) .workbtn { color: color-mix(in srgb, var(--ty) 70%, #000); }
.tcard-work { margin: 2px 0 6px; }
.workbtn.nu-work { height: 34px; padding: 0 16px 0 12px; font-size: 13px; }

/* the new task's brief: a third row across the form */
.addtask .tbrief { grid-column: 1 / -1; grid-row: 3; display: flex; align-items: flex-start; gap: 10px; padding: 0 14px; min-height: 46px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); cursor: text; }
.addtask .tbrief > svg { width: 16px; height: 16px; flex: none; margin-top: 15px; color: var(--muted); }
.addtask .tbrief textarea { flex: 1; min-height: 44px; margin: 0; padding: 12px 0; border: 0; background: none; resize: none; font: inherit; font-size: 14px; line-height: 1.45; color: var(--ink); outline: none; box-shadow: none; }
.addtask .tbrief textarea::placeholder { color: var(--muted); }
.addtask .tbrief:focus-within { border-color: var(--muted); }
.addtask .tbrief:has(textarea:disabled) { opacity: 0.4; cursor: not-allowed; }
@media (max-width: 760px) { .addtask .tbrief { grid-row: 4; } .addtask #tGo { grid-row: 5; } }
.tbrief-mark { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 2px 8px 2px 6px; border-radius: 999px; background: var(--panel-2); color: var(--ink-2); cursor: help; }
.tbrief-mark svg { width: 12px; height: 12px; }

/* the bell's panel: sound and desktop-alert switches under its head */
.ntf-prefs { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 18px 6px; }
.ntf-prefs:empty { display: none; }
.np-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 9px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--panel); color: var(--muted); font-size: 12px; font-weight: 600; }
.np-btn svg { width: 13px; height: 13px; }
.np-btn:hover { color: var(--ink); filter: none; }
.np-btn.on { color: var(--ink); border-color: color-mix(in srgb, #0EB04B 45%, var(--line-2)); background: color-mix(in srgb, #0EB04B 12%, var(--panel)); }
.np-btn.on svg { color: #2fd06b; }
.np-btn[data-np="ask"] { color: var(--ink); border-style: dashed; }
.np-note { font-size: 11.5px; color: var(--muted); align-self: center; }

/* polls, live: head counter and pager, ended state, the empty card, the new-poll window */
.pollcard .cardhead { gap: 8px; }
.pollcard .cardhead h2 { margin-right: auto; }
.pl-n { font-size: 12px; font-weight: 600; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center; background: color-mix(in srgb, #72C4FF 18%, transparent); color: #72C4FF; }
.pl-n:empty { display: none; }
.pl-pager { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pl-pager span { margin-right: 2px; }
.pl-end.over { color: var(--muted); }
.pl-opts.ended .pl-opt { cursor: default; }
.pl-opt:disabled { opacity: 1; }
.pl-radio.sq { border-radius: 5px; }
.pl-avs .av.more { background: var(--panel); color: var(--ink-2); font-size: 8.5px; }
.pl-acts { display: flex; align-items: center; gap: 12px; }
.pl-hint { font-size: 11.5px; color: var(--muted); }
.pl-link.danger:hover { color: var(--bad); }
.pollcard.flash { animation: plFlash 1.6s ease; }
@keyframes plFlash { 0%, 60% { box-shadow: 0 0 0 2px #72C4FF; } 100% { box-shadow: 0 0 0 0 transparent; } }
.pl-empty { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.pl-empty b { color: var(--ink); font-size: 15px; }
.pl-sugs { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; }
.pl-sug { padding: 5px 11px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel); color: var(--ink-2); font-size: 12.5px; font-weight: 500; }
.pl-sug:hover { color: var(--ink); border-color: #72C4FF; filter: none; }
.plform { width: min(520px, 100%); }
.plform .tplabel { display: block; margin: 4px 0 6px; }
.pl-fopts { display: grid; gap: 6px; }
.pl-fopt { display: flex; align-items: center; gap: 8px; }
.pl-fopt > span { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); color: var(--muted); font-size: 11px; font-weight: 700; }
.pl-fopt input { flex: 1; margin: 0; }
.pl-rm { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 18px; }
.pl-rm:hover { color: var(--bad); background: var(--bad-soft); filter: none; }
.pl-addopt { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 12px; padding: 6px 12px; border: 1px dashed var(--line-2); border-radius: 10px; background: none; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.pl-addopt svg { width: 14px; height: 14px; }
.pl-addopt:hover { color: var(--ink); filter: none; }
.pl-lens { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pl-lens .tm-chip.on { border-color: var(--ink); color: var(--ink); }
.pl-multi { margin-bottom: 4px; }
/* the new-poll window: the chosen length stands out; the «more than one answer» switch sits on one line */
.pl-lens .tm-chip.on, .pl-lens .tm-chip.on:hover { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.plform .pl-multi { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; cursor: pointer; }
.plform .pl-multi input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: #72C4FF; }
.plform .pl-multi span { display: flex; flex-direction: column; gap: 1px; }
.plform .pl-multi b { font-size: 13.5px; }
.plform .pl-multi small { font-size: 12px; color: var(--muted); font-weight: 400; }
.plform { max-height: calc(100vh - 40px); overflow-y: auto; }
.modal.plform label.pl-multi { display: flex; align-items: center; gap: 10px; }
.modal.plform label.pl-multi span { display: flex; flex-direction: column; }

/* polls: anyone adds an answer of their own */
.pl-own { display: flex; align-items: center; gap: 6px; }
.pl-ownbtn { display: inline-flex; align-items: center; gap: 6px; width: 100%; height: 40px; padding: 0 12px; border: 1px dashed var(--line-2); border-radius: 12px; background: none; color: var(--muted); font-size: 13px; font-weight: 600; }
.pl-ownbtn svg { width: 14px; height: 14px; }
.pl-ownbtn:hover { color: var(--ink); border-color: var(--muted); filter: none; }
.pl-owninput { flex: 1; height: 40px; margin: 0; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--ink); font: inherit; font-size: 14px; }
.pl-owninput:focus { outline: none; border-color: #72C4FF; }
.pl-ownok { height: 40px; padding: 0 14px; border-radius: 12px; }
.pl-fnote { margin: 0 0 6px; font-size: 12.5px; color: var(--muted); }

/* poll motion: the card eases in (answers one after another), bars slide, a ticked box pops, voters fade in */
.pl-in { animation: plIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
.pl-in.back { animation-name: plInBack; }
@keyframes plIn { from { opacity: 0; transform: translateX(14px); } }
@keyframes plInBack { from { opacity: 0; transform: translateX(-14px); } }
.pl-in .pl-opt, .pl-in .pl-own { animation: plOpt 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(0.08s + var(--i, 0) * 0.05s); }
@keyframes plOpt { from { opacity: 0; transform: translateY(8px); } }
.pl-empty.pl-in { animation: plOpt 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
.pl-fill { transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.25s ease; }
.pl-opt { transition: background-color 0.2s ease, transform 0.12s ease; }
.pl-opt:not(:disabled):active { transform: scale(0.985); }
.pl-radio { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.pl-opt.pop .pl-radio { animation: plPop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes plPop { 0% { transform: scale(0.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.pl-row b { transition: color 0.2s ease; }
.pl-avs.swap .av { animation: plAv 0.35s ease both; }
@keyframes plAv { from { opacity: 0; transform: scale(0.6); } }
@media (prefers-reduced-motion: reduce) { .pl-in, .pl-in .pl-opt, .pl-in .pl-own, .pl-opt.pop .pl-radio, .pl-avs.swap .av { animation: none; } .pl-fill { transition: none; } }
/* the asker's (or an admin's) delete: a small bin at the end of the asker's line */
.pl-del { width: 28px; height: 28px; padding: 0; margin-left: 4px; border: 0; border-radius: 8px; background: none; color: var(--muted); display: grid; place-items: center; flex: none; }
.pl-del svg { width: 15px; height: 15px; }
.pl-del:hover { color: var(--bad); background: var(--bad-soft); filter: none; }

/* the poll card while loading: grey lines the shape of a poll, softly pulsing */
.pl-skel { display: grid; gap: 10px; }
.pl-skel i { display: block; height: 12px; border-radius: 6px; background: var(--panel-2); animation: plSkel 1.2s ease-in-out infinite; }
.pl-skel .s1 { width: 55%; height: 12px; }
.pl-skel .s2 { width: 80%; height: 16px; margin: 4px 0 6px; }
.pl-skel .o { height: 42px; border-radius: 12px; }
.pl-skel .s3 { width: 40%; margin-top: 4px; }
@keyframes plSkel { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .pl-skel i { animation: none; } }

/* pop-up notifications, redrawn: a soft glow of the kind's colour, the person with a badge, quiet type, a light action */
.ntf-card { --tone: #72C4FF; gap: 13px; width: 368px; padding: 14px 14px 14px 14px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--tone) 18%, var(--line-2));
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--tone) 13%, transparent) 0%, transparent 55%), color-mix(in srgb, var(--panel) 94%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 18px 44px -12px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.18);
  animation: ncIn2 0.42s cubic-bezier(0.22, 1, 0.36, 1); }
.ntf-card.out { animation: ncOut2 0.24s ease-in forwards; }
@keyframes ncIn2 { from { opacity: 0; transform: translateX(24px) scale(0.97); } }
@keyframes ncOut2 { to { opacity: 0; transform: translateX(24px) scale(0.97); } }
.nc-pic { position: relative; flex: none; width: 42px; height: 42px; }
.nc-pic > .av { width: 42px; height: 42px; font-size: 15px; }
.nc-badge { position: absolute; right: -4px; bottom: -4px; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; background: var(--tone); color: #12131a; border: 2.5px solid var(--panel); }
.nc-badge svg { width: 11px; height: 11px; stroke-width: 2.2; }
.ntf-card .nc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 1px; }
.nc-top { display: flex; align-items: center; gap: 8px; }
.nc-kind { font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--tone); }
.nc-top time { font-size: 11.5px; color: var(--muted); }
.nc-top time::before { content: "·"; margin-right: 6px; }
.ntf-card .nc-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--ink); text-transform: none; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ntf-card .nc-title.nc-plain { font-weight: 500; font-size: 14px; -webkit-line-clamp: 3; }
.nc-who { font-size: 13px; color: var(--muted); }
.nc-who > span[translate] { color: var(--ink-2); font-weight: 600; }
.nc-note { display: block; margin-top: 4px; padding: 7px 10px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 5%, transparent); font-size: 13px; line-height: 1.45; color: var(--ink-2); quotes: none; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.ntf-card .nc-open { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; height: 30px; padding: 0 13px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--tone) 40%, transparent);
  background: color-mix(in srgb, var(--tone) 14%, transparent); color: var(--tone); font-size: 12.5px; font-weight: 700; }
.ntf-card .nc-open svg { width: 13px; height: 13px; transition: transform 0.15s; }
.ntf-card .nc-open:hover { background: color-mix(in srgb, var(--tone) 24%, transparent); filter: none; }
.ntf-card .nc-open:hover svg { transform: translateX(2px); }
.ntf-card .nc-x { width: 26px; height: 26px; margin: -3px -3px 0 0; display: grid; place-items: center; opacity: 0; transition: opacity 0.15s, background-color 0.15s; }
.ntf-card .nc-x svg { width: 13px; height: 13px; }
.ntf-card:hover .nc-x, .ntf-card .nc-x:focus-visible { opacity: 1; }
@media (hover: none) { .ntf-card .nc-x { opacity: 1; } }
html:not([data-theme="dark"]) .ntf-card { box-shadow: 0 18px 40px -14px rgba(20, 20, 40, 0.28), 0 2px 6px rgba(20, 20, 40, 0.08); }
html:not([data-theme="dark"]) .nc-kind, html:not([data-theme="dark"]) .ntf-card .nc-open { color: color-mix(in srgb, var(--tone) 65%, #000); }
@media (prefers-reduced-motion: reduce) { .ntf-card, .ntf-card.out { animation: none; } }

/* a Production task waiting for its text's approval */
.chip.wait { display: inline-flex; align-items: center; gap: 4px; background: color-mix(in srgb, #FFC801 14%, transparent); color: #e0b000; }
.chip.wait svg { width: 12px; height: 12px; }
html:not([data-theme="dark"]) .chip.wait { color: #8a6a00; }
.tcard input[type="checkbox"]:disabled, .stpill:disabled { opacity: 0.45; cursor: not-allowed; }
.nu-wait { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 999px; background: color-mix(in srgb, #FFC801 14%, transparent); color: #e0b000; font-size: 13px; font-weight: 600; }
.nu-wait svg { width: 14px; height: 14px; }
html:not([data-theme="dark"]) .nu-wait { color: #8a6a00; }
.nu-when.wait { color: #e0b000; }

/* the task card's tick box: a soft round-cornered square that fills green with a white tick, and pops when ticked */
.tcard-top input[type=checkbox], .sub input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin: 1px 0 0; flex: none; cursor: pointer;
  border-radius: 7px; border: 1.75px solid color-mix(in srgb, var(--ink) 30%, transparent); background: color-mix(in srgb, var(--ink) 4%, transparent) center / 12px 12px no-repeat;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease; }
.sub input[type="checkbox"] { width: 17px; height: 17px; border-radius: 6px; background-size: 10px 10px; }
.tcard-top input[type=checkbox]:hover:not(:disabled), .sub input[type="checkbox"]:hover:not(:disabled) { border-color: #0EB04B; box-shadow: 0 0 0 3px color-mix(in srgb, #0EB04B 16%, transparent); }
.tcard-top input[type=checkbox]:active:not(:disabled), .sub input[type="checkbox"]:active:not(:disabled) { transform: scale(0.9); }
.tcard-top input[type=checkbox]:checked, .sub input[type="checkbox"]:checked {
  border-color: #0EB04B; background-color: #0EB04B;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.3 2.2 4.7-5' fill='none' stroke='%23FAFAFA' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  animation: tickPop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); }
.tcard-top input[type=checkbox]:focus-visible, .sub input[type="checkbox"]:focus-visible { outline: 2px solid #72C4FF; outline-offset: 2px; }
@keyframes tickPop { 0% { transform: scale(0.75); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .tcard-top input[type=checkbox]:checked, .sub input[type="checkbox"]:checked { animation: none; } }
/* team project cards keep their own height instead of stretching to the tallest one beside them */
.crews { align-items: start; }
/* team project cards as a masonry: up to 4 columns, the short cards stacking under one another (no gaps under them) */
.crews { display: block; columns: 4 260px; column-gap: 20px; }
.crews > .crew { break-inside: avoid; margin: 0 0 20px; width: 100%; display: inline-block; vertical-align: top; }
/* masonry columns for the team project cards (laid out by home.js) */
.crews { display: flex; gap: 20px; align-items: flex-start; columns: auto; }
.crews > .mz-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.crews .crew { margin: 0; width: auto; display: block; break-inside: auto; }
.crews > .empty-card { flex: 1; }
/* in the narrow masonry columns: the project's name gets its own line, people and buttons go under it */
.crews .crew-head { flex-wrap: wrap; row-gap: 8px; }
.crews .crew-head > b { flex: 1 1 100%; min-width: 0; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
.crews .crew-head > b .muted { white-space: nowrap; }
.crews .crew-head .avs { margin-right: auto; }

/* ---------- a task's window */
.tdwin { width: min(620px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; }
.td-head { display: flex; align-items: center; gap: 8px; }
.td-st { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.td-stseg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--panel-2); }
.td-stseg button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.td-stseg button i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.6; }
.td-stseg button:hover:not(:disabled) { color: var(--ink); filter: none; }
.td-stseg button.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); }
.td-stseg button.on.st-todo i { background: var(--lav-ink); opacity: 1; } .td-stseg button.on.st-doing i { background: #f2c94c; opacity: 1; } .td-stseg button.on.st-done i { background: var(--ok); opacity: 1; }
.td-stseg button:disabled { opacity: 0.45; cursor: not-allowed; }
.td-x { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--muted); display: grid; place-items: center; }
.td-x:hover { background: var(--panel-2); color: var(--ink); filter: none; }
.td-x svg { width: 16px; height: 16px; }
.td-title { margin: 0; padding: 4px 0; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: none; font-size: 20px; font-weight: 700; color: var(--ink); }
.td-title:focus { outline: none; border-bottom-color: var(--line-2); }
.td-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.td-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.td-f > span, .td-brief > span { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.td-f .pick { width: 100%; }
.td-wide { grid-column: 1 / -1; }
.td-proj:empty { display: none; }
.td-plink { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 7px 12px; border-radius: 10px; background: var(--panel-2); color: var(--ink); text-decoration: none; font-size: 13.5px; font-weight: 600; }
.td-plink svg { width: 15px; height: 15px; } .td-plink .go { width: 12px; height: 12px; color: var(--muted); }
.td-brief { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.td-brief textarea { margin: 0; resize: vertical; min-height: 70px; font: inherit; font-size: 14px; line-height: 1.45; }
.td-save { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, #FFC801 10%, var(--panel-2)); }
.td-save[hidden] { display: none; }
.td-sec { border-top: 1px solid var(--line); padding-top: 12px; }
.td-sec > b, .td-hist summary b { font-size: 13.5px; }
.td-comments { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; max-height: 260px; overflow-y: auto; }
.td-c { display: flex; gap: 9px; align-items: flex-start; }
.td-c p { margin: 2px 0 0; font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.td-cmeta { font-size: 12px; color: var(--muted); } .td-cmeta b { color: var(--ink-2); }
.td-none { font-size: 13px; color: var(--muted); margin: 6px 0; list-style: none; }
.td-reply { display: flex; gap: 8px; }
.td-reply input { flex: 1; margin: 0; border-radius: 999px; }
.td-reply button { width: 40px; height: 40px; padding: 0; border-radius: 50%; display: grid; place-items: center; }
.td-reply button svg { width: 16px; height: 16px; }
.td-hist summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.td-hist summary::-webkit-details-marker { display: none; }
.td-n { font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--panel-2); color: var(--muted); }
.td-hist ol { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.td-hist li { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-2); }
.tcard-title[data-taskopen], .nu-title b[data-taskopen] { cursor: pointer; }
.tcard-title[data-taskopen]:hover, .nu-title b[data-taskopen]:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
@media (max-width: 560px) { .td-fields { grid-template-columns: 1fr; } }

/* ---------- the admins' weekly report (Teams page) */
.wkr { margin-bottom: 20px; }
.wkr-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.wkr-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 17px; }
.wkr-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, #72C4FF 18%, transparent); color: #72C4FF; }
.wkr-ic svg { width: 16px; height: 16px; }
.wkr-range { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wkr-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--panel-2); }
.wkr-seg button { height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.wkr-seg button.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); }
.wkr-seg button:hover { filter: none; color: var(--ink); }
.wkr-tw { overflow-x: auto; }
.wkr-t { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.wkr-t th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--line); }
.wkr-t td { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.wkr-t tbody tr { cursor: pointer; }
.wkr-t tbody tr:hover td { background: var(--panel-2); }
.wkr-t tfoot td { font-weight: 700; border-bottom: 0; }
.wkr-who { display: flex; align-items: center; gap: 9px; min-width: 150px; }
.wkr-who span { display: flex; flex-direction: column; }
.wkr-who small { font-size: 11.5px; color: var(--muted); }
.wkr-hours { min-width: 190px; }
td.wkr-hours { display: flex; align-items: center; gap: 10px; }
.wkr-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--panel-2); overflow: hidden; min-width: 80px; }
.wkr-bar i { display: block; height: 100%; border-radius: 3px; background: #72C4FF; }
td.wkr-hours b { min-width: 58px; text-align: right; }
.wkr-late { color: var(--bad); font-weight: 700; }
.wkr-note { margin: 10px 0 0; font-size: 12px; color: var(--muted); }

/* ---------- calendar: tasks that run over several days, as bars under the week */
.wk-spans { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px 2px; margin: 6px 0 2px; }
.wk-spans[hidden] { display: none; }
.wk-span { --ty: #a99bff; display: flex; align-items: center; gap: 6px; min-width: 0; height: 24px; padding: 0 8px; border: 0; border-radius: 7px; background: color-mix(in srgb, var(--ty) 22%, transparent); color: var(--ink); font-size: 11.5px; font-weight: 600; text-align: left; }
.wk-span span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.wk-span em { font-style: normal; font-size: 10.5px; color: var(--ink-2); flex: none; }
.wk-span.cut-l { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.wk-span.cut-r { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.wk-span.late { --ty: #ff8f8f; }
.wk-span:hover { background: color-mix(in srgb, var(--ty) 34%, transparent); filter: none; }
.wk-more { font-size: 11px; color: var(--muted); text-align: center; }
/* the hours cell lays out inside a span, so the table's rows keep their lines */
td.wkr-hours { display: table-cell; }
.wkr-hc { display: flex; align-items: center; gap: 10px; }
.wkr-hc b { min-width: 58px; text-align: right; }
.wkr-bar.wkr-none { visibility: hidden; }

/* task cards with room to breathe: everything under the title lines up with it (past the tick box), rows apart */
.colbody { gap: 12px; }
.tcard { padding: 15px 16px 14px; }
.tcard-top { gap: 12px; align-items: flex-start; }
.tcard-title { line-height: 1.4; padding-top: 1px; }
.tcard-work { margin: 12px 0 0 32px; }
.tcard-meta { margin-top: 12px; padding-left: 32px; gap: 8px 10px; row-gap: 10px; }
.tcard-meta .stpill { margin-left: auto; }
.tcard-meta:empty { display: none; }

/* weekly report as a dropdown: the head (with the week's totals) opens and closes it smoothly */
body.not-admin #wkReport { display: none; }
.wkr { padding: 0; overflow: hidden; }
.wkr .wkr-head { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 20px; cursor: pointer; flex-wrap: wrap; margin: 0; }
.wkr .wkr-head:focus-visible { outline: 2px solid #72C4FF; outline-offset: -2px; border-radius: inherit; }
.wkr-title { font-size: 16px; }
.wkr-sum { display: flex; gap: 14px; margin-left: auto; font-size: 13px; color: var(--muted); }
.wkr-sum b { color: var(--ink); font-variant-numeric: tabular-nums; }
.wkr-sum .wkr-late b { color: var(--bad); }
.wkr-chev { width: 18px; height: 18px; color: var(--muted); transition: transform 0.25s ease; flex: none; }
.wkr.open .wkr-chev { transform: rotate(180deg); }
.wkr-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
.wkr.open .wkr-body { grid-template-rows: 1fr; }
.wkr-in { overflow: hidden; min-height: 0; padding: 0 20px; }
.wkr.open .wkr-in { padding-bottom: 18px; }
.wkr-tools { display: flex; justify-content: flex-end; margin-bottom: 6px; }
@media (prefers-reduced-motion: reduce) { .wkr-body, .wkr-chev { transition: none; } }
/* the report's head is a wide button: no press-shrink or dimming (the whole card would jump); a soft hover instead.
   The body's padding sits on an inner box, so opening and closing slide smoothly with no jump at either end. */
.wkr .wkr-head:not(:disabled):active { transform: none; }
.wkr .wkr-head:hover { filter: none; background: color-mix(in srgb, var(--ink) 3%, transparent); }
.wkr .wkr-head { transition: background-color 0.15s ease; }
.wkr-in, .wkr.open .wkr-in { padding: 0; }
.wkr-pad { padding: 0 20px 18px; }
.wkr-body > .wkr-in { opacity: 0; transition: opacity 0.2s ease; }
.wkr.open .wkr-body > .wkr-in { opacity: 1; transition: opacity 0.3s ease 0.05s; }
/* report head, tidied: one calm row, no hover band; the totals while closed, the week switch while open */
.wkr .wkr-head { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 18px 12px 20px; cursor: pointer; flex-wrap: wrap; }
.wkr .wkr-head:hover { background: none; }
.wkr .wkr-head:hover .wkr-chev { color: var(--ink); }
.wkr .wkr-head:focus-visible { outline: 2px solid #72C4FF; outline-offset: -2px; border-radius: 18px; }
.wkr-seg { display: none; margin-left: auto; cursor: default; }
.wkr.open .wkr-seg { display: inline-flex; }
.wkr.open .wkr-sum { display: none; }
.wkr-chev { margin-left: 4px; }
.wkr-tools { display: none; }
.wkr-pad { padding: 0 20px 18px; }
.wkr-pad { border-top: 1px solid var(--line); padding-top: 2px; } /* inside the sliding box: hidden with it */
.wkr-t thead th { padding-top: 12px; }
/* tasks in progress right now: a pulsing blue dot in the head, blue in the table */
.wkr-doing { display: inline-flex; align-items: center; gap: 5px; }
.wkr-doing i { width: 7px; height: 7px; border-radius: 50%; background: #72C4FF; animation: acPulse 1.6s ease-in-out infinite; }
.wkr-doing b, td.wkr-doingc { color: #72C4FF; font-weight: 700; }
html:not([data-theme="dark"]) .wkr-doing b, html:not([data-theme="dark"]) td.wkr-doingc { color: #1f7fc0; }
/* the weekly report now sits under the teams */
#team .members + .wkr { margin-top: 24px; }
/* the member list dropdown: the same card as the report, its rows inside */
#team .wkr + .wkr { margin-top: 16px; }
.mldd .mlist { padding: 4px 0 0; margin: 0; }
.ml-ic { background: color-mix(in srgb, #a99bff 18%, transparent); color: #a99bff; }
.mldd .wkr-chev { margin-left: auto; } /* no totals here: the arrow keeps to the right edge */

/* raw video housekeeping: chips on project rows, and the storage card in Settings */
.chip.vgone { display: inline-flex; align-items: center; gap: 4px; background: var(--panel-2); color: var(--muted); }
.chip.vsoon { display: inline-flex; align-items: center; gap: 4px; background: var(--bad-soft); color: var(--bad); }
.chip.vgone svg, .chip.vsoon svg { width: 12px; height: 12px; }
button.chip.vkeep { border: 1px solid color-mix(in srgb, var(--bad) 40%, transparent); background: none; color: var(--bad); font-weight: 600; cursor: pointer; }
button.chip.vkeep:hover { background: var(--bad-soft); filter: none; }
.storage { margin-bottom: 20px; }
.st-top { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 10px; }
.st-top > b { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.st-top > span { color: var(--muted); font-size: 14px; }
.st-top em { margin-left: auto; font-style: normal; font-weight: 700; color: var(--ok); }
.st-top em.warn { color: #e0b000; } .st-top em.full { color: var(--bad); }
.st-bar { display: flex; height: 10px; border-radius: 6px; background: var(--panel-2); overflow: hidden; gap: 2px; }
.st-bar i { display: block; height: 100%; min-width: 0; }
.sp-jobs { background: #72C4FF; } .sp-deleted { background: #ff8f8f; } .sp-data { background: #a99bff; } .sp-backups { background: #2fd06b; }
.st-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 4px; font-size: 13px; color: var(--ink-2); }
.st-legend span { display: inline-flex; align-items: center; gap: 6px; }
.st-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

/* a Reels from an approved script: «Script» beside the steps, and step 1's upload / voiceover choice */
.stepsrow { align-items: stretch; }
.scriptbtn { display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; border-radius: 16px; border: 1px solid color-mix(in srgb, #72C4FF 35%, var(--line-2)); background: color-mix(in srgb, #72C4FF 10%, var(--panel)); color: var(--ink); font-weight: 600; flex: none; margin-left: 10px; }
.scriptbtn svg { width: 16px; height: 16px; color: #72C4FF; }
.scriptbtn:hover { filter: none; background: color-mix(in srgb, #72C4FF 18%, var(--panel)); }
.scriptbtn[hidden] { display: none; }
.vo-switch { display: inline-flex; padding: 4px; border-radius: 14px; background: var(--panel-2); margin: 4px 0 14px; }
.vo-switch[hidden] { display: none; }
.vo-switch button { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 0; border-radius: 10px; background: none; color: var(--muted); font-weight: 600; }
.vo-switch button svg { width: 16px; height: 16px; }
.vo-switch button.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); }
.vo-switch button:hover { filter: none; color: var(--ink); }
.vo-panel { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px; border: 1px dashed var(--line-2); }
.vo-panel[hidden] { display: none; }
.vo-lbl { font-size: 13px; font-weight: 600; } .vo-lbl small { font-weight: 400; color: var(--muted); margin-left: 6px; }
.vo-panel textarea { margin: 0; min-height: 120px; resize: vertical; font: inherit; font-size: 14px; line-height: 1.5; }
.vo-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vo-voice { min-width: 200px; }
.vo-models { display: inline-flex; gap: 6px; }
.vo-models .tm-chip.on { border-color: var(--ink); color: var(--ink); }
.vo-count { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.vo-row audio { height: 36px; flex: 1; min-width: 220px; }
#voMake { display: inline-flex; align-items: center; gap: 8px; } #voMake svg { width: 16px; height: 16px; }
.vo-use { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, #0EB04B 10%, var(--panel-2)); }
.vo-use .hint { margin: 0; flex: 1; }
#voUse { display: inline-flex; align-items: center; gap: 8px; } #voUse svg { width: 14px; height: 14px; }
.vo-note { margin: 0; }
.vo-err { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--bad); font-size: 14px; } .vo-err svg { width: 16px; height: 16px; }
.scriptwin { width: min(640px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; }
.sw-head { display: flex; align-items: center; gap: 12px; }
.sw-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sw-head b { font-size: 18px; }
.sw-head span { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ok); font-weight: 600; } .sw-head span svg { width: 13px; height: 13px; }
.sw-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, #72C4FF 16%, transparent); color: #72C4FF; flex: none; } .sw-ic svg { width: 18px; height: 18px; }
.sw-text { overflow-y: auto; white-space: pre-wrap; font-size: 15px; line-height: 1.65; padding: 14px 16px; border-radius: 12px; background: var(--panel-2); }
.sw-foot { display: flex; justify-content: flex-end; }
.sw-foot button { display: inline-flex; align-items: center; gap: 6px; } .sw-foot svg { width: 14px; height: 14px; }
.vo-warn { display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 12px; border-radius: 10px; background: color-mix(in srgb, #FFC801 12%, transparent); color: #e0b000; font-size: 13px; font-weight: 600; }
.vo-warn svg { width: 15px; height: 15px; flex: none; }
html:not([data-theme="dark"]) .vo-warn { color: #8a6a00; }
/* the upload / voiceover choice: the one not chosen still reads as a button you can press */
.vo-switch button { color: var(--ink-2); }
.vo-switch button:not(.on):hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }

/* ---------- the Reels steps, minimal: one quiet line — back arrow, four steps joined by a thin progress line, Script */
.stepsrow { display: flex; align-items: center; gap: 18px; margin: 0 0 22px; padding: 0 2px; }
.stepback { padding: 0; background: none; border-radius: 0; gap: 6px; font-size: 13.5px; color: var(--muted); }
.stepback i { width: 28px; height: 28px; background: var(--panel); border: 1px solid var(--line); }
.stepback:hover { background: none; }
.stepback:hover i { background: var(--panel-2); }
.stepback span { display: none; }
.stepsrow .steps { display: flex; align-items: center; gap: 0; flex: 1; min-width: 0; margin: 0; }
.steps li { flex: 1 1 0; min-width: 0; position: relative; gap: 9px; padding: 6px 0; border-radius: 0; background: none; font-size: 14px; color: var(--muted); }
.steps li:not(:last-child)::after { content: ""; flex: 1; height: 2px; margin: 0 14px 0 4px; border-radius: 1px; background: var(--line); min-width: 16px; }
.steps li.done:not(:last-child)::after { background: color-mix(in srgb, var(--ok) 55%, var(--line)); }
.steps li:last-child { flex: 0 0 auto; }
.steps li span { white-space: nowrap; }
.steps li i { width: 24px; height: 24px; font-size: 12px; font-weight: 700; background: none; border: 1.5px solid var(--line-2); color: var(--muted); }
.steps li.done { color: var(--ink-2); }
.steps li.done i { background: var(--ok); border-color: var(--ok); color: #FAFAFA; font-size: 0; }
.steps li.done i::before { font-size: 12px; }
.steps li.cur { background: none; color: var(--ink); font-weight: 700; }
.steps li.cur i { background: var(--ink); border-color: var(--ink); color: var(--panel); font-size: 12px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 12%, transparent); }
.steps li.locked { opacity: 1; color: color-mix(in srgb, var(--muted) 70%, transparent); }
.steps li.locked i { border-style: dashed; }
.steps li:not(.locked):not(.cur):hover { color: var(--ink); }
.scriptbtn { height: 34px; padding: 0 14px 0 12px; border-radius: 999px; margin-left: 4px; font-size: 13px; background: none; border: 1px solid var(--line-2); color: var(--ink-2); }
.scriptbtn svg { width: 15px; height: 15px; }
.scriptbtn:hover { background: var(--panel-2); color: var(--ink); }
@media (max-width: 760px) { .steps li span { display: none; } .steps li:not(:last-child)::after { margin: 0 8px; } }
/* the approved script window, for reading: a calm header, readable text with air, section labels, a light footer */
.scriptwin { width: min(700px, 100%); max-height: calc(100vh - 48px); padding: 0; gap: 0; overflow: hidden; }
.scriptwin .sw-head { align-items: flex-start; gap: 12px; padding: 22px 24px 16px; border-bottom: 1px solid var(--line); }
.sw-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sw-kicker { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.sw-tt > b { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.sw-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 12.5px; color: var(--muted); }
.sw-meta > span + span::before { content: "·"; margin-right: 14px; margin-left: -8px; color: var(--line-2); }
.sw-ok { display: inline-flex; align-items: center; gap: 5px; color: var(--ok); font-weight: 600; }
.sw-ok svg { width: 13px; height: 13px; stroke-width: 2.4; }
.scriptwin .sw-text { flex: 1; min-height: 0; overflow-y: auto; white-space: normal; padding: 20px 28px 28px; background: none; border-radius: 0; font-size: 15.5px; line-height: 1.75; color: var(--ink); }
.sw-text p { margin: 0 0 14px; max-width: 64ch; }
.sw-text p:last-child { margin-bottom: 0; }
.sw-h { display: flex; align-items: center; gap: 12px; margin: 22px 0 12px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #72C4FF; }
.sw-h::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sw-text > .sw-h:first-child { margin-top: 0; }
.scriptwin .sw-foot { display: flex; align-items: center; gap: 12px; padding: 12px 18px 14px 24px; border-top: 1px solid var(--line); }
.sw-hint { flex: 1; font-size: 12px; color: var(--muted); }
html:not([data-theme="dark"]) .sw-h { color: #1f7fc0; }
/* the upload / voiceover switch: only the chosen side has a box; hovering the other just brightens its text */
.vo-switch button:not(.on):hover { background: none; color: var(--ink); }
.vo-switch button { transition: color 0.15s ease, background-color 0.2s ease; }
.vo-switch button:not(:disabled):active { transform: none; }

/* the upload / voiceover switch: one pill slides between the two sides; the chosen side's content eases in */
.vo-switch { position: relative; isolation: isolate; }
.vo-switch .vo-pill { position: absolute; top: 4px; bottom: 4px; left: 4px; z-index: -1; border-radius: 10px; background: var(--panel); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), width 0.38s cubic-bezier(0.22, 1, 0.36, 1); }
.vo-switch .vo-pill.still { transition: none; }
.vo-switch button, .vo-switch button.on { background: none; box-shadow: none; }
.vo-switch button.on { color: var(--ink); }
.vo-in { animation: voIn 0.36s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes voIn { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .vo-switch .vo-pill { transition: none; } .vo-in { animation: none; } }

/* step 1, one row: the upload / voiceover switch on the left, what to make (a dropdown) on the right */
.w1-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px; }
.w1-row .vo-switch { margin: 0; }
.scopepick { margin-left: auto; min-width: 250px; height: 46px; padding: 0 12px 0 6px; }
.scopepick .pk-t { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; min-width: 0; }
.scopepick .pk-t small { font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.scopepick .pk-t b { font-size: 14px; font-weight: 600; white-space: nowrap; }
.scopepick .pk-ic svg { width: 16px; height: 16px; }
.scopepick .pk-chev { margin-left: auto; }
.scopepick:disabled { opacity: 0.55; cursor: not-allowed; }
@media (max-width: 640px) { .scopepick { margin-left: 0; width: 100%; } }
.vo-switch[hidden] + .scopepick { margin-left: 0; } /* a Reels with no script: the dropdown alone, on the left */

/* an approved text's writer: straight on to its next step */
.cn-self { display: flex; flex-direction: column; gap: 6px; padding: 0 12px 12px; }
.cn-self[hidden] { display: none; }
.cn-selfbtn { display: flex; align-items: center; gap: 10px; width: 100%; height: 42px; padding: 0 14px; border-radius: 12px; font-weight: 600; font-size: 14px; }
.cn-selfbtn svg { width: 17px; height: 17px; flex: none; }
.cn-selfbtn span { flex: 1; text-align: left; }
.cn-selfbtn .go { width: 14px; height: 14px; transition: transform 0.15s; }
.cn-selfbtn:hover .go { transform: translateX(3px); }
.cn-selfnote { font-size: 12px; color: var(--muted); padding: 0 2px; }
.pk-row b em { font-style: normal; font-weight: 500; color: var(--muted); margin-left: 4px; }
/* «Make it myself», quieter: a small outlined button under a hairline, the note beside it */
.cn-self { flex-direction: row; align-items: center; gap: 10px; margin: 2px 8px 0; padding: 10px 4px 8px; border-top: 1px solid var(--line); }
.cn-selfbtn { width: auto; height: 32px; padding: 0 12px 0 14px; gap: 8px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--ink); font-size: 13px; font-weight: 600; }
.cn-selfbtn:hover { filter: none; background: color-mix(in srgb, var(--ink) 8%, var(--panel-2)); }
.cn-selfbtn span { flex: none; }
.cn-selfbtn .go { width: 13px; height: 13px; color: var(--muted); }
.cn-selfbtn:hover .go { color: var(--ink); }
.cn-selfnote { font-size: 12px; color: var(--muted); padding: 0; }

/* task cards, «compact list»: plain cards (the column's dot says the status), a round tick, the deadline on the right of
   the title, one line of small icons under it; status menu and delete on hover; drag a card to another column */
.colbody { gap: 6px; }
.col[data-status] .tcard.tl { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 10px 10px 12px; cursor: grab; }
.col[data-status] .tcard.tl:hover { border-color: var(--line-2); }
.tcard.dragging { opacity: 0.4; }
.col.col-over { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 18%, transparent); }
.tl .tcard-top { gap: 10px; align-items: center; }
.tl .tcard-title { font-size: 14px; line-height: 1.35; padding-top: 0; }
.tl .tcard-top input[type=checkbox] { width: 18px; height: 18px; border-radius: 50%; margin: 0; background-size: 10px 10px; align-self: flex-start; margin-top: 1px; }
.tl-when { flex: none; font-size: 11.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tl-when.late { color: var(--bad); font-weight: 600; }
.tc-acts { display: none; align-items: center; gap: 2px; margin: -3px -2px -3px 0; flex: none; }
.tcard.tl:hover .tc-acts, .tcard.tl:focus-within .tc-acts { display: flex; }
.tcard.tl:hover .tl-when, .tcard.tl:focus-within .tl-when { display: none; }
@media (hover: none) { .tc-acts { display: flex; } }
.tc-st { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 4px 0 6px; border: 0; border-radius: 7px; background: none; color: var(--muted); }
.tc-st i { width: 8px; height: 8px; border-radius: 50%; background: var(--lav-ink); }
.tc-st.st-doing i { background: #f2c94c; } .tc-st.st-done i { background: var(--ok); }
.tc-st svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.tc-st:hover, .tcard.tl .tdel:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.tc-st:disabled { opacity: 0.4; cursor: not-allowed; }
.tcard.tl .tdel { width: 22px; height: 22px; padding: 0; border-radius: 7px; font-size: 15px; }
.tl .tcard-work { margin: 8px 0 0 28px; }
.tl .tcard-work .workbtn { height: 26px; font-size: 12px; }
.tl-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; padding-left: 28px; font-size: 11.5px; color: var(--muted); }
.tl-meta .ttype { font-size: 11px; padding: 1px 7px 1px 5px; }
.tl-meta .cchip { height: 20px; padding: 0 6px; font-size: 11px; }
.tl-i { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.tl-i svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.tl-proj { color: var(--ink-2); font-weight: 500; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
a.tl-proj:hover { text-decoration: underline; }
.tl-who { margin-left: auto; display: inline-flex; }
.tl-who .av.sm { width: 20px; height: 20px; font-size: 9px; }
.tcard.tl.isdone { padding-top: 8px; padding-bottom: 8px; }
.tcard.tl.isdone .tcard-title { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.tcard.tl.islate { border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }

/* the compact card's tick: a true 18px circle (the general input padding made it an oval); a faint tick shows on hover,
   a green circle with a white tick once done */
.tl .tcard-top input[type=checkbox] { box-sizing: border-box; width: 18px; height: 18px; min-width: 18px; padding: 0; margin: 1px 0 0; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--ink) 28%, transparent); background: transparent center / 10px 10px no-repeat; }
.tl .tcard-top input[type=checkbox]:hover:not(:disabled):not(:checked) { border-color: #0EB04B; box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.3 2.2 4.7-5' fill='none' stroke='%230EB04B' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.tl .tcard-top input[type=checkbox]:checked { border-color: #0EB04B; background-color: #0EB04B; background-size: 10px 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.3 2.2 4.7-5' fill='none' stroke='%23FAFAFA' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.tl.isdone .tcard-top input[type=checkbox]:checked { opacity: 0.85; }