:root { font-family: var(--ts-font); color: var(--ts-text); background: var(--ts-canvas); line-height: 1.45 }
* { box-sizing: border-box }
body { margin: 0 }
.shell { margin: auto; padding: 24px }
.topbar { display: flex; justify-content: space-between; align-items: center }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: var(--ts-text-dialog) }
.mark { display: grid; place-items: center; width: 38px; height: 38px; background: var(--ts-brand); color: var(--ts-surface); border-radius: 50%; font-weight: 600 }
.account { color: var(--ts-muted); font-size: var(--ts-text-body) }
.panel { background: var(--ts-surface); border: 1px solid var(--ts-divider); border-radius: var(--ts-radius-panel); padding: 26px; box-shadow: none; margin-bottom: 18px }
.centered { text-align: center; padding: 64px 24px }
.hero { display: flex; justify-content: space-between; align-items: center }
.eyebrow { letter-spacing: normal; color: var(--ts-brand); font-weight: 600; font-size: var(--ts-text-body); margin: 0 0 8px }
.muted,.hint { color: var(--ts-muted) }
.hint { font-size: var(--ts-text-sm) }
.error { color: var(--ts-error); font-size: var(--ts-text-body) }
h1 { font-size: var(--ts-text-title); margin: 0 0 6px }
h2 { font-size: var(--ts-text-section); margin: 3px 0 20px }
.big { line-height: 1; color: var(--ts-brand); font-weight: 600; margin: 12px 0 4px }
.metrics { display: flex; gap: 90px; margin: 28px 0 18px }
.metrics span { display: grid }
.metrics b { font-size: var(--ts-text-dialog) }
.metrics small { color: var(--ts-muted); margin-top: 4px }
.grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px }
.notice { background: var(--ts-selected); border-radius: var(--ts-radius-control); padding: 14px; margin: 18px 0 0 }
.section-heading,.history-head { display: flex; justify-content: space-between; align-items: start }
.pairing-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end }
.pairing-row label { margin: 0 }
.pairing-row button { white-space: nowrap }
label { display: block; font-weight: 600; font-size: var(--ts-text-body); margin: 14px 0 6px }
input,select { width: 100%; border: 1px solid var(--ts-control-border); border-radius: var(--ts-radius-control); padding: 12px; font: inherit; color: inherit; background: var(--ts-surface) }
button { border: 0; border-radius: var(--ts-radius-control); padding: 12px 18px; font: inherit; font-weight: 600; cursor: pointer }
button:disabled,input:disabled,select:disabled { cursor: not-allowed; opacity: 1 }
.primary { background: var(--ts-brand); color: var(--ts-surface) }
.secondary { background: var(--ts-surface); border: 1px solid var(--ts-control-border); color: var(--ts-text) }
.full { width: 100%; margin-top: 18px }
.events { border-top: 1px solid var(--ts-divider) }
.event { padding: 12px 0; border-bottom: 1px solid var(--ts-divider); display: flex; justify-content: space-between; gap: 12px }
.event strong { display: block }
.event small { color: var(--ts-muted) }
@media(max-width:700px) { .shell { padding: 14px }
.grid { grid-template-columns: 1fr }
.metrics { gap: 35px }
.hero { align-items: flex-start; gap: 16px }
.pairing-row { grid-template-columns: 1fr }
.pairing-row button { width: 100% } }
.enrollment-row { grid-template-columns: minmax(200px,1fr) auto }
.enrollment-details { margin-top: 18px; padding: 16px; background: var(--ts-selected); border-radius: var(--ts-radius-control) }
.enrollment-details p { margin: 8px 0 }
.enrollment-details code { display: block; margin-top: 4px; padding: 10px; border: 1px solid #c9ddda; border-radius: var(--ts-radius-control); background: var(--ts-surface); overflow-wrap: anywhere; font-size: var(--ts-text-body) }
.enrollment-details a { display: inline-block; margin: 8px 0; color: var(--ts-brand-hover); font-weight: 600 }
@media(max-width:700px) { .enrollment-row { grid-template-columns: 1fr } }
[hidden] { display: none !important }
#activity-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: 12px }
.activity-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px }
.activity-heading h3 { margin: 0; font-size: var(--ts-text-section) }
.status-badge { border-radius: 999px; padding: 4px 10px; font-size: var(--ts-text-body); font-weight: 600; white-space: nowrap; background: var(--ts-success-bg); color: var(--ts-success) }
.status-badge.quiet { background: var(--ts-neutral-bg); color: var(--ts-muted) }
.status-badge.attention { background: var(--ts-warning-bg); color: var(--ts-warning) }
.activity-remaining { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 }
.activity-remaining strong { font-size: var(--ts-text-metric); line-height: 1.1; color: var(--ts-brand) }
.activity-remaining span,.activity-metrics small,.activity-detail { font-size: var(--ts-text-sm); color: var(--ts-muted) }
.activity-metrics { display: flex; gap: 36px }
.activity-metrics div { display: grid }
.activity-metrics strong { font-size: var(--ts-text-body) }
.usage-track { height: 6px; border-radius: 999px; background: #e1ebe9; overflow: hidden; margin: 10px 0 6px }
.usage-track span { display: block; height: 100%; border-radius: inherit; background: var(--ts-brand) }
.activity-detail { margin: 8px 0 0 }
.activity-action { margin-top: 12px }
.shell { max-width: 1180px; padding-top: 12px }
.topbar { margin-bottom: 10px; min-height: 44px }
.account-menu { display: flex; align-items: center; gap: 14px }
.account-action,.text-button { padding: 5px 8px; background: transparent; color: var(--ts-brand-hover); font-size: var(--ts-text-body) }
.account-action:hover,.text-button:hover { text-decoration: underline }
.child-nav { margin: 0 0 14px; padding: 8px 0 12px; border-bottom: 1px solid var(--ts-divider) }
.child-nav-head,.child-nav-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.child-nav-head .eyebrow { margin: 0 }
.child-tabs { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 8px 0 4px }
.child-tab { flex: 0 0 auto; padding: 9px 16px; border: 1px solid transparent; border-radius: var(--ts-radius-control); background: transparent; color: #456665 }
.child-tab[aria-selected="true"] { border-color: #cbdcda; background: var(--ts-surface); color: var(--ts-brand-hover); box-shadow: none }
.child-tab:focus-visible { outline: 3px solid #36a39a; outline-offset: 2px }
.child-nav-foot .hint,.connection-note { margin: 0; font-size: var(--ts-text-xs); color: var(--ts-muted) }
.connection-note { font-weight: 600 }
.connection-note.attention { color: var(--ts-warning) }
#activities-panel { margin-top: 14px }
.setup-tools { margin-top: 16px }
.device-panel { grid-template-columns: minmax(0,1fr) 230px; align-items: start }
.balance-head { display: flex; align-items: center; justify-content: space-between; gap: 10px }
.balance-head .eyebrow { margin: 0 }
.balance-value { display: flex; align-items: baseline; gap: 10px; margin: 16px 0 10px }
.balance-value .big { margin: 0; font-size: clamp(36px,5vw,54px) }
.balance-value>span { color: var(--ts-muted); font-size: var(--ts-text-body) }
.shared-track { height: 9px; border-radius: 99px; overflow: hidden; background: #e1ebe9 }
.shared-track span { display: block; height: 100%; border-radius: inherit; background: var(--ts-brand); transition: width .2s ease }
.balance .metrics { gap: 42px; margin: 14px 0 10px }
.balance .metrics b { font-size: var(--ts-text-section) }
.balance .metrics small { font-size: var(--ts-text-sm) }
.balance #updated-at { margin: 4px 0 10px }
.health-indicators { display: flex; flex-wrap: wrap; gap: 7px }
.health-pill { display: flex; align-items: center; gap: 7px; border-radius: var(--ts-radius-control); padding: 6px 9px; background: var(--ts-neutral-bg); color: var(--ts-muted) }
.health-pill small { font-size: var(--ts-text-sm) }
.health-pill strong { font-size: var(--ts-text-body) }
.health-pill.good { background: var(--ts-success-bg); color: var(--ts-success) }
.health-pill.attention { background: var(--ts-warning-bg); color: var(--ts-warning) }
.health-pill.quiet { background: var(--ts-neutral-bg); color: var(--ts-muted) }
.youtube-note { min-height: 0; margin: 8px 0 0; font-size: var(--ts-text-sm) }
.quick-override { align-self: start; padding: 14px 16px }
.quick-override>summary { cursor: pointer; list-style: none; color: var(--ts-brand-hover); font-weight: 600 }
.quick-override>summary::-webkit-details-marker { display: none }
.quick-override>summary:after { content: '+'; float: right; font-size: var(--ts-text-section); line-height: 1 }
.quick-override[open]>summary:after { content: '−' }
.override-fields { display: grid; gap: 8px; margin-top: 12px }
.override-fields label { margin: 0; font-size: var(--ts-text-body) }
.override-fields select,.override-fields input { padding: 9px }
.override-fields button { padding: 10px }
.quick-override #command-result { margin-bottom: 0 }
.connection-note { white-space: nowrap }
.account-action[hidden] { display: none }
@media(max-width:700px) { .device-panel { grid-template-columns: 1fr }
.quick-override { padding: 12px 16px }
.override-fields { grid-template-columns: 1fr 1fr }
.override-fields button { grid-column: 1/-1 }
.child-nav-foot { align-items: flex-start; flex-direction: column; gap: 4px }
.balance .metrics { gap: 28px } }
.setup { padding: 16px 22px }
.setup .section-heading { align-items: center }
.setup h2 { margin: 0; font-size: var(--ts-text-section) }
.setup label { margin-top: 6px }
.setup select { max-width: 420px }
.setup .hint { margin: 6px 0 0 }
.hero { padding: 20px 26px }
.hero h1 { font-size: var(--ts-text-title) }
.setup-tools { margin: 24px 0; border: 1px solid var(--ts-control-border); border-radius: var(--ts-radius-panel); background: var(--ts-canvas) }
.setup-tools>summary { padding: 18px 22px; cursor: pointer; font-weight: 600; color: var(--ts-brand-hover) }
.setup-tools[open]>summary { margin-bottom: 12px }
.setup-tools .panel { margin: 0 14px 14px }
.activity-card h3 { margin: 0 0 8px }
.activity-card p { margin: 5px 0 }
.activity-card .secondary { margin-top: 8px }
.big { font-size: clamp(32px,5vw,52px) }
.app-menu { position: relative }
.app-menu>summary,.activity-time-tools>summary { list-style: none; cursor: pointer; border: 1px solid #cbdcda; border-radius: var(--ts-radius-control); background: var(--ts-surface); color: var(--ts-brand-hover); padding: 8px 13px; font-size: var(--ts-text-body); font-weight: 600 }
.app-menu>summary::-webkit-details-marker,.activity-time-tools>summary::-webkit-details-marker { display: none }
.app-menu>summary:after { content: '⌄'; margin-left: 8px }
.menu-popover { position: absolute; right: 0; top: calc(100% + 8px); z-index: 5; width: min(320px,calc(100vw - 28px)); padding: 8px; background: var(--ts-surface); border: 1px solid var(--ts-divider); border-radius: var(--ts-radius-panel); box-shadow: 0 8px 28px #17333220 }
.menu-popover>a,.menu-history>summary { display: block; padding: 11px 12px; border-radius: var(--ts-radius-control); color: var(--ts-text); text-decoration: none; font-size: var(--ts-text-body); font-weight: 600; cursor: pointer }
.menu-popover>a:hover,.menu-history>summary:hover { background: var(--ts-selected) }
.menu-history-content { padding: 0 10px 10px }
.menu-history-content .event { font-size: var(--ts-text-body) }
.menu-history-content .secondary { width: 100%; margin-top: 8px; padding: 8px }
.section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 8px }
.section-title-row h2 { margin: 3px 0 12px }
.activity-time-tools { position: relative; margin-bottom: 8px }
.activity-time-tools[open] { z-index: 3 }
.activity-time-tools .override-fields { position: absolute; right: 0; top: calc(100% + 8px); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: min(430px,calc(100vw - 52px)); padding: 16px; background: var(--ts-surface); border: 1px solid var(--ts-divider); border-radius: var(--ts-radius-panel); box-shadow: none }
.activity-time-tools .override-fields button,.activity-time-tools .override-fields p { grid-column: 1/-1 }
.activity-time-tools label { margin: 0; font-size: var(--ts-text-body) }
.activity-time-tools input,.activity-time-tools select { padding: 9px }
.activity-card { position: relative; padding: 16px; border: 1px solid var(--ts-divider); border-top: 3px solid #16836f; border-radius: var(--ts-radius-panel); background: #fbfdfc }
.activity-youtube { border-top-color: #a94a65 }
.activity-gaming .activity-remaining strong,.activity-gaming .usage-track span { color: #146d85; background: #146d85 }
.activity-youtube .activity-remaining strong,.activity-youtube .usage-track span { color: #a94a65; background: #a94a65 }
.activity-card .activity-action { margin-top: 12px }
.trend-panel { margin-top: 14px }
.trend-panel .history-head { align-items: center }
.trend-panel h2 { margin: 3px 0 12px }
.trend-chart { display: grid; grid-template-columns: repeat(15,minmax(14px,1fr)); align-items: end; gap: clamp(4px,1vw,12px); height: 92px; padding: 8px 0 0; border-bottom: 1px solid #cbdcda }
.trend-chart span { height: 100%; display: flex; align-items: end; justify-content: center }
.trend-chart i { display: block; width: 100%; height: 4px; border-radius: 4px 4px 0 0; background: var(--ts-divider) }
.trend-chart~.hint { margin: 10px 0 0 }
.trend-panel .status-badge { font-size: var(--ts-text-body) }
@media(max-width:700px) { .section-title-row { align-items: flex-start; flex-direction: column; gap: 0 }
.activity-time-tools { margin: 0 0 10px }
.activity-time-tools .override-fields { right: auto; left: 0; width: min(430px,calc(100vw - 52px)) }
.menu-popover { right: 0 }
.trend-chart { grid-template-columns: repeat(15,minmax(10px,1fr)); gap: 3px } }
.activity-gaming .activity-remaining strong { color: #146d85; background: transparent }
.activity-youtube .activity-remaining strong { color: #a94a65; background: transparent }
.activity-gaming .usage-track span { background: #146d85 }
.activity-youtube .usage-track span { background: #a94a65 }
.section-title-row { margin-bottom: 12px }
.activity-table-wrap { overflow-x: auto }
#activity-cards { overflow-x: auto }
.activity-table { width: 100%; border-collapse: collapse; min-width: 530px; text-align: left }
.activity-table th,.activity-table td { border-top: 1px solid var(--ts-divider); vertical-align: middle }
.activity-table thead th { border-top: 0; color: var(--ts-muted); font-size: var(--ts-text-body); font-weight: 600; text-transform: none; letter-spacing: normal }
.activity-table tbody th { font-size: var(--ts-text-body); font-weight: 600; white-space: nowrap }
.activity-name { display: flex; align-items: center; gap: 9px }
.activity-marker { width: 10px; height: 10px; flex: none; border-radius: 50%; background: #146d85 }
.activity-marker.youtube { background: #a94a65 }
.activity-usage { min-width: 145px; color: #426563; font-size: var(--ts-text-body); white-space: nowrap }
.activity-usage .usage-track { margin: 6px 0 0; height: 6px }
.usage-track.youtube span { background: #a94a65 }
.usage-track.gaming span { background: #146d85 }
.activity-state { min-width: 175px }
.activity-state .status-badge { display: inline-block; margin-bottom: 4px }
.activity-state .activity-detail { display: block; white-space: nowrap }
.activity-action-cell { text-align: right }
.activity-action-cell button { padding: 8px 11px; white-space: nowrap }
.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 }
@media(max-width:700px) { .activity-table { min-width: 500px }
.activity-table th,.activity-table td { padding: 10px 8px }
.activity-time-tools .override-fields { width: min(430px,calc(100vw - 52px)) } }
.rule-editor { width: min(720px,90vw); max-height: 85vh; overflow: auto; border: 1px solid #d5e2e0; border-radius: var(--ts-radius-panel); padding: 24px; color: var(--ts-text) }
.rule-editor::backdrop { background: #17353980 }
.rule-editor label { display: block; margin: 12px 0 }
.rule-editor input[type=checkbox] { width: auto; margin-right: 8px }
.rule-days,.rule-actions { display: flex; gap: 12px; flex-wrap: wrap }
.rule-editor .activity-table { min-width: 0; margin: 16px 0 }
.rule-editor #rule-apps { max-height: 240px; overflow: auto }
.shared-editor-dialog { width: 760px; max-width: 96vw; height: 640px; max-height: 92vh; padding: 0; border: 1px solid var(--ts-divider); border-radius: var(--ts-radius-dialog); overflow: hidden }
.shared-editor-dialog::backdrop { background: #17333280 }
.shared-editor-dialog iframe { display: block; width: 100%; height: 100%; border: 0 }
.balance { padding: 16px 20px }
#activities-panel { padding: 16px 20px }
#activities-panel>.eyebrow { display: none }
#activities-panel .section-title-row { align-items: center; flex-direction: row; margin: 0 0 8px; gap: 12px }
#activities-panel h2 { margin: 0; font-size: var(--ts-text-section) }
#activities-panel #edit-rules { padding: 9px 14px; min-height: 40px }
#command-result:empty { display: none }
.activity-table th,.activity-table td { padding: 9px 10px }
.activity-state .activity-detail { margin: 4px 0 0 }
.activity-state .status-badge { margin: 0 }
.menu-popover>button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 11px 14px; font: inherit; color: inherit }
.menu-popover>button:hover { background: var(--ts-selected) }
.shared-settings-dialog { padding: 0; border: 1px solid var(--ts-control-border); border-radius: var(--ts-radius-dialog); width: min(562px,calc(100vw - 24px)); height: min(480px,calc(100dvh - 32px)); max-height: calc(100dvh - 32px) }
.shared-settings-dialog::backdrop { background: #17333255 }
.shared-settings-dialog iframe { display: block; width: 100%; height: 100%; border: 0 }
#updates-log { padding: 20px; overflow: auto }
.shared-editor-page { width: min(1120px,100%); margin: auto; background: white }
.shared-editor-page iframe { display: block; width: 100%; height: 920px; border: 0 }
.shared-editor-page[hidden] { display: none }
.shared-editor-page iframe,.shared-settings-page iframe { height: 100dvh }
.shared-settings-page { width: min(1120px,100%); margin: auto; background: white }
.shared-settings-page iframe { width: 100%; border: 0; display: block }
.shared-settings-page[hidden] { display: none }
body.dashboard-mode { background: var(--ts-surface); color: var(--ts-text); font: var(--ts-text-body)/var(--ts-line-body) var(--ts-font); line-height: normal }
.dashboard-mode .shell { max-width: none; margin: 0; padding: 18px 35px 18px 18px }
.dashboard-mode .topbar { margin: 0 0 8px; gap: 12px }
.dashboard-mode .brand { font: 600 var(--ts-text-dialog)/var(--ts-line-dialog) var(--ts-font); color: var(--ts-brand); min-width: 0 }
.dashboard-mode .brand .mark { display: inline; width: auto; height: auto; background: none; color: inherit; border-radius: 0; font: inherit; white-space: nowrap }
.dashboard-mode .app-menu>summary { font: var(--ts-text-body)/var(--ts-line-body) var(--ts-font); box-sizing: border-box; height: 40px; border-radius: 0; padding: 10px 13px; border-color: var(--ts-control-border); white-space: nowrap }
.dashboard-mode .app-menu>summary:after { display: none }
.installed-update { color: var(--ts-muted); font: var(--ts-text-xs)/var(--ts-line-xs) var(--ts-font); margin: 0 0 14px; min-height: 22px; padding-top: 3px }
.dashboard-mode .child-nav { border: 0; padding: 0; margin: 0 0 8px }
.dashboard-mode .child-nav-head,.dashboard-mode .child-nav-foot { display: none }
.dashboard-mode .child-selector { height: 34px; width: 100%; padding: 3px 8px; border-radius: 0; font: var(--ts-text-body)/var(--ts-line-body) var(--ts-font) }
.dashboard-mode .panel { padding: 0; background: var(--ts-surface); border: 0; border-radius: 0; box-shadow: none; margin: 0 }
.dashboard-mode .balance { margin-bottom: 14px }
.dashboard-mode #activities-panel { padding: 0; margin: 0 }
.dashboard-mode #activities-panel .section-title-row { height: 48px; margin: 0; align-items: flex-start; gap: 12px }
.dashboard-mode #activities-panel h2 { font: 600 var(--ts-text-section)/var(--ts-line-section) var(--ts-font); margin: 0; padding-top: 5px }
.dashboard-mode #activities-panel #edit-rules { height: 40px; width: 112px; max-width: 33%; padding: 0; border-radius: 0; border-color: var(--ts-control-border); font: var(--ts-text-body)/var(--ts-line-body) var(--ts-font) }
.dashboard-mode #activity-cards { display: block; overflow: visible }
.dashboard-mode .activity-table { display: block; min-width: 0; width: 100% }
.dashboard-mode .activity-table thead,.dashboard-mode .activity-table tbody { display: block; width: 100% }
.dashboard-mode .activity-table tr { display: grid; grid-template-columns: 20% 33% 47%; width: 100%; height: 72px; border-top: 1px solid var(--ts-divider) }
.dashboard-mode .activity-table thead tr { height: 28px; border: 0 }
.dashboard-mode .activity-table th,.dashboard-mode .activity-table td { display: block; position: relative; min-width: 0; width: auto; border: 0; padding: 0; margin: 0 }
.dashboard-mode .activity-table thead th { font: 600 var(--ts-text-body)/var(--ts-line-body) var(--ts-font); color: var(--ts-muted); letter-spacing: normal; padding: 3px 0; white-space: nowrap }
.dashboard-mode .activity-table thead th:first-child { padding-left: 10px }
.dashboard-mode .activity-name { padding: 14px 8px 0 28px!important; font: 600 var(--ts-text-body)/var(--ts-line-body) var(--ts-font); white-space: normal!important }
.dashboard-mode .activity-name>span:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.dashboard-mode .activity-marker { position: absolute }
.dashboard-mode .activity-usage { font: var(--ts-text-body)/var(--ts-line-body) var(--ts-font); color: var(--ts-muted); padding-top: 11px!important; white-space: normal }
.dashboard-mode .activity-usage>span { display: block; height: 30px; margin-right: 20px; overflow: hidden }
.dashboard-mode .activity-usage .usage-track { position: absolute; top: 47px; left: 0; right: 20px; margin: 0; height: 6px }
.dashboard-mode .activity-state { padding-top: 8px!important; overflow: hidden }
.dashboard-mode .activity-state .status-badge { height: 26px; max-width: calc(100% - 10px); padding: 5px 10px; border-radius: 0; font: 600 var(--ts-text-body)/var(--ts-line-body) var(--ts-font); overflow: hidden }
.dashboard-mode .activity-state .activity-detail { position: absolute; top: 37px; left: 0; right: 10px; font: var(--ts-text-body)/var(--ts-line-body) var(--ts-font); color: var(--ts-muted); margin: 0; white-space: normal }
.dashboard-mode .status-badge.attention { background: var(--ts-warning-bg) }
.dashboard-mode #history-panel { margin: 16px 0 10px; padding: 0 }
.dashboard-footer { font: var(--ts-text-xs)/var(--ts-line-xs) var(--ts-font); color: var(--ts-muted); margin: 0 }
.web-account { border-top: 1px solid var(--ts-divider); padding: 10px 14px }
.web-account .account-action { padding: 8px 0; background: none; color: var(--ts-brand-hover) }
.dashboard-mode .enrollment,.dashboard-mode .pairing { padding: 18px; margin: 14px }
.dashboard-mode .activity-usage .usage-track { border-radius: 0; background: #e3eaed }
.dashboard-mode .activity-usage .usage-track span { border-radius: 0 }
.dashboard-mode .status-badge.quiet { color: var(--ts-muted) }
.dashboard-mode .menu-popover { width: max-content; min-width: 220px; max-width: calc(100vw - 52px); border-radius: 0; padding: 3px; top: 100%; font: var(--ts-text-body)/var(--ts-line-body) var(--ts-font) }
.dashboard-mode .menu-popover>button { padding: 6px 22px; font: inherit }
.dashboard-mode .activity-marker { left: 13px; top: 23px; width: 6px; height: 6px }
html:has(body.dashboard-mode) { background: var(--ts-surface) }
.dashboard-mode { min-height: 100dvh }
body:has(>.shared-editor-page:not([hidden])) { overflow: hidden }
.brand-icon { width: 32px; height: 32px; flex: 0 0 32px; object-fit: contain }
.brand-copy { display: flex; flex-direction: column; min-width: 0 }
.brand-name { font: 600 var(--ts-text-dialog)/var(--ts-line-dialog) var(--ts-font); color: var(--ts-brand) }
#dashboard-title { font: var(--ts-text-body)/var(--ts-line-body) var(--ts-font); color: var(--ts-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.dashboard-mode .topbar { height: 52px; min-height: 52px; align-items: flex-start }
.dashboard-mode .brand { gap: 12px; align-items: center; min-height: 52px }
.dashboard-mode .app-menu { margin-top: 6px }
#dashboard-frame { display: none }
.dashboard-mode #dashboard-frame { display: block; position: fixed; inset: 0; width: 100%; height: 100dvh; border: 0; z-index: 2 }
.dashboard-mode .topbar,.dashboard-mode #signed-in>.child-nav,.dashboard-mode #installed-update,.dashboard-mode #device-panel,.dashboard-mode #activities-panel,.dashboard-mode #history-panel,.dashboard-mode #dashboard-footer { display: none!important }
.dashboard-mode #rule-editor,.dashboard-mode #settings-panel { position: fixed; z-index: 3; max-width: none; margin: 0; overflow: hidden; background: white }
.dashboard-mode #rule-editor iframe,.dashboard-mode #settings-panel iframe { height: 100%; width: 100% }
.dashboard-mode #setup-tools { position: fixed; margin: auto }
.dashboard-mode #setup-tools>summary { cursor: pointer }
.shared-editor-page,.shared-settings-page { border-radius: var(--ts-radius-panel); overflow: hidden }
.shared-editor-page iframe,.shared-settings-page iframe { border-radius: var(--ts-radius-panel) }
#setup-tools { position: fixed; inset: 0; margin: auto; width: min(720px,calc(100vw - 24px)); max-height: 90vh; overflow: auto; padding: 22px; border: 1px solid var(--ts-control-border); border-radius: var(--ts-radius-panel); background: var(--ts-surface); color: var(--ts-text); z-index: var(--ts-layer-modal) }
#setup-tools::backdrop { background: #102d2866 }
#setup-tools .panel { box-shadow: none; border: 0; padding: 12px 0; margin: 0 }
#setup-tools .setup-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px }
#setup-tools h2 { margin: 0 }
#setup-tools p { font-size: var(--ts-text-body) }
#setup-tools .setup-steps { border-collapse: collapse; width: 100%; font-size: var(--ts-text-body) }
#setup-tools .setup-steps th,#setup-tools .setup-steps td { padding: 9px; text-align: left; border-bottom: 1px solid #dce9e4; vertical-align: top }
#setup-tools small { display: block; margin-top: 5px; color: var(--ts-muted) }
.setup-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.setup-fields label { font-size: var(--ts-text-body); display: flex; flex-direction: column; gap: 4px }
.setup-fields input,.setup-fields select { width: 100%; min-height: var(--ts-control-height); box-sizing: border-box }
#child-install-result { min-height: 20px }
#setup-tools details { margin-top: 15px }
@media(max-width:520px) { .setup-fields { grid-template-columns: 1fr } }