/* ═══════════════════════════════════════════════════════════════════
   InvoiceKrlo — App design system (v1.2)
   Calm, minimal, compact. Brand colours + fonts come from
   InvoiceKrlo → Settings → Design (injected as :root tokens).
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────────────────── */
:root {
  --ok-primary: #004AAC;
  --ok-accent:  #E0141B;
  --ok-font: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ok-font-head: "Bricolage Grotesque", var(--ok-font);
  --ok-fs: 14px;

  --ok-primary-d:   color-mix(in srgb, var(--ok-primary) 84%, #000);
  --ok-primary-50:  color-mix(in srgb, var(--ok-primary) 6%, #fff);
  --ok-primary-100: color-mix(in srgb, var(--ok-primary) 11%, #fff);
  --ok-primary-200: color-mix(in srgb, var(--ok-primary) 22%, #fff);
  --ok-accent-50:   color-mix(in srgb, var(--ok-accent) 8%, #fff);
  --ok-ring: 0 0 0 3px color-mix(in srgb, var(--ok-primary) 18%, transparent);

  --ok-ink:   #101828;
  --ok-text:  #344054;
  --ok-soft:  #667085;
  --ok-muted: #98A2B3;
  --ok-line:  #EAECF0;
  --ok-line-2:#F2F4F7;
  --ok-field: #D0D5DD;
  --ok-bg:    #F7F8FA;
  --ok-white: #FFFFFF;

  --ok-green: #067647;  --ok-green-bg: #ECFDF3;
  --ok-amber: #B54708;  --ok-amber-bg: #FFFAEB;
  --ok-red:   #B42318;  --ok-red-bg:   #FEF3F2;
  --ok-purple:#5925DC;  --ok-purple-bg:#F4F3FF;

  --t-xs:  calc(var(--ok-fs) - 2px);
  --t-sm:  calc(var(--ok-fs) - 1px);
  --t-md:  var(--ok-fs);
  --t-lg:  calc(var(--ok-fs) + 1px);
  --t-xl:  calc(var(--ok-fs) + 3px);
  --t-2xl: calc(var(--ok-fs) + 7px);

  --ok-r-sm: 8px; --ok-r: 10px; --ok-r-lg: 14px;
  --ok-sh-xs: 0 1px 2px rgba(16,24,40,.05);
  --ok-sh-sm: 0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
  --ok-sh-md: 0 6px 16px -4px rgba(16,24,40,.10), 0 2px 6px -2px rgba(16,24,40,.05);
  --ok-sh-lg: 0 18px 40px -8px rgba(16,24,40,.18), 0 6px 12px -4px rgba(16,24,40,.06);
  --ok-ease: cubic-bezier(.2,.8,.2,1);

  --ok-nav-w: 244px;
  --ok-top-h: 60px;
  --ok-bar-h: var(--wp-admin--admin-bar--height, 0px);
}

/* ── 2. Base + theme isolation ─────────────────────────────────────── */
body.okigs-canvas { margin: 0; background: var(--ok-bg); min-height: 100vh; }
.okigs-root {
  font-family: var(--ok-font); font-size: var(--t-md); line-height: 1.5; color: var(--ok-text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
.okigs-root *, .okigs-root *::before, .okigs-root *::after { box-sizing: border-box; }
.okigs-root h1, .okigs-root h2, .okigs-root h3, .okigs-root h4 {
  font-family: var(--ok-font-head); color: var(--ok-ink); margin: 0; line-height: 1.25; letter-spacing: -.012em; font-weight: 700; text-transform: none;
}
.okigs-root p { margin: 0; }
.okigs-root a { color: var(--ok-primary); text-decoration: none; }
.okigs-root a:hover { color: var(--ok-primary-d); }
.okigs-root button { font-family: inherit; letter-spacing: 0; line-height: 1.2; text-transform: none; gap: 8px; }
.okigs-root img { max-width: 100%; }
.okigs-root :focus-visible { outline: none; box-shadow: var(--ok-ring); }
.okigs-root [hidden], .ok-overlay[hidden], .okigs-dropdown[hidden] { display: none !important; }
.ok-ico { flex-shrink: 0; display: block; }
.ok-ico, .okigs-root svg { pointer-events: none; }

/* ── 3. Buttons (every state defined — text is always visible) ─────── */
.okigs-root .ok-btn, .ok-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; min-height: 0; padding: 0 15px; border-radius: var(--ok-r-sm);
  border: 1px solid transparent; background: #fff; color: var(--ok-text);
  font: 600 var(--t-md)/1 var(--ok-font); letter-spacing: 0; text-transform: none; white-space: nowrap;
  cursor: pointer; text-decoration: none; box-shadow: none;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s;
}
.ok-btn .ok-ico { width: 16px; height: 16px; }
.ok-btn:active { transform: translateY(1px); }
.ok-btn[disabled], .ok-btn.is-disabled { opacity: .55; pointer-events: none; }
.ok-btn-sm { height: 34px; padding: 0 12px; font-size: var(--t-sm); }
.ok-btn-lg { height: 44px; padding: 0 20px; font-size: var(--t-lg); }
.ok-btn-full { width: 100%; }

.ok-btn-primary, .okigs-root .ok-btn-primary { background: var(--ok-primary); border-color: var(--ok-primary); color: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.08); }
.ok-btn-primary:hover, .okigs-root .ok-btn-primary:hover, .ok-btn-primary:focus-visible { background: var(--ok-primary-d); border-color: var(--ok-primary-d); color: #fff; }

.ok-btn-ghost, .okigs-root .ok-btn-ghost { background: #fff; border-color: var(--ok-field); color: var(--ok-text); box-shadow: var(--ok-sh-xs); }
.ok-btn-ghost:hover, .okigs-root .ok-btn-ghost:hover { background: #F9FAFB; border-color: #98A2B3; color: var(--ok-ink); }

.ok-btn-outline, .okigs-root .ok-btn-outline { background: #fff; border-color: var(--ok-primary-200); color: var(--ok-primary); }
.ok-btn-outline:hover, .okigs-root .ok-btn-outline:hover { background: var(--ok-primary-50); border-color: var(--ok-primary); color: var(--ok-primary-d); }

.ok-btn-soft, .okigs-root .ok-btn-soft { background: var(--ok-primary-50); border-color: var(--ok-primary-100); color: var(--ok-primary); }
.ok-btn-soft:hover, .okigs-root .ok-btn-soft:hover { background: var(--ok-primary-100); border-color: var(--ok-primary-200); color: var(--ok-primary-d); }

.ok-btn-wa, .okigs-root .ok-btn-wa { background: #16A34A; border-color: #16A34A; color: #fff; }
.ok-btn-wa:hover, .okigs-root .ok-btn-wa:hover { background: #15803D; border-color: #15803D; color: #fff; }

.ok-btn.is-loading { pointer-events: none; opacity: .9; }
.ok-btn.is-loading .ok-ico { display: none; }
.ok-btn.is-loading::before { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: ok-spin .7s linear infinite; }

/* ── 4. Forms ──────────────────────────────────────────────────────── */
.ok-form { display: flex; flex-direction: column; gap: 16px; }
.ok-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.ok-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ok-field-wide { grid-column: 1 / -1; }
.ok-field > label, .ok-label-row label, .okigs-root .ok-field label { font: 500 var(--t-sm)/1.3 var(--ok-font); color: var(--ok-text); margin: 0; }
.ok-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ok-label-row a { font-size: var(--t-sm); font-weight: 500; }
.okigs-root input[type=text], .okigs-root input[type=email], .okigs-root input[type=password], .okigs-root input[type=tel],
.okigs-root input[type=url], .okigs-root input[type=number], .okigs-root input[type=search], .okigs-root input[type=date],
.okigs-root select, .okigs-root textarea {
  width: 100%; max-width: 100%; height: 40px; padding: 0 12px; margin: 0;
  border: 1px solid var(--ok-field); border-radius: var(--ok-r-sm); background-color: #fff;
  font: 400 var(--t-md)/1.4 var(--ok-font); color: var(--ok-ink); box-shadow: var(--ok-sh-xs);
  transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none;
}
.okigs-root textarea { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.okigs-root select {
  padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px;
}
.okigs-root input::placeholder, .okigs-root textarea::placeholder { color: var(--ok-muted); opacity: 1; }
.okigs-root input:focus, .okigs-root select:focus, .okigs-root textarea:focus { outline: none; border-color: var(--ok-primary); box-shadow: var(--ok-ring); }
.okigs-root input[type=checkbox] { width: 16px; height: 16px; margin: 0; accent-color: var(--ok-primary); cursor: pointer; }
.ok-hint { font-size: var(--t-xs); color: var(--ok-soft); line-height: 1.45; }
.ok-check { display: inline-flex; align-items: center; gap: 9px; font-size: var(--t-sm); color: var(--ok-text); cursor: pointer; user-select: none; }
.ok-url-input-wrap { display: flex; align-items: stretch; border: 1px solid var(--ok-field); border-radius: var(--ok-r-sm); background: #fff; box-shadow: var(--ok-sh-xs); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.ok-url-input-wrap:focus-within { border-color: var(--ok-primary); box-shadow: var(--ok-ring); }
.ok-url-prefix { display: flex; align-items: center; padding: 0 10px 0 12px; background: var(--ok-bg); border-right: 1px solid var(--ok-line); color: var(--ok-soft); font-size: var(--t-sm); white-space: nowrap; flex: none; }
.okigs-root .ok-url-input-wrap input { flex: 1; border: 0; box-shadow: none; border-radius: 0; min-width: 90px; padding-left: 10px; }
.okigs-root .ok-url-input-wrap input:focus { box-shadow: none; }
.ok-color-swatch { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px 0 6px; border: 1px solid var(--ok-field); border-radius: var(--ok-r-sm); background: #fff; }
.ok-color-swatch input[type=color] { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; cursor: pointer; }
.ok-color-swatch span { font: 500 var(--t-sm)/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ok-text); text-transform: uppercase; }
.ok-pw-wrap { position: relative; }
.okigs-root .ok-pw-wrap input { padding-right: 42px; }
.ok-pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--ok-muted); border-radius: 6px; cursor: pointer; }
.ok-pw-toggle:hover { color: var(--ok-text); background: var(--ok-line-2); }
.ok-pw-toggle .ok-ico { width: 18px; height: 18px; }
.ok-inline-msg { padding: 10px 12px; border-radius: var(--ok-r-sm); font-size: var(--t-sm); line-height: 1.45; margin-top: 12px; }
.ok-inline-msg.ok  { background: var(--ok-green-bg); color: var(--ok-green); }
.ok-inline-msg.err { background: var(--ok-red-bg);   color: var(--ok-red); }
.ok-shake { animation: ok-shake .4s cubic-bezier(.36,.07,.19,.97); }

/* ── 5. App shell ──────────────────────────────────────────────────── */
.okigs-sidebar {
  position: fixed; top: var(--ok-bar-h); left: 0; bottom: 0; z-index: 60; width: var(--ok-nav-w);
  display: flex; flex-direction: column; background: #fff; border-right: 1px solid var(--ok-line); overflow-y: auto; scrollbar-width: thin;
}
.okigs-sidebar-brand { display: flex; align-items: center; gap: 10px; height: var(--ok-top-h); padding: 0 20px; flex-shrink: 0; text-decoration: none; }
.okigs-sidebar-logo-img { max-height: 34px; max-width: 170px; width: auto; }
.okigs-sidebar-logo-box, .ok-brand-mark { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--ok-primary); color: #fff; flex-shrink: 0; position: relative; }
.okigs-sidebar-logo-box::after, .ok-brand-mark::after { content: ''; position: absolute; right: -2px; top: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--ok-accent); border: 2px solid #fff; }
.okigs-sidebar-logo-box .ok-ico { width: 17px; height: 17px; }
.okigs-sidebar-name, .ok-brand-name { font: 700 var(--t-xl)/1 var(--ok-font-head); color: var(--ok-ink); letter-spacing: -.02em; }
.okigs-sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; }
.okigs-sidebar-link {
  display: flex; align-items: center; gap: 11px; height: 38px; padding: 0 12px; border-radius: var(--ok-r-sm);
  color: var(--ok-text); font-weight: 500; font-size: var(--t-md); text-decoration: none; transition: background-color .15s, color .15s;
}
.okigs-root .okigs-sidebar-link { color: var(--ok-text); }
.okigs-root .okigs-sidebar-footer .okigs-sidebar-link { color: var(--ok-soft); }
.okigs-root .okigs-sidebar-link:hover { background: var(--ok-bg); color: var(--ok-ink); }
.okigs-sidebar-icon { display: inline-flex; color: var(--ok-soft); transition: color .15s; }
.okigs-sidebar-icon .ok-ico { width: 18px; height: 18px; }
.okigs-sidebar-link:hover .okigs-sidebar-icon { color: var(--ok-text); }
.okigs-root .okigs-sidebar-link.active { background: var(--ok-primary); color: #fff; font-weight: 600; }
.okigs-sidebar-link.active .okigs-sidebar-icon { color: #fff; }
.okigs-sidebar-footer { margin-top: auto; padding: 8px 12px 16px; }
.okigs-sidebar-footer .okigs-sidebar-link { color: var(--ok-soft); }

.okigs-upgrade-card { margin: 12px 12px 4px; padding: 14px; border-radius: var(--ok-r-lg); background: var(--ok-primary-50); border: 1px solid var(--ok-primary-100); }
.okigs-upgrade-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.okigs-upgrade-top strong { font: 700 var(--t-md)/1.2 var(--ok-font-head); color: var(--ok-ink); }
.okigs-upgrade-card-icon { color: var(--ok-primary); display: inline-flex; }
.okigs-upgrade-card p { font-size: var(--t-xs); color: var(--ok-soft); line-height: 1.45; margin-bottom: 10px; }
.ok-upgrade-meter { height: 6px; border-radius: 99px; background: var(--ok-primary-100); overflow: hidden; }
.ok-upgrade-meter span { display: block; height: 100%; background: var(--ok-primary); border-radius: 99px; transition: width .8s var(--ok-ease); }
.okigs-upgrade-card small { display: block; margin: 6px 0 10px; font-size: var(--t-xs); color: var(--ok-soft); }
.okigs-upgrade-card .ok-btn { background: var(--ok-primary); border-color: var(--ok-primary); color: #fff; }
.okigs-upgrade-card .ok-btn:hover { background: var(--ok-primary-d); border-color: var(--ok-primary-d); color: #fff; }
.okigs-promo-card { margin: 12px 12px 4px; padding: 14px; border-radius: var(--ok-r-lg); background: linear-gradient(135deg, var(--ok-primary), var(--ok-primary-d)); color: #fff; }
.okigs-promo-card strong { display: block; font: 700 var(--t-md)/1.2 var(--ok-font-head); margin: 6px 0 2px; color: #fff; }
.okigs-promo-card small { font-size: var(--t-xs); opacity: .85; }
.okigs-promo-ic { display: inline-flex; width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,.18); align-items: center; justify-content: center; }
.okigs-plan-pill { margin: 12px 12px 4px; padding: 12px 14px; display: flex; gap: 10px; align-items: center; border-radius: var(--ok-r-lg); background: var(--ok-green-bg); }
.okigs-plan-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: #17B26A; box-shadow: 0 0 0 3px #D1FADF; flex-shrink: 0; }
.okigs-plan-pill strong { display: block; font-size: var(--t-sm); color: #054F31; }
.okigs-plan-pill small { font-size: var(--t-xs); color: #3B7C5B; }
.okigs-tagline { margin: 12px 0 0; padding: 12px 14px; border-radius: var(--ok-r); background: var(--ok-bg); }
.okigs-tagline strong { display: block; font: 600 var(--t-sm)/1.35 var(--ok-font-head); color: var(--ok-soft); }
.okigs-tagline i { display: block; width: 26px; height: 3px; border-radius: 3px; background: var(--ok-accent); margin-top: 8px; }

.okigs-main { margin-left: var(--ok-nav-w); padding-top: calc(var(--ok-top-h) + var(--ok-bar-h)); min-height: 100vh; }
.okigs-topbar {
  position: fixed; top: var(--ok-bar-h); left: var(--ok-nav-w); right: 0; z-index: 50; height: var(--ok-top-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 28px;
  background: rgba(255,255,255,.9); backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--ok-line);
}
.okigs-topbar-left, .okigs-topbar-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.okigs-topbar-title { font-size: var(--t-xl); font-weight: 700; white-space: nowrap; }
.okigs-topbar-sub { font-size: var(--t-xs); color: var(--ok-soft); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.okigs-root .ok-menu-toggle { display: none; }
.ok-pop-wrap { position: relative; }
.okigs-notif-btn, .ok-menu-toggle {
  position: relative; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ok-line); border-radius: var(--ok-r-sm); background: #fff; color: var(--ok-soft); cursor: pointer; transition: all .15s;
}
.okigs-notif-btn .ok-ico { width: 18px; height: 18px; }
.okigs-root .okigs-notif-btn:hover, .okigs-root .ok-menu-toggle:hover { color: var(--ok-ink); border-color: var(--ok-field); background: #F9FAFB; }
.okigs-notif-dot { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: var(--ok-accent); color: #fff; border: 2px solid #fff; font: 700 10px/13px var(--ok-font); text-align: center; }
.okigs-user-btn { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 10px 0 4px; border: 1px solid var(--ok-line); border-radius: 99px; background: #fff; cursor: pointer; transition: all .15s; }
.okigs-root .okigs-user-btn:hover { border-color: var(--ok-field); background: #F9FAFB; }
.okigs-user-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--ok-primary); color: #fff; font: 600 11.5px/30px var(--ok-font); text-align: center; letter-spacing: .02em; }
.okigs-user-name { font: 600 var(--t-sm)/1 var(--ok-font); color: var(--ok-ink); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.okigs-user-chevron { color: var(--ok-muted); display: inline-flex; transition: transform .2s; }
.okigs-user-chevron .ok-ico { width: 14px; height: 14px; }
.okigs-user-btn[aria-expanded="true"] .okigs-user-chevron { transform: rotate(180deg); }
.okigs-dropdown { position: absolute; right: 0; top: calc(100% + 8px); z-index: 80; min-width: 240px; padding: 6px; background: #fff; border: 1px solid var(--ok-line); border-radius: var(--ok-r-lg); box-shadow: var(--ok-sh-lg); animation: ok-pop .16s var(--ok-ease); transform-origin: top right; }
.okigs-dropdown-header { padding: 8px 10px 10px; border-bottom: 1px solid var(--ok-line-2); margin-bottom: 4px; }
.okigs-dropdown-header strong { display: block; font-size: var(--t-sm); color: var(--ok-ink); }
.okigs-dropdown-header span { display: block; font-size: var(--t-xs); color: var(--ok-soft); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }
.okigs-dropdown-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 7px; color: var(--ok-text); font-size: var(--t-sm); font-weight: 500; text-decoration: none; }
.okigs-dropdown-item .ok-ico { width: 16px; height: 16px; color: var(--ok-muted); }
.okigs-root .okigs-dropdown-item { color: var(--ok-text); }
.okigs-root .okigs-dropdown-item:hover { background: var(--ok-bg); color: var(--ok-ink); }
.okigs-root .okigs-dropdown-item.danger { color: var(--ok-red); }
.okigs-dropdown-item.danger .ok-ico { color: var(--ok-red); }
.okigs-root .okigs-dropdown-item.danger:hover { background: var(--ok-red-bg); color: var(--ok-red); }
.okigs-dropdown-divider { height: 1px; background: var(--ok-line-2); margin: 4px 0; }
.okigs-notif-pop { width: 330px; max-height: 420px; overflow-y: auto; }
.ok-notif-item { display: flex; gap: 10px; padding: 9px 10px; border-radius: 8px; text-decoration: none; }
.okigs-root .ok-notif-item:hover { background: var(--ok-bg); }
.ok-notif-item strong { display: block; font-size: var(--t-sm); font-weight: 500; color: var(--ok-ink); line-height: 1.35; }
.ok-notif-item small { display: block; font-size: var(--t-xs); color: var(--ok-soft); margin-top: 1px; }
.ok-notif-ic { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ok-notif-ic .ok-ico { width: 15px; height: 15px; }
.ok-notif-empty { padding: 22px 10px; text-align: center; color: var(--ok-green); }
.ok-notif-empty .ok-ico { margin: 0 auto 6px; width: 22px; height: 22px; }
.ok-notif-empty p { color: var(--ok-soft); font-size: var(--t-sm); }

.okigs-page { display: flex; flex-direction: column; min-height: calc(100vh - var(--ok-top-h) - var(--ok-bar-h)); padding: 28px 28px 0; max-width: 1320px; margin: 0 auto; animation: ok-fade .3s ease; }
.okigs-page.is-flush { padding: 0; max-width: none; }
.ok-app-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--ok-line); font-size: var(--t-xs); color: var(--ok-muted); }
.okigs-root .ok-app-footer a { color: var(--ok-soft); }
.okigs-root .ok-app-footer a:hover { color: var(--ok-ink); }
.ok-nav-backdrop { display: none; }

/* ── 6. Tones, badges, alerts ──────────────────────────────────────── */
.ok-tone-blue   { background: var(--ok-primary-50); color: var(--ok-primary); }
.ok-tone-green  { background: var(--ok-green-bg);  color: var(--ok-green); }
.ok-tone-red    { background: var(--ok-accent-50); color: var(--ok-accent); }
.ok-tone-amber  { background: var(--ok-amber-bg); color: var(--ok-amber); }
.ok-tone-purple { background: var(--ok-purple-bg); color: var(--ok-purple); }
.ok-tone-wa     { background: #ECFDF3; color: #16A34A; }

.ok-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; font: 500 var(--t-xs)/1.5 var(--ok-font); background: var(--ok-line-2); color: var(--ok-text); white-space: nowrap; }
.ok-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.ok-badge-draft     { background: var(--ok-line-2); color: #475467; }
.ok-badge-sent, .ok-badge-pending { background: var(--ok-primary-50); color: var(--ok-primary); }
.ok-badge-paid      { background: var(--ok-green-bg); color: var(--ok-green); }
.ok-badge-overdue   { background: var(--ok-red-bg); color: var(--ok-red); }
.ok-badge-partial   { background: var(--ok-amber-bg); color: var(--ok-amber); }
.ok-badge-cancelled { background: var(--ok-line-2); color: var(--ok-muted); text-decoration: line-through; }

.ok-alert, .ok-announcement, .ok-promo-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 14px; border-radius: var(--ok-r); font-size: var(--t-sm); line-height: 1.45; margin-bottom: 20px; border: 1px solid transparent; }
.ok-alert .ok-ico, .ok-promo-banner .ok-ico { width: 16px; height: 16px; }
.ok-alert-error, .ok-announcement-error { background: var(--ok-red-bg); color: var(--ok-red); border-color: #FECDCA; }
.ok-alert-warning, .ok-announcement-warning { background: var(--ok-amber-bg); color: var(--ok-amber); border-color: #FEDF89; }
.ok-announcement-info { background: var(--ok-primary-50); color: var(--ok-primary); border-color: var(--ok-primary-100); }
.ok-announcement-success { background: var(--ok-green-bg); color: var(--ok-green); border-color: #ABEFC6; }
.okigs-root .ok-alert a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ok-promo-banner { background: linear-gradient(90deg, var(--ok-primary-50), var(--ok-accent-50)); color: var(--ok-ink); border-color: var(--ok-primary-100); }
.ok-promo-banner .ok-ico { color: var(--ok-accent); }
.ok-promo-inline { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 7px 14px; border-radius: 99px; background: var(--ok-accent-50); color: var(--ok-accent); font-weight: 600; font-size: var(--t-sm); }
.ok-promo-inline .ok-ico { width: 15px; height: 15px; }

/* ── 7. Cards ──────────────────────────────────────────────────────── */
.ok-card { background: #fff; border: 1px solid var(--ok-line); border-radius: var(--ok-r-lg); box-shadow: var(--ok-sh-xs); margin-bottom: 20px; }
.ok-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 20px; }
.ok-card-header h2 { display: flex; align-items: center; gap: 10px; font-size: var(--t-lg); font-weight: 700; }
.ok-card-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ok-card-icon { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.ok-card-icon .ok-ico { width: 16px; height: 16px; }
.ok-card-body { padding: 20px; }
.ok-card-body > h3 { font-size: var(--t-lg) !important; margin-bottom: 14px !important; }
.ok-card-empty { padding: 44px 20px 48px; text-align: center; }
.ok-card-empty h3 { font-size: var(--t-lg); margin-bottom: 6px; }
.ok-card-empty p { color: var(--ok-soft); font-size: var(--t-sm); margin-bottom: 18px; }
.ok-empty-art { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--ok-primary-50); color: var(--ok-primary); }
.ok-empty-art .ok-ico { width: 26px; height: 26px; }
.ok-empty-full { grid-column: 1 / -1; padding: 48px 20px; text-align: center; background: #fff; border: 1px dashed var(--ok-field); border-radius: var(--ok-r-lg); }
.ok-empty-full h3 { font-size: var(--t-lg); margin-bottom: 6px; }
.ok-empty-full p { color: var(--ok-soft); font-size: var(--t-sm); margin: 0 auto 18px; max-width: 420px; }
.ok-anim { animation: ok-rise .4s var(--ok-ease) both; animation-delay: var(--d, 0s); }
.ok-gate { padding: 60px 20px; text-align: center; }

/* ── 8. Dashboard ──────────────────────────────────────────────────── */
.ok-hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-bottom: 20px; padding: 26px 28px; border-radius: 18px; color: #fff;
  background:
    radial-gradient(520px 260px at 100% -10%, color-mix(in srgb, var(--ok-accent) 55%, transparent), transparent 65%),
    radial-gradient(420px 260px at -10% 120%, color-mix(in srgb, #fff 16%, transparent), transparent 70%),
    linear-gradient(135deg, var(--ok-primary) 0%, var(--ok-primary-d) 100%);
  box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--ok-primary) 80%, transparent);
  animation: ok-rise .45s var(--ok-ease) both;
}
.ok-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .35;
  background-image: radial-gradient(rgba(255,255,255,.55) 1px, transparent 1.2px); background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(100deg, transparent 35%, #000 100%); mask-image: linear-gradient(100deg, transparent 35%, #000 100%); }
.ok-hero-kicker { font-size: var(--t-sm); color: rgba(255,255,255,.78); margin-bottom: 2px; }
.okigs-root .ok-hero-title { font-size: calc(var(--ok-fs) + 12px); font-weight: 700; letter-spacing: -.025em; color: #fff; }
.ok-hero-sub { font-size: var(--t-md); color: rgba(255,255,255,.82); margin-top: 6px !important; }
.ok-wave { display: inline-block; transform-origin: 70% 70%; animation: ok-wave 1.8s ease-in-out .6s 1; }
.ok-hero-side { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ok-hero-date { display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 7px; border-radius: 12px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px); }
.ok-hero-date-ic { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: rgba(255,255,255,.16); color: #fff; }
.ok-hero-date-ic .ok-ico { width: 17px; height: 17px; }
.ok-hero-date strong { display: block; font-size: var(--t-sm); font-weight: 600; color: #fff; }
.ok-hero-date span { font-size: var(--t-xs); color: rgba(255,255,255,.75); }
.okigs-root .ok-hero .ok-btn-primary { height: 44px; padding: 0 20px; background: #fff; border-color: #fff; color: var(--ok-primary); box-shadow: 0 6px 18px -6px rgba(0,0,0,.35); }
.okigs-root .ok-hero .ok-btn-primary:hover { background: color-mix(in srgb, var(--ok-primary) 7%, #fff); border-color: #fff; color: var(--ok-primary-d); transform: translateY(-1px); }

.ok-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.ok-stat-card { display: flex; align-items: flex-start; gap: 14px; padding: 18px; background: #fff; border: 1px solid var(--ok-line); border-radius: var(--ok-r-lg); box-shadow: var(--ok-sh-xs); text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .2s, transform .2s; animation: ok-rise .4s var(--ok-ease) both; }
.ok-stat-card:nth-child(2) { animation-delay: .04s; } .ok-stat-card:nth-child(3) { animation-delay: .08s; } .ok-stat-card:nth-child(4) { animation-delay: .12s; }
.okigs-root .ok-stat-card, .okigs-root .ok-notif-item { color: inherit; }
.okigs-root .ok-stat-card:hover { border-color: var(--ok-primary-200); box-shadow: var(--ok-sh-md); transform: translateY(-2px); color: inherit; }
.ok-stat-icon-box { width: 42px; height: 42px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ok-stat-icon-box .ok-ico { width: 20px; height: 20px; }
.ok-stat-info { display: flex; flex-direction: column; min-width: 0; }
.ok-stat-label { font-size: var(--t-sm); color: var(--ok-soft); font-weight: 500; }
.ok-stat-value { font: 700 var(--t-2xl)/1.15 var(--ok-font-head); color: var(--ok-ink); margin: 4px 0 6px; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ok-stat-change { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-xs); font-weight: 600; }
.ok-stat-change .ok-ico { width: 13px; height: 13px; }
.ok-stat-change.up { color: var(--ok-green); } .ok-stat-change.down { color: var(--ok-red); } .ok-stat-change.flat { color: var(--ok-soft); }
.ok-stat-sub { font-size: var(--t-xs); color: var(--ok-muted); margin-top: 2px; }

/* ── 9. Tables + list controls ─────────────────────────────────────── */
.ok-table-wrap { overflow-x: auto; padding: 0 8px 8px; }
.ok-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-sm); margin: 0; }
.ok-table th { text-align: left; padding: 10px 12px; font: 500 var(--t-xs)/1.3 var(--ok-font); color: var(--ok-soft); background: var(--ok-bg); border: 0; border-bottom: 1px solid var(--ok-line); white-space: nowrap; text-transform: none; letter-spacing: 0; }
.ok-table th:first-child { border-top-left-radius: 8px; } .ok-table th:last-child { border-top-right-radius: 8px; }
.ok-table td { padding: 12px; border: 0; border-bottom: 1px solid var(--ok-line-2); vertical-align: middle; color: var(--ok-text); background: #fff; }
.ok-table tbody tr:last-child td { border-bottom: 0; }
.ok-table tbody tr { transition: background-color .12s; }
.ok-table tbody tr:hover td { background: #FAFBFC; }
.ok-th-actions { width: 132px; text-align: right !important; }
.okigs-root .ok-table-num { font-weight: 600; color: var(--ok-ink); }
.okigs-root .ok-table-num:hover { color: var(--ok-primary); }
.ok-table-amount { font-weight: 600; color: var(--ok-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ok-muted-cell { color: var(--ok-soft) !important; white-space: nowrap; }
.ok-client-cell { display: inline-flex; align-items: center; gap: 9px; color: var(--ok-ink); font-weight: 500; }
.ok-mini-av { width: 26px; height: 26px; border-radius: 7px; background: var(--ok-primary-50); color: var(--ok-primary); font: 600 10.5px/26px var(--ok-font); text-align: center; flex-shrink: 0; }
.ok-tbl-actions { display: flex; justify-content: flex-end; gap: 2px; }
.ok-tbl-btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--ok-muted); cursor: pointer; transition: all .12s; }
.ok-tbl-btn .ok-ico { width: 17px; height: 17px; }
.okigs-root .ok-tbl-btn:hover { background: var(--ok-line-2); color: var(--ok-ink); }

.ok-filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 0 20px 14px; }
.ok-filter-tabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--ok-line-2); border-radius: 9px; flex-wrap: wrap; }
.ok-filter-tab { height: 30px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--ok-soft); font: 500 var(--t-sm)/1 var(--ok-font); cursor: pointer; transition: all .15s; }
.okigs-root .ok-filter-tab:hover { color: var(--ok-ink); background: transparent; }
.okigs-root .ok-filter-tab.active { background: #fff; color: var(--ok-ink); box-shadow: var(--ok-sh-sm); }
.ok-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.ok-toolbar-right { display: flex; align-items: center; gap: 10px; }
.ok-search { position: relative; flex: 1; max-width: 420px; min-width: 200px; }
.ok-search .ok-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ok-muted); }
.okigs-root .ok-search input { padding-left: 36px; }
.ok-search-sm { flex: 0 1 260px; min-width: 180px; max-width: 260px; }
.okigs-root .ok-search-sm input { height: 34px; }
.ok-count-chip { font-size: var(--t-xs); font-weight: 500; color: var(--ok-soft); padding: 6px 10px; border-radius: 99px; background: #fff; border: 1px solid var(--ok-line); white-space: nowrap; }
.ok-seg { display: flex; gap: 3px; padding: 3px; background: var(--ok-line-2); border-radius: 10px; }
.ok-seg-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--ok-soft); font: 600 var(--t-sm)/1 var(--ok-font); cursor: pointer; transition: all .15s; }
.ok-seg-btn .ok-ico { width: 15px; height: 15px; }
.okigs-root .ok-seg-btn:hover { color: var(--ok-ink); background: transparent; }
.okigs-root .ok-seg-btn.active { background: #fff; color: var(--ok-primary); box-shadow: var(--ok-sh-sm); }

/* Floating row menu (lives outside .okigs-root) */
.ok-row-menu { position: fixed; z-index: 900; min-width: 216px; padding: 5px; background: #fff; border: 1px solid var(--ok-line); border-radius: 12px; box-shadow: var(--ok-sh-lg); font-family: var(--ok-font); animation: ok-pop .14s var(--ok-ease); }
.ok-row-menu button, .ok-row-menu a { display: flex; width: 100%; align-items: center; justify-content: flex-start; gap: 10px; height: auto; min-height: 0; padding: 8px 10px; margin: 0; border: 0; border-radius: 7px; background: transparent; color: var(--ok-text); font: 500 13px/1.3 var(--ok-font); text-align: left; text-decoration: none; text-transform: none; cursor: pointer; box-shadow: none; }
.ok-row-menu .ok-ico { width: 16px; height: 16px; color: var(--ok-muted); }
.ok-row-menu button:hover, .ok-row-menu a:hover { background: var(--ok-bg); color: var(--ok-ink); }
.ok-row-menu .danger, .ok-row-menu .danger .ok-ico { color: var(--ok-red); }
.ok-row-menu .danger:hover { background: var(--ok-red-bg); color: var(--ok-red); }
.ok-row-menu hr { border: 0; border-top: 1px solid var(--ok-line-2); margin: 4px 0; }
.ok-row-menu small { display: block; padding: 7px 10px 3px; font: 600 10.5px/1 var(--ok-font); letter-spacing: .06em; text-transform: uppercase; color: var(--ok-muted); }

/* Loading */
.ok-loading { display: flex; justify-content: center; padding: 48px 0; }
.ok-spinner { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--ok-primary-100); border-top-color: var(--ok-primary); animation: ok-spin .7s linear infinite; }
.ok-skeleton { background: linear-gradient(90deg, var(--ok-line-2) 25%, #F9FAFB 50%, var(--ok-line-2) 75%); background-size: 200% 100%; animation: ok-shimmer 1.3s linear infinite; border-radius: 6px; }

/* ── 10. Clients ───────────────────────────────────────────────────── */
.ok-clients-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.ok-client-card { position: relative; display: flex; flex-direction: column; padding: 18px; background: #fff; border: 1px solid var(--ok-line); border-radius: var(--ok-r-lg); box-shadow: var(--ok-sh-xs); transition: border-color .15s, box-shadow .2s; animation: ok-rise .35s var(--ok-ease) both; }
.ok-client-card:hover { border-color: var(--ok-primary-200); box-shadow: var(--ok-sh-md); }
.ok-skel-card { min-height: 180px; }
.ok-client-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ok-client-avatar { width: 40px; height: 40px; border-radius: 10px; background: var(--ok-primary-50); color: var(--ok-primary); font: 700 var(--t-sm)/40px var(--ok-font-head); text-align: center; flex-shrink: 0; }
.ok-client-name { font: 600 var(--t-md)/1.3 var(--ok-font-head); color: var(--ok-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ok-client-company { font-size: var(--t-xs); color: var(--ok-soft); margin-top: 1px; }
.ok-client-menu { position: absolute !important; top: 12px; right: 10px; }
.ok-client-meta { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; min-height: 20px; }
.ok-client-meta-row { display: flex; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--ok-text); min-width: 0; }
.ok-client-meta-row a, .ok-client-meta-row span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.okigs-root .ok-client-meta-row a { color: var(--ok-text); }
.okigs-root .ok-client-meta-row a:hover { color: var(--ok-primary); }
.ok-client-meta-icon { display: inline-flex; color: var(--ok-muted); }
.ok-client-meta-icon .ok-ico { width: 14px; height: 14px; }
.ok-client-stats { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.ok-client-stat { font-size: var(--t-xs); font-weight: 500; padding: 3px 8px; border-radius: 99px; background: var(--ok-line-2); color: var(--ok-text); }
.ok-client-stat.warn { background: var(--ok-red-bg); color: var(--ok-red); }
.ok-client-actions-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--ok-line-2); }
.ok-client-act { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 6px; border: 1px solid var(--ok-line); border-radius: 8px; background: #fff; color: var(--ok-text); font: 500 var(--t-xs)/1 var(--ok-font); cursor: pointer; transition: all .15s; }
.ok-client-act .ok-ico { width: 14px; height: 14px; }
.okigs-root .ok-client-act:hover { border-color: var(--ok-primary-200); background: var(--ok-primary-50); color: var(--ok-primary); }
.okigs-root .ok-client-act.wa:hover { border-color: #ABEFC6; background: #ECFDF3; color: #15803D; }
.okigs-root .ok-client-act.rem:hover { border-color: #FEDF89; background: var(--ok-amber-bg); color: var(--ok-amber); }

/* ── 11. Modals ────────────────────────────────────────────────────── */
.ok-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(16,24,40,.5); backdrop-filter: blur(3px); animation: ok-fade .15s ease; }
.ok-modal { width: 100%; max-width: 520px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: #fff; border-radius: 16px; box-shadow: var(--ok-sh-lg); animation: ok-modal-in .22s var(--ok-ease); }
.ok-modal-lg { max-width: 600px; }
.ok-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--ok-line-2); }
.ok-modal-header h3 { font-size: var(--t-xl); }
.ok-modal-sub { font-size: var(--t-xs); color: var(--ok-soft); margin-top: 3px !important; }
.ok-modal-close { width: 32px; height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--ok-muted); cursor: pointer; }
.ok-modal-close .ok-ico { width: 18px; height: 18px; }
.okigs-root .ok-modal-close:hover { background: var(--ok-line-2); color: var(--ok-ink); }
.ok-modal-body { padding: 18px 20px; overflow-y: auto; }
.ok-modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--ok-line-2); }
.ok-channel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.ok-channel { display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--ok-line); border-radius: 12px; background: #fff; text-align: left; cursor: pointer; transition: all .15s; font-family: var(--ok-font); }
.okigs-root .ok-channel:hover { border-color: var(--ok-primary); background: var(--ok-primary-50); }
.okigs-root #ok-ch-wa:hover { border-color: #16A34A; background: #F0FDF4; }
.ok-channel[disabled] { opacity: .5; pointer-events: none; }
.ok-channel-ic { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ok-channel-ic .ok-ico { width: 19px; height: 19px; }
.ok-channel strong { display: block; font-size: var(--t-sm); color: var(--ok-ink); }
.ok-channel small { display: block; font-size: var(--t-xs); color: var(--ok-soft); line-height: 1.4; margin-top: 2px; }

/* ── 12. Templates ─────────────────────────────────────────────────── */
.ok-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; padding: 4px 20px 20px; }
.ok-tpl-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ok-line); border-radius: var(--ok-r-lg); overflow: hidden; transition: border-color .15s, box-shadow .2s, transform .2s; animation: ok-rise .35s var(--ok-ease) both; }
.ok-tpl-card:hover { border-color: var(--ok-primary-200); box-shadow: var(--ok-sh-md); transform: translateY(-2px); }
.ok-tpl-card.is-hidden { display: none; }
.ok-tpl-thumb { position: relative; height: 200px; display: flex; align-items: flex-end; justify-content: center; padding-top: 18px; background: var(--ok-bg); border-bottom: 1px solid var(--ok-line-2); overflow: hidden; }
.ok-tpl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ok-tpl-art { width: 128px; height: auto; border-radius: 5px 5px 0 0; box-shadow: 0 8px 22px rgba(16,24,40,.12); transition: transform .3s var(--ok-ease); }
.ok-tpl-card:hover .ok-tpl-art { transform: translateY(-4px); }
.ok-tpl-thumb-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; background: rgba(255,255,255,.55); transition: opacity .2s; }
.ok-tpl-card:hover .ok-tpl-thumb-overlay, .ok-tpl-card.locked .ok-tpl-thumb-overlay { opacity: 1; }
.ok-tpl-lock-badge { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 99px; background: var(--ok-ink); color: #fff; font-size: 11px; font-weight: 600; }
.ok-tpl-lock-badge .ok-ico { width: 12px; height: 12px; }
.ok-tpl-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ok-tpl-body h3 { font-size: var(--t-md); }
.ok-tpl-body p { font-size: var(--t-xs); color: var(--ok-soft); line-height: 1.5; }
.ok-tpl-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; }
.ok-tpl-access { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--ok-green-bg); color: var(--ok-green); }
.ok-tpl-access.paid, .ok-tpl-access.custom { background: var(--ok-amber-bg); color: var(--ok-amber); }

/* ── 13. Profile ───────────────────────────────────────────────────── */
.ok-profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 20px; align-items: start; padding-bottom: 76px; }
.ok-profile-section { display: flex; flex-direction: column; }
.ok-logo-area { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ok-logo-preview { max-height: 72px; max-width: 220px; padding: 8px; border: 1px solid var(--ok-line); border-radius: var(--ok-r); background: #fff; }
.ok-logo-placeholder { width: 100%; padding: 22px; border: 1.5px dashed var(--ok-field); border-radius: var(--ok-r); text-align: center; color: var(--ok-muted); font-size: var(--t-sm); background: var(--ok-bg); }
.ok-pay-row { display: grid; grid-template-columns: .8fr 1.4fr 34px; gap: 8px; margin-bottom: 8px; }
.ok-rm-row { width: 34px; height: 40px; border: 1px solid var(--ok-line); border-radius: var(--ok-r-sm); background: #fff; color: var(--ok-muted); cursor: pointer; font-size: 13px; }
.okigs-root .ok-rm-row:hover { background: var(--ok-red-bg); border-color: #FECDCA; color: var(--ok-red); }
.ok-save-bar { position: fixed; left: var(--ok-nav-w); right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 28px; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border-top: 1px solid var(--ok-line); }
.ok-save-bar p { font-size: var(--t-sm); color: var(--ok-soft); }

/* ── 14. Pricing / public / subscription ───────────────────────────── */
.ok-pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.ok-price-card { position: relative; display: flex; flex-direction: column; padding: 22px 20px; background: #fff; border: 1px solid var(--ok-line); border-radius: 16px; box-shadow: var(--ok-sh-xs); transition: box-shadow .2s, transform .2s; }
.ok-price-card:hover { box-shadow: var(--ok-sh-md); transform: translateY(-2px); }
.ok-price-card.featured { border: 1.5px solid var(--ok-primary); box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--ok-primary) 45%, transparent); }
.ok-price-card.current { border-color: var(--ok-green); }
.ok-price-badge { position: absolute; top: -11px; left: 20px; padding: 3px 10px; border-radius: 99px; background: var(--ok-primary); color: #fff; font-size: 11px; font-weight: 600; }
.ok-price-name { font: 600 var(--t-md)/1.2 var(--ok-font-head); color: var(--ok-ink); }
.ok-price-amount { display: flex; align-items: baseline; gap: 4px; margin: 10px 0 16px; }
.ok-price-amt { font: 700 30px/1 var(--ok-font-head); color: var(--ok-ink); letter-spacing: -.02em; }
.ok-price-per { font-size: var(--t-sm); color: var(--ok-soft); }
.ok-price-features { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.ok-price-features li, .ok-price-feat { position: relative; padding-left: 24px; font-size: var(--t-sm); color: var(--ok-text); }
.ok-price-features li::before, .ok-price-feat::before { content: ''; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--ok-primary-100); }
.ok-price-features li::after, .ok-price-feat::after { content: ''; position: absolute; left: 4px; top: 6px; width: 8px; height: 8px; background: var(--ok-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; }
.ok-price-features li.no, .ok-price-feat.no { color: var(--ok-muted); }
.ok-price-features li.no::before, .ok-price-feat.no::before { background: var(--ok-line-2); }
.ok-price-features li.no::after, .ok-price-feat.no::after { background: var(--ok-muted);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); }

.ok-public { min-height: 100vh; background: var(--ok-bg); }
.ok-public-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1100px; margin: 0 auto; padding: 18px 24px; }
.ok-public-bar nav { display: flex; gap: 8px; }
.ok-public-main { max-width: 1100px; margin: 0 auto; padding: 36px 24px 80px; }
.ok-section-head { text-align: center; margin-bottom: 36px; }
.ok-eyebrow { display: inline-block; font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ok-accent); margin-bottom: 10px; }
.ok-section-head h1 { font-size: 30px; letter-spacing: -.025em; margin-bottom: 10px; }
.ok-section-head p { font-size: var(--t-lg); color: var(--ok-soft); }
.ok-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.ok-brand img { max-height: 34px; width: auto; }
.ok-brand-mark .ok-ico { width: 17px; height: 17px; }

/* ── 15. Auth (log in / sign up) ───────────────────────────────────── */
.ok-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; background: #fff; }
.ok-auth-main { display: flex; flex-direction: column; padding: 28px 40px; min-height: 100vh; }
.ok-auth-logo { align-self: flex-start; }
.ok-auth-box { width: 100%; max-width: 380px; margin: auto; padding: 32px 0; animation: ok-rise .45s var(--ok-ease) both; }
.ok-auth-box h1 { font-size: 26px; letter-spacing: -.025em; margin-bottom: 6px; }
.ok-auth-lead { font-size: var(--t-md); color: var(--ok-soft); margin-bottom: 24px !important; }
.ok-auth-box .ok-inline-msg { margin: 0 0 16px; }
.ok-auth-box .ok-form { gap: 16px; }
.ok-auth-box .ok-btn-lg { margin-top: 4px; }
.ok-auth-switch { margin-top: 22px !important; text-align: center; font-size: var(--t-sm); color: var(--ok-soft); }
.ok-auth-switch a { font-weight: 600; }
.ok-auth-legal { font-size: var(--t-xs); color: var(--ok-muted); }
.ok-auth-aside { position: relative; display: flex; align-items: center; justify-content: center; padding: 48px; overflow: hidden; background: var(--ok-primary); color: #fff; }
.ok-auth-aside::before { content: ''; position: absolute; inset: 0; background: radial-gradient(600px 400px at 85% 0%, rgba(255,255,255,.14), transparent 60%), radial-gradient(500px 360px at 0% 100%, color-mix(in srgb, var(--ok-accent) 35%, transparent), transparent 60%); }
.ok-auth-aside-inner { position: relative; max-width: 420px; width: 100%; }
.ok-auth-aside h2 { color: #fff; font-size: 28px; line-height: 1.2; letter-spacing: -.025em; margin-bottom: 10px; }
.ok-auth-aside p { color: rgba(255,255,255,.8); font-size: var(--t-lg); margin-bottom: 28px; }
.ok-auth-mock { background: #fff; border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.45); overflow: hidden; transform: rotate(-2deg); animation: ok-float 6s ease-in-out infinite; }
.ok-auth-mock-top { display: flex; gap: 5px; padding: 10px 12px; background: #F2F4F7; }
.ok-auth-mock-top span { width: 8px; height: 8px; border-radius: 50%; background: #D0D5DD; }
.ok-auth-mock-body { padding: 16px; }
.ok-auth-mock-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.ok-auth-mock-row i { height: 10px; border-radius: 4px; background: var(--ok-primary-100); }
.ok-auth-mock-row b { font: 700 18px/1 var(--ok-font-head); color: var(--ok-primary); }
.ok-auth-mock-band { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; margin-bottom: 14px; border-radius: 10px; background: var(--ok-primary); color: #fff; }
.ok-auth-mock-band small { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.ok-auth-mock-band strong { font: 700 20px/1.1 var(--ok-font-head); }
.ok-auth-mock-line { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid #F2F4F7; }
.ok-auth-mock-line i { height: 8px; border-radius: 4px; background: #E4E7EC; }
.ok-auth-mock-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.ok-auth-mock-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 99px; background: #ECFDF3; color: #067647; font-size: 11px; font-weight: 600; }
.ok-auth-mock-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 7px; background: var(--ok-accent); color: #fff; font-size: 11px; font-weight: 600; }
.ok-auth-mock .ok-ico { width: 12px; height: 12px; }
.ok-auth-points { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ok-auth-points li { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.92); font-size: var(--t-md); }
.ok-auth-points .ok-ico { width: 18px; height: 18px; padding: 2px; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; }

/* ── 16. Toasts ────────────────────────────────────────────────────── */
.ok-toast-host { position: fixed; right: 20px; bottom: 20px; z-index: 1100; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.ok-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; min-width: 240px; max-width: 380px; padding: 12px 14px; border-radius: 12px; background: var(--ok-ink); color: #fff; font: 500 13px/1.45 var(--ok-font); box-shadow: var(--ok-sh-lg); animation: ok-toast-in .3s var(--ok-ease); }
.ok-toast .ok-ico { width: 17px; height: 17px; margin-top: 1px; }
.ok-toast.ok .ok-ico { color: #47CD89; } .ok-toast.err .ok-ico { color: #F97066; }
.ok-toast.out { animation: ok-toast-out .22s ease forwards; }

/* ── 17. Invoice generator ─────────────────────────────────────────── */
.okigs-gen-wrap { display: flex; flex-direction: column; height: calc(100vh - var(--ok-top-h) - var(--ok-bar-h)); }
.okg-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; background: #fff; border-bottom: 1px solid var(--ok-line); flex-shrink: 0; }
.okg-top-l, .okg-top-r { display: flex; align-items: center; gap: 8px; min-width: 0; }
.okg-doc { display: flex; align-items: center; gap: 10px; min-width: 0; }
.okg-doc strong { font: 700 var(--t-lg)/1.2 var(--ok-font-head); color: var(--ok-ink); white-space: nowrap; }
.okigs-gen-status { font-size: var(--t-xs); color: var(--ok-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; }
.okigs-gen-status:empty { display: none; }
.okigs-gen-status.ok { color: var(--ok-green); } .okigs-gen-status.err { color: var(--ok-red); }
.okigs-gen-status.ok::before { content: '● '; font-size: 9px; vertical-align: 1px; }
.okg-open { position: relative; display: inline-flex; align-items: center; }
.okg-open .ok-ico { position: absolute; left: 10px; width: 15px; height: 15px; color: var(--ok-muted); }
.okigs-root .okg-open select { height: 34px; width: 150px; padding-left: 32px; font-size: var(--t-sm); font-weight: 500; color: var(--ok-text); box-shadow: none; }
.okigs-root .okg-panel-toggle { display: none; }
.okg-body { flex: 1; min-height: 0; display: flex; }
.okigs-gen-stage { flex: 1; min-width: 0; overflow: auto; display: flex; flex-direction: column; align-items: center; padding: 18px 24px 64px; background: var(--ok-bg); }
.okg-hint { display: flex; align-items: center; gap: 7px; font-size: var(--t-xs); color: var(--ok-soft); margin: 0 0 14px !important; }
.okg-hint .ok-ico { width: 14px; height: 14px; }
.okigs-gen-stage .okigs-invoice { box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 12px 32px -12px rgba(16,24,40,.18); border-radius: 4px; animation: ok-rise .4s var(--ok-ease) both; }
.okg-panel { width: 300px; flex-shrink: 0; overflow-y: auto; background: #fff; border-left: 1px solid var(--ok-line); scrollbar-width: thin; }
.okg-panel-head { display: none; }
.okg-scrim { display: none; }
.okg-sec { padding: 16px 18px; border-bottom: 1px solid var(--ok-line-2); }
.okg-sec:last-child { border-bottom: 0; }
.okg-sec h4 { font: 600 var(--t-xs)/1 var(--ok-font); letter-spacing: .06em; text-transform: uppercase; color: var(--ok-muted); margin-bottom: 10px; }
.okigs-root input.okg-input, .okigs-root select.okg-input { height: 36px; font-size: var(--t-sm); }
.okg-note { font-size: var(--t-xs); color: var(--ok-soft); margin-top: 7px !important; }
.okg-note a { font-weight: 500; }
.okg-tpls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ok-tpl-mini { display: flex; flex-direction: column; gap: 5px; padding: 0; border: 0; background: transparent; cursor: pointer; text-align: center; font-family: var(--ok-font); }
.ok-tpl-mini-thumb { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 78px; padding-top: 8px; overflow: hidden; border-radius: 8px; border: 1.5px solid var(--ok-line); background: var(--ok-bg); transition: border-color .15s, box-shadow .15s; }
.ok-tpl-mini-thumb .ok-tpl-art { width: 54px; box-shadow: 0 4px 10px rgba(16,24,40,.12); }
.ok-tpl-mini-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ok-tpl-mini:hover .ok-tpl-mini-thumb { border-color: var(--ok-primary-200); }
.ok-tpl-mini.active .ok-tpl-mini-thumb { border-color: var(--ok-primary); box-shadow: var(--ok-ring); }
.ok-tpl-mini.locked .ok-tpl-mini-thumb::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.5); }
.ok-tpl-mini-lock { position: absolute; z-index: 1; top: 5px; right: 5px; width: 20px; height: 20px; border-radius: 50%; background: var(--ok-ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.ok-tpl-mini-lock .ok-ico { width: 11px; height: 11px; }
.ok-tpl-mini-name { font-size: 11.5px; font-weight: 500; color: var(--ok-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ok-tpl-mini.active .ok-tpl-mini-name { color: var(--ok-primary); font-weight: 600; }
.okg-lbl { font-size: var(--t-xs); color: var(--ok-soft); margin: 2px 0 7px; }
.okg-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.okg-sw { position: relative; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 0; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(16,24,40,.12); transition: transform .12s; }
.okg-sw:hover { transform: scale(1.12); }
.okg-sw.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c); }
.okg-sw-custom { display: inline-flex; overflow: hidden; background: conic-gradient(#f43f5e, #f59e0b, #84cc16, #06b6d4, #6366f1, #d946ef, #f43f5e); box-shadow: inset 0 0 0 1px rgba(16,24,40,.12); }
.okg-sw-custom input[type=color] { opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0; padding: 0; }
.okg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.okg-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.okg-f-wide { grid-column: 1 / -1; }
.okg-f > span { font-size: var(--t-xs); color: var(--ok-soft); }
.okg-switch { display: flex; align-items: center; gap: 10px; font-size: var(--t-sm); color: var(--ok-text); cursor: pointer; margin-bottom: 10px; user-select: none; }
.okg-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.okg-switch-ui { position: relative; width: 34px; height: 20px; border-radius: 99px; background: var(--ok-field); transition: background .2s; flex-shrink: 0; }
.okg-switch-ui::after { content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.2); transition: transform .2s var(--ok-ease); }
.okg-switch input:checked + .okg-switch-ui { background: var(--ok-primary); }
.okg-switch input:checked + .okg-switch-ui::after { transform: translateX(14px); }
.okg-switch input:focus-visible + .okg-switch-ui { box-shadow: var(--ok-ring); }
.okg-x { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--ok-soft); cursor: pointer; }
.okg-limit { max-width: 480px; margin: 60px auto; padding: 36px 28px; text-align: center; background: #fff; border: 1px solid var(--ok-line); border-radius: 16px; box-shadow: var(--ok-sh-md); }
.okg-limit h2 { font-size: var(--t-2xl); margin-bottom: 8px; }
.okg-limit p { color: var(--ok-soft); margin-bottom: 20px !important; }
/* watermark + free note in the live preview */
.inv-wm { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 1; overflow: hidden; }
.inv-wm img { max-width: 62%; max-height: 45%; }
.inv-wm span { font: 800 64px/1 var(--inv-font, var(--ok-font)); color: var(--inv-brand); transform: rotate(-35deg); white-space: nowrap; }

/* ── 18. Motion ────────────────────────────────────────────────────── */
@keyframes ok-spin { to { transform: rotate(360deg); } }
@keyframes ok-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ok-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ok-pop { from { opacity: 0; transform: scale(.97) translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes ok-modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ok-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ok-toast-out { to { opacity: 0; transform: translateX(16px); } }
@keyframes ok-shimmer { to { background-position: -200% 0; } }
@keyframes ok-float { 0%,100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-8px); } }
@keyframes ok-wave { 0%,60%,100% { transform: rotate(0); } 15%,45% { transform: rotate(14deg); } 30% { transform: rotate(-8deg); } }
@keyframes ok-shake { 20%,60% { transform: translateX(-5px); } 40%,80% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .okigs-root *, .ok-row-menu, .ok-toast { animation: none !important; transition: none !important; } }

/* ── 19. Responsive ────────────────────────────────────────────────── */
@media screen and (max-width: 782px) { body.admin-bar { --ok-bar-h: 46px; } }
@media (max-width: 1200px) {
  .ok-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .okg-open { display: none; }
}
@media (max-width: 1100px) {
  .okigs-root .okg-panel-toggle { display: inline-flex; }
  .okg-panel { position: fixed; z-index: 70; right: 0; top: calc(var(--ok-top-h) + var(--ok-bar-h)); bottom: 0; width: 320px; max-width: 88vw; transform: translateX(100%); transition: transform .25s var(--ok-ease); box-shadow: var(--ok-sh-lg); }
  .okg-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--ok-line); position: sticky; top: 0; background: #fff; z-index: 1; }
  .okg-panel-head strong { font: 600 var(--t-md)/1 var(--ok-font-head); color: var(--ok-ink); }
  .panel-open .okg-panel { transform: none; }
  .panel-open .okg-scrim { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(16,24,40,.35); }
}
@media (max-width: 1024px) {
  :root { --ok-nav-w: 0px; }
  .okigs-sidebar { width: 264px; transform: translateX(-100%); transition: transform .25s var(--ok-ease); box-shadow: none; }
  .okigs-sidebar.open { transform: none; box-shadow: var(--ok-sh-lg); }
  .ok-nav-backdrop.visible { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(16,24,40,.35); }
  .okigs-root .ok-menu-toggle { display: inline-flex; }
  .okigs-topbar { padding: 0 16px; }
  .ok-profile-grid { grid-template-columns: 1fr; }
  .ok-auth { grid-template-columns: 1fr; }
  .ok-auth-aside { display: none; }
}
@media (max-width: 680px) {
  .ok-hide-sm, .okg-hide-sm { display: none !important; }
  .okigs-topbar-sub { display: none; }
  .okigs-page { padding: 18px 14px 20px; }
  .ok-hero { align-items: flex-start; }
  .ok-hero-side { width: 100%; justify-content: space-between; }
  .ok-stats-grid { gap: 10px; }
  .ok-stat-card { padding: 14px; gap: 10px; flex-direction: column; }
  .ok-stat-icon-box { width: 34px; height: 34px; }
  .ok-stat-sub { display: none; }
  .ok-form-grid, .ok-channel-grid { grid-template-columns: 1fr; }
  .ok-table-inv th:nth-child(3), .ok-table-inv td:nth-child(3), .ok-table-inv th:nth-child(4), .ok-table-inv td:nth-child(4) { display: none; }
  .ok-card-header, .ok-card-body { padding-left: 16px; padding-right: 16px; }
  .ok-filter-bar { padding: 0 16px 12px; }
  .ok-save-bar { padding: 10px 14px; }
  .ok-save-bar p { display: none; }
  .ok-auth-main { padding: 20px; }
  .okg-top { padding: 8px 10px; }
  .okg-top .ok-btn span { display: none; }
  .okg-top .ok-btn { width: 36px; padding: 0; }
  .okg-top .ok-btn-primary { width: auto; padding: 0 12px; }
  .okg-top .ok-btn-primary span { display: inline; }
  .okg-doc strong { font-size: var(--t-md); }
  .okigs-gen-status { display: none; }
  .okigs-gen-stage { padding: 10px 8px 40px; }
  .okg-hint { display: none; }
  .okg-panel { width: 100%; max-width: none; top: auto; height: 78vh; border-radius: 18px 18px 0 0; transform: translateY(100%); }
  .ok-toast-host { left: 12px; right: 12px; bottom: 12px; }
  .ok-toast { max-width: none; }
  .okigs-notif-pop { position: fixed; left: 12px; right: 12px; top: calc(var(--ok-top-h) + var(--ok-bar-h) + 4px); width: auto; }
  .ok-public-bar .ok-btn-ghost { display: none; }
}
.okg-top-l { flex: 1; min-width: 0; }
.okg-doc { min-width: 0; }
.okg-doc strong { overflow: hidden; text-overflow: ellipsis; }

/* ── 20. Footer (Settings → Footer) ───────────────────────────────── */
.ok-footer { margin-top: auto; font-size: var(--t-xs); color: var(--ok-soft); }
.ok-footer-in { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 22px; }
.ok-footer-copy { margin: 0; color: var(--ok-soft); }
.ok-footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.okigs-root .ok-footer-links a { color: var(--ok-soft); font-weight: 500; padding: 2px 0; transition: color .15s; }
.ok-footer-links a + a::before { content: ''; display: inline-block; width: 3px; height: 3px; margin: 0 10px 2px; border-radius: 50%; background: var(--ok-field); vertical-align: middle; }
.okigs-root .ok-footer-links a:hover { color: var(--ok-ink); }
.ok-footer-end { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ok-footer-img { display: inline-flex; align-items: center; opacity: .75; filter: grayscale(.2); transition: opacity .15s, filter .15s; }
.ok-footer-img img { height: 22px; width: auto; max-width: 110px; object-fit: contain; }
a.ok-footer-img:hover { opacity: 1; filter: none; }
.ok-footer-credit { color: var(--ok-muted); white-space: nowrap; }
.okigs-root .ok-footer-credit a, .ok-footer-credit strong { color: var(--ok-text); font-weight: 600; }
.okigs-root .ok-footer-credit a:hover { color: var(--ok-primary); }
.ok-footer-app { margin-top: auto; padding: 16px 0 18px; border-top: 1px solid var(--ok-line); }
.okigs-page > .ok-footer-app { margin-top: auto; }
.okigs-page > *:nth-last-child(2) { margin-bottom: 36px; }
.ok-footer-public { border-top: 1px solid var(--ok-line); background: #fff; }
.ok-footer-public .ok-footer-in { max-width: 1100px; margin: 0 auto; padding: 16px 24px; }
.ok-footer-auth { width: 100%; }
.ok-footer-auth .ok-footer-in { justify-content: flex-start; gap: 6px 16px; }

/* ── 21. Full-screen generator + admin-bar fix ────────────────────── */
/* WordPress pushes the page down for its admin bar; the app already accounts for it. */
html:has(body.okigs-canvas) { margin-top: 0 !important; }
/* Generator: the page scrolls normally (real browser scrollbar); the action bar and
   settings panel stay pinned while you scroll through the invoice. */
.okigs-root[data-page="generator"] { --okg-top-h: 56px; }
.okigs-root[data-page="generator"] .okigs-page { min-height: 0; }
.okigs-root[data-page="generator"] .okigs-gen-wrap { display: block; height: auto; }
.okigs-root[data-page="generator"] .okg-top { position: sticky; top: calc(var(--ok-top-h) + var(--ok-bar-h)); z-index: 30; min-height: var(--okg-top-h); box-shadow: 0 1px 0 var(--ok-line), 0 6px 12px -10px rgba(16,24,40,.18); border-bottom: 0; }
.okigs-root[data-page="generator"] .okg-body { display: flex; align-items: flex-start; min-height: calc(100vh - var(--ok-top-h) - var(--ok-bar-h) - var(--okg-top-h)); }
.okigs-root[data-page="generator"] .okigs-gen-stage { overflow: visible; min-height: calc(100vh - var(--ok-top-h) - var(--ok-bar-h) - var(--okg-top-h)); align-self: stretch; }
@media (min-width: 1101px) {
  .okigs-root[data-page="generator"] .okg-panel { position: sticky; top: calc(var(--ok-top-h) + var(--ok-bar-h) + var(--okg-top-h)); height: calc(100vh - var(--ok-top-h) - var(--ok-bar-h) - var(--okg-top-h)); overflow-y: auto; }
}

/* Slim, brand-tinted scrollbars across the app */
html:has(body.okigs-canvas) { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ok-primary) 30%, #C4CAD4) transparent; }
body.okigs-canvas ::-webkit-scrollbar, html:has(body.okigs-canvas)::-webkit-scrollbar { width: 12px; height: 12px; }
body.okigs-canvas ::-webkit-scrollbar-track, html:has(body.okigs-canvas)::-webkit-scrollbar-track { background: transparent; }
body.okigs-canvas ::-webkit-scrollbar-thumb, html:has(body.okigs-canvas)::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ok-primary) 26%, #C4CAD4); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
body.okigs-canvas ::-webkit-scrollbar-thumb:hover, html:has(body.okigs-canvas)::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--ok-primary) 55%, #98A2B3); }

/* PayPal + card buttons */
.ok-pay-stack { display: flex; flex-direction: column; gap: 8px; }
.okigs-root .ok-btn-paypal, .ok-btn-paypal { background: #FFC439; border-color: #FFC439; color: #111; }
.okigs-root .ok-btn-paypal:hover, .ok-btn-paypal:hover { background: #F2B72E; border-color: #F2B72E; color: #111; }
.ok-pp { font: italic 800 16px/1 "Verdana", "Segoe UI", sans-serif; color: #003087; letter-spacing: -.02em; }
.ok-pp b { color: #009CDE; font-weight: 800; }

@media (max-width: 680px) {
  .ok-footer-in { flex-direction: column; align-items: flex-start; }
  .okigs-root .ok-hero-title { font-size: calc(var(--ok-fs) + 8px); }
  .ok-hero { padding: 20px; border-radius: 16px; }
  .ok-hero-side { width: 100%; justify-content: space-between; }
  .okigs-page { padding: 18px 14px 0; }
}
.ok-public { display: flex; flex-direction: column; }
.ok-public-main { flex: 1; width: 100%; }
.ok-public > .ok-footer-public { margin-top: auto; }

/* ═══ Generator on tablets & phones: settings panel sits under the invoice ═══ */
@media (max-width: 1100px) {
  .okigs-root[data-page="generator"] .okg-body { flex-direction: column; align-items: stretch; min-height: 0; }
  .okigs-root[data-page="generator"] .okigs-gen-stage { min-height: 0; padding-bottom: 24px; }
  .okigs-root[data-page="generator"] .okg-panel,
  .okigs-root[data-page="generator"].panel-open .okg-panel {
    position: static; transform: none; width: auto; max-width: none; height: auto; top: auto;
    border-left: 0; border-top: 1px solid var(--ok-line); border-radius: 0; box-shadow: none; overflow: visible;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .okigs-root[data-page="generator"] .okg-panel-head { display: flex; position: static; grid-column: 1 / -1; padding: 16px 18px 4px; border-bottom: 0; }
  .okigs-root[data-page="generator"] .okg-panel-head strong { font-size: var(--t-lg); }
  .okigs-root[data-page="generator"] .okg-panel-head .okg-x { display: none; }
  .okigs-root[data-page="generator"] .okg-scrim { display: none !important; }
  .okigs-root[data-page="generator"] .okg-tpls { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); }
  .okigs-root[data-page="generator"] .okg-sec { border-bottom: 1px solid var(--ok-line-2); }
}
@media (max-width: 680px) {
  .okigs-root[data-page="generator"] .okg-panel,
  .okigs-root[data-page="generator"].panel-open .okg-panel { grid-template-columns: 1fr; }
  .okigs-root[data-page="generator"] .okg-tpls { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .okigs-root[data-page="generator"] .ok-tpl-mini-thumb { height: 92px; }
  .okigs-root[data-page="generator"] .okg-sw { width: 30px; height: 30px; }
  .okigs-root[data-page="generator"] .okg-swatches { gap: 10px; }
  .okigs-root[data-page="generator"] input.okg-input, .okigs-root[data-page="generator"] select.okg-input { height: 44px; font-size: 16px; }
  .okigs-root[data-page="generator"] .okg-sec { padding: 18px 16px; }
  .okigs-root[data-page="generator"] .okigs-gen-stage { padding: 12px 10px 20px; }
}

/* ═══ Custom template requests (Templates page) ═══ */
.ok-req { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 22px; margin-bottom: 20px; padding: 22px 26px; border-radius: 18px; color: #fff;
  background: radial-gradient(420px 220px at 100% 0%, color-mix(in srgb, var(--ok-accent) 45%, transparent), transparent 65%), linear-gradient(135deg, var(--ok-primary), var(--ok-primary-d));
  box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--ok-primary) 80%, transparent); animation: ok-rise .4s var(--ok-ease) both; }
.ok-req-art { position: relative; width: 74px; height: 86px; }
.ok-req-art span { position: absolute; width: 54px; height: 70px; border-radius: 6px; background: #fff; box-shadow: 0 8px 18px rgba(0,0,0,.25); }
.ok-req-art span:nth-child(1) { left: 0; top: 10px; transform: rotate(-10deg); opacity: .55; }
.ok-req-art span:nth-child(2) { left: 10px; top: 6px; transform: rotate(-3deg); opacity: .8; }
.ok-req-art span:nth-child(3) { left: 20px; top: 2px; transform: rotate(5deg); background: linear-gradient(#fff 0 18%, var(--ok-accent) 18% 24%, #fff 24% 44%, #E2E8F0 44% 48%, #fff 48% 58%, #E2E8F0 58% 62%, #fff 62% 80%, var(--ok-primary) 80%); }
.ok-req-eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; background: rgba(255,255,255,.16); font-size: var(--t-xs); font-weight: 600; margin-bottom: 8px; }
.ok-req-eyebrow .ok-ico { width: 13px; height: 13px; }
.okigs-root .ok-req h2 { color: #fff; font-size: calc(var(--ok-fs) + 6px); margin-bottom: 4px; }
.ok-req p { color: rgba(255,255,255,.82); font-size: var(--t-sm); max-width: 560px; }
.okigs-root .ok-req .ok-btn-primary { background: #fff; border-color: #fff; color: var(--ok-primary); }
.okigs-root .ok-req .ok-btn-primary:hover { background: color-mix(in srgb, var(--ok-primary) 7%, #fff); color: var(--ok-primary-d); }
.ok-req-list { padding: 0 20px 14px; }
.ok-req-item { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--ok-line-2); }
.ok-req-sw { display: flex; flex-direction: column; gap: 3px; } .ok-req-sw i { display: block; width: 22px; height: 12px; border-radius: 4px; }
.ok-req-main { flex: 1; min-width: 0; }
.ok-req-main strong { display: block; color: var(--ok-ink); font-size: var(--t-md); }
.ok-req-main small { color: var(--ok-soft); font-size: var(--t-xs); }
.ok-req-reply { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px !important; padding: 8px 10px; border-radius: 8px; background: var(--ok-bg); font-size: var(--t-sm); color: var(--ok-text); }
.ok-req-reply .ok-ico { width: 14px; height: 14px; margin-top: 2px; color: var(--ok-primary); }
.ok-req-status { padding: 3px 10px; border-radius: 99px; font-size: var(--t-xs); font-weight: 600; white-space: nowrap; background: var(--ok-line-2); color: var(--ok-text); }
.ok-req-status.is-new { background: var(--ok-primary-50); color: var(--ok-primary); }
.ok-req-status.is-in_progress { background: var(--ok-amber-bg); color: var(--ok-amber); }
.ok-req-status.is-ready { background: var(--ok-green-bg); color: var(--ok-green); }
.ok-req-status.is-declined { background: var(--ok-red-bg); color: var(--ok-red); }
.ok-req-styles { display: flex; flex-wrap: wrap; gap: 6px; }
.ok-req-chip input { position: absolute; opacity: 0; pointer-events: none; }
.ok-req-chip span { display: inline-flex; align-items: center; height: 34px; padding: 0 13px; border: 1px solid var(--ok-field); border-radius: 99px; font-size: var(--t-sm); font-weight: 500; color: var(--ok-text); cursor: pointer; transition: all .15s; background: #fff; }
.ok-req-chip span:hover { border-color: var(--ok-primary); color: var(--ok-primary); }
.ok-req-chip input:checked + span { background: var(--ok-primary); border-color: var(--ok-primary); color: #fff; }
.ok-req-chip input:focus-visible + span { box-shadow: var(--ok-ring); }
.ok-req-file { position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px; border: 1.5px dashed var(--ok-field); border-radius: var(--ok-r); background: var(--ok-bg); color: var(--ok-soft); font-size: var(--t-sm); cursor: pointer; }
.ok-req-file:hover { border-color: var(--ok-primary); color: var(--ok-primary); }
.ok-req-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ok-req-file .ok-ico { width: 16px; height: 16px; transform: rotate(180deg); }
/* default template */
.ok-tpl-card { position: relative; }
.ok-tpl-default-badge { display: none; position: absolute; z-index: 3; top: 10px; left: 10px; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 99px; background: var(--ok-green); color: #fff; font-size: 11px; font-weight: 600; box-shadow: var(--ok-sh-sm); }
.ok-tpl-default-badge .ok-ico { width: 12px; height: 12px; }
.ok-tpl-card.is-default { border-color: color-mix(in srgb, var(--ok-green) 45%, #fff); }
.ok-tpl-card.is-default .ok-tpl-default-badge { display: inline-flex; }
.ok-tpl-card.is-default .ok-set-default { display: none; }
.ok-tpl-actions { display: flex; gap: 6px; margin-left: auto; }
.ok-tpl-foot { flex-wrap: wrap; }
.ok-tpl-access.custom { background: #F4F3FF; color: #5925DC; }
/* footer under the generator */
.okigs-page.is-flush > .ok-footer-gen { padding: 14px 24px 16px; background: #fff; border-top: 1px solid var(--ok-line); margin: 0; }
@media (max-width: 760px) {
  .ok-req { grid-template-columns: 1fr; text-align: left; padding: 20px; }
  .ok-req-art { display: none; }
  .ok-req-cta .ok-btn { width: 100%; }
  .ok-req-item { flex-wrap: wrap; }
  .okigs-page.is-flush > .ok-footer-gen { padding: 14px 16px; }
}

/* Search boxes always fit their container (themes may force a min-width on search inputs) */
.okigs-root .ok-search { min-width: 0; }
.okigs-root .ok-search input[type="search"] { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; -webkit-appearance: none; appearance: none; }
.okigs-root .ok-search input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
.okigs-root .ok-filter-bar .ok-search-sm { flex: 0 1 280px; min-width: 200px; }
@media (max-width: 1100px) { .okigs-root .ok-filter-bar .ok-search-sm { flex: 1 1 100%; max-width: none; } }

/* ═══ Notice component ═══ */
.ok-notice { position: relative; display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding: 14px 16px 14px 14px; border-radius: 14px; border: 1px solid var(--ok-line); background: #fff; box-shadow: var(--ok-sh-xs); animation: ok-rise .35s var(--ok-ease) both; overflow: hidden; }
.ok-notice::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: currentColor; opacity: .9; }
.ok-notice-ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; }
.ok-notice-ic .ok-ico { width: 18px; height: 18px; }
.ok-notice-body { flex: 1; min-width: 0; }
.ok-notice-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ok-notice-title strong { font: 700 var(--t-md)/1.3 var(--ok-font-head); color: var(--ok-ink); }
.ok-notice-body p { margin: 2px 0 0 !important; font-size: var(--t-sm); line-height: 1.5; color: var(--ok-text); }
.ok-notice-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; background: rgba(255,255,255,.18); }
.ok-notice-chip .ok-ico { width: 12px; height: 12px; }
.okigs-root .ok-notice-cta { flex-shrink: 0; }
.ok-notice-cta .ok-ico { width: 14px; height: 14px; }
.ok-notice-x { flex-shrink: 0; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--ok-muted); cursor: pointer; transition: all .15s; }
.okigs-root .ok-notice-x:hover { background: var(--ok-line-2); color: var(--ok-ink); }
.ok-notice.is-leaving { animation: ok-notice-out .28s ease forwards; }
@keyframes ok-notice-out { to { opacity: 0; transform: translateY(-6px); height: 0; margin: 0; padding-top: 0; padding-bottom: 0; } }
/* tones */
.ok-notice-info    { color: var(--ok-primary); } .ok-notice-info .ok-notice-ic    { background: var(--ok-primary-50); color: var(--ok-primary); }
.ok-notice-success { color: #17B26A; }           .ok-notice-success .ok-notice-ic { background: var(--ok-green-bg); color: var(--ok-green); }
.ok-notice-warning { color: #F79009; }           .ok-notice-warning .ok-notice-ic { background: var(--ok-amber-bg); color: var(--ok-amber); }
.ok-notice-error   { color: var(--ok-accent); }  .ok-notice-error .ok-notice-ic   { background: var(--ok-red-bg); color: var(--ok-red); }
.okigs-root .ok-notice-info .ok-notice-cta, .okigs-root .ok-notice-success .ok-notice-cta { background: var(--ok-primary); border-color: var(--ok-primary); color: #fff; }
.okigs-root .ok-notice-warning .ok-notice-cta { background: #fff; border-color: #FEC84B; color: var(--ok-amber); }
.okigs-root .ok-notice-warning .ok-notice-cta:hover { background: var(--ok-amber-bg); color: var(--ok-amber); }
.okigs-root .ok-notice-error .ok-notice-cta { background: var(--ok-accent); border-color: var(--ok-accent); color: #fff; }
.okigs-root .ok-notice-error .ok-notice-cta:hover { background: color-mix(in srgb, var(--ok-accent) 85%, #000); color: #fff; }
/* promo: full brand treatment */
.ok-notice-promo { color: #fff; border: 0; padding: 16px 18px 16px 16px;
  background: radial-gradient(380px 180px at 100% 0%, color-mix(in srgb, var(--ok-accent) 55%, transparent), transparent 70%), linear-gradient(120deg, var(--ok-primary), var(--ok-primary-d));
  box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--ok-primary) 85%, transparent); }
.ok-notice-promo::before { display: none; }
.ok-notice-promo::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .3; background-image: radial-gradient(rgba(255,255,255,.6) 1px, transparent 1.2px); background-size: 16px 16px; -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000); mask-image: linear-gradient(90deg, transparent 40%, #000); }
.ok-notice-promo .ok-notice-ic { background: rgba(255,255,255,.18); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); animation: ok-sparkle 3s ease-in-out infinite; }
@keyframes ok-sparkle { 50% { transform: rotate(-8deg) scale(1.06); } }
.ok-notice-promo .ok-notice-title strong { color: #fff; }
.ok-notice-promo .ok-notice-body p { color: rgba(255,255,255,.86); }
.ok-notice-promo .ok-notice-chip { background: #fff; color: var(--ok-accent); }
.okigs-root .ok-notice-promo .ok-notice-cta { position: relative; z-index: 1; background: #fff; border-color: #fff; color: var(--ok-primary); }
.okigs-root .ok-notice-promo .ok-notice-cta:hover { background: color-mix(in srgb, var(--ok-primary) 7%, #fff); color: var(--ok-primary-d); }
.okigs-root .ok-notice-promo .ok-notice-x { position: relative; z-index: 1; color: rgba(255,255,255,.75); }
.okigs-root .ok-notice-promo .ok-notice-x:hover { background: rgba(255,255,255,.15); color: #fff; }
.ok-notice-wrap { padding: 0 20px; }
.ok-notice-wrap .ok-notice { margin-bottom: 14px; }
@media (max-width: 680px) {
  .ok-notice { flex-wrap: wrap; align-items: flex-start; padding-right: 44px; }
  .ok-notice-x { position: absolute; top: 10px; right: 8px; }
  .okigs-root .ok-notice-cta { margin-left: 56px; }
}

/* request quota / payment */
.ok-req-quota { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 4px 11px; border-radius: 99px; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); font-size: var(--t-xs); font-weight: 600; }
.ok-req-paynote { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--ok-primary-50); border: 1px solid var(--ok-primary-100); color: var(--ok-primary); }
.ok-req-paynote .ok-ico { width: 18px; height: 18px; margin-top: 2px; }
.ok-req-paynote strong { display: block; color: var(--ok-ink); font-size: var(--t-md); }
.ok-req-paynote span { font-size: var(--t-sm); color: var(--ok-text); }
.ok-req-status.is-awaiting_payment { background: var(--ok-amber-bg); color: var(--ok-amber); }
.ok-req-paybtns { display: inline-flex; gap: 6px; }
.ok-modal-footer .ok-btn-paypal { min-width: 120px; }
@media (max-width: 680px) {
  .okigs-root .ok-notice .ok-notice-x, .okigs-root .ok-notice-promo .ok-notice-x { position: absolute; top: 10px; right: 8px; z-index: 2; }
}

/* ═══════════════════════════════════════════════════════════════
   Legal pages (Privacy · Terms · Refund)
   ═══════════════════════════════════════════════════════════════ */
.ok-legal { background: var(--ok-bg); }
.ok-legal .ok-public-bar { position: relative; z-index: 2; }
.ok-legal-hero { position: relative; overflow: hidden; margin-top: -76px; padding: 118px 24px 96px; text-align: center; isolation: isolate;
  background: radial-gradient(700px 360px at 12% 0%, color-mix(in srgb, var(--ok-primary) 16%, transparent), transparent 70%),
              radial-gradient(600px 340px at 92% 10%, color-mix(in srgb, var(--ok-accent) 12%, transparent), transparent 70%),
              linear-gradient(180deg, #fff, var(--ok-bg)); }
.ok-legal-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: linear-gradient(var(--ok-line) 1px, transparent 1px), linear-gradient(90deg, var(--ok-line) 1px, transparent 1px); background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 70%); }
.ok-legal-hero-in { max-width: 820px; margin: 0 auto; animation: ok-rise .5s var(--ok-ease) both; }
.ok-legal-switch { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 5px; margin-bottom: 26px; background: rgba(255,255,255,.8); border: 1px solid var(--ok-line); border-radius: 99px; box-shadow: var(--ok-sh-sm); backdrop-filter: blur(8px); }
.okigs-root .ok-legal-switch a { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 15px; border-radius: 99px; color: var(--ok-text); font-weight: 500; font-size: var(--t-sm); transition: all .15s; }
.okigs-root .ok-legal-switch a:hover { background: var(--ok-bg); color: var(--ok-ink); }
.okigs-root .ok-legal-switch a.is-on { background: var(--ok-primary); color: #fff; box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--ok-primary) 70%, transparent); }
.ok-legal-switch .ok-ico { width: 15px; height: 15px; }
.okigs-root .ok-legal-hero h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.08; letter-spacing: -.035em; margin: 10px 0 14px; }
.ok-legal-lead { font-size: calc(var(--ok-fs) + 4px); color: var(--ok-soft); line-height: 1.55; max-width: 620px; margin: 0 auto !important; }
.ok-legal-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }
.ok-legal-meta span, .ok-legal-print { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 99px; background: #fff; border: 1px solid var(--ok-line); color: var(--ok-text); font: 500 var(--t-sm)/1 var(--ok-font); box-shadow: var(--ok-sh-xs); }
.ok-legal-meta .ok-ico, .ok-legal-print .ok-ico { width: 15px; height: 15px; color: var(--ok-primary); }
.ok-legal-print { cursor: pointer; }
.okigs-root .ok-legal-print:hover { border-color: var(--ok-primary-200); color: var(--ok-primary); }

.ok-legal-main { position: relative; z-index: 1; max-width: 1160px; margin: -56px auto 0; padding: 0 24px 72px; }
.ok-legal-short { padding: 24px; margin-bottom: 26px; background: #fff; border: 1px solid var(--ok-line); border-radius: 20px; box-shadow: var(--ok-sh-md); animation: ok-rise .5s var(--ok-ease) .08s both; }
.okigs-root .ok-legal-short h2 { display: flex; align-items: center; gap: 8px; font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ok-accent); margin-bottom: 16px; font-family: var(--ok-font); }
.ok-legal-short h2 .ok-ico { width: 15px; height: 15px; }
.ok-legal-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ok-legal-card { padding: 18px; border-radius: 14px; background: linear-gradient(180deg, var(--ok-primary-50), #fff); border: 1px solid var(--ok-primary-100); }
.ok-legal-card-ic { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--ok-primary); color: #fff; margin-bottom: 12px; box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--ok-primary) 80%, transparent); }
.ok-legal-card strong { display: block; font: 700 var(--t-lg)/1.3 var(--ok-font-head); color: var(--ok-ink); margin-bottom: 4px; }
.ok-legal-card p { font-size: var(--t-sm); color: var(--ok-text); line-height: 1.55; }

.ok-legal-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; }
.ok-legal-toc { position: sticky; top: 24px; }
.ok-legal-toc-in { padding: 18px 12px 12px; background: #fff; border: 1px solid var(--ok-line); border-radius: 16px; box-shadow: var(--ok-sh-xs); }
.ok-legal-toc strong { display: block; padding: 0 8px 10px; font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ok-muted); }
.ok-legal-toc ol { list-style: none; margin: 0; padding: 0; }
.okigs-root .ok-legal-toc a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 9px; color: var(--ok-text); font-size: var(--t-sm); line-height: 1.35; transition: all .15s; }
.ok-legal-toc a span { width: 22px; height: 22px; flex-shrink: 0; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; background: var(--ok-line-2); color: var(--ok-soft); font: 600 11px/1 var(--ok-font); transition: all .15s; }
.okigs-root .ok-legal-toc a:hover { background: var(--ok-bg); color: var(--ok-ink); }
.okigs-root .ok-legal-toc a.is-on { background: var(--ok-primary-50); color: var(--ok-primary); font-weight: 600; }
.ok-legal-toc a.is-on span { background: var(--ok-primary); color: #fff; }

.ok-legal-doc { padding: 12px 44px 40px; background: #fff; border: 1px solid var(--ok-line); border-radius: 20px; box-shadow: var(--ok-sh-xs); }
.ok-legal-sec { padding: 30px 0 26px; border-bottom: 1px solid var(--ok-line-2); scroll-margin-top: 24px; }
.ok-legal-sec:last-of-type { border-bottom: 0; }
.okigs-root .ok-legal-sec h2 { display: flex; align-items: center; gap: 14px; font-size: calc(var(--ok-fs) + 8px); letter-spacing: -.02em; margin-bottom: 14px; }
.ok-legal-num { flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--ok-primary-50); color: var(--ok-primary); font: 700 14px/1 var(--ok-font-head); box-shadow: inset 0 0 0 1px var(--ok-primary-100); }
.ok-legal-body { padding-left: 52px; font-size: calc(var(--ok-fs) + 1.5px); line-height: 1.8; color: var(--ok-text); }
.ok-legal-body p { margin: 0 0 12px !important; }
.ok-legal-body strong { color: var(--ok-ink); }
.okigs-root .ok-legal-body a { color: var(--ok-primary); text-decoration: underline; text-decoration-color: var(--ok-primary-200); text-underline-offset: 3px; }
.ok-legal-body ul, .ok-legal-body ol { margin: 4px 0 14px; padding: 0; list-style: none; counter-reset: okl; }
.ok-legal-body li { position: relative; padding: 6px 0 6px 30px; }
.ok-legal-body ul li::before { content: ''; position: absolute; left: 4px; top: 15px; width: 12px; height: 12px; border-radius: 4px; background: var(--ok-primary-100); box-shadow: inset 0 0 0 3px var(--ok-primary-50); }
.ok-legal-body ul li::after { content: ''; position: absolute; left: 8px; top: 19px; width: 4px; height: 4px; border-radius: 1px; background: var(--ok-primary); }
.ok-legal-body ol li { counter-increment: okl; }
.ok-legal-body ol li::before { content: counter(okl); position: absolute; left: 0; top: 7px; width: 22px; height: 22px; border-radius: 50%; background: var(--ok-primary); color: #fff; font: 700 11.5px/22px var(--ok-font); text-align: center; }
.ok-legal-contact { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; padding: 20px 22px; border-radius: 16px;
  background: radial-gradient(360px 160px at 100% 0%, color-mix(in srgb, var(--ok-accent) 14%, transparent), transparent 70%), linear-gradient(135deg, var(--ok-primary-50), #fff); border: 1px solid var(--ok-primary-100); }
.ok-legal-contact-ic { width: 46px; height: 46px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: var(--ok-primary); color: #fff; }
.ok-legal-contact > div { flex: 1; min-width: 200px; }
.ok-legal-contact strong { font: 700 var(--t-lg)/1.3 var(--ok-font-head); color: var(--ok-ink); }
.ok-legal-contact p { font-size: var(--t-sm); color: var(--ok-soft); }

@media (max-width: 960px) {
  .ok-legal-grid { grid-template-columns: 1fr; }
  .ok-legal-toc { position: static; }
  .ok-legal-toc ol { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
  .ok-legal-cards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ok-legal-hero { padding: 100px 16px 80px; }
  .ok-legal-main { padding: 0 12px 48px; }
  .ok-legal-doc { padding: 6px 18px 24px; border-radius: 16px; }
  .ok-legal-body { padding-left: 0; }
  .ok-legal-toc ol { grid-template-columns: 1fr; }
  .okigs-root .ok-legal-switch a { padding: 0 11px; font-size: 12.5px; }
}
@media print {
  .ok-legal .ok-public-bar, .ok-legal-switch, .ok-legal-toc, .ok-legal-print, .ok-legal .ok-footer, .ok-legal-contact .ok-btn { display: none !important; }
  .ok-legal-hero { margin: 0; padding: 0 0 16px; background: none; text-align: left; }
  .ok-legal-hero::before { display: none; }
  .ok-legal-main { margin: 0; padding: 0; max-width: none; }
  .ok-legal-grid { display: block; }
  .ok-legal-doc, .ok-legal-short { box-shadow: none; border: 0; padding: 0; }
  .ok-legal-sec { break-inside: avoid; }
}
/* public top bar spans the full content width (flex column parents shrink auto-margined children) */
.ok-public > .ok-public-bar { width: 100%; box-sizing: border-box; align-self: center; }
.ok-legal-switch { display: flex; width: max-content; max-width: 100%; margin: 0 auto 22px; }
@media print {
  .ok-legal { -webkit-print-color-adjust: exact; print-color-adjust: exact; background: #fff; }
  .ok-legal-hero-in { text-align: left; max-width: none; }
  .ok-legal-lead { margin: 0 !important; }
  .ok-legal-meta { justify-content: flex-start; }
}

/* ═══ Public pages: sticky top bar + clear dashboard button ═══ */
.ok-public > .ok-public-bar { position: sticky; top: var(--ok-bar-h); z-index: 60; max-width: none; margin: 0; padding: 12px max(24px, calc((100% - 1100px) / 2)); transition: background .2s, box-shadow .2s, backdrop-filter .2s; }
.ok-public > .ok-public-bar.is-stuck { background: rgba(255,255,255,.88); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); box-shadow: 0 1px 0 var(--ok-line), 0 8px 24px -16px rgba(16,24,40,.25); }
.ok-legal-hero { margin-top: -64px; }
.ok-public-nav { display: flex; align-items: center; gap: 8px; }
.okigs-root .ok-dash-btn { height: 42px; padding: 0 16px 0 6px; gap: 10px; border-radius: 99px; font-size: var(--t-md); box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--ok-primary) 80%, transparent); }
.okigs-root .ok-dash-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--ok-primary) 85%, transparent); }
.ok-dash-av { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.2); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45); display: inline-flex; align-items: center; justify-content: center; font: 700 11.5px/1 var(--ok-font); letter-spacing: .02em; }
.ok-dash-btn .ok-ico { transition: transform .2s; }
.ok-dash-btn:hover .ok-ico { transform: translateX(2px); }
/* floating button (appears after scrolling) */
.ok-float-cta { position: fixed; z-index: 70; right: 22px; bottom: 22px; display: inline-flex; align-items: center; gap: 9px; height: 50px; padding: 0 20px 0 16px; border-radius: 99px;
  background: var(--ok-primary); color: #fff !important; font: 600 var(--t-md)/1 var(--ok-font); text-decoration: none;
  box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--ok-primary) 75%, transparent), 0 2px 6px rgba(16,24,40,.12);
  opacity: 0; transform: translateY(16px) scale(.96); pointer-events: none; transition: opacity .25s var(--ok-ease), transform .25s var(--ok-ease), background .15s; }
.ok-float-cta.is-on { opacity: 1; transform: none; pointer-events: auto; }
.ok-float-cta:hover { background: var(--ok-primary-d); color: #fff; }
.ok-float-cta .ok-ico { width: 18px; height: 18px; }
@media (max-width: 640px) {
  .ok-public > .ok-public-bar { padding: 10px 14px; }
  .okigs-root .ok-dash-btn { height: 38px; padding: 0 12px 0 4px; font-size: var(--t-sm); }
  .ok-float-cta { left: 14px; right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); justify-content: center; }
  .ok-legal-hero { margin-top: -58px; }
}
@media print { .ok-float-cta { display: none !important; } }

/* ═══ Notices on phones: grid layout (identical in Safari, Chrome and Firefox) ═══ */
.ok-notice-chip { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 680px) {
  .okigs-root .ok-notice {
    display: grid; grid-template-columns: 38px minmax(0, 1fr); grid-template-areas: "ic body" "cta cta";
    align-items: start; column-gap: 12px; row-gap: 12px; padding: 14px 44px 14px 14px;
  }
  .okigs-root .ok-notice-ic { grid-area: ic; margin-left: 0; }
  .okigs-root .ok-notice-body { grid-area: body; }
  .okigs-root .ok-notice-cta { grid-area: cta; justify-self: stretch; margin-left: 0; height: 42px; justify-content: center; }
  .okigs-root .ok-notice:not(:has(.ok-notice-cta)) { grid-template-areas: "ic body"; }
  .okigs-root .ok-notice-title strong { font-size: var(--t-md); }
  .okigs-root .ok-notice-title { gap: 6px 8px; }
}

/* ═══ Invoice lists on phones: cards instead of a sideways-scrolling table ═══ */
@media (max-width: 680px) {
  .okigs-root .ok-table-inv, .okigs-root .ok-table-inv tbody { display: block; width: 100%; }
  .okigs-root .ok-table-inv thead { display: none; }
  .okigs-root .ok-table-wrap { overflow: visible; padding: 0 12px 12px; }
  .okigs-root .ok-table-inv tr {
    display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "num status" "client amount" "date actions";
    align-items: center; gap: 6px 10px; padding: 14px; margin-bottom: 10px; border: 1px solid var(--ok-line); border-radius: 14px; background: #fff; box-shadow: var(--ok-sh-xs);
  }
  .okigs-root .ok-table-inv td { display: block !important; padding: 0; border: 0; background: transparent !important; min-width: 0; }
  .okigs-root .ok-table-inv td:first-child { grid-area: num; }
  .okigs-root .ok-table-inv td:nth-child(2) { grid-area: client; }
  .okigs-root .ok-table-inv td:nth-child(3) { grid-area: date; font-size: var(--t-xs); }
  .okigs-root .ok-table-inv td.ok-muted-cell + td.ok-muted-cell { display: none !important; }
  .okigs-root .ok-table-inv td.ok-table-amount { grid-area: amount; justify-self: end; font-size: var(--t-lg); }
  .okigs-root .ok-table-inv td.ok-status-cell { grid-area: status; justify-self: end; }
  .okigs-root .ok-table-inv td:last-child { grid-area: actions; justify-self: end; }
  .okigs-root .ok-table-inv .ok-table-num { font-size: var(--t-md); }
  .okigs-root .ok-table-inv .ok-client-cell { max-width: 100%; overflow: hidden; }
  .okigs-root .ok-table-inv .ok-tbl-actions { gap: 4px; }
  .okigs-root .ok-table-inv .ok-tbl-btn { width: 38px; height: 38px; border: 1px solid var(--ok-line); background: #fff; color: var(--ok-text); }
  .okigs-root .ok-table-inv tr:hover td { background: transparent !important; }
}

/* ═══ WhatsApp "ready to send" panel ═══ */
.ok-wa-modal { max-width: 520px; }
.ok-wa-modal h3 { display: flex; align-items: center; gap: 10px; }
.ok-wa-badge { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: #ECFDF3; color: #16A34A; }
.ok-wa-badge .ok-ico { width: 18px; height: 18px; }
.ok-wa-modal textarea { min-height: 150px; font-size: var(--t-sm); }
.ok-wa-modal .ok-modal-footer .ok-btn-wa { min-width: 170px; }
@media (max-width: 680px) {
  .ok-overlay { align-items: flex-end; padding: 0; }
  .ok-overlay .ok-modal { max-width: none; border-radius: 20px 20px 0 0; max-height: 92vh; animation: ok-sheet-in .28s var(--ok-ease); }
  .ok-modal-footer { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .ok-modal-footer .ok-btn { flex: 1; }
}
@keyframes ok-sheet-in { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ═══ Sticky "Create invoice" button ═══ */
.ok-fab { position: fixed; z-index: 45; right: 24px; bottom: 24px; display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 22px 0 18px; border-radius: 99px;
  background: var(--ok-primary); color: #fff !important; font: 600 var(--t-md)/1 var(--ok-font); text-decoration: none;
  box-shadow: 0 16px 32px -12px color-mix(in srgb, var(--ok-primary) 80%, transparent), 0 3px 8px rgba(16,24,40,.14);
  opacity: 0; transform: translateY(18px) scale(.95); pointer-events: none; transition: opacity .25s var(--ok-ease), transform .25s var(--ok-ease), background .15s; }
.ok-fab.is-on { opacity: 1; transform: none; pointer-events: auto; }
.ok-fab:hover { background: var(--ok-primary-d); }
.ok-fab .ok-ico { width: 20px; height: 20px; }
.ok-fab::after { content: ''; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid color-mix(in srgb, var(--ok-primary) 35%, transparent); animation: ok-fab-ring 2.6s ease-out infinite; }
@keyframes ok-fab-ring { 0% { opacity: .9; transform: scale(.96); } 70%,100% { opacity: 0; transform: scale(1.14); } }
.okigs-root:has(.ok-overlay:not([hidden])) .ok-fab, .okigs-root:has(.ok-tour) .ok-fab { opacity: 0; pointer-events: none; }
@media (max-width: 680px) {
  .ok-fab { right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); height: 50px; }
  .okigs-page { padding-bottom: 80px; }
  .ok-toast-host { bottom: 84px; }
}

/* ═══ Generator on phones: action bar at the bottom (thumb-friendly) ═══ */
@media (max-width: 680px) {
  .okigs-root[data-page="generator"] .okg-top-r {
    position: fixed; z-index: 48; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 44px 44px minmax(0, 1fr) 44px; gap: 8px;
    padding: 10px 12px max(10px, env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
    border-top: 1px solid var(--ok-line); box-shadow: 0 -10px 24px -16px rgba(16,24,40,.3);
  }
  .okigs-root[data-page="generator"] .okg-top-r .okg-open, .okigs-root[data-page="generator"] .okg-top-r [data-a="new"] { display: none; }
  .okigs-root[data-page="generator"] .okg-top-r .ok-btn { width: 100%; height: 44px; padding: 0; }
  .okigs-root[data-page="generator"] .okg-top-r .ok-btn-primary { font-size: var(--t-md); gap: 8px; }
  .okigs-root[data-page="generator"] .okg-top-r .ok-btn-primary span { display: inline; }
  .okigs-root[data-page="generator"] .okg-top { min-height: 48px; }
  .okigs-root[data-page="generator"] .okg-body { padding-bottom: 72px; }
  .okigs-root[data-page="generator"] .ok-footer-gen { margin-bottom: 68px; }
}

/* ═══ Quick guide ═══ */
.ok-tour { position: fixed; inset: 0; z-index: 1200; animation: ok-fade .2s ease; }
.ok-tour.is-out { opacity: 0; transition: opacity .2s; }
.ok-tour-hole { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(16,24,40,.55), 0 0 0 3px #fff, 0 0 0 7px color-mix(in srgb, var(--ok-primary) 45%, transparent); transition: all .3s var(--ok-ease); pointer-events: none; }
.ok-tour-tip { position: fixed; z-index: 1; padding: 18px 18px 14px; background: #fff; border-radius: 16px; box-shadow: var(--ok-sh-lg); font-family: var(--ok-font); animation: ok-pop .22s var(--ok-ease); transition: left .3s var(--ok-ease), top .3s var(--ok-ease); }
.ok-tour-tip.is-center { left: 50% !important; top: 50% !important; width: min(360px, calc(100vw - 32px)) !important; transform: translate(-50%, -50%); text-align: center; }
.ok-tour-step { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--ok-accent); margin-bottom: 6px; }
.ok-tour-tip strong { display: block; font: 700 var(--t-lg)/1.3 var(--ok-font-head); color: var(--ok-ink); margin-bottom: 4px; }
.ok-tour-tip p { font-size: var(--t-sm); line-height: 1.55; color: var(--ok-text); margin: 0 0 14px !important; }
.ok-tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ok-tour-tip.is-center .ok-tour-actions { justify-content: center; }
.ok-tour-skip { border: 0; background: none; color: var(--ok-soft); font: 500 var(--t-sm)/1 var(--ok-font); cursor: pointer; padding: 8px 4px; }
.ok-tour-skip:hover { color: var(--ok-ink); }
.ok-tour-dots { display: flex; justify-content: center; gap: 5px; margin-top: 12px; }
.ok-tour-dots i { width: 6px; height: 6px; border-radius: 99px; background: var(--ok-line); transition: all .2s; }
.ok-tour-dots i.on { width: 18px; background: var(--ok-primary); }

/* ═══ Compact custom-template banner (free users & free period) ═══ */
.ok-req.is-compact { grid-template-columns: auto minmax(0, 1fr) auto; padding: 14px 20px; gap: 16px; border-radius: 16px; }
.ok-req.is-compact .ok-req-art { width: 46px; height: 54px; }
.ok-req.is-compact .ok-req-art span { width: 34px; height: 44px; }
.ok-req.is-compact .ok-req-eyebrow { display: none; }
.okigs-root .ok-req.is-compact h2 { font-size: calc(var(--ok-fs) + 2px); margin-bottom: 2px; }
.ok-req.is-compact p { font-size: var(--t-xs); }
.ok-req-cta { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.okigs-root .ok-req-up { color: rgba(255,255,255,.85); font-size: var(--t-xs); text-decoration: underline; text-underline-offset: 3px; }
.okigs-root .ok-req-up:hover { color: #fff; }
@media (max-width: 760px) {
  .ok-req.is-compact { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; gap: 10px; }
  .ok-req.is-compact .ok-req-cta { flex-direction: row; justify-content: space-between; }
  .ok-req.is-compact .ok-req-cta .ok-btn { width: auto; }
}

/* ═══ Subscription: billing controls + success page ═══ */
.ok-billing-row { margin-top: 14px; }
.ok-billing-state { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 99px; font-size: var(--t-sm); font-weight: 600; }
.ok-billing-state .ok-ico { width: 15px; height: 15px; }
.ok-billing-state.is-on { background: var(--ok-green-bg); color: var(--ok-green); }
.ok-billing-state.is-off { background: var(--ok-amber-bg); color: var(--ok-amber); }
.ok-billing-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ok-billing-actions:empty { display: none; }
.ok-pay-history { margin-top: 18px; border-top: 1px solid var(--ok-line-2); padding-top: 12px; }
.ok-pay-history summary { cursor: pointer; font-weight: 600; color: var(--ok-primary); font-size: var(--t-sm); }
.ok-pay-history table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: var(--t-sm); }
.ok-pay-history td { padding: 8px 4px; border-bottom: 1px solid var(--ok-line-2); color: var(--ok-text); }
.ok-pay-history .ok-pay-amt { text-align: right; font-weight: 600; color: var(--ok-ink); white-space: nowrap; }
.ok-success { max-width: 520px; margin: 40px auto; padding: 40px 32px; text-align: center; background: #fff; border: 1px solid var(--ok-line); border-radius: 20px; box-shadow: var(--ok-sh-md); animation: ok-rise .4s var(--ok-ease) both; }
.ok-success-ic { width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 22px; display: flex; align-items: center; justify-content: center; background: var(--ok-green-bg); color: var(--ok-green); }
.ok-success-ic.is-wait { background: var(--ok-primary-50); color: var(--ok-primary); }
.ok-success-ic.is-wait .ok-ico { animation: ok-spin 2.4s linear infinite; }
.okigs-root .ok-success h1 { font-size: calc(var(--ok-fs) + 12px); margin-bottom: 8px; }
.ok-success p { color: var(--ok-soft); margin-bottom: 22px !important; }
.ok-success-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ═══ Secure payment panel (Stripe embedded checkout) ═══ */
.ok-pay-modal { max-width: 560px; }
.ok-pay-head { display: flex; align-items: center; gap: 12px; }
.ok-pay-lock { width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--ok-green-bg); color: var(--ok-green); }
.ok-pay-lock .ok-ico { width: 18px; height: 18px; }
.ok-pay-body { overflow-y: auto; padding: 8px 8px 0; background: #fff; }
.ok-pay-mount { min-height: 420px; }
.ok-pay-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 420px; color: var(--ok-soft); font-size: var(--t-sm); }
.ok-pay-fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 360px; padding: 24px; text-align: center; }
.ok-pay-fallback > .ok-ico { width: 30px; height: 30px; color: var(--ok-amber); margin-bottom: 4px; }
.ok-pay-fallback strong { font: 700 var(--t-lg)/1.3 var(--ok-font-head); color: var(--ok-ink); }
.ok-pay-fallback span { color: var(--ok-soft); font-size: var(--t-sm); max-width: 360px; margin-bottom: 12px; }
.ok-pay-foot { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--ok-line-2); color: var(--ok-soft); font-size: var(--t-xs); text-align: center; }
.ok-pay-foot .ok-ico { width: 14px; height: 14px; color: var(--ok-green); flex-shrink: 0; }
@media (max-width: 680px) { .ok-pay-modal { max-height: 94vh; } .ok-pay-mount, .ok-pay-loading { min-height: 360px; } }

/* ═══ Never scroll sideways (no theme CSS on app pages any more) ═══ */
html:has(body.okigs-canvas), body.okigs-canvas { overflow-x: clip; max-width: 100%; }
.okigs-topbar { min-width: 0; }
.okigs-topbar-left { flex: 1 1 auto; min-width: 0; }
.okigs-topbar-left > div { min-width: 0; }
.okigs-topbar-title { overflow: hidden; text-overflow: ellipsis; }
.okigs-topbar-right { flex: 0 0 auto; }
@media (max-width: 680px) {
  .okigs-topbar { gap: 8px; padding: 0 12px; }
  .okigs-root[data-page="generator"] .okg-top-r { grid-template-columns: 44px 44px minmax(0, 1fr) 44px; box-sizing: border-box; width: 100%; max-width: 100vw; }
  .okigs-root[data-page="generator"] .okg-top-r .ok-btn { min-width: 0; overflow: hidden; }
  .okigs-root[data-page="generator"] .okg-top-r .okg-panel-toggle span { display: none; }
}
@media (max-width: 1100px) {
  .okigs-root[data-page="generator"] .okg-panel { min-width: 0; max-width: 100%; box-sizing: border-box; }
  .okigs-root[data-page="generator"] .okg-panel, .okigs-root[data-page="generator"].panel-open .okg-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .okigs-root[data-page="generator"] .okg-sec { min-width: 0; }
  .okigs-root[data-page="generator"] .okg-tpls { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); }
}
@media (max-width: 680px) {
  .okigs-root[data-page="generator"] .okg-panel, .okigs-root[data-page="generator"].panel-open .okg-panel { grid-template-columns: minmax(0, 1fr); }
  .okigs-root[data-page="generator"] .okg-tpls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .okigs-root[data-page="generator"] .okg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ═══ Fixes: generator bar above the settings panel; no floating button on the generator; footer never hidden ═══ */
@media (max-width: 1100px) { .okigs-root[data-page="generator"] .okg-panel, .okigs-root[data-page="generator"].panel-open .okg-panel { z-index: auto; } }
@media (max-width: 680px) { .okigs-root[data-page="generator"] .okg-top { z-index: 55; } .okigs-page > .ok-footer-app { padding-bottom: 76px; } }
.okigs-root[data-page="generator"] .ok-fab { display: none !important; }
.ok-tbl-share .ok-ico { transform: rotate(-12deg); }

/* ═══ Welcome setup ═══ */
.ok-onb { z-index: 1150; }
.ok-onb-card { position: relative; display: grid; grid-template-columns: 320px minmax(0, 1fr); width: min(940px, 100%); max-height: calc(100vh - 40px); overflow: hidden; background: #fff; border-radius: 22px; box-shadow: var(--ok-sh-lg); animation: ok-modal-in .3s var(--ok-ease); }
.ok-onb-side { position: relative; display: flex; flex-direction: column; gap: 22px; padding: 28px 24px; color: #fff; overflow: hidden;
  background: radial-gradient(420px 260px at 100% 0%, color-mix(in srgb, var(--ok-accent) 50%, transparent), transparent 70%), linear-gradient(160deg, var(--ok-primary), var(--ok-primary-d)); }
.ok-onb-wave { font-size: 30px; display: inline-block; animation: ok-wave 1.8s ease-in-out .4s 1; transform-origin: 70% 70%; }
.okigs-root .ok-onb-side h2 { color: #fff; font-size: calc(var(--ok-fs) + 10px); margin: 6px 0 6px; }
.ok-onb-side p { color: rgba(255,255,255,.82); font-size: var(--t-sm); line-height: 1.55; }
.ok-onb-preview { padding: 16px; border-radius: 14px; background: #fff; color: var(--ok-ink); box-shadow: 0 20px 40px -18px rgba(0,0,0,.45); transform: rotate(-1.5deg); }
.ok-onb-pv-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ok-onb-pv-logo { width: 44px; height: 44px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; background: var(--ok-primary-50); color: var(--ok-primary); font: 700 18px/1 var(--ok-font-head); }
.ok-onb-pv-logo img { width: 100%; height: 100%; object-fit: contain; }
.ok-onb-pv-inv { font: 700 16px/1 var(--ok-font-head); color: var(--ok-primary); }
.ok-onb-preview strong { display: block; font: 700 var(--t-md)/1.3 var(--ok-font-head); }
.ok-onb-preview small { display: block; font-size: 11px; color: var(--ok-soft); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ok-onb-pv-band { display: flex; justify-content: space-between; align-items: center; margin: 12px 0 8px; padding: 9px 11px; border-radius: 9px; background: var(--ok-primary); color: #fff; }
.ok-onb-pv-band span { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.ok-onb-pv-band b { font: 700 15px/1 var(--ok-font-head); }
.ok-onb-pv-pay { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--ok-soft); }
.ok-onb-pv-pay b { color: var(--ok-ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ok-onb-steps { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ok-onb-steps li { display: flex; align-items: center; gap: 10px; font-size: var(--t-sm); color: rgba(255,255,255,.7); transition: color .2s; }
.ok-onb-steps li span { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid rgba(255,255,255,.45); font-size: 11.5px; font-weight: 700; transition: all .2s; }
.ok-onb-steps li.is-on { color: #fff; font-weight: 600; } .ok-onb-steps li.is-on span { background: #fff; color: var(--ok-primary); border-color: #fff; }
.ok-onb-steps li.is-done span { background: rgba(255,255,255,.2); border-color: transparent; color: #fff; }
.ok-onb-main { display: flex; flex-direction: column; min-width: 0; overflow-y: auto; }
.ok-onb-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 28px 10px; }
.ok-onb-count { font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ok-accent); }
.ok-onb-skip { border: 0; background: none; color: var(--ok-soft); font: 500 var(--t-sm)/1 var(--ok-font); cursor: pointer; padding: 8px 4px; }
.okigs-root .ok-onb-skip:hover { color: var(--ok-ink); background: none; }
.ok-onb-bar { height: 4px; margin: 0 28px; border-radius: 99px; background: var(--ok-line-2); overflow: hidden; }
.ok-onb-bar i { display: block; height: 100%; width: 0; background: var(--ok-primary); border-radius: 99px; transition: width .35s var(--ok-ease); }
.ok-onb-step { display: none; padding: 22px 28px 8px; animation: ok-rise .3s var(--ok-ease); }
.ok-onb-step.is-on { display: block; }
.okigs-root .ok-onb-step h3 { font-size: calc(var(--ok-fs) + 8px); margin-bottom: 4px; }
.ok-onb-lead { color: var(--ok-soft); font-size: var(--t-sm); margin-bottom: 18px !important; }
.ok-onb-drop { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px; margin-bottom: 16px; border: 2px dashed var(--ok-field); border-radius: 14px; background: var(--ok-bg); cursor: pointer; transition: all .15s; }
.ok-onb-drop:hover, .ok-onb-drop.is-over { border-color: var(--ok-primary); background: var(--ok-primary-50); }
.ok-onb-drop.has-logo { border-style: solid; border-color: var(--ok-green); background: var(--ok-green-bg); }
.ok-onb-drop.is-busy { opacity: .6; pointer-events: none; }
.ok-onb-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ok-onb-drop-pv { width: 64px; height: 64px; flex-shrink: 0; border-radius: 12px; background: #fff; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; color: var(--ok-primary); box-shadow: var(--ok-sh-xs); }
.ok-onb-drop-pv img { width: 100%; height: 100%; object-fit: contain; }
.ok-onb-drop-pv .ok-ico { transform: rotate(180deg); }
.ok-onb-drop-t strong { display: block; color: var(--ok-ink); font-size: var(--t-md); }
.ok-onb-drop-t small { color: var(--ok-soft); font-size: var(--t-xs); }
.ok-onb-foot { margin-top: auto; padding: 16px 28px 22px; border-top: 1px solid var(--ok-line-2); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.ok-onb-note { display: flex; align-items: center; gap: 7px; font-size: var(--t-xs); color: var(--ok-soft); margin: 0 !important; }
.ok-onb-note .ok-ico { width: 14px; height: 14px; color: var(--ok-primary); }
.ok-onb-nav { display: flex; gap: 8px; margin-left: auto; }
.ok-onb-done { text-align: center; padding-top: 50px; }
.ok-onb-done-ic { width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 24px; display: flex; align-items: center; justify-content: center; background: var(--ok-green-bg); color: var(--ok-green); animation: ok-pop .4s var(--ok-ease); }
.ok-onb-done-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
@media (max-width: 760px) {
  .ok-onb { align-items: stretch; padding: 0; }
  .ok-onb-card { grid-template-columns: 1fr; width: 100%; max-height: none; height: 100%; border-radius: 0; }
  .ok-onb-side { padding: 18px 18px 14px; gap: 10px; }
  .ok-onb-side p, .ok-onb-steps, .ok-onb-preview { display: none; }
  .okigs-root .ok-onb-side h2 { font-size: calc(var(--ok-fs) + 5px); margin: 0; }
  .ok-onb-hello { display: flex; align-items: center; gap: 10px; }
  .ok-onb-wave { font-size: 24px; }
  .ok-onb-head, .ok-onb-step, .ok-onb-foot { padding-left: 18px; padding-right: 18px; }
  .ok-onb-bar { margin: 0 18px; }
  .ok-onb-foot { position: sticky; bottom: 0; background: #fff; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .ok-onb-note { order: 2; width: 100%; justify-content: center; }
  .ok-onb-nav { width: 100%; } .ok-onb-nav .ok-btn { flex: 1; height: 46px; }
}

/* ═══ Share panel ═══ */
.ok-share-modal { max-width: 520px; }
.ok-share-link { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; margin-bottom: 16px; border: 1px solid var(--ok-line); border-radius: 12px; background: var(--ok-bg); }
.ok-share-link > span { color: var(--ok-primary); display: inline-flex; } .ok-share-link > span .ok-ico { width: 16px; height: 16px; }
.okigs-root .ok-share-link input { flex: 1; height: 34px; border: 0; background: transparent; box-shadow: none; padding: 0; font-size: var(--t-sm); color: var(--ok-text); min-width: 0; }
.ok-share-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.ok-share-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border: 1px solid var(--ok-line); border-radius: 14px; background: #fff; cursor: pointer; text-align: left; font-family: var(--ok-font); transition: all .15s; }
.okigs-root .ok-share-tile:hover { border-color: var(--ok-primary-200); background: var(--ok-primary-50); transform: translateY(-1px); }
.ok-share-ic { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.ok-share-ic .ok-ico { width: 19px; height: 19px; }
.ok-share-tile strong { font-size: var(--t-md); color: var(--ok-ink); }
.ok-share-tile small { font-size: var(--t-xs); color: var(--ok-soft); }
.ok-share-quiet { margin-top: 16px; font-size: var(--t-xs); color: var(--ok-soft); }
@media (max-width: 480px) { .ok-share-grid { grid-template-columns: 1fr 1fr; } }

/* ═══ Contact & feedback ═══ */
.ok-contact { max-width: 1060px; margin: 0 auto; }
.ok-public .ok-contact { padding: 40px 0 20px; }
.ok-contact-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 36px; align-items: start; }
.okigs-root .ok-contact-intro h1 { font-size: clamp(30px, 4vw, 42px); letter-spacing: -.03em; margin: 8px 0 12px; }
.ok-contact-intro > p { font-size: calc(var(--ok-fs) + 2px); color: var(--ok-soft); line-height: 1.6; margin-bottom: 24px !important; }
.ok-contact-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ok-contact-points li { display: flex; gap: 12px; align-items: center; }
.ok-contact-points li > span { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--ok-primary-50); color: var(--ok-primary); }
.ok-contact-points strong { display: block; color: var(--ok-ink); font-size: var(--t-md); }
.ok-contact-points small { color: var(--ok-soft); font-size: var(--t-sm); }
.ok-contact-card { padding: 26px; background: #fff; border: 1px solid var(--ok-line); border-radius: 20px; box-shadow: var(--ok-sh-md); }
.ok-rate-row { display: flex; gap: 8px; }
.ok-rate-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ok-rate-opt span { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border: 1px solid var(--ok-line); border-radius: 14px; font-size: 24px; cursor: pointer; filter: grayscale(1); opacity: .6; transition: all .15s; }
.ok-rate-opt span:hover { filter: none; opacity: 1; transform: translateY(-2px); }
.ok-rate-opt input:checked + span { filter: none; opacity: 1; border-color: var(--ok-primary); background: var(--ok-primary-50); transform: scale(1.06); }
.ok-hp { position: absolute !important; left: -9999px !important; height: 0; overflow: hidden; }
.ok-contact-privacy { margin-top: 12px !important; text-align: center; font-size: var(--t-xs); color: var(--ok-muted); }
.ok-contact-done { text-align: center; padding: 30px 10px; }
.ok-contact-done .ok-success-ic { display: flex; }
.okigs-root .ok-contact-done h2 { font-size: calc(var(--ok-fs) + 8px); margin-bottom: 6px; }
.ok-contact-done p { color: var(--ok-soft); margin-bottom: 18px !important; }
@media (max-width: 860px) { .ok-contact-grid { grid-template-columns: 1fr; gap: 22px; } .ok-contact-card { padding: 20px; } .ok-public .ok-contact { padding-top: 16px; } }

/* ═══ Sign-in / sign-up: clear way to switch ═══ */
.ok-auth-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ok-auth-top-switch { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-sm); color: var(--ok-soft); }
.ok-auth-or { display: flex; align-items: center; gap: 12px; margin: 24px 0 14px; color: var(--ok-soft); font-size: var(--t-sm); font-weight: 500; }
.ok-auth-or::before, .ok-auth-or::after { content: ''; flex: 1; height: 1px; background: var(--ok-line); }
.okigs-root .ok-auth-alt { border-width: 1.5px; font-weight: 700; }
.okigs-root .ok-auth-alt:hover { background: var(--ok-primary-50); border-color: var(--ok-primary); color: var(--ok-primary); }
@media (max-width: 480px) { .ok-auth-top-switch { font-size: 0; gap: 0; } .ok-auth-top-switch .ok-btn { font-size: var(--t-sm); } }

/* ═══ Templates page: industry label ═══ */
.ok-tpl-ind { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 99px; background: var(--ok-primary-50); color: var(--ok-primary); font: 600 11px/1.5 var(--ok-font); vertical-align: 2px; }

/* ── Push notifications ─────────────────────────────── */
.okigs-root .ok-push-prompt[hidden], .okigs-root .ok-notif-push[hidden], .okigs-root #ok-push-card [hidden] { display: none !important; }
.ok-notif-push { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 6px; padding: 10px 12px; border: 1px dashed var(--ok-primary-200); border-radius: 8px; background: var(--ok-primary-50); color: var(--ok-primary); font: 600 var(--t-xs)/1.35 var(--ok-font); cursor: pointer; text-align: left; transition: background .15s; }
.ok-notif-push:hover { background: var(--ok-primary-100); }
.ok-notif-push .ok-ico { width: 16px; height: 16px; flex: none; }
.ok-push-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px; border: 1px solid var(--ok-line); border-radius: var(--ok-r-sm); background: var(--ok-bg); }
.ok-push-ic { width: 38px; height: 38px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: #fff; border: 1px solid var(--ok-line); color: var(--ok-soft); }
.ok-push-status[data-state="on"] .ok-push-ic { background: var(--ok-green-bg); border-color: transparent; color: var(--ok-green); }
.ok-push-status[data-state="denied"] .ok-push-ic, .ok-push-status[data-state="unsupported"] .ok-push-ic { background: var(--ok-red-bg); border-color: transparent; color: var(--ok-red); }
.ok-push-status[data-state="ios-install"] .ok-push-ic { background: var(--ok-amber-bg); border-color: transparent; color: var(--ok-amber); }
.ok-push-txt { flex: 1 1 220px; min-width: 0; }
.ok-push-txt strong { display: block; font-size: var(--t-sm); color: var(--ok-ink); font-weight: 600; }
.ok-push-txt small { display: block; margin-top: 2px; font-size: var(--t-xs); line-height: 1.45; color: var(--ok-soft); }
.ok-push-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ok-push-sub { margin: 18px 0 4px; font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ok-soft); }
.ok-push-type { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--ok-line-2); cursor: pointer; }
.ok-push-type:last-child { border-bottom: 0; }
.ok-push-type input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ok-push-sw { position: relative; flex: none; width: 36px; height: 20px; border-radius: 20px; background: var(--ok-line); transition: background .15s var(--ok-ease); }
.ok-push-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .2); transition: transform .15s var(--ok-ease); }
.ok-push-type input:checked + .ok-push-sw { background: var(--ok-primary); }
.ok-push-type input:checked + .ok-push-sw::after { transform: translateX(16px); }
.ok-push-type input:focus-visible + .ok-push-sw { outline: 2px solid var(--ok-primary); outline-offset: 2px; }
.ok-push-type strong { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--ok-ink); }
.ok-push-type small { display: block; margin-top: 1px; font-size: var(--t-xs); color: var(--ok-soft); line-height: 1.4; }
.okigs-root .ok-push-prompt .ok-notice-cta { cursor: pointer; }

/* Notifications: Clear all */
.ok-notif-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ok-notif-clear { flex: none; border: 0; background: transparent; color: var(--ok-primary); font: 600 var(--t-xs)/1 var(--ok-font); padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.ok-notif-clear:hover { background: var(--ok-primary-50); }
.ok-notif-clear[disabled] { opacity: .5; cursor: default; }