:root{--bg:#f7f7f7;--fg:#1a1a1a;--muted:#6b6b6b;--card:#ffffff;--line:#e3e3e3;--accent:#c96442;--accent-fg:#fff;--danger:#b3261e;--ok:#2e7d32;--pill:#e8f1ea}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#000000;--fg:#ececec;--muted:#9a9a9a;--card:#141414;--line:#2a2a2a;--accent:#d97757;--pill:#1e1e1e;--accent-fg:#fff}}
:root[data-theme="dark"]{--bg:#000000;--fg:#ececec;--muted:#9a9a9a;--card:#141414;--line:#2a2a2a;--accent:#d97757;--pill:#1e1e1e;--accent-fg:#fff}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
a{color:inherit}code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1.2rem;border-bottom:1px solid var(--line);background:var(--card)}
.nav .brand{font-weight:650;text-decoration:none}.nav nav{display:flex;gap:1rem;align-items:center}.nav nav a{text-decoration:none;color:var(--muted)}.nav nav a:hover{color:var(--fg)}
.inline{display:inline}.link{background:none;border:0;color:var(--muted);cursor:pointer;font:inherit;padding:0}.link:hover{color:var(--fg)}.link.danger{color:var(--danger)}
.wrap{max-width:1100px;margin:0 auto;padding:1.5rem 1.2rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.4rem}.card.narrow{max-width:420px;margin:3rem auto}
h1{font-size:1.35rem;margin:0 0 1rem}label{display:block;margin:.6rem 0}input[type=text],input[type=password],input[type=search],input:not([type]),textarea,select{width:100%;padding:.5rem .65rem;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg);font:inherit}
button.primary{background:var(--accent);color:var(--accent-fg);border:0;border-radius:8px;padding:.55rem 1rem;font:inherit;cursor:pointer;margin-top:.6rem}
.err{color:var(--danger)}.ok{color:var(--ok)}.muted{color:var(--muted)}
.toolbar{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem;flex-wrap:wrap}.toolbar h1{margin:0;flex:0 0 auto;margin-right:.4rem}.toolbar input{flex:1 1 200px;min-width:180px;max-width:320px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.tile{display:block;position:relative;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1rem 1rem 1.45rem;text-decoration:none;transition:border-color .15s}.tile .stamp{position:absolute;right:.7rem;bottom:.45rem;font-size:.68em;color:var(--muted);opacity:.75;font-variant-numeric:tabular-nums}.tile:hover{border-color:var(--accent)}
.tile-head{display:flex;align-items:center;gap:.5rem}.fav{width:20px;height:20px}.tile-title{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile-desc{color:var(--muted);font-size:.92em;margin:.5rem 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile-meta{display:flex;flex-wrap:wrap;gap:.2rem .7rem;color:var(--muted);font-size:.8em;margin-top:.7rem;align-items:baseline}.tile-meta>*{white-space:nowrap}.tile-meta time{margin-left:auto}
.row{display:flex;gap:.5rem;align-items:center}.row input{flex:1}
.table{width:100%;border-collapse:collapse;margin-top:1rem}.table th,.table td{text-align:left;padding:.45rem .5rem;border-bottom:1px solid var(--line);font-size:.92em}.table th{color:var(--muted);font-weight:500}
.token{background:var(--bg);border:1px dashed var(--accent);padding:.8rem;border-radius:8px;word-break:break-all;white-space:pre-wrap;margin-top:.8rem}
/* viewer */
.viewer-body{display:flex;flex-direction:column;height:100vh;overflow:hidden}.viewer{flex:1;display:flex;flex-direction:column;min-height:0}
.vbar{display:flex;align-items:center;gap:.5rem;padding:.4rem .7rem;border-bottom:1px solid var(--line);background:var(--card);font-size:.92em}
.vbrand{text-decoration:none;font-weight:700;padding:0 .3rem}.vtitle{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40vw}
.vbar select{width:auto;padding:.25rem .4rem;font-size:.9em}.spacer{flex:1}
.tb{background:none;border:1px solid var(--line);border-radius:8px;padding:.3rem .6rem;color:var(--fg);cursor:pointer;font:inherit;text-decoration:none}.tb:hover{border-color:var(--accent)}.tb.danger:hover{border-color:var(--danger);color:var(--danger)}
.pill{font-size:.7em;color:var(--muted)}.pill.on{color:var(--ok)}
.vsplit{flex:1;display:flex;min-height:0}.vframe{flex:1;border:0;background:#fff;min-width:0}:root[data-theme="dark"] .vframe{background:#000}
.vpanel[hidden],.pop[hidden]{display:none!important}
.vpanel{width:min(380px,45vw);border-left:1px solid var(--line);background:var(--card);display:flex;flex-direction:column;overflow:auto}
.vpanel-head{display:flex;align-items:center;gap:.5rem;justify-content:space-between;padding:.7rem .9rem;border-bottom:1px solid var(--line)}
#threads{flex:1;padding:.6rem .9rem;display:flex;flex-direction:column;gap:.7rem}
.thread{border:1px solid var(--line);border-radius:10px;padding:.6rem .7rem;font-size:.92em}.thread.resolved{opacity:.6}
.thread .anchor{color:var(--muted);font-style:italic;border-left:3px solid var(--line);padding-left:.5rem;margin-bottom:.4rem;font-size:.9em}
.cmt{margin:.35rem 0}.cmt .who{font-weight:600;font-size:.9em}.cmt .who.claude{color:var(--accent)}.cmt .when{color:var(--muted);font-size:.8em;margin-left:.4rem}.cmt .body{white-space:pre-wrap;word-break:break-word}
.thread .acts{display:flex;gap:.7rem;margin-top:.4rem;flex-wrap:wrap}.thread .acts .link{font-size:.85em}
.badge{font-size:.7em;border:1px solid var(--accent);color:var(--accent);border-radius:6px;padding:0 .35rem;margin-left:.3rem}
.cform{padding:.7rem .9rem;border-top:1px solid var(--line)}.cform textarea{margin-bottom:.3rem}.chk{display:flex;gap:.4rem;align-items:center;margin:.3rem 0;font-size:.9em}.chk input{width:auto}
.pop{position:absolute;top:44px;right:.7rem;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.8rem;width:340px;box-shadow:0 8px 24px rgba(0,0,0,.15);z-index:5}
.pop .row{margin:.5rem 0}

.tabs{display:flex;gap:.2rem;border:1px solid var(--line);border-radius:8px;padding:.15rem;flex:0 0 auto}.tabs a{text-decoration:none;color:var(--muted);padding:.3rem .7rem;border-radius:6px;font-size:.92em;white-space:nowrap}.tabs a.on{background:var(--accent);color:var(--accent-fg)}
.small{font-size:.85em}.share-users{margin:.2rem 0 .5rem 1.6rem}.chips{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.4rem}.chip-u{background:var(--pill);border-radius:999px;padding:.1rem .6rem;font-size:.85em}.chip-u button{margin-left:.3rem}

.grid-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.5rem .8rem;align-items:end;margin-top:.6rem}.grid-form label{margin:0;font-size:.9em}.grid-form button{margin:0}
.acts .link{margin-right:.6rem;font-size:.9em}.table tr.muted td{opacity:.6}
.dlg{border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--fg);padding:1.2rem;min-width:min(440px,90vw)}.dlg::backdrop{background:rgba(0,0,0,.4)}.dlg h3{margin:0 0 .6rem;font-size:1.05rem}
.toast{position:fixed;bottom:1rem;right:1rem;background:var(--card);border:1px solid var(--ok);color:var(--fg);padding:.6rem .9rem;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.2);z-index:20;max-width:60vw}.toast.err{border-color:var(--danger)}

.crumbs{display:flex;gap:.4rem;align-items:center;color:var(--muted);font-size:.9em;margin-bottom:.6rem}.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--fg)}.crumbs .sep{opacity:.6}
.banner{background:var(--pill);border:1px solid var(--line);border-radius:10px;padding:.5rem .8rem;margin-bottom:1rem;font-size:.92em}
.tile-stats{display:flex;gap:1rem;margin-top:.7rem;font-size:.9em;color:var(--muted)}.tile-stats b{color:var(--fg)}.tile.off{opacity:.55}
.toolbar .tb{margin-left:.5rem}
/* organize: gallery views, tags, folder tree */
.toolbar #q{max-width:320px}.tagbar{display:flex;flex-wrap:wrap;gap:.35rem;margin:-.4rem 0 .9rem;align-items:center}
.tag{display:inline-flex;align-items:center;gap:.35rem;font-size:.76em;font-weight:500;letter-spacing:.01em;line-height:1;color:var(--fg);background:color-mix(in srgb,var(--tc,#888) 16%,transparent);border:1px solid color-mix(in srgb,var(--tc,#888) 35%,transparent);border-radius:999px;padding:.28rem .6rem .28rem .45rem;cursor:pointer;font-family:inherit;transition:background .12s,border-color .12s}.tag::before{content:'';width:.5em;height:.5em;border-radius:50%;background:var(--tc,#888);flex:none}.tag:hover{background:color-mix(in srgb,var(--tc,#888) 28%,transparent);border-color:color-mix(in srgb,var(--tc,#888) 60%,transparent)}.tag.on{background:var(--tc,#888);border-color:var(--tc,#888);color:#fff}.tag.on::before{background:#fff}.tag .n{opacity:.65;font-weight:400;margin-left:.1em}
.tile-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.5rem;align-items:center}.tile-tags .path{font-size:.8em;color:var(--muted);margin-right:.2rem}
.tile-menu{margin-left:auto;font-size:1.1em;padding:0 .3rem;color:var(--muted)}.tile-menu:hover{color:var(--fg)}
.gsplit{display:flex;gap:1.2rem;align-items:flex-start}.gmain{flex:1;min-width:0}
.ftree{width:230px;flex:none;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.7rem .8rem;font-size:.92em}.ftree ul{list-style:none;margin:0;padding-left:.9rem}.ftree>ul{padding-left:0}.ftree a{display:block;text-decoration:none;color:var(--muted);padding:.15rem .35rem;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ftree a.on{background:var(--pill);color:var(--fg)}.ftree a:hover{color:var(--fg)}.ftree .n{opacity:.6;font-size:.85em}.ftree-head{margin-bottom:.4rem}.ftree .link{margin-top:.5rem}
.subgrid{margin-bottom:1rem}.tile.folder{background:var(--pill)}.ficon{font-size:1.1em}
.pop.menu{position:absolute;width:auto;min-width:200px;display:flex;flex-direction:column;gap:.4rem;padding:.6rem}.pop.menu .link{text-align:left;color:var(--fg)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}@media(max-width:800px){.two{grid-template-columns:1fr}.gsplit{flex-direction:column}.ftree{width:100%}}
.otree{list-style:none;padding-left:0;margin:0 0 .8rem}.otree ul{list-style:none;padding-left:1.4rem}.orow{display:flex;align-items:center;gap:.5rem;padding:.25rem 0}.orow .fname{text-decoration:none;font-weight:500}.orow .acts{margin-left:auto;opacity:0;transition:opacity .15s}.orow:hover .acts{opacity:1}
.card h2{font-size:1.05rem;margin:0 0 .3rem}
.badge.shared{border-color:var(--muted);color:var(--muted)}
.sortbox{display:inline-flex;gap:.3rem;align-items:center}.sortbox select{width:auto;padding:.3rem .5rem}.sortbox .tb{padding:.3rem .5rem}
[hidden]{display:none!important}
/* tag editor */
.tagedit{position:relative;border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:.25rem .4rem;display:flex;flex-wrap:wrap;gap:.3rem;align-items:center}
.tagedit .te-chips{display:contents}.tagedit .tag button{background:none;border:0;color:inherit;cursor:pointer;padding:0 0 0 .15rem;font-size:.95em;opacity:.6}.tagedit .tag button:hover{opacity:1}
.tagedit .te-input{flex:1 1 120px;min-width:120px;border:0;background:transparent;padding:.25rem .2rem;font:inherit;color:var(--fg);outline:none}
.tagedit .te-menu{position:absolute;left:0;right:0;top:100%;margin-top:.25rem;background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:30;max-height:240px;overflow:auto}
.te-item{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.4rem .6rem;cursor:pointer}.te-item:hover,.te-item.on{background:var(--pill)}.te-new{color:var(--muted);font-size:.92em}
/* tag editor inside a dialog: let the suggestions flow so the modal grows instead of scrolling */
.dlg{overflow:visible}.dlg .tagedit .te-menu{position:static;margin-top:.45rem;flex-basis:100%;box-shadow:none;max-height:none}
.pop .tagedit .te-menu{max-height:200px}
.pop.menu{right:auto;width:max-content;min-width:0;white-space:nowrap;padding:.4rem .3rem}.pop.menu .link{padding:.3rem .7rem;border-radius:6px}.pop.menu .link:hover{background:var(--pill)}
.toolbar .push-right{margin-left:auto}.tb.icon{display:inline-flex;align-items:center;justify-content:center;padding:.35rem;line-height:0}.tb.icon svg{display:block}

/* gallery tile footer: meta far left + stamp far right, one small muted row */
.tile-foot{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;margin-top:.75rem;font-size:.68em;color:var(--muted);opacity:.85;font-variant-numeric:tabular-nums}
.tile-foot .meta{display:flex;flex-wrap:wrap;gap:.2rem .6rem;min-width:0}.tile-foot .meta>*{white-space:nowrap}.tile-foot .meta>*+*::before{content:'·';margin-right:.6rem;opacity:.6}
.tile-foot .stamp{position:static;font-size:1em;opacity:1;flex:none}
#grid .tile,#subfolders .tile{padding:1rem}
.tile-foot .ver i{font-style:normal;opacity:.8}.tile-foot .ver i::before{content:'“'}.tile-foot .ver i::after{content:'”'}.tile-foot .share{white-space:nowrap}
.tile-path{margin-top:.5rem;font-size:.8em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile-path+.tile-tags{margin-top:.4rem}
.inline-sel{width:auto;padding:.15rem .4rem;font-size:.9em;margin-left:.3rem}.cmt .who.claude{color:var(--accent)}.badge.agent{border-color:var(--accent);color:var(--accent)}

/* file-manager tree */
.ftree{padding:.5rem .4rem;user-select:none}.ftree ul{display:none}
.tn{display:flex;gap:.25rem;padding:0 .3rem;border-radius:6px;position:relative;white-space:nowrap;min-height:1.75rem}
.tn:hover{background:color-mix(in srgb,var(--fg) 6%,transparent)}.tn.on{background:var(--pill)}.tn.drop{outline:2px dashed var(--accent);outline-offset:-2px;background:color-mix(in srgb,var(--accent) 14%,transparent)}
.tn.root{padding-left:.3rem;font-weight:600;margin-bottom:.2rem}
/* connectors drawn as full-row-height boxes so they join seamlessly between rows */
.tn{align-items:stretch}.tn>*:not(.tn-pre){align-self:center}
.tn-pre{display:flex;flex:none;align-self:stretch;--ln:color-mix(in srgb,var(--fg) 55%,transparent)}
.tn-pre i{display:block;width:1rem;position:relative;flex:none}
.tn-pre i.v::before,.tn-pre i.t::before{content:'';position:absolute;left:50%;top:0;bottom:0;border-left:1px solid var(--ln)}
.tn-pre i.l::before{content:'';position:absolute;left:50%;top:0;height:50%;border-left:1px solid var(--ln)}
.tn-pre i.t::after,.tn-pre i.l::after{content:'';position:absolute;left:50%;top:50%;width:50%;border-top:1px solid var(--ln)}
.tn-tog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:.95rem;height:.95rem;border:1px solid var(--ln);border-radius:50%;background:var(--card);color:var(--fg);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;z-index:1}.tn-tog svg{display:block}.tn-tog:hover{border-color:var(--accent);color:var(--accent)}
.tn-ico{flex:none;font-size:.95em}.tn-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:var(--fg);font-size:.92em}
.tn-n{color:var(--muted);font-size:.75em;flex:none}.tn-menu{opacity:0;padding:0 .2rem;flex:none;color:var(--muted)}.tn:hover .tn-menu{opacity:1}
.ftree-foot{margin-top:.6rem;padding:.6rem .3rem 0;border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:flex-start;gap:.45rem;font-size:.92em}.ftree-foot .chk{margin:0;font-size:1em;gap:.35rem;color:var(--fg)}.ftree-foot .chk input{width:auto;margin:0}.ftree-foot .link{font-size:1em;color:var(--fg);white-space:nowrap}.ftree-foot .link:hover{color:var(--accent)}
.tile.dragging{opacity:.5}.tile.folder.drop{outline:2px dashed var(--accent);outline-offset:-2px}
.tn-pre i.t.first::before{top:50%}.tn-pre i.l.first::before{display:none}
/* folder picker */
.fpick{position:relative}.fpick-btn{display:flex;align-items:center;gap:.4rem;width:100%;text-align:left;padding:.45rem .6rem;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg);font:inherit;cursor:pointer}.fpick-btn:hover{border-color:var(--accent)}
.fpick-path{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fpick-caret{color:var(--muted)}
.fpick-pop{position:absolute;left:0;right:0;top:100%;margin-top:.3rem;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.28);z-index:40;max-height:320px;overflow:auto;padding:.4rem .3rem;user-select:none}
.fpick-pop .tn-name{font-size:.92em}
.dlg .fpick-pop{position:static;box-shadow:none;margin-top:.4rem}
.tag.clear{--tc:var(--muted);background:transparent;border-style:dashed;color:var(--muted)}.tag.clear::before{display:none}.tag.clear:hover{color:var(--fg);border-color:var(--fg);background:transparent}
/* tiles in a row share a height; pin the footer to the bottom edge */
#grid .tile{display:flex;flex-direction:column}#grid .tile-foot{margin-top:auto;padding-top:.75rem}
#grid .tile-foot{align-items:flex-end}

.otree{background:transparent;border:0;padding:.2rem 0 .6rem;width:auto}.otree .tn-menu{opacity:.5}.otree .tn:hover .tn-menu{opacity:1}
.swatch{position:relative;width:2rem;height:2rem;border-radius:50%;border:1px solid var(--line);overflow:hidden;margin:0;flex:none;cursor:pointer}.swatch input{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);padding:0;border:0;cursor:pointer}
.acts .dot{display:inline-block;width:.9em;height:.9em;border-radius:50%;vertical-align:-.1em;border:1px solid rgba(0,0,0,.15)}
#otags td.num,#otags th.num{text-align:right;width:5rem}
.tn-name.static{cursor:default}.otree .tn .acts{margin-left:.6rem;opacity:1}.otree .tn .acts .link{margin-right:.55rem;font-size:.88em;color:var(--muted)}.otree .tn .acts .link:hover{color:var(--fg)}.otree .tn .acts .link.danger{color:var(--danger)}.otree .tn{min-height:1.9rem}
/* organize page: one type size (same as the table rows) for folder names, counts and actions */
.otree .tn{font-size:1em}.otree .tn-name{font-size:1em}.otree .tn-n{font-size:1em;color:var(--muted)}.otree .tn .acts .link{font-size:1em}
#otags td,#otags .acts .link{font-size:.92em}#otags .acts .link{font-size:1em}
/* organize: no row highlight; highlight the item itself (folder name / tag badge) on hover */
.otree .tn:hover{background:transparent}
.otree .tn-name.static{padding:.15rem .45rem;margin-left:-.2rem;border-radius:6px;transition:background .12s}.otree .tn-name.static:hover{background:var(--pill)}
#otags tr:hover td{background:transparent}
/* action items as small ghost buttons — one style system-wide: action cells (.acts: admin tables, API keys,
   comment threads, organize page) and popover menus (.pop.menu: gallery folder/tile ⋯ menus, browse ⋯) */
.acts .link,.pop.menu .link{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .55rem;margin-right:.25rem;border:1px solid transparent;border-radius:6px;color:var(--muted);line-height:1.2;transition:background .12s,border-color .12s,color .12s}
.acts .link:hover,.pop.menu .link:hover{background:var(--pill);border-color:var(--line);color:var(--fg)}
.acts .link.danger,.pop.menu .link.danger{color:var(--danger)}.acts .link.danger:hover,.pop.menu .link.danger:hover{background:color-mix(in srgb,var(--danger) 12%,transparent);border-color:color-mix(in srgb,var(--danger) 40%,transparent);color:var(--danger)}
.pop.menu .link{display:flex;color:var(--fg);padding:.35rem .7rem;margin:0}.pop.menu{gap:.15rem}
.thread .acts{gap:.2rem}.thread .acts .link{margin-right:0}
.table td.acts{white-space:nowrap;padding-top:.35rem;padding-bottom:.35rem}.table td.acts .link{margin-right:.15rem}
#otags .acts .dot{width:1em;height:1em}
/* rows mixing selects + inputs: selects size to content, search fields keep a usable width */
.row select{width:auto;flex:0 0 auto}.row input[type=search]{flex:1 1 200px;min-width:180px}.row label.chk{flex:0 0 auto;white-space:nowrap}