* { box-sizing: border-box; }
body { margin:0; font-family: Arial, sans-serif; background:#0b1220; color:#e7eefc; }
a { color:#a9c1ff; text-decoration:none; }
a:hover { text-decoration:underline; }

.auth { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.auth-card { width:420px; max-width:100%; background:#101b34; border:1px solid rgba(255,255,255,0.08); border-radius:16px; padding:22px; }
.auth-card h1 { margin:0 0 16px; font-size:20px; }
label { display:block; margin-top:12px; font-size:13px; color:#b8c6ea; }
input, textarea, select { width:100%; margin-top:6px; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.10); background:#0c152d; color:#e7eefc; outline:none; }
input:focus, textarea:focus, select:focus { border-color:rgba(169,193,255,0.8); box-shadow:0 0 0 3px rgba(169,193,255,0.12); }
button { margin-top:14px; padding:11px 12px; width:100%; background:linear-gradient(135deg,#4a6cf7,#7b61ff); color:white; border:none; border-radius:12px; cursor:pointer; font-weight:600; }
button.secondary { background:#13224a; border:1px solid rgba(255,255,255,0.10); }
button:disabled { opacity:0.6; cursor:not-allowed; }
.auth-links { margin-top:14px; font-size:13px; color:#b8c6ea; }
.alert { margin-top:14px; padding:10px 12px; border-radius:12px; background:rgba(255,90,90,0.15); border:1px solid rgba(255,90,90,0.30); color:#ffd4d4; font-size:13px; }
.alert.ok { background:rgba(60,220,170,0.15); border-color:rgba(60,220,170,0.30); color:#d9fff0; }

.app { height:100vh; display:flex; }
.sidebar { width:320px; max-width:45vw; background:#0f1932; border-left:1px solid rgba(255,255,255,0.07); display:flex; flex-direction:column; }
.side-top { padding:16px; border-bottom:1px solid rgba(255,255,255,0.07); }
.brand { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.brand h2 { margin:0; font-size:16px; }
.meta { margin-top:10px; font-size:12px; color:#b8c6ea; display:flex; justify-content:space-between; }
.file-actions { margin-top:12px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.file-actions input[type="file"] { padding:8px; }
.file-tree { flex:1; overflow:auto; padding:10px; }
.file-item { padding:8px 10px; border-radius:10px; cursor:pointer; font-size:13px; color:#d7e3ff; display:flex; gap:8px; align-items:center; }
.file-item .file-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-item:hover { background:rgba(255,255,255,0.06); }
.file-item.active { background:rgba(169,193,255,0.12); border:1px solid rgba(169,193,255,0.18); }
.badge { font-size:11px; padding:2px 8px; border-radius:999px; background:rgba(255,255,255,0.08); color:#cfe0ff; }

.main { flex:1; display:flex; flex-direction:column; }
.topbar { padding:14px 16px; border-bottom:1px solid rgba(255,255,255,0.07); background:#0b1220; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.topbar .right { display:flex; gap:10px; align-items:center; }
.pill { padding:6px 10px; border-radius:999px; background:rgba(255,255,255,0.08); font-size:12px; color:#d7e3ff; }
.layout { flex:1; display:grid; grid-template-columns:1.2fr 1fr; min-height:0; }
.panel { min-height:0; display:flex; flex-direction:column; border-left:1px solid rgba(255,255,255,0.07); }
.panel:first-child { border-left:none; }
.panel-head { padding:12px 14px; border-bottom:1px solid rgba(255,255,255,0.07); color:#b8c6ea; font-size:12px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.panel-body { flex:1; min-height:0; overflow:auto; padding:12px; }
.editor { width:100%; height:100%; min-height:340px; resize:none; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:12px; line-height:1.45; }
.chat { display:flex; flex-direction:column; min-height:0; height:100%; }
.messages { flex:1; overflow:auto; display:flex; flex-direction:column; gap:10px; padding:12px; }
.msg { max-width:92%; padding:10px 12px; border-radius:14px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.05); white-space:pre-wrap; word-wrap:break-word; line-height:1.65; font-size:13px; unicode-bidi:plaintext; text-align:start; }
.msg.user { align-self:flex-start; background:rgba(169,193,255,0.10); border-color:rgba(169,193,255,0.18); }
.msg.ai { align-self:flex-end; background:rgba(255,255,255,0.05); }
.composer { padding:12px; border-top:1px solid rgba(255,255,255,0.07); display:grid; grid-template-columns:1fr 120px; gap:10px; }
.composer textarea { height:44px; resize:none; }
.changes { display:flex; flex-direction:column; gap:10px; }
.change-card { border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.04); border-radius:14px; padding:10px 12px; }
.change-card .path { font-size:12px; color:#b8c6ea; margin-bottom:8px; display:flex; justify-content:space-between; gap:10px; }
.change-card pre { margin:0; max-height:160px; overflow:auto; font-size:12px; }

@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { width: 300px; }
}