/* ==========================================================================
   Unified Stylesheet for Text-Styler tools
   Source: Consolidated from pages + reference (參考/White studio css)
   ========================================================================== */

/* ---- Design Tokens ---- */
:root {
  --bg: #0f0f10;       /* deep neutral near-black */
  --panel: #1a1a1b;    /* dark panel surface */
  --muted: #b3b3c0;    /* muted text */
  --text: #f3f3f5;     /* main text */
  --accent: #8a2be2;   /* White Studio purple */
  --border: #2a2a2b;   /* subtle border */
  --ok: #2ecc71;
  /* motion tokens */
  --dur-100: 120ms;
  --dur-150: 160ms;
  --dur-200: 200ms;
  --dur-300: 300ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #fafafa;
    --panel: #ffffff;
    --muted: #6b7280;
    --text: #111827;
    --accent: #8a2be2;
    --border: #e5e7eb;
  }
}

/* ---- Base ---- */
* { box-sizing: border-box; }
html, body { height: 100%; overflow-x: hidden; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font: 14px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
}

header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 2;
}
header h1 { margin: 0; font-size: 18px; }
header p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }

main { padding: 16px 20px; display: grid; gap: 16px; }
.row { display: grid; gap: 12px; }

/* ---- Panels, Controls, Layout ---- */
.controls {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: start;
  grid-auto-flow: row dense;
}
.controls > .panel { height: 100%; display: flex; flex-direction: column; gap: 6px; }
.controls .wide { grid-column: 1 / -1; min-width: 260px; }
.controls .wide select { width: min(560px, 100%); }
.controls > * { min-width: 0; }

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}

.group-label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
label.inline { display: inline-flex; align-items: center; gap: 8px; margin-right: 10px; }
label.inline.wide { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-right: 0; }
label.inline.wide > span { font-size: 12px; color: var(--muted); }

.hint { color: var(--muted); font-size: 12px; }
.note { color: var(--muted); font-size: 12px; margin-top: 4px; }
.kbd { border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; background: #0d121a; }
.success { color: var(--ok); }

/* ---- Form Controls ---- */
select, button, input[type="checkbox"] { accent-color: var(--accent); }
select, button {
  background: #0e1116;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .25s ease, transform .12s ease;
}

/* custom select arrow */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23e6edf3'%3E%3Cpath d='M4.646 6.646a.5.5 0 0 1 .708 0L8 9.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 14px 14px;
  background-position: right 12px center;
  padding-right: 36px;
  max-width: 100%;
}
select::-ms-expand { display: none; }

@media (prefers-color-scheme: light) {
  select, button { background: #fff; }
  /* light select arrow */
  select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%230f1720'%3E%3Cpath d='M4.646 6.646a.5.5 0 0 1 .708 0L8 9.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  }
}

/* Buttons */
button { position: relative; overflow: hidden; isolation: isolate; }
button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.35); }
button:active { transform: translateY(0) scale(0.98); box-shadow: 0 2px 6px rgba(0,0,0,.25) inset; }
button:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(138,43,226,.5), 0 6px 16px rgba(0,0,0,.25); }
button.primary { background: var(--accent); color: #fff; border-color: transparent; }
button.ghost { background: transparent; }
button:disabled { opacity: .6; cursor: not-allowed; }

/* ripple for buttons */
.ripple { position: absolute; border-radius: 9999px; transform: scale(0); opacity: .6; pointer-events: none; animation: ripple .6s ease-out; mix-blend-mode: screen; }
@keyframes ripple { to { transform: scale(6); opacity: 0; } }

/* Inputs focus transitions */
textarea, pre.output, select { transition: border-color .2s ease, background-color .2s ease, box-shadow .25s ease; }
textarea:focus-visible, select:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(138,43,226,.4); border-color: var(--accent); }
input[type="checkbox"] { transition: transform .12s ease; }
input[type="checkbox"]:active { transform: scale(.9); }

/* ---- I/O and typography blocks ---- */
.io { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
textarea, pre.output {
  width: 100%;
  min-height: 320px;
  resize: vertical;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  font: 14px/1.6 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  white-space: pre-wrap;
  word-break: break-word;
}
pre.output { margin: 0; overflow: auto; }

/* Stats cards (Text Styler) */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.stat-card {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  display: grid;
  gap: 6px;
  transition: transform .12s ease, box-shadow .25s ease;
}
@media (prefers-color-scheme: light) { .stat-card { background: #fff; } }
.stat-title { color: var(--muted); font-size: 12px; }
.stat-value { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-card:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.25); }

/* RGB tool specific */
.stops { display: grid; gap: 8px; }
.stop-row { display: grid; grid-template-columns: 24px auto 1fr 140px auto; gap: 8px; align-items: center; position: relative; will-change: transform, box-shadow, background-position; }
.stop-row input[type="text"] { width: 100%; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 14px; }
.drag-handle { cursor: grab; user-select: none; text-align: center; color: var(--muted); transition: color var(--dur-150) var(--ease-standard), transform var(--dur-150) var(--ease-standard); }
.stop-row.dragging { opacity: .9; outline: 1px dashed var(--accent); transform: scale(1.02); box-shadow: 0 14px 30px rgba(0,0,0,.35); z-index: 10; }
.stop-row.dragging .drag-handle { cursor: grabbing; color: var(--text); transform: rotate(-3deg) scale(1.06); }
.stop-row input[type="range"] { width: 100%; }
@media (prefers-color-scheme: light) { .stop-row input[type="text"] { background: #fff; } }

.outputs { display: grid; grid-template-columns: 1fr; gap: 12px; }
.out-card { display: grid; gap: 8px; }
.preview-block {
  font-size: 20px;
  line-height: 1.6;
  min-height: 60px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  white-space: normal;
  word-break: break-word;
}
@media (prefers-color-scheme: light) { .preview-block { background: #fff; } }
.preview-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* ---- Reference: White studio css (selected utility styles) ---- */
.hero-bg {
  background: linear-gradient(rgba(15, 15, 16, 0.9), rgba(15, 15, 16, 0.9)),
              url('../images/minecraft/hero-bg.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
}
@media (min-width: 768px) { .hero-bg { background-attachment: fixed; } }

.feature-card { position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.feature-card:hover { transform: scale(1.03); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); }
.feature-card::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background: #8a2be2; transition: width 0.3s ease; }
.feature-card:hover::after { width: 100%; }

.download-btn {
  background: linear-gradient(to right, #8a2be2, #7b1fa2);
  color: #fff;
  font-weight: 600;
  border-radius: 0.5rem;
  padding: 0.5rem 1.5rem;
  display: inline-block;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.download-btn:hover { transform: scale(1.05); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); }

/* Optional mobile menu pattern */
#mobile-menu nav a { display: block; padding: 0.75rem 0; font-size: 1.25rem; color: #f3f3f5; border-bottom: 1px solid #2a2a2b; transition: color 0.2s ease; }
#mobile-menu nav a:hover { color: #8a2be2; }
#mobile-menu #menu-close { color: #f3f3f5; }

/* CTA pulse (optional) */
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.cta-button { animation: pulse 2s infinite; }
.cta-button:hover { animation: none; }

/* ---- Responsive tweaks ---- */
@media (max-width: 768px) {
  main { padding: 12px; gap: 12px; }
  .controls { grid-template-columns: 1fr; }
  .controls .wide { min-width: 0; width: 100%; }
  .controls .wide select { width: 100%; }
  label.inline.wide { gap: 8px; }
  label.inline.wide > span { font-size: 13px; }
  label.inline { align-items: flex-start; }
  .io { grid-template-columns: 1fr; }
  textarea, pre.output { min-height: 220px; }
  button, select { padding: 12px 14px; font-size: 16px; }
  .stat-card { padding: 12px; }
  .stat-value { font-size: 18px; }
}

/* ---- Mobile-specific enhancements ---- */
@media (max-width: 520px) {
  /* Larger tap targets */
  button, select { min-height: 44px; font-size: 16px; }

  /* Stack color stop editor neatly on small screens */
  .stop-row { grid-template-columns: 24px 1fr; row-gap: 8px; }
  .stop-row > *:not(.drag-handle) { grid-column: 2 / -1; }
  .stop-row input[type="text"], .stop-row input[type="range"], .stop-row button { width: 100%; }
}

/* ==========================================================================
   Animation polish (micro-interactions)
   ========================================================================== */

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

/* Unified transition ergonomics */
button, .panel, .stat-card, .preview-block, .chip, .stop-row, textarea, select, input[type="text"] {
  transition: transform var(--dur-150) var(--ease-standard),
              box-shadow var(--dur-200) var(--ease-standard),
              border-color var(--dur-150) var(--ease-standard),
              background-color var(--dur-200) var(--ease-decelerate),
              color var(--dur-150) var(--ease-standard),
              filter var(--dur-150) var(--ease-standard);
}

/* Primary button gradient hover + glow */
button.primary {
  background: linear-gradient(135deg, #8a2be2 0%, #7b1fa2 50%, #8a2be2 100%);
  background-size: 200% 200%;
  position: relative;
}
button.primary::after {
  content: '';
  position: absolute; inset: -8px;
  background: radial-gradient(40% 40% at 50% 50%, rgba(138,43,226,.35), transparent 60%);
  filter: blur(12px);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-200) var(--ease-decelerate);
}
button.primary:hover { background-position: 100% 0; }
button.primary:hover::after { opacity: 1; }

/* Ghost button subtle tint on hover */
button.ghost:hover { border-color: var(--accent); background-color: color-mix(in oklab, var(--accent) 8%, transparent); }

/* Panels subtle lift on hover (non-mobile) */
@media (hover: hover) and (pointer: fine) {
  .panel:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,0.28); }
}

/* Chips sheen on hover */
.chip { position: relative; overflow: hidden; }
.chip::before {
  content: '';
  position: absolute; top: -100%; left: -30%; width: 40%; height: 300%;
  background: linear-gradient(60deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
  transform: translateX(-120%);
}
.chip:hover::before { animation: chip-sheen 900ms var(--ease-decelerate); }
@keyframes chip-sheen {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

/* Drag feedback polish */
.stop-row { transition: transform var(--dur-150) var(--ease-standard), background-position 200ms linear; }
.stop-row.dragging {
  background-image: repeating-linear-gradient(45deg, color-mix(in oklab, var(--accent) 12%, transparent) 0 10px, transparent 10px 20px);
  background-size: 28px 28px;
  animation: barberpole 1s linear infinite;
  cursor: grabbing;
}
@keyframes barberpole { to { background-position: 28px 0; } }

/* Drop position indicator */
.stop-row.drop-before::before,
.stop-row.drop-after::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(138,43,226,.6);
  z-index: 1;
  pointer-events: none;
}
.stop-row.drop-before::before { top: -2px; }
.stop-row.drop-after::after { bottom: -2px; }

/* Ensure range slider sits above drag indicators */
.stop-row input[type="range"] {
  position: relative;
  z-index: 2;
  touch-action: pan-y;
}
/* While dragging a row, disable other controls to avoid accidental interaction */
.stop-row.dragging input,
.stop-row.dragging button,
.stop-row.dragging select,
.stop-row.dragging textarea { pointer-events: none; }
.stop-row.dragging .drag-handle { pointer-events: auto; }

/* ==========================================================================
   Premium Look & Feel (depth + materials)
   These overrides sit later to gently enrich surfaces without HTML changes.
   ========================================================================== */

/* Elevated panels */
.panel {
  position: relative;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--panel) 94%, #ffffff 6%),
    var(--panel)
  );
  border: 1px solid color-mix(in oklab, var(--border) 85%, transparent);
  border-radius: 12px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.02) inset,
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 10px 24px rgba(0,0,0,0.28);
}
.panel::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0));
  mix-blend-mode: soft-light;
}

/* Cards & previews share the same premium surface */
.stat-card,
.preview-block {
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--panel) 92%, #ffffff 8%),
    var(--panel)
  );
  border-radius: 12px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.02) inset,
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 10px 24px rgba(0,0,0,0.28);
}

/* Controls: rounded + comfortable padding */
select,
button {
  padding: 10px 12px;
  border-radius: 12px;
}

textarea,
pre.output {
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--panel) 94%, #ffffff 6%),
    var(--panel)
  );
  border-radius: 12px;
}

/* Chips with subtle bevel */
.chip {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
  border-radius: 10px;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 0 0 1px rgba(0,0,0,.25) inset;
}

/* Range slider (accented) */
input[type="range"] { -webkit-appearance: none; appearance: none; height: 24px; background: transparent; margin: 6px 0; }
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--accent) 65%, #000 35%),
    color-mix(in oklab, var(--accent) 35%, #000 65%)
  );
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.5);
}
input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--accent) 65%, #000 35%),
    color-mix(in oklab, var(--accent) 35%, #000 65%)
  );
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff 0%, #d8c5ff 30%, #8a2be2 65%, #5a1a9c 100%);
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 2px 8px rgba(0,0,0,.6);
  margin-top: -6px;
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff 0%, #d8c5ff 30%, #8a2be2 65%, #5a1a9c 100%);
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 2px 8px rgba(0,0,0,.6);
}

/* Color input */
input[type="color"] {
  -webkit-appearance: none; appearance: none; width: 40px; height: 28px; padding: 0; border-radius: 10px; border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 0 0 1px rgba(0,0,0,.25) inset;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; border-radius: 10px; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 8px; }

/* Scrollbar & selection */
::selection { background: color-mix(in oklab, var(--accent) 45%, transparent); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--accent) 35%, #2a2a2b); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* Optional utility: subtle glass */
.glass { background: color-mix(in oklab, var(--panel) 80%, transparent); backdrop-filter: blur(8px) saturate(110%); }

/* Inputs active pop and glow */
textarea:focus-visible, select:focus-visible, .stop-row input[type="text"]:focus {
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 55%, transparent), 0 10px 24px rgba(0,0,0,.25);
}

/* Preview block subtle inner shadow */
.preview-block { box-shadow: inset 0 1px 0 rgba(255,255,255,.02), inset 0 0 0 1px rgba(255,255,255,.03), 0 4px 14px rgba(0,0,0,.3); }

/* Links accent underline animation (generic) */
a { color: var(--text); text-decoration: none; position: relative; }
a::after { content: ''; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--accent); transition: width var(--dur-150) var(--ease-decelerate); }
a:hover::after, a:focus-visible::after { width: 100%; }