* {
  box-sizing: border-box;
  }

body {

 
margin: 0;

font-family:
    Arial,
    Helvetica,
    sans-serif;

color: #222;

background:
    repeating-linear-gradient(
        0deg,

        #e8f0f5 0px,
        #e8f0f5 48px,

        #f7f7f7 48px,
        #f7f7f7 96px,

        #f3e8e8 96px,
        #f3e8e8 144px,

        #f7f1d9 144px,
        #f7f1d9 192px,

        #e8e0e8 192px,
        #e8e0e8 240px
    );

min-height: 100vh;

}

/* =========================
TOP NAVIGATION
========================= */

.top-bar {

 
width: 100%;

height: 78px;

padding:
    0 34px;

display: flex;

align-items: center;

background:
    rgba(
        255,
        255,
        255,
        0.94
    );

border-bottom:
    1px solid #dcdcdc;

box-shadow:
    0 2px 8px
    rgba(
        0,
        0,
        0,
        0.04
    );
 

}

.home-link {

 
display: flex;

align-items: center;

flex-shrink: 0;

text-decoration: none;
 

}

.home-link img {

 
display: block;

width: 155px;

height: auto;

transition:
    opacity 0.15s,
    transform 0.15s;
 

}

.home-link:hover img {

 
opacity: 0.75;

transform:
    translateY(-1px);
 

}

.page-title {

 
margin-left: 32px;

padding-left: 32px;

border-left:
    1px solid #d2d2d2;

color: #555;

font-size: 15px;

font-weight: 600;

letter-spacing: 0.7px;

text-transform: uppercase;

white-space: nowrap;
 

}

/* =========================
MAIN
========================= */

main {

 
width:
    min(
        760px,
        calc(100% - 40px)
    );

margin:
    0 auto;

padding:
    70px 0 90px;
 

}

/* =========================
HERO
========================= */

.hero {

 
text-align: center;

margin-bottom: 42px;
 

}

.eyebrow {

 
margin:
    0 0 10px;

color: #777;

font-size: 12px;

font-weight: 700;

letter-spacing: 1.6px;
 

}

.hero h1 {

 
margin:
    0 0 12px;

font-size: 42px;

line-height: 1.1;

font-weight: 700;

letter-spacing: -0.7px;
 

}

.description {

 
margin: 0;

color: #666;

font-size: 17px;

line-height: 1.6;
 

}

/* =========================
GENERATOR CARD
========================= */

.generator-card {

 
width: 100%;

padding:
    34px;

background:
    rgba(
        255,
        255,
        255,
        0.92
    );

border:
    1px solid #dedede;

border-radius: 16px;

box-shadow:
    0 8px 24px
    rgba(
        0,
        0,
        0,
        0.06
    );
 

}

.section-heading {

 
margin-bottom: 25px;
 

}

.section-heading h2 {

 
margin:
    0 0 6px;

font-size: 21px;

font-weight: 700;
 

}

.section-heading p {

 
margin: 0;

color: #777;

font-size: 14px;
 

}

/* =========================
SETTINGS
========================= */

.settings {

 
display: grid;

grid-template-columns:
    1fr 1fr;

gap: 20px;

margin-bottom: 25px;
 

}

.setting {

 
display: flex;

flex-direction: column;

gap: 8px;
 

}

.setting label {

 
color: #444;

font-size: 13px;

font-weight: 700;

letter-spacing: 0.2px;
 

}

select {

 
width: 100%;

min-height: 48px;

padding:
    0 14px;

border:
    1px solid #cfcfcf;

border-radius: 9px;

background: #fff;

color: #222;

font-family:
    Arial,
    Helvetica,
    sans-serif;

font-size: 15px;

cursor: pointer;

outline: none;

transition:
    border-color 0.15s,
    box-shadow 0.15s,
    background 0.15s;
 

}

select:hover {

 
border-color: #aaa;
 

}

select:focus {

 
border-color: #777;

background: #fdfdfd;

box-shadow:
    0 0 0 3px
    rgba(
        0,
        0,
        0,
        0.07
    );
 

}

/* =========================
GENERATE BUTTON
========================= */

#generate-button {

 
width: 100%;

min-height: 52px;

padding:
    0 28px;

border: none;

border-radius: 10px;

background: #222;

color: white;

font-family:
    Arial,
    Helvetica,
    sans-serif;

font-size: 16px;

font-weight: 700;

letter-spacing: 0.2px;

cursor: pointer;

box-shadow:
    0 3px 8px
    rgba(
        0,
        0,
        0,
        0.14
    );

transition:
    background 0.15s,
    transform 0.1s,
    box-shadow 0.15s;
 

}

#generate-button:hover {

 
background: #3b3b3b;

box-shadow:
    0 5px 12px
    rgba(
        0,
        0,
        0,
        0.17
    );

transform:
    translateY(-1px);
 

}

#generate-button:active {

 
transform:
    translateY(1px);

box-shadow:
    0 2px 5px
    rgba(
        0,
        0,
        0,
        0.12
    );
 

}

#generate-button:disabled {

 
opacity: 0.6;

cursor: default;

transform: none;
 

}

.generator-hint {

 
margin:
    12px 0 0;

color: #999;

font-size: 12px;

text-align: center;
 

}

/* =========================
RESULT
========================= */

.result {

 
width: 100%;

margin:
    28px 0 0;

padding:
    28px 32px;

background:
    rgba(
        255,
        255,
        255,
        0.96
    );

border:
    1px solid #d8d8d8;

border-radius: 16px;

box-shadow:
    0 8px 24px
    rgba(
        0,
        0,
        0,
        0.06
    );
 

}

.result-header {

 
margin-bottom: 20px;
 

}

.result-label {

 
color: #888;

font-size: 11px;

font-weight: 700;

letter-spacing: 1.4px;
 

}

.result-content {

 
display: flex;

align-items: center;

gap: 28px;
 

}

.flag-container {

 
width: 150px;

height: 100px;

flex-shrink: 0;

display: flex;

align-items: center;

justify-content: center;

background: #fafafa;

border:
    1px solid #ddd;

border-radius: 10px;

overflow: hidden;
 

}

.result img {

 
display: block;

width: 100%;

height: 100%;

max-height: 100px;

object-fit: contain;
 

}

.result-text {

 
min-width: 0;

text-align: left;
 

}

.region {

 
margin-bottom: 5px;

color: #222;

font-size: 30px;

font-weight: 700;

line-height: 1.15;

letter-spacing: -0.3px;
 

}

.country {

 
color: #777;

font-size: 18px;

line-height: 1.4;
 

}

/* =========================
HISTORY
========================= */

.history-flag {
    width: 42px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}

.history-item {
    display: flex;
    align-items: center;
    gap: 16px;

    padding: 14px 16px;

    background: #fafafa;

    border: 1px solid #e1e1e1;
    border-radius: 10px;

    margin-bottom: 10px;

    transition:
        background 0.15s,
        border-color 0.15s;
}

.history-item:last-child {
    margin-bottom: 0;
}

.history-item:hover {
    background: #f6f6f6;
    border-color: #d5d5d5;
}

.history-flag {
    width: 42px;
    height: 28px;

    object-fit: contain;
    flex-shrink: 0;

    border: 1px solid #ddd;
    border-radius: 3px;
}

.history-item-primary {
    color: #222;

    font-size: 16px;
    font-weight: 700;

    line-height: 1.25;
}

.history-item-secondary {
    margin-top: 2px;

    color: #666;

    font-size: 13px;

    line-height: 1.35;
}

.history-item-detail {
    margin-top: 1px;

    color: #999;

    font-size: 12px;

    line-height: 1.35;
}

.history-item-mode {
    margin-left: auto;

    padding: 5px 9px;

    border-radius: 6px;

    background: #eeeeee;

    color: #777;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.8px;
    text-transform: uppercase;

    white-space: nowrap;
}


.history-card {

 
width: 100%;

margin-top: 28px;

padding:
    28px 32px;

background:
    rgba(
        255,
        255,
        255,
        0.88
    );

border:
    1px solid #dedede;

border-radius: 16px;
 

}

.history-heading {

 
display: flex;

align-items: center;

justify-content: space-between;

margin-bottom: 22px;
 

}

.section-label {

 
margin:
    0 0 5px;

color: #888;

font-size: 10px;

font-weight: 700;

letter-spacing: 1.4px;
 

}

.history-heading h2 {

 
margin: 0;

font-size: 20px;

font-weight: 700;
 

}

.discovery-count {

 
min-width: 34px;

height: 34px;

padding:
    0 9px;

display: flex;

align-items: center;

justify-content: center;

border-radius: 50%;

background: #f1f1f1;

color: #555;

font-size: 13px;

font-weight: 700;
 

}

.history-empty {

 
padding:
    28px 20px;

border:
    1px dashed #d4d4d4;

border-radius: 10px;

text-align: center;
 

}

.history-empty p {

 
margin:
    0 0 6px;

color: #666;

font-size: 14px;

font-weight: 600;
 

}

.history-empty span {

 
color: #999;

font-size: 12px;
 

}

/* =========================
HIDDEN
========================= */

.hidden {

 
display: none !important;
 

}

/* =========================
MOBILE
========================= */

@media (max-width: 600px) {

 
.top-bar {

    height: 68px;

    padding:
        0 20px;

}


.home-link img {

    width: 120px;

}


.page-title {

    margin-left: 20px;

    padding-left: 20px;

    font-size: 13px;

    letter-spacing: 0.5px;

}


main {

    width:
        calc(100% - 28px);

    padding:
        45px 0 60px;

}


.hero {

    margin-bottom: 30px;

}


.eyebrow {

    font-size: 10px;

    letter-spacing: 1.3px;

}


.hero h1 {

    font-size: 34px;

}


.description {

    font-size: 15px;

}


.generator-card {

    padding:
        24px 20px;

    border-radius: 13px;

}


.settings {

    grid-template-columns: 1fr;

    gap: 16px;

}


.result {

    padding:
        24px 20px;

}


.result-content {

    flex-direction: column;

    align-items: flex-start;

    gap: 18px;

}


.flag-container {

    width: 135px;

    height: 90px;

}


.region {

    font-size: 27px;

}


.country {

    font-size: 17px;

}

.result-detail {
    margin-top: 2px;

    color: #999;

    font-size: 14px;

    line-height: 1.4;
}


.history-card {

    padding:
        24px 20px;

}
 

}