/* ============================================================================
 * EasyWebConverter — tool-styles.css
 * ----------------------------------------------------------------------------
 * Shared design system for every individual tool page.
 * Loaded once via partials/styles.php, used by partials/tool-layout.php.
 * All colors come from the design tokens defined in assets/css/style.css.
 * ========================================================================== */


/* ============================================================================
 * 1. Page wrapper & breadcrumb
 * ========================================================================== */
.tool-page {
    max-width: 1140px;
}

.tool-breadcrumb {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    padding: 0.65rem 0;
    font-size: 0.9rem;
}
.tool-breadcrumb .breadcrumb { margin: 0; }
.tool-breadcrumb .breadcrumb-item a {
    color: var(--text-2);
    text-decoration: none;
}
.tool-breadcrumb .breadcrumb-item a:hover { color: var(--brand-600); }
.tool-breadcrumb .breadcrumb-item.active { color: var(--text); font-weight: 500; }


/* ============================================================================
 * 2. Hero block
 * ========================================================================== */
.tool-hero {
    background:
        radial-gradient(1200px 400px at 50% -100px,
            color-mix(in srgb, var(--brand-500) 18%, transparent) 0%,
            transparent 60%),
        linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2.25rem 1.75rem 2rem;
    text-align: center;
    margin-bottom: 1.75rem;
    box-shadow: var(--shadow-sm);
}

.tool-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.9rem;
    background: color-mix(in srgb, var(--brand-500) 12%, transparent);
    color: var(--brand-700);
    border: 1px solid color-mix(in srgb, var(--brand-500) 20%, transparent);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
[data-theme="dark"] .tool-hero-badge {
    color: var(--brand-200);
    background: color-mix(in srgb, var(--brand-500) 20%, transparent);
}

.tool-hero-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 800;
    color: var(--text);
    margin: 0 0 0.6rem;
    letter-spacing: -0.02em;
}

.tool-hero-subtitle {
    color: var(--text-2);
    font-size: clamp(0.95rem, 1.4vw, 1.1rem);
    max-width: 42rem;
    margin: 0 auto 1.25rem;
    line-height: 1.55;
}

.tool-hero-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}
.tool-hero-features li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font-size: 0.82rem;
    color: var(--text-2);
}
.tool-hero-features li i { color: var(--brand-600); }


/* ============================================================================
 * 3. Tool workspace (the interactive card)
 * ========================================================================== */
.tool-workspace {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 2rem;
    overflow: hidden;
}

.workspace-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0 0 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.case-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-2);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}
.case-btn:hover {
    color: var(--brand-700);
    border-color: color-mix(in srgb, var(--brand-500) 30%, var(--border));
}
.case-btn.is-active {
    background: var(--brand-600);
    color: white;
    border-color: var(--brand-600);
    box-shadow: 0 6px 14px -8px var(--brand-600);
}

.workspace-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1rem;
}
@media (max-width: 768px) {
    .workspace-grid { grid-template-columns: 1fr; }
}

.workspace-pane { display: flex; flex-direction: column; }

.panel-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
    margin-bottom: 0.4rem;
}
.panel-meta {
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--text-3);
}

.tool-textarea {
    min-height: 220px;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Courier New', monospace;
    font-size: 0.95rem;
    line-height: 1.55;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 0.85rem 0.95rem;
}
.tool-textarea:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 20%, transparent);
    outline: none;
}
.tool-textarea[readonly] {
    background: var(--surface-2);
    cursor: default;
}

.tool-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
    margin-top: 0.5rem;
}
.btn-ghost-modern {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    background: transparent;
    color: var(--text-2);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}
.btn-ghost-modern:hover {
    background: var(--surface-2);
    color: var(--text);
}
.kbd-hint {
    margin-left: auto;
    color: var(--text-3);
    font-size: 0.8rem;
}
.kbd-hint kbd {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    font-size: 0.75rem;
    color: var(--text-2);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-top: 1.25rem;
}
@media (max-width: 576px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* .stat-card / .stat-value / .stat-label inherit from style.css */


/* ============================================================================
 * 4. Generic tool-section (full-width card)
 * ========================================================================== */
.tool-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.75rem;
    margin-bottom: 1.75rem;
    box-shadow: var(--shadow-sm);
}
.section-title {
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.4rem;
    display: flex;
    align-items: center;
}
.section-title i { color: var(--brand-600); }
.section-lead {
    color: var(--text-2);
    margin-bottom: 1.4rem;
    max-width: 48rem;
}


/* ============================================================================
 * 5. How-to-use numbered steps
 * ========================================================================== */
.tool-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
@media (max-width: 768px) {
    .tool-steps { grid-template-columns: 1fr; }
}
.tool-steps li {
    display: flex;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: var(--transition);
}
.tool-steps li:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: color-mix(in srgb, var(--brand-500) 30%, var(--border));
}
.step-number {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    background: var(--brand-600);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
}
.step-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
    color: var(--text);
}
.step-text {
    color: var(--text-2);
    font-size: 0.92rem;
    margin: 0;
    line-height: 1.5;
}


/* ============================================================================
 * 6. Feature / use-case grids
 * ========================================================================== */
/* ----- Feature & Use-case grids ----- */
.feature-grid,
.usecase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.feature-card,
.usecase-card {
    display: flex;              /* ← FIX: force vertical stacking */
    flex-direction: column;     /* ← FIX */
    align-items: flex-start;    /* ← FIX: icon left-aligned, not centered with text */
    gap: .5rem;                 /* ← FIX: clean vertical rhythm */
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    padding: 1.1rem;
    transition: var(--transition, .2s ease);
}

.feature-card:hover,
.usecase-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--brand-200);
}

.feature-card h3,
.usecase-card h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;                  /* ← FIX: gap handles spacing now */
    color: var(--text);
}

.feature-card p,
.usecase-card p {
    font-size: .9rem;
    color: var(--text-2);
    margin: 0;
    line-height: 1.5;
}

/* Icon: square tinted tile, like your screenshot's intent */
.feature-icon,
.usecase-icon {
    font-size: 1.25rem;
    color: var(--brand-600);
    background: color-mix(in srgb, var(--brand-500) 12%, transparent);
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================================
 * 7. Trust list ("why choose")
 * ========================================================================== */
.trust-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem 1.25rem;
}
@media (max-width: 768px) { .trust-list { grid-template-columns: 1fr; } }

.trust-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    color: var(--text);
    font-size: 0.95rem;
}
.trust-check {
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    background: color-mix(in srgb, var(--brand-500) 14%, transparent);
    color: var(--brand-600);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    margin-top: 0.1rem;
}


/* ============================================================================
 * 8. Long-form SEO content
 * ========================================================================== */
.tool-content h2 {
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    font-weight: 700;
    color: var(--text);
    margin: 1.5rem 0 0.6rem;
}
.tool-content h2:first-child { margin-top: 0; }

.tool-content p,
.tool-content li {
    color: var(--text);
    line-height: 1.65;
    font-size: 0.98rem;
}
.tool-content p { margin-bottom: 1rem; }
.tool-content ul { margin: 0 0 1rem 1.1rem; padding: 0; }
.tool-content li { margin-bottom: 0.5rem; }
.tool-content strong { color: var(--text); font-weight: 600; }

.tool-content code {
    background: var(--surface-2);
    color: var(--brand-700);
    padding: 0.12rem 0.4rem;
    border-radius: 4px;
    font-size: 0.88em;
    border: 1px solid var(--border);
}
[data-theme="dark"] .tool-content code { color: var(--brand-200); }

.tool-table {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.tool-table thead th {
    background: var(--surface-2);
    color: var(--text);
    font-weight: 600;
    border-bottom: 1px solid var(--border);
}
.tool-table td, .tool-table th { padding: 0.65rem 0.9rem; }

.tool-content a {
    color: var(--brand-600);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px dashed color-mix(in srgb, var(--brand-500) 40%, transparent);
}
.tool-content a:hover {
    color: var(--brand-700);
    border-bottom-style: solid;
}


/* ============================================================================
 * 9. FAQ accordion
 * ========================================================================== */
.tool-faq .accordion { --bs-accordion-border-color: var(--border); }
.tool-faq .accordion-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm) !important;
    margin-bottom: 0.6rem;
    overflow: hidden;
}
.tool-faq .accordion-button {
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    padding: 1rem 1.1rem;
    box-shadow: none;
}
.tool-faq .accordion-button:not(.collapsed) {
    background: color-mix(in srgb, var(--brand-500) 8%, var(--surface));
    color: var(--brand-700);
}
[data-theme="dark"] .tool-faq .accordion-button:not(.collapsed) { color: var(--brand-200); }
.tool-faq .accordion-button:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 20%, transparent);
}
.tool-faq .accordion-body {
    background: var(--surface);
    color: var(--text);
    padding: 0 1.1rem 1.1rem;
    line-height: 1.6;
}


/* ============================================================================
 * 10. Related tools (full-width version)
 * ========================================================================== */
.tool-related .card.tool-card {
    margin: 0;
    border-radius: var(--radius);
}
.tool-related .card-header {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    padding: 1rem 1.25rem;
}
.tool-related .card-header h2 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    color: var(--text);
}
.tool-related .list-group-item {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
    padding: 0.85rem 1.25rem;
}
.tool-related .list-group-item a {
    color: var(--brand-700);
    font-weight: 500;
}
[data-theme="dark"] .tool-related .list-group-item a { color: var(--brand-200); }
.tool-related .list-group-item small { color: var(--text-3); }


/* ============================================================================
 * 11. Toast (copy success / warnings)
 * ========================================================================== */
.tool-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    background: var(--text);
    color: var(--surface);
    padding: 0.7rem 1.2rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 1080;
}
.tool-toast.is-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
.tool-toast.is-warning { background: var(--accent); color: var(--text); }
.tool-toast.is-error   { background: var(--cat-rose); color: white; }


/* ============================================================================
 * Append to assets/css/tool-styles.css
 * Fixes:
 *   1. Stats row (Characters / Words / Sentences / Reading time)
 *      now renders as proper cards instead of bare numbers.
 *   2. Related-tools card no longer has clipped bottom corners.
 * ========================================================================== */


/* ----- 1. Stats cards ----------------------------------------------------- */
.stat-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1rem 1.1rem;
    text-align: left;
    transition: var(--transition);
}
.stat-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--brand-500) 30%, var(--border));
    box-shadow: var(--shadow);
}
.stat-value {
    font-size: clamp(1.5rem, 2.2vw, 1.85rem);
    font-weight: 800;
    color: var(--brand-600);
    line-height: 1.1;
    margin-bottom: 0.2rem;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .stat-value { color: var(--brand-200); }

.stat-label {
    font-size: 0.85rem;
    color: var(--text-2);
    font-weight: 500;
    letter-spacing: 0.01em;
}


/* ----- 2. Related-tools section: stop the corner clipping ----------------- */
/* When related-tools.php's own .card is nested inside .tool-section, the
   double padding/border-radius makes the inner card's bottom corners get
   clipped. Strip the outer padding and let the inner card BE the section. */
.tool-related {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: hidden;          /* ensures inner card's radius is respected */
}

.tool-related > .card.tool-card {
    margin: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;          /* clips inner list-group to rounded corners */
}

.tool-related .card-header {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    padding: 1rem 1.25rem;
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}

.tool-related .card-body {
    padding: 0;                /* list-group sits flush with card edges */
}

.tool-related .list-group {
    border-radius: 0 0 var(--radius) var(--radius);
    overflow: hidden;
}

.tool-related .list-group-item {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
    padding: 0.95rem 1.25rem;
    transition: var(--transition);
}
.tool-related .list-group-item:last-child {
    border-bottom: 0;
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}
.tool-related .list-group-item:hover {
    background: var(--surface-2);
}

.tool-related .list-group-item a {
    color: var(--brand-700);
    font-weight: 600;
    text-decoration: none;
}
[data-theme="dark"] .tool-related .list-group-item a { color: var(--brand-200); }
.tool-related .list-group-item a:hover { color: var(--brand-600); }

.tool-related .list-group-item small {
    color: var(--text-2);
    margin-top: 0.2rem;
    line-height: 1.45;
}


/* ============================================================================
 * APPEND to assets/css/tool-styles.css
 * Adds: .options-grid + .option-check — checkbox cards used by tools that
 * have toggleable conversion options (e.g. lowercase preserve-acronyms).
 * Reusable by any future tool with a row of options.
 * ========================================================================== */

.options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.6rem;
    margin: 0 0 1rem;
    padding: 0.85rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.option-check {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.7rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    margin: 0;
    user-select: none;
}
.option-check:hover {
    border-color: color-mix(in srgb, var(--brand-500) 30%, var(--border));
    background: color-mix(in srgb, var(--brand-500) 4%, var(--surface));
}
.option-check input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    accent-color: var(--brand-600);
    cursor: pointer;
    flex-shrink: 0;
}
.option-check span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    color: var(--text);
    line-height: 1.3;
}
.option-check span i {
    color: var(--brand-600);
    font-size: 1rem;
}
.option-check input[type="checkbox"]:checked ~ span {
    color: var(--text);
    font-weight: 500;
}

/* ============================================================
   tool-styles.css — APPENDS for the unified tool page template
   Append these to assets/css/tool-styles.css
   All colors reference tokens defined in style.css.
   ============================================================ */

/* ----- Outer wrapper ----- */
.tool-page { max-width: 1100px; margin: 0 auto; }

/* ----- Breadcrumb strip ----- */
.tool-breadcrumb-nav {
    background: color-mix(in srgb, var(--brand-500) 5%, var(--surface));
    border-bottom: 1px solid var(--border);
    padding: .65rem 0;
}
.tool-breadcrumb-nav .breadcrumb { font-size: .9rem; margin: 0; }
.tool-breadcrumb-nav .breadcrumb-item a { color: var(--brand-600); text-decoration: none; }
.tool-breadcrumb-nav .breadcrumb-item a:hover { text-decoration: underline; }
.tool-breadcrumb-nav .breadcrumb-item.active { color: var(--text-2); }

/* ----- Hero ----- */
.tool-hero {
    background: linear-gradient(135deg,
                color-mix(in srgb, var(--brand-500) 12%, var(--surface)) 0%,
                color-mix(in srgb, var(--accent-2) 8%, var(--surface)) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: clamp(1.5rem, 4vw, 2.75rem);
    margin-bottom: 1.5rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.tool-hero-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    background: color-mix(in srgb, var(--brand-500) 15%, transparent);
    color: var(--brand-700);
    border-radius: 999px;
    padding: .35rem .9rem;
    font-size: .85rem; font-weight: 600;
    margin-bottom: 1rem;
}
.tool-hero-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--text);
    margin: 0 0 .75rem;
    line-height: 1.2;
}
.tool-hero-subtitle {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    color: var(--text-2);
    max-width: 720px;
    margin: 0 auto 1.5rem;
    line-height: 1.55;
}
.tool-hero-features {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .75rem;
}
.tool-hero-features li {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-2);
    border-radius: 999px;
    padding: .35rem .85rem;
    font-size: .85rem;
    display: inline-flex; align-items: center; gap: .35rem;
}
.tool-hero-features i { color: var(--brand-600); }

/* ----- Generic tool card surface ----- */
.tool-workspace,
.tool-section,
.tool-faq,
.tool-cta {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    margin-bottom: 1.5rem;
}

/* ----- Panel labels ----- */
.panel-label {
    display: flex; align-items: center; gap: .5rem;
    font-weight: 600; color: var(--text);
    margin-bottom: .85rem;
    font-size: 1rem;
}
.panel-label i { color: var(--brand-600); }

/* ----- Dropzone ----- */
.tool-dropzone {
    border: 2px dashed var(--brand-200);
    background: color-mix(in srgb, var(--brand-500) 4%, var(--surface));
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition, .2s ease);
}
.tool-dropzone:hover,
.tool-dropzone:focus-visible {
    border-color: var(--brand-500);
    background: color-mix(in srgb, var(--brand-500) 7%, var(--surface));
    outline: none;
}
.tool-dropzone.dragover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}
.tool-dropzone-label {
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    padding: 2rem 1rem;
    cursor: pointer;
    margin: 0;
}
.tool-dropzone-icon { font-size: 2.5rem; color: var(--brand-600); margin-bottom: .5rem; }
.tool-dropzone-title { font-weight: 600; color: var(--text); }
.tool-dropzone-sub { font-size: .85rem; color: var(--text-3); margin-top: .25rem; }

/* ----- Image preview ----- */
.image-preview {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    min-height: 220px;
    padding: .75rem;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    margin-bottom: 1rem;
}
.image-preview img { max-width: 100%; max-height: 320px; object-fit: contain; }
.image-preview-placeholder { color: var(--text-3); font-size: .9rem; }

/* ----- File info chips ----- */
.file-info {
    display: flex; flex-wrap: wrap; gap: .5rem 1rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    padding: .65rem .85rem;
    font-size: .85rem; color: var(--text-2);
    margin-bottom: 1rem;
}
.file-info strong { color: var(--text); font-weight: 600; }

/* ----- Controls ----- */
.tool-control-group { margin-bottom: 1.25rem; }
.tool-control-label { font-weight: 600; color: var(--text); display: block; margin-bottom: .35rem; }
.tool-control-help { color: var(--text-3); font-size: .8rem; }
.tool-control-help kbd {
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 1px 5px;
    font-size: .75rem; color: var(--text);
}

/* ----- Action button row ----- */
.tool-actions {
    display: flex; flex-wrap: wrap; gap: .65rem;
    margin-top: .5rem;
}

/* ----- Conversion result (visibility-controlled) ----- */
.conversion-result { display: none; }
.conversion-result.is-visible { display: block; }
.result-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
}
@media (max-width: 768px) { .result-grid { grid-template-columns: 1fr; } }
.result-subtitle { font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: .65rem; }

/* ----- Stats grid (reused across tools) ----- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .75rem;
}
.stat-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    padding: .9rem .75rem;
    text-align: center;
}
.stat-value {
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    font-weight: 700; color: var(--brand-700);
    word-break: break-word;
}
.stat-label { font-size: .75rem; color: var(--text-2); text-transform: uppercase; letter-spacing: .03em; margin-top: .2rem; }

/* ----- Section headings ----- */
.section-title {
    font-size: clamp(1.4rem, 2.2vw, 1.75rem);
    font-weight: 700; color: var(--text);
    margin: 0 0 .5rem;
}
.section-lead { color: var(--text-2); margin-bottom: 1.25rem; }

/* ----- How-to-use steps ----- */
.tool-steps {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: .9rem;
}
.tool-steps li {
    display: flex; gap: 1rem; align-items: flex-start;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    padding: .9rem 1rem;
}
.tool-steps li strong { color: var(--text); display: block; margin-bottom: .15rem; }
.tool-steps li > div { color: var(--text-2); font-size: .95rem; }
.step-number {
    flex-shrink: 0;
    width: 32px; height: 32px;
    background: var(--brand-600); color: #fff;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700;
}

/* ----- Feature grid ----- */
.feature-grid,
.usecase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
.feature-card,
.usecase-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    padding: 1.1rem;
    transition: var(--transition, .2s ease);
}
.feature-card:hover,
.usecase-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--brand-200);
}
.feature-card h3,
.usecase-card h3 { font-size: 1rem; font-weight: 600; margin: .5rem 0 .3rem; color: var(--text); }
.feature-card p,
.usecase-card p { font-size: .9rem; color: var(--text-2); margin: 0; line-height: 1.5; }
.feature-icon,
.usecase-icon { font-size: 1.5rem; color: var(--brand-600); }

/* ----- Trust list ----- */
.trust-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.trust-list li { color: var(--text-2); display: flex; gap: .55rem; align-items: flex-start; }
.trust-list li i { color: var(--brand-600); flex-shrink: 0; margin-top: .15rem; }
.trust-list strong { color: var(--text); }

/* ----- Long-form content ----- */
.tool-content h2 {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 700; color: var(--text);
    margin: 1.5rem 0 .65rem;
}
.tool-content h2:first-child { margin-top: 0; }
.tool-content p,
.tool-content li { color: var(--text-2); line-height: 1.65; }
.tool-content p { margin-bottom: 1rem; }
.tool-content ul { margin: 0 0 1rem 1.1rem; }
.tool-content a { color: var(--brand-600); text-decoration: none; }
.tool-content a:hover { text-decoration: underline; }

/* ----- Comparison table ----- */
.tool-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: .9rem;
}
.tool-table th,
.tool-table td {
    border: 1px solid var(--border);
    padding: .55rem .75rem;
    text-align: left;
    color: var(--text-2);
}
.tool-table th { background: var(--surface-2); color: var(--text); font-weight: 600; }
.tool-table tbody tr:nth-child(odd) td { background: color-mix(in srgb, var(--brand-500) 2%, var(--surface)); }

/* ----- FAQ ----- */
.tool-faq .accordion-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px) !important;
    margin-bottom: .5rem;
    overflow: hidden;
}
.tool-faq .accordion-button {
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    box-shadow: none;
}
.tool-faq .accordion-button:not(.collapsed) {
    background: color-mix(in srgb, var(--brand-500) 6%, var(--surface));
    color: var(--brand-700);
}
.tool-faq .accordion-button:focus { box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--brand-500) 25%, transparent); }
.tool-faq .accordion-body { color: var(--text-2); line-height: 1.6; }

/* ----- CTA strip ----- */
.tool-cta {
    text-align: center;
    background: linear-gradient(135deg,
                color-mix(in srgb, var(--brand-500) 8%, var(--surface)) 0%,
                color-mix(in srgb, var(--accent) 6%, var(--surface)) 100%);
}
.tool-cta h2 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); margin-bottom: .5rem; color: var(--text); }
.tool-cta p { color: var(--text-2); margin-bottom: 1rem; }
.tool-cta-actions { display: flex; flex-wrap: wrap; gap: .65rem; justify-content: center; }

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
    .feature-card, .usecase-card, .tool-dropzone, .tool-cta, * {
        transition: none !important;
        animation: none !important;
    }
    .feature-card:hover, .usecase-card:hover { transform: none; }
}

/* ----- Mobile collapse ----- */
@media (max-width: 768px) {
    .tool-hero { padding: 1.25rem; }
    .tool-actions { flex-direction: column; align-items: stretch; }
    .tool-actions > * { width: 100%; justify-content: center; }
}


/* =========================================================================
   color-picker.php — tool-specific additions
   Append to /assets/css/tool-styles.css
   Uses ONLY the approved design tokens. No hard-coded theme colors.
   (Dynamic swatch/preview colors are set inline by JS because they ARE the
   user's data, not part of the page theme.)
   ========================================================================= */

/* --- Browser-support notice ------------------------------------------- */
.browser-support {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .7rem 1rem;
    margin-bottom: 1rem;
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--border-2);
    background: var(--surface-2);
    color: var(--text-2);
}
.browser-support i { margin-top: .15rem; }
.browser-support.is-ok {
    border-left-color: var(--brand-500);
    background: color-mix(in srgb, var(--brand-500) 8%, transparent);
    color: var(--text);
}
.browser-support.is-warn {
    border-left-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--text);
}

/* --- Live color swatch ------------------------------------------------- */
.color-swatch {
    height: 140px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.color-swatch-caption {
    margin: .6rem 0 1rem;
    text-align: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: .04em;
    color: var(--text);
}

/* --- HEX / RGB / HSL value rows --------------------------------------- */
.color-values {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.color-value-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .8rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.color-value-label {
    font-weight: 600;
    min-width: 46px;
    color: var(--text-2);
}
.color-value-text {
    flex: 1;
    overflow: auto;
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--text);
}
.color-copy-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-2);
    cursor: pointer;
    padding: .3rem .55rem;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}
.color-copy-btn:hover {
    color: var(--brand-600);
    border-color: var(--brand-200);
    background: var(--brand-50);
}

/* --- Recent-colors history ------------------------------------------- */
.color-history {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .4rem;
}
.color-history-item {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 2px solid transparent;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.color-history-item:hover {
    transform: scale(1.08);
    border-color: var(--border-2);
}
.color-history-item.active {
    border-color: var(--brand-500);
}

/* --- Contrast checker ------------------------------------------------- */
.color-contrast-preview {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.contrast-ratio {
    font-size: 1.6rem;
    font-weight: 800;
    text-align: center;
    margin: .25rem 0;
    color: var(--text);
}
.contrast-rating {
    display: inline-block;
    font-weight: 700;
    padding: .25rem .75rem;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text-2);
}
.rating-aaa {
    background: color-mix(in srgb, var(--brand-500) 15%, transparent);
    color: var(--brand-700);
}
.rating-aa {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
}
.rating-fail {
    background: color-mix(in srgb, var(--accent-2) 18%, transparent);
    color: var(--accent-2);
}

/* --- Image-pick canvas + zoom preview --------------------------------- */
.color-canvas-wrap {
    position: relative;
    display: none;
    margin-top: 1rem;
}
.color-canvas-wrap.is-visible { display: block; }
#imageCanvas {
    max-width: 100%;
    max-height: 420px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: crosshair;
}
.zoom-preview {
    position: absolute;
    width: 100px;
    height: 100px;
    overflow: hidden;
    pointer-events: none;
    display: none;
    z-index: 10;
    border: 2px solid var(--surface);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}
.zoom-preview canvas {
    width: 100%;
    height: 100%;
}
.pixel-indicator {
    position: absolute;
    width: 1px;
    height: 1px;
    background: var(--accent-2);
    transform: translate(-50%, -50%);
}
/* ==========================================================================
   Pomodoro Timer — tool-specific additions
   These rules cover behaviors the generic tool-styles.css classes cannot
   express (SVG progress ring, per-session color states, large countdown
   display, task list items, and the notification toast).
   No hardcoded colors — design tokens only.
   ========================================================================== */

/* Timer card + centered ring layout ------------------------------------- */
.pomodoro-timer-card {
    text-align: center;
}

.pomodoro-ring-wrap {
    position: relative;
    width: 300px;
    height: 300px;
    max-width: 100%;
}

.pomodoro-ring-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

/* Countdown numerals ----------------------------------------------------- */
.timer-display {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
    .pomodoro-ring-wrap {
        width: 240px;
        height: 240px;
    }
    .timer-display {
        font-size: 3rem;
    }
}

/* Progress ring ---------------------------------------------------------- */
.progress-ring {
    transform: rotate(-90deg);
}

.progress-ring-circle {
    transition: stroke-dashoffset 0.5s linear, stroke var(--transition);
    stroke: var(--brand-500);
}

/* Per-session color states ---------------------------------------------- */
.session-work .progress-ring-circle    { stroke: var(--brand-500); }
.session-shortBreak .progress-ring-circle { stroke: var(--accent); }
.session-longBreak .progress-ring-circle  { stroke: var(--accent-2); }

.session-indicator {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
}

.session-work .session-indicator       { color: var(--brand-600); }
.session-shortBreak .session-indicator { color: var(--accent); }
.session-longBreak .session-indicator  { color: var(--accent-2); }

.quote-container {
    min-height: 60px;
    color: var(--text-2);
}

/* Audio status line ------------------------------------------------------ */
.audio-status {
    font-size: 0.9rem;
    margin-top: 0.5rem;
    color: var(--text-3);
}

/* Active ambient-sound button ------------------------------------------- */
.ambient-sound-btn.active {
    background-color: var(--brand-500);
    border-color: var(--brand-500);
    color: #fff;
}

/* Task list items -------------------------------------------------------- */
.task-item {
    border-left: 4px solid transparent;
    transition: background-color var(--transition);
}

.task-item:hover {
    background-color: color-mix(in srgb, var(--brand-500) 6%, transparent);
}

.task-work {
    border-left-color: var(--brand-500);
}

.task-completed {
    text-decoration: line-through;
    opacity: 0.65;
}

.pomodoro-count {
    background-color: var(--brand-500);
    color: #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
}

/* Notification toast ----------------------------------------------------- */
.notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 15px 25px;
    background-color: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    transform: translateY(100px);
    opacity: 0;
    transition: transform var(--transition), opacity var(--transition);
    z-index: 1000;
}

.notification.show {
    transform: translateY(0);
    opacity: 1;
}
/* ==========================================================================
   periodic-table-css-additions.css
   Append to /assets/css/tool-styles.css
   --------------------------------------------------------------------------
   These rules cover behaviour the shared template classes cannot express:
   the 18-column element grid, the element cells, and the eleven scientific
   category colours. The category colours are defined as their OWN CSS
   variables (light + dark variants) because a periodic table needs ~11
   distinct, meaningful data colours that cannot be mapped onto the six brand
   tokens. The page markup never hard-codes a hex value — it only references
   these variables and existing design tokens.
   ========================================================================== */

:root {
  /* Periodic-table category palette — light theme */
  --pt-ink:                    #1a2332;
  --pt-nonmetal:               #a1c9c9;
  --pt-noble-gas:              #c9a1c9;
  --pt-alkali-metal:           #f8d7da;
  --pt-alkaline-earth-metal:   #fff3cd;
  --pt-metalloid:              #cce7f8;
  --pt-halogen:                #d6d8f9;
  --pt-metal:                  #d4edda;
  --pt-transition-metal:       #d1ecf1;
  --pt-lanthanide:             #fce5cd;
  --pt-actinide:               #f9cb9c;
  --pt-post-transition-metal:  #e2e3e5;
}

[data-theme="dark"] {
  /* Darker, saturated variants with light ink for readable contrast */
  --pt-ink:                    #e6e9f2;
  --pt-nonmetal:               #2f6b6b;
  --pt-noble-gas:              #6b2f6b;
  --pt-alkali-metal:           #7a3b41;
  --pt-alkaline-earth-metal:   #7a6a2f;
  --pt-metalloid:              #2f5a7a;
  --pt-halogen:                #45487a;
  --pt-metal:                  #2f6b45;
  --pt-transition-metal:       #2f6573;
  --pt-lanthanide:             #7a5a3b;
  --pt-actinide:               #7a4f2f;
  --pt-post-transition-metal:  #495066;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pt-ink:                    #e6e9f2;
    --pt-nonmetal:               #2f6b6b;
    --pt-noble-gas:              #6b2f6b;
    --pt-alkali-metal:           #7a3b41;
    --pt-alkaline-earth-metal:   #7a6a2f;
    --pt-metalloid:              #2f5a7a;
    --pt-halogen:                #45487a;
    --pt-metal:                  #2f6b45;
    --pt-transition-metal:       #2f6573;
    --pt-lanthanide:             #7a5a3b;
    --pt-actinide:               #7a4f2f;
    --pt-post-transition-metal:  #495066;
  }
}

/* --- Table container & grid --- */
.table-container {
  overflow-x: auto;
  padding: 10px 0;
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.periodic-table {
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  gap: 3px;
  margin: 0 auto;
  min-width: 760px;            /* keeps cells legible; container scrolls on small screens */
  transition: transform var(--transition);
  transform-origin: top center;
}

/* --- Element cells --- */
.element {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  font-size: 0.7rem;
  position: relative;
  color: var(--pt-ink);
  background-color: var(--surface);
}

.element:hover,
.element:focus-visible {
  transform: scale(1.08);
  z-index: 10;
  box-shadow: var(--shadow);
  outline: none;
}

.element-number {
  font-size: 0.6rem;
  position: absolute;
  top: 2px;
  left: 4px;
  opacity: 0.75;
}

.element-symbol {
  font-weight: 700;
  font-size: 1.1rem;
  margin-top: 8px;
}

.element-name {
  font-size: 0.55rem;
  text-align: center;
  margin-top: 2px;
  line-height: 1;
}

.element-mass {
  font-size: 0.55rem;
  margin-top: 2px;
  opacity: 0.75;
}

.element.selected {
  box-shadow: 0 0 0 3px var(--brand-500);
  z-index: 20;
}

.element.search-highlight {
  box-shadow: 0 0 0 3px var(--accent);
  z-index: 20;
}

.empty-cell {
  aspect-ratio: 1 / 1;
  border: none;
}

/* --- Category colours (shared by grid cells, legend badges, detail badge) --- */
.category-nonmetal              { background-color: var(--pt-nonmetal);             color: var(--pt-ink); }
.category-noble-gas             { background-color: var(--pt-noble-gas);            color: var(--pt-ink); }
.category-alkali-metal          { background-color: var(--pt-alkali-metal);         color: var(--pt-ink); }
.category-alkaline-earth-metal  { background-color: var(--pt-alkaline-earth-metal); color: var(--pt-ink); }
.category-metalloid             { background-color: var(--pt-metalloid);            color: var(--pt-ink); }
.category-halogen               { background-color: var(--pt-halogen);              color: var(--pt-ink); }
.category-metal                 { background-color: var(--pt-metal);                color: var(--pt-ink); }
.category-transition-metal      { background-color: var(--pt-transition-metal);     color: var(--pt-ink); }
.category-lanthanide            { background-color: var(--pt-lanthanide);           color: var(--pt-ink); }
.category-actinide              { background-color: var(--pt-actinide);             color: var(--pt-ink); }
.category-post-transition-metal { background-color: var(--pt-post-transition-metal);color: var(--pt-ink); }

/* --- Legend --- */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  justify-content: center;
}

.legend-badge {
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  border: 1px solid var(--border);
}

/* --- Selected element detail tile (big symbol display) --- */
.element-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  padding: 22px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--surface-2);
  height: 100%;
  justify-content: center;
}

.element-tile-symbol {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
}

.element-tile-name {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
}

.element-tile-number { font-size: 0.9rem; }
.element-tile-mass   { font-size: 0.95rem; color: var(--text-2); }

/* Detail category pill — styled independently of Bootstrap .badge */
.property-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: capitalize;
  border: 1px solid var(--border);
}

/* --- Key-property lists --- */
.pt-props {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}

.pt-prop-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pt-prop-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}

.pt-prop-list li span   { color: var(--text-2); }
.pt-prop-list li strong { color: var(--text); text-align: right; }

/* Smooth-scroll anchor offset for the details panel */
.scroll-target { scroll-margin-top: 20px; }

/* --- Responsive --- */
@media (max-width: 575.98px) {
  .pt-props { grid-template-columns: 1fr; gap: 0; }
  .element-tile-symbol { font-size: 2.4rem; }
}
/* =========================================================================
   PDF to Word Converter — NEW styles only
   -------------------------------------------------------------------------
   Append these to assets/css/tool-styles.css.

   Everything else this page uses (.tool-hero, .tool-workspace, .tool-dropzone,
   .tool-control-group, .options-grid/.option-check, .tool-textarea, .tool-actions,
   .conversion-result/.is-visible, .stats-grid/.stat-card, .section-title,
   .tool-steps, .feature-grid, .usecase-grid, .trust-list, .tool-content,
   .tool-table, .tool-faq, .tool-cta, .tool-breadcrumb-nav) is ALREADY defined
   in tool-styles.css and is reused as-is. Only the rules below are new.
   All colors reference the existing design tokens.
   ========================================================================= */

/* ----- PDF page thumbnail preview (this tool only) ----- */
.pdf-preview {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}
.pdf-preview:empty { display: none; }
.pdf-preview-page {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    box-shadow: var(--shadow-sm);
    background: #fff;
    max-width: 130px;
    height: auto;
}
.pdf-preview-more {
    align-self: center;
    margin: 0;
    font-size: .85rem;
    color: var(--text-3);
}

/* ----- Inline status banner (info / success / warning / error) ----- */
.tool-status {
    margin-top: .9rem;
    padding: .65rem .9rem;
    border-radius: var(--radius-sm, 8px);
    font-size: .92rem;
    border: 1px solid var(--border);
    color: var(--text);
}
.tool-status-info    { background: color-mix(in srgb, var(--info) 12%, var(--surface));    border-color: color-mix(in srgb, var(--info) 35%, transparent); }
.tool-status-success { background: color-mix(in srgb, var(--success) 14%, var(--surface)); border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.tool-status-warn    { background: color-mix(in srgb, var(--warning) 16%, var(--surface)); border-color: color-mix(in srgb, var(--warning) 45%, transparent); }
.tool-status-error   { background: color-mix(in srgb, var(--danger) 14%, var(--surface));  border-color: color-mix(in srgb, var(--danger) 40%, transparent); }

/* ----- Progress bar tint (optional polish; falls back to Bootstrap .progress) ----- */
.tool-progress { height: 1.1rem; border-radius: 999px; background: var(--surface-2); }
.tool-progress .progress-bar { background: var(--brand-600); }
/* ============================================================================
 * APPEND to assets/css/tool-styles.css
 * Text Difference Checker — diff-specific components.
 *
 * All colors reference design tokens from style.css. The green/red diff
 * highlights are derived from the existing semantic tokens --success and
 * --danger via color-mix(), so they adapt to light and dark themes
 * automatically and contain NO hard-coded hex values.
 *
 * Class names that the tool's JavaScript generates at runtime
 * (.diff-added, .diff-removed, .side-by-side-container, .side-by-side-panel,
 * .side-by-side-mode) and the names the JS selects on
 * (.view-option-btn / .active) are kept verbatim so the preserved diff
 * engine continues to work unchanged.
 * ========================================================================== */

/* ----- Legend ----- */
.diff-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-bottom: 1rem;
}
.diff-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    color: var(--text-2);
}
.diff-legend-swatch {
    width: 1rem;
    height: 1rem;
    border-radius: 4px;
    display: inline-block;
}
.diff-swatch-added   { background: color-mix(in srgb, var(--success) 30%, transparent); }
.diff-swatch-removed { background: color-mix(in srgb, var(--danger) 28%, transparent); }

/* ----- Input editor (line-number gutter + textarea) ----- */
.diff-editor {
    display: flex;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface);
}
.diff-editor:focus-within {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 20%, transparent);
}
.diff-line-numbers {
    flex-shrink: 0;
    width: 2.5rem;
    padding: 0.85rem 0.4rem;
    background: var(--surface-2);
    border-right: 1px solid var(--border);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Courier New', monospace;
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--text-3);
    text-align: right;
    user-select: none;
    overflow: hidden;
}
.diff-textarea {
    flex: 1;
    min-height: 280px;
    border: none;
    outline: none;
    resize: vertical;
    padding: 0.85rem 0.95rem;
    background: var(--surface);
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Courier New', monospace;
    font-size: 0.85rem;
    line-height: 1.55;
}
.diff-textarea::placeholder { color: var(--text-3); }

/* ----- Result panel header with view toggle ----- */
.diff-result-label {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.view-options {
    display: inline-flex;
    gap: 0.4rem;
}
.view-option-btn {
    padding: 0.4rem 0.85rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-2);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}
.view-option-btn:hover {
    color: var(--brand-700);
    border-color: color-mix(in srgb, var(--brand-500) 30%, var(--border));
}
.view-option-btn.active {
    background: var(--brand-600);
    color: white;
    border-color: var(--brand-600);
    box-shadow: 0 6px 14px -8px var(--brand-600);
}

/* ----- Result container ----- */
.result-container {
    position: relative;
    min-height: 280px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Courier New', monospace;
    font-size: 0.85rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    overflow: auto;
}
.result-line-numbers {
    position: absolute;
    left: 0;
    top: 0;
    width: 2.75rem;
    height: 100%;
    padding: 0.85rem 0.4rem;
    background: var(--surface-2);
    border-right: 1px solid var(--border);
    color: var(--text-3);
    text-align: right;
    user-select: none;
    overflow: hidden;
}
.inline-result {
    padding: 0.85rem 0.95rem 0.85rem 3.6rem;
    color: var(--text);
    min-height: 280px;
}

/* ----- Side-by-side view (DOM built by JS) ----- */
.side-by-side-container {
    display: flex;
    width: 100%;
}
.side-by-side-panel {
    flex: 1;
    padding: 0.85rem 0.95rem 0.85rem 3.6rem;
    position: relative;
    color: var(--text);
    border-right: 1px solid var(--border);
    min-height: 280px;
}
.side-by-side-panel:last-child { border-right: none; }

/* In side-by-side mode the single result gutter is hidden; each panel is
   self-contained so the absolute gutter would overlap the left panel. */
.result-container.side-by-side-mode .result-line-numbers { display: none; }

@media (max-width: 768px) {
    .side-by-side-container { flex-direction: column; }
    .side-by-side-panel {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .side-by-side-panel:last-child { border-bottom: none; }
}

/* ----- Diff highlight spans (generated by JS) ----- */
.diff-added {
    background: color-mix(in srgb, var(--success) 22%, transparent);
    color: var(--text);
    border-radius: 3px;
}
.diff-removed {
    background: color-mix(in srgb, var(--danger) 20%, transparent);
    color: var(--text);
    text-decoration: line-through;
    border-radius: 3px;
}

/* ============================================================
   Image Cropper — tool-specific additions
   Append to /assets/css/tool-styles.css
   Colors use design tokens only (dark-mode safe).
   ============================================================ */

/* Host for the interactive Cropper.js canvas.
   ".is-cropper" is a modifier on the existing .image-preview class so
   Cropper has a block-level, sized container instead of a centered flex box. */
.tool-page .image-preview.is-cropper {
    display: block;
    padding: 0;
    min-height: 320px;
    max-height: 540px;
    overflow: hidden;
}

.tool-page .image-preview.is-cropper > #imagePreview {
    display: block;
    max-width: 100%;
}

/* Cropped-result thumbnail shown in the result panel */
.tool-page .crop-preview {
    max-width: 100%;
    max-height: 220px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

/* Keep the numeric custom-dimension inputs compact and aligned */
.tool-page .dimension-input {
    max-width: 110px;
}

/* ============================================================
   Random Paragraph Generator — CSS additions
   Append to /assets/css/tool-styles.css
   These rules style the dynamically generated paragraph cards
   (.paragraph-card, .paragraph-number, .content-type-badge) that
   the tool's JavaScript injects into #paragraphDisplay. All values
   use existing design tokens for full light/dark-mode support.
   ============================================================ */

.paragraph-card {
    border-left: 4px solid var(--brand-500);
    background-color: var(--surface-2);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    color: var(--text);
}

.paragraph-number {
    font-weight: 700;
    color: var(--brand-500);
    margin-bottom: 0.5rem;
}

.paragraph-content {
    line-height: 1.7;
    color: var(--text-2);
}

.content-type-badge {
    font-size: 0.7rem;
    text-transform: capitalize;
}
/* Active state for modern toggle buttons (content type / format chips) */
.btn-secondary-modern.active {
  background: var(--brand-500);
  color: #fff;
  border-color: var(--brand-500);
}
.btn-secondary-modern.active:hover {
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: #fff;
}

/* ============================================================
   Random Sentence Generator — CSS additions
   Append to /assets/css/tool-styles.css
   Styles the dynamically generated sentence cards (.sentence-card,
   .complexity-badge) that the tool's JavaScript injects into
   #sentenceDisplay. All values use existing design tokens for full
   light/dark-mode support.
   ============================================================ */

.sentence-card {
    border-left: 4px solid var(--brand-500);
    background-color: var(--surface-2);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 0.75rem 1rem;
    margin-bottom: 0.625rem;
    color: var(--text);
    line-height: 1.6;
}

.complexity-badge {
    font-size: 0.7rem;
    text-transform: capitalize;
}

/* Active state for modern toggle buttons (Complexity / preset chips).
   Include this only if it is not already present in tool-styles.css from
   the random-paragraph-generator update. It is safe to have once. */
.btn-secondary-modern.active {
    background: var(--brand-500);
    color: #fff;
    border-color: var(--brand-500);
}
.btn-secondary-modern.active:hover {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: #fff;
}

/* ============================================================
   Random Word Generator — CSS additions
   Append to /assets/css/tool-styles.css
   Styles the dynamically generated word badges (.word-badge) that
   the tool's JavaScript injects into #wordDisplay, plus the shared
   active-state rule for modern toggle buttons. All values use existing
   design tokens for full light/dark-mode support.
   ============================================================ */

.word-badge {
    font-size: 0.8rem;
    margin: 0.1rem;
}

/* Active state for modern toggle buttons (Output Format / preset chips).
   Include this only if it is not already present in tool-styles.css from a
   previous tool update. It is safe to have once. */
.btn-secondary-modern.active {
    background: var(--brand-500);
    color: #fff;
    border-color: var(--brand-500);
}
.btn-secondary-modern.active:hover {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: #fff;
}