body {
    background: #0000aa; /* Blue Screen style */
    color: #00ff00; /* Matrix/Terminal green */
    font-family: "Comic Sans MS", "Courier New", cursive;
    margin: 0; padding: 0; overflow-x: hidden;
}

.top-marquee {
    background: #ff00ff; color: #fff;
    padding: 5px; border-bottom: 4px solid #000;
}

header {
    background: linear-gradient(45deg, #ff0000, #ffff00);
    text-align: center; padding: 15px; border-bottom: 5px double #000;
}

.blink { animation: blinker 0.4s linear infinite; color: #000; }
@keyframes blinker { 50% { opacity: 0; } }

.main-layout { display: flex; padding: 20px; gap: 15px; }

.sidebar {
    width: 260px; background: #00ffff;
    border: 6px outset #fff; padding: 10px; color: #000;
}

.status-box { background: #fff; border: 3px dashed #f0f; padding: 10px; margin-bottom: 15px; }
.user-img { font-size: 50px; text-align: center; }

.menu-btn {
    width: 100%; margin-bottom: 5px; padding: 10px;
    background: #c0c0c0; border: 3px outset #fff;
    font-weight: bold; cursor: pointer;
}

.content { flex: 1; background: #fff; border: 5px inset #808080; padding: 15px; color: #000; }

.job-card { background: #dcdcdc; border: 2px solid #000; padding: 15px; margin-bottom: 15px; position: relative; }
.job-card.premium { background: #ffff00; border: 4px solid #ff00ff; box-shadow: 8px 8px 0 #ff0000; }

.badge { position: absolute; top: -10px; left: -10px; background: red; color: #fff; padding: 5px; transform: rotate(-10deg); }

.scam-terms { font-size: 6px; color: #555; background: #eee; margin: 10px 0; padding: 5px; }

.action-btn { width: 100%; padding: 10px; border: 3px outset #fff; font-weight: bold; cursor: pointer; }
.action-btn.gold { background: linear-gradient(to bottom, #ffd700, #ff8c00); }

/* Модалки и уведомления */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 0, 255, 0.7); display: none;
    justify-content: center; align-items: center; z-index: 9999;
}
.modal { background: #fff; border: 8px solid #000; padding: 30px; text-align: center; max-width: 450px; color: #000; }

.toast {
    background: #ff0000; color: #fff; padding: 15px;
    border: 4px solid #ffff00; margin-top: 10px;
    animation: shake 0.2s infinite; font-weight: bold;
}
/* Фиксируем высоту, чтобы всё влезло в экран */
html, body {
    height: 100vh;
    margin: 0;
    overflow: hidden; /* Убираем скролл всей страницы */
}

.main-layout {
    display: flex;
    height: calc(100vh - 180px); /* Вычитаем высоту хедера и строки */
    padding: 10px;
    gap: 10px;
}

.content {
    flex: 1;
    background: #fff;
    border: 5px inset #808080;
    padding: 10px;
    color: #000;
    overflow-y: auto; /* Скроллим только список вакансий */
}

/* Стили для плашки прямо поверх карточки */
.job-card {
    position: relative; /* Чтобы плашка прилипла к карточке */
    background: #dcdcdc;
    border: 2px solid #000;
    padding: 15px;
    margin-bottom: 15px;
}

.card-toast {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 0, 0, 0.9);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    font-size: 1.2em;
    z-index: 10;
    border: 3px solid yellow;
    animation: shake 0.1s infinite;
}

@keyframes shake { 0% { transform: translate(2px, 2px); } 50% { transform: translate(-2px, -2px); } }