@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@700;800&display=swap";#root{min-height:100vh}:root{--washi:#faf6f9;--washi-gelap:#f5edd8;--sumi:#100a09;--aka:#da251c;--enji:#911f27;--enji-gelap:#6f171d;--kin:#da7f1c;--garis:#da7f1c4d;--matcha:#4e6b38;--font-display:"Playfair Display", Georgia, serif;--font-body:"DM Sans", system-ui, sans-serif;--shadow-card:0 2px 12px #2c181014;--shadow-btn:0 8px 24px #c0392b40;color:var(--sumi);background:var(--washi);font:16px/1.6 var(--font-body);font-synthesis:none;-webkit-font-smoothing:antialiased}*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--washi);min-width:320px;margin:0;overflow-x:hidden}button,input,select,textarea{font:inherit}button,a,input,select,textarea{outline-color:var(--kin)}.site-header{z-index:20;color:var(--washi);background:var(--enji);padding:16px 32px;position:sticky;top:0;box-shadow:0 2px 12px #100a091f}.header-inner{justify-content:space-between;align-items:center;gap:16px;max-width:1120px;margin:auto;display:flex}.brand{color:#f7ead4;font-family:var(--font-display);letter-spacing:.3px;align-items:center;gap:12px;font-size:clamp(20px,4vw,29px);font-weight:800;text-decoration:none;display:flex}.hanko{color:#fff;background:var(--aka);border-radius:8px;place-items:center;width:44px;height:44px;font-size:1.25rem;display:grid}nav{align-items:center;gap:20px;display:flex}nav a{color:#ffffffe6;text-transform:uppercase;letter-spacing:.5px;flex-direction:column;align-items:center;gap:0;padding:6px 8px;font-size:.82rem;font-weight:600;text-decoration:none;display:flex;position:relative}nav a span,nav a small{font-size:.76rem}nav a.active{color:#ffe400}nav a.active:after{content:"";background:var(--kin);border-radius:2px;width:36px;height:4px;position:absolute;bottom:-13px;left:50%;transform:translate(-50%)}.access-link{border:1px solid #ffffff8c;border-radius:25px;padding-inline:14px}.nav-toggle{cursor:pointer;background:#ffffff14;border:1px solid #ffffff4d;border-radius:12px;width:44px;height:44px;margin-left:auto;display:none}.nav-toggle span{background:#fff;border-radius:2px;width:18px;height:2px;margin:4px auto;display:block}main{max-width:1120px;min-height:calc(100vh - 76px);margin:auto;padding:40px 20px 70px;position:relative}main:before{content:"";z-index:-1;pointer-events:none;opacity:.14;background:radial-gradient(ellipse at 10% 12%, transparent 0 64px, var(--enji) 65px 70px, transparent 71px), radial-gradient(ellipse at 90% 30%, transparent 0 90px, var(--enji) 91px 97px, transparent 98px);position:fixed;inset:76px 0 0}h1,h2{font-family:var(--font-display);line-height:1.2}h1{color:var(--enji-gelap);margin:0;font-size:clamp(25px,4vw,34px)}h2{color:var(--enji-gelap);font-size:1.25rem}.page-title{border-bottom:0;justify-content:space-between;align-items:end;gap:16px;margin-bottom:24px;padding-bottom:14px;display:flex}.page-title>div:first-child{align-items:baseline;gap:10px;display:flex}.page-title:after{content:"";position:absolute}.kanji{color:var(--aka);font-size:1.4rem}.card{background:var(--washi);border:1px solid var(--garis);box-shadow:var(--shadow-card);border-radius:12px;padding:20px;transition:transform .2s,box-shadow .2s;overflow:hidden}.card:hover{transform:translateY(-2px);box-shadow:0 6px 20px #2c18101a}.two-col{grid-template-columns:minmax(250px,.75fr) 1.25fr;gap:20px;display:grid}.form-card{flex-direction:column;gap:13px;display:flex}.narrow{max-width:600px}label{flex-direction:column;gap:5px;font-weight:600;display:flex}label span,label small{font-weight:400}input,select,textarea{border:1px solid var(--garis);width:100%;color:var(--sumi);background:#fff;border-radius:8px;padding:11px 12px}input:focus,select:focus,textarea:focus,button:focus,a:focus{outline:3px solid var(--kin);outline-offset:2px}.form-grid{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.button{color:#fff;background:var(--aka);cursor:pointer;min-height:44px;box-shadow:var(--shadow-btn);border:0;border-radius:25px;padding:10px 20px;font-weight:700;transition:all .2s}.button:hover{background:var(--enji-gelap);transform:translateY(-2px)}.button.secondary{color:var(--enji);border:2px solid var(--enji);box-shadow:none;background:0 0}table{border-collapse:collapse;text-align:left;width:100%}th,td{border-bottom:1px solid var(--garis);vertical-align:top;padding:12px 9px}th{color:var(--enji-gelap);font-weight:700}.table-wrap{overflow-x:auto}.muted,small{color:#666;font-size:.82rem;display:block}.chip{border-radius:25px;padding:4px 10px;font-size:.8rem;display:inline-block}.chip.menipis{color:#fff;background:var(--aka)}.chip.aman{color:var(--matcha);border:1px solid var(--matcha)}.state{padding:24px 0}.error{color:var(--aka)}.action-status{margin:0;font-size:.9rem}.action-status.memuat{color:var(--enji)}.action-status.berhasil{color:var(--matcha)}.action-status.gagal{color:var(--aka)}.recipe{border-bottom:1px solid var(--garis);margin-bottom:20px;padding-bottom:20px}.recipe-row{grid-template-columns:1fr 120px 40px;gap:8px;margin-bottom:8px;display:grid}.icon-button{cursor:pointer;background:0 0;border:0;font-size:1.4rem}.sales-list,.opname-list{gap:12px;display:grid}.sales-list label{grid-template-columns:1fr 140px;display:grid}.sales-list .muted{grid-column:1}.sales-list input{grid-area:1/2/span 2}.opname-list>label{border-bottom:1px solid var(--garis);grid-template-columns:1fr 160px;gap:8px;padding:10px;display:grid}.opname-list label small{display:block}.opname-list .is-low{background:#fff0ed;border-radius:8px}.opname-list em{color:var(--aka);grid-column:1/-1;font-size:.85rem}.toolbar{gap:8px;display:flex}.shopping-list{margin:15px 0 0;padding:0;list-style:none}.shopping-list li{border-bottom:1px solid var(--garis);padding:12px 0}.shopping-list label{flex-direction:row;align-items:flex-start;gap:10px}.shopping-list input{width:auto;margin-top:4px}.shopping-list small{margin-top:3px}.shopping-list .bought strong,.shopping-list .bought small{opacity:.6;text-decoration:line-through}.filters{grid-template-columns:2fr 1fr 1fr;gap:12px;margin-bottom:18px;display:grid}@media (width<=768px){.site-header{padding:12px 16px}.header-inner{flex-wrap:wrap}.brand{gap:10px}.hanko{width:40px;height:40px}.nav-toggle{display:block}.header-inner nav{background:#6f171dfa;border:1px solid #ffffff1f;border-radius:16px;flex-direction:column;align-items:stretch;gap:8px;width:100%;margin-top:4px;padding:12px;display:none;box-shadow:0 20px 40px #100a093d}.header-inner nav.open{display:flex}.header-inner nav a{border-radius:12px;align-items:flex-start;width:100%;padding:12px 14px}.header-inner nav a.active:after{display:none}.access-link{margin:0}main{padding:28px 16px 70px}.two-col,.form-grid,.filters{grid-template-columns:1fr}.page-title{flex-direction:column;align-items:start}.toolbar{width:100%}.toolbar .button{flex:1}.recipe-row{grid-template-columns:1fr 90px 30px}}@media print{.site-header,.no-print,.page-title .toolbar,.action-status{display:none!important}body,main,.card{color:#000;box-shadow:none;background:#fff;border-color:#000}main{padding:0}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}.logo{object-fit:cover;border-radius:8px;width:40px;height:40px}