/* CodeStack Account — Styles */
.cs-account-wrap{margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#333;}
.cs-account-header{display:flex;align-items:center;gap:16px;padding:20px 0;border-bottom:2px solid #2271b1;margin-bottom:24px;}
.cs-account-avatar img{width:64px;height:64px;border-radius:50%;object-fit:cover;}
.cs-account-userinfo{flex:1;}
.cs-account-userinfo h2{margin:0 0 4px;font-size:20px;}
.cs-account-userinfo p{margin:0;font-size:14px;color:#666;}
.cs-account-logout{font-size:13px;color:#d63638;text-decoration:none;}
.cs-account-logout:hover{text-decoration:underline;}
.cs-account-tabs{display:flex;gap:4px;margin-bottom:24px;flex-wrap:wrap;}
.cs-account-tab{padding:10px 18px;border-radius:8px 8px 0 0;background:#f0f0f1;color:#555;text-decoration:none;font-size:14px;font-weight:500;transition:all .2s;}
.cs-account-tab:hover{background:#e0e0e0;color:#333;}
.cs-account-tab.active{background:#2271b1;color:#fff;}
.cs-account-content{background:#fff;border:1px solid #e0e0e0;border-radius:0 8px 8px 8px;padding:24px;}
.cs-section-title{margin:0 0 20px;font-size:18px;font-weight:600;color:#2271b1;}
.cs-account-login-notice{text-align:center;padding:40px 20px;font-family:sans-serif;}
.cs-activity-feed{display:flex;flex-direction:column;gap:0;}
.cs-activity-item{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid #f0f0f0;}
.cs-activity-item:last-child{border-bottom:none;}
.cs-activity-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#f8f9fa;font-size:20px;flex-shrink:0;}
.cs-activity-body{flex:1;}
.cs-activity-title{font-size:14px;font-weight:500;}
.cs-activity-meta{font-size:12px;color:#888;margin-top:2px;}
.cs-activity-time{font-size:12px;color:#aaa;white-space:nowrap;}
.cs-empty-state{text-align:center;padding:40px 20px;color:#888;}
.cs-tokens-cards{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap;}
.cs-token-card{flex:1;min-width:130px;text-align:center;padding:16px 12px;border-radius:10px;border:1px solid #ddd;}
.cs-token-card.used{background:#e7f3ff;border-color:#2271b1;}
.cs-token-card.remaining{background:#edf7ed;border-color:#46b450;}
.cs-token-card.limit{background:#f8f9fa;border-color:#ccc;}
.cs-token-num{font-size:22px;font-weight:700;color:#333;}
.cs-token-label{font-size:12px;color:#666;margin-top:4px;text-transform:uppercase;letter-spacing:.5px;}
.cs-progress{height:8px;background:#e0e0e0;border-radius:4px;overflow:hidden;margin-bottom:6px;}
.cs-progress-bar{height:100%;background:linear-gradient(90deg,#2271b1,#00a7e0);border-radius:4px;transition:width .5s ease;}
.cs-progress-bar.warning{background:linear-gradient(90deg,#f0ad4e,#ed9c28);}
.cs-progress-bar.danger{background:linear-gradient(90deg,#d9534f,#c9302c);}
.cs-progress-label{font-size:12px;color:#999;text-align:center;margin-bottom:20px;}
.cs-details{background:#f8f9fa;border-radius:8px;padding:12px 16px;margin-bottom:16px;}
.cs-detail-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #eee;font-size:14px;}
.cs-detail-row:last-child{border-bottom:none;}
.cs-detail-key{color:#666;}
.cs-detail-val{font-weight:600;color:#333;}
.cs-info{font-size:13px;color:#888;line-height:1.6;}
.cs-form{max-width:500px;}
.cs-field{margin-bottom:16px;}
.cs-field label{display:block;font-size:14px;font-weight:500;margin-bottom:6px;}
.cs-field input[type="text"],.cs-field input[type="password"],.cs-field input[type="email"],.cs-field input[type="url"],.cs-field textarea{width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;box-sizing:border-box;}
.cs-field input:focus,.cs-field textarea:focus{border-color:#2271b1;outline:none;box-shadow:0 0 0 1px #2271b1;}
.cs-field-row{display:flex;gap:12px;flex-wrap:wrap;}
.cs-field-row .cs-field{flex:1;min-width:150px;}
.cs-muted{font-size:12px;color:#999;}
.cs-account-btn{display:inline-block;padding:10px 20px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;text-decoration:none;transition:all .2s;}
.cs-btn-primary{background:#2271b1;color:#fff;}
.cs-btn-primary:hover{background:#135e96;}
.cs-btn-secondary{background:#f0f0f1;color:#333;}
.cs-btn-secondary:hover{background:#e0e0e0;}
.cs-btn-danger{background:#d63638;color:#fff;}
.cs-btn-danger:hover{background:#b32d2e;}
.cs-form-message{margin-top:12px;font-size:14px;min-height:20px;}
.cs-form-message.success{color:#46b450;}
.cs-form-message.error{color:#d63638;}
.cs-password-strength{height:4px;border-radius:2px;margin-top:6px;background:#e0e0e0;transition:background .3s;}
.cs-sessions-table{width:100%;border-collapse:collapse;margin-bottom:16px;font-size:14px;}
.cs-sessions-table th{text-align:left;padding:8px 12px;background:#f8f9fa;border-bottom:1px solid #e0e0e0;font-weight:600;}
.cs-sessions-table td{padding:8px 12px;border-bottom:1px solid #f0f0f0;}
.cs-session-current td{background:#f0f8ff;}
.cs-badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:12px;}
.cs-badge-active{background:#edf7ed;color:#46b450;}
.cs-profile-avatar-section{display:flex;align-items:center;gap:16px;margin-bottom:24px;}
.cs-profile-avatar-preview{width:80px;height:80px;border-radius:50%;object-fit:cover;border:2px solid #e0e0e0;}
.cs-notice{padding:12px 16px;border-radius:8px;margin-bottom:20px;}
.cs-notice-warning{background:#fff8e5;border:1px solid #ffb900;}
.cs-notice p{margin:0;font-size:14px;}
/* Стили для вкладки "Безопасность" */

/* Индикатор сложности пароля */
.cs-password-strength {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
.cs-password-strength .cs-strength-bar {
    flex: 1;
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}
.cs-password-strength .cs-strength-bar::after {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0;
    background: #d9534f;
    border-radius: 3px;
    transition: width 0.3s ease, background 0.3s ease;
}
.cs-password-strength.cs-strength-very-weak .cs-strength-bar::after { width: 20%; background: #d9534f; }
.cs-password-strength.cs-strength-weak .cs-strength-bar::after { width: 40%; background: #f0ad4e; }
.cs-password-strength.cs-strength-medium .cs-strength-bar::after { width: 60%; background: #ffd700; }
.cs-password-strength.cs-strength-good .cs-strength-bar::after { width: 80%; background: #8bc34a; }
.cs-password-strength.cs-strength-strong .cs-strength-bar::after { width: 100%; background: #46b450; }

.cs-password-strength .cs-strength-label {
    font-size: 12px;
    color: #999;
    min-width: 100px;
    text-align: right;
}

/* Совпадение паролей */
.cs-password-match {
    font-size: 12px;
    margin-top: 4px;
}
.cs-password-match.cs-match-ok { color: #46b450; }
.cs-password-match.cs-match-fail { color: #d9534f; }

/* Таблица сессий */
.cs-account-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 14px;
}
.cs-account-table th {
    text-align: left;
    padding: 10px 12px;
    background: #f8f9fa;
    border-bottom: 2px solid #e0e0e0;
    font-weight: 600;
    color: #666;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cs-account-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
}
.cs-account-table tr:last-child td {
    border-bottom: none;
}
.cs-session-current {
    background: #f0f8ff;
}
.cs-session-current td:first-child {
    font-weight: 600;
}

/* Бейджи */
.cs-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cs-badge-success {
    background: #d4edda;
    color: #155724;
}
.cs-badge-muted {
    background: #f0f0f0;
    color: #999;
}

/* Кнопка опасного действия */
.cs-account-button-danger {
    background: #d9534f;
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s;
}
.cs-account-button-danger:hover {
    background: #c9302c;
}
.cs-account-button-danger:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Сообщения */
.cs-account-message {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 14px;
    display: none;
}
.cs-account-message:not(:empty) {
    display: block;
}
.cs-msg-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.cs-msg-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Секция */
.cs-account-section {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid #eee;
}
.cs-account-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.cs-account-section-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 16px 0;
    color: #2271b1;
}

/* Форма */
.cs-account-form {
    max-width: 500px;
}
.cs-account-field {
    margin-bottom: 16px;
}
.cs-account-label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}
.cs-account-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.cs-account-input:focus {
    border-color: #2271b1;
    outline: none;
    box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.1);
}
.cs-account-button {
    padding: 10px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    border: none;
    transition: background 0.2s, opacity 0.2s;
}
.cs-account-button-primary {
    background: #2271b1;
    color: #fff;
}
.cs-account-button-primary:hover {
    background: #135e96;
}
.cs-account-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.cs-account-muted {
    color: #999;
    font-size: 14px;
}
/* Security tab */
.cs-security-wrap{max-width:600px;}
.cs-section-title{font-size:18px;font-weight:600;color:#2271b1;margin:0 0 16px;padding-bottom:8px;border-bottom:1px solid #e0e0e0;}
.cs-form{display:flex;flex-direction:column;gap:14px;max-width:400px;}
.cs-form-field{display:flex;flex-direction:column;gap:4px;}
.cs-form-field label{font-size:13px;font-weight:600;color:#555;}
.cs-form-field input{padding:8px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;}
.cs-form-field input:focus{outline:none;border-color:#2271b1;box-shadow:0 0 0 2px rgba(34,113,177,.15);}
.cs-divider{border:none;border-top:1px solid #e0e0e0;margin:28px 0;}
.cs-sessions-table{width:100%;border-collapse:collapse;font-size:14px;}
.cs-sessions-table th{text-align:left;padding:8px 12px;border-bottom:2px solid #e0e0e0;font-size:12px;text-transform:uppercase;color:#888;}
.cs-sessions-table td{padding:10px 12px;border-bottom:1px solid #f0f0f0;}
.cs-badge{display:inline-block;padding:2px 10px;border-radius:10px;font-size:12px;font-weight:600;}
.cs-badge-success{background:#edf7ed;color:#46b450;}
.cs-badge-muted{background:#f5f5f5;color:#999;}
.cs-btn-danger{background:#d9534f;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px;}
.cs-btn-danger:hover{background:#c9302c;}
.cs-form-message{padding:10px 14px;border-radius:6px;font-size:14px;}
.cs-form-message.cs-success{background:#edf7ed;color:#3a7d34;}
.cs-form-message.cs-error{background:#fdecea;color:#a8362f;}
.cs-muted{color:#999;font-size:14px;}

/* === Гамбургер — только на мобилках === */

/* Кнопка-гамбургер */
.cs-account-burger {
    display: none;
    align-items: center;
    gap: 5px;
    width: 50px;
    padding: 12px 16px;
    background: #2271b1;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 12px;
}
.cs-account-burger span:first-child,
.cs-account-burger span:nth-child(2),
.cs-account-burger span:nth-child(3) {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .25s, opacity .25s;
}
/* Анимация в крестик */
.cs-burger-open span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.cs-burger-open span:nth-child(2) { opacity: 0; }
.cs-burger-open span:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }

.cs-burger-label {
    font-size: 15px;
    margin-left: 4px;
}

/* На мобилках показываем гамбургер, прячем обычное меню */
@media (max-width: 768px) {
    .cs-account-burger {
        display: flex;
        flex-wrap: wrap;
    }
    .cs-account-burger span:first-child,
    .cs-account-burger span:nth-child(2),
    .cs-account-burger span:nth-child(3) {
        display: block;
    }
    .cs-burger-label {
        display: block;
        flex: 1;
        text-align: left;
    }

    .cs-account-tabs {
        display: none;
        flex-direction: column;
        gap: 0;
        margin-bottom: 16px;
    }
    .cs-account-tabs.cs-tabs-open {
        display: flex;
    }
    .cs-account-tab {
        width: 100%;
        border-radius: 0;
        padding: 12px 16px;
        border-bottom: 1px solid rgba(255,255,255,.2);
    }
    .cs-account-tab.active {
        background: #135e96;
    }
    .cs-account-tab:hover {
        background: #135e96;
    }
}

/* На десктопе гамбургер скрыт, меню как обычно */
@media (min-width: 769px) {
    .cs-account-burger { display: none !important; }
    .cs-account-tabs { display: flex !important; }
}
/* === Заметки === */
.cs-notes-wrap{margin-top:10px;}
.cs-notes-toolbar{display:flex;align-items:center;gap:14px;margin-bottom:20px;}
.cs-notes-count{font-size:13px;color:#888;}
.cs-notes-empty{text-align:center;padding:40px 20px;color:#888;}
.cs-notes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}

/* Редактор */
.cs-note-editor{
    background:#f8f9fa;border:1px solid #ddd;border-radius:10px;
    padding:18px;margin-bottom:20px;
}
.cs-note-input-title{
    width:100%;padding:10px 14px;border:1px solid #ddd;border-radius:6px;
    font-size:16px;font-weight:600;box-sizing:border-box;margin-bottom:10px;
}
.cs-note-input-title:focus{border-color:#2271b1;outline:none;box-shadow:0 0 0 1px #2271b1;}
.cs-note-input-content{
    width:100%;padding:10px 14px;border:1px solid #ddd;border-radius:6px;
    font-size:14px;line-height:1.6;box-sizing:border-box;margin-bottom:10px;
    resize:vertical;font-family:inherit;
}
.cs-note-input-content:focus{border-color:#2271b1;outline:none;box-shadow:0 0 0 1px #2271b1;}
.cs-note-editor-row{display:flex;gap:12px;align-items:center;margin-bottom:12px;}
.cs-note-input-tags{
    flex:1;padding:8px 12px;border:1px solid #ddd;border-radius:6px;
    font-size:13px;box-sizing:border-box;
}
.cs-note-input-tags:focus{border-color:#2271b1;outline:none;}
.cs-note-colors{display:flex;gap:6px;}
.cs-color-dot{
    display:inline-block;width:24px;height:24px;border-radius:50%;
    cursor:pointer;border:2px solid transparent;transition:all .2s;
}
.cs-color-dot input{display:none;}
.cs-color-dot:hover{transform:scale(1.15);}
.cs-color-default{background:#e0e0e0;}
.cs-color-blue{background:#2271b1;}
.cs-color-green{background:#46b450;}
.cs-color-yellow{background:#ffb900;}
.cs-color-red{background:#d63638;}
.cs-color-purple{background:#8b5cf6;}
.cs-color-dot:has(input:checked){border-color:#333;transform:scale(1.1);}
.cs-note-editor-actions{display:flex;gap:10px;}

/* Карточки заметок */
.cs-note-card{
    background:#fff;border:1px solid #e0e0e0;border-left:4px solid #ccc;
    border-radius:8px;padding:14px;cursor:pointer;transition:box-shadow .2s,transform .15s;
}
.cs-note-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.1);transform:translateY(-2px);}
.cs-note-card.cs-color-default{border-left-color:#999;}
.cs-note-card.cs-color-blue{border-left-color:#2271b1;}
.cs-note-card.cs-color-green{border-left-color:#46b450;}
.cs-note-card.cs-color-yellow{border-left-color:#ffb900;}
.cs-note-card.cs-color-red{border-left-color:#d63638;}
.cs-note-card.cs-color-purple{border-left-color:#8b5cf6;}

.cs-note-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:8px;}
.cs-note-card-title{margin:0;font-size:15px;font-weight:600;color:#333;line-height:1.3;}
.cs-note-delete{
    background:none;border:none;color:#aaa;font-size:16px;cursor:pointer;
    padding:2px 6px;border-radius:4px;flex-shrink:0;line-height:1;
}
.cs-note-delete:hover{background:#d63638;color:#fff;}

.cs-note-card-content{
    font-size:13px;line-height:1.5;color:#555;margin-bottom:8px;
    max-height:120px;overflow:hidden;
}
.cs-note-card-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px;}
.cs-note-tag{
    background:#f0f0f1;color:#666;font-size:11px;padding:2px 8px;
    border-radius:10px;
}
.cs-note-card-meta{font-size:11px;color:#aaa;}

/* Адаптив */
@media (max-width: 480px) {
    .cs-notes-grid{grid-template-columns:1fr !important;}
    .cs-note-editor-row{flex-direction:column;align-items:stretch;}
    .cs-note-colors{justify-content:flex-start;}
}