/* Design system: the Altibbi SEO tool's (apps/seo-dashboard-v2) — brand tokens from brand.altibbi.app,
   Tajawal titles + IBM Plex Sans Arabic text, macOS-density controls, Notion-structured neutrals.
   Layout: page header | queue rail (sidebar material, nav-item rows) | platform preview on its feed | review panel. */
:root{
  /* brand (vendored from brand.altibbi.app tokens) */
  --color-brand:#155EEF; --color-brand-200:#98B6F2; --color-brand-300:#6E99F0; --color-brand-400:#427CEF;
  --color-brand-600:#0C4ED4; --color-brand-700:#0741B3; --color-brand-soft:#E9EFFB;
  /* semantic (light) */
  --c-bg:#FFFFFF; --c-card:#FFFFFF; --c-surface:#F7F7F8; --c-nav:#F7F7F8; --c-inset:#F0F1F3;
  --c-border:#D5D6D9; --c-border-subtle:#E6E6E8; --c-border-strong:#D5D6D9;
  --c-t1:#17181A; --c-t2:#50545B; --c-t3:#6B7078;
  --c-hover:color-mix(in srgb,#17181A 6%,transparent); --c-surface-hover:#F7F7F8; --c-surface-active:#F0F1F3;
  --c-accent:#155EEF; --c-accent-soft:color-mix(in srgb,#155EEF 8%,#ffffff); --c-selected:color-mix(in srgb,#155EEF 10%,transparent);
  --c-success:#10B981; --c-success-text:#047857; --c-tint-green:#D1FAE5;
  --c-warn:#F79009; --c-warn-text:#B4650A; --c-tint-amber:color-mix(in srgb,#F79009 12%,#ffffff);
  --c-danger:#CF274D; --c-danger-text:#A01233; --c-tint-red:#F9EBEF;
  --c-tint-blue:#E9EFFB;
  --control-track:#E6E6E8;
  --btn-primary-bg:#0C4ED4; --btn-primary-bg-hover:#0741B3; --btn-primary-text:#FFFFFF;
  --nav-selected-bg:#FFFFFF; --nav-selected-ink:#17181A;
  --overlay:color-mix(in srgb,#17181A 22%,transparent);
  --shadow-sm:0 0 0 .5px color-mix(in srgb,#17181A 5%,transparent),0 1px 2px color-mix(in srgb,#17181A 4%,transparent);
  --shadow-md:0 0 0 .5px color-mix(in srgb,#17181A 6%,transparent),0 2px 6px color-mix(in srgb,#17181A 5%,transparent),0 10px 28px color-mix(in srgb,#17181A 7%,transparent);
  --shadow-lg:0 0 0 .5px color-mix(in srgb,#17181A 7%,transparent),0 8px 20px color-mix(in srgb,#17181A 9%,transparent),0 28px 56px color-mix(in srgb,#17181A 12%,transparent);
  --focus-ring:0 0 0 3px color-mix(in srgb,var(--c-accent) 35%,transparent);
  /* geometry */
  --radius-xs:4px; --radius-sm:6px; --radius-md:8px; --radius-lg:10px; --radius-xl:12px; --radius-full:9999px;
  --space-0-5:2px; --space-1:4px; --space-1-5:6px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  --ui-control-h:32px; --ui-control-h-compact:28px; --ui-control-h-large:36px; --ui-nav-item-h:36px;
  --dur-fast:150ms; --dur-instant:75ms; --ease:cubic-bezier(0,0,.2,1);
  --z-sticky:100; --z-popover:1100; --z-modal:1000; --z-toast:1200;
  /* typography */
  --ui-font-sans:"IBM Plex Sans Arabic",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ui-font-display:"Tajawal","IBM Plex Sans Arabic",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ui-text-meta:12px; --ui-text-body:14px; --ui-text-section:16px; --ui-text-subheading:18px; --ui-text-page:28px;
  --ui-leading-body:1.6; --ui-leading-body-ar:1.9; --ui-leading-snug:1.35; --ui-leading-tight:1.2;
  --ui-tracking-tight:-.018em;
  --f-post:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"IBM Plex Sans Arabic",sans-serif;
  --c-x:#14171a;
}
/* Light only, like the SEO tool: it ships light by default whatever the OS theme. */
:root{color-scheme:light}

html{height:100%;box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
body{height:100%;background:var(--c-bg);color:var(--c-t1);font-family:var(--ui-font-sans),"Segoe UI Emoji","Noto Color Emoji";font-size:var(--ui-text-body);line-height:var(--ui-leading-body);-webkit-font-smoothing:antialiased;accent-color:var(--c-accent)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid transparent;outline-offset:1px;box-shadow:var(--focus-ring)}
h1,h2,h3{margin:0;font-family:var(--ui-font-display);font-weight:700;text-wrap:balance;font-synthesis-weight:none}
.tabnum{font-variant-numeric:tabular-nums}
.app{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr)}

/* app bar: one 56px row — brand, view switch, then actions. Content starts right under it. */
.top{display:flex;align-items:center;gap:var(--space-3);min-height:56px;padding-block:var(--space-2);padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px));background:var(--c-bg);border-bottom:1px solid var(--c-border-subtle);position:relative;z-index:var(--z-sticky)}
.brand{display:flex;align-items:center;gap:var(--space-2);min-width:0}
.brand-mark{width:28px;height:28px;border-radius:var(--radius-md);background:var(--color-brand);display:grid;place-items:center;color:#fff;flex:none}
.brand-mark svg{width:16px;height:16px}
.brand h1{font-size:var(--ui-text-section);line-height:24px;white-space:nowrap}
.brand p{margin:0;color:var(--c-t3);font-size:var(--ui-text-meta);line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.brand>div{min-width:0;display:grid}
.top .spacer{flex:1}
.page-actions{display:flex;gap:var(--space-2);align-items:center;margin-inline-start:auto}
.bell{position:relative}
.bell b{position:absolute;top:1px;inset-inline-end:1px;min-width:16px;height:16px;padding:0 4px;border-radius:var(--radius-full);background:var(--c-danger);color:#fff;font-size:12px;line-height:16px;font-weight:600;text-align:center;font-variant-numeric:tabular-nums}
.me-btn{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--ui-control-h);padding:0 var(--space-1);border:1px solid transparent;border-radius:var(--radius-md);background:none}
.me-btn:hover{background:var(--c-hover)}
.avatar{width:28px;height:28px;border-radius:var(--radius-full);display:grid;place-items:center;color:#fff;font-size:12px;font-weight:600;flex:none}
.avatar.sm{width:22px;height:22px;font-size:12px;letter-spacing:-.02em}
.pop{position:absolute;top:calc(100% - 4px);inset-inline-end:var(--space-4);z-index:var(--z-popover);width:min(380px,calc(100vw - 32px));max-height:min(70vh,560px);overflow:auto;border:1px solid var(--c-border);border-radius:var(--radius-lg);background:var(--c-card);box-shadow:var(--shadow-md)}
.pop header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--c-border-subtle);position:sticky;top:0;background:var(--c-card)}
.pop header strong{font-family:var(--ui-font-display);font-size:var(--ui-text-section)}
.notif{display:grid;grid-template-columns:28px minmax(0,1fr) 8px;gap:var(--space-2);width:100%;padding:var(--space-3) var(--space-4);border:0;border-bottom:1px solid var(--c-border-subtle);background:none;text-align:start;color:var(--c-t2)}
.notif:hover{background:var(--c-hover)}
.notif strong{color:var(--c-t1);font-weight:600}
.notif small{display:block;color:var(--c-t3);font-size:var(--ui-text-meta)}
.notif .q{display:block;color:var(--c-t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notif .dot{width:8px;height:8px;border-radius:50%;background:var(--c-accent);margin-top:8px}
.notif.read .dot{visibility:hidden}
.menu-list{display:grid;padding:var(--space-1)}
.menu-list .who{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--c-border-subtle);margin-bottom:var(--space-1)}
.menu-list .who b{display:block}
.menu-list button{display:flex;align-items:center;gap:var(--space-2);min-height:var(--ui-control-h);padding:0 var(--space-3);border:0;border-radius:var(--radius-sm);background:none;text-align:start}
.menu-list button:hover{background:var(--c-hover)}

/* the action button (<Button>) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--ui-control-h);padding:0 var(--space-3);border:1px solid var(--c-border);border-radius:var(--radius-md);background:linear-gradient(to bottom,var(--c-card),var(--c-surface-active));box-shadow:var(--shadow-sm);color:var(--c-t1);font-size:var(--ui-text-body);font-weight:600;white-space:nowrap;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.btn:hover:not(:disabled){background:var(--c-surface-hover)}
.btn svg{width:16px;height:16px}
.btn.primary{border-color:transparent;background:var(--btn-primary-bg);box-shadow:none;color:var(--btn-primary-text)}
.btn.primary:hover:not(:disabled){background:var(--btn-primary-bg-hover)}
.btn.ghost{border-color:transparent;background:transparent;box-shadow:none;color:var(--c-t2)}
.btn.ghost:hover:not(:disabled){background:var(--c-surface-hover);color:var(--c-t1)}
.btn.danger{border-color:var(--c-danger);background:transparent;box-shadow:none;color:var(--c-danger-text)}
.btn.danger:hover:not(:disabled){background:var(--c-tint-red)}
.btn.sm{min-height:var(--ui-control-h-compact);padding:0 var(--space-2)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.icon-btn{width:var(--ui-control-h);height:var(--ui-control-h);display:grid;place-items:center;border-radius:var(--radius-md);border:1px solid transparent;background:none;color:var(--c-t3)}
.icon-btn:hover{border-color:var(--c-border);background:var(--c-surface);color:var(--c-t1)}
.icon-btn svg{width:18px;height:18px}

.main{display:grid;grid-template-columns:320px minmax(0,1fr);min-height:0}

/* queue rail: sidebar material, nav-item rows */
.queue{border-right:1px solid var(--c-border-subtle);background:var(--c-nav);display:flex;flex-direction:column;min-height:0}
.q-tools{padding:var(--space-3);display:grid;gap:var(--space-2)}
.q-row{display:flex;gap:var(--space-2)}
.q-row input{flex:1;min-width:0;min-height:var(--ui-control-h);border:1px solid var(--c-border);border-radius:var(--radius-md);background:var(--c-card);padding:0 var(--space-2)}
.q-row input::placeholder{color:var(--c-t3)}
.q-list{overflow:auto;flex:1;padding:0 var(--space-2) var(--space-4);display:grid;gap:var(--space-1);align-content:start}
.q-group{margin:var(--space-3) 0 var(--space-1);padding:0 var(--space-3);color:var(--c-t3);font-size:var(--ui-text-meta);font-weight:500}
.q-item{display:grid;grid-template-columns:48px minmax(0,1fr);gap:var(--space-3);width:100%;text-align:start;padding:var(--space-2) var(--space-3);border-radius:var(--radius-lg);border:1px solid transparent;background:none;align-items:start;color:var(--c-t2);transition:background var(--dur-instant) var(--ease)}
.q-item:hover{background:var(--c-hover);color:var(--c-t1)}
.q-item[aria-current="true"]{background:var(--nav-selected-bg);border-color:var(--c-border);box-shadow:var(--shadow-sm);color:var(--c-t1)}
.q-thumb{width:48px;height:48px;border-radius:var(--radius-md);overflow:hidden;background:var(--c-card);position:relative;display:grid;place-items:center;border:1px solid var(--c-border-subtle);color:var(--c-t3)}
.q-thumb img,.q-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.q-thumb svg{width:20px;height:20px}
.q-thumb .pdot{position:absolute;inset-inline-start:3px;bottom:3px;box-shadow:0 0 0 2px var(--c-card)}
.q-body{min-width:0;display:grid;gap:2px}
.q-line1{display:flex;align-items:center;gap:var(--space-1-5);font-size:var(--ui-text-meta);color:var(--c-t3);min-width:0}
.q-line1 b{color:var(--c-t1);font-weight:600;font-size:var(--ui-text-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.q-cap{display:block;font-size:var(--ui-text-meta);line-height:18px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left;color:var(--c-t2)}
.q-meta{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;font-size:var(--ui-text-meta);color:var(--c-t3);margin-top:2px;font-variant-numeric:tabular-nums}
.q-meta svg{width:13px;height:13px;vertical-align:-2px}

/* empty state contract: title, body, hint */
.empty{padding:var(--space-8) var(--space-4);text-align:center;display:grid;gap:var(--space-1)}
.empty b{color:var(--c-t1);font-weight:600}
.empty span{color:var(--c-t3)}
.empty small{color:var(--c-t3);font-size:var(--ui-text-meta)}

.pdot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
.pdot.instagram{background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf)}
.pdot.facebook{background:#1877f2}.pdot.x{background:var(--c-x)}.pdot.linkedin{background:#0a66c2}.pdot.tiktok{background:linear-gradient(135deg,#25f4ee,#000 50%,#fe2c55)}

/* badge (ui-badge, dot) */
.pill{display:inline-flex;align-items:center;gap:var(--space-1-5);min-height:22px;padding:0 var(--space-2);border-radius:var(--radius-sm);background:var(--c-surface-active);color:var(--c-t2);font-size:var(--ui-text-meta);font-weight:600;line-height:var(--ui-leading-tight);white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:var(--radius-full);background:currentColor}
.pill.review{background:var(--c-tint-blue);color:var(--c-t1)}
.pill.review::before{background:var(--c-accent)}
.pill.approved{background:var(--c-tint-green);color:var(--c-success-text)}
.pill.changes{background:var(--c-tint-amber);color:var(--c-warn-text)}
.pill.plain::before{display:none}

/* segmented control (ui-pill-group): one recessed track, selected lifted */
.seg,.toggle,.plat-pick,.tag-pick{display:inline-flex;flex-wrap:wrap;gap:var(--space-0-5);padding:var(--space-0-5);border-radius:var(--radius-md);background:var(--control-track);max-width:100%}
.seg{display:flex}
.seg button,.toggle button,.plat-pick button,.tag-pick button{display:inline-flex;align-items:center;gap:var(--space-1-5);min-height:var(--ui-control-h-compact);padding:0 var(--space-2);border:1px solid transparent;border-radius:calc(var(--radius-md) - 2px);background:transparent;color:var(--c-t2);font-size:var(--ui-text-body);font-weight:500;white-space:nowrap;transition:background var(--dur-instant) var(--ease),color var(--dur-instant) var(--ease)}
.seg button{flex:1;justify-content:center;font-size:var(--ui-text-meta);padding:0 var(--space-1-5)}
.seg button b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--c-t3)}
.seg button:hover,.toggle button:hover,.plat-pick button:hover,.tag-pick button:hover{background:var(--c-surface-hover);color:var(--c-t1)}
.seg button[aria-pressed="true"],.toggle button[aria-pressed="true"],.plat-pick button[aria-pressed="true"],.tag-pick button[aria-pressed="true"]{background:var(--c-card);color:var(--c-t1);box-shadow:var(--shadow-sm)}
.seg button[aria-pressed="true"] b{color:var(--c-t1)}
.tag-pick button{font-size:var(--ui-text-meta);min-height:24px}

/* dropdown (menu button + popover) */
.dd{position:relative}
.dd-btn{display:inline-flex;align-items:center;gap:var(--space-1-5);min-height:var(--ui-control-h);padding:0 var(--space-2);border:1px solid var(--c-border);border-radius:var(--radius-md);background:var(--c-card);color:var(--c-t1);font-weight:500;white-space:nowrap}
.dd-btn:hover{border-color:var(--c-border-strong)}
.dd-btn svg{width:14px;height:14px;color:var(--c-t3)}
.dd-menu{position:absolute;top:calc(100% + 4px);inset-inline-end:0;z-index:var(--z-popover);min-width:180px;padding:var(--space-1);border:1px solid var(--c-border);border-radius:var(--radius-lg);background:var(--c-card);box-shadow:var(--shadow-md);display:grid;gap:1px}
.dd-menu button{display:flex;align-items:center;gap:var(--space-2);min-height:var(--ui-control-h);padding:0 var(--space-2);border:0;border-radius:var(--radius-sm);background:none;text-align:start;color:var(--c-t1)}
.dd-menu button:hover,.dd-menu button:focus-visible{background:var(--c-hover)}
.dd-menu button[aria-checked="true"]{font-weight:600}
.dd-menu button .chk{margin-inline-start:auto;width:14px;height:14px;color:var(--c-accent)}

/* detail */
.detail{display:grid;grid-template-columns:minmax(0,1fr) 440px;min-height:0;overflow:hidden}
.stage-col{display:flex;flex-direction:column;min-height:0;overflow:auto;background:var(--feed,var(--c-surface));transition:background var(--dur-fast) var(--ease)}
.stage-col[data-platform="instagram"]{--feed:#fafafa}.stage-col[data-platform="facebook"]{--feed:#f0f2f5}.stage-col[data-platform="x"]{--feed:#f7f9f9}.stage-col[data-platform="linkedin"]{--feed:#f4f2ee}.stage-col[data-platform="tiktok"]{--feed:#e9e9ea}
.stage-col.dark[data-platform="instagram"],.stage-col.dark[data-platform="x"],.stage-col.dark[data-platform="linkedin"]{--feed:#000}.stage-col.dark[data-platform="facebook"]{--feed:#18191a}.stage-col.dark[data-platform="tiktok"]{--feed:#121212}
.stage-bar{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);min-height:48px;background:var(--c-bg);border-bottom:1px solid var(--c-border-subtle);position:sticky;top:0;z-index:var(--z-sticky);flex-wrap:wrap}
.stage-bar .lbl{font-weight:600;display:flex;align-items:center;gap:var(--space-2)}
.stage-bar .spacer{flex:1}
.back{display:none}
.stage{flex:1;display:flex;justify-content:center;align-items:flex-start;padding:var(--space-4) var(--space-4) var(--space-6)}
.stage-note{margin:0;padding:0 var(--space-4) var(--space-5);text-align:center;font-size:var(--ui-text-meta);color:#6B7078}
.stage-col.dark .stage-note{color:#9a9a9a}
.ex-tag{display:inline-flex;align-items:center;min-height:22px;font-size:var(--ui-text-meta);font-weight:600;background:var(--c-tint-amber);color:var(--c-warn-text);padding:0 var(--space-2);border-radius:var(--radius-sm)}

.panel{border-left:1px solid var(--c-border-subtle);background:var(--c-bg);overflow:auto;min-height:0}
.p-sec{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--c-border-subtle);display:grid;gap:var(--space-3)}
.p-sec h3{font-size:var(--ui-text-section);line-height:24px;color:var(--c-t1);display:flex;align-items:center;gap:var(--space-2)}
.p-sec h3 .count{font-family:var(--ui-font-sans);font-size:var(--ui-text-meta);font-weight:500;color:var(--c-t3);font-variant-numeric:tabular-nums}
.p-title{font-size:var(--ui-text-subheading);line-height:26px;display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.p-title .handle{font-family:var(--ui-font-sans);font-size:var(--ui-text-meta);font-weight:400;color:var(--c-t3)}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-1) var(--space-3);margin:0;font-size:var(--ui-text-body)}
.kv dt{color:var(--c-t3);font-weight:500}.kv dd{margin:0;min-width:0;font-variant-numeric:tabular-nums}
.notes{background:var(--c-surface);border:1px solid var(--c-border-subtle);border-radius:var(--radius-lg);padding:var(--space-3);white-space:pre-wrap;overflow-wrap:anywhere;line-height:var(--ui-leading-body)}
.notes:lang(ar),.notes[dir="rtl"]{line-height:var(--ui-leading-body-ar)}
.notes b{display:block;font-size:var(--ui-text-meta);color:var(--c-t3);font-weight:500;margin-bottom:var(--space-1)}
.sum{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;font-size:var(--ui-text-meta);color:var(--c-t3);font-variant-numeric:tabular-nums}
.vote-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}
.vote{min-height:var(--ui-control-h-large);border-radius:var(--radius-md);border:1px solid var(--c-border);background:linear-gradient(to bottom,var(--c-card),var(--c-surface-active));box-shadow:var(--shadow-sm);font-weight:600;display:flex;align-items:center;justify-content:center;gap:var(--space-2);color:var(--c-t1)}
.vote:hover{background:var(--c-surface-hover)}
.vote svg{width:16px;height:16px}
.vote.approve[aria-pressed="true"]{background:var(--c-tint-green);border-color:var(--c-success);color:var(--c-success-text);box-shadow:none}
.vote.changes[aria-pressed="true"]{background:var(--c-tint-amber);border-color:var(--c-warn);color:var(--c-warn-text);box-shadow:none}
.stars{display:flex;align-items:center;gap:var(--space-0-5)}
.stars button{border:0;background:none;padding:2px;color:var(--c-border-strong);line-height:0;border-radius:var(--radius-xs)}
.stars button svg{width:20px;height:20px}
.stars button.on{color:#F79009}
.stars span{margin-inline-start:var(--space-2);font-size:var(--ui-text-meta);color:var(--c-t3)}
.voters{display:grid;gap:var(--space-1-5)}
.voter{display:flex;align-items:center;gap:var(--space-2)}
.voter img{width:22px;height:22px;border-radius:50%}
.voter .v-v{margin-inline-start:auto;font-size:var(--ui-text-meta);display:flex;gap:var(--space-1-5);align-items:center;color:var(--c-t3);font-variant-numeric:tabular-nums}
.voter.old{opacity:.55}
.checks{display:grid;gap:var(--space-1-5);margin:0;padding:0;list-style:none}
.checks li{display:flex;gap:var(--space-2);align-items:flex-start;color:var(--c-t2)}
.checks svg{width:16px;height:16px;flex:none;margin-top:3px}
.checks .ok svg{color:var(--c-success)} .checks .warn svg{color:var(--c-warn)} .checks .bad svg{color:var(--c-danger)}
.checks .bad{color:var(--c-danger-text)}

.thread{display:grid;gap:var(--space-4)}
.cmt{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--space-2)}
.cmt img.av{width:28px;height:28px;border-radius:50%}
.cmt-head{display:flex;align-items:center;gap:var(--space-1-5);flex-wrap:wrap;font-size:var(--ui-text-meta);color:var(--c-t3)}
.cmt-head b{color:var(--c-t1);font-weight:600;font-size:var(--ui-text-body)}
.cmt-text{white-space:pre-wrap;overflow-wrap:anywhere;margin-top:2px;line-height:var(--ui-leading-body)}
.cmt-text[dir="rtl"]{line-height:var(--ui-leading-body-ar)}
.cmt-tag{display:inline-flex;align-items:center;min-height:20px;font-size:var(--ui-text-meta);padding:0 var(--space-1-5);border-radius:var(--radius-sm);background:var(--c-tint-blue);color:var(--c-t1);font-weight:600}
.cmt-acts{display:flex;gap:var(--space-1);margin-top:var(--space-1);margin-inline-start:calc(-1 * var(--space-2))}
.cmt.resolved .cmt-text{color:var(--c-t3)}
.composer{display:grid;gap:var(--space-2);background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:var(--space-2) var(--space-3);box-shadow:var(--shadow-sm)}
.composer:focus-within{border-color:var(--c-accent)}
.composer textarea{border:0;background:none;resize:vertical;min-height:64px;outline:none;box-shadow:none;line-height:var(--ui-leading-body)}
.composer textarea::placeholder{color:var(--c-t3)}
.composer .row{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.composer .row .btn{margin-inline-start:auto}
.muted{color:var(--c-t3)}
.small{font-size:var(--ui-text-meta)}
.acts{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center}

.intro ol{margin:0;padding-inline-start:18px;display:grid;gap:var(--space-2);color:var(--c-t2)}
.intro ol b{color:var(--c-t1);font-weight:600}

/* publishing calendar */
.calendar{grid-column:2;grid-row:1;min-height:0;overflow:auto;background:var(--c-bg);padding:var(--space-5) var(--space-6) var(--space-8)}
.main[data-mode="calendar"] .detail{display:none}
.cal-head{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-4)}
.cal-head h2{font-size:var(--ui-text-subheading);line-height:26px;min-width:150px}
.cal-head .acts{gap:var(--space-1)}
.cal-legend{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center;margin-inline-start:auto}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--c-border-subtle);border:1px solid var(--c-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.cal-dow{background:var(--c-surface);padding:var(--space-1-5) var(--space-2);font-size:var(--ui-text-meta);font-weight:500;color:var(--c-t3)}
.cal-day{background:var(--c-card);min-height:116px;padding:var(--space-1-5);display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
.cal-day.out{background:var(--c-surface)}
.cal-top{display:flex;align-items:center;justify-content:space-between;min-height:28px}
.cal-num{width:26px;height:26px;display:grid;place-items:center;border-radius:var(--radius-full);font-size:var(--ui-text-meta);font-weight:600;color:var(--c-t2);font-variant-numeric:tabular-nums}
.cal-day.out .cal-num{color:var(--c-t3);font-weight:500}
.cal-day.today .cal-num{background:var(--color-brand);color:#fff}
.cal-add{width:26px;height:26px;opacity:0;transition:opacity var(--dur-instant) var(--ease)}
.cal-add svg{width:14px;height:14px}
.cal-day:hover .cal-add,.cal-add:focus-visible{opacity:1}
.cal-chip{display:flex;align-items:center;gap:var(--space-1-5);width:100%;min-height:26px;padding:0 var(--space-1-5);border:1px solid transparent;border-radius:var(--radius-sm);background:var(--c-tint-blue);color:var(--c-t1);font-size:var(--ui-text-meta);text-align:start;white-space:nowrap;overflow:hidden}
.cal-chip.approved{background:var(--c-tint-green);color:var(--c-success-text)}
.cal-chip.changes{background:var(--c-tint-amber);color:var(--c-warn-text)}
.cal-chip:hover{border-color:var(--c-border-strong)}
.cal-chip time{font-weight:600;font-variant-numeric:tabular-nums;flex:none}
.cal-chip .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:left}
.cal-chip .oc{display:inline-flex;align-items:center;gap:2px;flex:none;font-variant-numeric:tabular-nums}
.cal-chip .oc svg{width:12px;height:12px}
.cal-agenda{display:none}
.cal-aday{display:grid;gap:var(--space-1-5)}
.cal-adate{font-size:var(--ui-text-meta);font-weight:600;color:var(--c-t2)}
.cal-adate.today{color:var(--c-accent)}
.cal-agenda .cal-chip{min-height:36px}
.cal-uns{margin-top:var(--space-6);display:grid;gap:var(--space-2)}
.cal-uns h3{font-size:var(--ui-text-section);line-height:24px}
.cal-uns-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-1-5)}

/* dialog (ui-dialog, wide) */
.modal{position:fixed;inset:0;z-index:var(--z-modal);background:var(--overlay);backdrop-filter:blur(3px);display:grid;place-items:center;padding:max(12px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
.sheet{background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:min(1120px,100%);max-height:min(92vh,100%);display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden}
.sheet-head{display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-5) var(--space-5) var(--space-4);border-bottom:1px solid var(--c-border)}
.sheet-head>div{display:grid;gap:var(--space-1);min-width:0}
.sheet-head h2{font-size:var(--ui-text-subheading);line-height:26px}
.sheet-head p{margin:0;color:var(--c-t3);font-size:var(--ui-text-meta)}
.sheet-foot{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;padding:var(--space-4) var(--space-5);border-top:1px solid var(--c-border);background:var(--c-surface)}
.sheet-head .spacer,.sheet-foot .spacer{flex:1}
.sheet-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);min-height:0}
.form{overflow:auto;padding:var(--space-5);display:grid;gap:var(--space-4);align-content:start}
.field{display:grid;gap:var(--space-1-5)}
.field>label,.field>.lbl{font-weight:500;color:var(--c-t2)}
.field input[type=text],.field input[type=datetime-local],.field textarea{border:1px solid var(--c-border);border-radius:var(--radius-md);background:var(--c-card);padding:var(--space-1-5) var(--space-2);min-height:var(--ui-control-h);min-width:0;width:100%}
.field input:hover,.field textarea:hover{border-color:var(--c-border-strong)}
.field input:focus-visible,.field textarea:focus-visible{border-color:var(--c-accent)}
.field textarea{min-height:150px;resize:vertical;font-family:var(--f-post);font-size:15px;line-height:1.45}
.field .hint{font-size:var(--ui-text-meta);color:var(--c-t3);display:flex;justify-content:space-between;gap:var(--space-2);font-variant-numeric:tabular-nums}
.field .hint .over{color:var(--c-danger-text);font-weight:600}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.drop{border:1px dashed var(--c-border-strong);border-radius:var(--radius-lg);padding:var(--space-3);display:grid;gap:var(--space-3);justify-items:start;background:var(--c-surface)}
.drop.over{border-color:var(--c-accent);background:var(--c-accent-soft)}
.thumbs{display:flex;gap:var(--space-2);flex-wrap:wrap}
.thumbs:empty{display:none}
.thumb{position:relative;width:76px;height:76px;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--c-border);background:var(--c-card)}
.thumb img,.thumb video{width:100%;height:100%;object-fit:cover;display:block}
.thumb .t-acts{position:absolute;inset:auto 0 0 0;display:flex;justify-content:space-between;background:rgb(0 0 0 / .55)}
.thumb .t-acts button{border:0;background:none;color:#fff;width:24px;height:22px;display:grid;place-items:center;padding:0}
.thumb .t-acts button:disabled{opacity:.35}
.thumb .t-acts svg{width:13px;height:13px}
.thumb .t-n{position:absolute;top:3px;inset-inline-start:3px;background:rgb(0 0 0 / .6);color:#fff;font-size:var(--ui-text-meta);line-height:16px;border-radius:var(--radius-xs);padding:0 5px;font-variant-numeric:tabular-nums}
.av-pick{display:flex;align-items:center;gap:var(--space-2)}
.preview-col{background:var(--feed,var(--c-surface));overflow:auto;border-left:1px solid var(--c-border-subtle);display:flex;flex-direction:column}
.preview-col .stage{padding:var(--space-5) var(--space-3)}
.err{color:var(--c-danger-text);font-size:var(--ui-text-meta)}
.err:empty{display:none}

.toast{position:fixed;left:50%;bottom:max(20px,calc(env(safe-area-inset-bottom,0px) + 12px));transform:translateX(-50%);background:var(--c-t1);color:var(--c-bg);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);z-index:var(--z-toast);box-shadow:var(--shadow-md);max-width:calc(100% - 32px)}
/* ======== platform mocks ======== */
.mock{--m-bg:#fff;--m-fg:#0f1419;--m-muted:#65676b;--m-line:#e4e6eb;--m-link:#00376b;--m-btn:#f0f2f5;
  font-family:var(--f-post);background:var(--m-bg);color:var(--m-fg);width:100%;max-width:470px;font-size:14px;line-height:1.35;text-align:start;overflow:hidden}
.mock *{box-sizing:border-box}
.mock .tok{color:var(--m-link)}
.mock .ico{display:inline-grid;place-items:center;line-height:0}
.mock .ico svg{width:24px;height:24px}
.mock .clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines,2);overflow:hidden}
.mock .more{border:0;background:none;padding:0;color:var(--m-muted);font:inherit;cursor:pointer}
.mock .av{border-radius:50%;object-fit:cover;flex:none;display:block}
.mock .av.sq{border-radius:4px}
.mock .av-ph{display:grid;place-items:center;background:#155EEF;color:#fff;font-weight:700;letter-spacing:.02em}
.mock .cap{white-space:pre-wrap;overflow-wrap:anywhere}
.ph-media{width:100%;height:100%;display:grid;place-items:center;background:repeating-linear-gradient(135deg,#E6E6E8 0 14px,#F0F1F3 14px 28px);color:#50545B;font-size:13px;font-weight:500}
.ph-media span{background:rgb(255 255 255 / .8);padding:4px 10px;border-radius:6px}
.car{position:relative;width:100%;overflow:hidden;background:#000}
.car-track{display:flex;width:100%;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.car-track::-webkit-scrollbar{display:none}
.car-slide{flex:0 0 100%;height:100%;scroll-snap-align:start;display:grid}
.car-slide img,.car-slide video{width:100%;height:100%;object-fit:cover;display:block}
.car-nav{position:absolute;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;border:0;background:rgb(255 255 255 / .85);color:#111;display:grid;place-items:center;padding:0;box-shadow:0 1px 4px rgb(0 0 0 / .25)}
.car-nav svg{width:15px;height:15px}
.car-nav.prev{left:8px}.car-nav.next{right:8px}
.car-count{position:absolute;top:12px;right:12px;background:rgb(18 18 18 / .7);color:#fff;font-size:12px;padding:3px 8px;border-radius:12px}
.car-dots{display:flex;gap:4px;justify-content:center;align-items:center}
.car-dots i{width:6px;height:6px;border-radius:50%;background:#c4c4c4}
.car-dots i.on{background:#0095f6}
.mg{display:grid;gap:2px;width:100%;overflow:hidden;background:var(--m-bg)}
.mg-cell{position:relative;overflow:hidden;min-height:0;display:grid;background:#000}
.mg-cell img,.mg-cell video{width:100%;height:100%;object-fit:cover;display:block}
.mg-2{grid-template-columns:1fr 1fr}
.mg-3{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.mg-3 .mg-cell:first-child{grid-row:span 2}
.mg-4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.mg-more{position:absolute;inset:0;display:grid;place-items:center;background:rgb(0 0 0 / .45);color:#fff;font-size:26px;font-weight:600}

/* Instagram */
.ig{border:1px solid #dbdbdb;border-radius:8px;--m-link:#00376b}
.ig-head{display:flex;align-items:center;gap:10px;padding:10px 12px}
.ig-ring{padding:2px;border-radius:50%;background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5);display:inline-flex}
.ig-ring .av{border:2px solid var(--m-bg)}
.ig-name{flex:1;min-width:0;font-size:14px;font-weight:600;line-height:1.2}
.ig-name small{display:block;font-weight:400;font-size:12px;color:var(--m-fg)}
.ig-actions{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:6px 12px 2px}
.ig-actions .l{display:flex;gap:14px}.ig-actions .r{justify-self:end}
.ig-likes{padding:4px 12px 0;font-weight:600}
.ig-cap{padding:4px 12px 0}
.ig .more{padding:0 12px}
.ig-time{padding:6px 12px 12px;color:var(--m-muted);font-size:12px}
.no-media{aspect-ratio:1;display:grid;place-items:center;background:#f2f2f2;color:#8e8e8e;font-size:13px;padding:20px;text-align:center}

/* Facebook */
.fb{border-radius:8px;box-shadow:0 1px 2px rgb(0 0 0 / .2);--m-link:#0064d1;--m-muted:#65676b}
.fb-head{display:flex;gap:10px;align-items:center;padding:12px 16px 0}
.fb-name{font-weight:600;font-size:15px}
.fb-sub{font-size:13px;color:var(--m-muted);display:flex;align-items:center;gap:4px}
.fb-sub svg{width:12px;height:12px}
.fb-head .grow{flex:1;min-width:0}
.fb-head .ico svg{width:20px;height:20px;color:var(--m-muted)}
.fb-text{padding:10px 16px 12px;font-size:15px}
.fb-text.big{font-size:24px;line-height:1.25;padding-block:14px 20px}
.fb .more{color:var(--m-fg);font-weight:600;padding:0 16px 10px;margin-top:-8px;display:block}
.fb-counts{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;color:var(--m-muted);font-size:14px}
.fb-reacts{display:flex;align-items:center;gap:6px}
.rx{display:inline-flex}.rx i{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--m-bg);margin-inline-end:-5px}
.rx i svg{width:10px;height:10px;color:#fff}
.rx .like{background:#1877f2}.rx .love{background:#f33e58}.rx .care{background:#f7b125}
.fb-btns{display:grid;grid-template-columns:repeat(3,1fr);margin:0 12px;border-top:1px solid var(--m-line);padding:4px 0}
.fb-btns span,.li-btns span{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 0;color:var(--m-muted);font-weight:600;font-size:14px}
.fb-btns svg,.li-btns svg{width:20px;height:20px}

/* X */
.xm{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;padding:12px 16px;border:1px solid #eff3f4;--m-link:#1d9bf0;--m-muted:#536471;font-size:15px}
.x-head{display:flex;align-items:center;gap:4px;min-width:0}
.x-head b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x-head .x-m{color:var(--m-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.x-head .ico svg{width:18px;height:18px;color:var(--m-muted)}
.x-text{margin-top:2px}
.x-media{margin-top:12px;border-radius:16px;overflow:hidden;border:1px solid #cfd9de}
.x-actions{display:flex;justify-content:space-between;margin-top:12px;color:var(--m-muted);font-size:13px;max-width:425px}
.x-actions span{display:flex;align-items:center;gap:4px}
.x-actions svg{width:18px;height:18px}

/* LinkedIn */
.li{border-radius:8px;box-shadow:0 0 0 1px rgb(140 140 140 / .2);--m-link:#0a66c2;--m-muted:rgb(0 0 0 / .6)}
.li-head{display:flex;gap:8px;padding:12px 16px 0;align-items:flex-start}
.li-head .grow{flex:1;min-width:0;line-height:1.3}
.li-name{font-weight:600;font-size:14px}
.li-sub{font-size:12px;color:var(--m-muted);display:flex;align-items:center;gap:4px}
.li-sub svg{width:12px;height:12px}
.li-follow{color:#0a66c2;font-weight:600;font-size:15px;white-space:nowrap;display:flex;align-items:center;gap:2px}
.li-follow svg{width:18px;height:18px}
.li-text{padding:8px 16px 8px;font-size:14px}
.li .more{padding:0 16px 8px;display:block;margin-inline-start:auto;color:var(--m-muted)}
.li-counts{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;color:var(--m-muted);font-size:12px}
.li-btns{display:grid;grid-template-columns:repeat(4,1fr);margin:0 8px;border-top:1px solid var(--m-line);padding:2px 0}
.li-btns span{font-size:13px;flex-direction:row}

/* TikTok */
.tt{position:relative;max-width:340px;aspect-ratio:9/16;background:#000;color:#fff;border-radius:14px;--m-link:#fff}
.tt .tok{font-weight:600}
.tt-media{position:absolute;inset:0}
.tt-media .car{height:100%;background:#000}
.tt-media .no-media{height:100%;aspect-ratio:auto;background:#161616;color:#aaa}
.tt-shade{position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(transparent,rgb(0 0 0 / .65));pointer-events:none}
.tt-top{position:absolute;top:14px;left:0;right:0;display:flex;justify-content:center;gap:16px;font-size:15px;color:rgb(255 255 255 / .7);pointer-events:none;text-shadow:0 1px 2px rgb(0 0 0 / .4)}
.tt-top b{color:#fff;border-bottom:2px solid #fff;padding-bottom:3px}
.tt-rail{position:absolute;right:8px;bottom:84px;display:grid;gap:14px;justify-items:center;font-size:12px;font-weight:600;text-shadow:0 1px 2px rgb(0 0 0 / .4)}
.tt-rail span{display:grid;justify-items:center;gap:2px}
.tt-rail svg{width:30px;height:30px;filter:drop-shadow(0 1px 2px rgb(0 0 0 / .35))}
.tt-av{position:relative;margin-bottom:8px}
.tt-av .av{border:1.5px solid #fff}
.tt-av i{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:18px;height:18px;border-radius:50%;background:#fe2c55;display:grid;place-items:center}
.tt-av i svg{width:11px;height:11px}
.tt-disc{width:32px;height:32px;border-radius:50%;background:radial-gradient(circle,#555 0 30%,#1a1a1a 31%);border:6px solid #2b2b2b;animation:spin 5s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.tt-info{position:absolute;left:12px;right:64px;bottom:14px;display:grid;gap:5px;font-size:14px;text-shadow:0 1px 2px rgb(0 0 0 / .45)}
.tt-info .more{color:#fff;font-weight:600;justify-self:start}
.tt-sound{display:flex;gap:6px;align-items:center;font-size:13px;overflow:hidden;white-space:nowrap}
.tt-sound svg{width:14px;height:14px;flex:none}
.tt .car-dots{position:absolute;bottom:6px;left:0;right:0}
.tt .car-dots i{background:rgb(255 255 255 / .45)}.tt .car-dots i.on{background:#fff}

/* mock dark mode (app appearance, independent of page theme) */
.mock.dark{--m-bg:#000;--m-fg:#f5f5f5;--m-muted:#a8a8a8;--m-line:#262626;--m-btn:#262626}
.mock.dark.ig{border-color:#262626;--m-link:#e0f1ff}
.mock.dark.fb{--m-bg:#242526;--m-fg:#e4e6eb;--m-muted:#b0b3b8;--m-line:#3e4042;--m-link:#4599ff}
.mock.dark.xm{border-color:#2f3336;--m-muted:#71767b;--m-fg:#e7e9ea}
.mock.dark .x-media{border-color:#2f3336}
.mock.dark.li{--m-bg:#1b1f23;--m-fg:rgb(255 255 255 / .9);--m-muted:rgb(255 255 255 / .6);--m-line:#38434f;--m-link:#71b7fb}
.mock.dark .li-follow{color:#71b7fb}
.mock.dark .no-media{background:#121212;color:#777}

@media (max-width:1180px){
  .detail{grid-template-columns:minmax(0,1fr);grid-auto-rows:max-content;align-content:start;overflow:auto}
  .stage-col{overflow:visible;min-height:auto}
  .panel{border-left:0;border-top:1px solid var(--c-border-subtle);overflow:visible}
  .sheet-body{grid-template-columns:minmax(0,1fr);grid-auto-rows:max-content;overflow:auto}
  .form{overflow:visible}
  .preview-col{border-left:0;border-top:1px solid var(--c-border-subtle);overflow:visible}
}
@media (max-width:800px){
  :root{--ui-text-page:24px}
  .brand h1{line-height:32px}
  .top{padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px));padding-block:var(--space-4) var(--space-3)}
  .main{grid-template-columns:minmax(0,1fr)}
  .main[data-view="list"] .detail{display:none}
  .main[data-view="detail"] .queue{display:none}
  .queue{border-right:0}
  .back{display:inline-grid}
  .brand p{display:none}
  .two{grid-template-columns:1fr}
  .p-sec{padding-inline:var(--space-4)}
  .main[data-mode="calendar"] .queue{display:none}
  .calendar{grid-column:1;padding:var(--space-4)}
  .cal-grid{display:none}
  .cal-agenda{display:grid;gap:var(--space-4)}
  .page-actions{width:100%}
  .page-actions .btn{margin-inline-start:auto}
}
@media (pointer:coarse){ .btn,.dd-btn,.q-row input{min-height:44px} }
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important} }

/* ======== local app additions ======== */
/* review panel: the conversation sits at the top so it is the first thing a reviewer sees */
.r-head{padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--c-border-subtle);display:grid;gap:var(--space-2);background:var(--c-bg);position:sticky;top:0;z-index:2}
.r-head .row1{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.r-head .acct{font-family:var(--ui-font-display);font-weight:700;font-size:var(--ui-text-section);line-height:24px}
.r-head .row2{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;color:var(--c-t3);font-size:var(--ui-text-meta);font-variant-numeric:tabular-nums}
.r-verdict{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.r-verdict .vote{min-height:var(--ui-control-h);padding:0 var(--space-3);flex:1 1 130px;white-space:nowrap}
.r-verdict .stars{margin-inline-start:auto}
.conv{padding:var(--space-4) var(--space-5);display:grid;gap:var(--space-3);border-bottom:1px solid var(--c-border-subtle)}
.conv .composer textarea{min-height:76px}
.conv-h{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
.conv-h h3{font-size:var(--ui-text-section);line-height:24px}
.seg-mini{display:inline-flex;gap:var(--space-0-5);padding:var(--space-0-5);border-radius:var(--radius-md);background:var(--control-track)}
.seg-mini button{min-height:24px;padding:0 var(--space-2);border:0;border-radius:calc(var(--radius-md) - 2px);background:none;font-size:var(--ui-text-meta);font-weight:500;color:var(--c-t2)}
.seg-mini button[aria-pressed="true"]{background:var(--c-card);color:var(--c-t1);box-shadow:var(--shadow-sm)}

/* media files with download */
.files{display:grid;gap:var(--space-1-5)}
.file{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:var(--space-3);align-items:center;padding:var(--space-1-5);border:1px solid var(--c-border-subtle);border-radius:var(--radius-md);background:var(--c-card)}
.file .th{width:44px;height:44px;border-radius:var(--radius-sm);overflow:hidden;background:var(--c-surface);display:grid;place-items:center}
.file .th img,.file .th video{width:100%;height:100%;object-fit:cover}
.file .nm{min-width:0;display:grid}
.file .nm b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file .nm small{color:var(--c-t3);font-size:var(--ui-text-meta);font-variant-numeric:tabular-nums}
a.btn{text-decoration:none}

/* notify-people picker */
.people{display:grid;gap:var(--space-1);max-height:220px;overflow:auto;padding:var(--space-1);border:1px solid var(--c-border);border-radius:var(--radius-md);background:var(--c-card)}
.person{display:flex;align-items:center;gap:var(--space-2);min-height:var(--ui-control-h);padding:0 var(--space-2);border-radius:var(--radius-sm);cursor:pointer}
.person:hover{background:var(--c-hover)}
.person input{width:16px;height:16px;margin:0;flex:none}
.person .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.person small{color:var(--c-t3);font-size:var(--ui-text-meta)}
.people-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
.people-empty{padding:var(--space-3);color:var(--c-t3);font-size:var(--ui-text-meta)}

/* team dialog */
.team{width:min(640px,100%)}
.team .sheet-body{grid-template-columns:minmax(0,1fr);overflow:auto}
.team-sec{padding:var(--space-4) var(--space-5);display:grid;gap:var(--space-3);border-bottom:1px solid var(--c-border-subtle)}
.team-sec h3{font-size:var(--ui-text-section);line-height:24px}
.invite-row{display:flex;gap:var(--space-2);flex-wrap:wrap}
.invite-row input{flex:1;min-width:200px;min-height:var(--ui-control-h);border:1px solid var(--c-border);border-radius:var(--radius-md);padding:0 var(--space-2);background:var(--c-card)}
.member{display:flex;align-items:center;gap:var(--space-3);min-height:44px}
.member .nm{flex:1;min-width:0;display:grid}
.member .nm b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.member .nm small{color:var(--c-t3);font-size:var(--ui-text-meta);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linkbox{display:flex;gap:var(--space-2);align-items:center;padding:var(--space-2);border:1px solid var(--c-border);border-radius:var(--radius-md);background:var(--c-surface)}
.linkbox code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--c-t2)}
.notice{padding:var(--space-2) var(--space-3);border:1px solid var(--c-border-subtle);border-radius:var(--radius-md);background:var(--c-surface);color:var(--c-t2);font-size:var(--ui-text-meta)}
.notice.ok{background:var(--c-tint-green);color:var(--c-success-text);border-color:transparent}

/* sign-in, setup, invitation */
.auth{min-height:100%;display:grid;place-items:center;padding:var(--space-6) max(16px,env(safe-area-inset-right,0px)) var(--space-6) max(16px,env(safe-area-inset-left,0px));background:var(--c-surface)}
.auth-card{width:min(400px,100%);background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--space-6);display:grid;gap:var(--space-4)}
.auth-card .brand{margin-bottom:var(--space-1)}
.auth-card h2{font-size:var(--ui-text-subheading);line-height:26px}
.auth-card p{margin:0;color:var(--c-t3)}
.auth-card form{display:grid;gap:var(--space-3)}
.auth-card .btn{width:100%;min-height:var(--ui-control-h-large)}
.field input[type=email],.field input[type=password]{border:1px solid var(--c-border);border-radius:var(--radius-md);background:var(--c-card);padding:var(--space-1-5) var(--space-2);min-height:var(--ui-control-h-large);width:100%}
.field input[readonly]{background:var(--c-surface);color:var(--c-t2)}
@media (max-width:800px){ .brand p{display:none} .r-head,.conv{padding-inline:var(--space-4)} .me-btn .nm{display:none} }
@media (max-width:560px){ #view-toggle{display:none} }
@media (max-width:800px){
  .top{gap:var(--space-2)}
  .brand{flex:1;min-width:0}
  .brand h1{overflow:hidden;text-overflow:ellipsis}
  .lbl-team,.lbl-new{display:none}
  .page-actions{gap:var(--space-1);flex:none}
  .page-actions .btn{padding:0 var(--space-2)}
}
/* Narrow screens stack the two columns: the review and comments come first, the preview after. */
@media (max-width:1180px){
  .detail .panel{order:-1;border-top:0;border-bottom:1px solid var(--c-border-subtle)}
  .r-head{position:static}
}

/* ======== Altibbi brand (brand.altibbi.app) ======== */
.brand-logo{width:32px;height:32px;flex:none;display:block}
.auth-brand{display:grid;gap:var(--space-2);justify-items:start;padding-bottom:var(--space-2)}
.auth-brand img{width:160px;height:auto;display:block}
.auth-brand p{margin:0;color:var(--c-t3);font-size:var(--ui-text-meta)}
.mock .av-mark{background:#fff;box-shadow:0 0 0 1px rgb(0 0 0 / .06)}
.linkish{border:0;background:none;padding:0;color:var(--c-accent);font:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.q-pillar{color:var(--c-t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.guide{width:min(760px,100%)}
.guide .sheet-head{align-items:center}
.guide .sheet-head img{flex:none}
.guide-kv{grid-template-columns:minmax(120px,max-content) minmax(0,1fr);gap:var(--space-2) var(--space-4)}
.guide-kv dt{color:var(--c-t1);font-weight:600}
.guide-kv dd{color:var(--c-t2)}
.guide-quote{margin:0;font-family:var(--ui-font-display);font-weight:700;font-size:var(--ui-text-section);line-height:24px;color:var(--color-brand)}
.guide-list{margin:0;padding-inline-start:20px;display:grid;gap:var(--space-1-5);color:var(--c-t2)}
@media (max-width:560px){ .guide-kv{grid-template-columns:1fr;gap:var(--space-0-5) 0} .guide-kv dd{margin-bottom:var(--space-2)} .guide .sheet-head img{display:none} }