/**
 * Today in Tech dashboard styles.
 *
 * Extracted from the inline <style> that used to live inside the page's
 * WordPress Custom HTML block. Every rule is scoped under #tit-dash, so this
 * file is safe to load on its own and is enqueued only on the
 * today-in-tech page (see functions.php).
 *
 * Source of truth: this file. Do NOT paste CSS into the page editor.
 */

/* width + border-box matter now that #tit-dash is the grid item itself rather
   than a div nested inside .inside-article. Without them the id selector's
   max-width outranks `.site-main > *:not(.lb-sidebar) { max-width:100% }` and
   the dashboard runs 149px underneath the sidebar rail. */
/* container-type makes #tit-dash a query container so the panel grids below can
   respond to the column width instead of the viewport. It also applies layout
   and style containment, which is safe here: nothing inside the dashboard uses
   position:fixed or position:sticky, and every z-index is scoped to its own
   position:relative parent, so the new stacking context changes nothing. */
#tit-dash { width:100%; box-sizing:border-box; max-width:1180px; margin:0 auto; padding:24px 16px; background:transparent; color:#1f2937; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; line-height:1.5; container-type:inline-size; }
  #tit-dash *, #tit-dash *::before, #tit-dash *::after { margin:0; padding:0; box-sizing:border-box; }
  #tit-dash a { text-decoration:none !important; }

  /* ── Header ── */
  #tit-dash .tit-top { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
  #tit-dash .tit-top h2 { font-size:1.9rem !important; color:#0f172a !important; font-weight:800 !important; letter-spacing:-0.02em; margin:0 0 4px 0 !important; padding:0 !important; border:none !important; background:none !important; }
  #tit-dash .tit-sub { font-size:0.88rem; color:#6b7280; }
  #tit-dash .tit-top-right { display:flex; align-items:center; gap:8px; }
  #tit-dash .tit-search-wrap { position:relative; width:min(360px,80vw); }
  #tit-dash .tit-search-wrap > .tit-icon-slot { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:#9ca3af; pointer-events:none; }
  #tit-dash .tit-search { width:100%; padding:10px 52px 10px 36px; border:1px solid #e5e7eb; border-radius:10px; font-size:0.85rem; background:#fff; color:#1f2937; transition:border-color 0.2s, box-shadow 0.2s; font-family:inherit; }
  #tit-dash .tit-search:focus { outline:none; border-color:#0d9488; box-shadow:0 0 0 3px rgba(13,148,136,0.10); }
  #tit-dash .tit-search::placeholder { color:#9ca3af; }
  #tit-dash .tit-kbd { position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:0.68rem; color:#9ca3af; border:1px solid #e5e7eb; border-radius:5px; padding:1px 6px; background:#f9fafb; font-family:inherit; pointer-events:none; }
  #tit-dash .tit-refresh-btn { background:#fff; border:1px solid #e5e7eb; color:#6b7280; width:44px; height:44px; border-radius:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color 0.2s,color 0.2s,background-color 0.2s; flex-shrink:0; }
  #tit-dash .tit-refresh-btn .tit-icon-slot { width:18px; height:18px; }
  #tit-dash .tit-refresh-btn:hover { border-color:#0d9488; color:#0d9488; }
  #tit-dash .tit-refresh-btn:focus-visible, #tit-dash .tit-tab:focus-visible, #tit-dash .tit-mini-tab:focus-visible, #tit-dash a:focus-visible { outline:2px solid #0d9488; outline-offset:2px; }
  #tit-dash .tit-refresh-btn.spinning { animation:tit-spin 0.8s linear infinite; }
  @keyframes tit-spin { to { transform:rotate(360deg); } }

  /* ── Category chips ── */
  #tit-dash .tit-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
  #tit-dash .tit-tab { display:inline-flex; align-items:center; gap:6px; padding:7px 15px; border-radius:999px; font-size:0.79rem; font-weight:600; color:#4b5563; background:#fff; border:1px solid #e5e7eb; cursor:pointer; white-space:nowrap; transition:all 0.15s; font-family:inherit; }
  #tit-dash .tit-tab:hover { border-color:#0d9488; color:#0f172a; }
  #tit-dash .tit-tab.active { background:#0d9488; border-color:#0d9488; color:#fff; }
  #tit-dash .tit-tab .tit-tab-ic { font-size:0.8em; line-height:1; }
  #tit-dash .tit-icon { width:1em; height:1em; display:inline-block; flex:0 0 auto; vertical-align:-0.125em; }
  #tit-dash .tit-tab > .tit-icon-slot { width:14px; height:14px; }
  #tit-dash .tit-brand-icon { object-fit:contain; }
  #tit-dash .tit-tab.active .tit-brand-icon { filter:brightness(0) invert(1); }
  #tit-dash .tit-icon-slot { width:1em; height:1em; display:inline-flex; align-items:center; justify-content:center; color:currentColor; flex:0 0 auto; }
  #tit-dash .tit-icon-slot > .tit-icon { width:100%; height:100%; }

  /* ── Full-width top story ── */
  #tit-dash .tit-hero-row { display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:24px; }

  #tit-dash .tit-hero { position:relative; background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:30px; overflow:hidden; min-height:270px; display:flex; flex-direction:column; justify-content:center; }
  #tit-dash .tit-hero.hidden { display:none; }
  #tit-dash .tit-hero-visual { position:absolute; top:0; right:0; bottom:0; width:58%; background:radial-gradient(500px 260px at 70% 25%,rgba(45,212,191,0.28),transparent 62%),radial-gradient(380px 300px at 82% 82%,rgba(16,185,129,0.20),transparent 60%),linear-gradient(160deg,#102033 0%,#0a121f 100%); }
  #tit-dash .tit-hero-visual::before { content:''; position:absolute; z-index:0; inset:0; background-image:linear-gradient(rgba(148,163,184,0.09) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,0.09) 1px,transparent 1px); background-size:26px 26px; }
  #tit-dash .tit-hero-visual::after { content:''; position:absolute; z-index:0; left:50%; top:50%; width:140px; height:140px; transform:translate(-50%,-50%) rotate(45deg); border:1.5px solid rgba(45,212,191,0.55); border-radius:20px; box-shadow:0 0 60px rgba(45,212,191,0.35),inset 0 0 40px rgba(45,212,191,0.15); }
  #tit-dash .tit-hero-visual.has-image { background:transparent; }
  #tit-dash .tit-hero-visual.has-image::before, #tit-dash .tit-hero-visual.has-image::after { opacity:0; }
  #tit-dash .tit-hero-image { position:absolute; z-index:1; inset:0; width:100%; height:100%; object-fit:cover; object-position:72% center; -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 24%,#000 100%); mask-image:linear-gradient(90deg,transparent 0%,#000 24%,#000 100%); }
  #tit-dash .tit-hero-inner { position:relative; z-index:2; max-width:52%; }
  #tit-dash .tit-hero-badge { display:inline-block; font-size:0.66rem; font-weight:800; color:#0d9488; letter-spacing:0.09em; text-transform:uppercase; margin-bottom:12px; }
  #tit-dash .tit-hero h3 { font-size:1.5rem !important; font-weight:800 !important; color:#0f172a !important; margin:0 0 12px 0 !important; padding:0 !important; border:none !important; background:none !important; line-height:1.28; letter-spacing:-0.01em; }
  #tit-dash .tit-hero h3 a { color:#0f172a !important; }
  #tit-dash .tit-hero h3 a:hover { color:#0d9488 !important; }
  #tit-dash .tit-hero-desc { font-size:0.86rem; color:#6b7280; line-height:1.6; margin-bottom:14px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  #tit-dash .tit-hero-meta { font-size:0.76rem; color:#9ca3af; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
  #tit-dash .tit-hero-meta .tit-src { color:#0d9488; font-weight:600; }
  #tit-dash .tit-hero-btn { display:inline-flex; align-items:center; gap:8px; margin-top:18px; padding:9px 18px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; color:#111827 !important; font-weight:600; font-size:0.82rem; transition:all 0.15s; width:fit-content; }
  #tit-dash .tit-hero-btn:hover { border-color:#0d9488; color:#0d9488 !important; }

  #tit-dash .tit-panel-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
  #tit-dash .tit-panel-actions { display:flex; align-items:center; gap:10px; }
  #tit-dash .tit-panel-title { font-size:0.95rem; font-weight:800; color:#0f172a; display:flex; align-items:center; gap:8px; }
  #tit-dash .tit-panel-title > .tit-icon-slot, #tit-dash .tit-sec-head h3 > .tit-icon-slot { width:17px; height:17px; flex-shrink:0; }
  #tit-dash .tit-viewall { color:#0d9488 !important; font-size:0.74rem; font-weight:600; white-space:nowrap; display:inline-flex; align-items:center; gap:4px; }
  #tit-dash .tit-viewall .tit-icon-slot, #tit-dash .tit-foot-link .tit-icon-slot, #tit-dash .tit-hero-btn .tit-icon-slot { width:13px; height:13px; }
  #tit-dash .tit-viewall:hover { text-decoration:underline !important; }
  /* ── Sections ── */
  #tit-dash .tit-sec { margin-bottom:24px; }
  #tit-dash .tit-sec.hidden { display:none; }
  #tit-dash .tit-sec-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
  #tit-dash .tit-sec-head h3 { font-size:1.02rem !important; font-weight:800 !important; color:#0f172a !important; margin:0 !important; padding:0 !important; border:none !important; background:none !important; display:flex; align-items:center; gap:8px; }
  #tit-dash .tit-sec-sub { font-size:0.76rem; color:#9ca3af; font-weight:500; }

  /* Latest Tech News strip */
  #tit-dash .tit-story-icon { background:#f8fafc; border-radius:4px; }
  #tit-dash .tit-icon-safety { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#0d9488; }
  #tit-dash .tit-icon-safety svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

  /* Panel grids */
  #tit-dash .tit-cols-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  #tit-dash .tit-cols-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
  #tit-dash .tit-panel { background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:18px 20px; }
  #tit-dash .tit-panel.hidden { display:none; }
  #tit-dash .tit-panel.span-all { grid-column:1 / -1; }
  #tit-dash.tit-filtered .tit-panel:not(.hidden) { grid-column:1 / -1; }
  #tit-dash.tit-filtered .tit-mini-col:not(.hidden) { grid-column:1 / -1; }
  #tit-dash .tit-picon { width:24px; height:24px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
  #tit-dash .tit-picon .tit-icon-slot { width:15px; height:15px; }
  #tit-dash .tit-pi-orange{background:#ffedd5;color:#c2410c} #tit-dash .tit-pi-dark{background:#0f172a;color:#fff}
  #tit-dash .tit-pi-dark .tit-brand-icon { filter:brightness(0) invert(1); }
  #tit-dash .tit-pi-indigo{background:#e0e7ff;color:#4338ca} #tit-dash .tit-pi-purple{background:#ede9fe;color:#6d28d9}
  #tit-dash .tit-pi-yellow{background:#fef9c3;color:#a16207} #tit-dash .tit-pi-cyan{background:#cffafe;color:#0e7490}
  #tit-dash .tit-pi-red{background:#fee2e2;color:#b91c1c} #tit-dash .tit-pi-green{background:#d1fae5;color:#047857}
  #tit-dash .tit-pi-teal{background:#ccfbf1;color:#0f766e} #tit-dash .tit-pi-pink{background:#fce7f3;color:#be185d}

  /* Generic story rows (numbered + plain) */
  #tit-dash .tit-item, #tit-dash .tit-row { padding:10px 0; border-bottom:1px solid #f3f4f6; }
  #tit-dash .tit-item:last-child, #tit-dash .tit-row:last-child { border-bottom:none; }
  #tit-dash .tit-item:first-child, #tit-dash .tit-row:first-child { padding-top:2px; }
  #tit-dash .tit-row { display:flex; gap:10px; align-items:flex-start; }
  /* Rows past the base count are rendered but hidden; titFillRow() in
     today-in-tech.js reveals only as many as fit under the tallest card in the
     row. The default is hidden so the first paint shows the base length and
     the fill pass can only ever add, never take away. */
  #tit-dash .tit-fill-hidden { display:none !important; }

  /* The flame marks a row climbing fast. It sits inline in the meta line, so it
     inherits that line's size and only carries colour of its own — the badge is
     a hint, not a second heading competing with the title. */
  #tit-dash .tit-hot { display:inline-flex; align-items:center; color:#f97316; vertical-align:-0.125em; }
  #tit-dash .tit-hot .tit-icon { width:1.05em; height:1.05em; }
  #tit-dash .tit-num { color:#9ca3af; font-size:0.82rem; font-weight:600; min-width:14px; padding-top:1px; }
  #tit-dash .tit-row-body { flex:1; min-width:0; }
  #tit-dash .tit-ititle { font-size:0.86rem; font-weight:600; line-height:1.4; }
  #tit-dash .tit-ititle a { color:#1f2937 !important; transition:color 0.15s; }
  #tit-dash .tit-ititle a:hover { color:#0d9488 !important; }
  #tit-dash .tit-idesc { font-size:0.76rem; color:#6b7280; margin-top:3px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
  #tit-dash .tit-imeta { font-size:0.72rem; color:#9ca3af; margin-top:4px; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
  #tit-dash .tit-imeta a { color:#9ca3af !important; }
  #tit-dash .tit-imeta a:hover { color:#0d9488 !important; }
  #tit-dash .tit-side { margin-left:auto; flex-shrink:0; font-size:0.78rem; color:#6b7280; font-weight:600; white-space:nowrap; padding-top:2px; }
  #tit-dash .tit-up { color:#059669; font-weight:700; }

  /* Tags */
  #tit-dash .tit-tag { display:inline-block; font-size:0.62rem; padding:2px 7px; border-radius:10px; font-weight:700; vertical-align:middle; letter-spacing:0.02em; }
  #tit-dash .t-orange{background:#fef3c7;color:#92400e} #tit-dash .t-green{background:#d1fae5;color:#065f46}
  #tit-dash .t-red{background:#fee2e2;color:#991b1b} #tit-dash .t-blue{background:#dbeafe;color:#1e40af}
  #tit-dash .t-purple{background:#ede9fe;color:#5b21b6} #tit-dash .t-cyan{background:#cffafe;color:#155e75}
  #tit-dash .t-pink{background:#fce7f3;color:#9d174d} #tit-dash .t-yellow{background:#fef9c3;color:#854d0e}
  #tit-dash .t-teal{background:#ccfbf1;color:#115e59} #tit-dash .t-indigo{background:#e0e7ff;color:#3730a3}
  #tit-dash .t-neutral{background:#f3f4f6;color:#4b5563}

  /* Panel footer link */
  #tit-dash .tit-foot-link { display:inline-flex; align-items:center; gap:5px; margin-top:12px; color:#0d9488 !important; font-size:0.77rem; font-weight:600; }
  #tit-dash .tit-foot-link:hover { text-decoration:underline !important; }

  /* AI & Cloud mini columns */
  #tit-dash .tit-mini-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  #tit-dash .tit-mini-col { min-width:0; }
  #tit-dash .tit-mini-col.hidden { display:none; }
  #tit-dash .tit-mini-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
  #tit-dash .tit-mini-icon .tit-icon-slot { width:24px; height:24px; }
  #tit-dash .tit-mi-purple{background:#f3e8ff} #tit-dash .tit-mi-yellow{background:#fef9c3} #tit-dash .tit-mi-cyan{background:#cffafe}
  #tit-dash .tit-mini-label { font-size:0.68rem; font-weight:700; margin-bottom:8px; display:flex; align-items:center; gap:5px; }
  #tit-dash .tit-mini-label .tit-dot { width:6px; height:6px; border-radius:50%; display:inline-block; }
  #tit-dash .tit-mini-col .tit-item:nth-child(n+6) { display:none; }
  #tit-dash .tit-mini-col .tit-ititle { font-size:0.8rem; }

  /* Security Watch severity rows */
  #tit-dash .tit-sev { display:inline-block; font-size:0.6rem; font-weight:800; padding:3px 8px; border-radius:6px; text-transform:uppercase; letter-spacing:0.04em; flex-shrink:0; }
  #tit-dash .tit-sev-critical{background:#fee2e2;color:#dc2626} #tit-dash .tit-sev-high{background:#ffedd5;color:#ea580c}
  #tit-dash .tit-sev-medium{background:#fef9c3;color:#a16207} #tit-dash .tit-sev-low{background:#dbeafe;color:#1d4ed8}
  #tit-dash .tit-sev-na{background:#f3f4f6;color:#6b7280}
  #tit-dash .tit-chev { color:#9ca3af; flex-shrink:0; margin-left:auto; display:inline-flex; }
  #tit-dash .tit-chev .tit-icon { width:17px; height:17px; }

  /* Per-card 24H/7D mini-tabs */
  #tit-dash .tit-mini-tabs { display:flex; gap:4px; }
  #tit-dash .tit-mini-tab { padding:3px 9px; border-radius:10px; font-size:0.62rem; font-weight:700; color:#6b7280; background:transparent; border:1px solid #e5e7eb; cursor:pointer; font-family:inherit; text-transform:uppercase; letter-spacing:0.04em; transition:all 0.15s; }
  #tit-dash .tit-mini-tab:hover { color:#111827; border-color:#d1d5db; }
  #tit-dash .tit-mini-tab.active { color:#fff; background:#0d9488; border-color:#0d9488; }

  /* Down Detector */
  #tit-dash .tit-dn-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-bottom:6px; }
  #tit-dash .tit-dn-chip { display:flex; flex-direction:column; gap:3px; background:#f9fafb; border:1px solid #e5e7eb; border-radius:12px; padding:12px 14px; transition:all 0.15s; }
  #tit-dash .tit-dn-chip:hover { border-color:#0d9488; }
  #tit-dash .tit-dn-top { display:flex; align-items:center; gap:7px; }
  #tit-dash .tit-dn-led { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  #tit-dash .tit-dn-led.led-green { background:#059669; box-shadow:0 0 0 3px rgba(5,150,105,0.16); }
  #tit-dash .tit-dn-led.led-yellow { background:#d97706; box-shadow:0 0 0 3px rgba(217,119,6,0.16); }
  #tit-dash .tit-dn-led.led-red { background:#dc2626; box-shadow:0 0 0 3px rgba(220,38,38,0.16); animation:tit-pulse 1.8s ease-in-out infinite; }
  #tit-dash .tit-status-icon { width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
  #tit-dash .tit-status-icon .tit-icon { width:16px; height:16px; }
  #tit-dash .tit-status-icon.led-green { color:#059669; }
  #tit-dash .tit-status-icon.led-yellow { color:#d97706; }
  #tit-dash .tit-status-icon.led-red { color:#dc2626; }
  @keyframes tit-pulse { 0%,100%{opacity:1} 50%{opacity:0.55} }
  #tit-dash .tit-dn-name { font-size:0.82rem; font-weight:700; color:#111827; }
  #tit-dash .tit-dn-state { font-size:0.68rem; color:#6b7280; padding-left:15px; }
  #tit-dash .tit-dn-state.st-ok { color:#059669; }
  #tit-dash .tit-dn-state.st-warn { color:#d97706; }
  #tit-dash .tit-dn-state.st-bad { color:#dc2626; }
  #tit-dash .tit-dn-subhead { font-size:0.7rem; font-weight:700; color:#6b7280; text-transform:uppercase; letter-spacing:0.06em; margin:14px 0 4px; }
  #tit-dash .tit-down-empty { color:#9ca3af; font-size:0.82rem; padding:14px 0; text-align:center; }

  /* States */
  #tit-dash .tit-loading { color:#9ca3af; font-size:0.8rem; padding:12px 0; }
  #tit-dash .tit-error { color:#6b7280; font-size:0.8rem; padding:8px 0; }
  #tit-dash .tit-error a { color:#0d9488 !important; }
  #tit-dash .tit-error a:hover { text-decoration:underline !important; }

  /* Skeleton loading */
  #tit-dash .tit-skel { background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb 50%,#f3f4f6 75%); background-size:200% 100%; animation:tit-shimmer 1.5s infinite; border-radius:4px; height:14px; margin-bottom:8px; }
  #tit-dash .tit-skel-lg { height:20px; width:80%; }
  #tit-dash .tit-skel-md { height:12px; width:60%; }
  #tit-dash .tit-skel-sm { height:10px; width:40%; }
  @keyframes tit-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

  @media (prefers-reduced-motion:reduce) {
    #tit-dash *, #tit-dash *::before, #tit-dash *::after { scroll-behavior:auto !important; transition-duration:0.01ms !important; animation-duration:0.01ms !important; animation-iteration-count:1 !important; }
  }

  /* Footer */
  #tit-dash .tit-footer { margin-top:8px; padding-top:14px; border-top:1px solid #e5e7eb; display:flex; justify-content:space-between; align-items:center; font-size:0.72rem; color:#9ca3af; flex-wrap:wrap; gap:8px; }

  /* ── Responsive: container-based, not viewport-based ──
   *
   * The dashboard only cares how wide its own column is, and on this site the
   * two are not correlated. Measured #tit-dash widths against the viewport:
   *
   *   viewport 1920 → 900px    viewport 1000 →  605px
   *   viewport 1280 → 885px    viewport  900 →  505px
   *   viewport 1200 → 805px    viewport  800 →  405px
   *   viewport 1100 → 705px    viewport  700 →  645px  ← wider than at 800
   *
   * The 700px row is the giveaway: below that breakpoint the outer grid drops
   * the sidebar rail underneath, so the dashboard gets *more* room than it had
   * at 800px. A viewport media query cannot express that, and the old
   * @media(max-width:900px) never fired at all between roughly 1000 and 1500px
   * — exactly where the 1280px shell leaves the dashboard ~705px and a 3-up
   * grid collapses to ~228px per column.
   *
   * Note the thresholds are content-box widths: @container measures the
   * container's content box, so #tit-dash's 16px side padding means these
   * compare against (rendered width - 32px). 800px here therefore trips at a
   * ~832px rendered dashboard, which keeps the 885px desktop case (853px of
   * content) comfortably 3-up rather than a few pixels from flipping.
   */
  @container (max-width:800px){
    #tit-dash .tit-cols-3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
    #tit-dash .tit-mini-cols { grid-template-columns:repeat(2,minmax(0,1fr)); }
  }

  @container (max-width:620px){
    #tit-dash .tit-cols-3 { grid-template-columns:1fr; }
    #tit-dash .tit-cols-2 { grid-template-columns:1fr; }
    #tit-dash .tit-mini-cols { grid-template-columns:1fr; }
    #tit-dash .tit-hero-visual { display:none; }
    #tit-dash .tit-hero-inner { max-width:100%; }
    #tit-dash .tit-hero { min-height:0; padding:22px; }
    #tit-dash .tit-top { align-items:flex-start; flex-direction:column; }
    #tit-dash .tit-top-right { width:100%; }
    #tit-dash .tit-search-wrap { flex:1; width:auto; }
    #tit-dash #titCardDown > .tit-panel-head { align-items:flex-start; flex-direction:column; }
    #tit-dash #titCardDown .tit-panel-actions { width:100%; justify-content:space-between; flex-wrap:wrap; }
  }

  /* Fallback for browsers without container queries (pre-Chrome 105 / Safari 16
   * / Firefox 110). Keeps the original viewport breakpoint so narrow screens
   * still stack instead of overflowing. */
  @supports not (container-type: inline-size) {
    @media(max-width:900px){
      #tit-dash .tit-cols-3 { grid-template-columns:1fr; }
      #tit-dash .tit-cols-2 { grid-template-columns:1fr; }
      #tit-dash .tit-mini-cols { grid-template-columns:1fr; }
      #tit-dash .tit-hero-visual { display:none; }
      #tit-dash .tit-hero-inner { max-width:100%; }
      #tit-dash .tit-hero { min-height:0; padding:22px; }
      #tit-dash .tit-top { align-items:flex-start; flex-direction:column; }
      #tit-dash .tit-top-right { width:100%; }
      #tit-dash .tit-search-wrap { flex:1; width:auto; }
      #tit-dash #titCardDown > .tit-panel-head { align-items:flex-start; flex-direction:column; }
      #tit-dash #titCardDown .tit-panel-actions { width:100%; justify-content:space-between; flex-wrap:wrap; }
    }
  }

  /* ── Dark Mode: OS preference ── */
  @media (prefers-color-scheme:dark) {
    :root:not([data-theme="light"]) #tit-dash { color:#cbd5e1; }
    :root:not([data-theme="light"]) #tit-dash .tit-top h2 { color:#f1f5f9 !important; }
    :root:not([data-theme="light"]) #tit-dash .tit-sub { color:#9ca3af; }
    :root:not([data-theme="light"]) #tit-dash .tit-search { background:#252830; border-color:#363940; color:#f1f5f9; }
    :root:not([data-theme="light"]) #tit-dash .tit-search:focus { border-color:#2dd4bf; box-shadow:0 0 0 3px rgba(45,212,191,0.12); }
    :root:not([data-theme="light"]) #tit-dash .tit-search::placeholder { color:#6b7280; }
    :root:not([data-theme="light"]) #tit-dash .tit-search-wrap svg { stroke:#6b7280; }
    :root:not([data-theme="light"]) #tit-dash .tit-kbd { background:#1c1f26; border-color:#363940; color:#6b7280; }
    :root:not([data-theme="light"]) #tit-dash .tit-refresh-btn { background:#21242c; border-color:#363940; color:#9ca3af; }
    :root:not([data-theme="light"]) #tit-dash .tit-refresh-btn:hover { border-color:#2dd4bf; color:#2dd4bf; }
    :root:not([data-theme="light"]) #tit-dash .tit-tab { background:#21242c; border-color:#363940; color:#9ca3af; }
    :root:not([data-theme="light"]) #tit-dash .tit-tab:hover { border-color:#2dd4bf; color:#f1f5f9; }
    :root:not([data-theme="light"]) #tit-dash .tit-tab.active { background:#0d9488; border-color:#0d9488; color:#fff; }
    :root:not([data-theme="light"]) #tit-dash .tit-tab[data-tab="aws"] .tit-brand-icon,
    :root:not([data-theme="light"]) #tit-dash [data-cat="aws"] .tit-mini-icon .tit-brand-icon { filter:brightness(0) invert(1); }
    :root:not([data-theme="light"]) #tit-dash .tit-hero,
    :root:not([data-theme="light"]) #tit-dash .tit-panel,
    :root:not([data-theme="light"]) #tit-dash .tit-hero h3,
    :root:not([data-theme="light"]) #tit-dash .tit-hero h3 a { color:#f1f5f9 !important; }
    :root:not([data-theme="light"]) #tit-dash .tit-hero h3 a:hover { color:#2dd4bf !important; }
    :root:not([data-theme="light"]) #tit-dash .tit-hero-desc { color:#9ca3af; }
    :root:not([data-theme="light"]) #tit-dash .tit-hero-badge { color:#2dd4bf; }
    :root:not([data-theme="light"]) #tit-dash .tit-hot { color:#fb923c; }
    :root:not([data-theme="light"]) #tit-dash .tit-hero-meta { color:#6b7280; }
    :root:not([data-theme="light"]) #tit-dash .tit-hero-meta .tit-src,
    :root:not([data-theme="light"]) #tit-dash .tit-hero-btn { background:#252830; border-color:#363940; color:#f1f5f9 !important; }
    :root:not([data-theme="light"]) #tit-dash .tit-hero-btn:hover { border-color:#2dd4bf; color:#2dd4bf !important; }
    :root:not([data-theme="light"]) #tit-dash .tit-panel-title,
    :root:not([data-theme="light"]) #tit-dash .tit-sec-head h3 { color:#f1f5f9 !important; }
    :root:not([data-theme="light"]) #tit-dash .tit-viewall,
    :root:not([data-theme="light"]) #tit-dash .tit-foot-link { color:#2dd4bf !important; }
    :root:not([data-theme="light"]) #tit-dash .tit-item,
    :root:not([data-theme="light"]) #tit-dash .tit-row { border-bottom-color:#2c2f38; }
    :root:not([data-theme="light"]) #tit-dash .tit-ititle a { color:#e2e8f0 !important; }
    :root:not([data-theme="light"]) #tit-dash .tit-ititle a:hover { color:#2dd4bf !important; }
    :root:not([data-theme="light"]) #tit-dash .tit-idesc { color:#9ca3af; }
    :root:not([data-theme="light"]) #tit-dash .tit-imeta { color:#6b7280; }
    :root:not([data-theme="light"]) #tit-dash .tit-imeta a { color:#6b7280 !important; }
    :root:not([data-theme="light"]) #tit-dash .tit-imeta a:hover { color:#2dd4bf !important; }
    :root:not([data-theme="light"]) #tit-dash .tit-side { color:#9ca3af; }
    :root:not([data-theme="light"]) #tit-dash .tit-up { color:#34d399; }
    :root:not([data-theme="light"]) #tit-dash .t-orange{background:#451a03;color:#fbbf24} :root:not([data-theme="light"]) #tit-dash .t-green{background:#052e16;color:#86efac}
    :root:not([data-theme="light"]) #tit-dash .t-red{background:#450a0a;color:#fca5a5} :root:not([data-theme="light"]) #tit-dash .t-blue{background:#172554;color:#93c5fd}
    :root:not([data-theme="light"]) #tit-dash .t-purple{background:#2d2250;color:#c4b5fd} :root:not([data-theme="light"]) #tit-dash .t-cyan{background:#083344;color:#67e8f9}
    :root:not([data-theme="light"]) #tit-dash .t-pink{background:#500724;color:#f9a8d4} :root:not([data-theme="light"]) #tit-dash .t-yellow{background:#422006;color:#fde047}
    :root:not([data-theme="light"]) #tit-dash .t-teal{background:#042f2e;color:#5eead4}
    :root:not([data-theme="light"]) #tit-dash .t-indigo{background:#1e1b4b;color:#a5b4fc}
    :root:not([data-theme="light"]) #tit-dash .t-neutral{background:#2c2f38;color:#cbd5e1}
    :root:not([data-theme="light"]) #tit-dash .tit-pi-orange{background:#451a03;color:#fdba74} :root:not([data-theme="light"]) #tit-dash .tit-pi-dark{background:#0b1220;color:#e2e8f0}
    :root:not([data-theme="light"]) #tit-dash .tit-pi-indigo{background:#1e1b4b;color:#a5b4fc} :root:not([data-theme="light"]) #tit-dash .tit-pi-purple{background:#2d2250;color:#c4b5fd}
    :root:not([data-theme="light"]) #tit-dash .tit-pi-yellow{background:#422006;color:#fde047} :root:not([data-theme="light"]) #tit-dash .tit-pi-cyan{background:#083344;color:#67e8f9}
    :root:not([data-theme="light"]) #tit-dash .tit-pi-red{background:#450a0a;color:#fca5a5} :root:not([data-theme="light"]) #tit-dash .tit-pi-green{background:#052e16;color:#86efac}
    :root:not([data-theme="light"]) #tit-dash .tit-pi-teal{background:#042f2e;color:#5eead4} :root:not([data-theme="light"]) #tit-dash .tit-pi-pink{background:#500724;color:#f9a8d4}
    :root:not([data-theme="light"]) #tit-dash .tit-mi-purple{background:#2d2250} :root:not([data-theme="light"]) #tit-dash .tit-mi-yellow{background:#422006} :root:not([data-theme="light"]) #tit-dash .tit-mi-cyan{background:#083344}
    :root:not([data-theme="light"]) #tit-dash .tit-mini-label { color:#9ca3af; }
    :root:not([data-theme="light"]) #tit-dash .tit-sev-critical{background:#450a0a;color:#fca5a5} :root:not([data-theme="light"]) #tit-dash .tit-sev-high{background:#431407;color:#fdba74}
    :root:not([data-theme="light"]) #tit-dash .tit-sev-medium{background:#422006;color:#fde047} :root:not([data-theme="light"]) #tit-dash .tit-sev-low{background:#172554;color:#93c5fd}
    :root:not([data-theme="light"]) #tit-dash .tit-sev-na{background:#2c2f38;color:#9ca3af}
    :root:not([data-theme="light"]) #tit-dash .tit-chev { color:#4b5563; }
    :root:not([data-theme="light"]) #tit-dash .tit-mini-tab { color:#9ca3af; border-color:#363940; }
    :root:not([data-theme="light"]) #tit-dash .tit-mini-tab:hover { color:#f1f5f9; border-color:#4b5563; }
    :root:not([data-theme="light"]) #tit-dash .tit-mini-tab.active { color:#fff; background:#0d9488; border-color:#0d9488; }
    :root:not([data-theme="light"]) #tit-dash .tit-dn-chip { background:#252830; border-color:#363940; }
    :root:not([data-theme="light"]) #tit-dash .tit-dn-chip:hover { border-color:#2dd4bf; }
    :root:not([data-theme="light"]) #tit-dash .tit-dn-name { color:#f1f5f9; }
    :root:not([data-theme="light"]) #tit-dash .tit-dn-state { color:#6b7280; }
    :root:not([data-theme="light"]) #tit-dash .tit-dn-state.st-ok { color:#34d399; }
    :root:not([data-theme="light"]) #tit-dash .tit-dn-state.st-warn { color:#fbbf24; }
    :root:not([data-theme="light"]) #tit-dash .tit-dn-state.st-bad { color:#fca5a5; }
    :root:not([data-theme="light"]) #tit-dash .tit-dn-subhead { color:#6b7280; }
    :root:not([data-theme="light"]) #tit-dash .tit-skel { background:linear-gradient(90deg,#252830 25%,#2c2f38 50%,#252830 75%); background-size:200% 100%; }
    :root:not([data-theme="light"]) #tit-dash .tit-footer { border-top-color:#363940; color:#6b7280; }
  }

  /* ── Dark Mode: Manual toggle ── */
  [data-theme="dark"] #tit-dash { color:#cbd5e1; }
  [data-theme="dark"] #tit-dash .tit-top h2 { color:#f1f5f9 !important; }
  [data-theme="dark"] #tit-dash .tit-sub { color:#9ca3af; }
  [data-theme="dark"] #tit-dash .tit-search { background:#252830; border-color:#363940; color:#f1f5f9; }
  [data-theme="dark"] #tit-dash .tit-search:focus { border-color:#2dd4bf; box-shadow:0 0 0 3px rgba(45,212,191,0.12); }
  [data-theme="dark"] #tit-dash .tit-search::placeholder { color:#6b7280; }
  [data-theme="dark"] #tit-dash .tit-search-wrap svg { stroke:#6b7280; }
  [data-theme="dark"] #tit-dash .tit-kbd { background:#1c1f26; border-color:#363940; color:#6b7280; }
  [data-theme="dark"] #tit-dash .tit-refresh-btn { background:#21242c; border-color:#363940; color:#9ca3af; }
  [data-theme="dark"] #tit-dash .tit-refresh-btn:hover { border-color:#2dd4bf; color:#2dd4bf; }
  [data-theme="dark"] #tit-dash .tit-tab { background:#21242c; border-color:#363940; color:#9ca3af; }
  [data-theme="dark"] #tit-dash .tit-tab:hover { border-color:#2dd4bf; color:#f1f5f9; }
  [data-theme="dark"] #tit-dash .tit-tab.active { background:#0d9488; border-color:#0d9488; color:#fff; }
  [data-theme="dark"] #tit-dash .tit-tab[data-tab="aws"] .tit-brand-icon,
  [data-theme="dark"] #tit-dash [data-cat="aws"] .tit-mini-icon .tit-brand-icon { filter:brightness(0) invert(1); }
  [data-theme="dark"] #tit-dash .tit-hero,
  [data-theme="dark"] #tit-dash .tit-panel,
  [data-theme="dark"] #tit-dash .tit-hero h3,
  [data-theme="dark"] #tit-dash .tit-hero h3 a { color:#f1f5f9 !important; }
  [data-theme="dark"] #tit-dash .tit-hero h3 a:hover { color:#2dd4bf !important; }
  [data-theme="dark"] #tit-dash .tit-hero-desc { color:#9ca3af; }
  [data-theme="dark"] #tit-dash .tit-hero-badge { color:#2dd4bf; }
  [data-theme="dark"] #tit-dash .tit-hot { color:#fb923c; }
  [data-theme="dark"] #tit-dash .tit-hero-meta { color:#6b7280; }
  [data-theme="dark"] #tit-dash .tit-hero-meta .tit-src,
  [data-theme="dark"] #tit-dash .tit-hero-btn { background:#252830; border-color:#363940; color:#f1f5f9 !important; }
  [data-theme="dark"] #tit-dash .tit-hero-btn:hover { border-color:#2dd4bf; color:#2dd4bf !important; }
  [data-theme="dark"] #tit-dash .tit-panel-title,
  [data-theme="dark"] #tit-dash .tit-sec-head h3 { color:#f1f5f9 !important; }
  [data-theme="dark"] #tit-dash .tit-viewall,
  [data-theme="dark"] #tit-dash .tit-foot-link { color:#2dd4bf !important; }
  [data-theme="dark"] #tit-dash .tit-item,
  [data-theme="dark"] #tit-dash .tit-row { border-bottom-color:#2c2f38; }
  [data-theme="dark"] #tit-dash .tit-ititle a { color:#e2e8f0 !important; }
  [data-theme="dark"] #tit-dash .tit-ititle a:hover { color:#2dd4bf !important; }
  [data-theme="dark"] #tit-dash .tit-idesc { color:#9ca3af; }
  [data-theme="dark"] #tit-dash .tit-imeta { color:#6b7280; }
  [data-theme="dark"] #tit-dash .tit-imeta a { color:#6b7280 !important; }
  [data-theme="dark"] #tit-dash .tit-imeta a:hover { color:#2dd4bf !important; }
  [data-theme="dark"] #tit-dash .tit-side { color:#9ca3af; }
  [data-theme="dark"] #tit-dash .tit-up { color:#34d399; }
  [data-theme="dark"] #tit-dash .t-orange{background:#451a03;color:#fbbf24} [data-theme="dark"] #tit-dash .t-green{background:#052e16;color:#86efac}
  [data-theme="dark"] #tit-dash .t-red{background:#450a0a;color:#fca5a5} [data-theme="dark"] #tit-dash .t-blue{background:#172554;color:#93c5fd}
  [data-theme="dark"] #tit-dash .t-purple{background:#2d2250;color:#c4b5fd} [data-theme="dark"] #tit-dash .t-cyan{background:#083344;color:#67e8f9}
  [data-theme="dark"] #tit-dash .t-pink{background:#500724;color:#f9a8d4} [data-theme="dark"] #tit-dash .t-yellow{background:#422006;color:#fde047}
  [data-theme="dark"] #tit-dash .t-teal{background:#042f2e;color:#5eead4}
  [data-theme="dark"] #tit-dash .t-indigo{background:#1e1b4b;color:#a5b4fc}
  [data-theme="dark"] #tit-dash .t-neutral{background:#2c2f38;color:#cbd5e1}
  [data-theme="dark"] #tit-dash .tit-pi-orange{background:#451a03;color:#fdba74} [data-theme="dark"] #tit-dash .tit-pi-dark{background:#0b1220;color:#e2e8f0}
  [data-theme="dark"] #tit-dash .tit-pi-indigo{background:#1e1b4b;color:#a5b4fc} [data-theme="dark"] #tit-dash .tit-pi-purple{background:#2d2250;color:#c4b5fd}
  [data-theme="dark"] #tit-dash .tit-pi-yellow{background:#422006;color:#fde047} [data-theme="dark"] #tit-dash .tit-pi-cyan{background:#083344;color:#67e8f9}
  [data-theme="dark"] #tit-dash .tit-pi-red{background:#450a0a;color:#fca5a5} [data-theme="dark"] #tit-dash .tit-pi-green{background:#052e16;color:#86efac}
  [data-theme="dark"] #tit-dash .tit-pi-teal{background:#042f2e;color:#5eead4} [data-theme="dark"] #tit-dash .tit-pi-pink{background:#500724;color:#f9a8d4}
  [data-theme="dark"] #tit-dash .tit-mi-purple{background:#2d2250} [data-theme="dark"] #tit-dash .tit-mi-yellow{background:#422006} [data-theme="dark"] #tit-dash .tit-mi-cyan{background:#083344}
  [data-theme="dark"] #tit-dash .tit-mini-label { color:#9ca3af; }
  [data-theme="dark"] #tit-dash .tit-sev-critical{background:#450a0a;color:#fca5a5} [data-theme="dark"] #tit-dash .tit-sev-high{background:#431407;color:#fdba74}
  [data-theme="dark"] #tit-dash .tit-sev-medium{background:#422006;color:#fde047} [data-theme="dark"] #tit-dash .tit-sev-low{background:#172554;color:#93c5fd}
  [data-theme="dark"] #tit-dash .tit-sev-na{background:#2c2f38;color:#9ca3af}
  [data-theme="dark"] #tit-dash .tit-chev { color:#4b5563; }
  [data-theme="dark"] #tit-dash .tit-mini-tab { color:#9ca3af; border-color:#363940; }
  [data-theme="dark"] #tit-dash .tit-mini-tab:hover { color:#f1f5f9; border-color:#4b5563; }
  [data-theme="dark"] #tit-dash .tit-mini-tab.active { color:#fff; background:#0d9488; border-color:#0d9488; }
  [data-theme="dark"] #tit-dash .tit-dn-chip { background:#252830; border-color:#363940; }
  [data-theme="dark"] #tit-dash .tit-dn-chip:hover { border-color:#2dd4bf; }
  [data-theme="dark"] #tit-dash .tit-dn-name { color:#f1f5f9; }
  [data-theme="dark"] #tit-dash .tit-dn-state { color:#6b7280; }
  [data-theme="dark"] #tit-dash .tit-dn-state.st-ok { color:#34d399; }
  [data-theme="dark"] #tit-dash .tit-dn-state.st-warn { color:#fbbf24; }
  [data-theme="dark"] #tit-dash .tit-dn-state.st-bad { color:#fca5a5; }
  [data-theme="dark"] #tit-dash .tit-dn-subhead { color:#6b7280; }
  [data-theme="dark"] #tit-dash .tit-skel { background:linear-gradient(90deg,#252830 25%,#2c2f38 50%,#252830 75%); background-size:200% 100%; }
  [data-theme="dark"] #tit-dash .tit-footer { border-top-color:#363940; color:#6b7280; }

  /* Keep this dashboard on the same dark palette as the shared theme.  The
   * explicit values above are retained for compatibility with older cached
   * styles, while this final scoped layer prevents the page from drifting
   * away from Home when the global palette changes. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) #tit-dash { color:var(--lb-gray-700) !important; }
    :root:not([data-theme="light"]) #tit-dash .tit-hero,
    :root:not([data-theme="light"]) #tit-dash .tit-panel { background:var(--base-3); border-color:var(--lb-gray-300); }
    :root:not([data-theme="light"]) #tit-dash .tit-search,
    :root:not([data-theme="light"]) #tit-dash .tit-refresh-btn,
    :root:not([data-theme="light"]) #tit-dash .tit-tab { background:var(--base); border-color:var(--lb-gray-300); color:var(--lb-gray-700); }
    :root:not([data-theme="light"]) #tit-dash .tit-top h2,
    :root:not([data-theme="light"]) #tit-dash .tit-hero h3,
    :root:not([data-theme="light"]) #tit-dash .tit-hero h3 a,
    :root:not([data-theme="light"]) #tit-dash .tit-panel-title,
    :root:not([data-theme="light"]) #tit-dash .tit-sec-head h3,
    :root:not([data-theme="light"]) #tit-dash .tit-dn-name { color:var(--lb-gray-900) !important; }
    :root:not([data-theme="light"]) #tit-dash .tit-ititle a { color:var(--lb-gray-800) !important; }
    :root:not([data-theme="light"]) #tit-dash .tit-hero-desc,
    :root:not([data-theme="light"]) #tit-dash .tit-idesc { color:var(--lb-gray-600); }
    :root:not([data-theme="light"]) #tit-dash .tit-imeta,
    :root:not([data-theme="light"]) #tit-dash .tit-imeta a,
    :root:not([data-theme="light"]) #tit-dash .tit-side,
    :root:not([data-theme="light"]) #tit-dash .tit-sub { color:var(--lb-gray-500) !important; }
    :root:not([data-theme="light"]) #tit-dash .tit-item,
    :root:not([data-theme="light"]) #tit-dash .tit-row,
    :root:not([data-theme="light"]) #tit-dash .tit-footer { border-color:var(--lb-gray-300); }
  }

  [data-theme="dark"] #tit-dash { color:var(--lb-gray-700) !important; }
  [data-theme="dark"] #tit-dash .tit-hero,
  [data-theme="dark"] #tit-dash .tit-panel { background:var(--base-3); border-color:var(--lb-gray-300); }
  [data-theme="dark"] #tit-dash .tit-search,
  [data-theme="dark"] #tit-dash .tit-refresh-btn,
  [data-theme="dark"] #tit-dash .tit-tab { background:var(--base); border-color:var(--lb-gray-300); color:var(--lb-gray-700); }
  [data-theme="dark"] #tit-dash .tit-top h2,
  [data-theme="dark"] #tit-dash .tit-hero h3,
  [data-theme="dark"] #tit-dash .tit-hero h3 a,
  [data-theme="dark"] #tit-dash .tit-panel-title,
  [data-theme="dark"] #tit-dash .tit-sec-head h3,
  [data-theme="dark"] #tit-dash .tit-dn-name { color:var(--lb-gray-900) !important; }
  [data-theme="dark"] #tit-dash .tit-ititle a { color:var(--lb-gray-800) !important; }
  [data-theme="dark"] #tit-dash .tit-hero-desc,
  [data-theme="dark"] #tit-dash .tit-idesc { color:var(--lb-gray-600); }
  [data-theme="dark"] #tit-dash .tit-imeta,
  [data-theme="dark"] #tit-dash .tit-imeta a,
  [data-theme="dark"] #tit-dash .tit-side,
  [data-theme="dark"] #tit-dash .tit-sub { color:var(--lb-gray-500) !important; }
  [data-theme="dark"] #tit-dash .tit-item,
  [data-theme="dark"] #tit-dash .tit-row,
  [data-theme="dark"] #tit-dash .tit-footer { border-color:var(--lb-gray-300); }