/* Guardian Star v2 — interface leve, sem bibliotecas ou fontes externas. */
:root {
  color-scheme: dark;
  --bg: #091119;
  --bg-raised: #101d26;
  --panel: #12212b;
  --panel-2: #172833;
  --stroke: rgba(174,205,208,.12);
  --stroke-strong: rgba(174,205,208,.22);
  --ink: #edf6f4;
  --text-secondary: #a5b7bb;
  --muted: #80969d;
  --accent: #9ce2d0;
  --accent-bright: #baf9e8;
  --accent-dark: #193d40;
  --warm: #edcead;
  --radius: 20px;
  --shadow: 0 25px 75px rgba(0,0,0,.23);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font-family: "Segoe UI", Inter, -apple-system, BlinkMacSystemFont, system-ui, Arial, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { cursor: pointer; }
svg { display: block; width: 20px; height: 20px; }
a { color: inherit; }
.hidden { display: none !important; }
::selection { background: #a6e8d5; color: #06141c; }
:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid transparent; border-radius: 12px; padding: 11px 16px; min-height: 43px; color: var(--ink); text-decoration: none; font-weight: 650; font-size: 12px; letter-spacing: .01em; white-space: nowrap; background: transparent; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.button:not(:disabled):hover { transform: translateY(-1px); }
.button:disabled { opacity: .4; cursor: not-allowed; }
.button svg { width: 17px; height: 17px; flex: 0 0 auto; }
.button-primary { background: var(--accent); color: #09262a; box-shadow: 0 5px 24px rgba(117,214,194,.10); }
.button-primary:not(:disabled):hover { background: var(--accent-bright); }
.button-outline { border-color: rgba(163,204,205,.18); background: rgba(160,211,211,.05); color: #d8e7e7; }
.button-outline:not(:disabled):hover { border-color: rgba(163,204,205,.38); background: rgba(160,211,211,.09); }
.button-quiet { border-color: var(--stroke); color: #c8d9da; }
.button-quiet:hover { background: rgba(255,255,255,.06); }
.eyebrow { font-weight: 780; font-size: 10px; letter-spacing: .21em; color: var(--accent); }

/* LOGIN */
.login-view { min-height: 100vh; min-height: 100dvh; padding: 28px; display: grid; place-items: center; background: radial-gradient(ellipse at 20% 25%, #152f35 0, transparent 45%), radial-gradient(ellipse at 90% 100%, #181d2e 0, transparent 44%), #081018; }
.login-shell { width: min(100%, 1050px); min-height: 610px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0,.95fr); overflow: hidden; border: 1px solid #2d4346; border-radius: 26px; background: #101d26; box-shadow: 0 40px 120px rgba(0,0,0,.46); }
.login-scene { position: relative; isolation: isolate; min-height: 610px; overflow: hidden; background: radial-gradient(circle at 52% 39%, #385a55 0, #1b343d 28%, #10232e 60%, #0d2029 100%); }
.scene-glow { position: absolute; z-index: -1; inset: 12% 5% auto; height: 340px; border-radius: 50%; filter: blur(65px); background: rgba(113,207,182,.12); }
.scene-orbit { position: absolute; left: 50%; top: 42%; transform: translate(-50%,-50%) rotate(-22deg); border-radius: 50%; border: 1px solid rgba(178,230,218,.12); }
.orbit-one { width: 370px; height: 370px; }
.orbit-two { width: 510px; height: 510px; }
.scene-moon { position: absolute; left: 50%; top: 40%; transform: translate(-50%,-50%); width: 195px; height: 195px; border-radius: 50%; background: linear-gradient(135deg, #f5e3c5, #cebda7 70%, #a5afa8); box-shadow: 0 0 36px rgba(232,211,177,.15), 0 0 125px rgba(178,221,209,.12); }
.scene-moon span { position: absolute; width: 180px; height: 180px; top: -27px; left: 45px; border-radius: 50%; background: radial-gradient(circle at 45% 40%, #1b3540, #132a33 90%); }
.scene-stars { position:absolute; inset:0; pointer-events:none; color:#b8eee1; }
.scene-stars span { position:absolute; }
.scene-stars span:nth-child(1) { left: 19%; top: 18%; font-size: 22px; }
.scene-stars span:nth-child(2) { right: 22%; top: 26%; font-size: 18px; opacity: .7; }
.scene-stars span:nth-child(3) { left: 29%; top: 49%; font-size: 44px; opacity: .6; }
.scene-stars span:nth-child(4) { right: 15%; top: 56%; font-size: 26px; opacity: .6; }
.scene-stars span:nth-child(5) { right: 40%; top: 13%; font-size: 36px; opacity: .4; }
.scene-copy { position: absolute; bottom: 42px; left: 42px; right: 42px; }
.scene-copy h2 { margin: 16px 0 16px; max-width: 420px; font-size: clamp(31px,3vw,40px); font-weight: 720; letter-spacing: -.055em; line-height: 1.13; }
.scene-copy h2 em { color: var(--accent); font-weight: 530; font-style: normal; }
.scene-copy p { margin: 0; color: #bbd0d2; font-size: 13px; line-height: 1.7; max-width: 310px; }
.login-card { padding: 51px clamp(29px,4vw,56px) 35px; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand-icon { display: grid; place-items: center; flex: 0 0 40px; height: 40px; background: rgba(149,222,204,.10); border: 1px solid rgba(158,232,210,.24); border-radius: 13px; color: var(--accent); }
.brand-icon svg { width: 24px; height: 24px; }
.brand-wordmark { font-size: 19px; letter-spacing: -.055em; font-weight: 770; line-height: 1.05; }
.brand-wordmark span { color: var(--accent); }
.brand-wordmark small { display:block; font-weight: 700; color: #84999e; font-size: 8px; letter-spacing: .22em; margin-top: 7px; }
.login-intro { margin: auto 0 30px; padding-top: 75px; }
.login-intro h1 { margin: 16px 0 10px; font-size: clamp(29px,3vw,37px); letter-spacing: -.05em; line-height: 1.2; }
.login-intro p { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.7; }
.login-card form { display: flex; flex-direction: column; }
.login-card label { display:block; color: #dae7e5; font-size: 12px; font-weight: 660; margin: 0 0 9px; }
.login-card input { width: 100%; border: 1px solid #344b51; border-radius: 10px; background: #091820; color: #f1fbf8; padding: 15px 16px; font-size: 13px; outline: none; margin: 0 0 21px; min-width: 0; }
.login-card input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(144,217,201,.1); }
.login-card input::placeholder { color:#647e85; }
.password-label { margin-top: 1px; }
.form-error { min-height: 17px; margin: -3px 0 12px; color: #ffb9a9; font-size: 12px; }
.login-submit { width:100%; min-height: 51px; justify-content: space-between; padding: 12px 18px; font-size: 13px; }
.login-security { margin-top: auto; padding-top: 36px; display:flex; gap:9px; align-items:center; color: #788f94; font-size: 11px; }
.login-security svg { width: 16px; height: 16px; }

/* DASHBOARD */
.dashboard { min-height: 100vh; background: radial-gradient(ellipse at 48% -27%, rgba(55,117,111,.19) 0, transparent 44%), var(--bg); }
.topbar { border-bottom: 1px solid var(--stroke); background: rgba(10,20,27,.85); }
.topbar-inner { max-width: 1660px; margin:auto; padding: 16px clamp(24px,4vw,58px); display:flex; justify-content:space-between; align-items:center; gap:20px; }
.topbar-actions { display:flex; gap:12px; align-items:center; }
.secure-label { display:flex; align-items:center; gap:7px; color:#8ba6a9; font-size:12px; }
.secure-label svg { width:15px; height:15px; color:var(--accent); }
.user-pill { display:block; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:10px 14px; border:1px solid var(--stroke); border-radius:20px; color:#bdcece; font-size:12px; }
.main-content { width:min(100%,1660px); margin:auto; padding: 35px clamp(24px,4vw,58px) 22px; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:0 0 27px; }
.page-eyebrow { display:flex; align-items:center; gap:11px; letter-spacing:.18em; font-size:10px; font-weight:760; color:var(--accent); }
.accent-line { width:19px; height:2px; border-radius:4px; background:var(--accent); }
.page-head h1 { font-size:clamp(26px,3vw,39px); font-weight:720; letter-spacing:-.052em; margin:12px 0 5px; line-height:1.19; }
.page-head h1 span { font-size:.67em; color:var(--warm); padding-left:3px; vertical-align:4px; }
.page-head p { color:var(--text-secondary); margin:0; font-size:13px; }
.clock-wrap { display:flex; flex-direction:column; text-align:right; gap:7px; padding-bottom:4px; }
.clock-label { color:#709599; font-size:10px; font-weight:740; letter-spacing:.22em; }
.clock-wrap time { color:#e4eeee; font-weight:620; font-size:13px; text-transform:capitalize; }
.monitor { overflow:hidden; border-radius:22px; border:1px solid var(--stroke-strong); background:#0f1b23; box-shadow:var(--shadow); }
.monitor-heading { height:78px; padding: 0 25px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.monitor-heading-title { display:flex; align-items:center; gap:13px; min-width:0; }
.camera-heading-icon { width:39px; height:39px; border-radius:11px; border:1px solid rgba(166,231,214,.15); display:grid; place-items:center; background:rgba(149,227,209,.06); color:var(--accent); }
.camera-heading-icon svg { width:20px; height:20px; }
.monitor-heading h2 { margin:0; font-size:15px; letter-spacing:-.01em; font-weight:720; }
.monitor-heading-title span:not(.camera-heading-icon) { display:block; font-size:11px; color:#839ba2; margin-top:5px; }
.heading-right { display:flex; align-items:center; gap:12px; }
.rtc-tag { font-size:10px; font-weight:740; letter-spacing:.09em; color:var(--accent); display:flex; align-items:center; gap:8px; padding:8px 11px; background:rgba(102,206,176,.065); border-radius:30px; border:1px solid rgba(145,223,199,.15); }
.rtc-tag i { width:6px; height:6px; border-radius:50%; background:#8dd9b6; box-shadow:0 0 0 3px rgba(117,225,172,.10); }
.resolution-tag { color:#81969d; font-size:11px; font-weight:610; }
.video-container { position:relative; isolation:isolate; width:100%; aspect-ratio:16/9; min-height:220px; overflow:hidden; background:#040b0f; }
.video-container::after { content:""; position:absolute; z-index:4; pointer-events:none; inset:0; box-shadow:inset 0 0 0 1px rgba(173,228,215,.04); }
.video-container iframe { position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; border:0; display:block; background:#000; }
.video-wash { position:absolute; z-index:0; inset:0; pointer-events:none; background: radial-gradient(ellipse at 55% 55%,#253c42 0,#12242c 46%,#070f16 90%); }
.video-placeholder { position:absolute; z-index:2; inset:0; display:flex; justify-content:center; align-items:center; flex-direction:column; padding:35px 24px; text-align:center; background: radial-gradient(ellipse at 50% 60%,#20383e 0,#11232b 52%,#08161d 100%); }
.video-placeholder::before { content:""; position:absolute; inset:9% 23%; border:1px solid rgba(194,234,221,.06); border-radius:50%; pointer-events:none; }
.video-placeholder::after { content:""; position:absolute; inset:21% 30%; border:1px solid rgba(194,234,221,.045); border-radius:50%; pointer-events:none; }
.placeholder-aura { z-index:1; display:grid; place-items:center; height:92px; width:92px; border:1px solid rgba(167,229,207,.22); border-radius:50%; background:rgba(121,191,178,.05); box-shadow:0 0 0 16px rgba(115,196,180,.026), 0 0 0 42px rgba(115,196,180,.017); margin-bottom:24px; }
.placeholder-camera { color:#bee8de; }
.placeholder-camera svg { height:44px; width:44px; }
.placeholder-copy { position:relative; z-index:3; }
.placeholder-copy h3 { margin:0 0 8px; font-size:clamp(19px,2.2vw,27px); letter-spacing:-.035em; font-weight:680; }
.placeholder-copy p { margin:0 auto 22px; max-width:340px; font-size:12px; line-height:1.6; color:#a2bdbe; }
.placeholder-copy .button { min-height:46px; padding:11px 19px; font-size:12px; }
/* Overlays are on the outside of the MediaMTX iframe but INSIDE the video
   rectangle; pointer-events:none keeps native WebRTC/audio controls usable. */
.camera-overlays { position:absolute; inset:0; z-index:5; pointer-events:none; display:flex; justify-content:space-between; flex-direction:column; }
.overlay-top { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding:21px 22px; background:linear-gradient(to bottom,rgba(0,0,0,.37),transparent); }
.onair-tag { display:flex; align-items:center; gap:9px; padding:10px 12px; background:rgba(5,18,23,.72); border:1px solid rgba(221,251,238,.16); border-radius:8px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:#f5fffb; font-weight:800; letter-spacing:.14em; font-size:10px; white-space:nowrap; }
.onair-dot { width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:#ff817b; box-shadow:0 0 0 4px rgba(255,110,105,.13); }
.overlay-sensors { display:flex; gap:8px; align-items:stretch; }
.sensor-glass { display:flex; align-items:center; gap:12px; padding:12px 16px; min-width:150px; color:#f7fffd; border:1px solid rgba(219,251,238,.20); border-radius:11px; background:rgba(6,20,26,.74); box-shadow:0 10px 24px rgba(0,0,0,.12); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.sensor-glass-icon { display:grid; place-items:center; flex:0 0 29px; height:34px; }
.sensor-glass-icon svg { width:24px; height:24px; }
.temperature-icon { color:#edccad; }.humidity-icon { color:#a7dfff; }
.sensor-glass-copy { display:flex; flex-direction:column; gap:2px; }
.glass-label { font-size:9px; letter-spacing:.10em; font-weight:750; color:#a0bfc2; }
.sensor-glass strong { font-size:27px; font-weight:770; letter-spacing:-.05em; line-height:1.1; white-space:nowrap; font-variant-numeric:tabular-nums; }
.sensor-glass strong small { margin-left:2px; font-size:14px; letter-spacing:normal; font-weight:550; color:#afc4c4; }
.overlay-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:67px; padding:22px 24px 16px; background:linear-gradient(to top,rgba(0,0,0,.49),transparent); }
.overlay-corner-name { color:rgba(236,255,247,.8); font-weight:750; letter-spacing:.18em; font-size:10px; }
.overlay-corner-name span { color:rgba(165,219,214,.5); margin:0 3px; }
.overlay-reading { padding:7px 10px; color:#d2e3e1; font-size:10px; background:rgba(4,21,24,.68); border:1px solid rgba(208,245,236,.16); border-radius:7px; white-space:nowrap; }
.overlay-reading.is-online { color:#b2f4db; }
.overlay-reading.is-stale { color:#ffd4a5; border-color:rgba(255,192,120,.35); }
.video-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:15px 20px; min-height:72px; }
.toolbar-left, .toolbar-actions { display:flex; align-items:center; gap:10px; }
.toolbar-left { flex-wrap:wrap; }
.connection-status { display:flex; align-items:center; gap:9px; font-weight:650; font-size:11px; color:#b6e7d2; }
.connection-dot { width:7px; height:7px; border-radius:50%; background:#7ddeae; box-shadow:0 0 0 4px rgba(125,222,174,.12); }
.connection-status.offline { color:#ffc59e; }
.connection-status.offline .connection-dot { background:#f4a779; }
.toolbar-separator { height:17px; width:1px; background:var(--stroke-strong); margin:0 3px; }
.toolbar-caption { font-size:11px; color:#81999d; }
.video-toolbar .button { min-height:37px; padding:9px 13px; }
.video-toolbar .button svg { width:15px; height:15px; }
.below-monitor { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:16px; margin-top:17px; }
.summary-card, .about-card { min-height:116px; display:flex; align-items:center; gap:15px; border:1px solid var(--stroke); border-radius:17px; padding:22px 24px; background:linear-gradient(140deg,rgba(18,37,45,.95),rgba(14,28,37,.92)); }
.summary-icon, .about-icon { flex:0 0 42px; width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(159,220,204,.16); background:rgba(161,223,211,.07); color:var(--accent); border-radius:12px; }
.summary-icon svg { width:21px; height:21px; }
.summary-copy { min-width:0; flex:1; }
.summary-copy>span { display:block; font-size:9px; font-weight:790; letter-spacing:.16em; color:#8dabb0; }
.summary-copy strong { display:block; font-size:14px; letter-spacing:.01em; margin-top:6px; }
.summary-copy p, .about-card p { margin:7px 0 0; color:#8aa3a8; font-size:11px; line-height:1.6; }
.button-small { font-size:11px; color:#c1ddd8; border:1px solid var(--stroke); background:rgba(153,216,202,.05); padding:9px 11px; min-height:35px; }
.button-small svg { width:16px; height:16px; }
.about-card>div:nth-child(2) { min-width:0; flex:1; }
.about-icon { font-size:24px; }
.about-card strong { font-size:12px; }
.sensor-status { font-size:10px; white-space:nowrap; border-radius:20px; border:1px solid #33474b; padding:8px 10px; color:#aac0c2; }
.sensor-status.is-online { color:#adeac9; background:rgba(118,201,153,.07); border-color:rgba(118,201,153,.24); }
.sensor-status.is-stale { color:#f5c18f; border-color:rgba(236,177,117,.3); }
.dashboard-footer { display:flex; justify-content:center; align-items:center; gap:7px; color:#687d84; font-size:11px; margin-top:34px; padding:27px 0 10px; }
.dashboard-footer>span:first-child { color:var(--accent); font-size:14px; }.foot-divider { margin:0 6px; color:#3d5459; }
/* Fullscreen on the wrapper retains the sensor overlay (unlike fullscreen inside iframe). */
.video-container:fullscreen { width:100vw; height:100vh; height:100dvh; aspect-ratio:auto; background:#000; }
.video-container:fullscreen iframe { width:100%; height:100%; }
.video-container:fullscreen .overlay-top { padding:clamp(15px,3vw,35px); }
.video-container:fullscreen .overlay-bottom { padding:clamp(15px,3vw,35px); }

@media(max-width:1080px) {
  .below-monitor { grid-template-columns:1fr; }
  .video-toolbar { align-items:flex-start; flex-direction:column; }
  .toolbar-actions { width:100%; justify-content:flex-end; }
}
@media(max-width:720px) {
  .login-view { padding:0; }
  .login-shell { width:100%; min-height:100dvh; grid-template-columns:1fr; border:0; border-radius:0; }
  .login-scene { display:none; }
  .login-card { min-height:100dvh; padding:48px 27px 34px; }
  .login-intro { padding-top:0; margin:auto 0 30px; }
  .login-security { margin-top:auto; }
  .topbar-inner { padding:13px 16px; }
  .brand-icon { flex-basis:35px; height:35px; border-radius:11px; }
  .brand-icon svg { width:21px; height:21px; }
  .brand-wordmark { font-size:17px; }
  .brand-wordmark small { font-size:7px; margin-top:5px; }
  .secure-label, .user-pill { display:none; }
  .topbar-actions { gap:7px; }
  .button-quiet { padding:9px 12px; min-height:36px; }
  .main-content { padding:25px 13px 14px; }
  .page-head { margin-bottom:20px; }
  .page-head h1 { font-size:29px; margin:10px 0 4px; }
  .page-head p { font-size:12px; }
  .clock-wrap { display:none; }
  .monitor { border-radius:15px; }
  .monitor-heading { height:67px; padding:0 15px; }
  .camera-heading-icon { width:35px; height:35px; }
  .monitor-heading h2 { font-size:13px; }
  .monitor-heading-title span:not(.camera-heading-icon) { font-size:10px; }
  .resolution-tag { display:none; }
  .rtc-tag { padding:7px 9px; font-size:9px; }
  .video-container { min-height:0; }
  .overlay-top { padding:10px; gap:7px; }
  .overlay-sensors { gap:5px; }
  .onair-tag { padding:7px 8px; gap:6px; font-size:8px; border-radius:6px; }
  .onair-dot { width:5px; height:5px; flex-basis:5px; box-shadow:none; }
  .sensor-glass { min-width:0; gap:4px; padding:6px 7px; border-radius:7px; }
  .sensor-glass-icon { display:none; }
  .glass-label { font-size:7px; letter-spacing:.04em; }
  .sensor-glass strong { font-size:17px; letter-spacing:-.04em; }
  .sensor-glass strong small { font-size:10px; margin-left:1px; }
  .overlay-bottom { padding:12px 10px 8px; min-height:35px; }
  .overlay-corner-name { font-size:7px; letter-spacing:.10em; }
  .overlay-reading { padding:5px 6px; font-size:8px; }
  .placeholder-aura { height:40px; width:40px; margin-bottom:10px; box-shadow:0 0 0 12px rgba(115,196,180,.023); }
  .placeholder-camera svg { height:23px; width:23px; }
  .placeholder-copy h3 { font-size:15px; margin-bottom:7px; }
  .placeholder-copy p { display:none; }
  .placeholder-copy .button { min-height:33px; padding:6px 12px; font-size:10px; }
  .placeholder-copy .button svg { width:12px; height:12px; }
  .video-toolbar { padding:13px; gap:13px; }
  .toolbar-caption, .toolbar-separator { display:none; }
  .toolbar-actions { justify-content:space-between; gap:6px; }
  .toolbar-actions .button { flex:1; padding:9px 7px; font-size:10px; min-height:37px; }
  .toolbar-actions .button svg { width:14px; height:14px; }
  .below-monitor { gap:11px; margin-top:11px; }
  .summary-card, .about-card { padding:16px; border-radius:13px; gap:11px; min-height:95px; }
  .summary-icon, .about-icon { flex-basis:34px; height:34px; width:34px; font-size:19px; }
  .summary-icon svg { width:18px; height:18px; }
  .summary-copy strong { font-size:12px; }
  .summary-copy p, .about-card p { font-size:10px; }
  .summary-card .button-small { padding:7px; min-height:32px; }
  .summary-card .button-small span { display:none; }
  .about-card { flex-wrap:wrap; }
  .about-card .sensor-status { margin-left:45px; }
  .dashboard-footer { padding-bottom:14px; font-size:10px; margin-top:20px; }
}
@media(max-width:380px) {
  .page-head h1 { font-size:27px; }
  .monitor-heading-title { gap:7px; }
  .overlay-top { padding:7px; }
  .onair-tag { font-size:7px; padding:6px; }
  .sensor-glass { padding:5px; }
  .sensor-glass strong { font-size:15px; }
  .glass-label { font-size:6px; }
  .overlay-bottom { padding:8px 7px 6px; }
}
@media(prefers-reduced-motion:reduce) { .button { transition:none; } }