/* ========== theme: dark by default; data-theme="light" or "auto" (follows the OS) are the other choices ========== */
:root{--bg:#18191b;--fg:#ececec;--muted:#9aa0a6;--line:#2f3033;--accent:#8ab4f8;--soft:#26282b;--ok:#81c995;--danger:#f28b82;color-scheme:dark}
:root[data-theme=light]{--bg:#fff;--fg:#1f1f1f;--muted:#6b7280;--line:#e5e7eb;--accent:#1a73e8;--soft:#f1f3f4;--ok:#188038;--danger:#d93025;color-scheme:light}
@media (prefers-color-scheme:light){:root[data-theme=auto]{--bg:#fff;--fg:#1f1f1f;--muted:#6b7280;--line:#e5e7eb;--accent:#1a73e8;--soft:#f1f3f4;--ok:#188038;--danger:#d93025;color-scheme:light}}

/* ========== look: font size, corner radius, density and thumbnail size are fixed (no longer user options) ========== */
:root{--fs:14px;--radius:10px;--pad:18px;--gap:16px;--thumb:250px;--hh:58px;--side:260px}
:root[data-names=off] .card .cap{display:none}

*{box-sizing:border-box}
[hidden]{display:none !important} /* so a component's own display rule can never keep a hidden element on screen */
body{margin:0;background:var(--bg);color:var(--fg);font:var(--fs)/1.45 system-ui,sans-serif}
body.noscroll{overflow:hidden}
header.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:8px;height:var(--hh);padding:0 14px;background:var(--bg);border-bottom:1px solid var(--line)}
header.top h1{font-size:1.15em;margin:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
button,.btn{font:inherit;border:1px solid var(--line);background:var(--soft);color:var(--fg);padding:7px 13px;border-radius:var(--radius);cursor:pointer;min-height:38px;white-space:nowrap}
button:hover{border-color:var(--accent)}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button.danger{color:var(--danger);border-color:var(--danger);background:transparent}
button:disabled{opacity:.5;cursor:default}
input,select,textarea{font:inherit;padding:7px 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);color:var(--fg);min-height:38px}
.iconbtn{min-width:38px;padding:7px}
.muted{color:var(--muted)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chip{display:inline-block;padding:1px 8px;border-radius:10px;font-size:.85em;background:var(--soft);border:1px solid var(--line)}
.chip.pending{border-color:var(--accent)}.chip.rejected{color:var(--danger);border-color:var(--danger)}.chip.skipped{color:var(--muted)}.chip.done,.chip.approved{color:var(--ok);border-color:var(--ok)}
.progress{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin-top:6px}
.progress i{display:block;height:100%;background:var(--accent);width:0}
.banner{padding:12px 14px;margin:10px 0;border-radius:var(--radius);background:var(--soft);border:1px solid var(--line)}
.banner.ok{border-color:var(--ok)}.banner.bad{border-color:var(--danger)}

/* ========== layout: pinned left column (host) + main ========== */
.layout{display:flex;align-items:flex-start;min-height:calc(100vh - var(--hh))}
aside.side{position:sticky;top:var(--hh);align-self:flex-start;height:calc(100vh - var(--hh));width:var(--side);flex:none;display:flex;flex-direction:column;border-right:1px solid var(--line);background:var(--bg)}
.panel{flex:1 1 0;min-height:0;display:flex;flex-direction:column}
.panel + .panel{border-top:2px solid var(--line)}
.panel .ph{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px var(--pad);background:var(--soft);border-bottom:1px solid var(--line);font-weight:600}
.panel .pb{flex:1;overflow:auto;padding:var(--gap) var(--pad)}
.badge{display:inline-block;min-width:20px;padding:0 6px;border-radius:10px;background:var(--accent);color:#fff;font-size:.8em;text-align:center}
.more{width:100%;margin-top:6px}
main{flex:1;padding:var(--pad);padding-bottom:84px;min-width:0;position:relative}

/* ========== folder tabs ========== */
.sources{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:var(--gap)}
.src{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 12px;border:1px solid var(--line);border-radius:18px;background:var(--soft)}
.src b{cursor:pointer;width:22px;height:22px;line-height:20px;text-align:center;border-radius:50%;font-weight:400}
.src b:hover{background:var(--line)}
.src.offline{opacity:.55;text-decoration:line-through}
.tabbar{position:sticky;top:var(--hh);z-index:4;display:flex;gap:4px;overflow-x:auto;padding:6px 0 0 var(--pad);margin:calc(var(--pad) * -1) calc(var(--pad) * -1) var(--gap);background:var(--bg);border-bottom:1px solid var(--line);scrollbar-width:thin}
.tab{display:flex;align-items:center;gap:8px;flex:none;max-width:220px;padding:8px 12px;border:1px solid var(--line);border-bottom:0;border-radius:var(--radius) var(--radius) 0 0;background:var(--soft);color:var(--muted);cursor:pointer;white-space:nowrap}
.tab span{overflow:hidden;text-overflow:ellipsis}
.tab.active{background:var(--bg);color:var(--fg);font-weight:600;box-shadow:0 1px 0 var(--bg)}
.tab b{width:20px;height:20px;line-height:18px;text-align:center;border-radius:50%;font-weight:400}
.tab b:hover{background:var(--line)}
.pane[hidden]{display:none}
.folders{display:flex;gap:var(--gap);flex-wrap:wrap;margin-bottom:var(--gap)}
.folders button{display:flex;gap:6px;align-items:center;position:relative}
.folders button .more-btn{margin-left:4px;opacity:.55;cursor:pointer;padding:0 4px;border-radius:6px}
.folders button .more-btn:hover{opacity:1;background:var(--line)}

/* ========== photo grid: even tiles by default, or JS masonry; both fill the full width ========== */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--thumb),1fr));gap:var(--gap)}
.tiles .thumb{aspect-ratio:4/3}
.tiles .sgmore{grid-column:1/-1;justify-self:start;border:1px dashed var(--line);background:transparent}
.tiles .sgroup{grid-column:1/-1;text-align:left;justify-content:flex-start;background:var(--soft);border:0;font-weight:600;margin-top:6px}
.tiles.masonry{display:flex;align-items:flex-start}
.mcol{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--gap)}
.masonry .thumb{aspect-ratio:auto}
.card{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--soft);cursor:pointer;-webkit-tap-highlight-color:transparent;display:flex;flex-direction:column}
.card .thumb{position:relative;width:100%;overflow:hidden;background:var(--soft)}
.card .thumb img{display:block;width:100%;height:100%;object-fit:cover;min-height:50px}
.masonry .card .thumb img{height:auto}
.card .doc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:100%;min-height:90px;padding:10px;text-align:center;font-size:.85em;word-break:break-word}
.card .doc b{font-size:2em}
.card .cap{padding:5px 8px;font-size:.82em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.card .tick{position:absolute;top:6px;left:6px;width:26px;height:26px;border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.35);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px}
.card.sel{outline:3px solid var(--accent);outline-offset:-3px}
.card.sel .tick{background:var(--accent)}
.card .play,.rv .play{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;padding-left:3px;pointer-events:none}
@media(pointer:coarse){.card,.card img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}}
.card .more-btn{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .15s}
.card:hover .more-btn,.card.hid .more-btn{opacity:1}
.card.hid .thumb,.card.hid .doc{opacity:.35}
.empty{margin:var(--pad) 0}
.hint{display:flex;align-items:center;justify-content:center;min-height:55vh;color:var(--muted);opacity:.55;font-size:1.6em;text-align:center;pointer-events:none;user-select:none;padding:0 20px}

/* highlight colours (host's own aid) and "new" glow */
[data-color=red]{--hl:#e53935}[data-color=orange]{--hl:#fb8c00}[data-color=yellow]{--hl:#fdd835}[data-color=green]{--hl:#43a047}
[data-color=teal]{--hl:#00acc1}[data-color=blue]{--hl:#1e88e5}[data-color=purple]{--hl:#8e24aa}[data-color=pink]{--hl:#d81b60}
.card[data-color]{box-shadow:inset 0 0 0 3px var(--hl)}
.folders button[data-color],.src[data-color]{border-color:var(--hl)}
.fresh{animation:glow 1.5s ease-in-out infinite alternate;position:relative}
.fresh::after{content:'Mới';position:absolute;top:-8px;right:-6px;padding:0 7px;border-radius:9px;background:var(--accent);color:#fff;font-size:.72em;line-height:17px;z-index:2}
@keyframes glow{from{box-shadow:0 0 0 2px var(--accent)}to{box-shadow:0 0 14px 3px var(--accent)}}

/* ========== filters ========== */
.filterbar{margin:0 0 var(--gap);display:flex;flex-direction:column;gap:8px}
.frow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.frow input[type=search]{flex:1;min-width:150px;max-width:300px}
.chipbtn{min-height:34px;padding:4px 12px;border-radius:17px;background:transparent;color:var(--muted)}
.chipbtn.on{background:var(--accent);border-color:var(--accent);color:#fff}
.fadv{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;padding:10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--soft)}
.fadv[hidden]{display:none}
.fadv label{display:flex;flex-direction:column;gap:3px;font-size:.85em;color:var(--muted)}
.fadv input,.fadv select{min-height:34px;padding:4px 8px}
.fcount{margin-left:auto;color:var(--muted);font-size:.9em}
.quick{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-end}
.quick button{min-height:30px;padding:2px 10px;font-size:.85em}

/* ========== dialogs, popups, menus ========== */
dialog{border:1px solid var(--line);border-radius:calc(var(--radius) + 2px);background:var(--bg);color:var(--fg);max-width:480px;width:92%;padding:var(--pad) calc(var(--pad) + 6px)}
dialog::backdrop{background:rgba(0,0,0,.45)}
dialog h3{margin-top:0}
dialog label{display:block;margin:10px 0 4px;color:var(--muted)}
dialog select,dialog input:not([type=checkbox]){width:100%}
.seg{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.seg button{min-height:34px}
.seg button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.swatches{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 4px}
.swatch{width:28px;height:28px;border-radius:50%;border:3px solid transparent;cursor:pointer;padding:0;min-height:0}
.swatch.on{border-color:var(--fg)}
#popups{position:fixed;bottom:14px;right:12px;z-index:300;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;width:min(360px,calc(100vw - 24px));max-height:calc(100vh - var(--hh) - 30px);overflow:hidden;pointer-events:none}
body.guest #popups{bottom:76px}
.popup{pointer-events:auto;background:var(--bg);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--radius);box-shadow:0 8px 28px rgba(0,0,0,.28);padding:10px 12px;animation:pop .18s ease-out}
.popup.bad{border-left-color:var(--danger)}.popup.ok{border-left-color:var(--ok)}
.popup .pt{display:flex;justify-content:space-between;gap:8px;font-weight:600}
.popup .pt b{cursor:pointer;font-weight:400;opacity:.6;padding:0 4px}.popup .pt b:hover{opacity:1}
.popup .pbody{color:var(--muted);margin-top:2px;word-break:break-word}
.popup .pact{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.popup.click{cursor:pointer}
@keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ctx{position:fixed;z-index:400;min-width:220px;max-width:300px;padding:6px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 10px 30px rgba(0,0,0,.3)}
.ctx button{display:flex;width:100%;gap:10px;align-items:center;text-align:left;border:0;background:transparent;border-radius:calc(var(--radius) - 3px);min-height:34px;padding:5px 10px}
.ctx button:hover:not(:disabled){background:var(--soft)}
.ctx button.danger{color:var(--danger)}
.ctx hr{border:0;border-top:1px solid var(--line);margin:4px 0}
.ctx .swatches{padding:4px 10px;margin:0}
.ctx .note{padding:4px 10px;font-size:.82em;color:var(--muted)}

/* ========== request review (host) and send confirmation (guest) ========== */
.review{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;max-height:46vh;overflow:auto;padding:2px}
.rv{position:relative;display:block;border-radius:var(--radius);overflow:hidden;background:var(--soft);cursor:pointer;border:2px solid transparent}
.rv img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.rv .ph{display:flex;align-items:center;justify-content:center;aspect-ratio:1;font-size:30px}
.rv .nm{display:block;padding:3px 6px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv input{position:absolute;top:6px;left:6px;width:20px;height:20px;min-height:0;margin:0}
.rv.off{opacity:.35}
.reqitem{display:block;width:100%;text-align:left;margin-bottom:6px;white-space:normal}
.logrow{padding:6px 0;border-bottom:1px solid var(--line);font-size:.92em}
.logrow time{display:block;color:var(--muted);font-size:.85em}
.client{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:4px 0}
.dot{width:8px;height:8px;border-radius:50%;background:var(--muted);display:inline-block}.dot.on{background:var(--ok)}

/* ========== guest: login, bell, notifications, bottom bar ========== */
.pinbox{max-width:380px;margin:10vh auto;padding:22px;text-align:center}
.pinbox input{width:100%;margin-bottom:10px;text-align:center}
.pinbox input.pin{font-size:1.6em;letter-spacing:.4em}
.bell{position:relative}
.bell.has::before{content:'';position:absolute;top:5px;right:6px;width:10px;height:10px;border-radius:50%;background:#e53935;border:2px solid var(--bg)}
.bell.has{animation:ring 1.2s ease-in-out 3}
@keyframes ring{0%,100%{transform:rotate(0)}20%{transform:rotate(14deg)}40%{transform:rotate(-12deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-6deg)}}
.notif{position:fixed;top:calc(var(--hh) - 4px);right:8px;z-index:250;width:min(380px,calc(100vw - 16px));max-height:72vh;display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:calc(var(--radius) + 2px);box-shadow:0 12px 34px rgba(0,0,0,.32)}
.notif[hidden]{display:none}
.notif .nh{padding:10px 14px;font-weight:700;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}
.notif .nb{overflow:auto}
.nitem{display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}
.nitem.unread{background:color-mix(in srgb,var(--accent) 10%,var(--bg))}
.nitem .ni{font-size:1.3em}
.nitem .nt{font-weight:600}
.nitem .nd{color:var(--muted);font-size:.9em}
.nitem a{color:var(--accent)}
.bottom{position:fixed;left:0;right:0;bottom:0;padding-bottom:calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px;justify-content:space-between;padding:10px 14px;background:var(--bg);border-top:1px solid var(--line);z-index:6}

/* ========== viewer + video player ========== */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:200;display:none;flex-direction:column;align-items:stretch;touch-action:manipulation}
.lightbox.on{display:flex}
.lightbox .vbar{display:flex;align-items:center;gap:10px;padding:10px 14px;color:#fff;background:rgba(0,0,0,.5);z-index:2}
.lightbox .vname{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lightbox .x{font-size:30px;line-height:1;padding:0 6px;cursor:pointer;color:#fff}
.lightbox .nav{position:absolute;top:50%;z-index:2;background:rgba(0,0,0,.35);border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:30px;margin-top:-22px;color:#fff;cursor:pointer;user-select:none}
.stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 8px 8px}
.vimg{max-width:100%;max-height:100%;object-fit:contain}
.vdoc{width:100%;height:100%;border:0;background:#fff;border-radius:6px}
.vtext{margin:0;width:100%;height:100%;overflow:auto;background:var(--bg);color:var(--fg);padding:14px;border-radius:6px;white-space:pre-wrap;word-break:break-word;font:13px/1.5 ui-monospace,Consolas,monospace}
.vinfo{color:#fff;text-align:center;line-height:1.8}.vinfo b{display:block;font-size:64px}
.vbox{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.vbox video{max-width:100%;max-height:100%;width:100%;height:100%;background:#000;border-radius:6px;outline:0}
.vbox.audio{flex-direction:column;gap:14px;color:#fff}.vbox.audio audio{width:min(560px,100%)}.vbox .big{font-size:84px}.vbox .vtitle{opacity:.85;text-align:center;padding:0 16px}
.prep{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(0,0,0,.72);color:#fff;border-radius:6px;padding:20px;text-align:center}
.prep[hidden]{display:none}
.prep .progress{width:min(300px,80%)}.perr{color:#f28b82}
.qbadge{font-size:12px;padding:5px 10px;border-radius:14px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.12);color:#fff}
.qsel{font-size:12px;min-height:0;padding:4px 8px;border-radius:14px;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.4)}
.qsel option{color:#000}

#drop{position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center;background:rgba(26,115,232,.18);border:4px dashed var(--accent);font-size:1.6em;font-weight:600;color:var(--accent);pointer-events:none}
#drop.on{display:flex}
.onlyphone,.sm{display:none}
@media(max-width:700px){
  :root{--thumb:104px;--pad:10px;--gap:8px;--hh:52px}
  .frow input[type=search]{max-width:none}.fadv{grid-template-columns:1fr 1fr}
  .lightbox .nav{display:none}.stage{padding:0}.vbox video,.vdoc{border-radius:0}
  main{padding:8px;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  /* header: smaller, shorter labels */
  header.top{padding:0 10px;gap:6px}
  header.top h1{font-size:1.05em}
  header.top button{min-height:38px;padding:4px 10px}
  .lg{display:none}.sm,.onlyphone{display:revert}
  /* filter bar: ONE short row that scrolls sideways; sort, date and the rest sit behind "Lọc" */
  .filterbar{gap:6px;margin-bottom:6px}
  .filterbar>.frow{flex-wrap:nowrap;overflow-x:auto;gap:6px;padding:2px 2px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .filterbar>.frow::-webkit-scrollbar{display:none}
  .filterbar>.frow>*{flex:none}
  .filterbar .frow .frow{flex-wrap:nowrap;gap:6px}
  .filterbar .chipbtn{min-height:40px;padding:4px 14px;font-size:.95em}
  #fsort,.fcount{display:none}
  .fsearch input{width:min(70vw,260px)}
  .fadv{grid-template-columns:1fr}
  .fadv select,.fadv input,.fadv .chipbtn{min-height:44px}
  /* tabs a bit tighter, easier to hit */
  .tab{padding:7px 10px;max-width:160px}
  /* the bottom bar sits on the very bottom edge (below the home indicator too), with a big send button */
  .bottom{padding:10px 12px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -6px 18px rgba(0,0,0,.25)}
  .bottom #count{font-size:.95em}
  .bottom #send{min-height:46px;padding:0 22px;font-weight:600}
  body.guest #popups{bottom:calc(84px + env(safe-area-inset-bottom))}
}


/* ========== left column: panels can be reordered (drag the header or use ⇅) and collapsed to just their header ========== */
.panel.collapsed{flex:0 0 auto}
.panel.collapsed .pb{display:none}
.panel .ph[draggable=true]{cursor:grab}
.panel.dragover{outline:2px dashed var(--accent);outline-offset:-3px}
.ph .tools{display:flex;gap:4px;align-items:center}
.ph .tools button{min-height:26px;padding:0 8px;font-size:.9em;background:transparent}
.ph .grip{opacity:.5;margin-right:6px}

/* ========== share links: compact rows, click one to expand its options ========== */
.lrow{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:8px;background:var(--soft)}
.lrow .lh{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer}
.lrow .nm{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow .caret{display:inline-block;transition:transform .15s;color:var(--muted)}
.lrow.open .caret{transform:rotate(90deg)}
.lrow .lb{padding:6px 12px 12px;border-top:1px solid var(--line)}
.lrow:not(.open) .lb{display:none}
.copybtn{min-height:28px;padding:0 8px;background:var(--bg)}

/* ========== calendar date picker (guest filter): days with photos show a faint thumbnail ========== */
.cal{position:fixed;z-index:320;width:min(340px,calc(100vw - 12px));padding:12px;background:var(--bg);border:1px solid var(--line);border-radius:calc(var(--radius) + 4px);box-shadow:0 12px 34px rgba(0,0,0,.35)}
.calhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.calgrid .wd{text-align:center;color:var(--muted);font-size:.8em}
.day{position:relative;aspect-ratio:1;padding:0;min-height:0;border-radius:var(--radius);overflow:hidden;background:var(--soft);border:1px solid transparent;font-size:.85em;color:var(--muted)}
.day::before{content:'';position:absolute;inset:0;background:var(--img) center/cover no-repeat;opacity:.55}
.day .dn{position:relative;z-index:1;font-weight:600;color:var(--fg);text-shadow:0 0 4px var(--bg),0 0 8px var(--bg)}
.day .dc{position:absolute;z-index:1;right:3px;bottom:2px;font-size:.7em;background:var(--bg);border-radius:6px;padding:0 4px;color:var(--fg)}
.day:disabled{opacity:.35;cursor:default}
.day:disabled::before{display:none}
.day.has{border-color:var(--line);cursor:pointer}
.day.inr{outline:2px solid color-mix(in srgb,var(--accent) 60%,transparent);outline-offset:-2px}
.day.edge{outline:3px solid var(--accent);outline-offset:-3px}

/* remote status badge + explanation */
.chipbtn.bad{color:var(--danger);border-color:var(--danger)}
.chipbtn.ok{color:var(--ok);border-color:var(--ok)}
.help{margin:0 0 8px;color:var(--muted);line-height:1.5}
.popup .pbody{white-space:pre-line}

/* host: folders that guests can see right now get a green background (hidden ones look normal; hidden FILES stay dimmed) */
.folders button.pub,.src.pub{background:color-mix(in srgb,var(--ok) 38%,var(--soft));border-color:transparent}
.folders button.pub[data-color],.src.pub[data-color]{background:color-mix(in srgb,var(--ok) 38%,var(--soft));border-color:var(--hl)}

/* host: request cards. No outer outline: the state is the outline of the small status chip. Waiting cards glow softly, finished ones sink. */
.reqitem{border:0;border-radius:var(--radius);background:var(--soft);transition:opacity .15s}
.reqitem .rq1{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.reqitem .ago{font-size:.82em;white-space:nowrap}
.reqitem.live.s-pending{background:color-mix(in srgb,var(--accent) 18%,var(--bg));font-weight:600}
.reqitem.live.s-skipped{background:color-mix(in srgb,#fb8c00 15%,var(--bg))}
.reqitem.live.s-failed{background:color-mix(in srgb,var(--danger) 14%,var(--bg))}
.reqitem.sunk{opacity:.5}
.reqitem.sunk:hover{opacity:1}
.chip.pending{border-color:var(--accent);color:var(--accent)}
.chip.skipped{border-color:#fb8c00;color:#fb8c00}
.chip.staging,.chip.staged{border-color:var(--ok);color:var(--ok)}
.chip.uploading{border-color:#1e88e5;color:#1e88e5}
.chip.done{border-color:#00acc1;color:#00acc1}
.chip.rejected,.chip.failed{border-color:var(--danger);color:var(--danger)}

/* colour palette: small square swatches in one short row (the old menu buttons stretched them into long bars) */
.ctx{min-width:244px}
.ctx .swatches{display:flex;flex-wrap:nowrap;gap:5px;padding:4px 10px;margin:0}
.ctx button.swatch{display:block;flex:none;width:24px;height:24px;min-height:0;padding:0;border-radius:6px;border:2px solid transparent}
.ctx button.swatch.on{border-color:var(--fg)}

/* filter bar: search is a small icon until wanted; colour filter squares; multi-select */
.fsearch{display:inline-flex;align-items:center}
.fsearch input{width:min(260px,55vw);animation:grow .16s ease-out}
@keyframes grow{from{width:40px;opacity:.4}to{width:min(260px,55vw);opacity:1}}
.colorfilter{display:inline-flex;gap:5px;align-items:center}
.colorfilter .sq{width:22px;height:22px;min-height:0;padding:0;flex:none;border-radius:6px;border:2px solid transparent}
.colorfilter .sq.on{border-color:var(--fg);box-shadow:inset 0 0 0 2px var(--bg)}
.card .mtick{display:none;position:absolute;top:6px;left:6px;z-index:2;width:26px;height:26px;border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.35);color:#fff;align-items:center;justify-content:center;cursor:pointer}
body.multi .card .mtick{display:flex}
.card.msel{outline:3px solid var(--accent);outline-offset:-3px}
.card.msel .mtick{background:var(--accent)}
.folders button.msel{outline:3px solid var(--accent);outline-offset:1px}
.bulkbar{position:fixed;left:calc(var(--side) + 14px);right:14px;bottom:14px;z-index:120;display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:8px 12px;background:var(--bg);border:1px solid var(--accent);border-radius:calc(var(--radius) + 2px);box-shadow:0 -6px 24px rgba(0,0,0,.35)}
body.sidecollapsed .bulkbar{left:28px}
body.bulkon #popups{bottom:92px}
.bulkbar button{min-height:32px;padding:3px 10px}

/* trash rows: small preview + name + path, icon buttons */
#trashDlg{width:min(560px,94vw)}
#trashBody .tprev{flex:none;width:56px;height:56px;border-radius:8px;object-fit:cover;background:var(--soft)}
#trashBody .tprev.ico{display:flex;align-items:center;justify-content:center;font-size:26px}
#trashBody .tinfo{display:flex;flex-direction:column;min-width:0;flex:1}
#trashBody .tinfo b,#trashBody .tinfo small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#trashBody button{min-width:38px;padding:4px 8px}

/* multi-select rubber band; "view as guest" hides every host tool */
.marquee{position:absolute;z-index:300;pointer-events:none;border:1px solid var(--accent);background:color-mix(in srgb,var(--accent) 22%,transparent);border-radius:3px}
body.multi .tiles{user-select:none}
body.viewas .more-btn,body.viewas .mtick,body.viewas .bulkbar,body.viewas #fmulti{display:none !important}
#viewasBar{display:flex;gap:10px;align-items:center;justify-content:center;padding:6px 12px;background:var(--accent);color:#111;font-weight:600}
#viewasBar button{min-height:28px;padding:2px 10px}
#viewas.on{background:var(--accent);color:#111}

/* Âm thanh / Tài liệu / Khác drop-down */
.otherwrap{position:relative;display:inline-flex}
.otherpop{position:absolute;top:calc(100% + 6px);left:0;z-index:40;display:flex;flex-direction:column;gap:4px;min-width:150px;padding:6px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 10px 30px rgba(0,0,0,.3)}
.otherpop button{text-align:left}

/* view-as-guest: a sea-blue frame around the whole screen, host tools greyed out */
:root{--viewas:#1e88e5}
body.viewas::before{content:'';position:fixed;inset:0;z-index:1000;border:5px solid var(--viewas);pointer-events:none}
#viewasBar{background:var(--viewas);color:#fff}
#viewasBar button{background:#fff;color:#0b4f8f;border-color:#fff}
#viewas.on{background:var(--viewas);color:#fff;border-color:var(--viewas)}
body.viewas header.top button:disabled{opacity:.35;filter:grayscale(1);cursor:not-allowed}
body.viewas #side{opacity:.35;filter:grayscale(1);pointer-events:none;user-select:none}

/* left column: drag its edge to widen / narrow it, or squeeze it away */
#sideGrip{position:absolute;top:0;bottom:0;right:-5px;width:10px;cursor:col-resize;z-index:25;touch-action:none}
#sideGrip:hover,body.resizing #sideGrip{background:color-mix(in srgb,var(--accent) 45%,transparent)}
body.resizing{user-select:none;cursor:col-resize}
body.sidecollapsed aside.side .panel{display:none}

#newBtn{font-size:1.3em;line-height:1;min-width:42px;color:var(--accent)}

/* guest: shown while a short connection drop is being waited out */
.netbanner{position:fixed;top:calc(var(--hh) + 8px);left:50%;transform:translateX(-50%);z-index:900;padding:8px 16px;border-radius:999px;background:#f9a825;color:#1b1b1b;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.35);pointer-events:none}

/* "Kho của app" chip: no colour, no green, no border highlight; a divider keeps it apart from the imported folders */
.folders button.kho-root{background:transparent;border:1px dashed var(--line);color:var(--muted);margin-right:calc(var(--gap) + 6px);position:relative}
.folders button.kho-root::after{content:'';position:absolute;right:calc(-1 * (var(--gap) + 6px) / 2 - 1px);top:15%;bottom:15%;width:1px;background:var(--line)}
.folders button.kho-root:hover{color:var(--fg);border-style:solid}

/* iOS Safari zooms the page when a field with text smaller than 16px gets focus: keep every field at 16px on touch screens */
@media (max-width:700px),(pointer:coarse){
  input,select,textarea,.fsearch input,#fq{font-size:16px}
}

/* phone: the "Khác" choices sit inline in the scrolling filter row */
@media (max-width:700px){
  .otherwrap{display:inline-flex;gap:6px;align-items:center}
  .otherwrap .otherpop,.otherwrap .otherpop[hidden]{position:static !important;flex-direction:row;gap:6px;min-width:0;padding:0;border:0;box-shadow:none;background:transparent}
  .otherwrap .otherpop[hidden]{display:none !important}
  .otherwrap .otherpop:not([hidden]){display:inline-flex !important}
}

/* phone: a two-column photo wall like Pinterest. Natural heights, soft rounded corners, a thin even gap, no captions */
@media (max-width:700px){
  :root{--gap:8px}
  .tiles:not(.masonry){grid-template-columns:repeat(2,minmax(0,1fr))}
  .card{border-radius:16px;background:transparent}
  .card .thumb{border-radius:16px}
  .card .cap{display:none}
  .mcol{gap:8px}
}