.containerk {

    max-width:700px;

    margin:40px auto;

}


/*==================================================
    HEADER
==================================================*/

header{

    text-align:center;

    margin-bottom:35px;

}

header h1{

    font-size:42px;

    color:#1565c0;

    margin-bottom:12px;

}

.subtitle{

    max-width:760px;

    margin:auto;

    color:#5f6b7a;

    font-size:18px;

}


/*==================================================
    КАРТОЧКИ
==================================================*/

.converter-card,
.table-card,
.food-card{

    background:#fff;

    border-radius:20px;

    padding:30px;

    margin-bottom:30px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}


/*==================================================
    ДВЕ КОЛОНКИ
==================================================*/

.converter-grid{

    display:grid;

    grid-template-columns:1fr 420px;

    gap:35px;

}


/*==================================================
    ПОЛЯ
==================================================*/

.field{

    margin-bottom:22px;

}

.field label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

    color:#374151;

}

.field input,
.field select{

    width:100%;

    height:54px;

    border:2px solid #d7e6fb;

    border-radius:14px;

    padding:0 16px;

    font-size:17px;

    background:#fff;

    transition:.25s;

}

.field input:focus,
.field select:focus{

    outline:none;

    border-color:#2196f3;

    box-shadow:0 0 0 5px rgba(33,150,243,.15);

}


/*==================================================
    КНОПКА ПЕРЕСТАВИТЬ
==================================================*/

.swap{

    text-align:center;

    margin-bottom:20px;

}

#swap{

    width:58px;

    height:58px;

    border:none;

    border-radius:50%;

    background:#2196f3;

    color:#fff;

    font-size:26px;

    cursor:pointer;

    transition:.25s;

}

#swap:hover{

    transform:rotate(180deg);

    background:#1976d2;

}


/*==================================================
    КНОПКА ПЕРЕВЕСТИ
==================================================*/

#convert{

    width:100%;

    height:58px;

    border:none;

    border-radius:14px;

    background:linear-gradient(135deg,#2196f3,#1565c0);

    color:#fff;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

#convert:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 25px rgba(33,150,243,.35);

}


/*==================================================
    ПРАВАЯ ПАНЕЛЬ
==================================================*/

.right-panel{

    display:flex;

    flex-direction:column;

}

.right-panel h2{

    margin-bottom:20px;

    color:#1565c0;

}

/*==================================================
    РЕЗУЛЬТАТ
==================================================*/

.result{

    background:linear-gradient(135deg,#2196f3,#42a5f5);

    color:#fff;

    border-radius:18px;

    padding:30px;

    font-size:30px;

    font-weight:700;

    text-align:center;

    margin-bottom:25px;
margin-top: 1px;
    box-shadow:0 10px 25px rgba(33,150,243,.35);

    line-height:1.5;

}

.result small{

    display:block;

    font-size:17px;

    margin-top:12px;

    opacity:.9;

}


/*==================================================
    ПОДРОБНОЕ РЕШЕНИЕ
==================================================*/

.solution{

    background:#f5f9ff;

    border-left:5px solid #2196f3;

    border-radius:14px;

    padding:22px;

    color:#374151;

    line-height:1.8;

    font-size:16px;

}

.solution h3{

    margin-bottom:15px;

    color:#1565c0;

}

.solution p{

    margin-bottom:10px;

}

.solution strong{

    color:#1565c0;

}


/*==================================================
    ТАБЛИЦА
==================================================*/

.table-card h2{

    margin-bottom:20px;

    color:#1565c0;

}

.table-wrapper{

    overflow-x:auto;

}

table{

    width:100%;

    border-collapse:collapse;

}

thead{

    background:#1976d2;

    color:#1565c0;

}

thead th{

    padding:16px;

    text-align:left;

    font-size:16px;

    font-weight:700;

}

tbody tr{

    transition:.25s;

    border-bottom:1px solid #e3edf9;

}

tbody tr:hover{

    background:#f5f9ff;

}

tbody td{

    padding:15px;

    font-size:15px;

}

tbody td:last-child{

    font-weight:600;

    color:#1565c0;

}


/*==================================================
    СПРАВОЧНАЯ КАРТОЧКА
==================================================*/

.food-card h2{

    color:#1565c0;

    margin-bottom:20px;

}

#foodInfo{

    background:#f7fbff;

    border-radius:16px;

    border:1px solid #dcecff;

    padding:1px 25px;

    min-height:180px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    font-size:15px;

    color:#4b5563;

}

#foodInfo h3{

    color:#1565c0;

    margin-bottom:18px;

}

#foodInfo p{

    margin:6px 0;

}


/*==================================================
    FOOTER
==================================================*/

footer{

    text-align:center;

    margin-top:45px;

    color:#6b7280;

    font-size:15px;

}


/*==================================================
    ЭФФЕКТЫ
==================================================*/

.converter-card,
.table-card,
.food-card{

    transition:.3s;

}

.converter-card:hover,
.table-card:hover,
.food-card:hover{

    box-shadow:0 18px 45px rgba(0,0,0,.12);

}


/*==================================================
    ПЛАВНЫЕ АНИМАЦИИ
==================================================*/

@keyframes fadeIn{

    from{

        opacity:0;
        transform:translateY(15px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.result,
.solution,
.table-card,
.food-card{

    animation:fadeIn .4s ease;

}


/*==================================================
    КРАСИВЫЕ SELECT
==================================================*/

select{

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%231976d2' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6 6 6-6' stroke='%231976d2' stroke-width='2' fill='none'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:right 18px center;

    background-size:16px;

    padding-right:50px;

}


/*==================================================
    PLACEHOLDER
==================================================*/

input::placeholder{

    color:#9ca3af;

}


/*==================================================
    INPUT NUMBER
==================================================*/

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{

    opacity:1;

}


/*==================================================
    СКРОЛЛБАР
==================================================*/

::-webkit-scrollbar{

    width:12px;

    height:12px;

}

::-webkit-scrollbar-track{

    background:#e7eefb;

}

::-webkit-scrollbar-thumb{

    background:#90caf9;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#42a5f5;

}


/*==================================================
    ВЫДЕЛЕНИЕ
==================================================*/

::selection{

    background:#2196f3;

    color:#fff;

}


/*==================================================
    КНОПКИ
==================================================*/

button{

    font-family:inherit;

}

button:active{

    transform:scale(.97);

}


/*==================================================
    ИНФОРМАЦИОННАЯ КАРТОЧКА
==================================================*/

.food-icon{

    font-size:70px;

    margin-bottom:2px;

}

.food-name{

    font-size:24px;

    font-weight:700;

    color:#1565c0;

    margin-bottom:1px;

}

.food-value{

    width:100%;

    display:flex;

    justify-content:space-between;

    padding:12px 0;

    border-bottom:1px solid #e5eef9;

}

.food-value:last-child{

    border-bottom:none;

}


/*==================================================
    ЗАГОЛОВКИ
==================================================*/

h2{

    display:flex;

    align-items:center;

    gap:10px;

}

h2::before{

    content:"";

    width:8px;

    height:28px;

    border-radius:10px;

    background:#2196f3;

}


/*==================================================
    МОБИЛЬНАЯ ВЕРСИЯ
==================================================*/

@media(max-width:1100px){

    .converter-grid{

        grid-template-columns:1fr;

    }

}


@media(max-width:768px){

    .containerk{

        padding:18px;

    }

    header h1{

        font-size:32px;

    }

    .subtitle{

        font-size:16px;

    }

    .converter-card,
    .table-card,
    .food-card{

        padding:20px;

    }

    .result{

        font-size:24px;

        padding:22px;

    }

}


@media(max-width:600px){

    .field input,
    .field select{

        height:50px;

        font-size:16px;

    }

    #convert{

        height:54px;

        font-size:17px;

    }

    #swap{

        width:50px;
        height:50px;
        font-size:22px;

    }

    table{

        min-width:520px;

    }

}


@media(max-width:420px){

    header h1{

        font-size:28px;

    }

    .subtitle{

        font-size:15px;

    }

    .result{

        font-size:20px;

    }

    .food-icon{

        font-size:50px;

    }

    .food-name{

        font-size:20px;

    }

}


/*==================================================
    ПЕЧАТЬ
==================================================*/

@media print{

    body{

        background:#fff;

    }

    #convert,
    #swap{

        display:none;

    }

    .converter-card,
    .table-card,
    .food-card{

        box-shadow:none;

        border:1px solid #ddd;

    }

}