/* WebIDE — Light Theme */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg:    #f0f2f5;
  --s1:    #ffffff;
  --s2:    #f7f8fa;
  --s3:    #eef0f3;
  --s4:    #e4e7ec;
  --hov:   #eef0f3;

  --tx:    #111827;
  --tx2:   #6b7280;
  --tx3:   #9ca3af;

  --bd:    #e5e7eb;
  --bd2:   #d1d5db;

  --ac:    #2563eb;
  --ach:   #1d4ed8;
  --acd:   rgba(37,99,235,.08);
  --acb:   rgba(37,99,235,.22);

  --gr:    #16a34a;
  --grd:   rgba(22,163,74,.08);
  --grb:   rgba(22,163,74,.22);

  --re:    #dc2626;
  --red:   rgba(220,38,38,.08);
  --reb:   rgba(220,38,38,.22);

  --am:    #d97706;
  --amd:   rgba(217,119,6,.08);
  --amb:   rgba(217,119,6,.22);

  --sh:    0 1px 6px rgba(0,0,0,.08);
  --shlg:  0 4px 24px rgba(0,0,0,.12);

  --rsm: 6px; --r: 10px; --rlg: 14px; --rxl: 18px;
  --font: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --ease: cubic-bezier(.25,.46,.45,.94);
  --dur:  .13s;
}

/* ── Dark theme ── */
[data-theme="dark"] {
  --bg:    #1e1e24;
  --s1:    #27272f;
  --s2:    #2f2f38;
  --s3:    #383842;
  --s4:    #42424e;
  --hov:   #34343f;
  --tx:    #f4f4f8;
  --tx2:   #c0c0d0;
  --tx3:   #8888a0;
  --bd:    #46464e;
  --bd2:   #58586a;
  --ac:    #7eb8ff;
  --ach:   #5fa0ff;
  --acd:   rgba(126,184,255,.18);
  --acb:   rgba(126,184,255,.40);
  --gr:    #5ee8a0;
  --grd:   rgba(94,232,160,.14);
  --grb:   rgba(94,232,160,.35);
  --re:    #ff8080;
  --red:   rgba(255,128,128,.14);
  --reb:   rgba(255,128,128,.35);
  --am:    #ffc566;
  --amd:   rgba(255,197,102,.14);
  --amb:   rgba(255,197,102,.35);
  --sh:    0 1px 8px rgba(0,0,0,.40);
  --shlg:  0 4px 28px rgba(0,0,0,.55);
}
[data-theme="dark"] body { background: #1e1e24; }
[data-theme="dark"] .l-nav { background: rgba(30,30,36,.96); border-color: #46464e; }
[data-theme="dark"] .login-card { background: #27272f; border-color: #46464e; }
[data-theme="dark"] .login-input { background: #2f2f38; border-color: #58586a; color: #f4f4f8; }
[data-theme="dark"] .login-input:focus { background: #383842; }
[data-theme="dark"] .topbar { background: #27272f; border-color: #46464e; }
[data-theme="dark"] .ed-left { background: #27272f; border-color: #46464e; }
[data-theme="dark"] .ed-center { background: #1e1e24; }
[data-theme="dark"] .ed-tabs { background: #2f2f38; border-color: #46464e; }
[data-theme="dark"] .etab.active { background: #383842; color: #f4f4f8; border-color: #58586a; box-shadow: none; }
[data-theme="dark"] .etab:hover { background: #34343f; }
[data-theme="dark"] .code-wrap { background: #1e1e24; }
[data-theme="dark"] .prev-bar { background: #2f2f38; border-color: #46464e; }
[data-theme="dark"] .statusbar { background: #27272f; border-color: #46464e; }
[data-theme="dark"] .file-row:hover { background: #34343f; }
[data-theme="dark"] .file-row.active { background: rgba(126,184,255,.18); border-color: rgba(126,184,255,.40); }
[data-theme="dark"] .sl-head { border-color: #46464e; }
[data-theme="dark"] .sl-foot { border-color: #46464e; }
[data-theme="dark"] .user-btn { background: #2f2f38; border-color: #46464e; }
[data-theme="dark"] .user-btn:hover { background: #383842; }
[data-theme="dark"] .user-menu { background: #2f2f38; border-color: #58586a; }
[data-theme="dark"] .um-header { background: #27272f; border-color: #46464e; }
[data-theme="dark"] .um-item:hover { background: #383842; }
[data-theme="dark"] .dashboard { background: #1e1e24; }
[data-theme="dark"] .proj-card { background: #27272f; border-color: #46464e; }
[data-theme="dark"] .proj-card:hover { border-color: #58586a; }
[data-theme="dark"] .pc-dropdown { background: #2f2f38; border-color: #58586a; }
[data-theme="dark"] .pcd-item:hover { background: #383842; }
[data-theme="dark"] .modal { background: #2f2f38; border-color: #58586a; }
[data-theme="dark"] .modal-head, [data-theme="dark"] .modal-header { background: #27272f; border-color: #46464e; }
[data-theme="dark"] .f-inp, [data-theme="dark"] .input { background: #27272f; border-color: #58586a; color: #f4f4f8; }
[data-theme="dark"] .f-inp:focus, [data-theme="dark"] .input:focus { background: #2f2f38; }
[data-theme="dark"] .f-inp::placeholder, [data-theme="dark"] .input::placeholder { color: #8888a0; }
[data-theme="dark"] .btn { background: #2f2f38; border-color: #46464e; color: #f4f4f8; }
[data-theme="dark"] .btn:hover { background: #383842; border-color: #58586a; }
[data-theme="dark"] .btn-ghost { background: transparent; border-color: transparent; }
[data-theme="dark"] .btn-ghost:hover { background: #383842; border-color: #46464e; }
[data-theme="dark"] .ctx-menu { background: #2f2f38; border-color: #58586a; }
[data-theme="dark"] .ctx-item:hover { background: #383842; }
[data-theme="dark"] .toast { background: #2f2f38; border-color: #58586a; color: #f4f4f8; }
[data-theme="dark"] .type-btn { background: #2f2f38; border-color: #46464e; }
[data-theme="dark"] .type-btn:hover { background: #383842; }
[data-theme="dark"] .type-btn.sel { border-color: #7eb8ff; background: rgba(126,184,255,.18); }
[data-theme="dark"] .chip { background: #2f2f38; border-color: #58586a; color: #c0c0d0; }
[data-theme="dark"] .chip:hover { border-color: #7eb8ff; color: #7eb8ff; }
[data-theme="dark"] .CodeMirror { background: #27272f !important; color: #e0e0ec !important; }
[data-theme="dark"] .CodeMirror-gutters { background: #222229 !important; border-color: #46464e !important; }
[data-theme="dark"] .CodeMirror-linenumber { color: #8888a0 !important; }
[data-theme="dark"] .CodeMirror-cursor { border-color: #7eb8ff !important; }
[data-theme="dark"] .CodeMirror-selected { background: rgba(126,184,255,.20) !important; }
[data-theme="dark"] .tbl-card { background: #27272f; border-color: #46464e; }
[data-theme="dark"] thead th { background: #2f2f38; border-color: #46464e; }
[data-theme="dark"] tbody tr { border-color: #46464e; }
[data-theme="dark"] tbody tr:hover { background: #2f2f38; }
[data-theme="dark"] .stat-box { background: #27272f; border-color: #46464e; }
[data-theme="dark"] .tbl-head, [data-theme="dark"] .data-table-head { background: #27272f; border-color: #46464e; }
[data-theme="dark"] .land { background: #18181e; }
[data-theme="dark"] table { color: #f4f4f8; }



/* Base */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html,body { height: 100%; }
body { font-family: var(--font); background: var(--bg); color: var(--tx); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font); cursor: pointer; }
input, select, textarea { font-family: var(--font); }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bd2); border-radius: 9px; }

/* ── LANDING ── */
.land { min-height: 100vh; background: #f8fafc; }
.l-nav { position: sticky; top: 0; z-index: 50; height: 60px; display: flex; align-items: center; padding: 0 40px; gap: 32px; background: rgba(255,255,255,.95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--bd); }
.l-logo { display: flex; align-items: center; gap: 9px; }
.l-logo-mark { width: 30px; height: 30px; border-radius: 7px; background: var(--ac); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 700; }
.l-logo-text { font-size: 16px; font-weight: 800; letter-spacing: -.4px; color: var(--tx); }
.l-nav-gap { flex: 1; }
.l-nav-links { display: flex; align-items: center; gap: 4px; }
.l-nav-lnk { font-size: 13.5px; color: var(--tx2); padding: 6px 12px; border-radius: var(--rsm); transition: all var(--dur); }
.l-nav-lnk:hover { color: var(--tx); background: var(--s3); }
.l-nav-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 18px; background: var(--ac); color: #fff; border-radius: var(--rsm); font-size: 13.5px; font-weight: 600; transition: all var(--dur); border: none; }
.l-nav-btn:hover { background: var(--ach); transform: translateY(-1px); }
.l-hero { padding: 80px 40px 60px; text-align: center; max-width: 800px; margin: 0 auto; }
.l-hero-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 13px; margin-bottom: 20px; background: var(--acd); border: 1px solid var(--acb); border-radius: 20px; font-size: 12px; font-weight: 600; color: var(--ac); }
.l-hero-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gr); }
.l-hero h1 { font-size: clamp(32px,5vw,52px); font-weight: 800; letter-spacing: -2px; line-height: 1.08; margin-bottom: 16px; color: var(--tx); }
.l-hero h1 em { font-style: normal; color: var(--ac); }
.l-hero-sub { font-size: 16px; color: var(--tx2); line-height: 1.75; max-width: 500px; margin: 0 auto 32px; }
.l-hero-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.l-btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 11px 24px; background: var(--ac); color: #fff; border-radius: var(--r); font-size: 14.5px; font-weight: 700; box-shadow: 0 2px 12px rgba(37,99,235,.3); transition: all var(--dur); }
.l-btn-primary:hover { background: var(--ach); transform: translateY(-1px); }
.l-btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border: 1.5px solid var(--bd2); color: var(--tx2); border-radius: var(--r); font-size: 14.5px; font-weight: 500; transition: all var(--dur); }
.l-btn-ghost:hover { border-color: var(--ac); color: var(--ac); background: var(--acd); }
.l-preview { max-width: 860px; margin: 0 auto; padding: 0 40px 70px; }
.l-code-win { background: #1e1e2e; border: 1px solid #2e2e3e; border-radius: var(--rlg); overflow: hidden; box-shadow: var(--shlg); }
.l-code-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #252535; border-bottom: 1px solid #2e2e3e; }
.l-dot { width: 11px; height: 11px; border-radius: 50%; }
.l-dot-r { background: #ff5f57; } .l-dot-y { background: #febc2e; } .l-dot-g { background: #28c840; }
.l-code-title { flex: 1; text-align: center; font-size: 12px; color: #555575; font-family: var(--mono); }
.l-code-body { display: grid; grid-template-columns: 1fr 1fr; }
.l-code-pane { padding: 20px 22px; font-family: var(--mono); font-size: 12.5px; line-height: 1.75; }
.l-code-pane:first-child { border-right: 1px solid #2e2e3e; }
.l-code-pane.result { background: #fff; color: #111; font-family: var(--font); font-size: 13px; }
.l-code-footer { display: flex; align-items: center; gap: 8px; padding: 9px 14px; font-size: 11px; color: #555575; font-family: var(--mono); background: #252535; border-top: 1px solid #2e2e3e; }
.c-cmt{color:#5c6370;} .c-kw{color:#c678dd;} .c-fn{color:#61afef;} .c-str{color:#98c379;} .c-var{color:#e06c75;} .c-tag{color:#e06c75;} .c-pu{color:#c678dd;}
.l-features { max-width: 860px; margin: 0 auto; padding: 0 40px 70px; }
.l-feat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.l-feat { padding: 22px; background: #fff; border: 1px solid var(--bd); border-radius: var(--rlg); transition: all var(--dur); }
.l-feat:hover { border-color: var(--bd2); box-shadow: var(--sh); transform: translateY(-1px); }
.l-feat-icon { font-size: 20px; margin-bottom: 11px; }
.l-feat h3 { font-size: 14px; font-weight: 700; margin-bottom: 5px; }
.l-feat p { font-size: 13px; color: var(--tx2); line-height: 1.65; }
.l-footer { padding: 22px 40px; border-top: 1px solid var(--bd); display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--tx3); }
.l-footer-logo { display: flex; align-items: center; gap: 7px; font-weight: 700; color: var(--tx2); }

/* ── LOGIN ── */
.login-body { display: block; min-height: 100vh; overflow: auto; background: var(--bg); }
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-back { position: fixed; top: 20px; left: 24px; display: flex; align-items: center; gap: 6px; padding: 7px 14px; background: #fff; border: 1px solid var(--bd); border-radius: 20px; font-size: 13px; color: var(--tx2); transition: all var(--dur); z-index: 10; }
.login-back:hover { color: var(--tx); border-color: var(--bd2); background: var(--s3); }
.login-card { width: 100%; max-width: 380px; background: #fff; border: 1px solid var(--bd); border-radius: var(--rxl); box-shadow: var(--shlg); overflow: hidden; }
.login-header { padding: 30px 28px 20px; text-align: center; border-bottom: 1px solid var(--bd); }
.login-icon { width: 52px; height: 52px; margin: 0 auto 13px; background: var(--ac); border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; }
.login-title { font-size: 19px; font-weight: 800; letter-spacing: -.4px; }
.login-sub { font-size: 13px; color: var(--tx2); margin-top: 4px; }
.login-body-inner { padding: 22px 28px 28px; }
.login-error { display: flex; align-items: center; gap: 8px; background: var(--red); border: 1px solid var(--reb); border-radius: var(--rsm); padding: 10px 13px; font-size: 13px; color: var(--re); margin-bottom: 14px; }
.login-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.login-label { font-size: 12px; font-weight: 600; color: var(--tx2); }
.login-input { height: 40px; padding: 0 13px; background: var(--s2); border: 1px solid var(--bd2); border-radius: var(--rsm); color: var(--tx); font-size: 14px; outline: none; transition: all var(--dur); }
.login-input::placeholder { color: var(--tx3); }
.login-input:focus { border-color: var(--ac); background: #fff; box-shadow: 0 0 0 3px var(--acd); }
.login-btn { width: 100%; height: 42px; margin-top: 18px; background: var(--ac); color: #fff; border: none; border-radius: var(--rsm); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: all var(--dur); }
.login-btn:hover { background: var(--ach); }

/* ── APP SHELL ── */
.app-shell { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.topbar { height: 46px; flex-shrink: 0; background: #fff; border-bottom: 1px solid var(--bd); display: flex; align-items: center; padding: 0 14px; gap: 8px; }
.topbar-logo { display: flex; align-items: center; gap: 7px; padding: 0 4px; }
.topbar-logo-mark { width: 22px; height: 22px; background: var(--ac); border-radius: 5px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 700; }
.topbar-logo-text { font-size: 14px; font-weight: 800; letter-spacing: -.3px; }
.topbar-divider { width: 1px; height: 18px; background: var(--bd); flex-shrink: 0; }
.topbar-proj { font-size: 13px; color: var(--tx2); font-weight: 500; }
.topbar-proj a { color: var(--tx2); transition: color var(--dur); }
.topbar-proj a:hover { color: var(--ac); }
.topbar-proj-sep { color: var(--tx3); margin: 0 5px; }
.topbar-proj-cur { color: var(--tx); font-weight: 600; }
.topbar-gap { flex: 1; }
.topbar-save { font-size: 12px; color: var(--tx3); font-family: var(--mono); display: flex; align-items: center; gap: 5px; }
.topbar-save.saved   { color: var(--gr); }
.topbar-save.unsaved { color: var(--am); }
.tl-group { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.tl { width: 12px; height: 12px; border-radius: 50%; }
.tl-r { background: #ff5f57; } .tl-y { background: #febc2e; } .tl-g { background: #28c840; }
.topbar-center { flex: 1; display: flex; align-items: center; justify-content: center; }
.topbar-title { font-size: 13px; font-weight: 600; color: var(--tx2); }
.topbar-right { display: flex; align-items: center; gap: 8px; }

/* User dropdown */
.user-wrap { position: relative; }
.user-btn { display: flex; align-items: center; gap: 7px; padding: 4px 10px 4px 5px; background: var(--s2); border: 1px solid var(--bd); border-radius: 20px; cursor: pointer; transition: all var(--dur); }
.user-btn:hover { background: var(--s3); }
.user-av { width: 24px; height: 24px; border-radius: 50%; background: var(--ac); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0; }
.user-name { font-size: 12.5px; font-weight: 500; color: var(--tx); }
.user-caret { font-size: 8px; color: var(--tx3); transition: transform var(--dur); }
.user-caret.open { transform: rotate(180deg); }
.user-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 195px; background: #fff; border: 1px solid var(--bd2); border-radius: var(--rlg); box-shadow: var(--shlg); z-index: 500; overflow: hidden; animation: menuIn .13s var(--ease); }
.user-menu.hidden { display: none; }
@keyframes menuIn { from{opacity:0;transform:translateY(-5px);}to{opacity:1;transform:none;} }
.um-header { padding: 12px 14px 10px; border-bottom: 1px solid var(--bd); background: var(--s2); }
.um-name { font-size: 13px; font-weight: 700; color: var(--tx); }
.um-role { font-size: 11px; color: var(--tx3); margin-top: 1px; }
.um-sep { height: 1px; background: var(--bd); }
.um-item { display: flex; align-items: center; gap: 9px; padding: 9px 14px; font-size: 13px; color: var(--tx); cursor: pointer; transition: background var(--dur); border: none; background: transparent; width: 100%; text-align: left; font-family: var(--font); }
.um-item:hover { background: var(--s2); }
.um-item i { font-size: 12px; color: var(--tx3); width: 14px; text-align: center; flex-shrink: 0; }
.um-item:hover i { color: var(--tx2); }
.um-item-red { color: var(--re) !important; }
.um-item-red i { color: var(--re) !important; }
.um-item-red:hover { background: var(--red) !important; }

/* ── DASHBOARD ── */
.dashboard { flex: 1; overflow-y: auto; padding: 36px 40px; background: var(--bg); }
.app-body { flex: 1; overflow-y: auto; display: flex; background: var(--bg); }
.dash-head { margin-bottom: 28px; }
.dash-greeting { font-size: 13px; color: var(--tx2); margin-bottom: 4px; }
.dash-greeting strong { color: var(--ac); }
.dash-title { font-size: 23px; font-weight: 800; letter-spacing: -.4px; }
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); gap: 12px; }
.new-proj, .new-proj-card { border: 1.5px dashed var(--bd2); border-radius: var(--rlg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 30px 20px; cursor: pointer; transition: all var(--dur); color: var(--tx3); min-height: 145px; text-align: center; background: transparent; }
.new-proj:hover, .new-proj-card:hover { border-color: var(--ac); color: var(--ac); background: var(--acd); }
.new-proj i, .new-proj-card i { font-size: 22px; }
.new-proj span, .new-proj-card span { font-size: 13.5px; font-weight: 600; }
.new-proj small, .new-proj-card small { font-size: 11.5px; opacity: .7; }
.proj-card { background: #fff; border: 1px solid var(--bd); border-radius: var(--rlg); padding: 18px; transition: all var(--dur); display: flex; flex-direction: column; gap: 10px; position: relative; }
.proj-card:hover { border-color: var(--bd2); box-shadow: var(--sh); transform: translateY(-1px); }
.pc-top { display: flex; align-items: flex-start; justify-content: space-between; position: relative; }
.pc-icon { width: 38px; height: 38px; border-radius: var(--rsm); background: var(--acd); border: 1px solid var(--acb); display: flex; align-items: center; justify-content: center; color: var(--ac); font-size: 16px; }
.pc-menu-btn { width: 28px; height: 28px; border-radius: var(--rsm); display: flex; align-items: center; justify-content: center; color: var(--tx3); cursor: pointer; transition: all var(--dur); background: transparent; border: none; font-size: 14px; }
.pc-menu-btn:hover { background: var(--s3); color: var(--tx); }
.pc-dropdown { position: absolute; top: 34px; right: 0; min-width: 190px; background: #fff; border: 1px solid var(--bd2); border-radius: var(--r); box-shadow: var(--shlg); z-index: 100; overflow: hidden; animation: menuIn .12s var(--ease); }
.pc-dropdown.hidden { display: none; }
.pcd-item { display: flex; align-items: center; gap: 8px; padding: 9px 13px; font-size: 13px; color: var(--tx); cursor: pointer; transition: background var(--dur); }
.pcd-item:hover { background: var(--s2); }
.pcd-item i { font-size: 11px; color: var(--tx3); width: 13px; text-align: center; }
.pcd-sep { height: 1px; background: var(--bd); }
.pcd-danger, .pcd-red { color: var(--re) !important; }
.pcd-danger i, .pcd-red i { color: var(--re) !important; }
.pcd-danger:hover, .pcd-red:hover { background: var(--red) !important; }
.pc-name { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tx); }
.pc-meta { display: flex; gap: 10px; font-size: 11.5px; color: var(--tx3); font-family: var(--mono); }
.pc-meta span { display: flex; align-items: center; gap: 4px; }
.pc-actions { display: flex; gap: 7px; }
.pc-actions .btn { min-width: 31px; justify-content: center; }

/* ── EDITOR — critical layout ── */
.ed-shell  { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.ed-body   { flex: 1; display: flex; overflow: hidden; min-height: 0; }
.ed-left   { width: 210px; flex-shrink: 0; background: #fff; border-right: 1px solid var(--bd); display: flex; flex-direction: column; overflow: hidden; }
.ed-center { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; min-width: 0; }
.ed-tabs   { height: 40px; flex-shrink: 0; background: var(--s2); border-bottom: 1px solid var(--bd); display: flex; align-items: center; padding: 0 8px; gap: 1px; overflow-x: auto; }
.ed-tabs::-webkit-scrollbar { display: none; }
.ed-panes  { flex: 1; display: flex; overflow: hidden; min-height: 0; }

/* Code pane */
.code-wrap { display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; }
.code-wrap.full  { flex: 1; }
.code-wrap.split { width: 50%; flex-shrink: 0; border-right: 1px solid var(--bd); }

/* THE FIX: CM container must be a positioned block with explicit height */

/* Preview */
.prev-wrap { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; min-width: 0; }
.prev-wrap.hidden { display: none !important; }
.prev-bar { height: 34px; flex-shrink: 0; background: var(--s2); border-bottom: 1px solid var(--bd); display: flex; align-items: center; padding: 0 12px; gap: 8px; font-size: 12px; color: var(--tx2); }
.prev-url { flex: 1; font-family: var(--mono); font-size: 11px; color: var(--tx3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#prevFrame { flex: 1; border: none; width: 100%; display: block; min-height: 0; background: #fff; }

/* Resizer */
#resizer { width: 4px; background: var(--bd); cursor: col-resize; flex-shrink: 0; transition: background .1s; }
#resizer:hover, #resizer.drag { background: var(--ac); }

/* Status bar */
.statusbar { height: 24px; flex-shrink: 0; background: var(--s2); border-top: 1px solid var(--bd); display: flex; align-items: center; padding: 0 14px; gap: 14px; font-size: 11.5px; color: var(--tx3); font-family: var(--mono); }
.sb-gap { flex: 1; }
.sb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gr); flex-shrink: 0; }

/* Sidebar */
.sl-head { padding: 9px 10px 7px; border-bottom: 1px solid var(--bd); flex-shrink: 0; }
.sl-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--tx3); display: flex; align-items: center; justify-content: space-between; }
.sl-lbl button { background: none; border: none; color: var(--tx3); font-size: 13px; cursor: pointer; padding: 2px 5px; border-radius: 4px; transition: all var(--dur); }
.sl-lbl button:hover { color: var(--ac); background: var(--acd); }
.file-list { flex: 1; overflow-y: auto; padding: 3px; }
.file-row { display: flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: var(--rsm); cursor: pointer; transition: all var(--dur); font-size: 12.5px; border: 1px solid transparent; }
.file-row:hover { background: var(--s2); }
.file-row.active { background: var(--acd); border-color: var(--acb); }
.file-row i { font-size: 11px; color: var(--tx3); width: 12px; flex-shrink: 0; }
.file-row.active i { color: var(--ac); }
.file-row-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 12px; color: var(--tx); }
.file-row.active .file-row-name { color: var(--ac); font-weight: 600; }
.file-row-main { width: 5px; height: 5px; border-radius: 50%; background: var(--gr); flex-shrink: 0; }
.file-row-size { font-size: 10px; color: var(--tx3); font-family: var(--mono); flex-shrink: 0; }
.sl-foot { padding: 7px; border-top: 1px solid var(--bd); flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; }

/* Tabs */
.etab { display: flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: var(--rsm); font-family: var(--mono); font-size: 12px; color: var(--tx3); cursor: pointer; border: 1px solid transparent; transition: all var(--dur); white-space: nowrap; max-width: 155px; background: transparent; }
.etab:hover { background: var(--s3); color: var(--tx2); }
.etab.active { background: #fff; color: var(--tx); border-color: var(--bd); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.etab i { font-size: 10px; flex-shrink: 0; }
.etab span { overflow: hidden; text-overflow: ellipsis; }
.etab-add { color: var(--tx3); border-style: dashed; }
.etab-add:hover { color: var(--ac); border-color: var(--ac); background: var(--acd); }
.tb-right { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; gap: 6px; }
.lang-badge { font-size: 11px; font-family: var(--mono); color: var(--tx3); padding: 2px 8px; background: var(--s3); border: 1px solid var(--bd); border-radius: 4px; }

/* Empty state */
.empty-st { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px; text-align: center; background: var(--bg); }
.empty-st i { font-size: 42px; color: var(--tx3); }
.empty-st h3 { font-size: 16px; font-weight: 700; color: var(--tx); }
.empty-st p { font-size: 13px; color: var(--tx3); max-width: 260px; line-height: 1.65; }

/* Admin */
.admin-wrap { flex: 1; overflow-y: auto; padding: 28px 32px; background: var(--bg); }
.admin-head { margin-bottom: 20px; }
.admin-head h1 { font-size: 22px; font-weight: 800; letter-spacing: -.4px; }
.stats-row { display: grid; grid-template-columns: repeat(auto-fill,minmax(155px,1fr)); gap: 10px; margin-bottom: 20px; }
.stat-box { background: #fff; border: 1px solid var(--bd); border-radius: var(--rlg); padding: 16px; }
.stat-box-lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--tx3); margin-bottom: 6px; }
.stat-box-val { font-size: 28px; font-weight: 800; letter-spacing: -1px; font-family: var(--mono); line-height: 1; }
.tbl-card { background: #fff; border: 1px solid var(--bd); border-radius: var(--rlg); overflow: hidden; margin-bottom: 18px; }
.tbl-head, .data-table-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--bd); background: var(--s2); }
.tbl-head-title, .data-table-title { font-size: 14px; font-weight: 700; }
table { width: 100%; border-collapse: collapse; }
thead th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tx3); padding: 9px 14px; border-bottom: 1px solid var(--bd); text-align: left; background: var(--s2); }
tbody tr { border-bottom: 1px solid var(--bd); transition: background var(--dur); }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--s2); }
td { padding: 10px 14px; font-size: 13.5px; vertical-align: middle; }
.badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; border: 1px solid; }
.badge-admin  { background: rgba(124,58,237,.08);  color: #7c3aed; border-color: rgba(124,58,237,.22); }
.badge-user   { background: var(--acd); color: var(--ac); border-color: var(--acb); }
.badge-active { background: var(--grd); color: var(--gr); border-color: var(--grb); }
.badge-banned { background: var(--red); color: var(--re); border-color: var(--reb); }
.td-acts { display: flex; gap: 4px; flex-wrap: wrap; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 13px; height: 32px; border-radius: var(--rsm); border: 1px solid var(--bd); background: var(--s2); color: var(--tx); font-size: 13px; font-weight: 500; cursor: pointer; transition: all var(--dur); white-space: nowrap; text-decoration: none; font-family: var(--font); flex-shrink: 0; }
.btn:hover { background: var(--s3); border-color: var(--bd2); }
.btn i { font-size: 11px; }
.btn-sm { height: 27px; padding: 0 10px; font-size: 12px; }
.btn-lg { height: 38px; padding: 0 18px; font-size: 14px; }
.btn-ac { background: var(--ac); color: #fff; border-color: var(--ac); }
.btn-ac:hover { background: var(--ach); }
.btn-red { background: var(--red); color: var(--re); border-color: var(--reb); }
.btn-red:hover { background: rgba(220,38,38,.14); }
.btn-green { background: var(--grd); color: var(--gr); border-color: var(--grb); }
.btn-green:hover { background: rgba(22,163,74,.14); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--tx2); }
.btn-ghost:hover { background: var(--s3); color: var(--tx); border-color: var(--bd); }

/* Forms */
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; }
.field:last-child { margin-bottom: 0; }
.f-lbl, .field-label { font-size: 12px; font-weight: 600; color: var(--tx2); }
.f-inp, .input, .f-sel, .select { padding: 0 12px; height: 38px; background: var(--s2); border: 1px solid var(--bd2); border-radius: var(--rsm); color: var(--tx); font-size: 13.5px; outline: none; transition: all var(--dur); font-family: var(--font); }
.f-inp::placeholder, .input::placeholder { color: var(--tx3); }
.f-inp:focus, .input:focus, .f-sel:focus, .select:focus { border-color: var(--ac); background: #fff; box-shadow: 0 0 0 3px var(--acd); }
.f-sel, .select { cursor: pointer; }

/* Alerts */
.alert { display: flex; align-items: center; gap: 8px; padding: 10px 13px; border-radius: var(--rsm); font-size: 13px; border: 1px solid; margin-bottom: 13px; }
.alert i { flex-shrink: 0; }
.alert-ok   { background: var(--grd); border-color: var(--grb); color: var(--gr); }
.alert-err  { background: var(--red); border-color: var(--reb); color: var(--re); }
.alert-info { background: var(--acd); border-color: var(--acb); color: var(--ac); }
.alert-warn { background: var(--amd); border-color: var(--amb); color: var(--am); }

/* Modal */
.modal-backdrop { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.3); display: flex; align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(2px); }
.modal-backdrop.hidden { display: none; }
.modal { width: 100%; max-width: 440px; background: #fff; border: 1px solid var(--bd2); border-radius: var(--rxl); box-shadow: var(--shlg); overflow: hidden; animation: modalIn .15s var(--ease); }
.modal-lg { max-width: 600px; }
@keyframes modalIn { from{opacity:0;transform:scale(.97) translateY(6px);}to{opacity:1;transform:none;} }
.modal-head, .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 17px 22px 13px; border-bottom: 1px solid var(--bd); background: var(--s2); }
.modal-title { font-size: 15px; font-weight: 700; letter-spacing: -.2px; color: var(--tx); }
.modal-close { background: none; border: none; color: var(--tx3); font-size: 15px; cursor: pointer; padding: 4px; border-radius: 5px; transition: all var(--dur); }
.modal-close:hover { color: var(--re); background: var(--red); }
.modal-body { padding: 18px 22px 22px; }

/* Toast */
.toast-wrap { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 9000; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.toast { background: #1e293b; color: #f1f5f9; padding: 9px 18px; border-radius: 20px; font-size: 13px; font-weight: 500; box-shadow: 0 4px 20px rgba(0,0,0,.2); animation: tin .15s var(--ease); white-space: nowrap; border: 1px solid rgba(255,255,255,.1); }
.toast.ok { background: #14532d; border-color: rgba(255,255,255,.14); }
.toast.err { background: #7f1d1d; border-color: rgba(255,255,255,.14); }
@keyframes tin { from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;} }

/* Context menu */
.ctx-menu { position: fixed; z-index: 5000; background: #fff; border: 1px solid var(--bd2); border-radius: var(--r); box-shadow: var(--shlg); padding: 4px; min-width: 155px; animation: menuIn .12s var(--ease); }
.ctx-menu.hidden { display: none; }
.ctx-item { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 5px; font-size: 13px; cursor: pointer; transition: background var(--dur); color: var(--tx); }
.ctx-item:hover { background: var(--s2); }
.ctx-item i { font-size: 11px; color: var(--tx3); width: 13px; text-align: center; }
.ctx-item.danger { color: var(--re); }
.ctx-item.danger i { color: var(--re); }
.ctx-item.danger:hover { background: var(--red); }
.ctx-sep { height: 1px; background: var(--bd); margin: 3px 0; }

/* File type grid */
.type-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 14px; }
.type-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; background: var(--s2); border: 2px solid var(--bd); border-radius: var(--r); cursor: pointer; transition: all var(--dur); font-family: var(--font); }
.type-btn:hover { border-color: var(--bd2); background: var(--s3); }
.type-btn.sel { border-color: var(--ac); background: var(--acd); }
.type-btn i { font-size: 22px; }
.type-btn-name { font-size: 12px; font-weight: 700; color: var(--tx); }
.type-btn-desc { font-size: 10.5px; color: var(--tx2); text-align: center; line-height: 1.3; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.chip { padding: 3px 10px; background: var(--s2); border: 1px solid var(--bd2); border-radius: 20px; font-size: 11.5px; font-family: var(--mono); cursor: pointer; color: var(--tx2); transition: all var(--dur); }
.chip:hover { border-color: var(--ac); color: var(--ac); background: var(--acd); }

/* Utilities */
.f1{flex:1;} .w100{width:100%;} .hidden{display:none!important;}
.mt-8{margin-top:8px;} .mt-12{margin-top:12px;} .mt-16{margin-top:16px;}
.mb-8{margin-bottom:8px;} .mb-12{margin-bottom:12px;} .mb-16{margin-bottom:16px;}
.flex{display:flex;} .ic{align-items:center;} .jb{justify-content:space-between;}
.mono{font-family:var(--mono);}

@media(max-width:768px){
  .ed-left{display:none;}
  .l-feat-grid{grid-template-columns:1fr;}
  .l-code-body{grid-template-columns:1fr;}
  .l-code-pane.result{display:none;}
}

/* ── Brakujące zmienne kolorów (admin, generator) ── */
:root {
  --purple: #7c3aed;
  --teal:   #0d9488;
  --green:  #16a34a;
}
[data-theme="dark"] {
  --purple: #a78bfa;
  --teal:   #2dd4bf;
  --green:  #4ee896;
}

/* ── topbar-user / topbar-avatar / topbar-uname (admin) ── */
.topbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--r);
  transition: background var(--dur);
}
.topbar-user:hover { background: var(--s3); }
.topbar-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.topbar-uname {
  font-size: 13px;
  font-weight: 500;
  color: var(--tx);
}

/* ── User menu (generator): uwrap / ubtn / uav / uname / ucaret / umenu ── */
.uwrap { position: relative; }
.ubtn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px 4px 5px;
  background: var(--s2);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  cursor: pointer;
  font-family: var(--font);
  transition: background var(--dur), border-color var(--dur);
}
.ubtn:hover { background: var(--s3); border-color: var(--bd2); }
.uav {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ac);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.uname {
  font-size: 13px;
  font-weight: 500;
  color: var(--tx);
}
.ucaret {
  font-size: 10px;
  color: var(--tx3);
  transition: transform var(--dur);
}
.ucaret.open { transform: rotate(180deg); }
.umenu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 200px;
  background: var(--s1);
  border: 1px solid var(--bd2);
  border-radius: var(--r);
  box-shadow: var(--shlg);
  z-index: 200;
  overflow: hidden;
}
.um-head {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--bd);
  background: var(--s2);
}
.um-n {
  font-size: 13px;
  font-weight: 600;
  color: var(--tx);
}
.um-r {
  font-size: 11px;
  color: var(--tx3);
  margin-top: 2px;
}

/* ── Dark mode dla nowych klas ── */
[data-theme="dark"] .topbar-user:hover { background: var(--s3); }
[data-theme="dark"] .ubtn { background: var(--s2); border-color: var(--bd); }
[data-theme="dark"] .ubtn:hover { background: var(--s3); border-color: var(--bd2); }
[data-theme="dark"] .umenu { background: var(--s1); border-color: var(--bd2); }
[data-theme="dark"] .um-head { background: var(--s2); border-color: var(--bd); }

/* ── Admin page layout ── */
.admin-page {
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px;
  background: var(--bg);
}
.stat-card {
  background: var(--s1);
  border: 1px solid var(--bd);
  border-radius: var(--rlg);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat-card-lbl {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tx3);
}
.stat-card-val {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -1px;
  font-family: var(--mono);
  line-height: 1;
  color: var(--tx);
}
.data-table-wrap {
  background: var(--s1);
  border: 1px solid var(--bd);
  border-radius: var(--rlg);
  overflow: hidden;
  margin-bottom: 18px;
}
.font-mono { font-family: var(--mono); }

/* ── Dark mode dla admin klas ── */
[data-theme="dark"] .stat-card  { background: var(--s1); border-color: var(--bd); }
[data-theme="dark"] .data-table-wrap { background: var(--s1); border-color: var(--bd); }