:root {
    --ey-primary: #2563eb;
    --ey-primary-dark: #1d4ed8;
    --ey-sidebar: #0b1220;
    --ey-sidebar-muted: #91a0b7;
    --ey-surface: #ffffff;
    --ey-border: #e5eaf1;
    --ey-bg: #f4f7fb;
    --ey-text: #172033;
    --ey-muted: #667085;
    --ey-success: #12a150;
    --ey-danger: #dc3545;
}

body { background: var(--ey-bg); color: var(--ey-text); }
body > .container { max-width: 100%; padding: 0; }
body > .container > header { background: var(--ey-surface); border-bottom: 1px solid var(--ey-border); position: sticky; top: 0; z-index: 1025; }
body > .container > header .navbar { max-width: 1540px; margin: 0 auto; padding: .85rem 1.5rem !important; }
body > .container > .container { max-width: 1540px; padding: 0 1.5rem; }
body > .container > .container > .row { flex-wrap: nowrap; gap: 0; }
body > .container > .container > .row > .col-3 { width: 248px; min-width: 248px; padding: 0; }
body > .container > .container > .row > .col-md-9 { width: calc(100% - 248px); max-width: none; padding: 1.55rem 0 0 1.65rem; }
.navbar-brand { font-weight: 800; letter-spacing: -.03em; }
.navbar-brand img { max-height: 36px; }
.content-block { min-height: calc(100vh - 150px); }
.breadcrumb { font-size: .82rem; margin-bottom: 1rem; }

#sidebarMenu { background: var(--ey-sidebar); min-height: calc(100vh - 69px); margin-left: -1.5rem; padding: 1.2rem .8rem; }
#sidebarMenu .offcanvas-body { padding: 0; }
.ey-nav-title { color: #627089; font-size: .68rem; font-weight: 700; letter-spacing: .12em; padding: 1.25rem .85rem .4rem; text-transform: uppercase; }
#sidebarMenu .nav-link { color: var(--ey-sidebar-muted); border-radius: 8px; font-size: .91rem; margin: 2px 0; padding: .68rem .82rem; transition: .15s ease; }
#sidebarMenu .nav-link:hover { color: #fff; background: rgba(255,255,255,.07); }
#sidebarMenu .nav-link.active { color: #fff; background: linear-gradient(105deg, #2563eb, #3374ed); box-shadow: 0 8px 22px rgba(37,99,235,.24); }
#sidebarMenu .icon { width: 18px; height: 18px; }
.ey-sidebar-balance { margin: 1.15rem .55rem 0; padding: .85rem; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; color: #fff; background: rgba(255,255,255,.035); }
.ey-sidebar-balance small { display:block; color: var(--ey-sidebar-muted); margin-bottom:.2rem; }

.ey-page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.35rem; }
.ey-page-head h1 { font-size:1.62rem; margin:0 0 .25rem; letter-spacing:-.025em; }
.ey-page-head p { color:var(--ey-muted); margin:0; font-size:.9rem; }
.ey-toolbar { display:flex; gap:.6rem; flex-wrap:wrap; }
.ey-card { background:var(--ey-surface); border:1px solid var(--ey-border); border-radius:12px; box-shadow:0 1px 2px rgba(16,24,40,.03); }
.ey-card-head { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.15rem; border-bottom:1px solid var(--ey-border); }
.ey-card-head h2 { font-size:1rem; margin:0; }
.ey-card-body { padding:1.15rem; }
.ey-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-bottom:1.25rem; }
.ey-stat { padding:1.15rem; }
.ey-stat-label { color:var(--ey-muted); font-size:.82rem; }
.ey-stat-value { font-size:1.7rem; font-weight:750; margin:.4rem 0 .1rem; letter-spacing:-.035em; }
.ey-stat-note { color:var(--ey-muted); font-size:.75rem; }
.ey-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:.35rem; background:#98a2b3; }
.ey-dot.running,.ey-dot.active,.ey-dot.ready { background:var(--ey-success); box-shadow:0 0 0 3px rgba(18,161,80,.12); }
.ey-dot.stopped,.ey-dot.failed { background:var(--ey-danger); }
.ey-main-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(290px,.75fr); gap:1rem; }
.ey-quick-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.ey-quick { border:1px solid var(--ey-border); border-radius:9px; color:var(--ey-text); padding:.9rem; text-decoration:none; }
.ey-quick:hover { border-color:#9dbcf9; background:#f8fbff; color:var(--ey-primary); }
.ey-quick strong,.ey-quick span { display:block; }
.ey-quick span { color:var(--ey-muted); font-size:.76rem; margin-top:.25rem; }

.ey-table { margin:0; }
.ey-table thead th { background:#f8fafc; border-bottom:1px solid var(--ey-border); color:#657084; font-size:.72rem; font-weight:700; letter-spacing:.03em; padding:.78rem 1rem; text-transform:uppercase; white-space:nowrap; }
.ey-table tbody td { border-color:#edf0f4; padding:.9rem 1rem; vertical-align:middle; }
.ey-instance-name { color:var(--ey-text); font-weight:700; text-decoration:none; }
.ey-instance-name:hover { color:var(--ey-primary); }
.ey-sub { color:var(--ey-muted); display:block; font-size:.75rem; margin-top:.18rem; }
.ey-badge { display:inline-flex; align-items:center; border-radius:999px; font-size:.75rem; font-weight:650; padding:.28rem .55rem; background:#eef2f6; color:#526072; }
.ey-badge.running,.ey-badge.ready,.ey-badge.succeeded { background:#e9f8ef; color:#16803b; }
.ey-badge.stopped { background:#f1f3f5; color:#5f6b7a; }
.ey-badge.queued,.ey-badge.creating { background:#fff6df; color:#9a6700; }
.ey-badge.failed,.ey-badge.needs_attention { background:#fff0f1; color:#c72835; }
.ey-empty { color:var(--ey-muted); padding:3rem 1rem; text-align:center; }
.ey-search { max-width:280px; }
.ey-search input { border-color:var(--ey-border); border-radius:8px; font-size:.85rem; }
.ey-action-row { display:flex; gap:.4rem; flex-wrap:wrap; }
.ey-action-row .btn { font-size:.76rem; padding:.3rem .55rem; }

.ey-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.ey-form-grid .ey-span-2 { grid-column:1 / -1; }
.ey-option-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; }
.ey-plan { border:1px solid var(--ey-border); border-radius:10px; cursor:pointer; padding:1rem; position:relative; }
.ey-plan:hover,.ey-plan.selected { border-color:var(--ey-primary); box-shadow:0 0 0 2px rgba(37,99,235,.1); }
.ey-plan input { position:absolute; opacity:0; }
.ey-plan strong,.ey-plan span { display:block; }
.ey-plan .price { color:var(--ey-primary); font-size:1.15rem; font-weight:750; margin-top:.55rem; }
.ey-help { color:var(--ey-muted); font-size:.78rem; }
.ey-code { background:#0b1220; border-radius:9px; color:#d9e3f0; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.8rem; overflow:auto; padding:1rem; white-space:pre; }
.ey-notice { background:#eef6ff; border:1px solid #cfe3ff; border-radius:9px; color:#245487; padding:.8rem 1rem; }

@media (max-width: 991.98px) {
    .ey-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .ey-main-grid { grid-template-columns:1fr; }
    .ey-option-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 767.98px) {
    body > .container > .container { padding:0 .85rem; }
    body > .container > .container > .row { display:block; }
    body > .container > .container > .row > .col-md-9 { width:100%; padding:1rem 0 0; }
    .ey-page-head { align-items:flex-start; flex-direction:column; }
    .ey-stat-grid,.ey-form-grid,.ey-option-grid { grid-template-columns:1fr; }
    .ey-form-grid .ey-span-2 { grid-column:auto; }
    .ey-stat { padding:.9rem; }
    .ey-stat-value { font-size:1.35rem; }
    .ey-table { min-width:760px; }
    #navbarSupportedContent { max-height:calc(100vh - 68px); overflow:auto; }
}

[data-bs-theme="dark"] body { --ey-surface:#151b26; --ey-border:#273142; --ey-bg:#0f141d; --ey-text:#edf2f7; --ey-muted:#9aa6b7; }
[data-bs-theme="dark"] .ey-table thead th { background:#111722; }
[data-bs-theme="dark"] .ey-quick:hover { background:#192235; }
[data-bs-theme="dark"] .ey-plan:hover,[data-bs-theme="dark"] .ey-plan.selected { background:#17223a; }