:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #0c111b; color: #f6f1e8; }
* { box-sizing: border-box; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
body { min-height: 100vh; margin: 0; background: radial-gradient(circle at 12% 15%, #342316 0, transparent 30rem), radial-gradient(circle at 88% 88%, #0d3542 0, transparent 32rem), #0c111b; }
a { color: inherit; }
.auth-shell { width: min(100% - 2rem, 31rem); min-height: 100vh; margin: auto; padding: 2rem 0; display: flex; flex-direction: column; justify-content: center; }
.brand { display: inline-flex; align-items: center; gap: .5rem; color: #fff9ef; font-weight: 800; font-size: 1.25rem; text-decoration: none; letter-spacing: -.04em; }
.brand span, .eyebrow { color: #ffbd52; }
.brand-logo { width: 2rem; height: 2rem; display: block; flex: none; border-radius: .55rem; }
.auth-shell > .brand { align-self: flex-start; margin: 0 0 1.25rem; }
.auth-card { padding: clamp(2rem, 7vw, 3.25rem); border: 1px solid #374252; border-radius: 1.5rem; background: rgb(21 29 42 / .88); box-shadow: 0 2rem 5rem rgb(0 0 0 / .28); }
.eyebrow { margin: 0 0 .8rem; font-size: .72rem; font-weight: 800; letter-spacing: .18em; }
h1 { margin: 0; font-family: Iowan Old Style, Georgia, serif; font-size: clamp(2.5rem, 7vw, 3.7rem); line-height: .98; letter-spacing: -.06em; }
.subtitle { margin: 1.15rem 0 2rem; color: #b5c0d0; font-size: 1rem; line-height: 1.55; }
.oauth, button { width: 100%; min-height: 3.35rem; display: flex; justify-content: center; align-items: center; gap: .7rem; border-radius: .75rem; border: 1px solid #505762; background: #20252c; color: #f9f7f1; font-size: 1rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.oauth-options { display: grid; gap: .75rem; }
.oauth:hover { border-color: #d38a21; background: #292a29; }
button:hover { border-color: #d38a21; background: #f1aa3b; }
.provider-logo { width: 1.45rem; height: 1.45rem; flex: none; }
.cli-identity { display: flex; align-items: center; gap: .9rem; margin: 0 0 1.4rem; padding: 1rem; border: 1px solid #374252; border-radius: .85rem; background: #101724; }
.cli-identity .provider-logo { width: 1.8rem; height: 1.8rem; }
.cli-identity div { min-width: 0; display: grid; gap: .18rem; }
.cli-identity span { color: #aab5c6; font-size: .78rem; }
.cli-identity strong { color: #f9f7f1; overflow-wrap: anywhere; }
.divider { display: flex; align-items: center; gap: .9rem; margin: 1.55rem 0; color: #8f9ab0; font-size: .85rem; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: #364052; }
form { display: grid; gap: .65rem; } label { font-size: .86rem; font-weight: 700; color: #dfe5ed; } input, textarea { min-height: 3.35rem; padding: 0 1rem; border: 1px solid #536075; border-radius: .75rem; background: #101724; color: #fff; font: inherit; } textarea { padding-block: .8rem; resize: vertical; } input:focus, textarea:focus { outline: 2px solid #ffbd52; outline-offset: 2px; } button { margin-top: .55rem; border-color: #c67d16; background: #e99a24; color: #1b150c; }
.switch, .help, .footnote { color: #aab5c6; line-height: 1.55; } .switch { margin: 1.8rem 0 0; text-align: center; } .switch a { color: #ffbd52; } .notice { margin: 0 0 1.25rem; padding: .8rem 1rem; border: 1px solid #a95152; border-radius: .65rem; color: #ffd2d2; background: #43222a; }
.onboarding-form { gap: 1rem; }
.onboarding-form > label { display: grid; gap: .55rem; }
.onboarding-form .handle-input { margin-top: .1rem; }
.onboarding-form small { color: #aab5c6; font-size: .78rem; font-weight: 500; line-height: 1.5; }
.onboarding-form button { margin-top: .25rem; }
.footnote { text-align: center; font-size: .8rem; margin: 1.5rem 0 0; }
.quiet { width: auto; min-height: 2.4rem; padding: 0 1rem; background: transparent; border-color: #3a4658; color: #dbe2ed; font-size: .82rem; }
button.quiet:hover { border-color: #667389; background: #202a39; color: #f9f7f1; }
.danger { color: #ffb9bd; border-color: #693e49; }
button.danger:hover { border-color: #a55260; background: #3a2028; color: #ffd2d2; }
.notice.success { border-color: #397757; color: #c9f7d8; background: #112d21; }
.feedback-notice { display:flex; align-items:flex-start; gap:.7rem; padding:.8rem .9rem; }
.feedback-notice-icon { display:grid; place-items:center; flex:none; width:1.35rem; height:1.35rem; margin-top:.05rem; border-radius:50%; color:#112d21; background:#72d69b; font-size:.78rem; font-weight:850; }
.feedback-notice p { margin:0; padding-top:.02rem; color:inherit; font-size:.82rem; font-weight:650; line-height:1.5; }
code { color: #ffcf82; overflow-wrap: anywhere; }

.dashboard-body { background: #090d14; color: #f5f2eb; }
.dashboard-shell { min-height: 100vh; display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); background: radial-gradient(circle at 85% -10%, rgb(27 72 89 / .22), transparent 34rem), #090d14; }
.dashboard-sidebar { position: sticky; z-index: 30; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 1.4rem 1rem; border-right: 1px solid #222b38; background: #0d121b; }
.dashboard-brand { margin: .15rem .7rem .9rem; font-size: 1.35rem; }
.avatar { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid #745a2c; border-radius: .55rem; color: #191207; background: linear-gradient(135deg, #e9a631, #ffd277); font-weight: 900; }
.side-nav { display: grid; gap: .18rem; }
.side-nav p { margin: 1rem .75rem .4rem; color: #687487; font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.side-nav a, .sidebar-footer a { display: flex; align-items: center; gap: .75rem; padding: .62rem .7rem; border-radius: .55rem; color: #98a4b6; font-size: .84rem; font-weight: 650; text-decoration: none; transition: color .15s ease, background .15s ease; }
.side-nav a > span, .sidebar-footer a > span { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; color: #758297; font-size: .8rem; }
.side-nav a:hover, .sidebar-footer a:hover { color: #f5f2eb; background: #151d29; }
.side-nav a.active { color: #fff6e6; background: #20283a; box-shadow: inset 2px 0 #ffb84a; }
.side-nav a.active > span { color: #ffc768; }
.sidebar-footer { margin-top: auto; padding-top: 1rem; border-top: 1px solid #222b38; }
.sidebar-footer p { display: flex; align-items: center; gap: .55rem; margin: .7rem; color: #6f7b8d; font-size: .68rem; }
.sidebar-footer i, .status-badge i { width: .45rem; height: .45rem; border-radius: 50%; background: #53d795; box-shadow: 0 0 0 .2rem rgb(83 215 149 / .1); }
.dashboard-stage { min-width: 0; position: relative; }
.dashboard-topbar { position: sticky; z-index: 40; top: 0; height: 4.25rem; display: flex; align-items: center; justify-content: space-between; overflow: visible; padding: 0 2rem; border-bottom: 1px solid #222b38; background: rgb(9 13 20 / .94); backdrop-filter: blur(14px); }
.dashboard-topbar > div { display: flex; align-items: center; gap: .65rem; color: #8591a3; font-size: .8rem; }
.dashboard-topbar strong { color: #e8e5de; }
.topbar-separator { color: #3d4858; }
.topbar-context-link { color: #8591a3; text-decoration: none; }
.topbar-context-link:hover, .topbar-context-link:focus-visible { color: #f0f3f6; text-decoration: underline; text-underline-offset: .18em; }
.topbar-actions { display: flex; align-items: center; gap: .7rem; }
.topbar-actions form { display: block; }
.topbar-shortcuts { display: flex; align-items: center; gap: .35rem; }
.topbar-shortcuts > a, .topbar-shortcuts > .theme-toggle, .topbar-language-menu > summary { box-sizing: border-box; position: relative; width: 2.45rem; min-height: 2.45rem; height: 2.45rem; display: grid; place-items: center; margin: 0; padding: 0; border: 1px solid #364255; border-radius: .62rem; background: transparent; font: inherit; line-height: 1; text-decoration: none; transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.topbar-shortcuts > a:hover, .topbar-shortcuts > .theme-toggle:hover, .topbar-language-menu > summary:hover, .topbar-language-menu[open] > summary { transform: translateY(-1px); border-color: #66748a; background: #182230; }
.topbar-shortcuts > span { width: 1px; height: 1.5rem; margin: 0 .15rem; background: #303b4c; }
.topbar-shortcuts .dashboard-icon { width: 1.15rem; height: 1.15rem; }
.topbar-shortcuts .live { color: #ffb84d; }
.topbar-shortcuts > a.reader, .topbar-shortcuts > a.reader:visited { color: #f5c65a; }
.topbar-shortcuts .translations { color: #a78bfa; }
.topbar-shortcuts .notifications { color: #f06daf; }
.notification-dot { position: absolute; top: -.2rem; right: -.2rem; width: .58rem; height: .58rem; border: 2px solid #101722; border-radius: 50%; background: #4d91f4; box-shadow: 0 0 0 1px rgb(77 145 244 / .16); }
.topbar-shortcuts .plan { color: #57b7ff; }
.topbar-shortcuts .organizations { color: #a78bfa; }
.topbar-shortcuts .docs { color: #48d597; }
.theme-toggle { color: #b8c2d0; }
.theme-toggle span { display: none; }
html[data-theme="light"] .theme-toggle .theme-icon-light, html[data-theme="dark"] .theme-toggle .theme-icon-dark { display: grid; }
.topbar-language-menu { position: relative; }
.topbar-language-menu > summary { list-style: none; cursor: pointer; color: #b8c2d0; }
.topbar-language-menu > summary::-webkit-details-marker { display: none; }
.topbar-language-popover { position: absolute; z-index: 70; top: calc(100% + .65rem); right: 0; width: 10rem; padding: .4rem; border: 1px solid #344154; border-radius: .7rem; background: #131a25; box-shadow: 0 1.2rem 3rem rgb(0 0 0 / .5); }
.topbar-language-popover form { display: block; }
.topbar-language-popover button { width: 100%; min-height: 2.35rem; display: flex; justify-content: flex-start; align-items: center; gap: .5rem; margin: 0; padding: 0 .55rem; border: 0; border-radius: .45rem; color: #aeb8c7; background: transparent; font: 700 .72rem/1 inherit; text-align: left; cursor: pointer; }
.topbar-language-popover button:hover, .topbar-language-popover button.active { color: #fff8eb; background: #202938; }
.topbar-language-popover button.active::after { content: "✓"; margin-left: auto; color: #ffb84d; }
.topbar-language-popover .language-save-error { margin: .5rem; color: #e87c87; font-size: .75rem; line-height: 1.4; }
.plan-chip, .status-badge, .count-badge { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid #3c4656; border-radius: 999px; color: #c9d1dc; background: #151c27; font-size: .7rem; font-weight: 750; }
.plan-chip { padding: .4rem .7rem; color: #ffcc7a; border-color: #5d4929; background: #211b12; text-decoration: none; }
.plan-chip:hover { border-color: #97713a; background: #2c2315; }
.avatar { width: 2rem; height: 2rem; border-radius: 50%; font-size: .72rem; }
.user-avatar { overflow: hidden; border-color: #444c56; color: #c8d1da; background: #2d333b; }
.user-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.user-avatar .dashboard-icon { width: 1.1rem; height: 1.1rem; }
.topbar-menu { position: relative; z-index: 1; }
.topbar-menu[open] { z-index: 60; }
.topbar-menu > summary { display: flex; align-items: center; gap: .55rem; min-height: 2.55rem; padding: .25rem .55rem; border: 1px solid transparent; border-radius: .65rem; color: #c8d0dc; font-weight: 700; cursor: pointer; list-style: none; user-select: none; }
.topbar-menu > summary::-webkit-details-marker { display: none; }
.topbar-menu > summary:hover, .topbar-menu[open] > summary { border-color: #344154; background: #151d29; }
.menu-symbol { color: #ffbf5b; }
.account-menu-name { max-width: 12rem; overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-chevron { color: #748095; font-size: .75rem; }
.account-popover { position: absolute; z-index: 70; top: calc(100% + .65rem); right: 0; width: 16rem; overflow: hidden; border: 1px solid #344154; border-radius: .8rem; background: #131a25; box-shadow: 0 1.2rem 3rem rgb(0 0 0 / .5); }
.resources-popover { width: 13.5rem; }
.account-popover > p { display: grid; gap: .25rem; margin: 0; padding: 1rem; border-bottom: 1px solid #293342; color: #7f8b9e; font-size: .68rem; }
.account-popover > p strong { overflow: hidden; color: #f4f0e8; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.account-popover > p small { overflow: hidden; color: #9ba7b9; font-size: .72rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.account-popover > p small:empty { display: none; }
.account-menu-identity { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.account-menu-identity > .avatar { flex: none; width: 2.6rem; height: 2.6rem; }
.account-menu-identity-copy { display: grid; gap: .2rem; min-width: 0; }
.signed-in-provider { display: inline-flex; align-items: center; gap: .35rem; color: #9ba7b9; font-size: .68rem; font-weight: 600; }
.signed-in-provider img { width: .9rem; height: .9rem; }
.signed-in-provider[hidden] { display: none; }
.signed-in-provider.email { max-width: 100%; overflow-wrap: anywhere; }
.signed-in-provider.email img { flex-shrink: 0; }
.signed-in-provider.github img { filter: none; }
.account-popover nav { display: grid; padding: .45rem; }
.account-popover nav a, .account-popover form button { width: 100%; min-height: 2.5rem; display: flex; align-items: center; justify-content: flex-start; gap: .7rem; margin: 0; padding: 0 .7rem; border: 0; border-radius: .5rem; color: #aeb8c7; background: transparent; font-size: .76rem; font-weight: 700; text-decoration: none; }
.account-popover nav a span, .account-popover form button span { width: 1.1rem; text-align: center; }
.account-popover .menu-icon { height: 1.1rem; display: grid; flex: none; place-items: center; background: transparent; }
.account-popover .menu-icon .dashboard-icon { width: 1.05rem; height: 1.05rem; }
.account-popover .menu-icon.dashboard { color: #ffb84d; }
.account-popover .menu-icon.organizations { color: #a78bfa; }
.account-popover .menu-icon.profile { color: #ff76ad; }
.account-popover .menu-icon.settings { color: #b67cff; }
.account-popover .menu-icon.credentials { color: #ff866c; }
.account-popover .menu-icon.docs { color: #48d597; }
.account-popover .menu-icon.logout { color: #ff727b; }
.account-popover nav a:hover, .account-popover form button:hover { transform: none; color: #fff8eb; background: #202938; }
.account-popover form { display: block; padding: .45rem; border-top: 1px solid #293342; }
.dashboard-content { position: relative; z-index: 1; width: min(100% - 3.5rem, 78rem); margin: 0 auto; padding: 3rem 0 5rem; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.page-heading h1 { max-width: 52rem; font-size: clamp(2.25rem, 4vw, 3.4rem); }
.page-heading .subtitle { margin: .8rem 0 0; }
.dashboard-content > .notice { margin-bottom: 1.25rem; }
.resource-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; margin-bottom: .85rem; }
.resource-card { position: relative; min-width: 0; min-height: 7rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; align-items: start; padding: 1rem; border: 1px solid #273141; border-radius: .8rem; color: inherit; background: linear-gradient(145deg, #131a25, #101620); text-decoration: none; transition: border-color .15s ease, transform .15s ease, background .15s ease; }
.resource-card:hover { transform: translateY(-2px); border-color: #46546a; background: #17202d; }
.resource-icon, .key-icon { display: grid; place-items: center; width: 2.15rem; height: 2.15rem; border: 0; color: #ffc86e; background: transparent; }
.resource-card > .resource-icon { grid-column: 2; grid-row: 1; }
.resource-copy { min-width: 0; grid-column: 1; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; }
.resource-card small, .panel-kicker { color: #778397; font-size: .58rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.resource-card strong { margin: auto 0 .05rem; color: #f8f4ec; font-size: 1.65rem; line-height: 1; }
.resource-card em { overflow: hidden; color: #8692a5; font-size: .68rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.resource-card b { grid-column: 2; grid-row: 2; align-self: end; justify-self: center; color: #5f6c80; font-size: .8rem; }
.dashboard-columns { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(17rem, .75fr); gap: .85rem; align-items: start; }
.dashboard-rail { display: grid; gap: .85rem; }
.operational-overview { grid-template-columns: minmax(17rem, .75fr) minmax(0, 1.65fr); }
.panel { border: 1px solid #273141; border-radius: .85rem; background: #111822; overflow: hidden; }
.panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.35rem; border-bottom: 1px solid #26303f; }
.panel-header h2 { margin: .3rem 0 .25rem; color: #f5f2eb; font-size: 1.05rem; letter-spacing: -.02em; }
.panel-header p { margin: 0; max-width: 36rem; color: #8995a8; font-size: .78rem; line-height: 1.5; }
.count-badge { min-width: 1.7rem; justify-content: center; padding: .3rem .5rem; }
.panel-body { padding: .25rem 1.35rem 1.35rem; }
.empty-state { display: flex; align-items: center; gap: .9rem; margin: 1.1rem 0; padding: 1rem; border: 1px dashed #344155; border-radius: .7rem; background: #0d131c; }
.empty-state > span { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; color: #ffb84d; background: transparent; }
.empty-state strong { color: #e9e5dd; font-size: .82rem; }
.empty-state p { margin: .2rem 0 0; color: #7f8b9e; font-size: .72rem; }
.key-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .85rem; padding: 1rem 0; border-bottom: 1px solid #26303f; }
.key-row > div { min-width: 0; display: grid; gap: .25rem; }
.key-row strong { color: #e9e5dd; font-size: .78rem; }
.key-row code { color: #8995a8; font-size: .69rem; }
.key-row form { display: block; }
.key-form { margin-top: 1.15rem; padding-top: 1rem; border-top: 1px solid #26303f; }
.key-form label { margin-bottom: .2rem; }
.key-form small { color: #707d90; font-size: .68rem; }
.key-input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; }
.key-input-row input { min-width: 0; min-height: 2.9rem; }
.key-input-row button { width: auto; min-height: 2.9rem; margin: 0; padding: 0 1rem; }
.quota-help { margin: 1rem 0 0; padding: .85rem 1rem; border: 1px solid #534629; border-radius: .65rem; color: #d8c295; background: #1d1912; font-size: .74rem; }
.status-badge { padding: .35rem .55rem; text-transform: capitalize; }
.usage-list { display: grid; gap: 1rem; padding: 1.2rem 1.35rem; }
.usage-row > div { display: flex; justify-content: space-between; margin-bottom: .45rem; color: #aab4c3; font-size: .72rem; }
.usage-row strong { color: #dfe4eb; font-size: .68rem; }
progress { width: 100%; height: .35rem; display: block; overflow: hidden; border: 0; border-radius: 999px; background: #283242; }
progress::-webkit-progress-bar { background: #283242; }
progress::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg, #dc922a, #ffca6c); }
progress::-moz-progress-bar { border-radius: 999px; background: linear-gradient(90deg, #dc922a, #ffca6c); }
.text-link { display: flex; justify-content: space-between; padding: 1rem 1.35rem; border-top: 1px solid #26303f; color: #c6cfdb; font-size: .75rem; font-weight: 700; text-decoration: none; }
.text-link:hover { color: #ffca73; background: #151d29; }
.quick-start .panel-header { border-bottom: 0; padding-bottom: .5rem; }
.command-block { margin: .6rem 1.35rem .8rem; padding: .8rem; border: 1px solid #2b3748; border-radius: .55rem; background: #090e15; }
.command-block code { display: block; color: #d7dee8; font-size: .7rem; }
.quick-start > p { margin: 0; padding: 0 1.35rem 1.25rem; color: #7f8b9e; font-size: .7rem; line-height: 1.5; }
.quick-start > p a { color: #eeb052; font-weight: 700; text-decoration: none; }
.quick-start > p a:hover { color: #ffd184; text-decoration: underline; }
.permissions-panel { margin-top: .85rem; }
.permissions-panel summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.35rem; cursor: pointer; list-style: none; }
.permissions-panel summary::-webkit-details-marker { display: none; }
.permissions-panel summary > span:first-child { display: grid; gap: .25rem; }
.permissions-panel summary strong { color: #e9e5dd; font-size: .82rem; }
.permissions-panel summary > span:last-child { color: #7f8b9e; font-size: .7rem; }
.permissions-panel > code { display: block; padding: 1rem 1.35rem; border-top: 1px solid #26303f; color: #9aa6b8; font-size: .7rem; line-height: 1.65; }

.page-heading-actions { align-items: center; }
.quota-pill { flex: none; padding: .45rem .7rem; border: 1px solid #39465a; border-radius: 999px; color: #aeb8c7; background: #131a25; font-size: .72rem; font-weight: 750; }
.resource-panel + .resource-panel, .settings-stack > .panel + .panel { margin-top: .85rem; }
.form-panel { padding-top: 1.2rem; }
.inline-create { max-width: 42rem; }
.inline-create > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; }
.inline-create input { min-width: 0; min-height: 2.9rem; }
.inline-create button { width: auto; min-height: 2.9rem; margin: 0; padding: 0 1.2rem; }
/* Keep the Lives create form aligned with the compact settings controls. */
.live-create-form { max-width: 38rem; }
.live-create-form > div { gap: .5rem; }
.live-create-form input { min-height: 2.35rem; padding-inline: .8rem; border-color: #455268; border-radius: .55rem; color: #edf1f7; background: #0d141f; font-size: .76rem; font-weight: 500; }
.inline-create.live-create-form button { min-height: 2.35rem; padding: 0 .85rem; border-radius: .5rem; font-size: .72rem; font-weight: 500; }
.form-inline-error { margin: .55rem 0 0; color: #ffb8bd; font-size: .68rem; }
.form-inline-error[hidden] { display: none; }
.resource-list { padding: 0 1.35rem; }
.live-resource { border-bottom: 1px solid #26303f; }
.live-resource:last-child { border-bottom: 0; }
.managed-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid #26303f; }
.managed-row:last-child { border-bottom: 0; }
.live-resource > .managed-row { border-bottom: 0; }
.clickable-live-row { background: transparent; cursor: pointer; }
.clickable-live-row:hover, .clickable-live-row:focus-visible { background: transparent; outline: 0; }
.managed-main, .row-actions { display: flex; align-items: center; gap: .7rem; }
.managed-main { min-width: 0; }
.managed-main > div { min-width: 0; display: grid; gap: .22rem; }
.managed-main strong { overflow: hidden; color: #ece8df; font-size: .85rem; text-overflow: ellipsis; white-space: nowrap; }
.managed-main code { color: #758297; font-size: .68rem; }
.live-state { width: .62rem; height: .62rem; flex: none; border-radius: 50%; background: #667389; box-shadow: 0 0 0 .25rem rgb(102 115 137 / .1); }
.live-state.running { background: #53d795; box-shadow: 0 0 0 .25rem rgb(83 215 149 / .12); }
.live-state.paused { background: #f5bd51; box-shadow: 0 0 0 .25rem rgb(245 189 81 / .12); }
.row-actions { flex-wrap: wrap; justify-content: flex-end; }
.row-actions form { display: block; }
.row-actions button { margin: 0; }
.live-controls { gap: .38rem; }
.live-state-controls { display: flex; gap: .38rem; }
.live-state-controls form[hidden] { display: none; }
.live-control { position: relative; width: 2.9rem; min-height: 2.9rem; display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; border-radius: .7rem; color: #bdc7d6; background: #18212e; font-size: .72rem; font-weight: 750; text-decoration: none; box-shadow: inset 0 1px rgb(255 255 255 / .035); transition: color .15s ease, background .15s ease, transform .15s ease; }
.live-control:hover { transform: translateY(-1px); color: #fff9ee; background: #283448; }
.live-control[aria-expanded="true"] { color: #fff9ee; background: #2b374a; box-shadow: 0 0 0 .18rem rgb(104 121 144 / .08); }
.control-icon { width: 1.18rem; height: 1.18rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.control-icon.solid { fill: currentColor; stroke: none; }
.live-control.share-control.copied { background: #2b374a; }
.live-control.destructive { color: #ffb9bd; background: #2b171d; }
.live-control.destructive:hover { color: #ffd2d2; background: #47242d; }
.live-inline-error { margin: .7rem 0 0; padding: .55rem .7rem; border-radius: .5rem; color: #ffb8bd; background: #2c171d; font-size: .68rem; }
.live-studio { margin: 0 0 1.2rem; overflow: hidden; border: 1px solid #334052; border-radius: .85rem; background: #0c121b; box-shadow: 0 1.2rem 3rem rgb(0 0 0 / .18); }
.live-studio[hidden] { display: none; }
.live-studio > header { min-height: 3.7rem; display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; border-bottom: 1px solid #293443; background: #121a26; }
.live-studio > header > strong { color: #ece8df; font-size: .78rem; }
.studio-collapse { width: 2.35rem; min-height: 2.35rem; margin: 0; padding: 0; border: 0; color: #98a5b7; background: #1b2533; font-size: 1.2rem; }
.studio-collapse:hover { transform: none; color: #fff; background: #293649; }
.live-studio-grid { display: grid; grid-template-columns: minmax(24rem, 1fr) minmax(21rem, .9fr); min-height: 29rem; }
.scripture-controller { min-width: 0; padding: 1.1rem; border-right: 1px solid #293443; }
.controller-fields { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .7rem; align-items: end; }
.controller-fields label { display: grid; gap: .42rem; color: #98a5b7; font-size: .68rem; }
.controller-fields select, .controller-fields input { width: 100%; min-height: 2.8rem; border: 1px solid #3c495d; border-radius: .62rem; color: #e7e3dc; background: #101722; font: inherit; }
.controller-fields select { padding: 0 .7rem; }
.controller-fields input { padding: 0 2.2rem 0 2.15rem; }
.controller-fields select:focus, .controller-fields input:focus { outline: 0; border-color: #a67836; box-shadow: 0 0 0 .2rem rgb(230 157 45 / .09); }
.reference-search-wrap { position: relative; }
.reference-search-wrap > span { position: absolute; z-index: 2; top: 50%; left: .8rem; color: #738095; transform: translateY(-50%); }
.reference-suggestions { position: absolute; z-index: 10; top: calc(100% + .35rem); right: 0; left: 0; max-height: 18rem; overflow-y: auto; padding: .35rem; border: 1px solid #3a4659; border-radius: .65rem; background: #141c28; box-shadow: 0 1rem 2.5rem rgb(0 0 0 / .55); }
.reference-suggestions[hidden] { display: none; }
.reference-suggestion { width: 100%; min-height: 2.65rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; justify-items: start; margin: 0; padding: .55rem .65rem; border: 0; border-radius: .45rem; color: #dce3ed; background: transparent; font-size: .72rem; text-align: left; }
.reference-suggestion:hover, .reference-suggestion.active { transform: none; color: #fff6e5; background: #252d3d; }
.reference-suggestion small { color: #7f8b9e; font-size: .62rem; }
.reference-selection { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.25rem; margin: .85rem 0; padding: .7rem .8rem; border: 1px solid #293646; border-radius: .62rem; background: #0a1018; }
.reference-selection span { color: #efeae1; font-size: .78rem; font-weight: 600; }
.reference-selection small { color: #758297; font-size: .64rem; text-align: right; }
.studio-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.studio-button { width: 2.9rem; min-height: 2.9rem; display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; border-radius: .7rem; color: #c0cad8; background: #18212e; }
.studio-button:hover { color: #fff; background: #293649; }
.studio-button.primary { color: #1b150c; background: #e9a02d; }
.studio-button.primary:hover { color: #1b150c; background: #f3ad3d; }
.studio-button:disabled { cursor: not-allowed; opacity: .38; transform: none; }
.studio-shortcuts { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .8rem; margin: .7rem 0 .8rem; color: #768390; font-size: .6rem; }
.studio-shortcuts span { display: inline-flex; align-items: center; gap: .25rem; }
.studio-shortcuts kbd { min-width: 1.35rem; padding: .17rem .3rem; border: 1px solid #545d68; border-bottom-width: 2px; border-radius: .3rem; color: #c8d1da; background: #22272e; font: 650 .56rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }
.studio-feedback { min-height: 1.1rem; margin: .7rem 0; color: #8f9caf; font-size: .66rem; }
.studio-feedback:empty { visibility: hidden; }
.studio-actions .studio-feedback { align-self: stretch; display: inline-flex; align-items: center; min-height: 2.9rem; margin: 0 0 0 .15rem; color: #8f9caf; white-space: nowrap; }
.studio-actions .studio-feedback:empty { display: none; }
.studio-feedback.error { color: #ffacb2; }
.studio-feedback.success { color: #83d9a9; }
.studio-stack { overflow: hidden; border: 1px solid #293646; border-radius: .65rem; background: #0a1018; }
.studio-stack > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.65rem; padding: .62rem .75rem; border-bottom: 1px solid #25303e; color: #8190a4; font-size: .64rem; }
.studio-stack > div strong { color: #b7c1cf; }
.studio-stack ol { box-sizing: border-box; width: 100%; max-height: 9rem; margin: 0; padding: .4rem .5rem; overflow-y: auto; list-style: none; }
.studio-stack li { padding: .34rem .2rem; color: #aeb9c8; font-size: .67rem; }
.studio-stack li::marker { color: #5d6a7d; }
.studio-stack li.empty { list-style: none; margin: 0; padding: .7rem .25rem; color: #8190a4; }
.inline-live-preview { min-width: 0; display: grid; grid-template-rows: auto 1fr; background: #070b11; }
.inline-live-preview > div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem .85rem; border-bottom: 1px solid #293443; color: #7e8a9d; font-size: .66rem; }
.preview-actions { display: inline-flex; align-items: center; gap: .65rem; }
.preview-actions button { width: 1.8rem; min-height: 1.8rem; margin: 0; padding: 0; border: 0; border-radius: .4rem; color: #aeb8c7; background: #22272e; }
.preview-actions button:hover { transform: none; color: #fff; background: #373e47; }
.preview-actions .control-icon { width: .9rem; height: .9rem; }
.inline-live-preview a { color: #d0d8e3; font-weight: 700; text-decoration: none; }
.inline-live-preview a:hover { color: #ffd17e; }
.inline-live-preview iframe { display: block; width: 100%; height: 100%; min-height: 0; border: 0; background: #05080d; }
.live-studio-empty { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .85rem; padding: 1rem; }
.live-studio-empty > span { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; color: #a78bfa; background: transparent; }
.live-studio-empty > span .dashboard-icon { width: 1.55rem; height: 1.55rem; }
.live-studio-empty strong { color: #ece8df; font-size: .78rem; }
.live-studio-empty p { margin: .2rem 0 0; color: #7f8b9e; font-size: .68rem; }
.live-studio-empty .button-link { min-height: 2.35rem; white-space: nowrap; }
.quiet-link { display: inline-flex; align-items: center; justify-content: center; min-height: 2.4rem; padding: 0 .9rem; border: 1px solid #3a4658; border-radius: .65rem; color: #dbe2ed; font-size: .76rem; font-weight: 700; text-decoration: none; }
.quiet-link:hover { border-color: #667389; background: #202a39; color: #f9f7f1; }
.large-empty { display: grid; justify-items: center; gap: .4rem; padding: 3rem 1rem; color: #778397; text-align: center; }
.large-empty > span { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: .35rem; border-radius: 50%; color: #ffca73; background: #211b12; font-size: 1.1rem; }
.large-empty strong { color: #e9e5dd; }
.large-empty p { max-width: 28rem; margin: 0; font-size: .75rem; line-height: 1.55; }
.translation-onboarding { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; margin: .9rem 0; padding: 1rem 1.1rem; border: 1px solid #6a522b; border-radius: .8rem; background: linear-gradient(110deg, #211b11, #151821 72%); box-shadow: inset 0 1px rgb(255 255 255 / .025); }
.translation-onboarding-icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 0; color: #9b8cff; background: transparent; font-size: 1rem; }
.translation-onboarding div { min-width: 0; }
.translation-onboarding strong { color: #f4efe5; font-size: .86rem; }
.translation-onboarding p { margin: .25rem 0 0; color: #929eb0; font-size: .72rem; line-height: 1.5; }
.translation-onboarding .button-link { min-height: 2.45rem; white-space: nowrap; }
.operational-overview { align-items: stretch; }
.overview-lives { min-width: 0; }
.overview-panel-header { align-items: center; }
.overview-panel-header > a { flex: none; color: #b8c2cf; font-size: .7rem; font-weight: 750; text-decoration: none; }
.overview-panel-header > a:hover { color: #ffd17e; }
.overview-live-list { padding-block: .15rem; }
.overview-empty-action { min-height: 6rem; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .9rem; padding: 1.1rem 1.35rem; }
.overview-empty-action > span { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; color: #ffb84d; background: transparent; }
.overview-empty-action > span .dashboard-icon { width: 1.25rem; height: 1.25rem; }
.overview-empty-action strong, .overview-empty-library strong { color: #f0f3f6; font-size: .82rem; }
.overview-empty-action p, .overview-empty-library p { margin: .22rem 0 0; color: #8c959f; font-size: .7rem; line-height: 1.45; }
.overview-translation-library { position: relative; margin: 0; overflow: visible; }
.overview-translation-library > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.1rem; border-bottom: 1px solid #26303f; }
.overview-translation-library h2 { margin: .2rem 0 0; font-size: .88rem; }
.overview-translation-library header a { color: #aeb9c8; font-size: .68rem; font-weight: 750; text-decoration: none; }
.overview-translation-library header a:hover { color: #ffd17e; }
.overview-translation-library > div { padding: .45rem .7rem; }
.overview-translation-list { display: grid; }
.overview-translation-row { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .72rem .45rem; border-radius: .5rem; text-decoration: none; }
.overview-translation-row:hover { background: #373e47; }
.overview-translation-row > span:nth-child(2) { min-width: 0; display: grid; gap: .16rem; }
.overview-translation-row strong { overflow: hidden; color: #e6edf3; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.overview-translation-row small { color: #d8a84d; font: 750 .6rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.overview-translation-row b { color: #768390; font-size: .7rem; }
.overview-library-more { display: block; padding: .65rem .45rem; color: #aeb9c8; font-size: .66rem; font-weight: 700; text-decoration: none; }
.overview-library-more:hover { color: #ffd17e; }
.overview-empty-library { display: grid; gap: .35rem; }
.overview-quick-action { display: grid; gap: .45rem; margin: 0; padding: .85rem 1.1rem 1rem; border-top: 1px solid #30363d; }
.overview-quick-action label { color: #aeb7c4; font-size: .66rem; font-weight: 600; }
.overview-quick-action > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; }
.overview-quick-action input, .overview-quick-action select { width: 100%; min-width: 0; min-height: 2.55rem; padding: 0 .75rem; border: 1px solid #505762; border-radius: .55rem; color: #f0f3f6; background: #161b22; font: inherit; font-size: .72rem; }
.overview-quick-action input:focus, .overview-quick-action select:focus { border-color: #c67d16; outline: 2px solid rgb(233 154 36 / .18); outline-offset: 1px; }
.overview-quick-action button { width: auto; min-height: 2.55rem; margin: 0; padding: 0 .8rem; font-size: .7rem; }
.overview-quick-action button .control-icon { width: .9rem; height: .9rem; }
.overview-quick-action .form-inline-error { margin: 0; color: #ff9da4; font-size: .64rem; }
.overview-translation-controls { align-items: start; }
.translation-picker { position: relative; min-width: 0; }
:is(.overview-quick-action, .organization-library-add) .translation-picker-trigger { width: 100%; min-height: 2.7rem; display: flex; align-items: center; justify-content: space-between; gap: .65rem; padding: .35rem .75rem; border: 1px solid #505762; border-radius: .6rem; color: #dce2ea; background: #161b22; box-shadow: none; font-size: .72rem; font-weight: 600; text-align: left; }
:is(.overview-quick-action, .organization-library-add) .translation-picker-trigger:hover,
:is(.overview-quick-action, .organization-library-add) .translation-picker-trigger:focus-visible,
.translation-picker.open .translation-picker-trigger { transform: none; border-color: #c67d16; background: #1b212a; outline: 2px solid rgb(233 154 36 / .14); outline-offset: 1px; }
.translation-picker-trigger > span:first-child { min-width: 0; display: flex; align-items: center; gap: .6rem; }
.translation-picker-trigger > span:first-child > span:last-child { min-width: 0; display: grid; gap: .12rem; overflow: hidden; }
.translation-picker-trigger strong { overflow: hidden; color: inherit; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.translation-picker-trigger small { color: #8e99a9; font: 700 .56rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.translation-picker-placeholder-icon { color: #ffb84d; }
.translation-picker-chevron { flex: none; color: #7d8999; transition: transform .15s ease; }
.translation-picker.open .translation-picker-chevron { transform: rotate(180deg); }
.translation-picker-popover { position: absolute; z-index: 80; right: 0; bottom: calc(100% + .45rem); width: min(23rem, calc(100vw - 3rem)); padding: .55rem; border: 1px solid #444c56; border-radius: .8rem; background: #10151d; box-shadow: 0 1rem 2.8rem rgb(0 0 0 / .42); }
.translation-picker-search { display: flex; align-items: center; gap: .6rem; min-height: 2.55rem; padding: 0 .75rem; border: 1px solid #505762; border-radius: .6rem; color: #8995a6; background: #161b22; }
:is(.overview-quick-action, .organization-library-add) .translation-picker-search input { min-height: auto; padding: 0; border: 0; color: #edf0f4; background: transparent; box-shadow: none; outline: 0; }
.translation-picker-options { max-height: 17rem; margin-top: .45rem; overflow-y: auto; scrollbar-width: thin; }
.translation-picker-group + .translation-picker-group { margin-top: .35rem; padding-top: .35rem; border-top: 1px solid #2d3540; }
.translation-picker-group h3 { display: flex; align-items: center; gap: .45rem; margin: 0; padding: .4rem .55rem; color: #818c9c; font-size: .6rem; font-weight: 700; letter-spacing: .04em; }
:is(.overview-quick-action, .organization-library-add) .translation-picker-option { width: 100%; min-height: 2.8rem; display: grid; grid-template-columns: 1.35rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .45rem .55rem; border: 0; border-radius: .5rem; color: #dfe4eb; background: transparent; box-shadow: none; text-align: left; }
:is(.overview-quick-action, .organization-library-add) .translation-picker-option:hover,
:is(.overview-quick-action, .organization-library-add) .translation-picker-option:focus-visible,
:is(.overview-quick-action, .organization-library-add) .translation-picker-option.selected { transform: none; color: #fff5e3; background: #282319; outline: none; }
.translation-picker-option > span:nth-child(2) { min-width: 0; display: grid; gap: .12rem; }
:is(.overview-quick-action, .organization-library-add) .translation-picker-option:disabled { opacity:.5; cursor:not-allowed; background:transparent; }
.translation-picker-option:disabled .translation-picker-arrow { visibility:hidden; }
.translation-picker-option strong { overflow: hidden; font-size: .68rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.translation-picker-option small { color: #8d98a8; font: 700 .56rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.translation-picker-arrow { color: #ffb84d; }
.translation-picker-empty { margin: .5rem 0 .15rem; padding: .8rem; color: #8d98a8; font-size: .66rem; text-align: center; }
.translation-picker-popover[hidden],
.translation-picker-group[hidden],
.translation-picker-option[hidden],
.translation-picker-empty[hidden] { display: none; }
.overview-limit-note { display: flex; align-items: center; justify-content: space-between; color: #8c959f; font-size: .68rem; }
.overview-limit-note a { color: #ffbd52; text-decoration: none; }
.overview-limit-note a:hover { text-decoration: underline; }
.translation-chip { padding: .32rem .55rem; border: 1px solid #3a4658; border-radius: .45rem; color: #cbd3df; background: #0c121b; font: 750 .64rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.translation-library { overflow: hidden; }
.translation-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.35rem; border-bottom: 1px solid #26303f; background: #101722; }
.translation-search { min-width: 15rem; max-width: 34rem; flex: 1; display: flex; align-items: center; gap: .9rem; min-height: 2.9rem; padding: 0 1.1rem; border: 1px solid #354154; border-radius: .65rem; color: #7f8b9e; background: #0a1018; transition: border-color .15s ease, box-shadow .15s ease; }
.translation-search:focus-within { border-color: #a67836; box-shadow: 0 0 0 .2rem rgb(230 157 45 / .09); }
.translation-search input { width: 100%; min-height: 2.7rem; padding: .1rem .15rem; border: 0; outline: 0; color: #e7e3dc; background: transparent; box-shadow: none; }
.translation-search input:focus { border: 0; box-shadow: none; }
.translation-search input::-webkit-search-cancel-button { filter: invert(1); opacity: .55; }
.translation-result-count { flex: none; color: #7f8b9e; font-size: .7rem; }
.translation-tree { padding: .35rem 1.35rem .8rem; }
.translation-language { border-bottom: 1px solid #26303f; }
.translation-language:last-of-type { border-bottom: 0; }
.translation-language > summary { display: grid; grid-template-columns: 1rem 1.7rem auto auto minmax(0, 1fr); align-items: center; gap: .5rem; min-height: 3rem; cursor: pointer; list-style: none; color: #e8e4dc; }
.translation-language > summary::-webkit-details-marker { display: none; }
.translation-language > summary:hover { color: #ffd17e; }
.translation-language-chevron { color: #768398; font-size: 1.2rem; transform-origin: center; transition: transform .15s ease; }
.translation-language[open] > summary .translation-language-chevron { transform: rotate(90deg); }
.translation-language-flag { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; overflow: hidden; border: 0; background: transparent; font-size: 1rem; }
.translation-language > summary strong { overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.translation-language > summary .language-count { min-width: 1.35rem; justify-self: start; color: #f0f3f6; font-size: .68rem; font-weight: 800; }
.translation-rows { margin: 0 0 .35rem 1.45rem; border-left: 1px solid #303b4b; }
.translation-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: .6rem; min-height: 3.2rem; margin-left: 1rem; padding: .4rem .65rem; border: 1px solid transparent; border-radius: .55rem; }
.translation-row[hidden] { display: none; }
.translation-row:hover { border-color: #2c3747; background: #0e151f; }
.translation-tree-branch { position: absolute; top: 50%; left: -1.15rem; width: 1rem; border-top: 1px solid #303b4b; }
.translation-identity { min-width: 0; display: flex; align-items: baseline; gap: .6rem; }
.translation-identity strong { overflow: hidden; color: #e7e3dc; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.translation-slug { flex: none; padding: .2rem .4rem; border: 1px solid #6b542e; border-radius: .35rem; color: #f4bd62; background: #211b12; font: 700 .61rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .025em; text-transform: uppercase; }
.translation-rights { flex: none; color: #92c98b; font-size: .62rem; font-weight: 800; text-decoration: none; }
.translation-rights:hover { color: #b9eba8; text-decoration: underline; }
.translation-verified { display: inline-grid; flex: none; place-items: center; width: 1.35rem; height: 1.35rem; border: 1px solid rgb(121 201 139 / .62); border-radius: 50%; color: #8ddd9d; background: rgb(121 201 139 / .1); line-height: 1; }
.translation-verified svg { display: block; width: .82rem; height: .82rem; fill: currentColor; }
.translation-verified svg path:last-child { fill: none; stroke: #101722; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.translation-title { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }
.translation-row .translation-identity { display: block; }
.translation-provenance { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .55rem; margin: .35rem 0 .05rem; color: #8d9aae; font-size: .62rem; line-height: 1.45; }
.translation-provenance span { display: inline-flex; align-items: center; }
.translation-provenance span:not(:last-child)::after { margin-left: .55rem; color: #526174; content: "•"; }
.translation-provenance a { padding: .08rem .32rem; border: 1px solid #3d4a5b; border-radius: .3rem; color: #b9c9df; background: #202a37; font-weight: 750; text-decoration: none; }
.translation-provenance a:hover { border-color: #6380a4; color: #e0ebfb; background: #293749; text-decoration: none; }
.installed-translation .translation-identity small { width: 100%; color: #8490a2; font-size: .6rem; }
.translation-state { display: inline-flex; align-items: center; gap: .38rem; color: #8490a2; font-size: .66rem; font-weight: 700; }
.translation-state i { width: .4rem; height: .4rem; border-radius: 50%; background: #59667a; }
.translation-row form { display: block; }
.translation-identity form { flex: none; }
.translation-row button { margin: 0; }
.translation-row button:disabled { cursor: not-allowed; opacity: .42; transform: none; }
.translation-icon-button { width: 2.2rem; min-height: 2.2rem; margin: 0; padding: 0; border-color: #445165; color: #d3dbe6; background: #151e2a; font-size: 1.15rem; line-height: 1; }
.translation-icon-button:hover { border-color: #8a6a39; color: #fff2da; background: #282116; }
.translation-icon-button.remove { color: #ffb9bd; border-color: #693e49; background: #22151a; }
.translation-icon-button.remove:hover { border-color: #a55260; color: #ffd2d2; background: #3a2028; }
.translation-icon-button.remove .control-icon { width: 1rem; height: 1rem; }
.installed-translation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; padding: 1rem 1.35rem 1.25rem; }
.installed-translation { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .85rem; border: 1px solid #3c452f; border-radius: .7rem; background: linear-gradient(110deg, #25251e, #222932 75%); }
.installed-translation-flag { width: 1.8rem; text-align: center; font-size: 1.05rem; }
.installed-translation form { display: block; }
.compact-empty { padding: 1.8rem 1rem; }
.translation-quota-warning { margin: 0 0 .85rem; padding: .8rem 1rem; border: 1px solid #654d28; border-radius: .65rem; color: #d9bf8b; background: #201a11; font-size: .73rem; }
.translation-quota-warning a { color: #ffca73; font-weight: 750; }
.translation-search-empty { justify-items: center; gap: .35rem; padding: 2.5rem 1rem; color: #7f8b9e; text-align: center; }
.translation-search-empty:not([hidden]) { display: grid; }
.translation-search-empty span { color: #ffca73; font-size: 1.25rem; }
.translation-search-empty strong { color: #e7e3dc; }
.translation-search-empty p { margin: 0; font-size: .72rem; }
.permission-hint { margin: 1rem 0; padding: .85rem 1rem; border: 1px solid #3c4656; border-radius: .65rem; color: #9aa6b8; background: #111822; font-size: .75rem; }
.settings-stack { display: grid; gap: .85rem; }
.settings-credentials-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; align-items: start; }
.settings-credentials-grid > .panel { min-width: 0; }
.permission-cloud { display: flex; flex-wrap: wrap; gap: .5rem; padding: 1.25rem 1.35rem; }
.permission-cloud code { padding: .38rem .55rem; border: 1px solid #344155; border-radius: .45rem; color: #bec7d3; background: #0c121b; font-size: .68rem; }
.permission-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; padding: 1.1rem 1.35rem; }
.permission-summary-item { min-width:0; padding: .85rem 1rem; border: 1px solid #444c56; border-radius: .6rem; background: #22272e; }
.permission-summary-heading { display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; }
.permission-summary-icon { display:inline-flex; color:#8c959f; }
.permission-summary-icon .dashboard-icon { width:1.1rem; height:1.1rem; }
.permission-resource-key .permission-summary-icon { color:#3fb950; }
.permission-resource-live .permission-summary-icon { color:#ffbf50; }
.permission-resource-organization .permission-summary-icon { color:#a78bfa; }
.permission-resource-token .permission-summary-icon { color:#ff7b72; }
.permission-resource-translation .permission-summary-icon { color:#56d6aa; }
.permission-summary-level { margin-left:auto; font-size:.6rem; color:#8c959f; }
.permission-summary-actions { display:flex; flex-wrap:wrap; gap:.3rem; list-style:none; padding:0; margin:.65rem 0 0; }
.permission-summary-actions li { padding:.15rem .4rem; border-radius:.3rem; font-size:.62rem; line-height:1.5; color:#adb8c8; background:#8c959f12; }
html[data-theme="light"] .permission-summary-level,
html[data-theme="light"] .permission-summary-actions li { color:#68758a; }
.permission-summary-item strong { color: #f0f3f6; font-size: .73rem; }
.permission-summary-item small { color: #8c959f; font-size: .62rem; }
.panel-actions { display: flex; gap: .7rem; padding: 1.25rem 1.35rem; }
.button-link { display: inline-flex; align-items: center; justify-content: center; min-height: 2.7rem; padding: 0 1.1rem; border: 1px solid #c58427; border-radius: .65rem; color: #1b150c; background: #e9a02d; font-size: .8rem; font-weight: 500; text-decoration: none; }
.secret-notice { display: grid; gap: .6rem; border-color: #397757; color: #c9f7d8; background: #112d21; }
.secret-notice-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.secret-notice code { display: block; padding: .65rem; border: 1px solid #285d43; border-radius: .45rem; color: #dffbea; background: #0c2118; word-break: break-all; user-select: all; }
.copy-secret { width: auto; min-height: 2.25rem; flex: none; margin: 0; padding: 0 .75rem; border-color: #397757; color: #dffbea; background: #19432f; font-size: .72rem; }
.copy-secret:hover, .copy-secret.copied { border-color: #56d364; color: #f0fff5; background: #245d42; }
.plan-stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:.75rem; padding:1.1rem 1.35rem; }
.plan-stat { display: grid; gap:.65rem; min-width:0; padding:1rem; border:1px solid #444c56; border-radius:.65rem; background:#22272e; text-align:left; }
.plan-stat strong { color: #f0f3f6; font-size: 1.2rem; }
.plan-stat span { color: #c8d1da; font-size: .7rem; font-weight: 700; }
.plan-stat small { color: #768390; font-size: .6rem; }
.plan-stat .plan-stat-label { font-size:.75rem; }
.plan-stat-count { display:flex; align-items:baseline; flex-wrap:wrap; gap:.4rem; }
.plan-stat-count strong { font-size:1.6rem; line-height:1.1; }
.plan-stat-count > span { font-size:.75rem; font-weight:500; color:#9ba7b9; }
.plan-usage-track { height:.4rem; overflow:hidden; border-radius:1rem; background:#3a424d; }
.plan-usage-track > i { display:block; height:100%; border-radius:inherit; background:#65c9a0; }
.plan-stat.is-near-limit .plan-usage-track > i { background:#e3b341; }
.plan-stat.is-full .plan-usage-track > i { background:#ff8c93; }
.plan-stat-meta { display:flex; justify-content:space-between; gap:.5rem; }
.plan-stat-meta small { font-size:.65rem; }
html[data-theme="light"] .plan-stat { border-color:#d7dce3; background:#f6f8fa; }
html[data-theme="light"] .plan-stat strong,html[data-theme="light"] .plan-stat .plan-stat-label { color:#24292f; }
html[data-theme="light"] .plan-stat small,html[data-theme="light"] .plan-stat-count > span { color:#57606a; }
html[data-theme="light"] .plan-usage-track { background:#e2e6eb; }
.plan-actions { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: .85rem 1.15rem; border-top: 1px solid rgb(140 149 159 / .16); }
.plan-action { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.5rem; padding: .55rem .7rem; border: 1px solid transparent; border-radius: .55rem; background: transparent; color: #b6c0cb; font-size: .75rem; font-weight: 500; line-height: 1.3; text-decoration: none; transition: color .15s, background-color .15s, border-color .15s; }
.plan-action:hover { color: #f0f3f6; background: rgb(140 149 159 / .08); border-color: rgb(140 149 159 / .18); }
.plan-action:focus-visible { outline: 2px solid #e3b341; outline-offset: 2px; }
.plan-action-icon { flex: none; width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme="light"] .plan-action { color: #57606a; }
html[data-theme="light"] .plan-action:hover { color: #24292f; background: rgb(87 96 106 / .06); }
@media (max-width: 36rem) { .plan-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: .7rem; } .plan-action { font-size: .72rem; } }
.credential-scopes { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
.credential-scope { padding: .2rem .35rem; border: 1px solid #444c56; border-radius: .35rem; color: #9da7b3; background: #22272e; font: 600 .55rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }
.credential-scope.unrestricted { color: #e3b341; border-color: #6e5725; }
.scope-picker { min-width: 0; margin: .55rem 0 0; padding: .8rem; border: 1px solid #444c56; border-radius: .65rem; }
.scope-picker legend { padding: 0 .3rem; color: #dfe5ed; font-size: .72rem; font-weight: 750; }
.scope-picker > p { margin: 0 0 .65rem; color: #8c959f; font-size: .65rem; }
.scope-grid { display: grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
.scope-group { min-width: 0; border:1px solid #303b4c; border-radius:.55rem; background:#161e29; }
.scope-group-heading { min-height: 2.75rem; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .55rem; padding: .7rem; color: #dce4ef; cursor: pointer; }
.scope-group-copy { display:grid; gap:.25rem; min-width:0; }
.scope-group-copy strong { display:flex; align-items:center; gap:.4rem; }
.scope-selected-count { color:#8d9aac; font-size:.55rem; white-space:nowrap; }
.scope-group-heading strong { font-size: .68rem; }
.scope-group-heading small { color: #8d9aac; font-size: .58rem; font-weight: 600; }
.scope-group-options { display:flex; flex-wrap:wrap; gap:.4rem; padding:0 .7rem .7rem; }
.scope-option { min-width:0; display:flex; align-items:center; gap:.4rem; min-height:2.25rem; padding:.35rem .55rem; border:1px solid #444c56; border-radius:.4rem; cursor:pointer; }
.scope-option:has(input:checked) { border-color:#a67b37; background:#ffbf5010; }
.scope-option:focus-within { outline:2px solid #ffbf50; outline-offset:2px; }
.scope-option:hover { background: rgb(255 255 255 / .04); }
.scope-option input { width: 1rem; min-height: 1rem; margin: 0; padding: 0; accent-color: #2da44e; }
.scope-option strong { overflow: hidden; color: #cdd3da; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.scope-option small { overflow: hidden; color: #768390; font-size: .56rem; text-overflow: ellipsis; white-space: nowrap; }
.scope-group-heading input[type="checkbox"], .scope-option input[type="checkbox"] { box-sizing: border-box; width: .85rem; height: .85rem; min-height: .85rem; flex: 0 0 .85rem; margin: 0; padding: 0; accent-color: #ffbf50; }
.settings-form .scope-option input[type="checkbox"] { box-sizing: border-box; width: 1rem; height: 1rem; min-height: 1rem; flex: 0 0 1rem; margin: 0; padding: 0; border: 0; border-radius: .2rem; background: transparent; accent-color: #2da44e; }
.token-management { max-width: 64rem; }
.profile-layout { display: grid; gap: .85rem; }
.profile-panel { padding: 1.35rem; }
.profile-form { grid-template-columns: minmax(0, 1.6fr) minmax(14rem, .65fr); gap: 2rem; }
.profile-fields { display: grid; gap: 1rem; }
.profile-fields label { display: grid; gap: .4rem; }
.profile-fields label small { color: #8c959f; font-size: .65rem; font-weight: 500; }
.profile-fields textarea { width: 100%; }
.handle-input { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; overflow: hidden; border: 1px solid #536075; border-radius: .75rem; background: #101724; }
.handle-input:focus-within { outline: 2px solid #ffbd52; outline-offset: 2px; }
.handle-input b { padding-left: 1rem; color: #8c959f; }
.handle-input input { min-width: 0; border: 0; outline: 0; background: transparent; }
.profile-save { width: max-content; min-width: 9rem; background: #238636; border-color: #2ea043; color: #fff; }
.profile-save:hover { background: #2ea043; border-color: #3fb950; }
.token-form .key-input-row button { background: #238636; border-color: #2ea043; color: #fff; }
.token-form .key-input-row button:hover { background: #2ea043; border-color: #3fb950; }
.profile-avatar-preview { display: flex; align-items: center; flex-direction: column; gap: .7rem; color: #8c959f; font-size: .7rem; font-weight: 700; }
.profile-avatar-preview img, .profile-avatar-fallback { width: 9rem; height: 9rem; display: grid; place-items: center; object-fit: cover; overflow: hidden; border: 1px solid #545d68; border-radius: 50%; background: #22272e; }
.profile-avatar-fallback .dashboard-icon { width: 3rem; height: 3rem; }
.profile-avatar-preview strong { color: #c8d1da; font-size: .78rem; }
.danger-zone { padding: 1.35rem; border-color: #803b43; }
.danger-zone > header { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #444c56; }
.danger-zone h2 { margin: 0 0 .35rem; color: #ff7b72; font-size: 1.1rem; }
.danger-zone p { margin: 0; color: #9da7b3; font-size: .75rem; }
.danger-zone form { max-width: 38rem; }
.danger-zone label { display: grid; gap: .45rem; }
.danger-zone button { width: max-content; background: #3d2228; border-color: #803b43; color: #ffb4ba; }
.key-form-fields { display: grid; gap: .6rem; }
.key-form-fields label { display: grid; gap: .3rem; }
.key-form-fields input { min-width: 0; min-height: 2.75rem; }
.ssh-key-form > button { width: auto; justify-self: start; min-height: 2.6rem; padding: 0 1rem; }
.github-key-row { align-items: start; }
.github-key-mark { width: 2.5rem; display: grid; justify-items: center; gap: .25rem; color: #56d364; }
.github-key-mark small { padding: .12rem .3rem; border: 1px solid #545d68; border-radius: .35rem; color: #8c959f; font: 700 .55rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }
.github-key-icon { display: block; fill: currentColor; }
.preview-live-dot { width: .55rem; height: .55rem; border-radius: 50%; background: #53d795; box-shadow: 0 0 0 .24rem rgb(83 215 149 / .11); }
.dashboard-icon { width: 1.18rem; height: 1.18rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.translation-preview { display: inline-flex; align-items: center; gap: .25rem; margin: .15rem .28rem 0 0; color: #c8d1da; font: 700 .59rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.translation-preview i { font-style: normal; }
.key-resource-icon { color: #56d364; }
.ssh-key-row .key-icon { color: #56d364; border: 0; background: transparent; }
.ssh-key-row small { color: #768390; font-size: .63rem; }
.manage-control { color: #ffc65c; background: #302514; box-shadow: inset 0 0 0 1px #725426; }
.manage-control .control-icon { width: 1.3rem; height: 1.3rem; stroke-width: 2.2; }
.manage-control:hover { color: #ffda8a; background: #45341b; }
.manage-button { min-height: 2.7rem; display: inline-flex; align-items: center; gap: .45rem; padding: 0 .9rem; border: 1px solid #505762; border-radius: .625rem; color: #d9e0ea; background: #20252c; font-size: .72rem; font-weight: 700; text-decoration: none; transition: border-color .15s ease, background-color .15s ease, color .15s ease, transform .15s ease; }
.manage-button:hover { border-color: #747b84; color: #fffaf0; background: #2a3038; }
.manage-button:active { transform: translateY(1px); background: #181d23; }
.manage-button .control-icon { width: 1rem; height: 1rem; stroke-width: 2; }
.live-manage-heading { align-items: center; }
.live-manage-heading h1 { display: flex; align-items: center; gap: .8rem; }
.live-manage-heading .live-state { width: .7rem; height: .7rem; }
.live-manage-heading .live-organization-badge .dashboard-icon { width: 1.5rem; height: 1.5rem; }
.live-manage-links { display: flex; align-items: center; gap: .55rem; }
.back-link { display: inline-block; margin-bottom: 1rem; color: #8c959f; font-size: .72rem; font-weight: 700; text-decoration: none; }
.back-link:hover { color: #f0f3f6; }
.live-manage-page .live-studio { margin-bottom: 0; }
.live-manage-page .studio-collapse { display: none; }
.live-manage-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: .85rem; margin-top: .85rem; }
.live-manage-details .live-configuration, .live-manage-details .live-invites { margin-top: 0; }
.live-configuration { margin-top: .85rem; }
.compact-config-header { padding-block: .9rem; }
.live-config-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.live-config-card { min-width: 0; display: grid; align-content: start; gap: .65rem; padding: .9rem; border-right: 1px solid #444c56; }
.live-config-card:last-child { border-right: 0; }
.live-config-card > div:first-child { min-width: 0; display: flex; align-items: flex-start; gap: .7rem; }
.live-config-card > div:first-child > div { min-width: 0; flex: 1; }
.live-config-card h3 { margin: .05rem 0 .2rem; color: #f0f3f6; font-size: .86rem; }
.live-config-card p { margin: 0; color: #8c959f; font-size: .66rem; line-height: 1.45; }
.config-icon { width: 2rem; height: 2rem; flex: none; display: grid; place-items: center; color: #a891ff; background: transparent; }
.config-icon.secret { color: #4bd28a; background: transparent; }
.config-icon .dashboard-icon { width: 1rem; height: 1rem; }
.live-config-card form { min-width: 0; }
.live-config-card label { display: grid; gap: .35rem; color: #c8d1da; font-size: .68rem; }
.live-config-card input[type="text"], .live-config-card input[type="password"], .live-config-card label > input:not([type]) { width: 100%; min-width: 0; min-height: 2.65rem; border-color: #545d68; border-radius: .55rem; background: #22272e; font-size: .72rem; }
.live-config-card .config-save { width: auto; min-height: 2.35rem; justify-self: start; margin: .1rem 0 0; padding: 0 .8rem; }
.compact-config-form { gap: .3rem; }
.compact-input-action { display: grid; grid-template-columns: minmax(0, 1fr) 2.55rem; gap: .4rem; }
.icon-save-button { width: 2.55rem; min-height: 2.55rem; margin: 0; padding: 0; border: 0; border-radius: .55rem; color: #1f1608; background: #e3b341; }
.icon-save-button:hover { transform: none; color: #1f1608; background: #f0c252; }
.icon-save-button.secondary { color: #c8d1da; background: #22272e; }
.icon-save-button.secondary:hover { color: #f0f3f6; background: #373e47; }
.icon-save-button.danger { color: #ffb4ba; background: #402028; }
.icon-save-button.danger:hover { color: #ffd7da; background: #572b35; }
.icon-save-button .control-icon { width: 1rem; height: 1rem; }
.translation-config-form { min-width: 0; }
.config-help { color: #8c959f; font-size: .6rem; line-height: 1.4; }
.live-translation-picker { display: flex; flex-wrap: wrap; gap: .4rem; }
.live-translation-choice { display: inline-flex !important; align-items: center; gap: .38rem !important; padding: .45rem .55rem; border: 1px solid #444c56; border-radius: .5rem; color: #c8d1da !important; background: #22272e; font: 700 .62rem/1 ui-monospace, SFMono-Regular, Menlo, monospace !important; cursor: pointer; }
.live-translation-choice:has(input:checked) { border-color: #7a5b24; color: #ffd37c !important; background: #302713; }
.live-translation-choice input { position: absolute; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.live-translation-choice:has(input:focus-visible) { outline: 2px solid #58a6ff; outline-offset: 2px; }
.live-translation-choice:has(input:disabled) { cursor: wait; opacity: .55; }
.live-translation-flag { font-size: .8rem; }
.config-empty { color: #8c959f; font-size: .68rem; }
.config-empty a { color: #e3b341; }
.secret-state { align-self: center; flex: none; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border: 1px solid #545d68; border-radius: 50%; color: #8c959f; background: transparent; }
.secret-state .secret-lock { width: .92rem; height: .92rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.secret-state .secret-lock-open { display: none; }
.secret-state.protected { border-color: #2f6f49; color: #7ee2a8; background: rgb(83 215 149 / .08); }
.secret-state.open { color: #8c959f; background: transparent; }
.secret-state.open .secret-lock-closed { display: none; }
.secret-state.open .secret-lock-open { display: block; }
.secret-actions { display: flex; gap: .45rem; }
.secret-actions form { flex: none; }
.secret-actions button { min-height: 2.35rem; margin: 0; padding: 0 .75rem; }
.secret-actions .icon-save-button { width: 2.55rem; min-height: 2.55rem; padding: 0; }
.secret-public .secret-protected-action, .secret-protected .secret-create-action { display: none; }
.live-settings-actions { display: flex; justify-content: flex-end; padding: .8rem .9rem; border-top: 1px solid #444c56; }
.live-settings-actions .settings-primary { display: inline-flex; width: auto; min-height: 2.5rem; align-items: center; gap: .45rem; margin: 0; padding: 0 .85rem; }
.live-settings-actions .control-icon { width: 1rem; height: 1rem; }
.generated-secret { display: grid; gap: .38rem; padding: .65rem; border: 1px solid #2f6f49; border-radius: .55rem; background: #153522; }
.generated-secret[hidden] { display: none; }
.generated-secret > span { color: #7ee2a8; font-size: .62rem; font-weight: 750; }
.generated-secret > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .4rem; }
.generated-secret code { overflow: hidden; color: #dffbea; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; user-select: all; }
.generated-secret button { min-height: 2rem; margin: 0; padding: 0 .55rem; font-size: .62rem; }
.live-config-feedback { min-height: 1.05rem; margin: 0; padding: .55rem 1.15rem; border-top: 1px solid #444c56; color: #8c959f; font-size: .65rem; }
.live-config-feedback:empty { display: none; }
.live-config-feedback.success { color: #7ee2a8; }
.live-config-feedback.error { color: #ffb4ba; }

/* GitHub-inspired dark gray foundation: softer contrast without turning black. */
.dashboard-body { background: #22272e; color: #f0f3f6; }
.dashboard-shell { background: #22272e; }
.dashboard-sidebar { border-color: #444c56; background: #1c2128; }
.dashboard-topbar { border-color: #444c56; background: rgb(28 33 40 / .96); }
.panel, .resource-card { border-color: #444c56; background: #2d333b; }
.resource-card:hover { border-color: #768390; background: #343b44; }
.panel-header, .live-resource, .managed-row, .translation-toolbar, .translation-language, .sidebar-footer { border-color: #444c56; }
.translation-toolbar, .live-studio > header { background: #2d333b; }
.translation-search, .controller-fields select, .controller-fields input, .reference-selection, .studio-stack, .command-block { border-color: #545d68; background: #22272e; }
.live-studio { border-color: #545d68; background: #22272e; }
.scripture-controller { border-color: #444c56; }
.inline-live-preview { background: #1c2128; }
.side-nav a.active { background: #373e47; }

/* Fixed application toolbar with an independently collapsible navigation rail. */
.dashboard-shell { padding-top: 4.25rem; transition: grid-template-columns .18s ease; }
.dashboard-topbar { position: fixed; inset: 0 0 auto; width: 100%; display: grid; grid-template-columns: 15.5rem minmax(0, 1fr) auto; padding: 0 1rem; }
.dashboard-topbar > div { min-width: 0; }
.topbar-leading { height: 100%; gap: .6rem !important; }
.topbar-context { padding-left: 1rem; }
.topbar-context > strong, .topbar-context-link { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-brand { margin: 0; white-space: nowrap; }
.dashboard-brand b { font: inherit; }
.sidebar-toggle { width: 2.35rem; min-height: 2.35rem; flex: none; margin: 0; padding: 0; border: 0; color: #8c959f; background: transparent; }
.sidebar-toggle:hover { transform: none; color: #f0f3f6; background: #373e47; }
.sidebar-toggle .dashboard-icon { width: 1.1rem; height: 1.1rem; }
.dashboard-sidebar { top: 4.25rem; height: calc(100vh - 4.25rem); }
.dashboard-shell.sidebar-collapsed,
html[data-sidebar-collapsed="true"] .dashboard-shell { grid-template-columns: 4.75rem minmax(0, 1fr); }
.sidebar-collapsed .dashboard-sidebar,
html[data-sidebar-collapsed="true"] .dashboard-sidebar { padding-inline: .7rem; }
.sidebar-collapsed .side-nav p,
.sidebar-collapsed .side-nav a:not(.active)::after,
.sidebar-collapsed .sidebar-footer p,
html[data-sidebar-collapsed="true"] .side-nav p,
html[data-sidebar-collapsed="true"] .side-nav a:not(.active)::after,
html[data-sidebar-collapsed="true"] .sidebar-footer p { display: none; }
.sidebar-collapsed .side-nav,
html[data-sidebar-collapsed="true"] .side-nav { justify-items: center; }
.sidebar-collapsed .side-nav a,
.sidebar-collapsed .sidebar-footer a,
html[data-sidebar-collapsed="true"] .side-nav a,
html[data-sidebar-collapsed="true"] .sidebar-footer a { width: 2.9rem; min-height: 2.9rem; justify-content: center; gap: 0; margin-inline: auto; padding: 0; font-size: 0; }
.sidebar-collapsed .side-nav a > span,
.sidebar-collapsed .sidebar-footer a > span,
html[data-sidebar-collapsed="true"] .side-nav a > span,
html[data-sidebar-collapsed="true"] .sidebar-footer a > span { flex: none; margin: 0; }
.sidebar-collapsed .side-nav a.active,
html[data-sidebar-collapsed="true"] .side-nav a.active { box-shadow: none; }
.sidebar-collapsed .sidebar-footer,
html[data-sidebar-collapsed="true"] .sidebar-footer { display: grid; justify-items: center; gap: .18rem; border-top: 0; }

/* Decorative icons stay unboxed and carry the color language. Interactive
   icon buttons retain their surface so their click target remains obvious. */
.resource-card:nth-child(1) .resource-icon { color: #ffb84d; }
.resource-card:nth-child(2) .resource-icon { color: #9b8cff; }
.resource-card:nth-child(3) .resource-icon { color: #4bd28a; }
.resource-card:nth-child(4) .resource-icon { color: #ff7d9f; }
.resource-icon .dashboard-icon, .overview-empty-action .dashboard-icon,
.security-row > span .dashboard-icon, .session-row > span .dashboard-icon,
.credential-row > span .dashboard-icon { width: 1.45rem; height: 1.45rem; }
.session-row:nth-of-type(4n + 1) > span { color: #57b7ff; }
.session-row:nth-of-type(4n + 2) > span { color: #a891ff; }
.session-row:nth-of-type(4n + 3) > span { color: #4bd28a; }
.session-row:nth-of-type(4n) > span { color: #ff866c; }
.security-row > span { color: #4bd28a; }

.side-nav a[href="/dashboard"] > span { color: #ff9f5b; }
.side-nav a[href="/dashboard/reader"] > span { color: #f5c65a; }
.side-nav a[href="/dashboard/lives"] > span { color: #ffb84d; }
.side-nav a[href="/dashboard/translations"] > span { color: #9b8cff; }
.side-nav a[href="/notifications"] > span { color: #f06daf; }
.side-nav a[href="/organizations"] > span { color: #a78bfa; }
.side-nav a[href="/settings/notifications"] > span { color: #f06daf; }
.side-nav a[href="/settings/account"] > span { color: #c77dff; }
.sidebar-footer a[href="/settings/plan"] > span { color: #57b7ff; }
.sidebar-footer a[href="/docs"] > span { color: #43cba5; }
.settings-nav a[href="/settings/profile"] > span { color: #ff7d9f; }
.settings-nav a[href="/settings/account"] > span { color: #c77dff; }
.settings-nav a[href="/settings/appearance"] > span { color: #ffb84d; }
.settings-nav a[href="/settings/notifications"] > span { color: #f06daf; }
.settings-nav a[href="/settings/password"] > span { color: #4bd28a; }
.settings-nav a[href="/settings/sessions"] > span { color: #57b7ff; }
.settings-nav a[href="/settings/ssh"] > span { color: #4bd28a; }
.settings-nav a[href="/settings/credentials"] > span { color: #ff866c; }
.settings-nav a[href="/settings/plan"] > span { color: #9b8cff; }

/* Live list and manager interaction states. */
.lives-panel .live-resource { margin-inline: -1.35rem; padding-inline: 1.35rem; transition: background .15s ease; }
.lives-panel .live-resource:hover, .lives-panel .live-resource:focus-within { background: #373e47; }
.clickable-live-row:hover, .clickable-live-row:focus-visible { background: transparent; }
.live-title-line { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.live-title-line h1 { min-width: 0; }
.live-title-line [data-live-title] { cursor: pointer; }
.live-title-line [data-live-title]:focus-visible { outline: 2px solid #58a6ff; outline-offset: .2rem; border-radius: .2rem; }
.live-name-editing .live-title-line h1 { display: none; }
.live-title-tools { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .5rem; }
.live-title-tools .title-tool, .live-title-editor button { flex-shrink: 0; width: 2.75rem; height: 2.75rem; min-height: 2.75rem; margin: 0; padding: 0; }
.live-title-tools .dashboard-icon { width: 1.1rem; height: 1.1rem; }
.live-title-editor { grid-template-columns: minmax(12rem, 28rem) auto; align-items: center; gap: .5rem; margin-top: .7rem; }
.live-title-editor[hidden] { display: none; }
.live-title-line .live-title-editor { flex: 1 1 18rem; min-width: 0; margin: 0; }
.live-title-line .live-title-editor:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.live-title-editor input { min-height: 2.75rem; }
.live-title-editor button { width: 2.75rem; min-height: 2.75rem; }
.live-stats-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 .85rem; overflow: hidden; border: 1px solid #444c56; border-radius: .8rem; background: #2d333b; }
.live-stats-strip > div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .7rem; padding: .8rem 1rem; border-right: 1px solid #444c56; }
.live-stats-strip > div > span { width: 1.8rem; height: 1.8rem; display: grid; place-items: center; background: transparent; }
.live-stats-strip > div > span .dashboard-icon { width: 1.15rem; height: 1.15rem; }
.live-stats-strip > div > div { min-width: 0; display: grid; gap: .2rem; }
.live-stats-strip .viewers > span { color: #57b7ff; }
.live-stats-strip .stack > span { color: #a78bfa; }
.live-stats-strip .revision > span { color: #ff7d9f; }
.live-stats-strip .running > span { color: #4bd28a; }
.live-stats-strip > div:last-child { border-right: 0; }
.live-stats-strip small { color: #8c959f; font-size: .56rem; font-weight: 800; letter-spacing: .12em; }
.live-stats-strip strong { color: #f0f3f6; font-size: 1.05rem; }
.reference-search-wrap input { padding-right: 3.35rem; }
.reference-submit { position: absolute; z-index: 3; top: .3rem; right: .3rem; width: 2.2rem; min-height: 2.2rem; border-radius: .48rem; }
.studio-button.danger { color: #ffb4ba; background: #3d2228; }
.studio-button.danger:hover { color: #ffd7da; background: #573039; }
.studio-stack li.stack-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .55rem; margin: .18rem 0; padding: .48rem; border: 1px solid transparent; border-radius: .48rem; background: #22272e; transition: border-color .12s ease, opacity .12s ease, background .12s ease; }
.studio-stack li.stack-row:hover { background: #2d333b; }
.studio-stack li.stack-row.dragging { opacity: .45; }
.studio-stack li.stack-row.drag-over { border-color: #d29922; background: #343b44; }
.stack-handle { display: grid; place-items: center; color: #768390; cursor: grab; }
.stack-handle .control-icon { width: 1rem; height: 1rem; }
.stack-copy { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .55rem; }
.stack-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stack-copy small { color: #d8a84d; font: 750 .58rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.stack-row-actions { display: inline-flex; gap: .2rem; }
.stack-row-actions button { width: 1.75rem; min-height: 1.75rem; margin: 0; padding: 0; border: 0; border-radius: .35rem; color: #8c959f; background: transparent; font-size: .7rem; }
.stack-row-actions button:hover { transform: none; color: #fff; background: #444c56; }
.stack-row-actions button:disabled { opacity: .25; cursor: default; }
.stack-row-actions .stack-remove { color: #ff9da4; }
.stack-row-actions .control-icon { width: .9rem; height: .9rem; }
.compact-live-config-grid { grid-template-columns: 1fr; }
.compact-live-config-grid .live-config-card { border-right: 0; border-bottom: 1px solid #444c56; }
.compact-live-config-grid .live-config-card:last-child { border-bottom: 0; }
.translation-config-card { padding-block: 1rem; }
.live-secret-card { border-top: 0; }
.live-config-card > div:first-child small { display: block; margin-top: .18rem; color: #8c959f; font-size: .62rem; line-height: 1.45; }
.live-invites { margin-top: .85rem; }
.live-invite-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; padding: 1rem 1.15rem; }
.live-invite-grid form, .share-live-invite { min-width: 0; padding: .85rem .9rem; border: 1px solid #444c56; border-radius: .65rem; background: #22272e; }
.live-invite-grid form { display: grid; gap: .55rem; }
.live-invite-grid label, .share-live-invite strong { color: #f0f3f6; font-size: .78rem; font-weight: 760; }
.live-invite-grid small, .share-live-invite p { margin: 0; color: #8c959f; font-size: .68rem; line-height: 1.5; }
.live-invite-grid .key-input-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5rem; }
.live-invite-grid .key-input-row input { box-sizing:border-box; width:100%; min-height:2.3rem; height:2.3rem; padding:.45rem .65rem; border:1px solid #455066; border-radius:.5rem; background:#0c111b; color:#f2eee8; font:inherit; font-size:.75rem; }
.live-invite-grid .key-input-row .invite-action { min-height:2.3rem; border-radius:.5rem; }
.live-invite-grid .key-input-row input[aria-invalid="true"] { border-color:#f85149; }
.live-invite-grid .key-input-row input[aria-invalid="true"]:focus-visible { outline-color:#f85149; }
.live-invite-grid .live-target-error { margin:.35rem 0 0; color:#f85149; font-size:.65rem; line-height:1.5; }
.live-invite-grid .invite-action { display: inline-flex; width: max-content; min-height: 2.6rem; align-items: center; justify-content: center; gap: .38rem; margin: 0; padding: 0 .78rem; border-radius: .65rem; font-size: .69rem; line-height: 1; white-space: nowrap; }
.live-invite-grid .invite-action .control-icon { width: .95rem; height: .95rem; }
.share-live-invite { display: grid; align-content: start; gap: .55rem; }
.share-live-invite > button { width: max-content; }
.invite-link-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .45rem; margin-top: .25rem; padding: .45rem; border: 1px solid #444c56; border-radius: .5rem; background: #1c2128; }
.invite-link-result[hidden] { display: none; }
.invite-link-result code { min-width: 0; overflow: hidden; color: #adbac7; font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.invite-link-result button { margin: 0; }
.collaborator-list { display: grid; padding: 0 1.35rem 1.2rem; }
.collaborator-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .75rem 0; border-top: 1px solid #444c56; }
.collaborator-row:first-child { border-top: 0; }
.collaborator-avatar { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid #545d68; border-radius: 50%; color: #f0f3f6; background: #373e47; font-weight: 800; }
.collaborator-row > div { display: grid; min-width: 0; gap: .1rem; }
.collaborator-row small, .collaborator-empty { color: #8c959f; font-size: .68rem; }
.collaborator-row form, .collaborator-row button { margin: 0; }
.collaborator-row button { display: grid; width: 2.2rem; min-height: 2.2rem; padding: 0; place-items: center; }
.collaborator-row .control-icon { width: 1rem; height: 1rem; }
.collaborator-empty { margin: 0; padding: .8rem 0; border-top: 1px solid #444c56; }
.key-last-used { color: #3fb950 !important; }

/* Account settings use a compact, task-oriented layout independent from the
   dashboard cards. Controls intentionally stay neutral until they are the
   primary action for a form. */
.settings-hub { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 2.25rem; align-items: start; }
.settings-nav { position: sticky; top: 6rem; }
.settings-person { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; padding: .25rem .45rem 1rem; border-bottom: 1px solid #26303f; }
.settings-person .settings-avatar, .settings-person .profile-avatar-fallback { width: 2.5rem; height: 2.5rem; flex: none; }
.settings-person > span:last-child { min-width: 0; display: grid; gap: .15rem; }
.settings-person strong, .settings-person small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-person strong { color: #f2eee7; font-size: .78rem; }
.settings-person small { color: #7f8b9e; font-size: .66rem; }
.settings-nav nav { display: grid; gap: .15rem; }
.settings-nav nav > p { margin: .9rem .6rem .35rem; color: #6e7a8d; font-size: .58rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.settings-nav nav > a { min-height: 2.4rem; display: flex; align-items: center; gap: .65rem; padding: .45rem .6rem; border-radius: .5rem; color: #9ca8ba; font-size: .75rem; font-weight: 700; text-decoration: none; }
.settings-nav nav > a > span { width: 1.25rem; height: 1.25rem; display: grid; place-items: center; color: #748196; }
.settings-nav nav > a:hover { color: #f7f3eb; background: #151d29; }
.settings-nav nav > a.active { color: #fff6e6; background: #202938; box-shadow: inset 2px 0 #ffb84a; }
.settings-nav nav > a.active > span { color: #ffc768; }
.settings-view { min-width: 0; }
.settings-section-toggle.settings-button { display: none; }
.settings-heading { margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid #26303f; }
.settings-heading h1 { font-family: inherit; font-size: 1.8rem; letter-spacing: -.035em; }
.settings-heading > p:last-child { max-width: 45rem; margin: .6rem 0 0; color: #8995a8; font-size: .8rem; line-height: 1.55; }
.settings-card { padding: 1.35rem; border: 1px solid #303b4b; border-radius: .8rem; background: #111822; }
.settings-card + .settings-card { margin-top: .85rem; }
.settings-card h2 { margin: 0 0 .35rem; color: #f2eee7; font-size: 1rem; }
.settings-card > p { margin: 0 0 1rem; color: #8995a8; font-size: .75rem; line-height: 1.5; }
.settings-form { display: grid; gap: 1rem; }
.settings-form label { display: grid; gap: .4rem; }
.settings-form label > small { color: #7f8b9e; font-size: .65rem; font-weight: 500; }
.settings-form input, .settings-form textarea, .settings-form select, .settings-dialog input { width: 100%; min-height: 2.75rem; border: 1px solid #455268; border-radius: .55rem; color: #edf1f7; background: #0d141f; font: inherit; }
.settings-form input, .settings-dialog input { padding-inline: .8rem; }
.settings-form .handle-input { height: 2.75rem; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: stretch; overflow: hidden; border-radius: .55rem; }
.settings-form .handle-input b { display: grid; place-items: center; padding: 0; border-right: 1px solid #455268; line-height: 1; }
.settings-form .handle-input input { min-height: 0; height: 100%; padding: 0 .8rem; border: 0; border-radius: 0; box-shadow: none; }
.settings-form textarea { padding: .7rem .8rem; }
.settings-form select { padding: 0 .75rem; }
.settings-form > div:last-child { display: flex; }
.settings-primary, .settings-button, label.settings-button, .settings-danger { width: auto; min-height: 2.35rem; display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0 .85rem; border: 1px solid #46546a; border-radius: .5rem; color: #dce3ed; background: #1b2431; font-size: .72rem; font-weight: 500; text-decoration: none; cursor: pointer; }
.settings-primary { border-color: #c58427; color: #1b150c; background: #e9a02d; }
.settings-primary:hover { color: #1b150c; background: #f3ad3d; }
.settings-button:hover, label.settings-button:hover { transform: none; border-color: #68768c; color: #fff; background: #263244; }
.settings-danger { border-color: #8b3e48; color: #ffb4ba; background: #3a2028; }
.settings-danger:hover { transform: none; border-color: #c75a66; color: #ffe3e5; background: #542832; }
.settings-danger:disabled { cursor: not-allowed; opacity: .45; }
.notifications-heading { align-items: end; }
.notifications-heading .eyebrow { text-transform: uppercase; }
.notifications-heading .settings-button { gap: .45rem; }
.reader-heading .settings-button { gap: .5rem; }
.notifications-heading .dashboard-icon { width: 1rem; height: 1rem; color: #b987e9; }
.notification-workspace { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.notification-filters { display: grid; gap: .3rem; }
.notification-filter { min-height: 2.7rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 0 .8rem; border-radius: .55rem; color: #929daf; font-size: .75rem; font-weight: 600; text-decoration: none; }
.notification-filter > span { display: flex; align-items: center; gap: .65rem; }
.notification-filter .dashboard-icon { width: 1rem; height: 1rem; color: #7f8b9e; }
.notification-filter b { min-width: 1.55rem; padding: .15rem .4rem; border-radius: 999px; color: #cbd3df; background: #303a48; font-size: .62rem; text-align: center; }
.notification-filter:hover { color: #f3efe8; background: #252e3a; }
.notification-filter.active { color: #f3efe8; background: #2b3543; box-shadow: inset 3px 0 #e79b2d; }
.notification-filter.active .dashboard-icon { color: #f0aa42; }
.notification-inbox { padding: 0; overflow: hidden; }
.notification-inbox > header { min-height: 4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.1rem; border-bottom: 1px solid #364151; }
.notification-inbox > header h2, .notification-inbox > header p { margin: 0; }
.notification-inbox > header h2 { font-size: .9rem; }
.notification-inbox > header p { margin-top: .16rem; color: #7f8b9e; font-size: .63rem; }
.notification-mark-all { min-height: 2rem; margin: 0; padding: 0 .65rem; border: 1px solid #414d60; border-radius: .45rem; color: #b9c3d1; background: transparent; font-size: .66rem; }
.notification-list { display: grid; }
.inbox-notification-row { position: relative; display: grid; grid-template-columns: .45rem 2.25rem minmax(0, 1fr) auto 2.1rem; align-items: center; gap: .8rem; min-height: 5rem; padding: .85rem 1rem; border-bottom: 1px solid #2d3847; background: #151d28; }
.inbox-notification-row:last-child { border-bottom: 0; }
.inbox-notification-row.unread { background: #1b2532; }
.inbox-notification-row.unread[role="button"] { cursor: pointer; }
.inbox-notification-row.unread[role="button"]:focus-visible { outline: 2px solid #58a6ff; outline-offset: -2px; }
.notification-unread-marker { width: .42rem; height: .42rem; border-radius: 50%; background: transparent; }
.inbox-notification-row.unread .notification-unread-marker { background: #4d91f4; box-shadow: 0 0 0 3px rgb(77 145 244 / .11); }
.notification-kind { width: 2.15rem; height: 2.15rem; display: grid; place-items: center; border-radius: .55rem; color: #ffb84d; background: transparent; }
.notification-kind .dashboard-icon { width: 1.1rem; height: 1.1rem; }
.notification-copy { min-width: 0; display: grid; gap: .22rem; color: inherit; text-decoration: none; }
.notification-copy strong { color: #e8edf4; font-size: .76rem; }
.notification-copy p { margin: 0; overflow: hidden; color: #8f9bae; font-size: .68rem; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.notification-copy:hover strong { color: #ffbd5d; }
.inbox-notification-row time { color: #7f8b9e; font-size: .62rem; white-space: nowrap; }
.inbox-notification-row form { display: block; }
.inbox-notification-row form button { width: 2rem; min-height: 2rem; display: grid; place-items: center; margin: 0; padding: 0; border: 0; border-radius: .4rem; color: #7f8b9e; background: transparent; }
.inbox-notification-row form button:hover { color: #f3efe8; background: #2c3746; }
.inbox-notification-row form .dashboard-icon { width: 1rem; height: 1rem; }
.notification-empty { min-height: 18rem; display: grid; place-content: center; justify-items: center; padding: 2rem; text-align: center; }
.notification-empty > span { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%; color: #f06daf; background: #2b1d2a; }
.notification-empty .dashboard-icon { width: 1.35rem; height: 1.35rem; }
.notification-empty h2 { margin: .8rem 0 .25rem; font-size: .95rem; }
.notification-empty p { max-width: 24rem; margin: 0; color: #7f8b9e; font-size: .7rem; line-height: 1.5; }
.profile-settings-card { display: grid; grid-template-columns: minmax(0, 1fr) 14rem; gap: 2rem; }
.profile-photo-editor { display: flex; align-items: center; align-content: start; flex-direction: column; gap: .75rem; text-align: center; }
.profile-photo-editor .settings-avatar, .profile-photo-editor .profile-avatar-fallback { width: 9rem; height: 9rem; display: grid; place-items: center; object-fit: cover; overflow: hidden; border: 1px solid #526075; border-radius: 50%; background: #222b38; }
.profile-photo-editor .profile-avatar-fallback .dashboard-icon { width: 3rem; height: 3rem; }
.profile-photo-editor > div { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.profile-photo-editor small, .profile-photo-editor p { margin: 0; color: #7f8b9e; font-size: .63rem; line-height: 1.45; }
.profile-photo-editor p.error { color: #ff9da4; }
.compact-settings-form { max-width: 38rem; }
.danger-settings { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; border-color: #65353d; }
.danger-settings h2 { color: #ff8c93; }
.danger-settings p { margin: 0; color: #8f9bad; font-size: .72rem; }
.danger-settings > button { flex-shrink: 0; white-space: nowrap; }
.settings-dialog { width: min(100% - 2rem, 32rem); max-height: min(100dvh - 2rem, 42rem); padding: 0; border: 1px solid #445166; border-radius: .9rem; color: #f2eee7; background: #111822; box-shadow: 0 2rem 6rem rgb(0 0 0 / .65); }
.settings-dialog::backdrop { background: rgb(0 0 0 / .78); backdrop-filter: blur(5px); }
.settings-dialog form { gap: 0; }
.settings-dialog header, .settings-dialog footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.2rem; }
.settings-dialog header { border-bottom: 1px solid #303b4b; }
.settings-dialog header h2::before { content: "Permanent action"; display: block; margin-bottom: .28rem; color: #ff8c93; font-size: .57rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.settings-dialog header h2 { margin: 0; font-size: 1rem; }
.settings-dialog header button { width: 2.35rem; min-height: 2.35rem; margin: 0; padding: 0; border: 1px solid transparent; border-radius: .5rem; color: #aeb8c7; background: transparent; }
.settings-dialog header button:hover { border-color: #46546a; color: #fff; background: #202a38; }
.settings-dialog > form > p, .settings-dialog > form > label { margin: 0; padding: 1rem 1.2rem 0; color: #a7b2c2; font-size: .76rem; line-height: 1.55; }
.settings-dialog > form > label { display: block; color: #e4e9f0; font-weight: 650; }
.settings-dialog > form > label strong { display: inline-block; margin-inline: .22rem; padding: .1rem .32rem; border: 1px solid #704149; border-radius: .3rem; color: #ffd6d9; background: #2b1b23; font: 700 .76rem/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; }
.settings-dialog > form > label input { display: block; margin-top: .6rem; }
.settings-dialog > form > label input:focus { border-color: #d27b84; box-shadow: 0 0 0 .2rem rgb(210 123 132 / .14); outline: 0; }
.settings-dialog footer { justify-content: flex-end; margin-top: 1.2rem; border-top: 1px solid #303b4b; background: #101722; }
.settings-dialog [data-delete-account-submit]:disabled { cursor: not-allowed; opacity: .45; }
.preference-settings-card { width: 100%; max-width: none; padding: 0; gap: 0; box-sizing: border-box; }
.preference-group { display: grid; gap: .75rem; padding: 1.35rem; }
.preference-group + .preference-group { border-top: 1px solid #303a48; }
.preference-group h2, .preference-group p { margin: 0; }
.preference-group p { color: #7f8b9e; font-size: .7rem; }
.preference-actions { display: flex; padding: 1rem 1.35rem; border-top: 1px solid #303a48; }
.theme-picker, .language-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; max-width: 32rem; margin: 0; padding: 0; border: 0; }
.theme-option, .language-option { box-sizing: border-box; min-height: 2.5rem; display: flex !important; align-items: center; justify-content: center; gap: .55rem !important; padding: .45rem .65rem; border: 1px solid #505762; border-radius: .55rem; color: #aab5c5; background: #20252c; box-shadow: none; cursor: pointer; transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
.theme-option:hover, .language-option:hover { border-color: #747b84; color: #f5f1e9; background: #2a3038; }
.theme-option:has(input:checked), .language-option:has(input:checked) { border-color: #c67d16; color: #ffcf7e; background: #302413; box-shadow: none; }
.theme-option:focus-within, .language-option:focus-within { outline: 2px solid #ffc15a; outline-offset: 3px; }
.theme-option-icon { width: 1.4rem; height: 1.4rem; display: grid; place-items: center; color: #8491a5; }
.theme-option-icon .dashboard-icon { width: 1.25rem; height: 1.25rem; }
.theme-option.light .theme-option-icon { color: #ffb83f; }
.theme-option.dark .theme-option-icon { color: #9b87ff; }
.theme-option.system .theme-option-icon { color: #4cb8ec; }
.theme-option strong, .language-option strong { color: inherit; font-size: .74rem; }
.language-option-flag { display: grid; width: 1.5rem; height: 1.5rem; place-items: center; border: 0; background: transparent; font-size: 1.05rem; }
.notification-settings { padding: 0; overflow: hidden; }
.notification-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border-bottom: 1px solid #293443; cursor: pointer; }
.notification-row > span { display: grid; gap: .2rem; }
.notification-row strong { color: #e9edf3; font-size: .77rem; }
.notification-row small { color: #7f8b9e; font-size: .65rem; font-weight: 500; }
.notification-row input { position: absolute; opacity: 0; }
.notification-row i { width: 2.2rem; height: 1.25rem; flex: none; padding: .15rem; border-radius: 999px; background: #394354; transition: background .15s ease; }
.notification-row i::after { content: ''; display: block; width: .95rem; height: .95rem; border-radius: 50%; background: #c9d1dc; transition: transform .15s ease; }
.notification-row input:checked + i { background: #b87822; }
.notification-row input:checked + i::after { transform: translateX(.95rem); background: #fff5e3; }
.notification-settings footer, .session-list footer { padding: 1rem 1.2rem; }
.security-row, .session-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .85rem; }
.security-row > span, .session-row > span { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; color: #57b7ff; background: transparent; }
.security-row > div, .session-row > div { min-width: 0; display: grid; gap: .18rem; }
.security-row small, .session-row small { color: #7f8b9e; font-size: .65rem; }
.sign-in-provider-icon img { width: 1.65rem; height: 1.65rem; display: block; }
.sign-in-provider > div strong { color: #edf1f7; font-size: .78rem; }
.session-list { padding: 0; overflow: hidden; }
.session-list > h2 { padding: 1rem 1.2rem .7rem; }
.session-row { padding: .9rem 1.2rem; border-top: 1px solid #293443; }
.session-row em { margin-left: .4rem; color: #60d394; font-size: .58rem; font-style: normal; }
.session-agent { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-row form { display: block; }
.settings-empty { margin: 0 !important; padding: 1rem 1.2rem; border-top: 1px solid #293443; }
.settings-resource-card { padding: .25rem 1.35rem 1.35rem; }
.settings-permissions { margin-top: .85rem; }
.session-list footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid #293443; }
.session-list footer small { color: #7f8b9e; font-size: .64rem; line-height: 1.45; }

/* Keep the SSH-key controls in the settings layout, but give them the same
   compact field and action treatment used everywhere else in the dashboard. */
.settings-resource-card .empty-state { border-color: #545d68; background: #22272e; }
.settings-resource-card .key-form { max-width: 48rem; }
.settings-resource-card .key-row:last-child { padding-bottom: 0; border-bottom: 0; }
.settings-resource-card .key-form-fields { gap: .7rem; }
.settings-resource-card .key-form-fields label { gap: .35rem; color: #f0f3f6; font-size: .72rem; font-weight: 700; }
.settings-resource-card .key-form-fields input { min-height: 2.75rem; border-color: #545d68; border-radius: .55rem; color: #f0f3f6; background: #22272e; font-size: .76rem; }
.settings-resource-card .ssh-key-form > button { min-height: 2.35rem; margin-top: .2rem; padding: 0 .85rem; border-color: #c98012; border-radius: .5rem; color: #211506; background: #e99a24; font-size: .72rem; font-weight: 500; }
.settings-resource-card .ssh-key-form > button:hover { transform: none; border-color: #d99020; background: #f1aa3b; }
.settings-resource-card .key-form > small { margin-top: .05rem; color: #8c959f; font-size: .64rem; }
.credentials-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.credential-list { padding: 0; overflow: hidden; }
.credential-list > h2, .credential-editor > h2 { margin: 0; padding: 1rem 1.2rem .75rem; }
.credential-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: 1rem 1.2rem; border-top: 1px solid #293443; }
.credential-row > span { width: 2.3rem; height: 2.3rem; display: grid; place-items: center; color: #ff866c; background: transparent; }
.credential-row > div:nth-child(2) { min-width: 0; display: grid; gap: .22rem; }
.credential-row strong { color: #edf1f7; font-size: .76rem; }
.credential-row strong em { margin-left: .35rem; color: #ffbd52; font-size: .55rem; font-style: normal; text-transform: uppercase; }
.credential-row small { overflow: hidden; color: #7f8b9e; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.credential-actions { display: flex; gap: .45rem; }
.credential-actions form { display: block; }
.credential-editor { margin-top: .85rem; }
.credential-editor > p { margin: -.35rem 1.2rem 1rem; color: #7f8b9e; font-size: .67rem; }
.credential-editor > form { padding: 0 1.2rem 1.2rem; }
.credential-fields { display: grid; grid-template-columns: minmax(0, 1fr) 12rem; gap: .75rem; }
.credential-fields label { display: grid; gap: .4rem; }
.credential-editor-actions { display: flex; flex-wrap:wrap; gap: .5rem; padding-top:.85rem; border-top:1px solid #293443; }
.credential-editor .scope-picker { padding:0; border:0; }
.credential-empty { display:flex; align-items:center; gap:.75rem; padding:1rem 1.2rem; border-top:1px solid #293443; }
.credential-empty > .dashboard-icon { color:#ff866c; width:1.4rem; height:1.4rem; flex-shrink:0; }
.credential-empty p { margin:0; color:#8c959f; font-size:.68rem; }
.credential-empty small { display:block; margin-top:.25rem; color:#8c959f; font-size:.62rem; }

/* Shared button language: warm brand actions, quiet neutral controls, and
   restrained destructive actions. Icon-only controls keep a clear hit area. */
.oauth {
  border-color: #505762;
  border-radius: .85rem;
  background: #20252c;
  box-shadow: none;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.oauth:hover {
  border-color: #d38a21;
  background: #292a29;
}

.button-link,
.settings-primary,
.profile-save,
.invite-submit,
.token-form .key-input-row button,
.ssh-key-form > button,
.inline-create button,
.studio-button.primary,
.icon-save-button:not(.secondary):not(.danger) {
  border: 1px solid #c98012;
  border-radius: .625rem;
  color: #211506;
  background: #efa11a;
  box-shadow: none;
  font-weight: 500;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.button-link:hover,
.settings-primary:hover,
.profile-save:hover,
.invite-submit:hover,
.token-form .key-input-row button:hover,
.ssh-key-form > button:hover,
.inline-create button:hover,
.studio-button.primary:hover,
.icon-save-button:not(.secondary):not(.danger):hover {
  transform: none;
  border-color: #bd730c;
  color: #211506;
  background: #de9114;
  box-shadow: none;
}
.button-link:active,
.settings-primary:active,
.profile-save:active,
.invite-submit:active,
.token-form .key-input-row button:active,
.ssh-key-form > button:active,
.inline-create button:active,
.studio-button.primary:active,
.icon-save-button:not(.secondary):not(.danger):active { transform: translateY(1px); border-color: #ae6809; background: #ce7e0c; box-shadow: inset 0 1px rgb(0 0 0 / .15); }

.settings-button,
label.settings-button,
.quiet,
.quiet-link,
.live-control,
.studio-button,
.translation-icon-button,
.icon-save-button.secondary {
  border: 1px solid #505762;
  border-radius: .7rem;
  color: #d9e0ea;
  background: #20252c;
  box-shadow: none;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.settings-button:hover,
label.settings-button:hover,
.quiet:hover,
.quiet-link:hover,
.live-control:hover,
.studio-button:hover,
.translation-icon-button:hover,
.icon-save-button.secondary:hover {
  transform: none;
  border-color: #747b84;
  color: #fffaf0;
  background: #2a3038;
  box-shadow: none;
}

.settings-danger,
.danger-zone button,
button.danger,
.live-control.destructive,
.studio-button.danger,
.icon-save-button.danger {
  border: 1px solid #8e4652;
  border-radius: .7rem;
  color: #ffbec3;
  background: #3c2228;
  box-shadow: none;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.settings-danger:hover,
.danger-zone button:hover,
button.danger:hover,
.live-control.destructive:hover,
.studio-button.danger:hover,
.icon-save-button.danger:hover {
  transform: none;
  border-color: #ca6571;
  color: #ffe5e7;
  background: #512a32;
  box-shadow: none;
}

.button-link:focus-visible,
.oauth:focus-visible,
.settings-primary:focus-visible,
.settings-button:focus-visible,
label.settings-button:focus-visible,
.settings-danger:focus-visible,
.quiet:focus-visible,
.quiet-link:focus-visible,
.live-control:focus-visible,
.studio-button:focus-visible,
.translation-icon-button:focus-visible,
.icon-save-button:focus-visible,
.manage-button:focus-visible {
  outline: 2px solid #ffc15a;
  outline-offset: 3px;
}

/* Light mode uses warm paper surfaces and ink-like contrast instead of a
   literal inversion of the dark palette. Amber stays reserved for actions,
   selection, and brand accents. */
html[data-theme="light"] { color-scheme: light; background: #f6f4ef; }
html[data-theme="light"] .dashboard-body { color: #202631; background: #f6f4ef; }
html[data-theme="light"] .dashboard-shell { background: linear-gradient(135deg, #faf9f6 0, #f3f5f7 72%); }
html[data-theme="light"] .dashboard-sidebar { border-color: #d8d6d0; background: #fffdf9; box-shadow: 1px 0 0 rgb(31 41 55 / .02); }
html[data-theme="light"] .dashboard-brand { color: #242932; }
html[data-theme="light"] .dashboard-brand > span, html[data-theme="light"] .eyebrow { color: #c77912; }
html[data-theme="light"] .sidebar-toggle { color: #687385; }
html[data-theme="light"] .sidebar-toggle:hover { color: #202631; background: #f0ece4; }
html[data-theme="light"] .side-nav p, html[data-theme="light"] .settings-nav nav > p { color: #7a8493; }
html[data-theme="light"] .side-nav a, html[data-theme="light"] .sidebar-footer a { color: #586477; }
html[data-theme="light"] .side-nav a > span, html[data-theme="light"] .sidebar-footer a > span { color: #768296; }
html[data-theme="light"] .side-nav a:hover, html[data-theme="light"] .sidebar-footer a:hover { color: #202631; background: #f3efe7; }
html[data-theme="light"] .side-nav a.active { color: #202631; background: #eee9df; box-shadow: inset 3px 0 #d78a20; }
html[data-theme="light"] .side-nav a.active > span { color: #b96d09; }
html[data-theme="light"] .sidebar-footer { border-color: #d8d6d0; }
html[data-theme="light"] .sidebar-footer p { color: #697587; }

html[data-theme="light"] .dashboard-topbar { border-color: #d9dde3; background: rgb(255 255 255 / .92); box-shadow: 0 1px 8px rgb(31 41 55 / .035); }
html[data-theme="light"] .dashboard-topbar > div { color: #6a7587; }
html[data-theme="light"] .dashboard-topbar strong, html[data-theme="light"] .topbar-menu > summary { color: #28303c; }
html[data-theme="light"] .topbar-separator, html[data-theme="light"] .account-menu-chevron { color: #a1a8b3; }
html[data-theme="light"] .topbar-shortcuts > a, html[data-theme="light"] .topbar-shortcuts > .theme-toggle, html[data-theme="light"] .topbar-language-menu > summary { border-color: #d8dde5; background: #fff; }
html[data-theme="light"] .topbar-shortcuts > a:hover, html[data-theme="light"] .topbar-shortcuts > .theme-toggle:hover, html[data-theme="light"] .topbar-language-menu > summary:hover, html[data-theme="light"] .topbar-language-menu[open] > summary { border-color: #b9c1cd; background: #f4f1ea; }
html[data-theme="light"] .topbar-shortcuts > span { background: #d9dde3; }
html[data-theme="light"] .topbar-shortcuts > a.reader { color: #d88912; }
html[data-theme="light"] .topbar-shortcuts > a.live { color: #e28b0d; }
html[data-theme="light"] .topbar-shortcuts > a.translations { color: #7b64dd; }
html[data-theme="light"] .topbar-shortcuts > a.notifications { color: #dc4d91; }
html[data-theme="light"] .topbar-shortcuts > a.plan { color: #258bd6; }
html[data-theme="light"] .topbar-shortcuts > a.docs { color: #18a96e; }
html[data-theme="light"] .theme-toggle { color: #d88912; }
html[data-theme="light"] .topbar-language-menu > summary { color: #d88912; }
html[data-theme="light"] .topbar-language-popover { border-color: #d7dce3; background: #fff; box-shadow: 0 1rem 2.5rem rgb(35 42 54 / .14); }
html[data-theme="light"] .topbar-language-popover button { color: #4c5869; }
html[data-theme="light"] .topbar-language-popover button:hover, html[data-theme="light"] .topbar-language-popover button.active { color: #202631; background: #f4f1ea; }
html[data-theme="light"] .notification-dot { border-color: #fff; background: #327bdc; }
html[data-theme="light"] .user-avatar { border-color: #d2d7df; color: #566172; background: #f1f3f5; }
html[data-theme="light"] .topbar-menu > summary:hover, html[data-theme="light"] .topbar-menu[open] > summary { border-color: #d7dce3; background: #f6f3ed; }
html[data-theme="light"] .account-popover { border-color: #d7dce3; background: #fff; box-shadow: 0 1rem 2.5rem rgb(35 42 54 / .14); }
html[data-theme="light"] .account-popover > p, html[data-theme="light"] .account-popover form { border-color: #e3e6eb; color: #6b7584; }
html[data-theme="light"] .account-popover > p strong { color: #202631; }
html[data-theme="light"] .account-popover > p small { color: #697587; }
html[data-theme="light"] .signed-in-provider { color: #697587; }
html[data-theme="light"] .signed-in-provider.github img { content: url("/assets/github-mark-dark.svg"); }
html[data-theme="light"] .account-popover nav a, html[data-theme="light"] .account-popover form button { color: #4c5869; }
html[data-theme="light"] .account-popover nav a:hover, html[data-theme="light"] .account-popover form button:hover { color: #202631; background: #f4f1ea; }
html[data-theme="light"] .sign-in-provider-icon.github img { filter: invert(1); }
html[data-theme="light"] .sign-in-provider > div strong { color: #202631; }

html[data-theme="light"] .dashboard-content, html[data-theme="light"] .settings-card, html[data-theme="light"] .panel { color: #202631; }
html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] .settings-card h2,
html[data-theme="light"] .settings-person strong, html[data-theme="light"] .panel-header h2,
html[data-theme="light"] .resource-card strong, html[data-theme="light"] .managed-main strong,
html[data-theme="light"] .notification-row strong, html[data-theme="light"] .credential-row strong { color: #202631; }
html[data-theme="light"] .subtitle, html[data-theme="light"] .settings-heading > p:last-child,
html[data-theme="light"] .settings-card > p, html[data-theme="light"] .panel-header p,
html[data-theme="light"] .resource-card em, html[data-theme="light"] .settings-person small,
html[data-theme="light"] .settings-form label > small, html[data-theme="light"] .theme-option small,
html[data-theme="light"] .security-row small, html[data-theme="light"] .session-row small,
html[data-theme="light"] .credential-row small, html[data-theme="light"] .credential-editor > p { color: #68758a; }
html[data-theme="light"] .settings-heading, html[data-theme="light"] .settings-person,
html[data-theme="light"] .panel-header, html[data-theme="light"] .session-row,
html[data-theme="light"] .session-list footer, html[data-theme="light"] .credential-row,
html[data-theme="light"] .notification-row, html[data-theme="light"] .key-row { border-color: #dce1e7; }

html[data-theme="light"] .settings-card, html[data-theme="light"] .panel, html[data-theme="light"] .resource-card { border-color: #d8dde4; background: #fff; box-shadow: 0 1px 2px rgb(31 41 55 / .025); }
html[data-theme="light"] .notification-filter { color: #657185; }
html[data-theme="light"] .notification-filter:hover { color: #202631; background: #f1ede5; }
html[data-theme="light"] .notification-filter.active { color: #202631; background: #eee9df; }
html[data-theme="light"] .notification-filter b { color: #596477; background: #e5e8ed; }
html[data-theme="light"] .notification-inbox > header, html[data-theme="light"] .inbox-notification-row { border-color: #dde2e8; }
html[data-theme="light"] .inbox-notification-row { background: #fff; }
html[data-theme="light"] .inbox-notification-row.unread { background: #f8fafc; }
html[data-theme="light"] .notification-copy strong, html[data-theme="light"] .notification-inbox > header h2, html[data-theme="light"] .notification-empty h2 { color: #202631; }
html[data-theme="light"] .notification-copy p, html[data-theme="light"] .inbox-notification-row time, html[data-theme="light"] .notification-empty p, html[data-theme="light"] .notification-inbox > header p { color: #68758a; }
html[data-theme="light"] .notification-kind { color: #bd6c08; background: transparent; }
html[data-theme="light"] .notification-empty > span { color: #c8457b; background: #fff0f7; }
html[data-theme="light"] .resource-card:hover { border-color: #bbc3ce; background: #fffdf8; box-shadow: 0 .5rem 1.2rem rgb(31 41 55 / .07); }
html[data-theme="light"] .resource-card small, html[data-theme="light"] .panel-kicker { color: #758094; }
html[data-theme="light"] .resource-icon, html[data-theme="light"] .key-icon,
html[data-theme="light"] .security-row > span, html[data-theme="light"] .session-row > span,
html[data-theme="light"] .credential-row > span { border-color: transparent; background: transparent; }
html[data-theme="light"] .empty-state { border-color: #cfd5de; background: #faf9f6; }
html[data-theme="light"] .empty-state > span { color: #c46f08; background: transparent; }
html[data-theme="light"] .resource-card:nth-child(1) .resource-icon,
html[data-theme="light"] .overview-empty-action > span { color: #c46f08; }
html[data-theme="light"] .resource-card:nth-child(2) .resource-icon,
html[data-theme="light"] .translation-onboarding-icon { color: #6958d9; }
html[data-theme="light"] .resource-card:nth-child(3) .resource-icon,
html[data-theme="light"] .security-row > span { color: #178a55; }
html[data-theme="light"] .resource-card:nth-child(4) .resource-icon,
html[data-theme="light"] .credential-row > span { color: #c8456c; }
html[data-theme="light"] .session-row:nth-of-type(4n + 1) > span { color: #2679bd; }
html[data-theme="light"] .session-row:nth-of-type(4n + 2) > span { color: #6958d9; }
html[data-theme="light"] .session-row:nth-of-type(4n + 3) > span { color: #178a55; }
html[data-theme="light"] .session-row:nth-of-type(4n) > span { color: #c6533d; }
html[data-theme="light"] .side-nav a[href="/dashboard"] > span { color: #c6533d; }
html[data-theme="light"] .side-nav a[href="/dashboard/reader"] > span { color: #b8770a; }
html[data-theme="light"] .side-nav a[href="/dashboard/lives"] > span,
html[data-theme="light"] .settings-nav a[href="/settings/appearance"] > span { color: #c46f08; }
html[data-theme="light"] .side-nav a[href="/dashboard/translations"] > span,
html[data-theme="light"] .settings-nav a[href="/settings/plan"] > span { color: #6958d9; }
html[data-theme="light"] .side-nav a[href="/notifications"] > span { color: #c8456c; }
html[data-theme="light"] .side-nav a[href="/organizations"] > span { color: #6958d9; }
html[data-theme="light"] .side-nav a[href="/settings/notifications"] > span { color: #c8456c; }
html[data-theme="light"] .side-nav a[href="/settings/account"] > span,
html[data-theme="light"] .settings-nav a[href="/settings/account"] > span { color: #8c46c5; }
html[data-theme="light"] .settings-nav a[href="/settings/profile"] > span,
html[data-theme="light"] .settings-nav a[href="/settings/notifications"] > span { color: #c8456c; }
html[data-theme="light"] .settings-nav a[href="/settings/password"] > span,
html[data-theme="light"] .settings-nav a[href="/settings/ssh"] > span,
html[data-theme="light"] .sidebar-footer a[href="/docs"] > span { color: #178a55; }
html[data-theme="light"] .settings-nav a[href="/settings/sessions"] > span,
html[data-theme="light"] .sidebar-footer a[href="/settings/plan"] > span { color: #2679bd; }
html[data-theme="light"] .settings-nav a[href="/settings/credentials"] > span { color: #c6533d; }
html[data-theme="light"] .empty-state strong { color: #28303c; }
html[data-theme="light"] .empty-state p { color: #6e798a; }
html[data-theme="light"] .large-empty { color: #68758a; }
html[data-theme="light"] .large-empty > span { color: #b96808; background: transparent; }
html[data-theme="light"] .large-empty strong,
html[data-theme="light"] .translation-search-empty strong,
html[data-theme="light"] .translation-identity strong,
html[data-theme="light"] .permission-summary-item strong,
html[data-theme="light"] .overview-empty-action strong,
html[data-theme="light"] .overview-empty-library strong,
html[data-theme="light"] .overview-translation-row strong { color: #202631; }
html[data-theme="light"] .overview-empty-action p,
html[data-theme="light"] .overview-empty-library p,
html[data-theme="light"] .translation-search-empty,
html[data-theme="light"] .translation-result-count,
html[data-theme="light"] .translation-state,
html[data-theme="light"] .permission-summary-item small { color: #68758a; }
html[data-theme="light"] .overview-translation-row:hover { background: #f5f1e9; }
html[data-theme="light"] .overview-translation-library > header { border-color: #dce1e7; }
html[data-theme="light"] .overview-quick-action { border-color: #dce1e7; }
html[data-theme="light"] .overview-quick-action label { color: #596577; }
html[data-theme="light"] .overview-quick-action input,
html[data-theme="light"] .overview-quick-action select { border-color: #c8ccd2; color: #202631; background: #fff; }
html[data-theme="light"] :is(.overview-quick-action, .organization-library-add) .translation-picker-trigger { border-color: #c8ccd2; color: #303846; background: #fff; }
html[data-theme="light"] :is(.overview-quick-action, .organization-library-add) .translation-picker-trigger:hover,
html[data-theme="light"] :is(.overview-quick-action, .organization-library-add) .translation-picker-trigger:focus-visible,
html[data-theme="light"] .translation-picker.open .translation-picker-trigger { border-color: #c77912; color: #202631; background: #fffaf1; }
html[data-theme="light"] .translation-picker-popover { border-color: #cbd2dc; background: #fff; box-shadow: 0 1rem 2.5rem rgb(31 41 55 / .16); }
html[data-theme="light"] .translation-picker-search { border-color: #c8d0da; color: #68758a; background: #f7f8fa; }
html[data-theme="light"] :is(.overview-quick-action, .organization-library-add) .translation-picker-search input { color: #202631; background: transparent; }
html[data-theme="light"] .translation-picker-group + .translation-picker-group { border-color: #e2e5e9; }
html[data-theme="light"] .translation-picker-group h3,
html[data-theme="light"] .translation-picker-option small,
html[data-theme="light"] .translation-picker-empty { color: #68758a; }
html[data-theme="light"] :is(.overview-quick-action, .organization-library-add) .translation-picker-option { color: #303846; background: transparent; }
html[data-theme="light"] :is(.overview-quick-action, .organization-library-add) .translation-picker-option:hover,
html[data-theme="light"] :is(.overview-quick-action, .organization-library-add) .translation-picker-option:focus-visible,
html[data-theme="light"] :is(.overview-quick-action, .organization-library-add) .translation-picker-option.selected { color: #202631; background: #fff1d8; }
html[data-theme="light"] .overview-limit-note { color: #68758a; }
html[data-theme="light"] .overview-limit-note a { color: #a95e00; }

html[data-theme="light"] label { color: #303846; }
html[data-theme="light"] .dashboard-body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
html[data-theme="light"] .dashboard-body textarea,
html[data-theme="light"] .dashboard-body select { border-color: #bcc5d0; color: #202631; background: #fff; box-shadow: inset 0 1px 1px rgb(31 41 55 / .025); }
html[data-theme="light"] .settings-form input, html[data-theme="light"] .settings-form textarea,
html[data-theme="light"] .settings-form select, html[data-theme="light"] .settings-dialog input,
html[data-theme="light"] .key-input-row input, html[data-theme="light"] .inline-create input { border-color: #bcc5d0; color: #202631; background: #fff; box-shadow: inset 0 1px 1px rgb(31 41 55 / .025); }
html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder { color: #929baa; opacity: 1; }
html[data-theme="light"] input:focus, html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus { border-color: #c77912; outline-color: #e4a84d; box-shadow: 0 0 0 .18rem rgb(215 138 32 / .12); }
html[data-theme="light"] .settings-form .handle-input { border-color: #bcc5d0; background: #fff; }
html[data-theme="light"] .settings-form .handle-input b { border-color: #d7dce3; color: #6c7788; background: #f5f6f8; }

html[data-theme="light"] .settings-nav nav > a { color: #627084; }
html[data-theme="light"] .settings-nav nav > a > span { color: #7c889a; }
html[data-theme="light"] .settings-nav nav > a:hover { color: #202631; background: #f0ede7; }
html[data-theme="light"] .settings-nav nav > a.active { color: #202631; background: #e9edf3; box-shadow: inset 3px 0 #d78a20; }
html[data-theme="light"] .settings-nav nav > a.active > span { color: #b96d09; }

html[data-theme="light"] .preference-group + .preference-group,
html[data-theme="light"] .preference-actions { border-color: #dce1e7; }
html[data-theme="light"] .preference-group p { color: #68758a; }
html[data-theme="light"] .theme-option,
html[data-theme="light"] .language-option { border-color: #c8ccd2; color: #566172; background: #fff; box-shadow: none; }
html[data-theme="light"] .theme-option:hover,
html[data-theme="light"] .language-option:hover { border-color: #a5aab1; color: #202631; background: #f1f2f4; }
html[data-theme="light"] .theme-option:has(input:checked),
html[data-theme="light"] .language-option:has(input:checked) { border-color: #c67d16; color: #7f4800; background: #fff2dc; box-shadow: none; }

html[data-theme="light"] .translation-toolbar { border-color: #dce1e7; background: #f5f6f8; }
html[data-theme="light"] .translation-search { border-color: #c8d0da; color: #68758a; background: #fff; }
html[data-theme="light"] .translation-search input { color: #202631; background: transparent; }
html[data-theme="light"] .translation-search input::-webkit-search-cancel-button { filter: none; }
html[data-theme="light"] .translation-language { border-color: #dce1e7; }
html[data-theme="light"] .translation-language > summary { color: #303846; }
html[data-theme="light"] .translation-language > summary:hover { color: #9b5700; }
html[data-theme="light"] .translation-language > summary .language-count { color: #202631; }
html[data-theme="light"] .translation-language-chevron { color: #758094; }
html[data-theme="light"] .translation-rows,
html[data-theme="light"] .translation-tree-branch { border-color: #d2d8e0; }
html[data-theme="light"] .translation-row:hover { border-color: #d8dde4; background: #fffaf1; }
html[data-theme="light"] .translation-slug { border-color: #e7c58f; color: #8d5200; background: #fff4df; }
html[data-theme="light"] .translation-verified { border-color: rgb(38 116 58 / .46); color: #26743a; background: rgb(38 116 58 / .08); }
html[data-theme="light"] .installed-translation { border-color: #d8dde4; background: #fffdf8; }
html[data-theme="light"] .translation-quota-warning { border-color: #e4c68f; color: #735019; background: #fff6e6; }
html[data-theme="light"] .translation-quota-warning a { color: #8f5100; }
html[data-theme="light"] .permission-hint { border-color: #d4dae2; color: #596577; background: #f7f8fa; }
html[data-theme="light"] .permission-cloud code { border-color: #d4dae2; color: #4d596a; background: #f7f8fa; }
html[data-theme="light"] .permission-summary-item { border-color: #d4dae2; background: #f7f8fa; }
html[data-theme="light"] .permission-summary-item > .dashboard-icon { color: #b96808; }

html[data-theme="light"] .oauth,
html[data-theme="light"] .settings-button, html[data-theme="light"] label.settings-button,
html[data-theme="light"] .quiet, html[data-theme="light"] .quiet-link,
html[data-theme="light"] .live-control, html[data-theme="light"] .studio-button,
html[data-theme="light"] .translation-icon-button, html[data-theme="light"] .icon-save-button.secondary { border-color: #c8ccd2; color: #374151; background: #fff; box-shadow: none; }
html[data-theme="light"] .oauth:hover,
html[data-theme="light"] .settings-button:hover, html[data-theme="light"] label.settings-button:hover,
html[data-theme="light"] .quiet:hover, html[data-theme="light"] .quiet-link:hover,
html[data-theme="light"] .live-control:hover, html[data-theme="light"] .studio-button:hover,
html[data-theme="light"] .translation-icon-button:hover, html[data-theme="light"] .icon-save-button.secondary:hover { border-color: #a5aab1; color: #202631; background: #f1f2f4; box-shadow: none; }
html[data-theme="light"] .button-link,
html[data-theme="light"] .settings-primary,
html[data-theme="light"] .profile-save,
html[data-theme="light"] .invite-submit,
html[data-theme="light"] .token-form .key-input-row button,
html[data-theme="light"] .ssh-key-form > button,
html[data-theme="light"] .inline-create button,
html[data-theme="light"] .studio-button.primary,
html[data-theme="light"] .icon-save-button:not(.secondary):not(.danger) { border-color: #c67d16; color: #211506; background: #e99a24; box-shadow: none; }
html[data-theme="light"] .button-link:hover,
html[data-theme="light"] .settings-primary:hover,
html[data-theme="light"] .profile-save:hover,
html[data-theme="light"] .invite-submit:hover,
html[data-theme="light"] .token-form .key-input-row button:hover,
html[data-theme="light"] .ssh-key-form > button:hover,
html[data-theme="light"] .inline-create button:hover,
html[data-theme="light"] .studio-button.primary:hover,
html[data-theme="light"] .icon-save-button:not(.secondary):not(.danger):hover { border-color: #d99020; color: #211506; background: #f1aa3b; box-shadow: none; }
html[data-theme="light"] .settings-danger,
html[data-theme="light"] .danger-zone button,
html[data-theme="light"] button.danger,
html[data-theme="light"] .live-control.destructive,
html[data-theme="light"] .studio-button.danger,
html[data-theme="light"] .icon-save-button.danger { border-color: #efb2b8; color: #a42d39; background: #fff0f1; box-shadow: none; }
html[data-theme="light"] .settings-danger:hover,
html[data-theme="light"] .danger-zone button:hover,
html[data-theme="light"] button.danger:hover,
html[data-theme="light"] .live-control.destructive:hover,
html[data-theme="light"] .studio-button.danger:hover,
html[data-theme="light"] .icon-save-button.danger:hover { border-color: #d97580; color: #84252e; background: #ffe1e4; box-shadow: none; }
html[data-theme="light"] .notice.success { border-color: #8fc3a5; color: #175c39; background: #eaf7ef; }
html[data-theme="light"] code { color: #8b5308; }

html[data-theme="light"] .notification-row i { background: #cbd2dc; }
html[data-theme="light"] .notification-row i::after { background: #fff; box-shadow: 0 1px 2px rgb(31 41 55 / .2); }
html[data-theme="light"] .notification-row input:checked + i { background: #c77912; }
html[data-theme="light"] .scope-picker, html[data-theme="light"] .scope-grid { border-color: #d4dae2; background: #fff; }
html[data-theme="light"] .scope-group { border-color: #dce1e7; }
html[data-theme="light"] .scope-group-heading { color: #303846; background: transparent; }
html[data-theme="light"] .scope-group-heading small { color: #68758a; }
html[data-theme="light"] .scope-option small { color: #68758a; }
html[data-theme="light"] .scope-option:hover { background: #f6f8fa; }
html[data-theme="light"] .settings-form .scope-group-heading input[type="checkbox"],
html[data-theme="light"] .settings-form .scope-option input[type="checkbox"],
html[data-theme="system"] .settings-form .scope-group-heading input[type="checkbox"],
html[data-theme="system"] .settings-form .scope-option input[type="checkbox"] { width: 1rem; height: 1rem; min-height: 1rem; flex-basis: 1rem; margin: 0; padding: 0; border: 0; background: transparent; }
html[data-theme="light"] .scope-option strong { color: #303846; }
html[data-theme="light"] .scope-option small { color: #6f7a8c; }
html[data-theme="light"] .settings-dialog { border-color: #cbd2dc; color: #202631; background: #fff; box-shadow: 0 2rem 6rem rgb(31 41 55 / .22); }
html[data-theme="light"] .settings-dialog header, html[data-theme="light"] .settings-dialog footer { border-color: #e0e4e9; }
html[data-theme="light"] .settings-dialog > form > p { color: #5e697a; }
html[data-theme="light"] .settings-dialog > form > label { color: #303846; }
html[data-theme="light"] .key-form { border-color: #dce1e7; }
html[data-theme="light"] .key-form > small { color: #68758a; }
html[data-theme="light"] .profile-avatar-preview img,
html[data-theme="light"] .profile-avatar-fallback { border-color: #cbd2dc; color: #68758a; background: #f4f6f8; }
html[data-theme="light"] .profile-avatar-preview strong { color: #303846; }
html[data-theme="light"] .quota-pill,
html[data-theme="light"] .status-badge { border-color: #cbd2dc; color: #566172; background: #f7f8fa; }
html[data-theme="light"] .quota-help { border-color: #e5c58b; color: #76531b; background: #fff6e6; }
html[data-theme="light"] .usage-row > div,
html[data-theme="light"] .quick-start > p,
html[data-theme="light"] .permissions-panel summary > span:last-child { color: #68758a; }
html[data-theme="light"] .usage-row strong,
html[data-theme="light"] .permissions-panel summary strong { color: #303846; }
html[data-theme="light"] progress,
html[data-theme="light"] progress::-webkit-progress-bar { background: #e1e5eb; }
html[data-theme="light"] .text-link { border-color: #dce1e7; color: #4d596a; }
html[data-theme="light"] .text-link:hover { color: #8f5100; background: #fffaf1; }
html[data-theme="light"] .command-block { border-color: #d4dae2; background: #f7f8fa; }
html[data-theme="light"] .command-block code,
html[data-theme="light"] .permissions-panel > code { color: #4d596a; }
html[data-theme="light"] .permissions-panel > code { border-color: #dce1e7; }

html[data-theme="light"] .lives-panel .live-resource:hover,
html[data-theme="light"] .lives-panel .live-resource:focus-within { background: #fffaf1; }
html[data-theme="light"] .live-stats-strip { border-color: #d8dde4; background: #fff; }
html[data-theme="light"] .live-stats-strip > div { border-color: #dce1e7; }
html[data-theme="light"] .live-stats-strip small { color: #68758a; }
html[data-theme="light"] .live-stats-strip strong { color: #202631; }
html[data-theme="light"] .live-studio { border-color: #cbd2dc; background: #fff; }
html[data-theme="light"] .live-studio > header,
html[data-theme="light"] .translation-toolbar { border-color: #dce1e7; background: #f5f6f8; }
html[data-theme="light"] .scripture-controller { border-color: #dce1e7; }
html[data-theme="light"] .controller-fields select,
html[data-theme="light"] .controller-fields input,
html[data-theme="light"] .reference-selection,
html[data-theme="light"] .studio-stack { border-color: #cbd2dc; color: #303846; background: #fff; }
html[data-theme="light"] .studio-stack li.stack-row { color: #303846; background: #f7f8fa; }
html[data-theme="light"] .studio-stack li.stack-row:hover { background: #fffaf1; }
html[data-theme="light"] .studio-stack li.stack-row.drag-over { border-color: #c77912; background: #fff2dc; }
html[data-theme="light"] .stack-row-actions button:hover { color: #202631; background: #e9edf3; }
html[data-theme="light"] .live-secret-card,
html[data-theme="light"] .live-settings-actions,
html[data-theme="light"] .live-config-feedback,
html[data-theme="light"] .collaborator-row,
html[data-theme="light"] .collaborator-empty { border-color: #dce1e7; }
html[data-theme="light"] .live-config-card label,
html[data-theme="light"] .live-invite-grid label,
html[data-theme="light"] .share-live-invite strong { color: #303846; }
html[data-theme="light"] .live-config-card > div:first-child small,
html[data-theme="light"] .config-help,
html[data-theme="light"] .config-empty,
html[data-theme="light"] .live-invite-grid small,
html[data-theme="light"] .share-live-invite p,
html[data-theme="light"] .collaborator-row small,
html[data-theme="light"] .collaborator-empty { color: #68758a; }
html[data-theme="light"] .live-translation-choice { border-color: #cbd2dc; color: #4d596a !important; background: #fff; }
html[data-theme="light"] .live-translation-choice:has(input:checked) { border-color: #c77912; color: #7f4800 !important; background: #fff2dc; }
html[data-theme="light"] .secret-state.open { border-color: #cbd2dc; color: #566172; background: #f7f8fa; }
html[data-theme="light"] .secret-state.protected,
html[data-theme="light"] .generated-secret { border-color: #9bc9ac; color: #175c39; background: #eaf7ef; }
html[data-theme="light"] .generated-secret > span,
html[data-theme="light"] .generated-secret code { color: #175c39; }
html[data-theme="light"] .live-invite-grid form,
html[data-theme="light"] .share-live-invite { border-color: #d4dae2; background: #f7f8fa; }
html[data-theme="light"] .invite-link-result { border-color: #cbd2dc; background: #fff; }
html[data-theme="light"] .invite-link-result code { color: #4d596a; }
html[data-theme="light"] .collaborator-avatar { border-color: #cbd2dc; color: #303846; background: #eef1f4; }

@media (prefers-color-scheme: light) {
  html[data-theme="system"] { color-scheme: light; background: #f4f6f8; }
  html[data-theme="system"] .dashboard-body, html[data-theme="system"] .dashboard-shell { background: #f4f6f8; color: #172033; }
  html[data-theme="system"] .dashboard-sidebar, html[data-theme="system"] .dashboard-topbar, html[data-theme="system"] .settings-card, html[data-theme="system"] .panel { border-color: #d7dde5; background: #fff; }
  html[data-theme="system"] h1, html[data-theme="system"] h2, html[data-theme="system"] .settings-card h2 { color: #172033; }
  html[data-theme="system"] .settings-form input, html[data-theme="system"] .settings-form textarea, html[data-theme="system"] .settings-form select { border-color: #bdc7d4; color: #172033; background: #fff; }
}

@media (max-width: 85rem) {
  .resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-menu-name { display: none; }
}
@media (max-width: 70rem) {
  .dashboard-topbar { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: .75rem; }
  .topbar-shortcuts { display: none; }
  .settings-hub { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .settings-nav { position: static; min-width: 0; }
  .settings-nav nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: .15rem; padding: .5rem 0; }
  .settings-nav nav > a { min-height: 2.75rem; padding: .6rem .75rem; }
  .settings-section-ready nav { display: none; }
  .settings-section-ready.settings-section-open nav { display: grid; }
  .settings-section-toggle.settings-button { display: flex; width: 100%; min-height: 2.75rem; justify-content: space-between; text-align: left; }
  .settings-section-current { min-width: 0; display: flex; align-items: center; gap: .65rem; font-weight: 650; }
  .settings-section-current > span { flex-shrink: 0; width: 1.25rem; height: 1.25rem; color: #ffb84d; }
  .settings-section-chevron { flex-shrink: 0; transition: transform .15s ease; }
  .settings-section-open .settings-section-chevron { transform: rotate(180deg); }
  .profile-settings-card { grid-template-columns: minmax(0, 1fr); }
  .profile-photo-editor { grid-row: 1; }
  .profile-photo-editor .settings-avatar, .profile-photo-editor .profile-avatar-fallback { width: 6rem; height: 6rem; }
  .dashboard-columns { grid-template-columns: 1fr; }
  .dashboard-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-credentials-grid { grid-template-columns: 1fr; }
  .permission-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-studio-grid { grid-template-columns: 1fr; }
  .live-manage-details { grid-template-columns: 1fr; }
  .live-config-grid { grid-template-columns: 1fr; }
  .live-invite-grid { grid-template-columns: 1fr; }
  .live-config-card { border-right: 0; border-bottom: 1px solid #444c56; }
  .live-config-card:last-child { border-bottom: 0; }
  .scripture-controller { border-right: 0; border-bottom: 1px solid #293443; }
}
@media (max-width: 48rem) {
  .notification-workspace { grid-template-columns: 1fr; }
  .notification-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .notification-filter { justify-content: center; }
  .notification-filter b { display: none; }
  .settings-hub { grid-template-columns: 1fr; }
  .settings-nav { position: static; }
  .profile-settings-card { grid-template-columns: 1fr; }
  .profile-photo-editor { grid-row: 1; }
  .dashboard-shell, html[data-sidebar-collapsed="true"] .dashboard-shell { display: block; padding-top: calc(4.25rem + env(safe-area-inset-top)); }
  .dashboard-shell.sidebar-collapsed { display: block; }
  .dashboard-sidebar { position: static; width: 100%; height: auto; padding: .55rem .7rem; border-right: 0; border-bottom: 1px solid #222b38; }
  .sidebar-toggle { display: none; }
  .sidebar-collapsed .side-nav, html[data-sidebar-collapsed="true"] .side-nav { justify-items: stretch; }
  .sidebar-collapsed .side-nav a, html[data-sidebar-collapsed="true"] .side-nav a { width: auto; min-height: 2.75rem; justify-content: flex-start; margin-inline: 0; padding: .62rem .7rem; font-size: .84rem; }
  .sidebar-collapsed .sidebar-footer, html[data-sidebar-collapsed="true"] .sidebar-footer { display: none; }
  .sidebar-footer, .side-nav p { display: none; }
  .side-nav { display: flex; gap: .35rem; overflow-x: auto; padding-bottom: .1rem; scrollbar-width: none; }
  .side-nav::-webkit-scrollbar { display: none; }
  .side-nav a { flex: none; min-height: 2.75rem; padding: .55rem .7rem; }
  .dashboard-topbar { height: calc(4.25rem + env(safe-area-inset-top)); grid-template-columns: auto minmax(0, 1fr) auto; padding: env(safe-area-inset-top) 1rem 0; }
  .topbar-shortcuts { display: none; }
  .topbar-context { padding-left: .8rem; }
  .topbar-context span { display: none; }
  .plan-chip { display: none; }
  .account-menu-name { display: none; }
  .resources-menu > summary { font-size: 0; }
  .resources-menu > summary span { font-size: .8rem; }
  .dashboard-content { width: min(100% - 1.25rem, 78rem); padding: 1.5rem 0 calc(3rem + env(safe-area-inset-bottom)); }
  .page-heading { align-items: flex-start; flex-direction: column; gap: .9rem; margin-bottom: 1.35rem; }
  .page-heading-actions, .reader-heading-actions, .live-manage-links { max-width: 100%; flex-wrap: wrap; }
  .page-heading h1 { font-size: clamp(2rem, 10vw, 2.7rem); }
  .settings-heading { margin-bottom: 1.15rem; padding-bottom: 1rem; }
  .settings-heading h1 { font-size: clamp(1.65rem, 8vw, 2rem); }
  .panel-header { padding: 1rem; }
  .panel-body { padding-inline: 1rem; }
  .settings-card { padding: 1rem; }
  .settings-form input, .settings-form select, .settings-form textarea, .settings-dialog input { font-size: 1rem; }
  .settings-primary, .settings-button, label.settings-button, .settings-danger { min-height: 2.75rem; }
  .dashboard-rail { grid-template-columns: 1fr; }
}
@media (max-width: 36rem) {
  .inbox-notification-row { grid-template-columns: .35rem 2.1rem minmax(0, 1fr) 2rem; gap: .6rem; padding-inline: .7rem; }
  .inbox-notification-row time { display: none; }
  .notification-copy p { white-space: normal; }
  .settings-nav nav { grid-template-columns: 1fr; }
  .settings-nav nav > a { min-height: 2.75rem; }
  .theme-picker, .language-picker { grid-template-columns: 1fr; }
  .danger-settings, .security-row { align-items: flex-start; flex-direction: column; display: flex; }
  .auth-shell { width: min(100% - 1.25rem, 31rem); }
  .auth-card { padding: 2rem 1.4rem; }
  .resource-grid { grid-template-columns: 1fr; }
  .key-input-row { grid-template-columns: 1fr; }
  .key-input-row button { width: 100%; }
  .live-invite-grid { padding: .75rem; }
  .live-invite-grid .key-input-row { grid-template-columns: 1fr; }
  .live-invite-grid .invite-action, .share-live-invite > button { width: 100%; }
  .key-row { grid-template-columns: auto 1fr; }
  .key-row form { grid-column: 2; }
  .plan-stats-grid { grid-template-columns:minmax(0,1fr); padding:1rem; }
  .scope-grid { grid-template-columns: minmax(0, 1fr); }
  .inline-create > div { grid-template-columns: 1fr; }
  .inline-create button { width: 100%; }
  .managed-row { align-items: flex-start; flex-direction: column; }
  .row-actions { justify-content: flex-start; }
  .studio-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .studio-actions .studio-button { width: 100%; }
  .studio-actions .studio-feedback { grid-column: 1 / -1; min-height: auto; margin: 0; white-space: normal; }
  .live-control { width: 2.65rem; }
  .controller-fields { grid-template-columns: 1fr; }
  .reference-selection { align-items: flex-start; flex-direction: column; }
  .reference-selection small { text-align: left; }
  .live-studio-empty { grid-template-columns: auto minmax(0, 1fr); }
  .live-studio-empty .button-link { grid-column: 1 / -1; }
  .translation-onboarding { grid-template-columns: auto minmax(0, 1fr); }
  .translation-onboarding .button-link { grid-column: 1 / -1; }
  .overview-empty-action { grid-template-columns: auto minmax(0, 1fr); }
  .overview-quick-action > div { grid-template-columns: 1fr; }
  .overview-quick-action button { width: 100%; }
  .live-stats-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-stats-strip > div:nth-child(2) { border-right: 0; }
  .live-stats-strip > div:nth-child(-n + 2) { border-bottom: 1px solid #444c56; }
  .translation-toolbar { align-items: stretch; flex-direction: column; }
  .translation-search { min-width: 0; }
  .translation-tree { padding-inline: .75rem; }
  .translation-language > summary { grid-template-columns: 1rem 1.7rem auto auto minmax(0, 1fr); }
  .translation-row { grid-template-columns: minmax(0, 1fr) auto; }
  .translation-identity { align-items: flex-start; flex-direction: column; gap: .3rem; }
  .installed-translation-grid { grid-template-columns: 1fr; }
  .installed-translation { grid-template-columns: auto minmax(0, 1fr) auto; }
  .installed-translation .translation-state { display: none; }
  .permission-summary { grid-template-columns: 1fr; }
  .profile-form { grid-template-columns: 1fr; }
  .profile-avatar-preview { grid-row: 1; }
  .session-row, .credential-row { grid-template-columns: auto minmax(0, 1fr); gap: .65rem; padding: .85rem; }
  .session-row form, .credential-actions { grid-column: 1 / -1; width: 100%; }
  .session-row form .settings-button { width: 100%; }
  .credential-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .credential-actions form, .credential-actions .settings-button { width: 100%; }
  .settings-resource-card .ssh-key-form > button { width: 100%; }
  .page-heading-actions, .reader-heading-actions { width: 100%; }
  .page-heading-actions > .settings-button, .reader-heading-actions > .settings-button { flex: 1 1 0; }
  .settings-dialog { width: min(100% - 1.25rem, 32rem); max-height: calc(100dvh - 1.25rem); }
  .settings-dialog header, .settings-dialog footer, .settings-dialog > form > p, .settings-dialog > form > label { padding-inline: 1rem; }
  .settings-dialog footer { display: grid; grid-template-columns: 1fr 1fr; }
  .settings-dialog footer button { width: 100%; }
}

/* Focused Scripture reader */
.reader-heading { margin-bottom: 1.6rem; }
.reader-heading-actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.reader-heading .settings-button { gap: .45rem; }
.reader-layout { --reader-navigator-width: 17rem; --reader-toggle-top: 50%; position: relative; display: grid; grid-template-columns: var(--reader-navigator-width) minmax(0, 1fr); min-height: min(47rem, calc(100vh - 10rem)); overflow: hidden; border: 1px solid #303b4b; border-radius: 1rem; background: #101722; box-shadow: 0 1.5rem 4rem rgb(0 0 0 / .18); transition: grid-template-columns .22s ease; }
.reader-layout:fullscreen { width: 100%; min-height: 100dvh; border: 0; border-radius: 0; box-shadow: none; }
.reader-navigator { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 1.15rem; min-width: 0; padding: 1.2rem; border-right: 1px solid #293445; background: #111925; }
.reader-navigator-rail { display: contents; }
.reader-navigator-toggle, .reader-rail-actions button { display: grid; width: 2.35rem; min-height: 2.35rem; place-items: center; margin: 0; padding: 0; border: 1px solid #3b485b; border-radius: .55rem; color: #aeb8c7; background: #182230; }
.reader-navigator-toggle { position: absolute; z-index: 5; top: var(--reader-toggle-top); left: calc(var(--reader-navigator-width) - 1.2rem); border-radius: 999px; pointer-events: none; opacity: 0; background: #1d2430; box-shadow: 0 .45rem 1rem rgb(0 0 0 / .22); transform: translateY(-50%); transition: opacity .14s ease, background .15s ease, border-color .15s ease; }
.reader-layout.reader-navigator-toggle-visible .reader-navigator-toggle, .reader-navigator-toggle:focus-visible { pointer-events: auto; opacity: 1; }
.reader-navigator-toggle:hover, .reader-rail-actions button:hover { border-color: #d6922f; color: #ffd889; background: #252f3e; }
.reader-navigator-toggle .control-icon, .reader-rail-actions .dashboard-icon { width: 1.05rem; height: 1.05rem; }
.reader-navigator-toggle .control-icon { transform: rotate(180deg); }
.reader-rail-actions { display: none; gap: .65rem; }
.reader-navigator-controls { display: flex; flex: 1; flex-direction: column; gap: 1.15rem; min-height: 0; }
.reader-layout.reader-navigator-collapsed { --reader-navigator-width: 4rem; }
.reader-layout.reader-navigator-collapsed .reader-navigator { align-items: center; padding: .8rem; }
.reader-layout.reader-navigator-collapsed .reader-navigator-toggle .control-icon { transform: none; }
.reader-layout.reader-navigator-collapsed .reader-rail-actions { position: absolute; top: .8rem; left: .8rem; display: flex; flex-direction: column; }
.reader-layout.reader-navigator-collapsed .reader-navigator-controls { display: none; }
.reader-navigator label, .reader-translation { display: grid; gap: .45rem; color: #aeb8c7; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.reader-navigator select, .reader-navigator input, .reader-search input { width: 100%; min-height: 2.7rem; border: 1px solid #3b485b; border-radius: .6rem; background: #0b111a; color: #f5f1e9; font: inherit; }
.reader-translation-pair { display: grid; gap: .55rem; }
.reader-swap { width: 2.35rem; min-height: 2.35rem; justify-self: center; display: grid; place-items: center; margin: 0; padding: 0; border: 1px solid #46546a; border-radius: 999px; color: #b9c5d4; background: #182230; }
.reader-swap:hover:not(:disabled) { border-color: #d6922f; color: #ffd889; background: #252f3e; }
.reader-swap:disabled { cursor: not-allowed; opacity: .45; }
.reader-swap .control-icon { width: 1rem; height: 1rem; }
.reader-find small { color: #758196; font-size: .68rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.reader-reference-wrap { position: relative; }
.reader-reference-wrap input { padding-right: 3rem; }
.reader-reference-submit { position: absolute; z-index: 2; top: 50%; right: .35rem; width: 2.1rem; min-height: 2.1rem; display: grid; place-items: center; margin: 0; padding: 0; border: 0; border-radius: .45rem; color: #c5cfdb; background: transparent; transform: translateY(-50%); }
.reader-reference-submit:hover { color: #ffe0a7; background: #263142; }
.reader-reference-submit .control-icon { width: .95rem; height: .95rem; }
.reader-reference-wrap .reference-suggestions { text-transform: none; letter-spacing: 0; }
.reader-book-picker { display: grid; gap: .15rem; max-height: 20rem; overflow: auto; padding-right: .3rem; }
.reader-book-picker button { width: 100%; min-height: 2.25rem; justify-content: flex-start; margin: 0; padding: .35rem .6rem; border-color: transparent; border-radius: .45rem; background: transparent; color: #bdc7d4; font-size: .8rem; }
.reader-book-picker button:hover, .reader-book-picker button.active { border-color: #48566b; background: #202a39; color: #ffe0a7; }
.reader-chapters { border-top: 1px solid #2a3545; padding-top: .9rem; color: #d8dee7; font-size: .78rem; }
.reader-chapters > div { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .55rem; }
.reader-chapters button { width: 2.05rem; min-height: 2rem; margin: 0; padding: 0; border-color: #354155; border-radius: .4rem; background: #182230; color: #bdc7d4; font-size: .72rem; }
.reader-chapters button.active, .reader-chapters button:hover { border-color: #d6922f; background: #f0a634; color: #171109; }
.reader-content { position: relative; z-index: 1; min-width: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.reader-panes { position: relative; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.reader-layout.reader-comparing .reader-panes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reader-pane-swap { position: absolute; z-index: 3; top: 1.15rem; left: 50%; display: none; transform: translateX(-50%); }
.reader-layout.reader-comparing .reader-pane-swap { display: grid; }
.reader-pane { min-width: 0; background: radial-gradient(circle at 50% 0, rgb(244 171 66 / .07), transparent 28rem), #10151e; }
.reader-secondary-pane { border-left: 1px solid #293445; }
.reader-toolbar.reader-primary-toolbar, .reader-toolbar.reader-secondary-toolbar { grid-template-columns: minmax(0, 1fr); }
.reader-navigation { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) 2.4rem; align-items: center; gap: .75rem; padding: .7rem 1.25rem; border-bottom: 1px solid #293445; background: #111925; }
.reader-navigation button { width: 2.4rem; min-height: 2.4rem; margin: 0; padding: 0; border: 1px solid #3c485a; border-radius: .55rem; color: #e2e7ed; background: transparent; font-size: 1.1rem; }
.reader-navigation button:hover { background: #202b3b; }
.reader-toolbar { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem; align-items: center; gap: 1rem; min-height: 5rem; padding: .8rem 1.25rem; border-bottom: 1px solid #293445; }
.reader-toolbar button { width: 2.4rem; min-height: 2.4rem; margin: 0; padding: 0; border-color: #3c485a; border-radius: .55rem; background: transparent; color: #e2e7ed; font-size: 1.1rem; }
.reader-toolbar button:hover { background: #202b3b; }
.reader-toolbar div { min-width: 0; text-align: center; }
.reader-toolbar strong { display: block; color: #fff6e6; font-family: Iowan Old Style, Georgia, serif; font-size: 1.45rem; }
.reader-toolbar span { display: block; overflow: hidden; margin-top: .18rem; color: #8491a4; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.reader-search { width: 100%; margin: 0; padding: 0; border: 0; }
.reader-search label { color: #aeb8c7; font-size: .75rem; }
.reader-search > div { display: flex; gap: .45rem; width: 100%; }
.reader-search input { flex: 1 1 auto; min-width: 0; min-height: 2.4rem; padding-inline: .75rem; }
.reader-search button { width: auto; min-height: 2.4rem; margin: 0; padding: 0 .85rem; border-radius: .55rem; font-size: .78rem; }
.reader-search button[type="submit"] { border-color: #d6922f; color: #171109; background: #f0a634; }
.reader-search button[type="submit"]:hover { border-color: #ffbf52; background: #ffb842; }
.reader-search .reader-search-clear { border-color: #48576b; color: #c8d1dd; background: #1a2432; }
.reader-search .reader-search-clear[hidden] { display: none; }
.reader-feedback { min-height: 1.2rem; margin: .55rem 1.5rem 0; color: #8fa1b7; font-size: .78rem; }.reader-feedback.error { color: #ffb5ba; }
.reader-scroll-jump { position: fixed; z-index: 25; right: 1.4rem; bottom: 1.4rem; display: grid; gap: .45rem; }
.reader-scroll-jump[hidden], .reader-scroll-jump button[hidden] { display: none; }
.reader-scroll-jump button { width: 2.55rem; min-height: 2.55rem; display: grid; place-items: center; margin: 0; padding: 0; border: 1px solid #435167; border-radius: 999px; color: #e5ebf2; background: rgb(24 33 46 / .94); box-shadow: 0 .45rem 1rem rgb(0 0 0 / .25); line-height: 1; }
.reader-scroll-jump .control-icon { width: 1.1rem; height: 1.1rem; }
.reader-scroll-jump button:hover { border-color: #d6922f; color: #ffe0a7; background: #252f3e; }
.reader-verses { width: min(100% - 3rem, 47rem); min-height: 28rem; margin: 0 auto; padding: 2.75rem 0 5rem; font-family: Iowan Old Style, Georgia, serif; font-size: clamp(1.1rem, 1.8vw, 1.35rem); line-height: 1.9; }
.reader-verses p { position: relative; margin: 0 0 1rem; padding: .08rem .45rem; border-radius: .35rem; color: #e8e4dc; transition: background .18s ease, color .18s ease, box-shadow .18s ease; }.reader-verses p:hover { background: rgb(245 182 70 / .08); box-shadow: inset .16rem 0 rgb(245 182 70 / .7); color: #fffaf0; }.reader-verses sup { margin-right: .38rem; color: #f5b646; font-family: Inter, sans-serif; font-size: .58em; font-weight: 800; vertical-align: super; }
.reader-verses p.reader-verse-current { background: rgb(245 182 70 / .12); }
.reader-verses p.reader-verse-current::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: .18rem; border-radius: .35rem; background: #f5b646; }
.reader-verses p.reader-verse-copied { animation: reader-verse-copied 1.5s ease-out; }
@keyframes reader-verse-copied { 0% { background: rgb(245 182 70 / .28); box-shadow: inset .16rem 0 #f5b646; } 100% { background: transparent; box-shadow: inset .16rem 0 transparent; } }
.reader-welcome, .reader-loading, .reader-empty { display: grid; place-items: center; align-content: center; min-height: 22rem; text-align: center; color: #9ba7b8; }.reader-welcome span, .reader-empty > span { color: #f5b646; font-size: 2rem; }.reader-welcome h2, .reader-empty strong { margin: .8rem 0 .35rem; color: #eee8de; font-family: Iowan Old Style, Georgia, serif; font-size: 1.55rem; }.reader-welcome p, .reader-empty p { margin: 0; line-height: 1.55; }.reader-empty { min-height: 28rem; border: 1px dashed #3d4959; border-radius: 1rem; }.reader-empty .button-link { margin-top: 1rem; }
html[data-theme="light"] .reader-layout { border-color: #d4dae2; background: #fff; box-shadow: 0 1.2rem 3rem rgb(35 42 54 / .09); }
html[data-theme="light"] .reader-navigator { border-color: #dce1e7; background: #f8f7f3; }
html[data-theme="light"] .reader-navigator-toggle { border-color: #cbd2dc; color: #536174; background: #fff; box-shadow: 0 .4rem .9rem rgb(35 42 54 / .13); }
html[data-theme="light"] .reader-navigator-toggle:hover, html[data-theme="light"] .reader-rail-actions button:hover { border-color: #c97e16; color: #9d5c06; background: #fff7e9; }
html[data-theme="light"] .reader-rail-actions button { border-color: #d3d9e1; color: #667489; background: #fff; }
html[data-theme="light"] .reader-navigator label, html[data-theme="light"] .reader-translation { color: #627086; }
html[data-theme="light"] .reader-navigator select, html[data-theme="light"] .reader-navigator input, html[data-theme="light"] .reader-search input { border-color: #c8d0da; color: #252c37; background: #fff; }
html[data-theme="light"] .reader-navigator select:focus, html[data-theme="light"] .reader-navigator input:focus, html[data-theme="light"] .reader-search input:focus { border-color: #c97e16; box-shadow: 0 0 0 .2rem rgb(201 126 22 / .12); outline: 0; }
html[data-theme="light"] .reader-swap { border-color: #ccd3dd; color: #617086; background: #f1f3f6; }
html[data-theme="light"] .reader-swap:hover:not(:disabled) { border-color: #c97e16; color: #9d5c06; background: #fff4df; }
html[data-theme="light"] .reader-find small { color: #788497; }
html[data-theme="light"] .reader-reference-submit { color: #718096; }
html[data-theme="light"] .reader-reference-submit:hover { color: #9d5c06; background: #fff1d7; }
html[data-theme="light"] .reader-reference-wrap .reference-suggestions { border-color: #cbd3dd; background: #fff; box-shadow: 0 .8rem 2rem rgb(35 42 54 / .14); }
html[data-theme="light"] .reader-book-picker button { color: #516075; }
html[data-theme="light"] .reader-book-picker button:hover, html[data-theme="light"] .reader-book-picker button.active { border-color: #c7d0dc; background: #eceff4; color: #9d5c06; }
html[data-theme="light"] .reader-chapters { border-color: #d9dee5; color: #333d4c; }
html[data-theme="light"] .reader-chapters button { border-color: #ccd4df; background: #fff; color: #526176; }
html[data-theme="light"] .reader-chapters button.active, html[data-theme="light"] .reader-chapters button:hover { border-color: #c97e16; background: #efaa3a; color: #2a1a08; }
html[data-theme="light"] .reader-navigation { border-color: #dce2e9; background: #f8f9fa; }
html[data-theme="light"] .reader-navigation button { border-color: #cbd4df; color: #4e5d70; background: #fff; }
html[data-theme="light"] .reader-navigation button:hover { border-color: #afbac8; background: #f0f3f6; }
html[data-theme="light"] .reader-pane { background: radial-gradient(circle at 50% 0, rgb(218 151 38 / .08), transparent 30rem), #fffefa; }
html[data-theme="light"] .reader-secondary-pane { border-color: #dce2e9; }
html[data-theme="light"] .reader-toolbar { border-color: #dce2e9; }
html[data-theme="light"] .reader-toolbar strong { color: #292720; }
html[data-theme="light"] .reader-toolbar span { color: #6a788b; }
html[data-theme="light"] .reader-feedback { color: #627086; }
html[data-theme="light"] .reader-feedback.error { color: #b33c46; }
html[data-theme="light"] .reader-scroll-jump button { border-color: #c9d1dc; color: #59687a; background: rgb(255 255 255 / .94); box-shadow: 0 .45rem 1rem rgb(35 42 54 / .16); }
html[data-theme="light"] .reader-scroll-jump button:hover { border-color: #c97e16; color: #9d5c06; background: #fff7e9; }
html[data-theme="light"] .reader-verses p { color: #2b2924; }
html[data-theme="light"] .reader-verses p:hover { background: rgb(223 161 49 / .12); box-shadow: inset .16rem 0 rgb(191 118 16 / .72); color: #171611; }
html[data-theme="light"] .reader-verses sup { color: #b76e0b; }
html[data-theme="light"] .reader-verses p.reader-verse-current { background: rgb(223 161 49 / .16); }
html[data-theme="light"] .reader-verses p.reader-verse-current::before { background: #b76e0b; }
html[data-theme="light"] .reader-welcome, html[data-theme="light"] .reader-loading, html[data-theme="light"] .reader-empty { color: #69778a; }
html[data-theme="light"] .reader-welcome h2, html[data-theme="light"] .reader-empty strong { color: #2b3038; }
html[data-theme="light"] .reader-empty { border-color: #cbd3dc; background: #faf9f5; }
html[data-theme="light"] .reader-verses p.reader-verse-copied { animation-name: reader-verse-copied-light; }
@keyframes reader-verse-copied-light { 0% { background: rgb(238 174 55 / .27); box-shadow: inset .16rem 0 #c97e16; } 100% { background: transparent; box-shadow: inset .16rem 0 transparent; } }
@media (min-width: 53rem) { .reader-layout.reader-comparing .reader-verses { width: min(100% - 2rem, 34rem); padding-inline: 0; font-size: clamp(1rem, 1.35vw, 1.2rem); } }
@media (max-width: 52rem) { .reader-layout, .reader-layout.reader-navigator-collapsed { grid-template-columns: 1fr; min-height: auto; }.reader-navigator { gap: .85rem; padding: .95rem; border-right: 0; border-bottom: 1px solid #293445; }.reader-navigator-toggle { top: .75rem; right: .75rem; left: auto; pointer-events: auto; opacity: 1; transform: none; }.reader-layout.reader-navigator-collapsed .reader-navigator { align-items: stretch; min-height: 4.1rem; }.reader-layout.reader-navigator-collapsed .reader-navigator-toggle .control-icon { transform: none; }.reader-layout.reader-navigator-collapsed .reader-rail-actions { position: static; flex-direction: row; padding-right: 3rem; }.reader-layout.reader-comparing .reader-panes { grid-template-columns: 1fr; }.reader-pane-swap { top: 1rem; left: auto; right: 1rem; transform: none; }.reader-secondary-pane { border-top: 1px solid #293445; border-left: 0; }.reader-book-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 10rem; }.reader-navigation { gap: .5rem; padding-inline: .85rem; }.reader-search label { display: none; }.reader-feedback { margin-inline: .85rem; }.reader-verses { width: min(100% - 2rem, 47rem); padding-top: 2rem; }.reader-scroll-jump { right: max(.85rem, env(safe-area-inset-right)); bottom: max(.85rem, env(safe-area-inset-bottom)); } }
@media (max-width: 36rem) { .reader-layout { margin-inline: -.625rem; border-inline: 0; border-radius: 0; }.reader-navigator { padding: .85rem .75rem; }.reader-book-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }.reader-navigation { grid-template-columns: 2.35rem minmax(0, 1fr) 2.35rem; gap: .35rem; padding-inline: .6rem; }.reader-navigation button { width: 2.35rem; min-height: 2.35rem; }.reader-search > div { gap: .3rem; }.reader-search button { min-height: 2.35rem; padding-inline: .6rem; font-size: .72rem; }.reader-verses { width: min(100% - 1.25rem, 47rem); padding-top: 1.5rem; font-size: 1.08rem; line-height: 1.8; }.reader-toolbar { min-height: 4.4rem; padding-inline: .75rem; }.reader-toolbar strong { font-size: 1.22rem; }.reader-scroll-jump { right: max(.7rem, env(safe-area-inset-right)); bottom: max(.7rem, env(safe-area-inset-bottom)); } }

.recognition-actions { display:inline-flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-inline-start:0; scroll-margin-top:5rem; max-width:100%; }
.recognition-actions button.plan-action { min-height:2.5rem; margin:0; font-family:inherit; cursor:pointer; }
.recognition-status-chevron { width:.85rem; height:.85rem; fill:none; stroke:currentColor; stroke-width:1.6; }
.recognition-history-status { display:flex; align-items:center; gap:.5rem; }
.is-pending { color:#e9b965; }
.is-approved { color:#65c9a0; }
.is-feedback { color:#8dbbfa; }
html[data-theme="light"] .is-pending { color:#855a14; }
html[data-theme="light"] .is-approved { color:#16734c; }
html[data-theme="light"] .is-feedback { color:#285fa8; }
@media (max-width:36rem) { .recognition-actions { grid-column:1/-1; } }

.recognition-dialog header h2::before { content:none; }
.recognition-dialog-body { padding:1rem 1.2rem; }
.recognition-dialog-body p,.recognition-dialog-body small { font-size:.8rem; line-height:1.7; color:var(--muted,#8995a8); }
.recognition-dialog-body a { color:var(--accent,#e9a02d); }
.recognition-dialog-body label { display:grid; gap:.5rem; font-size:.85rem; }
.recognition-dialog-body textarea { padding:.75rem; min-height:9rem; resize:vertical; }
.recognition-dialog footer { border-top:1px solid var(--border,#303b4d); }
.recognition-status { padding:1rem; border:1px solid var(--border,#303b4d); border-radius:.5rem; }
.recognition-request { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border,#303b4d); }
.recognition-request h3,.recognition-history-title { font-size:.85rem; }
.recognition-evidence,.recognition-feedback p { white-space:pre-wrap; overflow-wrap:anywhere; font-size:.8rem; line-height:1.7; }
.recognition-feedback { border-left:2px solid var(--accent,#e9a02d); padding-left:1rem; }
.recognition-feedback h4 { font-size:.75rem; margin:0; }

.plan-current-header { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1rem; }
.plan-current-header > .status-badge { align-self:start; }
.plan-recognition-status { grid-column:1/-1; display:flex; align-items:center; gap:.85rem; padding:.95rem 1rem; border:1px solid rgb(233 185 101 / .24); border-radius:.65rem; background:rgb(233 185 101 / .045); }
.plan-recognition-status.is-approved { border-color:rgb(101 201 160 / .24); background:rgb(101 201 160 / .045); }
.plan-recognition-status.is-feedback { border-color:rgb(141 187 250 / .24); background:rgb(141 187 250 / .045); }
.plan-recognition-icon { display:inline-flex; flex-shrink:0; padding:.5rem; border-radius:50%; background:rgb(140 149 159 / .08); }
.plan-recognition-icon .recognition-state-icon { width:1.25rem; height:1.25rem; }
.plan-recognition-copy { flex:1; min-width:0; }
.plan-recognition-copy h3 { margin:0; color:var(--text,#edf1f7); font-size:.8rem; line-height:1.5; font-weight:650; }
.plan-recognition-copy p { margin:.25rem 0 0; color:var(--muted,#a3adba); font-size:.75rem; line-height:1.65; }
.plan-recognition-details { width:auto; min-height:2.4rem; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; gap:.35rem; padding:.55rem .65rem; border:1px solid transparent; border-radius:.45rem; color:inherit; background:transparent; font-family:inherit; font-size:.75rem; cursor:pointer; }
.plan-recognition-details:hover { border-color:currentColor; background:rgb(140 149 159 / .08); }
.plan-recognition-details:focus-visible { outline:2px solid currentColor; outline-offset:2px; }
html[data-theme="light"] .plan-recognition-copy h3 { color:#24292f; }
html[data-theme="light"] .plan-recognition-copy p { color:#57606a; }
@media(max-width:42rem) { .plan-recognition-status { align-items:flex-start; flex-wrap:wrap; }.plan-recognition-copy { flex-basis:calc(100% - 4rem); }.plan-recognition-details { margin-inline-start:2.9rem; padding-inline:0; } }
.signup-verification { margin:1rem 0; }
.signup-verification p { font-size:.8125rem; color:var(--muted,#9ca8ba); margin:0 0 .65rem; }

/* Remembered identities are browser shortcuts; normal authentication follows. */
.last-login-row { display: flex; align-items: center; gap: .45rem; }
.last-login-card { min-width: 0; flex: 1; display: flex; align-items: center; gap: .7rem; min-height: 4rem; padding: .85rem; border: 1px solid #536075; border-radius: .85rem; background: rgb(12 17 27 / .45); text-decoration: none; transition: border-color .15s, background .15s; }
.last-login-card:hover { border-color: #ffbd52; background: #202a38; }
.last-login-card:focus-visible, .last-login-forget button:focus-visible, .login-options > summary:focus-visible { outline: 2px solid #ffbd52; outline-offset: 3px; }
.last-login-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; font-weight: 600; }
.last-login-badge { flex: none; padding: .3rem .5rem; border-radius: 1rem; color: #8ec5ff; background: #182b44; font-size: .68rem; font-weight: 600; }
.last-login-arrow, .last-login-email, .last-login-forget svg { width: 1.2rem; height: 1.2rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.last-login-email { color: #ffbd52; width: 1.45rem; height: 1.45rem; }
.last-login-forget { display: block; flex: none; margin: 0; }
.last-login-forget button { width: 2.75rem; min-height: 2.75rem; height: 2.75rem; padding: .35rem; margin: 0; border: 0; border-radius: .5rem; background: transparent; color: #9aa8bc; }
.last-login-forget button:hover { background: #283446; color: #fff; }
.last-login-hint { margin: .75rem 0 0; color: #98a6ba; font-size: .75rem; line-height: 1.5; }
.login-options > summary { display:flex; align-items:center; justify-content:center; gap:.5rem; list-style:none; cursor:pointer; text-align:center; padding:.7rem .85rem; border:1px solid transparent; border-radius:.55rem; color:#c7d1df; font-size:.9rem; font-weight:650; transition:color .15s,background .15s,border-color .15s; }
.login-options > summary::-webkit-details-marker { display: none; }
.login-options > summary:hover, .login-options[open] > summary { border-color:#3d4b60; color:#ffcf7e; background:#1a2330; }
.login-options[open]:not(.no-hint) .login-options-body { margin-top: 1.25rem; }
.login-options.no-hint > summary, .login-options[open] > summary { display: none; }
@media (max-width: 420px) {
  .last-login-card { flex-wrap: wrap; gap: .5rem; }
  .last-login-label { flex-basis: calc(100% - 2.5rem); }
  .last-login-badge { margin-left: 1.95rem; }
  .last-login-arrow { margin-left: auto; }
}

.login-body .auth-shell { width: min(100% - 2rem, 32rem); }
.login-body .auth-card { padding: clamp(1.75rem, 5vw, 2.5rem); }
.login-body .auth-card h1 { font-family: inherit; font-size: clamp(1.85rem, 5vw, 2.4rem); line-height: 1.15; letter-spacing: -.045em; }

.plans-form input:disabled { color:var(--muted,#8995a8); background:var(--panel,#1c2531); opacity:.7; cursor:not-allowed; }

.live-workspace-card { grid-column:1 / -1; }
.live-workspace-card > form { width:100%; gap:1rem; }
.live-workspace-card .live-workspace-toggle { display:flex; padding:0; border:0; }
.live-workspace-toggle input:focus-visible + i { outline:2px solid #ffbd52; outline-offset:3px; }
.live-workspace-card [hidden] { display:none; }
.live-workspace-card [data-live-workspace-options] { max-width:30rem; }
.live-workspace-card select { display:block; width:100%; margin-top:.6rem; padding:.7rem; border:1px solid #536075; border-radius:.6rem; background:var(--input-bg,#101724); color:inherit; font:inherit; }
.live-workspace-card p { color:var(--muted,#9ba9bc); font-size:.75rem; line-height:1.6; margin:.6rem 0 0; }
.live-workspace-card button { justify-self:start; }
.live-workspace-card button:disabled { opacity:.45; cursor:not-allowed; }

.lives-empty > span { width:3.5rem; height:3.5rem; background:transparent; }
.lives-empty .dashboard-icon { width:2rem; height:2rem; }
.notification-channel-head,.notification-channel-row { display:grid; grid-template-columns:minmax(0,1fr) 4.5rem 4.5rem; align-items:center; gap:.75rem; }
.notification-channel-head { padding:.75rem 0; color:#8f9bad; font-size:.75rem; text-align:center; }
.notification-channel-row { padding:1.1rem 0; border-top:1px solid #394350; }.notification-channel-row strong { display:block; font-size:.85rem; }.notification-channel-row small { display:block; color:#8f9bad; font-size:.75rem; margin-top:.35rem; line-height:1.5; }
.notification-channel-row > label { display:grid; place-items:center; }.notification-channel-row input { width:1.1rem; min-height:1.1rem; height:1.1rem; padding:0; accent-color:#e8a32b; }
.settings-form input:disabled { color:#8f9bad; background:#8f9bad0b; cursor:not-allowed; opacity:.75; }
.organization-live-picker .translation-picker-trigger { width:100%; min-height:2.75rem; display:flex; justify-content:space-between; padding:.75rem; border:1px solid #505762; border-radius:.6rem; background:#161b22; color:inherit; text-align:left; font-size:.875rem; }
.organization-live-picker .translation-picker-popover { bottom:auto; top:calc(100% + .4rem); left:0; right:auto; width:100%; }.organization-live-picker .translation-picker-search input { width:100%; min-height:2rem; border:0; background:transparent; padding:.4rem; }
.organization-live-picker .translation-picker-option { justify-content:flex-start; text-align:left; }.organization-live-picker .dashboard-icon { flex-shrink:0; width:1.5rem; height:1.5rem; color:#ac96e9; }
.live-workspace-selected { display:flex; align-items:center; gap:.5rem; font-size:.875rem; }.live-workspace-selected .dashboard-icon { width:1.25rem; height:1.25rem; color:#ac96e9; }
.live-row-name { display:flex!important; align-items:center; gap:.5rem; }.live-organization-badge { display:inline-flex; align-items:center; color:#ac96e9; flex-shrink:0; }.live-organization-badge .dashboard-icon { width:1.1rem; height:1.1rem; }
.live-organization-identity { display:inline-flex; align-items:center; gap:.35rem; min-width:0; color:#9da8ba; font-size:.64rem; font-weight:600; }
.live-organization-identity > img, .live-organization-icon { width:1rem; height:1rem; flex:none; border-radius:.25rem; object-fit:cover; }
.live-organization-icon { display:grid; place-items:center; color:#ac96e9; background:rgb(172 150 233 / .1); }
.live-organization-icon .dashboard-icon { width:.78rem; height:.78rem; }
@media(max-width:36rem) { .notification-channel-head,.notification-channel-row { grid-template-columns:minmax(0,1fr) 3rem 3rem; gap:.4rem; } }

.live-workspace-selected[hidden], .organization-live-picker [hidden] { display: none; }
.notification-channel-head { padding:.85rem 1.2rem; }
.notification-channel-row { padding:1.1rem 1.2rem; }
.organization-live-picker .translation-picker-option { width:100%; min-height:3rem; display:grid; grid-template-columns:1.5rem minmax(0,1fr); align-items:center; gap:.65rem; margin:0; padding:.65rem; border:0; border-radius:.5rem; color:#dfe4eb; background:transparent; box-shadow:none; text-align:left; }
.organization-live-picker .translation-picker-option:hover,
.organization-live-picker .translation-picker-option:focus-visible,
.organization-live-picker .translation-picker-option[aria-selected="true"] { transform:none; color:#fff5e3; background:#282319; outline:none; }
.organization-live-picker .translation-picker-option strong { font-size:.8rem; }
.organization-live-picker .translation-picker-option small { font-size:.7rem; text-transform:none; font-weight:500; }
html[data-theme="light"] .organization-live-picker .translation-picker-trigger { color:#24292f; background:#fff; border-color:#c9d1db; }
html[data-theme="light"] .organization-live-picker .translation-picker-option { color:#303846; }
html[data-theme="light"] .organization-live-picker .translation-picker-option:hover,
html[data-theme="light"] .organization-live-picker .translation-picker-option:focus-visible,
html[data-theme="light"] .organization-live-picker .translation-picker-option[aria-selected="true"] { color:#202631; background:#fff1d8; }

.theme-save-error { position:fixed; top:4.5rem; right:1rem; z-index:100; max-width:22rem; padding:.8rem 1rem; border:1px solid #a85460; border-radius:.6rem; color:#ffb3ba; background:#301b23; font-size:.8rem; }
.theme-save-error[hidden] { display:none; }

/* Native disclosure keeps SSH key guidance available to touch and keyboard users. */
.ssh-key-form > #ssh-key-paste-help { display: block; margin-top: .55rem; }
.ssh-key-help { margin: .5rem 0 .8rem; max-width: 40rem; color: #b6c2d2; font-size: .76rem; line-height: 1.6; }
.ssh-key-help > summary { display: flex; align-items: center; gap: .4rem; width: fit-content; min-height: 2.75rem; cursor: pointer; color: #a8c7fa; list-style: none; border-radius: .3rem; }
.ssh-key-help > summary::-webkit-details-marker { display: none; }
.ssh-key-help > summary:hover { text-decoration: underline; }
.ssh-key-help > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.ssh-key-help > summary svg { flex: 0 0 1rem; width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.ssh-key-help-chevron { display: inline-block; font-size: 1.15rem; transition: transform .15s ease; }
.ssh-key-help[open] .ssh-key-help-chevron { transform: rotate(90deg); }
.ssh-key-help-content { padding: .65rem .9rem; border: 1px solid #545d68; border-radius: .55rem; background: #22272e; overflow-wrap: anywhere; }
.ssh-key-help-content ul { margin: 0; padding-left: 1.1rem; }
.ssh-key-help-content li + li { margin-top: .2rem; }
.ssh-key-help-content p { margin: .65rem 0 0; color: inherit; font-size: inherit; line-height: inherit; }
html[data-theme="light"] .ssh-key-help { color: #475569; }
html[data-theme="light"] .ssh-key-help > summary { color: #245da8; }
html[data-theme="light"] .ssh-key-help-content { background: #f6f8fa; border-color: #cbd5e1; }

.invitation-login-options { margin-top:1.5rem; }

/* Shared people picker used by organization and Live invitations. */
.organization-member-picker { position:relative; }
.organization-member-picker [role="listbox"] { position:absolute; top:6rem; left:0; right:0; z-index:10; padding:.4rem; border:1px solid var(--border,#374355); border-radius:.8rem; background:var(--panel,#141d29); box-shadow:0 12px 30px #0004; }
.organization-member-picker [role="option"] { width:100%; display:flex; align-items:center; gap:.8rem; padding:.65rem; text-align:left; color:inherit; background:transparent; border:0; border-radius:.5rem; cursor:pointer; }
.organization-member-picker [role="option"]:hover,.organization-member-picker [aria-selected="true"] { background:#f4ad2420; }
.organization-member-picker [role="option"] strong,.organization-member-picker [role="option"] span span { display:block; }
.organization-member-picker [role="option"] small { display:block; margin-top:.15rem; color:#9ba7b9; font-weight:400; }
.organization-member-picker [role="option"] > span:last-child { min-width:0; overflow-wrap:anywhere; }
.member-search-avatar { display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:50%; background:#f4ad2420; color:var(--accent,#f4ad24); }
.member-search-status { font-size:.85rem; color:var(--muted,#a8b3c3); }

.organization-member-picker [role=listbox] { top:100%; margin-top:.3rem; }
.organization-member-picker [role=option] { justify-content:flex-start; }
.organization-member-picker [role=option] > span:last-child { text-align:left; }

.feedback-error .feedback-notice-icon { color:#43222a; background:#ffb9bd; }
.notice.feedback-warning { color:#ffdc98; border-color:#836632; background:#302719; }
.feedback-warning .feedback-notice-icon { color:#302719; background:#ffdc98; }
html[data-theme="light"] .notice.feedback-warning { color:#72500d; border-color:#d4b578; background:#fff7e5; }

.feedback-notice .feedback-message { color:inherit; font-size:.82rem; font-weight:650; line-height:1.5; }
.live-config-feedback.notice { display:flex; margin-top:1rem; padding:.8rem .9rem; }
.notice.feedback-notice[hidden] { display:none; }

/* Password creation uses the same dark panels, warm accent, and success palette as auth. */
.password-requirements { margin:.25rem 0 .5rem; padding:.9rem; border:1px solid #374252; border-radius:.75rem; background:#101724; }
.password-requirements-status { margin:0 0 .65rem; color:#ffcf82; font-size:.8rem; font-weight:650; line-height:1.5; }
.password-requirements ul { display:grid; gap:.3rem; margin:0; padding:0; list-style:none; }
.password-requirements li { display:flex; align-items:flex-start; gap:.6rem; padding:.45rem .55rem; border-radius:.4rem; color:#aab5c6; font-size:.78rem; line-height:1.5; transition:color .15s,background-color .15s; }
.password-rule-icon { flex:none; width:1rem; text-align:center; font-weight:800; }
.password-requirements small { color:inherit; font-size:inherit; font-weight:400; }
.password-requirements li.is-met { color:#c9f7d8; background:#112d21; }
.password-requirements .is-met .password-rule-icon { color:#72d69b; }
.password-requirements.is-complete { border-color:#397757; }
.password-requirements.is-complete .password-requirements-status { color:#c9f7d8; }
html[data-theme="light"] .password-requirements { border-color:#cbd5e1; background:#f6f8fa; }
html[data-theme="light"] .password-requirements-status { color:#875514; }
html[data-theme="light"] .password-requirements li { color:#57606a; }
html[data-theme="light"] .password-requirements li.is-met { color:#166534; background:#e5f5eb; }
html[data-theme="light"] .password-requirements .is-met .password-rule-icon, html[data-theme="light"] .password-requirements.is-complete .password-requirements-status { color:#166534; }

.member-search-avatar { flex:none; overflow:hidden; }
.member-search-avatar > img { display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }

.recognition-submitted-time { color:var(--muted,#a3adba); font-size:.75rem; line-height:1.65; margin:.35rem 0 0; }

.plan-recognition-status.is-cancelled { border-color:var(--border,#303b4d); background:rgb(140 149 159 / .045); color:var(--muted,#a3adba); }

/* Inbox context stays with the message; status and destructive controls remain compact. */
.inbox-notification-row > .notification-unread-marker { grid-column: 1; grid-row: 1 / span 2; }
.inbox-notification-row > .notification-kind { grid-column: 2; grid-row: 1 / span 2; }
.inbox-notification-row > .notification-copy { grid-column: 3; grid-row: 1; }
.inbox-notification-row > .notification-context { grid-column: 3; grid-row: 2; min-width: 0; }
.inbox-notification-row > time { grid-column: 4; grid-row: 1 / span 2; }
.inbox-notification-row > .notification-row-controls { grid-column: 5; grid-row: 1 / span 2; display: flex; gap: .2rem; }
.inbox-notification-row { grid-template-columns: .45rem 2.25rem minmax(0,1fr) auto 4.3rem; row-gap: .3rem; }
.notification-sender { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .45rem; font-size: .65rem; color: #8f9bae; }
.notification-sender strong { color: inherit; font-weight: 600; }
.notification-context-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.inbox-notification-row form .notification-context-action { width: auto; padding: .3rem .65rem; display: inline-flex; color: #d5deeb; border: 1px solid #465267; font-size: .67rem; font-weight: 600; }
.inbox-notification-row form .notification-context-action.primary { background: #ffbd52; border-color: #ffbd52; color: #241b0c; }
.inbox-notification-row form .notification-delete { color: #ef7878; background: transparent; }
.inbox-notification-row form .notification-delete:hover { color: #ff9b9b; background: rgb(239 120 120 / .1); }
html[data-theme="light"] .notification-sender { color: #68758a; }
html[data-theme="light"] .inbox-notification-row form .notification-context-action.secondary { color: #344155; border-color: #bbc6d3; }
@media(max-width: 40rem) {
  .inbox-notification-row { grid-template-columns: .35rem 1.5rem minmax(0,1fr) 4.3rem; gap: .5rem; padding-inline: .7rem; }
  .inbox-notification-row > .notification-row-controls { grid-column: 4; }
  .inbox-notification-row time { display: none; }
  .notification-copy p { white-space: normal; }
}

.notification-sender > * { max-width: 100%; overflow-wrap: anywhere; }

.organization-profile-readonly { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.organization-profile-identity { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.organization-profile-identity .settings-avatar, .organization-profile-identity .profile-avatar-fallback { width: 4rem; height: 4rem; flex-shrink: 0; object-fit: cover; border-radius: 50%; }
.organization-profile-identity .profile-avatar-fallback { display: grid; place-items: center; background: #222b38; }
.organization-profile-identity h2 { margin: 0; overflow-wrap: anywhere; }
.organization-profile-identity p { margin: .25rem 0 0; color: #8f9bad; overflow-wrap: anywhere; }
.organization-profile-details { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; margin: 0; padding-top: 1.25rem; border-top: 1px solid #303b4b; }
.organization-profile-details > div { min-width: 0; }
.organization-profile-details dt { color: #8f9bad; font-size: .75rem; margin-bottom: .4rem; }
.organization-profile-details dd { margin: 0; overflow-wrap: anywhere; }
.organization-profile-details a { color: #ffbd5d; }
.organization-profile-access-note { margin: 0; color: #8f9bad; font-size: .75rem; line-height: 1.5; }

/* Compact account language and appearance controls. */
.preference-settings-card .preference-group { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1.1rem 1.35rem; }
.preference-copy { display: grid; gap: .4rem; }
.preference-settings-card .language-picker, .preference-settings-card .theme-picker { display: flex; gap: .4rem; max-width: none; }
.preference-settings-card .language-option, .preference-settings-card .theme-option { width: 2.75rem; height: 2.75rem; min-height: 0; padding: .4rem; border-radius: .6rem; }
.preference-settings-card .language-option-flag { font-size: 1.2rem; }
.preference-settings-card label:has(input:disabled), .profile-photo-editor[aria-busy="true"] label { opacity: .6; cursor: wait; pointer-events: none; }
.preference-save-status { margin: 0; color: #8f9bad; font-size: .75rem; }
.preference-save-status:not(:empty) { padding: .75rem 1.35rem; border-top: 1px solid #303a48; }
.preference-save-status.error { color: #ff9da4; }
@media (max-width: 600px) {
  .preference-settings-card .preference-group { grid-template-columns: minmax(0, 1fr); }
}

.notification-channel-head > .notification-channel-icon { display: flex; align-items: center; justify-content: center; }
.notification-channel-icon .dashboard-icon { width: 1.15rem; height: 1.15rem; }

.notification-channel-head > .notification-channel-icon:nth-child(2) { color: #9b87ff; }
.notification-channel-head > .notification-channel-icon:nth-child(3) { color: #4cb8ec; }
html[data-theme="light"] .notification-channel-head > .notification-channel-icon:nth-child(2) { color: #7352c7; }
html[data-theme="light"] .notification-channel-head > .notification-channel-icon:nth-child(3) { color: #277aa5; }

.preference-settings-card .theme-option:has(input:checked),
.preference-settings-card .language-option:has(input:checked) { border-color: var(--selected-control-border); background: var(--selected-control-fill); }
html[data-theme="light"] .preference-settings-card .theme-option:has(input:checked),
html[data-theme="light"] .preference-settings-card .language-option:has(input:checked) { border-color: var(--selected-control-border); background: var(--selected-control-fill); }

/* Shared selected state for option cards and toggle controls. */
:root { --selected-control-border: #ffcf58; --selected-control-fill: #ffcf5826; }
html[data-theme="light"] { --selected-control-border: #c59b20; --selected-control-fill: #fff2b8; }
.scope-option:has(input:checked),
.scope-group-heading:has(input:checked),
.live-translation-choice:has(input:checked),
.theme-option:has(input:checked),
.language-option:has(input:checked),
html[data-theme="light"] .scope-option:has(input:checked),
html[data-theme="light"] .scope-group-heading:has(input:checked),
html[data-theme="light"] .live-translation-choice:has(input:checked),
html[data-theme="light"] .theme-option:has(input:checked),
html[data-theme="light"] .language-option:has(input:checked) { border-color: var(--selected-control-border); background: var(--selected-control-fill); }
.scope-group-heading:has(input:checked) { box-shadow: inset 0 0 0 1px var(--selected-control-border); border-radius: .5rem; }
.notification-row input:checked + i,
html[data-theme="light"] .notification-row input:checked + i { background: var(--selected-control-fill); box-shadow: inset 0 0 0 1px var(--selected-control-border); }
.notification-row input:checked + i::after { background: var(--selected-control-border); }

.notification-save-status { margin: 0; color: #8f9bad; font-size: .75rem; }
.notification-save-status:not(:empty) { padding: .75rem 1.2rem; }
.notification-save-status.error { color: #ff9da4; }
.notification-channel-settings[aria-busy="true"] input { opacity: .55; cursor: wait; }

/* Keep credential permissions readable without nested outlines. */
.credential-editor .scope-grid { gap: 1rem; }
.credential-editor .scope-group { border: 0; background: #ffffff03; }
.credential-editor .scope-group-heading { padding: .75rem .65rem .5rem; }
.credential-editor .scope-group-heading:has(input:checked),
html[data-theme="light"] .credential-editor .scope-group-heading:has(input:checked) { background: transparent; box-shadow: none; }
.credential-editor .scope-group-heading:focus-within { outline: 2px solid var(--selected-control-border); outline-offset: 2px; border-radius: .5rem; }
.credential-editor .scope-group-options { gap: .25rem; padding: .25rem .65rem .75rem; }
.credential-editor .scope-option { display: flex; align-items: center; gap: .4rem; min-height: 2rem; padding: .3rem .5rem; border: 0; background: transparent; }
.credential-editor .scope-option:has(input:checked),
html[data-theme="light"] .credential-editor .scope-option:has(input:checked) { background: var(--selected-control-fill); }
.credential-editor .scope-option:hover { background: #ffffff0a; }
.credential-editor .scope-option:has(input:checked):hover { background: var(--selected-control-fill); }
.credential-editor .scope-option input[type="checkbox"] { accent-color: var(--selected-control-border); }
html[data-theme="light"] .credential-editor .scope-group { background: #f5f7fa; }
html[data-theme="light"] .credential-editor .scope-option:hover { background: #e9edf3; }
html[data-theme="light"] .credential-editor .scope-option:has(input:checked):hover { background: var(--selected-control-fill); }

/* Borderless credential surfaces; focus outlines stay visible. */
html[data-theme] :is(.credentials-heading, .credential-list, .credential-editor, .credential-row, .credential-empty, .credential-editor-actions, .credential-scope) { border: 0; }
html[data-theme] .credential-fields :is(input, select),
html[data-theme] .credential-editor :is(.settings-primary, .settings-button, .settings-danger),
html[data-theme] .credential-actions :is(.settings-button, .settings-danger) { border: 0; }
.credential-fields :is(input, select):focus-visible { outline: 2px solid var(--selected-control-border); outline-offset: 2px; }

.organization-profile-website { display: inline-flex; align-items: center; gap: .45rem; max-width: 100%; }
.organization-profile-website .dashboard-icon { flex-shrink: 0; width: 1rem; height: 1rem; }
.organization-profile-website span { min-width: 0; overflow-wrap: anywhere; }

.live-manage-heading .live-title-line { column-gap: 1.25rem; row-gap: .75rem; }

/* Shared translation rows: identity and provenance stay together; actions sit at the edge. */
.translation-row,
.installed-translation,
.organization-library-row {
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .85rem;
}
.translation-row-icon { width: 1.3rem; height: 1.3rem; color: #bba0ef; }
.translation-row .translation-identity,
.installed-translation .translation-identity,
.organization-library-row .translation-identity { display: block; }
.translation-title strong { white-space: normal; overflow-wrap: anywhere; }
.translation-provenance { overflow-wrap: anywhere; }
.installed-translation-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
.installed-translation {
  padding: 1rem 0;
  border: 0;
  border-top: 1px solid #303b4b;
  border-radius: 0;
  background: transparent;
}
.installed-translation:first-child { border-top: 0; }
.translation-row { padding: .85rem .65rem; }
.organization-library-row .translation-title strong { font-size: .78rem; }
@media (max-width: 42rem) {
  .translation-row,
  .installed-translation,
  .organization-library-row { grid-template-columns: 1.3rem minmax(0, 1fr) auto; gap: .55rem; }
  .organization-library-row .organization-library-remove { grid-column: 3; justify-self: end; }
  .installed-translation form { grid-column: 3; }
}


/* Translation actions share the organization library's compact icon controls. */
.translation-library-action { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.75rem; height: 2.75rem; min-height: 0; margin: 0; padding: 0; border: 1px solid #505762; border-radius: .7rem; background: #20252c; color: #d5dce7; cursor: pointer; box-shadow: none; }
.translation-library-action:hover { border-color: #8793a4; background: #2a3038; transform: none; }
.translation-library-action.remove { color: #ffb2bd; border-color: #944553; background: #382229; }
.translation-library-action.remove:hover { color: #ffd0d7; border-color: #c56272; background: #492731; }
.translation-library-action:focus-visible { outline: 2px solid #ffcf58; outline-offset: 2px; }
.translation-library-action .dashboard-icon { width: 1.1rem; height: 1.1rem; }
html[data-theme="light"] .translation-library-action { color: #465268; border-color: #c8cfd9; background: #f5f7fa; }
html[data-theme="light"] .translation-library-action:hover { border-color: #8c98aa; background: #e9edf3; }
html[data-theme="light"] .translation-library-action.remove { color: #a63c50; border-color: #d49ba7; background: #fff0f3; }
html[data-theme="light"] .translation-library-action.remove:hover { border-color: #b66a7b; background: #ffe3e9; }