*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --bg:#0d0d14;--surface:#14141f;--surface-el:#1a1a2e;--border:#252538;
  --text:#e4e4ef;--text-dim:#7a7a95;--accent:#00aa2a;--accent-h:#00cc33;
  --success:#34d399;--warning:#fbbf24;--error:#f87171;
  --font:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'JetBrains Mono','Fira Code',monospace;
  --radius:8px;
}
html,body{height:100%;font-family:var(--font);background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;overflow:hidden;}
.hidden{display:none!important;}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}

.matrix-screen{display:inline-flex;flex-direction:column;gap:1px;font-family:var(--mono);font-size:7px;line-height:1;color:var(--success);background:#0a0f0a;border:1px solid #1a3a1a;border-radius:2px;padding:2px 3px;text-shadow:0 0 4px rgba(52,211,153,0.6);}
.login-logo{font-size:56px;margin-bottom:16px;}
.m-char{display:inline;opacity:.9;}.m-char:nth-child(odd){opacity:1;}.m-char:nth-child(3n){opacity:.5;color:#22c55e;}

.login-screen{display:flex;align-items:center;justify-content:center;height:100vh;}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:48px;width:400px;text-align:center;}
.login-title{font-size:22px;margin-bottom:6px;font-weight:600;}
.login-sub{color:var(--text-dim);font-size:14px;margin-bottom:24px;}
.login-card input{width:100%;padding:12px 16px;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:14px;font-family:var(--mono);outline:none;margin-bottom:16px;}
.login-card input:focus{border-color:var(--accent);}
.login-error{color:var(--error);font-size:13px;margin-top:8px;}

.btn{padding:6px 12px;border:none;border-radius:5px;font-size:12px;cursor:pointer;font-weight:500;transition:all .15s;font-family:var(--font);}
.btn-accent{background:var(--accent);color:#fff;}.btn-accent:hover{background:var(--accent-h);}
.btn-ghost{background:var(--surface-el);color:var(--text);border:1px solid var(--border);}.btn-ghost:hover{border-color:var(--accent);}
.btn-danger{background:var(--error);color:#fff;}.btn-danger:hover{opacity:.85;}
.btn-sm{padding:3px 8px;font-size:11px;}
.login-btn{width:100%;padding:12px;font-size:14px;}

/* TOPBAR */
.topbar{display:flex;align-items:center;height:40px;background:var(--surface);border-bottom:1px solid var(--border);padding:0 16px;gap:12px;flex-shrink:0;}
.topbar-left{display:flex;align-items:center;gap:6px;}
.topbar-logo{display:flex;align-items:center;gap:8px;}
.topbar-logo-img{width:22px;height:22px;border-radius:3px;}
.topbar-icon{font-size:18px;}.topbar-brand{font-size:14px;font-weight:700;letter-spacing:.3px;}
.topbar-stats{display:flex;align-items:center;gap:10px;font-size:11px;font-family:var(--mono);color:var(--text-dim);white-space:nowrap;}
.topbar-stats .ts-sep{color:var(--border);}
.topbar-search{position:relative;width:50%;min-width:200px;margin:0 auto;}
.topbar-search input{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:5px 10px;font-size:12px;font-family:var(--mono);color:var(--text);outline:none;}
.topbar-search input:focus{border-color:var(--accent);}
.topbar-search input::placeholder{color:var(--text-dim);}
#topbar-stats-right{margin-right:8px;}
.search-dropdown{position:absolute;top:100%;left:0;right:0;margin-top:4px;background:var(--surface);border:1px solid var(--border);border-radius:6px;max-height:340px;overflow-y:auto;z-index:200;}
.search-result{padding:6px 10px;cursor:pointer;font-size:11px;font-family:var(--mono);border-bottom:1px solid var(--border);}
.search-result:last-child{border-bottom:none;}
.search-result:hover{background:var(--surface-el);}
.search-result .sr-path{color:var(--accent);}
.search-result .sr-line{color:var(--text-dim);font-size:10px;}
.search-result .sr-text{color:var(--text-dim);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ts-bar{display:inline-block;width:36px;height:3px;background:var(--border);border-radius:2px;overflow:hidden;vertical-align:middle;}
.ts-bar-fill{display:block;height:100%;border-radius:2px;transition:width .5s;}
.topbar-right{display:flex;align-items:center;}
.hamburger-wrap{position:relative;}
.hamburger-btn{background:none;border:1px solid var(--border);color:var(--text);font-size:16px;cursor:pointer;padding:4px 8px;border-radius:4px;line-height:1;}
.hamburger-btn:hover{border-color:var(--accent);}
.hamburger-menu{position:absolute;right:0;top:100%;margin-top:4px;background:var(--surface);border:1px solid var(--border);border-radius:6px;min-width:180px;z-index:100;overflow:hidden;}
.menu-item{padding:8px 12px;font-size:12px;display:flex;align-items:center;gap:8px;cursor:default;}
.menu-item:hover{background:var(--surface-el);}
.menu-item input[type=checkbox]{cursor:pointer;}
.menu-action{cursor:pointer;color:var(--text-dim);}
.menu-action:hover{color:var(--accent);}
.menu-divider{height:1px;background:var(--border);margin:4px 0;}
.menu-label{font-size:10px;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-dim);opacity:0.6;}
.act-sep{color:var(--border);margin:0 2px;font-size:10px;}

/* APP LAYOUT */
.app{display:flex;flex-direction:column;height:100vh;}
.page{flex:1;overflow:hidden;padding:10px;}

/* FILE PANEL */
.main-area{height:100%;}
.file-panel{height:100%;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);}
.panel-header{display:flex;justify-content:space-between;align-items:center;padding:6px 12px;border-bottom:1px solid var(--border);flex-shrink:0;font-family:var(--mono);font-size:11px;color:var(--text-dim);}
.path-input{flex:1;background:transparent;border:1px solid transparent;color:var(--text);font-family:var(--mono);font-size:12px;padding:4px 8px;border-radius:4px;outline:none;}
.path-input:focus{border-color:var(--accent);background:var(--bg);}
.path-input:hover{border-color:var(--border);}
.panel-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--text-dim);}
.panel-title span{cursor:pointer;}.panel-title span:hover{color:var(--accent);}
.file-actions{display:flex;gap:4px;}
.file-body{display:flex;flex:1;min-height:0;overflow:hidden;}
.file-tree-wrap{width:240px;flex-shrink:0;border-right:1px solid var(--border);display:flex;flex-direction:column;position:relative;}
.file-tree-col{flex:1;overflow-y:auto;padding:4px;}
/* Upload progress bar */
.upload-progress{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:10px 14px;display:flex;align-items:center;gap:10px;z-index:9998;min-width:280px;max-width:400px;box-shadow:0 4px 20px rgba(0,0,0,.5);}
.upload-progress.hidden{display:none!important;}
.write-notice{position:fixed;bottom:16px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--surface);border:1px solid var(--success);border-radius:8px;padding:10px 18px;display:flex;align-items:center;gap:10px;z-index:9998;box-shadow:0 4px 20px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;}
.write-notice.wn-in{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;}
.write-notice.wn-out{opacity:0;transform:translateX(-50%) translateY(20px);pointer-events:none;}
.wn-icon{color:var(--success);font-size:16px;font-weight:700;line-height:1;}
.wn-label{font-size:12px;font-family:var(--mono);color:var(--text-dim);white-space:nowrap;}
.up-bar{flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden;}
.up-fill{height:100%;background:var(--accent);border-radius:3px;transition:width .15s;width:0%;}
.up-label{font-size:11px;font-family:var(--mono);color:var(--text-dim);white-space:nowrap;}
.up-cancel{background:none;border:1px solid var(--border);color:var(--text-dim);font-size:12px;cursor:pointer;padding:2px 6px;border-radius:3px;line-height:1;}
.up-cancel:hover{border-color:var(--error);color:var(--error);}
.file-editor-col{flex:1;display:flex;flex-direction:column;min-width:0;}
.file-editor-col textarea{flex:1;width:100%;background:transparent;border:none;color:var(--text);font-family:var(--mono);font-size:12px;padding:10px 14px;resize:none;outline:none;line-height:1.6;}

/* Preview mode */

.preview-content{flex:1;overflow-y:auto;padding:16px 20px;font-size:13px;line-height:1.7;}
.preview-content h1,.preview-content h2,.preview-content h3{color:var(--text);margin:16px 0 8px;}
.preview-content h1{font-size:20px;border-bottom:1px solid var(--border);padding-bottom:6px;}
.preview-content h2{font-size:16px;}
.preview-content h3{font-size:14px;}
.preview-content p{margin:6px 0;}
.preview-content a{color:var(--accent);}
.preview-content code{background:var(--surface-el);padding:1px 4px;border-radius:3px;font-family:var(--mono);font-size:12px;}
.preview-content pre{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:12px;margin:8px 0;overflow-x:auto;}
.preview-content pre code{background:none;padding:0;}
.preview-content blockquote{border-left:3px solid var(--accent);margin:8px 0;padding:4px 12px;color:var(--text-dim);}
.preview-content ul,.preview-content ol{padding-left:20px;margin:6px 0;}
.preview-content li{margin:2px 0;}
.preview-content table{border-collapse:collapse;margin:8px 0;width:100%;}
.preview-content th,.preview-content td{border:1px solid var(--border);padding:4px 8px;font-size:12px;}
.preview-content th{background:var(--surface-el);}
.preview-content hr{border:none;border-top:1px solid var(--border);margin:12px 0;}
.preview-content img{max-width:100%;}

/* Code view (highlighted) */
.code-view{flex:1;overflow:auto;padding:0;margin:0;background:transparent;}
.code-view pre{margin:0;padding:12px 14px;background:transparent;border:none;}
.code-view code{font-family:var(--mono);font-size:12px;line-height:1.6;}

.fti{padding:4px 8px;cursor:pointer;font-size:12px;border-radius:3px;display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fti:hover{background:var(--surface-el);}
.fti.fti-hidden{opacity:0.4;}
.fti.fti-selected{background:rgba(0,170,42,.15);border-left:2px solid var(--accent);padding-left:6px;}
.fti.fti-dragging{opacity:0.4;}
.fti.fti-drop-over{background:rgba(0,170,42,.25);outline:1px dashed var(--accent);outline-offset:-1px;}
.fti .fi{width:16px;text-align:center;flex-shrink:0;font-size:12px;}
.fti .fs{margin-left:auto;font-size:9px;color:var(--text-dim);padding-left:6px;}
.fti .fti-name{overflow:hidden;text-overflow:ellipsis;}

/* ACTION BAR (file tree bottom) */
.action-bar{position:absolute;bottom:8px;left:8px;right:8px;display:flex;gap:4px;align-items:center;z-index:10;flex-wrap:wrap;}
.ab-sort{margin-left:auto;background:var(--surface-el);border:1px solid var(--border);color:var(--text-dim);font-size:10px;padding:3px 4px;border-radius:4px;cursor:pointer;font-family:var(--mono);outline:none;appearance:auto;flex-shrink:0;}
.ab-sort:hover{border-color:var(--accent);color:var(--text);}
.ab-btn{background:var(--surface-el);border:1px solid var(--border);color:var(--text-dim);font-size:10px;padding:3px 7px;border-radius:4px;cursor:pointer;font-family:var(--mono);white-space:nowrap;transition:all .15s;}
.ab-btn:hover{border-color:var(--accent);color:var(--text);}
.ab-btn.ab-del:hover:not(.ab-disabled){border-color:var(--error);color:var(--error);}
.ab-clip-indicator{font-size:10px;color:var(--text-dim);opacity:0.6;padding:0 2px;font-family:var(--mono);}
.ab-sel-count{font-size:10px;color:var(--accent);font-family:var(--mono);opacity:0.7;}

/* Preview/Edit active state */
#pb-preview,#pb-edit{transition:all .15s;}
#pb-preview.pb-active,#pb-edit.pb-active{color:var(--accent);border-color:var(--accent);}
.file-empty{padding:40px 20px;text-align:center;color:var(--text-dim);font-size:13px;}
.file-empty-icon{font-size:32px;margin-bottom:8px;opacity:.4;}

/* CRONS BAR (bottom) */
.bottom-panel{flex-shrink:0;background:var(--surface);border-top:1px solid var(--border);padding:0;max-height:20vh;display:flex;flex-direction:column;}
.bottom-panel.collapsed{max-height:auto;}
.bottom-panel.collapsed .bottom-panel-list{display:none;}
.bottom-panel-header{display:flex;justify-content:space-between;align-items:center;padding:6px 16px;cursor:pointer;user-select:none;border-bottom:1px solid var(--border);flex-shrink:0;}
.bottom-panel-header:hover{background:var(--surface-el);}
.bottom-tabs{display:flex;gap:0;}
.bt-tab{padding:4px 12px;font-size:11px;font-family:var(--mono);color:var(--text-dim);cursor:pointer;border-radius:4px;}
.bt-tab:hover{color:var(--text);}
.bt-tab.active{color:var(--accent);background:rgba(91,108,247,.1);}
.bottom-panel-list{overflow-y:auto;flex:1;}
.activity-toggle{font-size:8px;color:var(--text-dim);}
.cron-row{display:flex;align-items:center;gap:12px;padding:8px 16px;font-size:12px;border-bottom:1px solid var(--border);}
.cron-row:last-child{border-bottom:none;}
.ci-name{font-weight:500;white-space:nowrap;}
.ci-desc{font-family:var(--mono);font-size:10px;color:var(--text-dim);white-space:nowrap;}
.ci-next{font-family:var(--mono);font-size:10px;color:var(--accent);white-space:nowrap;}
.ci-result-col{margin-left:auto;white-space:nowrap;}
.ci-result{font-family:var(--mono);font-size:11px;color:var(--accent);cursor:pointer;}
.ci-result:hover{text-decoration:underline;}
.ci-result-dim{font-family:var(--mono);font-size:10px;color:var(--text-dim);}
.activity-entry{padding:4px 16px;font-size:11px;font-family:var(--mono);color:var(--text-dim);border-bottom:1px solid var(--border);display:flex;gap:8px;}
.activity-entry:last-child{border-bottom:none;}
.ae-time{color:var(--text-dim);white-space:nowrap;font-size:10px;}
.ae-text{color:var(--text);}
.ci-actions{display:flex;gap:3px;}
.badge{display:inline-block;padding:1px 5px;border-radius:3px;font-size:9px;font-weight:600;text-transform:uppercase;}
.badge-success{background:rgba(52,211,153,.12);color:var(--success);}
.badge-warning{background:rgba(251,191,36,.12);color:var(--warning);}
.badge-error{background:rgba(248,113,113,.12);color:var(--error);}
.badge-secondary{background:rgba(122,122,149,.12);color:var(--text-dim);}

/* FORMS */
.form-group{margin-bottom:12px;}
.form-group label{display:block;font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px;}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:8px 10px;background:var(--bg);border:1px solid var(--border);border-radius:5px;color:var(--text);font-size:12px;font-family:var(--mono);outline:none;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--accent);}
.form-group textarea{min-height:60px;resize:vertical;}

/* MODAL */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);z-index:1000;display:flex;align-items:center;justify-content:center;}
.modal-content{background:var(--surface);border:1px solid var(--border);border-radius:10px;width:440px;max-width:90vw;max-height:85vh;overflow-y:auto;padding:20px;}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.modal-header h3{font-size:15px;font-weight:600;}
.modal-close{background:none;border:none;color:var(--text-dim);font-size:18px;cursor:pointer;}

/* TOAST */
.toast-container{position:fixed;top:12px;right:12px;z-index:9999;display:flex;flex-direction:column;gap:4px;}
.toast{padding:8px 14px;background:var(--surface-el);border:1px solid var(--border);border-radius:6px;font-size:12px;box-shadow:0 4px 12px rgba(0,0,0,.4);animation:slideIn .2s ease;transition:opacity .3s;}
.toast-success{border-left:3px solid var(--success);}
.toast-error{border-left:3px solid var(--error);}
.toast-warning{border-left:3px solid var(--warning);}
@keyframes slideIn{from{transform:translateX(100%);opacity:0;}to{transform:translateX(0);opacity:1;}}

/* DROP */
.drop-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(91,108,247,.12);border:3px dashed var(--accent);z-index:999;display:flex;align-items:center;justify-content:center;}
.drop-overlay-inner{text-align:center;color:var(--accent);font-size:18px;font-weight:600;}
.drop-icon{font-size:48px;display:block;margin-bottom:8px;}

.spinner-sm{display:inline-block;width:12px;height:12px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

@media(max-width:768px){.file-tree-wrap{width:160px;}.bottom-panel-list{flex-wrap:wrap;}.cron-item{border-right:none;border-bottom:1px solid var(--border);}}