:root {
    color-scheme: dark;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    color: #eef6f1;
    background: #07120e;
}

.stripe-events-page { padding: 1rem; }
.stripe-events-page .page-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.table-scroll { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; color: #17201c; background: #fff; }
.admin-table th, .admin-table td { padding: .65rem; border-bottom: 1px solid #c5cec9; color: #17201c; text-align: left; vertical-align: top; }
.admin-table th { color: #eef6f1; background: #173d2f; }
.admin-table tbody tr:nth-child(even) { background: #f1f5f3; }
.admin-table code { color: #31463d; font-size: .78rem; }
.admin-table .button-danger { margin: 0; border: 1px solid #8d3c3c; color: #fff; background: #7a2929; cursor: pointer; }
.event-error { max-width: 30rem; overflow-wrap: anywhere; }
.status-badge { display: inline-block; padding: .15rem .5rem; border-radius: 999px; font-weight: 700; }
.status-completed { background: #d9f5e3; color: #126b36; }
.status-failed { background: #fde1e1; color: #9b1c1c; }
.status-pending, .status-processing { background: #fff1c7; color: #765500; }
.admin-dashboard-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: end; }
.admin-dashboard-heading h1 { margin: .1rem 0; font-size: clamp(1.8rem, 3.5vw, 3rem); }
.admin-dashboard-heading p { margin: .15rem 0; }
.admin-dashboard-actions { display: flex; gap: .5rem; }
.admin-dashboard-actions .button { margin: 0; }
.admin-metric-grid { display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); gap: .6rem; margin: 1rem 0; }
.admin-metric-grid a { padding: .8rem; border: 1px solid #315746; border-radius: .55rem; color: #bdd0c7; background: #0d2018; text-decoration: none; }
.admin-metric-grid span { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; }
.admin-metric-grid strong { display: block; margin-top: .15rem; color: #eef6f1; font-size: 1.55rem; }
.admin-metric-grid .metric-alert { border-color: #8d3c3c; background: #4b2424; }
.admin-dashboard-panel { padding: .8rem; border: 1px solid #315746; border-radius: .6rem; background: #0d2018; }
.admin-panel-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: .55rem; }
.admin-panel-heading h2, .admin-panel-heading p { margin: 0; }
.admin-panel-heading a { color: #8ff0bb; }
@media (max-width: 980px) { .admin-metric-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .admin-dashboard-heading { align-items: start; flex-direction: column; } .admin-metric-grid { grid-template-columns: repeat(2, 1fr); } }
.admin-subscription-heading h1 { margin: .1rem 0 .6rem; }
.admin-account-search, .admin-subscription-editor { padding: .85rem; border: 1px solid #315746; border-radius: .6rem; background: #0d2018; }
.admin-account-search label, .admin-subscription-fields label { color: #9db5aa; font-size: .78rem; font-weight: 700; text-transform: uppercase; }
.admin-account-search > div { display: flex; gap: .5rem; margin-top: .3rem; }
.admin-account-search input, .admin-subscription-fields input { width: 100%; padding: .55rem; border: 1px solid #315746; border-radius: .35rem; color: #eef6f1; background: #07120e; font: inherit; }
.admin-account-search .button { margin: 0; }
.admin-account-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .45rem; margin: .65rem 0; }
.admin-account-results a { padding: .55rem .7rem; border: 1px solid #315746; border-radius: .45rem; color: #eef6f1; background: #0d2018; text-decoration: none; }
.admin-account-results span { display: block; color: #9db5aa; font-size: .82rem; }
.admin-editor-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: .7rem; }
.admin-editor-heading h2, .admin-editor-heading p { margin: 0; }
.admin-subscription-fields { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: .65rem; }
.admin-subscription-fields input { display: block; margin-top: .2rem; }
.admin-confirm { display: flex; gap: .45rem; align-items: center; margin-top: .8rem; color: #ffcf9d; }
.admin-subscription-editor .button.danger { border: 1px solid #8d3c3c; color: #fff; background: #7a2929; }
@media (max-width: 900px) { .admin-subscription-fields { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .admin-subscription-fields { grid-template-columns: 1fr; } }

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top right, #173d2f, #07120e 55%); }
.site-header { display: flex; justify-content: space-between; align-items: center; padding: .55rem clamp(1.5rem, 6vw, 6rem); border-bottom: 1px solid #315746; }
.site-header a { color: #8ff0bb; font-size: 1.25rem; font-weight: 750; text-decoration: none; }
.site-header .site-brand { display: block; width: clamp(145px, 15vw, 205px); line-height: 0; }
.site-brand img { display: block; width: 100%; height: auto; border-radius: .3rem; }
.site-header nav { display: flex; gap: 1.25rem; }
.site-header nav a { color: #bdd0c7; font-size: .92rem; font-weight: 650; }
.nav-toggle { display: none; align-items: center; gap: .4rem; padding: .5rem .65rem; border: 1px solid #527561; border-radius: .4rem; color: #eef6f1; background: #0d2018; font: inherit; font-weight: 750; cursor: pointer; }
main { width: min(960px, calc(100% - 3rem)); margin: 0 auto; padding: 6rem 0; }
.dashboard-page main { width: calc(100% - clamp(2rem, 5vw, 5rem)); max-width: 1800px; padding: .75rem 0 2.5rem; }
.hero { max-width: 720px; }
.eyebrow { color: #8ff0bb; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
h1 { margin: .25rem 0 1.25rem; font-size: clamp(2.5rem, 7vw, 5.5rem); line-height: .98; }
h2 { margin-top: 0; }
p, li { color: #bdd0c7; font-size: 1.1rem; line-height: 1.7; }
.button { display: inline-block; margin-top: 1rem; padding: .85rem 1.15rem; border-radius: .5rem; color: #07120e; background: #8ff0bb; font-weight: 750; text-decoration: none; }
.status { margin-top: 5rem; padding: 2rem; border: 1px solid #315746; border-radius: 1rem; background: rgba(15, 36, 28, .7); }

.landing-page main { width: 100%; padding: 0; }
.landing-hero { position: relative; min-height: 78vh; display: grid; align-items: end; background: url('/images/ad1.jpg') center 35% / cover; }
.landing-hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 13, 9, .95), rgba(4, 13, 9, .25)), linear-gradient(0deg, #07120e, transparent 45%); }
.landing-hero__content { position: relative; width: min(1160px, calc(100% - 3rem)); margin: 0 auto; padding: 8rem 0 6rem; }
.landing-hero__content p { max-width: 650px; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.button--quiet { color: #eef6f1; background: rgba(7, 18, 14, .72); border: 1px solid #668d7a; }
.landing-section { width: min(1160px, calc(100% - 3rem)); margin: 0 auto; padding: 7rem 0; }
.landing-section h2, .field-banner h2, .contact-strip h2 { font-size: clamp(2rem, 5vw, 3.8rem); }
.feature-grid, .system-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.5rem; }
.feature-grid article, .system-grid article { padding: 1.6rem; border: 1px solid #315746; border-radius: .8rem; background: #0d2018; }
.feature-grid h3, .system-grid h3 { margin: 0 0 .5rem; font-size: 1.25rem; }
.system-grid { grid-template-columns: repeat(4, 1fr); }
.system-grid span { color: #8ff0bb; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.field-banner { min-height: 520px; display: grid; place-items: end start; padding: clamp(3rem, 8vw, 8rem); background: linear-gradient(90deg, rgba(4, 13, 9, .92), rgba(4, 13, 9, .12)), url('/images/wh.jpg') center / cover; }
.field-banner > div { max-width: 660px; }
.contact-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; padding: 5rem max(1.5rem, calc((100% - 1160px) / 2)); background: #102b20; }
.nav-form { display: inline; }
.nav-form button { padding: 0; border: 0; color: #bdd0c7; background: transparent; font: inherit; font-size: .92rem; font-weight: 650; cursor: pointer; }
.auth-card { max-width: 520px; margin: 0 auto; padding: 2.5rem; border: 1px solid #315746; border-radius: 1rem; background: #0d2018; }
.auth-card h1 { font-size: 3.2rem; }
.auth-card form { display: grid; gap: .65rem; }
.auth-card label { margin-top: .6rem; font-weight: 700; }
.auth-card input:not([type='checkbox']) { width: 100%; padding: .9rem; border: 1px solid #527561; border-radius: .45rem; color: #eef6f1; background: #07120e; font: inherit; }
.auth-card .checkbox { display: flex; gap: .5rem; align-items: center; }
.auth-card button { border: 0; cursor: pointer; font: inherit; }
.validation { color: #ff9d9d; }
.auth-secondary { margin: .8rem 0 0; font-size: .9rem; }
.auth-secondary a { color: #8ff0bb; }
.auth-card .password-help { margin: .25rem 0; color: #9db5aa; font-size: .8rem; line-height: 1.35; }
.phone-remove-form { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #355244; }
.auth-card .button-danger { background: #7a2929; }
.dashboard-heading { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.dashboard-add-device { display: inline-flex; align-items: center; min-height: 2.25rem; padding: .4rem .8rem; border: 1px solid #4d8067; border-radius: .4rem; background: #183c2c; color: #e6fff1; font-weight: 700; text-decoration: none; white-space: nowrap; }
.device-registration-card { max-width: 680px; padding: 1.25rem 1.5rem; }
.device-registration-card .eyebrow { margin: 0 0 .15rem; }
.device-registration-card h1 { margin: 0; font-size: clamp(1.75rem, 4vw, 2.35rem); }
.device-registration-intro { margin: .2rem 0 .65rem; font-size: .92rem; line-height: 1.4; }
.device-registration-card form { gap: .55rem; }
.device-registration-field { display: grid; gap: .2rem; }
.device-registration-card .device-registration-field label { margin: 0; font-size: .88rem; }
.device-registration-card input:not([type='checkbox']), .device-registration-card select { width: 100%; min-height: 2.55rem; padding: .55rem .7rem; border: 1px solid #527561; border-radius: .4rem; color: #eef6f1; background: #07120e; font: inherit; }
.device-registration-row { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: .65rem; }
.device-registration-card .button { margin-top: .15rem; min-height: 2.55rem; }
.device-registration-card .auth-secondary { margin-top: .5rem; }
.dashboard-heading h1 { margin-bottom: .5rem; font-size: clamp(2.15rem, 4vw, 3.5rem); }
.dashboard-heading p { margin: .25rem 0; font-size: 1rem; }
.dashboard-stats { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: 0; padding: .45rem .7rem; border: 1px solid #315746; border-radius: .5rem; background: #0d2018; }
.dashboard-stats div { display: flex; gap: .35rem; align-items: baseline; }
.dashboard-stats dt { color: #9db5aa; font-size: .72rem; text-transform: uppercase; }
.dashboard-stats dd { margin: 0; color: #eef6f1; font-size: .95rem; font-weight: 800; }
.dashboard-filters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45rem; margin: 1rem 0 1.25rem; }
.dashboard-filters a { min-width: 0; padding: .5rem .65rem; border: 1px solid #315746; border-radius: 999px; color: #bdd0c7; font-size: .9rem; text-align: center; text-decoration: none; overflow-wrap: anywhere; }
.dashboard-filters a.active { border-color: #8ff0bb; color: #07120e; background: #8ff0bb; font-weight: 750; }
.admin-device-search { display: flex; gap: .5rem; align-items: end; margin: .75rem 0 1rem; }
.admin-device-search label { color: #9db5aa; font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.admin-device-search input { min-width: 0; padding: .45rem .6rem; border: 1px solid #527561; border-radius: .35rem; color: #eef6f1; background: #07120e; }
.admin-device-search button { padding: .48rem .7rem; border: 0; border-radius: .35rem; color: #07120e; background: #8ff0bb; font-weight: 750; }
.admin-device-search a { padding-bottom: .45rem; color: #8ff0bb; }
.device-owner { margin: 0; color: #8ff0bb; font-size: .75rem; line-height: 1.3; overflow-wrap: anywhere; }
.device-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.75rem, 1vw, 1rem); margin-top: 1.25rem; }
.admin-device-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.device-card { position: relative; overflow: visible; padding: 0 .7rem .65rem; border: 1px solid #315746; border-radius: .8rem; background: #0d2018; }
.device-card__preview-wrap { position: relative; width: calc(100% + 1.4rem); margin: 0 -.7rem .55rem; }
.device-card__preview { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: .75rem .75rem 0 0; object-fit: contain; background: #06100c; }
.device-card__mode { position: absolute; bottom: .45rem; left: .5rem; padding: .25rem .5rem; border-radius: .3rem; color: #fff; background: rgba(5, 12, 9, .82); font-size: .78rem; font-weight: 800; }
@media (max-width: 600px) { .device-card__mode { bottom: .3rem; left: .35rem; padding: .14rem .35rem; font-size: .64rem; } }
.legacy-camera-controls { margin: -.55rem -.7rem .5rem; padding: .4rem; background: #091711; }
.legacy-camera-controls form { margin: 0; }
.legacy-camera-controls button { padding: .42rem .6rem; border: 1px solid #315746; border-radius: .3rem; color: #eef6f1; background: #173d2f; font-weight: 700; cursor: pointer; }
.legacy-camera-controls button.view { background: #228b22; }
.legacy-camera-controls button.main { background: #4169e1; }
.legacy-camera-controls button.zoom { color: #17130a; background: #ffc107; font-size: 1.25rem; }
.legacy-camera-controls button.direction { background: #212529; font-size: 1rem; }
.legacy-camera-controls button:disabled { cursor: not-allowed; opacity: .5; }
.legacy-camera-controls__views { display: grid; grid-template-columns: repeat(5, 1fr); gap: .3rem; margin-bottom: .45rem !important; }
.legacy-camera-controls__movement { display: flex; flex-wrap: wrap; gap: .35rem; align-items: end; }
.legacy-camera-controls__movement > form { flex: 1 1 120px; }
.legacy-camera-controls__movement > form:first-child { display: flex; flex: 1 1 100%; gap: .25rem; }
.legacy-camera-controls__movement > form:first-child button { flex: 1; }
.legacy-camera-controls__movement .legacy-dropup__toggle { width: 100%; }
.device-card__heading { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; color: #bdd0c7; font-size: .8rem; }
.device-card__status { display: flex; align-items: center; }
.device-card h2 { margin: 0; font-size: 1.1rem; line-height: 1.25; }
.device-card dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: .2rem .35rem; margin: .25rem 0; }
.device-card dl div { min-width: 0; padding-top: .25rem; border-top: 1px solid #274538; }
.device-card dt { color: #9db5aa; font-size: .75rem; text-transform: uppercase; }
.device-card dd { margin: .05rem 0 0; font-size: .86rem; line-height: 1.25; overflow-wrap: anywhere; }
.power-state { margin-right: .15rem; font-size: 1rem; font-weight: 900; }
.power-state.charging { color: #64e89d; text-shadow: 0 0 8px rgba(100, 232, 157, .55); }
.power-state.discharging { color: #dfbd66; }
.power-line { display: block; }
.signal-quality { font-weight: 800; }
.signal-quality--excellent, .signal-quality--good { color: #64e89d; }
.signal-quality--fair { color: #dfbd66; }
.signal-quality--poor, .signal-quality--weak { color: #ff9d9d; }
.card-link, .back-link { color: #8ff0bb; font-weight: 750; text-decoration: none; }
.card-link { display: inline-block; margin-top: .2rem; font-size: .86rem; }
.device-card__actions { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: end; }
.control-notice { margin: .75rem 0; padding: .55rem .8rem; border-left: 3px solid #dfbd66; background: #282313; font-size: .9rem; }
.device-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: .3rem; width: 100%; margin-top: .3rem; padding-top: .35rem; border-top: 1px solid #274538; }
.device-controls form { display: block; min-width: 0; }
.device-controls label { flex: 1; color: #9db5aa; font-size: .72rem; font-weight: 700; text-transform: uppercase; }
.device-controls select { display: block; width: 100%; margin-top: .2rem; padding: .42rem; border: 1px solid #527561; border-radius: .35rem; color: #eef6f1; background: #07120e; }
.device-controls select:disabled { cursor: not-allowed; opacity: .5; }
.legacy-dropup { position: relative; min-width: 0; }
.legacy-dropup__toggle { width: 100%; padding: .38rem .55rem; border: 1px solid #527561; border-radius: .35rem; color: #eef6f1; background: #18251f; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.legacy-dropup__toggle::after { content: ""; display: inline-block; margin-left: .5rem; border-right: .3em solid transparent; border-bottom: .35em solid; border-left: .3em solid transparent; vertical-align: .15em; }
.legacy-dropup__toggle:disabled { cursor: not-allowed; opacity: .5; }
.legacy-dropup--light .legacy-dropup__toggle { border-color: #5b4ab8; background: #4b3a9e; }
.legacy-dropup--wireless .legacy-dropup__toggle { border-color: #c84b57; background: #b52f3d; }
.legacy-dropup--setviews .legacy-dropup__toggle { border-color: #37a8bf; color: #06242b; background: #55c7df; }
.legacy-dropup__menu { position: absolute; z-index: 20; right: 0; bottom: calc(100% + .35rem); display: none; min-width: 210px; max-height: 310px; overflow-y: auto; padding: .35rem 0; border: 1px solid #527561; border-radius: .45rem; background: #eef2ef; box-shadow: 0 .7rem 2rem rgba(0, 0, 0, .45); }
.legacy-dropup.open .legacy-dropup__menu { display: block; }
.legacy-dropup__menu button, .legacy-dropup__menu a, .legacy-dropup__menu span { display: block; width: 100%; padding: .48rem .8rem; border: 0; color: #17201c; background: transparent; font: inherit; font-size: .88rem; text-align: left; text-decoration: none; white-space: nowrap; }
.legacy-dropup__menu button, .legacy-dropup__menu a { cursor: pointer; }
.legacy-dropup__menu button:hover, .legacy-dropup__menu a:hover { color: #07120e; background: #cbd8d1; }
.legacy-dropup__menu small { color: #69766f; }
.legacy-dropup__divider { height: 1px; margin: .3rem 0; background: #bcc8c1; }
.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; }
.status-dot { display: inline-block; width: .65rem; height: .65rem; margin-right: .35rem; border-radius: 50%; }
.status-dot.online { background: #64e89d; box-shadow: 0 0 12px #64e89d; }
.status-dot.offline { background: #e77b7b; }
.tag { padding: .2rem .45rem; border-radius: 999px; color: #8ff0bb; background: #173d2f; }
.empty-state { margin-top: 2rem; padding: 2rem; border: 1px dashed #527561; border-radius: .8rem; }
.subscription-heading { display: flex; justify-content: space-between; gap: 2rem; align-items: center; }
.subscription-heading h1 { font-size: clamp(2.8rem, 7vw, 5rem); }
.subscription-status { padding: .55rem .85rem; border-radius: 999px; font-weight: 800; }
.subscription-status.active { color: #8ff0bb; background: #173d2f; }
.subscription-status.inactive { color: #ffb1b1; background: #4b2424; }
.subscription-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 2rem 0; }
.subscription-grid div { padding: 1.4rem; border: 1px solid #315746; border-radius: .8rem; background: #0d2018; }
.subscription-grid dt { color: #9db5aa; font-size: .8rem; text-transform: uppercase; }
.subscription-grid dd { margin: .4rem 0 0; font-size: 1.5rem; font-weight: 750; }
.subscription-summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.subscription-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.subscription-panel { padding: 1.4rem; border: 1px solid #315746; border-radius: .8rem; background: #0d2018; }
.subscription-panel .button { margin-top: .5rem; }
.subscription-meter { height: .65rem; overflow: hidden; border-radius: 999px; background: #07120e; }
.subscription-meter span { display: block; height: 100%; border-radius: inherit; background: #64e89d; }
.billing-workflow { margin-top: 1rem; padding: 1.25rem; border: 1px solid #315746; border-radius: .8rem; background: rgba(13, 32, 24, .72); }
.billing-workflow__heading { display: flex; justify-content: space-between; gap: 1rem; align-items: end; }
.billing-workflow__heading h2 { margin-bottom: 0; }
.billing-workflow__heading > span { color: #9db5aa; font-size: .85rem; }
.billing-step-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; }
.billing-step { display: flex; flex-direction: column; padding: 1rem; border: 1px solid #315746; border-radius: .65rem; background: #0d2018; }
.billing-step__number { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; color: #07120e; background: #8ff0bb; font-weight: 850; }
.billing-step h3 { margin: .65rem 0 0; }
.billing-step p { flex: 1; font-size: .93rem; line-height: 1.45; }
.billing-step .button { width: 100%; margin-top: .5rem; padding: .65rem; border: 0; cursor: pointer; }
.available-plans { margin-top: 1rem; padding: 1.25rem; border: 1px solid #315746; border-radius: .8rem; background: rgba(13, 32, 24, .72); }
.available-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; }
.available-plan { padding: 1rem; border: 1px solid #315746; border-radius: .65rem; background: #0d2018; }
.available-plan__price { color: #8ff0bb; font-size: 1.35rem; font-weight: 800; }
.available-plan__price small { color: #9db5aa; font-size: .75rem; font-weight: 600; }
.available-plan form { display: grid; gap: .45rem; }
.available-plan label { color: #9db5aa; font-size: .78rem; font-weight: 700; text-transform: uppercase; }
.available-plan input { display: block; width: 100%; margin-top: .2rem; padding: .55rem; border: 1px solid #315746; border-radius: .35rem; color: #eef6f1; background: #07120e; }
.available-plan .button { margin-top: .3rem; border: 0; cursor: pointer; }
.migration-notice { margin-top: 3rem; padding: 1.5rem; border-left: 3px solid #dfbd66; background: #282313; }
.account-heading h1 { font-size: clamp(2.8rem, 7vw, 5rem); }
.account-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2rem 0; }
.account-grid div { padding: 1.4rem; border: 1px solid #315746; border-radius: .8rem; background: #0d2018; }
.account-grid dt { color: #9db5aa; font-size: .8rem; text-transform: uppercase; }
.account-grid dd { margin: .4rem 0 0; font-size: 1.1rem; font-weight: 700; overflow-wrap: anywhere; }
.account-action-grid { display: grid; grid-template-columns: repeat(4, minmax(180px, 1fr)); gap: .65rem; margin-top: .8rem; }
.account-action-grid a { padding: .85rem; border: 1px solid #315746; border-radius: .55rem; color: #eef6f1; background: #0d2018; text-decoration: none; }
.account-action-grid strong, .account-action-grid span { display: block; }
.account-action-grid strong { color: #8ff0bb; }
.account-action-grid span { margin-top: .25rem; color: #9db5aa; font-size: .88rem; line-height: 1.35; }
.compact-heading h1 { margin: .1rem 0; }
.account-password-form { max-width: 34rem; margin-inline: auto; }
.account-password-form > label { display: block; margin-top: .65rem; color: #9db5aa; font-size: .78rem; font-weight: 700; text-transform: uppercase; }
.account-password-form .password-help { margin: .25rem 0; color: #9db5aa; font-size: .8rem; line-height: 1.35; }
.account-password-form .field-validation-error { display: block; font-size: .82rem; }
@media (max-width: 850px) { .account-action-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .account-action-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
    .site-header { position: relative; z-index: 100; padding: .45rem .75rem; }
    .site-header .site-brand { width: min(155px, 48vw); }
    .nav-toggle { display: inline-flex; }
    .site-header nav { position: absolute; top: calc(100% + 1px); right: .5rem; left: .5rem; display: none; max-height: calc(100dvh - 5rem); padding: .5rem; overflow-y: auto; border: 1px solid #315746; border-radius: 0 0 .6rem .6rem; background: #07120e; box-shadow: 0 .8rem 1.5rem rgba(0, 0, 0, .45); }
    .site-header nav.mobile-open { display: flex; flex-direction: column; gap: .15rem; }
    .site-header nav a, .site-header .nav-form button { display: block; width: 100%; padding: .65rem .75rem; border-radius: .35rem; font-size: 1rem; text-align: left; }
    .site-header nav a:hover, .site-header .nav-form button:hover { color: #07120e; background: #8ff0bb; }
    .site-header .nav-form { margin: 0; }
}
.device-details-heading { display: flex; justify-content: space-between; gap: 2rem; align-items: center; }
.device-details-heading h1 { font-size: clamp(2.8rem, 7vw, 5rem); }
.device-details-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2rem 0; }
.device-details-grid div { padding: 1.2rem; border: 1px solid #315746; border-radius: .7rem; background: #0d2018; }
.device-details-grid dt { color: #9db5aa; font-size: .78rem; text-transform: uppercase; }
.device-details-grid dd { margin: .35rem 0 0; font-weight: 700; }
.image-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2rem 0; }
.image-grid figure { margin: 0; overflow: hidden; border: 1px solid #315746; border-radius: .7rem; background: #0d2018; }
.image-grid img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #06100c; }
.image-grid figcaption { padding: .75rem; color: #9db5aa; font-size: .85rem; }
.image-gallery-page main { width: 100%; max-width: none; padding: .65rem clamp(.5rem, 1.5vw, 1.25rem); }
.gallery-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: end; }
.gallery-heading h1, .gallery-heading p { margin: .1rem 0; }
.gallery-heading h1 { font-size: clamp(1.7rem, 3vw, 2.7rem); }
.gallery-actions { display: flex; gap: .55rem; align-items: center; }
.gallery-actions .button { margin: 0; padding: .5rem .7rem; }
.gallery-viewer { position: fixed; z-index: 1000; inset: 0; display: grid; width: 100vw; height: 100dvh; place-items: center; overflow: hidden; background: rgba(0, 0, 0, .94); }
.gallery-viewer[hidden] { display: none; }
.gallery-viewer img { display: block; width: auto; height: auto; max-width: 86vw; max-height: 78vh; object-fit: contain; }
.gallery-viewer-open { overflow: hidden; }
.gallery-close { position: absolute; z-index: 3; top: .45rem; right: .65rem; width: 2.25rem; height: 2.25rem; border: 1px solid #668d7a; border-radius: 50%; color: #fff; background: rgba(5, 18, 14, .9); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.gallery-delete-current { position: absolute; z-index: 3; top: .55rem; left: 50%; padding: .45rem .7rem; border: 1px solid #b94a4a; border-radius: .35rem; color: #fff; background: #7a2929; font-weight: 750; cursor: pointer; transform: translateX(-50%); }
.gallery-caption { position: absolute; right: .4rem; bottom: .35rem; left: .4rem; padding: .3rem .5rem; color: #eef6f1; background: rgba(3, 8, 6, .78); font-size: .78rem; text-align: center; }
.gallery-nav { position: absolute; z-index: 2; top: 50%; width: 2.5rem; height: 3.5rem; border: 0; border-radius: .35rem; color: #fff; background: rgba(5, 18, 14, .75); font-size: 2rem; cursor: pointer; transform: translateY(-50%); }
.gallery-nav.previous { left: .4rem; }.gallery-nav.next { right: .4rem; }
.gallery-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: .45rem; margin-top: .5rem; }
.gallery-thumb { min-width: 0; overflow: hidden; border: 2px solid transparent; border-radius: .4rem; background: #0d2018; }
.gallery-thumb.active { border-color: #8ff0bb; }
.gallery-thumb__image { display: block; width: 100%; padding: 0; border: 0; background: #030806; cursor: pointer; }
.gallery-thumb__image img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.gallery-thumb__meta { display: grid; grid-template-columns: 1fr auto; gap: .25rem .4rem; align-items: center; padding: .35rem; font-size: .72rem; }
.gallery-thumb__meta > span { grid-column: 1 / -1; color: #9db5aa; }
.gallery-delete-one { padding: .2rem .4rem; border: 1px solid #8d3c3c; border-radius: .3rem; color: #fff; background: #6b2525; cursor: pointer; }
.gallery-pager { margin: .5rem 0 0; }
@media (min-width: 601px) and (max-width: 1100px) { .gallery-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .gallery-heading { align-items: start; flex-direction: column; } .gallery-viewer img { max-width: 92vw; max-height: 68vh; } .gallery-actions { width: 100%; justify-content: space-between; } .gallery-strip { grid-template-columns: 1fr; } }
.pager { display: flex; justify-content: center; gap: 1.5rem; align-items: center; margin: 2rem 0; }
.pager a { color: #8ff0bb; font-weight: 750; text-decoration: none; }
.access-list { margin-top: 2rem; padding: 1.5rem; border: 1px solid #315746; border-radius: .8rem; background: #0d2018; }
.access-list ul { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.access-list li { padding: .9rem 1rem; border-radius: .5rem; color: #eef6f1; background: #07120e; overflow-wrap: anywhere; }
.settings-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: end; }
.settings-heading h1 { margin-bottom: 0; font-size: clamp(2rem, 4vw, 3.5rem); }
.settings-layout { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.25rem; }
.settings-panel { display: grid; gap: .65rem; padding: 1rem; border: 1px solid #315746; border-radius: .7rem; background: #0d2018; }
.settings-panel legend { padding: 0 .35rem; color: #8ff0bb; font-size: 1.05rem; font-weight: 800; }
.settings-panel label { color: #9db5aa; font-size: .78rem; font-weight: 700; text-transform: uppercase; }
.settings-panel input:not([type='checkbox']), .settings-panel select { display: block; width: 100%; margin-top: .2rem; padding: .5rem .6rem; border: 1px solid #315746; border-radius: .35rem; color: #eef6f1; background: #07120e; font: inherit; }
.settings-panel:disabled, .settings-panel input:disabled { opacity: 1; }
.settings-check { display: flex; gap: .45rem; align-items: center; }
.settings-actions { display: flex; justify-content: flex-end; margin-top: 1rem; }
.validation-summary, .field-validation-error { color: #ff9a9a; }
.access-add-form { display: grid; gap: .45rem; }
.access-add-form > div { display: flex; gap: .6rem; }
.access-add-form input { flex: 1; min-width: 0; padding: .65rem; border: 1px solid #315746; border-radius: .35rem; color: #eef6f1; background: #07120e; }
.access-list li { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.access-list .button.danger { border-color: #8d3c3c; background: #5c2424; }
.access-message { margin: 1rem 0; padding: .75rem 1rem; border: 1px solid #315746; border-radius: .5rem; background: #0d2018; }
.access-message.error { border-color: #8d3c3c; color: #ffb0b0; }
.access-heading { align-items: center; margin-bottom: .7rem; }
.access-heading h1 { margin: .1rem 0; font-size: clamp(1.65rem, 3vw, 2.5rem); }
.access-heading p { margin: .1rem 0; line-height: 1.35; }
.access-layout { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(340px, 1.2fr); gap: .75rem; align-items: start; }
.access-layout .access-list { margin: 0; padding: .85rem; border-radius: .55rem; }
.access-list h2 { margin: 0 0 .55rem; font-size: 1.15rem; }
.access-add-form { gap: .25rem; }
.access-add-form label { font-size: .82rem; }
.access-add-form input { padding: .5rem .6rem; }
.access-add-form .button, .access-list li .button { margin: 0; padding: .5rem .7rem; }
.access-layout .access-list ul { gap: .4rem; }
.access-layout .access-list li { padding: .5rem .65rem; }
@media (max-width: 760px) { .access-layout { grid-template-columns: 1fr; } }
.contact-page-heading { margin-bottom: 1rem; }
.contact-page-heading h1 { margin: .15rem 0; }
.contact-page-layout { display: grid; grid-template-columns: minmax(220px, .75fr) minmax(360px, 1.25fr); gap: 1rem; }
.contact-details, .contact-form { padding: 1rem; border: 1px solid #315746; border-radius: .7rem; background: #0d2018; }
.contact-form { display: grid; gap: .35rem; }
.contact-form label { margin-top: .35rem; color: #9db5aa; font-size: .78rem; font-weight: 700; text-transform: uppercase; }
.contact-form input, .contact-form textarea { width: 100%; padding: .6rem; border: 1px solid #315746; border-radius: .35rem; color: #eef6f1; background: #07120e; font: inherit; }
.contact-form textarea { resize: vertical; }
.contact-form .button { justify-self: end; margin-top: .6rem; }

@media (max-width: 780px) {
    .feature-grid, .system-grid, .contact-strip, .contact-page-layout, .device-grid, .subscription-grid, .subscription-sections, .billing-step-grid, .account-grid, .device-details-grid, .image-grid, .settings-layout { grid-template-columns: 1fr; }
    .dashboard-heading { display: grid; gap: .65rem; }
    .dashboard-add-device { justify-self: start; }
    .dashboard-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem .75rem; width: 100%; }
    .dashboard-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-device-search { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; }
    .admin-device-search label { grid-column: 1 / -1; }
    .admin-device-search input { width: 100%; }
    .dashboard-page main { width: calc(100% - 2rem); padding-top: .5rem; }
    .device-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .device-card dl { grid-template-columns: repeat(2, 1fr); }
    .legacy-camera-controls__views { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .landing-hero { min-height: 680px; }
    .device-registration-card { padding: 1rem; }
    .device-registration-row { grid-template-columns: 1fr; gap: .5rem; }
}

@media (min-width: 781px) and (max-width: 1050px) {
    .device-grid, .admin-device-grid { grid-template-columns: 1fr; }
    .dashboard-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
    .dashboard-page main { width: calc(100% - 1rem); }
    .dashboard-filters { grid-template-columns: 1fr; }
    .dashboard-filters a { border-radius: .5rem; }
    .admin-device-search { grid-template-columns: 1fr 1fr; }
    .admin-device-search input { grid-column: 1 / -1; }
    .admin-device-search button, .admin-device-search a { width: 100%; text-align: center; }
    .admin-device-search a { padding: .48rem .7rem; }
    .device-card { padding-inline: .5rem; }
    .device-card__preview-wrap { width: calc(100% + 1rem); margin-inline: -.5rem; }
    .device-card__heading { align-items: flex-start; flex-direction: column; }
    .device-card dl, .device-controls { grid-template-columns: 1fr; }
    .legacy-camera-controls { margin-inline: -.5rem; }
    .legacy-camera-controls__views { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .legacy-dropup__menu { right: auto; left: 0; max-width: calc(100vw - 2rem); }
}