/* =========================================================================
   RackLot Design System — Core tokens + semantic styles
   ========================================================================= */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/geist@5.2.5/files/geist-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/geist-mono@5.2.5/files/geist-mono-latin-wght-normal.woff2") format("woff2");
}

:root {
  --slate-50:  #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;
  --slate-950: #020617;
  --blue-50:  #EFF6FF;
  --blue-100: #DBEAFE;
  --blue-200: #BFDBFE;
  --blue-300: #93C5FD;
  --blue-400: #60A5FA;
  --blue-500: #3B82F6;
  --blue-600: #2563EB;
  --blue-700: #1D4ED8;
  --blue-800: #1E40AF;
  --blue-900: #1E3A8A;
  --green-500: #10B981;
  --green-50:  #ECFDF5;
  --amber-500: #F59E0B;
  --amber-50:  #FFFBEB;
  --red-500:   #EF4444;
  --red-50:    #FEF2F2;
  --ink-900: #0B0F1A;
  --ink-800: #111827;
  --bg-canvas:     #FDFDFE;
  --surface-1:     #FFFFFF;
  --surface-2:     var(--slate-50);
  --surface-dark:  var(--ink-900);
  --fg-primary:    var(--slate-900);
  --fg-secondary:  var(--slate-600);
  --fg-tertiary:   var(--slate-500);
  --fg-onDark:     #F1F5F9;
  --fg-onDark-2:   #94A3B8;
  --border-default:  var(--slate-200);
  --border-emphasis: var(--slate-300);
  --accent:         var(--blue-600);
  --accent-hover:   var(--blue-700);
  --accent-press:   var(--blue-800);
  --accent-soft:    var(--blue-50);
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-12: 0.75rem; --fs-14: 0.875rem; --fs-16: 1rem; --fs-18: 1.125rem;
  --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-30: 1.875rem; --fs-38: 2.375rem;
  --fs-48: 3rem; --fs-64: 4rem;
  --lh-display: 1.1; --lh-heading: 1.2; --lh-body: 1.55; --lh-code: 1.45;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --tr-tight: -0.02em; --tr-snug: -0.01em; --tr-normal: 0; --tr-wide: 0.02em; --tr-eyebrow: 0.08em;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --s-24: 96px; --s-32: 128px;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 9999px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.04);
  --shadow-md: 0 4px 12px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
  --shadow-lg: 0 20px 40px -12px rgba(15,23,42,.12), 0 8px 16px -8px rgba(15,23,42,.06);
  --shadow-focus: 0 0 0 3px rgba(37,99,235,.18);
  --ease-out-quart: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-base: 200ms; --dur-slow: 400ms; --dur-page: 600ms;
  --container-max: 1200px; --gutter: 24px; --gutter-lg: 48px; --nav-h: 72px;
}

/* === Global resets === */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--fg-primary);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0;
  padding: 0;
}
body { padding-top: 0 !important; }

/* Typography overrides */
h1, .h1 { font-size: clamp(32px, 5.2vw, 64px); line-height: var(--lh-display); letter-spacing: var(--tr-tight); font-weight: var(--fw-semibold); margin: 0; }
h2, .h2 { font-size: clamp(24px, 3vw, 38px); line-height: var(--lh-display); letter-spacing: var(--tr-tight); font-weight: var(--fw-semibold); margin: 0; }
h3, .h3 { font-size: var(--fs-24); line-height: var(--lh-heading); letter-spacing: var(--tr-snug); font-weight: var(--fw-semibold); margin: 0; }
h4, .h4 { font-size: var(--fs-20); line-height: var(--lh-heading); letter-spacing: var(--tr-snug); font-weight: var(--fw-semibold); margin: 0; }
h5, .h5 { font-size: var(--fs-16); line-height: var(--lh-heading); font-weight: var(--fw-semibold); margin: 0; }
a { color: var(--accent); text-decoration: none; transition: color var(--dur-micro) var(--ease-out-quart); }
a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--blue-200); color: var(--slate-900); }
.lede { font-size: var(--fs-20); line-height: 1.45; color: var(--fg-secondary); font-weight: var(--fw-regular); }
.caption { font-size: var(--fs-12); line-height: 1.4; color: var(--fg-tertiary); }
.eyebrow { font-size: var(--fs-12); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tr-eyebrow); color: var(--accent); }
code, .mono { font-family: var(--font-mono); font-size: 0.92em; line-height: var(--lh-code); }

/* === Layout === */
.rl-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 1024px) { .rl-container { padding: 0 var(--gutter-lg); } }
.rl-accent { color: var(--accent); }
.rl-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.rl-flip { display: inline-block; transform: rotate(180deg); }
.rl-r { text-align: right; }
.rl-full { width: 100%; justify-content: center; }

/* === Buttons === */
.rl-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-weight: 600; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; transition: all var(--dur-base) var(--ease-out-quart); line-height: 1; white-space: nowrap; text-decoration: none; }
.rl-btn:hover { text-decoration: none; }
.rl-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.rl-btn--sm { padding: 8px 12px; font-size: 13px; border-radius: 8px; }
.rl-btn--md { padding: 10px 16px; font-size: 14px; }
.rl-btn--lg { padding: 14px 22px; font-size: 15px; border-radius: 12px; }
.rl-btn--primary { background: var(--blue-600); color: #fff; }
.rl-btn--primary:hover { background: var(--blue-700); transform: translateY(-0.5px); color: #fff; }
.rl-btn--primary:active { background: var(--blue-800); transform: none; }
.rl-btn--secondary { background: #fff; color: var(--slate-900); border-color: var(--slate-300); }
.rl-btn--secondary:hover { background: var(--slate-50); border-color: var(--slate-400); color: var(--slate-900); }
.rl-btn--ghost { background: transparent; color: var(--slate-900); }
.rl-btn--ghost:hover { background: var(--slate-100); color: var(--slate-900); }
.rl-btn--danger { background: var(--red-500); color: #fff; }

/* === Badges === */
.rl-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; border: 1px solid transparent; }
.rl-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rl-badge--up      { background: #ECFDF5; color: #047857; border-color: #A7F3D0; }
.rl-badge--warn    { background: #FFFBEB; color: #B45309; border-color: #FDE68A; }
.rl-badge--down    { background: #FEF2F2; color: #B91C1C; border-color: #FECACA; }
.rl-badge--info    { background: var(--blue-50); color: var(--blue-700); border-color: var(--blue-200); }
.rl-badge--neutral { background: var(--slate-100); color: var(--slate-700); border-color: var(--slate-200); }

/* === Nav === */
#rl-nav {
  position: sticky; top: 0; z-index: 1050;
  background: rgba(253, 253, 254, 0.92);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-bottom: 1px solid var(--border-default);
  height: var(--nav-h);
}
.rl-nav__inner { height: 100%; display: flex; align-items: center; gap: 32px; }
.rl-nav__brand { cursor: pointer; display: flex; align-items: center; text-decoration: none; }
.rl-nav__brand:hover { text-decoration: none; }
.rl-nav__links { display: flex; gap: 24px; flex: 1; }
.rl-nav__link { color: var(--slate-700); font-size: 14px; font-weight: 500; cursor: pointer; transition: color var(--dur-micro); text-decoration: none; }
.rl-nav__link:hover { color: var(--slate-900); text-decoration: none; }
.rl-nav__link.is-active { color: var(--accent); }
.rl-nav__right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.rl-nav__icon { position: relative; padding: 8px; color: var(--slate-700); cursor: pointer; border-radius: 8px; display: inline-flex; text-decoration: none; }
.rl-nav__icon:hover { background: var(--slate-100); color: var(--slate-900); text-decoration: none; }
.rl-nav__badge { position: absolute; top: 2px; right: 2px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
/* Hide old nav elements */
#header, #main-menu, #home-banner, .home-shortcuts { display: none !important; }

/* === Hero === */
.rl-hero {
  position: relative; padding: 80px 0 96px; overflow: hidden;
  background:
    radial-gradient(ellipse 900px 500px at 80% 30%, rgba(37,99,235,.08), transparent 70%),
    radial-gradient(var(--slate-200) 1px, transparent 1px) var(--bg-canvas);
  background-size: auto, 24px 24px;
}
.rl-hero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
@media (max-width: 960px) { .rl-hero__inner { grid-template-columns: 1fr; } }
.rl-hero__copy h1 { font-size: clamp(36px, 5.2vw, 64px); margin: 16px 0 20px; font-weight: 600; letter-spacing: -0.02em; }
.rl-hero__copy .lede { max-width: 520px; }
.rl-hero__cta { display: flex; gap: 12px; margin: 28px 0; flex-wrap: wrap; }
.rl-hero__kpis { display: flex; gap: 40px; border-top: 1px solid var(--border-default); padding-top: 20px; margin-top: 8px; max-width: 540px; }
.rl-kpi__n { display: block; font-family: var(--font-mono); font-size: 26px; font-weight: 600; color: var(--slate-900); letter-spacing: -0.01em; }
.rl-kpi__l { display: block; font-size: 12px; color: var(--fg-tertiary); }
.rl-hero__stage { position: relative; min-height: 500px; }
.rl-hero3d { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 170%; height: 700px; pointer-events: none; z-index: 1; }
@media (max-width: 960px) { .rl-hero3d { width: 120%; height: 500px; position: relative; transform: none; top: auto; left: auto; } }

/* === Features grid === */
.rl-features { padding: 80px 0; }
.rl-features__head { text-align: center; max-width: 700px; margin: 0 auto 48px; }
.rl-features__head h2 { margin-top: 12px; }
.rl-features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .rl-features__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rl-features__grid { grid-template-columns: 1fr; } }
.rl-feature { background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 28px; transition: all var(--dur-base) var(--ease-out-quart); }
.rl-feature:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--slate-300); }
.rl-feature__icon { width: 44px; height: 44px; border-radius: 10px; background: var(--blue-50); color: var(--blue-600); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.rl-feature h4 { margin-bottom: 6px; }
.rl-feature p { color: var(--fg-secondary); font-size: 14px; line-height: 1.55; }

/* === Dark band === */
.rl-dark-band { background: var(--ink-900); color: var(--fg-onDark); padding: 56px 0; }
.rl-dark-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }

/* === Cards / tiles === */
.rl-tiles { padding: 56px 0 96px; }
.rl-tiles__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .rl-tiles__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rl-tiles__grid { grid-template-columns: 1fr; } }
.rl-card { background: var(--surface-1); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); transition: box-shadow var(--dur-base) var(--ease-out-quart); }
.rl-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.rl-server-card { display: flex; flex-direction: column; gap: 12px; }
.rl-server-card:hover { box-shadow: var(--shadow-md); }
.rl-server-card__head { display: flex; justify-content: space-between; align-items: center; }
.rl-server-card h4 { margin: 0; }
.rl-server-card__specs { list-style: none; padding: 0; margin: 6px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.rl-server-card__specs li { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--slate-700); }
.rl-server-card__foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--slate-100); padding-top: 14px; margin-top: 4px; }
.rl-price__val { font-family: var(--font-mono); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--slate-900); }
.rl-price__unit { font-size: 13px; color: var(--fg-tertiary); margin-left: 2px; }

/* === Catalog filters === */
.rl-page-head { padding: 48px 0 24px; max-width: 780px; }
.rl-page-head--thin { padding: 32px 0 20px; }
.rl-page-head h2 { margin: 10px 0 8px; }
.rl-back { display: inline-flex; align-items: center; gap: 4px; color: var(--fg-secondary); font-size: 13px; margin-bottom: 12px; cursor: pointer; text-decoration: none; }
.rl-back:hover { color: var(--accent); text-decoration: none; }
.rl-catalog { padding-bottom: 96px; }
.rl-filters { display: flex; gap: 24px; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; }
.rl-filters__group { display: flex; align-items: center; gap: 12px; }
.rl-filters__group label { font-size: 13px; color: var(--fg-secondary); font-weight: 500; }
.rl-filters__search { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--slate-300); border-radius: 10px; padding: 8px 12px; width: 300px; max-width: 100%; }
.rl-filters__search input { border: 0; outline: none; flex: 1; font-size: 14px; background: transparent; font-family: var(--font-sans); box-shadow: none; }
.rl-seg { display: inline-flex; background: var(--slate-100); border-radius: 9px; padding: 3px; }
.rl-seg__btn { border: 0; background: transparent; font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 6px; cursor: pointer; color: var(--fg-secondary); font-family: var(--font-sans); }
.rl-seg__btn.is-on { background: #fff; color: var(--slate-900); box-shadow: var(--shadow-sm); }

/* === Configure === */
.rl-configure { padding-bottom: 96px; }
.rl-configure__grid { display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: start; }
@media (max-width: 960px) { .rl-configure__grid { grid-template-columns: 1fr; } }
.rl-configure__options { display: flex; flex-direction: column; gap: 16px; }
.rl-options { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.rl-opt { display: flex; align-items: center; gap: 10px; border: 1px solid var(--slate-200); border-radius: 10px; padding: 12px 14px; cursor: pointer; transition: all var(--dur-micro) var(--ease-out-quart); margin-bottom: 0; }
.rl-opt:hover { border-color: var(--slate-300); background: var(--slate-50); }
.rl-opt.is-on { border-color: var(--blue-600); background: var(--blue-50); box-shadow: inset 0 0 0 1px var(--blue-600); }
.rl-opt input[type="radio"] { accent-color: var(--blue-600); }
.rl-opt__l { flex: 1; font-weight: 500; font-size: 14px; }
.rl-opt__s { font-size: 12px; color: var(--fg-tertiary); font-family: var(--font-mono); }
.rl-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.rl-field label { font-size: 13px; font-weight: 500; color: var(--slate-700); }
.rl-field input, .rl-field textarea, .rl-field select { width: 100%; padding: 10px 12px; border: 1px solid var(--slate-300); border-radius: 8px; font-size: 14px; font-family: var(--font-sans); color: var(--slate-900); background: #fff; resize: vertical; height: auto; box-shadow: none; }
.rl-field input:focus, .rl-field textarea:focus, .rl-field select:focus { outline: none; border-color: var(--blue-600); box-shadow: var(--shadow-focus); }
.rl-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rl-summary__card { position: sticky; top: calc(var(--nav-h) + 16px); }
.rl-summary__dl { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 20px; padding: 0; }
.rl-summary__dl > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; }
.rl-summary__dl dt { color: var(--fg-secondary); margin: 0; }
.rl-summary__dl dd { margin: 0; color: var(--slate-900); font-weight: 500; text-align: right; }
.rl-summary__total { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--slate-100); border-bottom: 1px solid var(--slate-100); margin-bottom: 16px; }
.rl-summary__total span { color: var(--fg-secondary); }
.rl-summary__total strong { font-family: var(--font-mono); font-size: 24px; font-weight: 600; }

/* === Cart === */
.rl-cart { padding-bottom: 96px; }
.rl-cart__grid { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }
@media (max-width: 900px) { .rl-cart__grid { grid-template-columns: 1fr; } }
.rl-cart__row { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.rl-cart__icon { width: 44px; height: 44px; background: var(--blue-50); color: var(--blue-600); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rl-cart__meta { flex: 1; min-width: 0; }
.rl-cart__meta h4 { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; }
.rl-cart__meta p { color: var(--fg-secondary); font-size: 13px; margin: 4px 0 0; }
.rl-kv { display: flex; justify-content: space-between; padding: 10px 0; color: var(--fg-secondary); font-size: 14px; }
.rl-kv--total { border-top: 1px solid var(--slate-100); padding-top: 14px; margin-top: 6px; color: var(--slate-900); font-size: 16px; }

/* === Auth === */
.rl-auth { padding: 80px 0; display: flex; justify-content: center; }
.rl-auth__card { width: 100%; max-width: 440px; padding: 32px; }
.rl-auth__brand { text-align: center; margin-bottom: 20px; }
.rl-tabs { display: flex; background: var(--slate-100); border-radius: 10px; padding: 4px; margin-bottom: 24px; }
.rl-tabs button { flex: 1; border: 0; background: transparent; padding: 8px; font-weight: 600; font-size: 14px; color: var(--fg-secondary); border-radius: 7px; cursor: pointer; font-family: var(--font-sans); }
.rl-tabs button.is-on { background: #fff; color: var(--slate-900); box-shadow: var(--shadow-sm); }
.rl-check { display: inline-flex; gap: 8px; align-items: center; color: var(--fg-secondary); cursor: pointer; }
.rl-check input { accent-color: var(--blue-600); }

/* === Dashboard === */
.rl-dash { padding: 40px 0 96px; }
.rl-dash__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.rl-dash__actions { display: flex; gap: 10px; }
.rl-dash__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
@media (max-width: 780px) { .rl-dash__stats { grid-template-columns: repeat(2, 1fr); } }
.rl-stat { display: flex; flex-direction: column; gap: 4px; padding: 20px; }
.rl-stat__v { font-family: var(--font-mono); font-size: 28px; font-weight: 600; color: var(--slate-900); letter-spacing: -0.01em; }
.rl-stat__s { font-size: 12px; color: var(--fg-tertiary); }
.rl-stat__s--up { color: #047857; }
.rl-stat__s--warn { color: #B45309; }
.rl-dash__grid2 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; margin-top: 16px; }
@media (max-width: 900px) { .rl-dash__grid2 { grid-template-columns: 1fr; } }
.rl-dash__grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-top: 16px; }
@media (max-width: 900px) { .rl-dash__grid3 { grid-template-columns: 1fr; } }
.rl-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rl-table th { text-align: left; font-weight: 600; color: var(--fg-secondary); padding: 10px 12px; border-bottom: 1px solid var(--slate-200); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.rl-table td { padding: 14px 12px; border-bottom: 1px solid var(--slate-100); }
.rl-table tr:last-child td { border-bottom: 0; }
.rl-row-click:hover td { background: var(--slate-50); }
.rl-list { list-style: none; padding: 0; margin: 0; }
.rl-list li { display: grid; grid-template-columns: 100px 100px 80px auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--slate-100); font-size: 14px; }
.rl-list li:last-child { border-bottom: 0; }
.rl-news { list-style: none; padding: 0; margin: 0; }
.rl-news li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--slate-100); font-size: 14px; align-items: baseline; }
.rl-news li:last-child { border-bottom: 0; }
.rl-news .caption { flex-shrink: 0; width: 56px; font-family: var(--font-mono); }

/* === Invoice === */
.rl-invoice { padding-bottom: 96px; }
.rl-invoice__doc { padding: 40px; }
.rl-invoice__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 20px; }
.rl-invoice__meta { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
.rl-invoice__meta > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.rl-invoice__meta dt { color: var(--fg-secondary); margin: 0; }
.rl-invoice__meta dd { margin: 0; font-weight: 500; }
.rl-invoice__items { margin: 20px 0; }
.rl-invoice__totals { margin-left: auto; max-width: 300px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.rl-invoice__totals > div { display: flex; justify-content: space-between; }
.rl-invoice__grand { padding-top: 10px; border-top: 1px solid var(--slate-200); font-size: 16px; }
.rl-invoice__actions { display: flex; gap: 10px; margin-top: 28px; }

/* === Tickets === */
.rl-tickets { padding: 40px 0 96px; }
.rl-tickets__filters { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.rl-ticketview { padding-bottom: 96px; }
.rl-ticketview__title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rl-ticketview__grid { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
@media (max-width: 900px) { .rl-ticketview__grid { grid-template-columns: 1fr; } }
.rl-thread { display: flex; flex-direction: column; gap: 12px; }
.rl-msg { background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 18px 20px; }
.rl-msg.is-mine { background: var(--blue-50); border-color: var(--blue-200); }
.rl-msg__head { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px; }
.rl-msg p { margin: 0; font-size: 14px; line-height: 1.6; }
.rl-reply { padding: 18px 20px; }
.rl-reply textarea { width: 100%; border: 1px solid var(--slate-300); border-radius: 8px; padding: 10px 12px; font-family: var(--font-sans); font-size: 14px; resize: vertical; box-shadow: none; }
.rl-reply textarea:focus { outline: none; border-color: var(--blue-600); box-shadow: var(--shadow-focus); }
.rl-reply__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.rl-ticketside { padding: 20px; position: sticky; top: calc(var(--nav-h) + 16px); }
.rl-kvlist { display: flex; flex-direction: column; gap: 10px; padding: 0; margin: 10px 0; }
.rl-kvlist > div { display: flex; justify-content: space-between; font-size: 13px; }
.rl-kvlist dt { color: var(--fg-secondary); margin: 0; }
.rl-kvlist dd { margin: 0; font-weight: 500; }
.rl-stack { display: flex; flex-direction: column; gap: 8px; }

/* === KB === */
.rl-kb { padding-bottom: 96px; }
.rl-kb__search { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--slate-300); border-radius: 12px; padding: 14px 18px; margin-top: 20px; max-width: 640px; box-shadow: var(--shadow-sm); }
.rl-kb__search input { border: 0; outline: none; flex: 1; font-size: 15px; background: transparent; font-family: var(--font-sans); box-shadow: none; }
.rl-kb__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; }
@media (max-width: 900px) { .rl-kb__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rl-kb__grid { grid-template-columns: 1fr; } }
.rl-kb__cat { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; text-decoration: none; color: inherit; }
.rl-kb__cat:hover { box-shadow: var(--shadow-md); text-decoration: none; color: inherit; }
.rl-kb__cat h4 { margin-bottom: 4px; }

/* === Footer === */
#rl-footer { background: var(--ink-900); color: var(--fg-onDark-2); padding: 64px 0 24px; margin-top: 0; }
.rl-footer__inner { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; margin-bottom: 48px; }
@media (max-width: 780px) { .rl-footer__inner { grid-template-columns: 1fr; } }
.rl-footer__brand p { margin-top: 14px; font-size: 14px; color: var(--fg-onDark-2); line-height: 1.6; max-width: 320px; }
.rl-footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.rl-footer__cols h5 { color: var(--fg-onDark); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; }
.rl-footer__cols a { display: block; color: var(--fg-onDark-2); font-size: 14px; padding: 4px 0; text-decoration: none; }
.rl-footer__cols a:hover { color: #fff; text-decoration: none; }
.rl-footer__base { display: flex; justify-content: space-between; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 12px; color: var(--fg-onDark-2); }
footer.footer { display: none !important; }

/* === Main content wrapper === */
#main-body { padding: 0; margin: 0; background: var(--bg-canvas); }
#main-body > .container { max-width: none; padding: 0; width: 100%; }
#main-body > .container > .row { margin: 0; }
#main-body > .container > .row > .col-xs-12.main-content { float: none; width: 100%; padding: 0; }

/* === WHMCS Bootstrap override === */
.form-control { border-color: var(--slate-300); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: 14px; color: var(--slate-900); background: #fff; padding: 10px 12px; height: auto; box-shadow: none; }
.form-control:focus { border-color: var(--blue-600); box-shadow: var(--shadow-focus); outline: none; }
.btn-primary { background-color: var(--blue-600); border-color: var(--blue-700); font-family: var(--font-sans); font-weight: 600; border-radius: var(--radius-md); padding: 10px 18px; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--blue-700); border-color: var(--blue-800); }
.btn-default { border-color: var(--slate-300); color: var(--slate-900); font-family: var(--font-sans); font-weight: 500; border-radius: var(--radius-md); padding: 10px 18px; }
.panel { border-color: var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.panel-primary { border-color: var(--blue-600); }
.panel-primary > .panel-heading { background-color: var(--blue-600); border-color: var(--blue-700); }
.alert { border-radius: var(--radius-md); }
.alert-info { background: var(--blue-50); border-color: var(--blue-200); color: var(--blue-800); }
.alert-success { background: var(--green-50); border-color: #A7F3D0; color: #065F46; }
.alert-danger { background: var(--red-50); border-color: #FECACA; color: #991B1B; }
.rl-main-content { min-height: calc(100vh - var(--nav-h) - 300px); }

/* === Inline SVG icon helper === */
.rl-icon { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }

/* =========================================================================
   Store / Order Form overrides — standard_cart
   ========================================================================= */

/* Layout wrapper */
#order-standard_cart {
  font-family: var(--font-sans);
  color: var(--fg-primary);
}

/* Page heading */
#order-standard_cart .header-lined {
  border-bottom: 1px solid var(--border-default);
  margin-bottom: 28px;
  padding-bottom: 16px;
}
#order-standard_cart .header-lined h1 {
  font-size: 28px;
  font-weight: 700;
  color: var(--fg-primary);
  letter-spacing: -0.02em;
}

/* Grid layout — sidebar + main */
#order-standard_cart > .row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  #order-standard_cart > .row { grid-template-columns: 1fr; }
}
#order-standard_cart .cart-sidebar { width: auto; float: none; padding: 0; }
#order-standard_cart .cart-body   { width: auto; float: none; padding: 0; }

/* Sidebar panels */
#order-standard_cart .panel,
#order-standard_cart .card {
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 12px;
}
#order-standard_cart .panel-heading,
#order-standard_cart .card-header {
  background: var(--slate-50);
  border-bottom: 1px solid var(--border-default);
  padding: 10px 14px;
}
#order-standard_cart .panel-heading h3,
#order-standard_cart .card-header h3 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--fg-secondary);
  margin: 0;
}
#order-standard_cart .panel-heading .fa,
#order-standard_cart .card-header .fa,
#order-standard_cart .panel-heading .fas,
#order-standard_cart .card-header .fas { display: none; }

/* Sidebar list-group */
#order-standard_cart .list-group { border: none; }
#order-standard_cart .list-group-item {
  border: none;
  border-bottom: 1px solid var(--slate-100);
  padding: 9px 14px;
  font-size: 13px;
  color: var(--fg-secondary);
  background: transparent;
}
#order-standard_cart .list-group-item:last-child { border-bottom: none; }
#order-standard_cart .list-group-item.active,
#order-standard_cart .list-group-item:hover {
  background: var(--blue-50);
  color: var(--blue-700);
  font-weight: 600;
}
#order-standard_cart .list-group-item .fa,
#order-standard_cart .list-group-item .fas { display: none; }

/* Collapsed sidebar (mobile selects) */
#order-standard_cart .sidebar-collapsed { display: none; }
#order-standard_cart .panel-body,
#order-standard_cart .card-body { padding: 12px 14px; }
#order-standard_cart .panel-minimise,
#order-standard_cart .card-minimise { display: none; }

/* Product grid */
#order-standard_cart .products .row,
#order-standard_cart .products .row.row-eq-height {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin: 0 0 16px;
}
#order-standard_cart .products .col-md-6 {
  width: auto;
  padding: 0;
  float: none;
}

/* Product card */
#order-standard_cart .product {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.15s, transform 0.15s;
  height: 100%;
}
#order-standard_cart .product:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
#order-standard_cart .product > header {
  background: var(--slate-50);
  border-bottom: 1px solid var(--border-default);
  padding: 14px 16px;
}
#order-standard_cart .product > header span {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-primary);
  font-family: var(--font-mono);
  line-height: 1.4;
  display: block;
}
#order-standard_cart .product-desc {
  flex: 1;
  padding: 14px 16px;
  font-size: 13px;
  color: var(--fg-secondary);
  line-height: 1.6;
}
#order-standard_cart .product-desc p { margin: 0; }
#order-standard_cart .product-desc ul {
  margin: 8px 0 0 0;
  padding-left: 16px;
}
#order-standard_cart .product-desc li { margin-bottom: 4px; }

/* Product footer — price + CTA */
#order-standard_cart .product > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-top: 1px solid var(--border-default);
  background: var(--slate-50);
  gap: 12px;
}
#order-standard_cart .product-price,
#order-standard_cart .product > footer .price-wrapper,
#order-standard_cart .product > footer > div:first-child {
  display: flex;
  flex-direction: column;
}
#order-standard_cart .product > footer .price {
  font-size: 20px;
  font-weight: 700;
  color: var(--fg-primary);
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
}
#order-standard_cart .product > footer br { display: none; }

/* Order button */
#order-standard_cart .btn-order-now,
#order-standard_cart a.btn-order-now,
#order-standard_cart .btn.btn-success.btn-order-now {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-sans);
  background: var(--blue-600);
  color: #fff !important;
  border: none;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
#order-standard_cart .btn-order-now:hover,
#order-standard_cart a.btn-order-now:hover {
  background: var(--blue-700);
  color: #fff !important;
  transform: translateY(-0.5px);
}
#order-standard_cart .btn-order-now .fa,
#order-standard_cart .btn-order-now .fas { font-size: 12px; }

/* Out-of-stock / unavailable state */
#order-standard_cart .btn-order-now[disabled],
#order-standard_cart .btn-order-now.disabled {
  background: var(--slate-300);
  color: var(--slate-500) !important;
  pointer-events: none;
  transform: none;
}

/* View cart / action buttons in old nav */
#order-standard_cart .btn:not(.btn-order-now):not(.btn-success) {
  font-family: var(--font-sans);
  font-weight: 500;
  border-radius: var(--radius-md);
  font-size: 13px;
}

/* Main body container — remove legacy padding */
#main-body > .container { padding-top: 32px; padding-bottom: 64px; }

/* Breadcrumb strip */
#order-standard_cart .breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0 0 20px;
  font-size: 12px;
}
#order-standard_cart .breadcrumb > li + li::before { color: var(--slate-400); }
#order-standard_cart .breadcrumb .active { color: var(--fg-secondary); }

/* =========================================================================
   System Page Header (breadcrumb-based inner pages)
   ========================================================================= */

.rl-sys-head {
  border-bottom: 1px solid var(--border-default);
  padding: 32px 0 24px;
  background: var(--bg-canvas);
}
.rl-sys-head .rl-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rl-sys-head__title {
  font-size: clamp(20px, 2.5vw, 30px);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-snug);
  color: var(--fg-primary);
  margin: 0;
}
.rl-sys-head .breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: 13px;
  border-radius: 0;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
.rl-sys-head .breadcrumb > li + li::before {
  content: "/\00a0";
  color: var(--slate-400);
  padding: 0 6px;
}
.rl-sys-head .breadcrumb .active { color: var(--fg-tertiary); }
.rl-sys-head .breadcrumb a { color: var(--fg-secondary); text-decoration: none; }
.rl-sys-head .breadcrumb a:hover { color: var(--accent); }

/* =========================================================================
   Announcements — list view
   ========================================================================= */

.rl-announcements { padding: 40px 0 96px; }

.rl-ann-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--border-default);
}
.rl-ann-item:first-of-type { border-top: 1px solid var(--border-default); }

.rl-ann-item__date {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-tertiary);
  padding-top: 4px;
  line-height: 1.6;
}

.rl-ann-item__title {
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-snug);
  margin: 0 0 10px;
  line-height: var(--lh-heading);
}
.rl-ann-item__title a { color: var(--fg-primary); text-decoration: none; }
.rl-ann-item__title a:hover { color: var(--accent); }

.rl-ann-item__body p {
  margin: 0 0 12px;
  color: var(--fg-secondary);
  font-size: 15px;
  line-height: 1.65;
}

.rl-ann-readmore {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--accent);
  text-decoration: none;
}


.rl-ann-edit {
  font-size: 12px;
  color: var(--fg-tertiary);
  text-decoration: none;
  display: inline-block;
  margin-top: 8px;
}
.rl-ann-edit:hover { color: var(--accent); }

.rl-ann-pagination {
  display: flex;
  gap: 6px;
  padding-top: 32px;
  flex-wrap: wrap;
}
.rl-ann-pagination .rl-btn.is-active {
  background: var(--blue-600);
  color: #fff;
  border-color: var(--blue-600);
}
.rl-ann-pagination .rl-btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

@media (max-width: 560px) {
  .rl-ann-item { grid-template-columns: 1fr; gap: 8px; }
  .rl-ann-item__date { padding-top: 0; }
}

/* =========================================================================
   Announcement — single article view
   ========================================================================= */

.rl-ann-article {
  max-width: 780px;
  padding: 40px 0 96px;
}
.rl-ann-article__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-default);
}
.rl-ann-article__head time {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-tertiary);
}
.rl-ann-article__body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--fg-primary);
}
.rl-ann-article__body p { margin: 0 0 16px; }
.rl-ann-article__body h2,
.rl-ann-article__body h3 { margin: 28px 0 14px; }
.rl-ann-article__body a { color: var(--accent); }
.rl-ann-article__body a:hover { text-decoration: underline; }
.rl-ann-article__foot {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border-default);
}

/* Force white text on anchor tags styled as primary buttons */
a.rl-btn--primary,
a.rl-btn--primary:hover,
a.rl-btn--primary:visited,
a.rl-btn--primary:focus { color: #fff !important; }