@font-face {
  font-family: 'girges';
  src: url('girges.woff') format('woff'),
       url('../girges.woff') format('woff'),
       url('./girges.woff') format('woff'),
       url('assets/fonts/girges.woff') format('woff'),
       url('../assets/fonts/girges.woff') format('woff'),
       url('../../girges.woff') format('woff'),
       url('/girges.woff') format('woff');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0300-036F, U+0370-03FF, U+2C80-2CFF, U+2E00-2E7F, U+FE20-FE2F, U+102E0-102FF;
}
@font-face {
  font-family: 'girges';
  src: url('girges.woff') format('woff'),
       url('../girges.woff') format('woff'),
       url('./girges.woff') format('woff'),
       url('assets/fonts/girges.woff') format('woff'),
       url('../assets/fonts/girges.woff') format('woff'),
       url('../../girges.woff') format('woff'),
       url('/girges.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0300-036F, U+0370-03FF, U+2C80-2CFF, U+2E00-2E7F, U+FE20-FE2F, U+102E0-102FF;
}
@font-face {
  font-family: 'girges';
  src: url('girges.woff') format('woff'),
       url('../girges.woff') format('woff'),
       url('./girges.woff') format('woff'),
       url('assets/fonts/girges.woff') format('woff'),
       url('../assets/fonts/girges.woff') format('woff'),
       url('../../girges.woff') format('woff'),
       url('/girges.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0300-036F, U+0370-03FF, U+2C80-2CFF, U+2E00-2E7F, U+FE20-FE2F, U+102E0-102FF;
}

@font-face {
  font-family: 'Coptic Girges';
  src: url('girges.woff') format('woff'),
       url('../girges.woff') format('woff'),
       url('./girges.woff') format('woff'),
       url('assets/fonts/girges.woff') format('woff'),
       url('../assets/fonts/girges.woff') format('woff'),
       url('../../girges.woff') format('woff'),
       url('/girges.woff') format('woff');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0300-036F, U+0370-03FF, U+2C80-2CFF, U+2E00-2E7F, U+FE20-FE2F, U+102E0-102FF;
}
@font-face {
  font-family: 'Coptic Girges';
  src: url('girges.woff') format('woff'),
       url('../girges.woff') format('woff'),
       url('./girges.woff') format('woff'),
       url('assets/fonts/girges.woff') format('woff'),
       url('../assets/fonts/girges.woff') format('woff'),
       url('../../girges.woff') format('woff'),
       url('/girges.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0300-036F, U+0370-03FF, U+2C80-2CFF, U+2E00-2E7F, U+FE20-FE2F, U+102E0-102FF;
}
@font-face {
  font-family: 'Coptic Girges';
  src: url('girges.woff') format('woff'),
       url('../girges.woff') format('woff'),
       url('./girges.woff') format('woff'),
       url('assets/fonts/girges.woff') format('woff'),
       url('../assets/fonts/girges.woff') format('woff'),
       url('../../girges.woff') format('woff'),
       url('/girges.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0300-036F, U+0370-03FF, U+2C80-2CFF, U+2E00-2E7F, U+FE20-FE2F, U+102E0-102FF;
}

@font-face {
  font-family: 'Noto Sans Coptic';
  src: url('girges.woff') format('woff'),
       url('../girges.woff') format('woff'),
       url('./girges.woff') format('woff'),
       url('assets/fonts/girges.woff') format('woff'),
       url('../assets/fonts/girges.woff') format('woff'),
       url('../../girges.woff') format('woff'),
       url('/girges.woff') format('woff');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0300-036F, U+0370-03FF, U+2C80-2CFF, U+2E00-2E7F, U+FE20-FE2F, U+102E0-102FF;
}
@font-face {
  font-family: 'Noto Sans Coptic';
  src: url('girges.woff') format('woff'),
       url('../girges.woff') format('woff'),
       url('./girges.woff') format('woff'),
       url('assets/fonts/girges.woff') format('woff'),
       url('../assets/fonts/girges.woff') format('woff'),
       url('../../girges.woff') format('woff'),
       url('/girges.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0300-036F, U+0370-03FF, U+2C80-2CFF, U+2E00-2E7F, U+FE20-FE2F, U+102E0-102FF;
}
@font-face {
  font-family: 'Noto Sans Coptic';
  src: url('girges.woff') format('woff'),
       url('../girges.woff') format('woff'),
       url('./girges.woff') format('woff'),
       url('assets/fonts/girges.woff') format('woff'),
       url('../assets/fonts/girges.woff') format('woff'),
       url('../../girges.woff') format('woff'),
       url('/girges.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0300-036F, U+0370-03FF, U+2C80-2CFF, U+2E00-2E7F, U+FE20-FE2F, U+102E0-102FF;
}

  :root{
    --parchment:#eee6d1; --parchment-card:#faf6e9; --ink:#241b12; --ink-soft:#5a4a34;
    --madder:#8c2430; --madder-dark:#5e161f; --gold:#a8823a; --gold-light:#c9a35c;
    --line:#d9c9a0; --ok:#2e6b3e; --err:#a13030;
    --font-display:'girges', 'Coptic Girges', 'Cairo', 'Tajawal', sans-serif;
    --font-body:'girges', 'Coptic Girges', 'Tajawal', 'Cairo', sans-serif;
    --font-coptic:'girges', 'Coptic Girges', 'Noto Sans Coptic', sans-serif;
    --ease-float:cubic-bezier(0.23,1,0.32,1);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  }
  html, body{margin:0;padding:0;background:var(--parchment);color:var(--ink);font-family:var(--font-body);height:100vh;height:100dvh;overflow:hidden;}
  h1, h2, h3, h4, h5, h6,
  .lesson-item-title-area h5,
  .challenge-row-card,
  .challenge-row-content {
    font-family: var(--font-display);
  }
  .coptic,
  .coptic-font,
  .coptic-text,
  .coptic-glyph,
  .coptic-big-glyph,
  .coptic-display-val,
  .challenge-row-card .coptic-display-val,
  .unit-accordion-badge,
  .unit-accordion-badge span,
  .key-coptic,
  .badge-preview,
  .challenge-coptic-preview,
  .coptic-input,
  [lang="cop"],
  [data-coptic] {
    font-family: 'girges', 'Coptic Girges', var(--font-coptic), sans-serif !important;
    direction: ltr;
    unicode-bidi: isolate;
  }
  a{color:inherit;}

  #login-screen{max-width:380px;margin:90px auto;background:var(--parchment-card);border:1px solid var(--line);
    border-radius:14px;padding:30px;box-shadow:0 12px 34px rgba(0,0,0,.1);
    transform-style:preserve-3d; will-change:transform;
    animation:loginEnter .7s var(--ease-float);
    transition:transform .5s var(--ease-float), box-shadow .5s var(--ease-float);}
  @keyframes loginEnter{
    from{ opacity:0; transform:translateY(28px) scale(.96); filter:blur(3px); }
    to{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
  }
  #login-screen h2{font-family:var(--font-display);margin-top:0;font-size:1.3rem;}
  #login-screen .sub{color:var(--ink-soft);font-size:.85rem;margin-top:-10px;margin-bottom:18px;}
  #login-screen input{width:100%;padding:11px 12px;margin-bottom:12px;border:1px solid var(--line);
    border-radius:8px;font-family:var(--font-body);font-size:.95rem;background:#fff;}
  #login-screen button.login-btn{width:100%;padding:12px;background:var(--madder);color:#fff;border:none;border-radius:8px;
    font-family:var(--font-display);font-weight:700;cursor:pointer;font-size:.95rem;transition:background-color .2s, transform .15s;}
  #login-screen button.login-btn:hover{background:var(--madder-dark);}
  #login-screen .login-pass-wrap{position:relative;width:100%;margin-bottom:12px;}
  #login-screen .login-pass-wrap input{margin-bottom:0 !important;padding-left:42px !important;padding-right:12px !important;box-sizing:border-box;}
  #login-screen .toggle-pass-btn{position:absolute;left:8px;top:50%;transform:translateY(-50%);
    width:32px !important;max-width:32px !important;min-width:32px !important;height:32px !important;
    padding:0 !important;margin:0 !important;background:transparent !important;border:none !important;
    border-radius:6px;color:#7A6953 !important;cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:color .2s, background-color .2s;z-index:2;}
  #login-screen .toggle-pass-btn:hover{background:rgba(107, 21, 48, 0.08) !important;color:var(--madder) !important;}
  #login-msg{font-size:.85rem;margin-top:10px;min-height:1.2em;}
  .config-warning{background:#fbe6c8;border:1px solid #d9a442;padding:14px 18px;border-radius:10px;margin:16px auto;max-width:600px;font-size:.88rem;}

  #shell{
    display:none;
    height:100vh;
    height:100dvh;
    max-height:100vh;
    width:100vw;
    max-width:100vw;
    overflow:hidden;
    box-sizing:border-box;
  }
  #shell.show{
    display:grid;
    grid-template-columns:260px minmax(0, 1fr);
    width:100%;
    height:100vh;
    height:100dvh;
  }
  aside#main-sidebar, aside{
    background:linear-gradient(175deg,var(--madder),var(--madder-dark));
    color:#f4e9c9;
    padding:16px 12px 14px;
    display:flex;
    flex-direction:column;
    gap:4px;
    position:relative;
    top:auto;
    right:auto;
    left:auto;
    bottom:auto;
    width:260px;
    height:100vh;
    height:100dvh;
    max-height:100vh;
    box-sizing:border-box;
    overflow:hidden;
    z-index:100;
    box-shadow:-4px 0 20px rgba(0,0,0,0.14);
  }
  aside .brand{font-family:var(--font-display);font-weight:800;font-size:1.05rem;margin-bottom:14px;padding:0 6px;display:flex;align-items:center;gap:10px;flex-shrink:0;}
  aside .brand img{width:36px;height:36px;border-radius:8px;background:#fff;object-fit:contain;flex:0 0 auto;box-shadow:0 2px 6px rgba(0,0,0,0.25);}
  aside .brand-name{display:flex;flex-direction:column;}
  aside .brand span{font-family:var(--font-body);font-weight:500;display:block;font-size:.72rem;margin-top:2px;opacity:.85;}
  .sidebar-nav-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:3px;padding:2px 2px 10px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.25) transparent;}
  .sidebar-nav-scroll::-webkit-scrollbar{width:4px;}
  .sidebar-nav-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.2);border-radius:4px;}
  .sidebar-nav-scroll::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.35);}
  aside button.navlink{all:unset;cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:.88rem;
    padding:10px 12px;border-radius:9px;color:#f4e9c9;display:flex;align-items:center;gap:10px;
    transition:background .25s var(--ease-float), transform .25s var(--ease-float), color .25s;flex-shrink:0;}
  aside button.navlink svg{flex-shrink:0;opacity:.9;}
  aside button.navlink:hover{background:rgba(255,255,255,.1); transform:translateX(-3px); color:#ffffff;}
  aside button.navlink:hover svg{opacity:1;}
  aside button.navlink.active{background:rgba(255,255,255,.2); color:#ffffff; font-weight:800; box-shadow:0 2px 8px rgba(0,0,0,0.15);}
  aside button.navlink.active svg{stroke:#F4E9C9;}
  aside .nav-badge{display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.18);
    color:#fff;font-size:.72rem;font-weight:800;padding:1px 8px;border-radius:20px;margin-right:auto;
    border:1px solid rgba(255,255,255,.22);min-width:20px;text-align:center;}
  aside button.navlink.active .nav-badge{background:#A8823A;border-color:#F59E0B;color:#241400;font-weight:900;}
  aside .drawer-section-label{font-family:var(--font-display);font-size:.66rem;font-weight:800;letter-spacing:.04em;
    color:rgba(244,233,201,.65);text-transform:uppercase;margin:10px 6px 4px;display:flex;align-items:center;gap:6px;}
  aside .drawer-section-label::after{content:'';flex:1;height:1px;background:rgba(244,233,201,.18);}
  #user-box{font-size:.78rem;opacity:1;padding:10px 4px 2px;margin-top:auto;flex-shrink:0;border-top:1px solid rgba(255,255,255,.16);}
  #user-box-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;}
  #save-all-fab{all:unset;box-sizing:border-box;cursor:pointer;font-family:var(--font-display);font-weight:800;font-size:.78rem;
    color:#ffffff;background:linear-gradient(135deg,#3d8a52,var(--ok));padding:7px 8px;border-radius:8px;
    display:flex;align-items:center;justify-content:center;gap:6px;transition:all .2s;text-align:center;}
  #save-all-fab:hover{background:linear-gradient(135deg,#469a5c,#255530);transform:translateY(-1px);}
  #logout-btn{all:unset;box-sizing:border-box;cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:.78rem;
    color:#f4e9c9;background:rgba(255,255,255,.14);padding:7px 8px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background .2s;text-align:center;}
  #logout-btn:hover{background:rgba(255,255,255,.26);color:#ffffff;}

  main{
    height:100vh;
    height:100dvh;
    max-height:100vh;
    overflow-y:auto;
    overflow-x:auto;
    box-sizing:border-box;
    padding:26px 30px;
    margin:0 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    scrollbar-width:thin;
  }
  
  .stats-row{display:flex;gap:14px;margin-bottom:20px;flex-wrap:wrap;}
  main:has(#panel-users.active) #stats-row,
  main:has(#panel-curriculum.active) #stats-row,
  main:has(#panel-competitions.active) #stats-row,
  main:has(#panel-quizzes.active) #stats-row,
  main:has(#panel-notifications.active) #stats-row {
    display: none !important;
  }
  .stat-card{background:var(--parchment-card);border:1px solid var(--line);border-radius:12px;padding:14px 20px;min-width:120px;
    transition:transform .45s var(--ease-float), box-shadow .45s var(--ease-float);
    will-change:transform, box-shadow;
    animation:statEnter .6s var(--ease-float) backwards;}
  .stat-card:nth-child(1){ animation-delay:.03s; }
  .stat-card:nth-child(2){ animation-delay:.09s; }
  .stat-card:nth-child(3){ animation-delay:.15s; }
  .stat-card:nth-child(4){ animation-delay:.21s; }
  @keyframes statEnter{
    from{ opacity:0; transform:translateY(16px) scale(.94); filter:blur(2px); }
    to{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
  }
  .stat-card .num{font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--madder);}
  .stat-card .lbl{font-size:.78rem;color:var(--ink-soft);}

  section.panel{display:none;}
  section.panel.active{display:block; animation:panelEnter .5s var(--ease-float);}
  @keyframes panelEnter{
    from{ opacity:0; transform:translateY(14px) scale(.98); filter:blur(2px); }
    to{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
  }
  @media (prefers-reduced-motion:reduce){
    .stat-card, section.panel.active{ animation:none; }
  }
  .toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:10px;}
  .toolbar h2{font-family:var(--font-display);margin:0;font-size:1.25rem;}
  .btn{font-family:var(--font-display);font-weight:700;padding:9px 18px;border-radius:8px;border:1px solid var(--madder);
    background:var(--madder);color:#fff;cursor:pointer;font-size:.85rem;
    transition:background .3s ease, transform .35s var(--ease-float), box-shadow .35s var(--ease-float);}
  .btn:hover{background:var(--madder-dark); transform:translateY(-2px); box-shadow:0 8px 18px rgba(140,36,48,.25);}
  .btn:active{ transform:translateY(0) scale(.97); }
  .btn.secondary{background:transparent;color:var(--madder);}
  .row-actions button{ transition:transform .25s var(--ease-float), box-shadow .25s var(--ease-float); }
  .row-actions button:hover{ transform:translateY(-1px); box-shadow:0 4px 10px rgba(36,27,18,.12); }

  table{width:100%;border-collapse:collapse;background:var(--parchment-card);border:1px solid var(--line);
    border-radius:10px;overflow:hidden;}
  th,td{padding:10px;text-align:right;border-bottom:1px solid var(--line);font-size:.85rem;vertical-align:top;}
  th{background:rgba(168,130,58,.16);font-family:var(--font-display);font-weight:700;font-size:.8rem;}
  tr:last-child td{border-bottom:none;}
  td input, td select, td textarea{width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:6px;
    font-family:var(--font-body);font-size:.83rem;background:#fff;}
  td textarea{min-height:56px;font-family:monospace;font-size:.76rem;}
  .row-actions{display:flex;gap:6px;white-space:nowrap;}
  .row-actions button{font-size:.76rem;padding:6px 11px;border-radius:6px;border:1px solid var(--line);
    background:#fff;cursor:pointer;font-family:var(--font-display);font-weight:700;}
  .row-actions button.save{border-color:var(--ok);color:var(--ok);}
  .row-actions button.delete{border-color:var(--err);color:var(--err);}
  .empty{padding:34px;text-align:center;color:var(--ink-soft);}

  .quiz-settings-box{background:var(--parchment-card);border:1px solid var(--line);border-radius:10px;
    padding:14px 16px;margin-bottom:16px;}
  .quiz-settings-title{font-family:var(--font-display);font-weight:700;font-size:.85rem;margin-bottom:10px;}
  .quiz-settings-row{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-end;}
  .quiz-settings-row label{display:flex;flex-direction:column;gap:5px;font-size:.78rem;color:var(--ink-soft);font-weight:600;}
  .quiz-settings-row input{padding:7px 9px;border:1px solid var(--line);border-radius:6px;width:120px;
    font-family:var(--font-body);font-size:.85rem;}

  .quiz-cat-rows{display:flex;flex-direction:column;gap:8px;}
  .quiz-cat-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
  .quiz-cat-row .f-cat-name{flex:1;min-width:160px;padding:7px 9px;border:1px solid var(--line);border-radius:6px;
    font-family:var(--font-body);font-size:.85rem;}
  .quiz-cat-row .f-cat-count{width:90px;padding:7px 9px;border:1px solid var(--line);border-radius:6px;
    font-family:var(--font-body);font-size:.85rem;}
  .quiz-cat-row .f-cat-count-label{font-size:.76rem;color:var(--ink-soft);}
  .quiz-cat-row .cat-delete{font-size:.76rem;padding:6px 11px;border-radius:6px;border:1px solid var(--err);
    color:var(--err);background:#fff;cursor:pointer;font-family:var(--font-display);font-weight:700;}

  .thumb{width:44px;height:44px;object-fit:cover;border-radius:6px;border:1px solid var(--line);display:block;margin-bottom:6px;background:#fff;}
  .upload-btn{font-size:.72rem;padding:4px 8px;border-radius:6px;border:1px dashed var(--gold);background:#fff;
    cursor:pointer;font-family:var(--font-body);}
  .mcq-options{display:flex;flex-direction:column;gap:5px;}
  .mcq-options .opt-row{display:flex;align-items:center;gap:6px;}
  .mcq-options input[type="radio"]{width:auto;}
  .mcq-options input[type="text"]{flex:1;}

  .rte-toolbar{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:6px;}
  .rte-toolbar button{font-size:.72rem;padding:5px 9px;border-radius:6px;border:1px solid var(--line);
    background:#fff;cursor:pointer;font-family:var(--font-body);}
  .rte-toolbar button:hover{background:rgba(168,130,58,.14);}
  .rte-toolbar button.active{background:var(--madder);border-color:var(--madder);color:#fff;}
  .rte-toolbar .rte-b-heavy{font-weight:900;}
  .rte-toolbar .rte-b-thin{font-weight:300;}
  .rte-editor{min-height:110px;max-height:340px;overflow-y:auto;padding:10px;border:1px solid var(--line);
    border-radius:6px;background:#fff;font-size:.85rem;line-height:1.7;}
  .rte-editor:focus{outline:2px solid var(--gold);outline-offset:1px;}
  .rte-editor table{border-collapse:collapse;margin:8px 0;width:100%;max-width:100%;display:block;overflow-x:auto;}
  .rte-editor table td, .rte-editor table th{border:1px solid var(--line);padding:5px 8px;font-size:.82rem;}
  .rte-editor img{max-width:100%;height:auto;border-radius:6px;margin:6px 0;display:block;}
  .rte-media{position:relative;display:inline-block;max-width:100%;}
  .rte-media img{margin:0;}
  .rte-remove-btn{
    position:absolute;top:4px;left:4px;
    width:22px;height:22px;border-radius:50%;
    background:var(--madder);color:#fff;border:2px solid #fff;
    font-size:.7rem;line-height:1;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 2px 6px rgba(0,0,0,.3);
  }
  .rte-file-chip{
    display:inline-flex;align-items:center;gap:6px;
    background:var(--parchment);border:1px solid var(--line);border-radius:20px;
    padding:5px 8px 5px 14px;margin:4px 2px;font-size:.82rem;
  }
  .rte-file-chip .rte-remove-btn{ position:static; }
  .rte-editor a{color:var(--madder);}

  #toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;
    padding:11px 22px;border-radius:8px;font-size:.85rem;opacity:0;pointer-events:none;transition:opacity .25s;z-index:99;}
  #toast.show{opacity:1;}

  /* ============ زر "حفظ كل التعديلات" — جنب زر تسجيل الخروج ============ */
  #user-box-actions{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;}
  #save-all-fab{
    display:flex; align-items:center; justify-content:center; gap:7px;
    background:linear-gradient(135deg,#3d8a52,var(--ok));
    color:#f4fbf3; border:none; border-radius:7px;
    padding:7px 12px; font-family:var(--font-display); font-weight:800; font-size:.8rem;
    cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.15);
    transition:transform .2s var(--ease-float), box-shadow .2s var(--ease-float), opacity .2s, background .3s;
  }
  #save-all-fab:hover{ background:linear-gradient(135deg,#469a5c,#255530); transform:translateY(-2px); box-shadow:0 5px 12px rgba(0,0,0,.22); }
  #save-all-fab:active{ transform:translateY(0) scale(.98); }
  #save-all-fab:disabled{ cursor:wait; opacity:.8; transform:none; }
  #save-all-fab .save-all-icon{ font-size:1rem; line-height:1; display:inline-block; }
  #save-all-fab.is-saving .save-all-icon{ animation:saveAllSpin .9s linear infinite; }
  @keyframes saveAllSpin{ to{ transform:rotate(360deg); } }
  #save-all-fab .save-all-label{ white-space:nowrap; }
  #save-all-fab.has-dirty{ animation: dirtyFabPulse 2.5s infinite ease-in-out; }
  @keyframes dirtyFabPulse{
    0%, 100%{ box-shadow:0 2px 6px rgba(230,126,34,.3); }
    50%{ box-shadow:0 0 12px 3px rgba(230,126,34,.7); }
  }

  /* ============ مؤشرات التعديلات غير المحفوظة في الجداول ============ */
  tr.row-dirty {
    background-color: rgba(230, 126, 34, 0.09) !important;
    box-shadow: inset 3px 0 0 #e67e22 !important;
  }
  tr.row-dirty .row-actions .save {
    background: linear-gradient(135deg, #e67e22, #d35400) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 0 8px rgba(230, 126, 34, 0.5) !important;
    animation: dirtyPulse 2s infinite ease-in-out;
  }
  .quiz-cat-row.row-dirty {
    border-color: #e67e22 !important;
    background-color: rgba(230, 126, 34, 0.05) !important;
  }
  @keyframes dirtyPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(230, 126, 34, 0.4); }
    50% { transform: scale(1.04); box-shadow: 0 0 8px 3px rgba(230, 126, 34, 0.6); }
  }

  /* ============================================================
     MOBILE APP SHELL — one slim top bar + one hamburger + one drawer
     (nav + account actions live together, nothing duplicated, no
     permanent bottom bar / floating button eating screen space)
     ============================================================ */
  #mobile-topbar, #drawer-backdrop, #drawer-close{ display:none; }

  @media (max-width:800px){
    :root{ --topbar-h:48px; }
    html, body {
      height: auto !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
    }
    #shell{
      height: auto !important;
      max-height: none !important;
      overflow: visible !important;
    }
    #shell.show{
      display: block !important;
    }

    main{ 
      height: auto !important;
      max-height: none !important;
      overflow-y: visible !important;
      overflow-x: hidden !important;
      padding: 14px 12px 24px !important; 
      margin-top: calc(var(--topbar-h) + env(safe-area-inset-top)) !important; 
      margin-right: 0 !important; 
      margin-left: 0 !important; 
      width: 100% !important; 
      max-width: 100% !important; 
    }
    .toolbar{gap:8px;}
    .toolbar h2{font-size:1.15rem;}
    .toolbar .btn{ width:100%; padding:11px; } /* full-width, easy to tap, stays inline (no floating chrome) */

    /* ---- Slim top bar: just the menu button + page title ---- */
    #mobile-topbar{
      display:flex; align-items:center; gap:10px;
      position:fixed; top:0; right:0; left:0; height:var(--topbar-h);
      padding:env(safe-area-inset-top) 12px 0;
      background:linear-gradient(175deg,var(--madder),var(--madder-dark)); color:#f4e9c9;
      z-index:40; box-shadow:0 2px 10px rgba(0,0,0,.16);
    }
    #mobile-topbar button{all:unset;cursor:pointer;width:34px;height:34px;border-radius:8px;flex:0 0 auto;
      display:flex;align-items:center;justify-content:center;font-size:1.05rem;background:rgba(255,255,255,.12);}
    #mobile-topbar button:active{background:rgba(255,255,255,.28);}
    #mobile-topbar .mt-title{font-family:var(--font-display);font-weight:800;font-size:.92rem;}

    /* ---- One drawer holds everything: nav links + account actions ---- */
    aside{
      position:fixed; top:0; right:0; left:auto; bottom:auto; width:min(78vw,280px);
      height:100vh; height:100dvh;
      flex-direction:column; padding:calc(16px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom));
      transform:translateX(100%); transition:transform .3s var(--ease-float);
      z-index:60; overflow-y:auto; box-shadow:-12px 0 34px rgba(0,0,0,.28); gap:2px;
    }
    aside.open{ transform:translateX(0); }
    aside .brand{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
    aside .spacer{ display:none; }
    aside button.navlink{ padding:11px 12px; }
    #user-box{ width:100%; border-top:1px solid rgba(255,255,255,.2); padding-top:12px; margin-top:10px; }

    #drawer-close{
      all:unset; cursor:pointer; flex:0 0 auto; width:30px; height:30px; border-radius:8px;
      display:flex; align-items:center; justify-content:center; font-size:1rem; line-height:1;
      color:#f4e9c9; background:rgba(255,255,255,.12);
    }
    #drawer-close:active{ background:rgba(255,255,255,.28); }

    #drawer-backdrop{
      display:block; position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(20,14,8,.45);
      opacity:0; pointer-events:none; transition:opacity .3s; z-index:55;
    }
    #drawer-backdrop.show{ opacity:1; pointer-events:auto; }
  }

  /* ============ جداول تتحول لبطاقات على الموبايل والشاشات الضيقة ============ */
  @media (max-width:700px){
    table, thead, tbody, tr, th, td{ display:block; width:100%; }
    table{ background:none; border:none; }
    thead{ display:none; }
    tbody tr{
      background:var(--parchment-card);
      border:1px solid var(--line);
      border-radius:12px;
      padding:12px 14px 14px;
      margin-bottom:14px;
      box-shadow:0 2px 8px rgba(36,27,18,.06);
    }
    td{
      border-bottom:none !important;
      padding:7px 0;
      text-align:right;
    }
    td:not(.row-actions):not(:empty)::before{
      content:attr(data-label);
      display:block;
      font-size:.7rem;
      font-weight:700;
      color:var(--gold);
      margin-bottom:4px;
    }
    td input, td select, td textarea{ font-size:16px; padding:10px 10px; min-height:44px; } /* يمنع تكبير آيفون التلقائي عند التركيز، ومساحة لمس مريحة */
    td textarea{ min-height:70px; }
    .row-actions{ padding-top:10px; border-top:1px dashed var(--line); margin-top:6px; }
    .row-actions button{ flex:1; padding:12px; min-height:44px; font-size:.82rem; }
    .rte-toolbar button{ font-size:.8rem; padding:9px 11px; min-height:38px; }
    .mcq-options .opt-row input[type="text"]{ min-width:0; }
    .upload-btn{ width:100%; padding:11px; font-size:.82rem; min-height:44px; }
    .thumb{ width:60px; height:60px; }
    .rte-editor{ font-size:16px; }
    .stats-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .stat-card{ min-width:0; padding:14px 16px; }
    .stat-card .num{ font-size:1.3rem; }
    #login-screen{ margin:14vh 16px 0; padding:26px 22px; }
  }

  /* ============ مؤشر تحميل ورفع الصور والملفات (Loading Modal & Spinner) ============ */
  .upload-overlay{
    position:fixed; inset:0; background:rgba(20,14,8,.68); backdrop-filter:blur(6px);
    z-index:99999; display:flex; align-items:center; justify-content:center;
    animation:uploadFadeIn .2s ease-out;
  }
  @keyframes uploadFadeIn{ from{opacity:0; transform:scale(.98);} to{opacity:1; transform:scale(1);} }
  .upload-modal{
    background:var(--parchment-card); border:2px solid var(--gold); border-radius:18px;
    padding:28px 32px; text-align:center; box-shadow:0 18px 44px rgba(0,0,0,.4);
    max-width:380px; width:90%; color:var(--ink);
  }
  .upload-modal .spinner{
    width:48px; height:48px; border:4px solid var(--line); border-top-color:var(--madder);
    border-radius:50%; animation:uploadSpin .75s linear infinite; margin:0 auto 16px;
  }
  @keyframes uploadSpin{ to{ transform:rotate(360deg); } }
  .upload-modal .upload-title{
    font-family:var(--font-display); font-size:1.15rem; font-weight:800; color:var(--madder); margin-bottom:6px;
  }
  .upload-modal .upload-desc{
    font-size:.88rem; color:var(--ink-soft); line-height:1.5;
  }
  .upload-btn:disabled{
    opacity:.65; cursor:wait !important; pointer-events:none;
  }

  /* ============ OBJECTIVE A: GLOBAL RESPONSIVENESS SAFEGUARDS ============ */
  #shell { width: 100%; max-width: 100%; box-sizing: border-box; }
  main { box-sizing: border-box; min-width: 0; }
  .panel { width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; }
  
  .table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--parchment-card);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(36, 27, 18, 0.04);
    margin-bottom: 20px;
    position: relative;
  }
  .table-wrap::-webkit-scrollbar { height: 8px; }
  .table-wrap::-webkit-scrollbar-track { background: rgba(168, 130, 58, 0.08); border-radius: 4px; }
  .table-wrap::-webkit-scrollbar-thumb { background: rgba(107, 21, 48, 0.25); border-radius: 4px; }
  .table-wrap::-webkit-scrollbar-thumb:hover { background: rgba(107, 21, 48, 0.45); }
  
  .panel table {
    display: table !important;
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
    background: transparent;
    border: none;
    border-radius: 0;
    margin: 0;
  }
  .table-wrap table { border: none; border-radius: 0; margin: 0; }
  
  @keyframes spinLoader {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  #panel-curriculum { overflow: visible !important; }
  #panel-curriculum .curriculum-admin { width: 100%; box-sizing: border-box; overflow: visible; }

  /* ============ OBJECTIVE B: ISOLATED CURRICULUM ADMIN STYLES (.curriculum-admin) ============ */
  .curriculum-admin {
    font-family: var(--font-main, 'Cairo', sans-serif);
    color: var(--ink, #241D20);
    direction: rtl;
    width: 100%; max-width: 100%; box-sizing: border-box;
  }
  .curriculum-header {
    background: linear-gradient(135deg, #4A0D24 0%, #6F1737 100%);
    color: #F7F3EA; padding: 22px 24px; border-radius: 16px; margin-bottom: 20px;
    box-shadow: 0 8px 24px rgba(74, 13, 36, 0.15);
  }
  .curriculum-header-main {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  }
  .curriculum-title-box h1 {
    font-family: var(--font-display, 'Tajawal', sans-serif);
    font-size: 1.45rem; font-weight: 800; margin: 0 0 6px 0; color: #F7F3EA;
  }
  .curriculum-title-box p { margin: 0; font-size: 0.88rem; color: #E7DCC8; opacity: 0.95; }
  .curriculum-header-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  
  .curriculum-btn {
    all: unset; cursor: pointer; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 15px; border-radius: 10px; font-size: 0.86rem; font-weight: 700;
    transition: all 0.2s ease; min-height: 40px; text-align: center;
  }
  .curriculum-btn-primary { background: #8F3156; color: #FFFFFF; border: 1px solid rgba(255, 255, 255, 0.2); }
  .curriculum-btn-primary:hover { background: #6F1737; transform: translateY(-1px); }
  .curriculum-btn-gold { background: #D4AF37; color: #241D20; }
  .curriculum-btn-gold:hover { background: #C5A028; transform: translateY(-1px); }
  .curriculum-btn-outline { background: rgba(255, 255, 255, 0.12); color: #F7F3EA; border: 1px solid rgba(255, 255, 255, 0.25); }
  .curriculum-btn-outline:hover { background: rgba(255, 255, 255, 0.24); }
  .curriculum-btn-secondary { background: #FFFFFF; color: #6F1737; border: 1px solid #E7DCC8; }
  .curriculum-btn-secondary:hover { background: #FBF8F1; border-color: #6F1737; }
  .curriculum-btn-danger { background: #B53A3A; color: #FFFFFF; }
  .curriculum-btn-danger:hover { background: #962E2E; }
  .curriculum-btn-icon {
    width: 40px !important; min-width: 40px !important; height: 40px !important; padding: 0 !important;
    border-radius: 10px; background: #FFFFFF; color: #4A0D24; border: 1px solid #E7DCC8;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06); transition: all 0.2s ease;
  }
  .curriculum-btn-icon:hover:not(:disabled) {
    background: #FBF8F1; border-color: #6F1737; transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(111,23,55,0.12);
  }
  .curriculum-btn-icon:disabled {
    opacity: 0.45; cursor: not-allowed; transform: none !important; box-shadow: none;
  }
  .curriculum-btn:disabled {
    opacity: 0.65; cursor: not-allowed !important; transform: none !important; pointer-events: none;
  }
  .curriculum-btn.is-playing, #btn-test-challenge-audio.is-playing {
    background: #8F3156 !important;
    color: #FFFFFF !important;
    border-color: #D4AF37 !important;
    animation: pulseAudioTest 0.8s infinite alternate ease-in-out;
  }
  @keyframes pulseAudioTest {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(143, 49, 86, 0.4); }
    100% { transform: scale(1.04); box-shadow: 0 0 0 5px rgba(212, 175, 55, 0.35); }
  }
  .curriculum-btn.is-loading {
    opacity: 0.92 !important; cursor: wait !important; pointer-events: none;
    background: #6F1737 !important; border-color: #D4AF37 !important;
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.4) !important;
  }
  .curriculum-btn.is-loading .curriculum-spinner-icon {
    display: inline-block;
    animation: curriculum-btn-spin 0.8s linear infinite;
    transform-origin: center center;
    vertical-align: middle;
  }
  .curriculum-btn.is-success {
    background: #2E7D32 !important; border-color: #4CAF50 !important; color: #FFFFFF !important;
    box-shadow: 0 0 10px rgba(46, 125, 50, 0.35) !important;
    transform: none !important;
  }
  .curriculum-btn.is-error {
    background: #C62828 !important; border-color: #E53935 !important; color: #FFFFFF !important;
    box-shadow: 0 0 10px rgba(198, 40, 40, 0.35) !important;
    transform: none !important;
  }
  @keyframes curriculum-btn-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  /* Compact Statistics Grid */
  .curriculum-admin .curriculum-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
  }
  @media (max-width: 1024px) { .curriculum-admin .curriculum-stats-grid { grid-template-columns: repeat(3, 1fr) !important; } }
  @media (max-width: 600px) { .curriculum-admin .curriculum-stats-grid { grid-template-columns: repeat(2, 1fr) !important; } }
  .curriculum-admin .curriculum-stat-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: #FFFFFF;
    border: 1px solid #E7DCC8;
    border-radius: 12px;
    padding: 12px 14px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(36, 27, 32, 0.04);
    box-sizing: border-box;
    min-width: 0;
  }
  .curriculum-admin .curriculum-stat-val {
    display: block;
    font-family: var(--font-display, 'Tajawal', sans-serif);
    font-size: 1.4rem;
    font-weight: 800;
    color: #6F1737;
    line-height: 1.1;
  }
  .curriculum-admin .curriculum-stat-lbl {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: #746B6F;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Navigation Tabs & Breadcrumb Explorer */
  .curriculum-breadcrumb-bar {
    background: #FFFFFF;
    border: 1px solid #E7DCC8;
    border-radius: 14px;
    padding: 10px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(36, 27, 32, 0.04);
    flex-wrap: wrap;
  }
  .curriculum-breadcrumb-track {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.9rem;
    font-weight: 700;
  }
  .curriculum-crumb-btn {
    all: unset;
    cursor: pointer;
    color: #6F1737;
    background: #FBF8F1;
    border: 1px solid #E7DCC8;
    padding: 6px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .curriculum-crumb-btn:hover {
    background: #6F1737;
    color: #FFFFFF;
    border-color: #6F1737;
    transform: translateY(-1px);
  }
  .curriculum-crumb-sep { color: #A89F91; font-weight: 900; font-size: 1.1rem; }
  .curriculum-crumb-current {
    background: #6F1737;
    color: #FFFFFF;
    padding: 6px 14px;
    border-radius: 8px;
    font-weight: 800;
    box-shadow: 0 2px 6px rgba(111, 23, 55, 0.2);
  }

  .curriculum-btn-explore {
    background: linear-gradient(135deg, #6F1737 0%, #4A0D24 100%) !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    border: 1px solid #4A0D24 !important;
    box-shadow: 0 4px 12px rgba(111, 23, 55, 0.25);
    padding: 10px 14px !important;
    font-size: 0.88rem !important;
  }
  .curriculum-btn-explore:hover {
    background: linear-gradient(135deg, #872045 0%, #5E112E 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(111, 23, 55, 0.35);
  }

  .curriculum-tabs-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 20px; }
  .curriculum-tabs {
    display: flex; gap: 8px; background: #FBF8F1; border: 1px solid #E7DCC8;
    padding: 6px; border-radius: 14px; width: max-content; min-width: 100%; box-sizing: border-box;
  }
  .curriculum-tab-btn {
    all: unset; cursor: pointer; flex: 1; min-width: 110px; text-align: center;
    padding: 10px 14px; border-radius: 10px; font-size: 0.88rem; font-weight: 700;
    color: #746B6F; white-space: nowrap; transition: all 0.2s ease;
    display: flex; align-items: center; justify-content: center; gap: 6px;
  }
  .curriculum-tab-btn:hover { color: #6F1737; background: rgba(111, 23, 55, 0.05); }
  .curriculum-tab-btn.active { background: #6F1737; color: #FFFFFF; box-shadow: 0 4px 12px rgba(111, 23, 55, 0.2); }
  .curriculum-tab-badge { background: rgba(0, 0, 0, 0.12); color: inherit; font-size: 0.75rem; padding: 2px 7px; border-radius: 99px; }
  .curriculum-tab-btn.active .curriculum-tab-badge { background: rgba(255, 255, 255, 0.25); color: #FFFFFF; }

  /* Views & Cards */
  .curriculum-admin .curriculum-view-content { display: none !important; }
  .curriculum-admin .curriculum-view-content.active { display: block !important; }
  .curriculum-admin .curriculum-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
  }
  @media (max-width: 480px) { .curriculum-admin .curriculum-cards-grid { grid-template-columns: 1fr !important; } }

  .curriculum-admin .curriculum-card {
    background: #FFFFFF;
    border: 1px solid #E7DCC8;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 4px 12px rgba(36, 27, 32, 0.04);
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between;
    gap: 14px;
    box-sizing: border-box;
  }
  .curriculum-admin .curriculum-card-head { display: flex !important; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .curriculum-admin .curriculum-card-badge {
    width: 44px; height: 44px; border-radius: 12px; background: #FBF8F1;
    border: 1px solid #E7DCC8; display: flex !important; align-items: center; justify-content: center;
    font-size: 1.3rem; font-weight: 800; color: #6F1737; flex-shrink: 0;
  }
  .curriculum-card-title-area h3 { margin: 0 0 4px 0; font-size: 1.05rem; font-weight: 800; color: #241D20; }
  .curriculum-card-title-area p { margin: 0; font-size: 0.85rem; color: #746B6F; line-height: 1.4; }
  .curriculum-card-stats {
    display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px dashed #E7DCC8;
    font-size: 0.8rem; color: #746B6F;
  }
  .curriculum-chip {
    background: #FBF8F1; border: 1px solid #E7DCC8; padding: 2px 7px;
    border-radius: 6px; font-size: 0.78rem; font-weight: 700; color: #4A0D24;
  }
  .curriculum-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .curriculum-card-actions .curriculum-btn { flex: 1; min-width: 75px; padding: 7px 10px; font-size: 0.8rem; }

  /* Modals inside Admin */
  .curriculum-modal-overlay {
    position: fixed; inset: 0; background: rgba(20, 14, 8, 0.65); backdrop-filter: blur(4px);
    z-index: 99990; display: flex; align-items: center; justify-content: center; padding: 16px;
  }
  .curriculum-modal-card {
    background: #FFFFFF; border: 2px solid #E7DCC8; border-radius: 16px;
    width: min(680px, 100%); max-height: calc(100vh - 32px); display: flex;
    flex-direction: column; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); overflow: hidden;
  }
  .curriculum-modal-header {
    background: #FBF8F1; border-bottom: 1px solid #E7DCC8; padding: 14px 18px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .curriculum-modal-header h3 { margin: 0; font-size: 1.1rem; font-weight: 800; color: #6F1737; }
  .curriculum-modal-body { padding: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
  .curriculum-modal-footer {
    background: #FBF8F1; border-top: 1px solid #E7DCC8; padding: 12px 18px;
    display: flex; justify-content: flex-end; gap: 10px;
  }
  .curriculum-field { display: flex; flex-direction: column; gap: 4px; }
  .curriculum-field label { font-size: 0.84rem; font-weight: 700; color: #241D20; }
  .curriculum-field input[type="text"],
  .curriculum-field input[type="number"],
  .curriculum-field select,
  .curriculum-field textarea {
    width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid #E7DCC8;
    border-radius: 8px; font-family: inherit; font-size: 0.88rem; background: #FFFFFF; color: #241D20;
  }
  .curriculum-field input:focus, .curriculum-field select:focus, .curriculum-field textarea:focus {
    outline: none; border-color: #6F1737; box-shadow: 0 0 0 3px rgba(111, 23, 55, 0.12);
  }

  /* Exercise Editor Cards */
  .curriculum-exercise-item {
    background: #FBF8F1; border: 1px solid #E7DCC8; border-radius: 12px;
    padding: 12px 14px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px;
  }
  .curriculum-exercise-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .curriculum-exercise-type-tag {
    background: #6F1737; color: #FFFFFF; padding: 3px 8px; border-radius: 6px; font-size: 0.75rem; font-weight: 700;
  }

  /* ============ NEW: LEVELS OVERVIEW, LEVEL DETAIL & UNIT DETAIL REDESIGN ============ */
  /* View switching with fade transition */
  .curriculum-view-levels-overview,
  .curriculum-view-level-detail,
  .curriculum-view-unit-detail {
    width: 100%;
    box-sizing: border-box;
    animation: currFadeIn 0.35s ease;
  }
  @keyframes currFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .curriculum-view-level-detail,
  .curriculum-view-unit-detail { display: none; }
  .curriculum-view-level-detail.active,
  .curriculum-view-unit-detail.active { display: block; }
  .curriculum-view-levels-overview { display: block; }
  .curriculum-view-levels-overview.hidden { display: none; }

  /* Level Overview Cards Grid */
  .levels-overview-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 16px;
    justify-content: center;
  }
  @media (max-width: 640px) {
    .levels-overview-grid {
      grid-template-columns: 1fr !important;
    }
  }

  .level-overview-card {
    background: #FFFFFF;
    border: 1.5px solid #E7DCC8;
    border-radius: 18px;
    padding: 0;
    box-shadow: 0 4px 16px rgba(36, 27, 32, 0.05);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
    cursor: default;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .level-overview-card:hover {
    border-color: #D4AF37;
    box-shadow: 0 8px 28px rgba(111, 23, 55, 0.12);
    transform: translateY(-4px);
  }

  .level-card-header {
    background: linear-gradient(135deg, #4A0D24 0%, #6F1737 100%);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    text-align: right;
  }
  .level-card-badge {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: rgba(255,255,255,0.15);
    border: 2px solid rgba(212,175,55,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    font-weight: 900;
    color: #D4AF37;
    flex-shrink: 0;
    backdrop-filter: blur(4px);
  }
  .level-card-title-area {
    flex: 1;
    min-width: 0;
    text-align: right;
  }
  .level-card-title-area h3 {
    margin: 0 0 4px 0;
    font-size: 1.08rem;
    font-weight: 800;
    color: #F7F3EA;
    line-height: 1.35;
  }
  .level-card-title-area p {
    margin: 0;
    font-size: 0.82rem;
    color: rgba(231, 220, 200, 0.85);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .level-card-body {
    padding: 16px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
  }
  .level-card-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
  }
  .level-stat-chip {
    background: #FBF8F1;
    border: 1px solid #E7DCC8;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #4A0D24;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
  }
  .level-stat-chip .stat-icon {
    font-size: 0.92rem;
    display: inline-flex;
    align-items: center;
  }
  .level-stat-chip.xp-chip {
    background: linear-gradient(135deg, #FFF8E6, #FFF1CC);
    border-color: #D4AF37;
    color: #7A5F00;
  }

  .level-card-footer {
    padding: 0 20px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-sizing: border-box;
  }
  .level-card-footer .btn-open-level {
    all: unset;
    cursor: pointer;
    box-sizing: border-box;
    flex: 1;
    min-width: 120px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 800;
    background: linear-gradient(135deg, #6F1737, #4A0D24);
    color: #FFFFFF;
    border: 1px solid #4A0D24;
    box-shadow: 0 4px 12px rgba(111, 23, 55, 0.25);
    transition: all 0.25s ease;
  }
  .level-card-footer .btn-open-level:hover {
    background: linear-gradient(135deg, #872045, #5E112E);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(111, 23, 55, 0.35);
  }
  .level-card-footer .btn-edit-level,
  .level-card-footer .btn-delete-level {
    all: unset;
    cursor: pointer;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border: 1px solid #E7DCC8;
    font-size: 1rem;
  }
  .level-card-footer .btn-edit-level {
    background: #FFFFFF;
    color: #6F1737;
  }
  .level-card-footer .btn-edit-level:hover {
    background: #FBF8F1;
    border-color: #6F1737;
    transform: translateY(-1px);
  }
  .level-card-footer .btn-delete-level {
    background: #FFFFFF;
    color: #B53A3A;
  }
  .level-card-footer .btn-delete-level:hover {
    background: #FEF0F0;
    border-color: #B53A3A;
    transform: translateY(-1px);
  }

  /* ---- Level Detail View ---- */
  .level-detail-back-btn {
    all: unset;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #6F1737;
    background: #FFFFFF;
    border: 1px solid #E7DCC8;
    transition: all 0.2s ease;
    margin-bottom: 16px;
  }
  .level-detail-back-btn:hover {
    background: #FBF8F1;
    border-color: #6F1737;
    transform: translateX(4px);
  }

  .level-detail-hero {
    background: linear-gradient(135deg, #4A0D24 0%, #6F1737 60%, #8F3156 100%);
    border-radius: 18px;
    padding: 28px 28px 24px;
    margin-bottom: 24px;
    color: #F7F3EA;
    position: relative;
    overflow: hidden;
  }
  .level-detail-hero::after {
    content: '';
    position: absolute;
    top: -30%;
    left: -10%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(212,175,55,0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
  }
  .level-detail-hero h2 {
    margin: 0 0 8px 0;
    font-size: 1.35rem;
    font-weight: 800;
    color: #F7F3EA;
  }
  .level-detail-hero p {
    margin: 0 0 16px 0;
    font-size: 0.9rem;
    color: rgba(231,220,200,0.9);
    line-height: 1.5;
  }

  .level-detail-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-top: 18px;
    width: 100%;
    box-sizing: border-box;
  }
  @media (max-width: 580px) {
    .level-detail-info-grid {
      grid-template-columns: 1fr;
    }
  }
  .level-detail-info-item {
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 14px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    transition: transform 0.2s ease, background 0.2s ease;
  }
  .level-detail-info-item:hover {
    background: rgba(255,255,255,0.18);
    transform: translateY(-2px);
  }
  .level-detail-info-item label {
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(231,220,200,0.85);
    text-align: center;
    margin: 0;
  }
  .level-detail-info-item .info-value {
    font-size: 1.25rem;
    font-weight: 900;
    color: #D4AF37;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .level-detail-info-item .info-value.editable {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .level-detail-info-item .info-value.editable:hover {
    color: #F4CF6A;
  }
  .level-detail-info-item .info-value.editable .edit-icon {
    font-size: 0.85rem;
    opacity: 0.6;
    transition: opacity 0.2s;
  }
  .level-detail-info-item .info-value.editable:hover .edit-icon {
    opacity: 1;
  }

  /* XP Inline Edit Input */
  .xp-inline-input {
    background: rgba(255,255,255,0.2);
    border: 1.5px solid #D4AF37;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 1rem;
    font-weight: 800;
    color: #D4AF37;
    width: 80px;
    text-align: center;
    font-family: inherit;
  }
  .xp-inline-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(212,175,55,0.3);
  }

  /* Reward Box Section */
  .reward-box-section {
    background: #FFFFFF;
    border: 1.5px solid #E7DCC8;
    border-radius: 18px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 16px rgba(36,27,32,0.04);
  }
  .reward-box-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 12px;
  }
  .reward-box-section-header h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #241D20;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .reward-box-empty {
    text-align: center;
    padding: 30px 20px;
    color: #A89F91;
    font-size: 0.92rem;
  }
  .reward-box-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 16px;
  }
  .chest-admin-card {
    background: #FFFFFF;
    border: 1.5px solid #E7DCC8;
    border-radius: 16px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    box-shadow: 0 4px 14px rgba(36, 27, 32, 0.03);
  }
  .chest-admin-card:hover {
    border-color: #D4AF37;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.15);
  }
  .chest-admin-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }
  .chest-admin-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #FFF8D6, #E5C158);
    border: 1.5px solid #C4A052;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: 0 4px 10px rgba(212,175,55,0.25);
  }
  .chest-admin-info h4 {
    margin: 0 0 4px 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: #4A0D24;
  }
  .chest-admin-info p {
    margin: 0;
    font-size: 0.82rem;
    color: #706354;
    line-height: 1.4;
  }
  .chest-location-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #F3F8FB;
    color: #0A4F70;
    border: 1px solid #C8E1F0;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 8px;
    margin-top: 6px;
  }
  .chest-rewards-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 10px;
    border-top: 1px dashed #E7DCC8;
  }
  .reward-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
  }
  .reward-chip.xp {
    background: #E8F5FE;
    color: #0077CC;
    border: 1px solid #BCE0FD;
  }
  .reward-chip.heart {
    background: #FDE8E8;
    color: #D92D20;
    border: 1px solid #FECDCA;
  }
  .reward-chip.badge {
    background: #FEF6E7;
    color: #B54708;
    border: 1px solid #FEDF89;
  }
  .chest-admin-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
  }
  .badge-chip-btn {
    all: unset;
    cursor: pointer;
    font-size: 1.2rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFF;
    border: 1px solid #E7DCC8;
    border-radius: 8px;
    transition: all 0.15s;
  }
  .badge-chip-btn:hover {
    transform: scale(1.2);
    border-color: #D4AF37;
    background: #FFF8D6;
  }
  .chest-live-preview-card {
    background: #FFFFFF;
    border: 1px solid #E7DCC8;
    border-radius: 14px;
    padding: 16px;
    text-align: center;
  }
  .chest-preview-rewards-grid {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
  }
  .chest-preview-reward-pill {
    background: #FBF8F1;
    border: 1.5px solid #E7DCC8;
    border-radius: 12px;
    padding: 10px 14px;
    min-width: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .chest-preview-reward-val {
    font-size: 1rem;
    font-weight: 800;
    color: #241D20;
  }
  .chest-preview-reward-lbl {
    font-size: 0.72rem;
    color: #706354;
    font-weight: 700;
  }

  /* Level Detail Units List */
  .level-detail-units-section {
    margin-bottom: 24px;
  }
  .level-detail-units-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .level-detail-units-header h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #241D20;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .unit-accordion-card {
    background: #FFFFFF;
    border: 1.5px solid #E7DCC8;
    border-radius: 16px;
    margin-bottom: 14px;
    overflow: hidden;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(36,27,32,0.03);
  }
  .unit-accordion-card.open {
    border-color: #6F1737;
    box-shadow: 0 6px 20px rgba(111,23,55,0.08);
  }
  .unit-accordion-head {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    cursor: pointer;
    background: #FFFFFF;
    transition: background 0.2s ease;
  }
  .unit-accordion-head:hover {
    background: #FCFAF6;
  }
  .unit-accordion-card.open .unit-accordion-head {
    background: #FDFBF8;
    border-bottom: 1px solid #EFE6D5;
  }
  .unit-accordion-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
  }
  .unit-accordion-badge {
    min-width: 48px;
    width: auto;
    max-width: 160px;
    height: 48px;
    padding: 0 8px;
    border-radius: 14px;
    background: #FBF8F1;
    border: 1.5px solid #E7DCC8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 900;
    color: #6F1737;
    flex-shrink: 0;
    overflow: hidden;
    box-sizing: border-box;
  }
  .unit-accordion-badge img {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
  }
  .unit-accordion-card.open .unit-accordion-badge {
    background: #6F1737;
    color: #FFFFFF;
    border-color: #6F1737;
  }
  .unit-accordion-info h4 {
    margin: 0 0 3px 0;
    font-size: 1.02rem;
    font-weight: 800;
    color: #241D20;
  }
  .unit-accordion-info p {
    margin: 0;
    font-size: 0.82rem;
    color: #746B6F;
  }
  .unit-accordion-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  .unit-toggle-btn {
    all: unset;
    cursor: pointer;
    padding: 6px 14px;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 800;
    background: #FBF8F1;
    color: #6F1737;
    border: 1px solid #E7DCC8;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
  }
  .unit-toggle-btn:hover {
    background: #6F1737;
    color: #FFFFFF;
    border-color: #6F1737;
  }
  .unit-accordion-card.open .unit-toggle-btn {
    background: #6F1737;
    color: #FFFFFF;
    border-color: #6F1737;
  }

  /* Unit Accordion Body (Lessons and Challenges) */
  .unit-accordion-body {
    padding: 20px;
    background: #FDFBF7;
    display: none;
    flex-direction: column;
    gap: 16px;
    animation: currFadeIn 0.25s ease;
  }
  .unit-accordion-card.open .unit-accordion-body {
    display: flex;
  }

  /* Lesson Block */
  .lesson-item-box {
    background: #FFFFFF;
    border: 1.5px solid #EAE1D1;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 2px 6px rgba(36,27,32,0.02);
  }
  .lesson-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #F0E8DC;
    margin-bottom: 12px;
  }
  .lesson-item-title-area {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 240px;
  }
  .lesson-item-title-area h5 {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 800;
    color: #241D20;
  }
  .lesson-xp-badge {
    background: #FFF8E6;
    border: 1px solid #D4AF37;
    color: #7A5F00;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.76rem;
    font-weight: 800;
  }
  .lesson-item-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  @media (max-width: 680px) {
    .lesson-item-header {
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
    }
    .lesson-item-title-area {
      width: 100%;
    }
    .lesson-item-actions {
      width: 100%;
      justify-content: flex-end;
      border-top: 1px dashed #F0E8DC;
      padding-top: 10px;
    }
  }

  /* Exercises / Challenges List - Vertical Rows Layout (مقسمين بالطول) */
  .challenges-grid-inside-lesson,
  .challenges-list-vertical {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 12px;
    width: 100%;
    box-sizing: border-box;
  }
  .challenge-row-card,
  .challenge-item-card {
    background: #FFFFFF;
    border: 1.5px solid #E7DCC8;
    border-radius: 14px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(36,27,32,0.02);
    width: 100%;
    box-sizing: border-box;
  }
  .challenge-row-card:hover,
  .challenge-item-card:hover {
    border-color: #6F1737;
    background: #FCFAF7;
    box-shadow: 0 4px 14px rgba(111,23,55,0.08);
  }
  .challenge-row-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
  }
  .challenge-row-badge {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #FBF8F1;
    border: 1.5px solid #E7DCC8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    font-weight: 900;
    color: #6F1737;
    flex-shrink: 0;
  }
  .challenge-row-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
  }
  .challenge-row-top-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .challenge-type-tag {
    background: #6F1737;
    color: #FFFFFF;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
  }
  .challenge-coptic-text {
    font-size: 1.5rem;
    font-weight: 900;
    color: #4A0D24;
    line-height: 1.1;
    direction: ltr;
    display: inline-block;
  }
  .challenge-question-txt {
    font-size: 0.92rem;
    font-weight: 700;
    color: #241D20;
    line-height: 1.4;
    margin: 0;
  }
  .challenge-options-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
  }
  .opt-chip-preview {
    background: #FBF8F1;
    border: 1px solid #E7DCC8;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.78rem;
    color: #241D20;
  }
  .opt-chip-preview.correct {
    background: #EAF5ED;
    border-color: #2F7D46;
    color: #2F7D46;
    font-weight: 800;
  }
  .challenge-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
  }
  @media (max-width: 768px) {
    .challenge-row-card,
    .challenge-item-card {
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
    }
    .challenge-row-content {
      width: 100%;
      flex-wrap: wrap;
    }
    .challenge-row-actions {
      width: 100%;
      justify-content: flex-end;
      border-top: 1px dashed #E7DCC8;
      padding-top: 10px;
    }
  }
  .audio-listen-btn {
    all: unset;
    cursor: pointer;
    background: #FFF8E6;
    border: 1px solid #D4AF37;
    color: #7A5F00;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
  }
  .audio-listen-btn:hover {
    background: #D4AF37;
    color: #241D20;
  }

  /* ============ TOP-LEVEL INTERACTIVE LESSON PREVIEW MODAL (#admin-preview-modal) ============ */
  #admin-preview-modal {
    position: fixed; inset: 0; z-index: 999999;
    background: rgba(15, 10, 12, 0.85); backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box;
  }
  @media (max-width: 768px) { #admin-preview-modal { padding: 8px; } }

  .preview-dialog-card {
    background: #F8F3EA; border: 2.5px solid #D4AF37; border-radius: 22px;
    width: min(1380px, calc(100vw - 32px)); height: min(860px, calc(100vh - 32px));
    max-height: calc(100vh - 32px); display: flex; flex-direction: column;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); overflow: hidden; margin: auto;
  }
  @media (max-width: 768px) {
    .preview-dialog-card { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; border: none; }
  }

  .preview-top-bar {
    background: linear-gradient(135deg, #4A0D24 0%, #6F1737 60%, #8F3156 100%);
    color: #F8F3EA; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0; border-bottom: 2px solid rgba(212, 175, 55, 0.35);
  }
  .preview-top-title {
    font-family: var(--font-display, 'Tajawal', sans-serif);
    font-weight: 800; font-size: 1.08rem; display: flex; align-items: center; gap: 10px; color: #FFF8F6;
  }
  .preview-device-switcher {
    display: flex; background: rgba(0, 0, 0, 0.3); padding: 4px; border-radius: 10px; gap: 4px;
    border: 1px solid rgba(255, 255, 255, 0.12);
  }
  .preview-device-btn {
    all: unset; cursor: pointer; padding: 6px 14px; border-radius: 8px;
    font-size: 0.82rem; font-weight: 800; color: #E7DCC8; transition: all 0.2s;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .preview-device-btn:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.1); }
  .preview-device-btn.active {
    background: #D4AF37; color: #241D20; font-weight: 900;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.35);
  }
  .preview-close-btn {
    all: unset; cursor: pointer; width: 36px; height: 36px; border-radius: 10px;
    background: rgba(255, 255, 255, 0.15); display: flex; align-items: center;
    justify-content: center; font-size: 1.15rem; color: #F8F3EA; transition: all 0.2s;
  }
  .preview-close-btn:hover { background: #B53A3A; color: #FFFFFF; transform: rotate(90deg); }

  .preview-main-body {
    flex: 1; display: grid; grid-template-columns: 310px minmax(0, 1fr); overflow: hidden;
    background: #F8F3EA;
  }
  @media (max-width: 900px) {
    .preview-main-body { grid-template-columns: 1fr; }
    .preview-sidebar-info { display: none; }
  }

  .preview-sidebar-info {
    background: #FFFDF9; border-left: 2px solid rgba(168, 130, 58, 0.25); padding: 22px;
    overflow-y: auto; display: flex; flex-direction: column; gap: 16px;
  }
  .preview-info-block {
    background: #FBF8F1; border: 1.5px solid #E7DCC8; border-radius: 14px; padding: 14px 16px;
  }
  .preview-info-block h4 {
    margin: 0 0 6px 0; font-size: 0.78rem; text-transform: uppercase; color: #746B6F; font-weight: 800;
  }
  .preview-info-block p {
    margin: 0; font-size: 0.95rem; font-weight: 800; color: #241D20;
  }

  .preview-viewport-stage {
    background: radial-gradient(1200px 600px at 12% -12%, rgba(168, 130, 58, .14), transparent 60%),
                radial-gradient(1000px 520px at 100% 0%, rgba(140, 36, 48, .08), transparent 55%),
                #F3E9D2;
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start; padding: 20px; overflow-y: auto;
    position: relative;
  }

  .preview-frame-container {
    width: 100%; max-width: 100%; display: flex; justify-content: center;
  }
  .preview-frame-container.mode-tablet {
    width: min(768px, calc(100vw - 32px));
    border: 10px solid #2E2018; border-radius: 28px;
    box-shadow: 0 20px 50px rgba(36, 27, 18, 0.35);
    background: #F3E9D2; overflow: hidden; margin: 10px auto;
    min-height: 700px; max-height: calc(100vh - 120px);
    display: flex; flex-direction: column;
  }
  .preview-frame-container.mode-phone {
    width: min(390px, calc(100vw - 32px));
    border: 10px solid #2E2018; border-radius: 40px;
    box-shadow: 0 20px 50px rgba(36, 27, 18, 0.35);
    background: #F3E9D2; overflow: hidden; margin: 10px auto;
    min-height: 700px; max-height: calc(100vh - 120px);
    display: flex; flex-direction: column;
  }
  .preview-frame-container.mode-phone .preview-student-wrapper,
  .preview-frame-container.mode-tablet .preview-student-wrapper {
    padding: 18px;
    padding-bottom: 120px;
    width: 100%;
  }

  /* Exact Student Game Runner UI Elements Matching Website */
  .preview-student-wrapper {
    width: 100%; max-width: 680px;
    display: flex; flex-direction: column; min-height: 100%;
    position: relative; padding-bottom: 120px; box-sizing: border-box;
  }

  /* Circular Audio Button Exactly Matching User Design */
  .coptic-audio-circle-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    border: 2px solid #D4AF37;
    background: #FAF7EE;
    color: #6F1737;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.18s ease;
    padding: 0;
    box-shadow: 0 2px 6px rgba(168, 130, 58, 0.18);
  }
  .coptic-audio-circle-btn:hover {
    background: #6F1737;
    color: #FAF7EE;
    border-color: #6F1737;
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(111, 23, 55, 0.3);
  }
  .coptic-audio-circle-btn:active {
    transform: scale(0.92);
  }
  .coptic-audio-circle-btn.is-playing {
    background: #1A4A4A;
    color: #FAF7EE;
    border-color: #1A4A4A;
    animation: pulseVocabAudio .8s infinite alternate;
  }
  @keyframes pulseVocabAudio {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
  }

  /* Topbar */
  .runner-topbar {
    width: 100%; display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
  }
  .runner-close-btn {
    all: unset; cursor: pointer; width: 34px; height: 34px; border-radius: 50%;
    background: rgba(168, 130, 58, 0.15); display: flex; align-items: center;
    justify-content: center; font-size: 1.15rem; color: #6B1530; transition: all 0.2s;
    flex-shrink: 0;
  }
  .runner-close-btn:hover { background: #6B1530; color: #FFFFFF; }
  .runner-progress-track {
    flex: 1; height: 16px; background: rgba(168, 130, 58, 0.18);
    border-radius: 10px; overflow: hidden; border: 1px solid rgba(168, 130, 58, 0.35);
  }
  .runner-progress-fill {
    height: 100%; background: linear-gradient(90deg, #6B1530 0%, #8C2438 100%);
    width: 0%; transition: width 0.35s ease; border-radius: 10px;
  }
  .runner-hearts {
    display: flex; align-items: center; gap: 6px; font-family: var(--font-display, 'Tajawal', sans-serif);
    font-weight: 900; color: #FF4B4B; font-size: 1.25rem;
  }
  .runner-xp-badge {
    background: #FAF3E4; border: 1.5px solid #D4B96A; color: #6B1530;
    padding: 4px 12px; border-radius: 20px; font-weight: 800; font-size: 0.88rem;
  }

  /* Question & Coptic Glyph */
  .question-heading {
    font-family: var(--font-display, 'Cairo', 'Tajawal', sans-serif);
    font-size: 1.55rem; font-weight: 900; color: #2E2018; margin: 0 0 20px; text-align: right; line-height: 1.4;
  }
  .coptic-letter-display {
    background: #FAF3E4; border: 2px solid rgba(168, 130, 58, 0.35);
    border-radius: 24px; padding: 28px 20px; text-align: center;
    box-shadow: 0 10px 30px rgba(36, 27, 18, 0.08); margin-bottom: 28px;
  }
  .coptic-big-glyph {
    font-family: 'girges', 'Coptic Girges', 'Noto Sans Coptic', 'Segoe UI Historic', serif;
    font-size: 4.6rem; color: #6B1530; line-height: 1.1;
    display: block; filter: drop-shadow(0 4px 10px rgba(107, 21, 48, 0.25));
    direction: ltr; font-weight: 900;
  }
  .coptic-letter-display .coptic-audio-circle-btn {
    width: 44px; height: 44px; min-width: 44px; margin-top: 14px;
    box-shadow: 0 3px 10px rgba(168, 130, 58, 0.22);
  }
  /* Challenge Responsive Image Card */
  .challenge-image-container {
    width: 100%;
    max-width: 440px;
    margin: 10px auto 20px auto;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
  }
  .challenge-image-card {
    position: relative;
    width: 100%;
    max-width: 380px;
    height: 220px;
    max-height: 38vh;
    border-radius: 18px;
    background: #FAF3E4;
    border: 2px solid rgba(168, 130, 58, 0.35);
    box-shadow: 0 8px 24px rgba(36, 27, 18, 0.08);
    overflow: hidden;
    cursor: zoom-in;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  }
  @media(max-width: 480px) {
    .challenge-image-card {
      height: 180px;
      max-height: 30vh;
      border-radius: 14px;
    }
  }
  .challenge-image-card:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 12px 28px rgba(107, 21, 48, 0.16);
    border-color: #6B1530;
  }
  .challenge-image-tag {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #FFFFFF;
    transition: transform 0.3s ease;
  }
  .challenge-image-card:hover .challenge-image-tag {
    transform: scale(1.03);
  }
  .challenge-image-zoom-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(107, 21, 48, 0.88);
    color: #FFFFFF;
    padding: 5px 11px;
    border-radius: 20px;
    font-size: 0.76rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
    pointer-events: none;
    transition: background 0.2s ease;
  }
  .challenge-image-card:hover .challenge-image-zoom-badge {
    background: rgba(212, 175, 55, 0.95);
    color: #382005;
  }

  /* Global Image Zoom Lightbox Modal */
  .global-image-zoom-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(18, 12, 14, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    transition: opacity 0.22s ease;
    box-sizing: border-box;
    cursor: default;
  }
  .global-image-zoom-modal.active {
    opacity: 1;
  }
  .global-image-zoom-modal .image-zoom-controls {
    position: absolute;
    top: 18px;
    right: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 1000000;
  }
  .global-image-zoom-modal .image-zoom-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition: all 0.18s ease;
  }
  .global-image-zoom-modal .image-zoom-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.08);
  }
  .global-image-zoom-modal .image-zoom-btn.close-btn {
    background: #D4AF37;
    color: #2E1B00;
    border: none;
    font-size: 20px;
  }
  .global-image-zoom-modal .image-zoom-btn.close-btn:hover {
    background: #ECC757;
  }
  .global-image-zoom-modal .image-zoom-viewport {
    max-width: 92vw;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: auto;
  }
  .global-image-zoom-modal #image-zoom-target {
    max-width: 90vw;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
    transition: transform 0.25s cubic-bezier(0.2, 0, 0.2, 1);
    user-select: none;
    cursor: zoom-in;
  }
  .global-image-zoom-modal .image-zoom-caption {
    color: #FFF9E6;
    font-size: 0.98rem;
    font-weight: 800;
    margin-top: 14px;
    text-align: center;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
    max-width: 85vw;
  }
  .global-image-zoom-modal .image-zoom-hint {
    position: absolute;
    bottom: 14px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.8rem;
    pointer-events: none;
    text-align: center;
  }

  /* 3D Option Cards Matching Website */
  .options-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%;
  }
  @media(max-width: 540px){ .options-grid { grid-template-columns: 1fr; } }
  .option-card {
    background: #FAF3E4; border: 2px solid rgba(168, 130, 58, 0.3);
    border-radius: 18px; padding: 18px 20px; font-family: var(--font-display, 'Cairo', 'Tajawal', sans-serif);
    font-size: 1.15rem; font-weight: 800; color: #2E2018; cursor: pointer; text-align: center;
    transition: all 0.15s ease; box-shadow: 0 4px 0 rgba(168, 130, 58, 0.2); user-select: none;
    display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px;
  }
  .option-card:hover:not(.correct):not(.wrong) {
    border-color: #6B1530; transform: translateY(-2px); box-shadow: 0 6px 0 rgba(168, 130, 58, 0.3);
  }
  .option-card.selected {
    background: rgba(168, 130, 58, 0.15) !important; border-color: #6B1530 !important; color: #6B1530 !important;
    box-shadow: 0 4px 0 #6B1530 !important; transform: translateY(-2px);
  }
  .option-card.correct {
    background: rgba(46, 107, 62, 0.15) !important; border-color: #2E6B3E !important;
    color: #2E6B3E !important; box-shadow: 0 4px 0 #2E6B3E !important; pointer-events: none;
    animation: pulseCorrect 0.35s ease;
  }
  .option-card.wrong {
    background: rgba(140, 36, 48, 0.15) !important; border-color: #6B1530 !important;
    color: #6B1530 !important; box-shadow: 0 4px 0 #6B1530 !important;
    animation: shakeWrong 0.45s ease;
  }

  /* Word Tiles Matching Website */
  .write-area { display: flex; flex-direction: column; gap: 24px; align-items: center; width: 100%; direction: ltr !important; }
  .tiles-dropzone {
    width: 100%; min-height: 72px; background: #FAF3E4;
    border: 2px dashed rgba(168, 130, 58, 0.45); border-radius: 18px;
    display: flex; flex-direction: row !important; direction: ltr !important; unicode-bidi: isolate !important;
    flex-wrap: wrap; gap: 10px; padding: 12px 18px;
    align-items: center; justify-content: center; box-sizing: border-box;
  }
  .tiles-pool {
    display: flex; flex-direction: row !important; direction: ltr !important; unicode-bidi: isolate !important;
    flex-wrap: wrap; gap: 12px; justify-content: center; width: 100%;
  }
  .word-tile {
    background: #FAF3E4; border: 2px solid rgba(168, 130, 58, 0.35);
    border-radius: 14px; padding: 12px 20px; font-family: 'girges', 'Coptic Girges', var(--font-display, 'Cairo', 'Tajawal', sans-serif);
    font-size: 1.35rem; font-weight: 900; color: #2E2018; cursor: pointer;
    box-shadow: 0 4px 0 rgba(168, 130, 58, 0.25); transition: all 0.15s; user-select: none;
    direction: ltr !important; unicode-bidi: isolate;
  }
  .word-tile:hover { transform: translateY(-2px); border-color: #6B1530; }

  /* Match Grid Matching Website - تصميم هندسي متناسق وزي بعض */
  .match-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 2.5vw, 16px); width: 100%; max-width: 520px; margin: 10px auto; box-sizing: border-box; }
  .match-col { display: grid; grid-auto-rows: 1fr; gap: clamp(10px, 2vw, 14px); }
  .match-btn {
    width: 100%; height: 100%; min-height: clamp(58px, 8.5vh, 72px);
    background: #FFFFFF; border: 2.5px solid #E2D7C3; border-bottom: 4px solid #C8B89E;
    border-radius: 18px; padding: 10px 14px; font-family: var(--font-display, 'Cairo', 'Tajawal', sans-serif);
    font-size: clamp(1.02rem, 2.2vh, 1.22rem); font-weight: 800; color: #2E2018; cursor: pointer; text-align: center;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03); transition: all 0.14s cubic-bezier(0.34, 1.56, 0.64, 1); user-select: none;
    box-sizing: border-box; line-height: 1.35; text-wrap: balance;
  }
  .match-btn.coptic-font { font-family: 'girges', 'Coptic Girges', 'Noto Sans Coptic', 'Segoe UI Historic', serif; font-size: clamp(1.35rem, 3vh, 1.65rem); color: #6B1530; direction: ltr; }
  .match-btn:hover:not(.matched) { border-color: #A8823A; border-bottom-color: #8C6A28; background: #FFFDF9; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(168, 130, 58, 0.16); }
  .match-btn:active { transform: translateY(2px); border-bottom-width: 2px; }
  .match-btn.selected { border-color: #C5A059 !important; border-bottom-color: #9E7D38 !important; background: #FFF9ED !important; color: #6B1530 !important; box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.28) !important; transform: translateY(1px); }
  .match-btn.matched {
    opacity: 0.42; pointer-events: none; border-color: #2E6B3E !important; border-bottom-color: #1F4C2B !important; border-bottom-width: 2px !important; background: #EDF9F0 !important; color: #1A542A !important; transform: none !important; box-shadow: none !important;
  }
  .match-btn.flash-wrong {
    border-color: #6B1530 !important; background: rgba(140, 36, 48, 0.15) !important;
    animation: shakeWrong 0.45s ease;
  }

  /* Runner Bottom Action Bar Matching Website */
  .runner-footer {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: #FAF3E4; border-top: 2px solid rgba(168, 130, 58, 0.35);
    padding: 18px 24px; display: flex; align-items: center; justify-content: space-between;
    gap: 18px; box-shadow: 0 -8px 24px rgba(36, 27, 18, 0.08); z-index: 10; border-radius: 0 0 20px 20px;
  }
  .mode-phone .runner-footer { border-radius: 0 0 30px 30px; }

  .feedback-msg {
    display: flex; align-items: center; gap: 12px; font-family: var(--font-display, 'Cairo', 'Tajawal', sans-serif);
    font-weight: 800; font-size: 1.05rem; visibility: hidden;
  }
  .feedback-msg.correct { color: #2E6B3E; }
  .feedback-msg.wrong { color: #6B1530; }

  .btn-check-answer {
    min-width: 160px; padding: 15px 32px; font-family: var(--font-display, 'Cairo', 'Tajawal', sans-serif);
    font-size: 1.15rem; font-weight: 900; color: #FFFFFF; background: #6B1530; border: none;
    border-radius: 16px; cursor: pointer; box-shadow: 0 5px 0 #4A0E21; transition: all 0.15s ease;
  }
  .btn-check-answer:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 7px 0 #4A0E21; background: #8C2438; }
  .btn-check-answer:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 #4A0E21; }
  .btn-check-answer:disabled { background: #D4C9B5; color: #8C8070; box-shadow: none; cursor: not-allowed; }
  .btn-continue-ok { background: #2E6B3E !important; box-shadow: 0 5px 0 #1A4225 !important; }
  .btn-continue-ok:hover { background: #37804B !important; }
  .btn-continue-err { background: #6B1530 !important; box-shadow: 0 5px 0 #4A0E21 !important; }
  .btn-continue-err:hover { background: #8C2438 !important; }

  /* Victory Screen */
  .victory-card {
    background: #FFFDF9; border: 3px solid #D4AF37; border-radius: 24px;
    padding: 36px 28px; text-align: center; width: 100%; max-width: 480px; margin: auto;
    box-shadow: 0 16px 40px rgba(36, 27, 18, 0.15); display: flex; flex-direction: column;
    align-items: center; gap: 16px; animation: currFadeIn 0.35s ease;
  }
  .victory-badge {
    width: 80px; height: 80px; border-radius: 50%; background: rgba(212, 175, 55, 0.18);
    border: 2px solid #D4AF37; display: flex; align-items: center; justify-content: center;
    color: #D4AF37; margin-bottom: 4px;
  }
  .victory-stat-box {
    background: #FBF8F1; border: 1.5px solid #E7DCC8; border-radius: 14px;
    padding: 14px 20px; min-width: 130px; text-align: center;
  }
  .victory-stat-val {
    font-size: 1.6rem; font-weight: 900; color: #6F1737; line-height: 1.1;
  }
  .victory-stat-lbl {
    font-size: 0.82rem; font-weight: 700; color: #746B6F; margin-top: 4px;
  }

  @keyframes shakeWrong {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
  }
  @keyframes pulseCorrect {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
  }

  /* ============ DRAG AND DROP STYLING & FEEDBACK ============ */
  .drag-handle-badge,
  .drag-handle-unit,
  .drag-handle-lesson,
  .drag-handle-ch {
    cursor: grab;
    color: #D4AF37;
    background: rgba(212, 175, 55, 0.12);
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 8px;
    padding: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    user-select: none;
    flex-shrink: 0;
  }
  .drag-handle-badge:hover,
  .drag-handle-unit:hover,
  .drag-handle-lesson:hover,
  .drag-handle-ch:hover {
    color: #FFFFFF;
    background: #D4AF37;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
  }
  .drag-handle-badge:active,
  .drag-handle-unit:active,
  .drag-handle-lesson:active,
  .drag-handle-ch:active {
    cursor: grabbing;
    transform: scale(0.95);
  }
  .level-overview-card.dragging,
  .unit-accordion-card.dragging,
  .lesson-item-box.dragging,
  .challenge-row-card.dragging {
    opacity: 0.45 !important;
    transform: scale(0.98);
    border: 2px dashed #D4AF37 !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25) !important;
    cursor: grabbing !important;
  }
  .level-overview-card.drag-over,
  .unit-accordion-card.drag-over,
  .lesson-item-box.drag-over,
  .challenge-row-card.drag-over {
    border: 2px solid #D4AF37 !important;
    background-color: rgba(212, 175, 55, 0.12) !important;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.35) !important;
  }

  /* Draggable Chest Flow Card inside Unit Detail (صندوق المكافأة التفاعلي القابل للسحب في مسار الدروس) */
  .drag-handle-chest {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(212, 175, 55, 0.18);
    color: #8C6A1A;
    cursor: grab;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    user-select: none;
    flex-shrink: 0;
  }
  .drag-handle-chest:hover {
    color: #FFFFFF;
    background: #D4AF37;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
  }
  .drag-handle-chest:active {
    cursor: grabbing;
    transform: scale(0.95);
  }

  .curriculum-chest-flow-card {
    background: linear-gradient(135deg, #FFFDF7 0%, #FFF9EA 100%);
    border: 2px dashed #D4AF37;
    border-radius: 14px;
    padding: 14px 18px;
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    box-shadow: 0 4px 14px rgba(212, 175, 55, 0.12);
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
  }
  .curriculum-chest-flow-card:hover {
    border-style: solid;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(212, 175, 55, 0.25);
  }
  .curriculum-chest-flow-card.dragging {
    opacity: 0.45 !important;
    transform: scale(0.97);
    border: 2px dashed #D4AF37 !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.25) !important;
    cursor: grabbing !important;
  }
  .curriculum-chest-flow-card.drag-over {
    border: 2px solid #8C6A1A !important;
    background: #FFF0C2 !important;
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.4) !important;
  }

  .chest-flow-dropzone {
    border: 2px dashed #D8CDBA;
    background: rgba(245, 240, 230, 0.4);
    border-radius: 10px;
    padding: 8px 14px;
    margin: 6px 0;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 700;
    color: #8C7B68;
    transition: all 0.2s ease;
    cursor: pointer;
  }
  .chest-flow-dropzone:hover,
  .chest-flow-dropzone.drag-over {
    border-color: #D4AF37;
    background: rgba(255, 245, 215, 0.85);
    color: #7A5F00;
    transform: scale(1.01);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
  }

  .unit-chests-chip {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.18) 0%, rgba(212, 175, 55, 0.28) 100%);
    border: 1px solid rgba(212, 175, 55, 0.6);
    color: #6E4E00;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 6px rgba(212, 175, 55, 0.12);
  }

  .chest-add-slot-btn {
    border: 1.5px dashed #D4AF37;
    background: rgba(255, 248, 230, 0.6);
    border-radius: 10px;
    padding: 7px 14px;
    margin: 6px 0;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 800;
    color: #8C6A1A;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .chest-add-slot-btn:hover {
    border-color: #8C6A1A;
    background: #FFF2D1;
    color: #4A0D24;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(212, 175, 55, 0.25);
  }

  /* الصندوق كأنه وحدة في قائمة الوحدات */
  .chest-as-unit-card {
    background: linear-gradient(135deg, #FFFDF8 0%, #FFF8E7 100%) !important;
    border: 2px solid #D4AF37 !important;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.15) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  .chest-as-unit-card:hover {
    border-color: #B88E1C !important;
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.28) !important;
    transform: translateY(-2px);
  }
  .chest-as-unit-card.dragging {
    opacity: 0.55;
    border-style: dashed !important;
  }

  /* الصندوق كأنه تمرين في قائمة التمارين */
  .chest-as-challenge-card {
    background: linear-gradient(135deg, #FFFDF7 0%, #FFF8E8 100%) !important;
    border: 1.8px solid #D4AF37 !important;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.14) !important;
    transition: all 0.2s ease !important;
  }
  .chest-as-challenge-card:hover {
    border-color: #8C6A1A !important;
    box-shadow: 0 4px 14px rgba(212, 175, 55, 0.25) !important;
    transform: translateY(-1px);
  }
  .chest-as-challenge-card.dragging {
    opacity: 0.55;
    border-style: dashed !important;
  }

  /* ============ Realtime Live Indicator & Students Management ============ */
  @keyframes pulseLiveDot {
    0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 6px #22C55E; }
    50% { transform: scale(1.4); opacity: 0.65; box-shadow: 0 0 12px #22C55E; }
  }
  .live-dot {
    display: inline-block;
    vertical-align: middle;
  }
  .badge-admin {
    background: #FEF3C7 !important;
    color: #92400E !important;
    border: 1px solid #FCD34D !important;
    font-weight: 800 !important;
  }
  .badge-student {
    background: #F1F5F9 !important;
    color: #334155 !important;
    border: 1px solid #CBD5E1 !important;
    font-weight: 700 !important;
  }
  .action-btn-sm {
    padding: 5px 9px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all 0.18s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .action-btn-sm:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  }

/* ============ جدول التقويم القبطي في لوحة التحكم ============ */
#table-calendar textarea {
  font-family: inherit;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  background: #fff;
  color: var(--ink);
  line-height: 1.4;
}

#table-calendar input {
  font-family: inherit;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  background: #fff;
  color: var(--ink);
}

#table-calendar tr.dirty {
  background-color: #FFFDF0 !important;
}

.btn-save-row {
  background: var(--madder, #6F1737);
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  transition: all 0.2s;
}

.btn-save-row:hover {
  background: #8A1E45;
  transform: translateY(-1px);
}

/* =========================================================
   ✨ High-End Cinematic Chest Opening Animation System (Admin) ✨
   ========================================================= */
.chest-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(18, 12, 10, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.chest-modal-card {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, #FDF8EE 100%);
  border: 2px solid #E5C158;
  border-radius: 28px;
  max-width: 440px;
  width: 100%;
  padding: 32px 24px 28px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), 0 0 35px rgba(229, 193, 88, 0.25);
  animation: chestModalEntrance 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}
@keyframes chestModalEntrance {
  0% { transform: scale(0.85) translateY(20px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.chest-modal-close {
  position: absolute;
  top: 14px;
  left: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #F1ECE1;
  border: 1px solid #E2D7C3;
  color: #7A6953;
  font-size: 1.2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 30;
}
.chest-modal-close:hover {
  background: #E8DECC;
  color: #4A3E31;
  transform: scale(1.08);
}
.chest-stage-wrap {
  position: relative;
  width: 220px;
  height: 165px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 800px;
}

/* Soft Radiant Sunburst Rays */
.chest-sunburst-rays {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 230px;
  height: 230px;
  margin-top: -115px;
  margin-left: -115px;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 215, 0, 0.15) 0deg 12deg,
    rgba(255, 235, 150, 0.01) 12deg 24deg
  );
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.6) rotate(0deg);
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 0.9) 15%, rgba(0, 0, 0, 0.35) 48%, transparent 72%);
  mask-image: radial-gradient(circle, rgba(0, 0, 0, 0.9) 15%, rgba(0, 0, 0, 0.35) 48%, transparent 72%);
  filter: blur(0.5px);
  z-index: 1;
}

.chest-modal-overlay.is-opened .chest-sunburst-rays {
  opacity: 1;
  transform: scale(1.15) rotate(0deg);
  animation: chestRaySpin 24s linear infinite;
}

@keyframes chestRaySpin {
  from { transform: scale(1.15) rotate(0deg); }
  to { transform: scale(1.15) rotate(360deg); }
}

/* Glowing Ambient Halo */
.chest-ambient-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 170px;
  height: 170px;
  margin-top: -85px;
  margin-left: -85px;
  background: radial-gradient(
    circle,
    rgba(255, 230, 120, 0.45) 0%,
    rgba(255, 195, 50, 0.15) 42%,
    transparent 72%
  );
  border-radius: 50%;
  pointer-events: none;
  filter: blur(10px);
  animation: chestGlowPulse 2.8s ease-in-out infinite alternate;
  z-index: 1;
}

@keyframes chestGlowPulse {
  0% { transform: scale(0.88); opacity: 0.45; }
  100% { transform: scale(1.2); opacity: 0.9; }
}

/* Twinkling Magical Stars & Dust */
.chest-stars-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.chest-star {
  position: absolute;
  color: #FFD700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.8), 0 0 14px rgba(255, 255, 255, 0.9);
  font-family: Arial, sans-serif;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.chest-star.star-1 { top: 6px; right: 18px; font-size: 1.4rem; animation: chestStarTwinkle 2.2s ease-in-out infinite; }
.chest-star.star-2 { top: 20px; left: 16px; font-size: 1.1rem; animation: chestStarTwinkle 2.8s ease-in-out infinite 0.7s; }
.chest-star.star-3 { bottom: 20px; right: 20px; font-size: 1.25rem; animation: chestStarTwinkle 2.5s ease-in-out infinite 1.2s; }
.chest-star.star-4 { bottom: 18px; left: 20px; font-size: 1.45rem; animation: chestStarTwinkle 3.1s ease-in-out infinite 0.4s; }

@keyframes chestStarTwinkle {
  0%, 100% { transform: scale(0.4) rotate(0deg); opacity: 0.2; }
  50% { transform: scale(1.3) rotate(45deg); opacity: 1; filter: drop-shadow(0 0 8px #FFF); }
}

/* Confetti Canvas */
.chest-confetti-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 380px;
  height: 320px;
  pointer-events: none;
  z-index: 20;
}

/* Floating Chest Container */
.chest-icon-wrap {
  position: relative;
  width: 140px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  filter: drop-shadow(0 16px 30px rgba(74, 13, 36, 0.28)) drop-shadow(0 4px 8px rgba(0,0,0,0.15));
  animation: floatChest 3.2s ease-in-out infinite;
  transform-origin: center bottom;
}

.chest-main-svg {
  overflow: visible !important;
}

@keyframes floatChest {
  0%, 100% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-6px) scale(1.01); }
  50% { transform: translateY(-9px) scale(1.015); }
  70% { transform: translateY(-5px) scale(1.005); }
}

/* ═══ Anticipation Wobble: Physics-based with escalating intensity ═══ */
.chest-modal-overlay.is-wobbling .chest-icon-wrap {
  animation: chestWobblePhysics 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}

@keyframes chestWobblePhysics {
  0%   { transform: scale(1) rotate(0deg) translateY(0); }
  8%   { transform: scale(1.02) rotate(-3deg) translateY(-1px); }
  16%  { transform: scale(1.05) rotate(4deg) translateY(-2px); }
  24%  { transform: scale(1.07) rotate(-6deg) translateY(-3px); }
  32%  { transform: scale(1.09) rotate(7deg) translateY(-4px); }
  40%  { transform: scale(1.11) rotate(-8deg) translateY(-5px); }
  48%  { transform: scale(1.13) rotate(9deg) translateY(-6px); }
  56%  { transform: scale(1.15) rotate(-10deg) translateY(-4px); }
  64%  { transform: scale(1.17) rotate(8deg) translateY(-2px); }
  72%  { transform: scale(1.14) rotate(-5deg) translateY(-1px); }
  80%  { transform: scale(1.1) rotate(3deg) translateY(0); }
  88%  { transform: scale(1.08) rotate(-1.5deg) translateY(0); }
  94%  { transform: scale(1.06) rotate(0.5deg) translateY(0); }
  100% { transform: scale(1.05) rotate(0deg) translateY(0); }
}

/* ═══ Closed Lid: Dramatic 3D flip with spring overshoot ═══ */
.chest-closed-lid {
  transform-origin: 48px 36px;
  transform: perspective(400px) translateY(0) rotateX(0deg) scale(1);
  opacity: 1;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.25s ease 0.12s;
}
.chest-modal-overlay.is-opened .chest-closed-lid {
  transform: perspective(400px) translateY(-38px) rotateX(92deg) scale(0.85);
  opacity: 0;
  pointer-events: none;
}

/* ═══ Open Lid: Spring-loaded reveal with overshoot bounce ═══ */
.chest-open-lid {
  transform-origin: 48px 40px;
  transform: perspective(400px) translateY(18px) rotateX(-80deg) scale(0.8);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.08s, opacity 0.3s ease 0.08s;
  pointer-events: none;
}
.chest-modal-overlay.is-opened .chest-open-lid {
  transform: perspective(400px) translateY(0) rotateX(0deg) scale(1);
  opacity: 1;
}

/* ═══ Glowing Ruby Crystals: Staggered emergence with float ═══ */
.chest-crystals {
  transform-origin: 48px 44px;
  transform: translateY(16px) scale(0.4);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.18s, opacity 0.45s ease 0.18s;
}
.chest-modal-overlay.is-opened .chest-crystals {
  transform: translateY(0) scale(1);
  opacity: 1;
  animation: crystalFloat 3s ease-in-out infinite 0.9s;
}

@keyframes crystalFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.03); }
}

/* ═══ Treasure Micro-Animations: XP Stars ⭐, Hearts ❤️ & Sparkles ✨ ═══ */
.chest-treasure-stars {
  transform-origin: 48px 24px;
}
.chest-modal-overlay.is-opened .chest-treasure-stars {
  animation: treasureStarPulse 2.6s ease-in-out infinite alternate 0.3s;
}

@keyframes treasureStarPulse {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
    filter: drop-shadow(0 0 3px rgba(34, 139, 230, 0.6));
  }
  50% {
    transform: translateY(-4px) scale(1.06) rotate(3deg);
    filter: drop-shadow(0 0 10px rgba(51, 154, 240, 0.95)) drop-shadow(0 0 18px rgba(34, 139, 230, 0.5));
  }
  100% {
    transform: translateY(-6px) scale(1.08) rotate(-2deg);
    filter: drop-shadow(0 0 14px rgba(51, 154, 240, 1)) drop-shadow(0 0 22px rgba(116, 192, 252, 0.6));
  }
}

.chest-treasure-hearts {
  transform-origin: 44px 30px;
}
.chest-modal-overlay.is-opened .chest-treasure-hearts {
  animation: treasureHeartPulse 1.9s ease-in-out infinite alternate 0.5s;
}

@keyframes treasureHeartPulse {
  0% {
    transform: translateY(0) scale(0.96);
    filter: drop-shadow(0 0 3px rgba(224, 49, 49, 0.6));
  }
  40% {
    transform: translateY(-3px) scale(1.08);
    filter: drop-shadow(0 0 12px rgba(255, 107, 107, 0.95));
  }
  55% {
    transform: translateY(-2px) scale(1.02);
  }
  75% {
    transform: translateY(-5px) scale(1.12);
    filter: drop-shadow(0 0 16px rgba(224, 49, 49, 1)) drop-shadow(0 0 24px rgba(255, 135, 135, 0.7));
  }
  100% {
    transform: translateY(-4px) scale(1.05);
  }
}

.chest-treasure-sparkles {
  transform-origin: 48px 24px;
}
.chest-modal-overlay.is-opened .chest-treasure-sparkles {
  animation: treasureSparkleBlink 1.5s ease-in-out infinite alternate 0.2s;
}

@keyframes treasureSparkleBlink {
  0% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.25); filter: drop-shadow(0 0 6px #ffffff); }
  100% { opacity: 0.5; transform: scale(0.95); }
}

/* ═══ Interior Volumetric Light Beam ═══ */
.chest-svg-light-beam {
  pointer-events: none;
  opacity: 0;
  transform-origin: 48px 42px;
  transform: scaleY(0.3) scaleX(0.7);
  transition: opacity 0.5s ease 0.15s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
}
.chest-modal-overlay.is-opened .chest-svg-light-beam {
  opacity: 0.8;
  transform: scaleY(1) scaleX(1);
  animation: chestBeamPulse 2.5s ease-in-out infinite alternate 0.7s;
}

@keyframes chestBeamPulse {
  0% { opacity: 0.55; transform: scaleY(0.92) scaleX(0.95); filter: brightness(0.9); }
  100% { opacity: 0.9; transform: scaleY(1.08) scaleX(1.05); filter: brightness(1.15); }
}

/* ═══ Golden Body Shimmer on Open ═══ */
.chest-svg-body {
  transition: filter 0.4s ease 0.1s;
}
.chest-modal-overlay.is-opened .chest-svg-body {
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.4));
  animation: chestBodyGlow 2s ease-in-out infinite alternate 0.5s;
}

@keyframes chestBodyGlow {
  0% { filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.3)); }
  100% { filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.6)); }
}

.chest-modal-title {
  font-family: inherit;
  font-size: 1.65rem;
  font-weight: 900;
  color: #8C2237;
  margin: 0 0 8px;
}
.chest-modal-desc {
  color: #6C5A4E;
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0 0 20px;
}
.chest-rewards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 22px;
}

/* ✨ Premium Animated Sparkle for Reward Icons */
@keyframes rewardIconPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px currentColor); }
  50% { transform: scale(1.18); filter: drop-shadow(0 0 14px currentColor); }
}
@keyframes rewardCardShine {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes rewardStarSpin {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-8deg) scale(1.12); }
  50% { transform: rotate(0deg) scale(1); }
  75% { transform: rotate(8deg) scale(1.12); }
  100% { transform: rotate(0deg) scale(1); }
}
@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.25); }
  30% { transform: scale(0.95); }
  45% { transform: scale(1.15); }
}

/* Staggered Spring Pop-in for Reward Cards */
.chest-reward-card {
  position: relative;
  padding: 18px 14px;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(22px) scale(0.82);
  transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  overflow: hidden;
}
/* Glassmorphism shimmer sweep on cards */
.chest-reward-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.55) 50%, transparent 60%);
  background-size: 200% 100%;
  animation: rewardCardShine 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
.chest-modal-overlay.is-opened .chest-reward-card:nth-child(1) {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.25s;
}
.chest-modal-overlay.is-opened .chest-reward-card:nth-child(2) {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.42s;
}
.chest-modal-overlay.is-opened .chest-reward-card:nth-child(3) {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.55s;
}

.chest-reward-card:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 12px 32px rgba(0,0,0,0.12); }

/* ═══ XP Reward Card ═══ */
.chest-reward-card.xp-reward {
  background: linear-gradient(145deg, #E7F5FF 0%, #C3E3FF 40%, #D0EBFF 100%);
  border: 2px solid #74C0FC;
  box-shadow: 0 8px 28px rgba(0, 163, 255, 0.22), inset 0 -2px 8px rgba(0, 120, 255, 0.08);
}
.chest-reward-card.xp-reward .reward-icon-wrap {
  color: #228be6;
  animation: rewardStarSpin 2.5s ease-in-out infinite;
}

/* ═══ Heart Reward Card ═══ */
.chest-reward-card.heart-reward {
  background: linear-gradient(145deg, #FFF0F2 0%, #FFD6DE 40%, #FFE3E8 100%);
  border: 2px solid #FF8FA3;
  box-shadow: 0 8px 28px rgba(255, 75, 75, 0.22), inset 0 -2px 8px rgba(255, 50, 50, 0.08);
}
.chest-reward-card.heart-reward .reward-icon-wrap {
  color: #e03131;
  animation: heartBeat 1.6s ease-in-out infinite;
}

/* ═══ Badge Reward Card ═══ */
.chest-reward-card.badge-reward {
  background: linear-gradient(145deg, #FFF9DB 0%, #FFECAA 40%, #FFF3BF 100%);
  border: 2px solid #F59F00;
  box-shadow: 0 8px 28px rgba(245, 159, 0, 0.22), inset 0 -2px 8px rgba(200, 130, 0, 0.08);
}
.chest-reward-card.badge-reward .reward-icon-wrap {
  color: #e67700;
  animation: rewardStarSpin 3s ease-in-out infinite;
}

/* Icon Wrapper (large centered icon above value) */
.reward-icon-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin-bottom: 2px;
}
.reward-icon-wrap svg {
  filter: drop-shadow(0 3px 8px currentColor);
}

/* Glow ring around icon */
.reward-icon-wrap::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2.5px solid currentColor;
  opacity: 0.25;
  animation: rewardIconPulse 2s ease-in-out infinite;
}

.reward-card-val {
  position: relative;
  z-index: 2;
  font-family: inherit;
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.1;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.02em;
}
.reward-card-val.xp-val { color: #0068B8; }
.reward-card-val.heart-val { color: #C92A2A; }
.reward-card-val.badge-val { color: #C87600; }
.reward-card-lbl {
  position: relative;
  z-index: 2;
  font-size: 0.82rem;
  font-weight: 700;
  color: #6B5C4F;
  letter-spacing: 0.01em;
}

/* 3D Gold Claim Button with Shimmer Sweep */
.btn-3d-gold-claim {
  position: relative;
  width: 100%;
  padding: 14px 22px;
  background: linear-gradient(180deg, #FFD43B 0%, #FAB005 100%);
  border: none;
  border-bottom: 4.5px solid #D98200;
  border-radius: 18px;
  color: #4A2E00;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 8px 20px rgba(250, 176, 5, 0.35);
  transition: all 0.15s ease;
  overflow: hidden;
}
.btn-3d-gold-claim:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(250, 176, 5, 0.45);
}
.btn-3d-gold-claim:active {
  transform: translateY(2px);
  border-bottom-width: 2px;
}
.btn-3d-gold-claim::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 50%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: rotate(25deg);
  animation: buttonShimmer 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes buttonShimmer {
  0% { left: -60%; }
  35% { left: 130%; }
  100% { left: 130%; }
}

/* ============ شارات حالة النشاط اللحظي (Realtime Presence Badges) ============ */
.live-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 0.84rem;
  font-weight: 800;
  white-space: nowrap;
  letter-spacing: 0.2px;
  line-height: 1.35;
  cursor: default;
  user-select: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.live-status-pill.is-online,
.col-last-active .live-status-pill.is-online {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  color: #FFFFFF !important;
  border: 1.5px solid #34D399 !important;
  box-shadow: 0 3px 12px rgba(5, 150, 105, 0.42), 0 0 0 1px rgba(52, 211, 153, 0.35) !important;
  font-weight: 900 !important;
  letter-spacing: 0.3px;
  animation: onlinePillGlow 2.2s infinite alternate;
}

.live-status-pill.is-online span {
  color: #FFFFFF !important;
}

.live-status-pill.is-online:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(5, 150, 105, 0.55), 0 0 0 2px rgba(52, 211, 153, 0.5) !important;
}

@keyframes onlinePillGlow {
  0% {
    box-shadow: 0 2px 10px rgba(5, 150, 105, 0.35), 0 0 0 1px rgba(52, 211, 153, 0.25);
    border-color: #34D399;
  }
  100% {
    box-shadow: 0 4px 18px rgba(5, 150, 105, 0.6), 0 0 0 2.5px rgba(52, 211, 153, 0.45);
    border-color: #6EE7B7;
  }
}

.live-dot-pulse {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34D399 !important;
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 0 8px #A7F3D0 !important;
}

.live-dot-pulse::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 50%;
  background: rgba(52, 211, 153, 0.75);
  animation: onlinePulseRing 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes onlinePulseRing {
  0% {
    transform: scale(0.85);
    opacity: 0.95;
  }
  70% {
    transform: scale(2.6);
    opacity: 0;
  }
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

/* 🔵 نشط اليوم (Active Today): أزرق ملكي سماوي أنيق وواضح جداً لتمييزه فوراً عن الأخضر الحي */
.live-status-pill.is-today,
.col-last-active .live-status-pill.is-today {
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%) !important;
  color: #1D4ED8 !important;
  border: 1.5px solid #93C5FD !important;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.16) !important;
  font-weight: 800 !important;
}

.live-status-pill.is-today span {
  color: #1D4ED8 !important;
}

.live-status-pill.is-today:hover {
  background: #DBEAFE !important;
  border-color: #60A5FA !important;
}

.today-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3B82F6 !important;
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 0 5px rgba(59, 130, 246, 0.6) !important;
}

.live-status-pill.is-past,
.col-last-active .live-status-pill.is-past {
  background: #F8FAFC;
  color: #475569;
  border: 1px solid #E2E8F0;
  font-family: monospace, inherit;
  font-size: 0.82rem;
  font-weight: 700;
  direction: ltr;
}

.live-status-empty {
  color: #94A3B8;
  font-size: 0.82rem;
  font-weight: 600;
}

/* ==========================================================================
   Coptic Letter & Word Overview Card Component (Interactive Flashcard & Runner)
   ========================================================================== */
.coptic-overview-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
  margin: 12px auto 20px;
  width: 100%;
  box-sizing: border-box;
  direction: rtl;
}
.letter-overview-card {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFDF9 100%);
  border: 2px solid #E6D7C3;
  border-radius: 20px;
  padding: 18px 22px;
  box-shadow: 0 6px 20px rgba(74, 13, 36, 0.06);
  position: relative;
  box-sizing: border-box;
}
.letter-overview-header {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1.5px dashed #E8DAC6;
  padding-bottom: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.letter-glyph-box {
  min-width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #FFF9F0 0%, #F5ECE0 100%);
  border: 2px solid #D6C3A5;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.04);
  flex-shrink: 0;
  padding: 0 8px;
  box-sizing: border-box;
}
.letter-glyph-val {
  font-size: 2.5rem;
  color: #6F1737;
  line-height: 1;
  font-weight: 800;
  font-family: 'coptic_font', 'girges', 'Segoe UI Historic', 'Noto Sans Coptic', sans-serif;
  direction: ltr;
}
.letter-meta-col {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.letter-meta-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.letter-name-title {
  font-size: 1.25rem;
  font-weight: 900;
  color: #3A2315;
}
.coptic-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.badge-vowel {
  background: linear-gradient(135deg, #E65100 0%, #F57C00 100%);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(230, 81, 0, 0.25);
}
.badge-consonant {
  background: linear-gradient(135deg, #0F4C81 0%, #1976D2 100%);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(15, 76, 129, 0.25);
}
.badge-symbol {
  background: linear-gradient(135deg, #6A1B9A 0%, #8E24AA 100%);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(106, 27, 154, 0.25);
}
.badge-compound {
  background: linear-gradient(135deg, #00695C 0%, #00897B 100%);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(0, 105, 92, 0.25);
}
.badge-demotic {
  background: linear-gradient(135deg, #795548 0%, #A1887F 100%);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(121, 85, 72, 0.25);
}
.badge-multi {
  background: linear-gradient(135deg, #880E4F 0%, #AD1457 100%);
  color: #FFE082;
  border: 1px solid #FFE082;
  box-shadow: 0 2px 8px rgba(136, 14, 79, 0.25);
}
.letter-pron-preview {
  font-size: 0.96rem;
  color: #5D4037;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.letter-pron-val {
  color: #8E1B3A;
  font-weight: 900;
  background: #FDF4E6;
  padding: 2px 8px;
  border-radius: 8px;
  border: 1px solid #ECD4B6;
}
.letter-audio-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.btn-listen-letter {
  background: linear-gradient(135deg, #6F1737 0%, #8A1E45 100%);
  color: #FFFFFF;
  border: none;
  border-radius: 50px;
  padding: 8px 16px;
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(111, 23, 55, 0.25);
  transition: all 0.2s ease;
}
.btn-listen-letter:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(111, 23, 55, 0.35);
}
.btn-listen-letter:active {
  transform: translateY(1px);
}
.letter-rules-box {
  background: #FBF8F2;
  border: 1px solid #EBDDC9;
  border: 1.5px solid #EBDDC9;
  border-radius: 14px;
  padding: 14px 16px;
  box-sizing: border-box;
  width: 100%;
}
.letter-rules-title {
  font-size: 0.94rem;
  font-weight: 800;
  color: #6F1737;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.letter-rules-list {
  margin: 0;
  padding-right: 20px;
  list-style-type: decimal;
  color: #3E2C22;
  font-size: 0.94rem;
  line-height: 1.7;
  font-weight: 600;
}
.letter-rules-list.single-rule {
  list-style-type: none;
  padding-right: 4px;
}
.letter-rules-list li {
  margin-bottom: 4px;
}
.word-overview-card {
  background: linear-gradient(180deg, #FFFDF8 0%, #FBF6EC 100%);
  border: 2px solid #E4D2B8;
  border-radius: 20px;
  padding: 18px 20px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
  width: 100%;
}
.word-card-title {
  font-size: 1.05rem;
  font-weight: 900;
  color: #5D371E;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1.5px solid #ECDDC5;
  padding-bottom: 8px;
}
.word-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  align-items: stretch;
}
@media (min-width: 580px) {
  .word-card-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
}
.word-grid-cell {
  background: #FFFFFF;
  border: 1.5px solid #EBDDC9;
  border-radius: 14px;
  padding: 12px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-height: 86px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  box-sizing: border-box;
}
.cell-label {
  font-size: 0.76rem;
  font-weight: 800;
  color: #8D725C;
  text-transform: uppercase;
}
.cell-coptic-val {
  font-size: 1.7rem;
  color: #6F1737;
  font-weight: 800;
  font-family: 'coptic_font', 'girges', 'Segoe UI Historic', 'Noto Sans Coptic', sans-serif;
  line-height: 1.2;
}
.cell-phonetic-val {
  font-size: 1.15rem;
  color: #A3284B;
  font-weight: 900;
}
.cell-meaning-val {
  font-size: 1.05rem;
  color: #2D1B12;
  font-weight: 800;
}
.btn-listen-word {
  background: #FAF3E6;
  border: 1.5px solid #C4A052;
  color: #6F1737;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  box-shadow: 0 2px 6px rgba(196, 160, 82, 0.18);
  transition: all 0.2s ease;
}
.btn-listen-word:hover {
  background: #C4A052;
  color: #FFFFFF;
  transform: translateY(-1px);
}
.btn-listen-word:active {
  transform: translateY(1px);
}

/* Overview Editor Specific Styles in Dashboard */
.tv-editor-box {
  background: #FFFFFF;
  border: 1.5px solid #E6D7C3;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.tv-editor-header {
  font-weight: 800;
  color: #6F1737;
  font-size: 0.95rem;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px dashed #ECD4B6;
  padding-bottom: 8px;
}
.tv-rule-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.tv-rule-num {
  font-weight: 800;
  color: #6F1737;
  min-width: 24px;
  text-align: center;
}
.tv-rule-input {
  flex: 1;
  border: 1.5px solid #D9C9B4;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.9rem;
  font-family: inherit;
}
.tv-live-preview-container {
  background: #FDFBF7;
  border: 2px dashed #C4A052;
  border-radius: 16px;
  padding: 14px;
  margin-top: 14px;
}
/* ============================================================
   أنماط الشاشات المستقلة للنبذة في الداش بورد (Letter & Word Overviews)
   ============================================================ */
.overview-step-pill-wrapper {
  display: flex;
  justify-content: center;
  margin: 4px auto 10px;
  width: 100%;
}
.overview-step-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 16px;
  border-radius: 20px;
  font-size: 0.84rem;
  font-weight: 800;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.overview-step-pill.step-letter {
  background: linear-gradient(135deg, #6F1737 0%, #8E1B3A 100%);
  color: #FFF6E5;
  border: 1px solid #D6A856;
}
.overview-step-pill.step-word {
  background: linear-gradient(135deg, #0F4C81 0%, #1976D2 100%);
  color: #FFFFFF;
  border: 1px solid #82B1FF;
}
.overview-screen-title {
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  color: #3A2315 !important;
  margin-bottom: 12px !important;
  text-align: center;
}
.coptic-overview-wrap.single-view {
  max-width: 580px;
  margin: 8px auto 20px;
  width: 100%;
}
.hero-letter-card {
  border: 2px solid #DCC9AF !important;
  box-shadow: 0 8px 24px rgba(111, 23, 55, 0.08) !important;
}
.hero-audio-btn {
  padding: 12px 18px !important;
  font-size: 0.96rem !important;
  border-radius: 14px !important;
  width: 100%;
}
.hero-word-card {
  border: 2px solid #DCC9AF !important;
  box-shadow: 0 8px 24px rgba(15, 76, 129, 0.08) !important;
  padding: 20px !important;
}
.word-card-hero-banner {
  background: linear-gradient(135deg, #FFF9EE 0%, #F5ECE0 100%);
  border: 2px dashed #D6C3A5;
  border-radius: 18px;
  padding: 18px 14px;
  text-align: center;
  margin-bottom: 16px;
}
.word-card-letter-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  border: 1px solid #DAC8B1;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.84rem;
  font-weight: 800;
  color: #6F1737;
  margin-bottom: 8px;
}
.word-card-letter-tag .tag-label {
  color: #8D725C;
  font-weight: 700;
}
.word-card-coptic-huge {
  font-size: 2.8rem;
  color: #6F1737;
  font-weight: 900;
  font-family: 'coptic_font', 'girges', sans-serif !important;
  line-height: 1.15;
  direction: ltr !important;
  letter-spacing: 1px;
  margin: 4px 0 2px;
}
.word-card-details-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: #FFFFFF;
  border: 1.5px solid #EBDDC9;
  border-radius: 16px;
  padding: 14px 16px;
  gap: 14px;
  margin-bottom: 16px;
}
.word-detail-block {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}
.word-detail-label {
  font-size: 0.8rem;
  font-weight: 800;
  color: #8C6D52;
}
.word-detail-val.phonetic {
  font-size: 1.35rem;
  font-weight: 900;
  color: #9C1F45;
}
.word-detail-val.meaning {
  font-size: 1.3rem;
  font-weight: 900;
  color: #2D1B12;
}
.word-detail-divider {
  width: 1.5px;
  background: #E8DAC6;
  margin: 4px 0;
}
.word-audio-action-row {
  width: 100%;
  margin-bottom: 14px;
}
.btn-listen-word-hero {
  width: 100%;
  background: linear-gradient(135deg, #0F4C81 0%, #1976D2 100%);
  color: #FFFFFF;
  border: none;
  border-radius: 14px;
  padding: 12px 18px;
  font-size: 0.96rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(15, 76, 129, 0.25);
  transition: all 0.2s ease;
}
.overview-exercise-hint {
  background: #FFFDF7;
  border: 1.5px solid #F0DEB8;
  border-radius: 14px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: #5D4327;
  font-weight: 700;
  text-align: right;
}

/* ==========================================================================
   MODERN ENTERPRISE STUDENTS MANAGEMENT PANEL (#panel-users)
   Zero Stickers/Emojis — Pure SVG Icons & High-Density Clear Layout
   ========================================================================== */

/* 1. Header Banner & Action Header */
.panel-modern-header {
  background: linear-gradient(135deg, #4A0D24 0%, #6F1737 60%, #8C2448 100%);
  color: #F7F3EA;
  padding: 22px 26px;
  border-radius: 16px;
  margin-bottom: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  box-shadow: 0 4px 18px rgba(74, 13, 36, 0.22);
}
.panel-header-title-box {
  display: flex;
  align-items: center;
  gap: 14px;
}
.panel-header-icon {
  width: 46px;
  height: 46px;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.panel-header-icon svg {
  stroke: #F4E9C9;
}
.panel-header-title-box h2 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: -0.02em;
}
.panel-header-title-box p {
  margin: 3px 0 0;
  font-size: 0.82rem;
  color: rgba(247, 243, 234, 0.82);
  font-weight: 500;
}
.panel-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.btn-primary-action {
  background: linear-gradient(135deg, #A8823A 0%, #C3994B 100%);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-family: inherit;
  font-weight: 800;
  font-size: 0.88rem;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.22s var(--ease-float);
  box-shadow: 0 3px 10px rgba(168, 130, 58, 0.35);
}
.btn-primary-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(168, 130, 58, 0.45);
  background: linear-gradient(135deg, #B89042 0%, #D4A956 100%);
}
.btn-primary-action svg {
  stroke: #FFFFFF;
}

/* 2. KPI Cards Grid (.students-stats-grid) */
.students-stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 1400px) {
  .students-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}
.stat-card-modern {
  background: #FFFFFF;
  border: 1.5px solid #EBE0D0;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(45, 27, 18, 0.03);
  transition: transform 0.22s var(--ease-float), box-shadow 0.22s, border-color 0.22s;
}
.stat-card-modern:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(45, 27, 18, 0.08);
  border-color: #D4C1A5;
}
.stat-card-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-card-icon-box.icon-users,
.stat-card-icon-box.kpi-total {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  color: #1D4ED8;
}
.stat-card-icon-box.icon-online,
.stat-card-icon-box.kpi-online {
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  color: #047857;
}
.stat-card-icon-box.icon-xp,
.stat-card-icon-box.kpi-xp {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  color: #B45309;
}
.stat-card-icon-box.icon-lessons,
.stat-card-icon-box.kpi-lessons {
  background: #FAF5FF;
  border: 1px solid #E9D5FF;
  color: #7E22CE;
}
.stat-card-icon-box.icon-deleted,
.stat-card-icon-box.kpi-deleted {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #B91C1C;
}
.stat-card-data,
.stat-card-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.stat-card-modern .num,
.stat-card-val {
  font-size: 1.45rem;
  font-weight: 900;
  color: #2D1B12;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.stat-card-modern .lbl,
.stat-card-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #786C63;
  margin-top: 3px;
  white-space: nowrap;
}

/* 3. Modern Filter & Search Bar (.students-filter-bar-modern) */
.students-filter-bar-modern {
  background: #FFFFFF;
  border: 1.5px solid #E6D8C4;
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  box-shadow: 0 2px 8px rgba(45, 27, 18, 0.04);
}
.filter-search-box {
  position: relative;
  flex: 1;
  min-width: 280px;
  max-width: 520px;
  display: flex;
  align-items: center;
}
.filter-search-box .search-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  stroke: #8C7B6D;
  flex-shrink: 0;
}
.filter-search-box input,
#input-search-students {
  width: 100%;
  box-sizing: border-box;
  height: 42px;
  padding: 0 42px 0 38px;
  background: #FAF7F0;
  border: 1.5px solid #D6C7B2;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: #2D1B12;
  outline: none;
  transition: all 0.2s ease;
}
.filter-search-box .btn-clear-search {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: #E5E7EB;
  color: #6B7280;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  z-index: 2;
}
.filter-search-box .btn-clear-search:hover {
  background: #6B1530;
  color: #FFFFFF;
}
.filter-search-box input:focus,
#input-search-students:focus {
  background: #FFFFFF;
  border-color: #6B1530;
  box-shadow: 0 0 0 3px rgba(107, 21, 48, 0.12);
}
.filter-dropdowns-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.filter-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.filter-select-wrap select,
#select-filter-role,
#select-sort-students {
  height: 42px;
  padding: 0 34px 0 14px;
  background: #FAF7F0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B1530' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat left 12px center;
  border: 1.5px solid #D6C7B2;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  color: #3E2D22;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.filter-select-wrap select:focus,
#select-filter-role:focus,
#select-sort-students:focus {
  background-color: #FFFFFF;
  border-color: #6B1530;
  box-shadow: 0 0 0 3px rgba(107, 21, 48, 0.12);
}
.filter-count-pill,
#students-filter-count {
  height: 42px;
  padding: 0 16px;
  border-radius: 10px;
  background: #F4ECE1;
  border: 1.5px solid #DFD2BF;
  color: #5B4332;
  font-size: 0.82rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  box-sizing: border-box;
}

/* 4. Modern Students Table Container (.table-container-modern) */
.table-container-modern {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #FFFFFF;
  border: 1.5px solid #E6D8C4;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(45, 27, 18, 0.05);
  margin-bottom: 24px;
  position: relative;
}
.table-container-modern::-webkit-scrollbar {
  height: 9px;
}
.table-container-modern::-webkit-scrollbar-track {
  background: #F5EFE6;
  border-radius: 6px;
}
.table-container-modern::-webkit-scrollbar-thumb {
  background: #D4C3AC;
  border-radius: 6px;
}
.table-container-modern::-webkit-scrollbar-thumb:hover {
  background: #B9A488;
}

#table-users {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
  font-family: inherit;
  font-size: 0.86rem;
  background: #FFFFFF;
}

/* Table Header */
#table-users thead tr th {
  background: #F7EFE4;
  color: #4A3022;
  font-family: var(--font-display, inherit);
  font-weight: 800;
  font-size: 0.84rem;
  padding: 14px 16px;
  text-align: right;
  border-bottom: 2px solid #DECBB1;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
#table-users thead tr th:first-child {
  border-top-right-radius: 12px;
}

/* Sticky Action Column Header */
#table-users thead tr th.sticky-actions-header {
  position: sticky;
  left: 0;
  z-index: 8;
  background: #F2E8DC;
  text-align: center;
  border-right: 1.5px solid #DECBB1;
  box-shadow: 4px 0 12px rgba(45, 27, 18, 0.08);
  border-top-left-radius: 12px;
}

/* Table Body Rows */
.student-table-row {
  cursor: pointer;
  transition: background-color 0.18s ease;
  border-bottom: 1px solid #F0E6D6;
}
.student-table-row:nth-child(even) {
  background-color: #FCFBF9;
}
.student-table-row:hover {
  background-color: #F8F3EA !important;
}
.student-table-row.row-deleted {
  background-color: #FFF5F5 !important;
  opacity: 0.85;
}
.student-table-row.row-banned {
  background-color: #FEF3C7 !important;
}

#table-users tbody td {
  padding: 13px 16px;
  vertical-align: middle;
  border-bottom: 1px solid #EFE4D3;
  color: #2D1B12;
}

/* Column 1: Index Number */
#table-users th:nth-child(1),
#table-users td.col-index {
  width: 48px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: #8C7B6D;
}

/* Column 2: Student Profile Info */
#table-users th:nth-child(2),
#table-users td.col-student-info {
  width: 24%;
  min-width: 230px;
}
.student-profile-flex {
  display: flex;
  align-items: center;
  gap: 12px;
}
.student-avatar-wrap {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, #6B1530 0%, #A8823A 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.student-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.student-avatar-initial {
  color: #FFFFFF;
  font-weight: 900;
  font-size: 1.15rem;
  line-height: 1;
}
.student-meta-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.student-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.student-full-name {
  font-weight: 800;
  font-size: 0.92rem;
  color: #241D20;
  line-height: 1.25;
}
.student-age-pill {
  font-size: 0.7rem;
  font-weight: 700;
  color: #6B1530;
  background: #FDF2F4;
  border: 1px solid #F5D0D7;
  padding: 1px 6px;
  border-radius: 6px;
}
.student-badges-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.student-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
}
.student-role-badge.role-admin {
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FCD34D;
}
.student-role-badge.role-super-admin {
  background: #FEF3C7;
  color: #78350F;
  border: 1px solid #F59E0B;
  box-shadow: 0 1px 3px rgba(245, 158, 11, 0.2);
}
.student-role-badge.role-student {
  background: #EFF6FF;
  color: #1E40AF;
  border: 1px solid #BFDBFE;
}
.student-role-badge svg {
  flex-shrink: 0;
}
.student-id-code {
  font-size: 0.7rem;
  font-family: monospace;
  color: #8C7B6D;
  background: #F5EFE6;
  padding: 1px 5px;
  border-radius: 4px;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 6px;
}
.status-pill.status-deleted {
  background: #FEE2E2;
  color: #991B1B;
  border: 1px solid #FCA5A5;
}
.status-pill.status-banned {
  background: #FEF2F2;
  color: #B91C1C;
  border: 1.5px solid #EF4444;
}

/* Column 3: Contact & Registration */
#table-users th:nth-child(3),
#table-users td.col-contact-info {
  width: 22%;
  min-width: 210px;
}
.contact-items-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.contact-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #4A3A2F;
}
.contact-line svg {
  flex-shrink: 0;
  stroke: #7A6953;
}
.contact-text {
  font-weight: 600;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.phone-link {
  color: #15803D;
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.15s;
}
.phone-link:hover {
  color: #047857;
  text-decoration: underline;
}
.phone-link svg {
  stroke: #15803D;
}
.no-phone {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #A39688;
  font-size: 0.76rem;
}
.auth-provider-tag {
  display: flex;
  align-items: center;
  margin-top: 2px;
}
.auth-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 6px;
}
.auth-tag.auth-google {
  background: #FFFFFF;
  border: 1px solid #D5E1F0;
  color: #374151;
}
.auth-tag.auth-phone {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  color: #15803D;
}
.auth-tag.auth-phone svg {
  stroke: #15803D;
}
.auth-tag.auth-email {
  background: #F5EFE6;
  border: 1px solid #E0D3C0;
  color: #6B1530;
}
.auth-tag.auth-email svg {
  stroke: #6B1530;
}

/* Column 4: Level & XP */
#table-users th:nth-child(4),
#table-users td.col-level-xp {
  width: 14%;
  min-width: 135px;
}
.level-xp-stack {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.xp-badge-val {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border: 1px solid #FCD34D;
  color: #B45309;
  font-weight: 900;
  font-size: 0.84rem;
  padding: 3px 9px;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(245, 158, 11, 0.15);
  width: fit-content;
}
.xp-badge-val svg {
  stroke: #D97706;
}
.tier-level-name {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #5E4A3B;
}
.tier-level-name svg {
  stroke: #A8823A;
}

/* Column 5: Activity & Gamification Stats */
#table-users th:nth-child(5),
#table-users td.col-activity-stats {
  width: 15%;
  min-width: 160px;
}
.stats-pills-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.stat-pill-box {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 7px;
  white-space: nowrap;
}
.stat-pill-box.pill-lessons {
  background: #FAF5FF;
  border: 1px solid #E9D5FF;
  color: #6B21A8;
}
.stat-pill-box.pill-streak {
  background: #FFF7ED;
  border: 1px solid #FED7AA;
  color: #C2410C;
}
.stat-pill-box.pill-hearts {
  background: #FDF2F8;
  border: 1px solid #FBCFE8;
  color: #BE185D;
}

/* Column 6: Dates & Live Status */
#table-users th:nth-child(6),
#table-users td.col-activity-dates {
  width: 12%;
  min-width: 130px;
}
.activity-dates-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.live-status-cell-wrap {
  display: flex;
  align-items: center;
}
.live-dot-pulse {
  animation: liveDotPulseAnim 1.6s infinite ease-in-out;
}
@keyframes liveDotPulseAnim {
  0% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.8; }
}
.live-status-pill.is-past {
  font-size: 0.78rem;
  font-weight: 700;
  color: #6B5B52;
  background: #FAF6F0;
  border: 1px solid #E8DFD3;
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-block;
}
.live-status-empty {
  font-size: 0.76rem;
  color: #A39688;
  font-style: italic;
}
.joined-date-caption {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: #8C7B6D;
  font-weight: 600;
}
.joined-date-caption svg {
  stroke: #8C7B6D;
}

/* Column 7: STICKY ACTIONS COLUMN (PINNED AT FAR LEFT) */
#table-users th.sticky-actions-header,
#table-users td.sticky-actions-cell {
  width: 13%;
  min-width: 190px;
  position: sticky;
  left: 0;
  z-index: 5;
  background: #FFFDF9;
  border-right: 1.5px solid #E8DAC6;
  box-shadow: 4px 0 12px rgba(45, 27, 18, 0.08);
  padding: 10px 12px;
  text-align: center;
  transition: background-color 0.18s ease;
}
.student-table-row:hover td.sticky-actions-cell {
  background: #F8F3EA !important;
}
.student-table-row.row-deleted td.sticky-actions-cell {
  background: #FFF5F5 !important;
}
.student-table-row.row-banned td.sticky-actions-cell {
  background: #FEF3C7 !important;
}

.actions-buttons-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: nowrap;
}

/* Action Buttons Styling */
.actions-buttons-cluster button {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.2s var(--ease-float);
  height: 32px;
  flex-shrink: 0;
}
.actions-buttons-cluster button:active {
  transform: scale(0.96);
}

/* View Details Button */
.btn-action-view {
  background: #EFF6FF;
  border: 1.5px solid #BFDBFE;
  color: #1D4ED8;
  padding: 0 10px;
  font-size: 0.8rem;
}
.btn-action-view:hover {
  background: #1D4ED8;
  color: #FFFFFF;
  border-color: #1D4ED8;
  box-shadow: 0 2px 8px rgba(29, 78, 216, 0.3);
}
.btn-action-view svg {
  stroke: currentColor;
}

/* Adjust XP Button */
.btn-action-xp {
  background: #FFFBEB;
  border: 1.5px solid #FDE68A;
  color: #B45309;
  padding: 0 9px;
  font-size: 0.8rem;
}
.btn-action-xp:hover {
  background: #D97706;
  color: #FFFFFF;
  border-color: #D97706;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.3);
}
.btn-action-xp svg {
  stroke: currentColor;
}

/* Refill Hearts Button */
.btn-action-hearts {
  background: #FDF2F8;
  border: 1.5px solid #FBCFE8;
  color: #BE185D;
  width: 32px;
  padding: 0;
}
.btn-action-hearts:hover {
  background: #DB2777;
  color: #FFFFFF;
  border-color: #DB2777;
  box-shadow: 0 2px 8px rgba(219, 39, 119, 0.3);
}
.btn-action-hearts svg {
  stroke: currentColor;
}

/* Ban Button */
.btn-action-ban {
  background: #FEF2F2;
  border: 1.5px solid #FECACA;
  color: #DC2626;
  width: 32px;
  padding: 0;
}
.btn-action-ban:hover {
  background: #DC2626;
  color: #FFFFFF;
  border-color: #DC2626;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}
.btn-action-ban svg {
  stroke: currentColor;
}

/* Unban Button */
.btn-action-unban {
  background: #F0FDF4;
  border: 1.5px solid #BBF7D0;
  color: #16A34A;
  width: 32px;
  padding: 0;
}
.btn-action-unban:hover {
  background: #16A34A;
  color: #FFFFFF;
  border-color: #16A34A;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3);
}
.btn-action-unban svg {
  stroke: currentColor;
}

/* Restore Button */
.btn-action-restore {
  background: #ECFDF5;
  border: 1.5px solid #A7F3D0;
  color: #047857;
  padding: 0 10px;
  font-size: 0.8rem;
}
.btn-action-restore:hover {
  background: #047857;
  color: #FFFFFF;
  border-color: #047857;
  box-shadow: 0 2px 8px rgba(4, 120, 87, 0.3);
}
.btn-action-restore svg {
  stroke: currentColor;
}

/* Delete Button */
.btn-action-delete {
  background: #FAF5F5;
  border: 1.5px solid #E5D5D5;
  color: #7F1D1D;
  width: 32px;
  padding: 0;
}
.btn-action-delete:hover {
  background: #991B1B;
  color: #FFFFFF;
  border-color: #991B1B;
  box-shadow: 0 2px 8px rgba(153, 27, 27, 0.3);
}
.btn-action-delete svg {
  stroke: currentColor;
}

/* Empty State */
#table-users td.empty {
  text-align: center;
  padding: 38px 20px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #8C7B6D;
}

/* ==========================================================================
   ⭐ ULTRA-MODERN STUDENT DETAILS MODAL STYLES (#modal-student-details)
   ========================================================================== */
#modal-student-details {
  animation: modalFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.student-modern-modal-card {
  max-width: 940px !important;
  width: 100% !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  background: #FCFAF7 !important;
  border-radius: 22px !important;
  border: 1.5px solid #E2D5C3 !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(111, 23, 55, 0.08) !important;
  overflow: hidden !important;
  position: relative !important;
}

/* 1. Modal Hero Profile Header */
.student-modal-hero-header {
  background: linear-gradient(135deg, #3B0A1B 0%, #5E142F 55%, #7D1E40 100%);
  color: #FFFFFF;
  padding: 20px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 2px solid rgba(212, 175, 55, 0.4);
  flex-shrink: 0;
  position: relative;
}

.student-modal-hero-profile {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.student-modal-avatar-box {
  width: 58px;
  height: 58px;
  min-width: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #D4AF37 0%, #ECC757 100%);
  color: #2E1B00;
  font-weight: 900;
  font-size: 1.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2.5px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  flex-shrink: 0;
}

.student-modal-avatar-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.student-modal-hero-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.student-modal-hero-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.student-modal-hero-name {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 900;
  color: #FFFDF9;
  letter-spacing: -0.2px;
  line-height: 1.2;
}

.student-modal-hero-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.student-modal-email-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 0.82rem;
  color: #F8F3EC;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-copy-mini-header {
  all: unset;
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.26);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFFDF9;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.btn-copy-mini-header:hover {
  background: #D4AF37;
  color: #2E1B00;
  border-color: #D4AF37;
  transform: scale(1.08);
}

.btn-close-modal-round {
  all: unset;
  cursor: pointer;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 1.5px solid rgba(255, 255, 255, 0.26);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
  flex-shrink: 0;
}
.btn-close-modal-round:hover {
  background: #BE123C;
  border-color: #BE123C;
  transform: rotate(90deg) scale(1.05);
}

/* 2. Scrollable Body Content */
.student-modal-scrollable-body {
  padding: 22px 26px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: #FCFAF7;
}

.student-modal-scrollable-body::-webkit-scrollbar {
  width: 6px;
}
.student-modal-scrollable-body::-webkit-scrollbar-track {
  background: #F3ECE1;
}
.student-modal-scrollable-body::-webkit-scrollbar-thumb {
  background: #D5C7B4;
  border-radius: 4px;
}
.student-modal-scrollable-body::-webkit-scrollbar-thumb:hover {
  background: #6F1737;
}

/* Ban Alert Banner */
.student-ban-alert-box {
  background: #FEF2F2;
  border: 1.5px solid #FCA5A5;
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.08);
}
.ban-alert-icon-box {
  color: #DC2626;
  flex-shrink: 0;
  margin-top: 2px;
}
.ban-alert-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ban-alert-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ban-alert-title {
  font-weight: 900;
  color: #991B1B;
  font-size: 0.98rem;
}
.ban-type-badge {
  background: #DC2626;
  color: #FFF;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
}
.ban-alert-reason {
  font-size: 0.88rem;
  color: #7F1D1D;
}
.ban-alert-dates {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: #991B1B;
  margin-top: 2px;
}

/* Presence & Join Date Bar */
.modal-presence-chips-bar {
  background: #FFFFFF;
  border: 1.5px solid #EAE0D2;
  border-radius: 14px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  box-shadow: 0 2px 8px rgba(36, 27, 32, 0.02);
}
.presence-chip-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.presence-chip-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  font-weight: 800;
  color: #5A4C42;
}
.presence-chip-val {
  display: inline-flex;
  align-items: center;
}
.presence-date-text {
  font-size: 0.88rem;
  font-weight: 800;
  color: #2E2018;
  direction: ltr;
}

/* 4-Column Gamification Stats Grid */
.modal-stats-quad-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 768px) {
  .modal-stats-quad-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.stat-quad-card {
  background: #FFFFFF;
  border: 1.5px solid #EAE0D2;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(36, 27, 32, 0.02);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}
.stat-quad-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(111, 23, 55, 0.06);
}

.stat-quad-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 800;
  color: #74685F;
}
.stat-quad-val {
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 6px;
}
.stat-quad-sub {
  font-size: 0.76rem;
  font-weight: 700;
  color: #8C8075;
}

.stat-quad-link-btn {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  transition: all 0.15s;
  align-self: flex-start;
  margin-top: 2px;
}

/* Card Theming */
.stat-quad-xp {
  border-top: 3.5px solid #D4AF37;
}
.stat-quad-xp .text-xp {
  color: #8F5E00;
}
.stat-quad-xp .stat-quad-link-btn {
  background: #FFF9ED;
  border: 1px solid #ECD799;
  color: #7A5100;
}
.stat-quad-xp .stat-quad-link-btn:hover {
  background: #D4AF37;
  color: #2E1B00;
  border-color: #D4AF37;
}

.stat-quad-hearts {
  border-top: 3.5px solid #E11D48;
}
.stat-quad-hearts .text-hearts {
  color: #BE123C;
}
.stat-quad-hearts .stat-quad-link-btn {
  background: #FFF1F2;
  border: 1px solid #FECDD3;
  color: #BE123C;
}
.stat-quad-hearts .stat-quad-link-btn:hover {
  background: #BE123C;
  color: #FFFFFF;
  border-color: #BE123C;
}

.stat-quad-streak {
  border-top: 3.5px solid #EA580C;
}
.stat-quad-streak .text-streak {
  color: #C2410C;
}

.stat-quad-lessons {
  border-top: 3.5px solid #059669;
}
.stat-quad-lessons .text-lessons {
  color: #047857;
}

/* Two-Column Information Deck */
.modal-info-deck-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 820px) {
  .modal-info-deck-grid {
    grid-template-columns: 1fr;
  }
}

.modal-deck-card {
  background: #FFFFFF;
  border: 1.5px solid #EAE0D2;
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(36, 27, 32, 0.02);
}

.modal-deck-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid #F0E8DC;
}
.modal-deck-icon-badge {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(111, 23, 55, 0.08);
  color: #6F1737;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.modal-deck-card-header h4 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 800;
  color: #2E2018;
}

.modal-data-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modal-data-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  background: #FAF7F2;
  border: 1px solid #EFEAE0;
  border-radius: 10px;
  min-height: 44px;
  box-sizing: border-box;
}

.data-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 800;
  color: #695E57;
  white-space: nowrap;
  flex-shrink: 0;
}
.data-label svg {
  color: #6F1737;
  flex-shrink: 0;
}

.data-val-with-action {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.code-id-pill {
  font-family: monospace;
  font-size: 0.8rem;
  direction: ltr;
  background: #FFFFFF;
  border: 1px solid #DCD1C2;
  padding: 3px 8px;
  border-radius: 6px;
  color: #3E3229;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.code-phone-pill {
  font-family: monospace;
  font-size: 0.86rem;
  direction: ltr;
  font-weight: 800;
  background: #FFFFFF;
  border: 1px solid #DCD1C2;
  padding: 3px 8px;
  border-radius: 6px;
  color: #2E2018;
}

.code-pw-pill {
  font-family: monospace;
  font-size: 0.92rem;
  direction: ltr;
  background: #FFFFFF;
  border: 1px solid #DCD1C2;
  padding: 3px 10px;
  border-radius: 6px;
}

.contact-email-text {
  font-size: 0.84rem;
  font-weight: 800;
  color: #2E2018;
  direction: ltr;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-val-badge {
  font-size: 0.78rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 6px;
}
.data-val-highlight {
  font-size: 0.88rem;
  font-weight: 800;
  color: #6F1737;
}
.data-val-level {
  font-size: 0.84rem;
  font-weight: 900;
  color: #8F5E00;
  background: #FFF9ED;
  border: 1px solid #EEDBB0;
  padding: 2px 10px;
  border-radius: 6px;
}
.data-val-date {
  font-size: 0.82rem;
  font-weight: 700;
  color: #3D322B;
  direction: ltr;
}

.btn-action-copy {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #FFFFFF;
  border: 1.2px solid #D4AF37;
  color: #6F1737;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 800;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.btn-action-copy:hover {
  background: #6F1737;
  color: #FFFFFF;
  border-color: #6F1737;
}

.phone-actions-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-phone-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.15s ease;
}
.btn-phone-circle.btn-call {
  background: #ECFDF5;
  border: 1px solid #6EE7B7;
  color: #047857;
}
.btn-phone-circle.btn-call:hover {
  background: #059669;
  color: #FFFFFF;
}
.btn-phone-circle.btn-wa {
  background: #F0FDF4;
  border: 1px solid #86EFAC;
  color: #15803D;
}
.btn-phone-circle.btn-wa:hover {
  background: #16A34A;
  color: #FFFFFF;
}

.password-actions-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.btn-action-tool {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #FFFFFF;
  border: 1px solid #D2C5B4;
  color: #5A4C42;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 800;
  transition: all 0.15s ease;
}
.btn-action-tool:hover {
  background: #FAF4EB;
  border-color: #6F1737;
  color: #6F1737;
}

.btn-action-change-pw {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #FFFBEB;
  border: 1px solid #FCD34D;
  color: #B45309;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 800;
  transition: all 0.15s ease;
}
.btn-action-change-pw:hover {
  background: #B45309;
  color: #FFFFFF;
  border-color: #B45309;
}

/* 3. Learning Audit & Anti-Cheat Card */
.modal-audit-card {
  background: #FFFFFF;
  border: 1.5px solid #EAE0D2;
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 2px 8px rgba(36, 27, 32, 0.02);
}

.modal-audit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.modal-audit-title-box {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6F1737;
}
.modal-audit-title-box h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: #2E2018;
}

.modal-audit-toolbar {
  background: #FAF7F2;
  border: 1px solid #EFEAE0;
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.audit-metrics-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.audit-metric-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #695E57;
}
.metric-val {
  font-weight: 900;
  color: #2E2018;
}
.metric-val.text-emerald {
  color: #059669;
}

.audit-controls-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.audit-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.audit-search-wrap input {
  padding: 6px 30px 6px 12px;
  border-radius: 8px;
  border: 1.5px solid #DCD1C2;
  font-size: 0.82rem;
  background: #FFFFFF;
  color: #2E2018;
  outline: none;
  width: 190px;
}
.audit-search-wrap input:focus {
  border-color: #6F1737;
}
.audit-search-wrap .audit-search-icon {
  position: absolute;
  right: 9px;
  pointer-events: none;
}
.audit-filter-dropdown {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1.5px solid #DCD1C2;
  font-size: 0.82rem;
  background: #FFFFFF;
  color: #2E2018;
  outline: none;
  cursor: pointer;
}
.audit-filter-dropdown:focus {
  border-color: #6F1737;
}

.modal-lessons-list-scroll {
  max-height: 250px;
  overflow-y: auto;
  padding-right: 4px;
}
.modal-lessons-list-scroll::-webkit-scrollbar {
  width: 5px;
}
.modal-lessons-list-scroll::-webkit-scrollbar-thumb {
  background: #D8CDBC;
  border-radius: 4px;
}

/* 4. Admin Quick Actions Grid */
.modal-admin-actions-card {
  background: #FFFFFF;
  border: 1.5px solid #EAE0D2;
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 2px 8px rgba(36, 27, 32, 0.02);
}
.modal-admin-actions-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6F1737;
}
.modal-admin-actions-title h4 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 800;
  color: #2E2018;
}

.modal-admin-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.btn-modal-action {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.84rem;
  font-weight: 800;
  transition: all 0.18s ease;
  text-align: center;
  box-sizing: border-box;
}

.btn-act-gift {
  background: #FFFDF5;
  border: 1.5px solid #E8CF82;
  color: #8F6200;
}
.btn-act-gift:hover {
  background: #8F6200;
  color: #FFFFFF;
  border-color: #8F6200;
  box-shadow: 0 3px 10px rgba(143, 98, 0, 0.25);
}

.btn-act-notif {
  background: #EEF2FF;
  border: 1.5px solid #C7D2FE;
  color: #4338CA;
}
.btn-act-notif:hover {
  background: #4338CA;
  color: #FFFFFF;
  border-color: #4338CA;
  box-shadow: 0 3px 10px rgba(67, 56, 202, 0.25);
}

.btn-act-password {
  background: #FFFBEB;
  border: 1.5px solid #FDE68A;
  color: #B45309;
}
.btn-act-password:hover {
  background: #B45309;
  color: #FFFFFF;
  border-color: #B45309;
  box-shadow: 0 3px 10px rgba(180, 83, 9, 0.25);
}

.btn-act-xp {
  background: #FEFCE8;
  border: 1.5px solid #FEF08A;
  color: #A16207;
}
.btn-act-xp:hover {
  background: #A16207;
  color: #FFFFFF;
  border-color: #A16207;
  box-shadow: 0 3px 10px rgba(161, 98, 7, 0.25);
}

.btn-act-hearts {
  background: #FFF1F2;
  border: 1.5px solid #FECDD3;
  color: #BE123C;
}
.btn-act-hearts:hover {
  background: #BE123C;
  color: #FFFFFF;
  border-color: #BE123C;
  box-shadow: 0 3px 10px rgba(190, 18, 60, 0.25);
}

.btn-act-unlock {
  background: #ECFDF5;
  border: 1.5px solid #A7F3D0;
  color: #047857;
}
.btn-act-unlock:hover {
  background: #047857;
  color: #FFFFFF;
  border-color: #047857;
  box-shadow: 0 3px 10px rgba(4, 120, 87, 0.25);
}

.btn-act-lock {
  background: #FFFBEB;
  border: 1.5px solid #FDE68A;
  color: #B45309;
}
.btn-act-lock:hover {
  background: #B45309;
  color: #FFFFFF;
  border-color: #B45309;
  box-shadow: 0 3px 10px rgba(180, 83, 9, 0.25);
}

/* بطاقات خيارات تحديد المستويات في نوافذ الفتح والإغلاق */
.swal-level-options-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  text-align: right;
  direction: rtl;
}

.swal-level-option-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: #FFFFFF;
  border: 1.5px solid #E5E7EB;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.swal-level-option-card:hover {
  background: #FFFDF9;
  border-color: #D97706;
  transform: translateY(-1px);
}

.swal-level-option-card:has(input:checked) {
  background: #FFFBF0;
  border-color: #D97706;
  box-shadow: 0 3px 12px rgba(217, 119, 6, 0.12);
}

.swal-level-option-card.is-recommended {
  border-color: #F59E0B;
  background: #FFFDF5;
}
.swal-level-option-card.is-recommended:has(input:checked) {
  background: #FFFBEB;
  border-color: #D97706;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.18);
}

.btn-act-reset {
  background: #FFF7ED;
  border: 1.5px solid #FED7AA;
  color: #C2410C;
}
.btn-act-reset:hover {
  background: #C2410C;
  color: #FFFFFF;
  border-color: #C2410C;
  box-shadow: 0 3px 10px rgba(194, 65, 12, 0.25);
}

.btn-act-ban {
  background: #FEF2F2;
  border: 1.5px solid #FECACA;
  color: #DC2626;
}
.btn-act-ban:hover {
  background: #DC2626;
  color: #FFFFFF;
  border-color: #DC2626;
  box-shadow: 0 3px 10px rgba(220, 38, 38, 0.25);
}

.btn-act-delete {
  background: #FAF5F5;
  border: 1.5px solid #E5D5D5;
  color: #7F1D1D;
}
.btn-act-delete:hover {
  background: #991B1B;
  color: #FFFFFF;
  border-color: #991B1B;
  box-shadow: 0 3px 10px rgba(153, 27, 27, 0.25);
}





/* ==========================================================================
   ⭐ ULTRA-MODERN NOTIFICATIONS BROADCASTING STUDIO (#panel-notifications)
   ========================================================================== */

#panel-notifications {
  display: none;
  flex-direction: column;
  gap: 24px;
  animation: panelFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
#panel-notifications.active {
  display: flex;
}

@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 1. Header & Live Engine Status Bar */
.notifications-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  background: #FFFFFF;
  border: 1.5px solid #EAE0D2;
  border-radius: 18px;
  padding: 18px 24px;
  box-shadow: 0 3px 12px rgba(36, 27, 32, 0.03);
}

.notif-header-title-box {
  display: flex;
  align-items: center;
  gap: 14px;
}

.notif-header-icon-badge {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #6B1530 0%, #8C2438 100%);
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(107, 21, 48, 0.25);
  flex-shrink: 0;
}

.notif-header-title {
  margin: 0 0 4px 0;
  font-size: 1.28rem;
  font-weight: 900;
  color: #2E2018;
}

.notif-header-sub {
  margin: 0;
  font-size: 0.86rem;
  color: #746B6F;
  font-weight: 600;
}

.notif-header-badges {
  display: flex;
  align-items: center;
  gap: 10px;
}

.notif-engine-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 800;
  background: #EAF5ED;
  border: 1px solid #A3D9B1;
  color: #1E6B37;
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.12);
}

.notif-engine-pill .live-dot-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 8px #22C55E;
  animation: pulseLiveDot 1.5s infinite;
}

/* 2. Top KPI Overview Cards */
.notif-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

@media (max-width: 992px) {
  .notif-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .notif-stats-grid {
    grid-template-columns: 1fr;
  }
}

.notif-kpi-card {
  background: #FFFFFF;
  border: 1.5px solid #EAE0D2;
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 3px 10px rgba(36, 27, 32, 0.02);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  position: relative;
  overflow: hidden;
}
.notif-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(107, 21, 48, 0.08);
}

.notif-kpi-card .kpi-icon-box {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notif-kpi-card.kpi-total { border-top: 3.5px solid #6B1530; }
.notif-kpi-card.kpi-total .kpi-icon-box { background: rgba(107, 21, 48, 0.1); color: #6B1530; }

.notif-kpi-card.kpi-sent { border-top: 3.5px solid #059669; }
.notif-kpi-card.kpi-sent .kpi-icon-box { background: rgba(5, 150, 105, 0.1); color: #059669; }

.notif-kpi-card.kpi-pending { border-top: 3.5px solid #D97706; }
.notif-kpi-card.kpi-pending .kpi-icon-box { background: rgba(217, 119, 6, 0.1); color: #D97706; }

.notif-kpi-card.kpi-audience { border-top: 3.5px solid #4F46E5; }
.notif-kpi-card.kpi-audience .kpi-icon-box { background: rgba(79, 70, 229, 0.1); color: #4F46E5; }

.notif-kpi-card .kpi-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.notif-kpi-card .kpi-num {
  font-size: 1.55rem;
  font-weight: 900;
  color: #2E2018;
  line-height: 1.2;
}

.notif-kpi-card .kpi-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #746B6F;
}

/* 3. Two-Column Workspace Layout */
.notif-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(360px, 0.9fr);
  gap: 22px;
  align-items: start;
}

@media (max-width: 1040px) {
  .notif-workspace-grid {
    grid-template-columns: 1fr;
  }
}

/* Left Column: Notification Composer Card */
.notif-composer-card {
  background: #FFFFFF;
  border: 1.5px solid #EAE0D2;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(36, 27, 32, 0.03);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.composer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1.5px solid #F0E8DC;
}

.composer-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #6B1530;
}
.composer-title-wrap h3 {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 900;
  color: #2E2018;
}

.composer-badge {
  background: #FFF9ED;
  border: 1px solid #ECD799;
  color: #8F5E00;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
}

/* Quick Presets Row */
.notif-presets-container {
  background: #FAF7F0;
  border: 1px solid #EAE0D2;
  border-radius: 14px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.presets-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 800;
  color: #6B1530;
  flex-shrink: 0;
}

.presets-chips-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.preset-chip {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  border: 1px solid #D6C8B2;
  color: #4A3B32;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 20px;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.preset-chip:hover {
  background: #6B1530;
  color: #FFFFFF;
  border-color: #6B1530;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(107, 21, 48, 0.2);
}

/* Composer Fields */
.composer-field-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 14px;
}

.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.composer-field-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 800;
  color: #2E2018;
}
.composer-field-label svg {
  color: #6B1530;
}

.field-counter {
  font-size: 0.76rem;
  font-weight: 700;
  color: #8C8075;
  direction: ltr;
}

.composer-input,
.composer-textarea,
.composer-select {
  width: 100%;
  padding: 11px 15px;
  border-radius: 12px;
  border: 1.5px solid #D8CCBD;
  background: #FFFFFF;
  font-family: inherit;
  font-size: 0.92rem;
  color: #2E2018;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}

.composer-input:focus,
.composer-textarea:focus,
.composer-select:focus {
  border-color: #6B1530;
  box-shadow: 0 0 0 3px rgba(107, 21, 48, 0.1);
}

.composer-textarea {
  resize: vertical;
  line-height: 1.5;
  min-height: 80px;
}

/* Audience Toggle Cards */
.audience-toggle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 580px) {
  .audience-toggle-grid {
    grid-template-columns: 1fr;
  }
}

.audience-toggle-option {
  cursor: pointer;
  display: block;
  position: relative;
}
.audience-toggle-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.audience-card-inner {
  background: #FAF7F0;
  border: 2px solid #E2D7C8;
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.18s ease;
}

.audience-card-inner .aud-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #FFFFFF;
  border: 1px solid #D8CCBD;
  color: #6B1530;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.18s ease;
}

.audience-card-inner .aud-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.audience-card-inner .aud-text strong {
  font-size: 0.88rem;
  font-weight: 800;
  color: #2E2018;
}
.audience-card-inner .aud-text span {
  font-size: 0.74rem;
  color: #746B6F;
  font-weight: 600;
}

.audience-toggle-option input:checked + .audience-card-inner {
  background: #FFF9ED;
  border-color: #6B1530;
  box-shadow: 0 4px 12px rgba(107, 21, 48, 0.12);
}
.audience-toggle-option input:checked + .audience-card-inner .aud-icon {
  background: #6B1530;
  color: #FFFFFF;
  border-color: #6B1530;
}

/* Student Picker Drawer */
.notif-student-picker-drawer {
  background: #FAF7F0;
  border: 1.5px dashed #D6C8B2;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: drawerSlideDown 0.2s ease;
}

@keyframes drawerSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.picker-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.86rem;
  font-weight: 800;
  color: #6B1530;
}

.btn-picker-refresh {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  background: #FFFFFF;
  border: 1px solid #D6C8B2;
  font-size: 0.76rem;
  font-weight: 700;
  color: #5A4C42;
  transition: all 0.15s;
}
.btn-picker-refresh:hover {
  background: #6B1530;
  color: #FFFFFF;
  border-color: #6B1530;
}

.picker-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.picker-search-icon {
  position: absolute;
  right: 12px;
  pointer-events: none;
}
.picker-search-wrap input {
  width: 100%;
  padding: 9px 34px 9px 12px;
  border-radius: 10px;
  border: 1.5px solid #D6C8B2;
  background: #FFFFFF;
  font-size: 0.86rem;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
}
.picker-search-wrap input:focus {
  border-color: #6B1530;
}

.picker-select {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid #D6C8B2;
  background: #FFFFFF;
  font-size: 0.88rem;
  font-weight: 700;
  color: #2E2018;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
}

.picker-count-hint {
  font-size: 0.78rem;
  font-weight: 700;
  color: #746B6F;
}

/* Deep Link Interactive Card */
.composer-deep-link-card {
  background: #FAF7F0;
  border: 1.5px solid #E2D7C8;
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 6px;
}

.deep-link-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.dl-title-box {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.9rem;
  color: #6B1530;
}

.btn-clear-link {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #FFFFFF;
  border: 1px solid #D8CCBD;
  font-size: 0.75rem;
  font-weight: 800;
  color: #746B6F;
  transition: all 0.15s;
}
.btn-clear-link:hover {
  background: #DC2626;
  color: #FFFFFF;
  border-color: #DC2626;
}

.dl-active-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  background: #EAF5ED;
  border: 1px solid #A3D9B1;
  color: #1E6B37;
  font-size: 0.84rem;
  font-weight: 800;
}

.dl-categories-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dl-cat-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dl-cat-label {
  font-size: 0.78rem;
  font-weight: 800;
  color: #695E57;
}

.dl-chips-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.dl-quick-chip {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 18px;
  background: #FFFFFF;
  border: 1.2px solid #D6C8B2;
  font-size: 0.78rem;
  font-weight: 800;
  color: #3E3229;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.dl-quick-chip:hover {
  background: #6B1530;
  color: #FFFFFF;
  border-color: #6B1530;
  transform: translateY(-1px);
}

.dl-quick-chip.chip-highlight {
  border-color: #D4AF37;
  color: #7A5100;
  background: #FFFDF9;
}
.dl-quick-chip.chip-highlight:hover {
  background: #D4AF37;
  color: #2E1B00;
}

.dl-lesson-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}

.btn-refresh-lessons {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.74rem;
  font-weight: 700;
  color: #6B1530;
  padding: 2px 6px;
}
.btn-refresh-lessons:hover {
  text-decoration: underline;
}

/* Composer Actions Bar */
.composer-actions-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 10px;
  border-top: 1.5px solid #F0E8DC;
  margin-top: 6px;
}

.btn-composer-reset {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 12px;
  background: #FAF5F5;
  border: 1.5px solid #E5D5D5;
  color: #746B6F;
  font-size: 0.88rem;
  font-weight: 800;
  transition: all 0.15s ease;
}
.btn-composer-reset:hover {
  background: #FEE4E2;
  color: #D92D20;
  border-color: #FECDCA;
}

.btn-composer-submit {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 26px;
  border-radius: 12px;
  background: linear-gradient(135deg, #6B1530 0%, #8C2438 100%);
  color: #FFFFFF;
  font-size: 0.95rem;
  font-weight: 900;
  box-shadow: 0 4px 14px rgba(107, 21, 48, 0.3);
  transition: all 0.18s cubic-bezier(0.2, 0, 0, 1);
}
.btn-composer-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(107, 21, 48, 0.4);
  background: linear-gradient(135deg, #7D1E40 0%, #9F2C45 100%);
}
.btn-composer-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

/* Right Column: Smartphone Live Preview */
.notif-phone-preview-card {
  background: #FFFFFF;
  border: 1.5px solid #EAE0D2;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(36, 27, 32, 0.03);
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 24px;
}

.phone-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1.5px solid #F0E8DC;
}

.phone-preview-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6B1530;
}
.phone-preview-title h4 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 900;
  color: #2E2018;
}

.phone-preview-tag {
  background: #EAF5ED;
  border: 1px solid #A3D9B1;
  color: #1E6B37;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 12px;
}

/* Smartphone Mockup Frame */
.phone-device-mockup {
  background: linear-gradient(180deg, #2D141E 0%, #15080E 100%);
  border: 6px solid #2B2320;
  border-radius: 36px;
  padding: 16px 14px 22px 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 380px;
  position: relative;
  box-sizing: border-box;
}

.phone-notch-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 6px;
}
.phone-camera-lens {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.phone-speaker {
  width: 48px;
  height: 4px;
  border-radius: 3px;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.phone-lockscreen-clock {
  text-align: center;
  color: #FFFFFF;
  margin-bottom: 4px;
}
.phone-lockscreen-clock .clock-time {
  font-size: 2.4rem;
  font-weight: 800;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: -1px;
  line-height: 1.1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.phone-lockscreen-clock .clock-date {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 2px;
}

/* Smartphone Notification Card */
.phone-push-notification-banner {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: pushBannerSlide 0.3s ease;
  direction: rtl;
  text-align: right;
}

@keyframes pushBannerSlide {
  from { opacity: 0; transform: translateY(-10px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.push-banner-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.push-app-badge {
  display: flex;
  align-items: center;
  gap: 6px;
}

.push-app-logo {
  width: 18px;
  height: 18px;
  border-radius: 5px;
}

.push-app-name {
  font-size: 0.76rem;
  font-weight: 800;
  color: #3A2B25;
  letter-spacing: -0.2px;
}

.push-dot {
  font-size: 0.7rem;
  color: #8C8075;
}

.push-timestamp {
  font-size: 0.72rem;
  font-weight: 600;
  color: #8C8075;
}

.push-expand-icon {
  color: #8C8075;
}

.push-banner-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.push-title-text {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 900;
  color: #1A120E;
  line-height: 1.3;
}

.push-desc-text {
  margin: 0;
  font-size: 0.82rem;
  color: #4A3C35;
  line-height: 1.45;
  font-weight: 600;
}

.push-banner-action {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.74rem;
  font-weight: 800;
  color: #6B1530;
  background: rgba(107, 21, 48, 0.08);
  padding: 3px 8px;
  border-radius: 6px;
  align-self: flex-start;
}

.phone-home-indicator {
  width: 110px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.4);
  margin: auto auto 0 auto;
}

.phone-preview-tips {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #FFF9ED;
  border: 1px solid #ECD799;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.78rem;
  color: #7A5100;
  line-height: 1.5;
  font-weight: 700;
}

/* 4. Notifications History & Broadcast Logs Section */
.notif-history-section {
  background: #FFFFFF;
  border: 1.5px solid #EAE0D2;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(36, 27, 32, 0.03);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.history-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.history-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #6B1530;
}
.history-title-wrap h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 900;
  color: #2E2018;
}

.history-count-pill {
  background: #FAF7F0;
  border: 1.2px solid #D6C8B2;
  color: #6B1530;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 16px;
}

.history-actions-cluster {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-history-tool {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 10px;
  background: #FAF7F0;
  border: 1.5px solid #D6C8B2;
  color: #3E3229;
  font-size: 0.82rem;
  font-weight: 800;
  transition: all 0.15s ease;
}
.btn-history-tool:hover {
  background: #6B1530;
  color: #FFFFFF;
  border-color: #6B1530;
  transform: translateY(-1px);
}

.btn-history-tool.btn-tool-danger {
  background: #FAF5F5;
  border-color: #FECDCA;
  color: #D92D20;
}
.btn-history-tool.btn-tool-danger:hover {
  background: #D92D20;
  color: #FFFFFF;
  border-color: #D92D20;
}

/* History Filter Bar */
.history-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: #FAF7F0;
  border: 1px solid #EAE0D2;
  border-radius: 14px;
  padding: 12px 16px;
}

.history-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 260px;
}
.history-search-icon {
  position: absolute;
  right: 12px;
  pointer-events: none;
}
.history-search-wrap input {
  width: 100%;
  padding: 9px 34px 9px 14px;
  border-radius: 10px;
  border: 1.5px solid #D8CCBD;
  background: #FFFFFF;
  font-size: 0.86rem;
  font-family: inherit;
  color: #2E2018;
  outline: none;
  box-sizing: border-box;
}
.history-search-wrap input:focus {
  border-color: #6B1530;
}

.history-dropdowns-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.history-filter-select {
  padding: 8px 12px;
  border-radius: 10px;
  border: 1.5px solid #D8CCBD;
  background: #FFFFFF;
  font-size: 0.84rem;
  font-weight: 700;
  color: #2E2018;
  outline: none;
  cursor: pointer;
  font-family: inherit;
}
.history-filter-select:focus {
  border-color: #6B1530;
}

/* Modern Notifications Table */
.notif-table-wrapper {
  border: 1.5px solid #EAE0D2;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.modern-notif-table {
  width: 100%;
  border-collapse: collapse;
  text-align: right;
}

.modern-notif-table thead tr {
  background: linear-gradient(180deg, #F8F4EC 0%, #F1E9DB 100%);
  border-bottom: 2px solid #E0D3C1;
}

.modern-notif-table th {
  padding: 12px 14px;
  font-size: 0.82rem;
  font-weight: 800;
  color: #55443B;
  white-space: nowrap;
}

.modern-notif-table tbody tr {
  border-bottom: 1px solid #F0E8DC;
  transition: background 0.15s ease;
}
.modern-notif-table tbody tr:hover {
  background: #FFFDF9;
}

.modern-notif-table td {
  padding: 12px 14px;
  font-size: 0.86rem;
  color: #2E2018;
  vertical-align: middle;
}

.notif-table-empty {
  text-align: center;
  padding: 36px 20px;
  color: #8C8075;
  font-size: 0.92rem;
  font-weight: 700;
}


/* ============ SWAL CALC POINTS TOGGLE CARD ============ */
.swal-calc-points-card {
  user-select: none;
  -webkit-user-select: none;
}
.swal-calc-points-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.12);
}