.symbol-catalog[hidden],.symbol-dialog[hidden]{display:none!important}.symbol-catalog{padding:12px 0 36px}.symbol-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:18px}.symbol-filters label{display:grid;gap:8px;font-size:14px}.symbol-filters select{font:inherit;width:100%;min-height:46px;border:1px solid #958f8466;background:var(--surface,#fff);color:inherit;padding:8px 12px;border-radius:8px}.symbol-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.symbol-card{display:flex;flex-direction:column;gap:12px;border:1px solid #958f8455;border-radius:12px;padding:16px;text-decoration:none;color:inherit;cursor:zoom-in}.symbol-card:hover{border-color:#a58b52}.symbol-card img{display:block;width:100%;aspect-ratio:4/1;object-fit:contain;background:transparent;border-radius:6px;padding:8px}.symbol-card strong{font-size:17px}.symbol-count{font-size:14px;margin:12px 0}.symbol-more,.symbol-dialog button,.symbol-dialog a{font:inherit;border:1px solid #958f8466;border-radius:8px;padding:10px 14px;background:var(--surface,#fff);color:inherit;cursor:pointer;text-decoration:none}.symbol-more{display:block;margin:24px auto}.symbol-dialog{position:fixed;inset:0;background:#000a;z-index:1500;display:flex;align-items:center;justify-content:center;padding:18px}.symbol-panel{width:min(100%,1000px);max-height:94dvh;overflow:auto;border-radius:16px;background:var(--surface,#fff);color:var(--ink,#222);padding:20px}.symbol-toolbar,.symbol-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.symbol-toolbar h2{margin:0;font-size:22px}.symbol-toolbar button{font-size:24px}.symbol-image-stage{background:transparent;padding:20px;overflow:auto;max-height:58dvh;margin:20px 0;border-radius:8px;touch-action:pan-x pan-y pinch-zoom}.symbol-image-stage img{display:block;width:100%;max-width:none;padding:20px}.symbol-actions a{background:#23814a;color:#fff}.symbol-dialog p{font-size:13px}.symbol-navigation{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.symbol-status{min-height:20px}.symbol-list:empty{display:none}@media(max-width:600px){.symbol-filters{gap:10px;grid-template-columns:1fr}.symbol-list{grid-template-columns:1fr;gap:12px}.symbol-card{padding:12px}.symbol-panel{padding:14px}.symbol-dialog{padding:10px}.symbol-toolbar h2{font-size:19px}.symbol-actions{justify-content:start}.symbol-dialog a,.symbol-dialog button{min-height:44px}.symbol-image-stage img{padding:10px}}

/* Draw the original outlined glyphs and numbers as normal theme-colored content. */
.symbol-sample{display:block;width:100%;color:var(--ink);background-color:currentColor;-webkit-mask-image:var(--symbol-image);mask-image:var(--symbol-image);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;forced-color-adjust:auto}.symbol-sample img{opacity:0;padding:0!important}.symbol-card .symbol-sample{aspect-ratio:4/1}.symbol-image-stage .symbol-sample{max-width:none}.symbol-image-stage .symbol-sample img{height:auto}.symbol-image-stage{color:var(--ink)}
@supports not (mask-image:url('/symbols/sign-001.webp')){.symbol-sample{background:none}.symbol-sample img{opacity:1}html[data-theme="dark"] .symbol-sample img{filter:invert(1)}}

/* Square, reduced previews in the same order in every UI language. */
.symbol-filters{grid-template-columns:repeat(2,minmax(0,1fr));max-width:700px}.symbol-filters input{font:inherit;width:100%;min-height:46px;border:1px solid #958f8466;background:var(--surface,#fff);color:inherit;padding:8px 12px;border-radius:8px}.symbol-list{grid-template-columns:repeat(4,minmax(0,1fr));direction:ltr}.symbol-card{min-width:0;padding:12px}.symbol-card .symbol-sample,.symbol-card img{aspect-ratio:1/1}.symbol-card>span:last-child{font-size:13px}.symbol-panel{width:min(100%,700px)}.symbol-image-stage .symbol-sample{width:min(100%,520px);aspect-ratio:1;margin:auto}.symbol-image-stage{max-height:56dvh;padding:0}.symbol-image-stage img{aspect-ratio:1}.symbol-sample{background-color:var(--ink)}
@media(max-width:700px){.symbol-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.symbol-card{padding:8px}.symbol-card strong{font-size:14px}.symbol-filters{grid-template-columns:1fr}.symbol-panel{padding:14px}.symbol-image-stage .symbol-sample{width:min(100%,350px)}}

/* Opaque raster pairs keep glyphs readable when a mobile browser forces dark colors. */
.symbol-sample{background:none!important;mask-image:none!important;-webkit-mask-image:none!important}.symbol-sample img{opacity:1!important;filter:none!important;background:transparent;padding:0!important}

/* Every uploaded transparent symbol uses the same palette as the built-in samples. */
:root{--symbol-sample-background:#fafaf8}
html[data-theme="dark"]{--symbol-sample-background:#23292e}
.symbol-card .symbol-upload-sample{background:var(--symbol-sample-background)!important;border-radius:6px;overflow:hidden}
.symbol-dialog .design-viewer-stage{background:var(--symbol-sample-background);border-radius:6px}
.symbol-card .symbol-upload-image,.symbol-dialog .design-viewer-stage .symbol-upload-image{filter:brightness(0)!important}
html[data-theme="dark"] .symbol-card .symbol-upload-image,html[data-theme="dark"] .symbol-dialog .design-viewer-stage .symbol-upload-image{filter:brightness(0) invert(1)!important}