.settings-main {
  background:
    radial-gradient(circle at 93% 8%, rgba(87,114,91,.1), transparent 26%),
    radial-gradient(circle at 66% 36%, rgba(217,133,97,.06), transparent 25%);
}
.secure-state { display:inline-flex; align-items:center; gap:7px; min-height:32px; padding:0 10px; border:1px solid #b9c9b9; border-radius:8px; background:#edf4ed; color:#4f6953; font-size:11px; font-weight:700; white-space:nowrap; }
.secure-state svg { width:16px; height:16px; }
.settings-status li { grid-template-columns:16px 1fr auto auto; }

.settings-subnav { display:flex; align-items:center; gap:4px; margin:12px 0; padding:5px; overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:rgba(247,239,228,.8); box-shadow:var(--shadow); scrollbar-width:none; }
.settings-subnav::-webkit-scrollbar { display:none; }
.settings-subnav a { display:flex; align-items:center; justify-content:center; gap:8px; min-height:39px; padding:0 15px; border-radius:8px; color:#655d54; font-size:12px; font-weight:750; white-space:nowrap; }
.settings-subnav a:hover { color:#8c5339; background:rgba(255,255,255,.58); }
.settings-subnav a.active { color:#fff; background:linear-gradient(135deg,#5c7660,#46624e); box-shadow:0 3px 11px rgba(53,82,61,.2); }
.settings-subnav svg { width:17px; height:17px; }
.settings-subnav b { display:grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border-radius:12px; background:rgba(197,112,75,.14); color:#a05b3d; font-size:9px; }
.settings-subnav a.active b { background:rgba(255,255,255,.18); color:#fff; }

.settings-hero { display:grid; grid-template-columns:58px minmax(0,1fr) auto; align-items:center; gap:16px; min-height:126px; padding:20px 22px; border:1px solid #d6c5b2; border-radius:14px; background:linear-gradient(120deg,rgba(255,251,246,.92),rgba(243,237,224,.82)); box-shadow:0 8px 26px rgba(74,55,34,.07); }
.hero-icon { display:grid; place-items:center; width:54px; height:54px; border-radius:15px; background:#f0dfcd; color:#a76243; }
.hero-icon svg { width:28px; height:28px; }
.eyebrow { color:#9d6449; font-size:9.5px; font-weight:800; letter-spacing:1.2px; }
.settings-hero h2,.integration-hero h2 { margin:4px 0 4px; color:#443930; font-size:19px; line-height:1.22; }
.settings-hero p,.integration-hero p { max-width:790px; margin:0; color:#6c645c; font-size:12.5px; line-height:1.55; }
.hero-action { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:40px; padding:0 15px; border:1px solid #59735e; border-radius:8px; background:#56715c; color:#fff; font-size:12px; font-weight:750; white-space:nowrap; }
.hero-action:hover { filter:brightness(1.07); }
.hero-action span { font-size:17px; }

.settings-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:11px 0; }
.settings-kpis article { min-height:100px; padding:14px 16px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.48); box-shadow:var(--shadow); }
.settings-kpis article > span { display:flex; align-items:center; gap:7px; color:#6f655c; font-size:10px; font-weight:750; text-transform:uppercase; letter-spacing:.3px; }
.settings-kpis svg { width:17px; height:17px; color:#ae6849; }
.settings-kpis strong { display:block; margin-top:7px; color:#513b2e; font-size:24px; line-height:1; }
.settings-kpis strong.status-word { color:#60794f; font-size:21px; }
.settings-kpis small { display:block; margin-top:7px; color:#7d746b; font-size:10px; }

.settings-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(315px,.85fr); gap:11px; }
.settings-card { min-width:0; padding:18px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.5); box-shadow:var(--shadow); }
.settings-card > header { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding-bottom:13px; border-bottom:1px solid #eadfd3; }
.settings-card h2,.data-flow-panel h2 { margin:0; color:#4d4036; font-size:15px; line-height:1.25; }
.settings-card header p,.data-flow-panel header p { margin:4px 0 0; color:#7a7168; font-size:10.5px; line-height:1.45; }
.complete-badge,.ai-badge { display:inline-flex; align-items:center; gap:5px; padding:5px 8px; border-radius:10px; background:#e9f1e7; color:#577052; font-size:9px; font-weight:750; white-space:nowrap; }
.complete-badge svg,.ai-badge svg { width:13px; height:13px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; margin-top:14px; }
.form-grid label { display:flex; flex-direction:column; gap:5px; min-width:0; }
.form-grid label.wide { grid-column:1/-1; }
.form-grid label > span { color:#655d55; font-size:10px; font-weight:700; }
.form-grid input,.form-grid select { width:100%; height:39px; border:1px solid #d9ccbd; border-radius:8px; padding:0 10px; outline:none; background:#fffdf9; color:#4f4942; font-size:11.5px; }
.form-grid input:focus,.form-grid select:focus { border-color:#8ca08d; box-shadow:0 0 0 3px rgba(91,118,96,.1); }
.card-actions { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:16px; padding-top:14px; border-top:1px solid #eadfd3; }
.card-actions small { color:#8b8178; font-size:9px; }
.primary-button,.secondary-button,.text-button { border-radius:8px; font-weight:750; cursor:pointer; }
.primary-button { min-height:38px; padding:0 14px; border:1px solid #536e59; background:#56715c; color:#fff; font-size:11.5px; }
.primary-button:hover { filter:brightness(1.07); }
.text-button { min-height:31px; padding:0 9px; border:1px solid #d6c6b6; background:#fffaf5; color:#95573d; font-size:10px; }
.secondary-button { width:100%; min-height:37px; margin-top:13px; border:1px solid #cfc2b5; background:#fffaf5; color:#72513e; font-size:10.5px; }
.secondary-button span { margin-left:8px; }

.toggle-list { display:grid; margin-top:5px; }
.toggle-list label { display:grid; grid-template-columns:minmax(0,1fr) 43px; align-items:center; gap:15px; min-height:68px; border-bottom:1px solid #eee4d9; cursor:pointer; }
.toggle-list label:last-child { border-bottom:0; }
.toggle-list span > b,.toggle-list span > small { display:block; }
.toggle-list span > b { color:#4e463f; font-size:11.5px; }
.toggle-list span > small { margin-top:3px; color:#81786f; font-size:9.5px; line-height:1.4; }
.toggle-list label { position:relative; }
.switch-input { position:absolute; opacity:0; pointer-events:none; }
.toggle-list i { position:relative; width:42px; height:23px; border-radius:14px; background:#bbb9b3; transition:.18s; }
.toggle-list i::after { content:""; position:absolute; top:3px; left:3px; width:17px; height:17px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.15); transition:.18s; }
.switch-input:checked + i { background:#5d7a62; }
.switch-input:checked + i::after { transform:translateX(19px); }
.switch-input:focus-visible + i { outline:3px solid rgba(217,133,97,.25); }

.staff-management-link { grid-column:1/-1; display:grid; grid-template-columns:52px minmax(0,1fr) auto; align-items:center; gap:14px; min-height:104px; color:#3f493b; background:linear-gradient(115deg,#f3f7ef,#fffaf3); border-color:#becab8; transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease; }
.staff-management-link:hover { border-color:#8da084; box-shadow:0 12px 30px rgba(70,88,61,.11); transform:translateY(-1px); }
.staff-management-link:focus-visible { outline:3px solid rgba(89,115,94,.24); outline-offset:3px; }
.staff-management-icon { display:grid; width:52px; height:52px; place-items:center; border-radius:15px; color:#fff; background:linear-gradient(145deg,#657d62,#465f4b); box-shadow:0 8px 18px rgba(67,91,70,.18); }
.staff-management-icon svg { width:25px; height:25px; }
.staff-management-link>span:nth-child(2) { min-width:0; }
.staff-management-link small,.staff-management-link strong,.staff-management-link em { display:block; }
.staff-management-link small { color:#9b6045; font-size:10px; font-weight:800; letter-spacing:1.1px; }
.staff-management-link strong { margin-top:4px; color:#3f443c; font-size:16px; line-height:1.25; }
.staff-management-link em { margin-top:5px; color:#716e68; font-size:12px; font-style:normal; line-height:1.45; }
.staff-management-link>b { display:inline-flex; min-height:42px; align-items:center; justify-content:center; gap:9px; padding:0 14px; border-radius:9px; color:#fff; background:#58725c; font-size:11.5px; white-space:nowrap; }
.staff-management-link>b span { font-size:17px; }

.automation-card { grid-column:1/-1; }
.ai-badge { background:#edecd9; color:#6b6e3e; }
.automation-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:14px; }
.automation-list > span { display:grid; grid-template-columns:27px minmax(0,1fr); align-items:center; column-gap:8px; min-height:61px; padding:8px 10px; border:1px solid #e2d7cb; border-radius:9px; background:#fffaf5; }
.automation-list svg { grid-row:1/3; display:block; width:24px; height:24px; padding:5px; border-radius:50%; background:#e7efe4; color:#5e7658; }
.automation-list b { align-self:end; color:#514840; font-size:10.5px; }
.automation-list small { align-self:start; color:#847a70; font-size:8.5px; }
.integration-cta { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:12px; margin-top:13px; padding:12px; border:1px solid #c8d4c8; border-radius:10px; background:linear-gradient(110deg,#f1f6f0,#faf7f1); }
.integration-cta > span { display:grid; place-items:center; width:42px; height:42px; border-radius:11px; background:#5a765f; color:#fff; }
.integration-cta svg { width:22px; height:22px; }
.integration-cta strong,.integration-cta small { display:block; }
.integration-cta strong { color:#475147; font-size:11.5px; }
.integration-cta small { margin-top:3px; color:#72766f; font-size:9.5px; }
.integration-cta > b { color:#87563f; font-size:10.5px; white-space:nowrap; }

/* Koppelingen */
.integration-hero { display:grid; grid-template-columns:minmax(0,1.3fr) 310px 176px; align-items:center; gap:18px; min-height:157px; padding:20px 22px; border:1px solid #b9c7b9; border-radius:14px; background:linear-gradient(120deg,#f9fbf6,#eef2e8); box-shadow:0 8px 28px rgba(66,84,58,.08); }
.hero-statuses { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.hero-statuses span { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:12px; background:rgba(255,255,255,.72); color:#667064; font-size:9px; font-weight:700; }
.hero-statuses i,.section-heading > span i,.connection-state.connected i { width:7px; height:7px; border-radius:50%; background:#6e8c68; box-shadow:0 0 0 3px rgba(110,140,104,.14); }
.hero-statuses .connecting-status i,.section-heading > span.connecting-label i,.connection-state.connecting-state i { background:#8d68be; box-shadow:0 0 0 3px rgba(141,104,190,.14); }
.hub-visual { display:grid; grid-template-columns:1fr 76px 1fr; grid-template-rows:1fr 1fr; align-items:center; gap:8px 12px; min-height:110px; }
.hub-visual::before,.hub-visual::after { content:""; position:absolute; }
.hub-visual strong { grid-column:2; grid-row:1/3; display:grid; place-items:center; align-content:center; width:76px; height:76px; border-radius:50%; background:linear-gradient(135deg,#6b7445,#535e38); color:#fff; box-shadow:0 8px 20px rgba(76,87,51,.24); font:18px Georgia,serif; }
.hub-visual strong small { display:block; margin-top:1px; color:#e3d5b8; font:7px/1.2 Inter,sans-serif; letter-spacing:.7px; text-transform:uppercase; }
.hub-source { display:flex; align-items:center; justify-content:center; min-height:32px; border:1px solid #cbd6c8; border-radius:9px; background:#fff; color:#536050; font-size:9px; font-weight:750; text-align:center; }
.hub-source:nth-of-type(1),.hub-source:nth-of-type(2) { position:relative; }
.sync-all-button { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:88px; padding:10px; border:1px solid #56725c; border-radius:11px; background:#59755f; color:#fff; cursor:pointer; }
.sync-all-button:hover { filter:brightness(1.06); }
.sync-all-button > svg { width:22px; height:22px; margin-bottom:5px; }
.sync-all-button > span { font-size:10.5px; font-weight:750; }
.sync-all-button > small { margin-top:4px; color:#dce6dc; font-size:7.5px; }
.sync-all-button.loading > svg { animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.integration-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:11px 0; }
.integration-kpis article { display:grid; grid-template-columns:44px minmax(0,1fr); align-items:center; gap:10px; min-height:91px; padding:12px 14px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.48); }
.kpi-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; }
.kpi-icon svg { width:21px; height:21px; }.kpi-icon.green { background:#e7efe4;color:#5e795c; }.kpi-icon.copper { background:#f5e3d8;color:#a76548; }.kpi-icon.gold { background:#f4ead5;color:#99733f; }.kpi-icon.olive { background:#e9ead9;color:#6b6f41; }
.integration-kpis small,.integration-kpis strong,.integration-kpis em { display:block; }
.integration-kpis small { color:#7c746c; font-size:8.5px; text-transform:uppercase; }
.integration-kpis strong { margin-top:2px; color:#4f443a; font-size:14px; }
.integration-kpis em { margin-top:2px; color:#74806f; font-size:8.5px; font-style:normal; }

.integration-toolbar { display:flex; align-items:center; gap:10px; margin-bottom:14px; padding:7px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.45); }
.integration-search { display:flex; align-items:center; gap:7px; flex:1; min-width:190px; height:37px; padding:0 10px; border:1px solid #ddd1c4; border-radius:8px; background:#fffdf9; }
.integration-search svg { width:16px; height:16px; color:#887e74; }
.integration-search input { min-width:0; flex:1; border:0; outline:0; background:transparent; color:#4e4740; font-size:11px; }
.filter-group { display:flex; gap:3px; }
.filter-group button { min-height:35px; padding:0 10px; border:0; border-radius:7px; background:transparent; color:#6f675e; font-size:10px; font-weight:700; cursor:pointer; }
.filter-group button.active { background:#5a745f; color:#fff; }
.filter-group b { display:inline-grid; place-items:center; min-width:18px; height:18px; margin-left:3px; border-radius:9px; background:rgba(126,111,96,.11); font-size:8px; }
.filter-group button.active b { background:rgba(255,255,255,.16); }
.category-filter { display:flex; align-items:center; gap:7px; color:#81786f; font-size:9px; }
.category-filter select { height:35px; border:1px solid #ddd1c4; border-radius:8px; padding:0 28px 0 9px; background:#fffdf9; color:#554e47; font-size:10px; outline:none; }

.integration-section { margin-top:13px; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:15px; margin-bottom:10px; }
.section-heading h2 { margin:0; color:#493e35; font-size:16px; }
.section-heading p { margin:3px 0 0; color:#7a7169; font-size:10.5px; }
.section-heading > span { display:flex; align-items:center; gap:6px; color:#5f755e; font-size:9px; font-weight:750; }
.section-heading > span.optional-label { padding:4px 8px; border-radius:10px; background:#eee8df; color:#756b62; }
.integration-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.integration-card { display:flex; flex-direction:column; min-width:0; min-height:250px; padding:14px; border:1px solid #ded3c7; border-radius:12px; background:rgba(255,255,255,.6); box-shadow:0 2px 9px rgba(76,57,38,.035); transition:transform .18s,border-color .18s,box-shadow .18s; }
.integration-card:hover { transform:translateY(-2px); border-color:#c5b29f; box-shadow:0 9px 22px rgba(76,57,38,.08); }
.integration-card.featured { border-color:#b8c8b6; background:linear-gradient(145deg,rgba(249,252,247,.9),rgba(255,255,255,.72)); }
.integration-card[hidden] { display:none; }
.integration-card header { display:grid; grid-template-columns:45px minmax(0,1fr) auto; align-items:center; gap:9px; }
.integration-logo { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; color:#fff; font-size:18px; font-weight:850; box-shadow:inset 0 1px rgba(255,255,255,.25); }
.integration-logo.snelstart { background:#2577a6; }.integration-logo.nmbrs { background:#6550a4; }.integration-logo.horeko { background:#d26938; }.integration-logo.sligro { background:#b64836; }.integration-logo.booq { background:#303237; }.integration-logo.email-logo { background:#a6634d; }.integration-logo.bank { background:#66794f; }.integration-logo.woo { background:#8063a2; }.integration-logo.dyflexis { background:#4d827e; }.integration-logo.bonnie { background:linear-gradient(135deg,#9c71d3,#6540a7); }.integration-logo.sleak { background:linear-gradient(135deg,#6985c5,#3f568c); }.integration-logo.shopify { background:#80a956; }.integration-logo.shiftbase { background:#4e81a4; }
.integration-card h3 { margin:0; overflow:hidden; color:#463d36; font-size:13px; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.integration-card header p { margin:3px 0 0; color:#81786f; font-size:8.5px; }
.connection-state { display:inline-flex; align-items:center; gap:5px; padding:4px 6px; border-radius:9px; font-size:7.5px; font-style:normal; font-weight:750; white-space:nowrap; }
.connection-state.connected { background:#e6efe4; color:#557153; }
.connection-state.connecting-state { background:#eee7f7; color:#6f4d9b; }
.connection-state.optional-state { background:#eee9e2; color:#766e65; }
.integration-description { min-height:54px; margin:14px 0 10px; color:#645c54; font-size:10px; line-height:1.55; }
.data-tags { display:flex; flex-wrap:wrap; gap:4px; }
.data-tags span { padding:3px 6px; border-radius:9px; background:#f0e8de; color:#736358; font-size:7.5px; font-weight:650; }
.featured .data-tags span { background:#e8f0e7; color:#5c725c; }
.connecting-section { margin-top:16px; padding:14px; border:1px solid #d9cce9; border-radius:12px; background:linear-gradient(120deg,rgba(248,244,252,.82),rgba(255,252,247,.7)); }
.connecting-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.integration-card.connecting { min-height:225px; border-color:#d6c4e8; background:linear-gradient(145deg,rgba(250,247,253,.94),rgba(255,255,255,.76)); }
.connecting .data-tags span { background:#eee7f7; color:#6e5590; }
.integration-card footer { display:flex; align-items:center; justify-content:space-between; gap:9px; min-height:45px; margin-top:auto; padding-top:11px; border-top:1px solid #ece3d9; }
.integration-card footer > span { display:grid; grid-template-columns:16px auto; grid-template-rows:auto auto; column-gap:5px; align-items:center; }
.integration-card footer svg { grid-row:1/3; width:15px; height:15px; color:#7b8b73; }
.integration-card footer small { color:#8a8178; font-size:7px; }
.integration-card footer span b { color:#5d554d; font-size:8.5px; }
.integration-card footer button,.integration-card footer a { display:inline-flex; align-items:center; min-height:30px; padding:0 8px; border:1px solid #cfc1b3; border-radius:7px; background:#fffaf5; color:#805540; font-size:9px; font-weight:750; text-decoration:none; cursor:pointer; white-space:nowrap; }
.integration-card footer button:hover,.integration-card footer a:hover { border-color:#a97960; color:#9f5739; }
.integration-card footer button b,.integration-card footer a b { margin-left:4px; }
.optional-section { margin-top:22px; }
.optional-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.integration-card.optional { min-height:225px; border-style:dashed; background:rgba(250,248,244,.54); }
.optional .integration-description { min-height:44px; }

.data-flow-panel { margin-top:16px; padding:17px; border:1px solid #cbd6c8; border-radius:12px; background:linear-gradient(120deg,rgba(246,250,244,.85),rgba(255,252,247,.78)); }
.data-flow-panel > header { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; }
.data-flow-panel > header > span { display:flex; align-items:center; gap:6px; color:#5f735e; font-size:9px; font-weight:750; }
.data-flow-panel > header svg { width:16px; height:16px; }
.flow-row { display:flex; align-items:stretch; gap:9px; margin-top:14px; }
.flow-row article { display:grid; grid-template-columns:27px minmax(0,1fr); align-items:center; gap:8px; flex:1; min-width:0; padding:10px; border:1px solid #d9e1d7; border-radius:9px; background:#fff; }
.flow-row article > b { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#5f7963; color:#fff; font-size:9px; }
.flow-row strong,.flow-row small { display:block; }
.flow-row strong { color:#4f574e; font-size:9.5px; }
.flow-row small { margin-top:3px; color:#7c8179; font-size:7.5px; line-height:1.35; }
.flow-row > i { align-self:center; color:#a07660; font-size:15px; font-style:normal; }
.integration-empty { display:grid; place-items:center; min-height:220px; margin-top:12px; border:1px dashed #d5c8ba; border-radius:12px; background:rgba(255,255,255,.38); text-align:center; }
.integration-empty[hidden] { display:none; }
.integration-empty svg { width:35px; height:35px; color:#a99888; }
.integration-empty strong { margin-top:-45px; color:#5f554c; font-size:14px; }
.integration-empty span { margin-top:-60px; color:#837970; font-size:10px; }

.drawer-scrim { position:fixed; z-index:69; inset:0; background:rgba(38,33,27,.34); opacity:0; pointer-events:none; transition:.2s; }
.drawer-scrim.show { opacity:1; pointer-events:auto; }
.integration-drawer { position:fixed; z-index:70; top:0; right:0; width:min(470px,100vw); height:100vh; overflow-y:auto; padding:24px; border-left:1px solid #d9c9b8; background:#fffaf5; box-shadow:-16px 0 45px rgba(56,42,27,.17); transform:translateX(102%); transition:transform .25s ease; }
.integration-drawer.open { transform:translateX(0); }
.integration-drawer[aria-hidden="true"] { visibility:hidden; }
.integration-drawer.open[aria-hidden="false"] { visibility:visible; }
.drawer-close { position:absolute; top:18px; right:18px; display:grid; place-items:center; width:34px; height:34px; border:1px solid #d9cbbd; border-radius:50%; background:#fff; color:#6f6257; cursor:pointer; }
.drawer-close svg { width:17px; height:17px; }
.drawer-brand { display:flex; align-items:center; gap:12px; padding-right:45px; }
.drawer-brand .integration-logo { width:52px; height:52px; }
.drawer-brand h2 { margin:0; color:#463b32; font-size:19px; }
.drawer-brand p { margin:3px 0 0; color:#7b7168; font-size:10px; }
.drawer-state { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:18px; padding:11px 12px; border:1px solid #c8d6c5; border-radius:10px; background:#edf5eb; }
.drawer-state > span { display:flex; align-items:center; gap:7px; color:#536f55; font-size:11px; font-weight:750; }
.drawer-state i { width:8px; height:8px; border-radius:50%; background:#6f916c; }
.drawer-state small { color:#6f7e6d; font-size:8.5px; }
.drawer-state.optional { border-color:#d8ccc0; background:#f3eee7; }
.drawer-state.optional > span { color:#756b62; }
.drawer-state.optional i { background:#9d9184; }
.drawer-state.connecting { border-color:#d7c7e8; background:#f1eaf8; }
.drawer-state.connecting > span { color:#694a91; }
.drawer-state.connecting i { background:#8d68be; }
.drawer-state.connecting small { color:#78658e; }
.drawer-description { margin:17px 0; color:#5f574f; font-size:11.5px; line-height:1.6; }
.drawer-section { margin-top:17px; padding-top:16px; border-top:1px solid #e5dacf; }
.drawer-section h3 { margin:0 0 10px; color:#51453b; font-size:12px; }
.drawer-data-list { display:grid; gap:7px; margin:0; padding:0; list-style:none; }
.drawer-data-list li { display:flex; align-items:center; gap:8px; min-height:35px; padding:7px 9px; border-radius:8px; background:#f6f1eb; color:#5f574f; font-size:10px; }
.drawer-data-list svg { width:15px; height:15px; color:#638066; }
.sync-settings { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.sync-settings span { padding:9px; border:1px solid #e2d7cb; border-radius:8px; background:#fff; }
.sync-settings small,.sync-settings b { display:block; }
.sync-settings small { color:#8a8077; font-size:8px; }
.sync-settings b { margin-top:3px; color:#514941; font-size:10px; }
.drawer-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:19px; }
.drawer-actions button { min-height:39px; border-radius:8px; font-size:10.5px; font-weight:750; cursor:pointer; }
.drawer-actions .test-button { border:1px solid #c9b9aa; background:#fff; color:#765642; }
.drawer-actions .sync-button-drawer { border:1px solid #55705a; background:#59755f; color:#fff; }
.drawer-actions .optional-button { grid-column:1/-1; border:1px solid #9a725d; background:#a5684b; color:#fff; }
.drawer-note { margin-top:12px; padding:10px; border-radius:8px; background:#f3eadf; color:#7c6a5c; font-size:8.5px; line-height:1.5; }
body.drawer-open { overflow:hidden; }

.horeko-api-note { margin:0 0 12px; color:#766b61; font-size:10px; line-height:1.55; }
.horeko-api-form { display:grid; gap:10px; }
.horeko-api-form label { display:grid; gap:5px; color:#554a41; font-size:10px; font-weight:750; }
.horeko-api-form input { min-height:40px; padding:0 10px; border:1px solid #d9c9b8; border-radius:8px; background:#fff; color:#433a33; font:inherit; font-size:11px; }
.horeko-api-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.horeko-api-actions button,.horeko-drawer-actions a { display:flex; align-items:center; justify-content:center; min-height:39px; border-radius:8px; font-size:10.5px; font-weight:750; text-decoration:none; cursor:pointer; }
.horeko-api-actions .test-button { border:1px solid #c9b9aa; background:#fff; color:#765642; }
.horeko-api-actions .sync-button-drawer,.horeko-drawer-actions a { border:1px solid #55705a; background:#59755f; color:#fff; }
.horeko-api-result { min-height:30px; margin:10px 0 0; padding:8px 9px; border-radius:8px; background:#edf3e8; color:#576c4a; font-size:9.5px; line-height:1.45; }
.horeko-api-result:empty { display:none; }
.horeko-api-result.is-error { background:#fff0ed; color:#8a3b32; }
.horeko-docs-link { display:inline-block; margin-top:9px; color:#8b543f; font-size:9.5px; font-weight:750; }
.horeko-drawer-actions { grid-template-columns:1fr 1fr; }
.horeko-drawer-actions .optional-button { grid-column:1/-1; }
.horeko-drawer-actions button:disabled { cursor:not-allowed; opacity:.5; }

.settings-main footer { font-size:9px; }

@media (max-width:1320px) {
  .integration-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .optional-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .integration-hero { grid-template-columns:minmax(0,1fr) 260px 165px; }
}
@media (max-width:1150px) {
  .integration-hero { grid-template-columns:minmax(0,1fr) 170px; }
  .hub-visual { display:none; }
  .integration-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .automation-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .flow-row { display:grid; grid-template-columns:1fr 1fr; }
  .flow-row > i { display:none; }
}
@media (max-width:900px) {
  .settings-layout { grid-template-columns:1fr; }
  .automation-card { grid-column:auto; }
  .settings-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .integration-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .integration-toolbar { flex-wrap:wrap; }
  .integration-search { flex-basis:100%; }
  .category-filter { margin-left:auto; }
}
@media (max-width:700px) {
  .secure-state { width:34px; padding:0; justify-content:center; font-size:0; }
  .settings-subnav { display:grid; grid-template-columns:1fr 1fr; }
  .settings-subnav a { min-height:36px; padding:0 8px; font-size:9.5px; }
  .settings-hero { grid-template-columns:44px minmax(0,1fr); padding:15px; }
  .hero-icon { width:42px; height:42px; border-radius:12px; }
  .hero-icon svg { width:23px; height:23px; }
  .settings-hero h2,.integration-hero h2 { font-size:16px; }
  .settings-hero p,.integration-hero p { font-size:10.5px; }
  .hero-action { grid-column:1/-1; width:100%; }
  .settings-kpis,.integration-kpis { grid-template-columns:1fr 1fr; }
  .settings-kpis article:last-child { grid-column:1/-1; }
  .settings-kpis article { min-height:91px; padding:12px; }
  .settings-kpis strong { font-size:21px; }
  .settings-card { padding:14px; }
  .form-grid { grid-template-columns:1fr; }
  .form-grid label.wide { grid-column:auto; }
  .settings-card > header { align-items:flex-start; flex-direction:column; }
  .notification-card > header { flex-direction:row; }
  .staff-management-link { grid-template-columns:44px minmax(0,1fr); gap:12px; }
  .staff-management-icon { width:44px; height:44px; border-radius:13px; }
  .staff-management-link>b { grid-column:1/-1; width:100%; }
  .card-actions { align-items:flex-start; flex-direction:column; }
  .primary-button { width:100%; }
  .automation-list { grid-template-columns:1fr; }
  .integration-cta { grid-template-columns:38px minmax(0,1fr); }
  .integration-cta > b { grid-column:2; }
  .integration-hero { grid-template-columns:1fr; padding:16px; }
  .sync-all-button { min-height:57px; flex-direction:row; gap:7px; }
  .sync-all-button > svg { margin:0; }
  .sync-all-button > small { display:none; }
  .integration-kpis article { grid-template-columns:37px minmax(0,1fr); padding:9px; }
  .kpi-icon { width:35px; height:35px; }
  .filter-group { width:100%; }
  .filter-group button { flex:1; padding-inline:5px; }
  .category-filter { width:100%; }
  .category-filter span { display:none; }
  .category-filter select { width:100%; }
  .integration-grid,.optional-grid { grid-template-columns:1fr; }
  .integration-card { min-height:235px; }
  .section-heading { align-items:flex-start; }
  .section-heading > span { display:none; }
  .data-flow-panel > header { flex-direction:column; }
  .flow-row { grid-template-columns:1fr; }
  .integration-drawer { padding:20px 16px; }
}
@media (max-width:420px) {
  .settings-subnav svg { display:none; }
  .settings-kpis article > span { font-size:8.5px; }
  .settings-kpis small { font-size:8.5px; }
  .integration-card header { grid-template-columns:43px minmax(0,1fr); }
  .connection-state { grid-column:2; justify-self:start; }
  .integration-description { min-height:0; }
  .integration-card footer { align-items:flex-start; }
  .drawer-actions { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce) { .sync-all-button.loading > svg { animation:none; } }

/* Grotere ondersteunende typografie voor Instellingen en Koppelingen */
.settings-status li { font-size:10.5px; }
.settings-status small { font-size:9.5px; }
.settings-subnav b { font-size:10px; }
.eyebrow { font-size:10.5px; }
.settings-kpis article > span { font-size:11px; }
.settings-kpis small { font-size:11px; }
.settings-card header p,.data-flow-panel header p { font-size:11.5px; }
.complete-badge,.ai-badge { font-size:10px; }
.form-grid label > span { font-size:11px; }
.form-grid input,.form-grid select { font-size:12.5px; }
.card-actions small { font-size:10.5px; }
.text-button { font-size:11px; }
.secondary-button { font-size:11.5px; }
.toggle-list span > b { font-size:12.5px; }
.toggle-list span > small { font-size:11px; }
.automation-list b { font-size:11.5px; }
.automation-list small { font-size:10px; }
.integration-cta strong { font-size:12.5px; }
.integration-cta small { font-size:10.5px; }
.integration-cta > b { font-size:11.5px; }

.hero-statuses span { font-size:10.5px; }
.hub-source { font-size:10px; }
.sync-all-button > span { font-size:11.5px; }
.sync-all-button > small { font-size:9px; }
.integration-kpis small { font-size:10px; }
.integration-kpis em { font-size:10px; }
.integration-search input { font-size:12px; }
.filter-group button { font-size:11px; }
.filter-group b { font-size:9px; }
.category-filter { font-size:10px; }
.category-filter select { font-size:11px; }
.section-heading p { font-size:11.5px; }
.section-heading > span { font-size:10px; }
.integration-card header p { font-size:10px; }
.connection-state { font-size:9px; }
.integration-description { font-size:11.5px; }
.data-tags span { font-size:9px; }
.integration-card footer small { font-size:8.5px; }
.integration-card footer span b { font-size:10px; }
.integration-card footer button { font-size:10px; }
.data-flow-panel > header > span { font-size:10px; }
.flow-row article > b { font-size:10px; }
.flow-row strong { font-size:10.5px; }
.flow-row small { font-size:9.5px; }
.integration-empty span { font-size:11px; }
.drawer-brand p { font-size:11px; }
.drawer-state small { font-size:10px; }
.drawer-data-list li { font-size:11px; }
.sync-settings small { font-size:9.5px; }
.sync-settings b { font-size:11px; }
.drawer-note { font-size:10px; }
.settings-main footer { font-size:10px; }

@media (max-width:700px) {
  .settings-subnav a { font-size:10.5px; }
  .settings-hero p,.integration-hero p { font-size:11.5px; }
  .settings-kpis article > span { font-size:10.5px; }
  .settings-kpis small { font-size:10px; }
  .integration-kpis small { font-size:9px; }
  .integration-kpis em { font-size:9px; }
}