button {
        background-color: var(--c-primary, #eab308);
        border: 1px solid var(--c-primary-dark, #ca8a04);
        border-radius: var(--radius, 6px);
        color: var(--c-btn-text, #1a1000);
        padding: 6px 14px;
        display: inline-block;
        cursor: pointer;
        font-weight: 500;
        font-size: 0.9em;
        font-family: var(--font-sans, system-ui, sans-serif);
        letter-spacing: 0.015em;
        transition: background-color var(--transition, 0.15s ease), box-shadow var(--transition, 0.15s ease), border-color var(--transition, 0.15s ease);
}

button:hover {
        background-color: var(--c-primary-light, #3b82f6);
        border-color: var(--c-primary-light, #3b82f6);
}

button:active {
        background-color: var(--c-primary-dark, #1d4ed8);
}

button.danger {
        background-color: var(--c-danger, #dc2626);
        border: 1px solid var(--c-danger-dark, #b91c1c);
        color: white;
}

button.danger:hover {
        background-color: var(--c-danger-light, #ef4444);
        border-color: var(--c-danger-light, #ef4444);
}

button.danger:active {
        background-color: var(--c-danger-dark, #b91c1c);
}

button.close-button {
        box-sizing: content-box;
        height: 1em;
        width: 1em;
        padding: 1px;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='100' width='100'><path d='M 30,30 70,70 M 70,30 30,70' style='fill:none;stroke:rgb(255,255,255);stroke-width:8;stroke-linecap:round; stroke-linejoin:round'/></svg>");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
}

button.important {
        background-color: var(--c-success, #16a34a);
        color: white;
        border: 1px solid var(--c-success-dark, #15803d);
}

button.important:hover {
        background-color: var(--c-success-light, #22c55e);
        border-color: var(--c-success-light, #22c55e);
}

button.important:active {
        background-color: var(--c-success-dark, #15803d);
}

button.empty {
        background-color: rgba(0, 0, 0, 0);
        color: var(--c-primary, #0077cc);
        border: 1px solid transparent;
}

button.empty:hover {
        background-color: rgba(0, 119, 204, 0.08);
        border-color: rgba(0, 119, 204, 0.2);
}

button.empty:active {
        background-color: rgba(0, 119, 204, 0.15);
}

button.empty.expander {
        padding-right: 1.5em;
        position: relative;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='70' width='125'><path d='M 10,10 60,60 110,10' style='fill:none;stroke:rgb(59,130,246);stroke-width:20;stroke-linecap:round; stroke-linejoin:round'/></svg>");
        background-position: center right 0.5em;
        background-repeat: no-repeat;
        background-size: auto 25%;
}

button.empty.expander.expanded {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='70' width='125'><path d='M 10,60 60,10 110,60' style='fill:none;stroke:rgb(59,130,246);stroke-width:20;stroke-linecap:round; stroke-linejoin:round'/></svg>");
}

button:focus-visible {
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35);
        outline: none;
}

select {
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        border: 1px solid var(--c-border, #d0d4e0);
        background-color: var(--c-control-bg, #ebedf5);
        color: var(--c-text-muted, #58627a);
        box-shadow: none;
        padding: 5px 8px;
        padding-right: 1.6em;
        border-radius: var(--radius, 5px);
        position: relative;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='70' width='120'><path d='M 10,10 60,60 110,10' style='fill:none;stroke:rgb(148,163,184);stroke-width:20;stroke-linecap:round; stroke-linejoin:round'/></svg>");
        background-position: center right 0.5em;
        background-repeat: no-repeat;
        background-size: auto 25%;
        cursor: pointer;
        transition: border-color var(--transition, 0.15s ease), box-shadow var(--transition, 0.15s ease);
}

option {
        color: initial;
        background-color: initial;
}

select:focus {
        box-shadow: 0 0 0 3px rgba(0, 119, 204, 0.2);
        border-color: var(--c-primary, #0077cc);
        outline: none;
}

select:hover {
        border-color: var(--c-border-hover, #9aa0b8);
}

input[type=checkbox] {
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        border: 1px solid var(--c-border, #d0d4e0);
        border-radius: var(--radius, 5px);
        background-color: var(--c-control-bg, #ebedf5);
        box-shadow: none;
        width: 1em;
        height: 1em;
        vertical-align: text-bottom;
        margin-bottom: 1px;
        margin-top: -1px;
        box-sizing: content-box;
        cursor: pointer;
        transition: background-color var(--transition, 0.15s ease), border-color var(--transition, 0.15s ease);
}

input[type=checkbox]:checked {
        background-color: var(--c-primary, #0077cc);
        border-color: var(--c-primary-dark, #005fa3);
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='100' width='100'><path d='M 10,55 35,80 90,20' style='fill:none;stroke:rgb(255,255,255);stroke-width:15;stroke-linecap:round; stroke-linejoin:round'/></svg>");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 90% 90%;
}

input[type=radio] {
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        border: 1px solid var(--c-border, #d0d4e0);
        border-radius: 50%;
        background-color: var(--c-control-bg, #ebedf5);
        box-shadow: none;
        width: 1em;
        height: 1em;
        vertical-align: text-bottom;
        margin-bottom: 1px;
        margin-top: -1px;
        box-sizing: content-box;
        cursor: pointer;
        transition: background-color var(--transition, 0.15s ease), border-color var(--transition, 0.15s ease);
}

input[type=radio]:checked {
        background-color: var(--c-primary, #0077cc);
        border-color: var(--c-primary-dark, #005fa3);
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='100' width='100'><circle cx='50' cy='50' r='27' style='fill:rgb(255,255,255);'/></svg>");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
}

input[type=radio]:focus, input[type=checkbox]:focus {
        box-shadow: 0 0 0 3px rgba(0, 119, 204, 0.2);
        outline: none;
}

input[type=radio]:hover, input[type=checkbox]:hover {
        border-color: var(--c-border-hover, #9aa0b8);
}

input[type=number] {
        -webkit-appearance: none;
        -moz-appearance: textfield;
        appearance: textfield;
        border: 1px solid var(--c-border, #d0d4e0);
        background-color: var(--c-input-bg, #f4f5fa);
        color: var(--c-text, #1c2133);
        padding: 5px 8px;
        border-radius: var(--radius, 5px);
        transition: border-color var(--transition, 0.15s ease), box-shadow var(--transition, 0.15s ease);
}

input[type=text] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: 1px solid var(--c-border, #d0d4e0);
        background-color: var(--c-input-bg, #f4f5fa);
        color: var(--c-text, #1c2133);
        box-shadow: none;
        padding: 5px 8px;
        border-radius: var(--radius, 5px);
        transition: border-color var(--transition, 0.15s ease), box-shadow var(--transition, 0.15s ease);
}

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

input[type=number]:hover, input[type=text]:hover {
        border-color: var(--c-border-hover, #9aa0b8);
}

input[type=number]:invalid, input[type=text]:invalid {
        background-color: #3d1a1a;
        box-shadow: none;
}

input[type=number]:focus, input[type=text]:focus {
        box-shadow: 0 0 0 3px rgba(0, 119, 204, 0.2);
        border-color: var(--c-primary, #0077cc);
        outline: none;
}

input[type=range] {
        -webkit-appearance: none;
        background: transparent;
        height: 22px;
        padding: 0;
        cursor: pointer;
}

input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
}

input[type=range]:focus {
        outline: none;
}

input[type=range]::-ms-track {
        cursor: pointer;
        background: transparent;
        border-color: transparent;
        color: transparent;
}

input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        border: 2px solid var(--c-primary, #0077cc);
        height: 14px;
        width: 14px;
        border-radius: 50%;
        background: white;
        cursor: pointer;
        margin-top: -5px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
        box-sizing: content-box;
        transition: border-color var(--transition, 0.15s ease), box-shadow var(--transition, 0.15s ease);
}

input[type=range]:hover::-webkit-slider-thumb {
        border-color: var(--c-primary-light, #2090e0);
        box-shadow: 0 1px 6px rgba(0, 119, 204, 0.35);
}

input[type=range]:active::-webkit-slider-thumb {
        background: var(--c-primary, #0077cc);
}

input[type=range]::-moz-range-thumb {
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
        border: 2px solid var(--c-primary, #0077cc);
        height: 14px;
        width: 14px;
        border-radius: 50%;
        background: white;
        cursor: pointer;
}

input[type=range]:active::-moz-range-thumb {
        background: var(--c-primary, #0077cc);
}

input[type=range]::-ms-thumb {
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
        border: 2px solid var(--c-primary, #0077cc);
        height: 14px;
        width: 14px;
        border-radius: 50%;
        background: white;
        cursor: pointer;
        margin-bottom: -4px;
        margin-top: -4px;
        box-sizing: content-box;
}

input[type=range]:active::-ms-thumb {
        background: var(--c-primary, #0077cc);
}

input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 6px;
        cursor: pointer;
        border: 1px solid var(--c-border, #d0d4e0);
        background: linear-gradient(
                to right,
                var(--c-primary, #0077cc) 0%,
                var(--c-primary, #0077cc) var(--range-fill, 0%),
                var(--c-control-bg, #ebedf5) var(--range-fill, 0%),
                var(--c-control-bg, #ebedf5) 100%
        );
        border-radius: 3px;
        box-sizing: border-box;
}

input[type=range]:focus::-webkit-slider-runnable-track {
        border-color: var(--c-primary, #0077cc);
}

input[type=range]::-moz-range-track {
        width: 100%;
        height: 6px;
        cursor: pointer;
        border: 1px solid var(--c-border, #d0d4e0);
        background-color: var(--c-control-bg, #ebedf5);
        border-radius: 3px;
        box-sizing: border-box;
}

input[type=range]::-moz-range-progress {
        background-color: var(--c-primary, #0077cc);
        height: 6px;
        border-radius: 3px 0 0 3px;
}

input[type=range]:focus::-moz-range-track {
        border-color: var(--c-primary, #0077cc);
}

input[type=range]::-ms-track {
        width: 100%;
        height: 6px;
        cursor: pointer;
        border: 1px solid var(--c-border, #d0d4e0);
        background-color: var(--c-control-bg, #ebedf5);
        border-radius: 3px;
        box-sizing: border-box;
        box-shadow: none;
}

input[type=range]:focus::-ms-track {
        border-color: var(--c-primary, #0077cc);
}

input[type=range]::-ms-fill-lower {
        width: 100%;
        height: 6px;
        cursor: pointer;
        border: 1px solid var(--c-border, #d0d4e0);
        background-color: var(--c-control-bg, #ebedf5);
        border-radius: 3px;
        box-sizing: border-box;
}

input[type=range]:focus::-ms-fill-lower {
        background: var(--c-control-bg, #ebedf5);
}

input[type=range]::-ms-fill-upper {
        width: 100%;
        height: 6px;
        cursor: pointer;
        border: 1px solid var(--c-border, #d0d4e0);
        background-color: var(--c-control-bg, #ebedf5);
        border-radius: 3px;
        box-sizing: border-box;
}

input[type=range]:focus::-ms-fill-upper {
        background: var(--c-control-bg, #ebedf5);
}

.input_file {
        display: inline-block;
        width: 100%;
        position: relative;
        white-space: nowrap;
}

.input_file input[type=file] {
        opacity: 0;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
}

.input_file label {
        background-color: rgba(0, 0, 0, 0);
        color: var(--c-primary, #0077cc);
        border: 1px solid var(--c-primary, #0077cc);
        border-radius: var(--radius, 5px);
        padding: 4px 8px;
        margin: 2px 0 2px 0;
        width: 100%;
        max-width: min(35vw, 35vh);
        text-align: center;
        display: inline-block;
        cursor: pointer;
        overflow-x: hidden;
        text-overflow: ellipsis;
        box-sizing: border-box;
        vertical-align: middle;
        font-weight: 500;
        transition: background-color var(--transition, 0.15s ease);
}

.input_file input[type=file]:hover+label {
        background-color: rgba(0, 119, 204, 0.08);
}

.input_file input[type=file]:active+label {
        background-color: rgba(0, 119, 204, 0.15);
}

.input_file input[type=file]:focus+label {
        box-shadow: 0 0 0 3px rgba(0, 119, 204, 0.2);
}

.input_file label:empty::before {
        content: 'Browse...';
        display: inline-block;
        text-align: center;
        width: 100%;
}

textarea {
        border: 1px solid var(--c-border, #d0d4e0);
        background-color: var(--c-input-bg, #f4f5fa);
        color: var(--c-text, #1c2133);
        box-shadow: none;
        padding: 5px 8px;
        border-radius: var(--radius, 5px);
        transition: border-color var(--transition, 0.15s ease), box-shadow var(--transition, 0.15s ease);
}

textarea:hover {
        border-color: var(--c-border-hover, #9aa0b8);
}

textarea:invalid {
        background-color: #3d1a1a;
        box-shadow: none;
}

textarea:focus {
        box-shadow: 0 0 0 3px rgba(0, 119, 204, 0.2);
        border-color: var(--c-primary, #0077cc);
        outline: none;
}

select:disabled, input:disabled, button:disabled, textarea:disabled, .input_file input[type=file]:disabled+label {
        opacity: 0.4;
}

input:disabled+label {
        opacity: 0.4;
}

/* ── Custom yellow tooltips ─────────────────────────────────── */
[title] {
        position: relative;
}

[title]:hover::after {
        content: attr(title);
        position: absolute;
        bottom: calc(100% + 7px);
        left: 50%;
        transform: translateX(-50%);
        background: #facc15;
        color: #1c1000;
        padding: 4px 10px;
        border-radius: 5px;
        font-size: 0.73em;
        font-weight: 600;
        white-space: nowrap;
        z-index: 9999;
        pointer-events: none;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
        letter-spacing: 0.01em;
}

[title]:hover::before {
        content: '';
        position: absolute;
        bottom: calc(100% + 1px);
        left: 50%;
        transform: translateX(-50%);
        border: 6px solid transparent;
        border-top-color: #facc15;
        z-index: 9999;
        pointer-events: none;
}