:root{
    --bg: #FBF6EE;
    --ink: #2E2118;
    --ink-soft: #6B5C4D;
    --card: #F1E8D8;
    --card-line: #E3D4B8;
    --olive: #5C7048;
    --olive-deep: #44542F;
    --terracotta: #B5512E;
    --mustard: #D9A33E;
    --white: #FFFDF9;
    --shadow: 0 6px 18px rgba(46,33,24,0.10);
    --radius: 18px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Tajawal', sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  #root{
    min-height:100vh;
    display:flex;
    justify-content:center;
  }
  .phone{
    width:100%;
    max-width:430px;
    min-height:100vh;
    background:var(--bg);
    position:relative;
    display:flex;
    flex-direction:column;
    overflow-x:hidden;
  }

  /* على شاشات الديسكتوب (أكبر من 768px)، تتمدّد كل الشاشات لتملأ العرض
     الكامل بدل الحد الضيق (430px) المخصَّص للموبايل/التابلت، مع هامش
     6 سم من اليمين واليسار حتى لا يلتصق المحتوى بحواف الشاشة. السلوك
     على الموبايل يبقى كما هو تمامًا بدون أي تغيير. */
  @media (min-width: 768px){
    .phone{
      max-width:100%;
      padding-right:6cm;
      padding-left:6cm;
      box-sizing:border-box;
    }
  }
  h1,h2,h3,.display{
    font-family:'Cairo', sans-serif;
    margin:0;
  }
  button{font-family:inherit;}
  ::selection{background:var(--mustard); color:var(--ink);}

  /* Scrollbar tidy */
  ::-webkit-scrollbar{width:6px;}
  ::-webkit-scrollbar-thumb{background:var(--card-line); border-radius:10px;}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
  }

  /* ---------- Home (chooser) ---------- */
  .home-wrap{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:32px 24px;
    gap:34px;
    position:relative;
  }
  .home-eyebrow{
    font-size:13px;
    letter-spacing:0.5px;
    color:var(--ink-soft);
    font-weight:700;
  }
  .home-title{
    font-size:34px;
    font-weight:900;
    color:var(--ink);
    text-align:center;
    line-height:1.25;
  }
  .home-title span{color:var(--terracotta);}
  .choice-grid{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:18px;
  }
  .choice-btn{
    border:none;
    cursor:pointer;
    background:var(--card);
    border:1.5px solid var(--card-line);
    border-radius:24px;
    padding:26px 22px;
    display:flex;
    align-items:center;
    gap:18px;
    text-align:right;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    box-shadow:var(--shadow);
  }
  .choice-btn:hover{ transform:translateY(-3px); }
  .choice-btn:active{ transform:translateY(0px) scale(0.99); }
  .choice-btn:focus-visible{ outline:3px solid var(--olive); outline-offset:2px; }
  .choice-icon{
    width:62px; height:62px;
    border-radius:18px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    font-size:30px;
  }
  .choice-icon.kitchen{ background:var(--olive); color:var(--white); }
  .choice-icon.living{ background:var(--terracotta); color:var(--white); }
  .choice-text{ display:flex; flex-direction:column; gap:4px; }
  .choice-text b{ font-family:'Cairo'; font-size:19px; font-weight:800; }
  .choice-text span{ font-size:13px; color:var(--ink-soft); }

  /* ---------- زرّا "المطبخ"/"غرفة الجلوس" بحالة التعطيل ----------
     يظهران رماديين تمامًا (بدون تفاعل) قبل تفعيل أي رمز بيت، دلالةً
     بصرية واضحة على عدم إمكانية الدخول حتى يُنشئ المستخدم رمزًا
     جديدًا أو يُدخل رمزًا موجودًا بالأعلى. */
  .choice-btn-disabled{
    cursor:not-allowed;
    background:#E4DFD4;
    border-color:#D6CFC0;
    box-shadow:none;
    opacity:0.65;
    pointer-events:none;
  }
  .choice-btn-disabled .choice-icon.kitchen,
  .choice-btn-disabled .choice-icon.living{
    background:#B7AFA0;
    color:#F3EFE6;
  }
  .choice-btn-disabled .choice-text b,
  .choice-btn-disabled .choice-text span{
    color:#8A8273;
  }

  /* ---------- منطقة رمز البيت (إنشاء/إدخال/الحالة الحالية) ---------- */
  .home-code-panel{
    width:100%;
    max-width:520px;
    margin:0 auto;
  }
  /* حالة وجود رمز مفعَّل: عرض الرمز الحالي + زر خروج */
  .home-code-active-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    position:relative;      /* لتوسيط رابط الإعدادات في منتصف الصف تمامًا */
    background:var(--card);
    border:1.5px solid var(--card-line);
    border-radius:18px;
    padding:14px 18px;
  }
  .home-code-active-info{
    display:flex;
    flex-direction:column;
    gap:3px;
  }
  /* رابط «الإعدادات» في منتصف صف رمز البيت تمامًا (بين الرمز وزر خروج)،
     بلا أيقونة ترس — الكلمة فقط. */
  .home-code-settings-link{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    font-family:'Cairo',Tahoma,sans-serif;
    font-size:14px;
    font-weight:800;
    color:var(--olive);
    text-decoration:none;
    white-space:nowrap;
    padding:6px 8px;
  }
  .home-code-settings-link:active{ opacity:.6; }
  .home-code-active-label{
    font-size:12px;
    color:var(--ink-soft);
    font-weight:700;
  }
  .home-code-active-value{
    font-size:22px;
    font-weight:900;
    font-family:'Cairo';
    color:var(--olive-deep, var(--olive));
    letter-spacing:2px;
    direction:ltr;
    display:inline-block;
  }
  /* صف الرمز مع زر تعديله: القلم ✏️ ملاصق لخانة الرمز، يتحول لـ💾 عند
     الدخول بوضع التعديل (الرمز يصبح حقل إدخال قابل للتحرير حينها) */
  .home-code-edit-row{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .home-code-edit-input{
    font-size:20px;
    font-weight:900;
    font-family:'Cairo';
    color:var(--olive-deep, var(--olive));
    letter-spacing:2px;
    direction:ltr;
    width:120px;
    padding:4px 8px;
    border:1.5px solid var(--olive);
    border-radius:8px;
    background:var(--white);
  }
  .home-code-edit-btn{
    border:1.5px solid var(--card-line);
    background:var(--white);
    border-radius:50%;
    width:30px; height:30px;
    font-size:14px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    flex-shrink:0;
  }
  .home-code-edit-btn:hover{ background:var(--card); }
  .home-logout-btn{
    border:1.5px solid #E3BBA9;
    background:var(--white);
    color:var(--terracotta);
    border-radius:100px;
    padding:9px 20px;
    font-size:13.5px;
    font-weight:700;
    cursor:pointer;
    flex-shrink:0;
  }
  .home-logout-btn:hover{ background:#FBEDE7; }

  /* عمود يحوي زري "خروج" و"حذف" معًا بجانب رمز البيت الحالي */
  /* صف يحوي زري "حذف" و"خروج" جنب بعض: "حذف" يقع يمين "خروج" (أول
     عنصر بالـHTML، يمين بفعل RTL)، بمسافة بينهما تساوي 75px (تقريبًا
     عرض زر "خروج" الفعلي بحجم خطه الحالي)، بدل التراصف العمودي السابق. */
  .home-actions-row{
    display:flex;
    flex-direction:row;
    align-items:center;
    flex-shrink:0;
  }
  .home-actions-row .home-delete-btn{
    margin-left:75px;
  }
  .home-delete-btn{
    border:none;
    background:transparent;
    color:var(--terracotta);
    font-size:12px;
    font-weight:700;
    cursor:pointer;
    text-decoration:underline;
    padding:2px 4px;
  }
  .home-delete-btn:hover{ opacity:0.7; }

  /* ---------- نافذة تأكيد حذف رمز البيت ---------- */
  .delete-home-modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(46,33,24,0.5);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:100;
    padding:20px;
  }
  .delete-home-modal-sheet{
    background:var(--bg);
    border-radius:20px;
    padding:24px;
    max-width:360px;
    width:100%;
    box-shadow:0 10px 30px rgba(46,33,24,0.3);
  }
  .delete-home-modal-sheet h3{
    font-size:17px;
    font-weight:800;
    margin:0 0 12px;
    color:var(--terracotta);
  }
  .delete-home-modal-sheet p{
    font-size:13.5px;
    color:var(--ink-soft);
    line-height:1.7;
    margin:0 0 18px;
  }
  .delete-home-modal-actions{
    display:flex;
    gap:10px;
  }
  .delete-home-modal-actions .btn{
    flex:1;
  }

  /* إطار الدخول المركزي */
  .home-code-setup{
    background:var(--card);
    border:1.5px solid var(--card-line);
    border-radius:18px;
    padding:24px 22px;
  }
  .home-code-setup-hint{
    font-size:13px;
    color:var(--ink-soft);
    text-align:center;
    margin:0 0 14px;
    line-height:1.6;
  }
  .home-code-tabs{
    display:flex;
    gap:4px;
    margin-bottom:0;
    position:relative;
    z-index:1;
  }
  .home-code-tab{
    flex:1;
    background:var(--card);
    border:1.5px solid var(--card-line);
    border-bottom:none;
    color:var(--ink-soft);
    border-radius:14px 14px 0 0;
    padding:10px 6px 9px;
    font-size:13.5px;
    font-weight:700;
    cursor:pointer;
    margin-top:6px;
    transition:background .15s ease, color .15s ease, margin-top .15s ease, padding .15s ease;
  }
  .home-code-tab.active{
    background:var(--bg);
    border-color:var(--card-line);
    color:var(--ink);
    margin-top:0;
    padding-top:13px;
    padding-bottom:11px;
    z-index:2;
    position:relative;
    box-shadow:0 2px 0 var(--bg);
  }
  /* محتوى كل تبويب (الفراغ المخصَّص لإنشاء/إدخال الرمز) يلتصق مباشرة
     بأسفل شريط التبويبات، بنفس خلفية الصفحة، فيبدو التبويب النشط
     متّصلًا بصريًا بمحتواه دون أي خط فاصل (يطابق نموذج تبويب الملفات) */
  .home-code-tab-content{
    background:var(--bg);
    border:1.5px solid var(--card-line);
    border-top:none;
    border-radius:0 0 16px 16px;
    padding:16px;
  }
  .home-code-success{
    margin-top:12px;
    background:#EAF1E3;
    border:1.5px solid var(--olive);
    border-radius:14px;
    padding:14px;
    text-align:center;
    font-size:15px;
    color:var(--olive-deep, var(--olive));
    line-height:1.6;
  }
  .home-code-success b{
    font-size:24px;
    letter-spacing:3px;
    direction:ltr;
    display:inline-block;
  }
  .home-code-error{
    color:var(--terracotta);
    font-size:13px;
    font-weight:700;
    margin-top:8px;
    min-height:18px;
    text-align:center;
  }

  /* ---------- Shared App Shell ---------- */
  /* أعلام تبديل اللّغة: 🇦🇪 العربية (افتراضية) / 🇺🇸 الإنكليزية / 🇮🇳
     الهندية. الآن مدمجة بنفس صف الهيدر (بين عنوان الصفحة والساعة)
     بدل شريط منفصل، فحجمها أصغر ليتسع الصف الواحد بعرض الموبايل دون
     أي زيادة بارتفاع الصفحة. يُحفظ التفضيل بـlocalStorage عبر
     assets/i18n.js. اتجاه الواجهة (RTL) لا يتغيّر بتبديل اللّغة —
     فقط النصوص تُستبدَل. */
  .header-lang-flags{
    display:flex;
    gap:4px;
    flex-shrink:0;
  }
  .lang-flag-btn{
    border:1.5px solid var(--card-line);
    background:var(--white);
    border-radius:50%;
    width:24px;
    height:24px;
    font-size:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    opacity:0.55;
    transition:opacity .15s ease, transform .15s ease;
    padding:0;
  }
  .lang-flag-btn:hover{ opacity:0.8; }
  .lang-flag-btn.active{
    opacity:1;
    border-color:var(--olive);
    box-shadow:0 0 0 2px rgba(92,112,72,0.25);
    transform:scale(1.1);
  }

  /* ---------- ساعة ديجيتال جمالية بالهيدر (المطبخ وغرفة الجلوس) ----------
     موضعها بين عنوان الصفحة وأعلام اللّغة/السلة، بنفس صف الهيدر (لا
     ارتفاع إضافي للصفحة). تتحدّث تلقائيًا كل ثانية عبر JS (دالة
     startHeaderClock المشتركة)، بصيغة 12 ساعة مع ص/م. */
  .header-clock{
    font-family:'Cairo', sans-serif;
    font-size:17px;
    font-weight:800;
    color:var(--olive-deep, var(--olive));
    background:var(--card);
    border:1.5px solid var(--card-line);
    border-radius:10px;
    padding:5px 10px;
    direction:ltr;
    letter-spacing:0.5px;
    flex-shrink:0;
    white-space:nowrap;
  }

  /* زر إسكات طوارئ بالهيدر (غرفة الجلوس): يظهر فقط عند وجود طلب
     "جاهزة" واحد على الأقل لم يُسكَت بعد، ويُسكِت كل التنبيهات دفعة
     واحدة دون الاعتماد على الضغط على صورة الوجبة بالذات — طريقة
     احتياطية تعمل دائمًا حتى لو تعطّل عرض صورة وجبة معيّنة لأي سبب. */
  @keyframes emergency-mute-blink{
    0%, 100%{ background:var(--terracotta); transform:scale(1); }
    50%{ background:#8B3A2B; transform:scale(1.08); }
  }
  .emergency-mute-btn{
    width:34px; height:34px;
    border-radius:50%;
    border:none;
    background:var(--terracotta);
    color:var(--white);
    font-size:15px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    flex-shrink:0;
    animation:emergency-mute-blink 0.8s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce){
    .emergency-mute-btn{ animation:none; background:var(--terracotta); }
  }

  .app-header{
    position:sticky; top:0; z-index:20;
    background:var(--bg);
    padding:10px 12px;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:6px;
    border-bottom:1px solid var(--card-line);
    min-height:62px;
  }
  .header-zone-right{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
  }
  .header-zone-right h1{
    font-size:18px;
    font-weight:800;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .header-zone-center{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }
  .header-zone-left{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:5px;
    min-width:0;
  }
  .back-btn{
    width:36px; height:36px;
    border-radius:50%;
    border:1.5px solid var(--card-line);
    background:var(--white);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    font-size:16px;
    flex-shrink:0;
  }
  .back-btn:focus-visible{ outline:3px solid var(--olive); outline-offset:2px; }
  .app-header h1{
    font-size:18px;
    font-weight:800;
  }
  /* .tag.living مستخدمة فعليًا بهيدر living.php (وسم "غرفة الجلوس")؛
     .tag.kitchen حُذفت من kitchen.php (طلب المستخدم) ولم تُحذف هذه
     القاعدة المشتركة .app-header .tag لأنها أساس تنسيق .tag.living */
  .app-header .tag{
    font-size:11px;
    font-weight:700;
    color:var(--white);
    padding:5px 10px;
    border-radius:20px;
  }
  .tag.living{ background:var(--terracotta); }

  /* زر إضافة للسلة — مضغوط */
  .grocery-add-to-cart-btn{
    padding:6px 10px;
    font-size:12px;
    white-space:nowrap;
    flex-shrink:0;
    border-radius:10px;
  }
  .header-add-to-cart-btn{ padding:6px 10px; font-size:12px; }
  /* عربة التسوق في منطقة الوسط */
  .header-zone-center .grocery-cart-btn{
    position:relative;
    width:44px; height:44px;
    border-radius:50%;
    border:1.5px solid var(--card-line);
    background:var(--white);
    font-size:19px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
  }
  .header-zone-center .grocery-cart-btn:hover{ background:var(--card); }
  .header-cart-btn{ flex-shrink:0; }
  /* ===== تبويبات فترات المنزل (فطور / غداء / فواله / عشاء) ===== */
  .living-periods-tabs{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:4px;
    padding:0 14px;
    background:var(--card);
    border-bottom:1.5px solid var(--card-line);
    z-index:10;
    scrollbar-width:none;
  }
  .living-periods-tabs::-webkit-scrollbar{ display:none; }
  .living-period-tab{
    flex-shrink:0;
    border:1.5px solid var(--card-line);
    border-bottom:none;
    background:var(--card);
    color:var(--ink-soft);
    border-radius:14px 14px 0 0;
    padding:10px 16px 9px;
    font-size:13.5px;
    font-family:'Cairo';
    font-weight:700;
    cursor:pointer;
    white-space:nowrap;
    margin-top:6px;
    position:relative;
    transition:background .15s ease, color .15s ease, margin-top .15s ease, padding .15s ease;
  }
  @media (min-width:768px){
    .living-period-tab{ padding:10px 19px 9px; font-size:15px; }
    .living-period-tab.active{ padding-top:13px; padding-bottom:11px; }
  }
  .living-period-tab:hover{
    background:var(--bg);
    color:var(--ink);
  }
  .living-period-tab.active{
    background:var(--bg);
    border-color:var(--card-line);
    color:var(--ink);
    margin-top:0;
    padding-top:13px;
    padding-bottom:11px;
    z-index:2;
    box-shadow:0 2px 0 var(--bg);
  }
  .living-period-tab input.tab-rename-input{
    border:none;
    background:transparent;
    font-family:'Cairo';
    font-weight:700;
    font-size:13.5px;
    color:var(--ink);
    outline:2px solid var(--olive);
    border-radius:4px;
    width:60px;
    text-align:center;
    padding:0 2px;
  }
  .living-period-content{
    display:none;
  }
  .living-period-content.active{
    display:block;
  }

  .app-body{
    flex:1;
    padding:18px;
    padding-bottom:110px;
  }

  /* ---------- Buttons generic ---------- */
  .btn{
    border:none; cursor:pointer; border-radius:14px;
    font-family:'Cairo'; font-weight:700; font-size:15px;
    padding:14px 18px;
    display:flex; align-items:center; justify-content:center; gap:8px;
    transition: transform .12s ease, opacity .12s ease;
  }
  .btn:active{ transform:scale(0.97); }
  .btn:focus-visible{ outline:3px solid var(--olive-deep); outline-offset:2px; }
  .btn-primary{ background:var(--olive); color:var(--white); }
  .btn-primary:hover{ background:var(--olive-deep); }
  .btn-primary[disabled]{
    background:var(--card-line);
    color:var(--ink-soft);
    cursor:not-allowed;
    opacity:0.75;
  }
  .btn-primary[disabled]:hover{ background:var(--card-line); }
  .btn-ghost{ background:var(--white); color:var(--ink); border:1.5px solid var(--card-line); }
  .btn-danger-outline{ background:var(--white); color:var(--terracotta); border:1.5px solid #E3BBA9; }
  .btn-full{ width:100%; }

  /* ---------- Kitchen: list screen ---------- */
  .list-title-row{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:16px;
  }
  .list-title-row h2{ font-size:18px; font-weight:800; }
  .add-fab{
    width:46px; height:46px;
    border-radius:50%;
    background:var(--olive);
    color:var(--white);
    border:none;
    font-size:24px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    box-shadow:0 6px 14px rgba(92,112,72,0.35);
    flex-shrink:0;
  }
  .add-fab:focus-visible{ outline:3px solid var(--olive-deep); outline-offset:3px; }
  .add-fab:active{ transform:scale(0.93); }

  .meal-card{
    background:var(--card);
    border:1px solid var(--card-line);
    border-radius:var(--radius);
    padding:14px;
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:12px;
    cursor:pointer;
    text-align:right;
    width:100%;
  }
  .meal-card:focus-visible{ outline:3px solid var(--olive); outline-offset:2px; }
  .meal-thumb{
    width:52px; height:52px;
    border-radius:12px;
    background:var(--white);
    border:1px solid var(--card-line);
    flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:22px;
    overflow:hidden;
  }
  .meal-thumb img{ width:100%; height:100%; object-fit:cover; }
  .meal-card-info{ flex:1; min-width:0; }
  .meal-card-info b{ font-family:'Cairo'; font-size:15px; display:block; margin-bottom:3px; }
  .meal-card-info span{ font-size:12.5px; color:var(--ink-soft); }
  .meal-card-chevron{ color:var(--ink-soft); font-size:18px; }

  .empty-state{
    text-align:center;
    padding:50px 20px;
    color:var(--ink-soft);
  }
  .empty-state .e-icon{ font-size:42px; margin-bottom:14px; }
  .empty-state b{ display:block; font-family:'Cairo'; font-size:16px; color:var(--ink); margin-bottom:6px; }

  /* ---------- Modal (Create/Edit meal) ---------- */
  .modal-overlay{
    position:fixed;
    top:0; left:0; right:0;
    height:100dvh;
    background:rgba(46,33,24,0.45);
    z-index:50;
    display:flex; align-items:center; justify-content:center;
    padding:16px;
    animation: fadeIn .18s ease;
  }
  /* منع تمرير الخلفية عند فتح نافذة منبثقة */
  body.modal-open{ overflow:hidden !important; }
  /* قفل تمرير الشاشة الخلفية — يسمح فقط بتمرير محتوى النافذة */
  .modal-overlay{ overscroll-behavior:contain; }
  .modal-body{ touch-action:pan-y; overscroll-behavior:contain; }
  @keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
  .modal-sheet{
    background:var(--bg);
    width:100%; max-width:430px;
    max-height:90vh;
    border-radius:26px;
    display:flex; flex-direction:column;
    animation: slideUp .22s ease;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.2);
    overflow:hidden;
  }
  /* النافذة في المنتصف: كل الزوايا دائرية */
  .modal-overlay:not(:has(.ps-modal-topbar)) .modal-sheet{
    border-radius:26px;
  }
  @keyframes slideUp{ from{ transform:translateY(30px); opacity:0;} to{ transform:translateY(0); opacity:1;} }
  .modal-handle{
    width:44px; height:5px;
    background:var(--card-line);
    border-radius:10px;
    margin:10px auto 4px;
  }
  .modal-header{
    padding:10px 22px 14px;
    border-bottom:1px solid var(--card-line);
  }
  .modal-header h2{ font-size:19px; font-weight:800; }
  .modal-body{
    padding:18px 22px;
    overflow-y:auto;
    flex:1;
  }
  .field-group{ margin-bottom:20px; }
  .field-label{
    font-family:'Cairo'; font-size:13.5px; font-weight:700;
    color:var(--ink); margin-bottom:8px; display:block;
  }
  .field-label small{ color:var(--ink-soft); font-weight:500; }
  .text-input, textarea.text-input{
    width:100%;
    border:1.5px solid var(--card-line);
    background:var(--white);
    border-radius:13px;
    padding:13px 14px;
    font-size:15px;
    font-family:'Tajawal';
    color:var(--ink);
  }
  .text-input:focus{ outline:none; border-color:var(--olive); box-shadow:0 0 0 3px rgba(92,112,72,0.15); }
  textarea.text-input{ resize:vertical; min-height:90px; line-height:1.6; }

  .ingredient-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
  }
  .ingredient-input{
    flex:1;
    border:1.5px solid var(--card-line);
    background:var(--white);
    border-radius:11px;
    padding:10px 12px;
    font-size:14px;
    font-family:'Tajawal';
  }
  .ingredient-input:focus{ outline:none; border-color:var(--olive); }
  .ingredient-photo-btn{
    width:42px; height:42px;
    border-radius:11px;
    border:1.5px dashed var(--card-line);
    background:var(--white);
    flex-shrink:0;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
    position:relative;
    font-size:16px;
    color:var(--ink-soft);
  }
  .ingredient-photo-btn:focus-visible{ outline:3px solid var(--olive); outline-offset:2px; }
  .ingredient-photo-btn img{
    width:100%; height:100%; object-fit:cover;
  }
  .ingredient-photo-btn.has-photo{ border-style:solid; border-color:var(--olive); }
  .ingredient-remove{
    width:30px; height:30px;
    border-radius:50%;
    border:none;
    background:transparent;
    color:var(--ink-soft);
    cursor:pointer;
    font-size:16px;
    flex-shrink:0;
  }
  .ingredient-remove:hover{ color:var(--terracotta); }
  .ingredient-hint{
    font-size:11.5px;
    color:var(--ink-soft);
    margin-top:-4px;
    margin-bottom:14px;
  }
  .add-ingredient-link{
    background:none; border:none; cursor:pointer;
    color:var(--olive-deep);
    font-family:'Cairo'; font-weight:700; font-size:13.5px;
    display:flex; align-items:center; gap:6px;
    padding:6px 2px;
  }
  .add-ingredient-link:focus-visible{ outline:3px solid var(--olive); outline-offset:2px; border-radius:6px;}

  .modal-footer{
    padding:16px 22px 22px;
    display:flex; gap:12px;
    border-top:1px solid var(--card-line);
    background:var(--bg);
  }
  .modal-footer .btn{ flex:1; }

  /* علامة ✕ لحذف صنف من سلة التسوق: دائرة صغيرة بجانب صف الصنف
     (بنافذة السلة)، بحجم ثابت داخل تخطيط الصف (لا تموضع مطلق فوق صورة) */
  .shortage-remove-x{
    width:26px; height:26px;
    border-radius:50%;
    background:var(--terracotta);
    color:var(--white);
    border:none;
    font-size:12px;
    line-height:1;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    box-shadow:0 1px 3px rgba(46,33,24,0.25);
  }

  /* ---------- Living room ---------- */
  .period-block{
    margin-bottom:22px;
    padding-bottom:18px;
    border-bottom:1px solid var(--card-line);
  }
  .period-block:last-child{
    border-bottom:none;
  }
  /* شبكة 3 أعمدة: [إيموجي+اسم الفترة] [تلقائي/إيقاف — بالمنتصف تمامًا] [+]
     العمودان الجانبيان بعرض متساوٍ (1fr) فيبقى العمود الأوسط في منتصف
     الصف الحقيقي بصرف النظر عن طول اسم الفترة. */
  .period-head{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:center; gap:8px;
    margin-bottom:10px;
  }
  .period-head-name{ display:flex; align-items:center; gap:8px; min-width:0; }
  .period-emoji{ font-size:20px; flex-shrink:0; }
  .period-head h3{ font-size:16.5px; font-weight:800; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
  .period-head-mid{ display:flex; align-items:flex-end; gap:10px; justify-self:center; }
  .phead-toggle-wrap{ display:flex; flex-direction:column; align-items:center; gap:3px; }
  .phead-toggle-label{
    font-size:10px; font-weight:700; color:var(--ink-soft,#6b5c4d);
    white-space:nowrap;
  }
  .period-add-btn{
    width:34px; height:34px;
    border-radius:50%;
    background:var(--olive);
    color:var(--white);
    border:none;
    font-size:19px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    flex-shrink:0;
    justify-self:end;
  }
  .period-add-btn:active{ transform:scale(0.9); }
  .period-add-btn:focus-visible{ outline:3px solid var(--olive-deep); outline-offset:2px; }

  /* زرّا «تلقائي» و«إيقاف» برأس الفترة (اسم مسبوق بـ phead- لتفادي
     تعارض الأسماء مع .period-toggle-btn المُستخدَم بمكان آخر تمامًا).
     دائمًا أخضر أو أحمر (بلا حالة رمادية محايدة) — المعنى يختلف حسب
     الزر (تلقائي: أخضر=يعمل الآن، إيقاف: أخضر=غير مفعّل)، لكن اللون
     نفسه مشترك بين الزرّين. */
  .phead-toggle-btn{
    padding:6px 12px;
    border-radius:16px;
    border:1.5px solid transparent;
    color:#fff;
    font-family:'Cairo',sans-serif;
    font-size:12.5px;
    font-weight:800;
    cursor:pointer;
    white-space:nowrap;
    transition:all .15s;
  }
  .phead-toggle-btn:active{ transform:scale(0.94); }
  .phead-toggle-btn.state-green{
    border-color:#2e7d4f;
    background:#2e7d4f;
  }
  .phead-toggle-btn.state-red{
    border-color:#c0392b;
    background:#c0392b;
  }
  @media (max-width:360px){
    .phead-toggle-btn{ padding:5px 9px; font-size:11.5px; }
  }

  .period-meals{
    display:flex; flex-direction:column; gap:10px;
  }
  .added-meal-card{
    background:var(--card);
    border:1px solid var(--card-line);
    border-radius:16px;
    padding:13px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .added-meal-top{
    display:flex; align-items:center; gap:12px;
  }
  .added-meal-top .meal-thumb{ width:44px; height:44px; }
  .added-meal-top-text{ flex:1; min-width:0; }
  .added-meal-top-text b{ font-family:'Cairo'; font-size:14.5px; display:block; }
  .added-meal-status{
    font-size:11px;
    font-weight:700;
    padding:3px 9px;
    border-radius:20px;
    flex-shrink:0;
  }
  .status-sent{ background:#DCE6D3; color:var(--olive-deep); }
  .status-pending{ background:#F3E2C8; color:#8A5A1E; }

  .added-meal-divider{ border-top:1px dashed var(--card-line); margin:2px 0; }

  .mini-field{ }
  .mini-field label{
    font-size:12px; font-weight:700; color:var(--ink-soft);
    display:flex; align-items:center; gap:6px;
    margin-bottom:6px;
    font-family:'Cairo';
  }
  .note-input{
    width:100%;
    border:1.5px solid var(--card-line);
    background:var(--white);
    border-radius:10px;
    padding:9px 11px;
    font-size:13.5px;
    font-family:'Tajawal';
  }
  .note-input:focus{ outline:none; border-color:var(--olive); }

  .time-toggle-row{
    display:flex; align-items:center; justify-content:space-between;
  }
  .switch{
    width:44px; height:25px;
    background:var(--card-line);
    border-radius:20px;
    position:relative;
    cursor:pointer;
    border:none;
    flex-shrink:0;
    transition:background .15s ease;
  }
  .switch.on{ background:var(--olive); }
  .switch .knob{
    width:19px; height:19px;
    background:var(--white);
    border-radius:50%;
    position:absolute;
    top:3px; right:3px;
    transition:transform .18s ease;
    box-shadow:0 1px 3px rgba(0,0,0,0.25);
  }
  .switch.on .knob{ transform:translateX(-19px); }
  .switch:focus-visible{ outline:3px solid var(--olive-deep); outline-offset:2px; }

  .time-picker-wrap{
    margin-top:10px;
    display:flex; align-items:center; gap:10px;
  }
  .time-input{
    flex:1;
    border:1.5px solid var(--olive);
    background:var(--white);
    border-radius:10px;
    padding:9px 11px;
    font-size:14px;
    font-family:'Tajawal';
    color:var(--ink);
  }
  .time-input:focus{ outline:none; box-shadow:0 0 0 3px rgba(92,112,72,0.15); }

  .send-btn-wrap{
    display:flex; justify-content:flex-end;
  }
  .send-btn{
    background:var(--terracotta);
    color:var(--white);
    font-family:'Cairo'; font-weight:700; font-size:13px;
    border:none; border-radius:11px;
    padding:9px 16px;
    cursor:pointer;
    display:flex; align-items:center; gap:6px;
  }
  .send-btn:disabled{ opacity:0.45; cursor:not-allowed; }
  .send-btn:focus-visible{ outline:3px solid var(--olive-deep); outline-offset:2px; }

  /* ---------- Meal picker sheet (living room +) ---------- */
  .picker-list{
    display:flex; flex-direction:column; gap:10px;
  }
  .picker-item{
    background:var(--card);
    border:1px solid var(--card-line);
    border-radius:14px;
    padding:11px;
    display:flex; align-items:center; gap:12px;
    cursor:pointer;
    width:100%;
    text-align:right;
  }
  .picker-item:focus-visible{ outline:3px solid var(--olive); outline-offset:2px; }
  .picker-item:hover{ background:#ECE0C8; }
  .picker-item .meal-thumb{ width:44px; height:44px; }
  .picker-item-text{ flex:1; }
  .picker-item-text b{ font-family:'Cairo'; font-size:14px; display:block; }
  .picker-item-text span{ font-size:11.5px; color:var(--ink-soft); }
  .picker-add-icon{
    color:var(--olive); font-size:20px; flex-shrink:0;
  }

  .toast{
    position:fixed;
    bottom:24px; left:50%;
    transform:translateX(-50%);
    background:var(--ink);
    color:var(--white);
    padding:12px 22px;
    border-radius:30px;
    font-family:'Cairo'; font-weight:700; font-size:13.5px;
    z-index:80;
    box-shadow:0 8px 20px rgba(0,0,0,0.25);
    display:flex; align-items:center; gap:8px;
    animation: toastIn .22s ease;
    max-width:88%;
  }
  @keyframes toastIn{ from{ opacity:0; transform:translate(-50%, 12px);} to{opacity:1; transform:translate(-50%,0);} }

  .sr-only{
    position:absolute; width:1px; height:1px;
    overflow:hidden; clip:rect(0,0,0,0);
  }

  /* ---------- Modal subtitle ---------- */
  .modal-subtitle{
    font-size:12.5px;
    color:var(--ink-soft);
    margin:6px 0 0;
  }

  /* ---------- Meal dropdown (kitchen) ---------- */
  .meal-dropdown{
    appearance:none;
    -webkit-appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%236B5C4D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat:no-repeat;
    background-position:left 14px center;
    cursor:pointer;
  }

  /* ---------- Meal main photo (6x6 cm) in form ---------- */
  .meal-photo-btn{
    width:104px; height:104px; /* تمثيل ٦×٦ سم على واجهة الموبايل */
    border-radius:18px;
    border:2px dashed var(--card-line);
    background:var(--white);
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
    flex-shrink:0;
  }
  .meal-photo-btn.has-photo{ border-style:solid; border-color:var(--olive); }
  .meal-photo-btn img{ width:100%; height:100%; object-fit:cover; }
  .meal-photo-btn:focus-visible{ outline:3px solid var(--olive); outline-offset:2px; }
  .meal-photo-placeholder{
    display:flex; flex-direction:column; align-items:center; gap:6px;
    color:var(--ink-soft);
    font-size:11.5px;
    font-family:'Cairo'; font-weight:700;
  }
  .meal-photo-hint{
    margin-top:8px;
    font-size:11.5px;
    color:var(--ink-soft);
  }

  /* ---------- Order details (read-only, kitchen) ----------
     الصورة أصبحت زرًّا قابلًا للضغط: الضغط عليها يكبّرها بنسبة 1.5x
     داخل مكانها بالنافذة نفسها (كلاس zoomed)، وضغطة ثانية ترجعها
     لحجمها الطبيعي. overflow:visible هنا (بخلاف الإطار الداخلي الذي
     يبقى overflow:hidden على الصورة فعليًا) ليُسمح للتكبير بالبروز
     بصريًا فوق العناصر المجاورة دون أن يُقصّ. */
  .order-photo-large{
    width:140px; height:140px;
    border-radius:20px;
    background:var(--white);
    border:1.5px solid var(--card-line);
    display:flex; align-items:center; justify-content:center;
    overflow:visible;
    cursor:pointer;
    padding:0;
    position:relative;
    z-index:1;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .order-photo-large > img,
  .order-photo-large > span{
    width:100%; height:100%;
    border-radius:18px;
    overflow:hidden;
    display:flex; align-items:center; justify-content:center;
  }
  .order-photo-large img{ object-fit:cover; }
  .order-photo-large:hover{ box-shadow:0 2px 10px rgba(46,33,24,0.12); }
  .order-photo-large.zoomed{
    transform:scale(1.5);
    z-index:5;
    box-shadow:0 8px 24px rgba(46,33,24,0.28);
  }
  @media (prefers-reduced-motion: reduce){
    .order-photo-large{ transition:none; }
  }

  .order-meta-card{
    background:var(--white);
    border:1px solid var(--card-line);
    border-radius:14px;
    padding:4px 14px;
  }
  .order-meta-row{
    display:flex; align-items:center; justify-content:space-between;
    padding:11px 0;
    border-bottom:1px solid var(--card-line);
    gap:10px;
  }
  .order-meta-row:last-child{ border-bottom:none; }
  .order-meta-key{ font-size:13px; color:var(--ink-soft); font-weight:700; font-family:'Cairo'; flex-shrink:0; }
  .order-meta-val{ font-size:13.5px; color:var(--ink); text-align:left; }

  /* وقت الجاهزية المحدَّد فعليًا (لا "غير محدد") يومض بلون تنبيهي مع
     رمز ساعة منبّه ⏰ ملاصق له، لجذب انتباه الطاهي بصريًا لضرورة
     الانتهاء بالوقت المطلوب. */
  @keyframes order-time-blink{
    0%, 100%{ color:var(--terracotta); opacity:1; }
    50%{ color:#8B3A2B; opacity:0.55; }
  }
  .order-time-alert{
    font-weight:800;
    animation:order-time-blink 1s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce){
    .order-time-alert{ animation:none; color:var(--terracotta); }
  }

  .readonly-ingredients{
    display:flex; flex-wrap:wrap; gap:8px;
  }
  .readonly-ingredient-chip{
    background:var(--white);
    border:1px solid var(--card-line);
    border-radius:30px;
    padding:6px 12px 6px 6px;
    display:flex; align-items:center; gap:8px;
    font-size:13px;
  }
  .readonly-ing-thumb{
    width:26px; height:26px;
    border-radius:50%;
    background:var(--card);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
    font-size:13px;
    flex-shrink:0;
  }
  .readonly-ing-thumb img{ width:100%; height:100%; object-fit:cover; }
  .readonly-instructions{
    background:var(--white);
    border:1px solid var(--card-line);
    border-radius:14px;
    padding:13px 14px;
    font-size:14px;
    line-height:1.7;
    color:var(--ink);
  }
  .readonly-empty{
    color:var(--ink-soft);
    font-size:13px;
    padding:10px 0;
  }

  /* ---------- Multi-select meal grid (living room "+") ---------- */
  .meal-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:14px;
  }
  .meal-grid-item{
    background:none;
    border:none;
    cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:7px;
    padding:0;
  }
  .meal-grid-item:focus-visible{ outline:3px solid var(--olive); outline-offset:3px; border-radius:14px; }
  .meal-grid-photo{
    width:100%;
    aspect-ratio:1/1;
    border-radius:16px;
    background:var(--white);
    border:2px solid var(--card-line);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
    position:relative;
    transition:border-color .15s ease, transform .12s ease;
  }
  .meal-grid-item.selected .meal-grid-photo{
    border-color:var(--olive);
    box-shadow:0 0 0 3px rgba(92,112,72,0.18);
  }
  .meal-grid-item:active .meal-grid-photo{ transform:scale(0.96); }
  .meal-grid-photo img{ width:100%; height:100%; object-fit:cover; }
  .meal-grid-check{
    position:absolute;
    top:6px; left:6px;
    width:24px; height:24px;
    border-radius:50%;
    background:var(--olive);
    color:var(--white);
    display:flex; align-items:center; justify-content:center;
    font-size:13px;
    font-weight:900;
    box-shadow:0 2px 6px rgba(0,0,0,0.2);
  }
  .meal-grid-name{
    font-size:12.5px;
    font-weight:700;
    font-family:'Cairo';
    text-align:center;
    color:var(--ink);
    line-height:1.3;
  }
  .meal-grid-author{
    font-size:10.5px;
    color:var(--ink-soft);
    text-align:center;
    line-height:1.2;
  }

  /* ---------- Pinned "today's options" grid (living room main) ---------- */
  .period-empty-hint{
    font-size:12.5px;
    color:var(--ink-soft);
    background:var(--card);
    border:1px dashed var(--card-line);
    border-radius:14px;
    padding:14px;
    text-align:center;
  }
  .pinned-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px 14px;
  }
  .pinned-item{
    display:flex; flex-direction:column; align-items:center; gap:6px;
    position:relative;
  }
  .pinned-photo-btn{
    width:100%;
    aspect-ratio:1/1;
    border-radius:16px;
    background:var(--card);
    border:1.5px solid var(--card-line);
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
    padding:0;
    transition:transform .12s ease, box-shadow .15s ease;
  }
  .pinned-photo-btn:hover{ box-shadow:var(--shadow); }
  .pinned-photo-btn:active{ transform:scale(0.95); }
  .pinned-photo-btn:focus-visible{ outline:3px solid var(--olive); outline-offset:2px; }
  .pinned-photo-btn img{ width:100%; height:100%; object-fit:cover; }
  .pinned-name{
    font-size:12.5px;
    font-weight:700;
    font-family:'Cairo';
    text-align:center;
    color:var(--ink);
    line-height:1.3;
  }
  .pinned-remove{
    position:absolute;
    top:-6px; left:-6px;
    width:24px; height:24px;
    border-radius:50%;
    background:var(--terracotta);
    color:var(--white);
    border:2px solid var(--bg);
    font-size:12px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    z-index:2;
  }
  .pinned-remove:focus-visible{ outline:2px solid var(--ink); outline-offset:1px; }

  /* ---------- Order request modal (frame + note + send/cancel) ---------- */
  .order-photo-frame{
    width:180px; height:180px;
    border-radius:22px;
    background:var(--white);
    border:3px solid var(--olive);
    box-shadow:0 8px 22px rgba(46,33,24,0.18);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  .order-photo-frame img{ width:100%; height:100%; object-fit:cover; }

  /* ---------- Modal header with delete action ---------- */
  .modal-header-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .header-delete-btn{
    background:none;
    border:1.5px solid #E3BBA9;
    color:var(--terracotta);
    border-radius:11px;
    padding:7px 12px;
    font-family:'Cairo';
    font-weight:700;
    font-size:12.5px;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:5px;
    flex-shrink:0;
  }
  .header-delete-btn:hover{ background:#FBEDE7; }
  .header-delete-btn:focus-visible{ outline:3px solid var(--terracotta); outline-offset:2px; }
  .delete-confirm-bar{
    margin-top:12px;
    background:#FBEDE7;
    border:1.5px solid #E3BBA9;
    border-radius:13px;
    padding:12px 14px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .delete-confirm-bar span{
    font-size:13px;
    color:var(--ink);
    font-weight:600;
  }
  .delete-confirm-actions{
    display:flex;
    gap:8px;
  }
  .btn-tiny{
    flex:1;
    border:none;
    border-radius:9px;
    padding:8px 10px;
    font-family:'Cairo';
    font-weight:700;
    font-size:12.5px;
    cursor:pointer;
  }
  .btn-tiny-ghost{ background:var(--white); color:var(--ink); border:1px solid var(--card-line); }
  .btn-tiny-danger{ background:var(--terracotta); color:var(--white); }
  .btn-tiny:focus-visible{ outline:3px solid var(--olive-deep); outline-offset:2px; }

  /* ---------- Order card with inline "mark done" button (kitchen) ----------
     شريط الطلب الوارد بشاشة المطبخ مقسوم لـ3 أجزاء وظيفية منفصلة:
     1. صورة الوجبة (order-thumb-btn): تفتح تفاصيل الطلب
     2. الجزء الأوسط الطويل (order-info-btn): يُسكِت صوت التنبيه فقط
     3. علامة ✅ (order-done-btn): تُنهي الطلب وتُخفيه من الشاشة */
  .order-card{
    padding:0;
    cursor:default;
    align-items:stretch;
    gap:0;
    overflow:hidden;
  }
  .order-thumb-btn{
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:none;
    border:none;
    padding:14px 10px 14px 0;
    cursor:pointer;
  }
  .order-thumb-btn:focus-visible{ outline:3px solid var(--olive); outline-offset:-3px; }
  .order-info-btn{
    flex:1;
    display:flex;
    align-items:center;
    background:none;
    border:none;
    padding:14px 14px 14px 0;
    cursor:pointer;
    text-align:right;
    min-width:0;
  }
  .order-info-btn:focus-visible{ outline:3px solid var(--olive); outline-offset:-3px; }
  .order-done-btn{
    flex-shrink:0;
    width:54px;
    border:none;
    border-right:1px solid var(--card-line);
    background:#EAF1E3;
    color:var(--olive-deep);
    font-size:20px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .order-done-btn:hover{ background:#DCE6D3; }
  .order-done-btn:focus-visible{ outline:3px solid var(--olive-deep); outline-offset:2px; }

  /* ومض الطلب الوارد الجديد (لم يُسكَت صوته بعد بالضغط على جزئه
     الأوسط): تبديل لون خلفية الشريط بالكامل بفترات متساوية، لجذب
     الانتباه بصريًا بالتوازي مع صوت البيب المتكرر */
  @keyframes order-card-blink{
    0%, 100%{ background-color:var(--card); border-color:var(--card-line); }
    50%{ background-color:#FBEDE7; border-color:#E3A98A; }
  }
  .order-card-new{
    animation:order-card-blink 1s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce){
    .order-card-new{ animation:none; background-color:#FBEDE7; }
  }

  /* ---------- Picker divider between pinned & available sections ---------- */
  .picker-divider{
    border-top:1px solid var(--card-line);
    margin:6px 0 18px;
  }

  /* ---------- Pinned meal X inside picker modal (selected section only) ---------- */
  .meal-grid-item.selected-pinned .meal-grid-photo{
    border-color:var(--olive);
  }
  .meal-grid-x{
    position:absolute;
    top:6px; left:6px;
    width:24px; height:24px;
    border-radius:50%;
    background:var(--terracotta);
    color:var(--white);
    border:2px solid var(--white);
    font-size:12px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    box-shadow:0 2px 6px rgba(0,0,0,0.2);
  }
  .meal-grid-x:focus-visible{ outline:2px solid var(--ink); outline-offset:1px; }

  /* ---------- Ready / pending badges on pinned meals (living room) ---------- */
  .ready-badge{
    font-size:10.5px;
    font-weight:800;
    font-family:'Cairo';
    color:var(--olive-deep);
    background:#DCE6D3;
    border-radius:20px;
    padding:2px 9px;
  }
  .pending-badge{
    font-size:10.5px;
    font-weight:800;
    font-family:'Cairo';
    color:#8A5A1E;
    background:#F3E2C8;
    border-radius:20px;
    padding:2px 9px;
  }
  /* ومض كلمة "قيد التحضير": يدل على أن الطلب أُرسل للمطبخ ولم يُرَدّ
     عليه بعد. يتوقف تلقائيًا (يختفي الشريط نفسه) فور تحوّل الطلب
     لحالة "جاهزة" — لا حاجة لإسكات يدوي لهذا الومض بالذات. */
  @keyframes pending-badge-blink{
    0%, 100%{ opacity:1; }
    50%{ opacity:0.35; }
  }
  .pending-badge-blink{
    animation:pending-badge-blink 1s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce){
    .pending-badge-blink{ animation:none; }
  }

  /* ومض صورة الوجبة عند انتهاء طلبها (status='done') ولم يُسكَت بعد
     بالضغط عليها: تنبيه بصري قوي بالتوازي مع صوت البيب المتكرر، حتى
     يضغط المستخدم على الصورة فيتوقفان معًا ويرجع الوضع لطبيعته. */
  @keyframes pinned-photo-blink{
    0%, 100%{ box-shadow:0 0 0 0 rgba(92,112,72,0); }
    50%{ box-shadow:0 0 0 5px rgba(92,112,72,0.55); }
  }
  .pinned-photo-blink{
    animation:pinned-photo-blink 1s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce){
    .pinned-photo-blink{ animation:none; box-shadow:0 0 0 5px rgba(92,112,72,0.55); }
  }

  /* ---------- Tabs bar (kitchen: orders / shortages) ---------- */
  /* ---------- بانر تنبيه "طلب جديد" (شاشة المطبخ) ----------
     يظهر ثابتًا فوق الصفحة (تحت الهيدر مباشرة، بكل التبويبات) طالما
     هناك طلب وارد واحد على الأقل لم يُسكَت بعد — يعوّض بصريًا عن أي
     فشل بتشغيل الصوت تلقائيًا (قيد من المتصفح نفسه لا يمكن تجاوزه
     بالكامل). الضغط عليه ينقل المستخدم فورًا لتبويب "الطلبات". */
  @keyframes new-order-banner-blink{
    0%, 100%{ background:var(--terracotta); }
    50%{ background:#8B3A2B; }
  }
  .new-order-banner{
    text-align:center;
    color:var(--white);
    font-weight:800;
    font-size:15px;
    font-family:'Cairo';
    padding:10px;
    cursor:pointer;
    animation:new-order-banner-blink 0.8s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce){
    .new-order-banner{ animation:none; background:var(--terracotta); }
  }

  /* ====================== نموذج تبويبات "ملفات" (Folder Tabs) ======================
     تصميم موحّد قابل لإعادة الاستخدام بكل أنظمة التبويبات بالتطبيق
     (الطلبات/نواقص، تسجيل الدخول، تصنيف الأصناف، فترات اليوم بالمنزل):
     التبويب النشط يطفو للأمام (خلفية بيضاء بارزة، حافة سفلية مدمجة
     بالمحتوى الذي تحته)، وبقية التبويبات تبدو "بالخلف" (خلفية باهتة،
     أصغر، منخفضة قليلاً) — يحاكي شكل تبويبات الملفات بأنظمة التشغيل. */
  .tabs-bar{
    display:flex;
    gap:4px;
    padding:0 14px;
    background:var(--card);
    border-bottom:1.5px solid var(--card-line);
    position:relative;
    z-index:1;
  }
  .tab-btn{
    flex:1;
    background:var(--card);
    border:1.5px solid var(--card-line);
    border-bottom:none;
    cursor:pointer;
    font-family:'Cairo';
    font-weight:700;
    font-size:13.5px;
    color:var(--ink-soft);
    padding:10px 6px 9px;
    border-radius:14px 14px 0 0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin-top:6px;
    transition:background .15s ease, color .15s ease, margin-top .15s ease, padding .15s ease;
    position:relative;
  }
  .tab-btn.active{
    background:var(--bg);
    color:var(--ink);
    border-color:var(--card-line);
    margin-top:0;
    padding-top:13px;
    padding-bottom:11px;
    z-index:2;
    /* الحافة السفلية تندمج بصريًا مع المحتوى تحت التبويب (نفس خلفية
       الصفحة)، فيبدو التبويب النشط متّصلًا بمحتواه بلا أي خط فاصل */
    box-shadow:0 2px 0 var(--bg);
  }
  .tab-btn:focus-visible{ outline:3px solid var(--olive); outline-offset:2px; }

  .tab-badge{
    background:var(--olive);
    color:var(--white);
    font-size:11px;
    font-weight:800;
    min-width:20px;
    height:20px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 5px;
  }
  .tab-badge-warn{
    background:var(--terracotta);
  }

  /* ---------- Pantry / shortages list (kitchen) ---------- */
  .pantry-list{
    display:flex;
    flex-direction:column;
    gap:9px;
  }
  .pantry-row{
    display:flex;
    align-items:center;
    gap:12px;
    background:var(--card);
    border:1px solid var(--card-line);
    border-radius:14px;
    padding:11px 13px;
    transition:border-color .15s ease, background .15s ease;
  }
  .pantry-row.is-short{
    background:#FBEDE7;
    border-color:#E3BBA9;
  }
  .pantry-check{
    width:26px; height:26px;
    border-radius:8px;
    border:2px solid var(--card-line);
    background:var(--white);
    color:var(--white);
    font-size:14px;
    font-weight:900;
    cursor:pointer;
    flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .pantry-row.is-short .pantry-check{
    background:var(--terracotta);
    border-color:var(--terracotta);
  }
  .pantry-check:focus-visible{ outline:3px solid var(--olive); outline-offset:2px; }
  .pantry-thumb{
    width:38px; height:38px;
    border-radius:10px;
    background:var(--white);
    border:1px solid var(--card-line);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
    font-size:17px;
    flex-shrink:0;
  }
  .pantry-thumb img{ width:100%; height:100%; object-fit:cover; }
  .pantry-name{
    flex:1;
    font-family:'Cairo';
    font-weight:700;
    font-size:14.5px;
    color:var(--ink);
  }

  .pantry-qty{
    flex-shrink:0;
  }
  .pantry-qty-input{
    width:54px;
    border:1.5px solid var(--terracotta);
    background:var(--white);
    border-radius:9px;
    padding:7px 8px;
    font-size:14px;
    text-align:center;
    font-family:'Tajawal';
    color:var(--ink);
  }
  .pantry-qty-input:focus{ outline:none; box-shadow:0 0 0 3px rgba(181,81,46,0.15); }

  /* ---------- Pantry edit list (inside add/edit item modal) ---------- */
  .pantry-edit-list{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .pantry-edit-row{
    display:flex;
    align-items:center;
    gap:11px;
    background:var(--white);
    border:1px solid var(--card-line);
    border-radius:13px;
    padding:8px 10px;
  }
  .pantry-edit-thumb{
    width:38px; height:38px;
    border-radius:10px;
    background:var(--card);
    border:1.5px solid var(--card-line);
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
    font-size:16px;
    flex-shrink:0;
    padding:0;
  }
  .pantry-edit-thumb:hover{ border-color:var(--olive); }
  .pantry-edit-thumb:focus-visible{ outline:3px solid var(--olive); outline-offset:2px; }
  .pantry-edit-thumb img{ width:100%; height:100%; object-fit:cover; }
  .pantry-edit-name{
    flex:1;
    font-size:14px;
    font-weight:600;
    color:var(--ink);
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .pantry-edit-category{
    font-size:11px;
    font-weight:500;
    color:var(--ink-soft);
  }

  /* ---------- شريط تبويبات أقسام كاتالوج المطبخ ----------
     صف أفقي موحّد بكل أحجام الشاشة (موبايل وديسكتوب)، فوق شبكة تصفّح
     الأصناف مباشرة. يلتف لو احتاج (flex-wrap)، فلا تمرير أفقي مخفي. */
  /* ===== تبويبات أصناف النواقص — نمط الطبقات (المحدد أمام، الباقي خلفه) ===== */
  .pantry-category-tabs{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:4px;
    margin-bottom:0;
    padding:0 6px;
    background:var(--card);
    border-radius:0;
    border:none;
    border-bottom:1.5px solid var(--card-line);
    position:relative;
    z-index:1;
    scrollbar-width:none;
  }
  .pantry-category-tabs::-webkit-scrollbar{ display:none; }
  .pantry-category-tab{
    border:1.5px solid var(--card-line);
    border-bottom:none;
    background:var(--card);
    color:var(--ink-soft);
    border-radius:12px 12px 0 0;
    padding:9px 14px 8px;
    font-size:12.5px;
    font-family:'Cairo';
    font-weight:700;
    cursor:pointer;
    white-space:nowrap;
    flex-shrink:0;
    margin-top:6px;
    position:relative;
    transition:background .15s ease, color .15s ease, margin-top .15s ease, padding .15s ease;
  }
  .pantry-category-tab:hover{
    background:var(--bg);
    color:var(--ink);
  }
  .pantry-category-tab.active{
    background:var(--bg);
    border-color:var(--card-line);
    color:var(--ink);
    margin-top:0;
    padding-top:12px;
    padding-bottom:10px;
    z-index:2;
    box-shadow:0 2px 0 var(--bg);
  }
  /* حقل تعديل اسم التبويب (يظهر بدبل كليك) */
  .pantry-category-tab input.tab-rename-input{
    border:none;
    background:transparent;
    font-family:'Cairo';
    font-weight:700;
    font-size:12.5px;
    color:var(--ink);
    outline:2px solid var(--olive);
    border-radius:4px;
    width:70px;
    text-align:center;
    padding:0 2px;
  }

  /* زر إضافة صنف جديد للكاتالوج: آخر عنصر بصف تبويبات التصنيف (بعد
     "الكل" مباشرة)، بحجم مصغّر ودائري لتمييزه بصريًا عن تبويبات
     التصفية المجاورة له (مستطيلة الشكل) باعتباره فعل "إضافة" لا تصفية. */
  .pantry-category-add-btn{
    width:30px;
    height:30px;
    padding:0;
    border-radius:50%;
    font-size:15px;
    font-weight:800;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }

  .pantry-category-select{
    width:100%;
    padding:11px 14px;
    border:1.5px solid var(--card-line);
    border-radius:13px;
    background:var(--white);
    color:var(--ink);
    font-size:14px;
    font-family:inherit;
  }
  .pantry-category-select:focus{ outline:none; border-color:var(--olive); }

  /* ====================== شاشة "نواقص" الجديدة (متجر + سلة تسوق) ======================
     تصفّح الأصناف يشبه متجرًا: تبويبات تصنيف أفقية فوق شبكة صور مربعة
     بدون إطار، تحديد متعدد، ثم نقل المحدد دفعة واحدة لسلة تسوق منفصلة
     (نافذة منبثقة). موحّد بكل الأحجام — لا فرق بين الموبايل والديسكتوب
     عدا عدد أعمدة الشبكة الذي يتمدد تلقائيًا حسب العرض المتاح. */

  .grocery-store-bar{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
  }
  .grocery-cart-btn{
    position:relative;
    width:46px; height:46px;
    border-radius:50%;
    border:1.5px solid var(--card-line);
    background:var(--white);
    font-size:20px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    flex-shrink:0;
  }
  .grocery-cart-btn:hover{ background:var(--card); }
  .grocery-cart-badge{
    position:absolute;
    top:-4px; left:-4px;
    min-width:20px; height:20px;
    border-radius:10px;
    background:var(--terracotta);
    color:var(--white);
    font-size:11px;
    font-weight:800;
    display:flex; align-items:center; justify-content:center;
    padding:0 4px;
    box-shadow:0 1px 3px rgba(46,33,24,0.25);
  }
  .grocery-add-to-cart-btn{
    flex:1;
  }

  /* شبكة تصفّح الأصناف: عدد الأعمدة يتكيّف مع عرض الشاشة، فتبقى صورة
     الصنف بحجم مريح بصريًا على كل الأحجام (بدل تثبيت 6 أعمدة دائمًا،
     ما كان يجعل الصورة كبيرة جدًا على الموبايل واللابتوب). 4 أعمدة
     بالموبايل، 5 بالتابلت/اللابتوب، و6 فقط بالكمبيوتر الواسع. مقاس
     الصورة مربع (1:1) ويُحدَّد تلقائيًا كنتيجة لقسمة العرض المتاح على
     عدد الأعمدة الحالي — لا مقاس ثابت بالبكسل، ولا إطار أو خلفية
     بطّاقة حول الصورة. الاسم يظهر تحتها. */
  .grocery-items-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:10px 8px;
  }

  /* أزرار ＋ و ✏️ في أسفل شبكة النواقص */
  .pantry-bottom-actions{
    grid-column: 1 / -1;
    display:flex;
    gap:10px;
    justify-content:center;
    padding:10px 0 4px;
  }
  .pantry-bottom-btn{
    width:48px; height:48px;
    border-radius:50%;
    border:1.5px solid var(--card-line);
    font-size:20px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    transition:transform .12s ease, opacity .12s ease;
  }
  .pantry-bottom-btn:active{ transform:scale(0.92); }
  .pantry-bottom-add{
    background:var(--olive);
    color:#fff;
    border-color:var(--olive);
  }
  .modal-header-delete-btn{
    background:none;
    border:none;
    font-size:18px;
    cursor:pointer;
    padding:4px 6px;
    border-radius:8px;
    opacity:0.7;
    transition:opacity .15s;
    margin-right:auto;
  }
  .modal-header-delete-btn:hover{ opacity:1; }

  .pantry-bottom-reset{
    background:var(--sand);
    color:var(--olive);
    font-size:18px;
    font-weight:900;
  }
  .pantry-bottom-reset:active{ transform:scale(0.92); }
    background:var(--white);
    color:var(--ink);
  }
  .pantry-bottom-edit.disabled{
    opacity:0.35;
    cursor:not-allowed;
    background:var(--card);
    color:var(--ink-soft);
  }

  @media (min-width: 481px) and (max-width: 1024px){
    .grocery-items-grid{
      grid-template-columns:repeat(5, 1fr);
    }
  }
  @media (min-width: 1025px){
    .grocery-items-grid{
      grid-template-columns:repeat(6, 1fr);
    }
  }
  .grocery-item-cell{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    background:transparent;
    border:none;
    padding:0;
    cursor:pointer;
    width:100%;
  }
  .grocery-item-photo{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
    border-radius:14px;
    background:var(--card);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
    font-size:22px;
    transition:transform .12s ease, box-shadow .12s ease;
  }
  .grocery-item-photo img{
    width:100%; height:100%;
    object-fit:cover;
  }
  .grocery-item-cell.picked .grocery-item-photo{
    box-shadow:0 0 0 3px var(--olive);
    transform:scale(0.96);
  }
  .grocery-item-check{
    position:absolute;
    top:4px; left:4px;
    width:18px; height:18px;
    border-radius:50%;
    background:var(--olive);
    color:var(--white);
    font-size:11px;
    font-weight:800;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 1px 3px rgba(46,33,24,0.25);
  }
  .grocery-item-name{
    font-size:10px;
    font-weight:700;
    color:var(--ink);
    text-align:center;
    line-height:1.25;
    overflow-wrap:break-word;
    word-break:break-word;
  }

  /* ---------- قلم مائي على صورة الصنف ---------- */
  .grocery-item-edit-overlay{
    position:absolute;
    bottom:4px; right:4px;
    width:22px; height:22px;
    border-radius:50%;
    background:rgba(255,255,255,0.55);
    font-size:11px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    opacity:0;
    transition:opacity .2s ease;
    box-shadow:0 1px 3px rgba(0,0,0,0.12);
    z-index:2;
    backdrop-filter:blur(2px);
  }
  .grocery-item-cell:hover .grocery-item-edit-overlay,
  .grocery-item-cell:focus-within .grocery-item-edit-overlay{
    opacity:1;
  }
  @media (hover:none){
    .grocery-item-edit-overlay{ opacity:0.6; }
  }

  /* ---------- نافذة الفرز (Sorter) ---------- */
  .sorter-assigned-list,
  .sorter-available-list{
    display:grid;
    grid-template-columns:repeat(auto-fill, 72px);
    gap:8px;
    margin-top:6px;
    max-height:200px;
    overflow-y:auto;
    padding:4px 2px;
    justify-content:start;
  }
  .sorter-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    position:relative;
    cursor:pointer;
  }
  .sorter-thumb{
    width:72px !important;
    height:72px !important;
    max-width:72px !important;
    max-height:72px !important;
    border-radius:10px;
    background:var(--card);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
    font-size:14px;
    flex-shrink:0;
  }
  .sorter-thumb img{
    width:72px !important;
    height:72px !important;
    object-fit:cover;
  }
  .sorter-name{
    font-size:10px;
    font-weight:700;
    color:var(--ink);
    text-align:center;
    line-height:1.2;
  }
  .sorter-item--assigned .sorter-thumb{
    box-shadow:0 0 0 2px var(--olive);
  }
  .sorter-item--available .sorter-thumb{
    opacity:0.7;
    transition:opacity .15s;
  }
  .sorter-item--available:hover .sorter-thumb{ opacity:1; }
  .sorter-remove-btn{
    position:absolute;
    top:-6px; left:-6px;
    width:20px; height:20px;
    border-radius:50%;
    background:var(--terracotta);
    color:var(--white);
    border:none;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    line-height:1;
    z-index:2;
  }
  .sorter-empty{
    grid-column:1/-1;
    text-align:center;
    color:var(--ink-soft);
    font-size:13px;
    padding:12px 0;
  }

  /* ---------- نافذة سلة التسوق ---------- */
  .cart-modal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:8px;
  }
  .cart-select-all-btn{
    display:flex;
    align-items:center;
    gap:6px;
    background:transparent;
    border:none;
    color:var(--ink-soft);
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    padding:4px 0;
  }
  .cart-select-all-btn .pantry-check{
    width:20px; height:20px;
    border-radius:50%;
    border:1.5px solid var(--card-line);
    display:flex; align-items:center; justify-content:center;
    font-size:11px;
    color:var(--olive);
    background:var(--white);
  }
  .cart-select-all-btn .pantry-check.checked-style{
    background:var(--olive);
    border-color:var(--olive);
    color:var(--white);
  }
  .cart-modal-body{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .cart-modal-row{
    display:flex;
    align-items:center;
    gap:10px;
    background:#FBEDE7;
    border:1.5px solid #E3BBA9;
    border-radius:12px;
    padding:8px 10px;
    position:relative;
    transition:background .15s ease, border-color .15s ease;
  }
  .cart-modal-row.checked{
    background:#EAF1E3;
    border-color:var(--olive);
  }
  .cart-modal-row .pantry-thumb{
    width:38px; height:38px;
    font-size:16px;
  }
  .cart-modal-row .pantry-name{
    flex:1;
  }
  .cart-modal-row .pantry-qty-input{
    width:48px;
  }
  .cart-remove-x{
    position:static;
    flex-shrink:0;
  }
  .cart-modal-footer{
    flex-wrap:wrap;
  }
  .cart-modal-footer .btn{
    flex:1;
    min-width:120px;
  }

  /* ---------- Kitchen: pinned meals from living room (mark unavailable) ---------- */
  .kitchen-pinned-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:14px 10px;
  }
  .kitchen-pinned-item{
    display:flex; flex-direction:column; align-items:center; gap:5px;
  }
  .kitchen-pinned-photo-btn{
    width:100%;
    aspect-ratio:1/1;
    border-radius:14px;
    background:var(--white);
    border:1.5px solid var(--card-line);
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
    padding:0;
    transition:transform .12s ease, filter .15s ease, border-color .15s ease;
  }
  .kitchen-pinned-photo-btn:active{ transform:scale(0.94); }
  .kitchen-pinned-photo-btn:focus-visible{ outline:3px solid var(--olive); outline-offset:2px; }
  .kitchen-pinned-photo-btn img{ width:100%; height:100%; object-fit:cover; }
  .kitchen-pinned-photo-btn.unavailable{
    border-color:#C9C2B6;
  }
  .kitchen-pinned-photo-btn.unavailable img{
    filter:grayscale(1) brightness(0.85);
  }
  .kitchen-pinned-name{
    font-size:11px;
    font-weight:700;
    font-family:'Cairo';
    text-align:center;
    color:var(--ink);
    line-height:1.25;
  }

  /* ---------- Living room: unavailable meal (grayed + label) ---------- */
  .pinned-photo-btn.unavailable{
    filter:grayscale(1) brightness(0.9);
    cursor:not-allowed;
    opacity:0.85;
  }
  .pinned-photo-btn.unavailable:active{ transform:none; }
  .unavailable-badge{
    font-size:10.5px;
    font-weight:800;
    font-family:'Cairo';
    color:var(--white);
    background:#8A8275;
    border-radius:20px;
    padding:2px 9px;
  }

  /* ---------- Ingredient photo picker modal ---------- */
  .upload-new-row{
    width:100%;
    display:flex;
    align-items:center;
    gap:12px;
    background:var(--white);
    border:1.5px dashed var(--card-line);
    border-radius:14px;
    padding:13px 14px;
    cursor:pointer;
    font-family:'Cairo';
    font-weight:700;
    font-size:14px;
    color:var(--ink);
    margin-bottom:4px;
  }
  .upload-new-row:hover{ border-color:var(--olive); background:#F7F3E9; }
  .upload-new-row:focus-visible{ outline:3px solid var(--olive); outline-offset:2px; }
  .upload-new-icon{
    width:36px; height:36px;
    border-radius:10px;
    background:var(--card);
    display:flex; align-items:center; justify-content:center;
    font-size:17px;
    flex-shrink:0;
  }

  /* ---------- Order timing toggle (schedule / custom time) ---------- */
  .timing-toggle-row{
    display:flex;
    gap:8px;
  }
  .timing-toggle-btn{
    flex:1;
    background:var(--white);
    border:1.5px solid var(--card-line);
    border-radius:12px;
    padding:10px 8px;
    font-family:'Cairo';
    font-weight:700;
    font-size:13px;
    color:var(--ink-soft);
    cursor:pointer;
    transition:background .15s ease, border-color .15s ease, color .15s ease;
  }
  .timing-toggle-btn.active{
    background:var(--olive);
    border-color:var(--olive);
    color:var(--white);
  }
  .timing-toggle-btn:focus-visible{ outline:3px solid var(--olive-deep); outline-offset:2px; }

/* ---------- إضافات خاصة بنسخة PHP ---------- */
.loading-spinner{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:60px 20px;
  color:var(--ink-soft);
  font-family:'Cairo';
  font-weight:700;
  gap:10px;
}
.loading-spinner::before{
  content:'';
  width:18px; height:18px;
  border:3px solid var(--card-line);
  border-top-color:var(--olive);
  border-radius:50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

.pinned-photo-btn:disabled{
  cursor:not-allowed;
}

/* تأكد أن <a> بشكل choice-btn يبدو ويتصرف كزر (التنقل بين الصفحات الحقيقية بدل SPA) */
a.choice-btn{
  text-decoration:none;
  display:flex;
}

  /* ===== Qty select dropdown ===== */
  .pantry-qty-select{
    border:1.5px solid var(--card-line);
    background:var(--white);
    border-radius:10px;
    padding:6px 10px;
    font-family:'Cairo';
    font-size:13px;
    font-weight:700;
    color:var(--ink);
    cursor:pointer;
    min-width:64px;
    text-align:center;
  }
  .pantry-qty-select:focus{ outline:none; border-color:var(--olive); }

  /* ===== قائمة البريد المحفوظة ===== */
  .cart-email-saved-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:8px 10px;
    border:1.5px solid var(--card-line);
    border-radius:10px;
    margin-bottom:6px;
    background:var(--white);
  }
  .cart-email-saved-label{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    font-family:'Tajawal';
    color:var(--ink);
    cursor:pointer;
    flex:1;
  }
  .cart-email-checkbox{
    width:16px; height:16px;
    cursor:pointer;
    accent-color:var(--olive);
  }
  .cart-email-delete-btn{
    background:none;
    border:none;
    color:var(--terracotta);
    font-size:14px;
    cursor:pointer;
    padding:2px 6px;
    border-radius:6px;
    flex-shrink:0;
  }
  .cart-email-delete-btn:hover{ background:var(--card); }

  /* ===== الوجبة المستبعدة من طرف المنزل ===== */
  .pinned-photo-btn.excluded-home{
    opacity:0.45;
    filter:grayscale(80%);
    position:relative;
  }
  .excluded-home-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,0.45);
    color:#fff;
    font-size:11px;
    font-weight:900;
    font-family:'Cairo';
    border-radius:inherit;
    pointer-events:none;
  }
  .excluded-home-badge{
    display:inline-block;
    background:#6b7280;
    color:#fff;
    font-size:10px;
    font-weight:700;
    font-family:'Cairo';
    padding:2px 7px;
    border-radius:20px;
    margin-top:2px;
  }
  /* زر إيقاف/تشغيل الوجبة */
  .exclude-toggle-btn{
    display:block;
    margin:4px auto 0;
    background:none;
    border:1.5px solid var(--card-line);
    border-radius:20px;
    padding:2px 8px;
    font-size:13px;
    cursor:pointer;
    color:var(--ink-soft);
    transition:background .15s, color .15s;
  }
  .exclude-toggle-btn:hover{ background:var(--card); color:var(--ink); }
  .exclude-toggle-btn.active{
    background:#6b7280;
    border-color:#6b7280;
    color:#fff;
  }

  /* ===== استبعاد الفترة كاملة ===== */
  .living-period-tab.period-excluded .tab-label-text{
    opacity:0.5;
    text-decoration:line-through;
  }
  .period-exclude-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:18px; height:18px;
    font-size:11px;
    background:transparent;
    border:none;
    cursor:pointer;
    margin-right:4px;
    border-radius:50%;
    opacity:0.4;
    vertical-align:middle;
    transition:opacity .15s, background .15s;
  }
  .period-exclude-btn:hover{ opacity:1; background:rgba(0,0,0,0.08); }
  .period-exclude-btn.active{
    opacity:1;
    color:var(--terracotta);
  }
  .living-period-tab.period-excluded{
    opacity:0.6;
  }
  .period-excluded-banner{
    background:#fef3cd;
    color:#856404;
    font-size:12px;
    font-weight:700;
    font-family:'Cairo';
    padding:8px 14px;
    border-radius:10px;
    margin:8px 14px;
    text-align:center;
  }

  /* ===== نافذة إعدادات الفترة ===== */
  .period-toggle-row{
    display:flex; gap:10px;
  }
  .period-toggle-btn{
    flex:1; padding:12px;
    border:2px solid var(--card-line);
    border-radius:14px;
    font-family:'Cairo'; font-size:14px; font-weight:700;
    background:var(--white); color:var(--ink-soft);
    cursor:pointer; transition:all .15s;
  }
  .period-toggle-btn.active{
    border-color:var(--olive); background:var(--olive);
    color:#fff;
  }
  .period-scope-row{
    display:flex; gap:8px; margin-bottom:12px;
  }
  .period-scope-btn{
    flex:1; padding:9px;
    border:1.5px solid var(--card-line);
    border-radius:12px;
    font-family:'Cairo'; font-size:13px; font-weight:700;
    background:var(--white); color:var(--ink-soft);
    cursor:pointer; transition:all .15s;
  }
  .period-scope-btn.active{
    border-color:var(--olive); color:var(--olive);
    background:rgba(92,112,72,0.08);
  }
  .period-days-grid{
    display:flex; flex-direction:column; gap:6px;
  }
  .period-day-row{
    display:flex; align-items:center; gap:10px;
    padding:10px 14px;
    border:1.5px solid var(--card-line);
    border-radius:12px;
    cursor:pointer;
    background:var(--white);
  }
  .period-day-row input[type="checkbox"]{
    width:18px; height:18px;
    accent-color:var(--olive);
    cursor:pointer;
  }
  .period-day-label{
    font-family:'Cairo'; font-size:14px; font-weight:700;
    color:var(--ink);
  }

  /* ===== Radio style لإعدادات الفترة ===== */
  .ps-radio-row{
    display:flex;
    gap:6px;
    align-items:center;
    flex-wrap:wrap;
  }
  .ps-radio-opt{
    display:flex;
    align-items:center;
    gap:6px;
    padding:9px 16px;
    border:1.5px solid var(--card-line);
    border-radius:20px;
    font-family:'Cairo';
    font-size:13px;
    font-weight:700;
    color:var(--ink-soft);
    cursor:pointer;
    transition:all .15s;
    white-space:nowrap;
  }
  .ps-radio-opt input[type="radio"]{
    accent-color:var(--olive);
    width:15px; height:15px;
    cursor:pointer;
  }
  .ps-radio-opt.active{
    border-color:var(--olive);
    color:var(--olive);
    background:rgba(92,112,72,0.07);
  }
  /* «إيقاف اليوم» — زر تبديل: أخضر = غير مفعّل، أحمر = مفعّل (موقوف) */
  .ps-radio-opt.ps-pause{
    border-color:#7fc79b;
    color:#2e7d4f;
    background:#eafaf1;
  }
  .ps-radio-opt.ps-pause.active{
    border-color:#c0392b;
    color:#fff;
    background:#c0392b;
  }
  /* زر «إيقاف اليوم» معطّل (رمادي) عند اختيار «غير مفعّل» */
  .ps-radio-opt.ps-pause:disabled{
    border-color:var(--card-line);
    color:#b3b3b3;
    background:#f0f0f0;
    cursor:not-allowed;
    opacity:.7;
  }
  /* تجميد كل الخيارات أسفل الإرسال عند تفعيل «إيقاف اليوم» */
  .ps-fields-paused{
    opacity:0.4;
    pointer-events:none;
  }
  /* أيام الأسبوع رمادية عند "الكل" */
  .ps-days-disabled{
    opacity:0.35;
    pointer-events:none;
  }

  /* ===== أيام الأسبوع — صفان ===== */
  .ps-days-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:6px;
  }
  .ps-day-cell{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    padding:8px 4px;
    border:1.5px solid var(--card-line);
    border-radius:12px;
    cursor:pointer;
    font-family:'Cairo';
    font-size:11px;
    font-weight:700;
    color:var(--ink-soft);
    background:var(--white);
    text-align:center;
    transition:border-color .15s, color .15s;
  }
  .ps-day-cell:has(input:checked){
    border-color:var(--olive);
    color:var(--olive);
    background:rgba(92,112,72,0.07);
  }
  .ps-day-cell input[type="checkbox"]{
    accent-color:var(--olive);
    width:16px; height:16px;
  }

  /* ===== إعدادات الفترة — topbar وأيام ===== */
  /* النافذة في المنتصف */
  .modal-overlay:has(.ps-modal-topbar){
    align-items:flex-start;
    padding-top:5vh;
    padding-bottom:5vh;
    overflow-y:auto;
  }
  .ps-modal-topbar{
    display:flex;
    align-items:center;
    padding:12px 16px 6px;
    border-radius:26px 26px 0 0;
  }
  .ps-close-x{
    width:32px; height:32px;
    border-radius:50%;
    border:1.5px solid var(--card-line);
    background:var(--white);
    color:var(--ink-soft);
    font-size:14px;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    margin-left:auto;
  }
  .ps-close-x:hover{ background:var(--card); color:var(--ink); }

  /* أيام الأسبوع — صفان متساويان */
  .ps-days-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:6px;
    transition:opacity .2s;
  }
  .ps-days-grid.ps-days-disabled{
    opacity:0.3;
    pointer-events:none;
  }
  .ps-day-cell{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:5px;
    padding:8px 6px;
    border:1.5px solid var(--card-line);
    border-radius:10px;
    cursor:pointer;
    font-family:'Cairo';
    font-size:11.5px;
    font-weight:700;
    color:var(--ink-soft);
    background:var(--white);
    white-space:nowrap;
    overflow:hidden;
  }
  .ps-day-cell input[type="checkbox"]{
    flex-shrink:0;
    accent-color:var(--olive);
    width:15px; height:15px;
    cursor:pointer;
  }
  .ps-day-cell:has(input:checked){
    border-color:var(--olive);
    color:var(--olive);
    background:rgba(92,112,72,0.08);
  }

  /* ===== زر إعدادات التبويب ⚙️ ===== */
  .period-settings-btn{
    background:none;
    border:none;
    font-size:12px;
    cursor:pointer;
    padding:0;
    margin-right:8px;
    color:#1a1a1a;
    opacity:0.75;
    vertical-align:middle;
    line-height:1;
    flex-shrink:0;
  }
  .period-settings-btn:hover{ opacity:1; }
  @media (min-width:768px){
    .period-settings-btn{ font-size:24px; margin-right:10px; }
  }

  /* ===== بطاقة الطلب الجديدة ===== */
  .order-card-new2{
    display:flex;
    align-items:stretch;
    gap:0;
    background:var(--white);
    border:1.5px solid var(--card-line);
    border-radius:16px;
    margin-bottom:12px;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(46,33,24,0.06);
    transition:border-color .2s;
  }
  .order-card-new2.order-card-ringing{
    border-color:var(--terracotta);
    animation: ringPulse 1.5s infinite;
  }
  @keyframes ringPulse{
    0%,100%{ box-shadow:0 2px 8px rgba(181,85,30,0.15); }
    50%{ box-shadow:0 4px 20px rgba(181,85,30,0.4); }
  }
  .order-card-left{
    flex:1;
    display:flex;
    flex-direction:column;
    padding:14px;
    gap:6px;
  }
  .order-card-photo{
    width:100%;
    height:130px;
    border-radius:12px;
    overflow:hidden;
    background:var(--card);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .order-card-name{
    font-size:16px;
    font-weight:800;
    color:var(--ink);
    font-family:'Cairo';
  }
  .order-card-note{
    font-size:12px;
    color:var(--terracotta);
    font-weight:700;
    background:rgba(181,85,30,0.08);
    padding:4px 8px;
    border-radius:8px;
  }
  .order-card-meta{
    font-size:11px;
    color:var(--ink-soft);
  }
  .order-card-right{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:14px 10px;
    border-right:1.5px solid var(--card-line);
    min-width:90px;
    background:var(--card);
  }
  .order-bell-btn{
    width:44px; height:44px;
    border-radius:50%;
    border:1.5px solid var(--card-line);
    background:var(--white);
    font-size:20px;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .15s;
  }
  .order-bell-btn.muted{ background:#f0f0f0; opacity:0.5; }
  .order-bell-btn:not(.muted):hover{ background:var(--card); }
  .order-accept-btn{
    width:100%;
    padding:8px 6px;
    border-radius:10px;
    border:none;
    background:var(--olive);
    color:#fff;
    font-family:'Cairo';
    font-size:11px;
    font-weight:700;
    cursor:pointer;
    text-align:center;
  }
  .order-finish-btn{
    width:100%;
    padding:8px 6px;
    border-radius:10px;
    border:none;
    background:var(--ink);
    color:#fff;
    font-family:'Cairo';
    font-size:11px;
    font-weight:700;
    cursor:pointer;
    text-align:center;
  }

  /* ===== التبويبات الفرعية في الطلبات (صغيرة، أقصى اليمين) ===== */
  .orders-sub-tab{
    padding:5px 12px;
    font-family:'Cairo';
    font-size:12px;
    font-weight:700;
    border:1.5px solid var(--card-line);
    border-radius:20px;
    background:var(--white);
    color:var(--ink-soft);
    cursor:pointer;
    transition:all .15s;
    white-space:nowrap;
  }
  .orders-sub-tab.active{
    background:var(--olive);
    border-color:var(--olive);
    color:#fff;
  }
  .orders-sub-tab:not(.active):hover{
    background:var(--card);
    color:var(--ink);
  }
  /* ===== جرس المطبخ → المنزل ===== */
  .kitchen-bell-btn{
    flex-shrink:0;
    background:none;
    border:1.5px solid var(--card-line);
    border-radius:50%;
    width:34px; height:34px;
    font-size:16px;
    cursor:pointer;
    margin:6px 4px 0;
    display:flex; align-items:center; justify-content:center;
    transition:transform .15s;
  }
  .kitchen-bell-btn:active{ transform:scale(0.9); }
  .kitchen-bell-btn.bell-ringing{
    animation:bellFlash 0.8s infinite;
    border-color:var(--terracotta);
  }
  @keyframes bellFlash{
    0%,100%{ background:var(--card); box-shadow:none; }
    50%{ background:var(--terracotta); box-shadow:0 0 10px var(--terracotta); }
  }

  .kitchen-bell-overlay{
    position:fixed;
    inset:0;
    display:flex; align-items:center; justify-content:center;
    z-index:9999;
    cursor:pointer;
  }
  /* الأحمر فقط عبر الكلاس الصريح (المطبخ) */
  .bell-overlay-red{
    animation:bellScreenFlash 0.7s infinite;
  }
  @keyframes bellScreenFlash{
    0%,100%{ background:rgba(200,60,40,0.92); }
    50%{ background:rgba(120,20,10,0.96); }
  }
  .kitchen-bell-big{
    background:none;
    border:none;
    padding:0;
    display:flex; flex-direction:column; align-items:center; gap:18px;
    cursor:pointer;
    width:100%; height:100%;
    justify-content:center;
  }
  .kitchen-bell-icon{
    font-size:180px;
    animation:bellShake 0.6s infinite;
    filter:drop-shadow(0 6px 20px rgba(0,0,0,0.4));
  }
  .kitchen-bell-text{ font-size:32px; font-weight:900; font-family:'Cairo'; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,0.4); }
  .kitchen-bell-hint{ font-size:16px; color:rgba(255,255,255,0.9); font-weight:700; }
  @keyframes bellShake{
    0%,100%{ transform:rotate(0); }
    15%{ transform:rotate(-12deg); }
    30%{ transform:rotate(12deg); }
    45%{ transform:rotate(-10deg); }
    60%{ transform:rotate(10deg); }
    75%{ transform:rotate(-6deg); }
  }

  /* رابط نسيت رقم البيت */
  .forgot-code-link{
    text-align:center;
    font-size:13px;
    color:var(--olive, #5a7d4f);
    cursor:pointer;
    margin-top:12px;
    text-decoration:underline;
  }
  .forgot-code-link:hover{ color:var(--terracotta, #c8562a); }

  /* ===== وجبات اليوم المكتملة (رمادية) ===== */
  .completed-today-list{
    margin-top:20px;
    padding-top:14px;
    border-top:1.5px dashed var(--card-line);
  }
  .completed-today-title{
    font-size:13px;
    font-weight:800;
    color:var(--ink-soft);
    margin-bottom:10px;
    font-family:'Cairo';
  }
  .completed-today-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:6px 8px;
    margin-bottom:6px;
    background:#f0f0f0;
    border-radius:12px;
  }
  .completed-today-photo{
    width:44px; height:44px;
    border-radius:8px;
    overflow:hidden;
    background:#e2e2e2;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    filter:grayscale(1);
    opacity:0.55;
  }
  .completed-today-photo img{
    width:100%; height:100%; object-fit:cover;
  }
  .completed-today-info{
    display:flex; flex-direction:column; gap:2px; flex:1;
  }
  .completed-today-name{
    font-size:14px; font-weight:800; color:#3a3a3a;
  }
  .completed-today-meta{
    font-size:11.5px; color:#6b6b6b; font-weight:600;
  }
  .completed-today-check{
    color:#5a8a3f; font-size:18px; font-weight:900; flex-shrink:0;
  }
  /* ===== مسافة علوية للهيدر على الموبايل (بعيداً عن شريط المتصفح) ===== */
  @media (max-width: 767px){
    .app-header{
      padding-top:56px;
      min-height:96px;
    }
    /* تكبير عناصر الهيدر لسهولة اللمس */
    .back-btn,
    .grocery-cart-btn,
    .lang-flag-btn,
    .kitchen-bell-btn,
    .emergency-mute-btn{
      min-width:40px;
      min-height:40px;
      font-size:18px;
    }
  }

  /* ===== زر تبديل اللغة الواحد ===== */
  .lang-toggle-btn{
    background:var(--card);
    border:1.5px solid var(--card-line);
    border-radius:10px;
    min-width:38px;
    height:34px;
    font-size:13px;
    font-weight:800;
    font-family:'Cairo';
    color:var(--olive, #5a7d4f);
    cursor:pointer;
    flex-shrink:0;
    transition:transform .15s;
  }
  .lang-toggle-btn:active{ transform:scale(0.92); }
  @media (max-width: 767px){
    .lang-toggle-btn{ min-width:44px; height:40px; font-size:15px; }
  }

  /* أيقونة العربة كعنوان تبويب */
  .tab-cart-icon{
    font-size:20px;
    line-height:1;
  }

  /* منع تغيّر لون الروابط بعد الزيارة (المطبخ/المنزل) */
  .choice-btn,
  .choice-btn:link,
  .choice-btn:visited,
  .choice-btn:hover,
  .choice-btn:active,
  .choice-btn * ,
  .choice-btn:visited *{
    color:inherit !important;
  }

  /* صف زر اللغة في صفحة التسجيل */
  .home-lang-row{
    display:flex;
    justify-content:flex-start;
    margin-bottom:8px;
  }

  /* تثبيت صفحة التسجيل عند ظهور لوحة المفاتيح على الموبايل */
  @media (max-width: 767px){
    #root:has(.home-code-panel){
      min-height:100dvh;
    }
    .home-wrap{
      justify-content:flex-start;
      padding-top:60px;
      scroll-margin-top:0;
    }
  }

  /* على الموبايل: النوافذ تبدأ من الأعلى لإفساح مكان للوحة المفاتيح */
  @media (max-width: 767px){
    .modal-overlay{
      align-items:flex-start;
      padding-top:8px;
      padding-bottom:0;
    }
    .modal-sheet{
      max-height:75vh;
    }
    /* عند ظهور الكيبورد: النافذة تبقى ملتصقة بالأعلى ومرئية */
    .modal-body{
      overflow-y:auto;
      -webkit-overflow-scrolling:touch;
    }
  }
  /* ===== صندوق الأجراس في الصفحة الرئيسية ===== */
  .bells-box{
    border:2px solid var(--card-line);
    border-radius:16px;
    padding:20px 18px 18px;
    /* رفع إطار الجرس: تقليص المسافة بينه وبين إطار المنزل إلى النصف
       (المسافة = gap الأم 34px + margin؛ 34 + (−11) = 23px ≈ نصف 46px) */
    margin-top:-11px;
    max-width:520px;
    margin-left:auto;
    margin-right:auto;
    width:100%;
    overflow:visible;
  }
  .bells-legend{
    padding:0 12px;
    font-size:16px;
    font-weight:800;
    font-family:'Cairo';
    color:var(--olive, #5a7d4f);
  }
  .bells-row{
    display:flex;
    justify-content:space-around;
    align-items:flex-start;
    gap:16px;
    padding-top:6px;
  }
  .bell-item{
    background:none;
    border:none;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding:6px 16px 8px;
    border-radius:12px;
    transition:transform .15s, background .15s;
    flex:1;
    overflow:visible;
  }
  .bell-item:active{ transform:scale(0.92); }
  .bell-item:hover{ background:rgba(0,0,0,0.03); }
  .bell-icon{
    font-size:56px;
    line-height:1.3;
    display:block;
    overflow:visible;
  }
  .bell-blue .bell-icon{
    filter:hue-rotate(200deg) saturate(3) brightness(0.9);
  }
  .bell-green .bell-icon{
    filter:hue-rotate(80deg) saturate(2.5) brightness(0.9);
  }
  .bell-label{
    font-size:13px;
    font-weight:700;
    color:var(--ink);
    font-family:'Cairo';
  }
  .bell-blue .bell-label{ color:#2563c9; }
  .bell-green .bell-label{ color:#3a8a3f; }

  /* ألوان خلفية التنبيه حسب مصدر الجرس */
  .bell-overlay-blue{
    animation:bellFlashBlue 0.7s infinite;
  }
  @keyframes bellFlashBlue{
    0%,100%{ background:rgba(40,90,200,0.92); }
    50%{ background:rgba(10,40,120,0.96); }
  }
  .bell-overlay-green{
    animation:bellFlashGreen 0.7s infinite;
  }
  @keyframes bellFlashGreen{
    0%,100%{ background:rgba(40,160,60,0.92); }
    50%{ background:rgba(10,90,20,0.96); }
  }

/* ===================================================================
   دليل الاستخدام (Onboarding)
   =================================================================== */
.onboarding-overlay{
  position:fixed; inset:0; z-index:10000;
  display:flex; align-items:center; justify-content:center;
  padding:18px;
  background:rgba(46,33,24,0.55);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  animation:onbFade .25s ease;
}
@keyframes onbFade{ from{ opacity:0 } to{ opacity:1 } }
body.onboarding-open{ overflow:hidden; }

.onb-card{
  position:relative;
  width:100%; max-width:420px;
  background:var(--white,#fffdf9);
  border-radius:22px;
  box-shadow:0 18px 50px rgba(46,33,24,0.32);
  padding:22px 22px 18px;
  text-align:center;
  animation:onbPop .3s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes onbPop{ from{ transform:translateY(14px) scale(.96); opacity:0 } to{ transform:none; opacity:1 } }

.onb-skip{
  position:absolute; inset-inline-end:14px; top:12px;
  background:none; border:none; cursor:pointer;
  color:var(--ink-soft,#6b5c4d); font-family:inherit;
  font-size:13px; font-weight:700; padding:4px 8px; border-radius:10px;
}
.onb-skip:hover{ background:rgba(0,0,0,.05); }

.onb-art{
  width:190px; height:150px; margin:6px auto 4px;
}
.onb-art svg{ display:block; }

.onb-title{
  font-size:21px; font-weight:900;
  color:var(--olive-deep,#44542f);
  margin:6px 0 8px;
}
.onb-text{
  font-size:15px; line-height:1.7;
  color:var(--ink,#2e2118);
  margin:0 auto 14px; max-width:34ch;
}

.onb-dots{
  display:flex; gap:8px; justify-content:center; margin-bottom:16px;
}
.onb-dot{
  width:9px; height:9px; border-radius:50%;
  border:none; padding:0; cursor:pointer;
  background:var(--card-line,#e3d4b8);
  transition:all .2s ease;
}
.onb-dot.active{
  background:var(--olive,#5c7048);
  width:22px; border-radius:5px;
}

.onb-dontshow-row{
  display:flex; align-items:center; gap:8px; justify-content:center;
  margin:0 0 14px; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:700;
  color:var(--ink-soft,#6b5c4d);
}
.onb-dontshow-row input[type="checkbox"]{
  width:18px; height:18px; accent-color:var(--olive,#5c7048); cursor:pointer; flex:0 0 auto;
}
.onb-actions{
  display:flex; gap:10px;
}
.onb-btn{
  flex:1; padding:13px 10px; border-radius:14px;
  font-family:inherit; font-size:15px; font-weight:800;
  cursor:pointer; border:2px solid transparent;
  transition:filter .15s ease, opacity .15s ease;
}
.onb-btn-primary{
  background:var(--olive,#5c7048); color:#fff;
}
.onb-btn-primary:hover{ filter:brightness(1.06); }
.onb-btn-ghost{
  background:transparent; color:var(--ink-soft,#6b5c4d);
  border-color:var(--card-line,#e3d4b8);
}
.onb-btn-ghost:disabled{ opacity:.4; cursor:default; }

/* ===================================================================
   الإعدادات / الإشعارات / الأجهزة
   =================================================================== */
.settings-body{ padding:14px 16px 30px; }

.settings-list{
  background:var(--white,#fffdf9);
  border:1px solid var(--card-line,#e3d4b8);
  border-radius:16px; overflow:hidden;
}
.settings-row{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:15px 14px; background:none; border:none; cursor:pointer;
  border-bottom:1px solid var(--card-line,#e3d4b8);
  font-family:inherit; font-size:15.5px; font-weight:700;
  color:var(--ink,#2e2118); text-align:start; text-decoration:none;
}
.settings-row:last-child{ border-bottom:none; }
.settings-row:hover{ background:rgba(0,0,0,.03); }
.settings-row-danger{ color:var(--terracotta,#b5512e); }
.settings-icon{ font-size:19px; width:26px; text-align:center; flex:none; }
.settings-label{ flex:1; }
.settings-value{ color:var(--ink-soft,#6b5c4d); font-weight:600; font-size:13.5px; }
.settings-chevron{ color:var(--ink-soft,#6b5c4d); font-size:20px; flex:none; }

/* بطاقة هذا الجهاز */
.this-device-card{
  margin-top:16px; padding:14px;
  background:var(--card,#f1e8d8);
  border:1px solid var(--card-line,#e3d4b8);
  border-radius:16px;
}
.this-device-title{
  font-size:13px; font-weight:800; color:var(--ink-soft,#6b5c4d);
  text-align:center; margin-bottom:10px;
}
.this-device-row{ display:flex; align-items:center; gap:12px; }
.this-device-icon{
  width:52px; height:52px; flex:none; border-radius:13px;
  background:var(--olive,#5c7048); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:24px;
}
.this-device-info{ flex:1; min-width:0; }
.this-device-name{ font-size:16px; font-weight:900; color:var(--ink,#2e2118); }
.this-device-status{
  font-size:12.5px; color:var(--ink-soft,#6b5c4d);
  display:flex; align-items:center; gap:5px; margin-top:3px; flex-wrap:wrap;
}
.dot-online{
  width:8px; height:8px; border-radius:50%; background:#3fae5a; flex:none;
  box-shadow:0 0 0 3px rgba(63,174,90,.18);
}
.rename-device-btn{
  margin-top:12px; width:100%; padding:9px;
  background:var(--white,#fffdf9); border:1px solid var(--card-line,#e3d4b8);
  border-radius:11px; cursor:pointer; font-family:inherit;
  font-size:13.5px; font-weight:700; color:var(--ink,#2e2118);
}
.rename-device-btn:hover{ border-color:var(--olive,#5c7048); }

.settings-foot-hint{
  margin:14px 4px 0; font-size:12.5px; line-height:1.7;
  color:var(--ink-soft,#6b5c4d); text-align:center;
}
.settings-home-code{ text-align:center; font-size:12px; color:var(--ink-soft,#6b5c4d); margin-top:10px; }

/* ملاحظة النطاق: هذه الإعدادات لهذا الجهاز فقط */
.notif-scope-note{
  margin:14px 0 4px; padding:10px 12px;
  background:rgba(217,163,62,.14);
  border:1px solid rgba(217,163,62,.4);
  border-radius:11px;
  font-size:12.5px; line-height:1.7; color:var(--ink,#2e2118); text-align:center;
}
.notif-choose-hint{
  margin:14px 0 8px; text-align:center;
  font-size:13.5px; font-weight:700; color:var(--ink-soft,#6b5c4d);
}

/* أنواع الإشعارات */
.notif-types-list{
  background:var(--white,#fffdf9);
  border:1px solid var(--card-line,#e3d4b8);
  border-radius:16px; overflow:hidden;
}
.notif-type-row{
  display:flex; align-items:center; gap:11px; padding:12px 13px;
  border-bottom:1px solid var(--card-line,#e3d4b8);
}
.notif-type-row:last-child{ border-bottom:none; }
.notif-type-icon{ font-size:18px; width:24px; text-align:center; flex:none; }
.notif-type-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.notif-type-text b{ font-size:14.5px; font-weight:800; color:var(--ink,#2e2118); }
.notif-type-text small{ font-size:11.5px; color:var(--ink-soft,#6b5c4d); line-height:1.5; }

/* مفتاح تشغيل/إيقاف */
.ios-toggle{
  width:50px; height:29px; border-radius:999px; flex:none; cursor:pointer;
  background:#cfc4b0; border:none; padding:3px; position:relative;
  transition:background .2s ease;
}
.ios-toggle.on{ background:var(--olive,#5c7048); }
.ios-knob{
  display:block; width:23px; height:23px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
  transform:translateX(0); transition:transform .2s ease;
}
/* الواجهة RTL: المقبض يتحرك يسارًا عند التفعيل */
.ios-toggle.on .ios-knob{ transform:translateX(-21px); }

/* طريقة التنبيه */
.notif-methods-box{
  margin-top:16px; padding:12px;
  background:var(--white,#fffdf9);
  border:1px solid var(--card-line,#e3d4b8);
  border-radius:16px;
}
.notif-methods-legend{
  padding:0 8px; font-size:13px; font-weight:800; color:var(--ink-soft,#6b5c4d);
}
.notif-methods-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
}
.alert-method{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:12px 4px; border-radius:12px; cursor:pointer;
  background:var(--white,#fffdf9);
  border:1.5px solid var(--card-line,#e3d4b8);
  font-family:inherit; font-size:11.5px; font-weight:700;
  color:var(--ink-soft,#6b5c4d); text-align:center; line-height:1.35;
  transition:all .15s ease;
}
.alert-method-icon{ font-size:20px; }
.alert-method.active{
  background:var(--card,#f1e8d8);
  border-color:var(--olive,#5c7048);
  color:var(--olive-deep,#44542f);
}
.notif-save-btn{ margin-top:18px; }

/* صفحة الأجهزة */
.device-card{
  display:flex; align-items:center; gap:11px; padding:12px;
  background:var(--white,#fffdf9);
  border:1px solid var(--card-line,#e3d4b8);
  border-radius:14px; margin-bottom:9px;
}
.device-card.current{ border-color:var(--olive,#5c7048); background:var(--card,#f1e8d8); }
.device-card-icon{
  width:44px; height:44px; flex:none; border-radius:11px;
  background:var(--olive,#5c7048); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:21px;
}
.device-card-info{ flex:1; min-width:0; }
.device-card-name{ font-size:14.5px; font-weight:900; color:var(--ink,#2e2118); }
.device-card-status{
  font-size:11.5px; color:var(--ink-soft,#6b5c4d); margin-top:3px;
  display:flex; align-items:center; gap:5px; flex-wrap:wrap;
}
.device-badge{
  display:inline-block; font-size:10px; font-weight:800;
  padding:2px 7px; border-radius:999px; margin-inline-start:4px;
  vertical-align:middle;
}
.current-badge{ background:var(--olive,#5c7048); color:#fff; }
.admin-badge{ background:var(--mustard,#d9a33e); color:#3a2c12; }
.off-badge{ background:#d8d2c6; color:#5a5145; }
.device-manage-btn{
  flex:none; padding:8px 14px; border-radius:10px; cursor:pointer;
  background:transparent; border:1.5px solid var(--card-line,#e3d4b8);
  font-family:inherit; font-size:12.5px; font-weight:800; color:var(--ink,#2e2118);
}
.device-manage-btn:hover{ border-color:var(--olive,#5c7048); color:var(--olive-deep,#44542f); }
.devices-empty{
  text-align:center; padding:28px 14px; color:var(--ink-soft,#6b5c4d);
  font-size:13.5px; font-weight:700;
}
.manage-meta{
  font-size:12.5px; color:var(--ink-soft,#6b5c4d);
  display:flex; flex-direction:column; gap:4px; margin-bottom:12px;
}
.manage-types{
  border:1px solid var(--card-line,#e3d4b8); border-radius:12px; overflow:hidden;
}
.manage-type-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 11px; font-size:13px; font-weight:700;
  border-bottom:1px solid var(--card-line,#e3d4b8);
}
.manage-type-row:last-child{ border-bottom:none; }
.manage-footer{ flex-wrap:wrap; gap:8px; }
.apply-defaults-row{
  display:flex; align-items:center; gap:7px; margin-top:9px;
  font-size:13px; font-weight:700; color:var(--ink,#2e2118); cursor:pointer;
}
.role-hint{
  display:block; margin-top:7px; font-size:11.5px; line-height:1.6;
  color:var(--ink-soft,#6b5c4d);
}

/* وميض الشاشة داخل التطبيق (طريقة تنبيه) */
.device-screen-flash{
  position:fixed; inset:0; z-index:11000; pointer-events:none;
  background:#fff; animation:deviceFlash .9s ease-out forwards;
}
@keyframes deviceFlash{
  0%,100%{ opacity:0 }
  10%,30%,50%{ opacity:.85 }
  20%,40%{ opacity:0 }
}

/* شاشات كبيرة (آيباد/ديسكتوب): شبكة أوسع بلا تغيير على الهاتف */
@media (min-width:768px){
  .settings-body{ max-width:720px; margin:0 auto; }
  .notif-methods-grid{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width:400px){
  .notif-methods-grid{ grid-template-columns:repeat(2,1fr); }
}

/* شريط الصفحة الرئيسية العلوي: دليل الاستخدام | الإعدادات
   (حلّ محل زر العلم القديم — تبديل اللغة صار داخل صفحة الإعدادات)
   الاتجاه يُضبط بـ dir على العنصر نفسه ليتبع اللغة (RTL عربي / LTR إنجليزي)،
   وspace-between يوزّعهما على الجهتين تلقائيًا بأي اتجاه. */
.home-top-actions{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:6px;
}
.home-top-spacer{ flex:0 0 auto; } /* يحفظ توازن التوزيع قبل تسجيل الدخول */

.home-top-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:999px; cursor:pointer;
  background:var(--white,#fffdf9);
  border:1.5px solid var(--card-line,#e3d4b8);
  color:var(--ink-soft,#6b5c4d);
  font-family:inherit; font-size:13px; font-weight:800;
  text-decoration:none; white-space:nowrap;
  transition:all .15s ease;
}
.home-top-btn:hover{
  border-color:var(--olive,#5c7048);
  color:var(--olive-deep,#44542f);
  background:var(--card,#f1e8d8);
}
.home-top-btn:active{ transform:scale(.97); }
.home-top-btn-icon{ font-size:15px; line-height:1; }

/* شاشات ضيقة جدًا: الأيقونة فقط كي لا يلتفّ الشريط أو يزاحم العنوان */
@media (max-width:340px){
  .home-top-btn{ padding:8px 11px; font-size:12px; }
}
/* زر الإشعار التجريبي بصفحة الإشعارات */
.notif-test-btn{ margin-top:10px; }
.notif-test-hint{
  margin:8px 4px 0; text-align:center; font-size:11.5px;
  line-height:1.6; color:var(--ink-soft,#6b5c4d);
}

/* ===== تنبيه «إيقاف الفترة» بشاشة المطبخ (ملء الشاشة + وميض + صوت) ===== */
.pause-alert-overlay{
  position:fixed; inset:0; z-index:99999;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer; -webkit-tap-highlight-color:transparent; user-select:none;
  animation:pauseFlashBg .8s steps(1,end) infinite;
}
@keyframes pauseFlashBg{
  0%,49%{ background:rgba(255,255,255,.97); }
  50%,100%{ background:rgba(255,206,206,.97); }
}
.pause-alert-img{
  width:min(72vw,70vh); height:auto; max-width:540px;
  animation:pausePulse .8s ease-in-out infinite;
}
@keyframes pausePulse{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.09); opacity:.5; }
}
.pause-alert-hint{
  margin-top:26px; font-family:'Cairo',Tahoma,sans-serif; font-weight:800;
  font-size:22px; color:#fff; background:#c0392b; padding:12px 26px; border-radius:30px;
  box-shadow:0 6px 20px rgba(192,57,43,.35);
}