:root {
  scrollbar-gutter: stable;
  --control-border: #3e4b50;
  --control-bg: #1b2226;
  --control-hover: #222c31;
  --control-accent: #ffc08b;
  --control-radius: 10px;
}

.skip-link {
  position: fixed;
  z-index: 300;
  top: 8px;
  left: 8px;
  padding: 12px 18px;
  border-radius: 8px;
  background: #ffb676;
  color: #171d20;
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

.language-toggle,
.select-toggle {
  border: 1px solid var(--control-border);
  border-radius: var(--control-radius);
  background: var(--control-bg);
  color: #dce3e5;
}

.language-toggle:hover,
.language-toggle[aria-expanded="true"],
.select-toggle:hover:not(:disabled),
.select-toggle[aria-expanded="true"] {
  border-color: #718086;
  background: var(--control-hover);
}

.language-chevron,
.select-chevron {
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 0;
  background: center / 16px 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23aab7bc' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  font-size: 0;
  line-height: 0;
  transform: rotate(0);
  transform-origin: center;
  transition: transform .18s ease;
}

.language-toggle[aria-expanded="true"] .language-chevron,
.select-toggle[aria-expanded="true"] .select-chevron {
  transform: rotate(180deg);
}

.language-menu,
.select-menu {
  padding: 6px;
  border: 1px solid #39464b;
  border-radius: 12px;
  background: #171d20;
  box-shadow: 0 16px 42px #0009;
}

.language-option,
.select-option {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #c9d4d8;
}

.language-option:hover,
.language-option[aria-checked="true"],
.select-option[data-active="true"],
.select-option[aria-selected="true"] {
  border-color: #ff963d55;
  background: #ff963d16;
  color: var(--control-accent);
}

.language-toggle:focus-visible,
.language-option:focus-visible,
.select-toggle:focus-visible {
  outline: 2px solid #ffab69;
  outline-offset: 3px;
}

select.enhanced-select { display: none !important; }
.select-picker { display: block; min-width: 0; width: 100%; }
.pane-selector .select-picker { margin-top: 7px; }
.simple-list .select-picker { grid-column: 1 / -1; }
.select-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  font: inherit;
  font-size: 16px;
  line-height: 1.45;
  text-align: start;
  cursor: pointer;
}
.select-value { min-width: 0; overflow-wrap: anywhere; }
.select-menu {
  position: fixed;
  z-index: 200;
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #a66a41 #171d20;
}
.select-menu[hidden] { display: none; }
.select-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  text-align: start;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.select-option + .select-option { margin-top: 3px; }
.select-option[aria-selected="true"]::after {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  margin-left: auto;
  border-radius: 50%;
  background: #ffb676;
}
.select-option:disabled { opacity: .45; cursor: not-allowed; }

.site-header {
  color: #f2f3f1;
  font-family: "Segoe UI Variable", Inter, Aptos, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
.header-actions { display: flex; align-items: center; gap: 9px; }
.header-store { min-height: 44px; padding: 11px 15px; font-size: 12px; white-space: nowrap; }
.header-hub { white-space: nowrap; }
.landing-nav nav a {
  font-family: "Segoe UI Variable Display", "Aptos Display", "Segoe UI Variable", Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: #c1ccd0;
}
.landing-nav nav a:hover { color: #ffb676; }
.site-header .landing-button {
  position: relative;
  transform: translate3d(0, 0, 0);
  transition: background .2s, border-color .2s;
}
.site-header .landing-button:hover { transform: translateY(-2px); }

@media (max-width: 1180px) {
  .landing-nav { grid-template-columns: 180px 1fr auto; }
  .landing-nav nav { gap: 16px; }
  .header-store, .header-hub { padding: 10px 12px; }
}
@media (max-width: 950px) {
  .header-actions { margin-left: auto; }
  .header-store { display: none; }
}
@media (max-width: 600px) {
  .landing-nav .header-actions { gap: 4px; }
}
@media (max-width: 380px) {
  .landing-nav .header-actions { gap: 2px; }
}

.landing-footer {
  width: 100%;
  margin-top: auto;
  border-top: 1px solid #2b363a;
  padding: 12px 0 8px;
  background: #0f1315;
  color: #8da0a9;
  font-family: "Segoe UI Variable", Inter, Aptos, "Segoe UI", system-ui, sans-serif;
}
.landing-footer .landing-wrap { width: min(1320px, calc(100% - 80px)); margin-inline: auto; }
.landing-footer .footer-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  gap: 16px 24px;
  padding: 0;
  border: 0;
}
.landing-footer .brand img { display: block; width: 132px; height: auto; }
.landing-footer nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px 18px; font-size: 12px; }
.landing-footer nav a { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; color: inherit; text-decoration: none; }
.landing-footer nav a:hover { color: #ffc08b; }
.landing-footer .footer-line {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #26353c;
  font-size: 11px;
  text-align: center;
  line-height: 1.6;
}

.workspace-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  isolation: isolate;
  background: #13171b;
  font-family: "Segoe UI Variable", Inter, Aptos, "Segoe UI", system-ui, sans-serif;
}
.workspace-page .ambient-light {
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 84% 12%, #f8872633, transparent 56%),
    radial-gradient(ellipse at 10% 90%, #78d2b326, transparent 52%);
}
.workspace-page .workspace-shell { flex: 1; min-width: 0; }
.workspace-page .workspace-intro { text-align: center; }
.workspace-page .upload-landing {
  position: relative;
  background: linear-gradient(135deg, #263137c9, #171f24ed);
  box-shadow: 0 22px 80px #0004, inset 0 1px #ffffff0c;
  border-color: #54605d;
}
.workspace-page .upload-symbol {
  background: radial-gradient(circle at 30% 20%, #ffbc7b30, #ff963d0d);
  box-shadow: 0 0 48px #ff963d12;
}
.workspace-page .nav { flex-wrap: wrap; gap: 12px; }
.workspace-page .header-links { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.workspace-page .home-link, .workspace-page .workspace-store-link { white-space: normal; }
.workspace-page h1, .workspace-page h2, .workspace-page h3 { overflow-wrap: anywhere; }
.workspace-page .workspace-summary, .workspace-page .document-state, .workspace-page .pane-state { white-space: normal; }
.workspace-page .upload-landing p { overflow-wrap: anywhere; }
.workspace-page .nav { gap: 28px; }
.workspace-page .header-links {
  gap: 16px;
  min-width: 0;
}
.workspace-page .header-links > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0;
  color: #b9c5c9;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  transition: color .2s, background .2s, border-color .2s;
}
.workspace-page .header-links > a:hover {
  color: #f1f5f3;
}
.workspace-page .header-links > .home-link { color: #aab8bd; }
.workspace-page .header-links > .workspace-docs-link {
  margin-right: 4px;
  color: #d5dee0;
}
.workspace-page .header-links > .workspace-store-link {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #ff963d45;
  border-radius: 9px;
  color: #ffe0bf;
  background: #ff963d14;
}
.workspace-page .header-links > .workspace-store-link:hover {
  color: #21170e;
  background: #ffad68;
  border-color: #ffad68;
}
.workspace-page .header-links > .header-hub {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #ff963d;
  border-radius: 9px;
  color: #21150a;
  background: linear-gradient(130deg, #ffad5b, #ff963d);
  font-weight: 650;
}
.workspace-page .header-links > .header-hub:hover {
  color: #21150a;
  background: #ffad68;
  border-color: #ffad68;
}
.workspace-page .header-links > .language-picker { margin-left: 4px; }
.workspace-page .header-links > .language-picker .language-toggle { min-height: 40px; }

.partner-card .partner-server-logo img,
.partner-card[data-status="online"] .partner-server-logo img,
.partner-card.is-interacting .partner-server-logo img {
  animation: none;
  transform: none;
  transition: filter .35s ease;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
}
.partner-presence > .partner-server-logo { padding: 8px; }

.network-node {
  position: relative;
  flex-direction: column;
  gap: 3px;
  padding: 5px 6px;
  font-family: "Segoe UI Variable Display", "Aptos Display", "Segoe UI", system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.015em;
  background: linear-gradient(145deg, #29353c, #182127);
  border-color: #55656c;
  box-shadow: inset 0 1px #ffffff0b, 0 5px 14px #0003;
}
.network-node .node-dot { display: none; }
.node-icon { width: 16px; height: 16px; flex: 0 0 16px; color: #ddad80; }
.node-name { max-width: 100%; overflow-wrap: anywhere; }
.network-node:hover, .network-node.node-preview, .network-node[aria-pressed="true"] {
  background: linear-gradient(145deg, #493223, #28231f);
  box-shadow: inset 0 1px #ffce9d29, 0 0 18px #ff963d18;
}
.network-node[aria-pressed="true"] .node-icon { color: #ffd0a5; }
.mobile-flow-modules .network-node { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 13px; text-align: start; }

@media (max-width: 950px) {
  .landing-footer .landing-wrap { width: calc(100% - 48px); }
}
@media (max-width: 600px) {
  .landing-page.has-js .landing-nav nav {
    display: grid;
    grid-template-columns: repeat(5, max-content);
    gap: clamp(4px, 1.2vw, 8px);
  }
  .landing-page .landing-nav nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    font-size: clamp(10px, 2.8vw, 12px);
    line-height: 1.3;
    letter-spacing: .025em;
    white-space: nowrap;
    overflow-wrap: normal;
    text-align: center;
  }
  .landing-footer .landing-wrap { width: calc(100% - 32px); }
  .landing-footer .footer-main { gap: 10px; }
  .landing-footer .brand img { width: 105px; }
  .landing-footer nav { gap: 4px 12px; font-size: 11px; }
  .landing-footer .footer-line { margin-top: 8px; padding-top: 8px; font-size: 10px; }
  .partner-presence > .partner-server-logo { padding: 6px; }
  .workspace-page .nav { padding-block: 12px; }
  .workspace-page .nav > .brand img { width: 112px; }
  .workspace-page .header-links { gap: 12px; flex: 1 1 auto; }
  .workspace-page .header-links > a { min-height: 36px; font-size: 12px; }
  .workspace-page .header-links > .workspace-store-link,
  .workspace-page .header-links > .header-hub { min-height: 36px; padding-inline: 10px; }
  .workspace-page .home-link, .workspace-page .workspace-store-link { font-size: 12px; }
  .workspace-page .header-links .home-link { margin-right: auto; }
}
@media (max-width: 380px) {
  .landing-footer .footer-main { flex-wrap: wrap; justify-content: center; }
  .landing-footer nav { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .language-chevron, .select-chevron { transition: none; }
  .site-header .landing-button { transform: none !important; }
}