* { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
body { background: #f2f6fa; color: #222; overflow-y: scroll; }
.hidden { display: none !important; }

/* Анимации */
.fade-in { animation: fadeIn 0.25s ease-out; }
.scale-in { animation: scaleIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.msg-fade-out { opacity: 0 !important; transform: scale(0.8) translateY(-10px) !important; max-height: 0px !important; margin-bottom: 0px !important; padding: 0px !important; overflow: hidden; transition: all 0.4s ease-out !important; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.container { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #e3ecf5; padding: 15px; }
.auth-panel { background: #fff; padding: 40px 35px; border-radius: 16px; box-shadow: 0 8px 25px rgba(0,95,168,0.06); width: 100%; max-width: 360px; text-align: center; }
.auth-title { font-size: 48px; font-weight: 800; color: #005fa8; line-height: 1; margin-bottom: 8px; }
.auth-panel h2 { font-size: 19px; color: #333; }
.auth-subtitle { color: #888; margin: 5px 0 20px; font-size: 13px; }
input:not([type="file"]) { width: 100%; padding: 12px 14px; margin-bottom: 12px; border: 1px solid #dde3e8; border-radius: 8px; font-size: 14.5px; background: #f8fafc; transition: 0.2s; outline: none; }
input:not([type="file"]):focus { border-color: #005fa8; background: #fff; box-shadow: 0 0 0 3px rgba(0,95,168,0.1); }
.btn-primary { width: 100%; padding: 12px 14px; background: #005fa8; color: white; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: 0.2s; font-size: 14.5px; }
.btn-primary:hover:not(:disabled) { background: #004a85; transform: translateY(-1px); }
.btn-secondary { padding: 10px 18px; background: #f0f2f5; color: #555; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; }
.btn-secondary:hover { background: #e4e8eb; }
.error { color: #e53935; margin-top: 12px; font-size: 13px; text-align: center; font-weight: bold; }

/* Шапка */
.layout { display: flex; flex-direction: column; min-height: 100vh; }
.sys-header { background: #fff; box-shadow: 0 1px 8px rgba(0,0,0,0.04); position: sticky; top: 0; z-index: 100; }
.header-content { display: flex; justify-content: space-between; align-items: center; padding: 0 25px; height: 52px; max-width: 1200px; margin: 0 auto; width: 100%; }
.logo-area { display: flex; align-items: center; gap: 8px; width: 180px; }
.logo-num { font-size: 22px; font-weight: 800; color: #005fa8; }
.logo-text strong { font-size: 13px; }
.sys-nav { display: flex; height: 100%; align-items: center; }
.sys-nav a { position: relative; display: flex; align-items: center; padding: 0 20px; height: 100%; color: #666; text-decoration: none; font-weight: 600; font-size: 14px; cursor: pointer; border-bottom: 3px solid transparent; transition: 0.2s; }
.sys-nav a:hover, .sys-nav a.active-nav { color: #005fa8; border-bottom-color: #005fa8; }

.user-area { display: flex; align-items: center; gap: 8px; cursor: pointer; justify-content: flex-end; padding: 4px 10px; border-radius: 20px; transition: 0.2s; }
.user-area:hover { background: #f4f7fa; }
.top-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid #eee; }
.top-name-flex { font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 4px; }

/* Табы */
.sys-content { flex: 1; padding: 20px; max-width: 1200px; margin: 0 auto; width: 100%; }
.tab-content { display: none; height: calc(100vh - 95px); }
.tab-content.active { display: flex; flex-direction: column; }

/* Дневник */
.hw-header-flex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.section-title { font-size: 20px; color: #111; font-weight: 700; }
.week-badge { background: #e3ecf5; color: #005fa8; padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; }

.diary-grid { display: flex; gap: 12px; flex: 1; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; }
.day-col { background: #fff; border: 1px solid #e3e8ee; border-radius: 10px; min-width: 220px; width: 220px; flex-shrink: 0; display: flex; flex-direction: column; box-shadow: 0 2px 6px rgba(0,0,0,0.02); max-height: 100%; }
.day-header { background: #fafbfc; padding: 12px; text-align: center; font-weight: 700; font-size: 14px; color: #333; border-bottom: 1px solid #e3e8ee; border-radius: 10px 10px 0 0; }
.day-hw-list { flex: 1; overflow-y: auto; padding: 8px; }
.add-hw-btn { background: #f4f7fa; border: 1px dashed #aab8c2; color: #556; width: calc(100% - 16px); margin: 8px; padding: 8px; cursor: pointer; border-radius: 6px; font-weight: 600; font-size: 13px; transition: 0.2s; }
.add-hw-btn:hover { background: #e3ecf5; color: #005fa8; border-color: #005fa8; }
.hw-card { background: #fff; border: 1px solid #e3e8ee; padding: 10px; margin-bottom: 8px; border-left: 4px solid #005fa8; font-size: 13px; position: relative; border-radius: 6px; }
.hw-subject { font-weight: 700; font-size: 14px; color: #005fa8; margin-bottom: 4px; }
.hw-meta { color: #888; font-size: 11px; margin-bottom: 4px; font-weight: 600; display:flex; align-items:center; gap: 4px;}
.del-hw { position: absolute; top: 4px; right: 6px; color: #ccc; cursor: pointer; font-size: 16px; background: none; border: none; }
.del-hw:hover { color: #e53935; }

/* Мессенджер */
.messenger-layout { display: flex; background: #fff; border: 1px solid #e3e8ee; border-radius: 14px; height: 100%; box-shadow: 0 4px 12px rgba(0,0,0,0.03); overflow: hidden; }
.dialogs-list { width: 300px; border-right: 1px solid #e3e8ee; background: #fafbfc; overflow-y: auto; display: flex; flex-direction: column; }
.dialog-item { display: flex; gap: 12px; padding: 15px; cursor: pointer; border-bottom: 1px solid #f0f2f5; transition: 0.2s; align-items: center; }
.dialog-item:hover { background: #f0f4f8; }
.active-dialog { background: #e3ecf5; border-left: 3px solid #005fa8; padding-left: 12px; }

.dialog-icon-wrapper { position: relative; }
.unread-badge { position: absolute; top: -3px; right: -3px; background: #f44336; color: white; font-size: 10px; font-weight: bold; width: 18px; height: 18px; border-radius: 50%; display: flex; justify-content: center; align-items: center; border: 2px solid #fff; }
.nav-badge { background: #f44336; color: white; font-size: 10px; font-weight: bold; padding: 2px 6px; border-radius: 10px; margin-left: 6px; }

.dialog-custom-icon { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.dialog-info strong { display: flex; align-items: center; gap: 5px; font-size: 14.5px; color: #222; }
.dialog-info span { font-size: 12.5px; color: #888; display: block; }

.chat-area { flex: 1; display: flex; flex-direction: column; background: #eff3f7; position: relative; width: 100%; }
.pinned-bar { background: #fff; padding: 10px 18px; border-bottom: 1px solid #e3e8ee; font-size: 13px; display: none; align-items: center; justify-content: space-between; box-shadow: 0 2px 4px rgba(0,0,0,0.02); z-index: 10; border-left: 3px solid #005fa8; }
.pinned-content { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unpin-btn { background: none; border: none; color: #999; font-size: 14px; cursor: pointer; padding: 4px; font-weight:bold; }
.unpin-btn:hover { color: #e53935; }
.messages-container { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; }

.msg { display: flex; gap: 10px; align-items: flex-end; max-width: 80%; transition: all 0.4s ease; transform-origin: left bottom; }
.msg-img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; cursor: pointer; flex-shrink: 0; border: 1px solid #e3e8ee; background: #fff; }
.msg-body { background: #fff; padding: 8px 12px; border-radius: 14px; border-bottom-left-radius: 2px; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.msg-author { font-weight: 700; color: #005fa8; margin-bottom: 2px; font-size: 12.5px; display: flex; align-items: center; gap: 4px; }
.msg-name-click { cursor: pointer; }
.msg-name-click:hover { text-decoration: underline; }
.msg-text { font-size: 14px; line-height: 1.4; color: #111; word-wrap: break-word; }
.msg-text b { font-weight: bold; color: #000; }

.action-btn { font-size: 12px; cursor: pointer; opacity: 0.5; margin-left: 5px; transition: 0.2s; }
.action-btn:hover { opacity: 1; transform: scale(1.15); }

.file-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.file-link { display: inline-block; color: #005fa8; text-decoration: none; font-size: 12.5px; font-weight: 600; background: #e3ecf5; padding: 4px 10px; border-radius: 12px; width: fit-content; }
.file-link:hover { background: #d0e0ef; }

.input-bar { display: flex; gap: 8px; padding: 12px 20px; background: #fff; align-items: center; border-top: 1px solid #e3e8ee; }
.input-bar input[type="text"] { flex: 1; margin: 0; border: none; background: #f0f4f8; padding: 12px 18px; border-radius: 20px; font-size: 14px; }
.input-bar input[type="text"]:focus { box-shadow: none; background: #e8eef3; }
.send-btn { background: #005fa8; color: white; border: none; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; font-size: 16px; display: flex; justify-content: center; align-items: center; transition: 0.2s; flex-shrink: 0; }
.send-btn:hover { background: #004a85; transform: scale(1.05); }

/* Файлы */
.file-input-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.file-label { background: #e3ecf5; color: #005fa8; padding: 8px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; transition: 0.2s; display: inline-block; }
.file-label:hover { background: #d0e0ef; }
.file-controls { display: flex; align-items: center; gap: 5px; margin-top: 3px; }
.file-count { font-size: 11px; color: #888; font-weight: bold; }
.file-clear { font-size: 11px; color: #e53935; cursor: pointer; font-weight: bold; background: #ffebee; padding: 2px 6px; border-radius: 10px; }
.file-clear:hover { background: #ffcdd2; }

/* Профиль */
.profile-wrap { background: #fff; padding: 30px; border-radius: 14px; max-width: 480px; margin: 0 auto; box-shadow: 0 4px 15px rgba(0,0,0,0.03); }
.profile-form-sys { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.prof-avatar-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
.prof-avatar-big { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 3px solid #e3ecf5; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.prof-nick-title { font-size: 22px; font-weight: 800; color: #111; margin-top: 10px; margin-bottom: 5px; }
.custom-file-upload { display: inline-block; padding: 6px 12px; cursor: pointer; background: #f0f2f5; color: #005fa8; border-radius: 20px; font-size: 12px; font-weight: bold; transition: 0.2s; }
.custom-file-upload:hover { background: #e3ecf5; }

.prof-data { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.info-group { background: #f8fafc; padding: 10px 14px; border-radius: 8px; border: 1px solid #e3e8ee; }
.info-label { font-size: 11px; color: #888; text-transform: uppercase; font-weight: 700; margin-bottom: 4px; display: block; }
.info-value { font-size: 15px; font-weight: 600; color: #222; }
.custom-input { margin: 0 !important; border: 1px solid #ddd !important; background: transparent !important; padding: 6px !important; font-size: 15px !important; font-weight: 600 !important; width: 100% !important; border-radius: 6px !important; }
.custom-input:focus { border-color: #005fa8 !important; box-shadow: none !important; }

/* Модалки */
.modal { position: fixed; inset: 0; background: rgba(0,15,30,0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; backdrop-filter: blur(2px); }
.modal-box { background: #fff; padding: 25px; border-radius: 14px; width: 380px; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.15); max-width: 90%; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 5px; }
.close-btn { position: absolute; top: 12px; right: 16px; font-size: 26px; cursor: pointer; color: #aaa; line-height: 1; transition: 0.2s; z-index: 10; }
.close-btn:hover { color: #e53935; }
.text-center { text-align: center; }
.name-with-badge { display: flex; align-items: center; justify-content: center; gap: 5px; margin-bottom: 2px; font-size: 19px; color: #111; font-weight: 800;}
.nick-tag { color: #888; font-size: 13.5px; font-weight: 500; margin-bottom: 12px; }
.role-tag { background: #e3ecf5; color: #005fa8; padding: 4px 12px; border-radius: 12px; font-size: 11.5px; font-weight: 700; display: inline-block; }
textarea { width: 100%; height: 70px; padding: 10px; border: 1px solid #dde3e8; border-radius: 8px; resize: none; outline: none; margin-bottom: 12px; font-family: inherit; font-size: 14px; }
textarea:focus { border-color: #005fa8; }

.ver-badge { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; vertical-align: middle; }

@media (max-width: 768px) {
    .header-content { padding: 0 10px; height: auto; flex-wrap: wrap; justify-content: space-between; padding-top: 10px; padding-bottom: 10px; }
    .logo-text { display: none; }
    .sys-nav { order: 3; width: 100%; justify-content: center; margin-top: 10px; }
    .sys-nav a { padding: 8px 15px; border-bottom: none; border-radius: 20px; }
    .sys-nav a.active-nav { background: #e3ecf5; }
    .sys-content { padding: 10px; height: calc(100vh - 100px); }
    .tab-content { height: 100%; }
    .messenger-layout { flex-direction: column; border-radius: 10px; }
    .dialogs-list { width: 100%; flex-direction: row; border-right: none; border-bottom: 1px solid #e3e8ee; max-height: 85px; overflow-x: auto; padding: 5px; }
    .dialog-item { padding: 10px; border-bottom: none; min-width: 250px; border-radius: 10px; }
    .active-dialog { border-left: none; background: #e3ecf5; }
    .chat-area { flex: 1; }
    .msg { max-width: 95%; }
    .input-bar { padding: 10px; flex-wrap: wrap; justify-content: center; }
    .input-bar input[type="text"] { width: 100%; flex: none; order: -1; margin-bottom: 5px; }
}