*{box-sizing:border-box}
:root{
  --bg:#0f1115; --panel:#161922; --muted:#93a1b1; --text:#e6edf3; --brand:#6ea8fe;
  --line:#242938; --ok:#34d399; --bad:#ef4444; --accent:#8b5cf6;
}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text); font:14px/1.4 system-ui,Segoe UI,Roboto,Inter,Arial;
}
.topbar{
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--line); background:#0b0d12; position:sticky; top:0; z-index:10;
}
.brand{font-weight:700; letter-spacing:.2px}
.status{font-size:12px; color:var(--muted)}
.auth-area .btn{margin-left:8px}

.grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:14px; height:calc(100vh - 56px)}
.pane{
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px;
  display:flex; flex-direction:column; min-height:0;
}
.pane-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.muted{color:var(--muted); margin:6px 0 10px}

.tree{list-style:none; margin:0; padding:0; overflow:auto; flex:1; border:1px dashed #1f2538; border-radius:10px}
.tree li{padding:6px 10px; border-bottom:1px solid #1b2032; display:flex; align-items:center; gap:8px}
.tree li:hover{background:#1a1f2f}
.tree .dir{cursor:pointer; font-weight:600; color:#ffd166}
.tree .file{cursor:grab; color:#8bd5ff;}

.card{background:#121522; border:1px solid #21263a; border-radius:12px; padding:14px; margin-bottom:10px}
.form-row{display:flex; flex-direction:column; gap:6px; margin:8px 0}
.form-row input{background:#0e1322; border:1px solid #1e2540; color:var(--text); border-radius:10px; padding:8px}

.toolbar{display:flex; gap:8px; margin:8px 0 10px}
.toolbar input{flex:1; background:#0e1322; border:1px solid #1e2540; color:var(--text); border-radius:10px; padding:8px}

.breadcrumb{margin:6px 0 10px; font-size:13px}
.breadcrumb a{color:#9ad0ff; text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}

.dropzone{
  margin-top:10px; border:2px dashed #334155; border-radius:12px; min-height:90px;
  display:flex; align-items:center; justify-content:center; color:#9ca3af;
}
.dropzone.drag{border-color:var(--brand); color:#cfe1ff; background:#0d1428}

.btn{background:linear-gradient(180deg,#5ea1ff,#3b82f6); color:white; border:0; padding:8px 12px; border-radius:10px; cursor:pointer}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}
.btn-outline{background:transparent; border:1px solid #334155; color:#cfe1ff}
.btn-outline:hover{background:#0b1328}

.hidden{display:none}

.toast{
  position:fixed; top:14px; right:14px; background:#0b1328; border:1px solid #1e2a52;
  padding:10px 14px; color:#d1e7ff; border-radius:10px; z-index:9999; box-shadow:0 6px 24px rgba(0,0,0,.3)
}