.device-mode-switch {
  position: absolute !important;
  top: 86px;
  right: 48px;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(2, minmax(max-content, 1fr));
  width: max-content;
  min-width: 106px;
  box-sizing: border-box;
  flex-shrink: 0;
  padding: 4px;
  border: 1px solid rgba(213, 224, 255, .24);
  border-radius: 7px;
  background: rgba(5, 10, 24, .86);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
  transform: none !important;
}

#deviceModeSlot .device-mode-switch {
  position: static !important;
  padding: 2px;
  border-radius: 5px;
  box-shadow: none;
  backdrop-filter: none;
  background: rgba(5, 10, 24, .42);
}

.device-mode-switch button {
  min-height: 30px;
  height: auto;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  min-width: max-content;
  border: 0;
  border-radius: 4px;
  padding: 5px 9px;
  color: #aeb9d7;
  cursor: pointer;
  background: transparent;
  font: 12px "Microsoft YaHei UI", "Segoe UI", sans-serif;
}

.device-mode-switch button.is-active {
  color: #fff;
  background: rgba(102, 242, 255, .2);
  box-shadow: inset 0 0 0 1px rgba(102, 242, 255, .42);
}

html[data-layout="mobile"] body {
  position: relative;
  height: auto !important;
  min-height: 100svh;
  min-width: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: #030713;
}

html[data-layout="mobile"] .device-mode-switch {
  top: 66px;
  right: 12px;
}

/* Shared top-level navigation: labels retain their intrinsic width, even when
   the shared text-button foundation sets min-width:0. Overflow belongs to the
   navigation strip, never to the page or to an adjacent label. */
body[data-nexora-page] .main-nav {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
body[data-nexora-page] .main-nav::-webkit-scrollbar { display: none; }
body[data-nexora-page] .main-nav > :is(a, button) {
  flex: 0 0 auto;
  min-width: max-content;
  white-space: nowrap;
  overflow-wrap: normal;
}

/* Homepage */
html[data-layout="mobile"] .cover {
  position: relative;
  z-index: 0;
  height: auto;
  min-height: 100svh;
  padding: 14px 12px 18px;
  overflow-x: hidden;
  overflow-y: visible;
}

html[data-layout="mobile"] .topbar {
  align-items: flex-start;
}

html[data-layout="mobile"] .nav-actions {
  gap: 8px;
}

html[data-layout="mobile"] .search {
  display: none;
}

html[data-layout="mobile"] .signin {
  display: block !important;
  max-width: 128px;
  height: 36px;
  padding: 0 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0;
  text-transform: none;
}

html[data-layout="mobile"] .hero {
  /* The mobile cover adds 120px above the hero and 18px below it.
     Subtract both so the homepage occupies one viewport without a false
     second scroll area; real content can still grow naturally. */
  min-height: calc(100svh - 138px);
  grid-template-rows: minmax(0, 1fr) auto 16px;
}

html[data-layout="mobile"] .center-copy {
  margin-bottom: 48px;
}

html[data-layout="mobile"] .center-copy h1 {
  font-size: clamp(38px, 13vw, 54px);
  letter-spacing: 5px;
  text-indent: 5px;
}

html[data-layout="mobile"] .eyebrow {
  font-size: 12px;
  letter-spacing: 5px;
  text-indent: 5px;
}

html[data-layout="mobile"] .subtitle {
  max-width: min(92vw, 360px);
  margin-inline: auto;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}

html[data-layout="mobile"] .feature-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  overflow: visible;
  padding: 12px;
  border: 0;
  border-radius: 22px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

html[data-layout="mobile"] .feature-card {
  width: 100%;
  min-width: 0;
  height: 148px;
  flex: none;
  clip-path: none;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: inset 0 0 38px rgba(54, 150, 255, .17), 0 9px 22px rgba(0, 0, 0, .28);
  -webkit-tap-highlight-color: transparent;
}

html[data-layout="mobile"] .feature-card:hover,
html[data-layout="mobile"] .feature-card:focus-visible {
  transform: none;
  box-shadow: inset 0 0 44px rgba(72, 244, 255, .2), 0 9px 24px rgba(0, 0, 0, .32);
}

html[data-layout="mobile"] .feature-card::after {
  bottom: 0;
  width: 54px;
  height: 4px;
}

html[data-layout="mobile"] .feature-card .feature-inner {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 10px 14px;
  text-align: center;
}

html[data-layout="mobile"] .feature-card .feature-icon {
  width: 44px;
  height: 44px;
}

html[data-layout="mobile"] .feature-card .feature-icon::before {
  inset: 8px;
}

html[data-layout="mobile"] .feature-card .feature-icon::after {
  inset: 17px;
}

html[data-layout="mobile"] .feature-card.ai-card .feature-icon::before {
  inset: 8px;
}

html[data-layout="mobile"] .feature-card.ai-card .feature-icon::after {
  inset: 17px;
}

html[data-layout="mobile"] .feature-card .feature-title {
  display: block;
  font-size: 19px;
  line-height: 1.2;
}

html[data-layout="mobile"] .feature-card .feature-en {
  display: block;
  margin-top: 4px;
  font-size: 9px;
  letter-spacing: 1.2px;
  white-space: normal;
}

html[data-layout="mobile"] .feature-card .feature-line {
  width: 32px;
  flex: 0 0 auto;
}

html[data-layout="mobile"] .portal,
html[data-layout="mobile"] .planet,
html[data-layout="mobile"] .city,
html[data-layout="mobile"] .cover::before,
html[data-layout="mobile"] .cover::after {
  display: none !important;
  animation: none !important;
}

html[data-layout="mobile"] .account-menu {
  top: 112px;
  right: 12px;
}

/* Feature page */
html[data-layout="mobile"] body:is(
  [data-nexora-page="features"],
  [data-nexora-page="ai"]
) .page {
  min-height: 100svh;
  padding: 16px 14px 24px;
}

html[data-layout="mobile"] body:is(
  [data-nexora-page="features"],
  [data-nexora-page="ai"]
) .content {
  width: 100%;
  margin: clamp(10px, 2.4svh, 22px) auto 0;
  padding-top: 0;
}

html[data-layout="mobile"] body:is(
  [data-nexora-page="features"],
  [data-nexora-page="ai"]
) .feature-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  justify-items: stretch;
  gap: 12px;
  width: min(100%, 680px);
  margin: 16px auto 0;
}

html[data-layout="mobile"] body:is(
  [data-nexora-page="features"],
  [data-nexora-page="ai"]
) .feature-grid .feature-card {
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 150px;
}

html[data-layout="mobile"] body:is(
  [data-nexora-page="features"],
  [data-nexora-page="ai"]
) .feature-grid .feature-inner {
  gap: 10px;
  padding: 15px 9px 13px;
}

html[data-layout="mobile"] body:is(
  [data-nexora-page="features"],
  [data-nexora-page="ai"]
) .feature-grid .feature-icon {
  width: 44px;
  height: 44px;
}

html[data-layout="mobile"] body:is(
  [data-nexora-page="features"],
  [data-nexora-page="ai"]
) .feature-grid .feature-title {
  font-size: clamp(16px, 5vw, 19px);
  line-height: 1.18;
}

html[data-layout="mobile"] body:is(
  [data-nexora-page="features"],
  [data-nexora-page="ai"]
) .feature-grid .feature-en {
  margin-top: 4px;
  font-size: 8px;
  line-height: 1.35;
  letter-spacing: 1px;
}

html[data-layout="mobile"] body[data-nexora-page="ai"] .heading p {
  font-size: 9px;
  letter-spacing: 3px;
}

html[data-layout="mobile"] body[data-nexora-page="ai"] .heading h1 {
  margin: 6px 0 7px;
  font-size: 34px;
  letter-spacing: 8px;
  text-indent: 8px;
}

html[data-layout="mobile"] body[data-nexora-page="ai"] .heading span {
  padding-inline: 8px;
  font-size: 11px;
  line-height: 1.5;
}

/* Editing workbench */
html[data-layout="mobile"] .app {
  padding: 18px 12px 28px;
}

html[data-layout="mobile"] .title-block h1 {
  font-size: 28px;
}

html[data-layout="mobile"] .title-block p {
  letter-spacing: 2px;
}

html[data-layout="mobile"] .mode-switch {
  width: 100%;
  margin: 8px 0 16px;
  padding: 5px;
  gap: 5px;
}

html[data-layout="mobile"] .mode-tab {
  min-height: 46px;
  padding: 0 6px;
  font-size: 13px;
}

html[data-layout="mobile"] .workflow {
  display: none;
}

html[data-layout="mobile"] .layout,
html[data-layout="mobile"] .frame-workspace,
html[data-layout="mobile"] .screen-workspace,
html[data-layout="mobile"] .screen-actions {
  grid-template-columns: 1fr !important;
}

html[data-layout="mobile"] .panel,
html[data-layout="mobile"] .frame-panel,
html[data-layout="mobile"] .notes {
  padding: 16px;
}

html[data-layout="mobile"] .upload-zone {
  min-height: 150px;
  padding: 18px;
}

html[data-layout="mobile"] .upload-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

html[data-layout="mobile"] .upload-actions .ghost,
html[data-layout="mobile"] .upload-actions .primary {
  width: 100%;
  min-width: 0;
  padding: 0 8px;
  font-size: 13px;
}

html[data-layout="mobile"] .settings,
html[data-layout="mobile"] .frame-meta,
html[data-layout="mobile"] .edit-grid {
  grid-template-columns: 1fr !important;
}

html[data-layout="mobile"] .bars {
  height: 360px;
}

html[data-layout="mobile"] .notes {
  height: auto;
  min-height: 430px;
}

html[data-layout="mobile"] .download-list {
  height: 390px;
  min-height: 390px;
}

html[data-layout="mobile"] .download-item {
  grid-template-columns: 76px minmax(0, 1fr) 42px;
  gap: 8px;
}

html[data-layout="mobile"] .frame-controls .action-row,
html[data-layout="mobile"] .edit-actions,
html[data-layout="mobile"] .screen-modal footer {
  flex-wrap: wrap;
}

html[data-layout="mobile"] .shortcut-settings {
  grid-template-columns: 1fr;
}

html[data-layout="mobile"] .shortcut-controls {
  justify-content: space-between;
}

html[data-layout="mobile"] .shortcut-copy span::after {
  content: " 手机浏览器通常不支持键盘快捷键。";
}

html[data-layout="mobile"] .screen-preview {
  min-height: 280px;
}

html[data-layout="mobile"] .edit-dialog {
  width: calc(100vw - 18px);
  max-height: 94svh;
}

/* Document workspace */
html[data-layout="mobile"] body:has(.editor-shell) {
  overflow: hidden !important;
}

html[data-layout="mobile"] .app:has(.editor-shell) {
  height: 100svh;
  padding: 0;
  grid-template-rows: auto 38px 78px minmax(0, 1fr);
}

html[data-layout="mobile"] .titlebar {
  min-height: 50px;
  gap: 6px;
  padding: 6px 8px;
  flex-wrap: wrap;
}

html[data-layout="mobile"] .app-name,
html[data-layout="mobile"] .save-state {
  display: none;
}

html[data-layout="mobile"] .doc-title {
  order: 2;
  width: calc(100% - 82px);
  max-width: none;
  flex: 1 1 180px;
}

html[data-layout="mobile"] .title-action {
  margin-left: auto;
}

html[data-layout="mobile"] .tabs {
  overflow-x: auto;
  padding: 0 5px;
}

html[data-layout="mobile"] .tab {
  flex: 0 0 auto;
  padding: 0 12px;
}

html[data-layout="mobile"] .ribbon {
  min-height: 78px;
}

html[data-layout="mobile"] .group {
  min-height: 78px;
  padding: 7px 9px 18px;
}

html[data-layout="mobile"] .workspace {
  grid-template-columns: 1fr !important;
}

/* A workspace that holds a sidebar stacks it above the content. */
html[data-layout="mobile"] .workspace:has(> .sidebar) {
  grid-template-rows: 132px minmax(0, 1fr);
}

html[data-layout="mobile"] .sidebar {
  border-right: 0;
  border-bottom: 1px solid #c9cdd4;
}

html[data-layout="mobile"] .sidebar-head {
  padding: 7px 10px;
}

html[data-layout="mobile"] .doc-list {
  width: 100%;
  max-width: 100vw;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 8px;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

html[data-layout="mobile"] .doc-item {
  flex: 0 0 min(210px, 72vw);
  width: min(210px, 72vw);
  min-width: 0;
  background: #fff;
}

html[data-layout="mobile"] .doc-open {
  min-width: 0;
}

html[data-layout="mobile"] .canvas {
  padding: 16px 8px 48px;
}

html[data-layout="mobile"] .paper {
  width: 100%;
  min-height: 760px;
  padding: 42px 24px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, .16);
}

html[data-layout="desktop"] body {
  min-width: 0 !important;
  overflow-x: hidden;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
video,
canvas {
  max-width: 100%;
}

.cover,
.page,
.app,
.layout,
.frame-workspace,
.screen-workspace,
.workspace,
.editor-shell {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 980px) {
  html[data-layout="desktop"] .layout,
  html[data-layout="desktop"] .frame-workspace,
  html[data-layout="desktop"] .screen-workspace {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-layout="desktop"] .notes {
    height: auto;
    min-height: 480px;
  }

  html[data-layout="desktop"] .download-list {
    height: min(560px, 62vh);
    min-height: 360px;
  }

  html[data-layout="desktop"] .settings,
  html[data-layout="desktop"] .frame-meta,
  html[data-layout="desktop"] .edit-grid {
    grid-template-columns: 1fr !important;
  }

  html[data-layout="desktop"] .workspace:has(.editor-shell),
  html[data-layout="desktop"] .workspace {
    grid-template-columns: 210px minmax(0, 1fr);
  }

  html[data-layout="desktop"] .paper {
    width: 100%;
    padding: 56px 48px;
  }
}

@media (max-width: 700px) {
  html[data-layout="desktop"] .signin {
    display: block !important;
    max-width: 132px;
    height: 36px;
    padding: 0 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0;
    text-transform: none;
  }

  html[data-layout="desktop"] .search {
    display: none;
  }

  html[data-layout="desktop"] .cover,
  html[data-layout="desktop"] .page,
  html[data-layout="desktop"] .app {
    padding-left: 14px;
    padding-right: 14px;
  }

  html[data-layout="desktop"] .mode-switch {
    width: 100%;
    margin-left: 0;
    gap: 5px;
  }

  html[data-layout="desktop"] .mode-tab {
    min-width: 0;
    padding: 0 6px;
    font-size: 13px;
  }

  html[data-layout="desktop"] .action-row,
  html[data-layout="desktop"] .upload-actions,
  html[data-layout="desktop"] .edit-actions {
    flex-wrap: wrap;
  }

  html[data-layout="desktop"] .upload-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  html[data-layout="desktop"] .upload-actions button {
    width: 100%;
    min-width: 0;
    padding-left: 7px;
    padding-right: 7px;
  }

  html[data-layout="desktop"] .screen-actions {
    grid-template-columns: 1fr;
  }

  html[data-layout="desktop"] .shortcut-settings {
    grid-template-columns: 1fr;
  }

  html[data-layout="desktop"] .workspace {
    grid-template-columns: 1fr !important;
  }

  html[data-layout="desktop"] .workspace:has(> .sidebar) {
    grid-template-rows: 132px minmax(0, 1fr);
  }

  html[data-layout="desktop"] .sidebar {
    border-right: 0;
    border-bottom: 1px solid #c9cdd4;
  }

  html[data-layout="desktop"] .doc-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
  }

  html[data-layout="desktop"] .doc-item {
    flex: 0 0 180px;
  }

  html[data-layout="desktop"] .canvas {
    padding: 16px 8px 48px;
  }

  html[data-layout="desktop"] .paper {
    min-height: 760px;
    padding: 42px 24px;
  }

  html[data-layout="desktop"] .ribbon,
  html[data-layout="desktop"] .tabs {
    overflow-x: auto;
  }
}

/* Keep translated controls readable without changing the application's layout. */
html[data-language="vi"] button,
html[data-language="en"] button,
html[data-language="vi"] select,
html[data-language="en"] select {
  letter-spacing: 0;
}

html[data-language="vi"] .mode-tab,
html[data-language="en"] .mode-tab,
html[data-language="vi"] .feature-title,
html[data-language="en"] .feature-title {
  white-space: normal;
  line-height: 1.25;
}

html[data-language="vi"] .language-select,
html[data-language="en"] .language-select {
  min-width: 96px;
}

@media (max-width: 620px) {
  html[data-language="vi"] .language-select,
  html[data-language="en"] .language-select {
    min-width: 76px;
    max-width: 82px;
    font-size: 11px;
  }
}

@media (max-width: 760px) {
  .device-mode-switch {
    top: 68px;
    right: 12px;
  }
}

@media (orientation: landscape) and (max-height: 620px) {
  html[data-layout="mobile"] .center-copy {
    margin-bottom: 18px;
  }

  html[data-layout="mobile"] .feature-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 720px;
  }

  html[data-layout="mobile"] .feature-card {
    height: 96px;
  }

  html[data-layout="mobile"] .feature-card .feature-inner {
    grid-template-columns: 40px minmax(0, 1fr) 18px;
    gap: 10px;
    padding: 12px 16px;
  }

  html[data-layout="mobile"] .feature-card .feature-icon {
    width: 38px;
    height: 38px;
  }
}