:root {
  /* =========================================
     Design System 2.0: "Tickmao Refined"
     ========================================= */

  /* Colors - Strict B&W */
  --primary: #000000;
  /* Deep Black (Active, Text) */
  --surface: #ffffff;
  /* Pure White */
  --surface-hover: #f7f7f7;
  /* Light Grey Interaction */
  --border: rgba(0, 0, 0, 0.06);
  /* Subtle separation */
  --border-hover: rgba(0, 0, 0, 0.12);
  /* Interactive border */
  --text-secondary: #666666;
  /* Captions, Labels */

  /* Geometry - Consistent Roundness */
  --radius-s: 6px;
  /* Controls, Inputs, Buttons */
  --radius-m: 12px;
  /* Dialogs, Popovers, Cards */

  /* Animation - Spring Physics */
  --transition-spring: cubic-bezier(0.25, 0.8, 0.25, 1);
  --header-height: 60px;

  /* Shadows - Layering */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
  /* Premium Float */

  /* Typography */
  --font-serif: "PT Serif", "Songti SC", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: "Menlo", "Monaco", "Courier New", monospace;
}

/* Global Reset for Layout Robustness */
*,
*:before,
*:after {
  box-sizing: border-box;
}

/* Premium Scrollbars: Hidden for Zen Experience */
::-webkit-scrollbar {
  display: none;
}

/* FOUC Prevention */
[v-cloak] {
  display: none !important;
}

/* Hide scrollbar properties (redundant with display:none) */

/* For Firefox */
* {
  scrollbar-width: none;
}

body {
  margin: 0;
  padding: 0;
  outline: none;
  overflow: hidden;
}

html,
body {
  height: 100%;
  scrollbar-gutter: stable;
  /* Prevent layout shift */
  font-family: var(--font-sans);
  color: var(--primary);
  background-color: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.author-link {
  color: #666666;
  /* Strict B&W: Neutral Grey */
  text-decoration: none;
  cursor: pointer;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 999px;
  /* Pill Shape */
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  background: transparent;
  /* Default */
}

.author-link:hover {
  background: #000000;
  /* Strict B&W: Pure Black */
  color: #ffffff;
  /* Strict B&W: Pure White */
  /* Consistent with Header Buttons */
  opacity: 1;
  text-decoration: none;
  transform: translateY(-1px);
  /* Subtle lift matches other interactions */
}

a {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s;
}

a:hover {
  opacity: 0.8;
}

/* Layout Container */
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* =========================================
   1. Top Navigation (Medium Web Header)
   ========================================= */
.top {
  height: var(--header-height);
  background-color: var(--surface);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  /* Ultra subtle */
  z-index: 100;
  transition: all 0.3s ease;
  /* FIX: Fixed Header */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

/* Compensate for fixed header */
.main-body {
  padding-top: var(--header-height) !important;
  height: 100vh;
  /* Ensure full height */
  overflow: hidden;
  /* Prevent double scrollbar, allow inner cols to scroll */
}

/* Logo - Serif Authority */
.top .logo {
  display: flex;
  align-items: center;
}

.logo-text {
  font-family: var(--font-serif);
  /* Key Change */
  font-weight: 700;
  font-size: 22px;
  /* Prominent */
  color: #000;
  letter-spacing: -0.03em;
  /* Tight tracking */
}

/* Controls */
.ctrl {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Tighter grouping */
}

/* Aa Button - Circle Stroke */
.aa-button {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  /* Design System: Subtler stroke */
  border: 1px solid #ddd !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  /* Relaxed spacing handling by gap */
  background: transparent !important;
  font-family: var(--font-serif) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #1a1a1a !important;
}

.aa-button:hover {
  /* Design System: Active State (Black/White) */
  background-color: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
  transform: translateY(-1px);
}

/* Copy Button - Black Pill (No Icon) */
.copy-button {
  background-color: #0f0f0f !important;
  color: #fff !important;
  border: none !important;
  border-radius: 100px !important;
  height: 36px !important;
  /* Increased to 36px */
  padding: 0 24px !important;
  /* Increased padding to 24px */
  font-family: var(--font-sans) !important;
  /* Brand Font */
  font-size: 15px !important;
  /* Increased to 15px */
  font-weight: 500 !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.2px;
  display: flex !important;
  align-items: center !important;
  margin-left: 0 !important;
}

.copy-button:hover {
  background-color: #000 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.copy-button:active {
  transform: scale(0.98);
  box-shadow: none;
}

/* About Button - Circle Stroke (Match Aa) */
.about {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid #ddd !important;
  /* Consistent Stroke */
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: transparent !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: var(--font-serif) !important;
  font-weight: 500 !important;
  font-style: italic !important;
  font-size: 16px !important;
  color: #1a1a1a !important;
}

.about:hover {
  /* Design System: Active State */
  background-color: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
  /* Fixed: Text turns white */
  transform: translateY(-1px);
}


/* =========================================
   2. Editor & Preview (Immersive Content)
   ========================================= */
.main-body {
  padding-top: var(--header-height) !important;
  height: 100vh;
  display: flex !important;
  flex-direction: row !important;
  /* Architecture: Force horizontal layout */
  overflow: hidden;
  background-color: var(--surface);
}

/* About Dialog Content Refinements */
/* About Dialog Content Refinements (Inline Layout) */
/* =========================================
   4. Brand Card Dialog (About)
   ========================================= */

/* Remove Default Element UI Styles */
.about-dialog {
  border-radius: 20px !important;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12) !important;
  margin-top: 10vh !important;
  /* Move dialog higher up */
}

.about-dialog .el-dialog__header {
  padding: 24px 32px 0 32px !important;
  text-align: center;
}

.about-dialog .el-dialog__title {
  font-family: var(--font-serif);
  font-weight: 700 !important;
  font-size: 20px !important;
  color: #000 !important;
  letter-spacing: -0.02em;
}

/* =========================================
   ABOUT DIALOG (PREMIUM REDESIGN)
   ========================================= */

.about-dialog .el-dialog__header {
  display: none !important;
  /* Custom Header */
}

.about-dialog .el-dialog__body {
  padding: 0 !important;
}

.about-content {
  padding: 40px 32px 32px 32px;
  text-align: center;
  font-family: var(--font-sans);
}

/* 1. Header */
/* 1. Header (Refined Vertical Stack) */
.about-header {
  margin-bottom: 24px;
}

.about-logo {
  width: 48px;
  /* Reduced from 64px */
  height: 48px;
  /* Reduced from 64px */
  background: #000;
  border-radius: 12px;
  /* Adjusted radius for smaller size */
  margin: 0 auto 12px;
  /* Center with reduced margin */
  display: flex;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  /* Softer shadow for lighter feel */
}

.about-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  /* Match container */
}

.about-title {
  font-family: var(--font-serif);
  font-size: 24px;
  /* Reduced from 32px to 24px */
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 4px 0;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.brand-intro {
  font-size: 13px;
  color: #666;
  margin: 0;
  letter-spacing: 0.02em;
}

/* 2. Features Grid (App Store Style) */
.brand-features {
  display: flex;
  justify-content: center;
  gap: 24px;
  /* Tightly packed */
  margin-bottom: 24px;
  /* Reduced from 40px */
}

.brand-feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.feature-icon {
  width: 40px;
  /* Reduced from 48px */
  height: 40px;
  /* Reduced from 48px */
  /* De-boxing: Remove background */
  background: transparent;
  /* border-radius: 16px; optional since no bg */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-size: 20px;
  /* Removed transition and hover effects to indicate static content */
}

/* Removed .brand-feature-item:hover rule to prevent misleading click affordance */

.brand-feature-item span {
  font-size: 12px;
  color: #888;
  font-weight: 500;
}

.feature-icon i {
  font-size: 20px;
  /* Reduced to 20px */
  /* Scale up icon size for better visibility w/o bg */
  color: #1a1a1a;
}

/* 3. Author Card (Vertical Stack Layout) */
.author-card {
  background: transparent;
  border-radius: 0;
  padding: 24px 0 16px;
  /* Reduced top padding from 32px */
  /* More top padding */
  display: flex;
  flex-direction: column;
  /* Vertical Stack */
  align-items: center;
  /* Center Align */
  justify-content: center;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

/* Group 1: Author Info */
.author-info {
  margin-bottom: 24px;
  text-align: center;
}

.author-info h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-serif);
  color: #1a1a1a;
}

.author-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  /* Slightly larger links */
  color: #999;
}

/* Group 2: QR Code */
.author-qr {
  width: 100%;
  display: flex;
  justify-content: center;
}

.qr-code-wrapper {
  width: 120px;
  /* Specific size for vertical visual */
  height: 120px;
  overflow: hidden;
  border-radius: 0;
  /* No radius needed visually if blended */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Optional: Zoom effect can be kept or removed.
     Keeping it simple for now, or retaining previous zoom logic if user liked it.
     Let's clean it up to show the full QR clearly. */
}

/* Ensure QR image fits perfectly centered */
.qr-code-wrapper img {
  width: 120%;
  /* Slight zoom to crop borders if needed, or 100% */
  height: 120%;
  object-fit: contain;
}



.qr-label {
  font-size: 10px;
  color: #999;
  font-weight: 500;
  display: block;
  transform: scale(0.9);
}

.author-qr img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Mobile Adaption */
@media screen and (max-width: 800px) {
  .about-dialog {
    width: 90% !important;
  }
}


.main-section {
  display: flex;
  width: 100%;
  max-width: 100%;
  /* Use full width */
  margin: 0;
}

/* Left: Editor Column (Main Workspace) */
.editor-col {
  flex: 1;
  /* Architecture: Take all remaining space */
  min-width: 0;
  /* Prevent flex overflow */
  height: 100%;
  border-right: 1px solid var(--border);
  background-color: var(--surface);
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

#editor {
  /* Reset textarea styles */
  display: none;
}

/* Wrapper */
.code-mirror-wrapper {
  width: 100%;
  max-width: 900px;
  /* Increased max-width for better writing exp */
  margin: 0 auto;
  padding: 0 40px;
  /* Spacious horizontal padding */
  height: auto !important;
  min-height: 100%;
  box-sizing: border-box;
  position: relative;
  padding-bottom: 100px;
}

/* CodeMirror Specifics: Auto-Height Mode */
.CodeMirror {
  height: auto !important;
  min-height: 100%;
  width: 100%;
  max-width: none !important;
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.7;
  background-color: transparent !important;
}

/* Zen Mode: Centered Writing Column */
.CodeMirror-lines {
  margin: 0 auto;
  padding: 40px 0 !important;
  /* Vertical padding only */
  box-sizing: border-box;
}

.cm-s-base16-light .CodeMirror-selected {
  background: #e2e2e2 !important;
}

/* Right: Preview (Fixed Sidebar) */
/* Architecture: Fixed width to ensure phone preview is always perfect */
.preview-wrapper {
  flex: 0 0 480px;
  /* Fixed Width: 375px Phone + Padding */
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #fafafa;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 0;
  border-left: 1px solid var(--border);
}

.preview {
  width: 375px;
  /* Mobile Viewport (iPhone Standard) */
  min-height: 844px;
  /* User Request: Default Phone Height */
  /* iPhone 12/13 Height */
  height: auto;
  /* Allow growth */
  background-color: #fff;

  /* Architecture Fix: Decouple height from parent */

  /* Refined Shadow - Soft Ambient (iOS Style) */
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.04), 0 4px 8px -2px rgba(0, 0, 0, 0.02);
  border-radius: 8px;
  /* Sharp, professional corners (Requested by user) */
  border: 1px solid #e0e0e0;
  /* Subtle border */

  margin: 0 auto;
  margin-bottom: 60px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Round corners clip content */
  box-sizing: border-box;
  /* Fix: Ensure padding/border doesn't increase width */
  flex-shrink: 0;
  /* Fix: Prevent shrinking */
  position: relative;
}

/* 1. Top Navigation Bar */
.wx-header {
  height: 64px;
  /* Compact Mobile Header */
  min-height: 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  /* Standard padding */
  background-color: #ffffff;
  /* WeChat header white */
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  /* Subtle separator */
  z-index: 10;
  box-sizing: border-box;
}

/* 2. Content Area - Auto Height */
.wx-content {
  flex: none;
  /* Architecture: Natural Height */
  overflow: visible;
  padding: 20px 20px 30px 20px;
  /* User Request: Reduced gap to 30px */
  background: #fff;
  width: 100%;
  /* Fix: Ensure it fills the container */
  box-sizing: border-box;
  /* Fix: Padding inside width */
}

/* 3. Article Meta Header */
.wx-article-header {
  margin-bottom: 40px;
  /* Increased from 24px */
}

.wx-title {
  font-size: 22px;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
  margin-bottom: 14px;
  margin-top: 0;
}

.wx-meta {
  display: flex;
  align-items: center;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.3);
  flex-wrap: wrap;
}

.wx-original {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.5);
  padding: 1px 4px;
  border-radius: 4px;
  font-size: 12px;
  margin-right: 8px;
}

.wx-author {
  color: #576b95;
  margin-right: 8px;
}

.wx-account-link {
  color: #576b95;
  margin-right: 8px;
}

.wx-time {
  color: rgba(0, 0, 0, 0.3);
  font-size: 14px;
}

/* 4. Bottom Action Bar */
.wx-footer {
  /* Dynamic height for stacked actions */
  min-height: 64px;
  /* User Request: 64px */
  margin-top: auto;
  /* Architecture: Canonical Sticky Footer */
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Compact padding to fit 64px height */
  padding: 12px 20px;
  /* Balanced Top/Bottom for true centering */
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  z-index: 10;
}

.wx-footer-left {
  display: flex;
  align-items: center;
}

.wx-avatar-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  /* Faint stroke */
  display: flex;
  justify-content: center;
  align-items: center;

  /* Text Logo Styles */
  background: #000;
  /* User Request: Black background */
  color: #fff;
  /* User Request: White text */
  font-weight: 700;
  font-size: 18px;
  font-family: var(--font-serif);
  /* User Request: Brand Font (GT Super) */
  letter-spacing: -0.03em;
  /* Match Brand Tracking */
}

/* Img style removed as it is replaced by text */

/* 5. Icons (Replaced with Phosphor) */
i.wx-icon,
svg.wx-icon {
  font-size: 20px;
  /* User Request: 20px */
  width: 20px;
  /* For SVG */
  height: 20px;
  /* For SVG */
  color: rgba(0, 0, 0, 0.9);
  fill: rgba(0, 0, 0, 0.9);
  /* For SVG */
  line-height: 1;
  display: block;
}

/* Action Number/Text */
.wx-action-num {
  font-size: 11px;
  /* Smaller text for vertical stack */
  color: #7d7d7d;
  /* Standard WeChat Gray */
  margin-left: 0;
  /* Reset horizontal margin */
  margin-top: 4px;
  /* Vertical gap */
  font-weight: 400;
  line-height: 1;
}

.wx-footer-text {
  color: #576b95;
  /* WeChat Blue for Account Name */
  font-weight: 500;
  letter-spacing: -0.2px;
}

/* Specific Gap Adjustment */
.wx-footer-right {
  display: flex;
  align-items: center;
  gap: 12px;
  /* User Request: 12px */
}

.wx-action-item {
  display: flex;
  flex-direction: column;
  /* User Requirement: Stacked Vertically */
  align-items: center;
  /* Center align Icon and Text */
  cursor: pointer;
  transition: opacity 0.2s;
  min-width: 32px;
  /* Ensure click target width */
}

.wx-action-item:hover {
  opacity: 0.7;
}

/* The following rules were removed as they were replaced by the new i.wx-icon and .wx-action-item rules */
/* .wx-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  opacity: 0.8;
  /* stroke property not needed for img * /
} */

.wx-action-num {
  font-size: 12px;
  /* User Request: 12 */
  color: #777;
  font-weight: 400;
  white-space: nowrap;
  /* Removed transform scaling */
}


/* =========================================
   3. Unified Design System Components (Bordered Groups)
   ========================================= */
.el-popover.format-popover {
  padding: 20px !important;
  border-radius: 4px !important;
  box-shadow: var(--shadow-float) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  min-width: 260px !important;
}

.format-menu {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.format-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.format-item .label {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
  flex-shrink: 0;
}

/* Unified Control Group */
/* Unified Control Group */
/* Block Mode (Label on Top) */
.format-item.block-mode {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px;
}

/* =========================================
   3. Universal UI System (One Component Rule)
   ========================================= */

/* Popover Container Override */
.el-popover.format-popover {
  padding: 20px !important;
  border-radius: var(--radius-m) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  min-width: 300px !important;
}

/* Universal Section Label */
.ui-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
  /* Reduced from 10px */
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Universal Grid Container */
.ui-grid {
  display: grid;
  gap: 8px;
  width: 100%;
  margin-bottom: 8px;
  /* Reduced to Super Compact 8px */
}

/* Grid Columns Variants */
.ui-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.ui-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.ui-grid.cols-5 {
  grid-template-columns: repeat(5, 1fr);
}

/* Universal Option Pill */
.ui-option {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  /* Standard Height */
  /* Design System: Pill Shape (999px) */
  border-radius: 999px;
  border: 1px solid #E5E5E5;
  /* Light subtle border */
  background: #fff;
  color: #333;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  user-select: none;
}

/* Option Hover */
.ui-option:hover {
  background: #f7f7f7;
  border-color: #ddd;
  color: #000;
  transform: translateY(-1px);
}

/* Option Active */
.ui-option.active {
  background: #000;
  /* Pure Black */
  color: #fff;
  /* Pure White */
  border-color: #000;
  font-weight: 500;
  /* Consistent weight */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.ui-option.active:hover {
  opacity: 0.9;
  /* Subtle feedback on active */
}

/* Last section margin reset */
.ui-section:last-child .ui-grid {
  margin-bottom: 0;
}

/* End of Theme Grid Styles */

/* Fade Masks for Scroll (Optional, but adds polish) */
/* (Skipped for simplicity, buttons are enough) */

/* Gradient Masks for Floating Buttons */
.scroll-mask {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 88px;
  /* Wide, luxurious fade area */
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Allow pointer events on the button inside */
.scroll-mask .scroll-btn {
  pointer-events: auto;
}

.scroll-mask.left {
  left: 0;
  /* Solid white under button (45%), then fading out */
  background: linear-gradient(to right, #fff 45%, rgba(255, 255, 255, 0));
  justify-content: flex-start;
  padding-left: 8px;
  /* Indent button slightly */
}

.scroll-mask.right {
  right: 0;
  /* Solid white under button (45%), then fading out */
  background: linear-gradient(to left, #fff 45%, rgba(255, 255, 255, 0));
  justify-content: flex-end;
  padding-right: 8px;
  /* Indent button slightly */
}

/* =========================================
   Grid Layouts for Font / Size / Color
   ========================================= */
.grid-row {
  display: flex;
  width: 100%;
  gap: 8px;
  /* Consistent gap with themes */
  /* align-items: stretch; */
}

.grid-item {
  flex: 1;
  /* Equal Width */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  font-size: 13px;
  color: #666;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  /* Individual chips */
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}



.grid-item:hover {
  background-color: #fff;
  border-color: #999;
  color: #333;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  /* Match theme hover */
  transform: translateY(-1px);
}

.grid-item.active {
  background-color: #333;
  color: #fff;
  border-color: #333;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  /* Match theme active */
}

/* Remove old scroll-btn (non-floating) if any remain */
.scroll-btn:not(.floating) {
  display: none;
}

/* Default Segmented Control Items (Size Only) */
.control-group {
  display: flex !important;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.control-item {
  flex: 1 0 33.33%;
  /* 3 items per row */
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-secondary);
  background-color: #fff;
  cursor: pointer;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  /* Grid Lines */
  transition: all 0.1s;
  white-space: nowrap !important;
  box-sizing: border-box;
  /* Include borders */
}

/* Remove right border for every 3rd item */
.control-item:nth-child(3n) {
  border-right: none;
}

/* Remove bottom border for the last row (assuming 9 items, 3 rows) */
/* Or just let them be, it's cleaner */
.control-item:last-child {
  border-right: none;
}

/* Revert border removal for theme-grid since we want full borders */
.theme-grid .control-item:nth-child(3n) {
  border-right: 1px solid #eee !important;
}

.theme-grid .control-item:last-child {
  border-right: 1px solid #eee !important;
}

.theme-grid .control-item:hover {
  border-right: 1px solid #ccc !important;
}

.theme-grid .control-item.active {
  border-right: 1px solid #292929 !important;
}

/* Swatches */
.swatch-list {
  display: flex !important;
  flex-direction: row !important;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
}

.swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.15);
  /* Darker border for visibility */
  transition: transform 0.1s;
  box-sizing: border-box;
  position: relative;
  /* FIX: Anchor the absolute ring */
}

.swatch:hover {
  transform: scale(1.1);
}

.swatch.active {
  border-color: transparent !important;
}

/* Ring Effect for Active Swatch (Simple Black Ring) */
/* Increased specificity to prevent leaks (Black Circle Bug) */
.swatch-list .swatch.active::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 50%;
  border: 1px solid #292929;
}

.swatch.light {
  background-color: #fff;
}

.swatch.duo {
  background-color: #fdf6e3;
}

.swatch.dark {
  background-color: #272822;
  border: none;
}


/* =========================================
   4. Mobile Responsiveness (The Flow)
   ========================================= */
@media screen and (max-width: 768px) {
  .top {
    padding: 0 16px;
    height: 56px;
  }

  .logo-text {
    font-size: 20px;
  }

  /* Hide Preview by default on mobile */
  .preview-wrapper {
    display: none;
  }

  .editor-col {
    border-right: none;
  }

  #editor,
  .CodeMirror {
    padding: 20px 16px;
    /* Tighter padding */
    font-size: 16px;
    /* Readable enough */
  }

  /* Floating Action Button for Preview Toggle could go here if implemented in HTML */
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

/* Hide Element UI artifacts */
.el-form-item {
  margin: 0 !important;
}

.el-input__inner {
  display: none !important;
}

/* =========================================
   5. WeChat Code Snippet Styles (Mac Style)
   ========================================= */
.code-snippet__fix {
  display: flex;
  background-color: #f8f8f8;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
  margin: 20px 0;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  position: relative;
  padding: 12px 0;
}

/* Line Numbers */
.code-snippet__line-index {
  list-style: none !important;
  /* Critical: No bullets */
  padding: 0 10px 0 12px !important;
  margin: 0 !important;
  border-right: 1px solid #e0e0e0;
  text-align: right;
  color: #999;
  user-select: none;
  min-width: 40px;
  box-sizing: border-box;
}

.code-snippet__line-index li {
  list-style: none !important;
  padding: 0;
  margin: 0;
}

/* Code Content */
pre.code-snippet__js {
  margin: 0 !important;
  padding: 0 12px !important;
  overflow-x: auto;
  flex: 1;
  /* Take remaining space */
  border: none !important;
  background: transparent !important;
}

code {
  font-family: var(--font-mono);
}

/* Minimalist Toast Message Override */
.el-message.minimal-message {
  min-width: unset !important;
  padding: 10px 24px !important;
  border-radius: 40px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  background-color: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.el-message.minimal-message .el-message__content {
  font-family: var(--font-sans);
  font-weight: 500;
  color: #333;
  padding-right: 0 !important;
}

.el-message.minimal-message .el-icon-success {
  color: #52c41a !important;
  /* Fresh Green */
  margin-right: 8px !important;
}

/* =========================================
   World Class Editor Themes (PRO Design)
   ========================================= */

/* --- 1. LIGHT (Polar Minimalist) --- */
.cm-s-base16-light.CodeMirror {
  background-color: #ffffff !important;
  color: #24292e !important;
}

.cm-s-base16-light .CodeMirror-gutters {
  background-color: #ffffff !important;
  border-right: none !important;
}

.cm-s-base16-light .CodeMirror-linenumber {
  color: #eeeeee !important;
}

.cm-s-base16-light .CodeMirror-cursor {
  border-left: 2px solid #000 !important;
}

.cm-s-base16-light .CodeMirror-activeline-background {
  background: #f8fcfd !important;
}

.cm-s-base16-light .CodeMirror-selected {
  background: #b3d7ff !important;
}

.cm-s-base16-light span.cm-header {
  color: #24292e !important;
  font-weight: 700 !important;
}

.cm-s-base16-light span.cm-link {
  color: #0969da !important;
  text-decoration: none !important;
}

/* --- 2. SOFT (Warm Vellum) --- */
.cm-s-duotone-light.CodeMirror {
  background-color: #fffef9 !important;
  /* Extremely subtle warm paper */
  color: #4a4a4a !important;
}

.cm-s-duotone-light .CodeMirror-gutters {
  background-color: #fffef9 !important;
  border-right: none !important;
}

.cm-s-duotone-light .CodeMirror-linenumber {
  color: #e8e4d9 !important;
}

.cm-s-duotone-light .CodeMirror-cursor {
  border-left: 2px solid #5c5c5c !important;
}

.cm-s-duotone-light .CodeMirror-activeline-background {
  background: #fdfaf0 !important;
}

.cm-s-duotone-light .CodeMirror-selected {
  background: #e6e1d1 !important;
}

/* Syntax Softening */
.cm-s-duotone-light span.cm-header {
  color: #a46a2a !important;
}

/* Bronze */
.cm-s-duotone-light span.cm-link {
  color: #a67c52 !important;
}

.cm-s-duotone-light span.cm-strong {
  color: #8e6f3e !important;
}

/* --- 3. DARK (Deep Obsidian) --- */
.cm-s-monokai.CodeMirror {
  background-color: #1e1e1e !important;
  color: #d4d4d4 !important;
}

.cm-s-monokai .CodeMirror-gutters {
  background-color: #1e1e1e !important;
  border-right: none !important;
}

.cm-s-monokai .CodeMirror-linenumber {
  color: #444444 !important;
}

.cm-s-monokai .CodeMirror-cursor {
  border-left: 2px solid #a7a7a7 !important;
}

.cm-s-monokai .CodeMirror-activeline-background {
  background: #282828 !important;
}

.cm-s-monokai .CodeMirror-selected {
  background: #264f78 !important;
}

/* Syntax Refinement */
.cm-s-monokai span.cm-header {
  color: #569cd6 !important;
}

/* Blue */
.cm-s-monokai span.cm-variable-2 {
  color: #9cdcfe !important;
}

/* Light Blue */
.cm-s-monokai span.cm-keyword {
  color: #c586c0 !important;
}

/* Violet */
.cm-s-monokai span.cm-string {
  color: #ce9178 !important;
}

/* Soft Orange */

/* =========================================
   IMMERSIVE CONTAINER ENGINE (Unity Fix)
   ========================================= */

/* 1. LIGHT (Polar) - Default is already white, but enforce it */
.editor-col:has(.cm-s-base16-light) {
  background-color: #ffffff !important;
  border-right: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* 2. SOFT (Vellum) - Extend Cream Background to Full Panel */
.editor-col:has(.cm-s-duotone-light) {
  background-color: #fffef9 !important;
  border-right: 1px solid rgba(166, 124, 82, 0.15) !important;
  /* Bronze tint border */
}

/* 3. DARK (Obsidian) - Extend Dark Background to Full Panel */
.editor-col:has(.cm-s-monokai) {
  background-color: #1e1e1e !important;
  border-right: 1px solid #333333 !important;
  /* Subtle dark border */
}

/* Dark Scrollbar override for Mac/Webkit */
.editor-col:has(.cm-s-monokai)::-webkit-scrollbar {
  width: 8px;
  background: #1e1e1e;
}

.editor-col:has(.cm-s-monokai)::-webkit-scrollbar-thumb {
  background-color: #444;
  border-radius: 4px;
  border: 2px solid #1e1e1e;
}

.editor-col:has(.cm-s-monokai)::-webkit-scrollbar-track {
  background-color: #1e1e1e;
}

/* Fix Gutter Line Integration */
.editor-col:has(.cm-s-monokai) .CodeMirror-gutters {
  border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* =========================================
   MOBILE ADAPTATION (PREMIUM)
   ========================================= */

@media screen and (max-width: 768px) {

  /* 1. Reset & Global */
  body,
  html {
    overflow: hidden;
    /* Prevent body scroll */
  }

  .main-body {
    padding-top: 50px !important;
    /* Smaller header */
    height: 100dvh;
    /* Dynamic Viewport Height */
    display: block !important;
    /* Stacked layout */
  }

  /* 2. Mobile Navigation (Segmented Control) */
  .mobile-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    /* Reducing width slightly */
    height: 32px;
    background: #f0f0f0;
    border-radius: 8px;
    padding: 2px;
    display: flex;
    box-sizing: border-box;
    z-index: 120;
    /* Ensure on top */
  }

  /* Force Controls to Right */
  .ctrl {
    margin-left: auto;
    /* Push to right when logo is hidden */
    gap: 8px;
    /* Tighter gap */
    z-index: 130;
    /* Above nav */
  }

  /* Hide specific desktop controls on mobile */
  .ctrl .copy-button {
    display: none !important;
    /* Save space, move to drawer */
  }

  .ctrl .about {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
  }

  .aa-button {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
  }

  .seg-control {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
  }

  .seg-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
  }

  .seg-item.active {
    background: #fff;
    color: #000;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  /* 3. Mobile View Containers */
  .mobile-view {
    height: 100%;
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 200px;
    /* Space for keyboard/home indicator */
  }

  .editor-col {
    border-right: none;
    padding-top: 10px;
  }

  .code-mirror-wrapper {
    padding: 0 20px;
    /* Reduced padding */
  }

  /* Preview Card Reset (Mobile Specific) */
  .preview-wrapper.mobile-view {
    display: block;
    /* Override flex */
    flex: none;
    border-left: none;
    padding: 20px 0 80px 0;
    /* Add bottom padding for FAB */
    background: #f7f7f7;
    position: absolute;
    /* Overlay */
    top: 50px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    /* Increase Z-Index to be safe */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-preview-card {
    width: 100% !important;
    max-width: 100% !important;
    border: none;
    border-radius: 0;
    box-shadow: none;
    min-height: 100%;
    margin: 0;
    overflow: visible !important;
    /* Allow content to scroll */
    height: auto !important;
  }

  /* 4. Bottom Drawer (Action Sheet) */
  .drawer-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 900;
  }

  .mobile-drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 24px;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    z-index: 1000;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.1);
    max-height: 70vh;
    overflow-y: auto;
  }

  .drawer-handle {
    width: 36px;
    height: 4px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    margin: 0 auto 20px auto;
  }

  /* Reuse existing UI Grid inside drawer */
  .ui-section {
    margin-bottom: 24px;
  }

  /* Mobile Floating Copy Button (FAB) */
  .mobile-fab-copy {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 100px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    z-index: 800;
    /* Above content, below drawer */
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  }

  .mobile-fab-copy:active {
    transform: translateX(-50%) scale(0.95);
  }

  .mobile-fab-copy i {
    display: none !important;
    /* Hide icon as requested */
  }

  /* Mobile Header Logo Adjustment */
  .top .logo {
    display: flex !important;
    /* Force show */
  }

  .logo-text {
    font-size: 22px !important;
    /* Optimized for mobile visibility */
  }
}

/* 5. Transitions */
/* Fade Slide Animation */
.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-slide-enter {
  opacity: 0;
  transform: translateY(10px);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

/* Slide Up Drawer */
.slide-up-enter-active,
.slide-up-leave-active {
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.slide-up-enter,
.slide-up-leave-to {
  transform: translateY(100%);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

/* MOBILE ADAPTATION FOR ABOUT DIALOG */
@media screen and (max-width: 480px) {
  .about-dialog {
    width: 90% !important;
    max-width: 360px;
  }

  .about-content {
    padding: 32px 24px 24px;
  }

  /* .brand-features removed to inherit repeat(4, 1fr) from desktop */

  .author-card {
    padding: 16px;
    /* Ensure tight padding on mobile */
  }

  .author-right {
    padding-left: 12px;
    /* Tighter padding */
    border-left: 1px solid #eee;
  }

  /* Compacting Layout Elements */
  .author-avatar {
    width: 44px;
    height: 44px;
    border-radius: 10px;
  }

  .author-left {
    gap: 10px;
    min-width: 0;
    /* Enable shrinking for children */
    overflow: hidden;
    /* Prevent spill */
  }

  .author-details {
    flex: 1;
    /* Take remaining space */
    min-width: 0;
    /* TEXT WRAP FIX: Allow container to shrink below content size if needed */
  }

  .author-actions {
    white-space: nowrap;
    /* Prevent wrapping */
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Graceful degradation */
  }
}

/* =========================================
   TOAST NOTIFICATION (Strict B&W Pill)
   ========================================= */

/* Override Element UI Message */
body .el-message {
  border-radius: 99px !important;
  /* Pill Shape */
  background-color: #000 !important;
  /* Pure Black */
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  /* Subtle border */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
  padding: 10px 24px !important;
  min-width: unset !important;
  /* Allow shrinking */
  top: 30px !important;
}

/* Success State (Override Green) */
body .el-message--success {
  background-color: #000 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Warning State (Override Orange) */
body .el-message--warning {
  background-color: #000 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Error State (Override Red) */
body .el-message--error {
  background-color: #000 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Info State (Override Grey) */
body .el-message--info {
  background-color: #000 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Icon Color (Universal White) */
body .el-message .el-message__icon {
  color: #fff !important;
  font-size: 16px !important;
}

/* Text Content (Universal White) */
body .el-message .el-message__content {
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: 'Inter', sans-serif !important;
}