/* NTC employee workspace. Self-hosted, dependency-free UI. */
:root {
  --navy: #142b3c;
  --navy-deep: #102333;
  --teal: #087e86;
  --teal-dark: #066770;
  --teal-light: #e5f2f1;
  --ink: #183042;
  --body: #536777;
  --muted: #71808d;
  --line: #e0e7eb;
  --canvas: #f5f7f9;
  --white: #fff;
  --font: 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; }
body { margin: 0; color: var(--ink); font-family: var(--font); font-size: 14px; line-height: 1.55; background: var(--canvas); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .6; }
svg { display: block; flex-shrink: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #28a3aa; outline-offset: 4px; }
main:focus { outline: none; }
::selection { background: #c5e9e5; color: var(--navy); }
h1, h2, h3, p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -90px; z-index: 100; padding: 10px 16px; border-radius: 6px; background: white; color: var(--navy); box-shadow: 0 4px 20px #10233330; }
.skip-link:focus { top: 12px; }
.workspace { display: flex; min-height: 100vh; min-height: 100dvh; }
.sidebar { position: fixed; z-index: 20; inset: 0 auto 0 0; display: flex; flex-direction: column; width: 262px; padding: 35px 19px 20px; color: #c4d2dc; background: var(--navy-deep); overflow-y: auto; }
.brand { display: inline-flex; align-items: center; gap: 12px; width: fit-content; }
.sidebar .brand { margin-left: 9px; margin-bottom: 51px; }
.brand-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; color: #fff; background: var(--teal); }
.brand-mark svg { width: 35px; height: 35px; }
.brand-text { color: var(--navy); font-size: 26px; line-height: 1.04; font-weight: 750; letter-spacing: -.5px; }
.brand-text > span { display: block; margin-top: 7px; font-size: 10px; font-weight: 400; line-height: 1.2; letter-spacing: .15px; }
.sidebar .brand-text, .brand-on-dark .brand-text { color: white; }
.sidebar .brand-text > span, .brand-on-dark .brand-text > span { color: #a6bbc9; }
.sidebar-section-label { margin: 0 12px 14px; font-size: 9px; font-weight: 600; letter-spacing: 1.6px; color: #8299aa; }
.sidebar-nav { display: flex; flex-direction: column; gap: 7px; }
.sidebar-link { display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 12px 12px; border-radius: 7px; font-size: 12px; font-weight: 500; transition: background .16s, color .16s; }
.sidebar-link > svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.5; }
.sidebar-link:hover { color: #fff; background: #ffffff0b; }
.sidebar-link.is-active { color: #fff; background: #244657; box-shadow: inset 3px 0 #47b8b6; }
.sidebar-link.is-active > svg { color: #67d2cc; }
.sidebar-link .nav-external { margin-left: auto; width: 12px; height: 12px; color: #7f9aaa; }
.sidebar-bottom { margin-top: auto; padding-top: 60px; }
.workspace-note { display: flex; align-items: center; gap: 8px; margin: 0 10px 25px; color: #9bb0bf; font-size: 10px; }
.small-dot { width: 5px; height: 5px; display: inline-block; flex-shrink: 0; border-radius: 50%; background: #50b5ab; }
.sidebar-profile { display: flex; gap: 10px; align-items: center; padding: 17px 9px 10px; border-top: 1px solid #ffffff12; }
.avatar { display: inline-grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; font-size: 13px; font-weight: 650; border: 1px solid #456171; border-radius: 50%; background: #2a4556; color: #d6ebe8; }
.profile-copy { flex: 1; min-width: 0; }
.profile-copy strong { display: block; overflow: hidden; color: #fff; font-size: 11px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.profile-copy > span { display: block; color: #8fa5b5; font-size: 9px; margin-top: 3px; }
.sidebar-profile > svg { width: 13px; height: 13px; stroke: #92a8b8; stroke-width: 1.5; }
.sidebar-signout { display: flex; align-items: center; justify-content: space-between; margin-left: 55px; margin-right: 13px; padding: 5px 0; color: #9fb2c0; font-size: 10px; }
.sidebar-signout:hover { color: white; }
.workspace-body { display: flex; flex-direction: column; min-width: 0; width: calc(100% - 262px); margin-left: 262px; }
.topbar { display: flex; justify-content: space-between; align-items: center; height: 80px; padding: 0 46px; background: #fff; border-bottom: 1px solid var(--line); }
.breadcrumb { display: flex; align-items: center; gap: 12px; font-size: 11px; color: #7c8b98; }
.breadcrumb strong { font-weight: 500; color: #3f5667; }
.breadcrumb-divider { color: #bec8cf; }
.topbar-account { display: flex; align-items: center; gap: 13px; color: #3e5363; font-size: 11px; }
.avatar-small { width: 30px; height: 30px; font-size: 11px; background: #e9f0f1; color: #337175; border-color: #d9e5e5; }
.page-content { width: 100%; max-width: 1560px; margin: 0 auto; padding: 36px 46px 50px; flex: 1; }
.page-footer { display: flex; justify-content: space-between; gap: 20px; margin: auto 46px 0; padding: 20px 0 22px; border-top: 1px solid var(--line); color: #7e8c98; font-size: 10px; }
.welcome-panel { display: flex; justify-content: space-between; position: relative; min-height: 292px; overflow: hidden; border: 1px solid #dde7eb; border-radius: 13px; background: #edf3f5; }
.welcome-copy { z-index: 2; padding: 31px 35px 28px; }
.eyebrow { display: flex; align-items: center; gap: 8px; color: #3f7277; font-size: 9px; letter-spacing: 1.8px; font-weight: 700; }
.eyebrow-line { display: inline-block; width: 20px; height: 1px; background: #4c9c9e; }
.welcome-copy h1 { margin-top: 18px; font-size: clamp(29px, 2.8vw, 41px); font-weight: 650; line-height: 1.18; letter-spacing: -1.3px; }
.welcome-copy h1 > span { color: #438186; }
.welcome-copy > p { margin-top: 17px; color: #677b88; font-size: 12px; line-height: 1.7; }
.welcome-caption { display: flex; align-items: center; gap: 7px; margin-top: 21px; color: #4c6e77; font-size: 10px; }
.welcome-caption svg { width: 16px; height: 16px; stroke: #52888c; stroke-width: 1.3; }
.welcome-art { width: 41%; min-width: 265px; position: absolute; inset: 0 0 0 auto; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse at 65% 50%, #d7e9e8 0, #e5eff0 45%, transparent 73%); }
.art-grid { position: absolute; inset: 20px -40px 0 0; opacity: .18; transform: rotate(-30deg) skew(10deg); background-image: linear-gradient(#85acb0 1px, transparent 1px), linear-gradient(90deg, #85acb0 1px, transparent 1px); background-size: 33px 33px; mask-image: radial-gradient(ellipse, #000 25%, transparent 70%); }
.art-core { position: absolute; top: 50%; left: 52%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 147px; height: 147px; border: 1px solid #b2d0d0; border-radius: 31px; background: #f5faf9db; box-shadow: 0 22px 40px #295d6b14, 0 0 0 9px #ffffff3d; }
.art-core svg { width: 105px; height: 105px; stroke: #438a8e; stroke-width: 1.1; }
.art-orbit { position: absolute; top: 50%; left: 52%; border: 1px solid #96b7bb55; border-radius: 50%; transform: translate(-50%, -50%); }
.orbit-one { width: 240px; height: 240px; }
.orbit-two { width: 350px; height: 350px; border-style: dashed; }
.orbit-three { width: 460px; height: 460px; opacity: .6; }
.art-node { position: absolute; width: 8px; height: 8px; border: 2px solid #edf5f4; background: #6eaaa7; border-radius: 50%; box-shadow: 0 0 0 3px #bad8d755; }
.node-one { left: calc(52% + 98px); top: calc(50% - 68px); }
.node-two { left: calc(52% - 114px); top: calc(50% + 22px); }
.node-three { left: calc(52% + 70px); top: calc(50% + 156px); }
.art-axis { position: absolute; font-size: 8px; font-weight: 600; color: #799b9f; }
.axis-one { top: 11px; left: calc(52% - 3px); }
.axis-two { top: calc(50% - 7px); right: 12px; }
.catalogue-section { margin-top: 34px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.eyebrow-muted { color: #788c99; font-size: 9px; letter-spacing: 1.6px; }
.section-heading h2 { display: flex; align-items: center; gap: 11px; margin-top: 6px; font-size: 23px; font-weight: 650; letter-spacing: -.55px; }
.count-badge { display: inline-grid; place-items: center; min-width: 24px; height: 23px; padding: 0 6px; font-size: 11px; line-height: 1; font-weight: 550; color: #5c7683; background: #e7ecef; border: 1px solid #dce4e8; border-radius: 6px; }
.search-field { display: flex; align-items: center; gap: 9px; width: 268px; height: 40px; padding: 0 12px; border: 1px solid #dce4e8; border-radius: 7px; background: white; transition: border-color .16s, box-shadow .16s; }
.search-field:focus-within { border-color: #539da3; box-shadow: 0 0 0 3px #087e860f; }
.search-field > svg { width: 16px; height: 16px; stroke: #7f929f; stroke-width: 1.4; }
.search-field input { min-width: 0; width: 100%; padding: 9px 0; border: 0; outline: none; font-size: 11px; color: var(--ink); background: transparent; }
.search-field input::placeholder { color: #8494a0; opacity: 1; }
.search-field kbd { display: grid; place-items: center; width: 18px; height: 19px; color: #91a0aa; border: 1px solid #e4e9ec; border-radius: 3px; font: 10px var(--font); }
.catalogue-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 23px 0 18px; min-height: 31px; }
.category-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.category-filter { padding: 6px 11px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #71828e; font-size: 10px; font-weight: 500; transition: color .15s, background .15s; }
.category-filter:hover { background: #eaf0f2; color: #335d66; }
.category-filter[aria-pressed='true'] { color: #236d72; background: #e3efef; border-color: #d1e4e2; }
.results-count { margin-left: auto; color: #8795a0; font-size: 10px; white-space: nowrap; }
.app-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 19px; }
.app-card { --card-accent: #087e86; --card-light: #e9f4f2; display: flex; flex-direction: column; min-width: 0; min-height: 270px; border: 1px solid #dde5e9; border-radius: 10px; background: white; box-shadow: 0 3px 8px #17344403; transition: border-color .18s, box-shadow .18s, transform .18s; }
.app-card[data-accent='blue'] { --card-accent: #34699c; --card-light: #ebf1f8; }
.app-card[data-accent='indigo'] { --card-accent: #5d64a5; --card-light: #eeedf8; }
.app-card[data-accent='amber'] { --card-accent: #98722e; --card-light: #faf3e6; }
.app-card:hover { border-color: #b7d5d5; box-shadow: 0 8px 22px #1734440b; transform: translateY(-2px); }
.app-card-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 23px 23px 0; }
.app-icon { display: grid; place-items: center; width: 52px; height: 52px; color: var(--card-accent); background: var(--card-light); border: 1px solid #087e860b; border-radius: 12px; }
.app-icon svg { width: 35px; height: 35px; stroke: currentColor; stroke-width: 1.4; }
.app-status { display: inline-flex; gap: 5px; align-items: center; color: #438270; font-size: 9px; font-weight: 500; white-space: nowrap; }
.app-status > span { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #5aa186; }
.status-paused { color: #85909a; }
.status-paused > span { background: #a0a9af; }
.app-card-copy { padding: 19px 23px 23px; }
.category-label { display: block; color: #7d8d99; font-size: 9px; }
.app-card h3 { margin-top: 5px; font-size: 21px; font-weight: 650; line-height: 1.25; letter-spacing: -.5px; overflow-wrap: anywhere; }
.app-card-copy > p { margin-top: 11px; max-width: 35em; color: #748491; font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; }
.app-card-bottom { margin: auto 23px 0; border-top: 1px solid #edf0f2; }
.app-open { display: flex; align-items: center; justify-content: space-between; min-height: 53px; gap: 12px; color: var(--card-accent); font-size: 11px; font-weight: 600; }
.app-open svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.4; transition: transform .16s; }
.app-open:hover svg { transform: translateX(3px); }
.app-open:focus-visible { outline-offset: 0; border-radius: 4px; }
.app-unavailable { display: flex; align-items: center; min-height: 53px; font-size: 10px; color: #7d8d99; }
.app-card-disabled { background: #fcfdfd; }
.app-card-disabled .app-icon { filter: grayscale(.7); opacity: .65; }
.app-card-disabled:hover { transform: none; box-shadow: none; border-color: #dde5e9; }
.catalogue-footnote { display: flex; align-items: center; gap: 8px; margin-top: 27px; color: #7f909b; font-size: 10px; }
.catalogue-footnote svg { width: 14px; height: 14px; stroke: #879eaa; stroke-width: 1.2; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 25px; margin-top: 20px; text-align: center; border: 1px dashed #d3dfe5; background: #ffffff70; border-radius: 10px; }
.empty-icon { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid #e0e9ed; border-radius: 14px; color: #648994; background: #edf3f5; }
.empty-icon svg { width: 30px; height: 30px; stroke: currentColor; stroke-width: 1.3; }
.empty-state h3 { margin-top: 19px; font-size: 18px; font-weight: 600; }
.empty-state p { margin: 8px auto 0; max-width: 385px; font-size: 12px; color: #7b8a96; }
.empty-state .button { margin-top: 24px; }
.inline-note { margin-top: 18px; color: #71828f; font-size: 12px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 43px; padding: 10px 20px; border: 1px solid transparent; border-radius: 7px; font-size: 12px; font-weight: 600; line-height: 1.4; transition: background .16s, border-color .16s, box-shadow .16s; }
.button-primary { color: white; background: var(--teal); border-color: var(--teal); box-shadow: 0 3px 6px #087e8611; }
.button-primary:hover { background: var(--teal-dark); border-color: var(--teal-dark); box-shadow: 0 4px 10px #087e861f; }
.button-secondary { color: #47616f; background: white; border-color: #d8e2e7; }
.button-secondary:hover { background: #f4f8f9; border-color: #b3cbcf; }
.button-full { width: 100%; }
.button svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.5; }
.message-stack { display: grid; gap: 10px; margin-bottom: 20px; }
.notice { padding: 13px 15px; margin-bottom: 18px; border: 1px solid #d2e3eb; border-radius: 7px; background: #edf5f9; color: #32586e; font-size: 12px; }
.notice:last-child { margin-bottom: 0; }
.notice-error { color: #9d3d3d; background: #fcf0f0; border-color: #edd4d4; }
.notice-success { color: #346f59; background: #eaf6ef; border-color: #cfe6d8; }
.notice-warning { color: #82652a; background: #fcf8ec; border-color: #eadfbe; }
.notice ul { margin: 0; padding-left: 18px; }
.auth-layout { display: grid; grid-template-columns: minmax(360px, 44%) 1fr; min-height: 100vh; min-height: 100dvh; }
.auth-brand-panel { display: flex; flex-direction: column; position: relative; overflow: hidden; padding: 43px 54px 28px; background: var(--navy-deep); color: #fff; }
.auth-brand-panel::after { content: ''; position: absolute; width: 650px; height: 650px; right: -350px; bottom: -300px; border: 1px solid #b0dbdd13; border-radius: 50%; box-shadow: 0 0 0 70px #b0dbdd06, 0 0 0 140px #b0dbdd04; pointer-events: none; }
.auth-brand-panel .brand { z-index: 1; }
.auth-brand-copy { width: 100%; max-width: 410px; margin: auto 0; padding: 68px 0 20px; z-index: 1; }
.auth-brand-copy .eyebrow { font-size: 8px; color: #76b5b6; letter-spacing: 1.7px; }
.auth-brand-copy h2 { margin-top: 23px; font-size: clamp(29px, 3vw, 43px); line-height: 1.23; font-weight: 550; letter-spacing: -1.2px; }
.auth-brand-copy > p { margin-top: 22px; color: #a1b7c6; font-size: 12px; line-height: 1.8; }
.auth-contour { max-width: 340px; margin: 30px -20px 0; }
.auth-contour svg { width: 100%; height: auto; stroke: #4b8a91; stroke-width: .9; }
.auth-brand-footer { display: flex; align-items: center; gap: 8px; margin-top: auto; color: #8aa5b6; font-size: 10px; z-index: 1; }
.auth-main { position: relative; display: flex; justify-content: center; align-items: center; padding: 76px 55px 88px; background: #fff; }
.auth-card { width: 100%; max-width: 355px; }
.auth-step { margin-bottom: 15px; font-size: 9px; letter-spacing: 1.8px; font-weight: 600; color: #6a9295; }
.auth-card h1, .activation-card h1 { font-size: 30px; font-weight: 650; line-height: 1.2; letter-spacing: -.8px; }
.auth-intro { margin-top: 13px; margin-bottom: 31px; color: #778893; font-size: 12px; line-height: 1.75; }
.portal-form { display: grid; gap: 21px; }
.portal-form .button { margin-top: 5px; min-height: 46px; font-size: 11px; }
.form-field label { display: block; margin-bottom: 8px; color: #405969; font-size: 11px; font-weight: 600; }
.form-field input:not([type='checkbox']):not([type='radio']), .form-field select, .form-field textarea { width: 100%; min-height: 44px; border: 1px solid #d8e2e7; border-radius: 6px; padding: 10px 12px; outline: none; background: #fcfdfe; color: var(--ink); font-size: 13px; transition: border-color .15s, box-shadow .15s; }
.form-field input:not([type='checkbox']):not([type='radio']):focus, .form-field select:focus, .form-field textarea:focus { border-color: #4f979d; box-shadow: 0 0 0 3px #087e860e; background: #fff; }
.form-field input[aria-invalid='true'] { border-color: #c78484; }
.field-error { margin-top: 7px; font-size: 11px; color: #a74747; }
.field-error ul { margin: 0; padding-left: 16px; }
.field-help { margin-top: 8px; color: #7a8b96; font-size: 10px; line-height: 1.6; }
.field-help ul { padding-left: 16px; margin: 0; }
.auth-help { display: flex; gap: 10px; padding-top: 25px; margin-top: 28px; border-top: 1px solid var(--line); color: #8a99a4; font-size: 10px; line-height: 1.7; }
.help-icon { display: grid; place-items: center; flex-shrink: 0; width: 17px; height: 17px; margin-top: 2px; border: 1px solid #a0b3be; border-radius: 50%; color: #7e96a4; font-size: 10px; }
.auth-help strong { display: block; margin-bottom: 4px; color: #536f7e; font-size: 11px; font-weight: 600; }
.auth-invitation-note { margin-top: 26px; color: #8999a3; font-size: 10px; text-align: center; }
.auth-footer { color: #8d9ba5; font-size: 10px; text-align: center; }
.auth-main > .auth-footer { position: absolute; bottom: 27px; left: 20px; right: 20px; }
.activation-layout { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: #f5f8f9; }
.activation-header { display: flex; justify-content: space-between; align-items: center; padding: 28px 46px; }
.activation-header-note { color: #7d929e; font-size: 11px; }
.activation-main { flex: 1; display: flex; justify-content: center; align-items: center; padding: 30px 25px 55px; }
.activation-card { width: 100%; max-width: 460px; padding: 37px 39px 30px; border: 1px solid #dce7eb; border-radius: 13px; background: white; box-shadow: 0 12px 45px #173b4c05; }
.activation-card .confirmation-icon { width: 53px; height: 53px; margin-bottom: 24px; }
.activation-card .eyebrow { margin-bottom: 12px; }
.activation-card h1 { font-size: 27px; }
.activation-layout > .auth-footer { padding: 15px 20px 26px; }
.invitation-recipient { display: flex; flex-direction: column; gap: 3px; margin: -7px 0 25px; padding: 13px 15px; border: 1px solid #deebed; border-radius: 7px; background: #f5f9f9; }
.invitation-label { margin-bottom: 2px; color: #7f999f; font-size: 8px; letter-spacing: 1.2px; }
.invitation-recipient strong { font-weight: 600; font-size: 12px; color: #446570; }
.invitation-recipient > span:last-child:not(:first-child) { font-size: 11px; color: #74919a; overflow-wrap: anywhere; }
.confirmation-card { max-width: 550px; margin: 65px auto; padding: 40px; background: white; border: 1px solid var(--line); border-radius: 12px; }
.confirmation-icon { display: grid; place-items: center; width: 57px; height: 57px; margin-bottom: 24px; color: #42898a; background: #eaf4f2; border: 1px solid #d6e9e5; border-radius: 14px; }
.confirmation-icon svg { width: 30px; height: 30px; stroke: currentColor; stroke-width: 1.4; }
.confirmation-card h1 { margin-top: 9px; font-size: 27px; line-height: 1.3; font-weight: 600; letter-spacing: -.7px; }
.confirmation-card > p { margin-top: 14px; font-size: 12px; line-height: 1.8; color: #778b98; }
.confirmation-actions { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 27px; margin-top: 26px; border-top: 1px solid var(--line); }
.page-heading { padding: 8px 0 30px; }
.page-heading h1 { margin-top: 9px; font-size: 31px; font-weight: 650; letter-spacing: -.9px; }
.page-heading p { margin-top: 9px; color: #7a8b97; font-size: 12px; }
.account-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 28px; align-items: start; }
.account-card { overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: white; }
.account-summary { display: flex; align-items: center; gap: 18px; padding: 29px 31px; border-bottom: 1px solid #edf1f3; }
.avatar-large { width: 61px; height: 61px; font-size: 23px; background: #e5f1ef; border-color: #cee4df; color: #3f8983; }
.account-summary h2 { margin-bottom: 8px; font-size: 22px; line-height: 1.3; font-weight: 600; overflow-wrap: anywhere; }
.profile-details { margin: 0; padding: 5px 31px 12px; }
.profile-details > div { display: grid; grid-template-columns: minmax(100px, 38%) 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid #edf1f3; }
.profile-details > div:last-child { border-bottom: 0; }
.profile-details dt { color: #81939f; font-size: 11px; }
.profile-details dd { margin: 0; color: #405e6e; font-size: 12px; overflow-wrap: anywhere; }
.account-card-footer { padding: 18px 31px; border-top: 1px solid #edf1f3; background: #fbfcfd; }
.text-link { display: inline-flex; gap: 13px; align-items: center; color: var(--teal); font-size: 11px; font-weight: 600; }
.text-link:hover { color: var(--teal-dark); text-decoration: underline; }
.account-aside { padding: 28px 25px; border: 1px solid #dce7e9; border-radius: 10px; background: #edf4f4; }
.account-info-icon { margin-bottom: 19px; color: #669797; }
.account-info-icon svg { width: 29px; height: 29px; stroke: currentColor; stroke-width: 1.3; }
.account-aside h2 { font-size: 17px; font-weight: 600; }
.account-aside > p { margin-top: 13px; font-size: 11px; line-height: 1.8; color: #6d8891; }
.account-aside .text-link { margin-top: 26px; }
.muted-link { color: #68838c; font-weight: 500; }
.mfa-card h1 { font-size: 26px; }
.mfa-qr { display: flex; justify-content: center; padding: 15px; margin: -6px 0 23px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.mfa-qr img { display: block; max-width: 100%; height: auto; }
.manual-secret { display: flex; flex-direction: column; gap: 7px; margin-bottom: 26px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 7px; background: #f8fafb; }
.manual-secret code { font: 12px/1.6 Consolas, monospace; color: #406573; overflow-wrap: anywhere; user-select: all; }
.mfa-signout { margin-top: 23px; text-align: center; }
.recovery-code-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 22px 0 28px; padding: 0; list-style: none; }
.recovery-code-list li { padding: 9px 12px; background: #f4f8f9; border: 1px solid #dce7eb; border-radius: 5px; text-align: center; }
.recovery-code-list code { font: 13px Consolas, monospace; color: #3c6570; overflow-wrap: anywhere; }
.credentials-card { max-width: 800px; padding: 31px; background: #fff; border: 1px solid var(--line); border-radius: 11px; }
.credentials-heading { display: flex; align-items: center; gap: 17px; margin-bottom: 25px; }
.credentials-heading .confirmation-icon { margin-bottom: 0; flex-shrink: 0; }
.credentials-heading h2 { font-size: 21px; font-weight: 600; }
.credentials-heading p { margin-top: 5px; font-size: 11px; color: #7b8f9c; }
.credential-details { margin: 24px 0; }
.credential-details > div { display: grid; grid-template-columns: 125px minmax(0, 1fr); gap: 18px; border-bottom: 1px solid #edf1f3; padding: 17px 0; }
.credential-details dt { color: #7e929f; font-size: 11px; }
.credential-details dd { display: grid; gap: 7px; margin: 0; }
.credential-details code { display: block; font: 12px/1.7 Consolas, monospace; color: #365a69; overflow-wrap: anywhere; user-select: all; }
.credential-details .secret-value { padding: 9px 12px; margin-top: -8px; border: 1px solid #d7e6e7; border-radius: 5px; background: #f0f7f6; }
.detail-empty { font-size: 12px; color: #8799a4; }
.credentials-actions { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 29px; }
.invitation-card { max-width: 650px; margin-top: 30px; }
.invitation-link-field { margin: 24px 0 8px; }
.invitation-link-field label { display: block; margin-bottom: 8px; color: #52707e; font-size: 11px; font-weight: 600; }
.invitation-link-field textarea { width: 100%; resize: vertical; padding: 12px; border: 1px solid #cbdfe0; border-radius: 6px; color: #35656e; background: #f4f9f8; font: 12px/1.8 Consolas, monospace; overflow-wrap: anywhere; }
.confirmation-card .invitation-expiry { margin-top: 8px; margin-bottom: 23px; color: #80949e; font-size: 11px; }
.invitation-card .confirmation-actions { margin-top: 25px; }
@media (min-width: 1750px) { .app-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1250px) {
  .sidebar { width: 240px; padding-left: 16px; padding-right: 16px; }
  .workspace-body { margin-left: 240px; width: calc(100% - 240px); }
  .topbar { padding-left: 32px; padding-right: 32px; }
  .page-content { padding-left: 32px; padding-right: 32px; }
  .page-footer { margin-left: 32px; margin-right: 32px; }
  .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .welcome-copy { padding-left: 29px; }
  .welcome-art { width: 39%; min-width: 230px; }
  .art-core { width: 125px; height: 125px; border-radius: 27px; }
  .art-core svg { width: 89px; height: 89px; }
  .account-layout { grid-template-columns: minmax(0, 1fr) 230px; gap: 20px; }
  .account-summary, .account-card-footer { padding-left: 24px; padding-right: 24px; }
  .profile-details { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 1030px) {
  .welcome-copy h1 { font-size: 31px; }
  .welcome-art { right: -70px; opacity: .7; }
  .welcome-copy > p { font-size: 11px; }
  .section-heading { align-items: stretch; flex-direction: column; gap: 17px; }
  .search-field { width: 100%; }
  .account-layout { grid-template-columns: 1fr; }
  .account-aside { max-width: none; }
  .auth-brand-panel { padding-left: 35px; padding-right: 35px; }
  .auth-main { padding-left: 35px; padding-right: 35px; }
}
@media (max-width: 800px) {
  .workspace { flex-direction: column; }
  .sidebar { position: relative; inset: auto; width: 100%; padding: 19px 24px 0; overflow: visible; }
  .sidebar .brand { margin: 0 0 20px; }
  .brand-mark { width: 39px; height: 39px; border-radius: 8px; }
  .brand-mark svg { width: 31px; height: 31px; }
  .brand-text { font-size: 23px; }
  .brand-text > span { font-size: 9px; }
  .sidebar-section-label, .sidebar-bottom { display: none; }
  .sidebar-nav { flex-direction: row; gap: 8px; overflow-x: auto; padding-bottom: 12px; }
  .sidebar-link { flex-shrink: 0; min-height: 38px; padding: 10px; font-size: 11px; gap: 8px; }
  .sidebar-link.is-active { box-shadow: inset 0 -2px #47b8b6; }
  .sidebar-link > svg { width: 15px; height: 15px; }
  .sidebar-link .nav-external { display: none; }
  .workspace-body { margin-left: 0; width: 100%; }
  .topbar { height: 60px; padding: 0 24px; }
  .page-content { padding: 25px 24px 35px; }
  .page-footer { margin: 0 24px; }
  .welcome-panel { min-height: 276px; }
  .welcome-copy { padding: 27px; }
  .welcome-art { right: 0; width: 40%; opacity: .85; }
  .section-heading { flex-direction: row; align-items: flex-end; }
  .section-heading h2 { font-size: 21px; }
  .search-field { width: 220px; }
  .auth-layout { grid-template-columns: 1fr; }
  .auth-brand-panel { padding: 25px 30px; }
  .auth-brand-copy { display: none; }
  .auth-brand-footer { display: none; }
  .auth-main { min-height: calc(100dvh - 94px); padding: 50px 25px 80px; }
  .auth-card { max-width: 370px; }
  .activation-header { padding: 25px; }
  .confirmation-card { margin: 30px auto; }
}
@media (max-width: 580px) {
  .sidebar { padding: 19px 18px 0; }
  .topbar { padding: 0 20px; }
  .topbar-account > span:first-child { display: none; }
  .breadcrumb { gap: 9px; font-size: 10px; }
  .page-content { padding: 21px 18px 30px; }
  .page-footer { margin: 0 18px; font-size: 9px; gap: 12px; }
  .page-footer > span:last-child { display: none; }
  .welcome-panel { min-height: 279px; }
  .welcome-copy { padding: 25px 22px; }
  .welcome-copy h1 { margin-top: 18px; font-size: 30px; line-height: 1.23; letter-spacing: -1px; }
  .welcome-copy > p { max-width: 275px; font-size: 11px; }
  .welcome-caption { font-size: 9px; }
  .welcome-art { width: 290px; right: -145px; opacity: .28; }
  .welcome-copy .eyebrow { font-size: 8px; letter-spacing: 1.6px; }
  .desktop-break { display: none; }
  .catalogue-section { margin-top: 28px; }
  .section-heading { flex-direction: column; align-items: stretch; gap: 18px; }
  .section-heading h2 { margin-top: 7px; font-size: 22px; }
  .search-field { width: 100%; height: 42px; }
  .search-field input { font-size: 12px; }
  .search-field kbd { display: none; }
  .catalogue-toolbar { flex-wrap: wrap; margin-top: 17px; gap: 12px; }
  .category-filters { gap: 4px; }
  .category-filter { padding: 6px 8px; }
  .results-count { width: 100%; margin-left: 0; }
  .app-grid { grid-template-columns: 1fr; gap: 15px; }
  .app-card { min-height: 260px; }
  .app-card-top { padding-top: 22px; }
  .app-card-copy > p { max-width: 100%; font-size: 12px; }
  .app-card h3 { font-size: 23px; }
  .app-status { font-size: 10px; }
  .category-label { font-size: 10px; }
  .app-open { min-height: 55px; font-size: 12px; }
  .catalogue-footnote { align-items: flex-start; font-size: 10px; }
  .catalogue-footnote svg { margin-top: 1px; }
  .activation-header { padding: 23px 22px; }
  .activation-header-note { display: none; }
  .activation-main { padding: 15px 18px 35px; align-items: flex-start; }
  .activation-card { padding: 30px 24px; }
  .activation-card h1 { font-size: 26px; }
  .auth-main { padding-top: 40px; align-items: flex-start; }
  .auth-card h1 { font-size: 29px; }
  .auth-brand-panel { padding: 23px 25px; }
  .form-field input:not([type='checkbox']):not([type='radio']) { font-size: 16px; }
  .confirmation-card { padding: 29px 24px; margin: 15px auto 35px; }
  .confirmation-card h1 { font-size: 25px; }
  .confirmation-actions { flex-direction: column-reverse; }
  .confirmation-actions .button { width: 100%; }
  .account-summary { gap: 14px; padding: 24px 21px; }
  .avatar-large { width: 50px; height: 50px; font-size: 20px; }
  .account-summary h2 { font-size: 20px; }
  .profile-details { padding: 3px 21px 8px; }
  .profile-details > div { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
  .account-card-footer { padding: 18px 21px; }
  .page-heading h1 { font-size: 29px; }
  .account-aside { padding: 24px; }
  .credentials-card { padding: 23px; }
  .credentials-heading { align-items: flex-start; gap: 13px; }
  .credentials-heading h2 { font-size: 19px; }
  .credential-details > div { grid-template-columns: 1fr; gap: 9px; }
  .credential-details .secret-value { margin-top: 0; }
  .credentials-actions { flex-direction: column; align-items: stretch; }
  .credentials-actions .text-link { justify-content: center; padding: 10px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }