/* Shared visual direction with Flowbording 2.0: chalk, ink, petrol, Avenir. */
:root,[data-theme=light] { --bg-base:#f4f6f5;--bg-surface:#fff;--bg-elevated:#f1f5f3;--bg-hover:#eaf2ed;--bg-active:#dceee6;--bg-card:#fff;--border:#d7e1df;--border-light:#e4ebe7;--border-focus:#09685c;--text-primary:#172c32;--text-secondary:#53686d;--text-muted:#586d71;--text-accent:#09685c;--accent:#09685c;--accent-hover:#075348;--accent-glow:#e4f1eb;--green:#147952;--red:#b53535;--amber:#936015;--input-bg:#fff;--input-border:#bfcec7;--sidebar-w:248px;--font:'Avenir Next','Segoe UI',sans-serif;--shadow-sm:none;--shadow:0 8px 30px #172c320d;--shadow-lg:0 20px 65px #172c3226;--radius:8px;--radius-lg:12px; }
[data-theme=dark] { --bg-base:#112226;--bg-surface:#192e32;--bg-elevated:#20393d;--bg-hover:#29474a;--bg-active:#30534d;--bg-card:#192e32;--border:#355054;--border-light:#2b4448;--text-primary:#e5f0ec;--text-secondary:#b8cdc7;--text-muted:#a1bbb4;--text-accent:#8fd5b5;--accent:#167e69;--accent-hover:#1a977e;--accent-glow:#284b43;--green:#70d9a6;--red:#ff9690;--input-bg:#20393d;--input-border:#48625e; }
[hidden] { display:none !important; }
body { font-family:var(--font);font-size:14px;line-height:1.55; }
button,input,select,textarea { font:inherit; }
:focus-visible { outline:3px solid #209c82;outline-offset:3px; }
.skip-link { position:fixed;top:-100px;left:20px;z-index:10000;padding:12px;background:#fff;color:#075348; }
.skip-link:focus { top:12px; }
.sidebar { background:#142e32;border-right:0;color:#c1d2d0; }
.sidebar-header { padding:28px 24px 22px;border-color:#2b4448; }
.sidebar-logo { flex-direction:column;align-items:flex-start;gap:13px; }
.brand-logo { width:154px;height:48px;object-fit:contain;object-position:left; }
.edition-label { color:#a7c4bb;font-size:10px;letter-spacing:2px; }
.sidebar-section-label { color:#a7bebc;letter-spacing:1.3px;font-size:10px;padding-top:24px; }
.sidebar-nav { padding:0 12px; }
.nav-item { min-height:42px;margin:4px 0;color:#c1d2d0;border-radius:7px;font-size:13px; }
.nav-item:hover { background:#254347;color:#fff; }
.nav-item.active { background:#dceee6;color:#143d35;font-weight:700;box-shadow:inset 3px 0 #84c6ac; }
.nav-item.active .nav-icon { color:#075348; }
.nav-badge { background:#31514c;color:#dceee6; }
.nav-item.active .nav-badge { color:#143d35;background:#bddccc; }
.profile-switcher { margin:18px 12px 0;border-color:#38534f;background:#203c3c; }
.profile-name { color:#edf5f1; }.profile-sub,.profile-chevron { color:#b8ceca; }.profile-avatar { background:#365955;color:#e5f3eb; }
.sidebar-footer { border-color:#2b4448;color:#a7bebc;padding:18px 24px; }.footer-db,.footer-version { color:#a7bebc; }
.main-content { min-width:0; }
.topbar { min-height:86px;background:var(--bg-base);padding:18px 36px;border-bottom:1px solid var(--border); }
.topbar-breadcrumb { font-weight:650;color:var(--text-primary); }
.topbar-right { gap:12px;flex-wrap:wrap; }
.local-pill { display:inline-flex;padding:4px 9px;border:1px solid var(--border);border-radius:6px;font-size:11px;font-weight:650;color:var(--text-accent);background:var(--bg-card); }
.local-pill::before { content:'●';margin-right:7px; }.save-status { font-size:11px;color:var(--text-muted); }.save-status[data-state=error] { color:var(--red); }
.page { padding:30px 36px 48px;max-width:1530px;margin:auto; }.page-header { padding:0 0 26px;border:0; }.page-title { font-size:30px;letter-spacing:-.8px;font-weight:650; }.page-body { padding:0; }
.btn { min-height:38px;border-radius:6px;font-weight:600; }.btn-primary { background:var(--accent);border-color:var(--accent);color:#fff; }.btn-ghost { border:1px solid var(--border);background:var(--bg-card); }.btn-sm { min-height:32px; }
.card,.stat-card,.flow-card,.script-type-card { border:1px solid var(--border);background:var(--bg-card);box-shadow:none;border-radius:10px; }.card { padding:24px; }.stat-card { padding:22px; }.stat-value { font-size:32px;font-weight:650; }.stat-label { margin-top:5px; }.stats-grid { gap:16px;margin-bottom:30px; }
.data-table td,.data-table th { padding:14px; }.data-table th { background:var(--bg-elevated);font-size:11px; }.form-group label { font-weight:600;font-size:13px; }input:not([type=checkbox]):not([type=radio]),select,textarea { border-radius:6px;min-height:39px; }
.section-divider { margin:26px 0 16px;letter-spacing:.7px; }.empty-state { padding:42px 24px;background:var(--bg-card);border:1px dashed var(--border);border-radius:10px; }
.eyebrow { display:block;color:var(--text-muted);font-size:10px;font-weight:750;letter-spacing:1.6px; }.workspace-intro { margin:0 0 24px;max-width:750px; }.workspace-intro h2 { font-size:32px;font-weight:650;line-height:1.2;letter-spacing:-.8px;margin:10px 0 14px; }.workspace-intro p { color:var(--text-secondary);font-size:15px;line-height:1.75; }
.guide-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0 30px; }.guide-card { background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:24px;display:flex;align-items:flex-start;flex-direction:column; }.guide-number { color:var(--text-accent);font-weight:700;border-top:2px solid currentColor;padding-top:8px; }.guide-card h3 { font-size:19px;margin:22px 0 10px; }.guide-card p { color:var(--text-secondary);font-size:13px;line-height:1.75;flex:1;margin-bottom:22px; }
.notice { padding:16px 20px;border:1px solid var(--border);background:var(--accent-glow);border-radius:9px;margin-bottom:20px;color:var(--text-primary);font-size:13px; }.notice p { margin:6px 0 0;line-height:1.7; }.notice code { font-family:var(--mono); }
.modal { border:1px solid var(--border); }.modal-header { padding:20px 24px; }.modal-body { padding:24px; }.code-block { max-height:55vh;overflow:auto;background:#112226;color:#dbece5;line-height:1.7;padding:22px; }.step-item { min-height:48px; }.step-item[aria-checked=true] { opacity:.78; }
.vault-gate { min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:var(--bg-base); }.vault-story { background:#142e32;color:#edf5f1;padding:clamp(36px,6vw,90px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start; }.vault-story img { width:185px;height:70px;object-fit:contain;object-position:left;margin-bottom:56px; }.vault-story .eyebrow { color:#9bbfb2; }.vault-story h1 { font-size:clamp(32px,3.6vw,53px);line-height:1.15;letter-spacing:-1.4px;font-weight:600;margin:20px 0; }.vault-story p { color:#c1d2d0;line-height:1.9;max-width:425px; }.vault-points { display:flex;flex-direction:column;gap:15px;margin:32px 0 55px;font-size:13px;color:#d2e7dc; }.vault-story small { color:#a7bebc;font-size:11px; }
.vault-entry { padding:40px;display:grid;place-items:center; }.vault-card { max-width:415px;width:100%; }.vault-card h2 { font-size:29px;line-height:1.25;letter-spacing:-.6px;margin:14px 0; }.vault-card p { color:var(--text-secondary);line-height:1.75;margin:14px 0 24px; }.vault-card label { display:block;font-size:13px;font-weight:600;margin:20px 0 8px; }.vault-card input[type=password],#restorePassword { width:100%;padding:12px;border:1px solid var(--input-border);background:var(--input-bg);color:var(--text-primary); }.vault-card .btn { width:100%;margin:8px 0;font-size:14px;min-height:44px; }.vault-card .form-hint { font-size:12px; }.error-text { color:var(--red) !important;min-height:20px; }
.storage-failure { position:fixed;z-index:10000;inset:20% 20% auto;padding:32px;background:var(--bg-card);color:var(--text-primary);border:2px solid var(--red);box-shadow:0 0 0 100vmax #0009; }
@media(max-width:1100px) { .topbar { padding:16px 24px; }.save-status { display:none; }.page { padding:26px 24px; }.guide-grid { gap:10px; }.guide-card { padding:18px; } }
@media(max-width:800px) { :root { --sidebar-w:200px; }.topbar-right { gap:6px; }.local-pill { display:none; }.guide-grid { grid-template-columns:1fr; }.vault-gate { grid-template-columns:1fr; }.vault-story { padding:32px; }.vault-story img { margin-bottom:15px; }.vault-story h1 { font-size:32px; }.vault-points,.vault-story small { display:none; }.vault-entry { padding:32px 24px; }.stats-grid { grid-template-columns:repeat(2,1fr); }.page-header { flex-wrap:wrap;gap:15px; } }
@media(prefers-reduced-motion:reduce) { * { transition:none !important;animation:none !important; } }
/* One scroll surface per page, including long setup and workflow pages. */
.topbar { flex-shrink:0; }
.page { width:100%;height:auto;flex:1;margin:0 auto; }
.page-body { flex:none;overflow:visible; }
#settingsContent,#reportsContent,#templatesContent,#myTasksContent,#historyContent { flex:none;overflow:visible; }
.vault-gate { height:100vh;overflow:auto; }

/* Samma Lucide-ikoner som onlineversionen. */
.nav-icon, .profile-chevron, #themeIcon { display:inline-flex; align-items:center; justify-content:center; }
.nav-icon .lucide-icon, .modal-close .lucide-icon, .topbar-profile-btn .lucide-icon, #notifBtn .lucide-icon, #themeIcon .lucide-icon { margin:0; }
.badge { gap:4px; }
.empty-icon .lucide-icon, .drop-icon .lucide-icon { stroke-width:1.5; }

.cloud-dialog { z-index:1200; }
.cloud-dialog .modal { width:min(760px,94vw); max-height:90vh; }
.cloud-dialog .modal-body { overflow:auto; }
.cloud-dialog label { display:block; margin-top:14px; margin-bottom:5px; }
.cloud-dialog input, .cloud-dialog select { width:100%; }
.cloud-actions { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.cloud-section { margin:22px 0; padding-top:18px; border-top:1px solid var(--border); }
.cloud-dialog details { margin:18px 0; }
.cloud-dialog summary { cursor:pointer; font-weight:600; }
.cloud-dialog form > button { margin-top:14px; }
#cloudAudit { white-space:pre-wrap; overflow-wrap:anywhere; font-size:12px; margin-top:16px; }
#cloudEnrollment p { overflow-wrap:anywhere; }
#cloudGateButton { margin-top:16px; }
.cloud-dialog[aria-busy="true"] #cloudBody { pointer-events:none; opacity:.7; }
.account-locked #app,.account-locked .modal-overlay:not(#cloudDialog) { display:none !important; }
.customer-list { display:grid;gap:12px;margin:20px 0; }
.customer-row { border:1px solid var(--border);border-radius:10px;padding:16px; }
.customer-row h3 { margin:0 0 6px; }
.customer-row code,.sharing-code { display:block;overflow-wrap:anywhere;font-size:12px;line-height:1.6; }
.customer-row .cloud-actions { margin-bottom:0; }
.cloud-dialog .permission-option { display:flex;align-items:center;gap:8px; }
.cloud-dialog .permission-option input { width:auto; }
.cloud-dialog .recovery-key { font-family:monospace;overflow-wrap:anywhere;padding:16px;border:1px solid var(--border);background:var(--bg-base);font-size:17px;user-select:all; }
.customer-sync { display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 16px;border-bottom:1px solid var(--border);font-size:12px; }
.customer-sync span { flex:1; }
.customer-sync[hidden] { display:none; }

/* Account entry: Flowbording's wordmark and editorial petrol panel frame the form. */
.cloud-dialog--auth {
  padding:0;
  background:var(--bg-base);
  backdrop-filter:none;
  align-items:stretch;
}
.cloud-dialog--auth .modal {
  position:relative;
  width:100%;
  height:100%;
  max-height:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:var(--bg-base);
}
.cloud-dialog--auth .modal-header {
  position:absolute;
  z-index:2;
  top:24px;
  right:28px;
  padding:0;
  border:0;
}
.cloud-dialog--auth #cloudTitle {
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
.cloud-dialog--auth #cloudClose {
  min-height:40px;
  padding:8px 12px;
  font-size:13px;
  font-weight:600;
  line-height:1.4;
}
.cloud-dialog--auth .modal-body {
  min-height:0;
  padding:0;
  overscroll-behavior:contain;
}
.cloud-dialog--auth #cloudBody { min-height:100%; }
.account-entry {
  display:grid;
  grid-template-columns:minmax(320px,.95fr) minmax(0,1.05fr);
  min-height:100vh;
  min-height:100dvh;
}
.account-story {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding:clamp(40px,5.7vw,88px);
  background:#142e32;
  color:#edf5f1;
}
.account-brand {
  display:block;
  width:185px;
  height:62px;
  object-fit:contain;
  object-position:left center;
  margin-bottom:clamp(36px,6vh,64px);
}
.account-story .eyebrow { color:#9bbfb2; }
.account-story h2 {
  margin:18px 0 22px;
  max-width:540px;
  color:#edf5f1;
  font-size:clamp(34px,3.6vw,54px);
  font-weight:600;
  line-height:1.15;
  letter-spacing:-1.3px;
  text-wrap:balance;
}
.account-story > p {
  max-width:430px;
  color:#c1d2d0;
  font-size:15px;
  line-height:1.8;
}
.account-benefits {
  display:grid;
  gap:16px;
  margin:32px 0 0;
  padding:0;
  list-style:none;
  color:#d2e7dc;
  font-size:13px;
  line-height:1.65;
}
.account-benefits li { display:flex;align-items:flex-start;gap:12px; }
.account-benefits .lucide-icon {
  flex:0 0 19px;
  width:19px;
  height:19px;
  margin:1px 0 0;
  color:#9bd3b9;
  stroke-width:1.7;
}
.account-story > .account-story-footer {
  margin:38px 0 0;
  padding-top:20px;
  border-top:1px solid #38534f;
  color:#a7c4bb;
  font-size:12px;
  line-height:1.7;
}
.account-form-panel {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding:88px clamp(28px,5vw,84px) 64px;
  background:var(--bg-base);
}
.account-form-content { width:100%;max-width:420px;min-width:0; }
.account-form-content h1 {
  margin:12px 0 14px;
  color:var(--text-primary);
  font-size:clamp(28px,2.6vw,35px);
  font-weight:650;
  line-height:1.2;
  letter-spacing:-.9px;
  text-wrap:balance;
}
.account-intro {
  margin:0 0 28px;
  color:var(--text-secondary);
  font-size:14px;
  line-height:1.8;
}
.cloud-dialog--auth label {
  margin:20px 0 8px;
  color:var(--text-primary);
  font-size:13px;
  font-weight:650;
}
.cloud-dialog--auth input:not([type=checkbox]):not([type=radio]),
.cloud-dialog--auth select {
  width:100%;
  min-height:48px;
  padding:11px 13px;
  border:1px solid var(--input-border);
  border-radius:6px;
  background:var(--input-bg);
  color:var(--text-primary);
  font-size:16px;
  line-height:1.5;
}
.cloud-dialog--auth input::placeholder { color:var(--text-muted);opacity:1; }
.cloud-dialog--auth :is(input,select,button):focus-visible { outline:3px solid #209c82;outline-offset:3px; }
.cloud-dialog--auth .form-hint {
  margin:8px 0 0;
  color:var(--text-secondary);
  font:inherit;
  font-size:12px;
  line-height:1.7;
}
.account-password-field { position:relative; }
.cloud-dialog--auth .account-password-field input { padding-right:77px; }
.account-password-toggle {
  position:absolute;
  right:7px;
  top:6px;
  min-width:56px;
  min-height:36px;
  padding:7px 8px;
  border:0;
  border-radius:4px;
  background:transparent;
  color:var(--text-accent);
  font-size:12px;
  font-weight:650;
  cursor:pointer;
}
.account-password-toggle:hover { background:var(--bg-hover); }
.account-primary-actions { display:grid;gap:10px;margin:24px 0 0; }
.account-primary-actions .btn,
.cloud-dialog--auth .account-entry-form form > .btn-primary {
  justify-content:center;
  width:100%;
  min-height:46px;
  padding:11px 16px;
  font-size:14px;
}
.account-secondary-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:14px;
}
.account-secondary-actions .btn { flex:1 1 auto;justify-content:center;min-height:42px;font-size:13px; }
.account-back {
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:40px;
  margin:0 0 16px -8px;
  padding:8px;
  border:0;
  border-radius:4px;
  background:transparent;
  color:var(--text-accent);
  font-size:13px;
  font-weight:650;
  cursor:pointer;
}
.account-back:hover { background:var(--bg-hover); }
.account-back .lucide-icon { margin:0;width:16px;height:16px; }
.account-notice {
  margin:22px 0 0;
  padding:16px 18px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--bg-elevated);
  color:var(--text-secondary);
  font-size:13px;
  line-height:1.75;
}
.account-notice strong { display:block;margin-bottom:5px;color:var(--text-primary);font-weight:650; }
.account-notice p { margin:0; }
.account-entry-note {
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid var(--border);
  color:var(--text-secondary);
  font-size:12px;
  line-height:1.8;
}
.account-entry-note p { margin:0; }
.account-entry-note .btn { margin-top:10px; }
.cloud-dialog--auth #cloudMessage {
  margin:20px 0 0;
  font-size:13px;
  line-height:1.75;
  overflow-wrap:anywhere;
}
.cloud-dialog--auth #cloudMessage:empty { display:none; }
.cloud-dialog--auth button { transition:background-color 160ms ease-out,color 160ms ease-out,border-color 160ms ease-out; }
.cloud-dialog--auth[aria-busy="true"] #cloudBody { opacity:1; }
.cloud-dialog--auth[aria-busy="true"] .account-entry-form { opacity:.65; }
[data-theme=dark] .cloud-dialog--auth .btn-primary:hover { background:#126f5d;border-color:#126f5d; }

@media(max-width:800px) {
  .account-entry { grid-template-columns:1fr;grid-template-rows:auto 1fr; }
  .account-story { padding:26px 28px 30px; }
  .account-brand { width:150px;height:46px;margin-bottom:20px; }
  .account-story .eyebrow,
  .account-story > p,
  .account-benefits { display:none; }
  .account-story h2 { margin:0;font-size:29px;line-height:1.2;letter-spacing:-.7px; }
  .account-form-panel { align-items:flex-start;padding:36px 28px 44px; }
  .account-form-content { max-width:460px; }
  .account-form-content h1 { font-size:29px; }
  .cloud-dialog--auth .modal-header { top:26px;right:20px; }
  .cloud-dialog--auth #cloudClose { color:#c1d2d0; }
  .cloud-dialog--auth #cloudClose:hover { color:#edf5f1;background:#254347; }
}
@media(max-width:420px) {
  .account-story { padding:22px 22px 26px; }
  .account-brand { width:140px; }
  .account-story h2 { font-size:26px; }
  .account-form-panel { padding:30px 22px 36px; }
  .account-form-content h1 { font-size:27px; }
  .account-intro { margin-bottom:22px; }
  .cloud-dialog--auth .modal-header { top:24px;right:14px; }
}