:root { color-scheme: light dark; }
html { scroll-behavior: smooth; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(100,116,139,.35); border-radius: 9999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,.55); background-clip: padding-box; }

[x-cloak] { display: none !important; }

.field-label { display: block; margin-bottom: .375rem; font-size: .8125rem; font-weight: 500; }

input:not([type=checkbox]):not([type=radio]),
select,
textarea {
    width: 100%;
    border-radius: .5rem;
    border: 1px solid rgb(226 232 240);
    background-color: #ffffff;
    padding: .5rem .75rem;
    font-size: .875rem;
    color: rgb(30 41 59);
    line-height: 1.5;
    transition: border-color .15s, box-shadow .15s;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .65rem center;
    background-size: 1rem;
    padding-right: 2.25rem;
    cursor: pointer;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #3366ff;
    box-shadow: 0 0 0 3px rgba(51,102,255,.15);
}

/* ── Dark mode overrides ── */
.dark input:not([type=checkbox]):not([type=radio]),
.dark select,
.dark textarea {
    border-color: rgb(51 65 85);
    background-color: rgb(15 23 42);
    color: rgb(226 232 240);
}

.dark select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .65rem center;
    background-size: 1rem;
}

.dark select option {
    background-color: rgb(15 23 42);
    color: rgb(226 232 240);
}

/* Topbar locale select — compact override */
header select {
    width: auto;
    padding: .375rem .5rem .375rem .625rem;
    font-size: .8125rem;
    border-color: rgb(226 232 240);
}
.dark header select {
    border-color: rgb(51 65 85);
}

/* Tooltip */
.tooltip-wrapper { position: relative; display: inline-block; }
.tooltip-wrapper .tooltip-box {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgb(15 23 42);
    color: rgb(226 232 240);
    font-size: .75rem;
    font-family: ui-monospace, monospace;
    padding: .5rem .75rem;
    border-radius: .5rem;
    white-space: pre-wrap;
    word-break: break-all;
    max-width: 360px;
    width: max-content;
    z-index: 50;
    box-shadow: 0 4px 16px rgba(0,0,0,.3);
    border: 1px solid rgb(51 65 85);
}
.tooltip-wrapper:hover .tooltip-box { display: block; }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Tooltip z-index fix */
.tooltip-wrapper { position: relative; display: inline-block; max-width: 100%; }
.tooltip-wrapper .tooltip-box {
    display: none;
    position: fixed;
    background: rgb(15 23 42);
    color: rgb(226 232 240);
    font-size: .75rem;
    font-family: ui-monospace, monospace;
    padding: .5rem .75rem;
    border-radius: .5rem;
    white-space: pre-wrap;
    word-break: break-all;
    max-width: 400px;
    width: max-content;
    z-index: 9999;
    box-shadow: 0 8px 24px rgba(0,0,0,.5);
    border: 1px solid rgb(51 65 85);
    pointer-events: none;
}
.tooltip-wrapper:hover .tooltip-box { display: block; }