/* OTCreator.com Premium UI
 * A single visual layer shared by every tab. It keeps the existing DOM and
 * generated OTUI contract intact while giving the desktop workbench a clear
 * Tibia/Rookgaard identity: stone panels, brass accents, pixel-safe fonts and
 * dense information hierarchy.
 */
:root {
  --premium-stone-0: #080c12;
  --premium-stone-1: #0e141d;
  --premium-stone-2: #151e29;
  --premium-stone-3: #1c2835;
  --premium-line: rgba(154, 126, 76, .28);
  --premium-line-strong: rgba(194, 157, 91, .62);
  --premium-brass: #c9a15b;
  --premium-brass-bright: #f1cb83;
  --premium-ink: #f7f1e3;
  --premium-dim: #9aa8b6;
  --premium-cyan: #6ec9c4;
  --premium-shadow: 0 20px 60px rgba(0, 0, 0, .42);
  --topbar-height: 68px;
}

html, body, #app {
  font-family: "Verdana Bold-11px", "Segoe UI", sans-serif;
  background: var(--premium-stone-0);
}

body {
  background:
    radial-gradient(circle at 12% -8%, rgba(201, 161, 91, .16), transparent 28%),
    radial-gradient(circle at 90% 12%, rgba(70, 129, 159, .13), transparent 30%),
    linear-gradient(135deg, #080c12 0%, #0d141c 48%, #090d13 100%);
}

body::before {
  position: fixed;
  z-index: 0;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: .28;
  background-image:
    linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .014) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, black, transparent 92%);
}

#app { position: relative; z-index: 1; }

.topbar {
  position: relative;
  z-index: 5;
  height: var(--topbar-height);
  gap: 14px;
  padding: 0 18px;
  border-bottom: 1px solid var(--premium-line-strong);
  background:
    linear-gradient(180deg, rgba(28, 38, 50, .98), rgba(12, 18, 26, .98)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 1px, transparent 1px 5px);
  box-shadow: 0 8px 28px rgba(0,0,0,.36);
}

.topbar::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--premium-brass), var(--premium-cyan), transparent);
  opacity: .8;
}

.brand { min-width: 245px; gap: 11px; }
.brand strong { color: var(--premium-ink); font-size: 13px; letter-spacing: .02em; }
.brand small { color: #aab6c3; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.brand small em { color: var(--premium-brass-bright); font-style: normal; }

.brand-mark {
  position: relative;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border: 1px solid rgba(245, 210, 133, .8);
  border-radius: 11px 11px 15px 15px;
  background: linear-gradient(145deg, #d4a75c, #805425 72%);
  box-shadow: inset 0 1px rgba(255,255,255,.4), 0 5px 15px rgba(0,0,0,.36);
}
.brand-mark::before { position: absolute; inset: 3px; border: 1px solid rgba(55,32,11,.55); border-radius: 8px 8px 12px 12px; content: ""; }
.brand-mark-glyph { position: relative; z-index: 1; display: grid; height: 100%; place-items: center; color: #271a0b; font-size: 21px; font-weight: 900; text-shadow: 0 1px rgba(255,255,255,.25); }
.brand-mark-orbit { position: absolute; right: -5px; bottom: -8px; width: 24px; height: 24px; border: 2px solid rgba(255,239,181,.62); border-radius: 50%; }

.studio-world-chip, .studio-pulse {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 6px 10px;
  border: 1px solid rgba(125, 151, 169, .26);
  border-radius: 8px;
  background: rgba(8, 13, 20, .55);
}
.studio-world-chip { margin-left: 2px; border-color: rgba(201,161,91,.4); }
.world-chip-gem { width: 9px; height: 9px; transform: rotate(45deg); border: 1px solid #cfe5dc; border-radius: 2px; background: linear-gradient(135deg, #9fe4d4, #357d76); box-shadow: 0 0 11px rgba(110,201,196,.55); }
.studio-world-chip strong, .studio-world-chip small, .studio-pulse strong, .studio-pulse small { display: block; }
.studio-world-chip strong { color: var(--premium-brass-bright); font-size: 10px; letter-spacing: .12em; }
.studio-world-chip small { margin-top: 2px; color: #9caab4; font-size: 8px; letter-spacing: .08em; }
.studio-pulse { min-width: 176px; margin-left: auto; border-color: rgba(110,201,196,.28); }
.studio-pulse strong { color: #dbece7; font-size: 10px; }
.studio-pulse small { margin-top: 2px; color: #8ba2ad; font-size: 9px; }
.pulse-dot, .brief-live i, .footer-route i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--premium-cyan); box-shadow: 0 0 10px rgba(110,201,196,.85); }
.pulse-dot.warn { background: var(--premium-brass); box-shadow: 0 0 10px rgba(201,161,91,.8); }
.pulse-dot.error { background: #e86a70; box-shadow: 0 0 10px rgba(232,106,112,.8); }

nav { gap: 2px; align-items: center; }
.tab { position: relative; height: 38px; padding: 0 10px; border: 1px solid transparent; border-radius: 7px; color: #93a1b0; font-size: 10px; letter-spacing: .02em; }
.tab:hover { color: #f0e5ce; background: rgba(201,161,91,.08); }
.tab.active { color: #fff3d9; border-color: rgba(201,161,91,.36); background: linear-gradient(180deg, rgba(201,161,91,.18), rgba(201,161,91,.04)); box-shadow: inset 0 -2px var(--premium-brass); }
.tab.active::before { position: absolute; top: -5px; left: 50%; width: 3px; height: 3px; transform: translateX(-50%); border-radius: 50%; background: var(--premium-brass-bright); box-shadow: 0 0 8px var(--premium-brass); content: ""; }

.top-actions { gap: 6px; }
.top-actions button, button { border-color: rgba(134, 156, 177, .32); border-radius: 6px; }
.top-actions .primary { background: linear-gradient(145deg, #3e87a7, #24597b); border-color: #72c3c2; box-shadow: 0 4px 12px rgba(33, 115, 139, .32); }
.button-glyph { margin-right: 4px; color: var(--premium-brass-bright); font-size: 15px; vertical-align: -1px; }

.workspace { height: calc(100% - var(--topbar-height) - 26px); grid-template-columns: 282px minmax(640px, 1fr) 306px; }
.left-panel, .right-panel { position: relative; background: linear-gradient(180deg, rgba(17, 25, 35, .97), rgba(10, 16, 23, .97)); }
.left-panel { border-right-color: var(--premium-line); padding: 15px 13px; }
.right-panel { border-left-color: var(--premium-line); padding: 15px 14px; }
.main-panel { background: transparent; }
aside section { padding: 0 0 17px; margin: 0 0 17px; border-bottom-color: rgba(135,153,169,.15); }
aside h2 { color: #e0c486; font-size: 10px; letter-spacing: .14em; }
.world-profile-note { border: 1px solid rgba(201,161,91,.24); border-left: 3px solid var(--premium-brass); border-radius: 7px; background: linear-gradient(135deg, rgba(74,53,29,.44), rgba(15,23,30,.62)); box-shadow: inset 0 1px rgba(255,255,255,.04); }
.world-profile-note strong { color: var(--premium-brass-bright); }

.studio-brief { position: relative; overflow: hidden; margin: 13px 0 14px; padding: 12px; border: 1px solid rgba(110,201,196,.28); border-radius: 9px; background: linear-gradient(145deg, rgba(23, 61, 65, .64), rgba(15, 25, 33, .82)); box-shadow: 0 10px 22px rgba(0,0,0,.2); }
.studio-brief::after { position: absolute; right: -30px; bottom: -44px; width: 110px; height: 110px; border: 1px solid rgba(110,201,196,.18); border-radius: 50%; box-shadow: 0 0 0 15px rgba(110,201,196,.04), 0 0 0 30px rgba(110,201,196,.03); content: ""; }
.brief-heading { display: flex; align-items: center; justify-content: space-between; }
.eyebrow { color: var(--premium-brass-bright); font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.brief-live { color: #90d9d0; font-size: 8px; letter-spacing: .1em; }
.brief-live i { width: 5px; height: 5px; margin-right: 4px; }
.brief-title { display: block; margin-top: 9px; color: #edf8f6; font-size: 12px; }
.brief-copy { margin: 5px 0 10px; color: #a8c0c4; font-size: 10px; line-height: 1.4; }
.brief-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.brief-metrics span { padding: 6px 4px; border: 1px solid rgba(142,200,198,.17); border-radius: 5px; background: rgba(5, 12, 17, .28); text-align: center; }
.brief-metrics b, .brief-metrics small { display: block; }
.brief-metrics b { color: #e4ffff; font-size: 14px; }
.brief-metrics small { margin-top: 2px; color: #80aaa9; font-size: 8px; letter-spacing: .12em; }
.brief-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 9px; }
.brief-actions button { position: relative; z-index: 1; padding: 6px 4px; background: rgba(9, 21, 27, .64); font-size: 10px; }
.brief-actions button:first-child { border-color: rgba(110,201,196,.52); color: #b8f0e7; }
.brief-actions button:last-child { border-color: rgba(201,161,91,.46); color: #f5d692; }

input, select, textarea { border-color: rgba(126, 148, 166, .35); border-radius: 5px; background: rgba(7, 13, 20, .72); }
input:focus, select:focus, textarea:focus { border-color: var(--premium-brass); box-shadow: 0 0 0 2px rgba(201,161,91,.14), 0 0 14px rgba(201,161,91,.12); }
button:hover { border-color: rgba(239, 203, 131, .65); background: rgba(201,161,91,.12); }
.primary { border-color: #7bc7bf; background: linear-gradient(145deg, #317c7b, #20535e); }
.success { background: linear-gradient(145deg, #2a8767, #185744); }
.danger { background: rgba(124, 43, 55, .28); }

.view-toolbar, .catalog-toolbar, .code-tabs { border-bottom-color: rgba(135,153,169,.18); background: linear-gradient(180deg, rgba(22,31,42,.96), rgba(14,21,29,.96)); }
.view-toolbar { height: 54px; padding: 0 18px; box-shadow: 0 4px 18px rgba(0,0,0,.14); }
.view-toolbar strong { color: #f1e5ca; letter-spacing: .03em; }
.designer-stage { height: calc(100% - 54px); background-color: transparent; background-image: radial-gradient(rgba(201,161,91,.17) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px); background-size: 24px 24px, 24px 24px; }
.design-canvas { border: 1px solid rgba(215,181,109,.72); border-radius: 8px; background: linear-gradient(145deg, #27323e, #151d27); box-shadow: 0 25px 60px rgba(0,0,0,.48), 0 0 0 5px rgba(201,161,91,.05); }
.canvas-title { height: 34px; padding: 8px 12px; border-bottom-color: rgba(215,181,109,.35); background: linear-gradient(180deg, #4b5051, #30363b); color: #fff4d9; font-family: "cipsoftFont", "Verdana Bold-11px", sans-serif; letter-spacing: .02em; }
.canvas-grid { inset: 34px 0 0; background-size: 10px 10px; opacity: .72; }
.design-widget { border-color: rgba(173,191,204,.7); background: linear-gradient(145deg, #46576a, #344252); box-shadow: inset 0 1px rgba(255,255,255,.08); }
.design-widget.type-Panel, .design-widget.type-FlatPanel, .design-widget.type-ScrollArea, .design-widget.type-ScrollablePanel { background: linear-gradient(145deg, rgba(71,88,103,.52), rgba(27,39,50,.45)); border-color: rgba(208,182,120,.48); }
.design-widget.selected { outline-color: var(--premium-brass-bright); box-shadow: 0 0 0 4px rgba(201,161,91,.14), 0 5px 15px rgba(0,0,0,.24); }
.resize-handle { background: var(--premium-brass-bright); border-radius: 2px; }

.panel-card, .asset-catalog-panel, .asset-preview-panel, .tier-panel, .imported-assets-panel { border-color: rgba(135,153,169,.24); border-radius: 9px; background: linear-gradient(145deg, rgba(22,31,42,.95), rgba(13,20,28,.95)); box-shadow: 0 10px 28px rgba(0,0,0,.18); }
.template-card, .template-details { border-color: rgba(135,153,169,.3); }
.template-intro { border-color: var(--premium-line-strong); background: linear-gradient(135deg, rgba(65,52,31,.85), rgba(22,36,46,.92)); box-shadow: var(--premium-shadow); }
.template-card { min-height: 204px; border-radius: 9px; }
.template-card:hover { box-shadow: 0 16px 32px rgba(0,0,0,.36), 0 0 0 1px rgba(201,161,91,.2); }
.template-icon { border: 1px solid color-mix(in srgb, var(--template-accent) 55%, transparent); box-shadow: inset 0 1px rgba(255,255,255,.1), 0 6px 14px rgba(0,0,0,.2); }
.template-card-title strong { font-family: "cipsoftFont", "Verdana Bold-11px", sans-serif; }

.asset-catalog-panel, .asset-preview-panel, .tier-panel { border-top: 2px solid rgba(201,161,91,.35); }
.real-asset-preview { border-color: rgba(201,161,91,.42); box-shadow: inset 0 0 36px rgba(0,0,0,.35); }
.asset-row.active { background: linear-gradient(90deg, rgba(201,161,91,.18), rgba(31,57,69,.4)); box-shadow: inset 3px 0 var(--premium-brass-bright); }
.asset-class-badge { border-color: rgba(238,198,116,.62); background: rgba(110,78,31,.42); color: #f2cf8a; }
.tier-rule { border-color: rgba(201,161,91,.25); background: rgba(16,24,32,.8); }

.logic-workbench, .flow-layout { background-color: transparent; background-image: radial-gradient(rgba(110,201,196,.17) 1px, transparent 1px); background-size: 24px 24px; }
.flow-node { border-color: rgba(126,148,166,.35); border-left-color: var(--premium-cyan); border-radius: 8px; background: linear-gradient(145deg, rgba(30,43,56,.96), rgba(14,22,30,.96)); box-shadow: 0 13px 28px rgba(0,0,0,.32); }
.flow-node.network { border-left-color: var(--premium-brass); }
.flow-node.server, .flow-node.storage { border-left-color: #62c89e; }
.flow-node.selected { outline-color: var(--premium-brass-bright); }

.readiness-summary, .validation-list, .file-list, .catalog-results { scrollbar-color: #536b79 #0d141c; }
.validation-item { border: 1px solid rgba(135,153,169,.16); border-left: 3px solid var(--premium-brass); background: rgba(17,25,34,.75); }
.validation-item.ok { border-left-color: #62c89e; }
.validation-item.error { border-left-color: #e86a70; }
.catalog-row { border-bottom-color: rgba(135,153,169,.15); }
.catalog-row:hover { background: rgba(201,161,91,.06); }

footer { position: relative; height: 26px; border-top-color: var(--premium-line); background: #090e15; color: #84929e; }
.footer-route { display: flex; align-items: center; justify-content: center; gap: 6px; color: #8fa9ae; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.footer-route i { width: 5px; height: 5px; }
.footer-route b { color: var(--premium-brass); font-weight: 400; }

.toast { border-color: rgba(201,161,91,.52); background: linear-gradient(145deg, #202d39, #121a23); box-shadow: var(--premium-shadow); }
.toast.ok { border-left: 3px solid #62c89e; }
.toast.error { border-left: 3px solid #e86a70; }

@media (max-width: 1450px) {
  .studio-pulse { display: none; }
  .brand { min-width: 220px; }
  .studio-world-chip { display: none; }
  .workspace { grid-template-columns: 264px minmax(600px, 1fr) 288px; }
}

@media (max-width: 1200px) {
  .workspace { height: calc(100% - var(--topbar-height) - 26px); grid-template-columns: 232px minmax(560px, 1fr); }
  .right-panel { display: none; }
  .brand { min-width: 190px; }
  .brand div { display: block; }
  .tab { padding: 0 7px; font-size: 9px; }
  .footer-route { display: none; }
}

@media (max-width: 900px) {
  .topbar { padding: 0 10px; }
  .brand { min-width: 42px; }
  .brand div { display: none; }
  nav { overflow-x: auto; }
  .top-actions .secondary { display: none; }
  .workspace { grid-template-columns: 210px minmax(520px, 1fr); }
}

/* Premium pass II: a shared MMO/Tibia visual language for every workbench view. */
button, input, select, textarea { font-family: "Trebuchet MS", "Segoe UI", sans-serif; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
.tab:focus-visible { outline: 2px solid var(--premium-brass-bright); outline-offset: 2px; }

h1, h2, h3, strong { text-rendering: geometricPrecision; }
h1, h2, h3 { font-family: "Trebuchet MS", "Segoe UI", sans-serif; }
h1 { letter-spacing: -.018em; }
h2 { letter-spacing: .025em; }
h3 { letter-spacing: .02em; }

label { color: #d4dfeb; }
label > small, label .field-help { display: block; }
.field-help, .section-help, .catalog-help { color: #91a5b6; line-height: 1.45; }
.field-help { font-size: 9px; letter-spacing: .01em; }
.section-help { font-size: 10px; }
code { color: #a9d8d2; border: 1px solid rgba(110,201,196,.14); border-radius: 4px; background: rgba(7,16,22,.58); padding: 1px 4px; }

.view-toolbar, .template-toolbar, .asset-toolbar, .architecture-heading, .contracts-heading {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(201,161,91,.23);
  background:
    linear-gradient(180deg, rgba(27,39,52,.97), rgba(12,19,27,.97)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 1px, transparent 1px 6px);
}
.view-toolbar::before, .template-toolbar::before, .asset-toolbar::before,
.architecture-heading::before, .contracts-heading::before {
  position: absolute; right: 0; bottom: -1px; left: 0; height: 2px;
  content: ""; background: linear-gradient(90deg, transparent, rgba(110,201,196,.8), rgba(201,161,91,.86), transparent); opacity: .55;
}
.view-toolbar > strong, .template-toolbar strong, .asset-toolbar strong { color: #f3ead7; font-size: 13px; letter-spacing: .035em; }
.template-toolbar small, .asset-toolbar small { color: #9caebc; font-size: 10px; }
.template-toolbar input, .asset-toolbar input, .asset-toolbar select { box-shadow: inset 0 1px rgba(255,255,255,.04), 0 5px 14px rgba(0,0,0,.14); }

.template-view, .assets-view, .logic-view, .architecture-view, .contracts-view, .help-view {
  background:
    radial-gradient(circle at 75% -10%, rgba(110,201,196,.08), transparent 30%),
    radial-gradient(circle at 4% 24%, rgba(201,161,91,.06), transparent 26%),
    #0a1017;
}
.template-library, .architecture-grid, .contracts-layout { scrollbar-color: #536b79 #0d141c; }

.template-intro {
  position: relative;
  overflow: hidden;
  border-color: rgba(201,161,91,.46);
  background:
    linear-gradient(135deg, rgba(66,52,29,.9), rgba(20,39,47,.94) 64%, rgba(18,27,37,.96)),
    radial-gradient(circle at 90% 0, rgba(110,201,196,.22), transparent 34%);
  box-shadow: 0 18px 38px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.07);
}
.template-intro::after { position: absolute; right: 22px; bottom: -50px; width: 160px; height: 160px; border: 1px solid rgba(201,161,91,.18); border-radius: 50%; box-shadow: 0 0 0 15px rgba(201,161,91,.035), 0 0 0 30px rgba(110,201,196,.025); content: ""; pointer-events: none; }
.template-intro-title h1 { color: #fff1cb; font-size: 24px; }
.template-intro p { color: #c1d2d4; }
.template-steps span { padding: 6px 8px; border: 1px solid rgba(142,200,198,.14); border-radius: 6px; background: rgba(7,15,21,.22); }
.template-steps b { border: 1px solid rgba(245,210,133,.72); background: linear-gradient(145deg, #d4a75c, #805425); color: #24180a; box-shadow: 0 4px 10px rgba(0,0,0,.22); }
.template-card { min-height: 204px; border-color: rgba(126,148,166,.33); box-shadow: 0 7px 18px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.03); }
.template-card::before { position: absolute; top: 0; right: 0; left: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--template-accent), transparent); content: ""; opacity: .8; }
.template-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(0,0,0,.34), 0 0 0 1px color-mix(in srgb, var(--template-accent) 28%, transparent); }
.template-card.active { box-shadow: 0 0 0 2px color-mix(in srgb, var(--template-accent) 32%, transparent), 0 18px 36px rgba(0,0,0,.34); }
.template-icon { width: 42px; height: 42px; border-radius: 11px; background: linear-gradient(145deg, color-mix(in srgb, var(--template-accent) 30%, #17202c), #111a24); font-size: 23px; }
.template-card-title strong { color: #fff4da; }
.template-tags span, .template-badge { border-color: color-mix(in srgb, var(--template-accent) 34%, #34445b); color: #b7c7d3; }
.template-details { border-color: rgba(201,161,91,.45); background: linear-gradient(145deg, rgba(28,39,50,.98), rgba(13,21,29,.98)); box-shadow: 0 -12px 28px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.05); }
.template-details-list span { border: 1px solid rgba(126,148,166,.2); background: rgba(7,14,21,.58); }
.template-apply { box-shadow: 0 6px 16px rgba(0,0,0,.22); }

.assets-view { overflow: auto; }
.asset-toolbar { min-height: 76px; padding: 12px 18px; }
.asset-workbench { gap: 16px; padding: 18px; }
.asset-catalog-panel, .asset-preview-panel, .tier-panel, .imported-assets-panel,
.architecture-card, .contract-actions-card, .contract-editor-card, .contract-preview-card,
.form-grid .panel-card, .help-content {
  border-color: rgba(126,148,166,.26);
  background: linear-gradient(145deg, rgba(24,34,46,.96), rgba(11,18,26,.96));
  box-shadow: 0 15px 34px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.035);
}
.asset-catalog-panel, .asset-preview-panel, .tier-panel { position: relative; }
.asset-catalog-panel::before, .asset-preview-panel::before, .tier-panel::before, .architecture-card::before,
.contract-actions-card::before, .contract-editor-card::before, .contract-preview-card::before, .form-grid .panel-card::before {
  position: absolute; top: 0; right: 18px; left: 18px; height: 1px; content: ""; background: linear-gradient(90deg, transparent, rgba(110,201,196,.55), transparent); opacity: .7;
}
.asset-section-heading { padding-bottom: 8px; border-bottom: 1px solid rgba(126,148,166,.16); }
.asset-section-heading h2 { color: #f2e6cd; font-size: 14px; }
.asset-section-heading span { color: #98b4ba; }
.asset-catalog { border-top-color: rgba(201,161,91,.26); }
.asset-row { border-bottom-color: rgba(126,148,166,.14); transition: background .15s ease, transform .15s ease; }
.asset-row:hover { transform: translateX(2px); background: rgba(110,201,196,.08); }
.asset-row.active { background: linear-gradient(90deg, rgba(201,161,91,.18), rgba(31,57,69,.42)); box-shadow: inset 3px 0 var(--premium-brass-bright), 0 5px 14px rgba(0,0,0,.14); }
.asset-row-id { color: #a3d5cf; }
.asset-class-badge { border-color: rgba(239,203,131,.72); background: linear-gradient(145deg, rgba(142,97,34,.58), rgba(53,39,22,.72)); color: #ffe0a1; box-shadow: 0 0 12px rgba(201,161,91,.14); }
.real-asset-preview { height: 280px; border-color: rgba(201,161,91,.48); background-color: #101822; box-shadow: inset 0 0 50px rgba(0,0,0,.44), 0 8px 20px rgba(0,0,0,.2); }
.real-asset-preview img { filter: drop-shadow(0 10px 18px rgba(0,0,0,.6)) drop-shadow(0 0 8px rgba(201,161,91,.16)); }
.asset-stat-grid span { border-color: rgba(110,201,196,.22); background: linear-gradient(145deg, rgba(23,55,57,.58), rgba(10,19,27,.7)); }
.tier-selected-editor { border-top-color: rgba(201,161,91,.35); }
.tier-rule { border-color: rgba(201,161,91,.26); background: linear-gradient(145deg, rgba(29,39,46,.92), rgba(13,21,28,.92)); }
.imported-assets-panel { margin-top: 2px; }
.imported-asset { border-color: rgba(126,148,166,.28); background: linear-gradient(145deg, #182530, #0e161e); transition: transform .16s ease, border-color .16s ease; }
.imported-asset:hover { transform: translateY(-3px); border-color: rgba(201,161,91,.58); }
.imported-asset-image { background: radial-gradient(circle, rgba(110,201,196,.09), transparent 70%), #0c121b; }

.logic-toolbar { gap: 8px; }
.logic-summary { padding: 5px 9px; border: 1px solid rgba(110,201,196,.26); border-radius: 99px; background: rgba(8,20,25,.56); color: #a8dad5; font-size: 10px; }
.logic-workbench { gap: 12px; padding: 12px; }
.logic-palette, .logic-inspector, .logic-stage { border-color: rgba(126,148,166,.26); background: linear-gradient(145deg, rgba(23,34,45,.97), rgba(10,17,25,.97)); box-shadow: 0 12px 28px rgba(0,0,0,.2); }
.logic-palette { padding: 12px; }
.logic-palette-heading { padding: 9px 10px 11px; border: 1px solid rgba(201,161,91,.24); border-radius: 8px; background: linear-gradient(135deg, rgba(66,52,29,.48), rgba(15,30,36,.55)); }
.logic-palette-heading strong { color: #f4dfae; }
.logic-palette section { border-top-color: rgba(126,148,166,.16); }
.logic-palette h3 { color: #d3b976; font-size: 9px; letter-spacing: .13em; }
.logic-palette button { border-color: rgba(126,148,166,.25); border-radius: 7px; background: rgba(8,16,24,.52); transition: border-color .15s ease, transform .15s ease, background .15s ease; }
.logic-palette button:hover { transform: translateX(2px); border-color: rgba(110,201,196,.58); background: rgba(22,65,67,.38); }
.logic-palette button > span { color: var(--premium-brass-bright); }
.logic-stage-bar { border-bottom-color: rgba(126,148,166,.2); background: rgba(22,33,44,.72); }
.flow-layout { background-color: #0b141b; }
.flow-node { border-color: rgba(126,148,166,.34); background: linear-gradient(145deg, rgba(34,49,62,.98), rgba(12,22,30,.98)); box-shadow: 0 14px 30px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.045); }
.flow-node:hover { border-color: rgba(201,161,91,.62); }
.flow-node.selected { box-shadow: 0 0 0 2px rgba(201,161,91,.3), 0 14px 30px rgba(0,0,0,.34); }
.logic-trace { border-top-color: rgba(201,161,91,.3); background: rgba(12,20,27,.92); }
.logic-trace-step { border-color: rgba(110,201,196,.22); background: rgba(17,47,49,.58); }
.logic-trace-step.active { border-color: rgba(201,161,91,.75); background: rgba(97,68,26,.52); color: #ffe4a4; }
.logic-inspector h2 { color: #f0e5cc; }
.logic-connection-box, .logic-problems { border-color: rgba(126,148,166,.22); background: rgba(8,16,23,.48); }
.logic-problem { border-left-color: var(--premium-brass); background: rgba(82,60,27,.26); }
.logic-problem.ok { border-left-color: #62c89e; background: rgba(25,76,61,.3); }

.architecture-heading, .contracts-heading { padding: 24px 26px 20px; }
.architecture-heading h1, .contracts-heading h1 { color: #fff0ce; font-size: 24px; }
.architecture-heading p, .contracts-heading p { color: #a9bbc2; }
.readiness-item { border-color: rgba(126,148,166,.24); background: linear-gradient(145deg, rgba(18,31,40,.86), rgba(10,18,25,.86)); }
.readiness-item.ready { border-color: rgba(98,200,158,.46); background: linear-gradient(145deg, rgba(24,70,59,.48), rgba(10,28,28,.72)); }
.architecture-card { position: relative; padding: 18px; border-radius: 10px; }
.architecture-card h2 { color: #eee2c8; font-size: 14px; }
.blueprint-block-row, .data-model-row, .ui-state-row { border-color: rgba(126,148,166,.22); background: linear-gradient(145deg, rgba(20,34,44,.82), rgba(10,18,25,.82)); }
.blueprint-block-row:hover, .data-model-row:hover, .ui-state-row:hover { border-color: rgba(110,201,196,.42); }
.sample-data-editor { border-color: rgba(110,201,196,.28); background: #081117; color: #c1e6de; }

.contracts-heading .contract-shield { border-color: rgba(110,201,196,.5); background: linear-gradient(135deg, rgba(18,66,64,.75), rgba(11,25,32,.9)); box-shadow: 0 8px 18px rgba(0,0,0,.2); }
.contract-actions-card, .contract-editor-card, .contract-preview-card { position: relative; }
.contract-action { border-color: rgba(126,148,166,.24); background: linear-gradient(145deg, rgba(18,31,41,.9), rgba(9,17,24,.9)); transition: transform .15s ease, border-color .15s ease; }
.contract-action:hover { transform: translateX(2px); border-color: rgba(110,201,196,.56); }
.contract-action.active { border-color: rgba(201,161,91,.74); background: linear-gradient(90deg, rgba(95,67,27,.46), rgba(20,47,53,.7)); box-shadow: inset 3px 0 var(--premium-brass-bright), 0 7px 16px rgba(0,0,0,.18); }
.contract-field-row { border-color: rgba(126,148,166,.22); background: rgba(8,16,23,.56); }
.contract-preview-card pre { border-color: rgba(110,201,196,.28); background: #071117; color: #bde5d9; box-shadow: inset 0 0 20px rgba(0,0,0,.3); }
.contract-plain-summary { border-left-color: var(--premium-cyan); background: rgba(18,60,61,.3); color: #c4e5df; }
.contract-tip { border-color: rgba(201,161,91,.36); background: rgba(68,49,23,.3); color: #e5c785; }

.form-grid { gap: 16px; padding: 18px; }
.form-grid .panel-card { position: relative; padding: 18px; }
.form-grid .panel-card h2 { color: #f0e4ca; }
.file-row { border: 1px solid rgba(126,148,166,.2); background: linear-gradient(145deg, rgba(20,33,43,.84), rgba(9,17,24,.84)); }
.file-row:hover { border-color: rgba(110,201,196,.4); }
.help-view { overflow: auto; padding: 20px; }
.help-content { max-width: 1040px; margin: 0 auto; padding: 28px 34px; border-radius: 12px; }
.help-content::before { display: block; width: 90px; height: 3px; margin-bottom: 18px; border-radius: 99px; background: linear-gradient(90deg, var(--premium-brass), var(--premium-cyan)); content: ""; }
.help-content h1 { color: #fff0ce; font-size: 26px; }
.help-content h2 { padding-bottom: 7px; border-bottom: 1px solid rgba(201,161,91,.2); color: #e8ce92; font-size: 15px; }
.help-content p, .help-content li { color: #b5c5cc; line-height: 1.7; }
.help-content code { color: #b8e4db; background: rgba(8,19,25,.72); }

.layer-item { border-color: transparent; border-left: 2px solid transparent; background: transparent; transition: background .14s ease, border-color .14s ease; }
.layer-item:hover { border-left-color: rgba(110,201,196,.56); background: rgba(110,201,196,.07); }
.layer-item.active { border-left-color: var(--premium-brass-bright); background: linear-gradient(90deg, rgba(201,161,91,.2), transparent); }
.validation-item { border-color: rgba(126,148,166,.18); background: rgba(16,27,36,.72); }
.validation-item.ok { background: rgba(21,68,53,.28); }
.validation-item.error { background: rgba(93,35,43,.3); }
.toast { border-radius: 8px; }

@media (max-width: 1200px) {
  .template-intro { grid-template-columns: 1fr 1fr; }
  .template-intro > p { grid-column: 1 / -1; }
  .architecture-heading, .contracts-heading { grid-template-columns: 1fr; gap: 14px; }
  .contracts-layout { grid-template-columns: 220px minmax(420px, 1fr); }
  .contract-preview-card { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .template-intro { grid-template-columns: 1fr; }
  .template-intro > p { grid-column: auto; }
  .template-toolbar, .asset-toolbar { grid-template-columns: 1fr 1fr; }
  .template-toolbar > div, .asset-toolbar > div { grid-column: 1 / -1; }
  .contracts-layout { grid-template-columns: 1fr; }
  .contract-preview-card { grid-column: auto; }
  .help-content { padding: 22px 18px; }
}

/* Subscription gate: compact enough not to steal the workspace, clear enough for a first-time user. */
.license-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 10px 14px 0;
  padding: 10px 14px;
  border: 1px solid rgba(213, 165, 82, .34);
  border-radius: 12px;
  background: linear-gradient(105deg, rgba(43, 31, 24, .92), rgba(20, 27, 38, .94));
  box-shadow: 0 8px 24px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.06);
}
.license-bar.active { border-color: rgba(82, 209, 153, .5); background: linear-gradient(105deg, rgba(20, 55, 48, .9), rgba(20, 31, 42, .94)); }
.license-bar.invalid, .license-bar.expired, .license-bar.device-mismatch, .license-bar.offline-expired { border-color: rgba(240, 108, 113, .58); background: linear-gradient(105deg, rgba(63, 30, 36, .92), rgba(27, 27, 39, .94)); }
.license-copy { display: flex; align-items: center; gap: 11px; min-width: 0; }
.license-copy > div { min-width: 0; }
.license-copy strong { display: block; color: #f8e5bd; font-size: 12px; letter-spacing: .02em; }
.license-copy small { display: block; max-width: 720px; margin-top: 2px; color: #b9c3d3; font-size: 10px; line-height: 1.35; }
.license-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 78px; padding: 5px 7px; border: 1px solid rgba(222, 172, 77, .58); border-radius: 999px; color: #f5c96c; background: rgba(153, 101, 31, .2); font-size: 9px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
.license-bar.active .license-badge { border-color: rgba(82,209,153,.65); color: #84e8b9; background: rgba(40,145,104,.2); }
.license-bar.invalid .license-badge, .license-bar.expired .license-badge, .license-bar.device-mismatch .license-badge, .license-bar.offline-expired .license-badge { border-color: rgba(240,108,113,.72); color: #ff9a9e; background: rgba(153,47,55,.22); }
.license-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex: 0 0 auto; }
.license-actions input { width: 245px; height: 30px; padding: 0 10px; border: 1px solid rgba(138, 154, 178, .32); border-radius: 7px; background: rgba(7, 11, 18, .72); color: #e7edf7; font: 11px ui-monospace, SFMono-Regular, Consolas, monospace; }
.license-actions input:focus { border-color: #d5a552; outline: 2px solid rgba(213,165,82,.18); }
.license-actions button { min-height: 30px; white-space: nowrap; }
.license-help-button { border: 0; background: transparent; color: #b9c6dc; font-size: 10px; cursor: pointer; }
.license-help-button:hover { color: #f5d78f; }
.demo-mode .edit-controls button:disabled, .demo-mode #deleteWidget:disabled { opacity: .42; }
.demo-mode .license-gated { filter: saturate(.55); }
.template-card { position: relative; overflow: hidden; }
.template-card::after { position: absolute; inset: auto 0 0; height: 3px; background: linear-gradient(90deg, transparent, var(--template-accent), transparent); content: ""; opacity: .75; }
.template-premium-badge { display: inline-flex; align-items: center; width: max-content; padding: 3px 7px; border: 1px solid color-mix(in srgb, var(--template-accent, var(--premium-brass)) 70%, white 10%); border-radius: 999px; color: #ffe7a8; background: linear-gradient(90deg, color-mix(in srgb, var(--template-accent, #c9a15b) 25%, transparent), rgba(13,20,28,.74)); box-shadow: 0 0 14px color-mix(in srgb, var(--template-accent, #c9a15b) 18%, transparent); font-size: 8px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.template-card > .template-premium-badge { position: absolute; top: 10px; right: 10px; z-index: 1; }
.template-premium-showcase { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; margin: 12px 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--template-detail-accent, var(--premium-brass)) 38%, transparent); border-radius: 8px; background: linear-gradient(105deg, color-mix(in srgb, var(--template-detail-accent, #c9a15b) 16%, transparent), rgba(9,16,24,.64)); }
.template-premium-showcase .template-premium-badge { grid-row: span 2; }
.template-premium-showcase strong { color: #f5e2b3; font-size: 11px; }
.template-premium-showcase small { color: #a9bcc5; font-size: 9px; line-height: 1.35; }
@media (max-width: 980px) {
  .license-bar { align-items: flex-start; flex-direction: column; }
  .license-actions { width: 100%; justify-content: stretch; flex-wrap: wrap; }
  .license-actions input { flex: 1 1 240px; }
}

/* Premium navigation: the workbench keeps every section visible instead of
 * squeezing eleven tabs into one unreadable line.  The second header row is
 * deliberately a compact menu rail, so users can always see the complete
 * route through the designer on both large and small screens. */
:root { --topbar-height: 126px; }
.topbar {
  display: grid;
  grid-template-columns: auto auto minmax(150px, 1fr) auto;
  grid-template-rows: 56px 64px;
  align-items: center;
  gap: 0 14px;
  padding: 0 18px 4px;
}
.brand { grid-column: 1; grid-row: 1; }
.studio-world-chip { grid-column: 2; grid-row: 1; }
.studio-pulse { grid-column: 3; grid-row: 1; }
.top-actions { grid-column: 4; grid-row: 1; }
#tabs {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(6, minmax(108px, 1fr));
  grid-auto-rows: 30px;
  align-content: center;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
  max-height: 64px;
  padding: 5px 0;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,161,91,.56) rgba(7,13,20,.6);
}
.tab {
  width: 100%;
  height: 30px;
  min-width: 0;
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  line-height: 30px;
}
.tab::after {
  position: absolute;
  right: 8px;
  bottom: 3px;
  left: 8px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(110,201,196,.22), transparent);
  opacity: 0;
}
.tab:hover::after, .tab.active::after { opacity: 1; }
.tab.active { box-shadow: inset 0 -2px var(--premium-brass), 0 4px 14px rgba(0,0,0,.15); }

.image-slot-editor {
  margin: 12px 0 10px;
  padding: 10px;
  border: 1px solid rgba(110,201,196,.28);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(17,49,53,.56), rgba(10,18,26,.74));
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 8px 18px rgba(0,0,0,.16);
}
.image-slot-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.image-slot-heading h3 { margin: 0 0 4px; color: #f0dfb7; font-size: 11px; }
.image-slot-heading .section-help { margin: 0; font-size: 9px; }
.image-slot-status { flex: 0 0 auto; padding: 3px 6px; border: 1px solid rgba(126,148,166,.3); border-radius: 99px; color: #9eb3bd; background: rgba(5,13,19,.52); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.image-slot-status.ready { border-color: rgba(98,200,158,.58); color: #91e1bc; background: rgba(25,91,68,.25); }
.image-slot-status[data-fit="contain"]::before { content: "FIT "; color: #b9d8d4; font-size: 8px; }
.image-slot-status[data-fit="stretch"]::before { content: "FILL "; color: #d5b47a; font-size: 8px; }
.image-slot-preview[data-fit="contain"] { background-size: 16px 16px; }
.image-slot-preview[data-fit="contain"] img { image-rendering: pixelated; }
.image-slot-preview { display: grid; place-items: center; min-height: 74px; margin: 9px 0 8px; border: 1px dashed rgba(201,161,91,.35); border-radius: 7px; background: radial-gradient(circle, rgba(110,201,196,.1), transparent 68%), rgba(5,12,18,.55); color: #8399a5; font-size: 9px; text-align: center; }
.image-slot-preview img { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 5px 9px rgba(0,0,0,.52)); }
.image-slot-preview strong, .image-slot-preview small { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image-slot-preview small { margin-top: 4px; color: #92a6b1; font-size: 8px; }
.image-slot-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.image-slot-actions button { min-width: 0; padding: 7px 5px; font-size: 10px; }

/* Every dense panel gets the same reading rhythm: a short label, a clear
 * value, and enough breathing room for Polish and English copy. */
.right-panel label, .left-panel label { line-height: 1.35; }
.right-panel input, .right-panel select, .right-panel textarea, .left-panel input, .left-panel select { min-height: 31px; }
.section-help, .field-help { max-width: 58ch; overflow-wrap: anywhere; }
.template-card p, .template-details p, .asset-details p, .help-content p { overflow-wrap: anywhere; }

@media (max-width: 1450px) {
  .topbar { grid-template-columns: auto minmax(130px, 1fr) auto; }
  .studio-world-chip { display: none; }
  .studio-pulse { grid-column: 2; }
  .top-actions { grid-column: 3; }
}
@media (max-width: 900px) {
  :root { --topbar-height: 166px; }
  .topbar { grid-template-columns: auto 1fr auto; grid-template-rows: 54px 104px; padding: 0 10px 4px; }
  .brand { grid-column: 1; }
  .studio-pulse { grid-column: 2; }
  .top-actions { grid-column: 3; }
  #tabs { grid-template-columns: repeat(4, minmax(118px, 1fr)); grid-auto-rows: 30px; max-height: 104px; }
  .top-actions .secondary { display: none; }
}
@media (max-width: 620px) {
  :root { --topbar-height: 206px; }
  .topbar { grid-template-columns: 1fr auto; grid-template-rows: 54px 144px; }
  .studio-pulse { display: none; }
  .top-actions { grid-column: 2; }
  #tabs { grid-template-columns: repeat(3, minmax(100px, 1fr)); grid-auto-rows: 30px; max-height: 144px; }
  .image-slot-actions { grid-template-columns: 1fr; }
}

/* Launch deck ------------------------------------------------------------
 * The first screen is deliberately calmer than the workbench: one promise,
 * three clear ways in, and a visual preview of the client -> ALS10 workflow.
 * It is CSS-only so the packaged app remains completely offline. */
.launch-deck[hidden] { display: none !important; }
.launch-deck {
  --launch-ink: #eff7ff;
  --launch-muted: #9db1c9;
  --launch-line: rgba(143, 191, 230, .2);
  --launch-teal: #64e0d5;
  --launch-blue: #5f9dff;
  --launch-gold: #e1b76a;
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: auto;
  color: var(--launch-ink);
  background:
    radial-gradient(circle at 78% 15%, rgba(61, 119, 255, .18), transparent 32%),
    radial-gradient(circle at 18% 82%, rgba(37, 208, 190, .12), transparent 30%),
    linear-gradient(135deg, #07111c 0%, #0a1323 45%, #10182a 100%);
  animation: launch-deck-in .42s ease both;
}
.launch-deck::before, .launch-deck::after {
  position: fixed;
  inset: 0;
  pointer-events: none;
  content: "";
}
.launch-deck::before {
  opacity: .55;
  background-image: radial-gradient(rgba(171, 231, 255, .85) .7px, transparent .8px), radial-gradient(rgba(255, 211, 131, .65) .8px, transparent .9px);
  background-position: 7% 14%, 82% 66%;
  background-size: 130px 130px, 210px 210px;
  animation: launch-stars-drift 28s linear infinite;
}
.launch-deck::after {
  background: linear-gradient(90deg, transparent 0, rgba(255,255,255,.035) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: launch-sheen 9s ease-in-out infinite;
}
.launch-stars { position: absolute; inset: 0; pointer-events: none; opacity: .28; background: repeating-linear-gradient(118deg, transparent 0 120px, rgba(114,181,255,.07) 121px, transparent 123px 260px); }
.launch-shell { position: relative; width: min(1260px, calc(100% - 68px)); min-height: 100%; margin: 0 auto; padding: 26px 0 30px; }
.launch-header { display: flex; align-items: center; gap: 22px; min-height: 54px; border-bottom: 1px solid var(--launch-line); }
.launch-brand-lockup { display: flex; align-items: center; gap: 11px; min-width: 260px; }
.launch-brand-lockup strong, .launch-brand-lockup small { display: block; }
.launch-brand-lockup strong { font-size: 14px; letter-spacing: .02em; }
.launch-brand-lockup small { margin-top: 3px; color: #93b2ca; font-size: 9px; letter-spacing: .18em; }
.launch-brand-mark { position: relative; display: grid; place-items: center; width: 42px; height: 42px; overflow: hidden; border: 1px solid rgba(225,183,106,.8); border-radius: 13px; color: #fff4d0; background: linear-gradient(145deg, #d6a552, #8b5327 58%, #2b5e7d); box-shadow: 0 0 0 4px rgba(225,183,106,.08), 0 9px 30px rgba(0,0,0,.35); font-family: Georgia, serif; font-size: 25px; font-weight: 700; }
.launch-brand-mark::before { position: absolute; inset: 5px; border: 1px solid rgba(255,245,209,.48); border-radius: 9px; content: ""; transform: rotate(45deg); }
.launch-brand-mark i { position: absolute; width: 60px; height: 1px; background: rgba(255,255,255,.55); transform: rotate(-42deg); }
.launch-brand-mark span { position: relative; z-index: 1; }
.launch-header-meta { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; color: #a7c1d8; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.launch-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--launch-teal); box-shadow: 0 0 0 5px rgba(100,224,213,.1), 0 0 18px var(--launch-teal); }
.launch-quiet-button { border: 1px solid rgba(147,183,218,.28); background: rgba(14,28,45,.56); color: #dbeafe; padding: 10px 13px; border-radius: 8px; font-size: 11px; }
.launch-quiet-button:hover { border-color: rgba(100,224,213,.65); background: rgba(21,52,69,.7); }
.launch-quiet-button span, .launch-enter-button span { margin-left: 8px; color: var(--launch-teal); }
.launch-hero { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr); align-items: center; gap: 52px; min-height: 390px; padding: 48px 30px 30px; }
.launch-copy { max-width: 620px; }
.launch-eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--launch-teal); font-size: 10px; font-weight: 700; letter-spacing: .19em; }
.launch-eyebrow::before { width: 25px; height: 1px; background: var(--launch-teal); box-shadow: 0 0 12px var(--launch-teal); content: ""; }
.launch-copy h1 { max-width: 610px; margin: 17px 0 17px; color: #f5f9ff; font-family: Georgia, "Times New Roman", serif; font-size: clamp(40px, 5.1vw, 74px); font-weight: 500; letter-spacing: -.045em; line-height: .98; text-wrap: balance; text-shadow: 0 12px 38px rgba(0,0,0,.36); }
.launch-copy p { max-width: 560px; margin: 0; color: var(--launch-muted); font-size: 15px; line-height: 1.7; }
.launch-proof-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.launch-proof-row span { min-width: 112px; padding: 9px 12px; border: 1px solid rgba(146,192,228,.17); border-radius: 8px; background: rgba(11,25,42,.52); box-shadow: inset 0 1px rgba(255,255,255,.04); }
.launch-proof-row b, .launch-proof-row small { display: block; }
.launch-proof-row b { color: #e8f2ff; font-size: 11px; letter-spacing: .1em; }
.launch-proof-row small { margin-top: 4px; color: #7891aa; font-size: 9px; }
.launch-visual { position: relative; min-height: 360px; isolation: isolate; }
.launch-visual::before { position: absolute; inset: 12% 8%; border-radius: 50%; background: radial-gradient(circle, rgba(92,157,255,.19), rgba(20,49,86,.04) 45%, transparent 70%); filter: blur(4px); content: ""; }
.launch-core { position: absolute; top: 50%; left: 52%; display: grid; place-items: center; width: 136px; height: 136px; border: 1px solid rgba(169,221,255,.55); border-radius: 50%; background: radial-gradient(circle at 35% 25%, #c5fff5 0 3%, #3fc7cf 13%, #225198 50%, #0b1c39 72%); box-shadow: 0 0 0 14px rgba(91,156,255,.06), 0 0 58px rgba(80,170,255,.58), inset -18px -20px 28px rgba(0,0,0,.38); transform: translate(-50%, -50%); animation: launch-core-float 5s ease-in-out infinite; }
.launch-core::before { position: absolute; inset: -12px; border: 1px solid rgba(100,224,213,.36); border-radius: 50%; content: ""; }
.launch-core-glyph { position: relative; z-index: 2; color: #fff8df; font-family: Georgia, serif; font-size: 58px; font-weight: 700; text-shadow: 0 4px 25px #7ee7e2; }
.launch-core-ring { position: absolute; width: 186px; height: 43px; border: 1px solid rgba(214,235,255,.58); border-radius: 50%; transform: rotate(-28deg); box-shadow: 0 0 15px rgba(119,198,255,.35); }
.launch-orbit { position: absolute; top: 50%; left: 52%; border: 1px solid rgba(116,193,255,.22); border-radius: 50%; transform: translate(-50%, -50%) rotate(-28deg); }
.orbit-one { width: 350px; height: 168px; animation: launch-orbit 12s linear infinite; }
.orbit-two { width: 420px; height: 230px; border-color: rgba(224,183,106,.18); transform: translate(-50%, -50%) rotate(42deg); animation: launch-orbit-reverse 17s linear infinite; }
.launch-window-card { position: absolute; border: 1px solid rgba(153,207,234,.32); border-radius: 8px; background: linear-gradient(145deg, rgba(25,43,63,.9), rgba(11,23,39,.9)); box-shadow: 0 24px 48px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.07); }
.launch-window-back { top: 23px; right: 7%; width: 168px; height: 112px; padding: 19px 13px; opacity: .65; transform: rotate(8deg); }
.launch-window-back span, .launch-window-back i, .launch-window-back b { display: block; height: 8px; margin: 9px 0; border-radius: 99px; background: rgba(101,222,210,.43); }
.launch-window-back i { width: 72%; background: rgba(224,183,106,.46); }
.launch-window-back b { width: 46%; background: rgba(109,160,255,.52); }
.launch-window-front { right: 6%; bottom: 28px; width: 247px; height: 155px; padding: 14px; transform: rotate(-3deg); }
.launch-mini-title { padding-bottom: 9px; border-bottom: 1px solid rgba(151,200,231,.2); color: #eaf6ff; font-size: 9px; letter-spacing: .18em; }
.launch-mini-row { display: grid; grid-template-columns: 25px 1fr 17px; align-items: center; gap: 7px; margin-top: 18px; }
.launch-mini-row span { width: 25px; height: 25px; border: 1px solid rgba(224,183,106,.6); border-radius: 6px; background: linear-gradient(135deg, #d7ab52, #5c3a2c); }
.launch-mini-row b, .launch-mini-row i { display: block; height: 6px; border-radius: 99px; background: rgba(149,203,237,.45); }
.launch-mini-row i { background: rgba(100,224,213,.65); }
.launch-mini-row.second { margin-top: 11px; opacity: .64; }
.launch-mini-progress { height: 5px; margin-top: 20px; border-radius: 99px; background: rgba(5,13,24,.8); overflow: hidden; }
.launch-mini-progress em { display: block; width: 68%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--launch-teal), var(--launch-blue)); box-shadow: 0 0 12px var(--launch-teal); }
.launch-window-front small { display: block; margin-top: 10px; color: #7d9ab4; font: 8px Consolas, monospace; }
.launch-spark { position: absolute; color: #d8faff; text-shadow: 0 0 15px currentColor; }
.spark-one { top: 16%; left: 10%; color: var(--launch-gold); font-size: 19px; animation: launch-spark 3.2s ease-in-out infinite; }
.spark-two { top: 63%; left: 4%; color: var(--launch-teal); font-size: 24px; animation: launch-spark 4.3s ease-in-out .6s infinite; }
.spark-three { top: 26%; right: 8%; color: #8db7ff; font-size: 33px; animation: launch-spark 3.8s ease-in-out 1s infinite; }
.launch-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 30px 34px; }
.launch-action-card { display: flex; align-items: center; gap: 13px; min-height: 92px; padding: 16px; border: 1px solid rgba(137,183,219,.2); border-radius: 12px; color: var(--launch-ink); text-align: left; background: linear-gradient(145deg, rgba(18,37,58,.82), rgba(10,22,37,.72)); box-shadow: inset 0 1px rgba(255,255,255,.045), 0 14px 26px rgba(0,0,0,.16); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.launch-action-card:hover { border-color: rgba(100,224,213,.7); box-shadow: inset 0 1px rgba(255,255,255,.09), 0 17px 35px rgba(0,0,0,.26), 0 0 22px rgba(100,224,213,.08); transform: translateY(-3px); }
.launch-action-card.featured { border-color: rgba(225,183,106,.52); background: linear-gradient(145deg, rgba(59,49,42,.75), rgba(17,36,48,.78)); }
.launch-action-card.featured:hover { border-color: var(--launch-gold); }
.launch-action-icon { display: grid; flex: 0 0 auto; place-items: center; width: 37px; height: 37px; border: 1px solid rgba(146,207,236,.33); border-radius: 10px; color: #c9f5ff; background: rgba(29,81,109,.44); font-size: 18px; box-shadow: 0 0 18px rgba(80,189,214,.15); }
.launch-action-icon.gallery { color: #ffe2a3; border-color: rgba(225,183,106,.52); background: rgba(104,72,35,.38); }
.launch-action-icon.preview { color: #b7c9ff; border-color: rgba(122,157,255,.45); background: rgba(47,66,130,.38); }
.launch-action-copy { min-width: 0; margin-right: auto; }
.launch-action-copy strong, .launch-action-copy small { display: block; }
.launch-action-copy strong { font-size: 12px; letter-spacing: .02em; }
.launch-action-copy small { margin-top: 6px; color: #8fa7be; font-size: 10px; line-height: 1.45; }
.launch-action-arrow { color: var(--launch-teal); font-size: 20px; transition: transform .2s ease; }
.launch-action-card:hover .launch-action-arrow { transform: translateX(3px); }
.launch-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 20px; border: 1px solid rgba(141,188,222,.17); border-radius: 12px; background: rgba(6,16,28,.56); box-shadow: inset 0 1px rgba(255,255,255,.035); }
.launch-license-note { display: flex; align-items: center; gap: 11px; min-width: 0; }
.launch-license-note strong, .launch-license-note small { display: block; }
.launch-license-note strong { font-size: 11px; }
.launch-license-note small { max-width: 460px; margin-top: 4px; color: #829bb2; font-size: 9px; line-height: 1.45; }
.launch-mode-badge { display: grid; place-items: center; min-width: 46px; height: 25px; padding: 0 8px; border: 1px solid rgba(225,183,106,.62); border-radius: 99px; color: #ffe1a1; background: rgba(102,70,31,.28); font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.launch-mode-badge.active { border-color: rgba(100,224,213,.65); color: #9ff8e9; background: rgba(23,100,94,.25); }
.launch-license-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; }
.launch-license-actions input { width: 168px; min-height: 34px; border-color: rgba(143,191,230,.25); background: rgba(4,11,20,.72); font: 11px Consolas, monospace; }
.launch-license-actions button { min-height: 34px; border-color: rgba(100,224,213,.5); color: #d9fffa; background: rgba(28,101,106,.55); font-size: 10px; }
.launch-license-actions button:hover { border-color: var(--launch-teal); background: rgba(31,133,135,.68); }
.launch-license-actions .launch-enter-button { border-color: rgba(225,183,106,.58); color: #ffe8b3; background: rgba(107,74,32,.35); }
.launch-license-actions .launch-enter-button:hover { border-color: var(--launch-gold); background: rgba(128,86,34,.54); }
body.launch-open { overflow: hidden; }
body.launch-open .topbar, body.launch-open .license-bar, body.launch-open .workspace, body.launch-open > footer { filter: blur(8px); opacity: .32; transition: opacity .3s ease, filter .3s ease; }
@keyframes launch-deck-in { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: scale(1); } }
@keyframes launch-stars-drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-70px,28px,0); } }
@keyframes launch-sheen { 0%, 55% { transform: translateX(-100%); } 75%, 100% { transform: translateX(100%); } }
@keyframes launch-core-float { 0%, 100% { transform: translate(-50%, -50%) translateY(0); } 50% { transform: translate(-50%, -50%) translateY(-9px); } }
@keyframes launch-orbit { to { transform: translate(-50%, -50%) rotate(332deg); } }
@keyframes launch-orbit-reverse { to { transform: translate(-50%, -50%) rotate(-318deg); } }
@keyframes launch-spark { 0%, 100% { opacity: .42; transform: translateY(0) scale(.85); } 50% { opacity: 1; transform: translateY(-8px) scale(1.08); } }
@media (max-width: 1020px) {
  .launch-shell { width: min(900px, calc(100% - 36px)); }
  .launch-hero { grid-template-columns: 1fr; gap: 15px; padding-top: 35px; }
  .launch-visual { min-height: 290px; max-width: 560px; width: 100%; margin: 0 auto; }
  .launch-actions { padding-left: 0; padding-right: 0; }
  .launch-footer { align-items: flex-start; flex-direction: column; }
  .launch-license-actions { width: 100%; }
  .launch-license-actions input { flex: 1; width: auto; }
}
@media (max-width: 650px) {
  .launch-shell { width: calc(100% - 24px); padding-top: 14px; }
  .launch-header-meta { display: none; }
  .launch-brand-lockup { min-width: 0; margin-right: auto; }
  .launch-quiet-button { padding: 8px; font-size: 9px; }
  .launch-hero { padding: 34px 6px 20px; }
  .launch-copy h1 { font-size: 42px; }
  .launch-copy p { font-size: 13px; }
  .launch-proof-row span { min-width: 0; flex: 1; }
  .launch-actions { grid-template-columns: 1fr; padding: 0 6px 24px; }
  .launch-footer { padding: 14px; }
  .launch-license-actions { flex-wrap: wrap; }
  .launch-license-actions input { flex-basis: 100%; }
  .launch-license-actions button { flex: 1; }
}