static/style.css

body {
    background: #f8f9fa;
    font-family: 'Montserrat', 'Inter', Arial, sans-serif;
    color: #222;
    min-height: 100vh;
}

.glass-container {
    background: rgba(255,255,255,0.99);
    border-radius: 28px;
    box-shadow: 0 8px 32px 0 rgba(120,116,100,0.08);
    padding: 3rem 2rem;
    margin: 4rem auto;
    max-width: 680px;
    border: 1.2px solid #ece3c2;
}

.header h1 {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    color: #e8c77a;
    font-weight: 900;
    margin-bottom: 0.5rem;
    letter-spacing: 2px;
}
.subtitle {
    color: #565458;
    font-weight: 600;
    font-size: 1.17rem;
    letter-spacing: 1px;
    margin-bottom: 1.8rem;
}
.mcq-section {margin-bottom: 2.2rem;}
.input-group.mcq-options {
    margin-bottom: 1.45rem;
}
.input-group label {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.14rem;
    color: #222;
    font-weight: 700;
    margin-bottom: 8px;
    display: block;
}
.input-group label b {
    color: #d3a63c;
    font-weight: 800;
}
.mcq-row {
    display: flex;
    gap: 1.2rem;
    margin-top: 0.36rem;
    justify-content: flex-start;
}
.mcq-row label {
    flex: 1;
    color: #95702b;
    font-weight: 500;
    background: rgba(232,203,84,0.08);
    border-radius: 12px;
    padding: 0.8rem 0.4rem;
    border: 1.3px solid #efecc7;
    box-shadow: 0 1px 4px #e8c77a18 inset;
    transition: background 0.15s, box-shadow 0.17s, border 0.15s;
    text-align: center;
    cursor: pointer;
}
.mcq-row input[type="radio"] {
    accent-color: #222;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 0.4em;
}
.mcq-row label:hover,
.mcq-row label:active {
    background: #fff6db;
    color: #111;
    border: 1.8px solid #e8c77a;
    box-shadow: 0 5px 14px #e8c77a44;
}
.mcq-row input[type="radio"]:checked + span,
.mcq-row input[type="radio"]:checked ~ label {
    color: #222;
    font-weight: 700;
    background: #fffbe6;
    border: 1.8px solid #b79818;
}

.next-btn, .predict-btn, .glass-btn {
    background: linear-gradient(90deg,#fffecd 0%,#e8c77a 100%);
    color: #3b3020;
    font-family: 'Montserrat',sans-serif;
    font-weight: 700;
    border-radius: 18px;
    border: none;
    padding: 1.07rem 2rem;
    box-shadow: 0 2px 18px #e8c77a38;
    font-size: 1.13rem;
    letter-spacing: 1px;
    margin-top: 18px;
    margin-bottom: 8px;
    transition: background 0.14s, box-shadow 0.16s;
    cursor:pointer;
}
.next-btn:hover, .glass-btn:hover, .predict-btn:hover {
    background: linear-gradient(90deg,#fffbe6 10%, #e8c77a 90%);
    color: #bf953f;
    box-shadow: 0 0px 24px #e8c77a39;
}

.result-card {
    background: rgba(255,255,255,0.97);
    border-radius: 18px;
    box-shadow: 0 6px 28px #ecc16a18;
    padding: 2.1rem 1.2rem 2.7rem 1.2rem;
    margin-top: 1.2rem;
    border: 1.3px solid #ffeecd;
    text-align: center;
}
.mbti-type {
    font-family: 'Playfair Display', serif;
    font-size: 2.1rem;
    color: #e8c77a;
    font-weight: 900;
    margin-bottom: 1.3rem;
    letter-spacing: 2px;
}
.mbti-description {
    color: #222;
    margin-bottom: 1.4rem;
    font-size:1.04rem;
    font-weight: 400;
    letter-spacing: .8px;
}
.prob-bar {
    background: #f8f3cf;
    border-radius: 11px;
    height: 16px;
    box-shadow: 0 1px 4px #e8c77a18 inset;
    position: relative;
    margin: 2px 0;
}
.prob-fill {
    height: 100%;
    background: linear-gradient(90deg,#ecc16a 80%,#fffecd 100%);
    border-radius: 11px;
    transition: width 0.6s;
}
.prob-value {
    font-weight: 700;
    color: #b79818;
    text-shadow: 1px 1px 2px #ffeecd55;
}

.input-group input[type="number"], 
.input-group select {
    display: block;
    width: 100%;
    padding: 1.06rem 1.2rem;
    margin-top: 2px;
    font-size: 1.14rem;
    font-weight: 500;
    color: #222;
    background: rgba(232,203,84,0.08);
    border: 1.3px solid #efecc7;
    border-radius: 12px;
    box-shadow: 0 1px 4px #e8c77a18 inset;
    transition: background 0.13s, border 0.13s, box-shadow 0.13s;
}
.input-group input[type="number"]:focus, 
.input-group select:focus {
    background: #fffbe6;
    outline: none;
    border: 1.8px solid #e8c77a;
    box-shadow: 0 4px 13px #e8c77a35;
}
.input-group input[type="number"]::placeholder {
    color: #bbb685;
    opacity: 1;
}
.input-group select {
    box-shadow: 0 1px 4px #e8c77a11 inset;
}

input[type="number"], select {
    background: rgba(232,203,84,0.08);
    border-radius: 12px;
    border: 1.3px solid #efecc7;
    font-size: 1.14rem;
}

.input-group input[type="number"] {
    width: 100%;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    min-width: 0;
}

@media (max-width: 700px) {
    .input-group input[type="number"], .input-group select,
    input[type="number"], select {
        font-size: 0.99rem;
        padding: 0.85rem 1rem;
    }
}
@media (max-width: 700px) {
    .glass-container { max-width:96vw; padding:1.2rem 0.7rem; margin:2vw auto; }
    .header h1 { font-size: 1.35rem; }
    .subtitle { font-size:1rem; }
    input, select { font-size:1rem; padding:0.85rem 1rem;}
    .next-btn, .predict-btn { font-size:0.97rem; }
}
@media (max-width:450px){
    .glass-container{padding:0.6rem 1vw;}
}