:root {
    --fd-navy: #0b1528;
    --fd-navy-2: #13223d;
    --fd-blue: #246bfd;
    --fd-blue-soft: #eef4ff;
    --fd-green: #18a56f;
    --fd-green-dark: #0e7d52;
    --fd-green-soft: #eaf9f3;
    --fd-red: #ef5b5b;
    --fd-orange: #ff8b3d;
    --fd-cyan: #21a9d8;
    --fd-bg: #f3f6fb;
    --fd-card: #ffffff;
    --fd-text: #17233a;
    --fd-muted: #75829a;
    --fd-border: #e5eaf2;
    --fd-shadow: 0 18px 50px rgba(21, 38, 69, .10);
    --fd-shadow-sm: 0 8px 28px rgba(21, 38, 69, .08);
    --topbar-h: 72px;
    --sidebar-w: 330px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
    margin: 0;
    background: var(--fd-bg);
    color: var(--fd-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; }

.topbar {
    height: var(--topbar-h);
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid var(--fd-border);
    backdrop-filter: blur(18px);
    position: sticky;
    top: 0;
    z-index: 1035;
}
.navbar-brand { color: var(--fd-text); line-height: 1.08; }
.navbar-brand:hover { color: var(--fd-text); }
.navbar-brand strong { display: block; font-size: 1.02rem; letter-spacing: -.02em; }
.navbar-brand small { display: block; color: var(--fd-muted); font-size: .68rem; letter-spacing: .03em; margin-top: 3px; }
.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(145deg, #ff704d, #ef3d5b);
    box-shadow: 0 10px 24px rgba(239,61,91,.26);
    font-size: 1.2rem;
}
.brand-mark-lg { width: 54px; height: 54px; border-radius: 17px; font-size: 1.55rem; }
.btn-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #f1f4f9;
    color: var(--fd-text);
    border: 0;
    font-size: 1.35rem;
}
.system-live {
    align-items: center;
    gap: 8px;
    color: var(--fd-green-dark);
    background: var(--fd-green-soft);
    border: 1px solid rgba(24,165,111,.14);
    padding: 8px 13px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
}
.system-live span,
.online-dot,
.online-mini,
.status-online > span {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--fd-green);
    box-shadow: 0 0 0 4px rgba(24,165,111,.13);
}
.user-button {
    border: 0;
    background: transparent;
    color: var(--fd-text);
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .86rem;
    font-weight: 650;
    padding: 4px 2px 4px 4px;
}
.user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--fd-blue-soft);
    color: var(--fd-blue);
}

.app-layout {
    min-height: calc(100vh - var(--topbar-h));
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
}
.device-sidebar {
    min-height: calc(100vh - var(--topbar-h));
    background: #fff;
    border-right: 1px solid var(--fd-border);
    position: sticky;
    top: var(--topbar-h);
    height: calc(100vh - var(--topbar-h));
    overflow: hidden;
}
.sidebar-inner { display: flex; flex-direction: column; min-height: 100%; height: 100%; }
.sidebar-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 22px 14px;
}
.eyebrow {
    display: block;
    color: var(--fd-blue);
    text-transform: uppercase;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .13em;
    margin-bottom: 5px;
}
.sidebar-heading h2,
.card-heading h2,
.logs-header h2 { margin: 0; font-size: 1.18rem; font-weight: 780; letter-spacing: -.025em; }
.device-count {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--fd-navy);
    color: #fff;
    font-size: .82rem;
    font-weight: 800;
}
.device-search-wrap { position: relative; padding: 0 18px 14px; }
.device-search-wrap i {
    position: absolute;
    left: 32px;
    top: 50%;
    transform: translateY(-65%);
    color: #98a3b5;
    z-index: 2;
}
.device-search {
    height: 44px;
    border-radius: 13px;
    border: 1px solid var(--fd-border);
    background: #f7f9fc;
    padding-left: 42px;
    font-size: .84rem;
    box-shadow: none !important;
}
.device-search:focus { border-color: rgba(36,107,253,.4); background: #fff; }
.all-online-banner {
    margin: 0 18px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, #eaf9f3, #f3fcf8);
    border: 1px solid rgba(24,165,111,.15);
    color: var(--fd-green-dark);
}
.all-online-banner strong, .all-online-banner small { display: block; }
.all-online-banner strong { font-size: .82rem; }
.all-online-banner small { font-size: .68rem; color: #5d927d; margin-top: 2px; }
.all-online-banner > i { font-size: 1.25rem; }
.device-list {
    overflow-y: auto;
    padding: 0 12px 18px;
    scrollbar-width: thin;
    scrollbar-color: #d9e0eb transparent;
}
.device-list-item {
    min-height: 80px;
    padding: 11px 10px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--fd-text);
    border: 1px solid transparent;
    transition: .18s ease;
    margin-bottom: 4px;
}
.device-list-item:hover { background: #f5f8fd; color: var(--fd-text); transform: translateX(2px); }
.device-list-item.active {
    background: var(--fd-blue-soft);
    border-color: rgba(36,107,253,.14);
    color: var(--fd-text);
}
.device-thumb {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border-radius: 14px;
    background: #f0f3f8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
}
.device-thumb img { max-width: 42px; max-height: 42px; object-fit: contain; }
.online-mini {
    width: 10px;
    height: 10px;
    position: absolute;
    right: -1px;
    bottom: -1px;
    border: 2px solid #fff;
    box-shadow: none;
}
.device-copy { min-width: 0; flex: 1; }
.device-copy strong, .device-copy small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.device-copy strong { font-size: .82rem; font-weight: 750; margin-bottom: 3px; }
.device-copy small { color: var(--fd-muted); font-size: .67rem; }
.status-online {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--fd-green-dark);
    font-size: .67rem;
    font-weight: 800;
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.status-online > span { width: 7px; height: 7px; box-shadow: none; }
.device-chevron { color: #aeb7c6; font-size: .82rem; }
.empty-sidebar, .empty-table {
    color: var(--fd-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 7px;
    padding: 44px 24px;
}
.empty-sidebar i, .empty-table i { font-size: 2rem; color: #b6c1d1; }
.empty-sidebar strong, .empty-table strong { color: var(--fd-text); }
.empty-sidebar span, .empty-table span { font-size: .78rem; }
.device-offcanvas { width: min(88vw, 350px) !important; }
.device-offcanvas .sidebar-inner { min-height: calc(100vh - 82px); }

.main-content { min-width: 0; position: relative; }
.dashboard-page,
.detail-page,
.edit-page { padding: 28px; }
.dashboard-header,
.detail-hero,
.logs-header,
.card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.dashboard-header { margin-bottom: 22px; }
.dashboard-header h1,
.detail-hero h1 { margin: 0; font-size: clamp(1.6rem, 2vw, 2.15rem); font-weight: 820; letter-spacing: -.045em; }
.dashboard-header p,
.detail-hero p,
.logs-header p { margin: 7px 0 0; color: var(--fd-muted); font-size: .86rem; }
.dashboard-actions, .detail-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.sync-info { color: var(--fd-muted); font-size: .74rem; display: inline-flex; gap: 7px; align-items: center; }
.btn { border-radius: 11px; font-weight: 700; font-size: .83rem; }
.btn-primary { background: var(--fd-blue); border-color: var(--fd-blue); box-shadow: 0 8px 18px rgba(36,107,253,.16); }
.btn-primary:hover { background: #165be8; border-color: #165be8; }
.btn-light { background: #fff; border-color: var(--fd-border); color: var(--fd-text); }
.btn-outline-primary { color: var(--fd-blue); border-color: rgba(36,107,253,.35); }
.btn-success { background: var(--fd-green); border-color: var(--fd-green); }

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 18px;
}
.metric-card {
    min-height: 124px;
    background: #fff;
    border: 1px solid var(--fd-border);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: var(--fd-shadow-sm);
    overflow: hidden;
    position: relative;
}
.metric-card::after {
    content: "";
    width: 80px;
    height: 80px;
    border-radius: 50%;
    position: absolute;
    right: -34px;
    top: -34px;
    background: rgba(36,107,253,.05);
}
.metric-primary { background: linear-gradient(135deg, #11213e, #1b3560); border-color: transparent; color: #fff; }
.metric-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--fd-blue-soft);
    color: var(--fd-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.28rem;
    flex: 0 0 auto;
}
.metric-primary .metric-icon { color: #fff; background: rgba(255,255,255,.12); }
.metric-card small, .metric-card strong, .metric-card span { display: block; }
.metric-card small { font-size: .69rem; color: var(--fd-muted); font-weight: 650; }
.metric-card strong { font-size: 1.72rem; line-height: 1.05; margin: 6px 0; letter-spacing: -.04em; }
.metric-card span { font-size: .65rem; color: #8a96aa; }
.metric-primary small, .metric-primary span { color: rgba(255,255,255,.67); }
.metric-primary span i { color: #57e2a5; }

.map-card {
    background: #fff;
    border: 1px solid var(--fd-border);
    border-radius: 22px;
    box-shadow: var(--fd-shadow);
    overflow: hidden;
    position: relative;
    min-height: 610px;
}
.device-map { width: 100%; height: 610px; background: #eaf0f6; }
.map-legend {
    position: absolute;
    z-index: 500;
    left: 18px;
    bottom: 18px;
    padding: 11px 14px;
    border-radius: 13px;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(12px);
    box-shadow: var(--fd-shadow-sm);
    display: flex;
    align-items: center;
    gap: 18px;
    color: var(--fd-muted);
    font-size: .7rem;
}
.map-legend span { display: inline-flex; align-items: center; gap: 7px; }
.map-legend .online-dot { width: 8px; height: 8px; box-shadow: none; }
.map-locations-counter {
    position: absolute;
    z-index: 500;
    right: 18px;
    top: 18px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 15px;
    border-radius: 14px;
    background: rgba(11,21,40,.92);
    color: #fff;
    box-shadow: var(--fd-shadow-sm);
}
.map-locations-counter > i { color: #55d9a2; font-size: 1.2rem; }
.map-locations-counter strong, .map-locations-counter span { display: block; }
.map-locations-counter strong { font-size: 1rem; }
.map-locations-counter span { font-size: .62rem; color: rgba(255,255,255,.62); }
.device-map-icon-wrap { background: transparent; border: 0; }
.device-map-icon { width: 58px; height: 58px; border-radius: 18px; background: #fff; border: 3px solid #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 14px 28px rgba(17,33,62,.25); position: relative; }
.device-map-icon img { max-width: 45px; max-height: 45px; object-fit: contain; position: relative; z-index: 2; }
.device-map-icon i { position: absolute; right: -2px; bottom: -2px; width: 15px; height: 15px; border-radius: 50%; background: var(--fd-green); border: 3px solid #fff; z-index: 3; }
.device-map-icon::after { content: ""; position: absolute; bottom: -8px; left: 22px; width: 14px; height: 14px; background: #fff; transform: rotate(45deg); z-index: 0; box-shadow: 8px 8px 16px rgba(17,33,62,.08); }
.marker-pulse { position: absolute; width: 50px; height: 50px; border-radius: 50%; background: rgba(24,165,111,.22); animation: markerPulse 2.2s infinite; }
@keyframes markerPulse { 0%{transform:scale(.7);opacity:.75} 70%,100%{transform:scale(1.65);opacity:0} }
.device-leaflet-popup .leaflet-popup-content-wrapper { border-radius: 18px; box-shadow: var(--fd-shadow); padding: 0; }
.device-leaflet-popup .leaflet-popup-content { margin: 0; width: auto !important; }
.device-leaflet-popup .leaflet-popup-tip { box-shadow: none; }
.device-popup { padding: 17px; }
.popup-head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.popup-head img { width: 58px; height: 58px; object-fit: contain; background: #f2f5f9; border-radius: 15px; padding: 5px; }
.popup-head h3 { font-size: .98rem; margin: 2px 0 1px; font-weight: 800; }
.popup-head small { color: var(--fd-muted); font-size: .68rem; }
.popup-values { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 13px; }
.popup-values div { background: #f6f8fb; border-radius: 11px; padding: 9px 10px; }
.popup-values span, .popup-values strong { display: block; }
.popup-values span { color: var(--fd-muted); font-size: .61rem; }
.popup-values strong { font-size: .77rem; margin-top: 2px; }

.floating-alert { position: fixed; z-index: 2000; top: 86px; right: 22px; min-width: 320px; max-width: calc(100vw - 44px); border: 0; box-shadow: var(--fd-shadow); border-radius: 13px; }

.detail-hero {
    background: linear-gradient(135deg, #fff, #f8fbff);
    border: 1px solid var(--fd-border);
    border-radius: 22px;
    padding: 23px;
    box-shadow: var(--fd-shadow-sm);
    margin-bottom: 18px;
}
.compact-hero { align-items: flex-start; }
.device-title-block { display: flex; align-items: center; gap: 18px; min-width: 0; }
.device-hero-image { width: 88px; height: 88px; border-radius: 22px; display: inline-flex; align-items: center; justify-content: center; background: #eff3f8; flex: 0 0 auto; }
.device-hero-image img { max-width: 74px; max-height: 74px; object-fit: contain; }
.status-pill, .model-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 7px 10px;
    font-size: .68rem;
    font-weight: 800;
}
.status-pill { color: var(--fd-green-dark); background: var(--fd-green-soft); }
.model-pill { color: #526079; background: #eef1f6; }
.detail-hero p strong { color: var(--fd-text); }

.reading-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.reading-card {
    background: #fff;
    border: 1px solid var(--fd-border);
    border-radius: 19px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--fd-shadow-sm);
}
.reading-icon { width: 49px; height: 49px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center; color: var(--fd-green); background: var(--fd-green-soft); font-size: 1.25rem; flex: 0 0 auto; }
.reading-icon.temperature { color: var(--fd-orange); background: #fff3eb; }
.reading-icon.humidity { color: var(--fd-cyan); background: #eaf8fd; }
.reading-icon.pressure { color: var(--fd-blue); background: var(--fd-blue-soft); }
.reading-card small, .reading-card strong, .reading-card span { display: block; }
.reading-card small { color: var(--fd-muted); font-size: .66rem; font-weight: 700; }
.reading-card strong { font-size: 1.45rem; letter-spacing: -.04em; margin: 3px 0; }
.reading-card strong em { font-style: normal; font-size: .68rem; color: var(--fd-muted); margin-left: 4px; font-weight: 700; }
.reading-card span { font-size: .61rem; color: #9aa5b7; }

.detail-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr); gap: 18px; margin-bottom: 18px; }
.content-card { background: #fff; border: 1px solid var(--fd-border); border-radius: 21px; box-shadow: var(--fd-shadow-sm); padding: 22px; min-width: 0; }
.card-heading { margin-bottom: 18px; }
.last-reading { display: inline-flex; align-items: center; gap: 7px; color: var(--fd-muted); font-size: .68rem; }
.chart-container { height: 330px; }
.device-info-list { margin: 0; }
.device-info-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid #edf0f5; }
.device-info-list > div:last-child { border-bottom: 0; }
.device-info-list dt { color: var(--fd-muted); font-size: .69rem; font-weight: 650; }
.device-info-list dd { margin: 0; text-align: right; font-size: .72rem; font-weight: 750; max-width: 62%; word-break: break-word; }
.logs-card { padding: 0; overflow: hidden; }
.logs-header { padding: 22px 22px 18px; }
.logs-header p { font-size: .72rem; max-width: 680px; }
.filter-bar { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; padding: 15px 22px; background: #f8fafd; border-top: 1px solid var(--fd-border); border-bottom: 1px solid var(--fd-border); }
.filter-bar > div { min-width: 160px; }
.form-label, .filter-bar label { display: block; font-size: .68rem; font-weight: 750; color: #58657b; margin-bottom: 6px; }
.form-control { border-radius: 11px; border-color: #dfe5ee; min-height: 42px; font-size: .82rem; box-shadow: none !important; }
.form-control:focus { border-color: rgba(36,107,253,.55); }
.logs-table { min-width: 930px; }
.logs-table thead th { padding: 13px 15px; background: #f7f9fc; color: #66738a; font-size: .65rem; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--fd-border); white-space: nowrap; }
.logs-table tbody td { padding: 13px 15px; border-color: #edf0f5; font-size: .75rem; color: #49566e; }
.logs-table tbody tr:hover { background: #fbfcfe; }
.logs-table td strong, .logs-table td small { display: block; }
.logs-table td strong { color: var(--fd-text); }
.logs-table td small { color: var(--fd-muted); margin-top: 2px; }
.value-chip { display: inline-flex; padding: 6px 9px; border-radius: 9px; font-weight: 800; font-size: .7rem; }
.value-chip.co2 { color: var(--fd-green-dark); background: var(--fd-green-soft); }
.mono-small { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .65rem !important; }
.pager-wrap { padding: 16px 22px; display: flex; justify-content: flex-end; border-top: 1px solid var(--fd-border); }
.pager-wrap ul { display: flex; list-style: none; gap: 5px; padding: 0; margin: 0; }
.pager-wrap li a, .pager-wrap li span { min-width: 35px; height: 35px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; border: 1px solid var(--fd-border); color: var(--fd-text); background: #fff; font-size: .72rem; }
.pager-wrap li.active a, .pager-wrap li.active span { background: var(--fd-blue); color: #fff; border-color: var(--fd-blue); }

.edit-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(310px, .7fr); gap: 18px; align-items: start; }
.location-map { height: 480px; border-radius: 16px; overflow: hidden; border: 1px solid var(--fd-border); }
.image-card { position: sticky; top: calc(var(--topbar-h) + 18px); }
.image-preview-wrap { min-height: 240px; background: linear-gradient(145deg, #edf2f8, #f8fafc); border-radius: 18px; display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 14px; overflow: hidden; }
.image-preview-wrap img { max-width: 82%; max-height: 220px; object-fit: contain; }
.image-preview-wrap .status-pill { position: absolute; left: 14px; bottom: 14px; background: rgba(234,249,243,.94); backdrop-filter: blur(8px); }
.upload-zone { min-height: 125px; border: 1.5px dashed #bdc8d7; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; color: var(--fd-muted); margin-bottom: 16px; transition: .18s ease; text-align: center; padding: 16px; }
.upload-zone:hover { border-color: var(--fd-blue); background: var(--fd-blue-soft); color: var(--fd-blue); }
.upload-zone i { font-size: 1.6rem; }
.upload-zone strong { font-size: .78rem; color: var(--fd-text); }
.upload-zone span { font-size: .65rem; }
.device-mini-info { border-top: 1px solid var(--fd-border); border-bottom: 1px solid var(--fd-border); padding: 9px 0; margin-bottom: 17px; }
.device-mini-info div { display: flex; justify-content: space-between; gap: 15px; padding: 7px 0; font-size: .69rem; }
.device-mini-info span { color: var(--fd-muted); }
.device-mini-info strong { text-align: right; word-break: break-all; }

.login-body { min-height: 100vh; background: #07111f; overflow-x: hidden; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(430px, .75fr); }
.login-visual { position: relative; overflow: hidden; padding: 42px 5vw; color: #fff; background: radial-gradient(circle at 75% 30%, rgba(35,107,253,.25), transparent 34%), radial-gradient(circle at 25% 80%, rgba(24,165,111,.17), transparent 34%), linear-gradient(145deg, #07111f, #102342); }
.visual-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom right, #000, transparent 85%); }
.login-brand { display: flex; align-items: center; gap: 14px; position: relative; z-index: 2; }
.login-brand strong, .login-brand small { display: block; }
.login-brand strong { font-size: 1.15rem; }
.login-brand small { color: rgba(255,255,255,.55); font-size: .7rem; margin-top: 3px; }
.visual-content { position: relative; z-index: 2; max-width: 720px; margin-top: clamp(100px, 15vh, 170px); }
.hero-kicker { display: inline-flex; align-items: center; gap: 9px; color: #9ddfc5; font-size: .72rem; font-weight: 750; letter-spacing: .04em; }
.hero-kicker > span { width: 24px; height: 2px; background: #5de3ad; }
.visual-content h1 { font-size: clamp(2.7rem, 5vw, 5.5rem); line-height: .98; letter-spacing: -.065em; font-weight: 820; margin: 22px 0 25px; }
.visual-content h1 em { font-style: normal; color: #61dfae; }
.visual-content > p { color: rgba(255,255,255,.62); max-width: 580px; font-size: clamp(.9rem, 1.2vw, 1.08rem); line-height: 1.7; }
.visual-metrics { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }
.visual-metrics > div { min-width: 150px; padding: 15px 17px; border-radius: 16px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.045); backdrop-filter: blur(10px); display: grid; grid-template-columns: 30px 1fr; align-items: center; }
.visual-metrics i { grid-row: 1 / 3; font-size: 1.2rem; color: #61dfae; }
.visual-metrics strong, .visual-metrics span { display: block; }
.visual-metrics strong { font-size: .8rem; }
.visual-metrics span { color: rgba(255,255,255,.45); font-size: .62rem; margin-top: 2px; }
.radar-card { position: absolute; width: 270px; height: 270px; right: -50px; bottom: -55px; border: 1px solid rgba(97,223,174,.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #61dfae; font-size: 2.4rem; }
.radar-card::before, .radar-card::after { content:""; position:absolute; border:1px solid rgba(97,223,174,.10); border-radius:50%; }
.radar-card::before { inset:35px; } .radar-card::after { inset:75px; }
.radar-pulse { position:absolute; inset:88px; border-radius:50%; background:rgba(97,223,174,.18); animation:radarPulse 2.4s infinite; }
.radar-pulse.delay { animation-delay:1.2s; }
@keyframes radarPulse { 0%{transform:scale(.45);opacity:.8} 100%{transform:scale(2.6);opacity:0} }
.login-panel { background: #f7f9fc; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 44px; }
.login-form-wrap { width: 100%; max-width: 420px; }
.mobile-login-brand { align-items: center; gap: 12px; margin-bottom: 42px; }
.mobile-login-brand strong, .mobile-login-brand small { display:block; }
.mobile-login-brand small { color:var(--fd-muted); font-size:.65rem; }
.login-heading { margin-bottom: 28px; }
.login-heading h2 { font-size: 2.25rem; font-weight: 820; letter-spacing: -.05em; margin: 0; }
.login-heading p { color: var(--fd-muted); font-size: .83rem; line-height: 1.6; margin: 10px 0 0; }
.login-form { display: grid; gap: 15px; }
.form-floating-icon { position: relative; border: 1px solid #dfe5ee; background: #fff; border-radius: 15px; padding: 21px 46px 9px; transition: .18s ease; }
.form-floating-icon:focus-within { border-color: rgba(36,107,253,.55); box-shadow: 0 0 0 4px rgba(36,107,253,.08); }
.form-floating-icon > i { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); color: #8996aa; }
.form-floating-icon label { position: absolute; left: 46px; top: 8px; color: var(--fd-muted); font-size: .59rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.form-floating-icon input { width: 100%; border: 0; outline: 0; padding: 0; background: transparent; color: var(--fd-text); font-size: .87rem; font-weight: 650; }
.password-toggle { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: #8996aa; }
.login-submit { height: 52px; border-radius: 15px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; margin-top: 3px; }
.login-security { margin-top: 22px; text-align: center; color: #96a1b2; font-size: .64rem; }
.login-security i { margin-right: 6px; color: var(--fd-green); }

.pulse { animation: onlinePulse 2s infinite; }
@keyframes onlinePulse { 0%{box-shadow:0 0 0 0 rgba(24,165,111,.38)} 70%{box-shadow:0 0 0 8px rgba(24,165,111,0)} 100%{box-shadow:0 0 0 0 rgba(24,165,111,0)} }

@media (max-width: 1280px) {
    :root { --sidebar-w: 300px; }
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .reading-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
    .app-layout { display: block; }
    .dashboard-page, .detail-page, .edit-page { padding: 18px; }
    .dashboard-header, .detail-hero { align-items: flex-start; }
    .detail-grid, .edit-grid { grid-template-columns: 1fr; }
    .image-card { position: static; }
    .map-card, .device-map { min-height: 560px; height: 560px; }
    .login-shell { display: block; background: #f7f9fc; }
    .login-visual { display: none; }
    .login-panel { min-height: 100vh; padding: 34px 22px; }
    .mobile-login-brand { display: flex !important; }
}

@media (max-width: 767.98px) {
    :root { --topbar-h: 64px; }
    .topbar { height: var(--topbar-h); }
    .navbar-brand .brand-mark { width: 38px; height: 38px; }
    .navbar-brand small { display: none; }
    .dashboard-page, .detail-page, .edit-page { padding: 13px; }
    .dashboard-header, .detail-hero, .logs-header, .card-heading { flex-direction: column; align-items: stretch; }
    .dashboard-actions, .detail-actions { justify-content: flex-start; }
    .sync-info { width: 100%; }
    .metric-grid, .reading-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .metric-card { min-height: 110px; padding: 15px; }
    .metric-icon { width: 44px; height: 44px; }
    .metric-card strong { font-size: 1.45rem; }
    .map-card, .device-map { min-height: calc(100vh - 350px); height: calc(100vh - 350px); min-height: 430px; }
    .map-legend { left: 10px; right: 10px; bottom: 10px; justify-content: space-between; gap: 8px; }
    .map-locations-counter { top: 10px; right: 10px; }
    .device-title-block { align-items: flex-start; }
    .device-hero-image { width: 72px; height: 72px; }
    .detail-hero h1 { font-size: 1.55rem; }
    .content-card { padding: 17px; border-radius: 17px; }
    .logs-card { padding: 0; }
    .logs-header { padding: 18px; }
    .filter-bar { padding: 14px 18px; }
    .filter-bar > div { flex: 1 1 calc(50% - 8px); min-width: 130px; }
    .filter-bar .btn { flex: 1; }
    .chart-container { height: 270px; }
    .location-map { height: 390px; }
    .floating-alert { top: 74px; left: 12px; right: 12px; min-width: 0; max-width: none; }
}

@media (max-width: 575.98px) {
    .metric-grid, .reading-grid { grid-template-columns: 1fr; }
    .metric-card, .reading-card { min-height: 92px; }
    .dashboard-header h1 { font-size: 1.55rem; }
    .map-card, .device-map { height: 520px; min-height: 520px; }
    .map-legend span:last-child { display: none; }
    .device-title-block { flex-direction: column; }
    .detail-actions .btn { flex: 1; }
    .device-info-list > div { align-items: flex-start; }
    .device-info-list dd { max-width: 58%; }
    .logs-table { min-width: 0; }
    .logs-table thead { display: none; }
    .logs-table tbody, .logs-table tr, .logs-table td { display: block; width: 100%; }
    .logs-table tbody tr { border-bottom: 9px solid var(--fd-bg); padding: 8px 14px; }
    .logs-table tbody td { border: 0; padding: 7px 0; display: flex; justify-content: space-between; align-items: center; gap: 14px; text-align: right; }
    .logs-table tbody td::before { content: attr(data-label); color: var(--fd-muted); font-size: .64rem; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; text-align: left; }
    .logs-table tbody td > * { margin-left: auto; }
    .logs-table .empty-table { display: flex; padding: 35px 20px; }
    .logs-table .empty-table::before { content: none; }
    .pager-wrap { justify-content: center; overflow-x: auto; }
    .login-panel { padding: 25px 16px; }
    .login-heading h2 { font-size: 1.9rem; }
}