:root{
  --lav:#E2A9F0; --lav-frame:#DCA1EA; --lav-lip:#CF94DD; --ink:#2b1d33; --purple:#5E2A7E; --accent:#B45FD0;
  --gap:1.1vmin;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#FBF6FD;color:var(--ink);font-family:Nunito,system-ui,sans-serif;overscroll-behavior:none}
body{user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;cursor:pointer}
#app{height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}

/* sentence bar (Level 2) */
#bar{display:flex;align-items:center;gap:1.2vmin;padding:1vmin 1.6vmin;background:#F4E8F8;border-bottom:3px solid #EAD3F2}
#bar[hidden]{display:none}
#barItems{flex:1;height:15vmin;min-height:70px;background:#fff;border:3px solid var(--lav-frame);border-radius:18px;display:flex;align-items:center;gap:1vmin;padding:0 1vmin;overflow-x:auto}
#barItems .hint{color:#8b7896;font-weight:700;font-size:clamp(14px,2.2vmin,22px);padding:0 1vmin}
body.ur #barItems .hint{font-family:"Noto Naskh Arabic",serif}
#bar .card.mini{height:90%;width:auto;aspect-ratio:6/5;flex:0 0 auto}
#speak,#bar .tool{border:3px solid var(--lav-frame);border-radius:18px;background:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
#speak{width:15vmin;height:15vmin;min-width:70px;min-height:70px;background:#3FA35B;border-color:#2F8A49}
#bar .tool{width:11vmin;height:11vmin;min-width:54px;min-height:54px}
#bar svg,#gear svg{width:55%;height:55%;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#speak svg{stroke:#fff;fill:#fff}
#speak svg path:last-child{fill:none}

/* tabs */
#top{display:flex;align-items:center;gap:1vmin;padding:1vmin 1.6vmin;background:#F4E8F8;border-bottom:2px solid #EAD3F2}
#tabs{flex:1;display:flex;gap:1vmin;overflow-x:auto;scrollbar-width:none}
#tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;border:2px solid #EAD3F2;background:#fff;border-radius:999px;padding:1vmin 2.2vmin;font-weight:800;font-size:clamp(14px,2.3vmin,22px);color:#6b5a76;white-space:nowrap}
.tab.on{background:var(--lav);border-color:transparent;color:var(--ink)}
body.ur .tab{font-family:"Noto Naskh Arabic",serif;font-weight:700}
#pager{display:flex;align-items:center;gap:.6vmin;font-weight:800;font-size:clamp(13px,2vmin,18px)}
#pager[hidden]{display:none}
#pager button{width:6vmin;height:6vmin;min-width:40px;min-height:40px;border-radius:12px;border:2px solid #EAD3F2;background:#fff;font-size:1.6em;line-height:1}
#pager button:disabled{opacity:.35}
#gear{width:7vmin;height:7vmin;min-width:44px;min-height:44px;border-radius:14px;border:2px solid #EAD3F2;background:#fff;display:flex;align-items:center;justify-content:center;position:relative}
#gear.holding{background:var(--lav);transition:background 1.5s}

/* grid of cards */
#grid{flex:1;min-height:0;display:grid;gap:var(--gap);padding:var(--gap) calc(var(--gap)*1.6)}
.card{position:relative;border:0;padding:0;background:var(--lav-frame);border-radius:9%/11%;
  box-shadow:0 0.6vmin 1.2vmin rgba(90,42,102,.22), inset 0 -0.9vmin 0 var(--lav-lip);min-width:0;min-height:0;width:100%;height:100%;
  transition:transform .12s}
.card .inner{position:absolute;left:3.2%;right:3.2%;top:3.4%;bottom:8%;background:var(--lav);border-radius:7%/9%;
  box-shadow:0 2px 5px rgba(155,90,168,.28);display:flex;flex-direction:column;overflow:hidden}
.card .pic{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;padding:5% 7% 1%}
.card .pic img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;pointer-events:none}
.card .lbl{flex:0 0 27%;display:flex;align-items:center;justify-content:center;padding:0 5% 3%;overflow:hidden}
.card .txt{color:#fff;line-height:1.02;text-align:center;font-family:Chonburi,Georgia,serif;letter-spacing:.02em;
  text-shadow:
    .06em 0 0 var(--purple), -.06em 0 0 var(--purple), 0 .06em 0 var(--purple), 0 -.06em 0 var(--purple),
    .045em .045em 0 var(--purple), -.045em .045em 0 var(--purple), .045em -.045em 0 var(--purple), -.045em -.045em 0 var(--purple)}
.card .lbl.ur .txt{font-family:"Noto Naskh Arabic",serif;font-weight:700;letter-spacing:0;line-height:1.25}
.card.pressed{transform:scale(.95)}
.card.pressed .inner{outline:4px solid #fff;outline-offset:-4px}

/* settings */
#settings{position:fixed;inset:0;background:rgba(43,29,51,.45);display:flex;align-items:center;justify-content:center;z-index:10}
#settings[hidden]{display:none}
.panel{background:#fff;border-radius:24px;width:min(860px,94vw);max-height:92vh;overflow:auto;padding:0 0 16px}
.panel header{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;background:#F4E8F8;border-bottom:2px solid #EAD3F2}
.panel h1{font-size:22px;margin:0}
#done{background:#3FA35B;color:#fff;border:0;border-radius:12px;padding:10px 22px;font-weight:800}
.row{display:flex;gap:16px;align-items:center;padding:12px 22px;border-bottom:1px solid #F0E2F5;flex-wrap:wrap}
.row .k{width:200px;font-weight:800}
.row .k small{display:block;font-weight:600;color:#6b5a76;font-size:13px}
.row .v{display:flex;gap:8px;flex-wrap:wrap}
.row .v button{border:3px solid #EAD3F2;background:#fff;border-radius:12px;padding:10px 16px;font-weight:800;min-height:48px}
.row .v button.on{background:var(--lav);border-color:var(--lav-frame)}
.row .v button.u{font-family:"Noto Naskh Arabic",serif}
button.plain{border:0;background:none;color:#7B3F8C;text-decoration:underline;font-weight:800;padding:8px}
.note{padding:4px 22px;color:#6b5a76;font-size:14px}
.note a{color:#7B3F8C;font-weight:800}
#settings,.panel{direction:ltr}
#toast{position:fixed;bottom:4vmin;left:50%;transform:translateX(-50%);background:#2b1d33;color:#fff;padding:10px 18px;border-radius:999px;font-weight:700;z-index:20}
#toast[hidden]{display:none}