/* NOI Dark Luxury · 4.8.1 — capa visual; sin cambios en datos o lógica */
:root{
 color-scheme:dark;
 --bg:#0e1712;--brand:#142b20;--panel:#1b2b22;--panel2:#283d30;
 --line:#3e5344;--text:#f2ede3;--muted:#bdc9bd;
 --accent:#d5b985;--accent-text:#16231b;--cream:#f5eee0;
 --brass:#d5b985;--amber:#e7c68e;--red:#e4aeb8;--green:#b9dfc1;
 --good-bg:#254733;--bad-bg:#472731;--pending-bg:#443824;
 --pill-bg:#2a3d30;--focus:#e1bd80;--burgundy:#702d40;
 --surface-shadow:0 2px 8px #0002,0 14px 28px #0004;
}
html,body,main{background:var(--bg);color:var(--text)}
body{background-image:none}
a,a:hover,.text-link{color:#e4c996}
h1,h2,h3,.today-schedule h2,.menu-intro-head strong,.study-title h3,.access-content h1{
 font-family:'Cormorant Garamond',Georgia,serif;
 font-weight:500;letter-spacing:-.015em;color:var(--text)
}
h1{font-size:clamp(34px,4vw,46px)}
h2{font-size:clamp(25px,3vw,33px)}
h3{font-size:clamp(22px,2.7vw,28px)}
b,strong{font-weight:600}
small,.muted,.note,#subtitle,.eyebrow,.today-schedule-count,.today-schedule-foot,
.schedule-day-count,.schedule-free,.schedule-overline,.menu-intro-eyebrow,
.menu-intro-head small,.schedule-employee small,.study-kicker,.study-title p,
.study-instruction,.quiz-scope-note,.study-voice-status,.study-voice-header small,
.schedule-no-coverage,.schedule-empty p,footer,.activity-row p,
.menu-recipe-cards .tile small,.tile small,.service-shortcut small,.prep-recipe-empty,
.order-item small,.order-summary span,.noi-guide-status{color:var(--muted)}
.eyebrow,.today-schedule-kicker,.menu-intro-eyebrow,.schedule-overline,.study-kicker{
 color:#d5bb8b;font-weight:600
}
.build-stamp{background:#392a2a;color:#efcfbd;border:1px solid #795061}
.photo-banner{
 background:linear-gradient(90deg,#09160ed0,#101e1590 54%,#1b291c35),url('./assets/noi-barra.webp') center 50%/cover no-repeat;
 border:1px solid #6d76544f;border-radius:16px;
 box-shadow:0 9px 24px #0004
}
.top{background:transparent!important;color:var(--text)}
.top h1{color:var(--text)}
.sidebar{background:linear-gradient(170deg,#173526,#0e2118);border-right:1px solid #6d6a493d}
.sidebar .navbtn{color:#d4ded0}
.sidebar .navbtn.active{background:linear-gradient(130deg,#374c3a,#20382a);color:#f2dfb6;border:1px solid #887e53;box-shadow:inset 3px 0 #772f44,0 3px 9px #0003}
.sidebar .navbtn:not(.active):hover{background:#2a4634;color:#f4e7ce}
.sidebar .brand-caption small,.sidebar .sidefoot{color:#c5d0be}
.mobile-brand{background:#143222;color:#f0e8d8;border-bottom:1px solid #8d754b55}
.mobile-brand .brand-caption small{color:#d8d5c1}
.mobile{background:#111f17;border-top:1px solid #6e624766;box-shadow:0 -8px 30px #0008}
.mobile .navbtn{color:#b9c7b9}
.mobile .navbtn.active{background:#2b3c2c;color:#f1d6a7;border:1px solid #756145;box-shadow:inset 0 -3px #752e43,0 1px 8px #0004}
#syncbar{background:#17291e;border-bottom:1px solid #4a5d45;color:#d0d9cb}
.syncbtn{background:#263a2c;border:1px solid #53634b;color:#f2e7d5}
.syncbtn:hover{background:#334d38;color:#fff0d4}
.syncdot.online{background:#8ed0a0}
.stat,.panel,.tile,.readiness-list,.stock,.prep-shortcut,.prep-recipe-card,.quick-bottle-card,
.menu-intro,.today-schedule,.schedule-weekbar,.schedule-employee,.schedule-day,
.order-item,.order-summary>div,.study-panel{
 background:#1b2b22;color:var(--text);
 border:1px solid #415746;border-radius:13px;
 box-shadow:var(--surface-shadow);backdrop-filter:none;-webkit-backdrop-filter:none
}
.stat strong,.stat span,.readiness-row .name,.readiness-row strong,.stock .name,.stock .qty,
.prep-recipe-info strong,.prep-inline-table td:first-child,.prep-inline-section h4,
.container-stock,.order-summary strong,.order-item-main>strong,.today-person,.today-hours,
.schedule-weekbar strong,.schedule-employee>span,.schedule-employee strong,
.schedule-day-title,.schedule-staff-name,.schedule-staff-duration,.schedule-day-body h4,
.schedule-coverage-row span,.schedule-coverage-row strong,.order-heading,
.study-title h3,.study-row-number{color:var(--text)}
.stat strong,.stock .qty,.schedule-employee strong,.order-summary strong{color:#efddb9}
.section-heading h2,.section-heading h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:29px}
.readiness-row,.line,.activity-row,.schedule-staff-row,.prep-recipe-row{border-color:#405445}
.activity-icon{background:#2f4938;color:#e2c38f}
.pill{background:#2b4032;border:1px solid #506550;color:#e6dfd1}
.pill.good,.menu-recipe-cards .tile .pill.good{background:#244a33;color:#d0efce;border:1px solid #4e7955}
.pill.bad{background:#572f38;color:#ffd2da;border:1px solid #8c5360}
.pill.pending{background:#493c2a;color:#f0d5a0;border:1px solid #776142}
.empty,.schedule-empty{background:#17251c;border:1px dashed #56694f;color:#c3cdbf}
.field,.filters input,.filters select,.form input,.form textarea,.form select,
.noi-text-form input{
 background:#111f17;color:var(--text);border:1px solid #526450;
 border-radius:9px;box-shadow:inset 0 2px 5px #0003
}
.field::placeholder,.filters input::placeholder,.form input::placeholder{color:#b3c0b1;opacity:1}
.field:focus,.filters input:focus,.form textarea:focus{border-color:#d5b985}
select option{background:#1a2c21;color:#f3ede0}
input[type=checkbox],input[type=radio],input[type=range]{accent-color:#b89968}
.recipe-photo-wrap,.recipe-photo-placeholder{background:#2b3a2c;border-radius:10px}
.recipe-photo{background:#f5f2e9}
.recipe-image-label{background:#213426ed;color:#f2e9d9}
.stock-image-frame{background:radial-gradient(circle,#3a4c38,#19271e);border-color:#51664e}
.stock-image-frame .stock-photo-img{background:#f3f0e6}
.prep-shortcut strong,.service-shortcut strong,.tile h3{color:#f4ecdf}
.prep-shortcut small,.service-shortcut small,.tile small{color:#c1cebf}
.prep-shortcut-arrow,.prep-inline-section h4{color:#e5c68f}
.prep-inline-note,.study-hint,.study-solution,.study-voice,.scan-intro,.scan-message{
 background:#24372a;color:#d9e2d4;border-color:#53684e
}
.service-overview{background:linear-gradient(120deg,#1b3627,#14281e);border:1px solid #7d6f4f;
 box-shadow:0 12px 27px #0005;border-radius:17px}
.service-overline{color:#e3ca93}
.service-overview h2{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(32px,4vw,44px);color:#f3e9d6;font-weight:500}
.service-overview p{color:#d1dbc9}
.service-pulse-card{background:#13271dbb;border-color:#6872537d}
.service-pulse-card strong{color:#f3e2bd}
.service-pulse-card span{color:#cbdbc9}
.service-pulse-card.needs-attention strong{color:#f2b6bc}
.service-pulse-card.needs-count strong{color:#e8c487}
.service-pending{background:#3a3022;border:1px solid #8a6d42}
.service-pending strong{color:#f2d29c}
.service-pending span{color:#e1ceb0}
.service-pending>.btn{background:#293629}
.today-schedule{background:#1b2b22;color:#f3ebdd}
.today-schedule-kicker{color:#d9bc86}
.today-schedule h2{font-family:'Cormorant Garamond',Georgia,serif;font-size:31px;color:#f5ecdb}
.today-schedule-columns{background:#24392a;color:#d4c6a6}
.today-schedule-row{background:#1a2b21;border-color:#415443}
.today-schedule-table{border-color:#4d614a}
.today-shift,.schedule-shift{background:#2b4432;border:1px solid #566c4e;color:#e7eddb}
.today-off,.schedule-free{color:#b7c4b4}
.today-hours,.schedule-staff-duration{color:#e2c28e}
.today-schedule-missing{background:#18271e;border-color:#52694b}
.today-schedule-missing p,.today-schedule-foot{color:#bfcbbb}
.menu-intro{background:linear-gradient(150deg,#243b2b,#172a1e)}
.menu-intro-head strong{font-family:'Cormorant Garamond',Georgia,serif;font-size:32px;color:#f3e5cc;font-weight:500}
.menu-intro-head small{color:#bfccbc}
.menu-intro-head a{color:#e4c893}
.menu-filter-btn,.stock-switch-btn,.quiz-scope-btn,.cocktail-lab-choice{
 background:linear-gradient(160deg,#304536,#203327);
 border:1px solid #526750;border-bottom-color:#17251c;border-radius:9px;
 color:#e9e4d7;box-shadow:0 3px 0 #0a140e,0 7px 12px #0003,inset 0 1px #ffffff18
}
.menu-filter-btn.selected,.quiz-scope-btn.selected,.cocktail-lab-choice.selected{
 background:linear-gradient(165deg,#834255,#622c3a);
 border-color:#a36374;color:#f7ebe8;box-shadow:0 3px 0 #321923,0 8px 16px #0005,inset 0 1px #ffffff25
}
.quiz-scope-btn.selected span{background:#462630;color:#f7d7dd}
.stock-switch{background:#14251b;border:1px solid #486044}
.stock-switch-btn.selected{background:#334937;border:1px solid #b39a6d;color:#f5e9ce;box-shadow:inset 0 -2px #712f44}
.stock-switch-btn span{color:#e1d2b4;background:#374d36}
.schedule-weekbar strong{color:#f3e8d4}
.schedule-employee small{color:#d8b980}
.schedule-help{background:#263b2c;color:#d8e4d4;border-left-color:#c9ac7e}
.schedule-day[open]{border-color:#ba9b72}
.schedule-day-body{border-color:#465a48}
.schedule-chevron{color:#d5b985}
.schedule-staff-row{border-color:#3d5140}
.schedule-coverage-row{background:#273a2a;border:1px solid #4d5f4b}
.schedule-coverage-row.cover-0{background:#492a32}
.schedule-coverage-row.cover-1{border-left:3px solid #c39c67}
.schedule-coverage-row.cover-2{border-left:3px solid #95bb95}
.schedule-coverage-row.cover-3{border-left:3px solid #d5b985;background:#344735}
.schedule-coverage-row.cover-estimated{background:#463820;border-color:#9b7946}
.schedule-coverage-row.cover-estimated strong{color:#f1cb91}
.order-notice{background:#3b3023;border:1px solid #886942;border-left:4px solid #c9a16b;color:#f3dfc4}
.study-panel,.study-row,.quick-capture,.quick-bottle-card,.quick-progress,
.quick-photo-row,.quick-manual,.cocktail-lab-card,.noi-guide-dialog,.noi-assistant-results,
.noi-assistant-hit,.modal,#syncDialog{
 background:#192a20;color:var(--text);border:1px solid #49604a
}
.study-row{background:#24372a}
.study-feedback.ok{color:#b7e1bd}
.study-feedback.bad{color:#f0afba}
.study-result-ok{background:#243c2b;border-color:#4e7854}
.study-result-error{background:#492c35;border-color:#965d69}
.quick-capture-button{background:#2b533c;color:#f3eee1}
.quick-manual{border-color:#8ba98a}
.cocktail-lab-flair{color:#deb977}
.noi-guide-launch{background:linear-gradient(165deg,#814254,#5f2939);border:1px solid #b2757e;color:#fff1e8;box-shadow:0 4px 0 #371b25,0 10px 23px #0008,inset 0 1px #ffffff22}
.noi-assistant-hit small,.noi-guide-dialog .noi-guide-status{color:#bcc9bc}
.noi-assistant-hit:hover{background:#294030;border-color:#b69b6e}
.modal,#syncDialog,.noi-guide-dialog,.noi-assistant-results{box-shadow:0 25px 85px #000a}
.modal::backdrop,#syncDialog::backdrop{background:#020a06cc}
.modal .modalheader h3,.modal h3,#syncDialog h3{color:var(--text)}
.modal .close{background:#2b3c2f;border:1px solid #4e624f;color:#f1e7d2}
.access-gate{background:linear-gradient(130deg,#091811ce,#0b2116c5 58%,#0b1710db),url('./assets/noi-barra.webp') center/cover no-repeat,#0e1d14}
.access-card{background:#14271fe9;border:1px solid #877c614e;box-shadow:0 30px 100px #000b}
.access-content h1{color:#f4ead7;font-family:'Cormorant Garamond',Georgia,serif;font-size:42px;font-weight:500}
.access-content p{color:#d2ddcf}
.access-overline{color:#d6bd87}
.access-buttons .btn.primary{background:linear-gradient(170deg,#eddaa8,#c6a773);color:#172319;border-color:#e6d49c}
.access-buttons .btn.primary:hover,.access-buttons .btn.primary:focus-visible{background:#e6c88f;color:#16231b;border-color:#ecd49f}
footer{border-color:#3a4b3c;color:#b9c6b6}
footer span{font-family:'Cormorant Garamond',Georgia,serif;font-size:17px;color:#d9b980;font-style:italic}
/* Deep, minimal 3D: 3px travel, soft top light and anchored shadow */
.btn,.syncbtn,.close,.service-shortcut,.prep-shortcut,
button.tile,.menu-filter-btn,.stock-switch-btn,.quiz-scope-btn,.cocktail-lab-choice,
.quick-capture-button,.noi-assistant-hit{
 position:relative;isolation:isolate;transform:translateY(0);
 transition:transform .17s ease,box-shadow .17s ease,border-color .17s ease,background .17s ease,filter .17s ease;
 box-shadow:0 3px 0 #0a140d,0 9px 17px #0005,inset 0 1px 0 #ffffff22
}
.btn,.syncbtn,.close{
 background:linear-gradient(165deg,#364c3a 0%,#23382b 60%,#1b3024 100%);
 border:1px solid #60765b;border-bottom-color:#12281b;color:#f3eadb;border-radius:9px
}
.btn.primary{
 background:linear-gradient(170deg,#ead6a5 0%,#cfb17e 62%,#b3915f 100%);
 border:1px solid #f0d7a1;border-bottom-color:#8a6d41;color:#18241a;
 box-shadow:0 4px 0 #6f5633,0 10px 19px #0006,inset 0 1px #fff7d866
}
.btn.danger{background:linear-gradient(155deg,#693746,#472631);border-color:#a36571;color:#ffe1e6}
.service-shortcut,.prep-shortcut{
 background:linear-gradient(150deg,#304b37,#1c3426 67%,#172d20);
 border:1px solid #5a745a;color:#f2ecde
}
.service-shortcut-accent{border-color:#af916a;background:linear-gradient(155deg,#3f4b37,#253528)}
.service-shortcut>.ui-icon:first-child{color:#d9bb86}
.service-shortcut>.ui-icon:last-child{color:#b9c0a1}
.tile{background:linear-gradient(155deg,#263e2e,#1b2c23);border-color:#435946}
.tile h3{color:#f4eee4}
@media(hover:hover){
 .btn:not(:disabled):hover,.syncbtn:not(:disabled):hover,.close:hover,
 .service-shortcut:not(:disabled):hover,.prep-shortcut:not(:disabled):hover,
 button.tile:not(:disabled):hover,.menu-filter-btn:not(:disabled):hover,
 .stock-switch-btn:not(:disabled):hover,.quiz-scope-btn:not(:disabled):hover,
 .cocktail-lab-choice:not(:disabled):hover,.quick-capture-button:not(:disabled):hover,
 .noi-assistant-hit:not(:disabled):hover{
  transform:translateY(-2px);border-color:#c2ab7f;filter:brightness(1.07);
  box-shadow:0 5px 0 #0a140d,0 14px 22px #0007,inset 0 1px #ffffff2e
 }
 .btn.primary:not(:disabled):hover{background:linear-gradient(170deg,#f2dfb2,#d3b681);color:#16231b;border-color:#f0dbaa}
 .service-shortcut:not(:disabled):hover,.prep-shortcut:not(:disabled):hover{background:linear-gradient(155deg,#39533e,#233c2a)}
}
.btn:not(:disabled):active,.syncbtn:not(:disabled):active,.close:active,
.service-shortcut:not(:disabled):active,.prep-shortcut:not(:disabled):active,
button.tile:not(:disabled):active,.menu-filter-btn:not(:disabled):active,
.stock-switch-btn:not(:disabled):active,.quiz-scope-btn:not(:disabled):active,
.cocktail-lab-choice:not(:disabled):active,.quick-capture-button:not(:disabled):active,
.noi-assistant-hit:not(:disabled):active{
 transform:translateY(3px) scale(.992);filter:brightness(.96);
 box-shadow:0 1px 0 #0b150e,0 3px 7px #0006,inset 0 3px 7px #0006;
 transition-duration:.07s
}
.btn:disabled,button:disabled{opacity:.55;cursor:not-allowed}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{
 outline:2px solid #e2c58e;outline-offset:3px
}
@media(max-width:750px){
 .mobile-brand{background:#162d20;border-bottom:1px solid #635b4266}
 .mobile{background:#121e17;border-color:#58644b}
 .mobile .navbtn{color:#beccbb}
 .mobile .navbtn.active{background:#2b4030;color:#efcf97;border:1px solid #69583d;box-shadow:inset 0 -3px #792f45}
 .top{background:transparent!important}
 .photo-banner{height:112px}
 .service-overview{background:linear-gradient(155deg,#213d2c,#13281c)}
 .service-overview h2{font-size:35px}
 .today-schedule{background:#1b2b22}
 .service-shortcut{min-height:80px}
 .tile{background:linear-gradient(165deg,#253b2d,#192b21)}
 .noi-guide-launch{bottom:calc(86px + env(safe-area-inset-bottom))}
}
@media(max-width:390px){
 .service-overview h2{font-size:30px}
 .mobile .navbtn{font-size:9px}
 .today-schedule h2{font-size:27px}
}
@media(prefers-reduced-motion:reduce){
 .btn,.syncbtn,.close,.service-shortcut,.prep-shortcut,.tile,
 .menu-filter-btn,.stock-switch-btn,.quiz-scope-btn,.cocktail-lab-choice,
 .quick-capture-button,.noi-assistant-hit{transition:none!important;transform:none!important}
}

/* 4.8.1 · Reparación de contraste.
   Nunca poner letras crema sobre fondos blancos en hover/focus/touch.
   Los elementos dorados claros conservan texto oscuro. */
:root{
 --text-on-light:#17271e;
 --text-on-dark:#f2ede3;
}
.tile:hover,.tile:focus-within,button.tile:hover,
.service-shortcut:hover,.service-shortcut:focus-visible,
.prep-shortcut:hover,.prep-shortcut:focus-visible,
.noi-assistant-hit:hover,.noi-assistant-hit:focus-visible,
.menu-recipe-cards .tile:hover{
 background:linear-gradient(155deg,#344c3a 0%,#22382a 100%);
 border-color:#b59b6d;
 color:var(--text-on-dark);
}
.tile:hover h3,.tile:focus-within h3,
.service-shortcut:hover strong,.service-shortcut:focus-visible strong,
.prep-shortcut:hover strong,.prep-shortcut:focus-visible strong,
.menu-recipe-cards .tile:hover h3{color:var(--text-on-dark)}
.tile:hover small,.tile:focus-within small,
.service-shortcut:hover small,.service-shortcut:focus-visible small,
.prep-shortcut:hover small,.prep-shortcut:focus-visible small{
 color:#d3dfd0
}
.btn:hover,.btn:focus-visible,.syncbtn:hover,.syncbtn:focus-visible,
.close:hover,.close:focus-visible,.service-pending>.btn:hover,
.noi-guide-dialog .close:hover{
 background:linear-gradient(165deg,#39523d,#213728);
 color:var(--text-on-dark);
 border-color:#af986f
}
.btn.primary,.btn.primary:hover,.btn.primary:focus-visible,
.access-buttons .btn.primary,.access-buttons .btn.primary:hover,
.access-buttons .btn.primary:focus-visible{
 background:linear-gradient(170deg,#ead6a5,#c8a978);
 color:var(--text-on-light);
 border-color:#eddaa8;
}
.btn.primary:active,.access-buttons .btn.primary:active{
 background:#b89563;color:var(--text-on-light)
}
.btn.danger,.btn.danger:hover,.btn.danger:focus-visible{
 background:linear-gradient(155deg,#72394a,#4b2934);
 color:#ffe5e7;border-color:#ac6f7c
}
.menu-filter-btn:hover,.stock-switch-btn:hover,.quiz-scope-btn:hover,.cocktail-lab-choice:hover{
 background:linear-gradient(155deg,#38513d,#263c2d);
 color:#f2ecdd
}
.menu-filter-btn.selected,.menu-filter-btn.selected:hover,
.quiz-scope-btn.selected,.quiz-scope-btn.selected:hover,
.cocktail-lab-choice.selected,.cocktail-lab-choice.selected:hover{
 background:linear-gradient(165deg,#884757,#652c3c);
 color:#fff1ee;border-color:#b37a81
}
.stock-switch-btn.selected,.stock-switch-btn.selected:hover{
 background:#354b39;color:#f5e9d5;border-color:#bba174
}
/* Contraste también en estados táctiles que Safari puede mantener tras pulsar. */
@media(hover:none){
 .btn:hover,.syncbtn:hover,.close:hover{background:#2a4131;color:#f2ede3;border-color:#65785c}
 .btn.primary:hover,.access-buttons .btn.primary:hover{
  background:#d5b985;color:#17271e;border-color:#eddaa8
 }
 .btn.danger:hover{background:#653543;color:#ffe2e8}
 .tile:hover,.service-shortcut:hover,.prep-shortcut:hover,
 .noi-assistant-hit:hover{background:#2b4332;color:#f2ede3}
 .menu-filter-btn.selected:hover,.quiz-scope-btn.selected:hover,
 .cocktail-lab-choice.selected:hover{background:#743347;color:#fff1ee}
}
/* Únicos fondos intencionalmente claros: superficies de fotografía y CTA champagne. */
.recipe-image-label{background:#f6f0e5ee;color:#27362b}
.recipe-photo,.stock-photo-img{color:var(--text-on-light)}
button:disabled{filter:none}


/* 4.9.0 · Tres modos de aprendizaje en NOI */
.quiz-mode-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:13px 0 19px}
.quiz-mode-btn{min-height:52px;border:1px solid #60765d;border-radius:10px;padding:10px 9px;
 color:#f1e8d9;background:linear-gradient(155deg,#334d3a,#1e3125);
 box-shadow:0 3px 0 #0a150e,0 9px 17px #0005,inset 0 1px #ffffff24;
 transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.quiz-mode-btn.selected{border-color:#b78388;color:#fff1ea;background:linear-gradient(165deg,#854456,#632c3c);
 box-shadow:0 3px 0 #381c25,0 9px 17px #0006,inset 0 1px #ffffff32}
.quiz-mode-btn:not(:disabled):active{transform:translateY(3px);box-shadow:0 1px 0 #0a150e,0 3px 8px #0005}
.noi-challenge,.noi-flash{padding:clamp(17px,4vw,26px)}
.noi-challenge h3,.noi-flash h3{font-family:'Cormorant Garamond',Georgia,serif;
 font-size:clamp(29px,5vw,38px);font-weight:500;line-height:1.1;margin:12px 0}
.challenge-meta,.flash-top{display:flex;justify-content:space-between;gap:10px;color:#e0cdaa;font-size:12px;font-weight:600;margin:14px 0 8px}
.challenge-progress{width:100%;height:5px;border-radius:10px;background:#344c3a;overflow:hidden;margin-bottom:22px}
.challenge-progress>div{height:100%;background:linear-gradient(90deg,#a57682,#dec18f);border-radius:10px;transition:width .15s}
.challenge-lines{display:grid;gap:9px;margin:18px 0}
.challenge-line{display:grid;grid-template-columns:26px minmax(66px,auto) minmax(0,1fr);gap:11px;align-items:center;
 width:100%;text-align:left;padding:13px 12px;border-radius:10px;border:1px solid #52694e;
 background:linear-gradient(145deg,#2a4332,#1a2e22);color:#f1ecdf;
 box-shadow:0 3px 0 #0c190f,0 7px 13px #0004,inset 0 1px #ffffff16;
 transition:transform .15s,border-color .15s,background .15s;cursor:pointer}
.challenge-line:not(:disabled):active{transform:translateY(2px)}
.challenge-line:disabled{cursor:default;opacity:1}
.challenge-line.challenge-wrong{border-color:#c17a8b;background:linear-gradient(145deg,#673544,#442731)}
.challenge-line.challenge-picked:not(.challenge-wrong){border-color:#d3b680;background:#334334}
.challenge-number{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;
 border:1px solid #6e765c;color:#d8c394;font-size:12px}
.challenge-recipe-amount{color:#f3d39e;font-weight:700;white-space:nowrap;font-size:13px}
.challenge-ingredient{min-width:0;overflow-wrap:anywhere;font-size:13px}
.challenge-row-mark{grid-column:2 / -1;color:#f4c1cb;font-size:10px;letter-spacing:.06em}
.challenge-row-mark:empty{display:none}
.challenge-feedback{padding:13px 15px;border-radius:9px;line-height:1.65;font-size:13px;
 background:#2c3e30;border:1px solid #70855f;color:#f0ecdf}
.challenge-feedback-bad{background:#482d35;border-color:#99596b}
.challenge-feedback strong{color:#f1d7a4}
.noi-flash .flash-card{position:relative;display:flex;flex-direction:column;align-items:center;
 min-height:265px;border:1px solid #816b4a;border-radius:14px;
 background:radial-gradient(ellipse at 73% 18%,#7458432c,transparent 56%),linear-gradient(145deg,#294634,#162a1e);
 box-shadow:0 6px 0 #0a150e,0 17px 25px #0004,inset 0 1px #ffffff23;
 padding:27px clamp(16px,4vw,32px);text-align:center;overflow:hidden}
.flash-face{font-size:10px;letter-spacing:.17em;color:#d9bd8b;text-transform:uppercase}
.noi-flash .flash-card h3{font-size:clamp(35px,6vw,49px);color:#f6ead6;margin:23px 0 13px}
.flash-card p{color:#d0dbce;max-width:360px;font-size:13px;line-height:1.65}
.flash-emblem{font:400 43px/1 'Cormorant Garamond',Georgia,serif;
 color:#d7bc8459;letter-spacing:.18em;margin:18px 0 29px}
.flash-card>.btn{margin-top:auto;min-width:160px}
.flash-table{margin:14px auto 11px;max-width:440px;text-align:left;width:100%;color:#f0e9dc}
.flash-table td{border-color:#4f614d;padding:10px 8px}
.flash-table td:first-child{color:#edcb92;font-weight:600;white-space:nowrap;font-size:15px;width:95px}
.flash-card .flash-note{align-self:stretch;text-align:left;margin:5px 0;color:#d2dcca}
.flash-card .flash-note strong{color:#e9cc99}
.flash-rate-title{color:#e7d7bb;font-size:13px;font-weight:600;margin:20px 0 12px}
.flash-rate{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.flash-grade{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
 min-height:69px;padding:11px 6px;border-radius:10px;
 background:linear-gradient(155deg,#304b38,#1d3225);border:1px solid #708167;
 box-shadow:0 3px 0 #09150d,0 9px 15px #0005,inset 0 1px #ffffff22;
 color:#f5ecde;font-size:12px;font-weight:700;
 transition:transform .16s,box-shadow .16s}
.flash-grade small{font-size:10px;font-weight:500;color:#d2ddca}
.flash-grade-again{background:linear-gradient(160deg,#764052,#4e2734);border-color:#af7180}
.flash-grade-again small{color:#f3d9e0}
.flash-grade-good{border-color:#d4b77c}
.flash-grade:not(:disabled):active{transform:translateY(3px);box-shadow:0 1px 0 #09150d,0 3px 7px #0006}
.flash-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:20px 0}
.flash-results>div{background:#283e2e;border:1px solid #4b644b;border-radius:10px;padding:13px 6px;text-align:center}
.flash-results strong{display:block;color:#eed3a3;font-size:28px;font-weight:600}
.flash-results span{font-size:11px;color:#cfddcc}
@media(max-width:650px){
 .quiz-mode-choices{grid-template-columns:repeat(2,minmax(0,1fr))}
 .quiz-mode-btn:last-child{grid-column:1 / -1}
}
@media(max-width:390px){
 .quiz-mode-btn{font-size:12px;padding:10px 6px}
 .challenge-line{gap:7px;padding:11px 8px;grid-template-columns:23px minmax(59px,auto) minmax(0,1fr)}
 .challenge-recipe-amount,.challenge-ingredient{font-size:12px}
 .flash-grade{font-size:11px;padding:10px 4px}
 .flash-grade small{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
 .quiz-mode-btn,.challenge-line,.challenge-progress>div,.flash-grade{transition:none!important;transform:none!important}
}