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

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;font-family:'Inter',sans-serif}
body{background:#1e1e1e;color:#cccccc;font-size:13px}
::selection{background:#264f78}
svg{flex-shrink:0}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#424242;border:3px solid transparent;background-clip:content-box;border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:#555;background-clip:content-box}

/* ═══════════════════════════════════════════════════════════
   VS CODE LAYOUT
   ═══════════════════════════════════════════════════════════ */
.vscode{
  display:grid;
  grid-template-rows:30px 1fr 22px;
  grid-template-columns:1fr;
  height:100vh;height:100dvh;width:100vw;
  overflow:hidden;
}

/* ── Title Bar ─────────────────────────────────────────── */
.titlebar{
  grid-column:1;grid-row:1;
  background:#323233;
  display:flex;align-items:center;
  border-bottom:1px solid #3c3c3c;
  z-index:20;user-select:none;
  -webkit-app-region:drag;
}
.titlebar-left{
  display:flex;align-items:center;gap:8px;
  padding:0 8px;height:100%;
  border-right:1px solid #3c3c3c;
}
.tb-icon{
  width:28px;height:28px;display:grid;place-items:center;
  color:#999;cursor:pointer;border-radius:4px;
  transition:background .1s;-webkit-app-region:no-drag;
}
.tb-icon:hover{background:rgba(255,255,255,.1);color:#fff}
.app-title{font-size:11px;color:#ccc;font-weight:500;letter-spacing:.3px}

.titlebar-tabs{
  display:flex;align-items:stretch;flex:1;
  overflow-x:auto;scrollbar-width:none;
  height:100%;
}
.titlebar-tabs::-webkit-scrollbar{height:0}

.titlebar-tab{
  display:flex;align-items:center;gap:6px;
  padding:0 12px;height:100%;
  font-size:12px;color:#969696;
  cursor:pointer;border-right:1px solid #252526;
  position:relative;white-space:nowrap;flex-shrink:0;
  transition:background .1s;color .1s;
  -webkit-app-region:no-drag;
}
.titlebar-tab:hover{background:rgba(255,255,255,.04)}
.titlebar-tab.active{
  color:#fff;background:#1e1e1e;
  border-top:1px solid #007acc;
}
.titlebar-tab svg{width:14px;height:14px;flex-shrink:0;color:#569cd6}
.titlebar-tab .tab-close{
  width:18px;height:18px;display:grid;place-items:center;
  border-radius:3px;opacity:0;transition:opacity .1s;margin-left:4px;
}
.titlebar-tab:hover .tab-close{opacity:.5}
.titlebar-tab .tab-close:hover{opacity:1;background:rgba(255,255,255,.15)}
.titlebar-tab .tab-close svg{width:8px;height:8px}

.titlebar-right{
  display:flex;align-items:center;gap:4px;
  padding:0 8px;margin-left:auto;
  -webkit-app-region:no-drag;
}
.tb-separator{width:1px;height:14px;background:#3c3c3c;margin:0 4px}

.mode-badge{
  display:flex;align-items:center;gap:5px;
  padding:2px 8px;background:#0e639c;color:#fff;
  border-radius:3px;font-size:11px;font-weight:500;
}

/* ── Main Layout ───────────────────────────────────────── */
.main-layout{
  display:grid;
  grid-template-columns:auto auto 0 1fr;
  overflow:hidden;min-height:0;
}

/* ── Activity Bar ──────────────────────────────────────── */
.activitybar{
  grid-column:1;grid-row:1;
  width:48px;background:#333333;
  display:flex;flex-direction:column;
  justify-content:space-between;
  border-right:1px solid #3c3c3c;
  z-index:15;
}
.activitybar-top,.activitybar-bottom{
  display:flex;flex-direction:column;align-items:center;
  padding:4px 0;gap:0;
}
.abar-item{
  width:48px;height:48px;display:grid;place-items:center;
  color:#858585;cursor:pointer;position:relative;
  transition:color .1s;-webkit-tap-highlight-color:transparent;
}
.abar-item:hover{color:#fff}
.abar-item.active{color:#fff}
.abar-item.active::before{
  content:'';position:absolute;left:0;top:8px;bottom:8px;
  width:2px;background:#fff;border-radius:0 2px 2px 0;
}
.abar-item svg{width:24px;height:24px;pointer-events:none}

/* ── Sidebar ───────────────────────────────────────────── */
.sidebar{
  grid-column:2;grid-row:1;
  width:0;background:#252526;
  display:flex;flex-direction:column;
  overflow:hidden;z-index:10;
  border-right:1px solid #3c3c3c;
  transition:width .15s ease;
}
.sidebar.open{width:220px}
.sidebar-content{flex:1;overflow:hidden;display:flex;flex-direction:column}

.sidebar-section{display:flex;flex-direction:column;flex:1;min-height:0}
.section-header{
  display:flex;align-items:center;gap:4px;
  padding:0 8px;height:22px;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.5px;color:#bbbbbb;
  cursor:pointer;flex-shrink:0;user-select:none;
  border-bottom:1px solid #252526;
}
.section-header:hover{background:rgba(255,255,255,.04)}
.section-header .chevron{
  width:16px;height:16px;transition:transform .15s;
  transform:rotate(90deg);
}
.section-header .chevron.collapsed{transform:rotate(0deg)}
.section-actions{
  display:flex;gap:2px;margin-left:auto;opacity:0;
  transition:opacity .15s;
}
.section-header:hover .section-actions{opacity:1}
.section-action{
  width:20px;height:20px;display:grid;place-items:center;
  color:#999;cursor:pointer;border-radius:3px;
  transition:background .1s;
}
.section-action:hover{background:rgba(255,255,255,.1);color:#fff}

.section-body{
  flex:1;overflow-y:auto;overflow-x:hidden;
}
.section-body:not(.open){display:none}

.file-list{padding:2px 0}
.file-item{
  display:flex;align-items:center;gap:4px;
  padding:2px 8px 2px 4px;height:22px;
  cursor:pointer;color:#cccccc;font-size:13px;
  transition:background .05s;position:relative;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  -webkit-tap-highlight-color:transparent;
}
.file-item:hover{background:rgba(255,255,255,.08)}
.file-item.active{background:#094771;color:#fff}
.file-item .fi-indent{width:8px;flex-shrink:0}
.file-item .fi-icon{width:16px;height:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.file-item .fi-name{flex:1;overflow:hidden;text-overflow:ellipsis}
.file-item .fi-del{
  opacity:0;transition:opacity .1s;color:#858585;
  cursor:pointer;padding:2px;border-radius:3px;
  flex-shrink:0;
}
.file-item:hover .fi-del{opacity:.7}
.file-item .fi-del:hover{opacity:1;color:#f44;color:#f44;background:rgba(255,68,68,.15)}

.sidebar-footer{
  border-top:1px solid #3c3c3c;padding:8px;
  display:flex;flex-direction:column;gap:6px;
  flex-shrink:0;
}
.obf-btn{
  width:100%;padding:6px;background:#0e639c;color:#fff;
  border:none;border-radius:2px;font-family:'Inter',sans-serif;
  font-size:12px;font-weight:500;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:background .1s;
}
.obf-btn:hover{background:#1177bb}
.obf-btn:disabled{opacity:.4;cursor:not-allowed}
.obf-btn .spin{
  display:inline-block;width:12px;height:12px;
  border:2px solid rgba(255,255,255,.3);border-top-color:#fff;
  border-radius:50%;animation:rot .5s linear infinite;
}
@keyframes rot{to{transform:rotate(360deg)}}

.sidebar-actions{
  display:flex;gap:4px;
}
.sidebar-action{
  flex:1;padding:5px;background:transparent;
  border:1px solid #3c3c3c;border-radius:2px;
  color:#858585;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .1s;
}
.sidebar-action:hover{border-color:#007acc;color:#fff;background:rgba(0,122,204,.1)}

/* ── Resize Handle ─────────────────────────────────────── */
.resize-handle{
  grid-column:3;grid-row:1;
  width:4px;cursor:col-resize;
  background:transparent;transition:background .15s;
  z-index:12;
}
.resize-handle:hover,.resize-handle.dragging{background:#007acc}

/* ── Editor Area ───────────────────────────────────────── */
.editor-area{
  grid-column:4;grid-row:1;
  display:flex;flex-direction:column;
  overflow:hidden;min-width:0;min-height:0;
  background:#1e1e1e;
}

/* Breadcrumbs */
.breadcrumbs{
  display:flex;align-items:center;gap:4px;
  padding:0 8px;height:22px;
  background:#1e1e1e;border-bottom:1px solid #252526;
  font-size:12px;color:#999;flex-shrink:0;
  overflow-x:auto;scrollbar-width:none;
}
.breadcrumbs::-webkit-scrollbar{height:0}
.bc-sep{color:#666;flex-shrink:0}
.bc-item{white-space:nowrap;cursor:pointer;padding:2px 4px;border-radius:3px}
.bc-item:hover{background:rgba(255,255,255,.08);color:#ccc}
.bc-item.active{color:#e0e0e0}

/* Editor Split */
.editor-container{
  flex:1;display:flex;flex-direction:column;
  overflow:hidden;min-height:0;
}
.editor-split{
  flex:1;display:flex;overflow:hidden;
  min-height:0;
}
.editor-pane{
  flex:1 1 0%;display:flex;flex-direction:column;
  min-width:0;position:relative;overflow:hidden;min-height:0;
}
.editor-pane.hidden{display:none}
.editor-pane+.editor-pane{border-left:1px solid #3c3c3c}
.monaco-box{flex:1 1 0%;overflow:hidden;min-height:0;position:relative}
.pane-header{
  display:flex;align-items:center;gap:8px;
  padding:0 12px;height:30px;font-size:11px;
  text-transform:uppercase;letter-spacing:.5px;color:#999;
  background:#1e1e1e;border-bottom:1px solid #252526;
  flex-shrink:0;
}
.pane-close{
  margin-left:auto;cursor:pointer;opacity:.4;
  transition:opacity .1s;display:grid;place-items:center;
}
.pane-close:hover{opacity:1}

/* ── Bottom Panel ──────────────────────────────────────── */
.panel{
  flex-shrink:0;background:#1e1e1e;
  border-top:1px solid #3c3c3c;
  display:flex;flex-direction:column;
  overflow:hidden;
  height:0;
  transition:height .2s ease;
}
.panel.open{height:40vh}
.panel-tabs{
  display:flex;align-items:stretch;
  height:35px;flex-shrink:0;
  background:#252526;
  border-bottom:1px solid #3c3c3c;
}
.panel-tab{
  display:flex;align-items:center;gap:6px;
  padding:0 12px;font-size:11px;text-transform:uppercase;
  letter-spacing:.3px;color:#969696;cursor:pointer;
  position:relative;user-select:none;
  transition:color .1s;
}
.panel-tab:hover{color:#ccc}
.panel-tab.active{color:#fff}
.panel-tab.active::after{
  content:'';position:absolute;bottom:0;left:0;right:0;
  height:1px;background:#007acc;
}
.panel-resize{flex:1}
.panel-actions{display:flex;align-items:center;padding:0 4px}
.panel-action{
  width:22px;height:22px;display:grid;place-items:center;
  color:#999;cursor:pointer;border-radius:3px;
  transition:background .1s;
}
.panel-action:hover{background:rgba(255,255,255,.1);color:#fff}

.panel-body{flex:1;overflow:hidden;display:flex;min-height:0}
.panel-content{display:none;flex:1;overflow:auto;min-height:0}
.panel-content.active{display:flex;flex-direction:column}
.panel-monaco{flex:1;overflow:hidden;min-height:0}
.empty-state{
  display:flex;align-items:center;justify-content:center;
  flex:1;color:#666;font-size:12px;
}

/* Terminal placeholder */
.terminal-placeholder{
  padding:12px 16px;font-family:'JetBrains Mono',monospace;
  font-size:13px;color:#ccc;
}
.terminal-prompt{color:#6a9955}
.terminal-cursor{
  display:inline-block;width:7px;height:14px;
  background:#aeafad;animation:blink 1s step-end infinite;
  vertical-align:text-bottom;
}
@keyframes blink{50%{opacity:0}}

/* ── Status Bar ────────────────────────────────────────── */
.statusbar{
  grid-column:1;grid-row:3;
  background:#007acc;
  display:flex;align-items:center;
  padding:0;font-size:12px;color:#fff;
  z-index:20;overflow-x:auto;
  scrollbar-width:none;flex-shrink:0;
  user-select:none;
}
.statusbar::-webkit-scrollbar{height:0}
.statusbar-left,.statusbar-right{
  display:flex;align-items:center;height:100%;
}
.statusbar-right{margin-left:auto}

.sb-item{
  padding:0 8px;height:100%;
  display:flex;align-items:center;gap:4px;
  white-space:nowrap;cursor:default;
  transition:background .1s;flex-shrink:0;
  font-size:12px;
}
.sb-item:hover{background:rgba(255,255,255,.12)}
.sb-item svg{width:12px;height:12px}
.sb-source{gap:3px}
.sb-source svg{color:#fff}
.sb-mode{
  background:#0e639c;
  padding:0 8px;
}

/* ── Settings Overlay ──────────────────────────────────── */
.settings-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  z-index:50;display:none;
  align-items:center;justify-content:center;
  backdrop-filter:blur(4px);
}
.settings-overlay.active{display:flex}
.settings-panel{
  width:min(560px,92vw);max-height:80vh;
  background:#252526;border:1px solid #3c3c3c;
  border-radius:6px;box-shadow:0 16px 48px rgba(0,0,0,.4);
  display:flex;flex-direction:column;overflow:hidden;
}
.settings-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid #3c3c3c;
  flex-shrink:0;
}
.settings-header h2{font-size:14px;font-weight:600;color:#cccccc}
.settings-close{
  width:28px;height:28px;display:grid;place-items:center;
  background:none;border:none;color:#999;cursor:pointer;
  border-radius:4px;transition:background .1s;
}
.settings-close:hover{background:rgba(255,255,255,.1);color:#fff}

.settings-body{
  flex:1;overflow-y:auto;padding:16px;
  display:flex;flex-direction:column;gap:16px;
}
.settings-section{
  background:#1e1e1e;border:1px solid #3c3c3c;
  border-radius:4px;overflow:hidden;
}
.settings-section.danger{border-color:#5a1d1d}
.settings-section-header{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;font-size:12px;font-weight:600;
  color:#cccccc;border-bottom:1px solid #3c3c3c;
}
.settings-section-header svg{color:#569cd6}
.settings-section.danger .settings-section-header svg{color:#f48771}

.settings-group{padding:14px}
.settings-field{margin-bottom:10px}
.settings-field:last-child{margin-bottom:0}
.settings-field label{
  display:block;font-size:11px;color:#999;
  text-transform:uppercase;letter-spacing:.5px;
  margin-bottom:4px;
}
.settings-field input{
  width:100%;padding:6px 10px;
  background:#3c3c3c;border:1px solid #3c3c3c;
  border-radius:3px;color:#cccccc;
  font-family:'Inter',sans-serif;font-size:13px;
  outline:none;transition:border-color .15s;
  -webkit-appearance:none;
}
.settings-field input:focus{border-color:#007acc}
.settings-field input::placeholder{color:#666}

.enc-options{display:flex;gap:8px}
.enc-opt{
  padding:6px 16px;border:1px solid #3c3c3c;border-radius:3px;
  background:transparent;color:#666;font-size:12px;
  font-weight:500;cursor:not-allowed;transition:all .15s;
  flex:1;text-align:center;font-family:'Inter',sans-serif;
  opacity:.4;
}
.enc-opt.active{
  border-color:#007acc;color:#fff;
  background:rgba(0,122,204,.15);opacity:1;cursor:default;
}

.settings-btn{
  padding:6px 14px;border:none;border-radius:3px;
  font-family:'Inter',sans-serif;font-size:12px;font-weight:500;
  cursor:pointer;transition:all .15s;margin-top:8px;
  -webkit-tap-highlight-color:transparent;
}
.settings-btn:active{transform:scale(.98)}
.settings-btn.primary{background:#0e639c;color:#fff}
.settings-btn.primary:hover{background:#1177bb}
.settings-btn.danger{background:#5a1d1d;color:#f48771;border:1px solid #5a1d1d}
.settings-btn.danger:hover{background:#6e2020}

.settings-msg{font-size:12px;margin-top:6px;min-height:16px}
.settings-msg.info{color:#888}
.settings-msg.err{color:#f48771}
.settings-msg.ok{color:#89d185}

.settings-about{
  text-align:center;padding:16px;color:#555;font-size:11px;
  border-top:1px solid #3c3c3c;
}
.settings-about p+p{margin-top:2px}

/* ── Toast ─────────────────────────────────────────────── */
.toast-container{
  position:fixed;bottom:32px;right:16px;
  display:flex;flex-direction:column;gap:6px;
  z-index:999;pointer-events:none;
}
.toast{
  padding:8px 14px;border-radius:4px;
  font-size:12px;animation:toastIn .2s ease;
  display:flex;align-items:center;gap:8px;
  max-width:calc(100vw - 32px);
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.toast.ok{background:#1e4d2b;color:#89d185;border:1px solid #2d5a1e}
.toast.er{background:#5a1d1d;color:#f48771;border:1px solid #6e2020}
.toast svg{width:14px;height:14px;flex-shrink:0}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── Command Palette ───────────────────────────────────── */
.command-palette{
  position:fixed;inset:0;z-index:100;
  display:none;align-items:flex-start;justify-content:center;
  padding-top:min(60px,20vh);
  background:rgba(0,0,0,.3);
}
.command-palette.open{display:flex}
.palette-box{
  width:min(600px,92vw);background:#252526;
  border:1px solid #454545;border-radius:6px;
  box-shadow:0 8px 30px rgba(0,0,0,.5);
  overflow:hidden;animation:paletteIn .15s ease;
}
@keyframes paletteIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.palette-input-wrap{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;border-bottom:1px solid #3c3c3c;
}
.palette-icon{color:#999;flex-shrink:0}
.palette-input{
  flex:1;background:transparent;border:none;
  color:#cccccc;font-family:'Inter',sans-serif;
  font-size:14px;outline:none;
  -webkit-appearance:none;
}
.palette-input::placeholder{color:#666}
.palette-list{max-height:300px;overflow-y:auto;padding:4px 0}
.palette-item{
  display:flex;align-items:center;gap:10px;
  padding:6px 14px;cursor:pointer;font-size:13px;
  transition:background .05s;
}
.palette-item:hover,.palette-item.selected{background:#094771;color:#fff}
.palette-item svg{width:14px;height:14px;color:#569cd6;flex-shrink:0}
.palette-item .ctx-key{
  margin-left:auto;font-size:11px;color:#666;
  font-family:'JetBrains Mono',monospace;
}
.palette-item:hover .ctx-key{color:#999}

/* ── Context Menu ──────────────────────────────────────── */
.context-menu{
  position:fixed;z-index:110;
  display:none;min-width:180px;
  background:#252526;border:1px solid #454545;
  border-radius:4px;padding:4px 0;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.context-menu.open{display:block}
.ctx-item{
  display:flex;align-items:center;gap:8px;
  padding:4px 12px;font-size:12px;color:#cccccc;
  cursor:pointer;transition:background .05s;
}
.ctx-item:hover{background:#094771;color:#fff}
.ctx-item svg{color:#999;flex-shrink:0}
.ctx-item:hover svg{color:#fff}
.ctx-key{
  margin-left:auto;font-size:11px;color:#666;
  font-family:'JetBrains Mono',monospace;
}
.ctx-item:hover .ctx-key{color:#999}
.ctx-separator{height:1px;background:#3c3c3c;margin:4px 0}

/* ── Rename input ──────────────────────────────────────── */
.rename-input{
  background:#3c3c3c;border:1px solid #007acc;
  color:#fff;font-size:12px;padding:1px 4px;
  border-radius:2px;outline:none;width:100%;
  font-family:'Inter',sans-serif;
}

/* ── Loading overlay ───────────────────────────────────── */
.loading-overlay{
  position:fixed;inset:0;background:#1e1e1e;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:12px;z-index:9999;
}
.loading-spinner{
  width:30px;height:30px;
  border:3px solid #333;border-top-color:#007acc;
  border-radius:50%;animation:rot .6s linear infinite;
}
.loading-overlay::after{
  content:'Argius Obfuscator';font-size:14px;
  color:#666;font-weight:500;letter-spacing:.5px;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
.mobile-tools{display:none}

@media(max-width:1024px){
  .sidebar.open{width:200px}
}

@media(max-width:768px){
  .activitybar{display:none}
  .main-layout{grid-template-columns:0 0 0 1fr}
  .resize-handle{display:none}
  .mobile-tools{display:flex;align-items:center;gap:2px}

  .sidebar{
    position:fixed;top:30px;left:0;bottom:0;
    width:min(280px,80vw);z-index:30;
    box-shadow:4px 0 16px rgba(0,0,0,.4);
    transform:translateX(-100%);
    transition:transform .2s ease;
  }
  .sidebar.open{
    width:100%;
    transform:translateX(0);
  }

  .titlebar-tabs{display:none}
  .titlebar-right{gap:4px}
  .mode-badge{font-size:10px;padding:2px 6px}
  .sb-mode{display:none}

  .statusbar{display:none}

  .settings-panel{width:100%;max-height:100vh;border-radius:0}
  .settings-field input{font-size:16px}
}

@media(max-width:400px){
  .mode-badge{display:none}
  .sb-chars{display:none}
}

@media(hover:none)and(pointer:coarse){
  .abar-item{width:48px;height:48px}
  .file-item{height:36px;padding:4px 8px}
  .ctx-item{padding:8px 12px}
}

@supports(padding:max(0px)){
  .titlebar{padding-left:max(0px,env(safe-area-inset-left))}
  .titlebar{padding-right:max(0px,env(safe-area-inset-right))}
  .statusbar{padding-left:max(0px,env(safe-area-inset-left))}
  .statusbar{padding-right:max(0px,env(safe-area-inset-right))}
}