/* ============================================================================
   FREETOOLSUITE — PLATFORM REDESIGN 2026
   Clean, light, professional. One indigo brand system across all tools.

   This layer loads AFTER styles.css and intentionally owns the product shell
   and shared components. Redefining the design tokens below re-skins every
   legacy tool automatically (they all consume var(--*)). Tool-specific markup
   that isn't restyled here simply inherits the new palette and typography.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. Design tokens
   ---------------------------------------------------------------------------- */
:root {
    /* Brand — sky blue */
    --primary-color: #0284c7;    /* sky-600 */
    --primary-dark: #0369a1;     /* sky-700 */
    --primary-darker: #075985;   /* sky-800 */
    --primary-light: #38bdf8;    /* sky-400 */
    --primary-soft: #f0f9ff;     /* sky-50  */
    --primary-soft-2: #e0f2fe;   /* sky-100 */
    --secondary-color: #0ea5e9;  /* sky-500 */
    --accent-color: #ec4899;     /* pink (used sparingly) */
    --accent-2: #f59e0b;
    --accent-3: #10b981;

    /* Surfaces */
    --bg-app: #f6f7fb;           /* page background */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --bg-glass: rgba(255, 255, 255, 0.82);
    --bg-glass-dark: rgba(255, 255, 255, 0.96);

    /* Text — slate */
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-tertiary: #94a3b8;
    --text-on-primary: #ffffff;

    /* Sidebar */
    --sidebar-bg: #ffffff;
    --sidebar-bg-solid: #ffffff;
    --sidebar-text: #334155;
    --sidebar-text-muted: #64748b;
    --sidebar-hover: #f0f9ff;
    --sidebar-active: #e0f2fe;

    /* Borders */
    --border-color: #e2e8f0;
    --border-light: #eef2f6;
    --border-strong: #cbd5e1;
    --border-glow: rgba(14, 165, 233, 0.35);

    /* Elevation + focus */
    --ring: 0 0 0 4px rgba(14, 165, 233, 0.16);
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 4px 14px -2px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 14px 34px -10px rgba(15, 23, 42, 0.16);
    --shadow-xl: 0 28px 60px -16px rgba(15, 23, 42, 0.24);
    --shadow-glow: 0 10px 26px -8px rgba(14, 165, 233, 0.45);

    /* Radii */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 26px;

    /* Motion */
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.12s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* Type + layout */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, sans-serif;
    --sidebar-w: 280px;
    --content-max: 1120px;
}

/* ----------------------------------------------------------------------------
   2. Base + typography
   ---------------------------------------------------------------------------- */
html {
    background: var(--bg-app);
}

body {
    font-family: var(--font-sans);
    color: var(--text-primary);
    background:
        radial-gradient(1200px 560px at 100% -10%, rgba(14, 165, 233, 0.07), transparent 60%),
        radial-gradient(1000px 520px at -8% 112%, rgba(56, 189, 248, 0.06), transparent 58%),
        var(--bg-app);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.011em;
    line-height: 1.6;
    /* Legacy set html,body{height:100%} which capped the body to the viewport and
       made the flex layout stretch the content area, leaving a big empty gap above
       the footer. Let the body grow with its content (min-height keeps the floor). */
    height: auto;
    min-height: 100vh;
}

::selection {
    background: #bae6fd;
    color: #075985;
}

/* Consistent, accessible focus ring for keyboard users */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Refined scrollbars */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
    background-clip: padding-box;
}

/* Native form controls inherit the brand accent */
input[type="range"],
input[type="checkbox"],
input[type="radio"],
progress {
    accent-color: var(--primary-color);
}

/* Line-icon system (sidebar categories, tool items, breadcrumb) */
.category-icon svg {
    width: 17px;
    height: 17px;
    color: var(--primary-dark);
}

.tool-nav-item .tool-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tool-nav-item .tool-nav-icon svg {
    width: 16px;
    height: 16px;
    color: var(--text-tertiary);
}

.tool-nav-item:hover .tool-nav-icon svg,
.tool-nav-item.active .tool-nav-icon svg {
    color: var(--primary-color);
}

.tool-platform-icon svg {
    width: 19px;
    height: 19px;
    color: var(--primary-color);
}

/* ----------------------------------------------------------------------------
   3. Sidebar + tool navigation
   ---------------------------------------------------------------------------- */
.sidebar {
    width: var(--sidebar-w);
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
    box-shadow: 6px 0 30px -24px rgba(15, 23, 42, 0.35);
    backdrop-filter: none;
}

.sidebar-content {
    padding-bottom: 1.5rem;
}

.logo {
    gap: 0.75rem;
    padding: 1.5rem 1.25rem 1.25rem;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 1rem;
}

.logo .app-logo {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    object-fit: contain;
    border-radius: 10px;
    filter: drop-shadow(0 4px 10px rgba(14, 165, 233, 0.22));
}

.logo h1 {
    color: var(--text-primary);
    font-size: 1.0625rem;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    background: none;
    -webkit-text-fill-color: currentColor;
}

.logo p {
    margin-top: 0.2rem;
    color: var(--text-tertiary);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.logo .brand-badge {
    display: inline-block;
    margin-top: 0.3rem;
    padding: 0.15rem 0.55rem;
    color: var(--primary-dark);
    background: var(--primary-soft);
    border: 1px solid var(--primary-soft-2);
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.09em;
}

.search-box {
    position: relative;
    padding: 0 1.25rem 1rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-light);
}

/* Drop the unreliable ⌕ glyph; we draw the magnifier as a real SVG below. */
.search-box::before {
    content: none;
}

.search-box input {
    padding: 0.6rem 0.85rem 0.6rem 2.4rem;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0.75rem center;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 500;
}

.search-box input::placeholder {
    color: var(--text-tertiary);
}

.search-box input:focus {
    background-color: #ffffff;
    border-color: var(--primary-light);
    box-shadow: var(--ring);
}

.tool-navigation {
    gap: 0.15rem;
    padding: 0 0.75rem 1rem;
}

.category-collection {
    margin: 0;
}

.category-button {
    min-height: 42px;
    padding: 0.55rem 0.7rem;
    color: var(--sidebar-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    box-shadow: none;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.category-button:hover,
.category-button.active {
    color: var(--primary-dark);
    background: var(--sidebar-hover);
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

.category-button.active {
    background: var(--sidebar-active);
}

.category-button-content {
    gap: 0.65rem;
}

/* Category names render as consistent uppercase section labels
   (the translations mix Title Case and ALL CAPS otherwise). */
.category-name {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.category-icon {
    width: 28px;
    height: 28px;
    font-size: 0.95rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
}

.category-button:hover .category-icon,
.category-button.active .category-icon {
    background: var(--primary-soft-2);
}

.category-arrow,
.category-button:hover .category-arrow,
.category-button.active .category-arrow {
    color: var(--text-tertiary);
    font-size: 0.85rem;
}

.category-dropdown {
    top: calc(100% + 0.25rem);
    left: 0.25rem;
    right: 0.25rem;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
}

.category-collection.active .category-dropdown {
    padding: 0.4rem;
}

.category-tools {
    gap: 0.15rem;
}

.tool-nav-item {
    padding: 0.55rem 0.65rem;
    color: var(--sidebar-text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 500;
}

.tool-nav-item:hover {
    color: var(--primary-dark);
    background: var(--sidebar-hover);
    border-color: transparent;
    transform: none;
}

.tool-nav-item.active {
    color: var(--primary-dark);
    background: var(--sidebar-active);
    border-color: transparent;
    box-shadow: none;
    font-weight: 600;
}

.sidebar-note {
    margin: 1rem 1.25rem 0;
    padding: 0.85rem 0.9rem;
    color: var(--text-secondary);
    background: var(--primary-soft);
    border: 1px solid var(--primary-soft-2);
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
}

.sidebar-note-mark {
    color: var(--primary-color);
    font-size: 1rem;
}

/* ----------------------------------------------------------------------------
   4. Workspace header + content surface
   ---------------------------------------------------------------------------- */
/* Sticky footer: on short tools the main area grows to fill the viewport so the
   footer sits at the bottom (under the tool) instead of floating mid-page. */
.main-layout {
    flex: 1 0 auto;
}

.content-area {
    margin-left: 0;
    padding: 0 2.5rem 1.5rem;
}

/* Desktop: the sidebar sits in normal flow and only as tall as the content
   (so it never forces a 100vh layout that leaves a big empty gap above the
   footer on short pages). The NAV inside stays pinned via a sticky child, so
   it's still always visible while scrolling. Mobile keeps the off-canvas menu. */
@media (min-width: 769px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: var(--sidebar-w);
        height: 100vh;
        overflow-y: auto;
        z-index: 60;
    }
    .content-area {
        margin-left: var(--sidebar-w);
    }
    /* Footer background spans full width, but the sidebar sits ON TOP of it
       (so the menu stays visible where they overlap), and the footer content is
       inset past the sidebar so it never hides behind it. */
    .main-footer {
        position: relative;
        z-index: 1;
        padding-left: calc(var(--sidebar-w) + 2.5rem);
    }
}

.workspace-header {
    max-width: var(--content-max);
    min-height: auto;
    margin: 0 auto 1.25rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border-color);
    justify-content: flex-end;
}

/* Small brand accent bar before the title for a more finished, premium feel */
.workspace-intro {
    position: relative;
    padding-left: 0.95rem;
}

.workspace-intro::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.15rem;
    bottom: 0.15rem;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--primary-color), var(--secondary-color));
}

.workspace-kicker {
    margin-bottom: 0.25rem;
    color: var(--text-primary);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.025em;
}

.workspace-subtitle {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
}

/* Privacy → a proper trust pill (green = secure/private) */
.privacy-indicator {
    gap: 0.45rem;
    padding: 0.45rem 0.8rem 0.45rem 0.65rem;
    color: #047857;
    background: #ecfdf5;
    border: 1px solid #d1fae5;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
}

.privacy-indicator > span {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}

.language-selector-btn {
    min-width: 148px;
    padding: 0.5rem 0.75rem;
    color: var(--text-secondary);
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    font-size: 0.8rem;
    font-weight: 600;
}

.language-selector-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--border-strong);
}

.language-dropdown {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
}

.language-option {
    color: var(--text-secondary);
}

.language-option:hover,
.language-option.active {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.tool-container {
    max-width: var(--content-max);
    margin: 0 auto;
}

/* ----------------------------------------------------------------------------
   5. Shared tool content — headers, cards, forms, buttons
   ---------------------------------------------------------------------------- */
.tool-header {
    margin-bottom: 1.5rem;
}

.tool-header h2 {
    color: var(--text-primary);
    font-size: clamp(1.5rem, 2.6vw, 1.85rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    background: none;
    -webkit-text-fill-color: currentColor;
}

.tool-header p {
    margin-top: 0.4rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 450;
}

.tool-card {
    color: var(--text-primary);
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.form-label {
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
}

.form-input,
.form-select,
.form-textarea,
.option-select {
    color: var(--text-primary);
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 0.92rem;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-tertiary);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.option-select:focus {
    background: #ffffff;
    border-color: var(--primary-light);
    box-shadow: var(--ring);
}

.btn {
    border-radius: 10px;
    font-weight: 650;
    letter-spacing: -0.005em;
    transition: var(--transition);
}

.btn-primary,
.tool-card .btn-group .btn-primary {
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border: 1px solid transparent;
    box-shadow: var(--shadow-glow);
}

.btn-primary:hover,
.tool-card .btn-group .btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-darker) 100%);
    box-shadow: 0 14px 30px -8px rgba(14, 165, 233, 0.55);
    transform: translateY(-1px);
}

.btn-secondary,
.tool-card .btn-group .btn-secondary,
.tool-card .btn-group .btn {
    color: var(--text-secondary);
    background: #ffffff;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.btn-secondary:hover,
.tool-card .btn-group .btn-secondary:hover,
.tool-card .btn-group .btn:hover {
    color: var(--primary-dark);
    background: var(--bg-secondary);
    border-color: var(--border-strong);
}

/* ----------------------------------------------------------------------------
   6. Homepage hero (video downloader) + download surfaces
   ---------------------------------------------------------------------------- */
.video-header {
    padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 3.5rem);
    text-align: left;
    background:
        radial-gradient(900px 360px at 100% 0%, rgba(14, 165, 233, 0.16), transparent 60%),
        radial-gradient(680px 340px at 0% 120%, rgba(56, 189, 248, 0.13), transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
}

/* Badge is now a real DOM element (.video-badge) so it can be translated. */
.video-header::before {
    content: none;
}

.video-badge {
    display: inline-flex;
    margin-bottom: 1rem;
    padding: 0.4rem 0.7rem;
    color: var(--primary-dark);
    background: var(--primary-soft);
    border: 1px solid var(--primary-soft-2);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.video-title {
    max-width: 700px;
    margin-bottom: 1.25rem;
    color: var(--text-primary);
    background: none;
    -webkit-text-fill-color: currentColor;
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    font-weight: 820;
    letter-spacing: -0.045em;
}

/* Highlight "Videos & Thumbnails" in sky blue against the dark title */
.video-title-hl {
    color: var(--primary-color);
    -webkit-text-fill-color: var(--primary-color);
}

.video-description {
    max-width: 620px;
    margin: 0;
    color: var(--text-secondary);
    font-size: 1.02rem;
    font-weight: 450;
    opacity: 1;
}

.platform-icons {
    justify-content: center;
    gap: 1.1rem;
    margin-bottom: 1.25rem;
    padding: 1.15rem 1.75rem;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--border-color);
    border-radius: 18px;
}

.platform-icon {
    width: 52px;
    height: 52px;
    box-shadow: none;
}

.platform-icon.active {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px var(--primary-light);
}

.url-input {
    min-height: 70px;
    padding: 1rem 1.5rem;
    color: var(--text-primary);
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    font-size: 1.02rem;
    text-align: left;
    animation: none;
}

.url-input:focus {
    border-color: var(--primary-light);
    box-shadow: var(--ring), var(--shadow-md);
    transform: none;
}

.download-section {
    background: #ffffff;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.download-section:hover {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-md);
}

.download-section::before {
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}

.section-icon.video-icon,
.section-icon.audio-icon,
.section-icon.image-icon {
    color: var(--primary-color);
    background: var(--primary-soft);
}

.download-btn.primary,
.download-btn.audio-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    box-shadow: var(--shadow-glow);
}

.download-btn.secondary {
    color: var(--primary-dark);
    background: var(--primary-soft);
    border-color: var(--primary-soft-2);
}

/* Hover MUST stay readable. The legacy rule set white text on a near-white
   background, so "Thumbnail herunterladen" disappeared on hover. Override it
   with a solid sky fill + white text (only while enabled). */
.download-btn.secondary:hover:not(:disabled) {
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-color: transparent;
    box-shadow: var(--shadow-glow);
}

/* Align the three download cards so options and buttons line up across all of
   them, regardless of how many dropdowns each has (Video has 2, Audio/Thumbnail
   have 1) or whether a title wraps to two lines. */
.section-header {
    min-height: 2.75rem;
    margin-bottom: 0.85rem;
}

.section-content {
    justify-content: flex-start;
    gap: 0.7rem;
}

.section-content .download-btn {
    margin-top: auto;
    width: 100%;
}

/* ----------------------------------------------------------------------------
   7. Footer
   ---------------------------------------------------------------------------- */
.main-footer {
    margin-top: 2.5rem;
    margin-left: 0;
    padding: 1.75rem 2.5rem 1.25rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    border-image: none;
}

.main-footer::before {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary-light) 50%, transparent);
}

.footer-content,
.footer-bottom {
    max-width: var(--content-max);
    margin-left: auto;
    margin-right: auto;
}

.footer-section h3 {
    color: var(--text-primary);
    background: none;
    -webkit-text-fill-color: currentColor;
    font-weight: 800;
}

.footer-section p,
.footer-bottom p {
    color: var(--text-tertiary);
}

.footer-category-button {
    color: var(--text-secondary);
    background: #ffffff;
    border: 1px solid var(--border-color);
    box-shadow: none;
}

.footer-category-button:hover,
.footer-category-button.active {
    color: var(--primary-dark);
    background: #ffffff;
    border-color: var(--primary-light);
    box-shadow: var(--shadow-sm);
    transform: none;
}

.footer-category-icon {
    background: var(--primary-soft);
}

.footer-category-dropdown {
    background: #ffffff;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
}

.footer-category-links li a {
    color: var(--text-secondary);
}

.footer-category-links li a:hover {
    color: var(--primary-dark);
}

.footer-bottom {
    border-top: 1px solid var(--border-color);
}

.footer-bottom p {
    color: var(--text-tertiary);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* ----------------------------------------------------------------------------
   8. Cookie banner
   ---------------------------------------------------------------------------- */
.cookie-banner {
    background: rgba(255, 255, 255, 0.98);
    border-top: 1px solid var(--border-color);
    box-shadow: var(--shadow-xl);
    backdrop-filter: blur(12px);
}

.cookie-content {
    max-width: var(--content-max);
}

.cookie-icon {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    box-shadow: var(--shadow-glow);
}

.cookie-text h3 {
    color: var(--text-primary);
}

.cookie-text p {
    color: var(--text-secondary);
}

.cookie-text a {
    color: var(--primary-color);
    font-weight: 600;
}

.cookie-btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    box-shadow: var(--shadow-glow);
}

.cookie-btn-secondary {
    color: var(--text-secondary);
    background: #ffffff;
    border: 1px solid var(--border-color);
}

.cookie-btn-secondary:hover {
    color: var(--primary-dark);
    background: var(--bg-secondary);
    border-color: var(--border-strong);
}

/* ----------------------------------------------------------------------------
   9. Modals
   ---------------------------------------------------------------------------- */
.modal {
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
}

.modal-content {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
}

.modal-header {
    border-bottom: 1px solid var(--border-color);
}

.modal-header h2 {
    color: var(--text-primary);
    background: none;
    -webkit-text-fill-color: currentColor;
}

.modal-close {
    color: var(--text-tertiary);
}

.modal-close:hover {
    color: var(--text-primary);
}

/* ----------------------------------------------------------------------------
   10. Responsive guards (mirror legacy mobile behaviour)
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .content-area {
        margin-left: 0;
        padding: 0 1.1rem 1rem;
    }

    .main-footer {
        margin-left: 0;
        padding: 2rem 1.1rem 1.25rem;
    }

    .tool-header h2 {
        font-size: 1.4rem;
    }

    /* Clear the fixed burger button: push the sidebar content below it so the
       burger (top-left) never overlaps the logo when the mobile menu is open. */
    .sidebar-content {
        padding-top: 3rem;
    }

    /* Keep all 5 platform icons on a single line on mobile (larger on desktop). */
    .platform-icons {
        flex-wrap: nowrap !important;
        gap: 0.9rem;
        padding: 0.85rem 0.4rem;
    }

    .platform-icon {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
    }

    /* Don't clip the tool title on mobile — let it wrap to show the full name. */
    .tool-platform-title {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}

/* ----------------------------------------------------------------------------
   11. Tool platform layer — re-skin legacy sky-blue accents to indigo
   (these legacy rules hardcode colours and are scoped with
   .tool-platform-workspace, so we match their selectors to win the cascade)
   ---------------------------------------------------------------------------- */
.tool-platform-context {
    background:
        radial-gradient(circle at 96% 0%, rgba(14, 165, 233, 0.16), transparent 11rem),
        #ffffff;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.tool-platform-route {
    color: var(--text-tertiary);
}

.tool-platform-route-home {
    color: var(--primary-dark);
}

.tool-platform-route-separator {
    color: var(--border-strong);
}

.tool-platform-icon {
    background: var(--primary-soft);
    border: 1px solid var(--primary-soft-2);
}

.tool-platform-context-main p {
    color: var(--text-tertiary);
}

.tool-platform-title {
    color: var(--text-primary);
}

.tool-platform-signals {
    color: var(--text-secondary);
}

.tool-platform-signals span {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.tool-platform-signals i {
    background: var(--accent-3);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14);
}

.tool-platform-workspace .tool-card {
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
}

.tool-platform-workspace .tool-card:not(.brand-kit-tool)::after {
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
}

.tool-platform-workspace .tool-header {
    border-bottom: 1px solid var(--border-light);
}

.tool-platform-workspace .tool-header h2 {
    color: var(--text-primary);
}

.tool-platform-workspace .tool-header p {
    color: var(--text-secondary);
}

.tool-platform-workspace .tool-body > .form-group,
.tool-platform-workspace .tool-body > .form-row > .form-group {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.tool-platform-workspace .tool-body > .form-group:focus-within,
.tool-platform-workspace .tool-body > .form-row > .form-group:focus-within {
    background: #ffffff;
    border-color: var(--primary-light);
    box-shadow: var(--ring);
}

.tool-platform-workspace .tool-body > .form-group > .form-label,
.tool-platform-workspace .tool-body > .form-row > .form-group > .form-label {
    color: var(--text-secondary);
}

.tool-platform-workspace .form-input,
.tool-platform-workspace .form-select,
.tool-platform-workspace .form-textarea,
.tool-platform-workspace .option-select {
    color: var(--text-primary);
    background: #ffffff;
    border-color: var(--border-color);
}

.tool-platform-workspace .form-input:focus,
.tool-platform-workspace .form-select:focus,
.tool-platform-workspace .form-textarea:focus,
.tool-platform-workspace .option-select:focus {
    border-color: var(--primary-light);
    box-shadow: var(--ring);
}

.tool-platform-workspace .btn-primary,
.tool-platform-workspace .tool-card .btn-group .btn-primary {
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-color: transparent;
    box-shadow: var(--shadow-glow);
}

.tool-platform-workspace .btn-primary:hover,
.tool-platform-workspace .tool-card .btn-group .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px -8px rgba(14, 165, 233, 0.55);
}

.tool-platform-workspace .result-card,
.tool-platform-workspace .result-container {
    background: var(--primary-soft);
    border: 1px solid var(--primary-soft-2);
}

.tool-platform-workspace .result-header,
.tool-platform-workspace .result-card h3 {
    color: var(--text-primary);
}

.tool-platform-workspace .file-input-wrapper {
    border: 1px dashed var(--border-strong);
}

.tool-platform-workspace .pdf-tool-card {
    border-color: var(--border-color);
}

.tool-platform-workspace .pdf-tool-card:hover {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-md);
}

.tool-platform-guide-item {
    background: #ffffff;
    border: 1px solid var(--border-color);
}

.tool-platform-guide-item > span {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.tool-platform-guide-item strong {
    color: var(--text-primary);
}

.tool-platform-guide-item p {
    color: var(--text-secondary);
}

.tool-platform-guide-assurance > span {
    color: #0c9b6a;
    background: #e3f9ef;
}

@media (max-width: 768px) {
    .burger-menu.active,
    .burger-menu.active:hover {
        background: var(--primary-color);
        box-shadow: 0 8px 18px rgba(14, 165, 233, 0.3);
    }
}

/* ----------------------------------------------------------------------------
   12. Footer — multi-column layout like larger platforms
   ---------------------------------------------------------------------------- */
.footer-content {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

.footer-brand-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
}

.footer-logo {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 9px;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(14, 165, 233, 0.22));
}

.footer-brand h3 {
    margin: 0;
    font-size: 1.05rem;
}

.footer-brand p {
    max-width: 320px;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
}

.footer-col-title {
    margin-bottom: 0.95rem;
    color: var(--text-primary);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.footer-content .footer-category-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
}

/* Plain link rows (reset the inherited legacy box/padding) + icon */
.footer-content .footer-category-links li a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease, transform 0.15s ease;
}

.footer-content .footer-category-links li a:hover {
    background: none;
    box-shadow: none;
    transform: translateX(3px);
    color: var(--primary-dark);
}

/* Icon tile — adds the colour the footer was missing */
.footer-content .footer-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 8px;
    background: var(--primary-soft);
    color: var(--primary-color);
    transition: background 0.15s ease, color 0.15s ease;
}

.footer-content .footer-category-links li a:hover .footer-ic {
    background: var(--primary-soft-2);
    color: var(--primary-dark);
}

.footer-content .footer-ic svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 860px) {
    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 1.75rem 2rem;
    }
    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 520px) {
    .footer-content {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------------------------------------------
   13. PDF tools grid + tool modals — into the sky-blue system
   ---------------------------------------------------------------------------- */
.pdf-tools-hint {
    display: inline-flex;
    align-items: center;
    margin: 0 auto 1.5rem;
    padding: 0.55rem 1.1rem;
    color: var(--primary-dark);
    background: var(--primary-soft);
    border: 1px solid var(--primary-soft-2);
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 600;
}

.pdf-tools-grid {
    gap: 0.85rem;
}

/* Uniform clean cards (override the colourful gradient variants) */
.pdf-tool-card,
.pdf-tool-card-blue, .pdf-tool-card-red, .pdf-tool-card-orange,
.pdf-tool-card-yellow, .pdf-tool-card-gold, .pdf-tool-card-green,
.pdf-tool-card-purple {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    min-height: 0;
    gap: 0.8rem;
    align-items: center;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.pdf-tool-card::before {
    display: none;
}

.pdf-tool-card:hover,
.pdf-tool-card-blue:hover, .pdf-tool-card-red:hover, .pdf-tool-card-orange:hover,
.pdf-tool-card-yellow:hover, .pdf-tool-card-gold:hover, .pdf-tool-card-green:hover,
.pdf-tool-card-purple:hover {
    transform: translateY(-2px);
    background: #ffffff;
    border-color: var(--primary-light);
    box-shadow: var(--shadow-md);
}

.pdf-tool-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 10px;
    background: var(--primary-soft);
    color: var(--primary-color);
    font-size: 1.15rem;
    filter: none;
}

.pdf-tool-card:hover .pdf-tool-card-icon {
    transform: none;
    background: var(--primary-soft-2);
}

.pdf-tool-card-icon svg {
    width: 20px;
    height: 20px;
}

.pdf-tool-card-title {
    color: var(--text-primary);
    font-size: 0.9rem;
}

.pdf-tool-card:hover .pdf-tool-card-title {
    color: var(--text-primary);
}

.pdf-tool-card-desc {
    color: var(--text-tertiary);
    font-size: 0.78rem;
}

.pdf-tool-card-arrow {
    color: var(--text-tertiary);
    opacity: 1;
}

.pdf-tool-card:hover .pdf-tool-card-arrow {
    color: var(--primary-color);
    transform: translateX(4px);
}

/* PDF tool modal — sky + compact */
#pdfToolModal .modal-content {
    width: 680px !important;
    max-width: 92vw !important;
}

#pdfToolModalTitle div[style*="linear-gradient"] {
    background: none !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    color: var(--text-primary) !important;
}

.format-converter-icon,
.format-upload-icon {
    background: var(--primary-soft) !important;
    color: var(--primary-color) !important;
    box-shadow: none !important;
}

.format-file-dropzone {
    background: var(--bg-secondary);
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-md);
    padding: 1.5rem;
}

.format-file-dropzone::before {
    display: none;
}

.format-file-dropzone:hover {
    border-color: var(--primary-light);
    background: var(--primary-soft);
}

.format-dropzone-icon {
    color: var(--primary-color);
}

.format-browse-btn,
.format-convert-btn {
    padding: 0.7rem 1.4rem !important;
    font-size: 0.9rem !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
    box-shadow: var(--shadow-glow) !important;
    border: none !important;
    color: #ffffff !important;
}

.format-browse-btn::before {
    display: none;
}

.format-cancel-btn {
    padding: 0.7rem 1.25rem !important;
    font-size: 0.9rem !important;
    border-radius: 10px !important;
    color: var(--text-secondary) !important;
    background: #ffffff !important;
    border: 1px solid var(--border-color) !important;
}

.format-cancel-btn:hover {
    color: var(--primary-dark) !important;
    background: var(--bg-secondary) !important;
    border-color: var(--border-strong) !important;
}

.format-info-badge {
    background: var(--primary-soft);
    color: var(--primary-dark);
    border: 1px solid var(--primary-soft-2);
}

.format-info-message.info {
    background: var(--primary-soft);
    color: var(--primary-dark);
    border: 1px solid var(--primary-soft-2);
}

/* A clicked card must never keep the dark "button" look after the modal closes */
.pdf-tool-card.active,
.pdf-tool-card.btn-primary {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
}

.pdf-tool-card.active .pdf-tool-card-title,
.pdf-tool-card.btn-primary .pdf-tool-card-title {
    color: var(--text-primary) !important;
}

.pdf-tool-card.active .pdf-tool-card-desc,
.pdf-tool-card.btn-primary .pdf-tool-card-desc {
    color: var(--text-tertiary) !important;
}

.pdf-tool-card.active .pdf-tool-card-icon,
.pdf-tool-card.btn-primary .pdf-tool-card-icon {
    background: var(--primary-soft) !important;
    color: var(--primary-color) !important;
}

/* Modal field tiles were green + SPINNING (animation: rotate) and 56px — make
   them sky, upright, still, and smaller. */
.format-convert-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.1rem !important;
    background: var(--primary-soft) !important;
    color: var(--primary-color) !important;
    transform: none !important;
    animation: none !important;
    box-shadow: none !important;
}

/* Compact, clean dialog internals (hint texts + checkboxes + fields were too big) */
.format-convert-section {
    margin-bottom: 1.1rem !important;
}

.format-convert-header {
    gap: 0.65rem !important;
    margin-bottom: 0.7rem !important;
}

.format-label {
    font-size: 0.9rem !important;
}

.format-subtitle {
    font-size: 0.78rem !important;
}

.format-info-message,
.format-info-message.info,
.format-info-message.success,
.format-info-message.error {
    padding: 0.65rem 0.85rem !important;
    font-size: 0.8rem !important;
    line-height: 1.45 !important;
    border-radius: 10px !important;
    margin-top: 0.75rem !important;
}

.format-info-badge {
    padding: 0.4rem 0.85rem !important;
    font-size: 0.78rem !important;
}

/* Drop the emoji icons + decorative shine in action buttons */
.format-btn-icon,
.format-btn-shine {
    display: none !important;
}

/* Compact inputs (inline padding made them tall) + smaller checkboxes */
#pdfToolModalBody .format-select {
    padding: 0.7rem 0.95rem !important;
    font-size: 0.92rem !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

#pdfToolModalBody input[type="checkbox"] {
    width: 15px !important;
    height: 15px !important;
    accent-color: var(--primary-color);
}

.format-convert-icon svg,
.format-converter-icon svg {
    width: 20px;
    height: 20px;
}

/* Modal inputs/selects had violet hover + focus */
.format-select:hover {
    border-color: var(--primary-light) !important;
    box-shadow: var(--shadow-sm) !important;
    transform: none !important;
}

.format-select:focus {
    border-color: var(--primary-light) !important;
    box-shadow: var(--ring) !important;
}

.format-select-arrow {
    color: var(--primary-color) !important;
}

/* HTML-to-PDF tabs: active tab was purple */
#pdfToolModalBody .html-tab.active {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
    color: #ffffff !important;
}

/* The language menu must sit above the workspace and remain interactive. */
.workspace-header,
.language-selector-wrapper {
    overflow: visible;
}

.language-selector-wrapper {
    z-index: 3000;
}

.language-selector-wrapper.active .language-dropdown {
    z-index: 3001;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto;
}

/* ----------------------------------------------------------------------------
   PDF tools now render as full pages — hide the modal-era "Cancel" button
   inside the tool workspace (it remains available inside the PDF modal).
   ---------------------------------------------------------------------------- */
.tool-platform-workspace .format-cancel-btn { display: none; }

/* ----------------------------------------------------------------------------
   Footer must clear the fixed sidebar on desktop. The base `.main-footer`
   padding shorthand (loaded later) otherwise resets padding-left to 2.5rem,
   letting the sidebar overlap the footer's first column. Re-assert the inset
   here so it wins by source order.
   ---------------------------------------------------------------------------- */
@media (min-width: 769px) {
    .main-footer {
        padding-left: calc(var(--sidebar-w) + 2.5rem);
    }
}