:root{
    color-scheme: dark;
    --ink:#131b24;
    --ink-2:#1c2733;
    --parchment:#f8f0dd;
    --parchment-2:#efe4cb;
    --gold:#c9a24b;
    --gold-dim:#8f7936;
    --rose:#c1583f;
    --sage:#6f9271;
    --line: rgba(201,162,75,0.28);
  }
  *{box-sizing:border-box;}
  button{
    -webkit-appearance:none;
    appearance:none;
    font-family:inherit;
    -webkit-tap-highlight-color:transparent;
  }
  html,body{margin:0;padding:0;}
  body{
    min-height:100vh;
    background:
      radial-gradient(circle at 15% -10%, rgba(201,162,75,0.10), transparent 45%),
      radial-gradient(circle at 105% 110%, rgba(193,88,63,0.10), transparent 45%),
      var(--ink);
    color:var(--parchment);
    font-family:'Work Sans', sans-serif;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:28px 16px 60px;
  }

  .masthead{
    text-align:center;
    margin-bottom:22px;
    max-width:640px;
  }
  .masthead .eyebrow{
    font-family:'Work Sans',sans-serif;
    font-size:11px;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--gold);
    opacity:.85;
    margin-bottom:8px;
  }
  .masthead h1{
    font-family:'Markazi Text','Cairo',serif;
    direction:rtl;
    font-size:40px;
    font-weight:700;
    margin:0 0 6px;
    color:var(--parchment);
  }
  .masthead p{
    font-family:'Cairo',sans-serif;
    direction:rtl;
    font-size:14px;
    color:rgba(248,240,221,0.55);
    margin:0;
  }

  .tabs{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:center;
    max-width:720px;
    margin-bottom:26px;
    direction:rtl;
  }
  .tab{
    font-family:'Cairo',sans-serif;
    font-size:13px;
    padding:7px 16px;
    border-radius:2px 2px 8px 8px;
    background:var(--ink-2);
    border:1px solid var(--line);
    color:rgba(248,240,221,0.72);
    cursor:pointer;
    transition:all .18s ease;
    position:relative;
  }
  .tab::before{
    content:'';
    position:absolute;
    top:-6px; right:10px;
    width:2px; height:6px;
    background:var(--gold-dim);
    opacity:0;
  }
  .tab.active{
    background:var(--gold);
    color:var(--ink);
    border-color:var(--gold);
    font-weight:600;
  }
  .tab.active::before{opacity:1;}
  .tab:hover:not(.active){border-color:var(--gold);color:var(--parchment);}

  .top-row{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:14px;
    max-width:720px;
    margin-bottom:26px;
  }
  .top-row .tabs{margin-bottom:0;}
  .menu-btn{
    font-family:'Cairo',sans-serif;
    font-size:13px;
    padding:8px 16px;
    border-radius:4px;
    background:transparent;
    border:1px dashed var(--gold-dim);
    color:var(--gold);
    cursor:pointer;
    white-space:nowrap;
    transition:all .18s ease;
  }
  .menu-btn:hover{background:rgba(201,162,75,0.1);border-style:solid;}

  .drawer-overlay{
    position:fixed;
    inset:0;
    background:rgba(10,14,18,0.6);
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease;
    z-index:40;
  }
  .drawer-overlay.show{opacity:1;pointer-events:auto;}

  .drawer{
    position:fixed;
    top:0;
    right:-320px;
    width:296px;
    max-width:82vw;
    height:100%;
    background:var(--ink-2);
    border-left:1px solid var(--line);
    box-shadow:-16px 0 40px -12px rgba(0,0,0,0.5);
    z-index:50;
    overflow-y:auto;
    padding:22px 18px 40px;
    direction:rtl;
    transition:right .32s cubic-bezier(.4,.2,.2,1);
  }
  .drawer.open{right:0;}
  .drawer-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px;
    padding-bottom:14px;
    border-bottom:1px solid var(--line);
  }
  .drawer-title{
    font-family:'Cairo',sans-serif;
    font-size:15px;
    font-weight:700;
    color:var(--gold);
  }
  .drawer-close{
    background:none;
    border:none;
    color:rgba(248,240,221,0.6);
    font-size:16px;
    cursor:pointer;
    padding:4px 8px;
  }
  .drawer-close:hover{color:var(--parchment);}
  .drawer-group{margin-bottom:20px;}
  .drawer-group-title{
    font-family:'Work Sans',sans-serif;
    font-size:10px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:rgba(248,240,221,0.4);
    margin-bottom:8px;
    padding-right:2px;
  }
  .drawer-item{
    display:block;
    width:100%;
    text-align:right;
    background:none;
    border:none;
    color:rgba(248,240,221,0.78);
    font-family:'Cairo',sans-serif;
    font-size:14px;
    padding:10px 12px;
    border-radius:4px;
    cursor:pointer;
    margin-bottom:2px;
    transition:all .15s ease;
  }
  .drawer-item:hover{background:rgba(201,162,75,0.08);color:var(--parchment);}
  .drawer-item.active{background:var(--gold);color:var(--ink);font-weight:600;}

  .stage{
    width:100%;
    max-width:480px;
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  .progress-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    margin-bottom:14px;
    font-family:'Cairo',sans-serif;
    font-size:12px;
    color:rgba(248,240,221,0.55);
    direction:rtl;
  }
  .progress-track{
    flex:1;
    height:3px;
    background:var(--ink-2);
    margin:0 12px;
    border-radius:2px;
    overflow:hidden;
  }
  .progress-fill{
    height:100%;
    background:var(--gold);
    width:0%;
    transition:width .25s ease;
  }

  .card-wrap{
    width:100%;
    aspect-ratio: 4 / 2.6;
    cursor:pointer;
    margin-bottom:22px;
  }
  .card{
    position:relative;
    width:100%;
    height:100%;
    transform:scaleX(1);
    transition:transform .16s ease-in;
  }
  .card.squish{
    transform:scaleX(0.03);
    transition:transform .16s ease-out;
  }
  .face{
    position:absolute;
    inset:0;
    border-radius:6px;
    background:var(--parchment);
    box-shadow: 0 18px 40px -12px rgba(0,0,0,0.55), 0 0 0 1px rgba(201,162,75,0.25);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:28px 26px;
    color:var(--ink);
    opacity:0;
    transform:scale(0.97);
    transition:opacity .22s ease, transform .22s ease;
    pointer-events:none;
  }
  .face.active{
    opacity:1;
    transform:scale(1);
    pointer-events:auto;
  }
  .face::after{
    content:'';
    position:absolute;
    top:12px; bottom:12px; right:14px;
    width:1px;
    background:repeating-linear-gradient(to bottom, rgba(193,88,63,0.35) 0 4px, transparent 4px 9px);
  }
  .face .tag{
    position:absolute;
    top:14px; left:16px;
    font-family:'Work Sans',sans-serif;
    font-size:10px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--rose);
    font-weight:600;
  }
  .face .corner{
    position:absolute;
    bottom:0; left:0;
    width:34px; height:34px;
    background:linear-gradient(135deg, transparent 50%, var(--parchment-2) 50%);
    border-top:1px solid rgba(193,88,63,0.25);
    border-right:1px solid rgba(193,88,63,0.25);
  }
  .front .term-en{
    font-family:'Markazi Text',serif;
    font-size:32px;
    font-weight:700;
    line-height:1.4;
    color:var(--ink);
  }
  .front .hint{
    font-family:'Work Sans',sans-serif;
    font-style:italic;
    font-size:13px;
    color:#7a6b4d;
    margin-top:10px;
    max-width:340px;
  }
  .back{
    background:var(--ink-2);
    color:var(--parchment);
  }
  .back::after{display:none;}
  .back .corner{
    background:linear-gradient(135deg, transparent 50%, var(--ink) 50%);
    border-color:rgba(201,162,75,0.25);
  }
  .back .term-ar{
    font-family:'Cairo',sans-serif;
    direction:rtl;
    font-size:29px;
    font-weight:700;
    color:var(--gold);
    line-height:1.5;
  }
  .back .note{
    font-family:'Work Sans',sans-serif;
    font-size:13px;
    color:rgba(248,240,221,0.6);
    margin-top:10px;
    max-width:340px;
    line-height:1.5;
    direction:rtl;
  }
  .flip-hint{
    position:absolute;
    bottom:14px;
    font-size:10px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(0,0,0,0.28);
  }
  .back .flip-hint{color:rgba(248,240,221,0.28);}

  .controls{
    display:flex;
    align-items:center;
    gap:14px;
  }
  .ctrl-btn{
    font-family:'Cairo',sans-serif;
    font-size:14px;
    background:transparent;
    border:1px solid var(--line);
    color:var(--parchment);
    padding:10px 18px;
    border-radius:4px;
    cursor:pointer;
    transition:all .15s ease;
  }
  .ctrl-btn:hover{border-color:var(--gold);color:var(--gold);}
  .ctrl-btn.primary{
    background:var(--gold);
    border-color:var(--gold);
    color:var(--ink);
    font-weight:600;
  }
  .ctrl-btn.primary:hover{background:#dbb763;}
  .ctrl-btn.icon{padding:10px 14px;font-size:16px;}

  .bottom-row{
    display:flex;
    gap:10px;
    margin-top:18px;
    direction:rtl;
  }
  .util-btn{
    font-family:'Cairo',sans-serif;
    font-size:12px;
    background:none;
    border:none;
    color:rgba(248,240,221,0.45);
    cursor:pointer;
    text-decoration:underline;
    text-underline-offset:3px;
  }
  .util-btn:hover{color:var(--gold);}
  .util-btn.on{color:var(--gold);}

  .list-view{
    display:none;
    width:100%;
    max-width:640px;
    margin-top:6px;
    background:var(--ink-2);
    border:1px solid var(--line);
    border-radius:6px;
    overflow:hidden;
  }
  .list-view.show{display:block;}
  .list-scroll{
    max-height:56vh;
    overflow-y:auto;
  }
  .list-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:12px 18px;
    border-bottom:1px solid rgba(201,162,75,0.12);
  }
  .list-row:last-child{border-bottom:none;}
  .list-row:hover{background:rgba(201,162,75,0.06);}
  .list-row .row-en{
    font-family:'Markazi Text',serif;
    font-size:18px;
    font-weight:600;
    color:var(--parchment);
    flex:1;
    text-align:left;
  }
  .list-row .row-ar{
    font-family:'Cairo',sans-serif;
    direction:rtl;
    font-size:16px;
    color:var(--gold);
    flex:1;
    text-align:right;
  }
  .list-row .row-note{
    display:none;
  }
  .list-header{
    display:flex;
    justify-content:space-between;
    padding:12px 18px;
    font-family:'Work Sans',sans-serif;
    font-size:11px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:rgba(248,240,221,0.4);
    border-bottom:1px solid var(--line);
  }

  @media (prefers-reduced-motion: reduce){
    .card{transition:none;}
  }
  @media (max-width:480px){
    .masthead h1{font-size:32px;}
    .front .term-ar{font-size:23px;}
    .back .term-en{font-size:26px;}
  }

  .credit{
    font-family:'Work Sans',sans-serif;
    font-size:11px;
    letter-spacing:.04em;
    color:rgba(248,240,221,0.32);
    margin-top:8px;
    text-align:center;
  }