:root {
    --bg: #0b1220;
    --panel: #0f172a;
    --muted: #94a3b8;
    --text: #e2e8f0;
    --brand: #0f2a4b;
    --accent: #266fc9;
    --accent-light: #22d3ee;
    --gap: 14px;
    --radius: 14px;
    --card-height: 230px;
    --image-height: 100px;
    --pill-bg: linear-gradient(180deg, #266fc9, #0f2a4b);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font: 16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial;
    color: var(--text);
    background: var(--bg);
}

/* ---- Layout ---- */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px;
}

/* ---- Dashboard header ---- */
.site-header {
    text-align: center;
    padding: 40px 0 30px;
}

.site-header .logo {
    width: 80px;
    height: 80px;
    border-radius: 14px;
    margin: 0 auto 14px;
    /* background: #111c31;
    padding: 4px;
    border: 1px solid #22d3ee; */
}

.site-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--text);
}

.site-subtitle {
    font-size: 1.1rem;
    color: var(--muted);
    margin-top: 6px;
}

/* ---- Tool page header ---- */
header .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
}

header .brand .logo {
    margin-top: 4px;
    width: 2.5em;
    height: 2.5em;
}

nav.breadcrumbs {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 4px 0 16px;
}

nav.breadcrumbs a {
    color: var(--muted);
    text-decoration: none;
}

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

/* ---- Section Filter Nav ---- */
.section-filter {
    position: relative;
    display: flex;
    gap: 6px;
    align-items: center;
    background: #0e1628;
    border: 1px solid #1e293b;
    border-radius: 999px;
    padding: 6px;
    margin: 10px auto 24px;
    width: fit-content;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

.section-filter button {
    position: relative;
    z-index: 1;
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--muted);
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
    transition: color .25s ease;
}

.section-filter button:hover {
    color: var(--text);
}

.section-filter button.is-active {
    color: var(--text);
}

.section-filter .pill {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: 0;
    border-radius: 999px;
    background: var(--pill-bg);
    border: 1px solid #334155;
    transform: translateX(0);
    transition: transform .25s ease, width .25s ease;
    z-index: 0;
}

/* Responsive: allow the section-filter to wrap into multiple rows on narrow screens
   while preserving the sliding pill effect. When wrapped the pill's vertical
   position will be set by JS to sit behind the active button. */
@media (max-width: 700px) {
    .section-filter {
        width: 100%;
        white-space: normal;
        flex-wrap: wrap;
        justify-content: flex-start;
        overflow-x: visible;
        overflow-y: visible;
        padding: 8px;
        border-radius: 10px;
    }
    .section-filter button {
        flex: 0 0 auto;
    }
    /* Allow the pill to be sized and positioned by JS instead of stretching full height */
    .section-filter .pill {
        top: 0; /* JS will set an inline top value to align with the target button */
        bottom: auto;
        height: auto; /* JS will set height */
        margin: 4px 0;
    }
}

/* ---- Section labels ---- */
.section-label {
    margin: 18px 2px 10px;
    font-size: 20px;
    font-weight: 650;
    color: #e5edff;
}

/* ---- Card grid ---- */
.tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--gap);
}

.tool-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: var(--radius);
    padding: 12px;
    overflow: hidden;
    height: var(--card-height);
    transition: border-color .2s ease, transform .15s ease, height .25s ease;
    /* anchors used as cards should not show link underlines */
    text-decoration: none;
    color: inherit;
}

.tool-card:hover {
    border: 1px solid transparent;
    border-radius: var(--radius);
    background-image: linear-gradient(#0f172a, #0f172a), linear-gradient(180deg, var(--accent-light), var(--accent));
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
    transform: translateY(-2px);
}

/* Ensure link/visited states don't show decoration or change color */
.tool-card:link,
.tool-card:visited {
    text-decoration: none;
    color: inherit;
}

.tool-fig {
    height: var(--image-height);
    display: grid;
    place-items: center;
    background: #0b1324;
    border: 1px solid #1f2a3a;
    border-radius: 10px;
    margin-bottom: 10px;
}

.tool-fig img,
.tool-fig svg {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}

.tool-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    margin: 4px 0 2px;
    color: #e6eefc;
}

.tool-sub {
    font-size: 12px;
    color: var(--muted);
}

/* ---- Shared controls ---- */
button,
input,
select,
textarea {
    font: inherit;
}

.btn {
    height: 3rem;
    appearance: none;
    border: 1px solid #1e293b;
    background: var(--pill-bg);
    color: var(--text);
    padding: 9px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .35s ease, color .35s ease, border-color .35s ease;
}

.btn:hover {
    border-color: #334155;
}

/* transient copied state uses accent color and fades back */
.btn.copied {
    background: var(--pill-bg);
    border-color: var(--accent);
}

.input,
textarea,
select {
    height: 3rem;
    background: #0b1324;
    border: 1px solid #1f2a3a;
    border-radius: 10px;
    color: var(--text);
    padding: 10px 12px;
    width: 100%;
    display: block;
}

label {
    font-size: 13px;
    color: var(--muted);
}

.row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* Make textarea and result look identical */
textarea,
.result {
    background: #0b1324;
    border: 1px solid #1f2a3a;
    border-radius: 10px;
    padding: 12px;
    min-height: 200px;
    max-height: 320px;
    overflow: auto;
    width: 100%;
    display: block;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--text);
}

.result {
    white-space: pre-wrap;
}

/* --- Form layout helpers (Regex + Lorem pages) --- */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 12px;
    align-items: end;
}

.form-grid>label {
    width: 100%;
}

.form-grid .controls {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    justify-content: flex-end;
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}

/* Responsive tweak: stack form inputs and move controls to their own row on small screens */
@media (max-width: 700px) {
    .form-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .form-grid .controls {
        grid-column: 1 / -1;
        grid-row: auto;
        gap: 8px;
        justify-content: space-between;
        align-items: stretch;
    }

    /* Make action buttons share available width equally on small screens */
    .form-grid .controls .btn {
        flex: 1;
        min-width: 0; /* allow buttons to shrink equally */
        /* allow button height to expand and text to wrap on narrow screens */
        height: auto;
        white-space: normal;
        padding: 10px 12px;
    }
}

.flags-row {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #1f2a3a;
    border-radius: 10px;
    background: #0b1324;
}

.flags-row .group {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}

/* --- Number input cleanup (for Lorem Ipsum generator) --- */
input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* --- Themed checkboxes --- */
.check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--muted);
}

.check input.chx {
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 1px solid #1f2a3a;
    background: #0b1324;
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.check input.chx::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--accent);
    transform: scale(0);
    transition: transform .12s ease;
}

.check input.chx:checked {
    background: #0e1628;
    border-color: #334155;
}

.check input.chx:checked::after {
    transform: scale(1);
}

.check label {
    cursor: pointer;
}

/* --- Themed color input --- */
input[type="color"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 44px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid #1f2a3a;
    background: #0b1324;
    cursor: pointer;
    padding: 0; /* let swatch fully occupy */
    display: inline-block;
}

/* WebKit/Blink swatch */
input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 4px;
    border-radius: 9px;
    background: transparent;
}
input[type="color"]::-webkit-color-swatch {
    border-radius: 6px;
    border: 1px solid #1e293b;
}

/* Firefox swatch */
input[type="color"]::-moz-color-swatch {
    border-radius: 6px;
    border: 1px solid #1e293b;
}

input[type="color"]:hover {
    border-color: #334155;
}
input[type="color"]:focus {
    outline: none;
    border-color: #334155;
    box-shadow: 0 0 0 3px rgba(38, 111, 201, 0.25);
}

/* ---- Footer ---- */
footer {
    border-top: 1px solid #1e293b;
    margin-top: 32px;
    padding: 16px 0;
    color: var(--muted);
    text-align: center;
    font-size: .9rem;
}

/* Footer nav: modern pill links */
.footer-nav {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    background: #0e1628;
    border: 1px solid #1e293b;
    border-radius: 999px;
    padding: 6px 10px;
    margin-bottom: 10px;
}
.footer-nav a {
    color: var(--text);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 999px;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.footer-nav a:hover {
    background: #0b1324;
    color: #e6eefc;
}
.footer-note {
    color: var(--muted);
}

/* ---- Scrollbar tweaks ---- */
.section-filter::-webkit-scrollbar {
    height: 6px;
}

.section-filter::-webkit-scrollbar-thumb {
    background: #1f2937;
    border-radius: 10px;
}

/* ===== Scrollbar Theme (for dark mode) ===== */
textarea::-webkit-scrollbar,
pre::-webkit-scrollbar,
.result::-webkit-scrollbar {
    width: 10px;
}

textarea::-webkit-scrollbar-track,
pre::-webkit-scrollbar-track,
.result::-webkit-scrollbar-track {
    background: var(--panel);
    border-radius: 10px;
}

textarea::-webkit-scrollbar-thumb,
pre::-webkit-scrollbar-thumb,
.result::-webkit-scrollbar-thumb {
    background-color: #1e293b;
    border-radius: 10px;
    border: 2px solid var(--panel);
}

textarea::-webkit-scrollbar-thumb:hover,
pre::-webkit-scrollbar-thumb:hover,
.result::-webkit-scrollbar-thumb:hover {
    background-color: var(--brand);
}

/* Firefox scrollbar (modern versions) */
textarea,
.result {
    scrollbar-width: thin;
    scrollbar-color: #1e293b var(--panel);
}

/* Help tooltip component (reusable) */
.help-wrap {
    position: relative;
    display: inline-block;
}

.help-btn {
    appearance: none;
    border: 1px solid #1e293b;
    background: transparent;
    color: var(--text);
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 8px;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    font-weight: 700;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}

.help-btn:hover,
.help-btn:focus {
    border-color: #334155;
    background: #0e1628;
}

.help-tooltip {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: var(--panel);
    border: 1px solid #1e293b;
    color: var(--text);
    padding: 12px;
    border-radius: 10px;
    width: 340px;
    max-width: calc(100vw - 40px);
    box-shadow: 0 8px 24px rgba(2,6,23,0.6);
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 60;
    font-size: 0.95rem;
}

.help-wrap:hover .help-tooltip {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.help-tooltip .title {
    font-weight: 700;
    margin-bottom: 8px;
    color: #e6eefc;
}

.help-tooltip kbd {
    background: #0b1220;
    border: 1px solid #1f2a3a;
    padding: 3px 6px;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace;
    font-size: 0.85rem;
    display: inline-block;
    margin-right: 6px;
}

.help-tooltip .hotkey-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 8px;
}

.help-tooltip .hotkey-desc {
    color: var(--muted);
    font-size: 0.92rem;
}

mark {
    background: var(--accent-light);
    color: #0b1220;
    /* padding: 4px 4px; */
    /* border-radius: 4px; */
}