:root{--gap:12px;--pad:12px;--bg:#0f1720;--panel:#0b1220;--muted:#9aa4b2;--muted-2:#7d8790;--accent:#3b82f6}
body{font-family:Segoe UI,Arial,Helvetica,sans-serif;margin:0;background:var(--bg);color:#e6eef6}
.toolbar{padding:10px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));display:flex;gap:8px;align-items:center;box-shadow:0 1px 0 rgba(255,255,255,0.02)}
.btn{background:var(--accent);color:#fff;border:none;padding:8px 12px;border-radius:6px;cursor:pointer}
.btn input{display:none}

/* make the download button stand out and push it to the right */
#downloadBtn{margin-left:auto;background:#ff5c8a;border-color:transparent}
#downloadBtn:hover{filter:brightness(.95)}
.btn input{display:none}
.container{display:flex;gap:var(--gap);padding:var(--pad);align-items:flex-start}
.pane{background:var(--panel);padding:12px;border-radius:10px;flex:1;min-height:60vh;overflow:auto;border:1px solid rgba(255,255,255,0.03)}

/* Keep the editor pane visible while scrolling */
#editorPane{position:sticky;top:12px;flex:0 0 360px;max-width:420px;height:calc(100vh - 24px);overflow:auto}
.srt-list{white-space:pre-wrap;font-family:monospace;font-size:13px;border:1px dashed rgba(255,255,255,0.03);padding:10px;border-radius:6px;background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent)}
.srt-entry{padding:8px;border-bottom:1px solid rgba(255,255,255,0.02);cursor:pointer;color:#dbe9ff}
.srt-entry:hover{background:rgba(59,130,246,0.08)}
.editor-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.editor-row label{width:60px;color:var(--muted)}
.editor-row input,.editor-row textarea{flex:1;padding:8px;border:1px solid rgba(255,255,255,0.04);border-radius:6px;background:#071018;color:#e6eef6}
.editor-row input::placeholder,.editor-row textarea::placeholder{color:var(--muted-2)}
.editor-actions{display:flex;gap:8px}
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(2,6,23,0.6)}
.modal.hidden{display:none}
.modal-content{background:#071018;padding:16px;border-radius:10px;width:80%;max-width:700px;border:1px solid rgba(255,255,255,0.03)}
.modal-actions{display:flex;gap:8px;margin-top:8px;justify-content:flex-end}

/* Accessibility: focus outlines */
:focus{outline:2px solid rgba(59,130,246,0.5);outline-offset:2px}

/* Scrollbar for dark theme */
::-webkit-scrollbar{height:12px;width:12px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.06);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

/* Toolbar control — modern compact inputs */
.toolbar-control{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;padding:6px 8px;border-radius:8px}
.toolbar-control select,.toolbar-control input[type="number"]{appearance:none;-webkit-appearance:none;-moz-appearance:none}
.toolbar-control select{background:linear-gradient(180deg,rgba(255,255,255,0.012),transparent);border:1px solid rgba(255,255,255,0.04);color:var(--muted);padding:6px 10px;border-radius:8px;font-size:13px;min-width:120px}
.toolbar-control select:focus{box-shadow:0 0 0 4px rgba(59,130,246,0.08)}
.compact-input{width:78px;padding:6px 10px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:#071018;color:#e6eef6;font-size:13px}
.compact-input:focus{box-shadow:0 0 0 4px rgba(59,130,246,0.08)}

/* Remove native number arrows for WebKit, keep for accessibility in others */
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none;margin:0 }

/* Small helper: hide label text on very small screens to reduce clutter */
@media (max-width:520px){
	.toolbar-control{font-size:12px;padding:6px}
	.toolbar-control label{display:none}
}