@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
    /* iOS Glassmorphism — Light Mode */
    --bg-primary:       #e2ecf5;
    --bg-card:          rgba(255, 255, 255, 0.16); /* Transparansi sangat tinggi agar background terlihat jelas */
    --bg-card-hover:    rgba(255, 255, 255, 0.28);
    --bg-header:        rgba(255, 255, 255, 0.25);
    --border-color:     rgba(255, 255, 255, 0.55);
    --border-subtle:    rgba(255, 255, 255, 0.35);
    --shadow-card:      0 8px 32px rgba(31, 38, 135, 0.06);
    --shadow-hover:     0 16px 48px rgba(31, 38, 135, 0.12);

    --text-main:        #12223a;
    --text-sub:         #2b4260;
    --text-muted:       rgba(18, 34, 58, 0.55);

    /* iOS System Colors */
    --color-primary:    #007aff;
    --color-primary-bg: rgba(0, 122, 255, 0.12);

    --color-active:     #34c759;
    --color-active-bg:  rgba(52, 199, 89, 0.15);

    --color-warning:    #ff9500;
    --color-warning-bg: rgba(255, 149, 0, 0.15);

    --color-alert:      #ff3b30;
    --color-alert-bg:   rgba(255, 59, 48, 0.12);

    --color-purple:     #af52de;
    --color-teal:       #5ac8fa;

    --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Radii */
    --r-card: 20px;
    --r-inner: 12px;
    --r-pill: 99px;

    /* Latar Belakang Visibilitas Tinggi */
    --bg-image-opacity: 1;
    --bg-image-filter: saturate(0.85) brightness(1.02);
}

body.dark-mode {
    /* iOS Glassmorphism — Dark Mode */
    --bg-primary:       #0d1527;
    --bg-card:          rgba(10, 22, 40, 0.28); /* Transparansi sangat tinggi pada tema gelap */
    --bg-card-hover:    rgba(10, 22, 40, 0.42);
    --bg-header:        rgba(10, 22, 40, 0.35);
    --border-color:     rgba(255, 255, 255, 0.15);
    --border-subtle:    rgba(255, 255, 255, 0.08);
    --shadow-card:      0 8px 32px rgba(0, 0, 0, 0.25);
    --shadow-hover:     0 16px 48px rgba(0, 0, 0, 0.35);

    --text-main:        #f1f5f9;
    --text-sub:         #cbd5e1;
    --text-muted:       rgba(241, 245, 249, 0.5);

    /* iOS System Colors (Dark) */
    --color-primary:    #0a84ff;
    --color-primary-bg: rgba(10, 132, 255, 0.18);

    --color-active:     #30d158;
    --color-active-bg:  rgba(48, 209, 88, 0.2);

    --color-warning:    #ffd60a;
    --color-warning-bg: rgba(255, 214, 10, 0.2);

    --color-alert:      #ff453a;
    --color-alert-bg:   rgba(255, 69, 58, 0.18);

    --bg-image-opacity: 0.48;
    --bg-image-filter: saturate(0.7) brightness(0.62);
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ===== BODY ===== */
body {
    background-color: var(--bg-primary);
    color: var(--text-main);
    font-family: var(--font-sans);
    line-height: 1.5;
    min-height: 100vh;
    padding: 18px;
    overflow-x: hidden;
    position: relative;
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* ===== BACKGROUND PHOTO (Ken Burns) ===== */
body::before {
    content: "";
    position: fixed;
    inset: -6%;
    background: url('biogas.webp') no-repeat center center / cover;
    opacity: var(--bg-image-opacity);
    filter: var(--bg-image-filter);
    z-index: -2;
    pointer-events: none;
    animation: bg-pan 42s ease-in-out infinite alternate;
    transition: opacity 0.4s ease, filter 0.4s ease;
}

@keyframes bg-pan {
    0%   { transform: scale(1.00) translate(0%,   0%); }
    50%  { transform: scale(1.04) translate(-1.2%, 0.8%); }
    100% { transform: scale(1.08) translate(0.8%, -1.2%); }
}

/* ===== ANIMATED COLOUR BLOBS ===== */
.bg-glow {
    position: fixed;
    border-radius: 50%;
    filter: blur(120px);
    z-index: -1;
    pointer-events: none;
    will-change: transform;
}
.bg-glow-1 {
    width: 650px; height: 650px;
    background: radial-gradient(circle, rgba(0, 122, 255, 0.18) 0%, transparent 70%);
    top: -180px; left: -180px;
    animation: blob-drift 30s ease-in-out infinite alternate;
}
.bg-glow-2 {
    width: 550px; height: 550px;
    background: radial-gradient(circle, rgba(52, 199, 89, 0.14) 0%, transparent 70%);
    bottom: -140px; right: -140px;
    animation: blob-drift 38s ease-in-out infinite alternate-reverse;
}
.bg-glow-3 {
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(175, 82, 222, 0.10) 0%, transparent 70%);
    top: 38%; left: 42%;
    animation: blob-drift 24s ease-in-out infinite alternate;
}

@keyframes blob-drift {
    0%   { transform: translate(0,   0)   scale(1.00); }
    50%  { transform: translate(55px, -65px) scale(1.12); }
    100% { transform: translate(-35px, 45px) scale(0.90); }
}

/* ===== CONTAINER ===== */
.dashboard-container {
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ===================================================
   HEADER
   =================================================== */
header {
    background: var(--bg-header);
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    border: 1px solid var(--border-color);
    border-radius: var(--r-card);
    padding: 14px 26px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
    box-shadow: var(--shadow-card);
    transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

/* Theme Toggle Button Style */
.theme-toggle-btn {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    width: 38px;
    height: 38px;
    border-radius: var(--r-inner);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.theme-toggle-btn:hover {
    background: var(--bg-card-hover);
    transform: scale(1.05);
    box-shadow: var(--shadow-hover);
}
.theme-toggle-btn:active {
    transform: scale(0.95);
}

.header-title-area {
    display: flex;
    align-items: center;
    gap: 13px;
}

.header-icon {
    font-size: 22px;
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-primary-bg);
    border: 1px solid rgba(0, 122, 255, 0.22);
    border-radius: var(--r-inner);
    box-shadow: 0 2px 12px rgba(0, 122, 255, 0.12);
}

.header-titles h1 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.3px;
}

.header-titles p {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 1px;
}

.header-status-area {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Status badges */
.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: var(--r-pill);
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: var(--text-muted);
    transition: all 0.3s ease;
}
.status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.5;
}
.status-indicator.active {
    background: var(--color-active-bg);
    border-color: rgba(52, 199, 89, 0.35);
    color: #1e8a3e;
}
.status-indicator.active .status-dot {
    opacity: 1;
    animation: dot-pulse-green 1.8s infinite;
}
.status-indicator.warning {
    background: var(--color-warning-bg);
    border-color: rgba(255, 149, 0, 0.35);
    color: #c87000;
}
.status-indicator.warning .status-dot {
    opacity: 1;
    animation: dot-pulse-orange 1.8s infinite;
}
.status-indicator.alert {
    background: var(--color-alert-bg);
    border-color: rgba(255, 59, 48, 0.35);
    color: #c0281f;
}
.status-indicator.alert .status-dot {
    opacity: 1;
    animation: dot-pulse-red 1.8s infinite;
}

/* ===================================================
   GAS LEVEL WIDGET  (di Header)
   =================================================== */
.gas-level-widget {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 7px 14px;
    border-radius: var(--r-inner);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-card);
    min-width: 150px;
    transition: background-color 0.4s ease, border-color 0.4s ease;
}

.gas-level-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.3px;
}

.gas-level-bar-track {
    display: flex;
    gap: 4px;
    width: 100%;
}

.gas-level-seg {
    flex: 1;
    height: 7px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
}
.gas-level-seg.seg-low.seg-active  { background: var(--color-active);  box-shadow: 0 0 6px rgba(52,199,89,0.5); }
.gas-level-seg.seg-mid.seg-active  { background: var(--color-warning); box-shadow: 0 0 6px rgba(255,149,0,0.5); }
.gas-level-seg.seg-high.seg-active {
    background: var(--color-alert);
    box-shadow: 0 0 6px rgba(255,59,48,0.6);
    animation: seg-blink 1.1s ease-in-out infinite alternate;
}

@keyframes seg-blink { 0% { opacity: 1; } 100% { opacity: 0.5; } }

.gas-level-text {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    transition: color 0.3s;
}
.gas-level-text.lvl-low  { color: #1e8a3e; }
.gas-level-text.lvl-mid  { color: #c87000; }
.gas-level-text.lvl-high { color: #c0281f; }

/* ===================================================
   GRID LAYOUT  (50 : 50)
   =================================================== */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
/* Sembunyikan kolom kosong pertama di mobile/tablet agar widget langsung di atas */
.dashboard-grid > .dashboard-section:first-child {
    display: none;
}

@media (min-width: 1024px) {
    .dashboard-grid { grid-template-columns: 1fr 1fr; }
    .dashboard-grid > .dashboard-section:first-child {
        display: flex;
    }
}

.dashboard-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ===================================================
   CARD
   =================================================== */
.card {
    background: var(--bg-card);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid var(--border-color);
    border-radius: var(--r-card);
    padding: 22px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.3s ease, transform 0.3s ease, background 0.3s ease;
}
.card:hover {
    background: var(--bg-card-hover);
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

/* Subtle shine stripe at top */
.card::before {
    content: "";
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
}

.card-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-sub);
    letter-spacing: -0.1px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ===================================================
   HUMIDITY CARD
   =================================================== */
.humidity-card {
    border-color: rgba(0, 122, 255, 0.22);
    background: var(--bg-card);
}

.humidity-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.humidity-icon {
    font-size: 22px;
    width: 50px; height: 50px;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-primary-bg);
    border: 1px solid rgba(0, 122, 255, 0.20);
    border-radius: var(--r-inner);
    box-shadow: 0 4px 14px rgba(0, 122, 255, 0.10);
}

.humidity-info h3 {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: -0.2px;
}

.humidity-info p {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 2px;
}

.humidity-display {
    margin: 4px 0 16px;
}

.humidity-value {
    font-size: 58px;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: -3px;
    line-height: 1;
    text-shadow: 0 4px 20px rgba(0, 122, 255, 0.20);
    transition: color 0.5s ease;
    display: inline-block;
    animation: value-breathe 4s ease-in-out infinite alternate;
}

@keyframes value-breathe {
    0%   { opacity: 0.88; }
    100% { opacity: 1; }
}

/* Progress bar */
.progress-container {
    width: 100%;
    height: 7px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: var(--r-pill);
    overflow: hidden;
    margin-bottom: 10px;
}
.progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #007aff, #5ac8fa, #34c759);
    border-radius: var(--r-pill);
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px rgba(0, 122, 255, 0.30);
}

/* ===================================================
   SENSOR GRID
   =================================================== */
.sensor-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
@media (min-width: 640px) {
    .sensor-grid { grid-template-columns: repeat(3, 1fr); }
}

.sensor-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--r-inner);
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: all 0.25s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.sensor-item:hover {
    background: var(--bg-card-hover);
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.metric-icon-wrapper {
    width: 36px; height: 36px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
    margin-bottom: 3px;
}
.sensor-item.temp-dht  .metric-icon-wrapper { background: rgba(255,  59, 48, 0.10); }
.sensor-item.temp-bmp  .metric-icon-wrapper { background: rgba(255, 149,  0, 0.10); }
.sensor-item.gas-mq2   .metric-icon-wrapper { background: rgba( 52, 199, 89, 0.12); }
.sensor-item.pressure  .metric-icon-wrapper { background: rgba(  0, 122,255, 0.10); }
.sensor-item.altitude  .metric-icon-wrapper { background: rgba( 90, 200,250, 0.12); }

.metric-icon-wrapper.active  { background: rgba(52,199,89,0.15);   border: 1px solid rgba(52,199,89,0.30); }
.metric-icon-wrapper.warning { background: rgba(255,149,0,0.15);   border: 1px solid rgba(255,149,0,0.30); }
.metric-icon-wrapper.alert   { background: rgba(255,59,48,0.12);   border: 1px solid rgba(255,59,48,0.30);
    animation: icon-alert-pulse 1.2s ease-in-out infinite alternate;
}

@keyframes icon-alert-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,59,48,0.25); }
    100% { box-shadow: 0 0 0 6px rgba(255,59,48,0); }
}

.sensor-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.2px;
}
.sensor-value {
    font-size: 19px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.5px;
}
.sensor-desc {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 500;
}

/* ===================================================
   ACTIVITY LOG TIMELINE
   =================================================== */
.timeline-container {
    max-height: 200px;
    overflow-y: auto;
    padding-right: 2px;
}
.timeline {
    position: relative;
    padding-left: 20px;
    border-left: 2px solid rgba(0, 122, 255, 0.12);
    margin-left: 4px;
}
.timeline-item {
    position: relative;
    margin-bottom: 14px;
}
.timeline-item:last-child { margin-bottom: 0; }

.timeline-dot {
    position: absolute;
    left: -25px; top: 4px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(0, 122, 255, 0.20);
    border: 2px solid rgba(0, 122, 255, 0.40);
}
.timeline-dot.system     { background: rgba(142,142,147,0.20); border-color: rgba(142,142,147,0.40); }
.timeline-dot.presence   { background: var(--color-primary-bg); border-color: var(--color-primary); }
.timeline-dot.power      { background: var(--color-warning-bg); border-color: var(--color-warning); }
.timeline-dot.validation { background: var(--color-active-bg);  border-color: var(--color-active); }
.timeline-dot.anomaly    { background: var(--color-alert-bg);   border-color: var(--color-alert); }

.timeline-time {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 500;
}
.timeline-text {
    font-size: 12px;
    color: var(--text-sub);
    font-weight: 500;
    line-height: 1.5;
}

/* ===================================================
   SIMULATOR PANEL
   =================================================== */
.sim-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.btn-sim {
    padding: 11px 8px;
    border-radius: var(--r-inner);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-sub);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
}
.btn-sim:hover {
    background: var(--bg-card-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-hover);
}
.btn-sim:active { transform: scale(0.97); box-shadow: none; }

.btn-sim.success {
    color: var(--color-active);
    border-color: rgba(52,199,89,0.25);
    background: rgba(52,199,89,0.08);
}
.btn-sim.success:hover { background: rgba(52,199,89,0.15); }

.btn-sim.warning {
    color: var(--color-warning);
    border-color: rgba(255,149,0,0.25);
    background: rgba(255,149,0,0.08);
}
.btn-sim.warning:hover { background: rgba(255,149,0,0.15); }

.btn-sim.danger {
    color: var(--color-alert);
    border-color: rgba(255,59,48,0.25);
    background: rgba(255,59,48,0.08);
}
.btn-sim.danger:hover { background: rgba(255,59,48,0.15); }

.btn-sim.full-width {
    color: var(--text-sub);
    border-color: var(--border-color);
    background: var(--bg-card);
}
.btn-sim.full-width:hover { background: var(--bg-card-hover); }

@media (min-width: 580px) {
    .sim-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .btn-sim.full-width {
        grid-column: span 3;
    }
}

/* ===================================================
   DOT PULSE KEYFRAMES
   =================================================== */
@keyframes dot-pulse-green {
    0%   { box-shadow: 0 0 0 0 rgba(52,199,89,0.45); }
    70%  { box-shadow: 0 0 0 6px rgba(52,199,89,0); }
    100% { box-shadow: 0 0 0 0 rgba(52,199,89,0); }
}
@keyframes dot-pulse-orange {
    0%   { box-shadow: 0 0 0 0 rgba(255,149,0,0.45); }
    70%  { box-shadow: 0 0 0 6px rgba(255,149,0,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,149,0,0); }
}
@keyframes dot-pulse-red {
    0%   { box-shadow: 0 0 0 0 rgba(255,59,48,0.45); }
    70%  { box-shadow: 0 0 0 6px rgba(255,59,48,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,59,48,0); }
}

/* ===================================================
   SEGMENTED CONTROL MODE LAYAR
   =================================================== */
.theme-segmented-control {
    display: flex;
    background: rgba(0, 0, 0, 0.05);
    border-radius: var(--r-inner);
    padding: 2px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}
body.dark-mode .theme-segmented-control {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.theme-seg-btn {
    border: none;
    outline: none;
    padding: 6px 14px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    cursor: pointer;
    border-radius: 9px;
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    align-items: center;
    gap: 5px;
}
.theme-seg-btn.active {
    background: #ffffff;
    color: #007aff;
    box-shadow: 0 2px 8px rgba(31, 38, 135, 0.08);
}
body.dark-mode .theme-seg-btn.active {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.theme-seg-btn:hover:not(.active) {
    color: var(--text-main);
}

/* ===================================================
   DYNAMIC SLIDER WIDGET
   =================================================== */
.main-slider-card {
    padding: 22px;
    overflow: hidden;
}
.slider-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}
.slider-wrapper {
    display: flex;
    width: 100%;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.slide-item {
    width: 100%;
    flex-shrink: 0;
}
.slider-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 14px;
    padding-top: 8px;
    border-top: 1px solid var(--border-subtle);
}
.slider-btn {
    background: var(--color-primary-bg);
    border: 1px solid rgba(0, 122, 255, 0.15);
    color: var(--color-primary);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.2s ease;
}
.slider-btn:hover {
    background: var(--color-primary);
    color: #ffffff;
    transform: scale(1.08);
}
.slider-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}
.slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: all 0.3s ease;
}
body.dark-mode .slider-dot {
    background: rgba(255, 255, 255, 0.2);
}
.slider-dot.active {
    width: 20px;
    border-radius: 4px;
    background: var(--color-primary);
    box-shadow: 0 0 8px rgba(0, 122, 255, 0.4);
}

/* ===================================================
   SOFT COLORFUL GLASS SLIDES
   =================================================== */
.slide-item {
    padding: 18px;
    border-radius: var(--r-card);
    transition: background 0.5s ease, border-color 0.5s ease;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.slide-humidity {
    background: radial-gradient(circle at top left, rgba(0, 122, 255, 0.15), rgba(255, 255, 255, 0.03));
    border-color: rgba(0, 122, 255, 0.2);
}
body.dark-mode .slide-humidity {
    background: radial-gradient(circle at top left, rgba(0, 122, 255, 0.12), rgba(0, 0, 0, 0.12));
    border-color: rgba(0, 122, 255, 0.25);
}

.slide-pressure {
    background: radial-gradient(circle at top left, rgba(0, 192, 255, 0.15), rgba(255, 255, 255, 0.03));
    border-color: rgba(0, 192, 255, 0.2);
}
body.dark-mode .slide-pressure {
    background: radial-gradient(circle at top left, rgba(0, 192, 255, 0.12), rgba(0, 0, 0, 0.12));
    border-color: rgba(0, 192, 255, 0.25);
}

.slide-altitude {
    background: radial-gradient(circle at top left, rgba(175, 82, 222, 0.15), rgba(255, 255, 255, 0.03));
    border-color: rgba(175, 82, 222, 0.2);
}
body.dark-mode .slide-altitude {
    background: radial-gradient(circle at top left, rgba(175, 82, 222, 0.12), rgba(0, 0, 0, 0.12));
    border-color: rgba(175, 82, 222, 0.25);
}

.slide-gas {
    background: radial-gradient(circle at top left, rgba(52, 199, 89, 0.15), rgba(255, 255, 255, 0.03));
    border-color: rgba(52, 199, 89, 0.2);
}
body.dark-mode .slide-gas {
    background: radial-gradient(circle at top left, rgba(52, 199, 89, 0.12), rgba(0, 0, 0, 0.12));
    border-color: rgba(52, 199, 89, 0.25);
}

/* Gas Warning State */
.slide-gas.gas-warning {
    background: radial-gradient(circle at top left, rgba(255, 149, 0, 0.16), rgba(255, 255, 255, 0.03));
    border-color: rgba(255, 149, 0, 0.25);
}
body.dark-mode .slide-gas.gas-warning {
    background: radial-gradient(circle at top left, rgba(255, 149, 0, 0.14), rgba(0, 0, 0, 0.12));
    border-color: rgba(255, 149, 0, 0.3);
}

/* Gas Danger State */
.slide-gas.gas-danger {
    background: radial-gradient(circle at top left, rgba(255, 59, 48, 0.18), rgba(255, 255, 255, 0.03));
    border-color: rgba(255, 59, 48, 0.3);
    animation: gas-danger-glow 2s infinite alternate;
}
body.dark-mode .slide-gas.gas-danger {
    background: radial-gradient(circle at top left, rgba(255, 59, 48, 0.16), rgba(0, 0, 0, 0.12));
    border-color: rgba(255, 59, 48, 0.35);
}

@keyframes gas-danger-glow {
    0% {
        box-shadow: 0 0 10px rgba(255, 59, 48, 0.08);
    }
    100% {
        box-shadow: 0 0 25px rgba(255, 59, 48, 0.25);
    }
}

/* ===================================================
   RESPONSIVE DESIGN (MOBILE FRIENDLY)
   =================================================== */
@media (max-width: 768px) {
    body {
        padding: 10px;
    }
    
    header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 16px 12px;
        gap: 16px;
    }
    
    .header-title-area {
        flex-direction: column;
        gap: 8px;
    }
    
    .header-icon {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }
    
    .header-titles h1 {
        font-size: 16px;
    }
    
    .header-titles p {
        font-size: 11px;
    }
    
    .header-status-area {
        justify-content: center;
        width: 100%;
        gap: 6px;
    }
    
    .status-indicator {
        font-size: 11px;
        padding: 5px 10px;
    }
    
    .gas-level-widget {
        width: 100%;
        min-width: unset;
        align-items: center;
        box-sizing: border-box;
    }
    
    .gas-level-bar-track {
        max-width: 200px;
    }
    
    .card {
        padding: 16px;
    }
    
    .main-slider-card {
        padding: 14px;
    }
    
    .slide-item {
        padding: 12px;
    }
    
    .humidity-value {
        font-size: 42px;
    }
    
    .sensor-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .sensor-item {
        padding: 12px 10px;
    }
    
    .sensor-value {
        font-size: 16px;
    }
    
    .sensor-label {
        font-size: 9px;
    }
    
    .sensor-desc {
        font-size: 9px;
    }
}

@media (max-width: 480px) {
    body {
        padding: 6px;
    }
    
    .sensor-grid {
        grid-template-columns: 1fr; /* Urutan vertikal pada ponsel yang sangat kecil */
    }
}

/* ===================================================
   SCROLLBAR
   =================================================== */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(0, 122, 255, 0.18);
    border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: rgba(0, 122, 255, 0.32); }