/* Scoped account UI; legacy landing page button styles do not apply here. */
#app [hidden] { display: none !important; }
body.mira-account-home { background: radial-gradient(ellipse at 10% 5%, #19335c 0, transparent 48%), radial-gradient(ellipse at 100% 60%, #252347 0, transparent 52%), #0b1426 !important; color: #eef4ff; }
.mira-account-home .wrap { max-width: 660px; padding: 0 20px 42px; }
.mira-account-home .top { height: 78px; background: rgba(10,19,35,.8); border-color: rgba(176,197,236,.09); }
.mira-account-home .head { max-width: 660px; justify-content: flex-start; }
.mira-account-home .brand { font-size: 19px; letter-spacing: .04em; }
.mira-account-home .head .brand { transform: none !important; }
.mira-account-home .home-switch { display: none !important; }
.mira-account-home .hero.compact-account-hero { padding: 28px 0 20px; text-align: left; }
.mira-page-heading > span, .mira-eyebrow { font: 700 10px/1.5 "Segoe UI", sans-serif; letter-spacing: .15em; color: #9fb2d2; }
.mira-page-heading h1 { font-size: clamp(25px, 4vw, 32px); letter-spacing: -.025em; margin: 8px 0; }
.mira-page-heading p { margin: 0; color: #93a7c8; font-size: 13px; line-height: 1.6; }
.wrap .card.mira-dashboard { border: 0 !important; border-radius: 0 !important; background: none !important; padding: 0 !important; box-shadow: none !important; }
.mira-dashboard, .mira-dialog { font: 14px/1.5 "Segoe UI", Arial, sans-serif; }
.mira-dashboard [hidden], .mira-dialog [hidden] { display: none !important; }
.mira-dashboard svg, .mira-dialog svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.mira-summary { padding: 23px; border: 1px solid rgba(179,211,247,.17); border-radius: 23px; background: linear-gradient(125deg, rgba(31,56,84,.92), rgba(29,37,63,.95)); box-shadow: 0 12px 32px rgba(0,0,0,.15); }
.mira-summary-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mira-status { display: inline-flex; align-items: center; gap: 6px; border-radius: 30px; padding: 5px 10px; font-size: 11px; font-weight: 600; color: #c2d2eb; background: rgba(168,190,232,.09); }
.mira-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mira-status[data-tone="active"] { color: #92ead0; background: rgba(80,211,170,.11); }
.mira-status[data-tone="warning"] { color: #f4d086; background: rgba(223,179,87,.1); }
.mira-status[data-tone="off"] { color: #ffa6b9; background: rgba(224,101,131,.1); }
.mira-key-heading { display: flex; align-items: center; gap: 13px; margin: 24px 0 20px; }
.mira-key-heading > svg { box-sizing: content-box; color: #a0eadb; border: 1px solid rgba(120,225,203,.16); border-radius: 13px; padding: 12px; background: rgba(78,178,157,.09); }
.mira-key-heading > div { min-width: 0; }
.mira-key-heading span { display: block; color: #a2b2cb; font-size: 11px; margin-bottom: 3px; }
.mira-key-heading strong { display: block; color: #f4f8ff; font: 650 clamp(17px, 3.5vw, 22px)/1.4 "Segoe UI", sans-serif; overflow-wrap: anywhere; letter-spacing: -.02em; }
.mira-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; border-top: 1px solid rgba(170,200,236,.12); padding: 20px 0; }
.mira-summary-grid > div { min-width: 0; }
.mira-summary-grid span, .mira-connection > span { color: #a1b3cc; font-size: 11px; display: block; margin-bottom: 6px; }
.mira-summary-grid strong { font-size: 14px; display: block; font-weight: 650; overflow-wrap: anywhere; }
.mira-summary-grid small { display: block; margin-top: 5px; color: #8ea3c3; font-size: 10px; line-height: 1.65; }
.mira-summary-grid .mira-traffic { grid-column: 1 / -1; }
.mira-meter { height: 5px; background: rgba(159,181,218,.1); border-radius: 10px; margin-top: 10px; overflow: hidden; }
.mira-meter i { height: 100%; display: block; border-radius: inherit; background: #78d4c0; }
.mira-connection { padding-top: 16px; border-top: 1px solid rgba(170,200,236,.12); }
.mira-connection > div { display: flex; align-items: flex-start; gap: 9px; }
.mira-connection code { display: block; flex: 1; min-width: 0; padding: 0; margin: 0; background: none; font: 12px/1.65 Consolas, monospace; color: #b6d8f1; overflow-wrap: anywhere; user-select: all; }
.mira-connection button { flex: none; padding: 7px; width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(148,198,229,.19); background: rgba(151,192,219,.07); color: #b6d8f1; cursor: pointer; }
.mira-connection button svg { width: 17px; height: 17px; }
.mira-menu { display: grid; gap: 10px; margin-top: 16px; }
.mira-menu-pair { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
.mira-button { display: flex; align-items: center; justify-content: flex-start; box-sizing: border-box; width: 100%; gap: 12px; min-height: 57px; padding: 14px 17px; border: 1px solid rgba(165,185,220,.16); border-radius: 14px; color: #eaf2ff; background: #19263d; cursor: pointer; text-decoration: none; font: 600 14px/1.35 "Segoe UI", Arial, sans-serif; text-align: left; transition: background .15s, border-color .15s, transform .15s; }
.mira-button:hover { background: #22334e; border-color: rgba(170,204,238,.32); }
.mira-button:active { transform: translateY(1px); }
.mira-button:focus-visible, .mira-dialog button:focus-visible, .mira-connection button:focus-visible { outline: 2px solid #98e9df; outline-offset: 3px; }
.mira-button > svg { color: #a8c1e5; }
.mira-button > span { flex: 1; min-width: 0; }
.mira-button small { display: block; margin-top: 4px; font-size: 10px; line-height: 1.5; font-weight: 400; color: #95abc9; }
.mira-button > i:not(.mira-toggle) { margin-left: auto; font: normal 18px/1 Arial, sans-serif; color: #a5bddb; }
.mira-button.mira-primary { color: #082c31; border-color: #8addcc; background: linear-gradient(105deg, #9de5d4, #6ccabf); box-shadow: 0 5px 20px rgba(73,178,163,.1); min-height: 67px; }
.mira-button.mira-primary:hover { background: #a1eadc; }
.mira-primary > svg, .mira-primary > i:not(.mira-toggle) { color: #174e50; }
.mira-primary small { color: #276461; }
.mira-accent { background: linear-gradient(105deg, #334966, #394366); border-color: rgba(161,181,232,.3); }
.mira-button.mira-accent:hover { background: #455980; }
.mira-button.mira-home { justify-content: center; background: transparent; border-color: transparent; color: #8da6cb; }
.mira-home > span { flex: none; }
.mira-button:disabled { opacity: .48; cursor: wait; transform: none; }
.mira-automation { min-height: 70px; }
.mira-toggle { flex: none; width: 38px; height: 23px; border-radius: 20px; background: #3d4b64; padding: 3px; box-sizing: border-box; transition: background .15s; }
.mira-toggle::after { content:""; display: block; width: 17px; height: 17px; border-radius: 50%; background: #bbcbdf; transition: transform .15s; }
.mira-automation[aria-checked="true"] .mira-toggle { background: #539f91; }
.mira-automation[aria-checked="true"] .mira-toggle::after { transform: translateX(15px); background: #defff4; }
.mira-automation[aria-checked="true"] > svg { color: #9adfd0; }
.mira-menu-note { margin: 0; padding: 2px 8px; color: #edcd95; font-size: 11px; }
.mira-pending { margin-top: 15px; padding: 17px; border: 1px solid #746643; border-radius: 15px; color: #ead6a5; }
.mira-pending button { margin-top: 12px; }
.mira-empty { padding: 26px; background: #1a2941; border-radius: 20px; }
.mira-empty h2 { margin-top: 0; }.mira-empty p { color: #a7b6cc; }
dialog.mira-dialog { max-width: 450px; width: calc(100% - 28px); max-height: min(90dvh, 850px); overflow-y: auto; box-sizing: border-box; margin: auto; padding: 27px; background: #152238; color: #eaf2ff; border: 1px solid #3c4f6b; border-radius: 23px; box-shadow: 0 25px 100px rgba(0,0,0,.55); }
.mira-dialog::backdrop { background: rgba(3,8,20,.77); backdrop-filter: blur(5px); }
.mira-dialog h2 { margin: 0 25px 8px 0; font-size: 23px; letter-spacing: -.03em; }
.mira-close { position: absolute; top: 16px; right: 17px; height: 32px; width: 32px; border: 1px solid #42536b; background: #223248; color: #cfdef5; border-radius: 50%; font: 23px/1 Arial; cursor: pointer; }
.mira-muted { margin: 0 0 18px; color: #a1b3cc; font-size: 12px; line-height: 1.65; }
.mira-fine { font-size: 10px; margin: 13px 0 0; }
.mira-error { color: #ffb9c8; background: rgba(236,124,150,.07); border-radius: 9px; padding: 12px; font-size: 12px; margin: 15px 0 0; }
.mira-count-picker { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 20px 0; }
.mira-count-picker button { padding: 13px 0; color: #c6d6ed; background: #20324d; border: 1px solid #3d536f; border-radius: 10px; font-size: 17px; font-weight: 650; cursor: pointer; }
.mira-count-picker button[aria-pressed="true"] { background: #385a62; border-color: #8bddcb; color: #c3ffe9; }
.mira-quote { display: grid; gap: 12px; padding: 17px; background: #101c30; border: 1px solid #293c55; border-radius: 14px; }
.mira-quote > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mira-quote span { color: #a7b9d3; font-size: 11px; }.mira-quote b { font-size: 13px; white-space: nowrap; }.mira-quote strong { font-size: 25px; color: #a2ead7; }
.mira-payment-options { display: grid; gap: 9px; margin: 17px 0; }
.mira-payment-options label { display: flex; align-items: center; gap: 8px; border-radius: 12px; border: 1px solid #354b68; padding: 12px 10px; cursor: pointer; font-size: 12px; }
.mira-payment-options input, .mira-save-card input { accent-color: #90e0c8; }
.mira-payment-options span { flex: 1; }.mira-payment-options b { font-size: 11px; }
.mira-save-card { display: flex; align-items: center; gap: 9px; color: #a5bbd3; font-size: 11px; margin-bottom: 15px; }
.mira-button.mira-confirm { justify-content: center; min-height: 55px; margin-top: 14px; }
.mira-qr-image { display: block; margin: 18px auto 4px; width: min(270px, 100%); border: 12px solid white; border-radius: 14px; box-sizing: border-box; }
.mira-loading { text-align: center; padding: 22px; color: #a6bdd6; }
.mira-device-totals { margin: 20px 0 12px; padding: 14px; border: 1px solid #35455e; border-radius: 12px; display: flex; align-items: center; gap: 15px; }
.mira-device-totals b { font-size: 25px; white-space: nowrap; }.mira-device-totals span { color: #97b0cb; font-size: 11px; }
.mira-device-row { display: flex; align-items: center; gap: 11px; padding: 17px 0; border-bottom: 1px solid #2b3d57; }
.mira-device-row > div:nth-child(2) { flex: 1; min-width: 0; }.mira-device-row b { display: block; font-size: 13px; overflow-wrap: anywhere; }.mira-device-row small { display: block; font-size: 10px; color: #9db2cb; overflow-wrap: anywhere; margin-top: 3px; }
.mira-device-icon { width: 37px; height: 42px; display: grid; place-items: center; background: #243853; border-radius: 11px; color: #a6c7e0; }
.mira-text-button { flex: none; padding: 9px 0; color: #e1a6b5; font-size: 11px; border: 0; background: none; cursor: pointer; }
.mira-button.mira-danger { color: #f2b1c1; background: #392b40; border-color: #664252; justify-content: center; margin-top: 17px; }
.mira-menu-pair .mira-danger { margin-top: 0; }
.mira-blank { padding: 25px 7px; text-align: center; color: #dde6f6; font-size: 14px; }.mira-blank small { display: block; margin-top: 8px; color: #9db2cd; font-size: 12px; }
@media (max-width: 420px) { .mira-account-home .wrap { padding: 0 14px 30px; }.mira-summary { padding: 18px; }.mira-summary-grid { gap: 17px 12px; }.mira-button { gap: 9px; padding: 13px; font-size: 12px; }.mira-button small { font-size: 10px; }.mira-key-heading strong { font-size: 17px; }.mira-summary-grid strong { font-size: 12px; }.mira-dialog { padding: 23px 18px !important; }.mira-button svg { width: 20px; height: 20px; }.mira-eyebrow { font-size: 9px; } }
@media (prefers-reduced-motion: reduce) { .mira-button, .mira-toggle, .mira-toggle::after { transition: none; } }