/* =========================================================
   RESET & BASE
========================================================= */
*{
    box-sizing:border-box;
}

:root{
    --ui-bg:#000000;
    --ui-card:rgba(15,22,34,.75);
    --ui-card-strong:rgba(7,17,30,.75);
    --ui-card-surface:
        linear-gradient(180deg, rgba(12,24,42,.82), rgba(5,12,24,.86)),
        var(--ui-card);
    --ui-card-border:var(--ui-border-soft);
    --ui-card-backdrop:blur(18px);
    --ui-card-hover-surface:
        linear-gradient(180deg, rgba(80,165,255,.2), rgba(0,68,160,.1)),
        rgba(7,22,38,.9);
    --ui-card-hover-border:rgba(110,190,255,.9);
    --ui-card-hover-shadow:0 0 18px rgba(80,165,255,.28);
    --ui-title:#ffffff;
    --ui-text:#d8efff;
    --ui-muted:#9fb7cf;
    --ui-meta:#9fc9ff;
    --ui-accent:#6ebeff;
    --ui-accent-strong:#8fbfff;
    --ui-border:rgba(80,165,255,.68);
    --ui-border-soft:rgba(80,165,255,.42);
    --ui-border-faint:rgba(80,165,255,.25);
    --ui-red:#ff9a9a;
    --ui-green:#9affd8;
    --ui-yellow:#ffe98a;
    --ui-cyan:#45d8ff;
}

html,
body{
    margin:0 auto;
    color:var(--ui-text);
}
body{
    background:var(--ui-bg);
    font-family:'Orbitron',sans-serif;
}
/* =========================================================
   GLOBAL SCROLLBAR HIDE (SCROLL STILL WORKS)
========================================================= */

html{
    overflow-y:scroll;           /* keep scrolling enabled */
    scrollbar-width:none;        /* Firefox */
    -ms-overflow-style:none;     /* IE / old Edge */
}

html::-webkit-scrollbar{
    width:0;
    height:0;
    display:none;                /* Chrome / Safari / Edge */
}

/* =========================================================
   CARD BASE
========================================================= */
.card{
    background:var(--ui-card-surface);
    border:1px solid var(--ui-card-border);
    border-radius:0;
    /* backdrop-filter:var(--ui-card-backdrop); */
    margin-bottom: 5px;
    padding:4px;
}

.card-title{
    min-width:0;
    position:relative;
    color:#d8efff;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    width:100%;
    font-size:18px;
    letter-spacing:3px;
    text-align:center;
    text-transform:uppercase;
}

.card-action-top-right{
    position:absolute;
    right:0;
    top:0;
    padding:3px 15px;
    letter-spacing:1px;
    transform:none;
}

.card-action-top-right:hover,
.card-action-top-right:focus,
.card-action-top-right:active{
    transform:none;
}

.card-subtitle{
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:var(--ui-meta);
    font-size:8px;
    letter-spacing:3px;
    line-height:1.2;
    text-align:center;
    text-transform:uppercase;
}

.card-break{
    width:84%;
    height:1px;
    margin:4px auto;
    background:linear-gradient(90deg, transparent, rgba(69,216,255,.9), transparent);
}

.core-contents{
    display:grid;
    gap:6px;
}

.tile{
    min-width:0;
    border:1px solid rgba(55,135,255,.62);
    border-radius:0;
    background:
        linear-gradient(180deg, rgba(32,92,185,.2), rgba(4,36,92,.1)),
        rgba(3,13,32,.75);
    color:#d8efff;
    text-decoration:none;
    box-sizing:border-box;
}

button.tile{
    appearance:none;
    -webkit-appearance:none;
    font:inherit;
}

.tile:hover,
.tile:focus{
    border-color:var(--ui-card-hover-border);
    background:var(--ui-card-hover-surface);
    box-shadow:var(--ui-card-hover-shadow);
    outline:none;
}

/* =========================================================
   GALLERY STICKY HEADER
========================================================= */

.gallery-sticky-header{
    position: sticky;
    top: 0;
    z-index: 200;
}

.wrapper:not(.login) > #core{
    position: sticky;
    top: 64px; /* space below logo wrapper */
    z-index: 190;
}

.gallery-sticky-header,
.wrapper:not(.login) > #core{
    transition:opacity .22s ease;
}

/* =========================================================
   HEADER SYSTEM
========================================================= */

.header{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.header > div{
    width:100%;
}

.title{
    color:#d8efff;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    width:100%;
    font-size:18px;
    letter-spacing:3px;
    text-align:center;
    text-transform:uppercase;
}

.title,
.admin-card-title,
.audit-card-title{
    color:#d8efff;
    text-align:center;
    text-transform:uppercase;
    padding-bottom:4px;
    margin-bottom:4px;
}

.subtitle{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:8px;
    letter-spacing:4px;
    color:var(--ui-meta);
    margin-top:2px;
}

.logout{
    font-size:9px;
    letter-spacing:2px;
}

/* =========================================================
   CORE LOGO
========================================================= */
.logo-role-wrapper{
    background: rgba(0, 0, 0, 0.75);
}
.title-logo{
    width:64px;
    height:auto;
    display:block;
    margin:0 auto;
    opacity:.95;
    filter:drop-shadow(0 0 10px rgba(110,190,255,.72));
    transition:filter .2s ease;
}

.title-logo.admin-logo{
    filter:drop-shadow(0 0 12px rgba(255,0,0,.85));
}

/* =========================================================
   STATS SYSTEM
========================================================= */

.core-counters{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:6px;
}

.core-counter{
    background:rgba(0,0,0,.6);
    border:1px solid var(--ui-border-soft);
    text-align:center;
}

.core-counter-button{
    width:100%;
    min-width:0;
    padding:0;
    background:
        linear-gradient(180deg, rgba(80,165,255,.18), rgba(0,68,160,.08)),
        rgba(7,17,30,.78);
    border: 1px solid rgba(80,165,255,.68);
    color: #d8efff;
    font-family:inherit;
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
    transition:border-color .2s ease, background .2s ease;
}

.core-counter-button:hover,
.core-counter-button:focus{
    border-color:rgba(110,190,255,.96);
    background:
        linear-gradient(180deg, rgba(80,165,255,.28), rgba(0,68,160,.14)),
        rgba(7,22,38,.92);
    outline:none;
}

.core-counter-value{
    font-size:15px;
    color:#45d8ff;
}

.core-counter-label{
    color:#c3ccd6;
    font-size:7px;
    letter-spacing:2px;
    opacity:.92;
    margin-top:2px;
}

/* =========================================================
   CONTROL ROW
========================================================= */

.core-controls{
    color:var(--ui-text);
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:6px;
}

.core-connection-status{
    grid-column:span 2;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    min-width:0;
    border:1px solid var(--ui-border-faint);
    background:rgba(0,0,0,.36);
}

.flow-text{
    font-size:8px;
    letter-spacing:2px;
}

/* =========================================================
   FLOW BAR
========================================================= */

.flow-bar{
    position:relative;
    height:6px;
    width:100%;
    background:rgba(80,165,255,.08);
    overflow:hidden;
}

.flow-connecting .flow-line{
    position:absolute;
    top:0;
    left:-40%;

    height:100%;
    width:40%;

    background:linear-gradient(
        90deg,
        transparent,
        var(--ui-green),
        transparent
    );
}

.flow-connected .flow-bar{
    background:
        linear-gradient(90deg, rgba(0,255,170,.98), rgba(0,215,120,.95), rgba(0,255,170,.98)),
        rgba(6,24,18,.78);
    animation:connectedPulse 1.8s ease-in-out infinite;
}

.flow-offline .flow-bar{
    background:#ff2b2b;
}

@keyframes connectedPulse{

    0%{
        box-shadow:0 0 5px rgba(154,255,216,.5);
    }

    50%{
        box-shadow:0 0 10px rgba(154,255,216,.72);
    }

    100%{
        box-shadow:0 0 5px rgba(154,255,216,.5);
    }

}

/* =========================================================
   GLOBAL BUTTON SYSTEM
========================================================= */

.ui-button,
.btn,
.admin-panel button,
.admin-button,
.tab {
    appearance:none;
    -webkit-appearance:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:1px solid rgba(80,165,255,.68);
    color:#d8efff;
    background:
        linear-gradient(180deg, rgba(80,165,255,.18), rgba(0,68,160,.08)),
        rgba(7,17,30,.78);
    font-family:inherit;
    font-size:12px;
    font-weight:bold;
    line-height:1.15;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
    transition:
        border-color .2s ease,
        color .2s ease,
        background .2s ease,
        opacity .2s ease;
}

.ui-button:hover,
.ui-button:focus,
.btn:hover,
.btn:focus,
.admin-panel button:hover,
.admin-panel button:focus,
.admin-button:hover,
.admin-button:focus,
.tab:hover,
.tab:focus {
    color:#ffffff;
    border-color:rgba(110,190,255,.96);
    background:
        linear-gradient(180deg, rgba(80,165,255,.28), rgba(0,68,160,.14)),
        rgba(7,22,38,.92);
    outline:none;
    text-decoration:none;
}

.ui-button:disabled,
.btn:disabled,
.admin-panel button:disabled {
    color:#78909a;
    border-color:rgba(120,144,154,.35);
    background:rgba(7,15,24,.62);
    cursor:not-allowed;
    opacity:.58;
    transform:none;
}

.ui-button-green,
.admin-panel button.primary,
.btn-enabled,
.audit-scan-button {
    color:#c9ffdf;
    border-color:rgba(0,255,170,.68);
    background:
        linear-gradient(180deg, rgba(0,255,170,.22), rgba(0,120,80,.09)),
        rgba(6,24,18,.78);
}

.ui-button-green:hover,
.ui-button-green:focus,
.admin-panel button.primary:hover,
.admin-panel button.primary:focus,
.btn-enabled:hover,
.btn-enabled:focus,
.audit-scan-button:hover,
.audit-scan-button:focus {
    color:#ffffff;
    border-color:rgba(0,255,170,.96);
    background:
        linear-gradient(180deg, rgba(0,255,170,.32), rgba(0,120,80,.14)),
        rgba(6,28,20,.9);
}

.ui-button-yellow,
.token-entry-current,
.admin-panel button.token-entry-current,
.btn-running,
.btn-sending {
    color:#ffe98a;
    border-color:rgba(255,220,60,.72);
    background:
        linear-gradient(180deg, rgba(255,220,60,.2), rgba(160,105,0,.09)),
        rgba(24,18,7,.82);
}

.ui-button-cyan {
    color:#bff4ff;
    border-color:rgba(69,216,255,.72);
    background:
        linear-gradient(180deg, rgba(69,216,255,.22), rgba(0,105,160,.09)),
        rgba(7,21,28,.82);
}

.ui-button-cyan:hover,
.ui-button-cyan:focus {
    color:#ffffff;
    border-color:rgba(69,216,255,.98);
    background:
        linear-gradient(180deg, rgba(69,216,255,.34), rgba(0,105,160,.16)),
        rgba(7,26,36,.92);
}

.ui-button-yellow:hover,
.ui-button-yellow:focus,
.token-entry-current:hover,
.token-entry-current:focus,
.admin-panel button.token-entry-current:hover,
.admin-panel button.token-entry-current:focus,
.btn-running:hover,
.btn-running:focus,
.btn-sending:hover,
.btn-sending:focus {
    color:#fff4b0;
    border-color:rgba(255,235,95,.95);
    background:
        linear-gradient(180deg, rgba(255,220,60,.3), rgba(160,105,0,.14)),
        rgba(28,21,7,.92);
}

.ui-button-red,
.admin-panel button.danger,
.danger,
.btn-queued,
.logout {
    color:#ffb3b3;
    border-color:rgba(255,70,70,.72);
    background:
        linear-gradient(180deg, rgba(255,77,77,.2), rgba(120,0,0,.1)),
        rgba(28,7,7,.82);
}

.ui-button-red:hover,
.ui-button-red:focus,
.admin-panel button.danger:hover,
.admin-panel button.danger:focus,
.danger:hover,
.danger:focus,
.btn-queued:hover,
.btn-queued:focus,
.logout:hover,
.logout:focus {
    color:#ffffff;
    border-color:rgba(255,85,85,.96);
    background:
        linear-gradient(180deg, rgba(255,77,77,.3), rgba(120,0,0,.16)),
        rgba(34,8,8,.94);
}

.ui-button-blue,
.admin-panel button.secondary {
    color:#d8efff;
    border-color:rgba(80,165,255,.68);
    background:
        linear-gradient(180deg, rgba(80,165,255,.18), rgba(0,68,160,.08)),
        rgba(7,17,30,.78);
}

.ui-button-blue:hover,
.ui-button-blue:focus,
.admin-panel button.secondary:hover,
.admin-panel button.secondary:focus {
    color:#ffffff;
    border-color:rgba(110,190,255,.96);
    background:
        linear-gradient(180deg, rgba(80,165,255,.28), rgba(0,68,160,.14)),
        rgba(7,22,38,.92);
}

.ui-button-deep-blue,
.tab.home {
    color:#d8efff;
    border-color:rgba(60,155,255,.76);
    background:
        linear-gradient(180deg, rgba(60,155,255,.2), rgba(0,42,115,.12)),
        rgba(4,14,28,.88);
}

.ui-button-deep-blue:hover,
.ui-button-deep-blue:focus,
.tab.home:hover,
.tab.home:focus {
    color:#ffffff;
    border-color:rgba(90,180,255,.98);
    background:
        linear-gradient(180deg, rgba(60,155,255,.3), rgba(0,42,115,.18)),
        rgba(5,18,36,.96);
}

.btn-disabled{
    color:#78909a;
    border-color:rgba(120,144,154,.35);
    background:rgba(7,15,24,.62);
    cursor:not-allowed;
    opacity:.58;
}

.core-action-button:disabled:is(.btn-enabled, .btn-running, .btn-sending, .btn-queued){
    cursor:not-allowed;
    opacity:1;
}

.core-action-button.ui-button:disabled:is(.btn-running, .btn-sending){
    color:#ffe98a;
    border-color:rgba(255,220,60,.72);
    background:
        linear-gradient(180deg, rgba(255,220,60,.2), rgba(160,105,0,.09)),
        rgba(24,18,7,.82);
}

.core-action-button.ui-button:disabled.btn-queued{
    color:#ffb3b3;
    border-color:rgba(255,70,70,.72);
    background:
        linear-gradient(180deg, rgba(255,77,77,.2), rgba(120,0,0,.1)),
        rgba(28,7,7,.82);
}

.core-action-button{
    grid-column:span 2;
}

/* =========================================================
   GLOBAL TAG COMPONENT
========================================================= */

.tags-grid {
    display:grid;
    grid-template-columns:repeat(
        auto-fill,
        minmax(clamp(calc((100% - 18px) / 4), 170px, calc((100% - 6px) / 2)), 1fr)
    );
    gap:6px;
}

.tag-card {
    appearance:none;
    -webkit-appearance:none;
    width:100%;
    min-height:34px;
    display:inline-flex;
    padding:4px 5px;
    color:#d8efff;
    font-family:inherit;
    font-weight:bold;
    flex-direction:column;
    align-items:stretch;
    justify-content:center;
    gap:2px;
    text-align:left;
    white-space:normal;
    overflow:hidden;
    text-decoration:none;
    cursor:pointer;
    transition:
        border-color .2s ease,
        color .2s ease,
        background .2s ease,
        box-shadow .2s ease,
        opacity .2s ease;
}

.tag-card:hover,
.tag-card:focus{
    color:#ffffff;
    outline:none;
}

.tag-card-compact {
    min-height:28px;
    padding-block:3px;
}

.tag-name {
    min-width:0;
    color:#45d8ff;
    font-size:12px;
    line-height:1;
    letter-spacing:1.5px;
    text-align:center;
    text-transform:uppercase;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.tag-card-compact .tag-name {
    font-size:11px;
}

.tag-meta,
.tag-meta-row {
    width:100%;
    min-width:0;
    display:flex;
    justify-content:space-between;
    gap:4px;
    align-items:center;
    color:#a9eaff;
    font-size:10px;
    line-height:1;
    letter-spacing:0;
    text-transform:uppercase;
    white-space:nowrap;
}

.tag-meta span,
.tag-meta-row > * {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.tag-meta span:first-child,
.tag-meta-images {
    text-align:left;
}

.tag-meta span:last-child,
.tag-meta-videos {
    text-align:right;
}
/* =========================================================
   GLOBAL WRAPPER
========================================================= */

.wrapper {
    color:var(--ui-text);
    position: relative;
    z-index: 3;
    max-width: 1000px;
    margin: 0px auto;
}

#core{
    opacity:0;
    transform:translateY(-40px);
    animation:coreCardReveal .9s cubic-bezier(.22,1,.36,1) forwards;
}
.logo-role-wrapper{
    opacity:0;
    transform:translateY(-40px);
    animation:coreCardReveal .9s cubic-bezier(.22,1,.36,1) forwards;
}

.card:not(#core):not(.modal-card):not(.modal-inner):not(.ui-modal-card){
    opacity:0;
    transform:translateY(40px);
    animation:coreCardReveal .9s cubic-bezier(.22,1,.36,1) forwards;
}

.card-reveal-clip{
    overflow:hidden;
}

/* =========================================================
   FAVORITES CARD
========================================================= */

.favorites-grid{
    display:grid;
    grid-template-columns:repeat(
        auto-fill,
        minmax(clamp(calc((100% - 56px) / 15), 48px, calc((100% - 20px) / 6)), 1fr)
    );
    grid-template-rows:auto;
    grid-auto-rows:0;
    column-gap:4px;
    row-gap:0;
    overflow:hidden;
}

.favorites-grid.is-empty{
    display:block;
    overflow:visible;
}

.favorites-empty{
    grid-column:1 / -1;
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--ui-meta);
    border:1px solid rgba(55,135,255,.45);
    background:rgba(3,13,32,.75);
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
}

.favorite-card{
    position:relative;
    width:100%;
    min-width:0;
    aspect-ratio:1 / 1;
    display:block;
    overflow:hidden;
    color:#d8efff;
    text-decoration:none;
}

.favorite-thumb{
    position:absolute;
    inset:0;
    background:rgba(3,13,32,.75);
}

.favorite-thumb img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.favorite-overlay{
    position:absolute;
    inset:auto 0 0;
    padding:0;
    background:transparent;
}

.favorite-type{
    margin:0;
    padding:2px 0;
    color:#c3d3e4;
    font-size:8px;
    font-weight:700;
    line-height:1.1;
    text-align:center;
    text-transform:uppercase;
    background:rgba(0,0,0,.75);
}

.favorites-actions{
    margin-top:6px;
    display:flex;
}

.favorites-view-all{
    width:100%;
    min-height:28px;
    padding:7px 12px;
    font-size:8px;
    letter-spacing:2px;
    text-transform:uppercase;
}

.toast{
    position:fixed;
    left:50%;
    top:18vh;
    z-index:12000;
    min-width:160px;
    max-width:calc(100vw - 32px);
    padding:10px 16px;
    border:1px solid rgba(255,220,60,.72);
    color:#ffe98a;
    background:
        linear-gradient(180deg, rgba(255,220,60,.2), rgba(160,105,0,.09)),
        rgba(24,18,7,.9);
    font-size:11px;
    font-weight:800;
    letter-spacing:.14em;
    line-height:1.2;
    text-align:center;
    text-transform:uppercase;
    opacity:0;
    pointer-events:none;
    transform:translate(-50%, -72px);
    transition:opacity .18s ease, transform .26s cubic-bezier(.18,.9,.22,1);
}

.toast.show{
    opacity:1;
    transform:translate(-50%, 0);
}

.toast.exit{
    opacity:0;
    transform:translate(-50%, -72px);
    transition:opacity .16s ease, transform .22s cubic-bezier(.4,0,1,1);
}

.toast-green{
    color:#c9ffdf;
    border-color:rgba(0,255,170,.72);
    background:
        linear-gradient(180deg, rgba(0,255,170,.22), rgba(0,120,80,.09)),
        rgba(6,24,18,.9);
}

.toast-red{
    color:#ffb8b8;
    border-color:rgba(255,77,77,.75);
    background:
        linear-gradient(180deg, rgba(255,77,77,.22), rgba(120,0,30,.1)),
        rgba(24,7,12,.9);
}

.toast-yellow,
.toast-gold{
    color:#ffe98a;
    border-color:rgba(255,220,60,.72);
    background:
        linear-gradient(180deg, rgba(255,220,60,.2), rgba(160,105,0,.09)),
        rgba(24,18,7,.9);
}

.core-motd{
    display:flex;
    align-items:center;
    overflow:hidden;
    position:relative;
    padding:0;
    white-space:nowrap;
}

.motd-track{
    flex:0 0 auto;
    display:block;
    white-space:nowrap;
    font-size:13px;
    font-weight:700;
    line-height:1;
    letter-spacing:2px;
    color:#45d8ff;
    text-shadow:0 0 8px rgba(69,216,255,.58);
    opacity:0;
    transition:opacity .3s ease;
}

.core-navigation{
    overflow:hidden;
    position:relative;
    padding:0;
}

.core-nav-track{
    display:flex;
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.core-nav-track::-webkit-scrollbar{
    display:none;
}

.core-nav-link{
    min-height:24px;
    flex:1 1 0;
    min-width:0;
    padding:5px 10px;
    font-size:9px;
    letter-spacing:1px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.core-nav-link-active{
    pointer-events:none;
}

@keyframes coreCardReveal{
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* ================= CONTROLS ================= */

.controls{
display:flex;
gap:10px;
margin-bottom: 5px;
background:rgba(0,20,30,.55);

box-shadow:
0 0 20px rgba(80,165,255,.12),
inset 0 0 10px rgba(80,165,255,.06);
backdrop-filter:blur(14px);
}

/* INPUT + SELECT BASE */
.controls input,
.controls select{
flex:1;
height:36px;
padding:0 12px;
background:rgba(0,0,0,.75);
border:1px solid var(--ui-border-soft);
color:var(--ui-text);
font-family:inherit;
font-size:11px;
letter-spacing:2px;
outline:none;
transition:.25s ease;
}
.controls input{
flex:2;        /* wider */
min-width:0;   /* prevents overflow in flex */
}

.controls select{
flex:0 0 190px;  /* fixed width */
min-width:150px;
}
/* SEARCH INPUT */
.controls input{
box-shadow:inset 0 0 10px rgba(80,165,255,.06);
}

.controls input::placeholder{
color:rgba(159,201,255,.62);
letter-spacing:2px;
}

/* SELECT STYLING */
.controls select{
appearance:none;
background:
linear-gradient(90deg, rgba(80,165,255,.16), rgba(0,0,0,.8));
cursor:pointer;
}

/* FOCUS STATE */
.controls input:focus,
.controls select:focus{
border-color:rgba(110,190,255,.96);
box-shadow:
0 0 15px rgba(80,165,255,.26),
inset 0 0 12px rgba(80,165,255,.12);
}

/* HOVER GLOW */
.controls input:hover,
.controls select:hover{
box-shadow:
0 0 12px rgba(80,165,255,.24),
inset 0 0 8px rgba(80,165,255,.1);
}

/* REMOVE NATIVE STYLING */
.controls select{
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;

flex:1;
height:36px;
padding:0 36px 0 12px; /* room for custom arrow */

background:rgba(0,0,0,.85);
border:1px solid var(--ui-border-soft);
color:var(--ui-text);
font-family:inherit;
font-size:11px;
letter-spacing:2px;
outline:none;
cursor:pointer;
position:relative;

/* custom arrow */
background-image:
linear-gradient(45deg, transparent 50%, var(--ui-accent) 50%),
linear-gradient(135deg, var(--ui-accent) 50%, transparent 50%);
background-position:
calc(100% - 18px) 14px,
calc(100% - 12px) 14px;
background-size:6px 6px, 6px 6px;
background-repeat:no-repeat;
}
.controls .ui-button{
    flex:1;
    height:36px;
}

/* ================= AUTOFILL FIX ================= */

.controls input:-webkit-autofill,
.controls input:-webkit-autofill:hover,
.controls input:-webkit-autofill:focus,
.controls select:-webkit-autofill{
    -webkit-text-fill-color:var(--ui-text);
    caret-color:var(--ui-text);

    /* repaint background to match your inputs */
    -webkit-box-shadow:0 0 0 1000px rgba(0,0,0,.75) inset;

    border:1px solid var(--ui-border-soft);

    /* prevents Chrome flash */
    transition:background-color 9999s ease-in-out 0s;
}