:root{
  --bg:#12161c;
  --panel:#181d25;
  --panel-2:#1f2530;
  --border:#2a3140;
  --border-strong:#3a4356;
  --text:#e7eaef;
  --text-muted:#8b93a3;
  --accent:#4fd1ae;
  --accent-dark:#1f6e5c;
  --danger:#e2574c;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{font-family:var(--sans);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;}
button, input{font-family:inherit;}
input{
  background:var(--panel-2);border:1px solid var(--border);color:var(--text);
  border-radius:8px;padding:11px 12px;font-size:14px;width:100%;outline:none;
  transition:border-color .15s ease;
}
input:focus{border-color:var(--accent);}
input::placeholder{color:var(--text-muted);}
input:disabled{opacity:.6;}
button{cursor:pointer;border:none;border-radius:8px;font-size:14px;font-weight:500;}
.btn-primary{background:var(--accent);color:#0b1613;padding:12px 16px;width:100%;}
.btn-primary:hover{background:#68dcbc;}
.btn-ghost{background:transparent;color:var(--text-muted);border:1px solid var(--border);padding:9px 12px;}
.btn-ghost:hover{color:var(--text);border-color:var(--border-strong);}
.link-btn{background:none;border:none;color:var(--accent);font-size:13px;cursor:pointer;padding:0;text-align:left;}
.link-btn:hover{text-decoration:underline;}
.hidden{display:none !important;}
.error-text{color:var(--danger);font-size:13px;margin-top:2px;}
.success-text{color:var(--accent);font-size:13px;margin-top:2px;}
.hint-text{color:var(--text-muted);font-size:12px;margin:4px 0 0;line-height:1.5;}
.field-label{font-size:12px;color:var(--text-muted);margin:0 0 6px;display:block;}
.field{margin-bottom:16px;}

#authScreen{height:100%;display:flex;align-items:center;justify-content:center;padding:24px;}
.auth-card{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:32px 28px;}
.auth-mark{width:320px;height:38px;border-radius:9px;background:var(--accent-dark);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:17px;font-weight:600;margin-bottom:20px;}
.auth-title{font-size:19px;font-weight:600;margin:0 0 4px;}
.auth-sub{font-size:13px;color:var(--text-muted);margin:0 0 24px;line-height:1.5;}

#dashboard{display:flex;height:100vh;width:100vw;}
#sidebar{width:260px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:18px 14px;}
.sidebar-user{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 18px;border-bottom:1px solid var(--border);margin-bottom:16px;}
.sidebar-user-name{font-size:14px;font-weight:500;}
.icon-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:6px;border-radius:6px;display:flex;align-items:center;justify-content:center;}
.icon-btn:hover{color:var(--text);background:var(--panel-2);}
.sidebar-section-label{font-size:11px;letter-spacing:.02em;color:var(--text-muted);padding:0 8px;margin:4px 0 8px;}
#serviceList{flex:1;overflow-y:auto;}
.service-item{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:10px 10px;border-radius:8px;cursor:pointer;margin-bottom:2px;color:var(--text-muted);}
.service-item:hover{background:var(--panel-2);color:var(--text);}
.service-item.active{background:var(--panel-2);color:var(--text);}
.service-item.active .service-dot{background:var(--accent);}
.service-main{display:flex;align-items:center;gap:10px;overflow:hidden;flex:1;min-width:0;}
.service-dot{width:7px;height:7px;border-radius:50%;background:var(--border-strong);flex-shrink:0;}
.service-name{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.service-remove{opacity:0;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:15px;line-height:1;padding:2px 4px;flex-shrink:0;}
.service-item:hover .service-remove{opacity:1;}
.service-remove:hover{color:var(--danger);}
#addServiceBtn{margin-top:10px;background:none;border:1px dashed var(--border-strong);color:var(--text-muted);padding:10px;border-radius:8px;width:100%;font-size:13px;}
#addServiceBtn:hover{color:var(--accent);border-color:var(--accent);}
.sidebar-footer{border-top:1px solid var(--border);margin-top:14px;padding-top:14px;display:flex;gap:8px;}
.sidebar-footer button{flex:1;font-size:12.5px;padding:9px;}

#main{flex:1;position:relative;display:flex;flex-direction:column;min-width:0;}
#frameBar{height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--border);font-size:13px;color:var(--text-muted);}
#frameBarUrl{font-family:var(--mono);font-size:12px;}
#frameArea{flex:1;position:relative;}
#serviceFrame{width:100%;height:100%;border:none;background:#fff;display:block;}
#emptyState{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-muted);text-align:center;padding:20px;}
#emptyState .em-title{font-size:16px;color:var(--text);margin-bottom:6px;font-weight:500;}
#emptyState .em-sub{font-size:13px;max-width:320px;line-height:1.5;}

#filesPanel{height:100%;display:flex;flex-direction:column;overflow:hidden;}
#filesToolbar{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);gap:16px;}
.files-title{font-size:16px;font-weight:600;margin:0 0 4px;}
.files-sub{font-size:13px;color:var(--text-muted);margin:0;}
#filesListWrap{flex:1;overflow-y:auto;padding:8px 24px 24px;}
#filesTable{width:100%;border-collapse:collapse;font-size:13.5px;}
#filesTable thead th{text-align:left;color:var(--text-muted);font-weight:500;font-size:12px;padding:10px 8px;border-bottom:1px solid var(--border);}
#filesTable tbody td{padding:10px 8px;border-bottom:1px solid var(--border);vertical-align:middle;}
#filesTable tbody tr:last-child td{border-bottom:none;}
.file-name{word-break:break-all;}
.file-actions{display:flex;gap:8px;justify-content:flex-end;}
.file-actions a, .file-actions button{font-size:12.5px;padding:6px 10px;}
#filesEmpty{padding:40px 0;text-align:center;color:var(--text-muted);}
#filesEmpty .em-title{font-size:15px;color:var(--text);margin-bottom:6px;font-weight:500;}
#filesEmpty .em-sub{font-size:13px;}

.overlay{position:absolute;inset:0;background:rgba(8,10,13,.6);display:flex;align-items:center;justify-content:center;z-index:20;padding:20px;}
.modal{width:100%;max-width:400px;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:24px;max-height:90vh;overflow-y:auto;}
.modal-title{font-size:16px;font-weight:600;margin:0 0 4px;}
.modal-sub{font-size:12.5px;color:var(--text-muted);margin:0 0 20px;line-height:1.5;}
.modal-actions{display:flex;gap:10px;margin-top:6px;}
.modal-actions button{flex:1;}
.modal-divider{border-top:1px solid var(--border);margin:22px 0;}