/* ==========================================================================
   AVT Tools — ptn03 2026 Trend UI (Liquid Glass x Aurora x Kinetic Type)
   Shared stylesheet for index.html / pdf.html
   ========================================================================== */

/* ---------- design tokens ---------- */
:root {
  /* color */
  --bg: #f4f6fb;
  --ink: #1a2137;
  --ink-60: rgba(26, 33, 55, 0.68);
  --ink-40: rgba(26, 33, 55, 0.46);
  --accent: #2f5bff;
  --accent-deep: #1e3fd6;
  --accent-soft: rgba(47, 91, 255, 0.1);
  --aurora-blue: #5b8cff;
  --aurora-violet: #9d7bff;
  --aurora-mint: #4fd8c4;
  --success: #0e9f7a;
  /* glass */
  --glass: rgba(255, 255, 255, 0.55);
  --glass-hover: rgba(255, 255, 255, 0.7);
  --glass-line: rgba(255, 255, 255, 0.8);
  --glass-fallback: rgba(255, 255, 255, 0.9);
  --shadow-rest: 0 10px 30px -14px rgba(38, 58, 120, 0.22);
  --shadow-float: 0 28px 56px -22px rgba(38, 58, 120, 0.34);
  /* type */
  --font-display: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-en: "Inter", "Helvetica Neue", Arial, sans-serif;
  --text-hero: clamp(2.8rem, 1.2rem + 6.4vw, 6.4rem);
  --text-title: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
  /* rhythm */
  --space-section: clamp(4rem, 2.4rem + 5vw, 8.5rem);
  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-pill: 999px;
  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.18s;
  --dur: 0.45s;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0; min-height: 100vh;
  background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 15px; line-height: 1.8;
  font-feature-settings: "palt"; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.3; margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; color: inherit; cursor: pointer; }
input { font-family: inherit; color: inherit; }
.en { font-family: var(--font-en); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(91, 140, 255, 0.28); }

kbd {
  font-family: var(--font-en); font-size: 11px; font-weight: 600;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid rgba(47, 91, 255, 0.22); border-radius: 7px;
  padding: 2px 7px; line-height: 1.5;
}

/* ---------- aurora background ---------- */
.aurora { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; display: block; border-radius: 50%; filter: blur(90px); opacity: 0.55; will-change: transform; }

.aurora i:nth-child(1) {
  width: 58vmax; height: 58vmax; left: -14vmax; top: -22vmax;
  background: radial-gradient(circle at 35% 35%, var(--aurora-blue), transparent 62%);
  animation: drift-a 26s var(--ease-out) infinite alternate;
}
.aurora i:nth-child(2) {
  width: 48vmax; height: 48vmax; right: -16vmax; top: -6vmax; opacity: 0.42;
  background: radial-gradient(circle at 60% 40%, var(--aurora-violet), transparent 62%);
  animation: drift-b 32s ease-in-out infinite alternate;
}
.aurora i:nth-child(3) {
  width: 52vmax; height: 52vmax; left: 22vw; bottom: -30vmax; opacity: 0.38;
  background: radial-gradient(circle at 50% 50%, var(--aurora-mint), transparent 60%);
  animation: drift-c 38s ease-in-out infinite alternate;
}

@keyframes drift-a { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(9vw,7vh,0) scale(1.18); } }
@keyframes drift-b { from { transform: translate3d(0,0,0) scale(1.1) rotate(0deg); } to { transform: translate3d(-8vw,12vh,0) scale(0.92) rotate(18deg); } }
@keyframes drift-c { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-10vw,-9vh,0) scale(1.22); } }

/* film grain (atmosphere, very subtle) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* ---------- liquid glass surface ---------- */
.glass {
  position: relative;
  background: var(--glass-fallback); /* fallback: no backdrop-filter support */
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-rest);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: var(--glass);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
  }
}

/* specular highlight line along the top edge */
.glass::before {
  content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95) 45%, transparent);
  pointer-events: none;
}

/* ---------- layout shell ---------- */
.shell { width: min(1160px, 92vw); margin-inline: auto; }

/* ---------- header ---------- */
.site-head { position: sticky; top: 14px; z-index: 40; margin-top: 14px; }

.site-head .bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 12px 12px 22px; border-radius: var(--radius-pill);
}

.logo {
  display: flex; align-items: baseline; gap: 9px;
  font-family: var(--font-en); font-weight: 700; font-size: 19px; letter-spacing: 0.02em;
}
.logo .dot {
  align-self: center; width: 11px; height: 11px; border-radius: 4px;
  background: linear-gradient(135deg, var(--aurora-blue), var(--aurora-violet) 55%, var(--aurora-mint));
  box-shadow: 0 2px 8px rgba(91, 140, 255, 0.5);
}
.logo small { font-family: var(--font-body); font-weight: 500; font-size: 11px; color: var(--ink-40); letter-spacing: 0.08em; }

.head-search {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--glass-line); background: rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-pill); padding: 8px 10px 8px 15px;
  font-size: 12.5px; color: var(--ink-60);
  transition: background var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease;
}
.head-search:hover { background: #fff; transform: translateY(-1px); box-shadow: var(--shadow-rest); }
.head-search:active { transform: translateY(0) scale(0.97); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding-top: clamp(4.5rem, 2rem + 7vw, 8.5rem);
  padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
}

.hero-eyebrow {
  font-family: var(--font-en); font-size: 12px; font-weight: 600;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 18px 4px;
}

.hero h1 { font-size: var(--text-hero); letter-spacing: 0.015em; line-height: 1.12; margin-left: -3px; }

/* kinetic type: per-letter reveal (Y + blur settle) */
.kinetic span {
  display: inline-block; opacity: 0;
  transform: translateY(0.55em) rotate(2.5deg) scale(1.06); filter: blur(7px);
  animation: letter-in 0.9s var(--ease-out) forwards;
  animation-delay: calc(var(--i) * 75ms + 0.15s);
}

@keyframes letter-in {
  0%   { opacity: 0; transform: translateY(0.55em) rotate(2.5deg) scale(1.06); filter: blur(7px); }
  60%  { opacity: 1; filter: blur(0); }
  80%  { transform: translateY(-0.03em) rotate(-0.4deg) scale(0.995); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); filter: blur(0); }
}

.hero-lead { max-width: 34em; margin: 26px 0 0 4px; font-size: clamp(14px, 13px + 0.4vw, 16.5px); color: var(--ink-60); }

/* glass pill badges — offset vertically for rhythm */
.badges { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0 0; padding: 0; list-style: none; }
.badges li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px 9px 14px; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 500; box-shadow: var(--shadow-rest);
}
.badges li svg { color: var(--accent); }
.badges li:nth-child(2) { transform: translateY(8px); }
.badges li:nth-child(3) { transform: translateY(-4px); }

/* floating decorative glass chips behind hero (depth layer) */
.hero-orn { position: absolute; border-radius: 22px; pointer-events: none; z-index: -1; }
.hero-orn.a { width: 130px; height: 130px; right: 8%; top: 14%; transform: rotate(14deg); animation: float-a 9s ease-in-out infinite alternate; }
.hero-orn.b { width: 84px; height: 84px; right: 22%; top: 55%; transform: rotate(-10deg); animation: float-b 11s ease-in-out infinite alternate; }
@keyframes float-a { from { transform: rotate(14deg) translateY(0); } to { transform: rotate(20deg) translateY(-22px); } }
@keyframes float-b { from { transform: rotate(-10deg) translateY(0); } to { transform: rotate(-16deg) translateY(18px); } }

/* ---------- command search bar ---------- */
.search-wrap { display: flex; justify-content: center; margin-top: clamp(2.2rem, 1.4rem + 2.4vw, 4rem); }

.cmd-bar {
  display: flex; align-items: center; gap: 14px;
  width: min(640px, 100%); padding: 17px 18px 17px 22px;
  border-radius: var(--radius-pill); border: 1px solid var(--glass-line);
  font-size: 15px; color: var(--ink-40); text-align: left;
  transition: box-shadow var(--dur) var(--ease-out), background var(--dur-fast) ease;
  will-change: transform;
}
.cmd-bar svg { color: var(--accent); flex: none; }
.cmd-bar .ph { flex: 1; }
.cmd-bar:hover { box-shadow: var(--shadow-float); background: var(--glass-hover); }
.cmd-bar:active { transform: scale(0.985); }

/* ---------- tool grid ---------- */
.tools { padding-top: var(--space-section); padding-bottom: var(--space-section); }

.sec-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 34px; }
.sec-head h2 { font-size: var(--text-title); letter-spacing: 0.02em; }
.sec-head .count {
  font-family: var(--font-en); font-weight: 600; font-size: 13px;
  color: var(--accent); background: var(--accent-soft);
  border-radius: var(--radius-pill); padding: 3px 12px;
}
.sec-head .rule { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(26, 33, 55, 0.16), transparent); }

.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 0; margin: 0; list-style: none; }

.tool-card {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: 26px 26px 24px; overflow: hidden; will-change: transform;
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease-out), background var(--dur-fast) ease;
}
.tool-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-float); background: var(--glass-hover); }
.tool-card:active { transform: translateY(-2px) scale(0.985); }

/* cursor-following specular highlight (--mx/--my set from JS) */
.tool-card .glow {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(230px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.9), transparent 62%);
  transition: opacity 0.35s ease;
}
.tool-card:hover .glow { opacity: 0.85; }

.tool-card .icon {
  display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 16px; color: var(--accent-deep);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.9), hsla(var(--hue, 226), 85%, 88%, 0.75));
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 16px -8px hsla(var(--hue, 226), 70%, 55%, 0.55);
}
.tool-card:hover .icon svg { animation: icon-pop 0.55s var(--ease-spring); }
@keyframes icon-pop { 0% { transform: scale(1); } 40% { transform: scale(1.18) rotate(-3deg); } 100% { transform: scale(1); } }

.tool-card h3 { font-size: 16.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.tool-card h3 .arrow {
  color: var(--accent); transform: translateX(-4px); opacity: 0;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) ease;
}
.tool-card:hover h3 .arrow { transform: translateX(0); opacity: 1; }
.tool-card p { margin: 0; font-size: 12.8px; line-height: 1.85; color: var(--ink-60); }

/* scroll reveal */
.reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- footer ---------- */
.site-foot { padding: 44px 0 54px; margin-top: var(--space-section); border-top: 1px solid rgba(26, 33, 55, 0.08); }
.site-foot .note { margin: 0 0 6px; font-size: 13px; color: var(--ink-60); }
.site-foot .strong-note {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 10px; padding: 8px 18px; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 700; color: var(--accent-deep);
}
.site-foot .copy { margin-top: 30px; font-family: var(--font-en); font-size: 11px; letter-spacing: 0.1em; color: var(--ink-40); }

/* ---------- command palette (⌘K) ---------- */
.palette-layer {
  position: fixed; inset: 0; z-index: 90;
  display: flex; justify-content: center; align-items: flex-start;
  padding: 12vh 4vw 4vh; visibility: hidden;
}
.palette-layer.is-open { visibility: visible; }
.palette-layer[hidden] { display: none; }

.palette-backdrop {
  position: absolute; inset: 0; opacity: 0;
  background: rgba(21, 27, 50, 0.32);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: opacity 0.3s ease;
}
.palette-layer.is-open .palette-backdrop { opacity: 1; }

.palette {
  position: relative; width: min(620px, 100%); max-height: 68vh;
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg); background: var(--glass-fallback);
  opacity: 0; transform: translateY(14px) scale(0.96);
  transition: opacity 0.28s ease, transform 0.42s var(--ease-spring);
  box-shadow: 0 40px 90px -30px rgba(20, 30, 80, 0.5);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .palette {
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(26px) saturate(1.5);
    backdrop-filter: blur(26px) saturate(1.5);
  }
}
.palette-layer.is-open .palette { opacity: 1; transform: none; }

.palette-input-row { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid rgba(26, 33, 55, 0.09); }
.palette-input-row svg { color: var(--accent); flex: none; }
.palette-input-row input { flex: 1; border: 0; background: transparent; font-size: 16px; outline: none; }
.palette-input-row input::placeholder { color: var(--ink-40); }

.palette-list { overflow-y: auto; margin: 0; padding: 10px; list-style: none; }
.palette-list a { display: flex; align-items: center; gap: 14px; padding: 11px 12px; border-radius: 14px; transition: background var(--dur-fast) ease; }
.palette-list li.is-active a,
.palette-list a:hover { background: var(--accent-soft); }
.palette-list .p-icon {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none;
  border-radius: 11px; color: var(--accent-deep);
  background: hsla(var(--hue, 226), 85%, 91%, 0.9);
}
.palette-list .p-name { font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.palette-list .p-desc { flex: 1; min-width: 0; font-size: 12px; color: var(--ink-60); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette-list li[hidden] { display: none; }

.palette-empty { padding: 26px 20px; text-align: center; font-size: 13px; color: var(--ink-40); }
.palette-foot { display: flex; gap: 16px; padding: 10px 20px 12px; border-top: 1px solid rgba(26, 33, 55, 0.09); font-size: 11px; color: var(--ink-40); }

/* =========================================================================
   pdf.html — tool detail page
   ========================================================================= */

.page-shell { width: min(880px, 92vw); margin-inline: auto; }

.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 26px; padding: 9px 20px 9px 15px;
  border-radius: var(--radius-pill); font-size: 13.5px; font-weight: 500;
  transition: box-shadow var(--dur-fast) ease, background var(--dur-fast) ease;
  will-change: transform;
}
.back-link svg { transition: transform var(--dur-fast) var(--ease-out); }
.back-link:hover { background: var(--glass-hover); box-shadow: var(--shadow-float); }
.back-link:hover svg { transform: translateX(-3px); }

.tool-head { margin-top: clamp(2.2rem, 1.4rem + 3vw, 4rem); }
.tool-head .hero-eyebrow { margin-bottom: 10px; }
.tool-head h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); letter-spacing: 0.02em; }
.tool-head .sub { margin: 10px 0 0 2px; color: var(--ink-60); font-size: 14.5px; }

/* --- segmented control: liquid sliding glass pill --- */
.seg {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  margin-top: 34px; padding: 5px; border-radius: var(--radius-pill);
}

.seg-pill {
  position: absolute; top: 5px; bottom: 5px; left: 5px; right: 66.7%; z-index: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  box-shadow: 0 8px 20px -8px rgba(47, 91, 255, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  /* left/right transitions are swapped from JS to create the liquid stretch */
  transition: left 0.4s var(--ease-out), right 0.4s var(--ease-out);
}

.seg button {
  position: relative; z-index: 1; border: 0; background: transparent;
  padding: 11px 6px; border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: 500; font-size: 14px; color: var(--ink-60);
  transition: color 0.25s ease;
}
.seg button[aria-selected="true"] { color: #fff; font-weight: 700; }
.seg button:active { transform: scale(0.97); }

/* --- mode panes --- */
.pane-stack { position: relative; margin-top: 30px; }
.pane { display: none; animation: pane-in 0.45s var(--ease-out); }
.pane.is-active { display: block; }
@keyframes pane-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.pane h2 { font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem); }
.pane .pane-desc { margin: 8px 0 0; color: var(--ink-60); font-size: 13.5px; }

/* --- dropzone: rotating conic-gradient border ---
   (@property unsupported → gradient stays static; layout is unaffected) */
@property --dz-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.dropzone {
  position: relative; margin-top: 24px; padding: 2px;
  border-radius: var(--radius-lg); cursor: pointer;
  background: conic-gradient(from var(--dz-angle),
    var(--aurora-blue), var(--aurora-violet), var(--aurora-mint),
    rgba(255, 255, 255, 0.9), var(--aurora-blue));
  animation: dz-spin 7s linear infinite;
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) ease;
}
@keyframes dz-spin { to { --dz-angle: 360deg; } }

.dropzone-inner {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 44px 20px; border-radius: 24px; border: 0; text-align: center;
}
.dropzone-inner::before { display: none; }
.dropzone-inner svg { color: var(--accent); transition: transform var(--dur) var(--ease-spring); }
.dropzone-inner strong { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.dropzone-inner span { font-size: 12px; color: var(--ink-40); }

.dropzone:hover { transform: translateY(-3px); box-shadow: var(--shadow-float); }
.dropzone:hover .dropzone-inner svg { transform: translateY(-4px) scale(1.1); }
.dropzone:active { transform: translateY(0) scale(0.99); }
.dropzone.is-over { transform: scale(1.015); animation-duration: 1.6s; box-shadow: 0 24px 60px -18px rgba(47, 91, 255, 0.5); }
.dropzone.is-over .dropzone-inner { background: rgba(240, 245, 255, 0.92); }

/* --- file list --- */
.file-list { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }

.file-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 14px 13px 10px; border-radius: var(--radius-md);
  animation: file-in 0.5s var(--ease-out);
}
@keyframes file-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.file-row.is-removing { opacity: 0; transform: translateX(24px); transition: opacity 0.3s ease, transform 0.3s var(--ease-out); }

.file-row .grip { color: var(--ink-40); cursor: grab; padding: 4px 2px; flex: none; }
.file-row .f-name { font-weight: 700; font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-row .f-meta { font-size: 12px; color: var(--ink-60); white-space: nowrap; margin-left: auto; }
.file-row .f-acts { display: flex; gap: 6px; flex: none; }

.mini-btn {
  display: grid; place-items: center; width: 30px; height: 30px;
  border: 1px solid rgba(26, 33, 55, 0.1); border-radius: 9px;
  background: rgba(255, 255, 255, 0.65); color: var(--ink-60);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-spring);
}
.mini-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-2px); }
.mini-btn:active { transform: scale(0.9); }
.mini-btn.danger:hover { background: #e6486b; border-color: #e6486b; }

/* --- split mode extras --- */
.choice-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.choice {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: var(--radius-pill);
  border: 1px solid var(--glass-line); background: rgba(255, 255, 255, 0.5);
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background var(--dur-fast) ease, box-shadow var(--dur-fast) ease, color var(--dur-fast) ease;
}
.choice:has(input:checked) { background: var(--ink); color: #fff; box-shadow: var(--shadow-rest); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }

.range-input {
  margin-top: 14px; width: min(320px, 100%); padding: 11px 16px;
  border-radius: 14px; border: 1px solid rgba(26, 33, 55, 0.14);
  background: rgba(255, 255, 255, 0.75); font-size: 13.5px;
}
.range-input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- page-edit mode extras --- */
.page-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 10px; margin-top: 20px; }

.page-tile {
  aspect-ratio: 3 / 4; display: grid; place-items: center;
  border-radius: 12px; border: 1px solid var(--glass-line);
  background: rgba(255, 255, 255, 0.62);
  font-family: var(--font-en); font-size: 12px; font-weight: 600; color: var(--ink-60);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.page-tile:hover { transform: translateY(-4px) rotate(-1.5deg); box-shadow: var(--shadow-rest); border-color: var(--accent); color: var(--accent-deep); }
.page-tile:active { transform: scale(0.94); }

/* --- options row --- */
.opt-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 22px;
  margin-top: 26px; padding: 20px 24px; border-radius: var(--radius-md);
}
.opt-field { display: flex; align-items: center; gap: 12px; flex: 1 1 260px; }
.opt-field label { font-size: 13px; font-weight: 500; white-space: nowrap; }
.opt-field input[type="text"] {
  flex: 1; min-width: 0; padding: 10px 15px;
  border-radius: 12px; border: 1px solid rgba(26, 33, 55, 0.14);
  background: rgba(255, 255, 255, 0.75); font-size: 13.5px;
}

/* toggle switch */
.toggle { display: inline-flex; align-items: center; gap: 11px; cursor: pointer; font-size: 13px; font-weight: 500; }
.toggle input { position: absolute; opacity: 0; }
.toggle .tg {
  position: relative; width: 46px; height: 26px; flex: none;
  border-radius: var(--radius-pill); background: rgba(26, 33, 55, 0.18);
  transition: background 0.3s ease;
}
.toggle .tg::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 6px rgba(20, 30, 80, 0.35);
  transition: transform 0.35s var(--ease-spring);
}
.toggle input:checked + .tg { background: linear-gradient(135deg, var(--accent), var(--aurora-violet)); }
.toggle input:checked + .tg::after { transform: translateX(20px); }
.toggle input:focus-visible + .tg { outline: 2px solid var(--accent); outline-offset: 3px; }

/* --- run button --- */
.run-row { display: flex; justify-content: center; margin-top: 30px; }

.run-btn {
  position: relative; border: 0; overflow: hidden;
  padding: 16px 58px; border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: 700; font-size: 15.5px; letter-spacing: 0.06em;
  color: #fff;
  background: linear-gradient(135deg, var(--aurora-blue), var(--accent) 45%, var(--accent-deep));
  box-shadow: 0 16px 34px -12px rgba(47, 91, 255, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: box-shadow var(--dur) ease, filter var(--dur-fast) ease;
  will-change: transform;
}
.run-btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 0.7s var(--ease-out);
}
.run-btn:hover { box-shadow: 0 22px 44px -12px rgba(47, 91, 255, 0.8); filter: brightness(1.06); }
.run-btn:hover::after { transform: translateX(120%); }
.run-btn:active { transform: scale(0.96); }
.run-btn[disabled] { filter: saturate(0.2) brightness(1.05); cursor: progress; }

/* --- result card (glass + success gradient) --- */
.result-card {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  margin-top: 30px; padding: 24px 28px;
  border-radius: var(--radius-lg); border: 1px solid var(--glass-line);
  background:
    linear-gradient(120deg, rgba(79, 216, 196, 0.24), rgba(91, 140, 255, 0.18) 60%, rgba(255, 255, 255, 0.4)),
    var(--glass-fallback);
  box-shadow: var(--shadow-rest);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .result-card {
    background:
      linear-gradient(120deg, rgba(79, 216, 196, 0.26), rgba(91, 140, 255, 0.16) 60%, transparent),
      rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
  }
}
.result-card[hidden] { display: none; }

.result-card .r-check {
  display: grid; place-items: center; width: 46px; height: 46px; flex: none;
  border-radius: 50%; color: #fff;
  background: linear-gradient(135deg, var(--aurora-mint), var(--success));
  box-shadow: 0 8px 18px -6px rgba(14, 159, 122, 0.6);
  animation: check-pop 0.6s var(--ease-spring);
}
@keyframes check-pop { 0% { transform: scale(0.3); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }

.result-card .r-body { flex: 1; min-width: 220px; }
.result-card .r-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 15.5px; }
.result-card .r-meta { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-60); }

.dl-btn {
  display: inline-flex; align-items: center; gap: 9px;
  border: 0; padding: 12px 28px; border-radius: var(--radius-pill);
  font-weight: 700; font-size: 13.5px; color: #fff; background: var(--ink);
  box-shadow: 0 12px 24px -10px rgba(26, 33, 55, 0.55);
  transition: background var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
  will-change: transform;
}
.dl-btn:hover { background: var(--accent-deep); box-shadow: 0 16px 30px -10px rgba(47, 91, 255, 0.7); }
.dl-btn:active { transform: scale(0.95); }

.page-foot { padding: 46px 0 56px; text-align: center; font-size: 12.5px; color: var(--ink-60); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .tool-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .badges li:nth-child(2), .badges li:nth-child(3) { transform: none; }
  .hero-orn.b { display: none; }
}

@media (max-width: 560px) {
  body { font-size: 14px; }
  .tool-grid { grid-template-columns: 1fr; }
  .site-head { top: 8px; margin-top: 8px; }
  .head-search .label { display: none; }
  .hero-orn.a { width: 84px; height: 84px; right: 4%; top: 6%; }
  .cmd-bar { padding: 14px 14px 14px 18px; }
  .seg button { font-size: 12.5px; padding: 10px 2px; }
  .file-row { flex-wrap: wrap; row-gap: 6px; }
  .file-row .f-meta { margin-left: 44px; order: 3; width: 100%; }
  .opt-row { gap: 14px; }
  .run-btn { width: 100%; padding: 16px 20px; }
  .palette-layer { padding-top: 8vh; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aurora i, .hero-orn, .dropzone { animation: none !important; }
  .kinetic span { animation: none; opacity: 1; transform: none; filter: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .seg-pill, .pane, .tool-card, .cmd-bar, .palette,
  .run-btn, .result-card .r-check, .file-row { transition: none; animation: none; }
  .tool-card:hover { transform: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}