.bbcode-root{--bb-ink: #211e2d;--bb-muted: #77728a;--bb-line: #dcd8e7;--bb-panel: #fffdfb;--bb-soft: #f4f0f7;--bb-accent: #724ee8;--bb-accent-deep: #4c2fba;--bb-cyan: #20a8b5;--bb-warm: #ed8a52;color:var(--bb-ink);margin:0 auto;max-width:1120px;width:100%}.theme-dark .bbcode-root{--bb-ink: #f4f1fb;--bb-muted: #aaa4bb;--bb-line: #342e47;--bb-panel: #171422;--bb-soft: #211c30;--bb-accent: #a68cff;--bb-accent-deep: #c0b0ff;--bb-cyan: #63d2dc;--bb-warm: #f3a06d}.bbcode-root *{box-sizing:border-box}.bbcode-root button,.bbcode-root textarea{font:inherit}.bbcode-header,.bbcode-input-card,.bbcode-output-card,.bbcode-preview-card{background:var(--bb-panel);border:1px solid var(--bb-line)}.bbcode-header{align-items:center;border-radius:18px 18px 0 0;display:flex;justify-content:space-between;gap:1rem;padding:1rem 1.2rem}.bbcode-title-row{align-items:center;display:flex;gap:.75rem;min-width:0}.bbcode-mark{align-items:center;background:var(--bb-soft);border:1px solid var(--bb-line);border-radius:8px;color:var(--bb-accent);display:inline-flex;font-size:.9rem;font-weight:900;height:36px;justify-content:center;width:58px}.bbcode-kicker{color:var(--bb-accent);display:block;font-size:.75rem;font-weight:900;letter-spacing:.14em}.bbcode-title-row strong,.bbcode-draft-note{color:var(--bb-muted);display:block;font-size:.75rem;font-weight:600}.bbcode-draft-note{text-align:right}.bbcode-input-card{border-top:0;padding:1.2rem}.bbcode-section-head,.bbcode-output-heading,.bbcode-output-card-head,.bbcode-input-footer{align-items:flex-start;display:flex;justify-content:space-between;gap:1rem}.bbcode-section-head{margin-bottom:.7rem}.bbcode-section-head h2,.bbcode-output-heading h2{display:inline;font-size:1rem;margin:0}.bbcode-step{color:var(--bb-warm);font-size:.75rem;font-weight:900;margin-right:.45rem}.bbcode-detected{background:var(--bb-soft);border-radius:999px;color:var(--bb-accent-deep);font-size:.75rem;padding:.3rem .55rem}.bbcode-input-card textarea{background:var(--bb-soft);border:1px solid var(--bb-line);border-radius:9px;color:var(--bb-ink);display:block;font-size:.8rem;line-height:1.65;min-height:240px;padding:1rem;resize:vertical;width:100%}.bbcode-input-card textarea:focus{border-color:var(--bb-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--bb-accent) 18%,transparent);outline:0}.bbcode-input-footer{align-items:center;margin-top:.6rem}.bbcode-input-footer p{color:var(--bb-muted);font-size:.75rem;line-height:1.4;margin:0}.bbcode-input-meta{align-items:center;color:var(--bb-muted);display:flex;flex-wrap:wrap;font-size:.75rem;gap:.8rem}.bbcode-input-meta strong{color:var(--bb-ink)}.bbcode-clear-button,.bbcode-icon-button{background:transparent;border:1px solid var(--bb-line);border-radius:6px;color:var(--bb-ink);cursor:pointer;font-size:.75rem;font-weight:800;padding:.38rem .6rem}.bbcode-clear-button:hover,.bbcode-icon-button:hover{border-color:var(--bb-accent);color:var(--bb-accent-deep)}.bbcode-output-section{background:var(--bb-soft);border-left:1px solid var(--bb-line);border-right:1px solid var(--bb-line);padding:1rem 1.2rem}.bbcode-output-heading{align-items:center;margin-bottom:.7rem}.bbcode-output-grid{display:grid;gap:.8rem;grid-template-columns:repeat(2,minmax(0,1fr))}.bbcode-output-card{border-radius:10px;min-width:0;padding:.8rem}.bbcode-output-card-head{align-items:center;margin-bottom:.55rem}.bbcode-output-card h3{font-size:.78rem;margin:0}.bbcode-output-card pre{background:var(--bb-soft);border:1px solid var(--bb-line);border-radius:7px;color:var(--bb-ink);font-size:.75rem;line-height:1.6;margin:0;min-height:180px;max-height:330px;overflow:auto;padding:.8rem;white-space:pre-wrap;overflow-wrap:anywhere}.bbcode-preview-card{border-radius:0 0 18px 18px;border-top:0;padding:1rem 1.2rem 1.2rem}.bbcode-preview-surface{background:var(--bb-soft);border:1px solid var(--bb-line);border-radius:9px;color:var(--bb-ink);font-size:.82rem;line-height:1.6;min-height:110px;padding:1rem}.bbcode-preview-surface h1,.bbcode-preview-surface h2,.bbcode-preview-surface h3{line-height:1.15;margin:0 0 .6rem}.bbcode-preview-surface h1{font-size:1.35rem}.bbcode-preview-surface h2{font-size:1.12rem}.bbcode-preview-surface h3{font-size:.98rem}.bbcode-preview-surface p{margin:.3rem 0}.bbcode-preview-surface ul,.bbcode-preview-surface ol{margin:.45rem 0;padding-left:1.3rem}.bbcode-preview-surface li{margin:.15rem 0}.bbcode-preview-surface blockquote{border-left:3px solid var(--bb-accent);color:var(--bb-muted);margin:.6rem 0;padding-left:.7rem}.bbcode-preview-surface a{color:var(--bb-accent-deep)}.bbcode-preview-surface code,.bbcode-preview-surface pre{background:var(--bb-panel);border:1px solid var(--bb-line);border-radius:5px}.bbcode-preview-surface code{padding:.1rem .25rem}.bbcode-preview-surface pre{overflow:auto;padding:.6rem}.bbcode-preview-surface pre code{border:0;padding:0}.bbcode-preview-surface p:first-child:last-child{color:var(--bb-muted);margin:0}.bbcode-sr-only{height:1px;margin:-1px;overflow:hidden;position:absolute;width:1px;clip-path:inset(50%)}.bbcode-root button:focus-visible,.bbcode-root textarea:focus-visible{outline:3px solid color-mix(in srgb,var(--bb-cyan) 45%,transparent);outline-offset:2px}@media(max-width:700px){.bbcode-header,.bbcode-input-footer{align-items:flex-start;flex-direction:column}.bbcode-draft-note{text-align:left}.bbcode-input-meta{width:100%}.bbcode-output-grid{grid-template-columns:1fr}}@media(max-width:460px){.bbcode-header,.bbcode-input-card,.bbcode-output-section,.bbcode-preview-card{padding-left:.85rem;padding-right:.85rem}.bbcode-input-meta{justify-content:space-between}}@media(prefers-reduced-motion:reduce){.bbcode-root *{scroll-behavior:auto;transition-duration:.01ms}}