:root {
    --tool-bg: #10110e;
    --tool-panel: rgba(255, 255, 255, 0.04);
    --tool-panel-strong: rgba(97, 208, 148, 0.08);
    --tool-border: rgba(245, 247, 239, 0.13);
    --tool-border-strong: rgba(245, 247, 239, 0.24);
    --tool-text: #f5f7ef;
    --tool-muted: #b8c0b3;
    --tool-accent: #61d094;
    --tool-accent-2: #f0b35e;
    --tool-success: #61d094;
    --tool-danger: #e66d52;
    --tool-warning: #f0b35e;
    --tool-radius: 8px;
    --tool-radius-sm: 8px;
    --tool-shadow: 0 20px 50px rgba(0, 0, 0, 0.24);
}

[data-theme="light"] {
    --tool-bg: #f4f7f0;
    --tool-panel: rgba(255, 255, 255, 0.88);
    --tool-panel-strong: rgba(40, 160, 110, 0.08);
    --tool-border: rgba(20, 40, 25, 0.12);
    --tool-border-strong: rgba(20, 40, 25, 0.22);
    --tool-text: #142018;
    --tool-muted: #526357;
    --tool-accent-2: #c87a20;
    --tool-shadow: 0 20px 50px rgba(23, 25, 19, 0.1);
}

[data-theme="light"] .tool-page {
    background:
        linear-gradient(180deg, rgba(97, 208, 148, 0.1), transparent 34rem),
        linear-gradient(90deg, rgba(23, 25, 19, 0.04) 1px, transparent 1px),
        linear-gradient(180deg, rgba(23, 25, 19, 0.035) 1px, transparent 1px),
        var(--tool-bg);
    background-size: auto, 88px 88px, 88px 88px, auto;
}

.tool-page {
    min-height: 100vh;
    background:
        linear-gradient(180deg, rgba(97, 208, 148, 0.08), transparent 34rem),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        var(--tool-bg);
    background-size: auto, 88px 88px, 88px 88px, auto;
    color: var(--tool-text);
}

.tool-main {
    padding: calc(var(--header-h) + 2rem) 0 4rem;
}

.tool-header-block {
    margin-bottom: 2rem;
}

.tool-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    color: var(--tool-muted);
    font-family: var(--font-mono);
    font-size: 0.82rem;
}

.tool-breadcrumb a {
    color: var(--tool-accent);
}

.tool-title {
    max-width: 900px;
    margin-bottom: 0.8rem;
    font-size: clamp(2.1rem, 5vw, 3.9rem);
    line-height: 1.05;
    letter-spacing: 0;
    font-weight: 800;
}

.tool-subtitle {
    max-width: 760px;
    color: var(--tool-muted);
    font-size: clamp(1rem, 2vw, 1.18rem);
}

.tool-note,
.tool-warning,
.tool-limitation,
.tool-privacy {
    padding: 1rem;
    border: 1px solid var(--tool-border);
    border-radius: var(--tool-radius-sm);
    background: var(--tool-panel);
    color: var(--tool-muted);
    font-size: 0.94rem;
}

.tool-warning {
    border-color: rgba(245, 158, 11, 0.35);
    color: #f8d798;
}

.tool-limitation {
    border-color: rgba(6, 182, 212, 0.28);
}

.tool-privacy {
    border-color: rgba(16, 185, 129, 0.28);
}

.tool-stack {
    display: grid;
    gap: 1rem;
}

.tool-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.42fr);
    gap: 1.25rem;
    align-items: start;
}

.tool-layout-wide {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 1.25rem;
}

.tool-panel {
    padding: 1.25rem;
    border: 1px solid var(--tool-border);
    border-radius: var(--tool-radius);
    background: var(--tool-panel);
    box-shadow: var(--tool-shadow);
}

.tool-panel h2,
.tool-panel h3 {
    margin-bottom: 0.85rem;
}

.tool-panel label:not(.btn):not(.tool-check) {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--tool-muted);
    font-size: 0.9rem;
    font-weight: 600;
}

.tool-panel label.btn {
    display: inline-flex;
    margin-bottom: 0;
    font-size: inherit;
    font-weight: 700;
    color: inherit;
    cursor: pointer;
}

.tool-field {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.tool-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.tool-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.tool-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.tool-panel-heading {
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.tool-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.tool-input,
.tool-textarea,
.tool-select,
.tool-file {
    width: 100%;
    border: 1px solid var(--tool-border);
    border-radius: var(--tool-radius-sm);
    background: rgba(255, 255, 255, 0.065);
    color: var(--tool-text);
    outline: none;
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.tool-input,
.tool-select,
.tool-file {
    min-height: 46px;
    padding: 0.75rem 0.85rem;
}

.tool-textarea {
    min-height: 180px;
    padding: 0.85rem;
    resize: vertical;
}

.tool-select option {
    background: #12121a;
    color: var(--tool-text);
}

.tool-input:focus,
.tool-textarea:focus,
.tool-select:focus,
.tool-file:focus {
    border-color: rgba(97, 208, 148, 0.68);
    box-shadow: 0 0 0 3px rgba(97, 208, 148, 0.14);
}

.tool-input::placeholder,
.tool-textarea::placeholder {
    color: rgba(240, 240, 245, 0.38);
}

.tool-file {
    border-style: dashed;
}

.btn-small {
    min-height: 36px;
    padding: 0.5rem 0.8rem;
    font-size: 0.86rem;
}

.btn-outline {
    border: 1px solid var(--tool-border-strong);
    background: rgba(255, 255, 255, 0.035);
    color: var(--tool-text);
}

.btn-outline:hover:not(:disabled) {
    border-color: rgba(97, 208, 148, 0.55);
    background: rgba(97, 208, 148, 0.1);
}

.btn-danger {
    background: rgba(248, 113, 113, 0.14);
    color: #fecaca;
    border: 1px solid rgba(248, 113, 113, 0.34);
}

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

.tool-status,
.tool-error {
    min-height: 1.4rem;
    margin-top: 0.75rem;
    font-size: 0.92rem;
}

.tool-status {
    color: var(--tool-muted);
}

.tool-status.success {
    color: var(--tool-success);
}

.tool-error {
    color: var(--tool-danger);
}

.tool-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.tool-meta-item {
    padding: 0.9rem;
    border: 1px solid var(--tool-border);
    border-radius: var(--tool-radius-sm);
    background: rgba(255, 255, 255, 0.035);
}

.tool-meta-item span {
    display: block;
    color: var(--tool-muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.tool-meta-item strong {
    display: block;
    margin-top: 0.35rem;
    overflow-wrap: anywhere;
}

.tool-preview-box {
    overflow: hidden;
    border: 1px solid var(--tool-border);
    border-radius: var(--tool-radius-sm);
    background: rgba(0, 0, 0, 0.18);
}

.tool-preview-box video,
.tool-preview-box iframe {
    display: block;
    width: 100%;
    border: 0;
}

.tool-preview-box iframe {
    height: 620px;
}

.tool-preview-box video {
    max-height: 420px;
    background: #000;
}

.markdown-editor {
    min-height: 540px;
    font-family: var(--font-mono);
}

.markdown-preview,
.sinhala-output {
    min-height: 540px;
    overflow: auto;
    border: 1px solid var(--tool-border);
    border-radius: var(--tool-radius-sm);
    background: rgba(255, 255, 255, 0.95);
    color: #18181b;
    padding: 2rem;
    line-height: 1.65;
}

.markdown-preview > :first-child,
.sinhala-output > :first-child {
    margin-top: 0;
}

.markdown-preview h1,
.markdown-preview h2,
.markdown-preview h3 {
    line-height: 1.2;
    margin: 1em 0 0.45em;
}

.markdown-preview p,
.markdown-preview ul,
.markdown-preview ol,
.markdown-preview blockquote,
.markdown-preview table,
.markdown-preview pre {
    margin-bottom: 1em;
}

.markdown-preview ul,
.markdown-preview ol {
    padding-left: 1.35rem;
}

.markdown-preview code {
    border-radius: 5px;
    background: #e8eee6;
    padding: 0.15em 0.35em;
    font-family: Consolas, monospace;
}

.markdown-preview pre {
    overflow: auto;
    border-radius: 8px;
    background: #111827;
    color: #f5f7ef;
    padding: 1rem;
}

.markdown-preview pre code {
    background: transparent;
    padding: 0;
}

.markdown-preview table {
    width: 100%;
    border-collapse: collapse;
}

.markdown-preview th,
.markdown-preview td {
    border: 1px solid #d4d4d8;
    padding: 0.5rem 0.65rem;
}

.file-list,
.download-list {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
}

.file-row,
.download-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.85rem;
    border: 1px solid var(--tool-border);
    border-radius: var(--tool-radius-sm);
    background: rgba(255, 255, 255, 0.04);
}

.file-row-title,
.download-row-title {
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-row-meta,
.download-row-meta {
    color: var(--tool-muted);
    font-size: 0.86rem;
}

.qr-preview {
    display: grid;
    min-height: 360px;
    place-items: center;
    padding: 1rem;
    border: 1px solid var(--tool-border);
    border-radius: var(--tool-radius-sm);
    background: #fff;
}

.qr-preview canvas,
.qr-preview svg {
    max-width: 100%;
    height: auto !important;
}

.preset-row,
.char-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.char-grid {
    margin-top: 0.6rem;
}

.preset,
.char-btn {
    min-height: 34px;
    border: 1px solid var(--tool-border);
    border-radius: var(--tool-radius-sm);
    background: rgba(255, 255, 255, 0.055);
    color: var(--tool-text);
    padding: 0.4rem 0.7rem;
    cursor: pointer;
}

.char-btn {
    min-width: 38px;
    font-size: 1.1rem;
}

.preset:hover,
.char-btn:hover {
    border-color: rgba(97, 208, 148, 0.55);
    background: rgba(97, 208, 148, 0.1);
}

.range-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.8rem;
    align-items: center;
}

.range-value {
    min-width: 52px;
    color: var(--tool-muted);
    font-family: var(--font-mono);
    font-size: 0.86rem;
    text-align: right;
}

.sinhala-output {
    min-height: 300px;
    font-size: 1.25rem;
}

.toast {
    min-height: 1.4rem;
    margin-top: 0.75rem;
    color: var(--tool-success);
    font-size: 0.92rem;
}

.typing-guide {
    display: grid;
    gap: 1rem;
}

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

.guide-table th,
.guide-table td {
    border: 1px solid var(--tool-border);
    padding: 0.55rem;
    text-align: left;
}

.guide-table th {
    color: var(--tool-text);
    background: rgba(255, 255, 255, 0.06);
}

.hidden {
    display: none !important;
}

@media (max-width: 980px) {
    .tool-layout,
    .tool-layout-wide {
        grid-template-columns: 1fr;
    }

    .markdown-editor,
    .markdown-preview {
        min-height: 420px;
    }
}

@media (max-width: 640px) {
    .tool-main {
        padding-top: calc(var(--header-h) + 1rem);
    }

    .tool-grid,
    .tool-grid-3,
    .tool-meta {
        grid-template-columns: 1fr;
    }

    .file-row,
    .download-row {
        grid-template-columns: 1fr;
    }

    .tool-actions .btn {
        width: 100%;
    }

    .markdown-preview,
    .sinhala-output {
        padding: 1rem;
    }
}

/* Guide page polish */
.guide-hero {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid var(--tool-border);
    border-radius: var(--tool-radius-sm);
    background: var(--tool-panel);
}

.guide-hero img,
.guide-hero svg {
    width: min(180px, 40vw);
    height: auto;
    flex: none;
}

.guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.guide-card {
    padding: 1rem 1.1rem;
    border: 1px solid var(--tool-border);
    border-radius: var(--tool-radius-sm);
    background: var(--tool-panel);
}

.guide-card h3 {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 0.55rem;
    font-size: 1rem;
    color: var(--tool-text);
}

.guide-step-num {
    display: inline-grid;
    place-items: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 999px;
    background: rgba(97, 208, 148, 0.16);
    color: var(--tool-accent);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    flex: none;
}

.guide-info-box,
.guide-warn-box {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.9rem 1rem;
    border-radius: var(--tool-radius-sm);
    font-size: 0.92rem;
}

.guide-info-box {
    border: 1px solid rgba(97, 208, 148, 0.35);
    background: rgba(97, 208, 148, 0.08);
    color: var(--tool-text);
}

.guide-warn-box {
    border: 1px solid rgba(240, 179, 94, 0.4);
    background: rgba(240, 179, 94, 0.08);
    color: var(--tool-text);
}

.cmd-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.65rem;
}

.cmd-code {
    flex: 1;
    min-width: 140px;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--tool-border);
    border-radius: var(--tool-radius-sm);
    background: rgba(0, 0, 0, 0.12);
    color: var(--tool-accent);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    word-break: break-all;
}

[data-theme="light"] .cmd-code {
    background: rgba(23, 25, 19, 0.05);
}

/* Light theme — tool page readability */
[data-theme="light"] .tool-page {
    color: var(--tool-text);
}

[data-theme="light"] .tool-title {
    color: #0b120d;
}

[data-theme="light"] .tool-subtitle {
    color: #374151;
}

[data-theme="light"] .tool-breadcrumb {
    color: #4b5563;
}

[data-theme="light"] .tool-breadcrumb a {
    color: var(--accent-strong);
}

[data-theme="light"] .tool-panel {
    background: #ffffff;
    color: var(--tool-text);
    border-color: var(--tool-border);
}

[data-theme="light"] .tool-panel h2,
[data-theme="light"] .tool-panel h3,
[data-theme="light"] .tool-panel h4 {
    color: #111827;
}

[data-theme="light"] .tool-panel label:not(.btn):not(.tool-check),
[data-theme="light"] .tool-page label:not(.btn):not(.tool-check),
[data-theme="light"] .tool-page .form-label,
[data-theme="light"] .tool-page .field-label {
    color: #1f2937;
}

[data-theme="light"] .tool-limitation,
[data-theme="light"] .tool-privacy,
[data-theme="light"] .tool-note {
    color: #374151;
    background: rgba(40, 160, 110, 0.08);
}

[data-theme="light"] .tool-limitation {
    border-color: rgba(40, 160, 110, 0.35);
}

[data-theme="light"] .tool-limitation strong,
[data-theme="light"] .tool-note strong,
[data-theme="light"] .tool-privacy strong {
    color: #111827;
}

[data-theme="light"] .tool-privacy {
    border-color: rgba(40, 160, 110, 0.28);
}

[data-theme="light"] .tool-warning {
    color: #92400e;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
}

[data-theme="light"] .tool-input,
[data-theme="light"] .tool-textarea,
[data-theme="light"] .tool-select,
[data-theme="light"] .tool-file,
[data-theme="light"] .tool-page input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]),
[data-theme="light"] .tool-page textarea,
[data-theme="light"] .tool-page select {
    background: #ffffff;
    color: #111827;
    border-color: rgba(17, 24, 39, 0.22);
    opacity: 1;
}

[data-theme="light"] .tool-input::placeholder,
[data-theme="light"] .tool-textarea::placeholder,
[data-theme="light"] .tool-page input::placeholder,
[data-theme="light"] .tool-page textarea::placeholder {
    color: #6b7280;
    opacity: 1;
}

[data-theme="light"] .tool-select option,
[data-theme="light"] .tool-input option,
[data-theme="light"] .tool-page select option {
    background: #ffffff;
    color: #111827;
}

[data-theme="light"] .tool-input:focus,
[data-theme="light"] .tool-textarea:focus,
[data-theme="light"] .tool-select:focus,
[data-theme="light"] .tool-file:focus,
[data-theme="light"] .tool-page input:focus,
[data-theme="light"] .tool-page textarea:focus,
[data-theme="light"] .tool-page select:focus {
    border-color: rgba(42, 157, 101, 0.65);
    box-shadow: 0 0 0 3px rgba(42, 157, 101, 0.18);
}

[data-theme="light"] .tool-input:disabled,
[data-theme="light"] .tool-textarea:disabled,
[data-theme="light"] .tool-select:disabled,
[data-theme="light"] .tool-input[readonly],
[data-theme="light"] .tool-textarea[readonly] {
    background: #f3f4f6;
    color: #111827;
    border-color: rgba(17, 24, 39, 0.18);
    opacity: 1;
}

[data-theme="light"] .tool-status {
    color: #4b5563;
}

[data-theme="light"] .tool-status.success {
    color: var(--accent-strong);
}

[data-theme="light"] .tool-error {
    color: #b91c1c;
}

[data-theme="light"] .tool-meta-item {
    background: #ffffff;
    color: var(--tool-text);
}

[data-theme="light"] .tool-meta-item span {
    color: #4b5563;
}

[data-theme="light"] .tool-meta-item strong {
    color: #111827;
}

[data-theme="light"] .btn-outline {
    background: #ffffff;
    color: #111827;
    border-color: var(--tool-border-strong);
}

[data-theme="light"] .btn-outline:hover:not(:disabled) {
    background: rgba(40, 160, 110, 0.1);
    border-color: rgba(42, 157, 101, 0.45);
    color: #111827;
}

[data-theme="light"] .file-row,
[data-theme="light"] .download-row,
[data-theme="light"] .preset,
[data-theme="light"] .char-btn,
[data-theme="light"] .guide-card {
    background: #ffffff;
    color: var(--tool-text);
    border-color: var(--tool-border);
}

[data-theme="light"] .file-row-meta,
[data-theme="light"] .download-row-meta,
[data-theme="light"] .range-value {
    color: #4b5563;
}

[data-theme="light"] .guide-table th {
    background: #eef7ef;
    color: #111827;
}

[data-theme="light"] .guide-info-box,
[data-theme="light"] .guide-warn-box {
    color: #111827;
}

[data-theme="light"] .tool-related-title {
    color: #111827;
}

[data-theme="light"] .tool-related-links {
    color: #374151;
}

[data-theme="light"] .tool-related-links a {
    color: var(--accent-strong);
}

/* Undo decorative opacity reductions from tool-local CSS in light mode */
[data-theme="light"] .tool-page .tool-header-block,
[data-theme="light"] .tool-page .tool-panel {
    opacity: 1;
}

[data-theme="light"] .tool-page .tool-panel :where(h1, h2, h3, h4, p, label, span, strong, li, td, th, small) {
    opacity: 1;
}

[data-theme="light"] .tool-page .tool-panel [class*="header"],
[data-theme="light"] .tool-page .tool-panel [class*="label"],
[data-theme="light"] .tool-page .tool-panel [class*="meta"],
[data-theme="light"] .tool-page .tool-panel [class*="section"] {
    opacity: 1;
    color: inherit;
}

[data-theme="light"] .tool-list {
    color: #4b5563;
}

.offline-page .offline-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    color: var(--accent);
}

.tool-badges-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.tool-tabs {
    display: flex;
    gap: 8px;
    margin: 12px 0;
}

.tool-tab {
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    cursor: pointer;
    font: inherit;
}

.tool-tab.is-active {
    border-color: rgba(97, 208, 148, 0.45);
    color: var(--text);
    background: rgba(97, 208, 148, 0.1);
}

.tool-list {
    margin: 0.5rem 0 0;
    padding-left: 1.2rem;
    color: var(--text-muted);
}

[data-theme="light"] .tool-tab {
    background: #ffffff;
    border-color: rgba(20, 32, 24, 0.18);
    color: #374151;
}

[data-theme="light"] .tool-tab.is-active {
    background: rgba(40, 160, 110, 0.12);
    color: #111827;
    border-color: rgba(42, 157, 101, 0.45);
}

.media-permission-help {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(244, 67, 54, 0.35);
    background: rgba(244, 67, 54, 0.08);
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.5;
}

.media-permission-help ol {
    margin: 8px 0 0;
    padding-left: 1.2rem;
}

.media-permission-help[hidden] {
    display: none !important;
}

[data-theme="light"] .media-permission-help {
    background: rgba(244, 67, 54, 0.06);
    border-color: rgba(211, 47, 47, 0.25);
}