/* Кейсфера: shared light palette. Loaded last on every product page.
   Existing token names are aliases so modules keep one visual contract. */
:root, body.ws-body, body.landing {
  color-scheme: light;
  --ks-canvas: #f5f7fa;
  --ks-surface: #ffffff;
  --ks-soft: #e8f5fc;
  --ks-ink: #263648;
  --ks-muted: #5b6d80;
  --ks-line: #e1e8ef;
  --ks-blue: #087bb8;
  --ks-blue-hover: #086a9e;
  --ks-teal: #087f80;
  --ks-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --bg-primary: var(--ks-canvas);
  --bg-secondary: var(--ks-surface);
  --bg-sidebar: #fafbfd;
  --bg-card: var(--ks-surface);
  --bg-card-hover: #f0f7fb;
  --bg-deep: var(--ks-canvas);
  --bg-dark: var(--ks-canvas);
  --bg-mid: #eef4f8;
  --bg-graphite: var(--ks-surface);
  --bg-elevated: #f0f4f8;
  --text: var(--ks-ink);
  --text-primary: var(--ks-ink);
  --text-secondary: #4f6478;
  --text-muted: var(--ks-muted);
  --text-soft: #4f6478;
  --ink: var(--ks-ink);
  --muted: var(--ks-muted);
  --paper: var(--ks-surface);
  --blue: var(--ks-blue);
  --accent: var(--ks-blue);
  --accent-gold: var(--ks-blue);
  --accent-gold-dim: var(--ks-soft);
  --accent-blue: var(--ks-blue);
  --accent-blue-dim: var(--ks-soft);
  --gold: var(--ks-blue);
  --gold-bright: var(--ks-teal);
  --gold-dim: var(--ks-soft);
  --gold-glow: #087fbe20;
  --accent-green: #15734e;
  --accent-amber: #936000;
  --success: #15734e;
  --error: #bc3444;
  --border: var(--ks-line);
  --border-color: var(--ks-line);
  --border-strong: #c4d1dd;
  --border-gold: #b8dcea;
  --line: var(--ks-line);
  --shadow: 0 16px 48px #26364812;
  --shadow-card: 0 3px 16px #26364806;
  --shadow-hover: 0 12px 36px #26364812;
  --font: var(--ks-font);
  --font-sans: var(--ks-font);
  --font-serif: var(--ks-font);
  --font-mono: var(--ks-font);
  --transition: 160ms ease;
}
body { background: var(--ks-canvas); color: var(--ks-ink); font-family: var(--ks-font); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: inherit; }
h1,h2,h3,h4 { font-family: var(--ks-font); font-weight: 600; }
button, .btn, .ws-btn { font-weight: 500; }
:where(button,a,input,select,textarea,summary):focus-visible { outline: 2px solid var(--ks-blue); outline-offset: 3px; }
::selection { background: #ccebf9; color: #163b53; }
input::placeholder, textarea::placeholder { color: #697d90; opacity: 1; }
input, textarea, select { accent-color: var(--ks-blue); color-scheme: light; }
select option, select optgroup, .ws-form select option, .ws-form select optgroup { background: #fff; color: var(--ks-ink); }
.ws-form select { color-scheme: light; }
.ws-header, .header, .co-header { background: #ffffffed; border-color: var(--ks-line); }
.ws-sidebar, .ws-chat-list { background: #fafbfd; }
.ws-logo, .ws-logo span, .logo-text, .brand, .footer-logo span, .co-brand, .side strong { font-family: var(--ks-font); color: var(--ks-blue); background: none; -webkit-text-fill-color: var(--ks-blue); letter-spacing: -.035em; font-weight: 600; }
.ws-nav-link.active, .ws-nav-link:hover { background: var(--ks-soft); color: var(--ks-blue); box-shadow: none; }
.ws-btn-primary, .ws-btn-gold, .btn-primary, .button, .wizard-btn--primary {
  background: var(--ks-blue); color: #fff; border-color: var(--ks-blue); box-shadow: none;
}
.ws-btn-primary:hover, .ws-btn-gold:hover, .btn-primary:hover, .button:hover, .wizard-btn--primary:hover { background: var(--ks-blue-hover); color: #fff; border-color: var(--ks-blue-hover); transform: none; box-shadow: none; }
.ws-btn-outline, .btn-outline { color: #4f6478; border-color: #d9e3eb; background: transparent; }
.ws-btn-outline:hover, .btn-outline:hover { background: var(--ks-soft); border-color: #b8dcea; color: var(--ks-blue); }
.ws-btn, .btn, .button { border-radius: 10px; }
.ws-nav-badge, .cw-body .ws-nav-badge, .ws-chat-unread { color: #fff; background: var(--ks-blue); }
.ws-modal-backdrop, .modal-backdrop, .ws-overlay, .sws-modal-backdrop { background: #23394d38; backdrop-filter: blur(3px); }
dialog::backdrop { background: #23394d38; backdrop-filter: blur(3px); }
.ws-modal, .modal-content, .auth-card, .cw-reg-card, .ex-reg-card { background: #fff; color: var(--ks-ink); border-color: var(--ks-line); box-shadow: var(--shadow-hover); border-radius: 18px; }
.ws-modal-header, .ws-modal-footer { border-color: #edf1f5; padding: 18px 24px; }
.ws-modal-body { color: var(--ks-ink); padding: 24px; }
.ws-modal-body p, .ws-modal-body label { line-height: 1.6; }
.ws-modal-header h2 { font-weight: 600; }
.ws-fix-field .ws-input, .ws-modal textarea, .ws-form input, .ws-form textarea, .ws-form select { background: #f9fbfd; color: var(--ks-ink); border-color: #cbd8e3; border-radius: 10px; }
.ws-fix-hint, .cw-profile-notice { color: var(--ks-muted); }
.ws-chat-panel { background: #fff; }
.ws-chat-header { padding: 18px 22px; }
.ws-chat-header h3, .ws-chat-item-name { font-weight: 600; }
.ws-chat-item { border-radius: 12px; margin: 4px 8px; border-left-color: transparent; }
.ws-chat-item.active, .ws-chat-item:hover { background: var(--ks-soft); border-left-color: transparent; }
.ws-chat-messages { background: var(--ks-canvas); padding: 22px; gap: 12px; }
.ws-chat-bubble { padding: 11px 15px; line-height: 1.55; box-shadow: 0 1px 2px #26364806; }
.ws-chat-bubble.in { background: #fff; border: 0; border-radius: 17px 17px 17px 5px; }
.ws-chat-bubble.out { background: var(--ks-soft); border: 0; border-radius: 17px 17px 5px 17px; }
.ws-chat-system-message { width: auto; max-width: min(680px,94%); padding: 6px 12px; margin: 4px 0; background: transparent; border: 0; color: var(--ks-muted); font-size: 12px; }
.ws-chat-system-label { color: var(--ks-muted); font-weight: 500; font-size: 10px; letter-spacing: .025em; }
.ws-chat-system-message .ws-btn { padding: 4px 8px; background: transparent; border-color: transparent; color: var(--ks-blue); font-size: 12px; }
.ws-chat-compose { background: #fff; padding: 14px 18px; border-color: #edf1f5; }
.ws-chat-textarea, .ws-chat-compose input { background: #f5f8fb; color: var(--ks-ink); border-color: #e1e8ef; border-radius: 12px; }
.ws-chat-order-bar { background: #fbfcfe; }
.ws-order-details { background: #fff; }
.ws-order-details .ws-chat-context { background: #f5f8fb; }
.ws-chat-conditions { background: #edf7fc; }
.ws-chat-conditions--approved { background: #edf8f3; border-color: #c7e5d7; }
.ws-chat-conditions--approved .ws-chat-conditions-label, .ws-badge-accepted { color: #15734e; }
.ws-badge-cat { color: var(--ks-blue); }
.ws-chat-status--online { color: #15734e; }
.ws-business-card { --card-accent: #087fbe; background: linear-gradient(130deg,#f0f8fd,#fff); color: var(--ks-ink); border-color: #dbe7ef; border-top-color: var(--card-accent); box-shadow: none; }
.ws-business-card--ocean { --card-accent: #087f80; background: linear-gradient(130deg,#e9f8f5,#fff); }
.ws-business-card--warm { --card-accent: #9a6046; background: linear-gradient(130deg,#fff3eb,#fff); }
.ws-business-card--forest { --card-accent: #287345; background: linear-gradient(130deg,#eff8f0,#fff); }
.ws-business-card--violet { --card-accent: #7652ad; background: linear-gradient(130deg,#f5f0fc,#fff); }
.ws-business-card--graphite { --card-accent: #526479; background: linear-gradient(130deg,#f0f3f6,#fff); }
.ws-business-card p, .ws-business-card-profession { color: #4f6478; }
.ws-business-card-author { border-color: #dbe7ef; }
.ws-business-card-rating { background: #ffffffb3; }
.role-switch button.active { background: var(--ks-soft); color: var(--ks-blue); }
.footer, .legal-page { background: var(--ks-canvas); }
.legal-content { background: #fff; }
.ex-reg-page, .cw-reg-page { background: var(--ks-canvas); }
.ex-reg-card, .cw-reg-card { background: #fff; }
.hero { background: radial-gradient(ellipse at 85% 30%,#e0f4fb,transparent 65%); }
.button { font-weight: 500; }
.text-link, .steps-strip { border-color: #b8dcea; }
.steps-strip b, .card .number, .mini-tabs .selected { color: var(--ks-blue); }
.side .selected { background: var(--ks-soft); color: var(--ks-blue); }
.preview { border-color: #d4e4ee; box-shadow: 0 16px 40px #2636480c; }
@media(max-width:600px) {
  .ws-chat-messages { padding: 14px; }
  .ws-chat-header { padding: 14px; }
  .ws-chat-compose { padding: 10px; }
  .ws-modal-header, .ws-modal-footer, .ws-modal-body { padding: 16px; }
  .ws-modal input, .ws-modal textarea, .ws-modal select { font-size: 16px; }
}
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }

.ex-reg-page { font-family: var(--ks-font); }
.ex-reg-logo, .cw-reg-logo { font-family: var(--ks-font); color: var(--ks-blue); }
.ex-reg-page .ex-btn-gold, .ex-reg-page .btn-primary, .ex-reg-page #nextBtn, .ex-reg-page button[type=submit] { background: var(--ks-blue) !important; color: #fff !important; border-color: var(--ks-blue) !important; }
.ex-reg-page .ex-btn-gold:hover, .ex-reg-page #nextBtn:hover { background: var(--ks-blue-hover) !important; }
.cw-review-form select, .cw-review-form textarea { background: #f9fbfd; color: var(--ks-ink); border-color: #cbd8e3; }
.send-btn { background: var(--ks-blue); color: #fff; }
.quick-reply-btn.primary { background: #e8f5ef; color: #15734e; border-color: #c7e5d7; }
*, *::before, *::after { box-sizing: border-box; }
.ws-sidebar-logo, .ws-sidebar-logo span { background:none; color:var(--ks-blue); -webkit-text-fill-color:var(--ks-blue); font-family:var(--ks-font); letter-spacing:-.025em; font-weight:600; }
.ws-search, .ws-search-wrap, .ws-search input { min-width:0; }
.cw-reg { width:min(720px,100%); min-width:0; }
@media(max-width:600px) { .ws-header { gap:8px; padding:0 12px; } .ws-header-actions { gap:8px; } .cw-reg-card { padding:22px; } }
#workResultModal label { display:block; }
#workResultModal label + label { margin-top:18px; }
input[type=file]:not([hidden]) { display:block; max-width:100%; margin-top:8px; font:inherit; color:var(--ks-muted); }
input[type=file]::file-selector-button { border:1px solid var(--ks-line); background:var(--ks-soft); color:var(--ks-blue); border-radius:8px; padding:8px 10px; margin-right:10px; font:inherit; }

.expert .hero-shell { background:linear-gradient(135deg,#f5fbfd,#e8f5fc); color:var(--ks-ink); }
.expert .hero-shell .brand { color:var(--ks-blue); }
.expert .side .selected { background:var(--ks-soft); color:var(--ks-blue); }
.pricing { background:#edf8fb; color:var(--ks-ink); }
.tab-buttons button[aria-selected=true] { background:var(--ks-blue); border-color:var(--ks-blue); color:#fff; }
body.landing, .landing .btn-ghost:hover, .landing .stat-card strong { color:var(--ks-ink); }/* Approved personal office / diary navigation, 24 September 2026. */
body.ws-body {
  --sidebar-w: 248px;
  --radius: 20px;
  background-image: radial-gradient(ellipse at 95% 0%,#d6f1f3,transparent 48%),radial-gradient(ellipse at 15% 85%,#e2ebfa,transparent 55%);
  background-attachment: fixed;
}
.ws-body .ws-sidebar { background:transparent; border:0; padding:24px 24px 18px; overflow-y:auto; scrollbar-width:thin; }
.ws-body .ws-sidebar-logo { flex-shrink:0; padding:0; margin:0 0 24px; min-height:44px; }
.ws-body .ws-nav { gap:0; padding:0 12px 18px; flex:0 0 auto; isolation:isolate; }
.ws-body .ws-nav-label { font-size:10px; letter-spacing:.09em; padding:20px 4px 15px; position:relative; z-index:0; }
.ws-body .ws-nav-divider { border:0; margin-top:8px; }
.ws-body .ws-nav .ws-nav-link {
  position:relative; isolation:isolate; min-height:59px; margin:0 0 -11px;
  padding:15px 10px 19px; border:0; border-radius:7px; background:transparent;
  box-shadow:none; font-size:13px; gap:8px; color:#4e6c80;
  transition:transform 220ms ease,color 220ms ease; z-index:1;
}
.ws-body .ws-nav .ws-nav-link::before {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  transform:skewX(-26deg); border-radius:7px; border:1px solid #fff;
  background:linear-gradient(150deg,#f3faff,#dcebf4);
  box-shadow:0 5px 12px #456e8817;
  transition:background 220ms ease,box-shadow 220ms ease;
}
.ws-body .ws-nav .ws-nav-link:nth-of-type(3n+2)::before { background:linear-gradient(150deg,#eaf7fa,#d4eaf0); }
.ws-body .ws-nav .ws-nav-link:nth-of-type(3n)::before { background:linear-gradient(150deg,#edf6fc,#dce7f4); }
.ws-body .ws-nav .ws-nav-link.active { color:var(--ks-blue); transform:translateX(6px); z-index:3; }
.ws-body .ws-nav .ws-nav-link.active::before { background:linear-gradient(150deg,#fff,#edfaff); box-shadow:0 8px 22px #1990ac24; }
.ws-body .ws-nav .ws-nav-link:focus-visible { z-index:4; }
.ws-body .ws-sidebar-foot { margin-top:22px; border:0; }
.ws-body .ws-header { background:#f7fbfbeF; border:0; padding:12px 24px; height:auto; min-height:76px; }
.ws-body .ws-profile-trigger { background:#fff; border:1px solid #fff; border-radius:18px; padding:7px 12px; box-shadow:0 5px 18px #375c6f09; max-width:330px; }
.ws-body .ws-profile-text { min-width:0; }
.ws-body .ws-profile-text strong,.ws-body .ws-profile-text small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }
.ws-body .ws-avatar { width:42px; height:42px; min-width:42px; border-radius:50%; overflow:hidden; box-shadow:0 0 0 3px #eef7fa; }
.ws-body .ws-search { background:#ffffffbd; border:1px solid #e3edf3; border-radius:13px; }
.ws-body .ws-layout { padding-top:8px; }
.ws-body :is(.ws-card,.ws-home-block,.ws-profile-card,.ws-info-card,.ws-stat,.ws-rail-card,.cw-stat-card,.cw-panel) {
  border-color:#eaf1f6; border-radius:22px; box-shadow:0 5px 24px #304f6c07;
}
.ws-body .ws-profile-card { background:radial-gradient(ellipse at 100% 0,#ddf4f2,transparent 70%),#fff; }
.ws-body .ws-profile-avatar-lg { border-color:#fff; box-shadow:0 8px 22px #38728c18; }
.ws-body :is(.ws-profile-name,.ws-home-block h2,.ws-greeting) { letter-spacing:-.035em; font-weight:500; }
.ws-body .ws-btn-primary,.ws-body .ws-btn-gold { background:linear-gradient(110deg,#088b99,#087bb8); box-shadow:0 5px 14px #087bb81c; }
.ws-body .ws-chat { border-radius:22px; border-color:#e3edf3; box-shadow:0 6px 28px #304f6c07; }
.ws-body .ws-order-details { border-color:#e5eef4; }
.ws-body .ws-content { animation-duration:220ms; }
/* Use the supplied artwork without altering the source. */
:is(.ws-sidebar-logo,.co-brand,.ex-reg-logo,.cw-reg-logo) { display:flex; align-items:center; gap:9px; }
:is(.ws-sidebar-logo,.co-brand,.ex-reg-logo,.cw-reg-logo)::before {
  content:''; display:block; flex:0 0 39px; width:39px; height:39px; border-radius:50%;
  background-image:url('/assets/brand/keysfera-master.png'); background-size:258%; background-position:50% 32%;
  box-shadow:0 3px 10px #087bb818;
}
.ws-sidebar-logo>span { display:block; width:158px; height:35px; flex:0 1 158px; font-size:0; background-image:url('/assets/brand/keysfera-master.png'); background-size:140%; background-position:53% 78%; mix-blend-mode:multiply; }
.ws-sidebar-logo>img { display:none; }
@media(hover:hover) and (pointer:fine) {
  .ws-body .ws-nav .ws-nav-link:hover { transform:translateX(10px); color:var(--ks-blue); background:transparent; z-index:4; }
  .ws-body .ws-nav .ws-nav-link:hover::before { background:#fff; box-shadow:0 9px 24px #1990ac2a; }
  .ws-body .ws-btn-primary:hover,.ws-body .ws-btn-gold:hover { transform:translateY(-2px); box-shadow:0 8px 20px #087bb828; }
}
@media(max-width:1200px) { .ws-body { --sidebar-w:224px; } .ws-body .ws-sidebar { padding-inline:19px; } .ws-body .ws-nav .ws-nav-link { font-size:12px; } }
@media(max-width:768px) {
  .ws-body .ws-sidebar { background:#eff6fa; width:248px; max-width:calc(100vw - 42px); padding:22px; }
  .ws-body .ws-header { padding:10px 12px; min-height:68px; }
  .ws-body .ws-profile-trigger { padding:6px; border-radius:15px; }
  .ws-body .ws-menu-btn { min-width:40px; min-height:44px; align-items:center; justify-content:center; }
  .ws-body .ws-avatar { width:36px; height:36px; min-width:36px; }
  .ws-body .ws-layout { padding-top:0; }
  .ws-body .ws-nav .ws-nav-link { min-height:58px; margin-bottom:-9px; }
}
@media(prefers-reduced-motion:reduce) { .ws-body .ws-nav .ws-nav-link,.ws-body .ws-btn { transition:none; transform:none!important; } }
/* Shared public identity; link text remains available to assistive technology. */
:is(a.brand,a.logo,.cw-public-header__logo) { display:inline-flex; align-items:center; gap:9px; }
:is(a.brand,a.logo,.cw-public-header__logo)::before { content:''; display:block; width:38px; height:38px; flex:0 0 38px; border-radius:50%; background:url('/assets/brand/keysfera-master.png') 50% 32% / 258%; box-shadow:0 3px 10px #087bb818; }
a.logo .logo-text { font-family:var(--ks-font); font-weight:600; color:#07566e; }
@media(max-width:1200px) { .ws-sidebar-logo>span { flex-basis:134px; width:134px; height:29px; } }
.ws-body .ws-nav-link[aria-current=page] { color:var(--ks-blue); }
