/* ===== RESET & BASE ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #667eea;
    /* WCAG 2.2 SC 1.4.3 fix: --primary #667eea is only 3.66:1 on white, 3.53:1 on the
       body #fafbfc and 3.33:1 on --light-gray, all under the 4.5:1 AA minimum for text.
       --primary-text is the same hue darkened to #4f5fd4, which measures 5.36:1 on white,
       5.17:1 on #fafbfc and 4.87:1 on --light-gray. Use it for any text or link that
       renders on a light background. Keep --primary for gradients, borders, icons and
       slider thumbs, where only the 3:1 non-text threshold of SC 1.4.11 applies, so the
       visual design is unchanged. Note --primary-text is NOT safe on the dark footer
       (3.18:1 there), where --primary itself already passes at 4.66:1. */
    --primary-text: #4f5fd4;
    --primary-dark: #5a6fd6;
    --secondary: #764ba2;
    --pdf-color: #e74c3c;
    --pdf-bg: #fdf2f2;
    --image-color: #3498db;
    --image-bg: #f0f7ff;
    --audio-color: #9b59b6;
    --audio-bg: #f8f0ff;
    --security-color: #27ae60;
    --security-bg: #f0fdf4;
    --dark: #1a1a2e;
    --gray: #6b7280;
    --light-gray: #f3f4f6;
    --white: #ffffff;
    --shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-lg: 0 20px 40px rgba(0,0,0,0.1);
    --radius: 12px;
    --transition: all 0.3s ease;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: #333;
    background: #fafbfc;
    line-height: 1.6;
    overflow-x: hidden;
}

a { text-decoration: none; color: inherit; cursor: pointer; }

/* WCAG 2.2 SC 2.4.7 Focus Visible: several rules below clear the browser default with
   outline: none. This is the site wide replacement indicator, a 3px ring offset off the
   control so it stays visible on every background. It uses :focus-visible so pointer
   users never see it, which is why the old outline: none was added in the first place. */
:focus-visible {
    outline: 3px solid var(--primary-text);
    outline-offset: 2px;
}

/* On the dark footer --primary-text drops to 3.18:1, so the ring is painted white there. */
.footer :focus-visible { outline-color: var(--white); }

/* ===== NAVBAR ===== */
.navbar {
    background: var(--white);
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.4rem;
    color: var(--dark);
}

.logo i {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.6rem;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-link {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gray);
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* SC 1.4.3: the hovered label sits on --light-gray, where --primary is only 3.33:1.
   --primary-text lifts it to 4.87:1. The hover state also applies on keyboard focus so
   the trigger reads as active when tabbed to. */
.nav-link:hover,
.nav-link:focus-visible { color: var(--primary-text); background: var(--light-gray); }

.nav-link .fa-chevron-down { font-size: 0.6rem; }

.nav-dropdown { position: relative; }

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    min-width: 220px;
    padding: 8px;
    z-index: 100;
    border: 1px solid #eee;
}

/* WCAG 2.2 SC 2.1.1 Keyboard fix: this panel was hover-only, so its links stayed
   display: none for a keyboard user and never entered the tab order, putting roughly 100
   navigation links out of reach. :focus-within opens the panel as soon as the trigger or
   any link inside it takes focus, and .open lets the script toggle it on click or Escape.
   The panel must be display: block before its links can be tabbed to, so all three
   selectors set the same property. */
.nav-dropdown:hover .dropdown-content,
.nav-dropdown:focus-within .dropdown-content,
.nav-dropdown.open .dropdown-content { display: block; }

.dropdown-content a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.88rem;
    color: #555;
    transition: var(--transition);
}

/* SC 1.4.3: --primary on --light-gray is 3.33:1, --primary-text is 4.87:1.
   :focus-visible is matched to :hover so a tabbed link is visibly highlighted. */
.dropdown-content a:hover,
.dropdown-content a:focus-visible {
    background: var(--light-gray);
    color: var(--primary-text);
}

.dropdown-content a i { width: 18px; text-align: center; }

.mobile-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--gray);
}

/* Mobile Menu */
.mobile-menu {
    display: none;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--white);
    z-index: 999;
    padding: 20px;
    overflow-y: auto;
}

.mobile-menu.active { display: block; }

.mobile-menu-section { margin-bottom: 20px; }

.mobile-menu-section h3 {
    font-size: 0.85rem;
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

.mobile-menu-section a {
    display: block;
    padding: 10px 16px;
    border-radius: 8px;
    color: #444;
    font-size: 0.95rem;
}

.mobile-menu-section a:hover { background: var(--light-gray); }

/* ===== HERO ===== */
.hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 80px 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 30px 30px;
    animation: float 20s linear infinite;
}

@keyframes float {
    0% { transform: translate(0, 0); }
    100% { transform: translate(30px, 30px); }
}

.hero-content {
    position: relative;
    max-width: 700px;
    margin: 0 auto;
}

.hero h1 {
    font-size: 3rem;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 16px;
    line-height: 1.2;
}

.gradient-text {
    background: linear-gradient(135deg, #ffd89b, #ff6b6b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero p {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.85);
    margin-bottom: 32px;
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.stat {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.9);
    font-weight: 600;
    font-size: 0.95rem;
}

.stat i {
    font-size: 1.1rem;
    color: #ffd89b;
}

/* ===== SECTIONS ===== */
.section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 24px;
}

.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.section-header h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 8px;
}

.section-header p {
    color: var(--gray);
    font-size: 1.05rem;
}

/* ===== TOOL SECTIONS (converter, security, business categories) ===== */
.tool-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 24px;
}

.section-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 32px;
    text-align: center;
}

.section-title i {
    margin-right: 8px;
}

/* ===== TOOL CARDS ===== */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}

.tool-card {
    display: block;
    background: var(--white);
    border-radius: var(--radius);
    padding: 28px 24px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    border: 2px solid transparent;
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
}

.tool-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.tool-card.pdf:hover { border-color: var(--pdf-color); }
.tool-card.image:hover { border-color: var(--image-color); }
.tool-card.audio:hover { border-color: var(--audio-color); }
.tool-card.security:hover { border-color: var(--security-color); }
.tool-card.dev:hover { border-color: #e67e22; }
.tool-card.calc:hover { border-color: #2980b9; }
.tool-card.text:hover { border-color: #8e44ad; }
.tool-card.seo:hover { border-color: #16a085; }
.tool-card.gen:hover { border-color: #e74c3c; }
.tool-card.fun:hover { border-color: #e74c3c; }
.tool-card.popular:hover { border-color: #e74c3c; }
.tool-card.legal:hover { border-color: #c0392b; }
.tool-card.insurance:hover { border-color: #2c3e50; }
.tool-card.mortgage:hover { border-color: #8e44ad; }
.tool-card.debt:hover { border-color: #d35400; }
.tool-card.auto:hover { border-color: #2980b9; }
.tool-card.medical:hover { border-color: #e74c3c; }
.tool-card.retirement:hover { border-color: #27ae60; }
.tool-card.tax:hover { border-color: #8e44ad; }
.tool-card.enterprise:hover { border-color: #34495e; }
.tool-card.realestate:hover { border-color: #16a085; }
.tool-card.smallbiz:hover { border-color: #e67e22; }
.tool-card.education:hover { border-color: #3498db; }

.tool-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 1.6rem;
}

.pdf .tool-icon { background: var(--pdf-bg); color: var(--pdf-color); }
.image .tool-icon { background: var(--image-bg); color: var(--image-color); }
.audio .tool-icon { background: var(--audio-bg); color: var(--audio-color); }
.security .tool-icon { background: var(--security-bg); color: var(--security-color); }
.dev .tool-icon { background: #fef3e2; color: #e67e22; }
.calc .tool-icon { background: #ebf5fb; color: #2980b9; }
.text .tool-icon { background: #f5eef8; color: #8e44ad; }
.seo .tool-icon { background: #e8f8f5; color: #16a085; }
.gen .tool-icon { background: #fdf2f2; color: #e74c3c; }
.fun .tool-icon { background: #fdf2f2; color: #e74c3c; }
.popular .tool-icon { background: linear-gradient(135deg, #fdf2f2, #fef3e2); color: #e74c3c; }

/* Business / Finance category icon colors */
.legal .tool-icon { background: #fbeaea; color: #c0392b; }
.insurance .tool-icon { background: #ebedef; color: #2c3e50; }
.mortgage .tool-icon { background: #f5eef8; color: #8e44ad; }
.debt .tool-icon { background: #fdf2e9; color: #d35400; }
.auto .tool-icon { background: #ebf5fb; color: #2980b9; }
.medical .tool-icon { background: #fdf2f2; color: #e74c3c; }
.retirement .tool-icon { background: #eafaf1; color: #27ae60; }
.tax .tool-icon { background: #f5eef8; color: #8e44ad; }
.enterprise .tool-icon { background: #ebedef; color: #34495e; }
.realestate .tool-icon { background: #e8f8f5; color: #16a085; }
.smallbiz .tool-icon { background: #fef3e2; color: #e67e22; }
.education .tool-icon { background: #ebf5fb; color: #3498db; }

/* Converter category icon colors */
.length .tool-icon { background: #ebf5fb; color: #3498db; }
.weight .tool-icon { background: #fef3e2; color: #e67e22; }
.temperature .tool-icon { background: #fdf2f2; color: #e74c3c; }
.volume .tool-icon { background: #f5eef8; color: #9b59b6; }
.speed .tool-icon { background: #e8f8f5; color: #1abc9c; }
.area .tool-icon { background: #eafaf1; color: #2ecc71; }
.digital .tool-icon { background: #ebf5fb; color: #3498db; }
.pressure .tool-icon { background: #f2f3f4; color: #95a5a6; }
.energy .tool-icon { background: #fef9e7; color: #f39c12; }
.fuel .tool-icon { background: #eafaf1; color: #27ae60; }
.time .tool-icon { background: #f5eef8; color: #8e44ad; }
.miscconv .tool-icon { background: #ebedef; color: #2c3e50; }

/* Security category icon colors */
.linksec .tool-icon { background: #fdf2f2; color: #e74c3c; }
.emailsec .tool-icon { background: #ebf5fb; color: #3498db; }
.authsec .tool-icon { background: #fef9e7; color: #f39c12; }
.netsec .tool-icon { background: #eafaf1; color: #2ecc71; }
.privacy .tool-icon { background: #f5eef8; color: #9b59b6; }
.encryption .tool-icon { background: #e8f8f5; color: #1abc9c; }
.hashing .tool-icon { background: #fef3e2; color: #e67e22; }
.websec .tool-icon { background: #ebedef; color: #2c3e50; }
.compliance .tool-icon { background: #eafaf1; color: #27ae60; }
.forensics .tool-icon { background: #f5eef8; color: #8e44ad; }
.dataconv .tool-icon { background: #ebf5fb; color: #3498db; }
.academic .tool-icon { background: #fef9e7; color: #d4ac0d; }
.vulncve .tool-icon { background: #fdf2f2; color: #e74c3c; }
.blueteam .tool-icon { background: #ebf5fb; color: #2980b9; }
.netdefense .tool-icon { background: #eafaf1; color: #27ae60; }
.space .tool-icon { background: #ebedef; color: #2c3e50; }
.physics .tool-icon { background: #ebf5fb; color: #2980b9; }
.chemistry .tool-icon { background: #eafaf1; color: #27ae60; }
.geometry .tool-icon { background: #f5eef8; color: #9b59b6; }
.devops .tool-icon { background: #fef3e2; color: #e67e22; }
.codeutil .tool-icon { background: #ebedef; color: #34495e; }
.webperf .tool-icon { background: #fdf2f2; color: #e74c3c; }
.dbtools .tool-icon { background: #ebf5fb; color: #3498db; }
.secauth .tool-icon { background: #fef9e7; color: #f39c12; }
.colordesign .tool-icon { background: #f5eef8; color: #8e44ad; }
.devmath .tool-icon { background: #e8f8f5; color: #1abc9c; }

/* ===== STANDALONE TOOL PANELS ===== */
.standalone-tool {
    background: var(--white);
    border-radius: var(--radius);
    padding: 32px;
    box-shadow: var(--shadow);
}

.standalone-tool h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 16px;
}

.password-display {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--light-gray);
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 16px;
    font-family: 'Courier New', monospace;
    font-size: 1.1rem;
    word-break: break-all;
}

.password-display input {
    flex: 1;
    background: none;
    border: none;
    font-family: 'Courier New', monospace;
    font-size: 1.1rem;
    color: var(--dark);
}

/* SC 2.4.7: this field had a bare outline: none and no replacement, so a keyboard user
   landing on the generated password saw no indicator at all. The ring is scoped to
   :focus-visible, which keeps the field clean for mouse users as before. */
.password-display input:focus-visible {
    outline: 3px solid var(--primary-text);
    outline-offset: 2px;
}

.password-strength {
    height: 6px;
    border-radius: 3px;
    margin-bottom: 12px;
    transition: var(--transition);
}

.strength-weak { background: #ef4444; width: 25%; }
.strength-fair { background: #f59e0b; width: 50%; }
.strength-good { background: #3b82f6; width: 75%; }
.strength-strong { background: #10b981; width: 100%; }

.strength-label {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 16px;
}

.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    cursor: pointer;
}

.hash-output {
    background: var(--light-gray);
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 8px;
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    word-break: break-all;
    position: relative;
}

.hash-output .hash-label {
    font-weight: 700;
    /* SC 1.4.3: 0.75rem text on the --light-gray panel, so the 4.5:1 minimum applies and
       --primary gave only 3.33:1. --primary-text gives 4.87:1. */
    color: var(--primary-text);
    font-family: 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.hash-output .hash-value {
    color: var(--dark);
    user-select: all;
}

.diff-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.diff-container textarea {
    width: 100%;
    min-height: 200px;
    padding: 14px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    resize: vertical;
    transition: var(--transition);
}

/* SC 2.4.7: outline: none left only a 2px border tint as the focus cue, which is easy to
   miss beside the unfocused 2px border. The border change is kept for the visual design
   and a real ring is added back for keyboard focus. */
.diff-container textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.diff-container textarea:focus-visible {
    outline: 3px solid var(--primary-text);
    outline-offset: 2px;
}

.diff-result {
    background: var(--white);
    border-radius: 8px;
    padding: 16px;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    line-height: 1.8;
    border: 2px solid #e5e7eb;
    max-height: 400px;
    overflow-y: auto;
}

.diff-result .diff-added {
    background: #dcfce7;
    color: #166534;
    padding: 2px 4px;
    display: block;
}

.diff-result .diff-removed {
    background: #fef2f2;
    color: #991b1b;
    padding: 2px 4px;
    display: block;
    text-decoration: line-through;
}

.diff-result .diff-same {
    display: block;
    padding: 2px 4px;
}

.color-display {
    width: 100%;
    height: 120px;
    border-radius: 12px;
    margin-bottom: 16px;
    border: 2px solid #e5e7eb;
    transition: var(--transition);
}

.color-values {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.color-value-box {
    background: var(--light-gray);
    border-radius: 8px;
    padding: 10px 14px;
    text-align: center;
}

.color-value-box .label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--gray);
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.color-value-box .value {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dark);
    user-select: all;
}

.word-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.word-stat-box {
    background: var(--light-gray);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
}

.word-stat-box .number {
    font-size: 1.8rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.word-stat-box .label {
    font-size: 0.8rem;
    color: var(--gray);
    margin-top: 4px;
}

.qr-output {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    background: var(--white);
    border-radius: var(--radius);
    margin-top: 16px;
}

@media (max-width: 768px) {
    .diff-container { grid-template-columns: 1fr; }
    .color-values { grid-template-columns: 1fr 1fr; }
}

.tool-card h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 6px;
}

.tool-card p {
    font-size: 0.88rem;
    color: var(--gray);
}

/* ===== FEATURES ===== */
.features-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 24px 80px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.feature {
    text-align: center;
    padding: 32px 24px;
}

.feature i {
    font-size: 2.2rem;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 16px;
}

.feature h3 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 8px;
}

.feature p {
    color: var(--gray);
    font-size: 0.92rem;
}

/* ===== TOOL PAGE ===== */
.page { display: none; }
.page.active { display: block; }

.tool-page-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 24px 80px;
}

.tool-header {
    text-align: center;
    margin-bottom: 32px;
}

.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--gray);
    font-size: 0.9rem;
    margin-bottom: 16px;
    transition: var(--transition);
}

/* SC 1.4.3: 0.9rem link on the #fafbfc body, where --primary is 3.53:1 and
   --primary-text is 5.17:1. */
.back-btn:hover,
.back-btn:focus-visible { color: var(--primary-text); }

.tool-header h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 8px;
}

.tool-header p {
    color: var(--gray);
    font-size: 1rem;
}

/* ===== UPLOAD AREA ===== */
.upload-area {
    border: 3px dashed #d1d5db;
    border-radius: var(--radius);
    padding: 60px 40px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    background: var(--white);
    position: relative;
}

.upload-area:hover,
.upload-area.dragover {
    border-color: var(--primary);
    background: #f0f3ff;
}

/* SC 2.4.7: the real control is an input[type="file"] stretched over this box at
   opacity: 0, and opacity applies to the browser focus ring too, so focusing it painted
   nothing at all. :focus-within moves the indicator onto the visible parent, which is
   opaque, so the ring is actually rendered. */
.upload-area:focus-within {
    border-color: var(--primary);
    background: #f0f3ff;
    outline: 3px solid var(--primary-text);
    outline-offset: 2px;
}

.upload-area i {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 16px;
}

.upload-area h3 {
    font-size: 1.2rem;
    color: var(--dark);
    margin-bottom: 8px;
}

.upload-area p {
    color: var(--gray);
    font-size: 0.9rem;
}

.upload-area input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* ===== FILE LIST ===== */
.file-list {
    margin-top: 20px;
}

.file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--white);
    border-radius: 8px;
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.file-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.file-info i {
    font-size: 1.3rem;
    color: var(--primary);
}

.file-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-size {
    font-size: 0.8rem;
    color: var(--gray);
    margin-left: 8px;
    white-space: nowrap;
}

.file-remove {
    background: none;
    border: none;
    color: #e74c3c;
    cursor: pointer;
    font-size: 1rem;
    padding: 4px 8px;
    border-radius: 4px;
    transition: var(--transition);
}

.file-remove:hover { background: #fdf2f2; }

/* ===== OPTIONS PANEL ===== */
.options-panel {
    background: var(--white);
    border-radius: var(--radius);
    padding: 24px;
    margin-top: 20px;
    box-shadow: var(--shadow);
}

.options-panel h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.option-group {
    margin-bottom: 16px;
}

.option-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: #555;
    margin-bottom: 6px;
}

.option-group input,
.option-group select,
.option-group textarea {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: var(--transition);
    font-family: inherit;
}

.option-group input:focus,
.option-group select:focus,
.option-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(102,126,234,0.15);
}

/* SC 2.4.7: the 15% alpha halo above is far too faint to serve as the only indicator
   once outline: none removed the browser default. A solid ring is restored for keyboard
   focus while the halo stays for the pointer look. */
.option-group input:focus-visible,
.option-group select:focus-visible,
.option-group textarea:focus-visible {
    outline: 3px solid var(--primary-text);
    outline-offset: 2px;
}

.option-row {
    display: flex;
    gap: 16px;
    align-items: end;
}

.option-row .option-group { flex: 1; }

.range-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.range-group input[type="range"] {
    flex: 1;
    padding: 0;
    height: 6px;
    border: none;
    -webkit-appearance: none;
    appearance: none;
    background: #e5e7eb;
    border-radius: 3px;
    outline: none;
}

/* SC 2.4.7: a range slider is keyboard operable with the arrow keys, but outline: none
   above removed its only focus cue, so a keyboard user could not tell which slider the
   arrow keys were driving. */
.range-group input[type="range"]:focus-visible {
    outline: 3px solid var(--primary-text);
    outline-offset: 4px;
}

.range-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(102,126,234,0.3);
}

.range-value {
    font-size: 0.9rem;
    font-weight: 600;
    /* SC 1.4.3: 14.4px at weight 600 is not large text (that needs 18.66px bold or 24px),
       so 4.5:1 applies and --primary gave 3.66:1. --primary-text gives 5.36:1. This is
       the only place the live slider value is shown. */
    color: var(--primary-text);
    min-width: 40px;
    text-align: center;
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: var(--white);
    box-shadow: 0 4px 15px rgba(102,126,234,0.35);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102,126,234,0.45);
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary {
    background: var(--light-gray);
    color: var(--dark);
}

.btn-secondary:hover { background: #e5e7eb; }

.btn-success {
    background: linear-gradient(135deg, #10b981, #059669);
    color: var(--white);
    box-shadow: 0 4px 15px rgba(16,185,129,0.35);
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16,185,129,0.45);
}

.btn-large {
    padding: 16px 40px;
    font-size: 1.05rem;
    border-radius: 10px;
}

.action-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
}

/* ===== PROGRESS ===== */
.progress-container {
    margin-top: 24px;
    display: none;
}

.progress-container.active { display: block; }

.progress-bar-wrapper {
    background: #e5e7eb;
    border-radius: 8px;
    height: 8px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 8px;
    transition: width 0.3s ease;
    width: 0%;
}

.progress-text {
    font-size: 0.85rem;
    color: var(--gray);
    text-align: center;
}

/* ===== RESULT ===== */
.result-area {
    margin-top: 24px;
    padding: 32px;
    background: #f0fdf4;
    border-radius: var(--radius);
    text-align: center;
    display: none;
    animation: slideIn 0.3s ease;
}

.result-area.active { display: block; }

.result-area i {
    font-size: 2.5rem;
    color: #10b981;
    margin-bottom: 12px;
}

.result-area h3 {
    font-size: 1.2rem;
    color: var(--dark);
    margin-bottom: 8px;
}

.result-area p {
    color: var(--gray);
    font-size: 0.9rem;
    margin-bottom: 20px;
}

/* ===== PREVIEW ===== */
.preview-container {
    margin-top: 20px;
    background: var(--white);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
}

.preview-container h3 {
    font-size: 1rem;
    color: var(--dark);
    margin-bottom: 16px;
}

.preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.preview-item {
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #e5e7eb;
    position: relative;
}

.preview-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
}

.preview-item .preview-label {
    padding: 6px 10px;
    font-size: 0.78rem;
    color: var(--gray);
    background: #fafafa;
    text-align: center;
}

/* ===== AUDIO PLAYER ===== */
.audio-player-container {
    background: var(--white);
    border-radius: var(--radius);
    padding: 20px;
    margin-top: 16px;
    box-shadow: var(--shadow);
}

.audio-player-container audio {
    width: 100%;
    margin-top: 8px;
}

.audio-waveform {
    height: 80px;
    background: var(--light-gray);
    border-radius: 8px;
    margin: 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray);
    font-size: 0.85rem;
}

/* ===== CANVAS AREA (for crop) ===== */
.canvas-container {
    position: relative;
    display: inline-block;
    margin: 0 auto;
    max-width: 100%;
}

.canvas-container canvas {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: var(--shadow);
}

/* ===== TOAST ===== */
.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--dark);
    color: var(--white);
    padding: 14px 24px;
    border-radius: 10px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--shadow-lg);
    transform: translateY(100px);
    opacity: 0;
    transition: var(--transition);
    z-index: 10000;
}

.toast.show {
    transform: translateY(0);
    opacity: 1;
}

.toast.success { background: #059669; }
.toast.error { background: #dc2626; }

/* ===== FOOTER ===== */
.footer {
    background: var(--dark);
    color: rgba(255,255,255,0.7);
    padding: 60px 24px 0;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    padding-bottom: 40px;
}

.footer-brand h3 {
    color: var(--white);
    font-size: 1.3rem;
    margin-bottom: 8px;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.footer-col h4 {
    color: var(--white);
    font-size: 0.95rem;
    margin-bottom: 12px;
}

.footer-col a {
    display: block;
    font-size: 0.85rem;
    padding: 4px 0;
    transition: var(--transition);
}

.footer-col a:hover { color: var(--primary); }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 20px 0;
    text-align: center;
    font-size: 0.85rem;
}

/* ===== LOADING SPINNER ===== */
.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .nav-links { display: none; }
    .mobile-toggle { display: block; }

    .hero h1 { font-size: 2rem; }
    .hero { padding: 50px 20px; }
    .hero-stats { gap: 20px; flex-wrap: wrap; }

    .tools-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 12px;
    }

    .tool-card { padding: 20px 16px; }
    .tool-icon { width: 50px; height: 50px; font-size: 1.3rem; }

    .footer-content {
        grid-template-columns: 1fr;
    }

    .footer-links {
        grid-template-columns: repeat(2, 1fr);
    }

    .upload-area { padding: 40px 20px; }

    .option-row {
        flex-direction: column;
        gap: 0;
    }

    .action-buttons {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 480px) {
    .hero h1 { font-size: 1.6rem; }
    .tools-grid { grid-template-columns: 1fr 1fr; }
    .footer-links { grid-template-columns: 1fr; }
}

/* Converter category hover colors */
.tool-card.length:hover { border-color: #3498db; }
.tool-card.weight:hover { border-color: #e67e22; }
.tool-card.temperature:hover { border-color: #e74c3c; }
.tool-card.volume:hover { border-color: #9b59b6; }
.tool-card.speed:hover { border-color: #1abc9c; }
.tool-card.area:hover { border-color: #2ecc71; }
.tool-card.digital:hover { border-color: #3498db; }
.tool-card.pressure:hover { border-color: #95a5a6; }
.tool-card.energy:hover { border-color: #f39c12; }
.tool-card.fuel:hover { border-color: #27ae60; }
.tool-card.time:hover { border-color: #8e44ad; }
.tool-card.miscconv:hover { border-color: #2c3e50; }

/* Security category hover colors */
.tool-card.linksec:hover { border-color: #e74c3c; }
.tool-card.emailsec:hover { border-color: #3498db; }
.tool-card.authsec:hover { border-color: #f39c12; }
.tool-card.netsec:hover { border-color: #2ecc71; }
.tool-card.privacy:hover { border-color: #9b59b6; }
.tool-card.encryption:hover { border-color: #1abc9c; }
.tool-card.hashing:hover { border-color: #e67e22; }
.tool-card.websec:hover { border-color: #2c3e50; }
.tool-card.compliance:hover { border-color: #27ae60; }
.tool-card.forensics:hover { border-color: #8e44ad; }
.tool-card.dataconv:hover { border-color: #3498db; }

/* ============================================================
   TBX kit: shared components for the tool bundles that use
   window.TBX. Light theme, matches the site palette.
   ============================================================ */
.tbx-lead { font-size: 0.9rem; color: var(--gray); margin: -8px 0 20px; line-height: 1.6; }
.tbx-hint { font-size: 0.78rem; color: var(--gray); margin: 6px 0 0; line-height: 1.5; }
.tbx-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.tbx-file { width: 100%; padding: 10px 14px; border: 2px dashed #e5e7eb; border-radius: 8px;
    background: var(--light-gray); font-family: inherit; font-size: 0.9rem; cursor: pointer; }
.tbx-file:hover { border-color: var(--primary); }
.tbx-check { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem;
    color: #444; cursor: pointer; margin: 0 14px 10px 0; }
.tbx-check input { width: auto; margin: 0; }
.tbx-out { margin-top: 24px; }
.tbx-out:empty { margin-top: 0; }

.tbx-note { font-size: 0.85rem; line-height: 1.6; padding: 12px 16px; border-radius: 8px;
    border-left: 4px solid; margin: 0 0 14px; }
.tbx-note.tbx-info { background: #f0f7ff; border-color: #3498db; color: #1c4966; }
.tbx-note.tbx-ok   { background: #f0fdf4; border-color: #27ae60; color: #1a5c37; }
.tbx-note.tbx-warn { background: #fffaf0; border-color: #f39c12; color: #7a4b06; }
.tbx-note.tbx-bad  { background: #fdf2f2; border-color: #e74c3c; color: #7d2020; }

.tbx-badge { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: .03em;
    text-transform: uppercase; padding: 3px 9px; border-radius: 999px; margin-right: 6px; }
.tbx-badge.tbx-info { background: #e6f0fb; color: #1c4966; }
.tbx-badge.tbx-ok   { background: #dff5e6; color: #1a5c37; }
.tbx-badge.tbx-warn { background: #fdf0d5; color: #7a4b06; }
.tbx-badge.tbx-bad  { background: #fbdddd; color: #7d2020; }

.tbx-kv { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 1px;
    background: #e9ecf2; border: 1px solid #e9ecf2; border-radius: 8px; overflow: hidden; margin: 0 0 16px; }
.tbx-kv dt { background: var(--light-gray); padding: 10px 14px; font-size: 0.8rem; font-weight: 600; color: #555; }
.tbx-kv dd { background: var(--white); padding: 10px 14px; font-size: 0.85rem; color: var(--dark);
    margin: 0; word-break: break-word; }

.tbx-tablewrap { overflow-x: auto; margin: 0 0 16px; border: 1px solid #e9ecf2; border-radius: 8px; }
.tbx-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
.tbx-table th { background: var(--light-gray); text-align: left; padding: 10px 14px;
    font-weight: 600; color: #444; white-space: nowrap; }
.tbx-table td { padding: 10px 14px; border-top: 1px solid #eef0f4; color: var(--dark); vertical-align: top; }
.tbx-table tr:hover td { background: #fafbfe; }

.tbx-mono { background: #1e2233; color: #d5dbec; border-radius: 8px; padding: 14px 16px;
    font-family: 'Courier New', monospace; font-size: 0.8rem; line-height: 1.6;
    overflow-x: auto; white-space: pre-wrap; word-break: break-word; margin: 0 0 14px; }

.tbx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px; margin: 0 0 18px; }
.tbx-stat { background: var(--light-gray); border-radius: 8px; padding: 14px; text-align: center; }
.tbx-stat-v { display: block; font-size: 1.25rem; font-weight: 700; color: var(--dark); word-break: break-all; }
.tbx-stat-l { display: block; font-size: 0.72rem; color: var(--gray); margin-top: 4px;
    text-transform: uppercase; letter-spacing: .04em; }

.tbx-bar { height: 8px; border-radius: 4px; background: #e9ecf2; overflow: hidden; margin: 0 0 14px; }
.tbx-bar i { display: block; height: 100%; border-radius: 4px; transition: width .3s ease; }
.tbx-bar i.tbx-ok { background: #27ae60; }
.tbx-bar i.tbx-warn { background: #f39c12; }
.tbx-bar i.tbx-bad { background: #e74c3c; }
.tbx-bar i.tbx-info { background: var(--primary); }

.tbx-findings { list-style: none; padding: 0; margin: 0 0 16px; }
.tbx-findings li { padding: 12px 16px; border-radius: 8px; margin-bottom: 8px;
    border-left: 4px solid; font-size: 0.85rem; line-height: 1.55; }
.tbx-findings li strong { display: block; font-weight: 600; }
.tbx-findings li span { display: block; color: var(--gray); margin-top: 3px; }
.tbx-findings li.tbx-ok   { background: #f0fdf4; border-color: #27ae60; }
.tbx-findings li.tbx-warn { background: #fffaf0; border-color: #f39c12; }
.tbx-findings li.tbx-bad  { background: #fdf2f2; border-color: #e74c3c; }
.tbx-findings li.tbx-info { background: #f0f7ff; border-color: #3498db; }

.tbx-score { display: flex; align-items: center; gap: 14px; padding: 18px 22px;
    border-radius: var(--radius); margin: 0 0 18px; border: 2px solid; }
.tbx-score.tbx-ok   { background: #f0fdf4; border-color: #27ae60; }
.tbx-score.tbx-warn { background: #fffaf0; border-color: #f39c12; }
.tbx-score.tbx-bad  { background: #fdf2f2; border-color: #e74c3c; }
.tbx-score-g { font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--dark); }
.tbx-score-n { font-size: 1rem; font-weight: 700; color: #444; }
.tbx-score-l { font-size: 0.85rem; color: var(--gray); }

@media (max-width: 600px) {
    .tbx-kv { grid-template-columns: 1fr; }
    .tbx-kv dt { border-top: 1px solid #e9ecf2; }
    .tbx-score { flex-wrap: wrap; gap: 8px; }
}

/* Sub headings used inside TBX tool results */
.standalone-tool h4.tbx-sub { font-size: 0.95rem; font-weight: 700; color: var(--dark);
    margin: 24px 0 12px; padding-bottom: 8px; border-bottom: 2px solid #eef0f4; }
.tbx-checkrow { display: flex; align-items: flex-start; gap: 10px; width: 100%;
    padding: 10px 12px; border-radius: 8px; margin: 0 0 6px; transition: background .15s ease; }
.tbx-checkrow:hover { background: var(--light-gray); }
.tbx-checkrow input { margin-top: 3px; flex-shrink: 0; }
.tbx-checkrow strong { display: block; font-weight: 600; color: var(--dark); font-size: 0.85rem; }
.tbx-checkrow em { display: block; font-style: normal; color: var(--gray);
    font-size: 0.78rem; margin-top: 2px; line-height: 1.5; }
.tbx-checkrow input:checked ~ span strong { color: #1a5c37; }
/* SC 1.4.3: inherits the 0.85rem label size (13.6px), so 4.5:1 applies.
   --primary was 3.66:1 on the white panel, --primary-text is 5.36:1. */
.standalone-tool output { font-weight: 700; color: var(--primary-text); }
.standalone-tool input[type="range"] { width: 100%; accent-color: var(--primary); }
.tbx-lead code, .tbx-note code { background: rgba(0,0,0,0.06); padding: 1px 5px;
    border-radius: 4px; font-family: 'Courier New', monospace; font-size: 0.92em; }
/* SC 1.4.3: body sized links inside every result panel, 3.66:1 with --primary,
   5.36:1 with --primary-text. */
.tbx-out a { color: var(--primary-text); font-weight: 600; }

/* Hover affordances that replaced inline onmouseover style handlers.
   Inline handlers had to go so the Content-Security-Policy can forbid
   inline script; these do the same job in CSS, and they respect a user
   who has asked the system to reduce motion. */
.tbx-hover-lift { transition: transform .15s ease, box-shadow .15s ease; }
.tbx-hover-lift:hover,
.tbx-hover-lift:focus-visible { transform: translateY(-2px) scale(1.03); box-shadow: var(--shadow); }
.tbx-hover-bright { transition: opacity .15s ease, filter .15s ease; }
.tbx-hover-bright:hover,
.tbx-hover-bright:focus-visible { opacity: 1; filter: brightness(1.08); }
@media (prefers-reduced-motion: reduce) {
    .tbx-hover-lift, .tbx-hover-bright { transition: none; }
    .tbx-hover-lift:hover, .tbx-hover-lift:focus-visible { transform: none; }
}