:root{--accent-color:#e9ffc2;--active-item-bg:#2a2a2a;--bg-color:#0d0d0d;--border-color:#333333;--error-header-bg:#1a1a1a;--error-header-border:#333333;--error-text:#e86671;--font:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";--highlight-bg:#bef26426;--line-number-color:#555555;--primary-text:#ffffff;--secondary-text:#888888;--surface-color:#1a1a1a}
*{box-sizing:border-box;scrollbar-color:var(--accent-color) #000;scrollbar-width:thin}
*::-webkit-scrollbar{height:8px;width:8px}
*::-webkit-scrollbar-thumb{background:var(--accent-color)}
*::-webkit-scrollbar-track{background:#000}
a{color:var(--accent-color);text-decoration:none}
a:hover{text-decoration:underline}
aside{background:#121212;border-right:1px solid var(--border-color);overflow:auto}
body{overflow:hidden}
button{background:#171717;border:1px solid var(--border-color);border-radius:.6rem;color:var(--primary-text);cursor:pointer;padding:.45rem .7rem}
button.danger{background:#2a1515;border-color:#5a2a2a;color:#ffd7dd}
button.primary{background:#223322;border-color:#446644}
button:disabled{cursor:not-allowed;filter:saturate(.4);opacity:.55}
button:hover{border-color:#414141}
header{align-items:center;background:var(--surface-color);border-bottom:1px solid var(--border-color);display:grid;gap:.75rem;grid-template-columns:1fr auto;padding:.9rem 1rem}
header .actions{align-content:flex-start;align-items:flex-start;display:flex;flex-wrap:wrap;gap:.5rem;justify-self:end}
html,body{background:linear-gradient(180deg,var(--bg-color),#111 30%,var(--bg-color));color:var(--primary-text);font:14px/1.4 var(--font);height:100%;margin:0;overflow:hidden}
li.folder.collapsed>ul{display:none}
li.folder>.row .icon::before{content:"📁"}
main{display:grid;grid-template-columns:220px 1fr;height:calc(100% - 64px);min-height:0}
#crumbs{align-items:center;background:#111;border-bottom:1px solid var(--border-color);display:flex;flex-wrap:nowrap;gap:.4rem;padding:.6rem .9rem}
#crumbs .seg{align-items:center;background:var(--highlight-bg);border:1px solid var(--accent-color);border-radius:.55rem;color:var(--primary-text);cursor:pointer;display:inline-flex;gap:.4rem;padding:.18rem .55rem}
#crumbs .seg.root{background:transparent;border-color:var(--border-color);color:var(--secondary-text)}
#crumbs .seg:hover{filter:brightness(1.08)}
#crumbs .sep{color:var(--secondary-text)}
#dirlist{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
#dirlist.details{display:block}
#dirlist.list{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
#editorBox{background:#0f0f0f;border:1px solid var(--border-color);border-radius:.6rem;height:70vh;overflow:hidden}
#meta{align-items:center;background:#0f0f0f;border-bottom:1px solid var(--border-color);display:none;gap:.75rem;justify-content:space-between;padding:.6rem .9rem}
#meta .actions{align-items:center;display:flex;gap:.5rem}
#meta .info{display:flex;flex-direction:column;gap:.25rem}
#meta.show{display:flex}
#stage{min-height:0;overflow:auto;padding:1rem}
#ta{background:#0f0f0f;border:0;color:var(--primary-text);font:13px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;height:100%;outline:0;padding:.8rem;resize:none;width:100%}
#tree{list-style:none;margin:0;padding:.5rem}
#tree li{margin:0;padding:.1rem 0 .1rem .6rem;user-select:none}
#viewbar{align-items:center;background:#101010;border-bottom:1px solid var(--border-color);display:none;flex-wrap:wrap;gap:.5rem;padding:.5rem .9rem}
#viewerBox:-webkit-full-screen img,#viewerBox:-webkit-full-screen video,#viewerBox:-webkit-full-screen iframe.pdf{height:100%;object-fit:contain;width:100%}
#viewerBox:-webkit-full-screen,#editorBox:-webkit-full-screen{height:100vh;width:100vw}
#viewerBox:fullscreen img,#viewerBox:fullscreen video,#viewerBox:fullscreen iframe.pdf{height:100%;object-fit:contain;width:100%}
#viewerBox:fullscreen,#editorBox:fullscreen{height:100vh;width:100vw}
#welcome{background:#101010;border:1px solid var(--border-color);border-radius:.8rem;color:var(--secondary-text);margin:2rem auto;max-width:720px;padding:1rem 1.2rem}
#welcome h2{color:var(--primary-text);font-size:18px;margin:0 0 .5rem 0}
#welcome p{margin:.3rem 0}
.brand{align-items:center;display:inline-flex;font-size:15px;font-weight:700;gap:.6rem;letter-spacing:.4px}
.brand .dot{background:var(--accent-color);border-radius:999px;box-shadow:0 0 12px var(--accent-color);height:.75rem;width:.75rem}
.brand .host{background:var(--highlight-bg);border:1px solid var(--accent-color);border-radius:.6rem;padding:.2rem .55rem}
.card{align-items:center;background:#0f0f0f;border:1px solid var(--border-color);border-radius:.6rem;cursor:pointer;display:flex;gap:.55rem;padding:.6rem}
.card .thumb{background:#161616;border:1px solid var(--border-color);border-radius:.4rem;display:grid;font-size:18px;height:36px;overflow:hidden;place-items:center;width:36px}
.card .thumb img{display:block;height:100%;object-fit:cover;width:100%}
.card .title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card:hover{background:var(--highlight-bg);border-color:var(--accent-color)}
.center{text-align:center}
.children{list-style:none;margin:.2rem 0 .2rem 1rem;padding:0}
.content{display:grid;grid-template-rows:auto auto auto 1fr;min-height:0;min-width:0}
.details table{border-collapse:collapse;width:100%}
.details th{color:var(--secondary-text);cursor:pointer;font-weight:600;user-select:none}
.details th .arrow{margin-left:.25rem}
.details th,.details td{border-bottom:1px solid var(--border-color);padding:.45rem .5rem;text-align:left}
.details th.sorted{color:var(--primary-text)}
.hidden{display:none!important}
.icon{text-align:center;width:1.1rem}
.list .card{background:transparent;border:0;padding:.35rem .2rem}
.list .card .thumb{background:transparent;border:0;height:24px;width:24px}
.name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.right{margin-left:auto}
.row{align-items:center;border-radius:.5rem;cursor:pointer;display:flex;gap:.45rem;padding:.25rem .4rem}
.row.active{background:#202020;outline:1px solid var(--border-color)}
.row:hover{background:var(--active-item-bg)}
.segbtn{background:#171717;border:1px solid var(--border-color);border-radius:.45rem;color:var(--primary-text);cursor:pointer;padding:.35rem .55rem}
.segbtn.active{background:var(--highlight-bg);border-color:var(--accent-color)}
.small{color:var(--secondary-text);font-size:12px}
.toggle{color:var(--secondary-text);display:inline-grid;font-size:.8rem;height:1rem;place-items:center;width:1rem}
.viewer{align-items:center;background:#0f0f0f;border:1px solid var(--border-color);border-radius:.6rem;display:flex;height:70vh;justify-content:center;overflow:hidden}
.viewer iframe.pdf{background:#0f0f0f;border:0;height:100%;width:100%}
.viewer img{height:auto;max-height:100%;max-width:100%;width:auto}
.viewer video{height:auto;max-height:100%;max-width:100%;width:auto}
@media(max-width:900px){
aside{border-bottom:1px solid var(--border-color);border-right:0}
header .actions{gap:.4rem;justify-content:flex-start;justify-self:stretch}
main{grid-template-columns:1fr;grid-template-rows:40vh 1fr}}