:root {
    color-scheme: light;
    --ink: #17243b;
    --muted: #78859a;
    --line: #e8edf4;
    --surface: #fff;
    --canvas: #f5f7fb;
    --blue: #3978ed;
    --blue-dark: #235dce;
    --navy: #17294b;
    --green: #1b9a6a;
    --shadow: 0 8px 26px rgba(27, 44, 75, .045);
    font-family: 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-size: 14px; }
button, input, select, textarea { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }

.app-shell { min-height: 100vh; display: flex; }
.sidebar { width: 246px; flex: 0 0 246px; position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column; padding: 26px 16px 18px; background: #fff; border-right: 1px solid #e9edf4; z-index: 20; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 12px; color: #1b2b48; font: 800 17px 'Segoe UI', sans-serif; letter-spacing: -.65px; }
.brand-mark { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 10px; background: linear-gradient(145deg, #498af4, #2760d4); color: #fff; font: 800 17px 'Segoe UI', sans-serif; box-shadow: 0 4px 10px #3477e842; }
.brand-accent { color: var(--blue); }
.workspace-label { margin: 44px 12px 12px; color: #9aa5b7; font-size: 10px; font-weight: 700; letter-spacing: 1.15px; }
.side-nav { display: grid; gap: 5px; }
.side-nav a { min-height: 43px; padding: 0 12px; display: flex; align-items: center; gap: 12px; border-radius: 8px; color: #68768b; font-size: 13px; font-weight: 600; transition: background .16s, color .16s; }
.side-nav a:hover { background: #f5f8ff; color: var(--blue); }
.side-nav a.active { background: #edf4ff; color: #2867d9; }
.nav-icon { width: 18px; text-align: center; font-size: 18px; line-height: 1; }
.nav-dot { width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: #edac39; }
.sidebar-bottom { margin-top: auto; }
.help-card { margin: 0 5px 18px; padding: 15px 13px 13px; border: 1px solid #e8eef9; border-radius: 10px; background: linear-gradient(140deg, #f8faff, #f4f7ff); }
.help-icon { width: 22px; height: 22px; margin-bottom: 10px; display: grid; place-items: center; border-radius: 50%; background: #e4edff; color: #3978ed; font-size: 12px; font-weight: 700; }
.help-card strong { display: block; font-size: 12px; }
.help-card p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.profile-mini { display: flex; align-items: center; gap: 10px; padding: 15px 8px 0; border-top: 1px solid #edf0f5; }
.avatar { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 50%; background: #e8efff; color: #306edc; font-weight: 700; }
.profile-name { min-width: 0; display: grid; gap: 3px; }
.profile-name strong { overflow: hidden; color: #34425a; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.profile-name small { color: #94a0b1; font-size: 10px; }
.app-main { min-width: 0; width: calc(100% - 246px); margin-left: 246px; }
.topbar { height: 68px; padding: 0 36px; display: flex; justify-content: space-between; align-items: center; background: #fff; border-bottom: 1px solid #e9edf4; }
.breadcrumb { color: #9aa4b4; font-size: 12px; }
.breadcrumb span { margin: 0 9px; color: #c1c9d4; }
.breadcrumb strong { color: #394862; font-weight: 600; }
.topbar-right { display: flex; align-items: center; gap: 21px; }
.secure-label { color: #8c98a9; font-size: 11px; }
.secure-label i { width: 7px; height: 7px; margin-right: 5px; display: inline-block; border-radius: 50%; background: #45be8b; }
.top-user { display: flex; align-items: center; gap: 8px; color: #59667b; font-size: 12px; font-weight: 600; }
.avatar-small { width: 28px; height: 28px; flex-basis: 28px; font-size: 11px; }
.icon-button { width: 30px; height: 30px; border: 0; border-radius: 7px; background: transparent; color: #78859a; font-size: 20px; }
.icon-button:hover { background: #f1f5fb; color: #315fad; }
.logout-form { margin: 0; }
.menu-toggle { display: none; }
.content { max-width: 1440px; margin: 0 auto; padding: 34px 38px 24px; }
.welcome-row { margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 7px; color: #182844; font: 750 27px/1.2 'Segoe UI', sans-serif; letter-spacing: -.85px; }
h2 { margin: 0; color: #22314b; font: 700 16px/1.35 'Segoe UI', sans-serif; letter-spacing: -.35px; }
.eyebrow { margin-bottom: 8px; color: #8b97a9; font-size: 9px; font-weight: 700; letter-spacing: 1.15px; }
.muted { color: var(--muted); }
.welcome-row .muted { margin: 0; font-size: 12px; }
.wave { color: #f0ad3b; font-size: 21px; }
.button { min-height: 39px; padding: 0 15px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid transparent; border-radius: 7px; font-size: 12px; font-weight: 700; transition: .15s ease; }
.button-primary { background: var(--blue); color: #fff; box-shadow: 0 4px 11px #3978ed29; }
.button-primary:hover { background: var(--blue-dark); transform: translateY(-1px); }
.button-small { min-height: 29px; padding: 0 9px; font-size: 10px; }
.button-quiet { border-color: #e2e8f1; background: #fff; color: #67758b; }
.button-quiet:hover { border-color: #9dbcf2; background: #f7faff; color: #306edc; }
.button-wide { width: 100%; margin-top: 7px; justify-content: space-between; padding: 0 17px; }
.stat-grid { margin-bottom: 19px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stat-card { min-height: 128px; padding: 17px 18px 15px; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow); }
.stat-card::after { width: 72px; height: 72px; position: absolute; top: -34px; right: -25px; border-radius: 50%; background: currentColor; content: ''; opacity: .055; }
.stat-card p { margin-bottom: 12px; color: #758197; font-size: 11px; font-weight: 600; }
.stat-card strong { display: block; margin-bottom: 4px; color: #1e2d49; font: 750 27px 'Segoe UI', sans-serif; letter-spacing: -.8px; }
.stat-card span { color: #98a2b1; font-size: 10px; }
.stat-blue { color: #4381e7; }.stat-violet { color: #8468dd; }.stat-amber { color: #e4a734; }.stat-green { color: #21a573; }
.dashboard-grid { margin-bottom: 18px; display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 15px; }
.panel { min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow); }
.flow-panel, .today-panel { min-height: 195px; padding: 20px; }
.panel-heading { margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-heading .eyebrow { margin-bottom: 5px; }
.text-link { color: #3978dc; font-size: 11px; font-weight: 600; white-space: nowrap; }
.text-link:hover { color: #215ab4; }
.flow-track { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; }
.flow-step { position: relative; display: grid; gap: 9px; }
.flow-step:not(:last-child)::after { width: calc(100% - 35px); height: 1px; position: absolute; top: 16px; left: 47px; background: #e3eaf3; content: ''; }
.flow-count { position: relative; z-index: 1; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #e7edf5; border-radius: 50%; background: #fff; color: #263650; font-size: 12px; font-weight: 700; }
.flow-name { display: flex; align-items: center; gap: 6px; color: #7e899b; font-size: 9px; white-space: nowrap; }
.status-dot { width: 7px; height: 7px; flex: 0 0 7px; display: inline-block; border-radius: 50%; background: #e6ad3b; }
.dot-pending { background: #e7a934; }.dot-signed { background: #4a91ed; }.dot-billable { background: #26ad7c; }.dot-paid { background: #9465d7; }.dot-rejected { background: #e56c7e; }
.flow-rejected { margin-top: 16px; padding-top: 12px; display: flex; align-items: center; gap: 7px; border-top: 1px solid #eff2f6; color: #68758a; font-size: 10px; }
.flow-rejected span:last-child { color: #a0a9b5; }
.today-panel { display: flex; flex-direction: column; align-items: flex-start; }
.today-icon { width: 27px; height: 27px; margin-bottom: 10px; display: grid; place-items: center; border-radius: 8px; background: #eaf3ff; color: #4381e7; font-size: 15px; }
.today-panel .eyebrow { margin-bottom: 3px; }
.today-panel strong { color: #22314b; font: 750 26px 'Segoe UI', sans-serif; }
.today-panel > span { margin: 1px 0 auto; color: #98a2b1; font-size: 10px; }
.today-panel .text-link { margin-top: 12px; }
.table-panel { padding: 19px 20px 15px; }
.table-panel .panel-heading { margin-bottom: 14px; }
.table-scroll { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th { padding: 10px 11px; border-top: 1px solid #edf0f5; border-bottom: 1px solid #edf0f5; background: #fafbfd; color: #8994a5; font-size: 9px; font-weight: 700; letter-spacing: .25px; white-space: nowrap; }
td { padding: 11px; border-bottom: 1px solid #eff2f6; color: #6d7a8e; font-size: 10px; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
.cell-primary, .lead-name { color: #34435d; font-weight: 600; }
.row-sub { margin-top: 3px; display: block; color: #a0a9b6; font-size: 9px; }
.badge { min-height: 22px; padding: 4px 8px; display: inline-flex; align-items: center; gap: 5px; border-radius: 20px; font-size: 9px; font-weight: 600; white-space: nowrap; }
.badge-live, .badge-active, .badge-billable { background: #e7f7ef; color: #21865d; }
.badge-paused, .badge-disabled, .badge-rejected { background: #fcecef; color: #bf596a; }
.badge-pending { background: #fff5df; color: #ad7a19; }.badge-signed { background: #eaf2ff; color: #477ac8; }.badge-paid { background: #f2eaff; color: #835bbd; }
.badge-status { gap: 6px; }
.status-form { display: flex; align-items: center; }
select { min-height: 31px; padding: 0 25px 0 9px; border: 1px solid #e3e8f0; border-radius: 6px; background: #fff; color: #57657a; font-size: 10px; }
.status-form select { min-width: 142px; min-height: 27px; font-size: 9px; }
.quick-actions { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.quick-action { min-height: 68px; padding: 12px 15px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; transition: .15s; }
.quick-action:hover { border-color: #c8d9f7; box-shadow: var(--shadow); transform: translateY(-1px); }
.quick-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; font-size: 18px; }
.quick-blue { background: #edf4ff; color: #3674e2; }.quick-violet { background: #f1edff; color: #7a61d1; }
.quick-action strong, .quick-action small { display: block; }.quick-action strong { color: #35435c; font-size: 11px; }.quick-action small { margin-top: 4px; color: #9ba5b3; font-size: 9px; }.quick-action b { margin-left: auto; color: #8190a6; font-size: 15px; font-weight: 400; }
.page-footer { margin-top: 24px; padding-top: 15px; display: flex; justify-content: space-between; border-top: 1px solid #e9edf3; color: #a0aaba; font-size: 9px; }
.alert { margin-bottom: 16px; padding: 11px 14px; border: 1px solid transparent; border-radius: 7px; font-size: 12px; line-height: 1.5; }
.alert-success { border-color: #ccebdc; background: #effaf4; color: #27774f; }
.alert-error { border-color: #f1d0d4; background: #fff3f4; color: #a34050; }
.split-layout { display: grid; grid-template-columns: minmax(270px, .75fr) minmax(0, 1.5fr); align-items: start; gap: 16px; }
.affiliate-layout { grid-template-columns: minmax(290px, .78fr) minmax(0, 1.5fr); }
.form-panel { padding: 20px; }
.panel-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: #edf4ff; color: #3978ed; font-size: 18px; }
.stack-form { display: grid; gap: 14px; }
.stack-form label { display: grid; gap: 6px; color: #56657a; font-size: 10px; font-weight: 600; }
.stack-form input, .stack-form select, .stack-form textarea { width: 100%; min-height: 37px; padding: 9px 10px; border: 1px solid #e1e7ef; border-radius: 6px; outline: none; background: #fff; color: #273853; font-size: 11px; font-weight: 400; transition: border-color .15s, box-shadow .15s; }
.stack-form textarea { min-height: 75px; resize: vertical; }
.stack-form input:focus, .stack-form select:focus, .stack-form textarea:focus { border-color: #77a5f1; box-shadow: 0 0 0 3px #4e8cf21c; }
.stack-form input::placeholder, .stack-form textarea::placeholder { color: #aab3c0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.input-prefix { position: relative; }
.input-prefix span { position: absolute; top: 10px; left: 11px; color: #929eaf; font-size: 11px; }.input-prefix input { padding-left: 24px; }
.field-help { margin: -5px 0 0; color: #9aa4b2; font-size: 9px; line-height: 1.5; }
.muted + input { margin-top: 4px; }
.count-pill { padding: 5px 9px; border: 1px solid #e7edf5; border-radius: 20px; background: #fafbfd; color: #778499; font-size: 9px; font-weight: 600; white-space: nowrap; }
.campaign-list, .affiliate-list { display: grid; }
.campaign-item { min-height: 64px; display: flex; align-items: center; gap: 10px; border-top: 1px solid #eff2f6; }
.campaign-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: #f0f4fb; color: #647a9b; font-size: 15px; }
.campaign-info { min-width: 0; flex: 1; display: grid; gap: 5px; }
.campaign-info strong, .affiliate-info strong { overflow: hidden; color: #34435d; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.campaign-info small, .affiliate-info small { overflow: hidden; color: #929eae; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.inline-form { margin: 0; }
.empty-state { min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.empty-state > span { width: 34px; height: 34px; margin-bottom: 10px; display: grid; place-items: center; border-radius: 10px; background: #f1f5fb; color: #8392a8; font-size: 17px; }
.empty-state strong { color: #48566c; font-size: 11px; }.empty-state p { margin: 5px 0 0; color: #9aa5b4; font-size: 9px; }
.affiliate-item { min-width: 0; padding: 14px 0; display: flex; align-items: flex-start; gap: 10px; border-top: 1px solid #eff2f6; }
.affiliate-avatar { background: #f0edff; color: #7562c6; }
.affiliate-info { min-width: 0; flex: 1; display: grid; gap: 5px; }
.affiliate-meta { color: #8491a4; font-size: 9px; }
.affiliate-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.invite-copy { max-width: 100%; margin-top: 4px; display: flex; gap: 4px; }
.invite-copy input { width: min(250px, 100%); min-width: 0; padding: 6px; border: 1px solid #e6ebf2; border-radius: 5px; color: #65738a; font-size: 9px; }
.pagination { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; color: #8a96a7; font-size: 10px; }
.pagination a { color: #3978dc; font-weight: 600; }
.table-note { color: #98a3b2; font-size: 9px; }
.empty-table { padding: 22px; text-align: center; color: #99a4b3; }
.report-stats { margin-bottom: 17px; }
.settings-card { padding: 22px; display: flex; gap: 16px; }
.settings-icon { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border-radius: 10px; background: #edf4ff; color: #3978ed; font-size: 20px; }
.settings-card h2 { margin: 2px 0 8px; }.settings-card p { max-width: 650px; color: #78859a; font-size: 11px; line-height: 1.7; }.settings-card code { color: #315fad; }
.settings-facts { margin-top: 19px; display: flex; flex-wrap: wrap; gap: 35px; }.settings-facts span { display: grid; gap: 5px; }.settings-facts small { color: #9aa5b4; font-size: 9px; }.settings-facts strong { color: #43516a; font-size: 11px; }
.login-page, .setup-page { min-height: 100vh; background: #fff; }
.login-layout { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; }
.login-intro { min-height: 100vh; padding: 38px 7vw 34px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; background: radial-gradient(ellipse at 82% 25%, #2d4d83 0, transparent 48%), linear-gradient(145deg, #172b4c, #10203c); color: #fff; }
.brand-light { padding: 0; color: #fff; }
.brand-light .brand-mark { background: #4d8df6; }
.brand-light .brand-accent { color: #a6c4ff; }
.intro-copy { max-width: 490px; margin: auto 0; padding: 75px 0; }
.login-intro .eyebrow { color: #8ab2f4; }.intro-copy h1 { margin: 14px 0; color: #fff; font-size: clamp(42px, 5vw, 65px); line-height: 1.08; letter-spacing: -2px; }
.intro-copy > p:last-child { max-width: 370px; color: #b6c4d9; font-size: 14px; line-height: 1.8; }
.login-flow { display: flex; align-items: center; gap: 12px; color: #c2d0e5; font-size: 10px; white-space: nowrap; }.login-flow i { width: 25px; height: 1px; background: #506887; }
.login-panel { padding: 36px 8%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.login-form-wrap { width: min(100%, 360px); }
.login-form-wrap > .eyebrow { margin: 0 0 8px; color: #4180e8; }
.login-form-wrap h2 { margin-bottom: 7px; font-size: 23px; }
.login-form-wrap > .muted { margin-bottom: 25px; font-size: 11px; }
.login-form-wrap .stack-form { gap: 17px; }
.login-form-wrap .stack-form label { gap: 8px; color: #485871; font-size: 11px; }
.login-form-wrap .stack-form input { min-height: 43px; padding: 0 12px; font-size: 12px; }
.login-hint { margin: 18px 0 0; color: #99a4b3; font-size: 10px; text-align: center; }
.login-footer { margin-top: auto; color: #a5afbd; font-size: 9px; }
.mobile-brand { display: none; }
.setup-page { padding: 35px 18px; display: grid; place-items: center; background: #f5f7fb; }
.setup-card { width: min(100%, 440px); padding: 34px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 16px 40px #223a5b12; }
.setup-card .brand-mark { margin-bottom: 22px; }.setup-card .eyebrow { margin-bottom: 7px; color: #3978ed; }.setup-card h1 { font-size: 23px; }
.setup-card > p:not(.eyebrow) { margin: 0 0 22px; color: #7a879a; font-size: 12px; line-height: 1.7; }
.setup-card > p a { color: #3978ed; font-weight: 600; }.setup-card code { font-size: 10px; }
.setup-card .stack-form { gap: 13px; }.setup-card .stack-form input { min-height: 40px; }

@media (min-width: 1600px) { .content { padding-right: 52px; padding-left: 52px; } }
@media (max-width: 1150px) {
    .content { padding-right: 24px; padding-left: 24px; }
    .topbar { padding-right: 24px; padding-left: 24px; }
    .split-layout, .affiliate-layout { grid-template-columns: minmax(250px, .8fr) minmax(0, 1.25fr); }
    .secure-label { display: none; }
    .stat-card { padding-right: 13px; padding-left: 13px; }
    th, td { padding-right: 9px; padding-left: 9px; }
}
@media (max-width: 850px) {
    .sidebar { width: 220px; flex-basis: 220px; }
    .app-main { width: calc(100% - 220px); margin-left: 220px; }
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-grid { grid-template-columns: minmax(0, 1fr) 190px; }
    .split-layout, .affiliate-layout { grid-template-columns: 1fr; }
    .affiliate-list, .campaign-list { max-height: 550px; overflow-y: auto; }
}
@media (max-width: 640px) {
    .sidebar { width: 250px; transform: translateX(-102%); transition: transform .2s ease; box-shadow: 12px 0 30px #17243b12; }
    .sidebar.sidebar-open { transform: translateX(0); }
    .app-main { width: 100%; margin-left: 0; }
    .topbar { height: 58px; padding: 0 15px; gap: 12px; }
    .menu-toggle { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 7px; background: #f1f5fb; color: #455773; font-size: 15px; }
    .breadcrumb { margin-right: auto; font-size: 10px; }.breadcrumb span { margin: 0 5px; }
    .topbar-right { gap: 7px; }.top-user > span:last-child { display: none; }.top-user { gap: 0; }.icon-button { width: 27px; }
    .content { padding: 24px 15px 18px; }
    .welcome-row { margin-bottom: 18px; align-items: flex-start; flex-direction: column; }
    .welcome-row > .button, .welcome-row > .count-pill { align-self: flex-start; }
    h1 { font-size: 23px; }
    .stat-grid { gap: 9px; }.stat-card { min-height: 111px; padding: 13px; }.stat-card p { margin-bottom: 9px; font-size: 10px; }.stat-card strong { font-size: 23px; }
    .dashboard-grid { grid-template-columns: 1fr; }.flow-panel { padding: 16px 13px; }.today-panel { min-height: 165px; }
    .flow-track { grid-template-columns: repeat(4, minmax(0, 1fr)); }.flow-step:not(:last-child)::after { width: calc(100% - 26px); left: 35px; }.flow-name { font-size: 8px; }.flow-count { width: 28px; height: 28px; font-size: 10px; }
    .flow-rejected { font-size: 9px; }.flow-rejected span:last-child { font-size: 8px; }
    .table-panel { padding: 15px 12px 12px; }.panel-heading { align-items: flex-start; }.panel-heading h2 { font-size: 14px; }.text-link { font-size: 9px; }
    .quick-actions { grid-template-columns: 1fr; gap: 9px; }.quick-action { min-height: 61px; }
    .page-footer { gap: 8px; font-size: 8px; }
    .form-panel { padding: 16px; }.affiliate-item { flex-wrap: wrap; }.affiliate-info { flex-basis: calc(100% - 50px); }.affiliate-item > .badge { margin-left: 44px; }.affiliate-actions { margin-left: auto; flex-direction: row; }
    .login-layout { grid-template-columns: 1fr; }.login-intro { display: none; }.login-panel { min-height: 100vh; padding: 32px 24px 22px; }.mobile-brand { margin: 0 0 53px; padding: 0; display: flex; }.login-form-wrap { margin: auto 0; }.login-form-wrap h2 { font-size: 21px; }.login-footer { margin-top: 30px; }
    .setup-card { padding: 25px 21px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

.app-page {
    color-scheme: dark;
    --ink: #e8f0ff;
    --muted: #91a1bb;
    --line: rgba(144, 172, 219, .14);
    --surface: #111a2c;
    --canvas: #090f1d;
    --blue: #58a7ff;
    --blue-dark: #3688ed;
    --navy: #101b30;
    --shadow: 0 12px 38px rgba(0, 0, 0, .2);
    min-height: 100vh;
    background:
        radial-gradient(ellipse at 86% 6%, rgba(39, 101, 194, .13), transparent 34rem),
        radial-gradient(ellipse at 45% 88%, rgba(111, 58, 187, .08), transparent 38rem),
        var(--canvas);
    color: var(--ink);
}
.app-page .sidebar {
    background: linear-gradient(180deg, #0d1729 0%, #0b1322 100%);
    border-color: rgba(144, 172, 219, .12);
    box-shadow: 8px 0 35px rgba(0, 0, 0, .12);
}
.app-page .brand { color: #eaf2ff; }
.app-page .brand-mark {
    background: linear-gradient(145deg, #60d9ff, #6379ff 58%, #9b64f5);
    box-shadow: 0 0 20px rgba(77, 156, 255, .33);
}
.app-page .brand-accent { color: #69cfff; }
.app-page .workspace-label { color: #657895; }
.app-page .side-nav a { color: #8999b2; }
.app-page .side-nav a:hover { background: rgba(62, 132, 228, .1); color: #8bc7ff; }
.app-page .side-nav a.active {
    background: linear-gradient(100deg, rgba(47, 126, 238, .2), rgba(90, 92, 207, .1));
    box-shadow: inset 2px 0 #62caff, inset 0 0 0 1px rgba(99, 174, 255, .1);
    color: #a7ddff;
}
.app-page .help-card {
    border-color: rgba(113, 158, 226, .15);
    background: linear-gradient(145deg, rgba(54, 94, 157, .16), rgba(70, 56, 136, .12));
}
.app-page .help-icon { background: rgba(73, 139, 232, .18); color: #78c9ff; }
.app-page .help-card strong, .app-page .profile-name strong { color: #d6e4fa; }
.app-page .help-card p, .app-page .profile-name small { color: #8394ae; }
.app-page .profile-mini { border-color: rgba(144, 172, 219, .13); }
.app-page .avatar { background: linear-gradient(145deg, rgba(63, 154, 231, .23), rgba(116, 95, 217, .2)); color: #9cddff; }
.app-page .topbar {
    background: rgba(13, 22, 38, .86);
    border-color: rgba(144, 172, 219, .12);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .09);
    backdrop-filter: blur(14px);
}
.app-page .breadcrumb { color: #7586a1; }
.app-page .breadcrumb span { color: #4a5a72; }
.app-page .breadcrumb strong, .app-page .top-user { color: #c4d2e8; }
.app-page .secure-label { color: #8496b0; }
.app-page .icon-button { color: #8295b1; }
.app-page .icon-button:hover { background: rgba(92, 149, 229, .12); color: #90d9ff; }
.app-page h1, .app-page h2 { color: #e4edfc; }
.app-page .eyebrow { color: #768aa7; }
.app-page .muted, .app-page .welcome-row .muted { color: #94a4bc; }
.app-page .wave { color: #7bdfff; text-shadow: 0 0 15px rgba(89, 205, 255, .55); }
.app-page .button-primary {
    background: linear-gradient(110deg, #338ef0, #4a7bf2 55%, #785ce5);
    box-shadow: 0 5px 20px rgba(63, 133, 239, .2), inset 0 1px rgba(255, 255, 255, .2);
}
.app-page .button-primary:hover { background: linear-gradient(110deg, #4aa5ff, #5b8aff 55%, #906cf4); }
.app-page .button-quiet {
    border-color: rgba(142, 169, 210, .2);
    background: rgba(19, 30, 50, .72);
    color: #aab9d0;
}
.app-page .button-quiet:hover {
    border-color: rgba(97, 187, 255, .5);
    background: rgba(50, 105, 173, .16);
    color: #a6e2ff;
}
.app-page .button-danger-quiet {
    border-color: rgba(233, 112, 137, .28);
    background: rgba(120, 40, 65, .18);
    color: #f0a2b3;
}
.app-page .button-danger-quiet:hover { border-color: rgba(246, 129, 154, .55); color: #ffc0cd; }
.app-page .stat-card, .app-page .panel, .app-page .quick-action {
    border-color: rgba(144, 172, 219, .15);
    background: linear-gradient(145deg, rgba(19, 30, 50, .96), rgba(14, 23, 40, .97));
    box-shadow: var(--shadow), inset 0 1px rgba(255, 255, 255, .025);
}
.app-page .stat-card { min-height: 132px; }
.app-page .stat-card::after { opacity: .14; filter: blur(9px); }
.app-page .stat-card p, .app-page .flow-name { color: #9aaac1; }
.app-page .stat-card strong, .app-page .today-panel strong { color: #eff5ff; }
.app-page .stat-card span, .app-page .today-panel > span { color: #8192aa; }
.app-page .dashboard-grid .panel, .app-page .table-panel, .app-page .form-panel { position: relative; }
.app-page .dashboard-grid .panel::before, .app-page .table-panel::before, .app-page .form-panel::before {
    height: 1px;
    position: absolute;
    top: 0;
    right: 12%;
    left: 12%;
    background: linear-gradient(90deg, transparent, rgba(102, 196, 255, .28), transparent);
    content: '';
}
.app-page .flow-count { border-color: rgba(134, 164, 209, .2); background: #15213a; color: #e1edff; }
.app-page .flow-step:not(:last-child)::after { background: linear-gradient(90deg, rgba(81, 167, 255, .34), rgba(135, 120, 232, .13)); }
.app-page .flow-rejected { border-color: rgba(144, 172, 219, .12); color: #a0b0c7; }
.app-page .flow-rejected span:last-child { color: #7385a0; }
.app-page .today-icon, .app-page .panel-icon, .app-page .quick-blue { background: rgba(62, 133, 230, .17); color: #75c9ff; }
.app-page .quick-violet { background: rgba(128, 99, 219, .17); color: #c0a3ff; }
.app-page .text-link { color: #78c5ff; }
.app-page .text-link:hover { color: #b0e6ff; }
.app-page .quick-action { border-color: rgba(144, 172, 219, .14); }
.app-page .quick-action:hover { border-color: rgba(99, 181, 255, .42); box-shadow: 0 12px 32px rgba(0, 0, 0, .24), 0 0 18px rgba(64, 144, 233, .08); }
.app-page .quick-action strong { color: #dce8f9; }
.app-page .quick-action small, .app-page .quick-action b { color: #8496b0; }
.app-page th {
    border-color: rgba(144, 172, 219, .12);
    background: rgba(7, 14, 26, .55);
    color: #8fa2bf;
}
.app-page td { border-color: rgba(144, 172, 219, .1); color: #a3b2c8; }
.app-page .cell-primary, .app-page .lead-name { color: #dce8f8; }
.app-page .row-sub { color: #7587a2; }
.app-page .status-form select, .app-page .stack-form input, .app-page .stack-form select, .app-page .stack-form textarea, .app-page select, .app-page .invite-copy input {
    border-color: rgba(139, 166, 207, .2);
    background-color: #0c1526;
    color: #dbe8fa;
}
.app-page .stack-form label { color: #b4c3d9; }
.app-page .stack-form input::placeholder, .app-page .stack-form textarea::placeholder { color: #64758e; }
.app-page .stack-form input:disabled { color: #7889a1; }
.app-page .field-help, .app-page .table-note { color: #8192aa; }
.app-page .count-pill { border-color: rgba(139, 166, 207, .18); background: rgba(15, 25, 43, .8); color: #a7b8d0; }
.app-page .campaign-item, .app-page .affiliate-item, .app-page .staff-item { border-color: rgba(144, 172, 219, .12); }
.app-page .campaign-icon, .app-page .empty-state > span { background: rgba(79, 125, 190, .14); color: #91b9ea; }
.app-page .campaign-info strong, .app-page .affiliate-info strong, .app-page .staff-info strong { color: #dce8f9; }
.app-page .campaign-info small, .app-page .affiliate-info small, .app-page .staff-info small { color: #92a2ba; }
.app-page .affiliate-meta, .app-page .staff-meta { color: #8294af; }
.app-page .empty-state strong { color: #d0def1; }
.app-page .empty-state p { color: #8495ae; }
.app-page .page-footer { border-color: rgba(144, 172, 219, .13); color: #71829b; }
.app-page .alert-success { border-color: rgba(66, 197, 149, .25); background: rgba(21, 107, 81, .17); color: #8bdfba; }
.app-page .alert-error { border-color: rgba(231, 112, 137, .26); background: rgba(124, 37, 61, .19); color: #f1a4b4; }
.app-page .badge-live, .app-page .badge-active, .app-page .badge-billable { background: rgba(35, 155, 110, .17); color: #7edbb2; }
.app-page .badge-paused, .app-page .badge-disabled, .app-page .badge-rejected { background: rgba(179, 69, 92, .16); color: #ee9aaa; }
.app-page .badge-pending { background: rgba(179, 126, 29, .17); color: #ebc575; }
.app-page .badge-signed { background: rgba(55, 119, 205, .18); color: #91c2ff; }
.app-page .badge-paid { background: rgba(133, 86, 190, .18); color: #c9a6f5; }
.app-page .badge-admin { background: rgba(117, 91, 208, .2); color: #c1a8ff; }
.app-page .badge-staff { background: rgba(52, 126, 167, .2); color: #91d6f5; }
.app-page .settings-card p { color: #99aac1; }
.app-page .settings-card code { color: #88ccff; }
.app-page .settings-facts small { color: #8293ac; }
.app-page .settings-facts strong { color: #d4e2f5; }
.app-page .pagination, .app-page .self-note { color: #8495ad; }
.app-page .pagination a { color: #86caff; }
.app-page .menu-toggle { background: rgba(78, 127, 191, .16); color: #b1dbff; }
.team-layout { grid-template-columns: minmax(270px, .75fr) minmax(0, 1.65fr); }
.permission-note {
    margin-top: 20px;
    padding: 11px 12px;
    display: flex;
    gap: 9px;
    border: 1px solid rgba(114, 139, 223, .18);
    border-radius: 8px;
    background: rgba(77, 83, 171, .1);
}
.permission-note > span { color: #a7a5ff; font-size: 15px; }
.permission-note p { margin: 0; color: #94a4bd; font-size: 9px; line-height: 1.55; }
.permission-note strong { color: #c8c9ff; }
.staff-list { display: grid; }
.staff-item { min-width: 0; padding: 13px 0; display: grid; grid-template-columns: 34px minmax(130px, 1fr) auto auto; align-items: center; gap: 9px 11px; border-top: 1px solid #eff2f6; }
.staff-avatar { background: rgba(64, 144, 218, .19); color: #91d2ff; }
.staff-info { min-width: 0; display: grid; gap: 4px; }
.staff-info strong { overflow: hidden; color: #34435d; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.staff-info small { overflow: hidden; color: #929eae; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.staff-meta { color: #8794a7; font-size: 9px; }
.you-label { margin-left: 4px; padding: 2px 4px; border-radius: 4px; background: rgba(71, 133, 203, .18); color: #91cfff; font-size: 7px; letter-spacing: .5px; }
.staff-actions { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.self-note { grid-column: 2 / -1; color: #7e91aa; font-size: 9px; }

@media (max-width: 850px) {
    .team-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .staff-item { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; }
    .staff-item > .badge { grid-column: auto; }
    .staff-actions, .self-note { grid-column: 2 / -1; }
    .staff-actions { gap: 5px; }
}