:root{
--bs-primary: #f97316;
--bs-primary-rgb: 232,163,61;
--bs-body-bg: #1c1b1a;
--bs-body-color: #edeae3;
--bs-border-color: #3a3834;
--bs-secondary-color: #a7a39a;
--bs-tertiary-bg: #232220;
--teal: #4fa69c;
--panel-h: 62px;
--footer-h: 58px;
}
html, body{
overflow-x:hidden;
}
body{
font-family:'Inter',system-ui,sans-serif;
background-image: radial-gradient(var(--bs-border-color) 1px, transparent 1px);
background-size: 22px 22px;
background-position: -11px -11px;
min-height:100vh;
}
.font-display{font-family:'Space Grotesk',sans-serif;}
.font-mono{font-family:'JetBrains Mono',monospace;}

.navbar-brand small{
font-family:'JetBrains Mono',monospace;
font-size:.7rem;
color:var(--bs-secondary-color);
}

.panel{
background:var(--bs-tertiary-bg);
border-right:1px solid var(--bs-border-color);
min-height:calc(100vh - var(--panel-h) - var(--footer-h));
overflow-y:auto;
}
.section-title{
font-family:'Space Grotesk',sans-serif;
font-size:.8rem;
font-weight:600;
color:var(--teal);
text-transform:uppercase;
letter-spacing:.06em;
margin-top:1.75rem;
margin-bottom:.9rem;
}
.section-title:first-of-type{margin-top:0;}
.form-label.small-label{
font-family:'JetBrains Mono',monospace;
font-size:.7rem;
text-transform:uppercase;
letter-spacing:.06em;
color:var(--bs-secondary-color);
}
.form-control-color{width:100%;height:2.5rem;padding:.25rem;}

.btn-check + .btn-outline-light{
font-family:'JetBrains Mono',monospace;
font-size:.72rem;
}
.btn-check:checked + .btn-outline-light{
background:var(--bs-primary);
border-color:var(--bs-primary);
color:#1c1b1a;
font-weight:600;
}

.stage{
min-height:calc(100vh - var(--panel-h) - var(--footer-h));
}
.swatch{
width:min(420px, 82vw);
aspect-ratio:1/1;
border-radius:1.5rem;
border:1px solid var(--bs-border-color);
box-shadow:0 30px 60px -20px rgba(0,0,0,.55);
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
position:relative;
background:
    linear-gradient(45deg, #2b2a27 25%, transparent 25%) -10px 0/20px 20px,
    linear-gradient(-45deg, #2b2a27 25%, transparent 25%) -10px 0/20px 20px,
    linear-gradient(45deg, transparent 75%, #2b2a27 75%) -10px 0/20px 20px,
    linear-gradient(-45deg, transparent 75%, #2b2a27 75%) -10px 0/20px 20px,
    var(--bs-tertiary-bg);
}
.swatch img{
width:78%;
height:78%;
object-fit:contain;
filter:drop-shadow(0 12px 24px rgba(0,0,0,.35));
}
.swatch .placeholder{
font-family:'JetBrains Mono',monospace;
color:var(--bs-secondary-color);
font-size:.8rem;
text-align:center;
padding:1.25rem;
}

.status-line{
font-family:'JetBrains Mono',monospace;
font-size:.72rem;
color:var(--bs-secondary-color);
min-height:1rem;
text-align:center;
}

footer{
border-top:1px solid var(--bs-border-color);
background:var(--bs-tertiary-bg);
font-family:'JetBrains Mono',monospace;
font-size:.75rem;
color:var(--bs-secondary-color);
}
footer a{color:var(--teal);}
footer a:hover{color:var(--bs-primary);}
footer .btn-link{
font-family:'JetBrains Mono',monospace;
font-size:.75rem;
color:var(--teal);
text-decoration:none;
border-bottom:1px dotted var(--teal);
padding:0;
}
footer .btn-link:hover{color:var(--bs-primary);border-color:var(--bs-primary);}

.modal-content{
background:var(--bs-tertiary-bg);
border:1px solid var(--bs-border-color);
}
.modal-title{font-family:'Space Grotesk',sans-serif;}
.rules-list li{margin-bottom:.65rem;}
.rules-disclaimer{
font-size:.78rem;
color:var(--bs-secondary-color);
border-left:2px solid var(--bs-primary);
padding-left:.75rem;
margin-bottom:1.25rem;
}
.colot-input-cube {
width: 35px;
height: 35px;
}
.form-check-input:checked {
background-color: #f97316;
border-color: #f97316;
}
.form-check-input:focus {
border-color: #f97316;
box-shadow: 0 0 0 0.25rem rgba(249, 115, 22, 0.25);
}
.form-range::-webkit-slider-thumb {
background-color: #f97316;
}
.form-range::-moz-range-thumb {
background-color: #f97316;
}
.form-range::-webkit-slider-thumb:active {
background-color: #c2410c;
}
.form-range::-moz-range-thumb:active {
background-color: #c2410c;
}
.form-range:focus {
border-color: #f97316;
}
.form-range:focus::-webkit-slider-thumb {
box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(249, 115, 22, 0.25);
}
.form-range:focus::-moz-range-thumb {
box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(249, 115, 22, 0.25);
}
.btn-orange {
background-color: #f97316;
border-color: #f97316;
color: #ffffff;
}
.btn-orange:hover {
background-color: #ea580c;
border-color: #ea580c;
color: #ffffff;
}
.btn-orange:active,
.btn-orange--dark-btn:focus-visible {
background-color: #c2410c;
border-color: #c2410c;
color: #ffffff;
}
.btn-orange:focus {
box-shadow: 0 0 0 0.25rem rgba(249, 115, 22, 0.25);
}
.api-style {
background: linear-gradient(to right, #ffffff, #f97316);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-decoration: none;
font-weight: 700;
font-size: 30px;
white-space: nowrap;
}
.custom-tooltip {
position: relative;
display: inline-block;
cursor: pointer;
margin-left: 5px;
}
.custom-tooltip .tooltip-box {
visibility: hidden;
opacity: 0;
width: 300px;
max-width: 70vw;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 6px 10px;
font-size: 14px;
line-height: 1.4;
position: absolute;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
z-index: 10;
transition: opacity 0.2s ease-in-out;
}
.custom-tooltip .tooltip-box::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #333 transparent transparent transparent;
}
.custom-tooltip:hover .tooltip-box,
.custom-tooltip:active .tooltip-box,
.custom-tooltip:focus .tooltip-box {
visibility: visible;
opacity: 1;
}
.blur-back {
backdrop-filter: blur(2px);
background-color: #ffffff00;
}
@media (max-width: 991.98px){
    :root{
        --panel-h: 56px;
    }
    .panel{
        min-height:auto;
        border-right:none;
        border-bottom:1px solid var(--bs-border-color);
    }
    .stage{
        min-height:60vh;
    }
}
@media (max-width: 575.98px){
    .navbar .container-fluid{
        padding-left: .9rem;
        padding-right: .9rem;
    }
    .navbar-brand h1{
        font-size: 1.05rem;
    }
    .navbar-brand small{
        display:none;
    }
    .navbar-brand img{
        width:26px !important;
        height:26px !important;
    }
    .api-style{
        font-size: 20px;
    }
    .panel{
        padding: 1rem !important;
    }
    .stage{
        padding: 1rem !important;
        gap: 1rem !important;
    }
    .section-title{
        margin-top: 1.25rem;
        margin-bottom: .6rem;
        font-size: .74rem;
    }
    #module_style{
        flex-wrap: wrap;
    }
    #module_style .btn{
        flex: 1 1 45%;
        margin-bottom: .4rem;
        border-radius: .5rem !important;
    }
    .swatch{
        width: min(360px, 88vw);
        border-radius: 1rem;
    }
    .d-flex.gap-2{
        flex-wrap: wrap;
        justify-content: center;
    }
    #refreshBtn, #downloadBtn{
        flex: 1 1 auto;
        text-align: center;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .custom-tooltip .tooltip-box{
        width: 220px;
        left: auto;
        right: -10px;
        transform: none;
    }
    .custom-tooltip .tooltip-box::after{
        left: auto;
        right: 14px;
        margin-left: 0;
    }
    footer{
        flex-direction: column;
        text-align: center;
        padding: .9rem 1rem !important;
    }
    footer .d-flex.gap-3{
        flex-wrap: wrap;
        justify-content: center;
    }
    .modal-dialog{
        margin: .75rem;
    }
}
@media (pointer: coarse){
    .btn, .form-check-input, .btn-close{
        min-height: 38px;
    }
    .form-range::-webkit-slider-thumb{
        width: 20px;
        height: 20px;
    }
    .form-range::-moz-range-thumb{
        width: 20px;
        height: 20px;
    }
}