:root {
    --ink: #18202f;
    --muted: #667085;
    --line: #e5e8ef;
    --surface: #ffffff;
    --canvas: #f6f7fb;
    --purple: #5b43d6;
    --purple-dark: #4632b6;
    --purple-soft: #efedff;
    --green: #157f68;
    --green-soft: #e7f7f1;
    --gold: #a56a12;
    --gold-soft: #fff4dc;
    --danger: #b42318;
    --shadow: 0 12px 36px rgba(25, 28, 45, .07);
    --radius: 18px;
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; color: var(--ink); font-family: "DM Sans", sans-serif; background: var(--canvas); }
a { color: var(--purple); text-decoration: none; }
button, input, textarea, select { font: inherit; }
h1, h2, h3 { font-family: "Manrope", sans-serif; margin: 0; line-height: 1.2; }
p { line-height: 1.65; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 264px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 30px 20px 22px; background: #fff; border-right: 1px solid var(--line); display: flex; flex-direction: column; z-index: 20; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); font-family: "Manrope", sans-serif; font-size: 20px; font-weight: 800; }
.brand small { display: block; color: var(--muted); font: 500 10px "DM Sans", sans-serif; letter-spacing: .08em; text-transform: uppercase; margin-top: 1px; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; color: #fff; background: linear-gradient(145deg, #6d54e8, #4430af); border-radius: 12px 12px 12px 4px; }
.sidebar-nav { margin-top: 42px; display: flex; flex-direction: column; gap: 5px; }
.nav-label { padding: 0 13px 8px; color: #9aa1af; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.nav-label-spaced { margin-top: 26px; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 11px; color: #565e6d; font-size: 14px; font-weight: 600; transition: .18s ease; }
.nav-item > span { width: 20px; text-align: center; font-size: 17px; }
.nav-item:hover { color: var(--purple); background: #f7f5ff; }
.nav-item.active { color: var(--purple); background: var(--purple-soft); }
.sidebar-foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.user-chip { display: flex; align-items: center; gap: 10px; }
.user-chip > span:last-child { min-width: 0; }
.user-chip strong, .user-chip small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip strong { font-size: 13px; }
.user-chip small { color: var(--muted); font-size: 11px; margin-top: 2px; }
.avatar { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--purple); color: #fff; font-weight: 700; }
.avatar-soft { background: var(--purple-soft); color: var(--purple); }
.avatar-large { width: 54px; height: 54px; font-size: 20px; }
.avatar-xl { width: 78px; height: 78px; font-size: 29px; }
.logout-button { margin: 12px 0 0 46px; padding: 0; border: 0; background: none; color: #89909d; font-size: 12px; cursor: pointer; }
.logout-button:hover { color: var(--danger); }
.app-main { min-width: 0; }
.topbar { min-height: 100px; display: flex; align-items: center; padding: 22px clamp(24px, 4vw, 58px); background: rgba(246, 247, 251, .92); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.topbar h1 { font-size: clamp(22px, 3vw, 30px); }
.eyebrow { display: block; margin-bottom: 5px; color: var(--purple); font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.topbar-help { margin-left: auto; color: var(--muted); font-size: 13px; font-weight: 600; }
.menu-button { display: none; border: 0; background: transparent; font-size: 24px; }
.page-content { max-width: 1370px; margin: 0 auto; padding: 34px clamp(24px, 4vw, 58px) 64px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: 0 2px 4px rgba(30, 34, 50, .015); }
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.card-heading h2 { font-size: 18px; }
.card-heading p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.card-heading > a { font-size: 13px; font-weight: 700; }
.hero-card { min-height: 280px; padding: 42px 48px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); align-items: center; gap: 44px; color: #fff; background: radial-gradient(circle at 75% 30%, rgba(148, 126, 255, .48), transparent 35%), linear-gradient(125deg, #352579, #5d44d4 62%, #7058df); border-radius: 24px; overflow: hidden; box-shadow: 0 18px 48px rgba(76, 52, 182, .2); }
.hero-copy h2 { margin: 13px 0 12px; max-width: 590px; font-size: clamp(27px, 3vw, 40px); }
.hero-copy p { max-width: 610px; margin: 0 0 24px; color: rgba(255,255,255,.8); }
.pill { display: inline-block; width: fit-content; padding: 6px 9px; color: var(--purple); background: var(--purple-soft); border-radius: 6px; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.pill-light { color: #fff; background: rgba(255,255,255,.14); }
.hero-visual { position: relative; height: 180px; }
.hero-visual::before { content: "§"; position: absolute; inset: -45px 30px auto auto; color: rgba(255,255,255,.08); font: 190px "Manrope"; }
.chat-bubble { position: absolute; max-width: 270px; padding: 14px 16px; border-radius: 15px; font-size: 13px; line-height: 1.45; box-shadow: var(--shadow); }
.chat-bubble-user { top: 15px; right: 0; color: #37324e; background: #fff; border-bottom-right-radius: 4px; }
.chat-bubble-ai { top: 93px; left: 0; color: #fff; background: rgba(29, 20, 75, .86); border-bottom-left-radius: 4px; }
.chat-bubble-ai span { margin-right: 7px; color: #c6b9ff; }
.quick-grid { margin: 24px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.quick-card { padding: 20px; display: flex; align-items: center; gap: 13px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 15px; transition: .18s ease; }
.quick-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: #d8d2ff; }
.quick-card > span:nth-child(2) { min-width: 0; }
.quick-card strong, .quick-card small { display: block; }
.quick-card strong { font-size: 14px; }
.quick-card small { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.quick-card > b { margin-left: auto; color: #9ba2af; }
.quick-icon { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; font-size: 18px; }
.quick-icon.purple { color: var(--purple); background: var(--purple-soft); }
.quick-icon.green { color: var(--green); background: var(--green-soft); }
.quick-icon.gold { color: var(--gold); background: var(--gold-soft); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(270px, .7fr); gap: 22px; }
.item-list { display: flex; flex-direction: column; }
.list-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; padding: 14px 0; color: var(--ink); border-top: 1px solid #eef0f4; }
.list-item:first-child { border-top: 0; }
.list-item-roomy { padding: 19px 4px; }
.list-item strong, .list-item small { display: block; }
.list-item strong { font-size: 14px; }
.list-item small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.list-icon { width: 38px; height: 38px; display: grid; place-items: center; color: var(--purple); background: var(--purple-soft); border-radius: 10px; }
.status-chip { width: fit-content; padding: 5px 9px; color: var(--purple); background: var(--purple-soft); border-radius: 999px; font-size: 10px; font-weight: 700; }
.status-completed, .status-approved, .status-accepted { color: var(--green); background: var(--green-soft); }
.status-cancelled, .status-rejected { color: var(--danger); background: #feeceb; }
.status-pending, .status-contacted { color: var(--gold); background: var(--gold-soft); }
.area-list { display: flex; flex-direction: column; }
.area-list a { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; padding: 10px 0; color: #3f4652; border-top: 1px solid #f0f1f4; font-size: 13px; font-weight: 600; }
.area-list a:first-child { border-top: 0; }
.area-list a span { width: 27px; height: 27px; display: grid; place-items: center; color: var(--purple); background: var(--purple-soft); border-radius: 8px; }
.area-list a b { color: #afb4be; font-size: 18px; }
.empty-state { min-height: 230px; padding: 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--muted); }
.empty-state > span { width: 48px; height: 48px; display: grid; place-items: center; color: var(--purple); background: var(--purple-soft); border-radius: 14px; font-size: 21px; }
.empty-state h3 { margin-top: 14px; color: var(--ink); font-size: 16px; }
.empty-state p { max-width: 390px; margin: 7px 0 16px; font-size: 13px; }
.empty-wide { grid-column: 1 / -1; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }

.status-banner { margin-bottom: 22px; padding: 19px 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--gold-soft); border: 1px solid #f0d9a5; border-radius: 15px; }
.status-banner > div { position: relative; padding-left: 19px; }
.status-banner strong { font-size: 14px; }
.status-banner p { margin: 3px 0 0; color: #77531d; font-size: 12px; }
.status-dot { position: absolute; left: 0; top: 5px; width: 8px; height: 8px; background: #d08a1d; border-radius: 50%; }
.status-banner.status-approved { background: var(--green-soft); border-color: #bde4d8; }
.status-banner.status-approved p { color: #276b5b; }
.status-banner.status-approved .status-dot { background: var(--green); }
.status-banner.status-rejected { background: #fff0ef; border-color: #f3c8c4; }
.status-tag { white-space: nowrap; font-size: 11px; font-weight: 700; }
.stats-grid { margin-bottom: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.stat-card { padding: 21px; background: #fff; border: 1px solid var(--line); border-radius: 15px; }
.stat-card span, .stat-card small { display: block; color: var(--muted); font-size: 11px; }
.stat-card strong { display: block; margin: 10px 0 5px; font: 800 30px "Manrope"; }
.stat-card .stat-word { font-size: 18px; }

.search-bar { margin-bottom: 24px; padding: 14px; display: grid; grid-template-columns: 1fr 250px auto; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 15px; }
.search-bar input, .search-bar select { width: 100%; padding: 11px 13px; color: var(--ink); background: #fafbfc; border: 1px solid var(--line); border-radius: 10px; outline: none; }
.lawyer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.lawyer-card { padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.lawyer-card-head { display: flex; justify-content: space-between; align-items: flex-start; }
.verified { display: inline-block; color: var(--green); font-size: 10px; font-weight: 700; }
.lawyer-card h2 { margin: 15px 0 4px; font-size: 18px; }
.lawyer-location { margin: 0 0 14px; color: var(--muted); font-size: 11px; }
.tag-list { display: flex; gap: 6px; flex-wrap: wrap; }
.tag-list span { padding: 5px 8px; color: #51478d; background: #f3f1ff; border-radius: 6px; font-size: 10px; font-weight: 600; }
.lawyer-bio { min-height: 64px; color: var(--muted); font-size: 12px; }
.lawyer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 17px; }
.profile-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .6fr); align-items: start; gap: 22px; }
.profile-header { display: flex; align-items: center; gap: 18px; }
.profile-header h2 { margin: 7px 0 3px; font-size: 25px; }
.profile-header p { margin: 0; color: var(--muted); font-size: 13px; }
.profile-main hr { margin: 24px 0; border: 0; border-top: 1px solid var(--line); }
.profile-main h3 { margin: 24px 0 8px; font-size: 14px; }
.prose { color: #555d6b; font-size: 14px; line-height: 1.8; }
.modality-list { display: flex; gap: 18px; color: var(--green); font-size: 12px; font-weight: 600; }
.sticky-card { position: sticky; top: 24px; }
.sticky-card h2 { margin: 13px 0 8px; font-size: 20px; }
.sticky-card p { color: var(--muted); font-size: 13px; }
.privacy-note { display: block; margin-top: 14px; color: var(--muted); font-size: 10px; line-height: 1.5; }

.page-actions { margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.page-actions p { margin: 0; color: var(--muted); font-size: 13px; }
.content-grid-narrow { max-width: 820px; }
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.side-guide h3 { font-size: 16px; }
.side-guide ul { padding-left: 19px; color: var(--muted); font-size: 12px; line-height: 2; }
.stack-form { display: flex; flex-direction: column; gap: 17px; }
.two-column-form { display: grid; grid-template-columns: 1fr 1fr; }
.span-2 { grid-column: 1 / -1; }
.form-row label { display: block; margin-bottom: 7px; color: #404754; font-size: 12px; font-weight: 700; }
.form-control, .form-row input:not([type=checkbox]), .form-row textarea, .form-row select { width: 100%; padding: 12px 13px; color: var(--ink); background: #fff; border: 1px solid #d9dde5; border-radius: 10px; outline: none; transition: .15s ease; }
.form-row textarea { resize: vertical; }
.form-row input:focus, .form-row textarea:focus, .form-row select:focus { border-color: #8675e7; box-shadow: 0 0 0 3px rgba(91, 67, 214, .1); }
.form-row ul { margin: 8px 0 0; padding: 0; list-style: none; }
.form-row ul.errorlist, .errorlist { color: var(--danger); font-size: 11px; }
.form-row ul[id$="specialties"] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.form-row ul[id$="specialties"] label { padding: 10px; background: #fafafa; border: 1px solid var(--line); border-radius: 9px; font-weight: 500; }
.form-row input[type=checkbox] { margin-right: 7px; accent-color: var(--purple); }
.help-text { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.help-text ul { padding-left: 16px; }
.form-actions { display: flex; gap: 8px; margin-top: 5px; }
.info-box { padding: 12px 14px; color: #675d35; background: #fff9e9; border: 1px solid #f2e4b8; border-radius: 10px; font-size: 11px; }
.request-meta { margin-bottom: 22px; display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 11px; }
.detail-grid { margin-top: 25px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.detail-grid > div { padding: 14px; background: #fafbfc; border-radius: 10px; }
.detail-grid small, .detail-grid strong { display: block; }
.detail-grid small { color: var(--muted); font-size: 10px; }
.detail-grid strong { margin-top: 4px; font-size: 13px; }

.chat-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 22px; align-items: start; }
.chat-column { min-width: 0; }
.chat-panel { min-height: 650px; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 16px 45px rgba(37, 28, 83, .06); overflow: hidden; }
.chat-header { min-height: 74px; padding: 14px 19px; display: flex; align-items: center; gap: 11px; color: #fff; background: linear-gradient(125deg, #251852, #4e36b8); }
.chat-assistant-avatar { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; color: #4d35b6; background: #fff; border-radius: 13px; box-shadow: 0 7px 20px rgba(0,0,0,.14); font-size: 18px; }
.chat-header h2, .chat-header p { margin: 0; }
.chat-header h2 { font-size: 14px; }
.chat-header p { margin-top: 3px; display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.7); font-size: 9px; }
.chat-status-dot { width: 7px; height: 7px; background: #54d6a5; border: 2px solid rgba(255,255,255,.2); border-radius: 50%; }
.chat-status-dot.is-offline { background: #d9b76d; }
.chat-area { margin-left: auto; padding: 6px 9px; color: rgba(255,255,255,.85); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; font-size: 9px; }
.chat-context-note { padding: 11px 18px; display: flex; align-items: flex-start; gap: 9px; color: #5e5682; background: #f7f5ff; border-bottom: 1px solid #e8e4fa; }
.chat-context-note span { color: var(--purple); font-size: 13px; }
.chat-context-note p { margin: 0; font-size: 10px; line-height: 1.5; }
.message-list { min-height: 340px; max-height: 560px; flex: 1; padding: 26px; display: flex; flex-direction: column; gap: 22px; overflow-y: auto; scroll-behavior: smooth; }
.message { max-width: 78%; display: flex; gap: 10px; }
.message-client { align-self: flex-end; flex-direction: row-reverse; }
.message-avatar { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; color: #fff; background: var(--purple); border-radius: 50%; font-size: 11px; font-weight: 700; }
.message > div { padding: 12px 14px; background: #f5f6f8; border-radius: 4px 14px 14px 14px; }
.message-client > div { color: #fff; background: var(--purple); border-radius: 14px 4px 14px 14px; }
.message-assistant .message-avatar { color: var(--purple); background: var(--purple-soft); }
.message-assistant > div { background: #f3f1fc; border: 1px solid #e6e1fb; }
.message strong { font-size: 10px; opacity: .7; }
.message p { margin: 5px 0; font-size: 13px; line-height: 1.6; }
.message small { display: block; text-align: right; font-size: 9px; opacity: .55; }
.message-system { align-self: center; max-width: 88%; text-align: center; }
.message-system .message-avatar { background: #89909d; }
.chat-suggestions { padding: 0 18px 10px; display: flex; flex-wrap: wrap; gap: 7px; }
.chat-suggestions button { padding: 7px 10px; color: #62589a; background: #faf9ff; border: 1px solid #ded9f5; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 9px; font-weight: 600; }
.chat-suggestions button:hover { color: var(--purple); background: var(--purple-soft); border-color: #c9c0f5; }
.chat-composer { margin: 0 18px; padding: 7px 7px 7px 11px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 9px; background: #fff; border: 1px solid #d9dbe2; border-radius: 14px; box-shadow: 0 5px 18px rgba(38,32,69,.05); }
.chat-composer:focus-within { border-color: #9687e8; box-shadow: 0 0 0 3px rgba(99,75,211,.09); }
.chat-composer textarea { width: 100%; max-height: 130px; padding: 9px 4px; border: 0; background: transparent; resize: none; outline: none; font: inherit; }
.chat-send { min-width: 78px; min-height: 39px; padding: 8px 11px; color: #fff; background: var(--purple); border: 0; border-radius: 10px; cursor: pointer; font-size: 10px; font-weight: 700; }
.chat-send:hover { background: var(--purple-dark); }
.composer-help { padding: 9px 22px 17px; color: #9298a4; font-size: 9px; text-align: center; }
.chat-form-errors { padding: 8px 22px 0; color: var(--danger); font-size: 10px; }
.chat-form-errors ul { margin: 0; padding: 0; list-style: none; }
.ai-disclaimer { margin-top: 11px; padding: 12px 15px; display: flex; align-items: flex-start; gap: 9px; color: #6f7480; background: #f8f9fb; border: 1px solid #e3e5e9; border-radius: 12px; }
.ai-disclaimer > span { color: var(--purple); }
.ai-disclaimer p { margin: 0; font-size: 9px; line-height: 1.55; }
.ai-disclaimer strong { color: #505560; }
.chat-side h2 { margin: 12px 0 8px; font-size: 18px; }
.chat-side p { color: var(--muted); font-size: 12px; }
.chat-side-list { margin: 19px 0 22px; padding: 0; display: flex; flex-direction: column; gap: 10px; list-style: none; color: #555d68; font-size: 10px; }
.chat-side-list span { width: 19px; height: 19px; margin-right: 7px; display: inline-grid; place-items: center; color: var(--green); background: var(--green-soft); border-radius: 50%; font-size: 8px; }
.chat-side-link { margin-top: 13px; display: block; color: var(--purple); text-align: center; font-size: 10px; font-weight: 700; }

/* Minimal AI conversation */
.ai-chat-shell { width: min(100%, 960px); min-height: calc(100vh - 150px); margin: -24px auto -32px; display: flex; flex-direction: column; background: #f8f8ff; overflow: hidden; }
.ai-chat-thread { width: 100%; min-width: 0; min-height: 470px; max-height: calc(100vh - 285px); padding: 30px 44px 40px; display: flex; flex: 1; flex-direction: column; gap: 30px; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; }
.ai-chat-thread::-webkit-scrollbar { width: 0; height: 0; display: none; }
.ai-intro-note { max-width: 520px; margin: 0 auto 8px; color: #4f5361; font-size: 11px; line-height: 2; text-align: center; }
.ai-user-row { width: 100%; min-width: 0; align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; }
.ai-user-message { width: fit-content; max-width: min(72%, 620px); padding: 12px 20px; color: #333745; background: #e8e7fb; border-radius: 23px; box-sizing: border-box; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; word-break: break-word; white-space: normal; }
.ai-response { width: min(100%, 700px); min-width: 0; display: flex; flex-direction: column; align-items: flex-start; color: #424753; font-size: 14px; font-weight: 500; line-height: 1.6; }
.ai-response-copy { width: 100%; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; white-space: normal; }
.ai-message-time { margin-top: 8px; padding-inline: 2px; color: #b2b5c7; font-size: 9px; font-weight: 500; line-height: 1; }
.ai-chat-dock { position: sticky; bottom: 0; z-index: 2; margin-top: auto; padding: 12px 34px 17px; background: linear-gradient(to bottom, rgba(248,248,255,.2), #f8f8ff 25%); }
.ai-warning { margin: 0 0 14px; color: #7f828e; text-align: center; font-size: 10px; }
.ai-warning span { display: none; }
.ai-quota { margin: -7px 0 9px; color: #858991; text-align: center; font-size: 9px; }
.ai-quota strong { color: #6256b5; }
.ai-quota.is-exhausted, .ai-quota.is-exhausted strong { color: #a45852; }
.ai-composer { width: 100%; min-height: 51px; padding: 6px 7px 6px 20px; display: flex; align-items: center; gap: 10px; background: #fff; border: 0; border-radius: 28px; box-shadow: 0 5px 22px rgba(58, 54, 100, .08); }
.ai-composer.is-disabled { opacity: .72; }
.ai-composer:focus-within { box-shadow: 0 7px 28px rgba(67, 50, 150, .13), 0 0 0 2px rgba(99, 75, 211, .06); }
.ai-composer textarea { width: 100%; min-width: 0; height: 24px; min-height: 24px; max-height: 120px; margin: 0; padding: 2px 0; flex: 1; align-self: center; color: #4d5260; background: transparent; border: 0; outline: 0; resize: none; box-sizing: border-box; font-family: inherit; font-size: 13px; line-height: 20px; }
.ai-composer textarea { scrollbar-width: none; -ms-overflow-style: none; }
.ai-composer textarea::-webkit-scrollbar { width: 0; height: 0; display: none; }
.ai-composer textarea::placeholder { color: #8f929d; }
.ai-send { width: 36px; height: 36px; flex: 0 0 36px; align-self: center; padding: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: #382bc8; border: 0; border-radius: 50%; cursor: pointer; }
.ai-send svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.ai-send:hover { background: #2c20ad; }
.ai-send:disabled { cursor: not-allowed; opacity: .45; }

.btn { min-height: 42px; padding: 10px 15px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid transparent; border-radius: 10px; cursor: pointer; font-size: 12px; font-weight: 700; transition: .16s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { color: #fff; background: var(--purple); }
.btn-primary:hover { background: var(--purple-dark); }
.btn-light { color: var(--purple); background: #fff; }
.btn-outline { color: var(--purple); background: transparent; border-color: #cfc8f5; }
.btn-ghost { color: var(--muted); background: transparent; }
.btn-danger { color: #fff; background: var(--danger); }
.btn-block { width: 100%; }
.btn-small { min-height: 34px; padding: 7px 11px; font-size: 11px; }
.muted { color: var(--muted); }
.message-stack { margin-bottom: 18px; display: flex; flex-direction: column; gap: 8px; }
.alert { padding: 12px 14px; color: #4a3fa0; background: var(--purple-soft); border-radius: 10px; font-size: 12px; }
.alert-success { color: #176451; background: var(--green-soft); }
.alert-error { color: var(--danger); background: #feeceb; }

.auth-body { min-height: 100vh; background: #fff; }
.auth-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, .82fr) minmax(560px, 1.18fr); }
.auth-brand-panel { min-height: 100vh; padding: 42px clamp(36px, 5vw, 72px); display: flex; flex-direction: column; color: #fff; background: radial-gradient(circle at 20% 75%, rgba(124, 101, 237, .35), transparent 29%), linear-gradient(150deg, #241754, #3f2a91 60%, #5038b2); }
.brand-light { color: #fff; }
.brand-light small { color: rgba(255,255,255,.55); }
.auth-promise { margin: auto 0; max-width: 510px; }
.auth-promise h1 { margin: 19px 0 14px; font-size: clamp(34px, 4vw, 54px); line-height: 1.1; letter-spacing: -.035em; }
.auth-promise p { max-width: 450px; color: rgba(255,255,255,.7); font-size: 16px; }
.trust-row { display: flex; gap: 24px; color: rgba(255,255,255,.65); font-size: 11px; }
.auth-form-panel { padding: 50px 7vw; display: flex; align-items: center; justify-content: center; overflow-y: auto; }
.auth-card { width: 100%; max-width: 560px; }
.auth-heading { margin-bottom: 28px; }
.auth-heading h2 { margin: 12px 0 7px; font-size: 29px; }
.auth-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.label-between { display: flex; justify-content: space-between; align-items: center; }
.label-between a { font-size: 11px; font-weight: 600; }
.form-error { padding: 10px; color: var(--danger); background: #fff0ef; border-radius: 8px; font-size: 11px; }
.auth-divider { margin: 24px 0; display: flex; align-items: center; gap: 12px; color: #9ba1ac; font-size: 10px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.auth-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: 12px; }
.auth-actions .btn { width: 100%; }
.auth-switch { margin-top: 22px; color: var(--muted); text-align: center; font-size: 12px; }

@media (max-width: 1100px) {
    .lawyer-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-card { grid-template-columns: 1fr .65fr; padding: 36px; }
    .quick-grid { grid-template-columns: 1fr; }
    .quick-card { padding: 15px 18px; }
}

@media (max-width: 820px) {
    .app-shell { display: block; }
    .sidebar { position: fixed; left: -280px; transition: left .2s ease; box-shadow: var(--shadow); }
    .sidebar.is-open { left: 0; }
    .menu-button { display: block; margin-right: 15px; }
    .topbar { min-height: 82px; padding: 16px 20px; }
    .topbar-help { display: none; }
    .page-content { padding: 22px 18px 48px; }
    .hero-card { grid-template-columns: 1fr; padding: 30px 25px; }
    .hero-visual { display: none; }
    .dashboard-grid, .profile-layout, .form-layout, .chat-layout { grid-template-columns: 1fr; }
    .sticky-card { position: static; }
    .stats-grid { grid-template-columns: 1fr; }
    .auth-layout { display: block; }
    .auth-brand-panel { min-height: auto; padding: 24px; }
    .auth-promise, .trust-row { display: none; }
    .auth-form-panel { padding: 38px 22px; }
}

@media (max-width: 580px) {
    .lawyer-grid { grid-template-columns: 1fr; }
    .search-bar { grid-template-columns: 1fr; }
    .two-column-form { grid-template-columns: 1fr; }
    .span-2 { grid-column: auto; }
    .status-banner, .page-actions { align-items: flex-start; flex-direction: column; }
    .status-tag { white-space: normal; }
    .list-item { grid-template-columns: auto 1fr; }
    .list-item .status-chip { grid-column: 2; }
    .detail-grid { grid-template-columns: 1fr; }
    .chat-header { padding: 13px 14px; }
    .chat-area { display: none; }
    .message-list { min-height: 320px; padding: 20px 14px; }
    .message { max-width: 92%; }
    .chat-suggestions { padding-inline: 13px; flex-wrap: nowrap; overflow-x: auto; }
    .chat-suggestions button { flex: 0 0 auto; }
    .chat-composer { margin-inline: 12px; }
    .chat-send { min-width: 44px; }
    .chat-send span { display: none; }
    .ai-chat-shell { min-height: calc(100vh - 150px); margin: -20px -16px -24px; border: 0; border-radius: 0; box-shadow: none; }
    .ai-chat-thread { min-height: 430px; max-height: none; padding: 22px 16px 28px; gap: 16px; }
    .ai-user-message { max-width: 86%; padding: 12px 16px; font-size: 13px; }
    .ai-response { font-size: 13px; }
    .ai-chat-dock { padding: 10px 12px 13px; }
    .ai-warning { padding-inline: 10px; font-size: 9px; line-height: 1.45; }
    .ai-composer { min-height: 46px; padding: 5px 6px 5px 8px; }
    .ai-attach { width: 30px; height: 30px; }
    .ai-mode { display: none; }
    .ai-send { width: 34px; height: 34px; }
    .ai-chat-foot { justify-content: center; text-align: center; }
    .ai-chat-foot > span { display: none; }
    .form-row ul[id$="specialties"] { grid-template-columns: 1fr; }
    .message { max-width: 92%; }
}

/* Public landing page */
.landing-body { background: #fff; overflow-x: hidden; }
.landing-container { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }
.landing-header { position: absolute; inset: 0 0 auto; z-index: 10; }
.landing-nav { min-height: 88px; display: flex; align-items: center; }
.landing-nav nav { margin-left: auto; display: flex; gap: 31px; }
.landing-nav nav a { color: #535a68; font-size: 13px; font-weight: 600; }
.landing-nav nav a:hover { color: var(--purple); }
.landing-nav-actions { margin-left: 35px; display: flex; align-items: center; gap: 5px; }
.landing-mobile-login { display: none; margin-left: auto; font-size: 13px; font-weight: 700; }
.landing-hero { min-height: 760px; display: flex; align-items: center; padding: 135px 0 75px; background: radial-gradient(circle at 8% 85%, rgba(91,67,214,.08), transparent 25%), linear-gradient(180deg, #fbfaff, #fff); }
.landing-hero-grid { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(440px, .97fr); gap: 68px; align-items: center; }
.landing-hero-copy, .landing-hero-art { min-width: 0; }
.landing-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--purple); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.landing-kicker i { width: 7px; height: 7px; background: var(--purple); border-radius: 50%; box-shadow: 0 0 0 5px var(--purple-soft); }
.landing-hero-copy h1 { margin: 19px 0 22px; font-size: clamp(46px, 5.4vw, 72px); line-height: 1.04; letter-spacing: -.055em; }
.landing-hero-copy h1 em { color: var(--purple); font-style: normal; }
.landing-hero-copy > p { max-width: 620px; margin: 0; color: #616977; font-size: 17px; line-height: 1.75; }
.landing-hero-actions { margin-top: 30px; display: flex; align-items: center; gap: 27px; }
.landing-btn { min-height: 52px; padding-inline: 22px; font-size: 13px; box-shadow: 0 11px 25px rgba(91,67,214,.22); }
.landing-text-link { color: var(--ink); font-size: 13px; font-weight: 700; }
.landing-text-link span { color: var(--purple); }
.landing-assurances { margin-top: 27px; display: flex; gap: 19px; color: #7a818e; font-size: 10px; }
.landing-assurances span::first-letter { color: var(--green); }
.landing-hero-art { position: relative; min-height: 500px; display: grid; place-items: center; }
.landing-glow { position: absolute; width: 440px; height: 440px; background: radial-gradient(circle, rgba(115,88,235,.25), rgba(115,88,235,0) 66%); }
.landing-hero-art::before, .landing-hero-art::after { content: ""; position: absolute; border: 1px solid rgba(91,67,214,.09); border-radius: 50%; }
.landing-hero-art::before { width: 490px; height: 490px; }
.landing-hero-art::after { width: 390px; height: 390px; }
.landing-chat-window { position: relative; z-index: 2; width: min(440px, 100%); background: #fff; border: 1px solid #e4e0f5; border-radius: 22px; box-shadow: 0 32px 80px rgba(44,31,102,.16); overflow: hidden; transform: rotate(1.2deg); }
.landing-window-head { min-height: 67px; padding: 13px 17px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eceaf3; }
.landing-window-head > div { display: flex; align-items: center; gap: 9px; }
.landing-window-head strong, .landing-window-head small { display: block; }
.landing-window-head strong { font-size: 11px; }
.landing-window-head small { margin-top: 2px; color: var(--green); font-size: 8px; }
.landing-window-head > b { color: #a5a8b0; letter-spacing: 2px; }
.mini-brand { width: 35px; height: 35px; display: grid; place-items: center; color: #fff; background: var(--purple); border-radius: 10px; font-weight: 800; }
.landing-chat-body { min-height: 300px; padding: 24px 20px; display: flex; flex-direction: column; gap: 15px; background: #fbfbfd; }
.landing-message { max-width: 82%; display: flex; align-items: flex-start; gap: 8px; }
.landing-message > span { width: 25px; height: 25px; flex: 0 0 auto; display: grid; place-items: center; color: var(--purple); background: var(--purple-soft); border-radius: 8px; font-size: 11px; }
.landing-message p { margin: 0; padding: 10px 12px; color: #515866; background: #fff; border: 1px solid #eceaf2; border-radius: 4px 13px 13px 13px; font-size: 11px; line-height: 1.55; }
.landing-message.person { margin-left: auto; }
.landing-message.person p { color: #fff; background: var(--purple); border-color: var(--purple); border-radius: 13px 4px 13px 13px; }
.landing-chat-input { margin: 12px; padding: 8px 8px 8px 13px; display: flex; align-items: center; color: #a1a5ae; background: #fff; border: 1px solid #e2e2e8; border-radius: 11px; font-size: 10px; }
.landing-chat-input b { width: 30px; height: 30px; margin-left: auto; display: grid; place-items: center; color: #fff; background: var(--purple); border-radius: 8px; font-size: 15px; }
.landing-float-card { position: absolute; z-index: 3; right: -17px; bottom: 20px; width: 270px; padding: 13px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; background: #fff; border: 1px solid #e2deef; border-radius: 14px; box-shadow: 0 15px 38px rgba(41,29,92,.15); }
.landing-float-card > span { width: 37px; height: 37px; display: grid; place-items: center; color: var(--green); background: var(--green-soft); border-radius: 10px; }
.landing-float-card strong, .landing-float-card small { display: block; }
.landing-float-card strong { font-size: 10px; }
.landing-float-card small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.landing-float-card > b { color: var(--purple); }
.landing-trust { padding: 25px 0; border-block: 1px solid #ededf2; background: #fff; }
.landing-trust .landing-container { display: flex; align-items: center; gap: 45px; }
.landing-trust p { max-width: 150px; margin: 0; color: #a0a5af; font-size: 8px; font-weight: 800; line-height: 1.4; letter-spacing: .13em; }
.landing-trust .landing-container > div { flex: 1; display: flex; justify-content: space-between; }
.landing-trust span { color: #606774; font-size: 11px; font-weight: 600; }
.landing-trust b { margin-right: 6px; color: var(--purple); }
.landing-section { padding: 105px 0; }
.landing-section-soft { background: #f7f7fb; }
.landing-section-head { max-width: 720px; margin: 0 auto 57px; text-align: center; }
.landing-section-head h2, .landing-split-head h2, .landing-audience-copy h2 { margin: 15px 0 12px; font-size: clamp(31px, 4vw, 45px); letter-spacing: -.035em; }
.landing-section-head p, .landing-split-head p, .landing-audience-copy > p { margin: 0; color: var(--muted); font-size: 14px; }
.landing-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.landing-steps article { position: relative; padding: 27px; border: 1px solid var(--line); border-radius: 17px; }
.step-number { position: absolute; right: 22px; top: 20px; color: #e0e1e6; font: 800 24px "Manrope"; }
.landing-step-icon { width: 47px; height: 47px; display: grid; place-items: center; border-radius: 13px; font-size: 19px; }
.landing-step-icon.purple { color: var(--purple); background: var(--purple-soft); }
.landing-step-icon.green { color: var(--green); background: var(--green-soft); }
.landing-step-icon.gold { color: var(--gold); background: var(--gold-soft); }
.landing-steps h3 { margin: 23px 0 8px; font-size: 17px; }
.landing-steps p { margin: 0; color: var(--muted); font-size: 12px; }
.landing-split-head { margin-bottom: 41px; display: grid; grid-template-columns: 1.1fr .65fr; align-items: end; gap: 70px; }
.landing-split-head p { padding-bottom: 6px; }
.landing-areas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.landing-areas a { min-height: 150px; padding: 20px; display: grid; grid-template-columns: auto 1fr auto; align-content: start; gap: 11px; color: var(--ink); background: #fff; border: 1px solid #e5e6eb; border-radius: 14px; transition: .18s ease; }
.landing-areas a:hover { transform: translateY(-3px); border-color: #cdc5f5; box-shadow: var(--shadow); }
.landing-areas a > span { width: 31px; height: 31px; display: grid; place-items: center; color: var(--purple); background: var(--purple-soft); border-radius: 9px; }
.landing-areas strong, .landing-areas small { display: block; }
.landing-areas strong { margin-top: 5px; font-size: 13px; }
.landing-areas small { grid-column: 1 / -1; margin-top: 12px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.landing-areas b { margin-top: 7px; color: #b2b5bd; }
.landing-audience-grid { display: grid; grid-template-columns: .78fr 1.22fr; align-items: center; gap: 75px; }
.landing-audience-copy ul { margin: 29px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; list-style: none; color: #525967; font-size: 12px; }
.landing-audience-copy li span { width: 22px; height: 22px; margin-right: 8px; display: inline-grid; place-items: center; color: var(--green); background: var(--green-soft); border-radius: 50%; font-size: 9px; }
.audience-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.audience-card { min-height: 380px; padding: 29px; display: flex; flex-direction: column; border-radius: 20px; }
.audience-card.client { color: #fff; background: linear-gradient(150deg, #2d1e6d, #6045d5); }
.audience-card.lawyer { color: var(--ink); background: #f2f0fc; border: 1px solid #dfdaf6; }
.audience-icon { width: 49px; height: 49px; display: grid; place-items: center; background: rgba(255,255,255,.14); border-radius: 14px; font-size: 20px; }
.audience-card.lawyer .audience-icon { color: var(--purple); background: #fff; }
.audience-label { margin-top: 34px; font-size: 8px; font-weight: 800; letter-spacing: .14em; opacity: .64; }
.audience-card h3 { margin: 10px 0; font-size: 21px; }
.audience-card p { margin: 0; color: inherit; font-size: 12px; opacity: .72; }
.audience-card a { margin-top: auto; color: inherit; font-size: 12px; font-weight: 700; }
.audience-card.client a span { color: #c6bbff; }
.audience-card.lawyer a { color: var(--purple); }
.landing-safety { padding: 82px 0; color: #fff; background: #21174b; }
.landing-safety-grid { display: grid; grid-template-columns: 150px 1fr .75fr; align-items: center; gap: 55px; }
.safety-seal { position: relative; width: 130px; height: 130px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; }
.safety-seal::before, .safety-seal::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.1); }
.safety-seal::before { inset: 12px; }
.safety-seal::after { inset: 25px; }
.safety-seal span { width: 55px; height: 55px; display: grid; place-items: center; color: #fff; background: var(--purple); border-radius: 50%; font-size: 21px; }
.landing-safety h2 { margin: 15px 0 10px; max-width: 600px; font-size: clamp(29px, 4vw, 42px); }
.landing-safety p { margin: 0; color: rgba(255,255,255,.6); font-size: 13px; }
.safety-points { display: flex; flex-direction: column; gap: 0; border-top: 1px solid rgba(255,255,255,.12); }
.safety-points span { padding: 14px 0; color: rgba(255,255,255,.76); border-bottom: 1px solid rgba(255,255,255,.12); font-size: 11px; }
.safety-points b { margin-right: 12px; color: #9d8bf3; font-size: 9px; }
.landing-final-cta { padding: 85px 0; }
.landing-final-cta .landing-container { padding: 48px 55px; display: flex; align-items: center; justify-content: space-between; gap: 45px; background: #f4f2ff; border: 1px solid #e0dcf8; border-radius: 22px; }
.landing-final-cta h2 { margin: 14px 0 7px; font-size: clamp(27px, 3vw, 38px); }
.landing-final-cta p { margin: 0; color: var(--muted); font-size: 13px; }
.landing-footer { padding: 54px 0 25px; color: #fff; background: #17132c; }
.landing-footer .landing-container { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 34px; }
.landing-footer p { color: rgba(255,255,255,.45); font-size: 11px; }
.landing-footer .landing-container > div { display: flex; gap: 22px; }
.landing-footer .landing-container > div a { color: rgba(255,255,255,.7); font-size: 11px; }
.landing-footer .landing-container > small { grid-column: 1 / -1; padding-top: 24px; color: rgba(255,255,255,.3); border-top: 1px solid rgba(255,255,255,.08); font-size: 9px; }

@media (max-width: 980px) {
    .landing-nav nav { display: none; }
    .landing-hero-grid { grid-template-columns: 1fr 420px; gap: 30px; }
    .landing-hero-copy h1 { font-size: 48px; }
    .landing-trust .landing-container > div { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .landing-areas { grid-template-columns: repeat(2, 1fr); }
    .landing-audience-grid { grid-template-columns: 1fr; gap: 45px; }
    .landing-safety-grid { grid-template-columns: 110px 1fr; }
    .safety-points { grid-column: 2; }
}

@media (max-width: 760px) {
    .landing-container { width: min(100% - 32px, 600px); }
    .landing-nav { min-height: 74px; }
    .landing-nav-actions { display: none; }
    .landing-mobile-login { display: block; }
    .landing-hero { min-height: auto; padding: 118px 0 70px; }
    .landing-hero-grid { grid-template-columns: 1fr; }
    .landing-hero-copy, .landing-hero-art { width: 100%; }
    .landing-hero-copy { text-align: center; }
    .landing-kicker { justify-content: center; }
    .landing-hero-copy h1 { font-size: clamp(38px, 12vw, 55px); }
    .landing-hero-copy h1 em { display: block; max-width: 100%; overflow-wrap: anywhere; }
    .landing-hero-copy > p { font-size: 14px; }
    .landing-hero-actions, .landing-assurances { justify-content: center; }
    .landing-hero-art { min-height: 480px; margin-top: 18px; overflow: hidden; }
    .landing-glow { width: 100%; height: auto; aspect-ratio: 1; }
    .landing-hero-art::before { width: 120%; height: auto; aspect-ratio: 1; }
    .landing-hero-art::after { width: 105%; height: auto; aspect-ratio: 1; }
    .landing-chat-window { width: calc(100% - 18px); max-width: 420px; }
    .landing-float-card { right: 0; }
    .landing-trust .landing-container { align-items: flex-start; flex-direction: column; gap: 20px; }
    .landing-trust p { max-width: none; }
    .landing-trust .landing-container > div { width: 100%; }
    .landing-section { padding: 75px 0; }
    .landing-steps { grid-template-columns: 1fr; }
    .landing-split-head { grid-template-columns: 1fr; gap: 12px; }
    .landing-split-head h2 { font-size: 34px; }
    .audience-cards { grid-template-columns: 1fr; }
    .audience-card { min-height: 330px; }
    .landing-safety-grid { grid-template-columns: 1fr; text-align: center; }
    .safety-seal { margin: 0 auto; }
    .safety-points { grid-column: auto; text-align: left; }
    .landing-final-cta .landing-container { padding: 38px 26px; align-items: flex-start; flex-direction: column; }
    .landing-footer .landing-container { grid-template-columns: 1fr; }
    .landing-footer .landing-container > small { grid-column: auto; }
}

@media (max-width: 470px) {
    .landing-hero-copy h1 br { display: none; }
    .landing-hero-actions { align-items: stretch; flex-direction: column; gap: 17px; }
    .landing-assurances { flex-wrap: wrap; gap: 9px 14px; }
    .landing-hero-art { min-height: 420px; }
    .landing-chat-window { transform: none; }
    .landing-float-card { bottom: -5px; width: 250px; }
    .landing-trust .landing-container > div { grid-template-columns: 1fr; }
    .landing-areas { grid-template-columns: 1fr; }
    .landing-areas a { min-height: 130px; }
    .landing-footer .landing-container > div { align-items: flex-start; flex-direction: column; gap: 10px; }
}

/* Superadmin workspace */
.admin-welcome { margin-bottom: 22px; padding: 30px 34px; display: flex; align-items: center; justify-content: space-between; gap: 30px; color: #fff; background: radial-gradient(circle at 85% 20%, rgba(130,106,242,.4), transparent 30%), linear-gradient(125deg, #21164e, #4d35b6); border-radius: 20px; }
.admin-welcome h2 { margin: 12px 0 5px; font-size: 25px; }
.admin-welcome p { margin: 0; color: rgba(255,255,255,.65); font-size: 12px; }
.admin-stats { margin-bottom: 22px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.admin-stats article { padding: 18px; display: flex; align-items: center; gap: 13px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.admin-stats article.attention { border-color: #ebd19a; background: #fffcf4; }
.admin-stat-icon { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; font-size: 17px; }
.admin-stat-icon.purple { color: var(--purple); background: var(--purple-soft); }
.admin-stat-icon.green { color: var(--green); background: var(--green-soft); }
.admin-stat-icon.gold { color: var(--gold); background: var(--gold-soft); }
.admin-stat-icon.blue { color: #2d68b2; background: #eaf2fc; }
.admin-stats small, .admin-stats strong, .admin-stats em { display: block; }
.admin-stats small { color: var(--muted); font-size: 9px; }
.admin-stats strong { margin: 3px 0; font: 800 23px "Manrope"; }
.admin-stats em { color: #969ca6; font-size: 9px; font-style: normal; }
.admin-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr); gap: 20px; align-items: start; }
.admin-review-list { display: flex; flex-direction: column; }
.admin-review-list > a { padding: 14px 2px; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; color: var(--ink); border-top: 1px solid #eef0f4; }
.admin-review-list > a:first-child { border-top: 0; }
.admin-review-list strong, .admin-review-list small { display: block; }
.admin-review-list strong { font-size: 13px; }
.admin-review-list small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.waiting-time { color: var(--gold); font-size: 9px; font-weight: 700; }
.admin-review-list > a > b { color: var(--purple); font-size: 10px; }
.empty-state.compact { min-height: 160px; padding: 20px; }
.admin-filter-tabs { margin-bottom: 18px; display: flex; gap: 5px; border-bottom: 1px solid var(--line); }
.admin-filter-tabs a { padding: 10px 14px 12px; color: var(--muted); border-bottom: 2px solid transparent; font-size: 12px; font-weight: 600; }
.admin-filter-tabs a.active { color: var(--purple); border-color: var(--purple); }
.admin-filter-tabs span { margin-left: 5px; padding: 2px 6px; background: #eceef2; border-radius: 999px; font-size: 9px; }
.admin-filter-tabs a.active span { background: var(--purple-soft); }
.admin-search { max-width: 630px; margin-bottom: 18px; display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.admin-search input { width: 100%; padding: 11px 13px; background: #fff; border: 1px solid var(--line); border-radius: 10px; outline: none; }
.admin-table-card { padding: 0; overflow: hidden; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th { padding: 13px 17px; color: #8a919d; background: #fafbfc; border-bottom: 1px solid var(--line); text-align: left; font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }
.admin-table td { padding: 14px 17px; border-bottom: 1px solid #eef0f3; color: #525966; font-size: 11px; }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table td > strong, .admin-table td > small { display: block; }
.admin-table td > strong { color: var(--ink); font-size: 11px; }
.admin-table td > small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.admin-person { min-width: 190px; display: flex; align-items: center; gap: 10px; }
.admin-person strong, .admin-person small { display: block; }
.admin-person strong { color: var(--ink); font-size: 11px; }
.admin-person small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.table-action { white-space: nowrap; font-size: 10px; font-weight: 700; }
.review-header { margin-bottom: 17px; display: flex; align-items: center; justify-content: space-between; }
.review-header > a { color: var(--muted); font-size: 11px; font-weight: 600; }
.admin-review-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr); align-items: start; gap: 20px; }
.admin-applicant-label { color: var(--purple); font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.review-data-grid { margin-top: 25px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.review-data-grid > div { padding: 13px; background: #fafbfc; border: 1px solid #eef0f3; border-radius: 9px; }
.review-data-grid small, .review-data-grid strong { display: block; }
.review-data-grid small { color: var(--muted); font-size: 9px; }
.review-data-grid strong { margin-top: 4px; font-size: 12px; }
.review-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.review-section h3 { margin-bottom: 9px; font-size: 13px; }
.review-decision { position: sticky; top: 24px; }
.review-decision h2 { margin: 13px 0 6px; font-size: 20px; }
.review-decision > p { margin: 0 0 18px; color: var(--muted); font-size: 11px; }
.decision-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
.btn-approve { color: #fff; background: var(--green); }
.btn-approve:hover { background: #0f6b57; }
.btn-reject { color: var(--danger); background: #fff; border-color: #e9b9b5; }
.decision-note { margin-top: 18px; padding: 12px; color: #53615d; background: var(--green-soft); border-radius: 9px; }
.decision-note strong { font-size: 10px; }
.decision-note p { margin: 3px 0 0; font-size: 9px; line-height: 1.5; }

@media (max-width: 1100px) {
    .admin-stats { grid-template-columns: repeat(2, 1fr); }
    .admin-dashboard-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .admin-welcome { align-items: flex-start; flex-direction: column; }
    .admin-stats { grid-template-columns: 1fr; }
    .admin-filter-tabs { overflow-x: auto; }
    .admin-filter-tabs a { white-space: nowrap; }
    .admin-review-grid { grid-template-columns: 1fr; }
    .review-decision { position: static; }
    .admin-review-list > a { grid-template-columns: auto 1fr auto; }
    .waiting-time { grid-column: 2; }
}

@media (max-width: 500px) {
    .admin-search { grid-template-columns: 1fr; }
    .review-data-grid { grid-template-columns: 1fr; }
    .review-profile .profile-header { align-items: flex-start; }
}

/* Complete lawyer profiles */
.lawyer-editor { max-width: 1020px; display: flex; flex-direction: column; gap: 18px; }
.lawyer-editor-section { position: relative; padding: 28px; }
.lawyer-editor-section .card-heading { padding-right: 45px; }
.section-number { position: absolute; top: 27px; right: 27px; color: #cbc6ea; font: 800 15px "Manrope"; }
.photo-editor { margin: 20px 0 25px; display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 22px; }
.photo-editor > img, .photo-editor > span { width: 112px; height: 112px; object-fit: cover; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #6751d9, #352270); border: 4px solid #f0eefb; border-radius: 25px; font: 800 34px "Manrope"; }
.photo-editor .form-row { margin: 0; }
.photo-editor input[type="file"] { width: 100%; padding: 9px; color: var(--muted); background: #fafafd; border: 1px dashed #d8d8e2; border-radius: 10px; font-size: 10px; }
.lawyer-check-grid { margin: 20px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lawyer-check-grid > label { padding: 14px; display: flex; align-items: flex-start; gap: 10px; background: #fafafd; border: 1px solid #e6e6ec; border-radius: 11px; cursor: pointer; }
.lawyer-check-grid input { margin-top: 3px; accent-color: var(--purple); }
.lawyer-check-grid strong, .lawyer-check-grid span, .lawyer-check-grid small { display: block; }
.lawyer-check-grid span { color: var(--ink); font-size: 11px; font-weight: 700; }
.lawyer-check-grid small { margin-top: 3px; color: var(--muted); font-size: 8px; font-weight: 400; }
.specialties-editor ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.specialties-editor li label { padding: 10px; display: flex; gap: 7px; background: #fafafd; border: 1px solid #e8e8ee; border-radius: 9px; }
.price-summary { margin-bottom: 20px; }
.service-editor-list { display: flex; flex-direction: column; gap: 12px; }
.service-editor-card { padding: 17px; background: #fafafd; border: 1px solid #e5e5ec; border-radius: 12px; }
.service-editor-head { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
.service-editor-head strong { font-size: 11px; }
.service-editor-head label, .service-active { color: var(--muted); font-size: 9px; }
.service-editor-card .form-row { margin-bottom: 8px; }
.editor-actions { position: sticky; bottom: 12px; z-index: 3; padding: 13px; display: flex; justify-content: flex-end; gap: 8px; background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); backdrop-filter: blur(12px); }

.lawyer-search { grid-template-columns: minmax(220px, 1fr) 210px 190px auto; }
.lawyer-grid-rich { max-width: 1100px; margin-inline: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lawyer-card-rich { padding: 0 18px 18px; overflow: hidden; border-color: #e3e5ec; border-radius: 18px; box-shadow: 0 9px 25px rgba(40, 44, 71, .06); }
.lawyer-card-cover { position: relative; height: 145px; margin-inline: -18px; display: grid; place-items: center; background: linear-gradient(155deg, #fff, #fafaff); overflow: hidden; }
.lawyer-card-cover > img { width: 104px; height: 104px; object-fit: cover; border: 4px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #e5e7ef, 0 7px 18px rgba(39,45,75,.1); }
.lawyer-card-cover > span:not(.verified) { width: 104px; height: 104px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #6a54dd, #382477); border: 4px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #e5e7ef, 0 7px 18px rgba(39,45,75,.1); font: 800 28px "Manrope"; }
.verified-float { position: absolute; top: 10px; right: 10px; padding: 6px 9px; color: #08795c; background: #effaf6; border-radius: 999px; box-shadow: none; font-size: 8px; }
.lawyer-card-body { padding: 0; text-align: center; }
.lawyer-name-row { display: block; }
.lawyer-name-row h2 { margin: 0; color: #111831; font-size: 17px; }
.lawyer-name-row p { margin: 4px 0 0; color: #68728c; font-size: 10px; }
.card-rating { color: #d49420; font-size: 11px; white-space: nowrap; }
.card-rating small { margin-left: 3px; color: var(--muted); font-size: 8px; }
.lawyer-card-rich .lawyer-location { margin: 7px 0 12px; color: #64708b; font-size: 9px; }
.lawyer-card-rich .lawyer-location span { margin-right: 3px; font-size: 12px; }
.lawyer-card-rich .lawyer-location b { margin-inline: 4px; font-weight: 500; }
.lawyer-card-rich .tag-list { justify-content: center; gap: 6px; }
.lawyer-card-rich .tag-list span { padding: 6px 8px; color: #5844d5; background: #f0edff; border-radius: 7px; font-size: 8px; }
.lawyer-card-meta { margin: 14px 0 0; padding: 12px 0; display: flex; align-items: center; justify-content: space-between; gap: 9px; border-top: 1px solid #e7e8ee; font-size: 9px; text-align: left; }
.lawyer-service-modes { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 12px; color: #5c6883; }
.lawyer-service-modes span { display: inline-flex; align-items: center; gap: 5px; }
.lawyer-service-modes i { width: 7px; height: 7px; display: inline-block; background: #28ae7d; border-radius: 50%; }
.lawyer-card-meta strong { color: #111831; font-size: 10px; white-space: nowrap; }
.lawyer-card-rich .lawyer-actions { margin-top: 4px; gap: 12px; }
.lawyer-card-rich .lawyer-actions .btn { min-height: 38px; padding: 8px; display: flex; align-items: center; justify-content: center; border-radius: 9px; font-size: 9px; }

.lawyer-profile-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.lawyer-profile-main { display: flex; flex-direction: column; gap: 16px; }
.lawyer-profile-hero { padding: 27px; display: grid; grid-template-columns: 125px 1fr auto; align-items: center; gap: 22px; }
.lawyer-profile-photo { width: 125px; height: 125px; object-fit: cover; border-radius: 25px; }
.lawyer-photo-fallback { display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #6851dc, #35216f); font: 800 35px "Manrope"; }
.lawyer-profile-intro h2 { margin: 8px 0 3px; font-size: 25px; }
.lawyer-headline { margin: 0; color: #5f6672; font-size: 12px; }
.lawyer-profile-facts { margin-top: 15px; display: flex; flex-wrap: wrap; gap: 8px 15px; color: var(--muted); font-size: 9px; }
.rating-summary { color: #ca8a17; font-weight: 800; }
.rating-summary small { color: var(--muted); font-weight: 500; }
.availability-badge { align-self: start; padding: 7px 10px; display: flex; align-items: center; gap: 6px; color: #176451; background: var(--green-soft); border-radius: 999px; font-size: 9px; font-weight: 700; }
.availability-badge i { width: 6px; height: 6px; background: var(--green); border-radius: 50%; }
.availability-badge.is-unavailable { color: #777; background: #f0f1f3; }
.availability-badge.is-unavailable i { background: #999; }
.profile-section { padding: 25px 27px; }
.profile-section > h3, .profile-section .card-heading h3, .reviews-heading h3 { margin: 0 0 11px; font-size: 15px; }
.profile-specialties { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-specialties span { padding: 8px 11px; color: #5545a7; background: var(--purple-soft); border-radius: 9px; font-size: 10px; font-weight: 600; }
.public-service-list { display: flex; flex-direction: column; }
.public-service-list article { padding: 15px 0; display: flex; justify-content: space-between; gap: 22px; border-top: 1px solid #ededf1; }
.public-service-list article:first-child { border-top: 0; }
.public-service-list strong { font-size: 12px; }
.public-service-list p { margin: 4px 0; color: var(--muted); font-size: 10px; }
.public-service-list small { color: #9298a2; font-size: 8px; }
.public-service-list article > b { color: var(--purple); font-size: 11px; white-space: nowrap; }
.empty-inline { padding: 16px; color: var(--muted); background: #fafafd; border-radius: 10px; font-size: 10px; text-align: center; }
.reviews-heading { margin-bottom: 10px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.reviews-heading p { margin: -5px 0 0; color: var(--muted); font-size: 9px; }
.reviews-heading > strong { color: var(--ink); font-size: 22px; text-align: right; }
.reviews-heading > strong span, .review-stars { color: #e1a022; }
.reviews-heading > strong small { display: block; color: var(--muted); font-size: 8px; font-weight: 500; }
.review-list { display: flex; flex-direction: column; }
.review-list > article { padding: 16px 0; border-top: 1px solid #ededf1; }
.review-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; }
.review-top strong, .review-top span { display: block; }
.review-top strong { font-size: 10px; }
.review-top small { color: var(--muted); font-size: 8px; }
.review-stars { margin-top: 2px; font-size: 9px; letter-spacing: 1px; }
.review-list article > p { margin: 11px 0 7px; color: #515864; font-size: 11px; line-height: 1.6; }
.verified-review { color: #287663; font-size: 8px; font-weight: 700; }
.booking-card h2 { margin: 13px 0 8px; font-size: 20px; }
.booking-price { margin: 18px 0; padding: 14px; background: #f7f5ff; border-radius: 11px; }
.booking-price small, .booking-price strong { display: block; }
.booking-price small, .booking-languages small { color: var(--muted); font-size: 8px; }
.booking-price strong { margin-top: 4px; color: var(--purple); font-size: 16px; }
.booking-details { margin-bottom: 17px; display: flex; flex-direction: column; gap: 8px; color: #59616d; font-size: 10px; }
.booking-details span:empty { display: none; }
.booking-languages { margin-bottom: 16px; }
.booking-languages p { margin: 4px 0 0; color: var(--ink); font-size: 10px; }
.request-review-card { margin-top: 17px; }
.request-review-card h2 { margin: 12px 0 5px; font-size: 18px; }
.request-review-card > p { color: var(--muted); font-size: 11px; }

@media (max-width: 1120px) {
    .lawyer-grid-rich { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lawyer-search { grid-template-columns: 1fr 1fr; }
    .lawyer-search input { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
    .lawyer-grid-rich { max-width: 560px; grid-template-columns: 1fr; }
    .lawyer-profile-layout { grid-template-columns: 1fr; }
    .lawyer-profile-side .sticky-card { position: static; }
    .lawyer-check-grid, .specialties-editor ul { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 580px) {
    .lawyer-editor-section { padding: 21px 17px; }
    .photo-editor { grid-template-columns: 82px 1fr; gap: 14px; }
    .photo-editor > img, .photo-editor > span { width: 82px; height: 82px; border-radius: 19px; }
    .lawyer-check-grid, .specialties-editor ul, .lawyer-grid-rich, .lawyer-search { grid-template-columns: 1fr; }
    .lawyer-search input { grid-column: auto; }
    .editor-actions { bottom: 5px; }
    .lawyer-profile-hero { grid-template-columns: 88px 1fr; padding: 20px 17px; }
    .lawyer-profile-photo { width: 88px; height: 88px; border-radius: 19px; }
    .availability-badge { grid-column: 1 / -1; justify-self: start; }
    .lawyer-profile-intro h2 { font-size: 19px; }
    .public-service-list article { align-items: flex-start; flex-direction: column; gap: 7px; }
    .lawyer-card-rich { padding: 0 16px 18px; border-radius: 18px; }
    .lawyer-card-cover { height: 145px; margin-inline: -16px; }
    .lawyer-card-cover > img, .lawyer-card-cover > span:not(.verified) { width: 104px; height: 104px; }
    .lawyer-card-meta { align-items: flex-start; flex-direction: column; }
    .lawyer-card-rich .lawyer-actions { grid-template-columns: 1fr; }
}

/* Integrated scheduling */
.booking-form { margin-top: 18px; padding-top: 17px; display: flex; flex-direction: column; gap: 7px; border-top: 1px solid var(--line); }
.booking-form label { margin-top: 4px; color: #555d69; font-size: 9px; font-weight: 700; }
.booking-form textarea { min-height: 66px; resize: vertical; }
.booking-form .btn { margin-top: 7px; }
.booking-status-note { color: var(--muted); font-size: 8px; line-height: 1.45; text-align: center; }
.booking-request-link { margin-top: 14px; display: block; color: var(--purple); font-size: 9px; font-weight: 700; line-height: 1.45; text-align: center; }
.booking-empty { margin: 17px 0 8px; padding: 14px; background: #fafafd; border: 1px solid var(--line); border-radius: 11px; }
.booking-empty strong { font-size: 10px; }
.booking-empty p { margin: 4px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.booking-profile-button { margin-top: 18px; }

.booking-page { max-width: 1160px; min-height: 650px; margin: 0 auto; display: grid; grid-template-columns: 310px minmax(0, 1fr); overflow: hidden; }
.booking-summary { padding: 28px; background: #fbfbfd; border-right: 1px solid #e5e6eb; }
.booking-back { display: inline-flex; margin-bottom: 24px; color: #6a7180; font-size: 9px; font-weight: 700; }
.booking-professional { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 12px; }
.booking-professional > img, .booking-professional > span { width: 54px; height: 54px; display: grid; place-items: center; object-fit: cover; color: #fff; background: linear-gradient(145deg, #5f43db, #3c27a7); border-radius: 14px; font: 800 18px "Manrope"; }
.booking-professional small, .booking-summary-label { color: #8d93a0; font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.booking-professional h2 { margin: 3px 0 2px; font-size: 15px; }
.booking-professional p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.4; }
.booking-summary-divider { height: 1px; margin: 25px 0; background: #e2e3e8; }
.booking-summary > h3 { margin: 12px 0 22px; font-size: 22px; line-height: 1.25; }
.booking-summary-list { margin: 0; display: grid; gap: 17px; }
.booking-summary-list > div { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 11px; }
.booking-summary-list dt { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #dcdfe6; border-radius: 11px; font-size: 15px; }
.booking-summary-list dd { margin: 0; }
.booking-summary-list small, .booking-summary-list strong { display: block; }
.booking-summary-list small { margin-bottom: 3px; color: var(--muted); font-size: 8px; }
.booking-summary-list strong { font-size: 10px; line-height: 1.35; }
.booking-summary-price { margin-top: 24px; padding: 14px; background: #f0edff; border-radius: 11px; }
.booking-summary-price small, .booking-summary-price strong { display: block; }
.booking-summary-price small { color: var(--muted); font-size: 8px; }
.booking-summary-price strong { margin-top: 4px; color: var(--purple); font-size: 14px; }
.booking-scheduler { padding: 38px 44px; }
.booking-scheduler > h2 { margin: 13px 0 8px; font-size: 27px; }
.booking-intro { max-width: 670px; margin: 0 0 28px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.booking-page-form { display: flex; flex-direction: column; gap: 21px; }
.booking-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.booking-fieldset legend, .booking-comment > label { margin-bottom: 10px; color: var(--ink); font-size: 11px; font-weight: 800; }
.booking-day-strip { padding: 2px 1px 8px; display: flex; gap: 9px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #d6d1ef transparent; }
.booking-day { min-width: 73px; height: 87px; padding: 10px 8px; display: grid; place-items: center; color: #4f5662; background: #fff; border: 1px solid #dfe1e7; border-radius: 12px; cursor: pointer; font-family: inherit; }
.booking-day span, .booking-day small { font-size: 8px; font-weight: 700; text-transform: uppercase; }
.booking-day strong { font-size: 19px; }
.booking-day.is-selected { color: #fff; background: var(--purple); border-color: var(--purple); box-shadow: 0 8px 18px rgba(84,61,202,.2); }
.booking-slot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.booking-slot { min-height: 50px; padding: 10px 14px; color: #313744; background: #fff; border: 1px solid #dcdfe5; border-radius: 10px; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 700; }
.booking-slot:hover { border-color: #afa5e9; }
.booking-slot.is-selected { color: #fff; background: var(--purple); border-color: var(--purple); box-shadow: 0 7px 16px rgba(84,61,202,.17); }
.booking-fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.booking-page-form .form-row label { margin-bottom: 7px; display: block; color: var(--ink); font-size: 10px; font-weight: 700; }
.booking-comment textarea { min-height: 78px; resize: vertical; }
.booking-confirm { min-height: 48px; font-size: 11px; }
.booking-no-slots { min-height: 330px; display: grid; place-items: center; align-content: center; text-align: center; }
.booking-no-slots > span { width: 52px; height: 52px; display: grid; place-items: center; color: var(--purple); background: var(--purple-soft); border-radius: 15px; font-size: 20px; }
.booking-no-slots h3 { margin: 15px 0 6px; font-size: 17px; }
.booking-no-slots p { margin: 0 0 17px; color: var(--muted); font-size: 10px; }

@media (max-width: 900px) {
    .booking-page { grid-template-columns: 250px minmax(0, 1fr); }
    .booking-summary { padding: 22px; }
    .booking-scheduler { padding: 30px 25px; }
}

@media (max-width: 700px) {
    .booking-page { margin: -10px -7px 0; grid-template-columns: 1fr; border-radius: 16px; }
    .booking-summary { padding: 20px; border-right: 0; border-bottom: 1px solid #e5e6eb; }
    .booking-summary > .booking-summary-label, .booking-summary > h3, .booking-summary-list, .booking-summary-price { display: none; }
    .booking-summary-divider { margin: 18px 0 0; }
    .booking-back { margin-bottom: 17px; }
    .booking-scheduler { padding: 24px 18px; }
    .booking-scheduler > h2 { font-size: 22px; }
    .booking-day { min-width: 67px; height: 79px; }
    .booking-slot-grid, .booking-fields-grid { grid-template-columns: 1fr; }
}

.availability-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; align-items: start; gap: 20px; }
.availability-editor { padding: 27px; }
.availability-editor .card-heading h2 { margin: 12px 0 5px; }
.availability-rows { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.availability-row { padding: 14px; display: grid; grid-template-columns: 1.15fr .8fr .8fr 1fr auto auto; align-items: end; gap: 9px; background: #fafafd; border: 1px solid #e7e7ed; border-radius: 12px; }
.availability-row label { margin-bottom: 5px; display: block; color: var(--muted); font-size: 8px; font-weight: 700; }
.availability-toggle, .availability-delete { min-height: 39px; margin: 0 !important; padding: 0 7px; display: flex !important; align-items: center; gap: 5px; white-space: nowrap; }
.availability-toggle input, .availability-delete input { accent-color: var(--purple); }
.availability-delete span { color: var(--danger); }
.row-errors { grid-column: 1 / -1; color: var(--danger); font-size: 9px; }
.availability-help { position: sticky; top: 24px; padding: 24px; }
.availability-help > span { width: 40px; height: 40px; display: grid; place-items: center; color: var(--purple); background: var(--purple-soft); border-radius: 11px; }
.availability-help h3 { margin: 15px 0 7px; font-size: 15px; }
.availability-help p, .availability-help li { color: var(--muted); font-size: 10px; line-height: 1.6; }
.availability-help ul { margin: 15px 0 0; padding-left: 17px; }
.availability-help li + li { margin-top: 7px; }
.schedule-editor { max-width: 1050px; display: flex; flex-direction: column; gap: 18px; }
.schedule-settings-card { padding: 27px; }
.schedule-settings-card .card-heading h2 { margin: 12px 0 5px; }
.schedule-settings-grid { margin-top: 20px; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 12px; }
.schedule-settings-grid .form-row { margin: 0; }
.schedule-reminder-options { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.schedule-reminder-options > label { padding: 13px; display: flex; align-items: flex-start; gap: 9px; background: #f7faf9; border: 1px solid #dfece8; border-radius: 10px; cursor: pointer; }
.schedule-reminder-options input { margin-top: 3px; accent-color: var(--green); }
.schedule-reminder-options strong, .schedule-reminder-options small { display: block; }
.schedule-reminder-options strong { color: #35564d; font-size: 10px; }
.schedule-reminder-options small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.pill-soft-green { color: #176451; background: var(--green-soft); }
.timeoff-rows { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.timeoff-row { padding: 14px; display: grid; grid-template-columns: .8fr .8fr 1fr 1.4fr auto; align-items: end; gap: 9px; background: #fafafd; border: 1px solid #e7e7ed; border-radius: 12px; }
.timeoff-row label { margin-bottom: 5px; display: block; color: var(--muted); font-size: 8px; font-weight: 700; }
.reschedule-layout { max-width: 960px; display: grid; grid-template-columns: minmax(0, 1fr) 285px; align-items: start; gap: 20px; }
.reschedule-card { padding: 28px; }
.reschedule-card h2 { margin: 13px 0 5px; font-size: 21px; }
.reschedule-card > p { margin: 0 0 18px; color: var(--muted); font-size: 10px; }
.current-appointment { margin-bottom: 19px; padding: 14px; display: flex; flex-direction: column; gap: 4px; color: #4f5764; background: #f7f5ff; border-radius: 11px; }
.current-appointment small { color: var(--muted); font-size: 8px; }
.current-appointment strong { color: var(--ink); font-size: 12px; }
.current-appointment span { font-size: 8px; }
.reschedule-actions { display: flex; justify-content: flex-end; gap: 8px; }
.reschedule-proposal { margin-top: 13px; padding: 12px; color: #51487e; background: #f6f3ff; border: 1px solid #e1dbfa; border-radius: 10px; }
.reschedule-proposal > span, .reschedule-proposal > strong { display: block; }
.reschedule-proposal > span { color: var(--purple); font-size: 8px; font-weight: 800; }
.reschedule-proposal > strong { margin-top: 4px; font-size: 10px; }
.reschedule-proposal > p { margin: 5px 0 0; font-size: 9px; }
.reschedule-proposal > div { margin-top: 9px; display: flex; gap: 7px; }
.reschedule-proposal form { margin: 0; }
.appointment-reschedule-link { padding: 7px; color: var(--purple); background: #f5f2ff; border-radius: 7px; font-size: 8px; font-weight: 700; text-align: center; }

.agenda-heading { margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.agenda-heading h2 { margin: 0 0 4px; font-size: 19px; }
.agenda-heading p { margin: 0; color: var(--muted); font-size: 10px; }
.appointment-list { display: flex; flex-direction: column; gap: 12px; }
.appointment-card { padding: 20px; display: grid; grid-template-columns: 65px 1fr auto; align-items: center; gap: 20px; border-left: 3px solid #d6d0f5; }
.appointment-card.status-confirmed { border-left-color: var(--green); }
.appointment-card.status-cancelled, .appointment-card.status-completed { opacity: .72; border-left-color: #c9ccd1; }
.appointment-date { padding: 9px 7px; display: flex; flex-direction: column; align-items: center; background: #f7f5ff; border-radius: 12px; }
.appointment-date strong { font: 800 23px "Manrope"; }
.appointment-date span { color: var(--purple); font-size: 9px; font-weight: 800; }
.appointment-date small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.appointment-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.appointment-title h3 { margin: 4px 0 0; font-size: 14px; }
.appointment-title > strong { font-size: 11px; white-space: nowrap; }
.appointment-status { color: var(--purple); font-size: 8px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.status-confirmed .appointment-status { color: var(--green); }
.status-cancelled .appointment-status { color: var(--danger); }
.appointment-meta { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px 14px; color: var(--muted); font-size: 9px; }
.appointment-meta a, .meeting-link { color: var(--purple); font-weight: 700; }
.appointment-notes { margin: 11px 0 0; color: #555d68; font-size: 10px; line-height: 1.55; }
.meeting-link, .meeting-pending { margin-top: 9px; display: block; font-size: 9px; }
.meeting-pending { color: var(--muted); }
.appointment-actions { min-width: 110px; display: flex; flex-direction: column; align-items: stretch; gap: 7px; }
.appointment-actions form { margin: 0; }
.appointment-actions .btn { width: 100%; }
.text-danger { width: 100%; padding: 5px; color: var(--danger); background: transparent; border: 0; cursor: pointer; font-size: 8px; font-weight: 700; }

@media (max-width: 1050px) {
    .availability-layout { grid-template-columns: 1fr; }
    .availability-help { position: static; }
    .availability-row { grid-template-columns: repeat(2, 1fr); }
    .schedule-settings-grid { grid-template-columns: 1fr 1fr; }
    .schedule-settings-grid > .form-row:first-child { grid-column: 1 / -1; }
    .timeoff-row { grid-template-columns: repeat(2, 1fr); }
    .reschedule-layout { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
    .availability-editor { padding: 18px 14px; }
    .availability-row { grid-template-columns: 1fr 1fr; }
    .availability-toggle, .availability-delete { min-height: 30px; }
    .agenda-heading { align-items: flex-start; flex-direction: column; }
    .appointment-card { grid-template-columns: 55px 1fr; align-items: start; gap: 13px; padding: 15px; }
    .appointment-actions { grid-column: 1 / -1; min-width: 0; flex-direction: row; }
    .appointment-actions form { flex: 1; }
    .appointment-title { flex-direction: column; gap: 5px; }
    .schedule-settings-card { padding: 20px 15px; }
    .schedule-settings-grid, .schedule-reminder-options, .timeoff-row { grid-template-columns: 1fr; }
    .schedule-settings-grid > .form-row:first-child, .schedule-reminder-options { grid-column: auto; }
    .reschedule-card { padding: 20px 16px; }
}

/* Human-to-human private case chat */
.private-list-heading { margin-bottom: 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.private-list-heading h2 { margin: 9px 0 4px; font-size: 21px; }
.private-list-heading p { margin: 0; color: var(--muted); font-size: 10px; }
.private-label { display: inline-flex; align-items: center; gap: 6px; color: #15745e; font-size: 8px; font-weight: 800; letter-spacing: .09em; }
.private-label i { width: 7px; height: 7px; background: #21aa7c; border-radius: 50%; box-shadow: 0 0 0 3px #e5f8f1; }
.ai-chat-link { padding: 9px 12px; color: var(--purple); background: var(--purple-soft); border-radius: 9px; font-size: 9px; font-weight: 700; }
.private-conversation-list { max-width: 900px; display: flex; flex-direction: column; gap: 10px; }
.private-conversation-row { padding: 17px 19px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; color: var(--ink); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.private-conversation-row:hover { border-color: #cbc3f3; box-shadow: 0 9px 25px rgba(52,39,118,.08); transform: translateY(-1px); }
.private-avatar { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #3c806e, #1d5d4d); border-radius: 13px; font: 800 14px "Manrope"; }
.private-row-role { color: #368271; font-size: 7px; font-weight: 800; letter-spacing: .08em; }
.private-conversation-row h3 { margin: 3px 0; font-size: 13px; }
.private-conversation-row p { margin: 0; color: var(--muted); font-size: 9px; }
.private-row-meta { display: grid; grid-template-columns: auto auto; align-items: center; justify-items: end; gap: 5px 9px; }
.private-row-meta small { color: var(--muted); font-size: 8px; }
.private-row-meta b { grid-column: 2; grid-row: 1 / 3; color: var(--purple); font-size: 16px; }

.private-chat-shell { min-height: calc(100vh - 175px); max-width: 980px; margin: -13px auto -20px; display: flex; flex-direction: column; background: #f7f8fb; border: 1px solid #e5e7ec; border-radius: 18px; box-shadow: 0 13px 38px rgba(30,34,55,.055); overflow: hidden; }
.private-chat-header { min-height: 78px; padding: 14px 19px; display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 12px; background: #fff; border-bottom: 1px solid #e8e9ed; }
.private-chat-header > a:first-child { width: 29px; height: 29px; display: grid; place-items: center; color: #646b78; background: #f5f6f8; border-radius: 8px; }
.private-chat-header h2 { margin: 3px 0 1px; font-size: 14px; }
.private-chat-header p { margin: 0; color: var(--muted); font-size: 8px; }
.private-case-link { padding: 8px 10px; color: var(--purple); border: 1px solid #d7d1f3; border-radius: 8px; font-size: 8px; font-weight: 700; }
.private-human-notice { padding: 10px 20px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; color: #4f625d; background: #eef9f5; border-bottom: 1px solid #daeee7; }
.private-human-notice > span { width: 22px; height: 22px; display: grid; place-items: center; color: #fff; background: #23836a; border-radius: 50%; font-size: 9px; }
.private-human-notice p { margin: 0; font-size: 8px; line-height: 1.5; }
.private-human-notice a { color: var(--purple); font-size: 8px; font-weight: 700; white-space: nowrap; }
.private-message-thread { min-height: 390px; max-height: calc(100vh - 365px); padding: 24px 34px; display: flex; flex: 1; flex-direction: column; gap: 17px; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
.private-message-thread::-webkit-scrollbar { display: none; }
.private-message { width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.private-message-own { align-items: flex-end; }
.private-message-bubble { width: fit-content; max-width: min(72%, 620px); padding: 10px 13px; color: #333b48; background: #fff; border: 1px solid #e4e6ea; border-radius: 4px 15px 15px 15px; box-shadow: 0 4px 12px rgba(29,34,53,.035); overflow-wrap: anywhere; word-break: break-word; }
.private-message-own .private-message-bubble { color: #fff; background: #5540ce; border-color: #5540ce; border-radius: 15px 4px 15px 15px; }
.private-message-bubble > p { margin: 0; font-size: 11px; line-height: 1.55; }
.private-message > time { margin-top: 5px; color: #a1a6af; font-size: 7px; }
.private-attachment { min-width: 245px; padding: 9px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; color: #3f4652; background: #f7f8fa; border-radius: 9px; }
.private-message-own .private-attachment { color: #fff; background: rgba(255,255,255,.13); }
.private-attachment > span:first-child { width: 31px; height: 31px; display: grid; place-items: center; color: var(--purple); background: #fff; border-radius: 7px; }
.private-attachment strong, .private-attachment small { max-width: 210px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.private-attachment strong { font-size: 9px; }
.private-attachment small { margin-top: 2px; color: inherit; font-size: 7px; opacity: .68; }
.private-empty-thread { margin: auto; color: var(--muted); text-align: center; }
.private-empty-thread > span { width: 42px; height: 42px; margin: 0 auto 10px; display: grid; place-items: center; color: #26836d; background: #eaf7f3; border-radius: 12px; }
.private-empty-thread h3 { margin: 0 0 5px; color: var(--ink); font-size: 13px; }
.private-empty-thread p { margin: 0; font-size: 9px; }
.private-chat-composer-wrap { padding: 11px 20px 13px; background: #fff; border-top: 1px solid #e5e7eb; }
.private-chat-composer { min-height: 46px; padding: 5px 6px 5px 7px; display: flex; align-items: center; gap: 7px; background: #f8f8fb; border: 1px solid #dcdee5; border-radius: 14px; }
.private-chat-composer:focus-within { border-color: #a69be2; box-shadow: 0 0 0 3px rgba(85,64,206,.07); }
.private-chat-composer input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.private-attach-button { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; color: #58606d; background: #fff; border: 1px solid #e0e2e7; border-radius: 9px; cursor: pointer; font-size: 18px; }
.private-chat-composer textarea { height: 24px; min-height: 24px; max-height: 110px; flex: 1; padding: 2px; color: #343944; background: transparent; border: 0; outline: 0; resize: none; font-family: inherit; font-size: 11px; line-height: 20px; scrollbar-width: none; }
.private-chat-composer button { width: 34px; height: 34px; flex: 0 0 auto; padding: 0; display: grid; place-items: center; color: #fff; background: #5540ce; border: 0; border-radius: 10px; cursor: pointer; }
.private-chat-composer button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.private-composer-meta { padding: 6px 3px 0; display: flex; justify-content: space-between; gap: 10px; color: #9a9fa8; font-size: 7px; }
.private-chat-closed { padding: 12px; color: #707680; background: #f5f6f8; border-radius: 10px; font-size: 9px; text-align: center; }

@media (max-width: 680px) {
    .private-list-heading { align-items: flex-start; flex-direction: column; }
    .private-conversation-row { grid-template-columns: auto 1fr; }
    .private-row-meta { grid-column: 2; justify-items: start; }
    .private-row-meta b { display: none; }
    .private-chat-shell { min-height: calc(100vh - 150px); margin: -20px -16px -24px; border: 0; border-radius: 0; }
    .private-chat-header { grid-template-columns: auto auto 1fr; padding-inline: 11px; }
    .private-case-link { display: none; }
    .private-human-notice { grid-template-columns: auto 1fr; padding-inline: 13px; }
    .private-human-notice a { display: none; }
    .private-message-thread { max-height: none; padding: 19px 13px; }
    .private-message-bubble { max-width: 86%; }
    .private-attachment { min-width: min(245px, 72vw); }
    .private-chat-composer-wrap { padding: 9px 10px 11px; }
    .private-composer-meta span:last-child { display: none; }
}

/* Superadmin business analytics */
.admin-welcome-actions { display: flex; gap: 9px; }
.analytics-toolbar { margin-bottom: 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.analytics-toolbar h2 { font-size: 20px; }
.analytics-toolbar p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.analytics-toolbar form { min-width: 205px; }
.analytics-toolbar label { display: block; margin-bottom: 5px; color: var(--muted); font-size: 8px; font-weight: 700; }
.analytics-toolbar select { width: 100%; padding: 10px 12px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 9px; }
.analytics-kpis { margin-bottom: 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.analytics-kpis article { min-width: 0; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.analytics-kpis article.analytics-alert { background: #fffaf0; border-color: #f0d9a5; }
.analytics-kpis small, .analytics-kpis strong, .analytics-kpis span { display: block; }
.analytics-kpis small { color: var(--muted); font-size: 8px; font-weight: 700; }
.analytics-kpis strong { margin: 7px 0 3px; overflow: hidden; font: 800 24px "Manrope", sans-serif; text-overflow: ellipsis; }
.analytics-kpis span { color: #8c929e; font-size: 8px; line-height: 1.45; }
.funnel-card { padding: 25px; }
.funnel-overall { padding: 7px 10px; color: var(--green); background: var(--green-soft); border-radius: 999px; font-size: 8px; font-weight: 700; }
.funnel-list { border-top: 1px solid var(--line); }
.funnel-stage { min-height: 66px; display: grid; grid-template-columns: minmax(205px, 1.1fr) minmax(160px, 1.4fr) 55px 105px 105px; align-items: center; gap: 15px; border-bottom: 1px solid #eef0f4; }
.funnel-stage-copy { min-width: 0; display: flex; align-items: center; gap: 10px; }
.funnel-index { width: 27px; height: 27px; flex: 0 0 auto; display: grid; place-items: center; color: var(--purple); background: var(--purple-soft); border-radius: 8px; font-size: 9px; font-weight: 800; }
.funnel-stage h3 { font-size: 11px; }
.funnel-stage p { margin: 2px 0 0; overflow: hidden; color: var(--muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.funnel-stage-bar { height: 8px; overflow: hidden; background: #efeff4; border-radius: 999px; }
.funnel-stage-bar > div { min-width: 2px; height: 100%; background: linear-gradient(90deg, #6b51df, #8e7aea); border-radius: inherit; }
.funnel-count { text-align: right; font: 800 17px "Manrope", sans-serif; }
.funnel-rate strong, .funnel-rate small, .funnel-drop strong, .funnel-drop small { display: block; }
.funnel-rate strong { color: var(--green); font-size: 10px; }
.funnel-drop strong { color: var(--danger); font-size: 10px; }
.funnel-rate small, .funnel-drop small { margin-top: 2px; color: #969ca7; font-size: 6px; }
.analytics-note { margin-top: 15px; padding: 14px 16px; display: flex; gap: 11px; color: #666d7b; background: #f0f2f7; border-radius: 11px; }
.analytics-note > span { width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; color: #fff; background: #7d8491; border-radius: 50%; font: 700 10px serif; }
.analytics-note p, .analytics-note strong { display: block; margin: 0; font-size: 8px; line-height: 1.55; }
.analytics-note strong { margin-bottom: 2px; color: var(--ink); }
.request-complete-action { margin-top: 8px; }

/* Open case marketplace */
.case-broadcast-banner { margin-bottom: 17px; padding: 18px 20px; display: flex; align-items: center; gap: 14px; color: #fff; background: linear-gradient(125deg, #2f2470, #6248da); border-radius: 15px; box-shadow: 0 12px 28px rgba(73,52,173,.14); }
.case-broadcast-banner > span { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; background: rgba(255,255,255,.13); border-radius: 11px; font-size: 19px; }
.case-broadcast-banner strong { font-size: 12px; }
.case-broadcast-banner p { margin: 3px 0 0; color: rgba(255,255,255,.72); font-size: 9px; line-height: 1.5; }
.form-help { display: block; margin-top: 5px; color: var(--muted); font-size: 8px; }
.open-cases-section { margin-bottom: 27px; }
.open-cases-heading { margin-bottom: 13px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.open-cases-heading > div { display: flex; align-items: center; gap: 10px; }
.open-cases-heading h2 { font-size: 17px; }
.open-cases-heading p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.open-cases-heading > strong { padding: 6px 9px; color: var(--green); background: var(--green-soft); border-radius: 999px; font-size: 8px; }
.live-dot { width: 9px; height: 9px; flex: 0 0 auto; background: #21a77d; border: 3px solid #caf0e4; border-radius: 50%; box-sizing: content-box; }
.open-case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.open-case-card { min-width: 0; padding: 17px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 14px; transition: .18s ease; }
.open-case-card:hover { transform: translateY(-2px); border-color: #cfc7f7; box-shadow: var(--shadow); }
.open-case-top, .open-case-meta, .open-case-cta { display: flex; align-items: center; gap: 7px; }
.open-case-top { justify-content: space-between; }
.open-case-top span { padding: 4px 7px; color: var(--purple); background: var(--purple-soft); border-radius: 999px; font-size: 7px; font-weight: 700; }
.open-case-top small { color: #999fab; font-size: 7px; }
.open-case-card h3 { margin-top: 13px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.open-case-card > p { min-height: 43px; margin: 6px 0 12px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.open-case-meta { padding: 10px 0; flex-wrap: wrap; border-top: 1px solid #eef0f4; border-bottom: 1px solid #eef0f4; }
.open-case-meta span { color: #6d7482; font-size: 7px; }
.open-case-meta strong { margin-left: auto; font-size: 9px; }
.open-case-cta { padding-top: 11px; justify-content: space-between; color: var(--purple); font-size: 8px; font-weight: 700; }
.assigned-cases-title { margin: 0 0 12px; font-size: 16px; }
.open-case-chip { padding: 5px 8px; color: var(--green); background: var(--green-soft); border-radius: 999px; font-size: 8px; font-weight: 700; }
.open-market-hero { margin-bottom: 17px; padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: #fff; background: linear-gradient(125deg, #272052, #5740c9); border-radius: 17px; }
.open-market-hero > div { display: flex; align-items: center; gap: 12px; }
.open-market-hero h2 { font-size: 18px; }
.open-market-hero p { max-width: 720px; margin: 4px 0 0; color: rgba(255,255,255,.7); font-size: 9px; }
.open-market-hero > strong { padding: 7px 10px; white-space: nowrap; color: #fff; background: rgba(255,255,255,.13); border-radius: 999px; font-size: 8px; }
.open-case-filters { margin-bottom: 17px; padding: 11px; display: grid; grid-template-columns: repeat(3, minmax(130px, 1fr)) auto auto; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 13px; }
.open-case-filters select { width: 100%; padding: 9px 10px; color: var(--ink); background: #fafbfc; border: 1px solid var(--line); border-radius: 8px; font-size: 9px; }
.budget-filter { display: flex; align-items: center; gap: 6px; color: #626a78; font-size: 8px; white-space: nowrap; }
.open-case-grid-full { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.assigned-cases-banner { margin-bottom: 18px; padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #f2f0ff; border: 1px solid #dfd9ff; border-radius: 12px; }
.assigned-cases-banner > div { display: flex; align-items: center; gap: 10px; }
.assigned-cases-banner > div > span { width: 32px; height: 32px; display: grid; place-items: center; color: var(--purple); background: #fff; border-radius: 8px; }
.assigned-cases-banner p, .assigned-cases-banner strong { display: block; margin: 0; font-size: 8px; }
.assigned-cases-banner strong { margin-bottom: 2px; color: var(--ink); font-size: 10px; }
.marketplace-dashboard-card { margin-bottom: 18px; padding: 17px 20px; display: flex; align-items: center; gap: 13px; color: #fff; background: linear-gradient(120deg, #30246f, #6047d8); border-radius: 15px; box-shadow: 0 11px 26px rgba(73,52,173,.13); }
.marketplace-dashboard-icon { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; background: rgba(255,255,255,.13); border-radius: 11px; font-size: 18px; }
.marketplace-dashboard-card > span:nth-child(2) { min-width: 0; }
.marketplace-dashboard-card small, .marketplace-dashboard-card strong, .marketplace-dashboard-card em { display: block; }
.marketplace-dashboard-card small { color: #d8d0ff; font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.marketplace-dashboard-card strong { margin: 3px 0; font-size: 12px; }
.marketplace-dashboard-card em { color: rgba(255,255,255,.65); font-size: 8px; font-style: normal; }
.marketplace-dashboard-card b { margin-left: auto; white-space: nowrap; font-size: 9px; }
.urgent-open-case-wrap { padding: 15px clamp(24px, 4vw, 58px) 0; }
.urgent-open-case { position: relative; max-width: 1254px; margin: 0 auto; padding: 17px 19px; display: flex; align-items: center; gap: 14px; color: #fff; background: radial-gradient(circle at 82% 15%, rgba(255,255,255,.2), transparent 28%), linear-gradient(115deg, #b83f18, #e66c20 58%, #d94f24); border: 1px solid rgba(167,48,14,.25); border-radius: 16px; box-shadow: 0 13px 30px rgba(173,62,24,.2); }
.urgent-open-case.is-hidden { display: none; }
.urgent-open-case.is-new { animation: urgent-case-arrival .55s ease-out, urgent-case-glow 1.8s ease-out; }
.urgent-pulse { width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; color: #c7471c; background: #fff; border-radius: 50%; font: 800 21px "Manrope", sans-serif; box-shadow: 0 0 0 7px rgba(255,255,255,.12); }
.urgent-case-copy { min-width: 0; }
.urgent-case-copy small { display: block; color: #ffe1d5; font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.urgent-case-copy h2 { margin: 4px 0 3px; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.urgent-case-copy p { margin: 0; color: rgba(255,255,255,.78); font-size: 8px; }
.urgent-case-copy p strong { color: #fff; }
.urgent-case-actions { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.urgent-case-actions > span { padding: 6px 9px; white-space: nowrap; background: rgba(90,23,7,.18); border-radius: 999px; font-size: 7px; font-weight: 700; }
.urgent-case-actions .btn { white-space: nowrap; }
#urgent-case-dismiss { width: 30px; height: 30px; display: grid; place-items: center; color: rgba(255,255,255,.75); background: rgba(76,18,5,.18); border: 0; border-radius: 8px; cursor: pointer; font-size: 18px; }
#urgent-case-dismiss:hover { color: #fff; background: rgba(76,18,5,.3); }
@keyframes urgent-case-arrival { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes urgent-case-glow { 0%, 100% { box-shadow: 0 13px 30px rgba(173,62,24,.2); } 40% { box-shadow: 0 13px 38px rgba(231,91,31,.48); } }

@media (max-width: 1050px) {
    .analytics-kpis { grid-template-columns: repeat(2, 1fr); }
    .funnel-stage { grid-template-columns: minmax(190px, 1fr) minmax(120px, 1fr) 45px 90px; }
    .funnel-drop { grid-column: 4; padding-bottom: 8px; }
    .open-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    .admin-welcome-actions, .analytics-toolbar { width: 100%; align-items: stretch; flex-direction: column; }
    .admin-welcome-actions .btn { width: 100%; }
    .analytics-kpis { grid-template-columns: 1fr; }
    .funnel-card { padding: 18px; overflow-x: auto; }
    .funnel-card .card-heading { min-width: 650px; }
    .funnel-list { min-width: 650px; }
    .case-broadcast-banner, .open-cases-heading { align-items: flex-start; }
    .open-case-grid { grid-template-columns: 1fr; }
    .open-market-hero, .assigned-cases-banner, .marketplace-dashboard-card { align-items: flex-start; flex-direction: column; }
    .open-case-filters { grid-template-columns: 1fr; }
    .open-case-filters .btn, .assigned-cases-banner .btn { width: 100%; }
    .marketplace-dashboard-card b { margin-left: 0; }
    .urgent-open-case-wrap { padding: 11px 14px 0; }
    .urgent-open-case { align-items: flex-start; flex-wrap: wrap; }
    .urgent-case-copy { flex: 1; }
    .urgent-case-copy h2 { white-space: normal; }
    .urgent-case-actions { width: 100%; margin-left: 0; padding-left: 60px; flex-wrap: wrap; }
    .urgent-case-actions > span { display: none; }
    #urgent-case-dismiss { position: absolute; top: 8px; right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .urgent-open-case.is-new { animation: none; }
}

/* Intelligent lawyer matching */
.match-intro { margin-bottom: 18px; padding: 28px 30px; display: flex; align-items: center; justify-content: space-between; gap: 32px; color: #fff; background: linear-gradient(125deg, #332471, #6046dc); border-radius: 20px; box-shadow: 0 16px 38px rgba(74, 51, 177, .16); }
.match-intro > div:first-child { max-width: 720px; }
.match-kicker { display: block; margin-bottom: 8px; color: #7963e8; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.match-intro .match-kicker { color: #d9d1ff; }
.match-intro h2 { font-size: clamp(22px, 3vw, 32px); }
.match-intro > div > p { margin: 8px 0 0; color: rgba(255,255,255,.78); font-size: 12px; }
.match-privacy { max-width: 320px; padding: 15px; display: flex; gap: 11px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.13); border-radius: 13px; }
.match-privacy > span { flex: 0 0 auto; font-size: 18px; }
.match-privacy p, .match-privacy strong { display: block; margin: 0; font-size: 9px; line-height: 1.5; }
.match-privacy strong { margin-bottom: 2px; color: #fff; }
.match-form { padding: 28px; }
.match-form label { display: block; margin-bottom: 7px; font-size: 10px; font-weight: 700; }
.match-form .form-control { width: 100%; padding: 12px 13px; color: var(--ink); background: #fafbfc; border: 1px solid #dfe2e9; border-radius: 10px; outline: none; }
.match-form .form-control:focus { border-color: #8b78e8; box-shadow: 0 0 0 3px rgba(91,67,214,.09); }
.match-description-field textarea { min-height: 126px; resize: vertical; line-height: 1.55; }
.match-form-grid { margin-top: 17px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.field-error { display: block; margin-top: 5px; color: var(--danger); font-size: 9px; }
.match-form-actions { margin-top: 20px; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); }
.match-form-actions p { margin: 0; color: var(--muted); font-size: 10px; }
.match-results { margin-top: 35px; }
.match-results-heading { margin-bottom: 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.match-results-heading h2 { max-width: 720px; font-size: clamp(20px, 2.6vw, 28px); }
.match-detected { display: flex; align-items: center; gap: 7px; }
.match-detected small { color: var(--muted); font-size: 9px; }
.match-detected span { padding: 6px 9px; color: var(--purple); background: var(--purple-soft); border-radius: 999px; font-size: 9px; font-weight: 700; }
.match-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.match-card { min-width: 0; padding: 21px; background: #fff; border: 1px solid var(--line); border-radius: 17px; box-shadow: 0 7px 24px rgba(27,31,45,.035); }
.match-card-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; }
.match-avatar { width: 58px; height: 58px; display: grid; place-items: center; overflow: hidden; color: #fff; background: linear-gradient(145deg, #7259e6, #4732b5); border-radius: 50%; font-size: 19px; font-weight: 800; }
.match-avatar img { width: 100%; height: 100%; object-fit: cover; }
.match-identity { min-width: 0; }
.match-identity .verified { padding: 3px 7px; font-size: 7px; }
.match-identity h3 { margin-top: 6px; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.match-identity p { margin: 3px 0 0; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.match-score { min-width: 70px; padding: 9px 10px; text-align: center; color: var(--purple); background: var(--purple-soft); border-radius: 11px; }
.match-score strong, .match-score small { display: block; }
.match-score strong { font: 800 18px "Manrope", sans-serif; }
.match-score small { margin-top: 1px; font-size: 7px; }
.match-facts { margin: 15px 0 11px; padding: 10px 0; display: flex; flex-wrap: wrap; gap: 8px 14px; color: #657087; border-top: 1px solid #eef0f4; border-bottom: 1px solid #eef0f4; font-size: 8px; }
.match-reasons { margin-top: 14px; }
.match-reasons > strong { font-size: 9px; }
.match-reasons ul { margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; list-style: none; }
.match-reasons li { display: flex; align-items: flex-start; gap: 5px; color: #596171; font-size: 8px; line-height: 1.4; }
.match-reasons li span { color: var(--green); font-weight: 800; }
.match-bottom { margin-top: 16px; padding-top: 15px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid #eef0f4; }
.match-bottom small, .match-bottom strong { display: block; }
.match-bottom small { color: var(--muted); font-size: 7px; }
.match-bottom strong { margin-top: 3px; font-size: 9px; }
.match-actions { display: flex; gap: 7px; }
.match-actions .btn { padding: 8px 10px; font-size: 8px; }
.match-disclaimer { max-width: 850px; margin: 18px auto 0; color: #8b919c; text-align: center; font-size: 8px; }
.match-directory-banner { margin-bottom: 17px; padding: 15px 17px; display: flex; align-items: center; justify-content: space-between; gap: 18px; background: #efedff; border: 1px solid #ddd7ff; border-radius: 14px; }
.match-directory-banner > div { display: flex; align-items: center; gap: 11px; }
.match-directory-banner > div > span { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; color: var(--purple); background: #fff; border-radius: 9px; }
.match-directory-banner p { margin: 0; color: #625b83; font-size: 9px; line-height: 1.45; }
.match-directory-banner strong { display: block; color: var(--ink); font-size: 11px; }

@media (max-width: 980px) {
    .match-form-grid { grid-template-columns: 1fr 1fr; }
    .match-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
    .match-intro { padding: 23px; align-items: flex-start; flex-direction: column; }
    .match-privacy { max-width: none; }
    .match-form { padding: 20px; }
    .match-form-grid { grid-template-columns: 1fr; }
    .match-form-actions, .match-results-heading, .match-directory-banner { align-items: stretch; flex-direction: column; }
    .match-form-actions .btn, .match-directory-banner .btn { width: 100%; }
    .match-results-heading { align-items: flex-start; }
    .match-detected { flex-wrap: wrap; }
    .match-reasons ul { grid-template-columns: 1fr; }
    .match-bottom { align-items: stretch; flex-direction: column; }
    .match-actions .btn { flex: 1; }
}

/* Legal quotations and payment orders */
.request-quotes-section, .request-quotes-empty { margin-top: 17px; padding: 23px; }
.request-quotes-section .card-heading { align-items: center; }
.request-quotes-section .card-heading h3 { margin: 8px 0 0; }
.request-quote-list { margin-top: 15px; display: grid; gap: 8px; }
.request-quote-list > a { padding: 13px 14px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; color: var(--ink); background: #fafafd; border: 1px solid #e6e7ed; border-radius: 11px; }
.request-quote-list > a > div { display: grid; gap: 4px; }
.request-quote-list strong { font-size: 11px; }
.request-quote-list small { color: var(--muted); font-size: 8px; }
.request-quote-list > a > b { color: var(--purple); font-size: 13px; }
.request-quote-list > a > span:last-child { color: var(--purple); }
.request-quotes-empty { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.request-quotes-empty > span { width: 42px; height: 42px; display: grid; place-items: center; color: var(--purple); background: var(--purple-soft); border-radius: 11px; font-size: 18px; }
.request-quotes-empty h3 { margin: 0 0 4px; font-size: 13px; }
.request-quotes-empty p { margin: 0; color: var(--muted); font-size: 9px; }
.quote-status { width: fit-content; padding: 4px 7px; color: #666d79; background: #eceef2; border-radius: 999px; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.quote-status-sent { color: #78580f; background: #fff3cf; }
.quote-status-accepted { color: #176451; background: #dff6ed; }
.quote-status-rejected, .quote-status-withdrawn, .quote-status-expired { color: #7d4750; background: #f8e8eb; }
.quote-form-layout, .quote-detail-layout, .payment-layout { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 290px; align-items: start; gap: 18px; }
.quote-form-card { padding: 28px; }
.quote-form-card > h2 { margin: 12px 0 6px; font-size: 22px; }
.quote-form-card > p { margin: 0 0 22px; color: var(--muted); font-size: 10px; }
.quote-form-grid { display: grid; grid-template-columns: 1.5fr .7fr; gap: 12px; }
.quote-form .form-row > small { margin-top: 5px; display: block; color: var(--muted); font-size: 8px; }
.quote-form-actions { margin-top: 8px; display: flex; justify-content: flex-end; gap: 9px; }
.quote-case-summary, .quote-actions-card, .payment-security { position: sticky; top: 24px; padding: 23px; }
.quote-case-summary > span, .payment-security > span { width: 40px; height: 40px; display: grid; place-items: center; color: var(--purple); background: var(--purple-soft); border-radius: 11px; font-size: 17px; }
.quote-case-summary > small { margin-top: 17px; display: block; color: var(--muted); font-size: 7px; font-weight: 800; letter-spacing: .09em; }
.quote-case-summary h3 { margin: 8px 0; font-size: 15px; }
.quote-case-summary > p { color: var(--muted); font-size: 9px; line-height: 1.55; }
.quote-case-summary dl { margin: 17px 0 0; padding-top: 13px; display: grid; gap: 10px; border-top: 1px solid var(--line); }
.quote-case-summary dl > div { display: flex; justify-content: space-between; gap: 10px; font-size: 8px; }
.quote-case-summary dt { color: var(--muted); }
.quote-case-summary dd { margin: 0; font-weight: 700; text-align: right; }
.quote-document { padding: 30px; }
.quote-document > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.quote-document > header h2 { margin: 12px 0 5px; font-size: 23px; }
.quote-document > header p { margin: 0; color: var(--muted); font-size: 9px; }
.quote-price { margin: 25px 0; padding: 20px; display: flex; align-items: baseline; gap: 7px; background: linear-gradient(135deg, #f0edff, #faf9ff); border-radius: 14px; }
.quote-price small { margin-right: auto; color: #6d6496; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.quote-price strong { color: var(--purple); font-size: 27px; }
.quote-price span { color: var(--muted); font-size: 9px; font-weight: 700; }
.quote-document > section { padding: 19px 0; border-top: 1px solid var(--line); }
.quote-document > section h3 { margin: 0 0 9px; font-size: 13px; }
.quote-document > section p { margin: 0; color: #4f5662; font-size: 10px; line-height: 1.7; }
.quote-facts { padding: 16px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; border-top: 1px solid var(--line); }
.quote-facts > div { padding: 11px; background: #fafafd; border-radius: 9px; }
.quote-facts small, .quote-facts strong { display: block; }
.quote-facts small { margin-bottom: 4px; color: var(--muted); font-size: 7px; }
.quote-facts strong { font-size: 9px; }
.quote-legal-note { margin-top: 15px; padding: 13px; color: #6e7480; background: #f7f8fa; border-radius: 9px; font-size: 8px; line-height: 1.55; }
.quote-actions-card h3 { margin: 0 0 7px; font-size: 15px; }
.quote-actions-card p { color: var(--muted); font-size: 9px; line-height: 1.5; }
.quote-actions-card form + form, .quote-actions-card form + a, .quote-actions-card a + a, .quote-actions-card p + form { margin-top: 8px; }
.private-quotes-bar { padding: 9px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fffdf7; border-bottom: 1px solid #eee8d8; }
.private-quotes-bar > div { display: flex; align-items: center; gap: 7px; }
.private-quotes-bar > div:first-child > span { color: #8e6b19; }
.private-quotes-bar strong { font-size: 9px; }
.private-quotes-bar small { color: var(--muted); font-size: 7px; }
.private-quotes-bar a { padding: 6px 8px; color: #625126; background: #fff; border: 1px solid #e8dfc5; border-radius: 7px; font-size: 7px; }
.private-quotes-bar a b { margin-left: 4px; color: var(--muted); font-size: 6px; text-transform: uppercase; }
.private-quotes-bar .private-new-quote { color: #fff; background: var(--purple); border-color: var(--purple); font-weight: 700; }
.payment-card { max-width: 670px; padding: 32px; }
.payment-lock { width: 46px; height: 46px; margin-bottom: 15px; display: grid; place-items: center; color: var(--purple); background: var(--purple-soft); border-radius: 13px; font-size: 19px; }
.payment-card h2 { margin: 13px 0 5px; font-size: 21px; }
.payment-card > p { margin: 0; color: var(--muted); font-size: 10px; }
.payment-total { margin: 23px 0; padding: 19px; display: flex; align-items: baseline; gap: 7px; background: #f5f3ff; border-radius: 13px; }
.payment-total small { margin-right: auto; color: #6d6496; font-size: 8px; font-weight: 800; }
.payment-total strong { color: var(--purple); font-size: 26px; }
.payment-total span { color: var(--muted); font-size: 9px; }
.payment-order-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.payment-order-meta > div { padding: 12px; background: #fafafd; border-radius: 9px; }
.payment-order-meta small, .payment-order-meta strong { display: block; }
.payment-order-meta small { margin-bottom: 3px; color: var(--muted); font-size: 7px; }
.payment-order-meta strong { font-size: 9px; }
.payment-provider-pending, .payment-success { margin-top: 19px; padding: 15px; border-radius: 11px; }
.payment-provider-pending { color: #6b5620; background: #fff7dc; border: 1px solid #efe0a9; }
.payment-provider-pending strong, .payment-success strong { font-size: 10px; }
.payment-provider-pending p, .payment-success p { margin: 4px 0 0; font-size: 8px; line-height: 1.55; }
.payment-success { display: flex; gap: 10px; color: #176451; background: #e7f8f2; }
.payment-button { margin-top: 19px; }
.payment-back-link { margin-top: 17px; display: inline-block; color: var(--purple); font-size: 8px; font-weight: 700; }
.payment-security h3 { margin: 14px 0 6px; font-size: 14px; }
.payment-security p, .payment-security li { color: var(--muted); font-size: 9px; line-height: 1.55; }
.payment-security ul { padding-left: 17px; }

@media (max-width: 780px) {
    .quote-form-layout, .quote-detail-layout, .payment-layout { grid-template-columns: 1fr; }
    .quote-case-summary, .quote-actions-card, .payment-security { position: static; }
    .quote-form-grid, .quote-facts { grid-template-columns: 1fr; }
    .request-quotes-empty { grid-template-columns: auto 1fr; }
    .request-quotes-empty .btn { grid-column: 1 / -1; }
    .private-quotes-bar { align-items: flex-start; flex-direction: column; }
    .private-quotes-bar > div:last-child { max-width: 100%; overflow-x: auto; }
}

/* Notification center */
.topbar-actions { display: flex; align-items: center; gap: 14px; }
.notification-bell { position: relative; width: 34px; height: 34px; display: grid; place-items: center; color: var(--ink); background: #fff; border: 1px solid #e2e4eb; border-radius: 10px; font-size: 18px; }
.notification-bell span { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; color: #fff; background: #5b3fd6; border: 2px solid #fff; border-radius: 10px; font-size: 8px; font-weight: 800; }
.nav-badge { min-width: 19px; height: 19px; margin-left: auto; padding: 0 6px; display: grid; place-items: center; color: #fff; background: #5b3fd6; border-radius: 10px; font-size: 8px; }
.notification-center { max-width: 900px; }
.notification-toolbar { margin-bottom: 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.notification-toolbar h2 { margin: 0 0 5px; font-size: 20px; }
.notification-toolbar p { margin: 0; color: var(--muted); font-size: 10px; }
.notification-list { display: grid; gap: 9px; }
.notification-item { padding: 16px 18px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; background: #fff; border: 1px solid #e5e7ef; border-radius: 14px; }
.notification-item.is-unread { background: #faf9ff; border-color: #d9d2fb; box-shadow: 0 7px 20px rgba(72,52,171,.05); }
.notification-kind { width: 38px; height: 38px; display: grid; place-items: center; color: #5b3fd6; background: #eeebff; border-radius: 11px; font-size: 15px; }
.notification-title-row { display: flex; align-items: center; gap: 7px; }
.notification-title-row h3 { margin: 0; font-size: 12px; }
.unread-dot { width: 7px; height: 7px; flex: 0 0 auto; background: #5b3fd6; border-radius: 50%; }
.notification-copy p { margin: 4px 0; color: #5e6675; font-size: 10px; line-height: 1.45; }
.notification-copy time { color: #9a9fac; font-size: 8px; }
.notification-open { padding: 8px 11px; color: #5b3fd6; background: #fff; border: 1px solid #d6d0f7; border-radius: 8px; cursor: pointer; font: 700 9px inherit; white-space: nowrap; }
.pagination { margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--muted); font-size: 9px; }
.pagination a { color: var(--purple); font-weight: 700; }

@media (max-width: 680px) {
    .topbar-help { display: none; }
    .notification-toolbar { align-items: flex-start; flex-direction: column; }
    .notification-item { grid-template-columns: auto 1fr; padding: 14px; }
    .notification-item form { grid-column: 2; }
    .notification-open { width: 100%; }
}