/* File workspace */
.workspace-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.workspace-actions button { display:flex; align-items:center; gap:8px; min-height:40px; }
#toggleHiddenColumns[aria-pressed='true'] { color:var(--accent); border-color:#707070; background:var(--accent-bg); }
div#wrapper { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); align-items:start; gap:24px; padding:0 40px 48px; max-width:1800px; margin:0 auto; }
div.column-wrapper { min-width:0; display:block; }
div.column-wrapper[data-status='hidden'] { display:none; }
div.column-wrapper[data-status='hidden'] .column { border-style:dashed; opacity:.7; }
div.column { position:relative; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:0 8px 24px #00000015; padding-bottom:6px; }
div.column div.header { min-height:72px; padding:24px 55px 20px 24px; color:var(--text); font-size:18px; font-weight:600; letter-spacing:-.3px; line-height:1.5; overflow-wrap:anywhere; }
div.column div.header::before { content:''; display:inline-block; width:9px; height:9px; margin-right:12px; border-radius:3px; background:var(--column-color,#929292); vertical-align:2px; }
.header[data-color='Blue'] { --column-color:#7aa7f2; }
.header[data-color='Green'] { --column-color:#79c5a5; }
.header[data-color='Red'] { --column-color:#f0959f; }
.header[data-color='Yellow'] { --column-color:#e0bc70; }
.header[data-color='Turquoise'] { --column-color:#75cbc6; }
.header[data-color='Purple'] { --column-color:#ab91e8; }
.header[data-color='Pink'] { --column-color:#da98bf; }
.header[data-color='Olive'] { --column-color:#b2c485; }
.header[data-color='Brown'] { --column-color:#caa284; }
div.column div.header.editable { color:var(--accent); background:#252525; outline:1px solid var(--accent); border-radius:12px 12px 0 0; }
div.dropzone-wrapper { padding:0 24px 20px; }
div.dropzone { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; height:144px; border:1px dashed #4a4a4a; background:#151515; border-radius:10px; text-align:center; overflow:hidden; transition:background .15s,border-color .15s; }
.dropzone .ui-icon { width:28px; height:28px; color:var(--accent); margin-bottom:7px; pointer-events:none; }
.dropzone strong { font-size:16px; font-weight:500; color:var(--text); pointer-events:none; }
.dropzone small { font-size:16px; color:var(--dim); pointer-events:none; }
div.dropzone.hover, div.dropzone:hover, div.dropzone:focus-within { background:var(--accent-bg); border-color:var(--accent); }
div.dropzone input[type='file'] { position:absolute; cursor:pointer; opacity:0; inset:0; width:100%; height:100%; }
div.progress-bar-wrapper { display:none; padding:0 24px 20px; }
div.progress-bar-inner-wrapper { position:relative; height:144px; border:1px solid var(--border); background:var(--bg); border-radius:10px; overflow:hidden; }
div.progress-bar { position:absolute; height:100%; width:0; background:var(--accent-bg); transition:width .15s; }
div.progress-bar-text { position:absolute; display:grid; place-items:center; inset:0; color:var(--accent); font-size:16px; }
div.filelist-option { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:0 24px 14px; }
div.column input.search { width:100%; min-width:0; padding:10px 12px 10px 35px; height:38px; border:1px solid var(--border); background:var(--bg) url('../img/ui-search.svg') 11px center/15px no-repeat; font-size:16px; }
div.column input.search:focus { outline:1px solid var(--accent); border-color:var(--accent); }
div.column div.icons { display:flex; align-items:center; gap:5px; width:100%; }
div.column div.icons span { position:relative; display:inline-flex; justify-content:center; align-items:center; width:40px; height:40px; border:1px solid transparent; border-radius:6px; color:#727272; cursor:default; }
div.column div.icons span::before { content:''; display:block; width:24px; height:24px; background:currentColor; mask:var(--icon) center/contain no-repeat; -webkit-mask:var(--icon) center/contain no-repeat; }
.icons .check-uncheck-all { --icon:url('../img/ui-check.svg'); margin-left:auto; order:5; }
.icons .download-selected { --icon:url('../img/ui-download.svg'); }
.icons .zip-selected { --icon:url('../img/ui-archive.svg'); }
.icons .move-selected { --icon:url('../img/ui-move.svg'); }
.icons .delete-selected { --icon:url('../img/ui-trash.svg'); }
div.column div.icons span.active, div.column div.icons span.check-uncheck-all { color:var(--muted); cursor:pointer; }
div.column div.icons span.active:hover, div.column div.icons span.check-uncheck-all:hover { background:var(--surface-hover); border-color:var(--border); color:var(--accent); }
div.column div.icons span.delete-selected.active:hover { color:var(--danger); }
div.column div.icons span.check-uncheck-all.active { color:var(--accent); background:var(--accent-bg); }
div.files { padding:0 14px 10px; }
div.files:empty::after { content:'No files yet. Upload something to get started.'; display:block; padding:22px 16px 28px; color:var(--dim); text-align:center; font-size:16px; }
div.item { position:relative; min-height:70px; padding:14px 38px 14px 48px; border-top:1px solid var(--border-soft); cursor:pointer; display:grid; grid-template-columns:1fr auto; gap:5px 12px; align-items:center; border-radius:5px; }
div.item::before { content:''; position:absolute; left:12px; top:22px; height:23px; width:23px; background:var(--dim); mask:url('../img/ui-file.svg') center/contain no-repeat; -webkit-mask:url('../img/ui-file.svg') center/contain no-repeat; }
div.item:hover { background:#252525; }
div.item:has(input:checked) { background:#303030; }
div.item:has(input:checked)::before { background:var(--accent); }
div.item span.item-name { grid-column:1 / -1; color:#dedede; font-size:16px; line-height:1.5; overflow-wrap:anywhere; }
div.item span.item-date, div.item span.item-size { color:var(--dim); font-size:16px; }
div.item span.item-size { text-align:right; }
div.item .checkbox-wrapper { position:absolute; right:6px; top:14px; height:32px; width:28px; display:grid; place-items:center; cursor:default; }
div.item input[type='checkbox'] { margin:0; }
div.item .item-options { display:none; }
div.item[data-zipready='awaiting'] { opacity:.6; cursor:wait; }
div.item[data-zipready='awaiting'] .checkbox-wrapper { visibility:hidden; }
div.column span.icon-column-option { position:absolute; top:23px; right:18px; width:28px; height:28px; border-radius:6px; cursor:pointer; color:var(--dim); }
div.column span.icon-column-option::before { content:''; position:absolute; inset:4px; background:currentColor; mask:url('../img/ui-more.svg') center/contain no-repeat; -webkit-mask:url('../img/ui-more.svg') center/contain no-repeat; }
div.column span.icon-column-option:hover { color:var(--text); background:var(--surface-hover); }
div.column-menu { position:absolute; top:56px; right:18px; width:180px; z-index:5; padding:5px; background:var(--surface-raised); border:1px solid #484848; border-radius:10px; box-shadow:0 16px 40px #0006; }
div.column-menu > span { display:block; width:100%; padding:10px 12px; border-radius:6px; color:var(--muted); cursor:pointer; font-size:16px; }
div.column-menu > span:hover { background:var(--surface-hover); color:var(--text); }
div.column-menu > span.option-delete { color:var(--danger); }
div.column-menu .option-change-color { border-top:1px solid var(--border); margin-top:4px; padding-top:13px; }
.column-menu .palette-color-picker-button { width:24px; height:24px; border:0; box-shadow:none; }
.column-menu .palette-color-picker-bubble { background:var(--surface-raised); border-color:var(--border); border-radius:10px; box-shadow:0 12px 32px #0006; }
.column-menu .palette-color-picker-bubble .swatch { border-color:var(--surface-raised); outline-color:var(--border); }
.column-menu .palette-color-picker-bubble.downside:after { border-bottom-color:var(--surface-raised); }
.column-menu .palette-color-picker-bubble.downside:before { border-bottom-color:var(--border); }
#intervalState { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:16px; white-space:nowrap; }
#intervalState::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--success); box-shadow:0 0 0 3px #79c5a50c; }
#intervalState.paused::before { background:#d6b572; }
#intervalState.error { color:var(--danger); }
#intervalState.error::before { background:var(--danger); }
/* Login and application chooser */
#login-wrapper { width:calc(100% - 40px); max-width:400px; margin:14vh auto 40px; padding:36px; background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:0 20px 60px #0003; }
#login-wrapper h1 { font-size:30px; font-weight:600; letter-spacing:-1px; line-height:1.25; margin:0 0 30px; }
#login-wrapper label { display:block; margin:18px 0 8px; color:var(--muted); font-size:16px; font-weight:500; }
#login-wrapper input { width:100%; padding:12px; font-size:16px; }
#login-wrapper button { width:100%; margin-top:26px; background:var(--primary); color:#161616; border-color:var(--primary); font-weight:600; padding:11px; }
#login-wrapper .login-error { margin-top:16px; font-size:16px; color:var(--danger); }
.app-menu { display:flex; flex-direction:column; width:100%; max-width:1800px; min-height:100vh; min-height:100dvh; margin:0 auto; padding-bottom:40px; }
.app-menu h1 { font-size:30px; font-weight:600; letter-spacing:-1px; line-height:1.25; margin:0 0 24px; }
.app-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; width:calc(100% - 80px); max-width:960px; margin:40px auto; }
.app-choices a { display:flex; flex-direction:column; align-items:flex-start; padding:36px; color:var(--text); background:linear-gradient(145deg,#22221d,var(--surface) 65%); border:1px solid var(--border); border-radius:20px; box-shadow:0 12px 32px #0002; transition:background .2s,border-color .2s,transform .2s; }
.app-choices a:hover, .app-choices a:focus-visible { background:linear-gradient(145deg,#302d1c,var(--surface) 75%); border-color:var(--accent); transform:translateY(-4px); }
.choice-icon { display:grid; place-items:center; width:56px; height:56px; margin-bottom:32px; color:var(--accent); background:var(--accent-bg); border:1px solid #554a24; border-radius:16px; }
.choice-icon svg { width:28px; height:28px; }
.app-choices h2 { font-size:28px; font-weight:600; letter-spacing:-.8px; line-height:1.25; margin:0 0 12px; }
.app-choices p { font-size:16px; color:var(--muted); line-height:1.7; margin:0 0 32px; }
.choice-open { display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:auto; padding-top:20px; border-top:1px solid var(--border); font-size:16px; font-weight:600; color:var(--accent); }
.choice-open > span { font-size:22px; line-height:1; }
.install-footer { margin-top:auto; padding:32px 20px 0; text-align:center; }
#install-app { padding:0; border:0; background:transparent; color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
#install-app:hover { color:var(--accent); }
#install-help { max-width:440px; margin:16px auto 0; font-size:16px; color:var(--muted); }
/* Dialogs */
div#modal-overlay { position:fixed; inset:0; background:#080808cc; backdrop-filter:blur(5px); z-index:20; }
div#modal-outer { background:var(--surface); border:1px solid #484848; box-shadow:0 24px 80px #0008; border-radius:14px; position:fixed; top:15vh; left:50%; z-index:21; max-width:calc(100vw - 32px); overflow:hidden; }
div#modal-outer iframe { border:0; width:100%; display:block; }
div#modal-outer span.title { display:block; font-size:17px; font-weight:500; background:var(--surface-raised); border-bottom:1px solid var(--border); padding:20px 24px; }
body#modal-inner { padding:24px; background:var(--surface); }
body#modal-inner p { color:var(--muted); font-size:16px; line-height:1.6; }
body#modal-inner #button-wrapper { position:absolute; bottom:24px; right:24px; display:flex; justify-content:flex-end; gap:10px; }
body#modal-inner input[type='button'] { padding:9px 16px; color:var(--text); background:var(--surface-raised); border:1px solid var(--border); cursor:pointer; font-size:16px; }
body#modal-inner input[type='button']:last-child { background:var(--primary); color:#161616; border-color:var(--primary); font-weight:600; }
body#modal-inner input[type='button']:disabled { opacity:.4; cursor:default; }
body#modal-inner input[type='button']:not(:disabled):hover { filter:brightness(1.15); }
body#modal-inner select, body#modal-inner input[type='text'] { float:left; clear:both; margin-top:10px; padding:9px 12px; max-width:100%; }
body#modal-inner input[type='checkbox'] { margin-top:12px; }
mark { background:#505050; color:#ffffff; border-radius:2px; }
@media (max-width:760px) {
    body.login-page { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; padding:24px 0; }
    body.login-page #login-wrapper { flex-shrink:0; margin:auto; }
    .app-choices { grid-template-columns:1fr; width:calc(100% - 40px); margin:12px auto 24px; gap:16px; }
    .app-choices a { padding:28px; }
    #intervalState { display:none; }
    .workspace-actions { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
    .workspace-actions > button { justify-content:center; padding:9px 8px; white-space:normal; }
    div#wrapper { grid-template-columns:minmax(0,1fr); padding:0 20px 32px; gap:20px; }
    div#modal-outer { width:calc(100vw - 32px) !important; left:16px; margin-left:0 !important; }
}