:root {
  z-index: 5;
  --font-ui: "SF Pro Display", "PingFang SC", "Hiragino Sans GB", sans-serif;
  --radius-xl: 22px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --border-glass: rgba(255, 255, 255, 0.35);
  --shadow-glass: 0 20px 60px rgba(5, 18, 40, 0.45);
  --bg-main: #0a0f1a;
  --bg-panel: rgba(255, 255, 255, 0.12);
  --text-main: #f5f8ff;
  --text-soft: #c8d4ec;
  --btn-press-bg: #ffffff;
  --btn-press-fg: #0f172a;
  --edge-color: rgba(111, 181, 255, 0.74);
  --control-indent: 2ch;
  --first-control-title-indent: 4ch;
  --search-dropdown-height: 212px;
}

body.theme-light {
  --border-glass: rgba(255, 255, 255, 0.75);
  --shadow-glass: 0 20px 50px rgba(70, 86, 112, 0.2);
  --bg-main: #e8edf3;
  --bg-panel: rgba(255, 255, 255, 0.52);
  --text-main: #141a24;
  --text-soft: #3c4a63;
  --btn-press-bg: #11151d;
  --btn-press-fg: #f5f7ff;
  --edge-color: rgba(66, 122, 181, 0.6);
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--text-main);
  background: radial-gradient(circle at 80% 10%, rgba(72, 101, 255, 0.18), transparent 50%),
    radial-gradient(circle at 10% 75%, rgba(66, 255, 206, 0.14), transparent 45%),
    var(--bg-main);
  overflow: hidden;
}

body:not(.flow-only) {
  overflow: auto;
}

.page-shell {
  width: min(1400px, calc(100% - 48px));
  margin: 0 auto;
}

body:not(.flow-only) .page-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body:not(.flow-only) .topbar {
  margin: 0 0 14px;
}

body:not(.flow-only) .layout.centered {
  margin: 0 24px;
}

.import-home-section {
  margin: 14px 24px 24px;
}

.import-home-section h2 {
  margin: 0 0 10px;
  font-size: 20px;
}

.import-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px;
}

.import-card {
  text-align: left;
  padding: 14px 16px;
  border-radius: 16px;
  cursor: pointer;
  color: var(--text-main);
}

.import-card-title {
  display: block;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.import-card-sub {
  display: block;
  font-size: 13px;
  color: var(--text-soft);
}

.import-card-time {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: rgba(192, 210, 236, 0.95);
}

.import-modal {
  position: fixed;
  inset: 0;
  z-index: 22;
  display: grid;
  place-items: center;
  background: rgba(5, 8, 15, 0.45);
  backdrop-filter: blur(8px);
}

.import-shell {
  width: min(84vw, 980px);
  height: min(82vh, 740px);
  padding: 14px;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 10px;
}

.import-shell.maximized {
  width: 96vw;
  height: 90vh;
}

.import-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.import-head h2 {
  margin: 0;
}

.import-tools {
  display: flex;
  gap: 8px;
  align-items: center;
}

.import-tools input[type="file"] {
  flex: 1;
  min-width: 0;
}

.import-tools select {
  width: 170px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-main);
  padding: 0 8px;
}

.create-user-tools label {
  font-size: 13px;
  color: var(--text-soft);
}

.create-user-tools input,
.create-user-tools select {
  width: 100%;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-main);
  padding: 0 10px;
}

.create-user-tools input::placeholder {
  color: var(--text-soft);
}

.create-user-tools input:focus,
.create-user-tools select:focus {
  outline: none;
  border-color: rgba(111, 181, 255, 0.9);
  box-shadow: 0 0 0 2px rgba(111, 181, 255, 0.22);
}

.role-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.role-inline label {
  flex: 0 0 auto;
}

.role-inline select {
  flex: 1;
  min-width: 0;
}

.readonly-info {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: rgba(205, 215, 232, 0.92) !important;
}

.readonly-info:focus {
  box-shadow: none !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

.user-action-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.danger-btn {
  border-color: rgba(255, 125, 125, 0.58) !important;
  background: linear-gradient(180deg, rgba(255, 108, 108, 0.3), rgba(255, 66, 66, 0.2)) !important;
  color: #ffe9e9 !important;
}

.danger-btn:hover {
  background: linear-gradient(180deg, rgba(255, 128, 128, 0.42), rgba(255, 78, 78, 0.3)) !important;
}

.primary-lock-btn {
  border-color: rgba(110, 176, 255, 0.62) !important;
  background: linear-gradient(180deg, rgba(78, 154, 255, 0.34), rgba(52, 118, 255, 0.24)) !important;
  color: #eaf4ff !important;
}

.primary-lock-btn:hover {
  background: linear-gradient(180deg, rgba(94, 170, 255, 0.46), rgba(62, 128, 255, 0.34)) !important;
}

.danger-btn.is-disabled,
.danger-btn:disabled {
  border-color: rgba(175, 185, 205, 0.45) !important;
  background: rgba(130, 140, 160, 0.2) !important;
  color: rgba(210, 220, 238, 0.72) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* Keep all import modal action buttons the same height, except the close button (.tiny). */
.import-shell .glass-btn:not(.tiny) {
  height: 38px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.import-meta {
  font-size: 13px;
  color: var(--text-soft);
}

.import-meta-prefix {
  margin-bottom: 6px;
}

.import-meta-status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 8px;
  margin-bottom: 6px;
  font-weight: 600;
}

.import-meta-status.complete {
  background: rgba(28, 128, 72, 0.72);
  color: #e8fff2;
}

.import-meta-status.incomplete {
  background: rgba(176, 44, 44, 0.78);
  color: #fff1f1;
}

.import-meta-logic {
  color: var(--text-soft);
}

.import-table-wrap {
  min-height: 0;
  overflow: auto;
}

.import-map-table {
  width: 100%;
  border-collapse: collapse;
}

.import-map-table th,
.import-map-table td {
  border: 1px solid rgba(255, 255, 255, 0.26);
  padding: 6px 8px;
  font-size: 13px;
}

.import-map-table select {
  width: 100%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.26);
  color: var(--text-main);
  border-radius: 8px;
  height: 30px;
  padding: 0 6px;
}

.import-map-table tr.mapped-row td {
  background: rgba(72, 168, 118, 0.28);
}

.import-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

#clearAllTableDataBtn {
  margin-right: 20px;
}

.selected-outline {
  outline: 1px solid rgba(88, 255, 176, 0.95);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(88, 255, 176, 0.22), 0 0 14px rgba(88, 255, 176, 0.35);
}
.bg-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

#bgCanvas {
  width: 100%;
  height: 100%;
  filter: blur(0.5px) saturate(1.15);
}

.bg-glow {
  position: absolute;
  border-radius: 999px;
  filter: blur(60px);
  opacity: 0.33;
  animation: drift 18s ease-in-out infinite alternate;
}

.glow-a {
  width: 360px;
  height: 360px;
  top: 8%;
  left: 12%;
  background: rgba(93, 161, 255, 0.45);
}

.glow-b {
  width: 420px;
  height: 420px;
  right: 8%;
  bottom: 5%;
  background: rgba(86, 252, 206, 0.35);
  animation-delay: 2.8s;
}

.topbar {
  position: relative;
  z-index: 4;
  margin: 18px 0 10px;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  border: none;
  box-shadow: none;
}

.topbar h1 {
  margin: 0;
  font-size: 38px;
  letter-spacing: 1px;
}

.title-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.36em;
  white-space: nowrap;
}

.title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  min-width: 1em;
  min-height: 1em;
  padding: 0;
  overflow: hidden;
  border-radius: 0.24em;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(166, 214, 255, 0.28);
  line-height: 1;
  flex: 0 0 auto;
}

.app-title-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  border-radius: 8px;
  margin-right: 0.06em;
  box-shadow: 0 8px 22px rgba(62, 124, 215, 0.28);
}

.app-title-icon svg {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(20, 45, 88, 0.35));
}

.mode-title-icon {
  width: 1.05em;
  height: 1.05em;
  min-width: 1.05em;
  min-height: 1.05em;
  padding: 0;
  border-radius: 0.24em;
}

.mode-title-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 0 10px rgba(126, 184, 255, 0.35));
}

.excel-file-icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 0;
}

.excel-file-icon svg {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(11, 52, 30, 0.34));
}

.app-version-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(164, 206, 255, 0.42);
  background: rgba(88, 145, 226, 0.22);
  color: rgba(230, 241, 255, 0.98);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  vertical-align: middle;
}

.topbar-actions {
  display: flex;
  gap: 10px;
  position: relative;
}

.user-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 180px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 12px;
  background: rgba(12, 20, 36, 0.96);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
  padding: 6px;
  z-index: 50;
}

.user-menu-who {
  padding: 6px 8px;
  margin-bottom: 4px;
  font-size: 12px;
  color: rgba(226, 236, 252, 0.92);
}

.user-menu-item {
  width: 100%;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #e7f0ff;
  text-align: left;
  padding: 7px 10px;
  font-size: 12px;
  cursor: pointer;
}

.user-menu-item:hover {
  background: rgba(127, 178, 255, 0.2);
}

.login-gate {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: rgba(6, 10, 16, 0.52);
  backdrop-filter: blur(6px);
}

.login-shell {
  width: min(460px, 92vw);
  padding: 18px;
  display: grid;
  gap: 12px;
}

.login-shell h2 {
  margin: 0;
}

.login-form-row {
  display: grid;
  gap: 6px;
}

.login-form-row input {
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-main);
  padding: 0 10px;
}

.login-shell.has-error .login-form-row input {
  border-color: rgba(255, 138, 138, 0.85);
  box-shadow: 0 0 0 2px rgba(255, 138, 138, 0.2);
}

.login-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.glass-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border-glass);
  box-shadow: var(--shadow-glass);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
}

.glass-inner {
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(14px);
}

.layout {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 480px 1fr;
  gap: 16px;
  margin: 0 24px 24px;
  height: calc(100vh - 120px);
}

.layout.centered {
  grid-template-columns: 1fr;
  justify-items: stretch;
  height: auto;
}

.layout.single {
  grid-template-columns: 1fr;
}

.left-controls {
  padding: 18px;
  overflow: hidden;
  width: 100%;
}

.search-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  margin-top: 46px;
}

body[data-dropdown-mode="push"] .search-row {
  align-items: start;
}

.search-stack {
  position: relative;
}

.field-label {
  display: block;
  margin-bottom: 8px;
  font-size: 20px;
}

.search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-lg);
  border: none;
  background: rgba(255, 255, 255, 0.12);
  padding: 6px 10px;
  height: 46px;
}
.search-row .glass-btn.strong {
  height: 46px;
}

.search-wrap .icon {
  font-size: 22px;
  color: var(--text-soft);
}

.search-wrap input {
  flex: 1;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--text-main);
  font-size: 16px;
  outline: none;
}

.search-wrap input::placeholder {
  color: color-mix(in srgb, var(--text-main) 46%, transparent);
  font-size: 15px;
}

.selected-context-meta {
  display: inline-flex;
  align-items: center;
  max-width: min(360px, 38vw);
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(111, 181, 255, 0.38);
  background: rgba(111, 181, 255, 0.12);
  color: rgba(224, 238, 255, 0.96);
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon-btn {
  width: 30px;
  height: 30px;
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--border-glass);
  background: rgba(255, 255, 255, 0.22);
  color: var(--text-main);
  padding: 0;
  font-size: 0;
  line-height: 1;
  cursor: pointer;
  display: none;
}

.icon-btn::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.8px;
  background: currentColor;
  border-radius: 999px;
  transform: translate(-50%, -50%) rotate(45deg);
}

.icon-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.8px;
  background: currentColor;
  border-radius: 999px;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  z-index: 5;
  padding: 8px;
  height: var(--search-dropdown-height);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(170, 200, 245, 0.28);
  border-radius: 14px;
  background: rgba(16, 26, 44, 0.88);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(16px) saturate(120%);
  transform-origin: top;
  animation: dropdownOpen 360ms ease;
}

body[data-dropdown-mode="push"] .dropdown {
  position: static;
  margin-top: 10px;
  background: var(--bg-panel);
  z-index: 5;
}

.dropdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
}

.dropdown-item span {
  color: #f5f8ff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.dropdown-item small {
  color: rgba(214, 228, 252, 0.92);
}

.dropdown-list .dropdown-item:last-child {
  border-bottom: none;
}

.dropdown-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}

.dropdown-more {
  flex: 0 0 auto;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  padding-bottom: 8px;
}

.dropdown-item:hover {
  background: rgba(120, 170, 255, 0.22);
}

#moreLink,
#moreLinkHistory {
  color: #7fb2ff;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}

.mark {
  color: #7fb2ff;
  font-weight: 600;
}

.hidden {
  display: none !important;
}

.app-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 120;
  min-width: 280px;
  max-width: min(80vw, 640px);
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid rgba(156, 247, 189, 0.55);
  background: rgba(25, 56, 37, 0.9);
  color: #ebfff2;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  font-size: 14px;
  text-align: center;
  backdrop-filter: blur(6px);
  animation: toastIn 180ms ease;
}

.app-toast.error {
  border: 1px solid rgba(255, 138, 138, 0.65);
  background: rgba(92, 20, 20, 0.92);
  color: #ffecec;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.control-grid {
  margin-top: 1em;
  margin-left: 2ch;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: stretch;
  padding-top: 46px;
  padding-bottom: 46px;
}

.control-box {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.control-box h2 {
  margin: 0 0 10px;
  padding-left: var(--control-indent);
  font-size: 20px;
}

.control-inner {
  flex: 1;
  padding: 12px;
}

.control-box:first-child .control-inner {
  margin-left: var(--control-indent);
}

.control-box:last-child .control-inner {
  margin-right: var(--control-indent);
}

.control-box:first-child h2 {
  padding-left: var(--control-indent);
}

.radio-group,
.toggle-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.radio-group {
  padding-left: var(--control-indent);
}

.mode-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.mode-options {
  flex: 0 0 320px;
}

.mode-layout .radio-group {
  flex: 1;
}

.mode-guide {
  flex: 1;
  margin-top: 0;
  padding-left: 0;
}

.mode-guide h3 {
  margin-top: 0;
}

.toggle-group {
  padding-left: var(--control-indent);
  padding-right: var(--control-indent);
}

.glass-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
}

.glass-radio input {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  position: relative;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 220ms ease, transform 140ms ease;
}

.glass-radio input:hover {
  border-color: rgba(178, 210, 255, 0.96);
  background: rgba(170, 206, 255, 0.3);
  box-shadow: 0 0 0 2px rgba(130, 170, 255, 0.24);
}

.glass-radio input:focus-visible {
  outline: none;
  border-color: rgba(186, 216, 255, 1);
  box-shadow: 0 0 0 2px rgba(130, 170, 255, 0.3), 0 0 10px rgba(120, 168, 255, 0.42);
}

.glass-radio input:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f3f8ff 0%, #9fc0ff 35%, #6f9fff 70%, #5d7cff 100%);
  box-shadow: 0 0 16px rgba(130, 170, 255, 0.98), 0 0 6px rgba(243, 248, 255, 0.9) inset;
  transition: box-shadow 220ms ease, transform 180ms ease;
}

.glass-radio input:checked {
  border-color: rgba(111, 181, 255, 0.98);
  background: rgba(93, 124, 255, 0.3);
  box-shadow: 0 0 0 2px rgba(111, 181, 255, 0.35), 0 0 14px rgba(111, 181, 255, 0.45);
}

.glass-radio input:checked:hover {
  box-shadow: 0 0 0 2px rgba(139, 198, 255, 0.45), 0 0 18px rgba(133, 183, 255, 0.62);
}

.glass-radio input:checked:hover::after {
  box-shadow: 0 0 20px rgba(150, 194, 255, 1), 0 0 8px rgba(247, 251, 255, 0.95) inset;
  transform: scale(1.03);
}

.glass-radio input:checked + span {
  color: #eef5ff;
  font-weight: 600;
}

.liquid-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
}

.liquid-toggle input {
  display: none;
}

.liquid-toggle i {
  width: 52px;
  height: 22px;
  border-radius: 999px;
  position: relative;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.45);
  transition: 220ms ease;
}

.liquid-toggle i::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 2px;
  left: 3px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(198, 220, 255, 0.82));
  box-shadow: 0 2px 10px rgba(11, 33, 70, 0.45);
  transition: 250ms cubic-bezier(0.2, 0.8, 0.2, 1.2);
}

.liquid-toggle input:checked + i {
  background: linear-gradient(120deg, rgba(78, 136, 255, 0.9), rgba(84, 247, 208, 0.8));
}

.liquid-toggle input:checked + i::after {
  transform: translateX(30px);
}

.actions-row {
  margin-top: 12px;
}

.glass-btn {
  border: 1px solid var(--border-glass);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: var(--text-main);
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: transform 120ms ease, background 140ms ease, color 140ms ease;
}

.glass-btn:hover {
  transform: translateY(-1px);
}

.glass-btn:active {
  background: var(--btn-press-bg);
  color: var(--btn-press-fg);
  transform: scale(1.03);
}

.glass-btn:active span,
.glass-btn:active {
  animation: bounceText 240ms ease;
}

.glass-btn.strong {
  padding: 10px 18px;
  font-size: 16px;
}

.glass-btn.text-btn {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 6px 10px;
}

.glass-btn.text-btn:hover {
  background: transparent;
}

.glass-btn.text-btn:active {
  background: transparent;
  color: var(--text-main);
  transform: none;
  animation: none;
}

.guide {
  margin-top: 14px;
  color: var(--text-soft);
  line-height: 1.5;
  padding-left: var(--control-indent);
}

.guide h3 {
  margin: 8px 0 2px;
}

.guide p {
  margin: 3px 0;
  font-size: 14px;
  line-height: 1.4;
}

.guide.mode-guide {
  margin-top: 0;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.guide.mode-guide h3 {
  margin: 0 0 2px;
}

.flow-stage {
  padding: 6px;
  display: block;
  min-height: 0;
  height: 100%;
}

.stage-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 24px;
}

.flow-title-icon {
  width: 1.1em;
  height: 1.1em;
  min-width: 1.1em;
  min-height: 1.1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.26em;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(166, 214, 255, 0.28);
  box-shadow: 0 6px 18px rgba(62, 124, 215, 0.24);
}

.flow-title-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.stage-tools {
  display: flex;
  gap: 8px;
}

.flow-canvas {
  position: relative;
  margin-top: 4px;
  margin-bottom: 6px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  background: rgba(56, 56, 56, 0.8);
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  width: 100%;
  height: 100%;
  min-height: 520px;
}

.flow-status-banner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 260;
  width: min(560px, calc(100% - 36px));
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(173, 214, 255, 0.36);
  background: rgba(7, 15, 28, 0.8);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 34px rgba(5, 13, 26, 0.5);
  text-align: center;
}

.flow-status-banner p {
  margin: 0;
  color: #eaf4ff;
  font-size: 14px;
  line-height: 1.5;
}

.flow-status-banner.warning {
  border-color: rgba(255, 219, 125, 0.46);
  background: rgba(31, 24, 8, 0.82);
}

.flow-status-banner.danger {
  border-color: rgba(255, 146, 146, 0.5);
  background: rgba(43, 14, 18, 0.82);
}

.flow-status-actions {
  margin-top: 12px;
  display: flex;
  justify-content: center;
}

.flow-status-btn {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.11);
  color: #f4f9ff;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  cursor: pointer;
}

.flow-status-btn:hover {
  background: rgba(144, 209, 255, 0.2);
}

.mini-map-drawer {
  position: absolute;
  left: 50%;
  bottom: 4px;
  z-index: 140;
  transform: translateX(-50%);
  transition: transform 220ms ease;
}

.mini-map-drawer.collapsed {
  transform: translateX(-50%) translateY(calc(100% - 11px));
}

.login-error-text {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 138, 138, 0.6);
  background: rgba(92, 20, 20, 0.86);
  color: #ffecec;
  font-size: 13px;
  line-height: 1.35;
}

.mini-map-peek {
  position: absolute;
  left: 50%;
  top: 0;
  width: 96px;
  height: 32px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  background: rgba(12, 20, 36, 0.8);
  cursor: pointer;
  z-index: 2;
  transition: opacity 180ms ease, visibility 180ms ease;
}

.mini-map-drawer:not(.collapsed) .mini-map-peek {
  height: 16px;
}

.mini-map-drawer:not(.collapsed) .mini-map-peek.peek-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.mini-map-peek::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 3px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(232, 242, 255, 0.72);
}

.mini-map-panel {
  margin-top: 16px;
  border: none;
  border-radius: 12px;
  background: rgba(12, 20, 36, 0.24);
  backdrop-filter: blur(6px);
  padding: 8px 10px;
  min-width: 240px;
}

.mini-map-canvas {
  width: 220px;
  height: 132px;
  display: block;
  border-radius: 8px;
  border: none;
  background: rgba(12, 18, 30, 0.82);
  cursor: pointer;
  touch-action: none;
}

.flow-canvas.dragging {
  cursor: grabbing;
}

.flow-viewport {
  position: absolute;
  left: 0;
  top: 0;
  width: 1600px;
  height: 900px;
  transform-origin: 0 0;
}

.edges {
  position: absolute;
  left: 0;
  top: 0;
  width: 1600px;
  height: 900px;
}

.nodes {
  position: relative;
  width: 1600px;
  height: 900px;
}

.node {
  position: absolute;
  min-width: 110px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  font-size: 12px;
  line-height: 1.2;
  color: #0f172a;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}

.node[class*="node-icon-"] {
  padding-left: 34px;
}

.node.node-datasource-two-line {
  white-space: normal;
  min-width: 110px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.node.node-datasource-two-line .node-label-line1,
.node.node-datasource-two-line .node-label-line2 {
  display: block;
}

.node.node-datasource-two-line .node-label-line2 {
  font-size: 12px;
  opacity: 0.9;
}

.node[class*="node-icon-"]::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.node.node-icon-rsds::before {
  background: url("./Assets/Icons/DataSource.png") center / contain no-repeat;
}

.node.node-icon-trcs::before {
  background: url("./Assets/Icons/InfoSource.png") center / contain no-repeat;
}

.node.node-type-adso {
  color: #eaf4ff;
}

.node.node-icon-adso::before {
  background: url("./Assets/Icons/ADSO.png") center / contain no-repeat;
}

.node.node-icon-iobj::before {
  background: url("./Assets/Icons/MasterData.png") center / contain no-repeat;
}

.node.node-icon-hcpr::before {
  background: url("./Assets/Icons/CompositeProvider.png") center / contain no-repeat;
}

.node.node-icon-elem::before {
  background: url("./Assets/Icons/BW_Query.png") center / contain no-repeat;
}

.node.node-icon-dest::before {
  background: url("./Assets/Icons/OpenHub.png") center / contain no-repeat;
}

.node.active {
  outline: 1px solid rgba(255, 102, 102, 0.95);
  outline-offset: 2px;
}

.node.flow-active {
  box-shadow: 0 0 0 3px rgba(255, 114, 114, 0.36), 0 10px 28px rgba(52, 16, 16, 0.46);
}

.flow-edge {
  transition: stroke 180ms ease, opacity 180ms ease, filter 180ms ease;
}

.flow-edge.is-flowing {
  stroke: rgba(255, 102, 102, 0.98);
  stroke-width: 2;
  stroke-dasharray: 14 10;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 6px rgba(255, 102, 102, 0.8));
  animation: edgeFlowRun 1.1s linear 1;
}

.flow-edge.is-flow-glow {
  stroke: rgba(255, 102, 102, 0.98);
  stroke-width: 2.1;
  filter: drop-shadow(0 0 6px rgba(255, 102, 102, 0.62));
  animation: edgeBreath 1.65s ease-in-out infinite;
}

.node.seed-focus {
  z-index: 3;
  outline: 2px solid #2fe88d;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(47, 232, 141, 0.34), 0 0 34px rgba(47, 232, 141, 0.74), 0 0 68px rgba(47, 232, 141, 0.52);
  animation: seedPulse 2.6s ease-in-out infinite;
}

.node.seed-focus::after {
  content: "基础模型";
  position: absolute;
  left: 50%;
  top: -18px;
  transform: translateX(-50%);
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(90deg, #15673e 0%, #1f7d4d 100%);
  box-shadow: 0 4px 12px rgba(16, 77, 47, 0.42);
  white-space: nowrap;
}

.node.seed-focus.seed-focus-label-below::after {
  top: auto;
  bottom: -18px;
}

.node-extra-text {
  position: absolute;
  transform: translateX(-50%);
  pointer-events: none;
  font-size: 14px;
  line-height: 1.2;
  color: rgba(226, 236, 252, 0.95);
  text-shadow: 0 1px 4px rgba(4, 10, 18, 0.7);
  text-align: center;
  white-space: nowrap;
}

.node-extra-text.is-multiline {
  white-space: pre-line;
}

.flow-canvas:not(.show-node-extra-text) .node-extra-text {
  display: none;
}

.flow-canvas:not(.show-node-extra-text) .node-extra-text.hover-visible {
  display: block;
}

.node-context-menu {
  position: fixed;
  z-index: 80;
  min-width: 170px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  background: rgba(11, 18, 31, 0.97);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
  padding: 4px;
  backdrop-filter: blur(8px);
}

.node-context-menu-item {
  width: 100%;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #e7f0ff;
  text-align: left;
  padding: 7px 10px;
  font-size: 12px;
  cursor: pointer;
}

.node-context-menu-item:hover {
  background: rgba(127, 178, 255, 0.2);
}

@keyframes seedPulse {
  0% {
    box-shadow: 0 0 0 5px rgba(47, 232, 141, 0.34), 0 0 34px rgba(47, 232, 141, 0.74), 0 0 68px rgba(47, 232, 141, 0.52);
  }

  50% {
    box-shadow: 0 0 0 12px rgba(47, 232, 141, 0.2), 0 0 56px rgba(47, 232, 141, 0.92), 0 0 102px rgba(47, 232, 141, 0.74);
  }

  100% {
    box-shadow: 0 0 0 5px rgba(47, 232, 141, 0.34), 0 0 34px rgba(47, 232, 141, 0.74), 0 0 68px rgba(47, 232, 141, 0.52);
  }
}

@keyframes edgeFlowRun {
  from {
    stroke-dashoffset: 0;
    opacity: 0.9;
  }

  to {
    stroke-dashoffset: var(--flow-shift, -38px);
    opacity: 1;
  }
}

@keyframes edgeBreath {
  0% {
    opacity: 0.56;
    filter: drop-shadow(0 0 4px rgba(255, 102, 102, 0.42));
  }

  50% {
    opacity: 1;
    filter: drop-shadow(0 0 10px rgba(255, 102, 102, 0.88));
  }

  100% {
    opacity: 0.56;
    filter: drop-shadow(0 0 4px rgba(255, 102, 102, 0.42));
  }
}

.side-drawer {
  position: absolute;
  right: 2px;
  z-index: 5;
  transition: transform 220ms ease;
}

.side-drawer.collapsed {
  transform: translateX(calc(100% - 7px));
}

.drawer-peek {
  position: absolute;
  left: 0;
  top: 25%;
  width: 7px;
  height: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-right: none;
  border-radius: 10px 0 0 10px;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: opacity 180ms ease, visibility 180ms ease;
}

.side-drawer:not(.collapsed) .drawer-peek.peek-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.drawer-peek::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 2px;
  height: 12px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(232, 242, 255, 0.72);
}

.legend-drawer {
  width: max-content;
  max-width: 320px;
  height: auto;
}

.legend-panel {
  margin-left: 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background: rgba(12, 20, 36, 0.24);
  backdrop-filter: blur(6px);
  padding: 8px 10px;
}

.legend-title {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
}

.legend-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.legend-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-main);
  white-space: nowrap;
}

.legend-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex: 0 0 16px;
}

.zoom-drawer {
  width: 44px;
  height: 206px;
}

.zoom-drawer.collapsed {
  transform: translateX(calc(100% - 7px));
}

.zoom-panel {
  margin-left: 14px;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 6px;
  align-items: center;
  width: 30px;
  padding: 5px 3px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(12, 20, 36, 0.12);
  backdrop-filter: blur(6px);
}

.include-drawer {
  width: auto;
  min-height: 156px;
}

.include-panel {
  margin-left: 14px;
  min-height: 156px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background: rgba(12, 20, 36, 0.2);
  backdrop-filter: blur(6px);
  padding: 8px 10px 7px;
}

.include-list {
  display: grid;
  gap: 6px;
}

.include-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text-main);
  cursor: pointer;
}

.include-item input {
  margin: 0;
  width: 13px;
  height: 13px;
  accent-color: rgba(120, 190, 255, 0.95);
}

.include-item.fixed {
  cursor: default;
}

.include-item input:disabled {
  opacity: 0.85;
  cursor: not-allowed;
}

.flow-action-bar {
  position: absolute;
  right: 8px;
  top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 4;
}

.layout-spread-control {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
}

.spread-name {
  font-size: 11px;
  color: rgba(236, 244, 255, 0.9);
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.spread-petals {
  display: flex;
  align-items: center;
  gap: 4px;
}

.spread-petal,
.spread-core {
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.spread-petal {
  min-width: 26px;
  height: 22px;
  border-radius: 999px;
  font-size: 11px;
  padding: 0 8px;
}

.spread-core {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(120, 190, 255, 0.26);
}

.spread-petal:hover,
.spread-core:hover {
  transform: translateY(-1px);
  background: rgba(120, 190, 255, 0.2);
}

.spread-petal.is-active,
.spread-core.is-active {
  border-color: rgba(124, 220, 175, 0.9);
  box-shadow: 0 0 0 2px rgba(124, 220, 175, 0.24);
  background: rgba(124, 220, 175, 0.22);
}

.reset-view {
  position: static;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-main);
  font-size: 12px;
  cursor: pointer;
  backdrop-filter: blur(6px);
}

.reset-view.is-active {
  border-color: rgba(124, 220, 175, 0.9);
  box-shadow: 0 0 0 2px rgba(124, 220, 175, 0.24);
  background: rgba(124, 220, 175, 0.22);
}

.text-toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

.text-toggle-switch .text-toggle-label {
  line-height: 1;
}

.text-toggle-switch input {
  display: none;
}

.text-toggle-switch i {
  width: 32px;
  height: 16px;
  border-radius: 999px;
  position: relative;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.45);
  transition: 220ms ease;
}

.text-toggle-switch i::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  top: 2px;
  left: 2px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(198, 220, 255, 0.82));
  box-shadow: 0 2px 10px rgba(11, 33, 70, 0.45);
  transition: 250ms cubic-bezier(0.2, 0.8, 0.2, 1.2);
}

.text-toggle-switch input:checked + i {
  background: linear-gradient(120deg, rgba(78, 136, 255, 0.9), rgba(84, 247, 208, 0.8));
}

.text-toggle-switch input:checked + i::after {
  transform: translateX(16px);
}


.flow-title {
  position: absolute;
  left: 12px;
  top: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--text-main);
  font-size: 24px;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 10px rgba(10, 16, 28, 0.45);
}

.zoom-btn {
  width: 20px;
  height: 20px;
  margin: 0 auto;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.11);
  color: var(--text-main);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.zoom-slider {
  width: 18px;
  height: 102px;
  margin: 0 auto;
  writing-mode: vertical-lr;
  direction: rtl;
  accent-color: rgba(120, 190, 255, 0.95);
}

.zoom-value {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 9px;
  line-height: 1;
  color: rgba(237, 245, 255, 0.88);
  letter-spacing: 0.1px;
}

body.flow-only .topbar {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  margin: 8px 3px 3px;
  padding: 0;
  justify-content: flex-end;
}

body.flow-only .topbar h1 {
  margin-top: 4px;
}

body.flow-only .page-shell {
  width: 100%;
  margin: 0;
}

body.flow-only .layout.single {
  margin: 0 6px 3px;
  height: calc(100vh - 76px);
}

@supports (height: 100dvh) {
  body.flow-only .layout.single {
    height: calc(100dvh - 76px);
  }
}

body.flow-only .flow-stage {
  padding: 0;
}

body.flow-only .flow-canvas {
  margin: 0;
  min-height: 0;
}

body.flow-only .flow-stage.glass-panel {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  height: 100%;
}

.flow-back-btn {
  padding: 3px 12px;
  font-size: 12px;
  line-height: 1.2;
}

.more-page {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: rgba(5, 8, 15, 0.35);
  backdrop-filter: blur(8px);
}

.more-shell {
  position: relative;
  width: min(78vw, 1000px);
  height: 51vh;
  padding: 14px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  transform: translate3d(var(--more-shell-dx, 0px), var(--more-shell-dy, 0px), 0);
}

.more-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: grab;
}

.more-shell.dragging .more-head {
  cursor: grabbing;
}

.more-shell.resizing {
  user-select: none;
}

.window-controls {
  display: flex;
  gap: 8px;
}

.more-window-btn {
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(210, 226, 252, 0.34);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.14));
  box-shadow: 0 6px 14px rgba(8, 16, 34, 0.35);
  position: relative;
}

.more-window-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(233, 242, 255, 0.98);
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
}

.more-window-btn:hover {
  transform: translateY(-1px);
}

.more-window-btn-max::after {
  content: "□";
  font-size: 12px;
}

.more-shell.maximized .more-window-btn-max::after {
  content: "❐";
  font-size: 12px;
}

.more-window-btn-close::after {
  content: "×";
  font-size: 16px;
}

.more-window-btn-close {
  border-color: rgba(255, 166, 166, 0.45);
  background: linear-gradient(180deg, rgba(255, 119, 119, 0.35), rgba(255, 85, 85, 0.22));
}

.window-btn {
  width: 14px;
  height: 14px;
  min-width: 14px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  position: relative;
}

.window-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(30, 30, 30, 0.72);
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  opacity: 0;
  transition: opacity 120ms ease;
}

.window-btn:hover::after {
  opacity: 1;
}

.window-btn-close {
  background: #ff5f57;
  border-color: #e0443e;
}

.window-btn-close::after {
  content: "x";
}

.window-btn-min {
  background: #ffbd2e;
  border-color: #dea123;
}

.window-btn-min::after {
  content: "-";
  transform: translateY(-2px);
}

.window-btn-max {
  background: #28c840;
  border-color: #1da430;
}

.window-btn-max::after {
  content: "+";
}

.import-head .window-btn {
  margin-left: auto;
}

.glass-btn.tiny {
  padding: 6px 12px;
  font-size: 12px;
}

.more-search {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  margin: 10px 0 14px;
}

.more-search input {
  border-radius: 14px;
  border: 1px solid var(--border-glass);
  height: 38px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.16);
  color: var(--text-main);
  font-size: 14px;
  outline: none;
}

.more-search .glass-btn,
.more-search .glass-btn.strong {
  height: 38px;
  padding: 0 14px;
  font-size: 14px;
}

.more-search input:focus {
  outline: 1px solid rgba(88, 255, 176, 0.95);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(88, 255, 176, 0.22), 0 0 14px rgba(88, 255, 176, 0.35);
}

.more-search input::placeholder {
  color: var(--text-soft);
}

.more-shell.maximized {
  width: 96vw;
  height: 90vh;
  transform: none;
}

.more-resize-handle {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  cursor: nwse-resize;
  background:
    linear-gradient(135deg, transparent 48%, rgba(232, 241, 255, 0.7) 49%, rgba(232, 241, 255, 0.7) 55%, transparent 56%),
    linear-gradient(135deg, transparent 62%, rgba(232, 241, 255, 0.55) 63%, rgba(232, 241, 255, 0.55) 69%, transparent 70%),
    linear-gradient(135deg, transparent 76%, rgba(232, 241, 255, 0.38) 77%, rgba(232, 241, 255, 0.38) 83%, transparent 84%);
  opacity: 0.9;
}

.more-shell.maximized .more-resize-handle {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.more-table-wrap {
  min-height: 0;
  overflow: auto;
}

.more-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.more-table .col-type {
  width: 16%;
}

.more-table .col-tech {
  width: 18%;
}

.more-table .col-source {
  width: 16%;
}

.more-table .col-desc {
  width: 50%;
}

th,
td {
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 6px 8px;
  text-align: left;
  line-height: 1.35;
  font-size: 13px;
}

tbody tr.active {
  background: rgba(88, 255, 176, 0.2);
}

th {
  position: relative;
  background: rgba(92, 126, 222, 0.34);
  color: #eef4ff;
}

.more-table th > span:first-child {
  display: inline-block;
}

.col-resizer {
  position: absolute;
  top: 0;
  right: -5px;
  width: 10px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
}

.col-resizer::after {
  content: "";
  position: absolute;
  top: 20%;
  bottom: 20%;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(236, 244, 255, 0.35);
}

.col-resizer:hover::after {
  background: rgba(236, 244, 255, 0.7);
}

@keyframes drift {
  from { transform: translate3d(-8px, 2px, 0) scale(0.98); }
  to { transform: translate3d(10px, -6px, 0) scale(1.03); }
}

@keyframes bounceText {
  0% { transform: translateY(0); }
  45% { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

@keyframes dropIn {
  from { transform: translateY(-10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes dropdownOpen {
  from { transform: translateY(-6px) scaleY(0.92); opacity: 0; }
  to { transform: translateY(0) scaleY(1); opacity: 1; }
}