.iwrc-calculator {
    --iwrc-primary: #4493fa;
    --iwrc-dark: #17252a;
    --iwrc-light: #f5fafd;
    --iwrc-muted: #eeeeee;
    --iwrc-white: #ffffff;
    --iwrc-warning: #f5a000;
    --iwrc-radius: 16px;
    --iwrc-shadow: 0 10px 30px rgba(23, 37, 42, 0.08);
    box-sizing: border-box;
    color: var(--iwrc-dark);
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    max-width: 1120px;
    margin: 32px auto;
}

.iwrc-calculator *,
.iwrc-calculator *::before,
.iwrc-calculator *::after {
    box-sizing: border-box;
}

.iwrc-calculator [hidden] {
    display: none !important;
}

.iwrc-header {
    margin-bottom: 24px;
    text-align: center;
}

.iwrc-title {
    color: var(--iwrc-dark);
    font-family: inherit;
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 10px;
}

.iwrc-subtitle {
    color: rgba(23, 37, 42, 0.76);
    font-size: 1rem;
    margin: 0 auto;
    max-width: 780px;
}

.iwrc-panel {
    background: var(--iwrc-white);
    border: 1px solid var(--iwrc-muted);
    border-radius: var(--iwrc-radius);
    box-shadow: var(--iwrc-shadow);
    padding: clamp(18px, 3vw, 30px);
}

.iwrc-input-panel {
    margin-bottom: 22px;
}

.iwrc-fieldset {
    border: 0;
    margin: 0 0 20px;
    padding: 0;
}

.iwrc-fieldset legend,
.iwrc-control label,
.iwrc-quick-label {
    color: var(--iwrc-dark);
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.iwrc-mode-tabs {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.iwrc-mode-button,
.iwrc-quick-button,
.iwrc-copy-button,
.iwrc-calculate-button {
    appearance: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.iwrc-mode-button {
    background: var(--iwrc-light);
    border: 1px solid var(--iwrc-muted);
    border-radius: 10px;
    color: var(--iwrc-dark);
    min-height: 48px;
    padding: 10px 14px;
}

.iwrc-mode-button:hover {
    border-color: var(--iwrc-primary);
}

.iwrc-mode-button.is-active {
    background: var(--iwrc-primary);
    border-color: var(--iwrc-primary);
    box-shadow: 0 8px 18px rgba(68, 147, 250, 0.22);
    color: var(--iwrc-white);
    font-weight: 700;
}

.iwrc-mode-button:focus-visible,
.iwrc-quick-button:focus-visible,
.iwrc-copy-button:focus-visible,
.iwrc-calculate-button:focus-visible,
.iwrc-value-input:focus-visible,
.iwrc-grade-select:focus-visible,
.iwrc-unit-select:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--iwrc-primary) 35%, transparent);
    outline-offset: 2px;
}

.iwrc-input-grid {
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) 132px;
}

.iwrc-value-input,
.iwrc-grade-select,
.iwrc-unit-select {
    background: var(--iwrc-white);
    border: 1px solid color-mix(in srgb, var(--iwrc-dark) 24%, var(--iwrc-muted));
    border-radius: 9px;
    color: var(--iwrc-dark);
    font: inherit;
    min-height: 48px;
    padding: 10px 13px;
    width: 100%;
}

.iwrc-value-input:hover,
.iwrc-grade-select:hover,
.iwrc-unit-select:hover {
    border-color: var(--iwrc-primary);
}

.iwrc-helper {
    color: rgba(23, 37, 42, 0.65);
    font-size: 0.88rem;
    margin: 9px 0 16px;
}

.iwrc-quick-block {
    margin-top: 8px;
}

.iwrc-quick-values {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.iwrc-quick-button {
    background: var(--iwrc-white);
    border: 1px solid var(--iwrc-muted);
    border-radius: 8px;
    color: var(--iwrc-dark);
    font-size: 0.86rem;
    min-height: 38px;
    padding: 7px 11px;
}

.iwrc-quick-button:hover {
    border-color: var(--iwrc-primary);
    color: var(--iwrc-primary);
    transform: translateY(-1px);
}

.iwrc-calculate-button {
    background: var(--iwrc-primary);
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(68, 147, 250, 0.22);
    color: var(--iwrc-white);
    display: block;
    font-weight: 700;
    margin-top: 22px;
    min-height: 50px;
    padding: 12px 22px;
    text-transform: uppercase;
    width: 100%;
}

.iwrc-calculate-button:hover {
    filter: brightness(0.96);
    transform: translateY(-1px);
}

.iwrc-error {
    background: #fff4f2;
    border: 1px solid #e85d4a;
    border-radius: 8px;
    color: #8d2518;
    margin: 14px 0 0;
    padding: 10px 12px;
}

.iwrc-results {
    display: grid;
    gap: 22px;
}

.iwrc-result-summary {
    background: linear-gradient(135deg, var(--iwrc-light), var(--iwrc-white));
    border-color: color-mix(in srgb, var(--iwrc-primary) 30%, var(--iwrc-muted));
}

.iwrc-result-heading-row {
    align-items: flex-start;
    display: flex;
    gap: 18px;
    justify-content: space-between;
}

.iwrc-eyebrow {
    color: var(--iwrc-primary);
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.iwrc-result-title,
.iwrc-panel h3 {
    color: var(--iwrc-dark);
    font-family: inherit;
    font-size: 1.2rem;
    line-height: 1.3;
    margin: 0;
}

.iwrc-copy-button {
    background: var(--iwrc-white);
    border: 1px solid var(--iwrc-muted);
    border-radius: 8px;
    color: var(--iwrc-dark);
    flex: 0 0 auto;
    font-size: 0.84rem;
    padding: 8px 12px;
}

.iwrc-copy-button:hover {
    border-color: var(--iwrc-primary);
    color: var(--iwrc-primary);
}

.iwrc-metric-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 22px;
}

.iwrc-metric {
    background: var(--iwrc-white);
    border: 1px solid var(--iwrc-muted);
    border-radius: 12px;
    min-width: 0;
    padding: 15px;
}

.iwrc-metric-label {
    color: rgba(23, 37, 42, 0.62);
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.iwrc-metric strong {
    color: var(--iwrc-dark);
    display: block;
    font-size: clamp(1.05rem, 2.4vw, 1.4rem);
    overflow-wrap: anywhere;
}

.iwrc-range-box {
    border-left: 4px solid var(--iwrc-primary);
    margin-top: 18px;
    padding: 2px 0 2px 14px;
}

.iwrc-range-label {
    color: rgba(23, 37, 42, 0.68);
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.iwrc-range-value {
    color: var(--iwrc-dark);
    display: block;
    font-size: 1.15rem;
}

.iwrc-range-note {
    color: rgba(23, 37, 42, 0.68);
    font-size: 0.86rem;
    margin: 7px 0 0;
}

.iwrc-chart-panel h3,
.iwrc-visual-panel h3,
.iwrc-guidance-panel h3,
.iwrc-drawing-panel h3 {
    margin-bottom: 16px;
}

.iwrc-chart {
    background: var(--iwrc-light);
    border: 1px solid var(--iwrc-muted);
    border-radius: 12px;
    overflow: hidden;
    padding: 8px;
}

.iwrc-chart svg {
    display: block;
    height: auto;
    width: 100%;
}

.iwrc-chart-grid {
    stroke: color-mix(in srgb, var(--iwrc-dark) 12%, transparent);
    stroke-width: 1;
}

.iwrc-chart-axis {
    stroke: var(--iwrc-dark);
    stroke-width: 1.4;
}

.iwrc-chart-tick,
.iwrc-chart-axis-label,
.iwrc-chart-band-label {
    fill: var(--iwrc-dark);
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
}

.iwrc-chart-tick {
    font-size: 11px;
}

.iwrc-chart-axis-label {
    font-size: 12px;
    font-weight: 700;
}

.iwrc-chart-band-label {
    fill: color-mix(in srgb, var(--iwrc-dark) 75%, transparent);
    font-size: 11px;
}

.iwrc-chart-band {
    fill: color-mix(in srgb, var(--iwrc-primary) 26%, transparent);
}

.iwrc-chart-range {
    stroke: var(--iwrc-primary);
    stroke-linecap: round;
    stroke-width: 5;
}

.iwrc-chart-marker {
    fill: var(--iwrc-dark);
    stroke: var(--iwrc-white);
    stroke-width: 3;
}

.iwrc-n-scale {
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    margin-top: 14px;
}

.iwrc-n-item {
    background: var(--iwrc-light);
    border: 1px solid transparent;
    border-radius: 6px;
    min-width: 0;
    padding: 6px 2px;
    text-align: center;
}

.iwrc-n-item span,
.iwrc-n-item strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.iwrc-n-item span {
    color: rgba(23, 37, 42, 0.62);
    font-size: 0.61rem;
}

.iwrc-n-item strong {
    color: var(--iwrc-dark);
    font-size: 0.74rem;
}

.iwrc-n-item.is-in-range {
    background: color-mix(in srgb, var(--iwrc-primary) 10%, var(--iwrc-white));
    border-color: color-mix(in srgb, var(--iwrc-primary) 32%, transparent);
}

.iwrc-n-item.is-active {
    background: var(--iwrc-primary);
    border-color: var(--iwrc-primary);
}

.iwrc-n-item.is-active span,
.iwrc-n-item.is-active strong {
    color: var(--iwrc-white);
}

.iwrc-image-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.iwrc-image-card {
    background: var(--iwrc-light);
    border: 1px solid var(--iwrc-muted);
    border-radius: 12px;
    margin: 0;
    overflow: hidden;
}

.iwrc-image-card img {
    aspect-ratio: 16 / 9;
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}

.iwrc-image-card figcaption {
    display: grid;
    gap: 3px;
    padding: 12px 13px 14px;
}

.iwrc-image-card figcaption strong {
    color: var(--iwrc-dark);
    font-size: 0.92rem;
}

.iwrc-image-card figcaption span {
    color: rgba(23, 37, 42, 0.62);
    font-size: 0.77rem;
}

.iwrc-image-status {
    color: var(--iwrc-primary) !important;
    font-weight: 700;
    margin-top: 3px;
}

.iwrc-image-note {
    color: rgba(23, 37, 42, 0.65);
    font-size: 0.83rem;
    margin: 13px 0 0;
}

.iwrc-guidance-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.iwrc-grade-description {
    background: var(--iwrc-light);
    border-radius: 9px;
    color: var(--iwrc-dark);
    font-size: 0.9rem;
    margin-bottom: 16px;
    padding: 11px 12px;
}

.iwrc-guidance-panel h4 {
    color: var(--iwrc-dark);
    font-size: 0.9rem;
    margin: 16px 0 6px;
}

.iwrc-guidance-panel ul {
    margin: 0;
    padding-left: 20px;
}

.iwrc-guidance-panel li {
    margin: 4px 0;
}

.iwrc-guidance-panel li::marker {
    color: var(--iwrc-primary);
}

.iwrc-drawing-panel {
    background: var(--iwrc-light);
}

.iwrc-drawing-panel p {
    margin: 0;
}

.iwrc-disclaimer {
    background: #fff8e8;
    border: 1px solid var(--iwrc-warning);
    border-radius: 12px;
    color: var(--iwrc-dark);
    padding: 16px 18px;
}

.iwrc-disclaimer strong {
    color: #a86400;
}

.iwrc-disclaimer p {
    margin: 5px 0 0;
}

.iwrc-noscript {
    background: #fff4f2;
    border: 1px solid #e85d4a;
    border-radius: 8px;
    padding: 12px;
}

.iwrc-copy-fallback {
    height: 1px;
    left: -9999px;
    opacity: 0;
    position: fixed;
    top: 0;
    width: 1px;
}

@media (max-width: 860px) {
    .iwrc-n-scale {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .iwrc-image-grid,
    .iwrc-guidance-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .iwrc-calculator {
        margin: 20px 0;
    }

    .iwrc-mode-tabs,
    .iwrc-metric-grid {
        grid-template-columns: 1fr;
    }

    .iwrc-input-grid {
        grid-template-columns: minmax(0, 1fr) 104px;
    }

    .iwrc-result-heading-row {
        align-items: stretch;
        flex-direction: column;
    }

    .iwrc-copy-button {
        align-self: flex-start;
    }

    .iwrc-n-scale {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .iwrc-panel {
        border-radius: 12px;
        padding: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .iwrc-calculator *,
    .iwrc-calculator *::before,
    .iwrc-calculator *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}