:root { --bg: #faf9f5; --fg: #1a1a1a; --muted: #7d7c74; --line: #e2dfd6; --ok: #2f6b3a; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font: 14px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
a:hover { color: #8b2e1f; border-color: #8b2e1f; }

/* Контейнеры */
header, footer, main { max-width: 1000px; margin: 0 auto; padding: 0 20px; }

/* Шапка */
header {
    display: flex !important; /* Принудительный Flexbox */
    justify-content: space-between;
    align-items: center;
    padding-top: 20px; 
    padding-bottom: 15px;
    border-bottom: 1px solid var(--line); 
    margin-bottom: 30px;
}
.brand { font-weight: 600; border: none; }
nav { display: flex; gap: 15px; align-items: center; }
nav a { border: none; }
nav a::before { content: "[ "; color: var(--muted); }
nav a::after { content: " ]"; color: var(--muted); }

/* Основной контент */
.muted { color: var(--muted); }
.page-title { font-size: 14px; font-weight: 600; text-transform: uppercase; margin: 0 0 5px; }
.lead { margin: 0 0 25px; color: var(--muted); }
.section { margin: 30px 0 10px; color: var(--muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid var(--line); }
th { font-weight: 600; color: var(--muted); font-size: 11px; text-transform: uppercase; border-bottom: 1px solid var(--fg); }
tr:hover td { background: #f1efe8; }
.num, .pct { text-align: right; }
.rank { color: var(--muted); width: 3ch; }
.progress { width: 22ch; white-space: nowrap; }
.progress-bar { color: var(--ok); }
.progress-bar .empty { color: var(--line); }

/* Формы */
form { margin: 20px 0; }
label { display: block; margin: 10px 0 5px; color: var(--muted); font-size: 11px; text-transform: uppercase; }
input[type=text], input[type=password] { width: 100%; padding: 8px; border: 1px solid var(--line); background: var(--bg); font: inherit; outline: none; }
input:focus { border-color: var(--fg); }
button { padding: 8px 16px; border: 1px solid var(--fg); background: var(--fg); color: var(--bg); font: inherit; font-size: 12px; cursor: pointer; margin-top: 15px; text-transform: uppercase; }
button:hover { background: #8b2e1f; border-color: #8b2e1f; }
.achievements { border-top: 1px solid var(--line); margin-top: 5px; }
.achievements label { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--line); cursor: pointer; text-transform: none; font-size: 13px; color: var(--fg); }
.achievements input { accent-color: #8b2e1f; }
.flash { padding: 10px; border: 1px solid var(--line); background: #f1efe8; margin: 0 0 20px; }
.flash.ok { color: var(--ok); border-color: var(--ok); }
footer { padding-top: 40px; padding-bottom: 30px; font-size: 11px; letter-spacing: .05em; }

/* --- Стили для галереи проектов --- */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 15px;
    margin-top: 20px;
}
.project-square {
    border: 1px solid var(--line);
    aspect-ratio: 1 / 1; /* Делает ячейку идеально квадратной */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    color: var(--fg);
    transition: all 0.2s ease;
    overflow: hidden;
}
.project-square:hover {
    background: var(--fg);
    color: var(--bg);
    border-color: var(--fg);
}
.project-square .fio {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Обрезает длинные ФИО */
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.project-square .site-name {
    font-size: 10px;
    color: var(--muted);
}
.project-square:hover .site-name {
    color: #aaa;
}

/* --- Стили для галереи с iframe --- */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Квадраты станут чуть шире */
    gap: 20px;
    margin-top: 20px;
}
.project-card {
    border: 1px solid var(--line);
    background: #fff;
    text-decoration: none;
    color: var(--fg);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}
.project-card:hover {
    border-color: var(--fg);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.iframe-wrapper {
    width: 100%;
    height: 200px; /* Высота миниатюры */
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid var(--line);
    background: #eee;
}
.iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%; /* Увеличиваем iframe в 2 раза */
    height: 200%;
    transform: scale(0.5); /* Уменьшаем его обратно, чтобы было видно весь сайт */
    transform-origin: 0 0;
    border: none;
    pointer-events: none; /* Запрещаем клики внутри iframe, чтобы работала ссылка */
}
.project-info {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.project-info .fio {
    font-weight: 600;
    font-size: 14px;
}
.project-info .site-name {
    font-size: 12px;
    color: var(--muted);
}