:root {
  color-scheme: light;
  font-family: Pretendard, "Noto Sans KR", Inter, system-ui, -apple-system, sans-serif;
  color: #152238;
  background: #f3f6fa;
  font-synthesis: none;
  --navy: #12375b;
  --blue: #1769aa;
  --blue-soft: #eaf4fc;
  --green: #16805a;
  --green-soft: #e5f5ee;
  --amber: #a86a08;
  --amber-soft: #fff3d9;
  --red: #b33e46;
  --red-soft: #fdebed;
  --ink-soft: #657289;
  --line: #dce4ed;
  --surface: #fff;
  --shadow: 0 10px 30px rgba(23, 48, 78, .07);
}

* { box-sizing: border-box; }
html { min-width: 320px; }
body { margin: 0; background: #f3f6fa; }
a { color: inherit; }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.topbar { position: sticky; top: 0; z-index: 20; color: #fff; background: var(--navy); box-shadow: 0 3px 14px rgba(8, 30, 52, .18); }
.topbar-inner { width: min(1240px, calc(100% - 40px)); min-height: 70px; margin: 0 auto; display: flex; align-items: center; gap: 34px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; white-space: nowrap; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; color: #0e4f7d; background: #fff; border-radius: 11px 11px 15px 15px; font-size: 1rem; font-weight: 900; }
.brand > span:last-child { display: grid; }
.brand strong { font-size: 1.02rem; letter-spacing: -.01em; }
.brand small { margin-top: 2px; color: #bcd1e4; font-size: .68rem; font-weight: 500; }
.topnav { align-self: stretch; display: flex; align-items: stretch; gap: 6px; }
.topnav a { display: flex; align-items: center; padding: 0 14px; border-bottom: 3px solid transparent; color: #dbe8f3; font-size: .91rem; font-weight: 650; text-decoration: none; }
.topnav a:first-child { color: #fff; border-bottom-color: #63b4ec; }
.account-menu { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.account-identity { display: grid; text-align: right; }
.account-identity strong { font-size: .88rem; }
.account-identity small { margin-top: 2px; color: #bcd1e4; font-size: .72rem; }
.account-menu form { margin: 0; }
.link-button { min-height: 34px; padding: 6px 10px; color: #dbe8f3; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.2); border-radius: 8px; font-size: .78rem; }

.page { width: min(1240px, calc(100% - 40px)); margin: 34px auto 56px; }
h1, h2, h3, p { overflow-wrap: break-word; }
h1, h2, h3 { margin: 0; letter-spacing: -.025em; }
h1 { font-size: clamp(1.55rem, 2.4vw, 2rem); }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
.muted, .hero-copy { color: var(--ink-soft); }
.eyebrow { margin: 0 0 8px; color: #4c718f; font-size: .72rem; font-weight: 800; letter-spacing: .12em; }
.message, .error, .communication-alert { margin: 14px 0; padding: 13px 15px; border-radius: 10px; }
.message { color: #174d75; background: var(--blue-soft); }
.error, .communication-alert { color: #8e3039; background: var(--red-soft); border: 1px solid #f4cdd1; }

.dashboard-hero { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: 20px; padding: 8px 2px; }
.dashboard-hero h1 { color: #122b47; }
.hero-copy { margin: 9px 0 0; }
.account-validity { flex: none; display: flex; align-items: center; gap: 10px; min-width: 238px; padding: 13px 15px; color: #244560; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.account-validity > span:last-child { display: grid; gap: 3px; }
.account-validity small { color: var(--ink-soft); font-size: .72rem; }
.account-validity strong { font-size: .86rem; }

.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 18px; }
.stat-card { position: relative; overflow: hidden; min-height: 126px; display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 3px 12px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.stat-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: #91a4b6; }
.stat-card > span { align-self: center; color: #526279; font-size: .84rem; font-weight: 700; }
.stat-card strong { grid-row: span 2; align-self: center; font-size: 2rem; line-height: 1; }
.stat-card small { align-self: end; color: #8995a6; font-size: .73rem; }
.stat-card.normal::before { background: var(--green); }
.stat-card.normal strong { color: var(--green); }
.stat-card.attention::before { background: var(--red); }
.stat-card.attention strong { color: var(--red); }
.stat-card.pending::before { background: var(--blue); }
.stat-card.pending strong { color: var(--blue); }

.login-panel, .summary-panel, .device-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow); }
.login-panel { width: min(430px, 100%); margin: 70px auto; padding: 30px; }
.form-stack { display: grid; gap: 10px; margin-top: 22px; }
.form-stack label { font-weight: 650; margin-top: 5px; }
.form-stack input, .device-filters input, .device-filters select { width: 100%; min-height: 44px; padding: 9px 12px; color: #17283e; background: #fff; border: 1px solid #c8d3df; border-radius: 9px; outline: none; }
.form-stack input:focus, .device-filters input:focus, .device-filters select:focus { border-color: #3b82bd; box-shadow: 0 0 0 3px rgba(32, 116, 178, .12); }
.primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 9px 15px; border-radius: 9px; font-weight: 700; text-decoration: none; }
.primary-button { color: #fff; background: var(--blue); border: 1px solid var(--blue); }
.form-stack .primary-button { margin-top: 10px; }
.secondary-button { color: #24405f; background: #fff; border: 1px solid #bcc8d8; }

.summary-panel { display: flex; justify-content: space-between; gap: 28px; padding: 24px; }
.account-facts { display: grid; grid-template-columns: repeat(3, minmax(110px, 1fr)); gap: 10px; margin: 0; }
.account-facts div { padding: 11px 13px; background: #f3f6fa; border-radius: 9px; }
.account-facts dt { color: #6b7586; font-size: .78rem; }
.account-facts dd { margin: 5px 0 0; font-weight: 700; }

.device-panel { padding: 24px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.live-indicator { display: inline-flex; align-items: center; gap: 7px; color: #617085; font-size: .76rem; white-space: nowrap; }
.live-indicator.is-error { color: var(--red); }
.pulse-dot { width: 8px; height: 8px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 4px rgba(22,128,90,.12); }
.live-indicator.is-error .pulse-dot { background: var(--red); box-shadow: 0 0 0 4px rgba(179,62,70,.11); }
.device-filters { display: grid; grid-template-columns: minmax(260px, 2fr) minmax(145px, .7fr) minmax(145px, .7fr) auto auto; align-items: center; gap: 9px; margin-bottom: 20px; padding: 14px; background: #f6f8fb; border: 1px solid #e7ecf2; border-radius: 12px; }
.search-field { position: relative; display: flex; align-items: center; }
.search-field > span[aria-hidden] { position: absolute; left: 13px; z-index: 1; color: #718096; font-size: 1.25rem; }
.search-field input { padding-left: 39px; }
.filter-button { min-width: 72px; }
.reset-filter { padding: 8px 4px; color: #5d6b7d; font-size: .8rem; white-space: nowrap; }

.device-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.device-card { min-width: 0; display: flex; flex-direction: column; min-height: 335px; padding: 19px; background: #fff; border: 1px solid #dbe4ed; border-radius: 14px; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.device-card:hover { transform: translateY(-2px); border-color: #b8ccde; box-shadow: 0 12px 28px rgba(24,55,86,.09); }
.device-card-top { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "number status" "name name"; align-items: center; gap: 5px 12px; }
.device-card-top > div { display: contents; }
.device-number { margin: 0 0 5px; color: #5f7890; font-size: .72rem; font-weight: 750; letter-spacing: .03em; }
.device-card-top .device-number { grid-area: number; min-width: 0; margin-bottom: 0; overflow: hidden; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.device-card-top .status-pill { grid-area: status; align-self: center; justify-self: end; }
.device-card h3 { grid-area: name; width: 100%; overflow: hidden; font-size: clamp(.9rem, 4vw, 1.05rem); line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.status-pill { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 5px 9px; border-radius: 999px; color: #526273; background: #eef2f5; font-size: .73rem; font-weight: 750; white-space: nowrap; }
.status-pill.ok { color: #146a4c; background: var(--green-soft); }
.status-pill.stale { color: #8c5a07; background: var(--amber-soft); }
.status-pill.error, .status-pill.critical { color: #9e333d; background: var(--red-soft); }
.status-pill.pending { color: #155f91; background: var(--blue-soft); }
.status-pill.large { padding: 8px 12px; font-size: .82rem; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #94a0ad; }
.status-dot.ok { background: var(--green); }
.status-dot.stale { background: var(--amber); }
.status-dot.error, .status-dot.critical { background: var(--red); }
.status-dot.pending { background: var(--blue); }
.device-value { display: grid; gap: 5px; margin: 22px 0 18px; padding: 17px; background: linear-gradient(135deg, #f4f9fd, #edf5fb); border-radius: 11px; }
.device-value > span { color: #627489; font-size: .74rem; }
.device-value strong { color: #125e94; font-size: 1.8rem; line-height: 1.15; }
.device-value small { font-size: .45em; }
.tank-widget { display: grid; gap: 10px; margin: 19px 0 16px; }
.tank-control-layout { display: grid; grid-template-columns: calc((100% - 14px) / 3) minmax(0, 2fr); gap: 14px; min-height: 180px; perspective: 700px; }
.tank-shell { position: relative; isolation: isolate; height: 180px; overflow: hidden; background: linear-gradient(100deg, #d9e2e9 0%, #f8fbfd 38%, #e8eff4 72%, #cbd7e0 100%); border: 3px solid #718595; border-radius: 18px 18px 27px 27px; box-shadow: inset 7px 0 12px rgba(255,255,255,.72), inset -8px 0 14px rgba(46,72,92,.16), 6px 9px 18px rgba(39,62,81,.18); transform: rotateY(-4deg) rotateX(1deg); transform-origin: center; }
.tank-shell::before { content: ""; position: absolute; z-index: 5; top: -5px; left: -3px; width: calc(100% + 6px); height: 16px; background: radial-gradient(ellipse, #f8fbfd 12%, #a9bac7 58%, #52697b 72%); border: 2px solid #607789; border-radius: 50%; box-shadow: 0 3px 5px rgba(35,56,72,.24); }
.tank-shell::after { content: ""; position: absolute; z-index: 3; bottom: -7px; left: 3px; width: calc(100% - 6px); height: 20px; background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(38,62,81,.28)); border-radius: 50%; box-shadow: inset 0 2px 4px rgba(255,255,255,.38); }
.tank-water { --water-light: #66b9ee; --water-main: #2585d0; --water-deep: #14649f; position: absolute; z-index: 0; inset: auto 0 0; height: var(--level, 0%); min-height: 0; overflow: visible; background: linear-gradient(100deg, var(--water-deep), var(--water-light) 40%, var(--water-main) 72%, var(--water-deep)); box-shadow: inset 7px 0 12px rgba(255,255,255,.23), inset -7px 0 13px rgba(0,34,63,.2); transition: height .65s ease, background .3s ease; }
.tank-middle .tank-water { --water-light: #6ed69d; --water-main: #27a568; --water-deep: #14764a; }
.tank-low .tank-water { --water-light: #ffe06c; --water-main: #efbd29; --water-deep: #bd8509; }
.tank-critical .tank-water { --water-light: #ff7a80; --water-main: #d9424c; --water-deep: #9c202a; }
.water-wave { position: absolute; top: -7px; left: -20%; width: 140%; height: 15px; background: rgba(255,255,255,.38); border-radius: 50%; box-shadow: 0 -2px 5px rgba(255,255,255,.35); animation: tank-slosh 3.2s ease-in-out infinite; }
.water-wave.wave-two { top: -3px; left: -24%; background: rgba(12,57,84,.13); animation-duration: 4.1s; animation-direction: reverse; }
.tank-glass-shine { position: absolute; z-index: 2; top: 17px; bottom: 16px; left: 9px; width: 14%; background: linear-gradient(90deg, rgba(255,255,255,.62), rgba(255,255,255,.05)); border-radius: 50%; transform: skewY(-7deg); pointer-events: none; }
.tank-capacity { position: absolute; z-index: 4; top: 15px; right: 7px; display: grid; justify-items: end; color: #33495d; line-height: 1.1; text-shadow: 0 1px 0 rgba(255,255,255,.86); }
.tank-capacity span { font-size: .48rem; font-weight: 700; }
.tank-capacity strong { margin-top: 2px; font-size: .61rem; white-space: nowrap; }
.tank-scale { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.tank-scale i { position: absolute; right: 5px; bottom: var(--marker); display: block; width: 12px; border-top: 1px solid rgba(28,49,68,.34); }
.tank-readout { position: absolute; z-index: 3; inset: 36px 3px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #122a40; text-align: center; text-shadow: 0 1px 0 rgba(255,255,255,.78); }
.tank-readout > span { font-size: .58rem; font-weight: 700; }
.tank-readout > strong { margin: 2px 0; font-size: clamp(1.48rem, 2.15vw, 1.85rem); line-height: 1; letter-spacing: -.05em; }
.tank-readout small { padding: 2px 5px; background: rgba(255,255,255,.75); border-radius: 999px; font-size: .55rem; font-weight: 800; }
.tank-estimate { display: grid; gap: 1px; margin-top: 8px; padding: 4px 5px; background: rgba(255,255,255,.68); border-radius: 6px; line-height: 1.05; }
.tank-estimate strong { font-size: .66rem; white-space: nowrap; }
.future-control-space { min-width: 0; min-height: 180px; }
.level-chart { min-width: 0; min-height: 180px; padding: 12px 13px 7px; background: linear-gradient(145deg, #f8fbfd, #f1f7fb); border: 1px solid #d7e4ed; border-radius: 13px; }
.level-chart-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.level-chart-header > div { min-width: 0; display: grid; gap: 3px; }
.level-chart-header strong { color: #1d405a; font-size: .86rem; }
.level-chart-header [data-role="history-summary"] { overflow: hidden; color: #708296; font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.history-period-control { flex: none; display: flex; align-items: center; gap: 6px; color: #617488; font-size: .68rem; font-weight: 700; }
.history-period-control select { min-height: 32px; padding: 5px 26px 5px 8px; color: #27465e; background: #fff; border: 1px solid #bccddb; border-radius: 7px; outline: none; font-size: .72rem; font-weight: 700; }
.history-period-control select:focus { border-color: #3b82bd; box-shadow: 0 0 0 3px rgba(32,116,178,.12); }
.level-chart-stage { position: relative; min-height: 142px; margin-top: 6px; }
.level-chart-stage svg { display: block; width: 100%; height: auto; min-height: 142px; overflow: visible; }
.level-chart-grid-line { stroke: #dbe5ec; stroke-width: 1; }
.level-chart-threshold { stroke-width: 1.2; stroke-dasharray: 5 4; opacity: .62; }
.level-chart-threshold.high { stroke: #2f86c5; }
.level-chart-threshold.middle { stroke: #2a9b69; }
.level-chart-threshold.low { stroke: #d39b17; }
.level-chart-axis-label { fill: #7b8b9a; font-size: 11px; font-family: inherit; }
.level-chart-area { fill: rgba(38,132,194,.09); stroke: none; }
.level-chart-line { fill: none; stroke: #1769aa; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.level-chart-focus-line { stroke: #66849a; stroke-width: 1; stroke-dasharray: 3 3; }
.level-chart-focus-dot { fill: #fff; stroke: #1769aa; stroke-width: 3; }
.level-chart-hit-area { fill: transparent; pointer-events: all; }
.level-chart-tooltip { position: absolute; z-index: 4; min-width: 104px; padding: 7px 9px; color: #fff; background: rgba(18,45,67,.94); border-radius: 7px; font-size: .66rem; line-height: 1.5; pointer-events: none; transform: translate(-50%, calc(-100% - 10px)); white-space: nowrap; }
.level-chart-tooltip strong { display: block; font-size: .78rem; }
.level-chart-message { position: absolute; inset: 20px 8px 12px 44px; display: grid; place-items: center; color: #708296; font-size: .72rem; text-align: center; }
.communication-failure-icon { position: absolute; z-index: 3; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; color: #ff3947; }
.communication-failure-icon strong { font-size: 4rem; line-height: .82; text-shadow: 0 0 20px rgba(255,31,48,.38); }
.communication-failure-icon span { margin-top: 9px; color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.tank-widget.communication-failure .tank-shell { background: #050607; border-color: #17191b; box-shadow: inset 0 0 22px rgba(255,0,18,.12); }
.tank-widget.communication-failure .tank-shell::before, .tank-widget.communication-failure .tank-shell::after { background: #17191b; border-color: #25282b; }
.tank-widget.communication-failure .tank-water, .tank-widget.communication-failure .tank-readout, .tank-widget.communication-failure .tank-scale, .tank-widget.communication-failure .tank-capacity, .tank-widget.communication-failure .tank-glass-shine { display: none; }
.tank-widget.communication-failure .communication-failure-icon { display: flex; }
.low-level-alert { display: flex; align-items: center; gap: 9px; padding: 9px 11px; color: #fff; background: #c9343f; border-radius: 9px; font-size: .76rem; font-weight: 700; box-shadow: 0 5px 13px rgba(177,37,49,.18); }
.low-level-alert > strong { display: grid; place-items: center; flex: none; width: 22px; height: 22px; color: #c9343f; background: #fff; border-radius: 50%; font-size: .9rem; }
@keyframes tank-slosh {
  0%, 100% { transform: translateX(-3%) rotate(-1.5deg) scaleY(.88); }
  50% { transform: translateX(3%) rotate(1.5deg) scaleY(1.08); }
}
.device-meta { display: grid; gap: 9px; margin: 0; }
.device-meta div { min-width: 0; display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 9px; }
.device-meta dt { color: #7a8798; font-size: .74rem; }
.device-meta dd { margin: 0; overflow: hidden; color: #405065; font-size: .78rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.device-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 17px; border-top: 1px solid #edf0f4; }
.device-card-footer a { color: #16659e; font-size: .8rem; font-weight: 750; text-decoration: none; }
.permission-label { display: inline-flex; align-items: center; padding: 4px 8px; color: #4d6478; background: #eef3f6; border-radius: 6px; font-size: .7rem; font-weight: 700; white-space: nowrap; }
.empty-state { display: grid; gap: 7px; justify-items: center; padding: 42px 24px; color: #718095; background: #f6f8fa; border: 1px dashed #d5dee7; border-radius: 11px; text-align: center; }
.empty-state strong { color: #425368; }
.empty-state span { font-size: .84rem; }

.back-link { display: inline-flex; gap: 6px; margin-bottom: 16px; color: #536b81; font-size: .83rem; font-weight: 700; text-decoration: none; }
.detail-hero { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 17px; padding: 24px; background: linear-gradient(120deg, #143c62, #1c5a87); border-radius: 15px; color: #fff; box-shadow: 0 12px 28px rgba(20,60,98,.16); }
.detail-hero .device-number { color: #bcd8eb; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.detail-tags span { padding: 5px 9px; color: #e0edf6; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.13); border-radius: 7px; font-size: .73rem; }
.reading-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; align-items: stretch; }
.reading-card { min-width: 0; display: grid; gap: 8px; min-height: 154px; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); }
.reading-card > span { color: #6d7b8e; font-size: .78rem; }
.reading-card strong { align-self: center; font-size: 1.4rem; }
.primary-reading { background: linear-gradient(135deg, #f4faff, #fff); border-color: #c7dced; }
.primary-reading strong { color: #136399; font-size: clamp(2rem, 4vw, 2.55rem); }
.reading-card small { color: #68798c; font-size: .45em; }
.communication-status.ok { color: var(--green); }
.communication-status.stale { color: var(--amber); }
.communication-status.error { color: var(--red); }
.communication-status.pending { color: var(--blue); }
.latency-value { display: inline-flex; align-items: center; width: fit-content; padding: 4px 8px; border: 1px solid transparent; border-radius: 999px; font-weight: 750; line-height: 1; }
.latency-value.latency-fast { color: #137333; background: #e6f4ea; border-color: #b7dfc2; }
.latency-value.latency-slow { color: #7a5700; background: #fff4c2; border-color: #ead27a; }
.tank-reading-card { grid-column: 1 / -1; min-height: 340px; }
.tank-reading-card .tank-widget { margin: 3px 0; }
.tank-reading-card .tank-control-layout { align-items: stretch; }
.tank-reading-card .tank-shell { width: 50%; height: 100%; min-height: 220px; justify-self: center; }
.tank-reading-card .future-control-space { min-height: 220px; }
.tank-reading-card .level-chart { min-height: 220px; }
.tank-reading-card .tank-readout > strong { font-size: 2.1rem; }
.communication-alert { margin: 14px 0 0; }
.history-panel { margin-top: 18px; }
.panel-actions { display: flex; align-items: center; gap: 12px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 13px 11px; border-bottom: 1px solid #e6ebf1; text-align: left; white-space: nowrap; }
th { color: #657388; background: #f8fafc; font-size: .78rem; }
td { color: #3e4e62; font-size: .83rem; }
tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 1020px) {
  .device-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .device-filters { grid-template-columns: minmax(220px, 1.5fr) 1fr 1fr auto; }
  .reset-filter { grid-column: 1 / -1; justify-self: end; }
}

@media (max-width: 760px) {
  .topbar-inner { width: min(100% - 28px, 1240px); min-height: 64px; gap: 14px; }
  .brand small, .account-identity small { display: none; }
  .topnav { margin-left: auto; }
  .topnav a { padding: 0 7px; font-size: .8rem; }
  .account-menu { margin-left: 0; gap: 7px; }
  .account-identity { display: none; }
  .page { width: min(100% - 28px, 1240px); margin-top: 24px; }
  .dashboard-hero { align-items: flex-start; }
  .account-validity { min-width: 0; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .device-panel { padding: 18px; }
  .device-filters { grid-template-columns: 1fr 1fr; }
  .search-field { grid-column: 1 / -1; }
  .filter-button { width: 100%; }
  .reset-filter { grid-column: auto; justify-self: center; }
  .reading-grid { grid-template-columns: 1fr; }
  .tank-reading-card { grid-column: auto; }
  .reading-card { min-height: 130px; }
  .summary-panel { flex-direction: column; }
  .account-facts { width: 100%; grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .brand-mark { width: 32px; height: 32px; }
  .brand strong { font-size: .92rem; }
  .topnav a { padding: 0 5px; }
  .link-button { padding: 5px 7px; }
  .page { width: min(100% - 22px, 1240px); margin-top: 19px; }
  .dashboard-hero { display: grid; gap: 15px; }
  .account-validity { width: 100%; box-shadow: none; }
  .stat-card { min-height: 104px; padding: 15px; }
  .stat-card strong { font-size: 1.65rem; }
  .stat-card small { font-size: .66rem; }
  .section-heading { align-items: flex-start; }
  .dashboard-heading { display: grid; }
  .device-filters { grid-template-columns: 1fr; }
  .search-field, .reset-filter { grid-column: auto; }
  .device-card-grid { grid-template-columns: 1fr; }
  .device-card { min-height: 320px; padding: 17px; }
  .detail-hero { align-items: flex-start; padding: 19px; }
  .detail-hero > div { min-width: 0; }
  .detail-hero .device-number { padding-right: 80px; }
  .detail-hero h1 { margin-top: 24px; line-height: 1.25; }
  .detail-hero .status-pill { position: absolute; top: 19px; right: 19px; }
  .tank-reading-card .tank-control-layout { grid-template-columns: 1fr; }
  .tank-reading-card .tank-shell { width: min(48%, 180px); height: 220px; justify-self: center; }
  .level-chart-header { align-items: center; }
  .level-chart-stage { min-height: 170px; }
  .history-panel .section-heading { display: grid; }
  .panel-actions { flex-wrap: wrap; }
  .responsive-table, .responsive-table table, .responsive-table tbody { display: block; width: 100%; overflow: visible; }
  .responsive-table thead { display: none; }
  .responsive-table tr { display: grid; gap: 8px; margin-bottom: 11px; padding: 14px; background: #f8fafc; border: 1px solid #e2e8ef; border-radius: 10px; }
  .responsive-table tr:last-child { margin-bottom: 0; }
  .responsive-table td { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 0; border: 0; white-space: normal; text-align: right; }
  .responsive-table td::before { content: attr(data-label); color: #788699; font-size: .72rem; font-weight: 600; }
}

@media (max-width: 390px) {
  .topnav { display: none; }
  .account-menu { margin-left: auto; }
  .stat-grid { gap: 9px; }
  .stat-card { padding: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .water-wave { animation: none; }
  .tank-water { transition: none; }
}