/* SorKas Run calendar, same layout as the Tillr calendar, in the SorKas palette
   (navy #032C58, royal #155DA4, sky #72A4D7, ribbon red #D11B23) over the Run for a Cause poster. Trello-style board: white top bar, a coloured board background, grey lists, white cards with
   cover images and colour labels. Light by default; [data-theme="dark"] mirrors Trello's dark mode. */
:root{
  color-scheme:light;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Ubuntu,"Helvetica Neue",Roboto,sans-serif;
  --brand:"Montserrat",var(--font);
  --nav-bg:#FFFFFF; --nav-text:#44546F; --nav-border:#DCDFE4;
  --board:linear-gradient(180deg,rgba(3,44,88,.5) 0%,rgba(3,44,88,.68) 45%,rgba(3,30,62,.85) 100%),url(/brand/sorkas-poster.webp) center 14%/cover no-repeat,#032C58;
  --on-board:#FFFFFF; --board-panel:rgba(255,255,255,.18); --board-panel-hover:rgba(255,255,255,.3);
  --list:#F1F2F4; --card:#FFFFFF; --text:#172B4D; --subtle:#44546F; --faint:#626F86;
  --border:#DCDFE4; --input:#FFFFFF; --input-border:#8590A2;
  --card-shadow:0 1px 1px rgba(9,30,66,.25),0 0 1px rgba(9,30,66,.31);
  --raised:0 8px 12px rgba(9,30,66,.15),0 0 1px rgba(9,30,66,.31);
  --btn:rgba(9,30,66,.06); --btn-hover:rgba(9,30,66,.14); --btn-text:#172B4D;
  --primary:#155DA4; --primary-hover:#032C58; --primary-text:#FFFFFF;
  --danger:#C9372C; --success:#216E4E; --success-bg:#DCFFF1; --warn:#7F5F01; --warn-bg:#FFF7D6;
  --idea:#FFF7D6; --idea-border:#F5CD47; --open:rgba(255,255,255,.55);
  --modal:#FFFFFF; --overlay:rgba(9,30,66,.54); --drop:#E9F2FF;
  /* Facebook preview colours */
  --fb-bg:#FFFFFF; --fb-text:#050505; --fb-sub:#65676B; --fb-line:#CED0D4; --fb-tag:#216FDB; --fb-canvas:#F0F2F5;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --nav-bg:#1D2125; --nav-text:#B6C2CF; --nav-border:#2C333A;
  --board:linear-gradient(180deg,rgba(1,14,30,.8) 0%,rgba(1,14,30,.88) 45%,rgba(1,10,22,.95) 100%),url(/brand/sorkas-poster.webp) center 14%/cover no-repeat,#01101F;
  --on-board:#DEE4EA; --board-panel:rgba(0,0,0,.25); --board-panel-hover:rgba(0,0,0,.4);
  --list:#101204; --card:#22272B; --text:#B6C2CF; --subtle:#9FADBC; --faint:#8C9BAB;
  --border:#38414A; --input:#22272B; --input-border:#738496;
  --card-shadow:0 1px 1px rgba(1,4,4,.5),0 0 1px rgba(1,4,4,.5);
  --raised:0 8px 12px rgba(3,4,4,.36),0 0 1px rgba(3,4,4,.5);
  --btn:rgba(161,189,217,.08); --btn-hover:rgba(166,197,226,.16); --btn-text:#B6C2CF;
  --primary:#72A4D7; --primary-hover:#9CC1E6; --primary-text:#1D2125;
  --danger:#FD9891; --success:#7EE2B8; --success-bg:#164B35; --warn:#F8E6A0; --warn-bg:#533F04;
  --idea:#332E1B; --idea-border:#946F00; --open:rgba(0,0,0,.25);
  --modal:#323940; --overlay:rgba(0,0,0,.6); --drop:#1C2B41;
  --fb-bg:#242526; --fb-text:#E4E6EB; --fb-sub:#B0B3B8; --fb-line:#3E4042; --fb-tag:#4599FF; --fb-canvas:#18191A;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--board);background-attachment:fixed;color:var(--text);font:400 14px/1.43 var(--font);min-height:100vh}
button,input,textarea,select{font:inherit;color:inherit}
img,video{max-width:100%;display:block}
[hidden]{display:none!important}
.muted{color:var(--subtle)}
a{color:var(--primary)}

/* ---------------------------------------------------------------- top bar */
.top{position:sticky;top:0;z-index:30;background:var(--nav-bg);color:var(--nav-text);border-bottom:1px solid var(--nav-border);padding-top:env(safe-area-inset-top)}
.top-in{max-width:1600px;margin:0 auto;padding:8px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.logo{height:30px;width:auto}
.wordmark{font-family:var(--brand);font-weight:800;font-size:16px;letter-spacing:-.2px;color:var(--text);white-space:nowrap}
.wordmark{color:#032C58}
.wordmark b{font-weight:900;color:#D11B23}
:root[data-theme="dark"] .wordmark{color:#DEE4EA}
:root[data-theme="dark"] .wordmark b{color:#FF5A5F}
.app-name{font-weight:700;font-size:14px;color:var(--nav-text)}
.tabs{display:flex;gap:4px}
.tabs button{border:0;background:none;color:var(--nav-text);font-weight:600;font-size:14px;padding:6px 10px;border-radius:3px;cursor:pointer}
.tabs button:hover{background:var(--btn)}
.tabs button[aria-selected=true]{background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary)}
.spacer{flex:1}
.role{font-size:12px;font-weight:700;background:var(--btn);color:var(--btn-text);padding:4px 10px;border-radius:3px}
.icon-btn{position:relative;border:0;background:var(--btn);color:var(--nav-text);border-radius:3px;width:34px;height:34px;display:grid;place-items:center;cursor:pointer}
.icon-btn:hover{background:var(--btn-hover)}
.bell-n{position:absolute;top:-4px;right:-4px;background:#E2483D;color:#fff;font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 5px}
@media (max-width:640px){
  .app-name{display:none}
  .tabs{order:5;width:100%}
  .tabs button{flex:1}
}

.wrap{max-width:1600px;margin:0 auto;padding:14px 16px 80px}

/* ---------------------------------------------------------------- buttons */
.btn{border:0;border-radius:3px;padding:6px 12px;font-weight:600;font-size:14px;cursor:pointer;background:var(--primary);color:var(--primary-text);white-space:nowrap;line-height:20px}
.btn:hover{background:var(--primary-hover)}
.btn:disabled{opacity:.5;cursor:default;background:var(--primary)}
.btn.line{background:var(--btn);color:var(--btn-text)}
.btn.line:hover{background:var(--btn-hover)}
.btn.danger{background:transparent;color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger)}
.btn.sm{padding:4px 8px;font-size:13px}
/* buttons sitting on the coloured board */
.on-board .btn.line,.week-head .btn.line,.month-head .btn.line{background:var(--board-panel);color:var(--on-board)}
.on-board .btn.line:hover,.week-head .btn.line:hover,.month-head .btn.line:hover{background:var(--board-panel-hover)}

/* ---------------------------------------------------------------- notifications */
.notes{position:fixed;z-index:40;top:56px;right:12px;width:min(370px,calc(100vw - 24px));max-height:70vh;overflow:auto;background:var(--modal);color:var(--text);border-radius:8px;box-shadow:var(--raised);padding:8px}
.notes h3{margin:6px 8px 8px;font-size:14px;font-weight:600;color:var(--subtle);text-align:center}
.note{display:block;width:100%;text-align:left;border:0;background:none;padding:10px;border-radius:3px;cursor:pointer;color:var(--text)}
.note:hover{background:var(--btn)}
.note b{display:block;font-size:12px;font-weight:700;color:var(--primary)}
.note.reapproval b{color:var(--warn)}
.note small{color:var(--subtle)}
.note.unread{background:color-mix(in srgb,var(--primary) 10%,transparent)}

/* ---------------------------------------------------------------- board controls */
.owner-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:var(--board-panel);color:var(--on-board);border-radius:8px;padding:10px 12px;margin-bottom:12px;backdrop-filter:blur(6px)}
.owner-bar label{font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.owner-bar input{border:0;border-radius:3px;padding:5px 8px;background:var(--input);color:var(--text)}
.owner-bar .muted{color:var(--on-board);opacity:.85}
.legend{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-bottom:8px}
.legend-kinds,.legend-cats{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.lk{font-size:12px;font-weight:600;padding:3px 8px;border-radius:3px;color:var(--on-board);background:var(--board-panel)}
.lk-reel::before,.lk-idea::before,.lk-open::before{content:"";display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.lk-reel::before{background:var(--card);box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.lk-idea::before{background:var(--idea);box-shadow:inset 0 0 0 1px var(--idea-border)}
.lk-open::before{background:transparent;box-shadow:inset 0 0 0 1px var(--on-board)}

/* labels (Trello colours, dark text) */
.tag{display:inline-flex;align-items:center;min-height:20px;font-size:12px;font-weight:600;padding:0 8px;border-radius:3px;color:#172B4D;background:var(--c);line-height:20px;max-width:100%}
.tag.filter{border:0;cursor:pointer;font-family:inherit}
.tag.filter:hover{filter:brightness(1.06)}
.tag.filter.on{box-shadow:0 0 0 2px var(--on-board)}
.tag.filter.all{background:var(--board-panel);color:var(--on-board)}
.tag.filter.all.on{background:var(--card);color:var(--text)}

.months{position:sticky;top:51px;z-index:20;display:flex;gap:6px;overflow-x:auto;padding:8px 0;scrollbar-width:none}
.months a{flex:none;text-decoration:none;color:var(--on-board);font-weight:600;font-size:13px;padding:4px 10px;border-radius:3px;background:var(--board-panel);backdrop-filter:blur(6px)}
.months a:hover{background:var(--board-panel-hover)}
@media (max-width:640px){.months{top:92px}}

/* ---------------------------------------------------------------- months, weeks and day lists */
.month{margin-top:16px}
.month-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 8px;color:var(--on-board)}
.month-head h2{margin:0;font-size:20px;font-weight:700}
.week{margin:10px 0 18px}
.week-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:6px 10px;margin-bottom:8px;border-radius:8px;background:var(--board-panel);color:var(--on-board);backdrop-filter:blur(6px)}
.week-head h3{margin:0;font-size:16px;font-weight:700}
.week-head .dates{font-weight:500;opacity:.9;font-size:13px}
.status{font-size:12px;font-weight:600;padding:2px 8px;border-radius:3px;background:var(--btn);color:var(--subtle)}
.week-head .status,.month-head .status{background:var(--board-panel);color:var(--on-board)}
.status.ok,.week-head .status.ok,.month-head .status.ok{background:var(--success-bg);color:var(--success)}
.status.warn,.week-head .status.warn,.month-head .status.warn{background:var(--warn-bg);color:var(--warn)}
.week-actions{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}

.days{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.day{flex:0 0 min(272px,82vw);scroll-snap-align:start;background:var(--list);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--card-shadow);align-self:flex-start;min-height:90px}
@media (min-width:1300px){.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));overflow:visible}.day{flex:none}}
.day.past{display:none}
@media (min-width:1300px){.day.past{display:flex;visibility:hidden}}   /* keep weekday columns lined up on the wide grid */
.day-label{display:flex;align-items:baseline;gap:6px;padding:2px 6px;font-size:14px;font-weight:600;color:var(--text)}
.day-label .num{order:2}
.day-body{display:flex;flex-direction:column;gap:8px}
.day-note{font-size:12px;font-weight:600;color:var(--danger);padding:0 6px;margin-top:-6px}
.day-note.sale{color:#A54800}
:root[data-theme="dark"] .day-note.sale{color:#FEC195}
.day.open{background:var(--open);box-shadow:none;border:1px dashed var(--on-board)}
.day.open .day-label{color:var(--on-board)}
.open-label{font-size:12px;color:var(--on-board);opacity:.85;padding:0 6px}
.add{border:0;background:none;text-align:left;border-radius:8px;padding:6px 8px;font-size:14px;font-weight:600;color:var(--subtle);cursor:pointer}
.add:hover{background:var(--btn-hover);color:var(--text)}
.day.open .add{color:var(--on-board)}
.day.drop-ok{outline:2px solid var(--primary);outline-offset:2px;background:var(--drop)}

/* ---------------------------------------------------------------- cards */
.card{position:relative;display:flex;flex-direction:column;border-radius:8px;background:var(--card);box-shadow:var(--card-shadow);cursor:pointer;text-align:left;width:100%;overflow:hidden;color:var(--text)}
.card:hover{box-shadow:0 0 0 2px var(--primary)}
.card.idea{background:var(--idea);box-shadow:inset 0 0 0 1px var(--idea-border)}
.card .thumb{width:100%;height:auto;max-height:240px;object-fit:cover;background:#091E42}
.card .thumb.sq{aspect-ratio:auto;object-fit:contain;max-height:240px}
.card .meta{padding:8px 10px 6px;display:flex;flex-direction:column;gap:6px;min-width:0}
.card .title{font-size:14px;line-height:20px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.badges{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:12px;color:var(--subtle)}
.badge{display:inline-flex;align-items:center;gap:3px;border-radius:3px;line-height:20px}
.badge.ok{background:var(--success-bg);color:var(--success);padding:0 6px;font-weight:600}
.badge.re{background:var(--warn-bg);color:var(--warn);padding:0 6px;font-weight:600}
.grip{position:absolute;top:6px;right:6px;z-index:2;width:28px;height:28px;border:0;border-radius:50%;background:var(--card);color:var(--subtle);box-shadow:var(--card-shadow);cursor:grab;touch-action:none;display:grid;place-items:center;opacity:.92}
.grip:hover{background:var(--btn-hover);opacity:1}
.grip svg{pointer-events:none}
.drag-ghost{position:fixed;z-index:60;pointer-events:none;width:240px;opacity:.95;transform:rotate(4deg);box-shadow:var(--raised)}
body.dragging{user-select:none;cursor:grabbing}
.card.moving{opacity:.3}

.end-note{text-align:center;margin-top:28px;color:var(--on-board)}

/* filtered list */
.filtered .month-head{margin-bottom:12px}
.flist{display:flex;flex-direction:column;gap:10px;max-width:640px}
.frow{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;align-items:start}
.fdate{display:flex;flex-direction:column;padding-top:4px;color:var(--on-board)}
.fdate b{font-weight:700}
.fdate span{font-size:12px;opacity:.85}
.flist .card{flex-direction:row}
.flist .card .thumb{width:84px;max-height:120px;flex:none}
@media (max-width:640px){.frow{grid-template-columns:1fr;gap:4px}.fdate{flex-direction:row;gap:8px;padding:0}}

/* ---------------------------------------------------------------- card back (detail) */
.detail{border:0;border-radius:12px;padding:0;width:min(1060px,calc(100vw - 24px));max-height:calc(100dvh - 24px);background:var(--modal);color:var(--text);box-shadow:var(--raised)}
.detail::backdrop{background:var(--overlay)}
.d-head{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 16px;background:var(--modal);border-bottom:1px solid var(--border)}
.d-head b{font-weight:600}
.d-head .x{border:0;background:var(--btn);color:var(--text);border-radius:50%;width:32px;height:32px;font-size:20px;line-height:1;cursor:pointer;flex:none}
.d-head .x:hover{background:var(--btn-hover)}
.d-body{display:grid;grid-template-columns:minmax(0,500px) minmax(0,1fr);gap:20px;padding:16px}
.d-fields{display:flex;flex-direction:column;gap:14px;min-width:0}
.sec-title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;margin:0 0 6px}
.field label{display:block;font-size:12px;font-weight:700;color:var(--subtle);margin-bottom:4px}
.field .val{white-space:pre-wrap;font-size:14px}
.field .val.big{font-size:20px;font-weight:600;line-height:1.3}
.field textarea,.field input,.field select,.why textarea{width:100%;border:1px solid var(--input-border);border-radius:3px;padding:7px 10px;background:var(--input);color:var(--text);resize:vertical;font:inherit}
.field textarea:focus,.field input:focus,.field select:focus,.why textarea:focus{outline:2px solid var(--primary);outline-offset:-1px;border-color:transparent}
.why{margin:0 16px 16px;padding:12px 14px;background:var(--btn);border-radius:8px}
.why h4{margin:0 0 4px;font-size:14px;font-weight:700}
.why p{margin:0}
.d-foot{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 16px}
.d-foot .spacer{flex:1}
.d-head .spacer{flex:1}
@media (max-width:900px){.d-body{grid-template-columns:1fr}.fb-wrap{max-width:500px;margin:0 auto;width:100%}}

/* fire score sticker */
.fire{position:relative;border:0;background:#FFF3EB;color:#A54800;border-radius:3px;padding:4px 10px;font:inherit;cursor:help;flex:none;box-shadow:inset 0 0 0 1px #FEC195}
:root[data-theme="dark"] .fire{background:#4A2B0F;color:#FEC195;box-shadow:inset 0 0 0 1px #702E00}
.fire-n{font-size:15px;font-weight:700}
.fire-n small{font-size:11px;opacity:.75;margin-left:1px}
.fire-tip{position:absolute;right:0;top:calc(100% + 6px);width:260px;background:var(--modal);border-radius:8px;padding:10px 12px;text-align:left;font-size:13px;font-weight:400;color:var(--text);box-shadow:var(--raised);display:none;z-index:5;cursor:auto}
.fire-tip b{display:block;font-size:12px;font-weight:700;color:var(--subtle);margin-bottom:4px}
.fire:hover .fire-tip,.fire:focus-within .fire-tip,.fire.open .fire-tip{display:block}
.fire-edit{display:flex;flex-direction:column;gap:6px}
.fire-edit input,.fire-edit textarea{width:100%;border:1px solid var(--input-border);border-radius:3px;padding:6px 8px;background:var(--input);color:var(--text);font:inherit}

/* thumbnail tools */
.thumb-tools{display:flex;flex-wrap:wrap;gap:6px;align-items:center}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:70;background:#172B4D;color:#fff;font-weight:500;font-size:14px;padding:10px 14px;border-radius:8px;box-shadow:var(--raised);max-width:calc(100vw - 32px);display:flex;align-items:center;gap:12px}
:root[data-theme="dark"] .toast{background:#DEE4EA;color:#1D2125}
.toast.err{background:#AE2E24;color:#fff}
.toast-undo{border:0;background:rgba(255,255,255,.2);color:inherit;font:inherit;font-weight:700;font-size:13px;padding:4px 10px;border-radius:3px;cursor:pointer}

.gate{min-height:80vh;display:grid;place-content:center;justify-items:center;text-align:center;padding:24px;color:var(--on-board)}
.gate h1{font-weight:700;margin:16px 0 4px}

/* ---------------------------------------------------------------- Facebook preview */
.fb-wrap{display:flex;flex-direction:column;gap:6px}
.fb-label{font-size:12px;font-weight:700;color:var(--subtle)}
.fb-canvas{background:var(--fb-canvas);border-radius:8px;padding:12px;display:flex;justify-content:center}
.fb-post{width:100%;max-width:500px;background:var(--fb-bg);color:var(--fb-text);border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,.2);font-family:Helvetica,Arial,sans-serif;overflow:hidden}
.fb-head{display:flex;align-items:center;gap:8px;padding:12px 16px 0}
.fb-ava{width:40px;height:40px;border-radius:50%;background:#fff;object-fit:contain;padding:5px;box-shadow:0 0 0 1px var(--fb-line);flex:none}
.fb-name{font-weight:600;font-size:15px;line-height:1.2}
.fb-when{font-size:13px;color:var(--fb-sub)}
.fb-dots{margin-left:auto;color:var(--fb-sub);font-size:20px;letter-spacing:1px}
.fb-text{padding:8px 16px 12px;font-size:15px;line-height:1.33;white-space:pre-wrap;overflow-wrap:anywhere}
.fb-text.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fb-more{border:0;background:none;padding:0 16px 10px;margin-top:-8px;color:var(--fb-text);font-weight:600;font-size:15px;cursor:pointer;font-family:inherit}
.fb-tag{color:var(--fb-tag)}
.fb-media{background:#000;width:100%}
.fb-media img,.fb-media video{width:100%;height:auto;margin:0 auto}
.fb-media .fb-empty{aspect-ratio:1/1;display:grid;place-items:center;text-align:center;padding:20px;color:#B0B3B8;font-weight:600;background:repeating-linear-gradient(45deg,#2a2b2d 0 14px,#242526 14px 28px)}
.fb-actions{display:flex;margin:4px 12px 4px;border-top:1px solid var(--fb-line);padding-top:4px}
.fb-actions span{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:7px 0;color:var(--fb-sub);font-weight:600;font-size:15px;border-radius:4px}
.fb-actions svg{width:18px;height:18px}
/* Reels view for 9:16 videos */
.fb-reel{position:relative;width:min(100%,340px);aspect-ratio:9/16;background:#000;border-radius:12px;overflow:hidden;color:#fff;font-family:Helvetica,Arial,sans-serif;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.fb-reel video,.fb-reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:pointer}
.fb-reel .r-top{position:absolute;top:0;left:0;right:0;padding:12px 14px;display:flex;justify-content:space-between;font-weight:700;font-size:17px;background:linear-gradient(rgba(0,0,0,.45),transparent);pointer-events:none}
.fb-reel .r-bottom{position:absolute;left:0;right:56px;bottom:0;padding:40px 12px 14px;background:linear-gradient(transparent,rgba(0,0,0,.65));pointer-events:none}
.fb-reel .r-who{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px}
.fb-reel .r-who img{position:static;width:30px;height:30px;border-radius:50%;background:#fff;padding:3px;object-fit:contain}
.fb-reel .r-follow{border:1px solid rgba(255,255,255,.8);border-radius:6px;padding:1px 8px;font-size:13px}
.fb-reel .r-cap{margin-top:8px;font-size:13.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fb-reel .r-audio{margin-top:6px;font-size:12.5px;opacity:.9}
.fb-reel .r-rail{position:absolute;right:8px;bottom:18px;display:flex;flex-direction:column;gap:16px;align-items:center;pointer-events:none}
.fb-reel .r-rail svg{width:26px;height:26px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.fb-reel .r-play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.fb-reel .r-play svg{width:64px;height:64px;opacity:.9;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.fb-reel .r-mute{position:absolute;top:46px;right:10px;width:32px;height:32px;border:0;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;cursor:pointer;display:grid;place-items:center;z-index:2}

/* ---------------------------------------------------------------- Brand & Templates page */
#view-brand{color:var(--on-board)}
.b-sec{margin:8px 0 30px}
.b-sec>h2{font-size:20px;font-weight:700;margin:0 0 4px}
.b-sec>p{margin:0 0 12px;opacity:.9;max-width:760px}
.b-sec>p a{color:var(--on-board)}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.tpl{background:var(--card);color:var(--text);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--card-shadow)}
.tpl img,.tpl video{width:100%;aspect-ratio:9/16;object-fit:cover;background:#0E2A1B}
.tpl img.sq{aspect-ratio:1/1;object-fit:contain}
.tpl div{padding:10px 12px 14px}
.tpl h3{margin:0 0 4px;font-size:15px;font-weight:600}
.tpl p{margin:0;font-size:13px;color:var(--subtle)}
.end-wrap{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:760px){.end-wrap{grid-template-columns:1fr}.end-wrap video{max-width:300px;margin:0 auto}}
.end-wrap video{width:100%;border-radius:8px;background:#000}
table.tl{border-collapse:collapse;width:100%;font-size:13.5px;background:var(--card);color:var(--text);border-radius:8px;overflow:hidden;box-shadow:var(--card-shadow)}
table.tl th,table.tl td{padding:8px 10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
table.tl th{font-size:12px;color:var(--subtle);background:var(--list)}
table.tl td:first-child{font-weight:600;white-space:nowrap}
.qr-row{display:flex;flex-wrap:wrap;gap:18px;align-items:center;background:#0E2A1B;border-radius:8px;padding:18px}
.qr-row .qr{width:185px;height:185px;image-rendering:pixelated;flex:none}
.qr-row .url{width:280px;height:auto}
.qr-row p{color:#fff;margin:0;font-size:13.5px;max-width:420px}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.sw{background:var(--card);color:var(--text);border-radius:8px;overflow:hidden;box-shadow:var(--card-shadow)}
.sw i{display:block;height:80px;background:var(--c)}
.sw div{padding:8px 12px}
.sw b{display:block;font-weight:600;font-size:14px}
.sw code{font-size:13px;user-select:all}
.fonts{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.font{background:var(--card);color:var(--text);border-radius:8px;padding:14px 16px;box-shadow:var(--card-shadow)}
.font .s{font-family:var(--brand);font-size:28px;line-height:1.1;margin:6px 0 8px}
.font small{color:var(--subtle)}
.logos{display:flex;flex-wrap:wrap;gap:12px}
.logo-card{background:radial-gradient(circle at 50% 40%,#1B4A31,#0E2A1B);border-radius:8px;padding:22px;display:grid;place-items:center;min-width:220px;flex:1}
.logo-card img{max-height:110px;width:auto;filter:drop-shadow(0 12px 22px rgba(0,0,0,.5)) drop-shadow(0 3px 6px rgba(0,0,0,.35))}
.logo-card span{color:#fff;font-size:12px;font-weight:600;margin-top:10px;opacity:.85}

/* ---------------------------------------------------------------- Event & Content Guide extras */
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.fact{background:var(--card);color:var(--text);border-radius:8px;padding:12px 14px;box-shadow:var(--card-shadow)}
.fact small{display:block;font-size:12px;font-weight:700;color:var(--subtle);text-transform:uppercase;letter-spacing:.4px}
.fact{min-width:0}
.fact b{display:block;font-size:17px;font-weight:700;margin-top:2px;overflow-wrap:anywhere}
.fact span{font-size:13px;color:var(--subtle)}
.pillars{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.pillar{background:var(--card);color:var(--text);border-radius:8px;padding:12px 14px;box-shadow:var(--card-shadow);border-top:6px solid var(--c)}
.pillar h3{margin:0 0 4px;font-size:15px;font-weight:700}
.pillar p{margin:0 0 6px;font-size:13.5px}
.pillar em{font-style:normal;font-size:12.5px;color:var(--subtle)}
.mock{aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:16px;color:#fff;font-family:var(--brand);background:var(--bg)}
.mock.r916{aspect-ratio:9/16}
.mock .k{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;opacity:.9}
.mock .hd{font-size:22px;font-weight:900;line-height:1.05;text-transform:uppercase}
.mock .hd i{font-style:normal;color:#BFD7F0}
.mock .ft{font-size:11px;font-weight:700;opacity:.85}
.tag-bank{display:flex;flex-wrap:wrap;gap:6px}
.tag-bank code{background:var(--card);color:var(--fb-tag);padding:4px 8px;border-radius:3px;font-size:13px;user-select:all;box-shadow:var(--card-shadow)}
ul.tbc{background:var(--card);color:var(--text);border-radius:8px;padding:12px 14px 12px 32px;margin:0;box-shadow:var(--card-shadow);max-width:760px}
ul.tbc li{margin:3px 0}