/* Vendored fonts so the editor renders and exports identically offline. */
@font-face { font-family:"Barlow Condensed"; font-style:normal; font-weight:500; font-display:swap; src:url("../../assets/fonts/barlow-condensed-500.woff2") format("woff2"); }
@font-face { font-family:"Barlow Condensed"; font-style:normal; font-weight:700; font-display:swap; src:url("../../assets/fonts/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family:"Barlow Condensed"; font-style:normal; font-weight:800; font-display:swap; src:url("../../assets/fonts/barlow-condensed-800.woff2") format("woff2"); }
@font-face { font-family:"Orbitron"; font-style:normal; font-weight:500; font-display:swap; src:url("../../assets/fonts/orbitron-500.woff2") format("woff2"); }
@font-face { font-family:"Orbitron"; font-style:normal; font-weight:700; font-display:swap; src:url("../../assets/fonts/orbitron-700.woff2") format("woff2"); }
@font-face { font-family:"Roboto Slab"; font-style:normal; font-weight:400; font-display:swap; src:url("../../assets/fonts/roboto-slab-400.woff2") format("woff2"); }
@font-face { font-family:"Roboto Slab"; font-style:normal; font-weight:700; font-display:swap; src:url("../../assets/fonts/roboto-slab-700.woff2") format("woff2"); }

:root { --blue:#1595ff; --panel:#08131d; --panel-border:#243b4a; --ink:#dce9ed; --muted:#8fa8b5; }
* { box-sizing:border-box; }
html { min-height:100%; background:#02070b; }
body { min-height:100%; margin:0; color:var(--ink); background:radial-gradient(circle at 50% 0,#142737 0,#061017 42rem,#03080c 100%); font:16px/1.35 "Barlow Condensed",Arial,sans-serif; }
body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 14%,#07294a44 0,transparent 48rem),
    linear-gradient(180deg,#01050996 0,#02070bc7 58%,#010407e8 100%);
}
.editor-background-video {
  position:fixed;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
  user-select:none;
  opacity:.62;
  filter:saturate(.9) contrast(1.08) brightness(.7);
}
.app-header,
.editor-layout,
.studio-scale-wrap { position:relative; z-index:1; }
button, input, textarea, select { font:inherit; }
.app-header { display:flex; justify-content:space-between; align-items:center; padding:20px 30px; border-bottom:1px solid #1e3542; background:#050d13e8; }
.eyebrow,.subtitle { margin:0; color:#5cc1ff; letter-spacing:.12em; font-weight:700; text-transform:uppercase; }.eyebrow { font-size:.8rem; }.subtitle { color:#8ba7b5; font-size:.75rem; }
h1 { margin:1px 0 3px; font:800 2rem/1 "Barlow Condensed",sans-serif; letter-spacing:.07em; text-transform:uppercase; }
.toggle { display:flex; gap:9px; align-items:center; color:#a8c5d3; cursor:pointer; }.toggle input { accent-color:var(--blue); }
.header-actions { display:flex; flex-wrap:wrap; gap:9px; align-items:center; justify-content:flex-end; }
.menu-exit { display:inline-grid; min-height:34px; place-items:center; padding:7px 12px; border:1px solid #2a566d; border-radius:5px; color:#dff3ff; background:#0b2432; text-decoration:none; text-transform:uppercase; font-size:.78rem; letter-spacing:.06em; }
.menu-exit:hover { border-color:#35b5ff; background:#10354a; }
.menu-exit:focus-visible { outline:2px solid #5cc1ff; outline-offset:2px; }
.editor-layout { display:grid; grid-template-columns:300px minmax(510px,700px) 330px; gap:18px; padding:20px; max-width:1450px; margin:auto; align-items:start; }
.panel-stack { display:grid; gap:14px; }.panel { border:1px solid var(--panel-border); border-radius:10px; padding:13px; background:linear-gradient(145deg,#0d1b25,#060e15); box-shadow:0 8px 25px #0004; }
.panel h2 { margin:0 0 10px; color:#43aeff; font-size:1.08rem; letter-spacing:.08em; text-transform:uppercase; }.panel h2 span { display:inline-grid; width:22px; height:22px; place-items:center; margin-right:6px; border-radius:50%; background:#087bd2; color:white; font-size:.8rem; }
.panel label { display:grid; gap:4px; margin:8px 0; color:#b6ccd6; font-size:.86rem; }.panel input,.panel textarea,.panel select { width:100%; color:#eaf5fa; border:1px solid #294758; border-radius:4px; padding:7px; background:#061017; outline:none; }.panel input:focus,.panel textarea:focus,.panel select:focus { border-color:#169bff; box-shadow:0 0 0 2px #1595ff30; }
.panel-note,.status { color:var(--muted); font-size:.82rem; }.file-name { display:block; margin-top:3px; color:var(--muted); font-size:.78rem; overflow-wrap:anywhere; }.file-name:empty { display:none; }.element-list { columns:2; margin:0; padding-left:25px; color:#c9d9df; }.element-list li { margin:3px 0; }.file-control { cursor:pointer; }.file-control input[type=file] { padding:5px; font-size:.75rem; }
button { display:block; width:100%; margin:8px 0; padding:8px 10px; border:1px solid #2a566d; border-radius:5px; color:#dff3ff; background:#0b2432; cursor:pointer; text-transform:uppercase; font-size:.78rem; letter-spacing:.06em; } button:hover { border-color:#35b5ff; background:#10354a; }.primary { background:#087bcb; border-color:#46baff; }.secondary { color:#afc3cc; background:#101a20; }
.swatch-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }.swatch { min-height:41px; border:2px solid transparent; border-radius:5px; cursor:pointer; color:#dcecf6; background:#0a151d; font-size:.69rem; text-transform:uppercase; }.swatch i { display:block; height:16px; margin-bottom:2px; border-radius:2px; background:var(--swatch); }.swatch.selected,.border-option.selected,.symbol-option.selected { border-color:#39adff; box-shadow:0 0 9px #1595ff8c; }
.border-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }.border-option { border:1px solid #2a4655; border-radius:5px; padding:6px; color:#c2d4dd; background:#081118; cursor:pointer; text-align:left; font-size:.78rem; }.border-option::before { content:""; display:block; height:20px; margin-bottom:4px; border:2px solid var(--option-color); border-radius:4px; box-shadow:inset 0 0 5px var(--option-color); filter:var(--frame-filter,none); }
.symbol-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }.symbol-option { height:42px; border:1px solid #294758; border-radius:4px; background:#071017; color:#e4f2f8; cursor:pointer; font-size:1.25rem; }
.card-stage { min-height:995px; padding:8px; position:relative; display:grid; place-items:start center; }.stage-label { margin:0 0 8px; color:#74c6ff; letter-spacing:.12em; font-size:.74rem; }
.card-shell { --accent:#1595ff; --box:#e9dfcd; width:500px; aspect-ratio:690/970; position:relative; isolation:isolate; filter:drop-shadow(0 15px 17px #000b); overflow:visible; }.card-frame { position:absolute; inset:0; width:100%; height:100%; z-index:-1; }.top-row { position:absolute; top:36px; left:34px; right:34px; display:flex; justify-content:space-between; }.number-badge { display:grid; width:74px; height:74px; place-items:center; border:4px solid #d8e4e5; border-radius:50%; color:#071118; background:linear-gradient(135deg,#faf3e9,#a5a29b); box-shadow:0 0 0 5px #0c1a21,0 0 14px var(--accent); font:800 3rem/1 "Barlow Condensed",sans-serif; }
.card-name { position:absolute; top:58px; left:115px; right:115px; color:#f5e7db; text-align:center; text-shadow:2px 3px 0 #000; font:800 clamp(1.5rem,4vw,2.7rem)/1 "Barlow Condensed",sans-serif; letter-spacing:.045em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.card-type { position:absolute; top:135px; left:145px; right:145px; padding:4px 8px; border:2px solid #5f95b2; border-radius:4px; color:#d5e2e7; background:#0a1a26e8; text-align:center; font-size:.72rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.art-window { position:absolute; top:178px; left:47px; width:406px; height:391px; overflow:hidden; background:var(--art-bg,radial-gradient(circle at 65% 20%,#216693,#071222 60%,#02060b)); clip-path:polygon(3% 0,97% 0,100% 3%,100% 97%,97% 100%,3% 100%,0 97%,0 3%); }.art-window::after { content:""; position:absolute; inset:0; background:linear-gradient(125deg,#168bd422,transparent 35%,#0007); pointer-events:none; }.art-window img { width:100%; height:100%; object-fit:cover; display:none; }.art-window.has-image img { display:block; }.art-placeholder { display:grid; height:100%; place-content:center; color:#b7e2ff; text-align:center; letter-spacing:.13em; font:700 1.25rem "Orbitron",sans-serif; text-shadow:0 2px 10px #000; }.art-placeholder small { font:400 .6rem "Orbitron",sans-serif; }
.symbol-frame { position:absolute; top:525px; left:calc(50% - 34px); display:grid; width:68px; height:68px; place-items:center; color:#fff; border:4px solid #d7e8e9; background:#091820; box-shadow:0 0 0 4px #07131a,0 0 11px var(--accent); z-index:1; }.shape-circle { border-radius:50%; }.shape-hexagon { clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); }.shape-octagon { clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); }.shape-diamond { transform:rotate(45deg); }.shape-diamond>* { transform:rotate(-45deg); }.shape-shield { clip-path:polygon(8% 0,92% 0,100% 23%,82% 86%,50% 100%,18% 86%,0 23%); }.shape-star { clip-path:polygon(50% 0,61% 34%,98% 35%,68% 56%,79% 92%,50% 70%,21% 92%,32% 56%,2% 35%,39% 34%); }.shape-square { border-radius:3px; }.symbol-frame span { font-size:2rem; }.symbol-frame img { display:none; max-width:70%; max-height:70%; object-fit:contain; }.symbol-frame.custom img { display:block; }.symbol-frame.custom span { display:none; }
.text-box { position:absolute; top:590px; left:49px; right:49px; height:179px; padding:28px 25px 14px; color:#14191b; background:var(--box); clip-path:polygon(4% 0,96% 0,100% 9%,100% 91%,96% 100%,4% 100%,0 91%,0 9%); text-align:center; }.ability-text { margin:0; font-size:1.43rem; font-weight:700; }.divider { margin:8px 0 4px; color:#48515a; }.flavor-text { margin:0; font:italic 1rem/1.25 "Roboto Slab",serif; }.bottom-row { position:absolute; bottom:33px; left:50px; right:50px; display:grid; grid-template-columns:62px 1fr 70px; align-items:center; color:#dcecf0; }.set-icon { display:grid; width:44px; height:44px; place-items:center; border:2px solid #a3d7ed; border-radius:50%; background:#0a1720; box-shadow:0 0 8px var(--accent); font-size:1.6rem; }.set-name { justify-self:center; padding:6px 12px; border:2px solid var(--accent); border-radius:5px; background:#07131c; font-weight:700; letter-spacing:.08em; font-size:.79rem; text-transform:uppercase; }.collector-number { justify-self:end; display:grid; width:60px; height:48px; place-items:center; border:2px solid #becacd; border-radius:11px; background:#08131c; font:700 1.5rem "Barlow Condensed",sans-serif; }
.font-serif .card-name { font-family:"Roboto Slab",serif; font-size:1.55rem; }.font-tech .card-name { font-family:"Orbitron",sans-serif; font-size:1.25rem; }.text-slate { --box:linear-gradient(#d3e1e4,#8ca5ad); }.text-dark { --box:linear-gradient(#5c737c,#1d2e35); }.text-dark .text-box { color:#f2f6f5; }.art-space { --art-bg:radial-gradient(circle at 65% 20%,#216693,#071222 60%,#02060b); }.art-dust { --art-bg:radial-gradient(circle at 65% 20%,#a8692d,#321a13 58%,#0a0b0d); }.art-neon { --art-bg:radial-gradient(circle at 50% 20%,#ac26cb,#092535 53%,#040811); }
.highlight-blue{--accent:#1595ff}.highlight-green{--accent:#48c76c}.highlight-red{--accent:#ec4c44}.highlight-purple{--accent:#bb55da}.highlight-gold{--accent:#dca928}.highlight-teal{--accent:#31bdbb}.highlight-white{--accent:#e9f4f4}.border-rusted-outpost .card-frame{filter:hue-rotate(325deg) saturate(.75)}.border-desert-colony .card-frame{filter:sepia(.35) saturate(.9)}.border-alien-tech .card-frame{filter:hue-rotate(100deg) saturate(1.35)}.border-salvaged-station .card-frame{filter:grayscale(.4)}.border-mining-guild .card-frame{filter:sepia(.65) saturate(1.5)}.border-terraform-authority .card-frame{filter:hue-rotate(135deg) brightness(1.1)}.border-deep-space .card-frame{filter:brightness(.65) contrast(1.25)}
.callouts { display:none; }.labels-on .callouts { display:block; }.callout { position:absolute; z-index:3; display:grid; width:30px; height:30px; place-items:center; border-radius:50%; color:#fff; background:#087dd3; border:2px solid #a7dcff; font-style:normal; font-weight:700; box-shadow:0 1px 8px #000; }.c1{top:10.5%;left:-24px}.c2{top:10.5%;right:-24px}.c3{top:11.5%;left:calc(50% - 15px)}.c4{top:18.5%;left:-22px}.c5{top:44%;left:-22px}.c6{top:68%;right:-22px}.c7{top:79%;left:-22px}.c8{top:86%;left:-22px}.c9{bottom:4.5%;left:-22px}.c10{bottom:3%;left:calc(50% - 15px)}.c11{bottom:4%;right:-22px}
@media (max-width:1200px){.editor-layout{grid-template-columns:270px 510px 300px;gap:10px;padding:10px}.card-shell{width:470px}.panel{padding:10px}}

/* Studio dashboard composition: the same locked card layout, arranged to match
   the approved Master Card Editor reference. */
body { min-width:0; overflow-x:hidden; background:transparent; isolation:isolate; }
.app-header { display:block; width:100%; margin:0; padding:12px 15px; border:1px solid #284451; border-radius:7px; background:linear-gradient(145deg,#0a1822,#061018 70%); }
.app-header h1 { font-size:1.5rem; white-space:nowrap; }.app-header .subtitle { color:#46aef8; }.app-header .toggle { font-size:.78rem; }
.studio-scale-wrap { margin:0 auto; position:relative; }.editor-layout { width:1536px; grid-template-columns:386px 640px 470px; grid-template-areas:"left stage right" "bottom bottom bottom"; max-width:none; margin:0; gap:10px; padding:9px 10px 12px; align-items:start; transform-origin:top left; }
.left-panel { grid-area:left; }.right-panel { grid-area:right; }.card-stage { grid-area:stage; min-height:741px; padding:0; }.bottom-panels { grid-area:bottom; display:grid; grid-template-columns:1.15fr .9fr 1.18fr 1.1fr; gap:9px; align-items:start; }
.panel-stack { gap:9px; }.panel { padding:13px 17px; border-radius:7px; border-color:#284451; background:linear-gradient(145deg,#0a1822,#061018 70%); box-shadow:inset 0 1px #ffffff0b,0 5px 18px #0005; }
.panel h2 { margin-bottom:9px; color:#23a2ff; font-size:1.02rem; }.panel h2 span { width:21px; height:21px; background:#087fd8; }
.left-panel .color-panel { min-height:160px; }.left-panel .elements-panel { min-height:390px; }
.element-list { columns:1; list-style:none; padding:0; counter-reset:elements; }.element-list li { counter-increment:elements; margin:8px 0; font-family:Arial,sans-serif; font-size:.83rem; }.element-list li::before { content:counter(elements); display:inline-grid; place-items:center; width:17px; height:17px; margin-right:8px; border-radius:50%; background:#087fd8; color:white; font:700 .7rem Arial; }
.card-color-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }.card-color-option { display:flex; align-items:center; justify-content:center; gap:5px; min-height:43px; margin:0; border-color:#315267; background:#08131b; }.card-color-option b { font-size:1rem; color:var(--identity); }.card-color-option[data-card-color=blue]{--identity:#1595ff}.card-color-option[data-card-color=green]{--identity:#48c76c}.card-color-option[data-card-color=red]{--identity:#ec4c44}.card-color-option[data-card-color=purple]{--identity:#bb55da}.card-color-option.selected{border-color:var(--identity);box-shadow:0 0 10px color-mix(in srgb,var(--identity) 65%,transparent)}
.highlight-panel h2 { margin-bottom:5px; }.highlight-panel h2 small { color:#a8bac3; font-size:.7rem; letter-spacing:0; text-transform:none; }.swatch-grid { grid-template-columns:repeat(7,1fr); }.swatch { min-height:42px; margin:0; padding:4px; border-radius:5px; }.swatch i { height:25px; margin:0; }.swatch span { display:none; }.border-grid { grid-template-columns:repeat(4,1fr); gap:10px; }.border-option { min-height:82px; padding:5px; color:#c0d1d9; font-size:.64rem; text-align:center; text-transform:uppercase; }.border-option::before { height:54px; border:0; border-radius:8px; background-color:#071019; background-image:var(--frame-preview); background-repeat:no-repeat; background-position:center; background-size:cover; box-shadow:inset 0 0 0 1px #315268; }
.symbol-grid { grid-template-columns:repeat(6,1fr); gap:7px; }.symbol-option { height:44px; background:linear-gradient(145deg,#101d26,#060d13); }
.card-stage .stage-label { margin:4px 0 3px; color:#30a9f8; }.card-shell { width:508px; }.card-shell::before { content:""; position:absolute; inset:18px; z-index:-2; border-radius:34px; background:radial-gradient(circle at 50% 0,#19568680,transparent 37%); filter:blur(16px); }
.card-name { top:70px; left:132px; right:132px; font-size:2.65rem; }.card-type { top:143px; left:189px; right:189px; }.art-window { top:174px; left:48px; width:697px; height:var(--art-height,500px); background-image:radial-gradient(ellipse at 40% 45%,#0f5c91 0,#06101d 47%,#03070b 100%); clip-path:polygon(3% 0,97% 0,100% 4%,100% 96%,97% 100%,3% 100%,0 96%,0 4%); box-shadow:inset 0 0 0 5px #294653,inset 0 0 18px #000; }.art-placeholder { background:linear-gradient(150deg,#05162500 20%,#0b4e7c44),radial-gradient(circle at 18% 30%,#19a4ff55,transparent 15%); }
.top-row { top:40px; left:63px; right:63px; }.number-badge { width:82px; height:82px; border-radius:15%; clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%); }
.top-row .number-badge:last-child { border-radius:50%; clip-path:none; }
.symbol-frame { top:var(--symbol-top,210px); width:76px; height:76px; left:calc(50% - 38px); }
.text-parchment { --box:repeating-linear-gradient(97deg,#4a392b08 0 1px,transparent 1px 17px),repeating-linear-gradient(8deg,#ffffff0b 0 1px,transparent 1px 23px),radial-gradient(circle at 20% 20%,#f4edde 0,transparent 36%),radial-gradient(circle at 82% 70%,#d7c7ac66 0,transparent 40%),linear-gradient(135deg,#efe5d3,#ddd0ba 52%,#eee3d1); }.text-box { top:var(--text-top,680px); left:41px; right:41px; height:var(--text-height,194px); padding:35px 52px 14px; clip-path:polygon(4% 0,96% 0,100% 10%,100% 90%,96% 100%,4% 100%,0 90%,0 10%); filter:drop-shadow(0 0 3px #000) drop-shadow(0 0 4px var(--accent)); box-shadow:inset 0 0 0 3px #7e745f,inset 0 0 0 7px #18242a,inset 0 0 0 10px var(--accent),inset 0 0 25px #8b76593d; }
.divider { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; margin:10px 42px 7px; }.divider span { height:1px; background:linear-gradient(90deg,transparent,#514b42); }.divider span:last-child { background:linear-gradient(90deg,#514b42,transparent); }.divider b { font-weight:400; }
.ability-text { font-size:1.5rem; }.flavor-text { font-size:1.04rem; }.bottom-row { bottom:38px; left:76px; right:76px; grid-template-columns:76px 1fr 76px; }.set-icon { width:56px; height:56px; }.set-name { min-width:180px; text-align:center; font-size:.9rem; }.collector-number { width:68px; height:58px; font-size:1.7rem; }
.text-box { box-shadow:inset 0 0 18px #5e4a3333; }.bottom-row { bottom:30px; }.callout { border-color:#bbebff; background:#087cd5; }.callout::after { content:""; position:absolute; z-index:-1; height:2px; background:#2da9ff; box-shadow:0 0 6px #2da9ff; transform-origin:left center; }.c1::after,.c4::after,.c5::after,.c7::after,.c8::after,.c9::after { width:70px; left:25px; top:13px; }.c2::after,.c6::after,.c11::after { width:70px; right:25px; top:13px; transform:rotate(180deg); }.c3::after,.c10::after { width:44px; left:13px; top:25px; transform:rotate(90deg); }
.bottom-panels { grid-template-columns:1.25fr .85fr 1fr 1.05fr 1fr; }.bottom-panels .panel { min-height:230px; }.bottom-panels .content-panel { display:grid; grid-template-columns:1fr; gap:0 10px; }.bottom-panels .content-panel h2 { grid-column:1/-1; }.bottom-panels .content-panel label:first-of-type { display:none; }.bottom-panels .number-panel { display:block; }.bottom-panels .set-panel { display:block; }.bottom-panels .export-panel { position:relative; padding-right:118px; }.bottom-panels .export-panel::after { content:"LIVE\A PREVIEW"; white-space:pre; position:absolute; right:13px; top:47px; width:90px; height:137px; display:grid; place-content:center; text-align:center; border:3px solid var(--blue); border-radius:11px; color:#bfe7ff; background:linear-gradient(#183f5c,#07151f 65%,#c5b294 66%,#efe3cf); box-shadow:0 0 12px #1595ff88; font:700 .68rem Orbitron,sans-serif; }
.file-control { color:#b7d1db; }.panel input,.panel textarea,.panel select { padding:6px 7px; }.panel label { margin:5px 0; }.export-panel button { margin:5px 0; }
.layout-tuning { margin-top:9px; padding-top:7px; border-top:1px solid #294451; }.layout-tuning summary { color:#42b0fa; cursor:pointer; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }.layout-tuning input[type=range] { padding:0; accent-color:#1595ff; }

/* The source frame is authored at its locked 690 × 970 coordinate system.
   Scale the whole card rather than scaling only its outer box. This keeps every
   fixed position (especially the ability panel and collector row) inside the card. */
.card-preview-scale { width:583px; height:713px; position:relative; }
.card-stage {
  display:flex;
  flex-direction:column;
  align-items:center;
  isolation:isolate;
  border:1px solid #1b4e6f;
  border-radius:12px;
  background:
    radial-gradient(ellipse at 50% 24%,#0d528266 0,transparent 43%),
    radial-gradient(ellipse at 50% 83%,#082c4a9c 0,transparent 58%),
    linear-gradient(180deg,#071725 0,#04101a 100%);
  box-shadow:inset 0 0 0 1px #5bc1ff12;
}
.card-shell { width:793px; height:970px; aspect-ratio:auto; transform:scale(.735); transform-origin:top left; }

/* Approved Frontier frame detailing. These rules deliberately enhance the
   reusable layers instead of replacing the card with a flattened image. */
.card-name { color:#eee1d4; font-size:3.05rem; text-shadow:2px 3px 0 #000,0 0 1px #fff8; filter:contrast(1.08); }
.card-type { padding:5px 30px 4px; border:3px solid #101a20; border-radius:2px; color:#111a1f; background:linear-gradient(#dbe1df,#91a8b1 48%,#c9d5d7); box-shadow:0 0 0 3px #4b6673,0 0 8px var(--accent),inset 0 1px #fff; font-weight:800; clip-path:polygon(5% 0,95% 0,100% 50%,95% 100%,5% 100%,0 50%); }
.card-type::before,.card-type::after { position:absolute; top:4px; color:#26373e; font-size:.85rem; letter-spacing:-.1em; }.card-type::before { content:"××"; left:13px; }.card-type::after { content:"××"; right:13px; }
.symbol-frame { border:5px solid #9fb0b6; background:radial-gradient(circle,#152832 35%,#061016 38%); box-shadow:0 0 0 5px #061017,0 0 0 8px #617986,0 0 12px var(--accent),inset 0 0 11px #000; z-index:2; }
.symbol-frame::before { content:""; position:absolute; inset:-12px; border:3px solid var(--accent); border-radius:inherit; opacity:.75; filter:drop-shadow(0 0 4px var(--accent)); }
.symbol-frame span { filter:drop-shadow(0 2px 2px #000); }
.set-icon { border:4px solid #8fa4ad; background:radial-gradient(circle,#142833,#050d12 65%); box-shadow:0 0 0 4px #061017,0 0 8px var(--accent),inset 0 0 8px #000; }
.set-name { min-width:180px; padding:7px 18px 6px; border:3px solid #526c78; border-radius:0; background:linear-gradient(#10232e,#050d13); box-shadow:0 0 7px var(--accent),inset 0 1px #6d8792; clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%); font-weight:800; }
.collector-number { border:4px solid #83969e; border-radius:10px; background:linear-gradient(145deg,#101c22,#04090c); box-shadow:0 0 0 3px #071017,0 0 7px var(--accent),inset 0 0 8px #000; }

/* Precision Vector Forge: dimensional number housings and panel hardware. */
.top-row { top:28px; left:42px; right:42px; align-items:start; }
.number-badge { position:relative; width:104px; height:104px; display:grid; place-items:center; border:3px solid #687f89; border-radius:18px; clip-path:none; color:#071118; background:linear-gradient(145deg,#38505b 0,#071117 35%,#020608 68%,#526b76 100%); box-shadow:0 0 0 5px #020609,0 0 0 7px #718792,0 0 11px var(--accent),inset 0 0 12px #000; isolation:isolate; }
.number-badge::before { content:""; position:absolute; inset:7px; z-index:-1; background:linear-gradient(145deg,#172831,#04090c); border:3px solid #111c22; box-shadow:inset 0 0 0 2px #71838a; }
.number-badge span { display:grid; width:78px; height:78px; place-items:center; color:#071118; background:linear-gradient(145deg,#f2ece1 0,#c4c1b9 58%,#8e9697 100%); border:3px solid #d9e0df; box-shadow:inset 0 0 0 3px #5e6b6e,inset 8px 8px 12px #fff7,inset -8px -8px 12px #44515844; font:800 3.15rem/1 "Barlow Condensed",sans-serif; text-shadow:0 1px #fff; }
.cost-badge { clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); }.cost-badge::before,.cost-badge span { clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); }
.top-row .activation-badge { border-radius:50%; clip-path:none; }.activation-badge::before,.activation-badge span { border-radius:50%; }.activation-badge::after { content:""; position:absolute; inset:2px; border-radius:50%; border:3px dashed color-mix(in srgb,var(--accent) 72%,#243842); opacity:.85; }
.panel-fastener { position:absolute; top:20px; width:9px; height:9px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#dce2df,#6d706b 32%,#24231f 66%,#090a09); box-shadow:0 0 0 2px #343b3b; }.fastener-left { left:30px; }.fastener-right { right:30px; }
.art-window img { filter:saturate(.88) contrast(1.13) brightness(.84); }
.art-window::after { background:linear-gradient(115deg,#0069a844 0,#001a2b18 42%,#020a1066 100%),linear-gradient(#03111c22,#00081244); mix-blend-mode:color; }
.text-parchment { --box:radial-gradient(circle at 18% 20%,#ece3d3 0,transparent 34%),radial-gradient(circle at 80% 72%,#bda98a55 0,transparent 43%),linear-gradient(135deg,#ddd1bb,#cbbda4 52%,#e0d5c2); }
.text-box { box-shadow:inset 0 0 0 3px #746955,inset 0 0 0 7px #111b20,inset 0 0 0 10px color-mix(in srgb,var(--accent) 74%,#506470),inset 0 0 28px #5e4a3345; filter:drop-shadow(0 0 4px #000) drop-shadow(0 0 3px color-mix(in srgb,var(--accent) 65%,transparent)); }
.ability-text { font-family:Georgia,"Times New Roman",serif; font-size:1.68rem; font-weight:400; letter-spacing:-.015em; }.flavor-text { font-family:Georgia,"Times New Roman",serif; font-size:1.12rem; }

/* CARD_EDITOR_STYLE_GUIDE.md — approved Project Frontier interface system. */
:root {
  --pf-void:#03080c;
  --pf-night-steel:#061017;
  --pf-panel:#08131d;
  --pf-panel-raised:#0d1b25;
  --pf-steel-edge:#243b4a;
  --pf-ink:#dce9ed;
  --pf-muted:#8fa8b5;
  --pf-blue:#1595ff;
  --pf-blue-bright:#5cc1ff;
  --pf-rules-panel:#e9dfcd;
  --pf-rules-ink:#14191b;
  --blue:var(--pf-blue);
  --panel:var(--pf-panel);
  --panel-border:var(--pf-steel-edge);
  --ink:var(--pf-ink);
  --muted:var(--pf-muted);
}

body {
  color:var(--pf-ink);
  background:
    radial-gradient(ellipse at 50% 10%,#132b3d 0,transparent 36rem),
    linear-gradient(145deg,var(--pf-night-steel),var(--pf-void) 72%);
}

.app-header,
.panel {
  border-color:var(--pf-steel-edge);
  border-radius:10px;
  background:linear-gradient(145deg,var(--pf-panel-raised),var(--pf-panel) 56%,var(--pf-night-steel));
  box-shadow:inset 0 1px #ffffff0b,0 7px 20px #0006;
}

.panel h2,
.stage-label,
.layout-tuning summary { color:var(--pf-blue-bright); }
.panel-note,.status { color:var(--pf-muted); }

button,
.border-option,
.symbol-option,
.swatch,
.card-color-option {
  position:relative;
  transition:border-color 120ms ease,background-color 120ms ease,box-shadow 120ms ease,transform 80ms ease;
}
button:hover:not(:disabled),
.border-option:hover,
.symbol-option:hover,
.swatch:hover,
.card-color-option:hover { border-color:var(--pf-blue-bright); background-color:#102b3a; }
button:active:not(:disabled),
.border-option:active,
.symbol-option:active,
.swatch:active,
.card-color-option:active { transform:translateY(1px); }
button:disabled { cursor:not-allowed; opacity:.46; }

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
.border-option:focus-visible,
.symbol-option:focus-visible,
.swatch:focus-visible,
.card-color-option:focus-visible {
  outline:2px solid var(--pf-blue-bright);
  outline-offset:2px;
}

.swatch.selected,
.border-option.selected,
.symbol-option.selected,
.card-color-option.selected {
  border-color:var(--pf-blue-bright);
  box-shadow:0 0 0 1px var(--pf-void),0 0 10px #1595ff8c;
}
.swatch.selected::after,
.border-option.selected::after,
.symbol-option.selected::after,
.card-color-option.selected::after {
  content:"✓";
  position:absolute;
  top:3px;
  right:4px;
  display:grid;
  width:16px;
  height:16px;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:#087fd8;
  box-shadow:0 1px 4px #000a;
  font:700 11px/1 Arial,sans-serif;
}

/* The reusable card remains authored on one 690 × 970 coordinate system.
   690:970 matches the finished 63 × 88 mm poker-card proportion. */
.card-preview-scale { width:507px; height:713px; }

/* Physical-size review mode: 63 × 88 mm via CSS mm units (exact on a correctly
   calibrated display, approximate otherwise). 63mm ≈ 238.1px → 238.1/690 ≈ .3451. */
.card-preview-scale.physical-size { width:63mm; height:88mm; }
.card-preview-scale.physical-size .card-shell { transform:scale(.3451); }
.card-shell { width:690px; height:970px; filter:drop-shadow(0 10px 6px #000d) drop-shadow(0 0 2px #92d8ff66); }
.border-frontier .card-frame { filter:contrast(1.06) saturate(1.16) brightness(1.03); }
.card-name { left:115px; right:115px; font-size:2.8rem; }
.card-type { left:164px; right:164px; }
.art-window { left:42px; width:606px; }
.top-row { left:42px; right:42px; }
.text-box { left:36px; right:36px; padding-left:45px; padding-right:45px; }
.bottom-row { left:66px; right:66px; }

.text-box {
  color:var(--pf-rules-ink);
  background:var(--box,var(--pf-rules-panel));
}

.status.success { color:#65d58a; }
.status.error { color:#ff7a72; }

/* At smaller widths the preview stays first and panels stack at readable size. */
@media (max-width:1279px) {
  .studio-scale-wrap { width:100% !important; height:auto !important; }
  .editor-layout {
    width:100%;
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"stage" "left" "right" "bottom";
    gap:12px;
    padding:12px;
    transform:none !important;
  }
  .card-stage { min-height:742px; overflow:visible; }
  .left-panel,.right-panel { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
  .bottom-panels { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bottom-panels .panel { min-height:0; }
}

@media (max-width:720px) {
  .app-header { border-radius:0; }
  .app-header h1 { white-space:normal; }
  .editor-layout { padding:8px; }
  .left-panel,.right-panel,.bottom-panels { grid-template-columns:minmax(0,1fr); }
  .card-stage { align-items:flex-start; overflow-x:auto; }
}

@media (prefers-reduced-motion:reduce) {
  .editor-background-video { display:none; }
  *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; }
}

/* Locked painted frame: approved raster art is the visual source of truth.
   Dynamic artwork sits beneath it; editable text and symbols sit above it. */
.painted-frame-active .card-frame { display:none; }
.painted-card-frame {
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
  width:100%;
  height:100%;
  object-fit:fill;
  pointer-events:none;
  user-select:none;
}
.painted-frame-active .art-window { z-index:1; top:184px; left:46px; width:598px; height:486px; clip-path:polygon(4% 0,96% 0,100% 4%,100% 96%,96% 100%,4% 100%,0 96%,0 4%); box-shadow:none; }
.painted-frame-active .top-row,
.painted-frame-active .card-name,
.painted-frame-active .card-type,
.painted-frame-active .symbol-frame,
.painted-frame-active .text-box,
.painted-frame-active .bottom-row { z-index:3; }
.painted-frame-active .callouts { position:absolute; inset:0; z-index:5; pointer-events:none; }

/* The painted asset owns all housings; these elements now contribute only
   their editable content and never redraw the approved metalwork. */
.painted-frame-active .top-row { top:50px; left:60px; right:46px; }
.painted-frame-active .number-badge,
.painted-frame-active .number-badge::before,
.painted-frame-active .number-badge span {
  border:0;
  background:none;
  box-shadow:none;
  clip-path:none;
}
.painted-frame-active .number-badge { width:104px; height:104px; }
.painted-frame-active .number-badge span { width:100%; height:100%; }
.painted-frame-active .activation-badge::after { display:none; }
.painted-frame-active .card-name { top:79px; left:145px; right:145px; }
.painted-frame-active .card-type { top:169px; left:191px; right:169px; display:grid; min-height:18px; place-items:center; padding:0 10px; border:0; background:none; box-shadow:none; clip-path:none; color:#10181d; line-height:1; }
.painted-frame-active .card-type::before,
.painted-frame-active .card-type::after { display:none; }
.painted-frame-active .symbol-frame {
  top:622px;
  border:0;
  background:none;
  box-shadow:none;
  clip-path:none;
}
.painted-frame-active .symbol-frame::before { display:none; }
.painted-frame-active .symbol-frame span,
.painted-frame-active .symbol-frame img {
  transform:translate(-3px,-3px);
  transform-origin:center;
}
.painted-frame-active .symbol-frame span { display:grid; width:100%; height:100%; place-items:center; line-height:1; }
.painted-frame-active .text-box { top:680px; height:240px; display:flex; flex-direction:column; justify-content:center; padding:28px 48px 30px; }
.painted-frame-active.text-parchment .text-box { background:transparent; box-shadow:none; filter:none; clip-path:none; }
.painted-frame-active.text-parchment .panel-fastener { display:none; }
.painted-frame-active .bottom-row { inset:0; display:block; }
.painted-frame-active .set-icon,
.painted-frame-active .set-name,
.painted-frame-active .collector-number { border:0; background:none; box-shadow:none; clip-path:none; }
.painted-frame-active .bottom-meta-anchor {
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translate(var(--metadata-x, 0px),var(--metadata-y, 0px));
}
/* These rectangles trace the usable interiors of the painted bottom hardware,
   not the transparent bounds of the frame image. */
.painted-frame-active .set-icon-anchor { left:53px; top:892px; width:56px; height:58px; }
.painted-frame-active .set-name-anchor { left:252px; top:891px; width:186px; height:28px; }
.painted-frame-active .collector-anchor { left:590px; top:894px; width:48px; height:34px; }
.painted-frame-active .set-icon { position:relative; display:flex; width:100%; height:100%; align-items:center; justify-content:center; }
.painted-frame-active .set-icon span { position:relative; display:flex; width:100%; height:100%; align-items:center; justify-content:center; line-height:1; }
.painted-frame-active .set-name { position:relative; min-width:0; color:#e6edf0; font-size:1.35rem; line-height:1; text-align:center; }
.painted-frame-active .collector-number { position:relative; display:flex; width:100%; height:100%; align-items:center; justify-content:center; line-height:1; text-align:center; }
/* Card identity owns the restrained frame lighting while the painted metal,
   artwork window, and rules panel remain neutral. */
.identity-blue { --identity-color:#187ed0; }
.identity-green { --identity-color:#2d9853; }
.identity-red { --identity-color:#b53b35; }
.identity-purple { --identity-color:#8d48a3; }

/* All presets retain the locked Frontier silhouette. Card identity adds only a
   restrained halo and recolors the embedded frame lights. Symbol Accent is
   intentionally isolated from the border and applies only to the center icon. */
.painted-frame-active::before {
  inset:12px;
  border:8px solid color-mix(in srgb,var(--identity-color) 18%,transparent);
  border-radius:28px;
  background:none;
  filter:blur(8px);
}
.painted-frame-active .symbol-frame span {
  color:var(--symbol-accent);
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--symbol-accent) 72%,transparent));
}

/* Symbol Library — industrial equipment-terminal presentation. The symbol
   values and input behavior are unchanged; this layer is purely visual. */
.symbol-library-panel {
  --symbol-bronze:#a9824d;
  --symbol-bronze-bright:#d2a15b;
  --symbol-amber:#e5a13a;
  position:relative;
  overflow:hidden;
  padding:14px 17px 16px;
  border:2px solid #4a4439;
  border-radius:12px;
  background:
    radial-gradient(circle at 50% -12%,#8e6d3b29 0,transparent 38%),
    linear-gradient(145deg,#2b2c2a 0,#191b1a 47%,#0e1010 100%);
  box-shadow:inset 0 0 0 1px #080909,inset 0 1px #a38b6445,0 6px 8px #0009;
}
.symbol-library-panel::before {
  content:"";
  position:absolute;
  inset:7px;
  pointer-events:none;
  border:1px solid #5a5141;
  border-radius:7px;
  box-shadow:inset 0 0 0 1px #0a0b0b;
}
.symbol-library-panel::after {
  content:"";
  position:absolute;
  top:0;
  left:19%;
  width:62%;
  height:5px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,#8d7653 14%,#27241f 50%,#8d7653 86%,transparent);
  clip-path:polygon(4% 0,96% 0,100% 100%,0 100%);
}
.symbol-library-panel h2 {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  min-height:32px;
  margin:0 0 10px;
  padding:0 9px 7px;
  border-bottom:1px solid #5c513f;
  color:#d7c09c;
  text-shadow:0 1px #000,0 0 8px #c28b3433;
  font-size:1.12rem;
  letter-spacing:.075em;
}
.symbol-library-panel h2 span {
  width:25px;
  height:25px;
  margin-right:8px;
  border:2px solid #82673f;
  color:#e2bd80;
  background:radial-gradient(circle at 38% 32%,#50442f,#171714 65%);
  box-shadow:inset 0 0 0 2px #0d0e0d,0 0 6px #d597343d;
}
.symbol-library-panel .symbol-grid {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(6,38px);
  justify-content:start;
  gap:7px 6px;
  padding:9px 8px;
  border:1px solid #403a30;
  border-radius:6px;
  background:
    radial-gradient(circle at 35% 15%,#ffffff09 0,transparent 34%),
    linear-gradient(155deg,#171918,#0c0e0e 72%);
  box-shadow:inset 0 0 0 2px #080909,inset 0 5px 8px #0008;
}
.symbol-library-panel .symbol-option {
  position:relative;
  isolation:isolate;
  display:grid;
  width:52px;
  height:52px;
  min-height:0;
  margin:0 auto;
  padding:0;
  place-items:center;
  border:2px solid #74654b;
  border-radius:50%;
  color:#ddd7c9;
  background:linear-gradient(145deg,#625a4c 0,#252722 25%,#0d0f0e 68%,#4b4336 100%);
  box-shadow:0 0 0 2px #070808,0 3px 4px #000b,inset 0 1px #b5a47f66,inset 0 -3px 5px #000;
  text-transform:none;
  transition:transform 180ms cubic-bezier(.22,1,.36,1),border-color 180ms ease,box-shadow 180ms ease,filter 180ms ease;
}
.symbol-library-panel .symbol-option::before {
  content:"";
  position:absolute;
  inset:3px;
  z-index:0;
  border:1px solid #a0865c;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 2px,#c4a56c 0 1px,#15130f 2px 3px,transparent 3.5px),
    radial-gradient(circle at calc(100% - 2px) 50%,#c4a56c 0 1px,#15130f 2px 3px,transparent 3.5px),
    radial-gradient(circle at 50% calc(100% - 2px),#c4a56c 0 1px,#15130f 2px 3px,transparent 3.5px),
    radial-gradient(circle at 2px 50%,#c4a56c 0 1px,#15130f 2px 3px,transparent 3.5px);
  box-shadow:inset 0 0 0 2px #121412,inset 0 0 5px #000;
  pointer-events:none;
}
.symbol-library-panel .symbol-option::after,
.symbol-library-panel .symbol-option.selected::after {
  content:"";
  position:absolute;
  inset:9px;
  z-index:0;
  width:auto;
  height:auto;
  border:1px solid #5a5345;
  border-radius:50%;
  background:radial-gradient(circle at 42% 34%,#32342f,#111312 70%);
  box-shadow:inset 0 2px 5px #000b;
  pointer-events:none;
}
.symbol-library-panel .symbol-option span {
  position:relative;
  z-index:2;
  display:grid;
  width:28px;
  height:28px;
  place-items:center;
  color:#e4dfd2;
  filter:grayscale(.85) sepia(.18) drop-shadow(0 1px 1px #000);
  font-size:1.18rem;
  line-height:1;
}
.symbol-library-panel .symbol-option:hover {
  transform:translateY(-2px) scale(1.025);
  border-color:#b3925e;
  background:linear-gradient(145deg,#756a58 0,#31332c 25%,#111312 68%,#5b503f 100%);
  box-shadow:0 0 0 2px #080909,0 5px 6px #000b,0 0 8px #c9954438,inset 0 1px #c9b78c80;
}
.symbol-library-panel .symbol-option:active {
  transform:translateY(1px) scale(.97);
  box-shadow:0 0 0 2px #080909,0 1px 2px #000,inset 0 3px 6px #000;
}
.symbol-library-panel .symbol-option:focus-visible {
  outline:2px solid #8fc8df;
  outline-offset:3px;
}
.symbol-library-panel .symbol-option.selected {
  border-color:#f0b24e;
  background:linear-gradient(145deg,#8a6a36 0,#342a1a 28%,#12120f 68%,#725025 100%);
  box-shadow:0 0 0 2px #5b3b16,0 0 13px #ef9d35a8,0 3px 5px #000c,inset 0 0 7px #f2ad4257;
  animation:symbol-medallion-pulse 2.4s ease-in-out infinite;
}
.symbol-library-panel .symbol-option.selected span {
  color:#fff4d9;
  filter:grayscale(.7) sepia(.28) brightness(1.18) drop-shadow(0 0 4px #f1a84288);
}
.symbol-library-panel .symbol-upload-control {
  position:relative;
  z-index:1;
  display:grid;
  gap:2px;
  min-height:88px;
  margin:12px 0 0;
  padding:11px 10px 10px 66px;
  border:1px solid #5a4c37;
  border-radius:6px;
  color:#d8c7aa;
  background:linear-gradient(145deg,#1d1e1c,#0d0f0f 72%);
  box-shadow:inset 0 0 0 2px #080909,inset 0 4px 7px #0008;
}
.symbol-library-panel .symbol-upload-control::before {
  content:"+";
  position:absolute;
  top:12px;
  bottom:12px;
  left:12px;
  display:grid;
  width:42px;
  place-items:center;
  border:1px dashed #8c7046;
  color:#c99a56;
  background:#10110f;
  box-shadow:inset 0 0 7px #000;
  font:500 1.65rem/1 Arial,sans-serif;
}
.symbol-library-panel .symbol-upload-control strong {
  color:#d9bf96;
  font-size:.82rem;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.symbol-library-panel .symbol-upload-control small {
  color:#968b78;
  font-size:.7rem;
}
.symbol-library-panel .symbol-upload-control input[type=file] {
  margin-top:5px;
  padding:4px;
  border-color:#4c4438;
  color:#aaa08f;
  background:#0a0c0c;
  font-size:.69rem;
}
.symbol-library-panel .symbol-upload-control input[type=file]::file-selector-button {
  margin-right:7px;
  padding:4px 8px;
  border:1px solid #8b6b3e;
  border-radius:3px;
  color:#e1c08d;
  background:linear-gradient(#3a3022,#171613);
  cursor:pointer;
}
@keyframes symbol-medallion-pulse {
  0%,100% { box-shadow:0 0 0 2px #5b3b16,0 0 10px #ef9d3575,0 3px 5px #000c,inset 0 0 6px #f2ad4245; }
  50% { box-shadow:0 0 0 2px #7a511f,0 0 16px #ef9d35b8,0 3px 5px #000c,inset 0 0 9px #f2ad426b; }
}
@media (prefers-reduced-motion:reduce) {
  .symbol-library-panel .symbol-option { transition:none; }
  .symbol-library-panel .symbol-option:hover,
  .symbol-library-panel .symbol-option:active { transform:none; }
  .symbol-library-panel .symbol-option.selected { animation:none; }
}

/* Identity binding: Card Color recolors only the master frame's existing
   embedded energy lights. No synthetic perimeter treatment is added. */
.card-shell { --frame-accent:#1595ff; --symbol-accent:#1595ff; --box:#e9dfcd; }
.card-color-grid { grid-template-columns:repeat(3,1fr); }
.card-color-option[data-card-color=character] { --identity:#e5b14a; }
.card-color-option[data-card-color=grey] { --identity:#8b98a1; }
.identity-character { --identity-color:#e5b14a; }
.identity-grey { --identity-color:#8b98a1; }
.painted-card-frame { filter:none !important; }
.painted-frame-active::before { display:none; }

/* Symbol Accent belongs exclusively to this outline. Library and custom icons
   render as monochrome engraved linework. */
.painted-frame-active .symbol-frame { color:#e9e5da; }
.painted-frame-active .symbol-frame::after { display:none; }
.painted-frame-active .symbol-frame span { color:#e9e5da; filter:drop-shadow(0 2px 2px #000) drop-shadow(0 0 1px var(--symbol-accent)); }
.symbol-frame svg { width:91%; height:91%; fill:none; stroke:currentColor; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; }
.symbol-frame img { max-width:88%; max-height:88%; filter:grayscale(1) contrast(1.15) drop-shadow(0 0 1px var(--symbol-accent)); }
.painted-frame-active .symbol-frame span,
.painted-frame-active .symbol-frame img { transform:none; }

/* The master frame's medallion is centered on the card axis. Anchor both the
   editable symbol layer and its contents to that same midpoint. */
.painted-frame-active .symbol-frame { left:50%; transform:translateX(-50%); place-items:center; }
.painted-frame-active .symbol-frame span { position:absolute; inset:0; display:grid; place-items:center; }
.painted-frame-active .symbol-frame svg { display:block; margin:auto; }
.painted-frame-active .symbol-frame img { position:absolute; inset:0; margin:auto; }
.painted-frame-active .symbol-frame { overflow:hidden; border-radius:50%; }
.reference-symbol-art { display:block !important; width:74%; height:74%; inset:13% !important; max-width:none !important; max-height:none !important; object-fit:cover; border-radius:50%; filter:none !important; }
.symbol-library-panel .reference-symbol-art { position:static; width:82%; height:82%; inset:auto !important; object-fit:cover; border-radius:50%; }
.painted-frame-active .symbol-frame .reference-symbol-art { transform:translateX(6px) !important; }

/* Fixed card regions shrink their editable copy before it can overflow. */
.painted-frame-active .card-name,
.painted-frame-active .card-type { text-overflow:clip; }
.painted-frame-active .text-box { overflow:hidden; }
.painted-frame-active .ability-text,
.painted-frame-active .flavor-text { flex-shrink:0; overflow-wrap:anywhere; }

/* The type/tag is a primary card identifier, not microprint. */
.painted-frame-active .card-type { font-size:1.15rem; font-weight:800; letter-spacing:.035em; }

/* Flavor is optional. Without it, the ability owns the full reading area. */
.painted-frame-active .text-box.no-flavor .divider,
.painted-frame-active .text-box.no-flavor .flavor-text { display:none; }
.painted-frame-active .text-box.no-flavor { justify-content:center; }

/* Artwork controls affect only the image crop inside the already-locked window. */
.art-window img { object-position:center; transform:translate(var(--art-translate-x,0),var(--art-translate-y,0)) scale(var(--art-zoom,1.25)); transform-origin:center; }

/* Restore the card hierarchy at tabletop scale; fitting only reduces these
   sizes when a field's actual width requires it. */
.painted-frame-active .card-name { font-size:3.7rem; }
.painted-frame-active .card-type { font-size:1.55rem; }
.painted-frame-active .number-badge span { font-size:4.25rem; }

/* Long names get two high-legibility lines before their type is reduced. */
.painted-frame-active .card-name { top:72px; height:82px; display:grid; place-items:center; white-space:normal; line-height:.88; overflow-wrap:anywhere; }

/* Bottom-left set/faction mark picker and its matching card treatment. */
.set-icon-library { display:grid; grid-template-columns:repeat(6,1fr); gap:7px; margin:4px 0 10px; }
.set-icon-option { display:grid; width:100%; aspect-ratio:1; place-items:center; margin:0; padding:5px; border:1px solid #466271; border-radius:5px; background:#071017; color:#e9e5da; }
.set-icon-option svg,.set-icon svg { width:82%; height:82%; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.set-icon-option:hover,.set-icon-option:focus-visible { border-color:#5cc1ff; color:#fff7df; }
.set-icon-option.selected { border-color:#33adff; color:#fff7df; box-shadow:0 0 8px #1595ff8c; }
.set-icon-option.no-icon { color:#9fb9c6; font:800 .74rem/1 "Barlow Condensed",Arial,sans-serif; letter-spacing:.04em; }
.painted-frame-active .set-icon svg { display:block; margin:auto; }
.set-panel #field-set-name { font-size:1.15rem; font-weight:700; }

/* Align the tag to the center of its locked metal plate. */
.painted-frame-active .card-type { left:50%; right:auto; width:340px; transform:translateX(-50%); }

/* Larger, clearer blue editor annotations. */
.callout { width:38px; height:38px; border-color:#bbebff; background:#087cd5; color:#fff; font:700 1.25rem/1 "Barlow Condensed",Arial,sans-serif; }
.c1{left:-30px}.c2{right:-30px}.c3{left:calc(50% - 19px)}.c4,.c5,.c7,.c8,.c9{left:-30px}.c6,.c11{right:-30px}.c10{left:calc(50% - 19px)}

/* Symbol Library uses the editor's blue technical system, not a separate bronze UI. */
.symbol-library-panel { border-color:#284f67; background:radial-gradient(circle at 50% -12%,#1595ff22 0,transparent 38%),linear-gradient(145deg,#0c1d29 0,#07121a 52%,#04090d 100%); box-shadow:inset 0 0 0 1px #02080c,inset 0 1px #5cc1ff30,0 6px 8px #0009; font-family:"Barlow Condensed",Arial,sans-serif; }
.symbol-library-panel::before { border-color:#315a70; }.symbol-library-panel::after { background:linear-gradient(90deg,transparent,#1595ff 14%,#112a3b 50%,#1595ff 86%,transparent); }
.symbol-library-panel h2 { border-bottom-color:#315a70; color:#46baff; text-shadow:0 1px #000,0 0 8px #1595ff44; font-family:"Barlow Condensed",Arial,sans-serif; }
.symbol-library-panel h2 span { border-color:#278ed2; color:#dff5ff; background:radial-gradient(circle at 38% 32%,#155479,#07131c 65%); box-shadow:inset 0 0 0 2px #061017,0 0 6px #1595ff55; }
.symbol-library-panel .symbol-grid { border-color:#284f67; background:radial-gradient(circle at 35% 15%,#5cc1ff12 0,transparent 34%),linear-gradient(155deg,#0d1c26,#050c11 72%); }
.symbol-library-panel .symbol-option { width:38px; height:38px; border-color:#3f718a; background:linear-gradient(145deg,#365363 0,#15242c 25%,#070d11 68%,#263d49 100%); }
.symbol-library-panel .symbol-option::before { border-color:#5caed8; background:radial-gradient(circle at 50% 2px,#5cc1ff 0 1px,#09131a 2px 3px,transparent 3.5px),radial-gradient(circle at calc(100% - 2px) 50%,#5cc1ff 0 1px,#09131a 2px 3px,transparent 3.5px),radial-gradient(circle at 50% calc(100% - 2px),#5cc1ff 0 1px,#09131a 2px 3px,transparent 3.5px),radial-gradient(circle at 2px 50%,#5cc1ff 0 1px,#09131a 2px 3px,transparent 3.5px); }
.symbol-library-panel .symbol-option.selected { border-color:#5cc1ff; background:linear-gradient(145deg,#235f85 0,#0a2435 28%,#071017 68%,#194b68 100%); box-shadow:0 0 0 2px #0b3b58,0 0 13px #1595ffa8,0 3px 5px #000c,inset 0 0 7px #5cc1ff57; animation:none; }
.symbol-library-panel .symbol-upload-control { border-color:#315a70; color:#b9dcea; background:linear-gradient(145deg,#10222d,#070e13 72%); }.symbol-library-panel .symbol-upload-control::before { border-color:#358fc1; color:#5cc1ff; background:#07131a; }.symbol-library-panel .symbol-upload-control strong { color:#7acbfa; }.symbol-library-panel .symbol-upload-control small { color:#8faebb; }

/* Bottom-left faction mount: centered on the master-frame hardware and kept
   dark so the mark reads as a clean white signal, like the approved reference. */
.painted-frame-active .set-icon { display:flex; width:100%; height:100%; align-items:center; justify-content:center; border:0; border-radius:50%; background:radial-gradient(circle at 42% 35%,#1d2b33 0,#070c10 60%,#020405 100%); box-shadow:inset 0 0 9px #000; }
.painted-frame-active .set-icon.is-hidden { display:none; }
.painted-frame-active .set-icon span { display:flex; width:100%; height:100%; align-items:center; justify-content:center; color:#f0eee5; filter:drop-shadow(0 1px 1px #000); }
.painted-frame-active .set-icon svg { width:70%; height:70%; stroke-width:1.9; }
.painted-frame-active .set-name { font-size:1.35rem; font-weight:800; }
.bottom-metadata-tuning .metadata-adjustments { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 8px; }
.bottom-metadata-tuning .metadata-adjustments label { min-width:0; font-size:.82rem; }
.metadata-annotation textarea {
  min-height:58px;
  resize:vertical;
  border-color:#1a8fd5;
  border-radius:10px;
  color:#dff5ff;
  background:linear-gradient(145deg,#0d4771,#06233a);
  box-shadow:inset 0 1px #7ad0ff33;
}

/* Card-color swatches are a primary control: the requested fixed label size
   remains legible at every workspace scale, while the glyph becomes the
   visual anchor without changing the responsive three-column layout. */
.card-color-option { min-height:58px; gap:10px; font-size:16.48px; line-height:1; }
.card-color-option b { font-size:2rem; line-height:1; }

/* Every editable text or symbol layer has an independent, data-backed nudge
   channel. Centered elements retain their base centering before the offset. */
.painted-frame-active #card-cost,
.painted-frame-active #card-activation,
.painted-frame-active #card-name,
.painted-frame-active #card-ability,
.painted-frame-active #card-flavor {
  transform:translate(var(--element-x, 0px),var(--element-y, 0px));
}
.painted-frame-active #card-type,
.painted-frame-active #center-symbol-frame {
  transform:translateX(-50%) translate(var(--element-x, 0px),var(--element-y, 0px));
}

/* The rules surface is deliberately non-configurable and keeps the master
   frame's parchment material instead of receiving a card-color treatment. */
.text-parchment, .text-slate, .text-dark { --box:#e9dfcd; }
.painted-frame-active.text-parchment .text-box { background:transparent; color:#14191b; }

/* ---------------------------------------------------------------------------
   Creative studio presentation: tilt, glint, foil, tabletop, compare, boot.
   All of these are screen-only theater — the canvas export pipeline never
   reads them, so prints stay exactly on the approved system.
--------------------------------------------------------------------------- */
.card-preview-scale { perspective:1300px; }
.card-shell { transform:scale(.735) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition:transform .14s ease-out; will-change:transform; }
.card-preview-scale.physical-size .card-shell,
.card-preview-scale.tabletop-size .card-shell { transform:scale(.3451); }

.card-glint { position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0; transition:opacity .25s; mix-blend-mode:screen; background:radial-gradient(circle at var(--glint-x,50%) var(--glint-y,38%), #ffffff2e 0, #ffffff08 24%, transparent 46%); }
.card-stage:hover .card-glint { opacity:1; }
.card-preview-scale.physical-size .card-glint,
.card-preview-scale.tabletop-size .card-glint { opacity:0; }

.card-foil { position:absolute; inset:0; z-index:4; pointer-events:none; display:none; mix-blend-mode:color-dodge; opacity:.34; background:linear-gradient(115deg,#ff004c2e 0%,#ffe6002e 20%,#00ff8c2e 40%,#00c8ff2e 60%,#8c00ff2e 80%,#ff004c2e 100%); background-size:280% 280%; animation:foil-sheen 7s linear infinite; }
.card-shell.foil-active .card-foil { display:block; }
@keyframes foil-sheen { 0% { background-position:0% 0%; } 100% { background-position:280% 280%; } }

/* Tabletop review mode: physical-size card on a worn table, with a die for scale. */
.card-stage.tabletop-mode { border-radius:14px; background:radial-gradient(ellipse at 50% 28%, #40301e 0, #261b10 55%, #130d07 100%); box-shadow:inset 0 0 70px #000c; }
.card-stage.tabletop-mode .stage-label { color:#d8b478; }
.card-preview-scale.tabletop-size { width:63mm; height:88mm; }
.card-preview-scale.tabletop-size::before { content:""; position:absolute; right:-72px; top:14px; width:42px; height:42px; border-radius:9px; background:linear-gradient(145deg,#f7f3e8,#c2bbab); box-shadow:2px 5px 9px #000a, inset 0 0 4px #fff; }
.card-preview-scale.tabletop-size::after { content:"⚄"; position:absolute; right:-72px; top:14px; width:42px; height:42px; z-index:1; display:grid; place-items:center; color:#26221c; font-size:33px; line-height:1; }

.compare-overlay { position:absolute; inset:0; z-index:6; width:100%; height:100%; outline:2px solid #f0b24e; outline-offset:-2px; }

/* Direct manipulation affordances. */
.art-window { cursor:grab; touch-action:none; }
.art-window.dragging { cursor:grabbing; }
.art-window.drop-ready { outline:3px dashed #46baff; outline-offset:-3px; }
.inline-editable { cursor:text; }
.inline-editable:hover { box-shadow:inset 0 0 0 1px #5cc1ff55; }
.inline-editable:focus-visible { outline:2px solid #46baff; outline-offset:2px; box-shadow:none; }
.number-badge .inline-editable { display:grid; place-items:center; }

.button-pair { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.button-pair button { margin:8px 0 0; }
.studio-panel .panel-note { margin-top:10px; }

/* Fabrication-console boot: a brief seam glow when the editor powers on. */
.booting .panel { animation:panel-boot 1.4s ease-out; }
.booting .app-header h1 { animation:title-boot 1.4s ease-out; }
@keyframes panel-boot { 0% { border-color:#1595ff; box-shadow:0 0 0 #1595ff00; } 30% { box-shadow:0 0 20px #1595ff55; } 100% { box-shadow:0 8px 25px #0004; } }
@keyframes title-boot { 0% { text-shadow:0 0 0 #1595ff00; } 30% { text-shadow:0 0 18px #5cc1ffcc; } 100% { text-shadow:none; } }

@media (prefers-reduced-motion:reduce) {
  .card-foil, .booting .panel, .booting .app-header h1 { animation:none !important; }
  .card-shell { transition:none; }
}

/* The block-display button rule must never resurrect [hidden] controls. */
[hidden] { display:none !important; }

/* Per-frame surface treatments: each painted border declares (in editor.js)
   which ink stays readable on its plates and whether its rules panel is baked
   into the art or left open for the editor's parchment. */
.painted-frame-active.rules-ink-light .text-box { color:#f2ead9; }
.painted-frame-active.rules-ink-light .divider { color:#c9bfae; }
.painted-frame-active.type-ink-light .card-type { color:#dfe9ec; text-shadow:0 1px 2px #000c; }
.painted-frame-active.meta-ink-dark .set-name,
.painted-frame-active.meta-ink-dark .collector-number { color:#241d14; }
/* Open-panel frames (rules interior transparent in the art): a parchment
   layer sampled from the Frontier master fills the measured hole beneath the
   painted frame, and the text box tracks the same hole. */
.rules-parchment { display:none; position:absolute; z-index:1; background:url("../../assets/cards/frames/parchment-fill-v1.png") center/100% 100%; }
.painted-frame-active.rules-panel-open .rules-parchment {
  display:block;
  left:var(--open-panel-left,52px); top:var(--open-panel-top,676px);
  width:var(--open-panel-width,592px); height:var(--open-panel-height,236px);
}
.painted-frame-active.rules-panel-open .text-box {
  left:var(--open-text-left,66px); top:var(--open-text-top,688px);
  right:var(--open-text-right,66px); height:var(--open-text-height,214px);
}
.painted-frame-active.badge-ink-light .number-badge { color:#ece6d8; text-shadow:0 1px 2px #000d; }

/* Card Color feedback on every frame: Frontier swaps its per-color painted
   light art; every painted frame also carries an identity-colored aura traced
   around the card silhouette. Screen-only; exports are untouched. */
.card-shell.painted-frame-active { filter:drop-shadow(0 10px 6px #000d) drop-shadow(0 0 12px color-mix(in srgb, var(--identity-color, #1595ff) 62%, transparent)); }

/* ---------------------------------------------------------------------------
   Card back: click Flip Card or double-click the preview to see the back.
   #card-shell is untouched except for backface-visibility (purely additive);
   #card-back is a new sibling reusing .card-shell's box-model rules for
   correct sizing at every breakpoint, but every override below uses the #id
   selector so it always outranks the shared .card-shell class rules and never
   inherits the front's live hover-tilt.
--------------------------------------------------------------------------- */
.card-flip { position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .7s cubic-bezier(.4,.05,.2,1); }
.card-preview-scale.is-flipped .card-flip { transform:rotateY(180deg); }
.card-preview-scale.is-inspected { z-index:8; }
.card-preview-scale.is-inspected .card-flip { transform:scale(1.16); }
.card-preview-scale.is-inspected.is-flipped .card-flip { transform:scale(1.16) rotateY(180deg); }
#card-shell { backface-visibility:hidden; }
/* #card-back fills .card-flip directly (100%/100%, no transform:scale) so it
   matches #card-shell's scaled footprint in every breakpoint without
   duplicating the .735/.3451 scale factors. Its rotateY(180deg) uses the
   default center origin, so the pre-rotation spins it in place instead of
   translating it — the earlier top-left-origin version flung it a full card
   width off to the side once the parent flip mirrored it again. */
#card-back {
  position:absolute; inset:0; width:100%; height:100%; backface-visibility:hidden; overflow:hidden;
  transform:rotateY(180deg); transform-origin:center;
  filter:drop-shadow(0 10px 6px #000d); pointer-events:none; cursor:pointer;
}
.card-back-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:26px; }
.card-preview-scale.is-flipped #card-shell { pointer-events:none; }
.card-preview-scale.is-flipped .card-glint,
.card-preview-scale.is-flipped .card-foil { opacity:0; }

@media (prefers-reduced-motion:reduce) {
  .card-flip { transition:none; }
}

/* ---------------------------------------------------------------------------
   3D asteroid studio draft. The editor logic and card anatomy stay untouched;
   this layer restages the working controls over the supplied platform artwork.
--------------------------------------------------------------------------- */
html {
  background:#02070b url("../../assets/backgrounds/asteroid-card-editor-platform-clean.png") center center/cover fixed no-repeat;
}
body {
  min-height:100vh;
  background:
    linear-gradient(180deg,#02070b00 0,#02070b14 44%,#02070bd1 100%),
    url("../../assets/backgrounds/asteroid-card-editor-platform-clean.png") center center/cover fixed no-repeat;
}
body::before {
  z-index:0;
  background:
    radial-gradient(ellipse at 50% 46%,#009dff24 0,transparent 18rem),
    radial-gradient(ellipse at 50% 78%,#13a6ff2b 0,transparent 24rem),
    linear-gradient(90deg,#000b 0,#00000018 22%,#00000008 50%,#00000018 78%,#000b 100%);
}
.editor-background-video { display:none; }
.app-header,
.studio-scale-wrap,
.editor-layout { position:relative; z-index:1; }
.app-header {
  position:sticky;
  top:12px;
  z-index:6;
  width:min(1500px,calc(100% - 24px));
  margin:12px auto 0;
  border-color:#78d5ff55;
  border-radius:8px;
  background:linear-gradient(145deg,#0715229c,#04101878 72%);
  box-shadow:inset 0 1px #b7ecff24,0 14px 36px #0008,0 0 22px #1595ff1c;
  backdrop-filter:blur(15px) saturate(1.25);
}
.header-toggle {
  width:auto;
  min-height:34px;
  margin:0;
  padding:7px 12px;
  border-color:#41bfff8c;
  color:#e8f7ff;
  background:linear-gradient(145deg,#0b2f4694,#06131d78);
}
.studio-scale-wrap {
  min-height:calc(100vh - 90px);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:8px;
}
.editor-layout {
  width:min(1536px,100vw);
  min-height:1320px;
  grid-template-columns:minmax(300px,360px) minmax(500px,1fr) minmax(300px,360px);
  grid-template-areas:
    "left stage right"
    "bottom bottom bottom";
  gap:14px;
  padding:24px 28px 22px;
}
.left-panel,
.right-panel,
.bottom-panels { align-self:start; }
.left-panel { padding-top:70px; }
.right-panel { padding-top:70px; }
.bottom-panels {
  width:min(1180px,calc(100vw - 72px));
  justify-self:center;
  margin-top:80px;
  grid-template-columns:repeat(5,minmax(0,1fr));
}
.panel,
.app-header {
  color:#eef8ff;
}
.panel {
  border-color:#64ccff4f;
  background:
    linear-gradient(145deg,#0a1d2a84,#06101954 62%,#02070c66),
    radial-gradient(circle at 50% 0,#41bfff18 0,transparent 44%);
  box-shadow:inset 0 1px #ffffff18,inset 0 0 0 1px #0008,0 14px 30px #0007,0 0 18px #1595ff12;
  backdrop-filter:blur(14px) saturate(1.28);
}
.panel h2,
.stage-label,
.layout-tuning summary { color:#73d3ff; text-shadow:0 0 10px #1595ff7a; }
.panel-note,
.status,
.subtitle { color:#b4d1dd; }
.panel input,
.panel textarea,
.panel select {
  border-color:#64ccff5a;
  background:#020b1185;
  box-shadow:inset 0 1px 8px #0008;
}
.card-stage {
  position:fixed;
  z-index:3;
  left:50%;
  top:39.5%;
  width:600px;
  height:860px;
  min-height:0;
  padding-top:62px;
  transform:translate(-50%,-50%);
  border:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
  pointer-events:none;
}
.card-stage::before {
  content:none;
}
.card-stage::after {
  content:none;
}
.stage-label {
  display:none;
}
.card-preview-scale {
  z-index:2;
  pointer-events:auto;
  transform:scale(.96);
  transform-origin:top center;
  filter:drop-shadow(0 42px 42px #000f);
}
.card-preview-scale.is-inspected {
  filter:drop-shadow(0 38px 44px #000e);
}
.card-shell {
  transition:transform .16s cubic-bezier(.22,1,.36,1);
}
.card-shell.painted-frame-active {
  filter:drop-shadow(0 18px 18px #000f) drop-shadow(0 0 18px color-mix(in srgb, var(--identity-color, #1595ff) 72%, transparent));
}
.color-panel .card-color-option,
.color-panel .card-color-option:hover,
.color-panel .card-color-option.selected {
  background:transparent;
}
.painted-frame-active .art-window {
  background:#050b10;
  background-image:none;
}
.painted-frame-active .art-placeholder {
  background:none;
}
.solid-panels .panel,
.solid-panels .app-header {
  background:linear-gradient(145deg,var(--pf-panel-raised),var(--pf-panel) 56%,var(--pf-night-steel));
  backdrop-filter:none;
  box-shadow:inset 0 1px #ffffff0b,0 7px 20px #0006;
}
.solid-panels .panel input,
.solid-panels .panel textarea,
.solid-panels .panel select { background:#061017; }

@media (max-width:1279px) {
  .studio-scale-wrap { display:block; min-height:0; padding-top:0; }
  .editor-layout { width:100%; min-height:0; }
  .left-panel,
  .right-panel { padding-top:0; }
  .bottom-panels { width:100%; margin-top:0; }
  .card-stage {
    position:relative;
    left:auto;
    top:auto;
    width:auto;
    height:auto;
    min-height:742px;
    padding-top:38px;
    transform:none;
    pointer-events:auto;
  }
}

/* 2026-07 editor organization pass: keep the cinematic center card and
   scrolling workspace, but turn the title box into a top command bar and give
   controls cleaner, wider rails. */
body.fixed-hero-card .app-header {
  position:sticky;
  top:0;
  z-index:20;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:18px;
  width:100%;
  min-height:76px;
  margin:0;
  padding:12px 18px;
  border:1px solid #47606d;
  border-width:0 0 1px;
  border-radius:0;
  background:
    linear-gradient(135deg,#ffffff10,#ffffff00 18%),
    linear-gradient(145deg,#102838,#0b1923 58%,#050d13);
  backdrop-filter:blur(16px) saturate(1.22);
}

body.fixed-hero-card .app-header .eyebrow {
  margin:0 0 4px;
  color:var(--blue,#1595ff);
  font:700 .74rem/1 "Orbitron",Arial,sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
}

body.fixed-hero-card .app-header .subtitle {
  display:none;
}

body.fixed-hero-card .app-header h1 {
  margin:0;
  font:800 1.72rem/1 "Barlow Condensed",Arial,sans-serif;
  color:#f5f2e9;
  letter-spacing:.045em;
  text-shadow:0 2px #000,0 0 10px #1595ff66;
}

body.fixed-hero-card .header-actions {
  justify-content:flex-end;
}

body.fixed-hero-card .editor-layout {
  width:min(1780px,100vw);
  grid-template-columns:minmax(390px,430px) minmax(560px,1fr) minmax(430px,470px);
  gap:18px;
  padding:18px 28px 32px;
}

body.fixed-hero-card .left-panel,
body.fixed-hero-card .right-panel {
  padding-top:34px;
}

body.fixed-hero-card .left-panel {
  grid-template-rows:auto auto auto;
}

body.fixed-hero-card .right-panel {
  grid-template-rows:auto auto auto;
}

body.fixed-hero-card .panel {
  padding:16px 18px;
}

body.fixed-hero-card .elements-panel {
  min-height:0;
}

body.fixed-hero-card .element-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:4px 12px;
}

body.fixed-hero-card .element-list li {
  margin:2px 0;
}

body.fixed-hero-card .card-color-grid {
  grid-template-columns:repeat(3,minmax(0,1fr));
}

body.fixed-hero-card .border-grid {
  grid-template-columns:repeat(3,minmax(0,1fr));
}

body.fixed-hero-card .border-option {
  min-height:80px;
}

body.fixed-hero-card .symbol-library-panel .symbol-grid {
  grid-template-columns:repeat(9,minmax(0,1fr));
}

body.fixed-hero-card .bottom-panels {
  width:min(1480px,calc(100vw - 80px));
  margin-top:52px;
  grid-template-columns:1.25fr .85fr 1fr 1.05fr 1fr;
  gap:14px;
}

body.fixed-hero-card .export-panel {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

body.fixed-hero-card .export-panel h2,
body.fixed-hero-card .export-panel .panel-note,
body.fixed-hero-card .export-panel .file-control,
body.fixed-hero-card .export-panel .status,
body.fixed-hero-card .export-panel #export-png {
  grid-column:1 / -1;
}

body.fixed-hero-card .bottom-panels .panel {
  min-height:0;
}

body.fixed-hero-card .bottom-panels .content-panel textarea {
  min-height:74px;
}

body.fixed-hero-card .studio-panel {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 8px;
}

body.fixed-hero-card .studio-panel h2,
body.fixed-hero-card .studio-panel .panel-note {
  grid-column:1/-1;
}

body.fixed-hero-card .button-pair {
  grid-column:1/-1;
}

body.fixed-hero-card .card-stage {
  top:43%;
}

@media (max-width:1279px) {
  body.fixed-hero-card .app-header {
    position:relative;
    grid-template-columns:1fr;
  }
  body.fixed-hero-card .editor-layout {
    width:100%;
    grid-template-columns:1fr;
  }
  body.fixed-hero-card .bottom-panels {
    width:100%;
  }
}