:root {
    --app-max-width: 1680px;
    --app-radius: 0.8rem;
    --app-code-bg: rgba(127, 127, 127, 0.08);
    --app-match-bg: rgba(255, 193, 7, 0.32);
    --app-match-border: rgba(255, 152, 0, 0.65);
}

html { scroll-behavior: smooth; }
body { min-height: 100vh; background: var(--bs-body-bg); }
.app-container { max-width: var(--app-max-width); margin-inline: auto; }
.app-header { z-index: 1020; backdrop-filter: blur(12px); }
.navbar-brand { white-space: normal; line-height: 1.08; }
.navbar-brand small { font-size: .72rem; font-weight: 400; margin-top: .2rem; }
.brand-icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .65rem; background: var(--bs-primary); color: #fff; }
.btn-icon { width: 2.55rem; height: 2.55rem; padding: 0; display: inline-grid; place-items: center; }
.language-button { min-width: 8.3rem; }

.intro-panel { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem; border: 1px solid var(--bs-border-color); border-radius: var(--app-radius); background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), .08), transparent 62%); }
.engine-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .7rem; border-radius: 999px; background: rgba(var(--bs-success-rgb), .12); color: var(--bs-success-text-emphasis); font-size: .83rem; font-weight: 600; white-space: nowrap; }
.engine-pill.pcre { background: rgba(var(--bs-info-rgb), .14); color: var(--bs-info-text-emphasis); }

.tool-tabs { gap: .35rem; flex-wrap: nowrap; overflow-x: auto; padding-bottom: .15rem; scrollbar-width: thin; }
.tool-tabs .nav-link { white-space: nowrap; }
.tool-card { border-radius: var(--app-radius); box-shadow: 0 .2rem .8rem rgba(0,0,0,.035); overflow: hidden; }
.tool-card .card-header { background: rgba(var(--bs-secondary-rgb), .035); padding: .8rem 1rem; }
.field-help { margin-top: .3rem; color: var(--bs-secondary-color); font-size: .78rem; line-height: 1.35; }
.regex-input-group .input-group-text { font-family: var(--bs-font-monospace); font-weight: 700; }
.flags-input { max-width: 7rem; }
.code-textarea { resize: vertical; min-height: 15rem; tab-size: 4; }

.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.stat-box { border: 1px solid var(--bs-border-color); border-radius: .65rem; padding: .65rem; min-width: 0; }
.stat-box span { display: block; color: var(--bs-secondary-color); font-size: .72rem; }
.stat-box strong { display: block; margin-top: .15rem; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; }
.result-section-title { font-size: .78rem; color: var(--bs-secondary-color); margin-bottom: .4rem; }
.highlight-preview { min-height: 11rem; max-height: 23rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: .8rem; border: 1px solid var(--bs-border-color); border-radius: .65rem; background: var(--app-code-bg); font-size: .88rem; line-height: 1.6; }
.regex-match { background: var(--app-match-bg); outline: 1px solid var(--app-match-border); border-radius: .15rem; }
.match-table-wrap { max-height: 17rem; overflow: auto; }
.match-table-wrap th { position: sticky; top: 0; z-index: 1; background: var(--bs-body-bg); }
.operation-output { min-height: 8rem; max-height: 22rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: .8rem; border-radius: .65rem; background: var(--app-code-bg); }

.explain-list { max-height: 16rem; overflow: auto; }
.explain-row { display: grid; grid-template-columns: minmax(4.5rem, auto) 1fr; gap: .65rem; padding: .4rem 0; border-bottom: 1px dashed var(--bs-border-color); }
.explain-row:last-child { border-bottom: 0; }
.explain-token { font-family: var(--bs-font-monospace); font-weight: 700; color: var(--bs-primary-text-emphasis); overflow-wrap: anywhere; }
.explain-meaning { font-size: .86rem; }

.builder-result-card { top: 5.4rem; }
.library-search-controls { min-width: min(100%, 34rem); }
.library-search-controls > * { min-width: 0; }
.pattern-card { height: 100%; border: 1px solid var(--bs-border-color); border-radius: .75rem; padding: .85rem; transition: transform .15s ease, border-color .15s ease; }
.pattern-card:hover { transform: translateY(-2px); border-color: rgba(var(--bs-primary-rgb), .45); }
.pattern-code { display: block; margin: .55rem 0; padding: .5rem .6rem; border-radius: .5rem; background: var(--app-code-bg); font-family: var(--bs-font-monospace); font-size: .8rem; overflow: auto; white-space: nowrap; }
.pattern-meta { font-size: .75rem; color: var(--bs-secondary-color); }
.reference-search { max-width: 20rem; }
.compatibility-table td:not(:first-child), .compatibility-table th:not(:first-child) { text-align: center; }
.support-yes { color: var(--bs-success-text-emphasis); font-weight: 700; }
.support-no { color: var(--bs-danger-text-emphasis); font-weight: 700; }
.support-most { color: var(--bs-warning-text-emphasis); font-weight: 700; }
.safety-list { padding-left: 1.2rem; }
.safety-list li + li { margin-top: .5rem; }

.app-footer { background: rgba(var(--bs-secondary-rgb), .04); }
.footer-toggle { width: 100%; border: 0; background: transparent; padding: .35rem 0; display: flex; align-items: center; justify-content: space-between; color: inherit; font-weight: 600; }
.footer-toggle[aria-expanded="true"] .footer-chevron { transform: rotate(180deg); }
.footer-chevron { transition: transform .2s ease; }
.copyright { font-size: .78rem; color: var(--bs-secondary-color); }

.cookie-notice { position: fixed; z-index: 1080; left: 50%; bottom: 1rem; transform: translateX(-50%); width: min(94vw, 920px); display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .9rem; }
.cookie-icon { flex: 0 0 auto; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%; background: rgba(var(--bs-warning-rgb), .16); color: var(--bs-warning-text-emphasis); font-size: 1.1rem; }
.cookie-actions { display: flex; gap: .5rem; flex: 0 0 auto; }

@media (max-width: 991.98px) {
    .builder-result-card { position: static !important; }
}

@media (max-width: 767.98px) {
    .app-container { padding-left: .75rem; padding-right: .75rem; }
    .navbar-brand strong { font-size: .9rem; }
    .language-button { min-width: auto; }
    .intro-panel { align-items: flex-start; flex-direction: column; }
    .engine-pill { white-space: normal; }
    .tool-tabs .nav-link { padding: .55rem .7rem; font-size: .86rem; }
    .stats-grid { gap: .4rem; }
    .stat-box { padding: .55rem; }
    .regex-input-group { flex-wrap: nowrap; }
    .flags-input { max-width: 5.25rem; }
    .library-search-controls { min-width: 100%; flex-direction: column; }
    .reference-search { max-width: none; }
    .cookie-notice { align-items: flex-start; flex-wrap: wrap; bottom: .5rem; }
    .cookie-actions { width: 100%; }
    .cookie-actions .btn { flex: 1; }
}

@media (max-width: 420px) {
    .navbar .btn-icon { width: 2.3rem; height: 2.3rem; }
    .language-button { padding-inline: .55rem; font-size: .82rem; }
    .stats-grid { grid-template-columns: 1fr; }
    .stat-box { display: flex; justify-content: space-between; align-items: center; }
    .stat-box strong { margin-top: 0; }
}