:root{--sarab-primary:#e8281a;--sarab-secondary:#f6a623;--sarab-dark:#1a1a1a;--sarab-green:#2d6a4f;--sarab-cream:#fff8f0;--sarab-cream2:#fef0dc;--sarab-light:#f9f5f0;--sarab-shadow:0 8px 40px rgba(0,0,0,.10)}
body{font-family:"Poppins",Arial,sans-serif;background:var(--sarab-light);color:var(--sarab-dark)}
body.dark{--sarab-light:#161514;--sarab-cream:#211f1d;--sarab-cream2:#2b2722;--sarab-dark:#f6efe9}
.sarab-topbar{background:#fff;box-shadow:0 2px 16px rgba(0,0,0,.06);padding:14px clamp(18px,4vw,56px);position:sticky;top:0;z-index:100;display:flex;justify-content:space-between;align-items:center;color:#1a1a1a}
.sarab-brand{display:flex;align-items:center;gap:12px}.sarab-logo{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--sarab-primary);color:white;font-size:24px;box-shadow:0 8px 22px rgba(232,40,26,.25)}
.sarab-name{font-family:"Playfair Display",serif;font-size:1.45rem;font-weight:800;line-height:1}.sarab-name span{color:var(--sarab-primary)}.sarab-sub{font-size:.75rem;color:#777;margin-top:4px}
.ghost-btn,.icon-btn{background:#fff;color:#333;border:1px solid #ece4dd}.ghost-btn:hover,.icon-btn:hover{background:var(--sarab-cream2);color:var(--sarab-primary)}
.sarab-hero{max-width:1240px;margin:26px auto 18px;min-height:330px;border-radius:28px;overflow:hidden;background:linear-gradient(135deg,#251a14 0%,#40291c 100%);display:grid;grid-template-columns:1.15fr .85fr;align-items:center;box-shadow:var(--sarab-shadow)}
.hero-copy{padding:48px;color:white}.eyebrow,.section-kicker{font-weight:700;letter-spacing:.15em;font-size:.74rem;color:var(--sarab-secondary)}
.hero-copy h1{font-family:"Playfair Display",serif;font-size:clamp(2.3rem,5vw,4.5rem);line-height:.98;margin:13px 0 18px}.hero-copy h1 span{color:var(--sarab-secondary);font-style:italic}
.hero-copy p{font-size:1rem;opacity:.86;max-width:590px}.hero-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.hero-pills span{padding:8px 11px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(255,255,255,.08);font-size:.82rem}
.hero-image-wrap{height:100%;min-height:330px;position:relative}.hero-image-wrap img{width:100%;height:100%;object-fit:cover}.hero-image-wrap:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#251a14 0%,transparent 38%)}
.hero-badge{position:absolute;right:22px;bottom:20px;z-index:2;width:94px;height:94px;border-radius:50%;background:var(--sarab-primary);color:white;display:grid;place-content:center;text-align:center;transform:rotate(-7deg);box-shadow:0 10px 30px rgba(0,0,0,.25)}.hero-badge strong{font-family:"Playfair Display",serif;font-size:1.1rem}.hero-badge span{font-size:.72rem}
.sarab-nav{max-width:1240px;margin:0 auto 20px;background:#fff;border:1px solid #eee0d5;border-radius:18px;padding:8px;display:flex;gap:6px;box-shadow:0 6px 24px rgba(0,0,0,.05)}
.sarab-nav button{background:transparent;color:#4b4038;border-radius:12px;padding:12px 16px}.sarab-nav button.active{background:var(--sarab-primary);color:white;box-shadow:0 8px 22px rgba(232,40,26,.22)}
main{max-width:1240px}.section-heading{text-align:center;margin:28px auto 22px}.section-heading h2{font-family:"Playfair Display",serif;font-size:clamp(2rem,4vw,3rem);margin:6px 0}.section-heading h2 em{color:var(--sarab-primary);font-weight:700}.section-heading p{color:#7c7169}
.panel,.card,.shopping-column,.attendance-day,.summary{border-color:#eee0d5;background:#fff;box-shadow:0 7px 28px rgba(0,0,0,.055)}
.filters{padding:16px;border-radius:18px}.filters input,.filters select,.settings select,.extra input,.preferences input,.preferences textarea,#adminFamilyPanel input,#adminFamilyPanel select{border:1px solid #eadfd5;background:#fff}
button{background:var(--sarab-primary);transition:.18s ease}button:hover{transform:translateY(-1px)}.actions button.recipe-open{background:var(--sarab-dark);color:#fff}
.grid{grid-template-columns:repeat(auto-fill,minmax(275px,1fr));gap:20px}.recipe-card{padding:0;overflow:hidden;border-radius:20px}.recipe-image{height:188px;position:relative;overflow:hidden;background:#eee}.recipe-image img{width:100%;height:100%;object-fit:cover;transition:.35s}.recipe-card:hover .recipe-image img{transform:scale(1.04)}.price-chip{position:absolute;right:12px;top:12px;background:var(--sarab-secondary);color:#23180b;padding:7px 10px;border-radius:999px;font-weight:800;font-size:.8rem}.recipe-card-body{padding:17px}.recipe-topline{display:flex;gap:6px;color:var(--sarab-primary);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.recipe-card h3{font-family:"Playfair Display",serif;font-size:1.35rem;margin:7px 0 4px}.ingredient-preview{color:#756b64;font-size:.88rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tag{background:var(--sarab-cream2);color:#7a3c22}.fav{background:var(--sarab-secondary)!important;color:#2c210d!important}.stats{text-align:center;font-weight:600}
.day{border-color:#eee0d5;border-left:5px solid var(--sarab-secondary);box-shadow:0 5px 18px rgba(0,0,0,.04)}.day strong{font-family:"Playfair Display",serif}
.shopping-toolbar{background:linear-gradient(135deg,var(--sarab-cream2),#fff)}.shopping-column-head h2,.shopping-toolbar h2{font-family:"Playfair Display",serif}.shopping-info,.shopping-footer-info{background:#fff0dc;color:#73431f}.count-badge{background:var(--sarab-primary);color:#fff;border:0}
.shopping-group h3{font-family:"Playfair Display",serif;color:var(--sarab-green)}.aggregated-item{border-bottom:1px dashed #eee0d5}.aggregated-item:last-child{border-bottom:0}
.attendance-day{border-top:4px solid var(--sarab-secondary)}.attendance-day h3{font-family:"Playfair Display",serif;font-size:1.35rem}.attendance-actions button.selected{outline:3px solid var(--sarab-secondary);outline-offset:2px}
.auth-card,.modal-card{border:1px solid #eadfd5;box-shadow:0 24px 80px rgba(0,0,0,.28)}.auth-card h2,.recipe-head h2{font-family:"Playfair Display",serif}
@media(max-width:900px){.sarab-hero{grid-template-columns:1fr;margin:14px;border-radius:22px}.hero-image-wrap{min-height:210px}.hero-copy{padding:34px}.sarab-nav{margin:0 14px 18px;overflow:auto}.sarab-nav button{white-space:nowrap}.sarab-topbar{padding:11px 14px}.sarab-name{font-size:1.15rem}}
@media(max-width:560px){.sarab-hero{min-height:auto}.hero-copy h1{font-size:2.4rem}.hero-pills span:nth-child(3){display:none}.hero-image-wrap{min-height:180px}.hero-badge{width:74px;height:74px}.header-actions .ghost-btn{padding:8px 9px}.sarab-sub{max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}

.category-strip{display:flex;gap:8px;overflow:auto;padding:4px 0 14px;scrollbar-width:thin}
.category-strip span{white-space:nowrap;background:#fff;border:1px solid #eee0d5;border-radius:999px;padding:8px 11px;font-size:.82rem;font-weight:600;color:#5c4d43}
.recipe-image{background:linear-gradient(135deg,#f0e6de,#fff6ee)}
.recipe-image img{background:#eee}

/* Lucide menu icons */
.sarab-nav button{display:inline-flex;align-items:center;gap:8px}
.sarab-nav button svg{width:20px;height:20px;stroke-width:2;stroke:var(--sarab-primary);transition:.18s ease}
.sarab-nav button:hover svg{stroke:var(--sarab-secondary)}
.sarab-nav button.active svg{stroke:#fff}
.sarab-nav button.active:hover svg{stroke:#fff}
@media(max-width:560px){
  .sarab-nav button{gap:6px}
  .sarab-nav button svg{width:19px;height:19px}
}

.shuffle-btn{display:inline-flex;align-items:center;gap:7px;background:var(--sarab-secondary);color:#2a1a0a;border:0}
.shuffle-btn svg{width:18px;height:18px;stroke:#2a1a0a}
.shuffle-btn:hover{background:#ffb845}

/* Historik og ratings */
.rating-filters{align-items:center;justify-content:flex-start}
.rating-filters select{padding:11px 13px;border:1px solid #eadfd5;border-radius:10px;background:#fff}
.rating-filters button{display:inline-flex;align-items:center;gap:7px}.rating-filters button svg{width:18px;height:18px}
.rating-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0 22px}
.rating-stat{background:#fff;border:1px solid #eee0d5;border-radius:16px;padding:16px;box-shadow:0 6px 22px rgba(0,0,0,.05)}
.rating-stat strong{display:block;font-family:"Playfair Display",serif;font-size:1.35rem;color:var(--sarab-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rating-stat span{font-size:.8rem;color:#7c7169}
.history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.history-card{background:#fff;border:1px solid #eee0d5;border-radius:20px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.06)}
.history-image{height:170px;position:relative}.history-image img{width:100%;height:100%;object-fit:cover}
.history-score{position:absolute;top:12px;right:12px;background:var(--sarab-secondary);color:#2b1c0b;padding:7px 10px;border-radius:999px;font-weight:800}
.history-body{padding:16px}.history-body h3{font-family:"Playfair Display",serif;margin:5px 0 12px;font-size:1.35rem}
.history-meta{font-size:.78rem;color:var(--sarab-primary);font-weight:700;text-transform:uppercase}
.rate-own{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px solid #f0e5dc;border-bottom:1px solid #f0e5dc}
.stars{display:flex;gap:2px}.star-btn{background:transparent!important;color:#c9b7a8!important;padding:1px 2px!important;font-size:1.45rem;line-height:1;border:0;box-shadow:none}
.star-btn:hover,.star-btn.active{color:var(--sarab-secondary)!important;transform:none!important}
.member-ratings{display:flex;flex-direction:column;gap:5px;padding-top:10px;font-size:.84rem;color:#6d625a}.member-rating strong{color:var(--sarab-secondary);letter-spacing:1px}
.history-note{margin-top:10px;background:var(--sarab-cream2);padding:9px;border-radius:9px;font-size:.85rem}
@media(max-width:800px){.rating-summary{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.rating-summary{grid-template-columns:1fr}.history-grid{grid-template-columns:1fr}}

/* v1.0.1 System / version / backup */
.system-panel .wide{width:100%}
.system-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.system-head h3{font-family:"Playfair Display",serif;margin:0 0 4px}
.system-head p{margin:0;color:#756b64}
.version-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}
.version-grid>div{background:var(--sarab-cream2);border:1px solid #eee0d5;border-radius:13px;padding:12px}
.version-grid span{display:block;font-size:.75rem;color:#786b62;text-transform:uppercase;font-weight:700}
.version-grid strong{display:block;font-family:"Playfair Display",serif;font-size:1.4rem;margin-top:3px;color:var(--sarab-primary)}
.version-ok{color:#2d6a4f;font-weight:700}.version-warning{color:#8a6727;font-weight:600}.version-error{color:#b42318;font-weight:700}
.backup-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0}
@media(max-width:650px){.version-grid{grid-template-columns:1fr}.system-head{flex-direction:column}}

/* v1.0.2 permissions, attendance and read-only meal plan */
.sarab-nav button[hidden]{display:none!important}
.day-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.attendance-count-badge{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;background:var(--sarab-cream2);color:var(--sarab-primary);font-size:.78rem;font-weight:800;white-space:nowrap}
.member-plan-day{grid-template-columns:1fr!important;border-left:5px solid var(--sarab-secondary)}
.member-meal-name{font-family:"Playfair Display",serif;font-size:1.18rem;font-weight:700;padding:7px 0}
.member-meal-note{font-size:.88rem;color:#756b64;background:var(--sarab-cream2);padding:8px 10px;border-radius:9px}
.attendance-meal-name{font-family:"Playfair Display",serif;font-size:1.08rem;font-weight:700;margin:6px 0}
.attendance-day.no-meal{opacity:.72}
.attendance-day.no-meal small{color:#756b64}
.family-member-mode #planSettings{display:none!important}
.family-member-mode #memberReadOnlyHint{display:flex}
.push-panel #pushStatus{display:inline-block;max-width:520px}

/* v1.0.3 app refresh */
#appRefreshBrand{cursor:pointer;user-select:none;position:relative}
#appRefreshBrand .brand-refresh{display:inline-flex;margin-left:8px;font-family:system-ui,sans-serif;font-size:1.05rem;opacity:.62;vertical-align:middle}
#appRefreshBrand:active{transform:scale(.99)}
#appRefreshBrand.refreshing .brand-refresh{animation:madplan-spin .8s linear infinite}
@keyframes madplan-spin{to{transform:rotate(360deg)}}