/* Utilox free tools: styles (uses the site's colour variables, so light and dark both work) */
.ux .ux-tool-bar{display:flex;flex-wrap:wrap;gap:8px}
.ux .ux-tool-chip{height:42px;padding:0 18px;border-radius:999px;border:.8px solid var(--field-line);background:var(--bg);color:var(--ink);font:500 15px 'DM Sans',sans-serif;cursor:pointer;transition:background-color .2s ease,color .2s ease,scale .16s var(--ease-out)}
.ux .ux-tool-chip:active{scale:.96}
.ux .ux-tool-chip.is-on{background:var(--btn);color:var(--btn-fg);border-color:var(--btn)}
.ux .ux-tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:1099px){.ux .ux-tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:699px){.ux .ux-tool-grid{grid-template-columns:minmax(0,1fr)}}
.ux .ux-tool{display:flex;flex-direction:column;gap:10px;padding:22px;border:.8px solid var(--border);border-radius:8px;background:var(--bg);color:var(--ink);text-decoration:none;transition:border-color .2s ease,background-color .2s ease,translate .25s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.ux .ux-tool:hover{border-color:var(--ink);background:var(--alt);translate:0 -2px}}
.ux .ux-tool:active{scale:.985}
.ux .ux-tool-ic{width:48px;height:48px;border-radius:10px;background:var(--alt);display:flex;align-items:center;justify-content:center}
.ux .ux-tool-t{font:600 20px 'Lexend',sans-serif;letter-spacing:-.01em}
.ux .ux-tool-d{font:400 15px/1.5 'DM Sans',sans-serif;color:var(--muted);flex:1}
.ux .ux-tool-c{font:500 12px 'DM Sans',sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--subtle)}
.ux .ux-tool-note{margin:8px 0 0;font:400 16px 'DM Sans',sans-serif;color:var(--muted)}
.ux .ux-app-priv{display:flex;align-items:center;gap:8px;margin:0;font:400 14px 'DM Sans',sans-serif;color:var(--muted)}
.ux .ux-app{min-width:0}

/* boxes and forms */
.ux .app-box{border:.8px solid var(--border);border-radius:12px;padding:24px;background:var(--bg);display:flex;flex-direction:column;gap:20px;min-width:0}
@media (max-width:699px){.ux .app-box{padding:16px}}
.ux .app-h{margin:0;font:600 22px 'Lexend',sans-serif;letter-spacing:-.01em;color:var(--ink)}
.ux .app-hint,.ux .app-note{margin:0;font:400 14px/1.5 'DM Sans',sans-serif;color:var(--muted)}
.ux .app-note{padding:14px 16px;background:var(--alt);border-radius:8px}
.ux .app-status{margin:0;min-height:1.4em;font:500 15px 'DM Sans',sans-serif;color:var(--muted)}
.ux .app-status.is-err{color:#B3261E}.ux .app-status.is-ok{color:#1E7A4C}.ux .app-status.is-busy::before{content:"";display:inline-block;width:12px;height:12px;margin-right:8px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:app-spin .7s linear infinite;vertical-align:-1px}
[data-theme="dark"] .ux .app-status.is-err,.ux[data-theme="dark"] .app-status.is-err{color:#FF8A80}.ux[data-theme="dark"] .app-status.is-ok{color:#6FD39E}
@keyframes app-spin{to{transform:rotate(360deg)}}
.ux .app-drop{position:relative;border:1.5px dashed var(--field-line);border-radius:12px;padding:34px 20px;text-align:center;background:var(--alt);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;transition:border-color .2s ease,background-color .2s ease}
.ux .app-drop:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ux .app-drop.is-over,.ux .app-drop:hover{border-color:var(--ink);background:var(--ph)}
.ux .app-drop-input{position:absolute;inset:0;opacity:0;pointer-events:none}
.ux .app-drop-t{font:600 17px 'DM Sans',sans-serif;color:var(--ink)}.ux .app-drop-s{font:400 14px 'DM Sans',sans-serif;color:var(--muted)}.ux .app-drop-ic{color:var(--ink)}
.ux .app-btn{height:48px;padding:0 22px;border-radius:8px;border:.8px solid var(--btn);background:var(--bg);color:var(--ink);font:600 15px 'DM Sans',sans-serif;cursor:pointer;transition:background-color .2s ease,color .2s ease,scale .16s var(--ease-out),opacity .2s ease}
.ux .app-btn.primary{background:var(--btn);color:var(--btn-fg)}
.ux .app-btn.ghost{border-color:var(--field-line)}
.ux .app-btn:active:not(:disabled){scale:.96}.ux .app-btn:disabled{opacity:.45;cursor:not-allowed}
@media (hover:hover) and (pointer:fine){.ux .app-btn.primary:hover:not(:disabled){background:var(--btn-hover)}.ux .app-btn:not(.primary):hover:not(:disabled){background:var(--alt)}}
.ux .app-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ux .app-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.ux .app-opts-wrap{display:flex;flex-direction:column;gap:20px}
.ux .app-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.ux .app-label{font:600 14px 'DM Sans',sans-serif;color:var(--ink)}
.ux .app-input{width:100%;min-height:46px;padding:10px 12px;border:.8px solid var(--field-line);border-radius:6px;background:var(--bg);color:var(--ink);font:400 16px 'DM Sans',sans-serif;box-sizing:border-box}
.ux textarea.app-input{resize:vertical;min-height:84px}
.ux .app-input:focus-visible,.ux .app-range:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.ux .app-range{width:100%;accent-color:var(--ink);min-height:30px}
.ux .app-inline{display:flex;align-items:center;gap:12px}.ux .app-inline .app-hint{min-width:2.5em}
.ux .app-color{width:64px;height:46px;padding:2px;border:.8px solid var(--field-line);border-radius:6px;background:var(--bg);cursor:pointer}
.ux .app-check{display:flex;align-items:center;gap:10px;font:400 15px 'DM Sans',sans-serif;color:var(--ink);cursor:pointer;min-height:36px}
.ux .app-check input{width:18px;height:18px;accent-color:var(--ink)}
.ux .app-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:4px 16px}
.ux .app-hint+.app-hint{margin-top:-8px}
.ux .app-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ux .app-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border:.8px solid var(--border);border-radius:8px;background:var(--bg)}
.ux .app-thumb{width:48px;height:48px;object-fit:cover;border-radius:6px;flex-shrink:0}
.ux .app-item-n{flex:1;min-width:0;display:flex;flex-direction:column}.ux .app-item-n strong{font:600 15px 'DM Sans',sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ux .app-item-n small{font:400 13px 'DM Sans',sans-serif;color:var(--muted)}
.ux .app-item-b{display:flex;gap:4px}
.ux .app-icon{width:36px;height:36px;border-radius:6px;border:.8px solid var(--field-line);background:var(--bg);color:var(--ink);cursor:pointer;font-size:15px}
.ux .app-icon:disabled{opacity:.35;cursor:not-allowed}
@media (hover:hover) and (pointer:fine){.ux .app-icon:hover:not(:disabled){background:var(--alt)}}
.ux .app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.ux .app-card{margin:0;border:.8px solid var(--border);border-radius:8px;overflow:hidden;background:var(--bg);display:flex;flex-direction:column}
.ux .app-card img{width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--alt);display:block}
.ux .app-card figcaption{display:flex;flex-direction:column;gap:6px;padding:10px 12px;font:400 13px 'DM Sans',sans-serif;color:var(--muted)}
.ux .app-link{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ux .app-result{padding:16px;background:var(--alt);border-radius:8px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.ux .app-result p{margin:0;font:400 16px 'DM Sans',sans-serif;color:var(--ink)}
.ux .app-tabs{display:flex;gap:6px;flex-wrap:wrap}
.ux .app-tab{height:42px;padding:0 18px;border-radius:8px;border:.8px solid var(--field-line);background:var(--bg);color:var(--ink);font:500 15px 'DM Sans',sans-serif;cursor:pointer}
.ux .app-tab[aria-selected="true"]{background:var(--btn);color:var(--btn-fg);border-color:var(--btn)}
.ux .app-ul{margin:10px 0 0;padding-left:20px;font:400 15px/1.6 'DM Sans',sans-serif;color:var(--muted)}
.ux .app-details{border:.8px solid var(--border);border-radius:8px;padding:12px 16px}.ux .app-details summary{cursor:pointer;font:600 15px 'DM Sans',sans-serif;color:var(--ink)}
.ux .app-table-wrap{overflow:auto;max-height:340px;border:.8px solid var(--border);border-radius:8px}
.ux .app-table{width:100%;border-collapse:collapse;font:400 14px 'DM Sans',sans-serif;color:var(--ink)}
.ux .app-table th{position:sticky;top:0;background:var(--alt);text-align:left;font-weight:600}
.ux .app-table th,.ux .app-table td{padding:8px 10px;border-bottom:.8px solid var(--border);white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis}
.ux .app-table.sum{margin-bottom:12px;background:var(--bg)}.ux .app-table.sum td{white-space:normal;max-width:none}.ux .app-table .r{text-align:right}.ux .app-table .g td{font-weight:700;background:var(--alt)}
.ux .bands{display:flex;flex-direction:column;gap:10px;margin:14px 0}.ux .band{display:grid;grid-template-columns:2fr 1fr;gap:12px}

/* signature editor */
.ux .sig-pad{width:100%;max-width:640px;aspect-ratio:640/220;background:#fff;border:.8px solid var(--field-line);border-radius:8px;touch-action:none;cursor:crosshair;display:block}
.ux .sig-typed{width:100%;max-width:640px;aspect-ratio:640/180;background:#fff;border:.8px solid var(--field-line);border-radius:8px;display:block;margin-top:12px}
.ux .sig-panel{display:flex;flex-direction:column;gap:12px}
.ux .sig-stage{display:flex;justify-content:center;overflow:auto;background:var(--alt);border-radius:8px;padding:12px}
.ux .sig-view{position:relative;box-shadow:0 4px 20px rgba(0,0,0,.18);touch-action:none}
.ux .sig-page{display:block;background:#fff}
.ux .sig-live,.ux .sig-placed{position:absolute}
.ux .sig-live{cursor:grab;outline:2px dashed #3b6cff;outline-offset:2px;touch-action:none}
.ux .sig-live:active{cursor:grabbing}
.ux .sig-live img,.ux .sig-placed img{width:100%;display:block;pointer-events:none;user-select:none}
.ux .sig-x{position:absolute;top:-10px;right:-10px;width:24px;height:24px;border-radius:50%;border:0;background:#111;color:#fff;cursor:pointer;font-size:12px;line-height:1}
.ux .sig-nav{display:flex;align-items:center;justify-content:center;gap:12px}

/* previews, collage, colour */
.ux .wm-preview{display:block;max-width:100%;height:auto;border:.8px solid var(--border);border-radius:8px;background:repeating-conic-gradient(#eee 0 25%,#fff 0 50%) 0 0/16px 16px;align-self:flex-start}
.ux .collage-wrap{display:flex;justify-content:center;background:var(--alt);padding:14px;border-radius:8px}
.ux .collage-canvas{cursor:pointer;background:#fff;max-height:70vh;width:auto}
.ux .pal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-radius:12px;overflow:hidden;min-height:300px}
@media (max-width:699px){.ux .pal{grid-template-columns:1fr;min-height:0}}
.ux .pal-sw{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:6px;padding:18px 14px;min-height:220px;transition:background-color .25s ease}
@media (max-width:699px){.ux .pal-sw{min-height:96px;flex-direction:row;align-items:center;flex-wrap:wrap}}
.ux .pal-hex{background:none;border:0;padding:0;font:700 20px 'Lexend',sans-serif;cursor:pointer;letter-spacing:.02em}
.ux .pal-rgb,.ux .pal-ct{font:400 12px 'DM Sans',sans-serif;opacity:.85}
.ux .pal-lock{margin-top:6px;height:34px;padding:0 14px;border-radius:999px;border:1px solid currentColor;background:transparent;font:600 13px 'DM Sans',sans-serif;cursor:pointer}
.ux .pal-lock[aria-pressed="true"]{background:rgba(255,255,255,.25)}

/* invoice and receipt */
.ux .doc-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:1099px){.ux .doc-layout{grid-template-columns:minmax(0,1fr)}}
.ux .doc-side{position:sticky;top:110px;display:flex;flex-direction:column;gap:8px}
@media (max-width:1099px){.ux .doc-side{position:static}}
.ux .doc-preview{background:#fff;color:#111;border:.8px solid var(--border);border-radius:8px;overflow:auto;max-height:80vh;box-shadow:0 4px 24px rgba(0,0,0,.08)}
.ux .doc-form{display:flex;flex-direction:column;gap:16px}
.ux .doc-item{display:grid;grid-template-columns:3fr 1fr 1.4fr auto;gap:10px;align-items:end}
@media (max-width:699px){.ux .doc-item{grid-template-columns:1fr 1fr auto}.ux .doc-item .app-field:first-child{grid-column:1/-1}}
.ux .doc-items{display:flex;flex-direction:column;gap:10px}

/* games */
.ux .game-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.ux .game-cat{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;padding:18px;border:.8px solid var(--field-line);border-radius:8px;background:var(--bg);color:var(--ink);cursor:pointer;font-family:'DM Sans',sans-serif;transition:border-color .2s ease,background-color .2s ease,scale .16s var(--ease-out)}
.ux .game-cat strong{font:600 18px 'Lexend',sans-serif}.ux .game-cat small{color:var(--muted);font-size:14px}
.ux .game-cat:active{scale:.97}
@media (hover:hover) and (pointer:fine){.ux .game-cat:hover{border-color:var(--ink);background:var(--alt)}}
.ux .game-msg{margin:0;font:600 20px 'Lexend',sans-serif;color:var(--ink)}.ux .game-msg.is-win{color:#1E7A4C}.ux .game-msg.is-lose{color:#B3261E}
.ux .hang{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:699px){.ux .hang{grid-template-columns:1fr}.ux .hang-fig-wrap{max-width:200px;margin:0 auto}}
.ux .hang-fig{width:100%;color:var(--ink)}
.ux .hang-main{display:flex;flex-direction:column;gap:16px}
.ux .hang-word{display:flex;flex-wrap:wrap;gap:6px;min-height:52px}
.ux .hang-l{width:34px;height:46px;border-bottom:3px solid var(--ink);display:flex;align-items:flex-end;justify-content:center;font:700 26px 'Lexend',sans-serif;color:var(--ink);padding-bottom:2px}
.ux .hang-gap{width:20px}
.ux .hang-kb{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:6px}
.ux .hang-k{height:46px;border-radius:6px;border:.8px solid var(--field-line);background:var(--bg);color:var(--ink);font:600 16px 'DM Sans',sans-serif;cursor:pointer;transition:scale .12s var(--ease-out),background-color .2s ease}
.ux .hang-k:active:not(:disabled){scale:.92}.ux .hang-k.is-ok{background:#CDEBD9;color:#0F4D2E;border-color:#8FCDAA}.ux .hang-k.is-bad{background:#F6D5D2;color:#7A1A12;border-color:#E3A29C;text-decoration:line-through}.ux .hang-k:disabled{cursor:not-allowed}
.ux .hang-whole{display:flex;gap:10px;align-items:center}
.ux .imp-count{font:600 22px 'Lexend',sans-serif;color:var(--ink);text-align:center}
.ux .imp-scene{width:min(340px,100%);height:200px;margin:0 auto;perspective:1000px;position:relative}
.ux .imp-card{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .7s var(--ease-out);cursor:pointer}
.ux .imp-card.flip{transform:rotateY(180deg)}
.ux .imp-face{position:absolute;inset:0;backface-visibility:hidden;border:2px solid var(--ink);border-radius:14px;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;font:700 30px 'Lexend',sans-serif}
.ux .imp-face.front{background:var(--bg);color:var(--ink);font-size:20px;letter-spacing:.06em}
.ux .imp-face.back{background:#270100;color:#FFFFFC;transform:rotateY(180deg)}.ux .imp-face.back.is-imp{background:#B3261E}
.ux .imp-got{position:absolute;left:50%;bottom:-62px;translate:-50% 0}
.ux .cha-stage{display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 12px;background:var(--alt);border-radius:12px;text-align:center}
.ux .cha-clock{font:700 56px 'Lexend',sans-serif;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}.ux .cha-clock.is-low{color:#B3261E}
.ux .cha-name{font:700 clamp(28px,5vw,44px) 'Lexend',sans-serif;color:var(--ink);min-height:1.3em}
.ux .ttt{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;max-width:560px;margin:0 auto;width:100%}
.ux .ttt-cell,.ux .ttt-head,.ux .ttt-corner{aspect-ratio:1;border-radius:8px}
.ux .ttt-cell{border:.8px solid var(--field-line);background:var(--bg);font:700 clamp(32px,9vw,64px) 'Lexend',sans-serif;cursor:pointer;color:var(--ink);transition:background-color .2s ease,scale .12s var(--ease-out)}
.ux .ttt-cell:active:not(.is-X):not(.is-O){scale:.95}
@media (hover:hover) and (pointer:fine){.ux .ttt-cell:hover{background:var(--alt)}}
.ux .ttt-cell.is-X{color:#D13B2E}.ux .ttt-cell.is-O{color:#2D5BD6}.ux .ttt-cell.is-win{background:#FFF1B8;box-shadow:inset 0 0 0 3px #E0B400}
.ux .ttt-head{position:relative;background:var(--alt) center/cover no-repeat;display:flex;align-items:flex-end;overflow:hidden}
.ux .ttt-in{width:100%;border:0;background:rgba(255,255,255,.85);color:#111;padding:6px;font:600 13px 'DM Sans',sans-serif;text-align:center;min-width:0}
.ux .ttt-head.has-img .ttt-in{background:rgba(255,255,255,.7)}
.ux .ttt-pic{position:absolute;top:4px;right:4px;width:28px;height:28px;border-radius:6px;border:0;background:rgba(255,255,255,.85);cursor:pointer;font-size:14px}
.ux .ttt-status{margin:0;text-align:center;font:600 20px 'Lexend',sans-serif;color:var(--ink)}
.ux .game .app-hint{text-align:center}