/* ==========================================================================
   Sorat AI Studio — dashboard styles (layout and components from the VOYARX
   dashboard, re-tinted to Sorat's ink and teal). Vanilla CSS, no dependencies.
   ========================================================================== */

:root, :root[data-theme="dark"] {
  --bg: #061217; --bg-2: #0A1A20; --bg-3: #0F2229; --bg-4: #152B33; --bg-5: #1D363F;
  --tx: #E9F0F2; --tx-2: #C6D3D8; --mut: #7E929A; --mut-2: #52666E;
  --line: rgba(233,240,242,.08); --line-2: rgba(233,240,242,.14); --line-3: rgba(233,240,242,.22);
  --gold: #6FA8BA; --gold-2: #A3CEDB; --gold-3: #3D6B7A; --gold-soft: rgba(111,168,186,.12); --gold-soft-2: rgba(111,168,186,.2);
  --on-gold: #061217;
  --ok: #5CC198; --warn: #F5BC6A; --bad: #F0858A; --info: #7FAEF4; --violet: #A99BE0;
  --ok-s: rgba(92,193,152,.12); --warn-s: rgba(245,188,106,.12); --bad-s: rgba(240,133,138,.12); --info-s: rgba(127,174,244,.12); --violet-s: rgba(169,155,224,.13); --mute-s: rgba(233,240,242,.06);
  --c1: #5FA3B6; --c2: #F5BC6A; --c3: #F0858A;
  --card: linear-gradient(180deg, rgba(233,240,242,.025), rgba(233,240,242,0) 60%), var(--bg-2);
  --shadow: 0 1px 0 rgba(233,240,242,.04) inset, 0 12px 32px -18px rgba(0,0,0,.6);
  --shadow-lg: 0 30px 80px -24px rgba(0,0,0,.75), 0 0 0 1px var(--line-2);
  --r: 16px; --r-sm: 11px; --r-xs: 8px;
  --sb-w: 264px; --sb-wc: 76px; --tb-h: 64px;
  --f-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-serif: "Inter", ui-sans-serif, system-ui, sans-serif;
  --f-ar: "IBM Plex Sans Arabic", "Segoe UI", sans-serif;
  --f-ar-d: "IBM Plex Sans Arabic", sans-serif;
  --f-mark: "Inter", sans-serif;
  --f-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2,.7,.2,1);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #F4F6F7; --bg-2: #FFFFFF; --bg-3: #EEF2F3; --bg-4: #E3E9EB; --bg-5: #D3DDE0;
  --tx: #07151B; --tx-2: #1F3C47; --mut: #5B6B73; --mut-2: #8A979D;
  --line: rgba(7,21,27,.08); --line-2: rgba(7,21,27,.13); --line-3: rgba(7,21,27,.22);
  --gold: #3D6B7A; --gold-2: #2B5360; --gold-3: #9DBDC7; --gold-soft: rgba(61,107,122,.1); --gold-soft-2: rgba(61,107,122,.18);
  --on-gold: #FFFFFF;
  --ok: #2E9467; --warn: #B7801F; --bad: #C2474D; --info: #3E6FC4; --violet: #6E5AA6;
  --ok-s: rgba(46,148,103,.1); --warn-s: rgba(183,128,31,.1); --bad-s: rgba(194,71,77,.1); --info-s: rgba(62,111,196,.1); --violet-s: rgba(110,90,166,.1); --mute-s: rgba(7,21,27,.05);
  --c1: #3D6B7A; --c2: #E0A23C; --c3: #E06A70;
  --card: var(--bg-2);
  --shadow: 0 1px 2px rgba(7,21,27,.04), 0 10px 30px -20px rgba(7,21,27,.18);
  --shadow-lg: 0 30px 80px -30px rgba(7,21,27,.35), 0 0 0 1px var(--line-2);
  color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--tx); font: 400 14px/1.55 var(--f-ui); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body.adm::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
:root[data-theme="light"] body.adm::before { opacity: .05; mix-blend-mode: multiply; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--gold-2); }
:root[data-theme="light"] a:hover { color: var(--gold); }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -.01em; }
img { max-width: 100%; }
button { font: inherit; color: inherit; }
::selection { background: var(--gold-soft-2); color: var(--tx); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--gold); color: var(--on-gold); padding: 8px 12px; border-radius: 8px; }
.skip:focus { left: 8px; }
* { scrollbar-width: thin; scrollbar-color: var(--bg-5) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--bg-5); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.serif { font-family: var(--f-serif); font-weight: 600; letter-spacing: -.02em; }
.muted { color: var(--mut); }
.small { font-size: 12.5px; }
.strong { font-weight: 600; }
.gold { color: var(--gold); }
.t-ok { color: var(--ok) !important; } .t-bad { color: var(--bad) !important; } .t-warn { color: var(--warn) !important; }
.nowrap { white-space: nowrap; }
.ellipsis { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r { text-align: right !important; } .c { text-align: center !important; }
.pad { padding: 18px 0; } .pad-x { padding-left: 22px !important; padding-right: 22px !important; }
.ar, .ar-inline { font-family: var(--f-ar); }
.ar { direction: rtl; text-align: right; }
.pre { white-space: normal; color: var(--tx-2); }
.wordmark { font-family: var(--f-mark); letter-spacing: .34em; font-size: 15px; font-weight: 400; }
code.code { font: 500 12px/1 var(--f-mono); background: var(--bg-3); border: 1px solid var(--line); padding: 3px 6px; border-radius: 6px; color: var(--tx-2); }
kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; font: 500 11px/1 var(--f-ui); color: var(--mut); background: var(--bg-3); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; }
.link { background: none; border: 0; padding: 0; color: var(--gold); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.only-mobile { display: none !important; }
.ic { flex: none; }

/* ---------- vx mark ---------- */
.vx-mark { display: block; color: var(--tx); }

/* ---------- app shell ---------- */
.app { position: relative; z-index: 1; min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sb-w); display: flex; flex-direction: column; background: var(--bg); border-right: 1px solid var(--line); z-index: 40; transition: width .28s var(--ease), transform .3s var(--ease); }
.main { margin-left: var(--sb-w); min-width: 0; transition: margin .28s var(--ease); }
.sb-head { height: var(--tb-h); display: flex; align-items: center; justify-content: space-between; padding: 0 14px 0 20px; flex: none; }
.sb-brand { display: flex; align-items: center; gap: 12px; color: var(--tx); }
.sb-brand:hover { color: var(--tx); }
.sb-mark { width: 24px; height: 27px; }
.sb-brand .wordmark { font-size: 15px; transition: opacity .2s; white-space: nowrap; }
.sb-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px 12px 16px; }
.sb-group { margin-top: 14px; }
.sb-label { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mut-2); padding: 0 10px 6px; white-space: nowrap; transition: opacity .2s; }
.sb-link { position: relative; display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 10px; border-radius: 10px; color: var(--mut); font-weight: 500; font-size: 13.5px; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; list-style: none; }
.sb-link::-webkit-details-marker { display: none; }
.sb-link > span { flex: 1; overflow: hidden; text-overflow: ellipsis; transition: opacity .2s; }
.sb-link:hover { background: var(--bg-3); color: var(--tx); }
.sb-link.is-active { color: var(--tx); background: linear-gradient(90deg, var(--gold-soft), transparent 90%); }
.sb-link.is-active::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.sb-link.is-active > .ic:first-child { color: var(--gold); }
.sb-badge { font-style: normal; font-size: 11px; font-weight: 600; min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 20px; background: var(--gold); color: var(--on-gold); }
.sb-sub > summary .ic:last-child { transition: transform .2s; opacity: .6; }
.sb-sub[open] > summary .ic:last-child { transform: rotate(180deg); }
.sb-sub > summary.is-active::before { display: none; }
.sb-children { position: relative; margin: 2px 0 4px 19px; padding-left: 12px; border-left: 1px solid var(--line); }
.sb-child { height: 31px; font-size: 13px; padding-left: 10px; }
.sb-child.is-active { background: none; color: var(--gold-2); }
.sb-child.is-active::before { left: -13px; top: 8px; bottom: 8px; width: 1px; box-shadow: none; }
.sb-foot { padding: 12px; border-top: 1px solid var(--line); flex: none; }
.site-status { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); color: var(--tx-2); }
.site-status > span { flex: 1; display: flex; flex-direction: column; line-height: 1.25; white-space: nowrap; overflow: hidden; }
.site-status b { font-size: 12.5px; font-weight: 600; }
.site-status small { font-size: 11.5px; color: var(--mut); }
.site-status .ic { color: var(--mut); }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; box-shadow: 0 0 0 0 rgba(127,183,154,.6); animation: pulse 2.4s infinite; }
.site-status.is-maint .pulse-dot { background: var(--warn); animation: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(127,183,154,.5); } 70% { box-shadow: 0 0 0 8px rgba(127,183,154,0); } 100% { box-shadow: 0 0 0 0 rgba(127,183,154,0); } }

/* collapsed sidebar (desktop) */
@media (min-width: 1025px) {
  .sb-collapsed .sidebar { width: var(--sb-wc); }
  .sb-collapsed .main { margin-left: var(--sb-wc); }
  .sb-collapsed .sb-brand .wordmark, .sb-collapsed .sb-label, .sb-collapsed .sb-link > span, .sb-collapsed .site-status > span, .sb-collapsed .site-status > .ic, .sb-collapsed .sb-sub > summary .ic:last-child { opacity: 0; pointer-events: none; width: 0; }
  .sb-collapsed .sb-head { padding: 0 12px; flex-direction: column; justify-content: center; gap: 4px; height: auto; padding-top: 14px; padding-bottom: 6px; }
  .sb-collapsed .sb-label { height: 8px; padding: 0; overflow: hidden; }
  .sb-collapsed .sb-link { justify-content: center; padding: 0; gap: 0; }
  .sb-collapsed .sb-badge { position: absolute; top: 2px; right: 6px; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }
  .sb-collapsed .sb-children { display: none; }
  .sb-collapsed .site-status { justify-content: center; padding: 12px 0; }
  .sb-collapsed .sb-toggle { transform: scaleX(-1); }
}

/* ---------- top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 30; height: var(--tb-h); display: flex; align-items: center; gap: 14px; padding: 0 28px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--line); }
.search { position: relative; flex: 1; max-width: 520px; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px 0 13px; border-radius: 11px; background: var(--bg-2); border: 1px solid var(--line); color: var(--mut); transition: border-color .15s, box-shadow .15s; }
.search:focus-within { border-color: var(--line-3); box-shadow: 0 0 0 4px var(--gold-soft); }
.search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--tx); font: inherit; height: 100%; }
.search input::placeholder { color: var(--mut-2); }
.search input::-webkit-search-cancel-button { display: none; }
.search-pop { position: absolute; top: calc(100% + 8px); left: 0; right: 0; max-height: min(70vh, 540px); overflow: auto; padding: 8px; border-radius: 14px; background: var(--bg-2); box-shadow: var(--shadow-lg); z-index: 50; }
.sp-group { padding: 6px 0; }
.sp-group + .sp-group { border-top: 1px solid var(--line); }
.sp-label { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mut-2); padding: 6px 10px; }
.sp-item { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 9px; color: var(--tx); line-height: 1.35; }
.sp-item small { color: var(--mut); font-size: 12px; }
.sp-item:hover, .sp-item.is-cur { background: var(--bg-3); color: var(--tx); }
.sp-item.is-cur { box-shadow: inset 2px 0 0 var(--gold); }
.sp-empty { padding: 18px; text-align: center; color: var(--mut); }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; border: 1px solid transparent; background: none; color: var(--mut); cursor: pointer; transition: background .15s, color .15s, border-color .15s; flex: none; }
.icon-btn:hover { background: var(--bg-3); color: var(--tx); border-color: var(--line); }
.icon-btn.sm { width: 30px; height: 30px; border-radius: 8px; }
.icon-btn.danger:hover { color: var(--bad); background: var(--bad-s); }
.bell em { position: absolute; top: 5px; right: 5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 10px; background: var(--gold); color: var(--on-gold); font: 700 10px/16px var(--f-ui); font-style: normal; box-shadow: 0 0 0 2px var(--bg); }
.avatar-btn { border: 0; background: none; padding: 0; cursor: pointer; border-radius: 50%; margin-left: 4px; }
.avatar-btn .avatar { width: 34px; height: 34px; box-shadow: 0 0 0 1px var(--line-2), 0 0 0 3px var(--bg); transition: box-shadow .15s; }
.avatar-btn:hover .avatar { box-shadow: 0 0 0 1px var(--gold), 0 0 0 3px var(--bg); }
[data-theme-toggle] .ic-light { display: none; }
:root[data-theme="light"] [data-theme-toggle] .ic-light { display: block; }
:root[data-theme="light"] [data-theme-toggle] .ic-dark { display: none; }
[data-theme-toggle] span { display: grid; }

/* dropdowns */
.dd { position: relative; }
.dd-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 220px; padding: 6px; border-radius: 14px; background: var(--bg-2); box-shadow: var(--shadow-lg); z-index: 60; opacity: 0; visibility: hidden; transform: translateY(-4px) scale(.98); transform-origin: top right; transition: opacity .14s, transform .14s var(--ease), visibility .14s; }
.dd-right { left: auto; right: 0; }
.dd.is-open > .dd-menu { opacity: 1; visibility: visible; transform: none; }
.dd-menu a, .dd-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 9px; border: 0; background: none; color: var(--tx-2); font-size: 13.5px; text-align: left; cursor: pointer; white-space: nowrap; }
.dd-menu a:hover, .dd-menu button:hover { background: var(--bg-3); color: var(--tx); }
.dd-menu a .ic:last-child:not(:first-child) { margin-left: auto; color: var(--mut-2); }
.dd-menu .ic { color: var(--mut); }
.dd-menu .danger:hover { color: var(--bad); background: var(--bad-s); }
.dd-menu .danger:hover .ic { color: var(--bad); }
.dd-menu form { margin: 0; }
.dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; min-width: 380px; }
.dd-wide { width: 360px; }
.dd-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.dd-head a { width: auto; padding: 0; font-size: 12.5px; color: var(--gold); }
.dd-head a:hover { background: none; }
.dd-lead { align-items: flex-start !important; }
.dd-lead > span { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.dd-lead small { color: var(--mut); overflow: hidden; text-overflow: ellipsis; }
.dd-lead time { font-size: 11.5px; color: var(--mut-2); }
.dd-empty { padding: 18px 10px; text-align: center; color: var(--mut); font-size: 13px; }
.dd-user { padding: 10px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.dd-user small { color: var(--mut); margin-bottom: 6px; }

/* ---------- page ---------- */
.page { padding: 30px 32px 64px; max-width: 1480px; margin: 0 auto; }
.page-wide { max-width: none; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; }
.ph-text { min-width: 0; }
.page-head h1 { font: 600 38px/1.08 var(--f-serif); letter-spacing: -.01em; color: var(--tx); }
.page-head h1 em { font-style: italic; color: var(--gold); }
.ph-sub { margin-top: 8px; color: var(--mut); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ph-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--mut); margin-bottom: 8px; }
.crumbs a:hover { color: var(--tx); }
.crumbs .ic { opacity: .5; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--tx); font: 500 13.5px/1 var(--f-ui); cursor: pointer; white-space: nowrap; text-decoration: none; transition: background .15s, border-color .15s, color .15s, transform .08s, box-shadow .15s; user-select: none; }
.btn:hover { background: var(--bg-3); border-color: var(--line-3); color: var(--tx); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary { background: linear-gradient(180deg, var(--gold-2), var(--gold) 55%); border-color: transparent; color: var(--on-gold); font-weight: 600; box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 8px 20px -10px rgba(111,168,186,.6); }
:root[data-theme="light"] .btn-primary { background: linear-gradient(180deg, #5C8A99, var(--gold) 60%); }
.btn-primary:hover { background: linear-gradient(180deg, #EFDDB5, var(--gold-2) 60%); color: var(--on-gold); border-color: transparent; box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 10px 26px -10px rgba(111,168,186,.8); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--bg-3); }
.btn-danger { color: var(--bad); }
.btn-danger:hover { color: var(--bad); background: var(--bad-s); border-color: rgba(217,119,107,.3); }
.btn-danger-solid { background: var(--bad); border-color: var(--bad); color: #fff; font-weight: 600; }
.btn-danger-solid:hover { background: #E38A7F; border-color: #E38A7F; color: #fff; }
.btn-wa { background: rgba(37,211,102,.1); border-color: rgba(37,211,102,.28); color: #7FD7A1; }
.btn-wa:hover { background: rgba(37,211,102,.18); border-color: rgba(37,211,102,.45); color: #A4E8BD; }
:root[data-theme="light"] .btn-wa { color: #1C8A48; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 9px; }
.btn-xs { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 8px; gap: 6px; }
.btn-lg { height: 48px; padding: 0 22px; font-size: 15px; border-radius: 13px; }
.btn-block { width: 100%; }
.btn-block + .btn-block { margin-top: 8px; }
.btn-plus { padding: 0 12px; }
.btn-row { display: flex; gap: 8px; }
.btn-row .grow { flex: 1; }
.inline-form { display: inline-flex; margin: 0; }

/* ---------- cards & grids ---------- */
.card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow); min-width: 0; }
.card.flush { padding: 0; overflow: hidden; }
.card.flush > .card-head { padding: 20px 22px 14px; margin: 0; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.card-head h2 { font: 600 15px/1.3 var(--f-ui); letter-spacing: -.005em; }
.card-head p { color: var(--mut); font-size: 12.5px; margin-top: 3px; }
.card-head form select { height: 32px; font-size: 13px; }
.stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.grid { display: grid; gap: 18px; margin-bottom: 18px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-3-1 { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); }
.g-2-1 { grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); }
.grid > .stack { gap: 18px; }
.divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; color: var(--mut); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpis-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpi { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; overflow: hidden; }
.kpi.span-2 { grid-column: span 2; }
.kpi-head { display: flex; align-items: center; gap: 9px; color: var(--mut); font-size: 12.5px; font-weight: 500; margin-bottom: 4px; }
.kpi-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--bg-3); border: 1px solid var(--line); color: var(--tx-2); }
.kpi-ic.gold { color: var(--gold); background: var(--gold-soft); border-color: transparent; }
.kpi-link { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--mut); }
.kpi-link:hover { color: var(--gold); }
.big { font-size: 30px; line-height: 1.1; font-weight: 500; letter-spacing: -.02em; color: var(--tx); }
.big.serif { font-size: 30px; letter-spacing: -.01em; }
.big .money .cur { font: 500 13px/1 var(--f-ui); color: var(--mut); letter-spacing: .04em; vertical-align: 5px; margin-right: 2px; }
.kpi-foot { font-size: 12.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kpi-note { font-size: 12.5px; color: var(--mut); display: inline-flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 2px; }
.kpi-note:hover { color: var(--tx); }
.kpi-trio { display: grid; grid-template-columns: repeat(3, 1fr); }
.kpi-trio > div { display: flex; flex-direction: column; gap: 4px; padding-right: 16px; }
.kpi-trio > div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.kpi-trio small { color: var(--mut); font-size: 12px; }
.kpi-trio .delta + .muted { display: none; }
.spark { width: 100%; height: 30px; margin-top: auto; opacity: .9; }
.delta { align-self: flex-start; display: inline-flex; align-items: center; gap: 3px; font-weight: 600; font-size: 12px; padding: 2px 7px 2px 5px; border-radius: 20px; }
.delta-up { color: var(--ok); background: var(--ok-s); }
.delta-down { color: var(--bad); background: var(--bad-s); }
.delta-flat { color: var(--mut); background: var(--mute-s); }
.fin-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fin-rows > div { display: flex; flex-direction: column; }
.fin-rows small { color: var(--mut); font-size: 11.5px; }
.fin-rows b { font-size: 15px; font-weight: 600; }
.fin-rows .money .cur { font-size: 11px; color: var(--mut); font-weight: 500; }
.fin-bars { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 2px; }
.fin-bars span { height: 5px; border-radius: 5px; min-width: 3px; }
.fb-rev { background: var(--ok); } .fb-exp { background: var(--bad); opacity: .8; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.dot-info { background: var(--info); } .dot-ok { background: var(--ok); } .dot-bad { background: var(--bad); } .dot-warn { background: var(--warn); }
.money .cur { color: var(--mut); font-weight: 500; font-size: .85em; }

/* ---------- charts ---------- */
.legend { display: flex; gap: 18px; font-size: 12.5px; color: var(--mut); margin: -6px 0 12px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 14px; height: 3px; border-radius: 3px; }
.chart { position: relative; display: grid; grid-template-columns: 40px 1fr; grid-template-rows: 1fr 24px; }
.chart-y { position: relative; grid-row: 1; }
.chart-y span { position: absolute; right: 10px; transform: translateY(50%); font-size: 11px; color: var(--mut-2); font-variant-numeric: tabular-nums; }
.chart-plot { position: relative; grid-row: 1; grid-column: 2; cursor: crosshair; }
.chart-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart-svg .grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 2 4; }
.chart-svg .axis { stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-x { position: relative; grid-column: 2; grid-row: 2; }
.chart-x span { position: absolute; top: 8px; transform: translateX(-50%); font-size: 11px; color: var(--mut-2); white-space: nowrap; }
.chart-x span:first-child { transform: none; }
.chart-x span:last-child { transform: translateX(-100%); }
.chart-x span.is-hidden { visibility: hidden; }
.chart-cross { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-3); pointer-events: none; opacity: 0; transition: opacity .12s; }
.chart-dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 2px solid var(--bg-2); pointer-events: none; opacity: 0; transition: opacity .12s; }
.chart-tip { position: absolute; top: 6px; pointer-events: none; opacity: 0; min-width: 150px; padding: 10px 12px; border-radius: 11px; background: var(--bg-4); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); font-size: 12.5px; z-index: 5; transition: opacity .12s; }
.chart-tip b { display: block; font-size: 11.5px; color: var(--mut); font-weight: 500; margin-bottom: 6px; }
.chart-tip div { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.chart-tip div span { display: inline-flex; align-items: center; gap: 7px; color: var(--tx-2); }
.chart-tip div i { width: 8px; height: 8px; border-radius: 2px; }
.chart-tip div em { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
.chart.is-hover .chart-cross, .chart.is-hover .chart-tip, .chart.is-hover .chart-dot { opacity: 1; }
.chart-empty { position: relative; }
.chart-empty .chart { opacity: .35; filter: grayscale(.4); }
.chart-empty > p { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: var(--bg-3); border: 1px solid var(--line-2); color: var(--tx-2); font-size: 13px; white-space: nowrap; }
.donut { display: flex; align-items: center; gap: 22px; }
.donut-ring { position: relative; width: 150px; height: 150px; flex: none; }
.donut-svg { width: 100%; height: 100%; }
.donut-svg circle { transition: stroke-width .15s; }
.donut-svg circle[data-tip] { cursor: pointer; }
.donut-svg circle[data-tip]:hover { stroke-width: 11; }
.donut-track { fill: none; stroke: var(--bg-4); stroke-width: 9; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.donut-center b { font: 600 28px/1 var(--f-serif); }
.donut-center span { font-size: 11px; color: var(--mut); text-transform: uppercase; letter-spacing: .12em; margin-top: 3px; }
.donut-legend { list-style: none; padding: 0; margin: 0; flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.donut-legend li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--tx-2); }
.donut-legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.donut-legend span { flex: 1; }
.split-bar-wrap { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.split-head { display: flex; justify-content: space-between; font-size: 13px; font-weight: 500; margin-bottom: 10px; }
.split-bar { display: flex; gap: 2px; height: 8px; border-radius: 8px; overflow: hidden; background: var(--bg-4); }
.split-bar span { height: 100%; transition: width .6s var(--ease); }
.split-legend { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12.5px; color: var(--tx-2); }
.split-legend span { display: inline-flex; align-items: center; gap: 7px; }
.split-legend i { width: 8px; height: 8px; border-radius: 2px; }
.barlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.barlist li { position: relative; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; border-radius: 9px; font-size: 13px; overflow: hidden; }
.barlist .bar { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--gold-soft-2), var(--gold-soft)); border-radius: 9px; transform-origin: left; animation: grow .7s var(--ease) both; }
.barlist .bl { position: relative; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tx-2); }
.barlist b { position: relative; font-weight: 600; }
@keyframes grow { from { transform: scaleX(0); } }
.stages { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.stages li { display: grid; grid-template-columns: 104px 1fr 28px 44px; align-items: center; gap: 10px; font-size: 13px; }
.st-bar { height: 6px; border-radius: 6px; background: var(--bg-4); overflow: hidden; }
.st-bar i { display: block; height: 100%; border-radius: 6px; background: var(--mut); min-width: 2px; }
.st-new { background: var(--info) !important; } .st-contacted { background: var(--gold) !important; } .st-qualified { background: var(--violet) !important; } .st-proposal { background: var(--warn) !important; } .st-won { background: var(--ok) !important; } .st-lost { background: var(--mut-2) !important; }
.stages b { text-align: right; } .stages .muted { text-align: right; }
.hours { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; height: 150px; align-items: end; }
.hours span { height: 100%; display: flex; align-items: flex-end; cursor: default; }
.hours i { display: block; width: 100%; height: calc(var(--v) * 100%); min-height: 2px; border-radius: 4px 4px 1px 1px; background: var(--c1); opacity: calc(.35 + var(--v) * .65); transition: opacity .15s; }
.hours span:hover i { opacity: 1; background: var(--gold-2); }
.hours-x { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: var(--mut-2); }
.float-tip { position: fixed; z-index: 90; pointer-events: none; padding: 6px 10px; border-radius: 8px; background: var(--bg-4); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); font-size: 12px; color: var(--tx); white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); }

/* ---------- lists ---------- */
.rows { display: flex; flex-direction: column; }
.row-item { display: flex; align-items: center; gap: 12px; padding: 11px 10px; margin: 0 -10px; border-radius: 11px; color: var(--tx); transition: background .12s; }
a.row-item:hover { background: var(--bg-3); color: var(--tx); }
.row-item + .row-item { border-top: 1px solid var(--line); }
a.row-item:hover + .row-item, .row-item:has(+ a.row-item:hover) { border-color: transparent; }
.ri-main { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.ri-main b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ri-main small { color: var(--mut); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ri-meta { color: var(--mut); font-size: 12.5px; white-space: nowrap; }
.ri-time { color: var(--mut-2); font-size: 12px; white-space: nowrap; min-width: 52px; text-align: right; }
.ri-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--bg-3); color: var(--mut); flex: none; }
.w-80 { width: 80px; }
.avatar { --h: 30; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none; font: 600 12px/1 var(--f-ui); letter-spacing: .02em; color: hsl(var(--h) 40% 80%); background: radial-gradient(120% 120% at 30% 20%, hsl(var(--h) 22% 30%), hsl(var(--h) 18% 16%)); box-shadow: inset 0 0 0 1px hsl(var(--h) 30% 40% / .35); }
:root[data-theme="light"] .avatar { color: hsl(var(--h) 35% 30%); background: radial-gradient(120% 120% at 30% 20%, hsl(var(--h) 40% 92%), hsl(var(--h) 30% 84%)); }
.avatar.sm { width: 26px; height: 26px; font-size: 10.5px; }
.avatar.lg { width: 52px; height: 52px; font-size: 17px; }
.avatar.sq { border-radius: 10px; }
.avatar.lg.sq { border-radius: 14px; }
.deadlines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.deadlines a { display: flex; gap: 14px; align-items: center; padding: 9px 10px; margin: 0 -10px; border-radius: 11px; }
.deadlines a:hover { background: var(--bg-3); color: var(--tx); }
.dl-date { width: 46px; height: 50px; border-radius: 11px; border: 1px solid var(--line-2); display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; line-height: 1; }
.dl-date b { font: 600 21px/1 var(--f-serif); }
.dl-date small { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--mut); margin-top: 3px; }
.dl-date.soon { border-color: rgba(217,176,97,.5); color: var(--warn); }
.dl-date.late { border-color: rgba(217,119,107,.5); color: var(--bad); background: var(--bad-s); }
.dl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dl-main b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-main small { color: var(--mut); font-size: 12px; }
.progress { height: 5px; border-radius: 5px; background: var(--bg-4); overflow: hidden; }
.progress i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--gold-3), var(--gold)); transition: width .5s var(--ease); }
.progress.sm { height: 3px; margin-top: 3px; }
.progress.lg { height: 8px; flex: 1; }
.big-progress { display: flex; align-items: center; gap: 14px; margin: -4px 0 16px; }
.big-progress b { font: 600 22px/1 var(--f-serif); min-width: 48px; text-align: right; }
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.timeline li { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; font-size: 13px; }
.timeline li + li:not(.tl-day) { border-top: 1px solid var(--line); }
.timeline p { flex: 1; color: var(--tx-2); line-height: 1.45; padding-top: 3px; }
.timeline p b { color: var(--tx); font-weight: 600; }
.timeline time { color: var(--mut-2); font-size: 12px; white-space: nowrap; padding-top: 4px; }
.tl-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-top: 8px; flex: none; box-shadow: 0 0 0 4px var(--gold-soft); }
.tl-day { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mut-2); padding: 18px 0 6px !important; border: 0 !important; }
.tl-day:first-child { padding-top: 0 !important; }
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quick a { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; background: var(--bg-3); border: 1px solid var(--line); font-size: 13px; font-weight: 500; color: var(--tx-2); transition: border-color .15s, background .15s, transform .15s; }
.quick a .ic { color: var(--gold); }
.quick a:hover { border-color: var(--gold-soft-2); background: var(--bg-4); color: var(--tx); transform: translateY(-1px); }

/* ---------- badges, tags, chips ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 8px; border-radius: 22px; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: var(--mute-s); color: var(--mut); letter-spacing: .01em; }
.badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-info { background: var(--info-s); color: var(--info); }
.badge-gold { background: var(--gold-soft); color: var(--gold); }
.badge-violet { background: var(--violet-s); color: var(--violet); }
.badge-warn { background: var(--warn-s); color: var(--warn); }
.badge-ok { background: var(--ok-s); color: var(--ok); }
.badge-bad { background: var(--bad-s); color: var(--bad); }
.tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 500; background: var(--bg-3); border: 1px solid var(--line); color: var(--tx-2); white-space: nowrap; }
.tag-lg { height: 28px; padding: 0 11px; font-size: 12.5px; border-radius: 8px; }
.tag-xs { height: 18px; padding: 0 5px; font-size: 10px; letter-spacing: .04em; }
.tags { display: flex; flex-wrap: wrap; gap: 5px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chips-tight { margin-bottom: 18px; gap: 6px; }
.chip { --cc: var(--mut); display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 30px; border: 1px solid var(--line-2); background: transparent; color: var(--tx-2); font-size: 13px; font-weight: 500; cursor: pointer; transition: all .15s; }
.chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--cc); }
.chip b { font-weight: 600; font-size: 11.5px; color: var(--mut); background: var(--bg-3); border-radius: 10px; padding: 1px 7px; }
.chip:hover { border-color: var(--line-3); color: var(--tx); }
.chip.is-on { background: var(--tx); color: var(--bg); border-color: var(--tx); }
.chip.is-on b { background: rgba(0,0,0,.12); color: inherit; }
:root[data-theme="light"] .chip.is-on b { background: rgba(255,255,255,.18); }
.chip-new { --cc: var(--info); } .chip-contacted, .chip-in_progress { --cc: var(--gold); } .chip-qualified, .chip-review { --cc: var(--violet); } .chip-proposal, .chip-warn, .chip-sent { --cc: var(--warn); } .chip-won, .chip-paid, .chip-accepted, .chip-done { --cc: var(--ok); } .chip-lost, .chip-draft, .chip-void, .chip-expired { --cc: var(--mut-2); } .chip-overdue, .chip-declined { --cc: var(--bad); }
.chip-sent { --cc: var(--info); }

/* ---------- toolbar ---------- */
.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.tb-search { display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 12px; flex: 1; max-width: 420px; min-width: 200px; border-radius: 11px; background: var(--bg-2); border: 1px solid var(--line); color: var(--mut); transition: border-color .15s, box-shadow .15s; }
.tb-search:focus-within { border-color: var(--line-3); box-shadow: 0 0 0 4px var(--gold-soft); }
.tb-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--tx); font: inherit; height: 100%; padding: 0; }
.tb-search.sm { height: 34px; min-width: 0; max-width: 260px; }
.tb-count { margin-left: auto; }
.tb-filter { display: flex; align-items: center; gap: 8px; color: var(--mut); }
.tb-filter select { height: 38px; min-width: 200px; }
.seg { display: inline-flex; padding: 3px; border-radius: 11px; background: var(--bg-2); border: 1px solid var(--line); gap: 2px; }
.seg a, .seg button, .seg label > span { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 8px; border: 0; background: none; color: var(--mut); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.seg a:hover, .seg button:hover, .seg label:hover > span { color: var(--tx); }
.seg .is-on, .seg input:checked + span { background: var(--bg-5); color: var(--tx); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 2px 6px -2px rgba(0,0,0,.4); }
:root[data-theme="light"] .seg .is-on, :root[data-theme="light"] .seg input:checked + span { background: var(--bg-2); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.seg label { display: flex; margin: 0; flex: 1; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg input:focus-visible + span { outline: 2px solid var(--gold); }
.seg-block { display: flex; width: 100%; }
.seg-block label > span { width: 100%; height: auto; min-height: 34px; padding: 6px 10px; flex-direction: column; gap: 1px; line-height: 1.2; }
.seg-block label > span small { font-size: 11px; color: var(--mut-2); font-weight: 500; }
.seg-sm a, .seg-sm button { height: 26px; font-size: 12px; padding: 0 10px; }
.hint { display: flex; align-items: center; gap: 8px; color: var(--mut); font-size: 13px; margin: 0 0 14px; flex-wrap: wrap; }
.hint.small { font-size: 12px; margin: 12px 0 0; }
.hint a { color: var(--gold); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.table th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mut-2); padding: 11px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; background: color-mix(in srgb, var(--bg-2) 60%, transparent); }
.table td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table th:first-child, .table td:first-child { padding-left: 22px; }
.table th:last-child, .table td:last-child { padding-right: 22px; }
.table-hover tbody tr { transition: background .12s; }
.table-hover tbody tr:hover { background: var(--bg-3); }
.table tr[data-href] { cursor: pointer; }
.table tr.is-off td:not(:last-child):not(.c) { opacity: .5; }
.table tr.row-late td:first-child { box-shadow: inset 2px 0 0 var(--bad); }
.table tr.is-selected { background: var(--gold-soft); }
.table tr.is-dragging { opacity: .5; background: var(--bg-3); }
.table tr.drop-before td { box-shadow: inset 0 2px 0 var(--gold); }
.table tr.drop-after td { box-shadow: inset 0 -2px 0 var(--gold); }
.row-actions { display: flex; justify-content: flex-end; align-items: center; gap: 2px; }
td.row-actions { display: table-cell; }
td.row-actions > * { vertical-align: middle; }
td.row-actions .dd { display: inline-block; }
.w-drag { width: 36px; padding-right: 0 !important; }
.drag { display: inline-grid; place-items: center; width: 24px; height: 28px; color: var(--mut-2); cursor: grab; border-radius: 6px; }
.drag:hover { color: var(--tx); background: var(--bg-4); }
.drag:active { cursor: grabbing; }
.cell-person, .cell-item { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--tx); }
.cell-person > span, .ci-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.cell-person b, .ci-text b { font-weight: 500; }
.cell-person small, .ci-text small { color: var(--mut); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; }
.thumb { --sw: transparent; position: relative; width: 44px; height: 44px; border-radius: 10px; flex: none; overflow: hidden; display: grid; place-items: center; background: var(--bg-3); border: 1px solid var(--line); color: var(--gold); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb[style]::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 2px var(--bg-2); }
.big-inline { font-size: 22px; line-height: 1; }
.mono-link { font-family: var(--f-mono); font-size: 12.5px; }
.flag-code { display: inline-grid; place-items: center; width: 26px; height: 18px; border-radius: 4px; background: var(--bg-4); font: 600 10px/1 var(--f-mono); color: var(--tx-2); margin-right: 10px; }
.star { background: none; border: 0; padding: 4px; cursor: pointer; color: var(--mut-2); border-radius: 8px; display: inline-grid; transition: color .15s, transform .15s; }
.star:hover { color: var(--gold); }
.star.is-on { color: var(--gold); }
.star.is-on svg { fill: var(--gold); }
.star:active { transform: scale(.85); }
.pager { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; border-top: 1px solid var(--line); }
.card:not(.flush) .pager { margin: 18px -22px -22px; }

/* ---------- switch ---------- */
.switch { position: relative; display: inline-flex; width: 38px; height: 22px; flex: none; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch i { position: absolute; inset: 0; border-radius: 22px; background: var(--bg-5); border: 1px solid var(--line-2); transition: background .2s, border-color .2s; }
.switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--tx-2); box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: transform .22s var(--ease), background .2s; }
.switch input:checked + i { background: var(--gold); border-color: var(--gold); }
.switch input:checked + i::after { transform: translateX(16px); background: #fff; }
.switch input:focus-visible + i { box-shadow: 0 0 0 3px var(--gold-soft-2); }
.switch.sm { width: 32px; height: 18px; }
.switch.sm i::after { width: 12px; height: 12px; }
.switch.sm input:checked + i::after { transform: translateX(14px); }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; cursor: pointer; border-bottom: 1px solid var(--line); }
.switch-row > span:first-child { display: flex; flex-direction: column; font-weight: 500; font-size: 13.5px; }
.switch-row:last-of-type { border-bottom: 0; }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; min-width: 0; }
.field > span:first-child, .flabel { font-size: 12.5px; font-weight: 500; color: var(--tx-2); display: flex; align-items: center; gap: 6px; }
.field em, .flabel em { font-style: normal; font-weight: 400; }
.req { color: var(--gold); font-style: normal; }
.help { display: block; color: var(--mut); font-size: 12px; font-weight: 400; line-height: 1.45; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], input[type=url], input[type=tel], input:not([type]), select, textarea {
  width: 100%; min-width: 0; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg-3); color: var(--tx); font: 400 14px/1.4 var(--f-ui); outline: none; transition: border-color .15s, box-shadow .15s, background .15s; }
.tb-search input, .search input, .alt-in, .note-title, .note-body { height: auto; border: 0; background: none; padding: 0; box-shadow: none !important; }
textarea { height: auto; padding: 10px 12px; line-height: 1.55; resize: vertical; min-height: 44px; }
input:hover, select:hover, textarea:hover { border-color: var(--line-3); }
input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); background: var(--bg-2); }
input::placeholder, textarea::placeholder { color: var(--mut-2); }
select { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%238C877E' stroke-width='1.6' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
input[type=date] { color-scheme: inherit; }
input[type=number] { -moz-appearance: textfield; }
input[type=number]::-webkit-inner-spin-button { opacity: .4; }
input[type=range] { width: 100%; accent-color: var(--gold); }
input[type=file] { font-size: 13px; color: var(--mut); }
input[type=file]::file-selector-button { height: 32px; margin-right: 10px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg-3); color: var(--tx); cursor: pointer; font: 500 12.5px var(--f-ui); }
textarea.ar, input.ar { font-family: var(--f-ar); font-size: 15px; }
.mono-in, .mono-area, .code-area { font-family: var(--f-mono) !important; font-size: 12.5px !important; }
.code-area { background: var(--bg) !important; line-height: 1.6; }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.form-layout > .card, .form-layout > .stack { min-width: 0; }
.sticky-side { position: sticky; top: calc(var(--tb-h) + 18px); }
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.check { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); cursor: pointer; font-size: 13px; transition: border-color .15s, background .15s; }
.check:hover { border-color: var(--line-3); }
.check:has(input:checked) { border-color: var(--gold); background: var(--gold-soft); }
.check input { accent-color: var(--gold); width: 16px; height: 16px; }
.alert { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-radius: 11px; font-size: 13px; margin-bottom: 16px; border: 1px solid transparent; line-height: 1.5; }
.alert .ic { margin-top: 2px; }
.alert-error { background: var(--bad-s); color: var(--bad); border-color: rgba(217,119,107,.25); }
.alert-success { background: var(--ok-s); color: var(--ok); border-color: rgba(127,183,154,.25); }
.alert-info { background: var(--info-s); color: var(--tx-2); border-color: rgba(127,163,201,.22); }
.alert-info .ic { color: var(--info); }
.alert-warn { background: var(--warn-s); color: var(--tx-2); border-color: rgba(217,176,97,.25); }
.alert-warn .ic { color: var(--warn); }
.danger-zone { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.action-list { display: flex; flex-direction: column; margin: -6px -10px; }
.action-list > a, .action-list > button, .action-list form > button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 10px; border-radius: 11px; border: 0; background: none; color: var(--tx); text-align: left; cursor: pointer; font: inherit; transition: background .12s; }
.action-list > a:hover, .action-list > button:hover, .action-list form > button:hover { background: var(--bg-3); color: var(--tx); }
.action-list .ic:first-child { color: var(--gold); flex: none; }
.action-list .ic:last-child { color: var(--mut-2); margin-left: auto; flex: none; }
.action-list span { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.action-list b { font-weight: 500; font-size: 13.5px; }
.action-list small { color: var(--mut); font-size: 12px; }
.action-list form { margin: 0; }
.lead-hero { display: flex; align-items: center; gap: 16px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.lead-hero h2 { font: 600 26px/1.1 var(--f-serif); }
.lead-hero > div:nth-child(2) { flex: 1; min-width: 180px; }
.lead-hero.compact h2 { font-size: 22px; }
.lead-contact { display: flex; gap: 8px; flex-wrap: wrap; }
.dl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.dl-grid > div { padding: 12px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.dl-grid > div:nth-child(4n) { border-right: 0; }
.dl-grid > div:nth-last-child(-n+4) { border-bottom: 0; }
.dl-grid dt, .dl-list dt { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut-2); margin-bottom: 3px; font-weight: 600; }
.dl-grid dd, .dl-list dd { margin: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; }
.dl-grid dd a, .dl-list dd a { color: var(--tx); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.dl-list { margin: 0 0 16px; }
.dl-list > div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.dl-list dt { margin: 0; padding-top: 2px; }
.dl-list dd { text-align: right; }
.dl-block { margin-top: 22px; }
.dl-block h4 { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mut-2); margin-bottom: 10px; font-weight: 600; }
.message { padding: 16px 18px; border-radius: 12px; background: var(--bg-3); border: 1px solid var(--line); color: var(--tx-2); line-height: 1.65; font-size: 14px; }
.message.rtl { font-family: var(--f-ar); font-size: 15px; }
.tech { margin-top: 16px; display: flex; align-items: center; gap: 6px; }
.role-help { list-style: none; padding: 16px 0 0; margin: 18px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 9px; font-size: 12.5px; color: var(--mut); }
.role-help li { display: flex; gap: 10px; align-items: center; }
.role-help .badge { min-width: 62px; justify-content: center; }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 44px; }
.pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 32px; border: 0; background: none; color: var(--mut); cursor: pointer; border-radius: 8px; display: grid; place-items: center; }
.pw-toggle:hover { color: var(--tx); background: var(--bg-4); }
.kbd-hint { text-align: center; margin-top: 12px; }
.form-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }

/* bilingual fields */
.bi-field { margin-bottom: 20px; }
.bi-label { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.bi-label > span { font-size: 12.5px; font-weight: 500; color: var(--tx-2); }
.bi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bi-col { position: relative; min-width: 0; }
.lang-tag { position: absolute; top: 9px; right: 9px; z-index: 2; height: 20px; min-width: 22px; padding: 0 5px; border-radius: 5px; display: grid; place-items: center; font: 600 10px/1 var(--f-ui); letter-spacing: .06em; color: var(--mut); background: var(--bg-4); pointer-events: none; }
.bi-ar .lang-tag { right: auto; left: 9px; font-family: var(--f-ar); font-size: 11px; }
/* International edition (English) — full width under EN / AR, marked in gold */
.bi-col.bi-intl { grid-column: 1 / -1; }
.bi-intl input:not([type=hidden]), .bi-intl textarea { padding-right: 56px; }
.bi-intl .lang-tag { color: var(--gold, #6FA8BA); background: color-mix(in srgb, var(--gold, #6FA8BA) 14%, transparent); }
[data-lang-view="ar"] .bi-intl { display: none; }
.geo-status p { margin: 0 0 6px; }
.geo-status .btn { margin-top: 4px; }
.bi-en input:not([type=hidden]), .bi-en textarea { padding-right: 40px; }
.bi-ar input:not([type=hidden]), .bi-ar textarea { padding-left: 40px; }
.bi-col .rte .lang-tag, .bi-col:has(.rte) > .lang-tag { top: 8px; }
.bi-col:has(.rte) > .lang-tag, .bi-col:has(.imgf) > .lang-tag { display: none; }
[data-lang-view="en"] .bi-ar, [data-lang-view="ar"] .bi-en { display: none; }
[data-lang-view="en"] .bi-grid, [data-lang-view="ar"] .bi-grid { grid-template-columns: 1fr; }

/* rich text */
.rte { border: 1px solid var(--line-2); border-radius: 11px; background: var(--bg-3); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.rte:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.rte-bar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); background: var(--bg-2); position: sticky; top: 0; }
.rte-bar button { height: 28px; min-width: 30px; padding: 0 7px; border-radius: 7px; border: 0; background: none; color: var(--mut); font-size: 12.5px; cursor: pointer; display: inline-grid; place-items: center; }
.rte-bar button:hover { background: var(--bg-4); color: var(--tx); }
.rte-bar button.is-on { background: var(--gold-soft); color: var(--gold); }
.rte-bar .sep { width: 1px; margin: 5px 4px; background: var(--line-2); }
.rte-area { min-height: 220px; max-height: 560px; overflow-y: auto; padding: 14px 16px; outline: none; font-size: 14.5px; line-height: 1.7; color: var(--tx-2); }
.rte-area:empty::before { content: "Start writing…"; color: var(--mut-2); }
.rte.is-source .rte-area { display: none; }
.rte.is-source .rte-src { display: block !important; border: 0; border-radius: 0; min-height: 220px; font: 12.5px/1.6 var(--f-mono); background: var(--bg); }
.prose h2 { font: 600 24px/1.25 var(--f-serif); color: var(--tx); margin: 18px 0 8px; }
.prose h3 { font: 600 16px/1.35 var(--f-ui); color: var(--tx); margin: 16px 0 6px; }
.prose h4 { font: 600 14px/1.35 var(--f-ui); margin: 14px 0 6px; }
.prose p { margin: 0 0 12px; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 12px; }
.prose.ar ul, .prose.ar ol { padding-left: 0; padding-right: 22px; }
.prose blockquote { margin: 14px 0; padding: 4px 16px; border-left: 2px solid var(--gold); color: var(--tx); font: italic 500 18px/1.5 var(--f-serif); }
.prose.ar blockquote { border-left: 0; border-right: 2px solid var(--gold); font-family: var(--f-ar); font-style: normal; }
.prose a { color: var(--gold); text-decoration: underline; }
.prose.ar { font-family: var(--f-ar); font-size: 15.5px; }
.prose img { border-radius: 8px; }

/* image, gallery, colour, slug, icon pickers */
.imgf { display: flex; gap: 12px; align-items: stretch; }
.imgf-preview { width: 96px; height: 76px; border-radius: 10px; flex: none; overflow: hidden; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--mut-2);
  background: repeating-conic-gradient(var(--bg-3) 0% 25%, var(--bg-4) 0% 50%) 50% / 14px 14px; }
.imgf-preview img { width: 100%; height: 100%; object-fit: cover; }
.imgf-ctrl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.imgf-ctrl input { height: 34px; font-size: 12.5px; font-family: var(--f-mono); }
.imgf-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.imgf.is-loading .imgf-preview { animation: shimmer 1s infinite alternate; }
@keyframes shimmer { to { opacity: .4; } }
.gallery-f { display: flex; flex-direction: column; gap: 10px; }
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.gal-grid:empty::before { content: "No images yet"; grid-column: 1 / -1; padding: 22px; text-align: center; border: 1px dashed var(--line-2); border-radius: 11px; color: var(--mut-2); font-size: 13px; }
.gal-item { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-2); cursor: grab; background: var(--bg-3); }
.gal-item img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.gal-item.is-dragging { opacity: .4; }
.gal-del { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(10,10,11,.75); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .15s; }
.gal-item:hover .gal-del { opacity: 1; }
.color-f { display: flex; gap: 8px; align-items: center; }
.color-f input[type=color] { width: 44px; height: 40px; padding: 3px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg-3); cursor: pointer; flex: none; }
.color-f input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.color-f input[type=color]::-webkit-color-swatch { border: 0; border-radius: 7px; }
.slug-f { display: flex; align-items: stretch; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-3); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.slug-f:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.slug-pre { display: flex; align-items: center; padding: 0 2px 0 12px; color: var(--mut-2); font: 12.5px var(--f-mono); white-space: nowrap; }
.slug-f input { border: 0 !important; box-shadow: none !important; background: none !important; padding-left: 2px; font: 12.5px var(--f-mono); }
.icon-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 5px; }
.icon-pick label { cursor: pointer; }
.icon-pick input { position: absolute; opacity: 0; pointer-events: none; }
.icon-pick span { display: grid; place-items: center; height: 38px; border-radius: 9px; border: 1px solid var(--line); color: var(--mut); transition: all .12s; }
.icon-pick label:hover span { color: var(--tx); border-color: var(--line-3); }
.icon-pick input:checked + span { color: var(--gold); border-color: var(--gold); background: var(--gold-soft); }
.icon-pick input:focus-visible + span { outline: 2px solid var(--gold); }

/* ---------- kanban ---------- */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(236px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 12px; align-items: start; scroll-snap-type: x proximity; }
.col { --cc: var(--mut); background: color-mix(in srgb, var(--bg-2) 70%, transparent); border: 1px solid var(--line); border-radius: var(--r); display: flex; flex-direction: column; min-height: 200px; max-height: calc(100vh - 230px); scroll-snap-align: start; }
.col-head { display: flex; align-items: center; gap: 9px; padding: 14px 14px 10px; font-size: 13px; }
.col-head b { font-weight: 600; }
.col-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc) 20%, transparent); }
.col-count { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--mut); background: var(--bg-3); border-radius: 10px; padding: 1px 8px; }
.col-sum { margin-left: auto; font-size: 12px; color: var(--mut); }
.col-add { margin-left: auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; color: var(--mut); }
.col-add:hover { background: var(--bg-4); color: var(--tx); }
.col-body { flex: 1; overflow-y: auto; padding: 4px 10px 12px; display: flex; flex-direction: column; gap: 8px; border-radius: 0 0 var(--r) var(--r); transition: background .15s; }
.board.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 70px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 70px), transparent); }
.board.fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 70px); mask-image: linear-gradient(90deg, transparent, #000 70px); }
.board.fade-l.fade-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 70px, #000 calc(100% - 70px), transparent); mask-image: linear-gradient(90deg, transparent, #000 70px, #000 calc(100% - 70px), transparent); }
.col-body.is-over { background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold-soft-2); }
.col-empty { display: none; padding: 18px; text-align: center; border: 1px dashed var(--line-2); border-radius: 11px; color: var(--mut-2); font-size: 12.5px; }
.col-body:not(:has(.kcard)) .col-empty { display: block; }
.col-new, .col-todo { --cc: var(--info); } .col-contacted, .col-in_progress { --cc: var(--gold); } .col-qualified, .col-review { --cc: var(--violet); } .col-proposal { --cc: var(--warn); } .col-won, .col-done { --cc: var(--ok); } .col-lost, .col-backlog { --cc: var(--mut-2); }
.kcard { position: relative; padding: 13px 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line-2); box-shadow: 0 1px 0 rgba(255,255,255,.02) inset, 0 6px 16px -12px rgba(0,0,0,.6); cursor: grab; transition: border-color .15s, transform .15s, box-shadow .15s; display: flex; flex-direction: column; gap: 8px; }
:root[data-theme="light"] .kcard { box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.kcard:hover { border-color: var(--line-3); transform: translateY(-1px); }
.kcard.is-dragging { opacity: .35; transform: rotate(1.5deg); }
.kcard.is-saving { border-color: var(--gold); }
.kcard .tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 20px; }
.kc-title { font-weight: 600; font-size: 13.5px; line-height: 1.35; color: var(--tx); }
.kc-sub { color: var(--mut); font-size: 12.5px; margin-top: -4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-top { display: flex; justify-content: space-between; align-items: center; }
.kc-tasks { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--mut); }
.kc-foot { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--mut-2); padding-top: 8px; border-top: 1px solid var(--line); }
.kc-foot .gold { font-weight: 600; }
.kc-due { display: inline-flex; align-items: center; gap: 5px; }
.kc-due.late { color: var(--bad); }
.board-stats { display: flex; gap: 16px; margin-left: auto; }
.board-stats b { color: var(--tx); font-weight: 600; margin-right: 3px; }

/* ---------- tasks ---------- */
.tasks { list-style: none; margin: 0; padding: 0; }
.task { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid var(--line); animation: fadeIn .25s var(--ease); }
.task-check { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line-3); background: none; display: grid; place-items: center; cursor: pointer; color: transparent; flex: none; transition: all .15s; }
.task-check:hover { border-color: var(--gold); }
.task.is-done .task-check { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.task-title { flex: 1; font-size: 14px; }
.task.is-done .task-title { color: var(--mut); text-decoration: line-through; text-decoration-color: var(--mut-2); }
.task-due { display: inline-flex; align-items: center; gap: 4px; }
.task-del { opacity: 0; }
.task:hover .task-del { opacity: 1; }
.task-add { display: flex; align-items: center; gap: 10px; padding: 12px 6px 2px; }
.task-add input[name=title] { flex: 1; border: 0; background: none; height: 34px; padding: 0; box-shadow: none !important; }
.task-add input[type=date] { width: 150px; height: 34px; font-size: 12.5px; }
.task-plus { width: 22px; height: 22px; display: grid; place-items: center; color: var(--gold); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-3px); } }

/* ---------- line items ---------- */
.items { border-top: 1px solid var(--line); }
.items-head, .item-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) 68px 112px 112px 30px; gap: 10px; align-items: start; padding: 0 22px; }
.items-head { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mut-2); padding-top: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.item-row { padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.item-row.is-dragging { opacity: .5; }
.item-row textarea { min-height: 40px; height: 40px; resize: none; overflow: hidden; padding-top: 9px; }
.item-row .drag { margin-top: 6px; }
.item-row output { display: block; padding-top: 10px; font-weight: 600; font-size: 14px; }
.item-row .icon-btn { margin-top: 5px; }
.items-foot { display: flex; align-items: center; gap: 10px; padding: 12px 22px; border-bottom: 1px solid var(--line); }
.svc-add select { height: 32px; font-size: 13px; min-width: 240px; }
.totals { margin-left: auto; width: min(100%, 380px); padding: 16px 22px 20px; display: flex; flex-direction: column; gap: 8px; }
.card.flush .totals { margin-left: auto; }
.totals > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--tx-2); }
.totals > div > span { display: inline-flex; align-items: center; gap: 6px; }
.totals input { width: 120px; height: 34px; text-align: right; }
.totals input.mini { width: 62px; padding: 0 8px; }
.totals .grand { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line-2); color: var(--tx); }
.totals .grand b { font-size: 26px; line-height: 1; }
.totals.compact { width: 100%; padding: 14px 0; }
.side-total { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 0; margin: 4px 0 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--mut); font-size: 13px; }
.side-total b { font-size: 24px; color: var(--tx); }

/* ---------- media ---------- */
.dropzone { position: relative; border: 1.5px dashed var(--line-3); border-radius: var(--r); padding: 22px; margin-bottom: 18px; background: color-mix(in srgb, var(--bg-2) 60%, transparent); transition: border-color .2s, background .2s; }
.dropzone.is-over { border-color: var(--gold); background: var(--gold-soft); }
.dz-inner { display: flex; align-items: center; gap: 16px; }
.dz-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold); flex: none; }
.dz-inner b { font-weight: 600; font-size: 15px; }
.dz-queue { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dz-queue:not(:empty) { margin-top: 16px; }
.dz-queue li { display: grid; grid-template-columns: minmax(0, 1fr) 160px 70px; gap: 12px; align-items: center; font-size: 12.5px; }
.dz-queue li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-queue .progress { height: 4px; }
.dz-queue .is-err { color: var(--bad); }
.dz-queue .is-ok { color: var(--ok); }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 14px; }
.mcard { margin: 0; border-radius: 14px; overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); transition: border-color .15s, transform .15s; animation: fadeIn .3s var(--ease); }
.mcard:hover { border-color: var(--line-3); }
.mthumb { position: relative; aspect-ratio: 4 / 3; background: repeating-conic-gradient(var(--bg-3) 0% 25%, var(--bg-4) 0% 50%) 50% / 16px 16px; display: grid; place-items: center; overflow: hidden; }
.mthumb img { width: 100%; height: 100%; object-fit: cover; }
.mfile { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--mut); }
.mfile em { font: 600 11px/1 var(--f-mono); font-style: normal; letter-spacing: .08em; }
.mact { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; opacity: 0; transform: translateY(-3px); transition: all .15s; }
.mcard:hover .mact, .mcard:focus-within .mact { opacity: 1; transform: none; }
.mact .icon-btn { background: rgba(10,10,11,.72); color: #E9F0F2; backdrop-filter: blur(6px); border: 0; }
.mact .icon-btn:hover { background: rgba(10,10,11,.9); color: #fff; }
.mact .icon-btn.danger:hover { color: #FFB3A8; }
.mcard figcaption { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.mcard figcaption b { font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcard figcaption small { color: var(--mut); font-size: 11.5px; }
.alt-in { margin-top: 6px; font-size: 12px !important; color: var(--tx-2); padding: 6px 8px !important; border-radius: 7px; border: 1px solid transparent !important; }
.alt-in:hover { border-color: var(--line) !important; }
.alt-in:focus { border-color: var(--gold) !important; background: var(--bg-3) !important; }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: rgba(5,5,6,.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade .16s ease; }
:root[data-theme="light"] .modal { background: rgba(7,21,27,.35); }
.modal-card { width: 100%; max-width: 560px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: var(--bg-2); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 24px; animation: pop .2s var(--ease); }
.modal-sm { max-width: 420px; }
.modal-lg { max-width: 980px; padding: 0; }
.modal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.modal-lg .modal-head { padding: 18px 20px; margin: 0; border-bottom: 1px solid var(--line); }
.modal-head h3 { font: 600 16px/1.3 var(--f-ui); flex: 1; }
.mm-tools { display: flex; gap: 8px; align-items: center; }
.modal-foot { display: flex; align-items: center; gap: 8px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--line); }
.modal-foot .muted { margin-right: auto; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 22px; }
.modal-card > h3 { font: 600 24px/1.2 var(--f-serif); margin-bottom: 8px; }
.modal-card > p { color: var(--mut); }
.cm-icon { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--bad-s); color: var(--bad); margin-bottom: 16px; }
.mm-grid { flex: 1; overflow-y: auto; padding: 18px 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; align-content: start; min-height: 300px; }
.mm-item { position: relative; border: 1px solid var(--line-2); border-radius: 11px; overflow: hidden; cursor: pointer; background: var(--bg-3); padding: 0; text-align: left; transition: border-color .15s, box-shadow .15s; }
.mm-item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: repeating-conic-gradient(var(--bg-3) 0% 25%, var(--bg-4) 0% 50%) 50% / 14px 14px; }
.mm-item span { display: block; padding: 6px 8px; font-size: 11.5px; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-item:hover { border-color: var(--line-3); }
.mm-item.is-sel { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft-2); }
.mm-item.is-sel::after { content: "✓"; position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: var(--on-gold); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.kbd-list { list-style: none; margin: 0; padding: 0; }
.kbd-list li { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--tx-2); }
.kbd-list li:last-child { border: 0; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* ---------- toasts ---------- */
.toasts { position: fixed; right: 22px; bottom: 22px; z-index: 95; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 11px; min-width: 260px; max-width: 420px; padding: 12px 12px 12px 14px; border-radius: 13px; background: var(--bg-4); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); font-size: 13.5px; color: var(--tx); animation: toastIn .35s var(--ease) both; }
.toast > span { flex: 1; }
.toast > .ic { color: var(--ok); }
.toast-error > .ic { color: var(--bad); }
.toast-info > .ic { color: var(--info); }
.toast button { width: 26px; height: 26px; border-radius: 7px; border: 0; background: none; color: var(--mut); cursor: pointer; display: grid; place-items: center; }
.toast button:hover { background: var(--bg-5); color: var(--tx); }
.toast.is-out { animation: toastOut .3s var(--ease) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(.97); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(24px); } }

/* ---------- empty & error ---------- */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 56px 24px; }
.empty-mark { width: 54px; height: 60px; color: var(--bg-5); margin-bottom: 20px; filter: drop-shadow(0 12px 24px rgba(111,168,186,.12)); }
:root[data-theme="light"] .empty-mark { color: var(--bg-5); }
.empty h3 { font: 600 24px/1.2 var(--f-serif); margin-bottom: 6px; }
.empty p { color: var(--mut); max-width: 380px; font-size: 13.5px; }
.empty-actions { margin-top: 18px; display: flex; gap: 8px; }
.error-card { max-width: 520px; margin: 40px auto; text-align: center; padding: 48px 32px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.error-mark { width: 60px; height: 66px; margin-bottom: 10px; }
.error-card h2 { font: 600 34px/1.1 var(--f-serif); }
.error-card .btn { margin-top: 14px; }
.eyebrow { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }

/* ---------- tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-bottom: 18px; }
.tile { display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); transition: border-color .15s, transform .15s, background .15s; color: var(--tx); }
.tile:hover { border-color: var(--gold-soft-2); transform: translateY(-2px); color: var(--tx); }
.tile-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--bg-3); border: 1px solid var(--line); color: var(--gold); flex: none; }
.tile-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tile-body b { font-weight: 600; }
.tile-body small { color: var(--mut); font-size: 12.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile-meta { display: flex; flex-direction: column; align-items: flex-end; color: var(--mut); }
.tile-meta b { font: 600 26px/1 var(--f-serif); color: var(--tx); }
.tile-meta small { font-size: 11.5px; }
.tiles-lg .tile { padding: 22px; align-items: flex-start; }
.tile-go { color: var(--mut-2); transition: transform .2s, color .2s; margin-top: 12px; }
.tile:hover .tile-go { color: var(--gold); transform: translateX(3px); }
.link-list { display: flex; flex-direction: column; margin: -8px -10px; }
.link-list a { display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: 11px; color: var(--tx); }
.link-list a:hover { background: var(--bg-3); color: var(--tx); }
.link-list a > .ic:first-child { color: var(--gold); }
.link-list a > .ic:last-child { margin-left: auto; color: var(--mut-2); }
.link-list span { display: flex; flex-direction: column; line-height: 1.35; }
.link-list b { font-weight: 500; }
.link-list small { color: var(--mut); font-size: 12px; }

/* ---------- settings ---------- */
.settings { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 18px; align-items: start; }
.settings-nav { position: sticky; top: calc(var(--tb-h) + 18px); display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.settings-nav a { display: flex; align-items: center; gap: 11px; height: 38px; padding: 0 12px; border-radius: 10px; color: var(--mut); font-size: 13.5px; font-weight: 500; }
.settings-nav a:hover { background: var(--bg-3); color: var(--tx); }
.settings-nav a.is-on { background: var(--bg-3); color: var(--tx); box-shadow: inset 2px 0 0 var(--gold); }
.settings-nav a.is-on .ic { color: var(--gold); }
.settings-body { padding: 26px 28px 0; }
.set-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.set-fields .bi-field, .set-fields .wide, .set-fields .switch-row { grid-column: 1 / -1; }
.set-fields .switch-row { border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.set-foot { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin: 10px -28px 0; padding: 16px 28px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg-2) 92%, transparent); backdrop-filter: blur(10px); border-radius: 0 0 var(--r) var(--r); }
.set-foot .is-dirty { color: var(--warn); }

/* ---------- notes ---------- */
.notes-board { columns: 290px; column-gap: 16px; }
.note { --nb: var(--bg-2); --nl: var(--line-2); break-inside: avoid; margin-bottom: 16px; display: flex; flex-direction: column; border-radius: 14px; background: var(--nb); border: 1px solid var(--nl); box-shadow: var(--shadow); transition: box-shadow .15s, transform .15s; animation: fadeIn .3s var(--ease); }
.note:focus-within { box-shadow: 0 0 0 3px var(--gold-soft), var(--shadow); }
.note header { display: flex; align-items: center; gap: 6px; padding: 12px 10px 0 16px; }
.note-title { flex: 1; font: 600 14.5px/1.3 var(--f-ui) !important; color: var(--tx) !important; }
.note-body { width: 100%; min-height: 70px; padding: 8px 16px 12px !important; color: var(--tx-2); font-size: 13.5px !important; line-height: 1.6 !important; resize: none; }
.note footer { display: flex; align-items: center; gap: 8px; padding: 8px 10px 10px 16px; border-top: 1px solid var(--nl); }
.note footer time { margin-left: auto; }
.note-pin { color: var(--mut-2); }
.note.is-pinned .note-pin { color: var(--gold); }
.note.is-pinned .note-pin svg { fill: var(--gold-soft-2); }
.note.is-pinned { border-top: 2px solid var(--gold); }
.note-colors { display: flex; gap: 5px; }
.nc { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line-3); cursor: pointer; padding: 0; background: var(--bg-2); }
.nc:hover { transform: scale(1.15); }
.nc-gold { background: #3A3122; } .nc-rose { background: #3A2528; } .nc-sage { background: #22322A; } .nc-sky { background: #212C3A; } .nc-lilac { background: #2E2738; }
.note-gold { --nb: #1F1B14; --nl: rgba(111,168,186,.22); } .note-rose { --nb: #201719; --nl: rgba(217,119,107,.2); } .note-sage { --nb: #161E1A; --nl: rgba(127,183,154,.2); } .note-sky { --nb: #151B23; --nl: rgba(127,163,201,.2); } .note-lilac { --nb: #1C1822; --nl: rgba(168,151,201,.2); }
:root[data-theme="light"] .note-gold { --nb: #FBF4E6; } :root[data-theme="light"] .note-rose { --nb: #FBEDEB; } :root[data-theme="light"] .note-sage { --nb: #EDF6F0; } :root[data-theme="light"] .note-sky { --nb: #ECF2F9; } :root[data-theme="light"] .note-lilac { --nb: #F2EEF9; }
:root[data-theme="light"] .nc-gold { background: #F3E3C3; } :root[data-theme="light"] .nc-rose { background: #F3D2CD; } :root[data-theme="light"] .nc-sage { background: #CFE7D9; } :root[data-theme="light"] .nc-sky { background: #D0DFF0; } :root[data-theme="light"] .nc-lilac { background: #DDD4EF; }

/* ---------- currencies settings ---------- */
.flag { position: relative; display: inline-block; flex: none; width: 18px; height: 18px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px var(--line-2); }
.flag svg { display: block; width: 100%; height: 100%; }
.cur-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.cur-check { position: relative; cursor: pointer; margin: 0; }
.cur-check input { position: absolute; opacity: 0; pointer-events: none; }
.cur-check > span { display: grid; grid-template-columns: 18px auto 1fr; align-items: center; gap: 4px 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); transition: border-color .15s, background .15s; }
.cur-check b { font-size: 12.5px; letter-spacing: .06em; }
.cur-check small { grid-column: 2 / -1; color: var(--mut); font-size: 11.5px; }
.cur-check .flag { grid-row: 1 / span 2; }
.cur-check:hover > span { border-color: var(--line-3); }
.cur-check input:checked + span { border-color: var(--gold); background: var(--gold-soft); }
.cur-check input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.tool-checks { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.tool-checks .cur-check > span { grid-template-columns: minmax(0, 1fr); }
.tool-checks .cur-check small { grid-column: 1; }
.fx-table { display: grid; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; }
.fx-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(110px, 1fr) minmax(0, 1fr); align-items: center; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--line); }
.fx-row:first-child { border-top: 0; }
.fx-head { padding-block: 9px; background: var(--bg-2); color: var(--mut); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.fx-cur { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fx-cur b { font-size: 13px; letter-spacing: .06em; }
.fx-cur small { color: var(--mut); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-row input { height: 34px; max-width: 150px; }
.fx-base { display: flex; align-items: center; gap: 10px; height: 34px; }
.fx-base em { font-style: normal; font-size: 11.5px; color: var(--gold); background: var(--gold-soft); padding: 3px 8px; border-radius: 999px; }
.fx-ex { color: var(--tx-2); font-size: 13px; }
@media (max-width: 640px) { .fx-row { grid-template-columns: 1fr 1fr; } .fx-row > :last-child { display: none; } .fx-cur small { display: none; } }

/* ---------- money input ---------- */
.money-in { display: flex; align-items: stretch; }
.money-in .money-cur { display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid var(--line-2); border-inline-end: 0; border-radius: 10px 0 0 10px; background: var(--bg-2); color: var(--mut); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; }
.money-in input { border-radius: 0 10px 10px 0 !important; min-width: 0; flex: 1; }
[dir="rtl"] .money-in .money-cur { border-radius: 0 10px 10px 0; }

/* ---------- calculator ---------- */
.calc-svcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.calc-svc { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 13px; border: 1px solid var(--line-2); cursor: pointer; transition: border-color .15s, background .15s; }
.calc-svc:hover { border-color: var(--line-3); }
.calc-svc > input { position: absolute; opacity: 0; pointer-events: none; }
.calc-svc:has(input[data-svc-on]:checked) { border-color: var(--gold); background: var(--gold-soft); }
.cs-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--bg-3); display: grid; place-items: center; color: var(--gold); flex: none; }
.cs-body { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.cs-body b { font-weight: 600; font-size: 13.5px; }
.cs-body small { color: var(--mut); font-size: 12px; }
.cs-qty { display: none; align-items: center; gap: 5px; }
.cs-qty input { width: 58px; height: 32px; text-align: center; padding: 0 4px; }
.cs-qty em { font-style: normal; font-size: 11.5px; color: var(--mut); }
.calc-svc:has(input[data-svc-on]:checked) .cs-qty { display: flex; }
.cs-check { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); color: var(--on-gold); display: none; place-items: center; }
.calc-svc:has(input[data-svc-on]:checked) .cs-check { display: grid; }
.seg-4 label > span { font-size: 13px; }
.calc-mode { margin-bottom: 16px; }
.calc-count:not(:empty) { font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--gold); color: var(--on-gold); font-size: 11px; display: inline-grid; place-items: center; }
.calc-group + .calc-group { margin-top: 18px; }
.calc-group-h { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }
.calc-group-h svg { color: var(--gold); }
.calc-pk { padding: 12px 14px; }
.calc-pk .cs-body b { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.calc-pk .tag { font-style: normal; font-size: 10.5px; font-weight: 500; padding: 1px 7px; }
.calc-pk .tag-gold { color: var(--gold); background: var(--gold-soft); }
.calc-pk.is-addon { border-style: dashed; }
.calc-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.calc-lines li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--tx-2); }
.calc-lines li b { font-weight: 600; white-space: nowrap; }
.calc-lines li small { display: block; color: var(--mut); font-size: 11.5px; }

/* ---------- signature & utm ---------- */
.sig-canvas { background: #fff; color: #111; border-radius: 12px; padding: 22px; margin-bottom: 14px; border: 1px solid var(--line-2); overflow-x: auto; }
.utm-out { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line-2); }
.utm-out code { flex: 1; min-width: 0; font: 12.5px/1.5 var(--f-mono); color: var(--gold-2); word-break: break-all; }
:root[data-theme="light"] .utm-out code { color: var(--gold); }
.qr-stage { display: grid; place-items: center; padding: 18px; margin-bottom: 16px; border-radius: 14px; background: repeating-conic-gradient(var(--bg-3) 0% 25%, var(--bg-4) 0% 50%) 50% / 18px 18px; border: 1px solid var(--line); }
.qr-stage canvas { width: 220px; height: 220px; image-rendering: pixelated; border-radius: 8px; box-shadow: 0 12px 30px -12px rgba(0,0,0,.5); }

/* ---------- misc ---------- */
.is-disabled { opacity: .6; }
.counts { margin-top: 16px; }
.counts summary { cursor: pointer; margin-bottom: 10px; }
.w-100 { width: 100%; }

/* ==========================================================================
   Auth (login / setup)
   ========================================================================== */
body.auth { min-height: 100vh; background: var(--bg); }
.auth-wrap { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 100vh; }
.auth-brand { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 44px 52px; background: #040E12; color: #E9F0F2; isolation: isolate; }
.auth-glow { position: absolute; inset: -20%; z-index: -2; background:
  radial-gradient(40% 40% at 70% 30%, rgba(111,168,186,.28), transparent 70%),
  radial-gradient(35% 45% at 20% 80%, rgba(245,188,106,.14), transparent 70%),
  radial-gradient(30% 30% at 85% 85%, rgba(79,127,208,.08), transparent 70%);
  animation: drift 18s ease-in-out infinite alternate; filter: blur(10px); }
@keyframes drift { 0% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(-4%, 3%) rotate(6deg); } 100% { transform: translate(3%, -2%) rotate(-4deg); } }
.auth-grain { position: absolute; inset: 0; z-index: -1; opacity: .09; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.auth-lines { position: absolute; inset: 0; z-index: -1; display: flex; justify-content: space-around; pointer-events: none; }
.auth-lines span { width: 1px; background: linear-gradient(180deg, transparent, rgba(233,240,242,.06) 30%, rgba(233,240,242,.06) 70%, transparent); }
.auth-brand-top { display: flex; align-items: center; justify-content: space-between; }
.auth-logo { display: flex; align-items: center; gap: 12px; }
.auth-logo-mark { width: 22px; height: 25px; color: #E9F0F2; }
.auth-tag { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(233,240,242,.5); border: 1px solid rgba(233,240,242,.14); padding: 6px 10px; border-radius: 20px; }
.auth-hero { max-width: 560px; }
.auth-mark { width: clamp(120px, 14vw, 190px); height: auto; aspect-ratio: 78 / 88; color: #E9F0F2; margin-bottom: 44px; filter: drop-shadow(0 30px 60px rgba(111,168,186,.25)); animation: floaty 7s ease-in-out infinite; }
.auth-mark .vx-star { transform-origin: 81.6px 15.2px; animation: twinkle 3.6s ease-in-out infinite; }
@keyframes floaty { 50% { transform: translateY(-8px); } }
@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(1.25) rotate(45deg); opacity: .85; } }
.auth-hero h2 { font: 600 clamp(38px, 4.2vw, 60px)/1.02 var(--f-serif); letter-spacing: -.02em; }
.auth-hero h2 em { font-style: italic; color: #6FA8BA; }
.auth-hero p { margin-top: 18px; color: rgba(233,240,242,.6); font-size: 15px; max-width: 440px; }
.auth-foot { display: flex; justify-content: space-between; font-size: 12px; color: rgba(233,240,242,.4); letter-spacing: .04em; }
.auth-foot .ar { font-family: var(--f-ar-d); font-weight: 300; font-size: 14px; direction: rtl; }
.auth-form-side { display: grid; place-items: center; padding: 40px 24px; background: var(--bg); position: relative; }
.auth-card { width: 100%; max-width: 400px; }
.auth-card h1 { font: 600 36px/1.1 var(--f-serif); margin: 10px 0 8px; }
.auth-card > p.muted { margin-bottom: 28px; }
.auth-form .field { margin-bottom: 18px; }
.auth-form input { height: 46px; font-size: 15px; border-radius: 12px; }
.auth-form .btn { margin-top: 8px; }
.auth-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 22px; color: var(--mut-2); font-size: 12px; }
.auth-back { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 10px; color: var(--mut); font-size: 12.5px; }
.auth-mobile-logo { display: none; align-items: center; gap: 12px; margin-bottom: 36px; color: var(--tx); }
.auth-mobile-logo .vx-mark { width: 24px; height: 27px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1320px) {
  .kpis-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dl-grid > div:nth-child(4n) { border-right: 1px solid var(--line); }
  .dl-grid > div:nth-child(2n) { border-right: 0; }
  .dl-grid > div:nth-last-child(-n+4) { border-bottom: 1px solid var(--line); }
  .dl-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 1200px) {
  .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-3-1, .g-2-1 { grid-template-columns: minmax(0, 1fr); }
  .form-layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .calc-svcs { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .only-mobile { display: inline-grid !important; }
  .sidebar { transform: translateX(-100%); width: 280px; box-shadow: none; }
  .sb-open .sidebar { transform: none; box-shadow: 30px 0 80px rgba(0,0,0,.5); }
  .sb-scrim { position: fixed; inset: 0; z-index: 35; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
  .sb-open .sb-scrim { opacity: 1; visibility: visible; }
  .sb-toggle { display: none !important; }
  .main { margin-left: 0 !important; }
  .topbar { padding: 0 16px; gap: 8px; }
  .page { padding: 22px 20px 56px; }
  .form-layout { grid-template-columns: minmax(0, 1fr); }
  .sticky-side { position: static; }
  .settings { grid-template-columns: 1fr; }
  .settings-nav { position: static; flex-direction: row; overflow-x: auto; padding: 6px; }
  .settings-nav a { flex: none; }
  .settings-nav a.is-on { box-shadow: inset 0 -2px 0 var(--gold); }
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .auth-mobile-logo { display: flex; }
  .board { grid-auto-columns: minmax(260px, 82vw); }
}
@media (max-width: 760px) {
  body { font-size: 14px; }
  .hide-sm { display: none !important; }
  .page { padding: 18px 16px 56px; }
  .page-head { margin-bottom: 18px; align-items: flex-start; }
  .page-head h1 { font-size: 30px; }
  .ph-actions { width: 100%; }
  .ph-actions .btn { flex: 1; }
  .kpis, .kpis-3, .kpis-4, .kpis-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 14px; }
  .kpi.span-2 { grid-column: 1 / -1; }
  .big, .big.serif { font-size: 23px; }
  .kpi-trio > div + div { padding-left: 12px; }
  .kpi-trio .big { font-size: 22px; }
  .kpi-trio .delta { font-size: 11px; }
  .g-2, .g-3 { grid-template-columns: minmax(0, 1fr); }
  .grid { gap: 12px; margin-bottom: 12px; }
  .card { padding: 16px; border-radius: 14px; }
  .fgrid, .set-fields, .check-grid, .bi-grid { grid-template-columns: minmax(0, 1fr); }
  .donut { flex-direction: column; align-items: stretch; }
  .donut-ring { margin: 0 auto; }
  .search kbd { display: none; }
  .search { max-width: none; }
  .tb-right { gap: 2px; }
  .dd-grid { grid-template-columns: 1fr; min-width: 230px; }
  .dd-wide { width: min(340px, calc(100vw - 32px)); }
  .toolbar { gap: 8px; }
  .tb-search { max-width: none; min-width: 0; flex-basis: 100%; }
  .tb-count { margin-left: 0; }
  .stages li { grid-template-columns: 96px 1fr 22px 40px; }
  /* tables → cards */
  .table-wrap { overflow: visible; }
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { position: relative; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .table tbody tr:last-child { border-bottom: 0; }
  .table td { border: 0 !important; padding: 4px 0 !important; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: right !important; min-height: 28px; }
  .table td[data-label]::before { content: attr(data-label); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mut-2); text-align: left; flex: none; }
  .table td:first-child { padding-bottom: 8px !important; justify-content: flex-start; text-align: left !important; }
  .table td:first-child::before { display: none; }
  .table td.w-drag + td { padding-bottom: 8px !important; padding-right: 36px !important; justify-content: flex-start; text-align: left !important; }
  .table td.w-drag + td::before { display: none; }
  .table td.w-drag { position: absolute; right: 12px; top: 14px; width: auto; min-height: 0; }
  .table td.row-actions { justify-content: flex-end; padding-top: 8px !important; }
  .table td.row-actions:empty { display: none; }
  .cell-person small, .ci-text small { max-width: 60vw; }
  .ellipsis { max-width: 55vw; }
  .dl-grid { grid-template-columns: minmax(0, 1fr); }
  .dl-grid > div { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .dl-grid > div:last-child { border-bottom: 0 !important; }
  .items-head { display: none; }
  .item-row { grid-template-columns: 24px 76px minmax(0, 1fr) 30px; grid-template-areas: "drag desc desc del" ". qty price ." ". line line ."; padding: 12px 14px; gap: 8px; }
  .item-row .drag { grid-area: drag; } .item-row textarea { grid-area: desc; } .item-row [data-qty] { grid-area: qty; } .item-row [data-price] { grid-area: price; } .item-row output { grid-area: line; padding-top: 0; } .item-row .icon-btn { grid-area: del; }
  .items-foot { padding: 12px 14px; flex-wrap: wrap; }
  .svc-add, .svc-add select { width: 100%; min-width: 0; }
  .totals { padding: 14px; width: 100%; }
  .dz-inner { flex-direction: column; text-align: center; }
  .dz-queue li { grid-template-columns: minmax(0, 1fr) 90px 54px; }
  .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mact { opacity: 1; transform: none; }
  .modal { padding: 10px; align-items: end; }
  .modal-card { border-radius: 18px 18px 14px 14px; }
  .mm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 12px; }
  .mm-tools { flex-wrap: wrap; }
  .modal-lg .modal-head { flex-wrap: wrap; }
  .settings-body { padding: 18px 16px 0; }
  .set-foot { margin: 10px -16px 0; padding: 14px 16px; }
  .toasts { left: 12px; right: 12px; bottom: 12px; align-items: stretch; }
  .toast { max-width: none; }
  .lead-contact { width: 100%; }
  .lead-contact .btn { flex: 1; }
  .quick { grid-template-columns: 1fr 1fr; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .notes-board { columns: 1; }
  .task-add { flex-wrap: wrap; }
  .task-add input[type=date] { width: auto; flex: 1; }
  .imgf { flex-direction: column; }
  .imgf-preview { width: 100%; height: 140px; }
  .board-stats { margin-left: 0; width: 100%; }
  .chart { grid-template-columns: 30px 1fr; }
  .auth-card h1 { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media print {
  .sidebar, .topbar, .toasts, .ph-actions { display: none !important; }
  .main { margin: 0 !important; }
  body.adm::before { display: none; }
}
.calc-panel > .hint { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; }

/* ---------- signature pad (settings) ---------- */
.sigwrap{display:grid;gap:12px}
.sigpad{border:1px solid var(--line, rgba(233,240,242,.1));border-radius:14px;overflow:hidden;background:rgba(233,240,242,.02)}
.sigpad-canvas{position:relative;background:#FCFAF6;height:180px;cursor:crosshair;touch-action:none}
.sigpad-canvas canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.sigpad-hint{position:absolute;left:18px;top:14px;font:500 11px/1 "Instrument Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#B9B2A6;pointer-events:none;transition:opacity .2s}
.sigpad.has-ink .sigpad-hint{opacity:0}
.sigpad-line{position:absolute;left:8%;right:8%;bottom:48px;border-top:1px dashed #CFC8BA;pointer-events:none}
.sigpad-bar{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--line, rgba(233,240,242,.1))}
.sigpad-bar .sp{flex:1}

/* ---------- AI Creative Director settings ---------- */
.ai-panel { display: grid; gap: 14px; margin-bottom: 16px; padding: 16px 18px; border-radius: var(--r-sm); background: var(--bg-3); border: 1px solid var(--line); }
.ai-status { display: flex; align-items: center; gap: 14px; }
.ai-status > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ai-status b { font-size: 14px; font-weight: 600; }
.ai-status small { color: var(--mut); font-size: 12.5px; line-height: 1.45; }
.ai-dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--mut-2); flex: none; }
.ai-dot.is-live { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-s); }
.ai-dot.is-guided { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-s); }
.ai-test-out { font-size: 13px; padding: 10px 12px; border-radius: var(--r-xs); background: var(--ok-s); color: var(--ok); margin: 0; }
.ai-test-out.is-bad { background: var(--bad-s); color: var(--bad); }
.ai-usage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); padding-top: 12px; }
.ai-usage > div { display: grid; gap: 3px; padding-inline: 14px; }
.ai-usage > div:first-child { padding-inline-start: 0; }
.ai-usage > div + div { border-left: 1px solid var(--line); }
.ai-usage small { color: var(--mut); font-size: 12px; }
.ai-usage b { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.ai-key { display: grid; gap: 10px; }
.ai-key-now { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.ai-key-lock { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--gold-soft); color: var(--gold); }
.ai-key-rm { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--mut); cursor: pointer; width: max-content; }
.ai-model { display: grid; gap: 10px; }
.ai-model-row { display: flex; gap: 10px; }
.ai-model-row select { flex: 1; min-width: 0; }
.ai-model-row .btn { flex: none; }
.ai-prompt textarea { font-size: 13px; line-height: 1.6; min-height: 220px; }
.ai-prompt-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
@media (max-width: 760px) {
  .ai-status { flex-wrap: wrap; }
  .ai-status .btn { width: 100%; justify-content: center; }
  .ai-model-row { flex-direction: column; }
  .ai-usage b { font-size: 17px; }
}

/* ==========================================================================
   Email & automations · Inbox
   ========================================================================== */
.etabs { display: flex; gap: 4px; margin: -4px 0 18px; padding: 4px; border-radius: 13px; background: var(--bg-2); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.etabs a { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 9px; color: var(--mut); font-size: 13.5px; font-weight: 500; white-space: nowrap; transition: background .15s, color .15s; }
.etabs a:hover { color: var(--tx); }
.etabs a.is-on { background: var(--bg-5); color: var(--tx); box-shadow: 0 2px 6px -2px rgba(0,0,0,.4); }
.etabs a.is-on .ic { color: var(--gold); }
.em-link-alert a { color: var(--gold); font-weight: 600; }
.em-status { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.em-stat { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; color: inherit; transition: border-color .15s; }
.em-stat:hover { border-color: var(--line-3); }
.em-stat > span:last-child { display: grid; gap: 2px; min-width: 0; }
.em-stat small { color: var(--mut); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.em-stat b { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-stat em { font-style: normal; color: var(--mut); font-size: 12px; }
.em-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; background: var(--mut-2); }
.em-dot.is-ok { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-s); }
.em-dot.is-warn { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-s); }
.em-dot.is-bad { background: var(--bad); box-shadow: 0 0 0 4px var(--bad-s); }
.em-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.em-step { padding: 18px 20px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.em-step:nth-child(3n) { border-right: 0; }
.em-step-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.em-step-h b { display: block; font-size: 14px; }
.em-step-h small { color: var(--mut); font-size: 12px; }
.em-step-n { font: 600 22px/1 var(--f-serif); color: var(--gold); min-width: 26px; }
.em-step-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--gold-soft); color: var(--gold); }
.em-tpls { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.em-tpls li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 8px; border-radius: 10px; transition: background .15s; }
.em-tpls li:hover { background: var(--bg-3); }
.em-tpls li .switch { margin-top: 2px; }
.em-tpls li a { display: grid; gap: 1px; flex: 1; min-width: 0; color: inherit; }
.em-tpls li b { font-weight: 500; font-size: 13.5px; }
.em-tpls li small { color: var(--mut); font-size: 12px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.em-tpls li.is-off b, .em-tpls li.is-off small { opacity: .5; }
.em-tpl-table td { vertical-align: top; }
.em-tpl-table .switch { margin-top: 3px; }
.em-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 18px; align-items: start; }
.em-editor .card-head .seg { flex: none; }
.em-lang .field { margin-bottom: 14px; }
.em-ph { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 6px; }
.em-ph .chip { height: 26px; padding: 0 9px; font: 500 11.5px/1 var(--f-mono); }
.em-preview { position: sticky; top: calc(var(--tb-h) + 16px); }
.em-preview .card-head { flex-wrap: wrap; }
.em-frame-wrap { background: #ECE7DE; border-top: 1px solid var(--line); }
.em-frame { display: block; width: 100%; height: min(78vh, 900px); border: 0; background: #ECE7DE; }
.em-frame-wrap.tall .em-frame { height: 82vh; }
.em-frame-wrap.auto { background: #fff; border: 0; border-radius: 10px; overflow: hidden; }
.em-frame-wrap.auto .em-frame { height: 160px; background: #fff; }
.em-test { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; padding-top: 16px; margin-top: 4px; border-top: 1px solid var(--line); }
.em-test-out { display: grid; gap: 6px; flex: 1; min-width: 240px; font-size: 13px; }
.em-test-out p { display: flex; gap: 8px; align-items: flex-start; margin: 0; }
.em-test-out .ok { color: var(--ok); } .em-test-out .bad { color: var(--bad); }
.em-sendtest { display: flex; gap: 8px; margin-top: 14px; }
.em-sendtest input { flex: 1; min-width: 0; }
.em-adv summary { display: grid; gap: 2px; cursor: pointer; list-style: none; }
.em-adv summary::-webkit-details-marker { display: none; }
.em-adv summary small { color: var(--mut); font-size: 12px; }
.em-adv[open] summary { margin-bottom: 14px; }
.em-rule { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.em-rule:first-of-type { border-top: 0; padding-top: 2px; }
.em-rule > div { flex: 1; min-width: 0; }
.em-rule b { font-weight: 600; font-size: 14px; }
.em-rule p { margin: 3px 0 0; color: var(--tx-2); font-size: 13px; line-height: 1.7; }
.em-rule .switch { margin-top: 2px; }
.em-rule.is-off b, .em-rule.is-off p { opacity: .5; }
.em-num { display: inline-flex; align-items: center; gap: 6px; margin: 0 2px; }
.em-num input { width: 62px; height: 30px; padding: 0 8px; text-align: center; }
.em-num em { font-style: normal; color: var(--mut); }
.em-code { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-radius: 10px; background: var(--bg-3); border: 1px solid var(--line); margin-bottom: 10px; }
.em-code code { flex: 1; min-width: 0; font: 12px/1.5 var(--f-mono); color: var(--tx-2); overflow-wrap: anywhere; }
.em-mini { display: grid; gap: 8px; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); list-style: none; font-size: 12.5px; }
.em-mini li { display: flex; align-items: center; gap: 8px; }
.em-mini li span:not(.badge) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tx-2); }
.em-mini time { color: var(--mut); white-space: nowrap; }
.ib-card { overflow: hidden; }
.ib-list { margin: 0; padding: 0; list-style: none; }
.ib-row + .ib-row { border-top: 1px solid var(--line); }
.ib-row a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 20px; color: inherit; transition: background .15s; }
.ib-row a:hover { background: var(--bg-3); }
.ib-main { display: grid; gap: 2px; min-width: 0; }
.ib-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ib-who { font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-n { font-size: 11px; color: var(--mut); background: var(--bg-3); border-radius: 10px; padding: 0 6px; }
.ib-you { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--mut); }
.ib-subj { font-size: 13.5px; color: var(--tx-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-snip { font-size: 12.5px; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-time { display: grid; justify-items: end; gap: 6px; font-size: 12px; color: var(--mut); white-space: nowrap; }
.ib-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.ri-time .ib-dot { margin-right: 6px; }
.ib-row.is-unread .ib-who, .ib-row.is-unread .ib-subj { font-weight: 600; color: var(--tx); }
.ib-msg > summary { list-style: none; }
.ib-msg > summary::-webkit-details-marker { display: none; }
.ib-msg-h { display: grid; grid-template-columns: auto minmax(0, auto) minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 20px; cursor: pointer; }
.ib-msg-who { display: grid; gap: 1px; min-width: 0; }
.ib-msg-who b { font-weight: 600; font-size: 14px; }
.ib-msg-who small { color: var(--mut); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-msg-snip { color: var(--mut); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-msg[open] .ib-msg-snip { visibility: hidden; }
.ib-msg.is-out { border-color: color-mix(in srgb, var(--gold) 28%, var(--line)); }
.ib-msg-b { padding: 0 20px 20px; }
.ib-text { white-space: normal; }
.ib-img { margin-top: 10px; }
.ib-atts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ib-reply textarea { width: 100%; margin-bottom: 12px; }
.lead-hero.sm { padding-bottom: 14px; margin-bottom: 10px; }
.lead-hero.sm h2 { font-size: 22px; }
@media (max-width: 1180px) {
  .em-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .em-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .em-step:nth-child(3n) { border-right: 1px solid var(--line); }
  .em-step:nth-child(2n) { border-right: 0; }
  .em-editor { grid-template-columns: minmax(0, 1fr); }
  .em-preview { position: static; }
}
@media (max-width: 760px) {
  .em-status, .em-flow { grid-template-columns: minmax(0, 1fr); }
  .em-step { border-right: 0 !important; }
  .ib-row a { padding: 12px 14px; gap: 10px; }
  .ib-msg-h { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ib-msg-snip { display: none; }
  .em-frame { height: 70vh; }
}
.hint.em-hint { flex-wrap: nowrap; align-items: flex-start; } .hint.em-hint > .ic { flex: none; margin-top: 2px; }

/* ================================================================ Live chat desk */
.chat-avail { gap: 14px; padding: 0 4px 0 0; border: 0; margin: 0; }
.chat-avail small { white-space: nowrap; }
.chat-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px; }
.chat-desk { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 16px; height: calc(100vh - 290px); min-height: 520px; }
.chat-side, .chat-main { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.chat-filters { display: flex; gap: 4px; padding: 10px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.chat-filters button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--mut); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.chat-filters button:hover { color: var(--tx); }
.chat-filters button.is-on { background: var(--bg-5); color: var(--tx); }
.chat-filters em { font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--gold); color: var(--on-gold); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.chat-filters em:empty { display: none; }
.chat-list { flex: 1; overflow-y: auto; padding: 6px; }
.chat-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 10px; border-radius: 12px; color: inherit; text-decoration: none; transition: background .15s; position: relative; }
.chat-row:hover { background: var(--bg-3); }
.chat-row.is-on { background: var(--bg-4); box-shadow: inset 0 0 0 1px var(--line-2); }
.chat-row.is-waiting::before { content: ""; position: absolute; inset-inline-start: 2px; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--gold); }
.chat-row .avatar { width: 38px; height: 38px; font-size: 13px; position: relative; }
.avatar.is-live::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2.5px var(--bg-2); }
.chat-row-m { display: grid; gap: 2px; min-width: 0; }
.chat-row-t { display: flex; align-items: center; gap: 6px; min-width: 0; }
.chat-row-t b { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-row.is-unread .chat-row-t b { color: var(--tx); }
.chat-lang { font-size: 11px; color: var(--mut); padding: 0 5px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--line-2); }
.chat-row-s { font-size: 12.5px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-row.is-unread .chat-row-s { color: var(--tx-2); }
.chat-row-r { display: grid; justify-items: end; gap: 5px; font-size: 11.5px; color: var(--mut); }
.chat-unread { font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--gold); color: var(--on-gold); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.chat-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; background: var(--mute-s); color: var(--mut); }
.chat-pill.st-ai { background: var(--violet-s); color: var(--violet); }
.chat-pill.st-wait { background: var(--gold-soft-2); color: var(--gold-2); }
.chat-pill.st-human { background: var(--ok-s); color: var(--ok); }
.chat-none { padding: 30px 18px; text-align: center; color: var(--mut); font-size: 13px; }
.chat-empty { flex: 1; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 40px; text-align: center; }
.chat-empty[hidden] { display: none; }
.chat-empty-ic { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--gold-soft); color: var(--gold); margin-bottom: 6px; }
.chat-empty h2 { margin: 0; font-family: var(--f-serif); font-weight: 400; font-size: 28px; }
.chat-empty p { margin: 0; max-width: 380px; color: var(--mut); font-size: 13.5px; }
.chat-conv { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.chat-conv[hidden] { display: none; }
.chat-conv-h { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.chat-conv-h .avatar { width: 40px; height: 40px; position: relative; }
.chat-back { display: none; }
.chat-who { display: grid; min-width: 0; flex: 1; line-height: 1.3; }
.chat-who b { font-size: 15.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-who small { font-size: 12px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.chat-info { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.chat-info:empty { display: none; }
.chat-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px; border-radius: 9px; background: var(--bg-3); font-size: 12.5px; color: var(--tx-2); text-decoration: none; }
.chat-chip small { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.chat-chip b { font-weight: 500; }
a.chat-chip:hover { box-shadow: inset 0 0 0 1px var(--gold); }
.chat-msgs { flex: 1; overflow-y: auto; padding: 18px 18px 8px; display: flex; flex-direction: column; gap: 12px; }
.chat-m { max-width: 74%; display: grid; gap: 4px; }
.chat-m-visitor { align-self: flex-start; }
.chat-m-ai, .chat-m-agent { align-self: flex-end; justify-items: end; }
.chat-m-h { display: flex; gap: 8px; align-items: baseline; font-size: 11.5px; color: var(--mut); }
.chat-m-h b { font-weight: 600; color: var(--tx-2); }
.chat-m-b { padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.chat-m-b p { margin: 0; } .chat-m-b p + p { margin-top: .55em; }
.chat-m-visitor .chat-m-b { background: var(--bg-4); border-top-left-radius: 5px; }
.chat-m-ai .chat-m-b { background: var(--violet-s); box-shadow: inset 0 0 0 1px rgba(168,151,201,.2); border-top-right-radius: 5px; }
.chat-m-agent .chat-m-b { background: var(--gold); color: var(--on-gold); border-top-right-radius: 5px; }
.chat-m-cta { font-size: 11px; color: var(--mut); }
.chat-sys { align-self: center; max-width: 80%; padding: 6px 12px; border-radius: 10px; background: var(--mute-s); font-size: 12px; color: var(--mut); text-align: center; }
.chat-typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; border-radius: 16px; background: var(--bg-4); }
.chat-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--mut); animation: chatdot 1.2s ease-in-out infinite; }
.chat-typing i:nth-child(2) { animation-delay: .15s; } .chat-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chatdot { 0%, 60%, 100% { transform: none; opacity: .4; } 30% { transform: translateY(-3px); opacity: 1; } }
.chat-compose { display: flex; align-items: flex-end; gap: 10px; padding: 12px 16px 6px; border-top: 1px solid var(--line); }
.chat-compose textarea { flex: 1; min-height: 44px; max-height: 220px; resize: none; }
.chat-compose .btn { height: 44px; }
.chat-hint { margin: 0; padding: 0 16px 12px; min-height: 12px; }
.chat-steps { margin: 0; padding-left: 1.2em; display: grid; gap: 10px; font-size: 13.5px; color: var(--tx-2); }
.chat-steps b { color: var(--tx); }
@media (max-width: 1100px) { .chat-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .chat-desk { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .chat-side { max-height: none; }
  .chat-desk .chat-main { display: none; }
  .chat-desk.has-sel .chat-side { display: none; }
  .chat-desk.has-sel .chat-main { display: flex; height: calc(100vh - 150px); height: calc(100dvh - 150px); }
  .chat-back { display: grid; }
  .chat-m { max-width: 88%; }
  .chat-avail small { display: none; }
}
@media (max-width: 900px) { body:has(.chat-desk.has-sel) .chat-kpis, body:has(.chat-desk.has-sel) .page-head .sub { display: none; } }
.chat-test { display: flex; gap: 8px; }
.chat-test input { flex: 1; min-width: 0; }
.chat-test-out { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--bg-3); font-size: 13px; display: grid; gap: 6px; }
.chat-test-out p { margin: 0; white-space: pre-wrap; color: var(--tx-2); }
.chat-test-out small { color: var(--mut); font-family: var(--f-mono); font-size: 11.5px; overflow-wrap: anywhere; }
.chat-test-out.is-ok b { color: var(--ok); } .chat-test-out.is-bad b { color: var(--bad); font-weight: 500; }
.ai-tests { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 700px) { .ai-tests { width: 100%; justify-content: stretch; } .ai-tests .btn { flex: 1; } }

/* ── Agreements ─────────────────────────────────────── */
.fgrid > .span-2 { grid-column: 1 / -1; }
.stack-sm { display: flex; flex-direction: column; gap: 4px; }
form.inline { display: inline; margin: 0; }
.sticky-save { position: sticky; bottom: 14px; z-index: 5; padding: 10px; margin: 0 -10px; border-radius: 14px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.agr-new { display: flex; flex-direction: column; gap: 26px; }
.agr-new-opts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 0 18px; align-items: end; }
.agr-new-opts .field { margin-bottom: 0; }
.agr-cat-h { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); margin: 0 0 12px; display: flex; gap: 10px; align-items: baseline; }
.agr-cat-h .ar-inline { text-transform: none; letter-spacing: 0; font-weight: 500; }
.agr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.agr-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 150px; padding: 18px 18px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg-2); color: var(--tx); text-align: left; font: inherit; cursor: pointer; transition: border-color .15s, transform .15s, background .15s; }
.agr-card:hover { border-color: var(--gold); transform: translateY(-2px); background: var(--bg-3); }
.agr-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.agr-card b { font-size: 14.5px; font-weight: 600; margin-top: 8px; }
.agr-card small { color: var(--mut); font-size: 12.5px; line-height: 1.45; }
.agr-card-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--gold-soft); color: var(--gold); }
.agr-card-ar { font-size: 13.5px; color: var(--tx-2); }
.agr-card-go { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 500; color: var(--mut-2); transition: color .15s; }
.agr-card:hover .agr-card-go { color: var(--gold); }
.agr-us { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px; border-radius: 12px; background: var(--bg-3); border: 1px solid var(--line); }
.agr-us > div { display: flex; flex-direction: column; min-width: 0; }
.agr-us-k { font: 600 10.5px var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); background: var(--gold-soft); padding: 4px 8px; border-radius: 6px; }
.agr-body { width: 100%; min-height: 460px; font-family: var(--f-mono); font-size: 12.8px; line-height: 1.7; resize: vertical; tab-size: 2; }
.agr-body[dir="rtl"] { font-family: var(--f-ar); font-size: 15px; line-height: 1.9; }
.agr-edit [hidden], .agr-edit .is-hidden { display: none !important; }
.agr-send { margin: 14px 0 10px; }
.agr-link { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; }
.agr-link input { flex: 1; min-width: 0; height: 34px; font-size: 11.5px !important; }
.agr-paper { margin: 4px 0 6px; font-size: 13px; }
.agr-paper summary { cursor: pointer; color: var(--mut); display: inline-flex; gap: 6px; align-items: center; padding: 6px 0; list-style: none; }
.agr-paper summary::-webkit-details-marker { display: none; }
.agr-paper summary:hover, .agr-paper[open] summary { color: var(--tx); }
.agr-paper form { padding: 10px 0 4px; }
.agr-timeline { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.agr-timeline li { position: relative; padding-left: 22px; display: flex; flex-direction: column; font-size: 13px; }
.agr-timeline li::before { content: ""; position: absolute; left: 2px; top: 4px; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--line-3); background: var(--bg-2); }
.agr-timeline li:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: 17px; bottom: -10px; width: 1px; background: var(--line); }
.agr-timeline li.done::before { background: var(--gold); border-color: var(--gold); }
.agr-timeline b { font-weight: 500; }
.agr-timeline time { color: var(--mut); font-size: 12px; }
.agr-hash { margin: 12px 0 0; }
.agr-hash code { font-size: 11px; word-break: break-all; }
.agr-pv { position: relative; height: 520px; overflow: hidden; background: #E9E6E0; border-top: 1px solid var(--line); border-radius: 0 0 16px 16px; }
.agr-pv iframe { position: absolute; top: 0; left: 0; width: 250%; height: 250%; border: 0; transform: scale(.4); transform-origin: 0 0; background: #fff; }
.agr-tpl-group { margin-bottom: 18px; }
.agr-tpl-group tr.is-off td:not(:first-child) { opacity: .5; }
@media (max-width: 760px) {
  .agr-new-opts { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .agr-cards { grid-template-columns: minmax(0, 1fr); }
  .agr-card { min-height: 0; }
  .agr-body { min-height: 360px; }
  .agr-pv { height: 420px; }
}

/* pricing on/off switch (Content → Pricing) */
.pricing-switch { display: flex; align-items: center; gap: 16px; padding: 16px 20px; margin-bottom: 18px; }
.pricing-switch .ps-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; flex: none; }
.pricing-switch.is-on .ps-ic { background: var(--ok-s); color: var(--ok); }
.pricing-switch.is-off .ps-ic { background: var(--warn-s); color: var(--warn); }
.pricing-switch .ps-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.pricing-switch .ps-body b { font-size: 14.5px; font-weight: 600; }
.pricing-switch .ps-body small { color: var(--mut); font-size: 12.5px; line-height: 1.45; }
.pricing-switch form { margin: 0; flex: none; }
@media (max-width: 640px) { .pricing-switch { flex-wrap: wrap; } .pricing-switch form, .pricing-switch form .btn { width: 100%; } }

/* ---------- session replay (Overview → Session replay) ---------- */
.rec-tabs a span { display: inline; }
.rec-kpis .kpi-foot { min-height: 18px; }
.rec-filters { align-items: center; }
.rec-filters .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rec-ff { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.rec-ff select { height: 34px; font-size: 13px; max-width: 220px; }
.rec-filters .rec-ff { flex-basis: 100%; }
.rec-table tr.is-new td:nth-child(2) b { color: var(--tx); font-weight: 600; }
.rec-table tr:not(.is-new) td:nth-child(2) b { font-weight: 500; color: var(--tx-2); }
.rec-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.rec-star { color: var(--gold); display: inline-flex; }
.rec-star svg { fill: currentColor; }
.rec-journey code, .rec-pages code, .hm-head code, .rec-funnel code, .rec-form code { font: 12px var(--f-mono); color: var(--tx-2); background: var(--bg-3); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.rec-journey { max-width: 340px; }
.rec-dev { display: inline-flex; align-items: center; gap: 7px; }
.rec-dev svg { color: var(--mut); }
.rec-sig { display: flex; flex-wrap: wrap; gap: 5px; max-width: 260px; }
.rec-empty svg { color: var(--mut-2); margin-bottom: 12px; }
.rec-empty b { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.rec-empty p { max-width: 460px; }
.rec-pad { padding: 0 22px 22px; }
.em-hint { margin-top: 14px; }
.seg-n { font-size: 11px; font-weight: 600; color: var(--mut-2); background: var(--bg-3); border-radius: 9px; padding: 0 6px; line-height: 17px; }
.seg .is-on .seg-n { color: var(--tx-2); background: var(--bg-3); }

/* player */
.rp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.rp-main { min-width: 0; position: sticky; top: calc(var(--tb-h) + 12px); }
.rp-stage { position: relative; width: 100%; aspect-ratio: 16 / 10.4; max-height: 76vh; min-height: 340px; border-radius: var(--r); background: radial-gradient(120% 80% at 50% 0%, var(--bg-4), var(--bg-2)); border: 1px solid var(--line); overflow: hidden; }
.rp-stage.is-tall { aspect-ratio: auto; height: min(80vh, 860px); }
.rp-stage:fullscreen { height: 100vh; max-height: none; aspect-ratio: auto; border-radius: 0; background: #070708; }
.rp-screen { position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 30px 70px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08); }
.rp-bar { height: 34px; display: flex; align-items: center; gap: 12px; padding: 0 12px; background: #1b1b1f; color: #bdb7ac; border-bottom: 1px solid #000; }
.rp-dots { display: flex; gap: 6px; } .rp-dots i { width: 10px; height: 10px; border-radius: 50%; background: #3a3a40; }
.rp-url { flex: 1; display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border-radius: 6px; background: #0f0f12; font: 12px var(--f-mono); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rp-url svg { flex: none; opacity: .7; }
.rp-view { position: relative; height: calc(100% - 34px); overflow: hidden; }
.rp-frame { display: block; border: 0; width: 100%; height: 100%; background: #fff; pointer-events: none; }
.rp-overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.rp-cursor { position: absolute; left: 0; top: 0; margin: -3px 0 0 -4px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); transition: transform 60ms linear; z-index: 3; }
.rp-ripple { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 3px solid #6FA8BA; background: rgba(111,168,186,.25); animation: rpRipple .9s ease-out forwards; z-index: 2; }
.rp-ripple.is-rage { border-color: #E0533F; background: rgba(224,83,63,.3); }
.rp-ripple.is-dead { border-color: #D9B061; background: rgba(217,176,97,.22); border-style: dashed; }
@keyframes rpRipple { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.rp-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; color: var(--mut); font-size: 13.5px; background: var(--bg-2); z-index: 5; line-height: 1.6; }
.spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--gold); animation: rpSpin .8s linear infinite; flex: none; }
@keyframes rpSpin { to { transform: rotate(360deg); } }
.rp-skip { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 14px; border-radius: 30px; background: rgba(10,10,11,.85); color: var(--gold-2); font-size: 12.5px; font-weight: 500; z-index: 4; backdrop-filter: blur(6px); }
.rp-controls { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 10px 14px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.rp-play { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--gold); color: var(--on-gold); cursor: pointer; flex: none; transition: transform .15s; }
.rp-play:hover { transform: scale(1.06); }
.rp-time { font-size: 12.5px; color: var(--tx-2); min-width: 92px; }
.rp-track { position: relative; flex: 1; height: 28px; cursor: pointer; touch-action: none; min-width: 120px; }
.rp-rail { position: absolute; left: 0; right: 0; top: 12px; height: 4px; border-radius: 4px; background: var(--bg-5); overflow: hidden; }
.rp-prog { height: 100%; width: 0; background: var(--gold); }
.rp-knob { position: absolute; top: 7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--tx); box-shadow: 0 0 0 3px var(--gold-soft-2); pointer-events: none; }
.rp-marks { position: absolute; inset: 0; pointer-events: none; }
.rp-mk { position: absolute; top: 4px; width: 3px; height: 8px; margin-left: -1px; border-radius: 2px; }
.rp-mk-c { background: var(--info); } .rp-mk-r { background: var(--bad); } .rp-mk-d { background: var(--warn); } .rp-mk-e { background: #E0533F; } .rp-mk-fs { background: var(--ok); }
.rp-marks .rp-mk-c { opacity: .55; }
.rp-marks .rp-mk-r, .rp-marks .rp-mk-e { top: 1px; height: 11px; width: 4px; }
.rp-mk-page { background: var(--tx-2); top: 16px; height: 10px; width: 2px; }
.rp-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--tx-2); cursor: pointer; white-space: nowrap; }
.rp-toggle input { accent-color: var(--gold); }
.rp-full { width: 34px; padding: 0; justify-content: center; }
.rp-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; padding: 0 4px; }
.rp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rp-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.rp-legend .rp-keys { margin-left: auto; color: var(--mut-2); }
.rp-side { gap: 18px; }
.rp-side .card { padding: 18px; }
.rp-side .card-head { margin-bottom: 12px; }
.rp-side .card-head h2 { display: flex; align-items: center; gap: 8px; }
.rp-side .btn-row form { margin: 0; }
.rec-starbtn.is-on { color: var(--gold); border-color: var(--gold-soft-2); }
.rec-starbtn.is-on svg { fill: currentColor; }
.rec-lead { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 12px; border-radius: 11px; background: var(--ok-s); color: var(--tx); }
.rec-lead svg:first-child { color: var(--ok); }
.rec-lead span { flex: 1; display: flex; flex-direction: column; line-height: 1.35; }
.rec-lead small { color: var(--mut); font-size: 12px; }
.rec-dl { margin-bottom: 12px; }
.rec-dl > div { padding: 7px 0; }
.rec-dl dd { text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }
.rec-sigs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.rec-sigs-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 14px; }
.rec-sigs > div { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border-radius: 10px; background: var(--bg-3); border: 1px solid var(--line); min-width: 0; }
.rec-sigs b { font-size: 17px; font-weight: 500; }
.rec-sigs small { font-size: 11px; color: var(--mut); line-height: 1.25; }
.rec-sigs .is-bad { background: var(--bad-s); border-color: transparent; }
.rec-sigs .is-bad b { color: var(--bad); }
.rec-pages .row-item { cursor: pointer; }
.rec-pages .row-item.is-on { background: var(--gold-soft); }
.rec-pages .row-item.is-on .ri-ic { background: var(--gold); color: var(--on-gold); }
.rec-pages .ri-ic { font-size: 12px; font-weight: 600; width: 26px; height: 26px; border-radius: 7px; }
.rp-logcard { padding-bottom: 8px !important; }
.rp-log { list-style: none; margin: 0 -8px; padding: 0; max-height: 380px; overflow-y: auto; }
.rp-li { display: flex; gap: 10px; padding: 7px 8px; border-radius: 9px; font-size: 12.5px; line-height: 1.45; cursor: pointer; align-items: baseline; }
.rp-li:hover { background: var(--bg-3); }
.rp-li time { font: 11.5px var(--f-mono); color: var(--mut-2); min-width: 38px; flex: none; }
.rp-li span { min-width: 0; overflow-wrap: anywhere; color: var(--tx-2); }
.rp-li span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; background: var(--mut-2); vertical-align: 1px; }
.rp-li code { font: 11.5px var(--f-mono); color: var(--tx); }
.rp-li-page span { color: var(--tx); font-weight: 500; } .rp-li-page span::before { background: var(--tx-2); border-radius: 2px; }
.rp-li-click span::before { background: var(--info); }
.rp-li-rage span::before { background: var(--bad); } .rp-li-rage span { color: var(--bad); }
.rp-li-dead span::before { background: var(--warn); }
.rp-li-error span::before { background: #E0533F; } .rp-li-error span { color: var(--bad); }
.rp-li-form span::before { background: var(--violet); }
.rp-li-send span::before { background: var(--ok); } .rp-li-send span { color: var(--ok); font-weight: 500; }
.rp-li-away span { color: var(--mut); }
.rp-nav { display: flex; justify-content: space-between; gap: 8px; }

/* heatmaps */
.hm-bar .rec-ff select { max-width: 320px; min-width: 220px; }
.hm-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.hm-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.hm-tip { color: var(--mut-2); font-size: 11.5px; }
.hm-scale { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--mut); }
.hm-scale i { order: 1; width: 90px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #1e3a8a, #0ea5e9, #22c55e, #facc15, #f97316, #dc2626); }
.hm-scale small:last-child { order: 2; }
.hm-stage { position: relative; min-height: 480px; overflow: hidden; background: var(--bg-3); }
.hm-screen { position: absolute; left: 0; top: 0; transform-origin: 0 0; background: #fff; }
.hm-frame { display: block; border: 0; width: 100%; height: 100%; background: #fff; }
.hm-side .card { padding: 18px; }
.hm-side .card-head { margin-bottom: 12px; }
.hm-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.hm-top li { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; font-size: 12.5px; overflow: hidden; }
.hm-top li > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--gold-soft); border-radius: 8px; z-index: 0; }
.hm-top .hm-el, .hm-top b { position: relative; z-index: 1; }
.hm-top .hm-el { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tx-2); }
.hm-top code { font: 11.5px var(--f-mono); }
.hm-top b { font-weight: 600; font-size: 12.5px; }
.hm-watch { margin-top: 2px; }

/* insights */
.rec-funnel-form { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.rec-funnel-form select { height: 32px; font-size: 12.5px; max-width: 160px; }
.rec-funnel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.rf-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; margin-bottom: 6px; }
.rf-top > span:first-child { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.rf-top > span:first-child > b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--bg-4); font-size: 11px; }
.rf-bar { height: 10px; border-radius: 6px; background: var(--bg-4); overflow: hidden; }
.rf-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--gold-3), var(--gold)); transform-origin: 0 50%; animation: grow .6s var(--ease); }
.rf-drop { display: block; margin-top: 4px; font-size: 11.5px; }
.rec-form + .rec-form { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.rec-fields { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.rec-fields b { color: var(--mut); font-weight: 600; }
.rec-quit { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 10px; color: var(--tx-2); }
.rec-quit svg { color: var(--warn); }
.rec-depth { display: inline-block; width: 46px; height: 5px; border-radius: 4px; background: var(--bg-5); overflow: hidden; margin-right: 8px; vertical-align: middle; }
.rec-depth i { display: block; height: 100%; background: var(--gold); }
.rec-err b { font-weight: 500; font-family: var(--f-mono); font-size: 12.5px; color: var(--bad); word-break: break-word; }
.card.flush + .card.flush, .grid + .card.flush { margin-top: 18px; }

@media (max-width: 1200px) {
  .rp-layout, .hm-layout { grid-template-columns: minmax(0, 1fr); }
  .rp-main { position: static; }
  .rec-kpis.kpis-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .rec-kpis, .rec-kpis.kpis-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-stage { min-height: 260px; }
  .rp-stage.is-tall { height: 70vh; }
  .rp-controls { flex-wrap: wrap; gap: 10px; }
  .rp-track { order: 5; flex-basis: 100%; }
  .rp-legend .rp-keys { display: none; }
  .rec-ff select, .hm-bar .rec-ff select { max-width: none; min-width: 0; flex: 1 1 140px; }
  .rec-sigs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rec-tabs a span { display: none; }
  .hm-stage { min-height: 360px; }
  .hm-bar .seg { max-width: 100%; overflow-x: auto; }
  .hm-bar .seg a { flex: none; }
  .hm-tip { display: none; }
}

/* ==========================================================================
   Live view — globe of visitors, live panels
   ========================================================================== */
.live-pill { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 13px; border-radius: 999px; background: var(--ok-s); color: var(--ok); font-size: 12.5px; font-weight: 600; }
.live-pill i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: lvPulse 1.8s infinite; }
.live-pill.is-off { background: var(--warn-s); color: var(--warn); }
.live-pill.is-off i { animation: none; }
@keyframes lvPulse { 0% { box-shadow: 0 0 0 0 rgba(127,183,154,.55); } 70% { box-shadow: 0 0 0 8px rgba(127,183,154,0); } 100% { box-shadow: 0 0 0 0 rgba(127,183,154,0); } }
.lv-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); animation: lvPulse 1.8s infinite; }
.lv-now .big { font-size: 40px; color: var(--gold-2); }
:root[data-theme="light"] .lv-now .big { color: var(--gold-2); }
.lv-geo { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; border-color: var(--gold-soft-2); background: linear-gradient(110deg, var(--gold-soft), transparent 60%), var(--bg-2); }
.lv-geo-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--gold-soft); color: var(--gold); }
.lv-geo-t { flex: 1; min-width: 0; }
.lv-geo-t h2 { font: 600 15px/1.3 var(--f-ui); margin-bottom: 4px; }
.lv-geo-t p { color: var(--mut); font-size: 13px; line-height: 1.55; max-width: 76ch; }
.lv-geo-msg { margin-top: 6px; color: var(--gold-2) !important; }
.lv-geo .btn.is-busy svg { animation: lvSpin 1s linear infinite; }
@keyframes lvSpin { to { transform: rotate(360deg); } }

.lv-main { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; margin-bottom: 18px; }
.lv-side { display: grid; gap: 18px; align-content: start; }
.lv-globe-card { min-height: 520px; display: flex; }
.lv-globe { position: relative; flex: 1; min-height: 520px; background: radial-gradient(70% 70% at 50% 45%, var(--gold-soft), transparent 70%); cursor: grab; touch-action: none; }
.lv-globe.is-drag { cursor: grabbing; }
.lv-globe canvas { position: absolute; inset: 0; display: block; }
.lv-globe-top { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; justify-content: flex-end; pointer-events: none; }
.lv-globe-top > * { pointer-events: auto; }
.lv-legend { position: absolute; left: 18px; bottom: 16px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--tx-2); pointer-events: none; }
.lv-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.lv-l-now { background: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft-2); }
.lv-l-day { background: var(--info); }
.lv-tip { position: absolute; z-index: 3; transform: translate(-50%, -100%); padding: 8px 11px; border-radius: 10px; background: var(--bg-5); box-shadow: var(--shadow-lg); font-size: 12.5px; white-space: nowrap; pointer-events: none; display: grid; gap: 2px; }
.lv-tip span { color: var(--mut); }

.lv-locs, .lv-list, .lv-funnel, .lv-feed { list-style: none; margin: 0; padding: 0; }
.lv-locs li, .lv-list li, .lv-funnel li { display: grid; grid-template-columns: minmax(0, 1fr) 90px 34px; align-items: center; gap: 12px; padding: 8px 0; font-size: 13px; }
.lv-locs li + li, .lv-list li + li, .lv-funnel li + li { border-top: 1px solid var(--line); }
.lv-locs i, .lv-list i, .lv-funnel i { display: block; height: 6px; border-radius: 6px; background: var(--bg-4); overflow: hidden; }
.lv-locs em, .lv-list em, .lv-funnel em { display: block; height: 100%; border-radius: inherit; background: var(--gold); transition: width .6s var(--ease); }
.lv-list em { background: var(--c2); }
.lv-locs b, .lv-list b, .lv-funnel b { text-align: right; font-weight: 600; }
.lv-c { display: inline-flex; align-items: center; min-width: 0; }
.lv-c > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-c .flag-code { flex: none; }
.lv-approx { margin: 0 6px 0 -4px; color: var(--warn); font-weight: 700; cursor: help; }
.lv-path { font: 500 12.5px/1.3 var(--f-mono); color: var(--tx-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: 100%; vertical-align: bottom; }
a.lv-path:hover { color: var(--gold); }
.lv-funnel li span { color: var(--tx-2); }
.lv-funnel .lv-funnel-done em { background: var(--ok); }
.lv-funnel .lv-funnel-done span { color: var(--ok); font-weight: 600; }
.lv-empty { display: block !important; color: var(--mut); font-size: 13px; padding: 14px 0 !important; text-align: left; }
td.lv-empty { padding: 22px !important; text-align: center; }

.lv-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.lv-grid2 { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
@media (min-width: 1680px) { .lv-grid2 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.lv-hours { position: relative; display: grid; grid-template-columns: repeat(24, 1fr); align-items: end; gap: 3px; height: 150px; padding-bottom: 20px; }
.lv-hours > span { position: relative; height: 100%; display: flex; align-items: flex-end; }
.lv-hours i, .lv-hours em { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 3px 3px 0 0; }
.lv-hours i { background: var(--bg-4); }
.lv-hours em { left: 18%; right: 18%; background: var(--gold); transition: height .6s var(--ease); }
.lv-hours .is-now em { background: var(--gold-2); box-shadow: 0 0 12px var(--gold-soft-2); }
.lv-hours-x { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; font: 500 10.5px/1 var(--f-mono); color: var(--mut-2); }
.lv-key-y { display: inline-flex; align-items: center; gap: 6px; }
.lv-key-y::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--bg-4); }
.lv-dev { margin-top: 16px; }
.lv-dev-bar { display: flex; height: 8px; border-radius: 8px; overflow: hidden; gap: 2px; }
.lv-dev-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 12px; color: var(--mut); }
.lv-dev-key i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
.lv-dev-desktop { background: var(--c1); } .lv-dev-mobile { background: var(--c2); } .lv-dev-tablet { background: var(--c3); }
.lv-table td { vertical-align: middle; }
.lv-table td:nth-child(2) { max-width: 260px; }
.lv-feed { max-height: 460px; overflow: auto; padding: 0 22px 14px; }
.lv-feed li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 10px 0; font-size: 13px; }
.lv-feed li + li { border-top: 1px solid var(--line); }
.lv-feed time { color: var(--mut); font-size: 12px; white-space: nowrap; }
.lv-f-t { min-width: 0; color: var(--tx-2); }
.lv-f-t b { color: var(--tx); font-weight: 600; }
.lv-f-ic .flag-code { margin: 0; }
.lv-f-lead .lv-f-ic::before, .lv-f-chat .lv-f-ic::before { content: ""; display: block; width: 26px; height: 18px; border-radius: 4px; background: var(--ok-s); box-shadow: inset 0 0 0 1px var(--ok); }
.lv-f-chat .lv-f-ic::before { background: var(--info-s); box-shadow: inset 0 0 0 1px var(--info); }
@media (max-width: 1280px) { .lv-main { grid-template-columns: minmax(0, 1fr) 320px; } .lv-grid3 { grid-template-columns: 1fr 1fr; } .lv-grid3 > :last-child { grid-column: span 2; } }
@media (max-width: 1080px) { .lv-main { grid-template-columns: 1fr; } .lv-kpis.kpis-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .lv-globe-card, .lv-globe { min-height: 360px; }
  .lv-grid3 { grid-template-columns: 1fr; } .lv-grid3 > :last-child { grid-column: auto; }
  .lv-kpis.kpis-5 { grid-template-columns: 1fr 1fr; } .lv-kpis .lv-now { grid-column: span 2; }
  .lv-geo { flex-direction: column; align-items: flex-start; }
}

/* ---------- free e-books ---------- */
.lv-f-ebook .lv-f-ic::before { content: ""; display: block; width: 26px; height: 18px; border-radius: 4px; background: rgba(111,168,186, .16); box-shadow: inset 0 0 0 1px #6FA8BA; }
.pdff { display: grid; gap: 8px; justify-items: start; }
.pdff-cur { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 10px; background: var(--bg-2, rgba(127,127,127,.06)); box-shadow: inset 0 0 0 1px var(--line, rgba(127,127,127,.18)); }
.pdff-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: rgba(111,168,186, .14); color: #A8884E; flex: none; }
.pdff-meta { display: grid; gap: 1px; flex: 1; min-width: 0; }
.pdff-meta b { font-weight: 600; font-size: 13px; }
.pdff-meta small { color: var(--muted, #8C877E); font-size: 12px; }
.pdff-none { margin: 0; font-size: 13px; color: var(--muted, #8C877E); }
.pdff-rm { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted, #8C877E); cursor: pointer; }
.pdff-up.is-picked { box-shadow: inset 0 0 0 1px #6FA8BA; color: #A8884E; }
.eb-spark-card { margin-bottom: 18px; }
.eb-spark { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); align-items: end; gap: 4px; height: 84px; padding: 4px 2px 0; }
.eb-spark i { display: block; height: max(3px, var(--h)); border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, #A3CEDB, #6FA8BA); opacity: .9; }
.eb-steps { display: inline-flex; gap: 4px; }
.eb-steps i { width: 14px; height: 6px; border-radius: 3px; background: var(--line, rgba(127,127,127,.22)); }
.eb-steps i.is-on { background: #6FA8BA; }

/* ==========================================================================
   Sorat AI additions
   ========================================================================== */
.wordmark { font-family: var(--f-ui); letter-spacing: -.01em; font-size: 16px; font-weight: 600; }
.sb-brand .wordmark { font-size: 16px; }
.auth-tag { letter-spacing: .06em; text-transform: none; }
.auth-hero h2 { line-height: 1.06; letter-spacing: -.035em; }
.auth-mark { aspect-ratio: 582 / 660; }
.page-head h1 { letter-spacing: -.025em; }
.page-head h1 .ar-inline { font-weight: 500; font-size: .62em; margin-inline-start: 8px; letter-spacing: 0; }
.kpi-word { display: flex; align-items: center; min-height: 33px; font-size: 15px; }
.kpi-word .badge { font-size: 13px; height: 28px; padding: 0 11px; }
.dd-lead .dd-ic { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--mute-s); color: var(--mut); }
.dd-ic.tone-warn { background: var(--warn-s); color: var(--warn); } .dd-ic.tone-bad { background: var(--bad-s); color: var(--bad); } .dd-ic.tone-info { background: var(--info-s); color: var(--info); }
.link-list form { margin: 0; }
.ll-btn { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: 11px; color: var(--tx); background: none; border: 0; text-align: start; cursor: pointer; font: inherit; }
.ll-btn:hover { background: var(--bg-3); }
.ll-btn > .ic:first-child { color: var(--gold); }
.ll-btn > .ic:last-child { margin-left: auto; color: var(--mut-2); }
.ll-btn span { display: flex; flex-direction: column; line-height: 1.35; } .ll-btn b { font-weight: 500; } .ll-btn small { color: var(--mut); font-size: 12px; }
.inline-check { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: 8px; font-weight: 500; cursor: pointer; }
.bi-label code { margin-inline-start: auto; font-size: 10.5px; opacity: .7; }
.bi-label .tag { margin-inline-start: 8px; color: var(--gold); border-color: var(--gold-soft-2); background: var(--gold-soft); }
.field.is-edited .bi-col input, .field.is-edited .bi-col textarea { border-color: var(--gold-soft-2); }
.doc-prose .updated { color: var(--mut); font-size: 13px; }
.doc-prose .summary { border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 16px; margin: 12px 0; background: var(--bg-3); }
.doc-prose .summary > p:first-child { font-weight: 600; margin-bottom: 6px; }
.doc-prose .box, .doc-prose .mailbox { border: 1px dashed var(--line-3); border-radius: 12px; padding: 12px 16px; margin: 12px 0; }
.rte-area.ar { font-family: var(--f-ar); }
.thumb .ic { color: var(--gold); }
.crud-table .ci-text small.ar-inline { direction: rtl; text-align: left; }
.error-card .vx-mark { color: var(--gold); }
.empty-mark { color: var(--bg-5); }
:root[data-theme="light"] .sb-mark { color: var(--tx); }
.site-status.is-private .pulse-dot { background: var(--warn); box-shadow: 0 0 0 0 rgba(245,188,106,.5); }
.mono-link { word-break: break-all; }
.auth-foot .ar { font-weight: 500; }
.auth-hero { max-width: 640px; }
.auth-hero h2 { font-size: clamp(36px, 3.7vw, 56px); }
.bi-label { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.bi-label > small.help { flex-basis: 100%; }
.btn-primary { background: linear-gradient(180deg, var(--gold-2), var(--gold) 70%); }