/* AMB Digital · clarity, visual identity and a deliberate collection workflow. */
:root {
  --navy: #0b203e;
  --ink: #152b47;
  --muted: #53657c;
  --cyan: #087e78;
  --cyan-soft: #e6f5f2;
  --line: #dce4ee;
  --soft: #f1f4f8;
  --red: #b73143;
  --red-soft: #fff0f1;
  --amber: #88520a;
  --amber-soft: #fff5de;
  --green: #09694c;
  --green-soft: #e6f7ee;
  --violet: #7041c3;
  --focus: #087e78;
  --card-shadow: 0 3px 14px #0b203e06, 0 1px 2px #0b203e03;
}
body { background: var(--soft); color: var(--ink); }
html { overflow-x: clip; }
[hidden] { display: none !important; }
button, a { touch-action: manipulation; }
button, input, select, textarea { transition: background-color .15s, border-color .15s, box-shadow .15s; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 3px;
}
button:disabled { opacity: .56; }
::selection { color: var(--navy); background: #bbebe0; }
h1 { color: var(--navy); font-size: clamp(1.55rem, 2.05vw, 2rem); letter-spacing: -.035em; }
h2, h3 { color: var(--navy); }
.sidebar { width: 228px; padding: 29px 16px 22px; border-color: #d6dfeb; }
.brand { padding: 0 5px 31px; }
.brand img { width: 184px; max-width: 100%; }
.brand span { font-weight: 650; letter-spacing: .14em; font-size: .68rem; margin-top: 18px; color: #51657d; }
.nav-label { color: #65768b; font-size: .65rem; padding-left: 14px; }
nav { gap: 7px; }
nav a { min-height: 46px; border-radius: 10px; color: #53637b; font-weight: 600; font-size: .84rem; position: relative; }
nav a:hover { background: #edf3f7; color: var(--navy); }
nav a.active { background: var(--navy); color: white; box-shadow: 0 4px 9px #0b203e14; }
nav a.active::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: #43d4b4; }
nav a.active .nav-count { background: #244b62; color: white; }
.profile { padding-top: 18px; border-top: 1px solid var(--line); }
.avatar { background: #e6f5f2; color: #096d62; border: 1px solid #bbddd4; border-radius: 12px; }
.workspace { margin-left: 228px; width: calc(100% - 228px); }
.topbar { height: 76px; background: #ffffff; border-color: #dce4ee; }
.top-left { color: #4d6078; font-weight: 550; }
.top-right { color: #4d6078; }
main { padding: 34px 32px 44px; max-width: 1720px; }
.page-heading { margin-bottom: 26px; gap: 20px; }
.eyebrow { color: #097e73; font-size: .65rem; font-weight: 800; letter-spacing: .14em; margin-bottom: 8px; }
.subtitle { color: var(--muted); line-height: 1.65; max-width: 76ch; }
.btn { min-height: 42px; border-radius: 8px; font-weight: 650; border-color: #cbd7e4; padding: 10px 14px; box-shadow: 0 1px 1px #0b203e03; }
.btn:hover { color: var(--navy); border-color: #93a9bd; background: #f4f8fb; }
.btn.primary { background: var(--navy); border-color: var(--navy); box-shadow: 0 3px 8px #0b203e12; }
.btn.primary:hover { color: white; background: #193f63; border-color: #193f63; }
.btn.cyan { background: #087e78; border-color: #087e78; color: white; }
.btn.cyan:hover { background: #076b65; border-color: #076b65; color: white; }
.btn.danger { border-color: #ecc1c7; color: var(--red); background: #fff9f9; }
.btn.danger:hover { border-color: #c6606e; background: #fff0f1; }
.btn.text { box-shadow: none; color: #08756f; }
.btn.text:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn.small { min-height: 36px; }
.icon-btn { min-width: 36px; border-color: #d4dfeb; border-radius: 8px; color: #4e657d; background: white; }
.icon-btn:hover { border-color: #9bb4c9; background: #edf4f8; color: var(--navy); }
.icon-btn svg { width: 18px; height: 18px; }
.month-control { border-color: #cfdae7; box-shadow: 0 1px 2px #0b203e03; border-radius: 9px; }
.month-control strong { font-size: .83rem; }
.metrics { gap: 16px; margin-bottom: 26px; }
.metric { border-radius: 12px; border-color: #dbe4ef; padding: 21px; box-shadow: var(--card-shadow); border-top: 3px solid #4b6c9a; }
.metric:nth-child(1) { border-top-color: #406ab5; }
.metric:nth-child(2) { border-top-color: #df9a20; }
.metric:nth-child(3) { border-top-color: #139b76; }
.metric:nth-child(4) { border-top-color: #d75565; }
.metric-label { color: #52657d; font-weight: 600; font-size: .77rem; align-items: flex-start; }
.metric-label svg { color: #446d9b; background: #edf3fa; width: 28px; height: 28px; padding: 5px; border-radius: 8px; margin-top: -3px; }
.metric:nth-child(2) .metric-label svg { color: #a5690a; background: #fff4da; }
.metric:nth-child(3) .metric-label svg { color: #138060; background: #e6f6ef; }
.metric:nth-child(4) .metric-label svg { color: #b73c4d; background: #fff0f2; }
.metric-value { margin-top: 14px; color: var(--navy); font-size: clamp(1.5rem, 1.9vw, 2rem); font-weight: 750; font-variant-numeric: tabular-nums; }
.metric-foot { color: #5a6a80; line-height: 1.5; }
.metric.progress-metric::after { height: 4px; background: #159d77; }
.panel { border-color: #d8e2ed; border-radius: 12px; box-shadow: var(--card-shadow); }
.panel-head { padding: 20px 22px; border-color: #e1e8f0; }
.panel-head h2 { font-size: 1.02rem; font-weight: 750; }
.panel-head small { color: #5a6e84; font-size: .76rem; margin-top: 5px; }
.toolbar { padding: 16px 20px; gap: 14px; border-bottom: 1px solid #edf1f6; }
.filter-tabs { gap: 4px; background: #f1f4f8; border: 1px solid #e1e7ef; border-radius: 8px; padding: 3px; }
.filter-tabs button { border: 1px solid transparent; padding: 7px 10px; font-size: .75rem; font-weight: 600; color: #53647b; border-radius: 5px; min-height: 32px; }
.filter-tabs button:hover { background: #e4eaf1; color: var(--navy); }
.filter-tabs button.active { background: white; color: var(--navy); border-color: #d2dde8; box-shadow: 0 1px 3px #0b203e0c; }
.search input { width: 248px; min-height: 40px; background: white; border-color: #cdd9e5; border-radius: 8px; padding-top: 9px; padding-bottom: 9px; }
.search input::placeholder { color: #677990; opacity: 1; }
.search svg { top: 11px; color: #526b85; }
.table-wrap { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-color: #a2b4c7 #edf2f6; }
.table-wrap > table { min-width: 1020px; }
th { padding: 12px 16px; font-size: .65rem; letter-spacing: .08em; color: #54677f; background: #f4f7fa; border-bottom-color: #dce5ef; font-weight: 750; }
td { padding: 18px 16px; border-bottom-color: #e6edf4; font-size: .82rem; }
tbody tr { transition: background-color .15s; }
tbody tr:hover { background: #f4f8fc; }
.row-client { gap: 11px; min-width: 210px; }
.client-meta { min-width: 0; display: grid; justify-items: start; gap: 4px; }
.client-name { font-size: .84rem; font-weight: 750; color: #162f4b; line-height: 1.4; max-width: 245px; white-space: normal; overflow-wrap: anywhere; }
.client-domain { color: #5b6e85; font-size: .73rem; margin: 0; line-height: 1.4; max-width: 245px; white-space: normal; overflow-wrap: anywhere; }
.client-avatar { --client-color: #0e8c80; width: 43px; height: 43px; flex: 0 0 43px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; overflow: hidden; color: var(--client-color); background: #edf6f4; background: color-mix(in srgb, var(--client-color) 10%, white); border: 1px solid #d8e5e2; border-color: color-mix(in srgb, var(--client-color) 24%, white); position: relative; font-weight: 750; font-size: .79rem; }
.client-avatar::after { content: ''; position: absolute; width: 7px; height: 7px; bottom: 3px; right: 3px; border-radius: 50%; background: var(--client-color); border: 1.5px solid white; }
.client-avatar img { width: 100%; height: 100%; display: block; object-fit: contain; padding: 4px; background: white; }
.client-avatar svg { width: 22px; height: 22px; }
.client-avatar { color: #24465d; color: color-mix(in srgb, var(--client-color) 35%, #152b47); }
.plan-chip { --plan-color: #0b8b85; display: inline-flex; gap: 5px; align-items: center; max-width: 100%; padding: 2px 7px; border: 1px solid #d1e3df; border-color: color-mix(in srgb, var(--plan-color) 27%, white); background: #eff7f4; background: color-mix(in srgb, var(--plan-color) 8%, white); color: #33465f; font-weight: 650; font-size: .64rem; line-height: 1.55; border-radius: 5px; white-space: normal; }
.plan-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--plan-color); flex: 0 0 6px; }
.date-meta { color: #617188; font-size: .7rem; margin-top: 5px; }
.date-meta.red { color: #b73143; font-weight: 550; }
.date-meta.amber { color: #935d0c; font-weight: 550; }
.money { font-weight: 750; letter-spacing: -.015em; color: #1d3450; font-size: .88rem; }
.badge { border-radius: 6px; padding: 4px 8px; border: 1px solid #d8e3ee; font-size: .68rem; line-height: 1.5; font-weight: 700; letter-spacing: .005em; gap: 5px; }
.badge.pending { background: var(--amber-soft); color: #88520a; border-color: #edcf8b; }
.badge.urgent { background: #fff0df; color: #9a430e; border-color: #f1c49b; }
.badge.overdue { background: var(--red-soft); color: #b22f42; border-color: #efbcc5; }
.badge.paid { background: var(--green-soft); color: #09694c; border-color: #a9d9c3; }
.badge.actionable-status { cursor: pointer; font-family: inherit; min-height: 32px; box-shadow: 0 1px 2px #0b203e06; gap: 5px; }
.badge.actionable-status::after { content: '+'; font-size: .8rem; line-height: 1; font-weight: 800; border-left: 1px solid currentColor; padding-left: 6px; opacity: .85; }
.badge.actionable-status:hover { box-shadow: 0 0 0 2px #0b203e12; }
.badge.actionable-status.paid::after { content: none; }
.row-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; }
.row-actions .icon-btn { width: 34px; min-width: 34px; height: 34px; }
.row-actions .icon-btn[data-action='payment'] { color: #087054; border-color: #b3dccc; background: #f0faf5; }
.row-actions .icon-btn[data-action='payment']:hover { background: #dcf3e7; border-color: #66ae91; }
.row-actions .icon-btn[data-action='edit-client']:hover { color: #0e5b9a; border-color: #9cb9d5; background: #eaf2fa; }
.row-actions .icon-btn[data-action='detail'] { color: #334f72; }
.notification-indicator { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; min-height: 45px; background: transparent; color: #576b82; text-align: left; font-family: inherit; max-width: 180px; text-decoration: none; }
button.notification-indicator:hover { background: #edf3f7; border-color: #c5d3e1; }
.notification-indicator > svg { width: 17px; height: 17px; flex-shrink: 0; }
.notification-indicator > span, .notification-indicator > div { display: grid; gap: 2px; }
.notification-indicator > .notification-count { display: flex; align-items: center; gap: 6px; color: #2c4865; font-size: .73rem; font-weight: 750; line-height: 1.35; }
.notification-count .icon { width: 14px; height: 14px; flex-shrink: 0; }
.notification-caption { display: block; color: #5a6f85; font-size: .65rem; font-weight: 450; line-height: 1.4; white-space: normal; padding-left: 20px; }
.notification-indicator.sent { color: #087765; background: #eef9f4; border-color: #cdeade; }
.notification-indicator.sent .notification-count { color: #096a56; }
.notification-indicator.none { background: #fff8e8; border-color: #f0deb0; color: #986315; }
.notification-indicator.none .notification-count { color: #82530e; }
.notification-indicator.pending { color: #36569d; background: #edf3ff; border-color: #c9d8f7; }
.notification-indicator.pending .notification-count { color: #36569d; }
.notification-indicator.error { color: #b53648; background: #fff0f1; border-color: #efc1ca; }
.notification-indicator.error .notification-count { color: #b53648; }
.notification-indicator.uncertain { color: #805322; background: #fff6e9; border-color: #ecd1a9; }
.client-insight-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 22px; }
.insight-card { display: flex; align-items: center; gap: 13px; padding: 17px 18px; background: white; border: 1px solid #d9e3ed; border-radius: 11px; min-height: 84px; box-shadow: var(--card-shadow); text-align: left; }
button.insight-card { cursor: pointer; }
button.insight-card:hover { border-color: #9eb7cc; background: #fbfdff; }
.insight-card.active, .insight-card[aria-pressed='true'] { border-color: #087e78; box-shadow: 0 0 0 1px #087e78; }
.insight-number { color: #163959; font-size: 1.65rem; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1.15; letter-spacing: -.045em; }
.insight-label { display: block; min-width: 0; color: #53667e; font-size: .76rem; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.insight-label small { display: block; font-size: .66rem; font-weight: 450; margin-top: 2px; }
.insight-card:nth-child(2) .insight-number { color: #98620c; }
.insight-card:nth-child(3) .insight-number { color: #08775c; }
.insight-card:nth-child(4) .insight-number { color: #bc3f50; }
.table-footer { border-color: #e0e8f0; background: #fbfcfe; font-size: .71rem; line-height: 1.6; }
.task-intro { background: #102c4b; padding: 20px; border-top: 3px solid #eaa74b; }
.task-intro h2 { color: white; font-size: .98rem; }
.task-intro h2 svg { color: #f7bb65; }
.task-intro p { color: #c0d1e4; font-size: .76rem; }
.task-item { padding: 20px; border-color: #e3ebf2; }
.task-item .task-title { color: #1b3551; font-size: .83rem; margin-top: 10px; }
.task-item .btn.text { font-size: .76rem; }
.activity-row { gap: 13px; padding: 17px 22px; border-color: #e2eaf2; }
.activity-icon { width: 35px; height: 35px; flex-shrink: 0; border-radius: 10px; background: #e5f4ef; color: #0a7b67; }
.activity-row p { font-size: .8rem; font-weight: 550; }
.activity-row small, .activity-row time { font-size: .7rem; color: #5c6f85; }
.help-note { background: #f4f7fb; color: #536780; font-size: .73rem; overflow-wrap: anywhere; }
.note-banner { border-color: #bedfd6; background: #edf8f4; color: #27695a; border-radius: 10px; font-size: .8rem; }
.note-banner.amber { background: #fff8e9; color: #805114; border-color: #ecd6a2; }
.field { gap: 8px; font-size: .78rem; font-weight: 650; color: #2d4561; }
.field input, .field select, .field textarea { min-height: 43px; border-color: #cbd7e4; border-radius: 8px; font-size: .86rem; color: #1d3550; background: white; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #91a8bd; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #087e78; }
.field small { color: #5c6e85; font-size: .72rem; font-weight: 400; line-height: 1.65; }
.form-actions { border-top-color: #dde6ef; gap: 10px; margin-top: 24px; padding-top: 22px; }
dialog { border: 1px solid #ccd9e7; border-radius: 16px; width: min(860px, calc(100% - 40px)); max-height: calc(100dvh - 48px); box-shadow: 0 24px 100px #0b203e3b; }
dialog::backdrop { background: #071b36a3; backdrop-filter: blur(3px); }
.modal-heading { padding: 24px 28px; background: #fbfcfe; align-items: flex-start; position: sticky; top: 0; z-index: 3; border-color: #dce5ef; }
.modal-heading > div { min-width: 0; }
.modal-heading h2 { color: #112b49; font-size: 1.3rem; overflow-wrap: anywhere; }
.modal-heading p { color: #5b6e85; font-size: .77rem; }
.modal-heading .icon-btn { flex: 0 0 36px; }
.modal-content { padding: 27px 28px; }
.client-detail-identity { display: flex; align-items: center; gap: 15px; padding: 0 0 23px; margin-bottom: 22px; border-bottom: 1px solid #dce6ef; }
.client-detail-identity .client-avatar { width: 61px; height: 61px; flex-basis: 61px; border-radius: 17px; font-size: 1rem; }
.client-detail-identity .client-avatar svg { width: 29px; height: 29px; }
.client-detail-identity h3 { margin-bottom: 3px; font-size: 1.12rem; }
.client-detail-identity p { font-size: .78rem; color: #5b6e85; overflow-wrap: anywhere; }
.client-detail-identity > div:nth-child(2) { display: grid; justify-items: start; gap: 5px; min-width: 0; flex: 1; overflow-wrap: anywhere; }
.client-detail-identity > div:nth-child(2) > span:not(.plan-chip) { font-size: .78rem; color: #53657c; }
.client-detail-identity > div:last-child { margin-left: auto; }
.detail-grid { gap: 16px; }
.detail-box { background: #f5f8fc; border-color: #d9e4ef; border-radius: 10px; padding: 19px; }
.detail-box h3 { color: #5d6f85; font-size: .65rem; font-weight: 750; letter-spacing: .11em; }
.detail-box p { line-height: 1.8; font-size: .81rem; overflow-wrap: anywhere; }
.detail-actions { gap: 8px; margin: 22px 0; }
.detail-actions .btn { font-size: .76rem; min-height: 39px; padding: 8px 11px; }
.timeline-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 24px; margin: 24px 0 17px; border-top: 1px solid #dce6ef; }
.timeline-heading h3 { font-size: 1.02rem; color: #142f4c; }
.timeline-order { font-size: .68rem; color: #5c6f85; font-weight: 500; }
.service-timeline { position: relative; display: grid; gap: 13px; padding: 0 0 4px; list-style: none; margin: 0; }
.service-timeline::before { content: ''; position: absolute; top: 19px; bottom: 22px; left: 17px; width: 2px; background: #cfdae7; }
.timeline-event { --event-color: #617998; display: grid; grid-template-columns: 36px 92px minmax(0, 1fr); gap: 13px; position: relative; align-items: start; }
.event-marker { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: #eef3f9; background: color-mix(in srgb, var(--event-color) 9%, white); color: var(--event-color); border: 1px solid #c6d4e3; border-color: color-mix(in srgb, var(--event-color) 28%, white); box-shadow: 0 0 0 4px white; border-radius: 50%; position: relative; z-index: 1; margin-top: 3px; }
.event-marker svg { width: 17px; height: 17px; }
.event-date { padding-top: 6px; min-width: 0; }
.event-day { display: block; font-size: .75rem; color: #2d4662; font-weight: 750; line-height: 1.45; white-space: normal; }
.event-time { display: block; color: #62748a; font-size: .68rem; margin-top: 4px; font-variant-numeric: tabular-nums; }
.event-content { border: 1px solid #dbe5ef; border-left: 3px solid var(--event-color); border-radius: 0 9px 9px 0; padding: 14px 16px; background: #fbfcfe; min-width: 0; box-shadow: 0 1px 2px #0b203e03; }
.event-title { font-size: .81rem; font-weight: 750; color: #243c58; line-height: 1.6; overflow-wrap: anywhere; }
.event-meta { display: flex; flex-wrap: wrap; gap: 3px 12px; color: #5b6e84; font-size: .71rem; line-height: 1.75; margin-top: 5px; overflow-wrap: anywhere; }
.event-extra { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 9px; font-size: .7rem; color: #536980; }
.event-extra .btn { font-size: .7rem; min-height: 30px; padding: 4px 7px; }
.event-status { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #cfdae7; background: white; color: #506880; font-size: .64rem; font-weight: 650; padding: 2px 6px; border-radius: 4px; line-height: 1.5; }
.event-status.sent, .event-status.paid { color: #096c50; background: #edf9f3; border-color: #c2e4d4; }
.event-status.failed, .event-status.error { color: #ac3547; background: #fff1f3; border-color: #efc6cf; }
.event-status.queued, .event-status.sending { color: #365c9b; background: #eef4ff; border-color: #ccdaf2; }
.event-status.uncertain { color: #865717; background: #fff7e9; border-color: #ecd7af; }
.event-payment { --event-color: #119069; }
.event-notification { --event-color: #2678ba; }
.event-renewal { --event-color: #7250bd; }
.event-suspension { --event-color: #c04a5c; }
.event-action { --event-color: #617998; }
.plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.plan-card { --plan-color: #0b8b85; border: 1px solid #d5e0ec; border-top: 5px solid var(--plan-color); border-radius: 12px; padding: 25px; position: relative; box-shadow: var(--card-shadow); overflow: hidden; }
.plan-card::before { content: ''; position: absolute; width: 62px; height: 62px; right: -16px; top: -16px; border-radius: 50%; background: #edf7f4; background: color-mix(in srgb, var(--plan-color) 9%, white); pointer-events: none; }
.plan-card h2 { font-size: 1.15rem; margin: 13px 0 20px; }
.plan-card .eyebrow { font-size: .59rem; color: #5a6e84; margin-bottom: 0; }
.plan-card .plan-price { color: #142e4a; font-size: 1.8rem; line-height: 1.4; }
.plan-card .plan-meta { border-color: #dfe7f0; flex-wrap: wrap; gap: 12px; }
.plan-color-tag { display: inline-flex; align-items: center; gap: 6px; color: #4f627b; background: #f1f5f9; background: color-mix(in srgb, var(--plan-color) 8%, white); border: 1px solid #d8e3ed; border-color: color-mix(in srgb, var(--plan-color) 23%, white); border-radius: 5px; padding: 3px 7px; font-size: .65rem; font-weight: 650; }
.plan-tier-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--plan-color); flex-shrink: 0; }
.plan-service-count { display: flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 550; color: #5c6e84; }
.visual-identity-picker { padding: 20px; background: #f5f8fc; border: 1px solid #d8e3ef; border-radius: 11px; display: grid; gap: 18px; margin: 0 0 23px; }
.visual-identity-picker h3 { font-size: .9rem; margin-bottom: 5px; }
.visual-identity-picker p { color: #5b6f85; font-size: .75rem; }
.visual-preview { display: flex; align-items: center; gap: 13px; padding: 15px; background: white; border: 1px solid #dce6ef; border-radius: 9px; min-width: 0; }
.visual-preview .client-avatar { width: 53px; height: 53px; flex-basis: 53px; border-radius: 15px; }
.visual-preview strong { font-size: .83rem; color: #233d59; }
.visual-preview p { margin-top: 3px; font-size: .72rem; }
.color-palette { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 4px; }
.color-palette button, button.color-swatch { width: 36px; height: 36px; min-width: 36px; padding: 0; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 0 1px #c4d3e1; display: inline-flex; align-items: center; justify-content: center; position: relative; }
.color-palette button:hover { box-shadow: 0 0 0 2px #849bb4; }
.color-swatch { background: var(--swatch-color, #0EA5E9); }
.color-palette input[type='color'] { width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 3px; border-radius: 8px; cursor: pointer; }
.plan-chip::before { content: none; }
.color-swatch.is-selected, .color-palette button[aria-pressed='true'] { box-shadow: 0 0 0 2px #0b203e; }
.color-swatch.is-selected::after, .color-palette button[aria-pressed='true']::after { content: '✓'; font-weight: 800; font-size: 16px; color: white; text-shadow: 0 1px 3px #0009; }
.color-swatch svg { width: 16px; height: 16px; color: white; filter: drop-shadow(0 1px 2px #0008); }
.color-swatch.is-selected:has(svg)::after { content: none; }
.icon-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.icon-picker button, button.icon-choice { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border-radius: 8px; border: 1px solid #cbd9e7; background: white; color: #546d85; }
.icon-picker button:hover { background: #edf4fa; border-color: #94adc6; }
.icon-choice.is-selected, .icon-picker button[aria-pressed='true'] { background: #e5f4ef; border-color: #087e78; color: #086e60; box-shadow: 0 0 0 1px #087e78; }
.icon-choice svg { width: 21px; height: 21px; }
.logo-upload { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding-top: 16px; border-top: 1px solid #dae4ee; }
.logo-upload input[type='file'] { width: 100%; font-size: .74rem; color: #576c84; }
.logo-upload input[type='file']::file-selector-button { font: inherit; border: 1px solid #c1d2e3; border-radius: 7px; padding: 8px 11px; background: white; color: #1d4966; font-weight: 600; cursor: pointer; margin-right: 12px; }
.logo-preview { width: 60px; height: 60px; object-fit: contain; border: 1px solid #d7e2ed; border-radius: 10px; background: white; padding: 5px; }
.logo-hint { color: #566c83; font-size: .72rem; line-height: 1.65; }
.payment-total { background: #123753; border: 1px solid #123753; border-radius: 12px; padding: 23px; border-left: 5px solid #20b18b; }
.payment-total strong { font-size: 1.9rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.payment-total span { color: #cee3ed; font-size: .77rem; }
.payment-total svg { color: #70e4bf; width: 29px; height: 29px; }
.notification-context { background: #eff8f5; border: 1px solid #bbded3; border-left: 4px solid #0c907a; border-radius: 8px; padding: 14px 16px; margin-bottom: 20px; display: flex; align-items: flex-start; gap: 11px; font-size: .77rem; color: #315d55; line-height: 1.7; }
.notification-context strong { color: #1e5144; }
.notification-context svg { width: 18px; height: 18px; color: #0c806d; flex-shrink: 0; margin-top: 3px; }
.duplicate-notice { border: 1px solid #e8cd91; background: #fff8e8; border-left: 4px solid #d49a25; border-radius: 8px; padding: 14px 16px; margin-bottom: 20px; color: #82571b; font-size: .76rem; line-height: 1.75; display: flex; align-items: flex-start; gap: 10px; }
.duplicate-notice strong { color: #765018; }
.duplicate-notice svg { flex-shrink: 0; margin-top: 3px; width: 18px; height: 18px; }
.notification-controls { gap: 17px; margin-bottom: 20px; }
.notification-recipient { background: #f4f7fb; border-color: #d4e0eb; color: #304e6a; border-radius: 8px; font-size: .78rem; }
.notification-check { font-size: .78rem; color: #52677f; }
.notification-check input { accent-color: #087e78; }
.template-menu button { border-radius: 8px; color: #36506b; font-size: .8rem; }
.template-menu button.active { background: #e9f5f0; color: #096f61; box-shadow: inset 3px 0 #0e8c78; }
.email-meta { border-color: #d5e0eb; font-size: .77rem; }
.email-canvas { background: #e8eef4; border-color: #d5e0eb; }
.manual-preview { max-height: 455px; scrollbar-color: #9bafc4 #e8eef4; }
.app-footer { color: #5c6e84; font-size: .7rem; border-color: #d8e2ed; background: #f9fbfd; }
#toast { background: #123753; border: 1px solid #315470; border-left: 4px solid #28bc98; border-radius: 10px; padding: 15px 20px; box-shadow: 0 8px 30px #0b203e2b; left: calc(50% + 114px); line-height: 1.6; }

@media (max-width: 1550px) {
  .content-grid { grid-template-columns: minmax(0, 1fr); }
  .aside-stack { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .table-wrap > table { min-width: 970px; }
  th, td { padding-left: 14px; padding-right: 14px; }
  .client-name, .client-domain { max-width: 210px; }
  .metric { padding: 18px; }
}
@media (max-width: 1200px) {
  main { padding: 28px 24px 36px; }
  .topbar { padding: 0 24px; }
  .metrics { gap: 11px; }
  .metric { padding: 16px; }
  .metric-label { font-size: .72rem; }
  .metric-value { font-size: 1.6rem; }
  .metric-foot { font-size: .7rem; }
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .sidebar { width: 248px; transform: translateX(-100%); transition: transform .2s; box-shadow: 8px 0 40px #0b203e22; }
  .sidebar.open { transform: translateX(0); }
  .brand img { width: 196px; }
  .workspace { width: 100%; margin-left: 0; }
  .mobile-menu { display: inline-flex; }
  #toast { left: 50%; }
  .page-heading { align-items: flex-start; }
  .table-wrap > table { min-width: 950px; }
}
@media (max-width: 800px) {
  main { padding: 24px 18px 32px; }
  .topbar { padding: 0 18px; height: 65px; }
  .top-left { gap: 10px; }
  .top-right { gap: 8px; }
  h1 { font-size: 1.65rem; }
  .page-heading { margin-bottom: 22px; gap: 18px; }
  .page-heading .actions { gap: 8px; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .metric-label { font-size: .74rem; }
  .metric-value { font-size: 1.7rem; }
  .metric-foot { font-size: .71rem; }
  .metric-label svg { display: block; }
  .client-insight-strip { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insight-card { padding: 15px; min-height: 76px; gap: 11px; }
  .insight-number { font-size: 1.5rem; }
  .insight-label { font-size: .72rem; }
  .toolbar { padding: 14px; gap: 12px; }
  .toolbar .search, .toolbar .search input { width: 100%; }
  .filter-tabs { width: 100%; justify-content: space-between; }
  .filter-tabs button { flex: 1; padding: 6px 8px; }
  .panel-head { padding: 18px; }
  .panel-head h2 { font-size: .96rem; }
  .panel-body { padding: 19px; }
  .aside-stack { gap: 16px; }
  .preview-layout, .two-columns { grid-template-columns: 1fr; }
  .template-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .plan-card { padding: 20px; }
  .plan-card .plan-price { font-size: 1.6rem; }
  dialog { width: calc(100% - 28px); max-height: calc(100dvh - 32px); border-radius: 13px; }
  .modal-content, .modal-heading { padding: 21px; }
  .modal-heading h2 { font-size: 1.15rem; }
  .timeline-event { grid-template-columns: 34px 78px minmax(0, 1fr); gap: 10px; }
  .event-marker { width: 34px; height: 34px; }
  .service-timeline::before { left: 16px; }
  .event-content { padding: 13px; }
  .event-day { font-size: .7rem; }
  .event-time { font-size: .64rem; }
  .event-title { font-size: .77rem; }
  .app-footer { padding: 18px; }
}
@media (max-width: 540px) {
  .top-left #breadcrumb { font-size: .72rem; }
  .top-right .demo-pill { font-size: .63rem; padding: 4px 6px; }
  .top-right .icon-btn { width: 33px; height: 33px; min-width: 33px; }
  main { padding: 23px 15px 28px; }
  h1 { font-size: 1.5rem; line-height: 1.35; }
  .subtitle { font-size: .8rem; margin-top: 7px; }
  .page-heading .actions { width: 100%; align-items: stretch; }
  .page-heading .actions > .btn { flex: 1 1 auto; font-size: .76rem; padding: 9px 11px; }
  .month-control { flex: 1 1 auto; justify-content: space-between; }
  .month-control strong { font-size: .78rem; min-width: 110px; }
  .metric { padding: 14px; border-radius: 10px; }
  .metric-label { font-size: .68rem; min-height: 32px; line-height: 1.5; }
  .metric-label svg { display: none; }
  .metric-value { font-size: 1.46rem; margin-top: 9px; }
  .metric-value > span { font-size: .65rem !important; }
  .metric-foot { font-size: .66rem; }
  .metrics { gap: 10px; margin-bottom: 20px; }
  .client-insight-strip { gap: 9px; margin-bottom: 18px; }
  .insight-card { padding: 14px 12px; gap: 10px; min-height: 72px; }
  .insight-number { font-size: 1.4rem; }
  .insight-label { font-size: .69rem; }
  .aside-stack, .plan-grid, .form-grid, .detail-grid { grid-template-columns: 1fr; }
  .panel-head { padding: 16px; gap: 8px; align-items: flex-start; }
  .panel-head .btn { font-size: .68rem; }
  .panel-head small { font-size: .7rem; }
  .filter-tabs button { font-size: .7rem; padding: 6px 5px; }
  .table-footer { padding: 12px 15px; gap: 5px; font-size: .67rem; }
  .table-wrap > table { min-width: 965px; }
  td { padding-top: 16px; padding-bottom: 16px; }
  .row-actions .icon-btn { width: 37px; height: 37px; min-width: 37px; }
  .template-menu { grid-template-columns: 1fr; }
  dialog { width: calc(100% - 18px); max-height: calc(100dvh - 20px); border-radius: 12px; }
  .modal-heading, .modal-content { padding: 19px 17px; }
  .modal-heading h2 { font-size: 1.07rem; }
  .modal-heading p { font-size: .72rem; }
  .client-detail-identity { padding-bottom: 19px; margin-bottom: 19px; gap: 12px; flex-wrap: wrap; }
  .client-detail-identity > div:last-child { flex-basis: 100%; margin-left: 64px; }
  .client-detail-identity .client-avatar { width: 52px; height: 52px; flex-basis: 52px; border-radius: 14px; }
  .client-detail-identity h3 { font-size: 1rem; }
  .detail-actions { gap: 8px; }
  .detail-actions .btn { flex: 1 1 auto; font-size: .73rem; min-height: 42px; }
  .detail-box { padding: 17px; }
  .timeline-heading { align-items: flex-start; flex-direction: column; gap: 5px; margin-top: 22px; }
  .timeline-heading h3 { font-size: .98rem; }
  .timeline-event { grid-template-columns: 31px minmax(0, 1fr); column-gap: 11px; row-gap: 5px; }
  .event-marker { grid-column: 1; grid-row: 1 / 3; width: 31px; height: 31px; margin-top: 0; }
  .event-marker svg { width: 15px; height: 15px; }
  .service-timeline::before { left: 15px; }
  .event-date { grid-column: 2; grid-row: 1; padding-top: 2px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .event-date time { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .event-day { display: inline; font-size: .72rem; }
  .event-time { display: inline; font-size: .65rem; margin-top: 0; }
  .event-content { grid-column: 2; grid-row: 2; padding: 12px; }
  .event-title { font-size: .75rem; }
  .event-meta { font-size: .68rem; }
  .service-timeline { gap: 19px; }
  .form-actions { flex-wrap: wrap; gap: 8px; }
  .form-actions > .btn { flex: 1 1 auto; font-size: .77rem; }
  .visual-identity-picker { padding: 16px; gap: 16px; }
  .visual-preview { padding: 13px; }
  .visual-preview strong { font-size: .78rem; }
  .color-palette { gap: 9px; }
  .color-palette button { width: 35px; height: 35px; min-width: 35px; }
  .logo-upload .btn { font-size: .72rem; }
  .notification-controls { grid-template-columns: 1fr; }
  .notification-context, .duplicate-notice { padding: 12px 13px; font-size: .72rem; }
  .notification-recipient { font-size: .75rem; }
  .activity-row { padding: 15px 17px; flex-wrap: wrap; gap: 10px; }
  .activity-row > div:not(.activity-icon) { flex: 1; min-width: 170px; }
  .activity-row time { margin-left: 45px; font-size: .66rem; }
  .activity-row p { font-size: .76rem; }
  .activity-row small { font-size: .67rem; }
  .payment-total { padding: 19px; }
  .payment-total strong { font-size: 1.65rem; }
  .payment-total span { font-size: .7rem; }
  #toast { width: calc(100% - 30px); max-width: none; bottom: 16px; padding: 13px 15px; font-size: .75rem; }
}
@media (max-width: 1100px) {
  .sidebar { visibility: hidden; }
  .sidebar.open { visibility: visible; }
}
@media (max-width: 800px) {
  .clients-table th:first-child, .clients-table td:first-child { position: sticky; left: 0; z-index: 1; background: white; box-shadow: 1px 0 0 #dce4ee; }
  .clients-table th:first-child { background: #f4f7fa; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  .sidebar, .topbar, .app-footer, .page-heading .actions, .row-actions, #toast { display: none !important; }
  .workspace { margin-left: 0; width: 100%; }
  main { padding: 0; }
  .panel, .metric, .plan-card { box-shadow: none; break-inside: avoid; }
}

.table-scroll-hint{display:none}.table-wrap:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}@media(max-width:800px){.table-scroll-hint{display:flex;align-items:center;gap:7px;padding:11px 16px;font-size:.7rem;color:#53657c;background:#f4f7fa}.table-scroll-hint .icon{width:15px;height:15px;flex-shrink:0}}