/* Pinecrest Drive - a Drive-style file browser. Light and dark follow the device. */
:root { --bg:#f7f9f8; --panel:#ffffff; --side:#f1f5f3; --ink:#1d2a24; --ink2:#55645c; --faint:#8a988f; --line:#e1e8e4; --hover:#e9f1ec; --sel:#d6ebdf; --brand:#0f6b45; --brand2:#1f8a5b; --brandSoft:#e3f2ea; --bad:#b3261e; --shadow:0 1px 2px rgba(16,40,28,.06),0 4px 16px rgba(16,40,28,.08); --r:14px; }
@media (prefers-color-scheme: dark) { :root { --bg:#111614; --panel:#171e1b; --side:#141a17; --ink:#e4ece7; --ink2:#a8b6ae; --faint:#75847b; --line:#26302b; --hover:#1f2925; --sel:#1f3a2c; --brand:#5fd39b; --brand2:#3fb57f; --brandSoft:#1b3327; --bad:#ff8a80; --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 20px rgba(0,0,0,.35); } }
* { box-sizing:border-box; }
html, body { margin:0; height:100%; }
body { font-family:Inter, system-ui, -apple-system, "Segoe UI", sans-serif; font-size:14px; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; }
button, input { font:inherit; color:inherit; }
button { cursor:pointer; }
.muted { color:var(--ink2); }

/* sign-in */
body.signin { display:grid; place-items:center; padding:16px; background:radial-gradient(1200px 600px at 10% -10%, var(--brandSoft), transparent), var(--bg); }
.signin-card { width:100%; max-width:380px; background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:28px; box-shadow:var(--shadow); }
.signin-card .logo { display:flex; gap:12px; align-items:center; margin-bottom:18px; }
.signin-card .logo b { display:block; font-size:17px; } .signin-card .logo span { color:var(--faint); font-size:12px; }
.signin-card h1 { margin:6px 0 2px; font-size:22px; }
.signin-card label { display:block; margin-top:14px; font-weight:500; font-size:13px; color:var(--ink2); }
.signin-card input { display:block; width:100%; margin-top:6px; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:var(--bg); font-size:15px; }
.signin-card input:focus { outline:2px solid var(--brand2); border-color:transparent; }
.signin-card .err { margin-top:12px; padding:10px 12px; border-radius:10px; background:color-mix(in srgb, var(--bad) 12%, transparent); color:var(--bad); }
.signin-card .fine { color:var(--faint); font-size:12px; margin:16px 0 0; }
button.primary { width:100%; margin-top:20px; padding:11px; border:0; border-radius:10px; background:var(--brand); color:#fff; font-weight:600; }
@media (prefers-color-scheme: dark) { button.primary { color:#08130d; } }

/* the app */
.shell { display:grid; grid-template-columns:248px 1fr; height:100vh; height:100dvh; }
.side { background:var(--side); border-right:1px solid var(--line); padding:14px 12px; display:flex; flex-direction:column; gap:4px; overflow:auto; }
.side .brand { display:flex; align-items:center; gap:10px; padding:4px 8px 14px; font-weight:600; font-size:16px; }
.new { display:flex; align-items:center; gap:10px; padding:12px 18px; margin:0 0 10px; border:0; border-radius:16px; background:var(--panel); box-shadow:var(--shadow); font-weight:600; width:max-content; }
.new svg { width:22px; height:22px; }
.nav { display:flex; align-items:center; gap:12px; padding:8px 14px; border-radius:999px; border:0; background:none; text-align:left; color:var(--ink); font-weight:500; }
.nav svg { width:20px; height:20px; color:var(--ink2); }
.nav:hover { background:var(--hover); } .nav.on { background:var(--sel); color:var(--brand); } .nav.on svg { color:var(--brand); }
.usage { margin-top:auto; padding:12px 10px 4px; color:var(--ink2); font-size:12px; }
.bar { height:6px; border-radius:6px; background:var(--line); overflow:hidden; margin:6px 0; } .bar i { display:block; height:100%; background:var(--brand2); }
.main { display:flex; flex-direction:column; min-width:0; background:var(--panel); position:relative; }
.top { display:flex; align-items:center; gap:12px; padding:12px 18px; border-bottom:1px solid var(--line); }
.search { flex:1; max-width:720px; display:flex; align-items:center; gap:10px; background:var(--side); border-radius:999px; padding:0 16px; height:44px; }
.search input { flex:1; border:0; background:none; outline:none; font-size:15px; }
.search svg { width:20px; height:20px; color:var(--ink2); }
.iconbtn { width:40px; height:40px; border-radius:50%; border:0; background:none; display:grid; place-items:center; color:var(--ink2); }
.iconbtn:hover { background:var(--hover); } .iconbtn svg { width:20px; height:20px; }
.avatar { width:34px; height:34px; border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center; font-weight:600; border:0; }
.menuburger { display:none; }
.head { display:flex; align-items:center; gap:8px; padding:14px 22px 6px; flex-wrap:wrap; }
.crumbs { display:flex; align-items:center; flex-wrap:wrap; gap:2px; font-size:20px; flex:1; min-width:0; }
.crumbs button { border:0; background:none; padding:4px 10px; border-radius:999px; font-size:inherit; color:var(--ink); }
.crumbs button:hover { background:var(--hover); } .crumbs .sep { color:var(--faint); font-size:16px; }
.seg { display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.seg button { border:0; background:none; padding:6px 12px; display:grid; place-items:center; color:var(--ink2); } .seg button.on { background:var(--sel); color:var(--brand); } .seg svg { width:18px; height:18px; }
.sort { border:1px solid var(--line); background:none; border-radius:999px; padding:6px 12px; color:var(--ink2); }
.content { flex:1; overflow:auto; padding:6px 22px 90px; position:relative; }
.section-t { color:var(--ink2); font-weight:500; margin:14px 2px 10px; font-size:13px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:14px; }
.card { background:var(--side); border:1px solid transparent; border-radius:var(--r); overflow:hidden; cursor:default; user-select:none; transition:background .12s; }
.card:hover { background:var(--hover); } .card.sel { background:var(--sel); border-color:var(--brand2); }
.card .t { display:flex; align-items:center; gap:10px; padding:12px 12px; font-weight:500; min-width:0; }
.card .t svg { width:22px; height:22px; flex:none; }
.card .t span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.card .thumb { margin:0 10px 10px; height:130px; border-radius:10px; background:var(--panel); display:grid; place-items:center; overflow:hidden; }
.card .thumb img { width:100%; height:100%; object-fit:cover; } .card .thumb svg { width:56px; height:56px; }
.card.folder .t { padding:14px 14px; }
.star { color:#e0a100; font-size:13px; }
.list { width:100%; border-collapse:collapse; }
.list th { text-align:left; font-weight:500; color:var(--ink2); font-size:13px; padding:10px 12px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--panel); }
.list td { padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
.list tr:hover td { background:var(--hover); } .list tr.sel td { background:var(--sel); }
.list .nm { display:flex; align-items:center; gap:12px; font-weight:500; max-width:52vw; } .list .nm span { overflow:hidden; text-overflow:ellipsis; }
.list .nm svg { width:22px; height:22px; flex:none; }
.list .c-loc, .list .c-by { color:var(--ink2); }
.empty { text-align:center; color:var(--ink2); padding:70px 20px; } .empty svg { width:96px; height:96px; color:var(--line); }
.drop { position:absolute; inset:8px; border:3px dashed var(--brand2); border-radius:18px; background:color-mix(in srgb, var(--brandSoft) 85%, transparent); display:none; place-items:center; font-size:18px; font-weight:600; color:var(--brand); z-index:5; pointer-events:none; }
.dragging .drop { display:grid; }
.selbar { display:none; align-items:center; gap:4px; padding:6px 10px; border-radius:999px; background:var(--side); position:absolute; top:76px; left:16px; right:16px; z-index:6; box-shadow:var(--shadow); }
.selbar.on { display:flex; } .selbar b { margin:0 10px 0 6px; font-weight:500; }

/* menus, dialogs, previews, toasts, uploads */
.menu { position:fixed; z-index:50; min-width:220px; background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:6px; }
.menu button { display:flex; align-items:center; gap:12px; width:100%; border:0; background:none; padding:9px 12px; border-radius:8px; text-align:left; }
.menu button:hover { background:var(--hover); } .menu svg { width:18px; height:18px; color:var(--ink2); } .menu hr { border:0; border-top:1px solid var(--line); margin:6px 0; }
.menu .danger { color:var(--bad); } .menu .danger svg { color:var(--bad); }
.scrim { position:fixed; inset:0; background:rgba(0,0,0,.42); z-index:60; display:grid; place-items:center; padding:16px; }
.dlg { background:var(--panel); border-radius:20px; padding:22px; width:min(440px, 100%); box-shadow:var(--shadow); }
.dlg h2 { margin:0 0 14px; font-size:19px; font-weight:600; } .dlg p { color:var(--ink2); margin:0 0 12px; }
.dlg input { width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:var(--bg); font-size:15px; }
.dlg input:focus { outline:2px solid var(--brand2); border-color:transparent; }
.dlg .btns { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
.btn { border:0; background:none; padding:9px 16px; border-radius:999px; color:var(--brand); font-weight:600; } .btn:hover { background:var(--hover); }
.btn.fill { background:var(--brand); color:#fff; } @media (prefers-color-scheme: dark) { .btn.fill { color:#08130d; } }
.btn.red { color:var(--bad); }
.folderpick { max-height:300px; overflow:auto; border:1px solid var(--line); border-radius:12px; }
.folderpick button { display:flex; align-items:center; gap:10px; width:100%; border:0; background:none; padding:9px 12px; text-align:left; }
.folderpick button:hover { background:var(--hover); } .folderpick button.on { background:var(--sel); color:var(--brand); } .folderpick svg { width:18px; height:18px; flex:none; }
.viewer { position:fixed; inset:0; z-index:70; background:rgba(10,14,12,.94); display:flex; flex-direction:column; color:#fff; }
.viewer .vt { display:flex; align-items:center; gap:10px; padding:10px 14px; }
.viewer .vt b { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.viewer .iconbtn { color:#fff; } .viewer .iconbtn:hover { background:rgba(255,255,255,.12); }
.viewer .vb { flex:1; display:grid; place-items:center; padding:10px; min-height:0; }
.viewer img, .viewer video { max-width:100%; max-height:100%; border-radius:8px; }
.viewer iframe { width:min(1000px, 100%); height:100%; border:0; border-radius:8px; background:#fff; }
.viewer pre { width:min(1000px, 100%); height:100%; overflow:auto; background:#fff; color:#111; padding:16px; border-radius:8px; margin:0; font-size:13px; white-space:pre-wrap; }
.viewer .nopreview { text-align:center; color:#cfd8d3; } .viewer .nopreview svg { width:90px; height:90px; }
.viewer .info { font-size:12px; color:#b9c6be; padding:0 14px 10px; word-break:break-all; }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:#26302b; color:#fff; padding:12px 18px; border-radius:10px; box-shadow:var(--shadow); z-index:80; max-width:calc(100% - 32px); }
.uploads { position:fixed; right:20px; bottom:20px; width:360px; max-width:calc(100% - 32px); background:var(--panel); border-radius:16px; box-shadow:var(--shadow); border:1px solid var(--line); z-index:40; overflow:hidden; }
.uploads .uh { display:flex; align-items:center; padding:12px 14px; background:var(--side); font-weight:600; } .uploads .uh span { flex:1; }
.uploads .ul { max-height:240px; overflow:auto; } .uploads .ui { padding:10px 14px; border-top:1px solid var(--line); }
.uploads .ui .n { display:flex; justify-content:space-between; gap:8px; font-size:13px; } .uploads .ui .n span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.uploads .ui .bar { margin:6px 0 0; } .uploads .ui.err .n span:last-child { color:var(--bad); }
.fab { display:none; }

@media (max-width: 820px) {
  .shell { grid-template-columns:1fr; }
  .side { position:fixed; inset:0 auto 0 0; width:270px; z-index:45; transform:translateX(-100%); transition:transform .2s; box-shadow:var(--shadow); }
  .shell.menu-open .side { transform:none; }
  .menuburger { display:grid; }
  .top { padding:10px 10px; gap:6px; } .head { padding:12px 12px 4px; } .content { padding:4px 12px 100px; } .selbar { top:70px; left:10px; right:10px; }
  .crumbs { font-size:17px; }
  .grid { grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
  .card .thumb { height:100px; }
  .list .c-by, .list .c-loc, .list th.c-by, .list th.c-loc { display:none; }
  .fab { display:grid; place-items:center; position:fixed; right:18px; bottom:22px; width:60px; height:60px; border-radius:18px; border:0; background:var(--brand); color:#fff; box-shadow:var(--shadow); z-index:30; }
  .fab svg { width:26px; height:26px; }
  .uploads { right:16px; bottom:96px; }
}