@font-face {
  font-family: "FontAwesome";
  src: url("./assets/fontawesome-webfont.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
  font-display: block;
}

:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  --background-start: #2789cf;
  --background-middle: #63b4e4;
  --background-end: #b7e3f5;
  --text: #10182d;
  --muted: #77839c;
  --soft-muted: #8792a8;
  --blue: #2473ff;
  --line: #dce3ef;
}

* { box-sizing: border-box; }

html,
body {
  min-width: 320px;
  min-height: 100%;
}

html:not([data-ui-ready="true"]) main { visibility: hidden; }

.app-loader {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  color: rgba(255, 255, 255, 0.92);
  background-color: var(--background-start);
  background-image: linear-gradient(
    112deg,
    var(--background-start) 0%,
    var(--background-middle) 54%,
    var(--background-end) 100%
  );
  opacity: 1;
  visibility: visible;
  transition: opacity 240ms ease, visibility 240ms ease;
}

.app-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.app-loader__logo {
  width: 178px;
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 26px rgba(25, 78, 130, 0.16));
}

.app-loader__spinner {
  width: 34px;
  height: 34px;
  margin-top: 3px;
  border: 3px solid rgba(255, 255, 255, 0.34);
  border-top-color: #fff;
  border-radius: 50%;
  animation: starkos-loader-spin 780ms linear infinite;
  box-shadow: 0 7px 20px rgba(27, 82, 134, 0.12);
}

.app-loader__text {
  font-size: 13px;
  letter-spacing: 0.015em;
  text-shadow: 0 2px 10px rgba(24, 73, 119, 0.26);
}

@keyframes starkos-loader-spin {
  to { transform: rotate(360deg); }
}

body {
  margin: 0;
  color: var(--text);
  background: var(--background-start);
}

button,
input { font: inherit; }
button { cursor: pointer; }

.fontawesome {
  font-family: "FontAwesome";
  font-style: normal;
  font-weight: normal;
}

.desktop {
  min-height: 100vh;
  background-color: var(--background-start);
  background-image: linear-gradient(
    112deg,
    var(--background-start) 0%,
    var(--background-middle) 54%,
    var(--background-end) 100%
  );
}

.app-view[hidden] { display: none !important; }

.setup-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
}

.setup-card {
  width: min(760px, calc(100vw - 40px));
  padding: 34px 54px 32px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow:
    0 30px 90px rgba(48, 72, 113, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(26px) saturate(120%);
}

.steps-viewport {
  width: 100%;
  overflow: visible;
  transition: height 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.steps-track {
  width: 100%;
  display: block;
}

.setup-step {
  position: relative;
  left: 0;
  width: 100%;
}

.setup-step[aria-hidden="true"] {
  display: none;
}

.setup-step[aria-hidden="false"] {
  display: block;
  animation: step-in-forward 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.setup-card[data-direction="back"] .setup-step[aria-hidden="false"] {
  animation-name: step-in-back;
}

@keyframes step-in-forward {
  from {
    left: 34px;
    opacity: 0;
  }
  to {
    left: 0;
    opacity: 1;
  }
}

@keyframes step-in-back {
  from {
    left: -34px;
    opacity: 0;
  }
  to {
    left: 0;
    opacity: 1;
  }
}

.setup-header { text-align: center; }

.setup-logo {
  width: 154px;
  height: 60px;
  display: block;
  margin: 0 auto 8px;
  object-fit: contain;
}

.setup-header h1 {
  margin: 0;
  color: #0f172b;
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.setup-header p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 16px;
}

.setup-progress {
  margin: 28px auto 22px;
  display: grid;
  justify-items: center;
  gap: 4px;
  color: #6f7c97;
  font-size: 12px;
}

.setup-progress strong {
  color: #52617e;
  font-size: 13px;
  font-weight: 400;
}

.progress-dots {
  width: 270px;
  display: flex;
  align-items: center;
  margin-bottom: 7px;
}

.progress-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 999px;
  opacity: 1;
  background: #cfd9e7;
  box-shadow: 0 0 0 4px rgba(207, 217, 231, 0.32);
}

.progress-dot--active {
  background: var(--blue);
  box-shadow: 0 0 0 5px rgba(36, 115, 255, 0.12);
}

.progress-line {
  height: 2px;
  flex: 1;
  margin: 0 8px;
  opacity: 1;
  background: #c8d3e3;
}

.setup-fields {
  display: grid;
  gap: 14px;
}

.language-select {
  position: relative;
  z-index: 2;
}

.language-select__trigger,
.auth-code-row,
.account-field {
  width: 100%;
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px 18px 12px 13px;
  border: 1px solid var(--line);
  border-radius: 17px;
  color: inherit;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 8px 24px rgba(40, 72, 122, 0.05);
}

.language-select__trigger,
.account-field:first-child {
  border-color: rgba(36, 115, 255, 0.26);
  text-align: left;
  box-shadow: 0 10px 30px rgba(36, 115, 255, 0.08);
}

.language-select__trigger:focus-visible,
.auth-code-row:focus-within,
.account-field:focus-within {
  outline: 3px solid rgba(36, 115, 255, 0.18);
  border-color: rgba(36, 115, 255, 0.56);
}

.setting-icon,
.auth-code-icon,
.account-field-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.setting-icon img {
  width: 32px;
  height: auto;
  display: block;
}

.setting-copy,
.auth-code-copy,
.account-field-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
  flex: 1;
}

.setting-copy small,
.auth-code-copy small,
.account-field-copy small {
  color: var(--soft-muted);
  font-size: 12px;
}

.setting-copy strong {
  color: #1c2740;
  font-size: 16px;
  font-weight: 400;
}

.setting-chevron {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: #63708a;
  font-size: 17px;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform 180ms ease;
}

.language-select.is-open .setting-chevron { transform: rotate(180deg); }

.language-menu {
  position: absolute;
  z-index: 5;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  padding: 7px;
  border: 1px solid rgba(132, 151, 181, 0.24);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 18px 45px rgba(39, 74, 126, 0.18);
  backdrop-filter: blur(20px);
}

.language-menu[hidden] { display: none; }

.language-option {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: 38px 1fr 24px;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 0;
  border-radius: 12px;
  color: #27334c;
  background: transparent;
  text-align: left;
}

.language-option:hover,
.language-option:focus-visible {
  outline: none;
  background: #edf4ff;
}

.language-option img {
  width: 28px;
  height: auto;
  justify-self: center;
}

.language-option__check {
  color: var(--blue);
  opacity: 0;
  text-align: center;
}

.language-option[aria-selected="true"] .language-option__check { opacity: 1; }

.auth-code-icon,
.account-field-icon {
  color: var(--blue);
  font-size: 22.5px;
}

.auth-code-copy input,
.account-field-copy input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  color: #1c2740;
  background: transparent;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.auth-code-copy input::placeholder,
.account-field-copy input::placeholder {
  color: #a6afc0;
  opacity: 1;
}

.account-field {
  min-height: 70px;
  padding-block: 10px;
}

.password-toggle {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 9px;
  color: #7d8aa1;
  background: transparent;
  font-size: 16px;
}

.password-toggle:hover,
.password-toggle:focus-visible {
  outline: none;
  color: var(--blue);
  background: rgba(36, 115, 255, 0.08);
}

.form-message {
  margin: 10px 2px 0;
  color: #6c7890;
  font-size: 12px;
  line-height: 1.4;
}

.form-message:empty { display: none; }

.setup-footer {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid #e2e7ef;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.privacy-hint,
.setup-consume-note {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #8490a6;
  font-size: 12px;
}

.privacy-hint > span:first-child {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #35c99a;
}

.continue-button,
.back-button {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border-radius: 15px;
  font-weight: 400;
}

.continue-button {
  min-width: 160px;
  gap: 11px;
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #2f7bff, #1765ec);
  box-shadow: 0 12px 24px rgba(36, 115, 255, 0.25);
}

.continue-button:hover { background: linear-gradient(135deg, #3a84ff, #1e6cf2); }

.continue-button:focus-visible,
.back-button:focus-visible {
  outline: 3px solid rgba(36, 115, 255, 0.24);
  outline-offset: 3px;
}

.setup-footer--account { align-items: center; }

.setup-consume-note {
  max-width: 285px;
  gap: 9px;
  line-height: 1.4;
}

.setup-consume-note > span:first-child {
  flex: 0 0 auto;
  color: #35a77f;
  font-size: 15px;
}

.setup-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.back-button {
  min-width: 88px;
  border: 1px solid var(--line);
  color: #64718a;
  background: rgba(255, 255, 255, 0.58);
}

.back-button:hover { background: rgba(255, 255, 255, 0.9); }
.setup-actions .continue-button { min-width: 146px; }

.agreement-step .setup-progress { margin-bottom: 20px; }

.agreement-document {
  overflow: hidden;
  border: 1px solid rgba(133, 153, 184, 0.25);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 10px 30px rgba(49, 82, 126, 0.06);
}

.agreement-document__body {
  max-height: 255px;
  overflow-y: auto;
  padding: 15px 20px 16px;
  color: #66738a;
  font-size: 13px;
  line-height: 1.58;
  scrollbar-width: thin;
  scrollbar-color: #bdcbe0 transparent;
}

.agreement-document__body:focus-visible {
  outline: 3px solid rgba(36, 115, 255, 0.18);
  outline-offset: -3px;
}

.agreement-document__body p { margin: 11px 0; }

.agreement-document__body p:first-child {
  margin-top: 0;
  color: #3d4d68;
  font-weight: 500;
}

.agreement-document__body p:last-child { margin-bottom: 0; }

.setup-footer--agreement { align-items: center; }
.agreement-note { max-width: 270px; }
.setup-actions .agreement-accept { min-width: 205px; }

.activation-step .setup-progress { margin-bottom: 20px; }

.activation-success {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 17px;
  color: #2b3a53;
}

.activation-success__icon {
  color: #2fba83;
  font-size: 38px;
  filter: drop-shadow(0 6px 12px rgba(47, 186, 131, 0.2));
}

.activation-success > div {
  display: grid;
  gap: 3px;
}

.activation-success strong {
  font-size: 16px;
  font-weight: 500;
}

.activation-success div span {
  color: #7e899e;
  font-size: 12px;
}

.server-overview {
  overflow: hidden;
  border: 1px solid rgba(133, 153, 184, 0.25);
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 12px 32px rgba(49, 82, 126, 0.07);
}

.server-overview__header {
  min-height: 76px;
  display: flex;
  align-items: center;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(220, 227, 239, 0.9);
  background: rgba(245, 249, 255, 0.78);
}

.server-overview__identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 13px;
}

.server-overview__server-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--blue);
  font-size: 20px;
}

.server-overview__identity > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.server-overview__identity strong {
  color: #283650;
  font-size: 16px;
  font-weight: 500;
}

.server-overview__identity div span {
  color: #8994a8;
  font-size: 12px;
}

.server-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 15px 10px 17px;
}

.server-fact {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-right: 1px solid rgba(220, 227, 239, 0.9);
  text-align: center;
}

.server-fact:last-child { border-right: 0; }

.server-fact__icon {
  margin-bottom: 2px;
  color: #4c83e8;
  font-size: 17px;
}

.server-fact > span:not(.server-fact__icon) {
  color: #8a95a9;
  font-size: 11px;
}

.server-fact strong {
  max-width: 100%;
  overflow: hidden;
  color: #33415a;
  font-size: 13px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setup-footer--activation { margin-top: 22px; }
.activation-note { max-width: 270px; }
.open-starkos-button { min-width: 184px; }

.login-card { width: min(760px, calc(100vw - 40px)); }
.login-header { margin-bottom: 28px; }

.login-panel {
  display: grid;
  gap: 14px;
}

.login-server {
  min-height: 66px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border: 1px solid rgba(133, 153, 184, 0.22);
  border-radius: 17px;
  background: rgba(245, 249, 255, 0.62);
}

.login-server__icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--blue);
  font-size: 19px;
}

.login-server > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.login-server span:not(.login-server__icon) {
  color: #8994a8;
  font-size: 12px;
}

.login-server strong {
  overflow: hidden;
  color: #33415a;
  font-size: 15px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.login-fields {
  display: grid;
  gap: 14px;
}

.login-fields .account-field {
  min-height: 76px;
  background: rgba(255, 255, 255, 0.72);
}

.floating-field {
  position: relative;
  height: 44px;
  display: block;
}

.floating-field small {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 0;
  color: #a6afc0;
  font-size: 15px;
  line-height: 1;
  pointer-events: none;
  transform: translateY(-50%);
  transform-origin: left top;
  transition:
    top 180ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    color 180ms ease,
    font-size 180ms ease;
}

.floating-field input {
  height: 44px;
  padding-top: 16px !important;
  color: #1c2740;
  line-height: 20px;
}

.floating-field input::placeholder { color: transparent !important; }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  background-color: transparent !important;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: #1c2740;
  caret-color: #1c2740;
  box-shadow: 0 0 0 1000px transparent inset;
  transition: background-color 9999s ease-out 0s;
}

.account-field:focus-within .floating-field small,
.floating-field:has(input:not(:placeholder-shown)) small {
  top: 3px;
  color: #73819a;
  font-size: 11px;
  transform: translateY(0);
}

.account-field:focus-within .floating-field small { color: var(--blue); }

.login-security-note {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 2px 3px 0;
  color: #8490a6;
  font-size: 12px;
  line-height: 1.4;
}

.login-security-note > span:first-child {
  flex: 0 0 auto;
  color: #35a77f;
  font-size: 15px;
}

.login-footer {
  margin-top: 22px;
  justify-content: flex-end;
}

.login-button { min-width: 150px; }

.starkos-desktop {
  position: relative;
  min-height: 100vh;
  padding-top: 25px;
}

.desktop-topbar {
  position: absolute;
  z-index: 1000;
  inset: 0 0 auto;
  height: 25px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 5px 0 8px;
  color: #33415a;
  background: rgba(244, 250, 255, 0.78);
  border-bottom: 1px solid rgba(112, 149, 187, 0.18);
  box-shadow: 0 1px 8px rgba(29, 76, 120, 0.08);
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  user-select: none;
}

.desktop-topbar__spacer { min-width: 0; }

.desktop-topbar__clock {
  grid-column: 2;
  justify-self: center;
  color: #40516c;
  font-size: 11px;
  font-weight: 400;
  line-height: 25px;
  letter-spacing: 0.005em;
  white-space: nowrap;
}

.desktop-topbar__actions {
  grid-column: 3;
  justify-self: end;
  height: 25px;
  display: flex;
  align-items: center;
  gap: 2px;
}

.desktop-language-control {
  position: relative;
  width: 23px;
  height: 21px;
}

.desktop-language-trigger,
.desktop-session-button {
  width: 23px;
  height: 21px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 5px;
  background: transparent;
}

.desktop-language-trigger img {
  width: 18px;
  height: auto;
  display: block;
}

.desktop-language-trigger:hover,
.desktop-language-trigger:focus-visible {
  outline: none;
  background: rgba(36, 115, 255, 0.09);
}

.desktop-session-button {
  color: #53647e;
  font-size: 12px;
  line-height: 1;
  transition: color 140ms ease, background-color 140ms ease;
}

.desktop-session-button:hover,
.desktop-session-button:focus-visible {
  outline: none;
  color: #e45867;
  background: rgba(228, 88, 103, 0.1);
}

.desktop-language-menu {
  position: absolute;
  z-index: 40;
  top: 27px;
  right: -14px;
  width: 52px;
  padding: 5px;
  display: grid;
  gap: 3px;
  border: 1px solid rgba(112, 149, 187, 0.2);
  border-radius: 10px;
  background: rgba(247, 251, 255, 0.94);
  box-shadow: 0 9px 24px rgba(30, 76, 121, 0.17);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.desktop-language-menu[hidden] { display: none; }

.desktop-language-option {
  position: relative;
  width: 40px;
  height: 27px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  transition: background-color 140ms ease;
}

.desktop-language-option:hover,
.desktop-language-option:focus-visible {
  outline: none;
  background: rgba(36, 115, 255, 0.08);
}

.desktop-language-option img {
  width: 22px;
  height: auto;
  display: block;
}

.desktop-language-selected-dot {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: transparent;
}

.desktop-language-option[aria-selected="true"] .desktop-language-selected-dot {
  background: #2473ff;
  box-shadow: 0 0 0 2px rgba(36, 115, 255, 0.11);
}

.desktop-app-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, 112px);
  grid-auto-rows: minmax(116px, auto);
  gap: 12px;
  padding: 24px 20px;
}

.desktop-app-shortcut {
  width: 112px;
  min-height: 116px;
  padding: 8px 6px 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: #fff;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  cursor: default;
  user-select: none;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.desktop-app-shortcut:hover,
.desktop-app-shortcut:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 10px 26px rgba(28, 86, 150, 0.12);
  transform: translateY(-1px);
}

.desktop-app-shortcut__icon {
  width: 76px;
  height: 76px;
  display: block;
  flex: 0 0 76px;
  object-fit: contain;
  border-radius: 20px;
  filter: drop-shadow(0 7px 12px rgba(9, 61, 130, 0.23));
  pointer-events: none;
}

.desktop-app-shortcut__label {
  width: 100%;
  display: block;
  color: #fff;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: 0.01em;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 1px 3px rgba(10, 48, 94, 0.72);
}

.starkos-dock {
  position: absolute;
  z-index: 950;
  bottom: 9px;
  left: 50%;
  min-width: 0;
  min-height: 48px;
  padding: 5px 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  border: 0;
  border-radius: 17px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: translateX(-50%);
  transition: min-width 180ms ease, opacity 180ms ease, background-color 180ms ease;
}

.starkos-dock.is-empty { opacity: 1; }
.starkos-dock__brand { width: 31px; height: 38px; display: grid; place-items: center; flex: 0 0 31px; }
.starkos-dock__brand-icon { width: 29px; height: 29px; display: block; background: center / contain no-repeat url("./assets/brand/starkos-favicon-64.png?v=20261103-01"); filter: drop-shadow(0 3px 6px rgba(11,65,132,.18)); }
.starkos-dock__divider { width: 1px; height: 27px; display: block; flex: 0 0 1px; background: rgba(76,122,165,.23); }
.starkos-dock.is-empty .starkos-dock__divider { display: none; }
.starkos-dock__items { min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 7px; }
.starkos-dock__item { position: relative; width: 40px; height: 40px; padding: 2px; display: grid; place-items: center; border: 0; border-radius: 12px; background: transparent; cursor: pointer; transition: background-color 160ms ease, transform 160ms ease; animation: starkos-dock-arrive 220ms cubic-bezier(.2,.85,.3,1.2); }
.starkos-dock__item.is-active { background: rgba(255,255,255,.14); box-shadow: 0 0 18px rgba(180,231,255,.28); }
.starkos-dock__item.is-running { opacity: .88; }
.starkos-dock__item.is-minimized { opacity: .62; transform: scale(.92); }
.starkos-dock__item:hover,
.starkos-dock__item:focus-visible { outline: none; background: rgba(255,255,255,.28); transform: translateY(-4px) scale(1.08); }
.starkos-dock__item img { width: 34px; height: 34px; display: block; object-fit: contain; filter: drop-shadow(0 4px 7px rgba(11,65,132,.22)); pointer-events: none; }
.starkos-dock__item > span { position: absolute; bottom: -3px; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.9); box-shadow: 0 1px 4px rgba(14,69,126,.35); transform: translateX(-50%); }
.starkos-dock__item.is-active > span { background: #e8fbff; box-shadow: 0 0 7px rgba(204,244,255,.9); }
.starkos-dock__item.is-minimized > span { width: 3px; height: 3px; border: 1px solid rgba(235,249,255,.78); background: transparent; box-shadow: none; }

@keyframes starkos-dock-arrive {
  from { opacity: 0; transform: translateY(10px) scale(.72); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.starkos-app-window {
  position: absolute;
  z-index: 20;
  inset: 49px 70px 46px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #24334c;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 20px;
  background: rgba(246, 251, 255, 0.94);
  box-shadow: 0 28px 70px rgba(16, 63, 109, 0.23);
  backdrop-filter: blur(24px) saturate(135%);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
}

.starkos-app-window.is-window-active {
  border-color: rgba(255, 255, 255, 0.78);
  box-shadow: 0 30px 78px rgba(16, 63, 109, 0.27);
}

.starkos-app-window.is-window-positioned {
  right: auto;
  bottom: auto;
  transform: none;
}

html.is-window-transitioning,
body.is-window-transitioning,
.starkos-desktop.is-window-transitioning {
  overflow: hidden !important;
  overscroll-behavior: none;
}

.starkos-app-window.is-window-minimizing {
  pointer-events: none;
  transform-origin: center;
  animation: starkos-window-minimize 260ms cubic-bezier(.4,0,.7,.2) forwards;
}

.starkos-app-window.is-window-restoring {
  pointer-events: none;
  transform-origin: center;
  animation: starkos-window-restore 260ms cubic-bezier(.2,.75,.25,1) both;
}

@keyframes starkos-window-minimize {
  from { opacity: 1; transform: translate(0,0) scale(1); filter: blur(0); }
  to { opacity: 0; transform: translate(var(--window-dock-x),var(--window-dock-y)) scale(.16); filter: blur(1px); }
}

@keyframes starkos-window-restore {
  from { opacity: 0; transform: translate(var(--window-dock-x),var(--window-dock-y)) scale(.16); filter: blur(1px); }
  to { opacity: 1; transform: translate(0,0) scale(1); filter: blur(0); }
}

.starkos-app-window__titlebar[data-window-drag-handle] {
  cursor: grab;
  touch-action: none;
}

.starkos-app-window.is-window-dragging .starkos-app-window__titlebar[data-window-drag-handle] {
  cursor: grabbing;
}

.starkos-app-window__actions,
.starkos-app-window__actions * {
  cursor: pointer;
}

.starkos-desktop.is-window-dragging {
  user-select: none;
}

.starkos-app-window[hidden] { display: none; }

.starkos-app-window__titlebar {
  height: 43px;
  flex: 0 0 43px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 0 15px;
  border-bottom: 1px solid rgba(115, 150, 187, 0.18);
  background: rgba(255, 255, 255, 0.58);
  user-select: none;
}

.starkos-app-window__identity {
  display: flex;
  align-items: center;
  gap: 9px;
}

.starkos-app-window__mini-icon {
  width: 25px;
  height: 25px;
  display: block;
  border-radius: 7px;
  filter: drop-shadow(0 3px 5px rgba(20, 75, 137, 0.18));
}

.starkos-app-window__title {
  color: #31435f;
  font-size: 13px;
  font-weight: 500;
}

.starkos-app-window__actions {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 2px;
}

.starkos-app-window__action {
  width: 30px;
  height: 28px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  display: grid;
  place-items: center;
  color: #647792;
  border: 0;
  border-radius: 7px;
  background: transparent;
  font-size: 13px;
  line-height: 1;
  transition: color 140ms ease, background-color 140ms ease;
}

.starkos-app-window__action:hover,
.starkos-app-window__action:focus-visible {
  outline: none;
  color: #2873d5;
  background: rgba(36, 115, 255, 0.09);
}

.starkos-app-window__action--close:hover,
.starkos-app-window__action--close:focus-visible {
  color: #e45867;
  background: rgba(228, 88, 103, 0.1);
}

.sstp-app-start {
  min-height: 0;
  flex: 1;
  padding: 30px 52px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.67), rgba(239, 248, 255, 0.72));
}

.sstp-app-start__heading h1 {
  margin: 0;
  color: #1f304b;
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.sstp-app-start__heading p {
  margin: 7px 0 0;
  color: #7a8ba3;
  font-size: 13px;
}

.sstp-app-start__card {
  width: min(600px, 78%);
  margin: 72px auto 0;
  padding: 42px 46px 39px;
  text-align: center;
  border: 1px solid rgba(122, 159, 197, 0.18);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.67);
  box-shadow: 0 18px 45px rgba(30, 81, 130, 0.08);
}

.sstp-app-start__icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  color: #2473ff;
  border-radius: 20px;
  background: linear-gradient(145deg, #e8f4ff, #dbeaff);
  box-shadow: inset 0 0 0 1px rgba(36, 115, 255, 0.08);
  font-size: 29px;
}

.sstp-app-start__card h2 {
  margin: 0;
  color: #253750;
  font-size: 22px;
  font-weight: 500;
}

.sstp-app-start__card > p {
  max-width: 500px;
  margin: 12px auto 23px;
  color: #75869e;
  font-size: 14px;
  line-height: 1.55;
}

.sstp-app-start__button {
  height: 42px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #2d82ff, #1768e8);
  box-shadow: 0 9px 20px rgba(36, 115, 255, 0.23);
  font-size: 14px;
  font-weight: 400;
}

.sstp-app-start__button:hover,
.sstp-app-start__button:focus-visible {
  outline: none;
  background: linear-gradient(135deg, #2478f0, #105fd8);
}

.sstp-app-start__button span:last-child { font-size: 17px; }

.sstp-app-start__card small {
  display: block;
  margin-top: 13px;
  color: #9aa8ba;
  font-size: 11px;
}

.sstp-app-body {
  position: relative;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.67), rgba(239, 248, 255, 0.72));
}

.sstp-app-body > .sstp-app-start { height: 100%; box-sizing: border-box; }

.sstp-setup-screen,
.sstp-install-screen {
  height: 100%;
  padding: 28px 48px;
  box-sizing: border-box;
}

.sstp-setup-card {
  width: min(590px, 80%);
  margin: 28px auto 0;
  padding: 25px 34px 24px;
  box-sizing: border-box;
  text-align: center;
  border: 1px solid rgba(122, 159, 197, 0.2);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 18px 42px rgba(30, 81, 130, 0.08);
}

.sstp-setup-progress {
  width: 185px;
  margin: 0 auto 17px;
  display: flex;
  align-items: center;
}

.sstp-setup-progress span {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: #d8e1ed;
  box-shadow: 0 0 0 4px rgba(216, 225, 237, 0.22);
}

.sstp-setup-progress span.is-active {
  background: #287cff;
  box-shadow: 0 0 0 4px rgba(40, 124, 255, 0.12);
}

.sstp-setup-progress i { height: 1px; flex: 1; background: #c7d7e8; }

.sstp-setup-card__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 13px;
  display: grid;
  place-items: center;
  color: #2473ff;
  border-radius: 15px;
  background: #e7f1ff;
  font-size: 20px;
}

.sstp-setup-card h2 { margin: 0; font-size: 20px; font-weight: 500; }
.sstp-setup-card > p { margin: 8px auto 18px; color: #7b8ca4; font-size: 12px; line-height: 1.5; }

.sstp-floating-field {
  position: relative;
  height: 58px;
  display: block;
  text-align: left;
  border: 1px solid #d5e2ef;
  border-radius: 13px;
  background: #fff;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.sstp-floating-field:focus-within {
  border-color: #78aaff;
  box-shadow: 0 0 0 2px rgba(47, 126, 255, 0.11);
}

.sstp-floating-field > span {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 16px;
  color: #91a1b7;
  font-size: 13px;
  transform: translateY(-50%);
  pointer-events: none;
  transition: top 160ms ease, transform 160ms ease, font-size 160ms ease;
}

.sstp-floating-field:focus-within > span,
.sstp-floating-field:has(input:not(:placeholder-shown)) > span,
.sstp-domain-field > span {
  top: 9px;
  transform: none;
  font-size: 9px;
}

.sstp-floating-field input {
  width: 100%;
  height: 100%;
  padding: 18px 15px 4px;
  box-sizing: border-box;
  color: #304764;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
}

.sstp-domain-field > div { height: 100%; display: flex; align-items: center; padding: 13px 14px 0; }
.sstp-domain-field input { min-width: 60px; padding: 0; }
.sstp-domain-field b { color: #7990aa; font-size: 12px; font-weight: 400; white-space: nowrap; }

.sstp-address-status {
  min-height: 20px;
  margin: 9px 4px 0;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #38a47f;
  font-size: 10px;
  text-align: left;
}

.sstp-address-status.is-checking { color: #6d83a0; }
.sstp-address-status.is-checking .fontawesome { animation: spin 0.8s linear infinite; }
.sstp-address-status.is-invalid { color: #d35a67; }

.sstp-setup-fields { display: grid; gap: 11px; }
.sstp-password-field input { padding-right: 48px; }
.sstp-password-field button {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  width: 46px;
  height: 100%;
  color: #97a8bd;
  border: 0;
  background: transparent;
}

.sstp-form-error { min-height: 16px; margin: 7px 0 0 !important; color: #d85868 !important; font-size: 10px !important; }

.sstp-setup-card footer,
.sstp-modal__dialog footer {
  margin-top: 18px;
  padding-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid #e2ebf4;
}

.sstp-primary-button,
.sstp-secondary-button,
.sstp-danger-button,
.sstp-outline-button,
.sstp-danger-outline {
  height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 400;
}

.sstp-primary-button { color: #fff; border: 0; background: linear-gradient(135deg, #3184ff, #1468ed); box-shadow: 0 7px 16px rgba(28, 111, 235, 0.18); }
.sstp-secondary-button { color: #657b98; border: 1px solid #d4e1ee; background: #fff; }
.sstp-danger-button { color: #fff; border: 0; background: linear-gradient(135deg, #e56773, #cc4e5c); }
.sstp-danger-button.is-loading,
.sstp-danger-outline.is-loading { cursor: wait; opacity: .75; }
.sstp-danger-button.is-loading::before,
.sstp-danger-outline.is-loading::before {
  content: "";
  width: 12px;
  height: 12px;
  margin-right: 7px;
  display: inline-block;
  box-sizing: border-box;
  border: 2px solid rgba(255,255,255,.48);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.sstp-danger-outline.is-loading::before { border-color: #efd8dc; border-top-color: #cf5966; }
.sstp-danger-outline.is-loading > .fontawesome { display: none; }

.sstp-setup-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; }
.sstp-setup-summary div { padding: 12px 14px; border: 1px solid #dee8f2; border-radius: 11px; background: #f8fbfe; }
.sstp-setup-summary span { display: block; color: #8b9bb0; font-size: 9px; }
.sstp-setup-summary strong { display: block; margin-top: 4px; overflow: hidden; color: #405977; font-size: 11px; font-weight: 500; text-overflow: ellipsis; }

.sstp-install-screen { display: grid; place-items: center; }
.sstp-install-card { width: min(590px, 80%); padding: 25px 30px 28px; border: 1px solid #d8e5f0; border-radius: 20px; background: rgba(255,255,255,.84); box-shadow: 0 18px 44px rgba(30,81,130,.1); }
.sstp-install-card header { display: flex; align-items: center; }
.sstp-install-card header > span { width: 44px; height: 44px; margin-right: 12px; display: grid; place-items: center; color: #2473ff; border-radius: 13px; background: #e8f2ff; font-size: 18px; }
.sstp-install-card header div { display: grid; gap: 4px; }
.sstp-install-card header strong { font-size: 13px; font-weight: 500; }
.sstp-install-card header small { color: #8194ad; font-size: 10px; }
.sstp-install-card header b { margin-left: auto; padding: 7px 11px; color: #bb7c15; border-radius: 12px; background: #fff2d7; font-size: 10px; font-weight: 400; }
.sstp-install-card header b i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
.sstp-install-progress { margin: 20px 0 16px; }
.sstp-install-progress > div { display: flex; justify-content: space-between; margin-bottom: 8px; color: #516985; font-size: 10px; }
.sstp-install-progress > progress { width: 100%; height: 6px; display: block; overflow: hidden; border: 0; border-radius: 4px; background: #e6ebf1; appearance: none; }
.sstp-install-progress > progress::-webkit-progress-bar { border-radius: 4px; background: #e6ebf1; }
.sstp-install-progress > progress::-webkit-progress-value { border-radius: 4px; background: #4a7cff; transition: width .4s ease; }
.sstp-install-progress > progress::-moz-progress-bar { border-radius: 4px; background: #4a7cff; }
.sstp-install-steps { display: grid; gap: 10px; }
.sstp-install-steps div { display: flex; align-items: center; gap: 10px; color: #6f829b; font-size: 11px; }
.sstp-install-steps div span { width: 16px; color: #cdd5df; text-align: center; font-size: 7px; }
.sstp-install-steps div p { margin: 0; }
.sstp-install-steps div.is-current { color: #304966; font-weight: 500; }
.sstp-install-steps div.is-current span { color: #3779ee; font-size: 13px; animation: spin .8s linear infinite; }
.sstp-install-steps div.is-complete span { color: #37b98b; font-size: 11px; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .35; } }

.sstp-dashboard { height: 100%; display: grid; grid-template-columns: 196px minmax(0, 1fr); }
.sstp-dashboard__sidebar { min-height: 0; padding: 23px 11px; display: flex; flex-direction: column; border-right: 1px solid rgba(116,151,188,.19); background: rgba(231,243,253,.72); }
.sstp-dashboard__sidebar nav { display: grid; gap: 5px; }
.sstp-nav-item { width: 100%; height: 42px; padding: 0 14px; display: flex; align-items: center; gap: 12px; color: #64758f; border: 0; border-radius: 11px; background: transparent; font-size: 13px; text-align: left; }
.sstp-nav-item > .fontawesome { width: 16px; color: #7997ba; font-size: 14px; text-align: center; }
.sstp-nav-item small { margin-left: auto; padding: 3px 6px; border-radius: 9px; background: rgba(36,115,255,.08); font-size: 9px; }
.sstp-nav-item.is-active { color: #1768d6; background: rgba(36,115,255,.1); font-weight: 500; }
.sstp-nav-item.is-active > .fontawesome { color: #2473ff; }
.sstp-dashboard__sidebar > .sstp-nav-item { margin-top: auto; }
.sstp-dashboard__content { min-width: 0; min-height: 0; overflow: hidden; }
.sstp-page { height: 100%; min-height: 0; padding: 27px 32px 24px; box-sizing: border-box; }

.sstp-overview-page { display: flex; flex-direction: column; gap: 14px; }
.sstp-server-card { min-height: 78px; padding: 0 18px; display: flex; align-items: center; border: 1px solid #d8e5f0; border-radius: 15px; background: rgba(255,255,255,.7); }
.sstp-server-card__icon { width: 44px; height: 44px; margin-right: 13px; display: grid; place-items: center; color: #2473ff; border-radius: 13px; background: #e7f1ff; font-size: 18px; }
.sstp-server-card > div { display: grid; gap: 5px; }
.sstp-server-card__address { width: fit-content; margin: 0; padding: 0 0 2px; color: #304764; border: 0; border-bottom: 1px dashed #7e9fc4; border-radius: 0; background: transparent; box-shadow: none; font: inherit; font-size: 14px; font-weight: 500; line-height: 1.15; cursor: pointer; transition: color 160ms ease, border-color 160ms ease; }
.sstp-server-card__address:hover { color: #176be9; border-bottom-color: #176be9; }
.sstp-server-card__address:focus-visible { color: #176be9; outline: 2px solid rgba(36,115,255,.28); outline-offset: 4px; }
.sstp-server-card div span { color: #8295ad; font-size: 10px; }
.sstp-server-card div i { margin: 0 7px; color: #7890ad; font-size: 18px; font-style: normal; vertical-align: -2px; }
.sstp-server-card__connect { height: 36px; margin-left: auto; padding: 0 15px; color: #fff; border: 0; border-radius: 10px; background: linear-gradient(135deg,#3184ff,#1468ed); box-shadow: 0 7px 16px rgba(28,111,235,.17); font-size: 10px; }
.sstp-server-card__connect span { margin-left: 10px; }

.sstp-metrics,
.sstp-user-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.sstp-metrics > div,
.sstp-user-stats > div { min-height: 62px; padding: 0 14px; display: flex; align-items: center; border: 1px solid #dbe6f0; background: rgba(255,255,255,.58); }
.sstp-metrics > div > span,
.sstp-user-stats > div > span { width: 34px; height: 34px; margin-right: 10px; display: grid; place-items: center; color: #367de2; border-radius: 10px; background: #e7f1ff; font-size: 13px; }
.sstp-metrics p,
.sstp-user-stats p { margin: 0; display: grid; gap: 3px; }
.sstp-metrics strong,
.sstp-user-stats strong { color: #304764; font-size: 16px; font-weight: 500; }
.sstp-metrics small,
.sstp-user-stats small { color: #8799b0; font-size: 8px; }
.sstp-section-title { display: flex; align-items: center; justify-content: space-between; }
.sstp-section-title h2 { margin: 0; font-size: 14px; font-weight: 500; }
.sstp-section-title button { color: #3779d6; border: 0; background: transparent; font-size: 10px; }

.sstp-connections-page { display: flex; flex-direction: column; }
.sstp-connections-panel { min-height: 0; flex: 1; display: flex; flex-direction: column; position: relative; }
.sstp-connections-panel.is-compact { min-height: 0; }
.sstp-connections-toolbar { margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; }
.sstp-connections-toolbar h2,
.sstp-page-header h2 { margin: 0; color: #263a59; font-size: 20px; font-weight: 500; }
.sstp-connections-toolbar p,
.sstp-page-header p { margin: 6px 0 0; color: #8597ae; font-size: 10px; }
.sstp-connection-search { width: 330px; height: 40px; display: flex; align-items: center; border: 1px solid #d4e2ef; border-radius: 11px; background: rgba(255,255,255,.8); }
.sstp-connection-search span { width: 40px; color: #6f8fb5; text-align: center; font-size: 12px; }
.sstp-connection-search input { min-width: 0; flex: 1; height: 100%; padding: 0 12px 0 0; color: #48617f; border: 0; outline: 0; background: transparent; font-size: 11px; }
.sstp-connection-search input::placeholder { color: #98a8bc; opacity: 1; }

.sstp-connections-table { min-height: 0; flex: 1; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #d7e4ef; border-radius: 0; background: rgba(255,255,255,.48); }
.sstp-connections-table__head,
.sstp-connections-table__row { display: grid; grid-template-columns: 1.48fr 1fr .74fr .92fr 34px; align-items: center; column-gap: 14px; box-sizing: border-box; }
.sstp-connections-table__head { height: 34px; flex: 0 0 34px; padding: 0 14px; color: #8a9bb1; border-bottom: 1px solid #d7e4ef; background: #eaf3fb; font-size: 8px; text-transform: uppercase; }
.sstp-connections-table__body { min-height: 0; flex: 1; overflow-x: hidden; overflow-y: auto; scrollbar-color: #a8c1da transparent; scrollbar-width: thin; }
.sstp-connections-table__row { position: relative; min-height: 57px; padding: 0 14px; color: #48617f; border-bottom: 1px solid #dde8f2; font-size: 9px; cursor: pointer; transition: background 150ms ease; }
.sstp-connections-table__row:hover { background: rgba(235,245,255,.82); }
.sstp-connections-table__row.is-restricted { padding-left: 11px; border-left: 3px solid #efc15b; background: rgba(255,248,226,.62); }
.sstp-connection-user { min-width: 0; display: flex; align-items: center; }
.sstp-connection-user > span { width: 32px; height: 32px; margin-right: 10px; flex: 0 0 32px; display: grid; place-items: center; color: #2d7cf0; border-radius: 10px; background: #e6f0ff; font-size: 11px; }
.sstp-connection-user p { min-width: 0; margin: 0; overflow: hidden; }
.sstp-connection-user strong { display: block; color: #304764; font-size: 10px; font-weight: 500; }
.sstp-connection-user small { display: block; margin-top: 4px; color: #7890ad; font-size: 8px; }
.sstp-connection-online { display: flex; align-items: flex-start; }
.sstp-connection-online > i { width: 7px; height: 7px; margin: 3px 8px 0 0; flex: 0 0 7px; border-radius: 50%; background: #35bd8c; box-shadow: 0 0 0 3px rgba(53,189,140,.09); }
.is-restricted .sstp-connection-online > i { background: #e7aa2d; box-shadow: 0 0 0 3px rgba(231,170,45,.1); }
.sstp-connection-online p { margin: 0; }
.sstp-connection-online small { display: block; margin-top: 4px; color: #c18b21; font-size: 7px; }
.sstp-connection-online small[hidden] { display: none !important; }
.sstp-connection-traffic span { display: block; color: #3479cf; }
.sstp-connection-traffic small { display: block; margin-top: 4px; color: #66809e; font-size: 8px; }
.sstp-connection-disconnect { width: 30px; height: 30px; display: grid; place-items: center; color: #8da2ba; border: 0; border-radius: 9px; background: transparent; font-size: 12px; transition: color 150ms ease, background 150ms ease; }
.sstp-connection-disconnect:hover { color: #d55362; background: #fff0f2; }
.sstp-connection-disconnect:disabled { cursor: wait; }
.sstp-connection-disconnect.is-loading { width: 16px; height: 16px; margin: 7px; box-sizing: border-box; color: transparent; border: 2px solid #d5e5f8; border-top-color: #3779d6; border-radius: 50%; background: transparent; font-size: 0; animation: spin .7s linear infinite; }
.sstp-empty-search { margin: 0; padding: 18px; color: #8295ad; font-size: 11px; text-align: center; }
.sstp-connections-empty { min-height: 150px; height: 100%; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; color: #8a9db5; text-align: center; }
.sstp-connections-empty > span { margin-bottom: 11px; color: #73a7e8; font-size: 23px; }
.sstp-connections-empty strong { color: #536c8a; font-size: 12px; font-weight: 500; }
.sstp-connections-empty small { margin-top: 6px; font-size: 9px; }

.sstp-page-header { margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; }
.sstp-outline-button { display: inline-flex; align-items: center; gap: 8px; color: #3779d6; border: 1px solid #c9dcf2; background: rgba(255,255,255,.65); }
.sstp-outline-button .fontawesome { font-size: 15px; }
.sstp-users-page { display: flex; flex-direction: column; }
.sstp-first-user-stage { min-height: 0; flex: 1; display: flex; align-items: center; justify-content: center; }
.sstp-first-user-card { width: 500px; color: #263a59; background: transparent; }
.sstp-first-user-card > header { min-height: 82px; padding: 0 24px; display: flex; align-items: center; gap: 13px; border-bottom: 1px solid #e1ebf5; }
.sstp-first-user-card > header > div { display: grid; gap: 5px; }
.sstp-first-user-card > header h2 { margin: 0; font-size: 17px; font-weight: 500; }
.sstp-first-user-card > header p { margin: 0; color: #8495aa; font-size: 10px; }
.sstp-first-user-card__icon { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; color: #2879ef; border-radius: 13px; background: #e8f2ff; font-size: 16px; }
.sstp-first-user-card__body { padding: 18px 24px 8px; display: grid; gap: 10px; }
.sstp-first-user-card__body .sstp-modal-field { height: 55px; }
.sstp-first-user-card__body .sstp-modal-error { min-height: 0; }
.sstp-first-user-card > footer { margin: 0; padding: 13px 24px 22px; display: flex; justify-content: flex-end; border: 0; }
.sstp-first-user-card > footer .sstp-primary-button { min-width: 158px; }
.sstp-users-table { min-height: 0; flex: 1; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #d7e4ef; }
.sstp-users-table__head,
.sstp-users-table__row { display: grid; grid-template-columns: 1.4fr .75fr 1fr .75fr; align-items: center; column-gap: 15px; }
.sstp-users-table__head { height: 35px; flex: 0 0 35px; padding: 0 16px; color: #8a9bb1; border-bottom: 1px solid #d7e4ef; background: #eaf3fb; font-size: 8px; text-transform: uppercase; }
.sstp-users-table__body { min-height: 0; overflow-y: auto; scrollbar-color: #a8c1da transparent; scrollbar-width: thin; }
.sstp-connections-table__body::-webkit-scrollbar,
.sstp-users-table__body::-webkit-scrollbar { width: 6px; }
.sstp-connections-table__body::-webkit-scrollbar-track,
.sstp-users-table__body::-webkit-scrollbar-track { background: transparent; }
.sstp-connections-table__body::-webkit-scrollbar-thumb,
.sstp-users-table__body::-webkit-scrollbar-thumb { border-radius: 6px; background: #a8c1da; }
.sstp-connections-table__body::-webkit-scrollbar-thumb:hover,
.sstp-users-table__body::-webkit-scrollbar-thumb:hover { background: #8faeca; }
.sstp-users-table__row { width: 100%; min-height: 57px; padding: 0 16px; color: #506986; border: 0; border-bottom: 1px solid #dde8f2; background: transparent; font-size: 9px; text-align: left; }
.sstp-users-table__row:hover { background: #edf6ff; }
.sstp-users-table__row > div { display: flex; align-items: center; }
.sstp-users-table__row > div > span { width: 32px; height: 32px; margin-right: 10px; display: grid; place-items: center; color: #2d7cf0; border-radius: 10px; background: #e6f0ff; }
.sstp-users-table__row p { margin: 0; }
.sstp-users-table__row strong { display: block; color: #304764; font-size: 10px; font-weight: 500; }
.sstp-users-table__row small { display: none; margin-top: 4px; color: #8398b2; font-size: 7px; }
.sstp-user-status { display: inline-flex; align-items: center; gap: 7px; color: #359d7a; }
.sstp-user-status i { width: 7px; height: 7px; border-radius: 50%; background: #35bd8c; }
.sstp-user-status.is-blocked { color: #c55c67; }
.sstp-user-status.is-blocked i { background: #dc6470; }

.sstp-user-detail { overflow-y: auto; }
.sstp-back-link { margin: 0 0 16px; padding: 0; color: #52779f; border: 0; background: transparent; font-size: 10px; }
.sstp-back-link span { margin-right: 5px; font-size: 15px; vertical-align: -1px; }
.sstp-user-detail__header { display: flex; align-items: center; gap: 13px; }
.sstp-user-detail__avatar { width: 53px; height: 53px; display: grid; place-items: center; color: #2473ff; border-radius: 17px; background: #e6f1ff; font-size: 18px; }
.sstp-user-detail__identity { margin-right: auto; }
.sstp-user-detail__identity h2 { margin: 0 0 7px; font-size: 22px; font-weight: 500; }
.sstp-user-detail__identity span { display: flex; align-items: center; gap: 7px; color: #379a79; font-size: 9px; }
.sstp-user-detail__identity span i { width: 7px; height: 7px; border-radius: 50%; background: #35bd8c; }
.sstp-user-detail__identity span.is-blocked { color: #c55c67; }
.sstp-user-detail__identity span.is-blocked i { background: #dc6470; }
.sstp-danger-outline { display: inline-flex; align-items: center; gap: 7px; color: #cf5966; border: 1px solid #edcbd0; background: rgba(255,248,249,.7); }
.sstp-user-stats { margin-top: 18px; }
.sstp-user-detail__grid { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.sstp-detail-card { border: 1px solid #dbe6f0; background: rgba(255,255,255,.5); }
.sstp-detail-card h3 { height: 49px; margin: 0; padding: 0 15px; display: flex; align-items: center; gap: 10px; color: #425977; border-bottom: 1px solid #dfe9f2; font-size: 12px; font-weight: 500; }
.sstp-detail-card h3 span { width: 27px; height: 27px; display: grid; place-items: center; color: #377de1; border-radius: 9px; background: #e8f2ff; }
.sstp-detail-card dl { margin: 0; padding: 0 16px; }
.sstp-detail-card dl div { min-height: 30px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e4ecf3; }
.sstp-detail-card dl div:last-child { border-bottom: 0; }
.sstp-detail-card dt { color: #8295ad; font-size: 10px; }
.sstp-detail-card dd { margin: 0; color: #4e6683; font-size: 10px; }
.sstp-detail-card dd.is-link { color: #2473d9; }
.sstp-access-row { min-height: 48px; margin: 0 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e4ecf3; }
.sstp-access-row:last-child { border-bottom: 0; }
.sstp-access-row strong { display: block; color: #4b6381; font-size: 11px; font-weight: 400; }
.sstp-access-row small { display: block; margin-top: 3px; color: #92a2b6; font-size: 9px; }
.sstp-access-row select { width: 42px; height: 28px; padding: 0 6px; color: #4d6683; border: 1px solid #d4e1ee; border-radius: 8px; outline: 0; background: #f8fbfe; font-size: 10px; }
.sstp-toggle { position: relative; width: 31px; height: 18px; }
.sstp-toggle input { position: absolute; opacity: 0; }
.sstp-toggle span { position: absolute; inset: 0; border-radius: 10px; background: #b9c7d6; transition: background 150ms ease; }
.sstp-toggle span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(36,61,88,.18); transition: transform 150ms ease; }
.sstp-toggle input:checked + span { background: #35b98b; }
.sstp-toggle input:checked + span::after { transform: translateX(13px); }
.sstp-delete-zone { min-height: 50px; margin-top: 11px; padding: 0 14px; display: flex; align-items: center; border: 1px solid #efd4d8; background: rgba(255,248,249,.55); }
.sstp-delete-zone div { display: grid; gap: 4px; }
.sstp-delete-zone strong { color: #c55a66; font-size: 11px; font-weight: 400; }
.sstp-delete-zone small { color: #aa8c93; font-size: 9px; }
.sstp-delete-zone button { height: 29px; margin-left: auto; padding: 0 11px; color: #c95864; border: 1px solid #eccbd0; border-radius: 8px; background: #fff; font-size: 10px; }

.sstp-journal-page { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.sstp-journal-header { margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; }
.sstp-journal-header h2 { margin: 0 0 5px; color: #2e4360; font-size: 19px; font-weight: 500; }
.sstp-journal-header p { margin: 0; color: #8193aa; font-size: 9px; }
.sstp-journal-header > span { display: inline-flex; align-items: center; gap: 7px; color: #43a383; font-size: 8px; }
.sstp-journal-header > span i { width: 7px; height: 7px; border-radius: 50%; background: #38c18e; box-shadow: 0 0 0 4px rgba(56,193,142,.11); }
.sstp-journal-toolbar { margin-bottom: 12px; display: flex; gap: 10px; flex: 0 0 auto; }
.sstp-journal-search { min-width: 0; height: 38px; flex: 1; display: flex; align-items: center; color: #8ba0b8; border: 1px solid #d5e3ef; background: rgba(255,255,255,.56); }
.sstp-journal-search > span { width: 39px; text-align: center; font-size: 11px; }
.sstp-journal-search input { min-width: 0; height: 100%; flex: 1; padding: 0 12px 0 0; color: #425c7a; border: 0; outline: 0; background: transparent; font: inherit; font-size: 9px; }
.sstp-journal-search input::placeholder { color: #91a3b7; opacity: 1; }
.sstp-journal-search input::-webkit-search-cancel-button { opacity: .5; }
.sstp-journal-date { width: 137px; height: 38px; padding: 0 12px; display: flex; align-items: center; gap: 9px; box-sizing: border-box; color: #536e8c; border: 1px solid #d5e3ef; background: rgba(255,255,255,.56); font-size: 9px; }
.sstp-journal-date .fontawesome:first-child { color: #4384df; font-size: 11px; }
.sstp-journal-date .fontawesome:last-child { margin-left: auto; color: #8ba0b6; }
.sstp-journal-panel { min-height: 0; flex: 1; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #d7e4ef; background: rgba(255,255,255,.43); }
.sstp-journal-panel > header { height: 38px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; flex: 0 0 38px; box-sizing: border-box; border-bottom: 1px solid #d9e5ef; background: rgba(230,241,251,.64); }
.sstp-journal-panel > header strong { color: #4a6380; font-size: 9px; font-weight: 500; }
.sstp-journal-panel > header span { color: #8da0b5; font-size: 8px; }
.sstp-journal-list { min-height: 0; flex: 1; overflow-x: hidden; overflow-y: auto; scrollbar-color: #a8c1da transparent; scrollbar-width: thin; }
.sstp-journal-list::-webkit-scrollbar { width: 6px; }
.sstp-journal-list::-webkit-scrollbar-track { background: transparent; }
.sstp-journal-list::-webkit-scrollbar-thumb { border-radius: 6px; background: #a8c1da; }
.sstp-journal-list::-webkit-scrollbar-thumb:hover { background: #8faeca; }
.sstp-journal-entry { min-height: 65px; padding: 0 14px; display: grid; grid-template-columns: 58px 32px minmax(0,1fr); align-items: center; box-sizing: border-box; border-bottom: 1px solid #e0e9f1; }
.sstp-journal-entry[hidden] { display: none; }
.sstp-journal-entry time { align-self: start; padding-top: 17px; color: #8ca0b6; font-size: 8px; }
.sstp-journal-entry__icon { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 8px; font-size: 9px; }
.sstp-journal-entry__icon.is-danger { color: #d85c69; background: #ffedef; }
.sstp-journal-entry__icon.is-warning { color: #ce8a27; background: #fff3d9; }
.sstp-journal-entry__icon.is-success { color: #279e78; background: #e4f7ef; }
.sstp-journal-entry__icon.is-info { color: #3b7fdc; background: #e8f2ff; }
.sstp-journal-entry > div { min-width: 0; padding: 10px 0; }
.sstp-journal-entry strong { display: block; overflow: hidden; color: #3e5775; font-size: 9px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.sstp-journal-entry p { margin: 4px 0 0; overflow: hidden; color: #617995; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.sstp-journal-entry small { display: block; margin-top: 4px; overflow: hidden; color: #94a4b6; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.sstp-journal-empty { margin: 0; padding: 52px 20px; color: #879ab0; text-align: center; font-size: 10px; }

.sstp-settings-page { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.sstp-settings-header { margin-bottom: 14px; flex: 0 0 auto; }
.sstp-settings-header h2 { margin: 0 0 5px; color: #2e4360; font-size: 21px; font-weight: 500; }
.sstp-settings-header p { margin: 0; color: #8193aa; font-size: 11px; }
.sstp-settings-grid { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 11px; align-content: start; }
.sstp-settings-card { overflow: hidden; border: 1px solid #d8e5f0; background: rgba(255,255,255,.48); }
.sstp-settings-grid > .sstp-settings-card:first-child,
.sstp-settings-grid > .sstp-settings-card:last-child { position: relative; z-index: 2; overflow: visible; }
.sstp-settings-grid > .sstp-settings-card:first-child:has(.sstp-settings-menu),
.sstp-settings-grid > .sstp-settings-card:last-child:has(.sstp-settings-menu) { z-index: 20; }
.sstp-settings-card > header { min-height: 50px; padding: 0 12px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #dfe9f2; }
.sstp-settings-card > header > .fontawesome { width: 29px; height: 29px; display: grid; place-items: center; flex: 0 0 29px; color: #347de3; border-radius: 9px; background: #e7f1ff; font-size: 12px; }
.sstp-settings-card h3 { margin: 0 0 3px; color: #405975; font-size: 14px; font-weight: 500; }
.sstp-settings-card header p { margin: 0; color: #8a9bb0; font-size: 10px; }
.sstp-settings-card--server { grid-row: span 2; }
.sstp-settings-online { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: #3c9c7c; font-size: 10px; white-space: nowrap; }
.sstp-settings-online i { width: 7px; height: 7px; border-radius: 50%; background: #39bd8d; box-shadow: 0 0 0 3px rgba(57,189,141,.11); }
.sstp-settings-online.is-restarting { color: #c48327; }
.sstp-settings-online.is-restarting i { background: #e0a13b; animation: pulse 1s ease-in-out infinite; }
.sstp-settings-online.is-offline { color: #a06b72; }
.sstp-settings-online.is-offline i { background: #c56b76; box-shadow: none; }
.sstp-settings-row { min-height: 48px; margin: 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 13px; border-bottom: 1px solid #e3ecf3; }
.sstp-settings-row:last-child { border-bottom: 0; }
.sstp-settings-row > div:first-child { min-width: 0; }
.sstp-settings-row strong { display: block; color: #4a6380; font-size: 12px; font-weight: 400; }
.sstp-settings-row small { display: block; margin-top: 2px; color: #92a2b5; font-size: 10px; white-space: nowrap; }
.sstp-settings-value { color: #56708e; font-size: 11px; white-space: nowrap; }
.sstp-settings-control-wrap { position: relative; flex: 0 0 auto; }
.sstp-settings-select { min-width: 155px; height: 29px; padding: 0 9px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #506a87; border: 1px solid #d4e1ed; border-radius: 8px; outline: 0; background: #f9fcff; font-size: 11px; }
.sstp-settings-select--short { min-width: 85px; }
.sstp-settings-menu { position: absolute; z-index: 30; top: 34px; right: 0; padding: 5px; box-sizing: border-box; border: 1px solid #cbdceb; border-radius: 10px; background: rgba(250,253,255,.99); box-shadow: 0 12px 28px rgba(47,79,112,.18); }
.sstp-settings-menu--language { width: 220px; }
.sstp-settings-menu--retention { width: 118px; }
.sstp-settings-menu__option { width: 100%; min-height: 40px; padding: 0 9px; display: flex; align-items: center; gap: 9px; color: #536d89; border: 0; border-radius: 7px; background: transparent; text-align: left; }
.sstp-settings-menu__option + .sstp-settings-menu__option { border-top: 1px solid #e7eef5; }
.sstp-settings-menu__option.is-selected { color: #3478d7; background: #eaf3ff; }
.sstp-settings-menu__option > span:first-child { width: 25px; flex: 0 0 25px; text-align: center; font-size: 10px; }
.sstp-settings-menu--retention .sstp-settings-menu__option > span:first-child { width: auto; flex: 1; text-align: left; }
.sstp-settings-menu__option div { min-width: 0; flex: 1; }
.sstp-settings-menu__option strong { display: block; color: #425e7d; font-size: 10px; font-weight: 400; }
.sstp-settings-menu__option small { display: block; margin-top: 3px; color: #8b9db1; font-size: 8px; }
.sstp-settings-menu__option i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #3180ef; box-shadow: 0 0 0 3px rgba(49,128,239,.12); }
.sstp-settings-certificate { min-height: 78px; padding: 0 12px; display: flex; align-items: center; gap: 10px; }
.sstp-settings-certificate > .fontawesome { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 28px; color: #2c9f79; border-radius: 50%; background: #e2f7ef; font-size: 10px; }
.sstp-settings-certificate > div { min-width: 0; margin-right: auto; }
.sstp-settings-certificate strong { display: block; color: #48617e; font-size: 11px; font-weight: 400; }
.sstp-settings-certificate small { display: block; margin-top: 4px; color: #899bb0; font-size: 9px; }
.sstp-settings-certificate > button { height: 29px; padding: 0 11px; display: inline-flex; align-items: center; justify-content: center; color: #4e6f95; border: 1px solid #cfdeeb; border-radius: 8px; background: #fff; font-size: 10px; line-height: 1; }
.sstp-settings-certificate-progress { padding: 13px 12px 12px; }
.sstp-settings-certificate-progress > div { display: flex; align-items: center; gap: 10px; }
.sstp-settings-spinner { width: 24px; height: 24px; flex: 0 0 24px; box-sizing: border-box; border: 2px solid #d7e7fa; border-top-color: #2f7fec; border-radius: 50%; animation: spin .8s linear infinite; }
.sstp-settings-certificate-progress p { min-width: 0; margin: 0; flex: 1; }
.sstp-settings-certificate-progress strong { display: block; color: #48617e; font-size: 11px; font-weight: 400; }
.sstp-settings-certificate-progress small { display: block; margin-top: 4px; color: #899bb0; font-size: 9px; }
.sstp-settings-certificate-progress b { color: #3478d7; font-size: 10px; font-weight: 500; }
.sstp-settings-certificate-progress > progress { width: 100%; height: 5px; margin-top: 11px; display: block; overflow: hidden; border: 0; border-radius: 4px; background: #e4edf6; appearance: none; }
.sstp-settings-certificate-progress > progress::-webkit-progress-bar { border-radius: 4px; background: #e4edf6; }
.sstp-settings-certificate-progress > progress::-webkit-progress-value { border-radius: 4px; background: linear-gradient(90deg,#4a91ff,#2676ef); transition: width 280ms ease; }
.sstp-settings-certificate-progress > progress::-moz-progress-bar { border-radius: 4px; background: #2676ef; }
.sstp-settings-certificate-progress > small { margin-top: 7px; }
.sstp-settings-inline { display: flex; align-items: center; gap: 8px; color: #4d6988; font-size: 10px; white-space: nowrap; }
.sstp-settings-inline button { height: 25px; padding: 0 8px; color: #3478d5; border: 1px solid #d3e2f1; border-radius: 7px; background: #f7fbff; font-size: 9px; }
.sstp-settings-card > footer { padding: 10px 12px; display: flex; justify-content: flex-end; }
.sstp-settings-button { height: 29px; padding: 0 11px; display: inline-flex; align-items: center; justify-content: center; color: #4e6f95; border: 1px solid #cfdeeb; border-radius: 8px; background: #fff; font-size: 10px; line-height: 1; }
.sstp-settings-button .fontawesome { margin-right: 7px; color: #3d80df; }
.sstp-settings-button:disabled, .sstp-settings-inline button:disabled { cursor: default; opacity: .55; }
.sstp-settings-danger { min-height: 60px; margin-top: 11px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; border: 1px solid #efd3d7; background: rgba(255,248,249,.56); }
.sstp-settings-danger > div { display: flex; align-items: center; gap: 11px; }
.sstp-settings-danger > div > .fontawesome { width: 30px; height: 30px; display: grid; place-items: center; color: #d05a67; border-radius: 9px; background: #fff0f2; font-size: 12px; }
.sstp-settings-danger strong { display: block; color: #bb5360; font-size: 11px; font-weight: 400; }
.sstp-settings-danger small { display: block; margin-top: 3px; color: #a78c92; font-size: 9px; }
.sstp-settings-danger > button { height: 29px; padding: 0 11px; display: inline-flex; align-items: center; justify-content: center; color: #c65360; border: 1px solid #e9c6cb; border-radius: 8px; background: #fff; font-size: 10px; }

.sstp-placeholder-page { display: grid; place-items: center; }
.sstp-placeholder-card { width: min(520px,75%); padding: 45px 42px; text-align: center; border: 1px solid #d8e5f0; border-radius: 20px; background: rgba(255,255,255,.65); }
.sstp-placeholder-card > .fontawesome { width: 58px; height: 58px; margin: 0 auto 16px; display: grid; place-items: center; color: #397fe2; border-radius: 18px; background: #e7f1ff; font-size: 23px; }
.sstp-placeholder-card h2 { margin: 0; font-size: 21px; font-weight: 500; }
.sstp-placeholder-card p { max-width: 420px; margin: 11px auto; color: #778aa2; font-size: 12px; line-height: 1.55; }
.sstp-placeholder-card small { color: #9aa8b9; font-size: 9px; }

.sstp-modal { position: absolute; z-index: 90; inset: 0; display: grid; place-items: center; }
.sstp-modal__backdrop { position: absolute; inset: 0; background: rgba(27,49,75,.22); }
.sstp-modal__dialog { position: relative; z-index: 1; width: 480px; overflow: hidden; color: #263a59; border: 1px solid rgba(112,151,195,.35); border-radius: 18px; background: rgba(248,252,255,.995); box-shadow: 0 22px 55px rgba(35,72,112,.22); }
.sstp-modal__dialog--danger { border-color: rgba(207,126,135,.34); background: rgba(255,252,252,.995); }
.sstp-modal__dialog > header { min-height: 90px; padding: 0 26px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid #e1ebf5; }
.sstp-modal__dialog > header div { display: grid; gap: 6px; }
.sstp-modal__dialog h2 { margin: 0; font-size: 19px; font-weight: 500; }
.sstp-modal__dialog header p { margin: 0; color: #8495aa; font-size: 11px; }
.sstp-modal__dialog header strong { color: #425b7b; font-weight: 500; }
.sstp-modal__dialog > header > button { width: 31px; height: 31px; margin-left: auto; color: #9aaabc; border: 0; border-radius: 9px; background: transparent; }
.sstp-modal-danger-icon { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; color: #d95a68; border-radius: 13px; background: #fff0f1; font-size: 18px; }
.sstp-modal-info-icon { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; color: #327ce3; border-radius: 13px; background: #e7f1ff; font-size: 18px; }
.sstp-modal__body { padding: 21px 26px 20px; display: grid; gap: 12px; }
.sstp-modal-field { position: relative; height: 58px; display: flex; align-items: center; border: 1px solid #d5e2ef; border-radius: 13px; background: #fff; }
.sstp-modal-field:focus-within { border-color: #75aaff; box-shadow: 0 0 0 2px rgba(47,126,255,.11); }
.sstp-modal-field > .fontawesome:first-child { width: 52px; color: #2c7dff; text-align: center; font-size: 17px; }
.sstp-modal-field > span:nth-child(2) { position: absolute; top: 50%; left: 52px; color: #91a1b7; font-size: 13px; transform: translateY(-50%); pointer-events: none; transition: all 160ms ease; }
.sstp-modal-field:focus-within > span:nth-child(2),
.sstp-modal-field:has(input:not(:placeholder-shown)) > span:nth-child(2) { top: 9px; font-size: 9px; transform: none; }
.sstp-modal-field input { min-width: 0; height: 100%; flex: 1; padding: 18px 45px 4px 0; color: #304764; border: 0; outline: 0; background: transparent; font-size: 13px; }
.sstp-modal-field > button { position: absolute; top: 0; right: 0; width: 48px; height: 100%; color: #9aabc0; border: 0; background: transparent; }
.sstp-modal-note { padding: 12px 14px; color: #6d819d; border-radius: 11px; background: #eef6ff; font-size: 10px; line-height: 1.45; }
.sstp-modal-note .fontawesome { margin-right: 8px; color: #4f8fe8; }
.sstp-modal-fact { padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #dbe7f1; border-radius: 10px; background: #fff; }
.sstp-modal-fact span { color: #8a9caf; font-size: 9px; }
.sstp-modal-fact strong { color: #3e5c7c; font-size: 10px; font-weight: 500; }
.sstp-address-field { position: relative; height: 58px; display: block; border: 1px solid #d5e2ef; border-radius: 12px; background: #fff; }
.sstp-address-field:focus-within { border-color: #75aaff; box-shadow: 0 0 0 2px rgba(47,126,255,.1); }
.sstp-address-field > span { position: absolute; z-index: 1; top: 50%; left: 13px; color: #91a1b7; font-size: 13px; transform: translateY(-50%); pointer-events: none; transition: all 160ms ease; }
.sstp-address-field:focus-within > span, .sstp-address-field:has(input:not(:placeholder-shown)) > span { top: 8px; font-size: 9px; transform: none; }
.sstp-address-field > div { height: 100%; padding: 0 13px; display: flex; align-items: flex-end; box-sizing: border-box; }
.sstp-address-field input { min-width: 0; height: 100%; flex: 1; padding: 17px 0 7px; box-sizing: border-box; color: #314b69; border: 0; outline: 0; background: transparent; font-size: 13px; }
.sstp-address-field b { padding-bottom: 10px; color: #7188a4; font-size: 10px; font-weight: 400; }
.sstp-modal__body > p { margin: 0; color: #506784; font-size: 11px; }
.sstp-modal__body ul { margin: 0; padding: 0; display: grid; gap: 10px; list-style: none; }
.sstp-modal__body li { position: relative; padding-left: 28px; color: #526985; font-size: 11px; line-height: 1.5; }
.sstp-modal__body li::before { content: "×"; position: absolute; top: 0; left: 0; width: 18px; height: 18px; display: grid; place-items: center; color: #d95a68; border-radius: 50%; background: #fff0f1; font-size: 10px; }
.sstp-delete-warning { padding: 13px 14px; display: grid; gap: 5px; color: #886873; border: 1px solid #f2cbd0; border-radius: 11px; background: #fff0f2; font-size: 10px; }
.sstp-delete-warning strong { color: #bf3f4d; font-size: 11px; font-weight: 500; }
.sstp-modal-error { min-height: 13px; margin: 0; color: #d85868; font-size: 9px; }
.sstp-modal__dialog footer { margin: 0; padding: 17px 26px 21px; }
.sstp-primary-button.is-loading { cursor: wait; opacity: .72; }

.sstp-toast { position: absolute; z-index: 120; top: 14px; left: 50%; width: max-content; max-width: min(430px, calc(100% - 40px)); padding: 11px 16px; display: grid; gap: 4px; box-sizing: border-box; color: #fff; border-radius: 11px; background: rgba(41,70,103,.96); box-shadow: 0 10px 26px rgba(27,56,88,.2); opacity: 0; transform: translate(-50%,-10px); transition: opacity 180ms ease, transform 180ms ease; }
.sstp-toast strong { font-size: 10px; font-weight: 500; }
.sstp-toast span { color: rgba(255,255,255,.78); font-size: 8px; line-height: 1.4; }
.sstp-toast.is-visible { opacity: 1; transform: translate(-50%,0); }
.sstp-toast--error { background: rgba(190,69,82,.95); }

.sstp-compact-menu-head,
.sstp-compact-back { display: none; }

@media (min-width: 1101px) {
  .starkos-app-window {
    left: 50%;
    right: auto;
    width: min(var(--starkos-window-width, 1000px), calc(100vw - 140px));
    transform: translateX(-50%);
  }
}

@media (min-width: 1001px) and (max-width: 1100px) {
  .starkos-dock { display: none; }

  .starkos-app-window {
    inset: 25px 0 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
  }

  .starkos-app-window__titlebar[data-window-drag-handle] { cursor: default; }
}

@media (max-width: 1000px) {
  .starkos-dock { display: none; }

  .starkos-app-window {
    inset: 25px 0 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
  }

  .starkos-app-window__titlebar[data-window-drag-handle] { cursor: default; }

  .starkos-app-window__titlebar {
    position: relative;
    z-index: 5;
  }

  .sstp-app-body { overflow: hidden; }

  .sstp-dashboard {
    width: 200%;
    display: flex;
    transform: translateX(0);
    transition: transform 260ms cubic-bezier(.22,.72,.25,1);
  }

  .sstp-dashboard[data-compact-pane="content"] { transform: translateX(-50%); }

  .sstp-dashboard__sidebar,
  .sstp-dashboard__content {
    width: 50%;
    height: 100%;
    flex: 0 0 50%;
    box-sizing: border-box;
  }

  .sstp-dashboard__sidebar {
    padding: 30px 34px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    border-right: 0;
    background: rgba(246,250,254,.93);
  }

  .sstp-compact-menu-head {
    width: min(520px,100%);
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    gap: 13px;
  }

  .sstp-compact-menu-head > .fontawesome {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    color: #2f7ef0;
    border-radius: 14px;
    background: #e4efff;
    font-size: 18px;
  }

  .sstp-compact-menu-head strong {
    display: block;
    color: #2d4565;
    font-size: 18px;
    font-weight: 500;
  }

  .sstp-compact-menu-head small {
    display: block;
    margin-top: 4px;
    color: #8a9bb0;
    font-size: 11px;
  }

  .sstp-dashboard__sidebar nav {
    width: min(520px,100%);
    margin: 0 auto;
    display: grid;
    gap: 8px;
  }

  .sstp-dashboard__sidebar .sstp-nav-item {
    width: 100%;
    height: 56px;
    padding: 0 17px;
    border: 1px solid #d9e5f0;
    border-radius: 13px;
    background: rgba(255,255,255,.76);
    font-size: 12px;
  }

  .sstp-dashboard__sidebar .sstp-nav-item > .fontawesome {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: #367fe6;
    border-radius: 10px;
    background: #e8f2ff;
    font-size: 13px;
  }

  .sstp-dashboard__sidebar .sstp-nav-item.is-active {
    color: #2873dc;
    border-color: #bdd6f5;
    background: #eaf4ff;
  }

  .sstp-dashboard__sidebar > .sstp-nav-item {
    width: min(520px,100%);
    margin: 8px auto 0;
    flex: 0 0 56px;
  }

  .sstp-dashboard__content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .sstp-compact-back {
    position: relative;
    z-index: 4;
    width: 100%;
    height: 46px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 46px;
    color: #405c7d;
    border: 0;
    border-bottom: 1px solid #dce7f1;
    background: rgba(249,252,255,.96);
    font-size: 12px;
    text-align: left;
  }

  .sstp-compact-back .fontawesome {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    color: #2f7ef0;
    border-radius: 9px;
    background: #e7f1ff;
    font-size: 11px;
  }

  .sstp-dashboard__content > .sstp-page {
    position: relative;
    z-index: 1;
    height: auto;
    min-height: 0;
    padding: 18px;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .sstp-settings-grid {
    height: max-content;
    flex: 0 0 auto;
    grid-template-columns: minmax(0,1fr);
    grid-auto-rows: max-content;
  }
  .sstp-settings-card { min-height: max-content; }
  .sstp-settings-card--server { grid-row: auto; }
}

@media (max-width: 600px) {
  .starkos-app-window {
    inset: 25px 0 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
  }

  .starkos-app-titlebar { padding-inline: 10px; }

  .sstp-dashboard__sidebar { padding: 20px 14px; }

  .sstp-compact-menu-head { margin-bottom: 16px; }
  .sstp-compact-menu-head > .fontawesome { width: 42px; height: 42px; flex-basis: 42px; }
  .sstp-compact-menu-head strong { font-size: 16px; }
  .sstp-compact-menu-head small { font-size: 10px; }

  .sstp-dashboard__sidebar .sstp-nav-item { height: 54px; padding-inline: 13px; border-radius: 12px; }
  .sstp-dashboard__sidebar > .sstp-nav-item { flex-basis: 54px; }
  .sstp-compact-back { padding-inline: 12px; }
  .sstp-dashboard__content > .sstp-page { padding: 12px; }

  .sstp-server-card { padding: 10px; }
  .sstp-server-card__icon { margin-right: 9px; flex: 0 0 44px; }
  .sstp-server-card > div { min-width: 0; }
  .sstp-server-card__address { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sstp-server-card__connect { margin-left: 8px; padding-inline: 10px; flex: 0 0 128px; }

  .sstp-metrics,
  .sstp-user-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sstp-metrics > div,
  .sstp-user-stats > div { min-width: 0; min-height: 56px; padding-inline: 10px; }

  .sstp-connections-toolbar { align-items: stretch; flex-direction: column; gap: 12px; }
  .sstp-connection-search { width: 100%; box-sizing: border-box; }
  .sstp-connections-table { max-width: 100%; }
  .sstp-connections-table__head,
  .sstp-connections-table__row { column-gap: 5px; }
  .sstp-connections-table__head { padding-inline: 7px; }
  .sstp-connections-table__row { padding-inline: 7px; }
  .sstp-connections-table__row.is-restricted { padding-left: 4px; }
  .sstp-connections-table__head > *,
  .sstp-connections-table__row > * { min-width: 0; overflow: hidden; }
  .sstp-connection-user > span { width: 32px; margin-right: 7px; flex-basis: 32px; }

  .sstp-first-user-card { width: 100%; }
  .sstp-users-table__head,
  .sstp-users-table__row { grid-template-columns: minmax(0,1fr) auto; column-gap: 8px; }
  .sstp-users-table__head > :nth-child(2),
  .sstp-users-table__head > :nth-child(3),
  .sstp-users-table__row > :nth-child(2),
  .sstp-users-table__row > :nth-child(3) { display: none; }
  .sstp-users-table__row small { display: block; }

  .sstp-journal-toolbar { flex-direction: column; }
  .sstp-journal-date { width: 100%; }

  .sstp-settings-row { padding-inline: 10px; gap: 8px; }
  .sstp-settings-row > div:first-of-type { min-width: 0; }
  .sstp-settings-row small { white-space: normal; }
  .sstp-settings-value { white-space: normal; text-align: right; }
  .sstp-settings-inline { min-width: 0; white-space: normal; justify-content: flex-end; }
  .sstp-settings-select { min-width: 138px; }
  .sstp-settings-menu--language { width: min(220px,calc(100vw - 44px)); }

  .sstp-settings-certificate { padding-inline: 10px; }
  .sstp-settings-certificate > button { padding-inline: 8px; }

  .sstp-settings-danger {
    padding: 12px;
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .sstp-settings-danger > button { align-self: flex-end; }

  .sstp-modal__dialog {
    width: calc(100% - 24px);
    max-height: calc(100% - 24px);
    overflow-y: auto;
    border-radius: 15px;
  }

  .sstp-modal__dialog > header { min-height: 76px; padding-inline: 16px; }
  .sstp-modal__body { padding: 17px 16px 16px; }
  .sstp-modal__dialog footer { padding: 14px 16px 17px; }
}

@media (max-width: 1000px) and (max-height: 600px) {
  .sstp-dashboard__content > .sstp-page {
    height: auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .sstp-dashboard__content > .sstp-page::after {
    content: "";
    width: 100%;
    height: 22px;
    display: block;
    flex: 0 0 22px;
  }

  .sstp-overview-page .sstp-connections-panel {
    min-height: 400px;
    flex: 0 0 400px;
  }

  .sstp-connections-page .sstp-connections-panel,
  .sstp-users-page .sstp-users-table,
  .sstp-journal-page .sstp-journal-panel {
    min-height: 430px;
    flex: 0 0 430px;
  }

  .sstp-settings-page { overflow-y: auto; }

  .sstp-settings-page .sstp-settings-grid {
    min-height: max-content;
    height: max-content;
    flex: 0 0 auto;
    grid-auto-rows: max-content;
  }

  .sstp-settings-page .sstp-settings-card { min-height: max-content; }
}

.desktop-message {
  position: fixed;
  right: 24px;
  bottom: 20px;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
}

@media (max-width: 640px) {
  .setup-shell { padding: 16px 12px; }

  .setup-card {
    width: 100%;
    padding: 26px 20px 22px;
    border-radius: 24px;
  }

  .setup-logo {
    width: 142px;
    height: 56px;
  }

  .setup-header p { font-size: 14px; }
  .progress-dots { width: min(250px, 80vw); }

  .setup-footer,
  .setup-footer--account {
    align-items: stretch;
    flex-direction: column;
  }

  .continue-button { width: 100%; }
  .setup-consume-note { max-width: none; }

  .setup-actions {
    width: 100%;
  }

  .back-button { flex: 0 0 auto; }

  .setup-actions .continue-button {
    flex: 1;
    width: auto;
  }

  .agreement-document__body {
    max-height: 270px;
    padding: 15px 16px 16px;
  }

  .setup-footer--agreement {
    align-items: stretch;
    flex-direction: column;
  }

  .setup-actions .agreement-accept {
    min-width: 0;
    flex: 1;
  }

  .activation-success { justify-content: flex-start; }

  .server-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 10px;
  }

  .server-fact { padding: 10px; }
  .server-fact:nth-child(2) { border-right: 0; }

  .server-fact:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(220, 227, 239, 0.9);
  }

  .setup-footer--activation {
    align-items: stretch;
    flex-direction: column;
  }

  .activation-note { max-width: none; }
  .open-starkos-button { width: 100%; }

  .login-card { width: 100%; }
  .login-header { margin-bottom: 24px; }
  .login-server { padding-inline: 12px; }
  .login-footer { align-items: stretch; }
  .login-button { width: 100%; }

  .desktop-app-grid {
    grid-template-columns: repeat(auto-fill, 104px);
    gap: 8px;
    padding: 18px 12px;
  }

  .desktop-app-shortcut { width: 104px; }
}

@media (max-height: 760px) and (min-width: 641px) {
  .setup-shell { padding-block: 16px; }
  .setup-card { padding-block: 24px; }
  .setup-progress { margin-block: 18px 16px; }

  .setup-footer {
    margin-top: 18px;
    padding-top: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .app-loader__spinner { animation-duration: 1.8s !important; }
}