:root { color-scheme:dark; --bg:#07100e; --panel:#11201c; --line:#2b483e; --text:#eef7f2; --muted:#91aaa1; --accent:#caff5d; --blue:#69adff; --amber:#ffc35f; --red:#ff7068; font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
* { box-sizing:border-box; } [hidden] { display:none !important; } body { margin:0; min-width:1120px; color:var(--text); background:radial-gradient(circle at 50% -20%,#223b32,var(--bg) 45%); } button,input,select,textarea,a { font:inherit; } button,input,select,textarea,.header-links a { border:1px solid var(--line); border-radius:8px; color:var(--text); background:#172a24; } button,.header-links a { padding:8px 10px; cursor:pointer; } button:hover,.header-links a:hover,input:focus,select:focus,textarea:focus { border-color:var(--accent); outline:none; } button.primary { color:#10190d; border-color:var(--accent); background:var(--accent); font-weight:900; } button.danger { color:#ffd8d5; border-color:#683b38; } button:disabled { opacity:.35; cursor:not-allowed; } a { text-decoration:none; }
.eyebrow { margin:0 0 4px; color:var(--accent); font-size:9px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; } h1,h2,p { margin-top:0; } h1 { margin:0; font-size:22px; } h1 span { color:var(--muted); font-weight:500; } h2 { margin-bottom:8px; font-size:15px; }
.designer-header { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; min-height:72px; padding:12px 18px; border-bottom:1px solid var(--line); background:rgba(7,16,14,.96); }.header-links { display:flex; gap:8px; }
.designer-layout { display:grid; grid-template-columns:270px minmax(560px,1fr) 340px; gap:12px; padding:12px; }.panel { border:1px solid var(--line); border-radius:12px; padding:14px; background:linear-gradient(155deg,#14251f,#0c1915); box-shadow:0 12px 34px rgba(0,0,0,.24); }.panel-heading { display:flex; justify-content:space-between; align-items:start; gap:10px; }.panel-heading span { color:var(--muted); font-size:9px; }
.catalog-panel { height:calc(100vh - 96px); display:flex; flex-direction:column; gap:8px; position:sticky; top:84px; }.catalog-panel input,.catalog-panel select { width:100%; padding:9px; }.new-card-row,.file-actions { display:grid; grid-template-columns:1fr 1fr; gap:6px; }.catalog { flex:1; overflow:auto; display:grid; align-content:start; gap:5px; padding-right:3px; }.catalog-heading { margin:10px 2px 2px; color:var(--muted); font-size:9px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }.catalog-card { width:100%; padding:8px; text-align:left; }.catalog-card strong { display:block; font-size:11px; }.catalog-card span { color:var(--muted); font-size:8px; }.catalog-card.selected { border-color:var(--accent); background:#263b33; }.draft-badge { float:right; padding:2px 5px; border-radius:999px; color:#10190d !important; background:var(--amber); font-weight:900; }
.editor-panel { min-height:calc(100vh - 96px); }.editor-panel fieldset { margin:0 0 12px; padding:12px; border:1px solid var(--line); border-radius:10px; }.editor-panel legend { padding:0 7px; color:var(--accent); font-size:10px; font-weight:900; text-transform:uppercase; }.field-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }.identity-grid { grid-template-columns:1.2fr 2fr 1fr 1fr; } label { display:grid; gap:5px; color:var(--muted); font-size:9px; font-weight:800; } input,select,textarea { width:100%; padding:8px; resize:vertical; } textarea { line-height:1.4; }.editor-panel fieldset > label { margin-top:9px; }.editor-actions { display:flex; flex-wrap:wrap; gap:7px; }.validation { min-height:30px; margin:6px 0; color:var(--red); font-size:10px; }.validation.valid { color:var(--accent); }
.preview-column { display:flex; flex-direction:column; gap:12px; position:sticky; top:84px; height:max-content; }.preview-panel { padding:18px; }.card-preview { position:relative; min-height:480px; overflow:hidden; padding:22px; border:1px solid #597067; border-top:8px solid var(--blue); border-radius:18px; background:linear-gradient(165deg,#263a33,#101c18 60%,#09120f); box-shadow:0 22px 50px rgba(0,0,0,.4); }.card-preview.facility { border-top-color:var(--amber); }.empty-preview { display:grid; place-items:center; color:var(--muted); }.preview-kicker { color:var(--accent); font-size:9px; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }.preview-cost { position:absolute; top:16px; right:16px; display:grid; place-items:center; width:48px; height:48px; border-radius:50%; color:#10190d; background:var(--accent); font-size:18px; font-weight:1000; }.card-preview h3 { max-width:235px; margin:9px 0 5px; font-size:25px; line-height:1; }.preview-id { color:var(--muted); font-size:8px; }.preview-art { display:grid; place-items:center; height:145px; margin:17px 0; border:1px solid #3f5b50; border-radius:12px; color:#799187; background:radial-gradient(circle,#2c4b3f,#14231d); font-size:11px; letter-spacing:.1em; text-transform:uppercase; }.preview-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }.preview-stat { padding:8px 4px; border-radius:8px; background:#0a1512; text-align:center; }.preview-stat strong { display:block; font-size:17px; }.preview-stat span { color:var(--muted); font-size:7px; text-transform:uppercase; }.preview-traits { margin:14px 0 8px; color:var(--accent); font-size:9px; font-weight:900; }.preview-ability { min-height:72px; padding:11px; border-radius:10px; background:#0a1512; font-size:11px; line-height:1.45; }.preview-notes { margin-top:12px; color:var(--muted); font-size:9px; line-height:1.4; }.collaboration-panel p { color:var(--muted); font-size:10px; line-height:1.5; }.save-status { padding:9px; border-radius:8px; color:var(--muted); background:#0a1512; font-size:10px; }.save-status.success { color:var(--accent); }.save-status.error { color:var(--red); }
@media (max-width:1250px) { .designer-layout { grid-template-columns:240px minmax(520px,1fr) 310px; }.field-grid { grid-template-columns:repeat(3,1fr); }.identity-grid { grid-template-columns:1fr 1.5fr; } }