:root{--primary-color: #233a1c;--primary-gradient: linear-gradient(135deg, #233a1c 0%, #4e7e31 100%);--secondary-color: #cd5e20;--secondary-color-light: #e28045;--secondary-gradient: linear-gradient(135deg, #cd5e20 0%, #e28045 100%);--accent-color: #4e7e31;--bg-color: #f7f9f6;--text-color: #1a2a16;--card-bg: #ffffff;--border-color: #e2ecd8}*,*:before,*:after{box-sizing:border-box}body,html{margin:0;padding:0;height:100%;overflow:hidden;background-color:var(--bg-color);background-image:url(/resources/images/background.png);background-repeat:repeat;background-position:center top;background-size:708px auto;font-family:Outfit,sans-serif;color:var(--text-color);-webkit-font-smoothing:antialiased}button,input,select,textarea{font-family:Outfit,sans-serif}app-root{display:flex;flex-direction:column;height:100vh;height:100dvh;width:100%;overflow:hidden}router-outlet{display:none}app-root>*:not(router-outlet){display:flex;flex-direction:column;height:100%;width:100%;min-height:0;overflow:hidden}.header{flex-shrink:0;width:100%}.main-content,.recipe-detail-container,.fridge-container,.profile-container,.admin-container,.admin-guide-container,.guides-main,.guide-form-container{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;width:100%;max-width:100%;margin:0;box-sizing:border-box}.main-content>*,.recipe-detail-container>*,.fridge-container>*,.profile-container>*,.admin-container>*,.admin-guide-container>*,.guides-main>*,.guide-form-container>*{max-width:1440px;margin-left:auto;margin-right:auto;box-sizing:border-box}h1,h2,h3,h4,.brand-font{font-family:Outfit,sans-serif;font-weight:800;color:var(--text-color);letter-spacing:-.02em}.btn-submit,.btn-cancel,.btn-action{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:Outfit,sans-serif;font-size:.95rem;font-weight:700;padding:12px 24px;border-radius:12px;border:none;cursor:pointer;transition:all .25s cubic-bezier(.16,1,.3,1);box-shadow:0 4px 10px #0000000d}.btn-submit{background-color:#f2f7ef;color:var(--accent-color);border:1px solid #d1e2c9}.btn-submit:hover:not(:disabled){background-color:#e5f0df;color:#355821;border-color:#bcd5b0;transform:translateY(-2px) scale(1.02);box-shadow:0 8px 24px #4e7e311f}.btn-submit:active:not(:disabled){transform:translateY(0) scale(1)}.btn-cancel{background-color:#fff;color:#64748b;border:1px solid #e2e8f0}.btn-cancel:hover:not(:disabled){background-color:#f1f5f9;color:#334155;transform:translateY(-2px);box-shadow:0 6px 15px #0000000d}.btn-cancel:active:not(:disabled){transform:translateY(0)}.btn-modify,.btn-edit{background-color:#f0f6ff;color:#3570b2;border:1px solid #cde0f7}.btn-modify:hover:not(:disabled),.btn-edit:hover:not(:disabled){background-color:#e2efff;color:#245691;border-color:#b3d4f8;transform:translateY(-2px) scale(1.02);box-shadow:0 8px 24px #3570b21f}.btn-modify:active:not(:disabled),.btn-edit:active:not(:disabled){transform:translateY(0) scale(1)}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 20px center;background-size:16px;padding-right:44px!important}.material-icons{font-size:20px;vertical-align:middle}.required-asterisk{color:#ef4444;margin-left:3px;font-weight:700}button:disabled,input:disabled,select:disabled,textarea:disabled{background:#e2e8f0!important;color:#94a3b8!important;border-color:#cbd5e1!important;cursor:not-allowed!important;transform:none!important;box-shadow:none!important}*{scrollbar-width:thin;scrollbar-color:rgba(78,126,49,.35) transparent}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-color:#4e7e3147;border-radius:9999px;border:2px solid transparent;background-clip:content-box;transition:background-color .2s ease}::-webkit-scrollbar-thumb:hover{background-color:#4e7e318c;border:1px solid transparent}@media(max-width:768px){input::placeholder,textarea::placeholder,select::placeholder,::placeholder{font-size:.85rem!important}}.guide-link{color:var(--secondary-color, #cd5e20);font-weight:600;text-decoration:underline;text-underline-offset:3px;transition:all .2s ease}.guide-link:hover{color:#a84713;text-decoration-thickness:2px}.guide-link.external-link:after{content:" \2197";font-size:.85em;font-weight:700;opacity:.75}.guide-image-figure{margin:28px 0;display:flex;flex-direction:column;align-items:center;justify-content:center}.guide-inline-image{max-width:100%;max-height:520px;object-fit:cover;border-radius:14px;box-shadow:0 4px 18px #00000014;border:1px solid #e2e8f0;transition:transform .25s ease}.guide-inline-image:hover{transform:scale(1.01)}.guide-image-caption{margin-top:10px;font-size:.88rem;font-weight:600;color:#64748b;font-style:italic;text-align:center}.guide-h1{font-size:1.85rem;font-weight:800;color:#0f172a;margin-top:36px;margin-bottom:18px;padding-bottom:10px;border-bottom:2px solid #f1f5f9;letter-spacing:-.02em}.guide-h2{font-size:1.45rem;font-weight:800;color:#0f172a;margin-top:32px;margin-bottom:14px;padding-left:12px;border-left:4px solid var(--secondary-color, #cd5e20);line-height:1.35}.guide-h3{font-size:1.25rem;font-weight:750;color:#1e293b;margin-top:24px;margin-bottom:10px}.guide-h4{font-size:1.15rem;font-weight:800;color:#0f172a;margin-top:24px;margin-bottom:10px;display:flex;align-items:center;gap:8px;letter-spacing:-.01em}.guide-h4:before{content:"";display:inline-block;width:6px;height:6px;background-color:var(--secondary-color, #ea580c);border-radius:50%;flex-shrink:0}.guide-h5{font-size:1.02rem;font-weight:700;color:#334155;margin-top:16px;margin-bottom:6px}.guide-h6{font-size:.92rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.5px;margin-top:14px;margin-bottom:6px}.guide-p{margin-bottom:18px;line-height:1.8}.guide-list{list-style:disc;padding-left:24px;margin-bottom:22px}.guide-list li{margin-bottom:10px;line-height:1.65}.guide-ordered-list{list-style:none;counter-reset:step-counter;padding-left:0;margin-bottom:24px}.guide-ordered-list li{counter-increment:step-counter;position:relative;padding-left:42px;margin-bottom:14px;line-height:1.65}.guide-ordered-list li:before{content:counter(step-counter);position:absolute;left:0;top:2px;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#fff7ed,#ffedd5);border:1.5px solid #fed7aa;color:var(--secondary-color, #cd5e20);font-size:.85rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 2px 4px #cd5e201a}.guide-callout{padding:16px 22px;border-radius:14px;margin:24px 0;border:1px solid #dbeafe;border-left:5px solid #3b82f6;background:linear-gradient(135deg,#eff6ff,#f8fafc);box-shadow:0 4px 12px #3b82f60d}.guide-callout.callout-tip{border-color:#d1e2c9;border-left-color:var(--accent-color, #4e7e31);background:linear-gradient(135deg,#f2f7ef,#f8fafc);box-shadow:0 4px 12px #4e7e3114}.guide-callout.callout-warning{border-color:#fde68a;border-left-color:#f59e0b;background:linear-gradient(135deg,#fffbeb,#f8fafc);box-shadow:0 4px 12px #f59e0b0d}.guide-callout.callout-important{border-color:#fed7aa;border-left-color:#ea580c;background:linear-gradient(135deg,#fff7ed,#f8fafc);box-shadow:0 4px 12px #ea580c0d}.guide-callout.callout-caution{border-color:#fecaca;border-left-color:#ef4444;background:linear-gradient(135deg,#fef2f2,#f8fafc);box-shadow:0 4px 12px #ef44440d}.guide-callout .callout-header{display:flex;align-items:center;gap:8px;font-size:1.05rem;font-weight:800;margin-bottom:8px}.guide-callout.callout-tip .callout-header{color:var(--accent-color, #4e7e31)}.guide-callout.callout-warning .callout-header{color:#b45309}.guide-callout.callout-important .callout-header{color:#c2410c}.guide-callout.callout-caution .callout-header{color:#b91c1c}.guide-callout .callout-body{font-size:.98rem;color:#334155;line-height:1.6}.guide-inline-code{background-color:#f1f5f9;border:1px solid #e2e8f0;padding:2px 7px;border-radius:6px;font-size:.9em;font-family:Fira Code,ui-monospace,monospace;color:#0f172a}.guide-formula-block{display:flex;align-items:center;justify-content:center;padding:18px 24px;margin:24px 0;background:linear-gradient(135deg,#f8fafc,#fff7ed);border:1.5px solid #fed7aa;border-left:5px solid var(--secondary-color, #cd5e20);border-radius:14px;box-shadow:0 4px 14px #cd5e200f;text-align:center}.guide-formula-content{font-family:Outfit,sans-serif;font-size:1.18rem;font-weight:750;color:#0f172a;letter-spacing:.02em}.guide-formula-inline{display:inline-block;padding:2px 9px;background-color:#fff7ed;border:1px solid #fed7aa;border-radius:6px;font-weight:750;color:var(--secondary-color, #cd5e20);font-size:.95em;margin:0 2px}.guide-hr{border:none;border-top:2px dashed #e2e8f0;margin:32px 0}.guide-table-container{width:100%;overflow-x:auto;margin:26px 0;border-radius:14px;border:1px solid #e2e8f0;box-shadow:0 4px 14px #0000000a;background-color:#fff;-webkit-overflow-scrolling:touch}.guide-table{width:100%;border-collapse:collapse;text-align:left;font-size:.96rem}.guide-table thead{background:linear-gradient(180deg,#f8fafc,#f1f5f9);border-bottom:2px solid #e2e8f0}.guide-table th{padding:14px 18px;font-weight:800;color:#0f172a;white-space:nowrap}.guide-table tbody tr{border-bottom:1px solid #f1f5f9;transition:background-color .15s ease}.guide-table tbody tr:nth-child(2n){background-color:#fafbfc}.guide-table tbody tr:last-child{border-bottom:none}.guide-table tbody tr:hover{background-color:#f1f5f9}.guide-table td{padding:13px 18px;color:#334155;line-height:1.55}.guide-timer-btn{display:inline-flex;align-items:center;gap:4px;background:#fff7ed;border:1px solid #fed7aa;color:var(--secondary-color, #cd5e20);font-weight:750;font-size:.88em;padding:2px 8px;border-radius:8px;cursor:pointer;box-shadow:0 1px 3px #cd5e201a;transition:all .2s ease;vertical-align:middle}.guide-timer-btn:hover{background:#ffedd5;border-color:#fb923c;transform:scale(1.04)}.guide-timer-btn .material-icons{font-size:16px}.guide-checklist{list-style:none;padding-left:0;margin:16px 0}.guide-task-item{padding:6px 0}.task-checkbox-label{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:1.05rem;color:#334155}.task-checkbox-label input[type=checkbox]{margin-top:5px;width:18px;height:18px;accent-color:var(--secondary-color, #cd5e20);cursor:pointer}.task-done{text-decoration:line-through;color:#94a3b8}.guide-glossary-term{position:relative;text-decoration:underline dotted 1.5px var(--secondary-color, #cd5e20);text-underline-offset:3px;cursor:help;font-weight:600;color:#1e293b}.guide-glossary-term:hover:after{content:attr(data-tooltip);position:absolute;bottom:125%;left:50%;transform:translate(-50%);background-color:#0f172a;color:#fff;padding:8px 12px;border-radius:8px;font-size:.82rem;font-weight:500;line-height:1.4;white-space:normal;width:max-content;max-width:260px;box-shadow:0 8px 20px #00000040;z-index:100;pointer-events:none}@media(max-width:768px){.guide-h1{font-size:1.35rem;margin-top:24px;margin-bottom:12px;overflow-wrap:break-word}.guide-h2{font-size:1.2rem;margin-top:20px;margin-bottom:10px;overflow-wrap:break-word}.guide-h3{font-size:1.05rem;margin-top:16px;margin-bottom:8px;overflow-wrap:break-word}.guide-callout{padding:12px 14px;margin:16px 0;border-radius:10px;box-sizing:border-box}.guide-callout .callout-header{font-size:.95rem}.guide-callout .callout-body{font-size:.9rem;overflow-wrap:break-word;word-break:break-word}.guide-table-container{margin:16px 0;border-radius:10px;width:100%;max-width:100%;box-sizing:border-box}.guide-table th,.guide-table td{padding:8px 10px;font-size:.85rem}}