:root{color-scheme:light dark;font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.5;font-weight:400;color:#e8eaed;background:#0f1115}*{box-sizing:border-box}body{margin:0;min-height:100vh}#root{min-height:100vh}.app{max-width:960px;margin:0 auto;padding:1rem 1.25rem 2.5rem}.workspace{display:flex;flex-direction:column}.panel{background:#181b21;border:1px solid #2a2f3a;border-radius:12px;padding:1rem}.panel--viewer{display:flex;flex-direction:column;gap:0;padding:.75rem}.panel--loading{color:#9aa0a6;text-align:center;padding:2rem}.preview-shell{height:min(62vh,560px);min-height:420px;border-radius:10px;overflow:hidden;background:#6b7c8f;border:1px solid #475569;position:relative}.preview-shell--empty{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#5c6b7a,#748494)}.preview-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none}.preview-overlay>*{pointer-events:auto}.viewer-controls{position:absolute;left:.75rem;right:.75rem;display:flex;gap:.75rem}.viewer-controls--top{top:.75rem;align-items:flex-start;justify-content:space-between}.viewer-controls--bottom{bottom:2.75rem;justify-content:center}.viewer-label-card{display:flex;flex-direction:column;gap:.35rem;padding:.65rem .75rem;border-radius:10px;background:#0f1115d1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.08);max-width:min(100%,22rem)}.viewer-label-lines{display:flex;flex-direction:column;gap:.35rem}.viewer-label-input{width:min(100%,calc(var(--label-chars) * 1ch + 1rem));padding:.45rem .55rem;border:1px solid rgba(255,255,255,.12);border-radius:6px;background:#00000059;color:#f8fafc;font:600 1rem/1.2 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;letter-spacing:.04em}.viewer-label-input::placeholder{color:#94a3b8;font-weight:500}.viewer-label-input:focus{outline:none;border-color:#60a5fa;box-shadow:0 0 0 2px #60a5fa40}.viewer-label-input--secondary{font-size:.9rem;font-weight:500;color:#e2e8f0}.viewer-label-meta{font-size:.68rem;color:#94a3b8;letter-spacing:.02em}.viewer-label-error{font-size:.72rem;color:#f87171;line-height:1.35}.viewer-font-control{display:flex;align-items:center;gap:.5rem;margin-top:.15rem}.viewer-font-control__label{flex:0 0 auto;font-size:.68rem;color:#94a3b8;letter-spacing:.02em}.viewer-font-control__select{flex:1 1 auto;min-width:0;padding:.25rem .35rem;border:1px solid rgba(255,255,255,.12);border-radius:6px;background:#00000059;color:#e2e8f0;font:500 .72rem/1.2 Inter,system-ui,sans-serif}.viewer-font-control__select:focus{outline:none;border-color:#60a5fa;box-shadow:0 0 0 2px #60a5fa40}.viewer-font-control__slider{flex:1 1 auto;min-width:0;accent-color:#60a5fa}.viewer-font-control__value{flex:0 0 auto;font:600 .72rem/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;color:#e2e8f0;min-width:3.5rem;text-align:right}.viewer-toolbar{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.4rem}.viewer-toolbar__btn{padding:.45rem .7rem;font-size:.78rem;border-radius:7px}.viewer-icon-strip{display:flex;gap:.35rem;padding:.45rem;border-radius:999px;background:#0f1115d1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.08);overflow-x:auto;max-width:100%;scrollbar-width:thin}.viewer-icon-btn{flex:0 0 auto;width:42px;height:42px;padding:.35rem;border-radius:999px;border:2px solid transparent;background:#ffffff0f;cursor:pointer;transition:border-color .15s,background .15s,transform .15s}.viewer-icon-btn:hover{background:#ffffff1f;transform:translateY(-1px)}.viewer-icon-btn--selected{border-color:#60a5fa;background:#2563eb40}.viewer-icon-btn .icon-preview{width:100%;height:100%}.viewer-status{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:.45rem .75rem;border-radius:8px;background:#0f1115e0;font-size:.78rem;pointer-events:none}.viewer-status__error{color:#f87171}.viewer-status__warn{color:#fbbf24}.viewer-status__ok{color:#34d399}.preview-legend{position:absolute;left:.75rem;bottom:.75rem;display:flex;gap:.75rem;padding:.35rem .55rem;border-radius:6px;background:#0f1115d9;font-size:.75rem;color:#9aa0a6;z-index:1}.legend-item{display:inline-flex;align-items:center;gap:.35rem}.legend-swatch{width:10px;height:10px;border-radius:2px;border:1px solid rgba(255,255,255,.2)}.preview-loading{position:absolute;top:.75rem;right:.75rem;padding:.25rem .55rem;border-radius:6px;background:#0f1115bf;color:#e8eaed;font-size:.75rem;z-index:3}.preview-placeholder{color:#e2e8f0;font-size:.95rem;text-align:center;padding:1rem;opacity:.85}.icon-preview{display:block;object-fit:contain;object-position:center}.saved-tags{margin-top:.75rem;padding:.75rem .25rem .25rem;border-top:1px solid #2a2f3a}.saved-tags__header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.75rem}.saved-tags__header h3{margin:0;font-size:.9rem;font-weight:600}.saved-tags__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.4rem}.saved-tags__export{padding:.45rem .75rem;font-size:.8rem}.btn-with-icon{display:inline-flex;align-items:center;gap:.35rem}.btn-icon{width:.95em;height:.95em;flex-shrink:0}.saved-tags__empty{color:#6b7280;font-size:.85rem;line-height:1.45}.saved-tags__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem;max-height:220px;overflow-y:auto}.saved-tag{display:flex;align-items:center;gap:.5rem;border:1px solid #2a2f3a;border-radius:8px;background:#0f1115}.saved-tag--active{border-color:#60a5fa;background:#1e293b}.saved-tag__load{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;padding:.6rem .75rem;border:none;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}.saved-tag__label{font-size:.85rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.saved-tag__file{font-size:.72rem;color:#6b7280;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.saved-tag__status{font-size:.7rem;color:#fbbf24;flex-shrink:0}.saved-tag__remove{padding:0 .65rem;align-self:stretch;border:none;border-left:1px solid #2a2f3a;background:transparent;color:#9aa0a6;font-size:1rem;line-height:1;cursor:pointer}.saved-tag__remove:hover{color:#e8eaed;background:#2a2f3a}button{padding:.65rem 1rem;border-radius:8px;border:none;font:inherit;cursor:pointer}button.primary{background:#2563eb;color:#fff}button.primary:disabled{opacity:.5;cursor:not-allowed}button.secondary{background:#2a2f3a;color:inherit}button.secondary:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 720px){.viewer-controls--top{flex-direction:column;align-items:stretch}.viewer-toolbar{justify-content:flex-start}.viewer-controls--bottom{bottom:2.5rem;left:.5rem;right:.5rem}.viewer-icon-strip{border-radius:12px}.preview-shell{min-height:380px}}