:root {
  --font-sans: "HarmonyOS Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --bg-0: #06101a;
  --bg-1: rgba(9, 20, 33, 0.7);
  --bg-2: rgba(7, 16, 28, 0.92);
  --bg-3: rgba(4, 10, 18, 0.96);
  --text-0: #eaf4ff;
  --text-1: #b2c6de;
  --line-0: rgba(167, 198, 230, 0.24);
  --line-1: rgba(167, 198, 230, 0.42);
  --accent-cyan: #56c8ff;
  --accent-green: #74d27f;
  --accent-amber: #ffc15a;
  --danger: #ff7f7f;
  --radius-lg: 18px;
  --radius-md: 12px;
  --shadow-0: 0 14px 34px rgba(0, 0, 0, 0.4);
  --shadow-1: 0 8px 18px rgba(0, 0, 0, 0.25);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-0);
  color: var(--text-0);
  font-family: var(--font-sans);
  letter-spacing: 0.01em;
}

#lifeCanvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  touch-action: none;
}

.top-shell {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: calc(12px + env(safe-area-inset-left, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  z-index: 22;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
  animation: shell-enter 520ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.brand-panel,
.top-controls {
  pointer-events: auto;
  border: 1px solid var(--line-0);
  background: linear-gradient(160deg, rgba(20, 42, 68, 0.64), var(--bg-1));
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-1);
}

.autohide-card {
  transition: opacity 380ms ease, transform 380ms ease;
}

.autohide-card.is-auto-hidden {
  opacity: 0;
}

.autohide-card.is-auto-hidden:hover,
.autohide-card.is-auto-hidden:focus-within {
  opacity: 1;
}

.brand-panel {
  max-width: min(480px, calc(100vw - 380px));
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}

.brand-kicker {
  margin: 0;
  font-size: 11px;
  color: #9ec4e8;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.brand-slogan {
  margin: 6px 0 0;
  font-size: 13px;
  color: #d4e9ff;
  letter-spacing: 0.01em;
}

.brand-panel h1 {
  margin: 6px 0 5px;
  font-size: clamp(18px, 2.2vw, 25px);
  line-height: 1.16;
  font-weight: 680;
}

.brand-tip {
  margin: 0;
  font-size: 13px;
  color: var(--text-1);
}

.brand-tip-mini {
  margin-top: 3px;
  font-size: 12px;
  color: #9fb7d3;
}

.visit-counter {
  display: inline-flex;
  margin-top: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid rgba(145, 181, 215, 0.28);
  background: rgba(8, 18, 30, 0.54);
  color: #d6ebff;
  font-variant-numeric: tabular-nums;
}

.top-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border-radius: var(--radius-lg);
  padding: 8px;
  justify-content: flex-end;
  max-width: none;
}

/* Keep only fullscreen + overview + settings entries in the top-right toolbar. */
.top-controls .speed-control,
.top-controls .zoom-control,
.top-controls #btnResetView,
.top-controls #btnLegend {
  display: none;
}

button,
.overview-item,
input,
label.speed-control,
label.zoom-control {
  font: inherit;
}

.top-controls button,
.hint-card button,
#overviewClose,
#settingsClose {
  border: 1px solid var(--line-0);
  color: var(--text-0);
  background: rgba(11, 26, 42, 0.84);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: border-color 180ms ease, transform 180ms ease, background 180ms ease;
}

.top-controls button:hover,
.hint-card button:hover,
#overviewClose:hover,
#settingsClose:hover {
  border-color: var(--line-1);
  background: rgba(20, 38, 60, 0.96);
  transform: translateY(-1px);
}

.top-controls button:active,
.hint-card button:active,
#overviewClose:active,
#settingsClose:active {
  transform: translateY(0);
}

.top-controls .icon-btn {
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  display: inline-grid;
  place-items: center;
}

.top-controls .lang-btn {
  min-width: 48px;
  height: 38px;
  padding: 0 10px;
  font-size: 12px;
  letter-spacing: 0.04em;
  font-weight: 650;
}

.speed-control {
  min-width: 222px;
  border: 1px solid var(--line-0);
  border-radius: var(--radius-md);
  background: rgba(10, 24, 40, 0.88);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label value"
    "slider slider";
  gap: 4px 8px;
  padding: 8px 10px;
}

.zoom-control {
  min-width: 204px;
  border: 1px solid var(--line-0);
  border-radius: var(--radius-md);
  background: rgba(10, 24, 40, 0.88);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label value"
    "slider slider";
  gap: 4px 8px;
  padding: 8px 10px;
}

.speed-label {
  grid-area: label;
  font-size: 11px;
  color: #9ec4e8;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.speed-value {
  grid-area: value;
  font-size: 12px;
  color: #d3e9ff;
}

#speedInput {
  grid-area: slider;
  width: 100%;
  margin: 0;
  accent-color: var(--accent-cyan);
  cursor: pointer;
}

#zoomInput {
  grid-area: slider;
  width: 100%;
  margin: 0;
  accent-color: var(--accent-amber);
  cursor: pointer;
}

.floating-panel {
  position: fixed;
  top: 96px;
  right: 12px;
  width: 280px;
  max-height: min(68vh, 540px);
  overflow: auto;
  z-index: 24;
  background: var(--bg-2);
  border: 1px solid var(--line-0);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-0);
  padding: 12px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(0.98);
  transition: opacity 210ms ease, transform 210ms ease;
}

.floating-panel h3 {
  margin: 0 0 10px;
  font-size: 16px;
}

.floating-panel.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  color: var(--text-1);
  font-size: 13px;
}

.dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  display: inline-block;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.16);
}

.toggle-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  color: var(--text-1);
  font-size: 12px;
}

.legend-divider {
  margin: 12px 0 10px;
  border-top: 1px solid rgba(145, 181, 215, 0.22);
}

.legend-subtitle {
  margin: 0 0 8px;
  font-size: 13px;
  color: #d5e9ff;
}

.rss-color-legend {
  max-height: 180px;
  overflow: auto;
  padding-right: 2px;
}

.rss-color-legend .legend-row {
  margin: 6px 0;
}

.rss-color-legend-inline {
  margin-top: 8px;
  border: 1px solid rgba(152, 186, 220, 0.2);
  border-radius: 10px;
  padding: 8px;
  background: rgba(8, 19, 32, 0.72);
}

.toggle-row input {
  accent-color: var(--accent-green);
}

.overview-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 10, 18, 0.58);
  backdrop-filter: blur(2px);
  z-index: 28;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.overview-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

.overview-drawer {
  position: fixed;
  right: 0;
  top: 0;
  width: min(450px, 92vw);
  height: 100dvh;
  z-index: 30;
  background: var(--bg-3);
  border-left: 1px solid var(--line-0);
  box-shadow: var(--shadow-0);
  transform: translateX(100%);
  transition: transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.overview-drawer.open {
  transform: translateX(0);
}

.settings-drawer {
  position: fixed;
  right: 0;
  top: 0;
  width: min(450px, 92vw);
  height: 100dvh;
  z-index: 31;
  background: var(--bg-3);
  border-left: 1px solid var(--line-0);
  box-shadow: var(--shadow-0);
  transform: translateX(100%);
  transition: transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1);
  overflow: auto;
  padding-bottom: 28px;
}

.settings-drawer.open {
  transform: translateX(0);
}

.drawer-header {
  padding: 14px;
  border-bottom: 1px solid var(--line-0);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.drawer-header h3 {
  margin: 0;
  font-size: 17px;
}

.drawer-search {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(145, 181, 215, 0.16);
}

.drawer-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(145, 181, 215, 0.16);
}

.drawer-tab {
  border: 1px solid rgba(152, 186, 220, 0.26);
  border-radius: 10px;
  background: rgba(11, 26, 42, 0.54);
  color: var(--text-1);
  padding: 7px 8px;
  cursor: pointer;
  transition: border-color 170ms ease, background 170ms ease, color 170ms ease;
}

.drawer-tab:hover {
  border-color: rgba(186, 214, 243, 0.44);
  color: var(--text-0);
}

.drawer-tab.is-active {
  border-color: rgba(146, 211, 248, 0.58);
  background: linear-gradient(160deg, rgba(46, 111, 164, 0.38), rgba(19, 44, 70, 0.82));
  color: #ecf7ff;
}

.drawer-meta {
  min-height: 22px;
  padding: 6px 14px 0;
  color: #a7c2de;
  font-size: 12px;
}

.saved-quick-add {
  padding: 8px 14px 6px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  border-bottom: 1px solid rgba(145, 181, 215, 0.16);
}

.saved-quick-add.is-hidden {
  display: none;
}

.saved-quick-add input {
  width: 100%;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid rgba(152, 186, 220, 0.24);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-0);
  outline: none;
}

.saved-quick-add input:focus {
  border-color: var(--line-1);
  box-shadow: 0 0 0 2px rgba(86, 200, 255, 0.14);
}

.saved-quick-add button {
  justify-self: end;
  border: 1px solid rgba(196, 110, 232, 0.5);
  border-radius: 10px;
  background: linear-gradient(150deg, rgba(196, 110, 232, 0.24), rgba(67, 35, 97, 0.3));
  color: #f0ddff;
  padding: 8px 11px;
  cursor: pointer;
}

.saved-quick-add button:hover {
  border-color: rgba(212, 147, 245, 0.72);
  background: linear-gradient(150deg, rgba(206, 132, 240, 0.3), rgba(84, 47, 118, 0.38));
}

.saved-batch-ops {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
  padding-top: 4px;
  border-top: 1px solid rgba(145, 181, 215, 0.14);
}

.saved-batch-ops button {
  justify-self: auto;
  border: 1px solid rgba(152, 186, 220, 0.3);
  border-radius: 9px;
  background: rgba(10, 24, 40, 0.86);
  color: #d7ecff;
  padding: 6px 9px;
  font-size: 12px;
}

.saved-batch-ops button:hover {
  border-color: rgba(186, 214, 243, 0.44);
  background: rgba(20, 38, 60, 0.96);
}

.saved-batch-ops button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.drawer-search input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line-0);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-0);
  outline: none;
}

.drawer-search input:focus {
  border-color: var(--line-1);
  box-shadow: 0 0 0 2px rgba(86, 200, 255, 0.16);
}

.overview-list {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow: auto;
}

.overview-item {
  text-align: left;
  width: 100%;
  border: 1px solid rgba(152, 186, 220, 0.18);
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(18, 36, 58, 0.86), rgba(9, 20, 34, 0.92));
  color: var(--text-0);
  padding: 10px 11px;
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease;
}

.overview-item:hover {
  border-color: rgba(186, 214, 243, 0.44);
  transform: translateY(-1px);
}

.overview-item.is-batch-mode {
  cursor: pointer;
}

.overview-title {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
}

.overview-select {
  display: inline-flex;
  align-items: center;
  margin-bottom: 6px;
}

.overview-select input[type="checkbox"] {
  accent-color: #c46ee8;
}

.overview-sub {
  display: block;
  color: var(--text-1);
  font-size: 12px;
}

.overview-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  font-size: 11px;
}

.overview-remove {
  margin-left: auto;
  border: 1px solid rgba(255, 127, 127, 0.36);
  border-radius: 999px;
  padding: 2px 8px;
  color: #ffc9c9;
  background: rgba(67, 19, 24, 0.46);
  cursor: pointer;
  user-select: none;
}

.overview-remove:hover {
  border-color: rgba(255, 170, 170, 0.56);
  background: rgba(84, 23, 29, 0.62);
  color: #ffdcdc;
}

.pill {
  border: 1px solid rgba(170, 201, 231, 0.34);
  border-radius: 999px;
  padding: 3px 9px;
  color: #d7ebff;
  background: linear-gradient(165deg, rgba(18, 40, 62, 0.8), rgba(7, 17, 29, 0.88));
  box-shadow: inset 0 0 0 1px rgba(173, 204, 234, 0.08);
}

.pill.pill-daily {
  border-color: rgba(255, 193, 90, 0.38);
  color: #ffe1aa;
}

.pill.pill-core {
  border-color: rgba(116, 210, 127, 0.38);
  color: #cef4d1;
}

.pill.pill-mixed {
  border-color: rgba(86, 200, 255, 0.38);
  color: #d0f3ff;
}

.pill.pill-saved {
  border-color: rgba(196, 110, 232, 0.42);
  color: #ebd4ff;
}

.overview-empty {
  border: 1px dashed rgba(145, 181, 215, 0.28);
  border-radius: 12px;
  padding: 12px;
  font-size: 13px;
  color: var(--text-1);
}

.settings-section {
  margin: 14px;
  border: 1px solid rgba(152, 186, 220, 0.2);
  border-radius: 12px;
  padding: 12px;
  background: linear-gradient(165deg, rgba(17, 35, 57, 0.72), rgba(7, 16, 28, 0.88));
}

.settings-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.settings-actions-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.settings-section h4 {
  margin: 0;
  font-size: 14px;
}

.settings-section button {
  border: 1px solid var(--line-0);
  color: var(--text-0);
  background: rgba(11, 26, 42, 0.84);
  border-radius: 9px;
  padding: 7px 10px;
  cursor: pointer;
}

.settings-section button:hover {
  border-color: var(--line-1);
  background: rgba(20, 38, 60, 0.96);
}

.section-tip {
  margin: 8px 0 0;
  color: var(--text-1);
  font-size: 12px;
  line-height: 1.5;
}

.radio-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--text-1);
  font-size: 13px;
}

.radio-row input {
  accent-color: var(--accent-cyan);
}

.rss-add-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 10px;
}

.rss-add-grid input {
  width: 100%;
  border-radius: 9px;
  border: 1px solid var(--line-0);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-0);
  padding: 8px 10px;
}

.rss-add-grid input:focus {
  outline: none;
  border-color: var(--line-1);
  box-shadow: 0 0 0 2px rgba(86, 200, 255, 0.14);
}

.rss-recommended-panel,
.rss-manage-panel {
  margin-top: 10px;
  border: 1px solid rgba(143, 180, 214, 0.22);
  border-radius: 10px;
  padding: 9px;
  background: rgba(10, 20, 34, 0.56);
}

.rss-manage-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rss-manage-heading h5 {
  margin: 0;
  font-size: 13px;
  color: #d5ecff;
}

.rss-recommended-list {
  margin-top: 8px;
  max-height: 160px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.rss-recommended-item {
  border: 1px solid rgba(144, 178, 210, 0.24);
  border-radius: 9px;
  padding: 7px 8px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  background: rgba(8, 17, 28, 0.78);
}

.rss-recommended-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 3px;
}

.rss-recommended-name {
  font-size: 13px;
  color: #e4f3ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rss-recommended-url {
  font-size: 11px;
  color: #8fb2d3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rss-manage-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.rss-manage-grid input,
.rss-manage-grid select {
  width: 100%;
  border-radius: 9px;
  border: 1px solid var(--line-0);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-0);
  padding: 8px 10px;
}

.rss-manage-grid input:focus,
.rss-manage-grid select:focus {
  outline: none;
  border-color: var(--line-1);
  box-shadow: 0 0 0 2px rgba(86, 200, 255, 0.14);
}

.rss-manage-actions {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rss-source-meta {
  margin-top: 8px;
  color: #9cb8d3;
  font-size: 12px;
}

.rss-source-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  max-height: 220px;
  overflow: auto;
}

.rss-source-item {
  border: 1px solid rgba(152, 186, 220, 0.2);
  border-radius: 10px;
  padding: 8px;
  background: rgba(8, 19, 32, 0.75);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
}

.rss-source-item .rss-main {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.rss-source-item .rss-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.rss-source-item input[type="checkbox"] {
  accent-color: var(--accent-green);
}

.rss-name {
  font-size: 13px;
  color: #e4f3ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rss-url {
  grid-column: 1 / span 2;
  font-size: 11px;
  color: #95b2cf;
  word-break: break-all;
}

.rss-status-pill {
  border: 1px solid rgba(149, 186, 220, 0.38);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  color: #d1e8ff;
  background: rgba(17, 37, 57, 0.58);
}

.rss-status-pill.is-direct_ok {
  border-color: rgba(114, 210, 127, 0.52);
  color: #d2f8d7;
  background: rgba(21, 55, 34, 0.48);
}

.rss-status-pill.is-proxy_needed {
  border-color: rgba(255, 193, 90, 0.5);
  color: #ffe6b3;
  background: rgba(62, 43, 17, 0.48);
}

.rss-status-pill.is-unavailable {
  border-color: rgba(255, 127, 127, 0.52);
  color: #ffd1d1;
  background: rgba(66, 21, 26, 0.52);
}

.rss-status-pill.is-unknown {
  border-color: rgba(149, 186, 220, 0.4);
  color: #cce7ff;
  background: rgba(16, 34, 54, 0.52);
}

.rss-status-detail {
  grid-column: 1 / span 2;
  font-size: 11px;
  color: #8facc9;
}

.mini-btn,
.ghost-btn {
  border: 1px solid var(--line-0);
  border-radius: 9px;
  background: rgba(9, 23, 39, 0.85);
  color: var(--text-0);
  padding: 6px 9px;
  cursor: pointer;
}

.mini-btn:hover,
.ghost-btn:hover {
  border-color: var(--line-1);
  background: rgba(20, 38, 60, 0.96);
}

.rss-delete {
  justify-self: end;
  border: 1px solid rgba(255, 127, 127, 0.36);
  border-radius: 8px;
  background: rgba(67, 19, 24, 0.46);
  color: #ffc3c3;
  padding: 4px 8px;
  cursor: pointer;
}

.rss-delete:hover {
  border-color: rgba(255, 170, 170, 0.52);
  background: rgba(84, 23, 29, 0.62);
}

.api-snippet {
  margin: 10px 0 0;
  padding: 10px;
  border-radius: 9px;
  border: 1px solid rgba(152, 186, 220, 0.2);
  background: rgba(8, 17, 29, 0.9);
  color: #cce7ff;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.donate-link {
  display: inline-flex;
  margin-top: 9px;
  padding: 8px 11px;
  border-radius: 10px;
  border: 1px solid rgba(255, 193, 90, 0.5);
  background: linear-gradient(150deg, rgba(255, 193, 90, 0.2), rgba(89, 62, 18, 0.24));
  color: #ffe1aa;
  text-decoration: none;
}

.donate-link:hover {
  border-color: rgba(255, 207, 125, 0.7);
  color: #fff0cd;
}

.inline-link-btn {
  font: inherit;
  cursor: pointer;
}

.source-open-btn,
.source-open-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 9px;
  padding: 8px 11px;
  border-radius: 10px;
  border: 1px solid rgba(146, 211, 248, 0.52);
  background: linear-gradient(150deg, rgba(86, 200, 255, 0.22), rgba(22, 62, 99, 0.28));
  color: #d9f2ff;
  text-decoration: none;
}

.source-open-btn:hover,
.source-open-link:hover {
  border-color: rgba(171, 224, 255, 0.74);
  color: #ecf9ff;
  background: linear-gradient(150deg, rgba(104, 208, 255, 0.3), rgba(27, 72, 112, 0.38));
}

.source-open-btn {
  font: inherit;
  cursor: pointer;
}

.preview-save-btn {
  border-color: rgba(196, 110, 232, 0.48);
  background: linear-gradient(150deg, rgba(196, 110, 232, 0.22), rgba(67, 35, 97, 0.28));
  color: #f0ddff;
}

.preview-save-btn:hover {
  border-color: rgba(212, 147, 245, 0.72);
  background: linear-gradient(150deg, rgba(206, 132, 240, 0.28), rgba(84, 47, 118, 0.36));
  color: #f8edff;
}

.preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.preview-chip {
  border: 1px solid rgba(165, 197, 227, 0.28);
  border-radius: 999px;
  padding: 2px 8px;
  background: rgba(11, 24, 39, 0.6);
  color: #d2e7fb;
  font-size: 11px;
}

.preview-chip.preview-chip-source {
  border-color: rgba(116, 210, 127, 0.4);
  color: #cff4d3;
}

.preview-line {
  margin: 5px 0;
}

.preview-summary {
  color: #c3d7ec;
}

.unit-preview {
  position: fixed;
  right: 12px;
  bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  z-index: 18;
  width: min(390px, calc(100vw - 24px));
  background: linear-gradient(160deg, rgba(18, 39, 62, 0.76), rgba(7, 16, 28, 0.9));
  border: 1px solid var(--line-0);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: 12px;
}

.unit-preview h3 {
  margin: 0 0 7px;
  font-size: 15px;
}

.unit-preview p {
  margin: 4px 0;
  color: var(--text-1);
  font-size: 13px;
}

.module-content {
  margin: 8px 0 0;
  max-height: min(42vh, 420px);
  overflow: auto;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(149, 186, 219, 0.2);
  background: rgba(7, 17, 29, 0.86);
  color: #d6ebff;
  font-size: 12px;
  line-height: 1.58;
  font-family: var(--font-sans);
  white-space: pre-wrap;
  word-break: break-word;
}

.status-text {
  position: fixed;
  left: calc(14px + env(safe-area-inset-left, 0px));
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 18;
  font-size: 12px;
  color: #a3c4e4;
  padding: 3px 10px;
  border: 1px solid rgba(160, 193, 225, 0.24);
  border-radius: 999px;
  background: rgba(6, 13, 22, 0.6);
}

.content-modal {
  position: fixed;
  inset: 0;
  z-index: 48;
  display: none;
}

.content-modal.open {
  display: block;
}

.content-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 10, 18, 0.64);
  backdrop-filter: blur(3px);
}

.content-modal-panel {
  --content-modal-scale: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(calc(960px * var(--content-modal-scale)), calc(100vw - 24px));
  height: min(calc(92dvh * var(--content-modal-scale)), calc(100dvh - 16px));
  border: 1px solid var(--line-0);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(14, 31, 50, 0.94), rgba(7, 16, 28, 0.97));
  box-shadow: var(--shadow-0);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modal-pop 220ms ease;
}

.content-modal-header {
  padding: 11px 12px;
  border-bottom: 1px solid rgba(145, 181, 215, 0.22);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.content-modal-header h3 {
  margin: 0;
  font-size: 15px;
}

.content-modal-header button {
  border: 1px solid var(--line-0);
  background: rgba(11, 26, 42, 0.84);
  color: var(--text-0);
  border-radius: 10px;
  padding: 7px 11px;
  cursor: pointer;
}

.content-modal-header button:hover {
  border-color: var(--line-1);
  background: rgba(20, 38, 60, 0.96);
}

.content-modal-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.content-modal-zoom-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-right: 2px;
  border-right: 1px solid rgba(145, 181, 215, 0.22);
}

.content-modal-zoom-controls button {
  min-width: 34px;
  padding: 7px 9px;
}

#contentModalZoomReset {
  min-width: 56px;
  font-variant-numeric: tabular-nums;
}

.content-modal-zoom-controls button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#contentModalSave {
  border-color: rgba(196, 110, 232, 0.48);
  background: linear-gradient(150deg, rgba(196, 110, 232, 0.22), rgba(67, 35, 97, 0.28));
  color: #f0ddff;
}

#contentModalSave:hover {
  border-color: rgba(212, 147, 245, 0.72);
  background: linear-gradient(150deg, rgba(206, 132, 240, 0.28), rgba(84, 47, 118, 0.36));
  color: #f8edff;
}

#contentModalSave[disabled] {
  opacity: 0.48;
  cursor: not-allowed;
  filter: grayscale(0.2);
}

.content-modal-body {
  flex: 1;
  overflow: auto;
  padding: 12px;
  background: linear-gradient(160deg, rgba(11, 23, 37, 0.82), rgba(7, 15, 26, 0.92));
}

.content-modal-body.is-text-mode {
  overflow: auto;
}

.content-modal-body.is-iframe-mode {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

.content-modal-iframe-shell {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: 10px;
}

.content-modal-body iframe {
  width: 100%;
  height: 100%;
  min-height: 560px;
  border: 1px solid rgba(149, 186, 219, 0.22);
  border-radius: 10px;
  background: #091624;
}

.content-modal-body.is-iframe-mode iframe {
  min-height: 0;
  display: block;
}

.content-modal-footer {
  flex: 0 0 auto;
}

.content-modal-body .module-content {
  margin: 0;
  max-height: none;
  min-height: 100%;
}

.content-modal-note {
  margin: 10px 0 4px;
  color: #aac6df;
  font-size: 12px;
}

.hint-layer {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(4, 10, 18, 0.62);
  display: grid;
  place-items: center;
}

.hint-layer.hidden {
  display: none;
}

.hint-card {
  width: min(460px, 92vw);
  background: linear-gradient(170deg, rgba(22, 45, 71, 0.95), rgba(8, 18, 31, 0.98));
  border: 1px solid var(--line-0);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow-0);
  animation: hint-pop 340ms ease;
}

.hint-card h2 {
  margin: 0 0 9px;
  font-size: 22px;
}

.hint-card p {
  margin: 7px 0;
  color: var(--text-1);
}

.hint-card button {
  margin-top: 12px;
  background: linear-gradient(160deg, rgba(84, 198, 255, 0.28), rgba(40, 127, 185, 0.34));
  border-color: rgba(146, 211, 248, 0.48);
}

.toast {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(-16px);
  z-index: 50;
  background: rgba(9, 20, 34, 0.96);
  color: var(--text-0);
  border: 1px solid var(--line-0);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@keyframes shell-enter {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hint-pop {
  from {
    opacity: 0;
    transform: translateY(5px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes modal-pop {
  from {
    opacity: 0;
    transform: translate(-50%, -48%) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@media (max-width: 980px) {
  .top-shell {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .brand-panel {
    max-width: none;
    width: 100%;
  }

  .top-controls {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .speed-control {
    width: 100%;
    min-width: 0;
  }

  .zoom-control {
    width: 100%;
    min-width: 0;
  }

  .floating-panel {
    top: 150px;
    left: 12px;
    right: 12px;
    width: auto;
  }

  .unit-preview {
    left: 10px;
    right: 10px;
    width: auto;
    bottom: 52px;
  }

  .status-text {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    left: calc(10px + env(safe-area-inset-left, 0px));
    max-width: calc(100vw - 20px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .top-shell {
    gap: 10px;
  }

  .brand-panel {
    max-width: min(560px, calc(100vw - 300px));
  }

  .top-controls .icon-btn {
    width: 42px;
    min-width: 42px;
    height: 42px;
    font-size: 18px;
  }

  .top-controls .lang-btn {
    min-width: 52px;
    height: 42px;
  }

  .overview-drawer,
  .settings-drawer {
    width: min(540px, 88vw);
  }

  .content-modal-panel {
    width: min(calc(920px * var(--content-modal-scale)), calc(100vw - 20px));
    height: min(calc(90dvh * var(--content-modal-scale)), calc(100dvh - 20px));
  }

  .content-modal-body iframe {
    min-height: 420px;
  }
}

@media (max-width: 640px) {
  .top-shell {
    top: calc(8px + env(safe-area-inset-top, 0px));
    left: calc(8px + env(safe-area-inset-left, 0px));
    right: calc(8px + env(safe-area-inset-right, 0px));
    gap: 6px;
  }

  .brand-panel {
    padding: 11px 12px;
  }

  .brand-panel h1 {
    font-size: 19px;
  }

  .top-controls {
    padding: 8px;
    gap: 6px;
  }

  .top-controls .icon-btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    font-size: 19px;
  }

  .top-controls .lang-btn {
    min-width: 56px;
    height: 44px;
    font-size: 13px;
  }

  .top-controls button,
  #overviewClose {
    padding: 7px 10px;
    font-size: 13px;
  }

  .floating-panel {
    top: calc(142px + env(safe-area-inset-top, 0px));
    max-height: min(56dvh, 430px);
  }

  .overview-drawer {
    width: 100vw;
  }

  .settings-drawer {
    width: 100vw;
  }

  .drawer-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .drawer-tab {
    padding: 9px 8px;
    font-size: 13px;
  }

  .drawer-header h3 {
    font-size: 16px;
  }

  .settings-section {
    margin: 10px;
    padding: 10px;
  }

  .content-modal-panel {
    width: calc(100vw - 8px);
    height: calc(100dvh - 8px);
    border-radius: 12px;
  }

  .content-modal-header {
    padding: 9px 10px;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .content-modal-header h3 {
    font-size: 14px;
  }

  .content-modal-actions {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
  }

  .content-modal-zoom-controls {
    border-right: none;
    padding-right: 0;
  }

  .content-modal-header button {
    min-height: 38px;
  }

  .content-modal-body {
    padding: 8px;
  }

  .content-modal-body iframe {
    min-height: 300px;
  }

  .unit-preview {
    left: calc(8px + env(safe-area-inset-left, 0px));
    right: calc(8px + env(safe-area-inset-right, 0px));
    width: auto;
    bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  }

  .status-text {
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    left: calc(8px + env(safe-area-inset-left, 0px));
  }

  .hint-card {
    width: calc(100vw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    padding: 14px;
  }

  .hint-card h2 {
    font-size: 19px;
  }

  .toast {
    top: calc(10px + env(safe-area-inset-top, 0px));
    width: calc(100vw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    border-radius: 12px;
    text-align: center;
    white-space: normal;
  }
}

@media (max-width: 380px) {
  .top-controls {
    gap: 4px;
  }

  .top-controls .icon-btn {
    width: 42px;
    min-width: 42px;
    height: 42px;
  }

  .top-controls .lang-btn {
    min-width: 50px;
    height: 42px;
    font-size: 12px;
  }

  .brand-tip-mini {
    font-size: 11px;
  }
}