:root {
  color-scheme: dark;
  --navy: #071b34;
  --navy-2: #113a62;
  --blue: #146e9f;
  --cyan: #17a6cc;
  --surface: #ffffff;
  --canvas: #f3f6fa;
  --ink: #162539;
  --muted: #607086;
  --line: #d9e1ea;
  --success: #11735b;
  --warning: #9a5b08;
  --danger: #b33846;
  --shadow: 0 16px 48px rgba(7, 27, 52, .12);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); }
body { margin: 0; color: var(--ink); background: var(--canvas); }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--blue); }
.hidden { display: none !important; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 14px; color: #fff; background: var(--navy); border-radius: 10px; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.auth-shell { min-height: 100dvh; padding: max(24px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom)); display: grid; place-items: center; background: radial-gradient(circle at 85% 5%, rgba(23,166,204,.27), transparent 30%), linear-gradient(150deg, #06172d, #103c61); }
.auth-card { width: min(100%, 450px); padding: 28px; background: #fff; border-radius: 24px; box-shadow: 0 24px 70px rgba(0,0,0,.25); }
.auth-brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); text-decoration: none; font-size: .82rem; font-weight: 800; }
.auth-brand img { width: 156px; max-height: 40px; }
.auth-tabs { margin: 28px 0 22px; padding: 4px; display: grid; grid-template-columns: 1fr 1fr; background: #eef3f7; border-radius: 14px; }
.auth-tabs button { min-height: 48px; color: var(--muted); background: transparent; border: 0; border-radius: 11px; font-weight: 800; }
.auth-tabs button[aria-selected="true"] { color: var(--navy); background: #fff; box-shadow: 0 2px 9px rgba(7,27,52,.09); }
.auth-form { display: grid; gap: 16px; }
.auth-form h1 { margin: 0; font-size: 1.55rem; }
.auth-form > p { margin: -7px 0 2px; color: var(--muted); line-height: 1.55; font-size: .9rem; }
label { display: grid; gap: 7px; color: #34475e; font-size: .86rem; font-weight: 800; }
input, select { width: 100%; min-height: 48px; padding: 0 13px; color: var(--ink); background: #fff; border: 1px solid #cbd6e2; border-radius: 12px; }
input:focus, select:focus { border-color: var(--cyan); outline: 3px solid rgba(23,166,204,.15); }
.auth-help { margin: 20px 0 0; text-align: center; font-size: .83rem; }

.button { min-height: 48px; padding: 0 17px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 12px; font-weight: 850; cursor: pointer; text-decoration: none; }
.button:disabled { opacity: .52; cursor: not-allowed; }
.button.primary { color: #fff; background: var(--navy-2); }
.button.secondary { color: var(--navy-2); background: #fff; border-color: #cdd8e4; }
.button.danger { color: #fff; background: var(--danger); }
.button:focus-visible, .text-button:focus-visible, .app-nav a:focus-visible { outline: 3px solid rgba(23,166,204,.35); outline-offset: 2px; }
.text-button { min-height: 48px; padding: 0 8px; color: var(--blue); background: transparent; border: 0; font-weight: 800; cursor: pointer; }

.message { margin: 14px 0; padding: 13px 15px; color: #394d63; background: #edf5fa; border: 1px solid #cbe1ed; border-radius: 12px; line-height: 1.5; font-size: .88rem; }
.message.error { color: #8b2632; background: #fff0f2; border-color: #f0c8ce; }
.message.success { color: #0f604c; background: #ebfaf5; border-color: #bfe5d9; }

.app-shell { min-height: 100dvh; }
.app-header { min-height: 70px; padding: max(10px, env(safe-area-inset-top)) 24px 10px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #fff; background: var(--navy); }
.app-brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font-weight: 900; }
.app-brand img { width: 148px; filter: brightness(0) invert(1); }
.app-brand span { padding-left: 12px; border-left: 1px solid rgba(255,255,255,.3); }
.account-summary { display: flex; align-items: center; gap: 11px; font-size: .82rem; }
.account-summary #environment-badge { padding: 4px 8px; color: #bceefa; background: rgba(23,166,204,.18); border: 1px solid rgba(92,202,226,.35); border-radius: 999px; font-size: .7rem; font-weight: 900; }
.account-summary .text-button { color: #d6e5f3; }

.app-nav { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 3px 14px rgba(7,27,52,.05); }
.app-nav a { min-height: 62px; padding: 8px 4px; display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--muted); border-bottom: 3px solid transparent; text-decoration: none; font-size: .86rem; font-weight: 850; }
.app-nav a span { font-size: 1rem; }
.app-nav a[aria-current="page"] { color: var(--blue); border-color: var(--cyan); }

.app-main { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 30px 0 calc(42px + env(safe-area-inset-bottom)); }
.screen-heading { margin-bottom: 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.eyebrow { margin: 0 0 6px; color: var(--blue); letter-spacing: .13em; font-size: .7rem; font-weight: 950; }
.screen-heading h1 { margin: 0; font-size: clamp(1.6rem, 4vw, 2.15rem); }
.screen-heading p:not(.eyebrow) { margin: 8px 0 0; color: var(--muted); }
.screen-content { display: grid; gap: 18px; }
.loading-block, .empty-state { min-height: 180px; padding: 40px 20px; display: grid; place-items: center; color: var(--muted); text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 18px; }

.panel { padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 7px 24px rgba(7,27,52,.04); }
.panel h2, .panel h3 { margin: 0 0 14px; }
.panel > p { color: var(--muted); line-height: 1.55; }
.panel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field-grid .full { grid-column: 1 / -1; }
.actions { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; }
.status-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.status-item { padding: 13px; background: #f5f8fb; border-radius: 12px; }
.status-item span, .status-item strong { display: block; }
.status-item span { color: var(--muted); font-size: .75rem; }
.status-item strong { margin-top: 5px; word-break: break-word; font-size: .93rem; }
.status-pill { display: inline-flex; padding: 5px 9px; color: var(--blue); background: #eaf5fa; border-radius: 999px; font-size: .75rem; font-weight: 900; }
.status-pill.warning { color: var(--warning); background: #fff4dd; }
.status-pill.danger { color: var(--danger); background: #fff0f2; }
.list { display: grid; gap: 10px; }
.list-item { padding: 15px; display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #f7f9fc; border: 1px solid #e1e7ee; border-radius: 13px; }
.list-item > div { min-width: 0; }
.list-item strong, .list-item span { display: block; }
.list-item span { margin-top: 4px; color: var(--muted); font-size: .8rem; }
.list-item button { flex: 0 0 auto; }
.segmented { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px; background: #eef3f7; border-radius: 12px; }
.segmented button { min-height: 44px; color: var(--muted); background: transparent; border: 0; border-radius: 9px; font-weight: 850; }
.segmented button[aria-pressed="true"] { color: var(--navy); background: #fff; box-shadow: 0 2px 7px rgba(7,27,52,.1); }
.check-row { min-height: 48px; display: flex; align-items: center; gap: 10px; }
.check-row input { width: 22px; min-height: 22px; }
.fine-print { color: var(--muted); font-size: .78rem; line-height: 1.5; }

.license-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; }
.license-toolbar .segmented { flex: 1 1 200px; max-width: 320px; }
.license-toolbar .segmented button { min-height: 48px; box-sizing: border-box; }
.license-item strong, .license-item span, .purchase-product p { overflow-wrap: anywhere; }
.license-item .status-pill { display: inline-flex; margin-top: 8px; }
#licenses-content .message .actions { margin-top: 10px; }
#licenses-content button, #licenses-content .button { min-height: 48px; box-sizing: border-box; }
#license-application { scroll-margin-top: 20px; }

.confirm-dialog { width: min(calc(100% - 28px), 470px); padding: 0; border: 0; border-radius: 20px; box-shadow: var(--shadow); }
.confirm-dialog::backdrop { background: rgba(3,16,31,.65); }
.confirm-dialog form { padding: 24px; }
.confirm-dialog h2 { margin: 0 0 12px; }
.confirm-dialog #confirm-body { color: var(--muted); line-height: 1.6; }
.dialog-actions { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.callback-page { min-height: 100dvh; display: grid; place-items: center; padding: 20px; background: linear-gradient(150deg, #06172d, #103c61); }
.callback-card { width: min(100%, 430px); padding: 32px; text-align: center; background: #fff; border-radius: 24px; box-shadow: var(--shadow); }
.callback-card img { width: 170px; }
.callback-card h1 { margin: 22px 0 10px; }
.callback-card p { color: var(--muted); line-height: 1.6; }
.spinner { width: 34px; height: 34px; margin: 24px auto 0; border: 3px solid #dce7ef; border-top-color: var(--cyan); border-radius: 50%; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .app-header { padding-inline: 16px; align-items: flex-start; }
  .app-brand span, .account-summary #environment-badge, .account-summary strong { display: none; }
  .app-brand img { width: 130px; }
  .app-nav { position: fixed; inset: auto 0 0; z-index: 30; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--line); border-bottom: 0; }
  .app-nav a { min-height: 60px; flex-direction: column; gap: 2px; font-size: .72rem; }
  .app-main { width: min(100% - 24px, 620px); padding-top: 22px; padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .screen-heading { align-items: flex-start; }
  .refresh-button { min-width: 48px; width: 48px; overflow: hidden; color: transparent; position: relative; }
  .refresh-button::after { content: "↻"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--blue); font-size: 1.25rem; }
  .panel-grid, .field-grid, .status-grid { grid-template-columns: 1fr; }
  .list-item { align-items: flex-start; flex-direction: column; }
  .list-item .button { width: 100%; }
  .auth-card { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* OwnerSignal customer palette and dimensions, shared with Android Owner. */
:root { color-scheme: dark; --navy:#02050C; --navy-2:#3E9BFF; --blue:#3E9BFF; --cyan:#79BFFF; --surface:#0B111B; --raised:#101723; --canvas:#02050C; --ink:#F4F0E8; --muted:#BBB5AD; --line:#2B3441; --success:#2F8D70; --warning:#B57716; --danger:#FF5A5F; --shadow:0 16px 48px #0008; font-size:15px; }
body { line-height:22px; }
.auth-shell,.callback-page { background:var(--canvas); }
.auth-card,.callback-card { background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:none; padding:24px; }
.auth-brand { margin-bottom:24px; }
.auth-tabs { background:var(--raised); margin-top:0; }
.auth-tabs button[aria-selected="true"],.segmented button[aria-pressed="true"] { background:var(--blue); color:var(--canvas); box-shadow:none; }
.segmented button[aria-pressed="true"]:disabled { opacity:1; }
.auth-form h1,.screen-heading h1 { font-size:22px; line-height:30px; }
.auth-form>p { margin:0; font-size:15px; }
label { color:var(--ink); font-size:15px; font-weight:500; }
input,select { background:var(--raised); border-color:var(--line); border-radius:10px; font-size:16px; }
input:focus,select:focus { outline-color:var(--cyan); }
.button { border-radius:10px; font-weight:700; font-size:16px; }
.button.primary { color:var(--canvas); background:var(--blue); min-height:52px; }
.button.secondary { color:var(--ink); background:var(--raised); border-color:var(--line); }
.button.danger { color:var(--canvas); }
.button:focus-visible,.text-button:focus-visible,.app-nav a:focus-visible { outline-color:var(--cyan); }
.message { color:var(--ink); background:var(--raised); border-color:var(--line); font-size:15px; }
.message.error { color:var(--danger); background:var(--surface); border-color:var(--danger); }
.message.success { color:var(--ink); background:var(--surface); border-color:var(--success); }
.app-header { background:var(--canvas); padding-inline:24px; min-height:56px; }
.app-brand img { filter:none; }
.app-nav { position:fixed; inset:auto 0 0; background:var(--surface); border-top:1px solid var(--line); border-bottom:0; padding-bottom:env(safe-area-inset-bottom); }
.app-nav a { flex-direction:column; gap:2px; min-height:64px; border-bottom:0; font-size:12px; }
.app-nav a[aria-current="page"] { color:var(--blue); background:var(--raised); }
.app-main { width:min(100% - 48px,760px); padding-top:24px; padding-bottom:calc(100px + env(safe-area-inset-bottom)); }
.screen-content { gap:12px; }
.panel,.loading-block,.empty-state { background:var(--surface); border-color:var(--line); border-radius:16px; padding:20px; box-shadow:none; }
.panel h2,.panel h3 { font-size:16px; line-height:24px; }
.status-item,.list-item { background:var(--raised); border-color:var(--line); }
.status-item span,.list-item span,.fine-print { font-size:12px; line-height:18px; }
.status-pill,.status-pill.warning,.status-pill.danger { background:var(--surface); }
.status-pill.warning { color:var(--warning); }
.status-pill.danger { color:var(--danger); }
.segmented { background:var(--raised); border:1px solid var(--line); padding:4px; }
.segmented button { min-height:48px; font-size:16px; }
.confirm-dialog { background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:16px; }
.refresh-button { width:auto; min-width:48px; color:var(--ink); }
.refresh-button::after { content:none; }
.screen-heading { align-items:center; gap:12px; }
.screen-heading>div>p { display:none; }
.consents { display:grid; gap:8px; }
.consents .text-button { text-align:left; font-size:15px; }
.check-row input { accent-color:var(--blue); flex:0 0 22px; }
.destination-header { display:flex; align-items:center; gap:12px; }
.destination-header h2 { margin:0; }
.device-row { align-items:center; }
.device-row .actions { margin:0; }
.quick-minutes { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.qr-video { width:100%; max-height:55dvh; background:#000; border-radius:16px; object-fit:cover; }
.registration-choice { display:grid; gap:12px; }
.period-dates { display:grid; gap:8px; }
.summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.summary-grid strong { display:block; font-size:22px; line-height:30px; }
details>summary { min-height:48px; cursor:pointer; }
@media(max-width:760px) { .app-main { width:calc(100% - 48px); padding-top:24px; } .app-header{padding-inline:24px;} .app-brand img {width:130px;} .auth-card{padding:24px;} .refresh-button{width:auto;color:var(--ink);} .refresh-button::after{content:none;} .status-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .device-row{flex-direction:row;} .device-row .button{width:auto;} .panel-grid{grid-template-columns:1fr;} }
@media(max-width:380px) { .screen-heading{align-items:flex-start;flex-direction:column;} .app-main{width:calc(100% - 32px);} .panel{padding:16px;} }

.auth-brand img,.callback-card img,.app-brand img { filter:brightness(0) invert(1); }
.purchase-choice {justify-content:flex-start;text-align:left;min-height:110px;}
.purchase-choice[aria-pressed="true"] {border:2px solid var(--blue);background:var(--raised);color:var(--ink);}
#confirm-body {white-space:pre-line;}

.auth-shell {grid-template-columns:minmax(0,1fr);} .auth-card{width:100%;max-width:450px;} .auth-brand span{white-space:nowrap;font-size:12px;}

/* Approved full Owner UX R1: existing actions and states. */
:root {color-scheme:light;--navy:#172c42;--navy-2:#165bc8;--blue:#165bc8;--cyan:#165bc8;--surface:#fff;--raised:#eaf2ff;--canvas:#f3f6f9;--ink:#172c42;--muted:#52657a;--line:#ccd7e2;--success:#176846;--warning:#885600;--danger:#a52c36;--shadow:none;font-size:18px;}
body {line-height:1.6;}
.app-header {color:var(--ink);background:var(--canvas);min-height:48px;padding-inline:20px;}
.app-brand {color:var(--ink);}
.app-brand span {display:none;}
.auth-brand img,.callback-card img,.app-brand img {filter:none;}
.app-nav {grid-template-columns:repeat(3,minmax(0,1fr));}
.app-nav a {font-size:1rem;min-height:72px;}
.app-nav a[aria-current="page"] {color:var(--blue);background:var(--raised);font-weight:800;}
.app-main {width:min(1120px,calc(100% - 32px));padding-top:16px;}
.auth-form h1,.screen-heading h1 {font-size:1.55rem;line-height:1.35;}
label,.auth-form>p,.message,.button,.text-button,.segmented button,.consents .text-button {font-size:1rem;}
input,select {font-size:1rem;background:#fff;min-height:52px;}
.button {min-height:52px;}
.button.primary,.button.danger {color:#fff;}
.panel {border-radius:12px;padding:20px;}
.panel h2,.panel h3 {font-size:1.2rem;line-height:1.4;}
.list-item {background:#fff;padding:20px;border-radius:10px;}
.list-item strong {font-size:1.15rem;}
.list-item span,.status-item span,.fine-print {font-size:.9rem;line-height:1.55;}
.screen[data-detail="true"]>.screen-heading {display:none;}
.room-tools {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;}
.room-count {font-weight:600;color:var(--muted);}
.room-links {display:grid;gap:12px;}
.hero-time {font-size:2.2rem;font-weight:800;line-height:1.3;color:var(--ink);}
@media(max-width:760px){.app-main{width:calc(100% - 32px);padding-top:16px;}.app-header{padding-inline:16px;}.device-row{align-items:center;}.panel-grid{grid-template-columns:1fr;}}
@media(max-width:380px){.room-tools{grid-template-columns:1fr;}.device-row{align-items:flex-start;}.device-row .button{padding-inline:12px;}.screen-heading{gap:8px;}.auth-brand span{white-space:normal;}}

.right-term{font-size:1.3rem;font-weight:700;margin:8px 0;}.license-item details{margin-top:12px;}.license-item summary{color:var(--blue);}.license-item>div{min-width:0;}.segmented button[aria-pressed="true"]{color:#fff;}.license-toolbar{flex-wrap:wrap;gap:12px;}

@media(min-width:761px){.screen-heading>div{flex:1;}}

.hero-time{display:block;margin-top:8px;}

/* UX correction: approved compact header, responsive room grid, resource rows. */
.app-header{min-height:48px;padding-block:8px;}.app-main{width:min(1248px,calc(100% - 32px));padding-top:8px;}
#screen-time>.screen-heading{display:flex;flex-direction:row;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:nowrap;}
#screen-time>.screen-heading>div{flex:1;min-width:0;}#screen-time h1{font-size:1.22rem;margin:0;}
#screen-time .refresh-button{width:52px;min-width:52px;padding:0;font-size:1.3rem;}#screen-time>.screen-heading>.button{padding-inline:12px;}
.room-tools{display:grid;grid-template-columns:minmax(0,1fr) 124px;gap:10px;margin-bottom:10px;}
.room-tools input,.room-tools select{width:100%;min-width:0;margin:0;min-height:52px;}
.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;}
.rooms-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;}
.room-card{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:110px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);text-decoration:none;color:var(--ink);font-size:1rem;line-height:1.35;min-width:0;overflow-wrap:anywhere;}
.room-card.active{background:var(--raised);border-color:var(--blue);}.room-card.alert{border-color:var(--warning);}.room-card strong{font-size:1rem;line-height:1.35;}.room-primary{font-size:1.22rem;line-height:1.3;font-weight:800;}.room-foot{display:flex;justify-content:space-between;gap:4px;color:var(--muted);font-size:1rem;}
.license-item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px;position:relative;}.license-item strong{font-size:1rem;}.license-item .right-term{margin:4px 0;}.license-actions{display:flex;flex-direction:column;align-items:stretch;min-width:96px;}.license-actions>.button{min-height:48px;padding:8px 12px;}.license-actions details{margin:0;}.license-actions summary{display:flex;align-items:center;justify-content:center;min-height:48px;color:var(--blue);font-size:1rem;list-style:none;}.license-actions summary::-webkit-details-marker{display:none;}.license-details{position:relative;max-width:100%;overflow-wrap:anywhere;}.license-item:has(details[open]){grid-template-columns:minmax(0,1fr);}.license-actions:has(details[open]){align-items:stretch;}.license-toolbar{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;}.license-toolbar .segmented{flex:1;}.license-toolbar>.button{padding-inline:10px;}.license-toolbar .segmented button{padding-inline:8px;min-height:48px;}
#screen-licenses>.screen-heading{margin-bottom:10px;}#screen-licenses h1{margin:0;}#screen-licenses>.screen-content>.list{gap:10px;}
@media(max-width:850px){.rooms-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:540px){.rooms-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.license-toolbar{flex-wrap:wrap;}.license-toolbar .segmented{flex-basis:100%;}.app-header .app-brand img{width:110px;}#screen-licenses>.screen-heading{flex-direction:row;align-items:center;}}
@media(max-width:319px){.rooms-grid{grid-template-columns:minmax(0,1fr);}.room-tools{grid-template-columns:minmax(0,1fr);}}