:root {
  --ink: #17233d;
  --muted: #697386;
  --blue: #2457f5;
  --blue-dark: #1944c7;
  --blue-soft: #edf3ff;
  --teal: #20a985;
  --teal-soft: #e8f8f3;
  --coral: #e95d55;
  --border: #dfe5eb;
  --surface: #fff;
  --background: #f4f6f7;
  --shadow: 0 14px 36px rgb(23 35 61 / 8%);
  --font: Inter, "Avenir Next", Avenir, "Segoe UI", Arial, sans-serif;
  --editorial: "DM Serif Display", Georgia, serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--background); color: var(--ink); font-family: var(--font); }
button, input, select, textarea { color: inherit; font: inherit; }
button, select { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 3px solid rgb(36 87 245 / 28%);
  outline-offset: 2px;
}

.button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  gap: 7px;
  height: 40px;
  justify-content: center;
  padding: 0 15px;
  text-decoration: none;
}
.button.primary { background: var(--blue); color: #fff; }
.button.primary:hover { background: var(--blue-dark); }
.button.selecting { background: #17233d; box-shadow: 0 0 0 4px rgb(36 87 245 / 15%); }
.button.secondary { background: #fff; border-color: var(--border); color: var(--ink); }
.button.large { height: 48px; width: 100%; }
.button.small { height: 35px; padding: 0 12px; }
.button:disabled { cursor: not-allowed; opacity: .48; }
.text-link { background: transparent; border: 0; color: var(--blue); font-size: 11px; font-weight: 800; justify-self: center; padding: 3px; text-decoration: none; }
.eyebrow { color: var(--blue); font-size: 10px; font-weight: 900; letter-spacing: .12em; margin: 0; text-transform: uppercase; }

.state-page, .page-loading {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100dvh;
  padding: 30px;
  text-align: center;
}
.page-loading { min-height: 55vh; }
.state-page h1 { font-family: var(--editorial); font-size: clamp(32px, 5vw, 50px); margin: 12px 0; }
.state-page > p:not(.eyebrow) { color: var(--muted); line-height: 1.65; max-width: 540px; }
.state-logo { align-items: center; background: var(--ink); border-radius: 14px; color: #fff; display: flex; font-weight: 900; height: 48px; justify-content: center; margin-bottom: 20px; width: 48px; }
.spinner { animation: spin .8s linear infinite; border: 3px solid #dce4ef; border-radius: 50%; border-top-color: var(--blue); height: 34px; width: 34px; }
@keyframes spin { to { transform: rotate(360deg); } }

.login-page {
  align-items: center;
  background:
    radial-gradient(circle at 10% 20%, rgb(32 169 133 / 14%), transparent 28rem),
    radial-gradient(circle at 90% 80%, rgb(36 87 245 / 15%), transparent 32rem),
    #f4f7f3;
  display: flex;
  min-height: 100dvh;
  padding: 28px;
}
.login-card {
  background: rgb(255 255 255 / 95%);
  border: 1px solid #dce4e4;
  border-radius: 26px;
  box-shadow: 0 32px 80px rgb(23 35 61 / 14%);
  display: grid;
  gap: 28px 54px;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  margin: auto;
  max-width: 1040px;
  overflow: hidden;
  padding: clamp(28px, 5vw, 62px);
  position: relative;
  width: 100%;
}
.login-card::before { background: linear-gradient(180deg, var(--blue), var(--teal)); content: ""; inset: 0 auto 0 0; position: absolute; width: 7px; }
.compact-card { max-width: 860px; }
.single-card { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
.single-card .login-brand { grid-column: auto; }
.login-brand { align-items: center; display: flex; gap: 12px; grid-column: 1 / -1; }
.login-brand > span { align-items: center; background: var(--ink); border-radius: 11px; color: #fff; display: flex; font-size: 13px; font-weight: 900; height: 40px; justify-content: center; width: 40px; }
.login-brand strong, .login-brand small { display: block; }
.login-brand strong { font-family: var(--editorial); font-size: 18px; }
.login-brand small { color: var(--muted); font-size: 10px; margin-top: 2px; }
.login-copy { align-self: center; }
.login-copy h1 { font-family: var(--editorial); font-size: clamp(42px, 6vw, 68px); letter-spacing: -.05em; line-height: .96; margin: 14px 0 22px; }
.login-copy > p:not(.eyebrow) { color: var(--muted); font-size: 16px; line-height: 1.7; margin: 0; }
.login-form { display: grid; gap: 17px; }
.login-form label, .modal-form label, .form-stack > label, .review-form label, .status-field, .code-field {
  color: #526074;
  display: grid;
  font-size: 11px;
  font-weight: 800;
  gap: 7px;
}
.login-form input, .modal-form input, .form-stack input, .review-form input, .review-form textarea, .reply-form textarea, .code-field textarea {
  background: #fbfcfd;
  border: 1px solid #d6dee5;
  border-radius: 10px;
  font-size: 14px;
  min-height: 45px;
  padding: 10px 12px;
  resize: vertical;
}
.login-form label small, .form-stack label small { color: #8b96a5; font-size: 9px; font-weight: 600; line-height: 1.5; }
.login-security { align-items: flex-start; background: var(--teal-soft); border-radius: 12px; display: flex; gap: 10px; grid-column: 1 / -1; padding: 13px; }
.login-security > span { color: var(--teal); font-size: 11px; }
.login-security p, .login-security strong, .login-security small { display: block; margin: 0; }
.login-security strong { font-size: 11px; }
.login-security small { color: #48746b; font-size: 9px; line-height: 1.5; margin-top: 3px; }
.form-message { background: #fff1f0; border: 1px solid #fecdca; border-radius: 9px; color: #b42318; font-size: 11px; grid-column: 2; padding: 10px 12px; }
.form-message.success { background: var(--teal-soft); border-color: #b9e9dc; color: #285f58; }
.success-panel { background: var(--teal-soft); border: 1px solid #b9e9dc; border-radius: 12px; color: #285f58; padding: 16px; }
.success-panel strong { display: block; font-size: 13px; }
.success-panel p { font-size: 11px; line-height: 1.6; margin: 6px 0 0; }

.app-shell { min-height: 100dvh; }
.app-header {
  align-items: center;
  background: #fff;
  border-bottom: 1px solid var(--border);
  display: grid;
  gap: 24px;
  grid-template-columns: auto 1fr auto;
  min-height: 74px;
  padding: 12px 28px;
}
.brand { align-items: center; color: inherit; display: flex; gap: 11px; text-decoration: none; }
.brand > span { align-items: center; background: var(--ink); border-radius: 10px; color: #fff; display: flex; font-size: 12px; font-weight: 900; height: 38px; justify-content: center; width: 38px; }
.brand strong, .brand small { display: block; }
.brand strong { font-family: var(--editorial); font-size: 17px; }
.brand small { color: var(--muted); font-size: 9px; margin-top: 2px; }
.main-nav { display: flex; gap: 5px; justify-self: center; }
.main-nav a { border-radius: 9px; color: var(--muted); font-size: 11px; font-weight: 800; padding: 10px 14px; text-decoration: none; }
.main-nav a.active { background: var(--blue-soft); color: var(--blue); }
.account { align-items: center; display: flex; gap: 14px; text-align: right; }
.account strong, .account small { display: block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account strong { font-size: 11px; }
.account small { color: var(--muted); font-size: 9px; margin-top: 2px; }

.page-intro, .admin-toolbar, .content-width, .summary-grid, .activity-table {
  margin-left: auto;
  margin-right: auto;
  max-width: 1260px;
  width: calc(100% - 56px);
}
.page-intro { padding: clamp(42px, 6vw, 76px) 0 28px; }
.page-intro h1, .admin-toolbar h1, .sidebar-heading h1 { font-family: var(--editorial); letter-spacing: -.04em; margin: 6px 0; }
.page-intro h1 { font-size: clamp(38px, 5vw, 56px); }
.page-intro > p:not(.eyebrow) { color: var(--muted); line-height: 1.65; max-width: 650px; }
.summary-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 22px; }
.summary-grid > div { background: #fff; border: 1px solid var(--border); border-radius: 13px; display: flex; flex-direction: column-reverse; gap: 7px; padding: 16px 18px; }
.summary-grid span { color: var(--muted); font-size: 10px; font-weight: 700; }
.summary-grid strong { font-size: 25px; }
.admin-toolbar { align-items: flex-end; display: flex; justify-content: space-between; padding: 34px 0 17px; }
.admin-toolbar h1 { font-size: 34px; }
.admin-toolbar > div:last-child { display: flex; gap: 9px; }

.project-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-bottom: 60px; }
.project-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 8px 24px rgb(23 35 61 / 5%); display: grid; gap: 18px; padding: 21px; }
.project-card-top { align-items: center; display: flex; justify-content: space-between; }
.project-mark { align-items: center; background: var(--ink); border-radius: 10px; color: #fff; display: flex; font-size: 10px; font-weight: 900; height: 39px; justify-content: center; width: 39px; }
.project-card-top i { background: #edf3ff; border-radius: 99px; color: var(--blue); font-size: 8px; font-style: normal; font-weight: 850; padding: 6px 8px; }
.project-card-top i[data-stage="Client approved"] { background: var(--teal-soft); color: #08745b; }
.project-card h2 { font-family: var(--editorial); font-size: 23px; margin: 0; }
.project-card p { color: var(--muted); font-size: 10px; margin: 5px 0 0; }
.progress { background: #e7ecf1; border-radius: 99px; height: 6px; overflow: hidden; }
.progress span { background: var(--teal); display: block; height: 100%; }
.project-card dl { display: grid; gap: 9px; margin: 0; }
.project-card dl div { display: flex; font-size: 10px; justify-content: space-between; }
.project-card dt { color: var(--muted); }
.project-card dd { font-weight: 800; margin: 0; }
.project-review { justify-content: space-between; width: 100%; }
.empty-state { align-items: center; background: #fff; border: 1px dashed #cbd5df; border-radius: 16px; display: flex; flex-direction: column; grid-column: 1 / -1; min-height: 250px; justify-content: center; padding: 40px; text-align: center; }
.empty-state > span { color: var(--blue); font-size: 38px; font-weight: 900; }
.empty-state h2 { font-family: var(--editorial); margin: 8px 0; }
.empty-state p { color: var(--muted); font-size: 12px; line-height: 1.6; max-width: 480px; }

.customer-workspace { display: grid; gap: 18px; grid-template-columns: 350px minmax(0, 1fr); margin: 24px auto; max-width: 1260px; width: calc(100% - 56px); }
.customer-sidebar, .customer-editor { background: #fff; border: 1px solid var(--border); border-radius: 15px; min-height: 640px; }
.customer-sidebar { padding: 18px; }
.sidebar-heading, .editor-heading, .save-bar, .access-list > div:first-child { align-items: center; display: flex; justify-content: space-between; }
.sidebar-heading { border-bottom: 1px solid var(--border); margin-bottom: 12px; padding-bottom: 14px; }
.sidebar-heading h1 { font-size: 25px; }
.customer-list { display: grid; gap: 8px; }
.customer-list-card { align-items: center; background: #fff; border: 1px solid var(--border); border-radius: 11px; display: grid; gap: 10px; grid-template-columns: auto minmax(0, 1fr) auto; padding: 11px; text-align: left; width: 100%; }
.customer-list-card.selected { background: #f2f6ff; border-color: #b8c9ff; }
.customer-list-card > span { align-items: center; background: var(--ink); border-radius: 8px; color: #fff; display: flex; font-size: 9px; font-weight: 900; height: 36px; justify-content: center; width: 36px; }
.customer-list-card strong, .customer-list-card small { display: block; min-width: 0; }
.customer-list-card strong { font-size: 11px; }
.customer-list-card small { color: var(--muted); font-size: 8px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-list-card i { background: var(--teal-soft); border-radius: 99px; color: #08745b; font-size: 8px; font-style: normal; font-weight: 800; padding: 5px 7px; }
.customer-list-card i[data-status="inactive"] { background: #f0f2f4; color: #697386; }
.empty-mini { color: var(--muted); display: grid; font-size: 10px; gap: 5px; padding: 50px 18px; text-align: center; }
.customer-editor { overflow: hidden; }
.editor-heading { border-bottom: 1px solid var(--border); padding: 20px 23px; }
.editor-heading h2 { font-family: var(--editorial); font-size: 25px; margin: 6px 0 0; }
.editor-heading > small { color: var(--muted); font-size: 9px; }
.customer-form-grid { display: grid; gap: 24px; grid-template-columns: minmax(250px, .8fr) minmax(300px, 1.2fr); padding: 24px; }
.form-stack { display: grid; gap: 15px; }
.invite-note { background: var(--blue-soft); border: 1px solid #cfdbff; border-radius: 11px; display: grid; gap: 5px; padding: 13px; }
.invite-note strong { font-size: 11px; }
.invite-note span { color: #526074; font-size: 9px; line-height: 1.5; }
.switch-row { align-items: flex-start; background: #f3f6fa; border-radius: 11px; display: flex !important; padding: 13px; }
.switch-row input { margin-top: 3px; min-height: auto; width: auto; }
.switch-row span, .switch-row strong, .switch-row small { display: block; }
.switch-row strong { color: var(--ink); }
.access-list { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.access-list > div:first-child { background: #f7f9fb; border-bottom: 1px solid var(--border); font-size: 10px; padding: 13px 15px; }
.access-list > div:first-child strong { color: var(--blue); }
.access-row { align-items: center; border-bottom: 1px solid #edf0f3; display: flex; gap: 11px; padding: 12px 15px; }
.access-row:last-child { border-bottom: 0; }
.access-row span, .access-row strong, .access-row small { display: block; }
.access-row strong { font-size: 10px; }
.access-row small { color: var(--muted); font-size: 8px; margin-top: 3px; }
.muted-copy { color: var(--muted); font-size: 10px; padding: 18px; }
.save-bar { background: #f7f9fb; border-top: 1px solid var(--border); gap: 22px; padding: 18px 24px; }
.save-bar p { color: var(--muted); font-size: 9px; line-height: 1.55; margin: 0; max-width: 480px; }

.activity-table { background: #fff; border: 1px solid var(--border); border-radius: 15px; margin-bottom: 50px; overflow: hidden; }
.activity-head, .activity-table article { align-items: center; display: grid; gap: 18px; grid-template-columns: 1.5fr 1fr 1fr 1fr; padding: 13px 18px; }
.activity-head { background: #f7f9fb; color: var(--muted); font-size: 8px; font-weight: 850; text-transform: uppercase; }
.activity-table article { border-top: 1px solid #edf0f3; font-size: 9px; }
.activity-table article > span:first-child { align-items: center; display: flex; gap: 9px; }
.activity-table article i { background: var(--teal); border-radius: 99px; height: 8px; width: 8px; }
.activity-table time { color: var(--muted); }
.live-badge { background: var(--teal-soft); border-radius: 99px; color: #08745b; font-size: 9px; font-weight: 850; padding: 7px 10px; }

.settings-layout { margin: 0 auto; max-width: 1040px; padding: 46px 28px 70px; }
.settings-heading { margin-bottom: 22px; }
.settings-heading h1 { font-family: var(--editorial); font-size: 42px; letter-spacing: -.04em; margin: 8px 0; }
.settings-heading > p:not(.eyebrow) { color: var(--muted); line-height: 1.65; max-width: 680px; }
.settings-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.settings-status { align-items: center; background: #f7f9fb; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; padding: 18px 22px; }
.settings-status > div strong, .settings-status > div span { display: block; }
.settings-status > div strong { font-size: 13px; }
.settings-status > div span { color: var(--muted); font-size: 9px; margin-top: 4px; }
.settings-status .switch-row { min-width: 250px; }
.settings-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 24px; }
.settings-grid label { color: #526074; display: grid; font-size: 11px; font-weight: 800; gap: 7px; }
.settings-grid input, .settings-grid select { background: #fbfcfd; border: 1px solid #d6dee5; border-radius: 10px; font-size: 14px; min-height: 45px; padding: 10px 12px; }
.settings-card .save-bar > div { display: flex; gap: 9px; }

.review-app { background: #f3f5f3; display: grid; grid-template-rows: 72px 65px auto minmax(0, 1fr); height: 100dvh; min-height: 720px; overflow: hidden; }
.review-header { align-items: center; background: #fff; border-bottom: 1px solid var(--border); display: grid; gap: 20px; grid-template-columns: auto 1fr auto; padding: 0 22px; }
.review-project { align-items: baseline; display: flex; gap: 10px; justify-self: center; }
.review-project span, .review-project small { color: var(--muted); font-size: 10px; }
.review-project strong { font-size: 14px; }
.review-header-actions { align-items: center; display: flex; gap: 8px; }
.connector-state { color: #985f1c; font-size: 9px; font-weight: 800; }
.connector-state::before { background: #efaa4c; border-radius: 99px; content: ""; display: inline-block; height: 7px; margin-right: 6px; width: 7px; }
.connector-state.ready { color: #08745b; }
.connector-state.ready::before { background: var(--teal); }
.review-toolbar { align-items: center; background: #f8faf8; border-bottom: 1px solid var(--border); display: flex; gap: 22px; padding: 0 22px; }
.review-toolbar > label { align-items: center; display: flex; gap: 9px; }
.review-toolbar label span { color: var(--muted); font-size: 10px; font-weight: 800; }
.review-toolbar select, .status-field select { background: #fff; border: 1px solid #d4dce3; border-radius: 9px; font-size: 11px; font-weight: 750; height: 37px; padding: 0 28px 0 11px; }
.review-progress { align-items: center; display: flex; gap: 10px; margin-right: auto; }
.review-progress > span { color: var(--muted); font-size: 10px; }
.review-progress > i { background: #dfe5e8; border-radius: 99px; height: 6px; overflow: hidden; width: 110px; }
.review-progress > i b { background: var(--teal); display: block; height: 100%; }
.connector-notice { align-items: center; background: #fff8e8; border-bottom: 1px solid #efddb6; color: #704d1e; display: flex; font-size: 10px; gap: 12px; min-height: 42px; padding: 8px 22px; }
.connector-notice span { color: #84663d; }
.review-layout { display: grid; gap: 17px; grid-template-columns: minmax(0, 1fr) 390px; min-height: 0; padding: 17px 20px 20px; }
.review-stage { align-items: center; background: #eaeeeb; border: 1px solid #d9e0dc; border-radius: 15px; display: flex; justify-content: center; min-height: 0; overflow: auto; padding: 15px; }
.frame-wrapper { background: #fff; border-radius: 9px; box-shadow: 0 22px 58px rgb(23 35 61 / 20%); flex: 0 0 auto; overflow: hidden; }
#review-frame { border: 0; display: block; transform-origin: 0 0; }
.review-panel { background: #fff; border: 1px solid var(--border); border-radius: 15px; box-shadow: var(--shadow); display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; overflow: hidden; }
.review-panel-main { overflow-y: auto; padding: 23px; }
.review-panel-main h2 { font-size: 21px; letter-spacing: -.02em; margin: 8px 0 18px; }
.review-form { display: grid; gap: 14px; }
.panel-actions { display: flex; gap: 8px; justify-content: flex-end; }
.duplicate-card { background: #fff4e8; border: 1px solid #f0d1aa; border-radius: 11px; color: #6e471c; padding: 15px; }
.duplicate-card p { font-size: 11px; line-height: 1.55; }
.empty-panel { align-self: center; text-align: center; }
.empty-panel > span { align-items: center; background: var(--blue-soft); border-radius: 99px; color: var(--blue); display: inline-flex; font-size: 23px; font-weight: 900; height: 56px; justify-content: center; width: 56px; }
.empty-panel p { color: var(--muted); font-size: 11px; line-height: 1.6; }
.detail-top, .detail-author, .attachments > div, .attachments form { align-items: center; display: flex; }
.detail-top { justify-content: space-between; }
.detail-top i { background: #fff4e5; border-radius: 99px; color: #b54708; font-size: 8px; font-style: normal; font-weight: 800; padding: 6px 8px; }
.detail-top i[data-status="Resolved"] { background: var(--teal-soft); color: #08745b; }
.detail-author { gap: 9px; }
.detail-author > b { align-items: center; background: var(--blue-soft); border-radius: 99px; color: var(--blue); display: flex; font-size: 9px; height: 34px; justify-content: center; width: 34px; }
.detail-author strong, .detail-author small { display: block; }
.detail-author strong { font-size: 11px; }
.detail-author small { color: var(--muted); font-size: 8px; margin-top: 2px; }
.comment-copy { color: #4d5a6d; font-size: 12px; line-height: 1.65; white-space: pre-wrap; }
.feedback-detail dl { background: #f7f9fa; border-radius: 10px; display: grid; gap: 8px; margin: 15px 0; padding: 12px; }
.feedback-detail dl div { display: flex; font-size: 9px; justify-content: space-between; }
.feedback-detail dt { color: var(--muted); }
.feedback-detail dd { font-weight: 750; margin: 0; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.status-field { margin: 15px 0; }
.attachments { border: 1px solid var(--border); border-radius: 10px; display: grid; gap: 8px; padding: 12px; }
.attachments > div { font-size: 10px; justify-content: space-between; }
.attachments > div span { background: #edf1f4; border-radius: 99px; padding: 3px 7px; }
.attachments > p { color: var(--muted); font-size: 9px; margin: 0; }
.attachments > a { color: var(--blue); font-size: 9px; font-weight: 750; }
.attachments form { gap: 8px; }
.attachments input { font-size: 8px; min-width: 0; }
.activity-list { border-top: 1px solid var(--border); margin-top: 17px; padding-top: 16px; }
.activity-list > strong { font-size: 10px; }
.activity-list article { display: grid; gap: 9px; grid-template-columns: 8px 1fr; margin-top: 12px; }
.activity-list article > span { background: var(--teal); border-radius: 99px; height: 8px; margin-top: 4px; width: 8px; }
.activity-list p { color: #455369; font-size: 10px; margin: 0 0 3px; white-space: pre-wrap; }
.activity-list small { color: #8d97a4; font-size: 8px; }
.reply-form { border-top: 1px solid var(--border); display: grid; gap: 8px; margin-top: 16px; padding-top: 14px; }
.reply-form button { justify-self: end; }
.text-danger { background: transparent; border: 0; color: #b42318; font-size: 9px; margin-top: 14px; padding: 0; text-decoration: underline; }
.review-comment-list { border-top: 1px solid var(--border); max-height: 220px; overflow-y: auto; padding: 11px; }
.review-comment-list > div { align-items: center; display: flex; font-size: 10px; justify-content: space-between; padding: 3px 7px 9px; }
.review-comment-list > div span { background: #edf1f4; border-radius: 99px; padding: 3px 7px; }
.review-comment-list > button { align-items: center; background: transparent; border: 0; border-radius: 9px; display: grid; gap: 8px; grid-template-columns: 25px minmax(0, 1fr); padding: 8px; text-align: left; width: 100%; }
.review-comment-list > button.selected, .review-comment-list > button:hover { background: #eff4ff; }
.review-comment-list > button > b { align-items: center; background: var(--blue); border-radius: 99px; color: #fff; display: flex; font-size: 8px; height: 24px; justify-content: center; width: 24px; }
.review-comment-list button span, .review-comment-list button strong, .review-comment-list button small { display: block; min-width: 0; }
.review-comment-list button strong { font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-comment-list button small { color: var(--muted); font-size: 8px; margin-top: 2px; }

.modal-backdrop { align-items: center; background: rgb(23 35 61 / 45%); display: flex; inset: 0; justify-content: center; padding: 22px; position: fixed; z-index: 1000; }
.modal { background: #fff; border-radius: 17px; box-shadow: 0 26px 74px rgb(23 35 61 / 32%); max-height: calc(100dvh - 44px); max-width: 500px; overflow-y: auto; padding: 27px; position: relative; width: 100%; }
.modal h2 { font-family: var(--editorial); font-size: 27px; margin: 7px 0 10px; }
.modal > p:not(.eyebrow) { color: var(--muted); font-size: 11px; line-height: 1.6; }
.modal-close { background: #f0f2f4; border: 0; border-radius: 8px; font-size: 18px; height: 32px; position: absolute; right: 14px; top: 14px; width: 32px; }
.modal-form { display: grid; gap: 15px; margin-top: 18px; }
.modal-form textarea { background: #fbfcfd; border: 1px solid #d6dee5; border-radius: 10px; padding: 10px 12px; resize: vertical; }
.modal-note { background: var(--teal-soft); border-radius: 10px; color: #285f58; display: grid; font-size: 9px; gap: 4px; line-height: 1.5; margin-top: 17px; padding: 13px; }
.code-field { margin-top: 16px; }
.code-field textarea { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; }
.toast { background: var(--ink); border: 0; border-radius: 10px; bottom: 22px; box-shadow: 0 14px 38px rgb(23 35 61 / 25%); color: #fff; font-size: 11px; font-weight: 750; padding: 12px 16px; position: fixed; right: 22px; z-index: 1200; }
.toast.error { background: #b42318; }
.deleted-list { border: 1px solid var(--border); border-radius: 11px; margin-top: 16px; overflow: hidden; }
.deleted-list article { align-items: center; border-bottom: 1px solid var(--border); display: flex; gap: 14px; justify-content: space-between; padding: 12px; }
.deleted-list article:last-child { border-bottom: 0; }
.deleted-list strong, .deleted-list small { display: block; }
.deleted-list strong { font-size: 11px; }
.deleted-list small { color: var(--muted); font-size: 8px; margin-top: 3px; }

@media (max-width: 1040px) {
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customer-workspace { grid-template-columns: 1fr; }
  .customer-sidebar, .customer-editor { min-height: auto; }
  .review-layout { grid-template-columns: minmax(0, 1fr) 340px; }
  .review-header .brand small, .review-project > span { display: none; }
}

@media (max-width: 760px) {
  .login-card { grid-template-columns: 1fr; }
  .login-brand, .login-security, .form-message { grid-column: auto; }
  .login-copy h1 { font-size: 44px; }
  .app-header { align-items: flex-start; display: flex; flex-wrap: wrap; padding: 13px 16px; }
  .main-nav { order: 3; overflow-x: auto; width: 100%; }
  .account { margin-left: auto; }
  .account span { display: none; }
  .summary-grid { grid-template-columns: 1fr 1fr; width: calc(100% - 32px); }
  .page-intro, .admin-toolbar, .content-width, .activity-table, .customer-workspace { width: calc(100% - 32px); }
  .project-grid { grid-template-columns: 1fr; }
  .admin-toolbar { align-items: flex-start; gap: 15px; }
  .customer-form-grid { grid-template-columns: 1fr; }
  .settings-layout { padding: 34px 16px 60px; }
  .settings-grid { grid-template-columns: 1fr; padding: 18px; }
  .settings-status { align-items: stretch; flex-direction: column; gap: 14px; }
  .settings-status .switch-row { min-width: 0; }
  .settings-card .save-bar > div { flex-direction: column; }
  .save-bar { align-items: stretch; flex-direction: column; }
  .activity-head { display: none; }
  .activity-table article { grid-template-columns: 1fr 1fr; }
  .review-app { height: auto; min-height: 100dvh; overflow: visible; }
  .review-header { align-items: flex-start; display: flex; flex-wrap: wrap; padding: 12px 15px; }
  .review-project { justify-self: auto; margin-left: auto; }
  .review-header-actions { order: 3; overflow-x: auto; width: 100%; }
  .connector-state { margin-right: auto; }
  .review-toolbar { flex-wrap: wrap; min-height: 118px; padding: 12px 15px; }
  .review-progress { order: 3; width: 100%; }
  .review-layout { grid-template-columns: 1fr; min-height: auto; padding: 12px; }
  .review-stage { height: 65dvh; }
  .review-panel { min-height: 620px; }
  .connector-notice { align-items: flex-start; flex-direction: column; }
}