:root{--vt-c-white:#fff;--vt-c-white-soft:#f8f8f8;--vt-c-white-mute:#f2f2f2;--vt-c-black:#181818;--vt-c-black-soft:#222;--vt-c-black-mute:#282828;--vt-c-indigo:#2c3e50;--vt-c-divider-light-1:#3c3c3c4a;--vt-c-divider-light-2:#3c3c3c1f;--vt-c-divider-dark-1:#545454a6;--vt-c-divider-dark-2:#5454547a;--vt-c-text-light-1:var(--vt-c-indigo);--vt-c-text-light-2:#3c3c3ca8;--vt-c-text-dark-1:var(--vt-c-white);--vt-c-text-dark-2:#ebebeba3;--color-background:var(--vt-c-white);--color-background-soft:var(--vt-c-white-soft);--color-background-mute:var(--vt-c-white-mute);--color-border:var(--vt-c-divider-light-2);--color-border-hover:var(--vt-c-divider-light-1);--color-heading:var(--vt-c-text-light-1);--color-text:var(--vt-c-text-light-1);--section-gap:160px}@media (prefers-color-scheme:dark){:root{--color-background:var(--vt-c-black);--color-background-soft:var(--vt-c-black-soft);--color-background-mute:var(--vt-c-black-mute);--color-border:var(--vt-c-divider-dark-2);--color-border-hover:var(--vt-c-divider-dark-1);--color-heading:var(--vt-c-text-dark-1);--color-text:var(--vt-c-text-dark-2)}}*,:before,:after{box-sizing:border-box;margin:0;font-weight:400}body{min-height:100vh;color:var(--color-text);background:var(--color-background);text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:15px;line-height:1.6;transition:color .5s,background-color .5s}:root,:root[data-theme=light]{--brand:#2f7a58;--brand-weak:#dceee4;--on-brand:#fff;--danger:#b43b3b;--surface:#f7faf8;--surface-muted:#edf2ef;--border:#cdd8d1;--text:#1f3028;--text-muted:#45594f;--shadow:0 8px 24px #1d262114}@media (prefers-color-scheme:dark){:root{--brand:#6ac99a;--brand-weak:#183226;--on-brand:#0f1d17;--danger:#ff8f8f;--surface:#15201b;--surface-muted:#0f1713;--border:#2b3a33;--text:#e7efe9;--text-muted:#b3c2ba;--shadow:none}}:root[data-theme=dark]{--brand:#6ac99a;--brand-weak:#183226;--on-brand:#0f1d17;--danger:#ff8f8f;--surface:#15201b;--surface-muted:#0f1713;--border:#2b3a33;--text:#e7efe9;--text-muted:#b3c2ba;--shadow:none}body{color:var(--text);background:var(--surface-muted)}#app{min-height:100vh}.app-shell{background:var(--surface-muted);min-height:100vh}.top-header{z-index:10;background:var(--surface);border-bottom:1px solid var(--border);padding:1rem;position:sticky;top:0}.top-header h1{font-size:1.125rem;font-weight:700}.logo-link{color:inherit;align-items:center;gap:.5rem;text-decoration:none;display:flex}.logo-icon{width:1.75rem;height:1.75rem;color:var(--brand);flex-shrink:0}.logo-wordmark{letter-spacing:-.02em;color:var(--brand);font-size:1.25rem;font-weight:800}.auth-logo{flex-direction:column;align-items:center;gap:.5rem;display:flex}.auth-logo-icon{width:3.5rem;height:3.5rem;color:var(--brand)}.auth-logo-name{letter-spacing:-.03em;color:var(--brand);margin:0;font-size:2rem;font-weight:800}.top-header-content{justify-content:space-between;align-items:center;gap:.75rem;display:flex}.theme-toggle{color:var(--text-muted);align-items:center;gap:.5rem;font-size:.875rem;display:flex}.theme-toggle select{width:auto;min-height:2rem;padding:.375rem .5rem}.content{max-width:960px;margin:0 auto;padding:1rem 1rem 6rem}.page{gap:1rem;display:grid}.card{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:.75rem;padding:1rem}.grid{gap:.75rem;display:grid}.two-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.stack{gap:.5rem;display:grid}.muted{color:var(--text-muted)}.stat-card h2{font-size:1.75rem;font-weight:700;line-height:1.2}.form{gap:.75rem;display:grid}.form label{gap:.25rem;font-size:.925rem;display:grid}.form.inline{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));align-items:end}input,select,textarea,button{border:1px solid var(--border);width:100%;min-height:2.625rem;font:inherit;color:inherit;background:var(--surface);border-radius:.625rem;padding:.625rem .75rem}input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);outline:none}textarea{min-height:unset;resize:none;field-sizing:content;line-height:1.6;overflow:hidden}.form.inline textarea{grid-column:1/-1}button,.button-link,.list-button{cursor:pointer}button,.button-link{border-color:var(--brand);background:var(--brand);color:var(--on-brand);text-align:center;text-decoration:none}.button-link{border-radius:.625rem;padding:.625rem .75rem;display:inline-block}.button-secondary{border-color:var(--border);background:var(--surface);color:var(--text)}.btn-edit,.btn-delete{width:auto;min-height:unset;padding:.25rem .625rem;font-size:.8rem}.btn-edit{border-color:var(--border);background:var(--surface);color:var(--text)}.btn-delete{border-color:var(--danger);background:var(--danger);color:#fff}.button-row{align-items:center;gap:.5rem;display:flex}button:disabled{opacity:.5;cursor:not-allowed}.danger{border-color:var(--danger);background:var(--danger)}.mode-toggle{grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:1rem;display:grid}.mode-toggle button{background:var(--surface);color:inherit;border-color:var(--border)}.mode-toggle button.active{background:var(--brand-weak);border-color:var(--brand);color:var(--text)}.list-button{text-align:left;background:var(--surface);color:inherit;border:1px solid var(--border);gap:.125rem;display:grid}.list-button.active{border-color:var(--brand);background:var(--brand-weak)}.plain-list,.check-list{gap:.5rem;margin-top:.75rem;list-style:none;display:grid}.plain-list li{border-bottom:1px solid var(--border);grid-template-columns:1fr auto auto auto;align-items:center;gap:.5rem;padding:.5rem 0;display:grid}.entity-list-item{grid-template-columns:1fr auto}.entity-list-item small{margin-top:.125rem;display:block}.warning-list li{padding:.25rem 0;display:block}.check-list label{align-items:center;gap:.5rem;display:flex}.check-list input{width:auto;min-height:auto}.bottom-nav{z-index:20;border-top:1px solid var(--border);background:var(--surface);grid-template-columns:repeat(6,minmax(0,1fr));gap:.25rem;padding:.5rem;display:grid;position:fixed;bottom:0;left:0;right:0}.nav-item{color:inherit;text-align:center;border-radius:.5rem;padding:.5rem .25rem;font-size:.85rem;text-decoration:none;display:block}.nav-item.router-link-active{background:var(--brand-weak);color:var(--text);font-weight:600}.auth-page{align-content:center;gap:.75rem;max-width:440px;min-height:100vh;margin:0 auto;padding:1rem;display:grid}.subtitle{color:var(--text-muted)}.error{color:var(--danger)}.success{color:var(--brand)}.dialog-backdrop{z-index:100;background:#00000073;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.dialog-panel{background:var(--surface);border:1px solid var(--border);border-radius:1rem;gap:.75rem;width:100%;max-width:400px;padding:1.5rem;display:grid;box-shadow:0 20px 60px #00000040}.dialog-title{margin:0;font-size:1.05rem;font-weight:700}.dialog-message{color:var(--text-muted);margin:0;font-size:.925rem}.dialog-actions{justify-content:flex-end;gap:.625rem;margin-top:.25rem;display:flex}.dialog-actions button{width:auto}.dialog-confirm-btn{min-width:5rem}.recipe-detail-header{justify-content:space-between;align-items:center;margin-bottom:.75rem;display:flex}.recipe-detail-header h3{margin:0}.recipe-description{white-space:pre-wrap;line-height:1.6}.recipe-edit-actions{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;display:grid}.recipe-edit-actions button{width:100%}@media (width<=640px){.recipe-edit-actions{grid-template-columns:1fr}}.dialog-fade-enter-active,.dialog-fade-leave-active{transition:opacity .15s}.dialog-fade-enter-from,.dialog-fade-leave-to{opacity:0}.dialog-fade-enter-active .dialog-panel,.dialog-fade-leave-active .dialog-panel{transition:transform .15s}.dialog-fade-enter-from .dialog-panel,.dialog-fade-leave-to .dialog-panel{transform:scale(.95)translateY(8px)}@media (width>=960px){.content{padding:1.25rem 1.25rem 1.5rem}.bottom-nav{border:1px solid var(--border);border-radius:.75rem;max-width:960px;margin:0 auto;position:sticky;top:0;bottom:auto}.two-cols{grid-template-columns:repeat(4,minmax(0,1fr))}}
