/* ── CSS Custom Properties (Theming) ──────────────────────────────────────── */
:root {
  --bg-toolbar:    #0F172A;
  --bg-app:        #1E293B;
  --bg-deep:       #0F172A;
  --bg-card:       #1E293B;
  --bg-input:      #0F172A;
  --bg-modal:      #1E293B;
  --bg-popup:      #1E293B;
  --bg-sidebar:    #0F172A;
  --border:        #334155;
  --border-focus:  #6366F1;
  --text:          #E2E8F0;
  --text-muted:    #94A3B8;
  --text-dim:      #64748B;
  --canvas-bg:     #EEF2F7;
  --tbl-body:      #FFFFFF;
  --tbl-col-name:  #1E293B;
  --col-border:    #F1F5F9;
  --legend-bg:     rgba(255,255,255,.93);
  --legend-border: #CBD5E1;
  --legend-text:   #475569;
  --sb-hover:      rgba(255,255,255,.06);
  --rpath-default: rgba(200,210,230,.5);
  --grid-dot:      rgba(100,130,200,.08);
  --glow-color:    rgba(99,102,241,.15);
  --rel-label-bg:  rgba(255,255,255,.92);
  --rel-label-border: rgba(100,120,180,.3);
  --accent:        #6366F1;
}

:root[data-theme="dark"] {
  --bg-toolbar:    #050C17;
  --bg-app:        #0A1525;
  --bg-deep:       #040A12;
  --bg-card:       #0E1F33;
  --bg-input:      #040A12;
  --bg-modal:      #0E1F33;
  --bg-popup:      #0E1F33;
  --bg-sidebar:    #050C17;
  --border:        #1B2E45;
  --border-focus:  #6366F1;
  --text:          #C8D8E8;
  --text-muted:    #6A8AA0;
  --text-dim:      #3E5A72;
  --canvas-bg:     #070F1C;
  --tbl-body:      #0E1F33;
  --tbl-col-name:  #A8C0D6;
  --col-border:    #1B2E45;
  --legend-bg:     rgba(10,21,37,.93);
  --legend-border: #1B2E45;
  --legend-text:   #6A8AA0;
  --sb-hover:      rgba(255,255,255,.04);
  --rpath-default: rgba(80,120,160,.5);
  --grid-dot:      rgba(99,102,241,.09);
  --glow-color:    rgba(99,102,241,.22);
  --rel-label-bg:  rgba(10,21,37,.92);
  --rel-label-border: rgba(99,102,241,.4);
  --accent:        #818CF8;
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Consolas', 'Courier New', monospace; }
body { display: flex; flex-direction: column; height: 100vh; background: var(--bg-app); color: var(--text); overflow: hidden; }

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
#toolbar { display: flex; align-items: center; gap: 5px; padding: 5px 10px; background: var(--bg-toolbar); border-bottom: 1px solid var(--border); flex-shrink: 0; flex-wrap: wrap; }
#toolbar h1 { font-size: 12px; color: var(--text-muted); margin: 0 2px; letter-spacing: .5px; display: flex; align-items: center; gap: 6px; }
.brand-logo { display: block; height: 24px; width: auto; max-width: 180px; }

/* Feature 25: Version badge */
#app-version {
  font-size: 9px;
  background: rgba(99,102,241,.18);
  color: var(--accent);
  border: 1px solid rgba(99,102,241,.3);
  border-radius: 10px;
  padding: 1px 6px;
  letter-spacing: .3px;
  font-weight: normal;
}

.tbtn { height: 26px; max-height: 26px; padding: 0 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-app); color: var(--text-muted); cursor: pointer; font-size: 11px; line-height: 1; display: flex; align-items: center; gap: 3px; white-space: nowrap; overflow: hidden; flex-shrink: 0; transition: background .15s, border-color .15s, color .15s; }
.tbtn:hover { background: var(--border); color: var(--text); }
.tbtn.active { background: #4F46E5; border-color: #4F46E5; color: #fff; }
.tbtn.green { border-color: #10B981; color: #10B981; }
.tbtn.green:hover { background: #10B981; color: #fff; }
.tbtn.amber { border-color: #F59E0B; color: #F59E0B; }
.tbtn.amber:hover { background: #F59E0B; color: #fff; }
.tbtn.red { border-color: #EF4444; color: #EF4444; }
.tbtn.red:hover { background: #EF4444; color: #fff; }
.tbtn.cyan { border-color: #06B6D4; color: #06B6D4; }
.tbtn.cyan:hover { background: #06B6D4; color: #fff; }
.tbtn-icon { width: 26px; padding: 0; justify-content: center; font-size: 14px; }
.sep { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; }
#zoom-lbl { font-size: 10px; color: var(--text-dim); min-width: 32px; text-align: center; }

/* ── Mode toggle group ───────────────────────────────────────────────────────── */
.mode-grp { display: flex; }
.mode-grp > .tbtn { border-radius: 0; }
.mode-grp > .tbtn:first-child { border-radius: 4px 0 0 4px; }
.mode-grp > .tbtn:last-child  { border-radius: 0 4px 4px 0; border-left-width: 0; }

/* ── Selection rectangle ─────────────────────────────────────────────────────── */
#sel-rect { position: absolute; pointer-events: none; display: none; border: 1.5px dashed #6366F1; background: rgba(99,102,241,.07); border-radius: 2px; z-index: 10; }
#cwrap.selectmode { cursor: crosshair; }

/* ── Multi-selected table highlight ─────────────────────────────────────────── */
.etb.multi-sel { box-shadow: 0 0 0 2px #818CF8, 0 2px 12px rgba(0,0,0,.25), 0 0 16px rgba(99,102,241,.2); }

/* ── Prevent accidental text selection during canvas interaction ─────────────── */
#toolbar, #cwrap, #sidebar, #sbar, #app-footer, #legend { user-select: none; }

/* ── Rel type bar ─────────────────────────────────────────────────────────── */
#rel-bar { display: none; align-items: center; gap: 4px; padding: 2px 7px; background: var(--bg-deep); border: 1px solid #4F46E5; border-radius: 5px; }
#rel-bar > span { font-size: 10px; color: var(--text-muted); }
.rtype { padding: 2px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-app); color: var(--text-muted); cursor: pointer; font-size: 10px; font-weight: bold; transition: all .12s; }
.rtype.active { background: #4F46E5; border-color: #4F46E5; color: #fff; }
#rel-step { font-size: 10px; color: #6366F1; min-width: 170px; }

/* ── Main area (sidebar + canvas) ────────────────────────────────────────── */
#main-area { display: flex; flex: 1; overflow: hidden; }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
#sidebar { width: 240px; min-width: 240px; background: var(--bg-sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; transition: width .2s, min-width .2s; flex-shrink: 0; }
#sidebar.collapsed { width: 0; min-width: 0; }
.sb-header { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.sb-header > span { font-size: 11px; color: var(--text-dim); font-weight: bold; letter-spacing: .4px; }
#btn-sb-toggle { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 12px; padding: 2px; }
#btn-sb-toggle:hover { color: var(--text); }
#sb-content { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 0; }
#sb-content::-webkit-scrollbar { width: 4px; }
#sb-content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.sb-group-hdr { display: flex; align-items: center; gap: 6px; padding: 5px 10px; cursor: pointer; font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--border); margin-top: 2px; }
.sb-group-hdr:hover { background: var(--sb-hover); }
.sb-group-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.sb-group-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-group-count { font-size: 9px; color: var(--text-dim); }
.sb-group-toggle { background: none; border: none; cursor: pointer; color: var(--text-dim); font-size: 8px; padding: 1px 3px; border-radius: 2px; transition: color .12s; flex-shrink: 0; }
.sb-group-toggle:hover { color: var(--text); }
.sb-group-hdr.collapsed .sb-group-name,
.sb-group-hdr.collapsed .sb-group-count { opacity: .6; }
.sb-tbl { display: flex; align-items: center; gap: 5px; padding: 4px 10px 4px 16px; cursor: pointer; font-size: 11px; color: var(--text-muted); }
.sb-tbl:hover { background: var(--sb-hover); color: var(--text); }
.sb-tbl.active { background: rgba(79,70,229,.15); color: #818CF8; }
.sb-tbl-expander { font-size: 8px; width: 10px; flex-shrink: 0; color: var(--text-dim); transition: transform .15s; }
.sb-tbl-expander.open { transform: rotate(90deg); }
.sb-tbl-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-cols { display: none; }
.sb-cols.open { display: block; }
.sb-col { display: flex; align-items: center; gap: 4px; padding: 2px 10px 2px 32px; cursor: pointer; font-size: 10px; color: var(--text-dim); }
.sb-col:hover { background: var(--sb-hover); color: var(--text-muted); }
.sb-col-key { width: 16px; font-size: 8px; font-weight: bold; flex-shrink: 0; text-align: center; }
.sb-col-key.pk { color: #D97706; }
.sb-col-key.fk { color: #4F46E5; }
.sb-col-key.uq { color: #059669; }
.sb-col-cname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-col-type { color: var(--text-dim); font-size: 9px; flex-shrink: 0; }

/* ── Canvas ──────────────────────────────────────────────────────────────── */
#cwrap { flex: 1; position: relative; overflow: hidden; background: var(--canvas-bg); cursor: grab; transition: background .3s; }
#cwrap.grabbing { cursor: grabbing; }
#cwrap.relmode { cursor: crosshair; }
#board { position: absolute; transform-origin: 0 0; }
#svgl { position: absolute; top: 0; left: 0; overflow: visible; }
#svgh { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }

/* Feature 19: Grid toggle button active state */
#btn-grid.active { background: rgba(99,102,241,.2); border-color: var(--accent); color: var(--accent); }

/* ── Animated dashes ──────────────────────────────────────────────────────── */
@keyframes erd-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 26; } }
.rpath-anim { animation: erd-flow 0.8s linear infinite; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
/* Feature 31: Glow suave nas tabelas */
.etb {
  position: absolute;
  width: 244px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.25), 0 0 0 1px rgba(99,102,241,.06);
  font-size: 11px;
  transition: box-shadow .2s;
}
.etb:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,.3), 0 0 0 1px rgba(99,102,241,.15), 0 0 16px var(--glow-color);
}
.etb.sel {
  box-shadow: 0 0 0 2.5px #4F46E5, 0 2px 12px rgba(0,0,0,.25), 0 0 24px rgba(99,102,241,.3);
}
.etb.rel-src { box-shadow: 0 0 0 3px #6366F1, 0 0 24px rgba(99,102,241,.45) !important; }
.etb.rel-tgt { box-shadow: 0 0 0 2.5px #10B981, 0 0 20px rgba(16,185,129,.35) !important; }

.eth { color: #fff; font-weight: bold; font-size: 11px; padding: 6px 9px; cursor: move; display: flex; align-items: center; gap: 4px; min-height: 29px; }
.eth-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eth-btns { display: none; gap: 2px; flex-shrink: 0; }
.etb:hover .eth-btns, .etb.sel .eth-btns { display: flex; }
.eth-btn { width: 18px; height: 18px; border: none; border-radius: 3px; cursor: pointer; font-size: 10px; background: rgba(255,255,255,.18); color: #fff; display: flex; align-items: center; justify-content: center; transition: background .12s; }
.eth-btn:hover { background: rgba(255,255,255,.38); }
.eth-btn.del:hover { background: rgba(239,68,68,.7); }
.ebody { background: var(--tbl-body); }
.ecol { display: flex; align-items: center; padding: 1px 6px; border-bottom: 1px solid var(--col-border); height: 22px; gap: 3px; position: relative; }
.ckey { width: 20px; flex-shrink: 0; font-size: 9px; font-weight: bold; text-align: center; }
.ckey.pk { color: #D97706; }
.ckey.fk { color: #4F46E5; }
.ckey.uq { color: #059669; }
.cname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tbl-col-name); }
.ctype { color: var(--text-muted); font-size: 9px; flex-shrink: 0; max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cnn { color: #EF4444; font-size: 8px; flex-shrink: 0; font-weight: bold; margin-left: 1px; }
.cbl { color: #64748B; font-size: 8px; flex-shrink: 0; font-style: italic; margin-left: 1px; }
.cnote-icon { font-size: 9px; flex-shrink: 0; cursor: help; opacity: .75; }
.cnote-icon:hover { opacity: 1; }

/* Global tooltip */
#desc-tooltip {
  position: fixed;
  display: none;
  background: var(--bg-deep);
  color: var(--text-muted);
  font-size: 10px;
  padding: 5px 9px;
  border-radius: 5px;
  border: 1px solid var(--border);
  white-space: pre-wrap;
  max-width: 240px;
  z-index: 9999;
  pointer-events: none;
  line-height: 1.5;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}

/* ── Table footer (FK/IDX counts) ────────────────────────────────────────── */
.etfoot { display: flex; align-items: center; background: var(--tbl-body); border-top: 1px solid var(--col-border); padding: 3px 4px; gap: 4px; }
.etfoot-btn { display: flex; align-items: center; gap: 5px; padding: 3px 7px; border: 1px solid var(--col-border); border-radius: 5px; background: none; cursor: pointer; font-size: 9px; color: var(--text-muted); font-family: inherit; transition: all .12s; }
.etfoot-btn:hover { background: rgba(79,70,229,.1); border-color: #4F46E5; color: #818CF8; }
.etfoot-btn .ft-icon { display: inline-flex; width: 12px; height: 12px; align-items: center; justify-content: center; color: currentColor; }
.etfoot-btn .ft-svg { width: 12px; height: 12px; display: block; }
.etfoot-btn .ft-label { line-height: 1; }
.etfoot-btn .ft-badge {
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(15,23,42,.08);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: bold;
  box-shadow: 0 1px 3px rgba(15,23,42,.16), inset 0 0 0 1px rgba(99,102,241,.12);
}
:root[data-theme="dark"] .etfoot-btn .ft-badge {
  background: rgba(148,163,184,.12);
  color: #E2E8F0;
  box-shadow: 0 1px 4px rgba(2,6,23,.35), inset 0 0 0 1px rgba(148,163,184,.18);
}

/* ── Legend ──────────────────────────────────────────────────────────────── */
#legend { position: absolute; bottom: 8px; left: 8px; background: var(--legend-bg); border: 1px solid var(--legend-border); border-radius: 6px; padding: 4px 8px; display: flex; flex-wrap: wrap; gap: 4px 9px; max-width: 440px; z-index: 50; font-size: 9px; color: var(--legend-text); pointer-events: none; backdrop-filter: blur(4px); }
.li { display: flex; align-items: center; gap: 3px; }
.ld { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
#rel-legend { position: absolute; bottom: 8px; right: 8px; background: var(--legend-bg); border: 1px solid var(--legend-border); border-radius: 6px; padding: 5px 9px; z-index: 50; font-size: 9px; color: var(--legend-text); pointer-events: none; display: flex; flex-direction: column; gap: 4px; backdrop-filter: blur(4px); }
.rli { display: flex; align-items: center; gap: 5px; }

/* ── Status bar ──────────────────────────────────────────────────────────── */
#sbar { padding: 3px 10px; background: var(--bg-toolbar); border-top: 1px solid var(--bg-app); font-size: 10px; color: var(--text-dim); flex-shrink: 0; display: flex; gap: 14px; align-items: center; }
#sb-save { font-size: 10px; margin-left: auto; }

/* ── Shortcuts modal ─────────────────────────────────────────────────────────── */
.sc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sc-group { display: flex; flex-direction: column; gap: 4px; }
.sc-group-title { font-size: 10px; font-weight: bold; color: var(--accent); letter-spacing: .5px; text-transform: uppercase; margin-bottom: 4px; }
.sc-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--border); }
.sc-row:last-child { border-bottom: none; }
.sc-row kbd { background: var(--bg-deep); border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; font-size: 10px; font-family: inherit; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.sc-row span { font-size: 11px; color: var(--text-muted); }

/* Feature 25: Footer */
#app-footer {
  padding: 4px 12px;
  background: var(--bg-toolbar);
  border-top: 1px solid var(--border);
  font-size: 10px;
  color: var(--text-dim);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.footer-left, .footer-right { display: flex; align-items: center; gap: 6px; }
.footer-left { flex-wrap: wrap; min-width: 0; }
.footer-right { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.footer-lang-icon { font-size: 11px; color: var(--text-dim); }
.footer-lang-select {
  height: 24px;
  padding: 0 24px 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-deep);
  color: var(--text);
  font-size: 10px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
}
.footer-lang-select:hover { border-color: var(--text-dim); color: var(--text); }
.footer-lang-select:focus { border-color: var(--border-focus); box-shadow: 0 0 0 2px rgba(99,102,241,.12); }
.footer-link {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--accent);
  font-size: 10px;
  font-family: inherit;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color .15s, color .15s;
}
.footer-link:hover { color: var(--text); text-decoration-color: var(--text-dim); }

/* ── Modals ──────────────────────────────────────────────────────────────── */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 500; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); }
.modal { background: var(--bg-modal); border: 1px solid var(--border); border-radius: 12px; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(99,102,241,.08); max-height: 90vh; }
.modal-hdr { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.modal-hdr h2 { font-size: 13px; color: var(--text); }
.modal-body { padding: 14px 16px; overflow-y: auto; flex: 1; }
.modal-ftr { padding: 10px 16px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.modal-xbtn { padding: 3px 9px !important; font-size: 12px !important; }
.frow { margin-bottom: 10px; }
.flbl { font-size: 10px; color: var(--text-muted); margin-bottom: 4px; display: block; letter-spacing: .2px; }

/* Feature 27: Modern inputs */
.finp, .fsel {
  width: 100%;
  padding: 7px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 11px;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.finp:hover, .fsel:hover { border-color: var(--text-dim); }
.finp:focus, .fsel:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }

/* ── Column rows (Feature 27: Alignment fix) ─────────────────────────────── */
#clist { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; }
.crow-wrap { display: flex; flex-direction: column; }
.crow { display: flex; gap: 4px; align-items: center; padding: 2px 0; }

/* Feature 27: Modern column inputs */
.crow select, .crow input[type=text] {
  padding: 4px 7px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  font-size: 11px;
  font-family: inherit;
  min-width: 0;
  transition: border-color .15s, box-shadow .15s;
  height: 28px;
}
.crow select:hover, .crow input[type=text]:hover { border-color: var(--text-dim); }
.crow select:focus, .crow input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 2px rgba(99,102,241,.15);
}

.ck-sel { width: 52px; flex-shrink: 0; }
.cn-inp { flex: 1; }
.ct-inp { width: 110px; flex-shrink: 0; }

/* Feature 27: Modern checkboxes */
.crow input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  background: var(--bg-input);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all .15s;
}
.crow input[type=checkbox]:hover { border-color: var(--accent); }
.crow input[type=checkbox]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.crow input[type=checkbox]:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 4px;
  width: 5px;
  height: 8px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
.crow input[type=checkbox]:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(99,102,241,.25);
}

.cdel {
  width: 22px;
  height: 22px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .15s;
}
.cdel:hover { border-color: #EF4444; color: #EF4444; background: rgba(239,68,68,.08); }

/* Feature 28: Confirming state for delete button */
.cdel.confirming {
  border-color: #F59E0B;
  color: #F59E0B;
  background: rgba(245,158,11,.12);
  animation: pulse-warn .6s ease infinite alternate;
}
@keyframes pulse-warn {
  from { box-shadow: 0 0 0 0 rgba(245,158,11,.3); }
  to   { box-shadow: 0 0 0 4px rgba(245,158,11,0); }
}

.cdesc-btn { width: 22px; height: 22px; background: none; border: 1px solid var(--border); border-radius: 5px; color: var(--text-dim); cursor: pointer; font-size: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .15s; }
.cdesc-btn:hover { border-color: #8B5CF6; color: #8B5CF6; }
.cdesc-btn.open { border-color: #8B5CF6; color: #8B5CF6; background: rgba(139,92,246,.1); }
.crow-desc textarea {
  width: calc(100% - 14px);
  margin: 3px 0 4px 14px;
  padding: 5px 8px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-muted);
  font-size: 10px;
  font-family: inherit;
  resize: vertical;
  min-height: 40px;
  transition: border-color .15s;
}
.crow-desc textarea:focus { outline: none; border-color: #8B5CF6; box-shadow: 0 0 0 2px rgba(139,92,246,.12); }
.drag-h { width: 13px; color: var(--text-dim); cursor: ns-resize; font-size: 11px; text-align: center; flex-shrink: 0; user-select: none; opacity: .5; }
.drag-h:hover { opacity: 1; }

/* Feature 27: Column header alignment */
.clist-hdr {
  display: flex;
  gap: 4px;
  font-size: 9px;
  color: var(--text-dim);
  padding: 2px 0 4px 0;
  align-items: center;
  letter-spacing: .2px;
}
.ch-drag  { width: 13px; flex-shrink: 0; }
.ch-key   { width: 52px; flex-shrink: 0; }
.ch-name  { flex: 1; }
.ch-type  { width: 110px; flex-shrink: 0; }
.ch-nn    { width: 16px; text-align: center; flex-shrink: 0; }
.ch-bl    { width: 16px; text-align: center; flex-shrink: 0; }
.ch-actions { width: 50px; flex-shrink: 0; }

/* Feature 30: Full-width add column button */
.btn-add-col-wide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
  padding: 8px 12px;
  background: none;
  border: 1.5px dashed var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 11px;
  font-family: inherit;
  transition: all .18s;
  letter-spacing: .2px;
}
.btn-add-col-wide:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(99,102,241,.06);
}
.btn-add-col-wide:active { transform: scale(.99); }
.btn-add-col-sm { padding: 6px 10px; font-size: 10px; margin-top: 5px; }

/* Feature 30+35: Insert-between-columns zone (full-width button) */
.col-insert-zone {
  height: 4px;
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: height .15s;
  overflow: hidden;
}
.col-insert-zone:hover { height: 30px; }
.col-insert-line {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0;
  transition: opacity .15s;
}
.col-insert-zone:hover .col-insert-line { opacity: 1; }
.col-insert-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: rgba(99,102,241,.08);
  border: 1.5px dashed var(--accent);
  border-radius: 5px;
  color: var(--accent);
  font-size: 10px;
  padding: 5px 12px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background .12s;
  letter-spacing: .2px;
}
.col-insert-btn:hover { background: rgba(99,102,241,.18); }

/* ── Defaults modal ──────────────────────────────────────────────────────── */
.dsection { margin-bottom: 16px; }
.dsec-lbl { font-size: 11px; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.dsec-lbl::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ── Groups modal ────────────────────────────────────────────────────────── */
.grp-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.grp-item { display: flex; align-items: center; gap: 8px; padding: 7px 9px; background: var(--bg-deep); border: 1px solid var(--border); border-radius: 8px; }
.grp-swatch {
  --grp-color: #4F46E5;
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 4px 14px rgba(15,23,42,.16);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.grp-swatch:hover {
  transform: translateY(-1px);
  border-color: rgba(99,102,241,.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 8px 20px rgba(15,23,42,.22);
}
.grp-swatch:focus-within {
  border-color: var(--border-focus);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 0 3px rgba(99,102,241,.12);
}
.grp-swatch-core {
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  background: var(--grp-color);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.18), 0 0 0 1px rgba(15,23,42,.12);
  pointer-events: none;
}
.grp-swatch input[type=color] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}
.grp-swatch input[type=color]::-webkit-color-swatch-wrapper,
.grp-add-color input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.grp-swatch input[type=color]::-webkit-color-swatch,
.grp-add-color input[type=color]::-webkit-color-swatch { border: none; border-radius: 999px; }
.grp-swatch input[type=color]::-moz-color-swatch,
.grp-add-color input[type=color]::-moz-color-swatch { border: none; border-radius: 999px; }
.grp-name-inp { flex: 1; padding: 4px 8px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 5px; color: var(--text); font-size: 11px; font-family: inherit; transition: border-color .15s; }
.grp-name-inp:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 2px rgba(99,102,241,.12); }
.grp-del-btn { width: 24px; height: 24px; background: none; border: 1px solid var(--border); border-radius: 7px; color: var(--text-dim); cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .12s; }
.grp-del-btn:hover { border-color: #EF4444; color: #EF4444; transform: translateY(-1px); }
.grp-del-btn.confirming { border-color: #F59E0B; color: #F59E0B; background: rgba(245,158,11,.08); }
.grp-add-row { display: flex; gap: 7px; margin-bottom: 10px; }
.grp-add-color {
  --grp-color: #4F46E5;
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  flex: 0 0 auto;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 4px 14px rgba(15,23,42,.16);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.grp-add-color:hover {
  transform: translateY(-1px);
  border-color: rgba(99,102,241,.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 8px 20px rgba(15,23,42,.22);
}
.grp-add-color:focus-within {
  border-color: var(--border-focus);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 0 3px rgba(99,102,241,.12);
}
.grp-add-color::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  background: var(--grp-color);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.18), 0 0 0 1px rgba(15,23,42,.12);
  pointer-events: none;
}
.grp-add-color input[type=color] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}
.grp-add-row input[type=text] { flex: 1; padding: 6px 9px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 5px; color: var(--text); font-size: 11px; font-family: inherit; transition: border-color .15s; }
.grp-add-row input[type=text]:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 2px rgba(99,102,241,.12); }

/* ── FK / IDX detail panels ──────────────────────────────────────────────── */
.detail-popup { position: fixed; background: var(--bg-popup); border: 1px solid var(--border); border-radius: 10px; padding: 10px; z-index: 700; box-shadow: 0 8px 30px rgba(0,0,0,.5); min-width: 280px; max-width: 380px; max-height: 420px; overflow-y: auto; font-size: 11px; color: var(--text); }
.detail-popup h4 { font-size: 11px; color: var(--text); margin-bottom: 8px; border-bottom: 1px solid var(--border); padding-bottom: 6px; display: flex; align-items: center; justify-content: space-between; }
.detail-popup h4 button { background: none; border: none; cursor: pointer; color: var(--text-dim); font-size: 13px; }
.detail-popup h4 button:hover { color: var(--text); }
.dp-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.dp-item { display: flex; align-items: center; gap: 6px; padding: 5px 7px; background: var(--bg-deep); border: 1px solid var(--border); border-radius: 5px; }
.dp-item-info { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.dp-item-name { font-weight: bold; color: var(--text); font-size: 10px; }
.dp-item-meta { color: var(--text-dim); font-size: 9px; }
.dp-del-btn { width: 20px; height: 20px; background: none; border: 1px solid var(--border); border-radius: 3px; color: var(--text-dim); cursor: pointer; font-size: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .12s; }
.dp-del-btn:hover { border-color: #EF4444; color: #EF4444; }
.dp-empty { color: var(--text-dim); font-size: 10px; text-align: center; padding: 12px 0; }
.dp-add-form { border-top: 1px solid var(--border); padding-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.dp-add-form label { font-size: 10px; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.dp-add-form input[type=text] { width: 100%; padding: 5px 8px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-size: 10px; font-family: inherit; transition: border-color .15s; }
.dp-add-form input[type=text]:focus { outline: none; border-color: var(--border-focus); }
.dp-add-form input[type=checkbox] { accent-color: #4F46E5; }
.dp-add-btn { align-self: flex-end; padding: 4px 10px; background: #4F46E5; border: none; border-radius: 4px; color: #fff; cursor: pointer; font-size: 10px; transition: background .12s; }
.dp-add-btn:hover { background: #4338CA; }
.dp-badge { font-size: 8px; padding: 1px 5px; border-radius: 8px; font-weight: bold; background: rgba(79,70,229,.2); color: #818CF8; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.bp { padding: 6px 14px; background: #4F46E5; border: none; border-radius: 5px; color: #fff; cursor: pointer; font-size: 11px; transition: background .12s; }
.bp:hover { background: #4338CA; }
.bs { padding: 6px 14px; background: var(--bg-app); border: 1px solid var(--border); border-radius: 5px; color: var(--text-muted); cursor: pointer; font-size: 11px; transition: all .12s; }
.bs:hover { background: var(--border); color: var(--text); }
.bd { padding: 6px 14px; background: none; border: 1px solid #EF4444; border-radius: 5px; color: #EF4444; cursor: pointer; font-size: 11px; transition: all .12s; }
.bd:hover { background: #EF4444; color: #fff; }

/* ── Toast ───────────────────────────────────────────────────────────────── */
#toast { position: fixed; bottom: 36px; right: 20px; background: var(--bg-deep); border: 1px solid var(--border); border-radius: 8px; padding: 8px 14px; font-size: 11px; color: var(--text-muted); z-index: 2000; opacity: 0; transition: opacity .25s; pointer-events: none; box-shadow: 0 4px 20px rgba(0,0,0,.4); }
#toast.on { opacity: 1; }

/* ── Rel popup ───────────────────────────────────────────────────────────── */
#rmodal { position: fixed; background: var(--bg-popup); border: 1px solid var(--border); border-radius: 10px; padding: 14px; z-index: 600; box-shadow: 0 8px 30px rgba(0,0,0,.5); min-width: 234px; font-size: 11px; color: var(--text); }
#rmodal h3 { font-size: 11px; margin-bottom: 7px; color: var(--text); }
.rmod-badge { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 10px; font-weight: bold; background: #4F46E5; color: #fff; margin-bottom: 7px; }
.rmod-row { display: flex; gap: 5px; margin-bottom: 6px; }
.rmod-row .bs { padding: 3px 8px; font-size: 10px; }
.rmod-row .bs.active { background: #4F46E5; border-color: #4F46E5; color: #fff; }
.rmod-info { font-size: 10px; color: var(--text-muted); margin-bottom: 9px; line-height: 1.7; }
.rmod-section { font-size: 9px; color: var(--text-dim); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .4px; }
.rmod-type-row { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 9px; }
.rmod-type-btn { padding: 3px 8px; border: 1px solid var(--border); border-radius: 10px; background: none; color: var(--text-muted); font-size: 9px; cursor: pointer; font-family: inherit; transition: all .12s; }
.rmod-type-btn.active { background: #4F46E5; border-color: #4F46E5; color: #fff; }

/* ── SVG handles ─────────────────────────────────────────────────────────── */
.rel-handle { cursor: move; pointer-events: fill; }
.rel-handle:active { cursor: move; }
.wp-handle { cursor: move; pointer-events: fill; }
.wp-handle:active { cursor: move; }
.wp-add-hint { cursor: pointer; pointer-events: fill; }

/* ── Feature 29: Global Dialog System ────────────────────────────────────── */
#dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .18s;
}
#dialog-overlay.dialog-visible { opacity: 1; }

#dialog-box {
  background: var(--bg-modal);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,.65), 0 0 0 1px rgba(99,102,241,.12);
  width: 400px;
  max-width: 92vw;
  transform: translateY(10px);
  transition: transform .18s;
  overflow: hidden;
}
#dialog-overlay.dialog-visible #dialog-box { transform: translateY(0); }
#dialog-box[data-size="sm"] { width: 320px; }
#dialog-box[data-size="lg"] { width: 580px; }

#dialog-hdr {
  padding: 16px 18px 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border);
}
#dialog-icon  { font-size: 18px; line-height: 1; }
#dialog-title { flex: 1; font-size: 13px; font-weight: bold; color: var(--text); }
#dialog-xbtn  { background: none; border: none; cursor: pointer; color: var(--text-dim); font-size: 14px; padding: 3px 6px; border-radius: 4px; transition: all .12s; }
#dialog-xbtn:hover { color: var(--text); background: var(--border); }

#dialog-body {
  padding: 16px 18px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.7;
  max-height: 55vh;
  overflow-y: auto;
}

#dialog-ftr {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ── Features 21 & 23: Context Menu ─────────────────────────────────────── */
#ctx-menu, .ctx-menu {
  position: fixed;
  z-index: 2500;
  background: var(--bg-popup);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 5px;
  box-shadow: 0 10px 35px rgba(0,0,0,.55), 0 0 0 1px rgba(99,102,241,.1);
  min-width: 186px;
  font-size: 11px;
}
.ctx-submenu {
  position: fixed;
  z-index: 2600;
}
.ctx-item {
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: background .1s, color .1s;
  user-select: none;
}
.ctx-item:hover { background: var(--sb-hover); color: var(--text); }
.ctx-item.danger { color: #EF4444; }
.ctx-item.danger:hover { background: rgba(239,68,68,.1); }
.ctx-item.disabled { opacity: .4; cursor: not-allowed; }
.ctx-item.disabled:hover { background: none; color: var(--text-muted); }
.ctx-icon { width: 16px; text-align: center; font-size: 12px; flex-shrink: 0; }
.ctx-label { flex: 1; }
.ctx-hint { font-size: 9px; color: var(--text-dim); margin-left: auto; }
.ctx-arrow { font-size: 8px; color: var(--text-dim); margin-left: auto; }
.ctx-sep { height: 1px; background: var(--border); margin: 4px 0; }
.ctx-section-hdr {
  padding: 5px 12px 2px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
  pointer-events: none;
  user-select: none;
}

/* ── Feature 20: Relation label box (SVG foreign object fallback via CSS) ── */
.rel-type-label-box {
  pointer-events: none;
}

/* ── Features 40+41: Export / Import option modal ───────────────────────── */
.exp-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.exp-option {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-deep);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: all .15s;
  font-family: inherit;
  color: var(--text);
}
.exp-option:hover {
  border-color: var(--accent);
  background: rgba(99,102,241,.07);
  box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}
.exp-option-disabled {
  opacity: .62;
  cursor: not-allowed;
}
.exp-option-disabled:hover {
  border-color: var(--border);
  background: var(--bg-deep);
  box-shadow: none;
}
.exp-opt-icon { font-size: 22px; line-height: 1; flex-shrink: 0; margin-top: 2px; }
.exp-opt-content { display: flex; flex-direction: column; gap: 4px; }
.exp-opt-title-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.exp-opt-title { font-size: 12px; font-weight: bold; color: var(--text); }
.exp-opt-title em { font-style: normal; color: var(--accent); }
.exp-opt-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(245,158,11,.28);
  background: rgba(245,158,11,.08);
  color: #F59E0B;
  font-size: 9px;
  font-weight: bold;
  white-space: nowrap;
}
.exp-opt-desc { font-size: 10px; color: var(--text-muted); line-height: 1.55; }

/* ── Versions modal ─────────────────────────────────────────────────────── */
.versions-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.versions-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 10px;
  color: var(--text-muted);
}
.versions-meta strong {
  font-size: 12px;
  color: var(--text);
}
.versions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.version-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-deep);
  padding: 12px;
}
.version-item.current {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(99,102,241,.15);
}
.version-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
}
.version-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.version-title strong {
  font-size: 11px;
  color: var(--text);
}
.version-badges {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.version-badge {
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 9px;
  color: var(--text-muted);
}
.version-badge.current {
  border-color: var(--accent);
  color: var(--accent);
}
.version-desc {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 8px;
}
.version-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 9px;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.version-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.version-empty {
  padding: 20px 12px;
  text-align: center;
  font-size: 11px;
  color: var(--text-dim);
  border: 1px dashed var(--border);
  border-radius: 8px;
}

/* ── Feature 25: Sobre mim modal ────────────────────────────────────────── */
.about-modal { border-color: rgba(99,102,241,.4) !important; }
.about-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 20px !important;
  gap: 8px;
}
.about-logo {
  display: block;
  width: min(100%, 320px);
  height: auto;
  margin-bottom: 8px;
}
.about-name  { font-size: 16px; font-weight: bold; color: var(--text); text-align: center; }
.about-role  { font-size: 12px; color: var(--accent); text-align: center; }
.about-spec  { font-size: 11px; color: var(--text-muted); text-align: center; }
.about-links { display: flex; gap: 10px; margin-top: 8px; }
.about-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 11px;
  font-weight: bold;
  transition: all .15s;
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.about-linkedin:hover { background: rgba(10,102,194,.15); border-color: #0A66C2; color: #0A66C2; }
.about-github:hover   { background: rgba(139,148,158,.1); border-color: var(--text-muted); color: var(--text); }
.about-divider { width: 100%; height: 1px; background: var(--border); margin: 10px 0 6px; }
.about-project { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.about-proj-name { font-size: 13px; font-weight: bold; color: var(--text); }
.about-proj-version { font-size: 10px; color: var(--accent); background: rgba(99,102,241,.12); border: 1px solid rgba(99,102,241,.25); border-radius: 8px; padding: 1px 8px; }
.about-proj-desc { font-size: 10px; color: var(--text-dim); text-align: center; line-height: 1.6; }