@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');
:root { --ink:#172522; --muted:#71807b; --cream:#f8f7f2; --paper:#fffefa; --line:#e5e8df; --sage:#dfe9df; --green:#315b4e; --coral:#d86f60; --shadow:0 14px 40px rgba(37,55,47,.08); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:'DM Sans',system-ui,sans-serif; }
button,input,select,textarea { font:inherit; } button { cursor:pointer; }
.app-banner { height:78px; display:flex; align-items:center; gap:16px; padding:0 28px; color:#f7fbf5; background:var(--ink); position:sticky; top:0; z-index:20; box-shadow:0 5px 24px rgba(23,37,34,.14); }
.brand-lockup { display:flex; align-items:center; gap:11px; }.brand-mark { width:35px; height:35px; display:grid; place-items:center; color:#d7e7c9; border:1px solid rgba(215,231,201,.35); border-radius:50%; font-size:18px; }.brand-lockup h1 { margin:0; font:700 20px 'Playfair Display',serif; letter-spacing:.01em; }
.eyebrow { margin:0; color:#8b9b94; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }.app-banner .eyebrow { color:#9fb0a7; } #connection-status { margin-left:auto; color:#aebdb5; font-size:11px; }
.menu-toggle { width:40px; height:40px; display:flex; flex-direction:column; justify-content:center; gap:5px; padding:9px; border:1px solid rgba(255,255,255,.18); border-radius:9px; background:transparent; }.menu-toggle span { display:block; height:2px; width:20px; background:#f7fbf5; border-radius:2px; }
.side-menu { position:fixed; inset:0 auto 0 0; width:300px; padding:28px 20px; background:var(--paper); transform:translateX(-105%); transition:transform .22s ease; z-index:30; box-shadow:15px 0 40px rgba(23,37,34,.12); }.side-menu.open { transform:translateX(0); }.side-menu-header { display:flex; align-items:center; justify-content:space-between; padding:0 10px 28px; }.icon-button { border:0; background:transparent; color:var(--ink); font-size:29px; line-height:1; }.menu-backdrop { position:fixed; inset:0; z-index:25; background:rgba(23,37,34,.38); }
.main-nav { display:grid; gap:5px; }.nav-link { width:100%; display:flex; align-items:center; gap:12px; padding:13px 12px; color:var(--ink); border:0; border-radius:10px; background:transparent; text-align:left; }.nav-link:hover,.nav-link.active { background:var(--sage); }.nav-icon { width:23px; color:var(--green); font-size:20px; text-align:center; }.nav-chevron { margin-left:auto; color:var(--muted); font-size:18px; transition:transform .2s; }.nav-parent[aria-expanded=true] .nav-chevron { transform:rotate(180deg); }.category-nav { display:grid; gap:3px; margin:-2px 0 7px 47px; padding-left:13px; border-left:1px solid var(--line); }.category-nav button { padding:9px 10px; color:var(--muted); border:0; background:transparent; border-radius:8px; text-align:left; }.category-nav button:hover { color:var(--green); background:#f1f5ef; }
.app-shell { width:min(100% - 40px, 980px); margin:0 auto; padding:50px 0 70px; }.view { animation:rise .25s ease; } @keyframes rise { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }.page-heading { margin-bottom:28px; }.page-heading h2 { margin:7px 0 6px; color:var(--ink); font:700 clamp(30px,5vw,46px)/1.08 'Playfair Display',serif; }.page-heading p:not(.eyebrow) { margin:0; color:var(--muted); }.card { background:var(--paper); border:1px solid rgba(229,232,223,.8); border-radius:18px; box-shadow:var(--shadow); }
.form-card { max-width:720px; padding:30px; }.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }.field { display:grid; gap:7px; color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.03em; }.field-wide { grid-column:1/-1; } input,select,textarea { width:100%; padding:12px 13px; color:var(--ink); background:#fbfcf8; border:1px solid var(--line); border-radius:9px; outline:0; } input:focus,select:focus,textarea:focus { border-color:#90a99b; box-shadow:0 0 0 3px rgba(144,169,155,.17); } textarea { min-height:100px; resize:vertical; }
.image-upload { min-height:86px; display:flex; align-items:center; gap:15px; margin:25px 0; padding:13px; color:var(--muted); border:1px dashed #adc0b2; border-radius:12px; background:#f7faf5; cursor:pointer; }.image-upload > span:last-of-type { display:grid; gap:3px; }.image-upload strong { color:var(--ink); font-size:13px; }.image-upload small { font-size:11px; }.image-upload input { display:none; }.image-placeholder { width:59px; height:59px; flex:0 0 59px; display:grid; place-items:center; color:var(--green); background:#e1ede0; border-radius:10px; font-size:30px; font-weight:400; }.image-upload img { display:none; width:59px; height:59px; flex:0 0 59px; object-fit:cover; border-radius:10px; }.image-upload.has-image .image-placeholder { display:none; }.image-upload.has-image img { display:block; }
.primary-button,.secondary-button,.danger-button { border:0; border-radius:9px; font-weight:700; }.primary-button { display:flex; justify-content:space-between; align-items:center; width:100%; padding:14px 17px; color:#fff; background:var(--green); }.primary-button:hover { background:#24483d; }.secondary-button { padding:11px 14px; color:var(--green); background:var(--sage); white-space:nowrap; }.danger-button { padding:13px 16px; color:#bd4d44; background:#fff0ed; }.text-button { padding:5px 0; color:var(--green); border:0; background:transparent; font-weight:700; }
.list-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; }.filter-card { padding:22px; margin-bottom:29px; }.filter-heading { display:flex; justify-content:space-between; align-items:start; margin-bottom:18px; }.filter-heading h3,.results-heading h3 { margin:4px 0 0; font:700 21px 'Playfair Display',serif; }.filter-grid { display:grid; grid-template-columns:2fr repeat(3,1fr); gap:12px; }.search-wrap { position:relative; }.search-wrap > span { position:absolute; left:12px; top:10px; color:var(--muted); font-size:20px; line-height:1; }.search-wrap input { padding-left:36px; }.check-field { display:flex; align-items:center; gap:8px; margin-top:17px; color:var(--muted); font-size:12px; font-weight:700; }.check-field input { width:16px; height:16px; accent-color:var(--green); }.results-heading { display:flex; align-items:baseline; justify-content:space-between; padding:0 3px 10px; }.results-heading h3 { color:var(--ink); } #result-count { color:var(--muted); font-size:12px; }
.inventory-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding:0; margin:0; list-style:none; }.inventory-list li { position:relative; display:flex; align-items:center; gap:14px; min-height:112px; padding:14px; background:var(--paper); border:1px solid var(--line); border-radius:14px; box-shadow:0 5px 18px rgba(37,55,47,.04); }.inventory-list li.status-inUse { border-left:4px solid #77a86e; }.inventory-list li.status-storage { border-left:4px solid #ddb266; }.inventory-list li.status-expired { border-left:4px solid var(--coral); }.list-item { min-width:0; display:flex; align-items:center; gap:13px; flex:1; cursor:pointer; }.thumb { width:76px; height:76px; flex:0 0 76px; object-fit:cover; border-radius:11px; }.thumb.placeholder { display:grid; place-items:center; color:var(--green); background:#e6efe4; font-size:30px; }.item-info { min-width:0; display:grid; gap:5px; }.item-info strong { overflow:hidden; color:var(--ink); font-size:14px; text-overflow:ellipsis; white-space:nowrap; }.item-info span { color:var(--muted); font-size:11px; }.status-pill { width:max-content; padding:3px 7px; border-radius:99px; color:var(--green); background:var(--sage); font-size:10px; font-weight:700; }.status-pill.expired { color:#a64d43; background:#ffebe7; }.item-edit { padding:7px 9px; color:var(--green); border:1px solid var(--line); border-radius:7px; background:transparent; font-size:11px; font-weight:700; }.empty-state { padding:45px 20px; text-align:center; }.empty-state > span { color:#b7cfaf; font-size:25px; }.empty-state h3 { margin:8px 0 5px; font:700 22px 'Playfair Display',serif; }.empty-state p { margin:0; color:var(--muted); font-size:13px; }
.detail-card { max-width:680px; padding:28px; background:var(--paper); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); }.detail-card h2 { margin:0; font:700 34px 'Playfair Display',serif; }.detail-image { display:block; max-width:100%; max-height:360px; margin:10px auto 0; border-radius:13px; }.detail-section { display:grid; gap:6px; padding-top:17px; border-top:1px solid var(--line); }.detail-section p { margin:0; color:var(--muted); line-height:1.5; }.label { color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }.detail-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:17px 0; border-top:1px solid var(--line); }.detail-row > div { display:grid; gap:6px; }.linked-section { display:grid; gap:12px; padding:20px 0; }.linked-list { display:flex; flex-wrap:wrap; gap:10px; }.linked-item { position:relative; width:70px; display:grid; justify-items:center; gap:4px; color:var(--muted); font-size:10px; text-align:center; cursor:pointer; }.linked-item img,.linked-item .placeholder { width:58px; height:58px; object-fit:cover; border-radius:10px; background:#e6efe4; }.linked-item .placeholder { display:grid; place-items:center; color:var(--muted); font-size:0; }.linked-item .placeholder::before { content:'•'; font-size:16px; }.linked-item small { color:var(--muted); }.unlink-button { position:absolute; top:-6px; right:0; width:21px; height:21px; display:grid; place-items:center; color:#fff; border:2px solid var(--paper); border-radius:50%; background:#d64f49; font-size:14px; line-height:1; opacity:0; transition:opacity .15s; }.linked-item:hover .unlink-button,.linked-item:focus-within .unlink-button,.linked-item:active .unlink-button { opacity:1; }.link-controls select { max-width:240px; }
.edit-actions { display:flex; gap:10px; margin-top:22px; }.edit-actions .primary-button { flex:1; justify-content:center; }.edit-actions .danger-button { flex:0 0 auto; }.compact { margin-top:20px; margin-bottom:0; }.hidden { display:none !important; }
@media (hover:none) { .unlink-button { opacity:1; } }
@media (max-width:760px) { .app-banner { height:70px; padding:0 16px; }.brand-lockup h1 { font-size:17px; }.brand-mark { width:30px; height:30px; font-size:15px; } #connection-status { display:none; }.app-shell { width:min(100% - 28px,680px); padding-top:35px; }.form-card { padding:20px; }.filter-grid { grid-template-columns:1fr 1fr; }.search-field { grid-column:1/-1; }.inventory-list { grid-template-columns:1fr; }.list-heading { align-items:start; }.list-heading h2 { font-size:34px; }.detail-card { padding:20px; } }
@media (max-width:480px) { .form-grid,.filter-grid { grid-template-columns:1fr; }.field-wide,.search-field { grid-column:auto; }.list-heading { display:block; }.list-heading .secondary-button { margin-top:16px; }.edit-actions { display:grid; }.edit-actions .danger-button { width:100%; }.side-menu { width:calc(100% - 42px); } }
/* Preference controls */
.filter-grid { grid-template-columns:2fr repeat(4,1fr); }
.filter-checks { display:flex; flex-wrap:wrap; gap:20px; }
.check-field input:disabled { opacity:.65; }
.item-title-row { min-width:0; display:flex; align-items:center; gap:7px; }
.item-title-row strong { flex:1; }
.favourite-button { flex:0 0 auto; width:26px; height:26px; padding:0; color:var(--coral); border:0; background:transparent; font-size:21px; line-height:1; }
.favourite-button:hover { transform:scale(1.1); }
.rating-control { display:flex; align-items:center; gap:1px; width:max-content; }
.rating-button,.rating-clear { padding:0; color:#c9a34e; border:0; background:transparent; font-size:15px; line-height:1; }
.rating-button:hover,.rating-clear:hover { color:#a87922; }
.rating-clear { margin-left:4px; color:var(--muted); font-size:14px; }
.detail-header { display:grid; gap:7px; }
.detail-card { position:relative; }
.detail-header .detail-favourite { position:absolute; top:24px; right:28px; width:34px; height:34px; font-size:28px; }
.detail-header .detail-rating { margin-top:4px; }

@media (max-width:760px) {
  .filter-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:480px) {
  .filter-grid { grid-template-columns:1fr; }
}