/* ==========================================================================
ANVIL DESIGN SYSTEM
Premium "forge" identity: warm steel + molten ember accent.
Single source of truth for spacing, radius, shadow, color, and layout.
All later rules reference these tokens; light/dark mode is a token swap
on [data-theme], no component-level branching needed.
========================================================================== */
/* latin-ext */
@font-face {
font-family: 'Instrument Serif';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(url('../fonts/InstrumentSerif-400-italic-latin-ext.woff2') format('woff2')) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Instrument Serif';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(url('../fonts/InstrumentSerif-400-italic-latin.woff2') format('woff2')) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Instrument Serif';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(url('../fonts/InstrumentSerif-400-normal-latin-ext.woff2') format('woff2')) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Instrument Serif';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(url('../fonts/InstrumentSerif-400-normal-latin.woff2') format('woff2')) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(url('../fonts/Inter-400-normal-latin-ext.woff2') format('woff2')) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(url('../fonts/Inter-400-normal-latin.woff2') format('woff2')) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(url('../fonts/Inter-500-normal-latin-ext.woff2') format('woff2')) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(url('../fonts/Inter-500-normal-latin.woff2') format('woff2')) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(url('../fonts/Inter-600-normal-latin-ext.woff2') format('woff2')) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(url('../fonts/Inter-600-normal-latin.woff2') format('woff2')) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(url('../fonts/Inter-700-normal-latin-ext.woff2') format('woff2')) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(url('../fonts/Inter-700-normal-latin.woff2') format('woff2')) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(url('../fonts/JetBrainsMono-400-normal-latin-ext.woff2') format('woff2')) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(url('../fonts/JetBrainsMono-400-normal-latin.woff2') format('woff2')) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(url('../fonts/JetBrainsMono-500-normal-latin-ext.woff2') format('woff2')) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(url('../fonts/JetBrainsMono-500-normal-latin.woff2') format('woff2')) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(url('../fonts/SpaceGrotesk-400-normal-latin-ext.woff2') format('woff2')) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(url('../fonts/SpaceGrotesk-400-normal-latin.woff2') format('woff2')) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(url('../fonts/SpaceGrotesk-500-normal-latin-ext.woff2') format('woff2')) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(url('../fonts/SpaceGrotesk-500-normal-latin.woff2') format('woff2')) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(url('../fonts/SpaceGrotesk-600-normal-latin-ext.woff2') format('woff2')) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(url('../fonts/SpaceGrotesk-600-normal-latin.woff2') format('woff2')) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(url('../fonts/SpaceGrotesk-700-normal-latin-ext.woff2') format('woff2')) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(url('../fonts/SpaceGrotesk-700-normal-latin.woff2') format('woff2')) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
/* --- Spacing scale (4px base grid) --- */
--space-0: 0;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
--space-9: 40px;
--space-10: 48px;
--space-11: 56px;
--space-12: 64px;
--space-13: 80px;
--space-14: 96px;
/* --- Surface / background colors (light = warm parchment/steel) --- */
--bg: #f8f5ef;
--surface: #ffffff;
--surface-soft: #f1ece1;
--surface-strong: #e9e1d1;
/* --- Text colors --- */
--text: #201a12;
--text-soft: #5e5646;
--text-faint: #8a8069;
/* --- Border colors --- */
--border: #e6ddc9;
--border-strong: #d8cbac;
/* --- Brand accent: ember + amber forge palette --- */
--primary: #e85f22;
--primary-hover: #d1501a;
--primary-soft: #ffe9db;
--ember: #e85f22;
--amber: #c9860b;
--amber-bright: #ffc24b;
/* --- Semantic colors (informational, NOT branding accents) --- */
--blue: #1663d6;
--blue-soft: #eaf2ff;
--emerald: #0a7a52;
--emerald-soft: #e4f6ec;
--amber-soft: #fff2da;
--red: #c9344a;
--red-soft: #fff0f2;
--success: #0a7a52;
/* --- Code editor --- */
--code-bg: #17130d;
--code-text: #f4efe4;
/* --- Shadow scale (soft elevations) --- */
--shadow-sm: 0 1px 3px rgba(60, 40, 10, 0.07), 0 8px 26px rgba(60, 40, 10, 0.05);
--shadow-md: 0 18px 48px rgba(60, 36, 8, 0.12);
--shadow-lg: 0 28px 80px rgba(52, 30, 6, 0.18);
--shadow-ember: 0 14px 40px -10px rgba(232, 95, 34, 0.38);
--shadow-glow: 0 4px 26px -6px color-mix(in srgb, var(--primary) 26%, transparent);
/* --- Border radius scale --- */
--radius-sm: 10px;
--radius: 16px;
--radius-lg: 24px;
--radius-pill: 999px;
/* --- Layout --- */
--container: 1220px;
--header-height: 72px;
/* --- Premium type system --- */
--font-display: "Space Grotesk", Inter, system-ui, sans-serif;
--font-serif: "Instrument Serif", Georgia, serif;
--font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
--ease: cubic-bezier(.22, .61, .36, 1);
}
html[data-theme="dark"] {
/* Surface / background colors: forge black + warm steel */
--bg: #0b0a08;
--surface: #15130f;
--surface-soft: #1b1812;
--surface-strong: #262119;
/* Text colors */
--text: #f4efe4;
--text-soft: #b9ae9b;
--text-faint: #8a8069;
/* Border colors */
--border: #322c22;
--border-strong: #453d2e;
/* Brand accent */
--primary: #ff7a3d;
--primary-hover: #ff9257;
--primary-soft: rgba(255, 122, 61, 0.16);
--ember: #ff7a3d;
--amber: #ffc24b;
--amber-bright: #ffc24b;
/* Semantic colors */
--blue: #8fd0ff;
--blue-soft: #16233a;
--emerald: #7bd88f;
--emerald-soft: #16301f;
--amber-soft: #3a2a13;
--red: #ff8f7a;
--red-soft: #3a1c1a;
/* Code editor */
--code-bg: #0d0b08;
--code-text: #f4efe4;
/* Shadow scale */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.32), 0 8px 26px rgba(0, 0, 0, 0.24);
--shadow-md: 0 18px 48px rgba(0, 0, 0, 0.42);
--shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.55);
--shadow-ember: 0 16px 48px -10px rgba(255, 122, 61, 0.5);
--shadow-glow: 0 4px 30px -6px color-mix(in srgb, var(--primary) 40%, transparent);
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
color-scheme: light;
}
html[data-theme="dark"] {
color-scheme: dark;
}
body {
position: relative;
margin: 0;
background: var(--bg);
color: var(--text);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 16px;
line-height: 1.62;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: clip;
}
body.no-scroll {
overflow: hidden;
}
::selection {
background: var(--primary);
color: #1a0d04;
}
html[data-theme="dark"] ::selection {
color: #1c0d04;
}
/* ---------- premium ambient backdrop: soft glow + fine grid + grain ---------- */
.site-backdrop {
position: fixed;
inset: 0;
z-index: -2;
overflow: hidden;
pointer-events: none;
}
.site-backdrop::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(46rem 30rem at 82% -8%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 60%),
radial-gradient(40rem 26rem at -10% 22%, color-mix(in srgb, var(--amber-bright, var(--primary)) 8%, transparent), transparent 60%),
radial-gradient(54rem 36rem at 50% 112%, color-mix(in srgb, var(--primary) 6%, transparent), transparent 62%);
}
.site-backdrop::after {
content: "";
position: absolute;
inset: 0;
opacity: 0.4;
background-image:
linear-gradient(color-mix(in srgb, var(--border) 65%, transparent) 1px, transparent 1px),
linear-gradient(90deg, color-mix(in srgb, var(--border) 65%, transparent) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(70rem 44rem at 50% 0%, #000 30%, transparent 78%);
}
.site-grain {
position: fixed;
inset: -50%;
z-index: 60;
pointer-events: none;
opacity: 0.04;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
animation: site-grain 9s steps(6) infinite;
}
@keyframes site-grain {
0%, 100% { transform: translate(0, 0); }
20% { transform: translate(-4%, 3%); }
40% { transform: translate(3%, -4%); }
60% { transform: translate(-3%, -2%); }
80% { transform: translate(4%, 2%); }
}
@media (prefers-reduced-motion: reduce) {
.site-grain {
animation: none;
}
}
button,
input,
textarea,
select {
font: inherit;
}
button,
a {
-webkit-tap-highlight-color: transparent;
}
a {
color: inherit;
text-decoration: none;
}
img,
svg {
display: block;
}
button {
color: inherit;
}
h1,
h2,
h3,
h4,
p {
margin-top: 0;
}
h1,
h2,
h3,
h4 {
font-family: var(--font-display);
line-height: 1.14;
letter-spacing: -0.03em;
font-weight: 700;
}
h1 {
font-size: clamp(2.4rem, 5.5vw, 4.8rem);
margin-bottom: 22px;
letter-spacing: -0.045em;
}
h2 {
font-size: clamp(1.8rem, 3.5vw, 3rem);
margin-bottom: 16px;
}
h3 {
font-size: 1.13rem;
margin-bottom: 10px;
}
p:last-child {
margin-bottom: 0;
}
.container {
width: min(calc(100% - 40px), var(--container));
margin-inline: auto;
}
.narrow-container {
max-width: 900px;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: fixed;
left: 16px;
top: -60px;
z-index: 1000;
background: var(--text);
color: var(--surface);
padding: 10px 14px;
border-radius: var(--radius-sm);
transition: top 0.2s ease;
}
.skip-link:focus {
top: 12px;
}
.icon {
flex: 0 0 auto;
}
.site-header {
position: sticky;
top: 0;
z-index: 100;
min-height: var(--header-height);
background: color-mix(in srgb, var(--surface) 90%, transparent);
border-bottom: 1px solid transparent;
backdrop-filter: blur(18px);
transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.site-header.is-scrolled {
border-bottom-color: color-mix(in srgb, var(--border) 80%, transparent);
box-shadow: 0 12px 32px -18px rgba(20, 12, 4, 0.35);
}
.header-inner {
min-height: var(--header-height);
display: flex;
align-items: center;
gap: 28px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 780;
letter-spacing: -0.025em;
}
.brand-mark {
width: 38px;
height: 38px;
display: grid;
place-items: center;
color: #1c0d04;
border-radius: 11px;
background: linear-gradient(145deg, var(--ember, #ff8a4d), var(--amber-bright, #ffc24b));
box-shadow: 0 9px 22px -4px color-mix(in srgb, var(--primary) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.brand-name {
font-family: var(--font-display);
font-size: 1.18rem;
font-weight: 700;
letter-spacing: -0.02em;
}
.desktop-nav {
display: flex;
align-items: center;
gap: 4px;
margin-left: auto;
}
.desktop-nav a,
.mobile-nav a {
color: var(--text-soft);
font-size: 0.92rem;
font-weight: 650;
padding: 9px 12px;
border-radius: 8px;
transition: color 0.18s ease, background 0.18s ease;
}
.desktop-nav a:hover,
.desktop-nav a:focus-visible,
.mobile-nav a:hover,
.mobile-nav a:focus-visible {
color: var(--text);
background: var(--surface-soft);
}
/* Quiet active state - matches current page segment */
.desktop-nav a[aria-current="page"],
.mobile-nav a[aria-current="page"] {
color: var(--primary);
font-weight: 700;
}
.header-actions {
display: flex;
align-items: center;
gap: 8px;
}
.icon-button {
width: 40px;
height: 40px;
display: inline-grid;
place-items: center;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface);
cursor: pointer;
transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.icon-button:hover {
border-color: var(--border-strong);
background: var(--surface-soft);
}
.icon-button:active {
transform: translateY(1px);
}
.theme-button [data-theme-icon-dark] {
display: none;
}
html[data-theme="dark"] .theme-button [data-theme-icon-light] {
display: none;
}
html[data-theme="dark"] .theme-button [data-theme-icon-dark] {
display: block;
}
.mobile-menu-button {
display: none;
}
.header-search-panel,
.mobile-nav {
border-top: 1px solid var(--border);
background: var(--surface);
}
.header-search-panel[hidden],
.mobile-nav[hidden] {
display: none;
}
.header-search-panel .container {
padding-block: 14px;
}
.header-search-form {
max-width: 760px;
margin-inline: auto;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 10px;
padding: 8px 8px 8px 14px;
border: 1px solid var(--border);
border-radius: 13px;
background: var(--surface-soft);
}
.header-search-form input {
width: 100%;
border: 0;
outline: 0;
background: transparent;
color: var(--text);
}
.mobile-nav-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
padding-block: 12px 18px;
}
.mobile-nav-inner a {
border-radius: var(--radius-sm);
}
.language-menu {
position: relative;
}
.language-button {
min-height: 40px;
display: inline-flex;
align-items: center;
gap: 7px;
border: 1px solid var(--border);
border-radius: 10px;
padding: 0 12px;
background: var(--surface);
cursor: pointer;
}
.language-dropdown {
position: absolute;
right: 0;
top: calc(100% + 8px);
min-width: 180px;
padding: 6px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface);
box-shadow: var(--shadow-md);
}
.language-dropdown a {
display: block;
padding: 9px 10px;
border-radius: 7px;
}
.button {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
border: 1px solid transparent;
border-radius: 11px;
padding: 10px 17px;
font-weight: 700;
line-height: 1;
cursor: pointer;
transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.button:hover {
transform: translateY(-1px);
}
.button:active {
transform: translateY(0);
}
.button-primary {
color: #1c0d04;
background: linear-gradient(135deg, var(--ember, #ff8a4d), var(--amber-bright, #ffc24b));
border-color: transparent;
box-shadow: var(--shadow-ember), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.button-primary:hover {
background: linear-gradient(135deg, var(--ember, #ff8a4d), var(--amber-bright, #ffc24b));
border-color: transparent;
filter: brightness(1.05);
box-shadow: 0 18px 48px -10px color-mix(in srgb, var(--primary) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.button-secondary {
background: var(--surface);
border-color: var(--border-strong);
color: var(--text);
}
.button-secondary:hover,
.button-quiet:hover {
background: var(--surface-soft);
border-color: var(--border-strong);
}
.button-quiet {
background: transparent;
border-color: var(--border);
color: var(--text-soft);
}
.button-light {
color: #1c0d04;
background: var(--text);
border-color: var(--text);
}
html[data-theme="dark"] .button-light {
color: #150b05;
}
.button-small {
min-height: 38px;
padding: 8px 13px;
font-size: 0.88rem;
}
.button-block {
width: 100%;
}
.text-link {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--primary);
font-weight: 730;
}
.text-link:hover {
color: var(--primary-hover);
}
.eyebrow,
.section-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--primary);
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 15px;
}
.hero-section {
position: relative;
overflow: hidden;
padding: 92px 0 78px;
background:
radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 31%),
radial-gradient(circle at 90% 38%, rgba(22, 99, 214, 0.10), transparent 28%),
var(--bg);
}
.hero-section::before {
content: "";
position: absolute;
inset: 0;
opacity: 0.23;
background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: linear-gradient(to bottom, black, transparent 82%);
pointer-events: none;
}
.hero-grid {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.92fr);
align-items: center;
gap: 70px;
}
.hero-copy h1 {
max-width: 780px;
font-weight: 820;
}
.hero-subtitle {
max-width: 720px;
color: var(--text-soft);
font-size: clamp(1.05rem, 1.7vw, 1.25rem);
line-height: 1.7;
margin-bottom: 30px;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 32px;
}
.hero-search {
max-width: 680px;
}
.hero-search > label {
display: block;
margin-bottom: 9px;
color: var(--text-soft);
font-size: 0.84rem;
font-weight: 700;
}
.search-input-wrap {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 10px;
padding: 7px 7px 7px 15px;
border: 1px solid var(--border-strong);
border-radius: 14px;
background: var(--surface);
box-shadow: var(--shadow-sm);
}
.search-input-wrap input {
width: 100%;
min-width: 0;
border: 0;
outline: 0;
color: var(--text);
background: transparent;
}
.popular-links {
display: flex;
flex-wrap: wrap;
gap: 7px 14px;
margin-top: 15px;
color: var(--text-faint);
font-size: 0.82rem;
}
.popular-links span {
font-weight: 750;
color: var(--text-soft);
}
.popular-links a:hover {
color: var(--primary);
}
.hero-visual {
position: relative;
min-height: 455px;
display: grid;
place-items: center;
}
.visual-window {
position: relative;
width: min(100%, 510px);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 20px;
background: #17130d;
color: #f4efe4;
box-shadow: var(--shadow-lg);
transform: perspective(900px) rotateY(-4deg) rotateX(2deg);
}
.visual-window-bar {
height: 49px;
display: flex;
align-items: center;
gap: 7px;
padding: 0 17px;
background: #1d1811;
border-bottom: 1px solid #332c22;
}
.visual-window-bar span {
width: 9px;
height: 9px;
border-radius: 50%;
background: #4a4030;
}
.visual-window-bar strong {
margin-left: 8px;
color: #b9ae9b;
font-size: 0.76rem;
font-weight: 600;
}
.visual-window pre {
margin: 0;
padding: 28px;
min-height: 325px;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
font-size: 0.95rem;
line-height: 1.78;
}
.visual-window code b {
color: #9ec1ff;
font-weight: 500;
}
.visual-window code em {
color: #96ddc4;
font-style: normal;
}
.visual-window code strong {
color: #f6bd72;
}
.visual-window code span {
color: #d3caff;
}
.visual-status {
display: flex;
align-items: center;
gap: 8px;
padding: 13px 20px;
color: #8ee2c9;
background: #150f0a;
border-top: 1px solid #332c22;
font-size: 0.83rem;
font-weight: 700;
}
.visual-card {
position: absolute;
display: flex;
align-items: center;
gap: 9px;
padding: 12px 15px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface);
box-shadow: var(--shadow-md);
font-size: 0.86rem;
font-weight: 720;
}
.visual-card-a {
left: -8px;
top: 74px;
color: var(--primary);
}
.visual-card-b {
right: -10px;
bottom: 70px;
color: var(--blue);
}
.home-quick-tool {
position: relative;
z-index: 2;
margin-top: -25px;
padding-bottom: 68px;
}
.quick-tool-card {
padding: 28px;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface);
box-shadow: var(--shadow-md);
}
.quick-tool-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 26px;
margin-bottom: 22px;
}
.quick-tool-heading h2 {
font-size: clamp(1.5rem, 2.5vw, 2.25rem);
margin-bottom: 9px;
}
.quick-tool-heading p:not(.section-kicker) {
max-width: 760px;
color: var(--text-soft);
}
.local-badge,
.trust-badges span,
.footer-trust span {
display: inline-flex;
align-items: center;
gap: 7px;
}
.local-badge {
flex: 0 0 auto;
color: var(--emerald);
background: var(--emerald-soft);
border: 1px solid color-mix(in srgb, var(--emerald) 24%, transparent);
padding: 8px 11px;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 750;
}
.quick-tool-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.quick-tool-grid textarea,
.quick-tool-grid pre {
width: 100%;
height: 260px;
margin: 0;
padding: 17px;
overflow: auto;
border: 1px solid var(--border);
border-radius: 13px;
background: var(--surface-soft);
color: var(--text);
font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
font-size: 0.86rem;
line-height: 1.62;
resize: vertical;
}
.quick-tool-grid textarea:focus {
outline: 2px solid color-mix(in srgb, var(--primary) 30%, transparent);
border-color: var(--primary);
}
.quick-tool-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 14px;
}
.quick-tool-actions .text-link {
margin-left: auto;
}
.quick-tool-message {
width: 100%;
min-height: 22px;
font-size: 0.82rem;
font-weight: 650;
}
.quick-tool-message.success {
color: var(--success);
}
.quick-tool-message.error {
color: var(--red);
}
.content-section {
padding: 88px 0;
}
.section-muted {
background: var(--surface-soft);
border-block: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
}
.section-dark {
color: #ffffff;
background: #150f0a;
}
.section-heading {
max-width: 760px;
margin-bottom: 34px;
}
.section-heading p:not(.section-kicker) {
color: var(--text-soft);
font-size: 1.02rem;
}
.centered-heading {
text-align: center;
margin-inline: auto;
}
.centered-heading .section-kicker {
justify-content: center;
}
.section-heading-row {
max-width: none;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 28px;
}
.section-heading-row > div {
max-width: 760px;
}
.task-grid,
.category-grid,
.guide-card-grid,
.feature-grid,
.tool-grid {
display: grid;
gap: var(--space-5);
}
.task-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.task-card,
.category-card,
.guide-card,
.feature-card,
.tool-card,
.workflow-card {
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--shadow-sm);
}
.task-card {
padding: var(--space-6);
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.task-card:hover {
transform: translateY(-3px);
border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
box-shadow: var(--shadow-md), var(--shadow-glow);
}
.task-icon,
.feature-icon,
.guide-card > span,
.category-card > span {
width: 46px;
height: 46px;
display: grid;
place-items: center;
margin-bottom: 18px;
border-radius: 12px;
color: var(--primary);
background: var(--primary-soft);
}
.task-card p,
.feature-card p,
.category-card p,
.guide-card p,
.tool-card p,
.workflow-card p {
color: var(--text-soft);
}
.task-link,
.guide-card strong,
.tool-card-link {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 8px;
color: var(--primary);
font-size: 0.86rem;
font-weight: 750;
}
.tool-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.compact-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tool-card {
position: relative;
display: flex;
flex-direction: column;
min-height: 0;
padding: var(--space-6);
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.tool-card:hover {
transform: translateY(-3px);
border-color: color-mix(in srgb, var(--primary) 32%, var(--border));
box-shadow: var(--shadow-md), var(--shadow-glow);
}
.tool-card[hidden] {
display: none;
}
.tool-card-topline {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.tool-icon {
width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: 11px;
}
.tool-icon-json {
color: var(--primary);
background: var(--primary-soft);
}
.tool-icon-data {
color: var(--blue);
background: var(--blue-soft);
}
.tool-icon-documents {
color: var(--emerald);
background: var(--emerald-soft);
}
.favorite-button {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border: 0;
border-radius: 9px;
color: var(--text-faint);
background: transparent;
cursor: pointer;
}
.favorite-button:hover,
.favorite-button.active {
color: var(--amber);
background: var(--amber-soft);
}
.favorite-button.active svg {
fill: currentColor;
}
.tool-card-category {
color: var(--text-faint) !important;
font-size: 0.74rem;
font-weight: 780;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 8px;
}
.tool-card h3 {
font-size: 1.08rem;
}
.tool-card h3 a::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.tool-card > p {
flex: 1;
font-size: 0.91rem;
line-height: 1.62;
}
.tool-card-meta {
display: grid;
gap: 5px;
padding-top: 15px;
border-top: 1px solid var(--border);
color: var(--text-faint);
font-size: 0.72rem;
}
.tool-card-meta span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.tool-card-link {
position: relative;
z-index: 2;
margin-top: 15px;
}
.workflow-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.workflow-card {
padding: 24px;
}
.workflow-card ol {
list-style: none;
padding: 0;
margin: 20px 0 0;
display: grid;
gap: 10px;
}
.workflow-card li {
display: grid;
grid-template-columns: 28px 1fr auto;
align-items: center;
gap: 10px;
color: var(--text-soft);
font-size: 0.86rem;
}
.workflow-card li > span {
width: 27px;
height: 27px;
display: grid;
place-items: center;
border-radius: 8px;
color: var(--primary);
background: var(--primary-soft);
font-weight: 800;
}
.workflow-card li strong {
color: var(--text);
font-weight: 650;
}
.privacy-showcase {
display: grid;
grid-template-columns: 1fr 0.9fr;
align-items: center;
gap: 70px;
}
.privacy-showcase h2 {
color: #ffffff;
}
.privacy-showcase p {
max-width: 680px;
color: #b9ae9b;
margin-bottom: 28px;
}
.privacy-showcase ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 13px;
}
.privacy-showcase li {
display: flex;
align-items: center;
gap: 11px;
padding: 14px 16px;
border: 1px solid #332c22;
border-radius: 11px;
background: #1d1811;
color: #f4efe4;
}
.privacy-showcase li svg {
color: #76dbc5;
}
.category-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.category-card {
padding: 26px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.category-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.category-card strong {
color: var(--primary);
font-size: 0.84rem;
}
.category-blue > span {
color: var(--blue);
background: var(--blue-soft);
}
.category-emerald > span {
color: var(--emerald);
background: var(--emerald-soft);
}
.guide-card-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.guide-card {
padding: var(--space-6);
transition: transform 0.2s ease, border-color 0.2s ease;
}
.guide-card:hover {
transform: translateY(-3px);
border-color: color-mix(in srgb, var(--primary) 36%, var(--border));
}
.guide-card-large {
min-height: 320px;
}
.site-footer {
padding: 68px 0 24px;
border-top: 1px solid var(--border);
background: var(--surface);
}
.footer-grid {
display: grid;
grid-template-columns: minmax(240px, 1.45fr) repeat(3, minmax(140px, 1fr));
gap: clamp(28px, 4vw, 52px);
}
.footer-brand > p {
max-width: 380px;
margin-top: 20px;
color: var(--text-soft);
}
.footer-trust {
display: flex;
flex-wrap: wrap;
gap: 9px 15px;
color: var(--text-faint);
font-size: 0.76rem;
}
.footer-column {
display: grid;
align-content: start;
gap: 9px;
}
.footer-column h2 {
font-size: 0.88rem;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 8px;
}
.footer-column a {
color: var(--text-soft);
font-size: 0.87rem;
}
.footer-column a:hover {
color: var(--primary);
}
.footer-assurance {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px 22px;
margin-top: 44px;
padding: 18px 0;
border-block: 1px solid var(--border);
color: var(--text-soft);
font-size: 0.78rem;
}
.footer-assurance span,
.footer-assurance a {
display: inline-flex;
align-items: center;
gap: 7px;
}
.footer-assurance span svg {
color: var(--primary);
}
.footer-assurance a {
margin-left: auto;
color: var(--primary);
font-weight: 760;
}
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding-top: 25px;
margin-top: 48px;
border-top: 1px solid var(--border);
color: var(--text-faint);
font-size: 0.78rem;
}
.footer-bottom p {
margin: 0;
}
.footer-bottom-links {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
}
.footer-bottom-links a {
color: var(--text-faint);
font-size: 0.78rem;
}
.footer-bottom-links a:hover {
color: var(--primary);
}
.toast {
position: fixed;
left: 50%;
bottom: 26px;
z-index: 1000;
max-width: min(90vw, 520px);
padding: 11px 16px;
border: 1px solid #453d2e;
border-radius: 10px;
color: #ffffff;
background: #1d1811;
box-shadow: var(--shadow-md);
opacity: 0;
pointer-events: none;
transform: translate(-50%, 16px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.show {
opacity: 1;
transform: translate(-50%, 0);
}
.breadcrumbs {
margin-bottom: 24px;
}
.breadcrumbs ol {
list-style: none;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
padding: 0;
margin: 0;
color: var(--text-faint);
font-size: 0.78rem;
}
.breadcrumbs li {
display: inline-flex;
align-items: center;
gap: 6px;
}
.breadcrumbs a:hover {
color: var(--primary);
}
.tool-hero,
.category-hero,
.directory-hero,
.info-hero,
.guide-hero {
padding: 52px 0 58px;
border-bottom: 1px solid var(--border);
background:
radial-gradient(circle at 9% 15%, color-mix(in srgb, var(--primary) 11%, transparent), transparent 29%),
var(--surface);
}
.tool-hero h1,
.category-hero h1,
.directory-hero h1,
.info-hero h1,
.guide-hero h1 {
font-size: clamp(2.1rem, 4vw, 3.7rem);
}
.tool-hero-grid,
.category-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 270px;
align-items: end;
gap: 50px;
}
.tool-hero-intro,
.category-hero p,
.directory-hero > .container > p,
.info-hero > .container > p,
.guide-hero > .container > p {
max-width: 850px;
color: var(--text-soft);
font-size: 1.05rem;
}
.trust-badges {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin-top: 24px;
}
.trust-badges span {
padding: 7px 10px;
border: 1px solid var(--border);
border-radius: 999px;
color: var(--text-soft);
background: var(--surface-soft);
font-size: 0.76rem;
font-weight: 700;
}
.tool-version-card,
.category-stat-panel {
padding: 20px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface-soft);
}
.tool-version-card dl {
margin: 0;
display: grid;
gap: 14px;
}
.tool-version-card dl div {
display: flex;
justify-content: space-between;
gap: 15px;
padding-bottom: 11px;
border-bottom: 1px solid var(--border);
}
.tool-version-card dl div:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.tool-version-card dt {
color: var(--text-soft);
font-size: 0.78rem;
}
.tool-version-card dd {
margin: 0;
font-size: 0.78rem;
font-weight: 750;
text-align: right;
}
.category-stat-panel strong {
display: block;
color: var(--primary);
font-size: 4rem;
line-height: 1;
}
.category-stat-panel span {
display: block;
margin-top: 7px;
font-weight: 750;
}
.category-stat-panel p {
margin-top: 14px;
font-size: 0.8rem;
}
.tool-workspace-section {
padding: 34px 0 62px;
}
.tool-workspace {
overflow: hidden;
border: 1px solid var(--border-strong);
border-radius: var(--radius-lg);
background: var(--surface);
box-shadow: var(--shadow-md);
}
.workspace-topbar {
min-height: 62px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 11px 16px 11px 20px;
border-bottom: 1px solid var(--border);
background: var(--surface-soft);
}
.workspace-label {
margin: 0 0 2px;
font-size: 0.84rem;
font-weight: 750;
}
.workspace-status {
color: var(--text-faint);
font-size: 0.72rem;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 11px;
border-radius: 999px;
border: 1px solid transparent;
line-height: 1.3;
transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.status-error {
color: #ffffff;
background: var(--red, #d64545);
border-color: color-mix(in srgb, var(--red, #d64545) 80%, #000);
box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--red, #d64545) 55%, transparent);
font-weight: 700;
}
.status-working {
color: #7a5200;
background: color-mix(in srgb, var(--amber, #c9860b) 18%, var(--surface, #fff));
border-color: color-mix(in srgb, var(--amber, #c9860b) 45%, transparent);
font-weight: 700;
}
.status-success {
color: #ffffff;
background: var(--success, #0a7a52);
border-color: color-mix(in srgb, var(--success, #0a7a52) 80%, #000);
box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--success, #0a7a52) 55%, transparent);
font-weight: 700;
}
/* Success pulse: draws the eye when a tool finishes, then settles. */
@keyframes workspace-success-pulse {
0% { transform: scale(1); }
50% { transform: scale(1.06); }
100% { transform: scale(1); }
}
.workspace-status.status-success.is-success {
animation: workspace-success-pulse .5s ease 2;
}
/* is-success / is-error legacy classes map to the same states. */
.workspace-status.is-success,
.workspace-status.status-success {
color: #ffffff !important;
background: var(--success, #0a7a52) !important;
border-color: color-mix(in srgb, var(--success, #0a7a52) 80%, #000) !important;
box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--success, #0a7a52) 55%, transparent) !important;
font-weight: 700 !important;
animation: workspace-success-pulse .5s ease 2;
}
.workspace-status.is-error {
color: #ffffff;
background: var(--red, #d64545);
border-color: color-mix(in srgb, var(--red, #d64545) 80%, #000);
box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--red, #d64545) 55%, transparent);
font-weight: 700;
}
.workspace-top-actions,
.editor-toolbar,
.workspace-controls,
.primary-actions,
.control-group,
.tree-toolbar,
.panel-subheading,
.result-header,
.tab-search-row,
.tree-search-bar {
display: flex;
align-items: center;
gap: 8px;
}
.icon-text-button,
.toolbar-button {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 32px;
padding: 6px 9px;
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text-soft);
background: var(--surface);
font-size: 0.74rem;
font-weight: 690;
cursor: pointer;
}
.icon-text-button:hover,
.toolbar-button:hover {
color: var(--text);
border-color: var(--border-strong);
background: var(--surface-soft);
}
.workspace-grid {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 525px;
}
.code-editor,
.code-output {
width: 100%;
min-height: 420px;
margin: 0;
padding: 17px 18px;
overflow: auto;
border: 0;
outline: 0;
border-radius: 0;
color: var(--code-text);
background: var(--code-bg);
font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
font-size: 0.83rem;
line-height: 1.62;
tab-size: 2;
}
.code-output {
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.code-output.no-wrap {
white-space: pre;
overflow-wrap: normal;
}
.compact-output {
min-height: 360px;
}
.token-key {
color: #9ec1ff;
}
.token-string {
color: #8ee2c9;
}
.token-number {
color: #f3c276;
}
.token-boolean {
color: #cbbfff;
}
.token-null {
color: #ff91a1;
}
.validation-line {
min-height: 38px;
display: flex;
align-items: center;
padding: 8px 16px;
border-top: 1px solid #332c22;
color: #8a8069;
background: #150f0a;
font-size: 0.75rem;
}
.valid-line {
color: #81d9c1;
}
.invalid-line {
color: #ff91a1;
}
.workspace-tabs {
display: flex;
gap: 2px;
padding: 8px 8px 0;
overflow-x: auto;
border-bottom: 1px solid var(--border);
background: var(--surface-soft);
}
.workspace-tab {
display: inline-flex;
align-items: center;
gap: 6px;
flex: 0 0 auto;
padding: 8px 10px;
border: 0;
border-bottom: 2px solid transparent;
color: var(--text-faint);
background: transparent;
font-size: 0.73rem;
font-weight: 720;
cursor: pointer;
}
.workspace-tab.active {
color: var(--primary);
border-bottom-color: var(--primary);
}
.workspace-tab-panel {
flex: 1;
min-height: 0;
overflow: auto;
background: var(--surface);
}
.workspace-tab-panel[hidden] {
display: none;
}
.tab-search-row,
.tree-search-bar {
padding: 8px 12px;
border-bottom: 1px solid var(--border);
background: var(--surface);
}
.tab-search-row input,
.tree-search-bar input {
width: 100%;
min-width: 0;
border: 0;
outline: 0;
color: var(--text);
background: transparent;
font-size: 0.77rem;
}
.tab-search-row span,
.tree-search-bar span {
color: var(--text-faint);
font-size: 0.7rem;
}
.tree-toolbar {
justify-content: flex-end;
padding: 8px 12px;
border-bottom: 1px solid var(--border);
}
.tree-view {
min-height: 380px;
padding: 14px;
overflow: auto;
background: var(--surface);
font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
font-size: 0.78rem;
}
.json-tree-root,
.json-tree-root ul {
list-style: none;
margin: 0;
padding-left: 20px;
}
.json-tree-root {
padding-left: 0;
}
.json-tree-node {
position: relative;
margin: 2px 0;
border-radius: 6px;
}
.json-tree-node.tree-match > .tree-value-row,
.json-tree-node.tree-match > details > summary {
background: var(--amber-soft);
}
.json-tree-node summary,
.tree-value-row {
min-height: 30px;
display: flex;
align-items: center;
gap: 8px;
padding: 4px 7px;
border-radius: 6px;
}
.json-tree-node summary {
cursor: pointer;
}
.json-tree-node summary:hover,
.tree-value-row:hover {
background: var(--surface-soft);
}
.tree-key {
color: var(--blue);
font-weight: 650;
}
.tree-meta {
color: var(--text-faint);
}
.tree-value {
color: var(--text-soft);
}
.tree-string {
color: var(--emerald);
}
.tree-number,
.tree-integer {
color: var(--amber);
}
.tree-boolean {
color: var(--primary);
}
.tree-null {
color: var(--red);
}
.tree-actions {
display: inline-flex;
gap: 5px;
margin-left: auto;
opacity: 0;
}
.tree-value-row:hover .tree-actions {
opacity: 1;
}
.tree-actions button {
padding: 3px 6px;
border: 1px solid var(--border);
border-radius: 5px;
color: var(--text-soft);
background: var(--surface);
font-size: 0.64rem;
cursor: pointer;
}
.table-scroll {
width: 100%;
overflow: auto;
}
.empty-state {
padding: 28px;
color: var(--text-faint);
text-align: center;
}
.success-text {
color: var(--success);
}
.error-list {
display: grid;
gap: 10px;
padding: 14px;
}
.error-card,
.success-panel {
padding: 13px 14px;
border-radius: 10px;
}
.error-card {
border: 1px solid color-mix(in srgb, var(--red) 32%, var(--border));
color: var(--red);
background: var(--red-soft);
}
.error-card strong {
display: block;
margin-bottom: 5px;
}
.error-card p {
margin: 0;
color: inherit;
font-size: 0.78rem;
}
.error-location {
display: block;
margin-bottom: 5px;
font-size: 0.7rem;
font-weight: 700;
}
.success-panel {
border: 1px solid color-mix(in srgb, var(--success) 30%, var(--border));
color: var(--success);
background: var(--emerald-soft);
font-weight: 680;
}
.panel-subheading {
justify-content: space-between;
padding: 8px 12px;
border-bottom: 1px solid var(--border);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
padding: 14px;
}
.stat-card {
padding: 14px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface-soft);
}
.stat-card strong {
display: block;
font-size: 1.3rem;
}
.stat-card span {
color: var(--text-faint);
font-size: 0.72rem;
}
.workspace-controls {
min-height: 67px;
justify-content: space-between;
flex-wrap: wrap;
padding: 12px 16px;
border-top: 1px solid var(--border);
background: var(--surface-soft);
}
.inline-controls {
margin-top: auto;
justify-content: flex-start;
}
.control-group {
flex-wrap: wrap;
color: var(--text-soft);
font-size: 0.76rem;
}
.control-group label:not(.checkbox-control) {
font-weight: 650;
}
.control-group select,
.control-group input[type="text"],
.document-options-card input,
.contact-form input,
.contact-form select,
.contact-form textarea,
.directory-selects select {
min-height: 38px;
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text);
background: var(--surface);
padding: 7px 10px;
outline: 0;
}
.control-group input[type="text"] {
width: 150px;
}
.checkbox-control {
display: inline-flex;
align-items: center;
gap: 7px;
cursor: pointer;
}
.checkbox-control input {
width: 16px;
height: 16px;
accent-color: var(--primary);
}
.workspace-result-card {
padding: 17px;
border-top: 1px solid var(--border);
background: var(--surface);
}
.workspace-result-card h3 {
margin-bottom: 12px;
font-size: 0.9rem;
}
.change-list {
display: grid;
gap: 8px;
margin: 0;
padding-left: 20px;
color: var(--text-soft);
font-size: 0.82rem;
}
.result-header {
justify-content: space-between;
gap: 15px;
margin-bottom: 13px;
}
.result-header h3 {
margin: 0;
}
.segmented-control {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.segment-button {
padding: 6px 9px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface-soft);
color: var(--text-soft);
font-size: 0.69rem;
cursor: pointer;
}
.segment-button.active {
color: #ffffff;
border-color: var(--primary);
background: var(--primary);
}
.diff-added {
color: var(--success) !important;
}
.diff-removed,
.diff-type_changed {
color: var(--red) !important;
}
.diff-changed {
color: var(--amber) !important;
}
.keyboard-hint {
display: flex;
align-items: center;
gap: 7px;
margin: 0;
padding: 9px 16px;
border-top: 1px solid var(--border);
color: var(--text-faint);
background: var(--surface);
font-size: 0.68rem;
}
.workspace-fullscreen {
position: fixed;
inset: 12px;
z-index: 500;
display: flex;
flex-direction: column;
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
}
.workspace-fullscreen .workspace-grid {
flex: 1;
min-height: 0;
}
.workspace-fullscreen .code-editor,
.workspace-fullscreen .code-output {
min-height: 100%;
}
.tree-workspace-grid .tree-panel {
min-height: 525px;
}
.document-workspace-grid {
grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
}
.document-options-card {
padding: 24px;
background: var(--surface-soft);
}
.document-options-card h3 {
margin-bottom: 20px;
}
.document-options-card > label:not(.checkbox-control) {
display: block;
margin: 14px 0 6px;
color: var(--text-soft);
font-size: 0.78rem;
font-weight: 700;
}
.document-options-card input[type="text"] {
width: 100%;
}
.document-options-card .checkbox-control {
margin: 17px 0;
color: var(--text-soft);
font-size: 0.8rem;
}
.upload-help {
display: flex;
gap: 9px;
padding: 12px;
margin: 17px 0;
border: 1px solid var(--border);
border-radius: 10px;
color: var(--text-faint);
background: var(--surface);
font-size: 0.75rem;
}
.document-result {
margin-top: 14px;
padding: 14px;
border: 1px solid color-mix(in srgb, var(--success) 30%, var(--border));
border-radius: 10px;
background: var(--emerald-soft);
}
.document-result p {
color: var(--success);
font-size: 0.8rem;
font-weight: 700;
}
.step-grid {
display: grid;
gap: 15px;
}
.step-card {
display: grid;
grid-template-columns: 44px 1fr;
gap: 17px;
padding: 20px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
}
.step-number {
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: 11px;
color: #ffffff;
background: var(--primary);
font-weight: 800;
}
.step-card p {
color: var(--text-soft);
margin: 0;
}
.feature-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.feature-card {
padding: 23px;
}
.content-two-column {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.align-start {
align-items: start;
}
.check-list,
.note-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 12px;
}
.check-list li,
.note-list li {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 11px 13px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface);
color: var(--text-soft);
}
.check-list svg {
color: var(--success);
}
.note-list svg {
color: var(--amber);
}
.privacy-panel {
padding: 30px;
border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
border-radius: var(--radius-lg);
background: linear-gradient(145deg, var(--primary-soft), var(--surface));
}
.privacy-panel-icon {
width: 52px;
height: 52px;
display: grid;
place-items: center;
margin-bottom: 20px;
border-radius: 14px;
color: var(--primary);
background: var(--surface);
}
.privacy-panel p {
color: var(--text-soft);
}
.privacy-panel a {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--primary);
font-weight: 740;
}
.spec-table {
overflow: hidden;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
}
.spec-row {
display: grid;
grid-template-columns: minmax(130px, 0.45fr) 1fr;
gap: 18px;
padding: 14px 16px;
border-bottom: 1px solid var(--border);
}
.spec-row:last-child {
border-bottom: 0;
}
.spec-row span:first-child {
color: var(--text-faint);
font-size: 0.8rem;
}
.spec-row strong {
font-size: 0.82rem;
font-weight: 680;
}
.json-reference-row span:first-child {
display: grid;
gap: 5px;
}
.json-reference-row code {
color: var(--primary);
font-size: 0.72rem;
}
.accordion-list {
display: grid;
gap: 10px;
}
.accordion-item {
overflow: hidden;
border: 1px solid var(--border);
border-radius: 11px;
background: var(--surface);
}
.accordion-button {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
padding: 16px 18px;
border: 0;
background: transparent;
text-align: left;
font-weight: 720;
cursor: pointer;
}
.accordion-button svg {
transition: transform 0.2s ease;
}
.accordion-button[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.accordion-panel {
padding: 0 18px 17px;
color: var(--text-soft);
}
.accordion-panel[hidden] {
display: none;
}
.directory-hero {
text-align: center;
}
.directory-hero .breadcrumbs {
display: flex;
justify-content: center;
}
.directory-search {
max-width: 720px;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 10px;
margin: 28px auto 0;
padding: 12px 16px;
border: 1px solid var(--border-strong);
border-radius: 13px;
background: var(--surface-soft);
}
.directory-search input {
width: 100%;
border: 0;
outline: 0;
background: transparent;
color: var(--text);
}
.directory-section {
padding-top: 40px;
}
.directory-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-bottom: 20px;
}
.filter-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.filter-pill {
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface);
color: var(--text-soft);
font-size: 0.77rem;
font-weight: 700;
cursor: pointer;
}
.filter-pill.active {
color: #ffffff;
border-color: var(--primary);
background: var(--primary);
}
.directory-selects {
display: flex;
align-items: center;
gap: 14px;
color: var(--text-soft);
font-size: 0.78rem;
}
.directory-count {
color: var(--text-faint);
font-size: 0.8rem;
}
.empty-directory {
padding: 70px 20px;
text-align: center;
color: var(--text-faint);
}
.empty-directory svg {
margin-inline: auto;
}
.page-updated {
color: var(--text-faint) !important;
font-size: 0.78rem !important;
}
.prose-sections,
.guide-content {
display: grid;
gap: 42px;
}
.prose-sections article,
.guide-content > section {
padding-bottom: 38px;
border-bottom: 1px solid var(--border);
}
.prose-sections article:last-child,
.guide-content > section:last-of-type {
border-bottom: 0;
}
.prose-sections p,
.guide-content p {
color: var(--text-soft);
font-size: 1.02rem;
}
.contact-form {
padding: var(--space-7);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface);
box-shadow: var(--shadow-sm);
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
}
.contact-form > label,
.form-grid label {
display: grid;
gap: var(--space-2);
margin-bottom: var(--space-4);
color: var(--text-soft);
font-size: 0.82rem;
font-weight: 700;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
width: 100%;
padding: var(--space-2) var(--space-3);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface-soft);
color: var(--text);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
outline: 0;
border-color: var(--primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.contact-form textarea {
resize: vertical;
}
.form-note {
display: flex;
gap: 8px;
color: var(--text-faint);
font-size: 0.77rem;
}
.code-comparison {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 13px;
margin-top: 20px;
}
.code-comparison > div {
overflow: hidden;
border: 1px solid var(--border);
border-radius: 11px;
}
.code-comparison span {
display: block;
padding: 8px 11px;
color: var(--text-soft);
background: var(--surface-soft);
font-size: 0.72rem;
font-weight: 750;
}
.code-comparison pre {
min-height: 105px;
margin: 0;
padding: 14px;
overflow: auto;
color: var(--code-text);
background: var(--code-bg);
font-family: "SFMono-Regular", Consolas, monospace;
font-size: 0.78rem;
}
.guide-cta {
display: grid;
grid-template-columns: 48px 1fr;
gap: 18px;
padding: 25px;
border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
border-radius: var(--radius-lg);
background: var(--primary-soft);
}
.guide-cta > span {
width: 46px;
height: 46px;
display: grid;
place-items: center;
border-radius: 12px;
color: #ffffff;
background: var(--primary);
}
.guide-cta h2 {
font-size: 1.3rem;
}
@media (max-width: 1080px) {
.hero-grid {
grid-template-columns: 1fr 0.82fr;
gap: 35px;
}
.tool-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.feature-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.footer-grid {
grid-template-columns: 1fr 1fr;
}
.tool-hero-content {
grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
gap: 30px;
}
}
@media (max-width: 900px) {
.desktop-nav {
display: none;
}
.header-actions {
margin-left: auto;
}
.mobile-menu-button {
display: inline-grid;
}
.hero-section {
padding-top: 70px;
}
.hero-grid,
.privacy-showcase,
.content-two-column,
.tool-hero-grid,
.tool-hero-content,
.tool-overview-grid,
.category-hero-grid {
grid-template-columns: 1fr;
}
.tool-hero-details {
max-width: 620px;
}
.workspace-section-heading {
align-items: flex-start;
flex-direction: column;
}
.workspace-section-assurance {
justify-content: flex-start;
}
.hero-visual {
min-height: 390px;
}
.tool-version-card,
.category-stat-panel {
max-width: 420px;
}
.task-grid,
.workflow-grid,
.category-grid,
.guide-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tool-grid,
.compact-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.workspace-grid,
.document-workspace-grid {
grid-template-columns: 1fr;
}
.editor-panel {
border-right: 0;
border-bottom: 1px solid var(--border);
}
.editor-panel:last-child {
border-bottom: 0;
}
.code-editor,
.code-output {
min-height: 360px;
}
.workspace-fullscreen .workspace-grid {
overflow: auto;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
}
.footer-brand {
grid-column: 1 / -1;
}
.footer-column:last-child {
grid-column: auto;
}
}
@media (max-width: 680px) {
:root {
--header-height: 64px;
}
.container {
width: min(calc(100% - 24px), var(--container));
}
.brand-name {
font-size: 1.04rem;
}
.brand-mark {
width: 35px;
height: 35px;
}
.header-inner {
gap: 12px;
}
.header-actions {
gap: 5px;
}
.icon-button {
width: 37px;
height: 37px;
}
h1 {
font-size: clamp(2.2rem, 12vw, 3.3rem);
}
h2 {
font-size: clamp(1.65rem, 8vw, 2.3rem);
}
.hero-section {
padding: 54px 0 64px;
}
.hero-actions,
.quick-tool-actions {
align-items: stretch;
}
.hero-actions .button {
width: 100%;
}
.search-input-wrap {
grid-template-columns: auto 1fr;
}
.search-input-wrap .button {
grid-column: 1 / -1;
width: 100%;
}
.hero-visual {
min-height: 325px;
}
.visual-window {
transform: none;
}
.visual-window pre {
min-height: 250px;
padding: 20px;
font-size: 0.78rem;
}
.visual-card {
display: none;
}
.home-quick-tool {
margin-top: -18px;
}
.quick-tool-card {
padding: 18px;
}
.quick-tool-heading {
display: grid;
}
.local-badge {
justify-self: start;
}
.quick-tool-grid,
.task-grid,
.workflow-grid,
.category-grid,
.guide-card-grid,
.tool-grid,
.compact-grid,
.feature-grid,
.form-grid,
.code-comparison {
grid-template-columns: 1fr;
}
.quick-tool-actions .text-link {
width: 100%;
margin-left: 0;
}
.content-section {
padding: 64px 0;
}
.section-heading-row,
.directory-controls,
.footer-bottom,
.workspace-topbar,
.result-header {
align-items: flex-start;
flex-direction: column;
}
.tool-card {
min-height: 0;
}
.footer-grid {
grid-template-columns: 1fr;
gap: 34px;
}
.footer-brand,
.footer-column:last-child {
grid-column: auto;
}
.footer-assurance {
align-items: flex-start;
flex-direction: column;
}
.footer-assurance a {
margin-left: 0;
}
.tool-hero,
.category-hero,
.directory-hero,
.info-hero,
.guide-hero {
padding: 35px 0 42px;
}
.tool-hero-v2 {
padding: 24px 0 30px;
}
.tool-hero-v2 .breadcrumbs {
margin-bottom: 20px;
}
.tool-title-row {
gap: 12px;
}
.tool-title-icon {
width: 46px;
height: 46px;
border-radius: 13px;
}
.tool-hero-v2 h1 {
font-size: clamp(2rem, 11vw, 3rem);
}
.tool-hero-v2 .tool-hero-intro,
.tool-hero-actions {
margin-left: 0;
}
.tool-hero-details {
padding: 18px;
}
.tool-hero-actions .button {
width: 100%;
}
.tool-page .container-workspace {
width: min(calc(100% - 16px), 1440px);
}
.workspace-section-heading {
margin-bottom: 12px;
padding-inline: 4px;
}
.workspace-section-assurance {
display: none;
}
.tool-workspace-section {
padding: 24px 0 58px;
}
.tool-workspace {
border-radius: 14px;
}
.workspace-top-actions {
width: 100%;
overflow-x: auto;
}
.icon-text-button {
flex: 0 0 auto;
}
.editor-heading {
align-items: flex-start;
flex-direction: column;
}
.editor-toolbar {
width: 100%;
overflow-x: auto;
}
.workspace-controls {
align-items: stretch;
flex-direction: column;
}
.primary-actions,
.control-group {
width: 100%;
}
.primary-actions {
display: grid;
grid-template-columns: 1fr;
}
.control-group {
align-items: flex-start;
flex-direction: column;
}
.control-group select,
.control-group input[type="text"] {
width: 100%;
}
.stats-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.workspace-fullscreen {
inset: 0;
border-radius: 0;
}
.spec-row {
grid-template-columns: 1fr;
gap: 5px;
}
.directory-selects {
width: 100%;
align-items: stretch;
flex-direction: column;
}
.directory-selects select {
width: 100%;
}
.guide-cta {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
/* ==========================================================================
SHARED COMPONENT PRIMITIVES (Phase 0)
Base classes for sitewide reuse. Existing page-level styles are untouched;
later phases should migrate one-off patterns to these primitives.
========================================================================== */
/* --- Buttons ---
Existing classes preserved: .button, .button-primary, .button-secondary,
.button-quiet, .button-light, .button-small, .button-large, .button-block.
New additions below extend the system without renaming anything.
*/
/* Danger/destructive action */
.button-danger {
color: #ffffff;
background: var(--red);
border-color: var(--red);
}
.button-danger:hover {
background: color-mix(in srgb, var(--red) 88%, #000000);
border-color: color-mix(in srgb, var(--red) 88%, #000000);
}
/* Focus-visible ring for all buttons (accessibility) */
.button:focus-visible,
.icon-button:focus-visible,
.icon-text-button:focus-visible,
.toolbar-button:focus-visible,
.filter-pill:focus-visible,
.chip:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
/* --- Chips / Pills ---
Unified base for: filter pills, query chips, badges, tags.
Existing classes (.filter-pill, .query-chip, .local-badge, .trust-badges span,
.tool-version-pill, .guide-card-meta small) continue to work as-is.
New generic .chip can be used in future phases.
*/
.chip {
display: inline-flex;
align-items: center;
gap: var(--space-1, 4px);
padding: var(--space-2, 8px) var(--space-3, 12px);
border: 1px solid var(--border);
border-radius: var(--radius-pill, 999px);
background: var(--surface);
color: var(--text-soft);
font-size: 0.78rem;
font-weight: 700;
line-height: 1;
cursor: default;
white-space: nowrap;
}
.chip-interactive {
cursor: pointer;
transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.chip-interactive:hover,
.chip-interactive:focus-visible {
border-color: var(--primary);
color: var(--primary);
background: var(--surface);
}
.chip-active {
color: #ffffff;
border-color: var(--primary);
background: var(--primary);
}
/* Semantic chip variants */
.chip-success {
color: var(--emerald);
border-color: color-mix(in srgb, var(--emerald) 30%, var(--border));
background: var(--emerald-soft);
}
.chip-warning {
color: var(--amber);
border-color: color-mix(in srgb, var(--amber) 30%, var(--border));
background: var(--amber-soft);
}
.chip-error {
color: var(--red);
border-color: color-mix(in srgb, var(--red) 30%, var(--border));
background: var(--red-soft);
}
/* --- Cards (base) ---
Generic card surface. Existing card classes (.tool-card, .task-card, etc.)
are NOT changed. Use .card for new, generic card surfaces in later phases.
*/
.card {
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--shadow-sm);
}
.card-elevated {
box-shadow: var(--shadow-md);
}
.card-interactive {
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.card-interactive:hover {
transform: translateY(-3px);
border-color: color-mix(in srgb, var(--primary) 32%, var(--border));
box-shadow: var(--shadow-md);
}
/* --- Notices (success / error / info / warning) ---
Replaces ad-hoc notice styling. Existing .error-card, .success-panel,
.toast, .quick-tool-message remain untouched.
New unified .notice pattern for future use.
*/
.notice {
display: flex;
align-items: flex-start;
gap: var(--space-3, 12px);
padding: var(--space-4, 16px);
border-radius: var(--radius-sm);
font-size: 0.88rem;
line-height: 1.55;
}
.notice svg {
flex: 0 0 auto;
margin-top: 1px;
}
.notice-success {
border: 1px solid color-mix(in srgb, var(--success) 30%, var(--border));
color: var(--success);
background: var(--emerald-soft);
}
.notice-error {
border: 1px solid color-mix(in srgb, var(--red) 32%, var(--border));
color: var(--red);
background: var(--red-soft);
}
.notice-info {
border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--border));
color: var(--blue);
background: var(--blue-soft);
}
.notice-warning {
border: 1px solid color-mix(in srgb, var(--amber) 34%, var(--border));
color: var(--amber);
background: var(--amber-soft);
}
/* --- Section headings (standardized hierarchy) ---
Reduces overuse of competing H2 sizes.
.section-kicker - eyebrow label (already exists)
.section-heading - wrapper for kicker + H2 + description (already exists)
.section-title - the heading itself, constrains weight/size
Usage:
*/
.section-title {
font-size: clamp(1.45rem, 2.4vw, 2rem);
font-weight: 780;
line-height: 1.16;
letter-spacing: -0.025em;
margin-bottom: var(--space-2, 8px);
}
.section-subtitle {
color: var(--text-soft);
font-size: 1.02rem;
line-height: 1.65;
}
/* ==========================================================================
MODAL / DIALOG PATTERN (Phase 0)
Base CSS for overlay + panel. Markup is wired in a later UI phase.
Class names documented here for frontend developers.
Markup contract:
JS contract (to be implemented in a later phase):
- Toggle [hidden] on .modal-overlay
- Trap focus inside .modal-panel
- Close on Escape key
- Close on overlay click (outside panel)
- Return focus to trigger element on close
========================================================================== */
.modal-overlay {
position: fixed;
inset: 0;
z-index: 900;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-6, 24px);
background: rgba(13, 16, 32, 0.55);
backdrop-filter: blur(4px);
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
}
.modal-overlay[hidden] {
display: flex; /* keep in flow for transition; visibility handles hiding */
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.modal-overlay:not([hidden]) {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.modal-panel {
width: 100%;
max-width: 520px;
max-height: calc(100dvh - var(--space-12, 64px));
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--border-strong);
border-radius: var(--radius-lg);
background: var(--surface);
box-shadow: var(--shadow-lg);
transform: translateY(12px) scale(0.97);
transition: transform 0.2s ease;
}
.modal-overlay:not([hidden]) .modal-panel {
transform: translateY(0) scale(1);
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4, 16px);
padding: var(--space-5, 20px) var(--space-6, 24px);
border-bottom: 1px solid var(--border);
}
.modal-header h2 {
margin: 0;
font-size: 1.13rem;
font-weight: 780;
}
.modal-close {
width: 36px;
height: 36px;
display: inline-grid;
place-items: center;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--text-soft);
cursor: pointer;
transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.modal-close:hover {
border-color: var(--border-strong);
background: var(--surface-soft);
color: var(--text);
}
.modal-close:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
.modal-body {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: var(--space-6, 24px);
color: var(--text-soft);
font-size: 0.92rem;
line-height: 1.65;
}
.modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-3, 12px);
padding: var(--space-4, 16px) var(--space-6, 24px);
border-top: 1px solid var(--border);
background: var(--surface-soft);
}
/* Modal responsive: full-screen on small viewports */
@media (max-width: 680px) {
.modal-overlay {
padding: 0;
align-items: flex-end;
}
.modal-panel {
max-width: 100%;
max-height: 90dvh;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
}
/* Modal reduced-motion: disable transitions */
@media (prefers-reduced-motion: reduce) {
.modal-overlay,
.modal-panel {
transition: none;
}
}
/* Clickable backdrop area outside modal panel */
.modal-backdrop-close {
position: absolute;
inset: 0;
z-index: -1;
cursor: default;
}
/* Tool report trigger button - lives inside the tool hero title row,
right-aligned next to the tool title. */
.tool-report-trigger {
display: inline-flex;
margin: 0;
padding: 0;
}
@media (max-width: 700px) {
.tool-report-trigger {
padding: 0;
}
}
/* Tool report form inside modal */
.tool-report-form {
margin-top: var(--space-4, 16px);
}
.tool-report-form label {
display: grid;
gap: 5px;
margin-bottom: var(--space-3, 12px);
}
.tool-report-form label > span {
font-size: 0.85rem;
font-weight: 650;
color: var(--text);
}
.tool-report-form select,
.tool-report-form textarea,
.tool-report-form input[type="email"],
.tool-report-form input[type="text"] {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm, 9px);
background: var(--bg);
color: var(--text);
font-size: 0.92rem;
}
.tool-report-form select:focus,
.tool-report-form textarea:focus,
.tool-report-form input:focus {
outline: 2px solid var(--primary);
outline-offset: 1px;
border-color: var(--primary);
}
.tool-report-form small {
color: var(--text-faint);
font-size: 0.78rem;
}
.tool-report-form .button {
margin-top: var(--space-2, 8px);
}
/* Tool platform refinement */
.container-wide {
width: min(calc(100% - 32px), 1440px);
margin-inline: auto;
}
.container-workspace {
width: min(calc(100% - 28px), 1540px);
margin-inline: auto;
}
.tool-content-container {
width: min(calc(100% - 40px), 1180px);
margin-inline: auto;
}
.button-block {
width: 100%;
justify-content: center;
}
.button-large {
min-height: 50px;
padding-inline: 20px;
}
/* Homepage hero */
.hero-section-v2 {
position: relative;
padding: 106px 0 48px;
background: var(--bg);
isolation: isolate;
}
.hero-section-v2::before {
display: none;
}
.hero-backdrop {
position: absolute;
inset: 0;
z-index: -2;
overflow: hidden;
background:
radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 43%),
radial-gradient(circle at 9% 42%, color-mix(in srgb, var(--blue) 11%, transparent), transparent 28%),
radial-gradient(circle at 91% 44%, color-mix(in srgb, var(--emerald) 10%, transparent), transparent 28%);
}
.hero-backdrop::before {
content: "";
position: absolute;
inset: 0;
opacity: 0.34;
background-image:
linear-gradient(color-mix(in srgb, var(--border) 70%, transparent) 1px, transparent 1px),
linear-gradient(90deg, color-mix(in srgb, var(--border) 70%, transparent) 1px, transparent 1px);
background-size: 54px 54px;
mask-image: linear-gradient(to bottom, black 0%, black 58%, transparent 96%);
}
.hero-backdrop::after {
content: "";
position: absolute;
width: 680px;
height: 260px;
left: 50%;
top: 112px;
transform: translateX(-50%);
border-radius: 50%;
background: color-mix(in srgb, var(--primary) 20%, transparent);
filter: blur(110px);
opacity: 0.52;
}
.hero-v2-shell {
position: relative;
}
.hero-v2-copy {
max-width: 1040px;
margin: 0 auto;
text-align: center;
}
.hero-eyebrow {
padding: 8px 13px;
border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
border-radius: 999px;
background: color-mix(in srgb, var(--surface) 80%, transparent);
box-shadow: var(--shadow-sm);
backdrop-filter: blur(10px);
}
.hero-v2-copy h1 {
max-width: 980px;
margin: 0 auto 24px;
font-size: clamp(3rem, 7vw, 6.3rem);
line-height: 0.98;
font-weight: 860;
letter-spacing: -0.06em;
}
.hero-v2-copy .hero-subtitle {
max-width: 850px;
margin: 0 auto 30px;
font-size: clamp(1.08rem, 2vw, 1.34rem);
}
.hero-search-v2 {
max-width: 860px;
margin: 0 auto 20px;
}
.hero-search-field {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 12px;
padding: 9px 9px 9px 18px;
border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border-strong));
border-radius: 18px;
background: color-mix(in srgb, var(--surface) 92%, transparent);
box-shadow: 0 24px 70px rgba(28, 31, 63, 0.14);
backdrop-filter: blur(14px);
}
.hero-search-field > svg {
color: var(--primary);
}
.hero-search-field input {
min-width: 0;
width: 100%;
border: 0;
outline: 0;
color: var(--text);
background: transparent;
font-size: 1rem;
}
.hero-actions-centered {
justify-content: center;
align-items: center;
margin: 0 0 16px;
}
.hero-secondary-link {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 0.92rem;
font-weight: 600;
color: var(--text-soft);
text-decoration: none;
transition: color 0.18s ease;
}
.hero-secondary-link:hover {
color: var(--primary);
}
.hero-secondary-link svg {
opacity: 0.6;
transition: opacity 0.18s ease;
}
.hero-secondary-link:hover svg {
opacity: 1;
}
.popular-links-v2 {
justify-content: center;
margin-top: 0;
flex-wrap: wrap;
gap: 4px 6px;
}
.popular-links-v2 a {
font-size: 0.82rem;
padding: 4px 9px;
}
.hero-value-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
max-width: 1100px;
margin: 46px auto 18px;
}
.hero-value-card {
display: grid;
grid-template-columns: 42px 1fr;
gap: 13px;
padding: 19px;
border: 1px solid var(--border);
border-radius: 16px;
text-align: left;
background: color-mix(in srgb, var(--surface) 88%, transparent);
box-shadow: var(--shadow-sm);
backdrop-filter: blur(12px);
}
.hero-value-card > span {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 12px;
color: var(--primary);
background: var(--primary-soft);
}
.hero-value-card h2 {
margin-bottom: 5px;
font-size: 0.98rem;
}
.hero-value-card p {
color: var(--text-soft);
font-size: 0.79rem;
line-height: 1.55;
}
.hero-workflow-panel {
max-width: 1180px;
margin: 18px auto 0;
padding: 24px;
border: 1px solid var(--border-strong);
border-radius: 22px;
background: var(--surface);
box-shadow: var(--shadow-md);
}
.hero-workflow-heading {
display: flex;
align-items: center;
gap: 13px;
margin-bottom: 20px;
}
.hero-workflow-icon {
width: 46px;
height: 46px;
display: grid;
place-items: center;
border-radius: 13px;
color: #ffffff;
background: var(--primary);
}
.hero-workflow-heading .section-kicker {
margin-bottom: 3px;
}
.hero-workflow-heading h2 {
margin: 0;
font-size: 1.15rem;
}
.hero-flow-list {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.hero-flow-list li {
position: relative;
display: flex;
align-items: center;
gap: 9px;
min-height: 54px;
padding: 10px 11px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface-soft);
}
.hero-flow-list li > span {
width: 28px;
height: 28px;
flex: 0 0 auto;
display: grid;
place-items: center;
border-radius: 9px;
color: #ffffff;
background: var(--primary);
font-size: 0.73rem;
font-weight: 800;
}
.hero-flow-list strong {
font-size: 0.8rem;
}
.hero-flow-list svg {
margin-left: auto;
color: var(--text-faint);
}
.hero-stat-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
margin-top: 20px;
overflow: hidden;
border: 1px solid var(--border);
border-radius: 14px;
background: var(--border);
}
.hero-stat-grid div {
display: flex;
align-items: baseline;
justify-content: center;
gap: 9px;
padding: 13px;
background: var(--surface-soft);
}
.hero-stat-grid strong {
color: var(--primary);
font-size: 1.25rem;
}
.hero-stat-grid span {
color: var(--text-soft);
font-size: 0.73rem;
font-weight: 700;
}
.home-quick-tool-v2 {
position: relative;
z-index: 2;
margin-top: -8px;
padding: 34px 0 82px;
}
.quick-tool-card-v2 {
border-radius: 24px;
box-shadow: var(--shadow-lg);
}
.quick-tool-grid-v2 {
gap: 0;
overflow: hidden;
border: 1px solid #332c22;
border-radius: 16px;
background: var(--code-bg);
}
.quick-editor-panel {
min-width: 0;
}
.quick-editor-panel + .quick-editor-panel {
border-left: 1px solid #332c22;
}
.quick-editor-label {
padding: 9px 14px;
border-bottom: 1px solid #332c22;
color: #b9ae9b;
background: #1d1811;
font-size: 0.73rem;
font-weight: 750;
}
.quick-tool-grid-v2 textarea,
.quick-tool-grid-v2 pre {
min-height: 290px;
border: 0;
border-radius: 0;
}
/* Tool directory */
.tools-library-hero,
.guide-library-hero {
position: relative;
overflow: hidden;
padding: 68px 0 76px;
border-bottom: 1px solid var(--border);
background:
radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 47%),
var(--surface-soft);
}
.tools-library-hero::after,
.guide-library-hero::after {
content: "";
position: absolute;
inset: 0;
opacity: 0.26;
background-image: radial-gradient(var(--border-strong) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(to bottom, black, transparent 92%);
pointer-events: none;
}
.tools-library-copy,
.guide-library-hero-copy {
position: relative;
z-index: 1;
max-width: 940px;
margin: 38px auto 0;
text-align: center;
}
.tools-library-copy h1,
.guide-library-hero-copy h1 {
max-width: 900px;
margin-inline: auto;
font-size: clamp(2.8rem, 6vw, 5.2rem);
letter-spacing: -0.055em;
}
.tools-library-copy > p,
.guide-library-hero-copy > p {
max-width: 780px;
margin-inline: auto;
color: var(--text-soft);
font-size: 1.12rem;
}
.directory-search-v2,
.guide-search {
max-width: 790px;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 11px;
margin: 28px auto 0;
padding: 9px 10px 9px 17px;
border: 1px solid var(--border-strong);
border-radius: 16px;
background: var(--surface);
box-shadow: var(--shadow-md);
}
.directory-search-v2 input,
.guide-search input {
width: 100%;
min-width: 0;
border: 0;
outline: 0;
color: var(--text);
background: transparent;
}
.directory-search-v2 > span {
padding: 7px 9px;
border-radius: 8px;
color: var(--text-faint);
background: var(--surface-soft);
font-size: 0.72rem;
white-space: nowrap;
}
.tool-task-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.tool-task-card {
display: flex;
flex-direction: column;
min-height: 245px;
padding: 23px;
border: 1px solid var(--border);
border-radius: 18px;
background: var(--surface);
box-shadow: var(--shadow-sm);
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.tool-task-card:hover {
transform: translateY(-4px);
border-color: color-mix(in srgb, var(--primary) 44%, var(--border));
box-shadow: var(--shadow-md), var(--shadow-glow);
}
.tool-task-card > span {
width: 45px;
height: 45px;
display: grid;
place-items: center;
margin-bottom: 20px;
border-radius: 13px;
color: var(--primary);
background: var(--primary-soft);
}
.tool-task-card p {
color: var(--text-soft);
font-size: 0.87rem;
}
.tool-task-card strong {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: auto;
color: var(--primary);
font-size: 0.78rem;
}
.directory-panel {
padding: 20px;
border: 1px solid var(--border);
border-radius: 22px;
background: var(--surface);
box-shadow: var(--shadow-sm);
}
.directory-controls-v2 {
margin: 0 0 20px;
padding: 0 0 18px;
border-bottom: 1px solid var(--border);
}
.directory-count-v2 {
padding: 8px 11px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface);
}
.tool-grid-directory {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tool-card-v2 {
min-height: 310px;
}
.tool-card-v2 .tool-card-meta {
flex-wrap: wrap;
}
.tools-quality-layout {
grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
align-items: start;
}
.quality-point-list {
display: grid;
gap: 12px;
}
.quality-point-list article {
display: grid;
grid-template-columns: 44px 1fr;
gap: 13px;
padding: 17px;
border: 1px solid var(--border);
border-radius: 15px;
background: var(--surface);
}
.quality-point-list article > span {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 12px;
color: var(--primary);
background: var(--primary-soft);
}
.quality-point-list h3 {
margin-bottom: 4px;
font-size: 0.98rem;
}
.quality-point-list p {
color: var(--text-soft);
font-size: 0.82rem;
}
.workflow-showcase-card {
padding: 28px;
border: 1px solid var(--border-strong);
border-radius: 22px;
background: var(--surface-soft);
}
.workflow-showcase-card > p:not(.section-kicker) {
color: var(--text-soft);
}
.mini-workflow {
margin-top: 18px;
padding: 17px;
border: 1px solid var(--border);
border-radius: 14px;
background: var(--surface);
}
.mini-workflow h3 {
font-size: 0.92rem;
}
.mini-workflow ol {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.mini-workflow li {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 9px;
border-radius: 9px;
background: var(--surface-soft);
font-size: 0.72rem;
}
.mini-workflow li span {
color: var(--primary);
font-weight: 850;
}
/* Tool detail and focus workspace */
.tool-page main {
overflow: clip;
}
.tool-page .container-workspace {
width: min(calc(100% - 32px), 1440px);
}
.workspace-section-heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: 24px;
margin-bottom: 18px;
}
.workspace-section-heading h2 {
margin-bottom: 0;
font-size: clamp(1.45rem, 2.4vw, 2rem);
}
.workspace-section-heading .section-kicker {
margin-bottom: 5px;
}
.workspace-section-assurance {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
}
.workspace-section-assurance span {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 10px;
border: 1px solid var(--border);
border-radius: 999px;
color: var(--text-soft);
background: var(--surface);
font-size: 0.72rem;
font-weight: 720;
}
.tool-hero-v2 {
padding: 32px 0 38px;
border-bottom: 1px solid var(--border);
background: var(--surface-soft);
}
.tool-hero-v2 .breadcrumbs {
margin-bottom: 28px;
}
.tool-hero-content {
display: grid;
grid-template-columns: minmax(0, 1fr);
max-width: 1060px;
gap: 0;
}
.tool-title-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 17px;
}
.tool-title-copy {
min-width: 0;
flex: 1 1 320px;
}
.tool-title-icon {
width: 58px;
height: 58px;
flex: 0 0 auto;
display: grid;
place-items: center;
border-radius: 17px;
}
.tool-category-label {
margin: 1px 0 7px;
color: var(--primary);
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.tool-hero-v2 h1 {
max-width: 900px;
margin-bottom: 0;
font-size: clamp(2.3rem, 4.8vw, 4.45rem);
letter-spacing: -0.05em;
text-wrap: balance;
}
.tool-hero-subtitle {
margin: 12px 0 0;
max-width: 820px;
color: var(--text-soft);
font-size: 1.08rem;
line-height: 1.65;
text-wrap: pretty;
}
.tool-hero-v2 .tool-hero-intro {
max-width: 780px;
margin: 20px 0 0 75px;
color: var(--text-soft);
font-size: 1.06rem;
line-height: 1.72;
text-wrap: pretty;
}
.tool-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0 0 0 auto;
align-self: flex-start;
padding-top: 8px;
}
@media (max-width: 700px) {
.tool-hero-actions {
margin-left: 0;
width: 100%;
justify-content: flex-end;
padding-top: 0;
}
.tool-hero-actions .button {
width: auto;
}
}
.tool-hero-details {
min-width: 0;
display: flex;
flex-direction: column;
gap: 16px;
padding: 22px;
border: 1px solid var(--border);
border-radius: 20px;
background: var(--surface);
box-shadow: var(--shadow-sm);
}
.tool-hero-detail-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.tool-assurance-list {
display: grid;
gap: 2px;
border-block: 1px solid var(--border);
padding-block: 8px;
}
.tool-assurance-list > span {
display: grid;
grid-template-columns: 24px 1fr;
align-items: center;
gap: 10px;
padding: 9px 4px;
color: var(--primary);
}
.tool-assurance-list > span > span {
display: grid;
}
.tool-assurance-list strong {
color: var(--text);
font-size: 0.8rem;
}
.tool-assurance-list small {
color: var(--text-faint);
font-size: 0.68rem;
}
.tool-version-pill {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 10px;
border: 1px solid var(--border);
border-radius: 999px;
color: var(--text-soft);
background: var(--surface);
font-size: 0.73rem;
font-weight: 750;
}
.trust-badges-clean {
max-width: 430px;
justify-content: flex-end;
}
.tool-workspace-section {
padding: 34px 0 76px;
scroll-margin-top: 82px;
background: var(--bg);
}
.tool-workspace {
border-radius: 18px;
box-shadow: 0 22px 60px rgba(22, 25, 51, 0.12);
}
.tool-workspace :focus-visible {
outline: 3px solid color-mix(in srgb, var(--primary) 36%, transparent);
outline-offset: 2px;
}
.workspace-topbar {
min-height: 68px;
padding: 12px 14px 12px 20px;
}
.focus-mode-button[aria-pressed="true"] {
color: #ffffff;
border-color: var(--primary);
background: var(--primary);
}
.workspace-fullscreen {
position: fixed;
inset: 0;
z-index: 2000;
width: 100vw;
height: 100dvh;
display: flex;
flex-direction: column;
overflow: hidden;
border: 0;
border-radius: 0;
background: var(--surface);
box-shadow: none;
}
.workspace-fullscreen .workspace-topbar {
flex: 0 0 auto;
min-height: 70px;
padding-inline: 22px;
border-bottom-color: var(--border-strong);
}
.workspace-fullscreen .workspace-grid,
.workspace-fullscreen .document-workspace-grid {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
.workspace-fullscreen .editor-panel,
.workspace-fullscreen .workspace-tab-panel {
min-height: 0;
}
.workspace-fullscreen .code-editor,
.workspace-fullscreen .code-output {
min-height: 100%;
resize: none;
}
.workspace-fullscreen .keyboard-hint {
flex: 0 0 auto;
}
.workspace-focus-active .site-header {
pointer-events: none;
}
.tool-overview-grid .tool-overview-copy .tool-quick-answer {
margin: 4px 0 14px;
color: var(--text);
font-size: 1.1rem;
font-weight: 600;
line-height: 1.6;
text-wrap: pretty;
}
.tool-overview-section {
scroll-margin-top: 82px;
}
.tool-overview-grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
gap: 44px;
align-items: start;
}
.tool-overview-copy > p:not(.section-kicker) {
color: var(--text-soft);
font-size: 1.04rem;
}
.tool-use-card {
padding: 24px;
border: 1px solid var(--border);
border-radius: 18px;
background: var(--surface-soft);
}
.compact-check-list {
gap: 12px;
}
/* Guide library */
.guide-featured-section {
padding-top: 52px;
}
.featured-guide-card {
display: grid;
grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.2fr);
overflow: hidden;
border: 1px solid var(--border-strong);
border-radius: 24px;
background: var(--surface);
box-shadow: var(--shadow-md);
}
.featured-guide-visual {
position: relative;
min-height: 360px;
display: grid;
place-items: center;
overflow: hidden;
color: #ffffff;
background:
radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.18), transparent 30%),
linear-gradient(145deg, #ff8a4d, #b8420f);
}
.featured-guide-visual::before {
content: "";
position: absolute;
inset: 0;
opacity: 0.22;
background-image: linear-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.35) 1px, transparent 1px);
background-size: 32px 32px;
}
.featured-guide-visual > span {
position: relative;
z-index: 2;
width: 96px;
height: 96px;
display: grid;
place-items: center;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 26px;
background: rgba(255, 255, 255, 0.13);
backdrop-filter: blur(10px);
}
.featured-code-lines {
position: absolute;
right: 28px;
bottom: 26px;
width: 58%;
display: grid;
gap: 8px;
}
.featured-code-lines i {
height: 7px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.19);
}
.featured-code-lines i:nth-child(2) { width: 78%; }
.featured-code-lines i:nth-child(3) { width: 92%; }
.featured-code-lines i:nth-child(4) { width: 63%; }
.featured-code-lines i:nth-child(5) { width: 84%; }
.featured-guide-copy {
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(30px, 5vw, 62px);
}
.featured-guide-copy h2 {
font-size: clamp(2rem, 4vw, 3.5rem);
}
.featured-guide-copy > p:not(.section-kicker) {
color: var(--text-soft);
font-size: 1rem;
}
.featured-guide-copy > strong,
.guide-card-v2 > strong {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 14px;
color: var(--primary);
}
.guide-card-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
}
.guide-card-meta small {
padding: 5px 8px;
border: 1px solid var(--border);
border-radius: 999px;
color: var(--text-faint);
background: var(--surface-soft);
font-size: 0.68rem;
font-weight: 740;
}
.guide-topic-grid,
.guide-standard-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-4);
}
.guide-topic-card {
padding: var(--space-6);
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--shadow-sm);
transition: transform 0.2s ease, border-color 0.2s ease;
}
.guide-topic-card:hover {
transform: translateY(-3px);
border-color: color-mix(in srgb, var(--primary) 32%, var(--border));
}
.guide-topic-card > span {
width: 46px;
height: 46px;
display: grid;
place-items: center;
margin-bottom: 18px;
border-radius: 13px;
color: var(--primary);
background: var(--primary-soft);
}
.guide-topic-card p {
color: var(--text-soft);
}
.guide-topic-card small {
color: var(--primary);
font-weight: 780;
}
.guide-card-grid-v2 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.guide-card-v2 {
min-height: 0;
display: flex;
flex-direction: column;
padding: var(--space-6);
}
.guide-card-v2 > span {
width: 46px;
height: 46px;
display: grid;
place-items: center;
border-radius: 12px;
color: var(--primary);
background: var(--primary-soft);
}
.guide-card-v2 h2,
.guide-card-v2 h3 {
font-size: 1.08rem;
}
.guide-card-v2 p {
flex: 1;
color: var(--text-soft);
font-size: 0.91rem;
line-height: 1.62;
}
.guide-card-v2 > strong {
margin-top: auto;
font-size: 0.86rem;
font-weight: 750;
}
.guide-standards-section .section-heading h2,
.guide-standards-section .section-heading .section-kicker {
color: #ffffff;
}
.guide-standard-grid article {
padding: 24px;
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: 18px;
background: rgba(255, 255, 255, 0.06);
}
.guide-standard-grid article > span {
width: 44px;
height: 44px;
display: grid;
place-items: center;
margin-bottom: 17px;
border-radius: 12px;
color: #ffffff;
background: rgba(255, 255, 255, 0.12);
}
.guide-standard-grid h3 {
color: #ffffff;
}
.guide-standard-grid p {
color: rgba(255, 255, 255, 0.72);
font-size: 0.86rem;
}
/* Professional guide article */
.guide-hero-v2 {
padding: 50px 0 66px;
border-bottom: 1px solid var(--border);
background:
radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 17%, transparent), transparent 48%),
var(--surface-soft);
}
.guide-hero-inner {
max-width: 990px;
margin: 42px auto 0;
text-align: center;
}
.guide-hero-v2 h1 {
font-size: clamp(2.8rem, 6vw, 5.3rem);
letter-spacing: -0.055em;
}
.guide-hero-intro {
max-width: 850px;
margin-inline: auto;
color: var(--text-soft);
font-size: 1.12rem;
}
.guide-meta-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 9px;
margin-top: 27px;
}
.guide-meta-row span {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 10px;
border: 1px solid var(--border);
border-radius: 999px;
color: var(--text-soft);
background: var(--surface);
font-size: 0.74rem;
font-weight: 720;
}
.guide-summary-strip {
padding: 28px 0;
border-bottom: 1px solid var(--border);
background: var(--surface);
}
.guide-summary-grid {
display: grid;
grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
gap: 42px;
align-items: center;
}
.guide-summary-copy > p:last-child {
color: var(--text-soft);
font-size: 0.96rem;
}
.guide-summary-points {
padding: 20px 22px;
border: 1px solid var(--border);
border-radius: 16px;
background: var(--surface-soft);
}
.guide-summary-points h2 {
font-size: 1rem;
}
.guide-summary-points ul {
display: grid;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.guide-summary-points li {
display: grid;
grid-template-columns: 20px 1fr;
gap: 8px;
color: var(--text-soft);
font-size: 0.8rem;
}
.guide-summary-points li svg {
color: var(--success);
}
.guide-reading-section {
padding-top: 54px;
}
.guide-reading-layout {
display: grid;
grid-template-columns: 250px minmax(0, 840px);
justify-content: center;
gap: 52px;
align-items: start;
}
.guide-toc,
.document-toc {
position: sticky;
top: 96px;
}
.guide-toc-card,
.document-toc-card {
padding: 18px;
border: 1px solid var(--border);
border-radius: 16px;
background: var(--surface);
box-shadow: var(--shadow-sm);
}
.guide-toc-card > p,
.document-toc-card > p {
margin-bottom: 12px;
font-size: 0.78rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.guide-toc-card ol,
.document-toc-card ol {
display: grid;
gap: 2px;
margin: 0 0 18px;
padding: 0;
list-style: none;
}
.guide-toc-card a:not(.button),
.document-toc-card ol a {
display: block;
padding: 7px 8px;
border-radius: 8px;
color: var(--text-soft);
font-size: 0.75rem;
line-height: 1.35;
}
.guide-toc-card a:not(.button):hover,
.document-toc-card ol a:hover {
color: var(--primary);
background: var(--primary-soft);
}
.guide-content-v2 {
display: grid;
gap: 0;
}
.guide-section-block {
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
gap: 18px;
padding: 0 0 54px;
border-bottom: 1px solid var(--border);
scroll-margin-top: 100px;
}
.guide-section-block + .guide-section-block {
padding-top: 54px;
}
.guide-section-number {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
border-radius: 12px;
color: var(--primary);
background: var(--primary-soft);
font-size: 0.72rem;
font-weight: 850;
}
.guide-section-body h2 {
font-size: clamp(1.7rem, 3vw, 2.45rem);
}
.guide-section-body > p {
color: var(--text-soft);
font-size: 1rem;
line-height: 1.78;
}
.guide-check-list,
.document-list {
display: grid;
gap: 10px;
margin: 22px 0 0;
padding: 0;
list-style: none;
}
.guide-check-list li,
.document-list li {
display: grid;
grid-template-columns: 22px 1fr;
gap: 9px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 11px;
color: var(--text-soft);
background: var(--surface-soft);
font-size: 0.86rem;
}
.guide-check-list svg,
.document-list svg {
color: var(--success);
}
.guide-step-list {
display: grid;
gap: 10px;
margin: 24px 0 0;
padding: 0;
list-style: none;
}
.guide-step-list li {
display: grid;
grid-template-columns: 34px 1fr;
gap: 11px;
align-items: start;
}
.guide-step-list li > span {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border-radius: 10px;
color: #ffffff;
background: var(--primary);
font-size: 0.75rem;
font-weight: 820;
}
.guide-step-list p {
margin: 4px 0 0;
color: var(--text-soft);
font-size: 0.9rem;
}
.code-comparison-v2 {
margin: 26px 0 0;
}
.code-comparison-v2 > div {
border-radius: 14px;
}
.code-comparison-v2 span {
display: flex;
align-items: center;
gap: 7px;
}
.code-comparison-v2 > div:first-child span { color: var(--red); }
.code-comparison-v2 > div:last-child span { color: var(--success); }
.guide-note {
display: grid;
grid-template-columns: 44px 1fr;
gap: 13px;
margin-top: 24px;
padding: 18px;
border: 1px solid color-mix(in srgb, var(--amber) 34%, var(--border));
border-radius: 14px;
background: var(--amber-soft);
}
.guide-note > span {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 12px;
color: var(--amber);
background: color-mix(in srgb, var(--surface) 62%, transparent);
}
.guide-note h3 {
margin-bottom: 4px;
color: var(--amber);
font-size: 0.91rem;
}
.guide-note p {
color: var(--text-soft);
font-size: 0.82rem;
}
.guide-table-wrap {
margin-top: 25px;
overflow-x: auto;
border: 1px solid var(--border);
border-radius: 14px;
}
.guide-table {
width: 100%;
border-collapse: collapse;
font-size: 0.82rem;
}
.guide-table th,
.guide-table td {
padding: 12px 14px;
border-bottom: 1px solid var(--border);
text-align: left;
vertical-align: top;
}
.guide-table th {
color: var(--text);
background: var(--surface-soft);
font-size: 0.73rem;
}
.guide-table td {
color: var(--text-soft);
}
.guide-table tr:last-child td {
border-bottom: 0;
}
.guide-cta-v2 {
margin-top: 54px;
padding: 29px;
}
.guide-cta-v2 .section-kicker {
margin-bottom: 5px;
}
.guide-related-section {
border-top: 1px solid var(--border);
}
/* Professional information and legal pages */
.document-hero {
padding: 48px 0 62px;
border-bottom: 1px solid var(--border);
background:
radial-gradient(circle at 76% 12%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 34%),
var(--surface-soft);
}
.document-hero .breadcrumbs {
margin-bottom: 36px;
}
.document-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(330px, 0.8fr);
gap: 54px;
align-items: center;
}
.document-hero-copy h1 {
font-size: clamp(2.6rem, 5.5vw, 5rem);
letter-spacing: -0.055em;
}
.document-hero-copy > p:not(.eyebrow) {
max-width: 760px;
color: var(--text-soft);
font-size: 1.08rem;
}
.document-date {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 18px;
padding: 7px 10px;
border: 1px solid var(--border);
border-radius: 999px;
color: var(--text-faint);
background: var(--surface);
font-size: 0.73rem;
font-weight: 720;
}
.document-summary-card {
padding: 25px;
border: 1px solid var(--border-strong);
border-radius: 20px;
background: var(--surface);
box-shadow: var(--shadow-md);
}
.document-summary-icon {
width: 48px;
height: 48px;
display: grid;
place-items: center;
margin-bottom: 18px;
border-radius: 14px;
color: var(--primary);
background: var(--primary-soft);
}
.document-summary-card h2 {
font-size: 1.15rem;
}
.document-summary-card ul {
display: grid;
gap: 11px;
margin: 0;
padding: 0;
list-style: none;
}
.document-summary-card li {
display: grid;
grid-template-columns: 19px 1fr;
gap: 8px;
color: var(--text-soft);
font-size: 0.82rem;
}
.document-summary-card li svg {
color: var(--success);
}
.document-reading-section {
padding-top: 56px;
}
.document-reading-layout {
display: grid;
grid-template-columns: 250px minmax(0, 850px);
justify-content: center;
gap: 54px;
align-items: start;
}
.document-contact-link {
display: flex;
align-items: center;
gap: 7px;
padding: 10px;
border-top: 1px solid var(--border);
color: var(--primary);
font-size: 0.75rem;
font-weight: 750;
}
.document-content {
display: grid;
gap: 0;
}
.document-section {
padding: 0 0 42px;
border-bottom: 1px solid var(--border);
scroll-margin-top: 100px;
}
.document-section + .document-section {
padding-top: 42px;
}
.document-section-heading {
display: grid;
grid-template-columns: 42px 1fr;
gap: 14px;
align-items: start;
margin-bottom: 18px;
}
.document-section-heading > span {
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: 11px;
color: var(--primary);
background: var(--primary-soft);
font-size: 0.7rem;
font-weight: 840;
}
.document-section-heading h2 {
margin: 4px 0 0;
font-size: clamp(1.55rem, 2.7vw, 2.15rem);
}
.document-section > p {
color: var(--text-soft);
font-size: 0.98rem;
line-height: 1.78;
}
.document-footer-card {
display: grid;
grid-template-columns: 52px 1fr;
gap: 16px;
margin-top: 44px;
padding: 24px;
border: 1px solid color-mix(in srgb, var(--primary) 31%, var(--border));
border-radius: 18px;
background: var(--primary-soft);
}
.document-footer-card > span {
width: 50px;
height: 50px;
display: grid;
place-items: center;
border-radius: 14px;
color: #ffffff;
background: var(--primary);
}
.document-footer-card h2 {
font-size: 1.18rem;
}
.document-footer-card p {
color: var(--text-soft);
font-size: 0.84rem;
}
/* Responsive refinements */
@media (max-width: 1100px) {
.hero-flow-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tool-task-grid,
.tool-grid-directory {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tools-quality-layout,
.tool-overview-grid,
.document-hero-grid {
grid-template-columns: 1fr;
}
.tool-hero-content {
grid-template-columns: 1fr;
}
.tool-hero-details {
justify-items: start;
}
.trust-badges-clean {
justify-content: flex-start;
}
.guide-reading-layout,
.document-reading-layout {
grid-template-columns: 220px minmax(0, 1fr);
gap: 32px;
}
}
@media (max-width: 900px) {
.hero-section-v2 {
padding-top: 82px;
}
.hero-v2-copy h1 {
font-size: clamp(2.8rem, 10vw, 4.9rem);
}
.guide-topic-grid,
.guide-standard-grid,
.guide-card-grid-v2 {
grid-template-columns: 1fr;
}
.featured-guide-card,
.guide-summary-grid {
grid-template-columns: 1fr;
}
.featured-guide-visual {
min-height: 260px;
}
.guide-reading-layout,
.document-reading-layout {
grid-template-columns: 1fr;
}
.guide-toc,
.document-toc {
position: static;
}
.guide-toc-card ol,
.document-toc-card ol {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tool-hero-v2 .tool-hero-intro,
.tool-hero-actions {
margin-left: 0;
}
}
@media (max-width: 700px) {
.container-wide,
.container-workspace,
.tool-content-container {
width: min(calc(100% - 24px), 100%);
}
.hero-section-v2 {
padding: 70px 0 36px;
}
.hero-v2-copy h1 {
font-size: clamp(2.5rem, 12vw, 4rem);
}
.hero-search-field,
.directory-search-v2,
.guide-search {
grid-template-columns: auto 1fr;
padding: 12px 14px;
}
.hero-search-field .button,
.guide-search .button,
.directory-search-v2 > span {
grid-column: 1 / -1;
width: 100%;
justify-content: center;
}
.hero-actions-centered .button {
width: 100%;
justify-content: center;
}
.tool-task-grid,
.tool-grid-directory {
grid-template-columns: 1fr;
}
.quick-editor-panel + .quick-editor-panel {
border-left: 0;
border-top: 1px solid #332c22;
}
.tool-title-row {
align-items: center;
}
.tool-title-icon {
width: 48px;
height: 48px;
border-radius: 14px;
}
.tool-hero-v2 h1 {
font-size: 2.25rem;
}
.workspace-topbar {
align-items: flex-start;
}
.workspace-top-actions {
width: 100%;
overflow-x: auto;
padding-bottom: 3px;
}
.workspace-fullscreen .workspace-topbar {
padding: 9px;
}
.workspace-fullscreen .workspace-top-actions .toolbar-button:not(.focus-mode-button) {
display: none;
}
.guide-hero-v2 h1,
.tools-library-copy h1,
.guide-library-hero-copy h1,
.document-hero-copy h1 {
font-size: clamp(2.35rem, 11vw, 3.6rem);
}
.guide-toc-card ol,
.document-toc-card ol {
grid-template-columns: 1fr;
}
.guide-section-block {
grid-template-columns: 1fr;
gap: 12px;
}
.guide-section-number {
width: 38px;
height: 38px;
}
.code-comparison-v2 {
grid-template-columns: 1fr;
}
.guide-note,
.document-footer-card {
grid-template-columns: 1fr;
}
.document-section-heading {
grid-template-columns: 36px 1fr;
gap: 10px;
}
.document-section-heading > span {
width: 34px;
height: 34px;
}
.directory-panel {
padding: 13px;
}
.directory-controls-v2 {
align-items: stretch;
}
.directory-selects {
width: 100%;
justify-content: space-between;
}
}
/* Focus mode scrolling support for tools with result panels */
.workspace-fullscreen {
overflow-y: auto;
}
.workspace-fullscreen .workspace-topbar {
position: sticky;
top: 0;
z-index: 30;
}
.workspace-fullscreen .workspace-grid,
.workspace-fullscreen .document-workspace-grid {
flex: 0 0 auto;
min-height: calc(100dvh - 178px);
}
.workspace-fullscreen .workspace-controls,
.workspace-fullscreen .workspace-result-card,
.workspace-fullscreen .keyboard-hint {
flex: 0 0 auto;
}
/* V2 connected workflows, inspectors, error references, and directory controls */
.connected-actions {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
align-items: center;
margin-top: 0;
padding: 10px 16px;
border-top: 1px solid var(--border);
background: var(--surface);
}
.connected-actions-label {
color: var(--text-faint);
font-size: .72rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
.connected-action-link {
font-size: .78rem;
font-weight: 600;
color: var(--text-soft);
text-decoration: none;
transition: color 0.18s ease;
}
.connected-action-link:hover {
color: var(--primary);
}
.connected-action-link::after {
content: " \203A";
opacity: 0.5;
}
.connected-actions .toolbar-button {
background: var(--surface);
}
/* Options disclosure: collapsible settings panel inside workspace controls */
.options-toggle-button {
margin-left: auto;
border-style: dashed;
}
.options-disclosure {
width: 100%;
padding-top: 10px;
border-top: 1px solid var(--border);
margin-top: 10px;
}
.options-disclosure[hidden] {
display: none;
}
/* Compact topbar left group */
.workspace-topbar-left {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.jsonpath-workspace-grid,
.inspector-workspace-grid {
display: grid;
grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
gap: 16px;
align-items: stretch;
}
.query-composer {
display: grid;
gap: 12px;
padding: 14px;
border-top: 1px solid var(--border);
background: var(--surface-soft);
}
.query-composer label,
.directory-selects-advanced label {
display: grid;
gap: 6px;
color: var(--text-faint);
font-size: .78rem;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
}
.query-composer input,
.directory-selects-advanced select {
min-height: 42px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface);
color: var(--text);
padding: 0 12px;
font: inherit;
text-transform: none;
letter-spacing: normal;
}
.jsonpath-examples {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.query-chip {
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface);
color: var(--text-soft);
padding: 7px 10px;
font: 700 .78rem/1.2 inherit;
cursor: pointer;
transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.query-chip:hover,
.query-chip:focus-visible {
border-color: var(--primary);
color: var(--primary);
transform: translateY(-1px);
}
.jsonpath-results,
.inspector-output-panel {
min-height: 100%;
}
.jsonpath-result-list,
.inspector-result-list {
display: grid;
gap: 10px;
padding: 12px;
max-height: 590px;
overflow: auto;
}
.jsonpath-result-card,
.inspector-result-card {
display: grid;
gap: 9px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface);
padding: 12px;
}
.jsonpath-result-header,
.inspector-result-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.jsonpath-result-header code,
.inspector-result-header code {
overflow-wrap: anywhere;
color: var(--primary);
font-weight: 800;
}
.result-card-fill {
min-height: 280px;
}
.directory-selects-advanced {
display: grid;
grid-template-columns: repeat(4, minmax(135px, 1fr));
gap: 10px;
width: 100%;
align-items: end;
}
.directory-selects-advanced .checkbox-control {
display: flex;
min-height: 42px;
align-items: center;
align-self: end;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface);
padding: 0 11px;
letter-spacing: normal;
text-transform: none;
}
.directory-help {
margin-top: 9px;
color: var(--text-faint);
max-width: 760px;
}
.recent-tools-section[hidden] {
display: none;
}
.drag-active {
outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent);
outline-offset: -4px;
background: color-mix(in srgb, var(--primary) 7%, var(--surface));
}
.error-context {
margin-top: 9px;
border: 1px solid var(--border);
border-radius: 9px;
background: var(--code-bg, #0d1729);
color: #d9e7ff;
padding: 10px 12px;
overflow-x: auto;
white-space: pre;
font: 500 .82rem/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.tree-limit-notice {
margin: 12px;
padding: 11px 13px;
border: 1px solid color-mix(in srgb, var(--amber, #d97706) 38%, var(--border));
border-radius: 10px;
background: color-mix(in srgb, var(--amber, #d97706) 8%, var(--surface));
color: var(--text-soft);
}
.error-library-hero,
.error-article-hero {
padding: clamp(44px, 7vw, 92px) 0 38px;
background:
radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--primary) 17%, transparent), transparent 34%),
linear-gradient(180deg, var(--surface-soft), var(--bg));
border-bottom: 1px solid var(--border);
}
.error-library-hero-copy,
.error-article-hero-copy {
max-width: 860px;
}
.error-library-hero h1,
.error-article-hero h1 {
max-width: 850px;
margin: 12px 0 16px;
font-size: clamp(2.4rem, 6vw, 5rem);
line-height: .98;
letter-spacing: -.055em;
}
.error-reference-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.error-reference-card {
display: flex;
min-height: 100%;
flex-direction: column;
gap: 12px;
border: 1px solid var(--border);
border-radius: 18px;
background: var(--surface);
padding: 20px;
box-shadow: var(--shadow-sm);
transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.error-reference-card:hover {
transform: translateY(-3px);
border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
box-shadow: var(--shadow-md), var(--shadow-glow);
}
.error-reference-card > span {
display: grid;
width: 42px;
height: 42px;
place-items: center;
border-radius: 12px;
background: color-mix(in srgb, var(--primary) 10%, var(--surface));
color: var(--primary);
}
.error-reference-card h2,
.error-reference-card h3 {
margin: 0;
}
.error-reference-card p {
margin: 0;
color: var(--text-soft);
}
.error-reference-card strong {
display: inline-flex;
gap: 7px;
align-items: center;
margin-top: auto;
color: var(--primary);
}
.error-reading-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 26px;
align-items: start;
}
.error-reading-sidebar {
position: sticky;
top: 92px;
}
.error-message-list {
display: grid;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.error-message-list li {
border-left: 3px solid var(--primary);
background: var(--surface-soft);
padding: 10px 12px;
border-radius: 0 10px 10px 0;
}
.json-patch-panel {
margin-top: 16px;
}
.json-patch-panel pre {
max-height: 360px;
}
.inspector-summary-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
padding: 12px;
}
.inspector-metric {
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface-soft);
padding: 13px;
}
.inspector-metric strong {
display: block;
font-size: 1.25rem;
}
.inspector-metric span {
color: var(--text-faint);
font-size: .78rem;
}
@media (max-width: 1020px) {
.directory-selects-advanced {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.error-reference-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 840px) {
.jsonpath-workspace-grid,
.inspector-workspace-grid,
.error-reading-layout {
grid-template-columns: 1fr;
}
.error-reading-sidebar {
position: static;
}
}
@media (max-width: 640px) {
.directory-selects-advanced,
.error-reference-grid,
.inspector-summary-grid {
grid-template-columns: 1fr;
}
.connected-actions {
align-items: stretch;
}
.connected-action-link {
flex: 0 0 auto;
}
.jsonpath-result-header,
.inspector-result-header {
align-items: flex-start;
flex-direction: column;
}
}
.workflow-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.workflow-card-grid .workflow-card { padding:24px; }
.workflow-steps { list-style:none; margin:20px 0 0; padding:0; display:grid; gap:10px; }
.workflow-steps li { display:grid; grid-template-columns:28px 1fr; gap:10px; align-items:center; }
.workflow-steps li > span { width:27px; height:27px; display:grid; place-items:center; border-radius:8px; background:var(--primary-soft); color:var(--primary); font-weight:800; }
.feature-callout-card { border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); padding:clamp(22px,4vw,34px); box-shadow:var(--shadow-sm); }
.feature-callout-card .button { margin-top:14px; }
@media (max-width:840px) { .workflow-card-grid { grid-template-columns:1fr; } }
/* V3 growth engine */
:root {
--v3-panel: color-mix(in srgb, var(--surface, #fff) 94%, var(--primary) 6%);
--v3-border: color-mix(in srgb, var(--border, #d9dce6) 86%, var(--primary) 14%);
--v3-muted: color-mix(in srgb, var(--surface-soft) 92%, var(--primary) 8%);
}
.v3-options-heading,
.v3-draft-panel-head,
.v3-action-bar,
.v3-draft-item,
.workspace-draft-row,
.workspace-tool-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.v3-option-field,
.v3-draft-save-row label,
.workspace-preferences label,
.admin-card label,
.ad-admin-card label,
.admin-login-card label {
display: grid;
gap: 7px;
font-weight: 700;
font-size: .84rem;
}
.v3-option-field input,
.v3-option-field select,
.v3-draft-save-row input,
.workspace-preferences input,
.workspace-preferences select,
.admin-card input,
.admin-card select,
.admin-card textarea,
.ad-admin-card textarea,
.admin-login-card input {
width: 100%;
min-height: 44px;
border: 1px solid var(--v3-border);
border-radius: 11px;
background: var(--surface, #fff);
color: var(--text, #1d2433);
padding: 10px 12px;
font: inherit;
}
.category-hero-v3 {
position: relative;
overflow: hidden;
padding: clamp(72px, 10vw, 120px) 0;
background:
radial-gradient(circle at 8% 18%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 34%),
radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--emerald) 15%, transparent), transparent 32%),
linear-gradient(145deg, color-mix(in srgb, var(--surface, #fff) 96%, var(--primary) 4%), var(--surface-soft));
border-bottom: 1px solid var(--v3-border);
}
.category-hero-v3 .container {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(250px, .6fr);
gap: clamp(32px, 8vw, 96px);
align-items: center;
}
.category-hero-copy h1 {
max-width: 850px;
font-size: clamp(2.5rem, 6vw, 5rem);
line-height: .98;
letter-spacing: -.055em;
margin: 12px 0 22px;
}
.category-hero-copy > p:not(.section-kicker) {
max-width: 760px;
font-size: 1.14rem;
color: var(--text-soft);
}
.category-hero-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 26px;
}
.category-stat-panel {
display: grid;
place-items: center;
min-height: 280px;
border: 1px solid rgba(255,255,255,.45);
border-radius: 28px;
background: linear-gradient(145deg, #3a2410, #b8420f);
color: #fff;
box-shadow: 0 28px 70px rgba(40, 20, 4, 0.28);
}
.category-stat-panel > strong {
font-size: clamp(4rem, 9vw, 7rem);
line-height: 1;
}
.category-stat-panel > span { color: rgba(255,255,255,.76); }
.category-mini-flow {
display: flex;
align-items: center;
gap: 10px;
margin-top: 22px;
}
.category-mini-flow span {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 12px;
background: rgba(255,255,255,.12);
}
.workflow-steps {
display: grid;
gap: 12px;
padding: 0;
margin: 24px 0 0;
list-style: none;
}
.workflow-steps li {
display: flex;
align-items: center;
gap: 12px;
border: 1px solid var(--v3-border);
border-radius: 14px;
padding: 14px;
background: var(--surface, #fff);
}
.workflow-steps li span {
display: grid;
place-items: center;
flex: 0 0 34px;
height: 34px;
border-radius: 10px;
background: var(--primary);
color: #fff;
font-weight: 800;
}
.workspace-page-hero {
padding: 86px 0 64px;
background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 11%, var(--surface, #fff)), var(--surface, #fff));
border-bottom: 1px solid var(--v3-border);
}
.workspace-page-hero h1 {
max-width: 900px;
font-size: clamp(2.5rem, 6vw, 4.8rem);
letter-spacing: -.05em;
line-height: 1;
margin: 10px 0 18px;
}
.workspace-page-hero > .container > p:not(.section-kicker) {
max-width: 760px;
color: var(--text-soft);
font-size: 1.1rem;
}
.workspace-dashboard-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.workspace-dashboard-card {
min-width: 0;
border: 1px solid var(--v3-border);
border-radius: 20px;
padding: 22px;
background: var(--surface, #fff);
box-shadow: 0 12px 34px rgba(22,25,45,.06);
}
.workspace-drafts-card { grid-column: 1 / -1; }
.workspace-tool-list,
.workspace-draft-list {
display: grid;
gap: 9px;
}
.workspace-tool-row,
.workspace-draft-row {
border: 1px solid var(--v3-border);
border-radius: 13px;
padding: 13px 14px;
color: inherit;
text-decoration: none;
}
.workspace-tool-row:hover { border-color: var(--primary); transform: translateY(-1px); }
.workspace-tool-row div,
.workspace-draft-row div {
display: grid;
gap: 3px;
}
.workspace-tool-row span,
.workspace-draft-row span { color: var(--text-soft); font-size: .82rem; }
.workspace-preferences { display: grid; gap: 13px; }
.workspace-danger-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 22px;
}
.ad-slot {
width: min(100% - 32px, 1180px);
margin: 22px auto;
text-align: center;
}
.ad-label {
display: block;
color: var(--text-soft);
font-size: .67rem;
text-transform: uppercase;
letter-spacing: .12em;
margin-bottom: 6px;
}
.ad-slot-mobile { display: none; }
.workspace-focus-active .ad-slot,
.workspace-focus-active .tool-sidebar-ad { display: none !important; }
.tool-sidebar-ad { width: 100%; margin: 14px 0 0; }
.directory-guide-results .guide-card[hidden] { display: none; }
.tools-workspace-link {
display: inline-flex;
align-items: center;
gap: 7px;
margin: 14px 0 0;
}
.admin-body,
.admin-login-body {
margin: 0;
min-height: 100vh;
background: #f4f5fa;
color: #1d2433;
}
.admin-shell {
min-height: 100vh;
display: grid;
grid-template-columns: 270px minmax(0, 1fr);
}
.admin-sidebar {
position: sticky;
top: 0;
height: 100vh;
display: flex;
flex-direction: column;
padding: 24px 18px;
background: #17152d;
color: #fff;
}
.admin-sidebar .brand { color: #fff; text-decoration: none; }
.admin-nav-label {
margin: 34px 10px 10px;
color: rgba(255,255,255,.46);
text-transform: uppercase;
letter-spacing: .1em;
font-size: .68rem;
}
.admin-sidebar nav { display: grid; gap: 5px; }
.admin-sidebar nav a,
.admin-sidebar-footer a {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 12px;
border-radius: 10px;
color: rgba(255,255,255,.78);
text-decoration: none;
}
.admin-sidebar nav a:hover,
.admin-sidebar-footer a:hover { color: #fff; background: rgba(255,255,255,.08); }
.admin-sidebar-footer { margin-top: auto; display: grid; gap: 4px; }
.admin-main { min-width: 0; }
.admin-topbar {
padding: 28px 34px 20px;
background: #fff;
border-bottom: 1px solid #e1e3ea;
}
.admin-topbar h1 { margin: 4px 0 0; }
.admin-content { padding: 28px 34px 50px; }
.admin-stat-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
margin-bottom: 20px;
}
.admin-stat-grid article,
.admin-card,
.ad-admin-card {
border: 1px solid #dde0e9;
border-radius: 17px;
background: #fff;
padding: 20px;
box-shadow: 0 8px 28px rgba(20,24,40,.045);
}
.admin-stat-grid article { display: grid; gap: 9px; }
.admin-stat-grid span { color: #6b7280; font-size: .82rem; }
.admin-stat-grid strong { font-size: 2rem; }
.admin-card { margin-bottom: 18px; }
.admin-table-wrap { overflow: auto; margin: 18px 0; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.admin-table th,
.admin-table td { padding: 12px; border-bottom: 1px solid #eceef4; text-align: left; vertical-align: middle; }
.admin-table th { color: #5f6778; background: #f8f9fc; position: sticky; top: 0; }
.admin-table td strong,
.admin-table td small { display: block; }
.admin-table td small { color: #7b8392; margin-top: 3px; }
.ad-admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin: 18px 0; }
.ad-admin-card { display: grid; gap: 13px; }
.admin-login-body { display: grid; place-items: center; padding: 24px; }
.admin-login-card {
width: min(100%, 460px);
display: grid;
gap: 18px;
padding: 34px;
border: 1px solid #dde0e9;
border-radius: 22px;
background: #fff;
box-shadow: 0 28px 70px rgba(22,25,45,.12);
}
.admin-login-card .brand { text-decoration: none; color: inherit; }
.admin-login-card h1,
.admin-login-card p { margin: 0; }
@media (max-width: 980px) {
.v3-primary-grid,
.v3-double-grid,
.v3-generator-layout,
.category-hero-v3 .container,
.workspace-dashboard-grid,
.admin-stat-grid,
.ad-admin-grid { grid-template-columns: 1fr; }
.workspace-drafts-card { grid-column: auto; }
.admin-shell { grid-template-columns: 1fr; }
.admin-sidebar { position: static; height: auto; }
.admin-sidebar nav { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.admin-sidebar-footer { margin-top: 20px; }
}
@media (max-width: 700px) {
.v3-code-output,
.v3-render-preview { min-height: 300px; }
.v3-action-bar,
.v3-options-heading,
.v3-draft-panel-head,
.workspace-draft-row { align-items: stretch; flex-direction: column; }
.v3-draft-save-row { grid-template-columns: 1fr; }
.category-stat-panel { min-height: 230px; }
.admin-content,
.admin-topbar { padding-left: 18px; padding-right: 18px; }
.ad-slot-desktop { display: none; }
.ad-slot-mobile { display: block; }
}
/* V3.1 accounts, PWA, SEO workflows, and trust center */
.header-account-link{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .8rem;border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:.88rem;font-weight:700;background:var(--surface)}
.header-account-link:hover{border-color:var(--primary);color:var(--primary)}
.install-app-button[hidden]{display:none}
.pwa-update-notice{position:fixed;z-index:120;left:50%;bottom:1.25rem;transform:translateX(-50%);display:flex;align-items:center;gap:1rem;padding:.8rem 1rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-lg)}
.pwa-update-notice[hidden]{display:none}
.pwa-update-notice span{display:flex;align-items:center;gap:.55rem;font-weight:700}
.network-status{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .55rem;border-radius:999px;background:var(--surface-soft);color:var(--text-faint);font-size:.75rem}
.network-status:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--emerald)}
.network-status.is-offline:before{background:var(--amber)}
.account-auth-section{padding:clamp(4rem,8vw,7rem) 0;background:linear-gradient(180deg,var(--surface-soft),var(--bg))}
.account-auth-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,.75fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.account-auth-copy h1,.pricing-hero h1,.trust-hero h1,.solution-hero h1,.status-hero h1{font-size:clamp(2.4rem,5vw,4.6rem);line-height:1.02;letter-spacing:-.045em;margin:.75rem 0 1rem}
.account-auth-copy>p{max-width:650px;font-size:1.08rem;color:var(--text-soft)}
.account-auth-card{padding:clamp(1.4rem,3vw,2.3rem);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-lg)}
.account-form{display:grid;gap:1rem}
.account-form label{display:grid;gap:.45rem;font-weight:700}
.account-form input,.account-form select,.account-form textarea{width:100%;padding:.8rem .9rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--text)}
.account-form input:focus,.account-form select:focus,.account-form textarea:focus{outline:3px solid color-mix(in srgb,var(--primary) 18%,transparent);border-color:var(--primary)}
.form-help,.account-form small{color:var(--text-faint);font-size:.82rem}
.account-auth-switch{text-align:center;margin:1.2rem 0 0;color:var(--text-soft)}
.account-auth-switch a{font-weight:800}
.account-system-notice{margin-bottom:1rem}
.account-system-notice>div{min-width:0}
.account-system-notice p{margin:.25rem 0 0}
.account-hero{padding:var(--space-14) 0 var(--space-9);background:var(--surface-soft);border-bottom:1px solid var(--border)}
.account-hero h1{font-size:clamp(2rem,4vw,3.3rem);margin:.5rem 0}
.account-hero p{max-width:760px;color:var(--text-soft)}
.account-section{padding-top:var(--space-10)}
.account-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:var(--space-8);align-items:start}
.account-sidebar{position:sticky;top:96px;display:grid;gap:var(--space-4)}
.account-identity-card,.account-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-sm)}
.account-identity-card{padding:var(--space-5);display:grid;gap:2px}
.account-avatar{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:color-mix(in srgb,var(--primary) 12%,var(--surface));color:var(--primary);margin-bottom:var(--space-2)}
.account-identity-card small{overflow-wrap:anywhere;color:var(--text-faint)}
.account-nav{display:grid;padding:var(--space-2);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.account-nav a{display:flex;align-items:center;gap:var(--space-3);padding:11px var(--space-3);border-radius:var(--radius-sm);color:var(--text-soft);font-weight:700;transition:color .18s ease,background .18s ease}
.account-nav a:hover,.account-nav a.is-active{color:var(--primary);background:color-mix(in srgb,var(--primary) 9%,var(--surface))}
.account-main{display:grid;gap:var(--space-5);min-width:0}
.account-card{padding:clamp(var(--space-5),3vw,var(--space-8))}
.account-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
.account-stat-grid article{display:grid;gap:5px;padding:var(--space-5);border:1px solid var(--border);border-radius:15px;background:var(--surface)}
.account-stat-grid span{color:var(--text-faint);font-size:.83rem}
.account-stat-grid strong{font-size:1.45rem}
.account-action-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.account-action-grid a{padding:var(--space-5);border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);display:grid;gap:var(--space-2);color:var(--text);transition:border-color .18s ease,transform .18s ease}
.account-action-grid a:hover{border-color:var(--primary);transform:translateY(-2px)}
.account-action-grid svg{color:var(--primary)}
.account-action-grid span{color:var(--text-faint);font-size:.88rem}
.trust-inline-card{display:flex;gap:var(--space-4);align-items:flex-start}
.trust-inline-card>svg{color:var(--primary);flex:none}
.billing-current-card,.workspace-sync-status{display:flex;justify-content:space-between;gap:var(--space-4);align-items:flex-start}
.empty-state-panel{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);border:1px dashed var(--border);border-radius:var(--radius-sm);color:var(--text-faint)}
.compact-account-stats{margin:var(--space-5) 0}
.account-settings-form{max-width:620px}
.pricing-hero,.trust-hero,.solution-hero,.status-hero{padding:clamp(4rem,8vw,7rem) 0;background:radial-gradient(circle at 80% 15%,color-mix(in srgb,var(--primary) 15%,transparent),transparent 32%),var(--surface-soft)}
.pricing-hero{text-align:center}
.pricing-hero p{color:var(--text-soft);font-size:1.08rem}
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5);align-items:stretch}
.pricing-card{position:relative;padding:var(--space-7);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);display:flex;flex-direction:column;gap:var(--space-4)}
.pricing-card.is-featured{border-color:var(--primary);box-shadow:0 18px 55px color-mix(in srgb,var(--primary) 17%,transparent)}
.pricing-badge{position:absolute;right:var(--space-4);top:var(--space-4);padding:5px 10px;border-radius:var(--radius-pill);background:var(--primary);color:#fff;font-size:.75rem;font-weight:800}
.price-line{display:flex;align-items:baseline;gap:var(--space-2)}
.price-line strong{font-size:2rem}
.price-line span{color:var(--text-faint)}
.pricing-card .button{margin-top:auto}
.pricing-foundation-note{margin-top:var(--space-6);display:flex;gap:var(--space-4);padding:var(--space-5);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.pricing-foundation-note svg{color:var(--primary);flex:none}
.solution-hero-grid,.trust-hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.72fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.solution-hero p,.trust-hero p{color:var(--text-soft);font-size:1.04rem}
.solution-outcome-card,.trust-scorecard{padding:1.5rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:color-mix(in srgb,var(--surface) 92%,transparent);box-shadow:var(--shadow-lg)}
.solution-outcome-card>span,.trust-scorecard>span{color:var(--primary)}
.solution-outcome-card ul{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.75rem}
.solution-outcome-card li{display:flex;align-items:flex-start;gap:.55rem}
.solution-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5)}
.solution-card{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);transition:transform 0.2s ease,border-color 0.2s ease,box-shadow 0.2s ease}
.solution-card:hover{border-color:color-mix(in srgb,var(--primary) 32%,var(--border));transform:translateY(-3px);box-shadow:var(--shadow-md)}
.solution-card>span{width:46px;height:46px;display:grid;place-items:center;border-radius:12px;background:var(--primary-soft);color:var(--primary)}
.solution-card p{color:var(--text-soft);flex:1;font-size:.91rem;line-height:1.62}
.solution-card h2{font-size:1.08rem;margin-bottom:0}
.solution-card strong{display:flex;align-items:center;gap:.4rem;color:var(--primary);font-size:.86rem;font-weight:750}
.trust-count-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.trust-count-grid div{padding:var(--space-4);border:1px solid var(--border);border-radius:13px;background:var(--bg);transition:border-color .18s ease}
.trust-count-grid div:hover{border-color:var(--border-strong)}
.trust-count-grid strong{display:block;font-size:1.8rem;color:var(--primary)}
.trust-count-grid span{font-size:.82rem;color:var(--text-faint)}
.trust-method-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
.trust-method-grid article{padding:var(--space-5);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);transition:border-color .2s ease,box-shadow .2s ease}
.trust-method-grid article:hover{border-color:color-mix(in srgb,var(--primary) 28%,var(--border));box-shadow:var(--shadow-sm)}
.trust-method-grid svg{color:var(--primary)}
.trust-method-grid h3{font-size:1rem;margin-bottom:var(--space-2)}
.trust-method-grid p{color:var(--text-soft);font-size:.92rem}
.status-explainer{display:grid;gap:var(--space-4)}
.status-explainer>div{padding:var(--space-4);border:1px solid var(--border);border-radius:13px;background:var(--surface)}
.status-explainer p{margin:var(--space-2) 0 0;color:var(--text-soft);font-size:.92rem}
.status-pill{display:inline-flex;align-items:center;gap:4px;width:max-content;padding:4px 10px;border-radius:var(--radius-pill);font-size:.76rem;font-weight:800}
.status-stable,.status-active{background:color-mix(in srgb,var(--emerald) 13%,var(--surface));color:var(--emerald)}
.status-beta,.status-suspended{background:color-mix(in srgb,var(--amber) 14%,var(--surface));color:var(--amber)}
.status-experimental,.status-closed{background:color-mix(in srgb,var(--red) 12%,var(--surface));color:var(--red)}
.trust-review-card{display:flex;gap:var(--space-4);align-items:flex-start;padding:var(--space-6);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);transition:border-color .18s ease}
.trust-review-card:hover{border-color:var(--border-strong)}
.trust-review-card>span{color:var(--primary)}
.trust-review-card>svg{color:var(--primary);flex:none}
.trust-review-card h2{font-size:1.13rem;margin-bottom:var(--space-2)}
.trust-review-card p{color:var(--text-soft);font-size:.92rem}
.processing-disclosure{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);overflow:hidden}
.processing-disclosure summary{display:flex;align-items:center;gap:var(--space-2);padding:11px var(--space-4);cursor:pointer;font-size:.84rem;font-weight:800;list-style:none;transition:background .15s ease}
.processing-disclosure summary:hover{background:var(--surface-soft)}
.processing-disclosure summary svg:last-child{margin-left:auto}
.processing-disclosure-body{padding:0 var(--space-4) var(--space-4);border-top:1px solid var(--border)}
.processing-disclosure-body p{color:var(--text-soft);font-size:.92rem}
.processing-disclosure dl{display:grid;gap:var(--space-2)}
.processing-disclosure dl>div{display:flex;justify-content:space-between;gap:var(--space-6);padding:7px 0;border-bottom:1px solid var(--border)}
.processing-disclosure dt{color:var(--text-faint);font-size:.85rem}
.processing-disclosure dd{margin:0;text-align:right;font-weight:700;font-size:.85rem}
.status-hero{text-align:center}
.status-main-icon{width:64px;height:64px;display:grid;place-items:center;margin:0 auto;border-radius:var(--radius);background:var(--surface);color:var(--primary);box-shadow:var(--shadow-lg)}
.overall-status{display:inline-flex;align-items:center;gap:var(--space-2);padding:10px 14px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--emerald) 12%,var(--surface));color:var(--emerald);font-weight:800}
.status-list{display:grid;gap:var(--space-3)}
.status-list article{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-4);padding:var(--space-5);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);transition:border-color .18s ease}
.status-list article:hover{border-color:var(--border-strong)}
.status-list p{margin:2px 0 0;color:var(--text-soft);font-size:.88rem}
.status-dot{width:11px;height:11px;border-radius:50%;background:var(--amber)}
.status-dot.is-ok{background:var(--emerald)}
.status-list+.trust-review-card{margin-top:var(--space-4)}
.changelog-list{display:grid;gap:var(--space-6)}
.changelog-release{display:grid;grid-template-columns:130px minmax(0,1fr);gap:var(--space-6);padding:var(--space-6);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);transition:border-color .18s ease}
.changelog-release:hover{border-color:var(--border-strong)}
.changelog-version strong{font-size:1.35rem;color:var(--primary)}
.changelog-version span{display:block;color:var(--text-faint);margin-top:var(--space-1)}
.changelog-release h2{margin-bottom:var(--space-3)}
.offline-section{min-height:65vh;display:grid;align-items:center;text-align:center;padding:var(--space-14) 0}
.offline-icon{width:68px;height:68px;display:grid;place-items:center;margin:0 auto var(--space-4);border-radius:var(--radius);background:var(--surface-soft);color:var(--primary)}
.offline-section .button-row{justify-content:center;margin-top:var(--space-8)}
.offline-help{margin-top:var(--space-8);padding:var(--space-5);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.offline-help h2{margin-bottom:var(--space-2)}
.offline-help p{color:var(--text-soft);font-size:.92rem}
.admin-plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.admin-plan-card{box-shadow:none}
.admin-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.admin-inline-form{display:flex;gap:var(--space-2);align-items:center}
.system-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);margin:var(--space-5) 0}
.system-check{display:flex;gap:var(--space-3);padding:var(--space-4);border:1px solid var(--border);border-radius:13px}
.system-check.is-ok svg{color:var(--emerald)}
.system-check.is-warning svg{color:var(--amber)}
.system-check p{margin:2px 0 0;color:var(--text-soft);font-size:.88rem}
.tool-content-container>.content-section,.guide-reading-section,.solution-page .content-section{content-visibility:auto;contain-intrinsic-size:700px}
.button[disabled]{opacity:.55;cursor:not-allowed}
.is-error{color:var(--red)}
/* Security/info page sidebar layout */
.info-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--space-8);align-items:start}
.info-sidebar{position:sticky;top:calc(var(--header-height) + var(--space-8))}
.info-sidebar nav{display:grid;gap:2px;padding:var(--space-3);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.info-sidebar nav a{display:block;padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);color:var(--text-soft);font-size:.88rem;font-weight:650;transition:color .15s ease,background .15s ease}
.info-sidebar nav a:hover,.info-sidebar nav a.active{color:var(--primary);background:var(--primary-soft)}
.info-content section{margin-bottom:var(--space-9)}
.info-content section:last-child{margin-bottom:0}
.info-content h2{margin-bottom:var(--space-3)}
.info-content>p{color:var(--text-soft);font-size:1.02rem;margin-bottom:var(--space-5)}
/* Contact form captcha block tidy */
.contact-form .form-note+.form-note{margin-top:calc(var(--space-1) * -1)}
.contact-form button[type="submit"]{margin-top:var(--space-5)}
.contact-form .form-note a{color:var(--primary);font-weight:650}
.contact-form .form-note a:hover{text-decoration:underline}
@media(max-width:1024px){.account-auth-layout,.solution-hero-grid,.trust-hero-grid{grid-template-columns:1fr}.account-layout{grid-template-columns:1fr}.account-sidebar{position:static}.account-nav{grid-template-columns:repeat(4,minmax(0,1fr))}.account-nav a{justify-content:center}.account-identity-card{display:none}.account-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.account-action-grid,.pricing-grid,.solution-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.trust-method-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.info-layout{grid-template-columns:1fr}.info-sidebar{position:static}.info-sidebar nav{grid-template-columns:repeat(4,minmax(0,1fr))}.info-sidebar nav a{justify-content:center;text-align:center}}
@media(max-width:720px){.header-account-link span{display:none}.account-auth-layout{gap:1.5rem}.account-auth-card{padding:var(--space-5)}.account-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.account-stat-grid,.account-action-grid,.pricing-grid,.solution-card-grid,.trust-method-grid,.admin-plan-grid,.admin-field-grid,.system-check-grid{grid-template-columns:1fr}.billing-current-card,.workspace-sync-status{display:grid}.status-list article{grid-template-columns:auto 1fr}.status-list article>.status-pill{grid-column:2}.changelog-release{grid-template-columns:1fr}.pwa-update-notice{width:calc(100% - 1.5rem);justify-content:space-between}.processing-disclosure dl>div{display:grid}.processing-disclosure dd{text-align:left}.solution-hero h1,.trust-hero h1,.pricing-hero h1,.status-hero h1{font-size:2.5rem}.info-sidebar nav{grid-template-columns:repeat(2,minmax(0,1fr))}.error-page-section{padding:clamp(3rem,10vw,6rem) 0}.error-page-card{padding:clamp(1.5rem,6vw,3rem);border-radius:var(--radius-lg)}}
/* V3.1 error page */
.error-page-section{padding:clamp(5rem,10vw,9rem) 0}
.error-page-card{text-align:center;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);padding:clamp(2rem,6vw,4.5rem);box-shadow:var(--shadow-lg)}
.error-code{display:block;font-size:clamp(4rem,14vw,8rem);font-weight:800;letter-spacing:-.08em;line-height:.85;color:var(--primary);opacity:.16}
.error-page-card .eyebrow{justify-content:center;margin-top:var(--space-6)}
.error-page-card h1{font-size:clamp(2rem,5vw,3.5rem);margin:var(--space-3) 0 var(--space-4)}
.error-page-card>p{max-width:42rem;margin-left:auto;margin-right:auto;color:var(--text-soft)}
.error-page-card .button-row{justify-content:center;margin-top:var(--space-8)}
.free-value-section { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.free-value-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.free-value-links { display: flex; justify-content: center; gap: 20px; margin-top: 1rem; }
.free-value-links a { font-size: 0.88rem; font-weight: 600; color: var(--text-soft); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.free-value-links a:hover { color: var(--primary); }
.free-value-links a svg { opacity: 0.5; }
.free-value-strip article { display: flex; gap: .875rem; align-items: flex-start; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.free-value-strip span { color: var(--primary); flex: 0 0 auto; }
.free-value-strip h2 { margin: 0 0 .25rem; font-size: 1rem; }
.free-value-strip p { margin: 0; color: var(--text-soft); font-size: .95rem; }
@media (max-width: 800px) { .free-value-strip { grid-template-columns: 1fr; } }
.hp-field{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.admin-nav-badge{margin-left:auto;min-width:1.5rem;padding:2px 7px;border-radius:var(--radius-pill);background:var(--primary);color:#fff;font-size:.72rem;text-align:center}
.admin-filter-form{display:flex;flex-wrap:wrap;gap:var(--space-3);margin:var(--space-4) 0}
.admin-filter-form input,.admin-filter-form select{padding:11px var(--space-3);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--text)}
.workspace-sync-cta{margin-top:var(--space-5)}
/* ==========================================================================
HOMEPAGE V4 - faithful reference-template landing system
Header/footer remain owned by the shared site chrome.
========================================================================== */
.home-v3{
--home-bg:var(--bg);
--home-panel:color-mix(in srgb,var(--surface) 88%,transparent);
--home-panel-strong:color-mix(in srgb,var(--surface-strong) 78%,transparent);
--home-line:color-mix(in srgb,var(--border) 92%,transparent);
--home-line-strong:color-mix(in srgb,var(--border-strong) 82%,transparent);
--home-text:var(--text);
--home-muted:var(--text-soft);
--home-faint:var(--text-faint);
--home-ember:var(--primary);
--home-amber:var(--amber-bright);
--home-ember-soft:var(--primary-soft);
--home-green:var(--emerald);
--home-red:var(--red);
--home-sky:var(--blue);
--home-violet:#9b6de8;
--home-r-lg:24px;
--home-r-md:18px;
--home-r-sm:12px;
--home-container:1140px;
--home-display:var(--font-display);
--home-body:Inter,system-ui,sans-serif;
--home-serif:var(--font-serif);
--home-mono:var(--font-mono);
--home-ease:var(--ease);
--home-shadow-ember:var(--shadow-ember);
position:relative;
overflow:clip;
isolation:isolate;
color:var(--home-text);
font-family:var(--home-body);
}
.home-v3::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:
radial-gradient(52rem 34rem at 78% -10%,color-mix(in srgb,var(--home-ember) 16%,transparent),transparent 60%),
radial-gradient(44rem 30rem at -12% 26%,color-mix(in srgb,var(--home-amber) 8%,transparent),transparent 60%),
radial-gradient(60rem 40rem at 50% 115%,color-mix(in srgb,var(--home-ember) 6%,transparent),transparent 62%);}
.home-v3::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.45;background-image:linear-gradient(color-mix(in srgb,var(--home-text) 4%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--home-text) 4%,transparent) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(70rem 44rem at 50% 0%,#000 30%,transparent 78%);}
html[data-theme="dark"] .home-v3{--home-panel:rgba(255,255,255,.03);--home-panel-strong:rgba(255,255,255,.055);--home-line:rgba(255,255,255,.09);--home-line-strong:rgba(255,255,255,.17);--home-text:#f4efe4;--home-muted:#a69d8e;--home-faint:#6f6759;--home-ember:#ff7a3d;--home-amber:#ffc24b;--home-ember-soft:rgba(255,122,61,.16);--home-green:#7bd88f;--home-red:#ff8f7a;--home-sky:#8fd0ff;--home-violet:#c9a2ff;}
.home-v3 *{box-sizing:border-box}
.home-v3 a{color:inherit;text-decoration:none}
.home-v3 img,.home-v3 svg{display:block}
.home-v3 button{font:inherit;cursor:pointer}
.home-v3 .container{width:100%;max-width:var(--home-container);margin-inline:auto;padding-inline:24px}
.home-v3 .container-wide{max-width:1240px}
.home-v3 section{position:relative}
/* Buttons / links - visual language from the reference */
.home-v3 .button{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-weight:600;font-size:.95rem;padding:.78rem 1.35rem;border-radius:14px;transition:transform .25s var(--home-ease),box-shadow .25s,background .25s,border-color .25s;white-space:nowrap}
.home-v3 .button-primary{color:#1c0d04;background:linear-gradient(135deg,#ff8a4d,#ffc24b);box-shadow:var(--home-shadow-ember),inset 0 1px 0 rgba(255,255,255,.5);border:0}
.home-v3 .button-primary:hover{transform:translateY(-2px);box-shadow:0 18px 54px -12px rgba(255,122,61,.6),inset 0 1px 0 rgba(255,255,255,.5)}
.home-v3 .button-quiet{border:1px solid var(--home-line);background:var(--home-panel);color:var(--home-text)}
.home-v3 .button-quiet:hover{border-color:var(--home-line-strong);background:var(--home-panel-strong);transform:translateY(-2px)}
.home-v3 .button-large{padding:.95rem 1.7rem;font-size:1rem;border-radius:15px}
.home-v3 .button-small{padding:.5rem .95rem;font-size:.85rem;border-radius:11px}
.home-v3 .text-link{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:.95rem;color:var(--home-amber);transition:gap .25s var(--home-ease),color .2s}
.home-v3 .text-link:hover{gap:.7rem;color:var(--home-ember)}
/* Hero */
.home-v3 .hero{position:relative;padding:158px 0 60px;overflow:hidden}
.home-v3 .hero-glow{position:absolute;top:-220px;left:50%;transform:translateX(-50%);width:900px;height:520px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--home-ember) 17%,transparent),transparent);filter:blur(40px);pointer-events:none}
.home-v3 .hero-grid{display:block;position:relative;max-width:920px}
.home-v3 .home-hero-content{max-width:900px}
.home-v3 .eyebrow{display:inline-flex;align-items:center;gap:.55rem;padding:.42rem .95rem;border-radius:999px;border:1px solid var(--home-line);background:var(--home-panel);font-family:var(--home-mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--home-muted)}
.home-v3 .eyebrow .icon{color:var(--home-ember)}
.home-v3 .hero h1{max-width:880px;font-family:var(--home-display);font-weight:700;letter-spacing:-.045em;line-height:1.02;font-size:clamp(2.85rem,5.6vw,4.7rem);margin:1.35rem 0 1.2rem}
.home-v3 .hero h1 em{font-family:var(--home-serif);font-style:italic;font-weight:400;letter-spacing:-.01em;background:linear-gradient(92deg,var(--home-ember) 10%,var(--home-amber) 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.home-v3 .hero-sub{font-size:clamp(1.02rem,1.4vw,1.18rem);color:var(--home-muted);max-width:34rem;margin:0 0 1.9rem}
.home-v3 .hero-search{margin-bottom:1.4rem;max-width:700px}
.home-v3 .hero-search-field{display:flex;align-items:center;gap:.7rem;padding:.5rem .5rem .5rem 1.1rem;border-radius:16px;border:1px solid var(--home-line);background:color-mix(in srgb,var(--home-panel) 82%,transparent);transition:border-color .25s,box-shadow .25s}
.home-v3 .hero-search-field:focus-within{border-color:color-mix(in srgb,var(--home-ember) 55%,var(--home-line));box-shadow:0 0 0 4px color-mix(in srgb,var(--home-ember) 12%,transparent)}
.home-v3 .hero-search-field .icon{color:var(--home-faint);width:20px;height:20px}
.home-v3 .hero-search-field input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--home-text);font-size:1rem;font-family:var(--home-body)}
.home-v3 .hero-search-field input::placeholder{color:var(--home-faint)}
.home-v3 .hero-actions{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-bottom:1.6rem}
.home-v3 .popular{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;font-size:.85rem;color:var(--home-faint)}
.home-v3 .popular a{padding:.34rem .8rem;border-radius:999px;border:1px solid var(--home-line);color:var(--home-muted);transition:all .2s;font-size:.83rem}
.home-v3 .popular a:hover{color:var(--home-text);border-color:color-mix(in srgb,var(--home-ember) 50%,var(--home-line));background:var(--home-ember-soft)}
/* Hero visual */
.home-v3 .hero-visual{position:relative;perspective:1200px}
.home-v3 .forge-scene{position:relative;transform-style:preserve-3d;transition:transform .5s var(--home-ease);will-change:transform}
.home-v3 .forge-card{position:relative;border-radius:var(--home-r-lg);border:1px solid var(--home-line-strong);background:linear-gradient(165deg,#17140f,#0e0c09 60%);box-shadow:0 40px 90px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.02) inset,0 0 100px -30px rgba(255,122,61,.35);overflow:hidden;transform:translateZ(30px)}
.home-v3 .forge-toolbar{display:flex;align-items:center;gap:.7rem;padding:.85rem 1.1rem;border-bottom:1px solid var(--home-line);background:rgba(255,255,255,.025)}
.home-v3 .dots{display:flex;gap:.4rem}
.home-v3 .dots i{width:10px;height:10px;border-radius:50%;background:var(--home-faint);opacity:.55}
.home-v3 .dots i:first-child{background:var(--home-ember);opacity:.9}
.home-v3 .forge-file{font-family:var(--home-mono);font-size:.78rem;color:var(--home-muted)}
.home-v3 .forge-badge{margin-left:auto;display:inline-flex;align-items:center;gap:.35rem;font-family:var(--home-mono);font-size:.72rem;color:var(--home-green);border:1px solid color-mix(in srgb,var(--home-green) 35%,transparent);background:color-mix(in srgb,var(--home-green) 8%,transparent);padding:.2rem .6rem;border-radius:999px}
.home-v3 .forge-code{margin:0;padding:1.3rem 1.4rem;font-family:var(--home-mono);font-size:.86rem;line-height:1.75;white-space:pre;overflow:auto;min-height:250px;color:#f4efe4}
.home-v3 .tk-key{color:#ffd9a0}
.home-v3 .tk-str{color:var(--home-sky)}
.home-v3 .tk-num{color:var(--home-ember)}
.home-v3 .tk-bool{color:var(--home-violet)}
.home-v3 .tk-null{color:var(--home-faint)}
.home-v3 .tk-brace{color:#f4efe4}
.home-v3 .forge-status{display:flex;gap:1.1rem;padding:.8rem 1.2rem;border-top:1px solid var(--home-line);font-family:var(--home-mono);font-size:.72rem;color:var(--home-faint)}
.home-v3 .forge-status b{color:var(--home-muted);font-weight:500}
.home-v3 .forge-status .dot{color:var(--home-ember)}
.home-v3 .orbit-chip{position:absolute;display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .95rem;border-radius:999px;border:1px solid var(--home-line-strong);background:rgba(20,17,13,.9);backdrop-filter:blur(8px);font-family:var(--home-mono);font-size:.76rem;color:var(--home-text);box-shadow:0 14px 34px -12px rgba(0,0,0,.8);animation:home-float 7s ease-in-out infinite;white-space:nowrap}
.home-v3 .orbit-chip .icon{color:var(--home-ember);width:.95em;height:.95em}
.home-v3 .chip-a{top:-20px;right:8%}
.home-v3 .chip-b{top:34%;right:-22px;animation-delay:1.4s}
.home-v3 .chip-c{bottom:22%;left:-26px;animation-delay:.7s}
.home-v3 .chip-d{bottom:-18px;right:22%;animation-delay:2s}
.home-v3 .chip-local{top:12%;left:-14px;color:var(--home-green)}
.home-v3 .chip-local .icon{color:var(--home-green)}
@keyframes home-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.home-v3 .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--home-line);border:1px solid var(--home-line);border-radius:var(--home-r-md);overflow:hidden;margin-top:3.6rem}
.home-v3 .stat{background:color-mix(in srgb,var(--home-bg) 78%,transparent);padding:1.35rem 1.5rem;backdrop-filter:blur(6px)}
.home-v3 .stat b{display:block;font-family:var(--home-display);font-size:clamp(1.7rem,2.6vw,2.3rem);font-weight:700;letter-spacing:-.03em;background:linear-gradient(94deg,var(--home-text) 40%,var(--home-amber));-webkit-background-clip:text;background-clip:text;color:transparent}
.home-v3 .stat span{font-size:.84rem;color:var(--home-muted)}
.home-v3 .marquee{overflow:hidden;border-block:1px solid var(--home-line);padding:1.1rem 0;margin-top:1.5rem;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.home-v3 .marquee-track{display:flex;gap:2.8rem;width:max-content;animation:home-scroll 32s linear infinite}
.home-v3 .marquee:hover .marquee-track{animation-play-state:paused}
.home-v3 .marquee-set{display:flex;gap:2.8rem;align-items:center}
.home-v3 .marquee-set span{display:flex;align-items:center;gap:2.8rem;font-family:var(--home-mono);font-size:.82rem;color:var(--home-faint);white-space:nowrap}
.home-v3 .marquee-set span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--home-ember);opacity:.7}
@keyframes home-scroll{to{transform:translateX(-50%)}}
/* Sections */
.home-v3 .section{padding:96px 0}
.home-v3 .section-muted{background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--home-text) 2.2%,transparent) 18%,color-mix(in srgb,var(--home-text) 2.2%,transparent) 82%,transparent)}
.home-v3 .section-head{max-width:44rem;margin-bottom:3.2rem}
.home-v3 .section-head.center{margin-inline:auto;text-align:center}
.home-v3 .section-head.center .kicker{justify-content:center}
.home-v3 .section-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;max-width:none}
.home-v3 .section-head-row>div{max-width:40rem}
.home-v3 .kicker{display:flex;align-items:center;gap:.7rem;font-family:var(--home-mono);font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--home-ember);margin:0 0 1rem}
.home-v3 .kicker::before{content:"";width:26px;height:1px;background:var(--home-ember)}
.home-v3 .section-head.center .kicker::after{content:"";width:26px;height:1px;background:var(--home-ember)}
.home-v3 .section-head h2{font-family:var(--home-display);font-size:clamp(1.9rem,3.6vw,2.8rem);letter-spacing:-.035em;line-height:1.08;margin:.2rem 0 .9rem;font-weight:700}
.home-v3 .section-head h2 em,.home-v3 .cta-band h2 em{font-family:var(--home-serif);font-style:italic;font-weight:400;background:linear-gradient(92deg,var(--home-ember),var(--home-amber));-webkit-background-clip:text;background-clip:text;color:transparent}
.home-v3 .section-head p{color:var(--home-muted);margin:0;font-size:1.02rem}
/* Glow interaction */
.home-v3 .glow-card{position:relative}
.home-v3 .glow-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,138,76,.14),transparent 55%)}
.home-v3 .glow-card:hover::after{opacity:1}
.home-v3 .value-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.home-v3 .value-card{display:flex;gap:1rem;padding:1.5rem 1.4rem;border:1px solid var(--home-line);border-radius:var(--home-r-md);background:var(--home-panel);transition:transform .3s var(--home-ease),border-color .3s}
.home-v3 .value-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--home-ember) 40%,var(--home-line))}
.home-v3 .value-icon{width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--home-ember-soft);color:var(--home-ember);border:1px solid color-mix(in srgb,var(--home-ember) 30%,transparent)}
.home-v3 .value-card h3{font-family:var(--home-display);font-size:1.02rem;margin:.1rem 0 .35rem;letter-spacing:-.01em}
.home-v3 .value-card p{margin:0;font-size:.88rem;color:var(--home-muted)}
.home-v3 .proof-links{display:flex;gap:1.8rem;margin-top:1.6rem;flex-wrap:wrap}
.home-v3 .forge-tool{border:1px solid var(--home-line-strong);border-radius:var(--home-r-lg);overflow:hidden;background:linear-gradient(170deg,color-mix(in srgb,var(--home-text) 4.5%,transparent),color-mix(in srgb,var(--home-text) 1.5%,transparent));box-shadow:0 40px 90px -40px rgba(0,0,0,.8)}
.home-v3 .forge-tool-head{display:flex;justify-content:space-between;gap:2rem;padding:2.2rem 2.2rem 1.6rem;align-items:flex-start;flex-wrap:wrap}
.home-v3 .forge-tool-head h2{font-family:var(--home-display);font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.03em;margin:.2rem 0 .5rem}
.home-v3 .forge-tool-head p{margin:0;color:var(--home-muted);max-width:34rem}
.home-v3 .local-badge{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--home-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--home-green);border:1px solid color-mix(in srgb,var(--home-green) 35%,transparent);background:color-mix(in srgb,var(--home-green) 7%,transparent);padding:.4rem .85rem;border-radius:999px;white-space:nowrap}
.home-v3 .forge-tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:0 2.2rem}
.home-v3 .editor-panel{border:1px solid var(--home-line);border-radius:var(--home-r-md);background:#0d0b09;overflow:hidden;display:flex;flex-direction:column}
.home-v3 .editor-label{display:flex;justify-content:space-between;align-items:center;padding:.65rem 1rem;font-family:var(--home-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--home-faint);border-bottom:1px solid var(--home-line);background:rgba(255,255,255,.02)}
.home-v3 .editor-label i{width:7px;height:7px;border-radius:50%;background:var(--home-ember);display:inline-block;font-style:normal}
.home-v3 .editor-panel textarea,.home-v3 .editor-panel pre{margin:0;border:0;background:transparent;color:#f4efe4;font-family:var(--home-mono);font-size:.85rem;line-height:1.7;padding:1.1rem 1.2rem;min-height:270px;outline:0;resize:vertical;white-space:pre;overflow:auto}
.home-v3 .editor-panel textarea::placeholder{color:var(--home-faint)}
.home-v3 .editor-panel pre.muted{color:var(--home-faint)}
.home-v3 .forge-tool-actions{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;padding:1.5rem 2.2rem 2rem}
.home-v3 .forge-msg{font-family:var(--home-mono);font-size:.8rem;margin-left:auto}
.home-v3 .forge-msg.ok{color:var(--home-green)}
.home-v3 .forge-msg.warn{color:var(--home-amber)}
.home-v3 .forge-msg.err{color:var(--home-red)}
.home-v3 .task-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.home-v3 .task-card{position:relative;padding:1.7rem 1.6rem;border-radius:var(--home-r-md);border:1px solid var(--home-line);background:var(--home-panel);transition:transform .3s var(--home-ease),border-color .3s,background .3s;overflow:hidden}
.home-v3 .task-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--home-ember) 45%,var(--home-line));background:var(--home-panel-strong)}
.home-v3 .task-icon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:1.1rem;background:linear-gradient(150deg,color-mix(in srgb,var(--home-ember) 20%,transparent),color-mix(in srgb,var(--home-amber) 8%,transparent));color:var(--home-amber);border:1px solid color-mix(in srgb,var(--home-ember) 32%,transparent)}
.home-v3 .task-icon .icon{width:22px;height:22px}
.home-v3 .task-card h3{font-family:var(--home-display);font-size:1.08rem;margin:0 0 .45rem;letter-spacing:-.015em}
.home-v3 .task-card p{margin:0 0 1.1rem;font-size:.89rem;color:var(--home-muted)}
.home-v3 .task-cta{display:inline-flex;align-items:center;gap:.45rem;font-size:.86rem;font-weight:600;color:var(--home-amber);transition:gap .25s var(--home-ease)}
.home-v3 .task-card:hover .task-cta{gap:.75rem}
.home-v3 .tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.home-v3 .tool-card{display:flex;flex-direction:column;padding:1.45rem 1.35rem;border-radius:var(--home-r-md);border:1px solid var(--home-line);background:var(--home-panel);transition:transform .3s var(--home-ease),border-color .3s;overflow:hidden}
.home-v3 .tool-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--home-ember) 50%,var(--home-line))}
.home-v3 .tool-icon{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;margin-bottom:1rem;background:var(--home-ember-soft);color:var(--home-ember);border:1px solid color-mix(in srgb,var(--home-ember) 30%,transparent);transition:transform .3s var(--home-ease)}
.home-v3 .tool-card:hover .tool-icon{transform:scale(1.08) rotate(-4deg)}
.home-v3 .tool-card h3{font-family:var(--home-display);font-size:1rem;margin:0 0 .35rem;letter-spacing:-.01em}
.home-v3 .tool-card p{margin:0 0 1rem;font-size:.83rem;color:var(--home-muted);flex:1}
.home-v3 .tool-cta{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:600;color:var(--home-faint);transition:color .25s,gap .25s var(--home-ease)}
.home-v3 .tool-card:hover .tool-cta{color:var(--home-amber);gap:.65rem}
.home-v3 .workflow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.home-v3 .workflow-card{padding:1.8rem 1.6rem;border-radius:var(--home-r-md);border:1px solid var(--home-line);background:var(--home-panel);transition:border-color .3s,transform .3s var(--home-ease)}
.home-v3 .workflow-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--home-ember) 40%,var(--home-line))}
.home-v3 .workflow-card h3{font-family:var(--home-display);font-size:1.05rem;margin:0 0 1.3rem;display:flex;align-items:center;gap:.6rem}
.home-v3 .workflow-card h3 .icon{color:var(--home-ember)}
.home-v3 .workflow-card ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.65rem}
.home-v3 .workflow-card li{display:flex;align-items:center;gap:.75rem;font-size:.89rem;color:var(--home-muted)}
.home-v3 .workflow-card li b{font-family:var(--home-mono);font-weight:500;font-size:.68rem;color:#1c0d04;background:linear-gradient(135deg,#ff8a4d,#ffc24b);width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:none}
.home-v3 .workflow-card li .icon{color:var(--home-faint);width:.85em;height:.85em}
.home-v3 .privacy-panel{position:relative;border-radius:var(--home-r-lg);overflow:hidden;padding:clamp(2.2rem,5vw,3.6rem);border:1px solid color-mix(in srgb,var(--home-ember) 30%,var(--home-line));background:linear-gradient(140deg,color-mix(in srgb,var(--home-ember) 13%,transparent),color-mix(in srgb,var(--home-amber) 5%,transparent) 45%,color-mix(in srgb,var(--home-text) 2%,transparent));display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.home-v3 .privacy-panel::before{content:"";position:absolute;top:-140px;right:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--home-ember) 28%,transparent),transparent);filter:blur(30px);pointer-events:none}
.home-v3 .privacy-panel h2{font-family:var(--home-display);font-size:clamp(1.8rem,3.4vw,2.6rem);letter-spacing:-.035em;line-height:1.1;margin:.3rem 0 1rem}
.home-v3 .privacy-panel p{color:var(--home-muted);margin:0 0 1.8rem;max-width:30rem}
.home-v3 .privacy-list{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.home-v3 .privacy-list li{display:flex;gap:.85rem;align-items:flex-start;padding:1rem 1.15rem;border-radius:var(--home-r-sm);border:1px solid var(--home-line);background:color-mix(in srgb,var(--home-bg) 45%,transparent);backdrop-filter:blur(6px);font-size:.93rem}
.home-v3 .privacy-list .icon{color:var(--home-green);margin-top:.15rem}
.home-v3 .guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.home-v3 .guide-card{display:flex;flex-direction:column;padding:1.7rem 1.6rem;border-radius:var(--home-r-md);border:1px solid var(--home-line);background:var(--home-panel);transition:transform .3s var(--home-ease),border-color .3s;overflow:hidden}
.home-v3 .guide-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--home-ember) 45%,var(--home-line))}
.home-v3 .guide-tag{align-self:flex-start;display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;font-family:var(--home-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--home-amber);border:1px solid color-mix(in srgb,var(--home-amber) 35%,transparent);background:color-mix(in srgb,var(--home-amber) 7%,transparent);padding:.28rem .7rem;border-radius:999px;margin-bottom:1.1rem}
.home-v3 .guide-card h3{font-family:var(--home-display);font-size:1.12rem;margin:0 0 .5rem;letter-spacing:-.015em}
.home-v3 .guide-card p{margin:0 0 1.3rem;font-size:.89rem;color:var(--home-muted);flex:1}
.home-v3 .guide-card strong{display:inline-flex;align-items:center;gap:.45rem;font-size:.88rem;color:var(--home-amber);font-weight:600;transition:gap .25s var(--home-ease)}
.home-v3 .guide-card:hover strong{gap:.75rem}
.home-v3 .cta-band{text-align:center;padding:110px 0;border-top:1px solid var(--home-line)}
.home-v3 .cta-band h2{font-family:var(--home-display);font-size:clamp(2.4rem,6vw,4.2rem);letter-spacing:-.045em;line-height:1.04;margin:0 0 1.1rem;font-weight:700}
.home-v3 .cta-band p{color:var(--home-muted);max-width:32rem;margin:0 auto 2.2rem;font-size:1.05rem}
.home-v3 .cta-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
/* reveal */
.home-v3 .reveal{opacity:0;transform:translateY(26px);transition:opacity .85s var(--home-ease),transform .85s var(--home-ease);transition-delay:var(--d,0s)}
.home-v3 .reveal.in{opacity:1;transform:none}
@media(max-width:1080px){.home-v3 .hero-grid{display:block}.home-v3 .tool-grid{grid-template-columns:repeat(2,1fr)}.home-v3 .task-grid,.home-v3 .workflow-grid,.home-v3 .guide-grid,.home-v3 .value-strip{grid-template-columns:repeat(2,1fr)}.home-v3 .privacy-panel{grid-template-columns:1fr}}
@media(max-width:900px){.home-v3 .forge-tool-grid{grid-template-columns:1fr}.home-v3 .forge-msg{margin-left:0;width:100%}}
@media(max-width:640px){.home-v3 .section{padding:70px 0}.home-v3 .hero{padding-top:132px}.home-v3 .hero-stats{grid-template-columns:1fr;gap:1px}.home-v3 .task-grid,.home-v3 .workflow-grid,.home-v3 .guide-grid,.home-v3 .value-strip,.home-v3 .tool-grid{grid-template-columns:1fr}.home-v3 .forge-tool-head,.home-v3 .forge-tool-grid,.home-v3 .forge-tool-actions{padding-inline:1.3rem}.home-v3 .hero-actions{gap:1rem}.home-v3 .section-head-row{display:block}.home-v3 .section-head-row>.text-link{margin-top:1rem}}
@media(max-width:430px){.home-v3 .hero h1{font-size:2.55rem}.home-v3 .popular a{font-size:.76rem}.home-v3 .forge-tool-actions{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.home-v3 *,.home-v3 *::before,.home-v3 *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.home-v3 .reveal{opacity:1;transform:none}.home-v3 .marquee-track{animation:none}}
/* Admin UI repair: theme-aware surface, readable controls, and responsive layout. */
.admin-body,
.admin-login-body { background: var(--bg); color: var(--text); }
.admin-sidebar { background: var(--surface-inverse, #17152d); color: var(--text-inverse, #fff); border-right: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.admin-sidebar .brand { color: var(--text-inverse, #fff); }
.admin-sidebar nav a,
.admin-sidebar-footer a { color: color-mix(in srgb, var(--text-inverse, #fff) 78%, transparent); }
.admin-sidebar nav a:hover,
.admin-sidebar-footer a:hover,
.admin-sidebar nav a.is-active { color: #fff; background: color-mix(in srgb, var(--primary) 16%, transparent); }
.admin-nav-label { color: color-mix(in srgb, var(--text-inverse, #fff) 48%, transparent); }
.admin-topbar { background: var(--surface); color: var(--text); border-bottom-color: var(--border); }
.admin-stat-grid article,
.admin-card,
.ad-admin-card,
.admin-login-card { border-color: var(--border); background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm, 0 8px 28px rgba(20,24,40,.08)); }
.admin-stat-grid span,
.admin-table th,
.admin-table td small { color: var(--text-faint); }
.admin-table th { background: var(--surface-soft); color: var(--text-soft); }
.admin-table th,
.admin-table td { border-bottom-color: var(--border); }
.admin-table td { color: var(--text); }
.admin-table td strong { color: var(--text); }
.admin-login-card input,
.admin-content input,
.admin-content select,
.admin-content textarea,
.admin-login-card select,
.admin-login-card textarea { width: 100%; min-width: 0; padding: .78rem .9rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); box-sizing: border-box; }
.admin-login-card input:focus,
.admin-content input:focus,
.admin-content select:focus,
.admin-content textarea:focus { outline: 3px solid color-mix(in srgb, var(--primary) 18%, transparent); border-color: var(--primary); }
.admin-login-card label { display: grid; gap: .45rem; font-weight: 700; }
.admin-login-card form { display: grid; gap: 1rem; }
.admin-login-card .button-block { width: 100%; }
.admin-inline-form { flex-wrap: wrap; }
html[data-theme="dark"] .admin-sidebar { background: #100e1d; }
html[data-theme="dark"] .admin-topbar { background: var(--surface); }
@media (max-width: 980px) {
.admin-shell { display: block; }
.admin-sidebar { position: relative; height: auto; min-height: 0; }
.admin-sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-sidebar-footer { margin-top: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.admin-login-body { padding: 14px; }
.admin-login-card { padding: 22px; border-radius: 16px; }
.admin-sidebar { padding: 18px 14px; }
.admin-sidebar nav,
.admin-sidebar-footer { grid-template-columns: 1fr; }
.admin-content { padding: 20px 14px 36px; }
.admin-topbar { padding: 20px 14px 16px; }
.admin-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-table { min-width: 680px; }
}
/* Admin tools management: compact, filterable, paginated table. */
.admin-tools-page { overflow: hidden; }
.admin-tools-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:20px; }
.admin-tools-heading h2 { margin:4px 0 6px; }
.admin-tools-heading p:not(.section-kicker) { margin:0; max-width:760px; color:var(--text-soft); }
.admin-tools-count { flex:0 0 auto; display:grid; gap:2px; min-width:110px; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface-soft); text-align:right; }
.admin-tools-count strong { font-size:1.35rem; line-height:1; color:var(--text); }
.admin-tools-count span { font-size:.75rem; color:var(--text-faint); }
.admin-tools-filters { align-items:flex-end; padding:14px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface-soft); }
.admin-tools-filters label { display:grid; gap:6px; min-width:145px; flex:1 1 145px; }
.admin-tools-filters label span { font-size:.72rem; font-weight:700; color:var(--text-faint); }
.admin-tools-filters .admin-filter-search { flex:2 1 240px; }
.admin-filter-actions { display:flex; gap:8px; align-items:center; }
.admin-table-meta { display:flex; justify-content:space-between; gap:16px; margin:16px 0 8px; color:var(--text-faint); font-size:.78rem; }
.admin-tools-table { min-width:860px; }
.admin-tools-table th, .admin-tools-table td { padding:10px 11px; }
.admin-tools-table td:first-child { min-width:250px; }
.admin-tools-table input[type="checkbox"] { width:18px; height:18px; accent-color:var(--primary); }
.admin-tools-table .admin-version-input { width:86px; min-width:86px; padding:8px 9px; }
.admin-switch { display:inline-flex; align-items:center; gap:7px; cursor:pointer; white-space:nowrap; }
.admin-switch b { font-size:.72rem; font-weight:600; color:var(--text-faint); }
.admin-switch span { display:none; }
.admin-empty-state { display:grid; gap:4px; padding:28px 8px; text-align:center; }
.admin-empty-state span { color:var(--text-faint); font-size:.82rem; }
.admin-tools-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:12px; color:var(--text-faint); font-size:.78rem; }
.admin-pagination { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:22px; }
.admin-page-numbers { display:flex; align-items:center; gap:5px; }
.admin-page-numbers a, .admin-page-numbers span { min-width:34px; height:34px; display:grid; place-items:center; border-radius:var(--radius-sm); color:var(--text-soft); text-decoration:none; }
.admin-page-numbers a:hover { background:var(--surface-soft); color:var(--text); }
.admin-page-numbers a.is-current { background:var(--primary); color:#fff; font-weight:700; }
@media (max-width: 820px) {
.admin-tools-heading { flex-direction:column; }
.admin-tools-count { text-align:left; }
.admin-tools-filters label, .admin-tools-filters .admin-filter-search { flex-basis:calc(50% - 8px); }
.admin-filter-actions { width:100%; }
}
@media (max-width: 560px) {
.admin-tools-filters label, .admin-tools-filters .admin-filter-search { flex-basis:100%; }
.admin-tools-footer { align-items:stretch; flex-direction:column; }
.admin-tools-footer .button { width:100%; }
.admin-pagination { justify-content:space-between; }
.admin-pagination > .button { padding-inline:9px; }
.admin-page-numbers a, .admin-page-numbers span { min-width:30px; height:30px; }
}
/* Custom administrator path settings */
.admin-path-card h2 { margin: 0 0 .45rem; }
.admin-path-form { display: grid; gap: .85rem; max-width: 720px; margin-top: 1.15rem; }
.admin-path-form label { display: grid; gap: .45rem; font-weight: 700; }
.admin-path-input { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; max-width: 620px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); overflow: hidden; }
.admin-path-input > span { padding: 0 .8rem; color: var(--text-faint); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.admin-path-input input { border: 0 !important; border-radius: 0 !important; background: transparent !important; }
.admin-path-input input:focus { outline: 0 !important; }
.admin-path-form .form-help { margin: 0; color: var(--text-faint); font-size: .84rem; }
@media (max-width: 640px) { .admin-path-input { max-width: none; } }
/* IMAGE TOOLS WORKSPACE LAYOUT (Phase 1) */
.v3-image-compare[hidden],
.v3-canvas-wrap[hidden],
.v3-crop-overlay[hidden],
.v3-color-picker-panel[hidden],
.v3-favicon-preview-grid[hidden],
[data-image-empty][hidden],
.v3-image-workspace [hidden] {
display: none !important;
}
/* Before / After Image Compare */
.v3-image-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; width: 100%; }
@media (max-width: 768px) { .v3-image-compare { grid-template-columns: 1fr; } }
.compare-side { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; }
.compare-label { font-weight: 600; font-size: .9rem; color: var(--text); }
.compare-side img { max-width: 100%; height: auto; border-radius: var(--radius-sm); box-shadow: 0 4px 12px rgba(0,0,0,0.08); border: 1px solid var(--border); }
/* Favicon Multi-Size Grid */
.v3-favicon-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1rem; width: 100%; }
.favicon-item-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; padding: 1rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.favicon-item-card img { max-width: 64px; max-height: 64px; }
.favicon-item-card span { font-size: .8rem; font-weight: 600; color: var(--text-muted); text-align: center; }
/* Image Color Picker Panel */
.v3-color-picker-panel { display: flex; flex-direction: column; gap: 1rem; width: 100%; margin-top: 1rem; }
.color-picker-current { display: flex; align-items: center; gap: 1.25rem; background: var(--bg); padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); }
.color-swatch-box { width: 64px; height: 64px; border-radius: var(--radius-sm); border: 2px solid var(--border); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05); }
.color-values-list { display: flex; flex-direction: column; gap: 0.4rem; }
.color-val-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.color-val-row span { font-weight: 600; width: 45px; }
.color-val-row code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--bg-muted); padding: 2px 6px; border-radius: 4px; }
.color-picker-history { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.9rem; font-weight: 600; }
.color-palette-swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; min-height: 36px; }
.palette-color-chip { width: 32px; height: 32px; border-radius: 4px; border: 1px solid var(--border); cursor: pointer; transition: transform 0.15s ease; }
.palette-color-chip:hover { transform: scale(1.1); }
/* ADMIN LOGIN CONTAINER & FORM OVERFLOW FIX */
.admin-login-body {
display: flex !important;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 1.5rem;
box-sizing: border-box;
background: var(--bg);
color: var(--text);
margin: 0;
}
.admin-login-card {
width: 100% !important;
max-width: 440px !important;
display: flex !important;
flex-direction: column !important;
gap: 1.25rem !important;
padding: 2rem !important;
border: 1px solid var(--border);
border-radius: var(--radius-lg, 16px);
background: var(--surface);
color: var(--text);
box-shadow: var(--shadow-md, 0 12px 36px rgba(15, 23, 42, 0.08));
box-sizing: border-box !important;
overflow: hidden !important;
margin: auto;
}
.admin-login-card form {
display: flex !important;
flex-direction: column !important;
gap: 1.15rem !important;
width: 100% !important;
box-sizing: border-box !important;
margin: 0 !important;
}
.admin-login-card label {
display: flex !important;
flex-direction: column !important;
gap: 0.45rem !important;
font-weight: 600;
width: 100% !important;
box-sizing: border-box !important;
margin: 0 !important;
}
.admin-login-card input {
width: 100% !important;
min-width: 0 !important;
padding: 0.75rem 0.95rem !important;
border: 1px solid var(--border);
border-radius: var(--radius-sm, 8px);
background: var(--bg);
color: var(--text);
box-sizing: border-box !important;
margin: 0 !important;
}
.admin-login-card .button-block {
width: 100% !important;
box-sizing: border-box !important;
margin: 0 !important;
}
@media (max-width: 500px) {
.admin-login-body { padding: 1rem !important; }
.admin-login-card { padding: 1.5rem !important; gap: 1rem !important; }
}
/* PDF TOOLS WORKSPACE LAYOUT (Phase 2) */
.v3-pdf-workspace { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.processing-spinner { width: 22px; height: 22px; min-width: 22px; border: 3px solid rgba(37, 99, 235, 0.25); border-top-color: #2563eb; border-radius: 50%; animation: v3-spin 0.75s linear infinite; }
@keyframes v3-spin { to { transform: rotate(360deg); } }
.pdf-summary-grid, .pdf-metadata-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; width: 100%; }
.summary-stat { display: flex; flex-direction: column; gap: 0.25rem; background: var(--bg); padding: 0.85rem; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.summary-stat span { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; font-weight: 700; }
.summary-stat strong { font-size: 1.05rem; color: var(--text); font-weight: 700; }
.pdf-page-card { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; background: var(--bg); padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.pdf-page-card img { max-width: 100%; height: auto; box-shadow: 0 4px 10px rgba(0,0,0,0.08); }
.pdf-page-card span { font-size: 0.82rem; font-weight: 600; color: var(--text-muted); }
.pdf-multi-items { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }
.pdf-file-item { display: flex; align-items: center; justify-content: space-between; background: var(--bg); padding: 0.65rem 0.9rem; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.pdf-file-item div { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9rem; }
.pdf-file-item span { color: var(--text-muted); font-size: 0.8rem; }
/* PROFESSIONAL PDF COVER THUMBNAIL CARD */
.pdf-cover-card {
display: flex;
align-items: center;
gap: 1.5rem;
padding: 1.25rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md, 12px);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
width: 100%;
box-sizing: border-box;
margin-top: 0.5rem;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pdf-cover-card:hover {
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
}
.pdf-cover-thumb {
width: 90px;
min-width: 90px;
height: 120px;
background: #ffffff;
border: 1px solid var(--border);
border-radius: var(--radius-sm, 6px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.pdf-cover-thumb canvas {
width: 100%;
height: 100%;
object-fit: contain;
}
.pdf-cover-details {
display: flex;
flex-direction: column;
gap: 0.55rem;
text-align: left;
flex: 1;
min-width: 0;
}
.pdf-cover-title {
font-size: 1.05rem;
font-weight: 700;
color: var(--text);
word-break: break-all;
}
.pdf-cover-badges {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
}
.pdf-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.75rem;
background: var(--bg-muted);
border: 1px solid var(--border);
border-radius: 999px;
font-size: 0.78rem;
font-weight: 600;
color: var(--text-soft);
}
.pdf-badge.badge-status {
background: rgba(16, 185, 129, 0.1);
border-color: rgba(16, 185, 129, 0.3);
color: #059669;
}
/* MULTI-FILE PDF THUMBNAIL GRID & DRAG-TO-REORDER WORKSPACE */
.pdf-multi-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: var(--radius-sm, 8px);
margin-top: 0.75rem;
width: 100%;
box-sizing: border-box;
}
.multi-toolbar-title {
font-size: 0.85rem;
font-weight: 600;
color: var(--text-soft);
}
.multi-toolbar-actions {
display: flex;
align-items: center;
gap: 0.5rem;
}
.pdf-multi-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 1rem;
width: 100%;
margin-top: 0.75rem;
}
.pdf-multi-card {
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md, 10px);
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
overflow: hidden;
position: relative;
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
cursor: grab;
}
.pdf-multi-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
border-color: var(--primary);
}
.pdf-multi-card.is-dragging {
opacity: 0.45;
border: 2px dashed var(--primary);
}
.pdf-multi-card.drag-over-target {
border: 2px solid var(--primary);
background: rgba(59, 130, 246, 0.08);
}
.pdf-card-thumb {
width: 100%;
height: 140px;
background: #ffffff;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.pdf-card-thumb canvas,
.pdf-card-thumb img {
width: 100%;
height: 100%;
object-fit: contain;
}
.pdf-card-order-badge {
position: absolute;
top: 8px;
left: 8px;
background: var(--primary);
color: #ffffff;
font-size: 0.78rem;
font-weight: 700;
width: 24px;
height: 24px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.pdf-card-info {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 0.75rem;
text-align: left;
}
.pdf-card-name {
font-size: 0.88rem;
font-weight: 700;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pdf-card-meta {
font-size: 0.76rem;
color: var(--text-muted);
}
.pdf-card-actions {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.45rem 0.75rem;
background: var(--bg-muted);
border-top: 1px solid var(--border);
}
.pdf-card-actions button {
padding: 0.25rem 0.55rem;
font-size: 0.75rem;
}
/* PDF METADATA EDITOR INSPECTOR LAYOUT FIX */
.v3-pdf-metadata-panel {
width: 100%;
box-sizing: border-box;
margin-top: 0.5rem;
}
.metadata-inspector-card {
display: flex;
flex-direction: column;
gap: 0.85rem;
width: 100%;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md, 12px);
padding: 1.25rem 1.5rem;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
box-sizing: border-box;
}
.metadata-inspector-head {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--border);
padding-bottom: 0.75rem;
margin-bottom: 0.25rem;
}
.metadata-inspector-head strong {
font-size: 0.95rem;
font-weight: 700;
color: var(--text);
}
.metadata-inspector-head span {
font-size: 0.78rem;
font-weight: 600;
color: #059669;
background: rgba(16, 185, 129, 0.1);
border: 1px solid rgba(16, 185, 129, 0.3);
padding: 0.25rem 0.65rem;
border-radius: 999px;
}
.metadata-inspector-head span.is-updated {
color: #2563eb;
background: rgba(59, 130, 246, 0.1);
border-color: rgba(59, 130, 246, 0.35);
}
.metadata-properties-list {
display: flex;
flex-direction: column;
gap: 0.65rem;
width: 100%;
}
.metadata-property-item {
display: grid;
grid-template-columns: minmax(110px, 140px) 1fr;
align-items: baseline;
gap: 1rem;
padding: 0.65rem 0.9rem;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm, 8px);
width: 100%;
box-sizing: border-box;
}
@media (max-width: 600px) {
.metadata-property-item {
grid-template-columns: 1fr;
gap: 0.3rem;
}
}
.metadata-prop-label {
font-size: 0.82rem;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.metadata-prop-value {
font-size: 0.92rem;
font-weight: 600;
color: var(--text);
word-break: break-word;
overflow-wrap: anywhere;
white-space: normal;
line-height: 1.4;
}
/* PDF VISUAL PAGE GRID, REORDERING, & RESULT COVER STYLES */
.pdf-reorder-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: var(--radius-sm, 8px);
margin-top: 0.75rem;
width: 100%;
box-sizing: border-box;
}
.pdf-page-reorder-card,
.pdf-page-select-card {
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md, 10px);
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
overflow: hidden;
position: relative;
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
cursor: grab;
}
.pdf-page-reorder-card:hover,
.pdf-page-select-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
border-color: var(--primary);
}
.pdf-page-select-card {
cursor: pointer;
}
.pdf-page-select-card.is-selected {
border-color: var(--primary);
background: rgba(59, 130, 246, 0.04);
}
.pdf-page-select-card.is-selected .pdf-card-order-badge {
background: var(--primary);
color: #ffffff;
}
.pdf-page-select-card:not(.is-selected) {
opacity: 0.55;
border-color: var(--border);
}
.pdf-page-select-card:not(.is-selected) .pdf-card-order-badge {
background: var(--bg-muted);
color: var(--text-muted);
border: 1px solid var(--border);
}
.result-cover-preview {
width: 100px;
min-width: 100px;
height: 135px;
background: #ffffff;
border: 1px solid var(--border);
border-radius: var(--radius-sm, 6px);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.result-cover-preview canvas {
width: 100%;
height: 100%;
object-fit: contain;
}
.result-stats-wrap {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 1rem;
flex: 1;
width: 100%;
}
.pdf-summary-grid {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.25rem;
width: 100%;
}
/* ADMIN SITE CUSTOMIZATION DASHBOARD & BRANDING PREVIEW CONTROLS */
.admin-site-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 1.5rem;
margin: 1.25rem 0;
width: 100%;
box-sizing: border-box;
}
.admin-site-card {
display: flex;
flex-direction: column;
gap: 1.15rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md, 12px);
padding: 1.5rem;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
box-sizing: border-box;
}
.admin-site-card h2 {
font-size: 1.15rem;
font-weight: 700;
margin: 0;
border-bottom: 1px solid var(--border);
padding-bottom: 0.75rem;
color: var(--text);
}
.admin-branding-item {
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 1rem;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm, 8px);
width: 100%;
box-sizing: border-box;
}
.admin-branding-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: 100%;
}
.admin-branding-head strong {
font-size: 0.92rem;
font-weight: 700;
color: var(--text);
}
.admin-branding-preview {
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
background: #ffffff;
border: 1px solid var(--border);
border-radius: var(--radius-sm, 6px);
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
padding: 4px !important;
box-sizing: border-box !important;
flex-shrink: 0 !important;
}
.admin-branding-preview img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
display: block !important;
margin: 0 !important;
}
/* RESPONSIVE BRAND LOGO LIGHT & DARK THEME SWITCHING */
.brand-logo-light {
display: block !important;
}
.brand-logo-dark {
display: none !important;
}
html[data-theme="dark"] .brand-logo-light {
display: none !important;
}
html[data-theme="dark"] .brand-logo-dark {
display: block !important;
}
/* ADMIN PANEL TYPOGRAPHY & PREVIEW NORMALIZATION (ALL PAGES) */
.admin-topbar h1 {
font-size: clamp(1.4rem, 2.5vw, 1.85rem) !important;
font-weight: 800;
line-height: 1.25;
margin: 0.25rem 0 0 !important;
color: var(--text);
}
.admin-card h2,
.ad-admin-card h2,
.admin-site-card h2 {
font-size: 1.12rem !important;
font-weight: 700;
line-height: 1.35;
margin: 0 0 0.5rem !important;
color: var(--text);
}
.admin-card p,
.ad-admin-card p,
.admin-site-card p {
font-size: 0.92rem;
color: var(--text-soft);
line-height: 1.5;
}
.admin-card textarea,
.ad-admin-card textarea,
.admin-site-card textarea,
.admin-card input,
.ad-admin-card input,
.admin-site-card input,
.admin-card select,
.ad-admin-card select,
.admin-site-card select {
font-size: 0.9rem !important;
padding: 0.6rem 0.8rem !important;
line-height: 1.4 !important;
}
/* ELITE PRO IMAGE CROPPER STUDIO LAYOUT */
.image-crop-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: var(--radius-sm, 8px);
margin-bottom: 0.75rem;
width: 100%;
box-sizing: border-box;
}
.image-crop-toolbar[hidden] {
display: none !important;
}
.crop-toolbar-title {
font-size: 0.85rem;
font-weight: 600;
color: var(--text-soft);
}
.crop-toolbar-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
}
.crop-toolbar-actions button {
padding: 0.35rem 0.75rem;
font-size: 0.78rem;
font-weight: 700;
}
.crop-grid-line {
position: absolute;
background: rgba(255, 255, 255, 0.35);
pointer-events: none;
}
.crop-grid-line.line-h1 {
top: 33.333%;
left: 0;
right: 0;
height: 1px;
}
.crop-grid-line.line-h2 {
top: 66.666%;
left: 0;
right: 0;
height: 1px;
}
.crop-grid-line.line-v1 {
left: 33.333%;
top: 0;
bottom: 0;
width: 1px;
}
.crop-grid-line.line-v2 {
left: 66.666%;
top: 0;
bottom: 0;
width: 1px;
}
.crop-handle {
position: absolute;
width: 12px;
height: 12px;
background: #ffffff;
border: 1px solid #000000;
border-radius: 2px;
pointer-events: auto;
}
.crop-handle.handle-nw {
top: -6px;
left: -6px;
cursor: nwse-resize;
}
.crop-handle.handle-ne {
top: -6px;
right: -6px;
cursor: nesw-resize;
}
.crop-handle.handle-se {
bottom: -6px;
right: -6px;
cursor: nwse-resize;
}
.crop-handle.handle-sw {
bottom: -6px;
left: -6px;
cursor: nesw-resize;
}
.crop-handle.handle-n {
top: -6px;
left: 50%;
transform: translateX(-50%);
cursor: ns-resize;
}
.crop-handle.handle-s {
bottom: -6px;
left: 50%;
transform: translateX(-50%);
cursor: ns-resize;
}
.crop-handle.handle-e {
top: 50%;
right: -6px;
transform: translateY(-50%);
cursor: ew-resize;
}
.crop-handle.handle-w {
top: 50%;
left: -6px;
transform: translateY(-50%);
cursor: ew-resize;
}
/* ============================================================
/* ============================================================
Utility tool workspaces (QR/barcode, converters, calculators,
generators). Single clean panels that match the site design
system: consistent cards, spacing, focus states, and mobile
stacking. Scoped with .util- prefixes.
============================================================ */
.util-workspace-shell {
display: grid;
gap: 18px;
}
/* ---------- Shared panel card ---------- */
.util-panel {
min-width: 0;
display: flex;
flex-direction: column;
gap: 16px;
padding: 22px;
border: 1px solid var(--v3-border, #d9dce6);
border-radius: 18px;
background:
linear-gradient(180deg, color-mix(in srgb, var(--surface, #fff) 97%, var(--primary, #e85f22) 3%), var(--surface, #fff));
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}
/* ---------- Local processing chip ---------- */
.util-local-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 11px;
border-radius: 999px;
background: var(--primary-soft, #ffe9db);
color: var(--primary, #e85f22);
font-size: .76rem;
font-weight: 800;
letter-spacing: .01em;
white-space: nowrap;
}
/* ---------- Layouts ---------- */
.util-qr-layout,
.util-conv-layout,
.util-calc-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 20px;
align-items: start;
}
/* ---------- Form fields ---------- */
.util-field {
display: grid;
gap: 8px;
min-width: 0;
}
/* ---------- Helper text ---------- */
.util-hint {
display: flex;
align-items: flex-start;
gap: 7px;
margin: 0;
padding: 9px 12px;
border-radius: 10px;
background: var(--v3-muted, #f6f2ea);
color: var(--text-soft, #5e5646);
font-size: .82rem;
line-height: 1.5;
}
/* ---------- Buttons / actions ---------- */
.util-actions {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 4px;
}
/* ---------- Preview box (QR / barcode) ---------- */
.util-preview-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 320px;
padding: 20px;
border: 1px dashed var(--border-strong, #d8cbac);
border-radius: 16px;
background:
radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--primary, #e85f22) 7%, transparent), transparent 62%),
var(--v3-muted, #f6f2ea);
}
/* ---------- Drop zone (QR reader) ---------- */
.util-drop-zone {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 26px 18px;
border: 1.5px dashed var(--border-strong, #d8cbac);
border-radius: 16px;
background: var(--v3-muted, #f6f2ea);
text-align: center;
cursor: pointer;
transition: border-color .15s ease, background .15s ease;
}
/* ---------- QR reader camera / image ---------- */
.util-camera-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
@keyframes util-scan-pulse {
0%, 100% { opacity: .55; }
50% { opacity: 1; }
}
/* ---------- Converter result ---------- */
.util-converter-output {
display: flex;
align-items: center;
min-height: 58px;
padding: 14px 16px;
border: 1px solid color-mix(in srgb, var(--primary, #e85f22) 35%, var(--border-strong, #d8cbac));
border-radius: 14px;
background:
linear-gradient(135deg, color-mix(in srgb, var(--primary, #e85f22) 9%, transparent), transparent 65%),
var(--surface, #fff);
font-size: 1.4rem;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--primary, #e85f22);
overflow-wrap: anywhere;
}
/* ---------- Calculator result ---------- */
.util-calc-result {
display: grid;
gap: 10px;
align-content: start;
}
/* ---------- GPA / duration rows ---------- */
.util-gpa-rows,
.util-td-rows {
display: grid;
gap: 10px;
}
/* ---------- Hidden attribute must win ---------- */
.util-workspace-shell [hidden],
.util-panel [hidden],
.util-qr-layout [hidden],
.util-conv-layout [hidden],
.util-calc-layout [hidden],
.util-gen-layout [hidden] {
display: none !important;
}
/* ---------- Mobile ---------- */
@media (max-width: 960px) {
.util-gen-layout {
grid-template-columns: 1fr;
}
}
@media (max-width: 860px) {
.util-qr-layout,
.util-conv-layout,
.util-calc-layout {
grid-template-columns: 1fr;
}
.util-panel {
padding: 18px;
}
.util-preview-box {
min-height: 240px;
}
.util-gpa-row {
grid-template-columns: 1fr;
}
}
/* ============================================================
Media tool workspaces (image + PDF) - polished card design
consistent with the utility tool workspaces. Also fixes the
legacy undefined variables used by older image/PDF blocks.
============================================================ */
:root {
/* Legacy aliases used across image/PDF/admin components. These were
previously undefined, silently breaking the styles that used them. */
--bg-muted: var(--surface-soft, #f1ece1);
--text-muted: var(--text-soft, #5e5646);
--radius-md: var(--radius, 16px);
}
/* ---------- Two-column media workspace layout ---------- */
.util-media-workspace {
display: grid;
grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
gap: 20px;
align-items: start;
}
/* ---------- Drop zone refinement ---------- */
.v3-drop-card {
transition: border-color .15s ease, background .15s ease;
}
/* ---------- Upload meta bars ---------- */
.v3-image-meta,
.v3-pdf-meta {
padding: 10px 14px;
border: 1px solid var(--v3-border, #d9dce6);
border-radius: 12px;
background: var(--v3-muted, #f6f2ea);
font-size: .82rem;
font-weight: 600;
color: var(--text-soft, #5e5646);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
text-align: left;
}
/* ---------- Viewports ---------- */
.v3-image-viewport,
.v3-pdf-viewport {
min-height: 300px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
background:
radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--primary, #e85f22) 6%, transparent), transparent 62%),
var(--v3-muted, #f6f2ea);
border: 1px dashed var(--border-strong, #d8cbac);
border-radius: 16px;
padding: 20px;
overflow: auto;
position: relative;
box-sizing: border-box;
}
/* ---------- Progress / warning banners ---------- */
.v3-processing-banner,
.v3-pdf-progress-banner,
.v3-pdf-warning-banner {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 14px;
border-radius: 12px;
font-size: .86rem;
font-weight: 700;
width: 100%;
box-sizing: border-box;
}
.processing-spinner {
width: 20px;
height: 20px;
min-width: 20px;
border: 3px solid color-mix(in srgb, var(--primary, #e85f22) 25%, transparent);
border-top-color: var(--primary, #e85f22);
border-radius: 50%;
animation: v3-spin .75s linear infinite;
}
/* ---------- Rotator quick bar ---------- */
.v3-image-quick-bar {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 10px;
border: 1px solid var(--v3-border, #d9dce6);
border-radius: 12px;
background: var(--v3-muted, #f6f2ea);
}
/* ---------- Crop toolbar ---------- */
.image-crop-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
padding: 10px 12px;
background: var(--v3-muted, #f6f2ea);
border: 1px solid var(--v3-border, #d9dce6);
border-radius: 12px;
width: 100%;
box-sizing: border-box;
}
.crop-toolbar-title {
font-size: .82rem;
font-weight: 700;
color: var(--text-soft, #5e5646);
}
.crop-toolbar-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.crop-toolbar-actions .util-quick-button {
min-height: 32px;
padding: 4px 11px;
font-size: .76rem;
}
/* ---------- Before / after compare ---------- */
.v3-image-compare {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
width: 100%;
}
@media (max-width: 768px) {
.v3-image-compare { grid-template-columns: 1fr; }
}
.compare-side {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
}
.compare-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 800;
font-size: .82rem;
color: var(--text, #201a12);
}
.compare-label small {
padding: 2px 8px;
border-radius: 999px;
background: var(--primary-soft, #ffe9db);
color: var(--primary, #e85f22);
font-weight: 800;
font-size: .74rem;
}
.compare-side img {
max-width: 100%;
height: auto;
border-radius: 12px;
border: 1px solid var(--border-strong, #d8cbac);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
/* ---------- Favicon grid ---------- */
.v3-favicon-preview-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 12px;
width: 100%;
}
.favicon-item-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px;
background: var(--surface, #fff);
border: 1px solid var(--v3-border, #d9dce6);
border-radius: 14px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}
.favicon-item-card img {
max-width: 64px;
max-height: 64px;
}
.favicon-item-card span {
font-size: .78rem;
font-weight: 700;
color: var(--text-soft, #5e5646);
text-align: center;
}
/* ---------- Color picker ---------- */
.v3-color-picker-panel {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
.color-picker-current {
display: flex;
align-items: center;
gap: 16px;
padding: 14px;
background: var(--surface, #fff);
border: 1px solid var(--v3-border, #d9dce6);
border-radius: 14px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}
.color-swatch-box {
width: 64px;
height: 64px;
border-radius: 12px;
border: 2px solid var(--border-strong, #d8cbac);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
flex: none;
}
.color-values-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.color-val-row {
display: flex;
align-items: center;
gap: 8px;
font-size: .88rem;
}
.color-val-row span {
font-weight: 700;
width: 42px;
color: var(--text-soft, #5e5646);
}
.color-val-row code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
background: var(--v3-muted, #f6f2ea);
border: 1px solid var(--v3-border, #d9dce6);
padding: 3px 8px;
border-radius: 8px;
color: var(--text, #201a12);
}
.color-picker-history {
display: flex;
flex-direction: column;
gap: 8px;
font-size: .84rem;
font-weight: 700;
color: var(--text-soft, #5e5646);
}
.color-palette-swatches {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
min-height: 36px;
}
.palette-color-chip {
width: 32px;
height: 32px;
border-radius: 8px;
border: 1px solid var(--border-strong, #d8cbac);
cursor: pointer;
transition: transform .15s ease;
}
.palette-color-chip:hover { transform: scale(1.12); }
.empty-swatches {
font-weight: 600;
color: var(--text-faint, #8a8069);
}
/* ---------- PDF result card / summary ---------- */
.v3-pdf-result-card {
width: 100%;
box-sizing: border-box;
padding: 14px;
background: var(--surface, #fff);
border: 1px solid var(--v3-border, #d9dce6);
border-radius: 14px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}
.pdf-summary-grid {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
width: 100%;
}
.summary-stat {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 14px;
background: var(--v3-muted, #f6f2ea);
border: 1px solid var(--v3-border, #d9dce6);
border-radius: 12px;
min-width: 130px;
}
.summary-stat span {
font-size: .74rem;
color: var(--text-soft, #5e5646);
text-transform: uppercase;
font-weight: 800;
letter-spacing: .03em;
}
.summary-stat strong {
font-size: 1.05rem;
color: var(--text, #201a12);
font-weight: 800;
}
/* ---------- PDF pages grid ---------- */
.v3-pdf-pages-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 12px;
width: 100%;
}
.pdf-page-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 12px;
background: var(--surface, #fff);
border: 1px solid var(--v3-border, #d9dce6);
border-radius: 14px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}
.pdf-page-card img {
max-width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.pdf-page-card span {
font-size: .8rem;
font-weight: 700;
color: var(--text-soft, #5e5646);
}
/* ---------- PDF file list (multi-file tools) ---------- */
.v3-pdf-file-list {
display: grid;
gap: 8px;
width: 100%;
}
.pdf-file-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 12px;
background: var(--surface, #fff);
border: 1px solid var(--v3-border, #d9dce6);
border-radius: 12px;
}
.pdf-file-item div {
display: flex;
align-items: center;
gap: 10px;
font-size: .88rem;
font-weight: 700;
color: var(--text, #201a12);
min-width: 0;
}
.pdf-file-item div svg {
flex: none;
color: var(--primary, #e85f22);
}
.pdf-file-item span {
color: var(--text-soft, #5e5646);
font-size: .78rem;
font-weight: 600;
white-space: nowrap;
}
.pdf-file-item.is-dragging {
border-color: var(--primary, #e85f22);
background: var(--primary-soft, #ffe9db);
}
/* ---------- PDF cover card ---------- */
.pdf-cover-card {
display: flex;
align-items: center;
gap: 16px;
padding: 14px;
background: var(--surface, #fff);
border: 1px solid var(--v3-border, #d9dce6);
border-radius: 14px;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
width: 100%;
box-sizing: border-box;
transition: transform .2s ease, box-shadow .2s ease;
}
.pdf-cover-card:hover {
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
transform: translateY(-1px);
}
.pdf-cover-thumb {
width: 84px;
min-width: 84px;
height: 112px;
background: #ffffff;
border: 1px solid var(--border-strong, #d8cbac);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.pdf-cover-thumb canvas {
width: 100%;
height: 100%;
object-fit: contain;
}
.pdf-cover-details {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
flex: 1;
}
.pdf-cover-details strong {
font-size: .95rem;
color: var(--text, #201a12);
}
.pdf-cover-details span {
font-size: .8rem;
color: var(--text-soft, #5e5646);
}
/* ---------- PDF metadata editor ---------- */
.v3-pdf-metadata-panel {
width: 100%;
box-sizing: border-box;
}
.metadata-fields-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
width: 100%;
}
.metadata-field-card {
display: flex;
flex-direction: column;
gap: 6px;
padding: 12px 14px;
background: var(--surface, #fff);
border: 1px solid var(--v3-border, #d9dce6);
border-radius: 12px;
}
.metadata-field-card label {
font-size: .74rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .03em;
color: var(--text-soft, #5e5646);
}
.metadata-field-card input {
width: 100%;
min-height: 40px;
border: 1px solid var(--border-strong, #d8cbac);
border-radius: 10px;
background: var(--surface, #fff);
color: var(--text, #201a12);
padding: 8px 12px;
font: inherit;
font-size: .9rem;
transition: border-color .15s ease, box-shadow .15s ease;
}
.metadata-field-card input:focus {
outline: none;
border-color: var(--primary, #e85f22);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #e85f22) 18%, transparent);
}
/* ---------- Reorder / select cards ---------- */
.pdf-multi-card,
.pdf-page-select-card,
.pdf-page-reorder-card {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: var(--surface, #fff);
border: 1px solid var(--v3-border, #d9dce6);
border-radius: 12px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}
.pdf-card-canvas,
.pdf-cover-canvas {
max-width: 64px;
max-height: 80px;
border-radius: 6px;
border: 1px solid var(--v3-border, #d9dce6);
background: #ffffff;
}
.pdf-card-actions {
margin-left: auto;
display: flex;
gap: 6px;
}
/* ---------- Mobile ---------- */
@media (max-width: 960px) {
.util-media-workspace {
grid-template-columns: 1fr;
}
}
/* Hidden attribute must win inside media workspaces */
.util-media-workspace [hidden],
.util-media-column [hidden],
.v3-image-viewport [hidden],
.v3-pdf-viewport [hidden] {
display: none !important;
}
/* ---------- PDF multi-file card details ---------- */
.pdf-card-meta {
display: flex;
align-items: center;
gap: 8px;
font-size: .78rem;
font-weight: 600;
color: var(--text-soft, #5e5646);
}
.pdf-card-meta .pdf-badge {
padding: 2px 8px;
border-radius: 999px;
background: var(--primary-soft, #ffe9db);
color: var(--primary, #e85f22);
font-weight: 800;
}
/* ============================================================
Header tools mega menu + mobile nav accordion
============================================================ */
.nav-tools {
position: relative;
}
.nav-link-button {
display: inline-flex;
align-items: center;
gap: 6px;
background: none;
border: 0;
cursor: pointer;
font: inherit;
color: var(--text-soft);
font-size: 0.92rem;
font-weight: 650;
padding: 9px 12px;
border-radius: 8px;
transition: color 0.18s ease, background 0.18s ease;
}
.nav-link-button:hover,
.nav-link-button:focus-visible {
color: var(--text);
background: var(--surface-soft);
}
.nav-link-button[aria-expanded="true"] {
color: var(--primary);
}
.nav-link-button svg {
transition: transform 0.2s ease;
}
.nav-link-button[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.mega-menu {
position: absolute;
top: calc(100% + 12px);
left: 50%;
transform: translateX(-50%);
width: min(780px, calc(100vw - 32px));
border: 1px solid var(--border);
border-radius: 18px;
background: var(--surface);
box-shadow: 0 24px 60px -18px rgba(15, 10, 4, 0.3);
z-index: 210;
overflow: hidden;
}
.mega-menu[hidden] {
display: none;
}
.mega-menu-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) 200px;
}
.mega-menu-categories {
padding: 18px 16px 16px;
}
.mega-menu-eyebrow {
margin: 0 0 10px;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-faint);
}
.mega-menu-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4px;
}
.mega-menu-link {
display: flex;
align-items: center;
gap: 11px;
padding: 8px 10px;
border-radius: 12px;
color: var(--text);
transition: background 0.15s ease;
}
.mega-menu-link:hover,
.mega-menu-link:focus-visible {
background: var(--surface-soft);
}
.mega-menu-icon {
width: 38px;
height: 38px;
flex: none;
display: grid;
place-items: center;
border-radius: 11px;
}
.mega-menu-text {
display: grid;
gap: 1px;
min-width: 0;
}
.mega-menu-text strong {
font-size: 0.88rem;
font-weight: 750;
color: var(--text);
}
.mega-menu-text small {
font-size: 0.74rem;
font-weight: 600;
color: var(--text-faint);
}
.mega-menu-aside {
display: flex;
flex-direction: column;
gap: 6px;
padding: 18px 14px;
border-left: 1px solid var(--border);
background: var(--surface-soft);
}
.mega-menu-cta {
display: flex;
align-items: center;
gap: 9px;
padding: 12px 13px;
border-radius: 12px;
background: var(--primary);
color: #fff;
font-weight: 750;
font-size: 0.88rem;
box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--primary) 55%, transparent);
transition: background 0.15s ease, transform 0.15s ease;
}
.mega-menu-cta:hover {
background: var(--primary-hover);
transform: translateY(-1px);
color: #fff;
}
.mega-menu-cta svg:last-child {
margin-left: auto;
}
.mega-menu-aside-link {
display: flex;
align-items: center;
gap: 9px;
padding: 9px 11px;
border-radius: 10px;
color: var(--text-soft);
font-size: 0.86rem;
font-weight: 650;
transition: color 0.15s ease, background 0.15s ease;
}
.mega-menu-aside-link:hover {
background: var(--surface);
color: var(--text);
}
/* Mobile nav: tools accordion */
.mobile-nav-group summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
color: var(--text-soft);
font-weight: 650;
font-size: 0.92rem;
border-radius: 8px;
transition: color 0.18s ease, background 0.18s ease;
}
.mobile-nav-group summary::-webkit-details-marker {
display: none;
}
.mobile-nav-group summary:hover {
color: var(--text);
background: var(--surface-soft);
}
.mobile-nav-group summary svg:last-child {
margin-left: auto;
transition: transform 0.2s ease;
}
.mobile-nav-group[open] summary svg:last-child {
transform: rotate(180deg);
}
.mobile-nav-categories {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4px 8px;
padding: 4px 12px 12px 16px;
}
.mobile-nav-categories a {
font-size: 0.86rem;
padding: 8px 10px;
}
@media (max-width: 520px) {
.mega-menu-inner {
grid-template-columns: 1fr;
}
.mega-menu-aside {
border-left: 0;
border-top: 1px solid var(--border);
flex-direction: row;
flex-wrap: wrap;
padding: 12px 14px;
}
}
/* ============================================================
Footer upgrade: contact links, category mini-grid, richer columns
============================================================ */
@media (min-width: 1101px) {
.footer-grid {
grid-template-columns: minmax(230px, 1.35fr) repeat(4, minmax(140px, 1fr));
}
}
.footer-contact-links {
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
margin-top: 18px;
font-size: 0.8rem;
}
.footer-contact-links a {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--text-soft);
font-weight: 650;
transition: color 0.15s ease;
}
.footer-contact-links a:hover {
color: var(--primary);
}
.footer-contact-links svg {
color: var(--primary);
}
.footer-category-links {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 14px;
}
.footer-category-links a {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 0.84rem;
padding: 2px 0;
}
.footer-category-links a svg {
flex: none;
color: var(--text-faint);
transition: color 0.15s ease;
}
.footer-category-links a:hover svg {
color: var(--primary);
}
.footer-category-links .footer-all-tools {
font-weight: 750;
color: var(--primary);
}
@media (max-width: 1100px) and (min-width: 681px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
}
.footer-brand {
grid-column: 1 / -1;
}
}
@media (max-width: 680px) {
.footer-category-links {
grid-template-columns: 1fr 1fr;
}
}
/* ============================================================
Homepage v3: percentage calculator demo + mobile hero fixes
============================================================ */
.home-v3 .forge-calc-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
padding: 0 2.2rem;
}
.home-v3 .forge-calc-fields {
display: flex;
align-items: flex-end;
gap: .8rem;
padding: 1.2rem;
border: 1px solid var(--home-line);
border-radius: var(--home-r-md);
background: #0d0b09;
}
.home-v3 .forge-calc-field {
display: grid;
gap: .45rem;
flex: 1;
min-width: 0;
}
.home-v3 .forge-calc-field span {
font-family: var(--home-mono);
font-size: .68rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--home-faint);
}
.home-v3 .forge-calc-field input {
width: 100%;
min-width: 0;
border: 1px solid var(--home-line-strong);
border-radius: 12px;
background: #12100c;
color: #f4efe4;
font-family: var(--home-mono);
font-size: 1.25rem;
padding: .75rem .9rem;
outline: 0;
transition: border-color .25s, box-shadow .25s;
}
.home-v3 .forge-calc-field input:focus {
border-color: color-mix(in srgb, var(--home-ember) 55%, var(--home-line));
box-shadow: 0 0 0 4px color-mix(in srgb, var(--home-ember) 12%, transparent);
}
.home-v3 .forge-calc-of {
font-family: var(--home-serif);
font-style: italic;
font-size: 1.05rem;
color: var(--home-faint);
padding-bottom: .9rem;
flex: none;
}
.home-v3 .forge-calc-result {
display: flex;
flex-direction: column;
justify-content: center;
gap: .35rem;
padding: 1.4rem 1.5rem;
border: 1px solid color-mix(in srgb, var(--home-ember) 45%, var(--home-line));
border-radius: var(--home-r-md);
background:
radial-gradient(120% 110% at 12% 8%, color-mix(in srgb, var(--home-ember) 17%, transparent), transparent 58%),
linear-gradient(150deg, color-mix(in srgb, var(--home-amber) 9%, transparent), transparent 62%);
min-height: 128px;
}
.home-v3 .forge-calc-result > span {
font-family: var(--home-mono);
font-size: .68rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--home-faint);
}
.home-v3 .forge-calc-result strong {
font-family: var(--home-display);
font-size: clamp(2.1rem, 4vw, 2.9rem);
font-weight: 700;
letter-spacing: -.03em;
line-height: 1.05;
/* Mode-aware gradient: dark text in light mode, light text in dark
mode, always ending on the ember brand accent for readability. */
background: linear-gradient(94deg, var(--home-text) 30%, var(--home-ember));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
overflow-wrap: anywhere;
}
.home-v3 .forge-calc-result small {
font-family: var(--home-mono);
font-size: .78rem;
color: var(--home-muted);
overflow-wrap: anywhere;
}
/* Mobile hero fixes: keep the search button inline with the input and the
action buttons at natural width instead of full-bleed rows. */
@media (max-width: 700px) {
.home-v3 .hero-search-field {
display: flex;
grid-template-columns: none;
padding: .5rem .5rem .5rem 1rem;
}
.home-v3 .hero-search-field .button {
grid-column: auto;
width: auto;
flex: 0 0 auto;
white-space: nowrap;
padding: .6rem .95rem;
}
.home-v3 .hero-actions .button {
width: auto;
}
}
@media (max-width: 640px) {
.home-v3 .forge-calc-grid {
grid-template-columns: 1fr;
padding-inline: 1.3rem;
}
.home-v3 .forge-calc-fields {
flex-wrap: wrap;
}
.home-v3 .forge-calc-of {
display: none;
}
.home-v3 .forge-calc-field {
flex: 1 1 130px;
}
}
/* ============================================================
PDF workspace: full-width single column for large documents.
The upload row stays compact; page grids expand to the full
viewport so 100-page documents render as a dense grid instead
of a narrow one-column list.
============================================================ */
.util-pdf-workspace {
grid-template-columns: 1fr;
}
/* The multi-file / page grids get the full workspace width, so
large page sets render in several columns with bigger thumbs. */
.util-pdf-workspace .v3-pdf-file-list {
margin-top: 4px;
}
/* Toolbar rows above the grids span the full width */
.util-pdf-workspace .pdf-multi-toolbar,
.util-pdf-workspace .pdf-reorder-toolbar {
padding: 12px 14px;
border: 1px solid var(--v3-border, #d9dce6);
border-radius: 13px;
background: var(--v3-muted, #f6f2ea);
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
@media (max-width: 860px) {
.util-pdf-upload-head .v3-drop-card {
min-height: 150px;
}
}
/* ============================================================
Focused image branch tools: pair badge, base64 panels, and
mobile-friendly crop handles.
============================================================ */
.util-pair-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 11px;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--primary, #e85f22) 40%, var(--v3-border, #d9dce6));
background: var(--primary-soft, #ffe9db);
color: var(--primary, #e85f22);
font-size: .72rem;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
white-space: nowrap;
}
/* Larger crop handles on touch devices so resizing works on mobile */
@media (pointer: coarse) {
.v3-crop-handle,
.crop-handle {
width: 26px !important;
height: 26px !important;
min-width: 26px;
min-height: 26px;
border-radius: 8px !important;
border: 2px solid #ffffff;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
.crop-handle.handle-nw,
.v3-crop-handle.handle-nw { top: -13px !important; left: -13px !important; }
.crop-handle.handle-ne,
.v3-crop-handle.handle-ne { top: -13px !important; right: -13px !important; }
.crop-handle.handle-sw,
.v3-crop-handle.handle-sw { bottom: -13px !important; left: -13px !important; }
.crop-handle.handle-se,
.v3-crop-handle.handle-se { bottom: -13px !important; right: -13px !important; }
.crop-handle.handle-n,
.v3-crop-handle.handle-n { top: -13px !important; left: 50% !important; transform: translateX(-50%); }
.crop-handle.handle-s,
.v3-crop-handle.handle-s { bottom: -13px !important; left: 50% !important; transform: translateX(-50%); }
.crop-handle.handle-e,
.v3-crop-handle.handle-e { right: -13px !important; top: 50% !important; transform: translateY(-50%); }
.crop-handle.handle-w,
.v3-crop-handle.handle-w { left: -13px !important; top: 50% !important; transform: translateY(-50%); }
}
/* ICO preview grid heading */
.v3-ico-preview-head {
display: grid;
gap: 8px;
width: 100%;
margin-bottom: 2px;
}
/* Output-ready indicator: the small meta text beside the download button
turns deep green with a status dot when a result is ready, so users see
the success exactly where they are looking. */
.v3-image-output-meta.is-ready,
.v3-pdf-output-meta.is-ready {
color: var(--success, #0a7a52);
font-weight: 800;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 11px;
border-radius: 999px;
background: color-mix(in srgb, var(--success, #0a7a52) 12%, var(--surface, #fff));
border: 1px solid color-mix(in srgb, var(--success, #0a7a52) 35%, transparent);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
/* ============================================================
Homepage trust polish: value cards, guide cards, footer, mega menu
============================================================ */
/* ---- Value cards: real brand look ---- */
.home-v3 .value-card {
display: flex;
gap: 1.05rem;
padding: 1.6rem 1.5rem;
border: 1px solid var(--home-line);
border-radius: 18px;
background:
radial-gradient(140% 120% at 0% 0%, color-mix(in srgb, var(--home-ember) 7%, transparent), transparent 55%),
var(--home-panel);
position: relative;
overflow: hidden;
transition: transform .3s var(--home-ease), border-color .3s, box-shadow .3s;
}
.home-v3 .value-card::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--home-ember), var(--home-amber));
opacity: 0;
transition: opacity .3s ease;
}
.home-v3 .value-card:hover {
transform: translateY(-4px);
border-color: color-mix(in srgb, var(--home-ember) 45%, var(--home-line));
box-shadow: 0 18px 44px -18px color-mix(in srgb, var(--home-ember) 30%, transparent);
}
.home-v3 .value-card:hover::after { opacity: 1; }
.home-v3 .value-icon-ring {
width: 58px;
height: 58px;
flex: none;
border-radius: 16px;
display: grid;
place-items: center;
background:
radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--home-ember) 22%, transparent), transparent 65%),
var(--home-ember-soft);
border: 1px solid color-mix(in srgb, var(--home-ember) 32%, transparent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.home-v3 .value-icon { width: auto; height: auto; background: none; border: 0; color: var(--home-ember); }
.home-v3 .value-card-body { display: flex; flex-direction: column; min-width: 0; }
.home-v3 .value-card h3 {
font-family: var(--home-display);
font-size: 1.06rem;
margin: 0 0 .4rem;
letter-spacing: -.01em;
}
.home-v3 .value-card p { margin: 0 0 .85rem; font-size: .87rem; color: var(--home-muted); line-height: 1.6; }
.home-v3 .value-card-meta {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 5px;
align-self: flex-start;
font-size: .72rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--home-ember);
background: color-mix(in srgb, var(--home-ember) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--home-ember) 22%, transparent);
padding: 4px 10px;
border-radius: 999px;
}
/* ---- Guide cards: richer, professional ---- */
.home-v3 .guide-card {
position: relative;
padding: 1.8rem 1.7rem;
border-radius: 18px;
background:
linear-gradient(180deg, color-mix(in srgb, var(--home-text) 1.5%, transparent), transparent 45%),
var(--home-panel);
transition: transform .3s var(--home-ease), border-color .3s, box-shadow .3s;
}
.home-v3 .guide-card:hover {
transform: translateY(-5px);
border-color: color-mix(in srgb, var(--home-ember) 45%, var(--home-line));
box-shadow: 0 20px 48px -20px color-mix(in srgb, var(--home-ember) 28%, transparent);
}
.home-v3 .guide-tag {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: .66rem;
letter-spacing: .14em;
padding: .32rem .8rem;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--home-ember) 30%, transparent);
background: color-mix(in srgb, var(--home-ember) 9%, transparent);
color: var(--home-ember);
margin-bottom: 1.1rem;
}
.home-v3 .guide-card h3 {
font-size: 1.18rem;
line-height: 1.3;
margin: 0 0 .55rem;
letter-spacing: -.015em;
}
.home-v3 .guide-card p {
font-size: .9rem;
line-height: 1.65;
margin: 0 0 1.4rem;
}
.home-v3 .guide-card strong {
margin-top: auto;
align-self: flex-start;
font-size: .88rem;
font-weight: 700;
color: var(--home-ember);
padding: 8px 14px;
border: 1px solid color-mix(in srgb, var(--home-ember) 30%, transparent);
border-radius: 10px;
background: color-mix(in srgb, var(--home-ember) 8%, transparent);
transition: gap .25s var(--home-ease), background .25s, border-color .25s;
}
.home-v3 .guide-card:hover strong {
gap: .7rem;
background: color-mix(in srgb, var(--home-ember) 14%, transparent);
border-color: color-mix(in srgb, var(--home-ember) 45%, transparent);
}
/* ---- Footer: trim categories, remove view-all ---- */
.footer-category-links {
grid-template-columns: 1fr;
gap: 7px;
}
.footer-category-links a {
padding: 6px 10px;
border-radius: 9px;
transition: background .15s ease, color .15s ease;
}
.footer-category-links a:hover {
background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.footer-category-links .footer-all-tools { display: none; }
/* ---- Mega menu: hover delay so it stays open long enough to click ---- */
.nav-tools { --mega-delay: 0ms; }
.toolsMenuOpen .mega-menu { display: block; }
@media (prefers-reduced-motion: reduce) {
.nav-tools .mega-menu { transition: none; }
}
/* ============================================================
Phase 1 SEO content: guide and solution long-form upgrades
============================================================ */
/* In-content links inside guide and solution bodies */
.guide-content-v2 p a,
.guide-content-v2 li a,
.guide-content-v2 .guide-note p a,
.guide-content-v2 .faq-answer p a,
.guide-summary-copy p a,
.guide-summary-points li a,
.guide-hero-intro a,
.solution-page-v2 p a,
.solution-page-v2 li a,
.solution-page-v2 .guide-note p a,
.solution-page-v2 .faq-answer p a,
.solution-page-v2 .content-cta-card p a,
.solution-page-v2 .option-card p a {
color: var(--primary);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: color-mix(in srgb, var(--primary) 45%, transparent);
font-weight: 600;
transition: color .15s ease, text-decoration-color .15s ease;
}
.guide-content-v2 p a:hover,
.guide-content-v2 li a:hover,
.guide-content-v2 .guide-note p a:hover,
.guide-content-v2 .faq-answer p a:hover,
.guide-summary-copy p a:hover,
.guide-summary-points li a:hover,
.guide-hero-intro a:hover,
.solution-page-v2 p a:hover,
.solution-page-v2 li a:hover,
.solution-page-v2 .guide-note p a:hover,
.solution-page-v2 .faq-answer p a:hover,
.solution-page-v2 .content-cta-card p a:hover,
.solution-page-v2 .option-card p a:hover {
color: var(--primary-hover);
text-decoration-color: var(--primary);
}
/* FAQ accordion */
.faq-list { display: grid; gap: .75rem; margin-top: 1.5rem; }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.faq-item summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .75rem; padding: 1rem 1.15rem; font-weight: 700; font-size: 1rem; color: var(--text); transition: color .15s ease; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; margin-left: auto; flex: 0 0 auto; font-weight: 600; color: var(--text-faint); font-size: 1.3rem; line-height: 1; transition: transform .18s ease, color .15s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); color: var(--primary); }
.faq-item[open] summary { color: var(--primary); }
.faq-answer { padding: 0 1.15rem 1.1rem; color: var(--text-soft); font-size: .95rem; line-height: 1.7; }
.faq-answer p { margin: 0; }
/* Guide privacy panel spacing */
.guide-privacy-section .privacy-panel { margin-top: .25rem; }
.guide-faq-section .faq-list { margin-top: 1.1rem; }
/* Solution options grid */
.solution-option-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 1.75rem; }
.option-card { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); padding: 1.35rem 1.35rem 1.2rem; display: flex; flex-direction: column; gap: .55rem; box-shadow: var(--shadow-sm); }
.option-card-icon { display: inline-flex; width: 2.6rem; height: 2.6rem; border-radius: var(--radius-sm); align-items: center; justify-content: center; background: var(--primary-soft); color: var(--primary); margin-bottom: .35rem; }
.option-card h3 { margin: 0; font-size: 1.05rem; }
.option-card p { margin: 0; color: var(--text-soft); font-size: .93rem; line-height: 1.65; }
.option-card small { display: flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: .6rem; color: var(--text-faint); font-size: .8rem; }
.option-card small .icon { color: var(--amber); flex: 0 0 auto; }
/* Mid-article CTA card */
.content-cta-card { display: flex; gap: 1.4rem; align-items: flex-start; border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--border)); border-radius: var(--radius-lg); padding: 2rem 2.1rem; background: linear-gradient(140deg, var(--primary-soft), var(--surface) 62%); }
.content-cta-icon { flex: 0 0 auto; display: inline-flex; width: 3.1rem; height: 3.1rem; border-radius: var(--radius-md); align-items: center; justify-content: center; background: var(--primary); color: #fff; box-shadow: var(--shadow-ember); }
.content-cta-card h2 { margin: .2rem 0 .5rem; font-size: 1.4rem; }
.content-cta-card p { margin: 0 0 1.1rem; color: var(--text-soft); max-width: 46rem; }
.content-cta-card .section-kicker { margin-bottom: .2rem; }
/* CTA block number slot carries an icon instead of a number */
.solution-cta-block .guide-section-number { color: var(--primary); background: var(--primary-soft); }
/* Related tool card in guide footer */
.guide-card-tool > span { color: var(--primary); background: var(--primary-soft); border-radius: 12px; }
@media (max-width: 900px) {
.solution-option-grid { grid-template-columns: 1fr; }
.content-cta-card { flex-direction: column; }
}
/* Related solution card in guide footer */
.guide-card-solution > span { color: var(--emerald); background: var(--emerald-soft); border-radius: 12px; }
/* Related category chips (category hubs) */
.related-category-links {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.related-category-links a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface);
color: var(--text);
font-size: .9rem;
font-weight: 600;
text-decoration: none;
transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.related-category-links a:hover {
border-color: var(--primary);
color: var(--primary);
background: var(--primary-soft);
}
/* Batch "view more" controls (guides and solutions directories) */
.batch-more-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin-top: 28px;
}
.batch-more-count {
font-size: .85rem;
color: var(--text-faint);
margin: 0;
}
/* Category hub hero: the breadcrumb is a full-width row inside the hero grid,
so it never squeezes the title or stat panel into a single column. */
.category-hero-v3 .container > .breadcrumbs {
grid-column: 1 / -1;
align-self: start;
margin-bottom: 18px;
}
/* The hidden attribute must win over the author display rules on cards, or
batch "view more" controls would leave every card visible. */
.guide-card[hidden],
.guide-card-v2[hidden],
.featured-guide-card[hidden],
.solution-card[hidden] {
display: none;
}
/* ==========================================================================
Related content and card presentation fixes
========================================================================== */
/* Related card grids inside the narrow guide/solution reading column: let
cards wrap to a comfortable minimum width instead of squeezing into
slim columns next to the table of contents. */
.guide-content .feature-grid,
.guide-content .guide-card-grid,
.guide-content .solution-card-grid {
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
/* Feature cards stretch to fill their cell with the link aligned at the
bottom, so related strips look even and professional. */
.feature-card {
display: flex;
flex-direction: column;
}
.feature-card p {
flex: 1;
}
/* Category hubs: keep breathing room between the guides grid and the
solutions grid so the two sections do not visually merge. */
.guide-card-grid + .solution-card-grid {
margin-top: 28px;
}
/* Equal-height, controlled cards: clamp long intros to three lines so short
and long cards line up without large whitespace gaps. */
.solution-card p,
.guide-card p,
.feature-card p {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Tools directory: the empty state stays hidden until a search or filter
actually yields no results. The author display rule overrode the hidden
attribute, which made the message show on first load. */
.tools-directory-v3 .tools-v3-empty[hidden] {
display: none;
}