:root {
    --brand-blue: #2274f0;
    --brand-navy: #10214d;
    --brand-soft: #eef6ff;
    --brand-orange: #ff8a34;
    --border: #e7ebf3;
    --muted: #6f7a90;
}

* { box-sizing: border-box; }
body { color: var(--brand-navy); background: #fff; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.app-header { background: rgba(255,255,255,.96); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30; backdrop-filter: blur(12px); }
.brand { color: var(--brand-navy); font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; }
.brand-logo { width: 38px; height: 38px; object-fit: contain; }
.specialist-auth-icon { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #edf4ff; color: var(--brand-blue); }
.specialist-auth-icon.inverse { background: rgba(255,255,255,.18); color: #fff; }

.hero-section { background: radial-gradient(circle at 15% 25%, #eef8ff 0, transparent 37%), radial-gradient(circle at 78% 50%, #fff4e8 0, transparent 32%), #fbfdff; border-bottom: 1px solid #f0f3f8; }
.py-lg-6 { padding-top: 5.5rem !important; padding-bottom: 5.5rem !important; }
.eyebrow { display: inline-flex; padding: .45rem .75rem; border-radius: 999px; background: #eef5ff; color: #2564c7; font-weight: 700; font-size: .84rem; }
.hero-copy { max-width: 760px; }
.search-shell { border: 1px solid #dfe7f2; background: #fff; border-radius: 22px; box-shadow: 0 16px 45px rgba(34, 74, 130, .10); max-width: 920px; }
.search-main { min-height: 72px; }
.search-icon { width: 52px; height: 52px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-soft); color: var(--brand-blue); font-size: 1.35rem; flex: 0 0 auto; }
.search-main .form-control { font-size: 1.08rem; min-width: 0; }
.search-main .btn { border-radius: 16px; min-height: 54px; }
.btn-primary { background: var(--brand-blue); border-color: var(--brand-blue); }
.btn-primary:hover { background: #1264da; border-color: #1264da; }
.trust-pill { display: inline-flex; align-items: center; gap: .55rem; color: #4e5f78; font-size: .94rem; }
.trust-icon { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #dde8f7; color: var(--brand-blue); }
.hero-visual { min-height: 310px; border-radius: 34px; padding: 2.2rem; background: linear-gradient(145deg, #1f72ef, #7559dc 58%, #ff914d); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; box-shadow: 0 25px 60px rgba(56,73,134,.18); }
.hero-visual-icon { width: 70px; height: 70px; border-radius: 22px; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: 2rem; margin-bottom: auto; }
.hero-visual-title { font-size: 1.55rem; font-weight: 800; }
.hero-visual-copy { color: rgba(255,255,255,.85); margin-top: .35rem; }
.section-title { font-size: 1.65rem; font-weight: 800; }
.category-card { height: 100%; border: 1px solid var(--border); border-radius: 20px; padding: 1.2rem; background: #fff; text-decoration: none; color: var(--brand-navy); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.category-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(34,74,130,.08); border-color: #cfe0fb; }
.category-icon { width: 48px; height: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; background: #f3f7ff; color: var(--brand-blue); margin-bottom: .8rem; }
.prof-card { border: 1px solid var(--border); border-radius: 20px; background: #fff; padding: 1rem; height: 100%; }
.prof-avatar { width: 72px; height: 72px; border-radius: 18px; background: linear-gradient(145deg, #dfeeff, #fff2e5); overflow: hidden; display: flex; align-items: center; justify-content: center; color: #275cae; font-weight: 800; font-size: 1.25rem; flex: 0 0 auto; }
.prof-avatar img { width: 100%; height: 100%; object-fit: cover; }
.prof-tag { display: inline-flex; align-items: center; padding: .32rem .55rem; background: #f3f6fb; color: #526077; border-radius: 999px; font-size: .78rem; }
.rating { color: #f3a80b; font-weight: 800; }
.registry-card { border: 1px solid var(--border); border-radius: 20px; padding: 1.15rem; background: #fff; }
.registry-card .prof-avatar { width: 88px; height: 88px; }
.filter-chip { border: 1px solid #dfe5ee; border-radius: 999px; background: #fff; padding: .5rem .85rem; color: #4b5870; }
.filter-chip.active { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
.panel-card { border: 1px solid var(--border); border-radius: 22px; background: #fff; box-shadow: 0 12px 32px rgba(33,62,112,.06); }
.specialist-page-icon { width: 58px; height: 58px; border-radius: 18px; background: linear-gradient(145deg, #eaf3ff, #fff2e8); color: var(--brand-blue); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }

.auth-page { background: linear-gradient(180deg, #f7fbff, #fff); min-height: 100vh; }
.auth-card { max-width: 460px; background: #fff; border: 1px solid var(--border); border-radius: 26px; padding: 2rem; box-shadow: 0 22px 60px rgba(36,65,105,.10); }
.auth-badge { display: inline-flex; align-items: center; padding: .45rem .7rem; border-radius: 999px; background: #eef5ff; color: var(--brand-blue); font-weight: 700; font-size: .86rem; }
.demo-credentials { border-top: 1px solid var(--border); padding-top: 1rem; }

.chat-shell { min-height: 620px; border: 1px solid var(--border); border-radius: 22px; display: grid; grid-template-columns: 320px 1fr; overflow: hidden; background: #fff; }
.chat-sidebar { border-right: 1px solid var(--border); background: #fbfcfe; }
.thread-item { padding: 1rem; border-bottom: 1px solid var(--border); cursor: pointer; }
.thread-item:hover, .thread-item.active { background: #eef6ff; }
.chat-main { min-width: 0; }
.chat-empty { height: 100%; min-height: 620px; display: flex; flex-direction: column; gap: .7rem; align-items: center; justify-content: center; color: #8a95a8; font-size: 1rem; }
.chat-empty i { font-size: 2rem; }
.chat-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); font-weight: 700; }
.chat-messages { padding: 1.25rem; overflow-y: auto; max-height: 500px; background: #fff; }
.message-row { display: flex; margin-bottom: .9rem; }
.message-row.mine { justify-content: flex-end; }
.message-bubble { max-width: 72%; padding: .75rem .9rem; border-radius: 16px; background: #f1f4f8; }
.message-row.mine .message-bubble { background: #e7f5ef; }
.message-meta { font-size: .72rem; color: #8c97a8; margin-top: .25rem; }
.chat-composer { display: flex; gap: .65rem; padding: 1rem; border-top: 1px solid var(--border); }

.profile-hero { display: grid; grid-template-columns: auto 1fr auto; gap: 1.4rem; align-items: start; }
.profile-avatar { width: 110px; height: 110px; border-radius: 26px; background: linear-gradient(145deg, #dfeeff, #fff1e2); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.8rem; overflow: hidden; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 767.98px) {
    .brand span { font-size: 1.05rem; }
    .brand-logo { width: 32px; height: 32px; }
    .app-header .btn span:not(.specialist-auth-icon) { font-size: .8rem; }
    .search-main { flex-wrap: wrap; }
    .search-main .form-control { width: calc(100% - 70px); }
    .search-main .btn { width: 100%; }
    .chat-shell { grid-template-columns: 1fr; }
    .chat-sidebar { max-height: 260px; overflow-y: auto; border-right: 0; border-bottom: 1px solid var(--border); }
    .chat-empty { min-height: 360px; }
    .profile-hero { grid-template-columns: 1fr; }
}