/* Shared portfolio styling for the hub and tools; editor layouts remain independent. */
.tool-page { --bg: #fcfcfb; --bg-secondary: #f2f2ef; --text: #20211f; --text-secondary: #61625e; --text-muted: #61625e; --border: #deded8; --btn-primary-bg: #232622; --btn-primary-text: #fff; --max-width: 1160px; min-height: 100vh; display: flex; flex-direction: column; }
[data-theme="dark"] .tool-page { --bg: #191b19; --bg-secondary: #242724; --text: #f1f2ec; --text-secondary: #b8bcb3; --text-muted: #b8bcb3; --border: #3e443d; --btn-primary-bg: #e5e8dd; --btn-primary-text: #252923; }
body.tool-page > header { position: sticky; min-height: 84px; padding: 16px max(24px, calc((100% - 1160px) / 2)); gap: 24px; }
.tool-page .logo { margin-right: auto; flex-shrink: 0; }
.tool-page .logo img { width: 138px; height: auto; }
.tool-page .header-nav { gap: 26px; }
.tool-page .nav-menu ul { gap: 22px; }
.tool-page .nav-menu a { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-size: .8125rem; font-weight: 500; }
.tool-page .nav-menu a[aria-current] { color: var(--text); }
.tool-page .nav-menu a[aria-current]::after { content: ''; position: absolute; bottom: 3px; left: 0; right: 0; height: 1px; background: currentColor; }
.tool-page .language-switcher { gap: 2px; }
.tool-page .language-switcher button { min-width: 44px; min-height: 44px; border-color: transparent; padding: 8px; }
.tool-page .theme-toggle { display: flex; align-items: center; justify-content: center; min-width: 52px; min-height: 44px; padding: 4px; border: 0; border-radius: 4px; }
.tool-page .theme-switch { width: 42px; height: 24px; padding: 3px; display: block; border-radius: 20px; background: var(--text-secondary); }
.tool-page .theme-switch-thumb { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: var(--bg); color: var(--text); font-size: 11px; border-radius: 50%; transition: transform .18s ease; }
[data-theme="dark"] .tool-page .theme-switch-thumb { transform: translateX(18px); }
.tool-page .tool-main, .tool-page .tools-hub { width: min(1160px, calc(100% - 48px)); max-width: none; margin: 0 auto; padding: 48px 0 64px; flex: 1; }
.tools-hub h1 { font-size: clamp(2.5rem, 5vw, 4.6rem); line-height: 1.1; letter-spacing: -.055em; font-weight: 500; margin-bottom: 24px; }
.tools-hub-intro { color: var(--text-secondary); margin-bottom: 48px; }
.tools-hub .app-tool-card { background: var(--bg-secondary); padding: 32px; border-radius: 12px; box-shadow: none; }
.tools-hub .app-tool-card:hover { transform: none; border-color: var(--text-secondary); }
.tools-hub .app-tool-card h2 { font-size: 1.5rem; font-weight: 500; letter-spacing: -.035em; }
.tools-hub .app-tool-card-cta { color: var(--text); }
.tool-page .tool-header-block h1 { font-size: clamp(1.8rem, 3vw, 2.75rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.15; }
.tool-page .tool-header-block { margin-bottom: 32px; }
.tool-page :is(input, textarea, select) { color: var(--text); }
.tool-page .tool-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--text-secondary); border-radius: 5px; background: var(--bg); color: var(--text); font: inherit; font-size: .8125rem; cursor: pointer; }
.tool-page .tool-btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); border-color: var(--btn-primary-bg); }
.tool-page .tool-btn:disabled { opacity: .55; cursor: not-allowed; }
.tool-page :is(a, button, input, textarea, select):focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
@media (max-width: 1024px) and (min-width: 769px) {
    body.tool-page > header { gap: 12px; }
    .tool-page .header-nav, .tool-page .nav-menu ul { gap: 12px; }
    .tool-page .logo img { width: 115px; }
}
@media (max-width: 768px) {
    body.tool-page > header { min-height: 72px; gap: 14px; padding-block: 12px; }
    .tool-page .nav-toggle { display: flex; gap: 10px; min-height: 44px; padding: 8px; font-size: .8125rem; }
    .tool-page .header-nav { top: 72px; padding: 16px 24px; gap: 0; }
    .tool-page .header-nav .nav-menu a { display: flex; padding: 12px 0; }
    .tool-page .nav-menu a[aria-current]::after { display: none; }
    .tool-page .header-nav .language-switcher { margin-top: 12px; padding-top: 12px; }
    .tool-page .tool-main, .tool-page .tools-hub { padding-top: 32px; }
}
@media (max-width: 480px) {
    body.tool-page > header { padding-inline: 20px; gap: 6px; }
    .tool-page .logo img { width: 120px; }
    .tool-page .tool-main, .tool-page .tools-hub { width: calc(100% - 40px); }
    .tools-hub .app-tool-card { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .tool-page *, .tool-page *::before, .tool-page *::after { animation: none !important; transition: none !important; }
}