:root {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
    color: #263b34;
    background: #f4f8f6;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-width: 320px;
    background:
        radial-gradient(ellipse at top left, #e7f4ed 0, transparent 38%),
        #f4f8f6;
}

button {
    font: inherit;
}

.dashboard {
    width: min(100% - 32px, 1040px);
    margin: 0 auto;
    padding: 28px 0 36px;
}

.header,
.brand,
.connection,
.section-heading,
.condition-heading,
.condition-footer,
.sensor-title,
.evaluation-footer,
.response-heading {
    display: flex;
    align-items: center;
}

.header,
.section-heading,
.condition-heading,
.condition-footer,
.evaluation-footer,
.response-heading {
    justify-content: space-between;
}

.header {
    gap: 16px;
    margin-bottom: 34px;
}

.brand {
    gap: 12px;
}

.brand-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    background: #dcefe4;
    color: #3e8968;
    font-size: 25px;
}

.brand h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 750;
    letter-spacing: -0.5px;
}

.brand p,
.hero-description {
    margin: 4px 0 0;
    color: #82918a;
    font-size: 13px;
}

.connection {
    gap: 8px;
    color: #65766e;
    font-size: 12px;
    font-weight: 600;
}

.connection-dot,
.live-label span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d6a44a;
}

.connection-dot.connected {
    background: #4aab7b;
    box-shadow: 0 0 0 4px #e1f3e8;
}

.connection-dot.disconnected {
    background: #d46b6b;
}

.hero {
    margin-bottom: 20px;
}

.eyebrow {
    margin: 0 0 7px;
    color: #82968c;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.25px;
}

.hero h2 {
    margin: 0;
    font-size: clamp(24px, 4vw, 32px);
    letter-spacing: -1px;
    line-height: 1.2;
}

.hero-description {
    margin-top: 8px;
    font-size: 14px;
}

.primary-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
    padding: 22px 24px;
    border: 1px solid #c9e4d4;
    border-radius: 20px;
    background: linear-gradient(110deg, #e5f4eb, #eaf3f9);
    box-shadow: 0 8px 24px #355c4710;
}

.action-copy h2 {
    margin: 0;
    font-size: 19px;
    letter-spacing: -0.4px;
}

.action-copy p {
    margin: 6px 0 0;
    color: #6e8177;
    font-size: 12px;
    line-height: 1.5;
}

.evaluate-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-shrink: 0;
    min-height: 48px;
    padding: 0 20px;
    border: 0;
    border-radius: 13px;
    background: #398565;
    color: white;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
    box-shadow: 0 5px 12px #39856530;
    transition: transform 160ms ease, background 160ms ease;
}

.evaluate-button:hover {
    background: #2f7557;
    transform: translateY(-1px);
}

.evaluate-button:active {
    transform: translateY(0);
}

.evaluate-button:focus-visible {
    outline: 3px solid #91c9aa;
    outline-offset: 3px;
}

.condition-card,
.response-card,
.sensor-card,
.signal-card,
.results-card {
    border: 1px solid #e3ebe6;
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 7px 24px #344f3e09;
}

.condition-card {
    margin-bottom: 16px;
    padding: 22px 24px;
}

.condition-heading {
    gap: 12px;
}

.condition-value {
    margin: 0;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -0.8px;
    transition: color 250ms ease;
}

.condition-value.good,
.response-badge.good {
    color: #1fb341;
}

.condition-value.fair,
.response-badge.fair {
    color: #8dcc59;
}

.condition-value.moderate,
.response-badge.moderate {
    color: #f7df65;
}

.condition-value.elevated,
.response-badge.elevated {
    color: #e98436;
}

.condition-value.pending,
.response-badge.pending {
    color: #829189;
}

.condition-card > p,
.response-card > p {
    margin: 12px 0 18px;
    color: #74847c;
    font-size: 13px;
    line-height: 1.6;
}

.condition-footer,
.evaluation-footer {
    padding-top: 13px;
    border-top: 1px solid #edf1ee;
    color: #849189;
    font-size: 11px;
}

.condition-footer strong,
.evaluation-footer strong {
    color: #53665b;
    font-weight: 650;
}

.response-card {
    margin-bottom: 28px;
    padding: 20px 24px;
    border-left: 4px solid #d6e7dc;
}

.response-heading {
    gap: 12px;
}

.response-heading h2 {
    margin: 0;
    font-size: 18px;
    letter-spacing: -0.4px;
}

.response-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 11px;
    border-radius: 999px;
    background: #f0f4f1;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.response-badge.good {
    background: #e7f3eb;
}

.response-badge.fair {
    background: #eef4e9;
}

.response-badge.moderate {
    background: #f8f2df;
}

.response-badge.elevated {
    background: #fff0e3;
}

.response-card > p {
    margin-bottom: 0;
}

.sensor-section {
    margin-bottom: 26px;
}

.section-heading {
    gap: 12px;
    margin-bottom: 14px;
}

.section-heading h2 {
    margin: 0;
    font-size: 19px;
    letter-spacing: -0.4px;
}

.live-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #72847a;
    font-size: 11px;
    font-weight: 650;
}

.live-label span {
    background: #51b27d;
    box-shadow: 0 0 0 4px #e4f4e9;
}

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

.sensor-card {
    display: flex;
    align-items: center;
    flex-direction: column;
    min-width: 0;
    padding: 20px 12px 17px;
}

.sensor-title {
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 19px;
}

.sensor-title h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
}

.sensor-icon {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 9px;
    font-size: 17px;
    font-weight: 800;
}

.temperature-icon {
    background: #fff0e5;
    color: #dc925a;
}

.humidity-icon {
    background: #e7f2ff;
    color: #659bd4;
}

.gas-icon {
    background: #eeeafa;
    color: #9582cb;
}

.donut {
    --progress: 0;
    --ring-color: #80bc9f;
    position: relative;
    display: grid;
    place-items: center;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    background: conic-gradient(
        from -90deg,
        var(--ring-color) calc(var(--progress) * 1%),
        #e7efeb 0
    );
    transition: background 800ms ease;
}

.donut::before {
    position: absolute;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background: #fff;
    content: "";
}

.donut-center {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
}

.donut-center strong {
    max-width: 82px;
    overflow: hidden;
    font-size: 25px;
    font-weight: 750;
    letter-spacing: -1px;
    text-overflow: ellipsis;
}

.donut-center span {
    color: #829188;
    font-size: 11px;
}

.sensor-note {
    margin: 14px 0 0;
    color: #87938c;
    font-size: 11px;
    text-align: center;
}

.signal-card,
.results-card {
    margin-bottom: 20px;
    padding: 22px 24px;
}

.status-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0;
}

.status-item {
    min-width: 0;
    padding: 15px;
    border: 1px solid #edf1ee;
    border-radius: 13px;
    background: #fafcfb;
}

.status-label,
.diagnostics-grid span {
    display: block;
    margin-bottom: 7px;
    color: #849189;
    font-size: 10px;
}

.status-item strong {
    display: block;
    font-size: 14px;
}

.status-item p {
    margin: 6px 0 0;
    color: #829087;
    font-size: 11px;
    line-height: 1.5;
}

.diagnostics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 16px 0;
    border-top: 1px solid #edf1ee;
    border-bottom: 1px solid #edf1ee;
}

.diagnostics-grid > div {
    min-width: 0;
}

.diagnostics-grid strong {
    display: block;
    overflow-wrap: anywhere;
    color: #40574a;
    font-size: 13px;
    font-weight: 700;
}

.disclaimer {
    margin: 14px 0 0;
    color: #849189;
    font-size: 11px;
    line-height: 1.6;
}

.coming-soon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #e7f3eb;
    color: #398565;
    font-size: 10px;
    font-weight: 750;
    white-space: nowrap;
}

/* ROOM EVALUATION */

.results-placeholder {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    min-height: 150px;
    margin: 12px 0 18px;
    padding: 22px;
    border: 1px dashed #d6e2da;
    border-radius: 14px;
    background: #fafcfb;
    text-align: center;
}

.placeholder-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-bottom: 10px;
    border-radius: 12px;
    background: #e7f3eb;
    color: #5b9b76;
    font-size: 19px;
}

.results-placeholder h3 {
    margin: 0;
    font-size: 13px;
}

.results-placeholder p {
    max-width: 520px;
    margin: 7px 0 0;
    color: #87938c;
    font-size: 11px;
    line-height: 1.6;
}

/* Highlighted interpretation panel */

.verbal-summary {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 12px 0 14px;
    padding: 24px;
    border: 1px solid #cfe3d5;
    border-left: 5px solid #398565;
    border-radius: 16px;
    background: linear-gradient(135deg, #f0f8f2 0%, #e8f3ec 100%);
    box-shadow: 0 5px 16px #315b4210;
    text-align: left;
}

.verbal-summary::after {
    position: absolute;
    top: -38px;
    right: -38px;
    width: 125px;
    height: 125px;
    border: 1px solid #d5e9dc;
    border-radius: 50%;
    background: #ffffff24;
    content: "";
    pointer-events: none;
}

.verbal-summary.good {
    border-color: #c8e2d1;
    border-left-color: #398565;
    background: linear-gradient(135deg, #f0f8f2, #e6f3eb);
}

.verbal-summary.fair {
    border-color: #dce6cb;
    border-left-color: #83a879;
    background: linear-gradient(135deg, #f5f8ef, #eef4e6);
}

.verbal-summary.moderate {
    border-color: #e9dfbd;
    border-left-color: #af9d43;
    background: linear-gradient(135deg, #fbf8ed, #f5f0df);
}

.verbal-summary.elevated {
    border-color: #f0d7c0;
    border-left-color: #d17e3f;
    background: linear-gradient(135deg, #fff7ef, #fbeee2);
}

.summary-heading {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.summary-eyebrow {
    display: block;
    margin-bottom: 6px;
    color: #71877a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.summary-condition {
    margin: 0;
    color: #398565;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.summary-condition.good {
    color: #398565;
}

.summary-condition.fair {
    color: #6f9666;
}

.summary-condition.moderate {
    color: #9d8732;
}

.summary-condition.elevated {
    color: #bd6e32;
}

.summary-status-mark {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 1px solid #cfe3d5;
    border-radius: 12px;
    background: #ffffffa8;
    color: #398565;
    font-size: 19px;
    font-weight: 800;
}

.verbal-summary.fair .summary-status-mark {
    color: #6f9666;
}

.verbal-summary.moderate .summary-status-mark {
    color: #9d8732;
}

.verbal-summary.elevated .summary-status-mark {
    color: #bd6e32;
}

.summary-interpretation {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #354b3e;
    font-size: 16px;
    font-weight: 450;
    line-height: 1.8;
    overflow-wrap: break-word;
}

.summary-action {
    position: relative;
    z-index: 1;
    margin-top: 20px;
    padding: 14px 16px;
    border: 1px solid #d8e6dc;
    border-radius: 12px;
    background: #ffffffa8;
}

.summary-action-label {
    display: block;
    margin-bottom: 6px;
    color: #547261;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.25px;
}

.summary-action p {
    margin: 0;
    color: #40574a;
    font-size: 14px;
    line-height: 1.7;
}

/* Compact supporting sensor readings */

.summary-readings {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    margin: 14px 0;
}

.summary-reading {
    min-width: 0;
    padding: 14px;
    border: 1px solid #e1eae4;
    border-radius: 12px;
    background: #fbfdfb;
    text-align: left;
}

.summary-reading span {
    display: block;
    margin-bottom: 7px;
    color: #7b8b81;
    font-size: 11px;
    font-weight: 650;
}

.summary-reading strong {
    display: block;
    color: #354b3e;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.summary-reading small {
    display: block;
    margin-top: 4px;
    color: #849189;
    font-size: 11px;
}

.summary-note {
    margin: 13px 0 0;
    padding: 0 2px;
    color: #78877e;
    font-size: 11px;
    line-height: 1.65;
    text-align: left;
}

.footer {
    padding: 4px 0;
    color: #9aa69f;
    font-size: 10px;
    text-align: center;
}

/* TABLET AND MOBILE */

@media (max-width: 650px) {
    .dashboard {
        width: min(100% - 24px, 520px);
        padding-top: 20px;
    }

    .header {
        margin-bottom: 26px;
    }

    .primary-action {
        align-items: stretch;
        flex-direction: column;
        padding: 19px;
    }

    .evaluate-button {
        width: 100%;
    }

    .condition-card,
    .response-card,
    .signal-card,
    .results-card {
        padding: 19px;
    }

    .sensor-grid {
        gap: 9px;
    }

    .sensor-card {
        padding: 15px 6px;
    }

    .sensor-title {
        gap: 5px;
        margin-bottom: 14px;
    }

    .sensor-title h3 {
        font-size: 11px;
    }

    .sensor-icon {
        width: 23px;
        height: 23px;
        font-size: 14px;
    }

    .donut {
        width: 96px;
        height: 96px;
    }

    .donut::before {
        width: 78px;
        height: 78px;
    }

    .donut-center strong {
        max-width: 60px;
        font-size: 19px;
    }

    .donut-center span {
        font-size: 9px;
    }

    .sensor-note {
        font-size: 10px;
    }

    .diagnostics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 16px;
    }

    .verbal-summary {
        padding: 20px;
    }

    .summary-interpretation {
        font-size: 15px;
        line-height: 1.75;
    }

    .summary-action p {
        font-size: 13px;
    }

    .summary-reading {
        padding: 12px;
    }
}

@media (max-width: 500px) {
    .summary-readings {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .summary-reading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .summary-reading span {
        margin: 0;
    }

    .summary-reading strong {
        text-align: right;
    }

    .summary-reading small {
        margin: 0;
        text-align: right;
    }

    .summary-heading {
        align-items: flex-start;
    }

    .summary-condition {
        font-size: 23px;
    }
}

@media (max-width: 380px) {
    .brand h1 {
        font-size: 18px;
    }

    .connection {
        font-size: 10px;
    }

    .sensor-grid {
        grid-template-columns: 1fr;
    }

    .sensor-card {
        padding: 18px;
    }

    .sensor-title {
        justify-content: flex-start;
    }

    .donut {
        width: 120px;
        height: 120px;
    }

    .donut::before {
        width: 98px;
        height: 98px;
    }

    .donut-center strong {
        font-size: 23px;
    }

    .status-grid {
        grid-template-columns: 1fr;
    }
}

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