/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* =========================================================
   ROOT
========================================================= */

:root {

    --ink: #10251e;

    --muted: #6a7e75;

    --paper: #f5f7f1;

    --white: #ffffff;

    --green: #219565;

    --dark-green: #0d5a40;

    --mint: #dff4e7;

    --line: #dce6df;

    --yellow: #f4b83f;

    --blue: #3279a7;

    --shadow:
        0 18px 45px
        rgba(20,54,40,.09);

}


/* =========================================================
   BODY
========================================================= */

html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    color: var(--ink);

    background:

        linear-gradient(
            135deg,
            #eef4ed 0%,
            #f8faf6 50%,
            #eaf3ee 100%
        );

    font-family:
        "IBM Plex Sans Thai",
        sans-serif;

}


/* =========================================================
   APP SHELL
========================================================= */

.app-shell {

    width:
        min(
            1180px,
            calc(100% - 32px)
        );

    margin: 26px auto;

    overflow: hidden;

    background:
        rgba(255,255,255,.74);

    border:
        1px solid
        rgba(255,255,255,.9);

    border-radius: 26px;

    box-shadow:
        0 28px 80px
        rgba(26,66,47,.14);

}


/* =========================================================
   TOPBAR
========================================================= */

.topbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    padding:
        22px 34px;

    border-bottom:
        1px solid
        var(--line);

    background:
        rgba(255,255,255,.82);

}


.brand {

    display: flex;

    align-items: center;

    gap: 12px;

    text-decoration: none;

    color: var(--ink);

}


.brand-mark {

    display: grid;

    place-items: center;

    width: 46px;
    height: 46px;

    border-radius: 14px;

    background:
        var(--ink);

    font-size: 24px;

    box-shadow:
        0 8px 18px
        rgba(16,37,30,.22);

}


.brand strong,
.brand small {

    display: block;

}


.brand strong {

    font:
        700 17px
        "Space Grotesk",
        sans-serif;

    letter-spacing: .03em;

}


.brand small {

    margin-top: 2px;

    color:
        var(--muted);

    font-size: 12px;

}


.topbar-actions {

    display: flex;

    align-items: center;

    gap: 10px;

}


.system-online,
.live-chip,
.manual-chip {

    display: flex;

    align-items: center;

    gap: 8px;

    font:
        700 11px
        "Space Grotesk",
        sans-serif;

    letter-spacing: .09em;

}


.system-online {

    padding:
        10px 13px;

    color:
        var(--dark-green);

    border:
        1px solid
        #bfe6ce;

    border-radius: 999px;

    background:
        #effbf3;

}


.system-online span,
.indicator,
.live-chip i {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        #36b870;

    box-shadow:
        0 0 0 4px
        rgba(54,184,112,.13);

}


.language-switch {

    display: flex;

    padding: 3px;

    border:
        1px solid
        var(--line);

    border-radius: 9px;

    background:
        #f2f6f2;

}


.lang-btn {

    padding:
        6px 8px;

    border: 0;

    border-radius: 6px;

    color:
        #71847a;

    background:
        transparent;

    cursor: pointer;

    font:
        700 10px
        "Space Grotesk",
        sans-serif;

}


.lang-btn.active {

    color: #fff;

    background:
        var(--ink);

}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.main-layout {

    display: grid;

    grid-template-columns:
        190px
        minmax(0,1fr);

}


.sidebar {

    display: flex;

    flex-direction: column;

    min-height: 100%;

    padding:
        27px 15px 20px;

    border-right:
        1px solid
        var(--line);

    background:
        #f7faf6;

}


.sidebar-title {

    margin:
        0 10px 13px;

    color:
        #82958a;

    font:
        700 9px
        "Space Grotesk",
        sans-serif;

    letter-spacing: .13em;

}


.side-nav {

    display: grid;

    gap: 5px;

}


.nav-link {

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        11px 10px;

    border-radius: 10px;

    color:
        #63766b;

    text-decoration: none;

    font:
        600 12px
        "Space Grotesk",
        sans-serif;

    transition:
        .18s ease;

}


.nav-link:hover {

    color:
        var(--dark-green);

    background:
        #eaf3ec;

    transform:
        translateX(2px);

}


.nav-link.active {

    color: #fff;

    background:
        var(--ink);

    box-shadow:
        0 8px 17px
        rgba(16,37,30,.16);

}


.nav-icon {

    display: grid;

    place-items: center;

    width: 19px;
    height: 19px;

    border-radius: 5px;

    font-size: 16px;

}


.nav-link:not(.active) .nav-icon {

    color:
        #3a9568;

    background:
        #e1f2e7;

}


.sidebar-help {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: auto;

    padding:
        12px 10px;

    border-top:
        1px solid
        var(--line);

}


.sidebar-help > span {

    display: grid;

    place-items: center;

    width: 25px;
    height: 25px;

    border-radius: 50%;

    color: #fff;

    background:
        #5c9675;

    font:
        700 13px
        "Space Grotesk",
        sans-serif;

}


.sidebar-help p {

    margin: 0;

}


.sidebar-help strong,
.sidebar-help small {

    display: block;

}


.sidebar-help strong {

    font-size: 10px;

}


.sidebar-help small {

    color:
        var(--muted);

    font-size: 9px;

}


.content-area {

    min-width: 0;

}


/* =========================================================
   AI HERO
========================================================= */

.ai-hero {

    position: relative;

    overflow: hidden;

    min-height: 560px;

    color: white;

    background:

        radial-gradient(
            circle at 20% 30%,
            rgba(34,197,94,.16),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            rgba(7,40,21,.98),
            rgba(10,55,30,.95)
        );

    border:
        1px solid
        rgba(74,222,128,.20);

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.12);

    transition:
        background .6s ease,
        border-color .6s ease,
        box-shadow .6s ease;

}


.hero-glow {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter:
        blur(90px);

}


.hero-glow-left {

    width: 430px;
    height: 430px;

    left: -150px;
    top: -170px;

    background:
        rgba(34,197,94,.11);

}


.hero-glow-right {

    width: 350px;
    height: 350px;

    right: -120px;
    bottom: -160px;

    background:
        rgba(74,222,128,.08);

}


.ai-content {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        320px
        1fr;

    gap: 55px;

    padding:
        55px 65px;

}


/* =========================================================
   AVATAR AREA
========================================================= */

.avatar-area {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}


/* =========================================================
   AVATAR RING
========================================================= */

.avatar-ring {

    position: relative;

    width: 220px;
    height: 220px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(34,197,94,.18),
            rgba(34,197,94,.04) 65%,
            transparent 70%
        );

    border:
        1px solid
        rgba(74,222,128,.28);

    box-shadow:
        0 0 45px
        rgba(34,197,94,.12);

    animation:
        avatarGlow 3s
        ease-in-out infinite;

    transition:
        border-color .5s ease,
        box-shadow .5s ease;

}


.avatar-ring::before {

    content: "";

    position: absolute;

    inset: -12px;

    border-radius: 50%;

    border:
        1px dashed
        rgba(74,222,128,.40);

    animation:
        rotate 14s
        linear infinite;

}


.avatar-ring::after {

    content: "";

    position: absolute;

    inset: -24px;

    border-radius: 50%;

    border:
        1px solid
        rgba(74,222,128,.08);

}


/* =========================================================
   MICRO:BIT AVATAR
========================================================= */

.microbit-avatar {

    position: relative;

    width: 175px;
    height: 150px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.microbit-board {

    position: relative;

    width: 150px;
    height: 135px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 24px;

    background:

        linear-gradient(
            145deg,
            #f0fdf4,
            #bbf7d0
        );

    border:
        4px solid
        #86efac;

    box-shadow:

        0 18px 35px
        rgba(0,0,0,.22),

        inset 0 -10px 18px
        rgba(34,197,94,.08);

    transition:

        background .5s ease,
        border-color .5s ease,
        box-shadow .5s ease,
        transform .3s ease;

}


.microbit-board:hover {

    transform:
        translateY(-5px)
        scale(1.03);

}


/* =========================================================
   LED MATRIX
========================================================= */

.led-matrix {

    width: 70px;
    height: 70px;

    display: grid;

    grid-template-columns:
        repeat(5,1fr);

    grid-template-rows:
        repeat(5,1fr);

    gap: 5px;

    padding: 8px;

    border-radius: 12px;

    background:
        rgba(20,83,45,.08);

}


.led {

    width: 8px;
    height: 8px;

    justify-self: center;

    align-self: center;

    border-radius: 50%;

    background:
        #bbf7d0;

    transition:
        background .4s ease,
        box-shadow .4s ease,
        transform .4s ease;

}


.led.on {

    background:
        #166534;

    box-shadow:
        0 0 7px
        rgba(22,101,52,.65);

}


/* =========================================================
   MICRO:BIT BUTTONS
========================================================= */

.micro-button {

    position: absolute;

    width: 21px;
    height: 21px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color:
        #166534;

    background:
        #dcfce7;

    border:
        2px solid
        #65a67f;

    font:
        700 8px
        "Space Grotesk",
        sans-serif;

    box-shadow:
        0 3px 5px
        rgba(0,0,0,.15);

}


.button-a {

    left: 17px;
    top: 52px;

}


.button-b {

    right: 17px;
    top: 52px;

}


/* =========================================================
   BOARD HOLES
========================================================= */

.board-hole {

    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        #d1fae5;

    border:
        2px solid
        #65a67f;

}


.hole-1 {

    top: 9px;
    left: 9px;

}


.hole-2 {

    top: 9px;
    right: 9px;

}


.hole-3 {

    bottom: 9px;
    left: 9px;

}


.hole-4 {

    bottom: 9px;
    right: 9px;

}


/* =========================================================
   SWEAT
========================================================= */

.sweat {

    position: absolute;

    opacity: 0;

    pointer-events: none;

    font-size: 17px;

    transition:
        opacity .4s ease,
        transform .5s ease;

}


.sweat-1 {

    right: 18px;
    top: 35px;

}


.sweat-2 {

    right: 3px;
    top: 65px;

}


.sweat-3 {

    left: 12px;
    top: 25px;

}


/* =========================================================
   AI STATUS
========================================================= */

.ai-status {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-top: 32px;

    color:
        #86efac;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: .08em;

    transition:
        color .4s ease;

}


.online-dot {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        #22c55e;

    box-shadow:
        0 0 12px
        #22c55e;

    animation:
        pulse 2s infinite;

}


/* =========================================================
   AI INFORMATION
========================================================= */

.ai-info {

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.ai-label {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    color:
        #4ade80;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .15em;

}


.ai-star {

    font-size: 18px;

    animation:
        starPulse 2s
        ease-in-out infinite;

}


.ai-title {

    margin-bottom: 25px;

    font-size:
        clamp(
            36px,
            5vw,
            58px
        );

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -.04em;

}


.ai-title span {

    background:

        linear-gradient(
            90deg,
            #f0fdf4,
            #86efac
        );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

}


.ai-message {

    max-width: 680px;

    margin-bottom: 30px;

    color:
        #d1d5db;

    font-size: 21px;

    line-height: 1.7;

}


.ai-message strong {

    color:
        #f0fdf4;

}


/* =========================================================
   AI DATA
========================================================= */

.ai-data {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

}


.data-pill {

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        12px 17px;

    border-radius: 14px;

    background:
        rgba(255,255,255,.045);

    border:
        1px solid
        rgba(255,255,255,.08);

    color:
        #cbd5e1;

    font-size: 14px;

}


.data-icon {

    font-size: 16px;

}


.data-name {

    color:
        #a7b5a9;

}


.data-pill strong {

    color:
        #f0fdf4;

}

.ai-light-level {

    display: inline-flex;

    align-items: center;

    padding: 4px 9px;

    border-radius: 999px;

    font: 700 11px "IBM Plex Sans Thai", sans-serif;

    white-space: nowrap;

    transition: color .25s ease, background .25s ease, border-color .25s ease;

}

.ai-light-level.is-waiting {
    color: #cbd5e1;
    border: 1px solid rgba(203, 213, 225, .18);
    background: rgba(203, 213, 225, .08);
}

.ai-light-level.is-low {
    color: #d7e9f8;
    border: 1px solid rgba(157, 202, 237, .25);
    background: rgba(102, 157, 199, .18);
}

.ai-light-level.is-good {
    color: #baf4ce;
    border: 1px solid rgba(95, 211, 135, .28);
    background: rgba(47, 160, 87, .2);
}

.ai-light-level.is-high {
    color: #ffe1a6;
    border: 1px solid rgba(255, 191, 85, .3);
    background: rgba(207, 126, 19, .22);
}


/* =========================================================
   AI FOOTER
========================================================= */

.ai-footer {

    position: absolute;

    right: 35px;

    bottom: 25px;

    z-index: 3;

    color:
        #4b6353;

    font-size: 11px;

    letter-spacing: .1em;

}


/* =========================================================
   WARM STATE
========================================================= */

.ai-hero.warm-state {

    background:

        radial-gradient(
            circle at 20% 30%,
            rgba(250,204,21,.20),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            rgba(55,48,10,.98),
            rgba(72,64,12,.95)
        );

    border-color:
        rgba(250,204,21,.35);

    box-shadow:
        0 30px 80px
        rgba(250,204,21,.08);

}


.ai-hero.warm-state .microbit-board {

    background:

        linear-gradient(
            145deg,
            #fefce8,
            #fde68a
        );

    border-color:
        #facc15;

    box-shadow:
        0 18px 40px
        rgba(250,204,21,.20);

}


.ai-hero.warm-state .led.on {

    background:
        #a16207;

    box-shadow:
        0 0 8px
        rgba(161,98,7,.65);

}


.ai-hero.warm-state .micro-button {

    color:
        #854d0e;

    background:
        #fef3c7;

    border-color:
        #d6a500;

}


.ai-hero.warm-state .avatar-ring {

    border-color:
        rgba(250,204,21,.35);

    box-shadow:
        0 0 55px
        rgba(250,204,21,.20);

}


.ai-hero.warm-state .avatar-ring::before {

    border-color:
        rgba(250,204,21,.40);

}


.ai-hero.warm-state .ai-label,
.ai-hero.warm-state .ai-status {

    color:
        #fde047;

}


.ai-hero.warm-state .sweat-1 {

    opacity: 1;

    transform:
        translateY(2px);

}


/* =========================================================
   HOT STATE
========================================================= */

.ai-hero.hot-state {

    background:

        radial-gradient(
            circle at 20% 30%,
            rgba(249,115,22,.24),
            transparent 38%
        ),

        linear-gradient(
            135deg,
            rgba(67,32,8,.98),
            rgba(82,39,10,.95)
        );

    border-color:
        rgba(249,115,22,.40);

    box-shadow:
        0 30px 80px
        rgba(249,115,22,.12);

}


.ai-hero.hot-state .microbit-board {

    background:

        linear-gradient(
            145deg,
            #fff7ed,
            #fed7aa
        );

    border-color:
        #fb923c;

    box-shadow:
        0 18px 45px
        rgba(249,115,22,.25);

}


.ai-hero.hot-state .led.on {

    background:
        #c2410c;

    box-shadow:
        0 0 10px
        rgba(194,65,12,.7);

}


.ai-hero.hot-state .micro-button {

    color:
        #9a3412;

    background:
        #ffedd5;

    border-color:
        #f97316;

}


.ai-hero.hot-state .avatar-ring {

    border-color:
        rgba(249,115,22,.45);

    box-shadow:
        0 0 65px
        rgba(249,115,22,.25);

}


.ai-hero.hot-state .avatar-ring::before {

    border-color:
        rgba(249,115,22,.45);

}


.ai-hero.hot-state .ai-label,
.ai-hero.hot-state .ai-status {

    color:
        #fb923c;

}


.ai-hero.hot-state .sweat-1,
.ai-hero.hot-state .sweat-2 {

    opacity: 1;

    transform:
        translateY(4px);

}


/* =========================================================
   DANGER STATE
========================================================= */

.ai-hero.danger-state {

    background:

        radial-gradient(
            circle at 20% 30%,
            rgba(239,68,68,.28),
            transparent 40%
        ),

        linear-gradient(
            135deg,
            rgba(65,15,18,.98),
            rgba(82,18,24,.96)
        );

    border-color:
        rgba(239,68,68,.50);

    box-shadow:
        0 30px 90px
        rgba(239,68,68,.16);

}


.ai-hero.danger-state .microbit-board {

    background:

        linear-gradient(
            145deg,
            #fff1f2,
            #fecdd3
        );

    border-color:
        #f87171;

    box-shadow:
        0 18px 55px
        rgba(239,68,68,.35);

}


.ai-hero.danger-state .led.on {

    background:
        #991b1b;

    box-shadow:
        0 0 12px
        rgba(153,27,27,.8);

}


.ai-hero.danger-state .micro-button {

    color:
        #991b1b;

    background:
        #ffe4e6;

    border-color:
        #ef4444;

}


.ai-hero.danger-state .avatar-ring {

    border-color:
        rgba(239,68,68,.55);

    box-shadow:
        0 0 75px
        rgba(239,68,68,.32);

}


.ai-hero.danger-state .avatar-ring::before {

    border-color:
        rgba(239,68,68,.50);

}


.ai-hero.danger-state .ai-label,
.ai-hero.danger-state .ai-status {

    color:
        #f87171;

}


.ai-hero.danger-state .ai-message {

    color:
        #fecaca;

}


.ai-hero.danger-state .online-dot {

    background:
        #ef4444;

    box-shadow:
        0 0 15px
        #ef4444;

}


.ai-hero.danger-state .sweat {

    opacity: 1;

    transform:
        translateY(7px);

}


/* =========================================================
   METRICS
========================================================= */

.metrics {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap: 18px;

    padding:
        25px 32px;

}


.metric-card,
.panel {

    background:
        var(--white);

    border:
        1px solid
        var(--line);

    border-radius: 20px;

    box-shadow:
        var(--shadow);

}


.metric-card {

    position: relative;

    overflow: hidden;

    padding: 22px;

}


.metric-card:after {

    position: absolute;

    right: -18px;

    bottom: -40px;

    width: 110px;

    height: 110px;

    border-radius: 50%;

    content: "";

    opacity: .7;

}


.temperature-card:after {

    background:
        #ffe9cb;

}


.humidity-card:after {

    background:
        #d7ecff;

}


.light-card:after {

    background:
        #fff0b9;

}


.metric-icon {

    display: grid;

    place-items: center;

    width: 41px;

    height: 41px;

    border-radius: 13px;

    font-size: 21px;

    background:
        #f3f6f2;

}


.metric-label {

    margin-top: 18px;

    color:
        #6c8176;

    font:
        700 11px
        "Space Grotesk",
        sans-serif;

    letter-spacing: .08em;

}


.metric-label span {

    display: block;

    margin-top: 3px;

    font:
        500 12px
        "IBM Plex Sans Thai",
        sans-serif;

    letter-spacing: 0;

}


.metric-value {

    margin:
        5px 0 13px;

    font:
        700 39px
        "Space Grotesk",
        sans-serif;

    letter-spacing:
        -.06em;

}


.metric-value em {

    margin-left: 4px;

    color:
        #70857a;

    font-size: 18px;

    font-style: normal;

    letter-spacing: 0;

}

.light-level-status {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 88px;

    margin-left: 7px;

    padding: 7px 13px;

    border: 1px solid transparent;

    border-radius: 999px;

    font: 800 13px "IBM Plex Sans Thai", sans-serif;

    letter-spacing: 0;

    white-space: nowrap;

    transition: color .25s ease, background .25s ease, box-shadow .25s ease;

}

.light-card .metric-value {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
}

.light-level-status::before {
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px rgba(255,255,255,.5);
    content: "";
}

.light-level-status.is-waiting {
    color: #6f7e76;
    border-color: #dce5df;
    background: #eef2ef;
}

.light-level-status.is-low {
    color: #426b8a;
    border-color: #bcd8eb;
    background: #e4f2fb;
    box-shadow: 0 7px 18px rgba(66, 107, 138, .2);
}

.light-level-status.is-good {
    color: #167344;
    border-color: #a9dfbc;
    background: #dcf6e5;
    box-shadow: 0 7px 18px rgba(22, 115, 68, .2);
}

.light-level-status.is-high {
    color: #a7550b;
    border-color: #f1c680;
    background: #ffedcc;
    box-shadow: 0 7px 18px rgba(167, 85, 11, .2);
}


.metric-footer {

    position: relative;

    z-index: 1;

    display: flex;

    align-items: center;

    gap: 7px;

    color:
        #71857a;

    font-size: 11px;

}


.pulse {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        #35b66f;

}


/* =========================================================
   DASHBOARD
========================================================= */

.dashboard-grid {

    display: grid;

    grid-template-columns:
        1.16fr
        .84fr;

    gap: 18px;

    padding:
        0 32px 25px;

}


.panel {

    padding: 25px;

}


.panel-heading {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 12px;

}


.panel h2 {

    margin: 0;

    font-size: 22px;

}


.panel-description {

    margin:
        12px 0 19px;

    color:
        var(--muted);

    font-size: 13px;

}


.live-chip {

    padding:
        7px 9px;

    color:
        var(--dark-green);

    border-radius: 7px;

    background:
        #edf9f1;

    font-size: 9px;

}


.live-chip i {

    width: 6px;
    height: 6px;

}


.manual-chip {

    padding:
        7px 9px;

    color:
        #9c6b08;

    border-radius: 7px;

    background:
        #fff6dc;

    font-size: 9px;

}


/* =========================================================
   HOUSE VISUAL
========================================================= */

.house-visual {

    position: relative;

    margin:
        23px 0 14px;

    padding-top: 36px;

}


.roof {

    position: absolute;

    z-index: 1;

    top: 0;

    left: 10%;

    width: 80%;

    height: 52px;

    clip-path:
        polygon(
            50% 0,
            100% 100%,
            0 100%
        );

    background:
        linear-gradient(
            135deg,
            #276c55,
            #0b3d2d
        );

}


.house-body {

    position: relative;

    min-height: 170px;

    overflow: hidden;

    border:
        4px solid
        #286b53;

    border-bottom-width:
        7px;

    border-radius:
        4px 4px 12px 12px;

    background:
        linear-gradient(
            #e8f4e9,
            #d6eddc
        );

}


.house-body:before {

    position: absolute;

    inset: 0;

    content: "";

    opacity: .25;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 38px,
            #5da178 39px 41px
        );

}


.fan {

    position: absolute;

    z-index: 1;

    top: 26px;

    color:
        #3b8d63;

    font-size: 30px;

}


.fan-left {

    left: 22px;

}


.fan-right {

    right: 22px;

}


.sensor-pin {

    position: absolute;

    z-index: 2;

    top: 22px;

    left: 50%;

    transform:
        translateX(-50%);

    text-align: center;

    color:
        #185b41;

}


.sensor-pin b {

    display: block;

    font-size: 25px;

    color:
        #f0ab2c;

}


.sensor-pin span {

    display: block;

    padding:
        2px 6px;

    border-radius: 3px;

    background:
        white;

    font:
        700 9px
        "Space Grotesk",
        sans-serif;

}


.chickens {

    position: absolute;

    z-index: 1;

    bottom: 35px;

    left: 50%;

    width: 100%;

    transform:
        translateX(-50%);

    text-align: center;

    font-size: 26px;

    letter-spacing: 4px;

}


.water-line {

    position: absolute;

    z-index: 2;

    right: 9%;

    bottom: 9px;

    left: 9%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14%;

    height: 14px;

    border-radius: 10px;

    background:
        #4d92b8;

}


.water-line i {

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background:
        #cceeff;

}


.water-line span {

    position: absolute;

    bottom: -18px;

    color:
        #417a99;

    font:
        700 8px
        "Space Grotesk",
        sans-serif;

    letter-spacing: .09em;

}


/* =========================================================
   OVERVIEW ITEMS
========================================================= */

.overview-items {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;

}


.overview-items > div {

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 10px;

    border:
        1px solid
        #e3ece5;

    border-radius: 11px;

}


.overview-dot {

    width: 8px;
    height: 8px;

    border-radius: 50%;

}


.green {

    background:
        #35b870;

}


.overview-items p {

    flex: 1;

    margin: 0;

    line-height: 1.22;

}


.overview-items strong,
.overview-items small {

    display: block;

}


.overview-items strong {

    font-size: 11px;

}


.overview-items small {

    color:
        var(--muted);

    font-size: 9px;

}


.overview-items b {

    color:
        #24935f;

    font:
        700 8px
        "Space Grotesk",
        sans-serif;

}


/* =========================================================
   CONTROLS
========================================================= */

.controls {

    display: grid;

    gap: 12px;

}


.control-card {

    display: grid;

    grid-template-columns:
        44px
        1fr;

    align-items: center;

    gap: 11px;

    padding: 14px;

    border:
        1px solid
        var(--line);

    border-radius: 14px;

}


.control-icon {

    display: grid;

    place-items: center;

    width: 44px;
    height: 44px;

    border-radius: 12px;

    font-size: 21px;

}


.feed-control .control-icon {

    background:
        #fff2d9;

}


.water-control .control-icon {

    background:
        #e0f2fd;

}


.light-control .control-icon {

    background:
        #fff5c9;

}


.fan-control .control-icon {

    background:
        #dff1e8;

}


.control-card h3,
.control-card p {

    margin: 0;

}


.control-card h3 {

    font-size: 16px;

}


.control-card p {

    color:
        var(--muted);

    font-size: 11px;

}


.action-btn {

    grid-column:
        1 / -1;

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    padding:
        10px 12px;

    border: 0;

    border-radius: 9px;

    color: white;

    cursor: pointer;

    font:
        600 13px
        "IBM Plex Sans Thai",
        sans-serif;

}


.action-btn b {

    font:
        600 17px
        "Space Grotesk",
        sans-serif;

}


.feed-control .action-btn {

    background:
        #c98b22;

}


.water-control .action-btn {

    background:
        #287ba5;

}


.switch-actions {

    display: grid;

    grid-column:
        1 / -1;

    grid-template-columns:
        1fr 1fr;

    gap: 8px;

}


.switch-btn {

    padding:
        10px 8px;

    border: 0;

    border-radius: 9px;

    color: #fff;

    cursor: pointer;

    font:
        600 12px
        "IBM Plex Sans Thai",
        sans-serif;

}


.on-btn {

    background:
        #25895e;

}


.off-btn {

    background:
        #74837b;

}


.safety-note {

    display: flex;

    gap: 8px;

    margin-top: 16px;

    padding:
        9px 10px;

    border-radius: 8px;

    color:
        #63766c;

    background:
        #f5f8f5;

    font-size: 10px;

}


.safety-note span {

    color:
        #c7891d;

    font-weight: bold;

}


/* =========================================================
   SCHEDULE
========================================================= */

.schedule-panel {

    margin:
        0 32px 25px;

    padding: 25px;

    border:
        1px solid
        var(--line);

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #f8fcf8,
            #eff8f1
        );

    box-shadow:
        var(--shadow);

}


.schedule-heading {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 18px;

}


.schedule-heading h2 {

    margin: 0;

    font-size: 22px;

}


.schedule-heading > div > p:last-child {

    margin:
        7px 0 0;

    color:
        var(--muted);

    font-size: 13px;

}


.schedule-badge {

    padding:
        8px 10px;

    border-radius: 8px;

    color:
        #306d51;

    background:
        #dcf2e4;

    font:
        700 9px
        "Space Grotesk",
        sans-serif;

    letter-spacing: .08em;

}


.schedule-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 14px;

    margin-top: 20px;

}


.schedule-card {

    padding: 18px;

    border:
        1px solid
        var(--line);

    border-radius: 15px;

    background:
        rgba(255,255,255,.88);

}


.schedule-card-title {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 16px;

}


.schedule-card-title > span {

    display: grid;

    place-items: center;

    width: 39px;
    height: 39px;

    border-radius: 11px;

    font-size: 20px;

}


.feed-schedule
.schedule-card-title > span {

    background:
        #fff0d2;

}


.water-schedule
.schedule-card-title > span {

    background:
        #dff2fc;

}


.schedule-card h3,
.schedule-card small {

    display: block;

    margin: 0;

}


.schedule-card h3 {

    font-size: 16px;

}


.schedule-card small {

    color:
        var(--muted);

    font-size: 11px;

}


.schedule-card label {

    display: block;

    margin-bottom: 6px;

    color:
        #60746a;

    font-size: 11px;

}


.schedule-card input {

    width: 100%;

    padding:
        11px 12px;

    border:
        1px solid
        #cbdcd1;

    border-radius: 9px;

    color:
        var(--ink);

    background:
        #fff;

    font:
        600 15px
        "Space Grotesk",
        sans-serif;

}


.time-list {

    display: grid;

    gap: 8px;

}

.time-list label {
    display:grid;
    grid-template-columns: 70px 1fr auto;
    align-items:center;
    gap:10px;
    margin:0;
    padding:10px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fff;
}

.time-list label > input {
    width:100%;
    min-width:0;
}

.schedule-count-selector {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    white-space:nowrap;
}

.schedule-count-selector > span {
    color:var(--muted);
    font-size:10px;
    margin-right:2px;
}

.schedule-count-btn {
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    padding:0;
    border:1px solid #cbdcd1;
    border-radius:8px;
    color:var(--dark-green);
    background:#f3f8f4;
    cursor:pointer;
    font:700 16px "Space Grotesk",sans-serif;
    transition:.18s;
}

.schedule-count-btn:hover {
    background:#dff1e6;
    transform:translateY(-1px);
}

.schedule-count-btn:active {
    transform:translateY(0);
}

.schedule-count-selector strong {
    display:grid;
    place-items:center;
    min-width:28px;
    height:30px;
    color:var(--ink);
    font:700 14px "Space Grotesk",sans-serif;
}


.time-list input {

    padding:
        8px 9px;

    font-size: 13px;

}


.schedule-btn {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    margin-top: 10px;

    padding:
        10px 12px;

    border: 0;

    border-radius: 9px;

    color: #fff;

    cursor: pointer;

    font:
        600 12px
        "IBM Plex Sans Thai",
        sans-serif;

}


.feed-schedule .schedule-btn {

    background:
        #bf8421;

}


.water-schedule .schedule-btn {

    background:
        #287da8;

}


.schedule-btn b {

    font:
        600 16px
        "Space Grotesk",
        sans-serif;

}


.schedule-hint {

    margin:
        10px 0 0;

    color:
        #7b8c83;

    font-size: 10px;

}




/* =========================================================
   FEED COUNT SELECTOR
========================================================= */

.feed-count-selector {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #f8faf8;
}

.count-label {
    color: #60746a;
    font-size: 11px;
    font-weight: 600;
}

.count-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.count-btn,
.schedule-count-btn {
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    color: var(--dark-green);
    background: #e2f1e7;
    cursor: pointer;
    font: 700 18px "Space Grotesk", sans-serif;
    transition: transform .18s, filter .18s, background .18s;
}

.count-btn {
    width: 34px;
    height: 34px;
}

.count-btn:hover,
.schedule-count-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.04);
    background: #d4ecdd;
}

.count-btn:active,
.schedule-count-btn:active {
    transform: translateY(0);
}

.feed-count-value {
    min-width: 28px;
    text-align: center;
    color: var(--ink);
    font: 700 18px "Space Grotesk", sans-serif;
}

.schedule-count-selector {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    margin-top: 7px;
    padding: 6px 8px;
    border: 1px solid #e0e9e2;
    border-radius: 8px;
    background: #f8faf8;
}

.schedule-count-selector span {
    margin-right: auto;
    color: #71847a;
    font-size: 10px;
}

.schedule-count-selector strong {
    min-width: 22px;
    text-align: center;
    color: var(--ink);
    font: 700 14px "Space Grotesk", sans-serif;
}

.schedule-count-btn {
    width: 25px;
    height: 25px;
    font-size: 14px;
}

@media (max-width: 600px) {
    .feed-count-selector {
        align-items: stretch;
        flex-direction: column;
    }

    .count-label {
        text-align: center;
    }

    .count-selector {
        justify-content: center;
    }
}


/* =========================================================
   SYSTEM STRIP
========================================================= */

.system-strip {

    display: grid;

    grid-template-columns:
        1.25fr
        repeat(3,1fr);

    margin:
        0 32px 27px;

    border:
        1px solid
        var(--line);

    border-radius: 16px;

    background:
        #f6f9f5;

}


.strip-intro,
.strip-item {

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 15px;

}


.strip-intro {

    border-right:
        1px solid
        var(--line);

}


.strip-icon {

    display: grid;

    place-items: center;

    width: 33px;
    height: 33px;

    border-radius: 10px;

    color: white;

    background:
        var(--ink);

}


.system-strip p {

    margin: 0;

    line-height: 1.15;

}


.system-strip strong,
.system-strip small {

    display: block;

}


.system-strip strong {

    font:
        700 10px
        "Space Grotesk",
        sans-serif;

    letter-spacing: .08em;

}


.system-strip small {

    margin-top: 3px;

    color:
        var(--muted);

    font-size: 9px;

}


.strip-item {

    border-right:
        1px solid
        var(--line);

}


.strip-item:last-child {

    border: 0;

}


.strip-item .indicator {

    flex: none;

    width: 7px;
    height: 7px;

}


.strip-item p {

    flex: 1;

    font-size: 11px;

    font-weight: 700;

}


.strip-item b {

    color:
        #239160;

    font:
        700 8px
        "Space Grotesk",
        sans-serif;

}


/* =========================================================
   FOOTER
========================================================= */

footer {

    display: flex;

    justify-content: center;

    gap: 9px;

    padding:
        0 20px 22px;

    color:
        #7a8d82;

    font-size: 10px;

}


footer span:first-child {

    color:
        #336d55;

    font:
        700 10px
        "Space Grotesk",
        sans-serif;

    letter-spacing: .08em;

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes rotate {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


@keyframes pulse {

    0%,
    100% {

        opacity: 1;

        transform:
            scale(1);

    }

    50% {

        opacity: .45;

        transform:
            scale(.8);

    }

}


@keyframes avatarGlow {

    0%,
    100% {

        box-shadow:
            0 0 45px
            rgba(34,197,94,.10);

    }

    50% {

        box-shadow:
            0 0 70px
            rgba(34,197,94,.24);

    }

}


@keyframes starPulse {

    0%,
    100% {

        opacity: .6;

        transform:
            scale(1);

    }

    50% {

        opacity: 1;

        transform:
            scale(1.2);

    }

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:850px) {


    .main-layout {

        grid-template-columns:
            145px
            minmax(0,1fr);

    }


    .sidebar {

        padding-right: 10px;

        padding-left: 10px;

    }


    .nav-link {

        padding:
            10px 8px;

        font-size: 11px;

    }


    .ai-content {

        grid-template-columns:
            1fr;

        gap: 35px;

        padding:
            50px 25px;

        text-align: center;

    }


    .avatar-area {

        order: 1;

    }


    .ai-info {

        order: 2;

        align-items: center;

    }


    .ai-label {

        justify-content: center;

    }


    .ai-message {

        font-size: 17px;

    }


    .ai-data {

        justify-content: center;

    }


    .dashboard-grid {

        grid-template-columns:
            1fr;

    }


    .system-strip {

        grid-template-columns:
            1fr 1fr;

    }


    .strip-intro {

        grid-column:
            1 / -1;

        border-right: 0;

        border-bottom:
            1px solid
            var(--line);

    }


}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:600px) {


    .app-shell {

        width: 100%;

        margin: 0;

        border: 0;

        border-radius: 0;

    }


    .topbar {

        padding:
            17px 18px;

    }


    .brand strong {

        font-size: 13px;

    }


    .brand small {

        font-size: 9px;

    }


    .brand-mark {

        width: 38px;
        height: 38px;

        font-size: 19px;

    }


    .system-online {

        padding: 8px;

        font-size: 8px;

    }


    .main-layout {

        display: block;

    }


    .sidebar {

        display: block;

        min-height: 0;

        padding:
            12px 13px;

        border-right: 0;

        border-bottom:
            1px solid
            var(--line);

        overflow-x: auto;

        white-space: nowrap;

    }


    .sidebar-title,
    .sidebar-help {

        display: none;

    }


    .side-nav {

        display: flex;

        width: max-content;

        gap: 6px;

    }


    .nav-link {

        padding:
            9px 10px;

        font-size: 10px;

    }


    .nav-icon {

        width: 16px;
        height: 16px;

        font-size: 13px;

    }


    .ai-hero {

        min-height: auto;

    }


    .ai-content {

        padding:
            40px 20px;

    }


    .avatar-ring {

        transform:
            scale(.88);

    }


    .ai-title {

        font-size: 38px;

    }


    .ai-message {

        font-size: 15px;

    }


    .metrics {

        grid-template-columns:
            1fr;

        gap: 12px;

        padding:
            16px;

    }


    .dashboard-grid {

        padding:
            0 16px 20px;

    }


    .panel {

        padding: 19px;

    }


    .overview-items {

        grid-template-columns:
            1fr;

    }


    .schedule-panel {

        margin:
            0 16px 20px;

        padding: 19px;

    }


    .schedule-heading {

        display: block;

    }


    .schedule-badge {

        display: inline-block;

        margin-top: 12px;

    }


    .schedule-grid {

        grid-template-columns:
            1fr;

    }


    .system-strip {

        grid-template-columns:
            1fr;

        margin:
            0 16px 20px;

    }


    .strip-intro,
    .strip-item {

        grid-column: auto;

        border-right: 0;

        border-bottom:
            1px solid
            var(--line);

    }


    .strip-item:last-child {

        border-bottom: 0;

    }


    footer {

        padding-bottom: 18px;

        font-size: 9px;

    }


    .chickens {

        font-size: 20px;

        letter-spacing: 1px;

    }

}

@media (max-width:600px) {
    .time-list label {
        grid-template-columns: 60px 1fr;
        gap:8px;
    }

    .schedule-count-selector {
        grid-column:1 / -1;
        justify-content:flex-end;
        padding-top:4px;
    }
}

/* =========================================================
   MICRO:BIT AI AVATAR - REALISTIC V2 DESIGN
   Final override for the AI avatar
========================================================= */

.avatar-ring {
    width: 300px;
    height: 300px;
}

.microbit-avatar {
    position: relative;
    width: 270px;
    height: 235px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: microbit-float 4s ease-in-out infinite;
}

@keyframes microbit-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.microbit-board {
    position: relative;
    width: 250px;
    height: 205px;
    border-radius: 17px 17px 25px 25px;
    overflow: visible;
    background:
        radial-gradient(circle at 50% 5%, rgba(255,255,255,.045), transparent 28%),
        linear-gradient(145deg, #272727 0%, #111111 55%, #060606 100%);
    border: 2px solid #3a3a3a;
    box-shadow:
        0 28px 50px rgba(0,0,0,.42),
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 -18px 28px rgba(0,0,0,.42);
    transform: rotate(-1deg);
    transform-origin: center;
    transition: border-color .4s ease, box-shadow .4s ease, transform .3s ease;
}

.microbit-board:hover {
    transform: translateY(-5px) rotate(0deg) scale(1.025);
    box-shadow:
        0 32px 58px rgba(0,0,0,.48),
        0 0 35px rgba(34,197,94,.13),
        inset 0 1px 0 rgba(255,255,255,.08);
}

/* Logo */
.microbit-logo {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    color: #eeeeee;
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    font: 700 13px "Space Grotesk", sans-serif;
    letter-spacing: -.04em;
    white-space: nowrap;
    opacity: .95;
}

.microbit-logo span {
    color: #ffffff;
    font-weight: 500;
}

/* Small electronic details */
.microbit-chip {
    position: absolute;
    top: 35px;
    width: 20px;
    height: 9px;
    border-radius: 2px;
    background: linear-gradient(145deg, #474747, #151515);
    border: 1px solid #555;
    box-shadow: 0 1px 2px rgba(0,0,0,.8);
    opacity: .85;
}

.chip-left { left: 27px; }
.chip-right { right: 27px; }

/* LED matrix */
.led-matrix {
    position: absolute;
    top: 45px;
    left: 50%;
    transform: translateX(-50%);
    width: 92px;
    height: 92px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 6px;
    padding: 11px;
    border-radius: 5px;
    background: #050505;
    border: 1px solid #2b2b2b;
    box-shadow: inset 0 0 16px rgba(0,0,0,.95), 0 2px 6px rgba(0,0,0,.45);
}

.led {
    width: 9px;
    height: 9px;
    justify-self: center;
    align-self: center;
    border-radius: 2px;
    background: #341012;
    box-shadow: inset 0 0 2px rgba(0,0,0,.8);
    transition: background .3s ease, box-shadow .3s ease, transform .25s ease;
}

.led.on {
    background: #ff3045;
    box-shadow: 0 0 5px rgba(255,48,69,.95), 0 0 12px rgba(255,48,69,.48);
    transform: scale(1.08);
}

/* A / B tactile buttons */
.micro-button {
    position: absolute;
    top: 70px;
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: transparent;
    background: radial-gradient(circle, #484848 0%, #292929 52%, #111111 100%);
    border: 2px solid #646464;
    box-shadow: 0 4px 8px rgba(0,0,0,.7), inset 0 1px 2px rgba(255,255,255,.2);
    z-index: 4;
}

.micro-button::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #4f4f4f, #171717 70%);
    border: 1px solid #707070;
    box-shadow: inset 0 1px 1px rgba(255,255,255,.1);
}

.micro-button span {
    position: absolute;
    z-index: 6;
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
    color: #aaaaaa;
    font: 700 9px "Space Grotesk", sans-serif;
}

.button-a { left: 27px; }
.button-b { right: 27px; }

/* Mounting holes */
.board-hole {
    position: absolute;
    top: 11px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #030303;
    border: 2px solid #5d5d5d;
    box-shadow: inset 0 0 3px rgba(0,0,0,.95), 0 0 0 1px #151515;
    z-index: 3;
}

.hole-1 { left: 12px; }
.hole-2 { right: 12px; }
.hole-3, .hole-4 { display: none; }

/* Gold edge connector */
.edge-connectors {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 47px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    z-index: 3;
    pointer-events: none;
}

.edge-pin {
    position: relative;
    width: 10px;
    height: 31px;
    border-radius: 2px 2px 7px 7px;
    background: linear-gradient(180deg, #ffe184 0%, #d8a728 58%, #9d6c0a 100%);
    border: 1px solid #f2ca54;
    box-shadow: inset 0 2px 2px rgba(255,255,255,.28);
}

.edge-pin-small {
    width: 8px;
    height: 26px;
    opacity: .82;
}

.edge-pin.big-pin {
    width: 30px;
    height: 39px;
    margin-left: 2px;
}

.edge-pin span {
    position: absolute;
    left: 50%;
    bottom: 7px;
    transform: translateX(-50%);
    color: #513900;
    font: 800 7px "Space Grotesk", sans-serif;
    white-space: nowrap;
}

/* Subtle printed traces */
.microbit-board::before {
    content: "";
    position: absolute;
    left: 17px;
    right: 17px;
    top: 146px;
    height: 1px;
    opacity: .35;
    background: repeating-linear-gradient(90deg, #626262 0 10px, transparent 10px 17px);
}

.microbit-board::after {
    content: "BBC micro:bit";
    position: absolute;
    left: 50%;
    top: 151px;
    transform: translateX(-50%);
    color: #707070;
    font: 600 7px "Space Grotesk", sans-serif;
    letter-spacing: .08em;
    white-space: nowrap;
}

/* Temperature / AI states: keep the physical board black, change glow + LEDs */
.ai-hero:not(.warm-state):not(.hot-state):not(.danger-state) .microbit-board {
    animation: normal-board 4s ease-in-out infinite;
}

@keyframes normal-board {
    0%, 100% { transform: rotate(-1deg) translateY(0); }
    50% { transform: rotate(1deg) translateY(-4px); }
}

.ai-hero.warm-state .microbit-board {
    background: linear-gradient(145deg, #272727, #111111 55%, #060606);
    border-color: #8c751b;
    box-shadow: 0 28px 50px rgba(0,0,0,.42), 0 0 32px rgba(250,204,21,.20);
    animation: warm-board 2.8s ease-in-out infinite;
}

@keyframes warm-board {
    0%, 100% { transform: rotate(-1deg) translateY(0); }
    50% { transform: rotate(1deg) translateY(-5px); }
}

.ai-hero.hot-state .microbit-board {
    background: linear-gradient(145deg, #272727, #111111 55%, #060606);
    border-color: #9a4a16;
    box-shadow: 0 28px 50px rgba(0,0,0,.42), 0 0 36px rgba(249,115,22,.22);
    animation: hot-board .9s ease-in-out infinite;
}

@keyframes hot-board {
    0%, 100% { transform: rotate(-2deg) translateX(0); }
    25% { transform: rotate(2deg) translateX(2px); }
    50% { transform: rotate(-2deg) translateX(-2px); }
    75% { transform: rotate(2deg) translateX(2px); }
}

.ai-hero.danger-state .microbit-board {
    background: linear-gradient(145deg, #272727, #111111 55%, #060606);
    border-color: #b32635;
    box-shadow: 0 28px 50px rgba(0,0,0,.42), 0 0 42px rgba(239,68,68,.28);
    animation: danger-board .35s linear infinite;
}

@keyframes danger-board {
    0% { transform: rotate(-3deg); }
    25% { transform: rotate(3deg); }
    50% { transform: rotate(-3deg); }
    75% { transform: rotate(3deg); }
    100% { transform: rotate(-3deg); }
}

.ai-hero.warm-state .led.on {
    background: #facc15;
    box-shadow: 0 0 8px rgba(250,204,21,.9), 0 0 17px rgba(250,204,21,.42);
}

.ai-hero.hot-state .led.on {
    background: #fb923c;
    box-shadow: 0 0 9px rgba(249,115,22,.95), 0 0 19px rgba(249,115,22,.45);
}

.ai-hero.danger-state .led.on {
    background: #ef4444;
    box-shadow: 0 0 10px rgba(239,68,68,.98), 0 0 22px rgba(239,68,68,.5);
}

/* Existing sweat effect */
.sweat {
    z-index: 10;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,.18));
}

/* Responsive avatar */
@media (max-width: 900px) {
    .avatar-ring {
        width: 275px;
        height: 275px;
    }

    .microbit-avatar {
        transform: scale(.92);
    }
}

@media (max-width: 600px) {
    .avatar-ring {
        width: 245px;
        height: 245px;
    }

    .microbit-avatar {
        width: 250px;
        height: 220px;
        transform: scale(.82);
    }
}

/* =========================================================
   CUTE MICRO:BIT AVATAR — integrated edition
========================================================= */
.microbit-avatar { width: 250px; height: 235px; display: flex; align-items: center; justify-content: center; }
.microbit-board { position: relative; width: 230px; height: 205px; border: 3px solid #79cda0; border-radius: 28px 28px 34px 34px; background: radial-gradient(circle at 50% 12%,#f0fff6 0,#c8f3d9 40%,#9ee2bc 100%); box-shadow: 0 18px 35px rgba(18,59,36,.31), inset 0 2px rgba(255,255,255,.8), inset 0 -5px rgba(88,185,132,.15); transition: .3s; animation: cuteBoardFloat 3.2s ease-in-out infinite; }
.microbit-board:hover { transform: translateY(-7px) rotate(-1deg) scale(1.03); box-shadow: 0 25px 45px rgba(18,59,36,.38), 0 0 35px rgba(134,239,172,.5); }
.microbit-logo { top: 13px; color: #28754c; font-size: 13px; font-weight: 900; text-shadow: 0 1px #fff; }
.microbit-logo span { color: #28754c; }
.board-hole { top: 14px; width: 11px; height: 11px; border: 2px solid #63b789; background: #eafff1; box-shadow: inset 0 1px 2px rgba(40,117,76,.33); }
.hole-1 { left: 15px; } .hole-2 { right: 15px; }
.microbit-board .led-matrix { position: absolute; top: 42px; left: 50%; transform: translateX(-50%); width: 142px; height: 112px; padding: 12px 16px; display: grid; grid-template-columns: repeat(9,1fr); grid-template-rows: repeat(9,1fr); gap: 3px; border: 2px solid #84cfa4; border-radius: 22px; background: linear-gradient(145deg,#f8fffb,#e9faef); box-shadow: inset 0 3px 10px rgba(88,167,123,.15), 0 6px 15px rgba(40,117,76,.14); }
.microbit-board .led { width: 7px; height: 7px; place-self: center; border-radius: 50%; background: #cfe9da; box-shadow: inset 0 1px 1px rgba(121,185,149,.33); transform: none; }
.microbit-board .led.on { background: #ff718c; box-shadow: 0 0 4px #ff8ca1, 0 0 9px #ffb3c1; animation: cuteLedPulse 2.2s ease-in-out infinite; }
.cute-cheek { position: absolute; top: 111px; width: 22px; height: 10px; border-radius: 50%; background: #ff9eb0; opacity: .72; filter: blur(.3px); }
.cute-cheek-left { left: 38px; } .cute-cheek-right { right: 38px; }
.cute-leaf { position: absolute; z-index: 8; pointer-events: none; }
.cute-leaf-one { top: -20px; left: 28px; font-size: 27px; transform: rotate(-12deg); filter: drop-shadow(0 4px 3px rgba(23,72,43,.2)); }
.cute-leaf-two { top: 24px; right: 32px; color: #fff; font-size: 15px; animation: cuteSparkle 1.8s ease-in-out infinite; }
.edge-connectors { left: 11px; right: 11px; }
.edge-pin { filter: saturate(.82) brightness(1.08); }
@keyframes cuteBoardFloat { 50% { transform: translateY(-5px); } }
@keyframes cuteLedPulse { 50% { filter: brightness(1.25); transform: scale(1.12); } }
@keyframes cuteSparkle { 50% { transform: scale(1.35) rotate(15deg); opacity: .55; } }

/* Avatar colours follow the four existing AI states. */
.ai-hero:not(.warm-state):not(.hot-state):not(.danger-state) .avatar-ring {
    background: radial-gradient(circle, rgba(187,247,208,.52) 0, rgba(134,239,172,.20) 54%, transparent 72%);
    border-color: rgba(74,222,128,.42);
    box-shadow: 0 0 65px rgba(74,222,128,.22);
}
.ai-hero:not(.warm-state):not(.hot-state):not(.danger-state) .microbit-board {
    background: radial-gradient(circle at 50% 12%,#f0fff6 0,#c8f3d9 40%,#9ee2bc 100%);
    border-color: #79cda0;
    box-shadow: 0 18px 35px rgba(18,59,36,.31), 0 0 28px rgba(74,222,128,.20), inset 0 2px rgba(255,255,255,.8);
}
.ai-hero.warm-state .avatar-ring {
    background: radial-gradient(circle, rgba(254,249,195,.68) 0, rgba(253,224,71,.23) 54%, transparent 72%);
    border-color: rgba(250,204,21,.52);
    box-shadow: 0 0 68px rgba(250,204,21,.25);
}
.ai-hero.warm-state .microbit-board {
    background: radial-gradient(circle at 50% 12%,#fffef2 0,#fff4b8 42%,#f4d96b 100%);
    border-color: #e2bd3c;
    box-shadow: 0 18px 38px rgba(113,82,8,.24), 0 0 30px rgba(250,204,21,.25), inset 0 2px rgba(255,255,255,.8);
}
.ai-hero.warm-state .microbit-board .led-matrix { background: linear-gradient(145deg,#fffef7,#fff8d7); border-color:#e6cb60; }
.ai-hero.hot-state .avatar-ring {
    background: radial-gradient(circle, rgba(255,237,213,.72) 0, rgba(251,146,60,.25) 54%, transparent 72%);
    border-color: rgba(249,115,22,.55);
    box-shadow: 0 0 72px rgba(249,115,22,.28);
}
.ai-hero.hot-state .microbit-board {
    background: radial-gradient(circle at 50% 12%,#fff8f0 0,#ffd5ad 42%,#f6a55e 100%);
    border-color: #ed8a3b;
    box-shadow: 0 18px 40px rgba(124,52,10,.27), 0 0 34px rgba(249,115,22,.28), inset 0 2px rgba(255,255,255,.78);
}
.ai-hero.hot-state .microbit-board .led-matrix { background: linear-gradient(145deg,#fffaf5,#ffead5); border-color:#efa56a; }
.ai-hero.danger-state .avatar-ring {
    background: radial-gradient(circle, rgba(255,228,230,.78) 0, rgba(248,113,113,.28) 54%, transparent 72%);
    border-color: rgba(239,68,68,.62);
    box-shadow: 0 0 78px rgba(239,68,68,.34);
}
.ai-hero.danger-state .microbit-board {
    background: radial-gradient(circle at 50% 12%,#fff5f6 0,#ffc7cd 42%,#f27f8c 100%);
    border-color: #e75b69;
    box-shadow: 0 18px 44px rgba(112,20,31,.30), 0 0 40px rgba(239,68,68,.35), inset 0 2px rgba(255,255,255,.76);
}
.ai-hero.danger-state .microbit-board .led-matrix { background: linear-gradient(145deg,#fff8f8,#ffe0e3); border-color:#ed8d97; }

/* Facial expressions controlled by the existing state classes. */
.state-face { position: absolute; inset: 12px 16px; display: none; grid-template-columns: repeat(9,1fr); grid-template-rows: repeat(9,1fr); gap: 3px; pointer-events: none; }
.state-face i { grid-row: var(--r); grid-column: var(--c); width: 7px; height: 7px; place-self: center; border-radius: 50%; background: currentColor; box-shadow: 0 0 4px currentColor, 0 0 9px currentColor; animation: cuteLedPulse 2.2s ease-in-out infinite; }
.ai-hero.warm-state .led-matrix > .led.on,
.ai-hero.hot-state .led-matrix > .led.on,
.ai-hero.danger-state .led-matrix > .led.on { background: #cfe9da; box-shadow: inset 0 1px 1px rgba(121,185,149,.33); animation: none; }
.ai-hero.warm-state .warm-face { display: grid; color: #e6ae16; }
.ai-hero.hot-state .hot-face { display: grid; color: #f0782c; }
.ai-hero.danger-state .danger-face { display: grid; color: #e84155; }
.ai-hero.danger-state .cute-cheek { opacity: .25; background: #b7a8ac; }
.microbit-board { height: 215px; }
.microbit-avatar { height: 235px; }

/* Small A/B controls, kept clear of the LED face. */
.cute-button { position: absolute; top: 82px; z-index: 7; width: 27px; text-align: center; color: #28754c; font: 900 9px "Space Grotesk",sans-serif; }
.cute-button-a { left: 12px; } .cute-button-b { right: 12px; }
.cute-button i { display: block; width: 25px; height: 25px; margin: 0 auto 4px; border: 2px solid #69b88a; border-radius: 50%; background: radial-gradient(circle at 38% 30%,#fff,#d9f5e4 56%,#91d5ad); box-shadow: 0 4px 7px rgba(52,118,80,.24), inset 0 2px rgba(255,255,255,.9); }

/* Pastel micro:bit edge connector. */
.cute-edge-connectors { position: absolute; left: 13px; right: 13px; bottom: 0; height: 43px; display: flex; align-items: flex-end; gap: 5px; z-index: 6; }
.cute-edge-pin { position: relative; flex: 1; height: 34px; border: 1px solid #62b487; border-radius: 5px 5px 12px 12px; background: linear-gradient(180deg,#eafff1,#a9e5c0 58%,#79cda0); box-shadow: inset 0 2px rgba(255,255,255,.7); transition: background .45s ease,border-color .45s ease,box-shadow .45s ease; }
.cute-edge-pin span { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); color: #286b49; font: 900 8px "Space Grotesk",sans-serif; white-space: nowrap; }

.ai-hero.warm-state .cute-button { color: #8a6810; }
.ai-hero.warm-state .cute-button i { border-color: #d8b63d; background: radial-gradient(circle at 38% 30%,#fffef4,#fff2aa 58%,#e7c74b); box-shadow: 0 4px 8px rgba(138,104,16,.24),inset 0 2px #fff; }
.ai-hero.warm-state .cute-edge-pin { border-color: #d5ae27; background: linear-gradient(#fffbe6,#f6df75 58%,#dbb93d); }
.ai-hero.warm-state .cute-edge-pin span { color: #76590d; }

.ai-hero.hot-state .cute-button { color: #a84a13; }
.ai-hero.hot-state .cute-button i { border-color: #e98039; background: radial-gradient(circle at 38% 30%,#fff9f2,#ffd1a8 58%,#f19850); box-shadow: 0 4px 8px rgba(168,74,19,.26),inset 0 2px #fff; }
.ai-hero.hot-state .cute-edge-pin { border-color: #e47d38; background: linear-gradient(#fff6eb,#ffc28d 58%,#ed8d47); }
.ai-hero.hot-state .cute-edge-pin span { color: #8e3b0e; }

.ai-hero.danger-state .cute-button { color: #a52e3d; }
.ai-hero.danger-state .cute-button i { border-color: #dc5969; background: radial-gradient(circle at 38% 30%,#fff7f8,#ffbdc5 58%,#eb7785); box-shadow: 0 4px 8px rgba(165,46,61,.29),inset 0 2px #fff; }
.ai-hero.danger-state .cute-edge-pin { border-color: #d94f60; background: linear-gradient(#fff2f3,#ffaeb8 58%,#e96c7b); }
.ai-hero.danger-state .cute-edge-pin span { color: #8f2432; }

/* =========================================================
   MICRO:BIT REFERENCE LOOK
========================================================= */
.ai-hero { --board-accent:#3fd7f4; --led-color:#ff5577; --led-glow:rgba(255,56,101,.72); }
.ai-hero.warm-state { --board-accent:#f6cf42; --led-color:#ffd34d; --led-glow:rgba(250,204,21,.72); }
.ai-hero.hot-state { --board-accent:#ff913d; --led-color:#ff8a3d; --led-glow:rgba(249,115,22,.78); }
.ai-hero.danger-state { --board-accent:#ff5366; --led-color:#ff4057; --led-glow:rgba(239,68,68,.82); }

.microbit-avatar { width:290px; height:255px; }
.microbit-board,
.ai-hero:not(.warm-state):not(.hot-state):not(.danger-state) .microbit-board,
.ai-hero.warm-state .microbit-board,
.ai-hero.hot-state .microbit-board,
.ai-hero.danger-state .microbit-board {
    width:270px; height:225px;
    overflow:visible;
    border:2px solid #282828;
    border-radius:26px 26px 24px 24px;
    background:
        linear-gradient(135deg,var(--board-accent) 0 48px,transparent 49px) top left/76px 76px no-repeat,
        linear-gradient(135deg,var(--board-accent) 0 25px,transparent 26px) 84px 0/45px 45px no-repeat,
        #101010;
    box-shadow:0 23px 42px rgba(0,0,0,.45),0 0 32px color-mix(in srgb,var(--board-accent) 25%,transparent),inset 0 1px rgba(255,255,255,.08);
}
.microbit-logo { top:16px; width:51px; height:30px; border:7px solid var(--board-accent); border-radius:18px; color:transparent!important; font-size:0; background:#111; box-shadow:0 0 9px color-mix(in srgb,var(--board-accent) 28%,transparent); }
.microbit-logo span { display:none; }
.microbit-logo::before,.microbit-logo::after { content:""; position:absolute; top:7px; width:7px; height:7px; border-radius:50%; background:var(--board-accent); }
.microbit-logo::before { left:9px; }.microbit-logo::after { right:9px; }
.board-hole { display:none; }

.microbit-board .led-matrix,
.ai-hero.warm-state .microbit-board .led-matrix,
.ai-hero.hot-state .microbit-board .led-matrix,
.ai-hero.danger-state .microbit-board .led-matrix {
    top:52px; width:132px; height:116px; padding:8px 11px; gap:3px;
    border:0; border-radius:8px; background:#101010; box-shadow:none;
}
.microbit-board .led { width:8px; height:13px; border-radius:3px; background:#1d1d1d; box-shadow:inset 0 1px rgba(255,255,255,.025); }
.microbit-board .led.on { background:var(--led-color); box-shadow:0 0 5px var(--led-color),0 0 14px var(--led-glow); }
.state-face { inset:8px 11px; }
.state-face i { width:8px; height:13px; border-radius:3px; background:var(--led-color); color:var(--led-color); box-shadow:0 0 5px var(--led-color),0 0 14px var(--led-glow); }
.ai-hero.warm-state .warm-face,.ai-hero.hot-state .hot-face,.ai-hero.danger-state .danger-face { color:var(--led-color); }

.cute-button { top:83px; width:42px; color:var(--board-accent); }
.cute-button-a { left:12px; }.cute-button-b { right:12px; }
.cute-button i,
.ai-hero.warm-state .cute-button i,
.ai-hero.hot-state .cute-button i,
.ai-hero.danger-state .cute-button i { position:relative; width:34px; height:34px; border:0; border-radius:3px; background:#a9a9a9; box-shadow:0 2px 4px #000; }
.cute-button i::before { content:""; position:absolute; inset:7px; border-radius:50%; background:#161616; box-shadow:inset 0 2px 4px #000; }
.cute-button i::after { content:""; position:absolute; width:6px; height:6px; left:3px; top:3px; border-radius:50%; background:#865b5f; box-shadow:22px 0 #865b5f,0 22px #865b5f,22px 22px #865b5f; }
.cute-button span { display:grid; place-items:center; position:absolute; top:39px; width:34px; height:25px; color:#0d0d0d; background:var(--board-accent); font-size:14px; font-weight:900; clip-path:polygon(100% 0,100% 100%,0 100%); }
.cute-button-a span { right:0; }.cute-button-b span { left:0; clip-path:polygon(0 0,100% 100%,0 100%); }
.cute-button-b span { top:-31px; }

.cute-edge-connectors { left:0; right:0; bottom:-1px; height:54px; padding:0 8px; gap:9px; border-radius:0 0 22px 22px; background:repeating-linear-gradient(90deg,#d9b537 0 5px,#111 5px 7px); overflow:hidden; }
.cute-edge-pin,
.ai-hero.warm-state .cute-edge-pin,
.ai-hero.hot-state .cute-edge-pin,
.ai-hero.danger-state .cute-edge-pin { height:53px; border:0; border-radius:0 0 9px 9px; background:#d9b537; box-shadow:none; }
.cute-edge-pin::before { content:""; position:absolute; top:-4px; left:50%; width:32px; height:32px; transform:translateX(-50%); border:5px solid #d9b537; border-radius:50%; background:#101010; }
.cute-edge-pin span,
.ai-hero.warm-state .cute-edge-pin span,
.ai-hero.hot-state .cute-edge-pin span,
.ai-hero.danger-state .cute-edge-pin span { z-index:2; bottom:7px; color:#111; font-size:11px; }
.cute-leaf,.cute-cheek { display:none; }

/* Keep every LED inside its own grid cell, including frown/dead faces. */
.microbit-board .led,
.state-face i { width:7px; height:8px; border-radius:2px; }
.microbit-board .led.on,
.state-face i { animation:referenceLedPulse 2.2s ease-in-out infinite; }
@keyframes referenceLedPulse {
    0%,100% { filter:brightness(1); }
    50% { filter:brightness(1.28); }
}

/* Hide the normal smile completely when another state face is active. */
.ai-hero.warm-state .led-matrix > .led.on,
.ai-hero.hot-state .led-matrix > .led.on,
.ai-hero.danger-state .led-matrix > .led.on {
    background:#1d1d1d;
    box-shadow:inset 0 1px rgba(255,255,255,.025);
    animation:none;
    filter:none;
}

/* Narrow gold fingers between the five large edge pins. */
.cute-edge-connectors { padding:0 8px; gap:0; background:#101010; }
.cute-edge-pin { flex:1 1 0; min-width:0; }
.cute-pin-stripes {
    align-self:flex-end;
    flex:none;
    height:38px;
    display:flex;
    align-items:stretch;
    justify-content:center;
    gap:2px;
    background:#101010;
}
.cute-pin-stripes.stripes-4 { width:26px; }
.cute-pin-stripes.stripes-5 { width:33px; }
.cute-pin-stripes i { display:block; flex:0 0 5px; height:38px; background:linear-gradient(180deg,#e2bf45,#d1aa2e); border-top:1px solid #efd568; box-shadow:inset 1px 0 rgba(255,255,255,.15); }

/* =========================================================
   TOP HOME NAVIGATION
========================================================= */
.main-layout { display:block; }
.sidebar {
    position:sticky;
    top:0;
    z-index:100;
    display:flex;
    min-height:0;
    padding:10px clamp(18px,4vw,54px);
    border-right:0;
    border-bottom:1px solid var(--line);
    background:rgba(247,250,246,.94);
    box-shadow:0 8px 24px rgba(16,37,30,.08);
    backdrop-filter:blur(14px);
}
.side-nav { display:flex; width:100%; max-width:1180px; margin:0 auto; justify-content:center; gap:8px; }
.sidebar .nav-link {
    width:auto;
    min-width:112px;
    justify-content:center;
    padding:10px 20px;
    border-radius:12px;
    font-size:12px;
}
.sidebar .nav-link:hover { transform:translateY(-1px); }
.content-area { width:100%; }
@media (max-width:600px) {
    .sidebar { padding:9px 14px; overflow:visible; }
    .side-nav { width:100%; }
    .sidebar .nav-link { width:100%; min-width:0; }
}

/* Refined edge-pin proportions: smaller main pads, even rhythm. */
.cute-edge-connectors { justify-content:space-between; }
.cute-edge-pin { flex:0 0 24px; width:24px; }
.cute-edge-pin::before { top:-2px; width:22px; height:22px; border-width:4px; }
.cute-edge-pin span,
.ai-hero.warm-state .cute-edge-pin span,
.ai-hero.hot-state .cute-edge-pin span,
.ai-hero.danger-state .cute-edge-pin span { bottom:6px; font-size:9px; }

/* =========================================================
   SENSOR PRESENTATION POPUPS
========================================================= */
.sensor-detail-btn { display:inline-flex; align-items:center; justify-content:center; align-self:flex-start; margin-top:12px; padding:8px 12px; border:1px solid rgba(47,143,94,.22); border-radius:10px; color:#206c47; background:#eaf8ef; font-size:10px; font-weight:800; text-decoration:none; transition:.2s ease; }
.sensor-detail-btn:hover { transform:translateY(-2px); color:#fff; background:#287c52; box-shadow:0 8px 18px rgba(40,124,82,.2); }
.sensor-popup { position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:24px; }
.sensor-popup:target { display:flex; }
.sensor-popup-backdrop { position:absolute; inset:0; background:rgba(5,20,13,.72); backdrop-filter:blur(9px); }
.sensor-popup-card { position:relative; z-index:1; display:grid; grid-template-columns:minmax(240px,.82fr) minmax(320px,1.18fr); width:min(900px,94vw); max-height:88vh; overflow:auto; border:1px solid rgba(128,205,159,.45); border-radius:26px; background:#f8fff9; box-shadow:0 32px 90px rgba(0,0,0,.38); }
.sensor-popup-image { min-height:390px; padding:24px; display:grid; place-items:center; background:linear-gradient(145deg,#dff5e7,#bde6cc); }
.sensor-popup-image img { display:block; width:100%; max-height:380px; object-fit:contain; border-radius:18px; background:#fff; box-shadow:0 18px 38px rgba(24,85,50,.18); }
.sensor-popup-content { padding:clamp(28px,5vw,52px); color:#153f2c; }
.sensor-popup-kicker { color:#2d9561; font-size:10px; font-weight:900; letter-spacing:.14em; }
.sensor-popup-content h2 { margin:8px 0 14px; color:#10251e; font:800 clamp(32px,5vw,52px)/1 "Space Grotesk",sans-serif; }
.sensor-popup-content p { margin:0; color:#587064; font-size:14px; line-height:1.75; }
.sensor-popup-close { position:absolute; top:14px; right:14px; z-index:3; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; color:#244c38; background:rgba(255,255,255,.9); box-shadow:0 5px 16px rgba(0,0,0,.13); font-size:24px; line-height:1; text-decoration:none; }
.sensor-spec-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:24px 0; }
.sensor-spec-grid div { min-width:0; padding:13px; border:1px solid #d9eee1; border-radius:13px; background:#fff; }
.sensor-spec-grid small,.sensor-spec-grid strong { display:block; }.sensor-spec-grid small { margin-bottom:5px; color:#7b9185; font-size:9px; }.sensor-spec-grid strong { color:#24573e; font-size:11px; line-height:1.4; }
.sensor-data-flow { display:flex; flex-wrap:wrap; align-items:center; gap:7px; padding:13px; border-radius:13px; background:#143c2a; color:#eafff1; font-size:9px; font-weight:800; }.sensor-data-flow span { padding:5px 7px; border-radius:7px; background:rgba(255,255,255,.1); }.sensor-data-flow b { color:#68e69b; }
@media(max-width:700px) { .sensor-popup-card { grid-template-columns:1fr; }.sensor-popup-image { min-height:220px; }.sensor-popup-image img { max-height:230px; }.sensor-popup-content { padding:28px 22px; }.sensor-spec-grid { grid-template-columns:1fr; } }

.control-detail-btn { display:inline-flex; align-items:center; justify-content:center; width:max-content; margin-top:10px; padding:7px 11px; border:1px solid rgba(47,143,94,.22); border-radius:9px; color:#206c47; background:#edf8f1; font-size:9px; font-weight:800; text-decoration:none; transition:.2s ease; }
.control-detail-btn:hover { transform:translateY(-2px); color:#fff; background:#287c52; box-shadow:0 7px 16px rgba(40,124,82,.18); }
.device-popup-visual { min-height:390px; padding:34px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#f2fff7; background:radial-gradient(circle at 50% 35%,#397b58,#153c29 65%,#0b281a); text-align:center; }
.device-popup-visual span { display:grid; place-items:center; width:150px; height:150px; margin-bottom:24px; border:1px solid rgba(255,255,255,.22); border-radius:38px; background:rgba(255,255,255,.12); box-shadow:0 24px 45px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.18); font-size:76px; }
.device-popup-visual strong { font:800 18px "Space Grotesk",sans-serif; letter-spacing:.08em; }.device-popup-visual small { margin-top:7px; color:#aee5c5; font-size:11px; }
.water-visual { background:radial-gradient(circle at 50% 35%,#378ba4,#17485a 65%,#0c2a35); }.light-visual { background:radial-gradient(circle at 50% 35%,#b48b2e,#544017 65%,#2b210d); }.fan-visual { background:radial-gradient(circle at 50% 35%,#547f96,#263f4d 65%,#132731); }
@media(max-width:700px) { .device-popup-visual { min-height:220px; }.device-popup-visual span { width:105px;height:105px;margin-bottom:16px;border-radius:28px;font-size:54px; } }

.water-device-gallery { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:12px; align-items:center; padding:20px; }
.water-device-gallery figure { min-width:0; margin:0; padding:10px; border:1px solid rgba(255,255,255,.22); border-radius:17px; background:rgba(255,255,255,.12); box-shadow:0 14px 28px rgba(0,0,0,.18); }
.water-device-gallery img { display:block; width:100%; height:205px; object-fit:contain; border-radius:11px; background:#fff; }
.water-device-gallery figcaption { margin-top:9px; color:#eaffff; font:800 10px "Space Grotesk",sans-serif; letter-spacing:.05em; text-align:center; }
.water-device-gallery > b { color:#8fe8ff; font-size:24px; }
@media(max-width:700px) { .water-device-gallery { grid-template-columns:1fr; }.water-device-gallery img { height:170px; }.water-device-gallery > b { transform:rotate(90deg); text-align:center; } }
.light-device-gallery > b { color:#ffe17a; }

/* =========================================================
   SCHEDULE PRESENTATION POPUPS
========================================================= */
.schedule-detail-btn { display:inline-flex; align-items:center; justify-content:center; width:100%; margin-top:12px; padding:9px 12px; border:1px solid rgba(47,143,94,.22); border-radius:10px; color:#206c47; background:#edf8f1; font-size:9px; font-weight:800; text-decoration:none; transition:.2s ease; }
.schedule-detail-btn:hover { transform:translateY(-2px); color:#fff; background:#287c52; box-shadow:0 8px 18px rgba(40,124,82,.18); }
.schedule-popup-visual { min-height:430px; padding:34px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#effff5; background:radial-gradient(circle at 50% 30%,#4a8d64,#183f2a 62%,#0b2618); text-align:center; }
.schedule-big-icon { display:grid; place-items:center; width:145px; height:145px; margin-bottom:22px; border:1px solid rgba(255,255,255,.22); border-radius:42px; background:rgba(255,255,255,.12); box-shadow:0 24px 45px rgba(0,0,0,.2); font-size:74px; }
.schedule-popup-visual > strong { font:800 17px "Space Grotesk",sans-serif; letter-spacing:.08em; }.schedule-popup-visual > small { margin-top:7px; color:#bde7ca; font-size:10px; }
.mini-clock-row { display:flex; gap:7px; margin-top:22px; }.mini-clock-row i { padding:7px 9px; border:1px solid rgba(255,255,255,.17); border-radius:8px; color:#dcffe8; background:rgba(0,0,0,.18); font:700 10px "Space Grotesk",sans-serif; font-style:normal; }
.schedule-process { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin:22px 0; }.schedule-process > div { display:flex; align-items:center; gap:10px; padding:11px; border:1px solid #d9eee1; border-radius:12px; background:#fff; }.schedule-process > div > b { flex:0 0 27px; display:grid; place-items:center; width:27px; height:27px; border-radius:50%; color:#fff; background:#287c52; font-size:10px; }.schedule-process span,.schedule-process strong,.schedule-process small { display:block; }.schedule-process strong { color:#24573e; font-size:10px; }.schedule-process small { margin-top:3px; color:#819187; font-size:8px; line-height:1.35; }
.schedule-water-gallery { min-height:430px; }
@media(max-width:700px) { .schedule-popup-visual,.schedule-water-gallery { min-height:230px; }.schedule-big-icon { width:100px;height:100px;margin-bottom:14px;border-radius:28px;font-size:52px; }.schedule-process { grid-template-columns:1fr; } }
.rtc-module-note { display:flex; align-items:center; gap:12px; margin:18px 0 0; padding:12px 14px; border:1px solid #cae6d5; border-radius:14px; background:linear-gradient(135deg,#effaf3,#e2f4e9); }
.rtc-module-note > span { flex:0 0 43px; display:grid; place-items:center; width:43px; height:43px; border-radius:12px; background:#173f2b; font-size:23px; }
.rtc-module-note > img { flex:0 0 72px; display:block; width:72px; height:72px; padding:4px; object-fit:contain; border:1px solid #c4dfcf; border-radius:12px; background:#fff; box-shadow:0 7px 16px rgba(23,63,43,.14); }
.rtc-module-note div,.rtc-module-note small,.rtc-module-note strong,.rtc-module-note p { display:block; }.rtc-module-note small { color:#4d8f68; font-size:8px; font-weight:900; letter-spacing:.11em; }.rtc-module-note strong { margin-top:2px; color:#173f2b; font-size:13px; }.rtc-module-note p { margin:3px 0 0; color:#718579; font-size:9px; line-height:1.4; }

/* =========================================================
   MICRO:BIT + IOT:BIT SYSTEM POPUP
========================================================= */
.avatar-device-btn { display:inline-flex; align-items:center; justify-content:center; margin-top:10px; padding:8px 13px; border:1px solid rgba(74,222,128,.28); border-radius:10px; color:#bdf7d0; background:rgba(34,197,94,.1); font-size:9px; font-weight:800; text-decoration:none; transition:.2s ease; }
.avatar-device-btn:hover { transform:translateY(-2px); color:#123723; background:#91e8b0; box-shadow:0 8px 20px rgba(34,197,94,.22); }
.microbit-system-visual { min-height:470px; padding:32px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#ecfff4; background:radial-gradient(circle at 50% 32%,#274e3b,#10291e 66%,#081a12); text-align:center; }
.controller-stack { display:flex; flex-direction:column; align-items:center; gap:10px; }.controller-stack > b { color:#67e69a; font-size:25px; }
.controller-photo-card { width:230px; margin:0; padding:9px; border:1px solid rgba(255,255,255,.2); border-radius:18px; background:rgba(255,255,255,.1); box-shadow:0 18px 34px rgba(0,0,0,.25); }
.controller-photo-card img { display:block; width:100%; height:135px; object-fit:contain; border-radius:11px; background:#fff; }
.controller-photo-card figcaption { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 3px 2px; text-align:left; }.controller-photo-card figcaption strong { color:#effff5; font-size:10px; }.controller-photo-card figcaption small { color:#a8d9ba; font-size:7px; text-align:right; }
.brand strong { max-width:min(420px,48vw); font-size:clamp(12px,1.5vw,16px); line-height:1.25; }
.motor-device-photo img { display:block; width:min(100%,300px); height:260px; margin-bottom:20px; padding:10px; object-fit:contain; border-radius:20px; background:#fff; box-shadow:0 20px 38px rgba(0,0,0,.24); }
@media(max-width:700px) { .motor-device-photo img { height:190px; margin-bottom:14px; } }

/* =========================================================
   INTERACTIVE FARM MONITOR
========================================================= */
.farm-monitor { margin:20px 0 15px; overflow:hidden; border:5px solid #17372a; border-radius:20px; background:#0b2118; box-shadow:0 22px 42px rgba(13,46,31,.2),inset 0 1px rgba(255,255,255,.12); }
.monitor-frame-top { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 13px; color:#bdebd0; background:#102d21; font:800 8px "Space Grotesk",sans-serif; letter-spacing:.1em; }.monitor-frame-top span { display:flex;align-items:center;gap:7px; }.monitor-frame-top span i { width:7px;height:7px;border-radius:50%;background:#55e98e;box-shadow:0 0 10px #55e98e; }.monitor-frame-top b { color:#68e69a;font-size:7px; }
.monitor-screen { position:relative; height:245px; overflow:hidden; background:radial-gradient(circle at 50% 38%,#244d37,#10291d 65%,#071811); transition:background .35s ease; }.monitor-screen.light-on { background:radial-gradient(circle at 50% 18%,#fff1a6 0,#8f8c4b 25%,#254c36 65%,#0a2016 100%); }
.monitor-grid { position:absolute;inset:0;opacity:.13;background-image:linear-gradient(rgba(134,239,172,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(134,239,172,.35) 1px,transparent 1px);background-size:22px 22px; }
.monitor-lamp { position:absolute;z-index:4;top:14px;left:50%;transform:translateX(-50%);display:grid;place-items:center;color:#698173;font:800 7px "Space Grotesk",sans-serif; }.monitor-lamp i { width:29px;height:19px;border:3px solid #74877b;border-radius:15px 15px 6px 6px;background:#263e31;box-shadow:0 4px 0 #0b1d14;transition:.3s; }.monitor-lamp span { margin-top:6px; }.light-on .monitor-lamp { color:#fff0a2; }.light-on .monitor-lamp i { border-color:#ffe36a;background:#fff4a9;box-shadow:0 0 13px #ffe36a,0 0 35px rgba(255,227,106,.65); }
.monitor-fan { position:absolute;z-index:3;top:55px;display:grid;place-items:center;width:45px;height:45px;border:3px solid #5e8c71;border-radius:50%;color:#8ac4a1;background:#102c20;box-shadow:0 7px 13px rgba(0,0,0,.25);font-size:31px; }.monitor-fan-left { left:18px; }.monitor-fan-right { right:18px; }.monitor-fan i { display:block;font-style:normal;line-height:1; }.monitor-screen.fan-on .monitor-fan { border-color:#60d990;color:#78efa5;box-shadow:0 0 17px rgba(96,217,144,.35); }.monitor-screen.fan-on .monitor-fan i { animation:monitorFanSpin .55s linear infinite; }
.monitor-barn { position:absolute;z-index:2;right:72px;bottom:26px;left:72px;height:115px;border:3px solid #5a9871;border-radius:8px 8px 13px 13px;background:linear-gradient(rgba(228,247,233,.94),rgba(173,220,188,.9));box-shadow:0 11px 20px rgba(0,0,0,.25); }.monitor-roof { position:absolute;top:-31px;left:-10px;width:calc(100% + 20px);height:34px;background:#276c55;clip-path:polygon(50% 0,100% 100%,0 100%); }.monitor-chickens { position:absolute;right:0;bottom:39px;left:0;text-align:center;font-size:21px;letter-spacing:2px; }
.feed-tray { position:absolute;bottom:9px;left:12px;width:43%;height:12px;border-radius:3px 3px 8px 8px;background:#8d6530; }.feed-tray b,.water-pipe b { position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);color:#315f46;font:800 6px "Space Grotesk",sans-serif; }.feed-tray span { position:absolute;top:-55px;width:5px;height:5px;border-radius:50%;background:#e9c65c;opacity:0; }.feed-tray span:nth-child(1){left:15%}.feed-tray span:nth-child(2){left:38%}.feed-tray span:nth-child(3){left:62%}.feed-tray span:nth-child(4){left:82%}.feeding-active .feed-tray span { animation:feedDrop 1.15s ease-in infinite; }.feeding-active .feed-tray span:nth-child(2){animation-delay:.18s}.feeding-active .feed-tray span:nth-child(3){animation-delay:.35s}.feeding-active .feed-tray span:nth-child(4){animation-delay:.52s}
.water-pipe { position:absolute;right:12px;bottom:10px;width:43%;height:9px;border-radius:8px;background:#4093bc; }.water-pipe i { position:absolute;top:8px;width:6px;height:8px;border-radius:50% 50% 60% 60%;background:#65d5ff;opacity:0; }.water-pipe i:nth-child(1){left:18%}.water-pipe i:nth-child(2){left:48%}.water-pipe i:nth-child(3){left:78%}.watering-active .water-pipe i { animation:waterDrop .72s ease-in infinite; }.watering-active .water-pipe i:nth-child(2){animation-delay:.2s}.watering-active .water-pipe i:nth-child(3){animation-delay:.4s}
.monitor-message { position:absolute;z-index:7;right:10px;bottom:7px;left:10px;padding:5px 9px;border:1px solid rgba(134,239,172,.2);border-radius:7px;color:#c4e8d1;background:rgba(5,24,14,.82);font:700 7px "Space Grotesk",sans-serif;text-align:center;letter-spacing:.04em;transition:.2s; }.monitor-message.flash { color:#102c1d;background:#81e8a5; }
.monitor-controls { display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:9px;background:#102d21; }.monitor-control-btn { display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:5px;min-width:0;padding:7px;border:1px solid #315b46;border-radius:9px;color:#cbe8d5;background:#173b2a;cursor:pointer;font-family:inherit;text-align:left;transition:.2s; }.monitor-control-btn:hover { transform:translateY(-2px);border-color:#5fba80;background:#205038; }.monitor-control-btn span { font-size:14px; }.monitor-control-btn strong { overflow:hidden;font-size:8px;white-space:nowrap;text-overflow:ellipsis; }.monitor-control-btn small { padding:3px 4px;border-radius:5px;color:#819e8d;background:#0d291c;font-size:6px;font-weight:900; }.monitor-control-btn.active { border-color:#65e397;color:#edfff4;background:#246540;box-shadow:0 0 14px rgba(101,227,151,.2); }.monitor-control-btn.active small { color:#12351f;background:#78e6a0; }
@keyframes monitorFanSpin { to { transform:rotate(360deg); } } @keyframes feedDrop { 0%{transform:translateY(0);opacity:0}20%{opacity:1}85%{opacity:1}100%{transform:translateY(52px);opacity:0} } @keyframes waterDrop { 0%{transform:translateY(0) scale(.7);opacity:0}20%{opacity:1}100%{transform:translateY(25px) scale(1);opacity:0} }
@media(max-width:600px) { .monitor-screen{height:225px}.monitor-barn{right:55px;left:55px}.monitor-fan-left{left:8px}.monitor-fan-right{right:8px}.monitor-controls{grid-template-columns:1fr 1fr}.monitor-control-btn{padding:8px}.monitor-control-btn strong{font-size:9px} }

/* Natural farm edition */
.farm-monitor { border-color:#6b4728; background:#3f2b19; box-shadow:0 22px 42px rgba(72,46,23,.24),inset 0 1px rgba(255,255,255,.2); }
.monitor-frame-top { color:#fff4d7; background:linear-gradient(#79512f,#56391f); }.monitor-frame-top span i { background:#b8ef78;box-shadow:0 0 9px #b8ef78; }.monitor-frame-top b { color:#f4d697; }
.monitor-screen,.monitor-screen.light-on { background:linear-gradient(#8fd5ed 0 45%,#cbe9a1 46% 67%,#70ad56 68% 100%); }
.monitor-screen::before,.monitor-screen::after { content:"";position:absolute;z-index:1;top:20px;width:63px;height:18px;border-radius:40px;background:rgba(255,255,255,.76);box-shadow:22px 4px 0 -3px rgba(255,255,255,.76),-17px 7px 0 -5px rgba(255,255,255,.76); }.monitor-screen::before{left:24px}.monitor-screen::after{right:28px;transform:scale(.75)}
.monitor-grid { display:none; }
.monitor-lamp { color:#70542d; }.monitor-lamp i { border-color:#9f813c;background:#f8d865;box-shadow:0 0 14px rgba(248,216,101,.6); }.light-on .monitor-lamp i { border-color:#ffcd38;background:#fff2a4;box-shadow:0 0 20px #ffe16a,0 0 55px rgba(255,225,106,.75); }
.monitor-fan { border-color:#886842;color:#735638;background:#f0d9aa;box-shadow:0 7px 13px rgba(74,48,23,.2); }.monitor-screen.fan-on .monitor-fan { border-color:#598a4b;color:#47793e;box-shadow:0 0 18px rgba(71,121,62,.3); }
.monitor-barn { border-color:#8d5c31;background:linear-gradient(#f1d4a4,#d7ad74);box-shadow:0 11px 20px rgba(76,49,22,.25); }.monitor-barn::before { content:"";position:absolute;inset:0;opacity:.18;background:repeating-linear-gradient(90deg,transparent 0 31px,#6f441f 32px 34px); }.monitor-roof { background:linear-gradient(#a95c35,#71391e); }
.monitor-chickens { z-index:3;display:flex;align-items:flex-end;justify-content:center;gap:3px;bottom:35px;font-size:0;letter-spacing:0; }.monitor-chickens span { display:inline-block;font-size:25px;filter:drop-shadow(0 4px 2px rgba(79,48,19,.2));animation:chickenPeck 3s ease-in-out infinite; }.monitor-chickens span:nth-child(2){font-size:29px;transform:scaleX(-1);animation-delay:.6s}.monitor-chickens span:nth-child(3){font-size:22px;animation-delay:1.1s}.monitor-chickens span:nth-child(4){font-size:24px;transform:scaleX(-1);animation-delay:1.7s}
.feed-tray { z-index:4;height:14px;border:2px solid #65401f;background:linear-gradient(#c58c42,#8e5d29); }.water-pipe { z-index:4;height:14px;border:2px solid #496d70;background:linear-gradient(#9fd7dd,#589ca7); }.feed-tray b,.water-pipe b { color:#5b452a; }
.monitor-message { color:#fff8e6;border-color:rgba(255,244,215,.28);background:rgba(79,49,24,.85); }.monitor-message.flash { color:#3d2917;background:#f3d48e; }
.monitor-controls { background:linear-gradient(#6e492b,#4d321d); }.monitor-control-btn { border-color:#9d7148;color:#fff4d7;background:#704a2c; }.monitor-control-btn:hover { border-color:#d5a56c;background:#855a36; }.monitor-control-btn small { color:#d0b58f;background:#4a301c; }.monitor-control-btn.active { border-color:#a8d77b;color:#f6ffe9;background:#557b3d;box-shadow:0 0 14px rgba(168,215,123,.22); }.monitor-control-btn.active small { color:#2b451f;background:#c3e99d; }
.feed-pourer,.water-pourer { position:absolute;z-index:8;top:-70px;width:78px;height:75px;opacity:0;pointer-events:none; }.feed-pourer { left:2px; }.water-pourer { right:2px;transform:scaleX(-1); }.pour-hand { position:absolute;top:0;right:0;font-size:37px;font-style:normal;filter:drop-shadow(0 5px 3px rgba(0,0,0,.18)); }.feed-bucket,.water-jug { position:absolute;top:28px;right:17px;width:32px;height:27px;border-radius:5px 5px 12px 12px;background:linear-gradient(135deg,#c58a45,#785027);box-shadow:inset 0 2px rgba(255,255,255,.25); }.feed-bucket::before,.water-jug::before { content:"";position:absolute;top:-8px;left:3px;width:24px;height:12px;border:3px solid #6b4729;border-bottom:0;border-radius:15px 15px 0 0; }.water-jug { background:linear-gradient(135deg,#b5dce2,#5b9eaa); }.water-jug::after { content:"";position:absolute;right:-15px;top:3px;width:19px;height:8px;border-radius:0 8px 8px 0;background:#72aebb;transform:rotate(12deg); }
.feed-pourer em { position:absolute;top:48px;width:5px;height:5px;border-radius:50%;background:#edc658;opacity:0; }.feed-pourer em:nth-of-type(1){left:35px}.feed-pourer em:nth-of-type(2){left:43px}.feed-pourer em:nth-of-type(3){left:51px}.feed-pourer em:nth-of-type(4){left:57px}.water-pourer em { position:absolute;top:46px;left:48px;width:8px;height:34px;border-radius:8px;background:linear-gradient(#9ceaff,#45b7da);opacity:0; }
.feeding-active .feed-pourer { animation:pourHandFeed 2.6s ease-in-out; }.feeding-active .feed-pourer em { animation:handGrainDrop .7s linear infinite; }.feeding-active .feed-pourer em:nth-of-type(2){animation-delay:.12s}.feeding-active .feed-pourer em:nth-of-type(3){animation-delay:.24s}.feeding-active .feed-pourer em:nth-of-type(4){animation-delay:.36s}.watering-active .water-pourer { animation:pourHandWater 3s ease-in-out; }.watering-active .water-pourer em { animation:handWaterStream 3s ease-in-out; }
@keyframes chickenPeck { 0%,75%,100%{transform:translateY(0) rotate(0)}82%{transform:translateY(3px) rotate(7deg)}90%{transform:translateY(0) rotate(0)} } @keyframes pourHandFeed { 0%{opacity:0;transform:translate(-30px,-10px) rotate(0)}15%,80%{opacity:1;transform:translate(18px,50px) rotate(24deg)}100%{opacity:0;transform:translate(-25px,-10px) rotate(0)} } @keyframes handGrainDrop { 0%,18%{opacity:0;transform:translateY(0)}25%{opacity:1}100%{opacity:0;transform:translateY(72px)} } @keyframes pourHandWater { 0%{opacity:0;transform:scaleX(-1) translate(-30px,-10px) rotate(0)}15%,82%{opacity:1;transform:scaleX(-1) translate(18px,50px) rotate(25deg)}100%{opacity:0;transform:scaleX(-1) translate(-25px,-10px) rotate(0)} } @keyframes handWaterStream { 0%,14%,85%,100%{opacity:0;height:0}22%,78%{opacity:.9;height:70px} }

/* Clear day/off and night/on lighting states. */
.monitor-screen.light-on { background:radial-gradient(ellipse at 50% 8%,rgba(255,226,112,.48) 0,rgba(255,226,112,.15) 23%,transparent 45%),linear-gradient(#10213e 0 45%,#243b37 46% 67%,#1f472d 68% 100%); }
.monitor-screen.light-on::before,.monitor-screen.light-on::after { opacity:.18; }
.monitor-screen.light-on .monitor-barn { box-shadow:0 0 35px rgba(255,225,115,.34),0 12px 22px rgba(0,0,0,.32); }
.monitor-screen.light-on .monitor-chickens { filter:brightness(.88) drop-shadow(0 0 5px rgba(255,225,115,.35)); }

/* Softer water droplets aligned with the water trough. */
.water-pourer { right:24px; }
.water-pourer em { top:48px;left:28px;width:6px;height:10px;border-radius:55% 55% 62% 62%;background:linear-gradient(180deg,#d6f8ff,#54c8ec);opacity:0;box-shadow:0 2px 4px rgba(55,154,190,.25); }
.water-pourer em:nth-of-type(1){left:27px}.water-pourer em:nth-of-type(2){left:30px}.water-pourer em:nth-of-type(3){left:25px}.water-pourer em:nth-of-type(4){left:29px}
.watering-active .water-pourer em { animation:naturalWaterDrop .72s cubic-bezier(.22,.65,.5,1) infinite; }
.watering-active .water-pourer em:nth-of-type(2){animation-delay:.16s}.watering-active .water-pourer em:nth-of-type(3){animation-delay:.32s}.watering-active .water-pourer em:nth-of-type(4){animation-delay:.48s}
@keyframes naturalWaterDrop { 0%,12%{opacity:0;transform:translate(0,0) scale(.65) rotate(0)}22%{opacity:.95}70%{opacity:.9;transform:translate(2px,43px) scale(1) rotate(8deg)}100%{opacity:0;transform:translate(-1px,66px) scale(.82) rotate(-6deg)} }
.controller-board { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; width:210px; height:122px; border-radius:20px; box-shadow:0 20px 38px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.12); }
.controller-board span { font:900 22px "Space Grotesk",sans-serif; }.controller-board strong { margin-top:2px; font-size:11px; }.controller-board i { margin-top:14px; font-size:8px; font-style:normal; letter-spacing:.1em; opacity:.75; }
.microbit-v2-board { border:2px solid #42d6f3; color:#e9fbff; background:linear-gradient(145deg,#181818,#070707); }.microbit-v2-board::before { content:""; position:absolute; top:11px; left:12px; width:30px; height:30px; background:#42d6f3; clip-path:polygon(0 0,100% 0,0 100%); }
.iotbit-board { border:2px solid #62cb8b; color:#eafff1; background:linear-gradient(145deg,#1d5a38,#0e3421); }
.microbit-system-visual > small { margin-top:20px; color:#a8d9ba; font-size:9px; letter-spacing:.08em; }
.controller-role-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin:22px 0; }.controller-role-grid > div { padding:12px; border:1px solid #d8ecdf; border-radius:13px; background:#fff; }.controller-role-grid span,.controller-role-grid small,.controller-role-grid strong,.controller-role-grid p { display:block; }.controller-role-grid span { margin-bottom:6px; font-size:20px; }.controller-role-grid small { color:#779084; font-size:8px; }.controller-role-grid strong { margin-top:2px; color:#20543a; font-size:11px; }.controller-role-grid p { margin:4px 0 0; color:#819087; font-size:8px; line-height:1.45; }
.system-architecture-flow { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:13px; border-radius:13px; color:#eafff1; background:#143c2a; font-size:8px; font-weight:800; }.system-architecture-flow span { padding:5px 7px; border-radius:7px; background:rgba(255,255,255,.1); }.system-architecture-flow b { color:#68e69b; }
.system-flow-group { display:grid; gap:6px; }.system-flow-group > small { margin-top:4px; color:#4d8065; font-size:8px; font-weight:900; letter-spacing:.08em; }
@media(max-width:700px) { .microbit-system-visual { min-height:300px; }.controller-board { width:175px;height:100px; }.controller-role-grid { grid-template-columns:1fr; } }
.is-offline .overview-dot,
.is-offline .indicator {
    background: #ef4444 !important;
}

.is-offline b {
    color: #dc2626 !important;
}

.is-offline small {
    color: #dc2626;
}