/* Shared product foundations, served locally. */
@font-face  {
    font-family: 'Inter';
    src: url('/assets/fonts/InterVariable.woff2') format('woff2');
    font-style: normal;
    font-weight:100 900;
    font-display: swap;
}

:root  {
    --navy: #102f40;
    --navy-deep: #092735;
    --petrol: #2b7187;
    --petrol-dark: #225e72;
    --aqua: #67c5d1;
    --blue: #2b7187;
    --ink: #161826;
    --text: #161826;
    --muted: #595d6c;
    --line: #e4e7f5;
    --border: #cfd3e5;
    --field-border: #75798c;
    --canvas: #f3f5fe;
    --surface: #fafbff;
    --soft: #eaf2f5;
    --green: #236b58;
    --green-soft: #edf9f4;
    --amber: #775112;
    --amber-soft: #f6eedc;
    --red: #a33b38;
    --red-soft: #fbefef;
    --shadow: none;
    --shadow-lg: 0 1px 4px rgb(22 24 38 / .05), 0 16px 40px rgb(22 24 38 / .1);
    --radius: 8px;
    --radius-lg: 14px;
    --sidebar: 244px;
    --font: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
}

* {
    box-sizing:border-box
}

html {
    font-size:16px;
    scroll-behavior:smooth
}

body {
    margin:0;
    color:var(--text);
    background:var(--canvas);
    font-family:var(--font);
    line-height:1.55;
    -webkit-font-smoothing:antialiased
}

button,input,textarea,select {
    font:inherit
}

button,a,input,select,textarea {
    -webkit-tap-highlight-color:transparent
}

button {
    cursor:pointer
}

a {
    color:var(--petrol);
    text-decoration:none
}

a:hover {
    color:var(--petrol-dark)
}

button:disabled {
    opacity:.48;
    cursor:not-allowed
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
    outline:3px solid #73bdcf;
    outline-offset:3px
}

button, input, textarea, select {
    accent-color:var(--petrol)
}

img,svg {
    max-width:100%
}

img {
    display:block
}

h1,h2,h3,h4,p {
    margin-top:0
}

h1,h2,h3,h4 {
    color:var(--ink);
    letter-spacing:-.035em;
    line-height:1.2
}

h1 {
    font-size:2.25rem;
    font-weight: 500;
    margin-bottom:12px
}

h2 {
    font-size:1.38rem;
    font-weight: 500;
    margin-bottom:14px
}

h3 {
    font-size:1.06rem;
    font-weight: 500;
    margin-bottom:10px
}

h4 {
    font-size:14px;
    margin-bottom:8px
}

p {
    margin-bottom:15px
}

small {
    font-size:12px
}

hr {
    border:0;
    border-top:1px solid var(--line);
    margin:24px 0
}

[hidden],.hidden {
    display:none!important
}

.muted,.text-muted {
    color:var(--muted)
}

.small {
    font-size:13px
}

.strong {
    font-weight: 500;
    color:var(--ink)
}

.text-right {
    text-align:right
}

.text-center {
    text-align:center
}

.nowrap {
    white-space:nowrap
}

.truncate {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}

.mb-0 {
    margin-bottom:0!important
}

.mt-2 {
    margin-top:12px
}

.mt-3 {
    margin-top:20px
}

.mt-4 {
    margin-top:28px
}

.mb-3 {
    margin-bottom:20px
}

.stack {
    display:flex;
    flex-direction:column;
    gap:18px
}

.row {
    display:flex;
    align-items:center;
    gap:12px
}

.between {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px
}

.flex {
    display:flex;
    gap:12px
}

.wrap {
    flex-wrap:wrap
}

.spacer {
    flex:1
}

.icon {
    width:22px;
    height:22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    line-height:1
}

.icon svg,svg.icon {
    width:21px;
    height:21px;
    stroke-width:1.7
}

.icon-box {
    height:46px;
    width:46px;
    border-radius:13px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--soft);
    color:var(--petrol);
    flex-shrink:0
}

.icon-box svg {
    width:23px;
    height:23px
}

.icon-box.purple {
    background:#f1eefb;
    color:#8173b6
}

.icon-box.green {
    background:#eaf5ef;
    color:#41866b
}

.icon-box.orange {
    background:#fbf1e7;
    color:#ae8056
}

.icon-box.blue {
    background:#eaf2fa;
    color:#5382ae
}

/* Main application frame */
.app-shell {
    display:flex;
    min-height:100vh
}

.sidebar {
    position:fixed;
    inset:0 auto 0 0;
    width:var(--sidebar);
    padding:31px 18px 20px;
    background:linear-gradient(165deg,var(--navy) 0%,var(--navy-deep) 100%);
    color:#b8cbd4;
    display:flex;
    flex-direction:column;
    z-index:40;
    overflow-y:auto
}

.brand {
    display:flex;
    align-items:center;
    gap:11px;
    padding:0 12px 31px;
    color:var(--surface);
    font-size:1.16rem;
    font-weight: 500;
    line-height:1.15;
    letter-spacing:-.04em
}

.brand:hover {
    color:var(--surface)
}

.brand-mark {
    width:36px;
    height:36px;
    border:1px solid #5d99ae;
    border-radius:11px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(145deg,#43899d55,#52a7b119);
    color:#b3e7e9;
    font-size:1.1rem;
    flex-shrink:0
}

.brand small {
    display:block;
    margin-top:4px;
    font-weight: 400;
    font-size:12px;
    letter-spacing:.11em;
    text-transform:uppercase;
    color:#83a7b7
}

.brand span strong {
    font-size:1.16rem
}

.sidebar-label,.nav-label {
    font-size:12px;
    font-weight: 500;
    letter-spacing:.13em;
    text-transform:uppercase;
    color:#7093a4;
    padding:0 15px;
    margin:21px 0 8px
}

.sidebar-nav {
    display:flex;
    flex-direction:column;
    gap:4px
}

.nav-link {
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    color:#aec4cf;
    border-radius:10px;
    font-size:14px;
    font-weight: 400;
    transition:background .16s,color .16s
}

.nav-link:hover {
    background:#ffffff0a;
    color:var(--surface)
}

.nav-link.active {
    background:linear-gradient(95deg,#357c944a,#2e6a8032);
    color:var(--surface);
    box-shadow:inset 2px 0 0 #72c4d0
}

.nav-link .icon {
    color:#7fa4b5;
    width:21px
}

.nav-link.active .icon {
    color:#9bdce4
}

.nav-link .count {
    margin-left:auto;
    min-width:22px;
    text-align:center;
    font-size:12px;
    background:#ffffff13;
    border-radius:5px;
    color:#9bb6c4;
    line-height:20px
}

.sidebar-bottom {
    margin-top:auto;
    padding-top:30px
}

.sidebar-note {
    padding:16px 14px;
    background:#ffffff06;
    border:1px solid #ffffff0d;
    border-radius:12px;
    font-size:12px;
    line-height:1.6
}

.sidebar-note strong {
    display:block;
    color:#d7e6ec;
    font-size:12px;
    margin-bottom:7px
}

.sidebar-note .status-dot {
    margin-right:6px
}

.sidebar-footer {
    margin-top:20px;
    padding:0 13px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#648a9c;
    font-size:12px
}

.sidebar-footer a {
    color:#7f9eac
}

.main-area {
    margin-left:var(--sidebar);
    min-width:0;
    flex:1
}

.topbar {
    height:82px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    padding:0 42px;
    background:var(--surface);
    border-bottom:1px solid var(--line)
}

.topbar-left,.topbar-right {
    display:flex;
    align-items:center;
    gap:17px
}

.topbar-right .badge {
    font-size:12px
}

.workspace-switch {
    display:flex;
    align-items:center;
    gap:11px;
    color:var(--ink)
}

.workspace-avatar {
    width:35px;
    height:35px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:#f1f5f6;
    color:var(--petrol);
    font-size:12px;
    font-weight: 500;
    border:1px solid #e3ecef
}

.workspace-switch strong {
    font-size:13px;
    font-weight: 500;
    display:block;
    line-height:1.4
}

.workspace-switch small {
    font-size:12px;
    display:block;
    color:var(--muted)
}

.workspace-switch select {
    color:var(--ink);
    border:0;
    background:transparent;
    padding:4px 16px 4px 0;
    font-size:13px;
    font-weight: 500;
    max-width:230px
}

.avatar,.user-avatar {
    width:35px;
    height:35px;
    border-radius:50%;
    background:#dcebef;
    color:#3c768b;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight: 500;
    flex-shrink:0
}

.user-menu {
    display:flex;
    gap:9px;
    align-items:center
}

.user-menu .user-info {
    font-size:12px;
    line-height:1.4
}

.user-menu .user-info small {
    display:block;
    font-size:12px;
    color:var(--muted)
}

.icon-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:35px;
    height:35px;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--surface);
    color:#7f939e
}

.icon-button:hover {
    background:var(--canvas);
    color:var(--petrol)
}

.divider-v {
    width:1px;
    height:25px;
    background:var(--line)
}

.sidebar-toggle {
    display:none
}

.main-content,.content,.page-content {
    padding:34px 42px 50px;
    max-width:1600px;
    margin:auto
}

.page-header {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    margin-bottom:27px
}

.page-header h1 {
    font-size:1.85rem;
    margin-bottom:9px
}

.page-header p {
    color:var(--muted);
    font-size:14px;
    margin-bottom:0;
    max-width:750px
}

.breadcrumb {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    color:var(--muted);
    margin-bottom:13px
}

.breadcrumb a {
    color:var(--muted)
}

.eyebrow {
    display:block;
    text-transform:uppercase;
    font-size:12px;
    letter-spacing:.15em;
    font-weight: 500;
    color:var(--petrol);
    margin-bottom:10px
}

.section-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin:29px 0 17px
}

.section-header h2 {
    margin:0;
    font-size:1.17rem
}

.section-header .muted {
    font-size:12px
}

.section-title {
    font-size:1.17rem;
    margin-bottom:18px
}

.section-header a {
    font-size:12px;
    font-weight: 500
}

.section-header .icon {
    width:15px;
    height:15px
}

.section-header p {
    margin:5px 0 0;
    font-size:13px;
    color:var(--muted)
}

/* Hero and overview */
.hero {
    position:relative;
    overflow:hidden;
    isolation:isolate;
    background:linear-gradient(115deg,#123747 0%,#20556b 62%,#2b7187 100%);
    color:#c4dce5;
    border-radius:22px;
    min-height:210px;
    padding:36px 40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
    box-shadow:0 10px 28px #1c4b5e13;
    margin-bottom:24px
}

.hero:before {
    content:"";
    position:absolute;
    inset:0;
    background-image:radial-gradient(#a6e5ed30 .7px,transparent .7px);
    background-size:22px 22px;
    opacity:.3;
    z-index:-1;
    mask-image:linear-gradient(90deg,transparent,#000)
}

.hero:after {
    content:"";
    position:absolute;
    height:380px;
    width:380px;
    border:1px solid #b9e3ed20;
    border-radius:50%;
    right:-100px;
    top:-170px;
    box-shadow:0 0 0 46px #a6dbea06,0 0 0 92px #a6dbea04;
    z-index:-1
}

.hero-content {
    max-width:590px
}

.hero .eyebrow {
    color:#8bc8d6;
    font-size:12px;
    margin-bottom:12px
}

.hero h1,.hero h2 {
    color:var(--surface);
    font-size:2rem;
    font-weight: 500;
    letter-spacing:-.045em;
    margin-bottom:12px;
    line-height:1.2
}

.hero p {
    font-size:13px;
    line-height:1.7;
    margin:0;
    max-width:500px;
    color:#b6d1dc
}

.hero .badge {
    color:#c1e8dd;
    background:#ffffff10;
    border-color:#8db9bb36
}

.hero .btn-primary {
    background:var(--surface);
    color:#23596e
}

.hero .btn-primary:hover {
    background:#e4f4f7
}

.hero-stats {
    display:flex;
    gap:30px;
    align-items:center;
    margin-top:15px;
    flex-shrink:0
}

.hero-stat {
    padding-right:28px;
    border-right:1px solid #b6d2df30
}

.hero-stat:last-child {
    border:0;
    padding:0
}

.hero-stat strong {
    display:block;
    color:var(--surface);
    font-size:1.8rem;
    font-weight: 500;
    letter-spacing:-.05em
}

.hero-stat span {
    display:block;
    color:#a9cad6;
    font-size:12px;
    margin-top:4px
}

.hero-graphic {
    width:160px;
    max-width:22%;
    opacity:.8
}

.welcome-subtitle {
    color:var(--muted);
    font-size:13px
}

.overview-grid {
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:22px
}

.grid-2 {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px
}

.grid-3 {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px
}

.grid-4 {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px
}

.card {
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:24px;
    box-shadow:var(--shadow);
    min-width:0
}

.card.no-padding {
    padding:0
}

.card-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    margin-bottom:19px
}

.card-head h2,.card-head h3 {
    margin:0
}

.card-head p {
    margin:5px 0 0;
    color:var(--muted);
    font-size:12px
}

.card-header-icon {
    display:flex;
    gap:12px;
    align-items:center
}

.card-footer {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    border-top:1px solid var(--line);
    padding-top:18px;
    margin-top:20px;
    font-size:12px
}

.stat-card {
    padding:19px 22px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:14px;
    display:flex;
    align-items:center;
    gap:16px
}

.stat-card .icon-box {
    height:42px;
    width:42px;
    border-radius:12px
}

.stat-card strong,.stat-value {
    display:block;
    font-size:1.43rem;
    font-weight: 500;
    color:var(--ink);
    letter-spacing:-.04em;
    line-height:1.2
}

.stat-card small,.stat-label {
    display:block;
    font-size:12px;
    color:var(--muted);
    margin-top:5px
}

.skill-card {
    display:flex;
    flex-direction:column;
    position:relative;
    padding:24px;
    transition:transform .18s,border-color .18s,box-shadow .18s;
    overflow:hidden
}

.skill-card:hover {
    transform:translateY(-3px);
    border-color:#c5dce2;
    box-shadow:0 14px 34px #143f5010
}

.skill-card .skill-top {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    margin-bottom:23px
}

.skill-card .skill-icon {
    font-size:1.3rem
}

.skill-card h3 {
    font-size:1.1rem;
    margin:0 0 10px
}

.skill-card p {
    font-size:13px;
    line-height:1.65;
    color:var(--muted);
    margin-bottom:20px
}

.skill-card .card-footer {
    margin-top:auto
}

.skill-card .btn {
    width:100%;
    margin-top:18px
}

.skill-cover {
    height:120px;
    object-fit:cover;
    border-radius:11px;
    margin:-9px -9px 19px;
    width:calc(100% + 18px);
    max-width:calc(100% + 18px)
}

.skill-category {
    font-size:12px;
    font-weight: 500;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:8px
}

.skill-meta {
    display:flex;
    gap:10px;
    color:var(--muted);
    font-size:12px
}

.skill-meta span+span:before {
    content:"·";
    margin-right:10px;
    color:#aebec6
}

.quick-card {
    display:flex;
    align-items:center;
    gap:15px;
    padding:21px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:15px;
    color:var(--text);
    transition:background .15s,border-color .15s
}

.quick-card:hover {
    background:#fbfefe;
    border-color:#bad8e1
}

.quick-card h3 {
    font-size:14px;
    margin-bottom:5px
}

.quick-card p {
    font-size:12px;
    margin:0;
    color:var(--muted)
}

.quick-card .arrow {
    margin-left:auto;
    color:#9bb3be
}

.activity-list {
    display:flex;
    flex-direction:column
}

.list-row,.activity-row {
    display:flex;
    align-items:center;
    gap:13px;
    padding:16px 0;
    border-bottom:1px solid #edf1f3;
    min-width:0
}

.list-row:first-child,.activity-row:first-child {
    padding-top:0
}

.list-row:last-child,.activity-row:last-child {
    border-bottom:0;
    padding-bottom:0
}

.list-row .body,.activity-row .body {
    flex:1;
    min-width:0
}

.list-row strong,.activity-row strong {
    display:block;
    font-size:13px;
    font-weight: 500;
    color:var(--ink)
}

.list-row small,.activity-row small {
    font-size:12px;
    color:var(--muted)
}

.list-row .icon-box,.activity-row .icon-box {
    width:35px;
    height:35px;
    border-radius:10px
}

.meta {
    display:flex;
    align-items:center;
    gap:9px;
    color:var(--muted);
    font-size:12px
}

.status-dot {
    display:inline-block;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--green);
    flex-shrink:0
}

.status-dot.offline {
    background:#a1adb4
}

.status-dot.amber {
    background:#d9a143
}

.badge,.pill,.tag {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    font-size:12px;
    font-weight: 500;
    line-height:1.2;
    padding:6px 9px;
    border:1px solid #dcebea;
    background:#f0f8f5;
    color:#438270;
    border-radius:6px;
    white-space:nowrap
}

.badge.blue,.pill.blue {
    background:#eef5fa;
    border-color:#dce9f4;
    color:#5c82a1
}

.badge.gray,.badge.neutral,.tag {
    background:#f4f6f8;
    border-color:#e7ecef;
    color:#85949e
}

.badge.amber,.badge.warning {
    background:var(--amber-soft);
    border-color:#f4e6c7;
    color:var(--amber)
}

.badge.red,.badge.danger {
    background:var(--red-soft);
    border-color:#f6dfe2;
    color:var(--red)
}

.badge.local {
    background:#eaf5f1;
    color:#3f8168;
    border-color:#d9ebe3
}

.badge.outline {
    background:transparent
}

.badge.rounded,.pill {
    border-radius:50px
}

.tag-row {
    display:flex;
    flex-wrap:wrap;
    gap:7px
}

/* Actions and forms */
.btn {
    display:inline-flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    min-height:39px;
    padding:10px 18px;
    border-radius:50px;
    border:1px solid transparent;
    font-size:12px;
    font-weight: 500;
    line-height:1.3;
    transition:background .15s,border-color .15s,transform .15s;
    white-space:nowrap;
    text-align:center
}

.btn:hover {
    transform:translateY(-1px)
}

.btn .icon,.btn svg {
    width:16px;
    height:16px
}

.btn-primary {
    background:var(--petrol);
    color:var(--surface);
    box-shadow:0 3px 9px #2b718716
}

.btn-primary:hover {
    background:var(--petrol-dark);
    color:var(--surface)
}

.btn-secondary {
    background:var(--surface);
    color:var(--petrol);
    border-color:#d5e3e8
}

.btn-secondary:hover {
    background:var(--soft);
    border-color:#bdcfd6;
    color:var(--petrol-dark)
}

.btn-ghost {
    background:transparent;
    color:var(--muted);
    border-color:transparent
}

.btn-ghost:hover {
    background:#eaf0f3;
    color:var(--petrol)
}

.btn-danger {
    color:var(--red);
    background:var(--red-soft);
    border-color:#f2d7db
}

.btn-sm {
    min-height:31px;
    padding:7px 12px;
    font-size:12px
}

.btn-lg {
    min-height:46px;
    padding:13px 23px;
    font-size:13px
}

.btn-block {
    width:100%
}

.button-row,.actions {
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-top:24px
}

.button-row.between {
    justify-content:space-between
}

.field {
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:19px;
    min-width:0
}

.field label,.field-label {
    font-size:12px;
    color:var(--ink);
    font-weight: 500
}

.field .hint,.field-help {
    font-size:12px;
    color:var(--muted);
    line-height:1.6
}

.input,.textarea,.select {
    display:block;
    width:100%;
    color:var(--text);
    background:var(--surface);
    border:1px solid #dce5e9;
    border-radius:10px;
    padding:11px 13px;
    line-height:1.5;
    outline:none;
    transition:border-color .15s,box-shadow .15s;
    font-size:13px
}

.input::placeholder,.textarea::placeholder {
    color:#9eafb8
}

.input:focus,.textarea:focus,.select:focus {
    border-color:#74a9bb;
    box-shadow:0 0 0 3px #2b718711
}

.textarea {
    resize:vertical;
    min-height:118px
}

.textarea.code {
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:12px;
    line-height:1.7
}

.input-sm,.select-sm {
    padding:7px 10px;
    font-size:12px
}

.form-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 20px
}

.span-2 {
    grid-column:span 2
}

.checkbox-row {
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:12px;
    line-height:1.6
}

.checkbox-row input {
    margin-top:4px;
    width:15px;
    height:15px;
    flex-shrink:0
}

.checkbox-row strong {
    color:var(--ink);
    font-weight: 500
}

.toggle-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:17px 0;
    border-bottom:1px solid var(--line)
}

.toggle-row:last-child {
    border-bottom:0
}

.toggle-row strong {
    display:block;
    font-size:13px;
    color:var(--ink);
    font-weight: 500
}

.toggle-row p {
    font-size:12px;
    color:var(--muted);
    margin:5px 0 0
}

.toggle {
    width:36px;
    height:21px;
    border-radius:50px;
    position:relative;
    appearance:none;
    background:#ced9de;
    flex-shrink:0;
    cursor:pointer;
    transition:background .15s;
    border:0
}

.toggle:checked {
    background:var(--petrol)
}

.toggle:after {
    content:"";
    position:absolute;
    width:15px;
    height:15px;
    background:white;
    top:3px;
    left:3px;
    border-radius:50%;
    transition:transform .15s;
    box-shadow:0 1px 3px #0002
}

.toggle:checked:after {
    transform:translateX(15px)
}

.search-input {
    position:relative
}

.search-input .input {
    padding-left:37px
}

.search-input .icon {
    position:absolute;
    left:12px;
    top:11px;
    color:#97aab4;
    width:17px;
    height:17px
}

.toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    flex-wrap:wrap;
    margin-bottom:20px
}

.toolbar .search-input {
    width:280px
}

.tabs {
    display:flex;
    align-items:center;
    gap:5px;
    border-bottom:1px solid var(--line);
    margin-bottom:24px;
    padding-bottom:0;
    overflow-x:auto
}

.tab {
    padding:12px 18px 14px;
    border:0;
    background:transparent;
    color:var(--muted);
    font-size:12px;
    font-weight: 500;
    border-bottom:2px solid transparent;
    white-space:nowrap;
    display:inline-flex;
    align-items:center;
    gap:8px
}

.tab:hover {
    color:var(--petrol)
}

.tab.active {
    color:var(--petrol);
    border-color:var(--petrol)
}

.tabs.pills {
    display:inline-flex;
    padding:4px;
    background:#eaf0f3;
    border:0;
    border-radius:50px;
    gap:0
}

.tabs.pills .tab {
    border:0;
    padding:8px 17px;
    border-radius:50px;
    font-size:12px
}

.tabs.pills .tab.active {
    background:var(--surface);
    box-shadow:0 2px 5px #173e4f0a;
    color:var(--ink)
}

/* Notices, data and task flow */
.notice {
    display:flex;
    align-items:flex-start;
    gap:11px;
    border:1px solid #dbe8ed;
    background:#eff6f8;
    color:#4d7889;
    border-radius:12px;
    padding:15px 17px;
    font-size:12px;
    line-height:1.65;
    margin-bottom:20px
}

.notice .icon {
    margin-top:1px;
    width:17px;
    height:17px
}

.notice p {
    margin:0
}

.notice strong {
    font-weight: 500;
    display:block;
    color:#345e70;
    margin-bottom:3px
}

.notice.warning {
    background:var(--amber-soft);
    border-color:#f1e5c9;
    color:#997438
}

.notice.warning strong {
    color:#8c651e
}

.notice.success {
    background:var(--green-soft);
    border-color:#d8eadf;
    color:#56856d
}

.notice.success strong {
    color:#367453
}

.notice.error,.notice.danger {
    background:var(--red-soft);
    border-color:#efd8dc;
    color:#9d5a63
}

.notice.error strong,.notice.danger strong {
    color:#9b4552
}

.notice .btn {
    margin-left:auto;
    flex-shrink:0
}

.error-text {
    font-size:12px;
    color:var(--red);
    margin-top:5px
}

.flash {
    padding:14px 18px;
    border-radius:12px;
    margin-bottom:22px;
    font-size:12px;
    border:1px solid #d1e9de;
    background:#eaf7f0;
    color:#367457
}

.flash.error {
    background:var(--red-soft);
    color:var(--red);
    border-color:#f3d6dc
}

.table-wrap {
    overflow-x:auto;
    border-radius:12px;
    border:1px solid var(--line)
}

.table {
    width:100%;
    border-collapse:collapse;
    text-align:left;
    font-size:12px;
    white-space:normal
}

.table th {
    background:#f7f9fa;
    color:#83949d;
    padding:13px 17px;
    font-weight: 500;
    font-size:12px;
    border-bottom:1px solid var(--line);
    text-transform:uppercase;
    letter-spacing:.05em;
    white-space:nowrap
}

.table td {
    padding:16px 17px;
    border-bottom:1px solid #edf1f3;
    vertical-align:middle
}

.table tr:last-child td {
    border-bottom:0
}

.table td strong {
    color:var(--ink);
    font-weight: 500
}

.table tr:hover td {
    background:#fcfefe
}

.table .input,.table .select {
    font-size:12px;
    padding:7px 9px;
    min-width:100px
}

.table small {
    font-size:12px;
    color:var(--muted)
}

.empty-state {
    text-align:center;
    padding:45px 24px;
    max-width:650px;
    margin:auto
}

.empty-state .icon-box {
    margin:0 auto 18px;
    height:56px;
    width:56px;
    border-radius:17px
}

.empty-state h3 {
    font-size:1.1rem
}

.empty-state p {
    font-size:13px;
    color:var(--muted);
    max-width:400px;
    margin:0 auto 20px
}

.steps {
    display:flex;
    align-items:flex-start;
    gap:0;
    margin:0 0 28px;
    padding:0;
    list-style:none
}

.step {
    flex:1;
    display:flex;
    align-items:center;
    gap:10px;
    position:relative;
    font-size:12px;
    color:#98a8b1;
    line-height:1.5
}

.step:not(:last-child):after {
    content:"";
    height:1px;
    background:var(--line);
    flex:1;
    margin:0 15px
}

.step-number,.step>span:first-child {
    display:flex;
    align-items:center;
    justify-content:center;
    background:#e8eef1;
    color:#94a7b0;
    width:27px;
    height:27px;
    border-radius:50%;
    font-weight: 500;
    font-size:12px;
    flex-shrink:0
}

.step.active {
    color:var(--ink);
    font-weight: 500
}

.step.active .step-number,.step.active>span:first-child {
    background:var(--petrol);
    color:white;
    box-shadow:0 0 0 4px #2b71870b
}

.step.complete {
    color:var(--petrol)
}

.step.complete .step-number,.step.complete>span:first-child {
    background:#e1f1ed;
    color:var(--green)
}

.file-drop {
    border:1.5px dashed #c7dce4;
    border-radius:14px;
    background:#f8fbfc;
    text-align:center;
    padding:30px 20px;
    cursor:pointer;
    transition:border-color .15s,background .15s
}

.file-drop:hover,.file-drop.dragover {
    background:#eef7f9;
    border-color:#74a9bb
}

.file-drop .icon-box {
    margin:0 auto 13px;
    background:#eaf3f6
}

.file-drop strong {
    font-size:13px;
    color:var(--ink);
    display:block;
    margin-bottom:5px
}

.file-drop p {
    font-size:12px;
    color:var(--muted);
    margin:0
}

.file-drop input {
    max-width:100%;
    margin-top:13px;
    font-size:12px
}

.file-list {
    display:flex;
    flex-direction:column;
    gap:9px;
    margin-top:14px
}

.file-item {
    display:flex;
    align-items:center;
    gap:10px;
    padding:11px 13px;
    background:#f5f8f9;
    border-radius:9px;
    font-size:12px
}

.file-item .icon {
    color:var(--petrol);
    width:17px
}

.file-item small {
    color:var(--muted);
    font-size:12px
}

.fact-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
    margin:18px 0
}

.fact-item {
    background:var(--surface);
    padding:16px 18px
}

.fact-item span,.fact-item small {
    display:block;
    color:var(--muted);
    font-size:12px;
    margin-bottom:6px
}

.fact-item strong {
    font-size:14px;
    font-weight: 500;
    color:var(--ink)
}

.fact-item .source {
    font-size:12px;
    color:#88a0aa;
    margin-top:6px
}

.review-grid {
    display:grid;
    grid-template-columns:1fr 340px;
    gap:24px;
    align-items:start
}

.image-picker {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin:16px 0
}

.image-option {
    position:relative;
    border:2px solid transparent;
    border-radius:12px;
    overflow:hidden;
    background:#f0f5f6;
    cursor:pointer
}

.image-option img {
    height:135px;
    width:100%;
    object-fit:cover
}

.image-option.selected {
    border-color:var(--petrol)
}

.image-option input {
    position:absolute;
    top:9px;
    left:9px;
    width:16px;
    height:16px
}

.image-option label,.image-option span {
    display:block;
    padding:9px;
    font-size:12px;
    text-align:center;
    color:var(--muted)
}

.document-preview {
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:13px;
    padding:15px;
    box-shadow:var(--shadow)
}

.document-preview img {
    border-radius:7px;
    margin-bottom:12px;
    width:100%;
    height:150px;
    object-fit:cover
}

.document-preview h3 {
    font-size:1.14rem;
    margin:15px 5px 10px
}

.document-preview p {
    font-size:12px;
    margin:0 5px 10px;
    color:var(--muted)
}

.document-preview .preview-label {
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--petrol);
    margin:10px 5px
}

.progress {
    height:5px;
    background:#eaf0f3;
    border-radius:20px;
    overflow:hidden
}

.progress span {
    display:block;
    height:100%;
    background:var(--petrol);
    border-radius:20px
}

.schedule-grid {
    display:grid;
    grid-template-columns:80px repeat(5,minmax(100px,1fr));
    gap:7px;
    min-width:650px
}

.schedule-head {
    font-size:12px;
    color:var(--muted);
    text-align:center;
    font-weight: 500;
    padding:9px
}

.schedule-slot {
    border-radius:9px;
    min-height:90px;
    background:#edf5f8;
    border-left:3px solid #72a7b9;
    padding:12px 10px;
    font-size:12px;
    color:#637f8e
}

.schedule-slot strong {
    display:block;
    color:#315f72;
    font-size:12px;
    font-weight: 500;
    margin-bottom:5px
}

.schedule-slot.empty {
    background:#f5f7f8;
    border-left-color:#dbe4e8;
    color:#a6b5be
}

.schedule-slot.warning {
    background:#fff7e7;
    border-left-color:#d8b376;
    color:#9e804d
}

.schedule-slot small {
    font-size:12px
}

.schedule-scroll {
    overflow-x:auto
}

.privacy-findings {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:12px
}

.pii-chip {
    background:#fff2df;
    color:#a57831;
    border:1px solid #f1e2c7;
    border-radius:6px;
    padding:5px 9px;
    font-size:12px
}

.pii-chip strong {
    font-weight: 500;
    margin-right:5px
}

.source-card {
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:20px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:14px;
    min-width:0
}

.source-card .source-body {
    min-width:0;
    flex:1
}

.source-card h3 {
    font-size:13px;
    letter-spacing:-.02em;
    margin-bottom:6px
}

.source-card p {
    font-size:12px;
    color:var(--muted);
    line-height:1.65;
    margin-bottom:10px
}

.source-card .meta {
    font-size:12px
}

.source-card .icon-box {
    width:40px;
    height:40px;
    border-radius:11px
}

.source-card .actions {
    margin:0
}

.provider-card {
    border:1px solid var(--line);
    border-radius:13px;
    padding:20px;
    background:var(--surface)
}

.provider-card.selected {
    border-color:#84afbf;
    box-shadow:0 0 0 2px #2b71870a
}

.provider-card .provider-head {
    display:flex;
    align-items:center;
    gap:11px;
    margin-bottom:14px
}

.provider-logo {
    height:36px;
    width:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:#f1f5f7;
    color:var(--petrol);
    font-size:14px;
    font-weight: 500
}

.provider-card h3 {
    margin:0;
    font-size:13px
}

.provider-card p {
    font-size:12px;
    color:var(--muted);
    margin:8px 0 0
}

.settings-section {
    margin-bottom:27px
}

.settings-section:last-child {
    margin-bottom:0
}

.settings-section h3 {
    font-size:14px
}

.settings-section .settings-desc {
    color:var(--muted);
    font-size:12px;
    margin-bottom:20px
}

/* Chat */
.chat-layout {
    display:grid;
    grid-template-columns:minmax(0,1fr) 278px;
    gap:22px;
    align-items:start
}

.chat-panel {
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    min-height:620px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    box-shadow:var(--shadow)
}

.chat-topbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:18px 23px;
    border-bottom:1px solid var(--line);
    font-size:12px
}

.chat-topbar .select {
    width:auto;
    max-width:220px;
    padding:8px 13px;
    font-size:12px;
    background:#f7fafb;
    border-radius:50px
}

.chat-messages {
    padding:26px;
    display:flex;
    flex-direction:column;
    gap:23px;
    min-height:350px;
    flex:1;
    max-height:680px;
    overflow-y:auto;
    scroll-behavior:smooth
}

.chat-welcome {
    margin:auto;
    text-align:center;
    padding:38px 20px;
    max-width:510px
}

.chat-welcome .brand-mark {
    margin:auto auto 21px;
    width:52px;
    height:52px;
    font-size:1.5rem;
    border-color:#c1dde4;
    background:linear-gradient(145deg,#eef9fa,#e1eff3);
    color:#508aa0
}

.chat-welcome h2 {
    font-size:1.6rem;
    margin-bottom:12px
}

.chat-welcome p {
    color:var(--muted);
    font-size:13px;
    line-height:1.7
}

.suggestions {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:25px
}

.suggestion {
    font-size:12px;
    padding:12px 14px;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--surface);
    color:#66818e;
    text-align:left;
    line-height:1.6;
    transition:border-color .15s
}

.suggestion:hover {
    border-color:#9fc6d2;
    background:#f6fbfc
}

.message {
    display:flex;
    align-items:flex-start;
    gap:12px;
    font-size:13px;
    line-height:1.8;
    max-width:100%
}

.message .message-avatar {
    height:30px;
    width:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#ecf4f6;
    color:var(--petrol);
    border-radius:9px;
    font-size:12px;
    font-weight: 500;
    flex-shrink:0
}

.message-body {
    min-width:0;
    flex:1
}

.message-label {
    font-size:12px;
    font-weight: 500;
    color:var(--ink);
    margin-bottom:6px;
    display:flex;
    align-items:center;
    gap:9px
}

.message-label small {
    font-size:12px;
    font-weight: 400;
    color:var(--muted)
}

.message-text {
    white-space:pre-wrap;
    overflow-wrap:anywhere
}

.message.user {
    background:#f4f8fa;
    padding:16px;
    border-radius:12px
}

.message.user .message-avatar {
    background:#dcebf0
}

.message.assistant {
    padding:0 3px
}

.message .source-citation {
    display:inline-flex;
    padding:3px 7px;
    background:#edf5f8;
    border-radius:5px;
    color:var(--petrol);
    font-size:12px;
    margin:7px 5px 0 0
}

.composer-wrap {
    padding:0 21px 17px
}

.composer {
    border:1px solid #d3e0e6;
    border-radius:14px;
    background:var(--surface);
    overflow:hidden;
    box-shadow:0 4px 12px #19445a04
}

.composer:focus-within {
    border-color:#81acbd;
    box-shadow:0 0 0 3px #2b71870a
}

.composer textarea {
    width:100%;
    border:0;
    outline:0;
    resize:none;
    min-height:86px;
    padding:17px 17px 8px;
    font-size:13px;
    color:var(--text);
    background:transparent
}

.composer textarea::placeholder {
    color:#99abb5
}

.composer-bottom {
    padding:8px 12px 12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px
}

.composer-tools {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    color:var(--muted)
}

.composer .btn {
    min-height:32px;
    padding:8px 13px;
    font-size:12px
}

.composer-hint {
    font-size:12px;
    text-align:center;
    color:#95a7b1;
    margin:11px 0 0
}

.chat-aside {
    display:flex;
    flex-direction:column;
    gap:17px
}

.chat-aside .card {
    padding:20px
}

.chat-aside h3 {
    font-size:13px
}

.chat-aside p {
    font-size:12px;
    color:var(--muted)
}

.typing {
    display:flex;
    gap:5px;
    align-items:center;
    padding:8px 0
}

.typing span {
    height:5px;
    width:5px;
    border-radius:50%;
    background:#78a3b5;
    animation:pulse 1.2s infinite
}

.typing span:nth-child(2) {
    animation-delay:.15s
}

.typing span:nth-child(3) {
    animation-delay:.3s
}

@keyframes pulse {
    0%,80%,100% {
        opacity:.35;
        transform:translateY(0)
    }

    40% {
        opacity:1;
        transform:translateY(-3px)
    }

}

.loading-spinner {
    width:15px;
    height:15px;
    border:2px solid #ffffff55;
    border-top-color:var(--surface);
    display:inline-block;
    border-radius:50%;
    animation:spin .8s linear infinite
}

@keyframes spin {
    to {
        transform:rotate(360deg)
    }

}

/* Login, overlays */
.login-shell {
    min-height:100vh;
    display:grid;
    grid-template-columns:1fr 1fr;
    background:var(--surface)
}

.login-brand {
    position:relative;
    overflow:hidden;
    background:linear-gradient(140deg,#0c2e40,#255b73 70%,#357e92);
    padding:55px 70px;
    color:#b1cfdb;
    display:flex;
    flex-direction:column;
    isolation:isolate
}

.login-brand:before {
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse at 80% 50%,#6eb9c424,transparent 55%);
    z-index:-1
}

.login-brand:after {
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border:1px solid #c9e9ee16;
    border-radius:50%;
    bottom:-200px;
    right:-160px;
    box-shadow:0 0 0 65px #b6e1e906,0 0 0 130px #b6e1e904;
    z-index:-1
}

.login-brand .brand {
    padding:0;
    color:var(--surface)
}

.login-brand .login-intro {
    margin:auto 0;
    max-width:480px;
    padding:65px 0
}

.login-brand h1 {
    font-size:2.8rem;
    color:var(--surface);
    line-height:1.14;
    letter-spacing:-.05em;
    font-weight: 500;
    margin-bottom:22px
}

.login-brand p {
    font-size:14px;
    line-height:1.9;
    max-width:420px;
    color:#b2cdd9
}

.login-brand .eyebrow {
    color:#7eb8cc;
    margin-bottom:22px
}

.login-feature {
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:18px;
    font-size:12px;
    color:#d1e4ea
}

.login-feature .icon {
    color:#9ad1d6;
    width:18px;
    height:18px
}

.login-brand .copyright {
    font-size:12px;
    color:#77a0b2
}

.login-form-area {
    display:flex;
    align-items:center;
    justify-content:center;
    padding:60px 45px
}

.login-card {
    width:100%;
    max-width:420px
}

.login-card h2 {
    font-size:1.8rem;
    margin-bottom:12px
}

.login-card>.muted {
    font-size:13px;
    margin-bottom:27px
}

.login-card .btn {
    min-height:44px
}

.login-separator {
    position:relative;
    text-align:center;
    color:#a1b1ba;
    font-size:12px;
    letter-spacing:.09em;
    text-transform:uppercase;
    margin:29px 0 20px
}

.login-separator:before {
    content:"";
    position:absolute;
    top:50%;
    left:0;
    right:0;
    height:1px;
    background:var(--line)
}

.login-separator span {
    position:relative;
    background:var(--surface);
    padding:0 13px
}

.demo-access {
    border:1px solid var(--line);
    border-radius:13px;
    padding:16px;
    margin-bottom:11px;
    display:flex;
    align-items:center;
    gap:13px;
    background:var(--surface);
    transition:border-color .15s,background .15s;
    width:100%;
    text-align:left;
    color:var(--text)
}

.demo-access:hover {
    border-color:#adcbd6;
    background:#fafdfd
}

.demo-access .icon-box {
    width:37px;
    height:37px;
    border-radius:10px
}

.demo-access strong {
    display:block;
    font-size:12px;
    color:var(--ink);
    font-weight: 500
}

.demo-access small {
    font-size:12px;
    color:var(--muted);
    display:block;
    margin-top:3px
}

.login-footnote {
    text-align:center;
    color:#9aabb5;
    font-size:12px;
    margin-top:23px;
    line-height:1.8
}

.modal-backdrop {
    position:fixed;
    inset:0;
    background:#102d4059;
    backdrop-filter:blur(4px);
    z-index:80;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px
}

.modal {
    background:var(--surface);
    box-shadow:var(--shadow-lg);
    border-radius:20px;
    width:100%;
    max-width:620px;
    max-height:90vh;
    overflow:auto;
    padding:30px
}

.modal-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    margin-bottom:20px
}

.modal-head h2 {
    margin:0;
    font-size:1.3rem
}

.modal .close {
    border:0;
    background:#f4f7f8;
    border-radius:50%;
    width:30px;
    height:30px;
    color:#7f959f
}

.toast {
    position:fixed;
    bottom:26px;
    right:30px;
    background:var(--navy);
    color:var(--surface);
    padding:14px 21px;
    border-radius:12px;
    box-shadow:var(--shadow-lg);
    font-size:12px;
    z-index:99;
    max-width:440px
}

.demo-label {
    font-size:12px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#93a9b4
}

.footer-note {
    font-size:12px;
    color:#95a6b0;
    margin-top:27px;
    display:flex;
    justify-content:space-between;
    gap:16px
}

.privacy-summary {
    display:flex;
    align-items:center;
    gap:9px;
    padding:12px 15px;
    background:#edf6f2;
    border:1px solid #d9ebe3;
    border-radius:10px;
    font-size:12px;
    color:#4f826e
}

.privacy-summary .icon {
    width:17px;
    height:17px
}

.privacy-summary strong {
    font-weight: 500
}

.kbd {
    font-family:inherit;
    background:#f3f6f8;
    border:1px solid #e1e8ec;
    border-radius:4px;
    padding:2px 5px;
    font-size:12px;
    color:#92a4ad
}

.result-preview {
    white-space:pre-wrap;
    font-size:13px;
    line-height:1.85;
    background:#fbfcfd;
    border:1px solid var(--line);
    border-radius:12px;
    padding:22px
}

.result-preview h2 {
    white-space:normal
}

.alert-list {
    margin:0;
    padding-left:19px;
    font-size:12px;
    color:#9a7333
}

.toolbar .tabs {
    margin:0;
    border:0
}

.health-item {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    margin-bottom:10px
}

.health-item:last-child {
    margin-bottom:0
}

.health-item .status-dot {
    margin-left:auto
}

.segmented {
    display:flex;
    border-radius:10px;
    padding:4px;
    background:#edf2f5;
    gap:3px
}

.segmented label {
    display:block;
    border-radius:7px;
    cursor:pointer;
    font-size:12px;
    font-weight: 500;
    text-align:center;
    flex:1;
    color:#7a909c;
    padding:8px 12px
}

.segmented label:has(input:checked) {
    color:var(--petrol);
    background:var(--surface);
    box-shadow:0 2px 5px #143e4f0c
}

.segmented input {
    position:absolute;
    opacity:0;
    pointer-events:none
}

/* Responsive layout */
@media(min-width:1600px) {
    .main-content,.content,.page-content {
        padding:42px 54px 60px
    }

    .topbar {
        padding:0 54px
    }

    .hero {
        min-height:230px;
        padding:42px 46px
    }

    .hero h1,.hero h2 {
        font-size:2.25rem
    }

}

@media(max-width:1200px) {
    :root {
        --sidebar:218px
    }

    .sidebar {
        padding-left:13px;
        padding-right:13px
    }

    .brand {
        font-size:1.05rem
    }

    .topbar {
        padding:0 28px
    }

    .main-content,.content,.page-content {
        padding:29px 28px 40px
    }

    .hero {
        padding:30px;
        gap:20px
    }

    .hero h1,.hero h2 {
        font-size:1.8rem
    }

    .hero-stats {
        gap:19px
    }

    .hero-stat {
        padding-right:18px
    }

    .hero-stat strong {
        font-size:1.55rem
    }

    .grid-3 {
        gap:15px
    }

    .card,.skill-card {
        padding:21px
    }

    .chat-layout {
        grid-template-columns:minmax(0,1fr) 245px;
        gap:17px
    }

    .chat-aside .card {
        padding:17px
    }

    .review-grid {
        grid-template-columns:1fr 280px;
        gap:20px
    }

    .login-brand {
        padding:45px
    }

    .login-brand h1 {
        font-size:2.4rem
    }

}

@media(max-width:1020px) {
    .hero-stats {
        display:none
    }

    .grid-4 {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .grid-3 {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .overview-grid {
        grid-template-columns:1fr
    }

    .chat-layout {
        grid-template-columns:1fr
    }

    .chat-aside {
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .chat-aside .card:nth-child(n+3) {
        display:none
    }

    .review-grid {
        grid-template-columns:1fr
    }

    .document-preview {
        display:none
    }

    .topbar-right .user-info {
        display:none
    }

    .fact-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .steps {
        gap:10px
    }

    .step:not(:last-child):after {
        margin:0 3px
    }

    .step {
        font-size:12px
    }

    .login-brand {
        padding:40px
    }

    .login-brand h1 {
        font-size:2.2rem
    }

}

@media(max-width:800px) {
    :root {
        --sidebar:0px
    }

    .sidebar {
        width:244px;
        transform:translateX(-100%);
        transition:transform .2s;
        box-shadow:var(--shadow-lg)
    }

    .sidebar.open,body.sidebar-open .sidebar {
        transform:translateX(0)
    }

    .main-area {
        margin-left:0
    }

    .sidebar-toggle {
        display:inline-flex
    }

    .topbar {
        height:72px;
        padding:0 22px
    }

    .topbar-left,.topbar-right {
        gap:12px
    }

    .workspace-switch strong {
        font-size:12px
    }

    .workspace-switch small {
        font-size:12px
    }

    .workspace-switch select {
        font-size:12px;
        max-width:190px
    }

    .topbar-right>.badge {
        display:none
    }

    .topbar-right .divider-v {
        display:none
    }

    .main-content,.content,.page-content {
        padding:27px 22px 35px
    }

    .page-header h1 {
        font-size:1.65rem
    }

    .page-header p {
        font-size:13px
    }

    .hero {
        padding:30px;
        border-radius:17px;
        min-height:190px
    }

    .hero h1,.hero h2 {
        font-size:1.85rem
    }

    .hero p {
        font-size:13px
    }

    .hero-graphic {
        display:none
    }

    .login-shell {
        grid-template-columns:1fr
    }

    .login-brand {
        min-height:auto;
        padding:25px 30px
    }

    .login-brand .brand {
        padding:0;
        font-size:14px
    }

    .login-brand .login-intro {
        padding:30px 0 5px;
        margin:0;
        max-width:100%
    }

    .login-brand h1 {
        font-size:1.8rem;
        margin-bottom:15px;
        max-width:550px
    }

    .login-brand p {
        max-width:550px;
        font-size:12px;
        margin:0
    }

    .login-brand .login-feature,.login-brand .copyright,.login-brand .eyebrow {
        display:none
    }

    .login-form-area {
        padding:36px 25px
    }

    .login-card {
        max-width:460px
    }

    .login-card h2 {
        font-size:1.5rem
    }

    .card {
        padding:21px
    }

    .page-header>.btn {
        padding:9px 13px;
        min-height:35px;
        font-size:12px
    }

    .footer-note {
        flex-direction:column;
        gap:5px
    }

    .toast {
        left:20px;
        right:20px;
        bottom:20px;
        max-width:none
    }

    .chat-panel {
        min-height:580px
    }

    .chat-messages {
        max-height:600px
    }

    .table th,.table td {
        padding:12px
    }

    .modal {
        padding:23px
    }

}

@media(max-width:560px) {
    html {
        font-size:16px
    }

    .topbar {
        padding:0 16px;
        height:67px
    }

    .workspace-avatar {
        width:31px;
        height:31px
    }

    .workspace-switch {
        gap:8px
    }

    .workspace-switch select {
        max-width:170px
    }

    .topbar-right .icon-button {
        display:none
    }

    .user-avatar,.avatar {
        height:31px;
        width:31px
    }

    .main-content,.content,.page-content {
        padding:24px 16px 32px
    }

    .page-header {
        gap:14px;
        flex-wrap:wrap;
        margin-bottom:22px
    }

    .page-header h1 {
        font-size:1.6rem
    }

    .page-header p {
        font-size:13px;
        line-height:1.7
    }

    .hero {
        padding:26px 24px;
        min-height:190px
    }

    .hero h1,.hero h2 {
        font-size:1.8rem
    }

    .hero p {
        font-size:13px
    }

    .grid-2,.grid-3 {
        grid-template-columns:1fr;
        gap:15px
    }

    .grid-4 {
        gap:10px
    }

    .stat-card {
        padding:15px 13px;
        gap:10px
    }

    .stat-card .icon-box {
        width:33px;
        height:33px;
        border-radius:9px
    }

    .stat-card strong {
        font-size:1.25rem
    }

    .stat-card small {
        font-size:12px
    }

    .section-header {
        margin-top:25px;
        gap:10px;
        align-items:flex-start
    }

    .section-header h2 {
        font-size:1.13rem
    }

    .section-header a {
        font-size:12px;
        white-space:nowrap
    }

    .card,.skill-card {
        padding:21px
    }

    .skill-card .skill-top {
        margin-bottom:18px
    }

    .skill-card p {
        margin-bottom:16px
    }

    .btn {
        min-height:39px;
        font-size:12px;
        padding:10px 17px
    }

    .form-grid {
        grid-template-columns:1fr;
        gap:0
    }

    .span-2 {
        grid-column:auto
    }

    .steps {
        flex-wrap:wrap;
        row-gap:15px;
        margin-bottom:24px
    }

    .step {
        flex-basis:45%;
        flex-grow:0;
        font-size:12px
    }

    .step:not(:last-child):after {
        display:none
    }

    .notice {
        font-size:12px;
        padding:13px
    }

    .notice .btn {
        display:none
    }

    .image-picker {
        gap:8px
    }

    .image-option img {
        height:95px
    }

    .image-option label,.image-option span {
        font-size:12px;
        padding:6px 4px
    }

    .fact-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .fact-item {
        padding:13px
    }

    .fact-item strong {
        font-size:13px
    }

    .tabs {
        margin-bottom:20px
    }

    .tab {
        padding:11px 14px
    }

    .toolbar {
        gap:12px
    }

    .toolbar .search-input {
        width:100%
    }

    .chat-topbar {
        padding:14px 15px;
        gap:8px;
        flex-wrap:wrap
    }

    .chat-topbar .select {
        max-width:190px;
        font-size:12px
    }

    .chat-messages {
        padding:21px 16px;
        gap:20px
    }

    .chat-welcome {
        padding:25px 0
    }

    .chat-welcome h2 {
        font-size:1.4rem
    }

    .chat-welcome p {
        font-size:13px
    }

    .suggestions {
        grid-template-columns:1fr
    }

    .suggestion {
        padding:10px 13px;
        font-size:12px
    }

    .composer-wrap {
        padding:0 12px 13px
    }

    .composer textarea {
        padding:14px;
        min-height:80px
    }

    .composer-bottom {
        gap:6px
    }

    .composer-tools {
        gap:6px;
        font-size:12px
    }

    .composer-tools .badge {
        font-size:12px;
        padding:4px 6px
    }

    .composer-hint {
        font-size:12px
    }

    .chat-aside {
        grid-template-columns:1fr
    }

    .chat-aside .card:nth-child(n+2) {
        display:none
    }

    .message {
        font-size:13px;
        gap:9px
    }

    .message.user {
        padding:13px
    }

    .message .message-avatar {
        width:26px;
        height:26px
    }

    .button-row {
        justify-content:stretch;
        gap:8px
    }

    .button-row .btn {
        flex:1
    }

    .button-row .btn-ghost {
        flex:0 0 auto
    }

    .card-footer {
        font-size:12px
    }

    .login-brand {
        padding:24px
    }

    .login-brand .login-intro {
        padding-top:25px
    }

    .login-brand h1 {
        font-size:1.7rem
    }

    .login-form-area {
        padding:32px 22px
    }

    .login-card h2 {
        font-size:1.5rem
    }

    .modal-backdrop {
        padding:15px
    }

    .modal {
        padding:21px;
        border-radius:15px
    }

    .modal-head h2 {
        font-size:1.18rem
    }

}

@media(prefers-reduced-motion:reduce) {
    * {
        scroll-behavior:auto!important;
        animation:none!important;
        transition:none!important
    }

    .skill-card:hover,.btn:hover {
        transform:none
    }

}

@media print {
    .sidebar,.topbar,.button-row,.footer-note,.composer-wrap,.chat-aside {
        display:none!important
    }

    .main-area {
        margin-left:0
    }

    .main-content,.content,.page-content {
        padding:0
    }

    .app-shell {
        display:block
    }

    body {
        background:var(--surface)
    }

    .card {
        box-shadow:none;
        break-inside:avoid
    }

    .hero {
        print-color-adjust:exact;
        -webkit-print-color-adjust:exact
    }

    .badge {
        print-color-adjust:exact
    }

}

/* Application-specific components and login aliases */
.brand-symbol {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    height:38px;
    width:38px;
    border:1px solid #78b8c359;
    border-radius:11px;
    color:#e7f7f9;
    background:#ffffff08;
    font-size:1.6rem;
    font-weight: 500;
    letter-spacing:-.11em;
    padding-right:5px
}

.brand-symbol>span {
    color:#7dd0db;
    font-size:2rem;
    line-height:.7;
    margin-top:7px
}

.brand-sub {
    display:block;
    font-size:12px;
    letter-spacing:.12em;
    color:#8caebf;
    margin-top:4px
}

.login-brand-panel {
    position:relative;
    overflow:hidden;
    background:linear-gradient(140deg,#0c2e40,#20576d 68%,#347b90);
    padding:50px 65px;
    display:flex;
    flex-direction:column;
    color:#b4d1dc;
    isolation:isolate
}

.login-brand-panel:before {
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse at 80% 40%,#6cb8cb21,transparent 55%);
    z-index:-1
}

.login-brand-panel:after {
    content:"";
    position:absolute;
    border:1px solid #b8dde71c;
    border-radius:50%;
    width:570px;
    height:570px;
    right:-280px;
    bottom:-190px;
    box-shadow:0 0 0 60px #b8dde706,0 0 0 120px #b8dde704;
    z-index:-1
}

.login-brand-panel .brand {
    padding:0;
    align-self:flex-start;
    font-size:1.4rem
}

.login-pitch {
    margin:auto 0;
    padding:80px 0;
    max-width:550px
}

.login-pitch .eyebrow {
    color:#8dc6d6;
    font-size:12px;
    letter-spacing:.18em;
    margin-bottom:25px
}

.login-pitch h1 {
    font-size:3.65rem;
    font-weight: 500;
    line-height:1.09;
    letter-spacing:-.055em;
    color:var(--surface);
    margin-bottom:27px
}

.login-pitch p {
    font-size:14px;
    line-height:1.9;
    color:#b7d0db
}

.login-pills {
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:30px
}

.login-pills span {
    font-size:12px;
    color:#b6dae3;
    padding:8px 13px;
    border:1px solid #a8d3df30;
    border-radius:30px;
    background:#ffffff04
}

.login-brand-panel>.login-footnote {
    color:#779faf;
    text-align:left;
    margin:0;
    font-size:12px
}

.login-form-panel {
    display:flex;
    align-items:center;
    justify-content:center;
    padding:55px 45px;
    background:var(--surface)
}

.login-form-inner {
    width:100%;
    max-width:420px
}

.login-form-inner>.eyebrow {
    font-size:12px;
    margin-bottom:14px
}

.login-form-inner h2 {
    font-size:1.9rem;
    line-height:1.2;
    font-weight: 500;
    margin-bottom:13px
}

.login-form-inner>.muted {
    font-size:13px;
    line-height:1.7;
    margin-bottom:26px
}

.login-form-inner form.stack {
    gap:0
}

.login-form-inner .field {
    font-size:12px;
    font-weight: 500;
    gap:8px;
    margin-bottom:18px
}

.login-form-inner .input {
    font-weight: 400
}

.login-form-inner form.stack>.btn {
    margin-top:3px;
    width:100%;
    min-height:43px;
    justify-content:space-between;
    padding-left:21px;
    padding-right:21px
}

.login-divider {
    position:relative;
    text-align:center;
    margin:28px 0 19px;
    font-size:12px;
    letter-spacing:.09em;
    color:#96a9b3
}

.login-divider:before {
    content:"";
    position:absolute;
    top:50%;
    left:0;
    right:0;
    height:1px;
    background:var(--line)
}

.login-divider span {
    position:relative;
    background:var(--surface);
    padding:0 13px
}

.demo-login-grid {
    display:flex;
    flex-direction:column;
    gap:10px
}

.demo-login-card {
    border:1px solid var(--line);
    border-radius:11px;
    width:100%;
    display:flex;
    align-items:center;
    text-align:left;
    gap:13px;
    padding:13px 15px;
    background:var(--surface);
    color:var(--text);
    transition:background .15s,border-color .15s
}

.demo-login-card:hover {
    background:#f6fbfc;
    border-color:#c2dae2
}

.demo-login-card .avatar {
    border-radius:10px;
    width:35px;
    height:35px;
    font-size:12px;
    background:#eef5f7
}

.demo-login-card>span:nth-child(2) {
    flex:1
}

.demo-login-card strong {
    font-size:12px;
    font-weight: 500;
    display:block;
    color:var(--ink)
}

.demo-login-card small {
    font-size:12px;
    color:var(--muted);
    display:block;
    margin-top:3px
}

.demo-login-card>span:last-child {
    color:#87a8b7
}

.login-disclaimer {
    margin:23px 0 0;
    text-align:center;
    font-size:12px;
    color:#9aadb7;
    line-height:1.7
}

.login-shell {
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)
}

.planner-cover {
    position:relative;
    background:linear-gradient(125deg,#eeedf7,#e4e9f5);
    height:120px;
    border-radius:11px;
    margin:-9px -9px 19px;
    padding:15px 24px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:6px;
    overflow:hidden
}

.planner-cover>span {
    font-size:12px;
    color:#8f94ad;
    font-weight: 500;
    padding-left:5px
}

.planner-cover>div {
    border-radius:4px;
    background:#c1cbdc70
}

.planner-cover>div:nth-child(5),.planner-cover>div:nth-child(9) {
    background:#9aafc855
}

.planner-cover>div:nth-child(7) {
    background:#b8aacb55
}

.planner-cover>i {
    position:absolute;
    right:25px;
    bottom:20px;
    width:55px;
    height:55px;
    border-radius:14px;
    color:#8790ad;
    background:#f9faff8c;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 6px 20px #55557711
}

.planner-cover>i svg {
    width:27px;
    height:27px
}

.source-link,.conversation-link {
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
    text-align:left;
    border:0;
    border-bottom:1px solid #edf2f4;
    background:var(--surface);
    padding:12px 0;
    color:#6e8997;
    font-size:12px;
    line-height:1.6
}

.source-link .icon,.conversation-link .icon {
    width:16px;
    height:16px;
    flex-shrink:0
}

.source-link>span:nth-child(2),.conversation-link>span {
    flex:1;
    overflow:hidden;
    text-overflow:ellipsis
}

.source-link:hover,.conversation-link:hover {
    color:var(--petrol)
}

.source-link>span:last-child {
    font-size:12px;
    color:#91aab6;
    flex:0
}

.source-content {
    font-size:13px;
    line-height:1.9;
    white-space:pre-wrap;
    margin-top:20px;
    overflow-wrap:anywhere
}

.modal {
    max-width:720px
}

.redacted-preview {
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:12px;
    line-height:1.75;
    max-height:300px;
    overflow:auto;
    white-space:pre-wrap;
    background:#f5f8f9;
    border:1px solid var(--line);
    border-radius:10px;
    padding:17px;
    color:#6b838e;
    margin-bottom:22px
}

.mini-step {
    display:flex;
    gap:13px;
    align-items:flex-start;
    margin-top:20px
}

.mini-step>span {
    display:flex;
    align-items:center;
    justify-content:center;
    width:25px;
    height:25px;
    background:#eaf3f6;
    border-radius:50%;
    color:var(--petrol);
    font-size:12px;
    font-weight: 500;
    flex-shrink:0;
    margin-top:1px
}

.mini-step strong {
    font-size:12px;
    font-weight: 500;
    color:var(--ink);
    display:block
}

.mini-step p {
    font-size:12px;
    color:var(--muted);
    margin:5px 0 0;
    line-height:1.7
}

.planner-table th {
    font-size:12px
}

.planner-table td:nth-child(n+4) {
    text-align:center
}

.planner-table td:first-child .input {
    min-width:145px
}

.planner-table td:nth-child(2) .input {
    min-width:190px
}

.planner-table td:nth-child(3) .input {
    min-width:60px;
    width:70px
}

.planner-table input[type=checkbox] {
    width:15px;
    height:15px
}

.remove-row {
    border:0;
    color:#a2b4bd;
    background:transparent;
    font-size:1.3rem;
    line-height:1.2;
    min-width:23px
}

.remove-row:hover {
    color:var(--red)
}

.image-picker label.image-option {
    display:block
}

.image-picker label.image-option>span {
    font-weight: 400
}

.message button.source-citation {
    border:1px solid #d9e9ee;
    cursor:pointer
}

.health-item>.badge {
    margin-left:auto
}

.modal-open {
    overflow:hidden
}

.field:has(>textarea),.field:has(>input),.field:has(>select) {
    font-size:12px;
    font-weight: 500;
    color:var(--ink)
}

.field .input,.field .select,.field .textarea {
    font-weight: 400
}

.card-head .icon-box {
    width:40px;
    height:40px
}

.notice svg.icon {
    flex-shrink:0;
    margin-top:2px;
    width:18px;
    height:18px
}

.badge .icon {
    width:13px;
    height:13px
}

.section-header .btn {
    margin-top:-3px
}

.chat-layout .card-head>.icon {
    color:#88a5b3;
    width:18px
}

.fact-review-empty {
    background:#fff8e8
}

@media(max-width:1100px) {
    .login-brand-panel {
        padding:45px
    }

    .login-pitch h1 {
        font-size:3rem
    }

    .login-form-panel {
        padding:45px 34px
    }

}

@media(max-width:800px) {
    .login-shell {
        grid-template-columns:1fr
    }

    .login-brand-panel {
        padding:25px 30px;
        min-height:auto
    }

    .login-brand-panel .brand {
        font-size:1.2rem
    }

    .login-brand-panel .brand small,.login-brand-panel .brand-sub {
        font-size:12px
    }

    .login-pitch {
        padding:30px 0 10px;
        max-width:100%;
        margin:0
    }

    .login-pitch .eyebrow {
        font-size:12px;
        margin-bottom:12px
    }

    .login-pitch h1 {
        font-size:2.25rem;
        margin-bottom:15px
    }

    .login-pitch h1 br {
        display:none
    }

    .login-pitch p {
        font-size:13px;
        line-height:1.8;
        margin:0
    }

    .login-pills {
        margin-top:19px
    }

    .login-pills span {
        padding:6px 10px;
        font-size:12px
    }

    .login-brand-panel>.login-footnote {
        display:none
    }

    .login-form-panel {
        padding:35px 26px 40px
    }

    .login-form-inner {
        max-width:460px
    }

    .login-form-inner h2 {
        font-size:1.7rem
    }

    .login-form-inner>.eyebrow {
        display:none
    }

    .login-form-inner>.muted {
        font-size:13px;
        margin-bottom:23px
    }

}

@media(max-width:560px) {
    .login-brand-panel {
        padding:23px
    }

    .login-pitch {
        padding-top:26px
    }

    .login-pitch h1 {
        font-size:2rem
    }

    .login-pitch p br {
        display:none
    }

    .login-form-panel {
        padding:29px 22px 35px
    }

    .login-form-inner h2 {
        font-size:1.6rem
    }

    .login-pills {
        gap:7px
    }

    .demo-login-card {
        padding:12px
    }

    .login-divider {
        margin:25px 0 17px
    }

    .brand-symbol {
        width:33px;
        height:33px;
        border-radius:9px;
        font-size:1.4rem
    }

    .brand-symbol>span {
        font-size:1.7rem
    }

    .login-brand-panel .brand {
        gap:10px;
        font-size:1.1rem
    }

    .source-card {
        padding:18px
    }

    .source-card .between {
        flex-wrap:wrap;
        gap:6px
    }

    .planner-cover {
        height:115px
    }

    .mini-step p {
        font-size:12px
    }

    .footer-note {
        font-size:12px
    }

    .topbar .workspace-switch select {
        max-width:180px
    }

    .source-content {
        font-size:13px
    }

    .redacted-preview {
        font-size:12px;
        max-height:240px
    }

}

/* Product UI: hierarchy through type, spacing and quiet outlines. */
html {
    min-width: 320px;
    font-size: 16px;
    text-rendering: optimizeLegibility;
    color-scheme: light;
}
body {
    font-size: 14px;
    font-weight: 400;
    font-synthesis: none;
    line-height: 1.6;
}
strong, b { font-weight: 500; }
button, [role="button"], summary { touch-action: manipulation; }
a, button, input, select, textarea, summary { transition-duration: 140ms; }
:focus-visible { outline: 2px solid var(--petrol); outline-offset: 3px; }
::selection { color: var(--ink); background: #d8eaf0; }
h1, h2, h3, h4 { font-weight: 500; letter-spacing: -.02em; }
h1, .page-header h1 { font-size: 26px; line-height: 1.2; margin-bottom: 10px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }
.small, small, .meta { font-size: 12px; }
.main-content, .content, .page-content { max-width: 1360px; padding: 32px 36px 48px; }
.page-header { gap: 24px; margin-bottom: 28px; }
.page-header p { max-width: 740px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.breadcrumb { gap: 8px; margin-bottom: 14px; font-size: 12px; }
.breadcrumb a { text-decoration: underline; text-underline-offset: 3px; }
.section-header { gap: 16px; margin: 32px 0 16px; align-items: baseline; }
.section-header h2, .section-title { font-size: 18px; }
.section-header a, .section-header p, .section-header .muted { font-size: 13px; }
.eyebrow, .skill-category, .demo-label { font-size: 12px; font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; }
.grid-2, .grid-3, .grid-4, .overview-grid { gap: 20px; }
.card, .stat-card, .quick-card, .provider-card, .source-card {
    border-color: var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: none;
}
.card { padding: 24px; }
.card-head { margin-bottom: 20px; align-items: flex-start; }
.card-head h2, .card-head h3 { font-size: 18px; line-height: 1.3; }
.card-head p, .card-footer { color: var(--muted); font-size: 13px; line-height: 1.6; }
.card-footer { border-top-color: var(--line); gap: 16px; }
.skill-card { padding: 24px; transition: border-color 140ms ease, background-color 140ms ease; }
.skill-card:hover { transform: none; box-shadow: none; border-color: #a5b5c7; }
.skill-card h3 { font-size: 20px; line-height: 1.3; }
.skill-card p { font-size: 14px; line-height: 1.7; }
.skill-card .skill-top { margin-bottom: 20px; }
.skill-meta { flex-wrap: wrap; gap: 8px 12px; font-size: 12px; }
.skill-meta span + span::before { margin-right: 12px; color: var(--muted); }
.skill-cover { border-radius: 6px; height: 140px; }
.quick-card { padding: 20px; }
.quick-card:hover { border-color: #a5b5c7; background: var(--soft); }
.quick-card h3 { font-size: 16px; }
.quick-card p { font-size: 13px; }
.icon-box { width: 40px; height: 40px; border-radius: 8px; background: var(--soft); color: var(--petrol-dark); }
.icon-box.purple { background: #efedf8; color: #665789; }
.icon-box.green { background: var(--green-soft); color: var(--green); }
.icon-box.orange { background: var(--amber-soft); color: var(--amber); }
.icon-box.blue { background: var(--soft); color: var(--petrol-dark); }
.list-row, .activity-row { gap: 14px; padding: 16px 0; border-bottom-color: var(--line); }
.list-row strong, .activity-row strong { font-size: 14px; font-weight: 500; }
.list-row small, .activity-row small { display: inline-block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.stat-card strong, .stat-value { font-weight: 500; font-size: 26px; font-variant-numeric: tabular-nums; }
.stat-card small, .stat-label { font-size: 12px; }
.badge, .pill, .tag {
    min-height: 26px;
    border: 1px solid #bad4c7;
    border-radius: 20px;
    padding: 4px 9px;
    background: var(--green-soft);
    color: var(--green);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
}
.badge.blue, .pill.blue { border-color: #b4ccd6; background: var(--soft); color: var(--petrol-dark); }
.badge.gray, .badge.neutral, .tag { border-color: var(--border); background: transparent; color: var(--muted); }
.badge.local { border-color: #bad4c7; background: var(--green-soft); color: var(--green); }
.badge.amber, .badge.warning { border-color: #d4bd91; background: var(--amber-soft); color: var(--amber); }
.badge.red, .badge.danger { border-color: #d6b1af; background: var(--red-soft); color: var(--red); }
.btn {
    min-height: 40px;
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    box-shadow: none;
}
.btn:hover { transform: none; }
.btn-primary { border-color: var(--petrol); background: transparent; color: var(--petrol-dark); box-shadow: none; }
.btn-primary:hover { border-color: var(--petrol-dark); background: var(--soft); color: var(--petrol-dark); }
.btn-primary:active { background: #d8e9ef; }
.btn-secondary { border-color: var(--field-border); background: transparent; color: var(--text); }
.btn-secondary:hover { border-color: var(--muted); background: var(--canvas); color: var(--text); }
.btn-ghost { background: transparent; color: var(--petrol-dark); }
.btn-ghost:hover { background: var(--soft); }
.btn-danger { border-color: var(--red); color: var(--red); background: transparent; }
.btn-danger:hover { background: var(--red-soft); }
.btn-sm { min-height: 36px; padding: 7px 11px; font-size: 12px; }
.btn-lg { min-height: 46px; padding: 11px 18px; font-size: 14px; }
.button-row, .actions { gap: 12px; margin-top: 24px; }
.field { gap: 8px; margin-bottom: 20px; font-size: 12px; color: var(--muted); }
.field label, .field-label, .field:has(> textarea), .field:has(> input), .field:has(> select) { color: var(--muted); font-size: 12px; font-weight: 500; }
.input, .textarea, .select {
    min-height: 40px;
    border: 1px solid var(--field-border);
    border-radius: 8px;
    padding: 9px 11px;
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    box-shadow: none;
}
.input::placeholder, .textarea::placeholder { color: var(--muted); opacity: 1; }
.input:hover, .textarea:hover, .select:hover { border-color: var(--muted); }
.input:focus, .textarea:focus, .select:focus { border-color: var(--petrol); box-shadow: 0 0 0 2px rgb(43 113 135 / .12); }
.input:disabled, .textarea:disabled, .select:disabled { background: var(--canvas); color: var(--muted); }
.field .hint, .field-help, .hint { font-size: 12px; line-height: 1.6; color: var(--muted); }
.checkbox-row { min-height: 40px; gap: 10px; font-size: 13px; line-height: 1.6; }
input[type="checkbox"], input[type="radio"] { width: 17px; height: 17px; flex-shrink: 0; }
.file-drop { border-color: var(--field-border); border-radius: 8px; background: var(--canvas); }
.file-drop strong { font-size: 14px; font-weight: 500; }
.file-drop p, .file-item, .file-item small { color: var(--muted); font-size: 12px; }
.file-drop input { min-height: 44px; font-size: 13px; }
.file-item { border-radius: 6px; border-color: var(--border); background: var(--canvas); padding: 10px 12px; }
.file-item > span { overflow-wrap: anywhere; }
.notice { border-radius: 8px; border-color: #b4ccd6; background: var(--soft); color: var(--petrol-dark); padding: 14px 16px; font-size: 13px; line-height: 1.65; }
.notice strong { font-weight: 500; }
.notice.success { border-color: #bad4c7; background: var(--green-soft); color: var(--green); }
.notice.warning { border-color: #d4bd91; background: var(--amber-soft); color: var(--amber); }
.notice.error { border-color: #d6b1af; background: var(--red-soft); color: var(--red); }
.alert-list { color: var(--amber); font-size: 13px; }
.steps { gap: 12px; margin-bottom: 28px; }
.step { gap: 8px; color: var(--muted); font-size: 13px; font-weight: 400; }
.step-number { width: 28px; height: 28px; border-color: var(--border); background: var(--surface); color: var(--muted); font-size: 12px; }
.step.active { color: var(--petrol-dark); font-weight: 500; }
.step.active .step-number { background: var(--soft); color: var(--petrol-dark); border-color: var(--petrol); box-shadow: none; }
.step.complete { color: var(--green); }
.step.complete .step-number { color: var(--green); background: var(--green-soft); border-color: #bad4c7; }
.table { font-size: 13px; }
.table th { padding: 12px; color: var(--muted); background: var(--canvas); font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.table td { padding: 12px; border-top-color: var(--line); font-size: 13px; line-height: 1.55; }
.table tbody tr:hover { background: var(--canvas); }
.table td small { color: var(--muted); font-size: 12px; }
.table td strong { font-size: 13px; font-weight: 500; }
.table .input, .table .select { min-height: 40px; font-size: 13px; }
.table input[type="checkbox"] { width: 18px; height: 18px; }
.planner-table th { font-size: 12px; white-space: nowrap; }
.table-wrap { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
time, [data-numeric], .fact-item strong { font-variant-numeric: tabular-nums; }
.remove-row { display: inline-flex; min-width: 36px; min-height: 36px; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 8px; color: var(--muted); }
.remove-row:hover { border-color: #d6b1af; background: var(--red-soft); color: var(--red); }
.source-card h3 { font-size: 16px; line-height: 1.4; }
.source-card p { color: var(--muted); font-size: 13px; line-height: 1.7; }
.source-link { min-height: 40px; color: var(--muted); background: transparent; font-size: 13px; border-bottom-color: var(--line); }
.source-link:hover { color: var(--petrol-dark); background: var(--soft); }
.source-content { color: var(--text); font-size: 14px; line-height: 1.75; }
.provider-card { padding: 22px; }
.provider-card h3 { font-size: 16px; }
.provider-card p, .provider-head small, .health-item { font-size: 13px; line-height: 1.65; }
.provider-logo { border-radius: 8px; background: var(--soft); color: var(--petrol-dark); font-weight: 500; }
.fact-item { border-color: var(--border); border-radius: 8px; background: var(--canvas); }
.fact-item small { font-size: 12px; color: var(--muted); }
.fact-item strong { color: var(--text); font-size: 16px; font-weight: 500; }
.image-option { border-color: var(--border); border-radius: 8px; background: var(--surface); }
.image-option.selected { border-color: var(--petrol); box-shadow: 0 0 0 1px var(--petrol); }
.image-option label, .image-option span { font-size: 12px; color: var(--muted); }
.mini-step strong { font-size: 14px; font-weight: 500; }
.mini-step p { color: var(--muted); font-size: 13px; line-height: 1.7; }
.mini-step > span { width: 28px; height: 28px; font-size: 12px; color: var(--petrol-dark); background: var(--soft); }
.result-preview, .redacted-preview { border-color: var(--border); border-radius: 8px; background: var(--canvas); padding: 20px; color: var(--text); font-size: 14px; line-height: 1.75; }
.redacted-preview { font-size: 12px; }
.privacy-summary { border-color: #bad4c7; background: var(--green-soft); color: var(--green); font-size: 13px; }
.pii-chip { border-color: #d4bd91; background: var(--amber-soft); color: var(--amber); font-size: 12px; }
.segmented { border: 1px solid var(--border); border-radius: 8px; background: var(--canvas); }
.segmented label { min-height: 36px; padding: 8px 12px; color: var(--muted); font-size: 13px; font-weight: 400; }
.segmented label:has(input:checked) { box-shadow: none; color: var(--petrol-dark); background: var(--surface); }
.segmented label:has(input:focus-visible) { outline: 2px solid var(--petrol); outline-offset: -2px; }
.modal-backdrop { background: rgb(22 24 38 / .32); backdrop-filter: blur(3px); }
.modal { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-lg); }
.modal-head h2 { font-size: 20px; font-weight: 500; }
.modal .close { min-width: 40px; min-height: 40px; border-radius: 8px; background: transparent; color: var(--muted); font-size: 22px; }
.modal .close:hover { color: var(--text); background: var(--canvas); }
.toast { border: 1px solid #b4ccd6; border-radius: 8px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); font-size: 13px; line-height: 1.6; }
.footer-note { color: var(--muted); font-size: 12px; line-height: 1.6; }
.kbd { border-color: var(--border); color: var(--muted); background: var(--canvas); font-size: 12px; }
.empty-state h3 { font-size: 18px; font-weight: 500; }
.empty-state p { font-size: 14px; line-height: 1.7; color: var(--muted); }
.planner-cover { background: #e4e7f5; border-radius: 8px; }
.planner-cover > span { color: var(--muted); font-size: 12px; font-weight: 400; }
.planner-cover > div { background: #cfd3e5; }
.planner-cover > div:nth-child(5), .planner-cover > div:nth-child(9) { background: #bec8da; }
.planner-cover > div:nth-child(7) { background: #d1cde5; }
.planner-cover > i { background: var(--surface); color: #665789; border: 1px solid var(--border); box-shadow: none; }
.hero { background: var(--soft); color: var(--text); border: 1px solid var(--border); border-radius: 14px; box-shadow: none; }
.hero::before, .hero::after { display: none; }
.hero h1, .hero h2, .hero-stat strong { color: var(--text); font-weight: 500; }
.hero p, .hero-stat span { color: var(--muted); }
.hero .btn-primary { color: var(--petrol-dark); background: transparent; }

/* Login uses the same restrained surfaces as the application. */
.login-shell { background: var(--canvas); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.login-brand, .login-brand-panel { padding: 48px 64px; background: var(--canvas); color: var(--text); border-right: 1px solid var(--line); }
.login-brand::before, .login-brand-panel::before { display: none; }
.login-brand::after, .login-brand-panel::after {
    width: 420px;
    height: 420px;
    bottom: -180px;
    right: -150px;
    border: 1px solid var(--border);
    background: transparent;
    box-shadow: 0 0 0 42px rgb(207 211 229 / .13), 0 0 0 84px rgb(207 211 229 / .08);
}
.login-brand .brand, .login-brand-panel .brand { color: var(--navy); font-weight: 500; }
.login-brand .brand-symbol, .login-brand-panel .brand-symbol { border-color: var(--border); border-radius: 8px; background: var(--surface); color: var(--navy); }
.login-brand .brand-symbol > span, .login-brand-panel .brand-symbol > span { color: var(--petrol); }
.login-brand .brand-sub, .login-brand-panel .brand-sub, .login-brand .brand small, .login-brand-panel .brand small { color: var(--muted); font-size: 11px; }
.login-pitch { max-width: 500px; padding: 80px 0; }
.login-pitch h1, .login-brand h1 { max-width: 470px; color: var(--text); font-size: clamp(34px, 3.5vw, 48px); font-weight: 500; line-height: 1.16; letter-spacing: -.035em; margin-bottom: 24px; }
.login-pitch p, .login-brand p { color: var(--muted); font-size: 16px; line-height: 1.75; }
.login-pitch .eyebrow, .login-brand .eyebrow { color: var(--petrol-dark); font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 400; }
.login-pills { gap: 8px; margin-top: 28px; }
.login-pills span { border: 1px solid var(--border); border-radius: 20px; background: var(--surface); color: var(--muted); font-size: 12px; padding: 7px 11px; }
.login-brand-panel > .login-footnote, .login-brand .copyright { color: var(--muted); font-size: 12px; }
.login-form-panel, .login-form-area { padding: 48px 56px; background: var(--surface); }
.login-form-inner { max-width: 400px; }
.login-form-inner h2, .login-card h2 { font-size: 26px; font-weight: 500; letter-spacing: -.02em; }
.login-form-inner > .muted, .login-card > .muted { color: var(--muted); font-size: 14px; line-height: 1.7; margin-bottom: 28px; }
.login-form-inner .field, .login-form-inner .input { font-weight: 400; }
.login-form-inner .input, .login-card .input { min-height: 46px; font-size: 16px; }
.login-form-inner form.stack > .btn, .login-card .btn { min-height: 46px; font-size: 14px; }
.login-divider, .login-separator { color: var(--muted); font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.login-divider span, .login-separator span { background: var(--surface); }
.demo-login-card, .demo-access { min-height: 72px; border-color: var(--border); border-radius: 8px; background: var(--surface); padding: 14px; }
.demo-login-card:hover, .demo-access:hover { border-color: #a5b5c7; background: var(--canvas); }
.demo-login-card strong, .demo-access strong { color: var(--text); font-size: 14px; font-weight: 500; }
.demo-login-card small, .demo-access small { color: var(--muted); font-size: 12px; line-height: 1.5; }
.demo-login-card .avatar { border: 1px solid var(--border); border-radius: 8px; background: var(--canvas); color: var(--petrol-dark); font-size: 12px; font-weight: 500; }
.demo-login-card > span:last-child { color: var(--petrol-dark); }
.login-disclaimer, .login-footnote { color: var(--muted); font-size: 12px; line-height: 1.7; }

@media (max-width: 1100px) {
    .main-content, .content, .page-content { padding: 28px 28px 40px; }
    .login-brand, .login-brand-panel { padding: 40px; }
    .login-form-panel, .login-form-area { padding: 40px 32px; }
}
@media (max-width: 800px) {
    .login-shell { grid-template-columns: minmax(0, 1fr); }
    .login-brand, .login-brand-panel { padding: 28px 32px; border-right: 0; border-bottom: 1px solid var(--line); }
    .login-pitch { max-width: none; padding: 32px 0 8px; }
    .login-pitch h1, .login-brand h1 { max-width: 560px; font-size: 34px; margin-bottom: 16px; }
    .login-pitch h1 br { display: none; }
    .login-pitch p, .login-brand p { max-width: 560px; font-size: 14px; margin-bottom: 0; }
    .login-pills { margin-top: 20px; }
    .login-form-panel, .login-form-area { padding: 32px; }
    .login-form-inner { max-width: 460px; }
}
@media (max-width: 560px) {
    html { font-size: 16px; }
    .main-content, .content, .page-content { padding: 24px 16px 32px; }
    .page-header h1 { font-size: 26px; }
    .page-header p { font-size: 14px; }
    .section-header { margin-top: 28px; }
    .section-header h2 { font-size: 18px; }
    .section-header a { font-size: 13px; white-space: normal; }
    .card, .skill-card { padding: 20px; }
    .card-head h2, .card-head h3 { font-size: 18px; }
    .btn, .btn-sm, .page-header > .btn { min-height: 44px; padding: 10px 13px; font-size: 14px; }
    .input, .textarea, .select, .table .input, .table .select { min-height: 44px; font-size: 16px; }
    .checkbox-row { min-height: 44px; font-size: 14px; }
    .file-drop input { max-width: 100%; font-size: 14px; }
    .step { flex-basis: 46%; font-size: 12px; line-height: 1.5; }
    .step-number { flex-shrink: 0; }
    .notice { padding: 14px; font-size: 13px; }
    .notice .btn { display: inline-flex; }
    .skill-card h3 { font-size: 20px; }
    .skill-card p { font-size: 14px; }
    .skill-meta { font-size: 12px; }
    .image-option label, .image-option span { font-size: 12px; }
    .remove-row { min-width: 44px; min-height: 44px; }
    .modal .close { min-width: 44px; min-height: 44px; }
    .modal { padding: 20px; border-radius: 14px; }
    .modal-head h2 { font-size: 20px; }
    .footer-note, .redacted-preview { font-size: 12px; }
    .source-content { font-size: 14px; }
    .login-brand, .login-brand-panel { padding: 24px; }
    .login-pitch { padding-top: 28px; }
    .login-pitch h1, .login-brand h1 { font-size: 32px; }
    .login-pills span { padding: 6px 9px; }
    .login-form-panel, .login-form-area { padding: 28px 24px 36px; }
    .login-form-inner h2, .login-card h2 { font-size: 26px; }
    .demo-login-card, .demo-access { padding: 14px 12px; }
    .demo-login-card > span:nth-child(2) { min-width: 0; }
    .demo-login-card strong { font-size: 14px; }
    .demo-login-card small { font-size: 12px; }
    .mini-step p { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Shared Blade components and feedback states. */
.page-header-copy { min-width: 0; }
.page-header-copy h1 { margin-top: 0; }
.page-header-copy p { margin-bottom: 0; }
.page-header-actions { display: flex; flex-wrap: wrap; flex-shrink: 0; align-items: center; gap: 12px; }
.skill-card h2 { margin: 0 0 10px; font-size: 20px; font-weight: 500; line-height: 1.3; }
.source-category { color: var(--muted); font-size: 12px; line-height: 1.5; text-transform: none; letter-spacing: 0; }
.busy-spinner { display: inline-block; width: 15px; height: 15px; flex: 0 0 15px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: middle; animation: spin .8s linear infinite; }
.is-loading { cursor: wait; }
.is-loading .busy-spinner { margin-right: 1px; }
.operation-status { position: fixed; right: 24px; bottom: 24px; z-index: 95; display: flex; align-items: center; gap: 10px; max-width: min(440px, calc(100vw - 48px)); padding: 12px 16px; border: 1px solid #b4ccd6; border-radius: 8px; background: var(--surface); color: var(--petrol-dark); box-shadow: var(--shadow-lg); font-size: 13px; line-height: 1.55; }
.field-error { display: block; color: var(--red); margin: 0; font-size: 13px; line-height: 1.55; font-weight: 400; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--red); }
.input[aria-invalid="true"]:focus, .textarea[aria-invalid="true"]:focus, .select[aria-invalid="true"]:focus { box-shadow: 0 0 0 2px rgb(163 59 56 / .12); }
@media (max-width: 560px) {
    .page-header-actions { width: 100%; gap: 10px; }
    .skill-card h2 { font-size: 20px; }
    .operation-status { right: 16px; bottom: 16px; max-width: calc(100vw - 32px); }
}
@media (prefers-reduced-motion: reduce) {
    .busy-spinner { animation: none; }
}

/* Original pruO wordmark with the configurable product name. */
.brand-logo { display: block; width: 66px; height: auto; flex-shrink: 0; }
.brand-icon { display: none; }
.brand .brand-product { display: block; color: var(--ink); font-size: 11px; font-weight: 500; letter-spacing: .06em; line-height: 1.5; }
.login-brand-panel .brand { gap: 14px; }
.login-brand-panel .brand-logo { width: 82px; }
.login-brand-panel .brand-product { font-size: 13px; }