:root {
  --ink: #17212b;
  --muted: #66717c;
  --line: #dde2df;
  --paper: #fbfaf6;
  --surface: #ffffff;
  --soft: #f3f4ef;
  --navy: #173b47;
  --teal: #147b75;
  --teal-dark: #0d625e;
  --mint: #dff1e9;
  --mint-ink: #176353;
  --amber: #f4e8c9;
  --amber-ink: #765719;
  --red: #b54136;
  --red-soft: #fbeae7;
  --shadow: 0 18px 50px rgba(25, 49, 55, 0.08);
  --radius: 16px;
}

* { box-sizing: border-box; }
html { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--paper); }
body { margin: 0; min-height: 100vh; }
button, input, select { font: inherit; }
a { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(20, 123, 117, .25); outline-offset: 2px; }

.app-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); background: var(--paper); }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 240px; z-index: 20; display: flex; flex-direction: column; padding: 26px 18px 20px; color: #eef6f2; background: linear-gradient(180deg, #173b47 0%, #102f39 100%); }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 10px; color: white; text-decoration: none; }
.brand > span:last-child { display: flex; flex-direction: column; line-height: 1.05; }
.brand strong { font-size: 18px; letter-spacing: -.03em; }
.brand small { margin-top: 4px; color: #a8c3bf; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; }
.brand-mark { position: relative; display: inline-grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: #e6f4ec; overflow: hidden; }
.brand-mark span { position: absolute; display: block; width: 17px; height: 7px; border-radius: 99px; background: var(--teal); transform: rotate(-35deg); }
.brand-mark span:first-child { margin: -8px 0 0 -7px; }
.brand-mark span:last-child { margin: 8px 0 0 7px; opacity: .52; }
.nav-list { display: grid; gap: 6px; margin-top: 44px; }
.nav-link { display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 0 12px; border-radius: 10px; color: #bcd0ce; font-size: 14px; font-weight: 650; text-decoration: none; }
.nav-link:hover { color: white; background: rgba(255,255,255,.06); }
.nav-link.is-active { color: white; background: rgba(255,255,255,.11); box-shadow: inset 3px 0 #63c4ae; }
.nav-icon { width: 20px; color: #81b8ad; font-size: 19px; text-align: center; }
.sidebar-foot { margin-top: auto; padding: 14px 8px 0; border-top: 1px solid rgba(255,255,255,.1); }
.secure-note { display: flex; align-items: center; gap: 9px; }
.secure-note > span:last-child { display: flex; flex-direction: column; }
.secure-note strong { font-size: 12px; }
.secure-note small { margin-top: 2px; color: #8ca9a6; font-size: 10px; }
.secure-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #62c7a7; box-shadow: 0 0 0 5px rgba(98,199,167,.12); }

.main { grid-column: 2; min-width: 0; }
.topbar { height: 72px; display: flex; align-items: center; padding: 0 34px; border-bottom: 1px solid var(--line); background: rgba(251,250,246,.92); backdrop-filter: blur(12px); }
.topbar-title { color: #3b4650; font-size: 14px; font-weight: 700; }
.admin-menu { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.avatar { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: white; background: var(--teal); font-size: 12px; font-weight: 800; }
.admin-email { color: var(--muted); font-size: 12px; }
.text-button { padding: 7px 9px; border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: 12px; font-weight: 700; }
.text-button:hover { color: var(--ink); }
.theme-button { display: grid; width: 32px; height: 32px; margin-right: 3px; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: var(--surface); cursor: pointer; }
.theme-button:hover { color: var(--ink); }
.theme-light-icon { display: none; }
[data-theme="dark"] .theme-dark-icon { display: none; }
[data-theme="dark"] .theme-light-icon { display: inline; }
.menu-button { display: none; margin-right: 12px; border: 0; background: transparent; font-size: 22px; }
.page { width: min(1240px, 100%); margin: 0 auto; padding: 40px 42px 70px; }

.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 28px; }
.page-heading.compact { margin-bottom: 32px; }
.page-heading h1 { margin: 7px 0 8px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(30px, 3.4vw, 46px); font-weight: 500; letter-spacing: -.035em; line-height: 1.05; }
.page-heading p { max-width: 660px; margin: 0; color: var(--muted); font-size: 15px; }
.eyebrow { display: flex; align-items: center; gap: 8px; color: var(--teal-dark); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow span { width: 18px; height: 2px; background: #54aa94; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 42px; padding: 0 17px; border: 1px solid transparent; border-radius: 9px; font-size: 13px; font-weight: 750; text-decoration: none; cursor: pointer; }
.button-primary { color: white; background: var(--teal); box-shadow: 0 8px 20px rgba(20,123,117,.18); }
.button-primary:hover { background: var(--teal-dark); }
.button-secondary { color: var(--navy); border-color: #cfd7d3; background: white; }
.button:disabled { opacity: .48; box-shadow: none; cursor: not-allowed; }
.button-wide { width: 100%; min-height: 48px; }

.mode-banner { display: flex; align-items: center; gap: 14px; padding: 17px 20px; border: 1px solid #cfe5da; border-radius: 13px; background: linear-gradient(90deg, #edf7f0, #f7faf5); }
.mode-banner > div:nth-child(2) { min-width: 0; }
.mode-banner strong { font-size: 14px; }
.mode-banner p { margin: 3px 0 0; color: #587069; font-size: 12px; }
.mode-icon { display: grid; flex: 0 0 auto; width: 35px; height: 35px; place-items: center; border-radius: 10px; color: var(--mint-ink); background: #d6eee2; font-size: 20px; }
.mode-badge { margin-left: auto; padding: 6px 9px; border-radius: 99px; color: var(--mint-ink); background: #d8ede2; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.common-test-panel { margin-bottom: 18px; }
.common-test-form { display: grid; grid-template-columns: minmax(190px, 240px) auto 1fr; align-items: end; gap: 12px; }
.common-conta-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.common-test-form label { display: grid; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 800; }
.common-test-form input { height: 42px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--paper); }
.common-test-form > p { align-self: center; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0 38px; }
.metric-card { min-height: 124px; padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.72); }
.metric-label { display: block; color: var(--muted); font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.metric-card > strong { display: block; margin-top: 12px; font-family: Georgia, serif; font-size: 29px; font-weight: 500; }
.metric-card > strong.metric-word { font-family: inherit; font-size: 21px; font-weight: 750; }
.metric-card small { display: block; margin-top: 5px; color: #7d878d; font-size: 11px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 13px; }
.section-heading h2, .activity-panel h2 { margin: 0; font-family: Georgia, serif; font-size: 23px; font-weight: 500; }
.section-heading p, .activity-panel header p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }

.company-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.company-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 10px 30px rgba(25,49,55,.035); overflow: hidden; }
.company-head { display: flex; align-items: center; gap: 12px; padding: 20px 20px 17px; }
.company-monogram { display: grid; flex: 0 0 auto; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #1b5960, #183d49); font-family: Georgia, serif; font-size: 19px; }
.company-head > div:nth-child(2) { min-width: 0; }
.company-head h3 { margin: 0; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.company-head p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.status-pill { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 99px; font-size: 9px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.company-head .status-pill { margin-left: auto; }
.status-test { color: var(--amber-ink); background: var(--amber); }
.status-safe { color: var(--mint-ink); background: var(--mint); }
.connection-list { margin: 0 20px; border: 1px solid #e5e8e5; border-radius: 11px; background: #fafbf8; }
.connection-list > div { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 9px; min-height: 58px; padding: 9px 12px; }
.connection-list > div + div { border-top: 1px solid #e5e8e5; }
.connection-list > div > span:nth-child(2) { display: flex; flex-direction: column; }
.connection-list strong { font-size: 12px; }
.connection-list small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.connection-mark { position: relative; display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; background: #dce7e5; }
.connection-mark::after { content: "Z"; color: #56746f; font-size: 10px; font-weight: 900; }
.connection-mark.conta::after { content: "C"; }
.connection-mark.is-ready { background: #d9eee4; }
.connection-mark.is-ready::after { color: var(--mint-ink); }
.connection-state { color: var(--teal); font-size: 10px; font-weight: 750; }
.mapping-progress { padding: 17px 20px; }
.mapping-progress > div:first-child { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; }
.mapping-progress strong { color: var(--ink); }
.progress-track { height: 5px; margin-top: 8px; border-radius: 99px; background: #e7eae7; overflow: hidden; }
.progress-track span { display: block; width: var(--progress); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2f8f81, #68bfa6); }
.company-foot { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 20px; border-top: 1px solid #eaedeb; background: #fcfcfa; color: var(--muted); font-size: 10px; }
.company-foot-actions { display: inline-flex; align-items: center; gap: 12px; }
.clock { margin-right: 4px; }
.card-link { color: var(--teal-dark); font-size: 11px; font-weight: 800; text-decoration: none; }
.card-link:hover { text-decoration: underline; }
.activity-panel { margin-top: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.activity-panel header { padding: 18px 20px 15px; border-bottom: 1px solid #e7eae7; }
.empty-state { display: flex; align-items: center; justify-content: center; gap: 13px; min-height: 128px; padding: 24px; text-align: left; }
.empty-icon { display: grid; flex: 0 0 auto; width: 40px; height: 40px; place-items: center; border-radius: 12px; color: #55716c; background: #edf2ef; font-size: 20px; }
.empty-state strong { font-size: 13px; }
.empty-state p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }

.security-grid { display: grid; gap: 12px; }
.security-card { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 15px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.security-symbol { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 11px; color: var(--teal-dark); background: var(--mint); font-size: 11px; font-weight: 850; }
.security-card h2 { margin: 0; font-size: 14px; }
.security-card p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.error-page { display: grid; min-height: 60vh; place-items: center; align-content: center; text-align: center; }
.error-page h1 { margin: 16px 0 5px; font-family: Georgia, serif; font-size: 34px; font-weight: 500; }
.error-page p { margin: 0 0 20px; color: var(--muted); }

.back-link { display: inline-flex; margin-bottom: 22px; color: var(--muted); font-size: 11px; font-weight: 750; text-decoration: none; }
.back-link:hover { color: var(--teal); }
.company-page-heading { align-items: center; margin-bottom: 22px; }
.large-pill { min-height: 31px; padding-inline: 12px; }
.section-tabs { position: sticky; top: 0; z-index: 5; display: flex; gap: 3px; margin: 19px 0; padding: 5px; border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(12px); overflow-x: auto; }
.section-tabs a { padding: 9px 12px; border-radius: 7px; color: var(--muted); font-size: 11px; font-weight: 750; text-decoration: none; white-space: nowrap; }
.section-tabs a:hover { color: var(--ink); background: var(--soft); }
.settings-panel { margin-top: 15px; padding: 23px; scroll-margin-top: 65px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 10px 32px rgba(25,49,55,.035); }
.narrow-panel { max-width: 780px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.panel-heading h2 { margin: 0; font-family: Georgia, serif; font-size: 23px; font-weight: 500; }
.panel-heading p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.panel-number { display: grid; flex: 0 0 auto; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); font-size: 9px; font-weight: 850; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.settings-form label, .integration-card form > label { display: grid; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 750; }
.settings-form input, .settings-form select, .integration-card input, .integration-card select { width: 100%; height: 43px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--paper); }
.settings-form select, .integration-card select { appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 15px) 18px, calc(100% - 10px) 18px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.settings-form input:focus, .settings-form select:focus, .integration-card input:focus, .integration-card select:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(20,123,117,.1); outline: 0; }
.panel-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--line); }
.integration-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.integration-card { position: relative; padding: 17px; border: 1px solid var(--line); border-radius: 13px; background: var(--paper); overflow: hidden; }
.integration-card::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 2px; background: #4e9b8a; }
.sandbox-card::before { background: #b18a3e; }
.production-card::before { background: #a6544b; }
.integration-card header { display: grid; grid-template-columns: 35px 1fr auto; align-items: center; gap: 9px; margin-bottom: 17px; }
.integration-card header > div { min-width: 0; }
.integration-card h3 { margin: 0; font-size: 12px; }
.integration-card header p { margin: 3px 0 0; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.service-logo { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; color: #dff4ed; background: #1c615d; font-size: 12px; font-weight: 900; }
.conta-logo { color: #fff1cf; background: #8a6728; }
.status-muted { color: var(--muted); background: var(--soft); }
.integration-card form { display: grid; gap: 12px; }
.integration-actions { display: flex; justify-content: flex-end; }
.integration-actions .button { min-height: 36px; }
.test-form { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line); }
.test-form .card-link { width: 100%; padding: 0; border: 0; text-align: left; background: transparent; cursor: pointer; }
.connection-message { margin: 10px 0 0; padding: 8px; border-radius: 7px; font-size: 9px; line-height: 1.45; }
.connection-message.is-ok { color: var(--mint-ink); background: var(--mint); }
.connection-message.is-error { color: #a84d43; background: var(--red-soft); }
.mapping-list { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.mapping-list-head, .mapping-row { display: grid; grid-template-columns: minmax(230px, 1.35fr) minmax(110px, .55fr) minmax(150px, .75fr); align-items: center; gap: 12px; }
.mapping-list-head { min-height: 38px; padding: 0 13px; color: var(--muted); background: var(--soft); font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.mapping-row { min-height: 65px; padding: 10px 13px; background: var(--surface); }
.mapping-row + .mapping-row { border-top: 1px solid var(--line); }
.mapping-row input, .mapping-row select { height: 39px; }
.mapping-name { display: flex; flex-direction: column; }
.mapping-name strong { color: var(--ink); font-size: 11px; }
.mapping-name small { margin-top: 3px; color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .04em; }
.form-note { display: flex; align-items: flex-start; gap: 8px; margin: 13px 0 0; color: var(--muted); font-size: 10px; }
.form-note > span { display: grid; flex: 0 0 auto; width: 19px; height: 19px; place-items: center; border-radius: 50%; color: var(--teal); background: var(--mint); font-size: 9px; font-weight: 900; }
.automation-row { display: grid; grid-template-columns: 100px 1fr auto; align-items: center; gap: 18px; padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.automation-time { display: flex; align-items: flex-start; flex-direction: column; }
.automation-time strong { font-family: Georgia, serif; font-size: 26px; font-weight: 500; }
.automation-time small { color: var(--muted); font-size: 8px; }
.automation-row h3 { margin: 0; font-size: 12px; }
.automation-row p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.automation-toggle-form { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.automation-toggle-form .button { min-height: 36px; padding-inline: 13px; }
.switch { position: relative; display: inline-flex; width: 42px; height: 24px; }
.switch input { opacity: 0; position: absolute; }
.switch > span { width: 100%; border-radius: 99px; background: var(--line); }
.switch > span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.switch input:checked + span { background: var(--teal); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch.is-disabled { opacity: .55; }
.bank-note { display: flex; align-items: flex-start; gap: 11px; margin-top: 12px; padding: 14px 17px; border: 1px dashed var(--line); border-radius: 11px; }
.bank-note > span { color: var(--teal); }
.bank-note strong { font-size: 11px; }
.bank-note p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.dry-run-form { display: grid; grid-template-columns: minmax(190px, 240px) auto 1fr; align-items: end; gap: 12px; margin-top: 18px; padding: 17px; border: 1px solid color-mix(in srgb, var(--teal) 35%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--mint) 40%, var(--paper)); }
.dry-run-form label { display: grid; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 800; }
.dry-run-form input { height: 42px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--surface); }
.dry-run-form > p { align-self: center; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.recent-runs { margin-top: 23px; padding-top: 19px; border-top: 1px solid var(--line); }
.recent-runs > h3 { margin: 0 0 10px; font-size: 12px; }
.no-runs { margin: 0; color: var(--muted); font-size: 10px; }
.run-list { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.run-list a { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 11px; min-height: 57px; padding: 9px 13px; text-decoration: none; background: var(--paper); }
.run-list a + a { border-top: 1px solid var(--line); }
.run-list a:hover { background: var(--soft); }
.run-list a > span:nth-child(2) { display: flex; flex-direction: column; }
.run-list strong { font-size: 10px; }
.run-list small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.run-status { width: 8px; height: 8px; border-radius: 50%; background: var(--amber-ink); }
.run-status.status-review, .run-status.status-completed { background: var(--teal); }
.run-status.status-blocked, .run-status.status-failed { background: var(--red); }
.status-error { color: #f0a49a; background: var(--red-soft); }
.run-heading { align-items: center; }
.run-heading h1 { max-width: 850px; font-size: clamp(27px, 3vw, 39px); }
.run-summary { margin-bottom: 18px; }
.run-summary .metric-word { font-size: 17px; }
.run-error { margin-top: 18px; }
.result-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, .7fr); gap: 14px; }
.checks-panel, .result-note { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.checks-panel .panel-heading { margin-bottom: 12px; }
.check-list { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.check-row { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 10px; min-height: 58px; padding: 9px 12px; }
.check-row + .check-row { border-top: 1px solid var(--line); }
.check-symbol { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; font-size: 11px; font-weight: 900; }
.check-row > span:last-child { display: flex; flex-direction: column; }
.check-row strong { font-size: 10px; }
.check-row small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.check-pass .check-symbol { color: var(--mint-ink); background: var(--mint); }
.check-warning .check-symbol { color: var(--amber-ink); background: var(--amber); }
.check-block .check-symbol { color: #ee968b; background: var(--red-soft); }
.result-note { display: flex; align-items: flex-start; flex-direction: column; }
.result-note-icon { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 11px; color: var(--teal); background: var(--mint); }
.result-note h2 { margin: 18px 0 7px; font-family: Georgia, serif; font-size: 20px; font-weight: 500; }
.result-note p { margin: 0 0 20px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.result-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.sandbox-panel { margin-top: 14px; }
.submission-list { display: grid; gap: 8px; }
.submission-row { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; min-height: 56px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.submission-row > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.submission-row strong { font-size: 11px; }
.submission-row small { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.sandbox-submit-form { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding: 16px; border: 1px solid color-mix(in srgb, var(--teal) 35%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--mint) 32%, var(--paper)); }
.sandbox-submit-form strong, .sandbox-empty strong { font-size: 12px; }
.sandbox-submit-form p, .sandbox-empty p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.sandbox-empty { padding: 15px; border: 1px dashed var(--line); border-radius: 11px; background: var(--paper); }
.lines-panel { margin-top: 14px; }
.voucher-lines { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.voucher-line-head, .voucher-line { display: grid; grid-template-columns: 75px minmax(250px, 1fr) 70px minmax(100px, .6fr) 110px; align-items: center; gap: 10px; }
.voucher-line-head { min-height: 36px; padding: 0 12px; color: var(--muted); background: var(--soft); font-size: 8px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.voucher-line { min-height: 56px; padding: 8px 12px; font-size: 9px; }
.voucher-line + .voucher-line { border-top: 1px solid var(--line); }
.voucher-line > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.voucher-line strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.voucher-line small { overflow: hidden; margin-top: 3px; color: var(--muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.side-pill { display: inline-flex; min-height: 20px; align-items: center; padding: 0 6px; border-radius: 99px; font-size: 7px; font-weight: 900; letter-spacing: .05em; }
.side-debit { color: #82cbbb; background: #203d35; }
.side-credit { color: #d7bd7d; background: #40371f; }
.account-value { font-weight: 800; }
.amount-value { text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; }
.alert-success { color: var(--mint-ink); border: 1px solid color-mix(in srgb, var(--mint-ink) 28%, transparent); background: var(--mint); }
.alert-success > span { color: white; background: var(--teal); }

/* Mørk modus er standard. Lys modus kan velges fra toppfeltet. */
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e7efec;
  --muted: #91a19c;
  --line: #31423d;
  --paper: #101713;
  --surface: #18221e;
  --soft: #202c27;
  --navy: #d9e9e4;
  --teal: #58b7a2;
  --teal-dark: #73c9b5;
  --mint: #203e34;
  --mint-ink: #8bd8bd;
  --amber: #40371f;
  --amber-ink: #e7c672;
  --red: #d96a5d;
  --red-soft: #3e2422;
  --shadow: 0 18px 55px rgba(0,0,0,.25);
}
html[data-theme="dark"], html[data-theme="dark"] body { background: var(--paper); }
html[data-theme="dark"] .sidebar { background: linear-gradient(180deg, #112c34 0%, #0b2026 100%); }
html[data-theme="dark"] .topbar { background: rgba(16,23,19,.9); }
html[data-theme="dark"] .mode-banner { border-color: #2d5144; background: linear-gradient(90deg, #193028, #182720); }
html[data-theme="dark"] .mode-icon, html[data-theme="dark"] .mode-badge { background: #254438; }
html[data-theme="dark"] .metric-card { background: rgba(24,34,30,.78); }
html[data-theme="dark"] .company-card,
html[data-theme="dark"] .activity-panel,
html[data-theme="dark"] .security-card { background: var(--surface); }
html[data-theme="dark"] .connection-list { border-color: var(--line); background: #141d19; }
html[data-theme="dark"] .connection-list > div + div,
html[data-theme="dark"] .company-foot,
html[data-theme="dark"] .activity-panel header { border-color: var(--line); }
html[data-theme="dark"] .company-foot { background: #141d19; }
html[data-theme="dark"] .progress-track { background: #2d3a35; }
html[data-theme="dark"] .empty-icon { color: #90aca4; background: #24312c; }
html[data-theme="dark"] .login-page { background: var(--paper); }
html[data-theme="dark"] .login-form input { color: var(--ink); border-color: var(--line); background: var(--surface); }
html[data-theme="dark"] .login-assurance { border-color: var(--line); }
html[data-theme="dark"] .button-secondary { color: var(--ink); border-color: var(--line); background: var(--surface); }
html[data-theme="dark"] .story-card { background: rgba(16,32,29,.42); }
html[data-theme="dark"] .integration-card { background: #131c18; }
html[data-theme="dark"] .connection-message.is-error { color: #ef9488; }

html[data-theme="light"] { color-scheme: light; }

.login-page { background: #f7f7f2; }
.login-wrap { display: grid; grid-template-columns: minmax(440px, 48%) 1fr; min-height: 100vh; }
.login-panel { display: flex; flex-direction: column; justify-content: center; width: min(480px, 100%); margin: 0 auto; padding: 44px 54px; }
.login-brand { position: absolute; top: 35px; display: flex; align-items: center; gap: 10px; }
.login-brand > span:last-child { display: flex; flex-direction: column; line-height: 1; }
.login-brand strong { font-size: 17px; }
.login-brand small { margin-top: 4px; color: var(--muted); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.brand-mark-large { width: 38px; height: 38px; }
.login-copy h1 { margin: 9px 0 9px; font-family: Georgia, serif; font-size: 42px; font-weight: 500; letter-spacing: -.035em; }
.login-copy > p { margin: 0 0 28px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.login-form { display: grid; gap: 17px; }
.login-form label { display: grid; gap: 7px; color: #364149; font-size: 11px; font-weight: 750; }
.login-form label > small { color: var(--muted); font-size: 10px; font-weight: 500; }
.login-form input { width: 100%; height: 46px; padding: 0 13px; border: 1px solid #cfd6d3; border-radius: 9px; color: var(--ink); background: white; font-size: 14px; transition: border .15s, box-shadow .15s; }
.login-form input:focus { border-color: #5b9f92; box-shadow: 0 0 0 4px rgba(20,123,117,.08); outline: 0; }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 58px; }
.reveal-button { position: absolute; inset: 0 7px 0 auto; border: 0; color: var(--teal-dark); background: transparent; font-size: 10px; font-weight: 800; cursor: pointer; }
.login-assurance { display: flex; align-items: center; gap: 10px; margin-top: 24px; padding-top: 19px; border-top: 1px solid var(--line); }
.login-assurance > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: var(--mint-ink); background: var(--mint); font-size: 12px; font-weight: 900; }
.login-assurance p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.login-assurance strong { color: #3e4e50; }
.alert { display: flex; gap: 10px; margin: 0 0 18px; padding: 12px; border-radius: 9px; }
.alert > span { display: grid; flex: 0 0 auto; width: 22px; height: 22px; place-items: center; border-radius: 50%; font-size: 11px; font-weight: 900; }
.alert strong { font-size: 11px; }
.alert p { margin: 2px 0 0; font-size: 10px; }
.alert-error { color: #7b2d27; border: 1px solid #efc9c4; background: var(--red-soft); }
.alert-error > span { color: white; background: var(--red); }
.login-story { position: relative; display: grid; place-items: center; overflow: hidden; background: linear-gradient(150deg, #173f49, #0f2c35 72%); }
.login-story::before { content: ""; position: absolute; inset: 7% 9%; opacity: .18; background-image: radial-gradient(#bdd8cf 1px, transparent 1px); background-size: 23px 23px; mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent); }
.story-glow { position: absolute; width: 430px; height: 430px; border-radius: 50%; background: rgba(65,158,137,.22); filter: blur(70px); }
.story-card { position: absolute; z-index: 2; border: 1px solid rgba(255,255,255,.2); color: white; background: rgba(243,249,245,.11); box-shadow: 0 30px 80px rgba(0,0,0,.22); backdrop-filter: blur(14px); }
.story-card-main { width: min(440px, 70%); padding: 28px; border-radius: 19px; transform: rotate(-2deg); }
.story-card-head { display: flex; align-items: center; justify-content: space-between; }
.story-card-head small { color: #b5cbc7; }
.story-card h2 { margin: 27px 0 7px; font-family: Georgia, serif; font-size: 30px; font-weight: 500; }
.story-card p { margin: 0; color: #bcd0cc; font-size: 12px; }
.story-lines { display: grid; gap: 9px; margin: 27px 0; }
.story-lines span { display: block; width: var(--w); height: 7px; border-radius: 99px; background: rgba(235,246,241,.22); }
.story-total { display: flex; align-items: center; justify-content: space-between; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.15); color: #d4e4df; font-size: 12px; }
.story-total strong { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; color: #0d5149; background: #8ed7bd; }
.story-card-small { right: 8%; bottom: 17%; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; min-width: 190px; padding: 16px; border-radius: 13px; transform: rotate(3deg); }
.story-card-small .secure-dot { grid-row: 1 / 3; align-self: center; }
.story-card-small strong { font-size: 11px; }
.story-card-small small { color: #a9c2bd; font-size: 9px; }
.setup-wrap { display: grid; min-height: 100vh; padding: 40px 22px; place-items: center; background: radial-gradient(circle at 75% 15%, rgba(66,151,130,.12), transparent 38%), var(--paper); }
.setup-panel { position: relative; width: min(900px, 100%); padding: 70px 44px 36px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
.setup-brand { top: 24px; left: 44px; }
.setup-panel > h1 { margin: 8px 0 8px; font-family: Georgia, serif; font-size: 38px; font-weight: 500; letter-spacing: -.035em; }
.setup-intro { margin: 0 0 24px; color: var(--muted); font-size: 12px; }
.setup-columns { display: grid; grid-template-columns: 1fr 300px; gap: 30px; margin-bottom: 22px; }
.setup-fields { display: grid; align-content: start; gap: 16px; padding-top: 12px; }
.setup-form label { display: grid; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 800; }
.setup-form label small { font-size: 8px; font-weight: 500; }
.setup-form input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--paper); }
.setup-form input:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(20,123,117,.1); outline: 0; }
.qr-step { position: relative; padding: 17px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); text-align: center; }
.qr-step .step-number { position: absolute; top: 12px; left: 12px; display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: var(--mint-ink); background: var(--mint); font-size: 9px; font-weight: 900; }
.qr-step h2 { margin: 1px 0 4px; font-size: 12px; }
.qr-step > p { margin: 0 auto 12px; max-width: 220px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.qr-step img { display: block; width: 190px; height: 190px; margin: 0 auto 12px; padding: 7px; border-radius: 10px; background: white; image-rendering: crisp-edges; }
.qr-step label { text-align: left; }
.scrim { display: none; }

@media (max-width: 920px) {
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .company-grid { grid-template-columns: 1fr; }
  .login-wrap { grid-template-columns: 1fr; }
  .login-story { display: none; }
  .login-panel { min-height: 100vh; }
  .integration-grid { grid-template-columns: 1fr; }
  .result-grid { grid-template-columns: 1fr; }
  .voucher-lines { overflow-x: auto; }
  .voucher-line-head, .voucher-line { min-width: 720px; }
  .setup-columns { grid-template-columns: 1fr; }
  .qr-step { max-width: 330px; }
}

@media (max-width: 720px) {
  .app-shell { display: block; }
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; }
  .menu-open .sidebar { transform: translateX(0); }
  .scrim { position: fixed; inset: 0; z-index: 15; background: rgba(10,25,30,.45); }
  .menu-open .scrim { display: block; }
  .main { width: 100%; }
  .menu-button { display: inline-flex; }
  .topbar { padding: 0 18px; }
  .admin-email { display: none; }
  .page { padding: 29px 18px 55px; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .page-heading .button { width: 100%; }
  .summary-grid { grid-template-columns: 1fr 1fr; }
  .common-test-form { grid-template-columns: 1fr auto; }
  .common-test-form > p { grid-column: 1 / -1; }
  .mode-badge { display: none; }
  .section-heading { align-items: flex-start; gap: 13px; flex-direction: column; }
  .section-heading .button { width: 100%; }
  .security-card { grid-template-columns: 42px 1fr; }
  .security-card .status-pill { grid-column: 2; justify-self: start; }
  .login-panel { padding: 100px 25px 35px; }
  .login-brand { top: 27px; }
  .login-copy h1 { font-size: 35px; }
  .form-grid { grid-template-columns: 1fr; }
  .mapping-list-head { display: none; }
  .mapping-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .mapping-name { grid-column: 1 / -1; }
  .automation-row { grid-template-columns: 82px 1fr auto; }
  .automation-toggle-form { grid-column: 1 / -1; justify-content: flex-start; }
  .dry-run-form { grid-template-columns: 1fr auto; }
  .dry-run-form > p { grid-column: 1 / -1; }
  .setup-panel { padding: 75px 24px 28px; }
  .setup-brand { left: 24px; }
  .setup-panel > h1 { font-size: 31px; }
}

@media (max-width: 420px) {
  .summary-grid { grid-template-columns: 1fr; }
  .company-head { padding-inline: 15px; }
  .connection-list { margin-inline: 15px; }
  .mapping-progress, .company-foot { padding-inline: 15px; }
  .settings-panel { padding: 17px; }
  .mapping-row { grid-template-columns: 1fr; }
  .mapping-name { grid-column: 1; }
  .automation-row { grid-template-columns: 1fr auto; }
  .automation-time { grid-column: 1 / -1; }
  .automation-toggle-form { grid-column: 1 / -1; }
  .dry-run-form { grid-template-columns: 1fr; }
  .dry-run-form .button { width: 100%; }
  .dry-run-form > p { grid-column: 1; }
  .common-test-form { grid-template-columns: 1fr; }
  .common-test-form .button { width: 100%; }
  .common-test-form > p { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}