:root {
--fwr-green:      #1E5631;
--fwr-green-lt:   #f0f9f4;
--fwr-red:        #C0392B;
--fwr-gold:       #F39C12;
--fwr-text:       #1C1C1C;
--fwr-muted:      #6B7280;
--fwr-border:     #E5E7EB;
--fwr-bg:         #FFFFFF;
--fwr-radius:     12px;
--fwr-shadow:     0 2px 16px rgba(0,0,0,.08);
}
.fwr-card {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: var(--fwr-bg);
border: 1px solid var(--fwr-border);
border-radius: var(--fwr-radius);
box-shadow: var(--fwr-shadow);
overflow: hidden;
margin: 2rem 0;
max-width: 860px;
color: var(--fwr-text);
line-height: 1.6;
} .fwr-banner {
background: var(--fwr-green);
padding: 10px 20px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
}
.fwr-banner-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.fwr-tag {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: #fff;
background: rgba(255,255,255,.18);
padding: 3px 10px;
border-radius: 20px;
border: 1px solid rgba(255,255,255,.25);
}
.fwr-tag-course { background: rgba(243,156,18,.25); border-color: rgba(243,156,18,.5); }
.fwr-tag-diff   { background: rgba(192,57,43,.25);  border-color: rgba(192,57,43,.5); }
.fwr-header-rating {
display: flex;
align-items: center;
gap: 6px;
color: #fff;
font-size: 13px;
}
.fwr-stars-display { display: flex; gap: 2px; } .fwr-hero {
display: flex;
gap: 24px;
padding: 24px;
align-items: flex-start;
}
.fwr-hero-text { flex: 1; min-width: 0; }
.fwr-hero-img  { flex-shrink: 0; }
.fwr-hero-img img {
width: 200px;
height: 160px;
object-fit: cover;
border-radius: 8px;
display: block;
}
.fwr-title {
font-family: 'Playfair Display', Georgia, serif;
font-size: 26px;
font-weight: 700;
color: var(--fwr-text);
margin: 0 0 8px;
line-height: 1.3;
}
.fwr-summary {
font-size: 14px;
color: var(--fwr-muted);
margin: 0 0 16px;
line-height: 1.7;
}
.fwr-print-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.fwr-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 16px;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
border: none;
transition: all .18s;
}
.fwr-btn-pin   { background: var(--fwr-red); color: #fff; }
.fwr-btn-pin:hover { background: #a93226; }
.fwr-btn-print { background: var(--fwr-green-lt); color: var(--fwr-green); border: 1px solid rgba(30,86,49,.3); }
.fwr-btn-print:hover { background: rgba(30,86,49,.12); } .fwr-meta-strip {
display: flex;
flex-wrap: wrap;
border-top: 1px solid var(--fwr-border);
border-bottom: 1px solid var(--fwr-border);
background: var(--fwr-green-lt);
}
.fwr-meta-block {
flex: 1;
min-width: 100px;
display: flex;
flex-direction: column;
align-items: center;
padding: 12px 8px;
border-right: 1px solid var(--fwr-border);
text-align: center;
}
.fwr-meta-block:last-child { border-right: none; }
.fwr-meta-icon  { font-size: 16px; margin-bottom: 2px; }
.fwr-meta-label { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--fwr-muted); font-weight: 600; }
.fwr-meta-val   { font-size: 15px; font-weight: 700; color: var(--fwr-text); margin-top: 2px; } .fwr-servings-block .fwr-meta-val { display: flex; align-items: center; gap: 6px; }
.fwr-srv-btn {
width: 24px; height: 24px;
border-radius: 50%;
border: 1px solid var(--fwr-green);
background: var(--fwr-bg);
color: var(--fwr-green);
font-size: 16px;
font-weight: 700;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
line-height: 1;
transition: all .15s;
}
.fwr-srv-btn:hover { background: var(--fwr-green); color: #fff; }
.fwr-srv-count { font-size: 18px; font-weight: 800; min-width: 24px; text-align: center; }
.fwr-srv-unit  { font-size: 11px; color: var(--fwr-muted); } .fwr-section { padding: 24px; border-bottom: 1px solid var(--fwr-border); }
.fwr-section:last-child { border-bottom: none; }
.fwr-section-title {
font-family: 'Playfair Display', Georgia, serif;
font-size: 18px;
font-weight: 700;
color: var(--fwr-green);
margin: 0 0 16px;
padding-bottom: 8px;
border-bottom: 2px solid var(--fwr-green-lt);
display: flex;
align-items: baseline;
gap: 12px;
}
.fwr-group-label {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .5px;
color: var(--fwr-muted);
margin: 16px 0 8px;
}
.fwr-group-label:first-child { margin-top: 0; } .fwr-ing-list {
list-style: none;
margin: 0;
padding: 0;
}
.fwr-ing-item {
display: flex;
align-items: baseline;
gap: 4px;
padding: 7px 0;
border-bottom: 1px solid var(--fwr-border);
font-size: 15px;
flex-wrap: wrap;
}
.fwr-ing-item:last-child { border-bottom: none; }
.fwr-ing-item::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: var(--fwr-green);
flex-shrink: 0;
margin-right: 8px;
margin-top: 5px;
}
.fwr-ing-amount { font-weight: 700; color: var(--fwr-green); min-width: 28px; }
.fwr-ing-unit   { font-weight: 600; margin-right: 4px; }
.fwr-ing-name   { color: var(--fwr-text); }
.fwr-ing-name a { color: var(--fwr-red); text-decoration: none; border-bottom: 1px dotted; }
.fwr-ing-name a:hover { color: var(--fwr-green); }
.fwr-ing-notes  { font-size: 13px; color: var(--fwr-muted); } .fwr-step {
display: flex;
gap: 16px;
margin-bottom: 20px;
align-items: flex-start;
}
.fwr-step:last-child { margin-bottom: 0; }
.fwr-step-num {
flex-shrink: 0;
width: 32px; height: 32px;
border-radius: 50%;
background: var(--fwr-green);
color: #fff;
font-weight: 800;
font-size: 14px;
display: flex; align-items: center; justify-content: center;
}
.fwr-step-body { flex: 1; }
.fwr-step-text { margin: 4px 0 0; font-size: 15px; }
.fwr-step-img  { margin-top: 10px; }
.fwr-step-img img { max-width: 300px; border-radius: 6px; } .fwr-nutrition-note {
font-size: 12px;
color: var(--fwr-muted);
font-weight: 400;
margin-left: auto;
}
.fwr-nutrition-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
gap: 1px;
background: var(--fwr-border);
border: 1px solid var(--fwr-border);
border-radius: 8px;
overflow: hidden;
}
.fwr-n-cell {
background: var(--fwr-bg);
padding: 12px 10px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.fwr-n-val   { font-size: 18px; font-weight: 800; color: var(--fwr-text); line-height: 1; }
.fwr-n-unit  { font-size: 11px; font-weight: 400; color: var(--fwr-muted); }
.fwr-n-label { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--fwr-muted); } .fwr-notes-section { background: var(--fwr-green-lt); }
.fwr-notes-body { font-size: 14px; line-height: 1.8; color: var(--fwr-text); white-space: pre-line; } .fwr-video-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.fwr-video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 8px; } .fwr-rate-section { background: #FFFBF0; }
.fwr-rate-stars {
display: flex;
gap: 4px;
margin-bottom: 12px;
}
.fwr-star-btn {
background: none;
border: none;
padding: 2px;
cursor: pointer;
transition: transform .12s;
}
.fwr-star-btn:hover { transform: scale(1.2); }
.fwr-star-svg {
width: 32px; height: 32px;
fill: #D1D5DB;
stroke: #D1D5DB;
stroke-width: 1.5;
transition: fill .12s, stroke .12s;
}
.fwr-star-btn.active .fwr-star-svg,
.fwr-star-btn:hover .fwr-star-svg,
.fwr-star-btn.hover .fwr-star-svg {
fill: var(--fwr-gold);
stroke: var(--fwr-gold);
}
.fwr-rate-msg { font-size: 13px; color: var(--fwr-green); font-weight: 600; min-height: 20px; } .fwr-footer {
background: var(--fwr-green);
color: rgba(255,255,255,.75);
font-size: 11px;
padding: 8px 20px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
}
.fwr-footer-brand { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.9); font-weight: 600; }
.fwr-keywords { font-style: italic; } .fwr-jump-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--fwr-green);
color: #fff !important;
text-decoration: none !important;
padding: 10px 22px;
border-radius: 6px;
font-weight: 700;
font-size: 14px;
margin: 16px 0;
transition: background .18s;
}
.fwr-jump-btn:hover { background: #164524; } @media (max-width: 640px) {
.fwr-hero { flex-direction: column; }
.fwr-hero-img img { width: 100%; height: 200px; }
.fwr-meta-strip { overflow-x: auto; flex-wrap: nowrap; }
.fwr-meta-block { min-width: 80px; }
.fwr-title { font-size: 21px; }
.fwr-nutrition-grid { grid-template-columns: repeat(3, 1fr); }
} @media print {
.fwr-btn, .fwr-srv-btn, .fwr-rate-section, .fwr-footer { display: none !important; }
.fwr-card { box-shadow: none; border: 1px solid #ccc; }
.fwr-banner { background: #1E5631 !important; -webkit-print-color-adjust: exact; }
.fwr-step-num { background: #1E5631 !important; -webkit-print-color-adjust: exact; }
}