/* File Cabinet Pro v2 — OS-like portfolio */
:root {
  --bg: #0e1014;
  --panel: #141821;
  --card: #161b25;
  --line: #232a36;
  --fg: #e9edf3;
  --muted: #9aa6b4;
  --brand: #6ea0ff;
  --accent: #ffc98c;
  --radius: 12px;
  --pad: clamp(12px, 2.6vw, 24px);
  --font: Inter, ui-sans-serif, -apple-system, Segoe UI, Roboto, Helvetica, Arial, system-ui, sans-serif;
}
[data-theme="light"] {
  --bg: #f6f8fc;
  --panel: #ffffff;
  --card: #ffffff;
  --line: #e7edf6;
  --fg: #0d1220;
  --muted: #5e6c7d;
  --brand: #355cff;
  --accent: #ffb347;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); line-height: 1.55; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
.sr-only{position:absolute;left:-9999px}

/* header */
.topbar {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px;
  padding: var(--pad); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px); position: sticky; top: 0; z-index: 20;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
}
.brand{display:flex; align-items:center; gap:8px; font-weight:800;}
.logo{background:transparent;border:1px solid var(--line);border-radius:10px;padding:6px;cursor:pointer;color:var(--fg)}
.searchbar input{width:min(520px, 60vw); padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:var(--panel); color:var(--fg);}
.actions{display:flex; gap:8px;}
.viewbtn,#themeToggle{border:1px solid var(--line); background:transparent; color:var(--fg); padding:8px 10px; border-radius:10px; cursor:pointer;}
.viewbtn.is-active{background:color-mix(in oklab, var(--brand) 14%, var(--panel));}
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:10px; border:none; background:var(--brand); color:#fff; font-weight:700; cursor:pointer;}
.btn.tiny{padding:6px 8px; font-size:12px;}
.btn-ghost{background:transparent; border:1px solid var(--line); color:var(--fg);}

/* layout */
.layout{ display:grid; grid-template-columns: 280px 1fr; min-height: calc(100vh - 64px); }
.sidebar{ border-right:1px solid var(--line); background:var(--panel); padding: var(--pad); display:grid; gap: 14px; }
.tree{ display:block; }
.tree .node{ margin: 4px 0; }
.tree .node > .row{ display:flex; align-items:center; gap:6px; padding:6px 8px; border:1px solid var(--line); border-radius:10px; cursor:pointer; }
.tree .node[aria-current="true"] > .row{ background:color-mix(in oklab, var(--brand) 14%, var(--panel)); }
.tree .children{ margin-left: 18px; }
.chev{ width: 18px; text-align:center; color: var(--muted); }
.filters h4, .help h4{ margin:0 0 6px; color: var(--muted); font-size:12px; letter-spacing:.08em; text-transform:uppercase;}
.tag-filters{ display:flex; flex-wrap:wrap; gap:6px; }
.tag{ font-size: 12px; border:1px solid var(--line); border-radius:999px; padding:2px 8px; color:var(--fg); cursor:pointer; }
.tag.is-on{ background: color-mix(in oklab, var(--brand) 16%, var(--panel)); }
.help ul{ margin:0; padding-left: 1.2rem; color: var(--muted); }

.explorer{ display:grid; grid-template-rows: auto 1fr; }
.crumbs{ display:flex; align-items:center; justify-content:space-between; padding: var(--pad); border-bottom:1px solid var(--line); }
.breadcrumb{ display:flex; gap:8px; align-items:center; padding:0; margin:0; list-style:none; color: var(--muted); }
.breadcrumb li+li:before{ content:"/"; opacity:.5; margin-right:8px; }

.pane{ display:grid; grid-template-columns: 1fr 340px; gap: 12px; padding: var(--pad); }
.preview{ border:1px solid var(--line); border-radius:12px; padding:12px; background: var(--card); }
.pv-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.pv-thumb{ aspect-ratio: 16/10; background: color-mix(in oklab, var(--accent) 30%, var(--panel)); border-radius:10px; display:grid; place-items:center; color:#000; font-weight:800; }
.meta{ display:flex; gap:12px; color: var(--muted); padding:0; list-style:none; flex-wrap:wrap; }
.tags{ display:flex; gap:6px; flex-wrap:wrap; }
.pv-nav{ display:flex; gap:6px; margin-top:8px; }

.files{ display:grid; gap:12px; }
.files.grid{ grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.files.list{ grid-template-columns: 1fr; }
.file{
  display:grid; grid-template-columns: 48px 1fr auto; gap:10px; align-items:center;
  padding:12px; background: var(--card); border:1px solid var(--line); border-radius: var(--radius);
  transition: transform .15s ease, box-shadow .15s ease;
}
.file:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.15); }
.icon{ width:44px; height:44px; display:grid; place-items:center; border-radius:10px; background: color-mix(in oklab, var(--brand) 18%, var(--card)); color:#fff; font-weight:800; }
.name{ font-weight:800; }
.meta-row{ font-size:13px; color: var(--muted); }
.star{ border:1px solid var(--line); background:transparent; color:var(--fg); padding:6px 8px; border-radius:8px; cursor:pointer; }
.star[aria-pressed="true"]{ background: color-mix(in oklab, var(--brand) 18%, var(--panel)); }

kbd{border:1px solid var(--line); background:var(--card); border-radius:6px; padding:2px 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px;}

.footer{ padding: var(--pad); border-top:1px solid var(--line); color: var(--muted); }

.project{ padding: clamp(16px, 3vw, 36px); }
.doc{ max-width: 1000px; margin: 0 auto; background: var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.doc-header{ padding:20px; border-bottom:1px solid var(--line); }
.gallery{ padding:18px; display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap:12px; }
.slide{ background: var(--panel); border:1px dashed var(--line); border-radius:12px; padding:12px; }
.slide .thumb{ aspect-ratio:16/10; background: color-mix(in oklab, var(--accent) 30%, var(--panel)); border-radius:8px; display:grid; place-items:center; font-weight:800; color:#000; }
.doc-body{ padding:20px; }
.bullets{ padding-left: 1.1rem; display:grid; gap:8px; }

@media (max-width: 980px){
  .layout{ grid-template-columns: 1fr; }
  .pane{ grid-template-columns: 1fr; }
}