/* ============================================================
   ⚒ AETHORIA BUILDER – v2
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { overflow: hidden; background: #07050a; }

#b-app { display: flex; flex-direction: column; height: 100vh; font-family: 'Cinzel', serif; color: var(--parchment); }

/* ── TOPBAR ──────────────────────────────────────────────── */
#b-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px; height: 50px;
  background: rgba(8,4,1,0.97);
  border-bottom: 1px solid rgba(212,146,10,0.63);
  flex-shrink: 0; z-index: 10;
}
.b-back-btn {
  font-size: 11px; color: rgba(212,146,10,1.00); text-decoration: none;
  letter-spacing: 0.1em; padding: 5px 10px;
  border: 1px solid rgba(212,146,10,0.55); white-space: nowrap;
  transition: all 0.2s;
}
.b-back-btn:hover { color: var(--gold-bright); border-color: rgba(212,146,10,1.00); }
.b-logo { font-family: 'Cinzel Decorative', serif; font-size: 13px; color: var(--gold-bright); letter-spacing: 0.14em; white-space: nowrap; }
.b-name-input {
  flex: 1; min-width: 0; max-width: 280px;
  background: rgba(0,0,0,0.5); border: none; border-bottom: 1px solid rgba(212,146,10,0.81);
  color: rgba(244,226,184,0.85); font-family: 'Cinzel', serif; font-size: 13px;
  padding: 6px 10px; outline: none; letter-spacing: 0.06em; caret-color: var(--gold);
}
.b-name-input:focus { border-bottom-color: var(--gold); }
.b-top-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
#b-user-badge { font-size: 10px; color: rgba(212,146,10,1.00); letter-spacing: 0.14em; white-space: nowrap; }

/* ── BUTTONS ─────────────────────────────────────────────── */
.b-btn {
  font-family: 'Cinzel', serif; font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; padding: 7px 16px; cursor: pointer; border: 1px solid; transition: all 0.2s;
}
.b-btn-primary { background: linear-gradient(160deg,#2e1a06,#1a0d02); border-color: var(--gold); color: var(--gold-bright); }
.b-btn-primary:hover { background: linear-gradient(160deg,#3d2206,#251206); box-shadow: 0 0 16px rgba(212,146,10,0.70); }
.b-btn-ghost { background: transparent; border-color: rgba(212,146,10,0.63); color: rgba(212,146,10,1.00); }
.b-btn-ghost:hover { border-color: rgba(212,146,10,1.00); color: var(--gold-bright); }
.b-btn-danger { background: rgba(60,10,10,0.5); border-color: rgba(180,60,60,0.35); color: rgba(220,120,120,0.8); }
.b-btn-danger:hover { border-color: rgba(200,70,70,0.6); color: #ff9090; }
.b-btn-sm { padding: 5px 10px; font-size: 10px; }
.b-icon-btn {
  background: none; border: 1px solid rgba(212,146,10,0.59); color: rgba(212,146,10,1.00);
  width: 22px; height: 22px; cursor: pointer; font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0;
}
.b-icon-btn:hover { border-color: rgba(212,146,10,1.00); color: var(--gold-bright); }

/* ── BODY LAYOUT ─────────────────────────────────────────── */
#b-body { display: flex; flex: 1; overflow: hidden; }

/* ── LEFT PANEL ──────────────────────────────────────────── */
#b-left {
  width: 190px; flex-shrink: 0;
  border-right: 1px solid rgba(212,146,10,0.41);
  display: flex; flex-direction: column; overflow: hidden;
}
.b-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-bottom: 1px solid rgba(212,146,10,0.37);
  font-size: 10px; font-weight: 600; letter-spacing: 0.18em;
  color: rgba(212,146,10,1.00); background: rgba(10,6,2,0.7); flex-shrink: 0;
}
.b-model-list { overflow-y: auto; flex: 1; }
.b-model-list::-webkit-scrollbar { width: 2px; }
.b-model-list::-webkit-scrollbar-thumb { background: rgba(212,146,10,0.48); }
.b-model-item {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  border-bottom: 1px solid rgba(212,146,10,0.28); cursor: pointer; transition: background 0.15s;
}
.b-model-item:hover { background: rgba(212,146,10,0.28); }
.b-model-item.active { background: rgba(212,146,10,0.39); border-left: 2px solid var(--gold); padding-left: 10px; }
.b-model-item-name { font-size: 11px; color: rgba(212,146,10,1.00); letter-spacing: 0.04em; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-model-item-meta { font-size: 9px; color: rgba(212,146,10,0.77); }
.b-model-empty { padding: 12px; font-size: 10px; color: rgba(212,146,10,0.70); letter-spacing: 0.08em; }

/* ── CENTER: VIEWPORT ────────────────────────────────────── */
#b-center { flex: 1; position: relative; background: #0a0605; overflow: hidden; }
#b-viewport { position: absolute; inset: 0; }
#b-viewport canvas { display: block; }
#b-viewport-hint {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  font-size: 10px; color: rgba(212,146,10,0.59); letter-spacing: 0.1em; pointer-events: none; white-space: nowrap;
}
#b-axis-label {
  position: absolute; top: 12px; left: 12px;
  display: flex; gap: 8px; font-family: monospace; font-size: 11px; font-weight: bold;
  pointer-events: none; opacity: 0.55;
}

/* ── RIGHT PANEL ─────────────────────────────────────────── */
#b-right {
  width: 240px; flex-shrink: 0;
  border-left: 1px solid rgba(212,146,10,0.41);
  display: flex; flex-direction: column; overflow-y: auto;
}
#b-right::-webkit-scrollbar { width: 2px; }
#b-right::-webkit-scrollbar-thumb { background: rgba(212,146,10,0.48); }

/* ── MESH LIST ───────────────────────────────────────────── */
.b-mesh-list { border-bottom: 1px solid rgba(212,146,10,0.37); }
.b-mesh-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-bottom: 1px solid rgba(212,146,10,0.28); cursor: pointer; transition: background 0.15s;
}
.b-mesh-item:hover { background: rgba(212,146,10,0.28); }
.b-mesh-item.active { background: rgba(212,146,10,0.39); }
.b-mesh-dot { width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.12); }
.b-mesh-label { font-size: 11px; color: rgba(212,146,10,1.00); flex: 1; }
.b-mesh-shape { font-size: 13px; color: rgba(212,146,10,0.92); }
.b-mesh-del { background: none; border: none; color: rgba(200,80,80,0.4); cursor: pointer; font-size: 14px; padding: 0 2px; transition: color 0.15s; }
.b-mesh-del:hover { color: rgba(220,100,100,0.8); }
.b-mesh-empty { padding: 10px 12px; font-size: 10px; color: rgba(212,146,10,0.70); }

/* ── PROPS FORM ──────────────────────────────────────────── */
#b-props { padding: 10px 12px; flex: 1; }
.b-props-empty { font-size: 10px; color: rgba(212,146,10,0.70); letter-spacing: 0.08em; text-align: center; padding: 20px 10px; line-height: 1.8; }
.b-prop-group { margin-bottom: 14px; }
.b-prop-label { font-size: 9px; font-weight: 600; letter-spacing: 0.2em; color: rgba(212,146,10,1.00); margin-bottom: 7px; text-transform: uppercase; }

/* Shape selector */
.b-shape-row { display: flex; flex-wrap: wrap; gap: 4px; }
.b-shape-opt {
  flex: 1; min-width: 60px; padding: 6px 4px; background: rgba(0,0,0,0.4);
  border: 1px solid rgba(212,146,10,0.48); color: rgba(212,146,10,1.00);
  font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.06em;
  cursor: pointer; transition: all 0.15s; text-align: center;
}
.b-shape-opt:hover { border-color: rgba(212,146,10,0.92); color: rgba(212,146,10,1.00); }
.b-shape-opt.active { background: rgba(212,146,10,0.37); border-color: var(--gold); color: var(--gold-bright); }

/* Color presets */
.b-color-presets { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.b-color-dot {
  width: 22px; height: 22px; border-radius: 3px; cursor: pointer;
  border: 2px solid transparent; transition: transform 0.1s, border-color 0.1s;
}
.b-color-dot:hover { transform: scale(1.18); }
.b-color-dot.active { border-color: #fff; }
.b-color-custom { display: flex; align-items: center; gap: 8px; }
.b-color-custom input[type=color] {
  width: 36px; height: 30px; padding: 2px; border: 1px solid rgba(212,146,10,0.70);
  background: transparent; cursor: pointer; border-radius: 3px;
}
.b-hex-label { font-family: monospace; font-size: 12px; color: rgba(212,146,10,1.00); }

/* Coord grid */
.b-coord-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.b-coord-cell { display: flex; flex-direction: column; gap: 3px; }
.b-axis-tag {
  font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-align: center;
  padding: 2px 0;
}
.b-axis-x { color: rgba(230,100,100,0.8); }
.b-axis-y { color: rgba(100,200,100,0.8); }
.b-axis-z { color: rgba(100,130,230,0.8); }
.b-num-input {
  width: 100%; background: rgba(0,0,0,0.45); border: 1px solid rgba(212,146,10,0.55);
  border-bottom: 1px solid rgba(212,146,10,1.00); color: rgba(244,226,184,0.85);
  font-family: 'Cinzel', serif; font-size: 12px; padding: 5px 6px;
  outline: none; caret-color: var(--gold); text-align: center; transition: border-color 0.2s;
}
.b-num-input:focus { border-bottom-color: var(--gold-bright); background: rgba(212,146,10,0.24); }
/* hide number arrows */
.b-num-input::-webkit-inner-spin-button,
.b-num-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.b-num-input[type=number] { -moz-appearance: textfield; }

/* Rotation slider */
#b-props input[type=range] {
  flex: 1; height: 4px; accent-color: var(--gold); cursor: pointer;
}

/* Share panel */
.b-share-panel { padding: 10px 12px; border-top: 1px solid rgba(212,146,10,0.37); }
.b-check-row { display: flex; gap: 8px; cursor: pointer; font-size: 10px; color: rgba(212,146,10,1.00); letter-spacing: 0.06em; line-height: 1.5; align-items: flex-start; }
.b-check-row input { accent-color: var(--gold); margin-top: 2px; cursor: pointer; }
.b-share-tag {
  display: flex; align-items: center; gap: 5px; padding: 2px 7px;
  background: rgba(212,146,10,0.37); border: 1px solid rgba(212,146,10,0.63);
  color: rgba(212,146,10,1.00); font-size: 10px;
}
.b-share-tag button { background: none; border: none; color: rgba(200,80,80,0.5); cursor: pointer; font-size: 12px; line-height: 1; padding: 0; }

/* Status */
#b-status { margin: 8px 12px; padding: 9px 12px; font-size: 11px; letter-spacing: 0.08em; border: 1px solid; }
#b-status.success { background: rgba(20,55,25,0.6); border-color: rgba(80,180,100,0.35); color: rgba(120,220,140,0.9); }
#b-status.error { background: rgba(55,15,15,0.6); border-color: rgba(180,60,60,0.35); color: rgba(220,110,110,0.9); }

/* ============================================================
   BUILDER – KLARES DESIGN
   ============================================================ */

/* Topbar */
#b-topbar { background: #120a03; border-bottom: 1px solid rgba(212,146,10,0.3); }
.b-logo { color: #f0b830; }
.b-back-btn { color: rgba(212,146,10,0.90); border-color: rgba(212,146,10,0.25); }
.b-back-btn:hover { color: #f0b830; border-color: rgba(212,146,10,0.90); }
.b-name-input { color: #f2e0b0; border-bottom-color: rgba(212,146,10,0.45); caret-color: #f0b830; }
.b-name-input::placeholder { color: rgba(212,146,10,0.3); }
.b-name-input:focus { border-bottom-color: #f0b830; }
#b-user-badge { color: rgba(242,224,176,0.55); }

/* Panel headers */
.b-panel-head { color: #f0b830; background: #0e0803; border-bottom-color: rgba(212,146,10,0.2); }

/* Icon Buttons */
.b-icon-btn { border-color: rgba(212,146,10,0.3); color: rgba(212,146,10,0.65); background: rgba(0,0,0,0.3); }
.b-icon-btn:hover { border-color: #d4920a; color: #f0b830; background: rgba(212,146,10,0.1); }

/* Model list */
.b-model-item:hover { background: rgba(212,146,10,0.08); }
.b-model-item.active { background: rgba(212,146,10,0.14); border-left: 2px solid #d4920a; padding-left: 10px; }
.b-model-item-name { color: rgba(242,224,176,0.88); font-size: 12px; }
.b-model-item-meta { color: rgba(212,146,10,0.5); font-size: 10px; }
.b-model-empty { color: rgba(212,146,10,0.5); font-size: 11px; padding: 14px 12px; }

/* Mesh list */
.b-mesh-item:hover { background: rgba(212,146,10,0.08); }
.b-mesh-item.active { background: rgba(212,146,10,0.14); }
.b-mesh-label { color: rgba(242,224,176,0.85); font-size: 11px; }
.b-mesh-shape { color: rgba(212,146,10,0.90); }
.b-mesh-del { color: rgba(220,100,100,0.5); }
.b-mesh-del:hover { color: rgba(240,120,120,0.9); }
.b-mesh-empty { color: rgba(212,146,10,0.5); font-size: 11px; padding: 12px; }

/* Props */
.b-props-empty { color: rgba(212,146,10,0.5); font-size: 11px; }
.b-prop-label { color: #e0a830; font-size: 10px; font-weight: 600; letter-spacing: 0.18em; }

/* Shape buttons */
.b-shape-opt { color: rgba(242,224,176,0.55); border-color: rgba(212,146,10,0.22); background: rgba(0,0,0,0.4); }
.b-shape-opt:hover { color: rgba(242,224,176,0.85); border-color: rgba(212,146,10,0.5); }
.b-shape-opt.active { background: rgba(212,146,10,0.14); border-color: #d4920a; color: #f0b830; }

/* Number inputs */
.b-num-input { color: #f2e0b0; border-color: rgba(212,146,10,0.2); border-bottom-color: rgba(212,146,10,0.5); background: rgba(0,0,0,0.5); }
.b-num-input:focus { border-bottom-color: #f0b830; background: rgba(212,146,10,0.06); color: #fff5d0; }

/* Axis labels */
.b-axis-x { color: #ff8080; }
.b-axis-y { color: #70ee90; }
.b-axis-z { color: #80a0ff; }

/* Color picker */
.b-hex-label { color: rgba(212,146,10,0.65); font-family: monospace; font-size: 12px; }

/* Rotation slider */
#b-props input[type=range] { accent-color: #d4920a; }

/* Buttons */
.b-btn-primary { background: linear-gradient(160deg,#2e1600,#180c00); border-color: #d4920a; color: #f0b830; }
.b-btn-primary:hover { background: linear-gradient(160deg,#3e2000,#221200); box-shadow: 0 0 18px rgba(212,146,10,0.3); }
.b-btn-ghost { border-color: rgba(212,146,10,0.28); color: rgba(242,224,176,0.6); }
.b-btn-ghost:hover { border-color: rgba(212,146,10,0.6); color: #f0b830; }
.b-btn-danger { background: rgba(50,8,8,0.6); border-color: rgba(200,60,60,0.4); color: rgba(240,130,130,0.9); }
.b-btn-danger:hover { border-color: rgba(220,80,80,0.7); color: #ff9090; }

/* Share */
.b-check-row { color: rgba(242,224,176,0.65); }
.b-share-tag { background: rgba(212,146,10,0.14); border-color: rgba(212,146,10,0.32); color: rgba(242,224,176,0.8); }
.b-share-tag button { color: rgba(220,100,100,0.55); }

/* Status */
#b-status.success { background: rgba(10,40,15,0.75); border-color: rgba(80,210,100,0.45); color: rgba(120,240,150,0.95); }
#b-status.error { background: rgba(50,8,8,0.75); border-color: rgba(210,70,70,0.45); color: rgba(240,120,120,0.95); }

/* Viewport hints */
#b-viewport-hint { color: rgba(212,146,10,0.28); }
#b-axis-label span { opacity: 0.75; }

/* ============================================================
   BUILDER – TOOLS, CONTEXT MENU, PROPS-EMPTY FIX
   ============================================================ */

/* Props empty – hell und klar */
.b-props-empty {
  color: rgba(242,224,176,0.65) !important;
  font-size: 12px !important;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 24px 14px;
  line-height: 2;
}

/* Viewport Tools Buttons */
#b-tools {
  position: absolute;
  top: 12px; right: 12px;
  display: flex; flex-direction: column; gap: 4px;
  z-index: 10;
}

.b-tool {
  width: 34px; height: 34px;
  background: rgba(12,7,2,0.88);
  border: 1px solid rgba(212,146,10,0.25);
  color: rgba(242,224,176,0.55);
  font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  border-radius: 4px;
}
.b-tool:hover { border-color: rgba(212,146,10,0.90); color: #f0b830; background: rgba(212,146,10,0.1); }
.b-tool.active { background: rgba(212,146,10,0.18); border-color: #d4920a; color: #f0b830; box-shadow: 0 0 10px rgba(212,146,10,0.2); }

/* Context Menu */
#ctx-menu {
  position: fixed;
  background: rgba(12,6,1,0.97);
  border: 1px solid rgba(212,146,10,0.4);
  box-shadow: 0 8px 28px rgba(0,0,0,0.7);
  z-index: 1000;
  min-width: 160px;
  padding: 4px 0;
}

.ctx-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 16px;
  background: none; border: none;
  color: rgba(242,224,176,0.82);
  font-family: 'Cinzel', serif; font-size: 11px;
  letter-spacing: 0.1em; cursor: pointer;
  text-align: left; transition: background 0.12s;
}
.ctx-item:hover { background: rgba(212,146,10,0.1); color: #f0b830; }
.ctx-item.ctx-danger { color: rgba(240,120,120,0.8); }
.ctx-item.ctx-danger:hover { background: rgba(180,40,40,0.15); color: #ff9090; }
.ctx-sep { height: 1px; background: rgba(212,146,10,0.18); margin: 3px 0; }

/* Move cursor im Move-Mode */
body.tool-move #b-viewport { cursor: crosshair; }
body.tool-select #b-viewport { cursor: default; }

/* ============================================================
   LESBARKEITS-FIX – Alle Texte klar und hell
   ============================================================ */

/* Alle Panel-Texte */
.b-panel-head        { color: #f0b830 !important; font-size: 11px !important; }
.b-model-item-name   { color: #f0dca0 !important; font-size: 12px !important; }
.b-model-item-meta   { color: rgba(240,200,120,0.65) !important; font-size: 10px !important; }
.b-model-empty       { color: rgba(240,210,140,0.7) !important; font-size: 12px !important; }
.b-mesh-label        { color: #f0dca0 !important; font-size: 12px !important; }
.b-mesh-shape        { color: rgba(240,190,80,0.75) !important; }
.b-mesh-empty        { color: rgba(240,210,140,0.7) !important; font-size: 12px !important; }
.b-prop-label        { color: #f0b830 !important; font-size: 10px !important; font-weight: 700 !important; }
.b-props-empty       { color: rgba(240,210,140,0.75) !important; font-size: 12px !important; line-height: 2 !important; }
.b-shape-opt         { color: rgba(240,200,140,0.7) !important; font-size: 9px !important; }
.b-shape-opt.active  { color: #f0b830 !important; }
.b-hex-label         { color: rgba(240,200,120,0.75) !important; }
.b-num-input         { color: #f0dca0 !important; font-size: 13px !important; }
.b-axis-tag          { font-size: 10px !important; font-weight: 700 !important; }
#b-user-badge        { color: rgba(240,200,120,0.7) !important; font-size: 11px !important; }
.b-back-btn          { color: rgba(240,200,100,0.7) !important; font-size: 12px !important; }
.b-logo              { color: #f5c840 !important; font-size: 14px !important; }
.b-check-row         { color: rgba(240,210,150,0.75) !important; font-size: 11px !important; }
.b-share-tag         { color: rgba(240,210,140,0.9) !important; font-size: 11px !important; }
#b-viewport-hint     { color: rgba(240,200,120,0.35) !important; }

/* Icon + Name Buttons */
.b-icon-btn  { color: rgba(240,200,100,0.8) !important; border-color: rgba(212,146,10,0.4) !important; font-size: 16px !important; }
.b-btn-ghost { color: rgba(240,200,120,0.8) !important; border-color: rgba(212,146,10,0.4) !important; }
.b-btn-primary { color: #f5c840 !important; border-color: #d4920a !important; }

/* Context Menu */
.ctx-item       { color: rgba(240,210,150,0.9) !important; font-size: 12px !important; }
.ctx-item:hover { color: #f5c840 !important; }
.ctx-item.ctx-danger { color: rgba(250,140,140,0.9) !important; }
.ctx-item.ctx-danger:hover { color: #ff9090 !important; }

/* ============================================================
   NEUE BUILDER ELEMENTE
   ============================================================ */

/* ── Add Dropdown ────────────────────────────────────────────── */
.b-panel-actions { display: flex; gap: 4px; align-items: center; }

#add-menu {
  background: rgba(14,8,2,0.98);
  border: 1px solid rgba(212,146,10,0.38);
  box-shadow: 0 6px 24px rgba(0,0,0,0.7);
  position: absolute; z-index: 100; left: 0; width: 190px;
}
.add-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 14px;
  background: none; border: none; border-bottom: 1px solid rgba(212,146,10,0.1);
  color: rgba(245,220,165,0.9) !important; font-family: 'Cinzel', serif;
  font-size: 12px !important; letter-spacing: 0.1em; cursor: pointer;
  transition: background 0.12s; text-align: left;
}
.add-menu-item:last-child { border-bottom: none; }
.add-menu-item:hover { background: rgba(212,146,10,0.12); color: #f5c840 !important; }

/* ── Scale Tool in Toolbar ───────────────────────────────────── */
.b-tool-sep { height: 1px; background: rgba(212,146,10,0.18); margin: 4px 0; }
.b-tool-info { padding: 4px 2px; text-align: center; }

/* ── Mesh Buttons (duplicate + delete neben Eintrag) ─────────── */
.b-mesh-btns { display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s; flex-shrink: 0; }
.b-mesh-item:hover .b-mesh-btns { opacity: 1; }
.b-mesh-item.active .b-mesh-btns { opacity: 1; }
.b-mesh-act {
  background: none; border: none; color: rgba(240,200,100,0.5);
  cursor: pointer; font-size: 13px; padding: 0 3px; line-height: 1;
  transition: color 0.15s;
}
.b-mesh-act:hover { color: #f5c840; }

/* Model Item Actions (duplicate + delete) */
.b-model-item-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s; flex-shrink: 0; }
.b-model-item:hover .b-model-item-actions { opacity: 1; }
.b-model-item.active .b-model-item-actions { opacity: 0.8; }

/* ── Scale Slider ────────────────────────────────────────────── */
.b-prop-group input[type=range] { accent-color: #d4920a; }

/* ── Rename Input (floating) ─────────────────────────────────── */
.rename-input {
  position: fixed;
  background: rgba(10,5,1,0.97);
  border: 1px solid #d4920a;
  color: #f5c840 !important;
  font-family: 'Cinzel', serif;
  font-size: 11px; padding: 3px 7px;
  outline: none; z-index: 500;
  box-shadow: 0 0 12px rgba(212,146,10,0.3);
}

/* ── Note Modal ──────────────────────────────────────────────── */
#note-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4,2,0,0.72); backdrop-filter: blur(3px);
}
.note-card {
  background: rgba(12,6,1,0.98);
  border: 1px solid rgba(212,146,10,0.38);
  box-shadow: 0 0 50px rgba(0,0,0,0.8);
  width: min(420px, 90vw); padding: 16px;
}
.note-header {
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'Cinzel', serif; font-size: 13px; color: #f0b830;
  letter-spacing: 0.12em; margin-bottom: 14px;
  padding-bottom: 10px; border-bottom: 1px solid rgba(212,146,10,0.2);
}
.note-header button {
  background: none; border: 1px solid rgba(212,146,10,0.25);
  color: rgba(212,146,10,0.55); font-size: 18px; cursor: pointer;
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.note-header button:hover { border-color: #d4920a; color: #f0b830; }
.note-textarea {
  width: 100%; min-height: 120px; resize: vertical;
  background: rgba(0,0,0,0.5); border: 1px solid rgba(212,146,10,0.25);
  border-bottom: 2px solid rgba(212,146,10,0.5);
  color: rgba(245,225,175,0.9) !important; font-family: 'Cinzel', serif;
  font-size: 12px; padding: 8px; outline: none; caret-color: #f0b830;
  line-height: 1.7;
}
.note-textarea:focus { border-bottom-color: #f0b830; background: rgba(212,146,10,0.05); }