:root {
  color-scheme: dark;
  --bg: #050713;
  --bg-deep: #03040b;
  --panel: rgba(16, 20, 35, 0.82);
  --panel-solid: #101423;
  --panel-soft: rgba(255, 255, 255, 0.035);
  --panel-hover: rgba(27, 32, 54, 0.9);
  --input: #0b0f1e;
  --border: rgba(255, 255, 255, 0.068);
  --border-bright: rgba(168, 85, 247, 0.3);
  --text: #f8fafc;
  --muted: #a7adbd;
  --dim: #737b91;
  --primary: #8b3dff;
  --primary-bright: #a855f7;
  --pink: #ff4ddb;
  --cyan: #4cc9f0;
  --green: #5de1a7;
  --amber: #f6b94b;
  --red: #ff5b70;
  --blue: #528bff;
  --shadow: 0 20px 54px rgba(0, 0, 0, 0.28);
  --shadow-strong: 0 34px 100px rgba(0, 0, 0, 0.56);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --sidebar: 104px;
  --max: 1390px;
}

:root.light {
  color-scheme: light;
  --bg: #f4f2fb;
  --bg-deep: #ece9f6;
  --panel: rgba(255, 255, 255, 0.82);
  --panel-solid: #fff;
  --panel-soft: rgba(91, 64, 135, 0.055);
  --panel-hover: rgba(255, 255, 255, 0.98);
  --input: #f5f3fa;
  --border: rgba(67, 48, 99, 0.1);
  --border-bright: rgba(139, 61, 255, 0.34);
  --text: #17131f;
  --muted: #686174;
  --dim: #8a8295;
  --shadow: 0 18px 48px rgba(74, 52, 110, 0.09);
  --shadow-strong: 0 28px 88px rgba(59, 37, 92, 0.18);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { min-width: 320px; scroll-behavior: smooth; background: var(--bg); }
body {
  min-height: 100dvh;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 12% -7%, rgba(139, 61, 255, 0.17), transparent 31rem),
    radial-gradient(circle at 91% 3%, rgba(76, 201, 240, 0.075), transparent 30rem),
    linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 96%, #101e43 4%) 48%, var(--bg-deep) 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg { display: block; width: 1em; height: 1em; }
[hidden] { display: none !important; }
::selection { color: #fff; background: rgba(139, 61, 255, 0.75); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.ambient { position: fixed; z-index: 0; border-radius: 50%; pointer-events: none; filter: blur(2px); }
.ambient-one { top: -14rem; left: 12%; width: 34rem; height: 34rem; background: rgba(139, 61, 255, 0.055); }
.ambient-two { top: 7rem; right: -20rem; width: 35rem; height: 35rem; background: rgba(76, 201, 240, 0.035); }
.app-shell { position: relative; z-index: 1; display: flex; min-height: 100dvh; }

.sidebar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  flex: 0 0 var(--sidebar);
  width: var(--sidebar);
  height: 100dvh;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(7, 9, 23, 0.96), rgba(4, 6, 15, 0.94));
  box-shadow: 12px 0 48px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(24px);
}
.light .sidebar { background: linear-gradient(180deg, rgba(249, 247, 253, 0.96), rgba(241, 238, 249, 0.94)); }
.brand { display: grid; min-height: 95px; place-items: center; align-content: center; gap: 0.2rem; padding: 0.8rem 0.4rem; font-size: 0.79rem; font-weight: 820; letter-spacing: -0.02em; }
.brand > span:last-child > span { color: #b878ff; }
.brand-logo { display: block; width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(192, 38, 255, .38)); }
.brand-logo.small { width: 38px; height: 38px; }
.brand-mark { position: relative; display: block; width: 43px; height: 43px; filter: drop-shadow(0 0 15px rgba(168, 85, 247, 0.48)); }
.brand-mark::before { position: absolute; inset: 3px; border: 1px solid rgba(255, 255, 255, 0.26); border-radius: 13px; background: linear-gradient(145deg, #b96cff, #6e35f3 63%, #4cc9f0); content: ""; transform: rotate(45deg); }
.brand-mark i { position: absolute; z-index: 1; width: 7px; height: 17px; border-radius: 8px; background: white; transform: rotate(45deg); }
.brand-mark i:nth-child(1) { top: 11px; left: 12px; }
.brand-mark i:nth-child(2) { top: 16px; left: 18px; height: 12px; opacity: 0.9; }
.brand-mark i:nth-child(3) { top: 12px; left: 25px; height: 8px; opacity: 0.72; }
.brand-mark.small { width: 35px; height: 35px; }
.brand-mark.small::before { inset: 3px; border-radius: 10px; }
.brand-mark.small i { width: 5px; height: 13px; }
.brand-mark.small i:nth-child(1) { top: 9px; left: 10px; }
.brand-mark.small i:nth-child(2) { top: 13px; left: 15px; height: 9px; }
.brand-mark.small i:nth-child(3) { top: 10px; left: 21px; height: 6px; }
.side-nav { display: flex; flex: 1; flex-direction: column; gap: 0.38rem; overflow-y: auto; padding: 0.7rem 0.7rem; scrollbar-width: none; }
.side-nav::-webkit-scrollbar { display: none; }
.side-link { position: relative; display: flex; min-height: 58px; align-items: center; justify-content: center; flex-direction: column; gap: 0.25rem; border: 1px solid transparent; border-radius: 16px; color: var(--dim); background: transparent; font-size: 1.28rem; transition: 180ms ease; }
.side-link small { font-size: 0.67rem; font-weight: 650; }
.side-link::before { position: absolute; top: 14px; bottom: 14px; left: -0.72rem; width: 3px; border-radius: 0 5px 5px 0; background: linear-gradient(var(--pink), var(--primary)); box-shadow: 0 0 16px rgba(168, 85, 247, 0.6); content: ""; opacity: 0; transform: scaleY(0.5); transition: 220ms var(--ease); }
.side-link:hover { color: var(--text); transform: translateY(-1px); }
.side-link.active { border-color: rgba(139, 61, 255, 0.22); color: var(--text); background: linear-gradient(135deg, rgba(139, 61, 255, 0.19), rgba(76, 201, 240, 0.05)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); }
.side-link.active::before { opacity: 1; transform: scaleY(1); }
.side-footer { padding: 0.7rem 0.7rem 1rem; }
.theme-toggle { width: 100%; min-height: 54px; color: #cdb5ff; background: rgba(139, 61, 255, 0.07); }

.main-column { min-width: 0; flex: 1; }
.topbar { position: sticky; top: 0; z-index: 50; display: flex; min-height: 78px; align-items: center; gap: 1.4rem; padding: 0.75rem clamp(1rem, 2.8vw, 2.6rem); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(24px); }
.mobile-brand { display: none; }
.page-context { display: grid; min-width: 185px; }
.page-context span { color: var(--primary-bright); font-size: 0.69rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.page-context strong { font-size: 0.97rem; }
.top-search { position: relative; display: flex; width: min(450px, 41vw); height: 44px; align-items: center; gap: 0.62rem; margin: 0 auto; padding: 0 0.75rem 0 0.9rem; border: 1px solid var(--border); border-radius: 14px; color: var(--dim); background: color-mix(in srgb, var(--input) 88%, transparent); transition: 180ms ease; }
.top-search:focus-within { border-color: rgba(139, 61, 255, 0.4); box-shadow: 0 0 0 3px rgba(139, 61, 255, 0.08); }
.top-search > span { font-size: 1.12rem; }
.top-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 0.86rem; }
.top-search input::placeholder { color: var(--dim); }
kbd { padding: 0.15rem 0.4rem; border: 1px solid var(--border); border-radius: 6px; color: var(--dim); background: var(--panel-soft); font-size: 0.68rem; font-family: inherit; }
.top-actions { display: flex; align-items: center; gap: 0.7rem; }
.icon-button { position: relative; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--border); border-radius: 13px; color: var(--muted); background: var(--panel-soft); font-size: 1.15rem; }
.counter { position: absolute; top: -5px; right: -5px; display: grid; min-width: 18px; height: 18px; place-items: center; padding: 0 4px; border: 2px solid var(--bg); border-radius: 50px; color: #fff; background: var(--primary); font-size: 0.6rem; font-style: normal; font-weight: 800; }
.status-pill { display: grid; min-width: 142px; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 0.55rem; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 13px; background: var(--panel-soft); }
.status-pill > i { grid-row: 1 / 3; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px rgba(93, 225, 167, 0.65); }
.status-pill span, .status-pill strong { line-height: 1.15; }
.status-pill span { color: var(--dim); font-size: 0.65rem; }
.status-pill strong { font-size: 0.75rem; }

main { width: min(100%, calc(var(--max) + 5rem)); margin: 0 auto; padding: 0 clamp(1rem, 2.8vw, 2.6rem) 4rem; }
.hero { display: grid; min-height: 550px; grid-template-columns: minmax(0, 0.95fr) minmax(460px, 1.05fr); align-items: center; gap: clamp(2rem, 4vw, 5rem); padding: clamp(3.3rem, 6vw, 5.6rem) 0 3rem; }
.eyebrow { display: inline-flex; width: fit-content; align-items: center; gap: 0.46rem; color: #cdb5ff; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }
.eyebrow > span, .eyebrow > i { color: var(--pink); font-size: 1rem; }
.hero-copy h1 { margin: 1.15rem 0 1.35rem; font-size: clamp(3.4rem, 5.5vw, 5.8rem); font-weight: 850; letter-spacing: -0.065em; line-height: 0.97; }
.hero-copy h1 span { color: transparent; background: linear-gradient(96deg, #a85cff 5%, #e45cdc 58%, #5dc9ee); -webkit-background-clip: text; background-clip: text; }
.hero-copy > p { max-width: 600px; color: var(--muted); font-size: clamp(1rem, 1.45vw, 1.18rem); line-height: 1.72; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.72rem 1.15rem; border: 1px solid transparent; border-radius: 14px; font-size: 0.88rem; font-weight: 750; transition: 180ms ease; }
.button:hover { transform: translateY(-2px); }
.button.primary { color: #fff; background: linear-gradient(135deg, var(--primary), #a84eea); box-shadow: 0 12px 30px rgba(139, 61, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.button.primary:hover { box-shadow: 0 16px 38px rgba(139, 61, 255, 0.38); }
.button.secondary { border-color: var(--border); background: var(--panel-soft); }
.button.secondary:hover { border-color: rgba(168, 85, 247, 0.3); background: rgba(139, 61, 255, 0.09); }
.button.full { width: 100%; }
.trust-row { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; margin-top: 1.45rem; color: var(--dim); font-size: 0.76rem; font-weight: 650; }
.trust-row span { display: flex; align-items: center; gap: 0.4rem; }
.trust-row i { color: var(--green); font-size: 0.95rem; }

.hero-stage { position: relative; min-height: 430px; display: grid; place-items: center; isolation: isolate; }
.hero-stage::before { position: absolute; z-index: -3; width: 75%; height: 62%; border-radius: 50%; background: rgba(139, 61, 255, 0.16); content: ""; filter: blur(70px); }
.orbital-ring { position: absolute; z-index: -2; border: 1px solid rgba(168, 85, 247, 0.12); border-radius: 50%; transform: rotate(-14deg); }
.ring-one { width: 96%; height: 72%; }
.ring-two { width: 72%; height: 105%; border-color: rgba(76, 201, 240, 0.08); transform: rotate(27deg); }
.glass-panel { border: 1px solid var(--border); background: linear-gradient(145deg, color-mix(in srgb, var(--panel-solid) 88%, transparent), color-mix(in srgb, var(--panel-solid) 62%, transparent)); box-shadow: var(--shadow); backdrop-filter: blur(22px); }
.quick-card { position: relative; z-index: 2; width: min(100%, 490px); padding: 1.35rem; border-radius: 23px; box-shadow: var(--shadow-strong), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.quick-card::before { position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: linear-gradient(140deg, rgba(168, 85, 247, 0.26), transparent 36%, rgba(76, 201, 240, 0.12)); content: ""; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; padding: 1px; }
.quick-heading { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.15rem; }
.quick-heading > div { display: grid; flex: 1; }
.quick-heading small { color: var(--dim); font-size: 0.67rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.quick-heading strong { font-size: 1.03rem; }
.quick-icon { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(168, 85, 247, 0.22); border-radius: 13px; color: #c88cff; background: rgba(139, 61, 255, 0.13); font-size: 1.15rem; }
.safe-badge { display: flex; align-items: center; gap: 0.3rem; padding: 0.28rem 0.5rem; border-radius: 99px; color: var(--green); background: rgba(93, 225, 167, 0.08); font-size: 0.63rem; font-weight: 750; }
.url-field { display: flex; height: 51px; align-items: center; gap: 0.65rem; padding: 0 0.55rem 0 0.9rem; border: 1px solid var(--border); border-radius: 14px; color: var(--dim); background: var(--input); }
.url-field:focus-within { border-color: rgba(168, 85, 247, 0.38); box-shadow: 0 0 0 3px rgba(139, 61, 255, 0.07); }
.url-field input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font-size: 0.81rem; }
.url-field button { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 10px; color: var(--muted); background: var(--panel-soft); }
.platform-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; margin: 0.7rem 0; padding: 0.3rem; border: 1px solid var(--border); border-radius: 12px; background: var(--input); }
.platform-switch button { display: flex; height: 36px; align-items: center; justify-content: center; gap: 0.46rem; border-radius: 9px; color: var(--dim); background: transparent; font-size: 0.75rem; font-weight: 700; }
.platform-switch button.active { color: var(--text); background: var(--panel-soft); box-shadow: inset 0 0 0 1px var(--border); }
.youtube-dot { width: 15px; height: 11px; border-radius: 4px; background: var(--red); }
.youtube-icon { color: var(--red); font-size: 1rem; font-style: normal; }
.tiktok-note { color: #54e4e0; font-size: 1rem; font-style: normal; text-shadow: 2px 1px var(--pink); }
.quick-note { display: flex; align-items: center; justify-content: center; gap: 0.35rem; margin-top: 0.75rem; color: var(--dim); font-size: 0.65rem; }
.float-chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 0.65rem; padding: 0.7rem 0.85rem; border: 1px solid var(--border); border-radius: 15px; background: color-mix(in srgb, var(--panel-solid) 89%, transparent); box-shadow: var(--shadow); backdrop-filter: blur(18px); animation: float 5s ease-in-out infinite; }
.float-chip > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; color: #d4b5ff; background: rgba(139, 61, 255, 0.16); font-size: 0.69rem; font-weight: 850; }
.float-chip div { display: grid; }
.float-chip strong { font-size: 0.76rem; }
.float-chip small { color: var(--dim); font-size: 0.61rem; }
.float-chip > i { color: var(--green); }
.float-format { right: -1.5rem; bottom: 2rem; }
.float-speed { top: 1rem; left: -0.3rem; animation-delay: -2.4s; }
.float-speed > i { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 11px; color: var(--amber); background: rgba(246, 185, 75, 0.11); }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.metric-row { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 5rem; border: 1px solid var(--border); border-radius: 19px; background: var(--panel); box-shadow: var(--shadow); overflow: hidden; }
.metric-row > div { position: relative; display: flex; min-width: 0; align-items: center; gap: 0.8rem; padding: 1rem 1.15rem; border-right: 1px solid var(--border); }
.metric-row > div:last-child { border-right: 0; }
.metric-icon { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; border-radius: 12px; }
.metric-icon.violet { color: #bf8bff; background: rgba(139, 61, 255, 0.12); }
.metric-icon.green { color: var(--green); background: rgba(93, 225, 167, 0.1); }
.metric-icon.cyan { color: var(--cyan); background: rgba(76, 201, 240, 0.09); }
.metric-icon.pink { color: var(--pink); background: rgba(255, 77, 219, 0.09); }
.metric-row p { display: grid; flex: 1; min-width: 0; }
.metric-row strong { font-size: 0.9rem; }
.metric-row small { overflow: hidden; color: var(--dim); font-size: 0.67rem; text-overflow: ellipsis; white-space: nowrap; }
.metric-row em { padding: 0.25rem 0.45rem; border-radius: 99px; color: var(--green); background: rgba(93, 225, 167, 0.08); font-size: 0.57rem; font-style: normal; font-weight: 800; white-space: nowrap; }

.tools-section { scroll-margin-top: 100px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.section-heading > div > span { color: var(--primary-bright); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.section-heading h2, .privacy-banner h2 { margin: 0.3rem 0 0.35rem; font-size: clamp(1.75rem, 2.8vw, 2.45rem); letter-spacing: -0.035em; }
.section-heading p, .privacy-banner p { color: var(--muted); font-size: 0.88rem; }
.section-heading > a { display: flex; align-items: center; gap: 0.4rem; color: #cdb5ff; font-size: 0.75rem; font-weight: 750; }
.category-tabs { display: flex; width: fit-content; max-width: 100%; gap: 0.35rem; margin-bottom: 1.35rem; padding: 0.32rem; border: 1px solid var(--border); border-radius: 14px; background: var(--panel-soft); overflow-x: auto; }
.category-tabs button { display: flex; height: 38px; align-items: center; gap: 0.42rem; padding: 0 0.8rem; border-radius: 10px; color: var(--dim); background: transparent; font-size: 0.74rem; font-weight: 700; white-space: nowrap; }
.category-tabs button.active { color: var(--text); background: rgba(139, 61, 255, 0.13); box-shadow: inset 0 0 0 1px rgba(168, 85, 247, 0.18); }
.tool-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.tool-card { position: relative; display: flex; min-height: 350px; flex-direction: column; justify-content: space-between; gap: 1rem; padding: 1.15rem; border: 1px solid var(--border); border-radius: 20px; background: linear-gradient(150deg, color-mix(in srgb, var(--panel-solid) 85%, transparent), color-mix(in srgb, var(--panel-solid) 58%, transparent)); box-shadow: 0 15px 42px rgba(0, 0, 0, 0.14); overflow: hidden; transition: 240ms var(--ease); }
.tool-card::after { position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 20% 0%, rgba(139, 61, 255, 0.07), transparent 52%); content: ""; }
.tool-card:hover { border-color: rgba(168, 85, 247, 0.22); box-shadow: 0 22px 55px rgba(0, 0, 0, 0.25); transform: translateY(-5px); }
.tool-card.featured { grid-column: span 2; }
.tool-card-top { display: flex; align-items: start; justify-content: space-between; }
.tool-icon { display: grid; width: 47px; height: 47px; place-items: center; border: 1px solid transparent; border-radius: 14px; font-size: 1.25rem; }
.tool-icon.violet { border-color: rgba(168, 85, 247, 0.18); color: #be86ff; background: rgba(139, 61, 255, 0.12); }
.tool-icon.cyan { border-color: rgba(76, 201, 240, 0.16); color: var(--cyan); background: rgba(76, 201, 240, 0.09); }
.tool-icon.pink { border-color: rgba(255, 77, 219, 0.16); color: var(--pink); background: rgba(255, 77, 219, 0.08); }
.tool-icon.red { border-color: rgba(255, 91, 112, 0.18); color: var(--red); background: rgba(255, 91, 112, 0.09); }
.tool-icon.green { border-color: rgba(93, 225, 167, 0.18); color: var(--green); background: rgba(93, 225, 167, 0.09); }
.tool-icon.amber { border-color: rgba(246, 185, 75, 0.18); color: var(--amber); background: rgba(246, 185, 75, 0.09); }
.tool-icon.blue { border-color: rgba(82, 139, 255, 0.18); color: var(--blue); background: rgba(82, 139, 255, 0.09); }
.tool-icon.dark { border-color: var(--border); color: #fff; background: linear-gradient(145deg, #181b28, #080a12); font-size: 1.5rem; text-shadow: 2px 1px #ff4ddb, -2px -1px #46e9e1; }
.favorite { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--border); border-radius: 10px; color: var(--dim); background: var(--panel-soft); font-size: 0.95rem; transition: 180ms ease; }
.favorite:hover, .favorite.active { border-color: rgba(246, 185, 75, 0.28); color: var(--amber); background: rgba(246, 185, 75, 0.08); }
.favorite.active svg { fill: currentColor; }
.card-label { display: inline-flex; margin-bottom: 0.5rem; padding: 0.24rem 0.47rem; border-radius: 99px; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.card-label.ready { color: var(--green); background: rgba(93, 225, 167, 0.08); }
.card-label.server { color: var(--cyan); background: rgba(76, 201, 240, 0.08); }
.card-label.next { color: var(--amber); background: rgba(246, 185, 75, 0.08); }
.tool-card h3 { font-size: 1.04rem; letter-spacing: -0.02em; }
.tool-card p { max-width: 95%; margin-top: 0.38rem; color: var(--muted); font-size: 0.76rem; line-height: 1.58; }
.card-action { display: flex; width: 100%; align-items: center; justify-content: space-between; padding-top: 0.85rem; border-top: 1px solid var(--border); color: var(--muted); background: transparent; font-size: 0.75rem; font-weight: 750; transition: 180ms ease; }
.card-action:hover { color: #c898ff; }
.card-action span { transition: transform 180ms ease; }
.card-action:hover span { transform: translateX(3px); }
.format-list { display: flex; align-items: center; gap: 0.5rem; }
.format-list span { padding: 0.34rem 0.55rem; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); background: var(--panel-soft); font-size: 0.58rem; font-weight: 800; }
.format-list i { color: var(--dim); font-style: normal; }
.mini-preview { display: grid; gap: 0.25rem; padding: 0.55rem 0.65rem; border: 1px solid var(--border); border-radius: 10px; color: var(--dim); background: var(--input); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.55rem; }
.mini-preview b { color: var(--cyan); }.mini-preview i { font-style: normal; opacity: 0.65; }
.glyph-preview { display: flex; justify-content: space-between; gap: 0.3rem; padding: 0.7rem; border: 1px solid var(--border); border-radius: 10px; color: var(--muted); background: var(--input); font-size: 0.72rem; }
.download-visual, .tiktok-visual, .compress-visual { display: flex; align-items: center; gap: 0.65rem; min-height: 49px; padding: 0.55rem; border: 1px solid var(--border); border-radius: 11px; background: var(--input); }
.download-visual > i { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; color: var(--red); background: rgba(255, 91, 112, 0.09); }
.download-visual div { display: grid; flex: 1; gap: 0.35rem; }.download-visual div span { height: 4px; border-radius: 5px; background: var(--panel-soft); }.download-visual div span:last-child { width: 67%; }
.download-visual b, .tiktok-visual b { padding: 0.24rem 0.4rem; border-radius: 6px; color: var(--green); background: rgba(93, 225, 167, 0.08); font-size: 0.55rem; }
.tiktok-visual > span { color: #fff; font-size: 1.3rem; text-shadow: 2px 1px var(--pink), -2px -1px var(--cyan); }.tiktok-visual div { display: flex; flex: 1; align-items: center; gap: 3px; }.tiktok-visual div i { width: 3px; border-radius: 3px; background: linear-gradient(var(--cyan), var(--pink)); }.tiktok-visual div i:nth-child(1) { height: 9px; }.tiktok-visual div i:nth-child(2) { height: 17px; }.tiktok-visual div i:nth-child(3) { height: 25px; }.tiktok-visual div i:nth-child(4) { height: 14px; }.tiktok-visual div i:nth-child(5) { height: 20px; }
.compress-visual { justify-content: space-between; }.compress-visual span { color: var(--dim); font-size: 0.6rem; }.compress-visual span:last-child { color: var(--green); }.compress-visual b { color: var(--text); font-size: 0.75rem; }.compress-visual > i { color: var(--primary-bright); }
.qr-visual { position: relative; width: 58px; height: 58px; padding: 6px; border-radius: 9px; background: #f6f6fa; box-shadow: 45px 0 50px rgba(139, 61, 255, 0.09); }.qr-visual i { position: absolute; width: 15px; height: 15px; border: 4px solid #181420; }.qr-visual i:nth-child(1) { top: 6px; left: 6px; }.qr-visual i:nth-child(2) { top: 6px; right: 6px; }.qr-visual i:nth-child(3) { bottom: 6px; left: 6px; }.qr-visual b { position: absolute; width: 5px; height: 5px; background: #181420; }.qr-visual b:nth-of-type(1) { right: 9px; bottom: 9px; }.qr-visual b:nth-of-type(2) { right: 20px; bottom: 14px; }.qr-visual b:nth-of-type(3) { right: 13px; bottom: 22px; }.qr-visual b:nth-of-type(4) { left: 27px; top: 27px; }
.remove-visual { position: relative; height: 57px; border: 1px solid var(--border); border-radius: 11px; background-image: linear-gradient(45deg, var(--panel-soft) 25%, transparent 25%), linear-gradient(-45deg, var(--panel-soft) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--panel-soft) 75%), linear-gradient(-45deg, transparent 75%, var(--panel-soft) 75%); background-position: 0 0, 0 7px, 7px -7px, -7px 0; background-size: 14px 14px; overflow: hidden; }.remove-visual span { position: absolute; left: 25%; bottom: -20px; width: 65px; height: 78px; border-radius: 48% 48% 42% 42%; background: linear-gradient(150deg, #9062f5, #342b72); }.remove-visual i { position: absolute; top: 0; bottom: 0; left: 52%; border-left: 1px dashed rgba(255,255,255,.34); }.remove-visual b { position: absolute; right: 12px; bottom: 10px; display: grid; width: 28px; height: 28px; place-items: center; border-radius: 9px; color: var(--blue); background: rgba(9, 12, 26, 0.82); }
.empty-search { padding: 3rem; border: 1px dashed var(--border); border-radius: 20px; color: var(--muted); text-align: center; }.empty-search > span { display: inline-block; color: var(--primary-bright); font-size: 2rem; }.empty-search h3 { margin: 0.7rem 0 0.2rem; color: var(--text); }.empty-search p { font-size: 0.8rem; }

.privacy-banner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem 2rem; margin-top: 5rem; padding: 1.6rem 2rem; border-radius: 22px; overflow: hidden; scroll-margin-top: 100px; }
.privacy-art { position: relative; display: grid; width: 105px; height: 105px; place-items: center; border-radius: 50%; color: #cba0ff; background: radial-gradient(circle, rgba(139, 61, 255, 0.26), rgba(139, 61, 255, 0.03) 64%, transparent 65%); font-size: 2.1rem; }.privacy-art > i { position: absolute; border: 1px solid rgba(168,85,247,.13); border-radius: 50%; }.privacy-art > i:nth-child(2) { inset: 7px; }.privacy-art > i:nth-child(3) { inset: 18px; }.privacy-art > i:nth-child(4) { width: 6px; height: 6px; top: 15px; right: 18px; border: 0; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.privacy-points { display: flex; gap: 1rem; }.privacy-points > span { display: grid; min-width: 145px; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 0.55rem; padding: 0.7rem; border: 1px solid var(--border); border-radius: 13px; background: var(--panel-soft); }.privacy-points i { grid-row: 1 / 3; display: grid; width: 25px; height: 25px; place-items: center; border-radius: 8px; color: var(--green); background: rgba(93,225,167,.09); }.privacy-points b { font-size: .72rem; }.privacy-points small { color: var(--dim); font-size: .59rem; }
footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 2.3rem clamp(1rem, 2.8vw, 2.6rem); border-top: 1px solid var(--border); color: var(--dim); font-size: 0.7rem; }.footer-brand { display: flex; align-items: center; gap: .6rem; color: var(--text); font-size: .85rem; }
.mobile-nav { display: none; }

.tool-modal, .command-palette { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1rem; }
.modal-backdrop, .palette-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(2, 3, 9, 0.78); backdrop-filter: blur(12px); }
.modal-panel { position: relative; display: flex; width: min(1120px, 96vw); max-height: min(880px, 92dvh); flex-direction: column; border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 22px; background: var(--panel-solid); box-shadow: var(--shadow-strong); overflow: hidden; animation: modal-in 260ms var(--ease); }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; border-bottom: 1px solid var(--border); background: var(--panel-soft); }
.modal-header > div { display: flex; align-items: center; gap: 0.75rem; }.modal-header > div > div { display: grid; }.modal-header small { color: var(--primary-bright); font-size: 0.61rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }.modal-header h2 { font-size: 1.2rem; letter-spacing: -.02em; }.modal-icon { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 12px; color: #c995ff; background: rgba(139,61,255,.13); font-size: 1.1rem; }.modal-close { display: grid; width: 37px; height: 37px; place-items: center; border: 1px solid var(--border); border-radius: 11px; color: var(--muted); background: var(--panel-soft); font-size: 1.15rem; }.modal-body { overflow-y: auto; padding: 1.2rem; }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

.drop-zone { display: grid; min-height: 245px; place-items: center; align-content: center; gap: .5rem; padding: 1.3rem; border: 1px dashed rgba(168,85,247,.34); border-radius: 18px; background: radial-gradient(circle at 50% 30%, rgba(139,61,255,.09), transparent 50%), var(--panel-soft); text-align: center; transition: 180ms ease; }.drop-zone.dragging { border-color: var(--cyan); background-color: rgba(76,201,240,.05); }.drop-zone > span { display: grid; width: 58px; height: 58px; place-items: center; margin-bottom: .45rem; border-radius: 18px; color: #c995ff; background: rgba(139,61,255,.13); font-size: 1.55rem; }.drop-zone h3 { font-size: 1.02rem; }.drop-zone p { color: var(--muted); font-size: .75rem; }.drop-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }.drop-zone label { margin-top: .7rem; }
.image-workspace { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(265px, .75fr); gap: 1rem; }.image-preview { position: relative; display: grid; min-height: 410px; place-items: center; border: 1px solid var(--border); border-radius: 16px; background-color: var(--input); background-image: linear-gradient(45deg, var(--panel-soft) 25%, transparent 25%),linear-gradient(-45deg,var(--panel-soft) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--panel-soft) 75%),linear-gradient(-45deg,transparent 75%,var(--panel-soft) 75%); background-position: 0 0,0 10px,10px -10px,-10px 0; background-size: 20px 20px; overflow: hidden; }.image-preview img { max-width: 100%; max-height: 405px; object-fit: contain; }.image-controls { display: flex; flex-direction: column; gap: .75rem; }.control-panel { display: grid; gap: .85rem; padding: .95rem; border: 1px solid var(--border); border-radius: 15px; background: var(--panel-soft); }.file-meta { display: grid; grid-template-columns: 1fr auto; gap: .25rem; }.file-meta strong { overflow: hidden; font-size: .79rem; text-overflow: ellipsis; white-space: nowrap; }.file-meta span { color: var(--green); font-size: .72rem; }.file-meta small { grid-column: 1 / -1; color: var(--dim); font-size: .62rem; }.field-group { display: grid; gap: .4rem; }.field-group > label { display: flex; justify-content: space-between; color: var(--muted); font-size: .69rem; font-weight: 650; }.field-group select, .field-group input[type="text"] { width: 100%; height: 42px; padding: 0 .75rem; border: 1px solid var(--border); border-radius: 11px; outline: 0; background: var(--input); font-size: .75rem; }.field-group input[type="range"] { width: 100%; accent-color: var(--primary); }.result-box { display: grid; gap: .6rem; padding: .85rem; border: 1px solid rgba(93,225,167,.18); border-radius: 14px; background: rgba(93,225,167,.055); }.result-box > div { display: flex; justify-content: space-between; }.result-box span { color: var(--muted); font-size: .67rem; }.result-box strong { color: var(--green); font-size: .72rem; }.image-buttons { display: grid; grid-template-columns: auto 1fr; gap: .5rem; }.image-buttons .button { min-height: 44px; font-size: .76rem; }

.preserved-format { display: flex; align-items: center; gap: .6rem; padding: .7rem; border: 1px solid rgba(93,225,167,.16); border-radius: 11px; background: rgba(93,225,167,.055); }.preserved-format > span { color: var(--green); font-size: 1.1rem; }.preserved-format > div { display: grid; }.preserved-format strong { font-size: .68rem; }.preserved-format small,.lossless-note { color: var(--dim); font-size: .6rem; }.lossless-note { padding: .55rem .65rem; border-radius: 9px; background: var(--panel-soft); }

.markdown-workspace { display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }.markdown-pane { display: flex; min-width: 0; flex-direction: column; }.markdown-pane:first-child { border-right: 1px solid var(--border); }.pane-toolbar { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .7rem; border-bottom: 1px solid var(--border); background: var(--panel-soft); }.pane-toolbar strong { font-size: .72rem; }.toolbar-actions { display: flex; gap: .3rem; }.toolbar-actions button { display: grid; min-width: 29px; height: 29px; place-items: center; padding: 0 .4rem; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); background: var(--input); font-size: .68rem; }.markdown-input { min-height: 470px; resize: none; border: 0; outline: 0; padding: 1rem; color: var(--text); background: var(--input); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: .78rem; line-height: 1.7; }.markdown-preview { min-height: 470px; overflow-y: auto; padding: 1rem 1.2rem; color: var(--muted); font-size: .83rem; line-height: 1.72; }.markdown-preview > * + * { margin-top: .8rem; }.markdown-preview h1,.markdown-preview h2,.markdown-preview h3 { color: var(--text); line-height: 1.25; }.markdown-preview h1 { font-size: 1.75rem; }.markdown-preview h2 { padding-bottom: .35rem; border-bottom: 1px solid var(--border); font-size: 1.3rem; }.markdown-preview h3 { font-size: 1.05rem; }.markdown-preview a { color: var(--cyan); text-decoration: underline; }.markdown-preview code { padding: .12rem .28rem; border-radius: 5px; color: #d6b5ff; background: rgba(139,61,255,.12); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: .78em; }.markdown-preview pre { padding: .8rem; border: 1px solid var(--border); border-radius: 10px; background: var(--input); overflow-x: auto; }.markdown-preview pre code { padding: 0; background: none; }.markdown-preview blockquote { padding-left: .8rem; border-left: 3px solid var(--primary); color: var(--dim); }.markdown-preview ul,.markdown-preview ol { padding-left: 1.3rem; }.markdown-preview hr { border: 0; border-top: 1px solid var(--border); }

.glyph-workspace { display: grid; gap: 1rem; }.glyph-input-wrap { display: grid; gap: .45rem; }.glyph-input-wrap label { color: var(--muted); font-size: .7rem; font-weight: 700; }.glyph-input-wrap textarea { min-height: 115px; resize: vertical; padding: .85rem; border: 1px solid var(--border); border-radius: 14px; outline: 0; background: var(--input); line-height: 1.6; }.glyph-input-wrap textarea:focus { border-color: rgba(168,85,247,.36); }.transform-row { display: flex; flex-wrap: wrap; gap: .42rem; }.transform-row button { min-height: 35px; padding: 0 .7rem; border: 1px solid var(--border); border-radius: 9px; color: var(--muted); background: var(--panel-soft); font-size: .68rem; font-weight: 700; }.transform-row button:hover { color: var(--text); border-color: rgba(168,85,247,.28); }.glyph-results { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }.glyph-result { display: grid; grid-template-columns: 1fr auto; gap: .3rem .5rem; padding: .75rem; border: 1px solid var(--border); border-radius: 13px; background: var(--panel-soft); }.glyph-result small { color: var(--dim); font-size: .61rem; }.glyph-result p { grid-row: 2; overflow-wrap: anywhere; font-size: .89rem; }.glyph-result button { grid-row: 1 / 3; grid-column: 2; display: grid; width: 34px; height: 34px; place-items: center; align-self: center; border: 1px solid var(--border); border-radius: 10px; color: var(--muted); background: var(--input); }

.info-state { display: grid; min-height: 340px; place-items: center; align-content: center; gap: .7rem; text-align: center; }.info-state > span { display: grid; width: 66px; height: 66px; place-items: center; border-radius: 20px; color: #c995ff; background: rgba(139,61,255,.13); font-size: 1.8rem; }.info-state h3 { font-size: 1.2rem; }.info-state p { max-width: 520px; color: var(--muted); font-size: .8rem; }.roadmap-list { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; }.roadmap-list span { padding: .35rem .58rem; border: 1px solid var(--border); border-radius: 99px; color: var(--dim); background: var(--panel-soft); font-size: .63rem; }

.palette-panel { position: relative; width: min(600px, 94vw); max-height: 70vh; padding: .6rem; border: 1px solid rgba(168,85,247,.2); border-radius: 18px; background: var(--panel-solid); box-shadow: var(--shadow-strong); overflow-y: auto; animation: modal-in 220ms var(--ease); }.palette-panel > label { display: flex; height: 50px; align-items: center; gap: .65rem; padding: 0 .7rem; border-bottom: 1px solid var(--border); color: var(--dim); }.palette-panel input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; }.palette-panel > p { padding: .75rem .7rem .4rem; color: var(--dim); font-size: .61rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.palette-item { display: flex; width: 100%; align-items: center; gap: .7rem; padding: .65rem .7rem; border-radius: 11px; background: transparent; text-align: left; }.palette-item:hover { background: var(--panel-soft); }.palette-item > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: #c995ff; background: rgba(139,61,255,.11); }.palette-item div { display: grid; flex: 1; }.palette-item strong { font-size: .76rem; }.palette-item small { color: var(--dim); font-size: .63rem; }.palette-item > i { color: var(--dim); font-style: normal; }
.toast-region { position: fixed; right: 1rem; bottom: 1rem; z-index: 300; display: grid; gap: .5rem; }.toast { display: flex; min-width: 250px; align-items: center; gap: .6rem; padding: .72rem .85rem; border: 1px solid var(--border); border-radius: 13px; color: var(--text); background: var(--panel-solid); box-shadow: var(--shadow); font-size: .72rem; animation: toast-in 220ms var(--ease); }.toast > span { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 8px; color: var(--green); background: rgba(93,225,167,.09); }.toast.error > span { color: var(--red); background: rgba(255,91,112,.09); }@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
body.modal-open { overflow: hidden; }

.downloader-workspace { display: grid; gap: 1rem; }.download-form { display: grid; grid-template-columns: 1fr auto; gap: .65rem; }.download-form .url-field { height: 48px; }.tool-disclaimer { display: flex; align-items: flex-start; gap: .55rem; padding: .7rem .8rem; border: 1px solid rgba(76,201,240,.13); border-radius: 12px; color: var(--dim); background: rgba(76,201,240,.045); font-size: .67rem; }.tool-disclaimer > span { flex: 0 0 auto; margin-top: .08rem; color: var(--cyan); font-size: .92rem; }.download-result { min-height: 250px; }.info-state.compact { min-height: 235px; }.info-state.compact > span { width: 54px; height: 54px; font-size: 1.4rem; }.loading-state { display: grid; min-height: 180px; place-items: center; align-content: center; gap: .45rem; text-align: center; }.loading-state > i,.download-progress > i { width: 31px; height: 31px; border: 3px solid var(--border); border-top-color: var(--primary-bright); border-radius: 50%; animation: spin .75s linear infinite; }.loading-state strong { margin-top: .25rem; font-size: .78rem; }.loading-state small { color: var(--dim); font-size: .64rem; }@keyframes spin { to { transform: rotate(360deg); } }.media-result { display: grid; grid-template-columns: minmax(230px,.85fr) minmax(0,1.15fr); gap: 1rem; padding: .8rem; border: 1px solid var(--border); border-radius: 16px; background: var(--panel-soft); }.media-thumbnail { position: relative; min-height: 170px; border-radius: 12px; background: var(--input); overflow: hidden; }.media-thumbnail img { width: 100%; height: 100%; min-height: 170px; object-fit: cover; }.media-thumbnail > span { position: absolute; inset: 0; display: grid; place-items: center; color: var(--red); font-size: 2.5rem; }.media-thumbnail > i { position: absolute; right: .5rem; bottom: .5rem; padding: .2rem .38rem; border-radius: 6px; color: #fff; background: rgba(0,0,0,.78); font-size: .6rem; font-style: normal; font-weight: 750; }.media-details { display: flex; min-width: 0; flex-direction: column; justify-content: center; }.media-details > span { color: var(--primary-bright); font-size: .62rem; font-weight: 800; text-transform: uppercase; }.media-details h3 { margin: .35rem 0 .3rem; font-size: 1.12rem; line-height: 1.35; }.media-details p { color: var(--muted); font-size: .72rem; }.media-meta { display: flex; gap: .4rem; margin-top: .8rem; }.media-meta span { padding: .27rem .45rem; border: 1px solid var(--border); border-radius: 7px; color: var(--dim); background: var(--input); font-size: .58rem; }.download-options { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: .7rem; margin-top: .8rem; padding: .85rem; border: 1px solid var(--border); border-radius: 15px; background: var(--panel-soft); }.download-options .button { min-height: 42px; }.download-progress { display: flex; align-items: center; gap: .7rem; margin-top: .7rem; padding: .75rem; border: 1px solid rgba(168,85,247,.17); border-radius: 13px; background: rgba(139,61,255,.055); }.download-progress > i { flex: 0 0 28px; width: 28px; height: 28px; }.download-progress div { display: grid; }.download-progress strong { font-size: .71rem; }.download-progress small { color: var(--dim); font-size: .61rem; }.error-state > span { color: var(--red); background: rgba(255,91,112,.09); }

.converter-workspace { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(280px,.75fr); gap: 1rem; }.compact-drop { min-height: 390px; }.compact-drop.has-file { border-style: solid; border-color: rgba(93,225,167,.3); }.converter-settings { display: flex; flex-direction: column; gap: .75rem; }
.qr-workspace { display: grid; grid-template-columns: minmax(0, .9fr) minmax(320px,1.1fr); gap: 1rem; }.qr-settings { display: flex; flex-direction: column; gap: .8rem; padding: 1rem; border: 1px solid var(--border); border-radius: 16px; background: var(--panel-soft); }.qr-settings textarea { resize: vertical; min-height: 115px; padding: .75rem; border: 1px solid var(--border); border-radius: 11px; outline: 0; background: var(--input); font-size: .76rem; }.settings-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }.colors-row label { display: flex; height: 43px; align-items: center; justify-content: space-between; padding: 0 .7rem; border: 1px solid var(--border); border-radius: 10px; color: var(--muted); background: var(--input); font-size: .67rem; }.colors-row input { width: 25px; height: 25px; padding: 0; border: 0; border-radius: 6px; background: transparent; }.qr-output { display: flex; flex-direction: column; gap: .7rem; }.qr-preview { display: grid; min-height: 410px; place-items: center; padding: 1rem; border: 1px solid var(--border); border-radius: 16px; background-image: linear-gradient(45deg,var(--panel-soft) 25%,transparent 25%),linear-gradient(-45deg,var(--panel-soft) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--panel-soft) 75%),linear-gradient(-45deg,transparent 75%,var(--panel-soft) 75%); background-position: 0 0,0 8px,8px -8px,-8px 0; background-size: 16px 16px; }.qr-preview img { width: min(360px,100%); border-radius: 12px; box-shadow: var(--shadow); }.qr-preview p { color: var(--red); font-size: .72rem; }.qr-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }

.background-workspace { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr); gap: 1rem; }.background-preview { display: grid; min-height: 520px; place-items: center; border: 1px solid var(--border); border-radius: 16px; background-color: var(--input); background-image: linear-gradient(45deg,var(--panel-soft) 25%,transparent 25%),linear-gradient(-45deg,var(--panel-soft) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--panel-soft) 75%),linear-gradient(-45deg,transparent 75%,var(--panel-soft) 75%); background-position: 0 0,0 10px,10px -10px,-10px 0; background-size: 20px 20px; overflow: hidden; }.background-preview canvas { display: block; max-width: 100%; max-height: 540px; object-fit: contain; }

.glyph-atlas-workspace { display: grid; grid-template-columns: minmax(420px,1fr) minmax(310px,.72fr); gap: 1rem; }.glyph-canvas-wrap { display: grid; place-items: center; align-content: center; gap: .55rem; padding: .8rem; border: 1px solid var(--border); border-radius: 16px; background-color: var(--input); background-image: linear-gradient(45deg,var(--panel-soft) 25%,transparent 25%),linear-gradient(-45deg,var(--panel-soft) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--panel-soft) 75%),linear-gradient(-45deg,transparent 75%,var(--panel-soft) 75%); background-position: 0 0,0 8px,8px -8px,-8px 0; background-size: 16px 16px; }.glyph-canvas-wrap canvas { width: min(100%, 570px); height: auto; border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.05); image-rendering: pixelated; cursor: crosshair; }.glyph-canvas-wrap > small { color: var(--dim); font-size: .61rem; }.glyph-sidebar { display: flex; flex-direction: column; gap: .7rem; }.glyph-cell-info { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7rem; }.glyph-cell-info > span { display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid rgba(168,85,247,.2); border-radius: 13px; color: #d0a7ff; background: rgba(139,61,255,.11); font-size: 1.5rem; }.glyph-cell-info > div { display: grid; min-width: 0; }.glyph-cell-info small,.glyph-cell-info p { color: var(--dim); font-size: .58rem; }.glyph-cell-info strong { font-size: .8rem; }.glyph-cell-info button { display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid var(--border); border-radius: 10px; color: var(--muted); background: var(--input); }.glyph-file-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }.glyph-file-actions .button { min-height: 42px; padding-inline: .65rem; font-size: .67rem; }.glyph-file-actions button:last-child { grid-column: 1 / -1; }.glyph-export-actions { display: grid; gap: .5rem; padding: .8rem; border: 1px solid var(--border); border-radius: 14px; background: var(--panel-soft); }.glyph-export-actions > strong { font-size: .68rem; }.glyph-export-actions > div { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }.glyph-export-actions button { min-height: 36px; padding: 0 .55rem; border: 1px solid var(--border); border-radius: 9px; color: var(--muted); background: var(--input); font-size: .62rem; font-weight: 700; }.glyph-export-actions button:hover { color: var(--text); border-color: rgba(168,85,247,.25); }

.ip-workspace { display: grid; gap: 1rem; }.ip-hero { display: grid; place-items: center; padding: 2rem 1rem; border: 1px solid rgba(168,85,247,.16); border-radius: 18px; background: radial-gradient(circle at 50% 30%,rgba(139,61,255,.15),transparent 60%),var(--panel-soft); }.ip-hero > span { display: grid; width: 55px; height: 55px; place-items: center; margin-bottom: .6rem; border-radius: 17px; color: #c995ff; background: rgba(139,61,255,.13); font-size: 1.45rem; }.ip-hero > small { color: var(--dim); font-size: .64rem; }.ip-hero > strong { margin: .25rem 0 .7rem; font-size: clamp(1.45rem,4vw,2.4rem); letter-spacing: -.04em; }.ip-hero button { display: flex; align-items: center; gap: .35rem; padding: .38rem .6rem; border: 1px solid var(--border); border-radius: 9px; color: var(--muted); background: var(--input); font-size: .65rem; }.ip-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .6rem; }.ip-grid > div { display: grid; gap: .2rem; padding: .8rem; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-soft); }.ip-grid span { color: var(--dim); font-size: .6rem; }.ip-grid strong { overflow-wrap: anywhere; font-size: .72rem; }.status-pill.has-error > i { background: var(--amber); box-shadow: 0 0 10px rgba(246,185,75,.6); }

@media (max-width: 1180px) {
  .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.tool-card.featured { grid-column: span 2; }
  .hero { grid-template-columns: minmax(0, .9fr) minmax(410px, 1.1fr); gap: 2rem; }.hero-copy h1 { font-size: clamp(3.2rem, 5.2vw, 4.8rem); }
  .metric-row { grid-template-columns: repeat(2, 1fr); }.metric-row > div:nth-child(2) { border-right: 0; }.metric-row > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .privacy-banner { grid-template-columns: auto 1fr; }.privacy-points { grid-column: 2; }
}
@media (max-width: 900px) {
  :root { --sidebar: 88px; }.brand { min-height: 82px; }.brand > span:last-child { display: none; }.sidebar { flex-basis: var(--sidebar); width: var(--sidebar); }.side-link::before { left: -.72rem; }
  .page-context { display: none; }.topbar { justify-content: space-between; }.top-search { width: min(460px, 58vw); margin: 0; }.status-pill { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 4rem; }.hero-copy { max-width: 680px; }.hero-stage { width: min(650px, 100%); margin: 0 auto; }.float-speed { left: 0; }.float-format { right: 0; }
  .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.tool-card.featured { grid-column: span 2; }
  .privacy-banner { grid-template-columns: 1fr; text-align: center; }.privacy-art { margin: 0 auto; }.privacy-banner .eyebrow { margin: 0 auto; }.privacy-points { grid-column: 1; justify-content: center; }
  .glyph-atlas-workspace { grid-template-columns: 1fr; }.glyph-canvas-wrap canvas { width: min(100%, 520px); }.converter-workspace,.background-workspace { grid-template-columns: 1fr; }.background-preview { min-height: 420px; }
}
@media (max-width: 680px) {
  body { padding-bottom: 68px; }.sidebar { display: none; }.topbar { min-height: 66px; padding: .65rem 1rem; }.mobile-brand { display: flex; align-items: center; gap: .55rem; font-size: .8rem; }.top-search { width: 43px; height: 43px; justify-content: center; padding: 0; }.top-search > span { font-size: 1.15rem; }.top-search input,.top-search kbd { display: none; }.top-actions .icon-button { display: none; }
  main { padding: 0 1rem 3rem; }.hero { min-height: 0; gap: 2.5rem; padding: 3.2rem 0 2rem; }.hero-copy h1 { margin: .9rem 0 1.05rem; font-size: clamp(2.85rem, 13vw, 4.3rem); }.hero-copy > p { font-size: .94rem; }.hero-actions { display: grid; grid-template-columns: 1fr 1fr; margin-top: 1.55rem; }.button { padding-inline: .75rem; font-size: .78rem; }.trust-row { gap: .7rem; }
  .hero-stage { min-height: 380px; }.quick-card { padding: 1rem; }.float-speed { top: -1rem; }.float-format { bottom: 0; }.safe-badge { display: none; }
  .metric-row { grid-template-columns: 1fr; margin-bottom: 3.5rem; }.metric-row > div { border-right: 0; border-bottom: 1px solid var(--border); }.metric-row > div:nth-child(3) { border-bottom: 1px solid var(--border); }.metric-row > div:last-child { border-bottom: 0; }
  .section-heading { align-items: start; }.section-heading > a { display: none; }.category-tabs { width: 100%; }.tool-grid { grid-template-columns: 1fr; }.tool-card,.tool-card.featured { grid-column: auto; min-height: 330px; }.privacy-banner { margin-top: 3.5rem; padding: 1.4rem 1rem; }.privacy-points { display: grid; width: 100%; }.privacy-points > span { text-align: left; }
  footer { display: grid; justify-items: center; text-align: center; }
  .mobile-nav { position: fixed; inset: auto .7rem max(.65rem, env(safe-area-inset-bottom)); z-index: 80; display: grid; grid-template-columns: repeat(4, 1fr); padding: .38rem; border: 1px solid var(--border); border-radius: 17px; background: color-mix(in srgb, var(--panel-solid) 88%, transparent); box-shadow: 0 16px 50px rgba(0,0,0,.45); backdrop-filter: blur(22px); }.mobile-nav a,.mobile-nav button { display: flex; min-height: 49px; align-items: center; justify-content: center; flex-direction: column; gap: .12rem; border-radius: 12px; color: var(--dim); background: transparent; font-size: 1.05rem; }.mobile-nav small { font-size: .57rem; font-weight: 650; }.mobile-nav .active { color: var(--text); background: rgba(139,61,255,.13); }
  .modal-panel { width: 100%; max-height: 94dvh; border-radius: 18px; }.modal-body { padding: .8rem; }.image-workspace { grid-template-columns: 1fr; }.image-preview { min-height: 300px; }.markdown-workspace { grid-template-columns: 1fr; }.markdown-pane:first-child { border-right: 0; border-bottom: 1px solid var(--border); }.markdown-input,.markdown-preview { min-height: 350px; }.glyph-results { grid-template-columns: 1fr; }.toast-region { right: .7rem; bottom: 5.5rem; left: .7rem; }.toast { min-width: 0; width: 100%; }
  .download-form { grid-template-columns: 1fr; }.media-result { grid-template-columns: 1fr; }.media-thumbnail { min-height: 150px; }.media-thumbnail img { min-height: 150px; }.download-options { grid-template-columns: 1fr; }.converter-workspace,.qr-workspace,.background-workspace,.glyph-atlas-workspace { grid-template-columns: 1fr; }.compact-drop { min-height: 280px; }.qr-preview { min-height: 300px; }.background-preview { min-height: 300px; }.glyph-atlas-workspace { min-width: 0; }.glyph-canvas-wrap { padding: .35rem; }.glyph-file-actions { grid-template-columns: 1fr; }.glyph-file-actions button:last-child { grid-column: auto; }.ip-grid { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }