:root {
  --navy: #0e1f3d; --navy-2: #16294d; --blue: #2f6bff; --blue-dark: #1f55e0; --blue-soft: #e8efff;
  --bg: #f4f6fb; --card: #fff; --text: #14213d; --muted: #6b7a90; --border: #e3e8f0;
  --success: #1a9e5c; --danger: #d64545; --warn: #d98a16;
  --sidebar: 236px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 15px/1.5 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--text); background: var(--bg); }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.55rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 .5rem; }
h2 { font-size: 1.05rem; font-weight: 600; margin: 0; }
h3 { font-size: .95rem; margin: 1rem 0 .5rem; }
code { background: #eef2f9; padding: 1px 5px; border-radius: 4px; font-size: .9em; }
pre { background: #f7f9fc; padding: .75rem; border-radius: 6px; white-space: pre-wrap; font: 13px/1.5 ui-monospace, Consolas, monospace; }
.pre { white-space: pre-wrap; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---- sidebar ---- */
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar); background: var(--navy); color: #c9d4ea; display: flex; flex-direction: column; padding: 1.1rem .9rem; }
.brand { display: flex; align-items: center; gap: .6rem; color: #fff; font-weight: 800; font-size: 1.15rem; padding: .25rem .5rem 1.25rem; letter-spacing: -.01em; }
.brand:hover { text-decoration: none; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar nav a { display: flex; align-items: center; gap: .7rem; padding: .6rem .75rem; border-radius: 8px; color: #c9d4ea; font-weight: 500; }
.sidebar nav a svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.sidebar nav a:hover { background: var(--navy-2); color: #fff; text-decoration: none; }
.sidebar nav a.active { background: var(--blue); color: #fff; }
.sidebar-foot { margin-top: auto; border-top: 1px solid rgba(255,255,255,.1); padding-top: .9rem; font-size: .9rem; }
.sidebar-foot > a { color: #9fb0d0; display: block; padding: .3rem .75rem; }
.me { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.who { flex: 1; color: #fff; font-weight: 500; }
button.link { background: none; border: 0; padding: 0; color: #9fb0d0; cursor: pointer; font: inherit; }
button.link.danger { color: var(--danger); }

/* ---- content ---- */
.content { margin-left: var(--sidebar); min-height: 100%; }
body.public .content { margin-left: 0; }
.topsearch { display: flex; align-items: center; gap: .75rem; background: #fff; border-bottom: 1px solid var(--border); padding: .7rem 1.75rem; position: sticky; top: 0; z-index: 5; }
.topsearch svg { width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; }
.topsearch input { flex: 1; border: 0; font: inherit; font-size: .98rem; padding: .5rem 0; background: transparent; }
.topsearch input:focus { outline: none; }
.page { padding: 1.75rem 2rem; width: 100%; }

/* ---- home hero ---- */
.hero { background: linear-gradient(135deg, var(--navy) 0%, #1a3a7a 70%, #2557c9 100%); color: #fff; border-radius: 14px; padding: 2.5rem 2.5rem 2rem; margin-bottom: 1.5rem; }
.hero h1 { color: #fff; font-size: 2rem; max-width: 22ch; margin-bottom: .5rem; }
.hero p { color: #c9d7f5; max-width: 60ch; margin: 0 0 1.5rem; font-size: 1.02rem; }
.hero-search { display: flex; gap: .5rem; background: #fff; padding: .45rem; border-radius: 10px; max-width: 900px; }
.hero-search input { flex: 1; border: 0; font: inherit; font-size: 1rem; padding: .55rem .75rem; }
.hero-search input:focus { outline: none; }
.hero-search select { border: 0; border-left: 1px solid var(--border); font: inherit; padding: 0 .75rem; color: var(--text); background: #fff; max-width: 170px; border-radius: 0; }
.hero-stats { display: flex; gap: 2.5rem; margin-top: 1.75rem; flex-wrap: wrap; }
.hero-stats strong { display: block; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.hero-stats span { color: #c9d7f5; font-size: .9rem; }

.quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.quick-card, .quick-card button { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: .9rem; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem; color: var(--text); text-align: left; width: 100%; font: inherit; cursor: pointer; }
.quick-card.as-form { display: block; padding: 0; border: 0; background: none; }
.quick-card:hover, .quick-card button:hover { border-color: var(--blue); text-decoration: none; }
.quick-card svg { grid-row: 1 / 3; width: 40px; height: 40px; padding: 9px; border-radius: 10px; background: var(--blue-soft); fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.quick-card strong { font-weight: 600; }
.quick-card span { color: var(--muted); font-size: .88rem; }

/* ---- cards & tables ---- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; margin-bottom: 1.25rem; overflow-x: auto; }
.card.narrow { max-width: 640px; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .75rem; }
.card-head a { font-size: .9rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.page-head > div { display: flex; gap: .5rem; align-items: center; }
.empty { color: var(--muted); padding: 1.5rem 0; text-align: center; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .6rem .6rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-size: .8rem; font-weight: 600; color: var(--muted); }
tr:last-child td { border-bottom: 0; }
td.right { text-align: right; }
dl { display: grid; grid-template-columns: 110px 1fr; gap: .35rem 1rem; margin: 0; }
dt { color: var(--muted); }
dd { margin: 0; }

/* ---- buttons, badges, flashes ---- */
.btn { display: inline-block; padding: .5rem 1rem; border-radius: 8px; border: 1px solid var(--border); background: #fff; color: var(--text); cursor: pointer; font: inherit; font-weight: 500; white-space: nowrap; }
.btn:hover { background: #f1f4fa; text-decoration: none; }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.primary:hover { background: var(--blue-dark); }
.btn.success { background: var(--success); border-color: var(--success); color: #fff; }
.btn.danger { color: var(--danger); border-color: #f3c4c4; }
.btn.danger:hover { background: #fdf2f2; }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
form.inline { display: inline; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; margin: .75rem 0; }
.row { display: flex; gap: .5rem; align-items: center; }

.badge { display: inline-block; padding: .12rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: #e9edf5; color: #3b4a63; }
.badge.new { background: #e8efff; color: #1f4fcc; }
.badge.in_sequence, .badge.active { background: #dbeafe; color: #1e40af; }
.badge.replied, .badge.sent { background: #dcf5e7; color: #14653b; }
.badge.completed { background: #eef1f6; color: #4b5563; }
.badge.unsubscribed, .badge.stopped, .badge.failed { background: #fde4e4; color: #9b2323; }
.badge.warn { background: #fdf0d5; color: #8a5300; }

.flash { padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; border: 1px solid; }
.flash.success { background: #f0fbf4; border-color: #bfe8cf; color: #14653b; }
.flash.error { background: #fdf2f2; border-color: #f3c4c4; color: #9b2323; }
.flash.warning { background: #fff8e8; border-color: #f5dfa5; color: #8a5300; }
.flash.info { background: #eef4ff; border-color: #c8d8ff; color: #1f4fcc; }

/* ---- forms ---- */
label { display: block; font-weight: 500; font-size: .9rem; margin-bottom: .25rem; }
input[type=text], input[type=email], input[type=url], input[type=search], input[type=number], input[type=password], select, textarea {
  width: 100%; padding: .55rem .7rem; border: 1px solid #cfd7e3; border-radius: 8px; font: inherit; background: #fff;
}
input:focus, select:focus, textarea:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(47,107,255,.15); }
.filters { display: flex; gap: .5rem; margin-bottom: 1rem; }
.filters input { max-width: 360px; }
.filters select { max-width: 200px; }
.bulk-bar { display: flex; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.bulk-bar select { max-width: 260px; }
.help { display: block; color: var(--muted); font-size: .85rem; }
.errorlist { color: var(--danger); margin: .2rem 0 0; padding-left: 1rem; font-size: .85rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.error { color: var(--danger); }
.pagination { display: flex; gap: 1rem; justify-content: center; margin: 1rem 0; }
.steps { padding-left: 1.25rem; }
.steps li { margin: .35rem 0; }
.steps-table input[type=number] { width: 90px; }
.steps-table select { min-width: 220px; }
details.email { border-bottom: 1px solid var(--border); padding: .5rem 0; }
details.email summary { cursor: pointer; display: flex; gap: .6rem; align-items: center; }


/* ---- responsive ---- */
.menu-toggle { display: none; }
@media (max-width: 1100px) {
  .page { padding: 1.25rem; }
  .quick { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  body { padding-top: 56px; }
  .sidebar { position: fixed; inset: 56px auto 0 0; width: min(280px, 85vw); transform: translateX(-100%); transition: transform .2s; z-index: 30; box-shadow: 0 0 0 100vw rgba(14,31,61,0); }
  body.nav-open .sidebar { transform: none; box-shadow: 0 0 0 100vw rgba(14,31,61,.45); }
  .sidebar .brand { display: none; }
  .content { margin-left: 0; }
  .mobile-bar { position: fixed; top: 0; left: 0; right: 0; height: 56px; background: var(--navy); color: #fff; display: flex; align-items: center; gap: .75rem; padding: 0 1rem; z-index: 40; }
  .mobile-bar .brand { padding: 0; font-size: 1.05rem; }
  .menu-toggle { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; background: transparent; color: #fff; border-radius: 8px; cursor: pointer; }
  .menu-toggle svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .topsearch { position: static; padding: .6rem 1rem; flex-wrap: wrap; }
  .topsearch input { min-width: 0; }
  .topsearch .btn { display: none; }
  .page { padding: 1rem; }
  .grid-2, .quick { grid-template-columns: 1fr; }
  .hero { padding: 1.5rem 1.25rem; border-radius: 12px; }
  .hero h1 { font-size: 1.45rem; }
  .hero-search { flex-wrap: wrap; }
  .hero-search input { flex: 1 1 100%; }
  .hero-search select { border-left: 0; max-width: none; flex: 1; padding: .5rem .75rem; }
  .hero-stats { gap: 1.25rem 2rem; }
  .people-tools { flex-direction: column; align-items: stretch; }
  .people-search { max-width: none; }
  .page-head > div { flex-wrap: wrap; }
  .bulk-float { left: 50%; width: calc(100% - 2rem); flex-wrap: wrap; bottom: 1rem; }
  .bulk-float select { flex: 1; }
  .login-wrap { grid-template-columns: 1fr; }
  .login-pitch { padding: 2.5rem 1.5rem; }
  .filters { flex-wrap: wrap; }
  dl { grid-template-columns: 90px 1fr; }
}
@media (min-width: 961px) {
  .mobile-bar { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .quick-card, .quick-card button, .btn { transition: border-color .15s, background .15s; }
}

/* ---- contacts (people) ---- */
.btn .i { width: 16px; height: 16px; vertical-align: -3px; margin-right: .4rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.people-head p { margin: 0; }
.people-tools { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.pills { display: flex; gap: .35rem; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--text); font-size: .88rem; font-weight: 500; }
.pill span { color: var(--muted); font-size: .8rem; }
.pill:hover { border-color: #b9c3d6; text-decoration: none; }
.pill.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.pill.on span { color: #b7c6ea; }
.people-search { position: relative; flex: 1; max-width: 380px; min-width: 240px; }
.people-search svg { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; }
.people-search input { padding-left: 2.3rem; padding-right: 2rem; }
.people-search .clear { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 1.2rem; line-height: 1; }

.people-card { padding: 0; overflow-x: auto; }
table.people { min-width: 860px; }
table.people th { padding: .8rem 1rem; background: #f8fafd; border-bottom: 1px solid var(--border); }
table.people td { padding: .75rem 1rem; vertical-align: middle; }
table.people tbody tr { transition: background .12s; }
table.people tbody tr:hover { background: #f8fafd; }
table.people tbody tr.picked { background: var(--blue-soft); }
table.people .chk { width: 44px; text-align: center; }
table.people input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--blue); cursor: pointer; }
.person { display: flex; align-items: center; gap: .75rem; color: var(--text); }
.person:hover { text-decoration: none; }
.person:hover strong { color: var(--blue); }
.person strong { display: block; font-weight: 600; line-height: 1.2; }
.person small { color: var(--muted); font-size: .8rem; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .8rem; color: #fff; letter-spacing: .02em; flex-shrink: 0; }
.avatar.tone-a { background: #2f6bff; } .avatar.tone-b { background: #7c4dff; } .avatar.tone-c { background: #0aa5a5; }
.avatar.tone-d { background: #e0641e; } .avatar.tone-e { background: #d23c77; }
.email-cell { white-space: nowrap; }
.email-cell a { color: var(--text); }
.icon-btn { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; border: 0; background: transparent; color: var(--muted); cursor: pointer; vertical-align: middle; }
.icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:hover { background: #eef2f9; color: var(--blue); text-decoration: none; }
.icon-btn.copy { opacity: 0; margin-left: .2rem; }
tr:hover .icon-btn.copy, .icon-btn.copy:focus-visible { opacity: 1; }
.icon-btn.copy.done { color: var(--success); }
.icon-btn.linkedin svg { fill: currentColor; stroke: none; }
.icon-btn.linkedin { color: #0a66c2; }
.next { white-space: nowrap; }

.empty-state { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 3rem 1rem; text-align: center; color: var(--muted); }
.empty-state svg { width: 48px; height: 48px; padding: 12px; border-radius: 14px; background: var(--blue-soft); fill: none; stroke: var(--blue); stroke-width: 1.7; stroke-linecap: round; margin-bottom: .5rem; }
.empty-state strong { color: var(--text); font-size: 1.05rem; }
.empty-state .actions { margin-top: .75rem; }

.bulk-float { position: fixed; left: calc(var(--sidebar) + 50%); transform: translateX(-50%); bottom: 1.5rem; display: flex; align-items: center; gap: .75rem; background: var(--navy); color: #fff; padding: .6rem .6rem .6rem 1.1rem; border-radius: 12px; box-shadow: 0 16px 40px rgba(14,31,61,.35); z-index: 20; }
.bulk-float select { width: auto; min-width: 220px; border-color: transparent; }
.bulk-float .btn.ghost { background: transparent; border-color: rgba(255,255,255,.25); color: #fff; }
.bulk-float .btn.ghost:hover { background: rgba(255,255,255,.1); }
@media (max-width: 960px) {
  .bulk-float { left: 50%; width: calc(100% - 2rem); flex-wrap: wrap; }
  table.people th:nth-child(6), table.people td:nth-child(6) { display: none; }
}
.bulk-float[hidden] { display: none; }
.me form { flex-shrink: 0; }
.me button.link { white-space: nowrap; }

/* ---- contacts header ---- */
.people-header { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 1.4rem 1.5rem 1.1rem; margin-bottom: 1.25rem; display: grid; gap: 1rem; }
.people-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.people-title h1 { font-size: 1.7rem; margin-bottom: .1rem; }
.people-title p { margin: 0; }
.people-actions { display: flex; gap: .5rem; }
.people-search.big { max-width: none; display: flex; align-items: center; gap: .5rem; }
.people-search.big input { height: 50px; font-size: 1.02rem; border-radius: 10px; padding-left: 2.6rem; }
.people-search.big svg { left: .9rem; width: 20px; height: 20px; }
.people-search.big .clear { right: 7.5rem; }
.people-search.big .btn { height: 50px; padding: 0 1.4rem; border-radius: 10px; }
@media (max-width: 960px) {
  .people-header { padding: 1rem; border-radius: 12px; }
  .people-search.big .btn { display: none; }
  .people-search.big .clear { right: .6rem; }
  .people-actions { width: 100%; }
  .people-actions .btn { flex: 1; text-align: center; }
}

.no-email { color: var(--warn); font-size: .9rem; }

/* ---- companies ---- */
.company-link { color: var(--text); }
.company-link:hover { color: var(--blue); }
table.companies { min-width: 860px; }
.co { display: flex; align-items: center; gap: .75rem; color: var(--text); }
.co:hover { text-decoration: none; } .co:hover strong { color: var(--blue); }
.co strong { display: block; font-weight: 600; line-height: 1.2; }
.co small { color: var(--muted); font-size: .8rem; }
.logo { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); font-weight: 700; font-size: .8rem; flex-shrink: 0; }
.layer { display: inline-block; padding: .12rem .6rem; border-radius: 6px; background: #eef2f9; color: #3b4a63; font-size: .78rem; font-weight: 500; white-space: nowrap; }
.relevance { color: var(--muted); font-size: .88rem; max-width: 46ch; }
.meter { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.meter i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #d7deea; }
.meter i.on { background: var(--blue); }
.kv { display: grid; grid-template-columns: 120px 1fr; gap: .4rem 1rem; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; }

/* ---- company page ---- */
.crumb { display: inline-flex; align-items: center; gap: .25rem; color: var(--muted); font-size: .9rem; margin-bottom: .75rem; }
.crumb svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.crumb:hover { color: var(--blue); text-decoration: none; }
.co-hero { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem; margin-bottom: 1.25rem; display: grid; grid-template-columns: 1fr auto; gap: 1.25rem; }
.co-hero-main { display: flex; gap: 1.1rem; align-items: flex-start; min-width: 0; }
.co-hero h1 { font-size: 1.75rem; margin: 0 0 .35rem; }
.logo.big { width: 64px; height: 64px; border-radius: 16px; font-size: 1.25rem; background: linear-gradient(135deg, var(--navy), #2557c9); color: #fff; }
.co-facts { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.fact { display: inline-flex; align-items: center; gap: .35rem; color: var(--text); font-size: .92rem; }
.fact svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
a.fact { color: var(--blue); }
.co-relevance { margin: .75rem 0 0; color: #3b4a63; max-width: 70ch; }
.co-hero-actions { display: flex; gap: .5rem; align-items: flex-start; }
.co-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; border-top: 1px solid var(--border); padding-top: 1.1rem; }
.co-stats div { display: flex; flex-direction: column; }
.co-stats strong { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; }
.co-stats span { color: var(--muted); font-size: .85rem; }
.card-head.padded { padding: 1rem 1rem .25rem; margin: 0; }
@media (max-width: 960px) {
  .co-hero { grid-template-columns: 1fr; padding: 1.1rem; }
  .co-hero-actions { order: 3; }
  .co-stats { grid-template-columns: repeat(2, 1fr); }
  .logo.big { width: 52px; height: 52px; }
}

/* ---- three-column record page ---- */
.record { display: grid; grid-template-columns: 300px minmax(0, 1fr) 340px; gap: 1.25rem; align-items: start; }
.rec-col { display: grid; gap: 1.25rem; min-width: 0; }
.rec-card { margin: 0; overflow: visible; }
.rec-identity { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; }
.rec-identity h1 { font-size: 1.3rem; margin: .25rem 0 0; }
.rec-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 1rem 0; }
.rec-actions .btn { text-align: center; }
.rec-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; border-top: 1px solid var(--border); padding-top: .9rem; }
.rec-stats div { display: flex; flex-direction: column; padding: .35rem .5rem; border-radius: 8px; background: #f8fafd; }
.rec-stats strong { font-size: 1.15rem; }
.rec-stats span { color: var(--muted); font-size: .8rem; }
.props { display: grid; grid-template-columns: 1fr; gap: .6rem; margin: .75rem 0 0; }
.props dt { color: var(--muted); font-size: .78rem; }
.props dd { margin: 0; font-size: .93rem; word-break: break-word; }

.note-form textarea { resize: vertical; border-radius: 8px; }
.note-form-row { display: flex; gap: .5rem; margin-top: .5rem; }
.note-form-row select { flex: 1; }

.timeline { list-style: none; margin: .5rem 0 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.tl { position: relative; padding: 0 0 1.1rem 2rem; }
.tl:last-child { padding-bottom: 0; }
.tl-dot { position: absolute; left: 3px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid #b9c3d6; }
.tl.note .tl-dot { border-color: #7c4dff; }
.tl.email .tl-dot { border-color: var(--blue); }
.tl.failed .tl-dot { border-color: var(--danger); }
.tl.enrolled .tl-dot { border-color: #0aa5a5; }
.tl.replied .tl-dot { border-color: var(--success); }
.tl.completed .tl-dot, .tl.stopped .tl-dot { border-color: #6b7a90; }
.tl-head { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; }
.tl-head strong { font-weight: 600; font-size: .93rem; }
.tl-head time { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.tl-who { display: inline-block; font-size: .85rem; margin-top: .1rem; }
.tl-title { font-size: .9rem; margin-top: .2rem; }
.tl-text { margin: .3rem 0 0; color: #3b4a63; font-size: .88rem; white-space: pre-wrap; background: #f8fafd; border-radius: 8px; padding: .5rem .7rem; }
.timeline .empty { padding: 1rem 0; }

.assoc { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .25rem; }
.assoc li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem; border-radius: 8px; }
.assoc li:hover { background: #f8fafd; }
.assoc .person { min-width: 0; }
.assoc-main { min-width: 0; display: flex; flex-direction: column; }
.assoc-main small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assoc-side { display: flex; align-items: center; gap: .25rem; flex-shrink: 0; }
.assoc .empty { display: block; color: var(--muted); text-align: left; padding: .5rem; }

@media (max-width: 1280px) { .record { grid-template-columns: 280px minmax(0, 1fr); } .rec-right { grid-column: 1 / -1; } }
@media (max-width: 960px) { .record { grid-template-columns: 1fr; } .rec-right { grid-column: auto; } }
.record { grid-template-columns: 300px minmax(0, 1fr) minmax(0, 340px); }
.assoc .person { flex: 1; min-width: 0; overflow: hidden; }
.assoc-main { overflow: hidden; }
.assoc-main small { display: block; }
.rec-col { grid-template-columns: minmax(0, 1fr); }
.rec-card { max-width: 100%; }
.assoc { grid-template-columns: minmax(0, 1fr); }
.assoc li { min-width: 0; }

/* ---- contact form ---- */
.cform-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.25rem; align-items: start; }
.cform-main { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 1.75rem 2rem; }
.cform-head { margin-bottom: 1.25rem; }
.cform-head h1 { font-size: 1.6rem; margin-bottom: .2rem; }
.cform-head p { margin: 0; }
.fs { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 1.5rem; padding: 1.5rem 0; border-top: 1px solid var(--border); }
.fs header { display: flex; gap: .75rem; align-items: flex-start; }
.fs header h2 { font-size: 1rem; margin: .2rem 0 .15rem; }
.fs header p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.45; }
.fs-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; background: var(--blue-soft); display: grid; place-items: center; }
.fs-icon svg { width: 20px; height: 20px; fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fs-fields.two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.f.span { grid-column: 1 / -1; }
.f label { margin-bottom: .35rem; }
.f label em { color: var(--danger); font-style: normal; }
.f input, .f select, .f textarea { height: 44px; border-radius: 9px; border-color: #d6dce8; transition: border-color .12s, box-shadow .12s; }
.f textarea { height: auto; }
.f input::placeholder, .f textarea::placeholder { color: #a6b0c3; }
.f.has-error input { border-color: var(--danger); }
.f .errorlist { margin-top: .3rem; }
.cform-side { position: sticky; top: 1.5rem; display: grid; gap: 1rem; }
.preview { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .15rem; padding: 1.75rem 1.25rem 1.25rem; margin: 0; }
.preview strong { margin-top: .6rem; font-size: 1.05rem; }
.avatar.xl { width: 72px; height: 72px; font-size: 1.4rem; }
.avatar.xl:not([class*="tone-"]) { background: #cbd5e1; }
.pv-lines { width: 100%; margin-top: 1rem; display: grid; gap: .4rem; text-align: left; }
.pv-line { display: flex; align-items: center; gap: .5rem; font-size: .86rem; padding: .5rem .7rem; background: #f8fafd; border-radius: 8px; color: var(--text); }
.pv-line svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pv-line.warn { color: var(--warn); background: #fff8e8; }
.pv-line.warn svg { stroke: var(--warn); }
.pv-line[hidden] { display: none; }
.pv-hint { margin: .9rem 0 0; }
.cform-actions { display: grid; gap: .5rem; }
.cform-actions .btn { text-align: center; height: 44px; line-height: 28px; }
@media (max-width: 1100px) { .fs { grid-template-columns: 1fr; gap: .9rem; } }
@media (max-width: 960px) {
  .cform-grid { grid-template-columns: 1fr; }
  .cform-side { position: static; }
  .cform-main { padding: 1.1rem; }
  .fs-fields.two { grid-template-columns: 1fr; }
}

/* ---- contact record extras ---- */
.seq-box { display: flex; flex-direction: column; gap: .15rem; background: var(--blue-soft); border-radius: 10px; padding: .75rem .9rem; margin-bottom: .75rem; }
.stack-btns { display: grid; gap: .5rem; }
.stack-btns form { display: contents; }
.hist { list-style: none; margin: 1rem 0 0; padding: .75rem 0 0; border-top: 1px solid var(--border); display: grid; gap: .4rem; font-size: .9rem; }
.tl-more summary { cursor: pointer; color: var(--blue); font-size: .85rem; margin-top: .3rem; }
.rec-identity .badge { margin-top: .25rem; }

/* ---- HubSpot-style record ---- */
.hs { display: grid; grid-template-columns: 300px minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
.hs-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; }
.hs-left, .hs-right { display: grid; gap: 1rem; position: sticky; top: 1rem; }
.hs-bar { display: flex; justify-content: space-between; align-items: center; padding: .6rem .9rem; border-bottom: 1px solid var(--border); }
.hs-back { display: inline-flex; align-items: center; gap: .25rem; font-weight: 500; color: var(--text); font-size: .92rem; }
.hs-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .2rem; font-weight: 500; font-size: .92rem; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.menu-list { position: absolute; right: 0; top: 1.8rem; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 30px rgba(14,31,61,.12); min-width: 170px; padding: .35rem; z-index: 10; display: grid; }
.menu-list a, .menu-list button { display: block; width: 100%; text-align: left; padding: .45rem .6rem; border-radius: 6px; color: var(--text); background: none; border: 0; font: inherit; cursor: pointer; }
.menu-list a:hover, .menu-list button:hover { background: #f1f4fa; text-decoration: none; }
.menu-list .danger { color: var(--danger); }
.hs-profile { display: flex; gap: .9rem; padding: 1rem .9rem .6rem; align-items: flex-start; }
.hs-profile .avatar.xl { width: 52px; height: 52px; font-size: 1.05rem; }
.hs-name { min-width: 0; }
.hs-name h1 { font-size: 1.25rem; line-height: 1.2; margin: .1rem 0 .25rem; display: flex; align-items: center; gap: .4rem; }
.pencil svg { width: 15px; height: 15px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pencil:hover svg { stroke: var(--blue); }
.hs-sub { font-size: .9rem; color: var(--text); }
.hs-mail { font-size: .9rem; margin-top: .35rem; display: flex; align-items: center; gap: .2rem; word-break: break-all; }
.hs-mail a { font-weight: 500; }
.hs-mail .icon-btn { opacity: 1; width: 24px; height: 24px; }
.hs-ext { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; margin-top: .25rem; }
.hs-ext svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hs-actions { display: flex; justify-content: space-between; padding: .6rem .9rem 1rem; gap: .25rem; }
.qa { display: flex; flex-direction: column; align-items: center; gap: .3rem; background: none; border: 0; font: inherit; font-size: .72rem; color: var(--text); cursor: pointer; padding: 0; }
.qa span { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #cfd7e3; display: grid; place-items: center; background: #fff; transition: border-color .12s, background .12s; }
.qa span svg { width: 16px; height: 16px; fill: none; stroke: var(--text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.qa:hover span { border-color: var(--blue); background: var(--blue-soft); }
.qa:hover { text-decoration: none; }
.hs-section summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: .8rem .9rem; font-weight: 600; }
.hs-section summary::-webkit-details-marker { display: none; }
.hs-section summary > span:first-child { display: inline-flex; align-items: center; gap: .4rem; }
.hs-section summary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.hs-section:not([open]) summary svg { transform: rotate(-90deg); }
.hs-mini { font-size: .82rem; font-weight: 500; }
.hs-props { display: grid; grid-template-columns: 1fr; gap: .1rem .5rem; margin: 0; padding: 0 .9rem .9rem; }
.hs-props dt { color: var(--muted); font-size: .78rem; margin-top: .55rem; }
.hs-props dd { margin: 0; font-size: .92rem; word-break: break-word; }
.hs-props.tight { padding-top: .25rem; }
.hs-bg { padding: 0 .9rem .9rem; }
.hs-bg strong { font-size: .82rem; color: var(--muted); }

.hs-mid { background: #fff; border: 1px solid var(--border); border-radius: 10px; min-width: 0; }
.hs-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--border); background: #f8fafd; border-radius: 10px 10px 0 0; overflow: hidden; }
.hs-tab { background: none; border: 0; border-right: 1px solid var(--border); padding: .9rem; font: inherit; font-weight: 500; color: var(--text); cursor: pointer; }
.hs-tab:last-child { border-right: 0; }
.hs-tab.active { background: #fff; color: var(--text); box-shadow: inset 0 -2px 0 var(--blue); }
.hs-pane { padding: 0 1.1rem 1.1rem; }
.hs-pane[hidden] { display: none; }
.hs-filters { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); overflow-x: auto; }
.hs-filter { background: none; border: 0; border-bottom: 3px solid transparent; padding: .8rem .6rem .6rem; font: inherit; font-size: .9rem; color: var(--text); cursor: pointer; white-space: nowrap; }
.hs-filter em { font-style: normal; color: var(--muted); font-size: .78rem; margin-left: .2rem; }
.hs-filter.active { border-bottom-color: var(--navy); font-weight: 600; }
.hs-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 0 .5rem; }
.hs-search { position: relative; width: 240px; }
.hs-search input { height: 36px; border-radius: 999px; padding-right: 2.2rem; }
.hs-search svg { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; }
.hs-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 500; color: var(--text); cursor: pointer; }
.hs-link:hover { color: var(--blue); }
.hs-compose { border: 1px solid var(--blue); border-radius: 10px; padding: .75rem; margin: .5rem 0 .75rem; background: #fbfcff; }
.hs-compose[hidden] { display: none; }
.hs-compose-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.hs-compose-head select { width: auto; height: 34px; }
.hs-compose textarea { border-color: transparent; background: #fff; }
.hs-compose-foot { display: flex; justify-content: flex-end; margin-top: .5rem; }
.hs-month h3 { font-size: .95rem; font-weight: 600; margin: 1rem 0 .6rem; }
.hs-month[hidden], .hs-act[hidden], .hs-empty[hidden] { display: none; }
.hs-act { border: 1px solid var(--border); border-radius: 8px; margin-bottom: .6rem; background: #fff; }
.hs-act summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .75rem .9rem; }
.hs-act summary::-webkit-details-marker { display: none; }
.hs-act-icon { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; background: #eef2f9; }
.hs-act-icon svg { width: 15px; height: 15px; fill: none; stroke: #3b4a63; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hs-act.k-email .hs-act-icon { background: #e8efff; } .hs-act.k-email .hs-act-icon svg { stroke: var(--blue); }
.hs-act.k-note .hs-act-icon { background: #fdf0d5; } .hs-act.k-note .hs-act-icon svg { stroke: #8a5300; }
.hs-act.k-call .hs-act-icon, .hs-act.k-meeting .hs-act-icon { background: #dcf5e7; } .hs-act.k-call .hs-act-icon svg, .hs-act.k-meeting .hs-act-icon svg { stroke: #14653b; }
.hs-act.k-task .hs-act-icon { background: #f3e8ff; } .hs-act.k-task .hs-act-icon svg { stroke: #6b21a8; }
.hs-act.s-failed .hs-act-icon { background: #fde4e4; } .hs-act.s-failed .hs-act-icon svg { stroke: var(--danger); }
.hs-act-title { font-weight: 600; font-size: .92rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-act-title small { font-weight: 400; color: var(--muted); margin-left: .35rem; }
.hs-act summary time { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.hs-act-body { padding: 0 .9rem .9rem 3.1rem; font-size: .92rem; }
.hs-act-body pre, .hs-act-body p { margin: 0; }
.hs-empty { color: var(--muted); padding: 2rem; text-align: center; }
.hs-block { padding-top: 1rem; }
.hs-block h3 { font-size: .95rem; margin: 0 0 .6rem; }
.hs-hl { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.hs-hl div { background: #f8fafd; border-radius: 8px; padding: .7rem .8rem; display: flex; flex-direction: column; gap: .15rem; }
.hs-hl span { color: var(--muted); font-size: .78rem; }
.hs-hl strong { font-size: .95rem; }
.hs-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .92rem; }
.hs-recent li { display: flex; align-items: center; gap: .5rem; }
.hs-recent time { margin-left: auto; color: var(--muted); font-size: .8rem; }
.hs-dot { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; }
.hs-dot.k-email { background: var(--blue); } .hs-dot.k-note { background: #d98a16; } .hs-dot.k-sequence { background: #6b21a8; }

.ai-chip { font-size: .7rem; font-weight: 700; letter-spacing: .02em; background: #ffe4f1; color: #b4157a; padding: .1rem .5rem; border-radius: 6px; }
.hs-summary { margin: 0 .9rem .9rem; border: 1px solid #f3c6de; border-radius: 8px; padding: .8rem .9rem; font-size: .9rem; }
.hs-summary-meta { color: var(--muted); font-size: .75rem; margin-bottom: .4rem; }
.hs-summary p { margin: 0 0 .6rem; line-height: 1.55; }
.hs-summary-src { color: var(--muted); font-size: .78rem; }
.hs-co { padding: .25rem .9rem .5rem; }
.primary-chip { margin-left: auto; font-size: .72rem; font-weight: 600; color: #14653b; border: 1px solid #14653b; border-radius: 999px; padding: .05rem .5rem; }
.hs-right .assoc { padding: 0 .9rem .9rem; }
@media (max-width: 1280px) { .hs { grid-template-columns: 280px minmax(0, 1fr); } .hs-right { grid-column: 1 / -1; position: static; grid-template-columns: 1fr 1fr; } }
@media (max-width: 960px) { .hs { grid-template-columns: 1fr; } .hs-left, .hs-right { position: static; grid-template-columns: 1fr; } .hs-hl { grid-template-columns: 1fr 1fr; } .hs-search { width: 100%; } }

.pills-row { display: grid; gap: .5rem; }
.lvl { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .02em; padding: 1px 6px; border-radius: 4px; vertical-align: 1px; }
.lvl.senior { background: #dcf5e7; color: #14653b; }
.lvl.junior { background: #eef1f6; color: #4b5563; }

.quick { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .quick { grid-template-columns: 1fr; } }

/* ---- contacts list: actions, sorting ---- */
table.people thead th { position: sticky; top: 0; z-index: 2; }
th a.sort { color: var(--muted); display: inline-flex; align-items: center; gap: .25rem; }
th a.sort:hover { color: var(--blue); text-decoration: none; }
th a.sort::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #cbd5e1; }
th a.sort.asc::after { border-top: 0; border-bottom: 5px solid var(--blue); }
th a.sort.desc::after { border-top-color: var(--blue); }
table.people .acts { width: 110px; text-align: right; }
.row-actions { display: inline-flex; gap: .15rem; align-items: center; opacity: .35; transition: opacity .12s; }
tr:hover .row-actions, .row-actions:focus-within, .row-menu[open] { opacity: 1; }
.row-menu { position: relative; display: inline-block; }
.row-menu summary { list-style: none; }
.row-menu summary::-webkit-details-marker { display: none; }
.row-menu-list { position: absolute; right: 0; top: 30px; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 30px rgba(14,31,61,.14); min-width: 160px; padding: .3rem; z-index: 15; display: grid; text-align: left; }
.row-menu-list a, .row-menu-list button { display: block; width: 100%; text-align: left; padding: .45rem .65rem; border-radius: 6px; color: var(--text); background: none; border: 0; font: inherit; cursor: pointer; white-space: nowrap; }
.row-menu-list a:hover, .row-menu-list button:hover { background: #f1f4fa; text-decoration: none; }
.row-menu-list .danger { color: var(--danger); }
.ok-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--success); margin-left: .35rem; vertical-align: 1px; }
.bulk-float .ghost-select { width: auto; background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.25); }
.bulk-float .ghost-select option { color: var(--text); }
.bulk-float .btn.ghost.danger { color: #ffb4b4; border-color: rgba(255,180,180,.4); }
.bulk-float .btn.ghost.danger:hover { background: rgba(214,69,69,.25); }
.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
@media (max-width: 960px) { table.people th:nth-child(7), table.people td:nth-child(7) { display: none; } .row-actions { opacity: 1; } }

.side-settings { display: flex !important; align-items: center; gap: .5rem; }
.side-settings svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- global top bar ---------- */
:root { --gbar: 48px; }
.gbar { position: sticky; top: 0; z-index: 40; height: var(--gbar); background: #fff; border-bottom: 1px solid #cbd6e2; display: flex; align-items: center; justify-content: space-between; padding: 0 16px 0 20px; font-family: Inter, "Segoe UI", Arial, sans-serif; font-size: 14px; color: #33475b; }
.gbar-right { display: flex; align-items: center; gap: 6px; }
.gb-menu { position: relative; }
.gb-menu summary { list-style: none; cursor: pointer; }
.gb-menu summary::-webkit-details-marker { display: none; }
.gb-icon { position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #516f90; }
.gb-icon:hover, .gb-menu[open] > .gb-icon { background: #eaf0f6; color: #33475b; }
.gb-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gb-badge { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; border-radius: 8px; background: #f2545b; color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; font-style: normal; }
.gb-user { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border-radius: 20px; margin-left: 4px; }
.gb-user:hover, .gb-menu[open] > .gb-user { background: #eaf0f6; }
.gb-avatar { width: 30px; height: 30px; border-radius: 50%; background: #4C7DFF; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.gb-avatar.big { width: 44px; height: 44px; font-size: 18px; }
.gb-name { font-weight: 600; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gb-user .caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #516f90; }
.gb-drop { position: absolute; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid #cbd6e2; border-radius: 6px; box-shadow: 0 8px 24px rgba(45,62,80,.18); min-width: 240px; z-index: 50; overflow: hidden; }
.gb-drop a, .gb-drop form button { display: block; width: 100%; text-align: left; padding: 9px 14px; color: #33475b; background: none; border: 0; font: inherit; cursor: pointer; }
.gb-drop a:hover, .gb-drop form button:hover { background: #f5f8fa; text-decoration: none; }
.gb-drop form { border-top: 1px solid #eaf0f6; }
.gb-drop-me { display: flex; gap: 12px; align-items: center; padding: 14px; border-bottom: 1px solid #eaf0f6; }
.gb-drop-me div { display: grid; line-height: 1.35; }
.gb-drop-me small { color: #516f90; font-size: 12px; }
.gb-notifs { width: 360px; }
.gb-drop-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid #eaf0f6; }
.gb-drop-head a { display: inline; padding: 0; color: #0091ae; font-size: 13px; }
.gb-notif { display: flex !important; gap: 10px; align-items: flex-start; border-bottom: 1px solid #f0f4f8; }
.gb-notif i { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; background: #99acc2; }
.gb-notif.k-reply i { background: #00a38d; } .gb-notif.k-fail i { background: #f2545b; } .gb-notif.k-sent i { background: #0091ae; } .gb-notif.k-user i { background: #f5a623; }
.gb-notif span { display: grid; gap: 1px; min-width: 0; }
.gb-notif b { font-weight: 600; font-size: 13px; }
.gb-notif small { color: #516f90; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gb-notif time { color: #99acc2; font-size: 11px; }
.gb-empty { padding: 20px 14px; color: #516f90; font-size: 13px; line-height: 1.5; }
@media (max-width: 720px) { .gb-name { display: none; } .gb-notifs { width: calc(100vw - 32px); } }

.gb-notif.k-mail i { background: #4C7DFF; }
.gb-sound { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #516f90; cursor: pointer; }
.gb-toast { position: fixed; right: 16px; top: 60px; z-index: 200; display: flex; gap: 10px; align-items: center; background: #2d3e50; color: #fff; padding: 12px 14px; border-radius: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.25); max-width: 340px; transform: translateX(120%); transition: transform .3s; text-decoration: none; }
.gb-toast.in { transform: none; }
.gb-toast:hover { text-decoration: none; background: #33475b; }
.gb-toast svg { width: 22px; height: 22px; fill: none; stroke: #7fe0d0; stroke-width: 1.8; flex-shrink: 0; }
.gb-toast span { display: grid; min-width: 0; }
.gb-toast b { font-size: 13px; }
.gb-toast small { font-size: 12px; color: #cbd6e2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gb-toast + .gb-toast { top: 132px; }