:root {
  --navy: #0f172a;
  --navy-2: #17233d;
  --ink: #182338;
  --muted: #64738a;
  --line: #e9edf3;
  --paper: #f7f9fc;
  --white: #ffffff;
  --cyan: #087f78;
  --coral: #ef7567;
  --amber: #e8ad4e;
  --violet: #8c78df;
  --teal: #35b8ae;
  --shadow: 0 18px 45px rgba(28, 43, 76, .08);
}

* { box-sizing: border-box; }
*[hidden] { display: none !important; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); font-family: Heebo, Assistant, sans-serif; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { border: 0; cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid rgba(27,185,178,.35); outline-offset: 3px; }

.app-shell { min-height: 100vh; display: flex; }
.sidebar { width: 280px; flex: 0 0 280px; min-height: 100vh; padding: 30px 18px 22px; background: var(--navy); color: #d8e0ee; display: flex; flex-direction: column; }
.brand-lockup { display: flex; gap: 12px; align-items: center; padding: 0 12px 30px; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #42c5bd; color: var(--navy); font-weight: 800; font-size: 21px; }
.brand-lockup strong { display: block; color: #fff; font-size: 19px; letter-spacing: -.02em; }
.brand-lockup span { color: #8f9cb5; font-size: 12px; }
.account-card { display: flex; align-items: center; gap: 9px; padding: 13px 12px; margin: 0 0 26px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(255,255,255,.045); }
.account-avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: #f0c27b; color: #68461b; font-weight: 800; }
.account-copy { min-width: 0; flex: 1; }
.account-copy strong, .account-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-copy strong { color: #fff; font-size: 12px; }
.account-copy span { margin-top: 2px; color: #aeb9ca; font-size: 12px; direction: ltr; text-align: right; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(27,185,178,.12); }
.source-section { display: block; margin: 0 0 16px; }
.source-submenu { display: none; margin: 5px 0 0 7px; padding-right: 8px; border-right: 1px solid rgba(255,255,255,.13); }
.source-section.is-expanded .source-submenu { display: block; }
.source-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px; border: 1px solid transparent; border-radius: 11px; color: #aebbd0; background: transparent; text-align: right; }
.source-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.source-item.is-active { border-color: rgba(53,184,174,.35); color: #fff; background: rgba(53,184,174,.13); }
.source-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; color: var(--navy); background: #f1c47c; font-size: 14px; font-weight: 800; }
.source-item[data-source="drive"] .source-icon { color: #fff; background: #4e9ad6; }
.source-copy { min-width: 0; display: grid; flex: 1; gap: 1px; }
.source-copy strong { font-size: 13px; }
.source-copy small { color: #8492aa; font-size: 11px; }
.listening-status { display: inline-flex; align-items: center; gap: 4px; color: #8edbd3; font-size: 10px; white-space: nowrap; }
.listening-status i, .drive-live i { width: 6px; height: 6px; border-radius: 50%; background: #42c5bd; box-shadow: 0 0 0 3px rgba(66,197,189,.13); }
.nav-list { display: grid; gap: 5px; }
.nav-item, .label-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 12px; color: #aebbd0; background: transparent; border-radius: 11px; text-align: right; font-size: 14px; transition: .2s ease; }
.nav-item:hover, .label-item:hover { color: #fff; background: rgba(255,255,255,.07); }
.nav-item.is-active { color: #fff; background: rgba(27,185,178,.17); box-shadow: inset -3px 0 0 var(--cyan); }
.nav-item b, .label-item b { margin-right: auto; color: #7f8da7; font-size: 12px; font-weight: 500; }
.nav-item.is-active b { color: #90e4df; }
.nav-icon { width: 19px; color: #7e8ba3; text-align: center; font-size: 17px; }
.nav-item.is-active .nav-icon { color: var(--cyan); }
.sidebar-section { margin-top: 31px; }
.section-label { display: flex; align-items: center; justify-content: space-between; padding: 0 12px 8px; color: #7f8da7; font-size: 12px; }
.section-label button { color: #7f8da7; background: transparent; font-size: 18px; }
.label-item { font-size: 12px; padding: 9px 12px; }
.label-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); }
.label-dot.violet { background: var(--violet); }.label-dot.amber { background: var(--amber); }.label-dot.teal { background: var(--teal); }.label-dot.coral { background: var(--coral); }
.sidebar-footer { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 14px 12px 0; color: #9aa7bc; font-size: 12px; }
.sync-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); }

.workspace { min-width: 0; flex: 1; padding: 34px clamp(20px, 4vw, 62px) 45px; }
.topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; max-width: 1280px; margin: 0 auto 26px; }
.eyebrow { display: block; margin-bottom: 3px; color: var(--cyan); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, p { margin: 0; }.topbar h1 { font-size: clamp(26px, 3vw, 38px); letter-spacing: -.045em; line-height: 1.1; }
.topbar-actions { display: flex; gap: 9px; align-items: center; }
.icon-button, .gmail-button { height: 41px; border-radius: 11px; }
.icon-button { width: 41px; color: var(--navy); background: #eef2f7; font-size: 21px; }
.mail-listen-button { min-height: 41px; padding: 0 14px; border: 1px solid #b9deda; border-radius: 11px; color: #087f78; background: #eff9f8; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }.mail-listen-button:hover { background: #dff4f1; }.mail-listen-stop { border-color: #e5c7c3; color: #a24b43; background: #fff6f4; }.mail-listen-stop:hover { background: #ffebe7; }
.gmail-button { display: inline-flex; align-items: center; gap: 8px; padding: 0 15px; color: #fff; background: var(--navy); text-decoration: none; font-size: 13px; font-weight: 600; }
.gmail-button span { color: var(--cyan); font-size: 16px; }
.toolbar { max-width: 1280px; margin: 0 auto 18px; display: flex; align-items: center; gap: 20px; }
.search-box { min-width: 280px; max-width: 620px; flex: 1; height: 46px; display: flex; align-items: center; gap: 11px; padding: 0 15px; background: var(--white); border: 1px solid #e4eaf2; border-radius: 13px; box-shadow: 0 5px 17px rgba(24,35,56,.035); }
.search-box > span { color: var(--cyan); font-size: 23px; line-height: 0; }.search-box input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 14px; }.search-box input::placeholder { color: #64738a; }.search-box kbd { border: 1px solid #e2e7ef; border-bottom-width: 2px; border-radius: 5px; color: #7d899b; padding: 0 6px; font-size: 12px; }
.toolbar-meta { display: flex; align-items: center; gap: 11px; color: #64738a; font-size: 12px; white-space: nowrap; }.divider { width: 1px; height: 15px; background: #dce2ec; }
.settings-panel { width: 100%; max-width: none; box-sizing: border-box; margin: 0 0 13px; padding: 20px 22px; border: 1px solid #dfe8ed; border-radius: 13px; background: #fff; box-shadow: 0 10px 26px rgba(28, 43, 76, .055); }
.settings-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.settings-kicker { color: var(--cyan); font-size: 12px; font-weight: 700; }
.settings-header h2 { margin-top: 3px; color: var(--ink); font-size: 21px; letter-spacing: -.03em; }
.settings-header p { margin-top: 4px; color: var(--muted); font-size: 12px; }
.settings-close { color: #8b98aa; background: transparent; font-size: 21px; }
.settings-tabs { display: flex; gap: 4px; margin-top: 16px; border-bottom: 1px solid var(--line); }
.settings-tab { padding: 10px 15px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font: inherit; font-size: 12px; cursor: pointer; }
.settings-tab:hover { color: var(--ink); background: #f7fbfb; }.settings-tab.is-active { border-bottom-color: var(--cyan); color: var(--cyan); font-weight: 700; }
.settings-tab-panel { min-height: 105px; }.settings-tab-panel[hidden] { display: none; }
.standalone-settings-nav { width: 100%; margin-top: 14px; }
#dataPanel:not([hidden]) { display: flex; flex-direction: column; }
#dataPanel .data-hero { order: 0; }
#dataPanel .data-workspace { order: 1; }
#dataPanel .data-dropzone { order: 2; }
.template-layout { display: grid; grid-template-columns: minmax(190px, .35fr) minmax(0, 1fr); gap: 18px; padding-top: 16px; }
.template-list-panel { min-height: 265px; padding-left: 17px; border-left: 1px solid var(--line); }
.template-list-heading, .template-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.template-list-heading strong, .template-editor-heading strong { color: var(--ink); font-size: 13px; }.template-save-status { margin-inline-start: auto; color: var(--muted); font-size: 10px; }.template-save-status.is-saving { color: #b67822; }.template-save-status.is-saved { color: #087f78; }.template-save-button { flex: 0 0 auto; }.template-list { display: grid; gap: 5px; margin-top: 12px; }.template-list-empty { padding: 22px 8px; color: var(--muted); font-size: 11px; line-height: 1.5; }.template-item { display: grid; gap: 3px; width: 100%; padding: 9px; border: 1px solid transparent; border-radius: 8px; color: var(--ink); background: transparent; text-align: right; cursor: pointer; }.template-item:hover { background: #f6fbfb; }.template-item.is-active { border-color: #b9deda; background: #eff9f8; }.template-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }.template-item span { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }.template-editor { display: grid; gap: 11px; }.template-editor .settings-field { gap: 5px; }.template-editor input, .template-editor textarea { width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid #dce5ec; border-radius: 7px; outline: 0; color: var(--ink); background: #fff; font: inherit; font-size: 12px; }.template-editor textarea { resize: vertical; line-height: 1.6; }.template-editor input:focus, .template-editor textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(8,127,120,.12); }.template-delete { color: #bd5f58; }.template-attachment-picker { display: grid; gap: 5px; color: #31415a; font-size: 12px; font-weight: 600; }.template-attachment-picker input { padding: 7px; }.template-attachment-picker small { color: var(--muted); font-size: 11px; font-weight: 400; }.template-actions { display: flex; gap: 8px; padding-top: 7px; }
.settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; padding: 17px 0; }
.template-variable-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; }.template-variable-tools button { padding: 5px 8px; border: 1px solid #b9deda; border-radius: 6px; color: var(--cyan); background: #f0fbfa; font: inherit; font-size: 11px; cursor: pointer; }.template-variable-tools button:hover { background: #e2f5f3; }.template-live-preview { padding: 14px; border: 1px solid #dce9e8; border-radius: 10px; background: linear-gradient(135deg, #f7fcfb, #fff); }.template-live-heading { color: var(--cyan); font-size: 10px; font-weight: 700; }.template-preview-subject { margin-top: 7px; color: var(--ink); font-size: 14px; font-weight: 700; }.template-preview-body { min-height: 70px; margin-top: 9px; color: #4b596c; font-size: 12px; line-height: 1.7; white-space: normal; }.template-token { display: inline-block; padding: 1px 4px; border-radius: 4px; color: #6756b5; background: #f0edff; font-size: 11px; }
.template-workspace-tabs { display: flex; align-items: center; gap: 4px; padding: 4px; border-bottom: 1px solid var(--line); background: #f7fafb; }
.template-workspace-tab { padding: 8px 14px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.template-workspace-tab:hover { color: var(--cyan); }
.template-workspace-tab.is-active { border-bottom-color: var(--cyan); color: var(--cyan); background: #fff; }
.template-editor-tabs { display: flex; align-items: center; gap: 4px; padding: 4px; border-bottom: 1px solid var(--line); background: #f7fafb; }
.template-editor-tab { padding: 9px 15px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.template-editor-tab:hover { color: var(--cyan); }
.template-editor-tab.is-active { border-bottom-color: var(--cyan); color: var(--cyan); background: #fff; }
.treated-panel { padding-top: 16px; }.treated-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; }.treated-heading strong { display: block; color: var(--ink); font-size: 14px; }.treated-heading span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }.treated-search { max-width: 330px; margin-bottom: 12px; }.treated-list { border: 1px solid #e5ebf0; border-radius: 9px; overflow: hidden; }.treated-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 85px 55px; gap: 12px; align-items: center; padding: 10px 12px; border-bottom: 1px solid #edf0f4; background: #fff; }.treated-row:last-child { border-bottom: 0; }.treated-source { justify-self: start; padding: 3px 6px; border-radius: 5px; color: #b15c51; background: #fff0ee; font-size: 10px; }.treated-source.is-excel { color: #168b83; background: #e6f7f5; }.treated-main { min-width: 0; }.treated-main strong, .treated-main span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.treated-main strong { color: var(--ink); font-size: 12px; }.treated-main span, .treated-row time { margin-top: 2px; color: var(--muted); font-size: 11px; }.treated-status { color: #168b83; font-size: 11px; font-weight: 700; }
.webhook-panel { padding-top: 16px; }.webhook-card { width: 100%; max-width: none; box-sizing: border-box; padding: 18px; border: 1px solid #dce9e8; border-radius: 12px; background: linear-gradient(135deg, #f7fcfb, #fff); }.webhook-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }.webhook-heading strong { display: block; color: var(--ink); font-size: 15px; }.webhook-heading span { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }.webhook-status { padding: 5px 8px; border-radius: 6px; color: #946216 !important; background: #fff1cf; font-size: 11px !important; white-space: nowrap; }.webhook-status.is-connected { color: #168b83 !important; background: #e6f7f5; }.webhook-card .settings-field { margin-top: 16px; }.webhook-card .settings-field input { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid #dce5ec; border-radius: 7px; outline: 0; font: inherit; font-size: 12px; }.webhook-toggle { display: flex; align-items: center; gap: 7px; margin-top: 13px; color: #31415a; font-size: 12px; }.webhook-toggle input { accent-color: var(--cyan); }.webhook-actions { display: flex; gap: 8px; margin-top: 17px; }.webhook-check-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; padding-top: 17px; border-top: 1px solid var(--line); }.webhook-check-row strong { display: block; color: var(--ink); font-size: 13px; }.webhook-check-row span { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }.webhook-check-controls { display: flex; align-items: center; gap: 8px; min-width: min(520px, 100%); }.webhook-check-controls input { flex: 1; min-width: 180px; box-sizing: border-box; padding: 10px; border: 1px solid #dce5ec; border-radius: 7px; outline: 0; font: inherit; font-size: 12px; }.webhook-check-controls input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(38, 165, 160, .1); } @media (max-width: 700px) { .webhook-check-row, .webhook-check-controls { align-items: stretch; flex-direction: column; }.webhook-check-controls input, .webhook-check-controls button { width: 100%; } }
.webhook-read-row { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }.webhook-read-row > div:first-child strong { display: block; color: var(--ink); font-size: 13px; }.webhook-read-row > div:first-child span { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }.webhook-read-row .settings-field { max-width: 100%; }
.settings-field { display: grid; gap: 6px; color: #31415a; font-size: 12px; font-weight: 600; }
.settings-field-wide { grid-column: span 2; }
.settings-field input, .settings-field select { width: 100%; height: 38px; padding: 0 10px; border: 1px solid #dfe6ed; border-radius: 8px; color: var(--ink); background: #fbfcfe; outline: none; font-size: 13px; }
.settings-field input:focus, .settings-field select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(8,127,120,.12); }
.settings-field small { color: var(--muted); font-size: 12px; font-weight: 400; }
.rules-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 0 10px; border-top: 1px solid var(--line); }
.rules-heading strong { display: block; color: var(--ink); font-size: 14px; }.rules-heading span { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.add-rule { padding: 7px 10px; border: 1px solid #b9deda; border-radius: 7px; color: var(--cyan); background: #f0fbfa; font-size: 12px; font-weight: 700; }
.rules-list { display: grid; gap: 7px; }.rule-row { display: grid; grid-template-columns: 25px 155px 120px 120px minmax(0,1fr) 28px; gap: 8px; align-items: center; padding: 7px; border: 1px solid #e4eaf0; border-radius: 8px; background: #fbfcfe; }
.rule-number { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--cyan); background: #e8f7f5; font-size: 11px; font-weight: 700; }
.rule-row select, .rule-row input { width: 100%; height: 34px; padding: 0 8px; border: 1px solid #dfe6ed; border-radius: 6px; color: var(--ink); background: #fff; font-size: 12px; }
.rule-row input:focus, .rule-row select:focus { border-color: var(--cyan); outline: none; box-shadow: 0 0 0 3px rgba(8,127,120,.1); }
.remove-rule { color: #a0aabb; background: transparent; font-size: 19px; }.remove-rule:hover { color: var(--coral); }
.rules-empty { padding: 13px; border: 1px dashed #d7e0e8; border-radius: 8px; color: var(--muted); background: #fbfcfe; font-size: 12px; text-align: center; }
.settings-error { padding: 8px 10px; border-radius: 7px; color: #a03e34; background: #fff1ef; font-size: 12px; }
.settings-actions { display: flex; justify-content: flex-start; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.settings-nav { margin-top: 7px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 15px; }
.drive-menu { margin-top: 2px; }
.drive-panel, .data-panel { max-width: 1360px; margin: 0 auto; padding: 25px; border: 1px solid #dfe8ed; border-radius: 14px; background: #fff; box-shadow: 0 10px 26px rgba(28,43,76,.055); }
.drive-hero { display: flex; align-items: center; gap: 15px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.drive-symbol { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: #4e9ad6; font-size: 22px; }
.drive-kicker { color: #4e9ad6; font-size: 12px; font-weight: 700; }
.drive-hero h2 { margin-top: 2px; font-size: 24px; letter-spacing: -.04em; }
.drive-hero p { margin-top: 4px; color: var(--muted); font-size: 13px; }
.drive-live { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; color: #087f78; font-size: 12px; font-weight: 700; }
.drive-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 18px; }
.drive-card { display: grid; gap: 5px; padding: 16px; border: 1px solid #e5ebf0; border-radius: 10px; background: #fbfcfe; }
.drive-card strong { font-size: 13px; }.drive-card span { color: var(--muted); font-size: 12px; }
.data-hero .drive-symbol { background: var(--cyan); }.data-hero .drive-kicker { color: var(--cyan); }
.data-dropzone { display: grid; justify-items: center; gap: 8px; width: 100%; max-width: none; margin-top: 18px; padding: 28px 22px; border: 1.5px dashed #9ed5d0; border-radius: 14px; color: var(--ink); background: #f5fbfa; text-align: center; cursor: pointer; transition: .2s ease; }.data-dropzone:hover, .data-dropzone.is-dragging { border-color: var(--cyan); background: #eaf8f6; box-shadow: 0 10px 24px rgba(8,127,120,.1); }.data-dropzone strong { font-size: 16px; }.data-dropzone > span:not(.dropzone-icon) { color: var(--muted); font-size: 12px; }.dropzone-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: var(--cyan); font-size: 24px; font-weight: 700; }.data-dropzone .reader-action { margin-top: 6px; }
.data-workspace { margin-top: 18px; border: 1px solid #e5ebf0; border-radius: 14px; background: #fff; overflow: hidden; box-shadow: 0 10px 26px rgba(28, 43, 76, .055); }
.data-workspace-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 16px 18px 13px; border-bottom: 1px solid var(--line); }
.data-workspace-toolbar h3 { margin-top: 3px; color: var(--ink); font-size: 18px; }
.data-workspace-tools { display: flex; align-items: center; gap: 12px; }
.data-search { display: flex; align-items: center; gap: 7px; min-width: 220px; padding: 7px 10px; border: 1px solid #dce5ec; border-radius: 8px; color: var(--muted); background: #fbfcfe; }
.data-search input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font: inherit; font-size: 12px; }
.data-filter { min-height: 33px; padding: 6px 9px; border: 1px solid #dce5ec; border-radius: 8px; color: var(--ink); background: #fbfcfe; font: inherit; font-size: 12px; }
.data-row-count { color: var(--muted); font-size: 11px; white-space: nowrap; }
.data-file-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 10px 15px 0; border-bottom: 1px solid var(--line); }
.data-file-tab { display: inline-flex; align-items: center; gap: 7px; margin-bottom: -1px; padding: 8px 11px; border: 1px solid transparent; border-bottom: 2px solid transparent; border-radius: 7px 7px 0 0; color: #66758b; background: transparent; font: inherit; font-size: 12px; white-space: nowrap; cursor: pointer; }
.data-file-tab span { color: #9aa6b7; font-size: 10px; }.data-file-tab.is-active { border-color: #dce9e8; border-bottom-color: var(--cyan); color: var(--ink); background: #f4fbfa; }
.data-bulk-toolbar { display: flex; align-items: center; gap: 12px; margin: 10px 0; padding: 9px 11px; border: 1px solid #dce9e8; border-radius: 9px; background: #f7fcfb; }
.data-select-all { display: inline-flex; align-items: center; gap: 6px; color: #31415a; font-size: 12px; cursor: pointer; }
.data-select-all input, .data-row-select input { accent-color: var(--cyan); }
.data-selected-count { margin-right: auto; color: var(--muted); font-size: 11px; }
.data-bulk-toolbar .reader-action.upload { padding: 9px 14px; }
.data-inbox-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(270px, .75fr); min-height: 285px; }
.data-inbox-list { min-width: 0; border-left: 1px solid var(--line); }
.data-inbox-row { display: grid; grid-template-columns: 24px 35px minmax(0, 1fr) auto minmax(360px, .9fr); gap: 10px; align-items: center; width: 100%; padding: 10px 14px; border: 0; border-bottom: 1px solid #f0f2f6; color: var(--ink); background: #fff; text-align: right; cursor: pointer; transition: .16s ease; }
.data-row-select { display: inline-flex; align-items: center; justify-content: center; width: 22px; cursor: pointer; }
.data-row-select input { width: 15px; height: 15px; margin: 0; }
.data-inbox-row:hover { background: #f7f9fc; }.data-inbox-row.is-selected { background: #edf8f7; box-shadow: inset -3px 0 0 var(--cyan); }.data-inbox-row.is-duplicate { box-shadow: inset -3px 0 0 #e6ad4f; }.data-inbox-row.is-duplicate.is-selected { box-shadow: inset -3px 0 0 var(--cyan); }
.data-row-number { color: #99a5b4; font-size: 11px; text-align: center; }.data-row-main { min-width: 0; overflow: hidden; }.data-row-main strong, .data-row-main span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.data-row-main strong { font-size: 12px; }.data-row-main span { margin-top: 3px; color: #71809a; font-size: 11px; }.data-row-main .data-row-email { color: var(--cyan); direction: ltr; font-size: 11px; text-align: right; }.duplicate-badge { display: inline-block !important; margin: 0 6px; padding: 2px 5px; border-radius: 4px; color: #946216 !important; background: #fff1cf; font-size: 9px !important; vertical-align: middle; }.data-row-date { color: #8290a2; font-size: 10px; white-space: nowrap; }
.data-record-reader { min-width: 0; padding: 22px; background: #fbfcfe; }.data-reader-placeholder { display: grid; place-items: center; align-content: center; min-height: 235px; color: var(--muted); text-align: center; }.data-reader-placeholder span { color: var(--cyan); font-size: 30px; }.data-reader-placeholder strong { margin-top: 9px; color: var(--ink); font-size: 14px; }.data-reader-placeholder p { margin-top: 5px; font-size: 11px; }
.data-reader-kicker { color: var(--cyan); font-size: 11px; font-weight: 700; }.data-reader-content h3 { margin-top: 7px; color: var(--ink); font-size: 18px; line-height: 1.35; }.data-record-fields { display: grid; gap: 9px; margin-top: 17px; }.data-record-field { padding-bottom: 8px; border-bottom: 1px solid #e7edf1; }.data-record-field span, .data-record-field strong { display: block; }.data-record-field span { color: var(--muted); font-size: 10px; }.data-record-field strong { margin-top: 3px; color: #34445d; font-size: 12px; line-height: 1.45; word-break: break-word; }
.data-empty-state { padding: 40px 18px; color: var(--muted); font-size: 12px; text-align: center; }
.content-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(340px, 1.1fr) minmax(360px, .9fr); gap: 17px; align-items: start; }
.message-column, .reader-panel { min-height: 620px; background: var(--white); border: 1px solid #ebeff4; border-radius: 19px; box-shadow: var(--shadow); }
.list-heading { display: flex; align-items: center; justify-content: space-between; padding: 19px 21px 15px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 700; }.text-button { color: var(--cyan); background: transparent; font-size: 12px; }
.message-list { padding: 4px 10px 13px; }.message-row { position: relative; display: grid; grid-template-columns: 39px minmax(0,1fr) auto; gap: 11px; align-items: start; padding: 14px 11px; border-bottom: 1px solid #f0f2f6; cursor: pointer; transition: .2s ease; }.message-row:hover { background: #fbfcfe; }.message-row.is-selected { background: #effaf9; box-shadow: inset 0 0 0 1px rgba(8,127,120,.2); }.sender-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: #fff; font-size: 13px; font-weight: 700; background: var(--avatar, #8c78df); }.message-main { min-width: 0; }.message-head { display: flex; align-items: baseline; justify-content: space-between; gap: 9px; }.sender { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #27344b; font-size: 13px; font-weight: 700; }.is-read .sender { font-weight: 500; }.message-date { color: #76849a; font-size: 12px; white-space: nowrap; }.message-subject { overflow: hidden; margin-top: 3px; color: #3f4d63; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }.is-read .message-subject { font-weight: 500; }.message-preview { overflow: hidden; margin-top: 2px; color: #64738a; font-size: 12px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }.message-tags { display: flex; align-items: center; gap: 5px; margin-top: 7px; }.tag { padding: 2px 7px; border-radius: 5px; color: #5d6c82; background: #f1f4f8; font-size: 12px; }.tag.teal { color: #168b83; background: #e6f7f5; }.tag.violet { color: #6756b5; background: #f0edff; }.attachment { color: var(--coral); font-size: 14px; }.star { color: #cbd2de; font-size: 15px; }.star.is-starred { color: var(--amber); }
.reader-panel { position: sticky; top: 25px; overflow: hidden; }.reader-placeholder { min-height: 620px; display: grid; place-content: center; justify-items: center; padding: 40px; text-align: center; }.reader-placeholder h2 { margin-top: 20px; font-size: 19px; letter-spacing: -.03em; }.reader-placeholder p { max-width: 260px; margin-top: 7px; color: var(--muted); font-size: 13px; line-height: 1.6; }.reader-orbit { position: relative; width: 82px; height: 82px; border: 1px solid #dfe9ed; border-radius: 50%; }.reader-orbit::before, .reader-orbit::after { content: ''; position: absolute; inset: 15px; border: 1px dashed #b9e4e1; border-radius: 50%; }.reader-orbit::after { inset: 30px; border-style: solid; border-color: var(--cyan); }.reader-orbit span { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }.reader-orbit span:nth-child(1) { top: 4px; left: 38px; }.reader-orbit span:nth-child(2) { right: 6px; bottom: 22px; background: var(--amber); }.reader-orbit span:nth-child(3) { left: 15px; bottom: 11px; background: var(--violet); }
.reader-content { height: 100%; }.reader-top { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--line); }.reader-kicker { color: var(--cyan); font-size: 12px; font-weight: 700; }.reader-close { color: #8b98aa; background: transparent; font-size: 20px; }.reader-body { padding: 25px 26px 31px; }.reader-body h2 { font-size: 25px; line-height: 1.25; letter-spacing: -.04em; }.reader-meta { display: flex; align-items: center; gap: 10px; margin-top: 17px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }.reader-meta .sender-avatar { width: 32px; height: 32px; }.reader-meta-copy strong, .reader-meta-copy span { display: block; }.reader-meta-copy strong { font-size: 12px; }.reader-meta-copy span { color: var(--muted); direction: ltr; font-size: 12px; text-align: right; }.reader-copy { margin-top: 23px; color: #4b596c; font-size: 14px; line-height: 1.9; white-space: pre-line; }.reader-labels { display: flex; gap: 6px; margin-top: 26px; }.reader-actions { display: flex; gap: 8px; margin-top: 28px; }.reader-action { padding: 9px 13px; border: 1px solid #dfe5ec; border-radius: 9px; color: #607087; background: #fff; font-size: 12px; }.reader-action.primary { border-color: var(--navy); color: #fff; background: var(--navy); }
.empty-state { padding: 85px 20px; text-align: center; }.empty-icon { color: var(--cyan); font-size: 44px; }.empty-state h2 { margin-top: 8px; font-size: 18px; }.empty-state p { margin-top: 5px; color: var(--muted); font-size: 13px; }
.toast { position: fixed; right: 24px; bottom: 24px; padding: 11px 15px; border-radius: 10px; color: #fff; background: var(--navy); box-shadow: var(--shadow); opacity: 0; transform: translateY(10px); pointer-events: none; transition: .25s ease; font-size: 12px; }.toast.is-visible { opacity: 1; transform: translateY(0); }
.preview-modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 25px; }
#previewModal { z-index: 40; }
#uploadConfirmModal, #dataUploadModal { z-index: 20; }
.preview-modal[hidden] { display: none; }
.preview-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.58); backdrop-filter: blur(4px); }
.preview-dialog { position: relative; width: min(620px, 100%); overflow: hidden; border: 1px solid #e0e7ed; border-radius: 15px; background: #fff; box-shadow: 0 24px 70px rgba(15,23,42,.24); }
.preview-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.preview-kicker { color: var(--cyan); font-size: 12px; font-weight: 700; }.preview-header h2 { margin-top: 3px; max-width: 500px; overflow: hidden; color: var(--ink); font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
.preview-close { color: #8b98aa; background: transparent; font-size: 22px; }
.preview-body { min-height: 245px; display: grid; place-items: center; align-content: center; gap: 9px; padding: 35px; color: var(--ink); background: linear-gradient(135deg, #f8fbfc, #eef8f7); text-align: center; }
.preview-file-icon { width: 75px; height: 85px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: var(--coral); box-shadow: 0 9px 18px rgba(239,117,103,.22); font-size: 14px; font-weight: 800; }
.preview-body strong { max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.preview-body p { color: var(--ink); font-size: 14px; font-weight: 600; }.preview-body span { color: var(--muted); font-size: 12px; }
.preview-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 22px; border-top: 1px solid var(--line); }.preview-footer span { color: var(--muted); font-size: 12px; }
.preview-media { display: block; max-width: 100%; max-height: 330px; object-fit: contain; border-radius: 8px; box-shadow: 0 8px 22px rgba(15,23,42,.12); }
.preview-frame { width: 100%; height: 330px; border: 0; border-radius: 7px; background: #fff; }
.preview-text { width: 100%; max-height: 330px; overflow: auto; margin: 0; padding: 16px; border-radius: 8px; color: #31415a; background: #fff; text-align: left; white-space: pre-wrap; }
.preview-table-wrap { width: 100%; max-height: 330px; overflow: auto; border: 1px solid #dce7ec; border-radius: 8px; background: #fff; direction: ltr; }
.preview-table { min-width: 100%; border-collapse: collapse; color: #31415a; font-size: 12px; text-align: left; }
.preview-table td { min-width: 90px; padding: 8px 10px; border: 1px solid #e6edf0; white-space: nowrap; }
.preview-table tr:first-child td { color: var(--ink); background: #f0f7f7; font-weight: 700; }
.file-preview-button { padding: 4px 7px; border: 1px solid #b9deda; border-radius: 5px; color: var(--cyan); background: #f0fbfa; font-size: 11px; }
.upload-warning { margin: 18px 22px 12px; padding: 13px 14px; border: 1px solid #f1d39b; border-radius: 9px; color: #73521c; background: #fff9ec; font-size: 12px; line-height: 1.55; }.upload-warning strong { display: block; color: #9b6614; font-size: 13px; }.upload-warning p { margin-top: 5px; }
.upload-destination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 22px 10px; color: var(--muted); font-size: 11px; }.upload-destination code { padding: 4px 7px; border-radius: 5px; color: #4d5e75; background: #f1f4f8; direction: ltr; font-size: 11px; }
.upload-file-list { display: grid; gap: 6px; max-height: 180px; overflow: auto; margin: 0 22px 13px; padding: 2px; }.upload-file-row { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border: 1px solid #e5ebf0; border-radius: 7px; color: var(--ink); background: #fbfcfe; font-size: 12px; }.upload-file-row .file-icon { width: 27px; height: 27px; flex-basis: 27px; font-size: 8px; }.upload-file-row small { margin-right: auto; color: var(--muted); font-size: 11px; }
.upload-empty { margin: 0 22px 13px; padding: 14px; border: 1px dashed #d5e1e8; border-radius: 8px; color: var(--muted); background: #fbfcfe; font-size: 12px; text-align: center; }
.upload-footer-actions { display: flex; align-items: center; gap: 8px; }
.spreadsheet-action { border-color: #b9deda; color: var(--cyan); background: #f0fbfa; }
.spreadsheet-action:hover { border-color: var(--cyan); background: #eefbf9; }
.reader-action:disabled { cursor: not-allowed; opacity: .45; }
.upload-source-fields { display: grid; grid-template-columns: minmax(260px, 1fr); gap: 12px; margin: 0 22px 13px; }
.upload-source-fields > div, .upload-source-fields label { display: grid; gap: 5px; min-width: 0; }
.upload-email-control { display: flex; align-items: center; gap: 7px; }
.upload-field-label { color: var(--muted); font-size: 11px; }
.upload-source-email { overflow: hidden; padding: 9px 10px; border: 1px solid #e5ebf0; border-radius: 7px; color: var(--ink); background: #fbfcfe; direction: ltr; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.upload-source-email { flex: 1; min-width: 0; font: inherit; font-size: 12px; }
.upload-source-email:disabled { cursor: not-allowed; color: #66758b; background: #f1f4f8; }
.upload-source-fields select { width: 100%; min-height: 35px; padding: 7px 9px; border: 1px solid #dce5ec; border-radius: 7px; color: var(--ink); background: #fff; font: inherit; font-size: 12px; }
.upload-mode-field { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 0 22px 13px; padding: 10px 12px; border: 1px solid #e5ebf0; border-radius: 8px; color: var(--ink); background: #fbfcfe; }
.upload-mode-field legend { padding: 0 4px; color: var(--muted); font-size: 11px; }
.upload-mode-field label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.upload-mode-field input { margin: 0; accent-color: var(--cyan); }

@media (max-width: 980px) { .sidebar { width: 230px; flex-basis: 230px; }.content-grid { grid-template-columns: 1fr; }.reader-panel { position: relative; min-height: 420px; }.reader-placeholder { min-height: 420px; } }
@media (max-width: 680px) { .app-shell { display: block; }.sidebar { width: 100%; min-height: auto; padding: 15px 15px 13px; }.brand-lockup { padding: 0 4px 15px; }.account-card { margin-bottom: 12px; }.nav-list { grid-template-columns: repeat(2, 1fr); }.nav-item { padding: 9px; font-size: 12px; }.sidebar-section, .sidebar-footer { display: none; }.workspace { padding: 24px 13px 25px; }.topbar { align-items: flex-start; }.topbar h1 { font-size: 28px; }.gmail-button { padding: 0 11px; font-size: 11px; }.icon-button { display: none; }.toolbar { display: block; }.search-box { max-width: none; }.toolbar-meta { margin-top: 11px; }.content-grid { gap: 12px; }.message-column, .reader-panel { min-height: 0; border-radius: 15px; }.reader-panel { display: none; }.message-row { grid-template-columns: 34px minmax(0,1fr) auto; padding: 12px 7px; }.sender-avatar { width: 31px; height: 31px; }.message-preview { display: none; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }
@media (max-width: 680px) { .upload-source-fields { grid-template-columns: 1fr; } }

/* Compact Gmail-style inbox rows */
.workspace { padding-top: 25px; }
.topbar { margin-bottom: 18px; }
.topbar h1 { font-size: clamp(24px, 2.7vw, 32px); }
.toolbar { margin-bottom: 12px; }
.content-grid { display: block; max-width: 1360px; }
.message-column { min-height: 0; border-radius: 13px; box-shadow: 0 10px 26px rgba(28, 43, 76, .055); }
.list-heading { padding: 13px 15px 11px; }
.message-list { padding: 0; }
.message-row { display: grid; grid-template-columns: 20px 21px minmax(135px, .24fr) minmax(0, 1fr) 78px 420px; direction: rtl; gap: 8px; align-items: center; width: 100%; min-height: 43px; padding: 7px 13px; border-bottom: 1px solid #edf0f4; border-radius: 0; text-align: right; }
.message-row:hover { background: #f7f9fc; }
.message-row:focus-visible { outline: 3px solid rgba(27,185,178,.35); outline-offset: -3px; }
.message-row.is-selected { background: #edf8f7; box-shadow: inset 3px 0 0 var(--cyan); }
.message-row.is-unread { background: #fff; }
.message-row.is-unread .sender, .message-row.is-unread .message-subject { font-weight: 700; }
.mail-checkbox { color: #9aa5b5; font-size: 19px; line-height: 1; }
.star { justify-self: center; color: #9da7b5; font-size: 18px; line-height: 1; }
.star.is-starred { color: var(--amber); }
.sender { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #26344b; font-size: 13px; font-weight: 500; }
.mail-summary { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: center; overflow: hidden; white-space: nowrap; }
.message-subject, .message-preview { display: block; max-width: 100%; overflow: hidden; margin: 0; font-size: 13px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.message-subject { color: #26344b; font-weight: 500; }
.message-recipient { display: block; max-width: 100%; overflow: hidden; margin-top: 2px; color: #8793a5; font-size: 11px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.message-preview { color: #71809a; font-weight: 400; }
.message-tags { display: flex; align-items: center; gap: 4px; margin: 3px 0 1px; }
.tag { padding: 1px 5px; border-radius: 4px; font-size: 10px; line-height: 1.25; }
.attachment { margin-right: 5px; color: var(--coral); font-size: 13px; }
.message-date { justify-self: start; color: #68778e; font-size: 12px; white-space: nowrap; }
.row-provider { display: inline-flex; align-items: center; justify-content: flex-start; gap: 9px; min-width: 0; color: #627089; font-size: 12px; white-space: nowrap; }
.row-provider label { display: inline-flex; align-items: center; gap: 4px; }
.row-provider input { margin: 0; accent-color: var(--cyan); }
.row-meta { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-width: 0; }
.row-workflow, .data-row-workflow { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 7px; min-width: 0; color: #71809a; }
.row-workflow label, .data-row-workflow label { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; white-space: nowrap; }
.row-workflow input, .data-row-workflow input { width: 12px; height: 12px; margin: 0; accent-color: var(--cyan); }
.workflow-send-contract { color: var(--coral); }
.workflow-status { display: inline-flex; align-items: center; padding: 3px 6px; border-radius: 5px; font-size: 10px; line-height: 1; white-space: nowrap; }
.workflow-status:not(.is-complete) { opacity: .42; filter: grayscale(.75); }
.workflow-status.is-complete { box-shadow: 0 0 0 1px currentColor; font-weight: 700; }
.status-contract { color: #9b6614; background: #fff3d8; }
.status-user { color: #6756b5; background: #f0edff; }
.status-materials { color: #168b83; background: #e6f7f5; }
.status-client-approval { color: #2867a8; background: #e8f2ff; }
.status-manager-approval { color: #8a4d8f; background: #f8eafa; }
.reader-panel { display: none; margin-top: 14px; min-height: 0; position: relative; border-radius: 13px; box-shadow: 0 10px 26px rgba(28, 43, 76, .055); }
.reader-panel.is-open { display: block; }
.reader-placeholder { min-height: 260px; }
.reader-content { height: auto; }
.attachment-section { margin-top: 25px; padding-top: 18px; border-top: 1px solid var(--line); }
.attachment-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.attachment-heading strong { color: var(--ink); font-size: 14px; }
.attachment-heading span { color: var(--muted); font-size: 12px; }
.attachment-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.attachment-card { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px 10px; border: 1px solid #e4eaf1; border-radius: 10px; color: var(--ink); background: #fbfcfe; text-align: right; transition: .2s ease; }
.attachment-card:hover { border-color: #b9deda; background: #f2fbfa; }
.attachment-preview-button { flex: 0 0 auto; padding: 5px 8px; border: 1px solid #b9deda; border-radius: 6px; color: var(--cyan); background: #f0fbfa; font-size: 11px; font-weight: 700; }
.attachment-preview-button:hover { border-color: var(--cyan); background: #e2f5f3; }
.file-role-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; margin-right: auto; }
.file-role-checks label { display: inline-flex; align-items: center; gap: 3px; color: #64738a; font-size: 10px; white-space: nowrap; }
.file-role-checks input { width: 12px; height: 12px; margin: 0; accent-color: var(--cyan); }
.file-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; border-radius: 8px; color: #fff; background: var(--coral); font-size: 9px; font-weight: 800; }
.file-copy { min-width: 0; flex: 1; }
.file-copy strong, .file-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-copy strong { font-size: 12px; font-weight: 600; }
.file-copy span { margin-top: 2px; color: var(--muted); font-size: 12px; }
.download-icon { color: var(--cyan); font-size: 18px; }
.reader-action.upload { padding: 10px 16px; border-color: var(--coral); color: #fff; background: var(--coral); box-shadow: 0 7px 16px rgba(239,117,103,.22); font-weight: 700; }
.reader-action.upload:hover { border-color: #de6357; background: #de6357; box-shadow: 0 9px 20px rgba(239,117,103,.3); transform: translateY(-1px); }
.provider-choice { display: flex; align-items: center; gap: 8px; min-height: 39px; margin: 0; padding: 3px 9px; border: 1px solid #dfe7ed; border-radius: 9px; color: var(--ink); background: #fbfcfe; }
.provider-choice legend { padding: 0 4px; color: var(--muted); font-size: 10px; }
.provider-choice label { display: inline-flex; align-items: center; gap: 5px; color: #31415a; font-size: 12px; white-space: nowrap; }
.provider-choice input { accent-color: var(--cyan); }

@media (max-width: 680px) {
  .settings-grid { grid-template-columns: 1fr; }
  .template-layout { grid-template-columns: 1fr; }
  .template-list-panel { min-height: 0; padding: 0 0 12px; border-left: 0; border-bottom: 1px solid var(--line); }
  .data-workspace-tools { flex-wrap: wrap; }
  .data-search { min-width: 0; flex: 1 1 180px; }
  .data-filter { flex: 1 1 140px; }
  .settings-field-wide { grid-column: auto; }
  .rules-heading { align-items: flex-start; flex-direction: column; }
  .rule-row { grid-template-columns: 25px minmax(0,1fr) 28px; }
  .rule-row .rule-operator, .rule-row .rule-file-type, .rule-row .rule-value { grid-column: 2 / 4; }
  .rule-row .rule-operator { grid-row: 2; }
  .rule-row .rule-file-type { grid-row: 3; }
  .rule-row .rule-value { grid-row: 4; }
  .message-row { grid-template-columns: 20px 21px minmax(100px, .32fr) minmax(0, 1fr) 58px 132px; gap: 6px; min-height: 41px; padding: 6px 8px; }
  .message-subject, .message-preview, .sender { font-size: 12px; }
  .message-date { font-size: 10px; }
  .message-preview { display: inline; }
  .message-tags { display: flex; }
  .row-provider { font-size: 10px; }
  .source-item { padding: 8px; }
  .listening-status { display: none; }
  .drive-grid { grid-template-columns: 1fr; }
  .drive-panel, .data-panel { padding: 17px; }
}

/* Keep Gmail content above the optional settings form. */
.workspace { display: flex; flex-direction: column; }
.topbar { order: 1; }
.toolbar { order: 2; }
#gmailContent, #drivePanel, #dataPanel { order: 3; }
#settingsPanel { order: 4; }
.workspace > #gmailContent, .workspace > #drivePanel, .workspace > #dataPanel { width: 100%; max-width: none; box-sizing: border-box; }
.workspace > .topbar, .workspace > .toolbar { width: 100%; max-width: none; box-sizing: border-box; }

.template-signature-field { display: grid; gap: 8px; padding: 11px 12px; border: 1px solid #dce9e8; border-radius: 9px; background: #f7fcfb; }
.template-signature-field > div:first-child { display: grid; gap: 3px; }
.template-signature-field strong { color: var(--ink); font-size: 12px; }
.template-signature-field span { color: var(--muted); font-size: 11px; }
.template-signature-controls { display: flex; align-items: center; gap: 8px; }
.template-signature-controls select { min-height: 35px; flex: 1; padding: 7px 9px; border: 1px solid #dce5ec; border-radius: 7px; color: var(--ink); background: #fff; font: inherit; font-size: 12px; }
.template-signature-controls select:focus { border-color: var(--cyan); outline: 0; box-shadow: 0 0 0 3px rgba(8,127,120,.12); }
.template-signature-url { display: grid; gap: 4px; }.template-signature-url span { color: var(--muted); font-size: 10px; }.template-signature-url input { width: 100%; box-sizing: border-box; min-height: 34px; padding: 7px 9px; border: 1px solid #dce5ec; border-radius: 7px; color: var(--ink); background: #fff; font: inherit; font-size: 11px; }.template-signature-url input:focus { border-color: var(--cyan); outline: 0; box-shadow: 0 0 0 3px rgba(8,127,120,.12); }
.template-signature-note { color: var(--muted); font-size: 10px; }
.signature-cta-action { border-color: #e6c17a; color: #946216; background: #fff9eb; }
.template-builder-toolbar { display: flex; align-items: center; gap: 9px; margin-top: 2px; color: var(--cyan); font-size: 12px; font-weight: 700; }
.template-builder-toolbar .reader-action { padding: 6px 9px; font-size: 11px; }
.template-built-in-select { min-height: 32px; max-width: 180px; padding: 6px 8px; border: 1px solid #dce5ec; border-radius: 7px; color: var(--ink); background: #fff; font: inherit; font-size: 11px; }
.template-builder-hint { margin-right: auto; color: var(--muted); font-size: 10px; font-weight: 400; }
.template-visual-editor { display: block; width: 100%; min-height: 620px; border: 1px solid #dce5ec; border-radius: 8px; background: #fff; }
.template-block-builder { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; min-height: 620px; padding: 12px; border: 1px solid #dce5ec; border-radius: 8px; background: #f7fafb; }
.template-block-palette { display: grid; align-content: start; gap: 7px; padding: 10px; border: 1px solid #dce9e8; border-radius: 9px; background: #fff; }
.template-block-palette strong { color: var(--ink); font-size: 12px; }
.template-block-palette button { padding: 8px 7px; border: 1px solid #b9deda; border-radius: 7px; color: var(--cyan); background: #f0fbfa; font: inherit; font-size: 11px; cursor: pointer; }
.template-block-palette button:hover { background: #e2f5f3; }
.template-block-canvas { min-width: 0; padding: 12px; border: 1px dashed #b9deda; border-radius: 9px; background: #fff; }
.template-block-canvas-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid #edf2f3; }
.template-block-canvas-heading strong { color: var(--ink); font-size: 12px; }
.template-block-canvas-heading span { color: var(--muted); font-size: 10px; }
.template-block-list { display: grid; gap: 8px; padding-top: 10px; }
.template-block { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) 22px; gap: 8px; align-items: start; padding: 10px; border: 1px solid #dce5ec; border-radius: 8px; background: #fff; }
.template-block:hover, .template-block.is-dragging { border-color: var(--cyan); box-shadow: 0 5px 14px rgba(28,43,76,.08); }
.template-block-handle { padding-top: 4px; color: #9aa8b7; font-size: 14px; letter-spacing: -3px; cursor: grab; user-select: none; }
.template-block-content { min-width: 0; min-height: 28px; padding: 6px; border: 1px solid transparent; outline: 0; color: var(--ink); font-size: 12px; }
.template-block-content:focus { border-color: #b9deda; box-shadow: 0 0 0 3px rgba(8,127,120,.1); }
.template-block-remove { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 5px; color: #bd5f58; background: #fff5f3; cursor: pointer; }
.template-block-remove:hover { background: #ffe7e3; }
.template-builder-toolbar + .template-visual-editor { margin-bottom: 4px; }
.template-code-editor { display: grid; grid-template-columns: 48px minmax(0, 1fr); min-height: 620px; overflow: hidden; border: 1px solid #dce5ec; border-radius: 8px; background: #172033; direction: ltr; }
.template-code-editor[hidden] { display: none; }
.template-line-numbers { overflow: hidden; margin: 0; padding: 12px 10px; color: #8290a2; background: #111827; font: 12px/1.55 Consolas, 'Courier New', monospace; text-align: right; user-select: none; }
.template-code-editor textarea { min-height: 620px; margin: 0; padding: 12px 14px; border: 0; border-radius: 0; outline: 0; color: #dce7f5; background: #172033; direction: ltr; font: 12px/1.55 Consolas, 'Courier New', monospace; resize: vertical; white-space: pre; tab-size: 2; }
.template-code-editor textarea:focus { box-shadow: inset 0 0 0 2px rgba(53,184,174,.6); }
.template-preview-frame { display: block; width: 100%; min-height: 620px; border: 0; background: #fff; }
.template-live-preview:has(.template-preview-frame) { padding: 0; overflow: hidden; }
.template-live-preview:has(.template-preview-frame) .template-live-heading { padding: 12px 14px 0; }
.template-id-label { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; direction: ltr; color: var(--muted); font-size: 10px; font-weight: 400; }
.template-id-copy { padding: 3px 6px; border: 1px solid #cfe1e2; border-radius: 5px; color: var(--cyan); background: #f5fbfa; font: inherit; font-size: 10px; cursor: pointer; }
.template-id-copy:hover:not(:disabled) { border-color: var(--cyan); background: #eaf8f6; }
.template-id-copy:disabled { opacity: .5; cursor: not-allowed; }
.data-template-select { min-height: 35px; max-width: 240px; padding: 7px 10px; border: 1px solid #dce5ec; border-radius: 7px; color: var(--ink); background: #fff; font: inherit; font-size: 12px; }
.data-template-select:focus { border-color: var(--cyan); outline: 0; box-shadow: 0 0 0 3px rgba(8,127,120,.12); }
.template-item small { overflow: hidden; color: #8b98aa; direction: ltr; font-size: 9px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 700px) {
  .data-bulk-toolbar { align-items: stretch; flex-wrap: wrap; }
  .data-bulk-toolbar .reader-action { width: 100%; }
  .data-selected-count { margin-right: 0; }
  .data-inbox-row { grid-template-columns: 24px 28px minmax(0, 1fr) auto; }
  .data-inbox-row .data-row-date { grid-column: 3 / 5; grid-row: 2; text-align: right; }
  .template-builder-toolbar { align-items: stretch; flex-wrap: wrap; }
  .template-built-in-select { max-width: none; flex: 1 1 180px; }
  .template-builder-hint { flex-basis: 100%; margin-right: 0; }
  .template-block-builder { grid-template-columns: 1fr; }
  .template-block-palette { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .template-block-palette strong { grid-column: 1 / -1; }
}