:root{--bg: #ffffff;--surface: #ffffff;--surface-2: #f4f3f1;--border: #e6e4e0;--border-strong: #d5d2cc;--text: #1a1a1a;--text-dim: #6f6c67;--accent: #b0102e;--accent-ink: #ffffff;--ink: #1a1a1a;--ink-hover: #000000;--danger: #b0102e;--radius: 12px;color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text)}.app{display:flex;flex-direction:column;height:100%}.app-bar{display:flex;align-items:center;gap:.85rem;padding:.75rem 1.5rem;border-bottom:1px solid var(--border);background:var(--surface)}.app-bar .logo{height:26px;width:auto;display:block}.brand-sub{color:var(--text-dim);font-size:.82rem;padding-left:.85rem;border-left:1px solid var(--border);letter-spacing:.01em}.stage{flex:1;display:grid;grid-template-columns:1fr 360px;min-height:0}.viewport{position:relative;min-height:0;background:radial-gradient(circle at 50% 42%,#efe9de,#e7e0d4 55%,#ddd5c6)}.viewport canvas{display:block}.center-msg{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:#6f6c67;font-size:.9rem}.center-msg.error{color:var(--danger)}.customizer{display:flex;flex-direction:column;border-left:1px solid var(--border);background:var(--surface);min-height:0}.customizer-header{padding:1.25rem 1.25rem .75rem}.customizer-header h2{margin:0 0 .3rem;font-size:1.15rem;font-weight:700;letter-spacing:-.01em}.customizer-header p{margin:0;color:var(--text-dim);font-size:.82rem;line-height:1.4}.customizer-body{flex:1;overflow-y:auto;padding:.25rem 1.25rem}.customizer-footer{padding:1.1rem 1.25rem;border-top:1px solid var(--border)}.panel-section{padding:1rem 0;border-bottom:1px solid var(--border)}.panel-section:last-child{border-bottom:none}.panel-title{margin:0 0 .7rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);font-weight:600}.swatch-grid{display:flex;flex-wrap:wrap;gap:.55rem}.swatch{width:36px;height:36px;border-radius:50%;border:1px solid var(--border-strong);cursor:pointer;padding:0;transition:transform .12s ease,box-shadow .12s ease}.swatch:hover{transform:scale(1.08)}.swatch.is-active{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}.text-input{width:100%;padding:.65rem .75rem;border-radius:10px;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);font-size:.95rem}.text-input::placeholder{color:#a8a5a0}.text-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #b0102e1f}.hint{margin:.4rem 0 0;font-size:.72rem;color:var(--text-dim)}.error{margin:.4rem 0 0;font-size:.75rem;color:var(--danger)}.font-list{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.75rem}.font-chip{padding:.4rem .8rem;border-radius:999px;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);cursor:pointer;font-size:.95rem;transition:border-color .12s ease,color .12s ease}.font-chip:hover{border-color:var(--text-dim)}.font-chip.is-active{border-color:var(--accent);color:var(--accent)}.logo-row{display:flex;align-items:center;gap:.5rem;justify-content:space-between}.logo-name{font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.segmented{display:inline-flex;border:1px solid var(--border-strong);border-radius:10px;overflow:hidden}.segment{padding:.5rem 1rem;background:var(--surface);color:var(--text-dim);border:none;border-right:1px solid var(--border);cursor:pointer;font-size:.85rem;transition:background .12s ease,color .12s ease}.segment:last-child{border-right:none}.segment:hover{background:var(--surface-2)}.segment.is-active{background:var(--accent);color:var(--accent-ink);font-weight:600}.btn{font:inherit;cursor:pointer;border-radius:10px;padding:.6rem .9rem;border:1px solid transparent;transition:background .12s ease,border-color .12s ease,color .12s ease}.btn-block{width:100%}.btn-primary{background:var(--ink);color:#fff;font-weight:600;letter-spacing:.01em}.btn-primary:hover{background:var(--ink-hover)}.btn-primary:disabled{opacity:.55;cursor:default}.btn-outline{background:var(--surface);border-color:var(--border-strong);color:var(--text);width:100%}.btn-outline:hover{border-color:var(--accent);color:var(--accent)}.btn-ghost{background:transparent;color:var(--text-dim)}.btn-ghost:hover{color:var(--danger)}@media (max-width: 860px){.stage{grid-template-columns:1fr;grid-template-rows:55% 45%}.customizer{border-left:none;border-top:1px solid var(--border)}}