:root {
    --bg: #0b1020;
    --fg: #eaf1ff;
    --muted: #9fb5d1;
    --card: #121833;
    --border: #20284a;
    --accent: #6cb4ff
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
}

html,
body {
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, Inter, Roboto, Arial
}

body {
    background: var(--bg);
    color: var(--fg)
}

a {
    color: var(--accent);
    text-decoration: none
}

/* layout */
header,
main,
footer {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px
}

/* brand */
.brand {
    display: flex;
    align-items: center;
    gap: 10px
}

#tools {
    scroll-margin-top: 16px;
}

.brand img {
    height: 32px;
    width: auto;
    display: block
}

/* nav/lang */
.lang a {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--fg)
}

/* common cards/panels */
.panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px
}

/* home specific bits (safe on all pages) */
.hero h1 {
    margin: 0 0 8px;
    font-size: clamp(28px, 4vw, 42px)
}

.hero .lead {
    color: var(--muted);
    margin: 0 0 18px
}

.btn {
    display: inline-block;
    background: var(--accent);
    color: #001028;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 600
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 20px
}

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px
}

input.search {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #0e1530;
    color: var(--fg)
}

footer {
    color: var(--muted);
    padding: 36px 20px
}

/* ----- global form polish ----- */
:root {
    --control-h: 44px;
    --radius: 10px;
}

input[type="number"],
select,
button.btn {
    height: var(--control-h);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: #0e1530;
    color: var(--fg);
    font-size: 16px;
    line-height: 1;
    padding: 10px 12px;
}

button.btn {
    cursor: pointer;
    transition: transform .04s ease, background .15s ease, border-color .15s ease;
}

button.btn:hover {
    transform: translateY(-1px);
}

button.btn:active {
    transform: translateY(0);
}

button.btn.primary {
    background: var(--accent);
    color: #001028;
    border-color: transparent;
    font-weight: 700;
}

input[type="number"]:focus-visible,
select:focus-visible,
button.btn:focus-visible,
a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* rows of input + button stay aligned */
.row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
}

/* page panels spacing */
.panel h1 {
    margin: 6px 0 8px;
}

.panel .lead {
    color: var(--muted);
    margin: 0 0 14px;
}

/* small label tweaks */
label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
    margin-top: 20px;
}

/* tags/chips */
.tag {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
    margin-right: 6px
}

/* better card padding on narrow screens */
@media (max-width: 680px) {
    .panel {
        padding: 14px
    }
}

/* Make all selects compact by default */
select {
    width: auto;
    justify-self: start;
}

/* place in site.css OR a page css if you want only for that page */
.row button.btn {
    padding-inline: 14px;
}

.card--ad {
    position: relative;
    border-style: dashed;
    border-color: rgba(108, 180, 255, .45);
    background: linear-gradient(180deg, rgba(108, 180, 255, .06), transparent 60%);
}

.card--ad:hover {
    background: rgba(108, 180, 255, .09);
}

.ad-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 11px;
    color: #001028;
    background: var(--accent);
    padding: 2px 6px;
    border-radius: 999px;
    font-weight: 700;
}

/* percentage page: hide legacy right-side bits if they exist */
.pct-item .side,
.pct-item .rlabel,
.pct-item .label-right {
    display: none !important;
}

/* conflict-free result rows */
.res-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
}

/* output looks like an input */
.out {
    display: flex;
    align-items: center;
    height: var(--control-h);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: #0e1530;
    color: var(--fg);
    font-size: 16px;
    padding: 10px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Percentage page: make all controls span full width */
.pct-card input[type="number"],
.pct-card input[type="text"],
.pct-card select {
    width: 100% !important;
    max-width: 100% !important;
    inline-size: 100% !important;
    /* logical width for safety */
    min-width: 0 !important;
    /* avoid overflow in grid/containers */
    display: block;
    box-sizing: border-box;
}

/* Keep your result rows aligned */
.pct-card .res-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
}

/* Hide any old right-side bits if they still exist */
.pct-card .side,
.pct-card .rlabel,
.pct-card .label-right {
    display: none !important;
}

/* screen-reader-only / hidden content for copy targets */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Two-column tool layout (desktop), 1-column on mobile */
.tool-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    /* main area + sidebar width */
    gap: 18px;
}

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

/* prevent overflow in grids */
.tool-aside {
    background: #0e1530;
    /* border: 1px solid var(--border); */
    border-radius: 12px;
    padding: 14px;
}

/* Sidebar sections */
.aside-section+.aside-section {
    margin-top: 14px;
}

.aside-title {
    font-weight: 700;
    font-size: 14px;
    margin: 0 0 8px;
    color: var(--fg);
}

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

.aside-list li {
    margin: 6px 0;
}

.aside-list a {
    color: var(--muted);
}

.aside-list a:hover {
    color: var(--fg);
}

/* Ad slot: reserve space to avoid CLS */
.ad-slot {
    background: #09122a;
    border: 1px dashed rgba(108, 180, 255, .45);
    border-radius: 10px;
    min-height: 180px;
    /* reserve space; adjust later */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--muted);
    text-align: center;
    padding: 10px;
}

/* Make the sidebar sticky (optional, desktop only) */
@media (min-width: 1100px) {
    .tool-aside {
        position: sticky;
        top: 18px;
    }
}

/* Collapse to single column on smaller screens */
@media (max-width: 1024px) {
    .tool-layout {
        grid-template-columns: 1fr;
    }
}