/* Bundled CSS reset license (no build dependency):
MIT License

Copyright (c) Tailwind Labs, Inc.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/
/*
  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
  2. Remove default margins and padding
  3. Reset all borders.
*/

*,
::after,
::before,
::backdrop,
::file-selector-button {
  box-sizing: border-box; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 2 */
  border: 0 solid; /* 3 */
}

/*
  1. Use a consistent sensible line-height in all browsers.
  2. Prevent adjustments of font size after orientation changes in iOS.
  3. Use a more readable tab size.
  4. Use the user's configured `sans` font-family by default.
  5. Use the user's configured `sans` font-feature-settings by default.
  6. Use the user's configured `sans` font-variation-settings by default.
  7. Disable tap highlights on iOS.
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  tab-size: 4; /* 3 */
  font-family: --theme(
    --default-font-family,
    ui-sans-serif,
    system-ui,
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    'Noto Color Emoji'
  ); /* 4 */
  font-feature-settings: --theme(--default-font-feature-settings, normal); /* 5 */
  font-variation-settings: --theme(--default-font-variation-settings, normal); /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
  1. Add the correct height in Firefox.
  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
  3. Reset the default border style to a 1px solid border.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
  Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

/*
  Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
  Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
}

/*
  Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
  1. Use the user's configured `mono` font-family by default.
  2. Use the user's configured `mono` font-feature-settings by default.
  3. Use the user's configured `mono` font-variation-settings by default.
  4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: --theme(
    --default-mono-font-family,
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    'Liberation Mono',
    'Courier New',
    monospace
  ); /* 1 */
  font-feature-settings: --theme(--default-mono-font-feature-settings, normal); /* 2 */
  font-variation-settings: --theme(--default-mono-font-variation-settings, normal); /* 3 */
  font-size: 1em; /* 4 */
}

/*
  Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
  Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
  3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
  Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
  Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
  Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
  Make lists unstyled by default.
*/

ol,
ul,
menu {
  list-style: none;
}

/*
  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
      This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/*
  1. Inherit font styles in all browsers.
  2. Remove border radius in all browsers.
  3. Remove background color in all browsers.
  4. Ensure consistent opacity for disabled states in all browsers.
*/

button,
input,
select,
optgroup,
textarea,
::file-selector-button {
  font: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  border-radius: 0; /* 2 */
  background-color: transparent; /* 3 */
  opacity: 1; /* 4 */
}

/*
  Restore default font weight.
*/

:where(select:is([multiple], [size])) optgroup {
  font-weight: bolder;
}

/*
  Restore indentation.
*/

:where(select:is([multiple], [size])) optgroup option {
  padding-inline-start: 20px;
}

/*
  Restore space after button.
*/

::file-selector-button {
  margin-inline-end: 4px;
}

/*
  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
*/

::placeholder {
  opacity: 1;
}

/*
  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
  crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
*/

@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or
  (contain-intrinsic-size: 1px) /* Safari 17+ */ {
  ::placeholder {
    color: color-mix(in oklab, currentcolor 50%, transparent);
  }
}

/*
  Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
  Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
  1. Ensure date/time inputs have the same height when empty in iOS Safari.
  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
*/

::-webkit-date-and-time-value {
  min-height: 1lh; /* 1 */
  text-align: inherit; /* 2 */
}

/*
  Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.
*/

::-webkit-datetime-edit {
  display: inline-flex;
}

/*
  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
*/

::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

::-webkit-datetime-edit,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-meridiem-field {
  padding-block: 0;
}

/*
  Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)
*/

::-webkit-calendar-picker-indicator {
  line-height: 1;
}

/*
  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
  Correct the inability to style the border radius in iOS Safari.
*/

button,
input:where([type='button'], [type='reset'], [type='submit']),
::file-selector-button {
  appearance: button;
}

/*
  Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
  Make elements with the HTML hidden attribute stay hidden by default.
*/

[hidden]:where(:not([hidden='until-found'])) {
  display: none !important;
}



:root {
  --ink: #172033;
  --muted: #6f798b;
  --soft: #9299a8;
  --line: #e5e8ee;
  --canvas: #f7f8fb;
  --surface: #ffffff;
  --accent: #5f6fdf;
  --accent-soft: #f0f2ff;
  --warning: #8b5b16;
  --warning-soft: #fff6e8;
  --shadow: 0 20px 60px rgb(23 32 51 / 12%);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: var(--font-geist-sans, "Segoe UI"), Inter, -apple-system, BlinkMacSystemFont, sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid rgb(95 111 223 / 28%); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; transform: translateY(-150%); padding: 9px 12px; border-radius: 8px; color: white; background: var(--ink); text-decoration: none; }
.skip-link:focus { transform: translateY(0); }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 232px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 24px 16px 18px; border-right: 1px solid var(--line); background: var(--surface); }
.brand { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 8px; }
.brand-mark { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid #d9dce5; border-radius: 9px; color: var(--ink); background: #fafafa; font-size: 13px; font-weight: 720; }
.brand-copy { display: grid; line-height: 1.08; }
.brand-copy strong { font-size: 14px; font-weight: 680; letter-spacing: -.01em; }
.brand-copy small { margin-top: 3px; color: var(--soft); font-size: 10px; }
.sidebar nav { display: grid; gap: 26px; margin-top: 38px; }
.nav-group { display: grid; gap: 4px; }
.nav-group > p { margin: 0; padding: 0 10px 6px; color: #9ca3b1; font-size: 10px; font-weight: 680; letter-spacing: .09em; text-transform: uppercase; }
.nav-group button, .text-button { height: 38px; padding: 0 10px; border: 0; border-radius: 9px; color: #687386; background: transparent; text-align: left; font-size: 13px; }
.nav-group button:hover, .text-button:hover { color: var(--ink); background: #f7f8fa; }
.nav-group button.active { color: #26324a; background: var(--accent-soft); font-weight: 620; }
.sidebar-footer { display: grid; gap: 8px; margin-top: auto; padding-top: 16px; border-top: 1px solid #eceef2; }
.sidebar-footer .text-button { width: 100%; }
.sidebar-footer p { margin: 0; padding: 0 10px; color: #a1a8b5; font-size: 10px; }
.mobile-header { display: none; }

.main-content { min-width: 0; padding: 0 42px 64px; }
.topbar { height: 76px; max-width: 1180px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.eyebrow { margin: 0; color: #8a92a2; font-size: 10px; font-weight: 680; letter-spacing: .09em; text-transform: uppercase; }
.account-button { display: inline-flex; align-items: center; gap: 10px; padding: 5px 5px 5px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: var(--surface); font-size: 12px; }
.account-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: white; background: var(--ink); font-size: 11px; font-weight: 680; }
.page { width: min(1180px, 100%); margin: 0 auto; padding-top: 56px; }
.page-narrow { max-width: 860px; }
.page-header { margin-bottom: 28px; }
.page-header h1 { margin: 0 0 7px; font-size: clamp(27px, 3vw, 34px); line-height: 1.18; letter-spacing: -.035em; font-weight: 650; }
.page-header p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.page-header-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }

.empty-state { min-height: min(540px, calc(100vh - 225px)); display: grid; place-content: center; justify-items: center; padding: 48px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); text-align: center; }
.empty-state.compact { min-height: 410px; }
.empty-mark { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 18px; border-radius: 13px; color: var(--accent); background: var(--accent-soft); font-size: 11px; font-weight: 720; letter-spacing: .04em; }
.empty-state h2 { margin: 0 0 8px; font-size: 19px; letter-spacing: -.015em; font-weight: 640; }
.empty-state p { max-width: 440px; margin: 0 0 22px; color: #788296; font-size: 13px; line-height: 1.6; }
.primary-button, .secondary-button, .icon-button { min-height: 40px; border-radius: 9px; font-size: 13px; font-weight: 620; }
.primary-button { padding: 0 15px; border: 1px solid var(--ink); color: white; background: var(--ink); box-shadow: 0 1px 1px rgb(23 32 51 / 10%); }
.primary-button:hover { background: #273146; }
.secondary-button { padding: 0 14px; border: 1px solid #dce0e7; color: #384256; background: white; }
.secondary-button:hover { border-color: #c7ccd6; background: #fafbfc; }
.icon-button { width: 40px; padding: 0; border: 1px solid #e1e4ea; color: #6d7688; background: white; }
.icon-button:hover { color: var(--ink); background: #fafbfc; }

.table-card { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.table-toolbar { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--soft); font-size: 12px; }
.search-field input { width: min(300px, 48vw); height: 40px; padding: 0 12px; border: 1px solid #dfe2e8; border-radius: 9px; color: var(--ink); background: #fbfbfc; font-size: 13px; }
.client-row { position: relative; min-height: 82px; display: grid; grid-template-columns: minmax(210px, 1fr) 112px 150px minmax(150px, auto) 40px; align-items: center; gap: 18px; padding: 14px 16px; }
.client-group + .client-group { border-top: 8px solid var(--canvas); }
.client-group-heading { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 16px; border-bottom: 1px solid var(--line); background: #fbfbfc; }
.client-group-heading h2 { margin: 0 0 3px; color: #465064; font-size: 12px; font-weight: 660; }
.client-group-heading p { margin: 0; color: var(--soft); font-size: 11px; line-height: 1.4; }
.client-group-heading > span { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; color: #747d8e; background: #eef0f4; font-size: 10px; font-weight: 650; }
.client-group-cancelled .client-row { background: #fcfcfd; }
.client-identity { min-width: 0; display: flex; align-items: center; gap: 12px; }
.client-avatar { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: #4f5bc3; background: var(--accent-soft); font-size: 13px; font-weight: 700; }
.client-identity div { min-width: 0; display: grid; gap: 4px; }
.client-identity strong { overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 640; }
.client-identity small { color: var(--soft); font-size: 11px; }
.status { width: max-content; padding: 5px 8px; border-radius: 999px; font-size: 11px; font-weight: 620; }
.status-waiting { color: var(--warning); background: var(--warning-soft); }
.status-pending { color: var(--warning); background: var(--warning-soft); }
.status-active, .status-paid { color: #256447; background: #edf8f1; }
.status-stopped, .status-cancelled { color: #697386; background: #f0f2f5; }

.dialog-backdrop { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 20px; background: rgb(19 25 38 / 44%); backdrop-filter: blur(3px); }
.dialog { width: min(520px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 26px; border: 1px solid #dfe2e8; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.dialog-header h2 { margin: 5px 0 0; font-size: 23px; letter-spacing: -.025em; font-weight: 650; }
.dialog form, .dialog label { display: grid; gap: 8px; }
.dialog form { gap: 18px; }
.dialog label { color: #4e586b; font-size: 12px; font-weight: 600; }
.dialog input, .dialog select { width: 100%; height: 44px; padding: 0 40px 0 12px; border: 1px solid #d7dce5; border-radius: 10px; color: var(--ink); background-color: white; font-size: 14px; }
.dialog input { padding-right: 12px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.amount-grid { grid-template-columns: 1fr 120px; }
.form-note { margin: -3px 0 0; color: var(--soft); font-size: 11px; line-height: 1.5; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 2px; }
.primary-button:disabled { cursor: not-allowed; color: #a0a7b4; border-color: #e4e6eb; background: #eff0f3; box-shadow: none; }
.link-button { width: max-content; min-height: 44px; display: inline-flex; align-items: center; padding: 4px 0; border: 0; color: #5566d2; background: transparent; font-size: 14px; font-weight: 630; text-decoration: none; }
.link-button:hover { color: #3445b5; }
.back-button { margin: 0 0 20px; padding: 4px 0; border: 0; color: #667085; background: transparent; font-size: 12px; }

.topbar-actions { display: flex; align-items: center; gap: 12px; }
.preview-control { display: flex; align-items: center; gap: 8px; color: #8a92a2; font-size: 10px; font-weight: 620; }
.preview-control select { height: 34px; padding: 0 28px 0 10px; border: 1px solid var(--line); border-radius: 8px; color: #566073; background: var(--surface); font-size: 11px; }
.account-menu { position: relative; }
.account-menu summary { display: inline-flex; align-items: center; gap: 10px; padding: 5px 5px 5px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: var(--surface); font-size: 12px; cursor: pointer; list-style: none; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu > div { position: absolute; z-index: 20; top: 46px; right: 0; min-width: 150px; display: grid; gap: 3px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: white; box-shadow: 0 14px 35px rgb(23 32 51 / 12%); }
.account-menu > div button { height: 34px; padding: 0 10px; border: 0; border-radius: 7px; color: #596376; background: transparent; text-align: left; font-size: 12px; }
.account-menu > div button:hover { color: var(--ink); background: #f6f7f9; }
.nav-backdrop { display: none; }

.fact-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 20px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.fact-strip.three { grid-template-columns: repeat(3, 1fr); }
.fact { min-width: 0; display: grid; gap: 8px; padding: 20px 22px; border-right: 1px solid var(--line); }
.fact:last-child { border-right: 0; }
.fact span { color: var(--soft); font-size: 11px; }
.fact strong { overflow: hidden; color: #263147; font-size: 21px; letter-spacing: -.025em; text-overflow: ellipsis; }
.attention-row { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; padding: 10px 16px; border: 1px solid #eadfcf; border-radius: 12px; background: #fffbf5; }
.attention-row > div { display: flex; align-items: center; gap: 10px; }
.attention-row p { margin: 0; color: #6f604e; font-size: 12px; }
.status-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: #c18631; }
.overview-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 20px; }
.panel { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.section-heading { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.section-heading h2 { margin: 4px 0 0; font-size: 15px; letter-spacing: -.01em; font-weight: 650; }
.section-heading p:not(.eyebrow) { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.section-heading > strong { font-size: 18px; letter-spacing: -.02em; }
.section-heading > span { color: var(--soft); font-size: 12px; }
.bar-chart { height: 240px; display: flex; align-items: flex-end; gap: clamp(12px, 4vw, 34px); padding: 28px 28px 38px; border-bottom: 1px solid transparent; }
.bar-chart > span { position: relative; flex: 1; min-width: 16px; border-radius: 5px 5px 2px 2px; background: #ccd2fb; }
.bar-chart > span:nth-last-child(-n+2) { background: #7b87e7; }
.bar-chart b { position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%); color: #727b8c; font-size: 9px; font-weight: 620; white-space: nowrap; }
.bar-chart small { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); color: #939aaa; font-size: 10px; }
.simple-list { display: grid; }
.simple-list > button { min-height: 72px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }
.simple-list > button:last-child { border-bottom: 0; }
.simple-list > button:hover { background: #fafbfc; }
.simple-list > button > span:nth-child(2) { min-width: 0; display: grid; gap: 4px; }
.simple-list strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; }
.simple-list small { color: var(--soft); font-size: 10px; }

.next-action { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 28px; border: 1px solid #dfe3fb; border-radius: 15px; background: white; }
.next-action h2 { margin: 7px 0; font-size: 19px; letter-spacing: -.015em; }
.next-action p:not(.eyebrow) { max-width: 520px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.progress-list { display: grid; gap: 0; margin: 18px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: white; list-style: none; }
.progress-list li { min-height: 72px; display: flex; align-items: center; gap: 13px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.progress-list li:last-child { border-bottom: 0; }
.progress-list li > span { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #dce0e8; border-radius: 50%; color: var(--soft); font-size: 10px; font-weight: 700; }
.progress-list li.done > span { color: white; border-color: #4f61d1; background: #4f61d1; }
.progress-list li.current { background: #fbfbff; }
.progress-list li.current > span { color: #4f61d1; border-color: #9ba5ef; }
.progress-list li div { display: grid; gap: 4px; }
.progress-list strong { font-size: 12px; }
.progress-list small { color: var(--soft); font-size: 11px; }

.data-list > * + * { border-top: 1px solid var(--line); }
.amount-cell { display: block; white-space: nowrap; }
.amount-cell strong { font-size: 14px; }
.amount-cell small { color: var(--muted); font-size: 13px; font-weight: 500; }
.row-primary { white-space: nowrap; }
.row-menu { position: relative; }
.row-menu summary { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #e1e4ea; border-radius: 9px; color: #6d7688; background: white; cursor: pointer; list-style: none; font-size: 11px; }
.row-menu summary::-webkit-details-marker { display: none; }
.row-menu > div { position: absolute; z-index: 10; top: 45px; right: 0; width: 175px; display: grid; gap: 2px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: white; box-shadow: 0 14px 35px rgb(23 32 51 / 12%); }
.row-menu > div button { height: 34px; padding: 0 9px; border: 0; border-radius: 6px; color: #5d6678; background: transparent; text-align: left; font-size: 11px; }
.row-menu > div button:hover { color: var(--ink); background: #f7f8fa; }
.no-results { margin: 0; padding: 40px 20px; color: var(--muted); text-align: center; font-size: 12px; }

.tabs { width: max-content; display: flex; gap: 4px; margin-bottom: 18px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: #eff1f5; }
.tabs button { min-height: 34px; padding: 0 13px; border: 0; border-radius: 7px; color: #70798a; background: transparent; font-size: 12px; }
.tabs button.active { color: #2c364a; background: white; box-shadow: 0 1px 3px rgb(23 32 51 / 10%); font-weight: 630; }
.compact-tabs { margin: 0; }
.compact-tabs button { min-height: 30px; }
.workflow-list { display: grid; gap: 10px; }
.workflow-row { min-height: 108px; display: grid; grid-template-columns: minmax(220px, 1.2fr) 100px minmax(180px, .8fr) auto; align-items: center; gap: 22px; padding: 20px; border: 1px solid var(--line); border-radius: 13px; background: white; }
.workflow-copy { min-width: 0; }
.workflow-copy > div { display: flex; align-items: center; gap: 9px; }
.workflow-copy > div > span:last-child { overflow: hidden; color: var(--soft); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.workflow-copy h2 { margin: 10px 0 0; overflow: hidden; font-size: 14px; font-weight: 640; text-overflow: ellipsis; white-space: nowrap; }
.workflow-metric { display: grid; gap: 3px; }
.workflow-metric span { font-size: 20px; font-weight: 670; }
.workflow-metric small { color: var(--soft); font-size: 10px; }
.progress-cell { display: grid; gap: 9px; }
.progress-cell > div { display: flex; justify-content: space-between; color: var(--soft); font-size: 10px; }
.progress-cell strong { color: #596376; }
.progress-cell progress { width: 100%; height: 6px; overflow: hidden; border: 0; border-radius: 999px; background: #eceef3; }
.progress-cell progress::-webkit-progress-bar { background: #eceef3; }
.progress-cell progress::-webkit-progress-value { border-radius: 999px; background: #7380df; }
.progress-cell progress::-moz-progress-bar { border-radius: 999px; background: #7380df; }
.row-actions { display: flex; align-items: center; gap: 13px; }
.notification-panel { overflow: hidden; }
.notification-header, .notification-row { display: grid; grid-template-columns: minmax(180px, 1fr) 90px 90px; align-items: center; padding: 12px 18px; }
.notification-header { color: var(--soft); background: #fafbfc; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.notification-row { min-height: 62px; border-top: 1px solid var(--line); }
.notification-row strong { font-size: 12px; font-weight: 600; }
.toggle { width: 34px; height: 20px; display: flex; align-items: center; padding: 2px; border: 0; border-radius: 999px; background: #d8dce4; }
.toggle span { width: 16px; height: 16px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgb(23 32 51 / 20%); transition: transform 160ms ease; }
.toggle.on { background: #6674d9; }
.toggle.on span { transform: translateX(14px); }

.report-builder { margin-bottom: 18px; padding-bottom: 18px; }
.builder-heading { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.builder-heading h2 { margin: 5px 0 0; font-size: 16px; }
.builder-fields { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; align-items: end; gap: 12px; padding: 18px; }
.builder-fields label, .service-purchase label, .affiliate-controls label, .link-field { display: grid; gap: 7px; color: #687285; font-size: 11px; font-weight: 600; }
.builder-fields input, .builder-fields select, .service-purchase input, .service-purchase select, .affiliate-controls select, .link-field input { width: 100%; height: 40px; padding: 0 10px; border: 1px solid #dce0e7; border-radius: 8px; color: var(--ink); background: white; font-size: 12px; }
.inline-note { margin: 0 18px; padding: 11px 12px; border-radius: 8px; color: #626d80; background: #f5f6fb; font-size: 11px; }
.report-library { overflow: hidden; }
.report-rows { display: grid; }
.report-rows button { min-height: 72px; display: grid; grid-template-columns: minmax(220px, 1fr) 120px 70px; align-items: center; gap: 16px; padding: 13px 18px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }
.report-rows button:last-child { border-bottom: 0; }
.report-rows button:hover { background: #fafbfc; }
.report-rows button > span:first-child { min-width: 0; display: grid; gap: 5px; }
.report-rows strong { font-size: 12px; }
.report-rows small, .report-rows button > span:nth-child(2) { color: var(--soft); font-size: 10px; }
.report-rows b { color: #5c69ce; font-size: 11px; text-align: right; }
.report-cover { margin-bottom: 18px; padding: 42px; border-radius: 15px; color: white; background: #242d43; }
.report-cover .eyebrow { color: #acb5cb; }
.report-cover h2 { max-width: 700px; margin: 12px 0 10px; font-size: clamp(23px, 4vw, 36px); line-height: 1.18; letter-spacing: -.035em; }
.report-cover > p:last-child { max-width: 600px; margin: 0; color: #c6cede; font-size: 13px; line-height: 1.6; }
.report-columns { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; }
.activity-table { display: grid; grid-template-columns: 1fr 90px 90px; padding: 8px 18px 18px; }
.activity-table > * { padding: 10px 4px; border-bottom: 1px solid var(--line); font-size: 11px; }
.activity-table > span { color: var(--soft); font-size: 9px; text-transform: uppercase; }
.activity-table b { font-weight: 540; }
.plain-list { display: grid; gap: 0; margin: 0; padding: 6px 18px 18px; list-style-position: inside; }
.plain-list li { padding: 12px 2px; border-bottom: 1px solid var(--line); color: #5e687a; font-size: 12px; }

.service-card { display: grid; grid-template-columns: 1.25fr .75fr; gap: 50px; padding: 34px; border: 1px solid var(--line); border-radius: 15px; background: white; }
.service-card > div:first-child h2 { max-width: 430px; margin: 10px 0; font-size: 28px; letter-spacing: -.03em; }
.service-card > div:first-child > p:last-child { max-width: 450px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.service-purchase { display: grid; align-content: start; gap: 12px; padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: #fafbfc; }
.service-purchase > strong { font-size: 25px; letter-spacing: -.025em; }
.service-purchase > small { margin-top: -10px; color: var(--soft); font-size: 10px; }
.coming-soon { color: var(--soft); font-size: 10px; text-align: center; text-transform: uppercase; letter-spacing: .07em; }
.profile-list article { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 22px; border: 1px solid var(--line); border-radius: 13px; background: white; }
.profile-avatar { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; color: #5866cb; background: var(--accent-soft); font-size: 13px; font-weight: 700; }
.profile-list h2 { margin: 7px 0 4px; font-size: 15px; }
.profile-list p { margin: 0; color: var(--muted); font-size: 11px; }

.payout-history { overflow: hidden; }
.history-row { min-height: 72px; display: grid; grid-template-columns: minmax(180px, 1fr) 90px 80px; align-items: center; gap: 14px; padding: 12px 18px; border-top: 1px solid var(--line); }
.history-row > span { display: grid; gap: 4px; }
.history-row strong, .history-row b { font-size: 12px; }
.history-row small { color: var(--soft); font-size: 10px; }
.affiliate-hero { margin-bottom: 18px; padding: 22px; }
.affiliate-controls { display: grid; grid-template-columns: 200px 1fr; gap: 18px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.affiliate-controls > div { display: grid; align-content: center; gap: 5px; }
.affiliate-controls > div span { color: var(--soft); font-size: 10px; }
.affiliate-controls > div strong { font-family: var(--font-geist-mono), monospace; font-size: 12px; }
.link-field > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 9px; }
.link-field input { color: #5d6780; background: #fafbfc; font-family: var(--font-geist-mono), monospace; }
.link-field a { display: inline-flex; align-items: center; text-decoration: none; }
.affiliate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.number-list { display: grid; gap: 0; margin: 0; padding: 5px 18px 18px; list-style: none; }
.number-list li { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.number-list li:last-child { border-bottom: 0; }
.number-list li > span { flex: 0 0 auto; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: #5967ce; background: var(--accent-soft); font-size: 9px; font-weight: 700; }
.number-list p { display: grid; gap: 4px; margin: 0; }
.number-list strong { font-size: 11px; }
.number-list small { color: var(--soft); font-size: 10px; line-height: 1.5; }
.copy-template { padding: 16px 18px; border-bottom: 1px solid var(--line); }
.copy-template summary { font-size: 12px; font-weight: 620; cursor: pointer; }
.copy-template p { color: var(--muted); font-size: 11px; line-height: 1.55; }

.help-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; align-items: start; gap: 18px; }
.faq-list { overflow: hidden; }
.faq-list details { padding: 17px 20px; border-bottom: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 0; }
.faq-list summary { font-size: 12px; font-weight: 620; cursor: pointer; }
.faq-list p { margin: 10px 0 2px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.support-card { position: sticky; top: 96px; display: grid; gap: 11px; padding: 24px; border: 1px solid #dfe3fb; border-radius: 14px; background: #fafaff; }
.support-card h2 { margin: 2px 0 0; font-size: 17px; }
.support-card > p:not(.eyebrow) { margin: 0 0 5px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.support-card a { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.input-action { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.toast { position: fixed; z-index: 80; right: 22px; bottom: 22px; max-width: min(360px, calc(100vw - 44px)); padding: 12px 15px; border: 1px solid #384258; border-radius: 10px; color: white; background: #202a3d; box-shadow: 0 16px 40px rgb(23 32 51 / 22%); font-size: 12px; }

@media (max-width: 1120px) {
  .main-content { padding-inline: 28px; }
  .client-row { grid-template-columns: minmax(190px, 1fr) 105px auto 40px; }
  .amount-cell { display: none; }
  .workflow-row { grid-template-columns: minmax(200px, 1fr) 90px minmax(150px, .7fr); }
  .workflow-row .row-actions { grid-column: 1 / -1; justify-content: flex-end; margin-top: -5px; }
  .builder-fields { grid-template-columns: 1.3fr 1fr 1fr; }
  .builder-fields > .primary-button { grid-column: 1 / -1; width: max-content; }
}

@media (max-width: 820px) {
  .app-shell { display: block; }
  .mobile-header { position: sticky; z-index: 30; top: 0; height: 66px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid var(--line); background: rgb(255 255 255 / 94%); backdrop-filter: blur(12px); }
  .menu-button { height: 36px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; color: #4f596b; background: white; font-size: 12px; }
  .sidebar { position: fixed; z-index: 25; top: 66px; left: 0; width: min(310px, 88vw); height: calc(100vh - 66px); transform: translateX(-105%); transition: transform 180ms ease; box-shadow: 20px 20px 55px rgb(23 32 51 / 12%); }
  .sidebar.is-open { transform: translateX(0); }
  .nav-backdrop { position: fixed; z-index: 24; inset: 66px 0 0; display: block; width: 100%; border: 0; background: rgb(23 32 51 / 24%); }
  .sidebar > .brand { display: none; }
  .sidebar nav { margin-top: 8px; }
  .main-content { padding: 0 20px 48px; }
  .topbar { height: 58px; }
  .topbar > .eyebrow, .preview-control > span { display: none; }
  .topbar-actions { width: 100%; justify-content: space-between; }
  .page { padding-top: 36px; }
  .empty-state { min-height: 430px; padding: 34px 22px; }
  .overview-grid, .affiliate-grid, .help-grid, .report-columns { grid-template-columns: 1fr; }
  .fact-strip { grid-template-columns: repeat(2, 1fr); }
  .fact:nth-child(2) { border-right: 0; }
  .fact:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .fact-strip.three { grid-template-columns: repeat(3, 1fr); }
  .fact-strip.three .fact { border-bottom: 0; }
  .fact-strip.three .fact:nth-child(2) { border-right: 1px solid var(--line); }
  .next-action { align-items: flex-start; flex-direction: column; }
  .client-row { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .client-row .status { grid-column: 1; }
  .client-row .row-primary { grid-column: 1 / -1; width: 100%; }
  .client-row .row-menu { grid-column: 2; grid-row: 1; }
  .workflow-row { grid-template-columns: minmax(0, 1fr) auto; gap: 16px; }
  .workflow-row .progress-cell, .workflow-row .row-actions { grid-column: 1 / -1; }
  .workflow-row .row-actions { justify-content: flex-start; margin-top: 0; }
  .builder-fields { grid-template-columns: 1fr 1fr; }
  .builder-fields > label:first-child { grid-column: 1 / -1; }
  .builder-fields > .primary-button { width: 100%; }
  .service-card { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
  .support-card { position: static; }
}

@media (max-width: 520px) {
  .page-header-row { display: grid; align-items: start; }
  .page-header-row .primary-button { width: 100%; }
  .form-grid, .amount-grid { grid-template-columns: 1fr; }
  .dialog { padding: 22px 18px; }
  .dialog-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .main-content { padding-inline: 16px; }
  .account-menu summary > span:first-child { display: none; }
  .fact-strip, .fact-strip.three { grid-template-columns: 1fr 1fr; }
  .fact-strip.three .fact:nth-child(2) { border-right: 0; }
  .fact-strip.three .fact:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .fact-strip.three .fact:last-child { grid-column: 1 / -1; }
  .attention-row { align-items: flex-start; flex-direction: column; }
  .bar-chart { height: 200px; gap: 12px; padding-inline: 18px; }
  .bar-chart b { display: none; }
  .notification-header, .notification-row { grid-template-columns: minmax(0, 1fr) 64px 64px; padding-inline: 13px; }
  .builder-heading { align-items: flex-start; flex-direction: column; }
  .builder-fields { grid-template-columns: 1fr; }
  .builder-fields > label:first-child, .builder-fields > .primary-button { grid-column: auto; }
  .report-rows button { grid-template-columns: minmax(0, 1fr) auto; }
  .report-rows button > span:nth-child(2) { display: none; }
  .report-cover { padding: 28px 24px; }
  .activity-table { grid-template-columns: 1fr 70px 60px; }
  .profile-list article { grid-template-columns: 48px minmax(0, 1fr); }
  .profile-list article .secondary-button { grid-column: 1 / -1; }
  .history-row { grid-template-columns: minmax(0, 1fr) auto; }
  .history-row .status { grid-column: 1 / -1; }
  .affiliate-controls { grid-template-columns: 1fr; }
  .link-field > div { grid-template-columns: 1fr 1fr; }
  .link-field input { grid-column: 1 / -1; }
}

/* Readability and journey refinement */
.main-tools { width: min(1180px, 100%); min-height: 58px; margin: 0 auto; display: flex; justify-content: flex-end; align-items: center; padding-top: 12px; }
.main-tool-actions { position: relative; display: flex; align-items: center; gap: 9px; }
.main-tools .notification-badge { right: -7px; top: -4px; }
.page { padding-top: 28px; }
.kickback-callout { display: flex; align-items: baseline; gap: 8px; margin-bottom: 18px; padding: 16px 18px; border: 1px solid #dfe3fb; border-radius: 12px; color: #465166; background: #f7f8ff; font-size: 15px; }
.kickback-callout strong { color: #3445b5; font-size: 18px; }
.workflow-toolbar { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: white; font-size: 13px; }
.workflow-toolbar .search-field { flex: 1; }
.workflow-toolbar .search-field input { width: min(420px, 100%); }

.form-note { padding: 11px 12px; border-radius: 8px; color: #4f5a6e; background: #f4f5f8; font-size: 14px; line-height: 1.5; }
.form-note strong { color: var(--ink); }
.client-identity small, .amount-cell small, .simple-list small, .progress-list small,
.report-rows small, .report-rows button > span:nth-child(2), .profile-list p,
.history-row small, .number-list small, .copy-template p, .faq-list p,
.support-card > p:not(.eyebrow), .inline-note, .plain-list li { color: #687386; font-size: 14px; line-height: 1.55; }
.client-identity strong, .amount-cell strong, .simple-list strong, .progress-list strong,
.report-rows strong, .history-row strong, .history-row b, .number-list strong,
.copy-template summary, .faq-list summary, .notification-row strong { font-size: 14px; }
.table-toolbar, .attention-row p, .section-heading p:not(.eyebrow), .fact span,
.report-rows b, .activity-table > *, .builder-fields label, .affiliate-controls label,
.link-field, .affiliate-controls > div span, .affiliate-controls > div strong { font-size: 13px; }
.number-list li { padding-block: 18px; }
.number-list li > span { width: 32px; height: 32px; font-size: 13px; }
.faq-list details { padding-block: 20px; }
.support-card > p:not(.eyebrow) { margin-bottom: 8px; }

.profile-list { display: grid; gap: 14px; }
.owned-profile-photo { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; }
.assignment-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .75fr); align-items: end; gap: 24px; padding: 24px; border: 1px solid #dfe3fb; border-radius: 13px; background: #fafaff; }
.assignment-panel h2 { margin: 7px 0 6px; font-size: 20px; }
.assignment-panel p:not(.eyebrow) { max-width: 560px; margin: 0; color: #596579; font-size: 14px; line-height: 1.55; }
.assignment-panel form, .assignment-panel label, .assignment-result { display: grid; gap: 9px; }
.assignment-panel form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.assignment-panel label { color: #596376; font-size: 13px; font-weight: 600; }
.assignment-panel select { width: 100%; height: 44px; padding: 0 11px; border: 1px solid #dce0e7; border-radius: 9px; color: var(--ink); background: white; font-size: 14px; }
.assignment-result strong { font-size: 16px; }

@media (max-width: 820px) {
  .main-tools { min-height: 62px; padding-top: 4px; }
  .page { padding-top: 22px; }
  .assignment-panel { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .main-tools { justify-content: space-between; }
  .main-tool-actions { width: 100%; justify-content: space-between; }
  .workflow-toolbar { align-items: stretch; flex-direction: column; }
  .kickback-callout { align-items: flex-start; flex-direction: column; }
  .assignment-panel form { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* V2 refinement: readable, viewport-safe interaction layer */
body { font-size: 14px; overflow-x: hidden; }
.brand img { width: 32px; height: 32px; object-fit: contain; }
.brand-copy small, .sidebar-footer p { font-size: 12px; }
.nav-group button, .text-button, .primary-button, .secondary-button, .account-button, .notification-button { min-height: 44px; font-size: 14px; }
.nav-group > p, .eyebrow { font-size: 11px; }
.icon-button { min-width: 44px; min-height: 44px; }
.topbar-actions { position: relative; }
.account-button { width: 44px; justify-content: center; padding: 0; border: 1px solid var(--line); border-radius: 10px; color: white; background: var(--ink); font-weight: 700; }
.notification-button { display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; color: #4d586c; background: white; }
.notification-button > span:first-child { font-size: 16px; }
.notification-badge { position: absolute; top: -5px; right: 45px; min-width: 19px; height: 19px; display: grid; place-items: center; padding: 0 5px; border: 2px solid white; border-radius: 10px; color: white; background: #5f6fdf; font-size: 11px; font-weight: 700; pointer-events: none; }
.popover-panel { position: fixed; z-index: 120; width: min(210px, calc(100vw - 24px)); padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: 0 18px 50px rgb(23 32 51 / 18%); }
.menu-list { display: grid; gap: 2px; }
.menu-list button { min-height: 44px; padding: 0 11px; border: 0; border-radius: 8px; color: #4d586c; background: transparent; text-align: left; font-size: 14px; }
.menu-list button:hover, .menu-list button:focus-visible { color: var(--ink); background: #f5f6f9; }
.notification-popover { width: min(410px, calc(100vw - 24px)); padding: 0; overflow: hidden; }
.notification-popover > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 18px 12px; }
.notification-popover h2 { margin: 0; font-size: 18px; }
.notification-popover header p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.notification-tabs { display: flex; gap: 4px; padding: 0 14px 10px; border-bottom: 1px solid var(--line); }
.notification-tabs button { min-height: 36px; padding: 0 10px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font-size: 13px; }
.notification-tabs button.active { color: var(--ink); background: var(--accent-soft); font-weight: 650; }
.notification-feed { max-height: min(480px, 65vh); overflow-y: auto; }
.notification-feed > button { width: 100%; display: grid; grid-template-columns: 8px 1fr; gap: 10px; padding: 15px 18px; border: 0; border-bottom: 1px solid var(--line); color: inherit; background: white; text-align: left; }
.notification-feed > button:hover { background: #fafbfc; }
.notification-feed > button.unread { background: #fafaff; }
.unread-dot { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: transparent; }
.unread .unread-dot { background: var(--accent); }
.notification-feed button > span:last-child { display: grid; gap: 5px; }
.notification-feed strong { font-size: 14px; }
.notification-feed small { color: var(--muted); font-size: 13px; line-height: 1.45; }
.notification-feed time { color: var(--soft); font-size: 12px; }
.empty-feed { margin: 0; padding: 32px 18px; color: var(--muted); text-align: center; }

.workflow-groups { display: grid; gap: 20px; }
.workflow-group { overflow: visible; border: 1px solid var(--line); border-radius: 14px; background: white; }
.workflow-group > header { min-height: 68px; display: flex; align-items: center; gap: 11px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: #fafbfc; }
.workflow-group > header h2 { margin: 0; font-size: 15px; }
.workflow-group > header p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.workflow-group .workflow-list { gap: 0; }
.workflow-group .workflow-row { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.workflow-group .workflow-row:last-child { border-bottom: 0; }
.workflow-row.is-focused { background: #f7f8ff; box-shadow: inset 3px 0 var(--accent); }
.workflow-copy { display: grid; gap: 9px; }
.workflow-copy h3 { margin: 0; font-size: 15px; }
.workflow-assurance { position: relative; width: max-content; max-width: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; color: #647084; font-size: 13px; line-height: 1.4; cursor: help; outline: none; }
.workflow-assurance > span { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #93a0b2; }
.workflow-assurance.active > span { background: #2b9b75; }
.workflow-assurance strong { color: #465267; font-size: 13px; font-weight: 650; }
.workflow-assurance small { color: #768196; font-size: 13px; }
.workflow-assurance small::before { content: '·'; margin-right: 6px; }
.workflow-assurance:focus-visible { border-radius: 4px; outline: 3px solid rgb(95 111 223 / 28%); outline-offset: 3px; }
.workflow-assurance .workflow-tooltip { position: absolute; z-index: 20; top: calc(100% + 8px); left: 13px; width: max-content; max-width: min(360px, calc(100vw - 72px)); height: auto; padding: 9px 11px; border: 1px solid #dfe3ea; border-radius: 8px; color: #f8f9fc; background: #293348; box-shadow: 0 12px 30px rgb(23 32 51 / 18%); font-size: 12px; font-weight: 450; line-height: 1.45; opacity: 0; visibility: hidden; transform: translateY(-3px); pointer-events: none; transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms; }
.workflow-assurance:hover .workflow-tooltip, .workflow-assurance:focus .workflow-tooltip { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 180ms; }
.workflow-metric small, .progress-cell > div { font-size: 12px; }

.notification-settings { display: grid; gap: 18px; }
.connection-grid { display: grid; grid-template-columns: 1fr 1fr; }
.connection-grid > article { min-width: 0; display: grid; align-content: start; gap: 16px; padding: 20px; border-right: 1px solid var(--line); }
.connection-grid > article:last-child { border-right: 0; }
.connection-grid h3 { margin: 8px 0 4px; font-size: 17px; }
.connection-grid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.connection-state { color: #8b5b16; font-size: 12px; font-weight: 650; }
.connection-state.ready { color: #256447; }
.connection-grid form, .connection-grid label { display: grid; gap: 8px; }
.connection-grid form { align-items: end; grid-template-columns: minmax(0, 1fr) auto; }
.connection-grid form .field-error { grid-column: 1 / -1; margin: -2px 0 0; color: #a03d3d; font-size: 13px; line-height: 1.4; }
.connection-grid label { color: #596376; font-size: 13px; font-weight: 600; }
.connection-grid input { min-width: 0; width: 100%; height: 44px; padding: 0 11px; border: 1px solid #dce0e7; border-radius: 9px; font-size: 14px; }
.connected-value { display: grid; gap: 10px; }
.connected-value code { overflow: hidden; padding: 12px; border-radius: 8px; color: #596376; background: #f5f6f8; text-overflow: ellipsis; font-size: 13px; }
.recipient-list { display: flex; flex-wrap: wrap; gap: 7px; }
.recipient-list > span { display: flex; align-items: center; gap: 5px; padding: 5px 6px 5px 9px; border-radius: 999px; color: #4e596c; background: #f1f3f7; font-size: 13px; }
.recipient-list button { width: 26px; height: 26px; border: 0; border-radius: 50%; color: #697386; background: white; }
.prototype-note, .dependency-note { margin: 0; padding: 12px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.toggle:disabled { cursor: not-allowed; opacity: .45; }

.growth-layout { display: grid; grid-template-columns: minmax(290px, .72fr) minmax(0, 1.28fr); overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: white; }
.growth-offer { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(26px, 4vw, 46px); color: white; background: linear-gradient(145deg, #3e50d9, #704bd0); }
.growth-offer .eyebrow { margin-top: 18px; color: #dfe3ff; }
.growth-offer h2 { margin: 10px 0 22px; font-size: clamp(27px, 3vw, 38px); line-height: 1.08; letter-spacing: -.035em; }
.waitlist-badge { padding: 6px 10px; border-radius: 999px; color: #3345c3; background: white; font-size: 13px; font-weight: 650; }
.check-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.45; }
.check-list li::before { content: '✓'; margin-right: 9px; }
.price { display: grid; gap: 2px; margin-top: auto; padding-top: 38px; }
.price strong { font-size: 31px; }
.price span { color: #dfe3ff; font-size: 13px; }
.waitlist-form { width: 100%; display: grid; gap: 10px; margin-top: 18px; }
.waitlist-form label { display: grid; gap: 7px; color: #eef0ff; font-size: 13px; font-weight: 600; }
.waitlist-form input { width: 100%; height: 46px; padding: 0 12px; border: 1px solid rgb(255 255 255 / 35%); border-radius: 9px; color: var(--ink); background: white; font-size: 16px; }
.waitlist-form .primary-button { color: #3849c5; border-color: white; background: white; }
.form-success, .form-error { margin: 10px 0 0; font-size: 13px; }
.growth-detail { min-width: 0; padding: clamp(22px, 4vw, 42px); }
.network-profile { overflow: hidden; border: 1px solid #dfe3e9; border-radius: 14px; background: white; box-shadow: 0 14px 35px rgb(23 32 51 / 8%); }
.profile-cover { width: 100%; height: 150px; display: block; object-fit: cover; }
.profile-summary { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; padding: 0 22px 20px; }
.profile-photo { width: 96px; height: 96px; margin-top: -34px; border: 4px solid white; border-radius: 50%; object-fit: cover; }
.profile-summary > div { padding-top: 15px; }
.profile-summary h3 { margin: 6px 0 3px; font-size: 21px; }
.profile-summary p { margin: 0 0 5px; color: #465166; font-size: 14px; }
.profile-summary small { color: var(--muted); font-size: 13px; }
.profile-health { color: #256447; font-size: 12px; font-weight: 650; }
.network-profile footer { display: flex; justify-content: space-between; gap: 12px; padding: 13px 22px; border-top: 1px solid var(--line); color: var(--muted); background: #fafbfc; font-size: 13px; }
.network-profile footer strong { color: #256447; }
.capacity-heading { margin: 24px 0 12px; }
.capacity-heading h3 { margin: 0; font-size: 17px; }
.capacity-heading p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.capacity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.capacity-grid > div { position: relative; display: grid; gap: 4px; padding: 15px; border: 1px solid #d6e7e2; border-radius: 11px; background: #f6fbf9; }
.capacity-grid strong { font-size: 20px; }
.capacity-grid span { color: var(--muted); font-size: 13px; }
.capacity-grid b { position: absolute; top: 13px; right: 13px; color: #2b9b75; }

/* First-use journeys keep value concrete without pretending activity exists. */
.first-client-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 18px 45px rgb(23 32 51 / 6%); }
.first-client-copy { padding: clamp(30px, 5vw, 58px); }
.first-client-copy h1 { max-width: 620px; margin: 10px 0 14px; font-size: clamp(32px, 5vw, 52px); line-height: 1.05; letter-spacing: -.045em; }
.first-client-copy > p:not(.eyebrow) { max-width: 570px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
.first-client-copy ol { display: grid; gap: 0; max-width: 520px; margin: 32px 0; padding: 0; list-style: none; }
.first-client-copy li { min-height: 54px; display: flex; align-items: center; gap: 13px; border-bottom: 1px solid var(--line); font-size: 15px; }
.first-client-copy li span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: #4051c7; background: #eef0ff; font-size: 12px; font-weight: 700; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.earning-example { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 4vw, 46px); color: white; background: linear-gradient(145deg, #4356d6, #596be2); }
.earning-example .earning-plan { width: max-content; padding: 5px 9px; border: 1px solid rgb(255 255 255 / 24%); border-radius: 999px; color: white; background: rgb(255 255 255 / 10%); font-size: 12px; font-weight: 700; }
.earning-example > p { margin: 18px 0 0; color: #dce1ff; font-size: 14px; line-height: 1.5; }
.earning-example > p strong { color: white; font-weight: 650; }
.earning-total { display: grid; gap: 7px; margin-top: 28px; }
.earning-total > span { color: #dce1ff; font-size: 14px; font-weight: 600; }
.earning-total > strong { display: flex; align-items: baseline; flex-wrap: nowrap; gap: 6px; color: white; font-size: clamp(34px, 3.4vw, 46px); line-height: 1; letter-spacing: -.04em; white-space: nowrap; }
.earning-total small { color: #dce1ff; font-size: 16px; font-weight: 550; letter-spacing: 0; }
.earning-share { display: flex; align-items: baseline; gap: 12px; margin-top: 30px; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / 20%); }
.earning-share b { font-size: 22px; }
.earning-share span { color: #dce1ff; font-size: 13px; line-height: 1.45; }

.earnings-model { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .8fr); overflow: hidden; }
.earnings-inputs, .earnings-output { padding: clamp(26px, 4vw, 46px); }
.earnings-inputs h2 { margin: 8px 0 8px; font-size: clamp(25px, 3vw, 34px); letter-spacing: -.03em; }
.earnings-inputs > p:not(.eyebrow) { margin: 0 0 28px; color: var(--muted); font-size: 15px; }
.earnings-inputs label { display: grid; gap: 9px; margin-top: 20px; color: #4d586b; font-size: 14px; font-weight: 650; }
.earnings-inputs select { width: 100%; height: 48px; padding: 0 42px 0 13px; border: 1px solid #d7dce5; border-radius: 10px; color: var(--ink); background-color: white; font-size: 15px; }
.package-price-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 12px; padding: 14px 16px; border: 1px solid #e0e4ec; border-radius: 10px; color: var(--muted); background: #f8f9fb; font-size: 14px; }
.package-price-row strong { color: var(--ink); font-size: 15px; white-space: nowrap; }
.client-range span { display: flex; justify-content: space-between; align-items: center; }
.client-range strong { color: var(--ink); font-size: 22px; }
.client-range input { accent-color: var(--accent); }
.share-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 28px; padding: 18px; border-radius: 12px; color: #355f52; background: #edf7f3; font-size: 14px; }
.share-row strong { color: #17684f; font-size: 27px; }
.earnings-output { display: grid; align-content: center; gap: 14px; color: white; background: linear-gradient(145deg, #4356d6, #596be2); }
.earnings-output > div { display: grid; gap: 7px; padding: 22px; border: 1px solid rgb(255 255 255 / 13%); border-radius: 13px; background: rgb(255 255 255 / 5%); }
.earnings-output span { color: #bbc4d5; font-size: 14px; }
.earnings-output strong { font-size: clamp(29px, 4vw, 42px); letter-spacing: -.04em; }
.earnings-output p { margin: 8px 0 0; padding: 18px; border-radius: 12px; color: #dbe3ef; background: rgb(62 185 139 / 13%); font-size: 14px; line-height: 1.55; }
.earnings-output p strong { display: block; margin-bottom: 4px; color: white; font-size: 15px; letter-spacing: 0; }
.model-note { margin: 14px 4px 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

.connection-grid > article { grid-template-rows: auto minmax(58px, 1fr) auto; min-height: 320px; }
.connection-current { min-width: 0; align-self: start; color: var(--muted); font-size: 13px; }
.connection-current > code { display: block; overflow: hidden; padding: 12px; border-radius: 8px; color: #596376; background: #f5f6f8; text-overflow: ellipsis; font-size: 13px; }
.connection-action { align-self: end; }
.connection-action > .secondary-button { width: 100%; }

select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #6e788a 50%), linear-gradient(135deg, #6e788a 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-repeat: no-repeat; background-size: 5px 5px, 5px 5px; }
select:focus-visible, input:focus-visible { outline: 3px solid rgb(85 101 213 / 20%); outline-offset: 1px; border-color: #7d89e8; }

@media (max-width: 820px) {
  .connection-grid, .growth-layout, .first-client-hero, .earnings-model { grid-template-columns: 1fr; }
  .earning-example { min-height: 0; height: auto; align-self: start; justify-content: flex-start; padding: 30px; }
  .connection-grid > article { border-right: 0; border-bottom: 1px solid var(--line); }
  .connection-grid > article { min-height: 0; grid-template-rows: auto auto auto; }
  .growth-offer { min-height: 520px; }
  .notification-trigger-label { display: none; }
  .notification-badge { right: 45px; }
}
@media (max-width: 520px) {
  input, select { font-size: 16px !important; }
  .menu-button, .preview-control select, .tabs button { min-height: 44px; }
  .preview-control { font-size: 12px; }
  .skip-link { min-height: 44px; }
  .topbar-actions { gap: 7px; }
  .preview-control select { max-width: 124px; }
  .notification-button { width: 44px; padding: 0; justify-content: center; }
  .capacity-grid { grid-template-columns: 1fr 1fr; }
  .profile-cover { height: 112px; }
  .profile-summary { grid-template-columns: 70px minmax(0, 1fr); gap: 12px; padding-inline: 14px; }
  .profile-photo { width: 70px; height: 70px; margin-top: -24px; }
  .network-profile footer { align-items: flex-start; flex-direction: column; padding-inline: 14px; }
  .connection-grid form { grid-template-columns: 1fr; }
  .workflow-row { grid-template-columns: 1fr; }
  .workflow-row .workflow-metric, .workflow-row .progress-cell, .workflow-row .row-actions { grid-column: 1; }
  .earning-example { padding: 24px 20px; }
  .earning-total > strong { font-size: clamp(34px, 10vw, 42px); }
  .earning-share { margin-top: 24px; padding-top: 18px; }
}


/* Additional controls carried forward from the original application, using V2 tokens. */
[hidden] { display: none !important; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.workspace-actions { width: 100%; }
button:disabled { cursor: not-allowed; opacity: .6; }
textarea { font: inherit; }
.native-dialog { position: fixed; margin: auto; inset: 0; color: var(--ink); }
.native-dialog::backdrop { background: rgb(19 25 38 / 44%); backdrop-filter: blur(3px); }
.dialog-fields > .eyebrow { margin-bottom: 16px; }
.dialog-fields form { margin-top: 16px; }
.dialog input, .dialog select { min-width: 0; }
.preview-label { color: var(--muted); font-size: 12px; }
.action-status { position: fixed; z-index: 100; top: 15px; left: 50%; transform: translateX(-50%); padding: 10px 20px; background: var(--ink); color: white; border-radius: 9px; }
.credentials { display: grid; gap: 16px; margin: 18px 0; }
.manual-copy { width: 100%; min-height: 160px; margin: 16px 0; padding: 12px; border: 1px solid var(--line); border-radius: 9px; }
.billing-details { color: var(--muted); font-size: 11px; }
.billing-details summary { cursor: pointer; }
.billing-details small { display: block; overflow-wrap: anywhere; padding-top: 5px; }
.status-starting, .status-processing, .status-requested { color: #5364c9; background: var(--accent-soft); }
.status-finished { color: #256447; background: #edf8f1; }
.status-paused { color: var(--warning); background: var(--warning-soft); }
.status-failed { color: #a13232; background: #fff0f0; }
.retained-form, .retained-form fieldset, .retained-form label { display: grid; gap: 8px; }
.retained-form, .retained-form fieldset { gap: 18px; }
.retained-form label { color: #4e586b; font-size: 14px; font-weight: 550; }
.retained-form input, .retained-form select, .retained-form textarea { width: 100%; min-width: 0; min-height: 44px; border: 1px solid #d7dce5; border-radius: 10px; padding: 10px 12px; color: var(--ink); background: white; }
.retained-form textarea { min-height: 110px; resize: vertical; }
.retained-form button { justify-self: start; }
.retained-form .checkbox-label { display: flex; align-items: center; gap: 12px; }
.retained-form input[type=checkbox] { min-height: 20px; width: 20px; accent-color: var(--accent); }
.notification-settings > .panel { margin-bottom: 16px; }
.dependency-note { line-height: 1.6; }
.profile-picker { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.profile-picker .active { background: var(--accent-soft); border-color: var(--accent); }
.profile-editor-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 24px; }
.profile-editor-layout > * { min-width: 0; }
.profile-preview-copy { padding: 24px; display: grid; gap: 15px; overflow-wrap: anywhere; }
.profile-preview-copy h2 { font-size: 25px; font-weight: 650; }
.profile-preview-copy h3 { font-size: 17px; font-weight: 650; }
.profile-preview-copy p { color: var(--muted); line-height: 1.7; white-space: pre-wrap; }
.profile-cover-placeholder { height: 120px; background: linear-gradient(120deg, #e8eaf8, #d8e1eb); }
.affiliate-extras { padding-top: 24px; }
.affiliate-extras .retained-form { max-width: 400px; }
.retained-reports .report-sample-note { margin: 0 0 22px; }
.retained-reports h1 { font-size: 34px; font-weight: 650; letter-spacing: -.035em; }
.retained-reports h2 { font-size: 20px; font-weight: 650; }
.retained-reports h3 { font-size: 16px; font-weight: 650; }
.retained-reports h4 { margin-bottom: 15px; font-size: 14px; font-weight: 650; }
.retained-reports .icon { display: none; }
.retained-reports .button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 15px; border: 1px solid var(--line); border-radius: 9px; font-size: 14px; }
.retained-reports .primary { background: var(--ink); color: white; }
.retained-reports .secondary { background: white; }
.retained-reports .panel-heading, .retained-reports .report-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.retained-reports .report-controls { margin-bottom: 22px; }
.retained-reports .report-filter-grid { display: grid; grid-template-columns: minmax(160px, 1.2fr) 1fr 1fr auto; align-items: end; gap: 16px; }
.retained-reports label { display: grid; gap: 8px; color: var(--muted); font-size: 14px; }
.retained-reports input, .retained-reports select { width: 100%; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; background: white; color: var(--ink); }
.retained-reports .report-type-toggle { display: flex; border: 1px solid var(--line); border-radius: 9px; padding: 4px; }
.retained-reports .report-type-toggle button { min-height: 36px; padding: 0 13px; border-radius: 6px; color: var(--muted); }
.retained-reports .report-type-toggle .is-active { background: var(--accent-soft); color: var(--accent); }
.retained-reports .reports-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: 24px; }
.retained-reports .reports-layout > *, .retained-reports .report-document-header > * { min-width: 0; }
.retained-reports .report-document-header { overflow-wrap: anywhere; }
.retained-reports .report-list-item > span { min-width: 0; }
.retained-reports .report-list-item { white-space: normal; }
.tabs { max-width: 100%; flex-wrap: wrap; }
.growth-offer .retained-form label { color: #f1f1ff; }
.retained-reports .report-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.retained-reports .report-list-item { display: flex; justify-content: space-between; gap: 15px; border: 1px solid var(--line); border-radius: 10px; padding: 16px; text-align: left; background: white; }
.retained-reports .report-list-item.is-active { border-color: var(--accent); background: var(--accent-soft); }
.retained-reports .report-list-item strong, .retained-reports .report-list-item small { display: block; }
.retained-reports small, .retained-reports .report-section-heading > span { color: var(--muted); font-size: 12px; }
.retained-reports .report-document { padding: 32px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.retained-reports .report-document-header { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 28px; }
.retained-reports .report-document-header p { color: var(--muted); margin-top: 10px; }
.retained-reports .report-section { padding: 24px 0; border-top: 1px solid var(--line); }
.retained-reports .report-score { display: grid; gap: 3px; text-align: center; }
.retained-reports .report-score strong { font-size: 32px; color: var(--accent); }
.retained-reports .report-metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.retained-reports .report-metric { padding: 15px; border: 1px solid var(--line); border-radius: 10px; display: grid; gap: 8px; }
.retained-reports .report-metric strong { font-size: 23px; }
.retained-reports .report-metric span { color: var(--muted); font-size: 12px; }
.retained-reports .campaign-health-list { display: grid; gap: 12px; }
.retained-reports .campaign-health-row { display: grid; grid-template-columns: minmax(180px,1fr) auto; gap: 20px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: 10px; }
.retained-reports .campaign-health-row span, .retained-reports .campaign-health-row small { display: block; }
.retained-reports .campaign-health-stats { display: flex; gap: 18px; font-size: 13px; }
.retained-reports .campaign-progress { margin-top: 10px; height: 7px; background: var(--canvas); border-radius: 9px; overflow: hidden; }
.retained-reports .campaign-progress span { height: 100%; background: var(--accent); }
.retained-reports .campaign-health-main { display: flex; gap: 14px; justify-content: space-between; grid-column: 1/-1; }
.retained-reports .campaign-health-progress { height: 7px; border-radius: 9px; background: var(--canvas); overflow: hidden; grid-column: 1/-1; }
.retained-reports .campaign-health-progress span { height: 100%; background: var(--accent); }
.retained-reports .campaign-health-foot { display: flex; flex-wrap: wrap; gap: 18px; grid-column: 1/-1; color: var(--muted); font-size: 12px; }
.retained-reports .narrative-grid, .retained-reports .report-graph-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.retained-reports .narrative-card, .retained-reports .report-graph { padding: 18px; border: 1px solid var(--line); border-radius: 10px; }
.retained-reports .narrative-card p { font-size: 14px; line-height: 1.7; color: var(--muted); }
.retained-reports .report-table-wrap { width: 100%; overflow: auto; }
.retained-reports table { width: 100%; border-collapse: collapse; font-size: 12px; }
.retained-reports th, .retained-reports td { padding: 11px 9px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.retained-reports th { color: var(--muted); background: var(--canvas); font-weight: 600; }
.retained-reports .funnel-row, .retained-reports .employee-bar-row, .retained-reports .campaign-score-row { display: grid; grid-template-columns: 100px 1fr 35px; gap: 10px; align-items: center; font-size: 12px; margin: 14px 0; }
.retained-reports i { display: block; height: 9px; max-width: 100%; border-radius: 9px; background: var(--accent); }
.retained-reports .rate-trend { display: flex; gap: 8px; height: 150px; }
.retained-reports .rate-day { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.retained-reports .rate-day small { font-size: 9px; }
.retained-reports .rate-bars { flex: 1; display: flex; align-items: end; gap: 2px; }
.retained-reports .rate-bars span { flex: 1; background: var(--accent); border-radius: 4px 4px 0 0; }
.retained-reports .rate-bars .reply { background: #92c9b2; }
.retained-reports .graph-legend { display: flex; gap: 20px; margin-top: 15px; font-size: 12px; color: var(--muted); }
.retained-reports .future-activity-row { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.retained-reports .future-activity-row span { display: block; font-size: 12px; color: var(--muted); }
.retained-reports .badge { display: inline-block; padding: 5px 9px; border-radius: 20px; color: var(--accent); background: var(--accent-soft); font-size: 12px; }
@media (max-width: 1100px) { .profile-editor-layout { grid-template-columns: 1fr; } .retained-reports .report-filter-grid { grid-template-columns: 1fr 1fr; } .retained-reports .report-metrics-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 680px) { .form-grid { grid-template-columns: 1fr; } .retained-reports .report-filter-grid, .retained-reports .report-list, .retained-reports .narrative-grid, .retained-reports .report-graph-grid { grid-template-columns: 1fr; } .retained-reports .report-document { padding: 16px; } .retained-reports .campaign-health-row { grid-template-columns: 1fr; } .retained-reports .campaign-health-stats { flex-wrap: wrap; } .retained-reports .panel-heading { flex-wrap: wrap; } .history-row { gap: 12px; } .preview-label { font-size: 11px; } }
@media print { .sidebar, .mobile-header, .main-tools, .workspace-actions, .toast, .action-status, .retained-reports .report-controls, .retained-reports .report-library, .retained-reports .report-workspace > .section-heading { display: none !important; } .app-shell { display: block; } .main-content, .retained-reports { padding: 0; width: 100%; max-width: none; } .retained-reports .report-document { border: 0; padding: 0; } .retained-reports .report-section { break-inside: avoid; } .retained-reports th, .retained-reports td { white-space: normal; } }

.welcome-email-preview { margin: 20px 0; padding: 18px; border: 1px solid var(--border, #e3e5e8); border-radius: 10px; background: #f8f9fb; font-size: 14px; line-height: 1.6; }
.welcome-email-preview p { margin-bottom: 0; }