/* ═══════════════════════════════════════════════════════
     RESET & VARIABLES
  ═══════════════════════════════════════════════════════ */
  *{box-sizing:border-box;margin:0;padding:0}
  :root{
    --ff-main:'Amiri',serif;
    --gold:#9a7000;
    --gold-light:#c49a00;
    --gold-dim:#6b4e00;
    --bg-deep:#faf6ef;
    --bg-mid:#f0e8d8;
    --bg-card:#fffdf7;
    --bg-card2:#f5edd8;
    --text-main:#0d1b2a;
    --text-dim:#3a5068;
    --text-bright:#0a1520;
    --border-gold:rgba(154,112,0,0.22);
    --border-gold-hover:rgba(154,112,0,0.5);
    --shadow-gold:rgba(154,112,0,0.12);
    --classic:#9a7000;
    --modern:#0d1b2a;
    --prose:#0d1b2a;
    --stories:#0d1b2a;
    --external:#0d1b2a;
    --review:#0d1b2a;
    --radius:16px;
    --radius-sm:10px;
    --transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  }

  body{
    background:var(--bg-deep);
    background-image:radial-gradient(ellipse at 85% 5%,rgba(196,154,0,0.07) 0%,transparent 45%),radial-gradient(ellipse at 5% 95%,rgba(154,112,0,0.05) 0%,transparent 45%);
    color:var(--text-main);
    font-family:var(--ff-main,'Amiri',serif);
    direction:rtl;
    min-height:100vh;
    overflow-x:hidden;
  }
  #stars-canvas{opacity:0}

  /* Scrollbar */
  ::-webkit-scrollbar{width:6px;height:6px}
  ::-webkit-scrollbar-track{background:var(--bg-mid)}
  ::-webkit-scrollbar-thumb{background:var(--gold);border-radius:3px;opacity:.7}
  ::-webkit-scrollbar-thumb:hover{background:var(--gold-light)}

  /* Selection */
  ::selection{background:rgba(212,175,55,0.2);color:var(--text-bright)}

  /* Copy protection */
  body:not(.admin-mode){-webkit-user-select:none;-moz-user-select:none;user-select:none}
  @media print{body{display:none!important}}

  /* ═══════════════════════════════════════════════════════
     ANIMATED BACKGROUND STARS
  ═══════════════════════════════════════════════════════ */
  #stars-canvas{
    position:fixed;top:0;left:0;width:100%;height:100%;
    pointer-events:none;z-index:0;opacity:0.4;
  }

  /* ═══════════════════════════════════════════════════════
     PASSWORD PAGE
  ═══════════════════════════════════════════════════════ */

  /* ═══════════════════════════════════════════════════════
     DEDICATION PAGE
  ═══════════════════════════════════════════════════════ */
  #dedication-page{
    min-height:100vh;
    background:var(--bg-deep);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:2rem;position:relative;overflow:hidden;z-index:1;
  }
  body.theme-dark #dedication-page{
    background:radial-gradient(ellipse at 20% 30%,#0f0a28 0%,#0e0e1c 50%,#0a1a0a 100%);
  }
  body.theme-sage #dedication-page{
    background:radial-gradient(ellipse at 20% 30%,#102010 0%,#1a2018 60%,#0a1808 100%);
  }
  .dec-ring{
    position:absolute;border-radius:50%;top:50%;left:50%;
    transform:translate(-50%,-50%);border:1px solid rgba(212,175,55,0.06);
    pointer-events:none;
  }
  .dec-box{max-width:820px;width:100%;position:relative;z-index:1}
  .dec-header{text-align:center;margin-bottom:2.5rem}
  .dec-subtitle{
    font-size:.75rem;letter-spacing:.35em;color:var(--gold);
    margin-bottom:1rem;font-family:sans-serif;opacity:.9;
  }
  .dec-title{
    font-size:clamp(2.4rem,5vw,4rem);
    background:linear-gradient(135deg, #f5d060, #d4af37, #f0c040);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    font-family:var(--ff-main,'Scheherazade New',serif);font-weight:700;
    text-shadow:none;filter:drop-shadow(0 0 18px rgba(212,175,55,0.5));
    letter-spacing:.04em;
  }
  .dec-divider{
    width:140px;height:2px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent);
    margin:1.5rem auto;
  }
  .dec-card{
    background:rgba(212,175,55,0.03);
    border:1px solid var(--border-gold);
    border-radius:20px;padding:clamp(1.8rem,4vw,3.5rem);
    backdrop-filter:blur(20px);
    box-shadow:0 25px 70px rgba(0,0,0,0.6),inset 0 1px 0 rgba(212,175,55,0.08);
    position:relative;overflow:hidden;
  }
  .dec-card::before{
    content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);
    width:60%;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);
  }
  .dec-text{
    text-align:justify;line-height:2.2;
    font-size:clamp(1.15rem,2.5vw,1.35rem);color:var(--text-main);
    text-align-last:center;font-family:'Amiri',serif;
    font-weight:500;letter-spacing:0.01em;
  }
  .dec-sig{
    text-align:left;margin-top:2rem;color:var(--gold);
    font-size:1.15rem;font-style:normal;font-family:'Amiri',serif;
  }
  .btn-enter{
    background:linear-gradient(135deg,var(--gold),var(--gold-dim));color:#07070f;
    border:none;padding:1rem 3.5rem;font-size:1.2rem;font-family:'Amiri',serif;
    font-weight:bold;border-radius:50px;cursor:pointer;
    box-shadow:0 6px 25px rgba(212,175,55,0.4);transition:var(--transition);
    letter-spacing:.05em;margin-top:2.5rem;display:block;margin-left:auto;margin-right:auto;
    position:relative;overflow:hidden;
  }
  .btn-enter::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.12),transparent)}
  .btn-enter:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(212,175,55,0.6)}

  /* ═══════════════════════════════════════════════════════
     MAIN APP — HOME PAGE
  ═══════════════════════════════════════════════════════ */
  #home-page{display:none;position:relative;z-index:1}
  #home-page.visible{display:block}

  /* ── NAV ── */
  #main-nav{
    background:rgba(18,16,40,0.94);
    border-bottom:1px solid var(--border-gold);
    padding:.9rem 1.5rem;
    display:flex;align-items:center;justify-content:space-between;
    flex-wrap:nowrap;gap:.8rem;
    position:sticky;top:0;z-index:100;
    backdrop-filter:blur(20px);
  }
  /* wrapper to allow absolute center child */
  #main-nav > .nav-center-ctrl{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:.5rem}
  .nav-logo{display:flex;align-items:center;gap:.9rem;cursor:pointer}
  .nav-emblem-wrap{
    width:44px;height:44px;border-radius:50%;
    background:rgba(212,175,55,0.08);border:1px solid var(--border-gold);
    display:flex;align-items:center;justify-content:center;
    font-size:1.3rem;color:var(--gold);transition:var(--transition);
    flex-shrink:0;
  }
  .nav-emblem-wrap:hover{background:rgba(212,175,55,0.15);border-color:var(--gold)}
  .nav-title{color:var(--gold);font-weight:bold;font-size:1.2rem;line-height:1.2}
  .nav-subtitle{color:var(--text-dim);font-size:.92rem;margin-top:1px}
  .nav-controls{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
  .search-wrap{position:relative}
  .search-wrap::before{
    content:'';
  }
  #search-input{
    background:rgba(255,255,255,0.04);border:1px solid var(--border-gold);
    border-radius:25px;padding:.5rem 2.5rem .5rem 1rem;color:var(--text-main);
    font-size:.9rem;font-family:'Amiri',serif;width:240px;outline:none;direction:rtl;
    transition:var(--transition);
  }
  #search-input:focus{border-color:var(--gold);background:rgba(212,175,55,0.05);width:270px}
  #search-input::placeholder{color:var(--text-dim)}
  #search-input::-webkit-search-cancel-button,
  #search-input::-webkit-search-decoration,
  #search-input::-webkit-search-results-button,
  #search-input::-webkit-search-results-decoration{display:none;-webkit-appearance:none;}

  /* Stats badge */
  .nav-stats{
    display:flex;gap:.5rem;
  }
  .stat-badge{
    padding:.3rem .8rem;border-radius:20px;font-size:.75rem;
    background:rgba(212,175,55,0.07);border:1px solid var(--border-gold);
    color:var(--gold);white-space:nowrap;
  }

  /* ── HERO ── */
  #home-hero{
    background:linear-gradient(180deg,rgba(15,10,40,0.95) 0%,transparent 100%);
    padding:2.5rem 2rem 1.5rem;text-align:center;
    border-bottom:1px solid rgba(212,175,55,0.08);position:relative;overflow:hidden;
  }
  #home-hero::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(ellipse at 50% 0%,rgba(212,175,55,0.05) 0%,transparent 70%);
    pointer-events:none;
  }
  .hero-title{
    font-size:clamp(1.8rem,4vw,3rem);color:var(--text-bright);margin:0 0 .4rem;
    text-shadow:0 0 40px rgba(212,175,55,0.35);
    font-family:var(--ff-main,'Scheherazade New',serif);font-weight:700;
  }
  .hero-title-wrap{position:relative;display:inline-block;margin-bottom:1cm}
  .hero-underline-svg{position:absolute;bottom:-4px;left:0;width:100%;height:20px;overflow:visible}
  .hero-underline-path{stroke:var(--gold);stroke-width:2.2;fill:none;stroke-dasharray:320;stroke-dashoffset:320;opacity:0;animation:draw-ul 1.5s ease-in-out 0.5s forwards}
  @keyframes draw-ul{0%{stroke-dashoffset:320;opacity:1}100%{stroke-dashoffset:0;opacity:1}}
  .search-suggestions{position:absolute;top:calc(100% + 4px);right:0;left:0;background:var(--bg-main,#12112a);border:2px solid rgba(212,175,55,0.35);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,0.6);backdrop-filter:blur(20px);z-index:999;max-height:260px;overflow-y:auto;display:none}
  .search-suggestions.open{display:block}
  .sug-item{padding:.75rem 1.1rem;cursor:pointer;font-family:var(--ff-main,serif);font-size:.98rem;color:var(--text-main);border-bottom:1px solid rgba(154,112,0,0.08);transition:background .15s,transform .1s;display:flex;gap:.5rem;align-items:center;user-select:none}
  .sug-item:last-child{border-bottom:none}
  .sug-item:hover{background:rgba(154,112,0,0.1);transform:translateX(-3px)}
  .sug-item:active{background:rgba(154,112,0,0.18)}
  .sug-match{color:var(--gold);font-weight:bold}
  .sug-cat{font-size:.78rem;color:var(--text-dim);margin-right:auto}
  .hero-sub{color:var(--text-dim);font-size:1.2rem;margin:0 0 1.5rem}
  .hero-ornament{
    width:80px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);
    margin:.8rem auto 1.5rem;
  }

  /* ── CATEGORY FILTERS ── */
  .cat-filters{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;padding-bottom:.5rem}
  .cat-btn{
    padding:.4rem 1.1rem;border-radius:25px;cursor:pointer;font-size:1.05rem;
    font-family:'Amiri',serif;transition:var(--transition);
    border:1px solid rgba(180,190,210,0.6);
    background:#eef1f7;color:#2a3a5a;
    position:relative;overflow:hidden;
    box-shadow:0 1px 4px rgba(30,50,100,0.08);
  }
  .cat-btn:hover{border-color:rgba(100,130,200,0.5);color:#1a2a4a;transform:translateY(-1px);background:#e4e8f4}
  .cat-btn.active{font-weight:bold;background:linear-gradient(135deg,#9a7000,#c49a00);color:#fffdf7;border-color:transparent;box-shadow:0 2px 12px rgba(154,112,0,0.3);transform:translateY(-1px)}
  

  /* ── CARDS GRID ── */
  #cards-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
    gap:1.2rem;padding:2rem;max-width:1300px;margin:0 auto;
  }

  .text-card{
    background:var(--bg-card);border-radius:var(--radius);
    padding:1.5rem;cursor:pointer;
    transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
    position:relative;overflow:hidden;
    border:1.5px solid rgba(154,112,0,0.18);
  }
  .text-card::before{content:none}
  .text-card:hover{transform:translateY(-4px);border-color:rgba(196,154,0,0.75);box-shadow:0 8px 30px rgba(154,112,0,0.18),0 0 0 1px rgba(196,154,0,0.35)}

  .card-top-line{
    height:3px;border-radius:3px;
    position:absolute;top:0;left:0;right:0;
    opacity:0.6;
  }
  .card-cat-badge{
    padding:.22rem .7rem;border-radius:20px;font-size:.75rem;
    display:inline-flex;align-items:center;gap:.3rem;margin-bottom:.8rem;
    font-weight:bold;
    background:rgba(154,112,0,0.1);color:#7a5500;border:1px solid rgba(154,112,0,0.25);
  }
  .card-title{margin:0 0 .35rem;font-size:1.35rem;color:#7a5500;line-height:1.5;font-weight:700}
  .card-author{margin:0 0 .9rem;color:#9a7000;font-size:1.12rem;font-style:italic}
  .card-meta{
    font-size:1rem;color:var(--text-dim);
    border-top:1px solid var(--border-gold);
    padding-top:.75rem;display:flex;gap:.8rem;flex-wrap:wrap;
    align-items:center;
  }
  .card-meta-item{display:flex;align-items:center;gap:.25rem}
  .card-action{
    margin-top:.9rem;padding:.55rem 1rem;border-radius:20px;
    font-size:1rem;font-family:'Amiri',serif;cursor:pointer;
    border:1px solid rgba(154,112,0,0.4);
    width:100%;transition:var(--transition);font-weight:bold;
    background:rgba(154,112,0,0.07);color:#7a5500;
    box-shadow:0 1px 6px rgba(154,112,0,0.08);
  }
  .card-action:hover{background:rgba(154,112,0,0.15);border-color:rgba(154,112,0,0.65);color:#5a3a00;transform:translateY(-2px);box-shadow:0 4px 16px rgba(154,112,0,0.18)}

  /* Empty state */
  .empty-state{text-align:center;padding:5rem 2rem;color:var(--text-dim)}
  .empty-icon{font-size:3.5rem;margin-bottom:1rem;opacity:.5}
  .empty-title{font-size:1.2rem;margin-bottom:.5rem;color:var(--text-main)}

  /* ── FOOTER ── */
  footer{
    text-align:center;padding:2rem;color:var(--text-dim);font-size:.85rem;
    border-top:1px solid rgba(255,255,255,0.05);margin-top:1rem;
    position:relative;
  }
  footer::before{
    content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:80px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);
  }
  .footer-logo{color:var(--gold);margin-bottom:.4rem;font-size:1rem}
  /* Designer credit */
  .designer-credit{
    margin-top:.6rem;font-size:.8rem;color:var(--text-dim);
  }
  .designer-name{
    color:var(--gold);font-weight:bold;font-family:var(--ff-main,'Scheherazade New',serif);
    font-size:.95rem;letter-spacing:.02em;
  }

  /* ── BACK BUTTON DARKER ── */
  .back-btn{
    background:var(--gold) !important;padding:.6rem 1.4rem;border-radius:25px;
    cursor:pointer;font-size:1.05rem;font-weight:bold;transition:var(--transition);
    font-family:'Amiri',serif;border:2px solid rgba(0,0,0,0.15) !important;
    color:#1a0f00 !important;display:inline-flex;align-items:center;gap:.5rem;
    white-space:nowrap;flex-shrink:0;
    box-shadow:0 2px 16px rgba(212,175,55,0.45);
  }
  .back-btn:hover{background:rgba(160,110,0,0.7) !important;transform:translateX(4px);box-shadow:0 4px 18px rgba(0,0,0,0.4);}

  /* ═══════════════════════════════════════════════════════
     TEXT DETAIL PAGE
  ═══════════════════════════════════════════════════════ */
  #text-page{display:none;min-height:100vh;background:var(--bg-mid)}
  #text-page.visible{display:block}

  /* ── TEXT HEADER ── */
  .text-header{
    border-bottom:none;
    background:rgba(10,8,22,0.97);backdrop-filter:blur(20px);
    padding:.4rem 2rem .1rem;
    transition:max-height .4s ease,opacity .35s,padding .35s;
    overflow:hidden;
    max-height:120px;
    opacity:1;
  }
  /* When scrolled: hide the whole header */
  .text-header.scrolled{
    max-height:0 !important;
    opacity:0;
    padding-top:0;padding-bottom:0;
    pointer-events:none;
  }
  /* Also hide main nav on scroll */
  #main-nav.nav-hidden{
    transform:translateY(-100%);
    opacity:0;
    pointer-events:none;
    transition:transform .35s ease,opacity .3s;
  }
  #main-nav{transition:transform .35s ease,opacity .3s;}

  /* Floating progress bar — always visible at top when scrolled */
  #reading-progress-wrap{
    position:fixed;top:0;left:0;right:0;z-index:9999;
    height:4px;
    opacity:0;pointer-events:none;
    transition:opacity .3s;
  }
  #reading-progress-wrap.vis{opacity:1;}
  #reading-progress-wrap .reading-progress-fill{
    height:100%;border-radius:0;
    transition:width .1s linear;width:0;
  }

  /* compact strip kept for structure */
  .text-header-full{display:block;}
  .text-header-compact{display:none;}
  .compact-info{display:none;}
  .compact-title,.compact-author,.compact-badge{display:none;}
  .text-header-row{
    display:flex;align-items:center;gap:.8rem;flex-wrap:nowrap;
    padding:.6rem 0;
  }
  .text-header-info{flex:1;min-width:0}
  .poet-img-wrap{display:none;align-items:center;flex-shrink:0}
  .poet-img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid var(--gold);box-shadow:0 0 14px rgba(0,0,0,0.4),0 0 0 3px rgba(212,175,55,0.15);display:block;transition:transform .3s;flex-shrink:0}
  .poet-img:hover{transform:scale(1.08)}
  .cat-badge-large{
    padding:.25rem .75rem;border-radius:20px;font-size:.78rem;
    display:inline-flex;align-items:center;font-weight:bold;white-space:nowrap;flex-shrink:0;
    transition:opacity .2s,transform .2s;
  }
  .cat-badge-large:hover{opacity:.8;transform:scale(1.05)}
  .text-header-meta-row{
    display:flex;align-items:center;gap:.6rem;margin-bottom:.25rem;
  }
  .text-header-meta-row .cat-badge-large{margin:0;}
  .text-title-main{
    font-size:clamp(1rem,2.2vw,1.45rem);color:var(--text-bright);
    margin:0;font-family:var(--ff-main,'Scheherazade New',serif);font-weight:700;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .text-author-main{color:var(--text-dim);font-size:.92rem;margin:.1rem 0 0;font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* Progress bar (inside header) */
  .reading-progress{
    height:2px;background:rgba(255,255,255,0.04);
    border-radius:0;margin-top:.4rem;overflow:hidden;
  }
  .reading-progress-fill{height:100%;border-radius:3px;transition:width .1s linear;width:0}

  /* Tabs */
  /* Fixed tabs strip — always at top of content area */
  .tabs-fixed-wrap{
    position:sticky;
    top:0;
    z-index:89;
    display:flex;align-items:center;justify-content:space-between;
    padding:.3rem 1rem .55rem;
    background:rgba(10,8,22,0.97);backdrop-filter:blur(16px);
    border-bottom:none;
    gap:.6rem;
  }
  /* When nav visible, tabs sit below it */
  body:not(.nav-hidden-state) .tabs-fixed-wrap{
    top:58px;
  }
  .tabs{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;margin-top:0;}
  .tab-btn{
    padding:.5rem 1.3rem;border-radius:20px;cursor:pointer;font-size:1.05rem;
    font-family:'Amiri',serif;transition:var(--transition);
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(255,255,255,0.03);color:var(--text-dim);
    display:flex;align-items:center;gap:.3rem;
  }
  .tab-btn:hover{border-color:rgba(255,255,255,0.18);color:var(--text-main)}
  .tab-btn.active{font-weight:bold;color:#07070f;border-color:transparent;background:linear-gradient(135deg,var(--gold-dim),var(--gold))}
  .tab-btn .tab-count{
    font-size:.82rem;padding:.05rem .35rem;border-radius:10px;
    background:rgba(0,0,0,0.2);
  }

  /* Download buttons */
  .download-btns-wrap{
    display:flex;gap:.45rem;align-items:center;margin-right:auto;flex-shrink:0;
  }
  .btn-dl{
    display:inline-flex;align-items:center;gap:.3rem;
    padding:.38rem .85rem;border-radius:20px;cursor:pointer;
    font-size:.82rem;font-family:'Amiri',serif;font-weight:bold;
    border:1px solid;transition:var(--transition);white-space:nowrap;
  }
  .btn-dl-word{
    background:rgba(33,115,200,0.1);border-color:rgba(33,115,200,0.45);color:#5aabee;
  }
  .btn-dl-word:hover{background:rgba(33,115,200,0.22);transform:translateY(-1px);box-shadow:0 4px 14px rgba(33,115,200,0.2)}
  .btn-dl-pdf{
    background:rgba(220,50,50,0.1);border-color:rgba(220,50,50,0.45);color:#e07070;
  }
  .btn-dl-pdf:hover{background:rgba(220,50,50,0.22);transform:translateY(-1px);box-shadow:0 4px 14px rgba(220,50,50,0.2)}

  /* Content area */
  .text-content{padding:2rem}
  .section-title{
    margin-bottom:1.5rem;font-family:var(--ff-main,'Scheherazade New',serif);
    font-size:1.6rem;
  }

  /* Poem */
  .poem-container{
    background:var(--bg-card2);border-radius:var(--radius);
    padding:3rem 1.5rem;
    box-sizing:border-box;
    overflow:hidden;
  }
  /* شعر */
  .poem-container.poetry-mode{
    padding:3rem 1.5rem;
  }
  /* نثر وقصص */
  .poem-container.prose-mode{
    padding:3rem 2rem;
  }
  @media(max-width:768px){
    .poem-container.poetry-mode,
    .poem-container.prose-mode{padding:1.5rem .8rem;}
  }
  /* Non-split lines (prose/story) */
  .poem-line{
    padding:1rem .5rem;font-size:clamp(1.1rem,3.5vw,1.85rem);
    line-height:2.2;color:var(--text-bright);text-align:center;
    transition:background .2s;cursor:default;
    font-family:var(--ff-main,'Scheherazade New',serif);
    white-space:normal;word-break:keep-all;overflow-wrap:break-word;
  }
  .poem-line:last-child{border-bottom:none}
  .poem-line:hover{background:rgba(255,255,255,0.02);border-radius:8px}
  .poem-number{
    color:var(--text-dim);font-size:.75rem;
    display:inline-block;margin-left:1rem;opacity:.5;
  }

  /* Bio */
  .bio-box{
    background:var(--bg-card2);border-radius:var(--radius);
    padding:2rem;line-height:2.5;font-size:1.35rem;
    font-family:var(--ff-main,'Scheherazade New',serif);
    white-space:pre-line;
  }

  /* Vocab */
  .vocab-search{
    background:rgba(255,255,255,0.04);border:1px solid var(--border-gold);
    border-radius:25px;padding:.5rem 1.2rem;color:var(--text-main);
    font-size:.9rem;font-family:'Amiri',serif;width:100%;outline:none;
    margin-bottom:1.5rem;direction:rtl;transition:var(--transition);
  }
  .vocab-search:focus{border-color:var(--gold);background:rgba(212,175,55,0.04)}
  .vocab-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.8rem;
  }
  .vocab-card{
    background:var(--bg-card2);border-radius:var(--radius-sm);
    padding:.85rem 1rem;display:flex;gap:.6rem;align-items:flex-start;
    border:1px solid rgba(255,255,255,0.04);
    transition:var(--transition);
  }
  .vocab-card:hover{border-color:rgba(255,255,255,0.1);transform:translateY(-2px)}
  .vocab-word{font-weight:bold;min-width:max-content;font-size:1.35rem;text-decoration:none!important}

  /* Inline vocab highlights in poem text */
  .vhl{color:var(--gold);font-weight:bold;cursor:help;}
  .vhl:hover{opacity:.8}
  /* Tooltip */
  #vhl-tip{
    position:fixed;z-index:99999;
    background:var(--bg-card);border:1px solid var(--gold);
    border-radius:12px;padding:.6rem 1rem;
    max-width:260px;min-width:120px;
    box-shadow:0 8px 32px rgba(0,0,0,0.45);
    pointer-events:none;opacity:0;transform:translateY(5px) scale(.97);
    transition:opacity .15s,transform .15s;
    font-family:'Amiri',serif;direction:rtl;
  }
  #vhl-tip.on{opacity:1;transform:translateY(0) scale(1)}
  #vhl-tip .vt-w{color:var(--gold);font-weight:bold;font-size:1.27rem;margin-bottom:.18rem}
  #vhl-tip .vt-m{color:var(--text-main);font-size:1.17rem;line-height:1.5}
  .vocab-colon{color:var(--text-dim);flex-shrink:0}
  .vocab-meaning{color:var(--text-dim);line-height:2;font-size:1.25rem;text-decoration:none!important}

  /* Questions */
  .year-block{margin-bottom:2rem}
  .year-badge{
    padding:.5rem 1.2rem;border-radius:var(--radius-sm);font-weight:bold;
    margin-bottom:1rem;display:inline-flex;align-items:center;gap:.5rem;font-size:.95rem;
  }
  .q-card{
    border-radius:var(--radius-sm);overflow:hidden;
    margin-bottom:.85rem;border:1px solid rgba(212,175,55,0.15);
    transition:var(--transition);
  }
  .q-card:hover{border-color:rgba(212,175,55,0.3)}
  .q-text{
    background:rgba(212,175,55,0.05);padding:1rem 1.2rem;
    color:var(--text-bright);font-weight:bold;line-height:2.2;
    font-family:var(--ff-main,'Scheherazade New',serif);font-size:1.35rem;
  }
  .q-icon{color:var(--gold);margin-left:.4rem}
  .q-action{padding:.8rem 1.2rem;background:rgba(0,0,0,0.25)}
  .show-answer-btn{
    background:linear-gradient(135deg,var(--gold),var(--gold-dim));color:#07070f;
    border:none;padding:.5rem 1.6rem;border-radius:20px;cursor:pointer;
    font-family:'Amiri',serif;font-weight:bold;font-size:.9rem;
    transition:var(--transition);
  }
  .show-answer-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px rgba(212,175,55,0.3)}
  .answer-text{
    color:#a8e6cf;line-height:2.4;padding:.6rem 0;
    font-family:var(--ff-main,'Scheherazade New',serif);font-size:1.28rem;
    white-space:pre-line;
  }
  .hide-btn{
    background:transparent;color:var(--text-dim);border:1px solid #444;
    padding:.3rem 1rem;border-radius:20px;cursor:pointer;font-size:.82rem;margin-top:.5rem;
    font-family:'Amiri',serif;transition:var(--transition);
  }
  .hide-btn:hover{border-color:#666;color:var(--text-main)}

  /* All-questions expand */
  .expand-all-btn{
    background:rgba(212,175,55,0.07);border:1px solid var(--border-gold);
    color:var(--gold);padding:.5rem 1.4rem;border-radius:25px;cursor:pointer;
    font-family:'Amiri',serif;font-size:.88rem;transition:var(--transition);
    margin-bottom:1.5rem;
  }
  .expand-all-btn:hover{background:rgba(212,175,55,0.12)}

  /* ═══════════════════════════════════════════════════════
     TOAST / NOTIFICATIONS
  ═══════════════════════════════════════════════════════ */
  #toast{
    position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(100px);
    background:rgba(20,20,40,0.95);border:1px solid var(--border-gold);
    border-radius:25px;padding:.7rem 1.5rem;
    color:var(--gold);font-size:.9rem;backdrop-filter:blur(20px);
    z-index:9998;transition:transform .4s cubic-bezier(0.34,1.56,0.64,1);
    pointer-events:none;white-space:nowrap;
  }
  #toast.show{transform:translateX(-50%) translateY(0)}

  /* ═══════════════════════════════════════════════════════
     SCROLL TO TOP
  ═══════════════════════════════════════════════════════ */
  #scroll-top{
    position:fixed;bottom:2rem;left:1.5rem;
    width:42px;height:42px;border-radius:50%;
    background:rgba(212,175,55,0.12);border:1px solid var(--border-gold);
    color:var(--gold);cursor:pointer;z-index:500;
    display:flex;align-items:center;justify-content:center;font-size:1.2rem;
    transition:var(--transition);opacity:0;pointer-events:none;
    backdrop-filter:blur(10px);
  }
  #scroll-top.visible{opacity:1;pointer-events:all}
  #scroll-top:hover{background:rgba(212,175,55,0.22);transform:translateY(-3px)}

  /* Float new-window button */


  /* ═══════════════════════════════════════════════════════
     RESPONSIVE
  ═══════════════════════════════════════════════════════ */
  @media(max-width:600px){
    #cards-grid{grid-template-columns:1fr;padding:1rem}
    #main-nav{padding:.7rem 1rem}
    #search-input{width:180px}
    #search-input:focus{width:200px}
    .text-content{padding:.6rem}
    .text-header{padding:.35rem .8rem;}
    .text-header-row{gap:.5rem}
    .text-title-main{font-size:.95rem}
    .text-author-main{font-size:.8rem}
    .poet-img{width:42px;height:42px}
    .back-btn{font-size:.82rem;padding:.4rem .8rem}
    .dec-card{padding:1.5rem}
    .poem-line{font-size:clamp(1rem,5vw,1.3rem);padding:.7rem .3rem;line-height:2}

    .poem-container{padding:.5rem}
  }
  @media(max-width:400px){
    .nav-stats{display:none}
    #search-input{width:150px}
  }

  /* ═══════════════════════════════════════════════════════
     ANIMATIONS
  ═══════════════════════════════════════════════════════ */
  @keyframes spin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
  /* ── LOG ── */
  .log-entry{background:var(--bg-card);border-radius:10px;padding:.8rem 1rem;margin-bottom:.6rem;border:1px solid rgba(255,255,255,0.06)}
  .log-entry-header{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.5rem}
  .log-action-badge{font-size:.72rem;font-weight:bold;padding:.15rem .6rem;border-radius:12px;white-space:nowrap}
  .log-time{color:var(--text-dim);font-size:.75rem;margin-right:auto}
  .log-subject{color:var(--text-bright);font-size:.85rem;font-weight:bold}
  .log-diff{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-top:.4rem}
  .log-before,.log-after{border-radius:7px;padding:.45rem .7rem;font-size:.78rem;line-height:1.7;word-break:break-all}
  .log-before{background:rgba(224,90,90,0.08);border:1px solid rgba(224,90,90,0.2);color:#ffaaaa}
  .log-after{background:rgba(80,200,120,0.08);border:1px solid rgba(80,200,120,0.2);color:#aaffcc}
  .log-before::before{content:'قبل: ';font-weight:bold;opacity:.7;display:block;font-size:.7rem}
  .log-after::before{content:'بعد: ';font-weight:bold;opacity:.7;display:block;font-size:.7rem}
  .log-single{border-radius:7px;padding:.45rem .7rem;font-size:.78rem;color:var(--text-dim);background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);margin-top:.4rem}

  @keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
  @keyframes slideInRight{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
  .card-appear{animation:fadeIn .4s ease both}

  /* Loading skeleton */
  .skeleton{
    background:linear-gradient(90deg,var(--bg-card) 25%,rgba(255,255,255,0.03) 50%,var(--bg-card) 75%);
    background-size:200% 100%;
    animation:shimmer 1.5s infinite;border-radius:8px;
  }
  @keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

  /* Category colors for cat-btn hover glow */
  .cat-btn:hover{box-shadow:0 0 20px rgba(255,255,255,0.05)}

  /* ═══ THEME 1: LIGHT (أبيض — الافتراضي) ═══════════════ */
  /* :root already has light values — theme-light just ensures clean state */
  body.theme-light{
    --gold:#9a7000;--gold-light:#c49a00;--gold-dim:#6b4e00;
    --bg-deep:#faf6ef;--bg-mid:#f0e8d8;--bg-card:#fffdf7;--bg-card2:#f5edd8;
    --text-main:#0d1b2a;--text-dim:#3a5068;--text-bright:#0a1520;
    --border-gold:rgba(154,112,0,0.22);--border-gold-hover:rgba(154,112,0,0.5);
    --shadow-gold:rgba(154,112,0,0.12);
  }
  body.theme-light #search-suggestions{background:#fffdf7;border-color:rgba(154,112,0,0.35);box-shadow:0 8px 32px rgba(100,70,0,0.15)}
  body.theme-sepia #search-suggestions{background:#f0e8d0;border-color:rgba(139,90,30,0.3)}
  body.theme-sage  #search-suggestions{background:#e8efe8;border-color:rgba(80,120,80,0.3)}
  body.theme-rose  #search-suggestions{background:#2a1020;border-color:rgba(200,100,120,0.3)}
  body.theme-night #search-suggestions{background:#08090e;border-color:rgba(212,175,55,0.3)}
  body.theme-light #main-nav{background:rgba(250,246,239,0.97);border-bottom-color:rgba(154,112,0,0.18);box-shadow:0 2px 12px rgba(100,70,0,0.08)}
  body.theme-light #stars-canvas{opacity:0}
  body.theme-light .poem-container,
  body.theme-light .bio-box,
  body.theme-light .vocab-card,
  body.theme-light .q-text{background:#f5edd8;border-color:rgba(154,112,0,0.15)}
  body.theme-light .q-action{background:rgba(154,112,0,0.05)}
  body.theme-light .text-header{background:rgba(250,246,239,0.97);border-bottom:1px solid rgba(154,112,0,0.12)}
  body.theme-light .tabs-fixed-wrap{background:rgba(250,246,239,0.97);border-bottom:1px solid rgba(154,112,0,0.12)}
  body.theme-light #home-hero{background:linear-gradient(180deg,rgba(250,246,239,0.95) 0%,transparent 100%)}
  body.theme-light .answer-text{color:#1a6030}
  body.theme-light .dec-text{color:#0d1b2a}
  body.theme-light .text-card{background:#fffdf7;border-color:rgba(154,112,0,0.18)}
  body.theme-light .text-card:hover{background:#fff9ee;border-color:rgba(196,154,0,0.75);box-shadow:0 8px 30px rgba(154,112,0,0.18),0 0 0 1px rgba(196,154,0,0.35)}
  body.theme-light .cat-btn{background:#eef1f7;border-color:rgba(180,190,210,0.6);color:#2a3a5a}
  body.theme-light .cat-btn:hover{background:#e4e8f4;border-color:rgba(100,130,200,0.5)}
  body.theme-light .cat-btn.active{background:linear-gradient(135deg,#9a7000,#c49a00);color:#fffdf7;border-color:transparent}
  body.theme-light .sug-item{color:#0d1b2a;border-bottom-color:rgba(154,112,0,0.08)}
  body.theme-light .sug-item:hover{background:rgba(154,112,0,0.1)}
  body.theme-light .card-title{color:#7a5500}
  body.theme-light .card-author{color:#9a7000}
  body.theme-light .nav-title{color:#9a7000}
  body.theme-light .nav-subtitle{color:#3a5068}
  /* ═══ THEME 2: DARK (داكن) ══════════════════════════════ */
  body.theme-dark{
    --gold:#d4af37;
    --gold-light:#f0d060;
    --gold-dim:#b8960c;
    --bg-deep:#0e0e1c;
    --bg-mid:#141428;
    --bg-card:#181830;
    --bg-card2:#141428;
    --text-main:#e8d8b8;
    --text-dim:#9a8878;
    --text-bright:#f8eedc;
    --border-gold:rgba(212,175,55,0.18);
    --border-gold-hover:rgba(212,175,55,0.45);
    --shadow-gold:rgba(212,175,55,0.15);
    --classic:#d4af37;--modern:#d4af37;--prose:#d4af37;
    --stories:#d4af37;--external:#d4af37;--review:#d4af37;
  }
  body.theme-dark #main-nav{background:rgba(14,12,28,0.97)}
  body.theme-dark #stars-canvas{opacity:1}
  body.theme-dark .poem-container,
  body.theme-dark .bio-box,
  body.theme-dark .vocab-card,
  body.theme-dark .q-text{background:rgba(20,18,38,0.95)}
  body.theme-dark .q-action{background:rgba(0,0,0,0.25)}
  body.theme-dark .text-header{background:rgba(14,12,28,0.97)}
  body.theme-dark .tabs-fixed-wrap{background:rgba(14,12,28,0.97)}
  body.theme-dark #home-hero{background:linear-gradient(180deg,rgba(14,12,28,0.97) 0%,transparent 100%)}
  body.theme-dark .answer-text{color:#d4af37}
  /* Dark: card styles */
  body.theme-dark .text-card{background:#181830;border-color:rgba(212,175,55,0.18)}
  body.theme-dark .text-card:hover{border-color:rgba(212,175,55,0.7);box-shadow:0 8px 30px rgba(212,175,55,0.15),0 0 0 1px rgba(212,175,55,0.35)}
  body.theme-dark .card-title{color:#d4af37}
  body.theme-dark .card-author{color:#b8960c}
  body.theme-dark .card-meta{border-top-color:rgba(212,175,55,0.1);color:#9a8878}
  body.theme-dark .card-action{background:rgba(212,175,55,0.08);border-color:rgba(212,175,55,0.35);color:#d4af37}
  body.theme-dark .card-action:hover{background:rgba(212,175,55,0.18);border-color:rgba(212,175,55,0.65);color:#f0d060}
  /* Dark: cat buttons */
  body.theme-dark .cat-btn{background:rgba(212,175,55,0.06);border-color:rgba(212,175,55,0.2);color:#9a8878}
  body.theme-dark .cat-btn:hover{background:rgba(212,175,55,0.12);border-color:rgba(212,175,55,0.4);color:#d4af37}
  body.theme-dark .cat-btn.active{background:linear-gradient(135deg,#9a7000,#d4af37);color:#0e0e1c;border-color:transparent;box-shadow:0 2px 12px rgba(212,175,55,0.3)}
  /* Dark: cat badge */
  body.theme-dark .card-cat-badge{background:rgba(212,175,55,0.1);color:#d4af37;border:1px solid rgba(212,175,55,0.25)}
  /* Dark: tab buttons */
  body.theme-dark .tab-btn{background:rgba(212,175,55,0.05);border-color:rgba(212,175,55,0.18);color:#9a8878}
  body.theme-dark .tab-btn:hover{border-color:rgba(212,175,55,0.4);color:#d4af37}
  body.theme-dark .tab-btn.active{background:linear-gradient(135deg,#9a7000,#d4af37);color:#0e0e1c;border-color:transparent}
  /* Dark: cat badge in text page */
  body.theme-dark .cat-badge-large{background:rgba(212,175,55,0.12);color:#d4af37;border-color:rgba(212,175,55,0.3)}
  /* Dark: search suggestions */
  body.theme-dark .sug-item{color:#e8d8b8;border-bottom-color:rgba(212,175,55,0.1)}
  body.theme-dark .sug-item:hover{background:rgba(212,175,55,0.1)}
  body.theme-dark .sug-match{color:#f0d060}
  /* Dark: nav title */
  body.theme-dark .nav-title{color:#d4af37}
  /* ═══ THEME 3: SAGE (أخضر زيتوني — مريح للعين) ══════════ */
  body.theme-sage{
    --bg-deep:#1a2018;
    --bg-mid:#212a1e;
    --bg-card:#263023;
    --bg-card2:#202820;
    --text-main:#d4e8c8;
    --text-dim:#8aaa80;
    --text-bright:#e8f5e0;
    --border-gold:rgba(180,200,100,0.2);
    --border-gold-hover:rgba(180,200,100,0.45);
    --shadow-gold:rgba(120,160,60,0.15);
    --gold:#a8cc60;
    --gold-light:#c8e878;
    --gold-dim:#88aa40;
  }
  body.theme-sage #main-nav{background:rgba(22,28,20,0.95)}
  body.theme-sage #stars-canvas{opacity:0.4}
  body.theme-sage .poem-container,
  body.theme-sage .bio-box,
  body.theme-sage .vocab-card,
  body.theme-sage .q-text{background:rgba(30,40,28,0.9)}
  body.theme-sage .answer-text{color:#a0d880}
  /* ═══ THEME 4: SEPIA (بني دافئ — مريح للقراءة الطويلة) ═══ */
  body.theme-sepia{
    --bg-deep:#f4ede0;
    --bg-mid:#ede4d4;
    --bg-card:#f9f3e8;
    --bg-card2:#f2ead8;
    --text-main:#3d2b14;
    --text-dim:#8a6a45;
    --text-bright:#1e1208;
    --border-gold:rgba(140,100,30,0.22);
    --border-gold-hover:rgba(140,100,30,0.5);
    --shadow-gold:rgba(140,100,30,0.1);
    --gold:#9a7030;
    --gold-light:#c09050;
    --gold-dim:#7a5820;
  }
  .theme-night{
    --gold:#c8a84b;--gold-light:#e8c86a;--gold-dim:#a88030;
    --bg-deep:#080b14;--bg-mid:#0c1020;--bg-card:#101828;--bg-card2:#0c1020;
    --text-main:#ccd8f0;--text-dim:#7888aa;--text-bright:#e8f0ff;
    --border-gold:rgba(200,168,75,0.2);--border-gold-hover:rgba(200,168,75,0.5);
    --shadow-gold:rgba(200,168,75,0.15);
  }
  .theme-rose{
    --gold:#c07850;--gold-light:#e09870;--gold-dim:#a05830;
    --bg-deep:#1e0e14;--bg-mid:#28121c;--bg-card:#321828;--bg-card2:#28121c;
    --text-main:#f0d8cc;--text-dim:#aa8878;--text-bright:#fff0e8;
    --border-gold:rgba(200,120,80,0.25);--border-gold-hover:rgba(200,120,80,0.5);
    --shadow-gold:rgba(180,80,60,0.15);
  }
  .theme-sand{
    --gold:#8a6020;--gold-light:#b08030;--gold-dim:#6a4810;
    --bg-deep:#f8f0e0;--bg-mid:#f0e8d4;--bg-card:#faf4e8;--bg-card2:#f0e8d4;
    --text-main:#3a2a10;--text-dim:#7a6040;--text-bright:#1a0e00;
    --border-gold:rgba(138,96,32,0.22);--border-gold-hover:rgba(138,96,32,0.5);
    --shadow-gold:rgba(138,96,32,0.1);
  }
  /* night / rose / sand — nav + stars */
  body.theme-night #main-nav{background:rgba(8,11,20,0.95);border-bottom-color:rgba(200,168,75,0.2)}
  body.theme-night #stars-canvas{opacity:1}
  body.theme-rose  #main-nav{background:rgba(30,14,20,0.95);border-bottom-color:rgba(192,120,80,0.2)}
  body.theme-rose  #stars-canvas{opacity:1}
  body.theme-sand  #main-nav{background:rgba(248,240,224,0.97);border-bottom-color:rgba(138,96,32,0.2)}
  body.theme-sand  #stars-canvas{opacity:0}
  body.theme-sepia #main-nav{background:rgba(240,232,215,0.97)}
  body.theme-sepia #stars-canvas{opacity:0}
  body.theme-sepia .poem-container,
  body.theme-sepia .bio-box,
  body.theme-sepia .vocab-card,
  body.theme-sepia .q-text{background:rgba(240,230,210,0.8)}
  body.theme-sepia .q-action{background:rgba(0,0,0,0.04)}
  body.theme-sepia .text-header{background:rgba(244,237,224,0.97)}
  body.theme-sepia .tabs-fixed-wrap{background:rgba(244,237,224,0.97);border-bottom:none}
  body.theme-sepia #home-hero{background:linear-gradient(180deg,rgba(235,225,200,0.95) 0%,transparent 100%)}
  body.theme-sepia .answer-text{color:#2a6640}
  body.theme-sepia .dec-text{color:#3d2b14}
  /* keep light-mode as alias for theme-light for backward compat */
  body.light-mode{
    --bg-deep:#ffffff;--bg-mid:#f5f5f5;--bg-card:#ffffff;--bg-card2:#f9f9f9;
    --text-main:#1a1a2e;--text-dim:#5a5a7a;--text-bright:#0d0d1a;
  }

  /* ═══ TOOLBAR ═════════════════════════════════════════ */
  .nav-toolbar{display:flex;align-items:center;gap:.4rem}
  .theme-picker{display:flex;align-items:center;gap:.35rem}
  .theme-dot{
    width:22px;height:22px;border-radius:50%;cursor:pointer;
    transition:all .2s;flex-shrink:0;padding:0;
    box-shadow:0 1px 4px rgba(0,0,0,0.3);
  }
  .theme-dot:hover{transform:scale(1.2)}
  .theme-dot.active{transform:scale(1.25);box-shadow:0 0 0 3px var(--gold)!important}
  .tool-btn{
    background:rgba(212,175,55,0.07);border:1px solid var(--border-gold);
    color:var(--gold);border-radius:8px;padding:.3rem .55rem;
    cursor:pointer;font-size:.85rem;font-family:'Amiri',serif;
    transition:var(--transition);white-space:nowrap;
  }
  .tool-btn:hover{background:rgba(212,175,55,0.18);transform:translateY(-1px)}
  .font-size-ctrl{display:flex;gap:.3rem;align-items:center}
  .font-btn{font-size:.8rem;font-weight:bold;font-family:sans-serif;padding:.3rem .5rem}

  /* ═══ VOCAB HIGHLIGHT ════════════════════════════════ */
  .vocab-card.highlighted{
    border-color:var(--gold)!important;
    background:rgba(212,175,55,0.1)!important;
    box-shadow:0 0 0 2px rgba(212,175,55,0.3);
    transform:translateY(-2px);
  }
  .poem-line.word-active{
    background:rgba(212,175,55,0.08)!important;
    border-radius:8px;
  }
  .vocab-word.clickable{cursor:pointer;}
  .vocab-word.clickable:hover{opacity:.8}

  /* ═══ PWA INSTALL BANNER ════════════════════════════════ */
  #pwa-banner{
    position:fixed;bottom:1.2rem;right:1.2rem;z-index:8000;
    background:rgba(15,12,35,0.97);border:1px solid var(--border-gold);
    border-radius:16px;padding:1rem 1.2rem;max-width:300px;
    box-shadow:0 8px 30px rgba(0,0,0,0.6);backdrop-filter:blur(20px);
    display:none;animation:slideUp .4s cubic-bezier(0.34,1.56,0.64,1);
  }
  @keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
  #pwa-banner.show{display:block}
  .pwa-top{display:flex;align-items:center;gap:.7rem;margin-bottom:.7rem}
  .pwa-icon{font-size:2rem;line-height:1}
  .pwa-title{color:var(--text-bright);font-weight:bold;font-size:.95rem;line-height:1.3}
  .pwa-sub{color:var(--text-dim);font-size:.78rem;margin-top:.15rem}
  .pwa-btns{display:flex;gap:.5rem}
  .pwa-install-btn{
    flex:1;background:linear-gradient(135deg,var(--gold),var(--gold-dim));
    color:#07070f;border:none;padding:.5rem .8rem;border-radius:25px;
    cursor:pointer;font-family:'Amiri',serif;font-weight:bold;font-size:.85rem;
    transition:var(--transition);
  }
  .pwa-install-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px rgba(212,175,55,0.4)}
  .pwa-dismiss-btn{
    background:transparent;border:1px solid rgba(255,255,255,0.1);
    color:var(--text-dim);padding:.5rem .8rem;border-radius:25px;
    cursor:pointer;font-size:.82rem;transition:var(--transition);
    font-family:'Amiri',serif;
  }
  .pwa-dismiss-btn:hover{border-color:rgba(255,255,255,0.25);color:var(--text-main)}

  /* ═══ TEACHER PANEL ════════════════════════════════════ */
  #teacher-panel{
    position:fixed;inset:0;z-index:9000;
    background:rgba(5,5,15,0.92);backdrop-filter:blur(10px);
    display:none;align-items:flex-start;justify-content:center;
    padding:1.5rem;overflow-y:auto;
    pointer-events:none;
  }
  #teacher-panel.open{display:flex;pointer-events:all}
  .tp-box{
    pointer-events:all;
    background:var(--bg-card);border:1px solid var(--border-gold);
    border-radius:20px;width:100%;max-width:780px;
    box-shadow:0 30px 80px rgba(0,0,0,0.7);
    overflow:hidden;
  }
  .tp-header{
    background:linear-gradient(135deg,rgba(212,175,55,0.1),rgba(212,175,55,0.03));
    border-bottom:1px solid var(--border-gold);
    padding:1.2rem 1.5rem;display:flex;align-items:center;justify-content:space-between;
  }
  .tp-title{color:var(--gold);font-weight:bold;font-size:1.1rem;display:flex;align-items:center;gap:.5rem}
  .tp-close{
    background:transparent;border:1px solid rgba(255,255,255,0.1);
    color:var(--text-dim);width:32px;height:32px;border-radius:50%;
    cursor:pointer;font-size:1rem;transition:var(--transition);
    display:flex;align-items:center;justify-content:center;
  }
  .tp-close:hover{border-color:#ff6b6b;color:#ff6b6b}
  .tp-body{padding:1.5rem}
  .tp-tabs{display:flex;gap:.5rem;margin-bottom:1.5rem;flex-wrap:wrap}
  .tp-tab{
    padding:.4rem 1rem;border-radius:20px;cursor:pointer;
    font-family:'Amiri',serif;font-size:.88rem;transition:var(--transition);
    border:1px solid rgba(255,255,255,0.08);background:transparent;color:var(--text-dim);
  }
  .tp-tab.active{background:var(--gold);color:#07070f;border-color:var(--gold);font-weight:bold}
  .tp-section{display:none}
  .tp-section.active{display:block}
  .tp-label{color:var(--gold);font-size:.82rem;margin-bottom:.4rem;display:block;font-weight:bold}
  .tp-input,.tp-select,.tp-textarea{
    width:100%;background:rgba(255,255,255,0.04);
    border:1px solid var(--border-gold);border-radius:10px;
    padding:.65rem 1rem;color:var(--text-main);font-size:.9rem;
    font-family:'Amiri',serif;outline:none;transition:var(--transition);
    direction:rtl;margin-bottom:1rem;
  }
  .tp-input:focus,.tp-select:focus,.tp-textarea:focus{
    border-color:var(--gold);background:rgba(212,175,55,0.04);
  }
  .tp-textarea{min-height:90px;resize:vertical;line-height:1.8}
  .tp-select option{background:var(--bg-card);color:var(--text-main)}
  .tp-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
  @media(max-width:550px){.tp-grid{grid-template-columns:1fr}}
  /* Interactive section in teacher panel */
  .tp-interactive-section{
    border:1px solid rgba(184,134,11,0.3);border-radius:12px;
    padding:1rem 1.2rem;margin:1rem 0;
    background:rgba(184,134,11,0.04);
  }
  .tp-interactive-header{
    font-size:.9rem;font-weight:bold;color:var(--gold);
    margin-bottom:.8rem;display:flex;align-items:center;gap:.4rem;
  }
  /* Pages editor tabs in manage */
  .tp-pages-tabs{
    display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem;
    border-bottom:1px solid rgba(255,255,255,0.07);padding-bottom:.7rem;
  }
  .tp-pages-tab{
    padding:.35rem .9rem;border-radius:20px;font-size:.8rem;
    font-family:'Amiri',serif;cursor:pointer;
    border:1.5px solid rgba(184,134,11,0.35);
    background:transparent;color:var(--text-dim);
    transition:all .2s;
  }
  .tp-pages-tab.active{
    background:var(--gold);color:#07070f;
    border-color:var(--gold);font-weight:bold;
  }
  .tp-pages-tab:hover:not(.active){
    background:rgba(184,134,11,0.12);color:var(--gold);
  }
  .tp-pages-section{display:none}
  .tp-pages-section.active{display:block}

  /* Line explanations editor */
  /* Vocab mode tabs */
  .tp-vocab-mode-tabs{display:flex;gap:.4rem;border-bottom:1px solid rgba(255,255,255,0.07);padding-bottom:.6rem}
  .tp-vocab-mode-tab{
    padding:.35rem 1rem;border-radius:20px;font-size:.82rem;
    font-family:'Amiri',serif;cursor:pointer;
    border:1.5px solid rgba(184,134,11,0.3);
    background:transparent;color:var(--text-dim);transition:all .2s;
  }
  .tp-vocab-mode-tab.active{background:var(--gold);color:#07070f;border-color:var(--gold);font-weight:bold}
  .tp-vocab-mode-tab:hover:not(.active){background:rgba(184,134,11,0.1);color:var(--gold)}

  /* Line picker items */
  .vle-pick-item{
    display:flex;align-items:center;gap:.7rem;
    padding:.5rem .7rem;border-radius:10px;cursor:pointer;
    border:1px solid rgba(255,255,255,0.06);
    background:rgba(255,255,255,0.02);
    margin-bottom:.4rem;transition:all .15s;
  }
  .vle-pick-item:hover{background:rgba(184,134,11,0.08);border-color:rgba(184,134,11,0.3)}
  .vle-pick-item.has-data{border-color:rgba(184,134,11,0.35);background:rgba(184,134,11,0.05)}
  .vle-pick-item.active{border-color:var(--gold)!important;background:rgba(184,134,11,0.13)!important}
  .vle-pick-num{
    width:1.9rem;height:1.9rem;border-radius:50%;flex-shrink:0;
    background:rgba(184,134,11,0.15);color:var(--gold);
    display:flex;align-items:center;justify-content:center;
    font-size:.78rem;font-weight:bold;
  }
  .vle-pick-item.has-data .vle-pick-num{background:rgba(184,134,11,0.35)}
  .vle-pick-text{flex:1;font-family:var(--ff-main,'Scheherazade New',serif);font-size:1rem;color:var(--text-bright);line-height:1.7}
  .vle-pick-badge{font-size:.72rem;color:var(--gold);flex-shrink:0;white-space:nowrap}
  .vocab-line-num{
    width:2rem;height:2rem;border-radius:50%;
    background:rgba(184,134,11,0.15);color:var(--gold);
    display:flex;align-items:center;justify-content:center;
    font-size:.82rem;font-weight:bold;flex-shrink:0;margin-top:.25rem;
  }
  .vocab-line-inner{display:flex;flex-direction:column;gap:.35rem}
  .vocab-line-text{
    font-family:var(--ff-main,'Scheherazade New',serif);
    font-size:1.05rem;color:var(--text-bright);
    line-height:1.7;
  }
  .vocab-line-input{
    font-family:'Amiri',serif;font-size:.9rem;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(184,134,11,0.2);
    border-radius:8px;padding:.35rem .7rem;
    color:var(--text-main);width:100%;
    resize:vertical;min-height:42px;
    transition:border-color .2s;
    direction:rtl;
  }
  .vocab-line-input:focus{
    outline:none;border-color:var(--gold);
    background:rgba(184,134,11,0.06);
  }
  .vocab-line-input::placeholder{color:var(--text-dim);opacity:.7}
  .tp-btn{
    background:linear-gradient(135deg,var(--gold),var(--gold-dim));
    color:#07070f;border:none;padding:.7rem 1.8rem;border-radius:25px;
    cursor:pointer;font-family:'Amiri',serif;font-weight:bold;font-size:.95rem;
    transition:var(--transition);
  }
  .tp-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(212,175,55,0.4)}
  .tp-btn-ghost{
    background:transparent;border:1px solid var(--border-gold);
    color:var(--gold);padding:.65rem 1.5rem;border-radius:25px;
    cursor:pointer;font-family:'Amiri',serif;font-size:.88rem;transition:var(--transition);
  }
  .tp-btn-ghost:hover{background:rgba(212,175,55,0.08)}
  .tp-btn-danger{
    background:rgba(255,80,80,0.1);border:1px solid rgba(255,80,80,0.3);
    color:#ff8080;padding:.45rem 1rem;border-radius:20px;
    cursor:pointer;font-size:.82rem;transition:var(--transition);font-family:'Amiri',serif;
  }
  .tp-btn-danger:hover{background:rgba(255,80,80,0.2)}
  .tp-msg{
    padding:.7rem 1rem;border-radius:10px;font-size:.88rem;margin-bottom:1rem;
    border:1px solid;display:none;
  }
  .tp-msg.success{background:rgba(100,220,120,0.08);border-color:rgba(100,220,120,0.3);color:#80e898}
  .tp-msg.error{background:rgba(255,80,80,0.08);border-color:rgba(255,80,80,0.3);color:#ff9090}
  .tp-divider{border:none;border-top:1px solid rgba(255,255,255,0.07);margin:1.2rem 0}
  .tp-style-group{margin-bottom:1rem}
  .tp-style-label{color:var(--gold);font-size:.88rem;font-weight:bold;margin-bottom:.8rem}
  .tp-style-row{display:flex;align-items:center;gap:.8rem;margin-bottom:.5rem}
  .tp-toggle-row{
    display:flex;align-items:center;justify-content:space-between;
    padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,0.05);
    gap:1rem;
  }
  .tp-toggle-row:last-of-type{border-bottom:none}
  .tp-toggle-info{flex:1}
  .tp-toggle-title{color:var(--text-bright);font-size:.9rem;font-weight:bold}
  .tp-toggle-sub{color:var(--text-dim);font-size:.78rem;margin-top:.15rem;line-height:1.4}
  /* Toggle switch */
  .tp-switch{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0}
  .tp-switch input{opacity:0;width:0;height:0}
  .tp-slider{
    position:absolute;cursor:pointer;inset:0;
    background:rgba(255,255,255,0.1);border-radius:24px;
    transition:.3s;border:1px solid rgba(255,255,255,0.1);
  }
  .tp-slider:before{
    content:'';position:absolute;height:16px;width:16px;
    right:3px;bottom:3px;background:#888;border-radius:50%;
    transition:.3s;
  }
  .tp-switch input:checked + .tp-slider{background:var(--gold);border-color:var(--gold)}
  .tp-switch input:checked + .tp-slider:before{right:auto;left:3px;background:#07070f}
  .tp-list-item{
    background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);
    border-radius:10px;padding:.75rem 1rem;margin-bottom:.6rem;
    display:flex;align-items:center;justify-content:space-between;gap:.5rem;
    flex-wrap:wrap;
  }
  .tp-list-item-info{flex:1;min-width:0}
  .tp-list-item-title{color:var(--text-bright);font-size:.9rem;font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tp-list-item-sub{color:var(--text-dim);font-size:.78rem;margin-top:.15rem}
  .tp-q-row{display:flex;gap:.5rem;margin-bottom:.5rem;align-items:flex-start}
  .tp-q-row .tp-textarea{margin-bottom:0;flex:1}
  .tp-q-remove{background:transparent;border:none;color:var(--text-dim);cursor:pointer;font-size:1.1rem;padding:.3rem;transition:var(--transition);flex-shrink:0;margin-top:.3rem}
  .tp-q-remove:hover{color:#ff8080}
  .tp-year-block{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:10px;padding:1rem;margin-bottom:1rem}
  .tp-year-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem}
  .tp-add-link{color:var(--gold);font-size:.82rem;cursor:pointer;background:none;border:none;font-family:'Amiri',serif;transition:var(--transition)}
  .tp-add-link:hover{opacity:.7}
  .tp-stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.8rem;margin-bottom:1.2rem}
  .tp-stat-card{background:rgba(212,175,55,0.05);border:1px solid var(--border-gold);border-radius:12px;padding:.9rem;text-align:center}
  .tp-stat-num{font-size:1.8rem;color:var(--gold);font-weight:bold;line-height:1}
  .tp-stat-label{color:var(--text-dim);font-size:.78rem;margin-top:.3rem}

  /* Teacher trigger btn */
  #teacher-trigger{
    background:rgba(212,175,55,0.08);border:1px solid var(--border-gold);
    color:var(--gold);cursor:pointer;z-index:500;
    display:flex;align-items:center;justify-content:center;font-size:1rem;
    transition:var(--transition);backdrop-filter:blur(10px);
    border-radius:10px;padding:.3rem .6rem;height:36px;
    opacity:0.7;
  }
  #teacher-trigger:hover{opacity:1;background:rgba(212,175,55,0.18);transform:translateY(-1px)}

  /* Teacher password overlay */
  #teacher-auth{
    position:fixed;inset:0;z-index:9500;
    background:rgba(5,5,15,0.95);backdrop-filter:blur(15px);
    display:none;align-items:center;justify-content:center;padding:2rem;
  }
  #teacher-auth.open{display:flex}
  .ta-box{max-width:380px;width:100%;text-align:center}
  .ta-icon{font-size:2.5rem;margin-bottom:1rem;color:var(--gold)}
  .ta-title{color:var(--text-bright);font-size:1.3rem;font-weight:bold;margin-bottom:.4rem}
  .ta-sub{color:var(--text-dim);font-size:.85rem;margin-bottom:1.5rem}
  #ta-input{
    width:100%;background:rgba(255,255,255,0.04);
    border:1px solid var(--border-gold);border-radius:50px;
    padding:.75rem 1.5rem;color:var(--text-bright);font-size:1.1rem;
    font-family:'Amiri',serif;text-align:center;outline:none;
    transition:var(--transition);margin-bottom:.7rem;letter-spacing:.2em;
  }
  #ta-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,175,55,0.1)}
  #ta-input.shake{animation:shake .4s ease;border-color:#ff6b6b}
  .ta-error{color:#ff7070;font-size:.82rem;min-height:1.2rem;margin-bottom:.7rem}
  .ta-btns{display:flex;gap:.6rem}

/* ═══ CONFIRM MODAL ═══ */
  #confirm-modal{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px)}
  #confirm-modal.show{display:flex}
  #confirm-box{background:var(--card-bg,#1a1632);border:1px solid rgba(212,175,55,0.3);border-radius:16px;padding:1.8rem 1.5rem;max-width:360px;width:90%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.5)}
  #confirm-box h3{color:var(--gold,#d4af37);font-size:1.1rem;margin-bottom:.6rem}
  #confirm-box p{color:var(--text-dim,#9080a0);font-size:.88rem;line-height:1.55;margin-bottom:1.4rem}
  .confirm-btns{display:flex;gap:.7rem;justify-content:center}
  .confirm-btns button{border-radius:20px;padding:.45rem 1.2rem;cursor:pointer;font-family:inherit;font-size:.9rem;font-weight:bold;border:none;transition:filter .15s}
  .confirm-btns button:hover{filter:brightness(1.1)}
  #confirm-yes{background:#e05a5a;color:#fff}
  #confirm-no{background:rgba(255,255,255,0.1);color:var(--text-dim,#9080a0);border:1px solid rgba(255,255,255,0.15)!important}

  /* ═══ 1. POEM FONT LARGER ═══ */
  .poem-container{
    overflow-x:hidden;
    overflow-y:visible;
    padding-bottom:1.5rem;
  }
  .poem-line{
    font-size:clamp(1.4rem,4vw,2.2rem) !important;
    white-space:normal;
    overflow-wrap:break-word;
    word-break:keep-all;
    min-width:0;
    padding-top:0.7rem !important;
    padding-bottom:0.7rem !important;
    line-height:2.4 !important;
    overflow:visible;
  }

  /* ═══ 2. NO-COPY on poem container ═══ */
  .poem-container{
    -webkit-user-select:none;
    -moz-user-select:none;
    user-select:none;
  }

  /* ═══ 3. VERSE EXPLANATION MODAL ═══ */
  #verse-modal-overlay{
    display:none;position:fixed;inset:0;z-index:8000;
    background:rgba(0,0,0,0.75);backdrop-filter:blur(6px);
    align-items:center;justify-content:center;padding:1rem;
  }
  #verse-modal-overlay.open{display:flex;}
  #verse-modal-box{
    background:var(--bg-card,#fff);border-radius:20px;
    border:2px solid var(--gold,#b8860b);
    max-width:680px;width:100%;max-height:85vh;overflow-y:auto;
    padding:2rem 2.5rem;position:relative;
    box-shadow:0 8px 60px rgba(0,0,0,0.5);
    font-family:var(--ff-main,'Scheherazade New',serif);direction:rtl;
  }
  #verse-modal-box .vm-number{
    font-size:1rem;color:var(--gold,#b8860b);font-weight:bold;margin-bottom:.5rem;
  }
  #verse-modal-box .vm-verse{
    font-size:2rem;line-height:2;color:var(--text-bright,#0d0d1a);
    border-bottom:1px solid rgba(184,134,11,0.25);padding-bottom:1rem;margin-bottom:1rem;
  }
  #verse-modal-box .vm-explanation{
    font-size:1.7rem;line-height:2.2;color:var(--text-main,#1a1a2e);
    white-space:pre-line;
  }
  #verse-modal-box .vm-close{
    position:absolute;top:.8rem;left:1rem;background:none;border:none;
    font-size:1.4rem;cursor:pointer;color:var(--text-dim,#5a5a7a);
    transition:color .2s;line-height:1;padding:.3rem;
  }
  #verse-modal-box .vm-close:hover{color:var(--gold,#b8860b)}
  .poem-number.clickable{
    cursor:pointer;color:var(--gold,#b8860b) !important;opacity:1 !important;
    font-size:.9rem !important;font-weight:bold;
    background:rgba(184,134,11,0.1);border-radius:50%;
    width:1.8rem;height:1.8rem;display:inline-flex;align-items:center;justify-content:center;
    transition:background .2s,transform .2s;
  }
  .poem-number.clickable:hover{background:rgba(184,134,11,0.25);transform:scale(1.15)}

  /* ═══ 5. BIO ABOVE POEM — already handled in JS render order ═══ */

  /* ═══ 6. INTERACTIVE & SLIDES TABS ═══ */
  .game-tab-content,.slides-tab-content{
    padding:2rem;text-align:center;
  }
  .kahoot-btn{
    display:inline-block;padding:1rem 2.5rem;
    background:linear-gradient(135deg,#46178f,#6e2fc3);color:#fff;
    border-radius:30px;font-size:1.3rem;font-family:'Amiri',serif;
    font-weight:bold;text-decoration:none;border:none;cursor:pointer;
    box-shadow:0 4px 20px rgba(70,23,143,0.4);transition:transform .2s,box-shadow .2s;
  }
  .kahoot-btn:hover{transform:translateY(-2px);box-shadow:0 6px 28px rgba(70,23,143,0.6)}
  .slides-iframe-wrap{
    width:100%;max-width:800px;margin:0 auto;
    border-radius:12px;overflow:hidden;
    box-shadow:0 4px 30px rgba(0,0,0,0.3);
    aspect-ratio:16/9;
  }
  .slides-iframe-wrap iframe{width:100%;height:100%;border:none;}

  /* ═══ 7. CV MODAL (مصعب عويسات) ═══ */
  #cv-modal-overlay{
    display:none;position:fixed;inset:0;z-index:8100;
    background:rgba(0,0,0,0.75);backdrop-filter:blur(6px);
    align-items:center;justify-content:center;padding:1rem;
  }
  #cv-modal-overlay.open{display:flex;}
  #cv-modal-box{
    background:var(--bg-card,#fff);border-radius:20px;
    border:2px solid var(--gold,#b8860b);
    max-width:600px;width:100%;max-height:85vh;overflow-y:auto;
    padding:2rem 2.5rem;position:relative;
    box-shadow:0 8px 60px rgba(0,0,0,0.5);
    font-family:var(--ff-main,'Scheherazade New',serif);direction:rtl;
  }
  #cv-modal-box .cv-close{
    position:absolute;top:.8rem;left:1rem;background:none;border:none;
    font-size:1.4rem;cursor:pointer;color:var(--text-dim,#5a5a7a);
    line-height:1;padding:.3rem;
  }
  #cv-modal-box .cv-close:hover{color:var(--gold,#b8860b)}
  #cv-modal-box h2{color:var(--gold,#b8860b);font-size:1.6rem;margin-bottom:1rem;border-bottom:1px solid rgba(184,134,11,0.3);padding-bottom:.5rem;}
  #cv-modal-box p,#cv-modal-box li{font-size:1.1rem;line-height:2;color:var(--text-main,#1a1a2e);}
  .musab-link{
    color:var(--gold,#b8860b);cursor:pointer;text-decoration:underline dotted;
    font-weight:bold;
  }
  .musab-link:hover{text-decoration:underline;}

  /* ═══ 8. NEW NAV BUTTONS (replace search) ═══ */
  .nav-extra-btns{
    display:flex;gap:.35rem;align-items:center;flex-wrap:wrap;
  }
  .nav-extra-btn{
    padding:.38rem .95rem;border-radius:20px;font-size:.88rem;font-family:'Amiri',serif;
    font-weight:bold;cursor:pointer;border:1.5px solid rgba(184,134,11,0.4);
    background:rgba(184,134,11,0.1);color:var(--gold,#b8860b);
    transition:background .2s,border-color .2s;white-space:nowrap;
  }
  .nav-extra-btn:hover{background:rgba(184,134,11,0.2);border-color:rgba(184,134,11,0.7);}
  .nav-bjawt-btn{background:rgba(41,128,185,0.15)!important;border-color:rgba(41,128,185,0.5)!important;color:#5dade2!important;}
  .nav-bjawt-btn:hover{background:rgba(41,128,185,0.28)!important;border-color:#3498db!important;color:#3498db!important;}

  /* Page modals for new nav buttons */
  .navpage-overlay{
    display:none;position:fixed;inset:0;z-index:8200;
    background:rgba(0,0,0,0.75);backdrop-filter:blur(6px);
    align-items:flex-start;justify-content:center;padding:2rem 1rem;overflow-y:auto;
  }
  .navpage-overlay.open{display:flex;}
  .navpage-box{
    background:var(--bg-card,#fff);border-radius:20px;
    border:2px solid var(--gold,#b8860b);
    max-width:650px;width:100%;
    padding:2rem 2.5rem;position:relative;
    box-shadow:0 8px 60px rgba(0,0,0,0.5);
    font-family:var(--ff-main,'Scheherazade New',serif);direction:rtl;
    margin:auto;
  }
  .navpage-box h2{color:var(--gold,#b8860b);font-size:1.5rem;margin-bottom:1.2rem;padding-bottom:.5rem;border-bottom:1px solid rgba(184,134,11,0.25);}
  .navpage-box p,.navpage-box li{font-size:1.05rem;line-height:2.2;color:var(--text-main,#1a1a2e);}
  .navpage-close{
    position:absolute;top:.8rem;left:1rem;background:none;border:none;
    font-size:1.4rem;cursor:pointer;color:var(--text-dim,#5a5a7a);
    line-height:1;padding:.3rem;transition:color .2s;
  }
  .navpage-close:hover{color:var(--gold,#b8860b)}

  /* Sitemap clickable items */
  .sitemap-item{
    padding:.55rem .7rem;
    border-bottom:1px solid rgba(184,134,11,0.15);
    cursor:pointer;
    border-radius:8px;
    transition:background .18s, color .18s, padding-right .18s;
    font-size:1.05rem;
    display:flex;align-items:center;gap:.4rem;
  }
  .sitemap-item:last-child{border-bottom:none}
  .sitemap-item:hover{
    background:rgba(184,134,11,0.1);
    color:var(--gold,#b8860b);
    padding-right:1.1rem;
  }
  .sitemap-item::before{
    content:'←';font-size:.8rem;opacity:0;
    transition:opacity .18s;flex-shrink:0;
  }
  .sitemap-item:hover::before{opacity:1}

  /* Responsive adjustments */
  @media(max-width:600px){
    .poem-line{font-size:1.3rem !important;}
    .nav-extra-btn{font-size:.7rem;padding:.3rem .6rem;}
    #verse-modal-box .vm-verse{font-size:1.5rem;}
    #verse-modal-box .vm-explanation{font-size:1.3rem;}
    .navpage-box{padding:1.5rem 1rem;}
    #cv-modal-box{padding:1.5rem 1rem;}
    .slides-iframe-wrap{aspect-ratio:4/3;}
  }

  /* ══ SLIDES FULLSCREEN ══════════════════════════════════ */
  #slides-fs-overlay{display:none;position:fixed;inset:0;z-index:9200;background:#000;flex-direction:column;}
  #slides-fs-overlay.open{display:flex;}
  #slides-fs-bar{display:flex;align-items:center;gap:.8rem;padding:.5rem 1rem;background:rgba(0,0,0,.92);border-bottom:1px solid rgba(212,175,55,.2);flex-shrink:0;}
  #slides-fs-title{color:var(--gold,#d4af37);font-family:'Amiri',serif;font-size:1rem;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  #slides-fs-close{background:rgba(220,80,80,.15);border:1px solid rgba(220,80,80,.3);color:#e05a5a;border-radius:8px;padding:.32rem .9rem;cursor:pointer;font-size:.85rem;font-family:'Amiri',serif;}
  #slides-fs-close:hover{background:rgba(220,80,80,.3);}
  #slides-fs-frame{flex:1;width:100%;border:none;display:none;min-height:0;}
  .slides-nav-btn{background:rgba(255,255,255,.15);color:#fff;border:none;border-radius:6px;width:2rem;height:2rem;font-size:1.3rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;}
  .slides-nav-btn:hover{background:rgba(255,255,255,.3);}
  #slides-fs-nav{display:none;}
  #slides-fs-nav.show{display:flex!important;}
  .slides-open-btn{display:inline-flex;align-items:center;gap:.4rem;background:rgba(184,134,11,.1);border:1px solid rgba(184,134,11,.28);color:var(--gold);border-radius:10px;padding:.42rem 1.1rem;font-family:'Amiri',serif;font-size:.9rem;cursor:pointer;transition:all .2s;margin-top:.7rem;}
  .slides-open-btn:hover{background:rgba(184,134,11,.22);}
  /* ══ UPLOAD UI ════════════════════════════════════════════ */
  .up-box{margin-top:.8rem;padding:.85rem 1rem;background:rgba(184,134,11,.04);border:1px solid rgba(184,134,11,.14);border-radius:12px;}
  .up-drop{border:2px dashed rgba(184,134,11,.32);border-radius:10px;padding:1rem;text-align:center;cursor:pointer;transition:all .2s;}
  .up-drop:hover,.up-drop.drag-over{border-color:var(--gold,#d4af37);background:rgba(184,134,11,.08);}
  .up-icon{font-size:1.5rem;margin-bottom:.2rem;}
  .up-hint{font-size:.79rem;color:var(--text-dim);margin-bottom:.32rem;}
  .up-btn{display:inline-block;background:rgba(184,134,11,.12);color:var(--gold,#d4af37);border:1px solid rgba(184,134,11,.28);border-radius:8px;padding:.26rem .8rem;font-size:.79rem;cursor:pointer;font-family:'Amiri',serif;}
  .up-btn:hover{background:rgba(184,134,11,.22);}
  .up-pill{display:none;align-items:center;gap:.45rem;background:rgba(184,134,11,.07);border:1px solid rgba(184,134,11,.18);border-radius:8px;padding:.35rem .7rem;margin-top:.4rem;}
  .up-pill.show{display:flex;}
  .up-pname{color:var(--gold,#d4af37);font-weight:bold;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8rem;}
  .up-psize{color:var(--text-dim);font-size:.73rem;flex-shrink:0;}
  .up-pdel{background:none;border:none;color:#e05a5a;cursor:pointer;font-size:.82rem;}
  .up-prog{display:none;margin-top:.4rem;}
  .up-prog.show{display:block;}
  .up-prog-bg{background:rgba(255,255,255,.08);border-radius:10px;height:5px;overflow:hidden;}
  .up-prog-fill{height:100%;background:var(--gold,#d4af37);width:0%;transition:width .3s;border-radius:10px;}
  .up-prog-lbl{font-size:.72rem;color:var(--text-dim);margin-top:.26rem;text-align:center;}
  .up-cur{display:none;align-items:center;gap:.4rem;padding:.35rem .7rem;margin-bottom:.4rem;background:rgba(184,134,11,.06);border:1px solid rgba(184,134,11,.16);border-radius:8px;font-size:.79rem;}
  .up-cur.show{display:flex;}
  .up-cur span{color:var(--gold,#d4af37);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .up-cur button{background:none;border:none;color:#e05a5a;cursor:pointer;font-size:.79rem;}

  /* ══ SLIDES HELP BOX ════════════════════════════════ */
  .up-box-title{font-size:.8rem;color:var(--gold,#d4af37);font-weight:bold;margin-bottom:.5rem;}
  .slides-help-box{margin-top:.5rem;padding:.65rem .8rem;background:rgba(184,134,11,.05);border:1px solid rgba(184,134,11,.18);border-radius:10px;}
  .slides-help-title{font-size:.75rem;color:var(--gold,#d4af37);font-weight:bold;margin-bottom:.4rem;}
  .slides-help-row{display:flex;align-items:baseline;gap:.45rem;font-size:.73rem;color:var(--text-dim);margin-bottom:.28rem;flex-wrap:wrap;}
  .slides-help-row:last-child{margin-bottom:0;}
  .slides-help-badge{display:inline-block;padding:.1rem .45rem;border-radius:5px;font-size:.68rem;font-weight:bold;flex-shrink:0;}
  .slides-help-badge.onedrive{background:rgba(0,120,212,.15);color:#0078d4;border:1px solid rgba(0,120,212,.3);}
  .slides-help-badge.gdrive{background:rgba(66,133,244,.15);color:#4285f4;border:1px solid rgba(66,133,244,.3);}
  .slides-help-badge.pdf{background:rgba(220,50,50,.12);color:#e05050;border:1px solid rgba(220,50,50,.25);}
  .slides-help-box code{color:var(--gold,#d4af37);font-size:.7rem;}
  /* ── Float Controls ── */
  #float-ctrl{
    position:fixed;bottom:5.5rem;left:1.5rem;
    z-index:600;display:flex;flex-direction:column;
    align-items:center;gap:.4rem;
  }
  #flt-main{
    position:absolute;bottom:110%;left:0;
    background:rgba(15,12,35,0.97);
    border:1px solid rgba(212,175,55,0.3);
    border-radius:14px;
    backdrop-filter:blur(14px);
    z-index:700;
    min-width:160px;
  }
  .flt-btn{
    width:42px;height:42px;border-radius:50%;
    background:rgba(212,175,55,0.12);
    border:1px solid var(--border-gold);
    color:var(--gold);font-size:.9rem;
    cursor:pointer;transition:all .2s;
    display:flex;align-items:center;justify-content:center;
    backdrop-filter:blur(10px);
  }
  .flt-btn:hover{background:rgba(212,175,55,0.28);transform:scale(1.08)}
  .flt-sz{font-size:.78rem;font-weight:bold;font-family:'Amiri',serif}
  .flt-panel{
    position:absolute;left:50px;bottom:0;
    background:rgba(12,12,28,0.95);
    border:1px solid var(--border-gold);border-radius:12px;
    padding:.5rem;display:flex;flex-direction:column;gap:.3rem;
    backdrop-filter:blur(16px);
    box-shadow:0 6px 24px rgba(0,0,0,0.4);
  }
  .flt-dot{
    width:26px;height:26px;border-radius:50%;
    cursor:pointer;padding:0;transition:transform .2s;
  }
  .flt-dot:hover{transform:scale(1.15)}
  .flt-dot.active{outline:3px solid var(--gold);outline-offset:2px}

  .flt-opt{display:block;width:100%;background:transparent;border:none;color:var(--gold);font-size:.88rem;cursor:pointer;padding:.28rem .5rem;border-radius:8px;text-align:right;white-space:nowrap;transition:background .15s;}
  .flt-opt:hover{background:rgba(212,175,55,0.15)}
  .flt-opt.active{background:rgba(212,175,55,0.28);font-weight:bold}
</style>