:root { --bg:#ffffff; --fg:#0b0b0c; --muted:#6b7280; --card:#f6f7f8; --border:#e5e7eb; --accent:#111827; --ring: 0 0 0 2px rgba(0,0,0,0.08); }
:root.dark { --bg:#0b0b0c; --fg:#e5e7eb; --muted:#9ca3af; --card:#111214; --border:#1f2937; --accent:#e5e7eb; --ring: 0 0 0 2px rgba(255,255,255,0.08); }
* { box-sizing:border-box; }
html,body { height:100%; }
body { margin:0; font-family:"Noto Sans", system-ui, -apple-system, Segoe UI, Roboto; background:var(--bg); color:var(--fg); line-height:1.5; }

.site-header { display:flex; align-items:center; justify-content:space-between; padding:20px clamp(16px, 4vw, 48px); border-bottom:1px solid var(--border); position:sticky; top:0; backdrop-filter:saturate(1.2) blur(6px); background:color-mix(in oklab, var(--bg) 85%, transparent); z-index:10; }
.brand { display:flex; gap:14px; align-items:center; }
.logo { width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--border); border-radius:10px; background:var(--card); }
h1 { font-size:clamp(18px, 3vw, 24px); margin:0; letter-spacing:.2px; }
.subtitle { margin:2px 0 0; font-size:13px; color:var(--muted); }

.icon-btn { display:inline-grid; place-items:center; width:40px; height:40px; border:1px solid var(--border); background:var(--card); color:var(--fg); border-radius:10px; cursor:pointer; transition:transform .12s ease, background .2s; }
.icon-btn:hover { transform:translateY(-1px); }
.icon-btn:active { transform:translateY(0); box-shadow:var(--ring); }
.icon-moon { display:none; }
:root.dark .icon-sun { display:none; }
:root.dark .icon-moon { display:block; }

.container { max-width:1100px; margin:0 auto; padding:28px clamp(16px, 4vw, 48px); }
.controls { display:grid; gap:14px; }
.search { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border); background:var(--card); border-radius:12px; }
.search input { flex:1; border:none; outline:none; background:transparent; color:var(--fg); font-size:15px; }

.filters { display:flex; flex-wrap:wrap; gap:8px; }
.chip { appearance:none; border:1px solid var(--border); background:var(--card); color:var(--fg); padding:8px 12px; border-radius:999px; cursor:pointer; font-size:13px; transition:background .15s, transform .12s; }
.chip:hover { transform:translateY(-1px); }
.chip.is-active { border-color:var(--fg); }

.meta { display:flex; gap:12px; align-items:center; color:var(--muted); font-size:14px; flex-wrap:wrap; }
.text-btn { background:none; border:none; color:var(--fg); text-decoration:underline; cursor:pointer; padding:6px 8px; border-radius:8px; }
.text-btn.file { border:1px dashed var(--border); text-decoration:none; color:var(--muted); }
.text-btn:focus-visible { outline:none; box-shadow:var(--ring); }

.grid { margin-top:10px; display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:14px; }
.card { grid-column:span 12; border:1px solid var(--border); background:var(--card); border-radius:14px; padding:14px; display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:start; transition:transform .15s ease, box-shadow .15s ease; }
.card:hover { transform:translateY(-2px); box-shadow:0 10px 24px -18px rgba(0,0,0,.4); }
@media (min-width:560px){ .card{ grid-column:span 6; } }
@media (min-width:900px){ .card{ grid-column:span 4; } }

.badge { font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid var(--border); color:var(--muted); background:transparent; }
.file-ico { width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--border); border-radius:10px; background:var(--bg); }
.title { margin:0 0 6px; font-weight:700; font-size:16px; }
.desc { margin:0; color:var(--muted); font-size:13px; }
.meta-line { display:flex; gap:10px; align-items:center; color:var(--muted); font-size:12px; margin-top:8px; flex-wrap:wrap; }

.actions { display:flex; gap:8px; align-items:center; }
.btn { appearance:none; border:1px solid var(--border); background:var(--bg); color:var(--fg); padding:8px 10px; border-radius:10px; cursor:pointer; font-size:13px; display:inline-flex; align-items:center; gap:8px; transition:transform .12s, background .2s; }
.btn:hover { transform:translateY(-1px); }
.btn.primary { background:var(--fg); color:var(--bg); border-color:var(--fg); }
.btn svg { flex:0 0 auto; }

.site-footer { padding:28px clamp(16px,4vw,48px); border-top:1px solid var(--border); color:var(--muted); font-size:14px; text-align:center; }

.form { display:grid; gap:12px; background:var(--card); border:1px solid var(--border); padding:16px; border-radius:12px; }
.field { display:grid; gap:6px; }
.field label { font-size:13px; color:var(--muted); }
.field input, .field select, .field textarea { padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--bg); color:var(--fg); font-size:14px; outline:none; }
.field textarea { min-height:100px; resize:vertical; }
.toolbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.list { display:grid; gap:10px; margin-top:14px; }
.row { border:1px solid var(--border); border-radius:10px; padding:10px; display:grid; grid-template-columns:1fr auto; gap:10px; background:var(--card); }