/* ============================================================================================================
     APJC Enterprise Portal 1.1 - styles. Colours come from APJC_LOGO.png (navy #1E428A / #1A51A4, cyan #00A8E8 / #29C4F4).
     Tailwind (CDN) handles small utilities; the components live here. Departments colour their own chips and cards
     through the CSS variable --dc (set inline from the department colour, a validated #RRGGBB).
     ============================================================================================================ */
  :root {
    --navy: #1E428A; --blue: #1A51A4; --cyan: #00A8E8; --sky: #29C4F4; --teal: #2DD4BF;
    --ink: #050B1A; --night: #0A1630; --night-2: #0E1F45;
    --mist: #F4F7FB; --card: #FFFFFF; --line: #E2E8F1; --line-2: #CBD5E3;
    --text: #0B1B33; --muted: #5B6B82; --soft: #8A99AE;
    --ok: #16A34A; --ok-bg: #DCFCE7; --warn: #D97706; --warn-bg: #FEF3C7; --bad: #DC2626; --bad-bg: #FEE2E2; --unk: #94A3B8;
    --grad: linear-gradient(110deg, #1E428A 0%, #1A51A4 35%, #00A8E8 100%);
    /* (2026-11-10, user: fix every primary button) the same gradient with a deeper light end: white text on it keeps 4.5:1 along its whole length */
    --grad-ink: linear-gradient(110deg, #1E428A 0%, #1A51A4 35%, #0077C8 100%);
    --grad-soft: linear-gradient(135deg, rgba(30,66,138,.08), rgba(0,168,232,.10));
    --radius: 16px; --shadow: 0 1px 2px rgba(11,27,51,.06), 0 8px 24px rgba(11,27,51,.06);
    --shadow-lg: 0 24px 60px rgba(5,11,26,.22);
    --header-h: 68px; --promo-h: 36px;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
  body { margin: 0; min-height: 100vh; font-feature-settings: 'cv11', 'ss01'; }
  [hidden] { display: none !important; }
  :root { --ring: #0077C8; }   /* (RBAC review L3) the focus ring: >= 3:1 on light surfaces */
  .login, .hero, .ticker, .today, .site-footer, .publish-cta, #ofSec, .pl-dlg.is-full, .ap-fab { --ring: var(--cyan); }   /* dark surfaces keep the light ring */
  :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 6px; }
  i[data-lucide], svg.lucide { width: 18px; height: 18px; stroke-width: 2; flex: none; }
  .font-display, h1, h2, h3 { font-family: 'Plus Jakarta Sans', 'IBM Plex Sans Thai', Inter, sans-serif; }
  .text-grad { background: linear-gradient(90deg, #29C4F4, #00A8E8 45%, #7DD3FC); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .eyebrow { margin: 0 0 14px; font: 700 12px/1 Inter, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--sky); }
  .eyebrow-dark { color: var(--blue); }
  kbd { display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--line-2); background: #fff; font: 600 11px/1.3 Inter, sans-serif; color: var(--muted); }
  .skip-link { position: absolute; left: -9999px; }
  .skip-link:focus { left: 16px; top: 8px; z-index: 100; background: #fff; padding: 8px 12px; border-radius: 8px; }
  /* 1.3c: View As bar (an admin looking at someone else's Portal, read only) */
  .viewas-bar { position: relative; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 9px 16px; background: #FEF3C7; color: #78350F;
    border-bottom: 1px solid #F59E0B; font: 600 13.5px/1.35 Inter, 'IBM Plex Sans Thai', sans-serif; }
  .viewas-bar > svg { width: 18px; height: 18px; flex: none; }
  .viewas-bar .va-text { flex: 1; min-width: 0; }
  .viewas-bar .va-note { font-weight: 500; }
  .va-exit { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 7px 14px; border-radius: 999px; border: 0; background: #78350F; color: #fff; font: 700 13px/1 Inter, sans-serif; cursor: pointer; }
  .va-exit svg { width: 15px; height: 15px; }
  @media (max-width: 760px) { .viewas-bar .va-note { display: none; } }
  .clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

  /* ---------- buttons & fields ---------- */
  .btn-primary { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border: 0; border-radius: 999px;
    background: var(--grad-ink); color: #fff; font: 600 15px/1.2 Inter, sans-serif; cursor: pointer; text-decoration: none; box-shadow: 0 8px 24px rgba(0,168,232,.28);
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease; white-space: nowrap; }
  .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(0,168,232,.38); filter: saturate(1.1); }
  .btn-primary:disabled { opacity: .7; cursor: progress; transform: none; }
  .btn-primary .spinner { display: none; }
  .btn-primary.busy .btn-label, .btn-primary.busy .btn-icon { opacity: 0; }
  .btn-primary.busy .spinner { display: block; position: absolute; }
  .btn-sm { padding: 10px 18px; font-size: 14px; }
  .btn-outline { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; white-space: nowrap; border-radius: 999px; border: 1px solid var(--line-2); background: #fff;
    color: var(--text); font: 600 14px/1 Inter, sans-serif; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
  .btn-outline:hover { border-color: var(--cyan); color: var(--blue); background: #F0F9FF; }
  .btn-ghost { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--text); font: 600 14px/1 Inter, sans-serif; cursor: pointer; }
  .btn-ghost:hover { background: var(--mist); }
  .btn-danger { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 10px; border: 0; background: var(--bad); color: #fff; font: 600 14px/1 Inter, sans-serif; cursor: pointer; }
  .icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: inherit; cursor: pointer; }
  .icon-btn:hover { background: rgba(11,27,51,.06); }
  .icon-btn-dark { color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.18); }
  .icon-btn-dark:hover { background: rgba(255,255,255,.1); color: #fff; }
  .link-underline { color: #fff; font-weight: 600; text-decoration: none; border-bottom: 2px solid rgba(255,255,255,.5); padding-bottom: 2px; }
  .link-underline:hover { border-color: var(--sky); color: var(--sky); }
  .spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: spin .7s linear infinite; }
  .spinner.dark { border-color: rgba(26,81,164,.25); border-top-color: var(--blue); }
  @keyframes spin { to { transform: rotate(360deg); } }

  .field-label { display: block; margin: 16px 0 6px; font: 600 13px/1 Inter, sans-serif; color: var(--text); }
  .field { position: relative; display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 48px; border: 1px solid var(--line-2); border-radius: 12px; background: #fff;
    transition: border-color .15s, box-shadow .15s; color: var(--soft); }
  .field:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(0,168,232,.15); color: var(--blue); }
  .field input, .field select { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: 500 15px/1 Inter, 'IBM Plex Sans Thai', sans-serif; color: var(--text); }
  .field-sm { height: 40px; border-radius: 999px; }
  .field-sm input { font-size: 14px; }
  .field-btn { border: 0; background: transparent; color: var(--soft); cursor: pointer; display: grid; place-items: center; padding: 6px; border-radius: 8px; }
  .field-btn:hover { color: var(--blue); background: var(--mist); }
  .caps-warn { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 13px; color: var(--warn); }
  .check { display: flex; align-items: center; gap: 10px; margin: 16px 0 22px; font-size: 14px; color: var(--muted); cursor: pointer; }
  .check input { width: 16px; height: 16px; accent-color: var(--blue); }
  .alert-error { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--bad-bg); color: #991B1B; font-size: 14px; line-height: 1.45; }

  /* ---------- splash ---------- */
  .splash { position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; gap: 18px; background: #fff; transition: opacity .35s ease; }
  .splash.out { opacity: 0; pointer-events: none; }
  .splash-logo { width: 170px; animation: breathe 1.8s ease-in-out infinite; }
  .splash-bar { width: 180px; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
  .splash-bar span { display: block; width: 40%; height: 100%; background: var(--grad); animation: slide 1.1s ease-in-out infinite; }
  .splash-text { margin: 0; font-size: 13px; color: var(--muted); letter-spacing: .04em; }
  @keyframes breathe { 50% { transform: scale(1.03); opacity: .85; } }
  @keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }

  /* ---------- wave field (login + hero) ---------- */
  .wave-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

  /* ---------- APJC values (A · P · J · C) ---------- */
  .values { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .values li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
    font: 500 13px/1 Inter, sans-serif; color: rgba(255,255,255,.85); backdrop-filter: blur(6px); }
  .values b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: var(--grad-ink); color: #fff; font: 800 12px/1 'Plus Jakarta Sans', sans-serif; }
  .values li:nth-child(2) b { background: linear-gradient(135deg, #1A51A4, #0077C8); }
  .values li:nth-child(3) b { background: linear-gradient(135deg, #00A8E8, #29C4F4); color: #050B1A; }
  .values li:nth-child(4) b { background: linear-gradient(135deg, #29C4F4, #2DD4BF); color: #050B1A; }

  /* ---------- login (2026-11-11: Microsoft only by default, variant A "refined light card") ----------
     The page wears the Hero's night sky (the same radial glow at the right, navy at the bottom left) without its building
     picture (that loads after sign-in only). Wide: brand + lead on the left, the white card on the right. Narrow (<= 1023):
     one centred column, brand -> card -> lead, so on a phone the Microsoft button is in the first screen. */
  .login { position: relative; min-height: 100vh; overflow: hidden; color: #fff; background:
      radial-gradient(820px 640px at 78% 46%, rgba(0, 168, 232, .2), transparent 62%),
      radial-gradient(700px 560px at 0% 92%, rgba(30, 66, 138, .45), transparent 60%),
      linear-gradient(180deg, #050B1A 0%, #081431 100%); display: flex; flex-direction: column; }
  .login-glow { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 56px 56px; mask-image: radial-gradient(ellipse at 28% 42%, #000 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 28% 42%, #000 20%, transparent 70%); }
  .login-grid { position: relative; z-index: 1; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); grid-template-areas: "brand card" "more card";
    grid-template-rows: auto auto; column-gap: clamp(40px, 5vw, 88px); row-gap: 0; align-items: center; width: 100%; max-width: 1240px; margin: 0 auto; padding: 48px 32px; }
  .login-grid > * { min-width: 0; }   /* a long word never widens the column past the screen */
  .login-brand { grid-area: brand; align-self: end; }
  .login-more { grid-area: more; align-self: start; }
  .login-card { grid-area: card; }
  .login-brand-logo { width: 132px; margin-bottom: 30px; }
  /* a plain label (no pill, no border: nothing on the left side looks pressable), led by a short cyan rule */
  .login-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font: 700 12px/1.2 Inter, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #7DD3FC; }
  .login-eyebrow-rule { flex: none; width: 28px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #00A8E8, #2DD4BF); }
  /* "Connect. Protect. Empower." on one line, like the Hero; the size follows the column (never wider than it) */
  .login-title { margin: 0; font-size: clamp(28px, 3.2vw, 46px); line-height: 1.1; font-weight: 800; letter-spacing: -.03em; white-space: nowrap; }
  /* (play port) room for the fallback font too: until Plus Jakarta Sans has arrived (display=swap) or if it never does, sans-serif is about
     1.4 % wider and ran 4-12 px past the column at 1440-1599 px (2 px at 320). The size also follows the column (cqi: 6.85 % of it =
     the line in sans-serif with 1 % to spare); a browser without container units keeps the line above */
  .login-brand { container-type: inline-size; }
  .login-title { font-size: clamp(28px, min(3.2vw, 6.85cqi), 46px); }
  .login-lead { max-width: 520px; margin: 20px 0 24px; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.86); text-wrap: pretty; }
  .values-login { margin: 0; }
  .login-card { position: relative; justify-self: end; width: 100%; max-width: 440px; padding: 38px 38px 28px; border-radius: 24px; background: #fff; color: var(--text);
    box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255,255,255,.08), 0 0 90px -30px rgba(0, 168, 232, .55); animation: rise .5s ease both; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .login-card-logo { display: block; height: 38px; width: auto; margin-bottom: 26px; }
  .login-card-title { margin: 0; font-size: 26px; line-height: 1.2; font-weight: 800; letter-spacing: -.015em; }
  .login-card-sub { margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
  .login-card-sub b { color: var(--text); font-weight: 600; }
  .login-help { display: flex; gap: 10px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.55; color: var(--muted); }
  .login-help svg { color: var(--ok); margin-top: 1px; }
  .login-help p { margin: 0; text-wrap: pretty; }
  .login-foot { position: relative; z-index: 1; padding: 18px 32px; font-size: 12px; color: rgba(255,255,255,.62); text-align: center; }
  .login-card.shake { animation: shake .4s ease; }
  @keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
  .login-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  /* the signed-out note is news, not an error */
  #loginError.note { background: #EFF6FF; color: #1E3A8A; box-shadow: inset 0 0 0 1px #BFDBFE; }

  /* ---------- promo strip ---------- */
  .promo { height: var(--promo-h); display: flex; align-items: center; justify-content: center; gap: 12px; background: #000; color: #fff; padding: 0 12px; }
  .promo-nav { display: grid; place-items: center; border: 0; background: transparent; color: rgba(255,255,255,.75); cursor: pointer; padding: 4px; border-radius: 6px; }
  .promo-nav:hover { color: #fff; background: rgba(255,255,255,.1); }
  .promo-text { max-width: min(900px, 80vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; background: transparent; color: #fff; font: 600 13px/1 Inter, 'IBM Plex Sans Thai', sans-serif; cursor: pointer; animation: fadeIn .4s ease; }
  .promo-text:hover { color: var(--sky); }
  .promo-text .pt-dept { color: var(--sky); margin-right: 8px; }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

  /* ---------- header ---------- */
  .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
  .site-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--grad); opacity: .9; }
  .site-header.scrolled { box-shadow: 0 6px 24px rgba(11,27,51,.08); }
  .header-inner { height: var(--header-h); max-width: 1360px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 28px; }
  .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); flex: none; }
  .brand-logo { height: 32px; width: auto; }
  .brand-word { padding-left: 12px; border-left: 1px solid var(--line-2); font: 700 13px/1.1 'Plus Jakarta Sans', sans-serif; color: var(--muted); letter-spacing: .02em; white-space: nowrap; }
  .main-nav { display: flex; align-items: center; gap: 4px; flex: 1; }
  .nav-item { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; white-space: nowrap; border: 0; border-radius: 10px; background: transparent; color: var(--text);
    font: 500 14.5px/1 Inter, sans-serif; text-decoration: none; cursor: pointer; }
  .nav-item:hover, .nav-item[aria-expanded="true"] { background: var(--mist); color: var(--blue); }
  .nav-item[aria-current="page"] { color: var(--blue); font-weight: 700; }
  .nav-item[aria-current="page"]::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -14px; height: 3px; border-radius: 3px 3px 0 0; background: var(--grad); }
  .nav-ico { width: 16px !important; height: 16px !important; color: var(--cyan); }
  .nav-caret { width: 15px !important; height: 15px !important; transition: transform .2s; }
  [aria-expanded="true"] > .nav-caret { transform: rotate(180deg); }
  .header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
  .search-pill { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 8px 0 14px; white-space: nowrap; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--muted); font: 500 14px/1 Inter, sans-serif; cursor: pointer; }
  .search-pill:hover { border-color: var(--cyan); color: var(--blue); }
  .avatar-btn { display: flex; align-items: center; gap: 10px; padding: 4px 8px 4px 4px; border: 1px solid transparent; border-radius: 999px; background: transparent; cursor: pointer; color: var(--text); }
  .avatar-btn:hover, .avatar-btn[aria-expanded="true"] { background: var(--mist); border-color: var(--line); }
  .avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: var(--grad-ink); color: #fff; font: 700 13px/1 'Plus Jakarta Sans', sans-serif; letter-spacing: .02em; flex: none; }
  .avatar-lg { width: 46px; height: 46px; font-size: 16px; }
  .avatar-name { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; font: 600 13.5px/1 Inter, 'IBM Plex Sans Thai', sans-serif; max-width: 160px; }
  .avatar-name > span:first-child { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .role-chip { display: inline-block; padding: 2px 7px; border-radius: 999px; background: var(--grad-soft); color: var(--blue); font: 700 10px/1.3 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
  .role-chip.admin { background: #EDE9FE; color: #6D28D9; }
  .role-chip.hr_editor { background: #FCE7F3; color: #BE185D; }
  .role-chip.editor { background: #E0F2FE; color: #0369A1; }
  .profile { position: relative; }
  .menu { position: absolute; right: 0; top: calc(100% + 10px); width: 300px; padding: 10px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); animation: pop .16s ease; z-index: 60; }
  @keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
  .menu-head { display: flex; gap: 12px; align-items: center; padding: 8px 8px 14px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
  .menu-head p { margin: 0; }
  .menu-label { margin: 6px 8px; font: 700 11px/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
  .menu-note { display: flex; gap: 8px; align-items: flex-start; margin: 4px 8px 8px; padding: 8px 10px; border-radius: 10px; background: var(--mist); font-size: 12.5px; line-height: 1.4; color: var(--muted); }
  .menu-note svg { width: 15px; height: 15px; color: var(--blue); margin-top: 1px; }
  .menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: 500 14px/1 Inter, sans-serif; cursor: pointer; text-align: left; }
  .menu-item:hover { background: var(--mist); }
  .menu-item.danger { color: var(--bad); }
  .access-list { list-style: none; margin: 0 0 8px; padding: 0 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .access-list li { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
  .access-list li.yes { color: var(--text); }
  .access-list li svg { width: 15px; height: 15px; }
  .access-list li.yes svg { color: var(--ok); }

  /* ---------- mega menu (Palo Alto style) ---------- */
  .mega { position: absolute; left: 0; right: 0; top: 100%; background: transparent; padding: 0 24px; animation: pop .16s ease; }
  .mega-inner { max-width: 1312px; margin: 0 auto; display: grid; grid-template-columns: 230px 1fr; background: #fff; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 18px 18px; box-shadow: var(--shadow-lg); overflow: hidden; }
  .mega-cats { list-style: none; margin: 0; padding: 14px 10px; background: #FAFBFD; border-right: 1px solid var(--line); }
  .mega-cat { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 11px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: 500 14px/1.2 Inter, sans-serif; cursor: pointer; text-align: left; }
  .mega-cat:hover, .mega-cat[aria-selected="true"] { background: #fff; color: var(--blue); box-shadow: inset 3px 0 0 var(--cyan), 0 1px 3px rgba(11,27,51,.06); }
  .mega-cat .count { font-size: 11px; color: var(--soft); }
  .mega-cat.all { margin-top: 10px; font-weight: 700; }
  .mega-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* (redesign 2026-11-09) every card the same: icon + short name + badge + status on one row, the name on one line, 2 lines of description */
  .mega-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 20px 22px 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; background: #fff; cursor: pointer; text-align: left; border-top: 0; border-left: 0; font: inherit; transition: background .15s; }
  .mega-card:hover, .mega-card:focus-visible { background: #F5FAFF; }
  .mega-card:nth-child(4n) { border-right: 0; }
  .mega-top { display: flex; align-items: center; gap: 10px; height: 36px; margin-bottom: 14px; min-width: 0; }
  .mega-ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: #EEF6FF; color: var(--blue); transition: background .15s, color .15s; }
  .mega-ico svg { width: 18px; height: 18px; }
  .mega-card:hover .mega-ico, .mega-card:focus-visible .mega-ico { background: var(--grad); color: #fff; }
  .mega-short { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 12.5px/1 'Plus Jakarta Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); }
  .mega-top .badge-new { flex: none; }
  .mega-st { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; margin-left: auto; }
  .mega-st.locked { color: var(--soft); }
  .mega-st.locked svg { width: 15px; height: 15px; }
  .mega-title { display: block; margin: 0 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 15px/1.35 Inter, 'IBM Plex Sans Thai', sans-serif; }
  .mega-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3em; margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
  .mega-card.locked .mega-ico { background: #F1F5F9; color: var(--soft); }
  .mega-card.locked .mega-title, .mega-card.locked .mega-desc { opacity: .7; }
  .badge-new { display: inline-block; padding: 2px 6px; border-radius: 4px; background: #FFF1EC; color: #EA580C; font: 800 9.5px/1.2 Inter, sans-serif; letter-spacing: .08em; }

  /* ---------- hero ---------- */
  .hero { position: relative; overflow: hidden; color: #fff; background:
      radial-gradient(900px 520px at 78% 45%, rgba(0,168,232,.22), transparent 60%),
      radial-gradient(700px 500px at 0% 100%, rgba(30,66,138,.5), transparent 60%),
      linear-gradient(180deg, #050B1A 0%, #081431 100%); }
  .hero-inner { position: relative; z-index: 1; max-width: 1360px; margin: 0 auto; padding: 72px 24px 64px 72px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; min-height: 560px; }
  /* (redesign 2026-11-09) "Connect. Protect. Empower." stays on one line: the size follows the column */
  .hero-title { margin: 0; font-size: clamp(24px, 3.15vw, 50px); line-height: 1.1; font-weight: 800; letter-spacing: -.03em; white-space: nowrap; }
  .hero-lead { max-width: 560px; margin: 20px 0 26px; font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.78); }
  .hero-ctas { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
  .hero-stats { display: flex; flex-wrap: wrap; gap: 28px; margin: 38px 0 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); }
  .hero-stats div { min-width: 110px; }
  .hero-stats dt { order: 2; margin-top: 6px; font-size: 12.5px; color: rgba(255,255,255,.6); }
  .hero-stats dd { margin: 0; font: 800 28px/1 'Plus Jakarta Sans', sans-serif; color: #fff; }
  .hero-stats dd small { font-size: 14px; font-weight: 700; color: var(--sky); margin-left: 4px; }
  .hero-art { position: relative; display: grid; place-items: center; min-height: 460px; }

  /* (1.3c; the SI Hub head since 2026-11-11) an isometric scene drawn by PageJavascript (renderIso). Glass platforms on the Portal navy, joined to the
     APJC values at the centre by circuits. Gradients are set as attributes in the SVG; here only flat colours and motion. */
  .iso-wrap { width: min(100%, 580px); display: grid; gap: 2px; }
  .iso-art { position: relative; width: 100%; -webkit-tap-highlight-color: transparent; }
  .iso-svg { display: block; width: 100%; height: auto; overflow: visible; }
  .iso-svg text { pointer-events: none; user-select: none; }
  .iso-cap { min-height: 44px; margin: -8px auto 0; max-width: 440px; text-align: center; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.66); }
  .iso-cap b { display: block; margin-bottom: 2px; font: 800 11.5px/1.4 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--sky); }

  /* slabs: dark left face, lighter right face, a lit front edge, the top (glass on the top slab) */
  .iso-sl { fill: #0A1734; }
  .iso-sr { fill: #13306A; }
  .iso-edge { fill: none; stroke: #29C4F4; stroke-width: 1.2; stroke-opacity: .5; stroke-linejoin: round; stroke-linecap: round; }
  .iso-tp { stroke: rgba(125,227,255,.42); stroke-width: 1; }
  .iso-tp:not([fill]) { fill: #13306A; }
  .iso-s1 .iso-tp:not([fill]) { fill: #0F2552; }
  .iso-s2 .iso-tp:not([fill]) { fill: #16397A; }
  .iso-s2 .iso-sl { fill: #0D2148; } .iso-s2 .iso-sr { fill: #18408A; }
  .iso-s3 .iso-sl { fill: #123A78; } .iso-s3 .iso-sr { fill: #1E5BA8; }
  .iso-s3 .iso-tp { stroke: rgba(191,243,255,.75); }
  .iso-s3 .iso-edge { stroke: #7DE3FF; stroke-opacity: .8; stroke-width: 1.4; }
  .iso-shadow { fill: #01060F; opacity: .55; }
  .iso-halo { fill: #29C4F4; opacity: .38; transition: opacity .4s; }
  .iso-node.on .iso-halo { opacity: .75; }
  .iso-led { fill: #2DD4BF; animation: isoBlink 2.4s ease-in-out infinite; }
  @keyframes isoBlink { 50% { opacity: .25; } }

  /* circuits: two wires per platform, a packet each way */
  .iso-wire { fill: none; stroke: #29C4F4; stroke-opacity: .26; stroke-width: 1.4; transition: stroke-opacity .3s; }
  .iso-pkt { fill: none; stroke: #BFF3FF; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 7 93; stroke-dashoffset: 100; animation: isoPkt 3.4s linear infinite; opacity: .9; }
  .iso-pkt-r { animation-direction: reverse; stroke: #5BE3D0; }
  @keyframes isoPkt { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
  .iso-via { fill: #0A1734; stroke: #29C4F4; stroke-width: 1.4; }
  .iso-trace { transition: opacity .3s; }
  .iso-trace.on .iso-wire { stroke: #7DE3FF; stroke-opacity: .9; }
  .iso-trace.on .iso-pkt { animation-duration: 1.2s; stroke: #fff; }
  .val-on .iso-wire { stroke-opacity: .55; }

  /* platforms: float gently; the one you point at lifts, brightens and lights its circuit, the others step back */
  .iso-node, .iso-tile { cursor: pointer; outline: none; }
  .iso-float { animation: isoFloat 6s ease-in-out infinite; }
  @keyframes isoFloat { 50% { transform: translateY(-5px); } }
  .iso-lift, .iso-tlift { transition: transform .4s cubic-bezier(.2,.8,.2,1), filter .4s, opacity .4s; }
  .iso-node.on .iso-lift { transform: translateY(-14px); filter: brightness(1.18) drop-shadow(0 12px 16px rgba(41,196,244,.3)); }
  .iso-node.on .iso-edge { stroke: #BFF3FF; stroke-opacity: 1; }
  .has-on .iso-node:not(.on) .iso-lift, .has-on .iso-trace:not(.on) { opacity: .42; }
  .iso-label { font: 700 12.5px/1 Inter, sans-serif; letter-spacing: .09em; text-transform: uppercase; fill: rgba(255,255,255,.8); text-anchor: middle; transition: fill .3s, opacity .3s; }
  .iso-node.on .iso-label { fill: #7DE3FF; }
  .has-on .iso-node:not(.on) .iso-label { opacity: .45; }
  .iso-node:focus-visible .iso-s3 .iso-tp { stroke: #fff; stroke-width: 2.4; }

  /* the art on each platform */
  .ic-bob { animation: isoBob 4.2s ease-in-out infinite; }
  @keyframes isoBob { 50% { transform: translateY(-4px); } }
  .ic-shadow { fill: #7DE3FF; opacity: .2; filter: blur(3px); }
  .ic-line { fill: none; stroke: #7DE3FF; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .ic-thin { stroke: rgba(255,255,255,.72); stroke-width: 1.3; }
  .ic-drop { stroke-dasharray: 3 4; animation: isoDrip 1.4s linear infinite; }
  @keyframes isoDrip { to { stroke-dashoffset: -14; } }
  .ic-chip { fill: #0F2B5E; stroke: #29C4F4; stroke-width: 1; }
  .ic-glass { stroke: rgba(191,243,255,.85); stroke-width: 1.4; stroke-linejoin: round; }
  .ic-mesh, .ic-net { fill: none; stroke: rgba(191,243,255,.5); stroke-width: 1; }
  .ic-dot { fill: #BFF3FF; }
  .ic-twinkle { animation: isoTwinkle 2.8s ease-in-out infinite; }
  @keyframes isoTwinkle { 50% { opacity: .3; } }
  .ic-core { fill: #fff; }
  .ic-badge rect { fill: #2DD4BF; }
  .ic-badge text, .ic-ai { font: 800 8.5px/1 Inter, sans-serif; text-anchor: middle; }
  .ic-badge text { fill: #062A33; }
  .ic-ai { fill: #fff; font-size: 9.5px; }
  .ic-shield { stroke: rgba(125,227,255,.9); stroke-width: 1.4; stroke-linejoin: round; }
  .ic-shield-hl { fill: rgba(255,255,255,.1); }
  .ic-keyring, .ic-keyline { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; }
  .ic-srv .iso-sl { fill: #0C1F47; } .ic-srv .iso-sr { fill: #17397A; } .ic-srv .iso-tp:not([fill]) { fill: #1F4E98; }
  .ic-srv .iso-edge { stroke-opacity: .7; }
  .ic-srv-led { stroke: #29C4F4; stroke-width: 1.8; stroke-linecap: round; }
  .ic-led { fill: #2DD4BF; animation: isoBlink 1.8s ease-in-out infinite; }
  .ic-chipslab .iso-sl { fill: #0C2557; } .ic-chipslab .iso-sr { fill: #173E86; } .ic-chipslab .iso-tp { stroke: #7DE3FF; }
  .ic-pins { stroke: #7DE3FF; stroke-width: 1.4; stroke-linecap: round; }
  .ic-panel { fill: rgba(10,30,70,.88); stroke: rgba(125,227,255,.8); stroke-width: 1.2; }
  .ic-panel-bar { fill: rgba(41,196,244,.55); }
  .ic-bar { fill: #2DD4BF; }
  .ic-grow { transform-box: fill-box; transform-origin: bottom; animation: isoGrow 2.4s ease-in-out infinite; }
  @keyframes isoGrow { 50% { transform: scaleY(.5); } }
  .ic-hub { fill: #13306A; stroke: rgba(125,227,255,.7); stroke-width: 1.2; }
  .ic-hub-in { fill: #29C4F4; opacity: .75; }
  .ic-bezel-back { fill: #0A1734; }
  .ic-bezel { stroke: rgba(255,255,255,.65); stroke-width: 1; }
  .ic-face { fill: #0B2350; stroke: rgba(41,196,244,.6); stroke-width: 1; }
  .ic-ticks { stroke: #BFF3FF; stroke-width: 1.4; stroke-linecap: round; }
  .ic-needle { transform-box: fill-box; transform-origin: center; animation: isoNeedle 6s ease-in-out infinite; }
  @keyframes isoNeedle { 0%, 100% { transform: rotate(-16deg); } 40% { transform: rotate(22deg); } 70% { transform: rotate(6deg); } }
  .ic-needle-n { fill: #fff; }
  .ic-needle-s { fill: #29C4F4; }
  .ic-pin { fill: #fff; stroke: #1A51A4; stroke-width: 1.5; }

  /* the centre: four value tiles and the hub */
  .iso-tl .iso-sl { fill: #0D2858; } .iso-tl .iso-sr { fill: #15488F; }
  .iso-tl .iso-edge { stroke: #BFF3FF; stroke-opacity: .85; }
  .iso-tl .iso-tp { stroke: rgba(255,255,255,.6); stroke-width: 1.1; }
  .iso-tsheen { pointer-events: none; }
  .iso-tshadow { fill: #01060F; opacity: .45; }
  .iso-letter { font: 800 36px/1 'Plus Jakarta Sans', sans-serif; letter-spacing: -.02em; fill: #fff; text-anchor: middle; paint-order: stroke; stroke: rgba(6,20,50,.28); stroke-width: 3px; }
  .iso-word { font: 700 7.4px/1 Inter, sans-serif; letter-spacing: .04em; text-transform: uppercase; fill: #fff; text-anchor: middle; }
  .iso-tile.on .iso-tlift { transform: translateY(-7px); filter: brightness(1.15); }
  .iso-tile:focus-visible .iso-tsheen { stroke: #fff; stroke-width: 2; }
  .iso-core { pointer-events: none; }
  .iso-core-ring { fill: none; stroke: #BFF3FF; stroke-width: 1.5; }
  .iso-core-pulse { fill: #29C4F4; transform-box: fill-box; transform-origin: center; animation: isoPulse 2.6s ease-out infinite; }
  @keyframes isoPulse { from { transform: scale(.6); opacity: .6; } to { transform: scale(2); opacity: 0; } }
  .iso-core-dot { fill: #fff; filter: drop-shadow(0 0 6px #29C4F4); }

  /* ---------- ticker ---------- */
  .ticker { position: relative; z-index: 1; display: flex; align-items: stretch; height: 46px; background: #071229; border-top: 1px solid rgba(41,196,244,.18); border-bottom: 1px solid rgba(41,196,244,.18); color: #fff; overflow: hidden; }
  .ticker-label { display: flex; align-items: center; gap: 8px; padding: 0 18px 0 24px; background: #0B1D45; font: 800 11.5px/1 Inter, sans-serif; letter-spacing: .2em; color: #fff; flex: none; box-shadow: 8px 0 18px #071229; z-index: 1; }
  .ticker-label svg { width: 15px; height: 15px; color: #FBBF24; }
  .live-dot { width: 8px; height: 8px; border-radius: 99px; background: #22C55E; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: pulse 1.8s infinite; }
  .live-dot.warn { background: #F59E0B; } .live-dot.bad { background: #EF4444; }
  @keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
  .ticker-viewport { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
  .ticker-track { display: inline-flex; align-items: center; height: 100%; gap: 0; white-space: nowrap; flex-wrap: nowrap; animation: marquee var(--marquee-s, 60s) linear infinite; }
  .ticker-half { display: inline-flex; align-items: center; height: 100%; flex: none; }
  .ticker:hover .ticker-track { animation-play-state: paused; }
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .tk { display: inline-flex; align-items: center; gap: 8px; padding: 0 22px; font-size: 13px; color: rgba(255,255,255,.82); border: 0; border-right: 1px solid rgba(255,255,255,.08); background: none; font-family: Inter, 'IBM Plex Sans Thai', sans-serif; text-decoration: none; height: 100%; }
  button.tk, a.tk { cursor: pointer; }
  button.tk:hover, a.tk:hover { color: #fff; background: rgba(255,255,255,.05); }
  .tk b { color: #fff; font-weight: 700; }
  .tk svg { width: 15px; height: 15px; color: var(--sky); }
  .tk .tk-dept { font: 800 10.5px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--dc, var(--sky)); filter: brightness(1.6) saturate(.8); }
  .dot { display: inline-block; width: 8px; height: 8px; border-radius: 99px; background: var(--unk); flex: none; }
  .dot.up { background: #22C55E; } .dot.degraded { background: #F59E0B; } .dot.down { background: #EF4444; } .dot.unknown { background: var(--unk); }

  /* ---------- sections ---------- */
  .section-inner { max-width: 1360px; margin: 0 auto; padding: 0 24px; }
  .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
  .section-title { margin: 0; font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; letter-spacing: -.02em; }
  .section-sub { margin: 8px 0 0; color: var(--muted); font-size: 15px; max-width: 640px; }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .chips-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
  .chips-scroll::-webkit-scrollbar { display: none; }
  .chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--muted); font: 600 13px/1 Inter, 'IBM Plex Sans Thai', sans-serif; cursor: pointer; transition: all .15s; white-space: nowrap; flex: none; }
  .chip:hover { color: var(--blue); border-color: var(--cyan); }
  .chip[aria-selected="true"] { background: var(--text); border-color: var(--text); color: #fff; }
  .chip .n { font-weight: 700; opacity: .6; }
  .chip svg { width: 14px; height: 14px; }
  .chip .cdot { width: 8px; height: 8px; border-radius: 99px; background: var(--dc, var(--blue)); }
  .seg { display: inline-flex; padding: 3px; border-radius: 999px; background: #fff; border: 1px solid var(--line-2); }
  .seg button { padding: 7px 13px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 600 13px/1 Inter, sans-serif; cursor: pointer; white-space: nowrap; }
  .seg button:hover { color: var(--blue); }
  .seg button[aria-selected="true"] { background: var(--grad-ink); color: #fff; box-shadow: 0 4px 12px rgba(0,168,232,.25); }
  .empty { padding: 40px; text-align: center; color: var(--muted); border: 1px dashed var(--line-2); border-radius: var(--radius); background: #fff; }
  .skeleton { border-radius: var(--radius); background: linear-gradient(90deg, #EEF2F7 25%, #F7F9FC 37%, #EEF2F7 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; }
  @keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
  .banner-warn { display: flex; gap: 10px; align-items: center; padding: 12px 16px; margin-bottom: 18px; border-radius: 12px; background: var(--warn-bg); color: #92400E; font-size: 14px; }

  /* ---------- APJC Newsroom ---------- */
  .newsroom { padding: 64px 0 72px; background: radial-gradient(1200px 400px at 50% 0%, rgba(0,168,232,.07), transparent 70%), var(--mist); }
  .nr-toolbar { display: flex; flex-direction: column-reverse; gap: 14px; margin-bottom: 28px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
  .nr-toolbar > .chips-scroll { flex-wrap: wrap; overflow: visible; }
  .nr-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .nr-search { width: 230px; }
  .dept-chip { --dc: var(--blue); display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px; font: 700 11.5px/1.2 Inter, 'IBM Plex Sans Thai', sans-serif; letter-spacing: .02em;
    background: color-mix(in srgb, var(--dc) 11%, #fff); color: color-mix(in srgb, var(--dc) 82%, #000); white-space: nowrap; }
  .dept-chip::before { content: ''; width: 7px; height: 7px; border-radius: 99px; background: var(--dc); }
  .type-badge { display: inline-flex; align-items: center; gap: 5px; font: 700 11px/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
  .type-badge svg { width: 13px; height: 13px; }
  .type-badge.event { color: #B45309; } .type-badge.announcement { color: #BE185D; } .type-badge.policy { color: #6D28D9; }
  .pin-tag { display: inline-flex; align-items: center; gap: 4px; color: #B45309; font: 700 11px/1 Inter, sans-serif; }
  .pin-tag svg { width: 13px; height: 13px; }
  .draft-tag { padding: 2px 7px; border-radius: 5px; background: #F1F5F9; color: var(--muted); font-weight: 700; font-size: 11px; }

  .nr-top { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 24px; margin-bottom: 36px; }
  .nr-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
  .nr-h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 700 13px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .nr-h3::after { content: ''; flex: 1; height: 1px; background: var(--line); }
  .nr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .nr-grid.wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nr-count { margin: 0 0 16px; font-size: 14px; color: var(--muted); }
  .nr-count button { border: 0; background: none; color: var(--blue); font-weight: 600; cursor: pointer; padding: 0; margin-left: 8px; }
  .more-row { display: flex; justify-content: center; margin-top: 26px; }

  .story { --dc: var(--blue); position: relative; display: flex; flex-direction: column; border-radius: 18px; background: #fff; border: 1px solid var(--line); overflow: hidden; box-shadow: var(--shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s; isolation: isolate; }
  .story:hover { transform: translateY(-3px); box-shadow: 0 22px 46px rgba(11,27,51,.13); border-color: color-mix(in srgb, var(--dc) 35%, var(--line)); }
  .story-open { position: absolute; inset: 0; z-index: 2; border: 0; background: transparent; cursor: pointer; border-radius: inherit; }
  .story-open:focus-visible { outline: 3px solid var(--cyan); outline-offset: -3px; }
  .story-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: color-mix(in srgb, var(--dc) 85%, #0A1630); }
  .story-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
  .story:hover .story-media img { transform: scale(1.04); }
  .story-art { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.92);
    background: radial-gradient(120% 90% at 85% 10%, rgba(255,255,255,.22), transparent 55%), linear-gradient(140deg, color-mix(in srgb, var(--dc) 92%, #000), color-mix(in srgb, var(--dc) 55%, #00A8E8)); }
  .story-art::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.4px); background-size: 18px 18px; mask-image: linear-gradient(120deg, transparent 20%, #000 80%); -webkit-mask-image: linear-gradient(120deg, transparent 20%, #000 80%); }
  .story-art svg { position: relative; width: 44px !important; height: 44px !important; stroke-width: 1.6; opacity: .95; }
  .story-art .art-name { position: absolute; left: 18px; bottom: 14px; font: 800 12px/1 'Plus Jakarta Sans', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.75); }
  .story-date { position: absolute; left: 14px; top: 14px; z-index: 1; display: grid; place-items: center; width: 58px; padding: 7px 0 8px; border-radius: 12px; background: #fff; color: var(--text); box-shadow: 0 8px 20px rgba(0,0,0,.2); }
  .story-date b { font: 800 22px/1 'Plus Jakarta Sans', sans-serif; }
  .story-date span { font: 700 10.5px/1.3 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #B45309; }
  .story-pin { position: absolute; right: 12px; top: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; background: rgba(5,11,26,.65); color: #FDE68A; font: 700 11px/1 Inter, sans-serif; backdrop-filter: blur(6px); }
  .story-pin svg { width: 12px; height: 12px; }
  .story-body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; flex: 1; }
  .story-kicker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .story-title { margin: 0; font: 700 18px/1.35 'Plus Jakarta Sans', 'IBM Plex Sans Thai', sans-serif; letter-spacing: -.01em; color: var(--text); }
  .story:hover .story-title { color: color-mix(in srgb, var(--dc) 75%, #000); }
  .story-sum { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
  .story-meta { margin-top: auto; padding-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--soft); }
  .story-meta .sep { width: 3px; height: 3px; border-radius: 99px; background: var(--line-2); }
  .story-event { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #92400E; font-weight: 600; }
  .story-event svg { width: 15px; height: 15px; }
  .story.lead .story-media { aspect-ratio: 16 / 8.4; }
  .story.lead .story-body { padding: 24px 28px 26px; gap: 12px; }
  .story.lead .story-title { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.25; }
  .story.lead .story-sum { font-size: 15.5px; }
  .story.lead .story-art svg { width: 72px !important; height: 72px !important; }

  .nr-side-stack { display: grid; gap: 14px; align-content: start; }
  .story.mini { flex-direction: row; align-items: stretch; border-radius: 16px; }
  .story.mini .story-media { aspect-ratio: auto; width: 132px; flex: none; }
  .story.mini .story-art svg { width: 30px !important; height: 30px !important; }
  .story.mini .story-art .art-name { display: none; }
  .story.mini .story-body { padding: 14px 16px; gap: 7px; }
  .story.mini .story-title { font-size: 15px; }
  .story.mini .story-date { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 50px; }
  .story.mini .story-date b { font-size: 18px; }

  .nr-side { display: grid; gap: 18px; position: sticky; top: calc(var(--header-h) + 20px); }
  .side-card { padding: 20px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
  /* (redesign 2026-11-09) Upcoming events + Policies & guidelines in one row under the top stories */
  .nr-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 28px 0 34px; align-items: stretch; }
  .nr-pair .side-card { display: flex; flex-direction: column; box-shadow: var(--shadow); }
  .nr-pair .ev-list, .nr-pair .pol-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
  .nr-pair .side-more { margin-top: auto; padding-top: 12px; }
  .side-title { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font: 700 13px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
  .side-title svg { color: var(--cyan); width: 16px; height: 16px; }
  .side-empty { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
  .ev-list, .pol-list, .team-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  .ev-item, .pol-item { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; width: 100%; padding: 8px; border: 0; border-radius: 12px; background: transparent; text-align: left; cursor: pointer; font: inherit; color: inherit; }
  .ev-item:hover, .pol-item:hover { background: var(--mist); }
  .ev-date { display: grid; place-items: center; height: 52px; border-radius: 12px; background: #FFF7ED; color: #9A3412; }
  .ev-date b { font: 800 19px/1 'Plus Jakarta Sans', sans-serif; }
  .ev-date span { font: 700 10px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
  .ev-item h4, .pol-item h4 { margin: 0 0 3px; font: 600 14px/1.35 Inter, 'IBM Plex Sans Thai', sans-serif; }
  .ev-item p, .pol-item p { margin: 0; font-size: 12.5px; color: var(--muted); }
  .pol-ico { display: grid; place-items: center; height: 52px; border-radius: 12px; background: #F5F3FF; color: #6D28D9; }
  .team-list { grid-template-columns: 1fr 1fr; gap: 8px; }
  .team-btn { --dc: var(--blue); display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: #fff; cursor: pointer; text-align: left; font: 600 12.5px/1.25 Inter, 'IBM Plex Sans Thai', sans-serif; color: var(--text); }
  .team-btn:hover { border-color: var(--dc); background: color-mix(in srgb, var(--dc) 6%, #fff); }
  .team-btn .ti { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: color-mix(in srgb, var(--dc) 14%, #fff); color: var(--dc); flex: none; }
  .team-btn .ti svg { width: 15px; height: 15px; }
  .team-btn small { display: block; font-weight: 500; color: var(--soft); font-size: 11.5px; }
  .publish-cta { background: linear-gradient(160deg, #0A1630, #0E2559); color: #fff; border: 0; }
  .publish-cta .side-title { color: #fff; }
  .publish-cta p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.75); }

  /* ---------- Tech & Cyber Watch ---------- */
  .watch { position: relative; padding: 64px 0 56px; color: #fff; background:
      radial-gradient(900px 420px at 90% 0%, rgba(0,168,232,.16), transparent 60%), radial-gradient(800px 500px at 0% 100%, rgba(124,58,237,.14), transparent 60%),
      linear-gradient(180deg, #071229, #050B1A); }
  .watch-sub { color: rgba(255,255,255,.65); }
  .watch-meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: rgba(255,255,255,.55); }
  .lanes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .lane { display: flex; flex-direction: column; min-width: 0; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); overflow: hidden; }
  .lane-head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 14px; border-bottom: 1px solid rgba(255,255,255,.07); }
  .lane-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; flex: none; background: rgba(41,196,244,.14); color: var(--sky); }
  .lane.cyber .lane-ico { background: rgba(244,114,182,.14); color: #F9A8D4; }
  .lane-ico svg { width: 17px; height: 17px; }
  .lane-head h3 { margin: 0; font: 700 14.5px/1.2 'Plus Jakarta Sans', sans-serif; }
  .lane-head p { margin: 3px 0 0; font: 500 12px/1 'IBM Plex Sans Thai', Inter, sans-serif; color: rgba(255,255,255,.5); }
  .lane-lead { display: block; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.07); }
  .lane-lead .ll-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, #0E1F45, #1A51A4); }
  .lane.cyber .lane-lead .ll-media { background: linear-gradient(135deg, #1E1B4B, #831843); }
  .lane-lead .ll-noimg { position: absolute; inset: 0; display: grid; place-items: center; font: 800 34px/1 'Plus Jakarta Sans', sans-serif; letter-spacing: .06em; color: rgba(255,255,255,.28);
    background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.4px); background-size: 16px 16px; }
  .lane-lead img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, opacity .3s; }
  .lane-lead:hover img { transform: scale(1.04); }
  .lane-lead .ll-src { position: absolute; left: 12px; bottom: 10px; padding: 4px 8px; border-radius: 6px; background: rgba(5,11,26,.75); font: 700 11px/1 Inter, sans-serif; letter-spacing: .04em; backdrop-filter: blur(4px); }
  .lane-lead .ll-body { padding: 14px 16px 16px; }
  .lane-lead h4 { margin: 0 0 6px; font: 600 15px/1.45 Inter, 'IBM Plex Sans Thai', sans-serif; }
  .lane-lead:hover h4 { color: var(--sky); }
  .lane-lead p { margin: 0; font-size: 12px; color: rgba(255,255,255,.5); }
  .lane-list { list-style: none; margin: 0; padding: 6px 8px 10px; display: grid; }
  .lane-item { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 10px 8px; border-radius: 10px; color: rgba(255,255,255,.88); text-decoration: none; }
  .lane-item:hover { background: rgba(255,255,255,.06); color: #fff; }
  .lane-item h4 { margin: 0 0 4px; font: 500 13.5px/1.45 Inter, 'IBM Plex Sans Thai', sans-serif; }
  .lane-item p { margin: 0; font-size: 11.5px; color: rgba(255,255,255,.45); }
  .src-badge { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #fff; font: 800 10px/1 'Plus Jakarta Sans', sans-serif; }
  .lane-empty { padding: 24px 16px; font-size: 13px; color: rgba(255,255,255,.5); }
  .kev-band { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: center; margin-top: 22px; padding: 22px 24px; border-radius: 18px;
    background: linear-gradient(110deg, rgba(124,58,237,.18), rgba(219,39,119,.12) 40%, rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.09); }
  .kev-head p { margin: 0; font: 700 12px/1.3 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #F9A8D4; display: flex; gap: 8px; align-items: center; }
  .kev-head p svg { width: 16px; height: 16px; }
  .kev-head b { display: block; margin: 10px 0 4px; font: 800 38px/1 'Plus Jakarta Sans', sans-serif; }
  .kev-head span { font-size: 12.5px; color: rgba(255,255,255,.6); }
  .kev-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
  .kev-item { display: block; padding: 12px 13px; border-radius: 12px; background: rgba(5,11,26,.45); border: 1px solid rgba(255,255,255,.07); color: #fff; text-decoration: none; font-size: 12px; line-height: 1.45; min-width: 0; }
  .kev-item:hover { border-color: rgba(249,168,212,.5); }
  .kev-item .cve { display: block; font: 700 12.5px/1.2 'Plus Jakarta Sans', sans-serif; color: var(--sky); margin-bottom: 4px; }
  .kev-item .vp { display: block; color: rgba(255,255,255,.78); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kev-item .rw { display: inline-block; margin-top: 6px; padding: 1px 6px; border-radius: 4px; background: rgba(239,68,68,.25); color: #FCA5A5; font-size: 10px; font-weight: 700; }
  .kev-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; color: var(--sky); text-decoration: none; }
  .watch-sources { margin: 18px 0 0; font-size: 12px; color: rgba(255,255,255,.45); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
  .watch-sources span { display: inline-flex; align-items: center; gap: 6px; }

  /* ---------- Applications view ---------- */
  .apps-hero { color: #fff; padding: 46px 0 40px; background: radial-gradient(900px 400px at 85% 0%, rgba(0,168,232,.22), transparent 60%), linear-gradient(180deg, #050B1A, #0A1630); }
  .apps-hero-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
  .apps-hero-title { margin: 0; font-size: clamp(30px, 3.6vw, 44px); font-weight: 800; letter-spacing: -.02em; }
  .apps-hero-sub { margin: 10px 0 0; color: rgba(255,255,255,.7); font-size: 15.5px; }
  .sys-summary { display: flex; gap: 12px; flex-wrap: wrap; }
  .sys-pill { display: grid; gap: 4px; min-width: 132px; padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
  .sys-pill span { font-size: 12px; color: rgba(255,255,255,.6); }
  .sys-pill b { font: 800 20px/1 'Plus Jakarta Sans', sans-serif; }
  .apps { padding: 40px 0 64px; }
  .apps-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
  .apps-toolbar > .chips { flex: 1; min-width: 0; }
  .apps-filter { width: 260px; }

  /* ---------- bento grid ---------- */
  .bento-group { margin-bottom: 34px; }
  .bento-head { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 700 13px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .bento-head::after { content: ''; flex: 1; height: 1px; background: var(--line); }
  .bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(168px, auto); grid-auto-flow: dense; gap: 16px; }
  .app-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
    color: var(--text); text-align: left; cursor: pointer; font: inherit; overflow: hidden; isolation: isolate; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
  .app-card::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: var(--grad); opacity: 0; transition: opacity .2s;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1; }
  .app-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(11,27,51,.12); border-color: transparent; }
  .app-card:hover::before { opacity: 1; }
  .app-card.wide { grid-column: span 2; }
  .app-card.hero-card { grid-column: span 2; grid-row: span 2; background:
      radial-gradient(420px 260px at 100% 0%, rgba(0,168,232,.28), transparent 70%), linear-gradient(160deg, #0A1630, #0E2559); color: #fff; border-color: transparent; padding: 28px; }
  .app-card.hero-card .app-desc { color: rgba(255,255,255,.75); font-size: 15px; max-width: 420px; }
  .app-card.hero-card .app-title { font-size: 24px; }
  .app-card.hero-card .app-foot { color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.12); }
  .app-card.hero-card .app-short { color: var(--sky); }
  .app-card.hero-card .fav-btn { color: rgba(255,255,255,.6); }
  .app-open { position: absolute; inset: 0; z-index: 0; border: 0; background: transparent; cursor: pointer; border-radius: inherit; }
  .app-card > :not(.app-open) { position: relative; z-index: 1; pointer-events: none; }
  .app-card .fav-btn, .app-card .status-pill { pointer-events: auto; }
  .app-card .status-pill { position: absolute; }
  .app-top { display: flex; align-items: center; gap: 12px; }
  .app-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--grad-soft); color: var(--blue); flex: none; }
  .app-icon svg { width: 22px; height: 22px; }
  .app-card.sso .app-icon, .app-card.hero-card .app-icon { background: var(--grad); color: #fff; box-shadow: 0 8px 18px rgba(0,168,232,.3); }
  .app-card.hero-card .app-icon { width: 56px; height: 56px; border-radius: 16px; }
  .app-short { font: 800 12px/1 'Plus Jakarta Sans', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--navy); }
  .app-title { margin: 0; font: 700 16px/1.3 'Plus Jakarta Sans', 'IBM Plex Sans Thai', sans-serif; letter-spacing: -.01em; }
  .app-desc { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); flex: 1; }
  .app-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 12.5px; color: var(--muted); }
  .app-foot .how { display: inline-flex; align-items: center; gap: 6px; }
  .app-foot svg { width: 14px; height: 14px; }
  .status-pill { top: 16px; right: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; background: var(--mist); font: 600 11.5px/1 Inter, sans-serif; color: var(--muted); }
  .status-pill.up { background: var(--ok-bg); color: #15803D; }
  .status-pill.degraded { background: var(--warn-bg); color: #B45309; }
  .status-pill.down { background: var(--bad-bg); color: #B91C1C; }
  .hero-card .status-pill { background: rgba(255,255,255,.1); color: rgba(255,255,255,.85); }
  .hero-card .status-pill.up { background: rgba(34,197,94,.18); color: #86EFAC; }
  .fav-btn { display: grid; place-items: center; border: 0; background: transparent; color: var(--soft); cursor: pointer; padding: 4px; border-radius: 8px; }
  .fav-btn:hover { color: #F59E0B; }
  .fav-btn.on { color: #F59E0B; }
  .fav-btn.on svg { fill: currentColor; }
  .app-card.locked { cursor: not-allowed; }
  .app-card.locked .app-icon { background: #EEF2F7; color: var(--soft); box-shadow: none; }
  .app-card.locked .app-title, .app-card.locked .app-desc { opacity: .6; }
  .lock-note { display: inline-flex; align-items: center; gap: 6px; color: var(--warn); font-weight: 600; }
  .app-card .opening { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: rgba(255,255,255,.85); }

  /* ---------- footer ---------- */
  .site-footer { background: var(--ink); color: rgba(255,255,255,.7); padding: 56px 0 24px; border-top: 1px solid rgba(255,255,255,.06); }
  .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 32px; }
  .footer-logo { width: 110px; }
  .footer-tag { margin: 16px 0 6px; font: 700 15px/1.3 'Plus Jakarta Sans', sans-serif; color: #fff; }
  .footer-values { margin: 0; font-size: 13px; color: rgba(255,255,255,.55); }
  .footer-head { margin: 0 0 14px; font: 700 12px/1 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
  .footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .footer-links a, .footer-links button { color: rgba(255,255,255,.7); text-decoration: none; font: 400 14px/1.3 Inter, 'IBM Plex Sans Thai', sans-serif; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
  .footer-links a:hover, .footer-links button:hover { color: var(--sky); }
  .footer-note { margin: 0; font-size: 13.5px; line-height: 1.6; }
  .footer-bottom { display: flex; justify-content: space-between; gap: 16px; margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); font-size: 12.5px; color: rgba(255,255,255,.45); flex-wrap: wrap; }
  [data-logo-white] { filter: brightness(0) invert(1); }

  /* ---------- overlays ---------- */
  .scrim { position: fixed; inset: 0; z-index: 80; background: rgba(5,11,26,.5); backdrop-filter: blur(3px); animation: fadeIn .2s ease; }
  .drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 90; width: min(640px, 100vw); display: flex; flex-direction: column; background: #fff; box-shadow: var(--shadow-lg); animation: slideIn .25s ease; }
  .drawer-wide { width: min(1180px, 100%); }   /* (CMS sections) the 980 px it had for the content + the 200 px section list; 100% = the screen less the page scrollbar (100vw ran 15 px past the left edge) */
  .drawer-reader { width: min(760px, 100vw); }
  .drawer-left { left: 0; right: auto; width: min(320px, 88vw); animation: slideInL .25s ease; }
  @keyframes slideIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes slideInL { from { transform: translateX(-40px); opacity: 0; } to { transform: none; opacity: 1; } }
  .drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
  .drawer-head > [data-close] { flex: none; }   /* (play port) a long subtitle (CMS > Play on a phone) never squeezes the Close button */
  .drawer-body { flex: 1; overflow-y: auto; padding: 24px 26px 40px; }
  .mobile-links { display: grid; gap: 4px; }
  .mobile-links a, .mobile-links button { display: flex; align-items: center; gap: 12px; padding: 14px 12px; border-radius: 10px; color: var(--text); text-decoration: none; font: 600 16px/1 Inter, sans-serif; border: 0; background: none; text-align: left; cursor: pointer; }
  .mobile-links svg { color: var(--cyan); }
  .mobile-links a:hover, .mobile-links button:hover { background: var(--mist); }
  .reader-body { padding-top: 0; }
  .reader-cover { --dc: var(--blue); position: relative; margin: 0 -26px 24px; aspect-ratio: 16 / 8; overflow: hidden; background: color-mix(in srgb, var(--dc) 85%, #0A1630); }
  .reader-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .reader-type { margin: 0 0 10px; }
  .reader-title { margin: 0 0 10px; font-size: clamp(24px, 3vw, 32px); line-height: 1.25; font-weight: 800; letter-spacing: -.015em; }
  .reader-meta { margin: 0 0 22px; font-size: 13px; color: var(--muted); }
  .reader-event { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin: 0 0 22px; padding: 14px 16px; border-radius: 14px; background: #FFF7ED; border: 1px solid #FED7AA; }
  .reader-event .ev-date { width: 58px; height: 58px; background: #fff; }
  .reader-event p { margin: 0; font-size: 14px; color: #7C2D12; line-height: 1.5; }
  .reader-event p b { display: block; font-size: 15px; }
  .prose-apjc { font-size: 15.5px; line-height: 1.8; color: #1F2D44; }
  .prose-apjc p { margin: 0 0 14px; }
  .prose-apjc ul { margin: 0 0 14px; padding-left: 22px; list-style: disc; }
  .prose-apjc li { margin: 4px 0; }
  .prose-apjc li::marker { color: var(--cyan); }
  .prose-apjc a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
  .cmdk { position: fixed; inset: 0; z-index: 95; display: grid; place-items: start center; padding-top: 12vh; background: rgba(5,11,26,.55); backdrop-filter: blur(4px); animation: fadeIn .15s ease; }
  .cmdk-box { width: min(640px, 92vw); border-radius: 18px; background: #fff; box-shadow: var(--shadow-lg); overflow: hidden; animation: pop .16s ease; }
  .cmdk-input { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 60px; border-bottom: 1px solid var(--line); color: var(--soft); }
  .cmdk-input input { flex: 1; border: 0; outline: 0; font: 500 16px/1 Inter, 'IBM Plex Sans Thai', sans-serif; color: var(--text); background: transparent; }
  .cmdk-list { list-style: none; margin: 0; padding: 8px; max-height: 52vh; overflow-y: auto; }
  .cmdk-group { padding: 10px 10px 6px; font: 700 11px/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }   /* (RBAC, answer 18) --soft was 2.9:1 */
  .cmdk-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; font-size: 14px; }
  .cmdk-item[aria-selected="true"] { background: #EEF6FF; color: var(--blue); }
  .cmdk-item .ci-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--mist); color: var(--blue); flex: none; }
  .cmdk-item .ci-sub { margin-left: auto; font-size: 12px; color: var(--soft); white-space: nowrap; }
  .cmdk-item .ci-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cmdk-empty { padding: 28px; text-align: center; color: var(--muted); font-size: 14px; }
  .cmdk-foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--soft); }
  .confirm-box { width: min(440px, 92vw); margin-top: 8vh; padding: 26px; border-radius: 18px; background: #fff; box-shadow: var(--shadow-lg); animation: pop .16s ease; }
  .confirm-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--bad-bg); color: var(--bad); margin-bottom: 14px; }
  .confirm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
  .shortcut-list { margin: 0; display: grid; gap: 12px; font-size: 14px; }
  .shortcut-list div { display: flex; justify-content: space-between; gap: 16px; }
  .shortcut-list dd { margin: 0; color: var(--muted); text-align: right; }
  .toasts { position: fixed; right: 20px; bottom: 20px; z-index: 120; display: grid; gap: 10px; }
  .toast { display: flex; align-items: center; gap: 10px; min-width: 260px; max-width: 420px; padding: 12px 16px; border-radius: 12px; background: var(--text); color: #fff; box-shadow: var(--shadow-lg); font-size: 14px; animation: rise .25s ease; }
  .toast.ok svg { color: #4ADE80; } .toast.err { background: #7F1D1D; } .toast.err svg { color: #FCA5A5; } .toast.info svg { color: #7DD3FC; }

  /* ---------- CMS ---------- */
  /* (CMS sections) every section at once: a list on the left in 4 groups (Content, Programs, People & Access, System) with its own scroll
     if ever needed. On the Access tab (.cms-wide: the matrix needs the full width) it folds into one row of icons above the matrix, where
     the old tab row was and as tall (51 px), so the matrix keeps its width, columns and rows. At <= 980 px the drawer is full screen and
     the content needs that width (the tables), so a Section select with the same groups (#cmsPick) takes the list's place, on every tab.
     The tabs keep data-cms-tab + aria-selected (cmsTab, the tests) */
  .cms-frame { flex: 1; min-height: 0; display: flex; }
  .cms-frame > .drawer-body { min-width: 0; }
  .cms-nav { flex: none; width: 200px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; border-right: 1px solid var(--line); background: #FAFBFD; }
  .cms-pick { display: none; }
  .cms-tabs { display: grid; gap: 12px; padding: 14px 10px 20px; }
  .cms-grp { display: grid; gap: 1px; }
  .cms-grp-t { padding: 2px 12px 6px; font: 700 11px/1.2 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .cms-tab { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 8px 12px; border: 0; border-radius: 10px; background: transparent;
    color: var(--muted); font: 600 14px/18px Inter, sans-serif; text-align: left; cursor: pointer; }
  .cms-tab:hover { background: var(--mist); color: var(--text); }
  .cms-tab:focus-visible { border-radius: 10px; }
  .cms-tab[aria-selected="true"] { background: #EEF6FF; color: var(--text); font-weight: 700; }
  .cms-tab[aria-selected="true"]::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--cyan); }
  .cms-tab[aria-selected="true"] svg { color: var(--blue); }
  .cms-tab-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  @media (pointer: coarse) and (min-height: 760px) { .cms-tab { min-height: 40px; } }   /* a shorter touch screen keeps 34 px so every tab still fits */
  @media (forced-colors: active) { .cms-tab[aria-selected="true"]::before { forced-color-adjust: none; background: Highlight; } }
  @media (min-width: 981px) {
    #cms.cms-wide .cms-frame { flex-direction: column; }
    #cms.cms-wide .cms-nav { width: auto; overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); background: #fff; }
    #cms.cms-wide .cms-tabs { display: flex; align-items: center; gap: 0; padding: 5px 16px; overflow-x: auto; scrollbar-width: thin; }
    #cms.cms-wide .cms-grp { display: flex; align-items: center; gap: 2px; flex: none; }
    #cms.cms-wide .cms-grp-t { display: none; }
    #cms.cms-wide .cms-grp:not([hidden]) ~ .cms-grp:not([hidden])::before { content: ''; flex: none; width: 1px; height: 22px; margin: 0 8px; background: var(--line-2); }
    #cms.cms-wide .cms-tab { flex: none; justify-content: center; width: 40px; height: 40px; min-height: 0; padding: 0; }
    #cms.cms-wide .cms-tab[aria-selected="true"]::before { left: 8px; right: 8px; top: auto; bottom: -5px; width: auto; height: 3px; border-radius: 3px 3px 0 0; }
    #cms.cms-wide .cms-tab-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  }
  @media (max-width: 980px) {
    .cms-frame { flex-direction: column; }
    .cms-nav { width: auto; overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); background: #fff; }
    .cms-tabs { display: none; }
    .cms-pick { display: flex; align-items: center; gap: 12px; padding: 6px 16px; }
    .cms-pick > span { flex: none; font: 700 11px/1.2 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
    .cms-pick select { flex: 1; min-width: 0; height: 44px; padding: 8px 12px; font-weight: 600; }
    #cms .cms-frame > .drawer-body { padding-left: 16px; padding-right: 16px; }   /* the phone gutter: the drawer no longer runs 15 px off screen, so the tables keep the width they had */
  }
  .cms-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
  .cms-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; padding: 20px; margin-bottom: 22px; border-radius: 16px; background: var(--mist); border: 1px solid var(--line); }
  .cms-form .full { grid-column: 1 / -1; }
  .cms-form .ev-fields { align-items: end; }
  .cms-form label { display: grid; gap: 6px; font: 600 13px/1.2 Inter, sans-serif; }
  .cms-form label small { font-weight: 400; color: var(--muted); }
  .cms-input { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: #fff; font: 400 14px/1.4 Inter, 'IBM Plex Sans Thai', sans-serif; color: var(--text); }
  .cms-input:focus { outline: 0; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,168,232,.15); }
  textarea.cms-input { min-height: 200px; resize: vertical; line-height: 1.6; }
  .cms-toggle { display: flex !important; grid-template-columns: none; align-items: center; gap: 10px; font-weight: 600; font-size: 13px; }
  .cms-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; align-items: center; }
  .cms-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
  .cms-table th { text-align: left; padding: 10px; font: 700 11px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }   /* (RBAC, answer 18) --soft was 2.9:1 */
  .cms-table td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
  .cms-table tr:hover td { background: #FAFBFD; }
  .cms-table .t { font-weight: 600; }
  .cms-table .row-actions { display: flex; gap: 4px; justify-content: flex-end; }
  .cms-table select { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line-2); font: inherit; background: #fff; }
  .icon-preview { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--grad-ink); color: #fff; flex: none; }
  .icon-preview.dept { background: var(--dc, var(--blue)); }
  .cover-box { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: center; }
  .cover-prev { --dc: var(--blue); position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: color-mix(in srgb, var(--dc) 85%, #0A1630); display: grid; place-items: center; color: rgba(255,255,255,.85); }
  .cover-prev img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .cover-prev .spinner { position: relative; }
  .cover-tools { display: grid; gap: 8px; justify-items: start; font-weight: 400; font-size: 12.5px; color: var(--muted); }
  .cover-tools .btn-outline { font-size: 13px; padding: 8px 14px; }
  .file-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .dept-pick { position: relative; }
  .dept-pick summary { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; cursor: pointer; padding: 4px 6px; border-radius: 8px; border: 1px dashed var(--line-2); min-height: 32px; }
  .dept-pick summary::-webkit-details-marker { display: none; }
  .dept-pick summary:hover { border-color: var(--cyan); }
  .dept-pick .dp-empty { font-size: 12px; color: var(--muted); }
  .dept-pick .dp-panel { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; width: 250px; padding: 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); display: grid; gap: 6px; }
  .dept-pick .dp-panel label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
  .dept-pick .dp-panel .btn-primary { margin-top: 6px; padding: 8px 14px; font-size: 13px; }
  .tiny-chip { display: inline-flex; padding: 2px 8px; border-radius: 999px; font: 700 11px/1.4 Inter, sans-serif; background: color-mix(in srgb, var(--dc, var(--blue)) 12%, #fff); color: color-mix(in srgb, var(--dc, var(--blue)) 72%, #000); }   /* (RBAC, answer 18) 82% gave IT & Security 4.49:1 */

  /* =============================================== 1.2 ===============================================
     Profile picture · Today bar · APJC Pulse (poll + Kudos) · vendor advisories + cloud pulse · Boss AP
     ==================================================================================================== */
  /* ---------- profile picture (User Master "Display Profile"); initials when there is none ---------- */
  .avatar { position: relative; }
  .avatar.has-photo { padding: 2px; background: conic-gradient(from 200deg, #29C4F4, #2DD4BF, #1E428A, #1A51A4, #29C4F4); }
  .avatar.has-photo img { display: block; width: 100%; height: 100%; border-radius: 999px; object-fit: cover; border: 2px solid #fff; background: #fff; }
  #avatar::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 99px; background: #22C55E; border: 2px solid #fff; }
  .avatar-btn .avatar { width: 38px; height: 38px; }
  .hello-chip { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; margin: 0 0 22px; padding: 6px 20px 6px 6px; border-radius: 999px;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); animation: rise .5s ease both; }
  .avatar-hero { width: 52px; height: 52px; font-size: 17px; isolation: isolate; }
  .avatar-hero::before { content: ''; position: absolute; inset: -3px; z-index: -1; border-radius: 999px; background: conic-gradient(#29C4F4, #2DD4BF, #1E428A, #29C4F4); opacity: .9; animation: spin 7s linear infinite; }
  .avatar-hero.has-photo { background: #0A1630; }
  .avatar-hero.has-photo img { border-color: #0A1630; }
  .hello-text { display: grid; gap: 3px; min-width: 0; }
  .hello-text b { font: 700 15.5px/1.25 'Plus Jakarta Sans', 'IBM Plex Sans Thai', sans-serif; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hello-text small { font: 500 12.5px/1.2 Inter, 'IBM Plex Sans Thai', sans-serif; color: rgba(255,255,255,.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* ---------- Today bar ---------- */
  .today { position: relative; z-index: 1; color: #fff; background: linear-gradient(180deg, #081431, #071229); border-top: 1px solid rgba(41,196,244,.12); }
  .today-inner { max-width: 1360px; margin: 0 auto; padding: 14px 24px; display: grid; grid-template-columns: 1.1fr 1.25fr 1.15fr 1.25fr; gap: 12px; }
  .td-cell { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: #fff; text-decoration: none; }
  a.td-cell:hover { border-color: rgba(41,196,244,.4); background: rgba(41,196,244,.07); }
  .td-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(41,196,244,.14); color: var(--sky); flex: none; }
  .td-ico svg { width: 21px; height: 21px; }
  .td-cell > div { min-width: 0; flex: 1; }
  .td-k { margin: 0; display: flex; align-items: center; gap: 6px; font: 700 10.5px/1.2 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); white-space: nowrap; }
  .td-v { margin: 5px 0 3px; font: 700 15px/1.25 'Plus Jakarta Sans', 'IBM Plex Sans Thai', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .td-s { margin: 0; font-size: 12px; line-height: 1.35; color: rgba(255,255,255,.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .td-big { font: 800 26px/1 'Plus Jakarta Sans', sans-serif; letter-spacing: -.02em; }
  .td-big small { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.7); margin-left: 2px; }
  .td-row { display: flex; align-items: baseline; gap: 10px; margin: 5px 0 3px; min-width: 0; }
  .td-row .td-v { margin: 0; }
  .td-clock { color: var(--sky); letter-spacing: .06em; }
  .td-holiday .td-ico { background: rgba(244,114,182,.15); color: #F9A8D4; }
  .td-fx .td-ico { background: rgba(45,212,191,.14); color: #5EEAD4; }
  .td-days { flex: none; padding: 3px 8px; border-radius: 999px; background: rgba(244,114,182,.16); color: #FBCFE8; font: 700 11px/1.3 Inter, sans-serif; white-space: nowrap; }
  .aqi { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; font: 700 11px/1.3 Inter, sans-serif; white-space: nowrap; }
  .aqi::before { content: ''; width: 7px; height: 7px; border-radius: 99px; background: currentColor; }
  .aqi.good { background: rgba(34,197,94,.17); color: #86EFAC; } .aqi.mod { background: rgba(250,204,21,.17); color: #FDE68A; }
  .aqi.usg { background: rgba(249,115,22,.2); color: #FDBA74; } .aqi.bad { background: rgba(239,68,68,.22); color: #FCA5A5; }
  .aqi.vbad { background: rgba(168,85,247,.25); color: #D8B4FE; } .aqi.haz { background: rgba(190,18,60,.35); color: #FECDD3; }
  .fx-row { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-size: 12px; color: rgba(255,255,255,.6); }
  .fx-row b { color: #fff; font-weight: 600; }

  /* ---------- APJC Pulse ---------- */
  .pulse { padding: 64px 0 72px; background: #fff; border-top: 1px solid var(--line); }
  .pulse-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.45fr); gap: 24px; align-items: start; }
  .poll-card { position: relative; overflow: hidden; padding: 26px; border-radius: 22px; color: #fff; box-shadow: 0 24px 50px rgba(10,22,48,.22);
    background: radial-gradient(420px 260px at 100% 0%, rgba(0,168,232,.32), transparent 70%), radial-gradient(300px 200px at 0% 100%, rgba(45,212,191,.16), transparent 70%), linear-gradient(160deg, #0A1630, #0E2559); }
  .pc-k { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 11.5px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--sky); }
  .pc-k svg { width: 16px; height: 16px; }
  /* 1.3c: a poll picture (like a story cover) */
  .pc-cover { margin: -26px -26px 20px; aspect-ratio: 16 / 7; overflow: hidden; background: rgba(255,255,255,.06); }
  .pc-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .poll-row { display: flex; align-items: center; gap: 12px; }
  .poll-thumb { width: 64px; height: 40px; flex: none; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
  .pc-q { margin: 14px 0 20px; font: 800 clamp(19px, 1.8vw, 23px)/1.35 'Plus Jakarta Sans', 'IBM Plex Sans Thai', sans-serif; letter-spacing: -.01em; }
  .pc-opts { display: grid; gap: 10px; }
  .pc-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05);
    color: #fff; font: 600 14.5px/1.35 Inter, 'IBM Plex Sans Thai', sans-serif; text-align: left; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
  .pc-opt:hover { border-color: var(--sky); background: rgba(41,196,244,.12); transform: translateX(2px); }
  .pc-opt:disabled { opacity: .6; cursor: progress; transform: none; }
  .pc-radio { width: 18px; height: 18px; border-radius: 99px; border: 2px solid rgba(255,255,255,.5); flex: none; }
  .pc-opt:hover .pc-radio { border-color: var(--sky); box-shadow: inset 0 0 0 3px #0E2559, inset 0 0 0 9px var(--sky); }
  .pc-res { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 14px; overflow: hidden;
    background: rgba(255,255,255,.06); font: 600 14px/1.35 Inter, 'IBM Plex Sans Thai', sans-serif; }
  .pc-res > span { position: relative; display: inline-flex; align-items: center; gap: 6px; }
  .pc-bar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(41,196,244,.38), rgba(45,212,191,.26)); animation: grow .9s cubic-bezier(.2,.8,.2,1) both; transform-origin: left; }
  @keyframes grow { from { transform: scaleX(0); } to { transform: none; } }
  .pc-res.top .pc-bar { background: linear-gradient(90deg, rgba(41,196,244,.6), rgba(45,212,191,.42)); }
  .pc-res.mine { box-shadow: inset 0 0 0 1.5px var(--sky); }
  .pc-res svg { width: 15px; height: 15px; color: #5EEAD4; }
  .pc-pct { font: 800 15px/1 'Plus Jakarta Sans', sans-serif; }
  .pc-foot { margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12.5px; color: rgba(255,255,255,.62); }
  .pc-foot .dept-chip { background: rgba(255,255,255,.1); color: #fff; }
  .pc-empty { margin: 14px 0 18px; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.72); }
  .poll-card .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
  .poll-card .btn-outline:hover { background: rgba(255,255,255,.08); border-color: var(--sky); color: #fff; }
  .kudos-wall { padding: 22px; border-radius: 22px; background: var(--mist); border: 1px solid var(--line); }
  .kw-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
  .kw-head .pc-k { color: var(--text); }
  .kw-head .pc-k svg { color: #DB2777; }
  .kw-vals { display: flex; gap: 6px; flex-wrap: wrap; }
  .kw-v { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font: 700 12px/1 Inter, sans-serif; color: var(--muted); }
  .kw-v b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 99px; background: var(--vc); color: #fff; font: 800 10.5px/1 'Plus Jakarta Sans', sans-serif; }
  .kw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .kd-card { --vc: var(--blue); position: relative; display: flex; flex-direction: column; padding: 16px 18px 15px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); animation: rise .35s ease both; }
  .kd-card::before { content: ''; position: absolute; left: 18px; right: 18px; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: var(--vc); }
  .kd-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
  .kd-val { display: inline-flex; align-items: center; gap: 7px; font: 700 11px/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--vc); }
  .kd-val b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--vc); color: #fff; font: 800 12px/1 'Plus Jakarta Sans', sans-serif; letter-spacing: 0; }
  .kd-when { margin-left: auto; font-size: 12px; color: var(--soft); white-space: nowrap; }
  .kd-del { display: grid; place-items: center; padding: 3px; border: 0; border-radius: 6px; background: transparent; color: var(--soft); cursor: pointer; }
  .kd-del:hover { color: var(--bad); background: var(--bad-bg); }
  .kd-del svg { width: 14px; height: 14px; }
  .kd-msg-t { flex: 1; margin: 0 0 12px; font: 500 14.5px/1.6 Inter, 'IBM Plex Sans Thai', sans-serif; color: var(--text); word-break: break-word; }
  .kd-who-line { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
  .kd-who-line b { color: var(--text); font-weight: 600; }
  .kd-av { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 99px; background: var(--grad-ink); color: #fff; font: 700 10px/1 'Plus Jakarta Sans', sans-serif; flex: none; }
  .kw-empty { display: grid; justify-items: center; gap: 10px; padding: 34px 20px; text-align: center; color: var(--muted); font-size: 14px; }
  .kw-empty svg { width: 28px; height: 28px; color: #DB2777; }
  .kw-empty p { margin: 0; }
  /* give-kudos dialog */
  #kudosDlg { padding-top: 5vh; }
  .kudos-box { width: min(540px, 94vw); max-height: 90vh; margin-top: 0; overflow-y: auto; }
  .kd-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 4px; }
  .kd-head .icon-btn { margin-left: auto; margin-top: -4px; }
  .kd-head p { margin: 2px 0 0; }
  .kd-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #DB2777, #F472B6); color: #fff; flex: none; }
  .kd-list { list-style: none; margin: 6px 0 0; padding: 6px; border-radius: 12px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); max-height: 220px; overflow-y: auto; }
  .kd-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; text-align: left; cursor: pointer; font: 600 14px/1.3 Inter, 'IBM Plex Sans Thai', sans-serif; color: var(--text); }
  .kd-opt:hover, .kd-opt:focus-visible { background: #EEF6FF; }
  .kd-opt small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
  .kd-none { padding: 10px; font-size: 13px; color: var(--muted); }
  .kd-picked { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border-radius: 12px; border: 1px solid var(--cyan); background: #F0F9FF; font: 600 14px/1.3 Inter, 'IBM Plex Sans Thai', sans-serif; }
  .kd-picked small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
  .kd-picked .icon-btn { margin-left: auto; width: 32px; height: 32px; }
  .kd-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .kd-values label { position: relative; cursor: pointer; }
  .kd-values input { position: absolute; opacity: 0; pointer-events: none; }
  .kd-values span { display: grid; justify-items: center; gap: 6px; padding: 10px 4px; border-radius: 12px; border: 1px solid var(--line-2); background: #fff; font: 600 11.5px/1.2 Inter, sans-serif; color: var(--muted); text-align: center; transition: all .15s; }
  .kd-values span b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--vc); color: #fff; font: 800 15px/1 'Plus Jakarta Sans', sans-serif; }
  .kd-values input:checked + span { border-color: var(--vc); color: var(--text); background: color-mix(in srgb, var(--vc) 7%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vc) 20%, transparent); }
  .kd-values input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 2px; }
  .kd-msg { min-height: 92px !important; }
  .kd-note { margin: 8px 0 0; font-size: 12px; color: var(--soft); }
  .field-label small { float: right; font-weight: 500; color: var(--soft); }

  /* ---------- Tech & Cyber Watch: vendor advisories + cloud & platform pulse ---------- */
  .watch-extra { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; margin-top: 22px; }
  .xbox { min-width: 0; padding: 18px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); }
  .xbox-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
  .xbox-head h3 { margin: 0; font: 700 15px/1.2 'Plus Jakarta Sans', sans-serif; }
  .xbox-head p { margin: 3px 0 0; font-size: 12px; color: rgba(255,255,255,.5); }
  .xbox-head .vb-chips { margin-left: auto; }
  .vb-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .vb-chips { display: flex; gap: 6px; flex-wrap: wrap; }
  .vb-chip { padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: transparent; color: rgba(255,255,255,.72); font: 600 12px/1 Inter, sans-serif; cursor: pointer; white-space: nowrap; }
  .vb-chip:hover { border-color: var(--sky); color: #fff; }
  .vb-chip[aria-selected="true"] { background: #fff; border-color: #fff; color: var(--ink); }
  .x-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .vb-item { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; padding: 9px 8px; border-radius: 10px; color: rgba(255,255,255,.9); text-decoration: none; }
  .vb-item:hover { background: rgba(255,255,255,.06); color: #fff; }
  .vb-item h4 { margin: 0 0 3px; font: 500 13.5px/1.45 Inter, 'IBM Plex Sans Thai', sans-serif; }
  .vb-item p { margin: 0; font-size: 11.5px; color: rgba(255,255,255,.45); }
  .vb-vendor { align-self: start; padding: 5px 4px; border-radius: 6px; font: 800 9.5px/1.2 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; text-align: center; background: rgba(255,255,255,.1); color: #fff; }
  .vb-vendor.v-cisco { background: rgba(4,159,217,.22); color: #7DD3FC; }
  .vb-vendor.v-fortinet { background: rgba(238,49,36,.22); color: #FCA5A5; }
  .vb-vendor.v-palo { background: rgba(250,88,45,.22); color: #FDBA74; }
  .vb-kev { padding: 16px; border-radius: 14px; background: linear-gradient(160deg, rgba(124,58,237,.22), rgba(219,39,119,.12)); border: 1px solid rgba(255,255,255,.08); }
  .vb-kev .kev-k { margin: 0; display: flex; align-items: center; gap: 8px; font: 700 11.5px/1.3 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #F9A8D4; }
  .vb-kev .kev-k svg { width: 15px; height: 15px; }
  .vb-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 14px; }
  .vb-nums b { display: block; font: 800 30px/1 'Plus Jakarta Sans', sans-serif; }
  .vb-nums span { font-size: 12px; color: rgba(255,255,255,.6); }
  .vb-kev .x-list { gap: 8px; }
  .vb-watch { margin: 12px 0 0; font-size: 11.5px; line-height: 1.5; color: rgba(255,255,255,.5); }
  .cs-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
  .cs-pill { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 11px 12px; border-radius: 12px; background: rgba(5,11,26,.45); border: 1px solid rgba(255,255,255,.08); color: #fff; text-decoration: none; }
  a.cs-pill:hover { border-color: rgba(41,196,244,.45); }
  .cs-pill b { font: 700 13px/1.2 'Plus Jakarta Sans', sans-serif; white-space: nowrap; }
  .cs-pill .cs-t { margin-left: auto; font-size: 11.5px; color: rgba(255,255,255,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cs-pill.warn { border-color: rgba(245,158,11,.55); background: rgba(245,158,11,.1); }
  .cs-pill.warn .cs-t { color: #FCD34D; }
  .cs-sub { margin: 0 0 6px; font: 700 11px/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); }
  .xbox .lane-item { padding: 8px; }
  .xbox-empty { margin: 0; padding: 14px 4px; font-size: 13px; color: rgba(255,255,255,.5); }

  /* ---------- Boss AP (the Portal assistant): 128 px button + chat panel ---------- */
  .ap-pic { display: block; background-repeat: no-repeat; background-position: center bottom; background-size: contain; }
  .ap-pic.face { aspect-ratio: 1; background-size: 205% auto; background-position: 55% 4%; border-radius: 50%; background-color: #DCEFFE; }
  .ap-fab { position: fixed; right: 18px; bottom: 14px; z-index: 70; }
  .ap-fab-btn { position: relative; display: block; width: 100px; height: 128px; padding: 0; border: 0; background: transparent; cursor: pointer;
    filter: drop-shadow(0 14px 20px rgba(5,11,26,.32)); transition: transform .2s ease; }
  .ap-fab-btn:hover { transform: translateY(-3px) scale(1.03); }
  .ap-fab-btn:active { transform: scale(.97); }
  .ap-fab-btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; border-radius: 18px; }
  .ap-fab-btn .ap-body { width: 100%; height: 100%; }
  .ap-face-mini { display: none; }
  .ap-say { position: absolute; right: 92px; top: 18px; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: #fff; color: var(--text); white-space: nowrap;
    font: 600 13px/1.25 Inter, 'IBM Plex Sans Thai', sans-serif; box-shadow: var(--shadow-lg); opacity: 0; transform: translateX(6px); transition: opacity .2s, transform .2s; pointer-events: none; }
  .ap-fab-btn:hover .ap-say, .ap-fab-btn:focus-visible .ap-say, .ap-fab.hello .ap-say { opacity: 1; transform: none; }
  .ap-fold { position: absolute; top: -2px; right: -2px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 99px; border: 1px solid var(--line); background: #fff;
    color: var(--muted); cursor: pointer; opacity: 0; transition: opacity .15s; box-shadow: var(--shadow); }
  .ap-fab:hover .ap-fold, .ap-fold:focus-visible { opacity: 1; }
  .ap-fold svg { width: 13px; height: 13px; }
  .ap-fab.is-folded .ap-fab-btn { width: 62px; height: 62px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--cyan); filter: drop-shadow(0 10px 16px rgba(5,11,26,.28)); }
  .ap-fab.is-folded .ap-body, .ap-fab.is-folded .ap-say { display: none; }
  .ap-fab.is-folded .ap-face-mini { display: block; width: 100%; height: 100%; }
  .ap-fab.is-open { visibility: hidden; }
  body.has-ap .toasts { right: 132px; }
  .ap-panel { position: fixed; right: 20px; bottom: 20px; z-index: 97; display: flex; flex-direction: column; width: min(430px, calc(100vw - 32px)); height: min(660px, calc(100vh - 96px));
    border-radius: 22px; background: #fff; overflow: hidden; box-shadow: 0 30px 80px rgba(5,11,26,.35), 0 0 0 1px rgba(11,27,51,.06); animation: apIn .22s ease; }
  @keyframes apIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
  .ap-head { display: flex; align-items: center; gap: 10px; padding: 14px 12px 14px 16px; color: #fff;
    background: radial-gradient(300px 160px at 100% 0%, rgba(0,168,232,.38), transparent 70%), linear-gradient(160deg, #0A1630, #0E2559); }
  .ap-av { width: 46px; height: 46px; padding: 2px; border-radius: 99px; background: conic-gradient(#29C4F4, #2DD4BF, #1E428A, #29C4F4); flex: none; }
  .ap-av .ap-pic { width: 100%; height: 100%; }
  .ap-ttl { flex: 1; min-width: 0; }
  .ap-ttl h2 { margin: 0; font: 800 16.5px/1.2 'Plus Jakarta Sans', 'IBM Plex Sans Thai', sans-serif; }
  .ap-ttl p { margin: 3px 0 0; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 12px; color: rgba(255,255,255,.7); }
  #apLeft:not(:empty) { padding: 0 7px; border-radius: 999px; background: rgba(255,255,255,.12); }
  .ap-head .icon-btn { color: rgba(255,255,255,.85); }
  .ap-head .icon-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
  .ap-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--mist); overscroll-behavior: contain; }
  .ap-welcome { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 12px; align-items: end; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
  .ap-welcome .ap-pic { width: 78px; aspect-ratio: 280 / 358; }
  .ap-welcome h3 { margin: 0 0 4px; font: 800 15px/1.35 'Plus Jakarta Sans', 'IBM Plex Sans Thai', sans-serif; }
  .ap-welcome p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
  .ap-starters { display: flex; flex-wrap: wrap; gap: 8px; }
  .ap-chip { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--text); font: 500 12.5px/1.35 Inter, 'IBM Plex Sans Thai', sans-serif; text-align: left; cursor: pointer; }
  .ap-chip:hover { border-color: var(--cyan); color: var(--blue); }
  .ap-msg { display: flex; align-items: flex-end; gap: 8px; }
  .ap-msg.me { justify-content: flex-end; }
  .ap-msg.me .ap-bub { max-width: 86%; border: 0; border-radius: 16px 16px 4px 16px; background: var(--grad-ink); color: #fff; }
  .ap-mini { width: 30px; height: 30px; flex: none; }
  .ap-mini .ap-pic { width: 100%; height: 100%; }
  .ap-col { min-width: 0; max-width: calc(100% - 38px); }
  .ap-bub { padding: 10px 13px; border-radius: 16px 16px 16px 4px; background: #fff; border: 1px solid var(--line); font: 400 14px/1.65 Inter, 'IBM Plex Sans Thai', sans-serif; color: var(--text); overflow-wrap: anywhere; }
  .ap-bub p { margin: 0 0 8px; } .ap-bub p:last-child { margin: 0; }
  .ap-bub ul, .ap-bub ol { margin: 4px 0 8px; padding-left: 20px; } .ap-bub ul { list-style: disc; } .ap-bub ol { list-style: decimal; }
  .ap-bub li { margin: 2px 0; } .ap-bub li::marker { color: var(--cyan); }
  .ap-bub a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
  .ap-bub code { padding: 1px 5px; border-radius: 5px; background: var(--mist); font-size: 12.5px; }
  .ap-bub .ap-h { margin: 6px 0 4px; font-weight: 700; }
  .ap-msg.err .ap-bub { background: #FFF7ED; border-color: #FED7AA; color: #9A3412; }
  .ap-rate { display: flex; gap: 2px; margin-top: 4px; }
  .ap-rate button { display: grid; place-items: center; width: 30px; height: 26px; border: 0; border-radius: 8px; background: transparent; color: var(--soft); cursor: pointer; }
  .ap-rate button:hover { background: #fff; color: var(--blue); }
  .ap-rate button[aria-pressed="true"] { background: #E0F2FE; color: var(--blue); }
  .ap-rate svg { width: 14px; height: 14px; }
  .ap-typing .ap-bub { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
  .ap-dots { display: inline-flex; gap: 3px; }
  .ap-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); animation: apDot 1.1s ease-in-out infinite; }
  .ap-dots i:nth-child(2) { animation-delay: .15s; } .ap-dots i:nth-child(3) { animation-delay: .3s; }
  @keyframes apDot { 0%, 80%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
  .ap-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 8px; border-top: 1px solid var(--line); background: #fff; }
  .ap-form textarea { flex: 1; min-height: 44px; max-height: 128px; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--line-2); resize: none; outline: 0;
    font: 400 14px/1.45 Inter, 'IBM Plex Sans Thai', sans-serif; color: var(--text); background: #fff; }
  .ap-form textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,168,232,.15); }
  .ap-form textarea:disabled { background: var(--mist); }
  .ap-send { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: var(--grad-ink); color: #fff; cursor: pointer; flex: none; box-shadow: 0 6px 16px rgba(0,168,232,.3); }
  .ap-send:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
  .ap-foot { margin: 0; padding: 0 14px 10px; background: #fff; font-size: 11px; line-height: 1.4; color: var(--soft); }
  /* CMS: Boss AP stats */
  .ai-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
  .ai-stat { padding: 14px; border-radius: 14px; background: var(--mist); border: 1px solid var(--line); }
  .ai-stat span { font-size: 12px; color: var(--muted); }
  .ai-stat b { display: block; margin-top: 6px; font: 800 22px/1 'Plus Jakarta Sans', sans-serif; color: var(--text); }
  .cms-table details summary { cursor: pointer; color: var(--blue); font-size: 12.5px; }
  .cms-table details p { margin: 6px 0 0; white-space: pre-wrap; font-size: 12.5px; color: var(--muted); }
  .opt-sum { font-size: 12px; color: var(--muted); }

  /* ---------- 1.3: Sign in with Microsoft ---------- */
  /* (sign-in 2026-11-11) Microsoft's dark button (#2F2F2F, white Segoe UI semibold, the four squares unchanged, clear space
     round the logo) made large, inside our own cyan halo. The halo answers hover and focus; pressed sinks 1 px; a light sweeps
     the button's fill once (behind the logo and the words) and stops; busy = "Opening Microsoft..." / "Signing you in..." */
  .ms-box { margin-top: 26px; }
  .ms-halo { position: relative; isolation: isolate; border-radius: 18px; }
  .ms-halo::before { content: ''; position: absolute; inset: -9px -10px -12px; z-index: -1; border-radius: 24px; pointer-events: none;
    background: radial-gradient(70% 90% at 50% 70%, rgba(0, 168, 232, .32), rgba(0, 168, 232, 0) 72%); opacity: .7; transition: opacity .25s ease, transform .25s ease; }
  .ms-halo:hover::before, .ms-halo:focus-within::before { opacity: 1; transform: scale(1.015); }
  .btn-ms { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; min-height: 60px; padding: 10px 24px;
    border: 0; border-radius: 14px; background: #2F2F2F; color: #fff; font: 600 16.5px/1.25 'Segoe UI', 'Segoe UI Variable Text', Inter, system-ui, sans-serif; letter-spacing: .005em;
    text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 1px 2px rgba(5,11,26,.25), 0 14px 30px -14px rgba(5,11,26,.75), 0 0 0 1px rgba(0, 168, 232, .0);
    transition: background .18s ease, box-shadow .22s ease, transform .12s ease; }
  .btn-ms > * { position: relative; z-index: 1; }
  .btn-ms::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; transform: translateX(-120%);
    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.16) 48%, rgba(125, 211, 252, .18) 52%, transparent 70%); animation: msSweep 1.3s ease .9s 1 both; }
  @keyframes msSweep { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
  .btn-ms:hover { background: #3A3A3A; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 2px rgba(5,11,26,.25), 0 18px 34px -14px rgba(0, 92, 160, .8), 0 0 0 3px rgba(0, 168, 232, .28); }
  .btn-ms:active { transform: translateY(1px); background: #242424; box-shadow: inset 0 1px 2px rgba(0,0,0,.4), 0 0 0 3px rgba(0, 168, 232, .34); transition-duration: .05s; }
  /* keyboard focus: a white gap + a #0077C8 ring (4.6:1 on the white card) and the halo at full strength */
  .btn-ms:focus-visible { outline: 3px solid #0077C8; outline-offset: 3px; border-radius: 14px; background: #3A3A3A; }
  .ms-logo { width: 22px; height: 22px; flex: none; }
  .btn-ms .spinner { display: none; width: 18px; height: 18px; flex: none; border-color: rgba(255,255,255,.28); border-top-color: #fff; }
  .btn-ms.busy { cursor: progress; background: #2F2F2F; transform: none; }
  .btn-ms.busy .spinner { display: block; }
  .btn-ms.busy::after { display: none; }
  .btn-ms[aria-disabled="true"]:not(.busy) { cursor: not-allowed; background: #5C5C5C; }
  .btn-ms[aria-disabled="true"]:not(.busy):hover { box-shadow: none; }
  .login-card.is-return .login-or { display: none; }
  /* "Use username and password instead": a quiet disclosure (44 px tall), the form opens under it */
  .login-or { display: flex; justify-content: center; margin: 14px 0 0; }
  .pw-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--blue);
    font: 600 14px/1.2 Inter, 'IBM Plex Sans Thai', sans-serif; cursor: pointer; }
  .pw-toggle:hover { background: #EFF6FF; }
  .pw-toggle span { text-wrap: balance; text-align: center; }
  .pw-toggle svg { width: 16px; height: 16px; }
  @media (max-width: 420px) { .pw-toggle { gap: 6px; padding: 0 10px; } .pw-toggle > svg:first-child { display: none; } }
  /* a small laptop (1024-1180): the card a little narrower, so the four values stay on one line beside it */
  @media (min-width: 1024px) and (max-width: 1180px) { .login-grid { grid-template-columns: minmax(0, 1fr) 400px; } .login-card { padding: 34px 32px 26px; } }
  .pw-toggle .pw-caret { transition: transform .2s ease; }
  .pw-toggle[aria-expanded="true"] .pw-caret { transform: rotate(180deg); }
  .login-card.is-ms #loginForm { margin-top: 2px; padding-top: 4px; border-top: 1px solid var(--line); }
  .login-card:not(.is-ms) #loginForm { margin-top: 10px; }
  /* under the Microsoft button the password "Sign in" is the second action: outlined, never a second filled button */
  .login-card.is-ms #loginBtn { background: #fff; color: var(--blue); box-shadow: inset 0 0 0 1.5px var(--blue); }
  .login-card.is-ms #loginBtn:hover { background: #EFF6FF; box-shadow: inset 0 0 0 1.5px var(--blue); filter: none; }
  .login-card.is-ms #loginBtn .spinner { border-color: rgba(26,81,164,.25); border-top-color: var(--blue); }
  /* the username form's own targets: Show password 44 x 44 inside the 48 px box (the eye stays where it was), Sign in 52 px */
  .login-card .field-btn { min-width: 44px; min-height: 44px; margin-right: -7px; }
  .login-card #loginBtn { min-height: 52px; }
  /* a large screen (>= 1600): the page grows with it, the title to the Hero's 50 px, the card and the button with it */
  @media (min-width: 1600px) {
    .login-grid { max-width: 1360px; grid-template-columns: minmax(0, 1fr) 468px; }
    .login-card { max-width: 468px; padding: 44px 44px 32px; }
    .login-brand-logo { width: 148px; margin-bottom: 34px; }
    .login-eyebrow { font-size: 12.5px; }
    .login-title { font-size: 50px; }
    .login-lead { max-width: 560px; font-size: 18px; }
    .login-card-logo { height: 40px; }
    .login-card-title { font-size: 28px; }
    .login-card-sub { font-size: 15px; }
    .btn-ms { min-height: 64px; font-size: 17.5px; }
    .ms-logo { width: 23px; height: 23px; }
  }
  #loginError { margin-top: 18px; }
  @media (prefers-reduced-motion: reduce) {
    .btn-ms::after { display: none; }
    .btn-ms, .ms-halo::before, .pw-toggle .pw-caret { transition: none; }
    .btn-ms:active { transform: none; }
  }
  @media (forced-colors: active) { .btn-ms { border: 1px solid ButtonText; } .btn-ms::after, .ms-halo::before { display: none; } }

  /* ---------- 1.3: People directory ---------- */
  .dir-search { width: min(420px, 100%); height: 52px; border: 0; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
  .dir-search input { font-size: 15.5px; }
  .dir-meta { margin: 0; color: var(--muted); font-size: 13.5px; }
  .dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
  .dir-card { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 16px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line);
    box-shadow: var(--shadow); text-align: left; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; font: inherit; color: inherit; }
  .dir-card:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: 0 2px 4px rgba(11,27,51,.06), 0 14px 30px rgba(11,27,51,.1); }
  .dir-card:focus-visible, .org-row:focus-visible { outline: 3px solid rgba(26,81,164,.35); outline-offset: 2px; }
  .dir-skel { height: 88px; }
  .dir-more { display: flex; justify-content: center; margin-top: 22px; }
  .dc-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .dc-name { font: 700 15px/1.25 'Plus Jakarta Sans', 'IBM Plex Sans Thai', sans-serif; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dc-title { font-size: 13px; color: var(--text); opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dc-dept { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* 1.3c: cards like HR Onboard - nickname, then department / phone / e-mail lines */
  .dc-nick { font-weight: 600; color: var(--cyan); }
  .dir-card .dc-title { color: var(--blue); opacity: 1; font-weight: 600; }
  .dc-line { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; color: var(--muted); }
  .dc-line > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dc-line svg { width: 13px; height: 13px; flex: none; color: var(--cyan); }
  .dir-card .dc-title + .dc-line { margin-top: 3px; }
  .person-name .dc-nick { font-size: .8em; }
  .ds-fields { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
  .ds-photo { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
  .ds-fields summary { cursor: pointer; color: var(--blue); font-weight: 600; }
  .ds-fields p { margin: 6px 0 0; line-height: 1.6; overflow-wrap: anywhere; }
  .pav { --pc: var(--blue); position: relative; display: grid; place-items: center; flex: none; border-radius: 999px; overflow: hidden;
    background: linear-gradient(135deg, var(--pc), color-mix(in srgb, var(--pc) 55%, #00A8E8)); color: #fff; }
  .pav b { font: 700 1em/1 'Plus Jakarta Sans', sans-serif; letter-spacing: .02em; }
  .pav img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .pav-sm { width: 36px; height: 36px; font-size: 12.5px; }
  .pav-md { width: 56px; height: 56px; font-size: 18px; }
  .pav-xl { width: 96px; height: 96px; font-size: 30px; box-shadow: 0 0 0 4px #fff, 0 8px 24px rgba(11,27,51,.16); }
  .drawer-person { width: min(560px, 100vw); }
  .person-head { display: flex; align-items: center; gap: 18px; }
  .person-name { margin: 0; font: 800 24px/1.2 'Plus Jakarta Sans', 'IBM Plex Sans Thai', sans-serif; letter-spacing: -.01em; overflow-wrap: anywhere; }
  .person-title { margin: 6px 0 0; font-size: 15px; font-weight: 600; }
  .person-dept { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }
  .person-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
  .person-acts .btn-primary { padding: 9px 16px; font-size: 14px; }
  .person-acts .btn-outline svg, .person-acts .btn-primary svg { width: 16px; height: 16px; }
  .person-facts { list-style: none; margin: 18px 0 0; padding: 14px 16px; display: grid; gap: 8px; border-radius: 14px; background: var(--mist); font-size: 13.5px; }
  .person-facts li { display: flex; align-items: center; gap: 10px; min-width: 0; overflow-wrap: anywhere; }
  .person-facts svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
  .person-note { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 13px; color: var(--muted); }
  .person-note svg { width: 15px; height: 15px; }
  .org { margin-top: 28px; }
  .org-h { margin: 0 0 12px; font: 700 12px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .org-h .n { margin-left: 4px; color: var(--soft); }
  .org-reports + .text-xs, .org-line + .org-h { margin-top: 18px; }
  .org-line { position: relative; display: grid; gap: 10px; }
  .org-line::before { content: ''; position: absolute; left: 30px; top: 22px; bottom: 22px; width: 2px; background: var(--line); }
  .org-row { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line);
    background: #fff; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
  .org-row:hover { border-color: var(--line-2); background: #FAFBFD; }
  .org-row.self { border-color: color-mix(in srgb, var(--blue) 45%, #fff); background: color-mix(in srgb, var(--blue) 6%, #fff); box-shadow: var(--shadow); }
  .org-row.self .dc-name { color: var(--blue); }
  .org-reports { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
  .person-kudos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .person-kudos li { display: flex; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); }
  .person-kudos p { margin: 0; font-size: 13.5px; line-height: 1.5; }
  .pk-val { --vc: var(--blue); display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--vc); color: #fff; font: 800 13px/1 'Plus Jakarta Sans', sans-serif; }
  .dir-status { margin-bottom: 18px; }
  .ds-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .ds-cell { display: flex; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: #fff; min-width: 0; }
  .ds-cell > svg { width: 20px; height: 20px; color: var(--ok); flex: none; margin-top: 2px; }
  .ds-cell.bad > svg { color: var(--warn); }
  .ds-label { margin: 0; font-size: 12px; font-weight: 600; color: var(--muted); }
  .ds-value { margin: 2px 0 0; font: 800 16px/1.2 'Plus Jakarta Sans', sans-serif; }
  .ds-sub { margin: 4px 0 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
  .ds-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .ds-acts .btn-outline { font-size: 13px; padding: 8px 14px; }
  .ds-acts .btn-outline[disabled] { opacity: .5; cursor: not-allowed; }

  /* ---------- 1.3b: the bell ---------- */
  .bell { position: relative; }
  .bell-btn { position: relative; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--text); }
  .bell-btn:hover { background: var(--mist); }
  .bell-btn svg { width: 19px; height: 19px; }
  .bell-count { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--bad); color: #fff;
    font: 800 11px/19px Inter, sans-serif; text-align: center; box-shadow: 0 0 0 2px #fff; }
  .bell-menu { width: min(380px, calc(100vw - 24px)); padding: 0; overflow: hidden; }
  .bell-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
  .btn-xs { padding: 5px 10px; font-size: 12.5px; border-radius: 8px; }
  .bell-list { list-style: none; margin: 0; padding: 6px; max-height: min(460px, 70vh); overflow-y: auto; }
  .bell-item { display: flex; gap: 12px; width: 100%; padding: 10px; border: 0; border-radius: 12px; background: transparent; text-align: left; font: inherit; color: var(--text); cursor: pointer; }
  .bell-item:hover, .bell-item:focus-visible { background: var(--mist); outline: none; }
  .bell-item.unread { background: color-mix(in srgb, var(--blue) 6%, #fff); }
  .bell-item.unread .bi-title::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 99px; background: var(--blue); vertical-align: middle; }
  .bi-ico { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--mist); color: var(--blue); }
  .bi-ico svg { width: 17px; height: 17px; }
  .bell-item.k-ack .bi-ico { background: var(--warn-bg); color: var(--warn); }
  .bell-item.k-reminder .bi-ico { background: var(--ok-bg); color: var(--ok); }
  .bell-item.k-down .bi-ico { background: var(--bad-bg); color: var(--bad); }
  .bell-item.k-kudos .bi-ico { background: #FCE7F3; color: #BE185D; }
  .bi-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .bi-title { font: 600 13.5px/1.35 Inter, 'IBM Plex Sans Thai', sans-serif; overflow-wrap: anywhere; }
  .bi-sub { font-size: 12.5px; line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .bi-time { font-size: 11.5px; color: var(--soft); }
  .bell-empty { display: flex; align-items: center; gap: 10px; padding: 22px 14px; color: var(--muted); font-size: 13.5px; }
  .menu-count { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 99px; background: var(--mist); color: var(--muted); font: 700 11.5px/20px Inter, sans-serif; text-align: center; }
  .menu-count:empty { display: none; }
  .inline-ico { display: inline; width: 18px; height: 18px; vertical-align: -3px; color: var(--blue); }

  /* ---------- 1.3b: waiting for you (home) ---------- */
  .action-strip { padding: 18px 0 0; background: var(--mist); }
  .action-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
  .act-item { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow);
    text-align: left; font: inherit; color: var(--text); cursor: pointer; transition: transform .15s, border-color .15s; }
  .act-item:hover { transform: translateY(-1px); border-color: var(--line-2); }
  .act-item.ack { border-left: 4px solid var(--warn); }
  .act-item.ack.late { border-left-color: var(--bad); }
  .act-item.going { border-left: 4px solid var(--ok); }
  .act-item.more { justify-content: center; color: var(--blue); font-weight: 700; }
  .ai-ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--warn-bg); color: var(--warn); }
  .act-item.late .ai-ico { background: var(--bad-bg); color: var(--bad); }
  .act-item.going .ai-ico { background: var(--ok-bg); color: var(--ok); }
  .ai-ico svg { width: 18px; height: 18px; }
  .ai-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
  .ai-k { font: 700 11.5px/1.3 Inter, sans-serif; letter-spacing: .02em; color: var(--muted); }
  .ai-t { font: 700 14.5px/1.3 'Plus Jakarta Sans', 'IBM Plex Sans Thai', sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ai-go { width: 18px; height: 18px; color: var(--soft); flex: none; }

  /* ---------- 1.3b: reader actions ---------- */
  .reader-act { display: grid; gap: 12px; margin: 0 0 22px; }
  .rsvp { padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); }
  .rsvp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
  .rsvp-q { margin: 0; font: 800 16px/1.2 'Plus Jakarta Sans', sans-serif; }
  .rsvp-n { margin: 0; font-size: 13px; color: var(--muted); }
  .rsvp-btns { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
  .rsvp-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--text);
    font: 700 14px/1 Inter, sans-serif; cursor: pointer; transition: all .15s; }
  .rsvp-btn svg { width: 16px; height: 16px; }
  .rsvp-btn.yes[aria-pressed="true"] { background: var(--ok); border-color: var(--ok); color: #fff; }
  .rsvp-btn.no[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: #fff; }
  .rsvp-btn[disabled] { opacity: .45; cursor: not-allowed; }
  .rsvp-note { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
  .cal-row { display: flex; flex-wrap: wrap; gap: 8px; }
  .cal-row .btn-outline, .cal-row .btn-primary { font-size: 13.5px; }
  .cal-row svg { width: 16px; height: 16px; }
  .ack-box { display: grid; gap: 10px; padding: 16px; border-radius: 14px; background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn) 35%, #fff); }
  .ack-box.done { grid-template-columns: auto 1fr; align-items: center; background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 35%, #fff); }
  .ack-box.done > svg { width: 26px; height: 26px; color: var(--ok); }
  .ack-box.muted { grid-template-columns: auto 1fr; align-items: center; background: var(--mist); border-color: var(--line); }
  .ack-box.muted > svg { width: 18px; height: 18px; color: var(--muted); }
  .ack-t { display: flex; align-items: center; gap: 8px; margin: 0; font: 800 15px/1.3 'Plus Jakarta Sans', 'IBM Plex Sans Thai', sans-serif; }
  .ack-t svg { width: 18px; height: 18px; color: var(--warn); }
  .ack-s { margin: 0; font-size: 13px; color: var(--muted); }
  .ack-check { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; cursor: pointer; }
  .ack-check input { width: 18px; height: 18px; accent-color: var(--blue); }
  .ack-box .btn-primary { justify-self: start; }
  .ack-box .btn-primary[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }
  .late { color: var(--bad); }
  #readerSave.on { color: var(--blue); }
  #readerSave.on svg { fill: currentColor; }
  .tiny-chip.ok-chip { --dc: var(--ok); }
  .tiny-chip.warn-chip { --dc: var(--warn); }

  /* ---------- 1.3b: Saved ---------- */
  .save-host { position: relative; }
  .save-host .lane-item { padding-right: 38px; }
  .save-mini { position: absolute; top: 8px; right: 6px; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; border: 0;
    background: rgba(5,11,26,.55); color: rgba(255,255,255,.85); cursor: pointer; opacity: 0; transition: opacity .15s, background .15s; }
  .save-mini svg { width: 15px; height: 15px; }
  .save-host:hover .save-mini, .save-mini:focus-visible, .save-mini.on { opacity: 1; }
  .save-mini.on { background: var(--cyan); color: #fff; }
  .save-mini.on svg { fill: currentColor; }
  .lead-host .save-mini { top: 10px; right: 10px; }
  @media (hover: none) { .save-mini { opacity: 1; } }
  .saved-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .saved-list li { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 0; border-radius: 14px; border: 1px solid var(--line); }
  .sv-open { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; padding: 10px 12px; border: 0; background: transparent; text-align: left; font: inherit; color: var(--text); text-decoration: none; cursor: pointer; border-radius: 12px; }
  .sv-open:hover { background: var(--mist); }
  .sv-ico { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--mist); color: var(--blue); }
  .sv-ico svg { width: 17px; height: 17px; }
  .sv-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .sv-t { font: 600 14px/1.35 Inter, 'IBM Plex Sans Thai', sans-serif; overflow-wrap: anywhere; }
  .sv-s { font-size: 12px; color: var(--muted); }

  /* ---------- 1.3b: CMS (event / policy fields, Insights) ---------- */
  .form-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: end; }
  .form-grid4 .span2 { grid-column: span 2; }
  .form-grid4 .span4 { grid-column: 1 / -1; }
  .aud-label { display: block; margin-bottom: 6px; font: 600 13px/1.2 Inter, sans-serif; }
  .aud-modes { display: flex; flex-wrap: wrap; gap: 18px; }
  .aud-box { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; padding: 12px; border-radius: 12px; border: 1px dashed var(--line-2); background: #fff; }
  .aud-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
  .ins-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
  .ins-card { display: flex; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: #fff; }
  .ins-card > svg { width: 20px; height: 20px; color: var(--blue); flex: none; margin-top: 2px; }
  .ins-detail { margin-bottom: 18px; padding: 18px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--blue) 30%, #fff); background: color-mix(in srgb, var(--blue) 3%, #fff); }
  .ins-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .ins-title { margin: 2px 0 0; font: 800 17px/1.3 'Plus Jakarta Sans', 'IBM Plex Sans Thai', sans-serif; }
  .ins-sec { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
  .ins-h { margin: 0 0 8px; font: 700 13px/1.3 Inter, sans-serif; }
  .ins-h .n { color: var(--blue); }
  .bar-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  .bar-list li { display: grid; grid-template-columns: minmax(120px, 220px) 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
  .bl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bl-bar, .reach { position: relative; display: inline-block; height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
  .bl-bar { width: 100%; }
  .reach { width: 60px; vertical-align: middle; }
  .reach.big { display: block; width: 100%; height: 10px; margin-top: 4px; }
  .bl-bar i, .reach i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--grad); }
  .bl-n { font-weight: 700; color: var(--muted); }
  .ppl-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 16px; max-height: 260px; overflow-y: auto; font-size: 13px; }
  .ppl-list li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); }
  .ppl-list li span:last-child { font-size: 12px; text-align: right; }

  @media (max-width: 1180px) {
    .today-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .watch-extra { grid-template-columns: 1fr; }
    .pulse-grid { grid-template-columns: minmax(0, 1fr); }   /* minmax: a long word in a poll or kudos card never widens the page */
  }
  @media (max-width: 760px) {
    .hello-chip { margin-bottom: 18px; padding-right: 16px; }
    .avatar-hero { width: 46px; height: 46px; }
    .today-inner { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(84%, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; padding: 12px 16px; scrollbar-width: none; }   /* (polish2) the snap keeps the 16 px gutter: the first card rests off the screen edge */
    .today-inner::-webkit-scrollbar { display: none; }
    .td-cell { scroll-snap-align: start; }
    .pulse { padding: 44px 0 52px; }
    .poll-card { padding: 20px; }
    .pc-cover { margin: -20px -20px 16px; }
    .kudos-wall { padding: 16px; }
    .kw-grid { grid-template-columns: minmax(0, 1fr); }
    .vb-grid, .cs-pills { grid-template-columns: 1fr; }
    .xbox-head { flex-wrap: wrap; }
    .xbox-head .vb-chips { margin-left: 0; width: 100%; }
    .kd-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ai-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ds-grid { grid-template-columns: 1fr; }
    .action-list { grid-template-columns: 1fr; }
    #reader .drawer-head { padding: 12px 12px 12px 16px; gap: 6px; }
    #reader .drawer-head .btn-ghost { padding: 8px 9px; }
    #reader .drawer-head .btn-ghost span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    #reader .drawer-head .dept-chip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .form-grid4 { grid-template-columns: 1fr 1fr; }
    .form-grid4 .span2 { grid-column: 1 / -1; }
    .ins-cards { grid-template-columns: 1fr 1fr; }
    .bar-list li { grid-template-columns: 1fr auto; }
    .bar-list .bl-bar { grid-column: 1 / -1; grid-row: 2; }
    .bell-menu { position: fixed; top: 64px; left: 12px; right: 12px; width: auto; }
    .ins-table th:nth-child(2), .ins-table td:nth-child(2) { display: none; }
    .dir-meta { width: 100%; }
    .dir-grid { grid-template-columns: 1fr; gap: 10px; }
    .dir-card { padding: 12px 14px; }
    .pav-md { width: 48px; height: 48px; font-size: 16px; }
    .pav-xl { width: 76px; height: 76px; font-size: 24px; }
    .person-head { gap: 14px; }
    .person-name { font-size: 20px; }
    .org-reports { grid-template-columns: 1fr; }
    .ap-fab { right: 10px; bottom: 10px; }
    .ap-fab-btn { width: 69px; height: 88px; }
    .ap-say { display: none; }
    .ap-fold { opacity: 1; }
    .ap-panel { inset: 0; width: auto; height: auto; border-radius: 0; }
    body.has-ap .toasts { left: 12px; right: 12px; bottom: 108px; }
    .toast { min-width: 0; }
  }

  /* ---------- (1.3d) Resources: the quick menu (hover) + the Resources view ---------- */
  .res-mega .mega-inner { grid-template-columns: 310px 1fr; }
  .mega-cat.res-cat { justify-content: flex-start; gap: 12px; padding: 10px 12px; }
  .res-cat .rc-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: color-mix(in srgb, var(--dc) 12%, #fff); color: var(--dc); }
  .res-cat .rc-ico svg { width: 18px; height: 18px; }
  .res-cat .rc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-weight: 600; }
  .res-cat .rc-text small { font: 400 11.5px/1.35 'IBM Plex Sans Thai', Inter, sans-serif; color: var(--muted); }
  .res-cat .count { flex: none; }
  .res-pane { padding: 20px 24px 22px; min-height: 290px; }
  .res-ph { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
  .res-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; color: #fff;
    background: linear-gradient(135deg, var(--dc), color-mix(in srgb, var(--dc) 45%, #00A8E8)); box-shadow: 0 8px 18px color-mix(in srgb, var(--dc) 28%, transparent); }
  .res-ico svg { width: 22px; height: 22px; }
  .res-ico.lg { width: 56px; height: 56px; border-radius: 16px; }
  .res-ico.lg svg { width: 27px; height: 27px; }
  .res-ph-text { flex: 1; min-width: 0; }
  .res-ph-title { margin: 0; font: 800 17px/1.2 'Plus Jakarta Sans', Inter, sans-serif; color: var(--text); }
  .res-ph-th { margin: 4px 0 0; font: 400 13px/1.4 'IBM Plex Sans Thai', Inter, sans-serif; color: var(--muted); }
  .res-ph-all { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--blue); font: 600 13px/1 Inter, sans-serif; cursor: pointer; transition: all .15s; }
  .res-ph-all:hover, .res-ph-all:focus-visible { border-color: var(--cyan); background: #F5FAFF; }
  .res-ph-all svg { width: 15px; height: 15px; }
  .res-mlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; }
  .res-mitem { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 10px; border: 0; border-radius: 12px; background: transparent;
    color: var(--text); text-decoration: none; text-align: left; font: inherit; cursor: pointer; transition: background .15s; }
  .res-mitem:hover, .res-mitem:focus-visible { background: #F5FAFF; }
  .rm-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: color-mix(in srgb, var(--dc) 10%, #fff); color: var(--dc); transition: transform .2s; }
  .res-mitem:hover .rm-ico { transform: scale(1.06); }
  .rm-ico svg { width: 18px; height: 18px; }
  .rm-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .rm-text b { font: 600 14px/1.35 Inter, 'IBM Plex Sans Thai', sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .res-mitem { min-height: 64px; }
  .rm-text small { font-size: 12.5px; line-height: 1.45; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rm-kind { font: 700 10px/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
  .res-msub, .res-sub { display: flex; align-items: center; gap: 8px; font: 700 11.5px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .res-msub { margin: 14px 0 6px 10px; }
  .res-msub svg, .res-sub svg { width: 14px; height: 14px; }
  .res-more { margin: 6px 0 0 10px; padding: 4px 0; border: 0; background: none; color: var(--blue); font: 600 13px/1 Inter, sans-serif; cursor: pointer; }
  .res-pempty { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px; border: 1px dashed var(--line-2); border-radius: 14px; color: var(--muted); }
  .res-pempty > svg { width: 26px; height: 26px; color: var(--soft); }
  .res-pempty p { margin: 0; font-size: 14px; }
  .res-pempty p b { color: var(--text); }
  .res-hero { background: radial-gradient(900px 400px at 85% 0%, rgba(15,168,155,.2), transparent 60%), radial-gradient(700px 360px at 8% 100%, rgba(0,168,232,.14), transparent 60%), linear-gradient(180deg, #050B1A, #0A1630); }
  .res-sec { margin-bottom: 44px; scroll-margin-top: 110px; }
  .res-sec-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
  .res-sec-title { margin: 2px 0 0; font: 800 22px/1.25 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: -.01em; }
  .res-sec-title .n { margin-left: 4px; font: 700 13px/1 Inter, sans-serif; color: var(--soft); vertical-align: middle; }
  .res-sec-th { margin: 4px 0 0; font: 500 14px/1.4 'IBM Plex Sans Thai', Inter, sans-serif; color: var(--dc); }
  .res-sec-d { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
  .res-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .res-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 16px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
    color: var(--text); text-decoration: none; overflow: hidden; transition: transform .2s, box-shadow .2s, border-color .2s; }
  .res-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--dc), #00A8E8); opacity: 0; transition: opacity .2s; }
  .res-card:hover, .res-card:focus-visible { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(11,27,51,.1); border-color: color-mix(in srgb, var(--dc) 35%, var(--line)); }
  .res-card:hover::before, .res-card:focus-visible::before { opacity: 1; }
  .res-card-top { display: flex; align-items: center; gap: 8px; }
  .rc-kind { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 8px; background: color-mix(in srgb, var(--dc) 10%, #fff); color: var(--dc); font: 700 10.5px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
  .rc-kind svg { width: 14px; height: 14px; }
  .rc-ext { margin-left: auto; width: 16px !important; height: 16px !important; color: var(--soft); transition: color .2s, transform .2s; }
  .res-card:hover .rc-ext { color: var(--blue); transform: translate(2px, -2px); }
  .res-card-title { margin: 4px 0 0; font: 700 16px/1.4 Inter, 'IBM Plex Sans Thai', sans-serif; }
  .res-card-desc { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .res-card-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--soft); }
  .res-empty { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 22px 24px; border: 1px dashed var(--line-2); border-radius: var(--radius); background: #fff; color: var(--muted); }
  .res-empty > svg { width: 28px; height: 28px; color: var(--dc); opacity: .7; }
  .res-empty > div { flex: 1; min-width: 200px; }
  .res-empty p { margin: 0; font-size: 14px; }
  .res-empty p b { color: var(--text); }
  .res-sub { margin: 22px 0 10px; }
  .res-pols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
  .res-pols .pol-item { background: #fff; border: 1px solid var(--line); }
  .res-pols .pol-item:hover { background: #F5FAFF; }
  .side-more { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0 8px; padding: 0; border: 0; background: none; color: var(--blue); font: 600 13px/1 Inter, sans-serif; cursor: pointer; }
  .side-more svg { width: 14px; height: 14px; }
  @media (max-width: 1180px) {
    .res-mega .mega-inner { grid-template-columns: 270px 1fr; }
    .res-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 760px) {
    .res-mega .mega-inner { grid-template-columns: 1fr; }
    .res-cat .rc-text small { display: none; }
    .res-mlist, .res-pols, .res-grid { grid-template-columns: 1fr; }
    .res-sec-title { font-size: 19px; }
    .res-ico.lg { width: 46px; height: 46px; border-radius: 13px; }
    .res-ico.lg svg { width: 22px; height: 22px; }
  }
  @media (prefers-reduced-motion: reduce) { .res-card, .rm-ico, .rc-ext { transition: none; } .res-card:hover, .res-card:focus-visible { transform: none; } }

  /* ---------- (1.3d) header fit: the six menu items + search, Manage content, the bell and the profile stay inside the 1360 px header
     at every width (no sideways scroll). Search and Manage content are icon buttons (tooltip + label for screen readers);
     then the menu icons go (<= 1360), the name next to the picture (<= 1240), and the spacing tightens (<= 1100). ---------- */
  .brand-word, .search-pill-text, .search-pill kbd, #cmsBtn span { display: none; }
  #cmsBtn { padding: 9px 11px; }
  .header-inner { gap: 20px; }
  .main-nav .nav-item { padding: 0 10px; }
  .main-nav .nav-item[aria-current="page"]::after { left: 10px; right: 10px; }
  @media (max-width: 1360px) { .nav-ico { display: none; } }
  /* (APJC 1504 Live review) 1366 / 1440 laptops with a scroll bar: seven menu items + icons were up to 31 px too wide; a little less spacing fits them */
  @media (min-width: 1101px) { .header-inner { gap: 14px; } .main-nav .nav-item { padding: 0 8px; } .main-nav .nav-item[aria-current="page"]::after { left: 8px; right: 8px; } }
  /* (header fit, 2026-11-11) above 1460 px the roomier spacing came back and the header grew past its 1360 px box (admin: 58 px, the profile caret beyond the cards' right edge):
     the tighter spacing now holds from 1101 px up, and the name next to the picture stops at 118 px (ellipsis) */
  @media (min-width: 1241px) { .avatar-name, .avatar-name > span:first-child { max-width: 118px; } }
  @media (min-width: 1361px) { .main-nav { gap: 2px; } .main-nav .nav-item { gap: 5px; } .header-actions { gap: 8px; } }   /* the menu icons are back above 1360 px: 34 px less, the admin header fits */
  @media (max-width: 1100px) and (min-width: 761px) { .header-actions { gap: 6px; } }
  @media (max-width: 1240px) { .avatar-name { display: none; } }
  @media (max-width: 1100px) {
    .header-inner { gap: 14px; }
    .main-nav { gap: 2px; }
    .main-nav .nav-item { padding: 0 8px; }
    .main-nav .nav-item[aria-current="page"]::after { left: 8px; right: 8px; }
    .main-nav .nav-caret { display: none; }   /* (1.4a) 7 menu items: the quick menus still open on hover / arrow down */
  }

  /* ---------- (1.4a) SI Hub: quick menu, My certifications, Partner tiers, Expert finder, CMS ---------- */
  .si-mega .mega-inner { display: block; }
  .si-menu { padding: 18px 22px 20px; }
  .si-mgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .si-mcard { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff;
    color: var(--text); text-align: left; font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
  .si-mcard:hover, .si-mcard:focus-visible { border-color: color-mix(in srgb, var(--cyan) 45%, var(--line)); box-shadow: 0 12px 28px rgba(11,27,51,.09); transform: translateY(-2px); }
  .si-mico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #5B21B6, #1A51A4 55%, #00A8E8); box-shadow: 0 8px 18px rgba(91,33,182,.25); }
  .si-mico svg { width: 22px; height: 22px; }
  .si-mtext { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .si-mtext b { font: 700 15px/1.25 'Plus Jakarta Sans', Inter, sans-serif; }
  .si-mtext small { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
  .si-mstat { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
  .si-mstat b { font: 800 22px/1 'Plus Jakarta Sans', Inter, sans-serif; color: var(--blue); }
  .si-mstat small { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
  .si-mnote { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 12px; padding: 11px 14px; border: 1px solid #FDE68A; border-radius: 12px; background: #FFFBEB; color: #92400E; font: 600 13.5px/1.3 Inter, sans-serif; cursor: pointer; text-align: left; }
  .si-mnote span { flex: 1; }
  .si-mnote svg { width: 17px; height: 17px; }
  .si-hero { background: radial-gradient(900px 420px at 85% 0%, rgba(124,58,237,.24), transparent 60%), radial-gradient(700px 360px at 10% 100%, rgba(0,168,232,.16), transparent 60%), linear-gradient(180deg, #050B1A, #0A1630); }
  .si-stats { display: flex; gap: 10px; flex-wrap: wrap; }
  .si-stat { min-width: 128px; padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }
  .si-stat b { display: block; font: 800 26px/1 'Plus Jakarta Sans', Inter, sans-serif; color: #fff; }
  .si-stat span { display: block; margin-top: 6px; font-size: 12px; color: rgba(255,255,255,.7); }
  .si-stat.warn b { color: #FCD34D; } .si-stat.bad b { color: #FCA5A5; } .si-stat.ok b { color: #86EFAC; }
  /* ---------- (SI Hub head, 2026-11-11) the words on the left; on the right the six solution areas around the APJC values (the
     isometric that was the Hero art, drawn by renderSiHead the first time SI Hub opens). The art follows the screen height
     (--si-art-h: 280 to 370 px tall from 1024 px wide), so the tabs and the start of the first tab are in the first screen at
     1366 x 657; the caption sits beside it (761-1023 px: the art on the right of the words, the caption under the stat tiles; a phone:
     a small art under the words, the caption on its right). The platform names would be 6 px at this size: they are hidden, the
     caption names the platform you point at, tap or move to (each platform has its name as aria-label too), the 3 px words under
     A P J C go the same way. Motion: one round (.is-play, every animation ends on the still look within 5 s, WCAG 2.2.2), paused off
     screen (.is-off), then still for good; reduced motion = still */
  .apps-hero.si-head { padding: 22px 0 18px; }
  .si-head-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 40px; }
  .si-head-copy { min-width: 0; padding: 10px 0; }
  /* one line from 1180 px (the base 44 px title would wrap beside the art); balanced when it takes two */
  .si-head .apps-hero-title { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.12; text-wrap: balance; }
  .si-head .si-stats { margin-top: 22px; }
  .si-head + .apps { padding-top: 28px; }
  .si-head-art { --si-art-h: clamp(280px, min(calc(100svh - 360px), 30vw), 370px); min-width: 0; }
  .si-head .iso-wrap { width: auto; display: grid; grid-template-columns: minmax(0, clamp(170px, 16vw, 230px)) auto; align-items: end; gap: 0 18px; }
  .si-head .iso-art { grid-column: 2; grid-row: 1; width: calc(var(--si-art-h) * 640 / 714); }
  .si-head .iso-cap { grid-column: 1; grid-row: 1; min-height: 0; max-width: none; margin: 0 0 30px; text-align: left; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.74); }
  .si-head .iso-cap b { margin-bottom: 4px; }
  .si-head .iso-label, .si-head .iso-word { display: none; }
  /* the letters at 4.5:1 or more: A and P white on their deep tiles (P is deeper than it was in the Hero), J and C ink on the light
     ones (as the A P J C row of the Hero); a tile that is shown lifts and glows (a brighter tile would take the white letters under 4.5) */
  .si-iso .iso-letter { stroke: rgba(6, 20, 50, .5); }
  .si-iso .iso-tile[data-val="2"] .iso-letter, .si-iso .iso-tile[data-val="3"] .iso-letter { fill: #050B1A; stroke: none; }
  .si-iso .iso-tile.on .iso-tlift { filter: drop-shadow(0 8px 12px rgba(41, 196, 244, .4)); }
  /* the value tiles too small for a pointer (under 24 x 24 px, isoVals): drawing only */
  .si-iso .no-vals .iso-tile { pointer-events: none; cursor: default; }
  /* focus: a white edge round the top glass you can see at this size (the platform also lifts and the others step back) */
  .si-iso .iso-node:focus-visible .iso-s3 .iso-tp { stroke: #fff; stroke-width: 6; }
  .si-iso .iso-tile:focus-visible .iso-tsheen { stroke: #fff; stroke-width: 5; }
  /* the still look: no packets, no pulse, the wires a little brighter (as with reduced motion) */
  .si-iso .iso-wire { stroke-opacity: .45; }
  .si-iso .val-on .iso-wire { stroke-opacity: .6; }
  .si-iso .iso-pkt, .si-iso .iso-core-pulse { opacity: 0; }
  .si-iso .iso-led, .si-iso .iso-pkt, .si-iso .iso-float, .si-iso .iso-core-pulse, .si-iso .ic-bob, .si-iso .ic-drop, .si-iso .ic-twinkle,
  .si-iso .ic-led, .si-iso .ic-grow, .si-iso .ic-needle { animation: none; }
  @keyframes isoPktOnce { 0% { stroke-dashoffset: 100; opacity: 0; } 10%, 86% { opacity: .9; } 100% { stroke-dashoffset: 0; opacity: 0; } }
  @keyframes isoNeedleOnce { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(22deg); } 65% { transform: rotate(-12deg); } }
  @media (prefers-reduced-motion: no-preference) {
    .si-iso.is-play .iso-pkt { animation: isoPktOnce 2.2s linear 1 both; }
    .si-iso.is-play .iso-pkt-r { animation-direction: reverse; }
    .si-iso.is-play .iso-float { animation: isoFloat 3s ease-in-out 1; }
    .si-iso.is-play .iso-led { animation: isoBlink 2.4s ease-in-out 1; }
    .si-iso.is-play .ic-led { animation: isoBlink 1.8s ease-in-out 2; }
    .si-iso.is-play .ic-bob { animation: isoBob 3.6s ease-in-out 1; }
    .si-iso.is-play .ic-drop { animation: isoDrip 1.4s linear 3; }
    .si-iso.is-play .ic-twinkle { animation: isoTwinkle 2.8s ease-in-out 1; }
    .si-iso.is-play .ic-grow { animation: isoGrow 2.4s ease-in-out 1; }
    .si-iso.is-play .ic-needle { animation: isoNeedleOnce 4s ease-in-out 1; }
    .si-iso.is-play .iso-core-pulse { animation: isoPulse 2.2s ease-out 2 both; }
    .si-iso.is-off .iso-pkt, .si-iso.is-off .iso-float, .si-iso.is-off .iso-led, .si-iso.is-off .ic-led, .si-iso.is-off .ic-bob, .si-iso.is-off .ic-drop,
    .si-iso.is-off .ic-twinkle, .si-iso.is-off .ic-grow, .si-iso.is-off .ic-needle, .si-iso.is-off .iso-core-pulse { animation-play-state: paused; }
  }
  /* 761-1023 px: the words on the left with the caption under the stat tiles, the art on the right beside both (its wrappers only
     place it here: display: contents, renderSiHead watches the art itself) */
  @media (max-width: 1023px) {
    .si-head-inner { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "copy art" "cap art"; gap: 12px 32px; }
    .si-head-copy { grid-area: copy; padding-bottom: 0; }
    .si-head-art, .si-head .iso-wrap { display: contents; }
    .si-head-art { --si-art-h: clamp(200px, 24vw, 240px); }
    .si-head .iso-art { grid-area: art; }
    /* (fix round 2) the height of its longest words (--iso-cap-h, isoCapFit): a shorter caption no longer moves the art and the tabs */
    .si-head .iso-cap { grid-area: cap; align-self: start; margin: 0 0 6px; max-width: 520px; min-height: var(--iso-cap-h, 0px); }
  }
  /* a phone: the words, then a small art (its six platforms still 24 px or more to tap) with the caption on its right */
  @media (max-width: 760px) {
    .apps-hero.si-head { padding: 18px 0 14px; }
    .si-head-inner { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "copy copy" "art cap"; gap: 8px 14px; }
    .si-head-copy { padding-top: 0; }
    .si-head-art { --si-art-h: 128px; }
    .si-head .iso-cap { align-self: center; margin: 0; font-size: 12.5px; }
    .si-head + .apps { padding-top: 22px; }
  }
  .si-tabs button { display: inline-flex; align-items: center; gap: 7px; }
  .si-tabs svg { width: 15px; height: 15px; }
  .si-mine { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); gap: 18px; align-items: start; }
  .si-side { display: grid; gap: 18px; }
  .si-card { padding: 20px 22px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); min-width: 0; }
  .si-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
  .si-h { margin: 0; font: 800 18px/1.25 'Plus Jakarta Sans', Inter, sans-serif; }
  .si-h .n { margin-left: 4px; font: 700 13px/1 Inter, sans-serif; color: var(--soft); vertical-align: middle; }
  .si-sub { margin: -6px 0 12px; font-size: 13px; color: var(--muted); }
  .si-lab { margin: 16px 0 8px; font: 700 12px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .si-empty { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border: 1px dashed var(--line-2); border-radius: 14px; color: var(--muted); font-size: 14px; line-height: 1.55; }
  .si-empty > svg { flex: none; width: 28px; height: 28px; color: #7C3AED; }
  .si-empty p { margin: 0; } .si-empty b { color: var(--text); }
  .si-how ol { margin: 10px 0 0; padding-left: 22px; list-style: decimal; display: grid; gap: 8px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
  .si-how li::marker { color: #7C3AED; font-weight: 700; }
  .si-foot { margin: 16px 0 0; font-size: 12.5px; color: var(--muted); }
  .vb { --vc: var(--blue); display: inline-grid; place-items: center; flex: none; border-radius: 10px; background: color-mix(in srgb, var(--vc) 13%, #fff); color: color-mix(in srgb, var(--vc) 82%, #000);
    font: 800 12px/1 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: .02em; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vc) 22%, transparent); }
  .vb-xs { width: 22px; height: 22px; border-radius: 6px; font-size: 8.5px; }
  .vb-sm { width: 30px; height: 30px; border-radius: 8px; font-size: 10px; }
  .vb-md { width: 42px; height: 42px; }
  .vb-lg { width: 52px; height: 52px; border-radius: 14px; font-size: 15px; color: #fff; background: linear-gradient(135deg, var(--vc), color-mix(in srgb, var(--vc) 60%, #000)); box-shadow: 0 8px 20px color-mix(in srgb, var(--vc) 30%, transparent); }
  .lv-chip { display: inline-flex; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--lc) 12%, #fff); color: var(--lc); font: 700 10.5px/1.5 Inter, sans-serif; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
  .st-chip { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font: 700 11.5px/1.4 Inter, sans-serif; white-space: nowrap; }
  .st-ok { background: var(--ok-bg); color: #166534; } .st-warn { background: var(--warn-bg); color: #92400E; } .st-bad { background: var(--bad-bg); color: #991B1B; } .st-wait { background: #EEF2FF; color: #3730A3; }
  .cert-list { display: grid; gap: 10px; }
  .cert-item { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #FBFCFE; }
  .ci-main { min-width: 0; }
  .ci-title { margin: 0; font: 700 15px/1.3 'Plus Jakarta Sans', Inter, sans-serif; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .ci-name { margin: 2px 0 0; font-size: 13px; color: var(--text); opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ci-meta { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
  .ci-note { display: flex; gap: 6px; align-items: flex-start; margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--bad-bg); color: #991B1B; font-size: 12.5px; }
  .ci-note svg { flex: none; width: 15px; height: 15px; margin-top: 1px; }
  .ci-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
  .ci-acts { display: flex; gap: 2px; }
  .ci-acts .icon-btn { width: 34px; height: 34px; color: var(--muted); }
  .ci-acts .icon-btn:hover { background: var(--mist); color: var(--blue); }
  .cert-form { margin-bottom: 16px; }
  .cf-fixed { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--mist); font-weight: 400; }
  .cf-lab { display: block; font: 600 13px/1.2 Inter, sans-serif; margin-bottom: 6px; }
  .cf-lab small { font-weight: 400; color: var(--muted); }
  .cf-note { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 12.5px; color: var(--muted); }
  .cf-note svg { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--cyan); }
  .cert-prev { --dc: #7C3AED; }
  .sk-list { display: flex; flex-wrap: wrap; gap: 8px; }
  .sk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 11px; border-radius: 999px; background: #F5F3FF; border: 1px solid #DDD6FE; font-size: 13px; }
  .sk-chip b { font-weight: 600; color: #4C1D95; }
  .sk-chip select { border: 0; background: #fff; border-radius: 999px; padding: 3px 6px; font: 600 11.5px/1.2 Inter, sans-serif; color: #5B21B6; cursor: pointer; }
  .sk-chip button { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 999px; background: transparent; color: #6D28D9; cursor: pointer; }
  .sk-chip button:hover { background: #EDE9FE; }
  .sk-chip button svg { width: 14px; height: 14px; }
  .sk-add { display: flex; gap: 8px; margin-top: 12px; }
  .sk-add .cms-input { flex: 1; min-width: 0; }
  .ind-list { display: flex; flex-wrap: wrap; gap: 6px; }
  .ind-chip { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--muted); font: 600 12.5px/1.2 Inter, sans-serif; cursor: pointer; transition: all .15s; }
  .ind-chip:hover { border-color: var(--cyan); color: var(--blue); }
  .ind-chip[aria-pressed="true"] { background: #0F766E; border-color: #0F766E; color: #fff; }
  .tier-legend { display: flex; gap: 18px; flex-wrap: wrap; margin: 0 0 14px; font-size: 12.5px; color: var(--muted); }
  .tier-legend span { display: inline-flex; align-items: center; gap: 7px; }
  .tier-legend i { display: inline-block; width: 22px; height: 8px; border-radius: 99px; }
  .lg-ren { background: var(--blue); } .lg-now { background: color-mix(in srgb, var(--blue) 25%, #fff); }
  .tier-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .tier-card { --vc: var(--blue); position: relative; padding: 22px 22px 18px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; min-width: 0; }
  .tier-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--vc), color-mix(in srgb, var(--vc) 40%, #00A8E8)); }
  .tc-head { display: flex; align-items: center; gap: 14px; }
  .tc-title { flex: 1; min-width: 0; }
  .tc-title h3 { margin: 0; font: 800 18px/1.2 'Plus Jakarta Sans', Inter, sans-serif; }
  .tc-title p { margin: 3px 0 0; font-size: 13px; color: var(--muted); }
  .tc-tiers { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 0 6px; }
  .tc-arrow { width: 16px !important; height: 16px !important; color: var(--soft); }
  .tier-pill { padding: 5px 11px; border-radius: 9px; background: color-mix(in srgb, var(--vc) 12%, #fff); color: color-mix(in srgb, var(--vc) 80%, #000); font: 700 13px/1.2 Inter, sans-serif; }
  .tier-pill.target { background: #fff; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--vc) 50%, #fff); border: 0; }
  .tier-pill.muted { background: var(--mist); color: var(--muted); font-weight: 600; }
  .tc-ren { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12.5px; color: var(--muted); }
  .tc-ren svg { width: 14px; height: 14px; }
  .tc-ren.soon { color: #B45309; font-weight: 600; }
  .rule-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
  .rule { --rc: var(--blue); }
  .rule.r-risk { --rc: #D97706; } .rule.r-short { --rc: var(--bad); } .rule.r-ok { --rc: #16A34A; }
  .rule-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
  .rule-label { font: 600 14px/1.35 Inter, 'IBM Plex Sans Thai', sans-serif; }
  .rule-n { margin-left: auto; font-size: 12.5px; color: var(--muted); font-weight: 600; }
  .rule.r-short .rule-n, .rule.r-risk .rule-n { color: var(--rc); }
  .rule-bar { position: relative; display: block; height: 10px; border-radius: 99px; background: var(--mist); overflow: hidden; }
  .rule-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; transition: width .6s cubic-bezier(.2,.8,.2,1); }
  .rb-now { background: color-mix(in srgb, var(--rc) 28%, #fff); }
  .rb-ren { background: var(--rc); }
  .rule-people { margin-top: 8px; font-size: 13px; }
  .rule-people summary { cursor: pointer; color: var(--blue); font-weight: 600; font-size: 12.5px; }
  .rule-people ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
  .rule-people li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 8px; border-radius: 8px; background: var(--mist); }
  .rule-people li.risk { background: var(--warn-bg); }
  .rule-people button { border: 0; background: none; padding: 0; color: var(--text); font: 600 13px/1.3 Inter, sans-serif; cursor: pointer; text-align: left; }
  .rule-people button:hover { color: var(--blue); text-decoration: underline; }
  .rule-people span { color: var(--muted); font-size: 12px; white-space: nowrap; }
  .tc-sub { display: flex; align-items: center; gap: 6px; margin: 18px 0 0; font: 700 12px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .tc-sub svg { width: 14px; height: 14px; }
  .tc-note { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
  .tc-empty { margin: 14px 0 0; padding: 14px; border: 1px dashed var(--line-2); border-radius: 12px; font-size: 13.5px; color: var(--muted); }
  .exp-bar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
  .exp-search { flex: 1 1 320px; height: 48px; }
  .exp-search input { font-size: 15px; }
  .exp-filters { display: flex; gap: 8px; flex-wrap: wrap; }
  .exp-sel { width: auto; min-width: 140px; height: 44px; padding: 0 12px; }
  .exp-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 22px; margin: 0 0 14px; font-size: 13.5px; color: var(--muted); }
  .exp-meta .spinner { width: 14px; height: 14px; }
  .link-btn { border: 0; background: none; padding: 0; color: var(--blue); font: 600 13px/1 Inter, sans-serif; cursor: pointer; text-decoration: underline; }
  .exp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
  .exp-card { display: flex; align-items: flex-start; gap: 14px; min-width: 0; padding: 16px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow);
    text-align: left; cursor: pointer; font: inherit; color: inherit; transition: transform .15s, box-shadow .15s, border-color .15s; }
  .exp-card:hover { transform: translateY(-2px); border-color: #DDD6FE; box-shadow: 0 2px 4px rgba(11,27,51,.06), 0 14px 30px rgba(91,33,182,.1); }
  .exp-card:focus-visible { outline: 3px solid rgba(124,58,237,.35); outline-offset: 2px; }
  .exp-card .dc-title { color: var(--blue); font-weight: 600; opacity: 1; }
  .ec-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
  .ec-cert { padding: 3px 8px; border-radius: 7px; background: color-mix(in srgb, var(--lc) 12%, #fff); color: var(--lc); font: 700 11.5px/1.3 Inter, sans-serif; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lc) 22%, transparent); }
  .ec-more { padding: 3px 6px; font: 700 11.5px/1.3 Inter, sans-serif; color: var(--muted); }
  .ec-skill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; background: #F5F3FF; color: #5B21B6; font: 600 11.5px/1.3 Inter, sans-serif; }
  .lvl { display: inline-block; width: 14px; height: 6px; border-radius: 4px; background: linear-gradient(90deg, currentColor 33%, rgba(91,33,182,.2) 33%); }
  .lvl.l2 { background: linear-gradient(90deg, currentColor 66%, rgba(91,33,182,.2) 66%); } .lvl.l3 { background: currentColor; }
  .ec-ind { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: #F0FDFA; color: #0F766E; font: 600 11.5px/1.3 Inter, sans-serif; }
  .ec-ind svg { width: 12px; height: 12px; }
  .exp-more { grid-column: 1 / -1; margin: 4px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
  .pc-certs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
  .pc-cert { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 12px; background: color-mix(in srgb, var(--lc) 8%, #fff); border: 1px solid color-mix(in srgb, var(--lc) 20%, #fff); }
  .pc-cert > span:last-child { display: flex; flex-direction: column; }
  .pc-cert b { font: 700 13px/1.2 Inter, sans-serif; color: var(--text); }
  .pc-cert small { font-size: 11px; color: var(--lc); font-weight: 600; }
  .pc-skills { display: flex; flex-wrap: wrap; gap: 6px; }
  .cq-cert { display: flex; align-items: center; gap: 10px; }
  .cq-proof { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
  .cq-proof a { display: inline-flex; align-items: center; gap: 5px; color: var(--blue); font-weight: 600; text-decoration: none; }
  .cq-proof a:hover { text-decoration: underline; }
  .cq-proof svg { width: 14px; height: 14px; }
  .icon-btn.ok { color: #16A34A; }
  .icon-btn.ok:hover { background: var(--ok-bg); }
  .cq-reject td { background: #FEF2F2; }
  .cq-reject-box { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .cq-reject-box .cms-input { flex: 1 1 280px; }
  .prog-box { --vc: var(--blue); margin-bottom: 16px; padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--vc); border-radius: 12px; background: #fff; }
  .prog-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
  .prog-head .min-w-0 { flex: 1; }
  .prog-empty { margin: 0; }
  .rule-certs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; max-height: 320px; overflow: auto; padding: 4px; }
  .rule-certs fieldset { margin: 0; padding: 8px 10px 10px; border: 1px solid var(--line); border-radius: 10px; }
  .rule-certs legend { padding: 0 4px; font: 700 12px/1 Inter, sans-serif; color: var(--muted); }
  .rule-certs .aud-opt { display: flex; }
  @media (max-width: 1180px) {
    .si-mgrid { grid-template-columns: 1fr; }
    .si-mine { grid-template-columns: 1fr; }
    .si-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 900px) { .tier-grid { grid-template-columns: 1fr; } }
  @media (max-width: 760px) {
    .si-side { grid-template-columns: 1fr; }
    .si-card { padding: 16px; }
    .cert-item { grid-template-columns: 34px minmax(0, 1fr); }
    .cert-item .vb-md { width: 34px; height: 34px; font-size: 10px; }
    .ci-side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
    .si-stat { min-width: 0; flex: 1 1 40%; }
    .exp-grid { grid-template-columns: 1fr; }
    .exp-sel { flex: 1 1 45%; min-width: 0; }
    .tc-ren { margin-left: 0; width: 100%; }
    .sk-add { flex-wrap: wrap; }
  }
  @media (prefers-reduced-motion: reduce) { .si-mcard, .exp-card, .rule-bar i { transition: none; } .si-mcard:hover, .exp-card:hover { transform: none; } }

  /* ---------- responsive ---------- */
  @media (max-width: 1440px) {
    .kev-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .kev-row .kev-item:nth-child(n+5) { display: none; }
  }
  @media (max-width: 1280px) {
    .search-pill kbd { display: none; }
    #cmsBtn span { display: none; }
    #cmsBtn { padding: 9px 11px; }
    .iso-wrap { width: min(100%, 520px); }
    .hero-inner { padding-left: 40px; }
    .nr-grid.wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 1180px) {
    .mega-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mega-card:nth-child(4n) { border-right: 1px solid var(--line); }
    .mega-card:nth-child(3n) { border-right: 0; }
    .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .avatar-name { display: none; }
    .nav-ico { display: none; }
    .nr-layout { grid-template-columns: minmax(0, 1fr) 300px; }
    .nr-grid { grid-template-columns: 1fr; }
    .lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lane-lead .ll-media { aspect-ratio: 2 / 1; }
    .kev-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kev-row .kev-item:nth-child(n+4) { display: none; }
  }
  @media (max-width: 1023px) {
    .main-nav, .brand-word { display: none; }
    .hero-inner { grid-template-columns: 1fr; padding: 56px 24px 40px; min-height: 0; }
    .hero-title { font-size: clamp(22px, 5.3vw, 48px); }
    .hero-art { min-height: 0; padding: 18px 0 8px; }
    .iso-wrap { width: min(100%, 540px); }
    .nr-top { grid-template-columns: 1fr; }
    .nr-side-stack { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .story.mini { flex-direction: column; }
    .story.mini .story-media { width: auto; aspect-ratio: 16 / 9; }
    .nr-layout { grid-template-columns: 1fr; }
    .nr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nr-side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kev-band { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    /* one centred column: brand -> card -> lead + values */
    .login-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "card" "more"; row-gap: 24px; align-content: center; max-width: 600px; padding: 40px 20px; }
    .login-brand, .login-more { align-self: auto; }
    .login-card { justify-self: stretch; max-width: none; }
    .login-brand-logo { margin-bottom: 20px; width: 110px; }
    .login-lead { margin: 0 0 16px; font-size: 16px; }
    .login-title { font-size: clamp(20px, 6vw, 38px); }
    .login-title { font-size: clamp(18px, min(6vw, 6.85cqi), 38px); }   /* (play port) the column decides below 334 px (the fallback font fits) */
    .cover-box { grid-template-columns: 1fr; }
  }
  @media (max-width: 760px) {
    :root { --header-h: 60px; }
    .header-inner { padding: 0 14px; gap: 10px; }
    .brand-logo { height: 26px; }
    #cmsBtn span, .search-pill kbd { display: none; }
    .search-pill { padding: 0 12px; }
    .hero-inner { padding: 40px 16px 28px; }
    .hero-lead { font-size: 16px; }
    .hero-stats { gap: 18px; }
    .hero-stats dd { font-size: 22px; }
    .iso-wrap { width: min(100%, 420px); }
    .iso-label { display: none; }
    .iso-cap { margin-top: -4px; font-size: 12.5px; }
    .newsroom { padding: 44px 0 52px; }
    .nr-toolbar > .chips-scroll { flex-wrap: nowrap; overflow-x: auto; }
    .nr-tools { width: 100%; }
    .seg { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
    .nr-search { flex: 1; width: auto; min-width: 160px; }
    .nr-side-stack, .nr-grid, .nr-grid.wide, .nr-side { grid-template-columns: 1fr; }
    .nr-pair .ev-list, .nr-pair .pol-list { grid-template-columns: 1fr; }
    .story.mini { flex-direction: row; }
    .story.mini .story-media { width: 112px; aspect-ratio: auto; }
    .story.lead .story-body { padding: 18px 18px 20px; }
    .lanes { grid-template-columns: 1fr; }
    .kev-row { grid-template-columns: 1fr 1fr; }
    .kev-row .kev-item:nth-child(n+3) { display: none; }
    .watch { padding: 44px 0; }
    .bento { grid-template-columns: 1fr 1fr; gap: 12px; }
    .app-card.hero-card, .app-card.wide { grid-column: span 2; grid-row: auto; }
    .apps-filter { width: 100%; }
    .mega-inner { grid-template-columns: 1fr; }
    .mega-cats { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 8px; }
    .mega-cat { white-space: nowrap; }
    .mega-grid { grid-template-columns: 1fr; max-height: 60vh; overflow-y: auto; }
    .mega-card { border-right: 0 !important; min-height: 0; }
    .cms-form { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .promo-text { font-size: 12px; }
    .ticker-label { padding: 0 12px; }
    .section-inner { padding: 0 16px; }
    /* a phone: the white logo is right above the card, so the card starts with its heading; the button is in the first screen */
    .login-grid { align-content: start; row-gap: 18px; padding: 22px 16px 24px; }
    .login-brand-logo { width: 92px; margin-bottom: 14px; }
    .login-eyebrow { gap: 10px; margin-bottom: 12px; font-size: 11px; letter-spacing: .18em; }
    .login-eyebrow-rule { width: 20px; }
    .login-card { padding: 24px 20px 18px; border-radius: 20px; }
    .login-card-logo { display: none; }
    .login-card-title { font-size: 22px; }
    .login-card-sub { font-size: 14px; }
    .ms-box { margin-top: 20px; }
    .btn-ms { min-height: 58px; padding: 10px 16px; gap: 12px; font-size: 16px; }
    .login-help { margin-top: 20px; padding-top: 14px; }
    .login-foot { padding: 14px 16px 18px; }
    .reader-cover { margin: 0 -16px 20px; }
    .drawer-body { padding: 20px 16px 36px; }
  }
  /* small phones: an admin or editor header also holds Manage content, so 360 px was 7 px too wide (the menu button cut off).
     The profile button keeps the photo only, the actions sit closer, and at 340 and below the logo and gutters shrink */
  @media (max-width: 400px) {
    .header-actions { gap: 6px; }
    #profileBtn .nav-caret { display: none; }
    .avatar-btn { padding-right: 4px; }
  }
  @media (max-width: 340px) {
    .header-inner { padding: 0 10px; gap: 8px; }
    .brand-logo { height: 22px; }
  }
  @media (max-width: 420px) {
    .bento { grid-template-columns: 1fr; }
    .app-card.hero-card, .app-card.wide { grid-column: auto; }
    .values li span { display: none; }
    .values li { padding-right: 6px; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .ticker-track { animation: none !important; }
    .ticker-half.dup { display: none; }
    .ticker-viewport { overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
    .iso-pkt { display: none; }
    .iso-wire { stroke-opacity: .45; }
  }
  /* =============================================== Access tool (CMS > Access, Phase A: read only) ===============================================
     The matrix of everyone in the User Master + the person panel. The CMS drawer is full width on this tab only (.cms-wide); the table scrolls
     inside its own wrapper (never the page). The panel (#accPanel, z-index 91) is docked beside the table at 1440 px and wider, a drawer on top
     of the CMS below that, full screen on a phone. Switches are role=switch buttons, read only here (aria-disabled).
     ================================================================================================================================================ */
  .drawer.cms-wide { left: 0; width: auto; }
  .acc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .acc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
  .acc-h { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
  .acc-sub { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
  .acc-mode { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; margin-bottom: 12px; border-radius: 12px; font-size: 13px; line-height: 1.5; }
  .acc-mode > svg { width: 16px; height: 16px; margin-top: 2px; }
  .acc-mode.ro { background: var(--warn-bg); color: #92400E; }
  .acc-mode.rw { background: var(--ok-bg); color: #166534; }
  .acc-mode ul { margin: 2px 0 0; padding-left: 18px; list-style: disc; }
  .acc-mode ul ul { list-style: circle; }
  .acc-later { margin: 6px 0 0; font-weight: 600; }
  .acc-note { display: flex; gap: 10px; align-items: flex-start; padding: 9px 14px; margin-bottom: 12px; border-radius: 12px; background: var(--mist); border: 1px solid var(--line); font-size: 13px; line-height: 1.5; color: var(--text); }
  .acc-note > svg { width: 16px; height: 16px; margin-top: 2px; color: var(--blue); }
  .acc-note.warn { background: var(--warn-bg); border-color: #FDE68A; color: #92400E; }
  .acc-note.warn > svg { color: var(--warn); }
  .acc-tools { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; margin-bottom: 12px; }
  .acc-q { width: 320px; max-width: 100%; }
  .acc-fbtn { display: none; }
  .acc-filt { display: contents; }
  .acc-sel { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 Inter, sans-serif; color: var(--muted); }
  .acc-sel select { height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line-2); background: #fff; font: 500 13px/1.2 Inter, 'IBM Plex Sans Thai', sans-serif; color: var(--text); max-width: 230px; }
  .acc-chips, .audit-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; }
  .audit-chips { margin-bottom: 14px; }
  .acc-chips .chip, .audit-chips .chip { padding: 7px 11px; font-size: 12.5px; }
  .acc-chips .chip[aria-pressed="true"], .audit-chips .chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: #fff; }
  .acc-chips .chip.zero { opacity: .55; }
  .acc-skel { display: grid; gap: 8px; }
  .acc-skel .skeleton { height: 52px; }
  .acc-down { display: grid; justify-items: center; gap: 6px; }
  .acc-down > svg { width: 28px; height: 28px; color: var(--soft); }
  .acc-down p { margin: 0; }
  /* the matrix */
  /* accFit() sets the max-height from where the table starts; sideways scrolling stays inside, up / down passes on to the drawer */
  .acc-wrap { overflow: auto; max-height: max(360px, calc(100vh - 230px)); border: 1px solid var(--line); border-radius: 14px; background: #fff; overscroll-behavior-x: contain; }
  .acc-wrap:focus-visible { outline-offset: -2px; }
  .acc-table { min-width: 1290px; font-size: 13px; border-collapse: separate; border-spacing: 0; }
  .acc-table thead th { position: sticky; top: 0; z-index: 3; background: #F8FAFC; white-space: nowrap; padding: 10px 8px; }
  .acc-table thead th .n { margin-left: 3px; padding: 1px 6px; border-radius: 99px; background: #E2E8F0; color: var(--text); letter-spacing: 0; }
  .acc-table td, .acc-table tbody th { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
  .acc-table tbody th { text-align: left; font: inherit; letter-spacing: normal; text-transform: none; color: inherit; }
  .acc-table .acc-c-person { position: sticky; left: 0; z-index: 2; width: 250px; min-width: 250px; max-width: 250px; background: #fff; }
  .acc-table .acc-c-role { position: sticky; left: 250px; z-index: 2; width: 104px; min-width: 104px; background: #fff; box-shadow: 1px 0 0 var(--line); }
  .acc-table thead .acc-c-person, .acc-table thead .acc-c-role { z-index: 4; background: #F8FAFC; }
  .acc-table tbody tr { cursor: pointer; }
  .acc-table tbody tr:hover td, .acc-table tbody tr:hover th { background: #F6F9FD; }
  .acc-table tbody tr.is-sel td, .acc-table tbody tr.is-sel th { background: #EEF6FF; }
  .acc-table .acc-c-sys { min-width: 86px; }
  .acc-table td.acc-ai { min-width: 104px; }
  .acc-table td.acc-ai .acc-why { white-space: nowrap; }
  .acc-who { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: inherit; font: inherit; border-radius: 8px; }
  .acc-who .pav { grid-row: 1 / span 3; }
  .acc-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .acc-u, .acc-meta { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .acc-flags { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0 46px; }
  .acc-flag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; font: 700 10.5px/1.5 Inter, sans-serif; white-space: nowrap; }
  .acc-flag.bad { background: var(--bad-bg); color: #B91C1C; }
  .acc-flag.gray { background: #F1F5F9; color: var(--muted); }
  .acc-flag.warn { background: var(--warn-bg); color: #92400E; }
  .role-chip.ovr::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 5px; border-radius: 99px; background: currentColor; vertical-align: 1px; }
  .acc-cell { display: inline-flex; align-items: center; gap: 6px; }
  .acc-sw { position: relative; display: inline-block; width: 34px; height: 20px; padding: 0; border: 0; border-radius: 999px; background: #CBD5E1; cursor: pointer; flex: none; vertical-align: middle; }
  .acc-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 99px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s ease; }
  .acc-sw[aria-checked="true"] { background: var(--ok); }
  .acc-sw[aria-checked="true"]::after { transform: translateX(14px); }
  .acc-sw[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
  .acc-st2 { font-weight: 600; }
  .acc-st2.bad { color: var(--bad); }
  .acc-na { font-size: 12px; color: var(--muted); white-space: nowrap; }
  .acc-why { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.35; color: var(--muted); }
  .acc-tag { display: inline-flex; align-items: center; margin-top: 5px; padding: 1px 7px; border-radius: 6px; font: 700 11px/1.5 Inter, sans-serif; white-space: nowrap; }
  .acc-sys .acc-tag { display: table; }
  .acc-tag.t-1click { background: var(--ok-bg); color: #15803D; }
  .acc-tag.t-link { background: #E0F2FE; color: #0369A1; }
  .acc-tag.t-locked { background: #F1F5F9; color: var(--muted); }
  .acc-tag.t-none { background: var(--warn-bg); color: #92400E; }
  .acc-tag.t-unknown { background: #fff; border: 1px dashed var(--line-2); color: var(--muted); }
  .acc-lock { display: inline-flex; color: var(--soft); }
  .acc-lock svg { width: 13px; height: 13px; }
  .acc-wdot { display: inline-block; width: 8px; height: 8px; border-radius: 99px; background: var(--warn); box-shadow: 0 0 0 2px var(--warn-bg); flex: none; }
  .acc-apps-btn { padding: 4px 9px; border-radius: 8px; border: 1px solid var(--line-2); background: #fff; font: 600 12.5px/1.2 Inter, sans-serif; color: var(--text); cursor: pointer; margin-right: 4px; }
  .acc-apps-btn:hover { border-color: var(--cyan); color: var(--blue); }
  .acc-last { white-space: nowrap; color: var(--muted); }
  .acc-more { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
  .acc-cards, .acc-legend { display: none; }
  /* the person panel */
  .acc-panel { z-index: 91; width: min(520px, 100vw); }
  .acc-p-title { margin: 0; min-width: 0; font: 700 12px/1.35 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .acc-i-back { display: none; }
  .acc-p-body { padding-top: 20px; }
  .acc-p-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }
  .acc-p-name { margin: 0; font-size: 21px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
  .acc-p-u { margin: 3px 0 0; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
  .acc-p-meta { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
  .acc-p-role { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }
  .acc-p-last { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
  .acc-p-last svg { width: 14px; height: 14px; }
  .acc-p-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
  .acc-banner { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45; }
  .acc-banner > svg { width: 16px; height: 16px; margin-top: 1px; }
  .acc-banner.bad { background: var(--bad-bg); color: #991B1B; }
  .acc-banner.warn { background: var(--warn-bg); color: #92400E; }
  .acc-banner.gray { background: #F1F5F9; color: #334155; }
  .acc-sec { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); scroll-margin-top: 8px; }
  .acc-sec-h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 700 12px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .acc-sec-h svg { width: 16px; height: 16px; color: var(--blue); }
  .acc-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 13.5px; line-height: 1.45; }
  .acc-lines li { display: flex; gap: 8px; align-items: flex-start; }
  .acc-lines li > svg { width: 16px; height: 16px; margin-top: 2px; }
  .acc-l-ok > svg { color: var(--ok); } .acc-l-bad > svg { color: var(--bad); } .acc-l-warn > svg { color: var(--warn); } .acc-l-info > svg { color: var(--blue); } .acc-l-gray > svg { color: var(--soft); }
  .acc-l-gray { color: var(--muted); }
  .acc-verdict { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 9px 12px; border-radius: 10px; font-weight: 700; font-size: 13.5px; }
  .acc-verdict svg { width: 17px; height: 17px; }
  .acc-verdict.ok { background: var(--ok-bg); color: #166534; }
  .acc-verdict.bad { background: var(--bad-bg); color: #991B1B; }
  .acc-swrow { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--mist); border: 1px solid var(--line); font-size: 13px; }
  .acc-swt { display: grid; gap: 2px; min-width: 0; }
  .acc-swt small { font-size: 12px; color: var(--muted); line-height: 1.4; }
  .acc-hint { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
  .acc-sub2 { margin: 12px 0 6px; font-size: 13px; color: var(--muted); }
  .acc-sub2 b { color: var(--text); }
  .acc-views { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
  .acc-views li { padding: 4px 10px; border-radius: 999px; background: #EEF6FF; color: var(--blue); font: 600 12px/1.4 Inter, sans-serif; }
  .acc-views.tabs li { background: #F1F5F9; color: var(--text); }
  .acc-g { margin: 12px 0 6px; font: 700 11px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }   /* (RBAC, answer 18) */
  .acc-apps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  .acc-app { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
  .acc-app-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--grad-soft); color: var(--blue); }
  .acc-app-ico svg { width: 16px; height: 16px; }
  .acc-app.st-visible_locked .acc-app-ico { background: var(--warn-bg); color: var(--warn); }
  .acc-app.st-hidden_role, .acc-app.st-inactive, .acc-app.st-hidden_admin { background: #FAFBFD; }
  .acc-app.st-hidden_role .acc-app-ico, .acc-app.st-inactive .acc-app-ico, .acc-app.st-hidden_admin .acc-app-ico { background: #F1F5F9; color: var(--soft); }
  .acc-app-t { display: grid; gap: 1px; min-width: 0; font-size: 13px; }
  .acc-app-t b { overflow-wrap: anywhere; }
  .acc-app-t small { font-size: 11.5px; color: var(--muted); }
  .acc-need { font-size: 11.5px; color: #92400E; }
  .acc-need.has { color: var(--muted); }
  .acc-st { padding: 2px 8px; border-radius: 999px; font: 700 11px/1.4 Inter, sans-serif; white-space: nowrap; background: var(--ok-bg); color: #15803D; }
  .acc-st.st-visible_locked { background: var(--warn-bg); color: #92400E; }
  .acc-st.st-hidden_role, .acc-st.st-inactive { background: #F1F5F9; color: var(--muted); }
  .acc-st.st-hidden_admin { background: var(--bad-bg); color: #B91C1C; }
  .acc-hide[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
  .acc-sysl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .acc-sysi { min-width: 0; }
  .acc-sysi { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
  .acc-sysi-top { display: flex; align-items: center; gap: 10px; }
  .acc-k { display: inline-grid; place-items: center; min-width: 42px; height: 24px; padding: 0 6px; border-radius: 7px; background: var(--text); color: #fff; font: 800 11px/1 Inter, sans-serif; letter-spacing: .04em; }
  .acc-sysn { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .acc-sysi-mid { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 4px; }
  .acc-sysi-mid .acc-why, .acc-sysi > .acc-why { margin-top: 5px; }
  .acc-lag { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 11.5px; color: var(--muted); }
  .acc-lag svg { width: 13px; height: 13px; }
  .acc-sysi .acc-lines { margin-top: 8px; font-size: 12.5px; }
  .acc-menuprev { padding: 10px 6px 4px; border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow); max-width: 300px; }
  .acc-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .acc-hist li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; background: var(--mist); font-size: 12.5px; }
  .acc-hw { color: var(--muted); }
  .acc-hd { flex: 1 1 100%; overflow-wrap: anywhere; color: var(--text); }
  .audit-td { overflow-wrap: anywhere; }
  .calm .confirm-icon { background: #E0F2FE; color: var(--blue); }
  /* docked (>= 1440): the table narrows and keeps scrolling inside its wrapper; stacked below that: the table dims behind the panel */
  @media (min-width: 1440px) {
    .acc-panel { width: 440px; border-left: 1px solid var(--line); }
    #cms.acc-open { padding-right: 440px; }
  }
  @media (max-width: 1439px) {
    #cms.acc-open::after { content: ''; position: absolute; inset: 0; z-index: 6; background: rgba(5,11,26,.32); cursor: pointer; }
  }
  @media (max-width: 760px) {
    .acc-panel { width: 100vw; }
    .acc-panel .drawer-head { justify-content: flex-start; }
    .acc-close { order: -1; }
    .acc-i-x { display: none; }
    .acc-i-back { display: block; }
    .acc-head { flex-wrap: wrap; }
    .acc-q { width: auto; flex: 1 1 200px; }
    .acc-fbtn { display: inline-flex; min-height: 40px; }
    .acc-filt { display: none; flex: 1 1 100%; }
    .acc-tools.open .acc-filt { display: grid; gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--mist); }
    .acc-sel { display: grid; gap: 6px; }
    .acc-sel select { width: 100%; max-width: none; height: 44px; }
    .acc-chips .chip { min-height: 40px; }
    .acc-wrap { display: none; }
    .acc-cards { display: grid; gap: 10px; }
    .acc-card { display: grid; gap: 10px; width: 100%; min-height: 44px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: #fff; text-align: left; font: inherit; color: inherit; cursor: pointer; }
    .acc-card-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
    .acc-card-id { display: grid; min-width: 0; }
    .acc-card-id b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
    .acc-card-id small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .acc-card-mid { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
    .acc-mini { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; background: var(--mist); font: 600 11.5px/1.4 Inter, sans-serif; color: var(--text); }
    .acc-mini svg { width: 13px; height: 13px; color: var(--blue); }
    .acc-mini.bad { background: var(--bad-bg); color: #B91C1C; } .acc-mini.bad svg { color: var(--bad); }
    .acc-mini.off { color: var(--muted); } .acc-mini.off svg { color: var(--soft); }
    .acc-pills { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
    .acc-pill { position: relative; display: grid; place-items: center; align-content: center; gap: 1px; min-height: 44px; border-radius: 10px; border: 1.5px solid var(--line-2); background: #fff; color: var(--muted); font: 800 11px/1 Inter, sans-serif; }
    .acc-pill svg { width: 11px; height: 11px; }
    .acc-pill.on { border-color: transparent; background: #E2E8F0; color: var(--text); }
    .acc-pill.t-1click { background: var(--ok-bg); border-color: transparent; color: #15803D; }
    .acc-pill.t-link { background: #E0F2FE; border-color: transparent; color: #0369A1; }
    .acc-pill.t-none { border-style: dashed; background: #fff; color: var(--soft); }
    .acc-pill.t-unknown { border-style: dotted; background: #fff; color: var(--muted); }
    .acc-pill .acc-wdot { position: absolute; top: 4px; right: 4px; }
    /* the pill colours, said once above the cards */
    .acc-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
    .acc-legend .acc-pill { display: inline-flex; min-height: 0; padding: 3px 9px; font: 700 11px/1.4 Inter, sans-serif; }
    .acc-p-acts .btn-outline, .acc-p-acts .btn-ghost { min-height: 40px; }
    /* 44 px tap targets in the full-screen panel (the switch looks the same, its hit area is larger) */
    .acc-swrow .acc-sw, .acc-sysi .acc-sw { width: 44px; height: 26px; }
    .acc-swrow .acc-sw::after, .acc-sysi .acc-sw::after { top: 4px; left: 4px; width: 18px; height: 18px; }
    .acc-swrow .acc-sw[aria-checked="true"]::after, .acc-sysi .acc-sw[aria-checked="true"]::after { transform: translateX(18px); }
    .acc-swrow .acc-sw::before, .acc-sysi .acc-sw::before { content: ''; position: absolute; inset: -9px -2px; }
    .acc-hide { min-height: 44px; min-width: 44px; }
  }
  @media (prefers-reduced-motion: reduce) { .acc-sw::after { transition: none; } }
  /* =============================================== Access tool, Phase B: the Portal switches (staged, then Review & apply) ===============================================
     A staged cell is striped (the stripes move slowly; not with reduced motion) and says "pending". The changes bar is fixed at the bottom above
     the CMS and the panel (z-index 92), the Apps checklist floats above both (93), the review is a .cmdk dialog (95) placed before #confirm.
     ========================================================================================================================================================== */
  #loginError.paused { background: #FFFBEB; color: #92400E; box-shadow: inset 0 0 0 1px #FDE68A; }
  .acc-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 10px; margin-bottom: 12px; }
  .acc-modes .acc-mode { margin-bottom: 0; }
  .acc-pend { background-color: #F0F9FF; background-image: repeating-linear-gradient(135deg, rgba(0,168,232,.13) 0 6px, transparent 6px 12px); background-size: 17px 17px; animation: accStripes 2.4s linear infinite; }
  @keyframes accStripes { to { background-position: 17px 0; } }
  .acc-table tbody td.acc-pend, .acc-table tbody tr:hover td.acc-pend, .acc-table tbody tr.is-sel td.acc-pend { background-color: #F0F9FF; }
  .acc-pend-tag { display: inline-flex; align-items: center; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: #0369A1; color: #fff; font: 700 10.5px/1.6 Inter, sans-serif; letter-spacing: .02em; vertical-align: 1px; white-space: nowrap; }
  td .acc-pend-tag { margin: 4px 0 0; }
  .acc-sw.is-pend { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--cyan); }
  .acc-sw:not([aria-disabled="true"]):hover { filter: brightness(.95); }
  .acc-apps-btn.is-pend { border-color: var(--cyan); color: #0369A1; }
  .acc-hide.is-pend { color: #0369A1; }
  .acc-hide[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
  .acc-banner.pend { background: #E0F2FE; color: #075985; }
  .acc-banner.ok { background: var(--ok-bg); color: #166534; }
  .acc-ro-note { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 10px; }
  .acc-ro-note svg { width: 14px; height: 14px; margin-top: 2px; flex: none; }
  .acc-va-note { margin: 4px 0 0; }
  .acc-p-acts .btn-outline:disabled { opacity: .5; cursor: not-allowed; background: #fff; border-color: var(--line-2); color: var(--text); }
  .acc-card.is-pend { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan) inset; }
  .acc-mini.pend { outline: 2px dashed var(--cyan); outline-offset: 1px; }
  /* the changes bar */
  .acc-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 92; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 24px calc(10px + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -10px 30px rgba(11,27,51,.12); animation: rise .2s ease; }
  .acc-bar-t { display: flex; align-items: center; gap: 10px; margin: 0; min-width: 0; font-size: 14px; }
  .acc-bar-t > svg { width: 18px; height: 18px; color: var(--cyan); flex: none; }
  .acc-bar-t span { display: grid; min-width: 0; }
  .acc-bar-t small { font-size: 12px; color: var(--muted); }
  .acc-bar-acts { display: flex; align-items: center; gap: 8px; flex: none; }
  .acc-bar-acts .btn-primary svg { width: 16px; height: 16px; }
  body.acc-has-bar #cmsBody, body.acc-has-bar #accBody { padding-bottom: 96px; }
  body.acc-has-bar .toasts { bottom: 88px; }
  /* the Apps checklist */
  .acc-pop { position: fixed; z-index: 93; width: min(360px, calc(100vw - 24px)); max-height: min(520px, calc(100vh - 120px)); display: flex; flex-direction: column; border-radius: 16px; background: #fff;
    border: 1px solid var(--line); box-shadow: var(--shadow-lg); animation: pop .14s ease; }
  .acc-pop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 12px 10px 8px 16px; border-bottom: 1px solid var(--line); }
  .acc-pop-t { margin: 0; font: 700 14px/1.35 Inter, 'IBM Plex Sans Thai', sans-serif; overflow-wrap: anywhere; }
  .acc-pop-s { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
  .acc-pop-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; display: grid; gap: 2px; }
  .acc-pi { display: flex; align-items: center; gap: 6px; padding: 0 8px 0 0; border-radius: 10px; }
  .acc-pi label { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; min-height: 44px; padding: 6px 8px; cursor: pointer; }
  .acc-pi input { width: 18px; height: 18px; accent-color: var(--blue); flex: none; }
  .acc-pi-t { display: grid; min-width: 0; font-size: 13px; }
  .acc-pi-t b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .acc-pi-t small { font-size: 11.5px; color: var(--muted); }
  .acc-pi.is-na label { cursor: not-allowed; }
  .acc-pi.is-na .acc-pi-t { color: var(--muted); }
  .acc-pi:not(.acc-pend):hover { background: var(--mist); }
  .acc-pop-note { margin: 0; padding: 8px 16px; font-size: 11.5px; line-height: 1.45; color: var(--muted); border-top: 1px solid var(--line); }
  .acc-pop-foot { display: flex; justify-content: space-between; gap: 8px; padding: 8px 12px 12px; }
  /* Review & apply */
  .acc-review { padding-top: 6vh; }
  .acc-rv-box { display: flex; flex-direction: column; width: min(680px, 94vw); max-height: 88vh; border-radius: 18px; background: #fff; box-shadow: var(--shadow-lg); animation: pop .16s ease; }
  .acc-rv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 18px 12px 24px; border-bottom: 1px solid var(--line); }
  .acc-rv-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
  .acc-rv-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 24px 4px; }
  .acc-rv-body > .acc-banner { margin-top: 12px; }
  .acc-rv-p { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .acc-rv-who { display: flex; align-items: center; gap: 10px; }
  .acc-rv-who span { display: grid; }
  .acc-rv-who b { font-size: 14px; overflow-wrap: anywhere; }
  .acc-rv-who small { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
  .acc-rv-lines { list-style: none; margin: 10px 0 0; padding: 0 0 0 46px; display: grid; gap: 8px; }
  .acc-rv-l { padding: 10px 12px; border-radius: 12px; background: var(--mist); border: 1px solid var(--line); }
  .acc-rv-l.is-bad { border-color: #FCA5A5; background: #FFF7F7; }
  .acc-rv-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
  .acc-rv-t { font-weight: 600; font-size: 13.5px; overflow-wrap: anywhere; }
  .acc-rv-lag { display: flex; align-items: flex-start; gap: 6px; margin: 4px 0 0; font-size: 12px; color: var(--muted); }
  .acc-rv-lag svg { width: 13px; height: 13px; margin-top: 2px; flex: none; }
  .acc-rv-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: #7C2D12; }
  .acc-rv-note.muted { color: var(--muted); }
  .acc-rv-rl { display: block; margin: 10px 0 4px; font: 600 12.5px/1.3 Inter, sans-serif; }
  .acc-rv-rl small { font-weight: 500; color: var(--muted); }
  .acc-rv-in { width: 100%; }
  .acc-rv-in.is-bad { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
  .acc-rv-rm { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; font-size: 11.5px; color: var(--muted); }
  .acc-rv-err { color: var(--bad); font-weight: 600; }
  .acc-rv-rsn { margin: 8px 0 0; font-size: 12.5px; overflow-wrap: anywhere; }
  .acc-rv-log { display: flex; align-items: flex-start; gap: 6px; margin: 8px 0 0 46px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
  .acc-rv-log svg { width: 13px; height: 13px; margin-top: 2px; flex: none; }
  .acc-rv-foot { margin: 12px 0 8px; font-size: 12px; line-height: 1.5; color: var(--muted); }
  .acc-rv-acts { margin: 0; padding: 14px 24px 18px; border-top: 1px solid var(--line); }
  .acc-rv-acts .btn-primary .spinner { display: inline-block; width: 15px; height: 15px; }
  .acc-res { display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 999px; font: 700 11px/1.6 Inter, sans-serif; white-space: nowrap; }
  .acc-res.ok { background: var(--ok-bg); color: #15803D; }
  .acc-res.same { background: #F1F5F9; color: var(--muted); }
  .acc-res.bad { background: var(--bad-bg); color: #B91C1C; white-space: normal; }
  @media (max-width: 760px) {
    .acc-bar { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
    .acc-bar-acts .btn-ghost, .acc-bar-acts .btn-primary { min-height: 44px; }
    .acc-bar-t small { display: none; }
    .acc-review { padding: 0; place-items: stretch; }
    .acc-rv-box { width: 100vw; max-height: none; height: 100%; border-radius: 0; }
    .acc-rv-head { padding: 14px 10px 10px 16px; }
    .acc-rv-body { padding: 4px 16px; }
    .acc-rv-lines { padding-left: 0; }
    .acc-rv-log { margin-left: 0; }
    .acc-rv-acts { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
    .acc-rv-acts button { min-height: 44px; flex: 1; justify-content: center; }
    /* the close of the full-screen review and the back arrow of the panel: 44 px tap targets */
    #accReview .acc-rv-head [data-close], #accPanel .acc-close, #rbModal .acc-rv-head [data-close], #rbPanel .acc-close { min-width: 44px; min-height: 44px; }
  }
  @media (max-width: 420px) { .acc-bar-t > svg { display: none; } .acc-bar-acts .btn-primary svg { display: none; } }
  @media (prefers-reduced-motion: reduce) { .acc-pend { animation: none; } .acc-bar, .acc-pop { animation: none; } }

  /* =============================================== (RBAC) Roles & permissions ===============================================
     CMS > PEOPLE & ACCESS > Roles & permissions (4 sub-tabs: sets + the matrix, Give a set, Requests, Access review), the Permission sets column
     of People, the rights panel (#rbPanel, the Access panel look) and its dialog (#rbModal, the Access review look). Ported from the approved
     prototype (scratchpad rbac/proto). The count of waiting requests sits on the tab icon, so the label keeps the 200 px list.
     ======================================================================================================================== */
  .rb-tab-n { position: absolute; left: 21px; top: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: #B45309; color: #fff; box-shadow: 0 0 0 2px #FAFBFD;
    font: 700 10px/16px Inter, sans-serif; text-align: center; pointer-events: none; }
  .cms-tab[aria-selected="true"] .rb-tab-n { box-shadow: 0 0 0 2px #EEF6FF; }
  #cms.cms-wide .rb-tab-n { left: 22px; top: 1px; }
  .rb-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
  .rb-h { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.25; }
  .rb-h4 { margin: 18px 0 8px; font: 700 12px/1.2 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .rb-lead { margin: 6px 0 0; max-width: 760px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
  .rb-note { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
  .rb-note code, .acc-banner code, .rb-empty code { padding: 1px 5px; border-radius: 5px; background: #F1F5F9; color: #334155; font-size: 12px; overflow-wrap: anywhere; }
  .rb-note-top { margin-bottom: 14px; max-width: 760px; }
  .rb-mode { margin: 0 0 14px; }
  .rb-seg { flex-wrap: wrap; }
  .rb-seg .rb-n { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: 99px; background: #B45309; color: #fff; font-size: 11px; line-height: 16px; text-align: center; }
  .rb-seg button[aria-selected="true"] .rb-n { background: #fff; color: #92400E; }
  .rb-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
  .rb-dim { font-size: 12px; color: var(--muted); }
  .rb-empty { display: grid; justify-items: center; gap: 8px; padding: 36px 16px; border: 1px dashed var(--line-2); border-radius: 16px; color: var(--muted); text-align: center; }
  .rb-empty > svg { width: 26px; height: 26px; color: var(--blue); }
  .rb-empty p { margin: 0; max-width: 620px; }
  .rb-link, .rb-crumb-a { padding: 0; border: 0; background: none; color: var(--blue); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
  .rb-link:hover, .rb-crumb-a:hover { text-decoration: underline; }
  /* flags */
  .rb-flags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
  .rb-flag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 6px; font: 700 11px/1.55 Inter, sans-serif; white-space: nowrap; }
  .rb-flag svg { width: 12px; height: 12px; flex: none; }
  .rb-flag.f-t { background: #EEF6FF; color: #1A51A4; }
  .rb-flag.f-p { background: #FEF3C7; color: #92400E; }
  .rb-flag.f-d { background: #FCE7F3; color: #9D174D; }
  .rb-flag.f-b, .rb-flag.f-bi, .rb-flag.f-r { background: #F1F5F9; color: #334155; }
  .rb-flag.f-c { background: #E0F2FE; color: #075985; }
  .rb-flag.f-e { background: #EDE9FE; color: #5B21B6; }
  .rb-flag.f-w { background: #FEE2E2; color: #991B1B; }
  .rb-flag.f-pe { background: #FFFBEB; color: #92400E; box-shadow: inset 0 0 0 1px #FCD34D; }
  .rb-flag.f-ok { background: var(--ok-bg); color: #166534; }
  /* the list of sets: a card per set, its name is the button (the whole card answers the click) */
  .rb-sec-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 18px 0 10px; }
  .rb-sec-h h4 { margin: 0; font-size: 15px; font-weight: 800; }
  .rb-sec-h .rb-note { flex: 1 0 100%; max-width: none; padding-right: 10%; }
  .rb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 12px; }
  .rb-card { position: relative; display: grid; align-content: start; gap: 8px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: #fff; color: var(--text); box-shadow: var(--shadow); }
  .rb-card:hover { border-color: var(--cyan); }
  .rb-card:has(.rb-card-n:focus-visible) { outline: 2px solid var(--ring, #0077C8); outline-offset: 2px; }   /* the name button has the focus: the ring goes round the whole card */
  .rb-card.is-retired { background: #FAFBFD; }
  .rb-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .rb-card-n { padding: 0; border: 0; background: none; color: var(--text); font: 800 15px/1.3 'Plus Jakarta Sans', 'IBM Plex Sans Thai', sans-serif; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
  .rb-card-n::after { content: ''; position: absolute; inset: 0; border-radius: 14px; }
  .rb-card-n:focus-visible { outline: 0; }
  .rb-card-h { flex: none; font-size: 12px; font-weight: 600; color: var(--muted); }
  .rb-card-d { font-size: 13px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
  .rb-card-src { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; line-height: 1.45; color: #334155; }
  .rb-card-src svg { width: 14px; height: 14px; margin-top: 1px; color: var(--blue); flex: none; }
  .rb-sum { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
  .rb-sum li { padding: 2px 8px; border-radius: 99px; background: var(--mist); border: 1px solid var(--line); font-size: 12px; color: #334155; }
  .rb-old { margin-top: 14px; }
  .rb-old > summary { cursor: pointer; font: 600 13px/1.4 Inter, sans-serif; color: var(--blue); margin-bottom: 10px; }
  /* one set */
  .rb-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; font-size: 13px; color: var(--muted); }
  .rb-crumb svg { width: 14px; height: 14px; }
  .rb-crumb > span { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
  .rb-set-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
  .rb-set-n { margin: 0; font-size: 18px; font-weight: 800; }
  .rb-set-d { margin: 4px 0 8px; font-size: 13.5px; color: var(--muted); }
  .rb-set-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px 16px; padding: 16px; border-radius: 14px; background: var(--mist); border: 1px solid var(--line); }
  .rb-f { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; font: 600 13px/1.3 Inter, sans-serif; color: var(--text); }
  .rb-f > span, .rb-f > legend, .rb-f > label { font: 600 13px/1.3 Inter, sans-serif; padding: 0; }
  .rb-f small { font-weight: 400; font-size: 12px; color: var(--muted); }
  .rb-f-wide { grid-column: 1 / -1; }
  .rb-f input:disabled, .rb-f select:disabled { background: #F8FAFC; color: #334155; cursor: not-allowed; }
  .rb-radios { display: flex; flex-wrap: wrap; gap: 6px 16px; font-weight: 500; }
  .rb-radios label { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
  .rb-radios input, .rb-tp input { accent-color: #1A51A4; width: 16px; height: 16px; }
  .rb-set-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 0; }
  .rb-meta-t { font-size: 12px; color: var(--muted); }
  .rb-set-head + .acc-banner, .rb-set-meta + .acc-banner { margin-top: 12px; }
  .rb-set-acts { margin-top: 12px; }
  /* the matrix: menus x levels; each row is a radiogroup (arrows move inside the row, Tab goes to the next row) */
  .rb-mx-tools { display: flex; justify-content: flex-end; margin-top: 14px; }
  .rb-mx-tools + .rb-matrix { margin-top: 8px; }
  .seg button[aria-pressed="true"] { background: var(--grad-ink); color: #fff; box-shadow: 0 4px 12px rgba(0,168,232,.25); }
  .rb-matrix { margin-top: 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
  .rb-mx-head, .rb-mx-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(5, 78px); align-items: center; gap: 4px; padding: 8px 14px; }
  .rb-mx-head { position: sticky; top: -24px; z-index: 2; border-bottom: 1px solid var(--line); border-radius: 14px 14px 0 0; background: #FAFBFD; font: 700 11px/1.2 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .rb-mx-head span:not(:first-child) { text-align: center; }
  .rb-mx-grp + .rb-mx-grp { border-top: 1px solid var(--line); }
  .rb-mx-g { margin: 0; padding: 12px 14px 2px; font: 800 12px/1.2 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
  .rb-mx-row + .rb-mx-row { border-top: 1px solid #EEF2F7; }
  .rb-mx-row.is-moved { background: #F0F9FF; }
  .rb-mx-name { display: grid; gap: 3px; min-width: 0; }
  .rb-mx-t { font-weight: 700; font-size: 14px; line-height: 1.3; }
  .rb-mx-what { font-size: 12px; line-height: 1.4; color: var(--muted); }
  .rb-mx-name .rb-flags { margin-top: 1px; }
  .rb-mx-none { padding: 12px 14px; }
  .rb-mx-lvls { display: contents; }
  .rb-cell { position: relative; display: flex; justify-content: center; min-height: 36px; align-items: center; }
  .rb-cell input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .rb-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 70px; height: 32px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--line-2); background: #fff; color: #334155;
    font: 600 12.5px/1 Inter, sans-serif; cursor: pointer; user-select: none; }
  .rb-cell:hover .rb-pill:not(.ro) { border-color: var(--cyan); color: var(--blue); }
  .rb-cell input:checked + .rb-pill { border-color: transparent; background: var(--grad-ink); color: #fff; box-shadow: 0 4px 12px rgba(0,119,200,.25); }
  .rb-cell input:checked + .rb-pill.zero { background: #E2E8F0; color: #0B1B33; box-shadow: none; border: 2px solid #334155; }   /* (review L3) a chosen None shows its edge (>= 3:1) */
  .rb-cell input:checked + .rb-pill.priv { background: linear-gradient(110deg, #92400E, #B45309); }
  .rb-cell input:focus-visible + .rb-pill { outline: 2px solid var(--ring, #0077C8); outline-offset: 2px; }
  .rb-pill.ro { cursor: default; border-color: transparent; background: transparent; color: #64748B; }
  .rb-pill.ro.on { background: var(--grad-ink); color: #fff; }
  .rb-pill.ro.on.priv { background: linear-gradient(110deg, #92400E, #B45309); }
  .rb-pill.ro.on.zero { background: #E2E8F0; color: #0B1B33; border: 2px solid #334155; }
  .rb-na { min-height: 36px; }
  .rb-mx-lock { grid-column: 2 / -1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 36px; border-radius: 10px; background: #F1F5F9; color: #334155; font: 600 12.5px/1 Inter, sans-serif; }
  .rb-mx-lock svg { width: 15px; height: 15px; }
  @media (forced-colors: active) { .rb-cell input:checked + .rb-pill { border: 2px solid Highlight; } }
  /* who holds it + the changes bar (sticky at the bottom of the content) */
  .rb-holders { margin-top: 8px; }
  .rb-hold { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 8px; }
  .rb-hold li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
  .rb-hold li > span:not(.pav) { display: grid; min-width: 0; flex: 1; }
  .rb-hold b { font-size: 13.5px; overflow-wrap: anywhere; }
  .rb-hold small { font-size: 12px; color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; }
  .rb-bar { position: sticky; bottom: -40px; z-index: 3; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 18px -26px -40px; padding: 12px 26px calc(12px + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(11,27,51,.08); }
  .rb-bar p { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; }
  .rb-bar p > svg { width: 18px; height: 18px; color: #0077C8; flex: none; }
  .rb-bar p span { display: grid; }
  .rb-bar small { font-size: 12px; color: var(--muted); }
  .rb-bar-acts { display: flex; gap: 8px; }
  .rb-arr { width: 14px !important; height: 14px !important; vertical-align: -2px; }
  .acc-rv-l.is-warn { border-color: #FCD34D; background: #FFFBEB; }
  .rb-rv-lines { padding-left: 0; }
  .rb-l1 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 3px; font-size: 14px; overflow-wrap: anywhere; }
  .rb-l-now { font-weight: 700; color: var(--blue); }
  .rb-rv-lines small { color: var(--muted); }
  /* give a set */
  .rb-assign { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px 22px; align-items: start; }
  .rb-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 16px; align-items: start; padding: 18px; border-radius: 14px; background: var(--mist); border: 1px solid var(--line); }
  .rb-ta { min-height: 84px !important; resize: vertical; }
  .rb-team-picks { display: flex; flex-wrap: wrap; gap: 6px 10px; }
  .rb-tp { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; font-weight: 500; }
  .rb-who { position: relative; }
  .rb-who-list { list-style: none; margin: 0; padding: 4px; display: grid; gap: 2px; max-height: 260px; overflow-y: auto; border-radius: 12px; border: 1px solid var(--line-2); background: #fff; box-shadow: var(--shadow-lg); }
  .rb-who-opt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 8px; border: 0; border-radius: 9px; background: none; text-align: left; font: inherit; color: var(--text); cursor: pointer; }
  .rb-who-opt:hover, .rb-who-opt:focus-visible { background: var(--mist); }
  .rb-who-opt > span:not(.pav) { display: grid; min-width: 0; }
  .rb-who-opt b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rb-who-opt small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rb-assign-side { padding: 4px 0 0; min-width: 0; }
  .rb-assign-side .rb-h4:first-child { margin-top: 0; }
  .rb-assign .cms-actions { grid-column: 1 / -1; margin-top: 0; }
  .btn-primary.is-off { opacity: .55; cursor: not-allowed; box-shadow: none; }
  .rb-gets-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  .rb-gets-l li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-size: 13px; }
  .rb-gets-l b { font-size: 12.5px; color: var(--blue); }
  .rb-gets-l small { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
  .rb-gets-l .rb-priv-t { color: #92400E; font-weight: 600; }
  .rb-sent { margin-top: 0; }
  .rb-sent + .rb-note { margin-top: 10px; }
  /* requests */
  .rb-req { padding: 16px; margin-bottom: 12px; border-radius: 14px; border: 1px solid #FCD34D; background: #FFFDF5; }
  .rb-req.mine { border-color: var(--line); background: #fff; }
  .rb-req-set { margin: 12px 0 0; padding: 12px 14px; }
  .rb-req .rb-req-set { margin: 8px 0 0; padding: 0; border: 0; background: none; }
  .rb-req-top { display: flex; align-items: flex-start; gap: 12px; }
  .rb-req-top > svg { width: 20px; height: 20px; color: #B45309; flex: none; margin-top: 1px; }
  .rb-req-top > .min-w-0 { flex: 1; }
  .rb-req-t { margin: 0; font-size: 15px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
  .rb-req-h { font-size: 16px; }
  .rb-req-m { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }
  .rb-why { margin: 12px 0; padding: 8px 12px; border-left: 3px solid var(--line-2); background: var(--mist); border-radius: 0 10px 10px 0; font-size: 13.5px; color: #334155; overflow-wrap: anywhere; }
  .rb-req .rb-gets-l { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
  .rb-req-checks { margin-top: 12px; }
  .rb-req-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; }
  .rb-wait { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; font-size: 13px; font-weight: 600; color: #92400E; }
  .rb-wait svg { width: 16px; height: 16px; }
  /* the access review */
  .rb-rv-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 20px; margin-bottom: 12px; }
  .rb-rv-top .rb-note { flex: 1 1 360px; }
  .rb-rv-top .rb-acts { margin-top: 0; }
  .rb-chips { margin-bottom: 14px; }
  .chip.active { border-color: transparent; background: var(--grad-ink); color: #fff; }
  .chip.active .n { opacity: .9; }
  .rb-rv-list { display: grid; gap: 10px; }
  .rb-rv { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 1.6fr); gap: 8px 18px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: #fff; }
  .rb-rv-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .rb-rv-who > span:not(.pav) { display: grid; min-width: 0; flex: 1; }
  .rb-rv-who b { font-size: 14px; overflow-wrap: anywhere; }
  .rb-rv-who small { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
  .rb-rv-src { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; align-content: start; grid-row: span 2; }
  .rb-rv-src li { display: flex; flex-wrap: wrap; align-items: baseline; align-content: flex-start; gap: 0 8px; font-size: 13px; }
  .rb-src-n { font-weight: 700; }
  .rb-src-t { font-size: 12px; color: #334155; }
  .rb-rv-src small { flex-basis: 100%; font-size: 12px; color: var(--muted); }
  .rb-rv-flags { display: flex; flex-wrap: wrap; align-self: start; align-items: flex-start; align-content: flex-start; gap: 4px; }
  .rb-rv-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; padding-top: 8px; border-top: 1px solid #EEF2F7; }
  .rb-last { margin-right: auto; font-size: 12px; color: var(--muted); }
  .rb-rm-list li { align-items: center; }
  .rb-rm-list li > span { flex: 1; min-width: 0; }
  #rbModal .rb-f { margin-top: 14px; }
  /* People: the Permission sets column (grey = from the role / teams, blue = given, amber = waiting) */
  .rb-chips-in { display: flex; flex-wrap: wrap; gap: 4px; }
  .rb-sc { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font: 700 11px/1.5 Inter, sans-serif; }
  .rb-sc svg { width: 12px; height: 12px; flex: none; }
  .rb-sc small { font-weight: 500; font-size: 11px; }
  .rb-sc.auto { background: #F1F5F9; color: #334155; }
  .rb-sc.given { background: #E0F2FE; color: #075985; }
  .rb-sc.wait { background: #FEF3C7; color: #92400E; }
  .rb-row-acts { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 6px; }
  .rb-people td { vertical-align: top; }
  .rb-people td.rb-pcell { min-width: 200px; }
  .rb-pf .dept-pick { flex: 0 1 auto; }
  /* the rights panel: over the content manager (dimmed behind, a click there closes it) at every width */
  #cms.rb-open::after { content: ''; position: absolute; inset: 0; z-index: 6; background: rgba(5,11,26,.32); cursor: pointer; }
  /* the rights panel */
  .rb-groups { gap: 10px; }
  .rb-g { display: block !important; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
  .rb-g-t { margin: 0 0 6px; font: 800 12px/1.2 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
  .rb-g-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  .rb-g-l li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 10px; }
  .rb-g-k { font-weight: 600; }
  .rb-g-v { font-weight: 700; font-size: 12.5px; color: var(--blue); }
  .rb-g-v.priv { color: #92400E; }
  .rb-g-l small { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
  .rb-g-n { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
  /* widths */
  @media (max-width: 1180px) {
    .rb-mx-head, .rb-mx-row { grid-template-columns: minmax(0, 1fr) repeat(5, 72px); }
    .rb-pill { min-width: 64px; padding: 0 8px; }
  }
  @media (max-width: 980px) { .rb-bar { margin: 18px -16px -40px; padding-left: 16px; padding-right: 16px; } }
  @media (max-width: 1100px) {
    .rb-assign { grid-template-columns: minmax(0, 1fr); }
    /* People: one card per person (seven columns no longer fit the content: no sideways scroll) */
    .rb-people thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .rb-people, .rb-people tbody, .rb-people tr, .rb-people td { display: block; width: 100%; }
    .rb-people tr { margin-bottom: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
    .rb-people td { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; padding: 6px 0; border: 0; min-width: 0 !important; }
    .rb-people td::before { content: attr(data-l); font: 700 11px/1.6 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
    .rb-people tr:hover td { background: transparent; }
    .rb-people td > * { min-width: 0; }
    .rb-people .rb-pf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
    .rb-people td.rb-pcell > .rb-row-acts { grid-column: 2; }
    .rb-people td > .role-chip { justify-self: start; align-self: center; }
    .rb-people td:first-child { display: block; }
    .rb-people td:first-child::before { display: block; }
  }
  @media (max-width: 900px) {
    .rb-rv { grid-template-columns: minmax(0, 1fr); }
    .rb-rv-src { grid-row: auto; }
  }
  @media (max-width: 760px) {
    .rb-mx-head { display: none; }
    .rb-mx-row { display: block; padding: 10px 12px; }
    .rb-mx-lvls { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
    .rb-cell { min-height: 0; }
    .rb-na { display: none; }
    .rb-pill { min-width: 0; height: 40px; padding: 0 14px; }
    .rb-pill.ro:not(.on) { display: none; }
    .rb-mx-lock { margin-top: 8px; }
    .rb-set-form, .rb-grid2 { grid-template-columns: minmax(0, 1fr); }
    .rb-set-head { flex-direction: column; }
    .rb-top { margin-bottom: 10px; }
    .rb-bar { bottom: -36px; margin-bottom: -36px; }
    .rb-bar-acts .btn-ghost, .rb-bar-acts .btn-primary, .rb-req-acts button, .rb-rv-acts button, .rb-row-acts button { min-height: 40px; }
    .rb-seg button { min-height: 40px; }
  }
  @media (max-width: 480px) {
    .rb-seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border-radius: 16px; gap: 2px; }
    .rb-seg button { padding: 9px 8px; }
    .rb-people td { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .rb-people td.rb-pcell > .rb-row-acts { grid-column: 1; }
    .rb-req-top { flex-wrap: wrap; }
    .rb-bar-acts { width: 100%; justify-content: flex-end; }
    .rb-sec-h .rb-note { padding-right: 0; }
  }
  /* the date field: the picker button inside it gets the same focus ring as the field */
  input[type="date"].cms-input:focus-within { outline: 0; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,168,232,.15); }
  /* ---- (review UI round) H1 / M1-M6 / L1-L9 */
  .rb-rm-list .rb-rm-no { flex: 1 1 100%; color: var(--muted); font-size: 12px; line-height: 1.4; }   /* (review S6) the reason instead of Remove */
  .rb-rm-list li { flex-wrap: wrap; }
  #cmsBody:has(.rb-bar:not([hidden])) { scroll-padding-bottom: 112px; }   /* (M1) the sticky changes bar never covers the focused row */
  .rb-flags-in { display: contents; }
  .rb-cell.is-lock { cursor: not-allowed; }
  .rb-cell.is-lock .rb-pill { border-style: dashed; background: #F8FAFC; color: #475569; }
  .rb-cell.is-lock:hover .rb-pill { border-color: var(--line-2); color: #475569; }
  .rb-pl-lock { width: 12px; height: 12px; margin-right: 4px; flex: none; }
  .rb-pill svg.rb-pl-lock { width: 12px; height: 12px; }
  .rb-note-i { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; color: #475569; }
  .rb-f-why { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
  .rb-f-none { margin: 0; display: grid; gap: 4px; }
  .rb-f-none .rb-f-l { font-size: 12.5px; font-weight: 700; color: var(--text); }
  .rb-f-none small { font-size: 12.5px; color: var(--muted); }
  /* (L7) the legend of the flags */
  .rb-legend { margin: 0 0 14px; font-size: 13px; color: var(--text); }
  .rb-legend summary { display: inline-flex; align-items: center; min-height: 32px; cursor: pointer; font-weight: 700; color: #0B4F8A; }
  .rb-legend ul { list-style: none; margin: 6px 0 0; padding: 10px 12px; display: grid; gap: 8px; border-radius: 12px; background: #F8FAFC; border: 1px solid var(--line); }
  .rb-legend li { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px; align-items: start; }
  .rb-legend li > span:last-child { color: #334155; line-height: 1.45; }
  @media (max-width: 480px) { .rb-legend li { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
  /* (M2 / L5) the Person combobox: the chosen person as a chip, the active option */
  .rb-who-sel:empty { display: none; }
  .rb-who-sel { margin-top: 8px; }
  .rb-who-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 4px 4px 6px; border-radius: 999px; border: 1px solid #BAE6FD; background: #F0F9FF; }
  .rb-who-chip > span:not(.pav) { display: grid; min-width: 0; }
  .rb-who-chip b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rb-who-chip small { font-size: 12px; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rb-who-x { width: 32px; height: 32px; flex: none; }
  .rb-who-opt.is-act { background: #E0F2FE; box-shadow: inset 0 0 0 2px #0077C8; }
  li.rb-who-opt { list-style: none; }
  /* (L6) the error of a required reason, next to its box */
  .rb-why-err { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: #B91C1C; }
  .rb-ta[aria-invalid="true"] { border-color: #B91C1C; }
  /* (M6) a given set that is not in effect yet: outlined, with the words */
  .rb-sc.given.off { background: #fff; border: 1px dashed #0369A1; color: #075985; }
  .rb-sc.auto svg { color: #475569; }
  /* @@RBAC-CSS-END@@ */
  /* @@UM-BEGIN@@ */
  /* (UM) CMS > PEOPLE & ACCESS > Users: the User Master copy in D1, its person dialog (#umDlg, the Access review look) */
  .um-top { flex-wrap: wrap; }
  .um-top > .min-w-0 { flex: 1 1 420px; }
  .um-top-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
  .um-top-acts .spinner { display: inline-block; width: 15px; height: 15px; }
  .um-mode { margin: 0 0 12px; }
  .um-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; }
  .um-stat { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: #fff; }
  .um-stat > svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--blue); }
  .um-stat > span { display: grid; gap: 2px; min-width: 0; }
  .um-stat small { font: 700 11px/1.3 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .um-stat b { font-size: 14px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
  .um-stat .um-sr { display: block; font-size: 12px; font-weight: 500; color: var(--muted); }
  .um-stat.is-warn { border-color: #FCD34D; background: #FFFBEB; }
  .um-stat.is-warn > svg { color: #B45309; }
  .um-stat.is-bad { border-color: #FCA5A5; background: #FFF7F7; }
  .um-stat.is-bad > svg { color: #B91C1C; }
  .um-stat.is-bad .um-sr { color: #991B1B; }
  .um-seg { flex-wrap: wrap; max-width: 100%; }
  .um-seg .rb-n { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: 99px; background: #B45309; color: #fff; font-size: 11px; line-height: 16px; text-align: center; }
  .um-seg button[aria-selected="true"] .rb-n { background: #fff; color: #92400E; }
  .um-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin: 0 0 10px; }
  .um-f { display: grid; gap: 5px; min-width: 0; flex: 1 1 150px; font: 600 12.5px/1.2 Inter, sans-serif; }
  .um-f-q { flex: 2 1 240px; }
  .um-f .cms-input { padding: 8px 10px; }
  .um-allcols { flex: none; min-height: 40px; }
  .um-allcols[aria-pressed="true"] { background: var(--grad-ink); color: #fff; border-color: transparent; }
  .um-count { margin: 0 0 8px; font-size: 12.5px; color: var(--muted); }
  .um-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .um-who > span { display: grid; min-width: 0; }
  .um-who b { font-weight: 600; overflow-wrap: anywhere; }
  .um-who small, .um-sub { display: block; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
  .um-tag { display: inline-flex; margin-top: 6px; padding: 1px 8px; border-radius: 6px; font: 700 11px/1.55 Inter, sans-serif; }
  .um-tag.gone { background: #FEE2E2; color: #991B1B; }
  .um-tag.new { background: #E0F2FE; color: #075985; }
  .um-st { display: inline-flex; padding: 1px 8px; border-radius: 999px; background: #F1F5F9; color: #334155; font: 700 11.5px/1.6 Inter, sans-serif; }
  .um-st.ok { background: var(--ok-bg); color: #166534; }
  .um-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
  .um-sys { display: inline-flex; padding: 1px 7px; border-radius: 6px; background: #EEF6FF; color: #1A51A4; font: 700 11px/1.55 Inter, sans-serif; }
  .um-sys.other { background: #F1F5F9; color: #334155; box-shadow: inset 0 0 0 1px #CBD5E1; }
  .um-none { font-size: 12px; color: var(--muted); }
  .um-table td { vertical-align: top; }
  .um-table td.um-act { text-align: right; white-space: nowrap; }
  .um-table td[data-l="Roles"] { white-space: nowrap; }
  .um-wide { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
  .um-wide:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  .um-all th, .um-all td { white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
  .um-all thead th { position: sticky; top: 0; background: #fff; }
  .um-new { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .um-new-i { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
  .um-new-t { flex: 1; display: grid; gap: 2px; }
  .um-new-t b { font-weight: 600; overflow-wrap: anywhere; }
  .um-new-t small { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
  .um-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 14px; margin: 0 0 12px; }
  .um-dl > div { min-width: 0; padding: 8px 10px; border-radius: 10px; background: var(--mist); border: 1px solid var(--line); }
  .um-dl dt { font: 700 11px/1.4 Inter, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
  .um-dl dd { margin: 2px 0 0; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
  .um-conf { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .um-vals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; margin: 8px 0 0; }
  .um-vals dt { font: 700 11px/1.4 Inter, sans-serif; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
  .um-vals dd { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
  /* the dialog */
  .um-box { width: min(760px, 94vw); }
  .um-sec { margin: 14px 0 0; padding: 12px 14px 14px; border: 1px solid var(--line); border-radius: 14px; min-width: 0; }
  .um-sec legend { padding: 0 6px; font: 700 12px/1.2 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .um-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
  .um-field { display: grid; gap: 5px; min-width: 0; font: 600 12.5px/1.3 Inter, sans-serif; }
  .um-field small { font-weight: 500; color: var(--muted); }
  .um-field .cms-input { padding: 8px 10px; }
  /* the focus of the text boxes of Users: the darker brand blue (>= 3:1 on white, review L3), not the light cyan of the other CMS forms */
  #umDlg .cms-input:focus, .um-filters .cms-input:focus { border-color: var(--ring); box-shadow: 0 0 0 1px var(--ring); }
  #umDlg .cms-input[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
  .um-field .cms-input[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
  .um-err { display: flex; align-items: flex-start; gap: 5px; font-size: 12px; font-weight: 600; color: #B91C1C; }
  .um-err svg { width: 13px; height: 13px; margin-top: 1px; flex: none; }
  .um-ros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 0; }
  .um-ro { min-width: 0; }
  .um-ros + .um-ros, .um-allow + .um-grid { margin-top: 10px; }
  .um-ro dt { font: 600 12px/1.3 Inter, sans-serif; color: var(--muted); }
  .um-ro dd { margin: 2px 0 0; font-size: 13.5px; overflow-wrap: anywhere; }
  .um-allow { margin: 0 0 12px; }
  .um-allow-l { margin: 0 0 6px; font: 600 12.5px/1.3 Inter, sans-serif; }
  .um-allow-l small { font-weight: 500; color: var(--muted); }
  .um-syss { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
  .um-chk { position: relative; display: inline-flex; }
  .um-chk input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .um-chk span { display: inline-flex; align-items: center; min-height: 34px; padding: 4px 12px; border-radius: 999px; border: 1px solid #64748B; background: #fff; color: #334155; font: 700 12.5px/1 Inter, sans-serif; cursor: pointer; }
  .um-chk input:checked + span { background: var(--grad-ink); color: #fff; border-color: transparent; }
  .um-chk input:checked + span::before { content: ''; width: 6px; height: 10px; margin: -2px 7px 0 0; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
  .um-chk input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 2px; }
  .um-pw { display: flex; align-items: flex-start; gap: 6px; margin: 12px 0 0; }
  .um-pw svg { width: 14px; height: 14px; margin-top: 3px; flex: none; }
  .um-gap { margin: 4px 0 10px; }
  .um-rv .acc-rv-l { list-style: none; }
  .um-rv-v { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 4px 0 0; font-size: 13.5px; overflow-wrap: anywhere; }
  .um-rv-v svg { width: 14px; height: 14px; color: var(--muted); }
  .um-rv-v small { color: var(--muted); }
  .um-old { color: var(--muted); text-decoration: line-through; overflow-wrap: anywhere; }
  .um-rv { padding-left: 0; }
  .um-saved { margin-top: 16px; }
  /* (fix round 1) a change that needs a Portal admin; the held values of a conflict */
  .um-need-l { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 12.5px; font-weight: 700; color: #991B1B; }
  .um-need-l svg { width: 13px; height: 13px; flex: none; }
  .um-need { margin-top: 12px; }
  .um-held { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .um-held dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
  .um-held dd svg { width: 13px; height: 13px; color: var(--muted); }
  .um-id-note { margin: 6px 0 12px; }
  #umDlgA [aria-disabled="true"] { opacity: .6; cursor: not-allowed; }
  @media (max-width: 1100px) {
    .um-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .um-table, .um-table tbody, .um-table tr, .um-table td { display: block; width: 100%; }
    .um-table tr { margin-bottom: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
    .um-table td { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; padding: 5px 0; border: 0; }
    .um-table td::before { content: attr(data-l); font: 700 11px/1.6 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
    .um-table td:first-child { display: block; }
    .um-table td:first-child::before { content: none; }
    .um-table td.um-act { display: flex; justify-content: flex-start; padding-top: 8px; }
    .um-table td.um-act::before { content: none; }
    .um-table tr:hover td { background: transparent; }
    .um-table td > * { justify-self: start; }
  }
  @media (max-width: 760px) {
    .um-stats { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .um-seg { border-radius: 16px; }
    .um-grid, .um-ros { grid-template-columns: minmax(0, 1fr); }
    .um-vals { grid-template-columns: minmax(0, 1fr); }
    .um-top-acts { justify-content: flex-start; }
    .um-top-acts button, .um-allcols, .um-table td.um-act button, .um-new-i button { min-height: 44px; }
    .um-new-i { flex-wrap: wrap; }
    .um-sec { padding: 10px 10px 12px; }
    #umDlg .acc-rv-head [data-close] { min-width: 44px; min-height: 44px; }
    .um-box { width: 100vw; }
  }
  @media (max-width: 420px) { .um-table td { grid-template-columns: 88px minmax(0, 1fr); gap: 8px; } .um-table td::before { letter-spacing: .03em; } }
  @media (forced-colors: active) { .um-chk input:checked + span { border: 2px solid Highlight; } }
  /* @@UM-END@@ */
  /* @@ID-BEGIN@@ */
  /* (ID) CMS > PEOPLE & ACCESS > Systems & keys: the systems of the identity service and their API keys; the dialog #idDlg (the Access review look) */
  .id-code { display: inline-flex; margin: 0 0 3px; padding: 1px 7px; border-radius: 6px; background: #0E2559; color: #fff; font: 700 11.5px/1.55 'JetBrains Mono', ui-monospace, Consolas, monospace; letter-spacing: .02em; }
  .id-name { display: block; font-weight: 600; overflow-wrap: anywhere; }
  .id-url { color: var(--blue); font-weight: 600; overflow-wrap: anywhere; text-decoration: none; }
  .id-url:hover { text-decoration: underline; }
  .id-mono { font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace; font-size: 12.5px; overflow-wrap: anywhere; }
  .id-table tr.is-gone td { background: #FAFBFD; }
  .id-table tr.is-gone .id-name { color: var(--muted); text-decoration: line-through; }
  .id-revoke { color: #B91C1C; }
  .id-switch { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0 0; cursor: pointer; }
  .id-switch input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: #0077C8; }
  .id-switch input:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  .id-switch-t { display: grid; gap: 2px; min-width: 0; }
  .id-switch-t b { font: 600 13px/1.35 Inter, sans-serif; }
  .id-switch-t small { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
  .id-scopes { display: grid; gap: 4px; }
  .id-once { margin-top: 14px; }
  .id-keymeta { margin: 14px 0 4px; }
  .id-secret-l { margin-top: 12px; }
  .id-secret-row { display: flex; gap: 8px; align-items: stretch; min-width: 0; }
  .id-secret-row .cms-input { flex: 1; min-width: 0; background: #F8FAFC; }
  .id-secret-row .btn-outline { flex: none; }
  .id-audit { margin: 18px 0 0; border-top: 1px solid var(--line); padding-top: 10px; }
  .id-audit summary { cursor: pointer; font: 700 12px/1.6 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); width: max-content; max-width: 100%; }
  .id-audit summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px; }
  .id-log { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
  .id-log li { overflow-wrap: anywhere; }
  #idDlg .um-sec > .um-field, #idDlg .um-sec > .um-grid + .um-grid, #idDlg .um-sec > .um-field + .um-grid { margin-top: 10px; }
  #idDlg .cms-input:focus { border-color: var(--ring); box-shadow: 0 0 0 1px var(--ring); }
  #idDlg .cms-input[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
  #idDlgA [aria-disabled="true"] { opacity: .6; cursor: not-allowed; }
  @media (max-width: 760px) {
    #idDlg .acc-rv-head [data-close] { min-width: 44px; min-height: 44px; }
    .id-secret-row { flex-direction: column; }
    .id-secret-row .btn-outline { min-height: 44px; justify-content: center; }
    .id-switch input { width: 22px; height: 22px; }
  }
  /* @@ID-END@@ */
  /* forced colours (Windows High Contrast) drop the gradient: the Portal buttons keep an edge */
  @media (forced-colors: active) { .btn-primary { border: 1px solid ButtonText; } }

  /* ============================================================================================================
     (Hero = THE RICE, 2026-11-11) the Our home band moves into the Hero: the spotlit building on the right, the Step inside
     button under the greeting chip, APJC 1504 Live right after the Hero. Every rule the
     Hero picture needs is here (the band's .office-* and .of-* rules are gone).
     Four layers in #officeArt, all the same viewBox (renderOffice):
       .of-wire   the outline building (glass, floors, halo, city grid): drawn at sign-in, still, no photo needed
       .of-photo  the photo (a div round svg.of-base: the city toned to the Portal navy, the spotlit tower): fades in over the wire
                  when portalAsset answers, then never paints again (nothing in it moves)
       .of-line   the glowing edge (it draws itself once)
       .of-fx     sweep, the light round the outline, the pin rings
     ============================================================================================================ */

  /* the Hero is the size container (the art bleeds to its right edge: 100cqw); its bottom row is the 1504 section colour
     (#081431), so the floor 15 card follows with no seam on the left */
  .hero-rice { container-type: inline-size; background:
      linear-gradient(180deg, rgba(8, 20, 49, 0) 66%, #081431 100%),
      radial-gradient(820px 640px at 78% 42%, rgba(0, 168, 232, .2), transparent 62%),
      radial-gradient(700px 520px at 0% 88%, rgba(30, 66, 138, .42), transparent 60%),
      linear-gradient(180deg, #050B1A 0%, #081431 100%); }
  /* (layout 2026-11-12) wider than the page container: the glow behind the tower stays with it (78 % of 1440 = the middle + 403 px) */
  @media (min-width: 1361px) {
    .hero-rice { background:
      linear-gradient(180deg, rgba(8, 20, 49, 0) 66%, #081431 100%),
      radial-gradient(820px 640px at calc(50% + 403px) 42%, rgba(0, 168, 232, .2), transparent 62%),
      radial-gradient(700px 520px at 0% 88%, rgba(30, 66, 138, .42), transparent 60%),
      linear-gradient(180deg, #050B1A 0%, #081431 100%); }
  }
  /* the text column is never narrower than the one-line title (min-content; 1920 needs it), the art column takes the rest.
     The height: the screen under the promo strip and the header, less 56 px, so the top of the floor 15 card and its
     "TODAY · FLOOR 15" line show under the Hero on a laptop (the header has a 1 px line under its --header-h) */
  .hero-rice .hero-inner { --rice-pt: 72px; --rice-pb: 64px; grid-template-columns: minmax(min-content, 21fr) minmax(0, 19fr);
    min-height: clamp(600px, calc(100svh - var(--promo-h) - var(--header-h) - 57px), 880px); }
  .hero-rice .hero-copy { position: relative; z-index: 2; }

  /* Step inside floor 15: a glass pill under the greeting chip (the Newsroom stays the one filled button) */
  .hero-rice .hello-chip { margin-bottom: 14px; }
  .hero-go { margin: 0 0 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }   /* (play port) Step inside floor 15 + the APJC Play chip, one row (two on a phone) */
  .hero-go .play-chip { margin: 0; min-height: 44px; padding: 0 16px; }
  .hero-step { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 15px; border-radius: 999px; cursor: pointer;
    border: 1px solid rgba(41, 196, 244, .5); background: rgba(41, 196, 244, .1); color: #fff; font: 600 14.5px/1.2 Inter, 'IBM Plex Sans Thai', sans-serif;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 10px 26px -14px rgba(0, 168, 232, .8);
    transition: background .2s ease, border-color .2s ease, transform .15s ease; -webkit-tap-highlight-color: transparent; }
  .hero-step:hover { background: rgba(41, 196, 244, .2); border-color: var(--sky); transform: translateY(-1px); }
  .hero-step:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 999px; }
  .hero-step svg { width: 16px; height: 16px; color: var(--sky); }
  .hero-step-dot { position: relative; width: 9px; height: 9px; flex: none; border-radius: 99px; background: var(--sky); box-shadow: 0 0 0 3px rgba(41, 196, 244, .22); }
  .hero-step-dot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--sky); opacity: 0; animation: riceDot 1.6s ease-out .6s 2; }
  /* the ring round the greeting photo turns once (it turned for ever: WCAG 2.2.2) */
  .hero-rice .avatar-hero::before { animation: spin 4.2s cubic-bezier(.3, 0, .2, 1) .2s 1 both; }

  /* ---- the art: the right column, from the Hero top to its bottom (the column padding is given back) and out to the right edge */
  .hero-rice .hero-art.rice-art { --rice-bleed: calc((100cqw - min(100cqw, 1360px)) / 2 + 24px);
    display: block; position: relative; min-height: 0; align-self: stretch;
    margin: calc(-1 * var(--rice-pt)) calc(-1 * var(--rice-bleed)) calc(-1 * var(--rice-pb)) -32px; }
  /* the picture fills the cell; it fades out towards the text and at the bottom (ending well above the floor 15 card), never at the right edge */
  /* (layout 2026-11-12) the left fade is 23 % of the box as far as the page container (--rice-lw, officeFit); on a window wider than the
     container the photo's own right edge fades out into the page (--rice-r from the right, over --rice-rf), so the tower stays in the
     content column with the text. Without the variables (or at bleed 0) it is the 2c look: no fade at the right edge */
  .hero-rice .office-photo { position: absolute; inset: 0; min-width: 0;
    --rice-fade: linear-gradient(90deg, transparent var(--rice-l, 0%), rgba(0, 0, 0, .18) calc(var(--rice-l, 0%) + var(--rice-lw, 23%) * .3), rgba(0, 0, 0, .55) calc(var(--rice-l, 0%) + var(--rice-lw, 23%) * .61), #000 calc(var(--rice-l, 0%) + var(--rice-lw, 23%)),
      #000 calc(100% - var(--rice-r, -2px) - var(--rice-rf, 0px)), rgba(0, 0, 0, .45) calc(100% - var(--rice-r, -2px) - var(--rice-rf, 0px) * .45), transparent calc(100% - var(--rice-r, -2px)));
    -webkit-mask-image: var(--rice-fade), linear-gradient(180deg, #000 93%, transparent 100%);
    -webkit-mask-composite: source-in; mask-image: var(--rice-fade), linear-gradient(180deg, #000 93%, transparent 100%); mask-composite: intersect; }
  .hero-rice .office-photo svg, .hero-rice .of-photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
  /* the moving layers paint on their own (the photo under them is never painted again) */
  .hero-rice .of-line, .hero-rice .of-fx { will-change: transform; pointer-events: none; }
  /* the label next to the pin: a sibling of #officeArt (the photo's fade must not take it), placed by officePin(); no backdrop blur
     (the pin rings pulse under it) */
  .hero-rice .office-pin { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 2px; padding: 8px 13px 8px 12px; border-radius: 12px; pointer-events: none;
    background: rgba(5, 11, 26, .86); border: 1px solid rgba(41, 196, 244, .55); box-shadow: 0 10px 26px -10px rgba(0, 168, 232, .75); white-space: nowrap; }
  .hero-rice .office-pin.is-left { transform: translate(calc(-100% - 18px), -50%); }
  .hero-rice .office-pin.is-right { transform: translate(18px, -50%); }
  .hero-rice .office-pin b { font: 700 15px/1.2 'Plus Jakarta Sans', 'IBM Plex Sans Thai', Inter, sans-serif; color: #fff; }
  .hero-rice .office-pin span { font: 700 11px/1.2 Inter, sans-serif; letter-spacing: .2em; color: var(--sky); }

  /* ---- motion: one round of everything, over by 5 s (WCAG 2.2.2), then the still look (edge drawn). The photo and the halo never
     move. .is-off = the Hero is not seen: everything waits, and plays once it is */
  .hero-rice .of-edge, .hero-rice .of-glow { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: riceDraw 2.2s cubic-bezier(.6, 0, .2, 1) .2s forwards; }
  .hero-rice .of-run { opacity: 0; animation: riceRun 2.4s cubic-bezier(.45, 0, .3, 1) 2.3s 1 both; }
  .hero-rice .of-sweep { animation: riceSweep 3s ease-in-out 1s 1 both; }
  .hero-rice .of-ring { opacity: 0; transform-box: fill-box; transform-origin: center; animation: ricePulse 1.8s ease-out 2 both; }
  .hero-rice .of-ring.r2 { animation-delay: .9s; }
  .hero-rice .of-photo { animation: ricePhotoIn .9s ease both; }
  .hero-rice.is-off .of-edge, .hero-rice.is-off .of-glow, .hero-rice.is-off .of-run, .hero-rice.is-off .of-sweep, .hero-rice.is-off .of-ring,
  .hero-rice.is-off .of-photo, .hero-rice.is-off .hero-step-dot::after, .hero-rice.is-off .avatar-hero::before { animation-play-state: paused; }
  @keyframes riceDraw { to { stroke-dashoffset: 0; } }
  @keyframes riceRun { 0% { stroke-dashoffset: 0; opacity: 0; } 6%, 94% { opacity: .95; } 100% { stroke-dashoffset: -1000; opacity: 0; } }
  @keyframes riceSweep { 0% { transform: translateX(-320px); } 82%, 100% { transform: translateX(460px); } }
  @keyframes ricePulse { 0% { transform: scale(.7); opacity: .95; } 100% { transform: scale(2.8); opacity: 0; } }
  @keyframes ricePhotoIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes riceDot { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.8); opacity: 0; } }
  @media (prefers-reduced-motion: reduce) {
    .hero-rice .of-edge, .hero-rice .of-glow { animation: none; stroke-dashoffset: 0; }
    .hero-rice .of-run, .hero-rice .of-sweep, .hero-rice .of-ring { animation: none; display: none; }
    .hero-rice .of-photo, .hero-rice .avatar-hero::before { animation: none; }
    .hero-step-dot::after { animation: none; display: none; }
  }

  /* ---- short laptop screens (1366 x 657, 1280 x 720): less air round the text, so the floor 15 card still peeks in under the Hero */
  @media (min-width: 1024px) and (max-height: 760px) {
    .hero-rice .hero-inner { --rice-pt: 44px; --rice-pb: 40px; padding-top: 44px; padding-bottom: 40px;
      min-height: clamp(440px, calc(100svh - var(--promo-h) - var(--header-h) - 57px), 880px); }
    .hero-rice .hello-chip { margin-bottom: 10px; }
    .hero-rice .hero-go { margin-bottom: 18px; }
    .hero-rice .hero-lead { margin: 14px 0 18px; }
    .hero-rice .values { margin-bottom: 22px; }
  }
  /* ---- 1023 and narrower: one column, the picture first (CSS order: the DOM and the Tab order keep the text first) */
  @media (max-width: 1023px) {
    .hero-rice .hero-inner { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 0; gap: 0; }
    .hero-rice .hero-art.rice-art { order: -1; align-self: center; width: min(100% + 48px, 640px); margin: 0 auto; padding: 0; aspect-ratio: 744 / 730; }
    .hero-rice .office-photo {
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(180deg, #000 93%, transparent 100%);
      mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(180deg, #000 93%, transparent 100%); }
    .hero-rice .hero-copy { margin-top: -34px; }
  }
  /* ---- phones: the picture runs edge to edge (never more than 45 % of the screen), the text a little closer, so the greeting,
     Step inside and the Newsroom button all stay in the first screen at 390 x 844 */
  @media (max-width: 760px) {
    .hero-rice .hero-inner { padding: 0 16px 30px; }
    .hero-rice .hero-art.rice-art { width: calc(100% + 32px); margin: 0 -16px; aspect-ratio: 10 / 11; max-height: min(470px, 45svh); }
    .hero-rice .office-photo {
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(180deg, #000 93%, transparent 100%);
      mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(180deg, #000 93%, transparent 100%);
      -webkit-mask-composite: source-in; mask-composite: intersect; }
    .hero-rice .hero-copy { margin-top: -30px; }
    .hero-rice .hello-chip { margin-bottom: 10px; }
    .hero-rice .hero-go { margin-bottom: 16px; }
    .hero-rice .hero-lead { margin: 12px 0 18px; }
    .hero-rice .values { margin-bottom: 20px; }
    .hero-rice .office-pin { padding: 6px 10px; }
    .hero-rice .office-pin b { font-size: 13px; }
    .hero-rice .office-pin span { font-size: 10px; }
  }
  /* (fix round 2, APJC Play; play port) up to 560 px the Play chip (#playChip, next to Step inside floor 15) takes a row of its own
     under it: 44 px + a 10 px gap. The picture gives that row back, so the Newsroom button stays in the first screen at 390 x 844
     with the chip on, as without it. Nothing changes while Play is off */
  @media (max-width: 560px) { .hero-rice:has(#playChip) .hero-art.rice-art { max-height: min(416px, 45svh - 54px); } }
  @media (forced-colors: active) { .hero-step { border: 1px solid ButtonText; } }
  /* ---------- (APJC 1504 Live) floor 15 of THE RICE right under the Hero (renderOffice1504 + the 3D module from portalAsset) ---------- */
  /* One namespace: every class / id is l15 (the module's overlay too), custom properties --l15-*. The section carries on the dark stack
     (the Hero > this > the Today bar, all #081431). No Tailwind inside. Type floors: Latin labels 11 px, Thai 12 px. Touch targets 44 px on coarse
     pointers. The stage height follows the viewport width and never outgrows the screen (svh), so Step inside keeps the check-in in view. */
  .l15 { --l15-line: rgba(41, 196, 244, .22); --l15-glass: rgba(5, 12, 30, .66); --l15-text: rgba(226, 236, 255, .8); --l15-dim: rgba(190, 214, 245, .66);
    --l15-display: 'Plus Jakarta Sans', 'IBM Plex Sans Thai', Inter, sans-serif; --l15-ui: Inter, 'IBM Plex Sans Thai', system-ui, sans-serif; --l15-th: 'IBM Plex Sans Thai', Inter, sans-serif;
    --l15-panel: 316px; --l15-cr: calc(var(--l15-panel) + 34px); padding: 0 0 28px; background: #081431; font-family: var(--l15-ui); }
  .l15-card { --l15-sh: clamp(520px, min(51vw, calc(100svh - 108px)), 760px); position: relative; border-radius: 28px; overflow: hidden; color: #fff; isolation: isolate;
    background: radial-gradient(120% 90% at 30% 0%, #10275a 0%, #0A1630 46%, #050B1A 100%); box-shadow: 0 30px 70px -34px rgba(0, 0, 0, .9); }
  .l15-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(41, 196, 244, .2); pointer-events: none; z-index: 30; }
  .l15-stage { position: relative; height: var(--l15-sh); overflow: hidden; }
  .l15-gl { position: absolute; inset: 0; background: radial-gradient(110% 80% at 50% 10%, #0f2556 0%, #081530 55%, #050B1A 100%); }
  .l15-canvas { position: absolute; left: 0; top: 0; display: block; outline: none; -webkit-tap-highlight-color: transparent; opacity: 0; transition: opacity .9s ease; }
  .l15.is-ready .l15-canvas { opacity: 1; }
  .l15-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: radial-gradient(52% 48% at 0% 0%, rgba(4, 10, 26, .82), rgba(4, 10, 26, 0) 72%), radial-gradient(40% 34% at 0% 100%, rgba(4, 10, 26, .66), rgba(4, 10, 26, 0) 72%), linear-gradient(180deg, rgba(4, 10, 26, .3), rgba(4, 10, 26, 0) 20%); }
  .l15-frame i { position: absolute; z-index: 4; width: 18px; height: 18px; border: 1.5px solid rgba(41, 196, 244, .55); pointer-events: none; }
  .l15-frame i:nth-child(1) { left: 14px; top: 14px; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
  .l15-frame i:nth-child(2) { right: 14px; top: 14px; border-left: 0; border-bottom: 0; border-top-right-radius: 6px; }
  .l15-frame i:nth-child(3) { left: 14px; bottom: 14px; border-right: 0; border-top: 0; border-bottom-left-radius: 6px; }
  .l15-frame i:nth-child(4) { right: 14px; bottom: 14px; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }
  .l15-loading { position: absolute; z-index: 6; left: calc((100% - 348px) / 2); top: 50%; transform: translate(-50%, -50%); display: none; align-items: center; gap: 10px; margin: 0; padding: 9px 16px 9px 12px; border-radius: 999px;
    background: rgba(5, 12, 30, .7); border: 1px solid var(--l15-line); color: var(--l15-dim); font: 700 11px Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none; }
  .l15-loading span { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(41, 196, 244, .2); border-top-color: var(--sky); animation: l15spin 1s linear infinite; }
  .l15.is-loading .l15-loading { display: flex; }
  @keyframes l15spin { to { transform: rotate(360deg); } }

  /* head */
  .l15-head { position: absolute; z-index: 5; left: 34px; top: 30px; max-width: 460px; pointer-events: none; }
  .l15-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 0; font: 700 11.5px/1.1 Inter, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--sky); }
  .l15-live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px var(--teal); }
  .l15-live::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--teal); animation: l15ping 2s ease-out 2 forwards; }   /* (play port) 2 pings, then the dot alone */
  .l15.is-soon .l15-live, .l15[data-poll="slow"] .l15-live { background: #94a3b8; box-shadow: none; }
  .l15.is-soon .l15-live::after, .l15[data-poll="slow"] .l15-live::after { animation: none; opacity: 0; }
  .l15-sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(41, 196, 244, .6); }
  .l15-where { white-space: nowrap; }   /* (polish) "Floor 15 · THE RICE" never splits; a phone drops THE RICE instead (<= 480) */
  @keyframes l15ping { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
  .l15-pill { font: 800 11px/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; white-space: nowrap; }
  .l15-pill.is-soon { color: #bff1ff; background: rgba(41, 196, 244, .12); border: 1px solid rgba(41, 196, 244, .45); }
  .l15-pill.is-preview { color: #062a26; background: var(--teal); }
  .l15-pill.is-down { color: #fde68a; background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .5); }
  .l15-title { margin: 12px 0 0; font: 800 clamp(30px, 3.2vw, 46px)/1.02 var(--l15-display); letter-spacing: -.035em; outline: none; text-shadow: 0 2px 30px rgba(0, 10, 30, .65); white-space: nowrap; color: #fff; }
  .l15-title .l15-num { background: linear-gradient(90deg, #29C4F4, #7fe3ff 45%, #2DD4BF); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
  .l15-th { margin: 6px 0 0; font: 500 14px/1.3 var(--l15-th); color: rgba(191, 241, 255, .85); letter-spacing: .01em; }
  .l15-sub { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--l15-text); text-shadow: 0 1px 14px rgba(0, 10, 30, .8); }
  .l15-mcount { display: none; margin: 10px 0 0; }

  /* overlay (built by the module: badges, clusters, zone plates with leader lines, floor tags, the zone tip) */
  .l15-ov { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
  .l15-lead { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
  .l15-lead path { fill: none; stroke: var(--zt, #29C4F4); stroke-opacity: .55; stroke-width: 1; stroke-dasharray: 3 3; animation: l15dash 1.2s linear 3; transition: stroke-opacity .25s, opacity .3s ease; }
  .l15-lead circle { fill: rgba(5, 12, 30, .55); stroke: var(--zt, #29C4F4); stroke-width: 1.4; transition: opacity .3s ease; }
  .l15-lead .is-off { opacity: 0; }   /* (polish2) a plate that leaves fades with its leader (the module clears it after the fade) */
  .l15-lead .is-hot { stroke-opacity: 1; stroke-width: 1.6; }
  .l15-lead .is-dim { stroke-opacity: .18; }
  .l15-ov:not(.has-plates) .l15-lead { display: none; }
  @keyframes l15dash { to { stroke-dashoffset: -12; } }
  .l15-tagl, .l15-platel, .l15-pinl { position: absolute; inset: 0; }
  .l15-pinl { z-index: 3; } .l15-platel { z-index: 2; } .l15-tagl { z-index: 1; }
  .l15-pin { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; transform-origin: 0 0; transition: opacity .35s ease; }
  .l15-pin::after { content: ''; position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: #bff1ff; box-shadow: 0 0 8px 2px rgba(41, 196, 244, .9); opacity: 0; transition: opacity .3s; }
  .l15-pin.is-in::after { opacity: 1; }
  .l15-badge { position: absolute; left: 0; bottom: 7px; display: flex; align-items: center; gap: 6px; padding: 2px 10px 2px 2px; border-radius: 999px; white-space: nowrap; font: inherit;
    pointer-events: auto; cursor: pointer; color: #fff; opacity: 0; transform: translateX(-50%) translateY(6px) scale(.6); transform-origin: 50% 100%;
    background: linear-gradient(180deg, rgba(20, 44, 96, .8), rgba(6, 14, 34, .8)); border: 1px solid color-mix(in srgb, var(--zt, #29C4F4) 70%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 22px -8px color-mix(in srgb, var(--zt, #29C4F4) 85%, transparent);
    -webkit-backdrop-filter: blur(6px) saturate(1.5); backdrop-filter: blur(6px) saturate(1.5);
    transition: opacity .3s ease, transform .5s cubic-bezier(.2, 1.4, .4, 1), padding .25s ease, background .25s ease; }
  .l15-pin.is-in .l15-badge { opacity: 1; transform: translateX(-50%) scale(1); }
  .l15-pin.is-pop .l15-badge { animation: l15materialize .9s steps(1, end) both; }
  .l15-pin.is-out .l15-badge { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(.85); transition-duration: .7s; }
  .l15-pin.is-out::after { opacity: 0; }
  .l15-pin.is-clu .l15-badge { opacity: 0 !important; pointer-events: none; transform: translateX(-50%) scale(.5); }
  .l15-pin.is-clu::after { opacity: 0; }
  .l15-pin.is-dim { opacity: .26; }
  @keyframes l15materialize { 0% { opacity: 0; } 12% { opacity: .9; } 22% { opacity: .2; } 34% { opacity: 1; } 44% { opacity: .55; } 56%, 100% { opacity: 1; } }
  .l15-av { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
    background: linear-gradient(135deg, var(--c1, #1A51A4), var(--c2, #29C4F4)); color: #fff; font: 800 11px/1 var(--l15-display); letter-spacing: 0;
    box-shadow: 0 0 0 1.5px rgba(150, 230, 255, .95), 0 0 12px rgba(41, 196, 244, .55); }
  .l15-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .l15-av::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(160deg, rgba(255, 255, 255, .3), transparent 46%); pointer-events: none; }
  .l15-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
  .l15-nm { font: 700 12px/1.1 var(--l15-display); letter-spacing: -.005em; }
  .l15-meta { display: flex; flex-direction: column; max-height: 0; max-width: 0; overflow: hidden; opacity: 0; font: 500 11px/1.3 Inter, sans-serif; color: rgba(190, 228, 255, .85); transition: opacity .2s ease, max-height .25s ease, max-width .25s ease; }
  .l15-meta i { font-style: normal; color: #fff; opacity: .92; }
  .l15-badge:hover, .l15-pin.is-hl .l15-badge { background: linear-gradient(180deg, rgba(26, 60, 130, .94), rgba(8, 18, 44, .94)); padding-right: 14px; }
  .l15-badge:hover .l15-meta, .l15-pin.is-hl .l15-meta { max-height: 34px; max-width: 260px; opacity: 1; }
  .l15-pin.is-hl .l15-badge { border-color: #bff1ff; box-shadow: 0 0 0 4px rgba(41, 196, 244, .18), 0 0 26px rgba(41, 196, 244, .8); }
  .l15-pin.is-mini .l15-badge { padding: 3px; gap: 0; }
  .l15-pin.is-mini .l15-tx, .l15-pin.is-mini .l15-you { display: none; }
  .l15-pin.is-mini .l15-badge:hover { padding-right: 12px; gap: 7px; }
  .l15-pin.is-mini .l15-badge:hover .l15-tx { display: flex; }
  .l15-pin.is-hot .l15-badge { border-color: var(--zt, #29C4F4); }
  .l15-badge.is-me { border-color: rgba(255, 255, 255, .95); background: linear-gradient(180deg, rgba(45, 212, 191, .55), rgba(10, 30, 70, .88)); }
  .l15-badge.is-me .l15-av { box-shadow: 0 0 0 2px #fff, 0 0 18px rgba(255, 255, 255, .7); }
  .l15-badge.is-hidden { border-style: dashed; background: rgba(6, 14, 34, .72); }
  .l15-badge.is-hidden .l15-av { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .5); filter: grayscale(.5); }
  .l15-you { font: 800 11px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: 3px 6px; border-radius: 6px; background: #fff; color: #0A1630; margin-left: 2px; }
  .l15-badge.is-hidden .l15-you { background: transparent; color: #fff; border: 1px dashed rgba(255, 255, 255, .6); }
  .l15-fresh { position: absolute; left: 0; bottom: 46px; transform: translateX(-50%) translateY(6px); padding: 4px 9px; border-radius: 999px; white-space: nowrap; pointer-events: none;
    font: 700 11px/1 Inter, sans-serif; letter-spacing: .04em; color: #031026; background: linear-gradient(90deg, #bff1ff, var(--sky)); box-shadow: 0 6px 18px -6px rgba(41, 196, 244, .9); opacity: 0; transition: opacity .35s, transform .35s; }
  .l15-pin.is-fresh .l15-fresh { opacity: 1; transform: translateX(-50%); }
  .l15-pin.is-fresh.is-mini .l15-fresh { bottom: 40px; }
  .l15-cluster { position: absolute; left: 0; top: 0; translate: -50% calc(-100% - 8px); display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; font: inherit; color: #fff; cursor: pointer;
    background: linear-gradient(180deg, rgba(20, 44, 96, .88), rgba(6, 14, 34, .88)); border: 1px solid color-mix(in srgb, var(--zt) 75%, transparent);
    box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--zt) 85%, transparent); opacity: 0; pointer-events: none; transition: opacity .3s ease; will-change: transform; white-space: nowrap; }
  .l15-cluster.is-on { opacity: 1; pointer-events: auto; }
  .l15-cluster.is-dim { opacity: .3; }
  .l15-cluster.is-hot { border-color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--zt) 25%, transparent), 0 0 26px color-mix(in srgb, var(--zt) 70%, transparent); }
  .l15-cl-av { display: flex; }
  .l15-cl-av .l15-av { width: 26px; height: 26px; font-size: 11px; box-shadow: 0 0 0 2px #0a1838; }
  .l15-cl-av .l15-av + .l15-av { margin-left: -9px; }
  .l15-cl-n { font: 800 12px var(--l15-display); }
  .l15-cl-n:empty { display: none; }
  .l15-cl-z { display: none; font: 700 11px/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: rgba(210, 236, 255, .82); }
  .l15-ov.is-mobile .l15-cluster { gap: 4px; padding: 2px 7px 2px 2px; translate: -50% calc(-100% - 4px); }
  .l15-ov.is-mobile .l15-cl-z { display: none; }
  .l15-ov.is-mobile .l15-cl-n { min-width: 16px; font-size: 11px; text-align: center; }
  .l15-ov.is-mobile .l15-cl-av .l15-av { width: 22px; height: 22px; font-size: 11px; box-shadow: 0 0 0 1.5px #0a1838; }
  .l15-ov.is-mobile .l15-cl-av .l15-av:nth-child(3) { display: none; }
  .l15-ov.is-mobile .l15-cl-av .l15-av + .l15-av { margin-left: -7px; }
  .l15-plate { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 9px; padding: 7px 11px 7px 8px; border-radius: 11px; white-space: nowrap; cursor: pointer;
    background: rgba(5, 12, 30, .76); border: 1px solid color-mix(in srgb, var(--zt) 38%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    opacity: 0; pointer-events: none; transition: opacity .3s ease, border-color .25s, box-shadow .25s, background .25s; will-change: transform; }
  .l15-plate.is-on { opacity: 1; pointer-events: auto; }
  .l15-plate.is-on.is-dim { opacity: .45; }
  .l15-plate-n { min-width: 28px; font: 800 19px/1 var(--l15-display); color: var(--zt); font-variant-numeric: tabular-nums; text-align: center; text-shadow: 0 0 14px color-mix(in srgb, var(--zt) 70%, transparent); }
  .l15-plate.is-zero .l15-plate-n { color: rgba(190, 214, 245, .6); text-shadow: none; }
  .l15-plate-tx { display: flex; flex-direction: column; gap: 2px; }
  .l15-plate-tx b { font: 700 11px/1.1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #e6f4ff; }
  .l15-plate-tx i { font: 500 12px/1.2 var(--l15-th); font-style: normal; color: rgba(190, 214, 245, .78); }
  .l15-cells { display: flex; gap: 1.5px; margin-top: 3px; }
  .l15-cells i { width: 3px; height: 5px; border-radius: 1px; background: rgba(255, 255, 255, .14); }
  .l15-cells i.on { background: var(--zt); box-shadow: 0 0 4px var(--zt); }
  .l15-plate.is-hot { background: rgba(8, 22, 52, .92); border-color: var(--zt); box-shadow: 0 0 0 3px color-mix(in srgb, var(--zt) 16%, transparent), 0 14px 32px -12px color-mix(in srgb, var(--zt) 80%, transparent); }
  .l15-tag { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; transition: opacity .3s ease; will-change: transform; }
  .l15-tag.is-on { opacity: 1; }
  .l15-tag > span { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 6px; white-space: nowrap; padding: 4px 6px 4px 8px; border-radius: 7px;
    font: 700 11px/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(226, 242, 255, .94); background: rgba(5, 12, 30, .62); border: 1px solid rgba(41, 196, 244, .3); text-shadow: 0 0 8px rgba(0, 8, 24, .9); }
  .l15-tag b { font: 800 11px/1 var(--l15-display); letter-spacing: 0; padding: 2px 5px; border-radius: 5px; color: #031026; background: var(--sky); }
  .l15-tag b:empty { display: none; }
  .l15-tag.is-on.is-dim { opacity: .62; }
  .l15-tag.is-on.is-under { opacity: 0; }
  .l15-tag.is-hot > span { color: #fff; border-color: var(--sky); background: rgba(10, 30, 70, .85); }
  .l15-tip { position: absolute; z-index: 7; left: 0; top: 0; min-width: 190px; max-width: 260px; padding: 12px 14px; border-radius: 14px; pointer-events: none;
    background: rgba(5, 12, 30, .88); border: 1px solid rgba(41, 196, 244, .45); box-shadow: 0 16px 36px -14px rgba(0, 168, 232, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .l15-tip h4 { margin: 0; font: 800 14px/1.2 var(--l15-display); color: #fff; }
  .l15-tip p { margin: 4px 0 0; font: 500 12px/1.4 Inter, sans-serif; color: var(--l15-text); }
  .l15-tip .l15-tip-th { margin-top: 2px; font: 500 12px/1.3 var(--l15-th); color: var(--l15-dim); }
  .l15-tip-av { display: flex; margin-top: 9px; align-items: center; }
  .l15-tip-av .l15-av { width: 24px; height: 24px; font-size: 11px; margin-right: -6px; box-shadow: 0 0 0 2px #071026; }
  .l15-tip-more { margin-left: 12px; font: 600 11px Inter, sans-serif; color: var(--l15-dim); }
  .l15-tip.is-sheet { min-width: 0; width: min(330px, calc(100% - 28px)); max-width: none; padding: 10px 12px; }
  .l15-tip.is-sheet .l15-tip-bar { margin-top: 6px; }
  .l15-tip-bar { height: 4px; border-radius: 4px; margin-top: 9px; background: rgba(255, 255, 255, .1); overflow: hidden; }
  .l15-tip-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--sky), var(--teal)); }
  /* still (fallback + the 3D loading poster) */
  .l15-stillwrap { position: absolute; inset: 0; overflow: hidden; }
  .l15-still { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; }
  .l15[data-mode="flat"] .l15-still { width: 100%; height: 100%; object-fit: cover; transform: none; }
  .l15-stillspot { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .3s ease; }
  .l15-stillspot.is-on { opacity: 1; }
  .l15-ss-dim { fill: rgba(2, 7, 20, .58); }
  .l15-ss-edge { fill: rgba(41, 196, 244, .1); stroke: #29C4F4; stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(41, 196, 244, .9)); }
  .l15-stillwrap .l15-ov { z-index: 3; }

  /* arrival toasts */
  .l15-feed { position: absolute; z-index: 6; top: 30px; right: calc(var(--l15-panel) + 34px); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
  .l15-toast { display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 7px; border-radius: 14px; background: rgba(5, 12, 30, .74); border: 1px solid color-mix(in srgb, var(--zt) 40%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 500 12.5px/1.3 Inter, sans-serif; color: var(--l15-text); white-space: nowrap;
    animation: l15toast .6s cubic-bezier(.2, 1.2, .4, 1) both; transition: opacity .6s ease, transform .6s ease; }
  .l15-toast b { color: #fff; font-weight: 700; }
  .l15-toast small { display: block; font: 700 11px/1.2 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--zt); }
  .l15-toast .l15-av { width: 30px; height: 30px; }
  .l15-toast.is-old { opacity: .6; }
  .l15-toast.is-gone { opacity: 0; transform: translateX(16px); }
  @keyframes l15toast { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }

  /* view controls: a sibling after the panel in the DOM (Tab order), drawn in the stage's bottom-right corner */
  .l15-ctl { position: absolute; z-index: 7; right: var(--l15-cr); top: calc(var(--l15-sh) - 68px); display: flex; align-items: center; gap: 8px; }
  .l15:not([data-mode="3d"]):not([data-mode="3d-reduced"]):not([data-mode="loading"]):not([data-mode="still"]) .l15-ctl { display: none; }
  .l15[data-mode="still"] .l15-ctl > :not(#l15Expand) { display: none; }   /* the still: only the full view (nothing moves, nothing to zoom) */
  .l15-ib { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border-radius: 12px; cursor: pointer; color: #dff4ff; background: rgba(5, 12, 30, .62); border: 1px solid var(--l15-line);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .2s ease, border-color .2s ease; }
  .l15-ib:hover { background: rgba(26, 81, 164, .55); border-color: rgba(41, 196, 244, .6); }
  .l15-ib svg { width: 18px; height: 18px; }
  .l15-ib .ic-play, .l15-ib[aria-pressed="true"] .ic-pause { display: none; } .l15-ib[aria-pressed="true"] .ic-play { display: block; }
  .l15-ib .ic-close, .l15-ib[aria-pressed="true"] .ic-open { display: none; } .l15-ib[aria-pressed="true"] .ic-close { display: block; }
  .l15-ib:focus-visible, .l15-btn:focus-visible, .l15-row:focus-visible, .l15-link:focus-visible, .l15-grp-h button:focus-visible, .l15-switch:focus-visible, .l15-inbtn:focus-visible,
  .l15-inmenu button:focus-visible, .l15-zguide button:focus-visible, .l15-title:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; border-radius: 10px; }
  .l15-compass { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--l15-line); background: rgba(5, 12, 30, .5); }
  .l15-compass::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; border: 1px dashed rgba(41, 196, 244, .28); }
  .l15-compass i { position: absolute; inset: 0; border-radius: 50%; transform: rotate(var(--a, 0deg)); }
  .l15-compass i::before { content: ''; position: absolute; left: 50%; top: 3px; margin-left: -4px; border: 4px solid transparent; border-bottom: 7px solid var(--sky); border-top: 0; filter: drop-shadow(0 0 4px rgba(41, 196, 244, .9)); }
  .l15-compass i b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(calc(var(--a, 0deg) * -1)); font: 800 11px/1 Inter, sans-serif; color: #dff6ff; }
  .l15-hint { position: absolute; z-index: 5; left: calc((100% - 348px) / 2); bottom: 12px; transform: translateX(-50%); margin: 0; white-space: nowrap; pointer-events: none;
    font: 500 11.5px Inter, sans-serif; color: var(--l15-dim); letter-spacing: .02em; transition: opacity 1.2s ease, color .3s ease; }
  .l15-hint.is-faded { opacity: 0; } .l15-hint.is-flash { opacity: 1; color: #fff; }
  .l15-open3d { position: absolute; z-index: 9; right: calc(var(--l15-cr) + 50px); bottom: 28px; }
  .l15.is-still .l15-hint, .l15.is-still .l15-loading, .l15:not([data-mode="3d"]):not([data-mode="3d-reduced"]) .l15-hint { display: none; }

  /* check-in (bottom left; under the stage when stacked) */
  .l15-cta { position: absolute; z-index: 9; left: 34px; bottom: 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; max-width: 450px; }
  .l15-cta:empty { display: none; }
  .l15-btn { display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 22px 0 18px; border: 0; border-radius: 999px; cursor: pointer; color: #fff;
    font: 700 15px/1.15 Inter, sans-serif; text-align: left; background: var(--grad-ink); box-shadow: 0 12px 30px -10px rgba(0, 168, 232, .9), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .2s ease, box-shadow .2s ease; }
  .l15-btn:hover:not([disabled]) { transform: translateY(-1px); box-shadow: 0 16px 34px -10px rgba(0, 168, 232, 1); }
  .l15-btn .l15-ic, .l15-btn svg { width: 19px; height: 19px; flex: none; }
  .l15-btn[disabled] { cursor: not-allowed; color: rgba(226, 236, 255, .8); background: rgba(255, 255, 255, .06); border: 1px dashed rgba(255, 255, 255, .28); box-shadow: none; }
  .l15-btn.is-first { background: linear-gradient(100deg, #1E428A 0%, #1A51A4 35%, #0077C8 72%, #0F7F73 100%); animation: l15glow 2.4s ease-in-out infinite; }
  .l15-btn.is-busy { opacity: .75; cursor: progress; }
  @keyframes l15glow { 50% { box-shadow: 0 0 0 6px rgba(41, 196, 244, .14), 0 16px 40px -10px rgba(45, 212, 191, .95); } }
  .l15-btn-s { min-height: 40px; padding: 0 18px; font-size: 14px; }
  .l15-btn-2 { background: rgba(5, 12, 30, .66); border: 1px solid rgba(41, 196, 244, .5); box-shadow: none; min-height: 42px; font-size: 13.5px; padding: 0 16px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .l15-note { margin: 0; font: 500 11.5px/1.4 Inter, sans-serif; color: var(--l15-dim); text-shadow: 0 1px 10px rgba(0, 8, 24, .9); }
  .l15-link { border: 0; background: none; padding: 8px 6px; cursor: pointer; font: 600 12.5px Inter, sans-serif; color: var(--sky); text-decoration: underline; text-underline-offset: 3px; }
  .l15-ic { width: 16px; height: 16px; flex: none; }
  /* countdown (before 1 Dec 2026): drawn once, only the four numbers change */
  .l15-cd { padding: 12px 16px 13px; border-radius: 16px; background: rgba(5, 12, 30, .7); border: 1px solid var(--l15-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .l15-cd-k { margin: 0; font: 700 11px/1 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--sky); }
  .l15-cd-row { display: flex; align-items: flex-start; gap: 7px; margin-top: 8px; }
  .l15-cd-s { display: flex; flex-direction: column; align-items: center; min-width: 44px; }
  .l15-cd-s b { font: 800 32px/1 var(--l15-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
  .l15-cd-s small { margin-top: 4px; font: 700 11px/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--l15-dim); }
  .l15-cd-row i { font: 700 26px/1.1 var(--l15-display); font-style: normal; color: rgba(41, 196, 244, .45); }
  /* the picker: a real listbox (arrow keys light the zone; Enter picks it and moves to Check in; only the button saves) */
  .l15-pick { width: min(450px, calc(100vw - 64px)); padding: 14px; border-radius: 20px; background: rgba(5, 12, 30, .92); border: 1px solid rgba(41, 196, 244, .4);
    box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
  .l15-pick-h h3 { margin: 0; font: 800 17px/1.2 var(--l15-display); color: #fff; }
  .l15-pick-h p { margin: 4px 0 0; font: 500 12px/1.4 Inter, sans-serif; color: var(--l15-dim); }
  .l15-zlist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; outline: none; border-radius: 12px; }
  .l15-zlist:focus-visible { outline: 2px solid var(--sky); outline-offset: 4px; }
  .l15-zlist li { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 46px; padding: 6px 10px; border-radius: 11px; cursor: pointer; overflow: hidden;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); transition: background .15s, border-color .15s; }
  .l15-zlist li:hover { background: rgba(41, 196, 244, .12); border-color: rgba(41, 196, 244, .4); }
  .l15-zlist li[aria-selected="true"] { background: linear-gradient(90deg, rgba(26, 81, 164, .95), rgba(0, 119, 200, .92)); border-color: #7fe3ff; }
  .l15-zlist li i { position: absolute; left: 0; bottom: 0; height: 2px; width: var(--w); background: var(--zt); }
  .l15-zo-t { display: flex; flex-direction: column; min-width: 0; }
  .l15-zo-t b { font: 600 12.5px/1.2 Inter, sans-serif; color: #eef7ff; }
  .l15-zo-t small { font: 500 12px/1.25 var(--l15-th); color: var(--l15-dim); }   /* (polish) a long Thai name wraps, never cut short with an ellipsis (nor its marks clipped) */
  .l15-zlist li[aria-selected="true"] .l15-zo-t small { color: #e6f8ff; }
  .l15-zo-n { font: 700 13px Inter, sans-serif; font-variant-numeric: tabular-nums; color: #fff; }
  .l15-zo-n small { font-size: 11px; font-weight: 500; color: var(--l15-dim); }
  .l15-pick-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .08); }
  .l15-switch { display: inline-flex; align-items: center; gap: 10px; min-width: 0; border: 0; background: none; padding: 4px 0; cursor: pointer; color: #e6f4ff; font: 600 12.5px Inter, sans-serif; text-align: left; }
  .l15-switch i { position: relative; flex: none; width: 36px; height: 20px; border-radius: 20px; background: rgba(255, 255, 255, .18); transition: background .2s; }
  .l15-switch i::after { content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
  .l15-switch[aria-checked="true"] i { background: #0077C8; } .l15-switch[aria-checked="true"] i::after { transform: translateX(16px); }
  .l15-switch small { display: block; font-weight: 500; color: var(--l15-dim); font-size: 11px; }
  .l15-pick-acts { display: flex; align-items: center; gap: 6px; flex: none; }
  /* you're in (teal) + its menu */
  .l15-in { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  .l15-inbtn { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 16px 6px 6px; border: 0; border-radius: 999px; cursor: pointer; text-align: left; font: inherit;
    color: #03221f; background: linear-gradient(90deg, #2DD4BF, #29C4F4); box-shadow: 0 14px 34px -12px rgba(45, 212, 191, .95), inset 0 1px 0 rgba(255, 255, 255, .45); }
  .l15-inbtn b { display: block; font: 800 15px/1.2 var(--l15-display); }
  .l15-inbtn small { display: block; font: 600 11.5px/1.3 Inter, sans-serif; color: rgba(3, 34, 31, .82); }
  .l15-inbtn .l15-av { width: 40px; height: 40px; font-size: 13px; box-shadow: 0 0 0 2px #fff; }
  .l15-chev { width: 18px; height: 18px; transition: transform .2s; }
  .l15-inbtn[aria-expanded="true"] .l15-chev { transform: rotate(180deg); }
  .l15-in.is-hidden .l15-inbtn { color: #fff; background: rgba(5, 12, 30, .74); border: 1.5px dashed rgba(45, 212, 191, .8); box-shadow: none; }
  .l15-in.is-hidden .l15-inbtn small { color: var(--l15-dim); }
  .l15-inmenu { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 16px; background: rgba(5, 12, 30, .86); border: 1px solid var(--l15-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .l15-inmenu button { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 13px; border: 0; border-radius: 11px; cursor: pointer; font: 600 13px Inter, sans-serif; color: #e6f4ff; background: rgba(255, 255, 255, .06); }
  .l15-inmenu button:hover { background: rgba(41, 196, 244, .16); }
  /* nobody in yet: be the first in */
  .l15-empty { position: absolute; z-index: 7; left: calc((100% - 348px) / 2); top: 54%; transform: translate(-50%, -50%); width: min(340px, calc(100% - 40px)); padding: 22px 22px 20px; border-radius: 22px; text-align: center;
    background: rgba(5, 12, 30, .76); border: 1px solid rgba(41, 196, 244, .36); box-shadow: 0 30px 60px -26px rgba(0, 0, 0, .9), 0 0 60px -20px rgba(41, 196, 244, .5); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .l15-empty-ring { position: relative; display: block; width: 46px; height: 46px; margin: 0 auto 10px; }
  .l15-empty-ring i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--sky); animation: l15ring 2.4s ease-out infinite; }
  .l15-empty-ring i + i { animation-delay: 1.2s; }
  .l15-empty-ring::after { content: ''; position: absolute; inset: 15px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 18px var(--sky); }
  @keyframes l15ring { 0% { transform: scale(.35); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
  .l15-empty-k { margin: 0; font: 700 11px Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--sky); }
  .l15-empty h3 { margin: 6px 0 0; font: 800 22px/1.15 var(--l15-display); letter-spacing: -.02em; color: #fff; }
  .l15-empty p { margin: 6px 0 14px; font: 500 13px/1.45 Inter, sans-serif; color: var(--l15-text); }

  /* the panel: gauge, who's in, the privacy line */
  .l15-panel { position: absolute; z-index: 8; top: 16px; right: 16px; bottom: 16px; width: var(--l15-panel); display: flex; flex-direction: column; border-radius: 20px; overflow: hidden;
    background: var(--l15-glass); border: 1px solid var(--l15-line); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
  .l15-gauge { padding: 16px 18px 14px; border-bottom: 1px solid rgba(255, 255, 255, .07); background: linear-gradient(180deg, rgba(41, 196, 244, .06), transparent); }
  .l15-clock { display: flex; align-items: baseline; gap: 10px; }
  .l15-clock b { font: 700 22px/1 var(--l15-display); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
  .l15-clock span { font: 700 11px Inter, sans-serif; letter-spacing: .14em; color: var(--l15-dim); }
  .l15-clock em { margin-left: auto; font: 800 11px/1 Inter, sans-serif; letter-spacing: .12em; padding: 4px 6px; border-radius: 6px; font-style: normal; color: var(--sky); border: 1px solid rgba(41, 196, 244, .45); }
  .l15-gr { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
  .l15-ring { position: relative; flex: none; width: 112px; height: 112px; }
  .l15-ring svg { width: 100%; height: 100%; overflow: visible; }
  .l15-ring circle { fill: none; transform-box: view-box; transform-origin: 60px 60px; }
  .l15-r-tick { stroke: rgba(41, 196, 244, .38); stroke-width: 3; stroke-dasharray: 1 4.86; animation: l15spin 48s linear infinite; }
  .l15-r-dash { stroke: rgba(41, 196, 244, .28); stroke-width: 1; stroke-dasharray: 7 5; animation: l15spin 26s linear infinite reverse; }
  /* (play port, WCAG 2.2.2) the two rings turn only while .is-spin is on (l15Rings: floor 15 seen, 4.5 s per session), and never while the motion is paused */
  .l15-r-tick, .l15-r-dash { animation-play-state: paused; }
  .l15-ring.is-spin .l15-r-tick, .l15-ring.is-spin .l15-r-dash { animation-play-state: running; }
  #l15Sec.is-paused .l15-ring .l15-r-tick, #l15Sec.is-paused .l15-ring .l15-r-dash { animation-play-state: paused; }
  #l15Sec.is-paused .l15-lead path, #l15Sec.is-paused .l15-live::after { animation-play-state: paused; }   /* (play port) Pause motion stops every loop */
  .l15-r-track { stroke: rgba(255, 255, 255, .08); stroke-width: 6; }
  .l15-r-arc { stroke: var(--sky); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 0 100; transform: rotate(-90deg); transition: stroke-dasharray .9s ease; filter: drop-shadow(0 0 6px rgba(41, 196, 244, .85)); }
  .l15-ring-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
  .l15-ring-c b { font: 800 32px/1 var(--l15-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
  .l15-ring-c b.is-bump { animation: l15bump .8s ease; }
  @keyframes l15bump { 30% { color: var(--sky); text-shadow: 0 0 18px var(--sky); transform: scale(1.12); } }
  .l15-ring-c span { margin-top: 3px; font: 700 11px/1 Inter, sans-serif; letter-spacing: 0; text-transform: uppercase; color: var(--l15-dim); white-space: nowrap; }   /* "Days to go" fits inside the ring on one line */
  .l15-ring-c small { margin-top: 2px; font: 500 12px/1.1 var(--l15-th); color: rgba(191, 241, 255, .74); white-space: nowrap; }
  .l15-gstats { display: flex; flex-direction: column; gap: 12px; margin: 0; min-width: 0; }
  .l15-gstats dd { margin: 0; font: 800 21px/1 var(--l15-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
  .l15-gstats dt { margin-top: 4px; font: 700 11px/1.25 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--l15-dim); }
  .l15-desks { display: grid; grid-template-columns: repeat(44, minmax(0, 1fr)); gap: 2px; margin-top: 14px; }
  .l15-desks i { height: 9px; border-radius: 2px; background: rgba(255, 255, 255, .08); transition: background .4s, box-shadow .4s; }
  .l15-desks i.on { background: var(--sky); box-shadow: 0 0 5px rgba(41, 196, 244, .7); }
  .l15-desks i.me { background: var(--teal); box-shadow: 0 0 8px var(--teal); }
  .l15-panel-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px 8px; }
  .l15-panel-h h3 { margin: 0; font: 800 16px/1.2 var(--l15-display); letter-spacing: -.01em; color: #fff; }
  .l15-panel-h h3 span { margin-left: 4px; color: var(--sky); }
  .l15-upd { font: 600 11px/1.2 Inter, sans-serif; color: var(--l15-dim); white-space: nowrap; }
  .l15-list { flex: 1; min-height: 0; overflow: auto; padding: 0 10px 8px; scrollbar-width: thin; scrollbar-color: rgba(41, 196, 244, .3) transparent; overscroll-behavior: contain; }
  .l15-grp { margin: 0 0 8px; }
  .l15-grp-h { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 4px 8px; padding: 8px 8px 6px; border-radius: 10px; transition: background .2s; }
  .l15-grp.is-hot .l15-grp-h { background: rgba(41, 196, 244, .1); }
  .l15-grp-h button { display: flex; flex-direction: column; gap: 2px; border: 0; background: none; padding: 0; cursor: pointer; text-align: left; font: 700 11px/1.2 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--zt, var(--sky)); }
  .l15-grp-h button small { font: 500 12px/1.2 var(--l15-th); letter-spacing: 0; text-transform: none; color: var(--l15-dim); }
  .l15-grp-h button:hover { color: #fff; }
  .l15-grp-h span { font: 600 11px Inter, sans-serif; color: var(--l15-dim); font-variant-numeric: tabular-nums; }
  .l15-grp-h i { grid-column: 1 / -1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
  .l15-grp-h i::after { content: ''; display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--zt, var(--sky))); transition: width .6s ease; }
  .l15-grp ul { list-style: none; margin: 0; padding: 0; }
  .l15-row { display: flex; align-items: center; gap: 11px; width: 100%; padding: 7px 8px; border: 0; border-radius: 12px; cursor: pointer; text-align: left; color: #fff; background: none; font: inherit; transition: background .15s; }
  .l15-row:hover, .l15-row.is-hl { background: rgba(41, 196, 244, .1); }
  .l15-row .l15-av { width: 32px; height: 32px; font-size: 11px; box-shadow: 0 0 0 1.5px rgba(150, 230, 255, .7); }
  .l15-row-tx { display: flex; flex-direction: column; min-width: 0; gap: 2px; flex: 1; }
  .l15-row-tx b { font: 700 13.5px/1.2 var(--l15-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .l15-full { font: 500 12px Inter, var(--l15-th), sans-serif; color: var(--l15-dim); margin-left: 5px; }
  .l15-row-tx small { font: 500 11.5px/1.2 Inter, sans-serif; color: var(--l15-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .l15-row .l15-you { margin-left: 6px; vertical-align: 1px; background: var(--teal); color: #042f2e; }
  .l15-row .l15-you.is-hidden { background: transparent; color: #fff; border: 1px dashed rgba(255, 255, 255, .6); }
  .l15-new { flex: none; font: 800 11px/1 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; font-style: normal; padding: 3px 6px; border-radius: 6px; color: #031026; background: var(--sky); }
  .l15-src { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: var(--l15-dim); background: rgba(255, 255, 255, .05); }
  .l15-src .l15-ic { width: 13px; height: 13px; }
  .l15-quiet { margin: 4px 8px 10px; font: 500 11.5px/1.5 Inter, sans-serif; color: var(--l15-dim); }
  .l15-empty-l { margin: 18px 8px; padding: 18px 16px; text-align: center; border-radius: 16px; border: 1px dashed rgba(41, 196, 244, .3); }
  .l15-empty-l b { display: block; margin-top: 6px; font: 800 15px var(--l15-display); }
  .l15-empty-l p { margin: 6px 0 0; font: 500 12.5px/1.5 Inter, sans-serif; color: var(--l15-dim); }
  .l15-ic-l { width: 26px; height: 26px; color: var(--sky); }
  .l15-guide { margin: 6px 8px 10px; padding: 14px; border-radius: 14px; background: rgba(41, 196, 244, .07); border: 1px solid rgba(41, 196, 244, .22); }
  .l15-guide-k { margin: 0; font: 700 11px/1 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--sky); }
  .l15-guide h4 { margin: 6px 0 0; font: 800 16px/1.2 var(--l15-display); color: #fff; }
  .l15-guide p { margin: 6px 0 0; font: 500 12px/1.5 Inter, sans-serif; color: var(--l15-text); }
  .l15-zguide { list-style: none; margin: 0; padding: 0 0 6px; }
  .l15-zguide button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 10px; background: none; color: #fff; cursor: pointer; text-align: left; font: inherit; }
  .l15-zguide button:hover, .l15-zguide button.is-hot { background: rgba(41, 196, 244, .1); }
  .l15-zguide i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--zt); box-shadow: 0 0 8px var(--zt); }
  .l15-zguide span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
  .l15-zguide b { font: 600 13px/1.2 Inter, sans-serif; }
  .l15-zguide small { font: 500 12px/1.25 var(--l15-th); color: var(--l15-dim); }
  .l15-zguide em { font: 600 11px Inter, sans-serif; font-style: normal; color: var(--l15-dim); white-space: nowrap; }
  .l15-down { margin: 18px 8px; padding: 18px 16px; border-radius: 16px; border: 1px dashed rgba(245, 158, 11, .45); font: 500 12.5px/1.5 Inter, sans-serif; color: var(--l15-text); }
  .l15-privacy { display: flex; gap: 9px; margin: 0; padding: 12px 18px 15px; border-top: 1px solid rgba(255, 255, 255, .07); font: 500 11.5px/1.45 Inter, sans-serif; color: var(--l15-dim); }
  .l15-privacy svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--teal); }

  /* full view: the card covers the page (a dialog; the Fullscreen API is unlikely inside the Apps Script frames); drawers stay above it */
  .l15-card.is-expanded { --l15-sh: 100dvh; position: fixed; inset: 0; z-index: 75; border-radius: 0; }
  body.l15-lock { overflow: hidden; }

  /* the first view: the title decodes, the panel and the check-in wipe in (once) */
  .l15-card.is-boot .l15-panel { animation: l15wipeR .8s steps(7, end) .15s both; }
  .l15-card.is-boot .l15-cta { animation: l15wipeL .7s steps(6, end) .45s both; }
  .l15-card.is-boot .l15-th, .l15-card.is-boot .l15-sub { animation: l15up .6s ease .5s both; }
  @keyframes l15wipeR { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
  @keyframes l15wipeL { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes l15up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

  @media (max-width: 1180px) {
    .l15 { --l15-panel: 286px; --l15-cr: calc(var(--l15-panel) + 30px); }
    .l15-feed { right: calc(var(--l15-panel) + 30px); }
    .l15-hint, .l15-loading, .l15-empty { left: calc((100% - 316px) / 2); }
    .l15-ring { width: 104px; height: 104px; } .l15-ring-c b { font-size: 26px; }
  }
  /* 901-1180: the picker takes the panel's column (the floor stays in view) */
  @media (min-width: 901px) and (max-width: 1180px) {
    .l15[data-pick="1"] .l15-cta { left: auto; right: 16px; top: 16px; bottom: 16px; width: var(--l15-panel); max-width: none; justify-content: flex-start; }
    .l15[data-pick="1"] .l15-pick { width: 100%; max-height: 100%; overflow: auto; }
    .l15[data-pick="1"] .l15-zlist { grid-template-columns: minmax(0, 1fr); }
    .l15[data-pick="1"] .l15-pick-row { flex-wrap: wrap; }
  }
  /* 901-1180: the check-in (and its privacy note) stays clear of the view controls and Open the 3D view in the stage's
     bottom-right corner: its width ends 12 px before them (6 controls = 280 px); <= 1040 the compass goes (5 controls = 232 px) */
  @media (min-width: 901px) and (max-width: 1180px) {
    .l15:not([data-pick="1"]) .l15-cta { max-width: max(236px, min(450px, calc(100% - var(--l15-cr) - 326px))); }
  }
  @media (min-width: 901px) and (max-width: 1040px) {
    .l15-compass { display: none; }
    .l15-cd { padding: 10px 12px 11px; } .l15-cd-row { gap: 5px; } .l15-cd-s b { font-size: 27px; }
    .l15:not([data-pick="1"]) .l15-cta { max-width: max(236px, min(450px, calc(100% - var(--l15-cr) - 278px))); }
  }
  @media (max-width: 1100px) {
    .l15-card { --l15-sh: clamp(520px, min(62vw, calc(100svh - 108px)), 680px); }
    .l15-head { left: 26px; top: 24px; max-width: 380px; }
    .l15-cta { left: 26px; bottom: 24px; }
    .l15-hint { display: none; }
    .l15-feed .l15-toast:nth-child(n+3) { display: none; }
  }
  /* stacked: the check-in and the panel go under the stage */
  @media (max-width: 900px) {
    .l15-card { --l15-sh: clamp(440px, 70vw, 560px); }
    .l15-card.is-expanded { --l15-sh: 100dvh; overflow-y: auto; }
    .l15 { --l15-cr: 20px; }
    .l15-feed { right: 20px; }
    .l15-hint, .l15-loading, .l15-empty { left: 50%; }
    .l15-cta { position: relative; left: auto; bottom: auto; padding: 18px 20px 6px; max-width: none; }
    .l15-pick { width: 100%; }
    .l15-panel { position: relative; inset: auto; width: auto; margin: 14px 0 0; border-radius: 0; border-width: 1px 0 0; background: rgba(5, 12, 30, .45); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .l15-gauge { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; align-items: center; }
    .l15-clock { grid-column: 1 / -1; }
    .l15-gr { margin-top: 4px; }
    .l15-desks { margin-top: 0; align-self: end; }
    .l15-list { max-height: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; align-items: start; padding-bottom: 12px; }
    .l15-list > .l15-quiet, .l15-list > .l15-empty-l, .l15-list > .l15-guide, .l15-list > .l15-zguide, .l15-list > .l15-down { grid-column: 1 / -1; }
  }
  @media (max-width: 760px) { .l15 { padding-bottom: 18px; } }
  @media (max-width: 640px) {
    .l15-card { --l15-sh: 470px; border-radius: 22px; }
    .l15-head { left: 18px; top: 18px; right: 132px; max-width: none; }
    .l15-eyebrow { font-size: 11px; letter-spacing: .1em; gap: 7px; }
    .l15-title { font-size: 27px; margin-top: 8px; }
    .l15-th { font-size: 12.5px; margin-top: 4px; }
    .l15-sub { display: none; }
    .l15-mcount { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(5, 12, 30, .6); border: 1px solid var(--l15-line); font: 600 11.5px Inter, sans-serif; color: var(--l15-text); }
    .l15-mcount b { font: 800 15px/1 var(--l15-display); color: #fff; }
    .l15-mcount:empty { display: none; }
    .l15 { --l15-cr: 14px; }
    .l15-ctl { top: 16px; gap: 6px; }
    .l15-card.is-expanded .l15-ctl { top: 16px; }
    .l15-compass, #l15ZoomIn, #l15ZoomOut { display: none; }
    .l15-ib { width: 36px; height: 36px; border-radius: 11px; }
    .l15-open3d { right: 14px; left: 14px; bottom: 14px; justify-content: center; }
    .l15-feed { top: auto; bottom: 14px; left: 14px; right: 14px; align-items: stretch; }
    .l15-feed .l15-toast:nth-child(n+2) { display: none; }
    .l15-toast { white-space: normal; }
    .l15-frame { display: none; }
    .l15-cta { padding: 16px 16px 4px; }
    .l15-cta .l15-btn, .l15-in, .l15-inbtn { width: 100%; }
    .l15-cta .l15-btn { justify-content: center; }
    .l15-cd { width: 100%; } .l15-cd-row { justify-content: space-between; } .l15-cd-s b { font-size: 28px; }
    .l15-pick { padding: 12px; }
    .l15-pick-row { flex-wrap: wrap; }
    .l15-panel { margin-top: 12px; }
    .l15-gauge { grid-template-columns: minmax(0, 1fr); }
    .l15-list { display: block; max-height: 520px; }
    .l15-empty { top: 60%; padding: 16px; } .l15-empty h3 { font-size: 19px; } .l15-empty p { display: none; }
    .l15-badge { gap: 5px; padding: 2px 8px 2px 2px; }
    .l15-av { width: 24px; height: 24px; font-size: 11px; }
    .l15-nm { font-size: 11px; }
  }
  /* (polish) a phone: the eyebrow stays one line beside the view buttons, never under 11 px: <= 480 THE RICE goes ("Floor 15" carries
     the place, the Hero above names the building), <= 420 the letters close up, <= 380 "Coming soon" stands alone (its pill says when).
     (polish2) <= 470 the zone picker takes one column so each English + Thai zone name reads whole, never cut mid word (rows stay 46 px) */
  @media (max-width: 480px) { .l15-rice { display: none; } }
  @media (max-width: 470px) { .l15-zlist { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 420px) { .l15-eyebrow { letter-spacing: .06em; gap: 6px; } }
  @media (max-width: 380px) { .l15[data-state="soon"] .l15-where, .l15[data-state="off"] .l15-where, .l15[data-state="soon"] .l15-sep, .l15[data-state="off"] .l15-sep { display: none; } }
  /* touch: every control 44 px (the cluster's hit area grows past its edge) */
  @media (pointer: coarse) {
    .l15-ib { width: 44px; height: 44px; }
    .l15-compass { width: 44px; height: 44px; }
    .l15-cluster::before { content: ''; position: absolute; left: -10px; right: -10px; top: -10px; bottom: -10px; }
    .l15-grp-h button, .l15-link, .l15-zguide button, .l15-inmenu button, .l15-switch, .l15-row, .l15-btn-s, .l15-cta [data-confirm], .l15-cta [data-cancel] { min-height: 44px; }
    .l15-grp-h button { width: 100%; justify-content: center; }
    .l15-ctl { top: calc(var(--l15-sh) - 72px); }
  }
  @media (pointer: coarse) and (max-width: 640px) { .l15-ctl { top: 16px; } .l15-head { right: 160px; } }
  /* Boss AP tucks into its small circle (no bubble, no fold button) while floor 15 fills half the screen or the picker is open
     (the page sets body.l15-tuck), so it never covers the panel's privacy line, the last rows or the picker's Check in */
  body.l15-tuck .ap-fab:not(.is-open) .ap-fab-btn, body.hero-tuck .ap-fab:not(.is-open) .ap-fab-btn { width: 62px; height: 62px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--cyan); filter: drop-shadow(0 10px 16px rgba(5, 11, 26, .28)); }
  body.l15-tuck .ap-fab .ap-body, body.l15-tuck .ap-fab .ap-say, body.l15-tuck .ap-fab .ap-fold, body.hero-tuck .ap-fab .ap-body, body.hero-tuck .ap-fab .ap-say, body.hero-tuck .ap-fab .ap-fold { display: none; }
  body.l15-tuck .ap-fab .ap-face-mini, body.hero-tuck .ap-fab .ap-face-mini { display: block; width: 100%; height: 100%; }
  @media (min-width: 901px) { body.has-ap .l15-privacy { padding-right: 58px; } }   /* the tucked circle's corner stays off the privacy line */
  /* (polish) when the card sits under that corner (its panel, the list, the picker), the tucked circle slides into the right gutter instead:
     the page sets --ap-peek (px) so it starts at the card's edge with at least 24 px on screen; keyboard focus brings it back whole */
  body.l15-tuck.l15-dock .ap-fab:not(.is-open) { translate: var(--ap-peek, 0px) 0; transition: translate .25s ease; }
  body.l15-tuck.l15-dock .ap-fab:not(.is-open):has(.ap-fab-btn:focus-visible) { translate: 0 0; }
  @media (prefers-reduced-motion: reduce) { body.l15-tuck.l15-dock .ap-fab:not(.is-open) { transition: none; } }
  /* (Hero = THE RICE) Boss AP never covers the Hero's words or the floor 15 card. Where only the card's top edge is under the whole
     figure (its peek under the Hero) he stands just above it (the page sets body.ap-lift + --ap-lift: it follows the card, so no
     transition). On a phone the folded circle slides into the right gutter while a line of the Hero is under it (body.hero-dock +
     --ap-hpeek: at least 16 px on screen; keyboard focus brings it back whole; a coarse pointer takes taps up to the words, --ap-hhit).
     Wider, the hello bubble keeps out of sight while it would sit on a word (body.hero-hush) */
  body.ap-lift .ap-fab:not(.is-open) { translate: 0 calc(-1 * var(--ap-lift, 0px)); }
  body.hero-tuck.hero-dock .ap-fab:not(.is-open) { translate: var(--ap-hpeek, 0px) 0; transition: translate .25s ease; }
  body.hero-tuck.hero-dock .ap-fab:not(.is-open):has(.ap-fab-btn:focus-visible) { translate: 0 0; }
  @media (prefers-reduced-motion: reduce) { body.hero-tuck.hero-dock .ap-fab:not(.is-open) { transition: none; } }
  @media (pointer: coarse) { body.hero-tuck.hero-dock .ap-fab:not(.is-open) .ap-fab-btn::before { content: ''; position: absolute; top: 0; bottom: 0; right: 0; left: calc(-1 * var(--ap-hhit, 0px)); } }
  body.hero-hush .ap-fab .ap-say { visibility: hidden; }
  /* (polish2) a coarse pointer: the docked circle shows 24 px but takes taps on a 44 px strip at the screen edge (an invisible box inside
     the window; the page sets --ap-hit). On a stacked card the panel, the check-in and Open the 3D view keep that strip free: the rail
     = 44 px less the gutter (24 px, <= 760 px 16 px), so the strip never lies on a row, a button or a line of text. The view buttons at
     the top of the stage keep their place (the eyebrow beside them stays one line): while they pass the corner the page narrows the strip
     to end beside them instead */
  @media (pointer: coarse) {
    body.l15-tuck.l15-dock .ap-fab:not(.is-open) .ap-fab-btn::before { content: ''; position: absolute; top: 0; bottom: 0; right: 0; left: calc(-1 * var(--ap-hit, 0px)); }
  }
  @media (pointer: coarse) and (max-width: 900px) {
    body.has-ap .l15 { --l15-rail: 20px; }
    body.has-ap .l15-cta, body.has-ap .l15-gauge, body.has-ap .l15-panel-h, body.has-ap .l15-list, body.has-ap .l15-privacy { padding-right: var(--l15-rail); }
  }
  @media (pointer: coarse) and (max-width: 760px) { body.has-ap .l15 { --l15-rail: 28px; } }
  @media (pointer: coarse) and (max-width: 640px) { body.has-ap .l15-open3d { right: var(--l15-rail); } }
  /* reduced motion: nothing in the section moves by itself (the 3D view opens on request, without auto motion) */
  @media (prefers-reduced-motion: reduce) {
    #l15Sec, #l15Sec *, #l15Sec *::before, #l15Sec *::after { animation: none !important; transition: none !important; }
  }
  /* (APJC 1504 Live) the person drawer line and CMS > Insights (light surfaces) */
  .l15-pd { align-items: flex-start; color: var(--text); }
  .l15-pd .l15-pd-ic { width: 16px; height: 16px; flex: none; margin-top: 2px; color: #0E7490; }
  .l15-pd b { font-weight: 700; }
  .l15-pd-clear { margin-top: 10px; font-size: 13px; }
  .l15-ins { margin: 4px 0 24px; }
  .l15-ins .l15-daily td:not(:first-child), .l15-ins .l15-daily th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
  @media (forced-colors: active) { .l15-btn, .l15-ib, .l15-row, .l15-inbtn { border: 1px solid ButtonText; } }
  /* ---------- (APJC 1504 & 602 Live) both offices of THE RICE (1504 = room 1504, floor 15 · 602 = room 602, floor 6) ---------- */
  /* Namespace .of-* for the section's own layout; the 3D module's overlay keeps its l15-* classes (the rules above) because the
     section also carries the class l15 (tokens, fonts, overlay). >= 1280 px: one card, both offices side by side (left 1504, right
     602) on ONE canvas (two viewports). < 1280 px: tabs "1504 · n | 602 · n" above one big view. Type floors as 1504: Latin 11 px,
     Thai 12 px; touch targets 44 px on coarse pointers. Contrast of every text >= 4.5:1 on its real background (DESIGN-602 10). */
  .of-card { container-type: inline-size; position: relative; border-radius: 28px; overflow: hidden; isolation: isolate; color: #fff;
    background: radial-gradient(120% 90% at 30% 0%, #10275a 0%, #0A1630 46%, #050B1A 100%); box-shadow: 0 30px 70px -34px rgba(0, 0, 0, .9); }
  .of-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(41, 196, 244, .2); pointer-events: none; z-index: 30; }
  /* top: title + In today + My team + check-in */
  .of-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding: 22px 24px 16px; }
  .of-head { min-width: 0; }
  .of-head .l15-title { margin-top: 10px; font-size: clamp(26px, 2.7vw, 40px); }
  .of-amp { font-weight: 600; color: rgba(190, 214, 245, .72); }
  .of-head .l15-sub { margin: 4px 0 0; font: 500 14px/1.4 Inter, sans-serif; color: var(--l15-text); }
  .of-head .l15-th { margin: 6px 0 0; font: 600 13px/1.3 var(--l15-th); color: rgba(190, 230, 255, .86); }
  .of-side { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px 12px; min-width: 0; }
  .of-total { display: flex; align-items: center; gap: 12px; padding: 6px 14px 6px 8px; border-radius: 16px; background: rgba(5, 12, 30, .5); border: 1px solid rgba(41, 196, 244, .2); }
  .of-total > b { min-width: 44px; font: 800 30px/1 var(--l15-display); text-align: center; background: linear-gradient(90deg, #29C4F4, #7fe3ff 50%, #2DD4BF); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
  .of-total > span { display: flex; flex-direction: column; gap: 3px; font: 700 12px/1.1 Inter, sans-serif; color: #e6f4ff; }
  .of-total small { font: 600 12px/1.1 Inter, sans-serif; color: var(--l15-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .of-total small i { font-style: normal; color: rgba(190, 214, 245, .62); margin: 0 4px; }
  .of-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; cursor: pointer; white-space: nowrap;
    background: rgba(5, 12, 30, .5); border: 1px solid rgba(41, 196, 244, .35); font: 700 13px/1.1 Inter, sans-serif; color: #e6f4ff; transition: background .2s, border-color .2s; }
  .of-chip[hidden] { display: none; }
  .of-chip svg { width: 16px; height: 16px; color: var(--sky); flex: none; }
  .of-chip b { padding: 2px 7px; border-radius: 99px; background: rgba(41, 196, 244, .18); color: #bff1ff; font: 800 12px/1.2 var(--l15-display); }
  .of-chip:hover { background: rgba(41, 196, 244, .12); }
  .of-chip[aria-pressed="true"] { background: rgba(41, 196, 244, .2); border-color: var(--sky); box-shadow: 0 0 0 3px rgba(41, 196, 244, .16); }
  .of-chip[aria-pressed="true"] b { background: var(--sky); color: #031026; }
  .of-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap;
    background: var(--grad-ink); color: #fff; font: 700 14px/1.15 Inter, sans-serif; box-shadow: 0 10px 26px -10px rgba(0, 168, 232, .85), inset 0 1px 0 rgba(255, 255, 255, .22); transition: transform .2s, box-shadow .2s; }
  .of-btn:hover:not([disabled]) { transform: translateY(-1px); }
  .of-btn svg { width: 17px; height: 17px; flex: none; }
  .of-btn small { display: block; font: 600 11.5px/1.2 Inter, sans-serif; color: #fff; }
  .of-btn .of-bt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; min-width: 0; }
  .of-btn .of-bt > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .of-btn-2 { background: rgba(5, 12, 30, .55); border: 1px solid rgba(41, 196, 244, .4); box-shadow: none; }
  .of-btn-in { background: linear-gradient(110deg, #0d5c63, #0f766e 60%, #0d7f86); }
  .of-btn-in.is-hidden { background: linear-gradient(110deg, #243b63, #2c4a7a); }
  .of-btn.is-first { background: linear-gradient(100deg, #1E428A 0%, #1A51A4 35%, #0077C8 72%, #0F7F73 100%); }
  .of-btn[disabled] { cursor: not-allowed; color: rgba(226, 236, 255, .86); background: rgba(255, 255, 255, .06); border: 1px dashed rgba(255, 255, 255, .32); box-shadow: none; transform: none; }
  .of-btn.is-busy { opacity: .75; cursor: progress; }
  .of-cta { display: flex; align-items: center; gap: 8px; position: relative; min-width: 0; }
  .of-ib { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 999px; cursor: pointer; background: rgba(5, 12, 30, .55); border: 1px solid rgba(41, 196, 244, .4); color: #e6f4ff; flex: none; }
  .of-ib svg { width: 18px; height: 18px; }
  .of-ib .ic-play, .of-ib[aria-pressed="true"] .ic-pause { display: none; } .of-ib[aria-pressed="true"] .ic-play { display: block; }
  .of-ib .ic-close, .of-ib[aria-pressed="true"] .ic-open { display: none; } .of-ib[aria-pressed="true"] .ic-close { display: block; }
  .of-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 240px; padding: 6px; border-radius: 14px; background: rgba(8, 20, 49, .97); border: 1px solid rgba(41, 196, 244, .4); box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .8); }
  .of-menu[hidden] { display: none; }
  .of-menu button { display: flex; width: 100%; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: none; cursor: pointer; text-align: left; font: 600 13.5px/1.2 Inter, sans-serif; color: #e6f4ff; }
  .of-menu button svg { width: 16px; height: 16px; flex: none; color: var(--sky); }
  .of-menu button:hover, .of-menu button:focus-visible { background: rgba(41, 196, 244, .14); }
  .of-menu .of-mnote { margin: 4px 8px 4px; font: 500 12px/1.35 Inter, sans-serif; color: var(--l15-text); }
  .of-note { margin: 0; font: 500 12px/1.4 Inter, sans-serif; color: var(--l15-text); }
  /* the countdown before opening (in the check-in place) */
  .of-cd { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 16px; background: rgba(5, 12, 30, .5); border: 1px solid var(--l15-line); }
  .of-cd-k { margin: 0; font: 700 11px/1.2 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--sky); max-width: 92px; }
  .of-cd-row { display: flex; align-items: flex-start; gap: 4px; }
  .of-cd-s { display: flex; flex-direction: column; align-items: center; min-width: 32px; }
  .of-cd-s b { font: 800 22px/1 var(--l15-display); font-variant-numeric: tabular-nums; }
  .of-cd-s small { margin-top: 3px; font: 700 11px/1 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--l15-text); }
  .of-cd-row i { font: 700 18px/1.1 var(--l15-display); font-style: normal; color: rgba(41, 196, 244, .6); }

  /* tabs (< 1280 px) */
  .of-tabs { display: none; gap: 6px; margin: 0 24px 14px; padding: 5px; border-radius: 999px; background: rgba(5, 12, 30, .55); border: 1px solid rgba(41, 196, 244, .22); }
  .of-tabs [role="tab"] { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer; background: none; color: rgba(226, 236, 255, .9);
    font: 700 15px/1 var(--l15-display); letter-spacing: .01em; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
  .of-tabs [role="tab"] small { font: 600 12px/1 Inter, sans-serif; color: rgba(190, 214, 245, .86); }
  .of-tabs [role="tab"] b { min-width: 22px; padding: 3px 7px; border-radius: 99px; background: rgba(41, 196, 244, .18); color: #bff1ff; font: 800 12px/1 var(--l15-display); }
  .of-tabs [role="tab"][aria-selected="true"] { background: var(--grad-ink); color: #fff; box-shadow: 0 6px 18px -6px rgba(0, 168, 232, .8); }
  .of-tabs [role="tab"][aria-selected="true"] small { color: #fff; }
  .of-tabs [role="tab"][aria-selected="true"] b { background: #fff; color: #0A1630; }
  .of[data-layout="tabs"] .of-tabs { display: flex; }

  /* stage: ONE canvas, two panes */
  .of-stage { --of-sh: clamp(360px, min(37cqw, calc(100svh - 232px)), 560px); position: relative; height: var(--of-sh); overflow: hidden; }
  .of[data-layout="tabs"] .of-stage { --of-sh: clamp(420px, min(54cqw, calc(100svh - 290px)), 640px); }
  .of-gl { position: absolute; inset: 0; background: radial-gradient(110% 80% at 50% 10%, #0f2556 0%, #081530 55%, #050B1A 100%); }
  .of .of-canvas { position: absolute; left: 0; top: 0; opacity: 1; }
  .of-pane { position: absolute; top: 0; bottom: 0; overflow: hidden; }
  .of[data-layout="twin"] .of-pane[data-floor="1504"] { left: 0; width: calc(50% - 1px); }
  .of[data-layout="twin"] .of-pane[data-floor="602"] { right: 0; width: calc(50% - 1px); }
  .of[data-layout="tabs"] .of-pane { left: 0; right: 0; }
  .of[data-layout="tabs"] .of-pane:not(.is-active) { display: none; }
  .of-split { position: absolute; z-index: 6; top: 0; bottom: 0; left: calc(50% - 1px); width: 2px; background: #050B1A; pointer-events: none; }
  .of-split::after { content: ''; position: absolute; inset: 8% 0; background: linear-gradient(180deg, rgba(41, 196, 244, 0), rgba(41, 196, 244, .55) 30%, rgba(41, 196, 244, .55) 70%, rgba(41, 196, 244, 0)); }
  .of[data-layout="tabs"] .of-split { display: none; }
  .of-surf { position: absolute; inset: 0; z-index: 1; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
  .of-pane .l15-stillwrap { z-index: 2; }
  .of-pane > .l15-canvas { opacity: 1; }
  .of-poster { transition: opacity .9s ease; }
  .of-poster.is-gone { opacity: 0; pointer-events: none; }
  .of-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(4, 10, 26, .55), rgba(4, 10, 26, 0) 26%), linear-gradient(0deg, rgba(4, 10, 26, .55), rgba(4, 10, 26, 0) 22%); }
  .of-pane .l15-ov { z-index: 3; }
  .of-ph { position: absolute; z-index: 5; left: 18px; top: 14px; right: 70px; pointer-events: none; }
  .of-ph h3 { display: flex; align-items: center; gap: 12px; margin: 0; }
  .of-ph-num { font: 800 34px/1 var(--l15-display); letter-spacing: -.03em; background: linear-gradient(90deg, #29C4F4, #7fe3ff 45%, #2DD4BF); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; font-variant-numeric: tabular-nums; }
  .of-ph-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .of-ph-t b { font: 800 15px/1.1 var(--l15-display); color: #fff; white-space: nowrap; text-shadow: 0 1px 8px rgba(0, 8, 24, .9); }
  .of-ph-t small { font: 700 11px/1.1 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--sky); white-space: nowrap; }
  .of-ph-n { margin: 8px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font: 600 13px/1.2 Inter, sans-serif; color: #e2ecff; text-shadow: 0 1px 8px rgba(0, 8, 24, .9); }
  .of-ph-n:empty { display: none; }
  .of-ph-n b { font: 800 15px/1 var(--l15-display); color: #fff; }
  .of-ph-n .of-me { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; background: rgba(13, 92, 99, .92); color: #e6fffb; font: 700 12px/1.2 Inter, sans-serif; text-shadow: none; }
  .of-ph-n .of-soon { padding: 3px 9px; border-radius: 99px; background: rgba(5, 12, 30, .8); border: 1px solid rgba(41, 196, 244, .45); color: #bff1ff; font: 700 12px/1.2 Inter, sans-serif; text-shadow: none; }
  .of-ph .l15-playchip { pointer-events: auto; margin-top: 8px; }
  .of-pctl { position: absolute; z-index: 5; right: 12px; top: 12px; display: flex; gap: 6px; }
  .of-pctl .of-ib { width: 40px; height: 40px; background: rgba(5, 12, 30, .72); }
  .of[data-mode="idle"] .of-pctl, .of[data-mode="none"] .of-pctl, .of[data-mode="flat"] .of-pctl { display: none; }
  .of-rooms { position: absolute; z-index: 5; left: 12px; right: 12px; bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; pointer-events: none; }
  .of-rooms[hidden] { display: none; }
  .of[data-layout="twin"] .of-pane[data-floor="602"] .of-rooms, .of[data-layout="tabs"] .of-rooms { right: 112px; }
  .of-room { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 4px 11px 4px 9px; border-radius: 999px; pointer-events: auto; white-space: nowrap;
    background: rgba(5, 12, 30, .86); border: 1px solid rgba(41, 196, 244, .26); font: 600 12px/1.2 Inter, sans-serif; color: #dbe9ff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .of-room b { font-weight: 700; color: #fff; }
  .of-room i { width: 8px; height: 8px; border-radius: 99px; flex: none; background: #34D399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .2); }
  .of-room[data-s="busy"] i { background: #F59E0B; box-shadow: 0 0 0 3px rgba(245, 158, 11, .22); }
  .of-room[data-s="soon"] i { background: #FCD34D; box-shadow: 0 0 0 3px rgba(252, 211, 77, .2); }
  .of-room[data-s="off"] i { background: #94A3B8; box-shadow: none; }
  .of-loading { position: absolute; z-index: 6; left: 50%; top: 50%; translate: -50% -50%; margin: 0; display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 999px;
    background: rgba(5, 12, 30, .82); border: 1px solid rgba(41, 196, 244, .35); font: 600 12.5px/1 Inter, sans-serif; color: #dbe9ff; pointer-events: none; white-space: nowrap; }
  .of-loading[hidden] { display: none; }
  .of-loading span { width: 8px; height: 8px; border-radius: 99px; background: var(--sky); animation: ofPulse 1.2s ease-in-out infinite; }
  @keyframes ofPulse { 50% { opacity: .3; transform: scale(.7); } }
  .of-open3d { position: absolute; z-index: 9; left: 50%; translate: -50% 0; bottom: 64px; }
  .of-open3d[hidden] { display: none; }
  .of-dim { position: absolute; z-index: 4; inset: 0; pointer-events: none; background: rgba(3, 8, 22, .45); opacity: 0; transition: opacity .3s; }
  .of-pane.is-dimmed .of-dim { opacity: 1; }
  .of-ctl { position: absolute; z-index: 7; right: 12px; bottom: 12px; display: flex; gap: 6px; }
  .of-ctl .of-ib { width: 40px; height: 40px; background: rgba(5, 12, 30, .72); }
  .of[data-mode="idle"] .of-ctl, .of[data-mode="none"] .of-ctl, .of[data-mode="flat"] .of-ctl { display: none; }
  .of[data-mode="still"] .of-ctl > :not(#l15Expand) { display: none; }   /* a still: only the full view (nothing moves) */
  .of-hint { position: absolute; z-index: 8; left: 50%; top: 50%; translate: -50% -50%; margin: 0; padding: 7px 13px; border-radius: 999px; background: rgba(5, 12, 30, .86); border: 1px solid rgba(41, 196, 244, .35);
    font: 600 12.5px/1.2 Inter, sans-serif; color: #fff; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .25s; }
  .of-hint.is-flash { opacity: 1; }
  /* the first-in card (in the pane of an office where nobody is in yet) */
  .of-first { position: absolute; z-index: 7; left: 50%; top: 56%; translate: -50% -50%; width: min(300px, calc(100% - 32px)); padding: 16px 18px; border-radius: 18px; text-align: center;
    background: rgba(5, 12, 30, .86); border: 1px solid rgba(41, 196, 244, .4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .9); }
  .of-first[hidden] { display: none; }
  .of-first p { margin: 0; font: 700 11px/1.2 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--sky); }
  .of-first h4 { margin: 6px 0 10px; font: 800 18px/1.2 var(--l15-display); color: #fff; }
  .of-first .of-btn { min-height: 40px; font-size: 13.5px; padding: 0 16px; }
  /* toasts (arrivals) at the top of the stage, centred between the panes' heads */
  .of .of-feed { top: auto; bottom: 58px; right: auto; left: 50%; translate: -50% 0; align-items: center; z-index: 8; }
  .of .of-feed .l15-toast:nth-child(n+3) { display: none; }

  /* zone notes from the module (room status on plates / tags) */
  .l15-plate-note { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; font: 600 11px/1.15 Inter, sans-serif; color: #c9f7df; letter-spacing: 0; text-transform: none; }
  .l15-plate-note::before { content: ''; width: 7px; height: 7px; border-radius: 99px; background: #34D399; flex: none; }
  .l15-plate-note[data-room="busy"] { color: #ffe1b0; }
  .l15-plate-note[data-room="busy"]::before { background: #F59E0B; }
  .l15-plate-note[data-room="soon"] { color: #fff0bf; }
  .l15-plate-note[data-room="soon"]::before { background: #FCD34D; }
  .l15-tag-dot { order: -1; width: 7px; height: 7px; border-radius: 99px; background: #34D399; flex: none; }
  .l15-tag[data-room="busy"] .l15-tag-dot { background: #F59E0B; }
  .l15-tag[data-room="soon"] .l15-tag-dot { background: #FCD34D; }

  /* dock: the list view of each office (everything the 3D shows, as HTML) */
  .of-dock { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(41, 196, 244, .16); }
  .of[data-layout="tabs"] .of-dock { grid-template-columns: minmax(0, 1fr); }
  .of[data-layout="tabs"] .of-list:not(.is-active) { display: none; }
  .of-list { min-width: 0; padding: 12px 22px 10px; }   /* (layout) tighter: the compact rows */
  .of[data-layout="twin"] .of-list + .of-list { border-left: 1px solid rgba(41, 196, 244, .16); }
  .of-list > h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; font: 800 15px/1.2 var(--l15-display); color: #fff; outline: none; }
  .of-list > h3 span { font: 700 12px/1 Inter, sans-serif; color: var(--sky); letter-spacing: .06em; }
  .of-list > h3 em { margin-left: auto; font: 600 12px/1 Inter, sans-serif; font-style: normal; color: var(--l15-text); }
  /* (layout 2026-11-12) the compact lists (l15List): one row per zone with people = the zone (a button that lights it on the model), up to
     5 avatars + "+N" (all of them are in the page, the rest shown with +N), the nicknames on one line, n / seats; the empty zones on one
     muted line; the count-only places (meeting rooms, the Manager Room) on one row; my own status on one line at the top of my office's
     list. Narrow lists (< 520 px): the avatars under the zone, no nicknames. Below 1024 px and on touch every button is 44 px */
  .of-list { container-type: inline-size; }
  .of-zones { display: flex; flex-direction: column; gap: 2px; }
  .of-zg { display: grid; grid-template-columns: 150px auto minmax(0, 1fr) auto auto; align-items: center; column-gap: 10px; min-height: 36px; padding: 0 6px 0 0; border-radius: 10px; }
  .of-zg.is-hot { background: rgba(41, 196, 244, .08); }
  .of-zg > .of-zh { grid-column: 1; grid-row: 1; }
  .of-zg > .of-stk { grid-column: 2; grid-row: 1; }
  .of-zg > .of-names { grid-column: 3; grid-row: 1; }
  .of-zg > .of-new { grid-column: 4; grid-row: 1; }
  .of-zg > .of-zn { grid-column: 5; grid-row: 1; }
  .of-zg.is-open > .of-stk { grid-column: 1 / -1; grid-row: 2; padding: 2px 0 6px 18px; }
  .of-zh { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 32px; padding: 4px 8px; border: 0; border-radius: 9px; background: none; cursor: pointer; text-align: left; color: #e6f4ff; }
  .of-zh:hover, .of-zh:focus-visible, .of-zh.is-hot { background: rgba(41, 196, 244, .1); }
  .of-zh i { width: 9px; height: 9px; border-radius: 3px; flex: none; background: var(--zt, #29C4F4); box-shadow: 0 0 6px var(--zt, #29C4F4); }
  .of-zh b { min-width: 0; font: 700 13px/1.2 Inter, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .of-zh em { font: 700 12px/1 Inter, sans-serif; font-style: normal; color: var(--l15-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .of-stk { display: flex; align-items: center; min-width: 0; }
  .of-people { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0 0 0 7px; list-style: none; }
  .of-people > li { display: flex; margin-left: -7px; }
  .of-zg:not(.is-open) .of-people > li:nth-child(n+6) { display: none; }
  .of-zg.is-open .of-people { row-gap: 6px; }
  .of-row { position: relative; display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 999px; background: none; cursor: pointer; color: #fff; }
  .of-row .l15-av { width: 30px; height: 30px; font-size: 11px; box-shadow: 0 0 0 2px #0b1a3c; transition: transform .15s ease; }
  .of-row:hover, .of-row.is-hl, .of-row:focus-visible { z-index: 1; }
  .of-row:hover .l15-av, .of-row.is-hl .l15-av { transform: translateY(-2px); box-shadow: 0 0 0 2px #0b1a3c, 0 0 0 3.5px var(--sky); }
  .of-row.is-me .l15-av { box-shadow: 0 0 0 2px #0b1a3c, 0 0 0 4px #fff; }
  .of-row.is-me.is-hidden .l15-av { box-shadow: 0 0 0 2px #0b1a3c; outline: 2px dashed rgba(255, 255, 255, .8); outline-offset: 1px; filter: grayscale(.5); }
  .of-row.is-new .l15-av { box-shadow: 0 0 0 2px #0b1a3c, 0 0 0 4px #2DD4BF; }
  .of-row .of-wf { position: absolute; right: -2px; bottom: 0; margin: 0; width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; background: #0b1a3c; color: #7dd3fc; box-shadow: 0 0 0 1px rgba(125, 211, 252, .55); }
  .of-row .of-wf-ic { width: 10px; height: 10px; }
  .of-more { flex: none; min-width: 34px; height: 30px; margin-left: 6px; padding: 0 9px; border-radius: 99px; border: 1px solid rgba(41, 196, 244, .4); background: rgba(5, 12, 30, .6); color: #e6f4ff; font: 700 12px/1 Inter, sans-serif; cursor: pointer; font-variant-numeric: tabular-nums; }
  .of-more:hover { background: rgba(41, 196, 244, .14); }
  .of-names { min-width: 0; font: 500 12.5px/1.3 Inter, sans-serif; color: var(--l15-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .of-zg > .of-new { padding: 2px 7px; border-radius: 99px; background: rgba(45, 212, 191, .16); color: #b8fff2; font: 700 11px/1.2 Inter, sans-serif; font-style: normal; white-space: nowrap; }
  .of-zn { font: 700 12px/1 Inter, sans-serif; font-style: normal; color: var(--l15-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .of-mine { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0 0 4px; padding: 6px 10px; border-radius: 10px; background: rgba(41, 196, 244, .08); border: 1px solid rgba(41, 196, 244, .2); font: 500 12.5px/1.35 Inter, sans-serif; color: var(--l15-text); }
  .of-mine b { font-weight: 700; color: #fff; }
  .of-mine small { font: 500 12px/1.35 Inter, sans-serif; color: var(--l15-text); }
  .of-mine .of-wf { margin-left: -4px; }
  .of-you { padding: 1px 5px; border-radius: 5px; background: #fff; color: #0A1630; font: 800 11px/1.25 Inter, sans-serif; letter-spacing: .06em; }
  .of-you.is-hidden { background: rgba(226, 236, 255, .2); color: #fff; border: 1px dashed rgba(255, 255, 255, .6); }
  .of-fold { margin: 0; padding: 2px 8px; font: 500 12.5px/1.45 Inter, sans-serif; color: rgba(206, 224, 248, .78); }
  .of-fold b { font-weight: 600; color: var(--l15-text); }
  .of-fold span { border-radius: 4px; }
  .of-fold span.is-hot { color: #fff; background: rgba(41, 196, 244, .14); }
  .of-zr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 2px 0 0; padding: 6px 0 0 8px; border-top: 1px dashed rgba(41, 196, 244, .16); }
  .of-zr-k { font: 600 12px/1.2 Inter, sans-serif; color: var(--l15-text); }
  .of-sep { color: var(--l15-text); font: 700 12px/1 Inter, sans-serif; }
  .of-zc { display: inline-flex; align-items: center; gap: 6px; border-radius: 99px; }
  .of-zg.of-zc.is-hot { background: none; }
  .of-zc > .of-zh { min-height: 28px; padding: 1px 10px 1px 8px; gap: 6px; border-radius: 99px; background: rgba(5, 12, 30, .45); border: 1px solid rgba(41, 196, 244, .2); }
  .of-zc > .of-zh.is-hot, .of-zc > .of-zh:hover { background: rgba(41, 196, 244, .14); }
  .of-zc .of-zh i { width: 7px; height: 7px; border-radius: 2px; }
  .of-zc .of-zh b { font-size: 12.5px; }
  .of-zc .of-people { padding-left: 7px; }
  .of-rs { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 99px; font: 600 11px/1.2 Inter, sans-serif; color: #c9f7df; background: rgba(52, 211, 153, .12); white-space: nowrap; }
  .of-rs[data-s="busy"] { color: #ffe1b0; background: rgba(245, 158, 11, .14); }
  .of-rs[data-s="soon"] { color: #fff0bf; background: rgba(252, 211, 77, .12); }
  .of-rs[data-s="off"] { color: #dbe4f0; background: rgba(148, 163, 184, .14); }
  .of-none { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 2px 0 0; padding: 4px 4px 4px 8px; }
  .of-none p { margin: 0; font: 600 13px/1.4 Inter, sans-serif; color: var(--l15-text); }
  .of-btn.of-btn-sm { min-height: 36px; padding: 0 16px; gap: 7px; font-size: 13px; }
  .of-btn.of-btn-sm svg { width: 15px; height: 15px; }
  .of-zchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
  .of-zh.of-zchip { min-height: 32px; padding: 2px 10px 2px 8px; border-radius: 99px; background: rgba(5, 12, 30, .45); border: 1px solid rgba(41, 196, 244, .2); }
  .of-zh.of-zchip:hover, .of-zh.of-zchip.is-hot { background: rgba(41, 196, 244, .14); }
  .of-zchip em { margin-left: 2px; font-weight: 600; }
  .of-msg { margin: 8px 0 0; font: 500 13px/1.45 Inter, sans-serif; color: var(--l15-text); }
  .of-msg b { color: #fff; }
  @container (max-width: 520px) {
    .of-zg { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: 0; padding-bottom: 4px; }
    .of-zg > .of-new { grid-column: 2; }
    .of-zg > .of-zn { grid-column: 3; }
    .of-zg > .of-stk, .of-zg.is-open > .of-stk { grid-column: 1 / -1; grid-row: 2; padding: 0 0 0 18px; }
    .of-zg > .of-names { display: none; }
    .of-zr > .of-sep { display: none; }   /* the rooms wrap: no dot left at a line end */
  }
  /* the privacy text behind the i button (aria-expanded); "Updated n min ago" on the right */
  .of-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; margin: 0; padding: 8px 22px 12px; border-top: 1px solid rgba(41, 196, 244, .12); font: 500 12px/1.4 Inter, sans-serif; color: var(--l15-text); }
  .of-foot p { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
  .of-foot p[hidden] { display: none; }
  .of-foot svg { width: 15px; height: 15px; color: var(--sky); flex: none; }
  .of-info { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px 0 8px; border-radius: 99px; border: 1px solid rgba(41, 196, 244, .32); background: rgba(5, 12, 30, .4); color: #e6f4ff; font: 600 12.5px/1 Inter, sans-serif; cursor: pointer; }
  .of-info:hover { background: rgba(41, 196, 244, .12); }
  .of-info:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
  .of-foot .of-info-chev { width: 14px; height: 14px; color: var(--l15-text); transition: transform .2s ease; }
  .of-info[aria-expanded="true"] .of-info-chev { transform: rotate(180deg); }
  .of-priv { flex: 1 1 100%; display: grid; gap: 6px; }
  .of-priv[hidden] { display: none; }
  .of-upd { font: 600 12px/1.2 Inter, sans-serif; color: var(--l15-text); }
  .of-upd[hidden] { display: none; }
  @media (max-width: 1023px), (pointer: coarse) {
    .of-zg { min-height: 44px; }
    .of-zh, .of-zc > .of-zh, .of-zh.of-zchip { min-height: 44px; min-width: 44px; }
    .of-people, .of-zc .of-people { padding-left: 0; }
    .of-people > li { margin-left: 0; }
    .of-row { width: 44px; height: 44px; }
    .of-more { min-width: 44px; height: 44px; margin-left: 2px; }
    .of-info, .of-btn.of-btn-sm { min-height: 44px; min-width: 44px; }
  }
  /* (layout 2026-11-12) the section under Pulse (+ APJC Play), before Tech & Cyber Watch: a dark band of its own that runs into the Watch */
  #ofSec { padding: 56px 0 8px; background: linear-gradient(180deg, #081431 0%, #071229 100%); }
  @media (max-width: 760px) { #ofSec { padding: 36px 0 4px; } }
  /* (layout 2026-11-12) the office chip under the Today cells (tdoRender): one pill, it wraps on a phone */
  .td-office { position: relative; z-index: 1; max-width: 1360px; margin: 0 auto; padding: 0 24px 14px; }
  .td-office[hidden] { display: none; }
  .tdo { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; max-width: 100%; min-height: 50px; padding: 4px 5px 4px 4px; border-radius: 26px; background: rgba(41, 196, 244, .07); border: 1px solid rgba(41, 196, 244, .26); color: #fff; }
  .tdo-go { display: inline-flex; align-items: center; gap: 9px; min-width: 0; min-height: 40px; padding: 0 14px 0 12px; border: 0; border-radius: 999px; background: transparent; color: #fff; font: 600 13.5px/1.2 Inter, sans-serif; cursor: pointer; }
  .tdo-go:hover { background: rgba(41, 196, 244, .12); }
  .tdo-go b { font-weight: 800; }
  .tdo-live { position: relative; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--teal); box-shadow: 0 0 8px var(--teal); }
  .tdo-k { font: 700 10.5px/1.2 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .72); white-space: nowrap; }
  .tdo-n { white-space: nowrap; font-variant-numeric: tabular-nums; }
  .tdo-n b { color: var(--sky); }
  .tdo-n i { margin: 0 8px; font-style: normal; color: rgba(255, 255, 255, .45); }
  .tdo-tag { padding: 1px 8px; border-radius: 99px; background: rgba(251, 191, 36, .16); border: 1px solid rgba(251, 191, 36, .5); color: #FDE68A; font: 700 11px/1.45 Inter, sans-serif; }
  .tdo-me { display: inline-flex; align-items: center; gap: 7px; min-width: 0; padding: 0 2px 0 12px; border-left: 1px solid rgba(255, 255, 255, .16); font: 500 13.5px/1.25 Inter, sans-serif; color: rgba(255, 255, 255, .86); }
  .tdo-me b { font-weight: 700; color: #fff; }
  .tdo-me .of-wf { margin-left: 0; }
  .tdo-ic { width: 16px; height: 16px; flex: none; color: var(--sky); }
  .tdo-chev { width: 15px; height: 15px; flex: none; transform: rotate(-90deg); color: rgba(255, 255, 255, .7); }
  .tdo-act { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(41, 196, 244, .55); background: rgba(5, 12, 30, .5); color: #fff; font: 700 13px/1 Inter, sans-serif; cursor: pointer; white-space: nowrap; }
  .tdo-act:hover { background: rgba(41, 196, 244, .16); }
  .tdo-act.is-in { border-color: transparent; background: var(--grad-ink); box-shadow: 0 8px 20px -10px rgba(0, 168, 232, .85); }
  .tdo-act .tdo-ic { color: #fff; width: 15px; height: 15px; }
  .tdo-go:focus-visible, .tdo-act:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
  @media (max-width: 1023px), (pointer: coarse) { .tdo-go, .tdo-act { min-height: 44px; } }
  @media (max-width: 760px) {
    .td-office { padding: 0 16px 12px; }
    .tdo { display: flex; gap: 2px 6px; border-radius: 20px; }
    .tdo-go { padding: 0 10px; }
    .tdo-me { flex: 1 1 auto; padding: 0 0 0 10px; border-left: 0; }
    .tdo-act { margin-left: auto; }
  }
  @media (forced-colors: active) { .tdo, .tdo-act, .of-info, .of-more { border: 1px solid ButtonText; } }

  /* check-in sheet: office -> zone (a dialog; on a phone a bottom sheet) */
  .of-sheet { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px 16px; background: rgba(2, 6, 18, .62); font-family: var(--l15-ui); }
  .of-sheet[hidden] { display: none; }
  .of-sheet-in { position: relative; width: min(580px, 100%); max-height: calc(100svh - 40px); overflow: auto; padding: 20px 22px 18px; border-radius: 22px; color: #fff;
    background: linear-gradient(180deg, #102654 0%, #0A1630 60%, #081431 100%); border: 1px solid rgba(41, 196, 244, .38); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9); }
  .of-sheet h3 { margin: 0; padding-right: 44px; font: 800 20px/1.2 var(--l15-display); outline: none; }
  .of-sheet .of-sp { margin: 6px 0 0; font: 500 13px/1.45 Inter, sans-serif; color: var(--l15-text); }
  .of-sheet .of-x { position: absolute; right: 14px; top: 14px; }
  .of-steps { display: flex; gap: 8px; margin: 14px 0 12px; font: 700 11px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(190, 214, 245, .78); }
  .of-steps span { display: inline-flex; align-items: center; gap: 6px; }
  .of-steps span.is-on { color: var(--sky); }
  .of-steps span + span::before { content: ''; width: 18px; height: 1px; background: rgba(190, 214, 245, .4); }
  .of-fopts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .of-fopt { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 112px; padding: 14px 14px 12px; border-radius: 16px; cursor: pointer; text-align: left;
    background: rgba(5, 12, 30, .55); border: 1px solid rgba(41, 196, 244, .28); color: #fff; }
  .of-fopt:hover:not([aria-disabled="true"]) { border-color: rgba(41, 196, 244, .6); }
  .of-fopt[aria-checked="true"] { border-color: var(--sky); background: rgba(16, 48, 104, .8); box-shadow: 0 0 0 3px rgba(41, 196, 244, .18); }
  .of-fopt[aria-disabled="true"] { cursor: not-allowed; opacity: .72; }
  .of-fopt .of-fn { font: 800 30px/1 var(--l15-display); letter-spacing: -.02em; background: linear-gradient(90deg, #29C4F4, #7fe3ff 50%, #2DD4BF); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .of-fopt b { font: 700 14px/1.2 Inter, sans-serif; }
  .of-fopt small { font: 500 12px/1.3 Inter, sans-serif; color: var(--l15-text); }
  .of-fopt .of-last { position: absolute; right: 10px; top: 10px; padding: 2px 8px; border-radius: 99px; background: rgba(41, 196, 244, .18); color: #bff1ff; font: 700 11px/1.3 Inter, sans-serif; }
  .of-back { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin: 0 0 8px; padding: 0 12px 0 8px; border-radius: 999px; border: 1px solid rgba(41, 196, 244, .3); background: rgba(5, 12, 30, .5); cursor: pointer; font: 700 12.5px/1 Inter, sans-serif; color: #e6f4ff; }
  .of-back svg { width: 15px; height: 15px; }
  .of-zopts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 2px; list-style: none; outline: none; border-radius: 14px; }
  .of-zopts:focus-visible { box-shadow: 0 0 0 2px var(--sky); }
  .of-zopt { display: flex; align-items: center; gap: 9px; min-height: 54px; padding: 8px 10px; border-radius: 12px; cursor: pointer; background: rgba(5, 12, 30, .5); border: 1px solid rgba(41, 196, 244, .2); }
  .of-zopt i { width: 10px; height: 10px; border-radius: 3px; flex: none; background: var(--zt); box-shadow: 0 0 8px var(--zt); }
  .of-zopt .of-zt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .of-zopt b { font: 700 13.5px/1.15 Inter, sans-serif; }
  .of-zopt span[lang="th"] { font: 500 12px/1.2 var(--l15-th); color: rgba(214, 230, 250, .9); }
  .of-zopt em { margin-left: auto; font: 700 12px/1 Inter, sans-serif; font-style: normal; color: var(--l15-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .of-zopt small { display: block; font: 600 11px/1.2 Inter, sans-serif; color: #ffe1b0; }
  .of-zopt small[data-s="free"], .of-zopt small[data-s="off"] { color: #c9f7df; }
  .of-zopt.is-act { border-color: var(--sky); background: rgba(16, 48, 104, .85); box-shadow: 0 0 0 2px rgba(41, 196, 244, .35); }
  .of-zopt[aria-selected="true"] { border-color: #fff; background: rgba(24, 66, 140, .9); }
  .of-zopt[aria-selected="true"] em::before { content: '\2713  '; color: #fff; }
  .of-hint2 { margin: 10px 0 0; font: 500 12px/1.4 Inter, sans-serif; color: var(--l15-text); }
  .of-sw { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(5, 12, 30, .45); border: 1px solid rgba(41, 196, 244, .18); }
  .of-sw > span { display: flex; flex-direction: column; gap: 2px; font: 700 13px/1.2 Inter, sans-serif; }
  .of-sw small { font: 500 12px/1.3 Inter, sans-serif; color: var(--l15-text); }
  .of-switch { position: relative; flex: none; width: 52px; height: 30px; padding: 0; border-radius: 99px; border: 1px solid rgba(41, 196, 244, .5); background: rgba(5, 12, 30, .8); cursor: pointer; }
  .of-switch::after { content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 99px; background: #8ea3c2; transition: transform .2s, background .2s; }
  .of-switch[aria-checked="true"] { background: #0f766e; border-color: #5eead4; }
  .of-switch[aria-checked="true"]::after { transform: translateX(22px); background: #fff; }
  .of-sf { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin: 16px 0 0; }
  .of-sheet .of-pdpa { margin: 12px 0 0; padding: 9px 12px; border-radius: 12px; background: rgba(41, 196, 244, .08); border: 1px solid rgba(41, 196, 244, .2); font: 500 12px/1.45 Inter, sans-serif; color: #dbe9ff; }
  .of-btn:focus-visible, .of-ib:focus-visible, .of-chip:focus-visible, .of-tabs [role="tab"]:focus-visible, .of-zh:focus-visible, .of-row:focus-visible, .of-fopt:focus-visible, .of-back:focus-visible,
  .of-switch:focus-visible, .of-menu button:focus-visible, .of-sheet h3:focus-visible, .of-list > h3:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
  /* (Wi-Fi) the mark next to a name checked in from the office Wi-Fi, the same mark on a 3D badge, the auto check-in switch (foot + sheet) */
  .of-wf { display: inline-flex; align-items: center; margin-left: 5px; color: #7dd3fc; vertical-align: -1px; }
  .of-wf-ic { width: 13px; height: 13px; flex: none; }
  .of-btn-in.is-wifi > svg:first-child { color: #7dd3fc; }
  .l15-badge .of-wpin { display: inline-flex; align-items: center; flex: none; margin-left: -2px; color: #7dd3fc; }
  .l15-badge .of-wpin-ic { width: 12px; height: 12px; }
  .l15-pin.is-mini .of-wpin { display: none; }
  .of-card > .of-wsw { margin: 0 22px 18px; }   /* right under the privacy foot, outside the dock ("Skip the office lists" still leaves the dock) */
  .of-card > .of-wsw[hidden] { display: none; }
  .of-wsw > span { min-width: 0; }
  .of-wsw > span small { font-weight: 500; }
  .of-wsw > span > b { display: flex; align-items: flex-start; gap: 7px; color: #fff; }
  .of-wsw .of-wsw-ic { width: 15px; height: 15px; flex: none; margin-top: 1px; color: #7dd3fc; }
  .of-switch[aria-busy="true"] { opacity: .6; cursor: progress; }
  .of-wsw .of-wskip { display: block; margin-top: 4px; color: #fde68a; }   /* (Wi-Fi fix W4 / W9) back on from tomorrow */
  .of-wline-ic { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; }

  /* full view: the card covers the page (a dialog, the page behind is inert) */
  .of-card.is-expanded { position: fixed; inset: 0; z-index: 75; border-radius: 0; overflow-y: auto; }
  .of-card.is-expanded .of-stage { --of-sh: calc(100dvh - 160px); min-height: 360px; }
  .of[data-layout="tabs"] .of-card.is-expanded .of-stage { --of-sh: calc(100dvh - 220px); }

  /* breakpoints */
  @media (max-width: 1279px) { .of-top { padding: 20px 22px 14px; } }
  @media (max-width: 900px) {
    .of-top { align-items: flex-start; }
    .of-side { justify-content: flex-start; width: 100%; }
    .of-cta { margin-left: auto; }
  }
  @media (max-width: 640px) {
    .of-card { border-radius: 22px; }
    .of-top { padding: 16px 16px 12px; gap: 12px; }
    .of-head .l15-title { font-size: clamp(22px, 6.2vw, 28px); white-space: normal; }
    .of-head .l15-sub { display: none; }
    .of-side { gap: 8px; }
    .of-total { padding: 4px 10px 4px 6px; gap: 8px; }
    .of-total > b { font-size: 24px; min-width: 32px; }
    .of-cta { width: 100%; margin-left: 0; }
    .of-cta:has(.of-cd) { flex-wrap: wrap; }   /* the countdown above its disabled button; the quick check-in keeps its arrow beside it */
    .of-cta > .of-btn { flex: 1 1 auto; min-width: 0; }
    .of-cta .of-bt { min-width: 0; }
    .of-cta .of-bt span, .of-cta .of-bt small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
    .of-cd { width: 100%; justify-content: space-between; }
    .of-tabs { margin: 0 16px 12px; }
    .of[data-layout="tabs"] .of-stage { --of-sh: 470px; }
    .of-ph { left: 14px; top: 12px; right: 60px; }
    .of-ph-num { font-size: 28px; }
    .of-rooms { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; pointer-events: auto; padding-bottom: 2px; }
    .of-rooms::-webkit-scrollbar { display: none; }
    .of-list { padding: 14px 14px 12px; }
    .of-foot { padding: 12px 14px 14px; }
    .of-card > .of-wsw { margin: 0 14px 14px; }   /* (Wi-Fi) */
    .of-sheet { place-items: end stretch; padding: 0; }
    .of-sheet-in { width: 100%; max-height: 92svh; border-radius: 22px 22px 0 0; padding: 18px 16px 16px; }
    .of-fopts { grid-template-columns: minmax(0, 1fr); }
    .of-fopt { min-height: 0; }
    .of-zopts { grid-template-columns: minmax(0, 1fr); }
    .of-sf { position: sticky; bottom: -16px; z-index: 2; margin: 12px -16px -16px; padding: 14px 16px 16px; background: linear-gradient(180deg, rgba(8, 20, 49, 0), #081431 26%); }
    .of-sf { flex-wrap: nowrap; }
    .of-sf .of-btn { flex: 1 1 auto; min-width: 0; }
    .of-sf .of-btn-2 { flex: 0 0 auto; padding: 0 16px; }
    .of-sf .of-btn > span { overflow: hidden; text-overflow: ellipsis; }
    .of .of-feed { left: 14px; right: 14px; translate: none; bottom: 56px; align-items: stretch; }
    .of .of-feed .l15-toast:nth-child(n+2) { display: none; }
    .of-open3d { left: 14px; right: 14px; translate: none; justify-content: center; }
  }
  @media (max-width: 380px) {
    .of-chip { padding: 0 12px 0 10px; font-size: 12.5px; }
    .of-tabs [role="tab"] small { display: none; }
    .of-total small { display: none; }
  }
  @media (pointer: coarse) { .of-room { min-height: 36px; } .of-zh { min-height: 44px; } .of-row { min-height: 44px; } .of-back { min-height: 44px; } .of-switch { width: 56px; height: 34px; } .of-pctl .of-ib, .of-ctl .of-ib { width: 44px; height: 44px; } }
  #ofSec.is-paused .l15-lead path, #ofSec.is-paused .l15-live::after, #ofSec.is-paused .of-loading span { animation-play-state: paused; }
  @media (prefers-reduced-motion: reduce) {
    #ofSec, #ofSec *, #ofSec *::before, #ofSec *::after { animation: none !important; transition: none !important; }
  }
  @media (forced-colors: active) { .of-btn, .of-ib, .of-chip, .of-tabs [role="tab"], .of-fopt, .of-zopt, .of-room, .of-row, .of-zh { border: 1px solid ButtonText; } }
  /* (fix-r1, the 602 review) side by side the room chips wrap to two rows at 1280-1365: the 3D button stands above them; Reset view only
     where it does something (not on a still); one Tab stop to skip the long lists; a phone's sheet stacks Cancel above a full-width Check
     in and the check-in button takes two lines (never cut); touch targets >= 44 px */
  .of[data-layout="twin"] .of-stage:has(.of-rooms:not([hidden]) .of-room) .of-open3d { bottom: 96px; }
  .of[data-mode="still"] .of-pctl { display: none; }
  .of-dock { position: relative; }
  /* the skip button: in place (inside the card, 44 px) but unseen and not clickable until it has the keyboard focus */
  .of-skip { position: absolute; left: 16px; top: 8px; z-index: 6; min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--sky); background: #081431; color: #fff; font: 700 13px/1.2 Inter, sans-serif; cursor: pointer; opacity: 0; pointer-events: none; }
  .of-skip:focus { opacity: 1; pointer-events: auto; outline: 2px solid var(--sky); outline-offset: 2px; }
  .of-foot:focus { outline: none; }
  .of-foot:focus-visible { outline: 2px solid var(--sky); outline-offset: -2px; }
  .of-sheet.is-side { place-items: center start; }   /* side by side: the zone step over the other office (ofSheetSide sets --of-sx) */
  .of-sheet.is-side .of-sheet-in { margin-left: calc(var(--of-sx, 16px) - 16px); }
  @media (max-width: 360px) { .of-ph h3 { gap: 8px; } .of-ph-num { font-size: 24px; } }   /* the pane title clear of Reset view at 320 */
  @media (max-width: 640px) {
    .of-sf { flex-direction: column; flex-wrap: nowrap; }
    .of-sf .of-btn, .of-sf .of-btn-2 { flex: 0 0 auto; width: 100%; padding: 0 16px; }
    .of-sf .of-btn > span { overflow: visible; text-overflow: clip; white-space: normal; text-align: center; }
    .of-cta > .of-btn { white-space: normal; height: auto; padding-top: 8px; padding-bottom: 8px; }
    .of-cta .of-bt span, .of-cta .of-bt small { overflow: visible; text-overflow: clip; white-space: normal; }
  }
  @media (max-width: 360px) {
    .hero-step { gap: 8px; padding: 0 13px 0 12px; font-size: 14px; white-space: nowrap; }
    .hero-step svg { display: none; }
    .hero-step-k { padding: 2px 6px; font-size: 11px; }
  }
  @media (pointer: coarse) {
    .of-switch { width: 66px; height: 44px; }
    .of-switch::after { top: 4px; left: 4px; width: 34px; height: 34px; }
    .of-switch[aria-checked="true"]::after { transform: translateX(22px); }
    .of-menu button { min-height: 44px; }
    .of-ins button.of-cell { min-width: 44px; min-height: 44px; }   /* over the base rule further down */
  }
  .of-ins th { color: #475569; }   /* (fix-r1 U6) the table heads >= 4.5:1 on white */
  /* the Hero button: Step inside our offices + the small "1504 & 602" */
  .hero-step-k { padding: 2px 7px; border-radius: 99px; background: rgba(41, 196, 244, .16); color: #d4f3ff; font: 700 11.5px/1.2 Inter, sans-serif; letter-spacing: .02em; white-space: nowrap; }
  /* CMS > Insights: our offices per day (light surface) */
  .of-ins { margin: 4px 0 24px; }
  .of-ins .of-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
  .of-ins .of-kpi { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line, #E2E8F0); background: #fff; }
  .of-ins .of-kpi dt { font: 600 12px/1.3 Inter, sans-serif; color: #475569; }
  .of-ins .of-kpi dd { margin: 4px 0 0; font: 800 22px/1.1 'Plus Jakarta Sans', Inter, sans-serif; color: #0F172A; }
  .of-ins .of-kpi dd small { margin-left: 4px; font: 600 12px/1.2 Inter, sans-serif; color: #475569; }
  .of-ins .of-week { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
  .of-ins figure { margin: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line, #E2E8F0); background: #fff; }
  .of-ins figcaption { font: 700 13px/1.3 Inter, sans-serif; color: #0F172A; }
  .of-ins .of-bars { display: flex; align-items: flex-end; justify-content: space-around; gap: 8px; height: 132px; margin-top: 6px; }
  .of-ins .of-bars > div { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1 1 0; }
  .of-ins .of-bars b { font: 700 12px/1 Inter, sans-serif; color: #0F172A; }
  .of-ins .of-bars i { display: block; width: min(44px, 80%); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #1A51A4, #0077C8); }
  .of-ins .of-bars span { font: 600 12px/1 Inter, sans-serif; color: #475569; }
  .of-ins .of-tbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
  .of-ins .of-scroll { overflow-x: auto; }
  .of-ins .of-daily { min-width: 760px; }
  .of-ins .of-daily.of-freq { min-width: 540px; }   /* (fix-r1) Frequent visitors: 5 columns; on a phone the name and the days fit without scrolling */
  .of-ins .of-freq td:first-child { max-width: 150px; overflow-wrap: anywhere; }
  .of-ins .of-daily td:not(:first-child), .of-ins .of-daily th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
  .of-ins .of-daily .of-lt3 { color: #475569; }
  .of-ins .of-cell { min-width: 32px; min-height: 28px; padding: 2px 6px; border: 0; border-radius: 6px; background: none; color: #0E5A9C; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
  .of-ins .of-cell:hover, .of-ins .of-cell:focus-visible { background: #E0F2FE; outline: 2px solid #0077C8; outline-offset: 0; }
  .of-ins .of-log { margin: 12px 0; padding: 12px 14px; border-radius: 12px; border: 1px solid #93C5FD; background: #F8FBFF; }
  .of-ins .of-log h4 { margin: 0; font: 700 14px/1.3 Inter, sans-serif; color: #0F172A; outline: none; }
  .of-ins .of-log-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
  .of-ins .of-note2 { margin: 6px 0 0; font: 500 12.5px/1.45 Inter, sans-serif; color: #475569; }
  .of-ins .of-tabs2 { display: flex; gap: 6px; margin: 12px 0 4px; }
  .of-ins .of-tabs2 button[aria-pressed="true"] { background: #0F172A; color: #fff; border-color: #0F172A; }
  @media (max-width: 760px) { .of-ins .of-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .of-ins .of-week { grid-template-columns: minmax(0, 1fr); } }

  /* @@PLAY-BEGIN@@ */
  /* ---------- (APJC Play) the hub (#playView), the entry points, the game dialog (#plDlg), the result sheet, CMS > Play.
     Dark band = the Hero / 1504 stack (#081431 / #071229); light sections = Newsroom / Pulse. Each game has one accent (--gc);
     amber is for tickets only. Every control is at least 44 px on a touch screen, focus = the 2 px sky ring. ---------- */
  :root { --pl-ticket: #F59E0B; --pl-ticket-soft: #FDE68A; --pl-season: #8B5CF6; }
  /* entry points */
  .play-chip { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding: 6px 12px; min-height: 32px; border-radius: 999px; border: 1px solid rgba(251,191,36,.35); background: rgba(251,191,36,.12);
    color: #FDE68A; font: 700 12px/1.2 Inter, sans-serif; white-space: nowrap; cursor: pointer; flex: none; max-width: 100%; }
  .play-chip span { overflow: hidden; text-overflow: ellipsis; }
  .play-chip svg { width: 14px; height: 14px; }
  .play-chip:hover { background: rgba(251,191,36,.2); color: #fff; }
  .play-chip:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
  .l15-playchip { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 8px 14px; min-height: 40px; border-radius: 999px; border: 1px solid rgba(167,139,250,.55); background: rgba(91,33,182,.35);
    color: #EDE9FE; font: 700 13px/1.2 'Plus Jakarta Sans', Inter, sans-serif; cursor: pointer; pointer-events: auto; backdrop-filter: blur(6px); }
  .l15-playchip svg { width: 16px; height: 16px; color: #C4B5FD; }
  .l15-playchip:hover { background: rgba(109,40,217,.5); }
  .l15-playchip[data-state="done"] { border-color: rgba(45,212,191,.5); background: rgba(13,148,136,.3); color: #CCFBF1; }
  .l15-playchip[data-state="done"] svg { color: #5EEAD4; }
  .today-inner.has-play { grid-template-columns: 1.1fr 1.25fr 1.15fr 1.25fr; }
  .today-inner.has-play .td-play { grid-column: 1 / -1; }
  @media (min-width: 761px) {
    .today-inner.has-play .td-play { padding: 8px 14px; }
    .today-inner.has-play .td-play > div { display: flex; align-items: baseline; gap: 6px 16px; min-width: 0; flex-wrap: wrap; }
    .today-inner.has-play .td-play .td-v { margin: 0; }
    .today-inner.has-play .td-play .td-ico { width: 32px; height: 32px; }
  }
  .td-play { position: relative; border-color: rgba(167,139,250,.3); background: linear-gradient(160deg, rgba(167,139,250,.12), rgba(255,255,255,.03)); }
  .td-play .td-ico { background: rgba(167,139,250,.18); color: #C4B5FD; }
  .td-play:hover { border-color: rgba(167,139,250,.6); }
  .td-play-go { position: absolute; inset: 0; width: 100%; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
  .td-play-go:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
  .td-pds { display: inline-flex; gap: 4px; margin-left: 4px; }
  .td-pd { width: 8px; height: 8px; border-radius: 99px; border: 1.5px solid color-mix(in srgb, var(--gc) 70%, transparent); }
  .td-pd[data-state="done"] { background: var(--gc); }
  .td-pd[data-state="soon"], .td-pd[data-state="closed"] { opacity: .35; }
  .td-pd[data-state="rest"] { border-style: dashed; }
  #pulsePlayLink { display: inline-flex; align-items: center; gap: 6px; margin-right: 12px; font: 700 14px/1.2 Inter, sans-serif; color: var(--blue); text-decoration: none; padding: 10px 4px; }
  #pulsePlayLink:hover { text-decoration: underline; }
  .pulse-acts { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }

  /* the hub: dark band */
  #playView { background: var(--mist); }
  .pl-band { position: relative; overflow: hidden; color: #fff; background: radial-gradient(900px 480px at 85% 10%, rgba(0,168,232,.22), transparent 60%), radial-gradient(640px 420px at 0% 100%, rgba(30,66,138,.5), transparent 60%), linear-gradient(180deg, #050B1A 0%, #081431 70%, #071229 100%); }
  .pl-band::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .35; background-image: linear-gradient(rgba(41,196,244,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(41,196,244,.08) 1px, transparent 1px); background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse at 70% 20%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse at 70% 20%, #000 10%, transparent 70%); }
  .pl-inner { position: relative; max-width: 1360px; margin: 0 auto; padding: 22px 24px 34px; }
  .pl-crumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; font: 600 12.5px/1 Inter, sans-serif; color: rgba(255,255,255,.6); }
  .pl-crumb > button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; border: 0; background: none; color: rgba(255,255,255,.75); cursor: pointer; padding: 0; font: inherit; }
  .pl-crumb > button:hover { color: #fff; }
  .pl-crumb svg { width: 14px; height: 14px; }
  .pl-crumb [aria-current] { color: #fff; font-weight: 700; }
  .pl-crumb-r { margin-left: auto; display: flex; gap: 8px; }
  .pl-dark-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; font: 600 13px/1.2 Inter, sans-serif; cursor: pointer; white-space: nowrap; }
  .pl-dark-btn:hover { background: rgba(255,255,255,.12); }
  .pl-dark-btn svg { width: 15px; height: 15px; }
  .pl-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 36px; align-items: center; }
  .pl-eyebrow { margin: 0 0 12px; font: 700 12px/1 Inter, sans-serif; letter-spacing: .22em; color: var(--sky); }
  .pl-title { margin: 0; font-size: clamp(30px, 3.4vw, 50px); line-height: 1.08; font-weight: 800; letter-spacing: -.03em; outline: none; }
  .pl-title .text-grad { display: block; }
  .pl-lead { max-width: 560px; margin: 16px 0 22px; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.78); }
  .pl-hello { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; padding: 6px 18px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); }
  .pl-hello-av { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 99px; background: var(--grad); font: 700 15px/1 'Plus Jakarta Sans', sans-serif; overflow: hidden; flex: none; }
  .pl-hello-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .pl-hello-t { display: grid; gap: 3px; min-width: 0; }
  .pl-hello-t b { font: 700 15px/1.25 'Plus Jakarta Sans', 'IBM Plex Sans Thai', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pl-hello-t small { font: 500 12.5px/1.25 Inter, 'IBM Plex Sans Thai', sans-serif; color: rgba(255,255,255,.68); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* wallet (one design: lg in the hub, sm in the dialog) */
  .pl-wallet-wrap { justify-self: end; width: 100%; max-width: 520px; }
  .pl-wallet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; color: #fff; font-family: Inter, 'IBM Plex Sans Thai', sans-serif; }
  .pl-w-lg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pl-w { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: inherit; text-align: left; font: inherit; }
  .pl-w-lg .pl-w { padding: 14px 16px; border-radius: 16px; }
  button.pl-w { cursor: pointer; }
  button.pl-w:hover { background: rgba(255,255,255,.1); }
  .pl-wk { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(214,230,255,.78); }
  .pl-wk svg { width: 13px; height: 13px; }
  .pl-w-tix .pl-wk svg { color: var(--pl-ticket-soft); }
  .pl-w-streak .pl-wk svg { color: #FDBA74; }
  .pl-wv { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
  .pl-wv b { font: 800 22px/1.1 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: -.01em; }
  .pl-w-lg .pl-wv b { font-size: 30px; }
  .pl-w-sm .pl-wv b { font-size: 17px; }
  .pl-w-sm .pl-wk { font-size: 10px; }
  .pl-w-sm .pl-w { padding: 7px 10px; border-radius: 12px; }
  .pl-w-sm .pl-wk { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pl-w-sm .pl-wv small { display: none; }
  .pl-w-sm .pl-w-today .pl-wv small { display: inline; }
  .pl-wv small { font-size: 12px; color: rgba(214,230,255,.8); font-weight: 600; }
  .pl-wnote { font-size: 11.5px; line-height: 1.35; color: rgba(214,230,255,.72); }
  .pl-bar { position: relative; display: block; height: 6px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; margin-top: 3px; }
  .pl-bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: linear-gradient(90deg, var(--sky), var(--teal)); transition: width .6s cubic-bezier(.2,.8,.2,1); }
  .pl-bar.pl-amber > i { background: linear-gradient(90deg, #FBBF24, var(--pl-ticket)); }
  .pl-bar.light { background: #E5ECF5; }
  .pl-bar.light > i { background: var(--grad); }
  .pl-week { list-style: none; display: flex; gap: 6px; justify-content: flex-end; margin: 10px 0 0; padding: 0; }
  .pl-wd { display: grid; justify-items: center; gap: 3px; font: 700 10px/1 Inter, sans-serif; color: rgba(255,255,255,.55); }
  .pl-wd > i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 7px; border: 1.5px solid rgba(255,255,255,.22); font-style: normal; }
  .pl-wd > i svg { width: 12px; height: 12px; stroke-width: 3; }
  .pl-wd small { font-size: 10px; font-weight: 600; }
  .pl-wd[data-st="play"] > i { background: var(--teal); border-color: var(--teal); color: #052e2b; }
  .pl-wd[data-st="today"] { color: var(--sky); } .pl-wd[data-st="today"] > i { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(41,196,244,.25); }
  .pl-wd[data-st="rest"] > i { border-style: dashed; }
  .pl-wd[data-st="shield"] > i { border-color: #A78BFA; }
  .pl-wd[data-st="miss"] > i { border-color: rgba(248,113,113,.6); }
  .pl-wd[data-st="future"] > i, .pl-wd[data-st="pre"] > i { opacity: .35; }
  /* the one-time notice */
  /* (admin preview) the note first in the hub head: an admin before the launch, these points reset then */
  .pl-preview { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.45); color: #FEF3C7; font: 600 13.5px/1.45 Inter, sans-serif; }
  .pl-preview svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: #FDE68A; }
  .td-pd-tag { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 99px; background: rgba(251,191,36,.16); border: 1px solid rgba(251,191,36,.5); color: #FDE68A; font: 700 10.5px/1.45 Inter, sans-serif; letter-spacing: .02em; vertical-align: 1px; }
  .pl-notice { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 22px; padding: 14px 16px; border-radius: 16px; background: rgba(41,196,244,.1); border: 1px solid rgba(41,196,244,.35); }
  .pl-notice p { flex: 1 1 280px; margin: 0; font-size: 14.5px; line-height: 1.45; }
  .pl-notice-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(41,196,244,.18); color: var(--sky); flex: none; }
  .pl-notice-acts { display: flex; gap: 8px; flex-wrap: wrap; }
  /* games */
  .pl-games-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 30px 0 14px; }
  .pl-games-head h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
  .pl-games-head h2 small { margin-left: 10px; font: 600 13px/1.3 Inter, sans-serif; color: rgba(255,255,255,.6); letter-spacing: 0; }
  .pl-games-act { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .pl-clock { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); font: 600 12.5px/1 Inter, sans-serif; color: rgba(255,255,255,.78); }
  .pl-clock b { font-variant-numeric: tabular-nums; color: #fff; }
  .pl-clock svg { width: 15px; height: 15px; color: var(--sky); }
  .pl-games { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .pl-tile-sk { height: 240px; opacity: .12; }
  .pl-tile { --gc: var(--sky); position: relative; display: flex; flex-direction: column; min-width: 0; padding: 16px 18px; border-radius: 20px; text-align: left; cursor: pointer; overflow: hidden; color: #fff; font: inherit;
    background: linear-gradient(165deg, color-mix(in srgb, var(--gc) 14%, rgba(255,255,255,.03)), rgba(255,255,255,.02) 60%); border: 1px solid color-mix(in srgb, var(--gc) 30%, transparent); transition: transform .18s ease, border-color .18s ease, background .18s; }
  .pl-tile:hover, .pl-tile:focus-visible { transform: translateY(-2px); border-color: color-mix(in srgb, var(--gc) 70%, transparent); background: linear-gradient(165deg, color-mix(in srgb, var(--gc) 22%, rgba(255,255,255,.04)), rgba(255,255,255,.03) 60%); }
  .pl-tile:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
  .pl-t-art { position: relative; display: block; height: 92px; margin: -4px -6px 10px; }
  .pl-t-art svg { display: block; width: 100%; height: 100%; }
  .pl-t-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .pl-t-short { font: 800 11.5px/1 'Plus Jakarta Sans', sans-serif; letter-spacing: .16em; color: var(--gc); }
  .pl-t-state { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; font: 700 11.5px/1.2 Inter, sans-serif; background: rgba(255,255,255,.08); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .pl-t-state::before { content: ''; width: 7px; height: 7px; border-radius: 99px; background: var(--gc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gc) 25%, transparent); flex: none; }
  .pl-t-state svg { width: 13px; height: 13px; }
  .pl-tile[data-state="done"] .pl-t-state { background: rgba(45,212,191,.2); color: #99F6E4; }
  .pl-tile[data-state="done"] .pl-t-state::before, .pl-tile[data-state="soon"] .pl-t-state::before, .pl-tile[data-state="closed"] .pl-t-state::before { display: none; }
  .pl-tile[data-state="soon"], .pl-tile[data-state="closed"] { cursor: default; }
  .pl-tile[data-state="soon"]:hover, .pl-tile[data-state="closed"]:hover { transform: none; }
  .pl-tile[data-state="soon"] .pl-t-state, .pl-tile[data-state="closed"] .pl-t-state { background: rgba(255,255,255,.07); color: rgba(255,255,255,.78); }
  .pl-tile[data-state="soon"] .pl-t-art, .pl-tile[data-state="closed"] .pl-t-art { opacity: .5; filter: saturate(.4); }
  .pl-tile[data-state="rest"] .pl-t-state { color: rgba(214,230,255,.85); }
  .pl-tile[data-state="done"] .pl-t-art { opacity: .55; filter: saturate(.6); }
  .pl-t-mark { position: absolute; right: 16px; top: 16px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 99px; background: var(--teal); color: #052e2b; box-shadow: 0 6px 18px rgba(45,212,191,.35); }
  .pl-t-mark svg { width: 18px; height: 18px; stroke-width: 3; }
  .pl-t-name { display: block; margin: 10px 0 4px; font: 800 17px/1.3 'Plus Jakarta Sans', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pl-t-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; margin: 0; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.72); }
  .pl-t-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); font: 600 12px/1 Inter, sans-serif; color: rgba(255,255,255,.65); }
  .pl-t-foot > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
  .pl-t-foot svg { width: 14px; height: 14px; }
  .pl-t-cta { color: color-mix(in srgb, var(--gc) 75%, #fff); }
  .pl-alldone { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: rgba(45,212,191,.08); border: 1px solid rgba(45,212,191,.3); }
  .pl-alldone > div { flex: 1 1 240px; min-width: 0; }
  .pl-ad-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(45,212,191,.18); color: #5EEAD4; flex: none; }
  .pl-alldone b { display: block; font: 700 15px/1.3 'Plus Jakarta Sans', sans-serif; }
  .pl-alldone small { color: rgba(255,255,255,.7); font-size: 13px; }
  .pl-dayshare { margin-top: 10px; }
  /* light sections */
  .pl-sec { padding: 40px 0; background: #fff; border-top: 1px solid var(--line); }
  .pl-sec.mist { background: var(--mist); }
  .pl-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
  .pl-sec-head .section-title { outline: none; }
  .pl-theme { color: var(--muted); font-weight: 700; font-size: .6em; }
  .pl-two { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 22px; align-items: start; }
  .pl-card { position: relative; padding: 20px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); min-width: 0; }
  .pl-card + .pl-card { margin-top: 18px; }
  .pl-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
  .pl-card-head h2, .pl-card-head h3 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; display: flex; align-items: center; gap: 9px; outline: none; }
  .pl-card-head h2 svg, .pl-card-head h3 svg { color: var(--cyan); }
  .pl-card-head h3 small { font: 600 13px/1 Inter, sans-serif; color: var(--muted); }
  .pl-k { margin: 0; font: 700 11px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .pl-muted { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
  .pl-pill, .pl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--grad-soft); color: var(--blue); font: 700 12px/1.2 Inter, sans-serif; white-space: nowrap; }
  .pl-pill svg, .pl-chip svg { width: 13px; height: 13px; }
  .pl-pill.ok, .pl-chip.ok { background: var(--ok-bg); color: #166534; }
  .pl-pill.warn, .pl-chip.warn { background: var(--warn-bg); color: #92400E; }
  .pl-pill.grey, .pl-chip.grey { background: #EEF2F7; color: var(--muted); }
  .pl-chip.ai { background: #EDE9FE; color: #5B21B6; }
  .pl-card .btn-xs, .pl-sec .btn-xs { min-height: 34px; }
  /* missions + earn */
  .pl-m-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .pl-m { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: #FBFCFE; }
  .pl-m-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: #EEF6FF; color: var(--blue); }
  .pl-m b { display: block; font: 700 14.5px/1.3 Inter, 'IBM Plex Sans Thai', sans-serif; }
  .pl-m small { display: block; margin: 3px 0 7px; font-size: 12.5px; color: var(--muted); }
  .pl-m.done { background: #F0FDF9; border-color: #A7F3D0; }
  .pl-m.done .pl-m-ico { background: var(--teal); color: #052e2b; }
  .pl-m-foot { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--grad-soft); font-size: 13.5px; }
  .pl-m-foot b { color: var(--blue); }
  .pl-m-segs { display: flex; gap: 4px; flex: none; }
  .pl-m-segs i { width: 26px; height: 8px; border-radius: 99px; background: #D6E2F0; }
  .pl-m-segs i.on { background: var(--grad); }
  .pl-earn { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 14px; }
  .pl-earn-i { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px dashed var(--line); min-width: 0; }
  .pl-earn-i > svg { color: var(--blue); }
  .pl-earn-l { min-width: 0; display: block; border: 0; background: none; padding: 0; text-align: left; color: inherit; font: inherit; }
  button.pl-earn-l { cursor: pointer; min-height: 36px; }
  button.pl-earn-l:hover b { color: var(--blue); text-decoration: underline; }
  .pl-earn-l b { display: block; font: 600 13px/1.3 Inter, sans-serif; overflow-wrap: anywhere; }   /* wraps (a two-column card at 1024 cut "Read a new Newsroom story") */
  .pl-earn-l small { font-size: 11.5px; color: var(--muted); }
  .pl-earn-n { display: inline-flex; align-items: center; gap: 3px; font: 700 12px/1 Inter, sans-serif; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .pl-earn-n svg { width: 13px; height: 13px; }
  .pl-earn-i.full .pl-earn-n { color: #0F766E; }
  /* board */
  .pl-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--mist); border: 1px solid var(--line); }
  .pl-seg button { min-height: 32px; border: 0; padding: 7px 13px; border-radius: 999px; background: transparent; font: 700 12.5px/1 Inter, sans-serif; color: var(--muted); cursor: pointer; white-space: nowrap; }
  .pl-seg button[aria-selected="true"] { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(11,27,51,.12); }
  .pl-board { list-style: none; margin: 0; padding: 0; }
  .pl-row { display: grid; grid-template-columns: 34px 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; }
  .pl-row + .pl-row { margin-top: 2px; }
  .pl-row:nth-child(odd) { background: #FAFBFD; }
  .pl-row[data-me] { background: linear-gradient(90deg, rgba(0,168,232,.12), rgba(45,212,191,.08)); box-shadow: inset 0 0 0 1.5px rgba(0,168,232,.45); }
  .pl-rank { font: 800 15px/1 'Plus Jakarta Sans', sans-serif; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
  .pl-rank.m1, .pl-rank.m2, .pl-rank.m3 { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 99px; color: #fff; font-size: 13px; }
  .pl-rank.m1 { background: linear-gradient(160deg, #F59E0B, #B45309); } .pl-rank.m2 { background: linear-gradient(160deg, #94A3B8, #475569); } .pl-rank.m3 { background: linear-gradient(160deg, #F97316, #9A3412); }
  .pl-av { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 99px; background: var(--ac, var(--blue)); color: #fff; font: 700 12.5px/1 'Plus Jakarta Sans', sans-serif; overflow: hidden; flex: none; }
  .pl-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .pl-av.hid { background: #64748B; }
  .pl-name { min-width: 0; }
  .pl-name b { display: block; font: 700 14px/1.25 Inter, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pl-name small { display: block; font-size: 12px; color: var(--muted); }
  .pl-row[data-hidden]:not([data-me]) .pl-name b { color: var(--muted); font-style: italic; }
  .pl-pts { font: 800 15px/1 'Plus Jakarta Sans', sans-serif; font-variant-numeric: tabular-nums; min-width: 48px; text-align: right; }
  .pl-gap { text-align: center; color: var(--soft); font-size: 13px; letter-spacing: .3em; padding: 2px 0; }
  .pl-board-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
  .pl-empty { padding: 26px 16px; text-align: center; color: var(--muted); font-size: 14px; border: 1px dashed var(--line-2); border-radius: 16px; }
  .pl-empty b { display: block; color: var(--text); font: 700 15px/1.4 'Plus Jakarta Sans', sans-serif; margin-bottom: 4px; }
  .pl-switch { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; font: 600 13px/1 Inter, sans-serif; color: var(--text); }
  .pl-switch input { position: absolute; opacity: 0; width: 34px; height: 20px; margin: 0; cursor: pointer; }
  .pl-tg { position: relative; width: 34px; height: 20px; border-radius: 99px; background: #94A3B8; transition: background .15s; flex: none; }
  .pl-tg::after { content: ''; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 99px; background: #fff; transition: transform .15s; }
  .pl-switch input:checked + .pl-tg { background: var(--blue); }
  .pl-switch input:checked + .pl-tg::after { transform: translateX(14px); }
  .pl-switch input:focus-visible + .pl-tg { outline: 2px solid var(--sky); outline-offset: 2px; }
  .pl-switch input:disabled + .pl-tg { opacity: .5; }
  /* draw */
  .pl-pocket { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
  .pl-stub { display: grid; place-items: center; width: 64px; height: 44px; border-radius: 10px; background: linear-gradient(135deg, #FBBF24, #F59E0B); color: #422006; font: 800 18px/1 'Plus Jakarta Sans', sans-serif; flex: none;
    -webkit-mask: radial-gradient(circle at 0 50%, transparent 7px, #000 7.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 7px, #000 7.5px) right / 51% 100% no-repeat;
    mask: radial-gradient(circle at 0 50%, transparent 7px, #000 7.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 7px, #000 7.5px) right / 51% 100% no-repeat; }
  .pl-pocket b { display: block; font: 700 15px/1.3 'Plus Jakarta Sans', sans-serif; }
  .pl-pocket small { color: var(--muted); font-size: 12.5px; }
  .pl-draw-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
  .pl-draw-main > * + * { margin-top: 14px; }
  .pl-pz-mini { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .pl-pz-mini li { display: flex; gap: 10px; align-items: center; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line); min-width: 0; }
  .pl-pz-mini b { display: block; font: 700 14px/1.25 'Plus Jakarta Sans', sans-serif; }
  .pl-pz-mini small { color: var(--muted); font-size: 12.5px; }
  .pl-pz-ico { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #fff; background: var(--pc, #1A51A4); vertical-align: middle; }
  .cms-table .pl-pz-ico { width: 28px; height: 28px; border-radius: 8px; }
  .cms-table .pl-pz-ico svg { width: 15px; height: 15px; }
  .pl-choose { border: 1px solid var(--line); border-radius: 16px; background: #fff; }
  .pl-choose > summary { cursor: pointer; list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-height: 48px; padding: 12px 16px; font: 700 15px/1.3 'Plus Jakarta Sans', sans-serif; color: var(--navy); }
  .pl-choose > summary::-webkit-details-marker { display: none; }
  .pl-choose > summary small { font: 500 13px/1.3 Inter, sans-serif; color: var(--muted); }
  .pl-choose[open] > summary { border-bottom: 1px solid var(--line); }
  .pl-boxes { list-style: none; margin: 0; padding: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .pl-choose-n { padding: 0 16px 14px; font-size: 13px; }
  .pl-box { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding: 14px; border-radius: 18px; background: #fff; border: 1px solid var(--line); min-width: 0; }
  .pl-box-art { --pc: #1A51A4; position: relative; display: grid; place-items: center; min-height: 100px; border-radius: 14px; color: #fff; overflow: hidden; background: radial-gradient(120px 80px at 30% 20%, rgba(255,255,255,.25), transparent 70%), linear-gradient(160deg, var(--pc), color-mix(in srgb, var(--pc) 55%, #050B1A)); }
  .pl-box-art svg { width: 36px; height: 36px; stroke-width: 1.6; }
  .pl-qty { position: absolute; left: 8px; top: 8px; padding: 2px 7px; border-radius: 99px; background: rgba(5,11,26,.45); font: 800 11px/1.3 Inter, sans-serif; }
  .pl-box h3 { margin: 0; font-size: 15px; font-weight: 800; line-height: 1.3; }
  .pl-box p { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
  .pl-box-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
  .pl-stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; }
  .pl-stepper button { width: 44px; height: 40px; border: 0; background: #fff; cursor: pointer; display: grid; place-items: center; color: var(--blue); }
  .pl-stepper button:hover:not(:disabled) { background: #F0F9FF; }
  .pl-stepper button:disabled { color: var(--line-2); cursor: not-allowed; }
  .pl-stepper output { min-width: 36px; text-align: center; font: 800 15px/1 'Plus Jakarta Sans', sans-serif; font-variant-numeric: tabular-nums; }
  .pl-chance { font: 700 12.5px/1.2 Inter, sans-serif; color: #0F766E; }
  .pl-chance.zero { color: var(--muted); font-weight: 600; }
  .pl-side { padding: 18px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
  .pl-side + .pl-side { margin-top: 14px; }
  .pl-side h3 { margin: 0 0 6px; font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
  .pl-side h3 svg { color: var(--blue); }
  .pl-side p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
  .pl-side p + p { margin-top: 8px; }
  .pl-side.dark { color: #fff; background: radial-gradient(300px 200px at 100% 0%, rgba(167,139,250,.28), transparent 70%), linear-gradient(160deg, #0A1630, #14215A); border-color: rgba(167,139,250,.3); }
  .pl-side.dark h3 svg { color: #C4B5FD; }
  .pl-side.dark p { color: rgba(255,255,255,.76); }
  .pl-grand-n b { color: #fff; }
  .pl-months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 10px; }
  .pl-mo { padding: 10px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); min-width: 0; }
  .pl-mo b { display: block; font: 800 13px/1.2 'Plus Jakarta Sans', sans-serif; }
  .pl-mo small { font-size: 11.5px; color: rgba(255,255,255,.7); }
  .pl-mo .pl-bar { height: 5px; margin-top: 7px; }
  .pl-mo.done { border-color: rgba(45,212,191,.5); background: rgba(45,212,191,.1); }
  .pl-seal { display: flex; align-items: center; gap: 8px; margin: 10px 0 0 !important; padding: 8px 10px; border-radius: 10px; background: var(--mist); font: 600 12px/1.3 'IBM Plex Mono', ui-monospace, Consolas, monospace !important; color: var(--text) !important; overflow: hidden; }
  .pl-seal svg { width: 15px; height: 15px; color: var(--blue); flex: none; }
  .pl-seal span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .pl-past { padding: 20px; border-radius: 22px; background: linear-gradient(160deg, #FFFBEB, #fff 60%); border: 1px solid #FDE68A; }
  .pl-past .pl-card-head h3 svg { color: #B45309; }
  .pl-winners { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
  .pl-winner { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line); min-width: 0; }
  .pl-winner.me { box-shadow: inset 0 0 0 1.5px #F59E0B; background: #FFFBEB; }
  .pl-winner > div { min-width: 0; }
  .pl-winner b { display: block; font: 700 13.5px/1.25 Inter, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pl-winner small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pl-past-empty { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; border: 1px dashed var(--line-2); background: #fff; color: var(--muted); font-size: 14px; }
  .pl-past-empty > svg { width: 26px; height: 26px; color: #B45309; flex: none; }
  .pl-past-empty b { color: var(--text); }
  .pl-verify { margin-top: 14px; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
  .pl-vlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
  .pl-vlist li { display: flex; gap: 8px; align-items: flex-start; }
  .pl-vlist li.ok svg { color: var(--ok); } .pl-vlist li.bad svg { color: var(--bad); }
  .pl-mono { margin: 10px 0 0; font: 500 12px/1.5 'IBM Plex Mono', ui-monospace, Consolas, monospace; color: var(--muted); word-break: break-all; }
  /* badges */
  .pl-badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px; }
  .pl-badge { display: grid; justify-items: center; align-content: start; gap: 8px; padding: 14px 8px 12px; border-radius: 18px; text-align: center; background: #fff; border: 1px solid var(--line); min-width: 0; }
  .pl-hex { display: grid; place-items: center; width: 58px; height: 64px; color: #fff; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(160deg, #29C4F4, #1E428A); }
  .pl-hex svg { width: 24px; height: 24px; }
  .pl-badge[data-done="0"] .pl-hex { background: #E8EEF6; color: #64748B; }
  .pl-badge.sea .pl-hex { background: linear-gradient(160deg, #C4B5FD, #6D28D9); }
  .pl-badge.sea[data-done="0"] .pl-hex { background: #EFEAFE; color: #7C3AED; }
  .pl-badge b { font: 700 12.5px/1.25 Inter, sans-serif; }
  .pl-badge small { font-size: 11px; line-height: 1.3; color: var(--muted); }
  .pl-badge .pl-bar { width: 70%; height: 4px; }
  /* fair play */
  .pl-how { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
  .pl-how-c { padding: 20px; border-radius: 20px; background: #fff; border: 1px solid var(--line); min-width: 0; }
  .pl-how-c h3 { margin: 0 0 12px; font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 9px; }
  .pl-how-c h3 .n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 99px; background: var(--grad-ink); color: #fff; font-size: 13px; }
  .pl-ptable { width: 100%; border-collapse: collapse; font-size: 13px; }
  .pl-ptable th { text-align: left; padding: 6px; font: 700 10.5px/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
  .pl-ptable th.n, .pl-ptable td.n { text-align: right; }
  .pl-ptable td { padding: 7px 6px; border-bottom: 1px solid #EEF2F7; vertical-align: top; }
  .pl-ptable td.n { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .pl-ptable tr.grp td { padding-top: 12px; font: 800 11px/1.2 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); border-bottom: 0; }
  .pl-ptable small { display: block; color: var(--muted); font-size: 11.5px; }
  .pl-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .pl-rules li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; font-size: 13.5px; line-height: 1.45; }
  .pl-rules li svg { width: 18px; height: 18px; color: var(--cyan); margin-top: 1px; }
  .pl-keep { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
  .pl-fine { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 12px; border-radius: 12px; background: var(--mist); font-size: 13.5px; color: var(--text); }
  .pl-fine svg { color: var(--blue); flex: none; margin-top: 1px; }
  /* the game dialog: centred on wide screens, the whole screen on a phone; .is-full (Hunt) = the whole viewport, dark */
  .pl-dlg { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; background: rgba(5,11,26,.62); backdrop-filter: blur(3px); }
  .pl-dlg-box { --gc: var(--sky); position: relative; display: flex; flex-direction: column; width: min(1040px, 100%); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); border-radius: 24px; background: #fff; box-shadow: var(--shadow-lg); overflow: hidden; }
  .pl-dlg-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 18px; color: #fff; background: radial-gradient(400px 160px at 100% 0%, color-mix(in srgb, var(--gc) 35%, transparent), transparent 70%), linear-gradient(160deg, #0A1630, #0E2559); }
  .pl-dlg-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--gc) 22%, transparent); color: var(--gc); flex: none; }
  .pl-dlg-head h2 { margin: 0; font-size: 18px; font-weight: 800; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; outline: none; }
  #plDlgWallet { margin-left: auto; min-width: 0; }
  #plDlgWallet .pl-wallet { width: 420px; max-width: 100%; }
  #plDlgClose { color: #fff; flex: none; width: 44px; height: 44px; }
  #plDlgClose:hover { background: rgba(255,255,255,.12); }
  .pl-switchbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 10px 14px; background: #0A1630; border-top: 1px solid rgba(255,255,255,.08); }
  .pl-sw { --gc: var(--sky); display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 9px; align-items: center; min-height: 48px; padding: 6px 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05); color: #fff; text-align: left; font: inherit; cursor: pointer; min-width: 0; }
  .pl-sw:hover { background: rgba(255,255,255,.1); }
  .pl-sw.on { background: #fff; color: var(--text); border-color: #fff; }
  .pl-sw[aria-disabled="true"] { opacity: .6; cursor: default; }
  .pl-sw-ico { grid-row: 1 / 3; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--gc) 22%, transparent); color: var(--gc); }
  .pl-sw-ico svg { width: 16px; height: 16px; }
  .pl-sw.on .pl-sw-ico { background: color-mix(in srgb, var(--gc) 18%, #fff); color: color-mix(in srgb, var(--gc) 60%, #0B1B33); }
  .pl-sw-t { font: 700 13px/1.2 'Plus Jakarta Sans', Inter, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pl-sw-st { font-size: 11.5px; font-weight: 600; color: rgba(214,230,255,.82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pl-sw.on .pl-sw-st { color: var(--muted); }
  .pl-sw-st[data-st="done"] { color: #5EEAD4; }
  .pl-sw.on .pl-sw-st[data-st="done"] { color: #0F766E; }
  .pl-dlg-body { position: relative; flex: 1; min-height: 240px; overflow-y: auto; overscroll-behavior: contain; padding: 0; background: #fff; color: var(--text); }   /* the same white card as the games harness; Hunt (.is-full) is dark */
  .pl-dlg-body > .pl-game { min-height: 100%; }
  .pl-loading { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 280px; color: var(--muted); font: 600 14px/1.3 Inter, sans-serif; }
  .pl-resting { display: grid; justify-items: center; gap: 14px; padding: 48px 20px; text-align: center; }
  .pl-resting p { margin: 0; max-width: 420px; font: 600 16px/1.45 'Plus Jakarta Sans', 'IBM Plex Sans Thai', sans-serif; color: var(--text); }
  .pl-band .pl-resting p { color: #fff; }
  .pl-resting-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 99px; background: var(--grad-soft); color: var(--blue); }
  .pl-resting-ico svg { width: 26px; height: 26px; }
  .pl-dlg.is-full { padding: 0; background: #050B1A; }
  .pl-dlg.is-full .pl-dlg-box { width: 100%; height: 100%; max-height: none; border-radius: 0; background: #050B1A; }
  .pl-dlg.is-full .pl-switchbar { display: none; }
  .pl-dlg.is-full .pl-dlg-body { background: #050B1A; }
  .pl-dlg.is-full .pl-loading { color: rgba(255,255,255,.7); }
  .pl-dlg.is-full .spinner.dark { border-color: rgba(255,255,255,.3); border-top-color: #fff; }
  .pl-dlg.is-full .pl-resting p { color: #fff; }
  body:has(#plDlg:not([hidden])) { overflow: hidden; }
  body:has(#playView:not([hidden])) .ap-fab .ap-fab-btn { width: 62px; height: 62px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--cyan); filter: drop-shadow(0 10px 16px rgba(5,11,26,.28)); }
  body:has(#playView:not([hidden])) .ap-fab .ap-body, body:has(#playView:not([hidden])) .ap-fab .ap-say { display: none; }
  body:has(#playView:not([hidden])) .ap-fab .ap-face-mini { display: block; width: 100%; height: 100%; }
  /* the result sheet (white card, the game colour on top) */
  .pl-result { --gc: var(--blue); position: relative; margin: 18px; padding: 22px 22px 18px; border-radius: 22px; background: #fff; color: var(--text); box-shadow: 0 24px 60px -30px rgba(5,11,26,.55); border: 1px solid var(--line); border-top: 4px solid var(--gc); text-align: left; font-family: Inter, 'IBM Plex Sans Thai', sans-serif; }
  .pl-r-head { display: flex; gap: 16px; align-items: center; }
  .pl-r-burst { flex: none; display: grid; place-items: center; align-content: center; width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--gc) 30%, #fff), color-mix(in srgb, var(--gc) 12%, #fff)); color: color-mix(in srgb, var(--gc) 45%, #0B1B33); }
  .pl-r-burst b { font: 800 28px/1 'Plus Jakarta Sans', sans-serif; }
  .pl-r-burst small { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .pl-r-k { margin: 0 0 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .pl-r-title { margin: 0; font: 800 22px/1.2 'Plus Jakarta Sans', 'IBM Plex Sans Thai', sans-serif; outline: none; }
  .pl-r-sub { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
  .pl-r-lines { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--line); }
  .pl-r-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 2px; border-bottom: 1px solid var(--line); font-size: 14px; }
  .pl-r-lines li b { font-variant-numeric: tabular-nums; }
  .pl-r-lines li.zero { color: var(--muted); }
  .pl-r-lines li.neg b { color: #B91C1C; }
  .pl-r-lines li.bonus b { color: #0F766E; }
  .pl-r-lines li.tot { font-weight: 800; border-bottom: 0; }
  .pl-r-wallet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
  .pl-r-wallet > div { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 14px; background: var(--mist); border: 1px solid var(--line); min-width: 0; }
  .pl-r-wallet .pl-wk { color: var(--muted); }
  .pl-r-wallet b { font: 800 20px/1.1 'Plus Jakarta Sans', sans-serif; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
  .pl-r-wallet b small { font: 600 12px Inter, sans-serif; color: var(--muted); }
  .pl-r-wallet > div > small { font-size: 12px; color: var(--muted); }
  .pl-r-wallet .pl-bar { background: #E2E8F1; }
  .pl-r-wallet .tix .pl-wk svg { color: #B45309; }
  .pl-r-wallet .tix.new { background: #FFFBEB; border-color: #FCD34D; }
  .pl-r-wallet .tix em { font: 700 11.5px Inter, sans-serif; font-style: normal; color: #92400E; background: #FDE68A; border-radius: 99px; padding: 2px 8px; }
  .pl-r-draw { display: flex; gap: 6px; align-items: center; margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
  .pl-r-draw svg { color: #B45309; flex: none; width: 15px; height: 15px; }
  .pl-r-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .pl-r-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: #F5F3FF; color: #5B21B6; font-size: 13px; }
  .pl-r-badge svg { width: 15px; height: 15px; }
  .pl-r-note { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: #F1F6FD; color: #1E3A6E; font-size: 13px; }
  .pl-r-note svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
  .pl-r-cap { background: #FFFBEB; color: #78350F; }
  .pl-r-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  .pl-r-acts > button { min-height: 44px; }
  .pl-r-acts svg { width: 16px; height: 16px; }
  .pl-r-sharebox { display: grid; gap: 8px; margin-top: 12px; }
  .pl-share-card { display: grid; gap: 4px; padding: 16px; border-radius: 16px; color: #fff; background: radial-gradient(120% 140% at 0 0, #1A51A4 0%, #0E1F45 55%, #050B1A 100%); }
  .pl-share-k { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sky); }
  .pl-share-card b { font: 800 18px 'Plus Jakarta Sans', sans-serif; }
  .pl-share-card small { color: rgba(214,230,255,.75); }
  .pl-share-txt { width: 100%; min-height: 80px; resize: vertical; border: 1px solid var(--line-2); border-radius: 12px; padding: 10px; font: 13px/1.45 Inter, 'IBM Plex Sans Thai', sans-serif; color: var(--text); background: #fff; }
  .pl-r-sharebox > button { justify-self: start; min-height: 44px; }
  .pl-r-fine { display: flex; gap: 6px; align-items: flex-start; margin: 12px 0 0; font-size: 12px; color: var(--muted); }
  .pl-r-fine svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }
  /* CMS > Play */
  .pl-subs, .pl-chips { display: flex; gap: 6px; padding: 12px 0 14px; overflow-x: auto; scrollbar-width: thin; }
  @media (min-width: 761px) { .pl-subs { flex-wrap: wrap; overflow-x: visible; } }   /* all eight sub-tabs in sight on a desktop (one row scrolls on a phone) */
  .pl-subtab { display: inline-flex; align-items: center; gap: 7px; flex: none; min-height: 38px; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--text); font: 600 13px/1 Inter, sans-serif; cursor: pointer; white-space: nowrap; }
  .pl-subtab svg { width: 15px; height: 15px; }
  .pl-subtab[aria-selected="true"] { background: var(--night); border-color: var(--night); color: #fff; }
  .pl-cms { min-width: 0; }
  .pl-cms .tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 18px; background: #fff; }
  .pl-cms .cms-table th { color: var(--muted); }
  .pl-cms .cms-table th[scope="row"] { text-transform: none; letter-spacing: 0; font: 600 13.5px/1.3 Inter, sans-serif; color: var(--text); }
  .pl-cms .cms-table th small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
  .pl-cms-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 4px 0 12px; }
  .pl-cms-bar h3 { margin: 0; font-size: 17px; font-weight: 800; }
  .pl-cms-bar p { margin: 4px 0 0; max-width: 680px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
  .pl-cms-acts, .pl-ai { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .pl-ai .cms-input { width: auto; }
  .pl-ai-day { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 600 13px/1 Inter, sans-serif; }
  .pl-ai-day .cms-input { width: auto; }
  /* (admin preview) CMS > Play > Schedule: the teaser day + who sees Play now */
  .pl-teaser { display: grid; gap: 10px; margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--mist); }
  .pl-teaser-f { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
  .pl-teaser-f label { font: 600 13.5px/1.35 Inter, sans-serif; color: var(--text); }
  .pl-teaser-in { display: inline-flex; align-items: center; gap: 8px; }
  .pl-teaser-in .cms-input { width: 170px; }
  .pl-teaser-f small { flex-basis: 100%; font-size: 12px; }
  .pl-teaser-st { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text); }
  .pl-teaser-st svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--blue); }
  .pl-sched td { vertical-align: middle; }
  .pl-sched .cms-input { width: 170px; }
  .pl-mlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pl-noend { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; font: 600 12.5px/1 Inter, sans-serif; white-space: nowrap; }
  .pl-st { font: 600 13px/1.3 Inter, sans-serif; }
  .pl-st[data-st="open"] { color: #166534; } .pl-st[data-st="soon"] { color: var(--blue); } .pl-st[data-st="closed"] { color: var(--muted); }
  .pl-alerts { list-style: none; margin: 0 0 18px; padding: 12px 14px; border-radius: 14px; background: var(--warn-bg); color: #78350F; display: grid; gap: 6px; font-size: 13px; }
  .pl-alerts li { display: flex; gap: 8px; align-items: flex-start; }
  .pl-alerts svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
  .pl-cal td, .pl-cal th { white-space: nowrap; }
  .pl-pin-cell { white-space: normal !important; min-width: 130px; }
  .pl-pin-row td { background: #F8FBFF; white-space: normal !important; }
  .pl-pin { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
  .pl-pin > b { flex: 1 1 100%; font: 700 13.5px/1.3 Inter, sans-serif; }
  .pl-pin-sels { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 10px; flex: 1 1 520px; }
  .pl-pin-l { display: grid; gap: 4px; font: 600 12px/1.2 Inter, sans-serif; color: var(--muted); }
  .pl-pin .cms-input { width: 100%; min-height: 40px; padding: 6px 8px; font-size: 13px; }
  .pl-pin-acts { display: flex; flex-wrap: wrap; gap: 6px; }
  @media (max-width: 760px) { .pl-pin-sels { grid-template-columns: minmax(0, 1fr); } }
  .pl-fairnote { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: #F5F3FF; border: 1px solid #DDD6FE; font-size: 13px; line-height: 1.45; color: var(--text); }
  .pl-fairnote svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: #6D28D9; }
  .pl-sc { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 10px; border-radius: 999px; border: 0; cursor: pointer; font: 700 12px/1.2 Inter, sans-serif; background: #EEF2F7; color: var(--muted); }
  .pl-sc svg { width: 14px; height: 14px; }
  .pl-sc[data-st="ready"] { background: var(--ok-bg); color: #166534; } .pl-sc[data-st="review"] { background: var(--warn-bg); color: #92400E; } .pl-sc[data-st="gap"] { background: var(--bad-bg); color: #991B1B; }
  .pl-sc[data-st="soon"] { background: #E0F2FE; color: #075985; }
  .pl-clist { list-style: none; margin: 0 0 18px; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: #fff; max-height: 360px; overflow-y: auto; }
  .pl-clist li { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto minmax(0, 200px) auto; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
  .pl-clist li:last-child { border-bottom: 0; }
  .pl-clist li[aria-current] { background: #F0F9FF; }
  .pl-cday { font-weight: 600; white-space: nowrap; }
  .pl-ctitle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pl-cwho { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pl-cact { display: inline-flex; gap: 4px; align-items: center; justify-content: flex-end; }
  .pl-cact .pl-muted { font-size: 12px; }
  .pl-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pl-form textarea.cms-input { min-height: 90px; }
  .pl-form-k { margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font: 700 13px/1.3 Inter, sans-serif; }
  .pl-form-err { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--bad-bg); color: #991B1B; font: 600 13.5px/1.45 Inter, sans-serif; }
  .pl-form-warn { list-style: none; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--warn-bg); color: #78350F; font-size: 13px; display: grid; gap: 4px; }
  .pl-form-warn li { display: flex; gap: 6px; align-items: center; }
  .pl-form-warn svg { width: 14px; height: 14px; }
  .pl-flabel { display: block; margin-bottom: 6px; font: 600 13px/1.2 Inter, sans-serif; }
  .pl-flabel small { font-weight: 400; color: var(--muted); }
  .pl-parts ol { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
  .pl-part { display: grid; gap: 6px; padding: 10px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
  .pl-part-h { display: grid; grid-template-columns: 110px 150px auto; gap: 6px; align-items: center; }
  .pl-part-f { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 6px; }
  .pl-radios, .pl-opts, .pl-spots { margin: 0; padding: 0; border: 0; min-width: 0; }
  .pl-radios legend, .pl-opts legend, .pl-spots legend { padding: 0; margin-bottom: 6px; font: 600 13px/1.2 Inter, sans-serif; }
  .pl-radios legend small, .pl-opts legend small, .pl-spots legend small { font-weight: 400; color: var(--muted); }
  .pl-radios label { display: inline-flex !important; align-items: center; gap: 6px; margin-right: 16px; }
  .pl-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pl-opts legend { grid-column: 1 / -1; }
  .pl-opt { display: flex !important; align-items: center; gap: 8px; }
  .pl-prev-wrap { min-width: 0; }
  .pl-phish-prev { min-height: 120px; padding: 12px; border-radius: 14px; border: 1px dashed var(--line-2); background: #fff; overflow: hidden; }
  .pl-level { margin: 0; align-self: end; font: 600 13px/1.4 Inter, sans-serif; color: var(--blue); }
  .pl-spotpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; max-height: 320px; overflow-y: auto; padding: 10px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
  .pl-zone { display: grid; gap: 4px; align-content: start; }
  .pl-zone b { font: 700 12px/1.3 Inter, sans-serif; color: var(--blue); text-transform: uppercase; letter-spacing: .08em; }
  .pl-zone label { display: flex !important; align-items: flex-start; gap: 6px; font-weight: 500 !important; min-height: 28px; }
  .pl-spotstill { position: relative; margin-top: 10px; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #050B1A; }
  /* the chosen spot on the still (office3d draws button.l15-mk in div.l15-mkl; the Hunt ships its own copy of these rules): a crystal, not a button */
  .pl-spotstill .l15-mkl { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
  .pl-spotstill .l15-mk { position: absolute; left: 0; top: 0; width: 48px; height: 48px; margin: -24px 0 0 -24px; padding: 0; border: 0; border-radius: 50%; background: none; pointer-events: none; opacity: 0; color: #fff; }
  .pl-spotstill .l15-mk.is-vis { opacity: 1; }
  .pl-spotstill .l15-mk-g { position: absolute; left: 50%; top: 50%; width: 20px; height: 24px; margin: -12px -10px; clip-path: polygon(50% 0, 100% 36%, 50% 100%, 0 36%); background: linear-gradient(160deg, #e8fbff, #2DD4BF 55%, #1E428A); filter: drop-shadow(0 0 8px #2DD4BF); }
  .pl-spotstill .l15-mk-r { position: absolute; inset: 6px; border-radius: 50%; border: 2px solid rgba(45, 212, 191, .9); box-shadow: 0 0 14px rgba(45, 212, 191, .55); }
  .pl-spotstill .l15-mk-t { position: absolute; left: 50%; top: calc(100% - 2px); transform: translateX(-50%); white-space: nowrap; padding: 3px 8px; border-radius: 8px; font: 700 11px/1.2 Inter, sans-serif; color: #062a26; background: #2DD4BF; }
  .pl-spotstill .l15-mk-t:empty { display: none; }
  .pl-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
  .pl-checks li { display: flex; gap: 6px; align-items: center; }
  .pl-checks li.ok svg { color: var(--ok); } .pl-checks li.no svg { color: var(--warn); }
  .pl-cdraw { padding: 18px; border-radius: 18px; border: 1px solid var(--line); background: #fff; margin-bottom: 18px; }
  .pl-cdraw .tbl-wrap { margin: 12px 0 0; }
  .pl-flow { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
  .pl-fstep { display: grid; align-content: start; gap: 6px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--mist); font-size: 12.5px; color: var(--muted); min-width: 0; }
  .pl-fstep b { display: flex; align-items: center; gap: 8px; font: 700 14px/1.2 Inter, sans-serif; color: var(--text); }
  .pl-fstep .n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 99px; background: #E2E8F1; font-size: 12px; }
  .pl-fstep.done { background: #F0FDF4; border-color: #BBF7D0; } .pl-fstep.done .n { background: var(--ok); color: #fff; }
  .pl-fstep.cur { border-color: var(--cyan); background: #F0F9FF; box-shadow: 0 0 0 3px rgba(0,168,232,.12); } .pl-fstep.cur .n { background: var(--blue); color: #fff; }
  .pl-fstep small { color: var(--text); }
  .pl-h4 { margin: 18px 0 6px; font: 800 15px/1.3 'Plus Jakarta Sans', sans-serif; }
  .pl-newdraw { margin-bottom: 18px; }
  .pl-newdraw > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font: 700 14px/1 Inter, sans-serif; color: var(--blue); }
  .pl-newdraw .cms-form { margin-top: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pl-prize-form { margin: 6px 0; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pl-ins { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
  .pl-ins > div { padding: 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
  .pl-ins b { display: block; font: 800 24px/1.1 'Plus Jakarta Sans', sans-serif; }
  .pl-ins small { color: var(--muted); font-size: 12.5px; }
  .pl-srcs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 16px; font-size: 13px; }
  .pl-srcs li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
  /* (play port) a row read only (View: the second person who approves a card of another team), Remove draw (admins, a frozen draw with no ticket) */
  .pl-view { grid-template-columns: minmax(0, 1fr); }
  .pl-view-b { display: grid; gap: 12px; min-width: 0; }
  .pl-vmeta { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 16px; margin: 0; }
  .pl-vmeta dt { font: 600 11.5px/1.2 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .pl-vmeta dd { margin: 2px 0 0; font-size: 13.5px; overflow-wrap: anywhere; }
  .pl-vline { margin: 0; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
  .pl-vline b { margin-right: 6px; }
  .pl-vparts, .pl-vflags { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  .pl-vparts li, .pl-vflags li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-size: 13.5px; overflow-wrap: anywhere; min-width: 0; }
  .pl-vparts code, .pl-vflags code { font-size: 12px; color: var(--blue); }
  .pl-vf { display: inline-flex; gap: 6px; align-items: baseline; min-width: 0; }
  .pl-vf small { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
  .pl-vok { display: flex; gap: 6px; align-items: center; margin: 0; font-size: 13px; }
  .pl-vok svg { width: 14px; height: 14px; color: #15803D; }
  .pl-discard { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 14px 0 0; }
  .pl-discard .pl-danger { color: #B91C1C; }
  .pl-discard .pl-danger svg { width: 15px; height: 15px; }
  /* responsive */
  @media (max-width: 1180px) {
    .today-inner.has-play { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .today-inner.has-play .td-play { grid-column: 1 / -1; }
    .pl-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 24px; }
    .pl-badges { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pl-pz-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pl-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (max-width: 1100px) {
    .pl-games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pl-draw-grid { grid-template-columns: minmax(0, 1fr); }
    .pl-how { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .pl-how-c:first-child { grid-column: 1 / -1; }
    .pl-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pl-prize-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (max-width: 900px) {
    .pl-grid { grid-template-columns: minmax(0, 1fr); }
    .pl-wallet-wrap { justify-self: stretch; max-width: none; }
    .pl-week { justify-content: flex-start; }
    .pl-two { grid-template-columns: minmax(0, 1fr); }
    .pl-ins { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pl-clist li { grid-template-columns: 80px minmax(0, 1fr) auto; }
    .pl-clist .pl-cwho { grid-column: 2 / -1; }
    .pl-clist .pl-cact { grid-column: 1 / -1; justify-content: flex-start; }
  }
  @media (max-width: 760px) {
    .today-inner.has-play { grid-template-columns: none; }
    .today-inner.has-play .td-play { order: -1; grid-column: auto; }
    .pl-inner { padding: 16px 16px 26px; }
    .pl-crumb-r { margin-left: 0; width: 100%; }
    .pl-title .text-grad { display: block; }
    .pl-lead { font-size: 15px; margin: 12px 0 16px; }
    .pl-wallet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pl-w-lg .pl-wv b { font-size: 24px; }
    .pl-games-head h2 small { display: block; margin: 4px 0 0; }
    .pl-games { grid-template-columns: minmax(0, 1fr); }
    .pl-t-art { height: 76px; }
    .pl-sec { padding: 28px 0; }
    .pl-card { padding: 16px; }
    .pl-earn { grid-template-columns: minmax(0, 1fr); }
    .pl-boxes { grid-template-columns: minmax(0, 1fr); padding: 10px; }
    .pl-how { grid-template-columns: minmax(0, 1fr); }
    .pl-how-c:first-child { grid-column: auto; }
    .pl-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pl-card .btn-xs, .pl-sec .btn-xs, .pl-seg button, .pl-crumb > button, .pl-dark-btn { min-height: 44px; }
    .pl-m { grid-template-columns: 40px minmax(0, 1fr); }
    .pl-m > :last-child { grid-column: 1 / -1; justify-self: start; }
    .pl-m-ico { width: 40px; height: 40px; }
    .pl-dlg { padding: 0; }
    .pl-dlg-box { width: 100%; height: 100%; max-height: none; border-radius: 0; }
    .pl-dlg-head { flex-wrap: wrap; padding: 10px 10px 10px 14px; }
    #plDlgWallet { order: 3; flex: 1 1 100%; margin-left: 0; }
    #plDlgWallet .pl-wallet { width: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    #plDlgClose { margin-left: auto; }
    .pl-result { margin: 12px; padding: 18px 16px 14px; border-radius: 18px; }
    .pl-r-burst { width: 68px; height: 68px; } .pl-r-burst b { font-size: 22px; }
    .pl-r-title { font-size: 19px; }
    .pl-r-wallet { gap: 6px; } .pl-r-wallet > div { padding: 8px; } .pl-r-wallet b { font-size: 17px; }
    .pl-r-acts > button { flex: 1 1 auto; justify-content: center; }
    .pl-form, .pl-newdraw .cms-form, .pl-prize-form { grid-template-columns: minmax(0, 1fr); }
    .pl-opts { grid-template-columns: minmax(0, 1fr); }
    .pl-part-h { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
    .pl-flow { grid-template-columns: minmax(0, 1fr); }
    .pl-sched thead { display: none; }
    .pl-sched tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px; border-bottom: 1px solid var(--line); }
    .pl-sched td, .pl-sched th { display: block; padding: 0; border: 0; }
    .pl-sched .cms-input { width: 100%; }
    .pl-mlabel { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: block; margin-bottom: 4px; font: 600 12px/1.2 Inter, sans-serif; color: var(--muted); }
    .pl-m > :last-child { grid-column: 2 / -1; }
  }
  @media (max-width: 560px) {
    .pl-sched [data-sched-save], .pl-teaser [data-sched-teaser-save] { min-height: 40px; padding: 8px 16px; }   /* (Play final) the teaser day Save = the game rows' Save */
    .pl-switchbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #plDlgWallet .pl-wallet { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }   /* one compact row: the game keeps the height of the phone */
    #plDlgWallet .pl-w { padding: 6px 8px; gap: 2px; } #plDlgWallet .pl-bar { display: none; } #plDlgWallet .pl-wv b { font-size: 15px; } #plDlgWallet .pl-w-today .pl-wv small { font-size: 11px; }
    .pl-pz-mini { grid-template-columns: minmax(0, 1fr); }
    .pl-box { grid-template-columns: 64px minmax(0, 1fr); }
    .pl-ins { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 400px) {
    .pl-how-c { padding: 14px; }
    .pl-ptable { font-size: 12px; }
    .pl-ptable th, .pl-ptable td { padding: 6px 4px; }
    .pl-ptable td.n { white-space: normal; }
    .pl-row { grid-template-columns: 28px 32px minmax(0, 1fr) auto; gap: 8px; padding: 8px 6px; }
    .pl-av { width: 32px; height: 32px; }
    .pl-months { grid-template-columns: minmax(0, 1fr); }
    #plDlgWallet .pl-wk svg { display: none; }
  }
  @media (hover: none), (pointer: coarse) { .pl-card .btn-xs, .pl-sec .btn-xs, .pl-seg button, .pl-dark-btn, .play-chip, .pl-sc, button.pl-earn-l, #pulsePlayLink { min-height: 44px; } .pl-stepper button { height: 44px; }
    /* (Play final) CMS > Play > Schedule on a touch screen of any width: every Save (the game rows and the teaser day) the same 40 px button */
    .pl-sched [data-sched-save], .pl-teaser [data-sched-teaser-save] { min-height: 40px; padding: 8px 16px; } }
  /* UX-2: a short laptop screen (1366 x 657, 1280 x 720, 1536 x 730...): the dialog's head + game switch fold into slim rows so the
     game keeps the height (the games keep their action bars in view too) */
  @media (max-height: 820px) and (min-width: 761px) {
    .pl-dlg { padding: 8px 20px; }
    .pl-dlg-box { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); border-radius: 18px; }
    .pl-dlg-head { padding: 6px 8px 6px 14px; gap: 10px; }
    .pl-dlg-ico { width: 32px; height: 32px; border-radius: 10px; }
    .pl-dlg-head h2 { font-size: 16px; }
    #plDlgWallet .pl-wallet { width: 400px; gap: 6px; }
    #plDlgWallet .pl-w { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 6px; padding: 5px 9px; border-radius: 10px; }
    #plDlgWallet .pl-bar, #plDlgWallet .pl-wv small, #plDlgWallet .pl-wk svg { display: none; }
    #plDlgWallet .pl-wv b { font-size: 15px; }
    .pl-switchbar { padding: 6px 12px; gap: 6px; }
    .pl-sw { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto; min-height: 44px; padding: 3px 8px; column-gap: 7px; border-radius: 10px; }   /* one row, still a 44 px target */
    .pl-sw-ico { grid-row: auto; width: 24px; height: 24px; border-radius: 7px; } .pl-sw-ico svg { width: 14px; height: 14px; }
    .pl-sw-st { font-size: 11px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pl-tile, .pl-tile:hover, .pl-tile:focus-visible { transition: none; transform: none; }
    .pl-bar > i, .pl-tg, .pl-tg::after { transition: none; }
  }
  /* (Thai / English, 2026-11-12) the language switch: two segments (EN | ไทย, aria-pressed) in the hub head and in the game window head
     (#plDlgLang, before the close button; its buttons are 44 px like every button of the window head) */
  .pl-lang { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.06); flex: none; }
  .pl-lang button { min-width: 46px; min-height: 34px; padding: 4px 12px; border: 0; border-radius: 999px; background: transparent; color: rgba(255,255,255,.86); font: 700 13px/1.45 Inter, 'IBM Plex Sans Thai', sans-serif; cursor: pointer; }
  .pl-lang button:hover { background: rgba(255,255,255,.12); color: #fff; }
  .pl-lang button[aria-pressed="true"] { background: #fff; color: #0A1630; }
  .pl-lang button[aria-disabled="true"], .pl-lang button:disabled { cursor: default; }
  .pl-lang button:disabled { opacity: .72; }
  .pl-lang button:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
  #plDlgLang button { min-height: 44px; min-width: 48px; }
  .pl-crumb-r { flex-wrap: wrap; align-items: center; }
  /* Thai: stacked vowels and tone marks need room (line-height >= 1.45, never letter-spacing), and the Thai face after the Latin one */
  #playView[lang="th"] :is(p, li, small, td, th, label, summary, button, b, span, h1, h2, h3, h4, output, a),
  #plDlg[lang="th"] :is(.pl-dlg-head, .pl-switchbar, .pl-loading, .pl-resting) :is(h2, span, small, b, button, p),
  .pl-result[lang="th"] :is(p, li, small, span, b, h3, button, textarea) { letter-spacing: 0; font-family: Inter, 'IBM Plex Sans Thai', sans-serif; }
  #playView[lang="th"] :is(h1, h2, h3, h1 .text-grad, .pl-t-name, .pl-t-short, .pl-wv b, .pl-stub, .pl-r-burst b, .pl-hello-t b, .pl-av, .pl-rank, .pl-qty, .pl-sw-t),
  #plDlg[lang="th"] .pl-dlg-head h2, .pl-result[lang="th"] :is(.pl-r-title, .pl-r-burst b) { font-family: 'Plus Jakarta Sans', 'IBM Plex Sans Thai', sans-serif; }
  #playView[lang="th"] :is(p, li, small, td, label, summary, .pl-lead, .pl-keep, .pl-muted, .section-sub, .pl-t-desc, .pl-wnote),
  .pl-result[lang="th"] :is(p, li, small, .pl-r-sub) { line-height: 1.6; }
  #playView[lang="th"] :is(.pl-t-state, .pl-t-name, .pl-t-short, .pl-pill, .pl-chip, .pl-dark-btn, .pl-seg button, .pl-k, .pl-eyebrow, .pl-wk, .pl-hello-t b, .pl-hello-t small, .pl-name b, .pl-name small,
    .pl-winner b, .pl-winner small, .pl-seal span, .pl-earn-n, .pl-crumb, .pl-switch, .pl-games-head h2 small, .pl-clock, .pl-ptable th, .pl-ptable tr.grp td, .pl-choose > summary, .pl-r-k),
  #plDlg[lang="th"] :is(.pl-dlg-head h2, .pl-sw-t, .pl-sw-st, .pl-wk, .pl-wv small, .pl-loading), .pl-result[lang="th"] :is(.pl-wk, .pl-r-k, .pl-r-burst small) { line-height: 1.5; }
  #playView[lang="th"] .pl-t-desc { min-height: 3.2em; }
  #playView[lang="th"] .pl-title { line-height: 1.25; letter-spacing: 0; }
  #playView[lang="th"] .pl-wv b, #plDlg[lang="th"] .pl-wv b { line-height: 1.2; }
  /* (fix-r1 L4) Thai paragraphs: no single short word left alone on the last line */
  #playView[lang="th"] :is(p, li, small, .pl-lead, .pl-t-desc, .pl-muted), #plDlg[lang="th"] :is(.pl-resting, .pl-loading) p, .pl-result[lang="th"] :is(p, li, .pl-r-sub) { text-wrap: pretty; }
  /* (fix-r1 L5) Thai has no italic face: a hidden name on the board is muted, never slanted by the browser */
  [lang="th"] .pl-row[data-hidden]:not([data-me]) .pl-name b { font-style: normal; }
  /* (fix-r1 L3) the draw's theme (a period such as "ธ.ค. 2569 - ก.พ. 2570") stays on one line; a very long one is cut, never the page */
  .pl-theme { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
  @media (max-width: 760px) {
    .pl-lang button { min-height: 44px; }
    .pl-dlg-head #plDlgLang { margin-left: auto; }
    .pl-dlg-head #plDlgLang + #plDlgClose { margin-left: 0; }
  }
  /* a portrait tablet (761-900 px): the wallet takes its own row under the title, like a phone, so the title and the switch keep room */
  @media (min-width: 761px) and (max-width: 900px) {
    .pl-dlg-head { flex-wrap: wrap; }
    #plDlgWallet { order: 3; flex: 1 1 100%; margin-left: 0; }
    #plDlgWallet .pl-wallet { width: auto; }
    .pl-dlg-head #plDlgLang { margin-left: auto; }
  }
  /* a small phone: a game's name in the switch bar may take two lines (never cut) */
  @media (max-width: 400px) { .pl-sw-t { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; } }
  @media (max-width: 560px) {
    .pl-dlg-head .pl-dlg-ico { display: none; }   /* (Thai / English) the title keeps its room next to the switch and the close button */
    #plDlgLang button { min-width: 44px; padding: 4px 9px; }
  }
  @media (hover: none), (pointer: coarse) { .pl-lang button { min-height: 44px; } }
  /* (SEC-7) CMS > Play: a row whose answer is hidden + the Thai part of a content form */
  .pl-masked { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-style: italic; }
  .pl-masked svg, .pl-mchip svg, .pl-maskline svg { width: 14px; height: 14px; flex: none; }
  .pl-maskline { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: #FEF3C7; color: #78350F; font-size: 13.5px; line-height: 1.5; }
  .pl-maskline svg { margin-top: 2px; }
  .pl-thai { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px dashed #93C5FD; background: #F5F9FF; }
  .pl-thai [lang="th"], .pl-form [lang="th"] { font-family: Inter, 'IBM Plex Sans Thai', sans-serif; line-height: 1.5; }
  .pl-thai-act { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0; }
  .pl-th-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (max-width: 760px) { .pl-th-opts { grid-template-columns: minmax(0, 1fr); } }
  .pl-sc-auto { margin-top: 4px; }
  .pl-cst { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; justify-content: flex-end; }
  @media (max-width: 900px) { .pl-clist .pl-cst { grid-column: 2 / -1; justify-content: flex-start; } }   /* a phone: the title keeps the row, the chips go under it */  /* a touch screen: the row actions of a content list (Show answer, Edit, View, Approve) and the Schedule's Spot = 40 px, like its Save */
  @media (hover: none), (pointer: coarse) { .pl-clist .btn-xs, .pl-sc-auto { min-height: 40px; padding: 8px 12px; } }
  /* @@PLAY-END@@ */