/* =====================================================================
   NION Clienți · clients.nion.ro
   Același limbaj vizual ca fereastra-aplicație din hero-ul nion.ro:
   fond #F7F8FC, carduri albe cu margine fină, albastrul NION #0800FC pentru acțiune,
   navy #0B103A pentru text și blocuri închise, nuanțele pastel ale departamentelor
   (lavandă 250, piersică 22, mentă 158, unt 44, roz pudrat 336, bleu 196),
   Inter Tight + Instrument Serif italic pentru accente. Mișcări scurte și calme.
   ===================================================================== */
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/inter-tight-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: "Inter Tight"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/inter-tight-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: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/instrument-serif-italic-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/instrument-serif-italic-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: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/assets/fonts/jetbrains-mono-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }

:root {
  --bg: #F7F8FC;
  --surface: #FFFFFF;
  --surface-2: #F8F9FC;
  --ink: #0B103A;
  --ink-2: #2B3058;
  --muted: #5F6480;
  --faint: #9397AE;
  --line: rgba(11, 16, 58, .08);
  --line-2: rgba(11, 16, 58, .14);
  --blue: #0800FC;
  --blue-600: #05009E;
  --blue-400: #6560FF;
  --blue-200: #C9C7FF;
  --blue-100: #E4E3FF;
  --blue-50: #F2F1FF;
  --navy: #0B103A;
  --ok: #00A862;
  --risk: hsl(350 72% 46%);
  --warn: hsl(36 90% 40%);
  --font-sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif: "Instrument Serif", ui-serif, Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.36, .64, 1);
  --side-w: 256px;
  --r: 12px;
  --r-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(11,16,58,.05), 0 1px 1px rgba(11,16,58,.03);
  --shadow: 0 1px 2px rgba(11,16,58,.05), 0 12px 32px -12px rgba(11,16,58,.16);
  --shadow-lg: 0 2px 4px rgba(11,16,58,.04), 0 30px 80px -24px rgba(11,16,58,.28);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 14px/1.45 var(--font-sans); color: var(--ink); background: var(--bg); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-600); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { margin: 0; letter-spacing: -.02em; }
em { font-style: normal; }
.muted { color: var(--muted); }
.late { color: var(--risk); }
code { font-family: var(--font-mono); font-size: 12px; padding: 1px 5px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); word-break: break-all; }
kbd { font-family: var(--font-mono); font-size: 10.5px; padding: 1px 6px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line-2); color: var(--muted); }

/* iconițe în două tonuri: linie + umplere pastel */
.ico { width: 18px; height: 18px; flex: none; --ico-fill: none; }

/* ------------------------------------------------------------------ cadrul */
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 6px; padding: 18px 12px 12px; background: #fff; border-right: 1px solid var(--line); overflow-y: auto; scrollbar-width: thin; }
.brand { display: inline-flex; align-items: baseline; gap: 8px; padding: 4px 10px 14px; color: var(--blue); }
.brand .logo { height: 19px; width: auto; fill: currentColor; }
.brand em { font-family: var(--font-serif); font-style: italic; font-size: 22px; line-height: 1; color: var(--ink); letter-spacing: -.01em; }
.brand--lg .logo { height: 26px; }
.brand--lg em { font-size: 30px; }
.nav { display: grid; gap: 2px; }
.nav__a { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 10px; color: var(--ink-2); font-weight: 500; transition: background .2s, color .2s; }
.nav__a:hover { background: var(--surface-2); color: var(--ink); }
.nav__i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: hsl(var(--h) 88% 95%); color: hsl(var(--h) 48% 34%); --ico-fill: hsl(var(--h) 86% 85%); }
.nav__i .ico { width: 16px; height: 16px; --ico-fill: inherit; }
.nav__a.is-on { background: var(--blue-50); color: var(--blue); box-shadow: inset 0 0 0 1px rgba(8,0,252,.08); }
.nav__a.is-on .nav__i { background: var(--blue); color: #fff; --ico-fill: rgba(255,255,255,.25); }
.side__sec { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 4px; padding: 0 6px 0 10px; font-size: 11.5px; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.side__add { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); }
.side__add:hover { background: var(--blue-50); color: var(--blue); }
.side__add .ico { width: 14px; height: 14px; }
.spaces { display: grid; gap: 1px; margin-bottom: 12px; }
.spaces__a { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 5px 8px 5px 6px; border-radius: 9px; color: var(--ink-2); font-weight: 500; font-size: 13.5px; }
.spaces__a:hover { background: var(--surface-2); color: var(--ink); }
.spaces__a.is-on { background: hsl(var(--h, 250) 88% 96%); color: var(--ink); }
.spaces__n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spaces__late { min-width: 20px; padding: 1px 6px; border-radius: 999px; background: hsl(350 85% 95%); color: var(--risk); font-size: 11px; text-align: center; }
.spaces__new { width: 7px; height: 7px; border-radius: 50%; background: var(--blue-400); box-shadow: 0 0 0 3px var(--blue-50); }
.spaces__empty { margin: 4px 10px; font-size: 12.5px; color: var(--muted); }
.side__foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 10px 6px 2px; border-top: 1px solid var(--line); }
.side__me { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.side__me b { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side__me small { color: var(--muted); font-size: 11.5px; }
.side__foot form { margin: 0; }

.main { min-width: 0; display: flex; flex-direction: column; }
.scrim { display: none; }
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 28px; background: rgba(247,248,252,.86); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.top .top__menu { display: none; }
.search { display: flex; align-items: center; gap: 8px; width: min(420px, 100%); height: 36px; padding: 0 6px 0 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--faint); transition: border-color .2s, box-shadow .2s; }
.search:focus-within { border-color: var(--blue-200); box-shadow: 0 0 0 4px var(--blue-50); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); }
.search .ico { width: 15px; height: 15px; }
.top__right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.live { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; background: hsl(158 70% 94%); color: hsl(158 60% 26%); font-size: 11.5px; font-weight: 600; }
.pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(0,168,98,.5); animation: pulse 2.4s var(--ease-out) infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0,168,98,.45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(0,168,98,0); } }
.page { width: 100%; max-width: 1360px; padding: 26px 28px 80px; animation: pageIn .5s var(--ease-out) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ butoane */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--ink); font-weight: 600; font-size: 13.5px; white-space: nowrap; transition: transform .2s var(--ease-out), box-shadow .2s, background .2s, border-color .2s; }
.btn:hover { border-color: var(--blue-200); color: var(--blue); }
.btn .ico { width: 15px; height: 15px; }
.btn--primary { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 6px 16px -8px rgba(8,0,252,.6); }
.btn--primary:hover { background: var(--blue); color: #fff; transform: translateY(-1px); box-shadow: 0 14px 30px -12px rgba(8,0,252,.55); }
.btn--ghost { background: transparent; }
.btn--small { height: 30px; padding: 0 12px; font-size: 12.5px; }
.btn--block { width: 100%; height: 46px; font-size: 15px; }
.iconbtn { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--muted); transition: background .2s, color .2s; }
.iconbtn:hover { background: var(--blue-50); color: var(--blue); }
.iconbtn .ico { width: 16px; height: 16px; }
.iconbtn--add { background: var(--blue-50); color: var(--blue); }
.linkbtn { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: var(--blue); font-weight: 600; font-size: 13px; }
.linkbtn .ico { width: 14px; height: 14px; }
.linkbtn:hover { color: var(--blue-600); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ titlul paginii și cifrele */
.ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.ph__actions { display: flex; gap: 8px; }
.eyebrow { margin: 0 0 4px; font-size: 13px; color: var(--muted); }
h1 { font-size: clamp(26px, 3vw, 34px); font-weight: 600; letter-spacing: -.035em; line-height: 1.1; }
h1 em, .auth h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--blue); font-size: 1.1em; letter-spacing: -.01em; }
.lead { max-width: 820px; margin: -6px 0 22px; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }
.hint { margin: 18px 2px 0; font-size: 12px; color: var(--faint); }

.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.kpi { position: relative; display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); color: var(--ink); overflow: hidden; transition: transform .3s var(--ease-spring), box-shadow .3s, border-color .3s; }
.kpi::after { content: ""; position: absolute; right: -18px; top: -18px; width: 64px; height: 64px; border-radius: 50%; background: hsl(var(--h) 88% 95%); }
.kpi:hover { color: var(--ink); transform: translateY(-2px); border-color: hsl(var(--h) 62% 86%); box-shadow: 0 0 0 4px hsl(var(--h) 90% 97%), 0 18px 30px -22px hsl(var(--h) 55% 45% / .5); }
.kpi__l { position: relative; z-index: 1; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.kpi b { position: relative; z-index: 1; font-size: 26px; font-weight: 600; letter-spacing: -.04em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi b.kpi__money { font-size: 20px; padding: 3px 0 2px; }
.kpi__d { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi--risk b { color: var(--risk); }
.kpi--risk::after { background: hsl(350 90% 95%); }

/* ------------------------------------------------------------------ bara de filtre */
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 14px; }
.bar--tight { margin-bottom: 10px; }
.bar__sp { flex: 1; }
.seg { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: var(--shadow-sm); }
.seg a { padding: 6px 14px; border-radius: 8px; color: var(--muted); font-weight: 600; font-size: 13px; transition: background .2s, color .2s; }
.seg a:hover { color: var(--ink); }
.seg a.is-on { background: var(--navy); color: #fff; }
.dnav { display: inline-flex; align-items: center; gap: 2px; }
.dnav__today { padding: 5px 11px; border-radius: 8px; border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); font-weight: 600; font-size: 12.5px; }
.dnav__today.is-on { border-color: var(--blue-200); color: var(--blue); background: var(--blue-50); }
.dnav__label { margin-left: 8px; font-weight: 600; color: var(--ink-2); }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.pick { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px 0 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--muted); }
.pick .ico { width: 14px; height: 14px; }
.pick select { max-width: 190px; border: 0; outline: 0; background: transparent; color: var(--ink); font-weight: 500; font-size: 13px; cursor: pointer; }
.toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); cursor: pointer; user-select: none; }
.toggle input { appearance: none; width: 30px; height: 18px; margin: 0; border-radius: 999px; background: var(--line-2); position: relative; transition: background .2s; cursor: pointer; }
.toggle input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(11,16,58,.2); transition: transform .25s var(--ease-spring); }
.toggle input:checked { background: var(--blue); }
.toggle input:checked::after { transform: translateX(12px); }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 14px; border-bottom: 1px solid var(--line); }
.tabs a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 600; font-size: 13.5px; }
.tabs a b { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 11.5px; color: var(--muted); text-align: center; }
.tabs a.is-on { color: var(--ink); border-color: var(--blue); }
.tabs a.is-on b { background: var(--blue-50); color: var(--blue); border-color: var(--blue-100); }

/* ------------------------------------------------------------------ lista de sarcini (vederea unică) */
.tlist { --cols: 34px minmax(0, 1fr) 190px 130px 104px 100px; display: grid; gap: 14px; }
.tlist--client { --cols: 34px minmax(0, 1fr) 40px 92px 34px; }
.tlist--client .thead { display: none; }
.tlist--client .who { padding: 0 4px; }
.tlist--client .who__n, .tlist--client .prio > span { display: none; }
.tlist--client .trow__tags .svc { max-width: 120px; }
.thead { position: sticky; top: 60px; z-index: 5; display: grid; grid-template-columns: var(--cols); gap: 10px; align-items: center; padding: 8px 14px 6px; margin-bottom: -8px; background: linear-gradient(var(--bg) 70%, transparent); font-size: 11.5px; font-weight: 600; color: var(--faint); }
.grp { border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); overflow: hidden; }
.grp__h { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 8px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.grp__tog { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--muted); }
.grp__tog .ico { width: 14px; height: 14px; transform: rotate(90deg); transition: transform .25s var(--ease-out); }
.grp.is-closed .grp__tog .ico { transform: none; }
.grp.is-closed .grp__body { display: none; }
.grp.is-closed .grp__h { border-bottom: 0; }
.grp__pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 7px; background: hsl(var(--g, 250) 88% 94%); color: hsl(var(--g, 250) 50% 30%); font-weight: 700; font-size: 12px; letter-spacing: .01em; text-transform: uppercase; }
.grp__sub { color: var(--muted); font-weight: 500; font-size: 13px; }
.grp__n { margin-left: auto; min-width: 26px; padding: 2px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 600; text-align: center; }
.grp--risk { --g: 350; border-color: hsl(350 70% 90%); }
.grp--risk .grp__h { background: hsl(350 90% 98%); }
.grp--today { --g: 245; border-color: var(--blue-100); box-shadow: 0 0 0 4px var(--blue-50), var(--shadow-sm); }
.grp--today .grp__pill { background: var(--blue); color: #fff; }
.grp--weekend { --g: 44; }
.grp--past { --g: 230; opacity: .82; }
.grp--past .grp__pill { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.grp__empty { margin: 0; padding: 12px 18px 4px 52px; color: var(--faint); font-size: 13px; }

.trow { display: grid; grid-template-columns: var(--cols); gap: 10px; align-items: center; min-height: 46px; padding: 4px 14px; border-bottom: 1px solid var(--line); background: #fff; cursor: pointer; transition: background .15s; }
.trow:hover { background: #FBFBFE; }
.trow.is-active { background: var(--blue-50); box-shadow: inset 3px 0 0 var(--blue); }
.trow.is-done .trow__title { color: var(--faint); text-decoration: line-through; text-decoration-color: var(--line-2); }
.trow.is-new { animation: rowIn .7s var(--ease-out); }
@keyframes rowIn { from { background: var(--blue-50); } to { background: #fff; } }
.st { position: relative; display: grid; place-items: center; width: 20px; height: 20px; margin-left: 6px; padding: 0; border-radius: 50%; border: 2px solid #B8BBCC; background: #fff; color: transparent; transition: transform .25s var(--ease-spring), background .2s, border-color .2s, color .2s; }
.st .ico { width: 12px; height: 12px; }
.st:hover { border-color: var(--ok); color: var(--ok); transform: scale(1.1); }
.st--doing { border-color: var(--blue); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 10px var(--blue-200); }
.st--client { border-color: hsl(36 90% 50%); border-style: dashed; }
.st--done { border-color: var(--ok); background: var(--ok); color: #fff; }
.st--done:hover { background: #fff; color: var(--ok); }
.st.is-pop { animation: pop .45s var(--ease-spring); }
@keyframes pop { 40% { transform: scale(1.3); } }
.trow__main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.trow__title { flex: 0 1 auto; min-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 500; font-size: 14px; }
.trow__title:hover { color: var(--blue); }
.trow__tags { display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; overflow: hidden; }
.trow__tags .svc { max-width: 170px; flex: 0 1 auto; min-width: 40px; }
.stag { flex: none; padding: 1px 7px; border-radius: 6px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.meta-i { flex: none; }
.stag--doing { background: var(--blue-50); color: var(--blue); }
.stag--client { background: hsl(44 95% 92%); color: hsl(36 80% 28%); }
.svc { display: inline-flex; align-items: center; max-width: 220px; height: 21px; padding: 0 8px; border-radius: 6px; background: hsl(var(--h, 250) 88% 95%); color: hsl(var(--h, 250) 46% 32%); font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc--more { background: var(--surface-2); color: var(--muted); }
.meta-i { display: inline-flex; align-items: center; gap: 3px; color: var(--faint); font-size: 11.5px; }
.meta-i .ico { width: 13px; height: 13px; }
.cchip { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; padding: 2px 9px 2px 3px; border-radius: 999px; background: hsl(var(--h) 88% 96%); color: hsl(var(--h) 45% 26%); font-size: 12.5px; font-weight: 600; }
.cchip i { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; background: hsl(var(--h) 80% 86%); color: hsl(var(--h) 48% 28%); font-style: normal; font-size: 9px; font-weight: 700; }
.cchip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cchip:hover { color: hsl(var(--h) 55% 20%); background: hsl(var(--h) 85% 92%); }
.trow__client { min-width: 0; display: flex; }

.cell { position: relative; display: inline-flex; align-items: center; gap: 7px; min-width: 0; height: 30px; padding: 0 8px; border-radius: 8px; color: var(--ink-2); font-size: 13px; cursor: pointer; transition: background .15s; }
.cell:hover { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.cell > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell .ico { width: 14px; height: 14px; color: var(--faint); }
.cell select, .cell input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; }
.cell input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.due--today { color: var(--blue); font-weight: 600; }
.due--today .ico { color: var(--blue); }
.due--late { color: var(--risk); font-weight: 600; }
.due--late .ico { color: var(--risk); }
.prio .ico { --ico-fill: currentColor; }
.prio--1 { color: var(--risk); font-weight: 600; } .prio--1 .ico { color: var(--risk); }
.prio--2 { color: hsl(22 80% 40%); } .prio--2 .ico { color: hsl(22 90% 52%); }
.prio--3 .ico { color: var(--blue-200); --ico-fill: none; }
.prio--4 { color: var(--faint); }

.av { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: hsl(var(--h, 250) 80% 88%); color: hsl(var(--h, 250) 48% 28%); font-size: 10px; font-weight: 700; letter-spacing: -.02em; box-shadow: 0 0 0 2px #fff; }
.av--none { background: var(--surface-2); color: var(--faint); box-shadow: inset 0 0 0 1px var(--line-2); }
.av--none .ico { width: 13px; height: 13px; }
.av--lg { width: 44px; height: 44px; font-size: 15px; }
.plate { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: hsl(var(--h) 88% 92%); color: hsl(var(--h) 48% 30%); box-shadow: inset 0 0 0 1px hsl(var(--h) 70% 86%); font-size: 11.5px; font-weight: 700; letter-spacing: -.02em; }
.plate--sm { width: 22px; height: 22px; border-radius: 7px; font-size: 9px; }
.plate--lg { width: 60px; height: 60px; border-radius: 18px; font-size: 21px; }

.qadd { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 6px 14px 8px; }
.qadd__plus { display: grid; place-items: center; width: 20px; height: 20px; margin-left: 6px; color: var(--faint); }
.qadd__plus .ico { width: 14px; height: 14px; }
.qadd input { height: 32px; padding: 0 2px; border: 0; outline: 0; background: transparent; color: var(--ink); }
.qadd input::placeholder { color: var(--faint); }
.qadd select { height: 28px; max-width: 180px; padding: 0 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--muted); font-size: 12.5px; opacity: 0; transition: opacity .2s; }
.qadd__go { height: 26px; padding: 0 9px; border: 0; border-radius: 7px; background: var(--blue); color: #fff; font-size: 11.5px; font-weight: 600; opacity: 0; transition: opacity .2s; }
.qadd:focus-within select, .qadd:focus-within .qadd__go { opacity: 1; }
.qadd:focus-within .qadd__plus { color: var(--blue); }

/* ------------------------------------------------------------------ panoul din dreapta */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(560px, 100vw); background: #fff; box-shadow: var(--shadow-lg); border-left: 1px solid var(--line); transform: translateX(104%); transition: transform .45s var(--ease-out); overflow-y: auto; overscroll-behavior: contain; }
.drawer.is-open { transform: none; }
.drawer-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(11,16,58,.18); opacity: 0; pointer-events: none; transition: opacity .3s; }
.drawer.is-open + .drawer-scrim { opacity: 1; pointer-events: auto; }
@media (min-width: 1400px) { .drawer.is-open + .drawer-scrim { opacity: 0; pointer-events: none; } }
.dw__h { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 10px 14px 10px 20px; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.dw__sp { flex: 1; }
.dw__body { padding: 18px 22px 40px; }
.dw__title { width: 100%; min-height: 40px; padding: 4px 0; border: 0; outline: 0; resize: none; overflow: hidden; background: transparent; font-size: 22px; font-weight: 600; letter-spacing: -.025em; line-height: 1.25; }
.dw__title:focus { box-shadow: 0 2px 0 var(--blue-100); }
.stseg { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 18px; }
.stseg__b { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--ink-2); font-weight: 600; font-size: 12.5px; transition: all .2s; }
.stseg__b i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #B8BBCC; }
.stseg__b--doing i { border-color: var(--blue); background: var(--blue-200); }
.stseg__b--client i { border-color: hsl(36 90% 50%); border-style: dashed; }
.stseg__b--done i { border-color: var(--ok); background: var(--ok); }
.stseg__b.is-on { border-color: transparent; background: var(--navy); color: #fff; }
.stseg__b.is-on i { box-shadow: 0 0 0 2px var(--navy); }
.fields { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 4px 12px; margin: 0 0 18px; align-items: center; }
.fields dt { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.fields dt .ico { width: 15px; height: 15px; color: var(--faint); }
.fields dd { margin: 0; min-height: 36px; display: flex; align-items: center; gap: 6px; font-size: 13.5px; }
.fields select, .fields input { height: 34px; max-width: 100%; padding: 0 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; cursor: pointer; }
.fields select:hover, .fields input:hover, .fields select:focus, .fields input:focus { border-color: var(--line-2); background: #fff; outline: 0; }
.lbl { display: block; margin: 0 0 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.dw__desc { width: 100%; min-height: 120px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); line-height: 1.55; resize: vertical; outline: 0; }
.dw__desc:focus { background: #fff; border-color: var(--blue-200); box-shadow: 0 0 0 4px var(--blue-50); }
.dw__sec { margin: 24px 0 10px; font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; }
.comments, .log, .feed { list-style: none; margin: 0; padding: 0; }
.comments li { display: flex; gap: 10px; padding: 8px 0; }
.comments p { margin: 0; }
.comments__t { margin-top: 2px !important; line-height: 1.5; white-space: pre-wrap; }
.comments__none { padding: 0 0 6px !important; font-size: 13px; }
.cform { display: grid; gap: 8px; justify-items: end; margin-top: 8px; }
.cform textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 12px; resize: vertical; outline: 0; line-height: 1.5; }
.cform textarea:focus { border-color: var(--blue-200); box-shadow: 0 0 0 4px var(--blue-50); }
.log li { padding: 4px 0; font-size: 12.5px; color: var(--ink-2); }
.log--table li { display: grid; grid-template-columns: 110px 100px 140px 70px minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); }

/* ------------------------------------------------------------------ formulare */
.form { display: grid; gap: 12px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.grid2 .form__actions, .grid3 .form__actions { grid-column: 1 / -1; }
.fld { display: grid; gap: 5px; min-width: 0; }
.fld--wide { grid-column: 1 / -1; }
.fld > span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.fld input, .fld select, .fld textarea, .svcrow input, .svcrow select, .kpiform__r input, .steps__r input, .steps__r select, .pb__kw input, .linkbox input {
  width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; outline: 0; transition: border-color .2s, box-shadow .2s;
}
.fld textarea { height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus, .svcrow input:focus, .kpiform__r input:focus, .steps__r input:focus, .steps__r select:focus, .pb__kw input:focus { border-color: var(--blue-200); box-shadow: 0 0 0 4px var(--blue-50); }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.svcrows { display: grid; gap: 8px; }
.svcrow { display: grid; grid-template-columns: minmax(0, 2.2fr) 92px 100px minmax(0, 1.3fr); gap: 8px; }
.kpiform { display: grid; gap: 6px; }
.kpiform__h, .kpiform__r { display: grid; grid-template-columns: minmax(0, 2fr) 1fr 1fr 1.2fr; gap: 6px; }
.kpiform__h { font-size: 11.5px; font-weight: 600; color: var(--faint); }
.kpiform__r input { height: 36px; }

/* ------------------------------------------------------------------ clienți */
.strip { margin-bottom: 18px; }
.strip__h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14px; font-weight: 700; }
.strip__h .ico { color: hsl(44 70% 40%); }
.strip__row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.rcard { display: grid; gap: 3px; padding: 12px 14px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: inset 4px 0 0 hsl(var(--h) 75% 80%); color: var(--ink); transition: transform .3s var(--ease-spring); }
.rcard:hover { color: var(--ink); transform: translateY(-2px); }
.rcard__d { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--muted); }
.rcard__d b { color: hsl(36 80% 32%); font-size: 13px; }
.rcard__n { font-weight: 700; font-size: 14.5px; letter-spacing: -.01em; }
.rcard__w { font-size: 12.5px; color: var(--muted); }
.ctable { border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); overflow: hidden; }
.ctable__h, .crow { display: grid; grid-template-columns: minmax(220px, 2.1fr) 170px minmax(160px, 1.6fr) 100px 140px 110px 110px 40px; gap: 12px; align-items: center; padding: 10px 16px; }
.ctable__h { background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 11.5px; font-weight: 600; color: var(--faint); }
.crow { border-bottom: 1px solid var(--line); color: var(--ink); transition: background .15s; }
.crow:last-child { border-bottom: 0; }
.crow:hover { background: hsl(var(--h) 90% 98.5%); color: var(--ink); }
.crow__name { display: flex; align-items: center; gap: 11px; min-width: 0; }
.crow__name > span { display: grid; min-width: 0; }
.crow__name b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crow__name small, .crow__next small, .crow__tasks small { color: var(--muted); font-size: 11.5px; }
.crow__st { display: flex; flex-wrap: wrap; gap: 5px; }
.crow__svc { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.crow__num { font-variant-numeric: tabular-nums; font-weight: 600; }
.crow__next, .crow__tasks { display: grid; }
.crow__next b.soon { color: hsl(36 80% 34%); }
.crow__tasks small.late { color: var(--risk); }
.pill { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.pill--onboarding { background: var(--blue-50); color: var(--blue); border-color: var(--blue-100); }
.pill--activ { background: hsl(158 70% 94%); color: hsl(158 60% 24%); border-color: hsl(158 50% 86%); }
.pill--pauza { background: hsl(44 95% 92%); color: hsl(36 80% 28%); border-color: hsl(44 70% 82%); }
.tone { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 7px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.tone i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tone--ok { background: hsl(158 70% 95%); color: hsl(158 60% 26%); }
.tone--warn { background: hsl(44 95% 93%); color: hsl(36 80% 30%); }
.tone--risk { background: hsl(350 90% 96%); color: var(--risk); }
.tone--off { background: var(--surface-2); color: var(--muted); }
.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 600; }
.empty { display: grid; justify-items: center; gap: 8px; padding: 60px 20px; text-align: center; border-radius: var(--r-lg); background: #fff; border: 1px dashed var(--line-2); }
.empty__i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--blue-50); color: var(--blue); --ico-fill: var(--blue-100); }
.empty__i .ico { width: 24px; height: 24px; --ico-fill: inherit; }
.empty p { margin: 0; max-width: 420px; color: var(--muted); }

/* spațiul unui client */
.chead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; padding: 20px 22px; border-radius: 22px; background: linear-gradient(120deg, #fff 30%, hsl(var(--h) 90% 97%)); border: 1px solid var(--line); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.chead::after { content: ""; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, hsl(var(--h) 90% 92%), transparent 70%); pointer-events: none; }
.chead__id { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; min-width: 0; }
.chead__id h1 { font-size: clamp(24px, 2.6vw, 32px); }
.chead__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.chead__meta span { display: inline-flex; align-items: center; gap: 5px; }
.chead__meta .ico { width: 13px; height: 13px; }
.chead__side { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chead__owner { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 3px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; }
.note { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; }
.note .ico { width: 16px; height: 16px; margin-top: 2px; flex: none; }
.note--warn { background: hsl(44 95% 94%); color: hsl(36 80% 26%); --ico-fill: hsl(44 90% 80%); }
.note--risk { background: hsl(350 90% 97%); color: hsl(350 60% 34%); --ico-fill: hsl(350 85% 90%); }
.note--ok { background: hsl(158 60% 95%); color: hsl(158 60% 20%); }
.note p { margin: 0 0 6px; }
.note p:last-child { margin: 0; }
.linkbox { align-items: flex-start; }
.linkbox > div { flex: 1; min-width: 0; }
.linkbox__row { display: flex; gap: 8px; }
.linkbox input { height: 34px; font-family: var(--font-mono); font-size: 12px; }

.ctiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.tile { display: grid; align-content: start; gap: 3px; padding: 12px 14px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); min-width: 0; }
.tile__l { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.tile__l .ico { width: 14px; height: 14px; color: hsl(var(--h) 48% 40%); --ico-fill: hsl(var(--h) 86% 88%); }
.tile b { font-size: 19px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile b small { font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.tile b.tile__sm { font-size: 14px; letter-spacing: -.01em; white-space: normal; line-height: 1.3; }
.tile__d { font-size: 11.5px; color: var(--muted); }
.tile--risk b { color: var(--risk); }
.bar-p { display: block; height: 6px; margin: 5px 0 3px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.bar-p i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, hsl(var(--h, 196) 75% 70%), hsl(var(--h, 196) 70% 55%)); transition: width 1s var(--ease-out); }
.bar-p--ok i { background: linear-gradient(90deg, hsl(158 55% 62%), var(--ok)); }
.bar-p--thin { height: 4px; margin: 6px 0 2px; }

.cgrid { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 18px; align-items: start; }
.cgrid__side { display: grid; gap: 12px; }
.card { padding: 16px 18px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); min-width: 0; }
.card__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -2px 0 10px; }
.card__h h2 { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.card__h h2 .ico { color: hsl(var(--h, 250) 48% 40%); --ico-fill: hsl(var(--h, 250) 86% 88%); }
.card p { margin: 0 0 10px; line-height: 1.55; color: var(--ink-2); }
.card--goal { background: linear-gradient(160deg, #fff 55%, var(--blue-50)); border-color: var(--blue-100); }
.goal { margin: 0 0 12px; padding: 2px 0 2px 14px; border-left: 3px solid var(--blue); font-family: var(--font-serif); font-style: italic; font-size: 21px; line-height: 1.3; color: var(--ink); }
.kpit { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 4px 0 10px; }
.kpit th { text-align: left; font-weight: 600; color: var(--faint); font-size: 11px; padding: 4px 6px 4px 0; }
.kpit td { padding: 6px 6px 6px 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.kpit td b { color: var(--blue); }
.dl { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 6px 10px; margin: 0; font-size: 13px; }
.dl dt { color: var(--muted); }
.dl dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.dl--tight { gap: 4px 10px; }
.svcs { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.svcs__i { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.svcs__i:first-child { border-top: 0; padding-top: 2px; }
.svcs__i.is-off { opacity: .55; }
.svcs__ico { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; background: hsl(var(--h, 250) 88% 94%); color: hsl(var(--h, 250) 48% 34%); --ico-fill: hsl(var(--h, 250) 86% 85%); box-shadow: inset 0 0 0 1px hsl(var(--h, 250) 70% 88%); }
.svcs__ico .ico { width: 19px; height: 19px; --ico-fill: inherit; }
.svcs__b { flex: 1; min-width: 0; }
.svcs__n { margin: 0 !important; font-weight: 600; color: var(--ink) !important; line-height: 1.35 !important; }
.svcs__m { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 3px 0 0 !important; font-size: 12.5px; color: var(--muted) !important; }
.svcs__pb { margin: 4px 0 0 !important; font-size: 11.5px; }
.svcs__d { margin-top: 6px; font-size: 12.5px; }
.svcs__d summary { cursor: pointer; color: var(--blue); font-weight: 600; list-style: none; }
.svcs__d summary::-webkit-details-marker { display: none; }
.svcs__d summary::before { content: "+ "; }
.svcs__d[open] summary::before { content: "− "; }
.svcs__d p { margin: 6px 0 0; color: var(--ink-2); white-space: pre-line; }
.ctr { padding: 10px 0; border-top: 1px solid var(--line); }
.ctr:first-of-type { border-top: 0; padding-top: 0; }
.ctr.is-off { opacity: .6; }
.ctr__h { display: flex; align-items: center; justify-content: space-between; margin: 0 0 4px !important; }
.ctr__t { font-size: 13px; color: var(--muted) !important; margin: 0 0 8px !important; }
.ctr__docs { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0 !important; font-size: 13px; }
.ctr__docs a { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.ctr__docs .ico { width: 14px; height: 14px; }
.ctr__docs .linkbtn { color: var(--risk); font-weight: 500; }
.invs { list-style: none; margin: 0; padding: 0; }
.invs li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.invs li:first-child { border-top: 0; }
.invs a { display: grid; color: var(--ink); }
.invs a small { color: var(--muted); font-size: 11.5px; }
.invs__r { display: grid; justify-items: end; gap: 3px; font-variant-numeric: tabular-nums; }
.notes { margin: 10px 0 0 !important; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 13px; white-space: pre-line; }
.feed { margin-top: 12px; display: grid; gap: 2px; }
.feed li { display: flex; gap: 10px; padding: 6px 0; font-size: 13px; }
.feed li > i { width: 8px; height: 8px; margin-top: 6px; flex: none; border-radius: 50%; background: var(--line-2); }
.feed--contract > i { background: var(--blue) !important; }
.feed--factura > i { background: hsl(22 90% 60%) !important; }
.feed--nota > i { background: hsl(44 90% 55%) !important; }
.feed--client > i { background: hsl(158 60% 50%) !important; }
.feed p { margin: 0 !important; color: var(--ink) !important; line-height: 1.45 !important; }
.feed small { color: var(--muted); font-size: 11.5px; }

/* șabloane, echipă, setări */
.pbs { display: grid; gap: 14px; margin-bottom: 14px; }
.pb__h { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.pb__name { flex: 1; min-width: 0; height: 36px; padding: 0 8px; border: 1px solid transparent; border-radius: 9px; font-size: 17px; font-weight: 700; letter-spacing: -.02em; background: transparent; outline: 0; }
.pb__name:hover:not(:disabled), .pb__name:focus { border-color: var(--line-2); background: #fff; }
.pb__kw { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 10px; margin: 0 0 12px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.pb__kw input { height: 34px; font-weight: 400; color: var(--ink); }
.steps { display: grid; gap: 4px; }
.steps__h, .steps__r { display: grid; grid-template-columns: 70px minmax(0, 1fr) 130px 110px 200px 34px; gap: 6px; align-items: center; }
.steps__h { font-size: 11px; font-weight: 600; color: var(--faint); padding: 0 2px; }
.steps__r input, .steps__r select { height: 34px; padding: 0 9px; font-size: 13px; }
.steps__r input:disabled, .steps__r select:disabled, .pb__kw input:disabled { background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }
.steps__r--new { margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--line-2); }
.people { display: grid; gap: 10px; margin-bottom: 16px; }
.person { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.person.is-off { opacity: .55; }
.person__b { flex: 1; min-width: 220px; }
.person__b p { margin: 0 0 2px; }
.person__n { font-size: 13px; color: var(--ink-2); }
.person__a { display: flex; flex-wrap: wrap; gap: 6px; }
.setgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.setgrid .card__h { flex-wrap: wrap; }

/* ------------------------------------------------------------------ mesaje */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 90; transform: translate(-50%, 20px); padding: 10px 16px; border-radius: 12px; background: var(--navy); color: #fff; font-weight: 600; font-size: 13.5px; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity .3s, transform .4s var(--ease-spring); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast.is-err { background: var(--risk); }

/* ------------------------------------------------------------------ intrarea (cer cu nori, ca pe nion.ro) */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: linear-gradient(180deg, #BCD6FF 0%, #DCE8FF 42%, #F2F6FF 72%, var(--bg) 100%); overflow: hidden; }
.sky { position: fixed; inset: 0; pointer-events: none; }
.cl { position: absolute; display: block; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,.7) 55%, rgba(255,255,255,0)); filter: blur(6px); animation: drift 60s linear infinite; }
.cl::before, .cl::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
.cl::before { width: 70%; height: 90%; left: 18%; top: -45%; }
.cl::after { width: 55%; height: 70%; left: 50%; top: -25%; }
.cl--1 { width: 520px; height: 150px; left: -120px; top: 14%; animation-duration: 90s; }
.cl--2 { width: 380px; height: 110px; right: -60px; top: 32%; animation-duration: 120s; animation-direction: reverse; opacity: .85; }
.cl--3 { width: 640px; height: 170px; left: 30%; bottom: 6%; animation-duration: 140s; opacity: .9; }
.cl--4 { width: 280px; height: 80px; left: 8%; top: 62%; animation-duration: 100s; animation-direction: reverse; opacity: .7; }
@keyframes drift { from { transform: translateX(-4%); } 50% { transform: translateX(6%); } to { transform: translateX(-4%); } }
.auth__card { position: relative; z-index: 1; width: min(440px, 100%); padding: 32px 30px 24px; border-radius: 28px; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.7); animation: pageIn .7s var(--ease-out) both; }
.auth__card .brand { padding: 0 0 18px; }
.auth h1 { font-size: 30px; margin-bottom: 6px; }
.auth__lead { margin: 0 0 18px; color: var(--muted); line-height: 1.5; }
.auth__err { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: hsl(350 90% 96%); color: hsl(350 60% 36%); font-size: 13.5px; }
.auth__hint { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }
.auth__foot { margin: 20px 0 0; font-size: 11.5px; color: var(--faint); text-align: center; }
.auth .fld input { height: 46px; font-size: 15px; }

/* ------------------------------------------------------------------ ecrane mai mici */
@media (max-width: 1280px) {
  .kpis, .ctiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cgrid { grid-template-columns: minmax(0, 1fr) 340px; }
  .ctable__h, .crow { grid-template-columns: minmax(180px, 2fr) 150px minmax(120px, 1.3fr) 84px 112px 92px 96px; }
  .crow__own, .ctable__h > span:last-child { display: none; }
}
@media (max-width: 1100px) {
  .cgrid { grid-template-columns: minmax(0, 1fr); }
  .cgrid__side { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .card--goal { grid-column: 1 / -1; }
  .tlist { --cols: 34px minmax(0, 1fr) 160px 116px 96px 40px; }
  .tlist--client { --cols: 34px minmax(0, 1fr) 40px 92px 34px; }
  .prio > span { display: none; }
  .ctable__h { display: none; }
  .crow { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .crow__svc, .crow__num, .crow__next, .crow__tasks { grid-column: 1 / -1; }
  .crow__st { justify-content: flex-end; }
  .crow__own { display: none; }
  .crow__next, .crow__tasks { display: flex; gap: 8px; align-items: baseline; }
  .setgrid { grid-template-columns: minmax(0, 1fr); }
  .steps__h { display: none; }
  .steps__r { grid-template-columns: 64px minmax(0, 1fr) 34px; }
  .steps__r > :nth-child(3), .steps__r > :nth-child(4), .steps__r > :nth-child(5) { grid-column: 2 / 3; }
  .steps__r > :last-child { grid-row: 1; grid-column: 3; }
  .steps__r { padding: 6px 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 900px) {
  :root { --side-w: 0px; }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; inset: 0 auto 0 0; z-index: 70; width: min(300px, 86vw); height: 100%; background: #fff; transform: translateX(-102%); transition: transform .4s var(--ease-out); box-shadow: var(--shadow-lg); }
  .side.is-open { transform: none; }
  .scrim { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(11,16,58,.28); opacity: 0; pointer-events: none; transition: opacity .3s; }
  .side.is-open + .scrim { opacity: 1; pointer-events: auto; }
  .top { padding: 0 16px; gap: 8px; }
  .top .top__menu { display: inline-grid; }
  .live { display: none; }
  .search kbd { display: none; }
  .page { padding: 18px 16px 90px; }
  .thead { display: none; }
  .trow { grid-template-columns: 30px minmax(0, 1fr) auto auto; grid-template-areas: "st main main main" "st client who due"; gap: 2px 6px; padding: 8px 10px 8px 8px; align-items: center; }
  .trow .st { grid-area: st; align-self: start; margin-top: 2px; margin-left: 2px; }
  .trow__main { grid-area: main; flex-wrap: wrap; row-gap: 4px; }
  .trow__title { white-space: normal; overflow: visible; line-height: 1.35; }
  .trow__client { grid-area: client; }
  .tlist--client .trow { grid-template-areas: "st main main main" "st . who due"; }
  .trow .who { grid-area: who; }
  .trow .due { grid-area: due; }
  .trow .prio { display: none; }
  .who__n { display: none; }
  .cell { height: 28px; padding: 0 6px; font-size: 12.5px; }
  .qadd { grid-template-columns: 30px minmax(0, 1fr) auto; padding: 6px 10px 8px 8px; }
  .qadd select { display: none; }
  .qadd__go { opacity: 1; }
  .grp__empty { padding-left: 46px; }
  .cgrid__side { grid-template-columns: minmax(0, 1fr); }
  .filters { margin-left: 0; width: 100%; }
  .pick { flex: 1; min-width: 0; }
  .pick select { max-width: none; width: 100%; }
}
@media (max-width: 560px) {
  .kpis, .ctiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi { padding: 10px 12px; }
  .kpi b { font-size: 22px; }
  .top .btn--primary span { display: none; }
  .top .btn--primary { width: 36px; padding: 0; }
  .ph { align-items: flex-start; flex-direction: column; }
  .chead { padding: 16px; }
  .plate--lg { width: 48px; height: 48px; font-size: 17px; border-radius: 14px; }
  .grid2, .grid3 { grid-template-columns: minmax(0, 1fr); }
  .svcrow { grid-template-columns: minmax(0, 1fr) 90px; }
  .kpiform__h { display: none; }
  .kpiform__r { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kpiform__r input:first-child { grid-column: 1 / -1; }
  .fields { grid-template-columns: 112px minmax(0, 1fr); }
  .dw__body { padding: 16px 16px 40px; }
  .dnav__label { display: none; }
  .log--table li { grid-template-columns: minmax(0, 1fr) auto; }
  .log--table li > :nth-child(n+3) { grid-column: 1 / -1; }
  .dl { grid-template-columns: 104px minmax(0, 1fr); }
  .linkbox__row { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}