:root {
  --bg: #081428;
  --bg-2: #0d1f3e;
  --panel: rgba(10, 23, 46, 0.82);
  --panel-solid: #102443;
  --panel-soft: rgba(25, 45, 78, 0.86);
  --border: rgba(148, 163, 184, 0.18);
  --text: #f8fbff;
  --text-2: #c1cee4;
  --text-3: #89a0c0;
  --primary: #3b82f6;
  --primary-2: #2563eb;
  --critical: #ef4444;
  --warning: #f59e0b;
  --success: #22c55e;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.26);
  --radius: 22px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: Inter, system-ui, sans-serif; background: radial-gradient(circle at top, #1a2e56 0%, #071326 48%, #06101f 100%); color: var(--text); overflow-x: hidden; }
button, input { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
#app { min-height: 100vh; }

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 20% 0%, rgba(59,130,246,0.18), transparent 26%), radial-gradient(circle at 100% 20%, rgba(125, 211, 252, 0.14), transparent 26%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.03)'%3E%3Cpath d='M0 30h360M0 90h360M0 150h360M0 210h360M0 270h360M0 330h360'/%3E%3Cpath d='M30 0v360M90 0v360M150 0v360M210 0v360M270 0v360M330 0v360'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.glass, .glass-dark, .card, .rail-card, .soft-panel, .hero-alert, .workspace-card, .mini-card, .phone-card {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.card, .rail-card, .reports-layout, .plans-main, .list-panel, .detail-panel, .analytics-main, .hero-map, .mobile-preview, .create-property {
  background: linear-gradient(180deg, rgba(22, 37, 68, 0.9), rgba(9, 20, 40, 0.9));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 32px 24px; }
.login-shell-single {
  background:
    radial-gradient(circle at 18% 12%, rgba(60,130,246,.16), transparent 24%),
    radial-gradient(circle at 82% 0%, rgba(147,197,253,.1), transparent 22%),
    linear-gradient(180deg, rgba(4,12,26,.92), rgba(8,18,36,.96));
}
.login-stage { width: 100%; display: flex; justify-content: center; align-items: center; min-height: calc(100vh - 64px); padding: 20px; }
.login-panel { border-radius: 30px; border: 1px solid var(--border); background: linear-gradient(180deg, rgba(9,20,40,0.92), rgba(19,39,74,0.82)); box-shadow: var(--shadow); }
.login-panel-premium {
  position: relative;
  width: min(100%, 460px);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(9,20,40,0.94), rgba(10,23,46,0.92));
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: 0 20px 60px rgba(0,0,0,.34);
}
.login-panel-glow {
  position: absolute;
  inset: 0 0 auto 0;
  height: 180px;
  background: radial-gradient(circle at 50% 0%, rgba(96,165,250,.16), transparent 58%);
  pointer-events: none;
}
.login-panel-inner { position: relative; display: grid; gap: 22px; padding: 34px 34px 28px; }
.login-brand { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 700; }
.login-brand-centered { justify-content: center; margin-bottom: 6px; }
.login-brand-centered img { width: min(220px, 62vw); height: auto; object-fit: contain; }
.login-header-compact { text-align: left; }
.panel-header h2 { margin: 0 0 10px; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.02; }
.panel-header p { color: var(--text-2); margin: 0; line-height: 1.6; }
.lang-switcher { display: flex; gap: 10px; }
.lang-switcher-centered { justify-content: center; margin-top: 8px; }
.lang-pill { border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,0.04); color: var(--text-2); padding: 9px 12px; min-width: 40px; border-radius: 999px; }
.lang-pill.active { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: white; border-color: transparent; }
.auth-form { display: grid; gap: 16px; }
.auth-form label { display: grid; gap: 8px; color: var(--text-2); font-size: 13px; }
.auth-form input, .search-input, .inline-form input { height: 48px; padding: 0 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(3,10,24,.52); color: white; outline: none; width: 100%; }
.auth-form input::placeholder, .search-input::placeholder, .inline-form input::placeholder { color: rgba(193,206,228,.5); }
.auth-form input:focus, .search-input:focus, .inline-form input:focus { border-color: rgba(96,165,250,.72); box-shadow: 0 0 0 4px rgba(59,130,246,.12); background: rgba(6,16,31,.72); }
.auth-form input:-webkit-autofill,
.auth-form input:-webkit-autofill:hover,
.auth-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0px 1000px rgba(3,10,24,.94) inset;
  transition: background-color 9999s ease-in-out 0s;
}
.password-field { position: relative; }
.password-field input { padding-right: 72px; }
.password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: #dbeafe;
  font-weight: 600;
  padding: 4px 6px;
}
.auth-error { padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(239,68,68,.28); background: rgba(127,29,29,.22); color: #fecaca; font-size: 13px; }
.auth-row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.checkbox-row { display: inline-flex !important; align-items: center; gap: 10px; color: var(--text-3) !important; }
.checkbox-row input { width: 16px; height: 16px; accent-color: #4f97ff; }
.primary-btn, .gold-btn, .ghost-btn, .text-btn, .icon-btn, .filter-chip, .icon-select {
  border: 1px solid transparent;
  border-radius: 12px;
  transition: transform .2s ease, opacity .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.primary-btn:hover, .gold-btn:hover, .ghost-btn:hover, .text-btn:hover, .icon-btn:hover, .filter-chip:hover, .icon-select:hover { transform: translateY(-1px); }
.primary-btn { height: 48px; padding: 0 18px; color: white; background: linear-gradient(135deg, #4f97ff, #2563eb); box-shadow: 0 10px 24px rgba(37,99,235,.28); }
.primary-btn:disabled { cursor: default; opacity: .92; transform: none; }
.auth-submit-btn.is-loading { position: relative; }
.auth-submit-btn.is-loading span::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 8px; border-radius: 999px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; vertical-align: -2px; animation: spin .85s linear infinite; }
.gold-btn { height: 46px; padding: 0 18px; color: #342106; background: linear-gradient(135deg, #fbd77f, #e7b94f); }
.ghost-btn, .icon-btn, .filter-chip, .icon-select { height: 44px; padding: 0 16px; background: rgba(255,255,255,.04); color: var(--text-2); border-color: rgba(255,255,255,.07); }
.ghost-btn-soft { background: rgba(255,255,255,.05); }
.ghost-btn.small { height: 34px; padding: 0 10px; font-size: 12px; }
.text-btn { background: transparent; color: #bfdbfe; padding: 0; border: 0; }
.full { width: 100%; }
.auth-actions, .actions-row { display: flex; gap: 12px; align-items: center; margin-top: 2px; }
.auth-actions-split { justify-content: space-between; }
.actions-row .full { flex: 1; }
.grow { flex: 1; }
@keyframes spin { to { transform: rotate(360deg); } }
.app-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; padding: 0; }
.sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px 14px;
  background: linear-gradient(180deg, rgba(10,22,43,0.95), rgba(13,29,56,0.92));
  border-right: 1px solid var(--border);
}
.brand-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px 26px; }
.brand-row img { width: 38px; }
.brand-row small { color: var(--text-3); display: block; font-size: 12px; }
.workspace-card { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.05); color: var(--text-2); }
.workspace-card.compact { margin-top: 14px; }
.workspace-avatar { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: linear-gradient(135deg, #60a5fa, #2563eb); color: white; font-weight: 700; }
.workspace-avatar.small { width: 28px; height: 28px; font-size: 12px; }
.nav-list { display: grid; gap: 8px; margin-top: 18px; }
.nav-item { display: flex; align-items: center; gap: 12px; height: 48px; width: 100%; padding: 0 16px; border: 0; border-radius: 16px; background: transparent; color: var(--text-2); text-align: left; }
.nav-item.active, .nav-item:hover { background: rgba(59,130,246,.16); color: white; }
.sidebar-bottom { display: grid; gap: 10px; }
.workspace { padding: 22px 18px 22px 18px; }
.workspace-content { display: grid; gap: 18px; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 8px 8px 24px; }
.topbar h1 { margin: 0; font-size: 28px; }
.topbar p { margin: 6px 0 0; color: var(--text-3); }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.date-chip, .user-chip { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 46px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); color: var(--text-2); }
.avatar { width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; background: #2563eb; color: white; font-weight: 700; }
.icon-btn { position: relative; width: 46px; padding: 0; }
.count { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 999px; background: var(--critical); color: white; font-size: 11px; display: grid; place-items: center; }

.grid-overview { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; }
.hero-map { padding: 18px; min-height: 760px; display: grid; gap: 18px; }
.section-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.section-toolbar.dense { gap: 10px; }
.world-map {
  position: relative;
  min-height: 366px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(8, 16, 30, .55), rgba(8, 16, 30, .55)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='800' viewBox='0 0 1600 800'%3E%3Crect width='1600' height='800' fill='%23081831'/%3E%3Cg fill='%23a9bfd5' opacity='.82'%3E%3Cpath d='M113 271l79-52 98-12 76 33 93 42 57-27 17-36 90-32 133 15 102-38 97 4 82 62 100-3 54 26v90l-37 42-95 31-40 60-95 30-124-24-52-50-107-7-90-38-37 14-59 74-140 17-60-44-92-4-94 34-80-30-94-4-33-57z'/%3E%3Cpath d='M226 531l45 13 31 55-38 39-75-16-48-49 7-48 78 6zM793 548l51 21 22 43-35 37-61-7-31-37 5-34zM1160 518l60 16 39 51-24 49-64 2-51-32-9-41zM1266 348l72-15 69 24 41 58-18 54-81 0-58-35-16-57z'/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat;
}
.world-map::after { content:''; position:absolute; inset:0; background: linear-gradient(0deg, rgba(4,9,18,.18), rgba(255,255,255,0)); pointer-events:none; }
.map-cluster { position: absolute; width: 58px; height: 42px; border-radius: 22px; border: 2px solid rgba(255,255,255,.75); color: white; background: linear-gradient(135deg, #3498ff, #2563eb); box-shadow: 0 16px 34px rgba(37,99,235,.35); z-index: 2; }
.map-cluster.active { transform: scale(1.08); }
.mini-kpis { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.mini-kpi { padding: 18px; border-radius: 18px; border: 1px solid rgba(255,255,255,.06); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); }
.mini-kpi-title { color: var(--text-3); font-size: 12px; margin-bottom: 10px; }
.mini-kpi strong { font-size: 42px; display:block; margin-bottom: 8px; }
.mini-kpi p { margin: 0; color: var(--text-3); line-height: 1.5; }
.dashboard-row, .split-grid.two, .two-column-layout, .plans-layout, .analytics-layout, .reports-layout, .plan-grid, .mobile-grid, .four-grid { display: grid; gap: 18px; }
.bottom-row { grid-template-columns: 1fr 1fr; }
.soft-panel, .wide-panel { padding: 18px; border-radius: 18px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.03); }
.chart-panel { min-height: 220px; }
.chart-canvas-wrap { position: relative; width: 100%; }
.chart-panel canvas, .soft-panel canvas, .rail-card canvas, .detail-panel canvas { width: 100% !important; height: 180px !important; }
.overview-alerts-panel canvas { height: 260px !important; }
.spacious-donut-card canvas { height: 250px !important; }
.right-rail { display: grid; gap: 16px; }
.rail-card { padding: 18px; border-radius: 22px; }
.hero-alert { position: relative; overflow: hidden; padding: 20px; border-radius: 22px; background: linear-gradient(180deg, rgba(37, 17, 25, .44), rgba(8, 20, 40, .92)); }
.hero-alert.slim { min-height: 206px; }
.critical-title { font-size: 14px; font-weight: 800; letter-spacing: .08em; color: #ff7b81; margin-bottom: 8px; }
.hero-alert h3, .detail-top h2 { margin: 0 0 8px; font-size: 22px; }
.hero-alert p, .detail-top p, .section-title, .subheading, .metric-box small, .phone-card small { color: var(--text-2); }
.device-hero-image, .sensor-hero-image { height: 136px; border-radius: 18px; margin-top: 16px; background: linear-gradient(135deg, rgba(6,18,39,.38), rgba(14,28,53,.1)), url("assets/eka_1.png") center/cover no-repeat; filter: saturate(.75) brightness(.9); }
.sensor-hero-image { height: 120px; margin-bottom: 12px; }
.device-hero-image.light { filter: grayscale(.15) brightness(1.05); }
.detail-stack { display: grid; gap: 12px; }
.split-line { display: flex; justify-content: space-between; gap: 16px; color: var(--text-2); }
.section-title, .subheading { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px; }
.dark-photo-card .roof-thumb { border-radius: 18px; overflow: hidden; margin-bottom: 16px; }
.weather-card .weather-temp { font-size: 44px; font-weight: 700; margin-bottom: 14px; }
.weather-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; color: var(--text-2); }
.weather-grid strong { display:block; color: var(--text-3); font-size: 12px; margin-bottom: 4px; }

.two-column-layout { grid-template-columns: minmax(0, 1fr) 420px; align-items: start; }
.list-panel, .detail-panel, .reports-layout, .plans-main, .analytics-main, .mobile-preview, .create-property { padding: 18px; }
.header-row { color: var(--text-3); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.property-table, .sensor-table, .alert-table, .report-table, .device-table { display: grid; gap: 16px; align-items: center; }
.property-table { grid-template-columns: 1.5fr 1fr .45fr .6fr .55fr; }
.sensor-table { grid-template-columns: .9fr 1.25fr .7fr .55fr .4fr .6fr; }
.alert-table { grid-template-columns: .7fr .8fr .7fr 1fr .75fr .75fr .35fr; }
.report-table, .device-table { grid-template-columns: 1.4fr .8fr .8fr .7fr .8fr .9fr; }
.property-row, .sensor-row, .alert-row { width: 100%; border: 1px solid transparent; background: rgba(255,255,255,.02); color: var(--text); border-radius: 16px; padding: 14px 12px; text-align: left; }
.property-row:hover, .sensor-row:hover, .alert-row:hover, .feed-item:hover { border-color: rgba(96,165,250,.24); background: rgba(96,165,250,.08); }
.property-row.active, .sensor-row.active, .alert-row.active { border-color: rgba(96,165,250,.4); background: rgba(96,165,250,.12); }
.property-name-cell { display:flex; align-items:center; gap:14px; }
.property-name-cell img { width: 68px; height: 68px; border-radius: 16px; object-fit: cover; }
.property-name-cell strong, .sensor-table strong, .report-row strong, .feed-item strong, .detail-top h2 { display:block; }
.property-name-cell small, .sensor-table small, .report-row small, .feed-item small, .info-grid small { color: var(--text-3); }
.scroll-table { display: grid; gap: 10px; margin-top: 12px; max-height: 630px; overflow: auto; padding-right: 4px; }
.table-footer { color: var(--text-3); margin-top: 12px; font-size: 13px; }
.status-chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(34,197,94,.14); color: #7ee787; }
.status-chip.warn { background: rgba(245,158,11,.16); color: #f8c26a; }
.status-chip.critical { background: rgba(239,68,68,.16); color: #fb7e7e; }
.status-chip.ok { background: rgba(34,197,94,.16); color: #8ce99a; }
.severity-label.critical { color:#fb7e7e; font-weight:700; }
.severity-label.warn { color:#f8c26a; font-weight:700; }
.risk-bar-wrap { display:flex; gap:10px; align-items:center; }
.risk-bar-wrap i, .trend-bar i { flex:1; height:8px; border-radius:999px; background: rgba(255,255,255,.08); position:relative; overflow:hidden; }
.risk-bar-wrap b, .trend-bar b { position:absolute; inset:0 auto 0 0; border-radius:inherit; background: linear-gradient(90deg, #f8c26a, #ef4444); }
.detail-top { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:14px; }
.detail-top.less-gap { margin-bottom: 8px; }
.detail-tabs { display:flex; gap:10px; margin-bottom:14px; }
.detail-tabs button { height:38px; padding:0 12px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--text-2); }
.detail-tabs button.active { color:white; border-color:#60a5fa; }
.detail-image-wrap { border-radius: 18px; overflow: hidden; margin-bottom: 16px; border: 1px solid rgba(255,255,255,.08); }
.detail-image-wrap img { height: 196px; width: 100%; object-fit: cover; }
.four-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
.compact-gap { gap: 12px; }
.stats-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.metric-box, .phone-card { border-radius: 18px; padding: 18px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.03); }
.metric-box span, .phone-card strong { display:block; font-size: 40px; font-weight: 700; line-height: 1; margin-bottom: 10px; }
.metric-box p, .phone-card span { margin: 0; color: var(--text-3); }
.metric-box.tall { min-height: 132px; }
.metric-box.critical { background: linear-gradient(135deg, rgba(239,68,68,.12), rgba(255,255,255,.03)); }
.metric-box.warn { background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(255,255,255,.03)); }
.info-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin-bottom: 16px; }
.info-grid strong { display:block; margin-top: 6px; }
.feed-item, .action-banner { width:100%; display:flex; justify-content:space-between; gap:14px; align-items:flex-start; padding:14px 16px; border-radius:16px; border:1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.03); color: var(--text); text-align:left; }
.feed-item.static { cursor: default; }
.feed-item small, .action-banner p { display:block; margin-top:6px; color: var(--text-3); }
.feed-item.critical, .action-banner.critical { background: linear-gradient(135deg, rgba(239,68,68,.12), rgba(255,255,255,.02)); }
.feed-item.warn, .action-banner.warn { background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(255,255,255,.02)); }
.action-banner { display:block; margin: 16px 0; }
.stat-strip { margin-bottom: 16px; }
.signal-bars { display:flex; gap:4px; align-items:flex-end; }
.signal-bars i { width:6px; border-radius:999px; height:10px; background: rgba(255,255,255,.12); display:block; }
.signal-bars i:nth-child(2) { height:14px; }
.signal-bars i:nth-child(3) { height:18px; }
.signal-bars i:nth-child(4) { height:22px; }
.signal-bars i:nth-child(5) { height:26px; }
.signal-bars i.on { background: linear-gradient(180deg, #86efac, #facc15); }

.analytics-layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
.analytics-kpis.narrow { grid-template-columns: repeat(4, minmax(0,1fr)); }
.chart-block { height: 280px; margin-top: 16px; }

.analytics-workspace { display: grid; gap: 18px; }
.analytics-toolbar-card { padding: 18px; }
.analytics-toolbar { flex-wrap: wrap; align-items: center; }
.analytics-toolbar .filter-select { min-width: 150px; }
.analytics-chip-row { margin-top: 12px; align-items: center; }
.analytics-kpi-row { grid-template-columns: repeat(5, minmax(0,1fr)); }
.analytics-hero-card { padding: 18px; }
.analytics-hero-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) 320px; gap: 18px; align-items: stretch; }
.chart-wrap.tall { position: relative; min-height: 320px; }
.chart-wrap.medium { position: relative; min-height: 260px; }
.chart-wrap.compact { position: relative; min-height: 220px; }
.analytics-insight-panel { display: grid; gap: 14px; }
.insight-list { display: grid; gap: 12px; }
.insight-item { display: grid; grid-template-columns: 14px 1fr; gap: 10px; color: var(--text-2); }
.insight-item span { color: #67e8f9; font-weight: 800; }
.insight-item p { margin: 0; line-height: 1.5; }
.hero-side-stat { padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.03); }
.hero-side-stat strong { display: block; font-size: 16px; color: #f8fbff; margin-bottom: 4px; }
.hero-side-stat small { color: var(--text-3); }
.analytics-mid-grid { align-items: start; }
.zone-intelligence-list, .problem-zone-list { display: grid; gap: 12px; }
.zone-intelligence-row, .problem-zone-row { display: grid; gap: 10px; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.025); }
.zone-intelligence-row { grid-template-columns: minmax(0,1fr) auto minmax(120px, 180px) auto; align-items: center; }
.zone-metrics, .problem-zone-meta { display: flex; gap: 10px; color: var(--text-3); font-size: 12px; }
.comparison-foot-grid { display: grid; gap: 10px; margin-top: 14px; }
.comparison-pill { padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06); }
.comparison-pill strong { display: block; margin-bottom: 4px; }
.comparison-pill small { color: var(--text-3); }
.analytics-health-grid { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: center; }
.donut-wrap canvas, .chart-wrap.compact canvas, .chart-wrap.medium canvas, .chart-wrap.tall canvas { height: 100% !important; }
.fleet-health-legend { display: grid; gap: 12px; }
.legend-row { display: grid; grid-template-columns: 12px auto 1fr; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05); }
.legend-dot { width: 10px; height: 10px; border-radius: 999px; display: inline-block; }
.legend-dot.stable { background: #22c55e; }
.legend-dot.battery { background: #f59e0b; }
.legend-dot.signal { background: #38bdf8; }
.legend-dot.offline { background: #ef4444; }
.legend-row strong { color: #f8fbff; }
.legend-row small { color: var(--text-3); }
@media (max-width: 1320px) {
  .analytics-kpi-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .analytics-hero-grid, .analytics-health-grid, .zone-intelligence-row { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .analytics-kpi-row { grid-template-columns: 1fr; }
}
.trend-row { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.05); }
.trend-bar { display:flex; align-items:center; gap:10px; width: 180px; }
.reports-layout { display:grid; gap: 14px; }
.report-row, .device-table.report-row { padding: 14px 0; border-bottom:1px solid rgba(255,255,255,.05); }
.report-row:last-child { border-bottom:0; }
.spaced { margin-top: 12px; }
.plans-layout { grid-template-columns: minmax(0,1fr) 320px; }
.plans-layout-full { grid-template-columns: minmax(0,1fr); }
.plans-main { max-width: 1400px; width: 100%; }
.plans-toolbar { align-items: flex-start; margin-bottom: 8px; }
.plans-toolbar h2 { margin: 0 0 10px; }
.plans-toolbar p { margin: 0; color: var(--text-2); }
.billing-toggle { margin-left: auto; }
.plan-grid { grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: 18px; }
.plan-grid-upgraded { align-items: stretch; }
.plan-card { padding: 22px; border-radius: 22px; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(93, 129, 204, .22), rgba(10,20,40,.88)); display:grid; gap: 18px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.plan-card:hover { transform: translateY(-2px); border-color: rgba(96,165,250,.28); box-shadow: 0 18px 40px rgba(0,0,0,.22); }
.plan-card:nth-child(2) { background: linear-gradient(180deg, rgba(115, 93, 204, .22), rgba(10,20,40,.88)); }
.plan-card.featured { background: linear-gradient(180deg, rgba(204, 148, 93, .28), rgba(45, 26, 9, .92)); }
.plan-card.current { border-color: rgba(96,165,250,.45); box-shadow: 0 0 0 1px rgba(96,165,250,.12), 0 18px 42px rgba(37,99,235,.15); }
.plan-badge-row { display:flex; gap:10px; flex-wrap: wrap; min-height: 26px; }
.plan-badge { display:inline-flex; align-items:center; padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .03em; }
.plan-badge.current { background: rgba(59,130,246,.16); color: #bfdbfe; }
.plan-badge.popular { background: rgba(99,102,241,.18); color: #d8b4fe; }
.plan-badge.premium { background: rgba(245,158,11,.16); color: #fde68a; }
.plan-head h3 { margin:0 0 12px; font-size:40px; }
.plan-head .price { font-size: 56px; font-weight: 700; line-height: .98; }
.plan-head .price small { font-size: 22px; font-weight: 500; color: var(--text-2); }
.plan-head p, .plan-list { color: var(--text-2); }
.plan-limits { display:flex; flex-wrap: wrap; gap: 10px; }
.plan-limits span { border-radius: 999px; padding: 8px 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06); color: var(--text-2); font-size: 13px; }
.plan-list { display:grid; gap: 12px; line-height: 1.5; }
.plan-list.grouped div { display:flex; align-items:flex-start; gap: 10px; }
.check-dot { display:inline-grid; place-items:center; width: 20px; height: 20px; border-radius: 999px; background: rgba(255,255,255,.08); color: #dbeafe; font-size: 12px; flex: 0 0 20px; margin-top: 1px; }
.plan-section { margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); }
.comparison-table { display:grid; gap: 10px; }
.comparison-row { display:grid; grid-template-columns: 1.4fr repeat(3, minmax(0,1fr)); gap: 14px; align-items:center; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05); }
.comparison-row.header-row { color: var(--text-3); }
.comparison-row strong { font-size: 14px; }
.billing-panel { margin-top: 22px; padding: 22px; border-radius: 22px; border: 1px solid rgba(255,255,255,.07); background: linear-gradient(180deg, rgba(17, 32, 58, .84), rgba(8, 19, 38, .94)); }
.billing-copy h3 { margin: 0 0 8px; font-size: 24px; }
.billing-copy p { margin: 0 0 18px; color: var(--text-2); max-width: 880px; }
.billing-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.billing-grid .metric-box span { font-size: 28px; line-height: 1.1; }
.billing-actions { margin-top: 18px; }
.toggle-group { display:inline-flex; padding:4px; border-radius: 14px; background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07); }
.toggle-group button { height:42px; padding:0 16px; border:0; border-radius: 10px; background: transparent; color: var(--text-2); }
.toggle-group button.active { background: linear-gradient(135deg, #4f97ff, #2563eb); color: white; }
.mobile-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
.phone-card { min-height: 140px; }
.inline-form { display:grid; grid-template-columns: 1.1fr 1.3fr repeat(3, .7fr) auto; gap: 12px; }

.toast-stack { position: fixed; right: 24px; bottom: 24px; display: grid; gap: 10px; z-index: 60; }
.toast { background: rgba(11, 22, 42, .94); color: white; border-radius: 14px; border: 1px solid rgba(255,255,255,.09); padding: 14px 16px; box-shadow: var(--shadow); }

@media (max-width: 1320px) {
  .grid-overview, .two-column-layout, .analytics-layout, .plans-layout { grid-template-columns: 1fr; }
  .right-rail { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stats-grid, .plan-grid, .mobile-grid, .inline-form { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 1080px) {
  .login-shell { padding: 20px; }
  .login-stage { padding: 10px; min-height: calc(100vh - 40px); }
  .login-panel-premium { width: min(100%, 520px); }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: sticky; top: 0; z-index: 30; flex-direction: row; gap: 16px; align-items: center; overflow: auto; }
  .nav-list { display:flex; }
  .workspace-card, .sidebar-bottom { display:none; }
  .property-table, .sensor-table, .alert-table, .report-table, .device-table { grid-template-columns: 1fr; }
  .header-row { display:none; }
  .bottom-row, .four-grid, .mini-kpis { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .workspace { padding: 14px; }
  .topbar, .section-toolbar, .actions-row { flex-direction: column; align-items: stretch; }
  .auth-actions { flex-direction: column; align-items: stretch; }
  .topbar-actions { width: 100%; flex-wrap: wrap; }
  .stats-grid, .plan-grid, .mobile-grid, .inline-form, .info-grid, .weather-grid, .billing-grid { grid-template-columns: 1fr; }
  .comparison-row { grid-template-columns: 1fr; }
  .hero-map { min-height: 0; }
  .login-shell { padding: 14px; }
  .login-stage { padding: 0; min-height: calc(100vh - 28px); }
  .login-panel-inner { padding: 26px 18px 22px; gap: 18px; }
  .login-brand-centered img { width: min(190px, 56vw); }
  .auth-row-between, .auth-actions-split { flex-direction: column; align-items: stretch; }
  .ghost-btn, .primary-btn, .icon-btn, .filter-chip, .icon-select { width: 100%; }
}
@media (max-width: 460px) {
  .panel-header h2 { font-size: 2rem; }
  .lang-switcher { gap: 8px; }
  .lang-pill { min-width: 38px; padding: 8px 10px; }
}


body.modal-open { overflow: hidden; }
.modal-overlay { position: fixed; inset: 0; background: rgba(3, 10, 24, .6); backdrop-filter: blur(8px); display: grid; place-items: center; z-index: 80; padding: 24px; overflow-y: auto; overscroll-behavior: contain; }
.modal-card { width: min(640px, calc(100vw - 24px)); max-height: min(90vh, 960px); border-radius: 24px; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(11,22,42,.98), rgba(8,17,34,.98)); box-shadow: 0 30px 80px rgba(0,0,0,.35); display:flex; flex-direction:column; overflow:hidden; margin:auto; }
.modal-card.wide { width: min(920px, calc(100vw - 24px)); }
.modal-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding: 22px 22px 0; flex: 0 0 auto; }
.modal-head h3 { margin: 6px 0 0; font-size: 24px; }
.modal-body { padding: 18px 22px 22px; display:grid; gap:16px; overflow-y:auto; min-height:0; }
.modal-form { display:grid; gap: 14px; }
.modal-form label { display:grid; gap: 8px; color: var(--text-2); font-size: 13px; }
.modal-form input, .modal-form select, .modal-form textarea { width: 100%; height: 46px; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); color: white; padding: 0 14px; box-sizing: border-box; }
.modal-form textarea { min-height: 120px; padding-top: 12px; resize: vertical; }
.modal-actions { display:flex; justify-content:flex-end; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.modal-grid { display:grid; gap: 12px; }
.modal-grid.compact-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.modal-grid.two-col { grid-template-columns: repeat(2, minmax(0,1fr)); }
.modal-list { display:grid; gap: 12px; }
.modal-list-item { display:flex; justify-content:space-between; gap: 16px; padding: 14px; border-radius: 16px; border: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.03); }
.modal-list-item p { margin: 8px 0 0; color: var(--text-2); }
.modal-note { margin: 0; color: var(--text-2); }
.twin-preview { display:grid; gap: 18px; }
.twin-preview img { width: 100%; height: 280px; object-fit: cover; border-radius: 18px; border: 1px solid rgba(255,255,255,.06); }
@media (max-width: 720px) { .modal-grid.compact-grid, .modal-grid.two-col { grid-template-columns: 1fr; } .modal-actions { flex-direction: column; } }

.overview-enhanced .hero-map { display:grid; gap:18px; }
.overview-toolbar { margin-bottom: 0; }
.toolbar-left, .toolbar-right, .panel-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.panel-head { justify-content: space-between; margin-bottom: 12px; }
.section-meta { color: var(--text-3); font-size: 12px; }
.map-wrap { position: relative; border-radius: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,.07); min-height: 440px; background: radial-gradient(circle at 30% 20%, rgba(59,130,246,.16), rgba(1,10,24,.92)); }
.elevated-map { box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 20px 60px rgba(2,8,23,.28); }
.real-map { height: 440px; width: 100%; filter: saturate(.7) brightness(.72) contrast(1.05); }
.real-map.weather { filter: saturate(.9) brightness(.78) contrast(1.05) hue-rotate(-10deg); }
.real-map.risk { filter: saturate(.75) brightness(.7) contrast(1.08); }
.leaflet-container { background: #071325; font-family: Inter, sans-serif; }
.leaflet-control-zoom { display:none; }
.property-marker-wrapper { background: transparent; border: 0; }
.property-marker { width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,.9); color: white; font-weight: 700; background: linear-gradient(135deg, #2b6cb0, #3b82f6); box-shadow: 0 0 0 7px rgba(59,130,246,.15), 0 12px 24px rgba(2,8,23,.4); transition: transform .2s ease, box-shadow .2s ease; }
.property-marker span { display:grid; place-items:center; width:100%; height:100%; }
.property-marker.warn { background: linear-gradient(135deg, #f59e0b, #fbbf24); box-shadow: 0 0 0 7px rgba(245,158,11,.14), 0 12px 24px rgba(2,8,23,.4); }
.property-marker.critical { background: linear-gradient(135deg, #ef4444, #fb7185); box-shadow: 0 0 0 9px rgba(239,68,68,.18), 0 12px 24px rgba(2,8,23,.48); }
.property-marker.active { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(96,165,250,.18), 0 14px 32px rgba(2,8,23,.52); }
.property-marker.pulse::after { content:''; position:absolute; inset:-6px; border-radius:50%; border:1px solid rgba(239,68,68,.42); animation: pulse-ring 1.8s ease-out infinite; }
.map-overlay { position:absolute; z-index: 500; border-radius: 16px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.08); background: rgba(8,17,34,.78); backdrop-filter: blur(10px); }
.map-overlay.top-left { top: 16px; left: 16px; }
.map-overlay.top-right { top: 16px; right: 16px; }
.map-overlay.bottom-left { left: 16px; bottom: 16px; }
.map-overlay.bottom-right { right: 16px; bottom: 16px; }
.overview-heading-card { max-width: 280px; }
.map-command-bar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; max-width: 66%; }
.command-badges { top: 78px; right: 16px; display:flex; gap:8px; flex-wrap:wrap; max-width: 56%; justify-content:flex-end; }
.overlay-title { font-weight: 700; }
.overlay-subtitle { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.mini-legend, .live-status { display:flex; gap: 12px; align-items:center; }
.live-status > div { min-width: 88px; }
.live-status small { display:block; color: var(--text-3); margin-bottom: 4px; }
.elevated-status { box-shadow: 0 12px 24px rgba(2,8,23,.24); }
.dot { width:10px; height:10px; display:inline-block; border-radius:50%; margin-right:8px; }
.dot.critical { background:#ef4444; box-shadow: 0 0 12px rgba(239,68,68,.55); }
.dot.warn { background:#f59e0b; }
.dot.ok { background:#60a5fa; }
.interactive-legend { gap: 8px; }
.legend-pill, .active-chip { height: 34px; border-radius: 999px; padding: 0 12px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); color: var(--text); display:inline-flex; align-items:center; gap:8px; }
.legend-pill.active { background: rgba(59,130,246,.16); border-color: rgba(96,165,250,.28); }
.active-chip { color: var(--text-2); }
.active-chip.muted { opacity: .8; }
.overview-kpis { grid-template-columns: repeat(4, minmax(0,1fr)); }
.mini-kpi.interactive { text-align:left; }
.mini-kpi strong { display:block; font-size: 38px; margin: 8px 0; }
.mini-kpi small { color: var(--text-3); }
.kpi-product { position:relative; overflow:hidden; }
.kpi-product::after { content:''; position:absolute; inset:auto -24px -24px auto; width:120px; height:120px; background: radial-gradient(circle, rgba(96,165,250,.18), transparent 70%); }
.kpi-trend-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top: 8px; }
.sparkline { width: 72px; height: 20px; border-radius: 999px; opacity: .9; }
.spark-1 { background: linear-gradient(90deg, rgba(96,165,250,.15), rgba(96,165,250,.75)); clip-path: polygon(0 80%, 12% 70%, 26% 76%, 39% 58%, 54% 62%, 70% 34%, 82% 40%, 100% 8%, 100% 100%, 0 100%); }
.spark-2 { background: linear-gradient(90deg, rgba(34,197,94,.12), rgba(34,197,94,.78)); clip-path: polygon(0 70%, 18% 68%, 34% 56%, 47% 58%, 62% 44%, 74% 36%, 88% 24%, 100% 18%, 100% 100%, 0 100%); }
.spark-3 { background: linear-gradient(90deg, rgba(245,158,11,.12), rgba(245,158,11,.8)); clip-path: polygon(0 24%, 15% 35%, 32% 30%, 48% 44%, 62% 58%, 78% 70%, 100% 76%, 100% 100%, 0 100%); }
.spark-4 { background: linear-gradient(90deg, rgba(251,113,133,.12), rgba(251,113,133,.8)); clip-path: polygon(0 76%, 16% 70%, 30% 54%, 47% 44%, 66% 34%, 81% 22%, 100% 18%, 100% 100%, 0 100%); }
.overview-bottom-row { align-items: stretch; }
.dense-stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
.dense-stats .metric-box { min-height: 124px; color: var(--text); }
.dense-stats .metric-box small { letter-spacing: .08em; font-size: 11px; }
.overview-rail { gap: 14px; }
.spotlight-card { position: relative; overflow: hidden; }
.spotlight-card::after { content:''; position:absolute; inset:auto -40px -40px auto; width:160px; height:160px; background: radial-gradient(circle, rgba(59,130,246,.26), transparent 65%); }
.spotlight-actions { display:flex; gap:10px; margin-top: 16px; }
.property-summary-card .modal-actions.no-top { margin-top: 2px; }
.overview-alert-item { position:relative; padding-left: 14px; overflow:hidden; }
.severity-rail { position:absolute; inset:10px auto 10px 0; width:4px; border-radius:999px; background: rgba(255,255,255,.12); }
.severity-rail.critical { background:#ef4444; }
.severity-rail.warn { background:#f59e0b; }
.spacious-donut-card { padding-bottom: 22px; }
.donut-summary-row { display:flex; gap:12px; flex-wrap:wrap; color: var(--text-2); margin-bottom: 8px; }
.donut-wrap { position: relative; height: 210px; }
.donut-wrap.spacious { height: 280px; padding: 8px 0 4px; }
.donut-center { position:absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); display:grid; place-items:center; pointer-events:none; }
.donut-center strong { font-size: 38px; }
.donut-center small { color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }
.chart-summary-row { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; color: var(--text-2); margin-bottom: 10px; }
.mini-toggle { display:inline-flex; padding:4px; border-radius: 999px; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); }
.mini-toggle button { height: 30px; padding: 0 10px; border:0; border-radius:999px; background: transparent; color: var(--text-2); }
.mini-toggle button.active { background: rgba(59,130,246,.18); color: white; }
.alerts-chart-wrap { min-height: 300px; }
.weather-card.upgraded .weather-summary { color: var(--text-2); margin-bottom: 12px; }
.expanded-weather strong { display:block; margin-bottom: 4px; }
.forecast-grid small { display:block; color: var(--text-3); margin-top: 4px; }
.ai-card p { color: var(--text-2); line-height: 1.5; }
.ai-meta { display:flex; justify-content:space-between; gap:10px; color: var(--text-2); margin-top: 12px; }
.ai-recommendation { margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(59,130,246,.12); border: 1px solid rgba(96,165,250,.2); color: #dbeafe; }
.sidebar-bottom .workspace-card { padding: 14px; }

.metric-box span, .phone-card strong { color: var(--text); }
.overview-stat-box { position: relative; overflow: hidden; }
.overview-stat-box span { color: #f8fbff; }
.mini-wave { position: absolute; right: 14px; bottom: 12px; width: 78px; height: 20px; border-radius: 999px; opacity: .95; }
.wave-blue { background: linear-gradient(90deg, rgba(96,165,250,.14), rgba(96,165,250,.82)); clip-path: polygon(0 78%, 14% 66%, 28% 70%, 44% 52%, 61% 58%, 76% 28%, 100% 18%, 100% 100%, 0 100%); }
.wave-green { background: linear-gradient(90deg, rgba(34,197,94,.12), rgba(34,197,94,.82)); clip-path: polygon(0 72%, 16% 60%, 32% 62%, 48% 50%, 63% 34%, 79% 30%, 100% 18%, 100% 100%, 0 100%); }
.wave-amber { background: linear-gradient(90deg, rgba(245,158,11,.12), rgba(245,158,11,.84)); clip-path: polygon(0 28%, 18% 34%, 36% 42%, 54% 54%, 72% 66%, 100% 74%, 100% 100%, 0 100%); }
.wave-rose { background: linear-gradient(90deg, rgba(251,113,133,.12), rgba(251,113,133,.84)); clip-path: polygon(0 76%, 20% 70%, 38% 54%, 58% 44%, 78% 24%, 100% 20%, 100% 100%, 0 100%); }
.wave-gold { background: linear-gradient(90deg, rgba(245,158,11,.08), rgba(250,204,21,.82)); clip-path: polygon(0 52%, 16% 56%, 32% 48%, 48% 42%, 64% 28%, 84% 22%, 100% 10%, 100% 100%, 0 100%); }
.wave-cyan { background: linear-gradient(90deg, rgba(34,211,238,.1), rgba(34,211,238,.84)); clip-path: polygon(0 80%, 16% 72%, 34% 60%, 50% 48%, 70% 34%, 88% 26%, 100% 18%, 100% 100%, 0 100%); }
.subpanel-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin-top: 16px; }
.subpanel-grid.top-gap { margin-top: 18px; }
.subpanel-card { border-radius: 18px; border: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.03); padding: 16px; min-height: 250px; }
.compact-chart-wrap { min-height: 220px; }
.property-ranking-card { display:grid; align-content:start; }
.ranking-list { display:grid; gap: 10px; }
.ranking-item { width:100%; display:flex; justify-content:space-between; align-items:center; gap:14px; padding:12px 14px; border-radius:14px; border:1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.025); color: var(--text); text-align:left; }
.ranking-item:hover { border-color: rgba(96,165,250,.2); background: rgba(96,165,250,.08); }
.ranking-item.static { cursor:default; }
.ranking-item small { color: var(--text-3); display:block; margin-top:4px; }
.empty-state { color: var(--text-3); padding: 10px 0; }
.sensor-marker-wrapper { background: transparent; border: 0; }
.sensor-marker { display:block; width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,.75); box-shadow: 0 0 0 4px rgba(15,23,42,.3); }
.sensor-marker.ok { background:#60a5fa; }
.sensor-marker.warn { background:#f59e0b; }
.sensor-marker.critical { background:#ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.16); }
.leaflet-tooltip { background: rgba(8,17,34,.96); color:#f8fbff; border:1px solid rgba(255,255,255,.08); border-radius:12px; box-shadow: 0 12px 24px rgba(2,8,23,.35); }
.leaflet-tooltip-top:before { border-top-color: rgba(8,17,34,.96); }
.section-title { color: #dce8fb; }
@media (max-width: 1080px) {
  .subpanel-grid { grid-template-columns: 1fr; }
}

@keyframes pulse-ring { from { transform: scale(.92); opacity: .85; } to { transform: scale(1.35); opacity: 0; } }
@media (max-width: 1080px) {
  .overview-kpis, .dense-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .map-wrap, .real-map { min-height: 380px; height: 380px; }
  .map-command-bar, .command-badges { max-width: calc(100% - 32px); }
}
@media (max-width: 720px) {
  .overview-kpis, .dense-stats { grid-template-columns: 1fr; }
  .map-overlay.bottom-left, .map-overlay.bottom-right, .map-overlay.top-right, .command-badges { position: static; margin: 12px; max-width: none; }
  .map-wrap { display:grid; }
  .mini-legend, .live-status, .map-command-bar, .chart-summary-row, .donut-summary-row { flex-wrap: wrap; }
}


/* Overview final pass */
select, option { color: #f8fbff; background: #0d1b33; }
select:focus { outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,.18); }
.modal-form select option, .inline-form select option { color: #f8fbff; background: #0d1b33; }
.mini-kpi strong, .mini-kpi p, .mini-kpi-title, .chart-summary-row strong, .distribution-row strong, .distribution-row small,
.section-meta, .chart-summary-row span, .panel-head .section-title, .modal-form label, .active-chip, .legend-pill,
.ranking-item strong, .ranking-item span, .overview-stat-box, .overview-stat-box p, .overview-stat-box strong { color: #f8fbff; }
.overview-kpis .mini-kpi strong, .enhanced-kpis .mini-kpi strong, .kpi-product strong { color: #f8fbff !important; }
.overview-kpis .mini-kpi p, .enhanced-kpis .mini-kpi p { color: #b8c5d6 !important; }
.overview-bottom-row { align-items: start; }
.map-wrap, .real-map { min-height: 420px; height: 420px; }
.leaflet-container { min-height: 420px; }
.command-badges { top: 84px; }
.active-chip { background: rgba(255,255,255,.07); }
.active-chip.muted { color: #d7e3f7; }
.metric-box strong, .metric-box span, .mini-kpi strong { text-shadow: 0 1px 0 rgba(0,0,0,.18); }
.overview-stat-box small, .metric-box small { color: #c3d1e6; }
.chart-canvas-wrap canvas { width: 100% !important; }
.dew-chart-wrap { min-height: 250px; }
.compact-summary { margin-bottom: 6px; }
.tertiary-grid .subpanel-card { min-height: 290px; }
.distribution-list { display: grid; gap: 16px; margin-top: 8px; }
.distribution-row { display: grid; gap: 10px; }
.distribution-row > div:first-child { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.distribution-row small { color: var(--text-3); }
.distribution-bar { height: 12px; border-radius: 999px; background: rgba(255,255,255,.05); overflow: hidden; border: 1px solid rgba(255,255,255,.06); }
.distribution-bar span { display:block; height:100%; border-radius:inherit; }
.distribution-bar .safe { background: linear-gradient(90deg, rgba(34,197,94,.55), rgba(74,222,128,.9)); }
.distribution-bar .watch { background: linear-gradient(90deg, rgba(245,158,11,.5), rgba(251,191,36,.95)); }
.distribution-bar .risk { background: linear-gradient(90deg, rgba(239,68,68,.55), rgba(251,113,133,.95)); }
.overview-subpanel-grid { align-items: start; }
.ranking-item .status-chip { min-width: 68px; justify-content: center; }
.chart-panel .subpanel-card { min-height: 260px; }
.property-summary-card strong, .property-summary-card .split-line strong, .rail-card strong { color: #f8fbff; }
.property-summary-card small, .rail-card small, .rail-card p { color: #b8c5d6; }
.leaflet-tooltip { color: #f8fbff !important; }
@media (max-width: 1080px) {
  .tertiary-grid { grid-template-columns: 1fr; }
}


/* Properties finalization */
.properties-two-column { align-items: start; }
.properties-list-panel, .property-detail-panel { min-height: 100%; }
.properties-toolbar { display: grid; gap: 12px; margin-bottom: 16px; }
.toolbar-main-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.toolbar-chip-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.ghost-link-btn { border:0; background:transparent; color:#93c5fd; cursor:pointer; }
.property-table.expanded { grid-template-columns: 1.6fr .95fr .45fr .55fr .55fr .65fr; }
.property-row.expanded { padding: 14px 14px; }
.eyebrow-inline { display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.04); color:var(--text-2); font-size:12px; margin-left:8px; }
.eyebrow-inline.tone-cyan { color:#67e8f9; }
.property-detail-top { margin-bottom: 12px; }
.detail-top-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.with-badge { position: relative; }
.detail-badge { position:absolute; right:16px; top:16px; padding:8px 12px; border-radius:999px; background:rgba(8,17,34,.72); border:1px solid rgba(255,255,255,.08); color:#e2e8f0; font-size:12px; }
.five-grid { display:grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap:14px; }
.property-kpis .metric-box.accent span { color:#67e8f9; }
.info-grid.expanded { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 18px; margin: 16px 0 18px; }
.property-tab-grid.two-up { display:grid; grid-template-columns: 1.1fr .9fr; gap:16px; margin: 14px 0 16px; }
.soft-panel { border:1px solid rgba(255,255,255,.08); border-radius:20px; background:rgba(255,255,255,.02); padding:16px; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.section-meta { color: var(--text-3); font-size: 12px; }
.chart-wrap.medium { height: 250px; }
.chart-wrap.compact { height: 220px; }
.property-sensor-list, .incident-list, .timeline-list { display:grid; gap:10px; }
.property-sensor-row { width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px; border-radius:16px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02); color:var(--text); text-align:left; }
.property-sensor-row:hover { border-color: rgba(96,165,250,.24); background: rgba(96,165,250,.08); }
.sensor-meta { display:flex; gap:10px; align-items:center; flex-wrap:wrap; color:var(--text-2); }
.property-health-grid { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:12px; margin-bottom:12px; }
.mini-health { border:1px solid rgba(255,255,255,.08); border-radius:16px; background:rgba(255,255,255,.02); padding:14px; }
.mini-health strong { display:block; font-size:24px; color:white; }
.mini-health small { color:var(--text-3); }
.timeline-row { display:grid; grid-template-columns: 12px 1fr auto; gap:12px; align-items:start; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.timeline-row:last-child { border-bottom:0; }
.timeline-row i { width:10px; height:10px; border-radius:999px; background:#60a5fa; margin-top:6px; box-shadow:0 0 0 4px rgba(96,165,250,.14); }
.timeline-row span { color:var(--text-3); font-size:12px; }
.guidance-panel { display:grid; gap:16px; align-content:start; }
.guidance-kpis { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; }
.guidance-kpis div { border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:14px; background:rgba(255,255,255,.02); }
.guidance-kpis strong { display:block; margin-top:4px; color:white; }
.guidance-note { border-radius:18px; padding:16px; border:1px solid rgba(255,255,255,.08); }
.guidance-note.ok { background:rgba(16,185,129,.08); }
.guidance-note.warn { background:rgba(245,158,11,.08); }
.guidance-note.critical { background:rgba(239,68,68,.08); }
.actions-row.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.empty-state { padding:16px; border-radius:16px; border:1px dashed rgba(255,255,255,.08); color:var(--text-3); }
.property-tabs { margin-bottom: 14px; }

@media (max-width: 1180px) {
  .property-table.expanded { grid-template-columns: 1fr; }
  .five-grid, .info-grid.expanded, .property-tab-grid.two-up, .property-health-grid, .guidance-kpis, .actions-row.four { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 780px) {
  .toolbar-main-row, .toolbar-chip-row, .detail-top-meta { flex-direction: column; align-items: stretch; }
  .five-grid, .info-grid.expanded, .property-tab-grid.two-up, .property-health-grid, .guidance-kpis, .actions-row.four { grid-template-columns: 1fr; }
  .property-sensor-row { flex-direction: column; align-items: flex-start; }
}


/* Properties final polish patch */
.properties-two-column.refined-split { grid-template-columns: minmax(340px, 38%) minmax(560px, 62%); align-items: start; }
.property-scroll-list { max-height: 380px; overflow: auto; padding-right: 4px; }
.properties-list-insight-grid { display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top: 16px; }
.property-distribution-panel { min-height: 240px; }
.compact-list { gap: 12px; }
.compact-list .distribution-row > div:first-child span { color: var(--text-2); font-size: 12px; }
.property-mini-kpis { display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-bottom: 12px; }
.property-mini-kpis div { border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:14px; background:rgba(255,255,255,.02); }
.property-mini-kpis strong { display:block; color:#fff; font-size: 24px; }
.property-mini-kpis small { color: var(--text-3); }
.property-detail-panel.expanded-detail { min-width: 0; }
.property-detail-top h2 { margin-bottom: 6px; }
.eyebrow-inline.warn { color: #fbbf24; }
.eyebrow-inline.critical { color: #f87171; }
.eyebrow-inline.ok { color: #86efac; }
.property-tabs button.active { color:#fff; border-bottom-width: 3px; box-shadow: inset 0 -1px 0 rgba(96,165,250,.35); }
.property-tabs button:hover { color:#e5eefc; }
.detail-image-wrap.with-badge img { min-height: 180px; object-fit: cover; }
.detail-badge { display:flex; gap:8px; align-items:center; }
.five-grid.compact-gap.property-kpis.spacious { gap: 16px; }
.property-kpis .metric-box { padding: 18px 18px 14px; min-height: 102px; }
.metric-trend { font-style: normal; font-size: 13px; margin-left: 6px; color: #86efac; }
.metric-trend.down { color: #fbbf24; }
.grouped-meta { grid-template-columns: 1fr 1fr; }
.meta-group-card { border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:16px; background:rgba(255,255,255,.02); display:grid; grid-template-columns: 1fr 1fr; gap:10px 16px; align-content:start; }
.meta-group-card .meta-group-title { grid-column: 1 / -1; text-transform: uppercase; letter-spacing: .12em; color: var(--text-3); font-size: 11px; }
.meta-group-card small { color: var(--text-3); }
.meta-group-card strong { color:#fff; }
.chart-wrap.compact.larger { height: 250px; }
.section-meta.summary-inline { margin-top: 4px; }
.feed-item { position: relative; }
.feed-item::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; border-radius: 12px 0 0 12px; opacity:.95; }
.feed-item.critical::before { background:#ef4444; }
.feed-item.warn::before, .feed-item.warning::before { background:#f59e0b; }
.feed-item.ok::before, .feed-item.stable::before, .feed-item.info::before { background:#60a5fa; }
.feed-item > div { padding-left: 8px; }
.property-actions-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.property-actions-grid .primary-btn, .property-actions-grid .ghost-btn { min-height: 48px; }
.quick-onboarding input, .quick-onboarding .input { color:#fff; }
.mobile-summary { grid-template-columns: repeat(5, minmax(0,1fr)); }
.mobile-summary .metric-box:last-child::after { content:'Last sync Mar 12'; display:block; margin-top:8px; font-size:12px; color: var(--text-3); }
@media (max-width: 1280px) {
  .properties-two-column.refined-split { grid-template-columns: 1fr; }
  .properties-list-insight-grid, .grouped-meta { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .property-mini-kpis, .mobile-summary, .property-actions-grid { grid-template-columns: 1fr; }
  .meta-group-card { grid-template-columns: 1fr; }
}


/* Properties final polish */
.properties-two-column.refined-split { grid-template-columns: minmax(360px, 39%) minmax(620px, 61%); }
.property-kpis.extra-air { gap: 18px; }
.property-kpis .metric-box { padding: 22px 20px 18px; }
.property-kpis .metric-box span { font-size: 26px; }
.dew-metric-card { position: relative; }
.mini-status { display:inline-flex; margin-top:10px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.mini-status.ok { color:#86efac; }
.mini-status.warn { color:#fbbf24; }
.mini-status.critical { color:#f87171; }
.property-row.active { box-shadow: 0 0 0 1px rgba(96,165,250,.42), 0 16px 28px rgba(15,23,42,.22); }
.property-distribution-panel { min-height: 280px; }
.property-distribution-panel .distribution-row { gap: 10px; }
.property-distribution-panel .distribution-row strong { color:#fff; }
.detail-badge { gap:10px; padding:10px 14px; }
.property-donut-wrap, .property-alert-chart, .property-dew-chart { position: relative; }
.property-donut-wrap canvas { min-height: 260px !important; }
.property-alert-chart canvas { min-height: 240px !important; }
.property-dew-chart canvas { min-height: 270px !important; }
.donut-center-label { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; pointer-events:none; z-index:2; }
.donut-center-label strong { color:#fff; font-size:24px; line-height:1; }
.donut-center-label small { color:var(--text-3); margin-top:6px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.summary-inline { max-width: 360px; line-height:1.35; }
.guidance-outlook { display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border:1px solid rgba(255,255,255,.08); border-radius:14px; background:rgba(255,255,255,.03); }
.guidance-outlook span { color:var(--text-3); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.guidance-outlook strong { color:#fff; }
.property-alert-feed strong::before { content:'⚠ '; }
.balanced-actions .soft-primary { background: linear-gradient(135deg, rgba(59,130,246,.9), rgba(96,165,250,.86)); box-shadow: 0 10px 24px rgba(59,130,246,.20); }
.balanced-actions .ghost-btn, .balanced-actions .primary-btn { min-height: 50px; }
.mobile-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1400px) {
  .properties-two-column.refined-split { grid-template-columns: minmax(330px, 41%) minmax(520px, 59%); }
  .mobile-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 1080px) {
  .mobile-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}


/* Properties cautious final patch */
.properties-two-column.refined-split { grid-template-columns: minmax(360px, 38%) minmax(640px, 62%); }
.property-detail-panel.expanded-detail { padding: 18px; }
.property-kpis .metric-box { padding: 22px 22px 18px; }
.property-kpis .metric-box span { font-size: 28px; }
.detail-image-wrap.with-badge.roof-live-preview { position: relative; min-height: 280px; }
.detail-image-wrap.with-badge.roof-live-preview img { width:100%; min-height: 280px; max-height: 320px; object-fit: contain; background: rgba(255,255,255,.02); }
.property-sensor-dot { position:absolute; width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,.88); box-shadow: 0 0 0 6px rgba(15,23,42,.18); transform: translate(-50%, -50%); background:#60a5fa; }
.property-sensor-dot.ok { background:#22c55e; }
.property-sensor-dot.warn { background:#f59e0b; }
.property-sensor-dot.critical { background:#ef4444; }
.property-sensor-dot.inline { z-index: 2; }
.property-sensor-dot.pulse::after { content:''; position:absolute; inset:-7px; border-radius:50%; border:1px solid rgba(239,68,68,.45); animation: pulse-ring 1.8s ease-out infinite; }
.property-twin-modal { display:grid; gap:16px; }
.twin-brand-chip { display:inline-flex; width:max-content; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.06); color:#cbd5e1; font-size:12px; font-weight:600; }
.property-twin-canvas { position:relative; border-radius:18px; overflow:hidden; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.08); }
.property-twin-canvas img { display:block; width:100%; min-height: 320px; max-height: 420px; object-fit: contain; background:#eef2f7; }
.property-twin-canvas .property-sensor-dot { width:16px; height:16px; }
.property-twin-meta-grid { display:grid; grid-template-columns: 1fr 1fr; gap:10px 24px; }
.wider-meta { grid-template-columns: 1fr; }
.grouped-meta.wider-meta .meta-group-card { min-height: 210px; grid-template-columns: 1fr 1.15fr; gap: 14px 24px; }
.grouped-meta.wider-meta .meta-group-title { margin-bottom: 6px; }
.meta-group-card small { display:block; margin-bottom:4px; }
.property-donut-wrap canvas { min-height: 320px !important; }
.property-alert-chart canvas { min-height: 290px !important; }
.property-dew-chart canvas { min-height: 320px !important; }
.property-external-chart canvas { min-height: 300px !important; }
.chart-wrap.compact.larger, .chart-wrap.medium.property-dew-chart, .chart-wrap.medium.property-alert-chart, .chart-wrap.medium.property-external-chart { height: 300px; }
.dew-layout { grid-template-columns: 1.08fr .92fr; }
.dew-wide-panel { grid-column: 1 / -1; }
.zoned-chart { position:relative; }
.zoned-chart::before { content:''; position:absolute; inset:10px 8px 20px; pointer-events:none; border-radius:18px; background: linear-gradient(to top, rgba(239,68,68,.08) 0 22%, rgba(245,158,11,.08) 22% 54%, rgba(16,185,129,.06) 54% 100%); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 0; opacity:.9; }
.feed-item.property-alert-feed { padding-left: 10px; }
.feed-item.property-alert-feed strong { display:flex; align-items:center; gap:8px; }
.feed-item.property-alert-feed small { line-height:1.45; }
.property-actions-grid.balanced-actions .ghost-btn, .property-actions-grid.balanced-actions .primary-btn { min-height: 52px; font-weight:600; }
.property-actions-grid.balanced-actions .soft-primary { box-shadow: 0 8px 18px rgba(59,130,246,.16); }
.mobile-grid { grid-template-columns: repeat(5, minmax(0,1fr)); }
.mobile-grid .metric-box.sync-card strong, .mobile-grid .metric-box.sync-card span { color:#fff; }
.sync-card small:last-child { display:block; margin-top:8px; color:var(--text-3); }
@media (max-width: 1280px) {
  .properties-two-column.refined-split { grid-template-columns: 1fr; }
  .grouped-meta.wider-meta .meta-group-card, .dew-layout, .property-twin-meta-grid, .mobile-grid { grid-template-columns: 1fr; }
}


/* Sensors workspace refresh */
.sensors-page-card { padding: 18px; }
.sensor-kpi-strip { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.sensor-kpi-card { padding: 14px 16px; border-radius: 18px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); }
.sensor-kpi-card small { color: var(--text-3); display:block; margin-bottom: 8px; }
.sensor-kpi-card strong { font-size: 1.6rem; }
.sensor-command-bar { display:flex; justify-content:space-between; gap: 14px; align-items:flex-start; margin-bottom: 12px; }
.sensor-command-left, .sensor-command-right { display:flex; flex-wrap:wrap; gap: 10px; align-items:center; }
.sensor-command-left { flex:1; }
.filter-select { min-width: 138px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); color: var(--text); }
.filter-select option { color: #0f172a; }
.sensor-chip-row { margin-bottom: 10px; align-items:center; }
.sensor-table.enhanced { grid-template-columns: 1fr 1.25fr .95fr .8fr .7fr .55fr .65fr .9fr .7fr; }
.sensor-table-header.enhanced { padding: 0 12px 8px; }
.sensor-row.enhanced { padding: 16px 12px; }
.sensor-scroll-table { max-height: calc(100vh - 340px); overflow:auto; padding-right: 4px; }
.dew-indicator { font-weight: 700; }
.dew-indicator.safe { color: #86efac; }
.dew-indicator.warning { color: #fcd34d; }
.dew-indicator.risk { color: #fda4af; }
.sensor-workspace-modal { display:grid; gap: 18px; }
.sensor-modal-topbar { display:flex; justify-content:space-between; gap: 16px; align-items:flex-start; }
.sensor-modal-topbar h3 { margin: 4px 0 6px; font-size: 2rem; }
.sensor-modal-topbar p { margin: 0; color: var(--text-2); }
.sensor-modal-statuses { display:flex; flex-wrap:wrap; gap: 10px; justify-content:flex-end; }
.sensor-modal-grid { display:grid; grid-template-columns: 1.05fr 1.1fr; gap: 18px; }
.sensor-map-panel, .sensor-data-panel, .sensor-alert-list, .sensor-action-panel { padding: 16px; border-radius: 20px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); }
.sensor-map-wrap { position:relative; min-height: 320px; overflow:hidden; border-radius: 18px; }
.sensor-map-wrap img { width:100%; height:320px; object-fit:cover; display:block; filter: saturate(.78) brightness(.92); }
.sensor-map-meta { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.sensor-map-meta small, .sensor-diagnostics-grid small, .sensor-history-list small { color: var(--text-3); display:block; margin-bottom: 6px; }
.sensor-map-meta strong, .sensor-diagnostics-grid strong, .sensor-history-list strong { display:block; }
.sensor-kpi-grid { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.sensor-kpi-grid .metric-box.warning { border-color: rgba(245,158,11,.3); }
.sensor-kpi-grid .metric-box.risk { border-color: rgba(239,68,68,.32); }
.sensor-diagnostics-grid { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.sensor-chart-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sensor-chart-grid .chart-wrap { min-height: 220px; }
.sensor-chart-grid canvas { height: 180px !important; }
.sensor-modal-bottom { display:grid; grid-template-columns: 1fr 340px; gap: 18px; }
.sensor-actions-row { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sensor-kpi-grid .metric-box, .sensor-diagnostics-grid > div { min-width: 0; }
.sensor-kpi-grid .metric-box span { font-size: clamp(2rem, 2.8vw, 3.25rem); line-height: 1.05; overflow-wrap: anywhere; }
.sensor-kpi-grid .metric-box small, .sensor-diagnostics-grid small { display:block; }
.sensor-diagnostics-grid strong { font-size: 1.1rem; line-height: 1.25; overflow-wrap: anywhere; }

.sensor-history-list { display:grid; gap: 12px; margin-top: 14px; }
.modal-card.wide { width: min(1180px, calc(100vw - 24px)); }
@media (max-width: 1180px) {
  .sensor-modal-grid, .sensor-modal-bottom { grid-template-columns: 1fr; }
  .sensor-chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .sensor-kpi-strip, .sensor-kpi-grid, .sensor-diagnostics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sensor-command-bar, .sensor-command-left, .sensor-command-right, .sensor-modal-topbar { flex-direction: column; align-items: stretch; }
  .sensor-table.enhanced { grid-template-columns: 1fr; }
}


/* Alerts workspace refresh */
.alerts-page-card { padding: 18px; }
.alerts-command-bar .sensor-command-left { flex: 1; }
.alert-table.enhanced { grid-template-columns: .7fr 1.15fr .9fr 1.15fr .8fr .8fr .85fr .55fr; }
.alerts-scroll-table { max-height: calc(100vh - 320px); overflow: auto; padding-right: 4px; }
.alert-row.enhanced span small { display:block; margin-top:4px; color: var(--text-3); }
.alert-workspace-modal { display:grid; gap: 18px; }
.alert-modal-topbar { display:flex; justify-content:space-between; gap: 16px; align-items:flex-start; }
.alert-modal-topbar h3 { margin: 4px 0 6px; font-size: 2rem; }
.alert-modal-topbar p { margin: 0; color: var(--text-2); }
.alert-modal-grid { display:grid; grid-template-columns: 1.02fr 1.12fr; gap: 18px; }
.alert-modal-bottom { display:grid; grid-template-columns: 1fr 360px; gap: 18px; }
.alert-kpi-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
.alert-chart-grid .chart-wrap { min-height: 220px; }
.alert-chart-grid canvas { height: 180px !important; }
.alert-timeline { display:grid; gap: 10px; margin-bottom: 18px; }
.alert-timeline-item { padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); }
.alert-timeline-item strong { display:block; margin-bottom: 6px; }
.alert-timeline-item small { color: var(--text-2); display:block; line-height: 1.45; }
.alert-actions-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
.critical-title.warn { color: #f59e0b; }
.critical-title.critical { color: #fb7185; }
@media (max-width: 1180px) {
  .alert-modal-grid, .alert-modal-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .alert-table.enhanced { grid-template-columns: 1fr; }
  .alert-modal-topbar, .alerts-command-bar, .alerts-command-bar .sensor-command-left, .alerts-command-bar .sensor-command-right { flex-direction: column; align-items: stretch; }
  .alert-kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}


/* Reports section hardening */
.reports-center { display:grid; gap:18px; }
.reports-toolbar { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.select-input { background: rgba(255,255,255,.04); color: var(--text-1); border:1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 10px 12px; min-width: 140px; }
.reports-kpis.plus-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.report-templates-grid { display:grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap:14px; }
.report-template-card { background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius: 18px; padding:16px; display:grid; gap:12px; }
.report-template-card p { margin:0; color: var(--text-2); min-height: 66px; }
.template-top { display:grid; gap:8px; }
.template-top strong { font-size: 15px; }
.template-meta { display:flex; justify-content:space-between; gap:12px; color: var(--text-3); font-size: 12px; }
.reports-section { display:grid; gap:10px; }
.reports-table-wide { grid-template-columns: 1.6fr .8fr 1fr .9fr .9fr .9fr 1.4fr; }
.reports-scheduled-table { grid-template-columns: 1.5fr .8fr 1fr .8fr 1.4fr .9fr .7fr 1.3fr; }
.format-badges, .reports-scheduled-table em { display:flex; flex-wrap:wrap; gap:6px; font-style:normal; }
.format-badges em, .reports-scheduled-table em { padding:4px 8px; background: rgba(107,197,255,.1); border:1px solid rgba(107,197,255,.14); border-radius:999px; color: var(--text-1); font-size:12px; }
.empty-state { padding: 18px; border: 1px dashed rgba(255,255,255,.12); border-radius: 16px; color: var(--text-2); display:grid; gap:4px; }
@media (max-width: 1400px) { .report-templates-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .reports-kpis.plus-five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .report-templates-grid, .reports-kpis.plus-five { grid-template-columns: repeat(2, minmax(0, 1fr)); } .reports-table-wide, .reports-scheduled-table { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .report-templates-grid, .reports-kpis.plus-five { grid-template-columns: 1fr; } .select-input { min-width: 100%; } }


.plan-summary-toolbar { align-items: center; }
.plan-summary-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  gap: 18px;
  padding: 22px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  margin-bottom: 18px;
}
.plan-summary-copy small { color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }
.plan-summary-copy h3 { margin: 10px 0 10px; font-size: clamp(2rem, 4vw, 2.8rem); }
.plan-summary-copy p { margin: 0; color: var(--text-2); line-height: 1.6; max-width: 62ch; }
.plan-summary-highlights { display: flex; flex-wrap: wrap; gap: 10px; align-content: start; justify-content: flex-end; }
.plan-summary-highlights span {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(59,130,246,.14);
  border: 1px solid rgba(96,165,250,.2);
  color: #dbeafe;
}
.plan-limit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.plan-limit-card {
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.plan-limit-card small { color: var(--text-3); display: block; margin-bottom: 10px; }
.plan-limit-card strong { display: block; font-size: 1.35rem; margin-bottom: 8px; }
.plan-limit-card p { margin: 0; color: var(--text-2); line-height: 1.55; }

@media (max-width: 900px) {
  .plan-summary-hero, .plan-limit-grid { grid-template-columns: 1fr; }
  .plan-summary-highlights { justify-content: flex-start; }
}
@media (max-width: 720px) {
  .modal-overlay { padding: 14px; }
  .modal-card, .modal-card.wide { width: min(100%, calc(100vw - 12px)); max-height: 88vh; border-radius: 20px; }
  .modal-head, .modal-body { padding-left: 16px; padding-right: 16px; }
}