@property --rainbow-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:root {
  --body-bg: #e7e2d8;
  --nav-bg: #f4f1ea;
  --nav-border: #c8c1b4;
  --nav-width: 284px;
  --text-main: #2c2823;
  --text-muted: #6e675d;
  --text-soft: #8c8478;
  --keycap-top: #ffffff;
  --keycap-bottom: #ebe6dc;
  --keycap-border: #bfb8aa;
  --keycap-shadow: 0 2px 0 #b5ae9f, 0 3px 6px rgb(60 50 35 / 12%), inset 0 1px 0 #ffffff;
  --keycap-active-shadow: inset 0 2px 4px rgb(50 42 30 / 18%), 0 1px 0 rgb(255 255 255 / 75%);
  --well-bg: #faf8f3;
  --well-border: #c6bfb1;
  --well-shadow: inset 0 2px 4px rgb(60 50 35 / 10%), inset 0 1px 1px rgb(60 50 35 / 8%), 0 1px 0 rgb(255 255 255 / 90%);
  --canvas: #fdfaf4;
  --frame: #c8c0b0;
  --code: #2c3437;
  --line-number: #979084;
  --comment: #857e72;
  --keyword: #8f3f71;
  --function: #1f5f8b;
  --variable: #b5651d;
  --operator: #af3a03;
  --type: #2b6f5e;
  --string: #4f772d;
  --method: #1f5f8b;
  --punctuation: #4b463e;
}

* {
  box-sizing: border-box;
}

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

body {
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  color: var(--text-main);
  background:
    radial-gradient(circle at 20% 10%, rgb(255 255 255 / 65%), transparent 45%),
    radial-gradient(circle at 85% 85%, rgb(210 198 178 / 45%), transparent 50%),
    repeating-linear-gradient(
      0deg,
      rgb(255 255 255 / 18%) 0px,
      rgb(255 255 255 / 18%) 1px,
      transparent 1px,
      transparent 3px
    ),
    var(--body-bg);
  font-family: "Aptos Mono", "Cascadia Code", "Segoe UI", "Microsoft YaHei", Consolas, monospace;
}

button,
input,
select,
textarea {
  font: inherit;
}

/* Global Drag Overlay */
body.is-dragging-files::after {
  position: fixed;
  z-index: 120;
  inset: 16px;
  display: grid;
  place-items: center;
  pointer-events: none;
  content: "释放鼠标：进入右侧上传预审工作台（TTF / OTF / TTC / OTC / ZIP）";
  color: #1f4d36;
  font-size: 18px;
  font-weight: 600;
  background: rgb(248 245 238 / 88%);
  border: 2px dashed #4d8b68;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgb(60 50 35 / 18%), inset 0 1px 0 #ffffff;
  backdrop-filter: blur(5px);
}

/* Tactile Skeuomorphic Sidebar Chassis */
.font-nav {
  position: fixed;
  z-index: 20;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  width: var(--nav-width);
  padding: 14px 13px 16px;
  overflow: hidden;
  background: linear-gradient(180deg, #f8f6f0 0%, #eae5dc 100%);
  border-right: 1px solid #b8b0a2;
  box-shadow:
    inset -1px 0 0 rgb(255 255 255 / 85%),
    8px 0 24px rgb(65 55 40 / 14%),
    2px 0 6px rgb(65 55 40 / 8%);
  transform: translateX(-100%);
  transition: transform 220ms ease;
}

body.nav-open .font-nav {
  transform: translateX(0);
}

.font-nav-tools {
  flex: 0 0 auto;
  padding: 0 0 10px;
  border-bottom: 1px solid #d5cfc2;
  box-shadow: 0 1px 0 rgb(255 255 255 / 80%);
}

/* Prominent Tactile Upload Switch Button */
.upload-trigger-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  margin-bottom: 10px;
  padding: 7px 12px;
  color: #1d4e35;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(180deg, #eff8f1 0%, #d4ebdc 100%);
  border: 1px solid #88b89a;
  border-radius: 8px;
  box-shadow:
    0 2px 0 #75a587,
    0 4px 7px rgb(40 80 55 / 14%),
    inset 0 1px 0 #ffffff;
  transition: transform 80ms ease, box-shadow 120ms ease, background 150ms ease;
}

.upload-trigger-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #f5fcf7 0%, #dcf1e3 100%);
}

.upload-trigger-btn:active:not(:disabled),
.upload-trigger-btn.is-active {
  transform: translateY(1px);
  background: linear-gradient(180deg, #cde6d5 0%, #dff2e5 100%);
  box-shadow:
    inset 0 2px 4px rgb(30 70 45 / 22%),
    0 1px 0 rgb(255 255 255 / 85%);
}

.upload-badge {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  color: #ffffff;
  font-size: 11px;
  background: linear-gradient(180deg, #3c8c5e, #2b6e47);
  border-radius: 999px;
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 25%), 0 1px 0 rgb(255 255 255 / 70%);
}

.upload-badge[hidden] {
  display: none;
}

/* Recessed Search Input */
.font-search {
  width: 100%;
  height: 35px;
  padding: 0 11px;
  color: var(--text-main);
  background: var(--well-bg);
  border: 1px solid var(--well-border);
  border-radius: 7px;
  box-shadow: var(--well-shadow);
  outline: none;
}

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

.font-search:focus {
  background: #ffffff;
  border-color: #5b8fa8;
  box-shadow:
    inset 0 2px 4px rgb(40 70 90 / 10%),
    0 0 0 3px rgb(91 143 168 / 20%);
}

/* Tactile Segmented Filter Rack */
.font-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  margin-top: 9px;
  padding: 4px;
  background: #dfd9ce;
  border: 1px solid #c2bbaec9;
  border-radius: 8px;
  box-shadow:
    inset 0 2px 4px rgb(60 50 35 / 14%),
    0 1px 0 rgb(255 255 255 / 85%);
}

.font-filter {
  min-width: 0;
  height: 28px;
  padding: 0 4px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(180deg, #faf8f4 0%, #eae4da 100%);
  border: 1px solid #c2bbb0;
  border-radius: 5px;
  box-shadow: 0 1px 0 #b5ae9f, inset 0 1px 0 #ffffff;
  transition: transform 80ms ease, box-shadow 120ms ease;
}

.font-filter-selected,
.font-filter-pending {
  grid-column: span 2;
  font-size: 11px;
}

.font-filter:hover {
  color: var(--text-main);
  background: linear-gradient(180deg, #ffffff 0%, #f1ece3 100%);
}

.font-filter.is-active {
  color: #18556e;
  background: linear-gradient(180deg, #dcecf4 0%, #eef6fa 100%);
  border-color: #7eaec4;
  box-shadow:
    inset 0 2px 3px rgb(25 75 100 / 18%),
    0 1px 0 rgb(255 255 255 / 85%);
  transform: translateY(1px);
}

.font-result-count {
  height: 18px;
  padding-top: 6px;
  color: var(--text-muted);
  font-size: 10px;
  text-align: right;
  text-shadow: 0 1px 0 rgb(255 255 255 / 80%);
}

/* Preview Typography Settings Accordion */
.preview-settings {
  margin-top: 8px;
  font-size: 12px;
}

.preview-settings summary {
  cursor: pointer;
  padding: 6px 8px;
  color: #2b5d73;
  font-weight: 600;
  background: linear-gradient(180deg, #faf8f4 0%, #ebe6dc 100%);
  border: 1px solid var(--keycap-border);
  border-radius: 6px;
  box-shadow: 0 1px 0 #b8b1a3, inset 0 1px 0 #ffffff;
}

.preview-settings-body {
  display: grid;
  gap: 8px;
  max-height: 36svh;
  margin-top: 6px;
  padding: 10px;
  overflow-y: auto;
  background: #faf7f0;
  border: 1px solid #cbc4b6;
  border-radius: 7px;
  box-shadow: var(--well-shadow);
}

.preview-settings-body select,
.preview-settings-body textarea {
  width: 100%;
  min-width: 0;
  padding: 7px 8px;
  color: var(--text-main);
  background: #ffffff;
  border: 1px solid var(--well-border);
  border-radius: 6px;
  box-shadow: inset 0 1px 3px rgb(60 50 35 / 8%);
}

.preview-settings-body button {
  width: 100%;
  padding: 7px;
  color: var(--text-main);
  cursor: pointer;
  background: linear-gradient(180deg, var(--keycap-top), var(--keycap-bottom));
  border: 1px solid var(--keycap-border);
  border-radius: 6px;
  box-shadow: var(--keycap-shadow);
}

.preview-settings-body button:active {
  transform: translateY(1px);
  box-shadow: var(--keycap-active-shadow);
}

.preview-settings-body textarea {
  resize: vertical;
  min-height: 76px;
}

.preview-settings-body input[type="range"] {
  width: 100%;
  accent-color: #2e708c;
}

.preview-settings-body output {
  float: right;
  color: #2e708c;
  font-weight: 600;
}

.preview-check {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-main);
}

.preview-settings-body p {
  margin: 0;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.6;
}

/* Recessed Font Family List Well */
.font-nav-list {
  flex: 1 1 auto;
  display: grid;
  align-content: start;
  min-height: 0;
  margin-top: 8px;
  padding: 5px;
  overflow-y: auto;
  gap: 4px;
  background: var(--well-bg);
  border: 1px solid var(--well-border);
  border-radius: 8px;
  box-shadow: var(--well-shadow);
  scrollbar-color: #b8b0a2 transparent;
  scrollbar-width: thin;
}

.font-nav-item {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 6px 10px 6px 8px;
  overflow: hidden;
  color: var(--text-main);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  background: linear-gradient(180deg, #ffffff 0%, #f4f0e8 100%);
  border: 1px solid #dcd5c8;
  border-left: 3px solid #c8c0b2;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgb(60 50 35 / 6%), inset 0 1px 0 #ffffff;
  transition: transform 80ms ease, background 120ms ease;
}

.font-nav-item[hidden] {
  display: none;
}

.font-nav-item:hover {
  background: linear-gradient(180deg, #ffffff 0%, #ebe5da 100%);
  border-left-color: #4f8ea8;
}

.font-nav-item.is-active {
  color: #13465c;
  background: linear-gradient(180deg, #e5f2f8 0%, #d5e9f2 100%);
  border-color: #8cb7cb;
  border-left: 3px solid #2b799c;
  box-shadow: inset 0 1px 2px rgb(30 85 110 / 12%), 0 1px 0 #ffffff;
}

.font-nav-item.is-selected:not(.is-active) {
  color: #1d5235;
  background: linear-gradient(180deg, #ebf7ee 0%, #dcf0e2 100%);
  border-color: #96c4a5;
  border-left-color: #3b8a58;
}

.font-nav-item.is-pending,
.font-nav-item.is-pending.is-active {
  color: #878177;
  background: #ece8e0;
  border-color: #cbc4b8;
  border-left-color: #9e978c;
  filter: grayscale(1);
}

.font-nav-index {
  color: var(--text-soft);
  font-size: 10px;
  text-align: right;
}

.font-nav-item.is-active .font-nav-index {
  color: #2b799c;
  font-weight: 600;
}

.font-nav-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--nav-font, inherit);
}

.font-nav-badges {
  display: flex;
  gap: 3px;
}

.font-nav-badge {
  padding: 1px 4px;
  color: var(--text-muted);
  font-size: 9px;
  background: #ebe6dc;
  border: 1px solid #d1c9bc;
  border-radius: 3px;
}

.font-nav-item.is-selected::after {
  position: absolute;
  right: 8px;
  color: #2f7d4c;
  content: "\2713";
  font-size: 12px;
  font-weight: 700;
}

.font-nav-item.is-selected .font-nav-badges {
  margin-right: 14px;
}

/* Sidebar Management & Export Controls */
.local-font-management {
  flex: 0 0 auto;
  padding-top: 10px;
}

.local-font-management[hidden] {
  display: none;
}

.local-font-management button,
.font-export-actions button,
#clear-font-selection {
  min-height: 34px;
  padding: 6px 8px;
  color: var(--text-main);
  font-size: 12px;
  cursor: pointer;
  background: linear-gradient(180deg, var(--keycap-top), var(--keycap-bottom));
  border: 1px solid var(--keycap-border);
  border-radius: 6px;
  box-shadow: var(--keycap-shadow);
  transition: transform 80ms ease, box-shadow 120ms ease;
}

.local-font-management button {
  width: 100%;
}

.local-font-management button:hover:not(:disabled),
.font-export-actions button:hover:not(:disabled),
#clear-font-selection:hover:not(:disabled) {
  background: linear-gradient(180deg, #ffffff, #f3efe7);
}

.local-font-management button:active:not(:disabled),
.font-export-actions button:active:not(:disabled),
#clear-font-selection:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: var(--keycap-active-shadow);
}

.local-font-management button:disabled,
.font-export-actions button:disabled,
#clear-font-selection:disabled {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
}

#mark-current-family {
  margin-bottom: 6px;
}

#delete-current-family {
  color: #822933;
  background: linear-gradient(180deg, #fdf2f3 0%, #f3dce0 100%);
  border-color: #cfa0a7;
  box-shadow: 0 2px 0 #bc8b92, 0 3px 6px rgb(120 40 50 / 10%), inset 0 1px 0 #ffffff;
}

.local-font-management .restore-fonts-button {
  margin-top: 6px;
  color: #1f556e;
  background: linear-gradient(180deg, #f2f8fb 0%, #ddecf3 100%);
  border-color: #95bacb;
  box-shadow: 0 2px 0 #82a9bc, 0 3px 6px rgb(30 85 110 / 10%), inset 0 1px 0 #ffffff;
}

.local-font-management p {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.5;
}

.font-export {
  flex: 0 0 auto;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #d5cfc2;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 80%);
}

.font-selection-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.selected-font-count {
  color: #1e5938;
  font-size: 12px;
  font-weight: 600;
}

#clear-font-selection {
  min-height: 30px;
  padding: 4px 8px;
  font-size: 11px;
}

.font-export-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

#copy-font-names,
#download-font-files,
#cancel-font-download {
  grid-column: 1 / -1;
}

#download-font-files {
  color: #1d4e35;
  font-weight: 600;
  background: linear-gradient(180deg, #eff8f1 0%, #d4ebdc 100%);
  border-color: #88b89a;
  box-shadow: 0 2px 0 #75a587, 0 3px 6px rgb(40 80 55 / 12%), inset 0 1px 0 #ffffff;
}

#cancel-font-download[hidden] {
  display: none;
}

.font-download-status,
.font-export-status {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Tactile Collapse Toggle Keycap */
.nav-toggle {
  position: fixed;
  z-index: 30;
  top: 14px;
  left: 14px;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--text-main);
  cursor: pointer;
  background: linear-gradient(180deg, #ffffff 0%, #eae4da 100%);
  border: 1px solid #b8b0a2;
  border-radius: 8px;
  box-shadow: var(--keycap-shadow);
  transition: left 220ms ease, transform 80ms ease;
}

.nav-toggle:hover {
  background: linear-gradient(180deg, #ffffff 0%, #f2ede4 100%);
}

.nav-toggle:active {
  transform: translateY(1px);
  box-shadow: var(--keycap-active-shadow);
}

.nav-toggle::before {
  content: "\203A";
  font-family: Georgia, serif;
  font-size: 24px;
  line-height: 1;
}

body.nav-open .nav-toggle {
  left: calc(var(--nav-width) + 14px);
}

body.nav-open .nav-toggle::before {
  content: "\2039";
}

/* Right Main Stage (Supports Both Preview View and Scheme A Upload View) */
.preview-stage {
  position: relative;
  width: 100%;
  height: 100svh;
  padding: 28px 24px;
  overflow-y: auto;
  transition: width 220ms ease, margin-left 220ms ease;
}

body.nav-open .preview-stage {
  width: calc(100% - var(--nav-width));
  margin-left: var(--nav-width);
}

.preview-stage:focus {
  outline: none;
}

.preview-stage-view {
  position: relative;
  width: 100%;
  min-height: calc(100svh - 56px);
  display: grid;
  place-items: center;
}

.preview-stage-view[hidden],
.upload-stage-panel[hidden],
.font-card[hidden],
.preview-empty[hidden] {
  display: none !important;
}

/* Empty State Card */
.preview-empty {
  max-width: 480px;
  padding: 32px 28px;
  color: var(--text-main);
  text-align: center;
  line-height: 1.8;
  background: linear-gradient(180deg, #fcfaf5 0%, #f1ede4 100%);
  border: 1px solid #c8c0b2;
  border-radius: 14px;
  box-shadow:
    0 14px 34px rgb(65 55 40 / 12%),
    0 2px 0 #b8b0a2,
    inset 0 1px 0 #ffffff;
}

.empty-upload-trigger {
  margin-top: 14px;
  padding: 12px 20px;
  color: #1d4e35;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(180deg, #eff8f1 0%, #d4ebdc 100%);
  border: 1px solid #88b89a;
  border-radius: 9px;
  box-shadow: 0 2px 0 #75a587, 0 4px 10px rgb(40 80 55 / 14%), inset 0 1px 0 #ffffff;
}

.empty-upload-trigger:hover {
  background: linear-gradient(180deg, #f6fcf8 0%, #dff2e5 100%);
}

/* Skeuomorphic Framed Code Preview Card */
.font-card {
  --card-scale: 1;
  --code-base-font-size: 22px;
  --preview-font: "Cascadia Code", Consolas, monospace;
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% - 20px);
  max-height: 84%;
  overflow: hidden;
  color: var(--code);
  background: var(--canvas);
  border: 1px solid #bdb4a4;
  border-radius: 12px;
  box-shadow:
    0 22px 48px rgb(65 55 40 / 18%),
    0 4px 10px rgb(65 55 40 / 10%),
    0 2px 0 #b2a999,
    inset 0 1px 0 #ffffff;
  transform: translate(-50%, -50%) scale(var(--card-scale));
  transition: border-color 180ms ease, opacity 180ms ease, box-shadow 180ms ease;
}

.font-card.is-loading {
  opacity: 0.72;
}

.font-card.is-selected {
  border-color: transparent;
}

.font-card.is-selected::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  padding: 3px;
  pointer-events: none;
  content: "";
  background: conic-gradient(
    from var(--rainbow-angle),
    #e85d68,
    #e6a93e,
    #4ca96c,
    #3d9ec9,
    #7363d8,
    #cf59c8,
    #e85d68
  );
  border-radius: inherit;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: rainbow-spin 3.6s linear infinite;
}

@keyframes rainbow-spin {
  to { --rainbow-angle: 360deg; }
}

.font-card.is-pending {
  filter: grayscale(1);
  border-color: #9e978c;
}

.font-card.is-pending::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  content: "";
  border: 3px solid #9e978c;
  border-radius: inherit;
}

.font-card.is-pending .code,
.font-card.is-pending .code * {
  color: #7d7870 !important;
}

.editor {
  padding: 0 0 18px;
  background: var(--canvas);
}

/* Brushed Metallic Window Titlebar */
.window-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  margin-bottom: 14px;
  padding: 0 16px;
  white-space: nowrap;
  background: linear-gradient(180deg, #f7f4ee 0%, #e4dfd5 100%);
  border-bottom: 1px solid #c5bcad;
  box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px rgb(60 50 35 / 6%);
}

.control {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  box-shadow: inset 0 1px 2px rgb(255 255 255 / 75%), 0 1px 1px rgb(255 255 255 / 80%);
}

.control.close {
  background: radial-gradient(circle at 35% 30%, #ff8b85, #e0483e);
  border: 1px solid #b8342b;
}

.control.minimize {
  background: radial-gradient(circle at 35% 30%, #ffd978, #dfa01e);
  border: 1px solid #b88011;
}

.control.maximize {
  background: radial-gradient(circle at 35% 30%, #6ee381, #28a93e);
  border: 1px solid #1d842e;
}

.font-title {
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  color: #3a342c;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgb(255 255 255 / 85%);
}

.language-name,
.theme-name,
.style-status,
.font-position {
  flex: 0 0 auto;
  padding: 2px 7px;
  font-size: 10px;
  background: rgb(255 255 255 / 65%);
  border: 1px solid #cfc8ba;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 #ffffff;
}

.language-name { color: #1c6282; font-weight: 600; }
.theme-name { color: #635c52; }
.style-status { color: #9c6716; font-weight: 600; }
.style-status.is-complete { color: #246e42; }
.font-position { color: #6c655a; }

.code {
  padding: 0 16px 0 12px;
  -webkit-user-select: none;
  user-select: none;
  font-family: var(--preview-font);
  font-size: var(--fitted-code-font-size, var(--code-base-font-size));
  font-synthesis: none;
  font-weight: 400;
  line-height: var(--preview-line-height, 1.5);
  font-variant-ligatures: var(--preview-ligatures, common-ligatures contextual);
  font-feature-settings: "calt" var(--preview-ligature-value, 1), "liga" var(--preview-ligature-value, 1);
  letter-spacing: 0;
  transition: opacity 160ms ease;
}

.font-card.is-loading .code {
  opacity: 0.45;
}

.line {
  display: grid;
  grid-template-columns: 36px max-content;
  min-height: calc(var(--preview-line-height, 1.5) * 1em);
  white-space: pre;
}

.font-card.manual-size .code {
  overflow: auto;
  max-height: 62svh;
  padding-bottom: 8px;
}

.line.font-info {
  grid-template-columns: 36px minmax(0, 1fr);
}

.line-number {
  padding-right: 11px;
  color: var(--line-number);
  text-align: right;
  user-select: none;
}

.comment { color: var(--comment); font-style: italic; }
.keyword { color: var(--keyword); font-weight: 700; }
.function { color: var(--function); font-style: italic; font-weight: 700; }
.variable { color: var(--variable); }
.operator { color: var(--operator); }
.type { color: var(--type); }
.string { color: var(--string); }
.method { color: var(--method); }
.punctuation { color: var(--punctuation); }

/* ============================================================
   Scheme A: Right-Side Upload & Review Stage Panel (Skeuomorphic Light)
   ============================================================ */
.upload-stage-panel {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 6px 0 28px;
}

.upload-panel-inner {
  display: grid;
  gap: 20px;
}

.upload-stage-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  background: linear-gradient(180deg, #faf8f3 0%, #ece7dd 100%);
  border: 1px solid #c4bcad;
  border-radius: 12px;
  box-shadow:
    0 8px 20px rgb(60 50 35 / 10%),
    0 2px 0 #b5ae9f,
    inset 0 1px 0 #ffffff;
}

.eyebrow {
  display: block;
  color: #6b6357;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
}

.upload-stage-title {
  margin: 4px 0 0;
  color: var(--text-main);
  font-size: 22px;
  text-shadow: 0 1px 0 #ffffff;
}

.back-to-preview-btn {
  padding: 9px 16px;
  color: var(--text-main);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(180deg, #ffffff 0%, #eae4da 100%);
  border: 1px solid var(--keycap-border);
  border-radius: 8px;
  box-shadow: var(--keycap-shadow);
}

.back-to-preview-btn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #f3efe7 100%);
}

.back-to-preview-btn:active {
  transform: translateY(1px);
  box-shadow: var(--keycap-active-shadow);
}

.upload-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.upload-workspace,
.upload-guide {
  padding: 24px;
  background: linear-gradient(180deg, #faf8f3 0%, #eee9df 100%);
  border: 1px solid #c4bcad;
  border-radius: 14px;
  box-shadow:
    0 14px 32px rgb(60 50 35 / 11%),
    0 2px 0 #b5ae9f,
    inset 0 1px 0 #ffffff;
  min-width: 0;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.section-heading h2 {
  margin: 0;
  color: var(--text-main);
  font-size: 16px;
  font-weight: 600;
}

.section-heading > span {
  padding: 2px 8px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  background: #e5dfd3;
  border: 1px solid #cbc3b4;
  border-radius: 4px;
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 8%), 0 1px 0 #ffffff;
}

/* Tactile Recessed Drop Zone */
.drop-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 220px;
  padding: 24px;
  cursor: pointer;
  background:
    radial-gradient(ellipse at 50% 20%, rgb(255 255 255 / 70%), transparent 75%),
    #f5f2ea;
  border: 2px dashed #a89f90;
  border-radius: 12px;
  box-shadow:
    inset 0 3px 6px rgb(60 50 35 / 10%),
    0 1px 0 #ffffff;
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.drop-zone:hover,
.drop-zone.drag-over,
.drop-zone:focus-within {
  background: #eef6f0;
  border-color: #4f8e68;
  box-shadow:
    inset 0 3px 8px rgb(40 90 60 / 12%),
    0 0 0 3px rgb(79 142 104 / 15%);
}

.drop-zone input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.drop-zone > strong {
  color: var(--text-main);
  font-size: 16px;
}

.drop-zone > span:not(.type-stack):not(.choose-pill) {
  color: var(--text-muted);
  font-size: 12px;
}

.choose-pill {
  margin-top: 4px;
  padding: 8px 16px;
  color: #1d4e35;
  font-size: 12px;
  font-weight: 600;
  background: linear-gradient(180deg, #ffffff 0%, #dfeee3 100%);
  border: 1px solid #88b89a;
  border-radius: 8px;
  box-shadow: 0 2px 0 #75a587, 0 3px 6px rgb(40 80 55 / 12%), inset 0 1px 0 #ffffff;
}

.type-stack {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 68px;
  margin-bottom: 4px;
}

.type-stack i {
  display: grid;
  place-items: center;
  width: 52px;
  height: 62px;
  color: #365944;
  font: italic 28px Georgia, serif;
  background: linear-gradient(180deg, #ffffff 0%, #eae4da 100%);
  border: 1px solid #bfb8a9;
  border-radius: 9px;
  box-shadow: 0 6px 14px rgb(60 50 35 / 16%), 0 2px 0 #b2aa9b, inset 0 1px 0 #ffffff;
  transition: transform 280ms ease;
}

.type-stack i:first-child { transform: rotate(-14deg) translate(8px, 6px); }
.type-stack i:nth-child(2) { z-index: 1; transform: translateY(-3px); font-size: 24px; }
.type-stack i:last-child { transform: rotate(14deg) translate(-8px, 6px); }

.drop-zone:hover .type-stack i:first-child,
.drop-zone.drag-over .type-stack i:first-child {
  transform: rotate(-21deg) translate(-3px, 0);
}
.drop-zone:hover .type-stack i:last-child,
.drop-zone.drag-over .type-stack i:last-child {
  transform: rotate(21deg) translate(3px, 0);
}
.drop-zone:hover .type-stack i:nth-child(2) {
  transform: translateY(-8px);
}

#upload-selection {
  margin: 16px 0 10px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}

.selected-files,
#upload-results {
  max-height: 240px;
  margin: 0 0 14px;
  padding: 6px;
  overflow: auto;
  list-style: none;
  background: var(--well-bg);
  border: 1px solid var(--well-border);
  border-radius: 9px;
  box-shadow: var(--well-shadow);
}

.selected-files:empty,
#upload-results:empty {
  display: none;
}

.selected-files li,
#upload-results li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  padding: 9px 11px;
  color: var(--text-main);
  font-size: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f3efe6 100%);
  border: 1px solid #d5cebf;
  border-radius: 7px;
  box-shadow: 0 1px 2px rgb(60 50 35 / 6%), inset 0 1px 0 #ffffff;
  overflow-wrap: anywhere;
}

.selected-files li:last-child,
#upload-results li:last-child {
  margin-bottom: 0;
}

.selected-files li.is-active {
  background: linear-gradient(180deg, #e8f4fa 0%, #d8eaf3 100%);
  border-color: #87b5ca;
}

.file-icon {
  color: #2f6c48;
  font: italic 16px Georgia, serif;
  font-weight: 700;
}

.selected-files .file-name {
  flex: 1;
  min-width: 0;
  padding: 3px 0;
  color: #1c536e;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  overflow-wrap: anywhere;
}

.selected-files .file-name:hover {
  color: #113a4e;
  text-decoration: underline;
}

.file-size {
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
}

.upload-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.primary-skeuo-btn,
.danger-skeuo-btn,
.remove-file {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  transition: transform 80ms ease, box-shadow 120ms ease;
}

.primary-skeuo-btn {
  color: #184930;
  background: linear-gradient(180deg, #eef8f0 0%, #cde7d5 100%);
  border: 1px solid #7fb291;
  box-shadow: 0 2px 0 #6c9f7e, 0 4px 8px rgb(40 80 55 / 14%), inset 0 1px 0 #ffffff;
}

.primary-skeuo-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #f6fcf7 0%, #d8eedf 100%);
}

.danger-skeuo-btn,
.remove-file {
  color: #822933;
  background: linear-gradient(180deg, #fdf2f3 0%, #f2dbdf 100%);
  border: 1px solid #cfa0a7;
  box-shadow: 0 2px 0 #bc8b92, 0 3px 6px rgb(120 40 50 / 10%), inset 0 1px 0 #ffffff;
}

.remove-file {
  padding: 4px 9px;
  font-size: 11px;
  border-radius: 5px;
}

.primary-skeuo-btn:active:not(:disabled),
.danger-skeuo-btn:active:not(:disabled),
.remove-file:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: var(--keycap-active-shadow);
}

.primary-skeuo-btn:disabled,
.danger-skeuo-btn:disabled,
.remove-file:disabled {
  opacity: 0.42;
  cursor: default;
  box-shadow: none;
}

#upload-status,
#preview-state,
.local-preview small,
.local-only-note {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.7;
}

#upload-status {
  min-height: 20px;
  margin: 14px 0 8px;
}

#upload-progress {
  display: block;
  width: 100%;
  height: 8px;
  overflow: hidden;
  border: 1px solid #c2baa9;
  border-radius: 999px;
  background: #e4dfd5;
  accent-color: #3a8759;
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 12%);
}

#upload-results li[data-state="added"] {
  color: #1d5436;
  background: #eaf6ed;
  border-color: #93c2a2;
}

#upload-results li[data-state="failed"] {
  color: #852831;
  background: #fbecee;
  border-color: #d69ea5;
}

.specimen {
  padding: 10px 0 20px;
  color: #3b634b;
  font: italic 84px Georgia, serif;
  letter-spacing: -6px;
  text-shadow: 0 2px 0 #ffffff;
}

.specimen span {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
  font: 12px "Segoe UI", "Microsoft YaHei", sans-serif;
  letter-spacing: 2px;
}

.specimen[hidden],
.local-preview[hidden],
#preview-sample[hidden] {
  display: none;
}

.local-preview {
  margin: 12px 0 20px;
  padding: 16px;
  background: var(--well-bg);
  border: 1px solid var(--well-border);
  border-radius: 10px;
  box-shadow: var(--well-shadow);
}

.preview-info {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 7px 12px;
  margin: 12px 0;
  padding: 12px 0;
  font-size: 12px;
  line-height: 1.6;
  border-top: 1px solid #d8d1c4;
  border-bottom: 1px solid #d8d1c4;
}

.preview-info dt {
  color: var(--text-muted);
  font-weight: 600;
}

.preview-info dd {
  margin: 0;
  color: var(--text-main);
  overflow-wrap: anywhere;
}

#preview-sample {
  margin: 14px 0;
  font-size: 15px;
  line-height: 1.8;
  font-synthesis: none;
}

.sample-caption {
  margin: 12px 0 8px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
}

.sample-code {
  margin: 0;
  padding: 14px;
  overflow-x: auto;
  color: #2c3437;
  background: #ffffff;
  border: 1px solid #cfc8ba;
  border-radius: 8px;
  box-shadow: inset 0 1px 3px rgb(60 50 35 / 8%);
  white-space: pre;
  tab-size: 2;
  font: inherit;
}

.sample-code code {
  font: inherit;
  font-variant-ligatures: common-ligatures contextual;
}

.sample-comment { color: #857e72; font-style: italic; }
.sample-keyword { color: #8f3f71; font-weight: 600; }
.sample-function { color: #1f5f8b; font-weight: 600; }
.sample-string { color: #4f772d; }
.sample-number { color: #b5651d; }

.upload-steps-card {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #d5cebf;
  box-shadow: inset 0 1px 0 #ffffff;
}

.upload-steps-card h2 {
  margin: 0 0 12px;
  font-size: 15px;
}

.upload-steps-card ol {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.upload-steps-card li {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.upload-steps-card li b {
  padding-top: 2px;
  color: #2f6c48;
  font-size: 11px;
}

.upload-steps-card strong {
  font-size: 12px;
}

.upload-steps-card p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.6;
}

.upload-limits {
  padding-top: 12px;
  color: var(--text-muted);
  font-size: 11px;
  border-top: 1px solid #d8d1c4;
}

/* Skeuomorphic Light Dialogs */
.download-dialog {
  width: min(470px, calc(100vw - 32px));
  max-height: calc(100svh - 32px);
  padding: 26px;
  overflow-y: auto;
  color: var(--text-main);
  background: linear-gradient(180deg, #fbf9f4 0%, #ede8de 100%);
  border: 1px solid #bfb7a8;
  border-radius: 14px;
  box-shadow:
    0 24px 70px rgb(50 40 25 / 28%),
    0 2px 0 #b2aa9b,
    inset 0 1px 0 #ffffff;
}

.download-dialog::backdrop {
  background: rgb(60 52 40 / 40%);
  backdrop-filter: blur(4px);
}

.download-dialog-label {
  color: #246480;
  font-size: 12px;
  font-weight: 600;
}

.download-dialog h2 {
  margin: 8px 0 14px;
  color: var(--text-main);
  font-size: 20px;
}

.download-dialog p {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.8;
}

.download-dialog .download-dialog-summary {
  padding: 12px;
  color: #1d4e35;
  font-weight: 600;
  background: #eaf5ec;
  border: 1px solid #9cc4a8;
  border-radius: 8px;
  box-shadow: inset 0 1px 2px rgb(30 70 45 / 8%);
}

.download-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

.download-dialog button {
  min-height: 38px;
  padding: 8px 16px;
  color: var(--text-main);
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(180deg, var(--keycap-top), var(--keycap-bottom));
  border: 1px solid var(--keycap-border);
  border-radius: 7px;
  box-shadow: var(--keycap-shadow);
}

.download-dialog .download-dialog-continue {
  color: #1d4e35;
  background: linear-gradient(180deg, #eff8f1 0%, #d4ebdc 100%);
  border-color: #88b89a;
}

.download-dialog .delete-font-confirm {
  color: #822933;
  background: linear-gradient(180deg, #fdf2f3 0%, #f2dbdf 100%);
  border-color: #cfa0a7;
}

.delete-font-families {
  max-height: 180px;
  overflow-y: auto;
  padding-left: 22px;
  color: var(--text-main);
  font-size: 12px;
  line-height: 1.8;
}

.restore-selection-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.restore-selection-toolbar button {
  min-height: 30px;
  padding: 4px 10px;
  font-size: 12px;
}

.restore-font-families {
  display: grid;
  gap: 6px;
  max-height: 220px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  background: var(--well-bg);
  border: 1px solid var(--well-border);
  border-radius: 8px;
  box-shadow: var(--well-shadow);
  font-size: 12px;
}

.restore-font-families li {
  padding: 8px 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f0e8 100%);
  border: 1px solid #d5cebf;
  border-radius: 6px;
}

.restore-font-families label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
}

.restore-font-families .restore-family-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--text-main);
  font-weight: 600;
}

.restore-font-families .restore-family-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.restore-font-families .restore-family-meta {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 11px;
}

@media (max-width: 860px) {
  .upload-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  :root {
    --nav-width: min(280px, calc(100vw - 48px));
  }

  body.nav-open .preview-stage {
    width: 100%;
    margin-left: 0;
  }

  .preview-stage {
    padding: 18px 12px;
  }

  .font-card {
    --card-scale: 1;
    --code-base-font-size: 12px;
    width: calc(100% - 12px);
    height: auto;
  }

  .line {
    grid-template-columns: 28px max-content;
  }

  .line.font-info {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .line-number {
    padding-right: 7px;
  }

  .font-title {
    font-size: 10px;
  }

    .language-name,
  .theme-name,
  .style-status,
  .font-position {
    font-size: 9px;
  }
}

/* ============================================================
   Skeuomorphic Login Gate Overlay & Logout Button
   ============================================================ */
body.is-locked .font-nav,
body.is-locked .nav-toggle,
body.is-locked .preview-stage {
  visibility: hidden;
  pointer-events: none;
}

.login-gate-overlay {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    radial-gradient(circle at 25% 15%, rgb(255 255 255 / 72%), transparent 45%),
    radial-gradient(circle at 80% 85%, rgb(210 198 178 / 55%), transparent 50%),
    var(--body-bg);
}

.login-gate-overlay[hidden] {
  display: none !important;
}

.login-gate-card {
  width: min(420px, 100%);
  padding: 28px 26px 26px;
  background: linear-gradient(180deg, #fcfaf5 0%, #ede8de 100%);
  border: 1px solid #bfb7a8;
  border-radius: 14px;
  box-shadow:
    0 24px 64px rgb(55 45 30 / 22%),
    0 3px 0 #b2aa9b,
    inset 0 1px 0 #ffffff;
}

.login-gate-header {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #d5cebf;
  box-shadow: 0 1px 0 rgb(255 255 255 / 85%);
}

.login-gate-title {
  margin: 6px 0 8px;
  color: var(--text-main);
  font-size: 22px;
}

.login-gate-subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.6;
}

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

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

.login-field label {
  color: var(--text-main);
  font-size: 12px;
  font-weight: 600;
}

.login-field input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  color: var(--text-main);
  font-size: 13px;
  background: var(--well-bg);
  border: 1px solid var(--well-border);
  border-radius: 7px;
  box-shadow: var(--well-shadow);
  outline: none;
}

.login-field input:focus {
  background: #ffffff;
  border-color: #5b8fa8;
  box-shadow:
    inset 0 2px 4px rgb(40 70 90 / 10%),
    0 0 0 3px rgb(91 143 168 / 20%);
}

.login-remember-check {
  font-size: 12px;
  cursor: pointer;
}

.login-gate-error {
  margin: 0;
  padding: 9px 12px;
  color: #852831;
  font-size: 12px;
  font-weight: 600;
  background: #fbecee;
  border: 1px solid #d69ea5;
  border-radius: 7px;
}

.login-gate-error[hidden] {
  display: none;
}

.login-submit-btn {
  width: 100%;
  min-height: 40px;
  margin-top: 2px;
  font-size: 13px;
}

.local-font-management .logout-account-button {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 11px;
}

.local-font-management .logout-account-button[hidden] {
  display: none;
}