@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;300&display=swap');

* {
    font-family: 'IBM Plex Sans', sans-serif;
}

html, body {
    text-align: center;
    height: 100%;
}

/* ШАПКА В ЛИЧНОМ КАБИНЕТЕ ИЗ ЛОГО И КНОПКИ */
.header {
    content: "";
    display: table;
    clear: both;
    /* border: 1px solid black; */
    padding-top: 5px;
    margin: 0 auto;
}

.logo {
    float: left;
    text-align: left;
    padding-left: 10px;
}

.logo img {
    width: 25%;
}

.logout {
    float: right;
    text-align: right;
    padding-right: 10px;
}

/* ПОЛЯ ВВОДА */
select, input {
    padding: 3px 10px;
    margin: 8px 0;
}

input {
    display: inline-block;
    background: #DDD;
    text-decoration: none;
    cursor: pointer;
}

/* внешний вид таблицы отображения результатов расчётов */
#form {
    margin-left: auto;
    margin-right: auto;
}

#results-table,
#results-table2 {
    margin-left: auto;
    margin-right: auto;
}

.first_col {
    /* настройка 1 колонки таблицы */
    text-align: left;
    padding-left: 5px;
    width: 180px;
}

.second_col {
    /* настройка 2 колонки таблицы */
    text-align: center;
    background-color: #DDD;
    font-weight: bold;
}

.third_col {
    /* настройка 3 колонки таблицы */
    text-align: right;
    vertical-align: center;
    padding-right: 5px;
    width: 180px;
}

.grey_bg {
    /* серый фон для ячеек */
    background-color: #DDD;
}

.no_grey {
    background-color: #FFF;
}

.n {
    /* настройка чисел, полученных после расчетов */
    font-weight: bold;
    font-size: larger;
}

.dimmed {
    color: #6D6D6D;
}

/* отображение двух результатов в колонках https://coder-coder.com/display-divs-side-by-side/ */
.flex-container {
    display: flex;
}

.flex-child {
    flex: 1;
    /*
    border-width: thin;
    border-style: solid;
    border-color: lightslategrey;
    */
}

.flex-child:first-child {
    margin-right: 20px;
}

/* Background matches card */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #e9f7f4;
    z-index: -1;
}

body {
    background-color: #e9f7f4;
}


/* Tunnel / vignette effect */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: none;
    z-index: 0;
    pointer-events: none;
}

/* Ensure page content stays above tunnel overlay */
body > * {
    position: relative;
    z-index: 1;
}


/* Increase spacing between side labels and center column */
.first_col {
    padding-left: 20px;
}
.third_col {
    padding-right: 20px;
}

/* Section headers (Интеллект/Характер/Темперамент) - transparent */
.no_grey {
    background-color: transparent !important;
}

/* ===== Final Theme ===== */
input[type="submit"] {
    background-color: #6B2FA0;
    color: #FFFFFF;
    border: none;
    border-radius: 4px;
    padding: 5px 18px;
    cursor: pointer;
    font-weight: 300;
}
input[type="submit"]:hover {
    background-color: #8B3FC8;
}
.results-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 30px;
}

/* М. прям. / Ж. гиб. and similar dimmed number cells - transparent */
.second_col.dimmed {
    background-color: transparent !important;
}

/* ===== Shadows & Depth ===== */

/* Result tables */
#results-table,
#results-table2 {
    box-shadow: 0 4px 18px rgba(0,0,0,0.18), 0 1px 4px rgba(0,0,0,0.10);
    border-radius: 4px;
    overflow: hidden;
    background-color: #FFFFFF;
}

/* Colored number cells */
.second_col.n:not(.dimmed) {
    box-shadow: inset 0 -2px 4px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.12);
}

/* Battery cell */
.second_col.n {
    text-shadow: 0 1px 2px rgba(0,0,0,0.20);
}

/* Select dropdowns */
select {
    box-shadow: 0 4px 12px rgba(0,0,0,0.28), 0 1px 4px rgba(0,0,0,0.15);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 4px;
    color: #000000;
    background-color: #FFFFFF;
    border: 1px solid #BBBBBB;
    padding: 4px 10px;
    cursor: pointer;
}

/* Submit button */
input[type="submit"] {
    box-shadow: 0 4px 12px rgba(100,40,160,0.45), 0 1px 4px rgba(0,0,0,0.22);
    transition: box-shadow 0.15s ease, transform 0.1s ease;
}
input[type="submit"]:hover {
    box-shadow: 0 6px 18px rgba(100,40,160,0.55), 0 2px 6px rgba(0,0,0,0.22);
    transform: translateY(-1px);
}

/* Logo */
.logo img {
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.40));
}

/* Section header text (Интеллект / Характер / Темперамент) */
.second_col.no_grey u {
    text-shadow: 0 1px 3px rgba(0,0,0,0.18);
    text-decoration: none;
}

/* Theater masks widget shadow */
img[src*="masks2"] {
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.40));
}

/* Mobile results wrapper */
.results-wrapper {
    display: inline-block;
}