.flange-page {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--header-height) - 2.4rem);
}

.flange-intro {
    margin-bottom: 1rem;
}

.flange-alert,
.flange-loading,
.flange-size-card,
.flange-data-panel {
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: .5rem;
}

.flange-alert {
    color: #b42318;
    padding: 1rem;
}

.flange-loading {
    align-items: center;
    color: #667085;
    display: flex;
    gap: .8rem;
    padding: 1rem;
}

.flange-loading img {
    height: 2.4rem;
    opacity: .55;
    width: 2.4rem;
}

.flange-list-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.flange-list-header h2 {
    color: #1d2939;
    font-size: 1.18rem;
    font-weight: 700;
    margin: 0 0 .25rem;
}

.flange-list-header p {
    color: #667085;
    font-size: .84rem;
    margin: 0;
}

.flange-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.flange-size-card {
    overflow: hidden;
}

.flange-size-heading {
    border-bottom: 1px solid #eaecf0;
    padding: .8rem .9rem;
}

.flange-size-heading span {
    color: var(--primary);
    display: block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.flange-size-heading strong {
    color: #1d2939;
    display: block;
    font-size: 1rem;
    margin-top: .2rem;
}

.flange-rate-list {
    display: grid;
    gap: .35rem;
    padding: .55rem;
}

.flange-rate-item {
    align-items: center;
    background: transparent;
    border: 1px solid #eef2f6;
    border-radius: .4rem;
    color: #344054;
    cursor: pointer;
    display: flex;
    gap: .7rem;
    justify-content: space-between;
    padding: .58rem .65rem;
    text-align: left;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.flange-rate-item:hover {
    background: #f8fafc;
    border-color: #98a2b3;
    color: var(--primary);
}

.flange-rate-item span {
    font-weight: 800;
}

.flange-rate-item small {
    color: #667085;
    font-size: .74rem;
}

.flange-detail {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.flange-detail-toolbar {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.flange-nav-group {
    display: flex;
    gap: .55rem;
}

.flange-nav-button {
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: .45rem;
    color: #fff;
    cursor: pointer;
    font-size: .82rem;
    font-weight: 700;
    padding: .58rem .9rem;
}

.flange-nav-button.secondary {
    background: #fff;
    border-color: #d0d5dd;
    color: #344054;
}

.flange-nav-button:disabled {
    cursor: not-allowed;
    opacity: .48;
}

.flange-detail-layout {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.55fr) minmax(18rem, .7fr);
}

.flange-diagram-section {
    min-width: 0;
}

.flange-diagram-title {
    margin-bottom: .55rem;
    scroll-margin-top: calc(var(--header-height, 4rem) + 1rem);
}

.flange-diagram-title span {
    color: var(--primary);
    display: block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.flange-diagram-title h2 {
    color: #1d2939;
    font-size: 1.12rem;
    font-weight: 700;
    margin: .2rem 0 0;
}

.flange-svg-wrap {
    overflow: hidden;
    padding: 0;
}

.flange-bolt-svg-wrap {
    margin-top: 1rem;
    overflow: hidden;
}

.flange-technical-svg {
    display: block;
    height: auto;
    max-width: 100%;
    width: 100%;
}

.flange-bolt-svg {
    display: block;
    height: auto;
    max-width: 100%;
    width: 100%;
}

.flange-bolt-svg text {
    fill: #1d2939;
    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;
}

.bolt-outer,
.bolt-inner {
    fill: none;
    stroke: #1f2937;
    stroke-width: 3;
}

.bolt-pcd {
    fill: none;
    stroke: #98a2b3;
    stroke-dasharray: 10 8;
    stroke-width: 2;
}

.bolt-centerline {
    stroke: #475467;
    stroke-width: 1.5;
}

.bolt-hole {
    fill: #fff;
    stroke: #1f2937;
    stroke-width: 2.5;
}

.bolt-hole-cross {
    stroke: #1f2937;
    stroke-width: 1.5;
}

.bolt-dimension,
.bolt-callout {
    fill: none;
    stroke: #98a2b3;
    stroke-width: 1.8;
}

.bolt-dimension.soft {
    stroke: #667085;
}

.flange-bolt-svg marker path {
    fill: #1f2937;
}

.bolt-spec-card {
    fill: none;
    stroke: #d0d5dd;
    stroke-width: 1.5;
}

.bolt-spec-title {
    font-size: 17px !important;
    font-weight: 800 !important;
}

.bolt-spec-row text:first-child {
    fill: #667085;
    font-size: 17px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.bolt-spec-row text:last-child {
    font-size: 17px;
}

.flange-bolt-svg .st0,
.flange-bolt-svg .st4 {
    fill: #1f2937;
    stroke: #1f2937;
}

.diagram-border {
    fill: none;
    stroke: #9ca3af;
    stroke-width: 1;
}

.diagram-header text,
.diagram-bottom text,
.diagram-notes text {
    fill: #1f2937;
    font-size: 14px;
    font-weight: 800;
}

.diagram-small {
    font-size: 13px !important;
    font-weight: 500 !important;
}

.flange-section path {
    fill: #d7d7d7;
    stroke: #111827;
    stroke-width: 1.4;
}

.strong-line {
    fill: none;
    stroke: #111827;
    stroke-width: 1.8;
}

.hidden-centerline {
    fill: none;
    stroke: #6b7280;
    stroke-dasharray: 12 7;
    stroke-width: 1.7;
}

.dimension-line {
    stroke: #111827;
    stroke-width: 1.25;
}

.value-box rect {
    fill: #fff;
    stroke: #111827;
    stroke-width: 1.2;
}

.value-box text {
    fill: #000;
    font-size: 14px;
    font-weight: 500;
}

.value-box .bold-value {
    font-weight: 900;
}

.note-box {
    fill: #d9d9d9;
    stroke: #9ca3af;
}

.brace {
    fill: #000;
    font-size: 42px !important;
    font-weight: 400 !important;
}

.flange-data-panel {
    padding: 1rem;
}

.flange-data-panel h3 {
    color: #1d2939;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 .8rem;
}

.flange-data-group + .flange-data-group {
    margin-top: 1rem;
}

.flange-data-group h4 {
    color: var(--primary);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .08em;
    margin: 0 0 .55rem;
    text-transform: uppercase;
}

.flange-data-panel dl {
    display: grid;
    gap: .55rem;
    margin: 0;
}

.flange-data-panel dl div {
    background: #f8fafc;
    border-radius: .5rem;
    padding: .55rem .65rem;
}

.flange-data-panel dt {
    color: #667085;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.flange-data-panel dd {
    color: #1d2939;
    font-size: .9rem;
    font-weight: 700;
    margin: .12rem 0 0;
}

@media (max-width: 1199px) {
    .flange-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .flange-detail-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .flange-grid {
        grid-template-columns: 1fr;
    }

    .flange-detail-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: .65rem;
    }

    .flange-nav-group {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .flange-nav-button {
        width: 100%;
    }
}