:root {
  --ui-bg: #f1f3f8;
  --ui-panel: #ffffff;
  --ui-soft: #f6f7fb;
  --ui-text: #1d2433;
  --ui-muted: #70798c;
  --ui-border: #e1e5ed;
  --ui-primary: #4f46e5;
  --ui-primary-dark: #3f37c9;
  --ui-shadow: 0 20px 50px rgba(34, 42, 72, 0.10);
  --ui-live-radius: 12px;
  --ui-live-duration: 210ms;
  --ui-live-lift: 2px;
  --ui-live-glow: .55;
  --ui-live-glow-a: .094;
  --ui-live-glow-b: .061;
  --ui-live-glow-c: .11;
  --ui-live-glow-d: .099;
  --ui-live-glow-e: .072;
  --ui-live-shadow: 0 16px 36px rgba(37, 45, 78, .12);
  --ui-pointer-x: 22vw;
  --ui-pointer-y: 12vh;
}

/* 2026 technology-glass visual system */
:root {
  --tech-ink: #172033;
  --tech-muted: #6f7789;
  --tech-pink: #ee789e;
  --tech-pink-deep: #d95582;
  --tech-cyan: #51bfd0;
  --tech-line: rgba(105, 119, 151, .16);
  --tech-glass: rgba(255, 255, 255, .68);
  --tech-glass-strong: rgba(255, 255, 255, .84);
  --tech-shadow: 0 18px 50px rgba(42, 51, 78, .10), inset 0 1px 0 rgba(255,255,255,.86);
}

body {
  color: var(--tech-ink);
  background:
    radial-gradient(circle at var(--ui-pointer-x, 18%) var(--ui-pointer-y, 12%), rgba(238,120,158,.13), transparent 25rem),
    radial-gradient(circle at 88% 18%, rgba(81,191,208,.11), transparent 28rem),
    linear-gradient(145deg, #fff9fb 0%, #f6f8fc 48%, #f2f7fa 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .32;
  background-image: linear-gradient(rgba(83,101,137,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(83,101,137,.055) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, black, transparent 75%);
}

.app-header,
.topbar {
  background: rgba(255,255,255,.62) !important;
  border-color: rgba(255,255,255,.72) !important;
  box-shadow: 0 12px 34px rgba(42,52,78,.07), inset 0 -1px 0 rgba(100,115,145,.10) !important;
  backdrop-filter: blur(24px) saturate(155%);
}

.app-header { position: relative; z-index: 30; }
.brand-mark {
  box-shadow: 0 9px 24px rgba(222,91,133,.22), inset 0 1px 0 rgba(255,255,255,.9) !important;
  border: 1px solid rgba(255,255,255,.86);
}
.brand strong { letter-spacing: -.03em; }
.brand span { color: var(--tech-muted); letter-spacing: .04em; }

.workspace { gap: 14px !important; padding: 14px !important; background: transparent !important; }
.editor-panel,
.preview-panel {
  border: 1px solid rgba(255,255,255,.82) !important;
  border-radius: calc(var(--ui-live-radius) + 8px) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(249,251,255,.57)) !important;
  box-shadow: var(--tech-shadow) !important;
  backdrop-filter: blur(28px) saturate(150%);
  overflow: hidden;
}
.editor-panel::before,
.preview-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.98), transparent);
  pointer-events: none;
  z-index: 4;
}

.tabs {
  margin: 8px;
  padding: 5px !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  border-radius: 15px !important;
  background: rgba(239,243,249,.64) !important;
  box-shadow: inset 0 1px 2px rgba(36,49,77,.06);
}
.tabs::before {
  top: 5px !important;
  bottom: 5px !important;
  border-radius: 11px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,247,250,.88)) !important;
  border: 1px solid rgba(238,120,158,.17);
  box-shadow: 0 7px 18px rgba(52,62,91,.10), inset 0 1px 0 white !important;
}
.tab { color: #737c8e !important; font-weight: 650 !important; }
.tab.is-active { color: var(--tech-pink-deep) !important; }

.action-group,
.toolbar,
.editor-switch,
.preview-toolbar,
.format-toolbar {
  background: rgba(255,255,255,.58) !important;
  border: 1px solid rgba(255,255,255,.82) !important;
  box-shadow: 0 8px 24px rgba(44,54,82,.065), inset 0 1px 0 rgba(255,255,255,.95) !important;
  backdrop-filter: blur(18px);
}

.action-button,
.mini-button,
.editor-switch button,
.format-toolbar button,
.ui-theme-options button,
.ui-button-style-options button {
  color: #4e586d;
  border: 1px solid rgba(112,126,155,.13) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(246,248,252,.62)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 5px 14px rgba(44,54,82,.055) !important;
}
.action-button:hover,
.mini-button:hover,
.format-toolbar button:hover {
  color: #202a3d;
  border-color: rgba(238,120,158,.3) !important;
  box-shadow: inset 0 1px 0 white, 0 9px 22px rgba(66,75,104,.11), 0 0 0 3px rgba(238,120,158,.07) !important;
}
.action-button.primary,
.mini-button.primary {
  color: white !important;
  border-color: rgba(255,255,255,.46) !important;
  background: linear-gradient(125deg, #ef8baa 0%, #e66f98 52%, #d95b87 100%) !important;
  box-shadow: 0 10px 24px rgba(218,82,130,.24), inset 0 1px 0 rgba(255,255,255,.46) !important;
}
.action-button.primary::after,
.mini-button.primary::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at var(--surface-x, 28%) var(--surface-y, 20%), rgba(255,255,255,.55), transparent 36%);
  mix-blend-mode: screen;
}

select:not(.sr-only),
.field input:not([type="range"]):not([type="checkbox"]):not([type="color"]),
.field textarea,
.code-editor,
.visual-editor,
.css-editor {
  color: #263147 !important;
  border: 1px solid rgba(113,128,158,.16) !important;
  background-color: rgba(255,255,255,.72) !important;
  box-shadow: inset 0 1px 2px rgba(42,53,80,.05), 0 4px 13px rgba(42,53,80,.04) !important;
}
select:not(.sr-only):focus,
.field input:focus,
.field textarea:focus,
.code-editor:focus,
.visual-editor:focus {
  border-color: rgba(81,191,208,.48) !important;
  box-shadow: 0 0 0 4px rgba(81,191,208,.11), inset 0 1px 0 white !important;
}

.template-card,
.recipe-button,
.ai-task-button,
.version-row,
.text-import-guide {
  border: 1px solid rgba(255,255,255,.86) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(245,248,252,.58)) !important;
  box-shadow: 0 9px 24px rgba(44,54,82,.07), inset 0 1px 0 white !important;
  backdrop-filter: blur(16px);
}
.template-card:hover,
.recipe-button:hover,
.ai-task-button:hover {
  border-color: rgba(81,191,208,.32) !important;
  box-shadow: 0 15px 34px rgba(44,54,82,.12), 0 0 0 3px rgba(81,191,208,.06), inset 0 1px 0 white !important;
}
.template-card.is-active,
.recipe-button.is-active,
.ai-task-button.is-active {
  border-color: rgba(238,120,158,.42) !important;
  box-shadow: 0 13px 30px rgba(218,82,130,.13), 0 0 0 3px rgba(238,120,158,.08), inset 0 1px 0 white !important;
}

.preview-stage {
  background:
    radial-gradient(circle at 72% 13%, rgba(81,191,208,.10), transparent 23rem),
    radial-gradient(circle at 18% 80%, rgba(238,120,158,.09), transparent 24rem),
    linear-gradient(rgba(92,111,147,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92,111,147,.055) 1px, transparent 1px),
    rgba(235,240,247,.55) !important;
  background-size: auto, auto, 18px 18px, 18px 18px, auto !important;
}
.resume-page { box-shadow: 0 24px 65px rgba(28,39,67,.16), 0 2px 8px rgba(28,39,67,.08) !important; }

.modal-backdrop {
  background: rgba(28,35,53,.27) !important;
  backdrop-filter: blur(16px) saturate(125%) !important;
}
.modal-panel,
.ui-effects-panel {
  border: 1px solid rgba(255,255,255,.82) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(244,248,252,.72)) !important;
  box-shadow: 0 34px 90px rgba(30,40,66,.23), inset 0 1px 0 white !important;
  backdrop-filter: blur(32px) saturate(160%) !important;
}
.modal-header { border-bottom: 1px solid rgba(105,119,151,.12); }

body.ui-theme-night {
  --tech-ink: #eef4ff;
  --tech-muted: #9aa7bb;
  --tech-glass: rgba(18,25,40,.72);
  background: radial-gradient(circle at var(--ui-pointer-x, 18%) var(--ui-pointer-y, 12%), rgba(238,120,158,.10), transparent 26rem), radial-gradient(circle at 88% 18%, rgba(81,191,208,.12), transparent 30rem), #0d1320 !important;
}
body.ui-theme-night .app-header,
body.ui-theme-night .topbar,
body.ui-theme-night .editor-panel,
body.ui-theme-night .preview-panel,
body.ui-theme-night .modal-panel,
body.ui-theme-night .ui-effects-panel { background: linear-gradient(145deg, rgba(25,34,52,.86), rgba(14,21,35,.72)) !important; border-color: rgba(255,255,255,.09) !important; }

@media (max-width: 900px) {
  .workspace { padding: 8px !important; gap: 9px !important; }
  .editor-panel, .preview-panel { border-radius: 17px !important; }
  body::before { background-size: 26px 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .gsap-ui-ready *, .gsap-ui-ready *::before, .gsap-ui-ready *::after { scroll-behavior: auto !important; }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
* { scrollbar-width: thin; scrollbar-color: #c6cbd6 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: #c6cbd6; background-clip: padding-box; }

html { background: var(--ui-bg); }

body {
  position: relative;
  margin: 0;
  color: var(--ui-text);
  background: radial-gradient(circle at 18% -10%, rgba(99,102,241,.08), transparent 30%), var(--ui-bg);
  font-family: Inter, "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body::before {
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(420px circle at var(--ui-pointer-x) var(--ui-pointer-y), rgba(246, 181, 204, var(--ui-live-glow-a)), transparent 68%),
    radial-gradient(620px circle at 86% -8%, rgba(96, 165, 250, var(--ui-live-glow-b)), transparent 65%);
  content: "";
  transition: opacity var(--ui-live-duration) ease;
}
body.ui-pointer-glow-disabled::before { opacity: 0; }
body.ui-motion-disabled .preview-stage::before { animation: none; }

button, input, select, textarea { font: inherit; }
button, label[for], input[type="range"], input[type="color"], input[type="checkbox"], select { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, label[for]:focus-visible {
  outline: 3px solid rgba(36, 87, 230, .2);
  outline-offset: 2px;
}

.app { position: relative; z-index: 1; min-width: 320px; }

.topbar {
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(225,229,237,.8);
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(18px);
}

.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(145deg, #f3b5ca, #f8cfdd 62%, #fbe4eb);
  box-shadow: 0 8px 20px rgba(224, 133, 163, .24);
}
.brand-mark svg { width: 29px; height: 29px; overflow: visible; }
.brand-mark .sheep-face { fill: #f7c8d8; stroke: #fff; stroke-width: 1.15; stroke-linejoin: round; }
.brand-mark .sheep-wool-fill { fill: #fff; }
.brand-mark .sheep-ear { fill: #fff; stroke: #fff; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.brand-mark .sheep-eye { fill: #e79ab6; }
.brand-mark .sheep-nose { stroke: #e79ab6; stroke-width: 1.2; }
.brand > div:last-child { display: grid; gap: 2px; }
.brand strong { font-size: 15px; letter-spacing: -.01em; }
.brand span { color: var(--ui-muted); font-size: 11px; letter-spacing: .04em; }

.local-status { display: flex; align-items: center; gap: 7px; color: var(--ui-muted); font-size: 12px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #18a566; box-shadow: 0 0 0 4px rgba(24, 165, 102, .11); }
.status-separator { color: #b1b7c1; }

.actionbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  border-bottom: 1px solid rgba(216,221,231,.9);
  background: rgba(249,250,252,.94);
  box-shadow: 0 4px 16px rgba(31,41,55,.035);
}

.action-group { display: inline-flex; min-width: 0; align-items: center; gap: 2px; padding: 3px; border: 1px solid #e3e7ef; border-radius: 10px; background: rgba(255,255,255,.9); box-shadow: 0 2px 7px rgba(31,41,55,.035); }
.actionbar-spacer { flex: 1 1 12px; }

.action-button {
  display: inline-flex;
  min-height: 31px;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  color: #3d4658;
  background: transparent;
  font-size: 11px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, color .15s, box-shadow .15s, transform .15s;
}
.action-button:hover { color: #312e81; background: #f0f1ff; }
.action-button.is-active { color: #8a3f60; background: #fff0f5; box-shadow: inset 0 0 0 1px #f4c4d5; }
.action-button.primary { color: #fff; background: linear-gradient(135deg, #4f46e5, #635bdf); box-shadow: 0 5px 13px rgba(79,70,229,.22); }
.action-button.primary:hover { color: #fff; background: var(--ui-primary-dark); transform: translateY(-1px); }
.action-button.subtle { color: var(--ui-muted); background: transparent; }
.action-button.danger-ghost:hover { color: #b42336; background: #fff1f3; }
.reset-action { min-height: 31px; color: #8a93a4; border: 1px dashed #d9dee7; background: rgba(255,255,255,.55); }
.action-divider { width: 1px; height: 22px; margin: 0 4px; background: var(--ui-border); }
.resume-select { min-width: 135px; max-width: 195px; min-height: 31px; padding: 0 8px; border: 0; border-radius: 7px; color: var(--ui-text); background: #f7f8fb; font-size: 11px; font-weight: 650; }
.toolbar-switch { display: inline-flex; min-height: 31px; align-items: center; gap: 5px; padding: 0 8px; border: 0; border-radius: 7px; color: #4c5567; background: transparent; font-size: 10.5px; font-weight: 650; }
.toolbar-switch:hover { color: #312e81; background: #f0f1ff; }
.toolbar-switch input { accent-color: var(--ui-primary); }

.workspace {
  display: grid;
  grid-template-columns: minmax(410px, 460px) minmax(650px, 1fr);
  min-height: calc(100vh - 125px);
}

.control-panel {
  min-width: 0;
  border-right: 1px solid var(--ui-border);
  background: #f9fafc;
}

.tabs {
  position: sticky;
  top: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin: 0;
  padding: 10px 14px;
  border-bottom: 1px solid var(--ui-border);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(14px);
}
.tabs.tabs-four { grid-template-columns: repeat(4, 1fr); }
.tab {
  position: relative;
  min-height: 36px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  color: var(--ui-muted);
  background: transparent;
  font-size: 11.5px;
  font-weight: 650;
}
.tab:hover { color: #4338ca; background: #f3f4ff; }
.tab::after { display: none; }
.tab.is-active { color: #312e81; background: #eef0ff; box-shadow: inset 0 0 0 1px #d9dcff; }

.tab-panel { padding: 22px; }
.panel-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
.panel-title-row h1 { margin: 0; color: #202637; font-size: 19px; letter-spacing: -.035em; }
.panel-title-row p { margin: 5px 0 0; color: var(--ui-muted); font-size: 12px; line-height: 1.55; }
.meta-pill { flex: 0 0 auto; padding: 5px 9px; border: 1px solid #e3e6ee; border-radius: 999px; color: #687286; background: #fff; font-size: 10px; box-shadow: 0 2px 6px rgba(31,41,55,.04); }

.style-section { margin-bottom: 21px; }
.smart-page-box { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: end; gap: 8px; margin-bottom: 19px; padding: 13px; border: 1px solid #dfe2fb; border-radius: 12px; background: linear-gradient(135deg, #f5f5ff, #fafaff); box-shadow: 0 5px 16px rgba(79,70,229,.05); }
.style-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.style-section-title strong { font-size: 12px; }
.style-section-title span { color: var(--ui-muted); font-size: 10px; }
.recipe-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.recipe-button { display: flex; min-height: 36px; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid #e2e5ed; border-radius: 9px; color: #465064; background: #fff; font-size: 10.5px; text-align: left; box-shadow: 0 2px 6px rgba(31,41,55,.025); }
.recipe-button::before { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #64748b; box-shadow: 0 0 0 3px rgba(100,116,139,.1); content: ""; }
.recipe-button:nth-child(6n + 1)::before { background: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.1); }
.recipe-button:nth-child(6n + 2)::before { background: #0284c7; box-shadow: 0 0 0 3px rgba(2,132,199,.1); }
.recipe-button:nth-child(6n + 3)::before { background: #8b5cf6; box-shadow: 0 0 0 3px rgba(139,92,246,.1); }
.recipe-button:nth-child(6n + 4)::before { background: #0f766e; box-shadow: 0 0 0 3px rgba(15,118,110,.1); }
.recipe-button:nth-child(6n + 5)::before { background: #c2415c; box-shadow: 0 0 0 3px rgba(194,65,92,.1); }
.recipe-button:nth-child(6n)::before { background: #d97706; box-shadow: 0 0 0 3px rgba(217,119,6,.1); }
.recipe-button:hover { transform: translateY(-1px); border-color: #b9bdf9; color: #4338ca; background: #f7f7ff; box-shadow: 0 6px 13px rgba(79,70,229,.08); }
.recipe-button.is-selected { color: #312e81; border-color: #b9bdf9; background: #f0f1ff; box-shadow: 0 0 0 2px rgba(99,102,241,.1); }
.palette-grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 7px; }
.palette-button { display: flex; height: 31px; align-items: center; justify-content: center; gap: 2px; padding: 4px; border: 1px solid #e3e6ed; border-radius: 9px; background: #fff; box-shadow: 0 2px 5px rgba(31,41,55,.025); }
.palette-button:hover, .palette-button.is-selected { border-color: var(--ui-primary); box-shadow: 0 0 0 2px rgba(36,87,230,.11); }
.palette-button i { display: block; width: 7px; height: 18px; border: 1px solid rgba(15,23,42,.1); border-radius: 2px; background: var(--c); }

.code-editor, .css-editor {
  width: 100%;
  min-height: 620px;
  padding: 15px;
  resize: vertical;
  border: 1px solid #dfe3eb;
  border-radius: 12px;
  color: #202a3c;
  background: #fff;
  box-shadow: 0 8px 24px rgba(31,41,55,.055);
  font-family: "Cascadia Code", Consolas, "Microsoft YaHei", monospace;
  font-size: 13px;
  line-height: 1.7;
}
.editor-mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 12px; padding: 4px; border: 1px solid #e6e8ef; border-radius: 10px; background: #f0f2f6; }
.mode-button { min-height: 32px; border: 0; border-radius: 6px; color: var(--ui-muted); background: transparent; font-size: 12px; font-weight: 650; }
.mode-button.is-active { color: #4338ca; background: #fff; box-shadow: 0 3px 10px rgba(30,41,59,.09); }
.content-format-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 9px; padding: 6px; border: 1px solid #dfe3eb; border-radius: 10px; background: #fff; box-shadow: 0 4px 13px rgba(31,41,55,.04); }
.format-select { min-height: 30px; max-width: 112px; padding: 0 7px; border: 0; border-radius: 6px; color: #525c70; background: #f4f5f8; font-size: 9.5px; font-weight: 650; }
.format-select:hover { color: #3730a3; background: #eeeefe; }
.icon-select { max-width: 100px; }
.font-size-select { width: 72px; }
.format-separator { width: 1px; height: 20px; margin: 0 2px; background: #e2e5eb; }
.format-button { display: inline-grid; min-width: 29px; height: 29px; place-items: center; padding: 0 6px; border: 0; border-radius: 6px; color: #596377; background: transparent; font-size: 10px; cursor: pointer; }
.format-button:hover { color: #4338ca; background: #eeeefe; }
.format-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.format-button.clear-format { width: auto; color: #7a8496; }
.format-button.split-format { width: auto; padding: 0 8px; color: #4338ca; background: #f3f2ff; }
.visual-toolbar { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px; border: 1px solid var(--ui-border); border-bottom: 0; border-radius: 9px 9px 0 0; background: #f7f8fa; }
.visual-toolbar button { min-height: 29px; padding: 0 8px; border: 1px solid var(--ui-border); border-radius: 5px; color: #3b4658; background: #fff; font-size: 11px; }
.visual-editor { min-height: 590px; padding: 16px; overflow: auto; border: 1px solid var(--ui-border); border-radius: 12px; color: #202a3c; background: #fff; box-shadow: 0 8px 24px rgba(31,41,55,.055); font-size: 13px; line-height: 1.65; }
.visual-editor h1 { font-size: 25px; }.visual-editor h2 { margin-top: 20px; font-size: 18px; }.visual-editor h3 { margin-top: 14px; font-size: 15px; }
.visual-editor .resume-split-row { width: 100%; margin: 8px 0; border-collapse: collapse; table-layout: auto; outline: 1px dashed #c7cbe0; outline-offset: 3px; }
.visual-editor .resume-split-row td { padding: 4px 2px; border: 0; vertical-align: top; white-space: nowrap; }
.visual-editor .resume-split-row .resume-split-left { width: 1%; padding-right: 14px; }
.visual-editor .resume-split-row .resume-split-right { text-align: right; }
.visual-editor:focus { border-color: #90aaf4; outline: 3px solid rgba(36,87,230,.12); }
.code-editor:focus, .css-editor:focus { border-color: #90aaf4; background: #fff; }
.selection-toolbar { position: fixed; z-index: 180; display: flex; max-width: calc(100vw - 20px); flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px; padding: 5px; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; color: #fff; background: #191c24; box-shadow: 0 10px 30px rgba(15,23,42,.32); transform: translate(-50%, calc(-100% - 10px)); }
.selection-toolbar[hidden] { display: none; }
.selection-tool { display: grid; min-width: 27px; height: 27px; place-items: center; padding: 0 6px; border: 0; border-radius: 5px; color: #f8fafc; background: transparent; font-size: 11px; cursor: pointer; }
.selection-tool:hover { color: #fff; background: rgba(255,255,255,.13); }
.selection-tool.ai-tool { padding: 0 7px; font-weight: 700; }
.selection-select { width: 52px; height: 27px; padding: 0 3px; border: 0; border-radius: 5px; color: #f8fafc; background: #2a2e39; font-size: 10px; }
.selection-color { position: relative; display: grid; width: 27px; height: 27px; place-items: center; border-radius: 5px; cursor: pointer; }
.selection-color::before { width: 13px; height: 3px; border-radius: 2px; background: var(--selection-color, #2563eb); box-shadow: 0 -5px 0 -1px #f8fafc; content: ""; transform: rotate(-42deg); }
.selection-color:hover { background: rgba(255,255,255,.13); }
.selection-color input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.selection-divider { width: 1px; height: 18px; margin: 0 2px; background: rgba(255,255,255,.18); }
.syntax-help { display: flex; flex-wrap: wrap; gap: 7px 11px; margin-top: 10px; padding: 10px 11px; border: 1px dashed #e0e4ec; border-radius: 9px; color: var(--ui-muted); background: rgba(255,255,255,.65); font-size: 10px; }
.syntax-help b { display: inline-grid; min-width: 20px; place-items: center; margin-right: 3px; padding: 1px 4px; border-radius: 4px; color: var(--ui-primary); background: #edf2ff; }

.template-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.template-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 13px; }
.template-card {
  display: grid;
  gap: 9px;
  padding: 9px;
  border: 1px solid var(--ui-border);
  border-radius: 13px;
  color: var(--ui-text);
  background: #fff;
  text-align: left;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.template-card:hover { transform: translateY(-3px); border-color: #bbbff8; box-shadow: 0 13px 27px rgba(42,48,82,.11); }
.template-card.is-selected { border-color: #7770ea; box-shadow: 0 0 0 3px rgba(99,102,241,.12), 0 10px 22px rgba(42,48,82,.08); }
.template-preview {
  position: relative;
  display: block;
  height: 150px;
  overflow: hidden;
  border: 1px solid #e3e7ed;
  border-radius: 8px;
  background: #fff;
}
.template-preview i { position: absolute; display: block; height: 3px; border-radius: 999px; background: #cfd5de; }
.template-preview .mini-name { top: 19px; left: 15px; width: 44%; height: 7px; background: #263244; }
.template-preview .mini-contact { top: 31px; left: 15px; width: 62%; height: 2px; }
.template-preview .mini-title { top: 50px; left: 15px; width: 29%; height: 5px; }
.template-preview .mini-title.second { top: 98px; }
.template-preview .mini-line { top: 66px; left: 15px; width: 66%; }
.template-preview .mini-line.wide { top: 60px; width: calc(100% - 30px); }
.template-preview .mini-line.short { top: 115px; width: 52%; }
.template-preview .mini-title.second + .mini-line.wide { top: 108px; }
.preview-atlas { border-top: 7px solid #2563eb; }
.preview-atlas .mini-title { background: #2563eb; }
.preview-mono .mini-name { font-family: monospace; background: #111827; }
.preview-mono .mini-title { left: 0; width: 100%; height: 1px; border-radius: 0; background: #111827; }
.preview-nordic { border-left: 7px solid #0f766e; }
.preview-nordic .mini-title { background: #0f766e; }
.preview-editorial .mini-name { left: 28%; width: 44%; background: #352c42; }
.preview-editorial .mini-contact { left: 24%; width: 52%; }
.preview-editorial .mini-title { left: 15px; width: calc(100% - 30px); height: 1px; border-radius: 0; background: #7c3aed; }
.preview-coral::before { content: ""; position: absolute; top: 0; right: 0; width: 42px; height: 42px; background: #e4573d; clip-path: polygon(100% 0, 100% 100%, 0 0); }
.preview-coral .mini-title { background: #e4573d; }
.preview-executive { border-top: 27px solid #17365d; }
.preview-executive .mini-name { top: 14px; left: 15px; background: #fff; }
.preview-executive .mini-contact { top: 43px; }
.preview-executive .mini-title { top: 61px; background: #17365d; }
.preview-executive .mini-title.second { top: 105px; }
.preview-executive .mini-line.wide { top: 72px; }
.preview-executive .mini-line.short { top: 121px; }
.preview-executive .mini-title.second + .mini-line.wide { top: 115px; }
.preview-indigo { border-top: 30px solid #4f46e5; }
.preview-indigo .mini-name { top: 12px; background: #fff; }
.preview-indigo .mini-contact { top: 38px; }
.preview-indigo .mini-title { top: 57px; background: #4f46e5; }
.preview-indigo .mini-line.wide { top: 68px; }
.preview-indigo .mini-title.second { top: 104px; }
.preview-indigo .mini-title.second + .mini-line.wide { top: 114px; }
.preview-timeline::before { content: ""; position: absolute; top: 50px; bottom: 14px; left: 20px; width: 2px; background: #0f4c5c; }
.preview-timeline .mini-title, .preview-timeline .mini-line { left: 30px; }
.preview-timeline .mini-title { background: #0f4c5c; }
.preview-grid .mini-title { left: 15px; width: 25%; height: 36px; border-radius: 2px; background: #2f6f55; }
.preview-grid .mini-title.second { top: 98px; }
.preview-grid .mini-line { left: 48%; }
.preview-grid .mini-line.wide { left: 48%; width: 43%; }
.preview-blueprint { background-color: #f8fbff; background-image: linear-gradient(rgba(29,78,216,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(29,78,216,.09) 1px, transparent 1px); background-size: 12px 12px; }
.preview-blueprint .mini-title { background: #1d4ed8; }
.preview-lavender { border-radius: 13px 13px 5px 5px; }
.preview-lavender::before { content: ""; position: absolute; inset: 9px 9px auto; height: 32px; border-radius: 8px; background: #ede9fe; }
.preview-lavender .mini-title { background: #8b5cf6; }
.preview-classic .mini-name { left: 25%; width: 50%; background: #4b2323; }
.preview-classic .mini-contact { left: 27%; width: 46%; }
.preview-classic .mini-title { left: 15px; width: calc(100% - 30px); height: 1px; border-radius: 0; background: #7a2e2e; }
.preview-mint { border-bottom: 7px solid #059669; }
.preview-mint .mini-title { width: 34%; height: 7px; border-radius: 999px; background: #a7f3d0; }
.preview-signal { border: 7px solid #111827; }
.preview-signal::before { content: ""; position: absolute; top: 0; right: 0; width: 55px; height: 18px; background: #d6a800; }
.preview-signal .mini-title { background: #d6a800; }
.preview-precision { border-top: 2px solid #2563eb; }
.preview-precision::before { content: ""; position: absolute; top: 12px; right: 14px; width: 25px; height: 25px; border: 5px solid #2563eb; border-left-color: transparent; border-bottom-color: transparent; }
.preview-precision .mini-title { width: 38%; height: 2px; background: #2563eb; }
.preview-banner::before { content: ""; position: absolute; inset: 0 0 auto; height: 43px; background: #e9edf4; }
.preview-banner::after { content: ""; position: absolute; top: 0; right: 0; width: 42px; height: 43px; background: #5b6f91; clip-path: polygon(55% 0,100% 0,100% 100%,0 100%); }
.preview-banner .mini-name { top: 14px; }.preview-banner .mini-contact { top: 29px; }.preview-banner .mini-title { background: #5b6f91; }
.preview-swiss { border: 6px solid #fff; box-shadow: inset 0 0 0 1px #e5e7eb; }
.preview-swiss::before { content: ""; position: absolute; top: 0; left: 0; width: 48px; height: 8px; background: #e11d48; }
.preview-swiss .mini-name { top: 24px; width: 58%; height: 10px; background: #111827; }
.preview-swiss .mini-title { width: 42%; height: 2px; background: #e11d48; }
.preview-ledger { background: #fffdf8; }
.preview-ledger::before { content: ""; position: absolute; inset: 10px; border: 1px solid #b9a990; }
.preview-ledger .mini-name { left: 25%; width: 50%; background: #5e4a36; }
.preview-ledger .mini-contact { left: 26%; width: 48%; }
.preview-ledger .mini-title { left: 15px; width: calc(100% - 30px); height: 1px; background: #8b6f47; }
.preview-aurora::before { content: ""; position: absolute; inset: 8px 8px auto; height: 40px; border-radius: 10px; background: linear-gradient(135deg,#ede9fe,#fce7f3); }
.preview-aurora::after { content: ""; position: absolute; top: 17px; right: 18px; width: 25px; height: 25px; border-radius: 50%; background: rgba(124,58,237,.18); box-shadow: -15px 8px 0 rgba(219,39,119,.14); }
.preview-aurora .mini-title { border-radius: 999px; background: #7c3aed; }
.preview-slate { border-left: 12px solid #475569; }
.preview-slate::before { content: ""; position: absolute; top: 0; right: 0; width: 42px; height: 28px; background: #e2e8f0; }
.preview-slate .mini-title { width: 34%; background: #475569; }
.template-info { display: grid; gap: 2px; padding: 0 2px 2px; }
.template-info strong { font-size: 13px; }
.template-info small { color: var(--ui-muted); font-size: 10px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.field { display: grid; gap: 6px; color: #4a5365; font-size: 11px; font-weight: 650; }
.field select, .field input[type="color"] { width: 100%; min-height: 39px; border: 1px solid #dfe3eb; border-radius: 9px; color: var(--ui-text); background: #fff; }
.field select { padding: 0 10px; }
.color-field-third input { padding: 4px; }

.sliders { display: grid; gap: 18px; margin-top: 18px; padding: 17px; border: 1px solid #e4e7ee; border-radius: 13px; background: #fff; box-shadow: 0 7px 20px rgba(31,41,55,.04); }
.slider-field { display: grid; gap: 7px; color: #3c4657; font-size: 12px; }
.slider-field span { display: flex; justify-content: space-between; }
.slider-field strong { color: var(--ui-primary); }
.slider-field input { width: 100%; accent-color: var(--ui-primary); }

.toggle-list { display: grid; gap: 8px; margin-top: 18px; border: 0; border-radius: 0; background: transparent; overflow: visible; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 13px; border: 1px solid #e3e6ed; border-radius: 10px; background: #fff; box-shadow: 0 3px 9px rgba(31,41,55,.025); }
.toggle-row span { display: grid; gap: 3px; }
.toggle-row strong { font-size: 12px; }
.toggle-row small { color: var(--ui-muted); font-size: 10px; }
.toggle-row input { width: 36px; height: 19px; accent-color: var(--ui-primary); }
.photo-settings { margin-top: 14px; padding: 15px; border: 1px solid #e1e5ed; border-radius: 13px; background: #fff; box-shadow: 0 8px 22px rgba(31,41,55,.045); }
.photo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 13px; }
.photo-actions > span { color: var(--ui-muted); font-size: 10px; }
.mini-button { display: inline-flex; min-height: 32px; align-items: center; padding: 0 10px; border: 1px solid #dfe3eb; border-radius: 8px; color: #465064; background: #fff; font-size: 10.5px; font-weight: 650; transition: border-color .15s, background .15s, color .15s, transform .15s; }
.mini-button:hover { border-color: #bbbff8; color: #4338ca; background: #f7f7ff; }
.mini-button.primary { color: #fff; border-color: var(--ui-primary); background: linear-gradient(135deg, #4f46e5, #635bdf); box-shadow: 0 5px 12px rgba(79,70,229,.16); }
.mini-button.subtle { color: var(--ui-muted); background: transparent; }
.mini-button:disabled { cursor: not-allowed; opacity: .45; }
.photo-form-grid { margin-bottom: 13px; }
.photo-sliders { margin-top: 0; padding: 13px; }
.advanced-box { margin-top: 17px; color: var(--ui-muted); font-size: 12px; }
.advanced-box summary { cursor: pointer; font-weight: 650; }
.css-editor { min-height: 180px; margin-top: 10px; font-size: 12px; }

.preview-panel { position: sticky; top: 0; align-self: start; display: flex; min-width: 0; height: 100vh; flex-direction: column; overflow: hidden; background: #e8eaf1; }
.preview-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  padding: 9px 18px;
  border-bottom: 1px solid rgba(210,215,226,.9);
  background: rgba(255,255,255,.88);
  box-shadow: 0 4px 16px rgba(31,41,55,.04);
  backdrop-filter: blur(16px);
}
.preview-heading { display: flex; align-items: baseline; gap: 9px; }
.preview-heading strong { font-size: 13px; }
.preview-heading span { color: var(--ui-muted); font-size: 11px; }
.preview-heading .warning { color: #b45309; }
.zoom-control { display: flex; align-items: center; gap: 8px; color: var(--ui-muted); font-size: 11px; }
.zoom-control input { width: 105px; accent-color: var(--ui-primary); }
.zoom-control strong { min-width: 32px; color: #344054; }

.preview-stage { flex: 1 1 auto; min-height: 0; padding: 28px 32px 72px; overflow: auto; background-image: radial-gradient(circle at 1px 1px, rgba(91,99,125,.13) 1px, transparent 0); background-size: 22px 22px; }
.pages-canvas {
  --resume-accent: #2563eb;
  --resume-text: #242a34;
  --resume-page-bg: #ffffff;
  --resume-font-size: 10.5pt;
  --resume-name-size: 25pt;
  --resume-heading-size: 12.5pt;
  --resume-line-height: 1.5;
  --resume-margin: 14mm;
  --resume-section-gap: 13px;
  --resume-paragraph-gap: 7px;
  display: grid;
  gap: 34px;
  width: max-content;
  margin: 0 auto;
  zoom: .75;
}
.page-wrap { display: grid; gap: 8px; }
.page-label { width: max-content; margin: 0 auto; padding: 3px 8px; border: 1px solid rgba(205,210,222,.9); border-radius: 999px; color: #777f90; background: rgba(255,255,255,.8); font-size: 10px; text-align: center; backdrop-filter: blur(8px); }
.resume-page {
  position: relative;
  width: 210mm;
  height: 297mm;
  padding: var(--resume-margin);
  overflow: hidden;
  color: var(--resume-text);
  background: var(--resume-page-bg);
  box-shadow: 0 26px 65px rgba(34, 42, 72, .20), 0 2px 8px rgba(34,42,72,.09);
  font-family: Arial, "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: var(--resume-font-size);
  line-height: var(--resume-line-height);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.resume-page.page-letter { width: 215.9mm; height: 279.4mm; }
.resume-page-content { height: 100%; overflow: hidden; }
.resume-page-number { position: absolute; right: 8mm; bottom: 5mm; color: #8a929f; font-size: 8.5pt; }
.pages-canvas.hide-page-numbers .resume-page-number { display: none; }
.resume-page.has-overflow::after { content: "内容溢出"; position: absolute; right: 2mm; bottom: 2mm; padding: 2px 5px; color: #fff; background: #dc2626; font-size: 8pt; }

.resume-page h1, .resume-page h2, .resume-page h3, .resume-page p, .resume-page ul, .resume-page ol, .resume-page blockquote { margin-top: 0; }
.resume-page h1 { margin-bottom: 6px; color: var(--resume-text); font-size: var(--resume-name-size); line-height: 1.08; letter-spacing: -.04em; }
.resume-page h2 { margin-bottom: 8px; color: var(--resume-accent); font-size: var(--resume-heading-size); line-height: 1.25; break-after: avoid; }
.resume-page h3 { margin-bottom: 3px; color: var(--resume-text); font-size: 10.8pt; line-height: 1.35; break-after: avoid; }
.resume-page p { margin-bottom: var(--resume-paragraph-gap); }
.resume-page ul, .resume-page ol { margin-bottom: calc(var(--resume-paragraph-gap) + 1px); padding-left: 1.35em; }
.resume-page li { margin-bottom: 3px; }
.resume-page a { color: inherit; text-decoration: none; }
.resume-page code { display: inline-block; margin: 1px 2px 1px 0; padding: 1px 5px; border-radius: 3px; color: var(--resume-accent); background: color-mix(in srgb, var(--resume-accent) 9%, white); font-family: inherit; font-size: .91em; }
.resume-page blockquote { margin-bottom: 8px; padding-left: 10px; color: color-mix(in srgb, var(--resume-text) 76%, var(--resume-page-bg)); border-left: 3px solid var(--resume-accent); }
.resume-page blockquote p { margin-bottom: 0; }
.resume-split-row { width: 100%; margin: 0 0 var(--resume-paragraph-gap); border: 0; border-collapse: collapse; table-layout: auto; color: inherit; font: inherit; }
.resume-split-row td { padding: 0; border: 0; vertical-align: top; white-space: nowrap; }
.resume-split-row .resume-split-left { width: 1%; padding-right: 12px; text-align: left; }
.resume-split-row .resume-split-right { padding-left: 8px; text-align: right; }
.resume-header { position: relative; margin-bottom: calc(var(--resume-section-gap) + 2px); }
.resume-header.has-photo { min-height: calc(var(--photo-size) * 1.25 + 2mm); }
.photo-position-right .resume-header.has-photo { padding-right: calc(var(--photo-size) + 7mm); }
.photo-position-left .resume-header.has-photo { padding-left: calc(var(--photo-size) + 7mm); }
.photo-position-center .resume-header.has-photo { padding-top: calc(var(--photo-size) * 1.25 + 4mm); text-align: center; }
.photo-box { position: absolute; z-index: 2; top: var(--photo-y); left: var(--photo-x); width: var(--photo-size); height: calc(var(--photo-size) * 1.25); overflow: hidden; border: 1px solid color-mix(in srgb, var(--resume-accent) 35%, #9ea6b2); background: color-mix(in srgb, var(--resume-accent) 5%, var(--resume-page-bg)); cursor: grab; touch-action: none; user-select: none; }
.photo-box:active { cursor: grabbing; }
.photo-dragging .resume-header::before, .photo-dragging .resume-header::after { content: ""; position: absolute; z-index: 1; pointer-events: none; background: color-mix(in srgb, var(--resume-accent) 58%, transparent); }
.photo-dragging .resume-header::before { top: 50%; right: 0; left: 0; height: 1px; }
.photo-dragging .resume-header::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.photo-box.photo-rounded { border-radius: 4mm; }
.photo-box.photo-circle { height: var(--photo-size); border-radius: 50%; }
.photo-box img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.photo-box img { object-position: var(--photo-crop-x) var(--photo-crop-y); transform: scale(var(--photo-zoom)) rotate(var(--photo-rotate)); }
.photo-placeholder { display: grid; width: 100%; height: 100%; place-items: center; color: color-mix(in srgb, var(--resume-text) 45%, var(--resume-page-bg)); font-size: 8.5pt; pointer-events: none; }
.resume-section { margin-bottom: var(--resume-section-gap); }
.resume-section:last-child { margin-bottom: 0; }
.continued-heading::after { content: " 续"; color: #9aa1ab; font-size: .72em; font-weight: 400; }
.pages-canvas.compact-list li { margin-bottom: 0; }
.pages-canvas.font-yahei .resume-page { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; }
.pages-canvas.font-songti .resume-page { font-family: SimSun, "Songti SC", serif; }
.pages-canvas.font-kaiti .resume-page { font-family: KaiTi, "Kaiti SC", serif; }

/* Atlas */
.template-atlas .resume-page { border-top: 4mm solid var(--resume-accent); }
.template-atlas .resume-header { padding-bottom: 9px; border-bottom: 1px solid #cbd4e0; }
.template-atlas h2 { padding-left: 8px; border-left: 3px solid var(--resume-accent); }

/* Mono */
.template-mono .resume-page { color: #111827; }
.template-mono h1 { font-family: "Cascadia Code", Consolas, "Microsoft YaHei", monospace; font-size: 22pt; letter-spacing: -.05em; }
.template-mono h2 { padding: 4px 0; color: #111827; border-top: 1px solid #111827; border-bottom: 1px solid #d1d5db; font-family: "Cascadia Code", Consolas, monospace; font-size: 11pt; letter-spacing: .08em; text-transform: uppercase; }
.template-mono blockquote { border-left-color: #111827; }
.template-mono code { color: #111827; background: #f1f3f5; }

/* Nordic */
.template-nordic .resume-page { border-left: 5mm solid var(--resume-accent); }
.template-nordic h1 { font-weight: 500; letter-spacing: -.02em; }
.template-nordic h2 { padding-bottom: 4px; color: #1f2937; border-bottom: 2px solid var(--resume-accent); font-size: 11.5pt; letter-spacing: .1em; }
.template-nordic blockquote { border-left: 0; padding-left: 0; color: var(--resume-accent); }

/* Editorial */
.template-editorial .resume-header { padding-bottom: 10px; text-align: center; border-bottom: 1px solid #b9bdc5; }
.template-editorial h1 { font-family: Georgia, "Songti SC", SimSun, serif; font-size: 27pt; font-weight: 400; letter-spacing: -.02em; }
.template-editorial h2 { padding: 5px 0; color: #25202b; border-top: 2px solid var(--resume-accent); border-bottom: 1px solid #d2d4d8; font-family: Georgia, "Songti SC", SimSun, serif; letter-spacing: .07em; }
.template-editorial blockquote { padding-left: 0; border-left: 0; }

/* Coral */
.template-coral .resume-page::before { content: ""; position: absolute; top: 0; right: 0; width: 36mm; height: 36mm; background: var(--resume-accent); clip-path: polygon(100% 0, 100% 100%, 0 0); }
.template-coral .resume-header { padding-bottom: 10px; }
.template-coral h2 { display: inline-block; margin-bottom: 9px; padding: 3px 9px; border-radius: 999px; color: #fff; background: var(--resume-accent); font-size: 10.5pt; letter-spacing: .04em; }
.template-coral blockquote { border-left-color: var(--resume-accent); }

/* Executive */
.template-executive .resume-page { padding-top: calc(var(--resume-margin) + 17mm); }
.template-executive .resume-page::before { content: ""; position: absolute; inset: 0 0 auto; height: 17mm; background: var(--resume-accent); }
.template-executive h1 { color: var(--resume-accent); }
.template-executive h2 { padding-bottom: 4px; color: var(--resume-accent); border-bottom: 1px solid var(--resume-accent); font-family: Georgia, "Songti SC", SimSun, serif; }

/* Indigo */
.template-indigo .resume-header { margin: calc(-1 * var(--resume-margin)) calc(-1 * var(--resume-margin)) calc(var(--resume-section-gap) + 3px); padding: 10mm var(--resume-margin) 8mm; color: #fff; background: var(--resume-accent); }
.template-indigo .resume-header h1, .template-indigo .resume-header a, .template-indigo .resume-header blockquote { color: #fff; }
.template-indigo .resume-header blockquote { border-left-color: rgba(255,255,255,.65); }
.template-indigo h2 { padding-bottom: 5px; border-bottom: 2px solid var(--resume-accent); }

/* Timeline */
.template-timeline h2 { padding-bottom: 4px; color: var(--resume-text); border-bottom: 2px solid var(--resume-accent); }
.template-timeline h3 { position: relative; margin-left: 11px; padding-left: 12px; border-left: 2px solid color-mix(in srgb, var(--resume-accent) 52%, white); }
.template-timeline h3::before { content: ""; position: absolute; top: .35em; left: -5px; width: 8px; height: 8px; border: 2px solid var(--resume-page-bg); border-radius: 50%; background: var(--resume-accent); }

/* Grid */
.template-grid .resume-section { display: grid; grid-template-columns: 30mm minmax(0,1fr); column-gap: 7mm; }
.template-grid .resume-section h2 { grid-column: 1; grid-row: 1 / span 99; align-self: start; margin: 0; padding: 6px 8px; color: #fff; background: var(--resume-accent); font-size: calc(var(--resume-heading-size) - 1pt); }
.template-grid .resume-section > :not(h2) { grid-column: 2; }
.template-grid .resume-header { padding-bottom: 9px; border-bottom: 1px solid #cfd5dd; }

/* Blueprint */
.template-blueprint .resume-page { background-color: var(--resume-page-bg); background-image: linear-gradient(color-mix(in srgb, var(--resume-accent) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--resume-accent) 7%, transparent) 1px, transparent 1px); background-size: 7mm 7mm; }
.template-blueprint h1 { font-family: "Cascadia Code", Consolas, "Microsoft YaHei", monospace; }
.template-blueprint h2 { padding: 4px 7px; color: #fff; background: var(--resume-accent); font-family: "Cascadia Code", Consolas, monospace; letter-spacing: .05em; }
.template-blueprint h3 { color: var(--resume-accent); font-family: "Cascadia Code", Consolas, monospace; }

/* Lavender */
.template-lavender .resume-header { padding: 7mm; border-radius: 5mm; background: color-mix(in srgb, var(--resume-accent) 10%, var(--resume-page-bg)); }
.template-lavender h2 { padding: 4px 9px; border-radius: 8px; color: var(--resume-accent); background: color-mix(in srgb, var(--resume-accent) 10%, var(--resume-page-bg)); }
.template-lavender code { border-radius: 999px; }

/* Classic */
.template-classic .resume-page { font-family: Georgia, "Songti SC", SimSun, serif; }
.template-classic .resume-header { text-align: center; }
.template-classic h1 { font-family: Georgia, "Songti SC", SimSun, serif; font-weight: 400; letter-spacing: .02em; }
.template-classic h2 { padding: 5px 0; color: var(--resume-text); border-top: 1px solid var(--resume-accent); border-bottom: 1px solid var(--resume-accent); text-align: center; letter-spacing: .12em; }
.template-classic blockquote { border-left: 0; }

/* Mint */
.template-mint .resume-page { border-bottom: 4mm solid var(--resume-accent); }
.template-mint .resume-header { padding-bottom: 9px; border-bottom: 1px dashed color-mix(in srgb, var(--resume-accent) 55%, #cbd5e1); }
.template-mint h2 { display: inline-block; padding: 4px 11px; border-radius: 999px; color: color-mix(in srgb, var(--resume-accent) 75%, #0f172a); background: color-mix(in srgb, var(--resume-accent) 14%, var(--resume-page-bg)); }

/* Signal */
.template-signal .resume-page { border: 3mm solid #111827; }
.template-signal .resume-header { padding: 7mm; color: #fff; background: #111827; }
.template-signal .resume-header h1, .template-signal .resume-header a, .template-signal .resume-header blockquote { color: #fff; }
.template-signal .resume-header blockquote { border-left-color: var(--resume-accent); }
.template-signal h2 { display: inline-block; padding: 3px 8px; color: #111827; background: var(--resume-accent); font-family: "Cascadia Code", Consolas, "Microsoft YaHei", monospace; }

.template-precision .resume-page { border-top: 1.5mm solid var(--resume-accent); }
.template-precision .resume-page::before { content: ""; position: absolute; top: 7mm; right: 7mm; width: 10mm; height: 10mm; border: 1.4mm solid var(--resume-accent); border-bottom-color: transparent; border-left-color: transparent; }
.template-precision .resume-header { padding-bottom: 10px; border-bottom: 1px solid color-mix(in srgb, var(--resume-accent) 32%, #cbd5e1); }
.template-precision h1 { letter-spacing: -.055em; }
.template-precision h2 { padding-bottom: 4px; border-bottom: 2px solid var(--resume-accent); letter-spacing: .06em; }

.template-banner .resume-header { position: relative; margin: calc(-1 * var(--resume-margin)) calc(-1 * var(--resume-margin)) calc(var(--resume-section-gap) + 4px); padding: calc(var(--resume-margin) + 7mm) var(--resume-margin) 7mm; overflow: hidden; background: color-mix(in srgb, var(--resume-accent) 10%, var(--resume-page-bg)); }
.template-banner .resume-header::after { content: ""; position: absolute; top: 0; right: 0; width: 40mm; height: 100%; background: var(--resume-accent); clip-path: polygon(48% 0,100% 0,100% 100%,0 100%); opacity: .92; }
.template-banner .resume-header > * { position: relative; z-index: 1; max-width: 78%; }
.template-banner h2 { padding-left: 9px; border-left: 4px solid var(--resume-accent); color: var(--resume-text); }

.template-swiss .resume-page { border-top: 3mm solid var(--resume-accent); }
.template-swiss .resume-header { padding: 4mm 0 8mm; }
.template-swiss h1 { max-width: 80%; font-size: calc(var(--resume-name-size) + 4pt); font-weight: 700; letter-spacing: -.065em; }
.template-swiss blockquote { max-width: 72%; padding-left: 0; border-left: 0; color: var(--resume-text); }
.template-swiss h2 { display: flex; align-items: center; gap: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--resume-text); color: var(--resume-text); font-size: calc(var(--resume-heading-size) - .5pt); text-transform: uppercase; letter-spacing: .13em; }
.template-swiss h2::before { width: 7px; height: 7px; flex: 0 0 auto; background: var(--resume-accent); content: ""; }

.template-ledger .resume-page { outline: 1px solid color-mix(in srgb, var(--resume-accent) 42%, var(--resume-page-bg)); outline-offset: -6mm; font-family: Georgia, "Songti SC", SimSun, serif; }
.template-ledger .resume-header { padding: 2mm 4mm 8mm; text-align: center; border-bottom: 3px double var(--resume-accent); }
.template-ledger h1 { font-family: Georgia, "Songti SC", SimSun, serif; font-weight: 400; letter-spacing: .04em; }
.template-ledger h2 { padding: 5px 0; color: var(--resume-text); border-top: 1px solid var(--resume-accent); border-bottom: 1px solid var(--resume-accent); text-align: center; letter-spacing: .12em; }
.template-ledger blockquote { padding-left: 0; border-left: 0; }

.template-aurora .resume-header { position: relative; padding: 8mm; overflow: hidden; border-radius: 6mm; background: linear-gradient(135deg, color-mix(in srgb, var(--resume-accent) 14%, var(--resume-page-bg)), color-mix(in srgb, #db2777 8%, var(--resume-page-bg))); }
.template-aurora .resume-header::after { content: ""; position: absolute; top: -14mm; right: -8mm; width: 35mm; height: 35mm; border-radius: 50%; background: color-mix(in srgb, var(--resume-accent) 16%, transparent); box-shadow: -22mm 16mm 0 color-mix(in srgb, #db2777 10%, transparent); }
.template-aurora .resume-header > * { position: relative; z-index: 1; }
.template-aurora h2 { display: inline-block; padding: 4px 11px; border-radius: 999px; color: var(--resume-accent); background: color-mix(in srgb, var(--resume-accent) 11%, var(--resume-page-bg)); }
.template-aurora code { border-radius: 999px; }

.template-slate .resume-page { border-left: 5mm solid var(--resume-accent); }
.template-slate .resume-header { padding-bottom: 10px; border-bottom: 1px solid #cbd5e1; }
.template-slate h1 { color: color-mix(in srgb, var(--resume-accent) 78%, var(--resume-text)); }
.template-slate h2 { padding: 4px 8px; color: #fff; background: var(--resume-accent); letter-spacing: .05em; }
.template-slate h3 { color: color-mix(in srgb, var(--resume-accent) 80%, var(--resume-text)); }

/* Composable style overrides */
.heading-font-sans h1, .heading-font-sans h2, .heading-font-sans h3 { font-family: Arial, "Microsoft YaHei", sans-serif !important; }
.heading-font-serif h1, .heading-font-serif h2, .heading-font-serif h3 { font-family: Georgia, "Songti SC", SimSun, serif !important; }
.heading-font-mono h1, .heading-font-mono h2, .heading-font-mono h3 { font-family: "Cascadia Code", Consolas, "Microsoft YaHei", monospace !important; }

.heading-style-line h2 { display: block !important; padding: 5px 0 !important; border: 0 !important; border-top: 1px solid var(--resume-accent) !important; border-bottom: 1px solid var(--resume-accent) !important; border-radius: 0 !important; color: var(--resume-text) !important; background: transparent !important; }
.heading-style-bar h2 { display: block !important; padding: 1px 0 1px 8px !important; border: 0 !important; border-left: 4px solid var(--resume-accent) !important; border-radius: 0 !important; color: var(--resume-accent) !important; background: transparent !important; }
.heading-style-pill h2 { display: inline-block !important; padding: 3px 10px !important; border: 0 !important; border-radius: 999px !important; color: #fff !important; background: var(--resume-accent) !important; }
.heading-style-block h2 { display: block !important; padding: 5px 9px !important; border: 0 !important; border-radius: 0 !important; color: #fff !important; background: var(--resume-accent) !important; }
.heading-style-minimal h2 { display: block !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; color: var(--resume-text) !important; background: transparent !important; }
.heading-style-accent h2 { display: block !important; padding: 0 0 5px !important; border: 0 !important; border-bottom: 3px solid var(--resume-accent) !important; border-radius: 0 !important; color: var(--resume-accent) !important; background: transparent !important; }
.heading-style-ribbon h2 { display: inline-block !important; padding: 4px 14px 4px 9px !important; border: 0 !important; border-radius: 0 999px 999px 0 !important; color: #fff !important; background: var(--resume-accent) !important; }
.heading-style-double h2 { display: block !important; padding: 5px 0 !important; border: 0 !important; border-top: 3px double var(--resume-accent) !important; border-bottom: 3px double var(--resume-accent) !important; border-radius: 0 !important; color: var(--resume-text) !important; background: transparent !important; }
.heading-style-softbox h2 { display: block !important; padding: 5px 9px !important; border: 0 !important; border-radius: 7px !important; color: var(--resume-accent) !important; background: color-mix(in srgb, var(--resume-accent) 11%, var(--resume-page-bg)) !important; }
.heading-color-custom .resume-page h2 { color: var(--resume-heading-color) !important; }

.header-align-left .resume-header { margin: 0 0 calc(var(--resume-section-gap) + 2px) !important; padding: 0 !important; text-align: left !important; border-radius: 0 !important; background: transparent !important; color: var(--resume-text) !important; }
.header-align-left .resume-header h1, .header-align-left .resume-header a, .header-align-left .resume-header blockquote { color: inherit !important; }
.header-align-center .resume-header { margin: 0 0 calc(var(--resume-section-gap) + 2px) !important; padding: 0 !important; text-align: center !important; border-radius: 0 !important; background: transparent !important; color: var(--resume-text) !important; }
.header-align-center .resume-header h1, .header-align-center .resume-header a, .header-align-center .resume-header blockquote { color: inherit !important; }
.header-align-boxed .resume-header { margin: 0 0 calc(var(--resume-section-gap) + 2px) !important; padding: 7mm !important; border: 0 !important; border-radius: 4mm !important; color: var(--resume-text) !important; background: color-mix(in srgb, var(--resume-accent) 11%, var(--resume-page-bg)) !important; }
.header-align-boxed .resume-header h1, .header-align-boxed .resume-header a, .header-align-boxed .resume-header blockquote { color: inherit !important; }

.numbered-sections .resume-section h2::before { content: attr(data-section-number) " / "; opacity: .65; font-size: .78em; }
.diy-enabled .resume-section { position: relative; outline: 1px dashed color-mix(in srgb, var(--resume-accent) 45%, transparent); outline-offset: 3px; cursor: grab; }
.diy-enabled .resume-section:hover { outline: 2px solid var(--resume-accent); }
.diy-enabled .resume-section::after { content: "拖动模块"; position: absolute; top: -15px; right: 0; padding: 1px 5px; color: #fff; background: var(--resume-accent); font-size: 7.5pt; opacity: 0; }
.diy-enabled .resume-section:hover::after { opacity: 1; }
.diy-enabled .resume-section.is-dragging { opacity: .35; }
.diy-enabled .resume-section h3[data-entry-index] { cursor: grab; }
.diy-enabled .resume-section h3[data-entry-index]:hover { text-decoration: underline; text-decoration-color: var(--resume-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.dark-page .resume-page-number { color: color-mix(in srgb, var(--resume-text) 55%, var(--resume-page-bg)); }
.dark-page .template-mono h2 { color: var(--resume-text); border-top-color: var(--resume-text); border-bottom-color: color-mix(in srgb, var(--resume-text) 30%, var(--resume-page-bg)); }
.dark-page .template-mono code { color: var(--resume-text); background: color-mix(in srgb, var(--resume-text) 10%, var(--resume-page-bg)); }

.toast { position: fixed; right: 20px; bottom: 20px; z-index: 30; max-width: min(360px, calc(100vw - 40px)); padding: 11px 15px; border: 1px solid rgba(255,255,255,.12); border-radius: 11px; color: #fff; background: rgba(25,30,49,.94); box-shadow: 0 18px 42px rgba(15,23,42,.25); opacity: 0; transform: translateY(8px); pointer-events: none; transition: .18s; font-size: 11px; backdrop-filter: blur(14px); }
.toast.is-visible { opacity: 1; transform: translateY(0); }
.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: none; place-items: center; padding: 18px; background: rgba(15,23,42,.46); }
.modal-backdrop.is-open { display: grid; }
.template-card.is-filtered-out { display: none !important; }
.modal-panel { width: min(560px, 100%); max-height: 82vh; padding: 20px; overflow: auto; border: 1px solid rgba(255,255,255,.6); border-radius: 17px; background: #fff; box-shadow: 0 28px 80px rgba(15,23,42,.3); }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
.modal-header h2 { margin: 0; font-size: 18px; }.modal-header p { margin: 4px 0 0; color: var(--ui-muted); font-size: 11px; }
.modal-header .mini-button { flex: 0 0 auto; white-space: nowrap; }
.version-list { display: grid; gap: 7px; margin-top: 13px; }
.version-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; border: 1px solid var(--ui-border); border-radius: 8px; }
.version-row span { display: grid; gap: 2px; font-size: 12px; }.version-row small { color: var(--ui-muted); font-size: 10px; }
.version-actions { display: flex; gap: 6px; }
.text-import-modal { width: min(660px, 100%); }
.text-import-modal textarea { min-height: 230px; resize: vertical; }
.text-import-options { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 12px; margin-top: 12px; }
.import-append-check { display: flex; min-height: 38px; align-items: center; gap: 7px; padding: 0 8px; color: #4c5566; font-size: 11px; }
.text-import-guide { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; margin-top: 12px; padding: 11px 12px; border: 1px solid #e2e5ed; border-radius: 10px; color: #626c7e; background: #f7f8fb; font-size: 11px; }
.text-import-guide strong { color: #31394a; }
.text-import-guide .mini-button { margin-left: auto; }
.text-import-status { min-height: 18px; margin-top: 9px; color: #667085; font-size: 11px; }
.text-import-status.is-error { color: #c24141; }
.text-import-status.is-success { color: #16825d; }
.text-import-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

.ui-effects-panel {
  position: fixed;
  z-index: 70;
  top: 118px;
  right: 18px;
  width: min(320px, calc(100vw - 24px));
  padding: 15px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: calc(var(--ui-live-radius) + 4px);
  background: rgba(255,255,255,.88);
  box-shadow: 0 26px 70px rgba(31,41,68,.22);
  backdrop-filter: blur(22px) saturate(1.15);
  animation: uiPopoverIn var(--ui-live-duration) cubic-bezier(.2,.8,.2,1);
}
.ui-effects-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.ui-effects-heading > div { display: grid; gap: 3px; }
.ui-effects-heading strong { font-size: 14px; }
.ui-effects-heading span { color: var(--ui-muted); font-size: 10px; }
.ui-effect-control { display: grid; gap: 6px; margin-top: 11px; color: #4b5567; font-size: 11px; }
.ui-effect-control span { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ui-effect-control b { color: #7c3f59; font-size: 10px; font-weight: 650; }
.ui-effect-control input { width: 100%; accent-color: #e79ab6; }
.ui-theme-select { width: 100%; min-height: 32px; padding: 0 8px; border: 1px solid #eee2e8; border-radius: 8px; color: #555d6d; background: #fffafd; font-size: 11px; }
.ui-theme-field { gap: 8px; }
.ui-theme-options { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.ui-theme-options button { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 9px; border: 1px solid rgba(255,255,255,.7); border-radius: calc(var(--ui-live-radius) - 2px); color: #555d6d; background: rgba(255,255,255,.5); box-shadow: inset 0 1px rgba(255,255,255,.8); text-align: left; transition: transform var(--ui-live-duration), background var(--ui-live-duration), box-shadow var(--ui-live-duration), border-color var(--ui-live-duration); }
.ui-theme-options button:hover { transform: translateY(calc(-1 * var(--ui-live-lift))); background: rgba(255,255,255,.78); }
.ui-theme-options button[aria-pressed="true"] { color: #713d52; border-color: rgba(224,145,176,.7); background: rgba(255,245,249,.9); box-shadow: 0 8px 18px rgba(97,53,72,.1), inset 0 1px #fff; }
.ui-theme-options button > span { display: grid; min-width: 0; gap: 1px; }
.ui-theme-options strong { font-size: 10.5px; }
.ui-theme-options small { overflow: hidden; color: #96909a; font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.theme-orb { width: 21px; height: 21px; flex: 0 0 auto; border-radius: 50%; box-shadow: inset 0 1px 2px rgba(255,255,255,.85), 0 3px 8px rgba(54,44,58,.13); }
.theme-orb.rose { background: radial-gradient(circle at 30% 25%, #fff, #f6c2d5 40%, #d86d98); }
.theme-orb.night { background: radial-gradient(circle at 30% 25%, #76809b, #252b3b 42%, #0e1119); }
.theme-orb.paper { background: radial-gradient(circle at 30% 25%, #fffdf7, #e6d7c0 48%, #9a7d5d); }
.theme-orb.mint { background: radial-gradient(circle at 30% 25%, #f6fffc, #a8dfd4 46%, #3c9488); }
.ui-button-style-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.ui-button-style-options button { min-height: 30px; padding: 0 5px; border: 1px solid rgba(255,255,255,.74); border-radius: 8px; color: #77707b; background: rgba(255,255,255,.46); box-shadow: inset 0 1px rgba(255,255,255,.85); font-size: 9px; }
.ui-button-style-options button:hover { color: #8a3f60; background: rgba(255,255,255,.78); }
.ui-button-style-options button[aria-pressed="true"] { color: #fff; border-color: rgba(198,78,126,.45); background: linear-gradient(135deg, rgba(226,124,163,.9), rgba(190,75,119,.9)); box-shadow: 0 6px 14px rgba(174,70,109,.2), inset 0 1px rgba(255,255,255,.35); }
.ui-effect-switch { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: #4b5567; font-size: 11px; }
.ui-effect-switch input { accent-color: #e79ab6; }
.ui-effects-actions { display: flex; justify-content: flex-end; margin-top: 13px; }

.action-group, .template-card, .recipe-button, .smart-page-box, .ai-section, .content-format-toolbar, .visual-editor, .code-editor, .modal-panel, .selection-toolbar {
  border-radius: var(--ui-live-radius);
}
.action-button, .tab, .format-button, .mini-button, .recipe-button, .template-card, .palette-button, .ai-task-button {
  transition-duration: var(--ui-live-duration) !important;
  transition-timing-function: cubic-bezier(.2,.75,.2,1) !important;
}
.action-button.primary { position: relative; overflow: hidden; isolation: isolate; }
.action-button.primary::before {
  position: absolute;
  z-index: -1;
  inset: 1px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: inherit;
  background:
    radial-gradient(90px circle at var(--surface-x, 28%) var(--surface-y, 20%), rgba(255,255,255,.34), transparent 58%),
    linear-gradient(135deg, rgba(255,255,255,.14), transparent 48%);
  content: "";
  pointer-events: none;
}
.action-button.primary::after {
  position: absolute;
  z-index: -1;
  top: -80%;
  bottom: -80%;
  left: -55%;
  width: 35%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  content: "";
  transform: rotate(14deg) translateX(-220%);
  transition: transform calc(var(--ui-live-duration) * 2.4) ease;
}
.action-button.primary:hover::after { transform: rotate(14deg) translateX(620%); }
.hover-arrow { gap: 0; overflow: hidden; }
.hover-arrow span, .hover-arrow i { display: inline-block; transition: transform var(--ui-live-duration) cubic-bezier(.2,.8,.2,1), opacity var(--ui-live-duration); }
.hover-arrow i { width: 0; margin-left: 0; overflow: hidden; opacity: 0; font-style: normal; }
.hover-arrow:hover span { transform: translateX(-3px); }
.hover-arrow:hover i { width: 14px; margin-left: 3px; opacity: 1; transform: translateX(0); }
.tabs { --active-tab-index: 0; isolation: isolate; }
.tabs::before { position: absolute; z-index: 0; top: 10px; bottom: 10px; left: 14px; width: calc((100% - 36px) / 3); border: 1px solid rgba(255,255,255,.8); border-radius: calc(var(--ui-live-radius) - 3px); background: rgba(255,255,255,.62); box-shadow: 0 7px 18px rgba(64,45,59,.09), inset 0 1px #fff; content: ""; transform: translateX(calc(var(--active-tab-index) * (100% + 4px))); transition: transform calc(var(--ui-live-duration) * 1.25) cubic-bezier(.2,.85,.2,1); backdrop-filter: blur(14px); }
.tabs.tabs-four::before { width: calc((100% - 40px) / 4); }
.tabs .tab { z-index: 1; }
.tabs .tab.is-active { background: transparent !important; box-shadow: none !important; }
.template-card, .recipe-button, .ai-task-button, .ui-theme-options button { position: relative; overflow: hidden; isolation: isolate; }
.template-card::before, .recipe-button::before, .ai-task-button::before, .ui-theme-options button::before { position: absolute; z-index: 0; inset: 0; background: radial-gradient(120px circle at var(--surface-x, 35%) var(--surface-y, 20%), rgba(255,255,255,.72), transparent 62%); content: ""; opacity: 0; transition: opacity var(--ui-live-duration); pointer-events: none; }
.template-card:hover::before, .recipe-button:hover::before, .ai-task-button:hover::before, .ui-theme-options button:hover::before { opacity: .75; }
.template-card > *, .recipe-button > *, .ai-task-button > *, .ui-theme-options button > * { position: relative; z-index: 1; }
.tab-panel.is-active { animation: uiPanelIn var(--ui-live-duration) cubic-bezier(.2,.8,.2,1); }
.preview-stage { position: relative; isolation: isolate; }
.preview-stage::before {
  position: absolute;
  z-index: 0;
  inset: -12%;
  pointer-events: none;
  background:
    radial-gradient(circle at 24% 20%, rgba(244, 174, 202, var(--ui-live-glow-c)), transparent 26%),
    radial-gradient(circle at 78% 18%, rgba(147, 197, 253, var(--ui-live-glow-d)), transparent 28%),
    radial-gradient(circle at 58% 82%, rgba(196, 181, 253, var(--ui-live-glow-e)), transparent 30%);
  content: "";
  filter: blur(8px);
  animation: uiAmbientShift 14s ease-in-out infinite alternate;
}
.preview-stage .pages-canvas { position: relative; z-index: 1; }

@media (hover: hover) {
  .action-button:hover, .mini-button:hover, .format-button:hover { transform: translateY(calc(-1 * var(--ui-live-lift))); }
  .template-card:hover { transform: translateY(calc(-1.7 * var(--ui-live-lift))) scale(1.006); box-shadow: var(--ui-live-shadow); }
  .recipe-button:hover, .ai-task-button:hover { transform: translateY(calc(-1 * var(--ui-live-lift))); box-shadow: var(--ui-live-shadow); }
  .brand-mark { transition: transform var(--ui-live-duration) cubic-bezier(.2,.8,.2,1), box-shadow var(--ui-live-duration); }
  .brand:hover .brand-mark { transform: translateY(calc(-.8 * var(--ui-live-lift))) rotate(-2deg); box-shadow: 0 12px 25px rgba(224,133,163,.3); }
}

@keyframes uiPanelIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes uiPopoverIn { from { opacity: 0; transform: translateY(-7px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes uiAmbientShift { 0% { transform: translate3d(-2%, -1%, 0) scale(1); } 100% { transform: translate3d(3%, 2%, 0) scale(1.08); } }

/* Refined visual shell: fewer nested boxes, softer rose-and-ink hierarchy. */
:root {
  --ui-primary: #cf648d;
  --ui-primary-dark: #b74b76;
  --ui-bg: #f5f6f9;
  --ui-soft: #faf8fa;
  --ui-border: #e8e5eb;
}
body { color: #252936; background: radial-gradient(circle at 12% -8%, rgba(248, 196, 215, .38), transparent 28%), linear-gradient(145deg, #f7f8fb, #f2f4f8 62%, #f8f5f7); }
.topbar { min-height: 68px; padding: 12px 22px; border-bottom: 1px solid rgba(255,255,255,.7); background: rgba(255,255,255,.58); box-shadow: 0 6px 24px rgba(55,42,62,.035), inset 0 1px rgba(255,255,255,.8); backdrop-filter: blur(24px) saturate(1.25); }
.brand { gap: 12px; }
.brand strong { color: #242735; font-size: 15px; letter-spacing: -.025em; }
.brand span { color: #8b8490; }
.actionbar { gap: 9px; padding: 10px 20px; border-bottom: 1px solid rgba(255,255,255,.72); background: rgba(248,247,250,.62); box-shadow: 0 8px 28px rgba(52,39,56,.035); backdrop-filter: blur(22px) saturate(1.2); }
.action-group { padding: 3px; border: 1px solid rgba(255,255,255,.85); border-radius: 13px; background: linear-gradient(135deg, rgba(255,255,255,.76), rgba(255,255,255,.46)); box-shadow: 0 7px 19px rgba(55,42,62,.055), inset 0 1px rgba(255,255,255,.9); backdrop-filter: blur(18px); }
.action-button { min-height: 33px; border-radius: 9px; color: #4d5363; font-weight: 600; }
.action-button:hover { color: #a74670; background: #fff1f6; }
.action-button.primary { background: linear-gradient(135deg, #d96e98, #c75482); box-shadow: 0 7px 17px rgba(207,100,141,.24); }
.action-button.primary:hover { color: #fff; background: #b74b76; }
.resume-select { color: #303544; background: #faf9fb; }
.toolbar-switch { color: #5f6574; }
.workspace { gap: 12px; padding: 12px; background: transparent; }
.control-panel { overflow: hidden; border: 1px solid rgba(255,255,255,.78); border-radius: calc(var(--ui-live-radius) + 7px); background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(248,249,251,.6)); box-shadow: 0 22px 50px rgba(48,38,52,.08), inset 0 1px rgba(255,255,255,.9); backdrop-filter: blur(24px) saturate(1.18); }
.tabs { padding: 8px 12px; border-bottom: 1px solid #ebe8ee; background: rgba(255,255,255,.58); }
.tab { color: #858a98; border-radius: 10px; font-weight: 650; }
.tab:hover { color: #b34f77; background: #fff2f6; }
.tab.is-active { color: #a7446c; background: #fff; box-shadow: 0 4px 12px rgba(75,48,67,.08), inset 0 0 0 1px #f1d5df; }
.tab-panel { padding: 24px; }
.panel-title-row h1 { color: #262a38; font-size: 20px; letter-spacing: -.045em; }
.panel-title-row p { color: #898d9a; }
.meta-pill { border-color: #eee8ed; color: #8c6b7a; background: rgba(255,255,255,.85); box-shadow: none; }
.editor-mode-switch { border-color: #ebe7ed; background: #f5f4f7; }
.mode-button.is-active { color: #a7446c; background: #fff; box-shadow: 0 4px 11px rgba(75,48,67,.08); }
.content-format-toolbar { border-color: #ebe7ed; background: rgba(255,255,255,.78); box-shadow: 0 10px 24px rgba(55,42,62,.045); }
.format-select, .format-button { color: #626878; }
.format-select:hover, .format-button:hover { color: #a7446c; background: #fff1f6; }
.code-editor, .visual-editor { border-color: #ebe7ed; box-shadow: 0 12px 28px rgba(55,42,62,.055); }
.preview-panel { overflow: hidden; border: 1px solid rgba(255,255,255,.76); border-radius: calc(var(--ui-live-radius) + 7px); background: rgba(238,241,245,.64); box-shadow: 0 22px 50px rgba(48,38,52,.075), inset 0 1px rgba(255,255,255,.85); backdrop-filter: blur(22px); }
.preview-toolbar { border-bottom-color: #e2e4e9; background: rgba(255,255,255,.76); }
.preview-heading strong { color: #303545; }
.preview-stage { background-color: #edf0f4; }
.recipe-button, .template-card, .palette-button { border-color: #e9e5eb; box-shadow: 0 4px 12px rgba(55,42,62,.035); }
.template-card.is-selected { border-color: #dc8eac; box-shadow: 0 0 0 3px rgba(220,142,172,.15), 0 12px 26px rgba(55,42,62,.08); }
.smart-page-box, .ai-section { border-color: #ece5ea; background: rgba(255,255,255,.7); box-shadow: 0 10px 26px rgba(55,42,62,.045); }
.ui-effects-panel { border-color: #f0d7e1; }

select:not(.sr-only) {
  appearance: none;
  padding-right: 30px !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  background-color: rgba(255,255,255,.56) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23766f7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 9px center !important;
  box-shadow: inset 0 1px rgba(255,255,255,.82), 0 5px 14px rgba(50,38,54,.045) !important;
  backdrop-filter: blur(16px);
  transition: border-color var(--ui-live-duration), box-shadow var(--ui-live-duration), background-color var(--ui-live-duration);
}
select:not(.sr-only):hover { border-color: rgba(215,131,163,.56) !important; background-color: rgba(255,255,255,.76) !important; }
select:not(.sr-only):focus { border-color: rgba(208,94,139,.68) !important; outline: 3px solid rgba(219,111,152,.11) !important; }
.field input:not([type="range"]):not([type="checkbox"]):not([type="color"]), .field textarea, .code-editor, .visual-editor, .css-editor, .ai-custom-prompt > textarea {
  border-color: rgba(255,255,255,.78) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.68), rgba(255,255,255,.48)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.9), 0 8px 20px rgba(53,40,57,.045) !important;
  backdrop-filter: blur(16px);
}
.modal-backdrop { background: rgba(44,38,48,.28); backdrop-filter: blur(14px) saturate(.9); }
.modal-panel { border: 1px solid rgba(255,255,255,.82); background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(250,247,251,.72)); box-shadow: 0 32px 90px rgba(35,28,39,.24), inset 0 1px rgba(255,255,255,.95); backdrop-filter: blur(30px) saturate(1.25); animation: uiPopoverIn var(--ui-live-duration) cubic-bezier(.2,.85,.2,1); }
.version-row, .text-import-guide, .ai-status, .ai-explanation { border: 1px solid rgba(255,255,255,.7); background: rgba(255,255,255,.45); box-shadow: inset 0 1px rgba(255,255,255,.8); backdrop-filter: blur(12px); }
.mini-button { border-color: rgba(255,255,255,.8); background: rgba(255,255,255,.52); box-shadow: inset 0 1px rgba(255,255,255,.88), 0 5px 13px rgba(53,40,57,.05); backdrop-filter: blur(14px); }
.mini-button:hover { color: #9e4369; border-color: rgba(216,126,161,.5); background: rgba(255,250,252,.82); }
.mini-button.primary { color: #fff; border-color: rgba(208,94,139,.52); background: linear-gradient(135deg, rgba(224,111,154,.94), rgba(188,72,116,.94)); box-shadow: 0 8px 18px rgba(190,72,116,.2), inset 0 1px rgba(255,255,255,.32); }

.ui-buttons-soft :is(.action-button, .mini-button, .mode-button, .format-button) { border-color: transparent; background: rgba(241,232,237,.86); box-shadow: none; backdrop-filter: none; }
.ui-buttons-soft :is(.action-button.primary, .mini-button.primary) { color: #fff; background: var(--ui-primary); }
.ui-buttons-outline :is(.action-button, .mini-button, .mode-button, .format-button) { border-color: rgba(134,122,137,.26); background: rgba(255,255,255,.18); box-shadow: none; }
.ui-buttons-outline :is(.action-button.primary, .mini-button.primary) { color: var(--ui-primary-dark); border-color: var(--ui-primary); background: rgba(255,255,255,.25); }
.ui-buttons-minimal :is(.action-button, .mini-button, .mode-button, .format-button) { border-color: transparent; background: transparent; box-shadow: none; backdrop-filter: none; }
.ui-buttons-minimal :is(.action-button.primary, .mini-button.primary) { color: #fff; background: color-mix(in srgb, var(--ui-primary) 78%, transparent); }

.ui-theme-night { --ui-text: #edf0f7; --ui-muted: #9aa3b7; --ui-border: #2b3140; --ui-primary: #e68bad; --ui-primary-dark: #cf6c91; color: #edf0f7; background: radial-gradient(circle at 12% -8%, rgba(183,93,133,.24), transparent 28%), #10131b; }
.ui-theme-night .topbar, .ui-theme-night .actionbar { border-color: #292e3b; background: rgba(19,23,32,.86); }
.ui-theme-night .brand strong, .ui-theme-night .panel-title-row h1, .ui-theme-night .preview-heading strong { color: #f5f6fb; }
.ui-theme-night .brand span, .ui-theme-night .panel-title-row p, .ui-theme-night .local-status { color: #929caf; }
.ui-theme-night .action-group, .ui-theme-night .meta-pill, .ui-theme-night .content-format-toolbar, .ui-theme-night .smart-page-box, .ui-theme-night .ai-section, .ui-theme-night .template-card, .ui-theme-night .recipe-button, .ui-theme-night .palette-button { border-color: #303647; background: rgba(25,30,41,.88); box-shadow: 0 9px 25px rgba(0,0,0,.18); }
.ui-theme-night .action-button, .ui-theme-night .toolbar-switch, .ui-theme-night .format-select, .ui-theme-night .format-button { color: #c5ccda; }
.ui-theme-night .action-button:hover, .ui-theme-night .format-select:hover, .ui-theme-night .format-button:hover { color: #ffc4d8; background: rgba(230,139,173,.13); }
.ui-theme-night .action-button.primary { color: #fff; background: linear-gradient(135deg, #d8759b, #b8547d); }
.ui-theme-night .control-panel { border-color: #292e3b; background: linear-gradient(180deg, #171b25, #12161f); }
.ui-theme-night .tabs, .ui-theme-night .preview-toolbar { border-color: #292e3b; background: rgba(20,24,34,.82); }
.ui-theme-night .tab { color: #8f99ae; }
.ui-theme-night .tab.is-active { color: #ffc4d8; background: #252b39; box-shadow: inset 0 0 0 1px #75445b; }
.ui-theme-night .tabs::before { border-color: #464d5e; background: rgba(42,48,63,.88); box-shadow: 0 8px 20px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.08); }
.ui-theme-night .editor-mode-switch { border-color: #303647; background: #1b202b; }
.ui-theme-night .mode-button.is-active { color: #ffc4d8; background: #292f3d; }
.ui-theme-night .code-editor, .ui-theme-night .visual-editor { color: #e5e9f1; border-color: #303647; background: #151a24; }
.ui-theme-night .preview-panel, .ui-theme-night .preview-stage { background-color: #171b24; }
.ui-theme-night .ui-effects-panel { color: #e9edf5; border-color: #414858; background: rgba(28,33,45,.95); }
.ui-theme-night .ui-effects-heading span, .ui-theme-night .ui-effect-control, .ui-theme-night .ui-effect-switch { color: #aab2c2; }
.ui-theme-night .ui-theme-select { color: #ecf0f6; border-color: #42495a; background: #222836; }
.ui-theme-night .ui-theme-options button { color: #cbd2df; border-color: #42495a; background: rgba(40,46,60,.82); box-shadow: inset 0 1px rgba(255,255,255,.05); }
.ui-theme-night .ui-theme-options button[aria-pressed="true"] { color: #ffd4e3; border-color: #925a72; background: rgba(107,55,79,.48); }
.ui-theme-night select:not(.sr-only), .ui-theme-night .field input:not([type="range"]):not([type="checkbox"]):not([type="color"]), .ui-theme-night .field textarea, .ui-theme-night .code-editor, .ui-theme-night .visual-editor, .ui-theme-night .css-editor, .ui-theme-night .ai-custom-prompt > textarea { color: #e8ecf4 !important; border-color: rgba(105,115,137,.35) !important; background-color: rgba(33,39,52,.72) !important; box-shadow: inset 0 1px rgba(255,255,255,.05), 0 8px 20px rgba(0,0,0,.14) !important; }
.ui-theme-night .modal-panel { color: #edf0f7; border-color: rgba(105,115,137,.42); background: linear-gradient(145deg, rgba(31,37,50,.96), rgba(20,25,35,.9)); box-shadow: 0 32px 90px rgba(0,0,0,.46), inset 0 1px rgba(255,255,255,.08); }
.ui-theme-night .mini-button { color: #d2d8e5; border-color: rgba(105,115,137,.38); background: rgba(43,50,65,.7); box-shadow: inset 0 1px rgba(255,255,255,.06); }
.ui-theme-night .version-row, .ui-theme-night .text-import-guide, .ui-theme-night .ai-status, .ui-theme-night .ai-explanation { color: #b9c1d0; border-color: rgba(105,115,137,.3); background: rgba(40,46,59,.62); }

.ui-theme-paper { --ui-primary: #8d735a; --ui-primary-dark: #745a43; color: #3b342e; background: radial-gradient(circle at 14% -8%, rgba(229,208,177,.4), transparent 30%), #f4f0e8; }
.ui-theme-paper .topbar, .ui-theme-paper .actionbar { border-color: #e5ddd0; background: rgba(255,252,246,.84); }
.ui-theme-paper .control-panel { border-color: #e5ddd0; background: linear-gradient(180deg, #fffdf8, #f7f2e9); }
.ui-theme-paper .preview-panel, .ui-theme-paper .preview-stage { background-color: #eee8dc; }
.ui-theme-paper .action-button.primary { background: linear-gradient(135deg, #a88b69, #846747); }
.ui-theme-paper .tab.is-active { color: #775e42; box-shadow: inset 0 0 0 1px #decdb6, 0 4px 12px rgba(97,72,43,.08); }
.ui-theme-paper .tabs::before { border-color: #eadfce; background: rgba(255,251,243,.86); }

.ui-theme-mint { --ui-primary: #42958a; --ui-primary-dark: #2f776e; color: #253d3b; background: radial-gradient(circle at 12% -8%, rgba(164,224,213,.42), transparent 28%), #f0f7f5; }
.ui-theme-mint .topbar, .ui-theme-mint .actionbar { border-color: #d9ebe7; background: rgba(250,255,253,.84); }
.ui-theme-mint .control-panel { border-color: #d9ebe7; background: linear-gradient(180deg, #fbfffe, #f1f8f6); }
.ui-theme-mint .preview-panel, .ui-theme-mint .preview-stage { background-color: #e8f2ef; }
.ui-theme-mint .action-button.primary { background: linear-gradient(135deg, #54a79a, #368679); }
.ui-theme-mint .tab.is-active { color: #2f776e; box-shadow: inset 0 0 0 1px #b8ddd5, 0 4px 12px rgba(47,119,110,.08); }
.ui-theme-mint .tabs::before { border-color: #cde6e0; background: rgba(246,255,252,.86); }

.ai-hero { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin: -24px -24px 16px; padding: 24px; overflow: hidden; color: #eef2ff; background: radial-gradient(circle at 88% 8%, rgba(129,140,248,.42), transparent 38%), linear-gradient(135deg, #151a34 0%, #25285a 55%, #1d4ed8 145%); }
.ai-hero::after { position: absolute; right: -42px; bottom: -72px; width: 180px; height: 180px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; content: ""; }
.ai-hero h1 { margin: 5px 0 6px; color: #fff; font-size: 22px; letter-spacing: -.02em; }
.ai-hero p { max-width: 300px; margin: 0; color: rgba(238,242,255,.72); font-size: 11px; line-height: 1.65; }
.ai-eyebrow { color: #a5b4fc; font-size: 9px; font-weight: 750; letter-spacing: .16em; }
.ai-private-badge { position: relative; z-index: 1; flex: 0 0 auto; padding: 5px 8px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: #dbeafe; background: rgba(255,255,255,.08); font-size: 9px; white-space: nowrap; }
.ai-section { margin-top: 12px; padding: 14px; border: 1px solid #e5e9f2; border-radius: 12px; background: #fff; box-shadow: 0 5px 18px rgba(31,41,55,.045); }
.ai-section-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.ai-section-heading > div { display: grid; min-width: 0; gap: 2px; }
.ai-section-heading strong { color: #202738; font-size: 13px; }
.ai-section-heading small { color: #8a93a5; font-size: 9.5px; line-height: 1.4; }
.ai-step { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; color: #4338ca; background: #eef2ff; font-size: 9px; font-weight: 800; letter-spacing: .04em; }
.ai-config { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field input[type="text"], .field input[type="url"], .field input[type="password"], .field textarea { width: 100%; padding: 9px 10px; border: 1px solid var(--ui-border); border-radius: 7px; color: var(--ui-text); background: #fff; font-size: 12px; }
.ai-config .field input, .ai-config .field select, .ai-config .field textarea { border-color: #dfe4ed; background: #fcfdff; }
.ai-config .field input:focus, .ai-config .field select:focus, .ai-config .field textarea:focus { border-color: #818cf8; outline: 3px solid rgba(99,102,241,.1); }
.full-field { grid-column: 1 / -1; }
.provider-hint { padding: 8px 10px; border-radius: 7px; color: #536077; background: #f3f5ff; font-size: 10px; line-height: 1.55; }
.model-picker { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 8px; }
.model-fetch-button { min-height: 39px; color: #4338ca; border-color: #c7d2fe; background: #eef2ff; white-space: nowrap; }
.model-fetch-button:hover { border-color: #a5b4fc; background: #e0e7ff; }
.model-status { margin-top: -3px; color: #8a93a5; font-size: 9.5px; line-height: 1.45; }
.model-status.is-loading { color: #4f46e5; }
.model-status.is-success { color: #16805a; }
.model-status.is-error { color: #c2414a; }
.ai-advanced { border: 1px dashed #d7dce7; border-radius: 8px; background: #fafbfe; }
.ai-advanced summary { padding: 9px 10px; color: #667085; font-size: 10px; font-weight: 650; cursor: pointer; }
.ai-advanced-grid { display: grid; gap: 10px; padding: 2px 10px 10px; }
.remember-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; color: var(--ui-muted); font-size: 10px; }
.remember-row input, .ai-selection-toolbar input, .ai-change-select { accent-color: #4f46e5; }
.privacy-sensitive-row { align-items: flex-start; color: #8b5e23; line-height: 1.45; }
.ai-privacy-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px; border: 1px solid rgba(59,130,246,.18); border-radius: 11px; background: rgba(239,246,255,.72); }
.ai-privacy-card > div:first-child { display: grid; min-width: 0; gap: 3px; }
.ai-privacy-card strong { color: #334155; font-size: 10px; }
.ai-privacy-card span { color: #0f766e; font-size: 12px; font-weight: 750; overflow-wrap: anywhere; }
.ai-privacy-card span.is-warning { color: #b45309; }
.ai-privacy-card small { color: #64748b; font-size: 9.5px; line-height: 1.45; }
.ai-privacy-actions { display: flex; flex: 0 0 auto; gap: 7px; }
.danger-subtle { color: #b42318 !important; border-color: rgba(180,35,24,.2) !important; background: rgba(254,242,242,.78) !important; }
.privacy-details { display: grid; gap: 10px; }
.privacy-details article { padding: 12px 13px; border: 1px solid rgba(100,116,139,.14); border-radius: 12px; background: rgba(248,250,252,.72); }
.privacy-details strong { color: #1e293b; font-size: 12px; }
.privacy-details p { margin: 4px 0 0; color: #64748b; font-size: 10.5px; line-height: 1.65; }
.privacy-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.ai-consent-summary { display: grid; grid-template-columns: 80px 1fr; gap: 9px 12px; padding: 14px; border-radius: 12px; background: rgba(241,245,249,.85); }
.ai-consent-summary span { color: #64748b; font-size: 10px; }
.ai-consent-summary strong { color: #0f172a; font-size: 11px; overflow-wrap: anywhere; }
.ai-consent-warning { margin: 12px 0 0; padding: 10px 12px; border: 1px solid rgba(245,158,11,.22); border-radius: 10px; color: #92400e; background: rgba(255,251,235,.8); font-size: 10px; line-height: 1.55; }
.ui-theme-night .ai-privacy-card { border-color: rgba(96,165,250,.25); background: rgba(30,41,59,.72); }
.ui-theme-night .ai-privacy-card strong, .ui-theme-night .privacy-details strong, .ui-theme-night .ai-consent-summary strong { color: #e2e8f0; }
.ui-theme-night .ai-privacy-card small, .ui-theme-night .privacy-details p, .ui-theme-night .ai-consent-summary span { color: #94a3b8; }
.ui-theme-night .privacy-details article, .ui-theme-night .ai-consent-summary { border-color: rgba(148,163,184,.16); background: rgba(30,41,59,.72); }
.ai-jd-field { margin: 0 0 11px; }
.ai-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.ai-task-button { display: grid; min-height: 61px; gap: 4px; padding: 10px 11px; text-align: left; border: 1px solid #e1e5ed; border-radius: 9px; color: #323a4c; background: #fbfcfe; cursor: pointer; transition: transform .15s, border-color .15s, background .15s, box-shadow .15s; }
.ai-task-button:hover { transform: translateY(-1px); border-color: #a5b4fc; background: #f7f7ff; box-shadow: 0 6px 14px rgba(79,70,229,.08); }
.ai-task-button.is-featured { color: #312e81; border-color: #c7d2fe; background: linear-gradient(135deg, #eef2ff, #f8f7ff); }
.ai-task-button:last-child { grid-column: 1 / -1; min-height: 54px; }
.ai-task-button strong { font-size: 11px; }
.ai-task-button span { color: #9299a8; font-size: 9px; line-height: 1.35; }
.ai-task-button:disabled { transform: none; opacity: .5; cursor: wait; box-shadow: none; }
.ai-custom-prompt { margin-top: 10px; padding: 11px; border: 1px dashed #cfd5e2; border-radius: 9px; background: #fbfcff; }
.ai-custom-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ai-custom-heading div { display: grid; gap: 2px; }
.ai-custom-heading strong { color: #363e50; font-size: 10.5px; }
.ai-custom-heading span { color: #8b95a7; font-size: 9px; }
.ai-prompt-preset { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 8px; margin-bottom: 8px; }
.ai-prompt-preset > span { color: #677287; font-size: 9.5px; white-space: nowrap; }
.ai-prompt-preset select { min-height: 34px; padding: 0 9px; border: 1px solid #dfe4ed; border-radius: 7px; color: #3e4759; background: #fff; font-size: 10px; }
.ai-custom-prompt > textarea { display: block; width: 100%; min-height: 72px; padding: 9px 10px; resize: vertical; border: 1px solid #dfe4ed; border-radius: 7px; color: var(--ui-text); background: #fff; font-size: 11px; line-height: 1.55; }
.ai-custom-prompt > textarea:focus { border-color: #818cf8; outline: 3px solid rgba(99,102,241,.1); }
.ai-custom-actions { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 8px; margin-top: 8px; }
.ai-custom-actions .field { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 7px; }
.ai-custom-actions .field span { color: #778196; font-size: 9px; white-space: nowrap; }
.ai-custom-actions .field select { min-height: 32px; padding: 0 8px; border: 1px solid #dfe4ed; border-radius: 6px; color: #475467; background: #fff; font-size: 10px; }
.ai-custom-actions .mini-button { min-height: 32px; white-space: nowrap; }
.ai-status { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 9px 10px; border-radius: 8px; color: #667085; background: #f6f7fa; font-size: 10px; line-height: 1.5; }
.ai-status-dot { flex: 0 0 auto; width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: #98a2b3; }
.ai-status.is-loading .ai-status-dot { background: #6366f1; box-shadow: 0 0 0 4px rgba(99,102,241,.12); animation: ai-pulse 1.2s infinite; }
.ai-status.is-success .ai-status-dot { background: #16a36a; }
.ai-status.is-error { color: #a63f48; background: #fff3f4; }
.ai-status.is-error .ai-status-dot { background: #d24d57; }
@keyframes ai-pulse { 50% { opacity: .35; } }
.ai-result-section { border-color: #d9ddfb; background: linear-gradient(180deg, #fdfdff 0, #fff 90px); }
.ai-result-heading { margin-bottom: 10px; }
.ai-result-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; border-radius: 8px; background: #f0f2f6; }
.ai-result-tab { min-height: 32px; padding: 0 6px; border: 0; border-radius: 6px; color: #747d8f; background: transparent; font-size: 10px; font-weight: 650; cursor: pointer; }
.ai-result-tab.is-active { color: #312e81; background: #fff; box-shadow: 0 2px 7px rgba(31,41,55,.1); }
.ai-result-view { margin-top: 11px; }
.ai-selection-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; color: #697386; font-size: 10px; }
.ai-selection-toolbar label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.ai-changes-list { display: grid; gap: 8px; }
.ai-change-card { overflow: hidden; border: 1px solid #e1e5ed; border-radius: 9px; background: #fff; }
.ai-change-card.is-applied { border-color: #dce9e3; background: #f8fcfa; }
.ai-change-card.is-applied .ai-change-header { border-bottom: 0; background: transparent; }
.ai-change-header { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 9px 10px; border-bottom: 1px solid #edf0f4; background: #fafbfc; }
.ai-change-header strong { overflow: hidden; color: #303849; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.ai-applied-check { display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; color: #fff; background: #20a36a; font-size: 10px; font-weight: 800; }
.ai-applied-label { color: #16805a; font-size: 9px; font-weight: 700; }
.ai-change-reason { padding: 8px 10px 0; color: #727b8c; font-size: 9.5px; line-height: 1.5; }
.ai-change-details { margin-top: 6px; border-top: 1px solid #f0f2f5; }
.ai-change-details summary { padding: 7px 10px; color: #596579; background: #fbfcfd; font-size: 9.5px; font-weight: 650; cursor: pointer; }
.ai-change-details[open] summary { color: #4338ca; }
.ai-diff { display: grid; gap: 5px; padding: 8px 10px 10px; }
.ai-diff-block { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 6px; padding: 7px 8px; border-radius: 6px; }
.ai-diff-block.is-old { color: #93414a; background: #fff0f1; }
.ai-diff-block.is-new { color: #176b50; background: #ecfbf4; }
.ai-diff-sign { font-weight: 800; }
.ai-diff pre { max-height: 140px; margin: 0; overflow: auto; overflow-wrap: anywhere; color: inherit; font: 9.5px/1.55 "Cascadia Code", Consolas, "Microsoft YaHei", monospace; white-space: pre-wrap; }
.ai-change-apply { min-height: 27px; padding: 0 8px; border: 1px solid #c7d2fe; border-radius: 6px; color: #4338ca; background: #eef2ff; font-size: 9px; font-weight: 650; cursor: pointer; }
.ai-change-empty { padding: 20px 12px; color: #7c8596; text-align: center; border: 1px dashed #d7dce7; border-radius: 8px; background: #fafbfc; font-size: 10px; line-height: 1.6; }
.ai-output { min-height: 250px; resize: vertical; font-family: "Cascadia Code", Consolas, "Microsoft YaHei", monospace; line-height: 1.6; }
.ai-explanation { min-height: 120px; padding: 12px; border-radius: 8px; color: #4b5565; background: #f7f8fb; font-size: 11px; line-height: 1.75; white-space: pre-wrap; }
.ai-output-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.ai-output-actions .mini-button { flex: 1 1 calc(33.333% - 7px); min-height: 34px; }
.ai-raw-details { margin-top: 10px; color: #81899a; font-size: 9.5px; }
.ai-raw-details summary { cursor: pointer; }
.ai-raw-details pre { max-height: 220px; margin: 7px 0 0; padding: 9px; overflow: auto; border-radius: 7px; color: #5f6878; background: #f6f7f9; font: 9px/1.55 "Cascadia Code", Consolas, monospace; white-space: pre-wrap; }
.ai-preview-badge { padding: 3px 7px; border-radius: 999px; color: #4338ca; background: #e0e7ff; font-size: 9px; font-weight: 700; }
body.ai-preview-active #exitAiPreviewButton { display: inline-flex !important; }
.preview-close { margin-left: auto; }

body.preview-only .topbar, body.preview-only .actionbar, body.preview-only .control-panel { display: none !important; }
body.preview-only .workspace { display: block; min-height: 100vh; }
body.preview-only .preview-panel { min-height: 100vh; }
body.preview-only .preview-toolbar { position: sticky; }
body.preview-only #closePreviewButton { display: inline-flex !important; }
body:not(.ai-preview-active) #exitAiPreviewButton { display: none !important; }
body.preview-only .preview-stage { min-height: calc(100vh - 52px); }

@media (max-width: 1100px) {
  .workspace { grid-template-columns: 1fr; }
  .control-panel { border-right: 0; border-bottom: 1px solid var(--ui-border); }
  .code-editor { min-height: 460px; }
  .preview-panel { position: static; height: auto; overflow: visible; }
  .preview-stage { flex: none; min-height: 760px; }
}

@media (max-width: 620px) {
  .topbar { align-items: flex-start; padding: 12px 14px; }
  .local-status { display: none; }
  .actionbar { gap: 6px; padding: 8px 10px; }
  .action-group { flex: 1 1 100%; width: 100%; }
  .action-group .action-button, .action-group .toolbar-switch { flex: 1 1 auto; }
  .actionbar-spacer { display: none; }
  .resume-select { flex: 2 1 130px; min-width: 110px; }
  .reset-action { width: 100%; }
  .action-divider { display: none; }
  .tab-panel { padding: 16px; }
  .template-grid, .form-grid { grid-template-columns: 1fr; }
  .template-filters, .ai-config { grid-template-columns: 1fr; }
  .full-field, .remember-row { grid-column: auto; }
  .ai-hero { margin: -16px -16px 14px; padding: 19px 16px; }
  .ai-private-badge { display: none; }
  .ai-section { padding: 12px; }
  .ai-privacy-card { align-items: stretch; flex-direction: column; }
  .ai-privacy-actions { width: 100%; }
  .ai-privacy-actions .mini-button { flex: 1; }
  .ai-consent-summary { grid-template-columns: 68px 1fr; }
  .model-picker { grid-template-columns: 1fr; }
  .model-fetch-button { width: 100%; }
  .ai-actions { grid-template-columns: 1fr; }
  .ai-task-button:last-child { grid-column: auto; }
  .ai-custom-actions { grid-template-columns: 1fr; }
  .ai-prompt-preset { grid-template-columns: 1fr; }
  .ai-custom-actions .field { grid-template-columns: 1fr; }
  .ai-custom-actions .mini-button { width: 100%; }
  .ai-output-actions .mini-button { flex-basis: calc(50% - 7px); }
  .smart-page-box { grid-template-columns: 1fr 1fr; }
  .smart-page-box .field { grid-column: 1 / -1; }
  .recipe-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .palette-grid { grid-template-columns: repeat(6, minmax(0,1fr)); }
  .color-field-third { grid-column: auto; }
  .text-import-options { grid-template-columns: 1fr; }
  .text-import-guide .mini-button { width: 100%; margin-left: 0; }
  .ui-effects-panel { top: 72px; right: 12px; }
  .preview-toolbar { align-items: flex-start; flex-direction: column; }
  .preview-stage {
    padding: 18px 12px calc(88px + env(safe-area-inset-bottom));
    overflow-x: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  @page { margin: 0; }
  html, body { background: #fff !important; }
  .topbar, .actionbar, .control-panel, .preview-toolbar, .toast, .page-label, .selection-toolbar, .modal-backdrop, .ui-effects-panel { display: none !important; }
  .app, .workspace, .preview-panel, .preview-stage, .pages-canvas, .page-wrap { display: block !important; width: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: #fff !important; box-shadow: none !important; zoom: 1 !important; transform: none !important; }
  .preview-panel, .preview-stage { position: static !important; height: auto !important; overflow: visible !important; }
  .resume-page { margin: 0 !important; box-shadow: none !important; break-after: page; page-break-after: always; }
  .page-wrap:last-child .resume-page { break-after: auto; page-break-after: auto; }
}

/* Final cascade: technology glass theme */
body.gsap-ui-ready {
  color: #172033;
  background:
    radial-gradient(circle at var(--ui-pointer-x, 18%) var(--ui-pointer-y, 12%), rgba(238,120,158,.14), transparent 25rem),
    radial-gradient(circle at 88% 18%, rgba(65,190,211,.12), transparent 28rem),
    linear-gradient(145deg, #fff8fb, #f5f8fc 48%, #edf5f8);
}
body.gsap-ui-ready::before { opacity: .34; background-size: 34px 34px; }
body.gsap-ui-ready .app-header,
body.gsap-ui-ready .actionbar {
  background: rgba(255,255,255,.64);
  border-color: rgba(255,255,255,.78);
  box-shadow: 0 12px 34px rgba(42,52,78,.075), inset 0 -1px 0 rgba(100,115,145,.10);
  backdrop-filter: blur(24px) saturate(155%);
}
body.gsap-ui-ready .workspace { gap: 14px; padding: 14px; background: transparent; }
body.gsap-ui-ready .control-panel,
body.gsap-ui-ready .preview-panel {
  border: 1px solid rgba(255,255,255,.86);
  border-radius: calc(var(--ui-live-radius) + 8px);
  background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(247,250,253,.62));
  box-shadow: 0 20px 54px rgba(42,51,78,.11), inset 0 1px 0 rgba(255,255,255,.94);
  backdrop-filter: blur(28px) saturate(150%);
}
body.gsap-ui-ready .tabs {
  margin: 8px; padding: 5px; border-radius: 15px;
  background: rgba(235,240,247,.66); border: 1px solid rgba(255,255,255,.84);
  box-shadow: inset 0 1px 2px rgba(36,49,77,.06);
}
body.gsap-ui-ready .tabs::before {
  top: 5px; bottom: 5px; border-radius: 11px;
  background: linear-gradient(135deg, #fff, rgba(255,246,250,.9));
  border: 1px solid rgba(238,120,158,.18);
  box-shadow: 0 8px 20px rgba(52,62,91,.10), inset 0 1px 0 white;
}
body.gsap-ui-ready .tab { color: #778094; font-weight: 650; }
body.gsap-ui-ready .tab.is-active { color: #d95582; }
body.gsap-ui-ready .action-group,
body.gsap-ui-ready .editor-toolbar,
body.gsap-ui-ready .format-toolbar,
body.gsap-ui-ready .preview-toolbar {
  background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.84);
  box-shadow: 0 8px 24px rgba(44,54,82,.065), inset 0 1px 0 white;
  backdrop-filter: blur(18px);
}
body.gsap-ui-ready .action-button,
body.gsap-ui-ready .mini-button,
body.gsap-ui-ready .format-toolbar button {
  color: #4d586d; border: 1px solid rgba(112,126,155,.14);
  background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(243,247,251,.68));
  box-shadow: inset 0 1px 0 white, 0 5px 14px rgba(44,54,82,.06);
}
body.gsap-ui-ready .action-button:hover,
body.gsap-ui-ready .mini-button:hover,
body.gsap-ui-ready .format-toolbar button:hover {
  color: #202a3d; border-color: rgba(74,187,207,.34);
  box-shadow: inset 0 1px 0 white, 0 10px 24px rgba(66,75,104,.12), 0 0 0 3px rgba(74,187,207,.07);
}
body.gsap-ui-ready .action-button.primary,
body.gsap-ui-ready .mini-button.primary {
  color: white; border-color: rgba(255,255,255,.48);
  background: linear-gradient(125deg, #f08dab, #e66f98 52%, #d95886);
  box-shadow: 0 11px 25px rgba(218,82,130,.25), inset 0 1px 0 rgba(255,255,255,.5);
}
body.gsap-ui-ready select:not(.sr-only),
body.gsap-ui-ready .field input:not([type="range"]):not([type="checkbox"]):not([type="color"]),
body.gsap-ui-ready .field textarea,
body.gsap-ui-ready .code-editor,
body.gsap-ui-ready .visual-editor,
body.gsap-ui-ready .css-editor {
  color: #263147; border-color: rgba(113,128,158,.17);
  background-color: rgba(255,255,255,.76);
  box-shadow: inset 0 1px 2px rgba(42,53,80,.05), 0 4px 13px rgba(42,53,80,.045);
}
body.gsap-ui-ready .template-card,
body.gsap-ui-ready .recipe-button,
body.gsap-ui-ready .ai-task-button,
body.gsap-ui-ready .version-row,
body.gsap-ui-ready .text-import-guide {
  border: 1px solid rgba(255,255,255,.88);
  background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(243,248,252,.62));
  box-shadow: 0 10px 26px rgba(44,54,82,.075), inset 0 1px 0 white;
}
body.gsap-ui-ready .preview-stage {
  background: radial-gradient(circle at 72% 13%, rgba(65,190,211,.11), transparent 23rem), radial-gradient(circle at 18% 80%, rgba(238,120,158,.09), transparent 24rem), linear-gradient(rgba(92,111,147,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(92,111,147,.055) 1px, transparent 1px), rgba(235,240,247,.6);
  background-size: auto, auto, 18px 18px, 18px 18px, auto;
}
body.gsap-ui-ready .resume-page { box-shadow: 0 25px 68px rgba(28,39,67,.17), 0 2px 8px rgba(28,39,67,.08); }
body.gsap-ui-ready .modal-backdrop { background: rgba(23,31,49,.29); backdrop-filter: blur(17px) saturate(130%); }
body.gsap-ui-ready .modal-panel,
body.gsap-ui-ready .ui-effects-panel {
  border: 1px solid rgba(255,255,255,.86);
  background: linear-gradient(145deg, rgba(255,255,255,.89), rgba(241,247,251,.76));
  box-shadow: 0 36px 95px rgba(30,40,66,.24), inset 0 1px 0 white;
  backdrop-filter: blur(32px) saturate(165%);
}
@media (max-width: 900px) {
  body.gsap-ui-ready .workspace { padding: 8px; gap: 9px; }
  body.gsap-ui-ready .control-panel, body.gsap-ui-ready .preview-panel { border-radius: 17px; }
}

/* 2026-07 product shell redesign — hierarchy before decoration */
body.gsap-ui-ready {
  --shell-ink: #182033;
  --shell-muted: #778096;
  --shell-line: rgba(88, 104, 135, .13);
  --shell-pink: #e86f98;
  --shell-cyan: #4bb9ca;
  --shell-navy: #172238;
  background:
    radial-gradient(circle at 12% 8%, rgba(244,172,196,.16), transparent 28rem),
    radial-gradient(circle at 88% 24%, rgba(75,185,202,.12), transparent 32rem),
    #f2f5f9;
}
body.gsap-ui-ready::before {
  opacity: .18;
  background-image: linear-gradient(rgba(73,91,124,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(73,91,124,.07) 1px, transparent 1px);
  background-size: 40px 40px;
}

body.gsap-ui-ready .app-command-header {
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(190px, auto) minmax(320px, 1fr) auto;
  align-items: center;
  gap: 22px;
  padding: 11px 18px;
  color: var(--shell-ink);
  background: rgba(250,252,255,.82);
  border: 0;
  border-bottom: 1px solid rgba(91,107,138,.10);
  box-shadow: 0 8px 28px rgba(33,44,70,.055);
  backdrop-filter: blur(28px) saturate(150%);
}
body.gsap-ui-ready .brand { min-width: 190px; }
body.gsap-ui-ready .brand-mark {
  width: 40px; height: 40px; border-radius: 13px;
  background: linear-gradient(145deg, #f6b2c9, #ffdbe6);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 10px 26px rgba(218,97,139,.21), inset 0 1px 0 white;
}
body.gsap-ui-ready .brand strong { font-size: 16px; letter-spacing: -.035em; }
body.gsap-ui-ready .brand span { color: #8a92a4; font-size: 10px; text-transform: uppercase; letter-spacing: .11em; }

body.gsap-ui-ready .document-switcher {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 6px 5px 12px;
  border: 1px solid rgba(91,107,138,.11);
  border-radius: 14px;
  background: rgba(239,243,248,.68);
  box-shadow: inset 0 1px 2px rgba(34,46,73,.035);
}
body.gsap-ui-ready .command-eyebrow {
  flex: 0 0 auto;
  color: #9098aa;
  font-size: 10px;
  letter-spacing: .08em;
}
body.gsap-ui-ready .document-switcher .resume-select {
  flex: 1 1 160px;
  min-width: 100px;
  height: 34px;
  border: 0;
  background-color: transparent;
  box-shadow: none;
  font-weight: 650;
}
body.gsap-ui-ready .document-switcher .icon-command {
  width: 34px; min-width: 34px; height: 34px; padding: 0;
  border: 0; background: transparent; box-shadow: none;
  color: #626d82; font-size: 18px;
}
body.gsap-ui-ready .document-switcher .icon-command span { display: none; }
body.gsap-ui-ready .document-switcher .icon-command:hover { background: rgba(255,255,255,.9); }

body.gsap-ui-ready .topbar-primary-actions { display: flex; align-items: center; gap: 14px; }
body.gsap-ui-ready .local-status {
  padding: 0; color: #7c8598; white-space: nowrap; font-size: 11px;
}
body.gsap-ui-ready .status-dot { width: 6px; height: 6px; background: #34b987; box-shadow: 0 0 0 4px rgba(52,185,135,.10); }
body.gsap-ui-ready .topbar-primary-actions .export-actions {
  display: flex; gap: 5px; padding: 0; border: 0; background: transparent; box-shadow: none;
}
body.gsap-ui-ready .topbar-primary-actions .action-button { min-height: 37px; padding-inline: 13px; }

body.gsap-ui-ready .command-strip {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 16px;
  background: rgba(255,255,255,.52);
  border: 0;
  border-bottom: 1px solid rgba(91,107,138,.09);
  box-shadow: none;
  backdrop-filter: blur(22px) saturate(140%);
}
body.gsap-ui-ready .command-strip .action-group {
  display: flex; align-items: center; gap: 2px;
  padding: 0 10px 0 0; margin-right: 8px;
  border: 0; border-right: 1px solid rgba(91,107,138,.11);
  border-radius: 0; background: transparent; box-shadow: none;
}
body.gsap-ui-ready .command-group-label {
  margin-right: 4px; color: #99a1b1; font-size: 10px; letter-spacing: .08em;
}
body.gsap-ui-ready .command-strip .action-button,
body.gsap-ui-ready .command-strip .toolbar-switch {
  min-height: 32px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
body.gsap-ui-ready .command-strip .action-button:hover,
body.gsap-ui-ready .command-strip .toolbar-switch:hover {
  background: rgba(255,255,255,.86);
  border-color: rgba(91,107,138,.11);
  box-shadow: 0 6px 16px rgba(38,49,75,.07);
}
body.gsap-ui-ready .command-strip .reset-action { color: #9b6575; background: transparent; border-color: transparent; box-shadow: none; }

body.gsap-ui-ready .workspace {
  height: calc(100vh - 122px);
  min-height: 560px;
  display: grid;
  grid-template-columns: minmax(390px, 430px) minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
}
body.gsap-ui-ready .control-panel,
body.gsap-ui-ready .preview-panel {
  min-height: 0;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.88);
  box-shadow: 0 16px 46px rgba(34,44,70,.085), inset 0 1px 0 white;
}
body.gsap-ui-ready .control-panel {
  background: rgba(252,253,255,.84);
  backdrop-filter: blur(24px) saturate(135%);
}
body.gsap-ui-ready .tabs {
  margin: 0;
  padding: 6px 8px;
  border: 0;
  border-bottom: 1px solid rgba(91,107,138,.09);
  border-radius: 0;
  background: rgba(244,247,251,.76);
  box-shadow: none;
}
body.gsap-ui-ready .tabs::before {
  top: 6px; bottom: 6px;
  background: #fff;
  border: 1px solid rgba(232,111,152,.16);
  box-shadow: 0 5px 15px rgba(38,49,75,.07);
}
body.gsap-ui-ready .tab-panel { padding: 22px 24px 26px; }
body.gsap-ui-ready .panel-title-row { margin-bottom: 16px; }
body.gsap-ui-ready .panel-title-row h1 { font-size: 22px; letter-spacing: -.04em; }
body.gsap-ui-ready .panel-title-row p { color: #8a93a6; }
body.gsap-ui-ready .meta-pill { background: rgba(239,243,248,.9); border-color: transparent; color: #788196; }

body.gsap-ui-ready .editor-mode-switch {
  padding: 3px; margin-bottom: 12px;
  background: #eef2f7; border: 0; border-radius: 11px; box-shadow: inset 0 1px 2px rgba(34,46,73,.05);
}
body.gsap-ui-ready .mode-button { border: 0; box-shadow: none; }
body.gsap-ui-ready .mode-button.is-active { background: white; color: #c94f7b; box-shadow: 0 5px 14px rgba(39,50,76,.08); }
body.gsap-ui-ready .content-format-toolbar {
  gap: 3px;
  padding: 8px;
  margin-bottom: 12px;
  border: 1px solid rgba(91,107,138,.10);
  border-radius: 12px;
  background: rgba(246,248,251,.72);
  box-shadow: none;
}
body.gsap-ui-ready .content-format-toolbar .format-select,
body.gsap-ui-ready .content-format-toolbar .format-button {
  min-height: 30px;
  border-color: transparent;
  background-color: transparent;
  box-shadow: none;
}
body.gsap-ui-ready .content-format-toolbar .format-button:hover,
body.gsap-ui-ready .content-format-toolbar .format-select:hover { background-color: white; border-color: rgba(91,107,138,.10); }
body.gsap-ui-ready .code-editor,
body.gsap-ui-ready .visual-editor {
  border: 1px solid rgba(91,107,138,.11);
  border-radius: 14px;
  background: rgba(255,255,255,.9);
  box-shadow: inset 0 1px 2px rgba(34,46,73,.035);
}
body.gsap-ui-ready .syntax-help { border: 0; background: transparent; color: #929aac; }

body.gsap-ui-ready .preview-panel { background: #e9eef5; }
body.gsap-ui-ready .preview-toolbar {
  min-height: 52px;
  color: #edf3fb;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  border-radius: 0;
  background: linear-gradient(110deg, #18243a, #21344c);
  box-shadow: 0 9px 28px rgba(22,32,51,.18);
}
body.gsap-ui-ready .preview-heading strong { color: #fff; }
body.gsap-ui-ready .preview-heading span,
body.gsap-ui-ready .zoom-control { color: #aeb9ca; }
body.gsap-ui-ready .preview-toolbar input[type="range"] { accent-color: #ef86aa; }
body.gsap-ui-ready .preview-stage {
  background:
    radial-gradient(circle at 82% 13%, rgba(75,185,202,.13), transparent 26rem),
    radial-gradient(circle at 16% 88%, rgba(232,111,152,.10), transparent 28rem),
    linear-gradient(rgba(83,104,141,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(83,104,141,.07) 1px, transparent 1px),
    #e8edf4;
  background-size: auto, auto, 22px 22px, 22px 22px, auto;
}
body.gsap-ui-ready .resume-page { box-shadow: 0 30px 80px rgba(25,36,58,.19), 0 2px 8px rgba(25,36,58,.08); }

body.gsap-ui-ready .template-card,
body.gsap-ui-ready .recipe-button,
body.gsap-ui-ready .ai-task-button {
  background: rgba(255,255,255,.74);
  border-color: rgba(91,107,138,.10);
  box-shadow: none;
}
body.gsap-ui-ready .template-card:hover,
body.gsap-ui-ready .recipe-button:hover,
body.gsap-ui-ready .ai-task-button:hover {
  border-color: rgba(75,185,202,.30);
  background: white;
  box-shadow: 0 12px 28px rgba(34,44,70,.09);
}
body.gsap-ui-ready .modal-panel,
body.gsap-ui-ready .ui-effects-panel {
  border-color: rgba(255,255,255,.82);
  background: rgba(249,251,254,.88);
  box-shadow: 0 38px 100px rgba(24,34,55,.28), inset 0 1px 0 white;
}

@media (max-width: 1120px) {
  body.gsap-ui-ready .app-command-header { grid-template-columns: auto minmax(280px,1fr) auto; gap: 12px; }
  body.gsap-ui-ready .local-status { display: none; }
  body.gsap-ui-ready .topbar-primary-actions .action-button { padding-inline: 10px; }
}

@media (max-width: 900px) {
  body.gsap-ui-ready .app-command-header {
    min-height: auto;
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 10px 12px;
  }
  body.gsap-ui-ready .brand { min-width: 0; }
  body.gsap-ui-ready .brand span { display: none; }
  body.gsap-ui-ready .document-switcher { grid-column: 1 / -1; grid-row: 2; }
  body.gsap-ui-ready .topbar-primary-actions { grid-column: 2; grid-row: 1; }
  body.gsap-ui-ready .topbar-primary-actions .export-actions { gap: 3px; }
  body.gsap-ui-ready .topbar-primary-actions .action-button {
    display: inline-flex; min-width: 42px; height: 35px; padding: 0 8px; font-size: 0;
  }
  body.gsap-ui-ready .topbar-primary-actions .action-button::before {
    content: attr(data-mobile-label); font-size: 11px; font-weight: 700;
  }
  body.gsap-ui-ready .topbar-primary-actions .action-button i,
  body.gsap-ui-ready .topbar-primary-actions .action-button span { display: none; }
  body.gsap-ui-ready .command-strip {
    overflow-x: auto; flex-wrap: nowrap; padding: 6px 9px; scrollbar-width: none;
  }
  body.gsap-ui-ready .command-strip::-webkit-scrollbar { display: none; }
  body.gsap-ui-ready .command-strip .action-group { flex: 0 0 auto; }
  body.gsap-ui-ready .command-group-label { display: none; }
  body.gsap-ui-ready .workspace {
    height: auto; min-height: 0; display: block; padding: 8px;
  }
  body.gsap-ui-ready .control-panel,
  body.gsap-ui-ready .preview-panel { min-height: 620px; border-radius: 16px; }
  body.gsap-ui-ready .preview-panel { margin-top: 9px; }
  body.gsap-ui-ready .tab-panel { padding: 20px 16px 24px; }
}

body.gsap-ui-ready.ui-theme-night {
  color: #edf3fb;
  background: radial-gradient(circle at 12% 8%, rgba(232,111,152,.10), transparent 28rem), radial-gradient(circle at 88% 24%, rgba(75,185,202,.12), transparent 32rem), #0d1422;
}
body.gsap-ui-ready.ui-theme-night .app-command-header,
body.gsap-ui-ready.ui-theme-night .command-strip { color: #eaf1fa; background: rgba(15,23,38,.84); border-color: rgba(255,255,255,.07); }
body.gsap-ui-ready.ui-theme-night .document-switcher,
body.gsap-ui-ready.ui-theme-night .tabs,
body.gsap-ui-ready.ui-theme-night .editor-mode-switch,
body.gsap-ui-ready.ui-theme-night .content-format-toolbar { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.07); }
body.gsap-ui-ready.ui-theme-night .control-panel { color: #eaf1fa; background: rgba(18,27,44,.88); border-color: rgba(255,255,255,.08); }
body.gsap-ui-ready.ui-theme-night .panel-title-row p,
body.gsap-ui-ready.ui-theme-night .command-eyebrow,
body.gsap-ui-ready.ui-theme-night .syntax-help { color: #8f9bb0; }
body.gsap-ui-ready.ui-theme-night .code-editor,
body.gsap-ui-ready.ui-theme-night .visual-editor,
body.gsap-ui-ready.ui-theme-night select:not(.sr-only) { color: #dfe7f2; background-color: rgba(8,14,25,.52); border-color: rgba(255,255,255,.08); }
body.gsap-ui-ready.ui-theme-night .mode-button.is-active,
body.gsap-ui-ready.ui-theme-night .tabs::before { color: #fff; background: rgba(255,255,255,.10); border-color: rgba(238,134,170,.20); box-shadow: 0 8px 20px rgba(0,0,0,.20); }
body.gsap-ui-ready.ui-theme-night .action-button,
body.gsap-ui-ready.ui-theme-night .mini-button,
body.gsap-ui-ready.ui-theme-night .format-toolbar button { color: #c7d0df; }
body.gsap-ui-ready.ui-theme-night .template-card,
body.gsap-ui-ready.ui-theme-night .recipe-button,
body.gsap-ui-ready.ui-theme-night .ai-task-button { color: #dfe7f2; background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.07); }
body.gsap-ui-ready.ui-theme-night .modal-panel,
body.gsap-ui-ready.ui-theme-night .ui-effects-panel { color: #eaf1fa; background: rgba(16,24,39,.92); border-color: rgba(255,255,255,.10); }

body.gsap-ui-ready.ui-theme-paper { background: radial-gradient(circle at 12% 8%, rgba(214,166,121,.10), transparent 28rem), #f3efe7; }
body.gsap-ui-ready.ui-theme-paper .preview-toolbar { background: linear-gradient(110deg, #3d3832, #5c5146); }
body.gsap-ui-ready.ui-theme-paper .control-panel { background: rgba(255,252,246,.88); }

body.gsap-ui-ready.ui-theme-mint { background: radial-gradient(circle at 88% 16%, rgba(63,176,160,.13), transparent 30rem), #eef7f5; }
body.gsap-ui-ready.ui-theme-mint .preview-toolbar { background: linear-gradient(110deg, #17383b, #24545a); }
body.gsap-ui-ready.ui-theme-mint .tab.is-active { color: #168b7d; }

body.gsap-ui-ready .preview-toolbar {
  color: #edf3fb !important;
  background: linear-gradient(110deg, #172238 0%, #203149 62%, #183e48 100%) !important;
  border-color: rgba(255,255,255,.07) !important;
  box-shadow: 0 10px 30px rgba(22,32,51,.20) !important;
}
body.gsap-ui-ready .preview-heading { gap: 8px; }
body.gsap-ui-ready .preview-heading strong { color: #fff !important; }
body.gsap-ui-ready .preview-heading > span:not(.live-indicator),
body.gsap-ui-ready .zoom-control { color: #aeb9ca !important; }
body.gsap-ui-ready .live-indicator {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 6px; border: 1px solid rgba(102,222,204,.18); border-radius: 999px;
  color: #83e0d1; background: rgba(69,194,176,.09); font-size: 9px; letter-spacing: .12em;
}
body.gsap-ui-ready .live-indicator i {
  width: 5px; height: 5px; border-radius: 50%; background: #68dac8;
  box-shadow: 0 0 0 4px rgba(104,218,200,.09), 0 0 12px rgba(104,218,200,.55);
}
body.gsap-ui-ready .zoom-control input[type="range"] { height: 4px; accent-color: #ef86aa; }
body.gsap-ui-ready .zoom-control input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 99px; background: linear-gradient(90deg, #ef86aa, #65c9d5); box-shadow: none;
}
body.gsap-ui-ready .zoom-control input[type="range"]::-webkit-slider-thumb {
  width: 14px; height: 14px; margin-top: -5px; border: 2px solid rgba(255,255,255,.9); border-radius: 50%; background: #ef86aa; box-shadow: 0 3px 12px rgba(0,0,0,.26); -webkit-appearance: none;
}

body.gsap-ui-ready.ui-theme-night .action-button:not(.primary),
body.gsap-ui-ready.ui-theme-night .mini-button:not(.primary),
body.gsap-ui-ready.ui-theme-night .toolbar-switch,
body.gsap-ui-ready.ui-theme-night .document-switcher .icon-command,
body.gsap-ui-ready.ui-theme-night .format-button {
  color: #c4cedd !important;
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(255,255,255,.075) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}
body.gsap-ui-ready.ui-theme-night .app-command-header .action-group,
body.gsap-ui-ready.ui-theme-night .command-strip .action-group {
  background: transparent !important;
  border-color: rgba(255,255,255,.07) !important;
  box-shadow: none !important;
}
body.gsap-ui-ready.ui-theme-night .command-strip .action-button,
body.gsap-ui-ready.ui-theme-night .command-strip .toolbar-switch {
  background: transparent !important;
  border-color: transparent !important;
}
body.gsap-ui-ready.ui-theme-night .command-strip .action-button:hover,
body.gsap-ui-ready.ui-theme-night .command-strip .toolbar-switch:hover {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.08) !important;
}
body.gsap-ui-ready.ui-theme-night .tabs {
  background: rgba(255,255,255,.035) !important;
  border-color: rgba(255,255,255,.06) !important;
}
body.gsap-ui-ready.ui-theme-night .tabs::before {
  background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(238,134,170,.11)) !important;
  border-color: rgba(238,134,170,.22) !important;
}
body.gsap-ui-ready.ui-theme-night .tab { color: #8f9bb0 !important; }
body.gsap-ui-ready.ui-theme-night .tab.is-active { color: #ffd8e5 !important; }
body.gsap-ui-ready.ui-theme-night .code-editor,
body.gsap-ui-ready.ui-theme-night .visual-editor,
body.gsap-ui-ready.ui-theme-night .field textarea,
body.gsap-ui-ready.ui-theme-night .field input:not([type="range"]):not([type="checkbox"]):not([type="color"]),
body.gsap-ui-ready.ui-theme-night select:not(.sr-only) {
  color: #dfe7f2 !important;
  background-color: rgba(6,12,22,.58) !important;
  border-color: rgba(255,255,255,.075) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.18) !important;
}
body.gsap-ui-ready.ui-theme-night .ui-theme-options button,
body.gsap-ui-ready.ui-theme-night .ui-button-style-options button {
  color: #d8e0ec !important;
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: none !important;
}
body.gsap-ui-ready.ui-theme-night .ui-theme-options button[aria-pressed="true"],
body.gsap-ui-ready.ui-theme-night .ui-button-style-options button[aria-pressed="true"] {
  border-color: rgba(238,134,170,.32) !important;
  background: rgba(238,134,170,.10) !important;
  box-shadow: 0 0 0 3px rgba(238,134,170,.06) !important;
}
.mobile-tools-toggle { display: none; }

@media (min-width: 901px) {
  body.gsap-ui-ready .app-command-header {
    padding-inline: 22px;
  }
  body.gsap-ui-ready .document-switcher {
    max-width: 560px;
    justify-self: stretch;
  }
  body.gsap-ui-ready .topbar-primary-actions .action-button.primary {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #e96998 0%, #8b6fe9 55%, #526fe8 100%);
    box-shadow: 0 9px 24px rgba(111, 91, 214, .24);
  }
  body.gsap-ui-ready .command-strip {
    padding-inline: 20px;
  }
  body.gsap-ui-ready .workspace {
    grid-template-columns: minmax(380px, 410px) minmax(0, 1fr);
    gap: 16px;
    padding: 16px;
  }
  body.gsap-ui-ready .control-panel,
  body.gsap-ui-ready .preview-panel {
    border-radius: 22px;
  }
  body.gsap-ui-ready .control-panel {
    box-shadow: 0 18px 50px rgba(34,44,70,.09), inset 0 1px 0 #fff;
  }
  body.gsap-ui-ready .preview-panel {
    border-color: rgba(29,43,67,.08);
    box-shadow: 0 24px 64px rgba(25,36,58,.14);
  }
  body.gsap-ui-ready .preview-toolbar {
    padding-inline: 18px;
    background:
      radial-gradient(circle at 84% 0%, rgba(238,134,170,.22), transparent 16rem),
      linear-gradient(115deg, #17243a, #243a56);
  }
  body.gsap-ui-ready .tab-panel {
    padding: 24px 26px 30px;
  }
  body.gsap-ui-ready .panel-title-row h1 {
    font-size: 23px;
  }
}

@media (max-width: 620px) {
  body.gsap-ui-ready { padding-bottom: 66px; }
  body.gsap-ui-ready .app-command-header {
    min-height: 58px;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 8px;
    padding: 8px 10px;
  }
  body.gsap-ui-ready .brand { min-width: 0; width: 38px; }
  body.gsap-ui-ready .brand-mark { width: 36px; height: 36px; border-radius: 12px; }
  body.gsap-ui-ready .brand > div:last-child { display: none; }
  body.gsap-ui-ready .document-switcher {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    gap: 3px;
    padding: 3px;
    border-radius: 12px;
  }
  body.gsap-ui-ready .command-eyebrow { display: none; }
  body.gsap-ui-ready .document-switcher .resume-select {
    min-width: 0;
    height: 34px;
    padding-left: 8px;
    font-size: 13px;
  }
  body.gsap-ui-ready .document-switcher .icon-command {
    width: 34px;
    min-width: 34px;
    height: 34px;
  }
  body.gsap-ui-ready .document-switcher #duplicateResumeButton,
  body.gsap-ui-ready .document-switcher #deleteResumeButton { display: none; }
  body.gsap-ui-ready.mobile-tools-open .document-switcher #duplicateResumeButton,
  body.gsap-ui-ready.mobile-tools-open .document-switcher #deleteResumeButton { display: inline-flex; }
  body.gsap-ui-ready .mobile-tools-toggle {
    display: inline-flex;
    min-width: 44px;
    height: 34px;
    padding: 0 9px;
    border: 0;
    background: #fff;
    box-shadow: 0 3px 10px rgba(34,46,73,.08);
    color: #566176;
    font-size: 12px;
    font-weight: 700;
  }
  body.gsap-ui-ready .mobile-tools-toggle[aria-expanded="true"] {
    color: #fff;
    background: #1d2b43;
  }
  body.gsap-ui-ready .topbar-primary-actions {
    position: fixed;
    z-index: 80;
    left: 10px;
    right: 10px;
    bottom: max(8px, env(safe-area-inset-bottom));
    display: block;
  }
  body.gsap-ui-ready .topbar-primary-actions .local-status { display: none; }
  body.gsap-ui-ready .topbar-primary-actions .export-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1.25fr;
    gap: 5px;
    padding: 5px;
    border: 1px solid rgba(91,107,138,.13);
    border-radius: 15px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 14px 38px rgba(24,34,55,.22);
    backdrop-filter: blur(22px) saturate(150%);
  }
  body.gsap-ui-ready .topbar-primary-actions .action-button {
    width: 100%;
    min-width: 0;
    height: 42px;
    border-radius: 11px;
  }
  body.gsap-ui-ready .topbar-primary-actions .action-button.primary {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #e96998, #6e70e6);
    box-shadow: 0 7px 18px rgba(110,112,230,.25);
  }
  body.gsap-ui-ready .command-strip {
    display: none;
    position: relative;
    z-index: 70;
    overflow: visible;
    flex-wrap: wrap;
    gap: 5px;
    padding: 8px 10px 10px;
    background: rgba(248,250,253,.97);
    border-bottom: 1px solid rgba(91,107,138,.11);
    box-shadow: 0 14px 30px rgba(31,43,68,.12);
  }
  body.gsap-ui-ready.mobile-tools-open .command-strip { display: flex; }
  body.gsap-ui-ready .command-strip .action-group {
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 3px;
    margin: 0;
    padding: 0;
    border: 0;
  }
  body.gsap-ui-ready .command-strip .action-button,
  body.gsap-ui-ready .command-strip .toolbar-switch {
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(91,107,138,.10);
    border-radius: 9px;
    background: #fff;
  }
  body.gsap-ui-ready .command-strip .reset-action { margin-left: auto; }
  body.gsap-ui-ready .workspace { padding: 6px; }
  body.gsap-ui-ready .control-panel,
  body.gsap-ui-ready .preview-panel { min-height: 0; border-radius: 14px; }
  body.gsap-ui-ready .tab-panel { padding: 18px 14px 22px; }
  body.gsap-ui-ready .panel-title-row { margin-bottom: 13px; }
  body.gsap-ui-ready .panel-title-row h1 { font-size: 20px; }
  body.gsap-ui-ready .tabs { padding: 5px 6px; }
}

@media (max-width: 620px) {
  body.gsap-ui-ready.ui-theme-night .topbar-primary-actions .export-actions {
    background: rgba(17,23,35,.94);
    border-color: rgba(255,255,255,.09);
  }
  body.gsap-ui-ready.ui-theme-night .command-strip {
    background: rgba(15,21,32,.98);
    border-color: rgba(255,255,255,.07);
  }
}


@media (max-width: 620px) {
  body.gsap-ui-ready .app-command-header {
    transform: none !important;
    filter: none !important;
    backdrop-filter: none;
    will-change: auto !important;
  }
  body.gsap-ui-ready .topbar-primary-actions {
    transform: none !important;
    will-change: auto !important;
  }
}

/* V2 visual system: professional, quiet, and consistent */
body.gsap-ui-ready {
  --v2-accent: #4f46e5;
  --v2-accent-hover: #4338ca;
  --v2-ink: #172033;
  --v2-muted: #667085;
  --v2-line: #e2e6ed;
  --v2-soft: #f5f7fa;
  color: var(--v2-ink);
  background: #f3f5f8;
}
body.gsap-ui-ready::before {
  opacity: 0;
  background: none;
}
body.gsap-ui-ready:not(.ui-theme-night) .app-command-header {
  color: var(--v2-ink);
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--v2-line);
  box-shadow: none;
  backdrop-filter: blur(16px);
}
body.gsap-ui-ready .brand-mark {
  border: 0;
  color: #fff;
  background: #20283a;
  box-shadow: 0 4px 12px rgba(23,32,51,.16);
}
body.gsap-ui-ready .brand-mark svg { display: none; }
body.gsap-ui-ready .brand-mark::before {
  content: "R";
  font: 750 18px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.04em;
}
body.gsap-ui-ready .brand:hover .brand-mark {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(23,32,51,.18);
}
body.gsap-ui-ready .brand strong {
  color: var(--v2-ink);
  font-weight: 720;
}
body.gsap-ui-ready .brand span {
  color: #8b93a3;
  letter-spacing: .08em;
}
body.gsap-ui-ready:not(.ui-theme-night) .document-switcher {
  border: 1px solid #e5e8ee;
  border-radius: 10px;
  background: #f7f8fa;
  box-shadow: none;
}
body.gsap-ui-ready:not(.ui-theme-night) .document-switcher .resume-select {
  color: #263044;
  font-weight: 650;
}
body.gsap-ui-ready:not(.ui-theme-night) :is(.action-button, .mini-button, .toolbar-switch) {
  color: #3f4a5e !important;
  border: 1px solid #e1e5eb !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(16,24,40,.035) !important;
  backdrop-filter: none !important;
}
body.gsap-ui-ready:not(.ui-theme-night) :is(.action-button, .mini-button, .toolbar-switch):hover {
  color: #242d3f !important;
  border-color: #cbd1db !important;
  background: #f8f9fb !important;
  box-shadow: 0 2px 5px rgba(16,24,40,.06) !important;
  transform: translateY(-1px);
}
body.gsap-ui-ready:not(.ui-theme-night) :is(.action-button.primary, .mini-button.primary) {
  color: #fff !important;
  border-color: var(--v2-accent) !important;
  background: var(--v2-accent) !important;
  box-shadow: 0 3px 9px rgba(79,70,229,.22) !important;
}
body.gsap-ui-ready:not(.ui-theme-night) :is(.action-button.primary, .mini-button.primary):hover {
  color: #fff !important;
  border-color: var(--v2-accent-hover) !important;
  background: var(--v2-accent-hover) !important;
}
body.gsap-ui-ready .action-button.primary::before,
body.gsap-ui-ready .action-button.primary::after {
  display: none !important;
}
body.gsap-ui-ready:not(.ui-theme-night) .danger-ghost {
  color: #b42318 !important;
}
body.gsap-ui-ready:not(.ui-theme-night) .danger-ghost:hover {
  border-color: #fecaca !important;
  background: #fff5f5 !important;
}
body.gsap-ui-ready:not(.ui-theme-night) .document-switcher .icon-command {
  color: #536074 !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.gsap-ui-ready:not(.ui-theme-night) .document-switcher .icon-command:hover {
  color: #20283a !important;
  background: #eceff4 !important;
}
body.gsap-ui-ready:not(.ui-theme-night) .command-strip {
  color: #4d586b;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--v2-line);
  box-shadow: none;
}
body.gsap-ui-ready:not(.ui-theme-night) .command-strip .action-group {
  border-color: #e3e7ed;
}
body.gsap-ui-ready:not(.ui-theme-night) .command-strip .action-button,
body.gsap-ui-ready:not(.ui-theme-night) .command-strip .toolbar-switch {
  min-height: 32px;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.gsap-ui-ready:not(.ui-theme-night) .command-strip .action-button:hover,
body.gsap-ui-ready:not(.ui-theme-night) .command-strip .toolbar-switch:hover {
  border-color: #e2e6ec !important;
  background: #f4f6f8 !important;
}
body.gsap-ui-ready:not(.ui-theme-night) .workspace {
  background: #f3f5f8;
}
body.gsap-ui-ready:not(.ui-theme-night) .control-panel,
body.gsap-ui-ready:not(.ui-theme-night) .preview-panel {
  border: 1px solid #e1e5eb;
  background: #fff;
  box-shadow: 0 8px 24px rgba(16,24,40,.055);
}
body.gsap-ui-ready:not(.ui-theme-night) .tabs {
  border-bottom: 1px solid #e8ebf0;
  background: #fff;
}
body.gsap-ui-ready .tabs::before { display: none; }
body.gsap-ui-ready:not(.ui-theme-night) .tab {
  color: #697386 !important;
  border-radius: 7px;
}
body.gsap-ui-ready:not(.ui-theme-night) .tab:hover {
  color: #303a4d !important;
  background: #f4f6f8 !important;
}
body.gsap-ui-ready:not(.ui-theme-night) .tab.is-active {
  color: var(--v2-accent) !important;
  background: #eef0ff !important;
  box-shadow: none !important;
}
body.gsap-ui-ready:not(.ui-theme-night) .panel-title-row h1 {
  color: #1d2638;
  font-weight: 740;
}
body.gsap-ui-ready:not(.ui-theme-night) .panel-title-row p,
body.gsap-ui-ready:not(.ui-theme-night) .meta-pill {
  color: #7a8496;
}
body.gsap-ui-ready:not(.ui-theme-night) .meta-pill {
  border: 0;
  background: #f3f5f8;
}
body.gsap-ui-ready:not(.ui-theme-night) .editor-mode-switch {
  border: 1px solid #e2e6ec;
  border-radius: 9px;
  background: #f4f6f8;
  box-shadow: none;
}
body.gsap-ui-ready:not(.ui-theme-night) .mode-button {
  color: #687386;
  border-radius: 7px;
}
body.gsap-ui-ready:not(.ui-theme-night) .mode-button.is-active {
  color: #303a4d;
  background: #fff;
  box-shadow: 0 1px 4px rgba(16,24,40,.08);
}
body.gsap-ui-ready:not(.ui-theme-night) .content-format-toolbar {
  border-color: #e2e6ec;
  border-radius: 10px;
  background: #fafbfc;
}
body.gsap-ui-ready:not(.ui-theme-night) :is(.format-button, .format-select) {
  color: #536074;
  border-radius: 6px;
}
body.gsap-ui-ready:not(.ui-theme-night) :is(.format-button, .format-select):hover {
  color: var(--v2-accent);
  background: #eef0ff;
}
body.gsap-ui-ready:not(.ui-theme-night) :is(.code-editor, .visual-editor) {
  border-color: #dfe4eb;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(16,24,40,.025);
}
body.gsap-ui-ready:not(.ui-theme-night) .preview-panel {
  overflow: hidden;
  background: #edf0f4;
}
body.gsap-ui-ready:not(.ui-theme-night) .preview-toolbar {
  color: #263044;
  border-bottom: 1px solid #dde2e9;
  background: #fff;
  box-shadow: none;
}
body.gsap-ui-ready:not(.ui-theme-night) .preview-heading strong {
  color: #1f293b;
}
body.gsap-ui-ready:not(.ui-theme-night) .preview-heading span,
body.gsap-ui-ready:not(.ui-theme-night) .zoom-control {
  color: #778196;
}
body.gsap-ui-ready:not(.ui-theme-night) .preview-stage {
  background:
    linear-gradient(rgba(105,118,140,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(105,118,140,.045) 1px, transparent 1px),
    #edf0f4;
  background-size: 24px 24px;
}
body.gsap-ui-ready:not(.ui-theme-night) .resume-page {
  box-shadow: 0 20px 54px rgba(26,35,52,.15), 0 2px 6px rgba(26,35,52,.06);
}
body.gsap-ui-ready .mobile-resume-actions { display: none !important; }

@media (min-width: 901px) {
  body.gsap-ui-ready .workspace {
    grid-template-columns: minmax(370px, 400px) minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
  }
  body.gsap-ui-ready .control-panel,
  body.gsap-ui-ready .preview-panel {
    border-radius: 14px;
  }
  body.gsap-ui-ready .tab-panel { padding: 22px 24px 28px; }
}

@media (max-width: 620px) {
  body.gsap-ui-ready:not(.ui-theme-night) .app-command-header {
    background: #fff;
    border-bottom-color: #e5e8ed;
    backdrop-filter: none;
  }
  body.gsap-ui-ready .brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }
  body.gsap-ui-ready:not(.ui-theme-night) .document-switcher {
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  body.gsap-ui-ready .document-switcher #duplicateResumeButton,
  body.gsap-ui-ready .document-switcher #deleteResumeButton,
  body.gsap-ui-ready.mobile-tools-open .document-switcher #duplicateResumeButton,
  body.gsap-ui-ready.mobile-tools-open .document-switcher #deleteResumeButton {
    display: none !important;
  }
  body.gsap-ui-ready:not(.ui-theme-night) .document-switcher .resume-select {
    border: 1px solid #e1e5eb;
    border-radius: 8px;
    background: #f7f8fa;
  }
  body.gsap-ui-ready:not(.ui-theme-night) .mobile-tools-toggle,
  body.gsap-ui-ready:not(.ui-theme-night) .mobile-tools-toggle[aria-expanded="true"] {
    color: #3f4a5e !important;
    border-color: #e1e5eb !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  body.gsap-ui-ready:not(.ui-theme-night) .topbar-primary-actions .export-actions {
    border: 1px solid #dfe4eb;
    border-radius: 13px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 10px 28px rgba(16,24,40,.16);
  }
  body.gsap-ui-ready .topbar-primary-actions .action-button {
    height: 40px;
    border-radius: 8px !important;
  }
  body.gsap-ui-ready:not(.ui-theme-night) .topbar-primary-actions .action-button.primary {
    color: #fff !important;
    border-color: var(--v2-accent) !important;
    background: var(--v2-accent) !important;
    box-shadow: none !important;
  }
  body.gsap-ui-ready .command-strip {
    position: fixed;
    z-index: 90;
    left: 10px;
    right: 10px;
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + 62px);
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    padding: 14px;
    border: 1px solid #dfe4eb;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 20px 55px rgba(16,24,40,.24);
  }
  body.gsap-ui-ready.mobile-tools-open .command-strip {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  body.gsap-ui-ready.mobile-tools-open::after {
    position: fixed;
    z-index: 60;
    inset: 59px 0 0;
    background: rgba(20,28,43,.20);
    content: "";
    pointer-events: none;
  }
  body.gsap-ui-ready .command-strip .action-group,
  body.gsap-ui-ready .mobile-resume-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
  }
  body.gsap-ui-ready .mobile-resume-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.gsap-ui-ready .command-group-label {
    display: block;
    grid-column: 1 / -1;
    margin: 0 0 1px;
    color: #8a93a3;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
  }
  body.gsap-ui-ready:not(.ui-theme-night) .command-strip .action-button,
  body.gsap-ui-ready:not(.ui-theme-night) .command-strip .toolbar-switch {
    min-width: 0;
    min-height: 38px;
    justify-content: center;
    padding: 0 8px;
    border: 1px solid #e2e6ec !important;
    border-radius: 8px !important;
    background: #f8f9fb !important;
  }
  body.gsap-ui-ready .command-strip .reset-action {
    width: 100%;
    min-height: 38px;
    margin: 0;
  }
  body.gsap-ui-ready:not(.ui-theme-night) .control-panel {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  body.gsap-ui-ready:not(.ui-theme-night) .tabs {
    padding: 6px 8px;
    border-radius: 0;
  }
  body.gsap-ui-ready .tab-panel { padding: 18px 16px 22px; }
}

/* V2 brand mark and expanded theme palette */
body.gsap-ui-ready .brand-mark {
  background: linear-gradient(145deg, var(--v2-brand-a, #5b57e8), var(--v2-brand-b, #312e81));
}
body.gsap-ui-ready .brand-mark::before { display: none; }
body.gsap-ui-ready .brand-mark svg {
  display: block;
  width: 28px;
  height: 28px;
}
body.gsap-ui-ready .resume-mark-paper {
  fill: rgba(255,255,255,.13);
  stroke: rgba(255,255,255,.96);
  stroke-width: 1.45;
  stroke-linejoin: round;
}
body.gsap-ui-ready .resume-mark-fold {
  fill: none;
  stroke: rgba(255,255,255,.96);
  stroke-width: 1.45;
  stroke-linejoin: round;
}
body.gsap-ui-ready .resume-mark-r { fill: #fff; }
body.gsap-ui-ready .resume-mark-dot {
  fill: var(--v2-brand-dot, #9ef0d8);
  stroke: rgba(255,255,255,.9);
  stroke-width: 1;
}

body.gsap-ui-ready.ui-theme-indigo {
  --v2-accent: #4f46e5;
  --v2-accent-hover: #3f37c9;
  --v2-brand-a: #625cf0;
  --v2-brand-b: #312e81;
  --v2-brand-dot: #a7f3d0;
  --v2-theme-shell: #f2f4f8;
}
body.gsap-ui-ready.ui-theme-rose {
  --v2-accent: #c64d78;
  --v2-accent-hover: #aa3d66;
  --v2-brand-a: #e96f9c;
  --v2-brand-b: #9f3e68;
  --v2-brand-dot: #ffe29a;
  --v2-theme-shell: #f7f2f5;
}
body.gsap-ui-ready.ui-theme-paper {
  --v2-accent: #896744;
  --v2-accent-hover: #705237;
  --v2-brand-a: #b18a61;
  --v2-brand-b: #6e5136;
  --v2-brand-dot: #f2cf80;
  --v2-theme-shell: #f4f0e8;
}
body.gsap-ui-ready.ui-theme-mint {
  --v2-accent: #148578;
  --v2-accent-hover: #0e6d63;
  --v2-brand-a: #28a899;
  --v2-brand-b: #11665e;
  --v2-brand-dot: #d9ff8f;
  --v2-theme-shell: #edf7f4;
}
body.gsap-ui-ready.ui-theme-ocean {
  --v2-accent: #0c7891;
  --v2-accent-hover: #086278;
  --v2-brand-a: #18a1b9;
  --v2-brand-b: #164e63;
  --v2-brand-dot: #ffe08a;
  --v2-theme-shell: #edf4f7;
}
body.gsap-ui-ready:not(.ui-theme-night) {
  background: var(--v2-theme-shell, #f2f4f8);
}
body.gsap-ui-ready:not(.ui-theme-night) .workspace {
  background: var(--v2-theme-shell, #f2f4f8);
}
body.gsap-ui-ready.ui-theme-rose:not(.ui-theme-night) :is(.app-command-header, .control-panel, .tabs, .preview-toolbar) {
  background: #fffafd;
}
body.gsap-ui-ready.ui-theme-paper:not(.ui-theme-night) :is(.app-command-header, .control-panel, .tabs, .preview-toolbar) {
  background: #fffdf8;
}
body.gsap-ui-ready.ui-theme-mint:not(.ui-theme-night) :is(.app-command-header, .control-panel, .tabs, .preview-toolbar) {
  background: #fbfffe;
}
body.gsap-ui-ready.ui-theme-ocean:not(.ui-theme-night) :is(.app-command-header, .control-panel, .tabs, .preview-toolbar) {
  background: #fbfdff;
}
body.gsap-ui-ready.ui-theme-night {
  --v2-brand-a: #8b5cf6;
  --v2-brand-b: #243b68;
  --v2-brand-dot: #67e8f9;
}
.theme-orb.indigo { background: linear-gradient(145deg, #625cf0, #312e81); }
.theme-orb.ocean { background: linear-gradient(145deg, #20a7be, #164e63); }
body.gsap-ui-ready .ui-theme-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.gsap-ui-ready .document-switcher .icon-command svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Remove legacy pink accents from the unified V2 component system */
body.gsap-ui-ready {
  --ui-primary: var(--v2-accent);
  --ui-primary-dark: var(--v2-accent-hover);
  --tech-pink: var(--v2-accent);
  --tech-pink-deep: var(--v2-accent);
}
body.gsap-ui-ready:not(.ui-theme-night) .preview-toolbar {
  color: #263044 !important;
  border-color: #dde2e9 !important;
  background: #fff !important;
  box-shadow: none !important;
}
body.gsap-ui-ready:not(.ui-theme-night) .preview-heading strong {
  color: #1f293b !important;
}
body.gsap-ui-ready:not(.ui-theme-night) .preview-heading > span:not(.live-indicator),
body.gsap-ui-ready:not(.ui-theme-night) .zoom-control {
  color: #778196 !important;
}
body.gsap-ui-ready:not(.ui-theme-night) .mode-button {
  color: #687386 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.gsap-ui-ready:not(.ui-theme-night) .mode-button.is-active {
  color: var(--v2-accent) !important;
  background: color-mix(in srgb, var(--v2-accent) 9%, white) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v2-accent) 14%, transparent) !important;
}
body.gsap-ui-ready:not(.ui-theme-night) .ui-effects-panel {
  color: #263044;
  border: 1px solid #dde2e9;
  background: rgba(255,255,255,.97);
  backdrop-filter: none !important;
}
body.gsap-ui-ready:not(.ui-theme-night) .ui-theme-select {
  color: #394458;
  border-color: #dfe4eb;
  background: #f8f9fb;
}
body.gsap-ui-ready:not(.ui-theme-night) .ui-effect-control b {
  color: var(--v2-accent);
}
body.gsap-ui-ready:not(.ui-theme-night) .ui-effect-control input,
body.gsap-ui-ready:not(.ui-theme-night) .ui-effect-switch input {
  accent-color: var(--v2-accent);
}
body.gsap-ui-ready:not(.ui-theme-night) .ui-theme-options button {
  color: #445066;
  border-color: #e1e5eb;
  border-radius: 9px;
  background: #f8f9fb;
  box-shadow: none;
}
body.gsap-ui-ready:not(.ui-theme-night) .ui-theme-options button:hover {
  border-color: #cdd3dd;
  background: #fff;
}
body.gsap-ui-ready:not(.ui-theme-night) .ui-theme-options button[aria-pressed="true"] {
  color: var(--v2-accent);
  border-color: color-mix(in srgb, var(--v2-accent) 35%, #dfe4eb);
  background: color-mix(in srgb, var(--v2-accent) 7%, white);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--v2-accent) 8%, transparent);
}
body.gsap-ui-ready:not(.ui-theme-night) .zoom-control input[type="range"] {
  accent-color: var(--v2-accent);
}
body.gsap-ui-ready:not(.ui-theme-night) .zoom-control input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--v2-accent), #cbd3df);
}
body.gsap-ui-ready:not(.ui-theme-night) .zoom-control input[type="range"]::-webkit-slider-thumb {
  background: var(--v2-accent);
}