body{background:#1e1e1e;color:#ddd;font-family:sans-serif;padding:1em;max-width:720px;margin:2em auto}
body.narrow{max-width:420px;margin:3em auto}
h1{font-size:1.4em;font-weight:600;margin:0 0 .6em}
a{color:#7db4f0;text-decoration:none}
a:hover{text-decoration:underline}
input{background:#333;color:#ddd;border:1px solid #555;padding:.4em;width:100%;margin:.4em 0;box-sizing:border-box}
button{background:#444;color:#ddd;border:1px solid #666;padding:.4em 1em;margin:.2em .4em .2em 0;cursor:pointer}
button:disabled{opacity:.5}
table{border-collapse:collapse;width:100%;margin-top:.5em}
th{text-align:left;font-size:.75em;color:#666;text-transform:uppercase;letter-spacing:.05em;padding:.4em .6em;border-bottom:1px solid #333}
td{padding:.4em .6em;border-bottom:1px solid #2a2a2a}
tr:hover td{background:#262626}
ul{list-style:none;padding:0;margin:1em 0}
li{padding:.35em 0;border-bottom:1px solid #2a2a2a}
.muted{color:#888;font-size:.85em}
.nav{margin-top:1em;font-size:.85em}
.size{text-align:right;color:#888;font-variant-numeric:tabular-nums;white-space:nowrap}
.date{text-align:right;color:#666;white-space:nowrap}
#msg{color:#f0a07d;min-height:1.4em;font-size:.9em}
#preview img,#preview video{max-width:100%;border-radius:4px}
#preview audio{width:100%}
body.wide{max-width:none;margin:0;padding:0}
.split{display:flex;align-items:flex-start;min-height:100vh}
.list{flex:1;min-width:0;padding:1.5em 2em}
.side{flex:0 0 34%;min-width:320px;max-width:640px;border-left:1px solid #2a2a2a;background:#141414;padding:1.5em;position:sticky;top:0;min-height:100vh;overflow-y:auto;box-sizing:border-box}
@media(max-width:820px){.split{flex-direction:column}.side{flex:none;width:auto;min-width:0;max-width:none;border-left:none;border-top:1px solid #2a2a2a;position:static;height:auto;min-height:0}}
tr[data-raw],tr[data-href]{cursor:pointer}
.uploadrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:1em 0 0}
.up-pick{display:flex;align-items:center;gap:.45em;flex-wrap:wrap;margin:.4em 0 .2em;font-size:.9em}
.up-pick select{background:#333;color:#ddd;border:1px solid #555;padding:.35em .4em;font-size:1em;border-radius:4px}
.up-pick select:hover{border-color:#7db4f0}
.upload-label{background:#333;color:#ddd;border:1px solid #555;padding:.4em 1em;cursor:pointer;font-size:13px;border-radius:4px}
.upload-label:hover{border-color:#7db4f0;color:#fff}
#upname{flex:1;min-width:120px}
table.meta{margin-top:.8em;font-size:12px}
table.meta td{padding:.25em .6em .25em 0;border:none;color:#888}
table.meta td+td{color:#ddd;text-align:right}
table.meta tr:hover td{background:none}
td.acts{white-space:nowrap;font-size:.85em}
td.acts a{margin:0 .15em}
#preview pre{background:#111;color:#ccc;padding:1em;font-family:monospace;font-size:.82em;line-height:1.5;overflow:auto;white-space:pre-wrap;word-break:break-word;max-height:60vh;border-radius:4px}
#editor{width:100%;min-height:50vh;box-sizing:border-box;background:#111;color:#ddd;border:1px solid #444;border-radius:4px;padding:.8em;font-family:monospace;font-size:.85em;line-height:1.5;resize:vertical}
.ed-bar{display:flex;gap:.5em;align-items:center;margin-top:.5em}
.ed-bar button{font-size:.9em}
.pdf-bar{display:flex;gap:.35em;align-items:center;flex-wrap:wrap;margin:.4em 0;font-size:.9em}
.pdf-bar button{padding:.25em .6em}
.pdf-bar span{min-width:5em;text-align:center;color:#aaa;font-variant-numeric:tabular-nums}
.pdf-dl{margin-left:auto;font-size:.85em}
.pdf-wrap{background:#2a2a2a;border:1px solid #333;border-radius:4px;overflow:auto;max-height:70vh;text-align:center;padding:.5em}
.pdf-wrap canvas{max-width:100%;height:auto!important;display:inline-block;box-shadow:0 2px 8px rgba(0,0,0,.4)}
#preview .hljs{background:#111}
#preview .hljs-keyword,#preview .hljs-built_in{color:#c792ea}
#preview .hljs-string,#preview .hljs-attr{color:#c3e88d}
#preview .hljs-number,#preview .hljs-literal{color:#f78c6c}
#preview .hljs-comment{color:#546e7a;font-style:italic}
#preview .hljs-title,#preview .hljs-function .hljs-title{color:#82aaff}
#preview .hljs-variable,#preview .hljs-template-variable{color:#f07178}
#preview .hljs-type,#preview .hljs-class .hljs-title{color:#ffcb6b}
#preview .hljs-meta{color:#89ddff}
#preview .hljs-tag{color:#f07178}
#preview .hljs-name{color:#82aaff}
#preview .hljs-attribute{color:#ffcb6b}
#preview .hljs-symbol,#preview .hljs-bullet{color:#89ddff}
#preview .hljs-deletion{color:#ff5370}
#preview .hljs-addition{color:#c3e88d}

/* --- resumable upload queue --- */
#upq{margin:.6em 0 0;font-size:12px}
.up-row{display:flex;align-items:center;gap:10px;padding:.35em 0;border-bottom:1px solid #232323}
.up-name{flex:0 1 auto;max-width:34%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ccc}
.up-dir{color:#666}
.up-bar{flex:1 1 auto;height:4px;background:#2a2a2a;border-radius:2px;overflow:hidden;min-width:70px}
.up-bar i{display:block;height:100%;width:0;background:#7db4f0;transition:width .2s linear}
.up-row.error .up-bar i{background:#e07b7b}
.up-row.done .up-bar i{background:#6cc070}
.up-pct{min-width:5.5em;text-align:right;color:#999;font-variant-numeric:tabular-nums}
.up-size{min-width:10em;text-align:right;color:#777;font-variant-numeric:tabular-nums;white-space:nowrap}
.up-act{white-space:nowrap}
.up-act a{margin-left:.55em;color:#7db4f0;cursor:pointer;text-decoration:none}
.up-act a:hover{text-decoration:underline}
.up-err{color:#e07b7b;margin-left:.5em}
.up-drop{border:1px dashed #3a3a3a;border-radius:6px;padding:1em;text-align:center;color:#777;margin:.8em 0;transition:border-color .15s,color .15s,background .15s}
.up-drop.on{border-color:#7db4f0;color:#7db4f0;background:#18212b}
#uploadBtn{font-size:.9em}

/* --- git tracked folders --- */
.repo-badge,.priv{color:#7c7c7c;font-size:.66em;font-weight:400;letter-spacing:.02em;margin-left:.5em;vertical-align:middle;white-space:nowrap}
.repo-note{font-size:.85em;color:#e0af68;margin:.4em 0 .8em}
.repo-note a{color:#e0af68}
.repo-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:1em 0}
.repo-form input{width:auto;flex:1 1 190px;margin:0}
.repo-form select{background:#333;color:#ddd;border:1px solid #555;padding:.4em .5em;font-size:1em;border-radius:4px;cursor:pointer}
.repo-form select:hover{border-color:#7db4f0}
.repo-form #f-count{font-size:.85em}
/* --- action history: chip filters + scrollable journal --- */
.act-bar{gap:6px 10px}
.act-lab{font-size:.72em;color:#666;text-transform:uppercase;letter-spacing:.05em}
.chips{display:inline-flex;gap:4px;flex-wrap:wrap;max-width:100%}
.chip{background:#262626;color:#9a9a9a;border:1px solid #3a3a3a;border-radius:12px;padding:.15em .7em;font-size:.78em;cursor:pointer;font-family:inherit}
.chip:hover{color:#ddd;border-color:#5a5a5a}
.chip.on{background:#2f4a66;color:#cfe6ff;border-color:#5a86b8}
.chip.ex{background:#4a2f2f;color:#f0b0a0;border-color:#8a5a5a}
.act-order{background:#333;color:#ddd;border:1px solid #555;padding:.35em .7em;font-size:.85em;border-radius:4px;cursor:pointer;font-family:inherit}
.act-order:hover{border-color:#7db4f0}
.act-scroll{max-height:62vh;overflow-y:auto;border:1px solid #333;border-radius:6px;margin-top:.4em}
.act-scroll table{margin-top:0}
.act-scroll thead th{position:sticky;top:0;background:#1e1e1e;box-shadow:inset 0 -1px 0 #333}
/* --- sortable table headers --- */
table thead th{cursor:pointer;user-select:none}
table thead th:hover{color:#9a9a9a}
table thead th[data-dir]::after{content:" \25b2";font-size:.65em;color:#7db4f0}
table thead th[data-dir="desc"]::after{content:" \25bc"}
/* --- login note + fun settings toggle --- */
.auth-note{font-size:.8em;color:#8a8a8a;margin:.9em 0 0;line-height:1.45}
.fun-toggle{display:inline-flex;align-items:center;gap:.15em;font-size:.88em;color:#9a9a9a;cursor:pointer}
.fun-toggle input{width:auto;margin:0;accent-color:#7db4f0}
.status-ok{color:#6cc070}
.status-err{color:#e07b7b}
.status-sync{color:#e0af68}

/* --- auth page: sign in | register, side by side, left aligned --- */
.auth-cols{display:flex;gap:1.5em;text-align:left;align-items:flex-start}
.auth-cols section{flex:1;min-width:0}
.auth-cols.single section{flex:1 1 100%}
.auth-cols h2{font-size:1em;font-weight:600;margin:0 0 .5em}
@media(max-width:520px){.auth-cols{flex-direction:column;gap:1.3em}}
.fl{display:block;font-size:.78em;color:#8a8a8a;margin:.7em 0 0}
.btn{display:block;width:100%;text-align:left;padding:.55em .8em;margin:.9em 0 0;font-size:.95em;cursor:pointer}
.btn:disabled{opacity:.55;cursor:default}
.auth-msg{min-height:1.3em;font-size:.85em;color:#e0af68;margin:.6em 0 0}
.auth-msg.err{color:#e07b7b}
/* --- szpila: fallback password login, bottom-right corner --- */
.szpila-fab{position:fixed;right:14px;bottom:14px;z-index:60;font-size:.8em;padding:.4em .9em;border:1px solid #4a4a4a;background:#262626;color:#9a9a9a;border-radius:14px;cursor:pointer}
.szpila-fab:hover{color:#ddd;border-color:#6a6a6a}
.szpila-panel{position:fixed;right:14px;bottom:48px;z-index:60;width:230px;background:#1d1d1d;border:1px solid #3a3a3a;border-radius:8px;padding:.8em .9em;text-align:left}
.szpila-panel .fl{margin:.5em 0 0}
@media(max-width:520px){.szpila-panel{width:calc(100vw - 28px)}}