/* assets/style.css */

/* Match Support Admin surface/background while keeping existing portal look */
:root{
  --bg:#F6F8F5;
  --ink:#0e1116;
  --muted:#5b6472;
  --line:#e7ecf3;
  --brand:#2563eb;
  --brand-ink:#fff;
  --card:#fff;

  /* Support-admin-like header colors */
  --topbar-bg:#0b1220;
  --topbar-fg:#cbd5e1;

  /* Category accents (for home page) */
  --labs:#2563eb;
  --play:#10b981;
  --web3:#8b5cf6;
  --apps:#ec4899;

  /* RGB helpers (for tinted backgrounds without random colors) */
  --labs-rgb: 37 99 235;
  --play-rgb: 16 185 129;
  --web3-rgb: 139 92 246;
  --apps-rgb: 236 72 153;

  /* Premium UI tokens */
  --shadow-sm: 0 8px 20px rgba(2,6,23,.06);
  --shadow-md: 0 14px 34px rgba(2,6,23,.10);
  --ring: 0 0 0 6px rgba(37,99,235,.10);
  --radius-xl: 16px;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  min-height:100%;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.55 ui-sans-serif,system-ui,Segoe UI,Roboto,Ubuntu,Arial,sans-serif
}
body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main.wrap{
  width:100%;
  flex:1 0 auto;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

/* =============================== */
/* Header: 2-row like Support Admin */
/* =============================== */

.topbar{
  position:sticky;
  top:0;
  z-index:10;

  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "brand auth"
    "nav   nav";

  padding:0;
  background:var(--bg);
  color:var(--ink);
  border-bottom:0;
}

/* Row 1 (masthead) */
.topbar .brand{
  grid-area:brand;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 18px;
  min-width:0;
}

.topbar .brand a{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  color:var(--ink);
  letter-spacing:.2px;
  text-decoration:none;
  min-width:0;
}
.topbar .brand a:hover{ text-decoration:underline; }

.topbar .brand .brand-logo{
  height:44px;
  width:auto;
  max-width:220px;
  display:block;
  object-fit:contain;
}
.topbar .brand .brand-name{
  display:inline-block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Right side auth area */
.topbar .authbox{
  grid-area:auth;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  padding:12px 18px;
  min-width:0;
  white-space:nowrap;
}

/* Row 2 (tabs bar): black, tabs start left */
.topbar .nav{
  grid-area:nav;

  display:flex;
  align-items:center;
  justify-content:flex-start;

  gap:20px;
  padding:10px 18px;
  background:var(--topbar-bg);
  color:var(--topbar-fg);
  border-top:1px solid rgba(10,16,34,0.12);
}

/* Tabs look like Support Admin */
.topbar .nav a{
  margin:0;
  color:var(--topbar-fg);

  opacity:.88;
  font-size:14px;
  font-weight:600;
  letter-spacing:.2px;

  padding:10px 2px;

  border-bottom:2px solid transparent;
  text-decoration:none;

  transition: opacity .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}

.topbar .nav a:hover{
  opacity:1;
  transform: translateY(-1px);
  text-decoration:none;
}

.topbar .nav a:focus-visible{
  outline:2px solid rgba(255,255,255,.35);
  outline-offset:3px;
  border-radius:8px;
}

.topbar .nav a.active,
.topbar .nav a[aria-current="page"]{
  opacity:1;
  color:#fff;
  border-bottom-color: rgba(255,255,255,.70);
}

.topbar .nav{ flex-wrap:wrap; }

/* ======================= */
/* Buttons / shared styles */
/* ======================= */

.btn{
  border:1px solid var(--line);
  background:#fff;
  color:#111;
  padding:12px 16px;
  border-radius:10px;
  cursor:pointer;
  font-weight:800;
  letter-spacing:.1px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, filter .15s ease;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  text-decoration:none;
}
.btn:active{ transform: translateY(0px); box-shadow: none; }

.btn.small{padding:8px 10px;font-size:14px}
.btn.tiny{padding:4px 8px;font-size:12px}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{ filter: brightness(.98); }
.btn[disabled]{opacity:.6;cursor:not-allowed}

.btn.ghost{background:#fff;border:1px solid #e5e7eb;color:#111}
.btn.ghost:hover{background:#f9fafb}

/* typography / layout */
.muted{color:var(--muted)}
.wrap{max-width:1100px;margin:28px auto;padding:0 18px}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:22px;
}

.note{font-size:13px;color:var(--muted)}

/* ====================================================== */
/* Page alignment standardization (match Knowledge Base)   */
/* ====================================================== */
body.page-kb main.wrap,
body.page-licenses main.wrap,
body.page-cases main.wrap,
body.page-contact main.wrap,
body.page-home main.wrap,
body.page-products main.wrap{
  max-width:none;
  width:100%;
  margin:12px 0;
  padding:0 18px;
}
body.page-kb main.wrap > .card,
body.page-licenses main.wrap > .card,
body.page-cases main.wrap > .card,
body.page-contact main.wrap > .card,
body.page-home main.wrap > .card,
body.page-products main.wrap > .card{
  width:100%;
}
body.page-kb main.wrap > .card > h1,
body.page-licenses main.wrap > .card > h1,
body.page-cases main.wrap > .card > h1,
body.page-contact main.wrap > .card > h1,
body.page-home main.wrap > .card > h1,
body.page-products main.wrap > .card > h1{
  margin:0;
}

/* HOME: premium centered width (enterprise feel) */
body.page-home main.wrap{
  max-width: 1440px;
  margin: 18px auto;
  padding: 0 20px;
}

/* Hero */
.hero h1{font-size:44px;margin:6px 0 10px;font-weight:900;line-height:1.06;letter-spacing:-.02em}
.hero p{font-size:16px;color:var(--muted)}
.hero .cta{margin-top:10px}

/* Category row */
.row{display:flex;align-items:center;gap:12px;margin:22px 0}
select.input{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff}

/* Products grid */
.grid2{display:grid;gap:18px;grid-template-columns:1fr 1fr}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}
.panel h2{margin:2px 0 12px}
.tilewrap{display:flex;gap:12px;flex-wrap:wrap}
.price-tile{flex:1 1 180px;min-width:180px;border:1px solid var(--line);border-radius:12px;padding:14px 14px;background:#fff}
.price-tile h4{margin:0 0 4px}
.price{font-weight:800}
.center{display:flex;justify-content:center;margin-top:12px}

/* Footer contact */
.footer{margin-top:28px}

/* Modal */
.cr-modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(0,0,0,.5);z-index:9999;padding:16px}
/* ✅ CSP-safe show/hide: avoid inline style mutations */
.cr-modal[aria-hidden="false"]{display:grid}
.cr-modal.is-open{display:grid}
/* ✅ FIX (Option A): wider modal + viewport-safe height + internal scroll (footer always reachable) */
.cr-sheet{
  max-width:960px;
  width:100%;
  background:#fff;
  border-radius:14px;
  box-shadow:0 10px 40px rgba(0,0,0,.25);
  overflow:hidden;

  max-height:calc(100vh - 32px);
  display:flex;
  flex-direction:column;
}
.cr-hd{padding:18px 20px;border-bottom:1px solid #e6e6e6}
.cr-tt{margin:0;font:600 20px/1.2 ui-sans-serif,system-ui}
.cr-modal-text{font-size:14px;line-height:1.45;color:var(--muted);white-space:pre-wrap;padding:12px 20px 14px}
/* ✅ body scrolls */
.cr-body{
  padding:6px 0;
  flex:1 1 auto;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.cr-row{display:flex;justify-content:space-between;gap:16px;padding:12px 20px;border-top:1px solid #eee}
.cr-row:first-child{border-top:0}
.cr-total{font-size:18px;font-weight:800}
/* ✅ footer pinned (no scroll) */
.cr-ft{display:flex;gap:10px;justify-content:flex-end;padding:14px 20px;border-top:1px solid #e6e6e6;background:#fafafa;flex:0 0 auto}
.cr-btn{border:1px solid #ddd;background:#fff;color:#111;padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:700}
.cr-btn.primary{background:#0d6efd;border-color:#0d6efd;color:#fff}
.lbl{display:block;font-size:13px;color:#555;margin:8px 0 6px}

/* ✅ FIX: ensure inputs have readable text everywhere */
.input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid #ddd;background:#fff;color:var(--ink)}

.choice{display:flex;gap:10px;flex-wrap:wrap}
.chip{display:inline-flex;gap:8px;align-items:center;border:1px solid #ddd;border-radius:999px;padding:8px 12px;background:#fff}
.warn{color:#b23;font-weight:600;margin-left:6px}

/* Grid helpers */
.grid3{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(max-width:720px){.grid3{grid-template-columns:1fr} .cr-row{flex-direction:column;gap:4px}}

/* Professional alignment for new two-column rows */
.row.two{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}

/* Option B: allow a single-column metadata row (used by cases detail) */
.row.two.single{ grid-template-columns:1fr; }
.row.two .col{display:flex;flex-direction:column;gap:6px}
@media (max-width: 640px){ .row.two{grid-template-columns:1fr} }

/* Ensure specific rows span full width under the grid3 container */
.grid3 > .full{ grid-column: 1 / -1; }

/* Auth modal spacing (same look as our message modal) */
#authModal .cr-sheet { max-width: 720px; border-radius: 14px; overflow: hidden; }
#authModal .cr-hd    { padding: 18px 26px; }
#authModal .cr-body  { padding: 18px 30px 14px 30px; }
#authModal .cr-ft    { padding: 14px 22px; display:flex; justify-content:flex-end; gap: 10px; }

/* Slightly nicer label/input spacing inside the modal */
#authModal .lbl   { display:block; margin: 2px 0 6px; }
#authModal .input { padding: 10px 12px; }

/* Auth button: match header styling (support both placements) */
.nav #authAction,
.authbox #authAction{
  background:#0b0f16;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.15);
  padding:6px 14px;
  border-radius:10px;
}
.nav #authAction:hover,
.authbox #authAction:hover{ opacity:.92; box-shadow:none; transform:none; }
.nav #authAction:focus,
.authbox #authAction:focus{ outline:2px solid rgba(255,255,255,.35); outline-offset:2px; }

/* --- User dropdown (header) --- */
.nav .userwrap,
.authbox .userwrap{ position:relative; display:flex; align-items:center; }

#authAction.userbtn{
  display:flex; align-items:center; gap:8px;
  background:#0b0f16; color:#fff !important;
  border:1px solid rgba(255,255,255,.15);
  padding:6px 12px; border-radius:999px; cursor:pointer;
}
#authAction .avatar{
  width:22px; height:22px; border-radius:999px;
  background:#334155; color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:12px;
}
#authAction .name{
  max-width:140px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#authAction .caret{
  font-size:16px;
  opacity:.9;
  margin-left:6px;
  display:inline-block;
  line-height:1;
  transform: translateY(1px);
}

/* Dropdown: Settings + Logout */
#userMenu{
  position:absolute; right:0; top:calc(100% + 8px);
  min-width:180px; background:#0b1220; color:#cbd5e1;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px; box-shadow:0 16px 40px rgba(0,0,0,.35);
  padding:6px; display:none; z-index:1000;
}
#userMenu.open{ display:block; }
#userMenu button{
  display:block; width:100%; text-align:left;
  padding:10px; border:0; background:none; color:#cbd5e1;
  border-radius:8px; cursor:pointer;
}
#userMenu button:hover{ background:rgba(255,255,255,.06); color:#fff; }

/* Show "Licenses" only when signed in */
html.auth-out .hide-when-out { display: none !important; }
html.auth-in  .hide-when-out { display: inline-block; }

/* ============================= */
/* License Manager enhancements  */
/* ============================= */

.tag{ display:inline-block; padding:3px 8px; border-radius:999px; border:1px solid var(--line); background:#f8fafc; font-size:12px; }
.tag.on  { background:#e8f8ee; border-color:#bfe5cd; color:#0a7a31; }
.tag.off { background:#fdeeee; border-color:#f5c2c2; color:#a11718; }

.page-licenses .wrap{ max-width:100%; }
.page-licenses .lic-wrap.card{ overflow:visible; }

body.page-licenses .muted-sm{ color:#5b6472; font-size:12px; }
body.page-licenses .tight{ margin-top:10px; }
body.page-licenses .right{ text-align:right; }
body.page-licenses .err{ color:#b23; }

body.page-licenses .toolbar{ margin:10px 0 0; }

/* FIX: toolbar rows spacing + standardized button sizing */
body.page-licenses .toolbar.stack{
  display:flex;
  flex-direction:column;
  gap:10px;
}
body.page-licenses .toolrow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
body.page-licenses .toolrow .tool{
  min-width:160px; /* makes Renew/Add/Connect consistent */
}

/* Licenses table */
body.page-licenses table.lic { width:100%; border-collapse:collapse; background:#fff; }
body.page-licenses table.lic th,
body.page-licenses table.lic td {
  border-top:1px solid #e7ecf3;
  padding:10px 8px;
  text-align:left;
  vertical-align:top;
  white-space:nowrap;
}
body.page-licenses table.lic thead th { border-top:0; font-weight:700; font-size:13px; color:#5b6472; }
body.page-licenses table.lic tbody td { font-size:14px; }
body.page-licenses table.lic code {
  background:#f3f6fb;
  border:1px solid #e7ecf3;
  padding:2px 6px;
  border-radius:6px;
  white-space:nowrap;
}

/* Column widths */
body.page-licenses .col-radio{width:28px}
body.page-licenses .col-lic{width:320px}
body.page-licenses .col-aws{width:140px}
body.page-licenses .col-type{width:80px}
body.page-licenses .col-plan{width:120px}
body.page-licenses .col-status{width:110px}
body.page-licenses .col-zones{width:120px;text-align:right}
body.page-licenses .col-usage{width:100px;text-align:right}
body.page-licenses .col-region{width:110px}
body.page-licenses .col-issued{width:190px}
body.page-licenses .col-from{width:190px}
body.page-licenses .col-until{width:190px}
body.page-licenses .col-order{width:130px}
body.page-licenses .col-renew{width:240px}
body.page-licenses .col-dl{width:120px}

/* Add-on modal (licenses page) */
body.page-licenses .addon-modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(0,0,0,.35);z-index:9999}
body.page-licenses .addon-card{background:#fff;min-width:640px;max-width:720px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.15);overflow:hidden}
body.page-licenses .addon-hd{padding:20px 24px;border-bottom:1px solid #e7ecf3}
body.page-licenses .addon-bd{padding:16px 24px}
body.page-licenses .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
body.page-licenses .kv-hint{font-size:12px;color:#5b6472}
body.page-licenses .addon-ft{padding:16px 24px;display:flex;justify-content:flex-end;gap:10px;border-top:1px solid #e7ecf3}
body.page-licenses .addon-input{width:160px;padding:8px 10px;border:1px solid #e7ecf3;border-radius:8px}
body.page-licenses .addon-err{color:#b91c1c;display:none;margin-top:6px}
body.page-licenses .invalid{border-color:#b91c1c}

body.page-licenses .addon-summary-card{border:1px solid #e7ecf3;background:#f9fbff;border-radius:12px;padding:16px 18px;font-size:15px;line-height:1.55;min-height:250px}
body.page-licenses .addon-summary-note{padding:10px 12px;border:1px solid #fde2e1;background:#fff5f5;color:#991b1b;border-radius:10px;margin-bottom:12px}
body.page-licenses .addon-summary-title{font-weight:700;margin-bottom:8px;font-size:16px;color:#111827}
body.page-licenses .addon-summary-row{color:#374151;font-size:15px;margin-bottom:10px}
body.page-licenses .addon-summary-subtle{color:#6b7280}
body.page-licenses .addon-summary-total{font-size:16px;margin-top:10px;color:#111827}
body.page-licenses .addon-summary-status{min-height:20px;margin-top:12px;font-size:14px;color:#6b7280}
body.page-licenses .addon-summary-status.is-loading{color:#374151}
body.page-licenses .addon-summary-status.is-error{color:#b91c1c}

/* Terraform modal (licenses page) */
body.page-licenses .tf-modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(0,0,0,.35);z-index:9999}
body.page-licenses .tf-card{background:#fff;min-width:640px;max-width:760px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.15);overflow:hidden}
body.page-licenses .tf-hd{padding:20px 24px;border-bottom:1px solid #e7ecf3;display:flex;align-items:center;justify-content:space-between;gap:12px}
body.page-licenses .tf-bd{padding:16px 24px}
body.page-licenses .tf-ft{padding:16px 24px;display:flex;justify-content:flex-end;gap:10px;border-top:1px solid #e7ecf3}
body.page-licenses .tf-snippet{width:100%;min-height:160px;resize:vertical;padding:10px 12px;border:1px solid #e7ecf3;border-radius:10px;font-family:ui-monospace, SFMono-Regular, Menlo, monospace;font-size:12.5px;line-height:1.35;background:#fbfcff}
body.page-licenses .tf-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0 12px}
body.page-licenses .tf-kv{padding:10px 12px;border:1px solid #e7ecf3;border-radius:10px;background:#fff}
body.page-licenses .tf-kv .k{font-size:12px;color:#5b6472;margin-bottom:4px}
body.page-licenses .tf-kv .v{font-family:ui-monospace, SFMono-Regular, Menlo, monospace}

/* ===== Expiry banner (site-wide, single-row, left-aligned with brand) ===== */
.notice-banner{
  background:#b91c1c;
  color:#fff;
  border-bottom:1px solid #0003;
}
.notice-banner .inner{
  padding:6px 18px;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:nowrap;
  white-space:nowrap;
  line-height:1.25;
}
.notice-banner strong{ font-weight:800; }

/* ✅ FIX: cases.html has body.page-cases .msg which was overriding this banner .msg */
.notice-banner .msg{
  flex:1 1 auto;
  overflow:hidden;
  text-overflow:ellipsis;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;

  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* ✅ FIX: Force the banner “message” to stay RED even if it is rendered as an input/textarea/.input */
.notice-banner .input,
.notice-banner input,
.notice-banner textarea{
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  outline: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.notice-banner .cta{
  flex:0 0 auto;
  color:#111; text-decoration:none; background:#fff; border:1px solid #fff; border-radius:10px; padding:6px 10px; font-weight:700;
}
.notice-banner .cta:hover{ text-decoration:underline; }
.notice-banner .close{
  flex:0 0 auto;
  background:transparent; color:#fff; border:0; cursor:pointer;
  font-weight:700; font-size:18px; line-height:1; opacity:.9;
}
.notice-banner .close:hover{ opacity:1; }

.is-hidden{ display:none !important; }

.expiring-soon{ color:#b91c1c; font-weight:800; }
.status-expired{ color:#b91c1c; font-weight:800; }

/* ========================================================= */
/* Sign-up form: force Email/Password/Confirm into 1 column */
/* ========================================================= */

.auth-form--signup{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.auth-form--signup label{ display:block; margin:2px 0 6px; font-weight:500; }
.auth-form--signup input[type="email"],
.auth-form--signup input[type="password"]{ width:100%; box-sizing:border-box; }
.auth-form--signup .row.two{ grid-template-columns:1fr; }
.auth-form--signup .actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

/* Cognito Hosted UI / Amplify Authenticator (safe, scoped selectors) */
[id*="signUp"] form,
[data-amplify-authenticator][data-state="signUp"] form{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:12px !important;
}
[id*="signUp"] form label,
[data-amplify-authenticator][data-state="signUp"] form label{
  display:block !important;
  margin:2px 0 6px !important;
}
[id*="signUp"] form input,
[data-amplify-authenticator][data-state="SignUp"] form input,
[data-amplify-authenticator][data-state="signUp"] form input{
  width:100% !important;
  box-sizing:border-box !important;
}
[id*="signUp"] form .amplify-flex,
[data-amplify-authenticator][data-state="signUp"] form .amplify-flex{
  display:block !important;
}
[id*="signUp"] form .amplify-button-group,
[data-amplify-authenticator][data-state="signUp"] form .amplify-button-group{
  display:flex !important;
  gap:10px !important;
  justify-content:flex-end !important;
  flex-wrap:wrap !important;
}

/* =============================== */
/* Contact page: premium form width */
/* =============================== */

body.page-contact main.wrap{
  max-width: 980px;
  width: 100%;
  margin: 12px auto;
  padding: 0 18px;
}
body.page-contact main.wrap > .card{ width: 100%; }
body.page-contact .contact-form{
  max-width: 780px;
  margin: 14px auto 0;
}
body.page-contact .contact-actions{
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* ======================================================= */
/* HOME PAGE (scoped) — more colourful, premium, enterprise */
/* ======================================================= */

/* Home background lift (subtle, vendor-grade) */
body.page-home{
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(37,99,235,.08), transparent 55%),
    radial-gradient(900px 520px at 90% 10%, rgba(139,92,246,.07), transparent 58%),
    radial-gradient(900px 520px at 70% 120%, rgba(236,72,153,.06), transparent 60%),
    var(--bg);
}

body.page-home .home-hero{
  position:relative;
  overflow:hidden;
  border-color: rgba(203,213,225,.65);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

/* strong but tasteful gradient + subtle texture */
body.page-home .home-hero:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 420px at 8% 18%, rgba(37,99,235,.18), transparent 62%),
    radial-gradient(820px 420px at 58% 8%, rgba(139,92,246,.15), transparent 62%),
    radial-gradient(820px 420px at 92% 22%, rgba(236,72,153,.13), transparent 62%),
    radial-gradient(760px 520px at 40% 120%, rgba(16,185,129,.10), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.72));
  pointer-events:none;
}

/* texture overlay (very subtle) */
body.page-home .home-hero:after{
  content:"";
  position:absolute;
  inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity:.12;
  pointer-events:none;
}

body.page-home .home-hero > *{ position:relative; }

/* IMPORTANT: match left/right height (stretch columns) */
body.page-home .home-hero__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:18px;
  align-items:stretch; /* CHANGED (was start): make columns same height */
}
@media(max-width: 980px){
  body.page-home .home-hero__grid{ grid-template-columns: 1fr; }
}

/* Let both columns participate in full-height layout */
body.page-home .home-hero__copy{
  display:flex;
  flex-direction:column;
}
body.page-home .home-hero__panel{
  display:flex;
}
body.page-home .home-hero__panel .panel-card{
  flex:1;
  height:100%;
}

body.page-home .home-pill{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(231,236,243,.9);
  color:#0b1220;
  font-weight:900;
  font-size:12px;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
}

body.page-home .home-pill .dot{
  width:10px; height:10px; border-radius:999px;
  background:linear-gradient(135deg, var(--labs), var(--web3));
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

/* Subtle “live” pulse so Available now is noticeable (not distracting) */
body.page-home .home-pill .dot-live{ position:relative; }
body.page-home .home-pill .dot-live:after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:999px;
  background: rgba(37,99,235,.18);
  animation: crPulse 2.4s ease-out infinite;
}
@keyframes crPulse{
  0%   { transform: scale(.55); opacity:.55; }
  60%  { transform: scale(1.35); opacity:0; }
  100% { transform: scale(1.35); opacity:0; }
}

body.page-home .home-pill .pill-sub{
  margin-left:2px;
  font-weight:950;
  color: rgba(15,23,42,.78);
  border:1px solid rgba(37,99,235,.18);
  padding:4px 10px;
  border-radius:999px;
  background:
    linear-gradient(90deg,
      rgba(37,99,235,.10),
      rgba(139,92,246,.08),
      rgba(236,72,153,.08),
      rgba(37,99,235,.10)
    );
  background-size: 240% 100%;
  animation: crSheen 7.5s ease-in-out infinite;
  box-shadow: 0 10px 22px rgba(2,6,23,.06);
}

@keyframes crSheen{
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

body.page-home .home-pill .pill-sub__link{
  font-weight:950;
  color: rgba(15,23,42,.86);
  text-decoration:none;
  border-bottom: 1px solid rgba(37,99,235,.22);
  padding-bottom: 1px;
}
body.page-home .home-pill .pill-sub__link:hover{
  text-decoration:none;
  border-bottom-color: rgba(37,99,235,.40);
}

/* Respect accessibility: disable motion if user prefers reduced motion */
@media (prefers-reduced-motion: reduce){
  body.page-home .home-pill .dot-live:after{ animation:none; }
  body.page-home .home-pill .pill-sub{ animation:none; }
}

body.page-home .home-sub{
  max-width: 72ch;
  margin: 10px 0 14px;
}

body.page-home .home-cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 12px 0 12px;
}

/* Enterprise-grade primary button (home only) */
body.page-home .home-primary{
  border:0;
  color:#fff;
  background: linear-gradient(90deg, rgba(37,99,235,1), rgba(139,92,246,1), rgba(236,72,153,1));
  box-shadow: 0 18px 40px rgba(2,6,23,.14);
}
body.page-home .home-primary:hover{
  filter: brightness(.985);
  transform: translateY(-1px);
}
body.page-home .home-primary:focus-visible{
  outline:none;
  box-shadow: 0 18px 40px rgba(2,6,23,.14), var(--ring);
}

/* Secondary (category-tinted) button in hero */
body.page-home .home-secondary{
  font-weight:900;
}
body.page-home .home-secondary--labs{
  border-color: rgba(37,99,235,.22);
  background: rgb(var(--labs-rgb) / 0.10);
  color:#0b2a7a;
}
body.page-home .home-secondary--labs:hover{
  background: rgb(var(--labs-rgb) / 0.14);
}

/* Hero category chips */
body.page-home .home-chips{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 10px;
}
body.page-home .chiplink{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  border:1px solid rgba(231,236,243,.95);
  background:rgba(255,255,255,.82);
  color:#111;
  text-decoration:none;
  backdrop-filter: blur(10px);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
body.page-home .chiplink:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(2,6,23,.10);
  text-decoration:none;
}

/* Tinted category backgrounds (like your screenshots) */
body.page-home .chiplink--labs{
  border-color: rgba(37,99,235,.28);
  background: rgb(var(--labs-rgb) / 0.10);
}
body.page-home .chiplink--play{
  border-color: rgba(16,185,129,.28);
  background: rgb(var(--play-rgb) / 0.10);
}
body.page-home .chiplink--web3{
  border-color: rgba(139,92,246,.28);
  background: rgb(var(--web3-rgb) / 0.10);
}
body.page-home .chiplink--apps{
  border-color: rgba(236,72,153,.28);
  background: rgb(var(--apps-rgb) / 0.10);
}

body.page-home .home-hero__panel .panel-card{
  background:rgba(255,255,255,.86);
  border:1px solid rgba(231,236,243,.95);
  border-radius: var(--radius-xl);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
}

body.page-home .panel-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
body.page-home .panel-title{
  font-weight:950;
  letter-spacing:.2px;
}

body.page-home .panel-badge{
  font-size:12px;
  font-weight:950;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(37,99,235,.20);
  background: rgb(var(--labs-rgb) / 0.12);
  color:#0b2a7a;
}

body.page-home .panel-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top: 2px;
}
body.page-home .panel-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px;
  border:1px solid rgba(231,236,243,.95);
  border-radius:14px;
  background:rgba(255,255,255,.92);
  transition: transform .15s ease, box-shadow .15s ease;
}
body.page-home .panel-row:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

body.page-home .panel-ic{
  width:26px; height:26px;
  border-radius:10px;
  display:grid; place-items:center;
  background:rgba(16,185,129,.12);
  border:1px solid rgba(16,185,129,.20);
  color:#0a7a31;
  font-weight:950;
  flex:0 0 auto;
}
body.page-home .panel-h{ font-weight:950; }
body.page-home .panel-s{ font-size:12px; color:var(--muted); margin-top:2px; }

body.page-home .panel-divider{
  height:1px;
  background:rgba(231,236,243,.95);
  margin: 2px 0 0;
}

body.page-home .home-section{ margin-top: 18px; }
body.page-home .home-hd{ padding: 6px 2px 12px; }
body.page-home .home-hd h2{
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 950;
}

/* Category cards (4 across, responsive) */
body.page-home .line-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
}
@media(max-width: 1180px){
  body.page-home .line-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media(max-width: 720px){
  body.page-home .line-grid{ grid-template-columns: 1fr; }
}

body.page-home .line-card{
  position:relative;
  overflow:hidden;
  border-radius: var(--radius-xl);
  padding:18px;
  border-color: rgba(231,236,243,.95);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
}
body.page-home .line-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
body.page-home .line-card:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.95;
  pointer-events:none;
}
body.page-home .line-card > *{ position:relative; }

body.page-home .line-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
body.page-home .line-kicker{
  font-weight:950;
  font-size:14px;
}
body.page-home .line-tag{
  font-size:12px;
  font-weight:950;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(231,236,243,.95);
}
body.page-home .line-title{
  font-weight:950;
  margin: 0 0 8px;
  font-size:16px;
}
body.page-home .line-note{
  color: var(--muted);
  font-size:13px;
  margin-bottom: 12px;
}
body.page-home .line-links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Category background gradients */
body.page-home .line-card--labs:before{
  background:
    radial-gradient(700px 260px at 12% 20%, rgba(37,99,235,.18), transparent 60%),
    radial-gradient(700px 280px at 88% 10%, rgba(37,99,235,.10), transparent 65%);
}
body.page-home .line-card--play:before{
  background:
    radial-gradient(700px 260px at 12% 20%, rgba(16,185,129,.18), transparent 60%),
    radial-gradient(700px 280px at 88% 10%, rgba(16,185,129,.10), transparent 65%);
}
body.page-home .line-card--web3:before{
  background:
    radial-gradient(700px 260px at 12% 20%, rgba(139,92,246,.18), transparent 60%),
    radial-gradient(700px 280px at 88% 10%, rgba(139,92,246,.10), transparent 65%);
}
body.page-home .line-card--apps:before{
  background:
    radial-gradient(700px 260px at 12% 20%, rgba(236,72,153,.18), transparent 60%),
    radial-gradient(700px 280px at 88% 10%, rgba(236,72,153,.10), transparent 65%);
}

/* CTA strip */
body.page-home .home-ctaStrip{
  margin-top: 18px;
  border-color: rgba(231,236,243,.95);
  border-radius: var(--radius-xl);
  position:relative;
  overflow:hidden;
  box-shadow: var(--shadow-sm);
}
body.page-home .home-ctaStrip:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 420px at 10% 30%, rgba(37,99,235,.14), transparent 60%),
    radial-gradient(900px 420px at 92% 20%, rgba(236,72,153,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  pointer-events:none;
}
body.page-home .home-ctaStrip > *{ position:relative; }
body.page-home .home-ctaStrip__grid{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
body.page-home .home-ctaStrip__grid h2{
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 950;
}
body.page-home .home-ctaStrip__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Trust row clamp (prevents huge SVG icons) */
body.page-home .home-trust{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
  margin: 10px 0 6px;
}
@media(max-width: 980px){
  body.page-home .home-trust{ grid-template-columns: 1fr; }
}
body.page-home .trust-item{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 12px;
  border-radius: var(--radius-xl);
  background:rgba(255,255,255,.86);
  border:1px solid rgba(231,236,243,.95);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
}
body.page-home .trust-ic{
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:12px;
  background:rgba(15,23,42,.03);
  border:1px solid rgba(15,23,42,.08);
  flex:0 0 auto;
  color:#334155;
}
body.page-home .trust-ic svg,
body.page-home .trust-ic .ic{
  width:20px !important;
  height:20px !important;
  max-width:20px !important;
  max-height:20px !important;
  display:block;
}
body.page-home .trust-h{ font-weight:950; }
body.page-home .trust-s{ font-size:12px; color:var(--muted); margin-top:2px; }

/* ======================================================= */
/* Footer (vendor-grade)                                    */
/* ======================================================= */

.site-footer{
  width:100%;
  margin-top:32px;
  background:#0b1220;
  color:#cbd5e1;
  flex-shrink:0;
}
.site-footer__inner{
  max-width:1440px;
  margin:0 auto;
  padding:32px 24px 24px;
  display:grid;
  grid-template-columns:minmax(320px,1.1fr) minmax(520px,.9fr);
  gap:32px;
  align-items:start;
}
@media(max-width: 980px){
  .site-footer__inner{ grid-template-columns: 1fr; gap:24px; }
}
.foot-brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:0;
  min-width:0;
}
.foot-name{
  font-weight:950;
  font-size:16px;
  letter-spacing:.2px;
  color:#fff;
}
.foot-sub{
  margin-top:8px;
  color:rgba(203,213,225,.85);
  font-size:13px;
  line-height:1.65;
  max-width:620px;
}
.site-footer .foot-follow{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  margin-top:16px;
  flex-wrap:wrap;
}
.site-footer .foot-follow__label{
  font-size:13px;
  font-weight:900;
  letter-spacing:.2px;
  color:rgba(203,213,225,.88);
}
.site-footer .social-ic{
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:#f8fafc;
  text-decoration:none;
  transition:transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.site-footer .social-ic:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.26);
  box-shadow:0 10px 24px rgba(2,6,23,.22);
}
.site-footer .social-ic:active{
  transform:translateY(0);
  background:rgba(255,255,255,.12);
}
.site-footer .social-ic:focus-visible{
  outline:2px solid rgba(96,165,250,.9);
  outline-offset:2px;
}
.site-footer .social-ic svg{
  width:16px;
  height:16px;
}
.site-footer .gh-circle{
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
}
.site-footer .gh-mark{
  fill:currentColor;
}
.foot-cols{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:28px;
  align-items:start;
}
@media(max-width: 980px){
  .foot-cols{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap:20px; }
}
@media(max-width: 640px){
  .foot-cols{ grid-template-columns: 1fr; }
}
.foot-col{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}
.foot-h{
  font-weight:950;
  font-size:13px;
  color:#fff;
  margin-bottom:2px;
}
.foot-a{
  display:block;
  color:rgba(226,232,240,.92);
  font-size:13px;
  line-height:1.55;
  text-decoration:none;
}
.foot-a:hover{ text-decoration:underline; color:#fff; }
.foot-muted{
  color:rgba(226,232,240,.88);
  font-size:13px;
  line-height:1.55;
}
.foot-muted a{
  color:inherit;
  text-decoration:none;
}
.foot-muted a:hover{ text-decoration:underline; color:#fff; }
.site-footer__bar{
  border-top:1px solid rgba(255,255,255,.08);
  padding:12px 24px 14px;
}
.site-footer__bar > div{
  max-width:1440px;
  margin:0 auto;
  font-size:12px;
  color:rgba(203,213,225,.78);
}


/* =============================== */
/* CASES (scoped) — UI polish      */
/* =============================== */

/* Monospace helper used by cases.ui.js */
body.page-cases .mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
}

/* Cases table */
body.page-cases table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}

body.page-cases thead th{
  text-align:left;
  font-size:12px;
  color:var(--muted);
  font-weight:800;
  letter-spacing:.2px;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.6);
}

body.page-cases tbody td{
  padding:12px;
  border-bottom:1px solid rgba(231,236,243,.95);
  vertical-align:top;
}

body.page-cases tbody tr:hover td{
  background:rgba(2,6,23,.02);
}

body.page-cases a.case-link{
  font-weight:950;
  text-decoration:none;
}

body.page-cases #casesEmpty{
  padding:16px 0;
  color:var(--muted);
}

/* Severity pills */
body.page-cases .pill{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  font-size:12px;
  font-weight:950;
  background:#fff;
}
body.page-cases .sev-s1{ background:rgba(185,28,28,.10); border-color:rgba(185,28,28,.20); color:#8a1414; }
body.page-cases .sev-s2{ background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.22); color:#8a5a00; }
body.page-cases .sev-s3{ background:rgba(37,99,235,.10); border-color:rgba(37,99,235,.18); color:#0b2a7a; }
body.page-cases .sev-s4{ background:rgba(16,185,129,.10); border-color:rgba(16,185,129,.18); color:#0a7a31; }

/* ✅ Status pill — UPDATED to match 2026-02 model + cases.ui.js classes */
body.page-cases .status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:950;
  border:1px solid var(--line);
  background:#fff;
}
body.page-cases .status .dot{
  width:8px;height:8px;border-radius:999px;
  background:#94a3b8;
}

/* NEW */
body.page-cases .status.new{
  background:rgba(37,99,235,.10);
  border-color:rgba(37,99,235,.18);
  color:#0b2a7a;
}
body.page-cases .status.new .dot{ background:rgba(37,99,235,1); }

/* WAITING_ON_CUSTOMER (action required) */
body.page-cases .status.waitcust{
  background:rgba(245,158,11,.12);
  border-color:rgba(245,158,11,.22);
  color:#8a5a00;
}
body.page-cases .status.waitcust .dot{ background:rgba(245,158,11,1); }

/* WAITING_ON_SUPPORT (Codreum working) */
body.page-cases .status.waitsup{
  background:rgba(59,130,246,.12);
  border-color:rgba(59,130,246,.22);
  color:#0b2a7a;
}
body.page-cases .status.waitsup .dot{ background:rgba(59,130,246,1); }

/* CLOSURE_REQUESTED */
body.page-cases .status.closure{
  background:rgba(168,85,247,.10);
  border-color:rgba(168,85,247,.18);
  color:#4c2aa3;
}
body.page-cases .status.closure .dot{ background:rgba(168,85,247,1); }

/* CLOSED */
body.page-cases .status.closed{
  background:rgba(100,116,139,.10);
  border-color:rgba(100,116,139,.18);
  color:#334155;
}
body.page-cases .status.closed .dot{ background:rgba(100,116,139,1); }

/* Message thread */
body.page-cases .msg{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 12px;
  background:#fff;
  margin:12px 0;
}
body.page-cases .msg-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(231,236,243,.8);
  margin-bottom:8px;
}
body.page-cases .msg-from{ font-weight:950; }
body.page-cases .msg-time{ font-size:12px; color:var(--muted); }
body.page-cases .msg-text{ line-height:1.6; }

/* ✅ FIX: force-wrap very long unbroken strings in case messages */
body.page-cases .msg-body{
  overflow-wrap:anywhere;
  word-break:break-word; /* fallback */
}
body.page-cases .msg-body pre,
body.page-cases .msg-body code{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Attachments */
body.page-cases .att-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}
body.page-cases .att{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  text-decoration:none;
}
body.page-cases .att small{ color:var(--muted); font-size:12px; }

/* File chips */
body.page-cases .filechip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  margin:6px 6px 0 0;
}
body.page-cases .filechip button{
  border:0;
  background:transparent;
  cursor:pointer;
  font-size:16px;
  line-height:1;
  opacity:.75;
}
body.page-cases .filechip button:hover{ opacity:1; }

/* Dropzone + rich editor surface (opt-in via classes in cases.html) */
body.page-cases .dropzone{
  border:1px dashed rgba(100,116,139,.35);
  border-radius:14px;
  padding:10px;
  background:#fff;
}

body.page-cases .rte-toolbar{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding:8px 0 10px;
}

/* ✅ IMPORTANT: scope these button styles to our legacy toolbar buttons only (not Quill) */
body.page-cases .rte-toolbar button.btn{
  border:1px solid var(--line);
  background:#fff;
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
  font-weight:800;
}
body.page-cases .rte-toolbar button.btn:hover{
  box-shadow:var(--shadow-sm);
  transform:translateY(-1px);
}

body.page-cases .rte-editor{
  min-height:120px;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background:#fff;
}
body.page-cases .rte-editor:focus{
  outline:none;
  box-shadow:var(--ring);
  border-color:rgba(37,99,235,.30);
}

/* ✅ Make field-error visible on contenteditable editor div too */
body.page-cases .rte.field-error{
  box-shadow: 0 0 0 6px rgba(178, 35, 51, .10);
  border-radius: 10px;
}

/* ========================================================= */
/* ✅ ENTERPRISE FIX: keep reply editor STATIC + internal scroll */
/* Applies to both Quill + legacy .rte editor on cases page      */
/* ========================================================= */

/* Quill: fixed editor height + inner scroll */
body.page-cases .case-quill-wrap .ql-container.ql-snow{
  height:280px;
  max-height:50vh;
}
body.page-cases .case-quill-wrap .ql-editor{
  height:100%;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
}

/* Legacy contenteditable editor used by your fallback (#replyEditor/#ncEditor) */
body.page-cases .rte{
  height:280px;
  max-height:50vh;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
}

/* ========================================================= */
/* ✅ MINIMAL FIX ONLY: Quill custom text button (Monospace)  */
/* This overrides Quill snow.css which forces icon-sized buttons */
/* ========================================================= */
body.page-cases .case-quill-wrap .ql-toolbar.ql-snow #btnToggleReplyMono,
body.page-cases .case-quill-wrap .ql-toolbar.ql-snow #btnToggleNcMono{
  width:auto !important;
  min-width:96px !important;
  height:26px !important;
  padding:0 10px !important;
  border:1px solid var(--line) !important;
  border-radius:8px !important;
  background:#fff !important;
  color:#111 !important;
  font-size:12px !important;
  font-weight:900 !important;
  line-height:24px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
  overflow:visible !important;
}

body.page-cases .case-quill-wrap .ql-toolbar.ql-snow #btnToggleReplyMono[aria-pressed="true"],
body.page-cases .case-quill-wrap .ql-toolbar.ql-snow #btnToggleNcMono[aria-pressed="true"]{
  background:#f3f8ff !important;
  border-color:#bfdbfe !important;
  box-shadow: inset 0 0 0 1px rgba(59,130,246,.25) !important;
}

/* ========================================================= */
/* ✅ CASES UI — Missing styles required by cases.app.js       */
/* (skeletons, sortable headers, row focus, drop-active,       */
/*  last-open highlight, msg collapse)                         */
/* ========================================================= */

/* Skeleton rows (renderSkeletonRows) */
body.page-cases .skel{
  height:14px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(231,236,243,.95), rgba(231,236,243,.55), rgba(231,236,243,.95));
  background-size:200% 100%;
  animation: crSkel 1.25s ease-in-out infinite;
}
body.page-cases .skel.sm{ height:10px; opacity:.95; }
@keyframes crSkel{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 200% 50%; }
}

/* Sortable table headers (.th-sort + .th-ic) */
body.page-cases .th-sort{
  cursor:pointer;
  user-select:none;
}
body.page-cases .th-sort:hover{
  color:#334155;
}
body.page-cases .th-sort:focus-visible{
  outline:none;
  box-shadow: var(--ring);
  border-radius:10px;
}
body.page-cases .th-sort .th-ic{
  margin-left:6px;
  font-weight:950;
  opacity:.7;
}
body.page-cases .th-sort.sorted .th-ic{
  opacity:1;
}

/* Clickable row + keyboard focus (wireRowOpen) */
body.page-cases tr.row-open{ cursor:pointer; }
body.page-cases tr.row-open:focus-visible td{
  outline:none;
  box-shadow: inset 0 0 0 2px rgba(37,99,235,.35), 0 0 0 6px rgba(37,99,235,.10);
  border-radius:10px;
}

/* Last-open highlight (row-selected) */
body.page-cases tr.row-selected td{
  background: rgba(37,99,235,.06) !important;
}

/* Dropzone active state (dragover) */
body.page-cases .dropzone.drop-active{
  border-color: rgba(37,99,235,.45);
  background: rgba(37,99,235,.06);
  box-shadow: 0 0 0 6px rgba(37,99,235,.10);
}

/* ========================================================= */
/* ✅ DISABLE per-message Read more / Show less (thread-level only) */
/* ========================================================= */

/* Neutralize any accidental collapsed class */
body.page-cases .msg-body.collapsed{
  max-height:none !important;
  overflow:visible !important;
  position:static !important;
}

/* Remove fade overlay that looks like "colored part" */
body.page-cases .msg-body.collapsed:after{
  content:none !important;
  display:none !important;
}

/* Hide per-message controls completely */
body.page-cases .msg-more,
body.page-cases .msg-morebtn{
  display:none !important;
}

/* ========================================================= */
/* ✅ FIX: Thread message BODY should not look muted           */
/* Only affects the message content, NOT the timestamps/header */
/* ========================================================= */

/* Force message content to full ink, even if renderer injects .muted/.note */
body.page-cases .msg .msg-text,
body.page-cases .msg .msg-body{
  color: var(--ink) !important;
  opacity: 1 !important;
  font-size: 14px;
}

/* If message HTML contains <span class="note"> or <span class="muted"> inside body */
body.page-cases .msg .msg-text .note,
body.page-cases .msg .msg-body .note,
body.page-cases .msg .msg-text .muted,
body.page-cases .msg .msg-body .muted{
  color: var(--ink) !important;
  opacity: 1 !important;
  font-size: inherit !important;
}

/* Ensure nested elements inherit correctly */
body.page-cases .msg .msg-text *,
body.page-cases .msg .msg-body *{
  color: inherit;
  opacity: 1;
}

/* Keep links as brand */
body.page-cases .msg .msg-text a,
body.page-cases .msg .msg-body a{
  color: var(--brand);
}

/* Keep timestamps muted */
body.page-cases .msg .msg-time,
body.page-cases .msg .msg-time *{
  color: var(--muted) !important;
  opacity: 1 !important;
}

/* ========================================================= */
/* ✅ CASES: HARD OVERRIDES for message body (final)          */
/* - Fix "washed out" text (force ink + opacity)             */
/* - Fix unbroken-string wrapping (min-width:0 + anywhere)   */
/* - Fix "colorful" fringing (text-fill + grayscale AA)      */
/* ========================================================= */

body.page-cases .thread,
body.page-cases .thread *{
  min-width: 0; /* critical when any parent uses flex/grid */
}

body.page-cases .thread-body .msg-body,
body.page-cases .thread-body .msg-body *{
  color: var(--ink) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: var(--ink) !important; /* overrides weird light rendering in some cases */
}

body.page-cases .thread-body .msg-body{
  /* wrap even a single 5000-char "aaaa...." token */
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;

  max-width: 100%;
  min-width: 0;

  /* reduce "rainbow" subpixel fringing */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========================================================= */
/* ✅ CASES: Small utility tokens (enterprise consistency)    */
/* - Used to reduce scattered inline styles in cases.html     */
/* ========================================================= */

.mt6{ margin-top: 6px; }
.mt8{ margin-top: 8px; }
.mt10{ margin-top: 10px; }
.mb8{ margin-bottom: 8px; }

.w120{ width: 120px; }
.w150{ width: 150px; }
.w210{ width: 210px; }
.managed-tier-row{ display:grid; gap:10px; margin-bottom:12px; }
.managed-tier-grid{ display:flex; flex-wrap:wrap; gap:10px; }
.managed-tier-chip{ min-height:48px; padding:0 16px; font-weight:800; }
.managed-tier-chip.active{ border-color:#2563eb; box-shadow:0 0 0 2px rgba(37,99,235,.08); background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%); }
.managed-chip-input{ position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; overflow:hidden; }
.managed-tier-chip, .managed-period-chip{ position:relative; display:inline-flex; align-items:center; justify-content:center; }
.managed-chip-text{ display:inline-block; }
.managed-selection-note{ margin:10px 0 0; }
.managed-addon-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px; }
.managed-addon-option{ border:1px solid #d8deea; border-radius:16px; padding:14px 16px; background:#fff; display:grid; grid-template-columns:18px minmax(0,1fr) auto; gap:12px; align-items:start; cursor:pointer; min-height:88px; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.managed-addon-option:hover{ border-color:#c7d2e4; box-shadow:0 8px 20px rgba(15,23,42,.04); }
.managed-addon-option.active{ border-color:#2563eb; box-shadow:0 0 0 2px rgba(37,99,235,.08); background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%); }
.managed-addon-option input{ margin:4px 0 0; width:16px; height:16px; }
.managed-addon-copy{ display:grid; gap:4px; min-width:0; }
.managed-addon-copy strong{ color:#0f172a; font-size:15px; line-height:1.25; }
.managed-addon-copy small{ color:#64748b; font-size:.86rem; line-height:1.45; }
.managed-addon-price{ white-space:nowrap; font-weight:900; color:#0f172a; font-size:15px; padding-left:8px; }
@media(max-width: 640px){ .managed-addon-list{ grid-template-columns:1fr; } }

.managed-addon-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.managed-addon-section-included{ margin-bottom:2px; }
.managed-included-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.managed-included-item{ border:1px solid #dbe5f1; border-radius:16px; padding:14px 16px; background:linear-gradient(180deg,#fbfdff 0%,#f6f9fc 100%); display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:start; min-height:84px; }
.managed-included-mark{ width:20px; height:20px; border-radius:999px; background:#eff6ff; color:#2563eb; display:grid; place-items:center; font-size:12px; font-weight:900; margin-top:2px; }
.managed-included-copy{ display:grid; gap:4px; min-width:0; }
.managed-included-copy strong{ color:#0f172a; font-size:15px; line-height:1.25; }
.managed-included-copy small{ color:#64748b; font-size:.86rem; line-height:1.45; }
.managed-included-badge{ white-space:nowrap; font-weight:800; font-size:12px; color:#1d4ed8; background:#eff6ff; border:1px solid #dbeafe; border-radius:999px; padding:6px 10px; }
@media(max-width: 640px){ .managed-included-list{ grid-template-columns:1fr; } }


/* Managed Codreum Apps license table */
.page-licenses .lic-apps-shell{ margin-top:12px; }
.page-licenses .lic-apps-shell .note{ margin:0 0 12px; }
.page-licenses table.lic.lic-apps-table .col-licid{ width:190px; }
.page-licenses table.lic.lic-apps-table .col-product{ width:180px; }
.page-licenses table.lic.lic-apps-table .col-app-plan{ width:150px; }
.page-licenses table.lic.lic-apps-table .col-app-from{ width:180px; }
.page-licenses table.lic.lic-apps-table .col-app-until{ width:180px; }
.page-licenses table.lic.lic-apps-table .col-app-order{ width:130px; }
.page-licenses table.lic.lic-apps-table .col-app-renew{ width:120px; }
.page-licenses table.lic.lic-apps-table .col-app-file{ width:100px; text-align:center; }
.page-licenses .lic-apps-empty{ padding:14px 0; color:#5b6472; }
.page-licenses .lic-apps-actions-muted .lic-actionsbar-right{ display:none; }
.page-licenses .lic-apps-actions-muted .lic-actionsbar-left{ max-width:100%; }
.page-licenses .lic-apps-product code{ white-space:nowrap; }
.page-licenses .lic-apps-download{ white-space:nowrap; }


/* r49 dynamic homepage */

.home-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:20px 0 10px}
.home-metric{border:1px solid rgba(22,30,60,.08);border-radius:16px;padding:14px 16px;background:rgba(255,255,255,.7);box-shadow:0 8px 24px rgba(14,20,40,.05);backdrop-filter:blur(10px)}
.home-metric .k{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#667085;margin-bottom:6px}
.home-metric .v{display:block;font-size:24px;font-weight:900;line-height:1.1;color:#111827}
.home-metric .p{display:block;font-size:13px;line-height:1.5;color:#5b6476;margin-top:6px}
.home-live{margin:26px 0 18px}
.home-live__head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:14px}
.home-live__head h3{margin:0;font-size:28px;line-height:1.1}
.home-live__head p{margin:6px 0 0;color:#5b6476}
.home-live-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.home-live-card{position:relative;border:1px solid rgba(34,42,73,.1);border-radius:22px;padding:18px;background:linear-gradient(135deg,rgba(235,242,255,.95),rgba(255,246,251,.95));box-shadow:0 16px 40px rgba(20,24,40,.08);overflow:hidden}
.home-live-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top right,rgba(102,112,255,.12),transparent 35%),radial-gradient(circle at bottom left,rgba(236,72,153,.11),transparent 32%);pointer-events:none}
.home-live-card > *{position:relative;z-index:1}
.home-live-card__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.home-live-card__track,.home-live-card__badge{display:inline-flex;align-items:center;border-radius:999px;padding:7px 11px;font-size:12px;font-weight:800;background:rgba(255,255,255,.75);border:1px solid rgba(49,63,110,.12)}
.home-live-card h4{margin:0 0 8px;font-size:26px;line-height:1.12}
.home-live-card p{margin:0;color:#5b6476;line-height:1.65}
.line-stat{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0 10px}
.line-stat span{display:inline-flex;align-items:center;border-radius:999px;padding:6px 10px;background:rgba(255,255,255,.72);border:1px solid rgba(49,63,110,.12);font-size:12px;font-weight:700;color:#24324d}
.home-live-card__bullets{margin:14px 0 0;padding-left:18px;color:#364152;line-height:1.6}
.home-live-card__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.home-live-card__actions .btn{min-height:42px}
.home-ctaStrip__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center}
.home-ctaStrip__actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width: 980px){.home-live-grid{grid-template-columns:1fr 1fr}.home-metrics{grid-template-columns:1fr}.home-ctaStrip__grid{grid-template-columns:1fr}.home-ctaStrip__actions{justify-content:flex-start}}
@media (max-width: 700px){.home-live-grid{grid-template-columns:1fr}.home-live__head{display:block}}

/* r50 portal-style homepage */
.portal-track-shell{display:grid;grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr);gap:18px;align-items:stretch}
.portal-track-rail{display:grid;gap:12px}
.portal-track-btn{display:flex;flex-direction:column;gap:8px;border:1px solid rgba(34,42,73,.1);border-radius:20px;padding:16px 18px;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,250,252,.96));box-shadow:0 12px 28px rgba(20,24,40,.05);text-align:left;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.portal-track-btn:hover{transform:translateY(-1px);box-shadow:0 18px 34px rgba(20,24,40,.08);border-color:rgba(37,99,235,.24)}
.portal-track-btn.is-active{border-color:rgba(37,99,235,.34);background:linear-gradient(180deg,rgba(239,246,255,.95),rgba(255,255,255,.98));box-shadow:0 0 0 3px rgba(37,99,235,.08),0 18px 34px rgba(20,24,40,.08)}
.portal-track-btn__top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#475569}
.portal-track-btn__title{font-size:18px;font-weight:900;line-height:1.24;color:#0f172a}
.portal-track-btn__meta{font-size:13px;line-height:1.55;color:#64748b}
.portal-spotlight{border:1px solid rgba(34,42,73,.1);border-radius:24px;padding:20px;background:linear-gradient(135deg,rgba(239,246,255,.96),rgba(255,255,255,.98),rgba(250,245,255,.98));box-shadow:0 18px 40px rgba(20,24,40,.08);display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
.portal-spotlight__badge{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:7px 12px;background:rgba(255,255,255,.86);border:1px solid rgba(49,63,110,.12);font-size:12px;font-weight:900;color:#1d4ed8;letter-spacing:.12em;text-transform:uppercase}
.portal-spotlight__hero h3{margin:12px 0 8px;font-size:34px;line-height:1.08}
.portal-spotlight__hero p{margin:0;color:#475569;line-height:1.78;max-width:70ch}
.portal-spotlight__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.portal-spotlight__aside{display:grid;gap:12px}
.portal-spotlight__stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.portal-spotlight__stats div{border:1px solid rgba(49,63,110,.12);border-radius:18px;padding:14px;background:rgba(255,255,255,.82);box-shadow:0 10px 22px rgba(20,24,40,.05)}
.portal-spotlight__stats span{display:block;font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#64748b;margin-bottom:6px}
.portal-spotlight__stats strong{display:block;font-size:18px;line-height:1.3;color:#0f172a}
.portal-proof-grid{display:flex;flex-wrap:wrap;gap:8px}
.portal-proof-grid span{display:inline-flex;align-items:center;border-radius:999px;padding:8px 12px;background:rgba(255,255,255,.84);border:1px solid rgba(49,63,110,.12);font-size:12px;font-weight:800;color:#24324d}
@media (max-width: 1080px){.portal-track-shell{grid-template-columns:1fr}.portal-spotlight{grid-template-columns:1fr}}

/* r50 portal track spotlight on products page */
.products-portal-feature{
  display:grid;
  grid-template-columns:minmax(0,1.9fr) minmax(260px,1fr);
  gap:18px;
  align-items:stretch;
}
.products-portal-feature__hero,
.products-portal-feature__side{
  border:1px solid rgba(108,138,255,.18);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(10,20,43,.9), rgba(8,15,33,.96));
  box-shadow:0 18px 42px rgba(4,8,20,.22);
}
.products-portal-feature__hero{
  padding:22px 22px 20px;
}
.products-portal-feature__hero h2{
  margin:0 0 10px;
  color:#fff;
  font-size:clamp(1.45rem,2.4vw,2.05rem);
}
.products-portal-feature__hero p{
  margin:0;
  color:rgba(236,241,255,.8);
  max-width:62ch;
}
.products-portal-feature__badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 11px;
  border-radius:999px;
  margin-bottom:14px;
  background:rgba(117,198,255,.12);
  border:1px solid rgba(117,198,255,.28);
  color:#dce8ff;
  font-size:.82rem;
  font-weight:700;
}
.products-portal-feature__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.products-portal-feature__side{
  padding:18px;
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.products-portal-stat{
  padding:14px 15px;
  border-radius:14px;
  border:1px solid rgba(125,153,255,.14);
  background:rgba(255,255,255,.03);
}
.products-portal-stat span{
  display:block;
  color:rgba(227,234,255,.64);
  font-size:.78rem;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.products-portal-stat strong{
  display:block;
  margin-top:6px;
  color:#fff;
  font-size:1rem;
  line-height:1.35;
}
.products-portal-proof{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.products-portal-proof span{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(123,211,255,.12);
  border:1px solid rgba(123,211,255,.2);
  color:#e8f2ff;
  font-size:.84rem;
}
@media (max-width: 920px){
  .products-portal-feature{
    grid-template-columns:1fr;
  }
}

/* ======================================================= */
/* HOME PAGE r52 — compact workspace, stronger track color */
/* ======================================================= */
body.page-home .portal-workspace{
  border:1px solid rgba(34,42,73,.08);
  border-radius:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(248,250,252,.96));
  box-shadow:0 18px 40px rgba(20,24,40,.07);
  overflow:hidden;
}
body.page-home .portal-workspace__tabs{
  display:flex;
  gap:10px;
  padding:16px 18px 0;
  flex-wrap:wrap;
}
body.page-home .portal-workspace__tab{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(49,63,110,.12);
  border-radius:999px;
  padding:10px 14px;
  background:rgba(255,255,255,.85);
  color:#0f172a;
  font-weight:900;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
body.page-home .portal-workspace__tab:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(20,24,40,.08);
}
body.page-home .portal-workspace__tab.is-active{
  background:linear-gradient(90deg, rgba(37,99,235,.12), rgba(139,92,246,.10), rgba(236,72,153,.10));
  border-color:rgba(37,99,235,.24);
  color:#0b2a7a;
}
body.page-home .portal-workspace__count{
  display:inline-flex;
  min-width:24px;
  height:24px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:0 8px;
  background:#fff;
  border:1px solid rgba(37,99,235,.18);
  font-size:12px;
  color:#0b2a7a;
}
body.page-home .portal-workspace__panel{
  display:none;
  padding:18px;
}
body.page-home .portal-workspace__panel.is-active{ display:block; }

body.page-home .portal-track-shell{ gap:16px; }
body.page-home .portal-track-btn{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  padding:17px 18px;
}
body.page-home .portal-track-btn:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.9;
  pointer-events:none;
}
body.page-home .portal-track-btn > *{ position:relative; }
body.page-home .portal-track-btn--labs:before{
  background:radial-gradient(circle at 10% 20%, rgba(37,99,235,.18), transparent 52%), linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,250,255,.98));
}
body.page-home .portal-track-btn--play:before{
  background:radial-gradient(circle at 10% 20%, rgba(16,185,129,.18), transparent 52%), linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,255,250,.98));
}
body.page-home .portal-track-btn--web3:before{
  background:radial-gradient(circle at 10% 20%, rgba(139,92,246,.18), transparent 52%), linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,245,255,.98));
}
body.page-home .portal-track-btn--apps:before{
  background:radial-gradient(circle at 10% 20%, rgba(236,72,153,.18), transparent 52%), linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,245,250,.98));
}
body.page-home .portal-track-btn__name{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
body.page-home .portal-track-btn__name--labs{ color:#1d4ed8; }
body.page-home .portal-track-btn__name--play{ color:#0f8f67; }
body.page-home .portal-track-btn__name--web3{ color:#7c3aed; }
body.page-home .portal-track-btn__name--apps{ color:#db2777; }
body.page-home .portal-track-btn__status{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:7px 11px;
  font-size:11px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid transparent;
  box-shadow:0 8px 16px rgba(20,24,40,.05);
}
body.page-home .portal-track-btn__status.is-live{
  color:#fff;
  border-color:transparent;
}
body.page-home .portal-track-btn__status.is-dev{
  background:rgba(255,255,255,.84);
  color:#475569;
  border-color:rgba(49,63,110,.12);
}
body.page-home .portal-track-btn__status--labs.is-live{ background:linear-gradient(90deg,#2563eb,#60a5fa); }
body.page-home .portal-track-btn__status--play.is-live{ background:linear-gradient(90deg,#059669,#34d399); }
body.page-home .portal-track-btn__status--web3.is-live{ background:linear-gradient(90deg,#7c3aed,#a78bfa); }
body.page-home .portal-track-btn__status--apps.is-live{ background:linear-gradient(90deg,#db2777,#f472b6); }

body.page-home .portal-spotlight{
  position:relative;
  overflow:hidden;
}
body.page-home .portal-spotlight:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
body.page-home .portal-spotlight > *{ position:relative; }
body.page-home .portal-spotlight--labs:before{
  background:radial-gradient(circle at top left, rgba(37,99,235,.15), transparent 38%), radial-gradient(circle at bottom right, rgba(96,165,250,.10), transparent 34%);
}
body.page-home .portal-spotlight--play:before{
  background:radial-gradient(circle at top left, rgba(16,185,129,.15), transparent 38%), radial-gradient(circle at bottom right, rgba(52,211,153,.10), transparent 34%);
}
body.page-home .portal-spotlight--web3:before{
  background:radial-gradient(circle at top left, rgba(139,92,246,.16), transparent 38%), radial-gradient(circle at bottom right, rgba(192,132,252,.10), transparent 34%);
}
body.page-home .portal-spotlight--apps:before{
  background:radial-gradient(circle at top left, rgba(236,72,153,.16), transparent 38%), radial-gradient(circle at bottom right, rgba(244,114,182,.10), transparent 34%);
}
body.page-home .portal-spotlight__badge{ color:#fff; border:none; box-shadow:0 12px 24px rgba(20,24,40,.10); }
body.page-home .portal-spotlight__badge--labs{ background:linear-gradient(90deg,#2563eb,#60a5fa); }
body.page-home .portal-spotlight__badge--play{ background:linear-gradient(90deg,#059669,#34d399); }
body.page-home .portal-spotlight__badge--web3{ background:linear-gradient(90deg,#7c3aed,#a78bfa); }
body.page-home .portal-spotlight__badge--apps{ background:linear-gradient(90deg,#db2777,#f472b6); }
body.page-home .portal-proof-grid span{
  background:rgba(255,255,255,.85);
  border:1px solid rgba(49,63,110,.12);
}
body.page-home .portal-proof-grid--labs span{ color:#0b2a7a; border-color:rgba(37,99,235,.16); background:rgb(var(--labs-rgb) / 0.10); }
body.page-home .portal-proof-grid--play span{ color:#0f8f67; border-color:rgba(16,185,129,.18); background:rgb(var(--play-rgb) / 0.10); }
body.page-home .portal-proof-grid--web3 span{ color:#6d28d9; border-color:rgba(139,92,246,.18); background:rgb(var(--web3-rgb) / 0.10); }
body.page-home .portal-proof-grid--apps span{ color:#be185d; border-color:rgba(236,72,153,.18); background:rgb(var(--apps-rgb) / 0.10); }

body.page-home .home-live-empty{
  border:1px dashed rgba(49,63,110,.18);
  border-radius:22px;
  padding:24px;
  background:rgba(255,255,255,.82);
  color:#475569;
}
body.page-home .home-live__filters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 16px;
}
body.page-home .home-live__filter{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:999px;
  padding:9px 13px;
  border:1px solid rgba(49,63,110,.12);
  background:rgba(255,255,255,.88);
  color:#0f172a;
  font-weight:900;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}
body.page-home .home-live__filter:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(20,24,40,.08); }
body.page-home .home-live__filter.is-active{ border-color:rgba(37,99,235,.24); box-shadow:0 10px 22px rgba(20,24,40,.08); }
body.page-home .home-live__filterCount{
  display:inline-flex;
  min-width:22px;
  height:22px;
  align-items:center;
  justify-content:center;
  padding:0 7px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  border:1px solid rgba(49,63,110,.12);
  background:rgba(255,255,255,.92);
  color:inherit;
}
body.page-home .home-live__filter--all{
  background:linear-gradient(90deg, rgba(37,99,235,.10), rgba(139,92,246,.08), rgba(236,72,153,.08));
  color:#0f172a;
  border-color:rgba(99,102,241,.18);
}
body.page-home .home-live__filter--all.is-active{
  background:linear-gradient(90deg, rgba(37,99,235,.16), rgba(139,92,246,.14), rgba(236,72,153,.14));
  color:#0b2a7a;
}
body.page-home .home-live__filter--labs{ background:rgb(var(--labs-rgb) / 0.10); color:#0b2a7a; border-color:rgba(37,99,235,.16); }
body.page-home .home-live__filter--play{ background:rgb(var(--play-rgb) / 0.10); color:#0f8f67; border-color:rgba(16,185,129,.18); }
body.page-home .home-live__filter--web3{ background:rgb(var(--web3-rgb) / 0.10); color:#6d28d9; border-color:rgba(139,92,246,.18); }
body.page-home .home-live__filter--apps{ background:rgb(var(--apps-rgb) / 0.10); color:#be185d; border-color:rgba(236,72,153,.18); }
body.page-home .home-live__filter--labs.is-active{ background:linear-gradient(90deg, rgb(var(--labs-rgb) / 0.22), rgb(var(--labs-rgb) / 0.10)); color:#0b2a7a; }
body.page-home .home-live__filter--play.is-active{ background:linear-gradient(90deg, rgb(var(--play-rgb) / 0.22), rgb(var(--play-rgb) / 0.10)); color:#0f8f67; }
body.page-home .home-live__filter--web3.is-active{ background:linear-gradient(90deg, rgb(var(--web3-rgb) / 0.22), rgb(var(--web3-rgb) / 0.10)); color:#6d28d9; }
body.page-home .home-live__filter--apps.is-active{ background:linear-gradient(90deg, rgb(var(--apps-rgb) / 0.22), rgb(var(--apps-rgb) / 0.10)); color:#be185d; }
body.page-home .home-live-shell{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);
  gap:16px;
  align-items:start;
}
body.page-home .home-live-spotlight,
body.page-home .home-live-list{
  position:relative;
  border:1px solid rgba(34,42,73,.1);
  border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(250,250,252,.98));
  box-shadow:0 16px 36px rgba(20,24,40,.07);
  overflow:hidden;
}
body.page-home .home-live-spotlight{ padding:22px; }
body.page-home .home-live-spotlight:before,
body.page-home .home-live-list:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
body.page-home .home-live-spotlight > *,
body.page-home .home-live-list > *{ position:relative; }
body.page-home .home-live-spotlight--labs:before{ background:radial-gradient(circle at top right, rgba(37,99,235,.14), transparent 36%), radial-gradient(circle at bottom left, rgba(96,165,250,.10), transparent 32%); }
body.page-home .home-live-spotlight--play:before{ background:radial-gradient(circle at top right, rgba(16,185,129,.14), transparent 36%), radial-gradient(circle at bottom left, rgba(52,211,153,.10), transparent 32%); }
body.page-home .home-live-spotlight--web3:before{ background:radial-gradient(circle at top right, rgba(139,92,246,.16), transparent 36%), radial-gradient(circle at bottom left, rgba(192,132,252,.10), transparent 32%); }
body.page-home .home-live-spotlight--apps:before{ background:radial-gradient(circle at top right, rgba(236,72,153,.16), transparent 36%), radial-gradient(circle at bottom left, rgba(244,114,182,.10), transparent 32%); }
body.page-home .home-live-spotlight__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
  flex-wrap:wrap;
}
body.page-home .home-live-spotlight__track,
body.page-home .home-live-spotlight__badge,
body.page-home .home-live-list__itemTrack,
body.page-home .home-live-list__itemBadge,
body.page-home .home-live-metaPill{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:7px 11px;
  font-size:12px;
  font-weight:900;
  border:1px solid rgba(49,63,110,.12);
  background:rgba(255,255,255,.85);
}
body.page-home .home-live-spotlight__track--labs,
body.page-home .home-live-list__itemTrack--labs,
body.page-home .home-live-metaPill--labs{ color:#0b2a7a; background:rgb(var(--labs-rgb) / 0.10); border-color:rgba(37,99,235,.18); }
body.page-home .home-live-spotlight__track--play,
body.page-home .home-live-list__itemTrack--play,
body.page-home .home-live-metaPill--play{ color:#0f8f67; background:rgb(var(--play-rgb) / 0.10); border-color:rgba(16,185,129,.18); }
body.page-home .home-live-spotlight__track--web3,
body.page-home .home-live-list__itemTrack--web3,
body.page-home .home-live-metaPill--web3{ color:#6d28d9; background:rgb(var(--web3-rgb) / 0.10); border-color:rgba(139,92,246,.18); }
body.page-home .home-live-spotlight__track--apps,
body.page-home .home-live-list__itemTrack--apps,
body.page-home .home-live-metaPill--apps{ color:#be185d; background:rgb(var(--apps-rgb) / 0.10); border-color:rgba(236,72,153,.18); }
body.page-home .home-live-spotlight__badge{
  color:#fff;
  -webkit-text-fill-color:#fff;
  border:none;
  box-shadow:0 12px 24px rgba(20,24,40,.12);
  text-shadow:0 1px 1px rgba(15,23,42,.24);
  justify-content:center;
  min-width:124px;
}
body.page-home .home-live-spotlight__badge--labs{ background:linear-gradient(90deg,#1d4ed8,#3b82f6); }
body.page-home .home-live-spotlight__badge--play{ background:linear-gradient(90deg,#047857,#10b981); }
body.page-home .home-live-spotlight__badge--web3{ background:linear-gradient(90deg,#6d28d9,#8b5cf6); }
body.page-home .home-live-spotlight__badge--apps{ background:linear-gradient(90deg,#be185d,#ec4899); }
body.page-home .home-live-spotlight h4{ margin:0 0 10px; font-size:34px; line-height:1.08; }
body.page-home .home-live-spotlight p{ margin:0; color:#475569; line-height:1.75; max-width:68ch; }
body.page-home .home-live-spotlight__meta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
body.page-home .home-live-spotlight__bullets{ margin:16px 0 0; padding-left:18px; color:#334155; line-height:1.7; }
body.page-home .home-live-spotlight__actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
body.page-home .home-live-list{ padding:18px; }
body.page-home .home-live-list__head{ margin-bottom:12px; }
body.page-home .home-live-list__head strong{ display:block; font-size:15px; color:#0f172a; }
body.page-home .home-live-list__head span{ display:block; margin-top:3px; font-size:13px; color:#64748b; }
body.page-home .home-live-list__items{ display:grid; gap:10px; }
body.page-home .home-live-list__item{
  text-align:left;
  width:100%;
  border:1px solid rgba(49,63,110,.12);
  border-radius:18px;
  padding:14px;
  background:rgba(255,255,255,.84);
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
body.page-home .home-live-list__item:hover{ transform:translateY(-1px); box-shadow:0 12px 24px rgba(20,24,40,.08); }
body.page-home .home-live-list__item.is-active{ border-color:rgba(37,99,235,.22); box-shadow:0 12px 24px rgba(20,24,40,.08); }
body.page-home .home-live-list__itemTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
body.page-home .home-live-list__itemBadge{
  color:#475569;
  justify-content:center;
  min-width:108px;
}
body.page-home .home-live-list__itemBadge--labs,
body.page-home .home-live-list__itemBadge--play,
body.page-home .home-live-list__itemBadge--web3,
body.page-home .home-live-list__itemBadge--apps{
  color:#fff;
  -webkit-text-fill-color:#fff;
  border:none;
  text-shadow:0 1px 1px rgba(15,23,42,.22);
}
body.page-home .home-live-list__itemBadge--labs{ background:linear-gradient(90deg,#1d4ed8,#3b82f6); box-shadow:0 10px 20px rgba(37,99,235,.22); }
body.page-home .home-live-list__itemBadge--play{ background:linear-gradient(90deg,#047857,#10b981); box-shadow:0 10px 20px rgba(16,185,129,.22); }
body.page-home .home-live-list__itemBadge--web3{ background:linear-gradient(90deg,#6d28d9,#8b5cf6); box-shadow:0 10px 20px rgba(139,92,246,.22); }
body.page-home .home-live-list__itemBadge--apps{ background:linear-gradient(90deg,#be185d,#ec4899); box-shadow:0 10px 20px rgba(236,72,153,.22); }
body.page-home .home-live-list__item strong{ display:block; font-size:18px; line-height:1.2; color:#0f172a; }
body.page-home .home-live-list__item span:last-child{ display:block; margin-top:8px; color:#64748b; line-height:1.55; }
body.page-home .panel-card--labs{ background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(244,249,255,.92)); }
body.page-home .panel-card--play{ background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(244,255,250,.92)); }
body.page-home .panel-card--web3{ background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(249,245,255,.92)); }
body.page-home .panel-card--apps{ background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,244,249,.92)); }
body.page-home .panel-badge{ color:#fff; border:none; }
body.page-home .panel-badge--labs{ background:linear-gradient(90deg,#2563eb,#60a5fa); }
body.page-home .panel-badge--play{ background:linear-gradient(90deg,#059669,#34d399); }
body.page-home .panel-badge--web3{ background:linear-gradient(90deg,#7c3aed,#a78bfa); }
body.page-home .panel-badge--apps{ background:linear-gradient(90deg,#db2777,#f472b6); }
body.page-home .panel-row--labs .panel-ic{ background:rgba(37,99,235,.12); border-color:rgba(37,99,235,.20); color:#0b2a7a; }
body.page-home .panel-row--play .panel-ic{ background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.20); color:#0f8f67; }
body.page-home .panel-row--web3 .panel-ic{ background:rgba(139,92,246,.12); border-color:rgba(139,92,246,.20); color:#6d28d9; }
body.page-home .panel-row--apps .panel-ic{ background:rgba(236,72,153,.12); border-color:rgba(236,72,153,.20); color:#be185d; }

@media (max-width: 1080px){
  body.page-home .home-live-shell{ grid-template-columns:1fr; }
}
@media (max-width: 720px){
  body.page-home .portal-workspace__tabs{ padding:14px 14px 0; }
  body.page-home .portal-workspace__panel{ padding:14px; }
  body.page-home .home-live-spotlight h4{ font-size:28px; }
  body.page-home .portal-spotlight__hero h3{ font-size:29px; }
}