*{box-sizing:border-box}
:root{
 --bg:#f4f8fb;--surface:rgba(255,255,255,.88);--surface-solid:#fff;
 --border:#dce8ed;--text:#13232b;--muted:#63747c;
 --cyan:#009fbd;--cyan-soft:#dff7fb;--green:#19a66a;--green-soft:#e2f8ee;
 --warning:#e48a18;--danger:#d94c4c;
 --shadow:0 16px 45px rgba(28,64,78,.10)
}
html,body{margin:0;min-height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);
 background:radial-gradient(circle at 15% 0%,rgba(0,174,205,.10),transparent 28rem),
 radial-gradient(circle at 100% 20%,rgba(25,166,106,.08),transparent 25rem),var(--bg)}
body{min-height:100vh;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer}.app{min-height:100vh}.screen{width:100%;min-height:100vh}.hidden{display:none!important}
#loading-screen,#telegram-screen{display:grid;place-items:center;padding:28px}
.boot-shell,.auth-shell{width:min(100%,430px);padding:42px 28px;text-align:center}
.boot-shell{border:1px solid var(--border);background:rgba(255,255,255,.72);box-shadow:var(--shadow);border-radius:28px;backdrop-filter:blur(18px)}
.brand-mark{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 22px;border:1px solid #b8e4ea;border-radius:18px;
 background:linear-gradient(145deg,#fff,var(--cyan-soft));color:var(--cyan);font-size:30px;box-shadow:0 10px 30px rgba(0,159,189,.12)}
.eyebrow,.panel-kicker,.metric-label{letter-spacing:.14em;font-size:10px;font-weight:800;color:var(--cyan)}
h1,h2,h3,p{margin-top:0}
.boot-shell h1{margin-bottom:26px;font-size:clamp(34px,11vw,54px);line-height:.95;letter-spacing:-.04em}
.boot-shell h1 span,.hero-panel h1 span{color:var(--green)}
.boot-shell p,.auth-shell p,.module-placeholder p{color:var(--muted);line-height:1.6}
.boot-line{height:5px;margin:0 auto 14px;width:min(260px,80%);overflow:hidden;border-radius:99px;background:#e6eef1}
.boot-line span{display:block;width:40%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--cyan),var(--green));animation:boot 1.4s ease-in-out infinite}
@keyframes boot{0%,100%{transform:translateX(-120%)}50%{transform:translateX(250%)}}
.primary-button{width:100%;border:0;border-radius:14px;padding:15px 20px;background:linear-gradient(135deg,var(--cyan),var(--green));color:#fff;font-weight:800;box-shadow:0 10px 24px rgba(0,159,189,.18)}
.small-text{font-size:12px}.error{color:var(--danger)!important}
.status-row,.online-badge,.status-pill{display:inline-flex;align-items:center;gap:8px}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}
.app-screen{padding:18px 16px 110px}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;max-width:900px;margin:0 auto 18px}
.topbar h2{margin:6px 0 0;font-size:22px;letter-spacing:-.025em}
.online-badge,.status-pill{flex:0 0 auto;padding:8px 10px;border:1px solid #cde9dc;border-radius:999px;background:var(--green-soft);color:#16734b;font-size:9px;font-weight:800;letter-spacing:.08em}
.hero-panel,.ai-panel,.metric-card,.quick-card,.module-placeholder{border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow);backdrop-filter:blur(18px)}
.hero-panel{position:relative;display:flex;justify-content:space-between;gap:16px;max-width:900px;margin:0 auto 22px;padding:24px;min-height:205px;overflow:hidden;border-radius:24px}
.hero-panel::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 50%,rgba(0,174,205,.07))}
.hero-panel h1{margin:8px 0 10px;font-size:clamp(30px,9vw,52px);line-height:.98;letter-spacing:-.05em}
.hero-panel p{max-width:500px;margin:0;color:var(--muted);line-height:1.55;font-size:13px}
.core-orbit{position:relative;flex:0 0 105px;height:105px;margin:auto 0}
.orbit-ring{position:absolute;inset:8px;border:1px solid #9bdce6;border-radius:50%;animation:orbit 7s linear infinite}
.ring-two{inset:22px;border-color:#a8dfc5;animation-direction:reverse;animation-duration:5s}
.core-dot{position:absolute;inset:36px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#e7fbfe,#e6f8ef);color:var(--cyan);font-size:11px;font-weight:900}
@keyframes orbit{to{transform:rotate(360deg)}}
.section-heading,.ai-panel-header{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;max-width:900px;margin:0 auto 10px}
.section-heading h3,.ai-panel-header h3{margin:4px 0 0;font-size:17px}
.telemetry-note{color:var(--muted);font-size:9px;letter-spacing:.1em;font-weight:800}
.telemetry-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:900px;margin:0 auto 22px}
.metric-card{min-height:125px;padding:15px;border-radius:18px}
.metric-icon{display:block;margin-bottom:10px;color:var(--cyan);font-weight:900}
.metric-card strong{display:block;margin-top:8px;font-size:22px;letter-spacing:-.03em}
.metric-card small{color:var(--muted);font-size:10px}
.alert-card .metric-icon,.alert-card strong{color:var(--warning)}
.ai-panel{max-width:900px;margin:0 auto 22px;padding:18px;border-radius:22px}
.greenhouse-visual{position:relative;height:220px;margin:14px 0;overflow:hidden;border:1px solid #d8e8eb;border-radius:16px;
 background:linear-gradient(rgba(0,159,189,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,159,189,.06) 1px,transparent 1px),#f5fbfc;background-size:26px 26px}
.grid-floor{position:absolute;left:8%;right:8%;bottom:18%;height:35%;border-top:1px solid #b8dce1;transform:perspective(250px) rotateX(48deg);transform-origin:bottom}
.greenhouse-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100px;height:100px;display:grid;place-content:center;text-align:center;
 border:1px solid #9fdce4;border-radius:50%;background:rgba(255,255,255,.8);box-shadow:0 0 0 14px rgba(0,159,189,.04),0 15px 35px rgba(0,159,189,.12)}
.core-label{color:var(--cyan);font-size:9px;font-weight:800;letter-spacing:.12em}.core-value{margin-top:5px;color:var(--green);font-size:17px;font-weight:900}
.node{position:absolute;padding:6px 8px;border:1px solid #c8e3e7;border-radius:8px;background:rgba(255,255,255,.9);color:var(--muted);font-size:8px;font-weight:800}
.node-a{left:10%;top:18%}.node-b{right:10%;top:28%}.node-c{left:22%;bottom:16%}
.ai-footer{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:10px}
.accent-text{color:var(--green);font-weight:800;white-space:nowrap}
.quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:900px;margin:0 auto}
.quick-card{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;padding:14px;border-radius:16px;text-align:left;color:var(--text)}
.quick-card span{grid-row:span 2;color:var(--cyan);font-size:20px}.quick-card b{font-size:12px}.quick-card small{color:var(--muted);font-size:9px}
.bottom-nav{position:fixed;z-index:20;left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);display:grid;grid-template-columns:repeat(5,1fr);
 width:min(calc(100% - 20px),620px);padding:7px;border:1px solid var(--border);border-radius:20px;background:rgba(255,255,255,.92);
 box-shadow:0 15px 40px rgba(28,64,78,.15);backdrop-filter:blur(18px)}
.nav-item{border:0;background:transparent;color:#819099;padding:8px 3px;border-radius:14px}.nav-item span{display:block;font-size:16px;line-height:18px}
.nav-item small{display:block;margin-top:2px;font-size:8px;font-weight:700}.nav-item.active{background:var(--cyan-soft);color:var(--cyan)}.ai-nav{color:var(--green)}
.module-placeholder{display:grid;place-items:center;min-height:55vh;max-width:700px;margin:40px auto;padding:32px;text-align:center;border-radius:24px}
.module-placeholder .brand-mark{margin-bottom:16px}.module-placeholder h1{margin-bottom:10px;font-size:32px}
.icon-button{border:1px solid var(--border);background:var(--surface-solid);color:var(--text);width:40px;height:40px;border-radius:12px}
@media(min-width:700px){.app-screen{padding:28px 28px 120px}.telemetry-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.quick-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:390px){.hero-panel{padding:20px}.core-orbit{flex-basis:80px;height:80px}.core-dot{inset:28px}.orbit-ring{inset:4px}.ring-two{inset:17px}}
/* ============================================================
   CAMERA MODULE
   ============================================================ */

.camera-header-panel {
    margin: 18px 0 26px;
    padding: 24px;
    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.96),
            rgba(238,246,250,0.96)
        );

    border: 1px solid rgba(30, 60, 75, 0.08);

    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 20px;
}


.camera-header-panel h1 {
    margin: 6px 0 10px;
    font-size: 32px;
    line-height: 1.05;
}


.camera-header-panel h1 span {
    opacity: 0.55;
}


.camera-header-panel p {
    margin: 0;
    max-width: 520px;
    line-height: 1.5;
    opacity: 0.7;
}


.refresh-button {
    width: 48px;
    height: 48px;

    border-radius: 14px;

    border: 1px solid rgba(30,60,75,0.1);

    background: white;

    font-size: 25px;

    cursor: pointer;

    flex-shrink: 0;
}


.refresh-button:active {
    transform: scale(0.94);
}


/* ============================================================
   CAMERA LIST
   ============================================================ */

.camera-list {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(280px, 1fr)
        );

    gap: 18px;

    padding-bottom: 100px;
}


/* ============================================================
   CAMERA CARD
   ============================================================ */

.camera-card {
    overflow: hidden;

    border-radius: 22px;

    background: white;

    border: 1px solid
        rgba(30,60,75,0.08);

    box-shadow:
        0 8px 30px
        rgba(20,50,65,0.06);
}


.camera-preview {
    position: relative;

    aspect-ratio: 16 / 9;

    background:
        linear-gradient(
            135deg,
            #182b34,
            #29434e
        );

    overflow: hidden;
}


.camera-placeholder {
    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    color: rgba(255,255,255,0.7);

    gap: 5px;
}


.camera-placeholder-icon {
    font-size: 40px;

    opacity: 0.8;
}


.camera-placeholder span {
    font-size: 11px;

    letter-spacing: 2px;

    font-weight: 700;
}


.camera-placeholder small {
    font-size: 10px;

    opacity: 0.55;

    text-align: center;

    padding: 0 20px;
}


/* ============================================================
   CAMERA STATUS
   ============================================================ */

.camera-status {
    position: absolute;

    top: 12px;
    right: 12px;

    padding: 7px 10px;

    border-radius: 999px;

    background:
        rgba(10,20,25,0.75);

    backdrop-filter: blur(8px);

    color: white;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

    display: flex;
    align-items: center;

    gap: 6px;
}


.camera-status .status-dot {
    width: 7px;
    height: 7px;
}


.camera-status.offline {
    opacity: 0.7;
}


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

.camera-card-body {
    padding: 18px;
}


.camera-title-row {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 12px;
}


.camera-title-row h3 {
    margin: 3px 0 0;

    font-size: 21px;
}


.camera-index {
    font-size: 10px;

    letter-spacing: 1px;

    font-weight: 700;

    opacity: 0.4;
}


.camera-actions {
    margin-top: 18px;
}


.camera-action-button {
    width: 100%;

    min-height: 46px;
}


.camera-action-button:disabled {
    opacity: 0.5;

    cursor: not-allowed;
}


/* ============================================================
   CAMERA RESULT
   ============================================================ */

.camera-result {
    margin-top: 12px;

    padding: 12px 14px;

    border-radius: 12px;

    display: flex;

    flex-direction: column;

    gap: 3px;

    font-size: 12px;
}


.camera-result strong {
    font-size: 12px;
}


.camera-result span {
    opacity: 0.7;
}


.camera-result.pending {
    background:
        rgba(70,100,115,0.08);
}


.camera-result.success {
    background:
        rgba(60,150,100,0.1);
}


.camera-result.error {
    background:
        rgba(190,70,70,0.1);
}

.camera-image {
	width: 100%;
	height: 220px;
	object-fit: cover;
	border-radius: 12px;
	display: block;
}


/* ============================================================
   LOADING / EMPTY / ERROR
   ============================================================ */

.camera-loading,
.camera-empty,
.camera-error {
    min-height: 180px;

    border-radius: 20px;

    background: white;

    border: 1px solid
        rgba(30,60,75,0.08);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 30px;

    grid-column: 1 / -1;
}


.camera-loading p,
.camera-empty p,
.camera-error p {
    margin: 6px 0 0;

    opacity: 0.6;
}


.camera-empty .empty-icon {
    font-size: 36px;

    opacity: 0.4;

    margin-bottom: 8px;
}


.camera-error strong {
    font-size: 16px;
}


.secondary-button {
    margin-top: 14px;

    min-height: 42px;

    padding: 0 18px;

    border-radius: 12px;

    border: 1px solid
        rgba(30,60,75,0.12);

    background: white;

    cursor: pointer;

    font-weight: 700;
}


/* ============================================================
   SPINNERS
   ============================================================ */

.loading-spinner,
.button-spinner {
    border: 3px solid
        rgba(80,100,110,0.15);

    border-top-color:
        rgba(50,80,90,0.8);

    border-radius: 50%;

    animation:
        camera-spin
        0.8s linear infinite;
}


.loading-spinner {
    width: 30px;
    height: 30px;
}


.button-spinner {
    display: inline-block;

    width: 15px;
    height: 15px;

    border-width: 2px;
}


@keyframes camera-spin {

    to {
        transform: rotate(360deg);
    }

}


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

@media (max-width: 600px) {

    .camera-header-panel {
        padding: 20px;
    }

    .camera-header-panel h1 {
        font-size: 28px;
    }

    .camera-list {
        grid-template-columns: 1fr;
    }

}

/* --------------------------------------------------
   App Branding Footer
   -------------------------------------------------- */

.app-footer {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;

    width: 100% !important;
    padding: 12px 10px 16px !important;

    font-size: 11px !important;
    font-weight: 400 !important;

    opacity: 0.65;
    box-sizing: border-box;
}

.app-footer img {
    display: block !important;

    height: 20px !important;
    width: auto !important;

    max-width: 80px !important;
    max-height: 20px !important;

    object-fit: contain !important;
    flex: 0 0 auto !important;
}

.app-footer span {
    display: inline-block !important;
    white-space: nowrap !important;
    line-height: 20px !important;
}

/* --------------------------------------------------
   Space for fixed bottom navigation
   -------------------------------------------------- */

main {
    padding-bottom: 75px;
}