/*
 * Single render-blocking stylesheet for the site. Blocks tagged
 * "inlined from <name>.css" were merged from former sibling files to
 * eliminate 8 sequential @import fetches (~570ms FCP on slow mobile).
 * Edit the inlined blocks here — this is the only stylesheet Flask serves.
 */
/* === inlined from footer.css === */
/* Site Footer */
.site-footer {
    background: var(--bg-color);
    padding: 60px 24px 32px;
    margin-top: 60px;
    box-shadow: 0 -1px 0 var(--border-color);
}

.site-footer .footer-content {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr repeat(2, 1fr);
    gap: 48px;
}

.site-footer .footer-section {
    min-width: 0;
}

.site-footer .footer-section h3,
.site-footer .footer-section h4 {
    color: var(--text-color);
    font-size: 1.1em;
    margin-bottom: 20px;
    font-weight: 600;
    letter-spacing: -0.3px;
}

.site-footer .footer-section p {
    color: var(--text-light);
    font-size: 0.95em;
    line-height: 1.6;
    margin-bottom: 16px;
}

.site-footer .footer-section ul {
    list-style: none;
    padding: 0;
}

.site-footer .footer-section ul li {
    margin-bottom: 12px;
}

.site-footer .footer-section ul li a {
    color: var(--text-light);
    text-decoration: none;
    font-size: 0.95em;
    transition: var(--transition);
    position: relative;
    padding: 2px 0;
    outline: none;
}

.site-footer .footer-section ul li a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: var(--primary-color);
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease;
}

.site-footer .footer-section ul li a:hover {
    color: var(--primary-text);
}

.site-footer .footer-section ul li a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.site-footer .footer-section ul li a:active {
    opacity: 0.8;
}

.site-footer .footer-section ul li a:focus {
    box-shadow: var(--focus-ring);
    border-radius: 4px;
}

.site-footer .footer-section ul li a:focus:not(:focus-visible) {
    box-shadow: none;
}

.site-footer .footer-section ul li a:focus-visible {
    box-shadow: var(--focus-ring);
    border-radius: 4px;
}

.site-footer .footer-section ul li a[target="_blank"] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.site-footer .footer-section ul li a[target="_blank"]::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.7;
    transition: var(--transition);
}

.site-footer .footer-section ul li a[target="_blank"]:hover::before {
    opacity: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230091EA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
}

.site-footer .footer-bottom {
    max-width: 1280px;
    margin: 40px auto 0;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
    text-align: center;
    color: var(--text-light);
    font-size: 0.9em;
}

/* Responsive Design for Footer */
@media (max-width: 1024px) {
    .site-footer .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .site-footer {
        padding: 40px 24px 24px;
    }

    .site-footer .footer-content {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .site-footer .footer-section {
        text-align: center;
    }

    .site-footer .footer-section ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    .site-footer .footer-section ul li {
        margin-bottom: 0;
    }
}
/* === inlined from navigation.css === */
/* Navigation */
.main-nav {
    background: var(--nav-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: var(--shadow-sm), 0 1px 0 rgba(255,255,255,0.08);
    height: var(--nav-height);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--border-color);
    transition: box-shadow 0.3s ease;
}

.nav-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
}

.nav-logo {
    justify-self: start;
    font-size: 1.35em;
    font-weight: 800;
    color: var(--text-color);
    text-decoration: none;
    letter-spacing: -0.6px;
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: initial;
    transition: color 0.18s ease;
    position: relative;
    display: inline-flex;
    align-items: center;
}

.nav-logo:hover {
    color: var(--primary-color);
}

.nav-logo:active {
    opacity: 0.8;
}

.nav-logo:focus {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: 4px;
}
.nav-links {
    justify-self: center;
    display: flex;
    gap: 4px;
}

.mobile-lang-switcher {
    display: none;
}

.nav-links a {
    color: var(--text-color);
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 8px;
    transition: var(--transition);
    font-weight: 500;
    font-size: 0.9em;
    position: relative;
    outline: none;
    letter-spacing: 0.01em;
}

.nav-links a:hover {
    background: var(--primary-alpha);
    color: var(--primary-text);
}

.nav-links a:active {
    background: var(--primary-alpha-hover);
    color: var(--primary-text);
}

.nav-links a:focus {
    box-shadow: var(--focus-ring);
}

.nav-links a:focus:not(:focus-visible) {
    box-shadow: none;
}

.nav-links a:focus-visible {
    box-shadow: var(--focus-ring);
}

.nav-links a.active {
    background: var(--primary-alpha);
    color: var(--primary-text);
    font-weight: 600;
}

.nav-links a.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 2px;
    background: var(--primary-color);
    border-radius: 2px;
}

.nav-links a.active:hover {
    background: var(--primary-alpha-hover);
    opacity: 1;
}

.nav-links a.active:active {
    opacity: 0.9;
}

.nav-links a.active:focus {
    box-shadow: var(--focus-ring);
}

/* Nav Controls */
.nav-controls {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Desktop language switcher. The mobile copy lives inside the drawer so the
   fixed header never overflows when translated labels are present. */
.desktop-lang-switcher {
    display: flex;
}

/* Language switcher. Plain <a>s inside a <nav>, so focus order, Enter, and
   landmark navigation all work with no JS. */
.lang-switcher {
    display: flex;
    align-items: center;
    gap: 2px;
}

.lang-switcher-link {
    /* --text-color, not --text-light: an inactive language is a primary
       navigation choice for the reader who needs it, and the muted token does
       not clear 4.5:1 on the dark theme. Matches .nav-links a. */
    color: var(--text-color);
    font-weight: 500;
    text-decoration: none;
    font-size: 0.85rem;
    line-height: 1;
    padding: 6px 8px;
    border-radius: 6px;
    white-space: nowrap;
    transition: var(--transition);
}

.lang-switcher-link:hover {
    background: var(--primary-alpha);
    color: var(--primary-text);
}

.lang-switcher-link:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}

.lang-switcher-link.active {
    color: var(--primary-text);
    font-weight: 600;
    background: var(--primary-alpha);
}

/* Theme Toggle Button */
.theme-toggle-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-color);
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.theme-toggle-btn:hover {
    background: var(--primary-alpha);
    color: var(--primary-text);
}

.theme-toggle-btn:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}

.theme-toggle-btn svg {
    width: 24px;
    height: 24px;
}

/* Mobile menu button */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--text-color);
    margin-left: 16px;
}

.mobile-menu-btn svg {
    width: 24px;
    height: 24px;
    display: block;
}

/* Tablet / Medium Desktop adjustments */
@media (max-width: 900px) and (min-width: 769px) {
    .nav-content {
        padding: 0 16px;
        gap: 8px;
    }
    .nav-links a {
        padding: 6px 10px;
        font-size: 0.85em;
    }
    .lang-switcher-link {
        padding: 4px 6px;
        font-size: 0.8rem;
    }
    .nav-logo {
        font-size: 1.2em;
    }
}

/* Mobile styles */
@media (max-width: 768px) {
    .nav-content {
        display: flex;
        justify-content: space-between;
        padding: 0 16px;
    }
    .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: var(--nav-height);
        left: 0;
        right: 0;
        width: auto;
        max-width: 100vw;
        background: var(--nav-bg-mobile);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        flex-direction: column;
        padding: 16px;
        gap: 8px;
        border-bottom: 1px solid var(--border-color);
        box-shadow: var(--shadow-sm);
        overflow-wrap: anywhere;
    }

    .desktop-lang-switcher {
        display: none;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links > a {
        width: 100%;
        text-align: center;
        padding: 12px 16px;
    }

    .nav-links .mobile-lang-switcher {
        display: none;
        width: 100%;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 4px;
        padding-top: 8px;
        border-top: 1px solid var(--border-color);
    }

    .nav-links.active .mobile-lang-switcher {
        display: flex;
    }

    .mobile-lang-switcher .lang-switcher-link {
        width: auto;
        padding: 8px 10px;
    }
}
/* === inlined from buttons.css === */
/* Buttons */
.button,
.button.primary,
a.button.primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-text);
    border: 1px solid var(--primary-text);
    border-radius: 8px;
    box-sizing: border-box;
    color: var(--card-bg);
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1px;
    line-height: 20px;
    margin: 0;
    outline: none;
    padding: 12px 28px;
    text-align: center;
    touch-action: manipulation;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    user-select: none;
    -webkit-user-select: none;
    white-space: nowrap;
    gap: 8px;
}

.button:hover:not(:disabled) {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: var(--card-bg);
}

.button:active:not(:disabled) {
    box-shadow: none;
}


.button:disabled {
    opacity: 1;
    background: var(--border-color);
    color: var(--text-light);
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

.button:focus-visible {
    box-shadow: var(--focus-ring);
}

/* Specific styles for anchor buttons */
a.button {
    text-decoration: none;
    color: var(--card-bg);
}
a.button[href="#"],
a.button[href=""] {
    opacity: 1;
    background: var(--border-color);
    color: var(--text-light);
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

/* Secondary variant.

   `class="button secondary"` is used on 404, error and download_expired but was
   never defined anywhere, so on the three pages where users are most
   disoriented the two links -- "go home" versus "file a support request", or
   "convert again" versus "privacy policy" -- rendered as identical filled
   buttons with nothing marking the expected next step.

   Mirrors .cookie-btn-secondary, the established pairing in this stylesheet,
   and uses theme tokens so it holds in light and dark. Padding is 1px tighter
   than the base rule's 13px to absorb the border, so a primary and a secondary
   sitting side by side stay exactly the same height. */
.button.secondary,
a.button.secondary {
    background: transparent;
    border: 1px solid var(--border-color);
    padding: 12px 27px;
    color: var(--text-color);
    box-shadow: none;
}

.button.secondary:hover:not(:disabled),
a.button.secondary:hover:not(:disabled) {
    background: var(--primary-alpha);
    border-color: var(--primary-color);
    color: var(--text-color);
    box-shadow: none;
}

/* Kept as a box-shadow: --focus-ring IS a shadow value, and using it in an
   `outline` shorthand is invalid at computed-value time -- that mistake removed
   the focus indicator from the engine radios entirely (audit C8). */
.button.secondary:focus-visible,
a.button.secondary:focus-visible {
    box-shadow: var(--focus-ring);
}

/* Container for side-by-side buttons */
.button-group {
    display: flex;
    justify-content: center;
    gap: 12px;
    width: 100%;
    margin: 16px 0 0;
    padding: 0;
}

/* Mobile responsive button group */
@media (max-width: 768px) {
    .button-group {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .button {
        width: 100%;
        max-width: 300px;
    }

    #convertBtn,
    #downloadAllBtn {
        width: 100%;
        max-width: 300px;
    }
}

/* SVG icon styles */
.button svg {
    flex-shrink: 0;
}

/* === inlined from layout.css === */
/* Main Container */
.main-container {
    flex: 1;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 24px;
}

/* Page Layout */
.page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 32px;
    align-items: start;
    width: 100%;
}

.home-layout {
    grid-template-columns: 1fr;
}

/* Main Content */
.main-content {
    background: var(--card-bg);
    padding: 40px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
}

/* Content Section */
.home-content {
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 16px; /* Gap between the inner cards */
}

/* Page Header Card for Home Page */
.home-content .page-header {
    background: var(--card-bg);
    padding: 40px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
    margin-bottom: 0; /* Reset since parent has gap */
    width: 100%;
    box-sizing: border-box;
}

.content-section {
    margin-bottom: 48px;
}

.content-section:last-child {
    margin-bottom: 0;
}

/* List Styles */
.main-content ul,
.main-content ol {
    padding-left: 1.5em;
    margin: 1em 0;
}

.main-content ul ul,
.main-content ul ol,
.main-content ol ul,
.main-content ol ol {
    margin: 0.5em 0;
    padding-left: 1.5em;
}

.main-content li {
    margin-bottom: 0.5em;
    line-height: 1.6;
}

.main-content li:last-child {
    margin-bottom: 0;
}

.main-content ul > li {
    list-style-type: disc;
}

.main-content ul > li > ul > li {
    list-style-type: circle;
}

.main-content ul > li > ul > li > ul > li {
    list-style-type: square;
}

.main-content ol > li {
    list-style-type: decimal;
}

.main-content ol > li > ol > li {
    list-style-type: lower-alpha;
}

.main-content ol > li > ol > li > ol > li {
    list-style-type: lower-roman;
}

/* Support Options */
.support-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin: 32px 0;
}

.support-card {
    background: var(--card-bg);
    padding: 24px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
}

/* Headers */
.page-header {
    text-align: center;
    margin-bottom: 48px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.page-header h1 {
    font-size: 3.2em;
    font-weight: 800;
    letter-spacing: -1.5px;
    margin-bottom: 14px;
    color: var(--text-color);
    line-height: 1.15;
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: initial;
}
.page-header p {
    color: var(--text-light);
    font-size: 1.15em;
    max-width: 600px;
    margin: 0 auto;
    font-weight: 400;
    line-height: 1.65;
}

.page-header--compact {
    margin-bottom: 8px;
}

.page-header--compact h1 {
    font-size: 2.5em;
    margin-bottom: 8px;
}

.page-header--compact p {
    font-size: 1.1em;
}

/* Sidebar */
.sidebar {
    position: sticky;
    top: calc(var(--nav-height) + 24px);
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sidebar-section {
    background: var(--card-bg);
    padding: 28px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
}

.sidebar-section h3 {
    margin-bottom: 20px;
    font-size: 1.3em;
    letter-spacing: -0.5px;
}

.sidebar-section ul {
    list-style: none;
    padding: 0;
}

.sidebar-section li {
    margin-bottom: 12px;
    color: var(--text-light);
    font-size: 1.05em;
}

.sidebar-section a {
    color: var(--primary-text);
    text-decoration: none;
    transition: var(--transition);
    font-weight: 500;
}

.sidebar-section a:hover {
    color: var(--primary-dark);
}

/* Mobile Responsive */
@media (max-width: 827px) {
    .main-container {
        padding: 16px 16px;
        overflow-x: hidden;
    }

    .page-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .main-content {
        padding: 24px 16px;
        overflow: hidden;
    }

    .home-content {
        overflow: hidden;
    }

    .home-content .page-header {
        padding: 24px 16px;
    }

    .page-header {
        margin-bottom: 32px;
    }

    .page-header h1 {
        font-size: 2.2em;
        letter-spacing: -1px;
    }

    .page-header--compact h1 {
        font-size: 1.8em;
    }

    .page-header--compact p {
        font-size: 1em;
    }

    .support-options {
        grid-template-columns: 1fr;
        gap: 16px;
        margin: 24px 0;
    }

    .main-content ul,
    .main-content ol {
        padding-left: 1.25em;
    }

    .main-content ul ul,
    .main-content ul ol,
    .main-content ol ul,
    .main-content ol ol {
        padding-left: 1.25em;
    }
}

/* Page entrance animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.main-container {
    animation: fadeInUp 0.4s ease-out;
}

/* Home page SEO content */
.home-seo-content {
    max-width: 800px;
    margin: 0 auto;
    background: var(--card-bg);
    padding: 32px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
}

.seo-section {
    margin-bottom: 32px;
}

.seo-section:last-child {
    margin-bottom: 0;
}

.seo-section h2 {
    font-size: 1.3em;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-color);
}

.seo-section p {
    color: var(--text-light);
    line-height: 1.7;
    margin-bottom: 12px;
}

.seo-section ol,
.seo-section ul {
    color: var(--text-light);
    padding-left: 1.5em;
    line-height: 1.7;
}

.seo-section li {
    margin-bottom: 8px;
}

.seo-section a {
    color: var(--primary-text);
}

.seo-section a:hover {
    color: var(--primary-dark);
}

/* === inlined from forms.css === */
    /* Contact Form */
.contact-form {
    margin-top: 24px;
    width: 100%;
    max-width: 100%;
}

/* Inline outcome for the contact form. Empty until the form is submitted, so it
   takes no space on first paint; a live region has to exist in the DOM before
   the text arrives, which is why it is emptied rather than hidden. */
.form-status {
    margin: 0 0 12px;
    min-height: 1.2em;
    font-size: 0.9em;
    color: var(--text-light);
}

.form-status--error {
    color: var(--error-color, #dc2626);
}

.form-group {
    margin-bottom: 20px;
    width: 100%;
    max-width: 100%;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-family: inherit;
    font-size: 1em;
    transition: var(--transition);
    box-sizing: border-box;
    max-width: 100%;
    background: var(--bg-color);
    color: var(--text-color);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-light);
    opacity: 0.7;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* Support Cards */
.support-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 32px 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.support-card {
    background: var(--card-bg);
    padding: 24px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.support-card h3 {
    margin-bottom: 16px;
    word-wrap: break-word;
}

.support-card ul {
    list-style: none;
    padding: 0;
    width: 100%;
}

.support-card li {
    margin-bottom: 12px;
    word-wrap: break-word;
}

/* Mode Selector */
.mode-selector {
    margin-bottom: 0;
    text-align: center;
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    background: transparent;
}

.mode-switch {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    background: var(--card-bg);
    padding: 12px 20px;
    border-radius: 50px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
}

.mode-switch input {
    display: none;
}

.slider {
    position: relative;
    width: 50px;
    height: 24px;
    background-color: var(--text-light);
    border-radius: 12px;
    margin-right: 10px;
    transition: var(--transition);
}

.slider:before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: var(--card-bg);
    border-radius: 50%;
    transition: var(--transition);
}

.mode-switch input:checked + .slider {
    background-color: var(--primary-color);
}

.mode-switch input:checked + .slider:before {
    transform: translateX(26px);
}

.mode-label {
    font-weight: 500;
}

/* Split Level Selector */
.split-level-selector {
    display: inline-flex;
    align-items: center;
}

.split-level-selector select {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 50px;
    background: var(--card-bg);
    color: var(--text-color);
    font-size: 0.9em;
    cursor: pointer;
    box-shadow: var(--shadow);
}

/* File Upload */
.upload-section {
    background: var(--card-bg);
    padding: 24px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
    text-align: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.file-input-wrapper {
    position: relative;
    margin: 24px 0;
    padding: 28px 20px;
    border: 2px dashed var(--border-color);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    background: var(--card-bg);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.file-input-wrapper:hover {
    border-color: var(--primary-color);
    background: var(--primary-alpha);
    box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.08), 0 0 0 4px rgba(14, 165, 233, 0.06);
}

/* The real control is the <input type="file"> below, stretched over the whole
   wrapper at opacity 0 — so the user agent paints its focus ring on something
   invisible and a keyboard user got no signal at all on the first step of the
   product. :focus-within puts the ring on the visible box instead. */
.file-input-wrapper:focus-within {
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

.file-input-wrapper .drop-text {
    color: var(--text-light);
    font-size: 1.1em;
    word-wrap: break-word;
}

.file-input-wrapper input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

/* Batch Results */
.batch-results {
    margin-top: 20px;
    width: 100%;
    max-width: 100%;
}

.result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--border-color);
    margin-bottom: 10px;
    border-radius: var(--border-radius);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
    gap: 8px;
}

.result-item .filename {
    font-weight: 500;
    word-break: break-word;
}

.result-item .error {
    color: var(--error-color);
    word-break: break-word;
}

.result-item .download-link {
    color: var(--primary-text);
    text-decoration: none;
}

.result-item .download-link:hover {
    text-decoration: underline;
}

/* Notice */
.notice {
    background: var(--notice-bg);
    color: var(--notice-text);
    padding: 16px;
    margin: 24px 0;
    border-radius: var(--border-radius);
    border: 1px solid var(--notice-border);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
}

/* Drag-over feedback */
.file-input-wrapper.dragover {
    border-color: var(--primary-color);
    border-style: dashed;
    background: var(--primary-alpha);
    position: relative;
}

.file-input-wrapper.dragover .drop-text {
    opacity: 0.4;
}

.file-input-wrapper.dragover::after {
    content: attr(data-drop-here);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--primary-text);
    font-weight: 600;
    font-size: 1.1em;
    pointer-events: none;
}

/* Format-aware tips */
.format-tip {
    margin: 8px 0 0;
    padding: 8px 12px;
    background: var(--primary-alpha);
    color: var(--text-light);
    border-radius: 8px;
    font-size: 0.85em;
    text-align: center;
    cursor: pointer;
}

/* Settings Panel */
.settings-panel { margin: 12px auto 16px; max-width: 600px; width: 100%; }
.settings-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 8px 16px; background: transparent; border: 1px solid var(--border-color); border-radius: 10px; color: var(--text-light); cursor: pointer; font-size: 0.85em; transition: var(--transition); }
.settings-toggle:hover { border-color: var(--primary-color); color: var(--text-color); }
.settings-arrow { transition: transform 0.2s ease; display: inline-block; }
.settings-content { margin-top: 8px; padding: 16px; background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 10px; }
.settings-group h4 { margin: 0 0 12px; font-size: 0.85em; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.5px; }
.settings-group + .settings-group { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-color); }
.setting-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; cursor: pointer; font-size: 0.9em; }
.setting-row span { color: var(--text-color); }
.setting-row select { padding: 4px 8px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-color); color: var(--text-color); font-size: 0.9em; }
.setting-row input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--primary-color); }

/* Filename display — prevent overflow on long filenames */
.file-input-wrapper .file-name {
    word-break: break-all;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* Conversion Card */
.conversion-card {
    background: var(--card-bg);
    padding: 20px 32px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
    width: 100%;
    max-width: 800px;
    margin: 0 auto 16px;
    box-sizing: border-box;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.conversion-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary-color);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.conversion-card .file-input-wrapper {
    margin: 0 0 16px;
}

.conversion-card .button-group {
    margin: 16px 0 0;
    padding: 0;
    justify-content: center;
}

.conversion-card .settings-panel {
    margin: 8px auto 0;
}

.conversion-toggles {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

/* Responsive */
@media (max-width: 768px) {
    .support-options {
        grid-template-columns: 1fr;
        padding: 0;
        gap: 16px;
    }

    .upload-section {
        padding: 16px;
    }

    .file-input-wrapper {
        padding: 12px 12px;
        margin: 8px 0;
    }

    .file-input-wrapper .drop-text {
        font-size: 0.9em;
    }

    .file-input-wrapper .drop-icon {
        display: none;
    }

    .result-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px;
    }

    .settings-panel {
        max-width: 100%;
    }

    .settings-toggle {
        font-size: 0.85em;
        padding: 8px 12px;
    }

    .setting-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    .conversion-card {
        padding: 16px;
    }

    .conversion-toggles {
        flex-direction: column;
        gap: 12px;
    }
}

/* File Queue */
.file-queue {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px 20px;
    margin: 0 auto 16px;
    max-width: 800px;
    box-shadow: var(--shadow-sm);
}

.file-queue-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.file-queue-header h4 {
    margin: 0;
    font-size: 0.95em;
    font-weight: 600;
}

.file-queue-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 300px;
    overflow-y: auto;
}

.file-queue-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
}

.file-queue-item-error {
    flex: 1 1 100%;
    margin-top: 2px;
    font-size: 0.8em;
    line-height: 1.35;
    color: var(--error-color);
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.file-queue-item-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.file-queue-item-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-queue-item-status {
    font-size: 0.85em;
    color: var(--text-light);
    white-space: nowrap;
}

.file-queue-item-status.converting {
    color: var(--primary-text);
}

.file-queue-item-status.done {
    color: var(--success-color);
}

.file-queue-item-status.error {
    color: var(--error-color);
}

.file-queue-item-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.file-queue-item-actions a {
    font-size: 0.85em;
    font-weight: 500;
    text-decoration: none;
    border-bottom: none;
}

.file-queue-item-actions a:hover {
    text-decoration: underline;
    border-bottom: none;
}

.file-queue-item-actions .queue-view-link {
    color: var(--accent-color);
}

.file-queue-item-actions .queue-download-link {
    color: var(--primary-text);
}

@media (max-width: 768px) {
    .file-queue-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}
/* === inlined from notifications.css === */
/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.loading-overlay.active {
    display: flex;
}

.cancel-conversion-btn {
    margin-top: 20px;
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-color);
    font-weight: 600;
    cursor: pointer;
    min-height: 40px;
}
.cancel-conversion-btn:hover:not(:disabled),
.cancel-conversion-btn:focus-visible {
    border-color: var(--error-color);
    color: var(--error-color);
    outline: none;
    box-shadow: var(--focus-ring);
}
.cancel-conversion-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

.spinner {
    width: 44px;
    height: 44px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-right-color: var(--accent-color);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin-bottom: 24px;
}

/* Progress Bar */
.progress-container {
    width: 80%;
    max-width: 360px;
    height: 3px;
    background: var(--border-color);
    border-radius: 3px;
    margin: 16px auto;
    overflow: hidden;
    position: relative;
}

.progress-bar {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    border-radius: 3px;
    transition: width 0.3s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
}

.progress-bar.indeterminate {
    width: 40% !important;
    animation: indeterminate 1.4s ease-in-out infinite;
    transition: none;
}

.progress-text {
    color: var(--text-light);
    text-align: center;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 500;
}

/* Notifications */
.notification {
    position: fixed;
    top: calc(var(--nav-height) + 8px);
    right: 24px;
    padding: 16px 24px;
    border-radius: 12px;
    color: white;
    font-weight: 500;
    z-index: 1001;
    animation: slideIn 0.3s ease-out;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(420px, calc(100vw - 48px));
}

.notification.success {
    background: var(--success-color);
}

.notification.error {
    background: var(--error-color);
}

.notification-dismiss {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.2s;
    min-width: 28px;
    min-height: 28px;
}

.notification-dismiss:hover,
.notification-dismiss:focus-visible {
    opacity: 1;
    outline: none;
}

/* Animations */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes indeterminate {
    0%   { left: -40%; width: 40%; }
    60%  { left: 100%; width: 40%; }
    100% { left: 100%; width: 40%; }
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Keyboard Shortcuts */
.shortcut-trigger {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-light);
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

.shortcut-trigger:hover {
    opacity: 1;
    color: var(--primary-text);
    border-color: var(--primary-color);
    box-shadow: var(--shadow);
}
.shortcut-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1100;
}

.shortcut-overlay.active {
    display: flex;
}

.shortcut-sheet {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 28px 32px;
    box-shadow: var(--shadow-lg);
    max-width: 400px;
    width: 90%;
}

.shortcut-sheet h3 {
    margin: 0 0 20px;
    font-size: 1.1em;
    font-weight: 600;
}

.shortcut-sheet table {
    width: 100%;
    border-collapse: collapse;
}

.shortcut-sheet tr {
    border-bottom: 1px solid var(--border-color);
}

.shortcut-sheet tr:last-child {
    border-bottom: none;
}

.shortcut-sheet td {
    padding: 10px 0;
}

.shortcut-sheet td:first-child {
    white-space: nowrap;
    padding-right: 24px;
}

.shortcut-sheet td:last-child {
    color: var(--text-light);
    font-size: 0.9em;
}

.shortcut-sheet kbd {
    display: inline-block;
    padding: 2px 7px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    box-shadow: 0 1px 0 var(--border-color);
    color: var(--text-color);
}

.shortcut-hint {
    margin: 16px 0 0;
    font-size: 0.8em;
    color: var(--text-light);
    text-align: center;
}

@media (max-width: 768px) {
    .shortcut-trigger {
        bottom: 16px;
        right: 16px;
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
}
/* === inlined from preview.css === */
/* Preview and Batch Sections */
#singlePreview {
    /* 100vw (not 100%) so the full-bleed in .preview-section wins — this ID
       rule would otherwise clamp width back to the container. The breakout
       positioning (left/margins/flex-shrink) lives in .preview-section. */
    width: 100vw;
    max-width: 100vw;
    min-height: 0;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

#batchResults {
    display: none;
    width: 100%;
    min-height: 0;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.preview-section--hidden {
    display: none !important;
}

.preview-section--reveal {
    animation: revealPreview 0.4s ease-out forwards;
}

@keyframes revealPreview {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.preview-section {
    display: grid;
    scroll-margin-top: calc(var(--nav-height) + 8px);
    /* Editor and rendered preview side by side, equal tall height; synced
       scrolling (scrollSync.js) keeps them aligned even on large files. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    background: var(--card-bg);
    /* Full-bleed: span the whole viewport. The preview sits inside a flex
       column (main-content) capped at 1280px, so two things are needed:
       (1) break out of the centered container — position + left/right:50% +
       margin:-50vw; (2) flex-shrink:0 so the flex parent doesn't shrink the
       100vw back down to the container width. body has overflow-x:hidden +
       max-width:100vw, so 100vw adds no horizontal scrollbar. Side padding
       scales with the viewport so the panes aren't flush to the edges. */
    position: relative;
    flex-shrink: 0;
    width: 100vw;
    max-width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: 24px;
    padding: 28px clamp(24px, 4vw, 64px);
    box-shadow: var(--shadow);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    box-sizing: border-box;
}

.preview-section > div {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.preview-section h3 {
    margin-bottom: 16px;
    color: var(--text-color);
    font-weight: 600;
    font-size: 1.2em;
}

.markdown-input, .markdown-preview {
    width: 100%;
    /* Equal, roomy height so the two panes line up and the output never feels
       constricted. Scales with the viewport, tall floor, capped on big screens. */
    height: min(75vh, 900px);
    min-height: 600px;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    line-height: 1.6;
    font-size: 0.95em;
    box-sizing: border-box;
    max-width: 100%;
    background: var(--bg-color);
    color: var(--text-color);
}

.markdown-preview.markdown-body {
    background-color: var(--card-bg); /* Use card-bg or bg-color for better contrast */
    color: var(--text-color);
    border-color: var(--border-color);
}

.markdown-input {
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
}

.markdown-input::placeholder {
    color: var(--text-light);
    opacity: 0.7;
}

.markdown-preview {
    overflow-y: auto;
    word-wrap: break-word;
    overflow-x: hidden;
}

/* Batch Results Styles */
.batch-results {
    margin-top: 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.results-list {
    margin-bottom: 20px;
    width: 100%;
    max-width: 100%;
}

/* Responsive Design */
@media (max-width: 768px) {
    .preview-section {
        grid-template-columns: 1fr;
        padding: 16px;
        margin-top: 16px;
        /* Undo the desktop full-bleed breakout on phones — it's already
           container-width here and the breakout just mispositions. */
        position: static;
        left: auto;
        right: auto;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .markdown-input {
        height: 300px;
        min-height: 0;
    }

    .markdown-preview {
        /* Override the desktop tall floor on phones. */
        height: 60vh;
        min-height: 340px;
    }

    .markdown-input, .markdown-preview {
        padding: 16px;
        width: 100%;
        max-width: 100%;
    }

    .preview-section > div {
        overflow-x: hidden;
    }

    #singlePreview, #batchResults {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.copy-btn {
    background: var(--card-bg);
    color: var(--text-light);
    border: 1px solid var(--border-color);
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8em;
    font-weight: 600;
    transition: all 0.18s ease;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
}

.copy-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-text);
    background: var(--primary-alpha);
}

.copy-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.editor-toolbar-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.editor-stats-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78em;
    color: var(--text-light);
    margin-right: 4px;
    padding: 3px 8px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.fullscreen-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
}

.download-html-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
/* === inlined from mode-switches.css === */
/* Mode Selector */
.mode-selector {
    display: flex;
    gap: 24px;
    justify-content: center;
    align-items: center;
    margin: 24px 0;
}

/* Mode Switch */
.mode-switch {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.mode-switch input[type="checkbox"] {
    display: none;
}

.mode-switch .slider {
    position: relative;
    width: 40px;
    height: 22px;
    background-color: var(--border-color);
    border-radius: 22px;
    transition: var(--transition);
}

.mode-switch .slider:before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: 50%;
    transition: var(--transition);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.mode-switch input:checked + .slider {
    background-color: var(--primary-color);
}

.mode-switch input:checked + .slider:before {
    transform: translateX(18px);
}

.mode-switch .mode-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
}

/* Focus styles */
.mode-switch input:focus-visible + .slider {
    box-shadow: var(--focus-ring);
}

/* Hover effect */
.mode-switch:hover .slider {
    opacity: 0.9;
}

/* Active state */
.mode-switch:active .slider:before {
    width: 22px;
}

@media (max-width: 768px) {
    .mode-selector {
        flex-direction: column;
        gap: 12px;
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    .mode-switch {
        width: 100%;
        justify-content: center;
    }

    .split-level-selector {
        width: 100%;
        justify-content: center;
    }
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/dm-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --primary-color: #0EA5E9;
    --primary-light: #38BDF8;
    --primary-dark: #0369A1;
    /* Text-safe primary: --primary-color (#0EA5E9) is only 2.77:1 on white,
       so it fails WCAG AA for text. Use --primary-text for text and
       --primary-color for borders and decorative fills. */
    --primary-text: #0369A1;
    --secondary-color: #475569;
    --bg-color: #F0F4FA;
    --card-bg: #FFFFFF;
    --text-color: #0F172A;
    --text-light: #4B5A72;
    --border-color: #D8E1EE;
    --success-color: #10B981;
    --error-color: #EF4444;
    --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
    --shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.10), 0 2px 6px -2px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 12px 40px -8px rgba(15, 23, 42, 0.16), 0 4px 12px -4px rgba(15, 23, 42, 0.08);
    --border-radius: 16px;
    --border-radius-sm: 10px;
    --nav-height: 64px;
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --focus-ring: 0 0 0 3px rgba(14, 165, 233, 0.35);
    --nav-bg: rgba(240, 244, 250, 0.82);
    --nav-bg-mobile: rgba(240, 244, 250, 0.98);
    --overlay-bg: rgba(240, 244, 250, 0.92);
    --primary-alpha: rgba(14, 165, 233, 0.09);
    --primary-alpha-hover: rgba(14, 165, 233, 0.15);
    --accent-color: #F59E0B;
    --accent-light: #FCD34D;
    --accent-dark: #D97706;
    --accent-alpha: rgba(245, 158, 11, 0.10);
    --notice-bg: rgba(14, 165, 233, 0.07);
    --notice-text: var(--text-color);
    --notice-border: rgba(14, 165, 233, 0.22);
}

[data-theme="dark"] {
    --primary-color: #38BDF8;
    --primary-light: #7DD3FC;
    --primary-dark: #0EA5E9;
    /* On dark surfaces the bright sky tone already clears AA. */
    --primary-text: #38BDF8;
    --secondary-color: #94A3B8;
    --bg-color: #080D1A;
    --card-bg: #0F1829;
    --text-color: #E2EAF4;
    --text-light: #7A90AA;
    --border-color: #1E2D42;
    --success-color: #34D399;
    --error-color: #FB7185;
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
    --shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.6), 0 2px 6px -2px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 40px -8px rgba(0, 0, 0, 0.7), 0 4px 12px -4px rgba(0, 0, 0, 0.4);
    --focus-ring: 0 0 0 3px rgba(56, 189, 248, 0.4);
    --nav-bg: rgba(8, 13, 26, 0.90);
    --nav-bg-mobile: rgba(8, 13, 26, 0.99);
    --overlay-bg: rgba(8, 13, 26, 0.94);
    --primary-alpha: rgba(56, 189, 248, 0.09);
    --primary-alpha-hover: rgba(56, 189, 248, 0.16);
    --accent-color: #FBBF24;
    --accent-light: #FDE68A;
    --accent-dark: #F59E0B;
    --accent-alpha: rgba(251, 191, 36, 0.12);
    --notice-bg: rgba(56, 189, 248, 0.07);
    --notice-text: var(--text-color);
    --notice-border: rgba(56, 189, 248, 0.18);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition: background-color 0.3s ease, color 0.2s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

html {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-feature-settings: 'cv11', 'ss01';
    line-height: 1.6;
    background: var(--bg-color);
    color: var(--text-color);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    width: 100%;
    position: relative;
    max-width: 100vw;
}

/* General Link Styles. `.lang-switcher-link` is excluded alongside the other
   nav chrome: it is navigation, not body copy, and the :visited rule below
   would otherwise paint whichever language you last used as a spent link. */
a:not(.nav-links a, .nav-logo, .button, .lang-switcher-link) {
    color: var(--primary-text);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: var(--transition);
    outline: none;
}

a:not(.nav-links a, .nav-logo, .button, .lang-switcher-link):hover {
    color: var(--primary-dark);
    border-bottom-color: var(--primary-dark);
}

a:not(.nav-links a, .nav-logo, .button, .lang-switcher-link):active {
    color: var(--primary-dark);
    border-bottom-color: var(--primary-dark);
    opacity: 0.8;
}

a:not(.nav-links a, .nav-logo, .button, .lang-switcher-link):visited {
    color: var(--primary-dark);
}

a:not(.nav-links a, .nav-logo, .button, .lang-switcher-link):focus {
    box-shadow: var(--focus-ring);
    border-radius: 4px;
}

a:not(.nav-links a, .nav-logo, .button, .lang-switcher-link):focus:not(:focus-visible) {
    box-shadow: none;
}

a:not(.nav-links a, .nav-logo, .button, .lang-switcher-link):focus-visible {
    box-shadow: var(--focus-ring);
    border-radius: 4px;
}

/* Sidebar Link Styles */
.sidebar-section a {
    color: var(--primary-color);
    text-decoration: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 4px 0;
    font-weight: 500;
    transition: var(--transition);
    border-bottom: none;
}

.sidebar-section a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--primary-color);
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease;
}

.sidebar-section a:hover {
    color: var(--primary-dark);
    border-bottom: none;
}

.sidebar-section a:active {
    opacity: 0.8;
}

.sidebar-section a:visited {
    color: var(--primary-dark);
}

.sidebar-section a:focus {
    box-shadow: var(--focus-ring);
    border-radius: 4px;
}

.sidebar-section a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.sidebar-section a[target="_blank"]::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230091EA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.7;
    transition: var(--transition);
}

.sidebar-section a[target="_blank"]:hover::before {
    opacity: 1;
}

/* Supported Formats */
.supported-formats {
    padding: 8px 0;
    margin: 0 auto;
    max-width: 800px;
    box-sizing: border-box;
}

.format-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    width: 100%;
    max-width: 100%;
}

.format-item {
    background: var(--bg-color);
    padding: 16px;
    border-radius: 16px; /* slightly smaller radius for inner items */
    text-align: center;
    font-weight: 500;
    transition: var(--transition);
    border: 1px solid var(--border-color);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 0.95em;
}

.format-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--primary-color);
    background: var(--primary-alpha);
    color: var(--primary-dark);
}

.format-item.inactive {
    opacity: 0.5;
    cursor: not-allowed;
}

.format-item.inactive:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--border-color);
    background: var(--bg-color);
    color: inherit;
}

/* Format Pills (home page compact view) */
.format-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    max-width: 640px;
    margin: 0 auto;
}

.format-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
    border: 1px solid var(--primary-color);
    background: var(--primary-alpha);
    color: var(--primary-dark);
    transition: all 0.2s ease;
    text-align: center;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.format-pill:not(.inactive):hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px -2px rgba(14, 165, 233, 0.4);
}

.format-pill.inactive {
    background: var(--bg-color);
    color: var(--text-light);
    border-color: var(--border-color);
    /* Not colour alone (WCAG 1.4.1): the previous rule changed only background,
       colour and border, so "this engine cannot read EPUB" was invisible to
       anyone who does not perceive the hue difference. */
    text-decoration: line-through;
    opacity: 0.65;
}

/* Unified Backend Selector */
.backend-selector-unified {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 0 auto 16px;
    max-width: 800px;
}

.backend-selector-option {
    flex: 1;
    cursor: pointer;
}

/* Visually hidden but still focusable. `display: none` removed these radios
   from the tab order entirely, so the backend could only be changed with a
   pointer — keyboard and screen-reader users had no way to switch engines.
   The sibling `:checked +` selectors below are unaffected. */
.backend-selector-option input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

/* Focus has to be visible on the card, since the input itself is invisible.

   `outline: 2px solid var(--focus-ring)` is what this used to say, and it painted
   nothing: --focus-ring is a *box-shadow* value (`0 0 0 3px rgba(...)`), so the
   shorthand was invalid at computed-value time and reset outline-style to none.
   The `currentColor` fallback never fired either, because the token IS defined.
   Measured before the fix: a tab-focused card and a merely-checked one were
   byte-identical, both outline-style: none.

   outline rather than box-shadow because the checked state already owns
   box-shadow on this element — overriding it would trade a focus ring for the
   selection ring. --primary-color is the same hue the token carries in each
   theme (#0EA5E9 / #38BDF8), so the ring matches the rest of the site. */
.backend-selector-option input[type="radio"]:focus-visible + .backend-selector-option-content {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.backend-selector-option-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.backend-selector-option-content strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color);
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.backend-selector-option-content span {
    font-size: 12px;
    color: var(--text-light);
    line-height: 1.4;
    transition: var(--transition);
    margin-top: 2px;
}

.backend-selector-option:hover .backend-selector-option-content {
    border-color: var(--primary-color);
    background: var(--primary-alpha);
}

.backend-selector-option input[type="radio"]:checked + .backend-selector-option-content {
    background: var(--card-bg);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1.5px var(--primary-color), var(--shadow-sm);
}

.backend-selector-option input[type="radio"]:checked + .backend-selector-option-content strong {
    color: var(--primary-text);
}

.backend-selector-option input[type="radio"]:checked + .backend-selector-option-content span {
    color: var(--text-color);
}

.backend-selector-option input[type="radio"]:checked + .backend-selector-option-content:hover {
    background: var(--primary-alpha);
    border-color: var(--primary-color);
}

.new-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--accent-alpha);
    color: var(--accent-dark);
    border: 1px solid var(--accent-color);
    vertical-align: middle;
    line-height: 1.3;
}
[data-theme="dark"] .new-badge {
    color: var(--accent-light);
}

.backend-selector-option input[type="radio"]:checked + .backend-selector-option-content .new-badge {
    background: var(--accent-alpha);
    color: var(--accent-dark);
    border-color: var(--accent-color);
}
[data-theme="dark"] .backend-selector-option input[type="radio"]:checked + .backend-selector-option-content .new-badge {
    color: var(--accent-light);
}

.backend-selector-unified.switching {
    pointer-events: none;
    opacity: 0.6;
    animation: pulse-fade 0.8s ease-in-out infinite alternate;
}

@keyframes pulse-fade {
    from { opacity: 0.5; }
    to { opacity: 0.8; }
}

@media (max-width: 768px) {
    .backend-selector-unified {
        flex-direction: column;
    }

    .backend-selector-option {
        max-width: 100%;
    }

    .backend-selector-option:first-child .backend-selector-option-content {
        border-radius: 12px 12px 0 0;
        border-bottom: 0;
    }

    .backend-selector-option:last-child .backend-selector-option-content {
        border-radius: 0 0 12px 12px;
    }

    .backend-selector-option:not(:first-child):not(:last-child) .backend-selector-option-content {
        border-radius: 0;
        border-bottom: 0;
    }

    .backend-selector-option-content {
        flex-direction: row;
        gap: 8px;
    }
}

.settings-note {
    font-size: 13px;
    color: var(--text-light);
    margin: 8px 0;
}

.notice {
    background: var(--notice-bg);
    color: var(--notice-text);
    padding: 14px 20px;
    margin: 24px 0;
    border-radius: var(--border-radius);
    border: 1px solid var(--notice-border);
    font-size: 0.88em;
    line-height: 1.5;
}

.notice--subtle {
    font-size: 0.8em;
    padding: 10px 16px;
    opacity: 0.7;
    margin: 8px auto;
    max-width: 800px;
}

.notice-info {
    background: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
}

[data-theme="dark"] .notice-info {
    background: #0d3320;
    color: #81c995;
    border-color: #1a5c38;
}

/* Conversion History */
.history-panel {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px 20px;
    margin-top: 16px;
    box-shadow: var(--shadow-sm);
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.history-header h3 {
    margin: 0;
    font-size: 1em;
}

.clear-history-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-light);
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8em;
    transition: var(--transition);
}

.clear-history-btn:hover {
    border-color: var(--error-color);
    color: var(--error-color);
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 240px;
    overflow-y: auto;
}

.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--bg-color);
    font-size: 0.85em;
    gap: 8px;
}

.history-item.expired {
    opacity: 0.5;
}

.history-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.history-filename {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-meta {
    color: var(--text-light);
    font-size: 0.85em;
}

.history-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.history-view,
.history-download {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    font-size: 0.85em;
    border-bottom: none;
}

.history-view:hover,
.history-download:hover {
    text-decoration: underline;
    border-bottom: none;
}

.history-view {
    color: var(--accent-color);
}

.history-view:hover {
    color: var(--accent-dark);
}

.history-expired {
    color: var(--text-light);
    font-size: 0.85em;
    font-style: italic;
}

/* Responsive Design */
@media (max-width: 768px) {
    .format-grid {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
        gap: 8px;
    }

    .format-item {
        padding: 10px 8px;
        font-size: 0.85em;
        border-radius: 12px;
    }

    .format-pills {
        grid-template-columns: repeat(4, 1fr);
        gap: 4px;
    }

    .format-pill {
        padding: 3px 0;
        font-size: 10px;
    }

    .supported-formats {
        padding: 4px 0;
    }

    .main-container {
        padding: 16px;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .page-layout {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    .home-content {
        overflow: hidden;
        max-width: 100%;
    }

    .home-content .page-header {
        padding: 24px 16px;
    }

    .page-header h1 {
        font-size: 2em;
    }

}

.content-section h3.fileuploads,
.content-section h3.contactform {
    margin-top: 1em;
}

body div#about-page ul li, body div#contact-page ul li {
    list-style: none;
}
body div#about-page ul, body div#about-page ul, body div#contact-page ul,body div#terms-page ul {
    margin-left: 0.5em;
}

/* API Documentation Tables */
#api-docs-page pre { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 16px; overflow-x: auto; margin: 12px 0; }
#api-docs-page pre code { background: none; padding: 0; }

/* PARTIAL_SUCCESS warning banner */
.warning-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background-color: #FFF8DC;
    border: 1px solid #E6C547;
    border-left: 4px solid #E6C547;
    border-radius: 8px;
    margin-bottom: 1rem;
    color: #5A4A00;
}

[data-theme="dark"] .warning-banner {
    background-color: rgba(245, 158, 11, 0.1);
    border-color: rgba(251, 191, 36, 0.4);
    border-left-color: #FBBF24;
    color: #FDE68A;
}

[data-theme="dark"] .warning-banner-close {
    color: #FDE68A;
}

.warning-banner[hidden] {
    display: none;
}

.warning-banner-icon {
    font-size: 1.25rem;
}

.warning-banner-text {
    flex: 1;
    font-size: 0.9rem;
    line-height: 1.4;
}

.warning-banner-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #5a4a00;
    padding: 0 0.5rem;
    line-height: 1;
}

.warning-banner-close:hover {
    color: #000;
}

/* Premium API Reference Styles */
.api-endpoint-card {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--card-bg);
    margin-bottom: 40px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.api-endpoint-header {
    background: var(--bg-color);
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.endpoint-path {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.05em;
    font-weight: 600;
    color: var(--text-color);
}

.endpoint-desc {
    font-size: 0.9em;
    color: var(--text-light);
    margin-left: auto;
}

.api-endpoint-body {
    display: grid;
    grid-template-columns: 1fr;
    border-top: none;
}

@media (min-width: 1024px) {
    .api-endpoint-body {
        grid-template-columns: 55% 45%;
    }
}

.api-endpoint-details {
    padding: 28px;
    border-right: none;
}

@media (min-width: 1024px) {
    .api-endpoint-details {
        border-right: 1px solid var(--border-color);
    }
}

.api-endpoint-code {
    padding: 28px;
    background: #0B0F19; /* Solid Dark developer theme */
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-x: auto;
}

.code-tab-header {
    font-size: 0.85em;
    font-weight: bold;
    color: #8899B0;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: -8px;
}

.api-endpoint-code pre {
    margin: 0 !important;
    padding: 16px !important;
    background: #060910 !important;
    border: 1px solid #1E293B !important;
    border-radius: 8px !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}

.api-endpoint-code pre code {
    color: #E2E8F0 !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.85em !important;
    background: none !important;
    padding: 0 !important;
}

/* HTTP Method Badges */
.method-badge {
    font-size: 0.7em;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.05em;
    font-family: 'JetBrains Mono', monospace;
}

.method-badge--post {
    background-color: rgba(16, 185, 129, 0.15);
    color: #10B981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.method-badge--get {
    background-color: rgba(14, 165, 233, 0.15);
    color: #0EA5E9;
    border: 1px solid rgba(14, 165, 233, 0.3);
}

.method-badge--delete {
    background-color: rgba(239, 68, 68, 0.15);
    color: #EF4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.method-badge--info {
    background-color: var(--primary-alpha);
    color: var(--primary-text);
    border: 1px solid var(--primary-color);
}

/* API Docs Specific Components */
.api-docs-header-card {
    background: var(--card-bg);
    padding: 36px 32px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
}

.api-intro-card {
    background: var(--card-bg);
    padding: 24px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    margin-bottom: 32px;
}

.api-intro-card p {
    margin: 0;
    font-size: 1.02em;
    line-height: 1.6;
    color: var(--text-color);
}

.api-endpoint-body--single {
    grid-template-columns: 1fr !important;
}

.api-endpoint-details--full {
    border-right: none !important;
}

.sidebar-endpoint-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    padding: 0;
}

.sidebar-endpoint-link {
    font-size: 0.88em;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--text-color);
    padding: 3px 0;
    transition: color 0.15s ease;
    font-family: 'JetBrains Mono', monospace;
}

.sidebar-endpoint-link:hover {
    color: var(--primary-color);
}

.api-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 16px 0;
}
.api-table-scroll-hint {
    display: none;
}

@media (max-width: 768px) {
    .api-table-scroll-hint {
        display: block;
        margin: 0 0 8px;
        color: var(--text-light);
        font-size: 0.75rem;
        line-height: 1.3;
    }

    .api-table {
        min-width: max-content;
    }
}

.api-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.api-table th, .api-table td {
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    text-align: left;
    vertical-align: top;
}

.api-table th {
    background: var(--bg-color);
    font-weight: 600;
    color: var(--text-color);
}

.api-table code {
    color: var(--primary-color);
    font-family: 'JetBrains Mono', monospace;
    background: var(--bg-color);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}
/* High-Contrast Syntax Highlighting Overrides for ALWAYS-DARK Terminals */
.api-endpoint-code .hljs {
    color: #F8FAFC !important; /* Crisp slate-50 base text */
}

.api-endpoint-code .hljs-keyword,
.api-endpoint-code .hljs-selector-tag,
.api-endpoint-code .hljs-literal,
.api-endpoint-code .hljs-section,
.api-endpoint-code .hljs-link {
    color: #38BDF8 !important; /* Sky-400 for keywords */
    font-weight: 600;
}

.api-endpoint-code .hljs-string,
.api-endpoint-code .hljs-symbol,
.api-endpoint-code .hljs-bullet,
.api-endpoint-code .hljs-addition {
    color: #34D399 !important; /* Emerald-400 for strings */
}

.api-endpoint-code .hljs-attr,
.api-endpoint-code .hljs-attribute,
.api-endpoint-code .hljs-params {
    color: #FB7185 !important; /* Rose-400 for parameters and attributes */
}

.api-endpoint-code .hljs-number,
.api-endpoint-code .hljs-regexp,
.api-endpoint-code .hljs-variable {
    color: #FBBF24 !important; /* Amber-400 for numbers */
}

.api-endpoint-code .hljs-comment,
.api-endpoint-code .hljs-quote,
.api-endpoint-code .hljs-meta {
    color: #64748B !important; /* Slate-500 for comments */
    font-style: italic;
}

/* API Docs REST Split Layout Styling */
.api-docs-top-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 32px;
    align-items: start;
    width: 100%;
}

.api-docs-intro-column {
    min-width: 0;
    width: 100%;
}

.api-endpoint-details {
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.api-docs-endpoints-section {
    margin-top: 48px;
    width: 100%;
}

.endpoints-section-title {
    font-size: 1.8em;
    font-weight: 700;
    margin-bottom: 28px;
    letter-spacing: -0.5px;
    color: var(--text-color);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 12px;
}

/* Mobile responsive collapse for the new split layout */
@media (max-width: 1024px) {
    .api-docs-top-section {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 24px !important;
    }
}
/* Fullscreen Editing Mode Styles */
body.fullscreen-open {
    overflow: hidden !important;
}

.preview-section.fullscreen-active {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
    background: var(--bg-color) !important;
    padding: 24px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    box-sizing: border-box !important;
}

.preview-section.fullscreen-active > div {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important; /* Prevent column div overflow */
}

.preview-section.fullscreen-active textarea.markdown-input {
    flex: 1 !important;
    resize: none !important;
    height: calc(100vh - 110px) !important; /* Strictly lock height inside viewport subtraction */
    overflow-y: auto !important; /* Force internal scrollbar */
    margin-bottom: 0 !important;
}

.preview-section.fullscreen-active .markdown-preview {
    flex: 1 !important;
    height: calc(100vh - 110px) !important; /* Strictly lock height inside viewport subtraction */
    overflow-y: auto !important; /* Force internal scrollbar */
}

/* Fullscreen icon rotation on active state */
.preview-section.fullscreen-active .fullscreen-icon {
    transform: rotate(180deg);
}
/* Accessibility utilities */
.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;
}

/* Underline inline content links so they're distinguishable without relying
   on color alone (Lighthouse a11y). Nav, footer-link blocks, and buttons keep
   their existing styles. */
.seo-section a,
.markdown-body a {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* Upload surface and affordances */
.file-input-wrapper {
    background: var(--card-bg);
}

.drop-icon {
    display: block;
    margin: 0 auto 12px;
    color: var(--text-light);
    opacity: 0.7;
    transition: color 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}

.file-input-wrapper:hover .drop-icon {
    color: var(--primary-color);
    opacity: 1;
    transform: translateY(-2px);
}

.file-input-wrapper.dragover .drop-icon {
    color: var(--primary-color);
    opacity: 0.35;
}

.drop-cta {
    color: var(--primary-text);
    font-weight: 600;
}


/* 6. Per-entry history delete control (counterpart to "Clear all"). Sits at the
   far right of the flex .history-item row. Same visual language as .queue-remove. */
.history-remove,
.queue-remove {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--text-light);
    font-size: 1.1em;
    line-height: 1;
    cursor: pointer;
    opacity: 0.5;
    transition: color 0.15s ease, opacity 0.15s ease, background 0.15s ease;
}
.history-remove:hover,
.history-remove:focus-visible,
.queue-remove:hover,
.queue-remove:focus-visible {
    color: var(--error-color);
    opacity: 1;
    background: var(--primary-alpha);
    outline: none;
}
.queue-remove[hidden] {
    display: none;
}

/* Cookie consent banner — opt-in gate for Google Analytics + AdSense (Law 25). */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    box-shadow: var(--shadow-lg);
    padding: 8px 16px;
    width: 100%;
    max-width: none;
}

.cookie-consent[hidden] {
    display: none;
}

.cookie-consent-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    max-width: 1280px;
    margin: 0 auto;
}

.cookie-consent-title {
    margin: 0;
    color: var(--text-color);
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
}

.cookie-consent-text {
    margin: 0;
    flex: 1 1 220px;
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--text-color);
}

.cookie-consent-text a {
    color: var(--primary-text);
    text-decoration: underline;
}

.cookie-consent-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
}

.cookie-btn {
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: var(--transition);
}

.cookie-btn-primary {
    background: var(--primary-text);
    color: var(--card-bg);
}

.cookie-btn-primary:hover {
    background: var(--primary-dark);
}

.cookie-btn-secondary {
    background: transparent;
    border-color: var(--border-color);
    color: var(--text-color);
}

.cookie-btn-secondary:hover {
    background: var(--primary-alpha);
}

.cookie-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.cookie-prefs-link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: var(--text-light);
    text-decoration: underline;
    transition: var(--transition);
}

.cookie-prefs-link:hover,
.cookie-prefs-link:focus-visible {
    color: var(--primary-text);
    outline: none;
}

@media (max-width: 768px) {
    .cookie-consent-title {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .cookie-consent-inner {
        flex-wrap: nowrap;
        align-items: flex-start;
    }
    .cookie-consent-text {
        flex: 1 1 auto;
        min-width: 0;
    }
    .cookie-consent-actions {
        flex-shrink: 0;
        margin-left: 0;
    }
    .cookie-btn {
        padding: 8px 10px;
        font-size: 0.8rem;
    }
}

/* Component polish: shared typography, states, and interaction feedback. */

/* Heading weights throughout */
h1, h2, h3, h4, h5, h6 {
    font-family: 'DM Sans', -apple-system, sans-serif;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

/* Card hover lift on all bordered cards */
.main-content,
.conversion-card,
.sidebar-section,
.support-card,
.history-panel,
.file-queue {
    transition: box-shadow 0.25s cubic-bezier(0.4,0,0.2,1), border-color 0.25s ease;
}

.sidebar-section:hover,
.support-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: rgba(14, 165, 233, 0.25);
}


/* History item hover */
.history-item {
    transition: background 0.18s ease, box-shadow 0.18s ease;
}

.history-item:hover {
    background: var(--primary-alpha);
    box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.12);
}

/* File queue item hover */
.file-queue-item {
    transition: background 0.18s ease;
}

.file-queue-item:hover {
    background: var(--primary-alpha);
}

/* Improved clear history button */
.clear-history-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-light);
    padding: 4px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.78em;
    font-weight: 600;
    transition: all 0.18s ease;
}

.clear-history-btn:hover {
    border-color: var(--error-color);
    color: var(--error-color);
    background: rgba(239, 68, 68, 0.06);
}

/* Improved settings toggle */
.settings-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 9px 16px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-light);
    cursor: pointer;
    font-size: 0.85em;
    font-weight: 500;
    transition: all 0.2s ease;
    letter-spacing: 0.01em;
}

.settings-toggle:hover {
    border-color: var(--primary-color);
    color: var(--text-color);
    background: var(--primary-alpha);
}


/* SEO section links inline underline */
.seo-section h2 {
    font-size: 1.25em;
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--text-color);
    letter-spacing: -0.01em;
}

/* Notice subtle improved */
.notice--subtle {
    font-size: 0.8em;
    padding: 10px 18px;
    opacity: 0.75;
    margin: 8px auto;
    max-width: 800px;
    border-radius: 10px;
}

/* Markdown input textarea */
.markdown-input {
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 0.88em;
    line-height: 1.65;
    border-radius: 12px;
    background: var(--bg-color);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.markdown-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

/* Markdown preview panel */
.markdown-preview {
    border-radius: 12px;
    border-color: var(--border-color);
}



/* Format pill mobile responsive */
@media (max-width: 600px) {
    .format-pills {
        gap: 4px;
    }
    .format-pill {
        font-size: 10px;
        padding: 3px 9px;
    }
}

/* Backend selector mobile: keep horizontal layout as long as possible */
@media (max-width: 480px) {
    .backend-selector-unified {
        flex-direction: column;
    }
}


/* =====================================================================
   Touch targets — WCAG 2.5.5 / Apple HIG 44pt / Material 48dp.
   Scoped to coarse pointers so desktop density is unchanged. Inline links
   inside prose are intentionally excluded (WCAG 2.5.8 inline exception);
   only standalone controls are enlarged.
   ===================================================================== */
@media (pointer: coarse) {
    .theme-toggle-btn,
    .mobile-menu-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .shortcut-trigger {
        min-width: 44px;
        min-height: 44px;
    }

    .settings-toggle {
        min-height: 44px;
    }

    /* Stacked footer navigation: real standalone targets, unlike the prose
       links in .seo-section, which are left alone. */
    .site-footer .footer-section ul li a,
    .cookie-prefs-link,
    .nav-logo {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* Skip link — first focusable element on the page. Off-screen until focused,
   then anchored top-left so keyboard users can bypass the nav (WCAG 2.4.1). */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
    padding: 12px 20px;
    background: var(--card-bg);
    color: var(--primary-text);
    font-weight: 600;
    border: 1px solid var(--border-color);
    border-radius: 0 0 var(--border-radius-sm) 0;
    box-shadow: var(--shadow);
    transform: translateY(-120%);
    transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.skip-link:focus {
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .skip-link {
        transition: none;
    }
    .spinner,
    .progress-bar.indeterminate,
    .notification,
    .preview-section--reveal,
    .main-container,
    .backend-selector-unified.switching {
        animation: none !important;
    }
    .progress-bar {
        transition: none !important;
    }
}

/* =====================================================================
   Error & 404 Pages
   ===================================================================== */
.error-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--nav-height) - 260px);
    padding: 40px 24px;
}

.error-content {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 48px 40px;
    max-width: 540px;
    width: 100%;
    text-align: center;
    box-shadow: var(--shadow);
}

.error-content h1 {
    font-size: 3.5em;
    font-weight: 800;
    color: var(--text-color);
    letter-spacing: -2px;
    line-height: 1;
    margin-bottom: 8px;
    font-family: 'JetBrains Mono', monospace;
}

.error-content h2 {
    font-size: 1.35em;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 12px;
    letter-spacing: -0.3px;
}

.error-content p {
    color: var(--text-light);
    font-size: 0.95em;
    line-height: 1.6;
    margin-bottom: 24px;
}

.error-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.error-suggestions {
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
    text-align: left;
}

.error-suggestions h3 {
    font-size: 0.88em;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.error-suggestions ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.error-suggestions ul li a {
    font-size: 0.9em;
    color: var(--primary-text);
    text-decoration: none;
}

.error-suggestions ul li a:hover {
    text-decoration: underline;
}

.about-cta-section {
    text-align: center;
}

.about-cta-list {
    display: inline-block;
    text-align: left;
}

.about-cta {
    display: inline-flex;
    margin-top: 10px;
}

.contact-support-link {
    margin-top: 16px;
}

.api-inline-link {
    color: var(--primary-text);
    text-decoration: none;
}

.notice--centered {
    text-align: center;
}

.queue-title {
    margin: 0;
    font-size: 0.95em;
}

.honeypot-field {
    display: none;
}