/* =================================================================
   tracing.css — the tracing workspace (left pane: HTML Arabic, right
   pane: canvas guide + user ink). Refactored from the original app's
   styles.css to share the base palette and the new brand colors.
   ================================================================= */

.workspace{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 26px 24px 8px;
  padding-top: calc(26px + var(--safe-top));
  max-width: 1500px; margin: 0 auto;
  align-items: start;
}
@media (max-width: 980px){
  .workspace{ grid-template-columns: 1fr; padding: 18px 16px 4px; gap: 20px; }
}

.pane-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:10px; padding: 0 4px;
}
.pane-head h2{
  font-size:16px; color: var(--green);
  font-family: 'Work Sans', sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.2px;
}
.pane-meta{ font-size:12px; color: var(--blue); font-weight:600; letter-spacing:.3px; }

.mushaf-frame{
  position:relative;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-height: 480px;
  padding: 34px 40px;
}
.mushaf-frame::before{
  content:""; position:absolute; inset:10px;
  border: 1px solid var(--green); border-radius: 8px; opacity:.4; pointer-events:none;
}

.page-number-badge{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  width:30px; height:30px; border-radius:50%;
  border: 1.5px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-family:'Cormorant Garamond', serif; font-weight:700; font-size:13px;
  color: var(--green);
  background: var(--paper);
}

/* Audio bar */
.audio-bar{
  display:flex; align-items:center; gap:10px;
  margin: 0 4px 10px; flex-wrap: wrap;
}
.audio-status{ font-size:12.5px; color: var(--ink-soft); font-weight:500; }

/* Nav controls in header */
.nav-controls{ display:flex; align-items:flex-end; gap: 12px; flex-wrap:wrap; }

.field{ display:flex; flex-direction:column; gap:4px; font-size:10.5px; text-transform:uppercase; letter-spacing:1.4px; color: var(--ink-soft); font-weight:600; }
.field select, .field input{
  font-family:'Work Sans', sans-serif; font-size:14px; font-weight:500; color: var(--ink);
  background: var(--surface); border:1px solid var(--paper-line); border-radius:8px;
  padding: 8px 10px; min-width: 180px;
  /* Inputs must remain user-selectable (security.js allows context menu + selection in form fields). */
  -webkit-user-select: text; user-select: text;
}
.field select:focus, .field input:focus{
  border-color: var(--green); outline: 2px solid var(--green-soft); outline-offset: 1px;
}
.field-block{ min-width: 0; }
.field-block select{ width:100%; min-width: 0; }
.field-page{ min-width:auto; flex-direction:row; align-items:center; gap:8px; }
.field-page span{ text-transform:none; letter-spacing:0; }
.field-page input{ width:60px; min-width:60px; text-align:center; padding:8px 6px; }
.field-page .of{ font-size:13px; color: var(--ink-soft); }

.page-stepper{ display:flex; align-items:center; gap:6px; }
.icon-btn{
  width:40px; height:40px;   /* under 44 — but paired with input field so total touch target is sufficient */
  border-radius:50%; border:1px solid var(--paper-line);
  background:var(--surface); color: var(--green);
  font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex: 0 0 auto;
  transition: background .15s, transform .1s, border-color .15s;
}
.icon-btn:hover{ background: var(--paper-dark); border-color: var(--green); }
.icon-btn:active{ transform: scale(0.92); }

.header-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.header-icon-btn{ color: var(--ink-soft); }
.header-icon-btn:hover{ color: var(--green); }

.progress-wrap{ display:flex; align-items:center; gap:9px; }
.progress-track{
  width:130px; height:7px; border-radius:5px;
  background: var(--paper-line); overflow:hidden;
}
.progress-fill{
  height:100%; width:0%;
  background: linear-gradient(90deg, var(--green), var(--green-soft));
  border-radius: 5px;
  transition: width .25s ease;
}
#progressLabel{ font-size:11.5px; color: var(--ink-soft); white-space:nowrap; font-weight:500; }

/* Settings drawer (the gear icon — separate from the hamburger nav) */
.settings-overlay{
  position: fixed; inset:0; background: var(--overlay); z-index: 60;
  opacity:0; transition: opacity .2s ease; pointer-events: none;
}
.settings-overlay.open{ opacity:1; pointer-events: auto; }
.settings-drawer{
  position: fixed; top:0; right:0; bottom:0; width: min(380px, 92vw); z-index: 70;
  background: var(--paper); border-left: 1px solid var(--paper-line);
  box-shadow: -14px 0 40px rgba(0,0,0,0.25);
  padding: 22px 24px calc(30px + var(--safe-bot));
  overflow-y:auto;
  transform: translateX(100%); transition: transform .25s ease;
}
.settings-drawer.open{ transform: translateX(0); }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 18px; }
.drawer-head h2{ font-size: 22px; color: var(--green); }
.drawer-section{ padding: 16px 0; border-bottom: 1px solid var(--paper-line); }
.drawer-section:last-child{ border-bottom:none; }
.drawer-section h3{
  font-family:'Work Sans', sans-serif; font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--blue); font-weight:700; margin-bottom: 10px;
}
.drawer-hint{ font-size: 12.5px; line-height:1.6; color: var(--ink-soft); margin: 8px 0 0; }
.drawer-full-btn{ width:100%; text-align:center; }
.drawer-credits p{ font-size:12px; line-height:1.6; color: var(--ink-soft); margin: 0 0 8px; }
.drawer-credits p:last-child{ margin-bottom:0; }

/* Clickable ayah runs */
.ayah-run{ cursor:pointer; border-radius:5px; padding: 1px 2px; transition: background .15s; }
.ayah-run:hover{ background: rgba(15,82,87,0.14); }
.ayah-run.playing{ background: rgba(15,82,87,0.28); }

#translationToggle.active{ background: var(--green); color:#fff; border-color: var(--green); }

.translation-panel{
  margin-top: 14px; padding: 18px 22px; border-radius: var(--radius);
  background: var(--paper); border: 1px solid var(--paper-line); box-shadow: var(--shadow);
}
.translation-row{ display:flex; gap:12px; padding: 8px 0; border-bottom: 1px dashed var(--paper-line); }
.translation-row:last-child{ border-bottom:none; }
.t-num{
  flex: 0 0 auto; font-family:'Work Sans', sans-serif; font-size:11.5px; font-weight:700;
  color: var(--green);
  background: var(--paper-dark); border-radius:5px; padding: 2px 7px; height: fit-content;
}
.t-text{ font-size:14px; line-height:1.6; color: var(--ink-soft); }

/* Original text */
.mushaf-text{
  font-family: 'Amiri Quran', 'Scheherazade New', 'Traditional Arabic', serif;
  font-size: 27px; line-height: 2.35; text-align: justify; color: var(--ink);
  direction: rtl;
}
.mushaf-text p.flow{ margin: 0; }
.mushaf-text .sura-header{
  display:flex; align-items:center; gap:12px; justify-content:center;
  margin: 6px 0 18px; padding: 8px 0;
  border-top: 1px solid var(--green); border-bottom: 1px solid var(--green);
}
.mushaf-text .sura-header .sura-name{
  font-family:'Amiri', serif; font-size:22px; color: var(--green); font-weight:700;
}
.mushaf-text .sura-header .sura-name-en{
  font-family:'Work Sans', sans-serif; font-size:11.5px; letter-spacing:1.5px;
  text-transform:uppercase; color: var(--blue); direction:ltr;
}
.mushaf-text .bismillah{
  display:block; text-align:center; font-size:24px; margin: 4px 0 14px; color: var(--green);
}
.mushaf-text .aya-num{
  font-family:'Work Sans', sans-serif; font-size:12px; color: var(--gold-bright);
  border:1px solid var(--gold); border-radius:50%; width:22px; height:22px;
  display:inline-flex; align-items:center; justify-content:center;
  vertical-align: middle; margin: 0 4px;
}

/* Canvas */
.canvas-stack{ position:relative; width:100%; height: 492px; border-radius:6px; overflow:hidden; background: var(--canvas-bg); touch-action:none; }
.canvas-stack canvas{ position:absolute; top:0; left:0; width:100%; height:100%; }
#inkCanvas{ cursor: crosshair; touch-action: none; }

/* Type Mode — contenteditable overlay for keyboard tracing.
   When Type Mode is OFF, this layer is hidden (display:none set inline
   by keyboard-mode.js). When ON, it sits above the ink canvas so the
   faint guide shows through and the user can type Arabic letters that
   visually overlay the guide. */
.type-layer{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  direction:rtl;
  text-align:right;
  font-family:'Amiri Quran','Amiri','Noto Naskh Arabic',serif;
  font-size:27px;
  line-height:1.85;
  color: rgba(15, 82, 87, 0.78); /* var(--green) at ~78% alpha — readable but lets the guide show through */
  padding: 44px 30px 30px;
  outline: none;
  overflow-y:auto;
  background: transparent;
  border: 2px dashed transparent;
  z-index: 3; /* above inkCanvas (z-index auto) and guideCanvas */
  caret-color: var(--green);
  word-wrap: break-word;
  white-space: pre-wrap;
}
.canvas-stack.type-mode-active{
  /* Subtle highlight when Type Mode is on so the user knows it's active */
  outline: 2px dashed var(--green-mid);
  outline-offset: -2px;
}
.type-layer:focus{
  background: rgba(15, 82, 87, 0.03);
}
.type-layer:empty::before{
  /* Placeholder hint when the layer is empty */
  content: "اكتب هنا — Type Arabic here using your installed Arabic keyboard…";
  color: var(--ink-faint, #a8a294);
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  direction: ltr;
  text-align: left;
}
#typeModeBtn.active{
  background: var(--green);
  color:#fff;
  border-color: var(--green);
}

.toolbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  margin-top: 14px; padding: 0 4px;
}
.tool-group{ display:flex; gap:8px; flex-wrap: wrap; }
.pen-btn, .tool-btn{
  font-family:'Work Sans', sans-serif; font-weight:600; font-size:13px; letter-spacing:.3px;
  border-radius: 8px; border: 1px solid var(--paper-line); background:var(--surface); color: var(--ink-soft);
  padding: 10px 15px; cursor:pointer; min-height: 44px;
  transition: all .15s;
}
.pen-btn.active{ background: var(--green); color: #fff; border-color: var(--green); }
.tool-btn:hover, .pen-btn:hover{ border-color: var(--green); }
.tool-btn-accent{ background: var(--green); color:#fff; border-color: var(--green); }
.tool-btn-accent:hover{ background: #0a3e42; }
.tool-btn-accent.done{ background: var(--green-mid); border-color: var(--green-mid); }

.translation-selector{
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px;
}
.translation-selector .tr-chip{
  padding: 6px 10px; font-size: 12px; font-weight: 600;
  border-radius: 6px; border: 1px solid var(--paper-line);
  background: var(--surface); color: var(--ink-soft);
  cursor: pointer; min-height: 36px;
}
.translation-selector .tr-chip.active{
  background: var(--green); color: #fff; border-color: var(--green);
}

.app-footer-tracing{
  max-width: 1500px; margin: 18px auto 0;
  padding: 0 24px calc(40px + var(--safe-bot));
  font-size: 12px; color: var(--ink-soft); text-align:center; opacity:.75;
}
@media (max-width: 980px){ .app-footer-tracing{ padding: 0 18px calc(40px + var(--safe-bot)); } }

@media (max-width: 760px){
  .nav-controls{ gap: 8px; }
  .field select, .field input{ min-width: 140px; font-size: 13px; }
  .header-actions{ width:100%; justify-content:space-between; }
  .progress-track{ width: 80px; }
  .mushaf-frame{ padding: 22px 18px; }
  .mushaf-text{ font-size: 22px; line-height: 2.2; }
}

/* =================================================================
   Word-by-word audio — clickable words in the mushaf display
   ================================================================= */
.qword{
  cursor: pointer;
  border-radius: 4px;
  padding: 0 1px;
  transition: background .15s, color .15s;
  /* Subtle hover affordance so users know words are clickable */
}
.qword:hover{
  background: rgba(30, 91, 168, 0.12);
  color: var(--blue);
}
.qword:active{
  background: rgba(30, 91, 168, 0.22);
}
.qword-active{
  background: rgba(176, 141, 87, 0.32) !important;
  color: var(--maroon) !important;
  animation: qwordPulse 800ms ease-out;
}
@keyframes qwordPulse {
  0%   { background: rgba(176, 141, 87, 0.55); transform: scale(1.05); }
  100% { background: rgba(176, 141, 87, 0.0);  transform: scale(1);    }
}

/* Touch device: drop the hover affordance (no hover state on touch) */
@media (hover: none){
  .qword:hover{ background: transparent; color: inherit; }
}

/* Hint banner shown on first visit explaining tap-to-play-word feature */
.word-audio-hint{
  background: rgba(30, 91, 168, 0.06);
  border: 1px dashed var(--blue);
  color: var(--blue);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 8px;
  margin: 6px 0 10px;
  text-align: center;
}
.word-audio-hint button{
  background: none; border: none; color: var(--blue);
  font: inherit; text-decoration: underline; cursor: pointer; padding: 0 4px;
}

/* =================================================================
   Word translation balloon — pop-up when a Quran word is clicked
   ================================================================= */
.word-balloon{
  position: absolute;
  z-index: 80;
  display: none;
  width: min(340px, 92vw);
  background: var(--paper, #faf7f0);
  border: 1px solid var(--green, #0F5257);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.22);
  padding: 12px 14px 10px;
  font-family: 'Work Sans', sans-serif;
  font-size: 13px;
  color: var(--ink, #1F2A24);
  pointer-events: auto;
}
.word-balloon::before{
  content: "";
  position: absolute;
  top: -8px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 14px; height: 14px;
  background: var(--paper, #faf7f0);
  border-left: 1px solid var(--green, #0F5257);
  border-top:  1px solid var(--green, #0F5257);
}
.word-balloon .wb-head{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.word-balloon .wb-ref{
  font-size: 11px; font-weight: 700; color: var(--green, #0F5257);
  letter-spacing: .4px; text-transform: uppercase;
}
.word-balloon .wb-close{
  background: none; border: none; cursor: pointer;
  font-size: 20px; line-height: 1; padding: 0 4px;
  color: var(--ink-soft, #6b7570);
}
.word-balloon .wb-close:hover{ color: var(--green, #0F5257); }
.word-balloon .wb-word{
  font-family: 'Amiri Quran','Amiri',serif;
  font-size: 26px; text-align: center; color: var(--green, #0F5257);
  margin: 4px 0 10px;
  padding: 6px 10px;
  background: rgba(15,82,87,0.06);
  border-radius: 6px;
}
.word-balloon .wb-tr-label{
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase;
  color: var(--blue, #1E5BA8);
  margin-bottom: 4px;
}
.word-balloon .wb-translation{
  font-size: 13.5px; line-height: 1.55;
  color: var(--ink, #1F2A24);
  margin-bottom: 8px;
}
.word-balloon .wb-hint{
  font-size: 11px; color: var(--ink-soft, #6b7570);
  font-style: italic; border-top: 1px dashed var(--paper-line, #e0d9c4);
  padding-top: 6px; line-height: 1.4;
}
@media (max-width: 600px){
  .word-balloon{ width: 92vw; font-size: 12px; }
  .word-balloon .wb-word{ font-size: 22px; }
}

/* =================================================================
   On-screen Arabic keyboard simulator & shortcuts panel
   (appears below the tracing block on the Tracing page)

   Visual style: mimics a real physical bilingual keyboard.
   Each key is a "key cap" with up to 4 marks arranged like a
   real keyboard sticker:
     ┌─────────────────┐
     │ Q            @  │   ← top-left: base Latin (Q)
     │                 │      top-right: shifted Latin (@, only if ≠ base)
     │            ض  َ  │   ← bottom-right: base Arabic (ض)
     │                 │      bottom-left: shifted Arabic (َ, only if ≠ base)
     └─────────────────┘
   ================================================================= */
.keyboard-panel{
  margin: 18px auto 0;
  max-width: 1500px;
  padding: 0 24px calc(20px + var(--safe-bot));
}
.kb-card{
  background: linear-gradient(180deg, #d8d2c2 0%, #c8c0ad 100%);
  border: 1px solid #9a907a;
  border-radius: 14px;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -2px 0 rgba(0,0,0,0.10);
  padding: 18px 18px 20px;
  position: relative;
}
.kb-card::before{
  /* Brand strip on the top edge of the keyboard, like a real keyboard's name plate */
  content: "Arabic (101) · Physical Keyboard Layout";
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  background: var(--green, #0F5257);
  color: #fff;
  font-family: 'Work Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 3px 14px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.kb-head{
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px; gap: 12px; flex-wrap: wrap;
  padding-top: 4px;
}
.kb-head h3{
  font-family: 'Work Sans', sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--green, #0F5257); margin: 0;
}
.kb-head .kb-toggle{
  font-size: 12px; color: #fff;
  background: var(--green, #0F5257);
  border: 1px solid var(--green, #0F5257);
  border-radius: 6px; padding: 5px 12px; cursor: pointer;
  font-family: inherit; font-weight: 600;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.kb-head .kb-toggle:hover{ background: #0a3e42; }
.kb-hint{
  font-size: 12px; color: #4a4438;
  margin: 0 0 14px; line-height: 1.55;
  background: rgba(255,255,255,0.45);
  padding: 8px 12px;
  border-radius: 6px;
  border-left: 3px solid var(--green, #0F5257);
}

/* Keyboard layout — staggered rows like a real keyboard */
.kb-layout{
  display: flex; flex-direction: column; gap: 6px;
  overflow-x: auto; padding: 6px 4px 10px;
  background: #b8b0a0;
  border-radius: 8px;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.18),
    inset 0 -1px 0 rgba(255,255,255,0.20);
  margin-bottom: 4px;
}
.kb-row{
  display: flex; gap: 5px; justify-content: center;
  min-width: max-content;
  padding: 0 4px;
}
/* Row 2 (QWERTY) and beyond are slightly indented to mimic the
   staggered QWERTY layout of a physical keyboard. */
.kb-row:nth-child(2){ padding-left: 28px; padding-right: 4px; }
.kb-row:nth-child(3){ padding-left: 42px; padding-right: 4px; }
.kb-row:nth-child(4){ padding-left: 56px; padding-right: 4px; }
.kb-row:nth-child(5){ padding-left: 90px; padding-right: 90px; }

/* Each key — styled like a physical key cap */
.kb-key{
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  min-width: 44px;
  width: 44px;
  height: 44px;
  border-radius: 5px;
  background: linear-gradient(180deg, #fefdf8 0%, #f1ebdc 70%, #e6decb 100%);
  border: 1px solid #b4aba5;
  /* Multi-layer shadow for a 3D key-cap look */
  box-shadow:
    0 2px 0 #9a907a,           /* bottom edge — the "rim" of the key cap */
    0 3px 4px rgba(0,0,0,0.15), /* drop shadow on the keyboard base */
    inset 0 1px 0 rgba(255,255,255,0.95), /* top highlight */
    inset 0 -1px 0 rgba(0,0,0,0.05);       /* bottom inner shadow */
  font-family: 'Work Sans', sans-serif;
  user-select: none;
  cursor: pointer;
  transition: transform .06s ease-out, box-shadow .06s ease-out;
  padding: 3px 4px;
  vertical-align: top;
}

/* The 4 quadrants of each key */
.kb-key .kb-physical{
  /* Top-left: base Latin (physical QWERTY label) */
  grid-column: 1; grid-row: 1;
  font-size: 11px;
  font-weight: 700;
  color: #4a4438;
  text-align: left;
  align-self: start;
  justify-self: start;
  line-height: 1;
  font-family: 'Work Sans', sans-serif;
}
.kb-key .kb-shifted-latin{
  /* Top-right: shifted Latin (e.g. ! @ #, uppercase letters) */
  grid-column: 2; grid-row: 1;
  font-size: 10px;
  font-weight: 600;
  color: #8a7e6a;
  text-align: right;
  align-self: start;
  justify-self: end;
  line-height: 1;
  font-family: 'Work Sans', sans-serif;
}
.kb-key .kb-shifted-arabic{
  /* Bottom-left: shifted Arabic (e.g. fatha, damma, sukun) */
  grid-column: 1; grid-row: 2;
  font-family: 'Amiri','Scheherazade New',serif;
  font-size: 14px;
  color: #b08d57; /* gold accent — distinguishes shift variants */
  text-align: left;
  align-self: end;
  justify-self: start;
  line-height: 1;
}
.kb-key .kb-arabic{
  /* Bottom-right: base Arabic letter */
  grid-column: 2; grid-row: 2;
  font-family: 'Amiri','Scheherazade New',serif;
  font-size: 18px;
  color: var(--green, #0F5257);
  font-weight: 700;
  text-align: right;
  align-self: end;
  justify-self: end;
  line-height: 1;
}

/* Hover — key lifts slightly */
.kb-key:hover{
  background: linear-gradient(180deg, #fffef9 0%, #f5efde 70%, #ebe3d0 100%);
  transform: translateY(-1px);
  box-shadow:
    0 3px 0 #9a907a,
    0 5px 6px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.95);
}

/* Pressed state — key sinks into the keyboard */
.kb-key.kb-pressed,
.kb-key:active{
  transform: translateY(2px);
  background: linear-gradient(180deg, #e8e1cd 0%, #ddd5be 100%);
  box-shadow:
    0 0 0 #9a907a,
    0 1px 2px rgba(0,0,0,0.10),
    inset 0 1px 2px rgba(0,0,0,0.12);
}

/* Wide keys (Tab, Caps, Shift, Enter, Backspace) */
.kb-key.kb-wide{ min-width: 70px; width: 70px; }
.kb-key.kb-shift{ min-width: 84px; width: 84px; }
.kb-key.kb-backspace{ min-width: 80px; width: 80px; }
.kb-key.kb-enter{ min-width: 88px; width: 88px; }
.kb-key.kb-tab{ min-width: 64px; width: 64px; }
.kb-key.kb-caps{ min-width: 78px; width: 78px; }

/* Space bar */
.kb-key.kb-space{
  min-width: 320px; width: 320px;
  height: 42px;
  border-radius: 24px;
}
.kb-key .kb-special-label{
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: center;
  font-size: 12px;
  font-weight: 700;
  color: #4a4438;
  letter-spacing: .3px;
  font-family: 'Work Sans', sans-serif;
  text-align: center;
}
.kb-key.kb-space .kb-special-label{
  font-size: 11px;
  letter-spacing: 4px;
  color: #6a6052;
  text-transform: uppercase;
}

/* Highlight keys with a Shift variant (subtle gold dot in the corner) */
.kb-key.has-shift::after{
  content: "";
  position: absolute;
  top: 2px; right: 2px;
  width: 4px; height: 4px;
  background: #b08d57;
  border-radius: 50%;
  opacity: 0.6;
}

/* Keyboard shortcuts list (below the keyboard image) */
.kb-shortcuts{
  margin-top: 16px;
  padding: 14px 14px 6px;
  background: rgba(255,255,255,0.55);
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.06);
}
.kb-shortcuts-title{
  font-family: 'Work Sans', sans-serif;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--green, #0F5257);
  margin: 0 0 10px;
}
.kb-shortcuts-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
  font-size: 12px;
}
.kb-shortcut{
  display: flex; align-items: center; gap: 10px;
  padding: 7px 11px;
  background: #faf7f0;
  border-radius: 6px;
  border: 1px solid #e0d9c4;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.kb-shortcut .kb-keys-group{
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap;
}
.kb-shortcut kbd{
  font-family: 'Work Sans', monospace;
  font-size: 11px; font-weight: 600;
  background: linear-gradient(180deg, #fff 0%, #f0ead8 100%);
  border: 1px solid #b4aba5;
  border-bottom: 2px solid #9a907a;
  border-radius: 4px;
  padding: 2px 7px;
  color: var(--green, #0F5257);
  min-width: 18px;
  text-align: center;
  display: inline-block;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
}
.kb-shortcut .kb-desc{
  color: #1F2A24;
  font-size: 11.5px; line-height: 1.4;
  flex: 1;
}
.kb-collapsed .kb-layout,
.kb-collapsed .kb-shortcuts{ display: none; }

@media (max-width: 760px){
  .keyboard-panel{ padding: 0 14px calc(20px + var(--safe-bot)); }
  .kb-card{ padding: 14px 12px 16px; }
  .kb-key{ min-width: 36px; width: 36px; height: 38px; }
  .kb-key .kb-arabic{ font-size: 15px; }
  .kb-key .kb-shifted-arabic{ font-size: 12px; }
  .kb-key .kb-physical{ font-size: 10px; }
  .kb-key .kb-shifted-latin{ font-size: 9px; }
  .kb-key.kb-wide{ min-width: 54px; width: 54px; }
  .kb-key.kb-shift{ min-width: 60px; width: 60px; }
  .kb-key.kb-backspace{ min-width: 60px; width: 60px; }
  .kb-key.kb-enter{ min-width: 64px; width: 64px; }
  .kb-key.kb-tab{ min-width: 48px; width: 48px; }
  .kb-key.kb-caps{ min-width: 56px; width: 56px; }
  .kb-key.kb-space{ min-width: 180px; width: 180px; }
  /* On small screens, disable the row staggered indentation to save space */
  .kb-row:nth-child(n){ padding-left: 4px; padding-right: 4px; }
  .kb-row:nth-child(5){ padding-left: 30px; padding-right: 30px; }
}
@media (max-width: 480px){
  .kb-key{ min-width: 30px; width: 30px; height: 34px; }
  .kb-key .kb-arabic{ font-size: 13px; }
  .kb-key .kb-shifted-arabic{ font-size: 10px; }
  .kb-key .kb-physical{ font-size: 9px; }
  .kb-key .kb-shifted-latin{ font-size: 8px; }
  .kb-key.kb-wide{ min-width: 44px; width: 44px; }
  .kb-key.kb-shift{ min-width: 50px; width: 50px; }
  .kb-key.kb-backspace{ min-width: 48px; width: 48px; }
  .kb-key.kb-enter{ min-width: 52px; width: 52px; }
  .kb-key.kb-tab{ min-width: 40px; width: 40px; }
  .kb-key.kb-caps{ min-width: 46px; width: 46px; }
  .kb-key.kb-space{ min-width: 130px; width: 130px; }
}