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

:root {
  --bg-app:    #1e1e2a;
  --bg-panel:  #252533;
  --bg-panel2: #1e1e28;
  --bg-hover:  #2a2a3a;
  --bg-active: #303048;
  --border:    rgba(255,255,255,0.07);
  --border-2:  rgba(255,255,255,0.12);
  --text-1:    #e8e8f5;
  --text-2:    #9090b8;
  --text-3:    #555570;
  --accent:    #4f6ef7;
  --accent-2:  #3b5bdb;
  --success:   #2ecc71;
  --warning:   #f59e0b;
  --danger:    #ef4444;
  --radius:    5px;
  --radius-sm: 3px;
  --font:      'Segoe UI', system-ui, -apple-system, sans-serif;
}

html, body {
  height: 100%; overflow: hidden;
  background: var(--bg-app);
  color: var(--text-1);
  font-family: var(--font);
  font-size: 12px;
  line-height: 1.4;
}

/* ── Login ───────────────────────────────────────────────────────── */
#login-screen {
  position: fixed; inset: 0; display: flex;
  align-items: center; justify-content: center;
  background: var(--bg-app);
}
.login-card { width: 300px; display: flex; flex-direction: column; gap: 10px; }
.login-logo { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.login-logo-icon { font-size: 22px; }
.login-logo-text { font-size: 18px; font-weight: 600; color: var(--text-1); }
.login-sub { font-size: 11px; color: var(--text-2); margin-bottom: 6px; }
.login-input {
  background: var(--bg-panel); border: 1px solid var(--border-2);
  border-radius: var(--radius); padding: 9px 12px;
  color: var(--text-1); font-size: 12px; width: 100%; outline: none;
}
.login-input:focus { border-color: var(--accent); }
.login-btn {
  background: var(--accent); border: none; border-radius: var(--radius);
  padding: 9px; color: white; font-size: 12px; font-weight: 500;
  cursor: pointer; width: 100%; margin-top: 4px;
}
.login-btn:hover { background: var(--accent-2); }
.login-error {
  font-size: 11px; color: var(--danger); padding: 6px 10px;
  background: rgba(239,68,68,0.1); border-radius: var(--radius);
}

/* ══════════════════════════════════════════════════════════════════
   APP SHELL
══════════════════════════════════════════════════════════════════ */
#app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* ── Menubar (top) ───────────────────────────────────────────────── */
.menubar {
  height: 28px;
  background: #161620;
  border-bottom: 1px solid rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 2px;
  flex-shrink: 0;
}
.menu-item {
  padding: 3px 10px;
  font-size: 11px;
  color: var(--text-2);
  cursor: pointer;
  border-radius: var(--radius-sm);
  user-select: none;
}
.menu-item:hover { background: var(--bg-hover); color: var(--text-1); }
.menu-sep { width: 1px; height: 14px; background: var(--border); margin: 0 4px; }
.menu-logo { font-size: 12px; font-weight: 700; color: var(--text-1); margin-right: 8px; }
.menu-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.menu-project-name {
  font-size: 11px; color: var(--text-2);
  padding: 2px 8px;
  cursor: pointer;
}
.menu-project-name:hover { color: var(--text-1); }

/* ── Toolbar (second row) ────────────────────────────────────────── */
.toolbar {
  height: 36px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 8px;
  flex-shrink: 0;
}
.tb-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
.tool-btn {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: all .1s;
}
.tool-btn:hover { background: var(--bg-hover); color: var(--text-1); }
.tool-btn.active {
  background: var(--bg-active);
  border-color: var(--border-2);
  color: var(--accent);
}
.topbar-btn {
  height: 24px; padding: 0 10px;
  background: var(--bg-hover);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--text-1); font-size: 11px; cursor: pointer;
  transition: background .1s;
}
.topbar-btn:hover { background: var(--bg-active); }
.topbar-btn.primary {
  background: var(--accent); border-color: var(--accent); color: white;
  font-weight: 600;
}
.topbar-btn.primary:hover { background: var(--accent-2); }
.zoom-label { font-size: 10px; color: var(--text-3); min-width: 34px; text-align: center; }
.user-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; cursor: pointer; color: white;
}

/* ── Tab bar (Layout 1 | Event sheet 1) ─────────────────────────── */
.tabbar {
  height: 30px;
  background: #161620;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-end;
  padding: 0 8px;
  gap: 2px;
  flex-shrink: 0;
}
.c3-tab {
  height: 28px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px 0 10px;
  font-size: 11px;
  color: var(--text-2);
  cursor: pointer;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  user-select: none;
  transition: all .1s;
  white-space: nowrap;
}
.c3-tab:hover { color: var(--text-1); background: rgba(255,255,255,0.04); }
.c3-tab.active {
  background: var(--bg-panel);
  border-color: var(--border);
  color: var(--text-1);
}
.c3-tab-icon { font-size: 12px; }
.c3-tab-close {
  width: 14px; height: 14px;
  border: none; background: none;
  color: var(--text-3); cursor: pointer; font-size: 11px;
  border-radius: 2px; display: flex; align-items: center; justify-content: center;
  margin-left: 2px;
}
.c3-tab-close:hover { background: var(--bg-hover); color: var(--danger); }

/* ── Main content area ───────────────────────────────────────────── */
.c3-main {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ── Left panel (Properties) ─────────────────────────────────────── */
.c3-panel-left {
  width: 220px;
  flex-shrink: 0;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Center area ─────────────────────────────────────────────────── */
.c3-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-app);
}

/* Layout view */
#c3-layout-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Event sheet view — fills entire center when active */
#c3-eventsheet-view {
  flex: 1;
  display: none;
  flex-direction: column;
  overflow: hidden;
  background: #12121c;
}
#c3-eventsheet-view.active { display: flex; }

/* ── Right panel (Project + Layers) ──────────────────────────────── */
.c3-panel-right {
  width: 240px;
  flex-shrink: 0;
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Panel section headers ───────────────────────────────────────── */
.c3-section-header {
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  background: #1a1a28;
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: .4px;
  flex-shrink: 0;
  user-select: none;
  cursor: pointer;
}
.c3-section-header:hover { color: var(--text-1); }
.c3-section-body { overflow-y: auto; }

/* ── Properties panel ────────────────────────────────────────────── */
.props-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  gap: 6px;
}
.props-row:hover { background: rgba(255,255,255,0.02); }
.props-label {
  font-size: 10px; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.props-section {
  padding: 4px 8px;
  font-size: 10px; font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase; letter-spacing: .4px;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--border);
  margin-top: 4px;
}
.props-input {
  width: 100%; background: var(--bg-app);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 6px; color: var(--text-1);
  font-size: 11px; outline: none;
}
.props-input:focus { border-color: var(--accent); }
.props-input-pair { display: flex; gap: 4px; }
.props-checkbox { accent-color: var(--accent); cursor: pointer; }

/* ── Action buttons in props ─────────────────────────────────────── */
.props-actions {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 8px;
}
.btn-xs {
  height: 22px; padding: 0 8px;
  background: var(--bg-hover);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--text-1); font-size: 10px; cursor: pointer;
}
.btn-xs:hover { background: var(--bg-active); }
.btn-xs.danger { color: var(--danger); }
.btn-xs.danger:hover { background: rgba(239,68,68,0.1); border-color: var(--danger); }
.btn-sm {
  height: 26px; padding: 0 10px;
  background: var(--bg-hover);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  color: var(--text-1); font-size: 11px; cursor: pointer; width: 100%;
}
.btn-sm:hover { background: var(--bg-active); }

/* ── Project tree (right panel) ──────────────────────────────────── */
.c3-tree { padding: 4px 0; overflow-y: auto; flex: 1; }
.c3-tree-item {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 8px 3px 0;
  font-size: 11px; color: var(--text-1);
  cursor: pointer; border-radius: var(--radius-sm);
  user-select: none;
}
.c3-tree-item:hover { background: var(--bg-hover); }
.c3-tree-item.active { background: var(--bg-active); color: var(--accent); }
.c3-tree-indent { display: inline-block; width: 16px; flex-shrink: 0; }
.c3-tree-icon { font-size: 12px; flex-shrink: 0; }
.c3-tree-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c3-tree-count { font-size: 9px; color: var(--text-3); }

/* ── Canvas ──────────────────────────────────────────────────────── */
.canvas-container {
  background: #0d0d14; position: relative;
  overflow: hidden; display: flex; flex-direction: column; flex: 1;
}
.canvas-viewport {
  flex: 1; position: relative; overflow: hidden; cursor: crosshair;
}
#main-canvas { position: absolute; }
.selection-box {
  position: absolute; border: 1px solid var(--accent);
  background: rgba(79,110,247,0.08); pointer-events: none;
}
.canvas-statusbar {
  height: 20px; background: #161620;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px; font-size: 10px; color: var(--text-3); flex-shrink: 0;
}
.status-sep { color: var(--border-2); }

/* ── Layers panel (bottom of right panel) ────────────────────────── */
.layers-list { overflow-y: auto; flex: 1; padding: 4px 0; }
.layer-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px; font-size: 11px;
  cursor: pointer; transition: background .1s;
}
.layer-row:hover { background: var(--bg-hover); }
.layer-row.selected { background: var(--bg-active); }
.layer-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer-lock { font-size: 10px; color: var(--text-3); }
.layer-vis  { font-size: 10px; color: var(--text-3); cursor: pointer; }

/* Scenes list */
.scenes-list { overflow-y: auto; flex: 1; padding: 4px; }
.scene-item {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  border-radius: var(--radius); cursor: pointer;
  border: 1px solid transparent; font-size: 11px;
}
.scene-item:hover { background: var(--bg-hover); }
.scene-item.active { background: var(--bg-active); border-color: var(--border-2); }
.panel-footer { padding: 6px; border-top: 1px solid var(--border); flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════
   EVENT SHEET (C3 STYLE — FULL CENTER)
══════════════════════════════════════════════════════════════════ */

/* Toolbar inside event sheet */
.es-toolbar {
  height: 30px;
  background: #0d0d16;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  flex-shrink: 0;
}
.es-tb-btn {
  height: 22px; padding: 0 10px;
  background: #1e1e2d; border: 1px solid #2a2a3e;
  border-radius: 3px; color: #7b9aff;
  font-size: 10px; cursor: pointer; transition: all .1s;
}
.es-tb-btn:hover { background: #252545; border-color: var(--accent); }
.es-sheet-name { font-size: 10px; color: #3a3a55; text-transform: uppercase; letter-spacing: .5px; }

/* Event rows */
.c3-es-body {
  flex: 1; overflow-y: auto; overflow-x: hidden;
}
.c3-es-body::-webkit-scrollbar { width: 8px; }
.c3-es-body::-webkit-scrollbar-track { background: #0d0d16; }
.c3-es-body::-webkit-scrollbar-thumb { background: #2a2a3a; border-radius: 4px; }

.c3-empty {
  height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: #2a2a3a; gap: 6px; user-select: none;
}
.c3-empty-icon { font-size: 28px; opacity: .3; }
.c3-empty-text { font-size: 13px; color: #2e2e45; }
.c3-empty-sub  { font-size: 10px; color: #202030; }

/* Event block */
.c3-row {
  display: grid;
  grid-template-columns: 36px 1fr 1.5fr 32px;
  min-height: 40px;
  border-bottom: 1px solid #141420;
  transition: background .08s;
  cursor: pointer;
}
.c3-row:hover { background: #161626; }
.c3-row.c3-active {
  background: #14143a;
  box-shadow: inset 3px 0 0 var(--accent);
}

.c3-num {
  display: flex; align-items: flex-start;
  justify-content: center; padding-top: 13px;
  font-size: 10px; color: #222232;
  border-right: 1px solid #141420;
  user-select: none;
}

.c3-conds {
  padding: 8px 12px;
  border-right: 1px solid #141420;
  display: flex; flex-direction: column; gap: 4px;
}

.c3-acts {
  padding: 6px 12px;
  display: flex; flex-direction: column; gap: 3px;
}

.c3-del-col {
  display: flex; align-items: flex-start;
  justify-content: center; padding-top: 10px;
  border-left: 1px solid #141420;
}

.c3-cond-row, .c3-act-row {
  display: flex; align-items: center;
  gap: 5px; flex-wrap: wrap; row-gap: 3px; min-height: 24px;
}

.c3-add-act { margin-top: 3px; padding-left: 30px; }

/* Keywords */
.c3-kw {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; letter-spacing: .8px;
  padding: 2px 8px; border-radius: 3px;
  min-width: 26px; flex-shrink: 0; user-select: none;
}
.c3-kw-if   { background: rgba(79,110,247,.22); color: #7b9aff; }
.c3-kw-do   { background: rgba(46,204,113,.15); color: #2ecc71; }

/* Tags */
.c3-tag {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 9px; border-radius: 4px; font-size: 11px;
  cursor: pointer; border: 1px solid transparent;
  transition: all .1s; user-select: none; white-space: nowrap;
}
.c3-tag-obj     { background:#1c1c32; border-color:#2c2c4e; color:#9898d8; font-weight:600; }
.c3-tag-obj:hover { background:#222248; border-color:var(--accent); color:#b8b8f8; }
.c3-tag-trigger { background:#161630; border-color:#28284e; color:#c0c0f0; }
.c3-tag-trigger:hover { border-color:var(--accent); color:#7b9aff; }
.c3-tag-action  { background:#131e14; border-color:#1e3a20; color:#70c878; }
.c3-tag-action:hover { border-color:var(--success); color:var(--success); }
.c3-tag-target  { background:#1a1a2e; border-color:#26264a; color:#7878b8; }
.c3-tag-target:hover { background:#202040; border-color:var(--accent); }
.c3-tag-param   { background:#1e1a0e; border-color:#38300e; color:#c8a020; font-family:monospace; font-size:10px; }
.c3-tag-param:hover { border-color:var(--warning); color:#f5b520; }
.c3-tag-add     { background:transparent; border:1px dashed #252535; color:#252535; font-size:10px; padding:1px 7px; }
.c3-tag-add:hover { border-color:var(--accent); color:var(--accent); }

/* Buttons */
.c3-btn-del-ev {
  background:none; border:none; color:#1e1e32;
  cursor:pointer; font-size:15px; padding:2px 8px;
  border-radius:3px; transition:all .1s;
}
.c3-btn-del-ev:hover { color:var(--danger); background:rgba(239,68,68,.1); }
.c3-row:hover .c3-btn-del-ev { color:#3a3a55; }

.c3-btn-del-act {
  background:none; border:none; color:transparent;
  cursor:pointer; font-size:11px; padding:1px 5px;
  border-radius:3px; transition:all .1s; margin-left:auto;
}
.c3-act-row:hover .c3-btn-del-act { color:#3a3a55; }
.c3-btn-del-act:hover { color:var(--danger) !important; }

.c3-btn-add-act {
  background:none; border:1px dashed #1e1e30;
  color:#282838; font-size:10px; padding:2px 12px;
  border-radius:3px; cursor:pointer; transition:all .1s;
}
.c3-btn-add-act:hover { border-color:var(--success); color:var(--success); }

/* C3 Dropdown */
#c3-dropdown {
  position:fixed; z-index:99999;
  background:#1a1a2a; border:1px solid #3a3a58;
  border-radius:6px; padding:4px;
  box-shadow:0 10px 40px rgba(0,0,0,.7);
  min-width:190px; max-height:320px; overflow-y:auto;
}
#c3-dropdown::-webkit-scrollbar { width:4px; }
#c3-dropdown::-webkit-scrollbar-thumb { background:#2a2a40; border-radius:2px; }
.c3-dd-group {
  font-size:9px; color:#3a3a55;
  text-transform:uppercase; letter-spacing:.6px;
  padding:6px 8px 3px; user-select:none;
}
.c3-dd-item {
  display:flex; align-items:center; gap:7px;
  padding:6px 10px; border-radius:4px; cursor:pointer;
  font-size:11px; color:#a0a0c8; transition:background .08s;
}
.c3-dd-item:hover { background:#252545; color:#e0e0f8; }
.c3-dd-item.selected { background:#1e1e42; color:#7b9aff; }
.c3-dd-icon { font-size:13px; width:18px; text-align:center; flex-shrink:0; }

/* ══════════════════════════════════════════════════════════════════
   MODALS & TOASTS
══════════════════════════════════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center; z-index:1000;
}
.modal-overlay.hidden { display:none; }
.modal-card {
  background:var(--bg-panel); border:1px solid var(--border-2);
  border-radius:10px; overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.modal-header {
  padding:14px 18px; background:var(--bg-panel2);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  font-size:13px; font-weight:600;
}
.modal-close {
  background:none; border:none; color:var(--text-2);
  cursor:pointer; font-size:18px; padding:0 4px;
}
.modal-close:hover { color:var(--danger); }
.modal-body { padding:18px; display:flex; flex-direction:column; gap:14px; }
.modal-footer {
  padding:12px 18px; background:var(--bg-panel2);
  border-top:1px solid var(--border);
  display:flex; justify-content:flex-end; gap:8px;
}
.form-group { display:flex; flex-direction:column; gap:5px; }
.form-group label { font-size:11px; color:var(--text-2); font-weight:500; }
.form-input {
  background:var(--bg-app); border:1px solid var(--border-2);
  border-radius:var(--radius); padding:8px 10px;
  color:var(--text-1); font-size:12px; outline:none;
}
.form-input:focus { border-color:var(--accent); }
.chips { display:flex; gap:6px; }
.chip {
  padding:5px 14px; background:var(--bg-hover);
  border:1px solid var(--border-2); border-radius:20px;
  font-size:11px; cursor:pointer;
}
.chip.selected { background:var(--accent); border-color:var(--accent); color:white; }
.btn { height:30px; padding:0 14px; border-radius:var(--radius); font-size:12px; cursor:pointer; border:1px solid transparent; }
.btn-ghost { background:var(--bg-hover); border-color:var(--border-2); color:var(--text-1); }
.btn-ghost:hover { background:var(--bg-active); }
.btn-primary { background:var(--accent); color:white; font-weight:500; }
.btn-primary:hover { background:var(--accent-2); }

/* Toast */
#toast-container {
  position:fixed; bottom:20px; left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; gap:6px;
  z-index:9999; pointer-events:none;
}
.toast {
  padding:8px 16px; border-radius:20px;
  font-size:12px; font-weight:500;
  background:var(--bg-panel); border:1px solid var(--border-2);
  color:var(--text-1); white-space:nowrap;
  box-shadow:0 4px 20px rgba(0,0,0,.4);
}
.toast.success { background:#16a34a; border-color:#16a34a; color:white; }
.toast.error   { background:#dc2626; border-color:#dc2626; color:white; }
.toast.info    { background:var(--bg-active); }

/* Build progress */
#build-progress-bar {
  position:fixed; bottom:20px; right:20px; z-index:9998;
  background:var(--bg-panel); border:1px solid var(--border-2);
  border-radius:12px; padding:14px 16px;
  box-shadow:0 8px 30px rgba(0,0,0,.4);
  min-width:260px;
}
.build-progress-inner { display:flex; align-items:flex-start; gap:12px; }
.build-progress-icon { font-size:20px; }
.build-progress-info { flex:1; }
.build-progress-title { font-size:13px; font-weight:600; margin-bottom:2px; }
.build-progress-sub { font-size:10px; color:var(--text-2); margin-bottom:8px; }
.build-progress-track { background:var(--bg-app); border-radius:4px; height:4px; overflow:hidden; margin-bottom:4px; }
.build-progress-fill { height:100%; background:var(--accent); transition:width .5s ease; width:0%; }
.build-progress-steps { font-size:10px; color:var(--text-2); }