/* CT Unicode Engine widget — inherits theme tokens with safe fallbacks */
.ctue{
	--_ink:var(--ink,#1E2B45);
	--_soft:var(--ink-soft,#51607D);
	--_guide:var(--guide,#B9CFEA);
	--_faint:var(--guide-faint,#DFE9F6);
	--_pen:var(--pen,#2456C7);
	--_ok:var(--ok,#1F7A4D);
	--_card:var(--card,#fff);
	--_r:var(--radius-sm,6px);
	font-size:1rem;
}

/* Tabs + search bar */
.ctue-bar{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin:.4rem 0 .7rem}
.ctue-tabs{display:flex;gap:.3rem;overflow-x:auto;scrollbar-width:thin;flex:1;min-width:0;padding-bottom:.2rem}
.ctue-tab{
	flex:0 0 auto;background:transparent;border:1px solid var(--_faint);
	border-radius:999px;padding:.4rem .8rem;font:600 .85rem/1 inherit;
	color:var(--_soft);cursor:pointer;white-space:nowrap;font-family:inherit;
}
.ctue-tab:hover{border-color:var(--_pen);color:var(--_pen)}
.ctue-tab.on{background:var(--_pen);border-color:var(--_pen);color:#fff}
.ctue-search{
	flex:0 0 160px;border:1px solid var(--_guide);border-radius:var(--_r);
	padding:.5rem .7rem;font:500 .9rem/1.2 inherit;color:var(--_ink);background:var(--_card);
}
.ctue-search:focus{outline:2px solid var(--_pen);outline-offset:1px}
@media (max-width:560px){.ctue-search{flex:1 1 100%}}

/* Style rows */
.ctue-list{display:flex;flex-direction:column;gap:.45rem}
.ctue-row{
	display:grid;grid-template-columns:1fr auto auto;grid-template-areas:"name fav copy" "val val val";
	gap:.15rem .5rem;align-items:center;
	background:var(--_card);border:1px solid var(--_faint);border-radius:var(--_r);
	padding:.55rem .75rem;
}
.ctue-row:hover{border-color:var(--_guide)}
.ctue-name{grid-area:name;font-size:.76rem;font-weight:600;color:var(--_soft)}
.ctue-val{
	grid-area:val;font-size:1.18rem;line-height:1.5;color:var(--_ink);
	word-break:break-word;overflow-wrap:anywhere;user-select:all;
}
.ctue-fav{
	grid-area:fav;background:none;border:0;cursor:pointer;
	font-size:1.05rem;color:var(--_faint);padding:.2rem .3rem;line-height:1;
}
.ctue-fav:hover{color:var(--_pen)}
.ctue-fav.on{color:#E8A425}
.ctue-copy{
	grid-area:copy;background:var(--_pen);color:#fff;border:0;cursor:pointer;
	border-radius:var(--_r);padding:.45rem .85rem;font:600 .82rem/1 inherit;font-family:inherit;
	min-width:4.6rem;
}
.ctue-copy:hover{filter:brightness(.92)}
.ctue-copy.ok{background:var(--_ok)}
.ctue-empty{color:var(--_soft);font-size:.95rem;padding:.8rem .2rem}
.ctue-more-wrap{text-align:center;margin:.9rem 0 0}

/* Letter glyph grid */
.ctue-letter-grid{
	display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
	gap:.6rem;margin:.8rem 0;
}
.ctue-glyph{
	display:flex;flex-direction:column;align-items:center;gap:.35rem;
	background:var(--_card);border:1px solid var(--_faint);border-radius:8px;
	padding:.9rem .5rem .7rem;cursor:pointer;font-family:inherit;
	position:relative;
}
.ctue-glyph:hover{border-color:var(--_pen)}
.ctue-glyph .g{font-size:2.6rem;line-height:1;color:var(--_ink)}
.ctue-glyph .lbl{font-size:.72rem;font-weight:600;color:var(--_soft)}
.ctue-glyph.copied{border-color:var(--_ok)}
.ctue-glyph.copied::after{
	content:"Copied";position:absolute;top:.3rem;right:.4rem;
	font-size:.66rem;font-weight:700;color:var(--_ok);
}
.ctue-letter-actions{margin:.4rem 0 1rem}
