@import url("https://fonts.googleapis.com/css2?family=Macondo&family=Inter:wght@400;600;700&display=swap");
:root { --green:#1f5b45; --bg:#f8faf8; --card:#fff; }
*{box-sizing:border-box;font-family:Inter,system-ui,sans-serif}
body{margin:0;background:var(--bg);color:#1d2b25}
header{display:flex;justify-content:space-between;align-items:center;padding:.7rem 1.2rem;background:white;border-bottom:1px solid #d8e2dd;position:sticky;top:0;z-index:9}
.logo{font-weight:700;color:var(--green);display:flex;align-items:center;gap:.5rem;text-decoration:none}.logo img{width:42px;height:42px}
nav{display:flex;align-items:center;gap:.2rem}nav a{margin:.3rem;color:var(--green);text-decoration:none;white-space:nowrap}
main{max-width:1100px;margin:auto;padding:1rem}
h1,h2,h3{font-family:Macondo,serif;color:var(--green)}
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:1rem;align-items:center}
.hero-visual{position:relative;background:#fff;border:1px solid #dce6e1;border-radius:16px;min-height:320px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-logo{width:min(90%,440px);opacity:.95}
.hero-title{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-size:3.1rem;filter:drop-shadow(0px 0px 2.5px white) drop-shadow(0px 0px 3px white);}
.card{background:var(--card);padding:1rem;border-radius:12px;margin-bottom:1rem;border:1px solid #dce6e1}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem;margin:1rem 0}.stats article{background:#fff;border:1px solid #dce6e1;border-radius:10px;padding:.8rem}
.stat-link,.stat-link:visited,.stat-link:hover,.stat-link:focus{display:block;color:inherit;text-decoration:none}
.stat-link h3,.stat-link p{margin:.2rem 0}
.stats article:has(.stat-link:hover){border-color:#9fb8ae;box-shadow:0 0 0 2px rgba(31,91,69,.08)}
input,select,button{padding:.6rem;border-radius:8px;border:1px solid #cad7d1}button{background:var(--green);color:#fff;border:none;cursor:pointer}
.grid2,.grid3{display:grid;grid-template-columns:1fr;gap:.5rem}
.list article{background:#fff;border:1px solid #dce6e1;border-radius:8px;padding:.7rem;margin-bottom:.5rem}.empty{font-family:Macondo,serif;font-size:2rem;color:var(--green);text-align:center;padding:2rem}
.empty-search-results{display:grid;gap:.6rem;justify-items:center}
.empty-search-image{width:min(140px,35vw);height:auto;display:block}
.yarn-item{display:flex;gap:.8rem;align-items:center}
.yarn-item-content{color:inherit;text-decoration:none;display:block;width:100%}
.thumb{width:64px;height:64px;border-radius:8px;object-fit:cover;border:1px solid #dce6e1;background:#eef4f1}
.thumb-placeholder{display:flex;align-items:center;justify-content:center;font-size:1.7rem;color:#6f857b}
.yarn-detail-head{display:flex;gap:1rem;align-items:center;justify-content:space-between}
.detail-thumb{width:110px;height:110px;border-radius:10px;object-fit:cover;border:1px solid #dce6e1;background:#eef4f1}
.detail-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1rem}
.inline{display:inline-flex;gap:.3rem;margin-left:1rem}
.form-grid{display:grid;grid-template-columns:1fr;gap:.5rem}
.form-grid textarea{grid-column:1/-1;min-height:90px;padding:.6rem;border-radius:8px;border:1px solid #cad7d1}
.form-grid button{grid-column:1/-1;width:100%}
.form-grid label{display:flex;align-items:center;gap:.4rem}
.form-group{border:1px solid #dce6e1;border-radius:10px;padding:.7rem;display:grid;gap:.5rem}
.form-group legend{padding:0 .3rem;color:var(--green);font-weight:700}
.required-field{border-color:#b02b2b;background:#f9ecec}
.required-field.has-value{border-color:var(--green);background:#fff}
.optional-field{border-color:#4a4a4a;background:#f2f2f2}
.optional-field.has-value{border-color:var(--green);background:#fff}
.star-rating{display:grid;gap:.3rem}
.stars{display:flex;gap:.05rem;justify-content:flex-start}
.star-btn{background:none;color:#8a8a8a;border:0;padding:.05rem .08rem;font-size:1.35rem;line-height:1}
.star-btn.active{color:#e2ac17}
.star-btn:focus-visible{outline:2px solid #2a7e60;outline-offset:1px}
.btn-link{display:inline-block;background:var(--green);color:#fff;padding:.6rem .9rem;border-radius:8px;text-decoration:none}
.auth-form{grid-template-columns:1fr}
.barcode-input-wrap{display:flex;gap:.4rem;align-items:center}
.barcode-input-wrap input{width:100%}
.scan-btn{white-space:nowrap}
hr{border:0;border-top:1px solid #e2ece7;margin:1rem 0}
.yarn-dialog{width:min(100%,980px);border:1px solid #dce6e1}
.yarn-search{display:grid;gap:.6rem;margin-bottom:.8rem}
.quick-filters{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap}
.pagination-row{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-top:.8rem}
.pagination-actions{display:flex;gap:.5rem}
.pagination-actions a{display:inline-block;padding:.45rem .7rem;background:var(--green);color:#fff;border-radius:8px;text-decoration:none}

.menu-toggle{display:none;align-items:center;justify-content:center;flex-direction:column;gap:4px;padding:.45rem;background:#fff;border:1px solid #cad7d1}
.menu-toggle span{display:block;width:18px;height:2px;background:var(--green);border-radius:1px}
header.menu-collapsed .menu-toggle{display:flex}
header.menu-collapsed nav{display:none;position:absolute;top:calc(100% + 1px);right:1rem;background:#fff;border:1px solid #d8e2dd;border-radius:10px;box-shadow:0 6px 18px rgba(20,40,32,.12);padding:.5rem;min-width:210px;flex-direction:column;align-items:stretch;z-index:10}
header.menu-collapsed nav a{display:block;padding:.45rem .55rem;margin:0;border-radius:7px}
header.menu-collapsed nav a:hover{background:#f1f6f3}
header.menu-collapsed nav.open{display:flex}
@media (max-width:760px){header{position:sticky}.hero{grid-template-columns:1fr}.grid2,.grid3,.auth-form{grid-template-columns:1fr}.form-grid,.detail-grid{grid-template-columns:1fr}.yarn-detail-head{flex-direction:column;align-items:flex-start}header .menu-toggle{display:flex}header nav{display:none;position:absolute;top:calc(100% + 1px);right:1rem;background:#fff;border:1px solid #d8e2dd;border-radius:10px;box-shadow:0 6px 18px rgba(20,40,32,.12);padding:.5rem;min-width:210px;flex-direction:column;align-items:stretch;z-index:10}header nav a{display:block;padding:.45rem .55rem;margin:0;border-radius:7px}header nav a:hover{background:#f1f6f3}header nav.open{display:flex}}

.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.7rem}
.photo-grid.compact{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));margin-top:.5rem}
.photo-card{display:flex;flex-direction:column;gap:.4rem}
.danger-btn{background:#a22828}
.stock-actions{display:flex;gap:.5rem;align-items:center;margin-top:.4rem}
.stock-actions form{margin:0}
.clickable-photo{cursor:zoom-in}
.lightbox-open{overflow:hidden}
.lightbox-overlay{position:fixed;inset:0;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}
.lightbox-image{max-width:min(96vw,1200px);max-height:92vh;border-radius:10px;object-fit:contain}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);border:1px solid #fff;background:rgba(0,0,0,.35);font-size:2.2rem;line-height:1;padding:.4rem .7rem}
.lightbox-prev{left:1rem}
.lightbox-next{right:1rem}

.scanner-dialog{width:min(100%,720px)}
.scanner-view{position:relative;border-radius:10px;overflow:hidden;background:#0c1713}
.scanner-view video{display:block;width:100%;max-height:70vh;object-fit:cover}
.scanner-controls{position:absolute;top:.6rem;left:.6rem;right:.6rem;display:flex;gap:.5rem;z-index:2}
.scanner-controls select{flex:1;background:rgba(255,255,255,.95)}
.scanner-controls button{background:rgba(162,40,40,.95)}

.api-error-hero{grid-template-columns:1fr}
.api-error-card{margin-top:1rem}
.api-error-hint{font-size:1.1rem;font-weight:600;color:var(--green);margin-top:0}
.api-error-meta{margin:.3rem 0 .5rem;color:#41524a}
.api-error-detail{margin:0;padding:.8rem;background:#f4f6f5;border:1px solid #dce6e1;border-radius:8px;white-space:pre-wrap;word-break:break-word}