/* Общий фон страницы */
html {
    background-color: #1A1A24;
}

body {
    margin: 0 auto;
    text-align: center;
    max-width: 600px;
    color: #D4D0D6;
    background: #262633;
    font-size: 14px;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    word-wrap: break-word;
    padding: 16px 12px;
    box-shadow: 0 0 40px rgba(0,0,0,0.6);
    min-height: 100vh;
    line-height: 1.6;
    border-radius: 4px;
}

/* Все блоки с текстом выровнены влево */
.header,
.text,
.de,
.teac,
a.link,
a.des,
.exp_polos,
.head,
.headc {
    text-align: left;
}

/* Общие ссылки */
a {
    color: #C8C4D6;
    text-decoration: none;
    transition: all 0.25s ease;
}

/* Стиль для блоков-ссылок */
.teac,
a.link,
a.des {
    display: block;
    padding: 13px 16px;
    margin-bottom: 6px;
    background: #30303E;
    border: 1px solid #46465A;
    border-radius: 12px;
    color: #D4D0D6;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    text-align: left;
    position: relative;
}

/* Эффект при наведении на блоки-ссылки */
.teac:hover,
a.link:hover,
a.des:hover {
    background: #3A3A4A;
    border-color: #8B7BC0;
    transform: translateX(4px) translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.3);
    color: #F0ECE8;
}

/* Тонкая линия-разделитель слева */
.teac::before,
a.link::before,
a.des::before {
    content: "";
    position: absolute;
    left: 0;
    top: 15%;
    height: 70%;
    width: 3px;
    background: linear-gradient(180deg, #8B7BC0, #6B5B9A);
    border-radius: 0 3px 3px 0;
    opacity: 0.5;
    transition: all 0.3s ease;
}

.teac:hover::before,
a.link:hover::before,
a.des:hover::before {
    opacity: 1;
    width: 4px;
    background: linear-gradient(180deg, #A88BD8, #7A5AA8);
}

/* Заголовок */
.header {
    padding: 15px 18px;
    background: #2A2A38;
    border-top: 2px solid #6B5B9A;
    border-bottom: 2px solid #6B5B9A;
    border-radius: 14px 14px 0 0;
    color: #E8E4F0;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.6px;
    margin-bottom: 8px;
    text-align: left;
}

/* Текстовые блоки */
.text,
.de {
    padding: 13px 16px;
    background: #2A2A38;
    border-radius: 12px;
    margin-bottom: 6px;
    color: #D4D0D6;
    border: 1px solid #3E3E52;
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.2);
    text-align: left;
}

/* Горизонтальная линия */
hr {
    border: none;
    border-bottom: 2px solid #3E3E52;
    width: 100%;
    margin: 14px 0;
    border-radius: 2px;
    opacity: 0.6;
    background: linear-gradient(90deg, transparent, #6B5B9A, transparent);
    height: 1px;
    border-bottom: none;
}

/* Полоса опыта */
.exp_polos {
    background: #1E1E2A;
    border-radius: 24px;
    padding: 4px;
    margin: 8px 0;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.3);
}

.exp_polos .progress {
    background: linear-gradient(90deg, #7A5AA8, #A88BD8, #D4B8F0);
    border-radius: 24px;
    height: 16px;
    width: 0%;
    transition: width 0.6s ease;
    box-shadow: 0 0 20px rgba(140, 100, 200, 0.15);
}

/* Кнопки (submit и .but) */
input[type="submit"],
a.but {
    display: inline-block;
    margin: 6px auto 6px 0;
    border: none;
    border-radius: 30px;
    background: linear-gradient(135deg, #5A4A7A, #7A5AA8);
    width: auto;
    min-width: 150px;
    padding: 10px 24px 9px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    color: #F0ECE8;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 3px 12px rgba(90, 60, 140, 0.3);
    letter-spacing: 0.5px;
    text-decoration: none;
}

input[type="submit"]:hover,
a.but:hover {
    transform: scale(1.03) translateX(3px);
    background: linear-gradient(135deg, #6A5A8A, #8A6AB8);
    box-shadow: 0 6px 20px rgba(100, 70, 160, 0.35);
}

input[type="submit"]:active,
a.but:active {
    transform: scale(0.96);
}

/* Поля ввода */
input[type="text"],
input[type="password"],
input[type="stan"] {
    background: #1E1E2A;
    border: 1px solid #4A4A62;
    border-radius: 12px;
    color: #E8E4F0;
    padding: 10px 14px;
    font-size: 13px;
    width: calc(100% - 30px);
    max-width: 280px;
    transition: border 0.3s, box-shadow 0.3s;
    outline: none;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.2);
    text-align: left;
}

input[type="text"]:focus,
input[type="password"]:focus {
    border-color: #8B7BC0;
    box-shadow: 0 0 14px rgba(120, 80, 180, 0.12), inset 0 2px 6px rgba(0,0,0,0.2);
}

/* Навигация .head и .headc */
.head,
.headc {
    display: flex;
    justify-content: space-around;
    background: #2A2A38;
    border-radius: 14px;
    padding: 5px 3px;
    margin-bottom: 8px;
    border: 1px solid #3E3E52;
    gap: 3px;
}

.head a,
.headc a {
    display: block;
    padding: 10px 6px;
    background: transparent;
    flex: 1;
    text-align: center;
    border-radius: 10px;
    font-weight: 500;
    font-size: 13px;
    color: #A8A4B6;
    transition: all 0.25s ease;
    margin: 1px;
}

.head a:hover,
.headc a:hover {
    background: #3A3A4A;
    color: #E8E4F0;
    transform: translateY(-2px);
}

.head a.active,
.headc a.active {
    background: linear-gradient(135deg, #3A2A5A, #5A4A7A);
    color: #D4B8F0;
    box-shadow: 0 2px 10px rgba(80, 50, 130, 0.2);
}

/* Изображения */
img {
    border: 0;
    vertical-align: top;
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

/* Выравнивания */
.center { text-align: center; }
.right  { text-align: right; }
.left   { text-align: left; }

/* Мелкие правки */
.oh {
    float: left;
    padding: 0 8px 0 0;
    margin: 0;
    vertical-align: middle;
}

/* Дополнительный стиль для компактности */
small, .small {
    font-size: 12px;
    color: #8A86A0;
}

/* Акцентные элементы */
.accent {
    color: #D4B8F0;
    font-weight: 500;
}

/* Золотистый акцент для важного */
.gold {
    color: #D4B04A;
    font-weight: 600;
}

/* Тень для блоков с содержимым */
.shadow {
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}