/* Modern Font Setup */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* General Styles */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Typography Improvements */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 600;
    line-height: 1.3;
}

.navbar-brand {
    font-weight: 700;
    letter-spacing: -0.025em;
}

.nav-link {
    font-weight: 500;
}

.btn {
    font-weight: 500;
    letter-spacing: -0.01em;
}

.form-control, .form-select {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

main {
    flex: 1;
}

/* Card Styles */
.card {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: none;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

/* Navigation */
.navbar {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar-brand i {
    margin-right: 0.5rem;
}

.navbar-brand, .navbar .nav-link {
    color: #fff !important;
}

/* Forms */
.form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    border-color: #80bdff;
}

/* Question Cards */
.question-card {
    transition: transform 0.2s;
}

.question-card:hover {
    transform: translateY(-2px);
}

/* Badges */
.badge {
    font-weight: 500;
    padding: 0.5em 0.75em;
}

/* Footer */
.footer {
    margin-top: auto;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}

/* Breadcrumb */
.breadcrumb {
    background-color: transparent;
    padding: 0.75rem 0;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .card-body {
        padding: 1rem;
    }
    
    .navbar-brand {
        font-size: 1.1rem;
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.android-card {
    background: linear-gradient(135deg, #a8e063 0%, #56ab2f 100%);
    color: #fff;
}

.android-card .card-title a,
.android-card .card-text,
.android-card .text-muted,
.android-card small {
    color: #fff !important;
}

/* Категории: фирменные фоны */
.python-developer-card {
    background: linear-gradient(135deg, #306998 0%, #4B8BBE 100%);
    color: #fff;
}

.java-developer-card {
    background: linear-gradient(135deg, #f44336 0%, #ff9800 100%);
    color: #fff;
}

.javascript-developer-card {
    background: linear-gradient(135deg, #f7e018 0%, #ffd600 100%);
    color: #222;
}

.php-developer-card {
    background: linear-gradient(135deg, #8993be 0%, #4F5B93 100%);
    color: #fff;
}

.csharp-developer-card {
    background: linear-gradient(135deg, #68217a 0%, #a074c4 100%);
    color: #fff;
}

.cplusplus-developer-card {
    background: linear-gradient(135deg, #00599c 0%, #659ad2 100%);
    color: #fff;
}

go-developer-card {
    background: linear-gradient(135deg, #00ADD8 0%, #3de1fc 100%);
    color: #fff;
}

devops-engineer-card {
    background: linear-gradient(135deg, #232526 0%, #414345 100%);
    color: #fff;
}

data-scientist-card {
    background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);
    color: #fff;
}

machine-learning-engineer-card {
    background: linear-gradient(135deg, #8e2de2 0%, #4a00e0 100%);
    color: #fff;
}

.android-developer-card {
    background: linear-gradient(135deg, #a8e063 0%, #56ab2f 100%);
    color: #fff;
}

.ios-developer-card {
    background: linear-gradient(135deg, #e0e0e0 0%, #bdbdbd 100%);
    color: #222;
}

.flutter-developer-card {
    background: linear-gradient(135deg, #02569B 0%, #44a8f7 100%);
    color: #fff;
}

.business-analyst-card {
    background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
    color: #222;
}

.project-manager-card {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: #fff;
}

.product-manager-card {
    background: linear-gradient(135deg, #fc4a1a 0%, #f7b733 100%);
    color: #fff;
}

.react-developer-card {
    background: linear-gradient(135deg, #61dafb 0%, #20232a 100%);
    color: #222;
}

.vuejs-developer-card {
    background: linear-gradient(135deg, #42b883 0%, #35495e 100%);
    color: #fff;
}

.angular-developer-card {
    background: linear-gradient(135deg, #dd0031 0%, #c3002f 100%);
    color: #fff;
}

typescript-developer-card {
    background: linear-gradient(135deg, #007acc 0%, #1e90ff 100%);
    color: #fff;
}

.scala-developer-card {
    background: linear-gradient(135deg, #dc322f 0%, #b31217 100%);
    color: #fff;
}

.kotlin-developer-card {
    background: linear-gradient(135deg, #7f52ff 0%, #b072ff 100%);
    color: #fff;
}

.rust-developer-card {
    background: linear-gradient(135deg, #dea584 0%, #b7410e 100%);
    color: #fff;
}

.elixir-developer-card {
    background: linear-gradient(135deg, #a972e7 0%, #6e48aa 100%);
    color: #fff;
}

.react-native-developer-card {
    background: linear-gradient(135deg, #61dafb 0%, #20232a 100%);
    color: #222;
}

.xamarin-developer-card {
    background: linear-gradient(135deg, #3498db 0%, #2ecc71 100%);
    color: #fff;
}

data-engineer-card {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: #fff;
}

data-analyst-card {
    background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
    color: #222;
}

computer-vision-engineer-card {
    background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);
    color: #fff;
}

nlp-engineer-card {
    background: linear-gradient(135deg, #8e2de2 0%, #4a00e0 100%);
    color: #fff;
}

site-reliability-engineer-sre-card {
    background: linear-gradient(135deg, #232526 0%, #414345 100%);
    color: #fff;
}

cloud-engineer-card {
    background: linear-gradient(135deg, #2980b9 0%, #6dd5fa 100%);
    color: #fff;
}

kubernetes-engineer-card {
    background: linear-gradient(135deg, #326ce5 0%, #1e3c72 100%);
    color: #fff;
}

security-engineer-card {
    background: linear-gradient(135deg, #232526 0%, #ff512f 100%);
    color: #fff;
}

engineering-manager-card {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: #fff;
}

team-lead-card {
    background: linear-gradient(135deg, #fc4a1a 0%, #f7b733 100%);
    color: #fff;
}

scrum-master-card {
    background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
    color: #222;
}

blockchain-developer-card {
    background: linear-gradient(135deg, #8e2de2 0%, #4a00e0 100%);
    color: #fff;
}

game-developer-card {
    background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);
    color: #fff;
}

embedded-developer-card {
    background: linear-gradient(135deg, #232526 0%, #414345 100%);
    color: #fff;
}

system-administrator-card {
    background: linear-gradient(135deg, #00599c 0%, #659ad2 100%);
    color: #fff;
}

c-cplusplus-developer-card {
    background: linear-gradient(135deg, #00599c 0%, #659ad2 100%);
    color: #fff;
}

onec-developer-card {
    background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
    color: #222;
}

devops-card {
    background: linear-gradient(135deg, #232526 0%, #414345 100%);
    color: #fff;
}

frontend-developer-card {
    background: linear-gradient(135deg, #61dafb 0%, #20232a 100%);
    color: #222;
}

golang-developer-card {
    background: linear-gradient(135deg, #00ADD8 0%, #3de1fc 100%);
    color: #fff;
}

nodejs-developer-card {
    background: linear-gradient(135deg, #3c873a 0%, #68a063 100%);
    color: #fff;
}

ruby-developer-card {
    background: linear-gradient(135deg, #e0115f 0%, #f06292 100%);
    color: #fff;
}

qa-engineer-card {
    background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);
    color: #fff;
}

/* Красивое оформление кода в ответах */
textarea.form-control {
    font-family: 'JetBrains Mono', 'Fira Mono', 'Consolas', 'Menlo', 'Monaco', 'Liberation Mono', monospace;
    font-size: 1em;
    background: #fff;
    color: #222;
    border: 1px solid #ced4da;
    border-radius: 6px;
    padding: 1em;
    min-height: 180px;
    line-height: 1.5;
    resize: vertical;
}

textarea.form-control:focus {
    background: #fff;
    color: #222;
    box-shadow: 0 0 0 0.15rem rgba(0,0,0,0.04);
}

/* Для отображения кода в разметке ответа */
pre, code {
    font-family: 'JetBrains Mono', 'Fira Mono', 'Consolas', 'Menlo', 'Monaco', 'Liberation Mono', monospace;
    background: #f8f9fa;
    color: #222;
    border-radius: 4px;
    padding: 0.2em 0.4em;
    font-size: 0.97em;
}
pre {
    padding: 1em;
    margin-bottom: 1em;
    overflow-x: auto;
}

.answer-block {
    background: #fff;
    color: #222;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 1.25em 1em;
    font-size: 1.05em;
    margin-bottom: 0.5em;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    word-break: break-word;
}

/* Pygments codehilite style */
.codehilite .hll { background-color: #ffffcc }
.codehilite  { background: #f8f8f8; color: #222831; }
.codehilite .c { color: #408080; font-style: italic } /* Comment */
.codehilite .err { border: 1px solid #FF0000 } /* Error */
.codehilite .k { color: #008000; font-weight: bold } /* Keyword */
.codehilite .o { color: #666666 } /* Operator */
.codehilite .ch { color: #408080; font-style: italic } /* Comment.Hashbang */
.codehilite .cm { color: #408080; font-style: italic } /* Comment.Multiline */
.codehilite .cp { color: #BC7A00 } /* Comment.Preproc */
.codehilite .cpf { color: #408080; font-style: italic } /* Comment.PreprocFile */
.codehilite .c1 { color: #408080; font-style: italic } /* Comment.Single */
.codehilite .cs { color: #408080; font-style: italic } /* Comment.Special */
.codehilite .gd { color: #A00000 } /* Generic.Deleted */
.codehilite .ge { font-style: italic } /* Generic.Emph */
.codehilite .gr { color: #FF0000 } /* Generic.Error */
.codehilite .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.codehilite .gi { color: #00A000 } /* Generic.Inserted */
.codehilite .go { color: #888888 } /* Generic.Output */
.codehilite .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
.codehilite .gs { font-weight: bold } /* Generic.Strong */
.codehilite .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.codehilite .gt { color: #0044DD } /* Generic.Traceback */
.codehilite .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
.codehilite .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
.codehilite .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
.codehilite .kp { color: #008000 } /* Keyword.Pseudo */
.codehilite .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
.codehilite .kt { color: #B00040 } /* Keyword.Type */
.codehilite .m { color: #666666 } /* Literal.Number */
.codehilite .s { color: #BA2121 } /* Literal.String */
.codehilite .na { color: #7D9029 } /* Name.Attribute */
.codehilite .nb { color: #008000 } /* Name.Builtin */
.codehilite .nc { color: #0000FF; font-weight: bold } /* Name.Class */
.codehilite .no { color: #880000 } /* Name.Constant */
.codehilite .nd { color: #AA22FF } /* Name.Decorator */
.codehilite .ni { color: #999999; font-weight: bold } /* Name.Entity */
.codehilite .ne { color: #D2413A; font-weight: bold } /* Name.Exception */
.codehilite .nf { color: #0000FF } /* Name.Function */
.codehilite .nl { color: #A0A000 } /* Name.Label */
.codehilite .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
.codehilite .nt { color: #008000; font-weight: bold } /* Name.Tag */
.codehilite .nv { color: #19177C } /* Name.Variable */
.codehilite .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
.codehilite .w { color: #bbbbbb } /* Text.Whitespace */
.codehilite .mb { color: #666666 } /* Literal.Number.Bin */
.codehilite .mf { color: #666666 } /* Literal.Number.Float */
.codehilite .mh { color: #666666 } /* Literal.Number.Hex */
.codehilite .mi { color: #666666 } /* Literal.Number.Integer */
.codehilite .mo { color: #666666 } /* Literal.Number.Oct */
.codehilite .sa { color: #BA2121 } /* Literal.String.Affix */
.codehilite .sb { color: #BA2121 } /* Literal.String.Backtick */
.codehilite .sc { color: #BA2121 } /* Literal.String.Char */
.codehilite .dl { color: #BA2121 } /* Literal.String.Delimiter */
.codehilite .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
.codehilite .s2 { color: #BA2121 } /* Literal.String.Double */
.codehilite .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
.codehilite .sh { color: #BA2121 } /* Literal.String.Heredoc */
.codehilite .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
.codehilite .sx { color: #008000 } /* Literal.String.Other */
.codehilite .sr { color: #BB6688 } /* Literal.String.Regex */
.codehilite .s1 { color: #BA2121 } /* Literal.String.Single */
.codehilite .ss { color: #19177C } /* Literal.String.Symbol */
.codehilite .bp { color: #008000 } /* Name.Builtin.Pseudo */
.codehilite .fm { color: #0000FF } /* Name.Function.Magic */
.codehilite .vc { color: #19177C } /* Name.Variable.Class */
.codehilite .vg { color: #19177C } /* Name.Variable.Global */
.codehilite .vi { color: #19177C } /* Name.Variable.Instance */
.codehilite .il { color: #666666 } /* Literal.Number.Integer.Long */

.btn-primary {
    background: #2563eb;
    border-color: #2563eb;
}
.btn-primary:hover, .btn-primary:focus {
    background: #1d4fd7;
    border-color: #1d4fd7;
}

.btn-success {
    background: #22c55e;
    border-color: #22c55e;
}
.btn-success:hover, .btn-success:focus {
    background: #16a34a;
    border-color: #16a34a;
}

.btn-warning {
    background: #facc15;
    border-color: #facc15;
    color: #222831;
}
.btn-warning:hover, .btn-warning:focus {
    background: #eab308;
    border-color: #eab308;
    color: #222831;
}

.btn-danger {
    background: #ef4444;
    border-color: #ef4444;
}
.btn-danger:hover, .btn-danger:focus {
    background: #dc2626;
    border-color: #dc2626;
}

.alert-info {
    background: #e0e7ff;
    color: #222831;
    border-color: #2563eb;
}
.alert-success {
    background: #dcfce7;
    color: #222831;
    border-color: #22c55e;
}
.alert-warning {
    background: #fef9c3;
    color: #222831;
    border-color: #facc15;
}
.alert-danger {
    background: #fee2e2;
    color: #222831;
    border-color: #ef4444;
}

/* Hover эффекты для карточек категорий на главной странице */
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: #007bff;
}

.card:hover .card-title a {
    color: #007bff !important;
}

/* Специальные эффекты для карточек с градиентными фонами */
.card[class*="-card"]:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

/* Эффект для ссылок в карточках */
.card .card-title a {
    transition: color 0.3s ease;
}

/* Стили для иконок категорий */
.category-icon {
    transition: transform 0.3s ease;
}

.card:hover .category-icon {
    transform: scale(1.1);
}

/* Улучшенные стили для карточек с иконками */
.card .d-flex.align-items-center {
    min-height: 40px;
}

.card .card-title {
    flex: 1;
    margin-bottom: 0;
}

/* SEO и производительность */
.answer-content {
    line-height: 1.7;
}

.answer-content h1, .answer-content h2, .answer-content h3, 
.answer-content h4, .answer-content h5, .answer-content h6 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.answer-content p {
    margin-bottom: 1rem;
}

.answer-content code {
    background-color: #f8f9fa;
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
}

.answer-content pre {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin: 1rem 0;
}

.answer-content pre code {
    background: none;
    padding: 0;
}

/* Улучшение доступности для SEO */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Оптимизация для мобильных устройств */
@media (max-width: 768px) {
    .card-body {
        padding: 1rem;
    }
    
    .answer-content {
        font-size: 0.95rem;
    }
    
    .answer-content pre {
        font-size: 0.85rem;
    }
}