* {
    box-sizing: border-box;
}

body { 
    font-family: Arial, sans-serif; 
    margin: 0;
    padding: 20px;
    background-color: #fff;
    color: #0f1111;
    font-size: 16px;
}

h1 { 
    color: #333;
    font-size: clamp(1.5rem, 5vw, 2rem);
    margin: 0 0 1rem 0;
}

hr { 
    width: 100%;
    border: none;
    border-top: 1px solid #ddd;
}

/* LIST STYLES */
ul { 
    padding-left: clamp(20px, 10vw, 100px);
    margin-top: 0.5em;
    list-style: none;
}

li { 
    list-style: none; 
    background: url("../../css/icons/item.webp") no-repeat left center; 
    background-size: 15px 20px; 
    padding: 12px 0 12px 30px;
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    line-height: 1.5;
    transition: all 0.3s ease;
    margin-bottom: 8px;
    min-height: 44px;
    display: flex;
    align-items: center;
}

li:hover { 
    font-size: clamp(1.05rem, 2.6vw, 1.2rem);
    padding-left: 35px;
}

li a {
    display: block;
    width: 100%;
    word-break: break-word;
}

#available { 
    padding-left: clamp(20px, 5vw, 40px);
    margin-bottom: 0.5em;
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    display: flex;
    align-items: center;
}

#available img {
    margin-right: 8px;
}

#nojs { 
    display: inline-flex;
    align-items: center;
    color: #333;
    cursor: pointer;
    transition: transform 0.3s ease;
}

#nojs img {
    margin-right: 8px;
    width: clamp(35px, 8vw, 45px);
    height: clamp(35px, 8vw, 45px);
}

/* NOSCRIPT LIST */
#nonenormalul { 
    list-style: disc inside; 
    margin: 1em 0; 
    padding-left: clamp(20px, 5vw, 40px);
}

#nonenormalul li { 
    list-style: inherit; 
    margin: 0.5em 0;
    padding: 8px 0;
    background: none;
    min-height: auto;
    font-size: clamp(0.9rem, 2.2vw, 1rem);
}

#nonenormalul li:hover { 
    font-size: clamp(0.95rem, 2.3vw, 1.05rem);
}

button {
    margin: 5px 5px 5px 0;
    background-image: linear-gradient(#f7f8fa, #e7e9ec);
    border: 1px solid #adb1b8;
    border-radius: 3px;
    box-shadow: rgba(255,255,255,.6) 0 1px 0 inset;
    color: #0f1111;
    cursor: pointer;
    display: inline-block;
    font-family: "Amazon Ember", Arial, sans-serif;
    font-size: clamp(0.875rem, 2vw, 0.9375rem);
    min-height: 44px;
    padding: 8px 16px;
    outline: 0;
    text-align: center;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
    transition: all 0.2s ease;
}

button:active { 
    border-color: #a2a6ac;
    transform: translateY(1px);
}

button:hover { 
    border-color: #979aa1;
    background-image: linear-gradient(#e7e9ec, #d7d9dc);
}

button:focus { 
    border-color: #e77600;
    box-shadow: rgba(228, 121, 17, .5) 0 0 3px 2px;
    outline: 0;
}

button:disabled, button[disabled] { 
    color: #999;
    border-color: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

/* INPUT STYLES */
input#searchbox {
    background-color: #fff;
    color: #0f1111;
    border: 1px solid #adb1b8;
    border-radius: 3px;
    padding: 10px 14px;
    font-size: clamp(0.9375rem, 2vw, 1rem);
    min-height: 44px;
    width: 100%;
    max-width: 400px;
    transition: all 0.2s ease;
}

input#searchbox:focus {
    border-color: #e77600;
    box-shadow: rgba(228, 121, 17, .3) 0 0 3px 2px;
    outline: 0;
}

/* DARK MODE */
body.dark-mode {
    background-color: #1e1e1e;
    color: #e0e0e0;
}

body.dark-mode h1 { 
    color: #f0f0f0;
}

body.dark-mode hr {
    border-top-color: #444;
}

body.dark-mode #nojs { 
    color: #f0f0f0;
}

body.dark-mode li { 
    background-image: url("../../css/icons/item.webp");
}

body.dark-mode button {
    background-image: linear-gradient(#3a3a3a, #2a2a2a);
    color: #e0e0e0;
    border-color: #555;
    box-shadow: rgba(0,0,0,.6) 0 1px 0 inset;
}

body.dark-mode button:hover {
    background-image: linear-gradient(#454545, #353535);
    border-color: #666;
}

body.dark-mode input#searchbox {
    background-color: #2a2a2a;
    color: #e0e0e0;
    border: 1px solid #555;
}

body.dark-mode input#searchbox:focus {
    border-color: #e77600;
}

body.dark-mode a {
    color: #4ea1ff;
}

body.dark-mode a:visited {
    color: #9a7aff;
}

/* MOBILE OPTIMIZATIONS */
@media (max-width: 768px) {
    body {
    padding: 15px;
    }

    li {
    padding: 14px 0 14px 35px;
    background-size: 18px 23px;
    }

    button {
    width: 100%;
    margin: 5px 0;
    }

    input#searchbox {
    max-width: 100%;
    }
}

@media (max-width: 480px) {
    body {
    padding: 10px;
    }

    ul {
    padding-left: 10px;
    }

    #available {
    padding-left: 10px;
    }
}

/* HIGH DPI DISPLAYS */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    li {
    background-size: 15px 20px;
    }
}