﻿/* --- СУЧАСНИЙ СТИЛЬ: ЧИСТИЙ БІЛИЙ ТА ГЛИБОКИЙ НЕФРИТ --- */

:root {
    --color-teal-main: #00838F;      /* Глибокий Нефрит/Морська Хвиля (Основний Акцент) */
    --color-teal-hover: #00AAC3;     /* Світліший Нефрит (Hover) */
    --color-text-dark: #212121;      /* Майже чорний, для високого контрасту */
    --color-text-light: #757575;     /* Сірий для деталей */
    --color-bg-white: #FFFFFF;       /* Чистий Білий */
    --color-bg-light: #F9F9F9;       /* Ультра-світло-сірий */
    --color-border-soft: #EEEEEE;    /* Дуже м'яка межа */
    --border-radius-default: 8px;    /* Більш виразне заокруглення */
    --shadow-soft: 0 4px 8px rgba(0, 0, 0, 0.05);
}

body {
    background-color: var(--color-bg-light);
    color: var(--color-text-dark);
    /* Використовуємо сучасну системну типографіку */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    /* Видалення застарілих скролбарів */
    scrollbar-face-color: var(--color-bg-light);
    scrollbar-arrow-color: var(--color-teal-main);
    scrollbar-track-color: var(--color-bg-light);
}

font, th, td, p { font-family: inherit; font-size: 15px;}

/* --- ПОСИЛАННЯ --- */
a:link,a:active,a:visited { color : var(--color-teal-main); text-decoration: none; }
a:hover { text-decoration: none; color : var(--color-teal-hover); }

hr { height: 0px; border: solid var(--color-border-soft) 0px; border-top-width: 1px;}
.small, .dats { font-family: inherit; font-size: 12px; color: var(--color-text-light); }


/* --- КОНТЕЙНЕРИ І БЛОКИ --- */
.bodyline {
    background-color: var(--color-bg-white);
    border: none;
    box-shadow: var(--shadow-soft);
    border-radius: var(--border-radius-default);
    overflow: hidden; /* Важливо для заокруглень */
}
.forumline {
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--border-radius-default);
    margin-bottom: 20px;
    overflow: hidden;
}

/* Чергування рядків */
td.row1 { background-color: var(--color-bg-white); }
td.row2 { background-color: var(--color-bg-light); }
td.row3, td.row3Right, td.spaceRow, .helpline { background-color: var(--color-bg-light); border: none;}
td.rowpic { background-color: var(--color-bg-white); background-image: none; }


/* --- ЗАГОЛОВКИ ТАБЛИЦЬ (TH) --- */
th {
    color: var(--color-bg-white);
    font-size: 15px;
    font-weight : 600; /* Не надто жирний */
    background-color: var(--color-teal-main);
    height: 40px;
    background-image: none;
    padding: 0 15px;
    text-align: left;
}

/* Категорії */
td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
    background-image: none;
    background-color: var(--color-bg-light);
    color: var(--color-text-dark);
    font-weight: 600;
    height: 35px;
    border: 1px solid var(--color-border-soft);
    border-width: 0 0 1px 0;
    padding-left: 15px;
}
td.cat,td.catHead,td.catBottom {border-width: 1px 0 1px 0;}
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
    font-weight: 600; border: none; background: var(--color-teal-main); color: var(--color-bg-white);
}

/* --- ТЕКСТ ТА НАВІГАЦІЯ --- */
.maintitle,h1,h2 {
    font-weight: 700;
    font-size: 28px;
    font-family: inherit;
    color : var(--color-text-dark);
    line-height : 1.2;
}
.cattitle, .forumlink { font-weight: 600; color : var(--color-teal-main); }
.nav, .topictitle, .name { font-weight: 500; color : var(--color-text-dark); }

a.gen:hover, a.mainmenu:hover, a.cattitle:hover, a.forumlink:hover, a.nav:hover, a.topictitle:hover, a.postlink:hover {
    color: var(--color-teal-hover);
}

.postbody { font-size : 15px; line-height: 1.6;}
.postdetails { font-size : 12px; color : var(--color-text-light); }
a.topictitle:visited { color : var(--color-text-light); }


/* --- ЦИТАТИ ТА КОД --- */
.code {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 14px;
    color: #E91E63; /* Яскраво-рожевий для коду */
    background-color: #FAFAFA;
    border: 1px solid var(--color-border-soft);
    border-radius: 4px;
    padding: 10px;
    border-left: 4px solid #F8BBD0;
}

.quote {
    font-size: 14px;
    color: var(--color-text-dark);
    line-height: 1.5;
    background-color: var(--color-bg-light);
    border: 1px solid var(--color-border-soft);
    border-radius: 4px;
    padding: 10px;
    border-left: 4px solid var(--color-teal-main);
}

/* --- ФОРМИ ТА КНОПКИ --- */
input,textarea, select {
    color : var(--color-text-dark);
    font: normal 14px inherit;
    border: 1px solid var(--color-border-soft);
    border-radius: 4px;
    background-color : var(--color-bg-white);
    padding: 8px 12px;
    transition: border-color 0.2s;
}
input:focus, textarea:focus { border-color: var(--color-teal-main); outline: none; }

input.button, input.mainoption, input.liteoption, .fakebut {
    border: none;
    background-color : var(--color-teal-main);
    color : var(--color-bg-white);
    font-weight : 600;
    font-size: 14px;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s, box-shadow 0.2s;
}
input.button:hover, input.mainoption:hover, input.liteoption:hover, .fakebut:hover {
    background-color: var(--color-teal-hover);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}


/* --- WR-Forum Professional fixes (Оновлення до сучасних стандартів) --- */
.pgbutt a {
    border: 1px solid var(--color-border-soft);
    background: var(--color-bg-light);
    color: var(--color-text-dark);
    padding: 6px 10px;
    border-radius: 4px;
    transition: background 0.2s;
}
.pgbutt a:hover {
    background: var(--color-teal-main);
    color: var(--color-bg-white);
    border-color: var(--color-teal-main);
}
input.button,input.liteoption,.fakebut {border: none; background: var(--color-teal-main); color: var(--color-bg-white);}

/* QR-CODE */
#qr img{border: 1px solid var(--color-border-soft); padding: 2px; border-radius: 4px;}

/* Аватар */
.guestavatar{
    background: var(--color-teal-main);
    color: var(--color-bg-white);
    border-radius: 50%; /* Круглий */
}

/* МЕНЮ В АДМІНЦІ */
#nav8, #nav8 ul {background: var(--color-bg-white);}
#nav8 td:hover, #nav8 li:hover {background: var(--color-bg-light);}
#nav8 td:hover a {color: var(--color-teal-main);}

/* Блок загрузки */
#cssbar-border {border:3px solid var(--color-teal-main); height:100%;}
#cssbar-line {background-color:var(--color-teal-main);}