:root{
  --bg:#FFFFFF; --bar:#111111; --ink:#14202A; --line:rgba(20,32,42,.22); --msg:#FFFFFF; --tool:#FFFFFF; --tool-ink:#3A3F44;
  --accent:#1A7FA0; --empty:#F4F5F6; --danger:#C2410C;
  --k-p:#FBE0C0; --k-v:#F2B8EE; --k-l:#BDEFAE; --k-d:#BEDFF7; --k-a:#F7C69A; --k-n:#FFF2A8; --k-s:#F9C690; --k-q:#F7F7F4; --k-h:#BFE6DC; --k-f:#F7F7F4;
  --b-p:#E98A2F; --b-v:#C64BC0; --b-l:#4CAF3C; --b-d:#3D8FD6; --b-a:#E98A2F; --b-n:#E3C21A; --b-s:#E98A2F; --b-q:#5A6670; --b-h:#2E9C82; --b-f:#7D8A94;
  --font:"Atkinson Hyperlegible", -apple-system, "Helvetica Neue", Arial, sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);font-family:var(--font);color:var(--tool-ink);overscroll-behavior:none}
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#app{height:100%;display:flex;flex-direction:column;gap:0;padding:0}
button{font:inherit;color:inherit}
.msgbar{display:flex;gap:6px;align-items:center;padding:6px 8px;background:var(--msg);border-bottom:1px solid #E3E6E8}
.msg{flex:1;min-height:78px;background:var(--msg);color:var(--ink);border:0;border-radius:0;padding:6px 10px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;text-align:left}
.msg .hint{color:#7A8890;font-style:italic}
.chip{display:inline-flex;flex-direction:column;align-items:center;font-weight:700;font-size:15px;line-height:1.1}
.chip .pic{width:38px;height:38px}
.tool{background:var(--tool);color:var(--tool-ink);border:0;border-radius:10px;min-width:64px;font-size:26px;font-weight:400;padding:0 14px}
.msgbar .tool{background:#6E757B;color:#fff;border-radius:50%;min-width:0;width:40px;height:40px;padding:0;font-size:18px}
.tool.small{font-size:16px;min-width:auto;padding:8px 12px;border-radius:9px}
.tool.speak{background:var(--accent);color:#fff;font-size:20px;flex:1;max-width:240px}
.tool[aria-pressed="true"]{background:var(--danger);color:#fff}
.titlebar{display:flex;align-items:center;gap:10px;min-height:38px;background:var(--bar);color:#fff;padding:0 8px}
.titlebar h1{flex:1;text-align:center;font-size:19px;font-weight:600;margin:0}
.titlebar .tool.small{background:transparent;color:#fff;font-size:16px}
.badge{background:#3B4A55;color:#fff;border-radius:6px;padding:2px 8px;font-size:13px}
.board{flex:1;overflow-y:auto;background:var(--bg);padding:6px;display:grid;grid-template-columns:repeat(11,1fr);grid-auto-rows:calc((100% - 6*5px)/7);gap:5px;-webkit-overflow-scrolling:touch}
.cell{position:relative;border:2px solid var(--line);border-radius:6px;box-shadow:0 1px 2px rgba(0,0,0,.18);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:3px;overflow:hidden;color:var(--ink);background:var(--k-n);min-height:0}
.cell:active{transform:scale(.96)}
.cell .pic{flex:1;width:100%;min-height:0}
.cell .lbl{font-weight:500;font-size:clamp(10px,1.15vw,14px);line-height:1.05;text-align:center;overflow-wrap:anywhere;max-height:2.2em;overflow:hidden}
.cell.textonly .lbl{font-size:clamp(13px,1.9vw,25px);font-weight:700;max-height:none;overflow-wrap:normal;word-break:keep-all;hyphens:none}
.cell.empty{background:transparent;border:0;box-shadow:none}
.editing .cell.empty{background:var(--empty);border:2px dashed #C9CFD3}
.cell:not(.folder):not(.empty)::after{content:"";position:absolute;top:0;right:0;border-style:solid;border-width:0 13px 13px 0;border-color:transparent var(--fold,transparent) transparent transparent}
.cell.folder{border-top-left-radius:2px;margin-top:6px;border-color:#8D969C!important}
.cell.folder::before{content:"";position:absolute;top:-1px;left:-1px;width:45%;height:6px;background:var(--b-f);border-radius:0 0 4px 0}
.editing .cell.missing{outline:2px dashed #C2410C;outline-offset:-4px}
.pic{background-size:contain;background-position:center;background-repeat:no-repeat}
.pic.big{width:160px;height:160px;border:1px solid #ccc;border-radius:10px;background-color:#fff}
.editing .cell{animation:wiggle .6s ease-in-out infinite alternate}
.editing .cell.empty::before{content:"+";color:#8395A1;font-size:28px}
@keyframes wiggle{from{transform:rotate(-.6deg)}to{transform:rotate(.6deg)}}
@media (prefers-reduced-motion:reduce){.editing .cell{animation:none}}
.toolbar{display:flex;gap:8px;justify-content:space-around;min-height:54px;background:#fff;border-top:1px solid #E3E6E8}
.toolbar .tool{min-width:72px;font-size:30px}
dialog{border:0;border-radius:16px;padding:0;max-width:min(860px,96vw);width:100%;background:#fff;color:var(--ink)}
dialog::backdrop{background:rgba(0,0,0,.55)}
.sheet{padding:18px;display:flex;flex-direction:column;gap:12px}
.sheet h2{margin:0;font-size:22px}
.sheet h3{margin:0;font-size:17px}
.sheet label{display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:14px;color:#3A4A55}
.sheet label.check{flex-direction:row;align-items:center;gap:8px}
.sheet input,.sheet select{font:inherit;font-size:18px;padding:9px 10px;border:1px solid #C7D1D8;border-radius:9px;color:var(--ink);background:#F6F9FA}
.sheet button,.btn{font:inherit;font-size:16px;font-weight:700;border:1px solid #C7D1D8;border-radius:10px;padding:10px 14px;background:#F2F5F7;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.sheet .primary{background:var(--accent);border-color:var(--accent);color:#fff}
.sheet .danger{color:var(--danger);border-color:var(--danger);background:#fff}
.row{display:flex;gap:8px;align-items:center}
.spacer{flex:1}
.edgrid{display:flex;gap:16px;flex-wrap:wrap}
.preview{display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:700}
.fields{flex:1;min-width:260px;display:flex;flex-direction:column;gap:10px}
.matches{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.matches li button{display:flex;align-items:center;gap:6px;padding:6px 10px;font-size:15px}
.matches .pic{width:30px;height:30px}
.picbtns{display:flex;flex-wrap:wrap;gap:8px}
.results{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;max-height:260px;overflow-y:auto}
.results button{padding:4px;background:#fff;height:100px}
.results .pic{width:100%;height:100%}
.note{margin:0;color:#56656F;font-size:14px}
hr{border:0;border-top:1px solid #E1E7EB;width:100%}
.badge.test{background:#C2410C;color:#fff;font-weight:700}
.voices{display:flex;flex-direction:column;gap:6px}
.vgroup{display:grid;grid-template-columns:110px repeat(3,1fr);gap:6px;align-items:center}
.vtitle{font-weight:700;font-size:15px}
.sheet .vbtn{flex-direction:column;padding:6px 8px;gap:0;min-height:52px}
.vbtn b{font-size:18px}.vbtn small{font-size:12px;font-weight:400;color:#56656F}
.sheet .vbtn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.sheet .vbtn[aria-pressed="true"] small{color:#E6F3F8}