/* ═════════════════════════════════════════════════════════════════
   CONTENT — its own app (content-app.js)   B64 S2
   The approved sample's look (samples/b64/content.html): violet cinema
   glass, Sora, a floating glass bar, poster rails. Every colour is a
   shell token re-mapped under html[data-app="content"] (app-themes.css),
   so Mocca's own Content page and panels, adopted into this shell, turn
   violet with it — dark (the sample) and a light twin.
   Class-only selectors near icons (the icon-font rule).
   ═════════════════════════════════════════════════════════════════ */

/* ── which chrome shows ─────────────────────────────────────────── */
html:not([data-app="content"]) #cnaShell{ display:none !important; }
html[data-app="content"] #shell{ display:block; height:auto; min-height:100dvh; overflow:visible; }
html[data-app="content"] #shell > .nav,
html[data-app="content"] #shell > .sb,
html[data-app="content"] #shell > #scrim,
html[data-app="content"] #shell > main.body,
html[data-app="content"] #shell > .tb,
html[data-app="content"] #shell > #pageFab{ display:none !important; }
html[data-app="content"] body{ background:var(--bg-1); }

.cna{
  --cna-vio:#8b5cf6; --cna-pink:#ff5fa2;
  --cna-glass:rgba(255,255,255,.07); --cna-glass2:rgba(255,255,255,.12); --cna-edge:rgba(255,255,255,.16);
  --cna-pop:rgba(20,12,38,.94);
  min-height:100dvh; color:var(--fg-1); font-family:var(--mk-font-ui); -webkit-font-smoothing:antialiased;
  background:radial-gradient(90% 60% at 80% -10%, rgba(139,92,246,.22), transparent 60%), var(--bg-1);
}
html[data-app="content"]:not([data-theme="dark"]) .cna{
  --cna-glass:rgba(255,255,255,.66); --cna-glass2:rgba(124,58,237,.1); --cna-edge:rgba(60,30,120,.14);
  --cna-pop:rgba(255,255,255,.96);
  background:radial-gradient(90% 60% at 80% -10%, rgba(139,92,246,.16), transparent 60%), var(--bg-1);
}
:where(.cna) :where(button){ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
.cna button:focus-visible{ outline:2px solid var(--cna-vio); outline-offset:2px; }
.cna-glass{ background:var(--cna-glass); border:1px solid var(--cna-edge); backdrop-filter:blur(24px) saturate(1.5); -webkit-backdrop-filter:blur(24px) saturate(1.5); }

/* signed-out ⇄ signed-in */
#shell.signed-out .cna-bar, #shell.signed-out .cna-main, #shell.signed-out .cna-tabs, #shell.signed-out .cna-menu, #shell.signed-out .cna-fab-w{ display:none !important; }
#shell.signed-in .cna-out{ display:none; }

/* ── the bar ─────────────────────────────────────────────────────── */
.cna-bar{ position:fixed; top:14px; inset-inline:14px; z-index:30; max-width:1240px; margin:0 auto; display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:999px; }
.cna-brand{ display:flex; align-items:center; gap:10px; padding:4px 10px 4px 4px; border-radius:999px; font:800 16px/1.1 var(--mk-font-ui); text-align:start; flex:none; }
.cna-dot{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--cna-vio),var(--cna-pink)); flex:none; }
.cna-dot.cna-logo{ background:none; border-radius:22.4%; object-fit:cover; }
.cna-dot > .mi{ font-size:20px; }
.cna-brand-t small{ display:block; font:500 11px/1.2 var(--mk-font-ui); color:var(--fg-3); }
.cna-brand-t{ display:flex; flex-direction:column; }
.cna-brand-t .mk-by{ color:var(--fg-3); }
.cna-sp{ flex:1; }
.cna-nav{ display:flex; gap:4px; }
.cna-nav .cna-tab{ display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:999px; color:var(--fg-2); font:600 13px/1 var(--mk-font-ui); }
.cna-nav .cna-tab > .mi{ display:none; }
.cna-nav .cna-tab.on{ background:var(--cna-glass2); color:var(--fg-1); }
.cna-srch{ display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px !important; border-radius:999px; border:1px solid var(--cna-edge) !important; background:var(--cna-glass) !important; color:var(--fg-3) !important; font:500 13px var(--mk-font-ui) !important;
  flex:1 1 auto; min-width:0; text-align:start; }   /* B65 W7 (018) — grows into the free space */
.cna-srch > .mi{ font-size:18px; flex:none; }
.cna-srch > span:not(.mi){ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cna-ic{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--cna-edge) !important; flex:none; }
.cna-ic > .mi{ font-size:19px; }
.cna-me{ width:38px; height:38px; border-radius:50%; background-color:var(--bg-3); background-size:cover; background-position:center; background-repeat:no-repeat; border:2px solid var(--cna-edge) !important; flex:none; }
.cna-me-sm{ width:40px; height:40px; }
/* B65 W7 (019) — Play is a fixed FAB bottom-right (Budget's +), Swipe night blooms up from it */
.cna-fab-w{ position:fixed; z-index:35; bottom:26px; inset-inline-end:max(20px, calc((100vw - 1240px) / 2 + 20px)); display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.cna-fab{ width:62px; height:62px; border-radius:22px !important; display:grid; place-items:center; color:#fff !important; background:linear-gradient(135deg,var(--cna-vio),var(--cna-pink)) !important;
  box-shadow:0 16px 34px -14px rgba(255,95,162,.75); transition:transform .2s; }
.cna-fab:hover{ transform:translateY(-2px); }
.cna-fab > .mi{ font-size:30px; font-variation-settings:'FILL' 1; transition:transform .3s; }
.cna-fab.open > .mi{ transform:rotate(-12deg) scale(1.06); }
.cna-fab-w > .cna-pop{ position:static; width:min(300px, calc(100vw - 32px)); }
html.sn-open .cna-fab-w{ display:none; }
/* 016 — the kind bar never scrolls away: it pins under the floating bar, at every size */
html[data-app="content"] #cnaShell .page-view[data-view="content"] .page-h{ position:sticky !important; top:80px; z-index:25; pointer-events:none; }
#cnaShell .page-view[data-view="content"] .page-h > *{ pointer-events:auto; }
#cnaShell .page-view[data-view="content"] .page-h .cn-med{ background:var(--cna-pop) !important; border:1px solid var(--cna-edge); border-radius:999px; box-shadow:0 12px 30px -18px rgba(6,3,12,.5);
  backdrop-filter:blur(20px) saturate(1.4); -webkit-backdrop-filter:blur(20px) saturate(1.4); }

/* popovers */
.cna-pop{ position:fixed; z-index:40; border-radius:22px; padding:8px; display:flex; flex-direction:column; gap:2px; background:var(--cna-pop) !important; box-shadow:0 24px 60px rgba(6,3,12,.35); }
.cna-pop[hidden]{ display:none; }
.cna-menu{ top:76px; inset-inline-end:max(24px, calc((100vw - 1240px) / 2 + 10px)); width:min(300px, calc(100vw - 32px)); }
.cna-play-w > .cna-pop{ position:absolute; top:calc(100% + 10px); inset-inline-end:0; width:300px; }
.cna-pop > button{ display:flex; align-items:center; gap:12px; min-height:44px; padding:8px 10px; border-radius:14px; text-align:start; font:500 14px/1.3 var(--mk-font-ui); }
.cna-pop > button:hover{ background:var(--cna-glass2); }
.cna-pop > button > .mi{ font-size:20px; color:var(--accent-text); flex:none; }
.cna-pop > button b{ display:block; font:700 13.5px/1.3 var(--mk-font-ui); }
.cna-pop > button small{ display:block; font:500 11.5px/1.35 var(--mk-font-ui); color:var(--fg-3); }
.cna-menu-h{ display:flex; gap:12px; align-items:center; padding:8px 8px 12px; border-bottom:1px solid var(--cna-edge); margin-bottom:6px; }
.cna-menu-h b{ display:block; font:700 15px/1.2 var(--mk-font-ui); }
.cna-menu-h small{ color:var(--fg-3); font-size:12px; }
.cna-menu-l{ padding:6px 10px 4px; font:600 11px var(--mk-font-ui); color:var(--fg-3); }
.cna-langs{ display:flex; gap:4px; padding:0 6px 6px; }
.cna-langs > button{ flex:1; min-height:36px; border-radius:12px; border:1px solid var(--cna-edge) !important; font:600 12.5px var(--mk-font-ui) !important; color:var(--fg-2) !important; }
.cna-langs > button[aria-pressed="true"]{ background:linear-gradient(135deg,var(--cna-vio),var(--cna-pink)) !important; color:#fff !important; border-color:transparent !important; }

/* search */
.cna-find{ position:fixed; z-index:41; top:76px; left:50%; transform:translateX(-50%); width:min(560px, calc(100vw - 24px)); max-height:min(70vh, 560px); border-radius:24px; padding:8px; display:flex; flex-direction:column; background:var(--cna-pop) !important; box-shadow:0 24px 60px rgba(6,3,12,.4); }
.cna-find[hidden]{ display:none; }
.cna-find-in{ display:flex; align-items:center; gap:8px; padding:4px 4px 8px 12px; border-bottom:1px solid var(--cna-edge); }
.cna-find-in > .mi{ font-size:20px; color:var(--fg-3); }
.cna-find-in > input{ flex:1; min-width:0; height:40px; border:0; outline:0; background:transparent; color:var(--fg-1); font:500 15px var(--mk-font-ui); }
.cna-find-list{ overflow:auto; min-height:0; padding-top:6px; }
.cna-find-it{ width:100%; display:flex; align-items:center; gap:12px; padding:8px; border-radius:14px; text-align:start; }
.cna-find-it:hover{ background:var(--cna-glass2); }
.cna-find-it b{ display:block; font:700 14px/1.25 var(--mk-font-ui); }
.cna-find-it small{ display:block; font:500 12px/1.3 var(--mk-font-ui); color:var(--fg-3); }
.cna-find-po{ width:40px; height:56px; border-radius:10px; background:var(--pbg); display:grid; place-items:center; color:#fff; flex:none; }
.cna-find-po > .mi{ font-size:18px; }
.cna-find-none{ padding:18px 12px; color:var(--fg-3); font:500 13px var(--mk-font-ui); }

/* ── Home: hero + rails ─────────────────────────────────────────── */
.cna-hero{ position:relative; min-height:min(74vh, 700px); display:flex; align-items:flex-end; overflow:hidden; }
.cna-hero-bg{ position:absolute; inset:0; background:var(--hbg); transform:scale(1.08); filter:saturate(1.2); }
.cna-hero-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, var(--bg-1) 4%, color-mix(in srgb, var(--bg-1) 55%, transparent) 45%, color-mix(in srgb, var(--bg-1) 10%, transparent)); }
.cna-hero-in{ position:relative; z-index:1; width:100%; max-width:1240px; margin:0 auto; padding:120px 28px 40px; }
.cna-kick{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; font:700 11.5px var(--mk-font-ui); letter-spacing:.12em; text-transform:uppercase; }
.cna-kick > .mi{ font-size:16px; }
.cna-hero h1{ margin:14px 0 10px; font:800 clamp(38px, 7vw, 86px)/.95 var(--mk-font-ui); letter-spacing:-.04em; max-width:900px; }
.cna-hero p{ margin:0; max-width:560px; color:var(--fg-2); font:400 15px/1.6 var(--mk-font-ui); }
.cna-acts{ display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; }
.cna-b{ display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 18px !important; border-radius:999px; font:700 14px var(--mk-font-ui) !important; }
.cna-b > .mi{ font-size:20px; }
.cna-pri{ color:#fff !important; background:linear-gradient(135deg,var(--cna-vio),var(--cna-pink)) !important; box-shadow:0 14px 40px -12px rgba(255,95,162,.7); }
.cna-gl{ background:var(--cna-glass2) !important; border:1px solid var(--cna-edge) !important; }
.cna-un{ min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--cna-pink); color:#fff; font:700 11px/20px var(--mk-font-ui); }

.cna-wrap{ max-width:1240px; margin:0 auto; padding:0 28px 60px; }
.cna-row-h{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:30px 0 14px; }
.cna-row-h h2{ margin:0; font:800 22px var(--mk-font-ui); letter-spacing:-.02em; }
.cna-row-h small{ color:var(--fg-3); font:500 13px var(--mk-font-ui); text-align:end; }
.cna-rail{ display:grid; grid-auto-flow:column; grid-auto-columns:clamp(140px, 17vw, 210px); gap:14px; overflow-x:auto; padding:4px 2px 16px; scroll-snap-type:x mandatory; scrollbar-width:none; }
.cna-rail::-webkit-scrollbar{ display:none; }
.cna-card{ scroll-snap-align:start; position:relative; aspect-ratio:2/3; border-radius:22px !important; overflow:hidden; border:1px solid var(--cna-edge) !important; text-align:start; color:#f4efff !important; transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.cna-card:hover{ transform:translateY(-4px) scale(1.02); box-shadow:0 24px 50px -20px rgba(139,92,246,.8); }
.cna-pv{ position:absolute; inset:0; background:var(--pbg); }
.cna-pv::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(8,4,16,.92), transparent 55%); }
.cna-t{ position:absolute; inset-inline:12px; bottom:14px; z-index:1; }
.cna-t b{ display:block; font:700 15px/1.2 var(--mk-font-ui); }
.cna-t small{ display:block; margin-top:2px; font:500 11.5px/1.3 var(--mk-font-ui); color:#c9bde8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cna-prog{ position:absolute; inset-inline:12px; bottom:7px; height:3px; border-radius:3px; background:rgba(255,255,255,.2); z-index:1; }
.cna-prog > i{ display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--cna-vio),var(--cna-pink)); }
.cna-st{ position:absolute; top:10px; inset-inline-end:10px; z-index:1; padding:4px 9px; border-radius:999px; font:700 10.5px var(--mk-font-ui); background:rgba(12,7,23,.5); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.16); }
.cna-kind{ position:absolute; top:10px; inset-inline-start:10px; z-index:1; width:28px; height:28px; border-radius:9px; display:grid; place-items:center; background:rgba(12,7,23,.5); border:1px solid rgba(255,255,255,.16); }
.cna-kind > .mi{ font-size:16px; }
.cna-spine{ position:absolute; inset-block:0; inset-inline-start:0; width:10px; background:rgba(0,0,0,.35); z-index:1; }
.cna-big{ grid-auto-columns:clamp(250px, 34vw, 420px); }
.cna-big .cna-card{ aspect-ratio:16/9; }
.cna-book .cna-card{ aspect-ratio:3/4.4; }

/* ── the adopted Content page (Up next · Discover · History) ────── */
.cna-lib{ max-width:1240px; margin:0 auto; padding:88px 28px 60px; }
#cnaShell .page-view[data-view="content"]{ display:flex !important; flex-direction:column; min-height:0; }
#cnaShell .page-view[data-view="content"] > .page{ overflow:visible !important; padding:0 !important; height:auto; }
#cnaShell .page-view[data-view="content"] .sec-tabs{ display:none !important; }
#cnaShell .page-view[data-view="content"] .page-h{ position:static !important; background:none !important; border:0 !important; box-shadow:none !important; padding:10px 0 6px !important; margin:0 !important; justify-content:flex-end; backdrop-filter:none !important; }
#cnaShell .page-view[data-view="content"] .page-h::before, #cnaShell .page-view[data-view="content"] .page-h::after{ display:none !important; }
#cnaShell .page-view[data-view="content"] .page-h h2{ display:none; }
/* the medium filter is wider than a phone: it scrolls sideways instead of widening the page */
#cnaShell .page-view[data-view="content"] .page-h > .acts{ min-width:0; max-width:100%; overflow-x:auto; scrollbar-width:none; }
#cnaShell .page-view[data-view="content"] .page-h > .acts::-webkit-scrollbar{ display:none; }
#cnaShell .page-view[data-view="content"] .page-h .cn-med{ flex-wrap:nowrap; width:max-content; }
#cnaShell .page-view[data-view="content"] .cn-host{ padding:0 !important; }
#cnaShell .cn-card, #cnaShell .cn-cont-row, #cnaShell .cn-fr-card{ border-radius:18px; }

/* ── bottom tabs (phone portrait) ───────────────────────────────── */
.cna-tabs{ display:none; position:fixed; inset-inline:12px; bottom:12px; z-index:30; justify-content:space-around; padding:8px; border-radius:26px; }
.cna-tabs .cna-tab{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 10px; border-radius:18px; color:var(--fg-3); font:700 10.5px var(--mk-font-ui); min-width:64px; }
.cna-tabs .cna-tab > .mi{ font-size:22px; }
.cna-tabs .cna-tab.on{ color:var(--fg-1); background:var(--cna-glass2); }

/* ── signed out: the front door ─────────────────────────────────── */
.cna-out{ min-height:100dvh; display:grid; place-items:center; padding:24px; background:radial-gradient(80% 60% at 30% 20%, rgba(139,92,246,.35), transparent 60%), radial-gradient(60% 50% at 80% 90%, rgba(255,95,162,.25), transparent 60%), var(--bg-1); }
.cna-out-card{ width:min(420px, 100%); border-radius:30px; padding:32px 26px; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.cna-dot-lg{ width:64px; height:64px; }
.cna-dot-lg > .mi{ font-size:32px; }
.cna-out-card h1{ margin:4px 0 0; font:800 40px/1 var(--mk-font-ui); letter-spacing:-.03em; }
.cna-out-card p{ margin:0 0 8px; color:var(--fg-2); font:400 15px/1.5 var(--mk-font-ui); }
.cna-out-card .cna-langs{ padding:8px 0 0; width:100%; }

/* ── the title panel and the games wear the glass ───────────────── */
html[data-app="content"] .mp-panel{ background:color-mix(in srgb, var(--bg-2) 94%, transparent); backdrop-filter:blur(28px) saturate(1.4); -webkit-backdrop-filter:blur(28px) saturate(1.4); }

/* ── tablet: icons join the labels so the bar reads as navigation ── */
@media (max-width:1024px){
  .cna-brand-t small, .cna-brand-t .mk-by{ display:none; }
}
/* ── phone portrait: the bar keeps brand + actions; tabs go to the bottom ── */
@media (max-width:720px) and (orientation:portrait){
  .cna-bar{ top:10px; inset-inline:10px; gap:6px; }
  .cna-nav{ display:none; }
  .cna-brand-t{ display:none; }
  .cna-tabs{ display:flex; }
  .cna-hero{ min-height:min(66vh, 560px); }
  .cna-hero-in{ padding:100px 18px 28px; }
  .cna-hero h1{ font-size:clamp(34px, 11vw, 52px); }
  .cna-wrap{ padding:0 16px 110px; }
  .cna-lib{ padding:76px 16px 110px; }
  .cna-row-h small{ display:none; }
  .cna-rail{ grid-auto-columns:clamp(128px, 38vw, 170px); gap:10px; }
  .cna-big{ grid-auto-columns:78vw; }
  .cna-menu{ top:68px; inset-inline-end:10px; }
  .cna-find{ top:68px; }
  .cna-fab-w{ bottom:92px; inset-inline-end:14px; }
  .cna-fab{ width:56px; height:56px; border-radius:20px !important; }
  html[data-app="content"] #cnaShell .page-view[data-view="content"] .page-h{ top:70px; }
}
/* ── phone landscape (065-017): "the tabs can be on a separate column at the right
   side, no need to clamp up every item to one side" — the bar stays across the top
   (brand, the growing search, assistant, profile) and the four tabs stand in their
   own glass column on the inline-end edge. ── */
@media (max-height:599px) and (orientation:landscape){
  .cna-bar{ top:8px; inset-inline-start:max(10px, env(safe-area-inset-left)); inset-inline-end:84px; max-width:none; margin:0; padding:6px 8px; gap:8px; }
  html[dir="rtl"] .cna-bar{ inset-inline-start:max(10px, env(safe-area-inset-right)); }
  .cna-nav{ display:none; }
  .cna-brand-t{ display:none; }
  .cna-dot{ width:32px; height:32px; }
  .cna-srch, .cna-ic, .cna-me{ height:34px !important; }
  .cna-ic, .cna-me{ width:34px !important; }
  .cna-tabs{ display:flex; flex-direction:column; justify-content:center; gap:4px; top:8px; bottom:8px; inset-inline-start:auto; inset-inline-end:max(8px, env(safe-area-inset-right)); width:64px; padding:6px; border-radius:24px; }
  .cna-tabs .cna-tab{ min-width:0; padding:6px 2px; gap:1px; font-size:9.5px; }
  .cna-tabs .cna-tab > .mi{ font-size:21px; }
  .cna-hero{ min-height:88vh; }
  .cna-hero-in{ padding:70px 96px 24px 28px; }
  html[dir="rtl"] .cna-hero-in{ padding:70px 28px 24px 96px; }
  .cna-wrap{ padding:0 96px 40px 24px; }
  html[dir="rtl"] .cna-wrap{ padding:0 24px 40px 96px; }
  .cna-lib{ padding:62px 96px 40px 24px; }
  html[dir="rtl"] .cna-lib{ padding:62px 24px 40px 96px; }
  .cna-menu, .cna-find{ top:56px; }
  .cna-menu{ inset-inline-end:84px; }
  .cna-fab-w{ bottom:12px; inset-inline-end:88px; }
  .cna-fab{ width:52px; height:52px; border-radius:18px !important; }
  .cna-fab > .mi{ font-size:26px; }
  .cna-fab-w > .cna-pop{ max-height:calc(100dvh - 90px); overflow:auto; }
  html[data-app="content"] #cnaShell .page-view[data-view="content"] .page-h{ top:56px; }
}

/* ── B66 W9 ─────────────────────────────────────────────────────── */
/* the + FAB's menu: a "Play" label over the three games, then Create event (R2-09) */
.cna-fab-w > .cna-pop .cna-menu-l{ padding:8px 10px 2px; letter-spacing:.08em; text-transform:uppercase; }
.cna-pop-sep{ height:1px; margin:4px 8px; background:var(--cna-edge); }
/* Filters in the header (066-106) */
.cna-flt{ position:relative; }
.cna-flt.on{ border-color:var(--cna-vio) !important; color:var(--accent-text); }
.cna-flt-n{ position:absolute; top:-4px; inset-inline-end:-4px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--cna-pink); color:#fff; font:700 10px/17px var(--mk-font-ui); font-style:normal; text-align:center; }
.cna-flt-n[hidden]{ display:none; }
.cna-fltpop{ top:76px; inset-inline-end:max(24px, calc((100vw - 1240px) / 2 + 10px)); width:min(400px, calc(100vw - 24px)); max-height:calc(100dvh - 100px); overflow:auto; padding:14px; gap:10px; }
.cna-fh{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.cna-fh b{ font:800 16px var(--mk-font-ui); }
.cna-fclr{ height:32px; padding:0 12px !important; border-radius:999px; background:var(--cna-glass2) !important; font:600 12.5px var(--mk-font-ui) !important; }
.cna-fclr[hidden]{ display:none; }
.cna-fltpop h4{ margin:4px 0 0; font:700 11px var(--mk-font-ui); letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3); }
.cna-fr{ display:flex; flex-wrap:wrap; gap:6px; }
.cna-fc{ display:inline-flex; align-items:center; gap:5px; height:34px; padding:0 12px !important; border-radius:999px; border:1px solid var(--cna-edge) !important; background:var(--cna-glass) !important; font:600 12.5px var(--mk-font-ui) !important; color:var(--fg-2) !important; max-width:100%; }
.cna-fc > span:not(.mi){ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cna-fc > .mi{ font-size:15px; display:none; }
.cna-fc.on{ background:color-mix(in srgb, var(--cna-vio) 18%, transparent) !important; border-color:color-mix(in srgb, var(--cna-vio) 60%, transparent) !important; color:var(--fg-1) !important; }
.cna-fc.on > .mi{ display:inline-block; }
.cna-fsv{ height:40px; min-width:84px; padding:0 12px !important; border-radius:12px; border:1px solid var(--cna-edge) !important; background:#fff !important; display:grid; place-items:center; opacity:.45; filter:grayscale(1); }
.cna-fsv > img{ display:block; max-height:20px; max-width:70px; }
.cna-fsv.on{ opacity:1; filter:none; box-shadow:0 0 0 2px var(--cna-vio); }
/* Up next = a calendar from the year down to the day (066-103 · R2-08) */
.cna-cal-h{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 16px; }
.cna-cal-h h2{ margin:0; flex:1; min-width:140px; font:800 22px var(--mk-font-ui); letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cna-cal-h .cna-ic{ background:var(--cna-glass) !important; }
html[dir="rtl"] .cna-cal-h [data-cna-cnav] > .mi{ transform:scaleX(-1); }
.cna-cb{ height:38px; padding:0 14px !important; border-radius:999px; border:1px solid var(--cna-edge) !important; background:var(--cna-glass) !important; font:700 13px var(--mk-font-ui) !important; }
.cna-seg{ display:inline-flex; gap:2px; padding:4px; border-radius:999px; background:var(--cna-glass2); }
.cna-seg > button{ height:32px; padding:0 12px !important; border-radius:999px; font:700 12.5px var(--mk-font-ui) !important; color:var(--fg-2) !important; }
.cna-seg > button.on{ background:linear-gradient(135deg,var(--cna-vio),var(--cna-pink)) !important; color:#fff !important; }
.cna-yr{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; }
.cna-mini{ scroll-margin-top:88px; border-radius:20px; padding:12px !important; background:var(--cna-glass) !important; border:1px solid var(--cna-edge) !important; text-align:start; }
.cna-mini > b{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font:800 14px var(--mk-font-ui); text-transform:capitalize; }
.cna-mini > b small{ min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--cna-glass2); font:700 11px/20px var(--mk-font-ui); text-align:center; }
.cna-mg{ display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; }
.cna-mg > i{ display:grid; place-items:center; height:22px; border-radius:7px; font:600 10.5px var(--mk-font-ui); font-style:normal; color:var(--fg-3); }
.cna-mg > i.today{ outline:1.5px solid var(--cna-vio); color:var(--fg-1); }
.cna-mg > i.rel{ background:rgba(139,92,246,.42); color:var(--fg-1); }
.cna-mg > i.evt{ background:rgba(255,95,162,.45); color:var(--fg-1); }
.cna-mg > i.book{ background:rgba(60,190,150,.42); color:var(--fg-1); }
.cna-grid{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:6px; }
.cna-dw{ padding:4px 0; text-align:center; font:800 11px var(--mk-font-ui); letter-spacing:.06em; text-transform:uppercase; color:var(--fg-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cna-day{ min-height:108px; min-width:0; padding:6px; border-radius:16px; background:var(--cna-glass); border:1px solid var(--cna-edge); display:flex; flex-direction:column; gap:4px; cursor:pointer; }
.cna-grid.wk .cna-day{ min-height:240px; }
.cna-day.mute{ opacity:.35; cursor:default; }
.cna-day.today{ border-color:var(--cna-vio); }
.cna-day > span{ font:800 12px var(--mk-font-ui); color:var(--fg-2); }
.cna-ent{ display:block; padding:5px 6px; border-radius:9px; font:700 11px/1.25 var(--mk-font-ui); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cna-ent.rel{ background:linear-gradient(135deg, rgba(139,92,246,.45), rgba(139,92,246,.18)); }
.cna-ent.evt{ background:linear-gradient(135deg, rgba(255,95,162,.5), rgba(255,95,162,.18)); }
.cna-ent.book{ background:linear-gradient(135deg, rgba(60,190,150,.5), rgba(60,190,150,.15)); }
.cna-agenda{ border-radius:20px; padding:6px 14px; }
.cna-ag{ width:100%; display:flex; align-items:center; gap:12px; padding:12px 4px !important; border-top:1px solid var(--cna-edge) !important; text-align:start; }
.cna-ag:first-child{ border-top:0 !important; }
.cna-ag .k{ width:44px; height:44px; border-radius:14px; display:grid; place-items:center; flex:none; }
.cna-ag .k.rel{ background:rgba(139,92,246,.35); } .cna-ag .k.evt{ background:rgba(255,95,162,.4); } .cna-ag .k.book{ background:rgba(60,190,150,.35); }
.cna-ag b{ display:block; font:700 14px var(--mk-font-ui); }
.cna-ag small{ color:var(--fg-3); font:500 12.5px var(--mk-font-ui); }
.cna-ag-none{ padding:16px 4px; color:var(--fg-3); font:500 13px var(--mk-font-ui); }
@media (max-width:720px){
  .cna-day{ min-height:58px; padding:4px; border-radius:12px; }
  .cna-ent{ font-size:0; color:transparent; height:6px; padding:0; }
  .cna-grid.wk .cna-ent{ font-size:10px; color:inherit; height:auto; padding:4px; }
  .cna-cal-h h2{ order:-1; flex-basis:100%; }
  .cna-fltpop{ top:68px; inset-inline-end:12px; }
}
@media (max-height:599px) and (orientation:landscape){
  .cna-fltpop{ top:56px; inset-inline-end:84px; max-height:calc(100dvh - 66px); }
}

/* B67 R67-014 — in Arabic a Latin name truncated at its START ("…s-Cola Company"): the box takes its direction from
   its own text, so Latin truncates at its end and Arabic still at its start; alignment stays on the right. */
html[dir="rtl"] .cna-t small{ unicode-bidi:plaintext; text-align:right; }