/* Lenci · Brand Memory (/memory). Builds on studio.css tokens (canvas, panels, energy gradient, Sora / Inter / Cairo).
   Layout: top bar → shell (left rail on desktop, segmented tabs under the bar on phones) → one panel per section.
   Text colours stay at AAA contrast on the dark glass (ink / muted on panel); chips carry light tints on tinted wells.
   Freshness palette: fresh green, aging amber, due orange, expired red, dormant lilac — the same five in chips, the health strip
   and the legend. Logical properties throughout, so Arabic (dir=rtl) mirrors without overrides. */
:root {
  --mem: linear-gradient(135deg, #f5b041 0%, #d946ef 52%, #8b5cf6 100%);
  --mem-h: linear-gradient(90deg, #f5d08a 0%, #e9a8ff 52%, #c9b8ff 100%);
  --glass: linear-gradient(180deg, rgba(23,23,35,.9), rgba(14,14,22,.94));
  --ok: #86efac; --warn: #fde68a; --due: #fdba74; --bad: #fca5a5; --dormant: #d8ccff;
  --ok-bg: rgba(52,211,153,.14); --warn-bg: rgba(245,176,65,.14); --due-bg: rgba(251,146,60,.15); --bad-bg: rgba(248,113,113,.15); --dormant-bg: rgba(167,139,250,.14);
}
html, body { height: auto; min-height: 100%; }
body { overflow: auto; overflow-x: hidden; background: radial-gradient(1100px 650px at 85% -10%, rgba(217,70,239,.10), transparent 60%), radial-gradient(900px 600px at -10% 100%, rgba(245,176,65,.07), transparent 60%), var(--canvas); }
.mem-app { display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); min-height: 100vh; height: auto; }
.mem-app .muted, .mem-app .muted * { color: var(--muted); }
.mem-app a.ghost { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.ghost.small, .mem-app .ghost.small { padding: 5px 10px; font-size: 11px; }
.primary.small { padding: 8px 14px; font-size: 11.5px; border-radius: 10px; }
.ghost.danger { color: #fecaca; }
.ghost.danger:hover { border-color: #ef4444; color: #fee2e2; }
.ghost.link { border-color: transparent; background: transparent; box-shadow: none; text-decoration: underline; text-underline-offset: 3px; }
button.busy { opacity: .55; cursor: progress; }
code, .mem-key { font-family: var(--mono); font-size: 11.5px; }

/* ----------------------------------------------------------------- top bar */
.mem-brand { text-decoration: none; color: inherit; }
.mem-sep { color: var(--muted); font-size: 18px; line-height: 1; margin-top: -2px; }
.mem-wordmark { font-family: var(--display); font-weight: 700; font-size: 21px; letter-spacing: -0.02em; line-height: 1; background: var(--mem-h); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mem-pro { color: #fbe3b5; border-color: rgba(245,176,65,.55); background: linear-gradient(180deg, rgba(245,176,65,.16), rgba(217,70,239,.08)); }
.mem-back::before { content: ""; width: 7px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-inline-end: 2px; flex: none; }
[dir="rtl"] .mem-back::before { transform: rotate(-135deg); }
.mem-hint { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 90; display: none; margin: 0; padding: 10px 16px; border-radius: 12px; background: rgba(18,18,28,.96); border: 1px solid var(--line-2); color: var(--ink); font-size: 12.5px; max-width: min(92vw, 520px); pointer-events: none; }
.mem-hint.toast { display: block; }

/* ----------------------------------------------------------------- shell + rail */
.mem-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 26px; width: 100%; max-width: 1320px; margin: 0 auto; padding: 22px 24px 70px; min-width: 0; }
.mem-rail { position: sticky; top: 16px; align-self: start; display: flex; flex-direction: column; gap: 3px; padding: 12px; border-radius: 20px; border: 1px solid var(--line); background: var(--glass); box-shadow: var(--edge), 0 18px 40px rgba(0,0,0,.35); }
.mem-rail.off { opacity: .5; pointer-events: none; }
.mem-rail-kicker { margin: 4px 8px 10px; font-family: var(--display); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
[dir="rtl"] .mem-rail-kicker { letter-spacing: 0; }
.mem-tab { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font-family: var(--display); font-weight: 600; font-size: 12.5px; text-align: start; transition: background var(--t), color var(--t); }
.mem-tab:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.mem-tab[aria-selected="true"] { color: #fff; background: linear-gradient(135deg, rgba(139,92,246,.38), rgba(217,70,239,.22)); box-shadow: inset 0 0 0 1px rgba(217,70,239,.35), inset 0 1px 0 rgba(255,255,255,.12); }
.mem-tab[aria-selected="true"]::before { content: ""; position: absolute; inset-inline-start: -12px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--mem); }
.mem-tab span { flex: 1 1 auto; min-width: 0; }
.mem-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-family: var(--latin); font-size: 11px; font-weight: 800; color: #1a1205; background: linear-gradient(135deg, #f5d08a, #f5b041); }
.mem-ico { width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
#tab-overview .mem-ico { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='2'/%3E%3Crect x='14' y='3' width='7' height='5' rx='2'/%3E%3Crect x='14' y='12' width='7' height='9' rx='2'/%3E%3Crect x='3' y='16' width='7' height='5' rx='2'/%3E%3C/svg%3E"); }
#tab-brand .mem-ico { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l3 6 6 .9-4.5 4.3 1 6.3L12 16.8 6.5 19.5l1-6.3L3 8.9 9 8z'/%3E%3C/svg%3E"); }
#tab-prefs .mem-ico { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0'/%3E%3Ccircle cx='16' cy='6' r='2'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E"); }
#tab-rules .mem-ico { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.4 8.3-8 9-4.6-.7-8-4.5-8-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
#tab-lessons .mem-ico { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20h18M6 16V10M11 16V5M16 16v-8M21 16v-3'/%3E%3C/svg%3E"); }
#tab-review .mem-ico { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='14' height='16' rx='2'/%3E%3Cpath d='M8 3h12v14M8 11l2.5 2.5L15 9'/%3E%3C/svg%3E"); }
#tab-timeline .mem-ico { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
#tab-settings .mem-ico { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E"); }

/* ----------------------------------------------------------------- main, heads, cards */
.mem-main { min-width: 0; display: grid; gap: 16px; align-content: start; }
.mem-panel { min-width: 0; display: grid; gap: 16px; align-content: start; animation: memIn .35s var(--ease) both; }
@keyframes memIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mem-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.mem-head > div:first-child { min-width: 0; flex: 1 1 320px; }
.mem-h1 { margin: 0; font-family: var(--display); font-size: 26px; letter-spacing: -.02em; line-height: 1.15; }
.mem-sub { margin: 6px 0 0; max-width: 70ch; font-size: 13.5px; }
.mem-card { min-width: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--glass); box-shadow: var(--edge), 0 14px 34px rgba(0,0,0,.3); padding: 18px 20px; display: grid; gap: 12px; align-content: start; }
.mem-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mem-card h2 { margin: 0; font-family: var(--display); font-size: 15.5px; letter-spacing: -.01em; }
.mem-card-head p { margin: 4px 0 0; font-size: 12.5px; }
.mem-card > button, .mem-card > a, .mem-card > .mem-file, .mem-qcard > .mem-c, .mem-card > .mem-c { justify-self: start; }
.mem-card.danger { border-color: rgba(248,113,113,.35); background: linear-gradient(180deg, rgba(60,18,24,.55), rgba(20,12,16,.9)); }
.mem-none { margin: 0; color: var(--muted); font-size: 12.5px; }
.mem-skel { height: 86px; border-radius: 18px; background: linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.07), rgba(255,255,255,.03)); background-size: 200% 100%; animation: memSk 1.2s linear infinite; }
@keyframes memSk { to { background-position: -200% 0; } }

/* banner + gate + empty */
.mem-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(139,92,246,.12); color: var(--ink); font-size: 13px; }
.mem-banner.warn { border-color: rgba(245,176,65,.45); background: var(--warn-bg); }
.mem-banner.danger { border-color: rgba(248,113,113,.5); background: var(--bad-bg); }
.mem-banner-text { flex: 1 1 260px; min-width: 0; font-variant-numeric: tabular-nums; }
.mem-gate, .mem-empty { position: relative; display: grid; justify-items: center; text-align: center; gap: 10px; padding: 46px 22px; border: 1px solid var(--line); border-radius: 24px; background: var(--glass); overflow: hidden; }
.mem-gate h1, .mem-empty h2 { margin: 0; font-family: var(--display); letter-spacing: -.02em; }
.mem-gate h1 { font-size: 28px; } .mem-empty h2 { font-size: 19px; }
.mem-gate p, .mem-empty p { margin: 0; max-width: 56ch; }
.mem-gate-orb, .mem-empty-orb { width: 74px; height: 74px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6, transparent 40%), var(--mem); box-shadow: 0 0 40px rgba(217,70,239,.45), 0 0 90px rgba(245,176,65,.2); margin-bottom: 6px; }
.mem-empty-orb { width: 52px; height: 52px; opacity: .85; }
.mem-gate-orb i { display: none; }
.mem-cta { text-decoration: none; display: inline-flex; margin-top: 6px; }
.mem-empty .ghost { margin-top: 4px; }

/* ----------------------------------------------------------------- chips + values */
.mem-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mem-c { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-family: var(--display); font-size: 10.5px; font-weight: 700; letter-spacing: .03em; border: 1px solid var(--line-2); background: rgba(255,255,255,.05); color: var(--ink); white-space: nowrap; }
.mem-c.fr::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fr-fresh.mem-c { color: var(--ok); background: var(--ok-bg); border-color: rgba(52,211,153,.35); }
.fr-aging.mem-c { color: var(--warn); background: var(--warn-bg); border-color: rgba(245,176,65,.35); }
.fr-due.mem-c { color: var(--due); background: var(--due-bg); border-color: rgba(251,146,60,.4); }
.fr-expired.mem-c { color: var(--bad); background: var(--bad-bg); border-color: rgba(248,113,113,.45); }
.fr-dormant.mem-c { color: var(--dormant); background: var(--dormant-bg); border-color: rgba(167,139,250,.35); }
.mem-c.cls { color: #e4dcff; background: rgba(139,92,246,.14); border-color: rgba(139,92,246,.32); }
.mem-c.cls-offer { color: #fde3b0; background: rgba(245,176,65,.12); border-color: rgba(245,176,65,.3); }
.mem-c.cls-audience { color: #bdf3fb; background: rgba(34,211,238,.12); border-color: rgba(34,211,238,.3); }
.mem-c.cls-voice { color: #fbd0f6; background: rgba(217,70,239,.12); border-color: rgba(217,70,239,.3); }
.mem-c.hold, .mem-c.flag { color: #fde68a; background: rgba(245,176,65,.16); border-color: rgba(245,176,65,.5); }
.mem-c.flag { color: #fecaca; background: var(--bad-bg); border-color: rgba(248,113,113,.5); }
.mem-c.st-proposed, .mem-c.pbs-learning { color: #d8ccff; background: rgba(139,92,246,.14); border-color: rgba(139,92,246,.4); border-style: dashed; }
.mem-c.st-retracted, .mem-c.st-superseded, .mem-c.st-archived, .mem-c.pbs-off { color: var(--muted); }
.mem-c.st-current, .mem-c.pbs-learned { color: var(--ok); background: var(--ok-bg); border-color: rgba(52,211,153,.32); }
.mem-c.pbs-overridden { color: #fde3b0; background: rgba(245,176,65,.12); border-color: rgba(245,176,65,.4); }
.mem-c.rk, .mem-c.qk, .mem-c.sup { color: #e4dcff; }
.mem-chip { display: inline-flex; padding: 3px 9px; border-radius: 8px; font-size: 12px; background: rgba(255,255,255,.06); border: 1px solid var(--line-2); color: var(--ink); overflow-wrap: anywhere; }
.mem-value { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.mem-v-text .mem-text { font-size: 14.5px; line-height: 1.45; }
.mem-num { font-family: var(--display); font-size: 20px; font-variant-numeric: tabular-nums; }
.mem-swatch { --sw: #8b5cf6; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 3px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); }
[dir="rtl"] .mem-swatch { padding: 3px 3px 3px 9px; }
.mem-swatch i { width: 22px; height: 22px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.mem-swatch code { color: var(--muted); direction: ltr; }
.mem-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel-2); }
.mem-link { color: #d6c9ff; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.mem-link:hover { color: #fff; }
.mem-link-btn { border: 0; background: transparent; padding: 0; color: #d6c9ff; text-decoration: underline; text-underline-offset: 3px; text-align: start; font-size: inherit; }
.mem-bool { padding: 2px 10px; border-radius: 999px; font-weight: 700; font-size: 12px; }
.mem-bool.on { color: var(--ok); background: var(--ok-bg); } .mem-bool.off { color: var(--muted); background: rgba(255,255,255,.06); }
.mem-src { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; font-size: 12px; color: var(--muted); min-width: 0; }
.mem-src-type { color: #e7e2f8; font-weight: 600; }
.mem-quote { flex: 1 1 100%; margin: 2px 0 0; padding: 6px 12px; border-inline-start: 3px solid rgba(217,70,239,.55); background: rgba(255,255,255,.03); border-radius: 0 10px 10px 0; color: #dad6ea; font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 4px 10px; overflow-wrap: anywhere; }
[dir="rtl"] .mem-quote { border-radius: 10px 0 0 10px; }
.mem-dates { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--muted); }
.mem-note, .mem-warn { margin: 0; padding: 7px 11px; border-radius: 10px; font-size: 12.5px; color: #fde68a; background: rgba(245,176,65,.12); border: 1px solid rgba(245,176,65,.4); }
.mem-warn { color: #fecaca; background: var(--bad-bg); border-color: rgba(248,113,113,.45); }

/* ----------------------------------------------------------------- record rows */
.mem-groups { display: grid; gap: 20px; }
.mem-group { display: grid; gap: 10px; }
.mem-group-h { margin: 0; font-family: var(--display); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px; }
[dir="rtl"] .mem-group-h { letter-spacing: 0; }
.mem-group-h small { font-family: var(--latin); font-size: 11px; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.07); color: var(--ink); }
.mem-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--glass); transition: border-color var(--t), box-shadow var(--t); }
.mem-row:hover { border-color: rgba(255,255,255,.14); }
.mem-row.held { border-color: rgba(245,176,65,.4); box-shadow: inset 3px 0 0 rgba(245,176,65,.6); }
[dir="rtl"] .mem-row.held { box-shadow: inset -3px 0 0 rgba(245,176,65,.6); }
.mem-row.editing { border-color: rgba(139,92,246,.6); box-shadow: 0 0 0 3px rgba(139,92,246,.16); }
.mem-row-main { min-width: 0; display: grid; gap: 8px; }
.mem-row-head { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.mem-label { margin: 0; font-family: var(--display); font-size: 14px; letter-spacing: -.005em; }
.mem-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; align-content: flex-start; justify-content: flex-end; }
.mem-row > .mem-acts { max-width: 280px; }
.mem-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mem-search, .mem-in { min-width: 0; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(8,8,14,.7); color: var(--ink); font-size: 13px; }
.mem-search { width: min(300px, 100%); }
.mem-search:focus, .mem-in:focus { outline: none; border-color: rgba(139,92,246,.7); box-shadow: 0 0 0 3px rgba(139,92,246,.2); }
.mem-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.mem-fchip { font-family: var(--display); font-size: 11.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); color: var(--muted); }
.mem-fchip[aria-pressed="true"] { color: #fff; background: var(--active); border-color: transparent; }
.mem-edit { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.mem-edit .mem-in { flex: 1 1 200px; }
.mem-edit textarea.mem-in { flex-basis: 100%; font-family: var(--mono); font-size: 12px; }
.mem-edit-acts { display: flex; gap: 6px; }
.mem-edit-colours { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mem-edit-col { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 10px; border: 1px solid var(--line-2); }
.mem-edit-col input[type=color] { width: 34px; height: 30px; padding: 0; border: 0; background: none; border-radius: 8px; }
.mem-x { width: 26px; height: 26px; display: inline-grid; place-items: center; border-radius: 50%; border: 0; background: rgba(255,255,255,.06); color: var(--muted); font-size: 15px; line-height: 1; }
.mem-x:hover { background: rgba(248,113,113,.25); color: #fff; }

/* ----------------------------------------------------------------- overview */
.mem-counts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.mem-count-tile { display: grid; gap: 2px; text-align: start; padding: 14px 14px 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--glass); color: var(--ink); min-width: 0; }
button.mem-count-tile:hover { border-color: rgba(217,70,239,.45); transform: translateY(-1px); }
.mem-count-tile b { font-family: var(--display); font-size: 26px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.mem-count-tile span { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.mem-count-tile.hot.ct-due b, .mem-count-tile.hot.ct-proposals b { color: var(--due); }
.mem-count-tile.hot.ct-expired b, .mem-count-tile.hot.ct-disputes b { color: var(--bad); }
.mem-count-tile.hot.ct-reminders b { color: var(--warn); }
.mem-hbar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.05); gap: 2px; }
.mem-hbar i { min-width: 6px; flex-basis: 0; }
.mem-hbar .fr-fresh, .mem-hlegend .fr-fresh i { background: #34d399; } .mem-hbar .fr-aging, .mem-hlegend .fr-aging i { background: #f5b041; }
.mem-hbar .fr-due, .mem-hlegend .fr-due i { background: #fb923c; } .mem-hbar .fr-expired, .mem-hlegend .fr-expired i { background: #f87171; }
.mem-hbar .fr-dormant, .mem-hlegend .fr-dormant i { background: #a78bfa; } .mem-hbar .fr-none { flex-grow: 1; }
.mem-hlegend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muted); }
.mem-hlegend span { display: inline-flex; align-items: center; gap: 6px; }
.mem-hlegend i { width: 9px; height: 9px; border-radius: 3px; }
.mem-hlegend b { color: var(--ink); }
.mem-hmeta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.mem-ov-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.mem-rem { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 11px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.mem-rem-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; flex: 1 1 220px; }
.mem-rem-main strong { font-size: 13px; overflow-wrap: anywhere; }
.mem-rem-main .muted { font-size: 12px; }
.mem-rem .mem-acts { justify-content: flex-start; }
.mem-snooze { padding: 5px 26px 5px 10px; border-radius: 9px; border: 1px solid var(--line-2); background: rgba(8,8,14,.7); color: var(--muted); font-size: 11px; font-family: var(--display); font-weight: 600; }

/* timeline */
.mem-tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; position: relative; }
.mem-tl:not(.mini)::before { content: ""; position: absolute; inset-inline-start: 9px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(180deg, rgba(217,70,239,.5), rgba(139,92,246,.15)); }
.mem-ev { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 4px; border-radius: 12px; }
.mem-tl:not(.mini) .mem-ev { padding: 11px 10px 11px 0; }
.mem-ev:hover { background: rgba(255,255,255,.03); }
.mem-ev-dot { width: 12px; height: 12px; margin-inline-start: 4px; border-radius: 50%; background: #a78bfa; box-shadow: 0 0 0 3px rgba(10,10,15,.9); z-index: 1; }
.ev-retract .mem-ev-dot, .ev-forget_all .mem-ev-dot, .ev-dismiss .mem-ev-dot { background: #f87171; }
.ev-confirm .mem-ev-dot, .ev-accept .mem-ev-dot, .ev-restore .mem-ev-dot, .ev-forget_all_undo .mem-ev-dot { background: #34d399; }
.ev-hold .mem-ev-dot, .ev-release .mem-ev-dot { background: #f5b041; }
.ev-recall .mem-ev-dot { background: #22d3ee; }
.mem-ev-body { min-width: 0; display: grid; gap: 1px; }
.mem-ev-line { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; }
.mem-ev-line span { color: #e1ddef; overflow-wrap: anywhere; }
.mem-ev-body time { font-size: 11.5px; }
.mem-ev-acts { display: flex; gap: 6px; }
.mem-more { justify-self: center; }

/* ----------------------------------------------------------------- playbooks */
.mem-pb-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.mem-pb { display: grid; gap: 8px; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.mem-pb.pb-off { opacity: .8; border-style: dashed; }
.mem-pb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.mem-pb-head h3 { margin: 0; font-family: var(--display); font-size: 13.5px; }
.mem-pb-val { font-size: 15px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.mem-conf { height: 8px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.mem-conf i { display: block; height: 100%; border-radius: inherit; background: var(--mem); }
.mem-pb-meta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.mem-pb .mem-acts { justify-content: flex-start; }
.mem-usage-h { margin: 6px 0 0; font-family: var(--display); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
[dir="rtl"] .mem-usage-h { letter-spacing: 0; }
.mem-usage { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mem-usage li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; font-size: 12.5px; }
.mem-usage-k { color: var(--muted); } .mem-usage-v { color: var(--ink); font-weight: 600; grid-column: 1; }
.mem-usage b { grid-row: 1; grid-column: 2; align-self: center; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.mem-usage-bar { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: linear-gradient(90deg, rgba(217,70,239,.8) var(--w), rgba(255,255,255,.06) var(--w)); }
[dir="rtl"] .mem-usage-bar { background: linear-gradient(270deg, rgba(217,70,239,.8) var(--w), rgba(255,255,255,.06) var(--w)); }

/* ----------------------------------------------------------------- rules */
.mem-rule-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mem-rule { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 3px; padding-inline-start: 4px; border-radius: 999px; border: 1px solid rgba(139,92,246,.4); background: linear-gradient(180deg, rgba(139,92,246,.18), rgba(139,92,246,.06)); }
.mem-rule.custom { border-color: rgba(245,176,65,.45); background: linear-gradient(180deg, rgba(245,176,65,.14), rgba(245,176,65,.04)); }
.mem-rule-open { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 8px; border: 0; background: transparent; color: var(--ink); text-align: start; min-width: 0; }
.mem-rule-open b { font-size: 12.5px; overflow-wrap: anywhere; }
.mem-rule-open .mem-chip { font-size: 11px; padding: 1px 7px; }
.mem-form { display: grid; gap: 10px; }
.mem-form-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mem-form-row .mem-in { flex: 1 1 180px; }
.mem-form-row select.mem-in { flex: 1 1 150px; }
#hold-reason { flex: 2 1 180px; }

/* ----------------------------------------------------------------- lessons + outcomes */
.mem-lesson { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; padding: 13px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.mem-lesson.proposed { border-color: rgba(139,92,246,.45); border-style: dashed; }
.mem-table-wrap { max-width: 100%; overflow-x: auto; border-radius: 14px; border: 1px solid var(--line); }
.mem-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mem-table th { position: sticky; top: 0; text-align: start; font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: .05em; color: var(--muted); background: rgba(18,18,28,.96); padding: 10px 12px; white-space: nowrap; }
.mem-table td { padding: 10px 12px; border-top: 1px solid var(--line); color: var(--ink); vertical-align: top; }
.mem-table td.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mem-table tr:hover td { background: rgba(255,255,255,.025); }
.mem-calib { display: grid; gap: 10px; }
.mem-calib h3 { margin: 4px 0 0; font-family: var(--display); font-size: 13px; }
.mem-calib-strip { display: flex; gap: 10px; align-items: flex-end; height: 140px; padding: 10px 12px 0; border-radius: 14px; background: rgba(255,255,255,.025); border: 1px solid var(--line); overflow: hidden; }
.mem-calib-bin { flex: 1 1 0; min-width: 0; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 4px; }
.mem-calib-bars { display: flex; gap: 3px; align-items: flex-end; justify-content: center; height: 100%; }
.mem-calib-bars i { width: min(18px, 40%); border-radius: 5px 5px 0 0; min-height: 3px; }
.mem-calib-bars .pred, .mem-calib-legend .pred i { background: rgba(167,139,250,.55); box-shadow: inset 0 0 0 1px rgba(201,184,255,.6); }
.mem-calib-bars .act, .mem-calib-legend .act i { background: linear-gradient(180deg, #f5b041, #d946ef); }
.mem-calib-bin span { font-size: 10.5px; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-bottom: 6px; }
.mem-calib-legend { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.mem-calib-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mem-calib-legend i { width: 10px; height: 10px; border-radius: 3px; }

/* ----------------------------------------------------------------- review queue */
.mem-q-tools { display: flex; gap: 8px; }
.mem-q { display: grid; gap: 14px; max-width: 760px; width: 100%; }
.mem-q-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; }
.mem-q-pos { font-family: var(--display); font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.mem-q-prog { height: 6px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.mem-q-prog i { display: block; height: 100%; background: var(--mem); border-radius: inherit; transition: width .3s var(--ease); }
.mem-qcard { display: grid; gap: 12px; padding: 22px; border-radius: 22px; border: 1px solid rgba(217,70,239,.3); background: radial-gradient(120% 80% at 0% 0%, rgba(217,70,239,.12), transparent 60%), var(--glass); box-shadow: var(--edge), 0 24px 60px rgba(0,0,0,.45); animation: memIn .3s var(--ease) both; }
.mem-qcard:focus { outline: none; box-shadow: var(--edge), 0 0 0 3px rgba(167,139,250,.5), 0 24px 60px rgba(0,0,0,.45); }
.mem-q-label { margin: 0; font-family: var(--display); font-size: 20px; letter-spacing: -.01em; overflow-wrap: anywhere; }
.mem-q-acts { justify-content: flex-start; padding-top: 4px; }
.mem-q-acts kbd { margin-inline-start: 6px; padding: 0 5px; border-radius: 5px; border: 1px solid var(--line-2); font-family: var(--mono); font-size: 10px; color: var(--muted); }
.mem-q-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.mem-kbd-hint { font-size: 11.5px; text-align: center; flex: 1 1 200px; }
.mem-ab { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mem-ab-side { position: relative; display: grid; gap: 8px; align-content: start; padding: 14px; padding-top: 30px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); min-width: 0; }
.mem-ab-tag { position: absolute; top: 8px; inset-inline-start: 10px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; font-family: var(--display); font-weight: 700; font-size: 11px; color: #160d26; background: var(--mem-h); }

/* ----------------------------------------------------------------- settings */
.mem-set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.mem-switch-row, .mem-set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line); }
.mem-switch-row > div { min-width: 0; flex: 1 1 200px; }
.mem-switch-row strong, .mem-set-row strong { font-size: 13px; }
.mem-switch-row p, .mem-set-row p { margin: 2px 0 0; font-size: 12px; flex-basis: 100%; }
.mem-switch { position: relative; width: 46px; height: 26px; flex: none; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.08); padding: 0; transition: background var(--t); }
.mem-switch i { position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #cfcfe0; transition: inset-inline-start var(--t), background var(--t); }
.mem-switch[aria-checked="true"] { background: var(--active); border-color: transparent; }
.mem-switch[aria-checked="true"] i { inset-inline-start: 23px; background: #fff; }
.mem-switch[disabled] { opacity: .4; cursor: not-allowed; }
.mem-seg { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(8,8,14,.6); }
.mem-seg-b { border: 0; background: transparent; color: var(--muted); padding: 6px 12px; border-radius: 999px; font-family: var(--display); font-size: 11.5px; font-weight: 600; }
.mem-seg-b[aria-checked="true"] { color: #fff; background: var(--active); }
.mem-holds, .mem-exports { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mem-holds li, .mem-exports li { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.025); font-size: 12.5px; }
.mem-holds li > div { display: flex; flex-wrap: wrap; gap: 2px 10px; min-width: 0; flex: 1 1 200px; }
.mem-holds li.mem-none, .mem-exports li.mem-none { border-style: dashed; }
.mem-file { position: relative; overflow: hidden; justify-self: start; cursor: pointer; }
.mem-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mem-import-preview { display: grid; gap: 10px; }
.mem-import-preview:empty { display: none; }
.mem-import-sum { display: flex; gap: 8px; flex-wrap: wrap; }
.mem-import-sum span { padding: 6px 12px; border-radius: 12px; border: 1px solid var(--line-2); font-size: 12.5px; color: var(--muted); }
.mem-import-sum b { color: var(--ink); font-family: var(--display); }
.mem-import-sum .imp-adds b { color: var(--ok); } .mem-import-sum .imp-updates b { color: var(--warn); } .mem-import-sum .imp-conflicts b { color: var(--bad); }
.mem-import-table tr.imp-conflicts td:first-child { color: var(--bad); } .mem-import-table tr.imp-adds td:first-child { color: var(--ok); } .mem-import-table tr.imp-updates td:first-child { color: var(--warn); }
.mem-import-preview .mem-acts { justify-content: flex-start; }
.mem-set-forget { grid-column: 1 / -1; }
.mem-set-forget .ghost.danger { justify-self: start; }
.danger-primary { background: linear-gradient(135deg, #b91c1c, #e11d48 60%, #f97316) !important; }
.mem-forget-list { margin: 0; padding-inline-start: 20px; display: grid; gap: 4px; color: var(--ink); }
.mem-check { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.mem-check input { width: 18px; height: 18px; accent-color: #d946ef; }

/* ----------------------------------------------------------------- sheet + toast */
.mem-sheet-card { width: min(100%, 600px); padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: calc(100vh - 40px); }
.mem-sheet-card .modal-x { z-index: 2; background: rgba(10,10,15,.45); }
.mem-sheet-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 22px 24px 16px; padding-inline-end: 56px; background: radial-gradient(90% 120% at 20% -20%, rgba(217,70,239,.25), transparent 70%); border-bottom: 1px solid var(--line); }
.mem-sheet-head h2 { margin: 0; font-size: 19px; font-family: var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.mem-sheet-head .mem-key { color: var(--muted); direction: ltr; overflow-wrap: anywhere; }
.mem-sheet-body { padding: 18px 24px; overflow: auto; display: grid; gap: 14px; min-height: 100px; }
.mem-sheet-body p { margin: 0; }
.mem-sheet-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 24px 20px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.mem-sheet-foot:empty { display: none; }
.mem-series { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mem-series-item { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.mem-series-item.cur { border-color: rgba(52,211,153,.45); }
.mem-series-item.st-superseded, .mem-series-item.st-retracted { opacity: .78; }
.mem-series-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; }
.mem-toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 95; display: flex; align-items: center; gap: 12px; max-width: min(calc(100vw - 24px), 560px); padding: 10px 12px 10px 16px; border-radius: 14px; background: rgba(18,18,28,.97); border: 1px solid var(--line-2); color: var(--ink); font-size: 13px; box-shadow: 0 20px 50px rgba(0,0,0,.55); }
[dir="rtl"] .mem-toast { padding: 10px 16px 10px 12px; }
.mem-toast.show { animation: memToast .3s var(--ease) both; }
@keyframes memToast { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.mem-toast span { min-width: 0; overflow-wrap: anywhere; }
.mem-toast-act { flex: none; border: 0; border-radius: 9px; padding: 6px 12px; font-family: var(--display); font-weight: 700; font-size: 12px; color: #160d26; background: var(--mem-h); }

/* ----------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .mem-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mem-ov-cols, .mem-pb-cols, .mem-set-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .mem-shell { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 0 14px 60px; }
  .mem-rail { position: sticky; top: 0; z-index: 25; flex-direction: row; gap: 2px; margin: 0 -14px; padding: 8px 14px; border-radius: 0; border-width: 0 0 1px; overflow-x: auto; scrollbar-width: none; background: rgba(10,10,15,.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: none; }
  .mem-rail::-webkit-scrollbar { display: none; }
  .mem-rail-kicker { display: none; }
  .mem-tab { width: auto; flex: none; padding: 8px 12px; border-radius: 999px; font-size: 12px; white-space: nowrap; }
  .mem-tab[aria-selected="true"] { background: var(--active); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
  .mem-tab[aria-selected="true"]::before { display: none; }
  .mem-tab .mem-ico { width: 14px; height: 14px; }
  .mem-row, .mem-lesson { grid-template-columns: minmax(0, 1fr); }
  .mem-row > .mem-acts, .mem-lesson .mem-acts { max-width: none; justify-content: flex-start; }
  .mem-h1 { font-size: 22px; }
}
@media (max-width: 560px) {
  .mem-pro, .mem-back span, .mem-nav span, .mem-app .arabic { display: none; }
  .mem-back, .mem-nav { padding: 7px 9px; }
  #nawaa-link::before { content: "✦"; } #connections-link::before { content: "⇄"; }
  .mem-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mem-card { padding: 14px; border-radius: 16px; }
  .mem-row { padding: 12px; }
  .mem-ab { grid-template-columns: minmax(0, 1fr); }
  .mem-qcard { padding: 16px; border-radius: 18px; }
  .mem-q-label { font-size: 17px; }
  .mem-kbd-hint { display: none; }
  .mem-search { width: 100%; }
  .mem-tools { flex: 1 1 100%; }
  .modal { padding: 10px; }
  .mem-sheet-head { padding: 18px 16px 12px; padding-inline-end: 52px; }
  .mem-sheet-body, .mem-sheet-foot { padding-inline: 16px; }
  .mem-calib-strip { gap: 4px; padding-inline: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .mem-panel, .mem-qcard, .mem-toast.show, .mem-skel { animation: none !important; }
  .mem-q-prog i, .mem-switch i { transition: none; }
}