/* UX P0 additive components — Orange Edition remains source of truth. */
.ux-recipe-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:20px 0 36px}
.ux-recipe-card{min-width:0;border:1px solid #754d3a;border-radius:23px;overflow:hidden;background:linear-gradient(145deg,#272226,#161719);box-shadow:0 14px 30px #0007;transition:transform .2s,border-color .2s}
.ux-recipe-card:hover{transform:translateY(-5px);border-color:#f78a48}.ux-recipe-card:focus-visible{outline:3px solid #ffad76;outline-offset:4px}
.ux-cover{position:relative;height:175px;border-bottom:1px solid #6d4638;background:radial-gradient(ellipse at 70% 30%,#ff8b3855,transparent 60%),linear-gradient(135deg,#36221f,#101820);overflow:hidden;display:flex;align-items:center;justify-content:center;gap:20px;padding:15px}
.ux-cover:after{content:'';position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(transparent,#0a0d12a6);pointer-events:none}.ux-cover img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}
.ux-demo-tag{position:absolute;top:12px;left:12px;background:#211b1acc;border:1px solid #ff9b5b88;border-radius:7px;padding:5px 9px;color:#ffc9a5;font-weight:750;font-size:10px;letter-spacing:.08em;z-index:2}
.ux-cover-glyph{font-size:65px;color:#ff9a51;text-shadow:0 0 26px #ff6b2899;filter:drop-shadow(0 12px 10px #0008)}.ux-cover-text{max-width:50%;font-weight:800;color:#fff7f1;font-size:20px}
.ux-recipe-body{padding:17px 18px 20px}.ux-recipe-body small{font-size:11px;color:#e3ae8f}.ux-recipe-body h3{font-size:20px;line-height:1.2;margin:10px 0}.ux-recipe-body p{font-size:13px;color:#baafa9;min-height:38px}.ux-recipe-body b{color:#ffae76;font-size:13px}
.ux-recipe-detail{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px}.ux-recipe-detail>.ux-cover{height:285px;border-radius:22px;border:1px solid #754d3a}.ux-recipe-detail .panel{padding:22px}.ux-recipe-detail ol li{margin-bottom:12px}.ux-recipe-detail .status-pill{margin-bottom:16px}
.ux-lesson-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:22px 0}.ux-lesson-card{min-height:270px!important}.ux-lesson-card h3{font-size:22px}.ux-lesson-card .meta{margin-top:auto}.ux-lesson-page ol li{padding:10px 0}.ux-lesson-actions{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}
.ux-lesson-actions>*{min-height:48px;display:inline-flex;align-items:center;justify-content:center;padding:12px 16px}.ux-lesson-page{max-width:900px}.ux-lesson-page h2{margin-top:30px}
#ux-note{width:100%;margin-top:10px;min-height:210px;resize:vertical}.ux-filter-tabs{margin:25px 0}.ux-recipe-detail .button{display:inline-flex;margin-top:9px;min-height:48px;align-items:center}
@media(max-width:1020px){.ux-recipe-grid,.ux-lesson-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.ux-recipe-grid,.ux-lesson-grid,.ux-recipe-detail{grid-template-columns:1fr}.ux-cover{height:180px}.ux-recipe-detail>.ux-cover{height:240px}.ux-recipe-body h3{font-size:19px}.ux-filter-tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:9px}.ux-filter-tabs button{white-space:nowrap}}
@media(prefers-reduced-motion:reduce){.ux-recipe-card{transition:none}.ux-recipe-card:hover{transform:none}}

.photo-compare:focus-within{outline:3px solid #ffb36a;outline-offset:4px}
.ux-next-step{margin:24px 0}