/* ==========================================================================
   os.css — OcteDigital OS application shell. Depends on octe-tokens.css.
   White mode · Arabic RTL first · calm canvas, loud data.
   ========================================================================== */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

/* Theme switch — animate only colour/background/border/shadow (never layout) between light & dark,
   on the major surfaces. Interactive elements keep their own hover transitions (defined later, they
   win the cascade). Uses --octe-micro, so prefers-reduced-motion disables it too. */
.os-body, .os-sidebar, .os-side-promo, .os-topbar, .os-main-wrap, .os-main,
.os-card, .os-stat, .os-welcome, .os-search, .os-user,
.os-menu__pop, .os-bell__pop, .os-bell__item, .os-bell__head,
.os-tbl-wrap, .os-tbl thead th, .os-flash, .os-pill,
.os-filterbar, .os-ws__pane, .os-space, .os-kanban, h1, h2, h3, h4{
  transition: background-color var(--octe-micro) var(--octe-ease-out),
              border-color var(--octe-micro) var(--octe-ease-out),
              color var(--octe-micro) var(--octe-ease-out),
              box-shadow var(--octe-micro) var(--octe-ease-out);
}
body{
  background:var(--octe-canvas); color:var(--octe-body);
  font-family:var(--octe-font); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{ color:var(--octe-ink); margin:0; font-weight:650; }
a{ color:var(--octe-red); text-decoration:none; }
button{ font-family:inherit; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
:focus-visible{ outline:2px solid var(--octe-red); outline-offset:2px; border-radius:6px; }

/* ---------- Buttons ---------- */
.os-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px; border-radius:var(--octe-r-chip); border:1px solid transparent;
  font-weight:600; font-size:14px; cursor:pointer; transition:transform var(--octe-micro) var(--octe-ease-out), box-shadow var(--octe-micro) var(--octe-ease-out), background var(--octe-micro); }
.os-btn:active{ transform:scale(.98); }
.os-btn--primary{ background:var(--octe-red); color:#fff; box-shadow:0 8px 20px rgba(212,53,57,.24); }
.os-btn--primary:hover{ box-shadow:0 12px 26px rgba(212,53,57,.32); }
.os-btn--ghost{ background:var(--octe-surface); color:var(--octe-ink); border-color:var(--octe-line); }
.os-btn--ghost:hover{ box-shadow:var(--octe-shadow-sm); }
.os-btn--block{ width:100%; }

/* ---------- Forms ---------- */
.os-field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.os-label{ font-size:13px; font-weight:600; color:var(--octe-ink); }
.os-input{ width:100%; padding:12px 14px; border:1px solid var(--octe-line); border-radius:var(--octe-r-in);
  background:var(--octe-surface-2); color:var(--octe-ink); font-family:inherit; font-size:14.5px;
  transition:border-color var(--octe-micro), box-shadow var(--octe-micro); }
.os-input:focus{ outline:none; border-color:var(--octe-red); box-shadow:0 0 0 3px var(--octe-red-tint); background:var(--octe-surface); }
.os-hint{ font-size:12.5px; color:var(--octe-muted); }

/* ---------- Flash ---------- */
.os-flash{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:var(--octe-r-in);
  margin-bottom:16px; font-size:14px; border:1px solid; }
.os-flash--error{ background:var(--octe-red-tint); border-color:#f2cdce; color:#a12a2d; }
.os-flash--success{ background:var(--octe-green-tint); border-color:#bfe6cc; color:#1c8a3e; }
.os-flash--info{ background:var(--octe-blue-tint); border-color:#cddffb; color:#2559b8; }
/* Dark mode: the tinted bg already flips (token); re-tune the hardcoded border/text for contrast. */
:root[data-theme="dark"] .os-flash--error{ border-color:rgba(228,73,78,.42); color:#F0A9AB; }
:root[data-theme="dark"] .os-flash--success{ border-color:rgba(52,180,91,.42); color:#8FDDA5; }
:root[data-theme="dark"] .os-flash--info{ border-color:rgba(76,134,236,.42); color:#AAC7F6; }

/* ==========================================================================
   Auth — split screen (brand hero panel + form panel). One family: login, setup, …
   RTL: hero on the right, form on the left.
   ========================================================================== */
.os-auth-body{ background:var(--octe-red); }
.os-auth-split{ min-height:100vh; display:grid; grid-template-columns:1.08fr 0.92fr; }

/* Hero (right in RTL) */
.os-auth-hero{ position:relative; overflow:hidden; color:#fff; min-height:100vh;
  padding:46px 50px; display:flex; flex-direction:column; justify-content:space-between;
  background:radial-gradient(135% 125% at 80% 10%, #DE454E 0%, #D43539 44%, #B92D31 100%); }
.os-auth-hero__circle{ position:absolute; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.18), rgba(255,255,255,0) 70%); }
.os-auth-hero__circle--t{ width:440px; height:440px; top:-170px; inset-inline-end:-130px; }
.os-auth-hero__circle--b{ width:540px; height:540px; bottom:-230px; inset-inline-start:-170px; }
.os-auth-hero__bg{ position:absolute; inset:0; display:grid; place-items:center; opacity:.5; pointer-events:none; }
.os-auth-hero__bg svg{ width:min(540px,85%); height:auto; }
.os-auth-hero__top,.os-auth-hero__mid,.os-auth-hero__foot{ position:relative; z-index:1; }
.os-auth-hero__mark{ display:inline-flex; align-items:center; gap:11px; }
.os-auth-hero__mark img{ height:30px; width:auto; }
.os-auth-hero__mark b{ font-size:18px; font-weight:700; color:#fff; }
.os-auth-hero__mark b span{ color:rgba(255,255,255,.72); }
.os-auth-hero__mid{ max-width:460px; }
.os-auth-hero__title{ color:#fff; font-size:34px; line-height:1.28; font-weight:750; letter-spacing:-.01em; }
.os-auth-hero__sub{ color:rgba(255,255,255,.82); font-size:15.5px; line-height:1.75; margin:16px 0 28px; max-width:420px; }
.os-auth-hero__feats{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:15px; }
.os-auth-feat{ display:flex; align-items:center; gap:12px; font-size:14.5px; font-weight:500; color:rgba(255,255,255,.95); }
.os-auth-feat svg{ width:23px; height:23px; flex:none; }
.os-lang{ display:inline-flex; gap:3px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:4px; }
.os-lang span{ padding:4px 13px; border-radius:999px; font-size:13px; font-weight:600; color:rgba(255,255,255,.7); }
.os-lang span.is-on{ background:#fff; color:var(--octe-red); }

/* Form (left in RTL) */
.os-auth-form{ background:var(--octe-surface); min-height:100vh; display:grid; place-items:center; padding:40px 32px; }
.os-auth-form__inner{ width:100%; max-width:378px; }
.os-auth-form__title{ font-size:26px; font-weight:750; color:var(--octe-ink); letter-spacing:-.01em; }
.os-auth-form__sub{ color:var(--octe-muted); font-size:14.5px; margin:8px 0 26px; }

/* leading-icon input + eye toggle */
.os-inputwrap{ position:relative; display:flex; align-items:center; }
.os-inputwrap > svg.lead{ position:absolute; inset-inline-start:14px; width:19px; height:19px; color:var(--octe-faint); pointer-events:none; }
.os-inputwrap .os-input{ padding-inline-start:42px; }
.os-inputwrap .os-input.has-eye{ padding-inline-end:44px; }
.os-eye{ position:absolute; inset-inline-end:7px; width:32px; height:32px; display:grid; place-items:center;
  background:none; border:0; cursor:pointer; color:var(--octe-faint); border-radius:9px; transition:color var(--octe-micro), background var(--octe-micro); }
.os-eye:hover{ color:var(--octe-body); background:var(--octe-surface-2); }
.os-eye svg{ width:19px; height:19px; }
.os-eye .eye-off{ display:none; }
.os-eye.is-on .eye-on{ display:none; }
.os-eye.is-on .eye-off{ display:block; }

.os-authrow{ display:flex; align-items:center; justify-content:space-between; margin:2px 0 22px; }
.os-check{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--octe-body); cursor:pointer; user-select:none; }
.os-check input{ width:17px; height:17px; accent-color:var(--octe-red); cursor:pointer; }

/* entrance motion — hero staggers in, form rises */
@keyframes os-auth-in{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none; } }
.os-auth-hero__mark{ animation:os-auth-in .5s var(--octe-ease-out) both; }
.os-auth-hero__title{ animation:os-auth-in .6s .08s var(--octe-ease-out) both; }
.os-auth-hero__sub{ animation:os-auth-in .6s .16s var(--octe-ease-out) both; }
.os-auth-feat{ animation:os-auth-in .5s var(--octe-ease-out) both; }
.os-auth-feat:nth-child(1){ animation-delay:.24s; }
.os-auth-feat:nth-child(2){ animation-delay:.33s; }
.os-auth-feat:nth-child(3){ animation-delay:.42s; }
.os-auth-hero__foot{ animation:os-auth-in .5s .5s var(--octe-ease-out) both; }
.os-auth-form__inner{ animation:os-auth-in .55s .12s var(--octe-ease-out) both; }

/* mobile: hero collapses to a short branded strip above the form (never disappears) */
@media (max-width:860px){
  .os-auth-split{ grid-template-columns:1fr; grid-template-rows:auto 1fr; }
  .os-auth-hero{ min-height:auto; padding:22px 24px 26px; }
  .os-auth-hero__sub,.os-auth-hero__feats,.os-auth-hero__foot{ display:none; }
  .os-auth-hero__title{ font-size:21px; margin-top:12px; }
  .os-auth-hero__circle--b{ display:none; }
  .os-auth-form{ min-height:auto; padding:30px 24px 46px; }
}
@media (prefers-reduced-motion:reduce){
  .os-auth-hero__mark,.os-auth-hero__title,.os-auth-hero__sub,.os-auth-feat,.os-auth-hero__foot,.os-auth-form__inner{ animation:none; }
}

/* ==========================================================================
   App shell
   ========================================================================== */
.os-shell{ display:grid; grid-template-columns:262px 1fr; min-height:100vh; }

/* The sticky rail is pinned at height:100vh, so when the nav is taller than the viewport (an admin
   with every module) its lower items sit BELOW the fold. A sticky element doesn't move with the page
   scroll and had no scroll of its own — so those items (Users/Permissions/Audit/Settings + promo)
   were unreachable. overflow-y:auto lets the rail scroll its OWN overflow; the page still scrolls the
   main column independently. overscroll-behavior:contain stops the rail's scroll from chaining to the
   page once it bottoms out. */
.os-sidebar{ background:var(--octe-surface); border-inline-start:1px solid var(--octe-line);
  display:flex; flex-direction:column; padding:22px 16px; position:sticky; top:0; height:100dvh; align-self:start;
  overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.os-brand{ display:flex; align-items:center; gap:11px; padding:6px 8px 20px; }
.os-brand img{ height:30px; width:auto; }
.os-brand b{ font-size:18px; color:var(--octe-ink); font-weight:700; }
.os-brand b span{ color:var(--octe-red); }
.os-nav{ display:flex; flex-direction:column; gap:4px; }
.os-nav-label{ font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--octe-faint);
  font-weight:700; padding:14px 12px 6px; }
.os-nav-link{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:14px;
  color:var(--octe-body); font-size:14.5px; font-weight:500; position:relative;
  transition:background var(--octe-micro), color var(--octe-micro); }
.os-nav-link svg{ width:20px; height:20px; flex:none; stroke-width:1.8; }
.os-nav-link:hover{ background:var(--octe-surface-2); color:var(--octe-ink); }
.os-nav-link.is-active{ background:var(--octe-red); color:#fff; box-shadow:0 8px 18px rgba(212,53,57,.24); }
.os-nav-link.is-soon{ opacity:.5; cursor:default; }
.os-nav-link .os-soon{ margin-inline-start:auto; font-size:10px; background:var(--octe-sunken); color:var(--octe-muted);
  padding:2px 7px; border-radius:999px; font-weight:600; }
.os-side-promo{ margin-top:auto; background:var(--octe-charcoal); color:#fff; border-radius:var(--octe-r-in);
  padding:16px; }
.os-side-promo h4{ color:#fff; font-size:14px; margin-bottom:4px; }
.os-side-promo p{ color:rgba(255,255,255,.7); font-size:12.5px; margin:0 0 12px; }

.os-main-wrap{ min-width:0; }
.os-main{ padding:26px 30px 60px; max-width:1420px; width:100%; margin:0 auto; }

/* ---------- Topbar ---------- */
.os-topbar{ display:flex; align-items:center; gap:16px; padding:18px 30px; }
.os-search{ flex:1; max-width:340px; display:flex; align-items:center; gap:9px; background:var(--octe-surface);
  border:1px solid var(--octe-line); border-radius:var(--octe-r-chip); padding:8px 15px; color:var(--octe-muted); }
.os-search input{ border:none; background:transparent; outline:none; width:100%; font-family:inherit; font-size:14px; color:var(--octe-ink); }
.os-search svg{ width:18px; height:18px; flex:none; color:var(--octe-muted); }
.os-top-spacer{ flex:1; }
.os-icon-btn{ width:42px; height:42px; display:grid; place-items:center; background:var(--octe-surface);
  border:1px solid var(--octe-line); border-radius:14px; color:var(--octe-body); cursor:pointer; position:relative;
  transition:box-shadow var(--octe-micro); }
.os-icon-btn:hover{ box-shadow:var(--octe-shadow-sm); }
.os-icon-btn svg{ width:19px; height:19px; }
/* Theme toggle — show the moon in light mode (tap → dark), the sun in dark mode (tap → light). */
.os-theme-toggle .th-moon, .os-theme-toggle .th-sun{ display:grid; place-items:center; }
.os-theme-toggle .th-sun{ display:none; }
:root[data-theme="dark"] .os-theme-toggle .th-moon{ display:none; }
:root[data-theme="dark"] .os-theme-toggle .th-sun{ display:grid; }
.os-badge{ position:absolute; top:-4px; inset-inline-end:-4px; min-width:18px; height:18px; padding:0 5px;
  background:var(--octe-red); color:#fff; border-radius:999px; font-size:11px; font-weight:700; display:grid; place-items:center;
  border:2px solid var(--octe-canvas); }
.os-user{ display:flex; align-items:center; gap:10px; padding:5px 6px 5px 12px; background:var(--octe-surface);
  border:1px solid var(--octe-line); border-radius:var(--octe-r-chip); }
.os-user-name{ font-size:13.5px; font-weight:600; color:var(--octe-ink); }
.os-user-role{ font-size:11.5px; color:var(--octe-muted); }

/* ---------- Avatar ---------- */
.os-avatar{ width:36px; height:36px; border-radius:50%; object-fit:cover; display:grid; place-items:center;
  background:var(--octe-red-tint); color:var(--octe-red); font-weight:700; font-size:15px; flex:none; }
.os-avatar--sm{ width:28px; height:28px; font-size:12px; }
.os-avatar--lg{ width:44px; height:44px; font-size:17px; }

/* ==========================================================================
   Welcome banner (charcoal hero)
   ========================================================================== */
.os-welcome{ background:var(--octe-charcoal); color:#fff; border-radius:var(--octe-r-card); padding:28px 30px;
  display:flex; align-items:center; gap:24px; box-shadow:var(--octe-shadow-md); position:relative; overflow:hidden; }
.os-welcome::after{ content:""; position:absolute; inset-block:-40%; inset-inline-end:-6%; width:340px; height:340px;
  background:radial-gradient(circle at 30% 30%, rgba(212,53,57,.32), rgba(212,53,57,0) 62%); pointer-events:none; }
.os-welcome__body{ flex:1; min-width:0; position:relative; z-index:1; }
.os-welcome h1{ color:#fff; font-size:26px; font-weight:700; letter-spacing:-.01em; }
.os-welcome p{ color:rgba(255,255,255,.72); margin:6px 0 0; font-size:14.5px; }
.os-welcome__mini{ display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; }
.os-mini{ background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:10px 16px; }
.os-mini b{ display:block; color:#fff; font-size:20px; font-weight:700; }
.os-mini span{ color:rgba(255,255,255,.62); font-size:12px; }
.os-welcome__media{ width:180px; height:120px; flex:none; border-radius:var(--octe-r-in); position:relative; z-index:1;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); display:grid; place-items:center; overflow:hidden; }
.os-welcome__media img{ width:100%; height:100%; object-fit:contain; }

/* ==========================================================================
   KPI cards
   ========================================================================== */
.os-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:22px; }
.os-stat{ background:var(--octe-surface); border:1px solid var(--octe-line); border-radius:var(--octe-r-card);
  padding:22px; box-shadow:var(--octe-shadow-sm); }
.os-stat__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.os-stat__ic{ width:46px; height:46px; border-radius:var(--octe-r-icon); display:grid; place-items:center;
  background:var(--accent-tint,var(--octe-red-tint)); color:var(--accent,var(--octe-red)); }
.os-stat__ic svg{ width:22px; height:22px; stroke-width:1.9; }
.os-chip{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; padding:4px 9px; border-radius:999px; }
.os-chip--up{ background:var(--octe-green-tint); color:var(--octe-green); }
.os-chip--down{ background:var(--octe-red-tint); color:var(--octe-red); }
.os-chip--flat{ background:var(--octe-sunken); color:var(--octe-muted); }
.os-stat__num{ font-family:var(--octe-num); font-size:30px; font-weight:700; color:var(--octe-ink); margin-top:16px; line-height:1; }
.os-stat__label{ display:block; color:var(--octe-muted); font-size:12.5px; margin-top:8px; }
.os-stat__cap{ display:block; color:var(--octe-faint); font-size:11.5px; margin-top:3px; }
.os-stat--hero .os-stat__cap{ color:rgba(255,255,255,.72); }
.os-stat--hero{ background:var(--octe-red); border-color:var(--octe-red); box-shadow:var(--octe-shadow-hero); }
.os-stat--hero .os-stat__ic{ background:rgba(255,255,255,.16); color:#fff; }
.os-stat--hero .os-stat__num,.os-stat--hero .os-stat__label{ color:#fff; }
.os-stat--hero .os-stat__label{ color:rgba(255,255,255,.8); }
.os-stat--hero .os-chip{ background:rgba(255,255,255,.18); color:#fff; }

/* ==========================================================================
   Generic card + grid + empty state
   ========================================================================== */
.os-cols{ display:grid; gap:22px; margin-top:22px; }
.os-cols--2-1{ grid-template-columns:2fr 1fr; }
.os-cols--1-1{ grid-template-columns:1fr 1fr; }
.os-card{ background:var(--octe-surface); border:1px solid var(--octe-line); border-radius:var(--octe-r-card);
  padding:24px; box-shadow:var(--octe-shadow-sm); }
.os-card__head{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.os-card__head h2{ font-size:16px; font-weight:650; }
.os-card__head p{ font-size:12.5px; color:var(--octe-muted); margin:2px 0 0; }
.os-empty{ text-align:center; padding:40px 20px; color:var(--octe-muted); }
.os-empty img{ width:120px; height:120px; object-fit:contain; margin-bottom:14px; opacity:.95; }
.os-empty p{ margin:0; font-size:14px; }

/* progress bars support */
.octe-progress{ height:8px; background:var(--octe-sunken); border-radius:999px; overflow:hidden; }
.octe-progress i{ display:block; height:100%; border-radius:999px; width:0; background:var(--octe-red);
  transition:width var(--octe-fill) var(--octe-ease-out); }
.octe-ring,.octe-donut,.octe-gauge{ position:relative; display:inline-grid; place-items:center; }
.octe-ring__center,.octe-donut__center{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.octe-ring__center b,.octe-donut__center b{ font-family:var(--octe-num); font-weight:700; color:var(--octe-ink); font-size:20px; }
.octe-ring__center span,.octe-donut__center span{ font-size:11px; color:var(--octe-muted); }

/* ---------- Load entrance ---------- */
@keyframes os-rise{ from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:none; } }
.os-loaded .os-welcome,.os-loaded .os-stat,.os-loaded .os-card{ animation:os-rise .5s var(--octe-ease-out) both; }
.os-loaded .os-stat:nth-child(2){ animation-delay:.06s; }
.os-loaded .os-stat:nth-child(3){ animation-delay:.12s; }
.os-loaded .os-stat:nth-child(4){ animation-delay:.18s; }

/* ---------- Responsive ---------- */
.os-burger{ display:none; }
@media (max-width:1040px){
  .os-kpis{ grid-template-columns:repeat(2,1fr); }
  .os-cols--2-1,.os-cols--1-1{ grid-template-columns:1fr; }
}
@media (max-width:820px){
  .os-shell{ grid-template-columns:1fr; }
  /* The drawer must park OFF-canvas past the inline-START edge (the right, in RTL). Pinning it to
     inset-inline-end resolved to left:0 under dir=rtl, so translateX(100%) shoved the closed drawer
     back INTO the viewport, on top of the content. */
  .os-sidebar{ position:fixed; inset-inline-start:0; top:0; bottom:0; height:100dvh; z-index:50; width:280px; transform:translateX(100%);
    overflow-y:auto; transition:transform .24s var(--octe-ease-out); }
  .os-sidebar.is-open{ transform:none; box-shadow:var(--octe-shadow-md); }
  .os-burger{ display:grid; }
  .os-welcome{ flex-direction:column; align-items:flex-start; }
  .os-welcome__media{ width:100%; }
  /* The topbar could not shrink: .os-search is flex:1 but kept min-width:auto, so its input's
     intrinsic min-content held the bar ~30px wider than the viewport — which pushed the whole page
     into horizontal overflow and shifted every RTL-anchored element off the right edge. Let it
     shrink, and collapse the user chip to its avatar. */
  .os-topbar{ gap:10px; }
  .os-search{ min-width:0; }
  .os-search input{ min-width:0; }
  .os-user{ padding:5px; }
  .os-user > span:nth-child(2){ display:none; }
}
@media (max-width:520px){
  .os-kpis{ grid-template-columns:1fr; }
  .os-main,.os-topbar{ padding-inline:16px; }
}
@media (prefers-reduced-motion: reduce){
  .os-loaded .os-welcome,.os-loaded .os-stat,.os-loaded .os-card{ animation:none; }
}

/* ==========================================================================
   Dashboard content components (§26)
   ========================================================================== */
/* welcome CTAs */
.os-welcome__ctas{ display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
.os-welcome__cta{ display:inline-flex; align-items:center; gap:7px; padding:10px 17px; border-radius:999px; font-size:13.5px; font-weight:600; transition:transform var(--octe-micro) var(--octe-ease-out), box-shadow var(--octe-micro); }
.os-welcome__cta:active{ transform:scale(.98); }
.os-welcome__cta--solid{ background:#fff; color:var(--octe-charcoal); }
.os-welcome__cta--solid:hover{ box-shadow:0 8px 20px rgba(0,0,0,.18); }
.os-welcome__cta--ghost{ background:rgba(255,255,255,.10); color:#fff; border:1px solid rgba(255,255,255,.26); }

/* KPI sparkline */
.os-spark{ display:block; width:100%; height:34px; margin-top:14px; overflow:visible; }
.os-spark path.line{ fill:none; stroke:var(--accent,var(--octe-red)); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.os-stat--hero .os-spark path.line{ stroke:rgba(255,255,255,.9); }

/* card header tools + period toggle */
.os-card__tools{ margin-inline-start:auto; display:flex; align-items:center; gap:6px; }
.os-tool{ width:30px; height:30px; display:grid; place-items:center; border-radius:9px; border:1px solid var(--octe-line);
  background:var(--octe-surface); color:var(--octe-muted); cursor:pointer; transition:box-shadow var(--octe-micro), color var(--octe-micro); }
.os-tool:hover{ color:var(--octe-ink); box-shadow:var(--octe-shadow-sm); }
.os-tool svg{ width:16px; height:16px; }
.os-seg{ display:inline-flex; background:var(--octe-sunken); border-radius:999px; padding:3px; gap:2px; }
.os-seg button{ border:0; background:none; padding:5px 14px; border-radius:999px; font-size:12.5px; font-weight:600; color:var(--octe-muted); cursor:pointer; }
.os-seg button.is-on{ background:var(--octe-red); color:#fff; }

/* line chart */
.os-chart{ position:relative; margin-top:6px; }
.os-chart svg.plot{ width:100%; height:auto; display:block; overflow:visible; }
.os-chart__grid line{ stroke:var(--octe-line-2); stroke-width:1; }
.octe-draw{ fill:none; }
.os-chart__dot{ fill:var(--octe-red); stroke:var(--octe-surface); stroke-width:3; }
.os-chart__x{ display:flex; justify-content:space-between; margin-top:10px; padding:0 2px; direction:ltr; }
.os-chart__x span{ font-size:11px; color:var(--octe-faint); font-variant-numeric:tabular-nums; }
.os-tooltip{ position:absolute; transform:translate(50%,-124%); background:var(--octe-charcoal); color:#fff;
  padding:7px 11px; border-radius:11px; font-size:12px; font-weight:600; white-space:nowrap; box-shadow:var(--octe-shadow-md);
  animation:os-tip-in .16s var(--octe-ease-out) both; }
.os-tooltip::after{ content:""; position:absolute; inset-inline-end:50%; top:100%; transform:translateX(50%);
  border:5px solid transparent; border-top-color:var(--octe-charcoal); }
.os-tooltip b{ color:#fff; } .os-tooltip small{ color:rgba(255,255,255,.6); font-weight:500; }
@keyframes os-tip-in{ from{ opacity:0; transform:translate(50%,-124%) scale(.96);} to{ opacity:1; } }

/* rounded bars */
.octe-bars{ display:flex; align-items:flex-end; gap:12px; height:170px; padding-top:8px; }
.octe-bars .bar{ flex:1; display:flex; flex-direction:column; align-items:center; gap:9px; height:100%; }
.octe-bars .bar .track{ width:100%; max-width:38px; margin:0 auto; flex:1; background:var(--octe-sunken); border-radius:9px; display:flex; align-items:flex-end; overflow:hidden; }
.octe-bars .bar .fill{ width:100%; height:0; background:var(--accent,var(--octe-red)); border-radius:9px 9px 8px 8px; transition:height var(--octe-fill) var(--octe-ease-out); }
.octe-bars .bar small{ font-size:11px; color:var(--octe-muted); }

/* ============================ data table (SHARED — fixes every screen at once) ============================
   Every list in the product renders through os_view_render, so the rules below are the single place
   table behaviour is defined. ONE responsive strategy, applied consistently at every width:
   the table NEVER changes display mode and never squishes — it sizes to its content
   (width:max-content) inside a horizontal-scroll container, with the FIRST column (the row's
   identity) and the ACTIONS column frozen to the edges so context and the row menu stay reachable
   while the middle scrolls. Cells truncate with an ellipsis + title tooltip instead of wrapping into
   a stacked mess. --tmin (sum of the columns' min-widths) and --cw (a column's max-width) are set
   per table/column by the renderer. */
.os-tbl-wrap{ overflow-x:auto; border-radius:var(--octe-r-in); overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.os-tbl-wrap:focus-visible{ outline:2px solid var(--octe-red); outline-offset:2px; }
/* Raw tables (settings editors) size to their content so they never squish.
   View-Engine tables (.os-tbl--fit) instead FIT the card and only grow past it when the card is
   narrower than --tmin (the sum of the columns' min-widths) — that way a wide table scrolls on a
   laptop/phone but doesn't force a pointless scrollbar on a desktop that can hold it. */
.os-tbl{ width:max-content; min-width:max(100%, var(--tmin, 520px)); border-collapse:separate; border-spacing:0;
  font-size:13.5px; }
.os-tbl--fit{ width:100%; }
.os-tbl thead th{ text-align:start; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--octe-muted);
  font-weight:700; padding:11px 14px; background:var(--octe-surface-2); border-bottom:1px solid var(--octe-line); white-space:nowrap; }
.os-tbl tbody td{ padding:12px 14px; height:56px; border-bottom:1px solid var(--octe-line-2); color:var(--octe-body);
  vertical-align:middle; background:var(--octe-surface); }
.os-tbl tbody tr:last-child td{ border-bottom:none; }
.os-tbl tbody td{ transition:background var(--octe-micro); }
.os-tbl tbody tr:hover td{ background:var(--octe-surface-2); }
.os-tbl tbody tr.is-selected td{ background:var(--octe-red); color:#fff; border-color:rgba(255,255,255,.2); }
.os-tbl tbody tr.is-selected .os-cell-user b{ color:#fff; }

/* frozen edges (logical props → correct in RTL and LTR) */
.os-tbl thead th:first-child, .os-tbl tbody td:first-child{ position:sticky; inset-inline-start:0; z-index:3;
  border-inline-end:1px solid var(--octe-line-2); }
.os-tbl thead th:first-child{ z-index:4; }
.os-tbl--actions thead th.os-tbl__act, .os-tbl--actions tbody td.os-tbl__act{ position:sticky; inset-inline-end:0; z-index:3;
  border-inline-start:1px solid var(--octe-line-2); white-space:nowrap; padding:12px 8px; text-align:center; }
.os-tbl--actions thead th.os-tbl__act{ z-index:4; }

/* cell content: truncate, never wrap wildly. is-trunc = single line, is-clamp = renders its own 2nd line */
.os-tbl td.is-trunc{ max-width:var(--cw,300px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.os-tbl td.is-clamp{ max-width:var(--cw,360px); }
.os-tbl td.is-clamp > b, .os-tbl td.is-clamp > a, .os-tbl td.is-clamp .m-sub{
  display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.os-tbl .os-cell-user{ min-width:0; max-width:100%; }
.os-tbl .os-cell-user > span{ min-width:0; overflow:hidden; }
.os-tbl .os-cell-user b, .os-tbl .os-cell-user a{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.os-tbl .os-pill{ white-space:nowrap; max-width:100%; }
.os-tbl [dir="ltr"]{ white-space:nowrap; }   /* dates + numbers never wrap */

/* Mobile "Show More" helper cell — hidden at every desktop/tablet width so the table grid is
   byte-for-byte unchanged; os-responsive.css §11 reveals it only inside the phone card layout.
   Kept here (not in the responsive layer) so a row's extra <td> can never add a stray column even
   if os-responsive.css fails to load. .is-more is a no-op on desktop — it only matters in §11. */
.os-tbl__more{ display:none; }

/* settings editors (crm_settings / task_settings / plan_settings) render raw .os-tbl rows: the same
   scroll+freeze rules above already stop them squishing — these give the swatch/routing cells room. */
.os-tbl td .os-input{ min-width:110px; }
.os-tbl td .os-swatches{ flex-wrap:nowrap; gap:7px; }
.os-tbl td .os-swatch span{ width:24px; height:24px; }
.os-tbl td .m-sub{ margin-top:3px; }

.os-cell-user{ display:flex; align-items:center; gap:10px; }
.os-cell-user b{ color:var(--octe-ink); font-weight:600; }
.os-pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px; font-size:12px; font-weight:600; }
.os-pill .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.os-pill--green{ background:var(--octe-green-tint); color:var(--octe-green); }
.os-pill--red{ background:var(--octe-red-tint); color:var(--octe-red); }
.os-pill--amber{ background:var(--octe-amber-tint); color:var(--octe-amber); }
.os-pill--blue{ background:var(--octe-blue-tint); color:var(--octe-blue); }
.os-pill--gray{ background:var(--octe-sunken); color:var(--octe-muted); }
.os-row-menu{ width:28px; height:28px; border-radius:8px; border:0; background:none; color:var(--octe-faint); cursor:pointer; }
.os-row-menu:hover{ background:var(--octe-sunken); color:var(--octe-body); }

/* coming-soon placeholder */
.os-coming{ display:grid; place-items:center; min-height:54vh; text-align:center; }
.os-coming__box{ max-width:430px; }
.os-coming__ill{ width:150px; height:150px; margin:0 auto 20px; display:block; }
.os-coming h2{ font-size:22px; margin-bottom:8px; }
.os-coming p{ color:var(--octe-muted); font-size:14.5px; line-height:1.75; margin:0; }
.os-coming .os-chip{ margin-top:18px; }

/* department dot + member/team rows */
.dept-dot{ width:11px; height:11px; border-radius:50%; flex:none; display:inline-block; }
.os-cell-dept{ display:flex; align-items:center; gap:10px; }
.os-cell-dept b{ color:var(--octe-ink); font-weight:600; }
.os-cell-dept span.en{ color:var(--octe-faint); font-size:12px; }
.os-member{ display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--octe-line-2); }
.os-member:last-child{ border-bottom:none; }
.os-member .m-body{ min-width:0; flex:1; }
.os-member .m-name{ color:var(--octe-ink); font-weight:600; font-size:13.5px; display:block; }
.os-member .m-sub{ color:var(--octe-muted); font-size:12px; }
.os-badge-lead{ font-size:10.5px; font-weight:700; background:var(--octe-red-tint); color:var(--octe-red); padding:3px 9px; border-radius:999px; flex:none; }

/* ==========================================================================
   View Engine — toolbar, sortable headers, row menu, pager, selected row
   ========================================================================== */
.os-view-search{ display:flex; align-items:center; gap:7px; background:var(--octe-surface-2); border:1px solid var(--octe-line);
  border-radius:999px; padding:6px 12px; color:var(--octe-muted); }
.os-view-search svg{ width:16px; height:16px; flex:none; }
.os-view-search input{ border:0; background:transparent; outline:none; width:130px; font-family:inherit; font-size:13px; color:var(--octe-ink); }
.os-th-sort{ color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:3px; }
.os-th-sort:hover{ color:var(--octe-ink); }
.os-th-sort.is-on{ color:var(--octe-red); }
.os-btn--sm{ padding:8px 14px; font-size:13px; }
.os-muted-dash{ color:var(--octe-faint); }

.os-menu{ position:relative; display:inline-block; }
.os-menu > summary{ list-style:none; cursor:pointer; }
.os-menu > summary::-webkit-details-marker{ display:none; }
/* The row menu sits inside .os-tbl-wrap, whose overflow-x:auto forces overflow-y:auto — an absolutely
   positioned dropdown there gets CLIPPED (items cut off / needing a scroll). position:fixed lifts it
   out of every ancestor's overflow; os.js pins it to the trigger's rect, flips it above when there is
   no room below, and clamps it on-screen. It must ALWAYS show every item, so it never scrolls itself:
   no max-height, no overflow. (With JS off, auto insets leave it at its static position — still
   unclipped, just unflipped.) */
.os-menu__pop{ position:fixed; z-index:80; min-width:172px; max-width:min(86vw, 300px);
  max-height:none; overflow:visible;
  background:var(--octe-surface); border:1px solid var(--octe-line); border-radius:12px; box-shadow:var(--octe-shadow-md); padding:6px; }
.os-menu__pop form{ margin:0; }
.os-menu__item{ display:block; width:100%; text-align:start; padding:8px 12px; border-radius:8px; font-size:13px;
  color:var(--octe-body); background:none; border:0; cursor:pointer; text-decoration:none; font-family:inherit; }
.os-menu__item:hover{ background:var(--octe-surface-2); color:var(--octe-ink); }
.os-menu__item.is-danger{ color:var(--octe-red); }
.os-menu__item.is-danger:hover{ background:var(--octe-red-tint); }

.os-pager{ display:flex; align-items:center; justify-content:space-between; padding:16px 4px 2px; margin-top:6px; }
.os-pager__count{ font-size:12.5px; color:var(--octe-muted); }
.os-pager__nav{ display:flex; gap:4px; }
.os-pager__btn{ min-width:32px; height:32px; padding:0 8px; display:grid; place-items:center; border-radius:9px;
  border:1px solid var(--octe-line); background:var(--octe-surface); color:var(--octe-body); font-size:13px; text-decoration:none; }
.os-pager__btn:hover{ box-shadow:var(--octe-shadow-sm); }
.os-pager__btn.is-on{ background:var(--octe-red); color:#fff; border-color:var(--octe-red); }
.os-pager__btn.is-disabled{ opacity:.4; pointer-events:none; }

/* red-filled selected row keeps its content legible */
.os-tbl tbody tr.is-selected .os-pill{ background:rgba(255,255,255,.22); color:#fff; }
.os-tbl tbody tr.is-selected .os-cell-user b,
.os-tbl tbody tr.is-selected .os-cell-dept b,
.os-tbl tbody tr.is-selected .os-cell-dept span.en{ color:#fff; }
.os-tbl tbody tr.is-selected .os-avatar{ background:rgba(255,255,255,.22); color:#fff; }
.os-tbl tbody tr.is-selected .os-muted-dash{ color:rgba(255,255,255,.75); }
.os-tbl tbody tr.is-selected .os-row-menu{ color:rgba(255,255,255,.85); }

/* color swatches (department form) */
.os-swatches{ display:flex; gap:10px; flex-wrap:wrap; }
.os-swatch{ cursor:pointer; position:relative; }
.os-swatch input{ position:absolute; opacity:0; width:0; height:0; }
.os-swatch span{ width:30px; height:30px; border-radius:50%; background:var(--c); display:block; box-shadow:0 0 0 1px var(--octe-line); transition:transform var(--octe-micro), box-shadow var(--octe-micro); }
.os-swatch input:checked + span{ box-shadow:0 0 0 2px var(--octe-surface), 0 0 0 4px var(--c); transform:scale(1.1); }
.os-swatch input:focus-visible + span{ outline:2px solid var(--octe-red); outline-offset:2px; }
textarea.os-input{ resize:vertical; min-height:56px; }
select.os-input{ appearance:none; -webkit-appearance:none; cursor:pointer; }

/* filter bar (audit, and any filtered list) */
.os-filterbar{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; background:var(--octe-surface);
  border:1px solid var(--octe-line); border-radius:var(--octe-r-card); padding:16px 18px; box-shadow:var(--octe-shadow-sm); margin-bottom:20px; }
.os-filterbar .ff{ display:flex; flex-direction:column; gap:5px; }
.os-filterbar .ff label{ font-size:11.5px; font-weight:600; color:var(--octe-muted); }
.os-filterbar input, .os-filterbar select{ border:1px solid var(--octe-line); border-radius:12px; padding:8px 12px;
  background:var(--octe-surface-2); font-family:inherit; font-size:13.5px; color:var(--octe-ink); min-width:132px; }
.os-filterbar input:focus, .os-filterbar select:focus{ outline:none; border-color:var(--octe-red); box-shadow:0 0 0 3px var(--octe-red-tint); }

/* permission editor — ability rows + tri-state (default / grant / revoke) */
.os-perm-list{ display:flex; flex-direction:column; }
.os-perm{ display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:16px; padding:13px 2px; border-bottom:1px solid var(--octe-line-2); }
.os-perm:last-child{ border-bottom:none; }
.os-perm__meta b{ color:var(--octe-ink); font-weight:600; font-size:14px; display:block; }
.os-perm__def{ font-size:11.5px; color:var(--octe-muted); }
.os-tri{ padding:3px; }
.os-tri label span{ display:inline-block; padding:5px 13px; border-radius:999px; font-size:12.5px; font-weight:600; color:var(--octe-muted); cursor:pointer; transition:background var(--octe-micro), color var(--octe-micro); }
.os-tri input{ position:absolute; opacity:0; width:0; height:0; }
.os-tri input:checked + span{ color:#fff; }
.os-tri label:nth-child(1) input:checked + span{ background:var(--octe-charcoal); }
.os-tri label:nth-child(2) input:checked + span{ background:var(--octe-green); }
.os-tri label:nth-child(3) input:checked + span{ background:var(--octe-red); }
.os-tri label.is-locked span{ opacity:.45; cursor:not-allowed; }
.os-tri input:focus-visible + span{ outline:2px solid var(--octe-red); outline-offset:1px; }
@media (max-width:620px){ .os-perm{ grid-template-columns:1fr; gap:8px; } }

/* ============================================================================
   P5.1 — Pages & Blocks: the tree pane, spaces, page shell.
   RTL-first: insets use logical properties (inline-start/end), so the tree indents
   to the right in Arabic and would follow the shell if it were ever flipped.
   ========================================================================== */
.os-ws{ display:grid; grid-template-columns:280px minmax(0,1fr); gap:20px; align-items:start; }
.os-ws__main{ display:grid; gap:20px; min-width:0; }

/* ---- pane ---- */
.os-ws__pane{ position:sticky; top:20px; padding:16px 14px; max-height:calc(100vh - 40px); overflow:auto; }
.os-pane__head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 4px 10px; }
.os-pane__head--sub{ margin-top:18px; padding-top:14px; border-top:1px solid var(--octe-line-2); }
.os-pane__label{ font-size:10.5px; font-weight:750; letter-spacing:.10em; text-transform:uppercase; color:var(--octe-faint); }
.os-pane__empty{ margin:6px 4px; font-size:12.5px; color:var(--octe-muted); }
.os-pane__list{ display:grid; gap:2px; }
.os-pane__item{ display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:10px;
  font-size:13px; color:var(--octe-body); text-decoration:none; }
.os-pane__item:hover{ background:var(--octe-surface-2); color:var(--octe-ink); }
/* The current page is the ONE red-filled row (in the tree). Favorites/recent echo it with a tint —
   filling them red too would paint the same page three times down one pane. */
.os-pane__item.is-here{ background:var(--octe-red-tint); color:var(--octe-red); font-weight:650; }
.os-icon-btn--sm{ width:30px; height:30px; border-radius:9px; }
.os-icon-btn--sm svg{ width:15px; height:15px; }
.os-icon-btn.is-on{ color:var(--octe-red); background:var(--octe-red-tint); }

/* ---- spaces ---- */
.os-spaces{ display:grid; gap:4px; }
.os-space{ display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:12px;
  text-decoration:none; color:var(--octe-body); font-size:13.5px; font-weight:600;
  border:1px solid transparent; transition:background var(--octe-micro), color var(--octe-micro); }
.os-space:hover{ background:var(--octe-surface-2); color:var(--octe-ink); }
/* Tinted in the space's own colour, not filled: "which space" and "which page" are two different
   questions, and only the page gets the red fill. */
.os-space.is-on{ background:color-mix(in srgb, var(--sp,var(--octe-red)) 10%, var(--octe-surface)); color:var(--sp,var(--octe-red)); }
.os-space.is-on .os-space__name{ font-weight:700; }
.os-space__icon{ width:22px; text-align:center; font-size:15px; line-height:1; }
.os-space__name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- tree ---- */
.os-tree{ list-style:none; margin:0; padding:0; }
.os-tree--root{ margin-top:2px; }
.os-tree__li{ position:relative; }
.os-tree__row{ display:flex; align-items:center; gap:2px; border-radius:10px; padding-inline-end:2px; }
.os-tree__row:hover{ background:var(--octe-surface-2); }
.os-tree__row.is-here{ background:var(--octe-red); }
.os-tree__row.is-here .os-tree__link,
.os-tree__row.is-here .os-tree__tw,
.os-tree__row.is-here .os-tree__addbtn{ color:#fff; }
.os-tree__row.is-dragging{ opacity:.4; }
.os-tree__row.is-drop-into{ outline:2px solid var(--octe-red); outline-offset:-2px; background:var(--octe-red-tint); }
.os-tree__link{ display:flex; align-items:center; gap:7px; flex:1; min-width:0; padding:6px 2px;
  font-size:13px; color:var(--octe-body); text-decoration:none; }
.os-tree__icon{ width:18px; text-align:center; font-size:13.5px; line-height:1; flex:none; }
.os-tree__title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.os-tree__lock{ font-size:10px; flex:none; }
.os-tree__tw{ width:18px; height:18px; flex:none; display:grid; place-items:center; border:0; background:none;
  color:var(--octe-faint); cursor:pointer; padding:0; border-radius:5px; }
.os-tree__tw svg{ width:13px; height:13px; transform:scaleX(-1);   /* RTL: collapsed chevron points right-to-left */
  transition:transform var(--octe-micro) var(--octe-ease-out); }
.os-tree__tw.is-open svg{ transform:rotate(90deg); }
.os-tree__tw.is-leaf{ cursor:default; }
.os-tree__add{ display:flex; }
.os-tree__addbtn{ width:22px; height:22px; display:grid; place-items:center; border:0; background:none;
  color:var(--octe-faint); cursor:pointer; border-radius:6px; opacity:0; transition:opacity var(--octe-micro); padding:0; }
.os-tree__addbtn svg{ width:13px; height:13px; }
.os-tree__row:hover .os-tree__addbtn{ opacity:1; }
.os-tree__addbtn:hover{ background:var(--octe-sunken); color:var(--octe-ink); }
.os-tree__row.is-here .os-tree__addbtn:hover{ background:rgba(255,255,255,.22); }
.os-tree__kids{ display:none; padding-inline-start:14px; margin-inline-start:7px; border-inline-start:1px solid var(--octe-line-2); }
.os-tree__kids.is-open{ display:block; }
.os-tree__gap{ height:5px; margin:-2px 0; border-radius:3px; }
.os-tree__gap.is-drop-gap{ background:var(--octe-red); height:3px; margin:0 0 2px; }

/* ---- page shell ---- */
.os-crumbs{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12.5px; color:var(--octe-muted); }
.os-crumbs a{ color:var(--octe-muted); text-decoration:none; padding:3px 6px; border-radius:7px; }
.os-crumbs a:hover{ background:var(--octe-sunken); color:var(--octe-ink); }
.os-crumbs__sep svg{ width:12px; height:12px; transform:scaleX(-1); opacity:.6; }
.os-crumbs__now{ color:var(--octe-ink); font-weight:650; }
.os-page__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.os-page__title{ display:flex; align-items:center; gap:10px; font-size:24px; font-weight:700; margin:0; }
.os-page__icon{ font-size:26px; line-height:1; }
.os-page__title-form{ display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.os-page__icon-in{ width:46px; text-align:center; font-size:22px; padding:6px 2px; border:1px solid var(--octe-line);
  border-radius:var(--octe-r-icon); background:var(--octe-surface); }
.os-page__title-in{ flex:1; min-width:0; font-size:22px; font-weight:700; color:var(--octe-ink);
  padding:6px 10px; border:1px solid transparent; border-radius:var(--octe-r-in); background:transparent;
  font-family:var(--octe-font); }
.os-page__title-in:hover{ background:var(--octe-surface-2); }
.os-page__title-in:focus{ background:var(--octe-surface); border-color:var(--octe-line); outline:none; }
.os-page__tools{ display:flex; align-items:center; gap:8px; flex:none; }
.os-page__meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:14px; }
.os-cell-user{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--octe-body); }
.os-card__head--row{ justify-content:space-between; }

/* ---- sub-page cards ---- */
.os-pgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; }
.os-pcard{ display:grid; gap:6px; padding:16px; border-radius:var(--octe-r-in); border:1px solid var(--octe-line);
  background:var(--octe-surface); text-decoration:none; transition:box-shadow var(--octe-micro), transform var(--octe-micro); }
.os-pcard:hover{ box-shadow:var(--octe-shadow-sm); transform:translateY(-2px); }
.os-pcard__icon{ font-size:22px; line-height:1; }
.os-pcard__t{ font-size:13.5px; font-weight:650; color:var(--octe-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.os-pcard__m{ font-size:11.5px; color:var(--octe-faint); }

/* ---- space head + forms ---- */
.os-space-head{ border-top:3px solid var(--sp,var(--octe-red)); }
.os-space-head__id{ display:flex; align-items:center; gap:12px; }
.os-space-head__icon{ width:46px; height:46px; display:grid; place-items:center; font-size:24px;
  background:var(--octe-surface-2); border-radius:var(--octe-r-icon); }
.os-ws__form{ max-width:560px; }
.os-ws__actions{ display:flex; gap:10px; margin-top:6px; }
.os-input--icon{ width:74px; text-align:center; font-size:20px; }
.os-emoji{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.os-emoji__b{ width:34px; height:34px; border:1px solid var(--octe-line); background:var(--octe-surface);
  border-radius:10px; font-size:16px; cursor:pointer; line-height:1; }
.os-emoji__b:hover{ border-color:var(--octe-red); background:var(--octe-red-tint); }
.os-swatches{ display:flex; gap:8px; flex-wrap:wrap; }
.os-swatch{ position:relative; display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:999px;
  border:1px solid var(--octe-line); cursor:pointer; font-size:12.5px; font-weight:600; color:var(--octe-body); }
.os-swatch::before{ content:""; width:12px; height:12px; border-radius:50%; background:var(--sw); }
.os-swatch input{ position:absolute; opacity:0; pointer-events:none; }
/* .is-on is the server-rendered state; :has keeps the selection live as the user clicks, with no JS. */
.os-swatch.is-on,
.os-swatch:has(input:checked){ border-color:var(--sw); color:var(--octe-ink); background:var(--octe-surface-2); }
.os-swatch:not(:has(input:checked)).is-on{ border-color:var(--octe-line); color:var(--octe-body); background:none; }
.os-swatch:focus-within{ outline:2px solid var(--octe-red); outline-offset:2px; }

/* ---- first-run hero (one filled hero per view) ---- */
.os-ws__hero{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center;
  background:var(--octe-red); color:#fff; box-shadow:var(--octe-shadow-hero); }
.os-ws__hero h2{ font-size:22px; font-weight:750; margin:0 0 8px; }
.os-ws__hero p{ font-size:13.5px; opacity:.92; margin:0 0 18px; max-width:46ch; line-height:1.7; }
.os-ws__hero .os-btn--primary{ background:#fff; color:var(--octe-red); }
.os-ws__hero-media svg{ width:190px; height:auto; }

@media (max-width:980px){
  .os-ws{ grid-template-columns:1fr; }
  .os-ws__pane{ position:static; max-height:none; }
  .os-ws__hero{ grid-template-columns:1fr; }
  .os-ws__hero-media{ display:none; }
}