/* ==========================================================================
   J.BASSIM — studio panel. Same brand as the website: paper, forest ink,
   sage and oak; Fraunces for headings, Outfit for everything else,
   Tajawal in Arabic. Built phone-first, works right-to-left.
   Layout and components follow the CaliWood panel.
   ========================================================================== */

:root {
  --oak: #C8A27A; --oak-2: #D8B690; --walnut: #6B4A33; --sage: #5D7466; --sage-l: #9FB5A7;
  --y: var(--oak); --k: #141816; --k2: #1B201D; --k3: #262C28; --k4: #37403A;
  --bg: #EEEFEB; --bg2: #E2E4DE; --card: #FFFFFF; --line: rgba(20, 24, 22, .10); --line2: rgba(20, 24, 22, .2);
  --tx: #141816; --tx2: #3F4642; --tx3: #69716C;
  --good: #2F6B45; --bad: #A8322B;
  --f: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --mono: "Outfit", system-ui, sans-serif;
  --r: 8px; --side: 252px; --top: 70px;
  --hazard: linear-gradient(90deg, var(--walnut), var(--oak) 45%, var(--sage));
  --grain: repeating-linear-gradient(100deg, rgba(200, 162, 122, .07) 0 2px, transparent 2px 9px);
  --ease: cubic-bezier(.2, .75, .1, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--tx); font: 400 15px/1.5 var(--f); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
code { font: 500 .88em var(--mono); background: var(--bg2); padding: 1px 5px; border-radius: 3px; }
:focus-visible { outline: 3px solid var(--y); outline-offset: 2px; }
.ic { width: 18px; height: 18px; flex: none; }
.muted { color: var(--tx3); font-size: 13.5px; }
.eyebrow { font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tx3); }
.strong { font-weight: 700; text-decoration: none; }
.d-block { display: block; }
.r { text-align: right; }
.nowrap { white-space: nowrap; }
.late { color: var(--bad); }
.val { font-family: var(--mono); font-size: .9em; color: var(--good); }
.stack { display: grid; gap: 18px; align-content: start; }

/* ------------------------------------------------------------------ shell */
.app { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 100vh; }
.side {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  background: var(--k); color: rgba(238, 239, 235, .8); padding: 18px 14px; overflow-y: auto; z-index: 50;
}
.side::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 6px; background: var(--hazard); opacity: .9; }
.side__brand { display: flex; align-items: center; gap: 11px; padding: 6px 8px 20px; text-decoration: none; color: #EEEFEB; }
.side__mk { width: 36px; height: 36px; flex: none; }
.side__brand b { display: block; font: 900 19px/1 var(--f); letter-spacing: .05em; text-transform: uppercase; }
.side__brand i { display: block; margin-top: 4px; font: 500 9.5px/1 var(--mono); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: rgba(238, 239, 235, .5); }
.side__nav { display: grid; gap: 2px; }
.side__grp { margin: 16px 10px 6px; font: 500 9.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(238, 239, 235, .38); }
.side__link { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 4px; text-decoration: none; font-weight: 600; font-size: 14.5px; transition: background .2s, color .2s; }
.side__link:hover { background: rgba(238, 239, 235, .06); color: #fff; }
.side__link.on { background: var(--y); color: var(--k); }
.side__link .ic { width: 19px; height: 19px; }
.pip { margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--y); color: var(--k); font: 700 11px/20px var(--mono); font-style: normal; text-align: center; }
.side__link.on .pip { background: var(--k); color: var(--y); }
.side__foot { margin-top: auto; padding-top: 18px; display: grid; gap: 2px; border-top: 1px solid rgba(238, 239, 235, .1); }
.side__link--sm { font-size: 13px; font-weight: 500; padding: 8px 12px; color: rgba(238, 239, 235, .6); }
.scrim { display: none; }

.main { min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 18px; min-height: var(--top); padding: 12px clamp(16px, 3vw, 34px); background: rgba(238, 239, 235, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top__title h1 { font: 900 26px/1 var(--f); text-transform: uppercase; letter-spacing: -.005em; }
.top__title p { margin-top: 4px; font: 500 11px/1 var(--mono); letter-spacing: .06em; color: var(--tx3); }
.search { position: relative; margin-left: auto; width: min(340px, 34vw); }
.search .ic { position: absolute; left: 12px; top: 50%; margin-top: -9px; color: var(--tx3); }
.search input { width: 100%; height: 42px; padding: 0 40px 0 38px; border: 1px solid var(--line2); border-radius: 4px; background: #fff; font: 400 14px var(--f); }
.search kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 500 11px var(--mono); color: var(--tx3); border: 1px solid var(--line2); border-radius: 3px; padding: 1px 6px; }
.burger { display: none; width: 42px; height: 42px; border-radius: 4px; background: var(--k); position: relative; flex: none; }
.burger span { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--y); transition: transform .3s var(--ease), top .3s var(--ease); }
.burger span:first-child { top: 16px; } .burger span:last-child { top: 24px; }
.burger[aria-expanded="true"] span:first-child { top: 20px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { top: 20px; transform: rotate(-45deg); }
.content { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: start; padding: clamp(16px, 2.6vw, 30px) clamp(16px, 3vw, 34px) 40px; max-width: 1400px; width: 100%; }
.appfoot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 18px clamp(16px, 3vw, 34px) 26px; font: 500 11px var(--mono); color: var(--tx3); }
.tabbar { display: none; }

/* ----------------------------------------------------------------- alerts */
.alert { display: flex; align-items: flex-start; gap: 10px; margin: 16px clamp(16px, 3vw, 34px) 0; padding: 12px 14px; border-radius: var(--r); font-size: 14px; font-weight: 500; }
.alert .ic { margin-top: 1px; }
.alert--good { background: #E3F3E6; color: var(--good); }
.alert--bad { background: #FBE4E2; color: var(--bad); }
.alert--warn { background: #FFF1C2; color: #6B5100; }
.login .alert { margin: 0 0 16px; }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 16px; border: 1.5px solid transparent; border-radius: 4px; font: 700 13px/1 var(--f); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .15s; }
.btn:active { transform: translateY(1px); }
.btn .ic { width: 17px; height: 17px; }
.btn--y { background: var(--y); color: var(--k); }
.btn--y:hover { background: var(--yellow-2); }
.btn--dark { background: var(--k); color: #EEEFEB; }
.btn--dark:hover { color: var(--y); }
.btn--line { border-color: var(--line2); background: #fff; color: var(--tx); }
.btn--line:hover { border-color: var(--k); }
.btn--sm { height: 36px; padding: 0 12px; font-size: 12px; }
.btn--wide { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.iconbtn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 4px; border: 1px solid var(--line2); background: #fff; text-decoration: none; font-size: 18px; line-height: 1; transition: background .2s, border-color .2s; }
.iconbtn:hover { border-color: var(--k); background: var(--y); }
.iconbtn .ic { width: 17px; height: 17px; }
.btnrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.card__hd .btnrow { margin-top: 0; }
.lnk { display: inline-flex; align-items: center; gap: 5px; font: 600 13px var(--f); text-decoration: none; border-bottom: 2px solid var(--y); padding-bottom: 1px; white-space: nowrap; }
.lnk .ic { width: 14px; height: 14px; }
.lnk:hover { background: var(--y); }
.lnkbtn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 6px 0; }
.danger-t { color: var(--bad); }
.xbtn { width: 28px; height: 28px; border-radius: 50%; color: var(--tx3); font-size: 20px; line-height: 1; }
.xbtn:hover { background: #FBE4E2; color: var(--bad); }
.back { display: inline-block; font: 600 13px var(--f); text-decoration: none; color: var(--tx3); }
.back:hover { color: var(--tx); }

/* ------------------------------------------------------------------ cards */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(16px, 2vw, 24px); min-width: 0; }
.card--flush { padding: 0; overflow-x: auto; }
.card--y { background: var(--y); border-color: var(--y); }
.card--y .eyebrow { color: rgba(20, 24, 22, .7); }
.card__hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 16px; }
.card__hd h2, .card h2 { margin-top: 6px; font: 850 21px/1.1 var(--f); text-transform: uppercase; letter-spacing: -.005em; }
.card__hd p.muted { max-width: 46ch; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.grid2--agenda { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.note { padding: 12px 14px; margin-bottom: 14px; border-left: 4px solid var(--y); background: #F5EEE4; font-size: 14px; border-radius: 0 4px 4px 0; }
.empty { display: grid; justify-items: center; gap: 12px; padding: 26px 12px; text-align: center; color: var(--tx2); }
.empty p { max-width: 52ch; }
.empty__ic { width: 40px; height: 40px; color: var(--tx3); }
.steps { margin-top: 16px; counter-reset: s; display: grid; gap: 10px; }
/* block + absolute counter (a grid here would split the text around <b> and <code>) */
.steps li { counter-increment: s; position: relative; min-height: 24px; padding: 2px 0 0 36px; font-size: 14px; color: var(--tx2); }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--k); color: var(--y); font: 700 12px/24px var(--mono); text-align: center; }
.steps code { word-break: break-all; }

/* ----------------------------------------------------------------- forms */
.fields { display: grid; gap: 14px; }
.fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fields--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fields--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fields.tight { gap: 10px; }
.fields .full, .f.full { grid-column: 1 / -1; }
.f.full-2 { grid-column: span 2; }
.f { display: grid; gap: 6px; align-content: start; min-width: 0; }
.f label, .field__l { display: flex; justify-content: space-between; gap: 8px; font: 500 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tx2); }
/* :where() keeps this base rule at zero specificity, so any class can refine it */
:where(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea) {
  width: 100%; min-height: 42px; padding: 9px 12px; border: 1.5px solid var(--line2); border-radius: 4px; background: #fff;
  font: 400 15px/1.4 var(--f); color: var(--tx); transition: border-color .2s, box-shadow .2s;
}
textarea { resize: vertical; min-height: 80px; }
select { -webkit-appearance: none; appearance: none; padding-right: 34px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141619' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--k); box-shadow: 0 0 0 4px rgba(200, 162, 122, .35); }
input[type=file] { font-size: 13px; max-width: 100%; }
.hint { font-size: 12.5px; color: var(--tx3); line-height: 1.45; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--k); }
.switch { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch span { position: relative; width: 44px; height: 26px; border-radius: 13px; background: var(--bg2); border: 1.5px solid var(--line2); transition: background .2s; }
.switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .25s var(--ease); }
.switch input:checked + span { background: var(--y); border-color: var(--k); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 3px solid var(--k); outline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-block; padding: 8px 11px; border: 1.5px solid var(--line2); border-radius: 4px; font-size: 13px; font-weight: 600; cursor: pointer; background: #fff; transition: background .2s, border-color .2s; }
.chip input:checked + span { background: var(--y); border-color: var(--k); }
.chip input:focus-visible + span { outline: 3px solid var(--k); outline-offset: 2px; }
.formbar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 0; background: linear-gradient(transparent, var(--bg) 30%); }
.inline { display: inline-flex; align-items: center; gap: 8px; }
.bare { border: 0 !important; padding: 0 !important; min-height: 0 !important; box-shadow: none !important; background: transparent !important; font: inherit !important; width: 100%; }
.bare::placeholder { color: var(--tx3); opacity: .6; }

/* ---------------------------------------------------------------- badges */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 4px; border-radius: 20px; font: 600 11.5px/1 var(--f); letter-spacing: .02em; white-space: nowrap; }
.st-new { background: #F3E7D8; color: #7A5230; }
.st-contacted { background: #E3EEF9; color: #1D4E89; }
.st-visit { background: #EEE8FB; color: #4B2C8F; }
.st-quoted { background: #FDEBDD; color: #8A3B0C; }
.st-won { background: #E3F3E6; color: #1E6B34; }
.st-lost { background: #ECEBE7; color: #5E6166; }
.dotst { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.dotst.st-new { background: #C8A27A; } .dotst.st-contacted { background: #3A7BD5; } .dotst.st-visit { background: #7B5CD6; }
.dotst.st-quoted { background: #E4572E; } .dotst.st-won { background: #2FA24F; } .dotst.st-lost { background: #9A9CA0; }
.av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none; background: var(--k); color: var(--y); font: 800 16px/1 var(--f); }
.av--lg { width: 58px; height: 58px; font-size: 24px; }

/* ------------------------------------------------------------- overview */
.today { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 18px; align-items: stretch; padding: clamp(18px, 2.4vw, 28px); border-radius: var(--r); background: var(--k); color: #EEEFEB; position: relative; overflow: hidden; }
.today::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--hazard); }
.today .eyebrow { color: var(--y); }
.today h2 { margin-top: 10px; font: 900 clamp(26px, 3vw, 38px)/.95 var(--f); text-transform: uppercase; }
.today__list { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
.todo { flex: 0 0 220px; display: grid; gap: 4px; align-content: start; padding: 14px; border-radius: 4px; background: var(--k3); text-decoration: none; border-left: 4px solid var(--y); transition: transform .2s; }
.todo:hover { transform: translateY(-2px); }
.todo b { font-size: 16px; }
.todo__k { font: 500 10.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--y); }
.todo__m { font-size: 13px; color: rgba(238, 239, 235, .65); }
.todo__m a { color: var(--y); }
.todo--hot { border-left-color: #FF6B5E; } .todo--hot .todo__k { color: #FF8B80; }
.todo--late { border-left-color: #E4572E; } .todo--late .todo__k { color: #F4A07D; }
.todo--calm { flex-basis: 280px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat { display: grid; gap: 6px; padding: 18px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); text-decoration: none; transition: border-color .2s; min-width: 0; }
a.stat:hover { border-color: var(--k); }
.stat__k { font: 500 10.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tx3); }
.stat__v { font: 900 34px/1 var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat__n { font-size: 12.5px; color: var(--tx3); }
.delta { font: 600 12px var(--mono); }
.delta--up { color: var(--good); } .delta--dn { color: var(--bad); } .delta--flat { color: var(--tx3); }
.chart svg { width: 100%; height: 190px; }
.chart__grid { stroke: var(--line); stroke-dasharray: 3 4; }
.chart__base { stroke: var(--k); stroke-width: 1.5; }
.chart__bar { fill: #D6D0C3; transition: fill .2s; }
.chart__bar.is-recent { fill: var(--k); }
.chart__bar:hover { fill: var(--y); }
.chart__x { display: flex; justify-content: space-between; margin-top: 6px; font: 500 10.5px var(--mono); color: var(--tx3); }
.funnel { display: grid; gap: 8px; }
.funnel a { display: grid; grid-template-columns: 140px minmax(0, 1fr) 34px; align-items: center; gap: 12px; text-decoration: none; font-size: 14px; }
.funnel a:hover .funnel__l { text-decoration: underline; }
.funnel__b { height: 12px; background: var(--bg); border-radius: 6px; overflow: hidden; }
.funnel__b i { display: block; height: 100%; border-radius: 6px; }
.funnel__b i.st-new { background: #C8A27A; } .funnel__b i.st-contacted { background: #3A7BD5; } .funnel__b i.st-visit { background: #7B5CD6; }
.funnel__b i.st-quoted { background: #E4572E; } .funnel__b i.st-won { background: #2FA24F; } .funnel__b i.st-lost { background: #9A9CA0; }
.funnel b { font: 700 14px var(--mono); text-align: right; }
.bars { display: grid; gap: 10px; }
.bars li { display: grid; grid-template-columns: minmax(80px, 1fr) minmax(0, 1.4fr) 52px; align-items: center; gap: 10px; font-size: 13.5px; }
.bars li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars__b { height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.bars__b i { display: block; height: 100%; background: var(--k); border-radius: 4px; }
.bars__b i.alt { background: var(--y); }
.bars b { font: 600 12px var(--mono); text-align: right; }
.rows { display: grid; }
.row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); text-decoration: none; }
.rows li:last-child .row, .rows > .row:last-child { border-bottom: 0; }
a.row:hover { background: var(--bg); }
.row__b { flex: 1; min-width: 0; display: grid; }
.row__b span { font-size: 13px; color: var(--tx3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.row__r small { font-size: 12px; color: var(--tx3); }
.ring { --v: 0; position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(var(--y) calc(var(--v) * 1%), var(--bg2) 0); }
.ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #fff; }
.ring b { position: relative; font: 900 20px/1 var(--f); }
.ring small { position: absolute; bottom: 14px; font: 500 9px var(--mono); color: var(--tx3); }
.ring b + small { display: none; }
.checks { display: grid; }
.checks li { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.checks li:last-child { border-bottom: 0; }
.checks__i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line2); flex: none; font-weight: 700; color: var(--bad); }
.checks li.is-ok .checks__i { background: var(--good); border-color: var(--good); color: #fff; }
.checks__i .ic { width: 14px; height: 14px; }
.checks__b { flex: 1; display: grid; font-size: 14px; }
.checks__b small { color: var(--tx3); font-size: 12.5px; }
.checks li.is-ok .checks__b b { font-weight: 500; color: var(--tx2); }
.log { display: grid; }
.log li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; }
.log time { font: 500 11.5px var(--mono); color: var(--tx3); }
.log--full { max-height: 480px; overflow-y: auto; }

/* ---------------------------------------------------------------- leads */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.toolbar__f { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.toolbar__f input[type=search] { max-width: 260px; }
.toolbar__f select { width: auto; }
.seg { display: inline-flex; border: 1.5px solid var(--line2); border-radius: 4px; overflow: hidden; background: #fff; }
.seg a { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; height: 38px; font-size: 13px; font-weight: 600; text-decoration: none; }
.seg a.on { background: var(--k); color: var(--y); }
.pills { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.pills a { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 8px 12px; border-radius: 20px; background: #fff; border: 1px solid var(--line); text-decoration: none; font-size: 13px; font-weight: 600; }
.pills a b { font: 600 11.5px var(--mono); color: var(--tx3); }
.pills a.on { background: var(--k); color: #EEEFEB; border-color: var(--k); }
.pills a.on b { color: var(--y); }
.leadlist { display: grid; gap: 8px; }
.lcard { display: flex; align-items: stretch; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); transition: border-color .2s; }
.lcard:hover { border-color: var(--line2); }
.lcard.is-late { border-left: 4px solid var(--bad); }
.lcard__main { flex: 1; min-width: 0; display: flex; gap: 12px; padding: 14px; text-decoration: none; }
.lcard__b { min-width: 0; display: grid; gap: 2px; }
.lcard__b > b { font-size: 16px; }
.lcard__b > span { font-size: 13.5px; color: var(--tx2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lcard__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 12px; color: var(--tx3); }
.lcard__meta span { display: inline-flex; align-items: center; gap: 4px; }
.lcard__meta .ic { width: 13px; height: 13px; }
.nx { color: #4B2C8F; font-weight: 600; }
.lcard__side { display: grid; justify-items: end; align-content: space-between; gap: 6px; padding: 12px 14px; }
.lcard__side small { font-size: 12px; color: var(--tx3); }
.lcard__side small.late { color: var(--bad); font-weight: 600; }
.acts { display: flex; gap: 6px; }
.boardhint { margin: -6px 0 0; }
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: start; }
.bcol { background: var(--bg2); border-radius: var(--r); padding: 10px; min-height: 200px; }
.bcol header { display: flex; align-items: center; gap: 8px; padding: 4px 4px 10px; font-size: 13.5px; }
.bcol__n { font: 600 11px var(--mono); color: var(--tx3); }
.bcol header small { margin-left: auto; font: 600 11px var(--mono); color: var(--good); }
.bcol__drop { display: grid; gap: 8px; min-height: 80px; border-radius: 4px; transition: background .2s, outline-color .2s; outline: 2px dashed transparent; outline-offset: 2px; }
.bcol__drop.is-over { background: rgba(200, 162, 122, .2); outline-color: var(--k); }
.bcol__empty { text-align: center; color: var(--tx3); padding: 20px 0; }
.bcard { display: grid; gap: 4px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 4px; text-decoration: none; cursor: grab; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); transition: box-shadow .2s, transform .2s, opacity .2s; }
.bcard:hover { box-shadow: 0 6px 16px rgba(20, 24, 22, .1); }
.bcard.is-late { border-left: 4px solid var(--bad); }
.bcard.is-drag { opacity: .45; transform: rotate(-2deg); }
.bcard > span { font-size: 13px; color: var(--tx2); }
.bcard__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--tx3) !important; }
.bcard .nx { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.bcard .nx .ic { width: 13px; height: 13px; }

/* ----------------------------------------------------------------- lead */
.lhead { display: grid; gap: 18px; }
.lhead__id { display: flex; gap: 16px; align-items: center; }
.lhead__id h2 { margin: 0; font: 900 clamp(26px, 3vw, 36px)/1 var(--f); text-transform: uppercase; }
.lhead__id p { margin-top: 6px; }
.lhead__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.stepper { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.stepper form { display: contents; }
.stepper button { width: 100%; display: grid; gap: 6px; justify-items: start; padding: 10px; border-radius: 4px; background: var(--bg); text-align: left; font-size: 12.5px; font-weight: 600; color: var(--tx3); transition: background .2s, color .2s; }
.stepper button:hover:not([disabled]) { background: var(--bg2); color: var(--tx); }
.stepper button i { width: 100%; height: 4px; border-radius: 2px; background: var(--line2); }
.stepper li.is-done button { color: var(--tx2); }
.stepper li.is-done button i { background: var(--k); }
.stepper li.is-cur button { background: var(--k); color: var(--y); cursor: default; }
.stepper li.is-cur button i { background: var(--y); }
.stepper li.st-lost.is-cur button { background: var(--tx3); color: #fff; }
.lgrid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 18px; align-items: start; }
.lgrid__main, .lgrid__side { display: grid; gap: 18px; min-width: 0; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.facts dt { font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tx3); }
.facts dd { font-size: 15px; font-weight: 500; }
.msg { margin-top: 16px; padding: 14px 16px; background: var(--bg); border-left: 4px solid var(--y); border-radius: 0 4px 4px 0; font-size: 15px; }
.noteform { display: grid; gap: 8px; }
.noteform__ft { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.feed { margin-top: 18px; display: grid; }
.feed li { position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 12px; padding: 10px 0 10px 14px; border-left: 2px solid var(--line2); }
.feed li::before { content: ""; position: absolute; left: -6px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: var(--bg2); border: 2px solid var(--line2); }
.feed--note::before { background: var(--y) !important; border-color: var(--k) !important; }
.feed time { font: 500 11px/1.6 var(--mono); color: var(--tx3); }
.feed p { font-size: 14px; }
.feed--status p { color: var(--tx3); font-size: 13px; }
.fold > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.fold > summary::-webkit-details-marker { display: none; }
.fold[open] > summary { margin-bottom: 16px; }
.fold > summary .ic { color: var(--tx3); }
.fold--inline { margin-top: 14px; }
.fold--inline > summary { display: inline-flex; font: 700 12.5px var(--f); letter-spacing: .04em; text-transform: uppercase; border-bottom: 2px solid var(--k); padding-bottom: 2px; }
.fold--inline > summary::after { content: "+"; margin-left: 6px; }
.fold--inline[open] > summary::after { content: "−"; }
.fold--inline[open] > summary { margin-bottom: 12px; }
.next__h { font-size: 22px !important; }
.next__d { display: flex; align-items: center; gap: 8px; margin-top: 8px; font: 700 16px var(--f); }
.next__n { margin-top: 6px; font-size: 14px; }
.card--y input, .card--y select { border-color: rgba(20, 24, 22, .35); }
.tpl { display: grid; gap: 10px; }
.qmini { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-size: 14px; }
.qmini span:nth-child(2) { font-family: var(--mono); font-size: 13px; text-align: right; }
.lgrid__side form { margin-top: 12px; }
.danger { justify-self: start; }
.danger button { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--bad); padding: 8px 0; }

/* --------------------------------------------------------------- agenda */
.month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.month__h { text-align: center; font: 600 11px var(--mono); color: var(--tx3); padding-bottom: 4px; }
.month__d { min-height: 86px; padding: 6px; border-radius: 4px; background: var(--bg); display: grid; align-content: start; gap: 3px; min-width: 0; }
.month__d.is-off { background: transparent; }
.month__d b { font: 600 12px var(--mono); color: var(--tx3); }
.month__d.is-today { background: #fff; outline: 2px solid var(--k); }
.month__d.is-today b { color: var(--k); }
.month__ev { display: block; padding: 2px 5px; border-radius: 3px; font-size: 11px; line-height: 1.3; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.month__ev span { font-family: var(--mono); font-weight: 600; }
.month__d small { font-size: 10.5px; color: var(--tx3); }
.k-visit { background: #F3E7D8; color: #7A5230; }
.k-call { background: #E3EEF9; color: #1D4E89; }
.k-follow { background: #FDEBDD; color: #8A3B0C; }
.k-work { background: #E3F3E6; color: #1E6B34; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 12px; color: var(--tx3); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; }
.agenda { display: grid; }
.agenda__sep { padding: 14px 0 6px; font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tx3); }
.agenda a { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.agenda a:hover .agenda__b b { text-decoration: underline; }
.agenda__t { flex: none; width: 58px; padding: 6px 0; border-radius: 4px; text-align: center; font: 700 13px var(--mono); }
.agenda__d { flex: none; width: 58px; display: grid; justify-items: center; padding: 4px 0; background: #FBE4E2; color: var(--bad); border-radius: 4px; }
.agenda__d b { font: 900 20px/1 var(--f); }
.agenda__d small { font-size: 10px; }
.agenda__b { flex: 1; min-width: 0; display: grid; }
.agenda__b span { font-size: 13px; color: var(--tx3); }
.agenda__b small { font-size: 12px; color: var(--tx2); font-style: italic; }
.agenda__go .ic { width: 16px; color: var(--tx3); }
.eyebrow.late { color: var(--bad); margin-bottom: 4px; }

/* --------------------------------------------------------------- quotes */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { padding: 12px 14px; text-align: left; font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tx3); border-bottom: 1px solid var(--line2); background: var(--bg); }
.table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .r { text-align: right; }
.stsel { width: auto !important; min-height: 32px !important; padding: 4px 30px 4px 10px !important; border-radius: 20px !important; border: 0 !important; font-size: 12.5px !important; font-weight: 600 !important; background-color: transparent; }
.stsel.st-new { background-color: #FBE4E2; color: var(--bad); }
.lines { display: grid; gap: 8px; }
.lines__h, .line { display: grid; grid-template-columns: minmax(0, 1fr) 80px 110px 130px 120px 32px; gap: 8px; align-items: start; }
.lines__h { font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tx3); padding: 0 2px; }
.line textarea { min-height: 42px; }
.line input { text-align: right; }
.line input[name="it_u[]"] { text-align: left; }
.line output { display: block; padding: 11px 4px 0; font: 600 14px var(--mono); }
.lines .btn { justify-self: start; margin-top: 4px; }
.totals { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 380px); gap: 24px; align-items: start; margin-top: 22px; padding-top: 18px; border-top: 2px solid var(--k); }
.totals__sum { display: grid; gap: 2px; }
.totals__sum div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
.totals__sum dt { color: var(--tx2); }
.totals__sum dd { font: 600 14px var(--mono); }
.totals__grand { margin-top: 6px; padding: 12px 14px !important; background: var(--k); color: var(--y); border-radius: 4px; }
.totals__grand dt { color: var(--y) !important; font: 800 16px var(--f); text-transform: uppercase; }
.totals__grand dd { font: 700 18px var(--mono) !important; }
.qfoot { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding: 6px 0 20px; }
.qfoot select { width: auto; }

/* ----------------------------------------------------------------- work */
.drop { position: relative; display: grid; justify-items: center; gap: 6px; padding: 30px 16px; margin-bottom: 16px; border: 2px dashed var(--line2); border-radius: var(--r); background: var(--bg); text-align: center; cursor: pointer; transition: border-color .2s, background .2s; }
.drop:hover, .drop.is-over { border-color: var(--k); background: #F5EEE4; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop__ic { width: 36px; height: 36px; color: var(--k); }
.drop b { font-size: 16px; }
.drop span { font-size: 13px; color: var(--tx3); max-width: 46ch; }
.drop__list { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px; }
.drop__list img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.thumb { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; }
.thumb__img { position: relative; aspect-ratio: 4 / 3; background: var(--bg2); }
.thumb__img img { width: 100%; height: 100%; object-fit: cover; }
.thumb__cat { position: absolute; left: 8px; top: 8px; padding: 4px 7px; background: var(--k); color: var(--y); font: 500 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; border-radius: 3px; }
.thumb__star { position: absolute; right: 8px; top: 6px; color: var(--y); font-size: 22px; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.thumb__mv { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 4px; }
.thumb__mv button { width: 30px; height: 30px; border-radius: 4px; background: rgba(20, 24, 22, .8); color: #fff; font-size: 18px; }
.thumb__mv button:hover { background: var(--y); color: var(--k); }
.thumb__ed > summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 8px; padding: 10px 12px; cursor: pointer; }
.thumb__ed > summary::-webkit-details-marker { display: none; }
.thumb__ed summary b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thumb__ed summary small { grid-row: 2; font-size: 12px; color: var(--tx3); }
.thumb__ed summary .ic { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--tx3); }
.thumb__ed[open] > form { padding: 0 12px 12px; }
.thumb__ed > form + form { padding-top: 0 !important; }
.pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 8px; }
.pair { display: grid; gap: 8px; }
.pair__img { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; border-radius: 4px; overflow: hidden; }
.pair__img img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* -------------------------------------------------------------- reviews */
.qrcard { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: center; }
.qrcard__qr { padding: 10px; background: #fff; border: 1px solid var(--line2); border-radius: 4px; }
.qrcard__qr svg { width: 100%; height: auto; }
.testis { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 8px; }
.testi { padding: 16px; border-radius: var(--r); background: var(--bg); display: grid; gap: 8px; align-content: start; }
.testi.is-off { opacity: .55; }
.testi__stars { color: var(--y); letter-spacing: 2px; font-size: 16px; -webkit-text-stroke: .5px var(--k); }
.testi__stars span { color: transparent; }
.testi blockquote { font-size: 14.5px; }
.testi__who { font-size: 13px; color: var(--tx3); }

/* ------------------------------------------------------------------ seo */
.serps { display: grid; gap: 10px; }
.serp { border: 1px solid var(--line); border-radius: var(--r); }
.serp > summary { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 14px 16px; cursor: pointer; }
.serp > summary .muted { min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.serp > summary::-webkit-details-marker { display: none; }
.serp > summary::before { content: "+"; font: 700 16px var(--mono); }
.serp[open] > summary::before { content: "−"; }
.serp__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 0 16px 16px; }
.serp__col { display: grid; gap: 10px; align-content: start; }
.f label output { font: 600 11px var(--mono); color: var(--tx3); }
.f label output.is-long { color: var(--bad); }
.gprev { display: grid; gap: 2px; padding: 14px 16px; border-radius: 8px; background: #fff; border: 1px solid #dadce0; font-family: Arial, sans-serif; }
.gprev__site { font-size: 12px; color: #4d5156; }
.gprev__t { font-size: 19px; line-height: 1.3; color: #1a0dab; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gprev__d { font-size: 13.5px; line-height: 1.5; color: #4d5156; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.linklist { display: grid; gap: 4px; margin-top: 6px; font: 500 12px var(--mono); }
.linklist a { color: #1D4E89; word-break: break-all; }
.playbook { counter-reset: p; display: grid; gap: 12px; margin-bottom: 8px; }
.playbook li { counter-increment: p; position: relative; min-height: 26px; padding: 3px 0 0 46px; font-size: 14.5px; color: var(--tx2); }
.playbook li::before { content: counter(p, decimal-leading-zero); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 34px; height: 26px; border-radius: 3px; background: var(--y); color: var(--k); font: 700 12px var(--mono); }
.playbook b { color: var(--tx); }

.lvl { display: inline-flex; align-items: center; gap: 3px; font: 600 12.5px/1 var(--f); white-space: nowrap; }
.lvl i { width: 7px; height: 14px; border-radius: 2px; background: var(--bg2); }
.lvl i:nth-of-type(3) { margin-right: 7px; }
.lvl0 i:first-of-type { background: #E4572E; }
.lvl1 i:nth-of-type(-n+2) { background: var(--y); }
.lvl2 i { background: var(--good); }
.stat__v small { font-size: .55em; color: var(--tx3); }
.serp > summary .badge { margin-left: auto; }

/* -------------------------------------------------------------- content */
.hours-ed { display: grid; gap: 8px; }
.hours-ed__row { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; }

/* --------------------------------------------------------------- dialog */
.dlg { width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 40px); padding: 0; border: 0; border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.dlg::backdrop { background: rgba(20, 24, 22, .6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dlg__in { display: grid; gap: 14px; padding: 22px; }
.dlg__hd { display: flex; justify-content: space-between; align-items: center; }
.dlg__hd h2 { font: 900 24px/1 var(--f); text-transform: uppercase; }
.dlg .x { width: 36px; height: 36px; border-radius: 50%; font-size: 24px; line-height: 1; background: var(--bg); }
.dlg__ft { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============================================================ responsive */
@media (max-width: 1180px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lgrid { grid-template-columns: minmax(0, 1fr); }
  .lines__h { display: none; }
  .line { grid-template-columns: minmax(0, 1fr) 70px 100px 110px 32px; }
  .line textarea { grid-column: 1 / -1; }
  .line output { grid-column: 4; grid-row: 2; display: none; }
  .fields--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  :root { --top: 60px; }
  .app { display: block; }
  .side { position: fixed; left: 0; top: 0; bottom: 0; width: min(290px, 84vw); height: auto; transform: translateX(-102%); transition: transform .35s var(--ease); box-shadow: 20px 0 60px rgba(0, 0, 0, .3); }
  .side.open { transform: none; }
  .scrim { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(20, 24, 22, .5); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
  .scrim.open { opacity: 1; visibility: visible; transition: opacity .3s; }
  .burger { display: block; }
  .top { flex-wrap: wrap; gap: 10px 12px; padding-top: 10px; padding-bottom: 10px; }
  .top__title h1 { font-size: 22px; }
  .top__title p { display: none; }
  .search { order: 3; width: 100%; margin-left: 0; }
  .search kbd { display: none; }
  .top__add { margin-left: auto; height: 40px; }
  .content { padding-bottom: 100px; }
  .appfoot { padding-bottom: 90px; }
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 35; left: 0; right: 0; bottom: 0;
    padding: 6px 4px max(6px, env(safe-area-inset-bottom)); background: var(--k); border-top: 4px solid var(--y);
  }
  .tabbar a, .tabbar button { position: relative; display: grid; justify-items: center; gap: 3px; padding: 6px 2px; text-decoration: none; color: rgba(238, 239, 235, .7); font-size: 10.5px; font-weight: 600; }
  .tabbar .ic { width: 22px; height: 22px; }
  .tabbar a.on { color: var(--y); }
  .tabbar .pip { position: absolute; top: 0; left: 55%; margin: 0; min-width: 18px; height: 17px; font-size: 10px; line-height: 17px; }
  .grid2, .grid2--agenda, .grid3 { grid-template-columns: minmax(0, 1fr); }
  .today { grid-template-columns: minmax(0, 1fr); }
  .stats--3 { grid-template-columns: minmax(0, 1fr); }
  .fields--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .serp__grid { grid-template-columns: minmax(0, 1fr); }
  .totals { grid-template-columns: minmax(0, 1fr); }
  .stepper { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hide-m { display: none; }
}

@media (max-width: 600px) {
  .stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .stat { padding: 14px; }
  .stat__v { font-size: 26px; }
  .fields--2, .fields--3, .fields--4 { grid-template-columns: minmax(0, 1fr); }
  .f.full-2 { grid-column: auto; }
  .lcard { flex-direction: column; gap: 0; }
  .lcard__side { grid-template-columns: auto auto 1fr; align-items: center; justify-items: start; border-top: 1px solid var(--line); padding: 10px 14px; }
  .lcard__side .acts { justify-self: end; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .feed li { grid-template-columns: minmax(0, 1fr) auto; }
  .feed time { grid-column: 1 / -1; }
  .lhead__acts .btn { flex: 1 1 auto; }
  .month__d { min-height: 54px; padding: 4px; }
  .month__ev { font-size: 0; padding: 0; height: 6px; border-radius: 3px; }
  .qrcard { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .qrcard__qr { width: 160px; }
  .hours-ed__row { grid-template-columns: 80px minmax(0, 1fr); }
  .hours-ed__row input:last-child { grid-column: 2; }
  .log li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .line { grid-template-columns: 60px 1fr 1fr 32px; }
  .line input[name="it_q[]"] { grid-column: 1; }
  .table td, .table th { padding: 10px; }
  .toolbar__f input[type=search] { max-width: none; flex: 1 1 100%; }
}

@media print {
  .side, .top, .tabbar, .formbar, .appfoot { display: none !important; }
  .app { display: block; }
}


/* ==========================================================================
   J.BASSIM layer — typography, wood details, new screens, Arabic / RTL.
   ========================================================================== */
body { font: 400 15px/1.55 var(--f); }
[dir=rtl] body { font-family: "Tajawal", var(--f); }
.eyebrow, .stat__k, .f label, .field__l, .side__grp, .facts dt, .table th, .lines__h, .agenda__sep, .top__title p, .todo__k, .chart__x, .month__h, .log time, .feed time {
  font-family: var(--f); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
[dir=rtl] :is(.eyebrow, .stat__k, .f label, .side__grp, .facts dt, .table th, .lines__h, .agenda__sep, .todo__k) { letter-spacing: 0; font-family: "Tajawal", var(--f); font-weight: 700; }
.top__title h1, .card__hd h2, .card h2, .today h2, .lhead__id h2, .dlg__hd h2, .next__h {
  font-family: var(--serif) !important; font-weight: 300 !important; text-transform: none !important; letter-spacing: -.01em !important; }
[dir=rtl] :is(.top__title h1, .card__hd h2, .card h2, .today h2, .lhead__id h2, .dlg__hd h2, .next__h) { font-family: "Tajawal", var(--serif) !important; font-weight: 500 !important; letter-spacing: 0 !important; }
.top__title h1 { font-size: 30px; }
.card__hd h2, .card h2 { font-size: 23px; line-height: 1.15; }
.today h2 { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.02; }
.today h2 em, .top__title h1 em { font-style: italic; color: var(--oak-2); }
.stat__v { font: 300 36px/1 var(--serif); }
.agenda__d b, .ring b, .av { font-family: var(--serif); font-weight: 400; }
.side__brand b, .login__mk b { font: 400 18px/1 var(--serif); letter-spacing: .22em; text-transform: none; }
.side__brand img { width: 40px; height: 40px; border-radius: 50%; }
.side__brand i, .login__mk i { font-family: var(--f); letter-spacing: .24em; }
.side { background: var(--k); background-image: var(--grain); }
.side::after { width: 3px; background: linear-gradient(180deg, var(--walnut), var(--oak) 45%, var(--sage)); }
.side__link { font-weight: 500; }
.side__link.on { background: var(--oak); color: var(--k); }
.btn { font: 500 12px/1 var(--f); letter-spacing: .16em; border-radius: 3px; }
[dir=rtl] .btn { letter-spacing: 0; font: 700 13.5px/1 "Tajawal", var(--f); }
.btn--y:hover { background: var(--oak-2); }
.btn--dark:hover { color: var(--oak-2); }
.iconbtn:hover { background: var(--oak); }
.lnk { border-bottom-color: var(--oak); }
.lnk:hover { background: #F3E7D8; }
.card { border-radius: var(--r); }
.today { background: var(--k); background-image: var(--grain); }
.today::after { height: 4px; }
.todo { background: var(--k3); border-radius: 4px; }
.today .eyebrow, .todo__k { color: var(--oak-2); }
.av { background: var(--k); color: var(--oak-2); }
.note { border-radius: 0 6px 6px 0; }
.chart__bar { fill: #D5D8D0; }
.chart__bar.is-recent { fill: var(--sage); }
.chart__bar:hover { fill: var(--oak); }
.bars__b i { background: var(--sage); }
.bars__b i.alt { background: var(--oak); }
.ring { background: conic-gradient(var(--sage) calc(var(--v) * 1%), var(--bg2) 0); }
.seg a.on, .pills a.on { background: var(--k); color: var(--oak-2); }
.pills a.on b { color: var(--oak-2); }
.stepper { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.stepper li.is-cur button { color: var(--oak-2); }
.stepper li.is-cur button i { background: var(--oak); }
.totals__grand { color: var(--oak-2); }
.totals__grand dt { color: var(--oak-2) !important; font: 400 17px var(--serif); text-transform: none; }
.steps li::before { color: var(--oak-2); font-family: var(--f); }
.thumb__cat { color: var(--oak-2); }
.thumb__star { color: var(--oak-2); }
.testi__stars { color: var(--oak); -webkit-text-stroke: 0; }
.testi__stars span { color: var(--bg2); }
.tabbar { border-top-color: var(--oak) !important; }
.tabbar a.on { color: var(--oak-2) !important; }
.pip { background: var(--oak); }
.side__link.on .pip { background: var(--k); color: var(--oak-2); }

/* new statuses and kinds */
.st-design { background: #E4EEE8; color: #2F5A43; }
.dotst.st-design, .funnel__b i.st-design { background: #5D7466; }
.st-contacted { background: #E6ECF3; color: #2D4E73; }
.st-quoted { background: #F5E4D8; color: #86401C; }
.k-design { background: #E4EEE8; color: #2F5A43; }
.check--box { align-self: end; min-height: 42px; padding: 0 12px; border: 1.5px solid var(--line2); border-radius: 4px; background: #fff; }

/* SEO editor */
.seoblk { border: 1px solid var(--line); border-radius: var(--r); margin-top: 10px; }
.seoblk > summary { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding: 14px 16px; cursor: pointer; }
.seoblk > summary::-webkit-details-marker { display: none; }
.seoblk > summary::before { content: "+"; font-weight: 600; }
.seoblk[open] > summary::before { content: "−"; }
.seoblk > summary small { color: var(--tx3); font-size: 12.5px; overflow-wrap: anywhere; }
.seocol { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 20px; padding: 0 16px 16px; }
.seocol .gprev { grid-column: 2; grid-row: 1 / 3; align-self: start; }

/* scroll film */
.filmprev { display: grid; gap: 10px; }
.filmprev canvas { width: 100%; aspect-ratio: 16 / 9; background: var(--k); border-radius: 6px; display: block; }
.filmprev input[type=range] { width: 100%; accent-color: var(--sage); }
.filmup { display: grid; gap: 14px; }
.progress { height: 8px; border-radius: 4px; background: var(--bg2); overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--hazard); transition: width .2s; }
.chapters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.chapter { display: grid; gap: 10px; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); }
.chapter legend { padding: 0 6px; font-size: 12px; font-weight: 600; color: var(--sage); }

/* ------------------------------------------------------------------ login */
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); background: var(--bg); }
.login__art { position: relative; overflow: hidden; background: var(--k); color: #EEEFEB; display: grid; align-content: end; padding: clamp(28px, 5vw, 64px); }
.login__art::before { content: ""; position: absolute; inset: 0; background:
  radial-gradient(120% 80% at 80% 10%, rgba(200, 162, 122, .28), transparent 60%),
  radial-gradient(90% 70% at 10% 100%, rgba(93, 116, 102, .35), transparent 60%); }
.login__grain { position: absolute; inset: 0; background: var(--grain); opacity: .9; }
.login__quote { position: relative; max-width: 520px; }
.login__quote .eyebrow { color: var(--sage-l); }
.login__quote h2 { margin-top: 16px; font: 300 clamp(40px, 5vw, 72px)/1 var(--serif); letter-spacing: -.02em; }
.login__quote h2 em { color: var(--oak-2); }
[dir=rtl] .login__quote h2 { font-family: "Tajawal", var(--serif); font-weight: 500; }
.login__rule { position: relative; display: flex; justify-content: space-between; align-items: flex-end; height: 22px; margin-top: 42px; border-bottom: 1px solid rgba(238, 239, 235, .4); }
.login__rule i { width: 1px; height: 7px; background: rgba(238, 239, 235, .45); }
.login__rule i.l { height: 15px; background: var(--oak-2); }
.login__side { display: grid; place-items: center; padding: 28px 20px; }
.login__card { width: min(380px, 100%); display: grid; gap: 16px; }
.login__card h1 { font: 300 34px/1.05 var(--serif); margin: 6px 0 4px; }
[dir=rtl] .login__card h1 { font-family: "Tajawal", var(--serif); font-weight: 500; }
.login__mk { display: flex; align-items: center; gap: 12px; }
.login__mk img { border-radius: 50%; }
.login__mk i { display: block; margin-top: 6px; font-size: 10px; font-style: normal; text-transform: uppercase; color: var(--tx3); }
.login__note { font-size: 12.5px; color: var(--tx3); }
.login__links { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.login__links a { color: var(--tx2); text-decoration: none; border-bottom: 1px solid var(--line2); }
.login .alert { margin: 0; }
@media (max-width: 820px) {
  .login { grid-template-columns: minmax(0, 1fr); }
  .login__art { min-height: 34vh; padding: 28px 22px; }
  .login__rule { display: none; }
}
@media (max-width: 900px) {
  .chapters, .seocol { grid-template-columns: minmax(0, 1fr); }
  .seocol .gprev { grid-column: auto; grid-row: auto; }
  .stepper { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- RTL */
[dir=rtl] .search { margin-left: 0; margin-right: auto; }
[dir=rtl] .search .ic { left: auto; right: 12px; }
[dir=rtl] .search input { padding: 0 38px 0 40px; }
[dir=rtl] .search kbd { right: auto; left: 10px; }
[dir=rtl] .side::after { right: auto; left: 0; }
[dir=rtl] .pip { margin-left: 0; margin-right: auto; }
[dir=rtl] select { padding-right: 12px; padding-left: 34px; background-position: left 10px center; }
[dir=rtl] .stsel { padding: 4px 10px 4px 30px !important; }
[dir=rtl] .note { border-left: 0; border-right: 4px solid var(--y); border-radius: 6px 0 0 6px; }
[dir=rtl] .msg { border-left: 0; border-right: 4px solid var(--y); border-radius: 4px 0 0 4px; }
[dir=rtl] .lcard.is-late, [dir=rtl] .bcard.is-late { border-left: 1px solid var(--line); border-right: 4px solid var(--bad); }
[dir=rtl] .todo { border-left: 0; border-right: 4px solid var(--y); }
[dir=rtl] .todo--hot { border-right-color: #FF6B5E; } [dir=rtl] .todo--late { border-right-color: #E4572E; }
[dir=rtl] .steps li { padding: 2px 36px 0 0; }
[dir=rtl] .steps li::before { left: auto; right: 0; }
[dir=rtl] .feed li { padding: 10px 14px 10px 0; border-left: 0; border-right: 2px solid var(--line2); }
[dir=rtl] .feed li::before { left: auto; right: -6px; }
[dir=rtl] .table th, [dir=rtl] .stepper button { text-align: right; }
[dir=rtl] .table .r, [dir=rtl] .r { text-align: left; }
[dir=rtl] .bcol header small { margin-left: 0; margin-right: auto; }
[dir=rtl] .thumb__cat { left: auto; right: 8px; }
[dir=rtl] .thumb__star { right: auto; left: 8px; }
[dir=rtl] .thumb__mv { right: auto; left: 8px; }
[dir=rtl] .switch span::after { left: auto; right: 2px; }
[dir=rtl] .switch input:checked + span::after { transform: translateX(-18px); }
[dir=rtl] .fold--inline > summary::after { margin-left: 0; margin-right: 6px; }
[dir=rtl] .line input { text-align: left; }
[dir=rtl] .line input[name="it_u[]"] { text-align: right; }
[dir=rtl] .bars b, [dir=rtl] .funnel b { text-align: left; }
[dir=rtl] .row__r { justify-content: flex-start; }
[dir=rtl] .lcard__side { justify-items: start; }
@media (max-width: 900px) {
  [dir=rtl] .side { left: auto; right: 0; transform: translateX(102%); }
  [dir=rtl] .side.open { transform: none; }
  [dir=rtl] .top__add { margin-left: 0; margin-right: auto; }
  [dir=rtl] .tabbar .pip { left: auto; right: 55%; }
}
@media (max-width: 600px) { .stat__v { font-size: 27px; } .top__title h1 { font-size: 24px; } }