:root {
    --rafb-rail-width: 180px;
    --rafb-max-width: 1680px;
}

html {
    font-size: 15px;
    position: relative;
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

footer {
    margin-top: auto !important;
}

.rafb-container {
    width: 100%;
    max-width: var(--rafb-max-width);
    margin-inline: auto;
    padding-inline: 1rem;
}

/* ---- Three-column shell: left ad | content | right ad ---- */

.rafb-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    padding-top: 1.25rem;
    flex: 1 0 auto;
}

.rafb-rail {
    display: none;
}

@media (min-width: 1200px) {
    .rafb-shell:not(.rafb-shell-noads) {
        grid-template-columns: var(--rafb-rail-width) minmax(0, 1fr) var(--rafb-rail-width);
    }

    .rafb-rail {
        display: block;
    }

    .rafb-rail > .rafb-ad {
        position: sticky;
        top: 1rem;
    }
}

.rafb-main {
    min-width: 0;
}

/* ---- Ad slots ---- */

.rafb-ad {
    margin-inline: auto;
    overflow: hidden;
}

.rafb-ad-left, .rafb-ad-right {
    width: 160px;
    min-height: 600px;
}

.rafb-ad-bottom {
    width: 100%;
    max-width: 728px;
    min-height: 90px;
}

.rafb-ad-bottommobile {
    width: 320px;
    min-height: 50px;
}

.rafb-bottom-ad {
    margin-top: 2rem;
}

.rafb-ad-frame {
    display: block;
    border: 0;
    margin: 0 auto;
    max-width: 100%;
}

.rafb-ad-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 2px dashed var(--bs-border-color);
    border-radius: .5rem;
    color: var(--bs-secondary-color);
    font-size: .85rem;
    background: repeating-linear-gradient(45deg, transparent, transparent 10px, var(--bs-tertiary-bg) 10px, var(--bs-tertiary-bg) 20px);
}

/* ---- Navigation ---- */

.rafb-tools-menu {
    min-width: min(92vw, 640px);
    max-height: 75vh;
    overflow-y: auto;
}

@media (min-width: 768px) {
    .rafb-tools-menu {
        columns: 2;
    }
}

.rafb-tools-menu-group {
    break-inside: avoid;
    margin-bottom: .25rem;
}

.rafb-tools-menu .dropdown-item {
    border-radius: .25rem;
}

/* ---- Home page ---- */

.rafb-tool-card {
    transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease;
}

.rafb-tool-card:hover, .rafb-tool-card:focus-within {
    transform: translateY(-2px);
    border-color: var(--bs-primary);
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .08);
}

.rafb-tool-card .rafb-tool-icon {
    font-size: 1.6rem;
    line-height: 1;
}

/* ---- Tool UI building blocks ---- */

.rafb-mono, textarea.rafb-mono, .rafb-mono.form-control {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: .875rem;
}

textarea.rafb-mono {
    tab-size: 4;
}

.rafb-output {
    white-space: pre-wrap;
    word-break: break-all;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: .75rem;
    min-height: 3rem;
    margin: 0;
}

.rafb-log {
    height: 360px;
    overflow-y: auto;
    background: #0d1117;
    color: #c9d1d9;
    border-radius: var(--bs-border-radius);
    padding: .5rem .75rem;
    font-size: .8rem;
}

.rafb-log .in { color: #7ee787; }
.rafb-log .out { color: #79c0ff; }
.rafb-log .err { color: #ff7b72; }
.rafb-log .info { color: #8b949e; }
.rafb-log .script { color: #d2a8ff; }

.rafb-swatch {
    width: 100%;
    height: 140px;
    border-radius: var(--bs-border-radius-lg);
    border: 1px solid var(--bs-border-color);
}

/* Paste viewer */
.rafb-paste pre {
    margin: 0;
    max-height: 75vh;
    overflow: auto;
    border-radius: var(--bs-border-radius);
}

.rafb-paste pre code.hljs {
    padding: 1rem;
}

/* Diff */
.rafb-diff { font-size: .85rem; }
.rafb-diff .add { background: rgba(46, 160, 67, .18); }
.rafb-diff .del { background: rgba(248, 81, 73, .18); }
.rafb-diff .add .chg { background: rgba(46, 160, 67, .5); border-radius: 2px; }
.rafb-diff .del .chg { background: rgba(248, 81, 73, .5); border-radius: 2px; }
.rafb-diff .sign { width: 1.5em; }
.rafb-diff-split { table-layout: fixed; }
.rafb-diff-split .ln { width: 3.5em; }
.rafb-diff-split .side { width: calc(50% - 3.5em); }
.rafb-diff-split td.side + td.ln { border-left: 1px solid var(--bs-border-color); }
.rafb-diff .empty { background: repeating-linear-gradient(-45deg, transparent, transparent 4px, var(--bs-tertiary-bg) 4px, var(--bs-tertiary-bg) 8px); }
.rafb-diff tr.current td { box-shadow: inset 0 1px 0 var(--bs-primary), inset 0 -1px 0 var(--bs-primary); }
.rafb-diff .ln { color: var(--bs-secondary-color); user-select: none; width: 3.5em; text-align: right; padding-right: .75em; }
.rafb-diff td { padding: 0 .25rem; white-space: pre-wrap; word-break: break-all; vertical-align: top; }

/* Gamepad */
.rafb-pad { max-height: 340px; }
.rafb-pad .body { fill: var(--bs-tertiary-bg); stroke: var(--bs-border-color); stroke-width: 2; }
.rafb-pad .well { fill: none; stroke: var(--bs-border-color); stroke-width: 2; }
.rafb-pad .pbtn, .rafb-pad .pbtn-outline { fill: var(--bs-body-bg); stroke: var(--bs-border-color); stroke-width: 1.5; transition: fill .05s; }
.rafb-pad .pbtn.on { fill: var(--bs-primary); stroke: var(--bs-primary); }
.rafb-pad .pbtn.moved { stroke: var(--bs-primary); stroke-width: 3; }
.rafb-pad .fill { fill: var(--bs-primary); opacity: .85; pointer-events: none; }
.rafb-pad .lbl { font: 600 11px system-ui, sans-serif; fill: var(--bs-body-color); text-anchor: middle; pointer-events: none; }
.rafb-pad .lbl.sm { font-size: 9px; }
.rafb-stick { width: 100%; max-width: 200px; aspect-ratio: 1; }
.rafb-axis { position: relative; height: 10px; margin: 4px 0; background: var(--bs-tertiary-bg); border-radius: 5px; }
.rafb-axis .range { position: absolute; top: 0; bottom: 0; background: var(--bs-primary-bg-subtle); border-radius: 5px; }
.rafb-axis .center { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--bs-border-color); }
.rafb-axis .mark { position: absolute; top: -3px; width: 4px; height: 16px; margin-left: -2px; background: var(--bs-primary); border-radius: 2px; }

/* Time zones */
.tz-strip { display: flex; gap: 1px; min-width: 360px; }
.tz-cell { flex: 1; text-align: center; font-size: .65rem; line-height: 1.6rem; border-radius: 2px; color: var(--bs-secondary-color); }
.tz-cell.night { background: var(--bs-tertiary-bg); }
.tz-cell.awake { background: rgba(var(--bs-primary-rgb), .12); }
.tz-cell.work { background: rgba(25, 135, 84, .28); color: var(--bs-body-color); }
.tz-cell.sel { outline: 2px solid var(--bs-primary); outline-offset: -1px; font-weight: 700; color: var(--bs-body-color); }

/* SSH / SFTP / FTP */
.rafb-terminal { height: 70vh; min-height: 320px; padding: .5rem; background: #0d1117; border-radius: var(--bs-border-radius); }
.rafb-desktop { height: 75vh; min-height: 360px; background: #0d1117; border-radius: var(--bs-border-radius); overflow: hidden; }
.rafb-desktop:fullscreen { height: 100vh; border-radius: 0; }
.rafb-files { max-height: 65vh; overflow-y: auto; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); }
.rafb-files thead th { position: sticky; top: 0; background: var(--bs-body-bg); }

/* Hex editor */
.rafb-hex {
    position: relative;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: .8rem;
    line-height: 1.5;
    max-height: 560px;
    overflow: auto;
    padding: .5rem .75rem;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    user-select: none;
    outline: none;
}
.rafb-hex:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .15); }
.rafb-hex .row { white-space: nowrap; margin: 0; display: block; }
.rafb-hex .off { color: var(--bs-secondary-color); margin-right: 1.5ch; }
.rafb-hex .h { display: inline-block; width: 2.6ch; text-align: center; cursor: pointer; border-radius: 2px; }
.rafb-hex .h.gap { margin-right: 1ch; }
.rafb-hex .asc { margin-left: 1.5ch; border-left: 1px solid var(--bs-border-color); padding-left: 1ch; }
.rafb-hex .a { display: inline-block; width: 1.05ch; text-align: center; cursor: pointer; border-radius: 2px; }
.rafb-hex .z { color: var(--bs-tertiary-color); }
.rafb-hex .mod { color: var(--bs-danger); font-weight: 700; }
.rafb-hex .cur { background: var(--bs-primary); color: #fff; }
.rafb-hex .cur2 { outline: 1px solid var(--bs-primary); }
.rafb-hex .r0 { background: rgba(13, 110, 253, .16); }
.rafb-hex .r1 { background: rgba(25, 135, 84, .18); }
.rafb-hex .r2 { background: rgba(255, 193, 7, .22); }
.rafb-hex .r3 { background: rgba(111, 66, 193, .18); }
.rafb-hex .r4 { background: rgba(220, 53, 69, .18); }
.rafb-hex .r5 { background: rgba(13, 202, 240, .2); }

/* Regex */
.rafb-regex-preview mark {
    padding: 0;
    background: rgba(255, 193, 7, .45);
    color: inherit;
    border-radius: 2px;
}

/* File tools: drop zones and thumbnail grids */
.rafb-dropzone {
    padding: 1.25rem;
    text-align: center;
    border: 2px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background: var(--bs-tertiary-bg);
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
.rafb-dropzone:hover, .rafb-dropzone:focus-visible { border-color: var(--bs-primary); outline: none; }
.rafb-dropzone.dragging { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .08); }
.checker {
    background-color: #fff;
    background-image: conic-gradient(#e6e6e6 25%, #fff 0 50%, #e6e6e6 0 75%, #fff 0);
    background-size: 16px 16px;
}
.rafb-thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.rafb-thumb {
    position: relative;
    margin: 0;
    padding: .5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-body-bg);
}
#imgList .rafb-thumb { cursor: grab; }
.rafb-thumb.checker { background-color: #fff; }
.rafb-thumb img { display: block; width: 100%; height: 170px; object-fit: contain; }
.rafb-thumb img.pixelated { image-rendering: pixelated; }
.rafb-thumb a { cursor: pointer; }
.rafb-thumb figcaption { font-size: .75rem; margin-top: .35rem; text-align: center; color: var(--bs-body-color); }
.rafb-thumb.checker figcaption { color: #212529; }
.rafb-thumb.checker figcaption .text-body-secondary { color: #6c757d !important; }
.rafb-thumb-x { position: absolute; top: .3rem; right: .3rem; z-index: 1; background-color: var(--bs-body-bg); padding: .3rem; border-radius: 50%; }

/* PDF merge & split */
.rafb-src { border-left: 4px solid var(--src-color); }
.rafb-src-badge {
    display: inline-block;
    min-width: 1.6em;
    padding: 0 .3em;
    border-radius: .3em;
    background: var(--src-color);
    color: #fff;
    font-weight: 600;
    text-align: center;
    font-size: .75rem;
    line-height: 1.6;
}
.rafb-pages {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-content: flex-start;
    min-height: 240px;
    padding: .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background: var(--bs-tertiary-bg);
}
.rafb-pages-empty { margin: auto; padding: 2rem; text-align: center; }
.rafb-page {
    position: relative;
    width: 136px;
    padding: .4rem;
    border: 2px solid transparent;
    border-top: 4px solid var(--src-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
    cursor: grab;
    user-select: none;
}
.rafb-page:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.rafb-page.selected { border-color: var(--bs-primary); border-top-color: var(--src-color); background: rgba(var(--bs-primary-rgb), .1); }
.rafb-page-img { height: 150px; display: flex; align-items: center; justify-content: center; }
.rafb-page-img img { max-width: 100%; max-height: 100%; transform: rotate(var(--rot, 0deg)); transition: transform .2s; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); background: #fff; }
/* Turned sideways, the image's width becomes its height: swap the limits so it stays inside the tile. */
.rafb-page:is([data-rot="90"], [data-rot="270"]) .rafb-page-img img { max-width: 150px; max-height: 116px; }
.rafb-page-img img:not([src]) { width: 70%; height: 90%; background: linear-gradient(100deg, #f1f3f5 30%, #fff 50%, #f1f3f5 70%) 0 0 / 200% 100%; animation: rafb-shimmer 1.2s infinite linear; }
@keyframes rafb-shimmer { to { background-position: -200% 0; } }
.rafb-page-label { font-size: .75rem; margin-top: .3rem; text-align: center; }
.rafb-page-actions {
    position: absolute;
    top: .3rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity .15s;
}
.rafb-page:hover .rafb-page-actions, .rafb-page:focus-within .rafb-page-actions { opacity: 1; }
@media (hover: none) { .rafb-page-actions { opacity: 1; } }
.rafb-page-actions button {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: .85rem;
    line-height: 1;
}
.rafb-page-actions button:hover { background: var(--bs-primary); color: #fff; border-color: var(--bs-primary); }
.rafb-page-actions button[data-act=remove]:hover { background: var(--bs-danger); border-color: var(--bs-danger); }
.rafb-split {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 34px;
    border-left: 3px dashed var(--bs-danger);
    cursor: grab;
}
.rafb-split-label { writing-mode: vertical-rl; font-size: .75rem; font-weight: 600; color: var(--bs-danger); white-space: nowrap; }
.rafb-split .btn-close { font-size: .6rem; }
.rafb-ghost { opacity: .3; }

/* ICO */
.rafb-ico-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1.25rem;
    min-height: 200px;
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    color: #212529;
}
.rafb-ico-preview canvas { display: block; margin: 0 auto .25rem; }
.rafb-ico-preview .text-body-secondary { color: #6c757d !important; }
.rafb-ico-source {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 84px;
    padding: .35rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    color: #212529;
}
.rafb-ico-source img { width: 56px; height: 56px; object-fit: contain; }
.rafb-ico-source .btn-close { position: absolute; top: 2px; right: 2px; font-size: .55rem; }

/* Browser Automation console */
.rafb-auto-output {
    max-height: 560px;
    min-height: 120px;
    overflow: auto;
    padding: .5rem .75rem;
    font-family: var(--bs-font-monospace);
    font-size: .8rem;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}
.rafb-auto-line { white-space: pre-wrap; word-break: break-word; padding: .1rem 0; }
.rafb-auto-line.info { color: var(--bs-secondary-color); }
.rafb-auto-line.err { color: var(--bs-danger); }
.rafb-auto-line.result { color: var(--bs-success); }
.rafb-auto-line.table, .rafb-auto-line.media { white-space: normal; padding: .35rem 0; }
.rafb-auto-line table { font-size: .75rem; }
.rafb-auto-shot { max-width: 100%; max-height: 420px; border: 1px solid var(--bs-border-color); border-radius: 4px; }

/* Weather. Series colours are slots 2 (orange) and 1 (blue) of the validated reference palette, stepped for dark mode. */
.rafb-wx { --wx-temp: #eb6834; --wx-rain: #2a78d6; --wx-night: rgba(15, 23, 42, .05); }
[data-bs-theme=dark] .rafb-wx { --wx-temp: #d95926; --wx-rain: #3987e5; --wx-night: rgba(255, 255, 255, .045); }
.rafb-wx-now-icon { font-size: 3.5rem; line-height: 1; }
.rafb-wx-now-temp { font-size: 3rem; font-weight: 600; line-height: 1; }
.rafb-wx-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .5rem 1rem; }
.rafb-wx-facts dt { font-weight: 400; font-size: .75rem; color: var(--bs-secondary-color); }
.rafb-wx-facts dd { margin: 0; font-weight: 600; }
.rafb-wx-alert-text { white-space: pre-line; }
.rafb-wx-chart { position: relative; }
.rafb-wx-chart svg { display: block; width: 100%; height: auto; outline: none; touch-action: pan-y; }
.rafb-wx-chart svg:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; border-radius: 4px; }
.rafb-wx-chart .wx-night { fill: var(--wx-night); }
.rafb-wx-chart .wx-grid { stroke: var(--bs-border-color); stroke-width: 1; stroke-dasharray: 2 3; }
.rafb-wx-chart .wx-baseline { stroke: var(--bs-border-color); stroke-width: 1; }
.rafb-wx-chart .wx-midnight { stroke: var(--bs-secondary-color); stroke-width: 1; opacity: .35; }
.rafb-wx-chart .wx-axis { font-size: 11px; fill: var(--bs-secondary-color); }
.rafb-wx-chart .wx-title, .rafb-wx-chart .wx-day { font-size: 11px; font-weight: 600; fill: var(--bs-secondary-color); }
.rafb-wx-chart .wx-label { font-size: 12px; font-weight: 600; fill: var(--bs-body-color); }
.rafb-wx-chart .wx-temp { fill: none; stroke: var(--wx-temp); stroke-width: 2; stroke-linejoin: round; }
.rafb-wx-chart .wx-temp-dot { fill: var(--wx-temp); stroke: var(--bs-body-bg); stroke-width: 2; }
.rafb-wx-chart .wx-rain { fill: var(--wx-rain); }
.rafb-wx-chart .wx-rain.hover { fill-opacity: .7; }
.rafb-wx-chart .wx-hair { stroke: var(--bs-body-color); stroke-width: 1; opacity: .5; pointer-events: none; }
.rafb-wx-tip {
    position: absolute;
    min-width: 11rem;
    max-width: 16rem;
    padding: .4rem .6rem;
    pointer-events: none;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
.rafb-wx-hours { display: flex; overflow-x: auto; gap: 2px; padding-bottom: .25rem; scroll-snap-type: x proximity; }
.rafb-wx-hour { flex: 0 0 64px; text-align: center; padding: .35rem 0; border-radius: var(--bs-border-radius); scroll-snap-align: start; }
.rafb-wx-hour.midnight { border-left: 1px solid var(--bs-border-color); }
.rafb-wx-rainpct { color: var(--bs-secondary-color); }
.rafb-wx-rainpct.wet { color: var(--bs-body-color); font-weight: 600; }
.rafb-wx-day { border-top: 1px solid var(--bs-border-color-translucent); }
.rafb-wx-day:first-child { border-top: 0; }
.rafb-wx-day summary {
    display: grid;
    grid-template-columns: 7.5rem 2.5rem minmax(0, 1fr) 3.5rem 2.75rem minmax(60px, 9rem) 2.75rem;
    align-items: center;
    gap: .5rem;
    padding: .45rem .25rem;
    cursor: pointer;
    list-style: none;
}
.rafb-wx-day summary::-webkit-details-marker { display: none; }
.rafb-wx-day summary:hover { background: var(--bs-tertiary-bg); }
.rafb-wx-day-name { font-weight: 600; }
.rafb-wx-day-sum { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rafb-wx-day-lo { text-align: right; color: var(--bs-secondary-color); }
.rafb-wx-day-hi { font-weight: 600; }
.rafb-wx-range { position: relative; height: 6px; border-radius: 3px; background: var(--bs-tertiary-bg); }
.rafb-wx-range span { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--wx-temp); }
@media (max-width: 575.98px) {
    .rafb-wx-day summary { grid-template-columns: 6rem 2rem minmax(0, 1fr) 2.5rem 2.5rem; }
    .rafb-wx-day-sum, .rafb-wx-range { display: none; }
    .rafb-wx-now-temp { font-size: 2.5rem; }
}

/* Location autocomplete (place-search.js) */
.rafb-place-list { width: 100%; min-width: 16rem; max-height: 22rem; overflow-y: auto; top: 100%; left: 0; margin-top: 2px; }
.rafb-place-list .dropdown-item { cursor: pointer; white-space: normal; }
.input-group > .position-relative:not(:last-child) > .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .position-relative { min-width: 0; }

/* Zip Code Finder */
.rafb-zc-table { max-height: 540px; overflow: auto; }
.rafb-zc-table thead th { position: sticky; top: 0; z-index: 1; background: var(--bs-body-bg); white-space: nowrap; }
.rafb-zc-sort { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; }
.rafb-zc-sort:hover { color: var(--bs-primary); }