:root { --blue:#4b828b; --tint:#edfafc; --line:#e3eced; }
* { box-sizing: border-box; }
body { margin:0; font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; color:#234; }
.bar { height:0; }
.empty { color:#aaa; font-size:12px; letter-spacing:1px; text-transform:uppercase; padding:40px; text-align:center; }

.dam { display:flex; height:100vh; }
#side { width:300px; flex:0 0 auto; border-right:1px solid var(--line); overflow-y:auto; padding:14px 10px; background:#f6fcfd; }
#main { flex:1; min-width:0; overflow-y:auto; padding:16px 20px 80px; }

.side-h { font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:#9a9a9a; font-weight:600; padding:2px 8px 10px; }

.tree { display:flex; flex-direction:column; }
.fnode { display:flex; align-items:center; gap:4px; padding:6px 8px; border-radius:7px; cursor:pointer; font-size:13px; }
.fnode:hover { background:#eaf5f6; }
.fnode.on { background:var(--blue); color:#fff; }
.fnode.on .fcount, .fnode.on .fact, .fnode.on .chev { color:#dff; }
.fnode.root .fname { font-weight:600; }
.chev { flex:0 0 auto; width:14px; text-align:center; font-size:10px; color:#789; cursor:pointer; }
.chev.none { cursor:default; }
.fname { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fname.muted { color:#9a9a9a; font-style:italic; }
.fcount { font-size:11px; color:#9a9a9a; }
.fnode.arch > .fname { opacity:.5; }
.kind-archived > .fname::before { content:'🗄 '; }
.facts { display:none; gap:2px; }
.fnode:hover .facts { display:flex; }
.fact { border:none; background:none; cursor:pointer; font-size:12px; color:#789; padding:1px 3px; border-radius:4px; }
.fact:hover { background:rgba(0,0,0,.08); }

.dam-bar { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.dam-bar .grow { flex:1; }
.crumb { font-size:15px; display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.crumb-seg { color:var(--blue); cursor:pointer; }
.crumb-seg:hover { text-decoration:underline; }
.crumb-seg.cur { color:#234; font-weight:600; cursor:default; }
.crumb-seg.cur:hover { text-decoration:none; }
.crumb-sep { color:#bcc; }
.sel-info { font-size:12px; color:var(--blue); }

.sec-h { font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:#9a9a9a; font-weight:600; margin:4px 0 10px; }
.fsec { margin-bottom:22px; }
.fgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px; }
.folder-card { display:flex; align-items:center; gap:9px; padding:11px 13px; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; }
.folder-card:hover { border-color:var(--blue); background:var(--tint); }
.fc-icon { font-size:17px; flex:0 0 auto; }
.fc-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.fc-count { font-size:11px; color:#9a9a9a; flex:0 0 auto; }
.folder-card.arch { opacity:.55; }
.folder-card.kind-archived .fc-icon { filter:grayscale(1); }
.folder-card.kind-archived .fc-name::after { content:' · Archived'; color:#9a9a9a; font-size:10px; }
.move-sel { font:inherit; font-size:12px; padding:6px 9px; border:1px solid #dce5e6; border-radius:7px; background:#fff; }

.agrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.acard { margin:0; }
.athumb { position:relative; aspect-ratio:4/3; background:#eef3f4; border:1px solid var(--line); border-radius:10px; overflow:hidden; cursor:pointer; }
.athumb img { width:100%; height:100%; object-fit:cover; display:block; }
.acard.sel .athumb { outline:3px solid var(--blue); outline-offset:1px; }
.acheck { position:absolute; top:7px; left:7px; width:18px; height:18px; cursor:pointer; }
.acard figcaption { font-size:11.5px; color:#445; margin-top:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.sheet-back { position:fixed; inset:0; background:rgba(20,30,32,.45); display:flex; align-items:center; justify-content:center; z-index:30; padding:24px; }
.sheet { background:#fff; border-radius:14px; width:min(460px,100%); max-height:90vh; overflow:auto; padding:18px; box-shadow:0 18px 60px rgba(0,0,0,.3); }
.sheet-img { width:100%; aspect-ratio:4/3; background:#eef3f4; border-radius:10px; overflow:hidden; margin-bottom:14px; }
.sheet-img img { width:100%; height:100%; object-fit:contain; }
.fg { display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
.fg label { font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:#9a9a9a; }
.fg input, .fg select { font:inherit; font-size:13px; padding:8px 10px; border:1px solid #dce5e6; border-radius:7px; }
.flags { display:flex; gap:18px; margin:6px 0 14px; }
.flag { font-size:13px; display:flex; align-items:center; gap:4px; }
.sheet-foot { display:flex; justify-content:flex-end; }
.btn { font:inherit; font-size:13px; padding:9px 18px; border-radius:8px; border:1px solid var(--blue); background:#fff; color:var(--blue); cursor:pointer; }
.btn.primary { background:var(--blue); color:#fff; }
.btn.danger { border-color:#c0392b; color:#c0392b; }
.btn.danger:hover { background:#c0392b; color:#fff; }
.btn:disabled { opacity:.6; cursor:default; }
.sheet-foot.spread { justify-content:space-between; }
.foot-right { display:flex; gap:10px; }
.del-sel { font-size:12px; padding:6px 11px; }
.dam-acts { display:flex; gap:8px; align-items:center; }
.dam-acts .btn { font-size:13px; padding:8px 14px; }
.dam-selgrp { display:none; align-items:center; gap:8px; margin-right:12px; padding-right:12px; border-right:1px solid var(--line); }
.btn.ghost { border-color:#dce5e6; color:#456; }
.btn.ghost:hover { border-color:var(--blue); color:var(--blue); background:var(--tint); }
.more-btn { padding:8px 12px; font-weight:700; letter-spacing:1px; }
.pop-back { position:fixed; inset:0; z-index:40; }
.pop-menu { position:fixed; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 34px rgba(20,30,32,.2); padding:5px; min-width:210px; display:flex; flex-direction:column; }
.pop-item { font:inherit; font-size:13px; text-align:left; padding:9px 12px; border:none; background:none; cursor:pointer; border-radius:7px; color:#234; }
.pop-item:hover { background:var(--tint); }
.pop-item.danger { color:#c0392b; }
.pop-item.danger:hover { background:#fdf1f0; }
.crop-note { font-size:12px; color:#789; text-align:center; margin:0 0 14px; }

/* crop editor */
.crop-sheet { width:min(720px,100%); }
.crop-stage { position:relative; display:inline-block; line-height:0; max-width:100%; margin:0 auto 12px; user-select:none; touch-action:none; }
.crop-img { max-height:62vh; max-width:100%; display:block; border-radius:6px; }
.crop-box { position:absolute; border:1px solid #fff; box-shadow:0 0 0 9999px rgba(15,22,24,.55); cursor:move; box-sizing:border-box; }
.crop-box::before, .crop-box::after { content:''; position:absolute; background:rgba(255,255,255,.5); }
.crop-box::before { left:33.33%; right:33.33%; top:0; bottom:0; border-left:1px solid rgba(255,255,255,.5); border-right:1px solid rgba(255,255,255,.5); background:none; }
.crop-box::after { top:33.33%; bottom:33.33%; left:0; right:0; border-top:1px solid rgba(255,255,255,.5); border-bottom:1px solid rgba(255,255,255,.5); background:none; }
.crop-handle { position:absolute; right:-7px; bottom:-7px; width:16px; height:16px; background:#fff; border:2px solid var(--blue); border-radius:50%; cursor:nwse-resize; touch-action:none; }
.crop-ratios { display:flex; gap:8px; justify-content:center; margin-bottom:14px; }
.crop-rbtn { font:inherit; font-size:12px; font-weight:600; padding:6px 14px; border:1px solid #dce5e6; border-radius:20px; background:#fff; color:#456; cursor:pointer; }
.crop-rbtn.on { background:var(--blue); color:#fff; border-color:var(--blue); }

#main.drop { outline:3px dashed var(--blue); outline-offset:-10px; background:var(--tint); }
.up-btn { margin-left:8px; }
.up-sheet { width:min(560px,100%); }
.up-h { margin:0 0 14px; font-size:15px; }
.up-list { display:flex; flex-direction:column; gap:12px; max-height:60vh; overflow:auto; margin-bottom:14px; }
.up-row { display:flex; gap:12px; align-items:flex-start; padding:8px; border:1px solid var(--line); border-radius:10px; }
.up-row.done { border-color:#2a8f3c; background:#f1faf3; }
.up-row.failed { border-color:#c0392b; background:#fdf1f0; }
.up-pv { width:84px; height:64px; flex:0 0 auto; border-radius:7px; overflow:hidden; background:#eef3f4; }
.up-pv img { width:100%; height:100%; object-fit:cover; }
.up-fields { flex:1; display:flex; flex-direction:column; gap:6px; min-width:0; }
.up-fields input, .up-fields select { font:inherit; font-size:13px; padding:7px 9px; border:1px solid #dce5e6; border-radius:7px; }
.sheet-foot { gap:10px; }

.pend-badge { position:absolute; top:7px; right:7px; background:#c99700; color:#fff; font-size:9px; font-weight:700; letter-spacing:.6px; padding:2px 5px; border-radius:4px; }
.gal-badge { position:absolute; bottom:7px; left:7px; background:rgba(43,90,99,.92); color:#fff; font-size:10px; font-weight:600; padding:2px 6px; border-radius:5px; cursor:default; }
.gal-line { font-size:12.5px; color:var(--blue); background:var(--tint); border-radius:8px; padding:8px 11px; margin-bottom:12px; }
.pend-note { background:#fff8e6; border:1px solid #efd9a0; border-radius:9px; padding:10px 12px; margin-bottom:12px; font-size:13px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.link-help { font-size:12.5px; color:#789; margin:0 0 12px; }
.link-list { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.link-row { border:1px solid var(--line); border-radius:10px; padding:9px 11px; }
.link-meta { font-size:12px; color:#567; margin-bottom:6px; }
.link-url { display:flex; gap:6px; align-items:center; }
.link-url input { flex:1; font:inherit; font-size:12px; padding:6px 8px; border:1px solid #dce5e6; border-radius:6px; background:#f6fcfd; color:#456; }
.link-form { display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--line); padding-top:14px; }
.link-form input { font:inherit; font-size:13px; padding:8px 10px; border:1px solid #dce5e6; border-radius:8px; }

.toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%); background:#1b2b2d; color:#fff; padding:10px 18px; border-radius:10px; font-size:13px; opacity:0; transition:opacity .2s; z-index:50; pointer-events:none; }
.toast.show { opacity:1; }
@media(max-width:700px){ #side{width:200px;} }