/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Base ──────────────────────────────────────────────────────────────── */
body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.5; min-height: 100vh; overflow-x: hidden; position: relative; display:flex; align-items:flex-start; }
body::after { content:''; position:fixed; inset:0; z-index:9999; pointer-events:none; background:repeating-linear-gradient(0deg,transparent,transparent 2px,var(--scanline) 2px,var(--scanline) 4px); }
body::before { content:''; position:fixed; inset:0; z-index:0; background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px); background-size:60px 60px; opacity:.08; }
.container { flex:1; min-width:0; padding:0 32px; position:relative; z-index:1; }

/* ── Header ────────────────────────────────────────────────────────────── */
.header { padding:48px 0 36px; text-align:center; }
.header h1 { font-family:var(--font-head); font-size:42px; font-weight:900; letter-spacing:6px; color:var(--cyan); text-shadow:var(--cyan-glow); position:relative; display:inline-block; }
.header h1::after { content:'FAKE//DATA GEN'; position:absolute; left:2px; top:2px; color:var(--magenta); text-shadow:none; clip-path:inset(0 100% 0 0); animation:glitch 4s infinite; opacity:.5; }
@keyframes glitch { 0%,92%,100%{clip-path:inset(0 100% 0 0)} 93%{clip-path:inset(20% 0 60% 0);transform:translate(-3px,1px)} 94%{clip-path:inset(60% 0 10% 0);transform:translate(3px,-1px)} 95%{clip-path:inset(0 100% 0 0)} 96%{clip-path:inset(40% 0 30% 0);transform:translate(-2px,0)} 97%{clip-path:inset(0 100% 0 0)} }
.header p { font-family:var(--font-mono); color:var(--text2); font-size:14px; margin-top:8px; letter-spacing:2px; }
.header p span { color:var(--yellow); }
.divider { height:1px; background:linear-gradient(90deg,transparent,var(--cyan-dim),var(--magenta-dim),transparent); margin-bottom:32px; }

/* ── Card ──────────────────────────────────────────────────────────────── */
.card { background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--cyan); padding:20px 24px; margin-bottom:16px; position:relative; }
.card-label { font-family:var(--font-head); font-size:12px; font-weight:700; letter-spacing:3px; color:var(--cyan); text-transform:uppercase; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.card-label::before { content:'//'; color:var(--magenta); }
.card-label-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:12px; flex-wrap:wrap; }
.card-label-row .card-label { margin-bottom:0; }

/* ── Form ──────────────────────────────────────────────────────────────── */
input[type="text"],input[type="number"],select { display:block; width:100%; height:40px; padding:0 12px; font-family:var(--font-mono); font-size:14px; color:var(--text); background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); outline:none; transition:.2s ease; -webkit-appearance:none; }
input:focus,select:focus { border-color:var(--cyan); box-shadow:var(--cyan-glow); }
select { cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%2300f0ff' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; padding-right:28px; }
input[type="checkbox"] { width:16px; height:16px; accent-color:var(--cyan); cursor:pointer; }
input[type="range"] { -webkit-appearance:none; appearance:none; width:100%; height:4px; background:var(--border); border-radius:2px; outline:none; cursor:pointer; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; background:var(--cyan); border-radius:50%; cursor:pointer; box-shadow:var(--cyan-glow); }
input[type="range"]::-moz-range-thumb { width:14px; height:14px; background:var(--cyan); border-radius:50%; cursor:pointer; border:none; }
.form-label { display:block; font-family:var(--font-head); font-size:10px; font-weight:400; letter-spacing:1.5px; color:var(--text2); text-transform:uppercase; margin-bottom:6px; }
::placeholder { color:var(--text3); }
.input-error { border-color:var(--magenta) !important; box-shadow:var(--magenta-glow) !important; }

/* ── Settings ──────────────────────────────────────────────────────────── */
.settings-row { display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:16px; align-items:end; }
.check-field { display:flex; align-items:center; gap:8px; height:38px; white-space:nowrap; }
.check-field label { font-family:var(--font-mono); font-size:14px; color:var(--text2); cursor:pointer; user-select:none; }
.row-count-wrap { display:flex; align-items:center; gap:8px; }
.row-count-wrap input { flex-grow:1; }
#max-rows-btn { height:38px; flex-shrink:0; padding:0 16px; font-family:var(--font-mono); font-size:11px; background:var(--bg3); border:1px solid var(--border); color:var(--text2); cursor:pointer; border-radius:var(--radius); transition:.2s ease; }
#max-rows-btn:hover { background:var(--bg); border-color:var(--cyan); color:var(--cyan); }

/* ── Preset dropdown ───────────────────────────────────────────────────── */
.preset-wrap { position:relative; flex-shrink:0; }
.preset-btn { height:30px; padding:0 14px; font-family:var(--font-mono); font-size:11px; color:var(--text2); background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); cursor:pointer; transition:.2s ease; white-space:nowrap; }
.preset-btn:hover { border-color:var(--cyan); color:var(--cyan); }
.preset-dropdown { display:none; position:absolute; top:calc(100% + 4px); right:0; min-width:140px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); z-index:30; overflow:hidden; box-shadow:0 6px 24px rgba(0,0,0,.35); }
.preset-dropdown.open { display:block; }
.preset-option { display:block; width:100%; padding:9px 14px; background:transparent; border:none; font-family:var(--font-mono); font-size:12px; color:var(--text2); cursor:pointer; text-align:left; transition:.1s ease; }
.preset-option:hover { background:var(--bg2); color:var(--cyan); }

/* ── Column list ───────────────────────────────────────────────────────── */
.col-grid-header { display:grid; grid-template-columns:18px 36px 1.2fr 1fr 28px 28px 28px; gap:10px; padding:0 10px 6px; }
.col-grid-header span { font-family:var(--font-head); font-size:10px; font-weight:400; letter-spacing:2px; text-transform:uppercase; color:var(--text3); }
.col-list { display:flex; flex-direction:column; gap:4px; }
.col-row { display:grid; grid-template-columns:18px 36px 1.2fr 1fr 28px 28px 28px; gap:10px; padding:8px 10px; align-items:center; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); transition:.2s ease; animation:rowIn .25s ease; }
.col-row:hover { border-color:var(--cyan-dim); }
.col-row.active-col { border-color:var(--cyan); box-shadow:var(--cyan-glow); }
.col-row.dragging-row { opacity:.4; }
.col-row.drag-over-row { border-color:var(--magenta); border-style:dashed; }
.col-row.drop-before { box-shadow:0 -3px 0 0 var(--cyan); }
.col-row.drop-after  { box-shadow:0  3px 0 0 var(--cyan); }
@keyframes rowIn { from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:translateX(0)} }
.col-row input,.col-row select { height:36px; font-size:13px; }
.col-num { width:32px; height:32px; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:13px; color:var(--cyan); border:1px solid var(--border); border-radius:var(--radius); background:var(--bg); }
.drag-handle { color:var(--text3); font-size:14px; cursor:grab; user-select:none; display:flex; align-items:center; justify-content:center; transition:.1s ease; }
.drag-handle:hover { color:var(--cyan); }
.drag-handle:active { cursor:grabbing; }

/* ── Column action buttons ─────────────────────────────────────────────── */
.del-btn,.dup-btn,.opts-btn { width:28px; height:28px; display:flex; align-items:center; justify-content:center; background:transparent; border:1px solid transparent; border-radius:var(--radius); cursor:pointer; transition:.15s ease; font-size:14px; font-family:var(--font-mono); flex-shrink:0; }
/* Always visible — muted at rest, full intensity on hover */
.del-btn  { color:var(--text3); opacity:.45; }
.dup-btn  { color:var(--text3); opacity:.45; padding-top: 7px;}
.opts-btn { color:var(--text3); opacity:.45; position:relative; }
.del-btn:hover  { opacity:1; border-color:var(--magenta); color:var(--magenta); box-shadow:var(--magenta-glow); }
.dup-btn:hover  { opacity:1; border-color:var(--cyan-dim); color:var(--cyan); }
.opts-btn:hover { opacity:1; border-color:var(--cyan-dim); color:var(--cyan); }
/* Active state: button is highlighted + badge dot clearly visible */
.opts-btn-active { opacity:1 !important; color:var(--cyan) !important; border-color:var(--cyan) !important; border-style:solid !important; box-shadow:inset 0 0 0 1px var(--cyan-dim); }
.opts-btn-active::after { content:''; position:absolute; top:4px; right:4px; width:7px; height:7px; background:var(--magenta); border-radius:50%; box-shadow:0 0 5px var(--magenta), 0 0 10px var(--magenta); }

.add-btn { display:inline-flex; align-items:center; gap:6px; margin-top:10px; padding:10px 22px; font-family:var(--font-mono); font-size:13px; color:var(--cyan); background:transparent; border:1px dashed var(--cyan-dim); border-radius:var(--radius); cursor:pointer; transition:.2s ease; letter-spacing:1px; }
.add-btn:hover { background:var(--cyan-dim); border-color:var(--cyan); box-shadow:var(--cyan-glow); }

/* ── Type Picker ───────────────────────────────────────────────────────── */
.type-picker { position:relative; }
.cat-icon { flex-shrink:0; }

/* ── Type Panel Sidebar ─────────────────────────────────────────────────── */
.type-panel { width:300px; flex-shrink:0; height:100vh; position:sticky; top:0; background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; transition:width .25s ease; z-index:20; overflow:hidden; }
.type-panel.tp-collapsed { width:0; }
.tp-header { display:flex; align-items:center; justify-content:space-between; padding:16px 12px 10px; border-bottom:1px solid var(--border); flex-shrink:0; gap:8px; }
.tp-title { font-family:var(--font-head); font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--magenta); white-space:nowrap; }
.tp-toggle-btn { width:24px; height:24px; display:flex; align-items:center; justify-content:center; background:transparent; border:1px solid var(--border); border-radius:var(--radius); color:var(--text2); cursor:pointer; transition:.2s ease; font-family:var(--font-mono); font-size:13px; flex-shrink:0; }
.tp-toggle-btn:hover { border-color:var(--cyan); color:var(--cyan); }
.tp-tabs { display:flex; gap:0; flex:1; min-width:0; }
.tp-tab { flex:1; padding:4px 2px; font-family:var(--font-head); font-size:9px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--text3); background:transparent; border:none; border-bottom:2px solid transparent; cursor:pointer; transition:.15s ease; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tp-tab.active { color:var(--magenta); border-bottom-color:var(--magenta); }
.tp-tab:hover:not(.active) { color:var(--text2); }
.tp-templates { flex:1; overflow-y:auto; padding:8px 8px 16px; display:flex; flex-direction:column; gap:6px; }
.tp-templates::-webkit-scrollbar { width:3px; }
.tp-templates::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
.tp-tpl-card { padding:10px 12px; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); cursor:pointer; transition:.15s ease; }
.tp-tpl-card:hover { border-color:var(--cyan); background:var(--bg3,var(--bg)); box-shadow:0 0 8px var(--cyan-dim); }
.tp-tpl-name { font-family:var(--font-head); font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--cyan); margin-bottom:4px; }
.tp-tpl-fields { font-family:var(--font-mono); font-size:10px; color:var(--text3); line-height:1.6; }
.tp-tpl-cat { font-family:var(--font-head); font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--magenta); padding:10px 12px 4px; opacity:.8; }
.tp-search-wrap { padding:8px; border-bottom:1px solid var(--border); flex-shrink:0; }
.tp-search { width:100%; height:30px; padding:0 8px; font-family:var(--font-mono); font-size:11px; color:var(--text); background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); outline:none; display:block; }
.tp-search:focus { border-color:var(--cyan); }
.tp-search::placeholder { color:var(--text3); }
.tp-body { flex:1; overflow-y:auto; padding:4px 0 16px; }
.tp-body::-webkit-scrollbar { width:3px; }
.tp-body::-webkit-scrollbar-track { background:transparent; }
.tp-body::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
.tp-domain { font-family:var(--font-head); font-size:7px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--magenta); padding:10px 10px 3px; user-select:none; }
.tp-cat { display:flex; align-items:center; gap:6px; padding:4px 10px 2px; font-family:var(--font-head); font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--text3); border-top:1px solid var(--border); margin-top:3px; cursor:pointer; user-select:none; }
.tp-cat:hover { color:var(--text2); }
.tp-cat .cat-icon { color:var(--cyan); }
.tp-cat-count { margin-left:auto; font-size:8px; color:var(--text3); }
.tp-cat-chevron { font-size:10px; color:var(--text3); flex-shrink:0; line-height:1; }
.tp-cat-controls { display:flex; gap:4px; padding:4px 8px; border-bottom:1px solid var(--border); flex-shrink:0; }
.tp-cat-ctrl-btn { flex:1; height:22px; font-family:var(--font-mono); font-size:10px; color:var(--text2); background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); cursor:pointer; transition:.15s ease; letter-spacing:.5px; }
.tp-cat-ctrl-btn:hover { border-color:var(--cyan); color:var(--cyan); }
.tp-item { display:flex; align-items:center; padding:5px 10px 5px 22px; cursor:pointer; font-family:var(--font-mono); font-size:11px; color:var(--text2); transition:background .1s ease; user-select:none; white-space:nowrap; overflow:hidden; }
.tp-item:hover { background:var(--bg); color:var(--text); }
.tp-item:active { background:var(--cyan-dim); }
.tp-item.dragging { opacity:.3; cursor:grabbing; }
.tp-item-label { overflow:hidden; text-overflow:ellipsis; }
.tp-empty { padding:16px 10px; font-family:var(--font-mono); font-size:11px; color:var(--text3); text-align:center; }
.tp-open-btn { position:fixed; left:0; top:50%; transform:translateY(-50%); width:20px; height:48px; background:var(--surface); border:1px solid var(--border); border-left:none; border-radius:0 var(--radius) var(--radius) 0; color:var(--cyan); cursor:pointer; display:none; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:13px; z-index:19; transition:.2s ease; padding:0; }
.tp-open-btn:hover { background:var(--cyan-dim); }

/* ── Type Display (drop zone per column row) ───────────────────────────── */
.type-display { display:flex; align-items:center; gap:8px; width:100%; height:36px; padding:0 10px; font-family:var(--font-mono); font-size:12px; color:var(--text); background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); transition:.15s ease; user-select:none; overflow:hidden; white-space:nowrap; cursor:pointer; }
.type-display .cat-icon { color:var(--cyan); flex-shrink:0; }
.type-display-label { flex:1; overflow:hidden; text-overflow:ellipsis; }
.type-display.drag-over { border-color:var(--cyan); border-style:dashed; background:var(--cyan-dim); box-shadow:var(--cyan-glow); }
body.is-dragging .type-display { border-color:var(--cyan-dim); border-style:dashed; }
body.is-dragging .col-row { border-color:var(--cyan-dim); border-style:dashed; }

/* ── Column list drop zone ─────────────────────────────────────────────── */
.col-drop-zone { height:40px; display:none; align-items:center; justify-content:center; border:1px dashed var(--border); border-radius:var(--radius); margin-top:4px; font-family:var(--font-mono); font-size:11px; color:var(--text3); transition:.15s ease; letter-spacing:1px; }
body.is-dragging .col-drop-zone { display:flex; border-color:var(--cyan-dim); color:var(--cyan-dim); }
.col-drop-zone.drag-over { border-color:var(--cyan); color:var(--cyan); background:var(--cyan-dim); box-shadow:var(--cyan-glow); }

/* ── Actions ───────────────────────────────────────────────────────────── */
.actions-row { display:flex; gap:10px; margin-bottom:16px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; padding:0 28px; font-family:var(--font-head); font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; border-radius:var(--radius); cursor:pointer; transition:.2s ease; flex:1; border:none; }
.btn svg { width:16px; height:16px; }
.btn-neon { background:var(--cyan); color:var(--bg); box-shadow:var(--cyan-glow); }
.btn-neon:hover { box-shadow:var(--cyan-glow); filter:brightness(1.2); transform:translateY(-1px); }
.btn-neon svg { stroke:var(--bg); }
.btn-ghost { background:transparent; color:var(--cyan); border:1px solid var(--cyan-dim); }
.btn-ghost:hover { border-color:var(--cyan); box-shadow:var(--cyan-glow); }
.btn-ghost svg { stroke:var(--cyan); }

/* ── Preview ───────────────────────────────────────────────────────────── */
#preview-section { display:none; }
.preview-meta { font-family:var(--font-mono); font-size:11px; color:var(--text3); margin-left:8px; letter-spacing:0; }
.preview-stale { font-family:var(--font-mono); font-size:11px; color:var(--magenta); margin-left:8px; letter-spacing:0; animation:blink 1.5s step-end infinite; }
.preview-rows-wrap { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.preview-rows-wrap select { width:70px; height:28px; font-size:12px; padding:0 6px; }
.table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); }
table { width:100%; border-collapse:collapse; }
th { text-align:left; padding:10px 14px; font-family:var(--font-head); font-size:10px; font-weight:400; letter-spacing:2px; text-transform:uppercase; color:var(--cyan); background:var(--bg2); border-bottom:1px solid var(--border); white-space:nowrap; }
td { padding:8px 14px; font-family:var(--font-mono); font-size:13px; color:var(--text); border-bottom:1px solid var(--border); max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; transition:background .1s ease; }
td:hover { background:var(--cyan-dim) !important; color:var(--cyan); }
tbody tr:last-child td { border-bottom:none; }
tbody tr:nth-child(even) td { background:var(--row-stripe); }
tbody tr:hover td { background:var(--row-hover); }

/* ── Field Options Panel (right sidebar) ───────────────────────────────── */
.field-options-panel { width:300px; flex-shrink:0; height:100vh; position:sticky; top:0; background:var(--surface); border-left:1px solid var(--border); display:flex; flex-direction:column; transition:width .25s ease; z-index:20; overflow:hidden; }
.field-options-panel.fo-collapsed { width:0; }
.fo-header { display:flex; align-items:center; gap:8px; padding:16px 12px 10px; border-bottom:1px solid var(--border); flex-shrink:0; }
.fo-title { font-family:var(--font-head); font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--cyan); white-space:nowrap; flex:1; overflow:hidden; text-overflow:ellipsis; }
.fo-toggle-btn { width:24px; height:24px; display:flex; align-items:center; justify-content:center; background:transparent; border:1px solid var(--border); border-radius:var(--radius); color:var(--text2); cursor:pointer; transition:.2s ease; font-family:var(--font-mono); font-size:13px; flex-shrink:0; }
.fo-toggle-btn:hover { border-color:var(--cyan); color:var(--cyan); }
.fo-empty { flex:1; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:11px; color:var(--text3); text-align:center; padding:20px; }
.fo-open-btn { position:fixed; right:0; top:50%; transform:translateY(-50%); width:20px; height:48px; background:var(--surface); border:1px solid var(--border); border-right:none; border-radius:var(--radius) 0 0 var(--radius); color:var(--cyan); cursor:pointer; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:13px; z-index:19; transition:.2s ease; padding:0; }
.fo-open-btn:hover { background:var(--cyan-dim); }
.fo-open-btn.fo-hidden { display:none; }
.field-options-panel .field-modal-body { flex:1; overflow-y:auto; padding:4px 0; display:none; }
.field-options-panel .field-modal-body::-webkit-scrollbar { width:3px; }
.field-options-panel .field-modal-body::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
.field-options-panel.fo-has-col .field-modal-body { display:block; }
.field-options-panel.fo-has-col .fo-empty { display:none; }
.field-options-panel.fo-has-col .field-modal-footer { display:flex; }
.field-modal-section { padding:14px 16px; border-bottom:1px solid var(--border); }
.field-modal-section:last-child { border-bottom:none; }
.field-modal-section .form-label { margin-bottom:12px; }
.field-modal-section .opt-group { margin-bottom:10px; }
.field-modal-section .opt-group span { display:block; font-family:var(--font-head); font-size:9px; letter-spacing:1px; color:var(--text3); text-transform:uppercase; margin-bottom:4px; }
.field-modal-section .opt-group input, .field-modal-section .opt-group select { height:34px; font-size:13px; }
.field-modal-no-opts { padding:20px; font-family:var(--font-mono); font-size:12px; color:var(--text3); text-align:center; }
.type-opt-textarea { display:block; width:100%; padding:8px 12px; font-family:var(--font-mono); font-size:12px; color:var(--text); background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); outline:none; resize:vertical; transition:.2s ease; box-sizing:border-box; }
.type-opt-textarea:focus { border-color:var(--cyan); box-shadow:var(--cyan-glow); }
.opt-hint { font-family:var(--font-mono); font-size:10px; color:var(--text3); margin-top:4px; line-height:1.5; }
.unique-row { display:flex; align-items:center; gap:10px; }
.unique-label { font-family:var(--font-mono); font-size:13px; color:var(--text); cursor:pointer; }
.transform-pad-row { display:flex; align-items:center; gap:6px; }
.transform-pad-row input[type="number"] { flex:1; min-width:0; }
.transform-pad-row select { flex:1; min-width:0; height:34px; font-size:13px; }
.transform-pad-char { width:44px !important; flex:none !important; text-align:center; }
.field-modal-section select { height:34px; font-size:13px; }
.null-pct-row { display:flex; align-items:center; gap:10px; }
.null-pct-row input[type="range"] { flex:1; }
.null-pct-row input[type="number"] { width:70px; flex-shrink:0; height:34px; font-size:13px; }
.null-pct-label { font-family:var(--font-mono); font-size:12px; color:var(--text3); white-space:nowrap; }
.field-modal-footer { display:none; gap:10px; padding:12px 16px; border-top:1px solid var(--border); flex-shrink:0; }
.field-modal-footer .btn { height:36px; font-size:10px; padding:0 16px; }
/* Selected column highlight in panel */
.col-row.opts-selected { border-color:var(--magenta) !important; box-shadow:0 0 6px rgba(255,0,200,.2); }

/* ── Loading overlay ───────────────────────────────────────────────────── */
.overlay { display:none; position:fixed; inset:0; background:var(--overlay-bg); backdrop-filter:blur(4px); z-index:100; align-items:center; justify-content:center; }
.overlay.on { display:flex; }
.overlay-box { background:var(--surface); border:1px solid var(--cyan-dim); border-left:3px solid var(--cyan); padding:32px 40px; display:flex; flex-direction:column; align-items:center; gap:14px; box-shadow:var(--cyan-glow); clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%); }
.spinner { width:32px; height:32px; border:2px solid var(--border); border-top-color:var(--cyan); border-radius:50%; animation:spin .6s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
.overlay-box span { font-family:var(--font-mono); font-size:12px; color:var(--cyan); letter-spacing:2px; animation:blink 1s step-end infinite; }
@keyframes blink { 50%{opacity:.4} }

/* ── Toast ─────────────────────────────────────────────────────────────── */
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(8px); background:var(--surface2); border:1px solid var(--magenta); color:var(--magenta); padding:10px 20px; border-radius:var(--radius); font-family:var(--font-mono); font-size:12px; z-index:300; opacity:0; transition:.25s ease; pointer-events:none; box-shadow:var(--magenta-glow); }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }

/* ── Stats panel ───────────────────────────────────────────────────────── */
#stats-section { display:none; margin-bottom:16px; }
.stats-meta { font-family:var(--font-mono); font-size:11px; color:var(--text3); margin-left:8px; letter-spacing:0; font-weight:400; }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; margin-top:12px; }
.stat-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; position:relative; overflow:hidden; }
.stat-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; }
.stat-card.numeric::before { background:var(--cyan); }
.stat-card.categorical::before { background:var(--magenta); }
.stat-card-name { font-family:var(--font-head); font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--text); margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stat-card-type { font-family:var(--font-mono); font-size:10px; color:var(--text3); margin-bottom:10px; }
.stat-rows { display:flex; flex-direction:column; gap:5px; }
.stat-row { display:flex; justify-content:space-between; align-items:center; }
.stat-key { font-family:var(--font-mono); font-size:10px; color:var(--text3); }
.stat-val { font-family:var(--font-mono); font-size:11px; color:var(--text); font-weight:600; }
.stat-val.warn { color:var(--yellow); }
.stat-val.danger { color:var(--magenta); }
.stat-bar-wrap { margin-top:8px; }
.stat-bar-label { display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:10px; color:var(--text3); margin-bottom:3px; }
.stat-bar-track { height:4px; background:var(--border); border-radius:2px; overflow:hidden; }
.stat-bar-fill { height:100%; border-radius:2px; transition:width .4s ease; }
.stat-bar-fill.cyan { background:var(--cyan); }
.stat-bar-fill.magenta { background:var(--magenta); }
.stat-bar-fill.yellow { background:var(--yellow); }
.stat-top-vals { margin-top:8px; }
.stat-top-val-row { display:flex; align-items:center; gap:6px; margin-bottom:3px; }
.stat-top-val-label { font-family:var(--font-mono); font-size:10px; color:var(--text); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.stat-top-val-count { font-family:var(--font-mono); font-size:10px; color:var(--text3); white-space:nowrap; }
.stat-top-val-bar { flex:2; height:4px; background:var(--border); border-radius:2px; overflow:hidden; }
.stat-top-val-bar-fill { height:100%; background:var(--magenta); border-radius:2px; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.footer { text-align:center; padding:36px 0 28px; font-family:var(--font-mono); font-size:12px; color:var(--text3); letter-spacing:2px; }
.footer span { color:var(--cyan); }

/* ── Theme picker ──────────────────────────────────────────────────────── */
.theme-picker { position:absolute; top:16px; right:24px; z-index:10; display:flex; align-items:center; gap:6px; }
/* Help button (next to theme toggle) */
.help-btn { width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); color:var(--cyan); font-family:var(--font-mono); font-size:15px; cursor:pointer; transition:.2s ease; }
.help-btn:hover { border-color:var(--cyan); box-shadow:var(--cyan-glow); }
/* Tips overlay */
.tips-overlay { position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.65); display:none; align-items:center; justify-content:center; }
.tips-panel { width:500px; max-width:92vw; max-height:88vh; background:var(--surface); border:1px solid var(--cyan-dim); border-left:3px solid var(--cyan); display:flex; flex-direction:column; overflow:hidden; }
.tips-hd { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border); flex-shrink:0; }
.tips-hd-title { font-family:var(--font-head); font-size:11px; font-weight:700; letter-spacing:3px; color:var(--cyan); }
.tips-hd-title::before { content:'// '; color:var(--magenta); }
.tips-close { background:transparent; border:none; color:var(--text3); cursor:pointer; font-size:20px; line-height:1; transition:.15s; padding:0; }
.tips-close:hover { color:var(--magenta); }
.tips-body { flex:1; overflow-y:auto; padding:14px 18px; display:flex; flex-direction:column; gap:10px; }
.tips-body::-webkit-scrollbar { width:3px; }
.tips-body::-webkit-scrollbar-thumb { background:var(--border); }
.tip-item { display:flex; gap:12px; align-items:flex-start; padding:10px 12px; background:var(--bg2); border-left:2px solid var(--border); }
.tip-item svg { flex-shrink:0; color:var(--cyan); margin-top:2px; }
.tip-t { font-family:var(--font-head); font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--cyan); margin-bottom:3px; }
.tip-d { font-family:var(--font-mono); font-size:12px; color:var(--text2); line-height:1.55; }
.tip-d b { color:var(--cyan); font-weight:normal; }
.tip-d em { color:var(--magenta); font-style:normal; }
.tip-d code { background:rgba(0,200,255,.08); color:var(--cyan); padding:1px 4px; border:1px solid var(--cyan-dim); border-radius:2px; font-size:11px; }
.tip-d .tip-table { display:grid; grid-template-columns:auto 1fr; gap:2px 10px; margin-top:6px; }
.tip-d .tip-table code { white-space:nowrap; }
.tip-d .tip-table span { color:var(--text3); font-size:11px; }
.tips-ft { padding:10px 18px; border-top:1px solid var(--border); flex-shrink:0; display:flex; gap:8px; }
.tips-ft button { font-family:var(--font-mono); font-size:12px; background:transparent; border:1px solid var(--border); padding:6px 14px; cursor:pointer; border-radius:var(--radius); transition:.15s; }
.tips-ft .tips-ok { color:var(--cyan); border-color:var(--cyan-dim); }
.tips-ft .tips-ok:hover { background:var(--cyan-dim); }
.tips-ft .tips-dismiss { color:var(--text3); }
.tips-ft .tips-dismiss:hover { border-color:var(--border); color:var(--text2); }
.theme-toggle {
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  cursor:pointer; transition:.2s ease; color:var(--yellow);
}
.theme-toggle:hover { border-color:var(--cyan); box-shadow:var(--cyan-glow); }
.theme-toggle svg { width:18px; height:18px; }
.theme-dropdown {
  display:none; position:absolute; top:calc(100% + 6px); right:0;
  min-width:148px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden;
  box-shadow:0 6px 24px rgba(0,0,0,.35);
}
.theme-dropdown.open { display:block; }
.theme-option {
  display:flex; align-items:center; gap:10px;
  width:100%; padding:9px 14px; background:transparent; border:none;
  font-family:var(--font-mono); font-size:12px; color:var(--text2);
  cursor:pointer; transition:.1s ease; text-align:left; white-space:nowrap;
}
.theme-option:hover { background:var(--bg2); color:var(--text); }
.theme-option.active { color:var(--cyan); }
.theme-option svg { width:15px; height:15px; flex-shrink:0; }

/* ── Misc ──────────────────────────────────────────────────────────────── */
.icon { width:14px; height:14px; display:inline-block; vertical-align:middle; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width:700px) {
  .settings-row { grid-template-columns:1fr 1fr; }
  .col-grid-header { display:none; }
  .col-row { grid-template-columns:18px 1fr auto auto auto; gap:8px; padding:12px; }
  .col-row .col-num { display:none; }
  .col-row .type-picker { grid-column:1/-1; }
  .col-row .col-name { grid-column:2/5; }
  .actions-row { flex-direction:column; }
  .header h1 { font-size:22px; letter-spacing:3px; }
  .type-panel { width:0; position:fixed; left:0; top:0; height:100vh; z-index:100; transition:width .25s ease; }
  .type-panel.tp-open-mobile { width:80vw; max-width:300px; box-shadow:4px 0 24px rgba(0,0,0,.6); }
  .tp-open-btn { display:flex; }
  .container { padding:0 16px; }
  .field-options-panel { width:0; position:fixed; right:0; top:0; height:100vh; z-index:100; transition:width .25s ease; }
  .field-options-panel:not(.fo-collapsed) { width:min(300px, 85vw); box-shadow:-4px 0 24px rgba(0,0,0,.6); }
  .card-label-row { flex-direction:column; align-items:flex-start; }
}