*{
    box-sizing:border-box;
}

html,body{
    margin:0;
    padding:0;
    min-height:100%;
    background:#081018;
    color:#d8e2ec;
    font-family:Arial,Helvetica,sans-serif;
}

body{
    min-height:100vh;
    background:
        radial-gradient(circle at top left, rgba(0,208,132,0.08), transparent 28%),
        radial-gradient(circle at top right, rgba(67,97,238,0.08), transparent 22%),
        linear-gradient(180deg,#0a1119 0%,#071019 100%);
}

a{
    color:inherit;
    text-decoration:none;
}

.app-shell{
    min-height:100vh;
}

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

.topbar{
    min-height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:12px 20px;
    border-bottom:1px solid rgba(120,145,170,0.18);
    background:rgba(7,15,24,0.94);
    backdrop-filter:blur(10px);
    position:sticky;
    top:0;
    z-index:100;
}

.topbar-left,
.topbar-center,
.topbar-right{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    min-width:0;
}

.brand-mark{
    width:18px;
    height:18px;
    border-radius:4px;
    background:linear-gradient(135deg,#00d084,#00a6fb);
    box-shadow:0 0 18px rgba(0,208,132,0.55);
    flex:0 0 auto;
}

.brand-title{
    font-size:15px;
    font-weight:700;
    letter-spacing:0.08em;
    color:#f3f8fc;
}

.brand-subtitle{
    font-size:11px;
    color:#87a0b7;
    text-transform:uppercase;
    letter-spacing:0.12em;
    margin-top:3px;
}

.topbar-pill{
    padding:8px 12px;
    border:1px solid rgba(122,141,160,0.18);
    border-radius:999px;
    background:rgba(255,255,255,0.03);
    font-size:11px;
    color:#9fb4c7;
    letter-spacing:0.08em;
    white-space:nowrap;
}

.topbar-right a{
    padding:10px 14px;
    border-radius:10px;
    color:#c5d2df;
    transition:0.2s ease;
    font-size:14px;
}

.topbar-right a:hover{
    background:rgba(255,255,255,0.05);
    color:#fff;
}

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

.main-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 340px;
    gap:18px;
    padding:18px;
    align-items:start;
}

.synoptic-shell,
.sidebar-panel,
.machine-card,
.admin-main-card,
.admin-side-card{
    background:linear-gradient(180deg, rgba(13,22,34,0.98), rgba(10,18,28,0.98));
    border:1px solid rgba(123,144,166,0.16);
    border-radius:18px;
    box-shadow:0 20px 50px rgba(0,0,0,0.35);
}

/* =========================
   SYNOPTIC
========================= */

.synoptic-shell{
    padding:16px;
    overflow:auto;
    min-width:0;
}

.synoptic-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:16px;
}

.synoptic-header h1,
.machine-card-header h1,
.admin-section-head h1,
.admin-section-head h2{
    margin:0;
    color:#f2f7fb;
    line-height:1.2;
}

.synoptic-header h1,
.machine-card-header h1,
.admin-section-head h1{
    font-size:24px;
}

.admin-section-head h2{
    font-size:20px;
}

.synoptic-header p,
.machine-card-header p,
.admin-section-head p{
    margin:6px 0 0 0;
    color:#87a0b7;
    line-height:1.5;
    font-size:14px;
}

.legend{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
}

.legend-item{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    color:#9db3c8;
}

.dot{
    width:10px;
    height:10px;
    border-radius:50%;
    display:inline-block;
}

.dot.run{ background:#00d084; box-shadow:0 0 10px rgba(0,208,132,0.65); }
.dot.warn{ background:#ffb020; box-shadow:0 0 10px rgba(255,176,32,0.65); }
.dot.alarm{ background:#ff4d5a; box-shadow:0 0 10px rgba(255,77,90,0.7); }
.dot.stop{ background:#6c7a89; }

/* =========================
   SYNOPTIC BOARD
========================= */

.synoptic-board{
    position:relative;
    border-radius:18px;
    overflow:hidden;
    background:linear-gradient(180deg, rgba(14,24,36,0.98), rgba(7,13,20,0.98));
    border:1px solid rgba(102,125,148,0.16);
    max-width:100%;
    min-height:760px;
}

.grid-overlay{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(148,163,184,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,184,0.06) 1px, transparent 1px);
    background-size:32px 32px;
    pointer-events:none;
    z-index:1;
}

.ambient-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(50px);
    pointer-events:none;
    opacity:0.22;
    z-index:1;
}

.ambient-glow-1{
    width:260px;
    height:260px;
    left:260px;
    top:180px;
    background:rgba(0,208,132,0.18);
}

.ambient-glow-2{
    width:260px;
    height:260px;
    right:100px;
    top:120px;
    background:rgba(56,189,248,0.16);
}

/* =========================
   PROCESS LINKS SVG
========================= */

.process-links{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:2;
    pointer-events:none;
}

.pipe-base{
    fill:none;
    stroke:#243548;
    stroke-width:10;
    stroke-linecap:round;
    stroke-linejoin:round;
    opacity:0.95;
}

.pipe-glow{
    fill:none;
    stroke:url(#pipeGlow);
    stroke-width:4;
    stroke-linecap:round;
    stroke-linejoin:round;
    filter:url(#softGlow);
    opacity:0.9;
}

.pipe-flow{
    fill:none;
    stroke:#00d084;
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:20 80;
    animation:pipeFlow 3.4s linear infinite;
    opacity:0.95;
}

@keyframes pipeFlow{
    from{ stroke-dashoffset:100; }
    to{ stroke-dashoffset:0; }
}

/* =========================
   DECORATIONS
========================= */

.decoration{
    position:absolute;
    border-radius:14px;
    border:1px solid rgba(123,144,166,0.12);
    background:rgba(255,255,255,0.02);
    color:#93a9bc;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    z-index:3;
    text-align:center;
    padding:6px 10px;
}

.decoration.conveyor-lane{
    background:
        repeating-linear-gradient(
            90deg,
            rgba(52,73,94,0.72) 0px,
            rgba(52,73,94,0.72) 20px,
            rgba(92,110,128,0.80) 20px,
            rgba(92,110,128,0.80) 42px
        );
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.05),
        0 0 20px rgba(56,189,248,0.06);
    animation:laneMove 1.8s linear infinite;
}

.decoration.zone-block{
    background:linear-gradient(180deg, rgba(20,31,44,0.92), rgba(10,18,28,0.92));
    border:1px solid rgba(101,126,150,0.18);
    color:#a7bbcc;
    box-shadow:0 10px 26px rgba(0,0,0,0.24);
}

.decoration.service-block{
    background:linear-gradient(180deg, rgba(13,46,58,0.88), rgba(8,27,36,0.88));
    border:1px solid rgba(56,189,248,0.22);
    color:#b9ebff;
    box-shadow:0 0 18px rgba(56,189,248,0.10);
}

.decoration.bed-lane{
    background:linear-gradient(180deg, rgba(16,28,36,0.95), rgba(8,14,20,0.95));
    border:1px solid rgba(16,185,129,0.16);
    box-shadow:0 0 16px rgba(16,185,129,0.05);
}

@keyframes laneMove{
    from{ background-position:0 0; }
    to{ background-position:42px 0; }
}

/* =========================
   SCADA NODE STANDARD
========================= */

.scada-node{
    position:absolute;
    width:190px;
    min-height:124px;
    padding:12px 12px 10px 12px;
    border-radius:16px;
    border:1px solid rgba(138,156,175,0.18);
    background:linear-gradient(180deg, rgba(17,30,44,0.96), rgba(10,18,28,0.96));
    box-shadow:
        0 12px 30px rgba(0,0,0,0.28),
        inset 0 0 0 1px rgba(255,255,255,0.02);
    transition:transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
    overflow:hidden;
    z-index:4;
    cursor:pointer;
}

.scada-node:hover{
    transform:translateY(-2px);
    border-color:rgba(0,208,132,0.38);
    box-shadow:
        0 18px 38px rgba(0,0,0,0.34),
        0 0 0 1px rgba(0,208,132,0.10);
}

.scada-node.state-run{
    box-shadow:
        0 12px 30px rgba(0,0,0,0.28),
        0 0 0 1px rgba(0,208,132,0.08);
}

.scada-node.state-warn{
    border-color:rgba(255,176,32,0.30);
    box-shadow:
        0 12px 30px rgba(0,0,0,0.28),
        0 0 18px rgba(255,176,32,0.08);
}

.scada-node.state-alarm{
    border-color:rgba(255,77,90,0.36);
    box-shadow:
        0 12px 30px rgba(0,0,0,0.28),
        0 0 22px rgba(255,77,90,0.14);
}

.scada-node.state-stop{
    opacity:0.88;
}

.scada-node.state-maint{
    border-color:rgba(56,189,248,0.34);
    box-shadow:
        0 12px 30px rgba(0,0,0,0.28),
        0 0 18px rgba(56,189,248,0.10);
}

.scada-node::before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:5px;
    background:linear-gradient(180deg, rgba(0,208,132,0.8), rgba(0,166,251,0.55));
}

.node-top{
    display:flex;
    gap:10px;
    align-items:flex-start;
    margin-bottom:10px;
}

.node-icon{
    width:42px;
    height:42px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.06);
    flex:0 0 auto;
}

.node-icon-svg{
    width:26px;
    height:26px;
    stroke:#bfe6ff;
    fill:none;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.node-title-wrap{
    min-width:0;
    flex:1 1 auto;
}

.node-head{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:6px;
}

.node-status{
    width:12px;
    height:12px;
    border-radius:50%;
    flex:0 0 auto;
    background:#64748b;
}

.node-status.is-run{ background:#00d084; box-shadow:0 0 12px rgba(0,208,132,0.85); }
.node-status.is-warn{ background:#ffb020; box-shadow:0 0 12px rgba(255,176,32,0.85); }
.node-status.is-alarm{ background:#ff4d5a; box-shadow:0 0 14px rgba(255,77,90,0.95); }
.node-status.is-stop{ background:#7a8794; }
.node-status.is-maint{ background:#38bdf8; box-shadow:0 0 12px rgba(56,189,248,0.85); }
.node-status.is-unknown{ background:#64748b; }

.node-title{
    font-size:13px;
    font-weight:700;
    color:#f4f8fc;
    line-height:1.25;
}

.node-type{
    font-size:11px;
    letter-spacing:0.14em;
    color:#7ea7c5;
}

.node-body{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.metric-row{
    display:flex;
    justify-content:space-between;
    gap:10px;
    font-size:12px;
    color:#a8bdcf;
    padding:6px 8px;
    background:rgba(255,255,255,0.03);
    border-radius:8px;
    line-height:1.35;
}

.metric-row strong{
    color:#f2f7fb;
    font-size:13px;
}

/* types */
.type-robot::before{ background:linear-gradient(180deg,#00d084,#4ade80); }
.type-conveyor::before{ background:linear-gradient(180deg,#00a6fb,#38bdf8); }
.type-oven::before{ background:linear-gradient(180deg,#ff9f1c,#ff4d5a); }
.type-qc::before{ background:linear-gradient(180deg,#8b5cf6,#3b82f6); }
.type-pump::before{ background:linear-gradient(180deg,#06b6d4,#3b82f6); }
.type-tank::before{ background:linear-gradient(180deg,#14b8a6,#0ea5e9); }
.type-monitor::before{ background:linear-gradient(180deg,#10b981,#14b8a6); }

/* =========================
   HEALTHCARE CARD
========================= */

.icu-bed-card{
    position:absolute;
    width:180px;
    min-height:150px;
    padding:12px;
    border-radius:16px;
    border:1px solid rgba(16,185,129,0.16);
    background:linear-gradient(180deg, rgba(10,26,28,0.96), rgba(7,18,20,0.96));
    box-shadow:0 14px 28px rgba(0,0,0,0.28);
    z-index:4;
    transition:transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    cursor:pointer;
}

.icu-bed-card:hover{
    transform:translateY(-2px);
    border-color:rgba(16,185,129,0.34);
    box-shadow:0 18px 34px rgba(0,0,0,0.34), 0 0 0 1px rgba(16,185,129,0.10);
}

.icu-bed-head{
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:flex-start;
    margin-bottom:10px;
}

.icu-bed-title-wrap{
    display:flex;
    gap:10px;
    align-items:flex-start;
    min-width:0;
}

.icu-bed-title{
    color:#effff9;
    font-weight:700;
    font-size:13px;
    line-height:1.25;
}

.icu-bed-subtitle{
    color:#7edec2;
    font-size:10px;
    letter-spacing:0.12em;
    margin-top:3px;
}

.icu-bed-screen-icon{
    width:34px;
    height:34px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.06);
    flex:0 0 auto;
}

.icu-bed-screen-icon svg{
    width:20px;
    height:20px;
    stroke:#bff7e7;
    fill:none;
    stroke-width:2;
}

.icu-waveform{
    position:relative;
    height:28px;
    margin-bottom:10px;
    border-radius:8px;
    background:rgba(255,255,255,0.03);
    overflow:hidden;
}

.icu-wave-line{
    position:absolute;
    left:0;
    right:0;
    top:50%;
    height:2px;
    transform:translateY(-50%);
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            transparent 8%,
            #10b981 10%,
            #10b981 18%,
            transparent 20%,
            transparent 28%,
            #10b981 30%,
            #10b981 31%,
            transparent 32%,
            transparent 44%,
            #10b981 46%,
            #10b981 55%,
            transparent 57%,
            transparent 100%
        );
    animation:icuWave 3s linear infinite;
    opacity:0.95;
}

@keyframes icuWave{
    from{ transform:translate(-18%, -50%); }
    to{ transform:translate(18%, -50%); }
}

.icu-metrics-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:8px;
}

.icu-metric-box{
    padding:8px 6px;
    border-radius:10px;
    background:rgba(255,255,255,0.03);
    text-align:center;
}

.icu-metric-box span{
    display:block;
    color:#86baa9;
    font-size:10px;
    letter-spacing:0.06em;
    margin-bottom:6px;
}

.icu-metric-box strong{
    display:block;
    color:#f0fffa;
    font-size:16px;
    line-height:1.1;
}

/* =========================
   WATER SPECIFICS
========================= */

.synoptic-board.sector-water .decoration.zone-block{
    border-radius:26px;
    overflow:hidden;
    position:absolute;
}

.synoptic-board.sector-water .decoration.zone-block::before{
    content:"";
    position:absolute;
    left:8px;
    right:8px;
    bottom:8px;
    height:38%;
    border-radius:18px;
    background:linear-gradient(180deg, rgba(56,189,248,0.18), rgba(6,182,212,0.36));
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);
}

.synoptic-board.sector-water .decoration.zone-block{
    align-items:flex-start;
    padding-top:14px;
    font-weight:700;
    letter-spacing:0.08em;
}

.synoptic-board.sector-water .pipe-base{
    stroke:#1f3b52;
    stroke-width:14;
}

.synoptic-board.sector-water .pipe-glow{
    stroke-width:5;
}

.synoptic-board.sector-water .pipe-flow{
    stroke:#38bdf8;
    stroke-width:4;
    stroke-dasharray:24 70;
}

/* =========================
   HEALTHCARE BOARD
========================= */

.synoptic-board.sector-healthcare{
    background:
        radial-gradient(circle at center, rgba(16,185,129,0.04), transparent 30%),
        linear-gradient(180deg, rgba(8,18,22,0.98), rgba(5,12,16,0.98));
}

.synoptic-board.sector-healthcare .grid-overlay{
    background-image:
        linear-gradient(rgba(16,185,129,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16,185,129,0.04) 1px, transparent 1px);
}

.synoptic-board.sector-healthcare .ambient-glow-1{
    background:rgba(16,185,129,0.12);
}

.synoptic-board.sector-healthcare .ambient-glow-2{
    background:rgba(20,184,166,0.10);
}

/* =========================
   SIDEBAR
========================= */

.sidebar-panel{
    padding:16px;
    position:sticky;
    top:92px;
    min-width:0;
}

.panel-title{
    font-size:13px;
    font-weight:700;
    letter-spacing:0.10em;
    text-transform:uppercase;
    color:#90a7bb;
    margin-bottom:14px;
}

.kpi-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-bottom:18px;
}

.kpi-card{
    padding:14px;
    border-radius:14px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(136,154,172,0.12);
    min-width:0;
}

.kpi-label{
    display:block;
    font-size:11px;
    letter-spacing:0.08em;
    color:#8ea6ba;
    margin-bottom:8px;
}

.kpi-card strong{
    font-size:24px;
    color:#f7fbff;
    line-height:1.2;
    word-break:break-word;
}

/* =========================
   SELECTED MACHINE PANEL
========================= */

.selected-machine-card{
    border-radius:14px;
    padding:14px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(136,154,172,0.12);
}

.selected-machine-head{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
}

.selected-machine-head strong{
    color:#f7fbff;
    font-size:14px;
}

.selected-machine-head span{
    color:#9ec0d8;
    font-size:12px;
    letter-spacing:0.08em;
}

.selected-machine-body{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.selected-machine-row{
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:8px 10px;
    border-radius:10px;
    background:rgba(255,255,255,0.03);
}

.selected-machine-row span{
    color:#8ea6ba;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.06em;
}

.selected-machine-row strong{
    color:#f2f8fc;
    font-size:12px;
    text-align:right;
    word-break:break-word;
    max-width:60%;
}

.selected-machine-actions{
    margin-top:12px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

/* =========================
   ALARMS
========================= */

.alarm-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.alarm-list.large .alarm-item{
    padding:14px;
}

.alarm-empty{
    border-radius:12px;
    padding:14px;
    color:#8fa5ba;
    background:rgba(255,255,255,0.03);
    border:1px dashed rgba(136,154,172,0.14);
    font-size:13px;
    line-height:1.45;
}

.alarm-item{
    border-radius:12px;
    padding:12px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(136,154,172,0.12);
}

.alarm-item.warning{
    border-color:rgba(255,176,32,0.35);
    box-shadow:inset 3px 0 0 rgba(255,176,32,0.7);
}

.alarm-item.critical{
    border-color:rgba(255,77,90,0.34);
    box-shadow:inset 3px 0 0 rgba(255,77,90,0.8);
}

.alarm-item-head{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-bottom:6px;
}

.alarm-item-head strong{
    color:#f6f9fc;
    font-size:13px;
    line-height:1.35;
}

.alarm-item-head span{
    font-size:11px;
    letter-spacing:0.08em;
    color:#8fa8bd;
    white-space:nowrap;
}

.alarm-item-body{
    color:#b4c4d2;
    font-size:12px;
    line-height:1.5;
}

/* =========================
   SELECTION / CLICK FX
========================= */

.is-selected{
    border-color:rgba(56,189,248,0.85) !important;
    box-shadow:
        0 18px 38px rgba(0,0,0,0.34),
        0 0 0 2px rgba(56,189,248,0.20),
        0 0 24px rgba(56,189,248,0.12) !important;
}

.click-pulse{
    animation:clickPulse 0.35s ease;
}

@keyframes clickPulse{
    0%{ transform:scale(1); }
    50%{ transform:scale(1.02); }
    100%{ transform:scale(1); }
}

/* =========================
   MACHINE PAGE
========================= */

.machine-page,
.alarms-page,
.admin-page{
    padding:18px;
}

.machine-card{
    padding:20px;
}

.machine-card-header{
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:flex-start;
    margin-bottom:18px;
}

.machine-header-left{
    display:flex;
    align-items:center;
    gap:16px;
}

.detail-icon-wrap{
    width:72px;
    height:72px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 10px 22px rgba(0,0,0,0.18);
    flex:0 0 auto;
}

.detail-icon-svg{
    width:40px;
    height:40px;
    stroke:#c6ecff;
    fill:none;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.machine-state-badge{
    min-width:110px;
    text-align:center;
    padding:12px 16px;
    border-radius:14px;
    font-weight:700;
    letter-spacing:0.08em;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(136,154,172,0.18);
}

.machine-state-badge.state-run{
    color:#dfffee;
    background:rgba(0,208,132,0.12);
    border-color:rgba(0,208,132,0.35);
}

.machine-state-badge.state-warn{
    color:#fff5dc;
    background:rgba(255,176,32,0.12);
    border-color:rgba(255,176,32,0.35);
}

.machine-state-badge.state-alarm{
    color:#ffe7ea;
    background:rgba(255,77,90,0.14);
    border-color:rgba(255,77,90,0.36);
}

.machine-state-badge.state-stop{
    color:#e2e8f0;
    background:rgba(100,116,139,0.18);
    border-color:rgba(100,116,139,0.35);
}

.machine-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:14px;
    margin-bottom:18px;
}

.machine-metric-card{
    padding:16px;
    border-radius:16px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(136,154,172,0.12);
}

.machine-metric-card span{
    display:block;
    font-size:12px;
    color:#8ea6ba;
    margin-bottom:10px;
    line-height:1.35;
}

.machine-metric-card strong{
    display:block;
    font-size:28px;
    color:#f7fbff;
    margin-bottom:6px;
    line-height:1.1;
}

.machine-metric-card small{
    color:#7f98ad;
    font-size:12px;
}

.machine-meta{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin-bottom:20px;
}

.meta-box{
    padding:15px;
    border-radius:14px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(136,154,172,0.12);
}

.meta-box span{
    display:block;
    margin-bottom:8px;
    color:#8da5ba;
    font-size:12px;
}

.meta-box strong{
    color:#f5f9fc;
    font-size:16px;
    line-height:1.35;
}

.detail-alarms-block h2{
    margin:0 0 12px 0;
    font-size:18px;
    color:#f2f7fb;
}

/* =========================
   TRENDS
========================= */

.trend-toolbar{
    margin-bottom:16px;
    max-width:420px;
}

.trend-chart-card{
    border-radius:18px;
    padding:16px;
    background:
        linear-gradient(rgba(148,163,184,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,184,0.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(10,16,24,0.9), rgba(6,10,16,0.98));
    background-size:28px 28px, 28px 28px, auto;
    border:1px solid rgba(136,154,172,0.12);
    overflow:auto;
    margin-bottom:18px;
}

.trend-metrics-summary{
    display:block;
}

.trend-summary-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:14px;
}

.trend-summary-card{
    padding:16px;
    border-radius:16px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(136,154,172,0.12);
}

.trend-summary-card span{
    display:block;
    color:#8ea6ba;
    font-size:12px;
    margin-bottom:10px;
}

.trend-summary-card strong{
    display:block;
    color:#f6fbff;
    font-size:28px;
    margin-bottom:6px;
}

.trend-summary-card small{
    color:#7f98ad;
    font-size:12px;
}

.trend-placeholder{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.trend-screen{
    height:300px;
    border-radius:18px;
    background:
        linear-gradient(rgba(148,163,184,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,184,0.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(10,16,24,0.9), rgba(6,10,16,0.98));
    background-size:28px 28px, 28px 28px, auto;
    position:relative;
    overflow:hidden;
    border:1px solid rgba(136,154,172,0.12);
}

.trend-line{
    position:absolute;
    left:0;
    right:0;
    top:35%;
    height:2px;
    background:linear-gradient(90deg, transparent, #00d084 8%, #00d084 25%, transparent 40%);
    animation:scanLine 5s linear infinite;
}

.trend-line.line-2{
    top:58%;
    background:linear-gradient(90deg, transparent, #38bdf8 10%, #38bdf8 28%, transparent 45%);
    animation-duration:6s;
}

.trend-line.line-3{
    top:72%;
    background:linear-gradient(90deg, transparent, #ffb020 12%, #ffb020 32%, transparent 48%);
    animation-duration:7s;
}

@keyframes scanLine{
    from{ transform:translateX(-30%); }
    to{ transform:translateX(100%); }
}

/* =========================
   ADMIN
========================= */

.admin-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 360px;
    gap:18px;
    align-items:start;
}

.admin-main-card,
.admin-side-card{
    padding:20px;
}

.admin-section-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:18px;
}

.admin-section-head.compact{
    margin-bottom:14px;
}

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

.admin-field-card{
    padding:16px;
    border-radius:16px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(136,154,172,0.12);
    min-width:0;
}

.admin-field-card label{
    display:block;
    font-size:12px;
    color:#8ea6ba;
    margin-bottom:8px;
    text-transform:uppercase;
    letter-spacing:0.08em;
    line-height:1.4;
}

.admin-actions{
    grid-column:1 / -1;
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    align-items:center;
}

.admin-flash{
    border-radius:14px;
    padding:14px 16px;
    margin-bottom:16px;
    font-size:14px;
    border:1px solid rgba(136,154,172,0.16);
    background:rgba(255,255,255,0.04);
    line-height:1.45;
}

.admin-flash.success{
    border-color:rgba(0,208,132,0.35);
    background:rgba(0,208,132,0.10);
    color:#dfffee;
}

.admin-flash.warning{
    border-color:rgba(255,176,32,0.35);
    background:rgba(255,176,32,0.10);
    color:#fff1cf;
}

.admin-stat-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.admin-stat-item{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:14px 16px;
    border-radius:14px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(136,154,172,0.12);
    align-items:flex-start;
}

.admin-stat-item span{
    color:#8ea6ba;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.08em;
    line-height:1.4;
}

.admin-stat-item strong{
    color:#f6fbff;
    text-align:right;
    line-height:1.45;
    max-width:60%;
    word-break:break-word;
}

.admin-side-actions{
    margin-top:16px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

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

.admin-dashboard-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 360px;
    gap:18px;
    align-items:start;
}

.admin-kpi-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    margin-bottom:18px;
}

.admin-kpi-card{
    padding:16px;
    border-radius:16px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(136,154,172,0.12);
}

.admin-kpi-card.incident-on{
    border-color:rgba(255,77,90,0.30);
    box-shadow:0 0 16px rgba(255,77,90,0.08);
}

.admin-kpi-label{
    display:block;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:#8ea6ba;
    margin-bottom:8px;
}

.admin-kpi-card strong{
    display:block;
    font-size:22px;
    color:#f6fbff;
    line-height:1.2;
    margin-bottom:6px;
}

.admin-kpi-card small{
    color:#8ea6ba;
    font-size:12px;
    line-height:1.4;
}

.admin-quick-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

/* =========================
   EVENT LOG
========================= */

.dashboard-events-preview{
    margin-top:24px;
}

.event-log-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.event-log-list.compact .event-log-item{
    padding:12px 14px;
}

.event-log-item{
    border-radius:14px;
    padding:14px 16px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(136,154,172,0.12);
}

.event-log-item.level-info{
    border-left:4px solid rgba(56,189,248,0.8);
}

.event-log-item.level-warning{
    border-left:4px solid rgba(255,176,32,0.85);
}

.event-log-item.level-critical{
    border-left:4px solid rgba(255,77,90,0.9);
}

.event-log-head{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-bottom:8px;
    align-items:flex-start;
}

.event-log-head strong{
    color:#f6fbff;
    line-height:1.4;
    font-size:14px;
}

.event-log-head span{
    font-size:11px;
    letter-spacing:0.08em;
    color:#9bb1c4;
    white-space:nowrap;
}

.event-log-meta{
    margin-bottom:10px;
}

.event-log-meta span{
    font-size:12px;
    color:#8ea6ba;
}

.event-log-context{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:10px;
}

.event-context-row{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:8px 10px;
    border-radius:10px;
    background:rgba(255,255,255,0.03);
}

.event-context-row span{
    color:#8ea6ba;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.06em;
}

.event-context-row strong{
    color:#f2f8fc;
    font-size:12px;
    text-align:right;
    word-break:break-word;
    max-width:60%;
}

/* =========================
   INPUTS / BUTTONS
========================= */

.scada-input{
    width:100%;
    margin-top:10px;
    padding:12px 14px;
    border-radius:12px;
    border:1px solid rgba(136,154,172,0.18);
    background:rgba(255,255,255,0.04);
    color:#f4f8fc;
    outline:none;
    font-size:14px;
    line-height:1.4;
}

.scada-input:focus{
    border-color:rgba(0,208,132,0.40);
    box-shadow:0 0 0 3px rgba(0,208,132,0.10);
}

.scada-btn{
    padding:12px 18px;
    border:none;
    border-radius:12px;
    background:linear-gradient(135deg,#00d084,#00a6fb);
    color:#071019;
    font-weight:700;
    cursor:pointer;
    font-size:14px;
    line-height:1.2;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
}

.scada-btn-danger{
    background:linear-gradient(135deg,#ff9f1c,#ff4d5a);
    color:#fff;
}

.scada-admin-form{
    display:block;
}

/* =========================
   ADMIN LOGIN
========================= */

.admin-login-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px 18px;
}

.admin-login-card{
    width:min(100%, 460px);
    background:linear-gradient(180deg, rgba(13,22,34,0.98), rgba(10,18,28,0.98));
    border:1px solid rgba(123,144,166,0.16);
    border-radius:22px;
    box-shadow:0 24px 60px rgba(0,0,0,0.40);
    padding:24px;
}

.admin-login-brand{
    display:flex;
    align-items:center;
    gap:14px;
}

.admin-login-form{
    display:flex;
    flex-direction:column;
    gap:16px;
}

/* =========================
   INCIDENT BANNER
========================= */

.incident-banner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:12px 18px;
    margin:18px 18px 0 18px;
    border-radius:14px;
    border:1px solid rgba(255,77,90,0.30);
    background:linear-gradient(180deg, rgba(70,12,18,0.92), rgba(42,10,14,0.92));
    box-shadow:0 12px 30px rgba(0,0,0,0.28);
}

.incident-banner-left,
.incident-banner-right{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.incident-banner-left strong{
    color:#ffe6ea;
    letter-spacing:0.08em;
    font-size:13px;
}

.incident-banner-right span{
    color:#ffccd3;
    font-size:12px;
    letter-spacing:0.04em;
}

.incident-banner-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#ff4d5a;
    box-shadow:0 0 12px rgba(255,77,90,0.95);
    animation:incidentBlink 1s ease-in-out infinite alternate;
}

@keyframes incidentBlink{
    from{ opacity:0.45; }
    to{ opacity:1; }
}

/* =========================
   PACK THEMES
========================= */

body.theme-industrial-dark{
    background:
        radial-gradient(circle at top left, rgba(0,208,132,0.08), transparent 28%),
        radial-gradient(circle at top right, rgba(67,97,238,0.08), transparent 22%),
        linear-gradient(180deg,#0a1119 0%,#071019 100%);
}

body.theme-water-blue{
    background:
        radial-gradient(circle at top left, rgba(14,165,233,0.12), transparent 30%),
        radial-gradient(circle at bottom right, rgba(6,182,212,0.10), transparent 28%),
        linear-gradient(180deg,#08131d 0%,#06111a 100%);
}

body.theme-icu-monitoring{
    background:
        radial-gradient(circle at top left, rgba(16,185,129,0.10), transparent 26%),
        radial-gradient(circle at top right, rgba(20,184,166,0.08), transparent 24%),
        linear-gradient(180deg,#091117 0%,#050c12 100%);
}

body.theme-water-blue .brand-mark{
    background:linear-gradient(135deg,#0ea5e9,#06b6d4);
    box-shadow:0 0 18px rgba(14,165,233,0.45);
}

body.theme-icu-monitoring .brand-mark{
    background:linear-gradient(135deg,#10b981,#14b8a6);
    box-shadow:0 0 18px rgba(16,185,129,0.45);
}

body.theme-water-blue .pipe-flow{
    stroke:#38bdf8;
}

body.theme-water-blue .pipe-glow{
    opacity:1;
}

body.theme-water-blue .scada-node::before{
    background:linear-gradient(180deg,#0ea5e9,#06b6d4);
}

body.theme-water-blue .dot.run{
    background:#06b6d4;
    box-shadow:0 0 10px rgba(6,182,212,0.65);
}

body.theme-water-blue .node-status.is-run{
    background:#06b6d4;
    box-shadow:0 0 12px rgba(6,182,212,0.85);
}

body.theme-water-blue .type-pump::before{ background:linear-gradient(180deg,#06b6d4,#3b82f6); }
body.theme-water-blue .type-tank::before{ background:linear-gradient(180deg,#14b8a6,#0ea5e9); }

body.theme-icu-monitoring .pipe-flow{
    stroke:#10b981;
}

body.theme-icu-monitoring .scada-node::before{
    background:linear-gradient(180deg,#10b981,#14b8a6);
}

body.theme-icu-monitoring .dot.run{
    background:#10b981;
    box-shadow:0 0 10px rgba(16,185,129,0.65);
}

body.theme-icu-monitoring .node-status.is-run{
    background:#10b981;
    box-shadow:0 0 12px rgba(16,185,129,0.85);
}

body.theme-icu-monitoring .type-monitor::before{
    background:linear-gradient(180deg,#10b981,#14b8a6);
}

body.theme-water-blue .decoration.zone-block{
    background:linear-gradient(180deg, rgba(10,31,48,0.94), rgba(6,20,32,0.94));
    border-color:rgba(56,189,248,0.18);
    color:#b8e8ff;
}

body.theme-icu-monitoring .decoration.zone-block{
    background:linear-gradient(180deg, rgba(10,28,28,0.94), rgba(6,16,18,0.94));
    border-color:rgba(16,185,129,0.16);
    color:#bdf7e7;
}

body.theme-water-blue .synoptic-board{
    background:
        radial-gradient(circle at 25% 30%, rgba(14,165,233,0.06), transparent 20%),
        linear-gradient(180deg, rgba(8,22,34,0.98), rgba(6,16,26,0.98));
}

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

@media (max-width: 1280px){
    .main-layout{
        grid-template-columns:1fr;
    }

    .sidebar-panel{
        position:static;
        top:auto;
    }

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

    .admin-dashboard-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width: 900px){
    .topbar{
        flex-direction:column;
        align-items:flex-start;
        height:auto;
        padding:14px;
        gap:12px;
    }

    .topbar-center,
    .topbar-right{
        flex-wrap:wrap;
    }

    .machine-meta{
        grid-template-columns:1fr;
    }

    .machine-card-header{
        flex-direction:column;
        align-items:flex-start;
    }

    .machine-header-left{
        align-items:flex-start;
    }

    .admin-form-grid{
        grid-template-columns:1fr;
    }

    .incident-banner{
        flex-direction:column;
        align-items:flex-start;
    }

    .admin-kpi-grid{
        grid-template-columns:1fr;
    }

    .trend-chart-card canvas{
        width:100%;
        height:auto;
    }
}
.scada-btn.scada-btn-secondary{
    background:rgba(255,255,255,0.06);
    color:#dfeaf3;
    border:1px solid rgba(136,154,172,0.18);
}

.admin-target-card{
    grid-column:1 / -1;
}

.target-help{
    color:#8ea6ba;
    font-size:12px;
    line-height:1.45;
    margin-bottom:12px;
}

.target-toolbar{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:12px;
}

.target-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

.target-item{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:12px;
    border-radius:12px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(136,154,172,0.12);
    cursor:pointer;
}

.target-item input{
    margin-top:2px;
    flex:0 0 auto;
}

.target-item-main{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
}

.target-item-main strong{
    color:#f4f8fc;
    font-size:13px;
    line-height:1.35;
}

.target-item-main small{
    color:#8ea6ba;
    font-size:11px;
    letter-spacing:0.04em;
    word-break:break-word;
}

.admin-target-summary{
    margin-top:18px;
}

.target-summary-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.target-summary-item{
    padding:12px;
    border-radius:12px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(136,154,172,0.12);
}

.target-summary-item strong{
    display:block;
    color:#f4f8fc;
    font-size:13px;
    margin-bottom:4px;
}

.target-summary-item span{
    color:#8ea6ba;
    font-size:11px;
    letter-spacing:0.04em;
}

@media (max-width: 900px){
    .target-list{
        grid-template-columns:1fr;
    }
}
.scada-btn.scada-btn-secondary{
    background:rgba(255,255,255,0.06);
    color:#dfeaf3;
    border:1px solid rgba(136,154,172,0.18);
}

.admin-target-card{
    grid-column:1 / -1;
}

.target-help{
    color:#8ea6ba;
    font-size:12px;
    line-height:1.45;
    margin-bottom:12px;
}

.target-toolbar{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:12px;
}

.target-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

.target-item{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:12px;
    border-radius:12px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(136,154,172,0.12);
    cursor:pointer;
}

.target-item input{
    margin-top:2px;
    flex:0 0 auto;
}

.target-item-main{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
}

.target-item-main strong{
    color:#f4f8fc;
    font-size:13px;
    line-height:1.35;
}

.target-item-main small{
    color:#8ea6ba;
    font-size:11px;
    letter-spacing:0.04em;
    word-break:break-word;
}

.admin-target-summary{
    margin-top:18px;
}

.target-summary-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.target-summary-item{
    padding:12px;
    border-radius:12px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(136,154,172,0.12);
}

.target-summary-item strong{
    display:block;
    color:#f4f8fc;
    font-size:13px;
    margin-bottom:4px;
}

.target-summary-item span{
    color:#8ea6ba;
    font-size:11px;
    letter-spacing:0.04em;
}

@media (max-width: 900px){
    .target-list{
        grid-template-columns:1fr;
    }
}
.scada-btn.scada-btn-secondary{
    background:rgba(255,255,255,0.06);
    color:#dfeaf3;
    border:1px solid rgba(136,154,172,0.18);
}

.admin-target-card{
    grid-column:1 / -1;
}

.target-help{
    color:#8ea6ba;
    font-size:12px;
    line-height:1.45;
    margin-bottom:12px;
}

.target-toolbar{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:12px;
}

.target-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

.target-item{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:12px;
    border-radius:12px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(136,154,172,0.12);
    cursor:pointer;
}

.target-item input{
    margin-top:2px;
    flex:0 0 auto;
}

.target-item-main{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
}

.target-item-main strong{
    color:#f4f8fc;
    font-size:13px;
    line-height:1.35;
}

.target-item-main small{
    color:#8ea6ba;
    font-size:11px;
    letter-spacing:0.04em;
    word-break:break-word;
}

.admin-target-summary{
    margin-top:18px;
}

.target-summary-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.target-summary-item{
    padding:12px;
    border-radius:12px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(136,154,172,0.12);
}

.target-summary-item strong{
    display:block;
    color:#f4f8fc;
    font-size:13px;
    margin-bottom:4px;
}

.target-summary-item span{
    color:#8ea6ba;
    font-size:11px;
    letter-spacing:0.04em;
}

.scenario-block{
    margin-bottom:18px;
}

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

.scenario-card{
    text-align:left;
    border:none;
    border-radius:14px;
    padding:14px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(136,154,172,0.12);
    color:#e5eef6;
    cursor:pointer;
    transition:0.18s ease;
}

.scenario-card:hover{
    transform:translateY(-1px);
    border-color:rgba(56,189,248,0.30);
    box-shadow:0 10px 20px rgba(0,0,0,0.18);
}

.scenario-card.is-active{
    border-color:rgba(56,189,248,0.55);
    box-shadow:0 0 0 2px rgba(56,189,248,0.12);
}

.scenario-card strong{
    display:block;
    font-size:14px;
    color:#f5f9fc;
    margin-bottom:8px;
    line-height:1.3;
}

.scenario-card span{
    display:block;
    font-size:12px;
    color:#8ea6ba;
    line-height:1.45;
}

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

@media (max-width: 900px){
    .target-list{
        grid-template-columns:1fr;
    }
}