.regex-studio .tool-panel{overflow:visible}.regex-studio .tool-panel h2{font-size:inherit;border-bottom:none;padding:0}.regex-studio{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:stretch;gap:1.25rem;display:grid}.regex-studio .panel-topline{border-bottom:1px solid var(--color-hairline);background:radial-gradient(circle at top left, color-mix(in srgb, var(--color-accent) 9%, transparent), transparent 44%), linear-gradient(180deg, color-mix(in srgb, var(--color-canvas-soft) 90%, white), var(--color-card));justify-content:space-between;align-items:flex-start;gap:1rem;padding:1rem 1.25rem;display:flex}.regex-studio .eyebrow{letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent);margin:0;font-size:.7rem;font-weight:700}.regex-studio .panel-topline h2{letter-spacing:-.01em;border-bottom:none;margin:.15rem 0 0;padding:0;font-size:.98rem;font-weight:700}.regex-studio .panel-topline-actions{flex-wrap:wrap;flex-shrink:0;gap:.4rem;display:flex}.regex-studio .builder-shell{flex-direction:column;flex:1;gap:1rem;padding:1.05rem;display:flex}.breakdown-panel{flex-direction:column;max-height:110vh;display:flex}.breakdown-shell{scrollbar-width:thin;scrollbar-color:var(--color-hairline) transparent;flex-direction:column;flex:1;gap:1rem;min-height:0;padding:1.05rem;display:flex;overflow-y:auto}.regex-studio .ghost-chip{border:1px solid var(--color-hairline);background:var(--color-card);height:36px;color:var(--color-body);cursor:pointer;white-space:nowrap;border-radius:999px;align-items:center;gap:.42rem;padding:0 .8rem;font-size:.78rem;font-weight:600;transition:all .16s;display:inline-flex}.regex-studio .ghost-chip:hover{border-color:var(--color-hairline-strong);background:color-mix(in srgb, var(--color-canvas-soft) 74%, white);color:var(--color-ink)}.regex-studio .sample-highlight{border-color:var(--color-accent);color:var(--color-accent);background:var(--color-accent-soft);animation:2s ease-in-out infinite regex-sample-pulse}.regex-studio .sample-highlight:hover{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}@keyframes regex-sample-pulse{0%,to{box-shadow:0 0 0 0 color-mix(in srgb, var(--color-accent) 30%, transparent)}50%{box-shadow:0 0 0 6px color-mix(in srgb, var(--color-accent) 0%, transparent)}}.regex-studio .clear-btn{color:var(--color-mute);border-color:var(--color-hairline);background:var(--color-card)}.regex-studio .clear-btn:hover{color:var(--color-error);border-color:var(--color-error);background:color-mix(in srgb, #ef4444 6%, var(--color-card))}.regex-studio .field input{font-family:var(--font-mono,"SF Mono", "Fira Code", "Cascadia Code", monospace);letter-spacing:.02em;font-size:.88rem}.regex-studio .field textarea{font-family:var(--font-mono,"SF Mono", "Fira Code", "Cascadia Code", monospace);min-height:80px;font-size:.85rem}.section-label{color:var(--color-mute);text-transform:uppercase;letter-spacing:.12em;margin-bottom:.5rem;font-size:.68rem;font-weight:700;display:block}.flags-section{flex-direction:column;gap:.4rem;display:flex}.flag-toggles{flex-wrap:wrap;gap:.4rem;display:flex}.flag-pill{border:1px solid var(--color-hairline);background:var(--color-canvas-soft);cursor:pointer;user-select:none;border-radius:999px;align-items:center;gap:.4rem;padding:.35rem .7rem .35rem .45rem;transition:all .15s;display:inline-flex}.flag-pill:hover{border-color:var(--color-accent);background:color-mix(in srgb, var(--color-accent) 4%, var(--color-canvas-soft))}.flag-pill input{width:13px;height:13px;accent-color:var(--color-accent);cursor:pointer;margin:0}.flag-pill span{font-family:var(--font-mono,monospace);color:var(--color-ink);font-size:.78rem;font-weight:700}.flag-pill em{color:var(--color-mute);font-size:.68rem;font-style:normal;font-weight:500}.flag-pill:has(input:checked){border-color:var(--color-accent);background:var(--color-accent-soft)}.flag-pill:has(input:checked) span{color:var(--color-accent)}.patterns-section{flex-direction:column;gap:.4rem;display:flex}.pattern-chips{flex-wrap:wrap;gap:.35rem;display:flex}.pattern-chip{border:1px solid var(--color-hairline);background:var(--color-card);height:30px;color:var(--color-body);cursor:pointer;white-space:nowrap;border-radius:999px;padding:0 .7rem;font-family:inherit;font-size:.74rem;font-weight:600;transition:all .15s}.pattern-chip:hover{border-color:var(--color-accent);color:var(--color-accent);background:var(--color-accent-soft)}.regex-studio .status-box{border-radius:var(--radius-md);background:var(--color-canvas-soft);color:var(--color-body);border:1px solid var(--color-hairline);padding:.75rem 1rem;font-size:.875rem;font-weight:600}.regex-studio .status-box.ok{background:color-mix(in srgb, #22c55e 8%, var(--color-card));border-color:color-mix(in srgb, #22c55e 25%, var(--color-hairline));color:#16a34a}.regex-studio .status-box.warn{background:color-mix(in srgb, #eab308 8%, var(--color-card));border-color:color-mix(in srgb, #eab308 25%, var(--color-hairline));color:#ca8a04}.regex-studio .status-box.err{background:color-mix(in srgb, #ef4444 8%, var(--color-card));border-color:color-mix(in srgb, #ef4444 25%, var(--color-hairline));color:#dc2626}.match-highlight-section{flex-direction:column;gap:.35rem;display:flex}.match-highlight{border-radius:var(--radius-md);background:var(--color-canvas-soft);border:1px solid var(--color-hairline);font-family:var(--font-mono,monospace);white-space:pre-wrap;word-break:break-all;color:var(--color-body);padding:.75rem 1rem;font-size:.85rem;line-height:1.7}.regex-match{color:#2563eb;background:#3b82f633;border-bottom:2px solid #3b82f6;border-radius:3px;padding:.1em .15em;font-weight:600}.match-info{flex-wrap:wrap;gap:.75rem;display:flex}.match-detail{color:var(--color-mute);font-size:.75rem;font-weight:500}.match-detail strong{color:var(--color-ink);font-weight:700}.tokens{flex-direction:column;gap:.4rem;display:flex}.token-item{border-radius:var(--radius-md);border:1px solid var(--color-hairline);border-left-width:3px;grid-template-columns:auto 1fr;align-items:start;gap:0;padding:.6rem .85rem;transition:border-color .15s,box-shadow .15s;display:grid}.token-item:hover{border-color:color-mix(in srgb, var(--color-hairline-strong) 60%, var(--color-hairline));box-shadow:0 1px 3px #0000000a}.token-left{border-right:1px solid var(--color-hairline);flex-direction:column;gap:.25rem;min-width:80px;max-width:180px;margin-right:.85rem;padding-right:.85rem;display:flex}.token-item code{font-family:var(--font-mono,monospace);word-break:break-all;font-size:.82rem;font-weight:700;line-height:1.3}.token-cat{text-transform:uppercase;letter-spacing:.08em;color:#fff;border-radius:999px;width:fit-content;padding:.15rem .45rem;font-size:.56rem;font-weight:700;line-height:1.4;display:inline-flex}.token-desc{color:var(--color-body);padding-top:.05rem;font-size:.8rem;line-height:1.55}.regex-studio .share-panel-card{border-top:1px solid var(--color-hairline);background:var(--color-canvas-soft);margin:0;padding:1rem 1.05rem}.regex-studio .share-header h3{color:var(--color-ink);margin:0 0 .25rem;font-size:.95rem;font-weight:600}.regex-studio .share-header p{color:var(--color-mute);margin:0 0 1rem;font-size:.82rem}.regex-studio .share-actions-row{flex-wrap:wrap;align-items:center;gap:1rem;display:flex}.regex-studio .share-native-btn{white-space:nowrap;align-items:center;gap:.5rem;height:42px;padding:0 1rem 0 1.05rem;display:inline-flex}.regex-studio .primary-action{border-radius:var(--radius-md);background:var(--color-accent);color:#fff;cursor:pointer;border:none;height:42px;font-size:.85rem;font-weight:600;transition:opacity .16s}.regex-studio .primary-action:hover{opacity:.88}.regex-studio .social-links-container{flex-wrap:wrap;gap:.5rem;display:flex}.regex-studio .social-share-btn{border-radius:var(--radius-md);color:#fff;justify-content:center;align-items:center;height:38px;padding:0 .9rem;font-size:.78rem;font-weight:600;text-decoration:none;transition:opacity .2s;display:inline-flex}.regex-studio .social-share-btn:hover{opacity:.9}.regex-studio .social-share-btn.tw{background:#0f1419}.regex-studio .social-share-btn.li{background:#0a66c2}.regex-studio .social-share-btn.wa{background:#25d366}.regex-studio .social-share-btn.rd{background:#ff4500}@media (width<=1024px){.regex-studio{grid-template-columns:1fr}.breakdown-panel{max-height:none}}@media (width<=640px){.regex-studio .panel-topline{flex-direction:column;align-items:stretch}.regex-studio .panel-topline-actions{justify-content:flex-end}.regex-studio .share-actions-row{flex-direction:column;align-items:stretch}.regex-studio .social-links-container{justify-content:space-between}.regex-studio .social-share-btn{text-align:center;flex:1}.token-item{grid-template-columns:1fr;gap:.3rem}.token-left{border-right:none;flex-direction:row;align-items:center;gap:.5rem;min-width:0;max-width:none;margin-right:0;padding-right:0}}