:root {
    --page-bg-start: #f5f6f7;
    --page-bg-end: #e9ecf0;
    --panel-bg: rgba(255,255,255,0.85);
    --panel-text: #1f2937;
    --muted-shadow: rgba(15,23,42,0.08);
    --transition-fast: 180ms ease;
}


#colorSettings {
    position: fixed;
    right: 12px;
    top: 12px;
    width: 170px;
    background: rgba(255,255,255,0.95);
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 6px 18px var(--muted-shadow);
    z-index: 999;
    font-size: 13px;
    color: #111;
}
.cs-hidden { display: none !important; }
#showThemeBtn { cursor: pointer; }
.cs-title { font-weight:600; margin-bottom:6px; }
.cs-header { margin-bottom:6px; }
.cs-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.cs-row input { height:28px; width:44px; border:0; padding:0; }
.cs-actions { display:flex; gap:6px; justify-content:flex-end; }
.cs-btn { padding:6px 8px; border-radius:6px; border:1px solid rgba(0,0,0,0.06); background:#fff; cursor:pointer; font-size:12px; }
.cs-save { background:#eef; }


@media(min-width:900px) {
    body { padding-right: 200px; }
}

@media(max-width:520px) {
    
    #colorSettings {
        position: static;
        width: calc(100% - 16px);
        margin: 8px;
        display: block;
        padding: 12px;
        box-sizing: border-box;
    }
    body { padding-right: 0; }

    
    .cs-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        margin-bottom: 8px;
    }
    
    .cs-row input {
        width: 100% !important;
        height: 34px;
    }
    
    .cs-row input[type="color"] {
        width: 44px !important;
        height: 28px !important;
    }
    .cs-actions { justify-content: flex-end; }
}

#firstButton img,
#secondButton img,
#thirdButton img,
#fourthButton img,
#fifthButton img,
#sixthButton img,
#seventhButton img,
#eighthButton img,
#ninthButton img,
#finalButton img {
    width: 200px;
    height: 100px;
    border: none;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    display: block;
    object-fit: cover;
}

button {
    margin-left: 65px;
    margin-right: 65px;
    margin-bottom: 20px;
    padding: 3px;
    border: 0.25px solid rgba(0,0,0,0.06);
    display: inline-block;
}

button img {
    margin: 1px 30px;
    display: block;
    max-width: 100%;
    height: auto;
}

body {
    min-height: 100vh;
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color: var(--panel-text);
    background: linear-gradient(180deg, var(--page-bg-start) 0%, var(--page-bg-end) 100%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-attachment: fixed;
    transition: background var(--transition-fast);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: linear-gradient(135deg, rgba(0,0,0,0.02) 10%, transparent 10%),
                      linear-gradient(45deg, rgba(0,0,0,0.01) 10%, transparent 10%);
    background-size: 10px 10px, 20px 20px;
    opacity: 0.6;
    pointer-events: none;
    mix-blend-mode: multiply;
}

.button-grid {
    max-width: 1100px;
    margin: 48px auto;
    padding: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    justify-content: center;
    align-items: center;
    background: var(--panel-bg);
    border-radius: 14px;
    box-shadow: 0 8px 28px var(--muted-shadow), inset 0 1px 0 rgba(255,255,255,0.6);
    backdrop-filter: blur(4px) saturate(1.02);
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.button-grid button {
    margin: 0;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0,0,0,0.02);
    transition: transform .18s ease, box-shadow .18s ease;
    box-shadow: 0 6px 18px rgba(15,23,42,0.06);
    border: 0;
}

.button-grid button:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(15,23,42,0.12);
}

.button-grid button img {
    width: 200px;
    height: 100px;
    display: block;
    object-fit: cover;
}

.cs-hidden {
    display: none;
}


@media (max-width: 992px) {
    .button-grid {
        max-width: 900px;
        padding: 22px;
        gap: 18px;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .button-grid button {
        justify-self: center;
    }
    .button-grid button img {
        width: 180px;
        height: 90px;
    }
}

@media (max-width: 640px) {
    .button-grid {
        padding: 16px;
        gap: 12px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .button-grid button img {
        width: min(160px, 42vw);
        height: auto;
    }
}

@media (max-width: 420px) {
    .button-grid {
        padding: 6px;
        gap: 10px;
        display: grid;
        grid-template-columns: 1fr;
    }
    .button-grid button {
        width: 100%;
    }
    .button-grid button img {
        width: min(300px, 90vw);
        height: auto;
    }
}

@media (max-width: 420px) {
    #colorSettings { padding: 4px; font-size: 13px; }
    .cs-title { font-size: 14px; }
    .cs-row { margin-bottom: 3px; gap:2px; }
    .cs-row input { height: 32px; }
    .button-grid { padding: 4px; gap: 8px; }
    .button-grid button { width: 100%; padding: 6px 0; }
    .button-grid button img { width: 88vw; max-width: 320px; height: auto; margin: 0 auto; }
    button { margin-left: 0; margin-right: 0; }
}