:root{--color-bg: #f5f5f8;--color-surface: #ffffff;--color-header: #111827;--color-primary: #2337ff;--color-accent: #22c55e;--color-danger: #ef4444;--color-text-main: #111827;--color-text-muted: #6b7280;--color-border-subtle: #e5e7eb;--font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--radius-md: 8px;--radius-lg: 12px;--shadow-soft: 0 4px 12px rgba(15, 23, 42, .08);--page-max-width: 960px;--page-padding-x: 1.5rem;--page-padding-y: 1.5rem}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text-main);line-height:1.5}a{color:inherit}.card{background-color:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);border:1px solid rgba(15,23,42,.04)}.page-section{margin-bottom:1.5rem}.page-title{font-size:1.5rem;font-weight:600;margin:0 0 .5rem}.page-subtitle{margin:0;font-size:.95rem;color:var(--color-text-muted)}.hero{background:linear-gradient(135deg,var(--color-primary),#4338ca);color:#f9fafb;border-radius:var(--radius-lg);padding:1.25rem 1.5rem;margin-bottom:1.75rem;box-shadow:var(--shadow-soft)}.hero-title{margin:0 0 .25rem;font-size:1.4rem;font-weight:600}.hero-subtitle{margin:0;font-size:.95rem;opacity:.9}.form-row{display:flex;gap:.75rem;align-items:center}@media (max-width: 640px){.form-row{flex-direction:column;align-items:stretch}}.input{border-radius:var(--radius-md);border:1px solid var(--color-border-subtle);padding:.5rem .75rem;font:inherit;width:100%}.input::placeholder{color:var(--color-text-muted)}.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-md);border:none;padding:.5rem 1rem;font:inherit;cursor:pointer;transition:background-color .15s ease,box-shadow .15s ease,transform .05s ease}.btn:disabled{opacity:.7;cursor:default}.btn-primary{background-color:var(--color-accent);color:#fff;box-shadow:0 2px 6px #16a34a59}.btn-primary:hover:not(:disabled){background-color:#16a34a;box-shadow:0 4px 10px #16a34a66;transform:translateY(-1px)}.card-body{padding:1rem 1.25rem 1.25rem}.card-header{padding:.75rem 1.25rem 0}.card-title{margin:0 0 .35rem;font-size:1rem;font-weight:600}.card-subtitle{margin:0 0 .75rem;font-size:.85rem;color:var(--color-text-muted)}.text-muted{color:var(--color-text-muted)}.list-card{composes:card;background-color:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);border:1px solid rgba(15,23,42,.04)}.list-card-header{padding:.75rem 1.25rem .25rem}.list-card-body{padding:.75rem 1.25rem 1rem}.list-items{list-style:none;padding:0;margin:0}.list-item{padding:.6rem 0;display:flex;align-items:center;justify-content:space-between;gap:.75rem;border-bottom:1px solid var(--color-border-subtle)}.list-item:last-child{border-bottom:none}.btn-icon{border:none;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:.25rem;border-radius:999px;transition:background-color .15s ease,transform .05s ease}.btn-icon:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.btn-icon-danger{color:var(--color-danger)}.btn-icon-danger:hover{background-color:#ef444414;transform:translateY(-1px)}.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.detail-card{background-color:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);border:1px solid rgba(15,23,42,.04);padding:1.25rem 1.5rem 1.5rem}.detail-header{margin-bottom:1rem}.detail-title{margin:0 0 .35rem;font-size:1.4rem;font-weight:600}.detail-meta{margin:0;font-size:.85rem;color:var(--color-text-muted)}.detail-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:1.5rem}@media (max-width: 768px){.detail-grid{grid-template-columns:minmax(0,1fr)}}.detail-section-title{margin:0 0 .5rem;font-size:.95rem;font-weight:600}.detail-ingredients{list-style:disc;padding-left:1.25rem;margin:0}.detail-procedure{margin:0;white-space:pre-line}.detail-video{margin-top:1.25rem;padding-top:.75rem;border-top:1px solid var(--color-border-subtle)}.detail-video a{color:var(--color-primary);text-decoration:none}.detail-video a:hover{text-decoration:underline}
