:root { --ink:#20211e; --muted:#73756d; --line:#dedfd8; --paper:#f8f8f4; --warm:#e8e4dc; --lime:#d9ee68; --coral:#f07f62; --blue:#b9d5e7; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; }
button,input,select { font:inherit; } button { cursor:pointer; }
.sidebar { position:fixed; z-index:5; inset:0 auto 0 0; width:248px; padding:30px 20px 22px; border-right:1px solid var(--line); background:#f1f1ec; display:flex; flex-direction:column; }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); font-family:"Playfair Display",serif; font-size:25px; font-weight:600; text-decoration:none; }
.brand-mark { width:31px; height:31px; display:grid; place-items:center; border:1.5px solid var(--ink); border-radius:50%; font-family:"DM Mono",monospace; font-size:13px; }
.main-nav { display:grid; gap:4px; }.nav-link { display:flex; align-items:center; gap:11px; padding:10px 11px; color:#65665f; border-radius:5px; font-size:14px; font-weight:500; text-decoration:none; }.nav-link svg { width:17px; }.nav-link span { margin-left:auto; color:#898b82; font:12px "DM Mono",monospace; }.nav-link.active { color:var(--ink); background:#dedfd8; }.nav-link.active span { color:var(--ink); }
.sidebar-footer { margin-top:auto; }.collection-summary { display:grid; gap:17px; padding:17px 11px; border-top:1px solid var(--line); }.collection-summary span { display:block; color:var(--muted); font-size:11px; }.collection-summary strong { display:block; margin-top:5px; font:600 20px "DM Mono",monospace; }
main { margin-left:248px; }.topbar { height:72px; padding:0 48px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }.breadcrumb { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; }.breadcrumb svg { width:14px; }.breadcrumb strong { color:var(--ink); }.top-actions { display:flex; align-items:center; gap:13px; }.icon-button { width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:4px; background:transparent; color:var(--ink); }.icon-button svg { width:18px; }.icon-button:hover,.icon-button.selected { background:#e5e5df; }.add-button,.submit-button { display:flex; align-items:center; gap:8px; padding:10px 15px; border:1px solid var(--ink); border-radius:4px; color:white; background:var(--ink); font-size:13px; font-weight:600; }.add-button svg,.submit-button svg { width:16px; }.mobile-menu { display:none; }
.content { max-width:1440px; padding:62px 48px 76px; margin:auto; }.eyebrow { margin:0 0 10px; color:#75766f; font:11px "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }
.collection-header { display:flex; justify-content:space-between; align-items:center; padding-bottom:18px; border-bottom:1px solid var(--ink); }.collection-header div:first-child { display:flex; align-items:baseline; gap:12px; }.collection-header h2 { margin:0; font:500 27px "Playfair Display",serif; }.collection-header span { color:var(--muted); font-size:12px; }.view-options { display:flex; gap:3px; }.view-options .icon-button { width:30px; height:30px; }.view-options svg { width:16px; }
.toolbar { display:flex; align-items:center; gap:14px; padding:21px 0 22px; }.search { width:245px; display:flex; align-items:center; gap:8px; padding:9px 10px; border:1px solid var(--line); border-radius:4px; background:white; }.search svg { width:16px; color:#777971; }.search input { width:100%; border:0; outline:0; color:var(--ink); font-size:12px; }.search input::placeholder { color:#989991; }.filters { display:flex; gap:5px; }.filter { padding:7px 10px; border:1px solid transparent; border-radius:3px; background:transparent; color:#666860; font-size:12px; }.filter:hover { border-color:var(--line); }.filter.active { border-color:var(--ink); color:var(--ink); background:#fff; }.sort-button { margin-left:auto; display:flex; align-items:center; gap:7px; padding:7px 0 7px 10px; border:0; background:transparent; color:#65665f; font-size:12px; }.sort-button svg { width:15px; }
.collection-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:28px 18px; }.item { min-width:0; animation:appear .4s ease both; }.cover { position:relative; aspect-ratio:1; overflow:hidden; background:var(--warm); }.cover img { width:100%; height:100%; object-fit:contain; display:block; transition:transform .35s ease; }.item:hover .cover img { transform:scale(1.035); }.type-tag { position:absolute; top:8px; left:8px; padding:4px 6px; background:#fbfbf8e6; color:#454740; font:9px "DM Mono",monospace; text-transform:uppercase; }.item-info { padding-top:10px; }.item-info h3 { margin:0 0 4px; overflow-wrap:anywhere; color:#292a26; font-size:13px; font-weight:600; line-height:1.35; }.item-info p { overflow:hidden; margin:0; color:var(--muted); font-size:11px; white-space:nowrap; text-overflow:ellipsis; }.contents { margin-top:8px; color:var(--muted); font-size:10px; }.contents > span { font:500 9px "DM Mono",monospace; text-transform:uppercase; }.contents ul { margin:4px 0 0; padding-left:14px; line-height:1.45; }.contents li { display:flex; justify-content:space-between; gap:8px; padding-left:1px; }.contents li span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.contents time { flex:0 0 auto; color:#888980; font:9px "DM Mono",monospace; }.item-info .meta { display:flex; justify-content:space-between; margin-top:9px; color:#888980; font:10px "DM Mono",monospace; }.delete-item { position:absolute; z-index:1; top:7px; right:7px; width:29px; height:29px; display:grid; place-items:center; border:0; border-radius:3px; color:#a53c2d; background:#fbfbf8e8; opacity:0; transition:opacity .2s ease, background .2s ease; }.delete-item svg { width:15px; }.item:hover .delete-item,.delete-item:focus-visible { opacity:1; }.delete-item:hover { color:white; background:#c75442; }.empty { grid-column:1/-1; padding:65px 20px; border:1px dashed #bbbcb4; text-align:center; color:var(--muted); }.empty i { display:block; margin-bottom:12px; font:500 21px "Playfair Display",serif; color:var(--ink); }
.collection-grid.list-view { display:grid; grid-template-columns:1fr; gap:0; border-top:1px solid var(--line); }.list-view .item { display:grid; grid-template-columns:54px minmax(0,1fr) 88px; align-items:center; gap:16px; min-height:74px; padding:9px 42px 9px 0; border-bottom:1px solid var(--line); }.list-view .cover { width:54px; aspect-ratio:1; }.list-view .type-tag { top:auto; bottom:3px; left:3px; padding:2px 3px; font-size:7px; }.list-view .item-info { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:12px; padding:0; }.list-view .item-info h3 { margin:0; }.list-view .item-info .meta { margin:0; }.list-view .item-info:has(.contents) { display:block; }.list-view .delete-item { top:23px; right:4px; }
dialog { width:min(500px,calc(100% - 28px)); padding:0; border:0; background:#f9f9f5; box-shadow:0 18px 60px #191a172b; }dialog::backdrop { background:#20211e66; backdrop-filter:blur(2px); }#itemForm { padding:27px; }.modal-title { display:flex; justify-content:space-between; align-items:start; margin-bottom:24px; }.modal-title h2 { margin:0; font:500 26px "Playfair Display",serif; }.modal-title .icon-button { margin-top:-5px; }#itemForm label { display:grid; gap:7px; margin-top:15px; color:#55564f; font-size:12px; font-weight:500; }#itemForm input,#itemForm select,#itemForm textarea { width:100%; padding:10px; border:1px solid var(--line); border-radius:3px; outline-color:#93a943; background:white; color:var(--ink); font-size:13px; }.box-set-field { display:none !important; }.box-set-field.visible { display:grid !important; }.two-columns { display:grid; grid-template-columns:1fr 1fr; gap:13px; }.submit-button { justify-content:center; width:100%; margin-top:25px; }
@keyframes appear { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:1050px) { .collection-grid { grid-template-columns:repeat(4,1fr); }.filters { overflow:auto; }.toolbar { flex-wrap:wrap; }.sort-button { margin-left:0; }.content { padding-inline:32px; }.topbar { padding-inline:32px; } }
@media (max-width:760px) { .sidebar { transform:translateX(-100%); transition:transform .25s ease; }.sidebar.open { transform:translateX(0); box-shadow:8px 0 30px #20211e26; }.mobile-menu { display:grid; } main { margin-left:0; }.topbar { height:62px; padding:0 16px; }.breadcrumb { display:none; }.top-actions { margin-left:auto; }.content { padding:38px 16px 50px; }.toolbar { gap:11px; }.search { width:100%; }.filters { width:100%; }.sort-button { display:none; }.collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:25px 12px; }.collection-grid.list-view { grid-template-columns:1fr; gap:0; }.list-view .item { grid-template-columns:48px minmax(0,1fr); gap:10px; padding-right:35px; }.list-view .cover { width:48px; }.list-view .item-info { display:block; }.list-view .item-info p { margin-top:3px; }.list-view .item-info .meta { margin-top:6px; }.list-view .delete-item { top:20px; } }

:root { --ink:#f1f1eb; --muted:#a5a69f; --line:#353630; --paper:#151613; --warm:#151613; --coral:#e98a70; }
body { background:var(--paper); }
.sidebar { background:#1c1d19; }.nav-link { color:#b6b7af; }.nav-link.active { color:var(--ink); background:#30312b; }.nav-link.active span { color:var(--ink); }.topbar { background:#191a17; }.icon-button { color:var(--ink); }.icon-button:hover,.icon-button.selected { background:#33342e; }.add-button,.submit-button { border-color:#050605; color:#f1f1eb; background:#050605; }.collection-header { border-color:#d8d9d0; }.search { border-color:#41423c; background:#20211d; }.search input { color:var(--ink); background:transparent; }.filter { color:#b4b5ae; }.filter.active { border-color:#dedfd7; color:var(--ink); background:#272823; }.cover { background:var(--paper); }.type-tag { background:#22231fd9; color:#dedfd7; }.item-info h3 { color:#eeeeea; }.delete-item { background:#252620e8; }.empty { border-color:#565750; }.collection-summary { border-color:#353630; }.page-hidden { display:none; }dialog { background:#1c1d19; color:var(--ink); box-shadow:0 18px 60px #00000080; }dialog::backdrop { background:#000000a6; }#itemForm label { color:#d3d4cc; }#itemForm input,#itemForm select,#itemForm textarea { color:#f4f4ee; background:#20211d; border-color:#74766d; }#itemForm input:focus,#itemForm select:focus,#itemForm textarea:focus { border-color:#d9ee68; }