*, *::before, *::after { box-sizing: border-box; }
:root {
  --canvas: #f4f1eb;
  --paper: #fcfbf8;
  --ink: #171b24;
  --muted: #6f736f;
  --line: #dfddd6;
  --line-dark: #31343c;
  --night: #111722;
  --night-soft: #18202c;
  --accent: #f1853f;
  --accent-dark: #c55e22;
  --green: #397961;
  --amber: #9b681e;
  --blue: #476b86;
  --display: 'Red Hat Display', sans-serif;
  --body: 'Manrope', sans-serif;
  --mono: 'DM Mono', monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
html { background: var(--canvas); color: var(--ink); font-family: var(--body); scroll-behavior: smooth; }
body { margin: 0; min-height: 100dvh; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
[hidden] { display: none !important; }
body:not([data-auth-state="ready"]) .authenticated-only { display: none !important; }
body[data-auth-state="ready"] .auth-gate { display: none; }
.auth-gate { min-height: 100dvh; display: grid; place-items: center; padding: 32px 20px; background: var(--canvas); }
.auth-card { width: min(480px, 100%); padding: clamp(30px, 6vw, 56px); border: 1px solid var(--line); background: var(--paper); box-shadow: 0 24px 70px rgba(17, 23, 34, .08); }
.auth-brand { display: inline-flex; gap: 10px; align-items: baseline; margin-bottom: 54px; color: var(--ink); text-decoration: none; font: 800 1.05rem/1 var(--display); letter-spacing: -.035em; }
.auth-brand-logo { display: block; width: auto; height: 82px; border-radius: 12px; }
.auth-brand span { color: var(--muted); font: 500 .65rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.auth-card h1 { margin: 0; font: 700 clamp(2rem, 7vw, 3.2rem)/.98 var(--display); letter-spacing: -.05em; }
.auth-card > p:not(.section-kicker) { margin: 17px 0 0; color: var(--muted); font-size: .85rem; line-height: 1.7; }
.auth-form { display: grid; gap: 11px; margin-top: 28px; }
.auth-form label { color: var(--ink); font-size: .72rem; font-weight: 700; }
.auth-form input { min-height: 48px; width: 100%; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); }
.auth-form .primary-action { margin-top: 3px; min-height: 48px; }
.auth-link-action { min-height: 38px; border: 0; background: transparent; color: var(--accent-dark); font-size: .7rem; font-weight: 700; cursor: pointer; }
.auth-link-action:hover { text-decoration: underline; }
.auth-link-action:disabled { cursor: wait; opacity: .55; }
.auth-form .form-status { min-height: 20px; margin: 3px 0 0; color: var(--muted); font-size: .68rem; line-height: 1.5; }
.account-email { max-width: 190px; overflow: hidden; color: var(--muted); font: 500 .62rem/1 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.inline-empty { padding: 36px 24px; color: var(--muted); font-size: .75rem; text-align: center; }
.portal-account { display: flex; align-items: center; gap: 14px; color: var(--muted); font: 500 .61rem/1 var(--mono); }
.portal-account > button { border: 0; padding: 7px 9px; background: transparent; color: var(--ink); font: 700 .65rem/1 var(--body); cursor: pointer; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; padding: 10px 14px; background: var(--ink); color: white; border-radius: 6px; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.studio-header { height: 76px; padding: 0 clamp(20px, 4vw, 62px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--canvas) 92%, transparent); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 20; }
.studio-brand { display: inline-flex; align-items: center; width: fit-content; text-decoration: none; gap: 13px; }
.studio-brand-logo { display: block; width: auto; height: 56px; border-radius: 9px; }
.studio-brand strong { color: var(--ink); font: 800 1.02rem/1 var(--display); letter-spacing: -.035em; }
.studio-brand span { color: var(--muted); font: 500 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; padding-left: 13px; border-left: 1px solid var(--line); }
.studio-nav { display: flex; align-items: center; gap: 4px; }
.nav-item { border: 0; background: transparent; padding: 10px 13px; border-radius: 7px; color: var(--muted); font-size: .83rem; font-weight: 650; cursor: pointer; transition: background .2s, color .2s; }
.nav-item:hover, .nav-item.is-active { background: var(--paper); color: var(--ink); }
.nav-item span { margin-left: 5px; padding: 2px 6px; border-radius: 20px; background: #e7e2da; font: 500 .65rem/1 var(--mono); }
.studio-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.command-button { border: 1px solid var(--line); background: rgba(255,255,255,.45); border-radius: 8px; padding: 8px 9px 8px 12px; color: var(--muted); cursor: pointer; display: flex; gap: 16px; align-items: center; font-size: .74rem; }
kbd { padding: 3px 5px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); font: 500 .62rem/1 var(--mono); color: var(--muted); box-shadow: 0 1px 0 #cbc8c1; }
.avatar-button { width: 36px; height: 36px; border-radius: 10px; border: 0; background: var(--night); color: white; font: 500 .72rem/1 var(--mono); cursor: pointer; }
.studio-main { width: min(1500px, 100%); margin: 0 auto; padding: 46px clamp(20px, 4vw, 62px) 110px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 35px; }
.eyebrow, .section-kicker { margin: 0 0 9px; color: var(--accent-dark); font: 500 .67rem/1.25 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.page-heading h1, .portal-intro h1 { margin: 0; font: 700 clamp(2rem, 4vw, 3.55rem)/.98 var(--display); letter-spacing: -.05em; }
.page-heading > div > p:last-child { margin: 12px 0 0; color: var(--muted); font-size: .92rem; }
.primary-action, .secondary-action { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 8px; padding: 0 17px; font-weight: 700; font-size: .78rem; cursor: pointer; transition: transform .2s var(--ease), background .2s, border-color .2s; }
.primary-action { background: var(--ink); color: white; border: 1px solid var(--ink); box-shadow: 0 6px 14px rgba(18,23,34,.12); }
.primary-action:hover { background: #2a303b; transform: translateY(-1px); }
.primary-action:active, .secondary-action:active { transform: translateY(1px); }
.primary-action > span { font-size: 1rem; font-weight: 400; }
.secondary-action { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.secondary-action:hover { background: var(--paper); border-color: #c5c0b8; }
.signal-grid { display: grid; grid-template-columns: 1.25fr repeat(3, 1fr); border: 1px solid var(--line); background: var(--line); gap: 1px; }
.signal-card { background: var(--paper); min-height: 162px; padding: 24px; position: relative; }
.signal-card-featured { background: var(--night); color: white; }
.signal-label { color: var(--muted); font: 500 .66rem/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.signal-card-featured .signal-label { color: #aeb7c4; }
.signal-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(241,133,63,.12); }
.signal-card strong { display: block; margin-top: 15px; font: 650 2.55rem/1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.signal-card p { position: absolute; left: 24px; right: 24px; bottom: 20px; margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.5; }
.signal-card-featured p { color: #aeb7c4; }
.overview-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(270px, .75fr); gap: 18px; margin-top: 18px; }
.work-panel, .day-panel, .client-table-wrap { background: var(--paper); border: 1px solid var(--line); }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 25px 26px 20px; }
.panel-heading h2, .thread-sidebar-head h2, .client-context h3, .portal-project-head h2, .portal-next-card h2, .client-dialog h2 { margin: 0; font: 700 1.25rem/1.1 var(--display); letter-spacing: -.025em; }
.text-action { border: 0; background: transparent; color: var(--muted); padding: 3px; font-size: .72rem; font-weight: 700; cursor: pointer; }
.text-action:hover { color: var(--accent-dark); }
.attention-list { border-top: 1px solid var(--line); }
.attention-row { width: 100%; min-height: 82px; border: 0; border-bottom: 1px solid var(--line); background: transparent; display: grid; grid-template-columns: 30px 40px minmax(140px, .85fr) minmax(170px, 1.2fr) auto 28px; align-items: center; gap: 14px; padding: 12px 20px; cursor: pointer; text-align: left; transition: background .2s; }
.attention-row:last-child { border-bottom: 0; }
.attention-row:hover { background: #f6f3ed; }
.attention-number { color: #a4a6a4; font: 400 .62rem/1 var(--mono); }
.client-mark { width: 38px; height: 38px; flex: 0 0 38px; display: inline-flex; align-items: center; justify-content: center; background: #eae5dc; color: var(--ink); border-radius: 10px; font: 500 .68rem/1 var(--mono); }
.attention-copy, .table-client > span:last-child, .thread-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.attention-copy strong, .table-client strong, .thread-copy strong { font-size: .78rem; }
.attention-copy small, .table-client small, .thread-copy small { color: var(--muted); font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attention-task { color: #40444c; font-size: .76rem; }
.unread-badge, .message-count { background: #fff0e6; color: var(--accent-dark); padding: 5px 8px; border-radius: 99px; font: 500 .61rem/1 var(--mono); white-space: nowrap; }
.row-arrow { color: #9a9b98; font-size: 1.1rem; transition: transform .2s var(--ease); }
.attention-row:hover .row-arrow { transform: translateX(3px); color: var(--ink); }
.status-chip { display: inline-flex; width: fit-content; align-items: center; text-transform: capitalize; border-radius: 99px; padding: 5px 9px; font: 500 .61rem/1 var(--mono); white-space: nowrap; }
.status-active { background: #e6f0eb; color: var(--green); }
.status-waiting { background: #f6ecdb; color: var(--amber); }
.status-complete { background: #e6ecf0; color: var(--blue); }
.status-untracked { background: #ecebea; color: #6b6864; }
.day-panel { padding-bottom: 18px; }
.day-list { margin: 0 26px; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.day-list li { min-height: 67px; display: grid; grid-template-columns: 48px 1fr; align-items: center; border-bottom: 1px solid var(--line); }
.day-list time { color: var(--muted); font: 500 .64rem/1 var(--mono); }
.day-list div { display: flex; flex-direction: column; gap: 3px; }
.day-list strong { font-size: .76rem; }
.day-list span { color: var(--muted); font-size: .68rem; }
.day-note { margin: 22px 26px 4px; padding: 16px; background: var(--night); color: white; display: flex; gap: 14px; align-items: flex-start; }
.day-note-mark { display: inline-flex; justify-content: center; align-items: center; width: 30px; height: 30px; flex: 0 0 30px; border: 1px solid #4b5564; color: var(--accent); font: 500 .58rem/1 var(--mono); }
.day-note p { margin: 0; color: #b9c0ca; font-size: .68rem; line-height: 1.55; }
.day-note strong { color: white; display: block; margin-bottom: 3px; }
.clients-toolbar { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 14px; }
.search-control { min-height: 42px; width: min(390px, 100%); display: flex; align-items: center; gap: 10px; padding: 0 13px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
.search-control svg, .icon-action svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.search-control svg { color: #8d8e8b; }
.search-control input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: .75rem; }
.filter-set { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--line); background: #e9e5dd; border-radius: 8px; }
.filter-button { border: 0; background: transparent; padding: 8px 12px; border-radius: 5px; color: var(--muted); font-size: .7rem; font-weight: 650; cursor: pointer; }
.filter-button.is-active { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(20,25,32,.08); }
.client-table-wrap { overflow: hidden; }
.client-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.client-table th { text-align: left; padding: 14px 18px; background: #eae6df; color: #777a77; font: 500 .6rem/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.client-table th:nth-child(1) { width: 22%; } .client-table th:nth-child(2) { width: 19%; } .client-table th:nth-child(3) { width: 11%; } .client-table th:nth-child(4) { width: 24%; } .client-table th:nth-child(5) { width: 15%; } .client-table th:last-child { width: 42px; }
.client-table td { padding: 16px 18px; border-bottom: 1px solid var(--line); color: #444850; font-size: .73rem; vertical-align: middle; }
.client-table tbody tr { cursor: pointer; transition: background .2s; }
.client-table tbody tr:hover { background: #f6f3ed; }
.client-table tbody tr:last-child td { border-bottom: 0; }
.table-client { display: flex; align-items: center; gap: 11px; min-width: 0; }
.table-open { border: 0; background: transparent; color: #8d8e8b; font-size: 1.1rem; cursor: pointer; }
.message-count { margin-left: 8px; padding: 3px 6px; }
.empty-state { text-align: center; padding: 65px 20px; }
.empty-state > span { display: inline-flex; width: 45px; height: 45px; align-items: center; justify-content: center; background: var(--night); color: var(--accent); font: 500 .65rem/1 var(--mono); }
.empty-state h2 { font: 700 1.2rem/1 var(--display); margin: 14px 0 7px; }
.empty-state p { margin: 0; color: var(--muted); font-size: .75rem; }
.payment-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, .65fr); gap: 18px; align-items: start; }
.payment-builder, .payment-side { background: var(--paper); border: 1px solid var(--line); }
.payment-panel-head { padding: 28px 30px 24px; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; border-bottom: 1px solid var(--line); }
.payment-panel-head h2, .payment-side h2 { margin: 0; font: 700 1.45rem/1.1 var(--display); letter-spacing: -.035em; }
.payment-panel-head > div:first-child > p:last-child { max-width: 610px; margin: 10px 0 0; color: var(--muted); font-size: .74rem; line-height: 1.6; }
.integration-statuses { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.integration-status { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font: 500 .58rem/1 var(--mono); white-space: nowrap; }
.integration-status i { width: 7px; height: 7px; border-radius: 50%; background: #b5b3ae; box-shadow: 0 0 0 4px rgba(181,179,174,.13); }
.integration-status.is-connected { color: var(--green); }
.integration-status.is-connected i { background: #4ca57f; box-shadow: 0 0 0 4px rgba(76,165,127,.12); }
.integration-status.is-missing { color: var(--amber); }
.integration-status.is-missing i { background: #c98a2f; box-shadow: 0 0 0 4px rgba(201,138,47,.12); }
.payment-form { padding: 27px 30px 30px; }
.payment-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px 18px; }
.payment-field-grid > label { color: var(--ink); font-size: .68rem; font-weight: 700; }
.payment-field-grid > label > span:not(.money-input) { float: right; color: var(--muted); font: 400 .57rem/1 var(--mono); }
.payment-field-grid input { width: 100%; min-height: 47px; margin-top: 8px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); padding: 0 13px; outline: 0; font-size: .75rem; }
.payment-field-grid input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(241,133,63,.1); }
.money-input { position: relative; display: block; }
.money-input b { position: absolute; z-index: 1; top: 24px; left: 13px; color: var(--muted); font: 500 .72rem/1 var(--mono); }
.money-input input { padding-left: 29px; }
.payment-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.payment-actions .payment-form-status { flex: 1 1 240px; margin: 0 0 0 6px; color: var(--muted); font-size: .62rem; line-height: 1.45; }
.payment-result { margin: 0 30px 30px; padding: 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--night); color: white; border-radius: 9px; }
.payment-result-copy { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.payment-result-copy > span { color: var(--accent); font: 500 .57rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.payment-result-copy strong { font: 650 .86rem/1.2 var(--display); }
.payment-result-copy a { max-width: 550px; color: #aeb7c4; overflow: hidden; font: 400 .6rem/1.4 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.payment-result-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.payment-result .secondary-action { color: white; border-color: #3a4452; }
.payment-result .secondary-action:hover { background: #222b38; border-color: #566274; }
.payment-result .primary-action { background: var(--accent); color: var(--ink); border-color: var(--accent); text-decoration: none; box-shadow: none; }
.payment-side > header { padding: 27px 24px 20px; border-bottom: 1px solid var(--line); }
.recent-payment-list { min-height: 240px; }
.recent-payment-item { padding: 16px 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 15px; border-bottom: 1px solid var(--line); }
.recent-payment-item > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.recent-payment-item strong { font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-payment-item span { color: var(--muted); font-size: .61rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-payment-item > b { font: 500 .64rem/1 var(--mono); }
.recent-payment-item time { color: #949793; font: 400 .54rem/1 var(--mono); }
.recent-payment-item button { justify-self: end; border: 0; padding: 0; background: transparent; color: var(--accent-dark); font-size: .61rem; font-weight: 700; cursor: pointer; }
.payment-empty { min-height: 240px; padding: 45px 28px; display: grid; place-items: center; align-content: center; gap: 12px; text-align: center; }
.payment-empty span { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background: #ece8e1; border-radius: 50%; }
.payment-empty p { margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.55; }
.payment-safety-note { margin: 18px; padding: 16px; display: flex; align-items: flex-start; gap: 12px; background: #eeeae3; }
.payment-safety-note > span { width: 30px; height: 30px; flex: 0 0 30px; display: inline-flex; align-items: center; justify-content: center; background: var(--night); color: var(--accent); font: 500 .56rem/1 var(--mono); }
.payment-safety-note p { margin: 0; color: var(--muted); font-size: .63rem; line-height: 1.5; }
.payment-safety-note strong { display: block; margin-bottom: 3px; color: var(--ink); }
.primary-action:disabled, .secondary-action:disabled { opacity: .5; cursor: wait; transform: none; }
.payment-success-page { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: var(--night); }
.payment-success-card { width: min(560px, 100%); padding: clamp(34px, 7vw, 64px); background: var(--paper); border: 1px solid #2d3642; text-align: center; box-shadow: 0 30px 90px rgba(0,0,0,.3); }
.payment-success-card > img { width: auto; height: 84px; border-radius: 12px; }
.payment-success-mark { width: 54px; height: 54px; margin: 34px auto 24px; display: grid; place-items: center; border-radius: 50%; background: #e6f0eb; color: var(--green); font-size: 1.3rem; }
.payment-success-card h1 { margin: 0; font: 700 clamp(2.5rem, 9vw, 4.5rem)/.95 var(--display); letter-spacing: -.06em; }
.payment-success-card > p:not(.section-kicker) { margin: 18px auto 28px; max-width: 410px; color: var(--muted); font-size: .8rem; line-height: 1.7; }
.payment-success-card .primary-action { text-decoration: none; }
.message-shell { height: min(720px, calc(100dvh - 230px)); min-height: 590px; display: grid; grid-template-columns: 300px minmax(400px, 1fr) 270px; background: var(--paper); border: 1px solid var(--line); overflow: hidden; }
.thread-sidebar { border-right: 1px solid var(--line); display: flex; min-height: 0; flex-direction: column; }
.thread-sidebar-head { padding: 22px 19px 16px; display: flex; align-items: flex-start; justify-content: space-between; }
.live-indicator { color: var(--muted); font: 500 .58rem/1 var(--mono); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.live-indicator > span { width: 6px; height: 6px; border-radius: 50%; background: #4ca57f; box-shadow: 0 0 0 4px rgba(76,165,127,.1); }
.search-control-compact { width: auto; margin: 0 14px 12px; min-height: 38px; background: #f2efe9; }
.thread-list { overflow-y: auto; border-top: 1px solid var(--line); }
.thread-item { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 14px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; text-align: left; cursor: pointer; }
.thread-item:hover { background: #f6f3ed; }
.thread-item.is-active { background: #eee9e1; box-shadow: inset 3px 0 var(--accent); }
.thread-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.thread-meta time { color: #939592; font: 400 .56rem/1 var(--mono); }
.thread-meta b { min-width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; border-radius: 99px; background: var(--accent); color: white; font: 500 .55rem/1 var(--mono); }
.conversation-panel { min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.conversation-head { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 20px; border-bottom: 1px solid var(--line); }
.client-identity { display: flex; align-items: center; gap: 11px; min-width: 0; }
.client-identity h2 { margin: 0 0 3px; font: 700 .9rem/1.1 var(--display); }
.client-identity p { margin: 0; color: var(--muted); font-size: .65rem; }
.conversation-tools { display: flex; align-items: center; gap: 7px; }
.icon-action { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: transparent; border-radius: 8px; color: var(--muted); cursor: pointer; }
.icon-action:not(:disabled):hover { background: #f0ede7; color: var(--ink); }
.icon-action:disabled { opacity: .42; cursor: not-allowed; }
.message-history, .portal-message-history { min-height: 0; overflow-y: auto; padding: 28px clamp(18px, 4vw, 40px); display: flex; flex-direction: column; gap: 15px; background: #f7f4ef; }
.message-bubble { width: min(82%, 560px); padding: 13px 15px; border-radius: 5px 14px 14px 14px; background: white; border: 1px solid #e6e2db; align-self: flex-start; }
.message-bubble.message-admin { align-self: flex-end; background: var(--night); color: white; border-color: var(--night); border-radius: 14px 5px 14px 14px; }
.message-bubble > div { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 7px; }
.message-bubble strong { font-size: .66rem; }
.message-bubble time { color: #989a98; font: 400 .55rem/1 var(--mono); }
.message-admin time { color: #9da6b1; }
.message-bubble p { margin: 0; font-size: .74rem; line-height: 1.55; white-space: pre-wrap; }
.conversation-empty { margin: auto; color: var(--muted); font-size: .75rem; }
.composer { border-top: 1px solid var(--line); padding: 16px 20px 15px; }
.composer > label, .portal-reply > label { display: block; margin-bottom: 7px; color: var(--muted); font-size: .64rem; font-weight: 700; }
.composer textarea, .portal-reply textarea { width: 100%; border: 0; background: transparent; resize: none; color: var(--ink); outline: 0; line-height: 1.5; font-size: .76rem; }
.composer-footer, .portal-reply > div { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-top: 8px; }
.composer-options { display: flex; align-items: center; gap: 9px; }
.composer-options span, .portal-reply > div > span { color: var(--muted); font-size: .61rem; }
.form-status { min-height: 14px; margin: 4px 0 0; color: var(--green); font-size: .61rem; }
.client-context { border-left: 1px solid var(--line); padding: 23px 20px; overflow-y: auto; }
.client-context h3 { font-size: 1.1rem; }
.client-context dl { margin: 25px 0 0; }
.client-context dl > div { padding: 11px 0; border-bottom: 1px solid var(--line); }
.client-context dt { margin-bottom: 4px; color: var(--muted); font: 400 .56rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.client-context dd { margin: 0; font-size: .7rem; overflow-wrap: anywhere; }
.context-progress { margin-top: 22px; }
.context-progress > span { display: flex; justify-content: space-between; font-size: .65rem; }
.context-progress em { font-style: normal; font-family: var(--mono); }
.context-progress > div, .progress-track { height: 4px; margin-top: 9px; background: #e2dfd8; overflow: hidden; }
.context-progress i, .progress-track span { display: block; height: 100%; background: var(--accent); }
.context-next { margin-top: 24px; padding: 16px; background: var(--night); color: white; }
.context-next > span { color: #aab2be; font: 400 .55rem/1 var(--mono); text-transform: uppercase; }
.context-next strong { display: block; margin-top: 8px; font: 650 .8rem/1.25 var(--display); }
.context-next p { margin: 8px 0 0; color: #aab2be; font-size: .64rem; line-height: 1.5; }
.demo-banner { position: fixed; z-index: 30; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 9px 13px; background: rgba(17,23,34,.95); color: white; border: 1px solid #37404d; border-radius: 8px; box-shadow: 0 12px 30px rgba(17,23,34,.2); backdrop-filter: blur(16px); white-space: nowrap; }
.demo-banner strong { color: var(--accent); font: 500 .59rem/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.demo-banner span { color: #bac1cb; font-size: .62rem; }
.client-dialog { width: min(720px, calc(100% - 30px)); border: 1px solid var(--line); border-radius: 12px; padding: 0; background: var(--paper); color: var(--ink); box-shadow: 0 30px 80px rgba(17,23,34,.25); }
.client-dialog::backdrop { background: rgba(17,23,34,.54); backdrop-filter: blur(4px); }
.client-dialog header, .client-dialog footer { padding: 22px 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.client-dialog header { border-bottom: 1px solid var(--line); }
.client-dialog footer { justify-content: flex-end; align-items: center; border-top: 1px solid var(--line); }
.dialog-close { border: 0; background: transparent; font-size: 1.45rem; cursor: pointer; color: var(--muted); }
.dialog-grid { padding: 24px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 17px; }
.dialog-grid label { color: var(--muted); font-size: .65rem; font-weight: 700; }
.dialog-grid input, .dialog-grid select { width: 100%; min-height: 43px; margin-top: 7px; border: 1px solid var(--line); border-radius: 7px; background: white; color: var(--ink); padding: 0 11px; font-size: .73rem; }
.command-menu { position: fixed; z-index: 40; top: 66px; right: 58px; width: 270px; padding: 7px; background: var(--night); border: 1px solid #323a46; box-shadow: 0 20px 60px rgba(17,23,34,.28); }
.command-menu button { width: 100%; display: flex; align-items: center; justify-content: space-between; border: 0; background: transparent; color: #e7e9ec; padding: 11px 10px; border-radius: 5px; cursor: pointer; font-size: .7rem; }
.command-menu button:hover { background: #222b38; }
.command-menu kbd { background: #222b38; border-color: #3b4553; color: #abb3be; box-shadow: none; }
.toast { position: fixed; z-index: 50; top: 92px; left: 50%; transform: translate(-50%, -16px); padding: 11px 16px; background: var(--ink); color: white; border-radius: 7px; opacity: 0; pointer-events: none; font-size: .68rem; transition: opacity .22s, transform .22s var(--ease); }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* Client portal */
.portal-page { background: var(--night); color: white; }
.portal-header { height: 82px; width: min(1120px, calc(100% - 40px)); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #2b3340; }
.portal-brand { color: white; font: 800 1.08rem/1 var(--display); letter-spacing: -.035em; text-decoration: none; }
.portal-brand-logo { display: block; width: auto; height: 58px; border-radius: 9px; }
.portal-secure { color: #aab2be; display: flex; align-items: center; gap: 8px; font: 400 .61rem/1 var(--mono); }
.portal-secure > span { width: 6px; height: 6px; border-radius: 50%; background: #50a981; box-shadow: 0 0 0 4px rgba(80,169,129,.1); }
.portal-main { width: min(1040px, calc(100% - 40px)); margin: 0 auto; padding: 68px 0 105px; }
.portal-intro { max-width: 720px; }
.portal-intro .eyebrow { color: var(--accent); }
.portal-intro h1 { font-size: clamp(2.8rem, 7vw, 5.3rem); }
.portal-intro > p:last-child { width: min(590px, 100%); margin: 25px 0 0; color: #aeb6c1; font-size: .88rem; line-height: 1.75; }
.portal-status { margin-top: 58px; padding: 30px 32px; background: #f7f4ef; color: var(--ink); }
.portal-project-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.portal-project-head h2 { font-size: 1.6rem; }
.portal-status .progress-track { margin-top: 28px; height: 5px; }
.progress-labels { margin-top: 10px; display: flex; justify-content: space-between; gap: 20px; color: var(--muted); font: 400 .6rem/1 var(--mono); }
.progress-labels strong { color: var(--ink); font-weight: 500; }
.milestone-list { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.milestone-list li { position: relative; padding: 24px 15px 0 0; display: flex; flex-direction: column; gap: 5px; }
.milestone-list li > span { position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: #d0cec8; border: 2px solid #f7f4ef; }
.milestone-list .milestone-complete > span { background: var(--green); }
.milestone-list .milestone-current > span { background: var(--accent); box-shadow: 0 0 0 4px rgba(241,133,63,.14); }
.milestone-list strong { font-size: .68rem; }
.milestone-list small { color: var(--muted); font: 400 .56rem/1 var(--mono); text-transform: capitalize; }
.portal-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(270px, .75fr); gap: 18px; margin-top: 18px; }
.portal-message-card { min-height: 560px; color: var(--ink); background: var(--paper); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.portal-message-history { max-height: 360px; padding: 24px; }
.portal-reply { padding: 17px 20px 12px; border-top: 1px solid var(--line); }
.portal-next-card { padding: 28px 25px; color: var(--ink); background: var(--accent); align-self: start; }
.portal-next-card .section-kicker { color: #7d3b17; }
.portal-next-card h2 { font-size: 1.55rem; }
.portal-next-card > p:not(.section-kicker) { margin: 14px 0 0; color: #6d3619; font-size: .74rem; line-height: 1.65; }
.portal-review-action { width: 100%; margin-top: 24px; }
.portal-contact { margin-top: 25px; padding-top: 22px; border-top: 1px solid rgba(74,34,13,.2); display: flex; gap: 11px; align-items: center; }
.portal-contact .client-mark { background: var(--night); color: white; }
.portal-contact > div { display: flex; flex-direction: column; gap: 4px; }
.portal-contact strong { font-size: .65rem; }
.portal-contact span { color: #713b20; font-size: .58rem; line-height: 1.45; }
.portal-footer { margin-top: 45px; padding-top: 20px; border-top: 1px solid #2b3340; color: #8f98a4; display: flex; justify-content: space-between; gap: 20px; font: 400 .6rem/1 var(--mono); }
.portal-footer a { color: #c7ccd3; text-decoration: none; }
.portal-page .demo-banner { background: rgba(247,244,239,.96); color: var(--ink); border-color: #dad5cd; }
.portal-page .demo-banner span { color: var(--muted); }

@media (max-width: 1120px) {
  .studio-header { grid-template-columns: auto 1fr auto; }
  .studio-nav { justify-content: center; }
  .command-button span { display: none; }
  .message-shell { grid-template-columns: 260px minmax(400px, 1fr); }
  .client-context { display: none; }
  .payment-layout { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 820px) {
  .studio-header { height: 66px; padding: 8px 12px; display: flex; }
  .studio-brand, .studio-actions { display: none; }
  .studio-nav { width: 100%; justify-content: space-around; padding: 4px; background: rgba(17,23,34,.97); border: 1px solid #303946; border-radius: 10px; box-shadow: 0 8px 22px rgba(17,23,34,.13); }
  .nav-item { color: #aeb6c1; flex: 1; }
  .nav-item:hover, .nav-item.is-active { color: white; background: #242d39; }
  .nav-item span { background: #36404d; color: white; }
  .studio-main { padding: 34px 18px 105px; }
  .page-heading { align-items: flex-start; }
  .signal-grid { grid-template-columns: repeat(2, 1fr); }
  .overview-grid { grid-template-columns: 1fr; }
  .attention-row { grid-template-columns: 24px 38px minmax(0,1fr) auto 22px; }
  .attention-task { display: none; }
  .clients-toolbar { align-items: stretch; flex-direction: column; }
  .search-control { width: 100%; }
  .client-table { min-width: 760px; }
  .client-table-wrap { overflow-x: auto; }
  .message-shell { height: auto; min-height: 0; grid-template-columns: 1fr; overflow: visible; }
  .thread-sidebar { border: 0; border-bottom: 1px solid var(--line); max-height: 330px; }
  .conversation-panel { min-height: 610px; }
  .portal-grid { grid-template-columns: 1fr; }
  .payment-layout { grid-template-columns: 1fr; }
  .payment-side { max-width: none; }
  .portal-next-card { grid-row: 1; }
  .demo-banner { max-width: calc(100% - 24px); white-space: normal; }
  .dialog-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .page-heading { display: block; }
  .page-heading .primary-action { margin-top: 22px; }
  .signal-card { min-height: 150px; }
  .signal-card-featured { grid-column: 1 / -1; }
  .signal-card:last-child { grid-column: 1 / -1; }
  .attention-row { padding: 11px 12px; gap: 9px; grid-template-columns: 38px minmax(0,1fr) auto 20px; }
  .attention-number { display: none; }
  .status-chip { padding: 5px 7px; }
  .conversation-head { align-items: flex-start; }
  .conversation-tools .secondary-action { font-size: 0; width: 38px; padding: 0; }
  .conversation-tools .secondary-action::after { content: '↗'; font-size: 1rem; }
  .message-bubble { width: 92%; }
  .payment-panel-head { padding: 23px 20px 19px; display: block; }
  .integration-statuses { margin-top: 18px; align-items: flex-start; }
  .payment-form { padding: 22px 20px; }
  .payment-field-grid { grid-template-columns: 1fr; }
  .payment-actions { align-items: stretch; }
  .payment-actions .primary-action, .payment-actions .secondary-action { width: 100%; }
  .payment-actions .payment-form-status { margin: 7px 0 0; }
  .payment-result { margin: 0 20px 20px; align-items: stretch; flex-direction: column; }
  .payment-result-actions { width: 100%; }
  .payment-result-actions > * { flex: 1; }
  .composer-footer { align-items: flex-end; }
  .composer-options > span { display: none; }
  .portal-header, .portal-main { width: min(100% - 28px, 1040px); }
  .portal-header { height: 70px; }
  .portal-brand { font-size: 1rem; }
  .portal-secure { font-size: .53rem; }
  .portal-main { padding-top: 45px; }
  .portal-status { margin-top: 42px; padding: 24px 20px; }
  .portal-project-head { display: block; }
  .portal-project-head .status-chip { margin-top: 12px; }
  .milestone-list { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
  .portal-message-history { max-height: 400px; }
  .portal-footer { flex-direction: column; }
  .demo-banner { bottom: 12px; }
  .portal-page .demo-banner { bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}