/* Verdant public theme: landing, auth pages and the public shell. Self-contained (no Bootstrap needed). */
:root {
  --v-font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --v-bg: #eef3ef; --v-surface: #fff; --v-surface-2: #f6f9f7; --v-surface-3: #e9efeb;
  --v-border: #dfe7e2; --v-border-strong: #c6d3cb;
  --v-text: #10231a; --v-text-2: #46594f; --v-text-3: #7a8b82;
  --v-primary: #128a4c; --v-primary-600: #0f7540; --v-primary-700: #0b5c33; --v-primary-soft: #d8f1e3; --v-primary-soft-2: #bfe6d0; --v-primary-ink: #0a4a2a;
  --v-moss: #0e1f17; --v-moss-2: #132a1f; --v-mint: #6fd79c;
  --v-amber: #b45309; --v-amber-soft: #fdf1df; --v-red: #b91c1c; --v-red-soft: #fde6e6;
  --v-r: 16px; --v-r-sm: 10px;
  --v-shadow: 0 18px 50px -24px rgba(14, 31, 23, .35), 0 2px 8px -2px rgba(14, 31, 23, .08);
  --v-focus: 0 0 0 3px rgba(18, 138, 76, .3);
}
/* scrollbars – thin, rounded, themed (page, tables, modals, dropdown lists); the sidebar keeps its own light-on-dark thumb */
html { scrollbar-width: thin; scrollbar-color: var(--v-border-strong) transparent; }
* { scrollbar-width: thin; scrollbar-color: var(--v-border-strong) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-corner { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--v-border-strong); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--v-text-3); background-clip: padding-box; }
.table-responsive::-webkit-scrollbar { height: 8px; }
.l-btn:focus:not(:focus-visible), .l-theme-btn:focus:not(:focus-visible), .l-menu-btn:focus:not(:focus-visible) { box-shadow: none !important; outline: 0 !important; }
/* dark mode (the same tokens as the panel; toggled by the moon button in the header, remembered in localStorage "vTheme") */
body.theme-dark {
  --v-bg: #0b1511; --v-surface: #111c16; --v-surface-2: #16241d; --v-surface-3: #1c2d24;
  --v-border: #223328; --v-border-strong: #2e4537;
  --v-text: #e7efe9; --v-text-2: #aebfb4; --v-text-3: #7f958a;
  --v-primary: #2fb36d; --v-primary-600: #45c57f; --v-primary-700: #7ddba6; --v-primary-soft: rgba(47, 179, 109, .16); --v-primary-soft-2: rgba(47, 179, 109, .3); --v-primary-ink: #c7f0d9;
  --v-moss: #07100b; --v-moss-2: #0e1f17;
  --v-amber: #f3b35c; --v-amber-soft: rgba(243, 179, 92, .16); --v-red: #f47c7c; --v-red-soft: rgba(244, 124, 124, .16);
  --v-shadow: 0 18px 50px -24px rgba(0, 0, 0, .7), 0 2px 8px -2px rgba(0, 0, 0, .4);
  --v-focus: 0 0 0 3px rgba(47, 179, 109, .35);
  color-scheme: dark;
}
html.theme-dark-pre { background: #0b1511; }
body.theme-dark .l-header { background: rgba(11, 21, 17, .85); }
body.theme-dark .l-overlay { background: rgba(11, 21, 17, .6); }
body.theme-dark .l-btn-primary, body.theme-dark.l-body a.l-btn-primary, body.theme-dark .l-header a.l-btn-primary { color: #06130c; }
body.theme-dark .l-btn-primary:hover, body.theme-dark.l-body a.l-btn-primary:hover, body.theme-dark .l-header a.l-btn-primary:hover { color: #06130c; }
.l-theme-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--v-border-strong); background: var(--v-surface); color: var(--v-text-2); cursor: pointer; font-size: 17px; }
.l-theme-btn:hover { color: var(--v-text); border-color: var(--v-text-3); }
.l-lang select { height: 40px; padding: 0 30px 0 12px; border-radius: 10px; border: 1px solid var(--v-border-strong); background: var(--v-surface) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%237a8b82' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat right 10px center/12px; color: var(--v-text-2); font: inherit; font-size: 14px; font-weight: 500; appearance: none; -webkit-appearance: none; cursor: pointer; }
.l-lang select:hover { color: var(--v-text); border-color: var(--v-text-3); }
.l-theme-btn i { font-size: 18px; }
.l-theme-btn { position: relative; }
.l-theme-btn.is-auto::after { content: ""; position: absolute; right: 6px; bottom: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--v-primary); box-shadow: 0 0 0 2px var(--v-surface); }   /* auto: follows the clock */
[dir=rtl] .l-theme-btn.is-auto::after { right: auto; left: 6px; }
.l-logo-dark, body.theme-dark .l-logo-light { display: none !important; }
body.theme-dark .l-logo-dark { display: block !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.l-body { margin: 0; font-family: var(--v-font); font-size: 16px; line-height: 1.55; color: var(--v-text); background: var(--v-bg); -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1; }
.l-body *, .l-body *::before, .l-body *::after { box-sizing: border-box; }
.l-body img { max-width: 100%; height: auto; display: block; }
.l-body a { color: var(--v-primary-600); text-decoration: none; }
.l-body a:hover { color: var(--v-primary-700); }
.l-body h1, .l-body h2, .l-body h3, .l-body h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.l-body p { margin: 0 0 1em; }
.l-body :focus-visible { outline: none; box-shadow: var(--v-focus); border-radius: 6px; }
.l-header a, .l-footer a { text-decoration: none; }
.l-header img, .l-footer img { display: block; max-width: 100%; height: auto; }
.l-header *, .l-footer *, .l-header *::before, .l-footer *::before { box-sizing: border-box; }
.l-footer h4, .l-footer p { margin-top: 0; }
.l-wrap { width: min(1180px, 100% - 40px); margin: 0 auto; }
.l-muted { color: var(--v-text-3); }
.l-num { font-variant-numeric: tabular-nums; }
.l-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 500; background: var(--v-primary-soft); color: var(--v-primary-700); }
.l-pill.up { background: var(--v-amber-soft); color: var(--v-amber); }
.l-pill.gray { background: var(--v-surface-3); color: var(--v-text-2); }
.l-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 12px; font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer; font-family: var(--v-font); transition: background .15s, border-color .15s, transform .1s; white-space: nowrap; }
.l-btn:active { transform: translateY(1px); }
.l-btn-primary, .l-body a.l-btn-primary, .l-header a.l-btn-primary { background: var(--v-primary); color: #fff; }
.l-btn-primary:hover, .l-body a.l-btn-primary:hover, .l-header a.l-btn-primary:hover { background: var(--v-primary-600); color: #fff; }
.l-btn-ghost, .l-body a.l-btn-ghost, .l-header a.l-btn-ghost { background: var(--v-surface); color: var(--v-text); border-color: var(--v-border-strong); }
.l-btn-ghost:hover, .l-body a.l-btn-ghost:hover, .l-header a.l-btn-ghost:hover { border-color: var(--v-text-3); color: var(--v-text); }
.l-btn-moss, .l-body a.l-btn-moss { background: var(--v-moss); color: #fff; }
.l-btn-moss:hover, .l-body a.l-btn-moss:hover { background: var(--v-moss-2); color: #fff; }
.l-btn-sm { height: 38px; padding: 0 16px; font-size: 14px; border-radius: 10px; }
.l-btn-block { width: 100%; }

/* ---------- header ---------- */
.l-header { position: sticky; top: 0; z-index: 50; background: rgba(238, 243, 239, .85); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--v-border); }
.l-header .l-wrap { display: flex; align-items: center; gap: 24px; height: 68px; }
.l-logo img { max-height: 36px; width: auto; }
.l-nav { display: flex; gap: 4px; margin-left: 8px; }
.l-nav a { padding: 8px 12px; border-radius: 9px; color: var(--v-text-2); font-weight: 500; font-size: 14.5px; }
.l-nav a:hover, .l-nav a.active { background: var(--v-surface); color: var(--v-text); }
.l-header-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.l-menu-btn { display: none; margin-left: auto; width: 42px; height: 42px; border: 1px solid var(--v-border-strong); background: var(--v-surface); border-radius: 10px; font-size: 20px; align-items: center; justify-content: center; }
@media (max-width: 860px) {
  .l-nav, .l-header-actions { display: none; }
  .l-menu-btn { display: inline-flex; }
  .l-header.open .l-nav, .l-header.open .l-header-actions { display: flex; }
  .l-header.open .l-wrap { flex-wrap: wrap; height: auto; padding: 12px 0 16px; }
  .l-header.open .l-nav { flex-direction: column; width: 100%; margin: 0; }
  .l-header.open .l-header-actions { width: 100%; }
  .l-header.open .l-header-actions .l-btn { flex: 1; }
}

/* ---------- hero ---------- */
.l-hero { padding: 72px 0 56px; position: relative; overflow: hidden; }
.l-hero::before { content: ""; position: absolute; inset: auto -10% -40% auto; width: 60%; height: 90%; background: radial-gradient(closest-side, rgba(111, 215, 156, .28), transparent 70%); pointer-events: none; }
.l-hero .l-wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; position: relative; }
.l-hero h1 { font-size: clamp(34px, 4.6vw, 54px); letter-spacing: -0.03em; max-width: 14ch; }
.l-hero .lead { font-size: 18px; color: var(--v-text-2); max-width: 46ch; margin: 18px 0 26px; }
.l-hero-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.l-hero-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; font-size: 14px; color: var(--v-text-2); }
.l-hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.l-hero-trust i { color: var(--v-primary); }
/* the live preview card – real services, real prices */
.l-preview { background: var(--v-surface); border: 1px solid var(--v-border); border-radius: 20px; box-shadow: var(--v-shadow); overflow: hidden; }
.l-preview-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--v-border); font-size: 13.5px; font-weight: 600; }
.l-preview-head .l-live { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-weight: 500; font-size: 12px; color: var(--v-primary-700); }
.l-preview-head .l-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--v-primary); box-shadow: 0 0 0 4px var(--v-primary-soft); }
.l-preview table { width: 100%; border-collapse: collapse; font-size: 13.5px; table-layout: fixed; }
.l-preview td:first-child { min-width: 0; }
.l-preview td.price { width: 96px; }
.l-preview td { padding: 11px 16px; border-bottom: 1px solid var(--v-border); vertical-align: middle; }
.l-preview tr:last-child td { border-bottom: 0; }
.l-preview .name { font-weight: 500; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-preview .meta { font-size: 12px; color: var(--v-text-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-preview .price { text-align: right; font-weight: 600; white-space: nowrap; }
.l-preview .price small { display: block; font-weight: 400; color: var(--v-text-3); font-size: 11.5px; }
.l-preview-foot { padding: 12px 18px; background: var(--v-surface-2); font-size: 13px; color: var(--v-text-2); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
@media (max-width: 960px) { .l-hero .l-wrap { grid-template-columns: 1fr; } .l-hero { padding: 44px 0 36px; } .l-hero h1 { max-width: none; } }

/* ---------- stats strip ---------- */
.l-stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--v-border); border-radius: var(--v-r); background: var(--v-surface); overflow: hidden; }
.l-stats div { padding: 18px 22px; border-right: 1px solid var(--v-border); }
.l-stats div:last-child { border-right: 0; }
.l-stats b { display: block; font-size: 26px; letter-spacing: -0.02em; line-height: 1.1; }
.l-stats span { font-size: 13px; color: var(--v-text-2); }
@media (max-width: 760px) { .l-stats { grid-template-columns: 1fr 1fr; } .l-stats div:nth-child(2) { border-right: 0; } .l-stats div:nth-child(-n+2) { border-bottom: 1px solid var(--v-border); } }

/* ---------- sections ---------- */
.l-section { padding: 64px 0; }
.l-section-head { max-width: 62ch; margin-bottom: 28px; }
.l-section-head h2 { font-size: clamp(26px, 3vw, 34px); }
.l-section-head p { color: var(--v-text-2); font-size: 16.5px; margin: 10px 0 0; }
.l-section-head .l-more { margin-top: 10px; display: inline-block; font-weight: 500; }

.l-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.l-cat { background: var(--v-surface); border: 1px solid var(--v-border); border-radius: var(--v-r); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; color: var(--v-text); }
.l-cat:hover { border-color: var(--v-primary); color: var(--v-text); }
.l-cat h3 { font-size: 17px; display: flex; align-items: center; gap: 10px; }
.l-cat h3 span { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--v-text-3); background: var(--v-surface-3); border-radius: 999px; padding: 2px 8px; }
.l-cat ul { list-style: none; margin: 0; padding: 0; font-size: 13.5px; color: var(--v-text-2); }
.l-cat li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px dashed var(--v-border); }
.l-cat li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.l-cat li b { color: var(--v-text); white-space: nowrap; }
.l-cat .from { margin-top: auto; font-size: 13px; color: var(--v-primary-700); font-weight: 500; }
@media (max-width: 900px) { .l-cats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 560px) { .l-cats { grid-template-columns: minmax(0, 1fr); } }

.l-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: step; }
.l-step { background: var(--v-surface); border: 1px solid var(--v-border); border-radius: var(--v-r); padding: 22px 20px; position: relative; }
.l-step::before { counter-increment: step; content: counter(step); display: inline-flex; width: 32px; height: 32px; border-radius: 10px; background: var(--v-moss); color: var(--v-mint); font-weight: 600; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 14px; }
.l-step h3 { font-size: 16px; margin-bottom: 6px; }
.l-step p { color: var(--v-text-2); font-size: 14.5px; margin: 0; }
@media (max-width: 900px) { .l-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .l-steps { grid-template-columns: 1fr; } }

.l-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--v-border); border-radius: var(--v-r); background: var(--v-surface); overflow: hidden; }
.l-feature { padding: 24px 22px; border-right: 1px solid var(--v-border); border-bottom: 1px solid var(--v-border); }
.l-feature:nth-child(3n) { border-right: 0; }
.l-feature:nth-last-child(-n+3) { border-bottom: 0; }
.l-feature i { display: inline-flex; width: 36px; height: 36px; border-radius: 10px; background: var(--v-primary-soft); color: var(--v-primary-700); align-items: center; justify-content: center; font-size: 17px; margin-bottom: 12px; }
.l-feature h3 { font-size: 16px; margin-bottom: 6px; }
.l-feature p { color: var(--v-text-2); font-size: 14.5px; margin: 0; }
@media (max-width: 860px) { .l-features { grid-template-columns: 1fr 1fr; } .l-feature:nth-child(3n) { border-right: 1px solid var(--v-border); } .l-feature:nth-child(2n) { border-right: 0; } .l-feature:nth-last-child(-n+3) { border-bottom: 1px solid var(--v-border); } .l-feature:nth-last-child(-n+2) { border-bottom: 0; } }
@media (max-width: 520px) { .l-features { grid-template-columns: 1fr; } .l-feature { border-right: 0 !important; border-bottom: 1px solid var(--v-border) !important; } .l-feature:last-child { border-bottom: 0 !important; } }

/* price transparency – the dark band */
.l-band { background: var(--v-moss); color: #d9e7de; border-radius: 24px; padding: 44px 46px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.l-band h2 { color: #fff; font-size: clamp(24px, 2.8vw, 32px); }
.l-band p { color: #b5c9bd; font-size: 16px; }
.l-band .l-btn-primary, .l-body .l-band a.l-btn-primary { background: var(--v-mint); color: var(--v-moss); }
.l-band .l-btn-ghost, .l-body .l-band a.l-btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.25); }
.l-band-list { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; overflow: hidden; }
.l-band-list div { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 14px; }
.l-band-list div:last-child { border-bottom: 0; }
.l-band-list .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.l-band-list .d { color: #b5c9bd; font-size: 12.5px; white-space: nowrap; }
.l-band-list .l-pill.up { background: rgba(243,179,92,.18); color: #f9d9a8; }
.l-band-list .l-pill { background: rgba(111,215,156,.18); color: #bff0d3; }
@media (max-width: 860px) { .l-band { grid-template-columns: 1fr; padding: 30px 24px; } }

/* FAQ */
.l-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.l-faq details { background: var(--v-surface); border: 1px solid var(--v-border); border-radius: 12px; padding: 0 18px; }
.l-faq summary { cursor: pointer; list-style: none; padding: 16px 0; font-weight: 600; font-size: 15.5px; display: flex; gap: 12px; align-items: center; }
.l-faq summary::-webkit-details-marker { display: none; }
.l-faq summary::after { content: "+"; margin-left: auto; color: var(--v-text-3); font-weight: 400; font-size: 20px; line-height: 1; }
.l-faq details[open] summary::after { content: "–"; }
.l-faq .a { padding: 0 0 16px; color: var(--v-text-2); font-size: 14.5px; }
@media (max-width: 760px) { .l-faq { grid-template-columns: 1fr; } }

.l-cta { text-align: center; padding: 20px 0 70px; }
.l-cta h2 { font-size: clamp(26px, 3vw, 36px); }
.l-cta p { color: var(--v-text-2); font-size: 17px; margin: 10px auto 22px; max-width: 50ch; }

/* ---------- footer ---------- */
.l-footer { border-top: 1px solid var(--v-border); padding: 36px 0 28px; font-size: 14px; color: var(--v-text-2); }
.l-footer .l-wrap { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 28px; }
.l-footer h4 { font-size: 13px; color: var(--v-text); margin-bottom: 10px; }
.l-footer ul { list-style: none; margin: 0; padding: 0; }
.l-footer li { padding: 3px 0; }
.l-footer a { color: var(--v-text-2); }
.l-footer a:hover { color: var(--v-primary-700); }
.l-footer .l-social { display: flex; gap: 8px; margin-top: 12px; }
.l-footer .l-social a { width: 34px; height: 34px; border-radius: 9px; background: var(--v-surface); border: 1px solid var(--v-border); display: inline-flex; align-items: center; justify-content: center; }
.l-footer-bottom { width: min(1180px, 100% - 40px); margin: 26px auto 0; padding-top: 16px; border-top: 1px solid var(--v-border); font-size: 13px; color: var(--v-text-3); display: flex; flex-wrap: wrap; gap: 8px 20px; }
@media (max-width: 860px) { .l-footer .l-wrap { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .l-footer .l-wrap { grid-template-columns: 1fr; } }

/* ---------- auth pages ---------- */
.l-auth { min-height: calc(100vh - 68px); display: grid; grid-template-columns: 1fr 1fr; }
.l-auth-side { background: var(--v-moss); color: #d9e7de; padding: 56px 48px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.l-auth-side::after { content: ""; position: absolute; right: -30%; bottom: -30%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(111,215,156,.22), transparent); }
.l-auth-side h2 { color: #fff; font-size: clamp(26px, 3vw, 36px); max-width: 16ch; position: relative; }
.l-auth-side p { color: #b5c9bd; max-width: 44ch; margin-top: 14px; position: relative; }
.l-auth-side ul { list-style: none; margin: 22px 0 0; padding: 0; position: relative; }
.l-auth-side li { display: flex; gap: 10px; align-items: center; padding: 6px 0; color: #e6efe9; font-size: 15px; }
.l-auth-side li i { color: var(--v-mint); }
.l-auth-main { display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.l-auth-card { width: min(440px, 100%); background: var(--v-surface); border: 1px solid var(--v-border); border-radius: 20px; padding: 32px 30px; box-shadow: var(--v-shadow); }
.l-auth-card h1 { font-size: 24px; margin-bottom: 4px; }
.l-auth-card .sub { color: var(--v-text-2); font-size: 14.5px; margin-bottom: 22px; }
.l-field { margin-bottom: 14px; }
.l-field label { display: block; font-size: 13px; font-weight: 500; color: var(--v-text-2); margin-bottom: 6px; }
.l-input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--v-border-strong); border-radius: 11px; font: inherit; font-size: 15px; color: var(--v-text); background: var(--v-surface); transition: border-color .15s, box-shadow .15s; }
.l-input:focus { border-color: var(--v-primary); box-shadow: var(--v-focus); outline: 0; }
select.l-input { appearance: none; -webkit-appearance: none; background: var(--v-surface) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%237a8b82' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat right 12px center/14px; padding-right: 36px; }
.l-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.l-check { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; color: var(--v-text-2); margin: 4px 0 18px; }
.l-check input { width: 16px; height: 16px; margin-top: 3px; accent-color: var(--v-primary); flex: 0 0 16px; }
.l-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; }
.l-auth-foot { text-align: center; color: var(--v-text-2); font-size: 14px; margin-top: 18px; }
.l-auth-foot a { font-weight: 500; }
.l-auth-logo { margin-bottom: 22px; }
.l-auth-logo img { max-height: 36px; width: auto; }
@media (max-width: 900px) { .l-auth { grid-template-columns: 1fr; min-height: 0; } .l-auth-side { display: none; } .l-auth-main { padding: 28px 16px 40px; } }

/* ---------- toasts (jquery-toast) + the notification popup ---------- */
.jq-toast-wrap { font-family: var(--v-font) !important; }
.jq-toast-single { border-radius: 10px !important; font-size: 14px !important; line-height: 1.45 !important; padding: 12px 16px !important; background: var(--v-moss) !important; color: #fff !important; }
.jq-icon-success { background-color: var(--v-primary-700) !important; } .jq-icon-error { background-color: var(--v-red) !important; } .jq-icon-warning { background-color: var(--v-amber) !important; }
.l-popup { position: fixed; inset: 0; background: rgba(14,31,23,.5); display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.l-popup.show { display: flex; }
.l-popup-card { background: var(--v-surface); border-radius: 18px; max-width: 520px; width: 100%; box-shadow: var(--v-shadow); overflow: hidden; }
.l-popup-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--v-border); font-weight: 600; }
.l-popup-head button { margin-left: auto; border: 0; background: var(--v-surface-3); width: 32px; height: 32px; border-radius: 8px; font-size: 18px; cursor: pointer; }
.l-popup-body { padding: 18px; color: var(--v-text-2); font-size: 15px; max-height: 60vh; overflow: auto; }
#page-overlay { display: none; }
.l-overlay { position: fixed; inset: 0; background: rgba(238,243,239,.6); display: none; z-index: 90; }
.l-overlay.active { display: block; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .001ms !important; } }


/* ---- sign-in / sign-up: the button shows what is happening ---- */
.l-auth-card .l-btn-primary { position: relative; overflow: hidden; transition: background .2s, transform .15s, box-shadow .2s; }
.l-auth-card .l-btn-primary:active { transform: scale(.985); }
.l-auth-card.is-loading .l-btn-primary { color: transparent !important; pointer-events: none; background: var(--v-primary-600); }
.l-auth-card.is-loading .l-btn-primary::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; animation: l-spin .7s linear infinite; }
.l-auth-card.is-loading .l-input { opacity: .7; }
.l-auth-card.is-success .l-btn-primary { color: transparent !important; background: var(--v-primary-700); pointer-events: none; }
.l-auth-card.is-success .l-btn-primary::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 16px; margin: -11px 0 0 -5px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg) scale(0); animation: l-check .35s cubic-bezier(.2,.9,.3,1.4) forwards; }
.l-auth-card.is-success { animation: l-card-out .6s ease .9s forwards; }
.l-auth-card.is-error { animation: l-shake .5s ease; }
@keyframes l-spin { to { transform: rotate(360deg); } }
@keyframes l-check { to { transform: rotate(45deg) scale(1); } }
/* after a successful sign-in the card stays in its success state until the next page has loaded */
.l-auth-status { display: none; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--v-text-2); }
.l-auth-card.is-success .l-auth-status, .l-auth-card.is-leaving .l-auth-status { display: flex; }
.l-auth-status-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--v-primary-soft-2); border-top-color: var(--v-primary); animation: l-spin .7s linear infinite; }
.l-auth-card.is-leaving .l-input, .l-auth-card.is-leaving .l-auth-foot { opacity: .6; pointer-events: none; }
@keyframes l-card-out { to { opacity: .35; transform: translateY(-6px) scale(.985); } }
@keyframes l-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .l-auth-card.is-success, .l-auth-card.is-error { animation: none; } }

/* ---------- RTL ---------- */
[dir=rtl] body { text-align: right; }
[dir=rtl] .l-nav { margin-left: 0; margin-right: 8px; }
[dir=rtl] .l-header-actions, [dir=rtl] .l-menu-btn, [dir=rtl] .l-preview-head .l-live, [dir=rtl] .l-cat h3 span, [dir=rtl] .l-faq summary::after, [dir=rtl] .l-popup-head button { margin-left: 0; margin-right: auto; }
[dir=rtl] .l-lang select { padding: 0 12px 0 30px; background-position: left 10px center; }
[dir=rtl] select.l-input { background-position: left 12px center; padding-right: 14px; padding-left: 36px; }
[dir=rtl] .l-stats div { border-right: 0; border-left: 1px solid var(--v-border); }
[dir=rtl] .l-stats div:last-child { border-left: 0; }
[dir=rtl] .l-feature { border-right: 0; border-left: 1px solid var(--v-border); }
[dir=rtl] .l-feature:nth-child(3n) { border-left: 0; }
[dir=rtl] .l-auth-side { order: 2; }
[dir=rtl] input[type=email], [dir=rtl] input[type=url], [dir=rtl] input[type=password], [dir=rtl] code, [dir=rtl] pre, [dir=rtl] kbd { direction: ltr; unicode-bidi: isolate; }
[dir=rtl] input[type=email], [dir=rtl] input[type=password] { text-align: right; }
html.v-theme-switching *, html.v-theme-switching *::before, html.v-theme-switching *::after { transition: none !important; }
/* the automatic day/night flip: a slow fade of every colour (set for ~1.3 s by the theme script) */
html.v-theme-fading *, html.v-theme-fading *::before, html.v-theme-fading *::after { transition: background-color 1.1s ease, color 1.1s ease, border-color 1.1s ease, box-shadow 1.1s ease, fill 1.1s ease, stroke 1.1s ease !important; }