.gx-shell { --gx-ink:#162033; --gx-muted:#68758a; --gx-line:#dfe6ef; --gx-blue:#1769e0; --gx-navy:#102a43; --gx-teal:#0f8a7b; --gx-soft:#f4f7fb; color:var(--gx-ink); }
.gx-hero { background:radial-gradient(circle at 84% 18%,rgba(82,225,207,.20),transparent 28rem),linear-gradient(125deg,#102a43 0%,#174f6d 58%,#0f766e 100%); border-radius:1.25rem; box-shadow:0 1rem 2.75rem rgba(16,42,67,.16); color:#fff; overflow:hidden; padding:1.75rem 2rem; position:relative; }
.gx-kicker { color:#99f6e4; font-size:.7rem; font-weight:750; letter-spacing:.13em; text-transform:uppercase; }
.gx-hero h1,.gx-hero h2,.gx-hero h3 { color:#fff; }
.gx-hero .text-muted { color:rgba(255,255,255,.7)!important; }
.gx-icon-tile { align-items:center; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.18); border-radius:.85rem; display:inline-flex; flex:0 0 auto; font-size:1.35rem; height:3.2rem; justify-content:center; width:3.2rem; }
.gx-card { background:#fff; border:1px solid var(--gx-line); border-radius:1rem; box-shadow:0 .5rem 1.5rem rgba(16,42,67,.06); }
.gx-stat { align-items:center; background:#fff; border:1px solid var(--gx-line); border-radius:.9rem; display:flex; gap:.9rem; min-height:5.6rem; padding:1rem 1.1rem; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.gx-stat:hover { border-color:#bdcce0; box-shadow:0 .65rem 1.6rem rgba(16,42,67,.09); transform:translateY(-2px); }
.gx-stat-icon { align-items:center; background:#eaf2ff; border-radius:.75rem; color:var(--gx-blue); display:inline-flex; flex:0 0 auto; font-size:1.2rem; height:2.8rem; justify-content:center; width:2.8rem; }
.gx-stat-value { font-size:1.35rem; font-weight:760; line-height:1; }
.gx-stat-label { color:var(--gx-muted); font-size:.75rem; margin-top:.35rem; }
.gx-toolbar { align-items:center; display:flex; flex-wrap:wrap; gap:.65rem; justify-content:space-between; }
.gx-search { min-width:min(100%,19rem); position:relative; }
.gx-search>i { color:#7b8798; left:.9rem; position:absolute; top:50%; transform:translateY(-50%); z-index:2; }
.gx-search .form-control { border-color:var(--gx-line); border-radius:.7rem; min-height:2.75rem; padding-left:2.6rem; }
.gx-search .form-control:focus { border-color:var(--gx-blue); box-shadow:0 0 0 .2rem rgba(23,105,224,.11); }
.gx-segmented { background:#edf2f7; border-radius:.7rem; display:inline-flex; gap:.2rem; padding:.25rem; }
.gx-segmented button,.gx-segmented a { background:transparent; border:0; border-radius:.5rem; color:#536174; font-size:.78rem; font-weight:650; padding:.55rem .8rem; }
.gx-segmented .active { background:#fff; box-shadow:0 .2rem .7rem rgba(16,42,67,.10); color:var(--gx-blue); }
.gx-table-wrap { border:1px solid var(--gx-line); border-radius:.85rem; overflow:auto; }
.gx-table { margin:0; min-width:52rem; width:100%; }
.gx-table thead th { background:#f1f5f9; border-bottom:1px solid #dbe3ec; color:#526075; font-size:.68rem; font-weight:760; letter-spacing:.05em; padding:.85rem 1rem; text-transform:uppercase; white-space:nowrap; }
.gx-table tbody td { border-bottom:1px solid #edf1f5; padding:.9rem 1rem; vertical-align:middle; }
.gx-table tbody tr { transition:background .15s ease,box-shadow .15s ease; }
.gx-table tbody tr:hover { background:#f7faff; box-shadow:inset 3px 0 0 var(--gx-blue); }
.gx-table tbody tr:last-child td { border-bottom:0; }
.gx-ref { background:#eaf2ff; border-radius:.45rem; color:#155ec7; display:inline-flex; font-size:.75rem; font-weight:700; padding:.42rem .6rem; }
.gx-badge { align-items:center; border-radius:999px; display:inline-flex; font-size:.7rem; font-weight:700; gap:.35rem; padding:.4rem .65rem; }
.gx-badge:before { background:currentColor; border-radius:50%; content:""; height:.38rem; opacity:.8; width:.38rem; }
.gx-empty { color:var(--gx-muted); padding:3.5rem 1.5rem; text-align:center; }
.gx-empty i { font-size:2.3rem; }
.gx-builder-grid { display:grid; gap:1.25rem; grid-template-columns:minmax(20rem,.95fr) minmax(24rem,1.05fr); }
.gx-panel-head { align-items:center; border-bottom:1px solid var(--gx-line); display:flex; gap:.75rem; justify-content:space-between; padding:1rem 1.2rem; }
.gx-panel-body { padding:1.2rem; }
.gx-stage { background:#fff; border:1px solid var(--gx-line); border-radius:.85rem; margin-bottom:.7rem; overflow:hidden; position:relative; }
.gx-stage:before { background:linear-gradient(#1c73e8,#16a394); content:""; inset:0 auto 0 0; position:absolute; width:.22rem; }
.gx-stage-toggle { align-items:center; color:var(--gx-ink); display:flex; gap:.8rem; padding:.95rem 1rem .95rem 1.2rem; text-decoration:none; }
.gx-stage-toggle:hover { background:#f8fbff; color:var(--gx-blue); }
.gx-stage-number { align-items:center; background:#eaf2ff; border-radius:.55rem; color:var(--gx-blue); display:inline-flex; flex:0 0 auto; font-size:.75rem; font-weight:750; height:2rem; justify-content:center; width:2rem; }
.gx-stage-meta { color:var(--gx-muted); font-size:.72rem; }
.gx-progress-track { background:rgba(255,255,255,.16); border-radius:999px; height:.45rem; overflow:hidden; }
.gx-progress-value { background:#7ce7d3; border-radius:inherit; height:100%; min-width:.3rem; }
.gx-workspace { display:grid; gap:1rem; grid-template-columns:minmax(0,1fr) 18rem; }
.gx-context-card { position:sticky; top:1rem; }
.gx-context-item { border-bottom:1px solid var(--gx-line); padding:.85rem 0; }
.gx-context-item:last-child { border-bottom:0; }
.gx-context-label { color:var(--gx-muted); font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; }
.gx-context-value { font-size:.86rem; font-weight:650; margin-top:.3rem; word-break:break-word; }
.gx-app-shell { background:#fff; border:1px solid var(--gx-line); border-radius:1.25rem; box-shadow:0 1.25rem 3.5rem rgba(15,35,60,.14); display:grid; grid-template-columns:minmax(19rem,.82fr) minmax(28rem,1.18fr); max-width:76rem; overflow:hidden; width:min(95vw,76rem); }
.gx-app-story { border-radius:0; min-height:40rem; padding:3rem; }
.gx-app-main { align-self:center; max-height:46rem; overflow:auto; padding:2.5rem 3rem; }
.gx-app-card { align-items:center; background:#fff; border:1px solid var(--gx-line); border-radius:.9rem; color:var(--gx-ink); display:flex; gap:1rem; min-height:6rem; padding:1rem; text-decoration:none; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.gx-app-card:hover { border-color:#9fb9dc; box-shadow:0 .75rem 1.8rem rgba(16,42,67,.11); color:var(--gx-ink); transform:translateY(-2px); }
.gx-app-logo { align-items:center; background:#f4f7fb; border:1px solid #e5eaf1; border-radius:.8rem; display:inline-flex; flex:0 0 auto; height:3.7rem; justify-content:center; padding:.55rem; width:3.7rem; }
.gx-app-logo img { max-height:100%; max-width:100%; }
.gx-app-arrow { color:#8a97a9; margin-left:auto; }
@media (max-width:991.98px) { .gx-builder-grid,.gx-workspace { grid-template-columns:1fr; } .gx-context-card { position:static; } .gx-app-shell { grid-template-columns:1fr; max-width:40rem; } .gx-app-story { min-height:auto; padding:2rem; } .gx-app-main { max-height:none; padding:2rem; } }
@media (max-width:575.98px) { .gx-hero { border-radius:1rem; padding:1.35rem; } .gx-toolbar { align-items:stretch; flex-direction:column; } .gx-search { min-width:100%; } .gx-app-shell { border:0; border-radius:0; box-shadow:none; width:100%; } .gx-app-main,.gx-app-story { padding:1.35rem; } }