/* EnderNation Hosting — PteroCA 0.6.5
   Visual tokens intentionally mirror TheEnderHacker/webseite frontend/src/index.css. */
:root,
[data-bs-theme="dark"],
.ea-dark-scheme,
.ea-light-scheme {
  --en-bg: hsl(220 30% 8%);
  --en-bg-deep: hsl(222 34% 6%);
  --en-card: hsl(220 28% 12%);
  --en-card-2: hsl(220 25% 15%);
  --en-muted: hsl(220 25% 18%);
  --en-text: hsl(200 20% 95%);
  --en-text-muted: hsl(200 15% 63%);
  --en-primary: hsl(187 85% 50%);
  --en-primary-soft: hsl(187 75% 25%);
  --en-primary-glow: hsl(187 100% 70%);
  --en-secondary: hsl(45 93% 58%);
  --en-border: hsl(220 25% 20%);
  --en-danger: hsl(0 62% 50%);
  --en-success: hsl(158 70% 48%);
  --en-radius: .75rem;
  --en-shadow: 0 20px 55px -28px hsl(187 85% 50% / .42);
  --en-glow: 0 0 36px hsl(187 85% 50% / .18);

  --body-bg: var(--en-bg) !important;
  --body-color: var(--en-text) !important;
  --text-color: var(--en-text) !important;
  --text-muted-color: var(--en-text-muted) !important;
  --border-color: var(--en-border) !important;
  --link-color: var(--en-primary) !important;
  --sidebar-bg: hsl(220 30% 7%) !important;
  --sidebar-menu-color: var(--en-text-muted) !important;
  --sidebar-menu-active-item-bg: hsl(187 85% 50% / .10) !important;
  --sidebar-menu-active-item-color: var(--en-primary) !important;
  --content-panel-bg: var(--en-bg) !important;
  --form-control-bg: var(--en-card) !important;
  --form-control-color: var(--en-text) !important;
  --form-control-border-color: var(--en-border) !important;
  --bs-body-bg: var(--en-bg) !important;
  --bs-body-color: var(--en-text) !important;
  --bs-border-color: var(--en-border) !important;
  --bs-secondary-color: var(--en-text-muted) !important;
  color-scheme: dark !important;
}

html, body { background: var(--en-bg) !important; color: var(--en-text) !important; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; }
body { background-image: radial-gradient(circle at 82% -10%, hsl(187 85% 45% / .09), transparent 30rem), radial-gradient(circle at -10% 32%, hsl(270 60% 55% / .06), transparent 32rem) !important; }
a { color: var(--en-primary); }
a:hover { color: var(--en-primary-glow); }
.text-muted { color: var(--en-text-muted) !important; }
.text-primary { color: var(--en-primary) !important; }
.bg-primary { background-color: var(--en-primary) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--en-border) !important; }

/* Loading screen */
.en-loader { position: fixed; inset: 0; z-index: 999999; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, hsl(187 85% 35% / .13), transparent 22rem), var(--en-bg-deep); opacity: 1; visibility: visible; transition: opacity .34s ease, visibility .34s ease; }
.en-loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.en-loader-core { position: relative; display: grid; place-items: center; gap: 18px; min-width: 190px; }
.en-loader-logo { width: 82px; height: 82px; object-fit: contain; position: relative; z-index: 2; filter: drop-shadow(0 0 18px hsl(187 100% 55% / .42)); animation: enLogoPulse 1.6s ease-in-out infinite; }
.en-loader-ring { position: absolute; top: -9px; width: 100px; height: 100px; border-radius: 50%; border: 2px solid hsl(187 85% 50% / .13); border-top-color: var(--en-primary); animation: enSpin 1s linear infinite; box-shadow: 0 0 28px hsl(187 85% 50% / .12); }
.en-loader-label { margin-top: 5px; color: var(--en-text-muted); font-size: .76rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
@keyframes enSpin { to { transform: rotate(360deg); } }
@keyframes enLogoPulse { 50% { transform: scale(1.04); filter: drop-shadow(0 0 27px hsl(187 100% 55% / .58)); } }
@media (prefers-reduced-motion: reduce) { .en-loader-ring, .en-loader-logo { animation: none; } }

/* Landing */
.en-landing { background: var(--en-bg); }
.en-landing-main { padding-top: 72px; }
.en-topbar { min-height: 72px; background: hsl(220 30% 8% / .79) !important; border-bottom: 1px solid hsl(220 25% 23% / .82); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.en-topbar .navbar-toggler { border-color: var(--en-border); }
.en-topbar .nav-link { color: var(--en-text-muted) !important; font-size: .9rem; font-weight: 600; padding: .6rem .8rem !important; border-radius: .6rem; }
.en-topbar .nav-link:hover { color: var(--en-text) !important; background: hsl(187 85% 50% / .07); }
.en-brand { display: flex; align-items: center; gap: .7rem; color: var(--en-text) !important; text-decoration: none; }
.en-brand img { max-width: 48px; object-fit: contain; filter: drop-shadow(0 0 10px hsl(187 85% 50% / .28)); }
.en-brand-copy { display: flex; flex-direction: column; line-height: 1.05; }
.en-brand-copy strong { font-size: 1rem; letter-spacing: -.015em; }
.en-brand-copy small { margin-top: 4px; font-size: .57rem; letter-spacing: .18em; color: var(--en-primary); font-weight: 800; }
.en-hosting-hero { position: relative; overflow: hidden; min-height: 690px; display: flex; align-items: center; padding: 88px 0 90px; background: linear-gradient(180deg, hsl(220 30% 8%), hsl(220 30% 8% / .96)); }
.en-hosting-hero::before { content: ""; position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(hsl(187 85% 50% / .07) 1px, transparent 1px), linear-gradient(90deg, hsl(187 85% 50% / .07) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to bottom, black 0%, transparent 88%); }
.en-grid-glow { position: absolute; width: 620px; height: 620px; border-radius: 50%; right: -160px; top: -150px; background: hsl(187 85% 44% / .13); filter: blur(110px); }
.en-eyebrow, .en-kicker { display: inline-flex; align-items: center; gap: .6rem; color: var(--en-primary); font-size: .7rem; letter-spacing: .15em; font-weight: 800; text-transform: uppercase; }
.en-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--en-success); box-shadow: 0 0 12px hsl(158 70% 48% / .7); }
.en-hosting-hero h1 { margin: 20px 0 20px; max-width: 820px; font-size: clamp(2.6rem, 5.6vw, 5.2rem); line-height: .98; letter-spacing: -.055em; font-weight: 800; color: var(--en-text); }
.en-hosting-hero h1 span { background: linear-gradient(110deg, var(--en-primary), hsl(190 100% 72%), var(--en-primary)); background-clip: text; -webkit-background-clip: text; color: transparent; }
.en-hero-copy { max-width: 670px; color: var(--en-text-muted); font-size: 1.08rem; line-height: 1.75; }
.en-btn { border-radius: .65rem !important; padding: .7rem 1rem !important; font-weight: 700 !important; border: 1px solid transparent !important; transition: transform .17s ease, box-shadow .17s ease, background .17s ease, border-color .17s ease !important; }
.en-btn:hover { transform: translateY(-1px); }
.en-btn-lg { padding: .9rem 1.2rem !important; }
.en-btn-primary, .btn.primary { color: hsl(220 30% 8%) !important; background: linear-gradient(135deg, hsl(187 85% 44%), hsl(187 100% 61%)) !important; box-shadow: 0 10px 28px -15px hsl(187 100% 60% / .8) !important; }
.en-btn-primary:hover, .btn.primary:hover { box-shadow: 0 14px 34px -15px hsl(187 100% 60% / .95) !important; }
.en-btn-ghost { color: var(--en-text) !important; background: hsl(220 25% 14% / .8) !important; border-color: var(--en-border) !important; }
.en-btn-ghost:hover { background: hsl(220 25% 18%) !important; border-color: hsl(187 85% 50% / .35) !important; }
.en-trust-row { display: flex; flex-wrap: wrap; gap: 24px; color: var(--en-text-muted); font-size: .78rem; font-weight: 600; }
.en-trust-row i { margin-right: 7px; color: var(--en-primary); }
.en-console-preview { position: relative; border: 1px solid hsl(187 75% 45% / .23); border-radius: 1.2rem; background: hsl(220 28% 10% / .92); box-shadow: 0 35px 95px -38px hsl(187 85% 50% / .43), inset 0 1px hsl(0 0% 100% / .03); overflow: hidden; transform: perspective(1000px) rotateY(-2deg) rotateX(1deg); }
.en-console-preview::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg, transparent 34%, hsl(187 100% 65% / .035), transparent 68%); }
.en-console-head { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 16px; border-bottom: 1px solid var(--en-border); color: var(--en-text-muted); font-size: .68rem; font-weight: 700; letter-spacing: .08em; }
.en-window-dots { display: flex; gap: 5px; margin-right: auto; }.en-window-dots i { width: 7px; height: 7px; border-radius: 50%; background: hsl(220 15% 37%); }.en-window-dots i:nth-child(2) { background: var(--en-secondary); }.en-window-dots i:nth-child(3) { background: var(--en-primary); }
.en-status { margin-left: auto; color: hsl(158 70% 60%); }.en-status i { display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; background:var(--en-success); box-shadow:0 0 8px var(--en-success); }
.en-console-body { padding: 24px; }
.en-preview-title { display:flex; align-items:center; gap:14px; margin-bottom: 22px; }.en-preview-title small { display:block; font-size:.62rem; color:var(--en-text-muted); letter-spacing:.12em; }.en-preview-title strong { display:block; margin-top:3px; font-size:1rem; }.en-preview-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:.8rem; color:var(--en-primary); background:hsl(187 85% 50% / .1); border:1px solid hsl(187 85% 50% / .14); }
.en-metric-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.en-metric-grid > div { position:relative; padding:15px; border-radius:.75rem; background:hsl(220 25% 15% / .8); border:1px solid hsl(220 25% 22%); overflow:hidden; }.en-metric-grid span { display:block; color:var(--en-text-muted); font-size:.61rem; letter-spacing:.12em; }.en-metric-grid strong { display:block; margin-top:5px; font-size:.98rem; }.en-metric-grid em { position:absolute; left:0; bottom:0; height:2px; width:var(--w); background:linear-gradient(90deg,var(--en-primary),var(--en-primary-glow)); box-shadow:0 0 8px var(--en-primary); }
.en-terminal { margin-top: 12px; padding: 14px; min-height: 89px; border: 1px solid hsl(220 25% 20%); border-radius: .7rem; background: hsl(222 35% 5%); color: hsl(200 15% 68%); font: 500 .72rem/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; }.en-terminal span { color:var(--en-primary); }.en-terminal-cursor { animation:enBlink .9s step-end infinite; }@keyframes enBlink { 50%{opacity:0} }
.en-section { padding: 92px 0; }.en-section-muted { background:hsl(220 25% 10% / .6); border-top:1px solid hsl(220 25% 17%); border-bottom:1px solid hsl(220 25% 17%); }.en-section-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:36px; }.en-section-head h2 { margin:7px 0 0; font-size:clamp(1.8rem,3vw,2.7rem); letter-spacing:-.035em; }.en-section-head > a { text-decoration:none; color:var(--en-text-muted); font-size:.85rem; font-weight:650; }.en-section-head > a:hover { color:var(--en-primary); }
.en-landing .custom-card { border:1px solid var(--en-border) !important; border-radius:var(--en-radius) !important; background-color:var(--en-card) !important; box-shadow:none !important; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease !important; }.en-landing .custom-card:hover { transform:translateY(-4px); border-color:hsl(187 85% 50% / .3) !important; box-shadow:var(--en-shadow) !important; }.en-landing .custom-card::before { background:linear-gradient(180deg,hsl(220 30% 8% / .45),hsl(220 30% 8% / .94)) !important; }.en-landing .card-icon { background:hsl(187 85% 50% / .1) !important; color:var(--en-primary) !important; }.en-landing .product-price { color:var(--en-primary) !important; }.en-landing .btn-primary { background:var(--en-primary) !important; color:var(--en-bg) !important; border:0 !important; border-radius:.65rem !important; font-weight:700; }
.en-cta-panel { display:flex; align-items:center; justify-content:space-between; gap:32px; padding:38px; border:1px solid hsl(187 85% 50% / .2); border-radius:1rem; background:linear-gradient(115deg,hsl(187 85% 50% / .08),hsl(220 28% 12%) 55%); box-shadow:var(--en-glow); }.en-cta-panel h2 { margin:8px 0; }.en-cta-panel p { max-width:720px; margin:0; color:var(--en-text-muted); }
.en-footer { padding:28px 0; background:hsl(220 30% 6%); border-top:1px solid var(--en-border); }

/* EasyAdmin / panel */
.ea .wrapper, .ea .main-content, .content-wrapper { background: transparent !important; }
.sidebar-wrapper, .sidebar { background: hsl(220 30% 7% / .96) !important; border-right: 1px solid var(--en-border) !important; }
.main-header .navbar, .responsive-header, .content-top { background: hsl(220 30% 8% / .78) !important; backdrop-filter: blur(16px); border-color: var(--en-border) !important; }
.main-header .logo, .responsive-logo { color: var(--en-text) !important; }
.logo-custom img { max-height: 40px; }
.menu .menu-item a, .menu .menu-item .menu-item-label { color: var(--en-text-muted) !important; }
.menu .menu-item.active > a, .menu .menu-item a:hover { color: var(--en-primary) !important; background: hsl(187 85% 50% / .085) !important; border-radius: .55rem; }
.menu .menu-icon { color: currentColor !important; }
.content-wrapper { padding-bottom: 2rem; }
.content-header-title .title, .content-header h1, h1, h2, h3, h4, h5, h6 { color: var(--en-text); }
.card, .dashboard-header, .content-panel, .datagrid, .field-collection-item, .modal-content, .dropdown-menu, .popover { background: var(--en-card) !important; border: 1px solid var(--en-border) !important; border-radius: var(--en-radius) !important; color: var(--en-text) !important; box-shadow: 0 18px 50px -32px rgb(0 0 0 / .8); }
.card:hover { border-color: hsl(187 85% 50% / .23) !important; }
.card-header, .card-footer, .modal-header, .modal-footer { border-color: var(--en-border) !important; background: transparent !important; }
.server-card { overflow:hidden; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }.server-card:hover { transform:translateY(-2px); box-shadow:var(--en-shadow); }
.server-card .bg-light, .bg-light { background:var(--en-muted) !important; }
.badge-success { background:hsl(158 70% 48% / .14) !important; color:hsl(158 70% 66%) !important; border:1px solid hsl(158 70% 48% / .2); }.badge-warning { background:hsl(45 93% 58% / .12) !important; color:var(--en-secondary) !important; }
.form-control, .form-select, input, textarea, select { background-color: hsl(220 25% 11%) !important; border-color: var(--en-border) !important; color: var(--en-text) !important; border-radius: .6rem !important; }.form-control:focus, .form-select:focus, input:focus, textarea:focus { border-color:hsl(187 85% 50% / .55) !important; box-shadow:0 0 0 3px hsl(187 85% 50% / .1) !important; }
.form-control::placeholder, input::placeholder, textarea::placeholder { color:hsl(200 10% 44%) !important; }
.table, .table > :not(caption) > * > * { --bs-table-bg:transparent !important; --bs-table-color:var(--en-text) !important; --bs-table-border-color:var(--en-border) !important; }
.btn-primary, .action-new, .btn.btn-primary { background:linear-gradient(135deg,hsl(187 85% 43%),hsl(187 100% 60%)) !important; border-color:transparent !important; color:var(--en-bg) !important; font-weight:700 !important; border-radius:.6rem !important; }.btn-secondary, .btn.secondary { background:var(--en-muted) !important; border-color:var(--en-border) !important; color:var(--en-text) !important; border-radius:.6rem !important; }.btn-outline-primary { border-color:hsl(187 85% 50% / .5) !important; color:var(--en-primary) !important; }.btn-outline-primary:hover { background:hsl(187 85% 50% / .1) !important; }
.global-footer { display: none !important; }

.en-main-site-chip { display:flex; align-items:center; gap:8px; margin:10px 13px 14px; padding:10px 12px; border:1px solid hsl(187 85% 50% / .16); border-radius:.65rem; color:var(--en-text-muted) !important; background:hsl(187 85% 50% / .045); text-decoration:none !important; font-size:.76rem; font-weight:650; transition:.18s ease; }.en-main-site-chip:hover { color:var(--en-primary) !important; background:hsl(187 85% 50% / .08); border-color:hsl(187 85% 50% / .3); }.en-main-site-chip i { color:var(--en-primary); }
.en-dashboard-hero { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:24px; padding:28px; border:1px solid hsl(187 85% 50% / .16); border-radius:1rem; background:linear-gradient(118deg,hsl(187 85% 50% / .085),hsl(220 28% 12%) 55%,hsl(270 60% 55% / .04)); box-shadow:var(--en-glow); }.en-dashboard-hero h1 { margin:7px 0 6px; font-size:clamp(1.55rem,2.6vw,2.2rem); letter-spacing:-.035em; }.en-dashboard-hero p { margin:0; color:var(--en-text-muted); }.en-dashboard-actions { display:flex; flex-wrap:wrap; gap:10px; flex-shrink:0; }

/* Authentication */
.en-auth-page { min-height:100vh; background:var(--en-bg-deep) !important; }.en-auth-shell { background:var(--en-bg) !important; }.en-auth-brand { position:relative; overflow:hidden; background:linear-gradient(145deg,hsl(220 30% 8%),hsl(218 35% 10%)) !important; }.en-auth-brand::before { content:""; position:absolute; inset:0; background-image:linear-gradient(hsl(187 85% 50% / .045) 1px,transparent 1px),linear-gradient(90deg,hsl(187 85% 50% / .045) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(140deg,black,transparent 78%); }.en-auth-brand::after { content:""; position:absolute; width:430px;height:430px;border-radius:50%;background:hsl(187 85% 50% / .13);filter:blur(100px);right:-180px;top:-100px; }.en-auth-brand .login-brand-content { position:relative;z-index:2;max-width:540px; }.en-auth-brand .login-logo { display:inline-block; margin-bottom:46px; }.en-auth-brand .login-logo img { max-height:86px; max-width:230px; filter:drop-shadow(0 0 22px hsl(187 85% 50% / .25)); }.en-auth-brand .login-brand-title { margin-top:18px; font-size:clamp(2rem,4vw,3.6rem); line-height:1.02; letter-spacing:-.05em; }.en-auth-brand .login-brand-subtitle { color:var(--en-text-muted) !important; max-width:560px; line-height:1.7; }.en-auth-brand .login-feature-item { color:var(--en-text-muted) !important; }.en-auth-brand .login-feature-item i { color:var(--en-primary) !important; background:hsl(187 85% 50% / .08) !important; border:1px solid hsl(187 85% 50% / .13); }
.en-auth-form-side { background:hsl(220 30% 7%) !important; }.en-auth-card { background:var(--en-card) !important; border:1px solid var(--en-border); border-radius:1rem; box-shadow:0 30px 80px -42px black; padding:32px !important; }.en-auth-card .text-dark { color:var(--en-text) !important; }.en-auth-card label { color:var(--en-text-muted) !important; }.en-auth-mini-brand { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:26px; color:var(--en-text);font-weight:750; }.en-auth-mini-brand img { object-fit:contain;filter:drop-shadow(0 0 10px hsl(187 85% 50% / .28)); }.en-auth-mini-brand b { display:block; color:var(--en-primary);font-size:.56rem;letter-spacing:.15em; }.en-auth-legal { display:flex; justify-content:center; gap:7px; color:var(--en-text-muted);font-size:.7rem; }.en-auth-legal a { color:var(--en-text-muted);text-decoration:none; }.en-auth-legal a:hover { color:var(--en-primary); }.en-auth-back { position:fixed;top:18px;left:20px;z-index:50;display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:.6rem;background:hsl(220 28% 12% / .72);backdrop-filter:blur(12px);border:1px solid var(--en-border);color:var(--en-text-muted);text-decoration:none;font-size:.76rem;font-weight:650; }.en-auth-back:hover { color:var(--en-primary);border-color:hsl(187 85% 50% / .3); }

/* Store / miscellaneous polish */
.price-preview, .server-specs > div, .quick-actions, .activity-list { border-color:var(--en-border) !important; }
.nav-tabs { border-color:var(--en-border) !important; }.nav-tabs .nav-link { color:var(--en-text-muted) !important; }.nav-tabs .nav-link.active { color:var(--en-primary) !important; background:hsl(187 85% 50% / .07) !important; border-color:var(--en-border) var(--en-border) var(--en-card) !important; }
.alert { border-radius:.7rem !important; border-width:1px !important; }.alert-success { background:hsl(158 70% 48% / .08) !important;color:hsl(158 70% 72%) !important;border-color:hsl(158 70% 48% / .2) !important; }.alert-danger { background:hsl(0 62% 50% / .09) !important;color:hsl(0 80% 75%) !important;border-color:hsl(0 62% 50% / .2) !important; }

@media (max-width: 991px) {
  .en-hosting-hero { padding-top:62px; min-height:auto; }.en-console-preview { transform:none; }.en-section { padding:68px 0; }.en-cta-panel, .en-dashboard-hero { align-items:flex-start; flex-direction:column; }.en-dashboard-actions { width:100%; }.en-auth-back span { display:none; }
}
@media (max-width: 767px) {
  .en-hosting-hero h1 { font-size:2.65rem; }.en-metric-grid { grid-template-columns:1fr 1fr; }.en-section-head { align-items:flex-start;flex-direction:column; }.en-cta-panel { padding:26px; }.en-trust-row { gap:14px; }.en-auth-card { border-radius:.8rem;padding:24px 18px !important; }.en-auth-back { top:10px;left:10px; }
}

/* PteroCA Marketplace sidebar compatibility.
   This component is built into PteroCA's Theme/Plugin manager and depends on the
   upstream panel.css for fixed preview dimensions. Keep it compact and usable on mobile. */
#plugin-page-layout { align-items: flex-start; }
#marketplace-sidebar.marketplace-sidebar-panel {
  background: var(--en-card) !important;
  border-color: var(--en-border) !important;
}
#marketplace-sidebar .marketplace-sort-bar,
#marketplace-sidebar .marketplace-products-list,
#marketplace-sidebar .marketplace-sidebar-footer {
  background: var(--en-card) !important;
  border-color: var(--en-border) !important;
}
#marketplace-sidebar .marketplace-product-item { border-color: var(--en-border) !important; }
#marketplace-sidebar .marketplace-product-item:hover { background: hsl(187 85% 50% / .06) !important; }
#marketplace-sidebar .marketplace-product-name { color: var(--en-text) !important; }
#marketplace-sidebar .marketplace-product-desc,
#marketplace-sidebar .marketplace-product-meta,
#marketplace-sidebar .mp-page-info { color: var(--en-text-muted) !important; }
#marketplace-sidebar .marketplace-sort-bar .form-select {
  background-color: var(--en-muted) !important;
  color: var(--en-text) !important;
  border-color: var(--en-border) !important;
}
@media (max-width: 1199.98px) {
  #plugin-page-layout { flex-direction: column !important; }
  #plugin-page-layout > .flex-grow-1 { width: 100%; }
  #marketplace-sidebar.marketplace-sidebar-panel {
    width: 100% !important;
    min-width: 0 !important;
    max-height: 480px !important;
  }
}

/* =========================================================
   v1.0.3 — true dark-mode + readability / server UI fixes
   ========================================================= */

/* PteroCA/EasyAdmin must actually operate in dark mode. v1.0.2 visually forced
   a dark palette while EasyAdmin still behaved like a light theme, causing the
   painful white hover/table states and near-black text on dark cards. */
.ea-dark-scheme,
body.ea-dark-scheme,
[data-bs-theme="dark"] {
  --bs-body-bg: var(--en-bg) !important;
  --bs-body-color: var(--en-text) !important;
  --bs-heading-color: var(--en-text) !important;
  --bs-card-bg: var(--en-card) !important;
  --bs-card-cap-bg: var(--en-card-2) !important;
  --bs-tertiary-bg: var(--en-card-2) !important;
  --bs-secondary-bg: var(--en-muted) !important;
  --bs-border-color: var(--en-border) !important;
  --stripe-gray-50: hsl(220 26% 14%) !important;
  --stripe-gray-100: hsl(220 25% 16%) !important;
  --stripe-gray-200: hsl(220 24% 20%) !important;
  --stripe-gray-300: hsl(220 22% 27%) !important;
  --stripe-gray-400: hsl(210 15% 55%) !important;
  --stripe-gray-500: hsl(205 14% 66%) !important;
  --stripe-gray-600: hsl(205 15% 74%) !important;
  --stripe-gray-700: hsl(205 18% 84%) !important;
  --stripe-gray-800: hsl(200 20% 91%) !important;
  --stripe-gray-900: hsl(200 20% 96%) !important;
}

.ea-dark-scheme h1,
.ea-dark-scheme h2,
.ea-dark-scheme h3,
.ea-dark-scheme h4,
.ea-dark-scheme h5,
.ea-dark-scheme h6,
.ea-dark-scheme .title,
.ea-dark-scheme .card-title,
.ea-dark-scheme .content-header-title,
.ea-dark-scheme .form-label,
.ea-dark-scheme label {
  color: var(--en-text) !important;
}

.ea-dark-scheme .card,
.ea-dark-scheme .content-panel,
.ea-dark-scheme .content-panel-body,
.ea-dark-scheme .list-group-item,
.ea-dark-scheme .modal-content,
.ea-dark-scheme .dropdown-menu {
  background: var(--en-card) !important;
  color: var(--en-text) !important;
  border-color: var(--en-border) !important;
}

.ea-dark-scheme .card-header,
.ea-dark-scheme .modal-header,
.ea-dark-scheme .modal-footer {
  background: var(--en-card-2) !important;
  color: var(--en-text) !important;
  border-color: var(--en-border) !important;
}

.ea-dark-scheme .card-header h5,
.ea-dark-scheme .card-header .card-title,
.ea-dark-scheme .card-body .text-center h6,
.ea-dark-scheme .list-group-item h6,
.ea-dark-scheme .dashboard-header h4,
.ea-dark-scheme .server-stats-row .card-text {
  color: var(--en-text) !important;
}

.ea-dark-scheme .card-header i,
.ea-dark-scheme .server-stats-row .card-title,
.ea-dark-scheme .list-group-item small,
.ea-dark-scheme .text-muted {
  color: var(--en-text-muted) !important;
}

/* Kill the bright-white dashboard/action strips. */
.ea-dark-scheme .btn-outline-primary,
.ea-dark-scheme .btn-outline-secondary,
.ea-dark-scheme .btn-light,
.ea-dark-scheme a.btn-light {
  background: hsl(220 25% 15%) !important;
  border-color: var(--en-border) !important;
  color: var(--en-text) !important;
}
.ea-dark-scheme .btn-outline-primary { color: var(--en-primary) !important; border-color: hsl(187 65% 38% / .55) !important; }
.ea-dark-scheme .btn-outline-primary i { color: var(--en-primary) !important; }
.ea-dark-scheme .btn-outline-primary:hover,
.ea-dark-scheme .btn-outline-primary:focus,
.ea-dark-scheme .btn-outline-secondary:hover,
.ea-dark-scheme .btn-outline-secondary:focus,
.ea-dark-scheme .btn-light:hover,
.ea-dark-scheme .btn-light:focus {
  background: hsl(187 70% 18% / .5) !important;
  border-color: hsl(187 80% 48% / .65) !important;
  color: var(--en-text) !important;
  box-shadow: 0 0 0 3px hsl(187 85% 50% / .08) !important;
}

/* Tables: dark headers, dark hover, readable selected rows. */
.ea-dark-scheme .table,
.ea-dark-scheme .datagrid {
  --bs-table-bg: transparent !important;
  --bs-table-color: var(--en-text) !important;
  --bs-table-border-color: var(--en-border) !important;
  --bs-table-hover-bg: hsl(187 85% 50% / .065) !important;
  --bs-table-hover-color: var(--en-text) !important;
  color: var(--en-text) !important;
}
.ea-dark-scheme .table thead,
.ea-dark-scheme .table thead th,
.ea-dark-scheme .table-light,
.ea-dark-scheme .table-light > * {
  background: hsl(220 27% 16%) !important;
  color: var(--en-text) !important;
  border-color: var(--en-border) !important;
}
.ea-dark-scheme .table tbody tr,
.ea-dark-scheme .table tbody td,
.ea-dark-scheme .table tbody th {
  background: transparent !important;
  color: var(--en-text) !important;
  border-color: var(--en-border) !important;
}
.ea-dark-scheme .table tbody tr:hover > *,
.ea-dark-scheme .table-hover tbody tr:hover > * {
  background: hsl(187 70% 17% / .38) !important;
  color: var(--en-text) !important;
  box-shadow: inset 0 0 0 9999px transparent !important;
}
.ea-dark-scheme .table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: hsl(220 25% 14% / .55) !important;
  color: var(--en-text) !important;
}

/* Forms, read-only fields and search bars. */
.ea-dark-scheme .form-control,
.ea-dark-scheme .form-select,
.ea-dark-scheme .form-control-plaintext,
.ea-dark-scheme .input-group-text,
.ea-dark-scheme .form-widget,
.ea-dark-scheme .content-search input {
  background-color: hsl(220 26% 13%) !important;
  color: var(--en-text) !important;
  border-color: var(--en-border) !important;
}
.ea-dark-scheme .form-control:disabled,
.ea-dark-scheme .form-select:disabled,
.ea-dark-scheme .form-control[readonly] {
  background-color: hsl(220 25% 16%) !important;
  color: hsl(200 16% 78%) !important;
  opacity: 1 !important;
}
.ea-dark-scheme .form-control::placeholder,
.ea-dark-scheme .content-search input::placeholder { color: hsl(205 12% 58%) !important; }

/* Empty-state icon circles were still pure white. */
.ea-dark-scheme .bg-light,
.ea-dark-scheme .card-body .text-center .bg-light {
  background: hsl(220 24% 18%) !important;
  color: var(--en-text-muted) !important;
}

/* Keep readable dashboard amounts even if the upstream component uses an inline
   Stripe color variable. */
.ea-dark-scheme .en-panel-dashboard h2,
.ea-dark-scheme .en-panel-dashboard .fw-bold,
.ea-dark-scheme .en-panel-dashboard .card-body h2 {
  color: var(--en-text) !important;
}

/* Server console / stats */
#terminal {
  min-height: 430px;
  background: #070b12 !important;
  border-color: hsl(187 55% 35% / .28) !important;
}
#terminal .xterm { min-height: 400px; }
#command {
  background: hsl(220 30% 10%) !important;
  color: var(--en-text) !important;
  border-color: var(--en-border) !important;
}
.server-stats-row .card {
  background: var(--en-card) !important;
  border-color: var(--en-border) !important;
}
.server-stats-row .card-title { color: var(--en-text-muted) !important; }
.server-stats-row .card-text,
.server-stats-row [data-software],
.server-stats-row [data-uptime],
.server-stats-row [data-cpu-load],
.server-stats-row [data-memory],
.server-stats-row [data-disk],
.server-stats-row [data-network-inbound],
.server-stats-row [data-network-outbound] { color: var(--en-text) !important; }
.server-stats-row .fa-3x { color: hsl(200 12% 68%) !important; }
.en-nowrap-address,
.server-stats-row [data-ip] {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  display: inline-block;
  max-width: 100%;
  font-size: .79rem;
  letter-spacing: -.015em;
}

/* Navigation chips injected into the panel sidebar. */
.en-main-site-chip {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: .55rem .75rem;
  padding: .62rem .72rem;
  border: 1px solid var(--en-border);
  border-radius: .65rem;
  background: hsl(220 25% 12%);
  color: var(--en-text-muted) !important;
  text-decoration: none !important;
  font-size: .78rem;
  font-weight: 650;
}
.en-main-site-chip:hover {
  color: var(--en-primary) !important;
  background: hsl(187 85% 50% / .075);
  border-color: hsl(187 85% 50% / .3);
}
.en-main-web-chip { margin-top: .25rem; opacity: .9; }

@media (max-width: 1199.98px) {
  #terminal { min-height: 360px; }
  #terminal .xterm { min-height: 330px; }
}
@media (max-width: 767.98px) {
  .server-stats-row { min-width: 0 !important; }
  .en-nowrap-address, .server-stats-row [data-ip] { font-size: .72rem; }
}

/* =========================================================
   v1.1.0 — EnderNation Control Center redesign
   ========================================================= */

:root,
.ea-dark-scheme {
  --en-panel-surface: hsl(220 29% 9%);
  --en-panel-surface-2: hsl(220 27% 11%);
  --en-panel-surface-3: hsl(220 25% 14%);
  --en-panel-line: hsl(212 24% 21%);
  --en-panel-line-soft: hsl(212 24% 21% / .66);
  --en-panel-cyan: hsl(187 90% 52%);
  --en-panel-cyan-soft: hsl(187 90% 52% / .10);
  --en-panel-cyan-line: hsl(187 90% 52% / .28);
  --en-panel-shadow: 0 24px 70px -44px rgba(0, 0, 0, .96), 0 0 0 1px rgba(255,255,255,.015) inset;
}

/* Let EnderNation own the layout instead of EasyAdmin's draggable widths. */
#sidebar-resizer-handler,
#content-resizer-handler,
.resizer-handler {
  display: none !important;
  pointer-events: none !important;
}

.main-content {
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
  flex: 1 1 auto !important;
}

.content-wrapper,
article.content,
.content-body,
.en-panel-dashboard,
.en-servers-page {
  min-width: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

.content-wrapper {
  padding: 0 clamp(16px, 1.7vw, 32px) 32px !important;
}

article.content {
  padding-inline: 0 !important;
}

.content-body {
  padding-inline: 0 !important;
}

/* Premium shell */
.sidebar-wrapper,
.sidebar {
  background:
    radial-gradient(circle at 20% 0%, hsl(187 90% 50% / .07), transparent 17rem),
    linear-gradient(180deg, hsl(220 34% 6%), hsl(220 31% 7%)) !important;
  border-right: 1px solid hsl(212 24% 20% / .85) !important;
}

.main-header .navbar {
  min-height: 138px !important;
  padding: 12px 12px 15px !important;
  background: transparent !important;
  border-bottom: 1px solid var(--en-panel-line-soft) !important;
}

#header-logo,
#header-logo .logo,
#header-logo .logo-custom {
  width: 100% !important;
  min-height: 108px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#header-logo .logo {
  padding: 8px !important;
  border-radius: 16px !important;
  transition: background .18s ease, transform .18s ease !important;
}

#header-logo .logo:hover {
  background: hsl(187 90% 50% / .055) !important;
}

#header-logo .logo-custom img {
  max-width: 168px !important;
  width: auto !important;
  max-height: 105px !important;
  height: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 8px 24px hsl(187 90% 45% / .16));
}

#header-logo::after {
  content: "HOSTING CONTROL";
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  color: hsl(187 85% 63% / .72);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .20em;
  white-space: nowrap;
}

.content-top {
  min-height: 58px !important;
  background: hsl(220 30% 8% / .72) !important;
  border-bottom: 1px solid var(--en-panel-line-soft) !important;
  box-shadow: 0 10px 38px -35px black;
  backdrop-filter: blur(18px) saturate(130%);
}

.content-top::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, hsl(187 90% 52% / .22), transparent 72%);
  pointer-events: none;
}

/* Sidebar navigation */
.sidebar .menu {
  padding: 5px 10px 18px !important;
}

.menu .menu-header {
  color: hsl(205 16% 54%) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  margin: 18px 9px 8px !important;
}

.menu .menu-item > a {
  min-height: 38px !important;
  margin: 2px 0 !important;
  padding: 8px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  color: hsl(205 18% 72%) !important;
  font-weight: 600 !important;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease !important;
}

.menu .menu-item > a:hover {
  transform: translateX(1px);
  color: var(--en-text) !important;
  background: hsl(187 90% 52% / .055) !important;
  border-color: hsl(187 90% 52% / .09) !important;
}

.menu .menu-item.active > a,
.menu .menu-item.active > .menu-item-contents,
.menu .menu-item.active > a:hover {
  color: hsl(190 100% 82%) !important;
  background: linear-gradient(90deg, hsl(187 90% 52% / .16), hsl(187 90% 52% / .055)) !important;
  border-color: hsl(187 90% 52% / .20) !important;
  box-shadow: inset 3px 0 0 var(--en-panel-cyan), 0 8px 24px -22px hsl(187 90% 52% / .7) !important;
}

.menu .menu-item.active > a .menu-icon,
.menu .menu-item.active > a i {
  color: var(--en-panel-cyan) !important;
}

/* PteroCA purple/blue active remnants */
.btn-group .btn-outline-primary.active,
.en-view-toggle button.active,
.nav-pills .nav-link.active {
  background: hsl(187 90% 52% / .13) !important;
  color: var(--en-panel-cyan) !important;
  border-color: hsl(187 90% 52% / .42) !important;
  box-shadow: inset 0 0 0 1px hsl(187 90% 52% / .04) !important;
}

/* Universal EnderNation card language */
.card,
.dashboard-header,
.content-panel,
.datagrid,
.modal-content,
.dropdown-menu {
  background:
    linear-gradient(180deg, hsl(220 27% 12% / .98), hsl(220 29% 10% / .98)) !important;
  border-color: var(--en-panel-line) !important;
  box-shadow: var(--en-panel-shadow) !important;
}

.card {
  border-radius: 14px !important;
}

.card:hover {
  border-color: hsl(187 85% 50% / .19) !important;
}

.card-header {
  padding: 17px 20px !important;
  background: linear-gradient(90deg, hsl(220 25% 15%), hsl(220 27% 12%)) !important;
  border-bottom-color: var(--en-panel-line) !important;
}

.card-header h5,
.card-header .card-title {
  color: var(--en-text) !important;
  letter-spacing: -.01em;
}

/* Dashboard gains the same control-center visual language. */
.en-panel-dashboard {
  padding-top: 8px;
}

.en-dashboard-hero,
.en-page-hero {
  position: relative;
  overflow: hidden;
  border-radius: 18px !important;
  border: 1px solid hsl(187 90% 52% / .18) !important;
  background:
    radial-gradient(circle at 7% -35%, hsl(187 90% 52% / .17), transparent 23rem),
    linear-gradient(118deg, hsl(220 28% 12%), hsl(220 30% 9%)) !important;
  box-shadow: 0 28px 70px -48px hsl(187 90% 52% / .56), inset 0 1px rgba(255,255,255,.025) !important;
}

.en-dashboard-hero::after,
.en-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .23;
  background-image:
    linear-gradient(hsl(187 90% 52% / .045) 1px, transparent 1px),
    linear-gradient(90deg, hsl(187 90% 52% / .045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(90deg, black, transparent 67%);
}

.en-dashboard-hero > *,
.en-page-hero > * {
  position: relative;
  z-index: 1;
}

.en-dashboard-hero {
  padding: 31px 33px !important;
}

.en-dashboard-hero h1 {
  font-size: clamp(1.65rem, 2.3vw, 2.35rem) !important;
}

/* Remove the 'white strip' feel from quick actions. */
.en-panel-dashboard .btn-outline-primary,
.en-panel-dashboard .btn-outline-secondary {
  min-height: 45px;
  background: hsl(220 26% 13%) !important;
  border-color: hsl(212 24% 22%) !important;
  color: hsl(200 18% 86%) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.018) !important;
}

.en-panel-dashboard .btn-outline-primary i {
  color: var(--en-panel-cyan) !important;
}

.en-panel-dashboard .btn-outline-primary:hover,
.en-panel-dashboard .btn-outline-secondary:hover {
  background: hsl(187 70% 16% / .45) !important;
  border-color: hsl(187 90% 52% / .29) !important;
  color: white !important;
}

/* High-quality page header used by the custom server fleet page. */
.en-page-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin: 0 0 25px;
  padding: 25px 27px;
}

.en-page-hero-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: hsl(187 90% 52% / .11);
  border: 1px solid hsl(187 90% 52% / .19);
  color: var(--en-panel-cyan);
  box-shadow: 0 12px 28px -22px hsl(187 90% 52% / .8);
  font-size: 1.05rem;
}

.en-page-hero-copy h1 {
  margin: 4px 0 3px;
  font-size: clamp(1.45rem, 2vw, 2rem);
  letter-spacing: -.035em;
}

.en-page-hero-copy p {
  margin: 0;
  color: var(--en-text-muted);
  font-size: .85rem;
}

.en-page-hero-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.en-view-toggle {
  display: inline-flex;
  overflow: hidden;
  padding: 3px;
  border-radius: 10px;
  border: 1px solid var(--en-panel-line);
  background: hsl(220 28% 9%);
}

.en-view-toggle button {
  width: 37px;
  height: 33px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--en-text-muted);
  transition: .16s ease;
}

.en-view-toggle button:hover {
  color: var(--en-text);
  background: hsl(220 24% 16%);
}

/* Custom EnderNation server cards */
.en-server-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 410px), 1fr));
  gap: clamp(18px, 2vw, 28px);
  align-items: stretch;
}

.en-server-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  border: 1px solid var(--en-panel-line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 90% 100%, hsl(187 90% 52% / .055), transparent 18rem),
    linear-gradient(180deg, hsl(220 28% 11%), hsl(220 30% 8.5%));
  box-shadow: 0 27px 72px -54px black, inset 0 1px rgba(255,255,255,.025);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.en-server-card:hover {
  transform: translateY(-3px);
  border-color: hsl(187 90% 52% / .28);
  box-shadow: 0 34px 80px -52px hsl(187 90% 52% / .34), inset 0 1px rgba(255,255,255,.035);
}

.en-server-card-topbar {
  min-height: 41px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border-bottom: 1px solid var(--en-panel-line-soft);
  background: hsl(220 32% 7% / .78);
}

.en-server-window-dots {
  display: flex;
  gap: 5px;
}
.en-server-window-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: hsl(213 12% 40%);
}
.en-server-window-dots span:nth-child(2) { background: var(--en-secondary); }
.en-server-window-dots span:nth-child(3) { background: var(--en-panel-cyan); }

.en-server-card-node {
  color: hsl(205 13% 57%);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.en-server-card-status-wrap {
  justify-self: end;
}

.en-server-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 23px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid hsl(212 22% 24%);
  background: hsl(220 24% 15%);
  color: hsl(205 14% 72%);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.en-server-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 9px currentColor;
}
.en-server-status.is-running { color: hsl(158 77% 61%); border-color: hsl(158 70% 48% / .23); background: hsl(158 70% 48% / .08); }
.en-server-status.is-starting { color: hsl(45 93% 63%); border-color: hsl(45 93% 58% / .20); background: hsl(45 93% 58% / .07); }
.en-server-status.is-stopped { color: hsl(205 15% 66%); }
.en-server-status.is-offline,
.en-server-status.is-suspended { color: hsl(0 78% 70%); border-color: hsl(0 72% 55% / .2); background: hsl(0 72% 55% / .07); }

.en-server-card-visual {
  position: relative;
  min-height: 176px;
  display: block;
  overflow: hidden;
  background: hsl(220 30% 8%);
}

.en-server-card-visual img,
.en-server-card-visual-fallback {
  width: 100%;
  height: 190px;
  display: block;
  object-fit: cover;
}

.en-server-card-visual img {
  filter: saturate(.96) contrast(1.04) brightness(.82);
  transform: scale(1.012);
  transition: transform .35s ease, filter .35s ease;
}
.en-server-card:hover .en-server-card-visual img {
  transform: scale(1.035);
  filter: saturate(1.03) contrast(1.05) brightness(.87);
}

.en-server-card-visual-fallback {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  color: hsl(187 90% 52% / .8);
  background:
    linear-gradient(hsl(187 90% 52% / .045) 1px, transparent 1px),
    linear-gradient(90deg, hsl(187 90% 52% / .045) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, hsl(187 90% 52% / .11), transparent 14rem),
    hsl(220 31% 8%);
  background-size: 42px 42px, 42px 42px, auto, auto;
}
.en-server-card-visual-fallback i { font-size: 2rem; }
.en-server-card-visual-fallback span { color: var(--en-text-muted); font-size: 9px; font-weight: 800; letter-spacing: .17em; }

.en-server-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 22%, hsl(220 31% 8% / .30) 56%, hsl(220 31% 8% / .98));
}

.en-server-card-titleblock {
  position: absolute;
  z-index: 2;
  left: 19px;
  right: 19px;
  bottom: 16px;
}

.en-server-type {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
  color: hsl(187 100% 74%);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .14em;
}

.en-server-card-titleblock h3 {
  margin: 0;
  color: white !important;
  font-size: clamp(1.13rem, 2vw, 1.42rem);
  font-weight: 780;
  letter-spacing: -.032em;
  text-shadow: 0 2px 18px black;
}

.en-server-card-body {
  padding: 17px;
}

.en-server-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.en-server-metric {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 13px 13px 14px;
  border: 1px solid var(--en-panel-line);
  border-radius: 12px;
  background: linear-gradient(145deg, hsl(220 25% 15%), hsl(220 27% 12%));
}

.en-server-metric::after {
  content: "";
  position: absolute;
  left: 0;
  right: 58%;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--en-panel-cyan), transparent);
  opacity: .82;
}

.en-server-metric-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
  color: hsl(205 14% 58%);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.en-server-metric-label i { color: var(--en-panel-cyan); }

.en-server-metric strong {
  display: block;
  min-width: 0;
  color: hsl(200 20% 95%);
  font-size: .94rem;
  font-weight: 740;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.en-server-metric-address {
  grid-column: span 2;
}
.en-server-metric-address strong { font-size: .82rem; }

.en-server-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 12px;
  padding: 11px 12px;
  border: 1px solid var(--en-panel-line);
  border-radius: 11px;
  background: hsl(220 26% 12% / .82);
}
.en-server-card-meta span {
  color: var(--en-text-muted);
  font-size: .72rem;
  font-weight: 650;
}
.en-server-card-meta span i { margin-right: 7px; color: var(--en-panel-cyan); }
.en-server-card-meta strong { font-size: .74rem; color: hsl(200 18% 86%); white-space: nowrap; }

.en-server-card-actions {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 8px;
}
.en-server-card-actions:has(.en-server-action-main:only-child) { grid-template-columns: 1fr; }
.en-server-card-actions .btn { min-height: 41px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 10px !important; font-size: .76rem !important; }

.en-server-list-shell {
  overflow: hidden;
  border: 1px solid var(--en-panel-line);
  border-radius: 15px;
  background: hsl(220 28% 10%);
  box-shadow: var(--en-panel-shadow);
}
.en-server-list-shell table thead th { padding-block: 14px !important; }
.en-list-server-name { display: flex; flex-direction: column; gap: 2px; }
.en-list-server-name small { color: var(--en-text-muted); font-size: .68rem; }

.en-icon-button {
  width: 34px;
  height: 34px;
  display: inline-grid !important;
  place-items: center;
  padding: 0 !important;
  border-radius: 9px !important;
  border: 1px solid var(--en-panel-line) !important;
  background: hsl(220 25% 15%) !important;
  color: var(--en-text-muted) !important;
}
.en-icon-button:hover { color: var(--en-panel-cyan) !important; border-color: var(--en-panel-cyan-line) !important; background: var(--en-panel-cyan-soft) !important; }

.en-empty-fleet {
  padding: 72px 28px;
  text-align: center;
  border: 1px dashed hsl(187 90% 52% / .22);
  border-radius: 18px;
  background: linear-gradient(180deg, hsl(220 27% 11%), hsl(220 30% 9%));
}
.en-empty-fleet-icon { width: 68px; height: 68px; display: grid; place-items: center; margin: 0 auto 16px; border-radius: 18px; color: var(--en-panel-cyan); background: var(--en-panel-cyan-soft); border: 1px solid var(--en-panel-cyan-line); }
.en-empty-fleet p { color: var(--en-text-muted); }

/* Server details / console page */
.nav-tabs-custom {
  padding: 4px 5px 0;
  border: 1px solid var(--en-panel-line);
  border-bottom: 0;
  border-radius: 13px 13px 0 0;
  background: hsl(220 28% 10% / .72);
}
.nav-tabs-custom .nav-tabs {
  gap: 2px;
  margin-bottom: 0 !important;
  border-bottom: 1px solid var(--en-panel-line) !important;
}
.nav-tabs-custom .nav-link {
  border-radius: 8px 8px 0 0 !important;
  padding: 10px 12px !important;
  font-size: .79rem !important;
}
.nav-tabs-custom .nav-link.active {
  color: hsl(190 100% 80%) !important;
  background: hsl(187 90% 52% / .10) !important;
  border-bottom-color: var(--en-panel-cyan) !important;
  box-shadow: inset 0 -2px var(--en-panel-cyan) !important;
}

.tab-content {
  padding: 16px 0 0 !important;
}

#terminal {
  min-height: 470px !important;
  border-radius: 13px !important;
  background: #05080e !important;
  border: 1px solid hsl(187 80% 42% / .22) !important;
  box-shadow: inset 0 0 55px rgba(0,0,0,.45), 0 18px 50px -42px black !important;
}
#terminal .xterm { min-height: 440px !important; }

.server-stats-row {
  min-width: 0 !important;
}
.server-stats-row .card {
  border-radius: 13px !important;
  background: linear-gradient(145deg, hsl(220 25% 15%), hsl(220 27% 12%)) !important;
}
.server-stats-row .card-body { padding: 14px !important; }
.server-stats-row .fa-3x { color: hsl(200 14% 70%) !important; opacity: .92; }
.server-stats-row .card-title { color: hsl(205 14% 57%) !important; font-size: .68rem !important; letter-spacing: .06em !important; }
.server-stats-row .card-text { color: hsl(200 20% 94%) !important; font-size: .82rem !important; }

/* Tables and rows should feel like a control panel, not Bootstrap. */
.ea-dark-scheme .table thead th {
  background: hsl(220 26% 14%) !important;
  color: hsl(205 16% 67%) !important;
  font-size: .68rem !important;
  letter-spacing: .06em !important;
}
.ea-dark-scheme .table tbody tr:hover > * {
  background: hsl(187 90% 52% / .055) !important;
}
.ea-dark-scheme .table tbody td {
  color: hsl(200 17% 86%) !important;
}

/* Button language */
.btn.primary,
.en-btn-primary,
.btn.btn-primary,
.action-new {
  background: linear-gradient(135deg, hsl(187 88% 45%), hsl(190 100% 61%)) !important;
  color: hsl(220 34% 7%) !important;
  border: 1px solid hsl(187 100% 70% / .18) !important;
  box-shadow: 0 12px 26px -20px hsl(187 100% 60% / .95) !important;
}
.btn.primary:hover,
.en-btn-primary:hover,
.btn.btn-primary:hover,
.action-new:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 15px 30px -19px hsl(187 100% 60% / .95) !important;
}

.btn.secondary,
.en-btn-ghost {
  background: hsl(220 25% 15%) !important;
  border-color: hsl(212 24% 23%) !important;
  color: hsl(200 18% 88%) !important;
}
.btn.secondary:hover,
.en-btn-ghost:hover {
  background: hsl(187 70% 16% / .40) !important;
  border-color: hsl(187 90% 52% / .28) !important;
  color: white !important;
}

/* Marketplace remains integrated instead of looking bolted on. */
#marketplace-sidebar.marketplace-sidebar-panel {
  border-radius: 14px !important;
  overflow: hidden !important;
}
#marketplace-sidebar .marketplace-sidebar-header {
  background: linear-gradient(110deg, hsl(187 80% 37%), hsl(205 70% 37%)) !important;
}

/* Responsive control-center behavior */
@media (min-width: 1200px) {
  .content-wrapper {
    padding-left: clamp(24px, 2vw, 38px) !important;
    padding-right: clamp(24px, 2.2vw, 46px) !important;
  }
  .en-server-grid {
    grid-template-columns: repeat(auto-fit, minmax(410px, 1fr));
  }
}

@media (max-width: 991.98px) {
  .en-page-hero {
    grid-template-columns: auto 1fr;
  }
  .en-page-hero-actions {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: space-between;
  }
  .en-server-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
  .content-wrapper { padding-inline: 11px !important; }
  .en-page-hero { padding: 20px 17px; gap: 13px; }
  .en-page-hero-icon { width: 45px; height: 45px; border-radius: 12px; }
  .en-page-hero-actions { flex-wrap: wrap; }
  .en-page-hero-actions > .btn { flex: 1; }
  .en-server-card-visual img,
  .en-server-card-visual-fallback { height: 166px; }
  .en-server-metrics { grid-template-columns: 1fr 1fr; }
  .en-server-card-actions { grid-template-columns: 1fr; }
  .en-server-card-meta { align-items: flex-start; flex-direction: column; }
  #terminal { min-height: 360px !important; }
  #terminal .xterm { min-height: 330px !important; }
}

.en-dashboard-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 16px;
}
.en-dashboard-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: hsl(205 15% 65%);
  font-size: .72rem;
  font-weight: 650;
}
.en-dashboard-meta i { color: var(--en-panel-cyan); }

/* Shop cards — keep PteroCA data, remove the stock-panel look. */
.store-product-placeholder,
.store-category-placeholder {
  min-height: 190px !important;
  display: grid !important;
  place-items: center !important;
  background:
    linear-gradient(hsl(187 90% 52% / .04) 1px, transparent 1px),
    linear-gradient(90deg, hsl(187 90% 52% / .04) 1px, transparent 1px),
    radial-gradient(circle at center, hsl(187 90% 52% / .10), transparent 14rem),
    hsl(220 30% 8%) !important;
  background-size: 42px 42px, 42px 42px, auto, auto !important;
  border-bottom: 1px solid var(--en-panel-line) !important;
}
.store-product-icon,
.store-category-icon {
  color: var(--en-panel-cyan) !important;
  font-size: 2rem !important;
}
.card .card-img-top {
  border-bottom: 1px solid var(--en-panel-line) !important;
}
.card:hover .card-img-top:not(.store-product-placeholder):not(.store-category-placeholder) {
  transform: scale(1.025);
}
.card .card-title[style] { color: var(--en-text) !important; }

/* EasyAdmin page headers become part of the EnderNation system. */
.dashboard-header:not(.en-dashboard-hero) {
  position: relative;
  overflow: hidden;
  border-radius: 15px !important;
  background:
    radial-gradient(circle at 5% -35%, hsl(187 90% 52% / .12), transparent 20rem),
    linear-gradient(110deg, hsl(220 27% 13%), hsl(220 29% 10%)) !important;
}
.dashboard-header:not(.en-dashboard-hero)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.dashboard-header .rounded-circle.bg-primary {
  width: 47px;
  height: 47px;
  flex: 0 0 47px;
  background: hsl(187 90% 52% / .11) !important;
  border: 1px solid hsl(187 90% 52% / .20) !important;
}
.dashboard-header .rounded-circle.bg-primary i {
  padding: 0 !important;
  color: var(--en-panel-cyan) !important;
}

/* Compact top-right account area. */
.content-top .user-details,
.content-top .dropdown-toggle {
  border-radius: 10px !important;
}
.content-top .user-details:hover,
.content-top .dropdown-toggle:hover {
  background: hsl(187 90% 52% / .055) !important;
}

/* Better scrollbar to match the product. */
* {
  scrollbar-width: thin;
  scrollbar-color: hsl(210 16% 30%) hsl(220 30% 8%);
}
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: hsl(220 30% 8%); }
*::-webkit-scrollbar-thumb { background: hsl(210 16% 30%); border: 2px solid hsl(220 30% 8%); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: hsl(187 50% 36%); }

/* =========================================================
   v1.2.1 — unified storefront + faster installation handoff
   ========================================================= */
.en-store-product-page { padding-top: 4px; }
.en-store-order-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 178px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
  padding: 30px 32px;
  border-radius: 18px;
  border: 1px solid hsl(187 90% 52% / .18);
  background:
    radial-gradient(circle at 6% -45%, hsl(187 90% 52% / .18), transparent 24rem),
    linear-gradient(118deg, hsl(220 28% 12%), hsl(220 30% 9%));
  box-shadow: 0 28px 70px -48px hsl(187 90% 52% / .56), inset 0 1px rgba(255,255,255,.025);
}
.en-store-order-hero.has-artwork::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:var(--en-order-art);
  background-size:cover;
  background-position:center;
  opacity:.43;
  filter:saturate(1.06) contrast(1.02);
}
.en-store-order-hero.has-artwork::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg, hsl(220 34% 7% / .97), hsl(220 31% 8% / .86) 52%, hsl(220 31% 8% / .55));
}
.en-store-order-hero-copy { min-width:0; }
.en-store-kicker { display:block; color:var(--en-panel-cyan); font-size:.67rem; font-weight:800; letter-spacing:.16em; margin-bottom:.65rem; }
.en-store-order-hero h1 { margin:0; color:var(--en-text); font-size:clamp(1.7rem,2.7vw,2.5rem); font-weight:850; letter-spacing:-.035em; }
.en-store-order-hero p { margin:.55rem 0 0; color:hsl(200 16% 68%); }
.en-store-back { white-space:nowrap; }

.en-store-order-layout { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:20px; align-items:start; }
.en-store-order-main { min-width:0; }
.en-store-panel,
.en-store-checkout {
  background:linear-gradient(180deg, hsl(220 27% 12% / .99), hsl(220 29% 10% / .99));
  border:1px solid var(--en-panel-line);
  border-radius:16px;
  box-shadow:var(--en-panel-shadow);
}
.en-store-panel { padding:20px; margin-bottom:16px; }
.en-store-panel-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; }
.en-store-panel-head > div { display:flex; align-items:center; gap:10px; }
.en-store-panel-head h2 { margin:0; color:var(--en-text); font-size:1.03rem; }
.en-store-panel-head p { margin:0; color:var(--en-text-muted); font-size:.78rem; }
.en-store-step { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; color:var(--en-panel-cyan); background:hsl(187 90% 52% / .08); border:1px solid hsl(187 90% 52% / .18); font-size:.7rem; font-weight:800; }
.en-store-spec-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.en-store-spec { min-width:0; padding:14px; border-radius:12px; background:hsl(220 27% 9% / .72); border:1px solid hsl(212 24% 20%); display:grid; grid-template-columns:28px 1fr; grid-template-rows:auto auto; column-gap:10px; align-items:center; }
.en-store-spec i { grid-row:1/3; color:var(--en-panel-cyan); font-size:1rem; text-align:center; }
.en-store-spec span { color:var(--en-text-muted); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.en-store-spec strong { color:var(--en-text); font-size:.95rem; }
.en-store-description { color:hsl(200 17% 82%); line-height:1.72; font-size:.9rem; }
.en-store-description p:last-child { margin-bottom:0; }

.en-store-checkout { position:sticky; top:18px; overflow:hidden; }
.en-store-checkout-head { display:flex; align-items:center; justify-content:space-between; padding:15px 17px; border-bottom:1px solid var(--en-panel-line); background:linear-gradient(90deg,hsl(220 25% 15%),hsl(220 27% 12%)); }
.en-store-checkout-head span { color:hsl(200 18% 78%); font-size:.7rem; font-weight:800; letter-spacing:.12em; }
.en-store-checkout-head i { color:var(--en-panel-cyan); }
.en-store-checkout form { padding:17px; }
.en-store-field { margin-bottom:14px; }
.en-store-field label { display:block; margin-bottom:6px; color:hsl(200 17% 78%); font-size:.75rem; font-weight:700; }
.en-store-field label i { width:18px; color:var(--en-panel-cyan); }
.en-store-field .form-select,
.en-store-field .form-control { min-height:42px; background:hsl(220 31% 8%) !important; color:var(--en-text) !important; border-color:hsl(212 24% 22%) !important; border-radius:9px !important; }
.en-store-field small,.en-store-field-message { display:block; margin-top:5px; color:var(--en-text-muted); font-size:.68rem; }
.en-store-field-message.success { color:hsl(158 70% 58%); }
.en-store-field-message.warning { color:hsl(45 93% 62%); }
.en-store-field-message.danger { color:hsl(0 75% 68%); }
.en-store-notice { display:flex; gap:8px; margin-bottom:14px; padding:10px 12px; border-radius:10px; font-size:.76rem; }
.en-store-notice.warning { color:hsl(45 90% 74%); background:hsl(45 80% 45% / .08); border:1px solid hsl(45 80% 50% / .19); }
.en-store-slot-wrap { margin-bottom:14px; }
.en-store-price-box,.en-store-summary-box { padding:13px; margin-top:12px; border-radius:12px; background:hsl(220 31% 8% / .72); border:1px solid hsl(212 24% 21%); }
.en-store-price-label { display:block; margin-bottom:8px; color:hsl(203 17% 55%); font-size:.63rem; font-weight:800; letter-spacing:.11em; }
.en-store-price-box > div,.en-store-summary-box > div { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:24px; color:var(--en-text-muted); font-size:.72rem; }
.en-store-price-box strong,.en-store-summary-box strong { color:hsl(200 20% 90%); font-size:.74rem; }
.en-store-total { margin-top:7px; padding-top:9px; border-top:1px solid hsl(212 24% 21%); }
.en-store-total span { color:var(--en-text) !important; font-weight:800; }
.en-store-total strong { color:var(--en-panel-cyan) !important; font-size:1rem; }
.en-store-setup-fee { margin:10px 0; color:var(--en-text-muted); font-size:.68rem; }
.en-store-setup-fee i { color:var(--en-panel-cyan); margin-right:5px; }
.en-store-buy { width:100%; min-height:44px; margin-top:13px; }

/* Native installation screen: poll in the background and switch to the server UI as soon as Wings/Pterodactyl reports ready. */
.en-install-wrap { display:grid; place-items:center; min-height:360px; padding:32px 12px 48px; }
.en-install-card { width:min(700px,100%); padding:34px; text-align:center; border-radius:18px; border:1px solid hsl(187 90% 52% / .18); background:radial-gradient(circle at 50% 0,hsl(187 90% 52% / .10),transparent 19rem),linear-gradient(180deg,hsl(220 27% 12%),hsl(220 29% 9%)); box-shadow:var(--en-panel-shadow); }
.en-install-orbit { position:relative; width:82px; height:82px; margin:0 auto 18px; display:grid; place-items:center; border-radius:50%; background:hsl(187 90% 52% / .07); border:1px solid hsl(187 90% 52% / .16); color:var(--en-panel-cyan); }
.en-install-orbit > span { position:absolute; inset:-7px; border-radius:50%; border:2px solid hsl(187 90% 52% / .12); border-top-color:var(--en-panel-cyan); animation:enInstallSpin 1.1s linear infinite; }
.en-install-orbit i { font-size:1.5rem; }
@keyframes enInstallSpin { to{transform:rotate(360deg)} }
.en-install-kicker { color:var(--en-panel-cyan); font-size:.65rem; font-weight:800; letter-spacing:.15em; }
.en-install-card h3 { margin:10px 0 8px; color:var(--en-text); }
.en-install-card > p { max-width:540px; margin:0 auto 18px; color:var(--en-text-muted); line-height:1.6; }
.en-install-status { display:grid; grid-template-columns:auto 1fr; column-gap:8px; row-gap:2px; align-items:center; width:min(470px,100%); margin:0 auto 13px; padding:11px 13px; text-align:left; border-radius:11px; background:hsl(220 31% 8% / .72); border:1px solid hsl(212 24% 21%); }
.en-install-dot { grid-row:1/3; width:8px; height:8px; border-radius:50%; background:hsl(158 70% 48%); box-shadow:0 0 12px hsl(158 70% 48% / .75); }
.en-install-status strong { color:hsl(200 18% 88%); font-size:.78rem; }
.en-install-status small { color:var(--en-text-muted); font-size:.68rem; }
.en-install-note { display:inline-flex; align-items:center; gap:7px; color:hsl(200 14% 66%); font-size:.7rem; }
.en-install-note i { color:var(--en-panel-cyan); }

@media (max-width:1100px){
  .en-store-order-layout{grid-template-columns:1fr}
  .en-store-checkout{position:relative;top:auto}
}
@media (max-width:760px){
  .en-store-order-hero{align-items:flex-start;flex-direction:column;padding:24px}
  .en-store-spec-grid{grid-template-columns:1fr 1fr}
  .en-store-panel-head{align-items:flex-start;flex-direction:column}
}
@media (max-width:480px){.en-store-spec-grid{grid-template-columns:1fr}}

/* =========================================================
   v1.2.2 — seamless native checkout / final configuration
   ========================================================= */
.en-cart-config-page { padding-top:4px; }
.en-cart-config-page > .row:first-child { margin:0 0 20px !important; }
.en-cart-config-page > .row:first-child > [class*="col-"] { padding:0 !important; }

.en-cart-config-page .dashboard-header {
  position:relative;
  overflow:hidden;
  min-height:146px;
  padding:25px 28px !important;
  border-radius:18px !important;
  border:1px solid hsl(187 90% 52% / .18) !important;
  background:
    radial-gradient(circle at 7% -65%, hsl(187 90% 52% / .18), transparent 23rem),
    linear-gradient(118deg,hsl(220 28% 12%),hsl(220 30% 9%)) !important;
  box-shadow:0 28px 70px -48px hsl(187 90% 52% / .56), inset 0 1px rgba(255,255,255,.025) !important;
}
.en-cart-config-page .dashboard-header::before {
  content:"FINALER SCHRITT";
  position:absolute;
  left:28px;
  top:18px;
  color:var(--en-panel-cyan);
  font-size:.62rem;
  font-weight:850;
  letter-spacing:.16em;
}
.en-cart-config-page .dashboard-header > .d-flex { width:100%; padding-top:16px; gap:16px; }
.en-cart-config-page .dashboard-header .bg-primary.rounded-circle {
  width:43px; height:43px; flex:0 0 43px; display:grid !important; place-items:center;
  border-radius:12px !important; border:1px solid hsl(187 90% 52% / .20) !important;
  background:hsl(187 90% 52% / .08) !important;
}
.en-cart-config-page .dashboard-header .bg-primary.rounded-circle i { padding:0 !important; color:var(--en-panel-cyan) !important; }
.en-cart-config-page .dashboard-header h4 { color:var(--en-text) !important; font-size:clamp(1.55rem,2vw,2rem) !important; font-weight:850 !important; letter-spacing:-.03em; }
.en-cart-config-page .dashboard-header p { color:hsl(200 16% 68%) !important; }
.en-cart-config-page .dashboard-header .btn.primary {
  min-height:42px; padding:9px 14px !important; border-radius:10px !important;
}

.en-cart-layout {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:20px !important;
  align-items:start;
  margin:0 !important;
}
.en-cart-layout > .en-cart-main,
.en-cart-layout > .en-cart-side { width:auto !important; max-width:none !important; padding:0 !important; }
.en-cart-main { min-width:0; }

.en-cart-config-page .en-cart-panel,
.en-cart-config-page .en-cart-checkout {
  overflow:hidden;
  border:1px solid var(--en-panel-line) !important;
  border-radius:16px !important;
  background:linear-gradient(180deg,hsl(220 27% 12% / .99),hsl(220 29% 10% / .99)) !important;
  box-shadow:var(--en-panel-shadow) !important;
}
.en-cart-config-page .en-cart-panel { margin-bottom:16px !important; }
.en-cart-config-page .en-cart-panel > .card-header,
.en-cart-config-page .en-cart-checkout > .card-header {
  min-height:50px;
  display:flex;
  align-items:center;
  padding:13px 16px !important;
  border-bottom:1px solid var(--en-panel-line) !important;
  background:linear-gradient(90deg,hsl(220 25% 15%),hsl(220 27% 12%)) !important;
  color:var(--en-text) !important;
}
.en-cart-config-page .en-cart-panel > .card-header h5,
.en-cart-config-page .en-cart-checkout > .card-header h5 { color:var(--en-text) !important; font-size:.9rem !important; }
.en-cart-config-page .en-cart-panel > .card-header i,
.en-cart-config-page .en-cart-checkout > .card-header i { color:var(--en-panel-cyan) !important; }
.en-cart-config-page .en-cart-panel > .card-body { padding:18px !important; }

/* Resource overview becomes the same compact tiles used on the product page. */
.en-cart-config-page .en-cart-resources .card-body > .row {
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px !important;
  margin:0 !important;
}
.en-cart-config-page .en-cart-resources .card-body > .row > .col-md-6,
.en-cart-config-page .en-cart-resources .list-group { display:contents !important; }
.en-cart-config-page .en-cart-resources .list-group-item {
  min-width:0;
  padding:13px !important;
  border:1px solid hsl(212 24% 20%) !important;
  border-radius:12px !important;
  background:hsl(220 27% 9% / .72) !important;
}
.en-cart-config-page .en-cart-resources .list-group-item > .d-flex { gap:9px; }
.en-cart-config-page .en-cart-resources .list-group-item .rounded-circle {
  width:31px; height:31px; flex:0 0 31px; margin-right:0 !important;
  border-radius:9px !important; background:hsl(187 90% 52% / .075) !important;
}
.en-cart-config-page .en-cart-resources .list-group-item .rounded-circle i { padding:0 !important; color:var(--en-panel-cyan) !important; font-size:.86rem; }
.en-cart-config-page .en-cart-resources .list-group-item strong {
  display:block; color:var(--en-text-muted); font-size:.63rem; font-weight:800; text-transform:uppercase; letter-spacing:.055em;
}
.en-cart-config-page .en-cart-resources .list-group-item .ms-2 {
  display:block; margin-left:0 !important; margin-top:2px; color:var(--en-text); font-size:.9rem; font-weight:750;
}
.en-cart-config-page .en-cart-resources .en-cart-hide-resource { display:none !important; }

/* Native final fields, but in the same visual language as the configurator. */
.en-cart-config-page .en-cart-fields .card-body > .row { --bs-gutter-x:12px; --bs-gutter-y:14px; }
.en-cart-config-page .en-cart-fields .form-label {
  margin-bottom:6px !important; color:hsl(200 17% 78%) !important; font-size:.72rem !important; font-weight:750 !important;
}
.en-cart-config-page .en-cart-fields .form-label i { width:18px; color:var(--en-panel-cyan) !important; }
.en-cart-config-page .en-cart-fields .form-select,
.en-cart-config-page .en-cart-fields .form-control {
  min-height:43px;
  padding:.6rem .75rem !important;
  border:1px solid hsl(212 24% 22%) !important;
  border-radius:10px !important;
  background:hsl(220 31% 8%) !important;
  color:var(--en-text) !important;
  box-shadow:none !important;
}
.en-cart-config-page .en-cart-fields .form-select:focus,
.en-cart-config-page .en-cart-fields .form-control:focus {
  border-color:hsl(187 90% 52% / .55) !important;
  box-shadow:0 0 0 3px hsl(187 90% 52% / .08) !important;
}
.en-cart-config-page .en-cart-fields .form-text { color:var(--en-text-muted) !important; font-size:.68rem; }

.en-cart-config-page .en-cart-checkout { position:sticky; top:18px; }
.en-cart-config-page .en-cart-checkout > .card-body { padding:16px !important; }
.en-cart-config-page .en-cart-checkout h6 { color:var(--en-text) !important; font-size:.95rem !important; }
.en-cart-config-page .en-cart-checkout small,
.en-cart-config-page .en-cart-checkout #selected-dates { color:var(--en-text-muted) !important; }
.en-cart-config-page .en-cart-checkout hr { border-color:hsl(212 24% 21%) !important; }
.en-cart-config-page .en-cart-checkout #selected-summary { color:var(--en-panel-cyan) !important; font-size:1.35rem !important; }
.en-cart-config-page .en-cart-checkout .btn.success {
  width:100%; min-height:45px; border:1px solid hsl(187 100% 70% / .18) !important;
  background:linear-gradient(135deg,hsl(187 88% 45%),hsl(190 100% 61%)) !important;
  color:hsl(220 34% 7%) !important; box-shadow:0 12px 26px -20px hsl(187 100% 60% / .95) !important;
}
.en-cart-config-page .en-cart-checkout .btn.success:disabled { opacity:.48; box-shadow:none !important; }
.en-cart-config-page .en-cart-checkout .alert { border-radius:10px !important; font-size:.73rem; }

.en-cart-config-page #user-required-variables-card { border-radius:16px !important; }

@media (max-width:1100px) {
  .en-cart-layout { grid-template-columns:1fr; }
  .en-cart-config-page .en-cart-checkout { position:relative; top:auto; }
}
@media (max-width:760px) {
  .en-cart-config-page .dashboard-header { padding:24px 20px !important; }
  .en-cart-config-page .dashboard-header::before { left:20px; }
  .en-cart-config-page .dashboard-header > .d-flex { align-items:flex-start !important; flex-direction:column; }
  .en-cart-config-page .dashboard-header .d-flex.gap-2 { width:100%; }
  .en-cart-config-page .dashboard-header .btn.primary { width:100%; }
  .en-cart-config-page .en-cart-resources .card-body > .row { grid-template-columns:1fr 1fr; }
}
@media (max-width:480px) {
  .en-cart-config-page .en-cart-resources .card-body > .row { grid-template-columns:1fr; }
}

/* =========================================================
   v1.2.3 — deterministic product artwork slots
   Master artwork targets:
   - Shop/product preview: 1800x500 px (18:5)
   - Detail/checkout banner: 1920x240 px (8:1)
   ========================================================= */

/* Product cards always reserve exactly the same visual ratio. Matching source
   artwork therefore keeps the same crop independent of card width. */
.en-store-product-card .en-store-card-media {
  width: 100%;
  aspect-ratio: 18 / 5;
  min-height: 0 !important;
  overflow: hidden;
  background: hsl(220 30% 8%);
  border-bottom: 1px solid var(--en-panel-line) !important;
}
.en-store-product-card .en-store-card-image {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  display: block;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  transform-origin: center;
}
.en-store-product-card .store-product-placeholder.en-store-card-media {
  min-height: 0 !important;
}

/* Native product page: one predictable banner frame. 8:1 artwork (e.g.
   1920x240) fills this frame without desktop crop. */
.en-store-order-hero {
  aspect-ratio: 8 / 1;
  min-height: 178px;
  max-height: 220px;
}
.en-store-order-hero.has-artwork::before {
  background-size: cover !important;
  background-position: 50% 50% !important;
  background-repeat: no-repeat !important;
}

/* Native final checkout gets the same artwork instead of dropping it. */
.en-cart-config-page .dashboard-header.has-artwork {
  isolation: isolate;
  aspect-ratio: 8 / 1;
  min-height: 156px;
  max-height: 205px;
  background: linear-gradient(118deg,hsl(220 28% 12%),hsl(220 30% 9%)) !important;
}
.en-cart-config-page .dashboard-header.has-artwork::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: var(--en-cart-art);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  opacity: .40;
  filter: saturate(1.06) contrast(1.02);
}
.en-cart-config-page .dashboard-header.has-artwork > * { position: relative; z-index: 2; }
.en-cart-config-page .dashboard-header.has-artwork::before {
  z-index: 3;
}
.en-cart-config-page .dashboard-header.has-artwork {
  box-shadow: 0 28px 70px -48px hsl(187 90% 52% / .56), inset 0 1px rgba(255,255,255,.025) !important;
}
.en-cart-config-page .dashboard-header.has-artwork > .d-flex::before {
  content: "";
  position: absolute;
  inset: -60px -80px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, hsl(220 34% 7% / .96), hsl(220 31% 8% / .82) 54%, hsl(220 31% 8% / .50));
}

/* Custom Server plugin v0.3.6+ already reads PteroCA's native product image
   and banner fields. Force the same artwork contract without requiring a
   second plugin release just for image framing. */
.en-custom-product-image {
  height: auto !important;
  aspect-ratio: 18 / 5 !important;
  background-size: cover !important;
  background-position: 50% 50% !important;
}
.en-custom-product-hero.has-artwork {
  aspect-ratio: 8 / 1 !important;
  min-height: 190px !important;
  max-height: 220px !important;
}
.en-custom-product-hero.has-artwork::before {
  background-size: cover !important;
  background-position: 50% 50% !important;
  background-repeat: no-repeat !important;
}

@media (max-width: 760px) {
  /* A phone is far narrower than an 8:1 marketing banner. Keep enough room
     for controls and crop from the centered safe area instead of stretching. */
  .en-store-order-hero,
  .en-cart-config-page .dashboard-header.has-artwork,
  .en-custom-product-hero.has-artwork {
    aspect-ratio: auto !important;
    min-height: 178px !important;
    max-height: none !important;
  }
}


/* =========================================================
   v1.2.4 — centered banner composition on every viewport
   Keep the complete banner artwork centered, while a softer cover copy fills
   any leftover edges on screens whose aspect ratio differs from the source.
   ========================================================= */

/* Native product detail hero. The actual artwork is rendered as a centered
   `contain` layer on the hero itself; ::before is only the subtle full-bleed
   filler. This prevents important text/logos in the uploaded banner from
   drifting out of frame on very wide/narrow browser sizes. */
.en-store-order-hero.has-artwork {
  background-image:
    var(--en-order-art),
    radial-gradient(circle at 6% -45%, hsl(187 90% 52% / .18), transparent 24rem),
    linear-gradient(118deg, hsl(220 28% 12%), hsl(220 30% 9%)) !important;
  background-size: contain, auto, auto !important;
  background-position: 50% 50%, 50% 50%, 50% 50% !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
}
.en-store-order-hero.has-artwork::before {
  background-image: var(--en-order-art) !important;
  background-size: cover !important;
  background-position: 50% 50% !important;
  background-repeat: no-repeat !important;
  opacity: .16 !important;
  filter: blur(8px) saturate(1.15) contrast(1.03) !important;
  transform: scale(1.035);
}

/* Native final checkout header: same centered full-artwork layer + soft fill. */
.en-cart-config-page .dashboard-header.has-artwork {
  background-image:
    var(--en-cart-art),
    linear-gradient(118deg, hsl(220 28% 12%), hsl(220 30% 9%)) !important;
  background-size: contain, auto !important;
  background-position: 50% 50%, 50% 50% !important;
  background-repeat: no-repeat, no-repeat !important;
}
.en-cart-config-page .dashboard-header.has-artwork::after {
  background-image: var(--en-cart-art) !important;
  background-size: cover !important;
  background-position: 50% 50% !important;
  background-repeat: no-repeat !important;
  opacity: .15 !important;
  filter: blur(8px) saturate(1.15) contrast(1.03) !important;
  transform: scale(1.035);
}

/* Custom Server plugin hero follows the exact same rule when v0.3.6+ is used. */
.en-custom-product-hero.has-artwork {
  background-image: var(--en-custom-product-art) !important;
  background-size: contain !important;
  background-position: 50% 50% !important;
  background-repeat: no-repeat !important;
}
.en-custom-product-hero.has-artwork::before {
  background-size: cover !important;
  background-position: 50% 50% !important;
  background-repeat: no-repeat !important;
  opacity: .16 !important;
  filter: blur(8px) saturate(1.15) contrast(1.03) !important;
  transform: scale(1.035);
}

/* =========================================================
   v1.2.6 — center the banner frame inside the usable panel area

   The banner is intentionally capped to the design width implied by the
   1920x240 (8:1) source format. On ultrawide screens it no longer hugs the
   left edge: the free space is distributed evenly on both sides of the
   banner, relative to the panel content area (not the physical monitor).
   ========================================================= */
.en-store-product-page {
  width: 100% !important;
  max-width: none !important;
}

.en-store-order-hero {
  box-sizing: border-box;
  width: min(100%, 1440px) !important;
  max-width: 1440px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 8 / 1 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.en-store-order-hero.has-artwork {
  background-position: 50% 50%, 50% 50%, 50% 50% !important;
}

/* Keep the checkout artwork aligned to the same visual axis. */
.en-cart-config-page > .row:first-child {
  width: 100% !important;
  max-width: none !important;
}
.en-cart-config-page > .row:first-child > [class*="col-"] {
  width: 100% !important;
  max-width: none !important;
}
.en-cart-config-page .dashboard-header.has-artwork {
  box-sizing: border-box;
  width: min(100%, 1440px) !important;
  max-width: 1440px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 8 / 1 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 760px) {
  .en-store-order-hero,
  .en-cart-config-page .dashboard-header.has-artwork {
    width: 100% !important;
    max-width: none !important;
    min-height: 178px !important;
    aspect-ratio: auto !important;
  }
}

/* =========================================================
   v1.2.7 — true full-width product banners

   The hero frame itself now spans the complete usable panel content width.
   No design-width cap, no auto-centering gutters. The uploaded banner fills
   the frame edge-to-edge with a centered cover crop, which is the predictable
   result for 1920x240 (8:1) source artwork.
   ========================================================= */
.en-store-product-page {
  width: 100% !important;
  max-width: none !important;
}

.en-store-order-hero {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  aspect-ratio: auto !important;
  height: clamp(178px, 10vw, 230px) !important;
  min-height: 178px !important;
  max-height: 230px !important;
}

.en-store-order-hero.has-artwork {
  background-size: cover, auto, auto !important;
  background-position: 50% 50%, 50% 50%, 50% 50% !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
}
.en-store-order-hero.has-artwork::before {
  background-size: cover !important;
  background-position: 50% 50% !important;
  opacity: .12 !important;
  filter: blur(7px) saturate(1.10) contrast(1.02) !important;
}

/* Final native checkout: keep the same edge-to-edge banner treatment. */
.en-cart-config-page > .row:first-child,
.en-cart-config-page > .row:first-child > [class*="col-"] {
  width: 100% !important;
  max-width: none !important;
}
.en-cart-config-page .dashboard-header.has-artwork {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  aspect-ratio: auto !important;
  height: clamp(156px, 9vw, 215px) !important;
  min-height: 156px !important;
  max-height: 215px !important;
  background-size: cover, auto !important;
  background-position: 50% 50%, 50% 50% !important;
}

/* Custom Server hero follows the same full-width rule when the plugin is used. */
.en-custom-product-hero.has-artwork {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  aspect-ratio: auto !important;
  height: clamp(190px, 10vw, 230px) !important;
  min-height: 190px !important;
  max-height: 230px !important;
  background-size: cover !important;
  background-position: 50% 50% !important;
}

@media (max-width: 760px) {
  .en-store-order-hero,
  .en-cart-config-page .dashboard-header.has-artwork,
  .en-custom-product-hero.has-artwork {
    width: 100% !important;
    max-width: none !important;
    min-height: 178px !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* =========================================================
   v1.2.8 — bleed blurred artwork beyond the hero clipping edge

   CSS blur samples transparent pixels outside the pseudo-element bounds.
   If the blurred layer ends exactly at the rounded hero edge, that creates a
   lighter/washed rim. Oversizing the blur layer keeps the blur fully opaque
   underneath the clipped frame, so the border no longer looks brighter.
   ========================================================= */
.en-store-order-hero.has-artwork::before {
  inset: -18px !important;
  transform: scale(1.02) !important;
}

.en-cart-config-page .dashboard-header.has-artwork::after {
  inset: -18px !important;
  transform: scale(1.02) !important;
}

.en-custom-product-hero.has-artwork::before {
  inset: -18px !important;
  transform: scale(1.02) !important;
}

/* =========================================================
   v1.2.9 — deterministic checkout artwork + clean hero edges
   ========================================================= */

/* The full-width detail hero already uses the source artwork as a cover layer.
   A second blurred copy is no longer needed and was the cause of the bright
   washed strip around the clipped rounded edge on some GPUs/browsers. */
.en-store-order-hero.has-artwork::before {
  display: none !important;
  content: none !important;
  filter: none !important;
}
.en-store-order-hero {
  border-color: hsl(212 24% 18%) !important;
  box-shadow:
    0 28px 70px -48px hsl(187 90% 52% / .48),
    inset 0 0 0 1px hsl(0 0% 100% / .018) !important;
}

/* Final checkout always owns a real hero now. The image URL is resolved by
   Twig, so this works even though CartController does not prepare image paths. */
.en-cart-theme-shell {
  width: 100%;
  min-width: 0;
}
.en-cart-art-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  min-height: 178px;
  height: clamp(178px, 10vw, 230px);
  margin: 4px 0 20px;
  padding: 30px 32px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  border-radius: 18px;
  border: 1px solid hsl(212 24% 18%);
  background: linear-gradient(118deg, hsl(220 28% 12%), hsl(220 30% 9%));
  box-shadow:
    0 28px 70px -48px hsl(187 90% 52% / .48),
    inset 0 0 0 1px hsl(0 0% 100% / .018);
}
.en-cart-art-hero.has-artwork {
  background-image: var(--en-cart-art) !important;
  background-size: cover !important;
  background-position: 50% 50% !important;
  background-repeat: no-repeat !important;
}
.en-cart-art-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,
    hsl(220 34% 7% / .95),
    hsl(220 31% 8% / .76) 48%,
    hsl(220 31% 8% / .38));
}
.en-cart-art-copy { min-width: 0; }
.en-cart-art-copy h1 {
  margin: 0;
  color: var(--en-text);
  font-size: clamp(1.7rem, 2.7vw, 2.5rem);
  font-weight: 850;
  letter-spacing: -.035em;
}
.en-cart-art-copy p {
  margin: .55rem 0 0;
  color: hsl(200 16% 72%);
}
.en-cart-voucher-button {
  position: relative;
  z-index: 2;
  white-space: nowrap;
  min-height: 42px;
  padding: 9px 14px !important;
  border-radius: 10px !important;
}

/* Hide the stock checkout header; the new artwork hero above replaces it. */
.en-cart-config-native > .mt-4 > .row:first-child {
  display: none !important;
}
.en-cart-config-native > .mt-4 {
  margin-top: 0 !important;
}

/* Structural fallback: do not depend on endernation-panel.js adding helper
   classes. Style PteroCA's native checkout DOM directly. */
.en-cart-config-native #configure-form > .row.g-4 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px !important;
  align-items: start;
  margin: 0 !important;
}
.en-cart-config-native #configure-form > .row.g-4 > .col-lg-8,
.en-cart-config-native #configure-form > .row.g-4 > .col-lg-4 {
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
}
.en-cart-config-native #configure-form > .row.g-4 > .col-lg-8 > .card,
.en-cart-config-native #configure-form > .row.g-4 > .col-lg-4 > .card,
.en-cart-config-native #user-required-variables-card {
  overflow: hidden;
  border: 1px solid var(--en-panel-line) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, hsl(220 27% 12% / .99), hsl(220 29% 10% / .99)) !important;
  box-shadow: var(--en-panel-shadow) !important;
}
.en-cart-config-native #configure-form > .row.g-4 > .col-lg-8 > .card {
  margin-bottom: 16px !important;
}
.en-cart-config-native #configure-form .card > .card-header {
  min-height: 50px;
  display: flex;
  align-items: center;
  padding: 13px 16px !important;
  border-bottom: 1px solid var(--en-panel-line) !important;
  background: linear-gradient(90deg, hsl(220 25% 15%), hsl(220 27% 12%)) !important;
  color: var(--en-text) !important;
}
.en-cart-config-native #configure-form .card > .card-header i {
  color: var(--en-panel-cyan) !important;
}
.en-cart-config-native #configure-form .card > .card-body {
  padding: 18px !important;
}
.en-cart-config-native #configure-form > .row.g-4 > .col-lg-4 > .card {
  position: sticky;
  top: 18px;
}
.en-cart-config-native #configure-form .form-select,
.en-cart-config-native #configure-form .form-control {
  min-height: 43px;
  border: 1px solid hsl(212 24% 22%) !important;
  border-radius: 10px !important;
  background: hsl(220 31% 8%) !important;
  color: var(--en-text) !important;
  box-shadow: none !important;
}
.en-cart-config-native #configure-form #selected-summary {
  color: var(--en-panel-cyan) !important;
}
.en-cart-config-native #configure-form #order-submit {
  width: 100%;
  min-height: 45px;
  border: 1px solid hsl(187 100% 70% / .18) !important;
  background: linear-gradient(135deg, hsl(187 88% 45%), hsl(190 100% 61%)) !important;
  color: hsl(220 34% 7%) !important;
}

/* If the helper script also decorates the old native dashboard header, keep it
   invisible so there can never be two artwork/header blocks. */
.en-cart-config-native .dashboard-header.has-artwork,
.en-cart-config-native .en-cart-config-hero {
  display: none !important;
}

@media (max-width: 1100px) {
  .en-cart-config-native #configure-form > .row.g-4 {
    grid-template-columns: 1fr;
  }
  .en-cart-config-native #configure-form > .row.g-4 > .col-lg-4 > .card {
    position: relative;
    top: auto;
  }
}
@media (max-width: 760px) {
  .en-cart-art-hero {
    min-height: 190px;
    height: auto;
    padding: 24px 20px;
    align-items: flex-start;
    flex-direction: column;
  }
  .en-cart-voucher-button { width: 100%; }
}


/* Header backdrop-filter creates a stacking context. Keep it above page heroes,
   while Bootstrap modals and the mobile navigation retain their higher layers. */
.content-top,
.responsive-header {
  position: relative;
  z-index: 100;
  overflow: visible !important;
}
.en-store-card-price { padding-top: .9rem; border-top: 1px solid var(--en-panel-line-soft); }
.en-store-card-price strong { color: var(--en-panel-cyan); font-size: 1.55rem; font-variant-numeric: tabular-nums; }
.en-store-price-prefix { color: var(--en-text-muted); font-size: .85rem; }
.en-console-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-bottom:.65rem; }
.en-console-connection { flex:1 1 15rem; color:var(--en-text-muted); font-size:.85rem; }
.en-console-connection[data-connection-state="connected"] { color:#86efac; }
.en-console-connection[data-connection-state="offline"],
.en-console-connection[data-connection-state="retrying"],
.en-console-connection[data-connection-state="blocked"] { color:#fcd34d; }
.en-console-toolbar button { font-size:.8rem; padding:.4rem .65rem; }
.en-console-pause-note { flex-basis:100%; color:var(--en-text-muted); font-size:.8rem; }

/* Saved product image frames match the crop preview. */
.en-store-product-card .en-store-card-media{aspect-ratio:16/9;height:auto!important;min-height:0!important;}
.en-store-product-card .en-store-card-image{width:100%;height:100%!important;object-fit:cover;}