:root { --navy:#FF6115; --navy-2:#e0520c; --ink:#1e2437; --mute:#6b7390; --line:#e6e9f2; --bg:#f4f6fb; --card:#fff; --red:#d92d4b; --green:#12935f; --amber:#c76a0a; --soft:#fff0e8; --radius:12px; --shadow:0 1px 2px rgba(30,36,55,.05),0 4px 14px rgba(30,36,55,.05); }
* { box-sizing:border-box; }
html { color-scheme:light; }
body { margin:0; font:14px/1.5 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif; color:var(--ink); background:#fff; -webkit-font-smoothing:antialiased; }
a { color:var(--navy); text-decoration:none; } a:hover { text-decoration:underline; }
h1 { font-size:24px; font-weight:600; margin:0; color:var(--navy); }
h2 { font-size:13px; text-transform:uppercase; letter-spacing:.6px; color:var(--mute); font-weight:600; margin:0 0 12px; }
h3 { font-size:15px; margin:0 0 8px; }
.muted { color:var(--mute); } .small { font-size:12px; } .right { text-align:right; } .nowrap { white-space:nowrap; }
.hidden { display:none !important; }

/* layout */
.app { display:flex; min-height:100vh; }
aside { width:232px; background:var(--bg); border-right:1px solid var(--line); padding:22px 14px; position:sticky; top:0; height:100vh; flex:none; display:flex; flex-direction:column; }
.brand { font-size:19px; font-weight:700; color:var(--navy); padding:0 10px 4px; }
.brand-sub { font-size:11px; font-weight:600; color:var(--mute); letter-spacing:1px; padding:0 10px 18px; }
.gsearch { margin:0 4px 14px; } .gsearch input { width:100%; }
nav a { display:block; padding:8px 10px; border-radius:6px; color:var(--ink); margin-bottom:2px; text-decoration:none; }
nav a:hover { background:#eceff3; } nav a.on { background:var(--navy); color:#fff; }
.me { margin-top:auto; padding:12px 10px 0; border-top:1px solid var(--line); font-size:12px; color:var(--mute); }
.me b { display:block; color:var(--ink); font-size:13px; }
.me button { margin-top:8px; }
main { flex:1; min-width:0; padding:32px 40px 60px; max-width:1500px; }
.page-head { display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.page-head .grow { flex:1; }
.sub { color:var(--mute); margin:2px 0 0; }

/* controls */
input, select, textarea, button { font:inherit; color:inherit; }
input[type=text], input[type=search], input[type=email], input[type=tel], input[type=number], input[type=date], input[type=password], input[type=datetime-local], select, textarea {
  padding:8px 10px; border:1px solid #cfd5dc; border-radius:6px; background:#fff; width:100%; }
input:focus, select:focus, textarea:focus { outline:2px solid #b9c9de; border-color:var(--navy); }
textarea { min-height:90px; resize:vertical; }
.btn { padding:7px 14px; border:1px solid #cfd5dc; border-radius:6px; background:#fff; cursor:pointer; white-space:nowrap; }
.btn:hover { background:var(--bg); } .btn:disabled { opacity:.45; cursor:default; }
.btn.primary { background:var(--navy); border-color:var(--navy); color:#fff; } .btn.primary:hover { background:var(--navy-2); }
.btn.danger { color:var(--red); border-color:#e8c4c0; } .btn.sm { padding:3px 9px; font-size:12px; }
.btn.link { border:0; background:none; color:var(--navy); padding:0; }
.toolbar { display:flex; gap:10px; margin-bottom:12px; flex-wrap:wrap; align-items:center; }
.toolbar input[type=search] { width:280px; } .toolbar select { width:auto; max-width:190px; }
.toolbar .spacer { flex:1; }
.bulk { display:flex; gap:10px; align-items:center; background:#eef3fa; border:1px solid #c7d4e6; padding:8px 12px; border-radius:6px; margin-bottom:12px; }

/* cards and tables */
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:18px; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-bottom:18px; }
.stat .n { font-size:26px; font-weight:700; color:var(--navy); } .stat .l { color:var(--mute); font-size:12px; text-transform:uppercase; letter-spacing:.6px; }
.grid2 { display:grid; grid-template-columns:3fr 2fr; gap:16px; margin-bottom:16px; }
.grid2.even { grid-template-columns:1fr 1fr; }
@media (max-width:1100px) { .grid2, .grid2.even { grid-template-columns:1fr; } }
.tablewrap { border:1px solid var(--line); border-radius:8px; overflow:auto; background:#fff; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
td { max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
th { font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--mute); background:#fcfcfd; position:sticky; top:0; white-space:nowrap; font-weight:600; }
th[data-sort] { cursor:pointer; user-select:none; } th.sorted::after { content:" \25BE"; } th.sorted.asc::after { content:" \25B4"; }
tbody tr:last-child td { border-bottom:0; } tbody tr.click { cursor:pointer; } tbody tr.click:hover { background:var(--bg); }
td.chk, th.chk { width:36px; padding-right:0; }
.pager { display:flex; gap:10px; align-items:center; margin-top:12px; color:var(--mute); }
.empty { padding:40px; text-align:center; color:var(--mute); }

.av { display:inline-flex; width:28px; height:28px; border-radius:50%; background:#e8edf4; color:var(--navy); font-size:11px; font-weight:700; align-items:center; justify-content:center; margin-right:10px; vertical-align:middle; flex:none; }
.av.lg { width:52px; height:52px; font-size:18px; margin-right:0; }
.pill { display:inline-block; padding:1px 9px; border-radius:10px; background:var(--bg); border:1px solid var(--line); font-size:12px; color:var(--mute); white-space:nowrap; }
.pill.won, .pill.s-customer { color:var(--green); border-color:#bfe3cf; background:#eef8f2; }
.pill.lost { color:var(--red); border-color:#e8c4c0; background:#fdf2f1; }
.pill.warn { color:var(--amber); border-color:#f0d3ab; background:#fff7ea; }
.pill.s-opportunity, .pill.s-salesqualifiedlead, .pill.s-marketingqualifiedlead { color:var(--navy); border-color:#c7d4e6; background:#eef3fa; }
.pill.tag { color:var(--navy); background:#eef3fa; border-color:#c7d4e6; }
.pill .x { cursor:pointer; margin-left:5px; color:var(--mute); }

/* record pages */
.rec { display:grid; grid-template-columns:320px 1fr; gap:20px; align-items:start; }
@media (max-width:1000px) { .rec { grid-template-columns:1fr; } }
.rec-head { display:flex; gap:16px; align-items:center; margin-bottom:18px; flex-wrap:wrap; }
.rec-head .grow { flex:1; min-width:200px; }
dl.kv { display:grid; grid-template-columns:105px 1fr; gap:8px 10px; margin:0; } dl.kv dt { color:var(--mute); } dl.kv dd { margin:0; word-break:break-word; }
.tabs { display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:16px; flex-wrap:wrap; }
.tabs button { border:0; background:none; padding:9px 14px; cursor:pointer; color:var(--mute); border-bottom:2px solid transparent; margin-bottom:-1px; }
.tabs button.on { color:var(--navy); border-bottom-color:var(--navy); font-weight:600; }
.chips { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.chip { border:1px solid var(--line); background:#fff; border-radius:14px; padding:3px 12px; cursor:pointer; font-size:12px; } .chip.on { background:var(--navy); color:#fff; border-color:var(--navy); }
.tl { list-style:none; margin:0; padding:0; }
.tl li { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.tl .ico { width:30px; height:30px; border-radius:50%; background:#eef3fa; color:var(--navy); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex:none; text-transform:uppercase; }
.tl .body { flex:1; min-width:0; } .tl .meta { color:var(--mute); font-size:12px; }
.tl .text { white-space:pre-wrap; word-break:break-word; margin-top:4px; } .tl details summary { cursor:pointer; color:var(--navy); font-size:12px; }
.task { display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-bottom:1px solid var(--line); } .task:last-child { border:0; }
.task input { width:auto; margin-top:4px; } .task .t { flex:1; } .task.done .t b { text-decoration:line-through; color:var(--mute); }
.overdue { color:var(--red); }
.changes { font-size:12px; color:var(--mute); }
.bar { height:10px; background:var(--navy); border-radius:3px; } .row { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin:9px 0; } .row .lab { width:100%; font-weight:500; } .row .track { flex:1; } .row .val { width:110px; text-align:right; font-weight:600; }

/* kanban */
.board { display:flex; gap:12px; overflow:auto; align-items:flex-start; padding-bottom:14px; min-height:60vh; }
.col { flex:0 0 268px; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:10px; }
.col.over { outline:2px dashed var(--navy); background:#eef3fa; }
.col h3 { margin:0; font-size:13px; } .col .tot { color:var(--mute); font-size:12px; margin-bottom:8px; }
.deal-card { background:#fff; border:1px solid var(--line); border-radius:6px; padding:9px 10px; margin-bottom:8px; cursor:grab; display:block; color:inherit; text-decoration:none; }
.deal-card:hover { border-color:#b9c9de; text-decoration:none; } .deal-card.dragging { opacity:.4; }
.deal-card b { display:block; } .deal-card span { color:var(--mute); font-size:12px; display:block; }

/* modal, toast, login */
.backdrop { position:fixed; inset:0; background:rgba(20,30,45,.45); display:flex; align-items:flex-start; justify-content:center; padding:6vh 16px; overflow:auto; z-index:50; }
.modal { background:#fff; border-radius:10px; width:100%; max-width:560px; padding:22px; box-shadow:0 10px 30px rgba(0,0,0,.2); }
.modal h2 { font-size:17px; text-transform:none; letter-spacing:0; color:var(--navy); margin-bottom:14px; }
.fgrid { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .fgrid .full { grid-column:1/-1; } @media (max-width:560px) { .fgrid { grid-template-columns:1fr; } }
label.f { display:block; font-size:12px; color:var(--mute); font-weight:600; margin-bottom:4px; } .ferr { color:var(--red); font-size:12px; margin-top:3px; }
.actions { display:flex; gap:10px; justify-content:flex-end; margin-top:18px; }
.ta { position:relative; } .ta-list { position:absolute; left:0; right:0; top:100%; background:#fff; border:1px solid var(--line); border-radius:6px; z-index:5; max-height:220px; overflow:auto; box-shadow:0 4px 12px rgba(0,0,0,.1); }
.ta-list div { padding:7px 10px; cursor:pointer; } .ta-list div:hover { background:var(--bg); }
#toasts { position:fixed; bottom:20px; right:20px; display:flex; flex-direction:column; gap:8px; z-index:100; }
.toast { background:var(--navy); color:#fff; padding:10px 16px; border-radius:6px; box-shadow:0 4px 14px rgba(0,0,0,.2); max-width:360px; } .toast.err { background:var(--red); }
.login { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); padding:20px; }
.login .card { width:100%; max-width:380px; padding:30px; } .login .brand { padding:0; font-size:24px; } .login p { margin:4px 0 20px; color:var(--mute); }
.loading { padding:60px; text-align:center; color:var(--mute); }
.note { margin-top:14px; color:var(--mute); font-size:12px; }
@media (max-width:760px) { aside { display:none; } main { padding:18px 14px; } }

/* ---- colourful, friendly theme ---- */
body { background:var(--bg); }
aside { background:#fff; border-right:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; font-size:16px; font-weight:700; color:var(--ink); padding:0 8px 18px; line-height:1.15; }
.brand small { display:block; font-size:10.5px; font-weight:600; letter-spacing:1.4px; color:var(--mute); }
.brand .logo { width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,#FF6115,#ff9a4d); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px; flex:none; }
.gsearch input { background:var(--bg); border-color:transparent; border-radius:10px; }
nav a { display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:10px; color:#4a526d; font-weight:500; }
nav a:hover { background:var(--bg); text-decoration:none; }
nav a .ni { width:19px; height:19px; flex:none; color:var(--c,#6b7390); }
nav a.on { background:var(--c-bg,var(--soft)); color:var(--c,var(--navy)); font-weight:600; }
.n-dashboard { --c:#FF6115; --c-bg:#fff0e8; } .n-contacts { --c:#0f9d8a; --c-bg:#e3f6f2; } .n-companies { --c:#7c4dff; --c-bg:#f0eaff; }
.n-deals { --c:#1971c2; --c-bg:#e5f1fd; } .n-tasks { --c:#d6336c; --c-bg:#ffe8f0; } .n-lists { --c:#0b7285; --c-bg:#e3f6f8; }
.n-forms { --c:#c88a00; --c-bg:#fff6dd; } .n-reports { --c:#2f9e44; --c-bg:#e6f6e9; } .n-settings { --c:#5c6785; --c-bg:#eceef4; }
.me { border-top:1px solid var(--line); }
main { padding:30px 40px 60px; }
h1 { color:var(--ink); font-size:26px; font-weight:700; letter-spacing:-.3px; }
.btn { border-radius:10px; border-color:#d8dcea; padding:8px 15px; font-weight:500; }
.btn:hover { background:var(--soft); border-color:#ffc7a8; }
.btn.primary { box-shadow:0 2px 6px rgba(255,97,21,.3); } .btn.primary:hover { background:var(--navy-2); }
.btn.sm { padding:4px 10px; }
input[type=text], input[type=search], input[type=email], input[type=tel], input[type=number], input[type=date], input[type=password], input[type=datetime-local], select, textarea { border-radius:10px; border-color:#d8dcea; padding:9px 12px; }
input:focus, select:focus, textarea:focus { outline:3px solid #ffd9c4; border-color:var(--navy); }
.card { border-radius:var(--radius); border-color:var(--line); box-shadow:var(--shadow); padding:20px; }
h2 { color:#8089a8; }
.tablewrap { border-radius:var(--radius); box-shadow:var(--shadow); border-color:var(--line); }
th { background:#f9faff; color:#7c85a3; }
tbody tr.click:hover, tbody tr:hover { background:#fff8f3; }
.bulk { background:var(--soft); border-color:#ffcfb5; border-radius:10px; }

/* stat cards */
.stat { border-left:0; position:relative; overflow:hidden; padding-left:22px; }
.stat::before { content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--k); }
.stat .n { color:var(--k); }
.k1 { --k:#FF6115; } .k2 { --k:#d92d4b; } .k3 { --k:#0f9d8a; } .k4 { --k:#1971c2; } .k5 { --k:#2f9e44; }
.stat .n.overdue { color:var(--red); }

/* avatars */
.av { background:var(--ab,#e8edf4); color:var(--af,#FF6115); }
.av.c0 { --ab:#ffe9d6; --af:#c24a06; } .av.c1 { --ab:#d9f3ee; --af:#0b7a6b; } .av.c2 { --ab:#f0e6ff; --af:#6b3fd4; } .av.c3 { --ab:#ffe9d6; --af:#c24a06; }
.av.c4 { --ab:#ffe0ec; --af:#b82458; } .av.c5 { --ab:#dcebfd; --af:#1763b0; } .av.c6 { --ab:#fff1c9; --af:#9a6a00; } .av.c7 { --ab:#dff3e3; --af:#237a37; }

/* pills and tags */
.pill { border-radius:999px; padding:2px 10px; font-weight:500; background:#eef0f7; border-color:transparent; color:#5a6383; }
.pill.won, .pill.s-customer { color:#0b7a4b; background:#dff6ea; }
.pill.lost { color:#c0233f; background:#ffe3e8; }
.pill.warn { color:#a85a00; background:#fff0d6; }
.pill.s-subscriber, .pill.s-lead { color:#1763b0; background:#dcebfd; }
.pill.s-marketingqualifiedlead { color:#6b3fd4; background:#efe6ff; }
.pill.s-salesqualifiedlead { color:#a85a00; background:#fff0d6; }
.pill.s-opportunity { color:#c24a06; background:#ffe9d6; }
.pill.s-evangelist, .pill.s-other { color:#b82458; background:#ffe0ec; }
.pill.tag { color:#FF6115; background:#fff0e8; }

/* record pages and timeline */
.tabs { border-bottom:2px solid var(--line); }
.tabs button { border-radius:8px 8px 0 0; font-weight:500; } .tabs button:hover { color:var(--navy); background:var(--soft); }
.tabs button.on { border-bottom-width:3px; }
.chip { border-radius:999px; } .chip:hover { background:var(--soft); }
.tl .ico { background:#fff0e8; color:#FF6115; }
.tl .ico.t-note { background:#fff1c9; color:#9a6a00; } .tl .ico.t-call { background:#dff3e3; color:#237a37; }
.tl .ico.t-email { background:#dcebfd; color:#1763b0; } .tl .ico.t-meeting { background:#f0e6ff; color:#6b3fd4; }
.tl .ico.t-task { background:#ffe0ec; color:#b82458; }
.bar { background:linear-gradient(90deg,#FF6115,#ff9a4d); border-radius:6px; height:11px; }

/* deal board */
.col { background:#eef0f8; border:0; border-radius:var(--radius); border-top:4px solid var(--sc,#FF6115); }
.sc0 { --sc:#3b82f6; } .sc1 { --sc:#7c4dff; } .sc2 { --sc:#e8590c; } .sc3 { --sc:#d6336c; } .sc4 { --sc:#0f9d8a; } .sc5 { --sc:#c88a00; }
.col.over { background:var(--soft); outline-color:var(--navy); }
.deal-card { border:0; border-radius:10px; box-shadow:var(--shadow); padding:11px 12px; } .deal-card:hover { box-shadow:0 4px 14px rgba(255,97,21,.2); }

/* modal, toast, login */
.modal { border-radius:16px; } .modal h2 { color:var(--ink); }
.toast { background:#1e2437; border-radius:10px; }
.login { background:linear-gradient(135deg,#fff0e8,#e3f1ff 55%,#fff0e5); }
.login .card { border-radius:18px; box-shadow:0 12px 40px rgba(255,97,21,.18); }
.login .brand { padding:0 0 4px; font-size:22px; }

/* main dashboard */
.hero { display:flex; align-items:center; gap:16px; flex-wrap:wrap; background:linear-gradient(135deg,#fff0e8,#fff 60%); border:1px solid #ffe0cf; border-radius:16px; padding:22px 26px; margin-bottom:18px; }
.hero > div:first-child { flex:1; min-width:240px; } .hero-actions { display:flex; gap:8px; flex-wrap:wrap; }
a.stat { color:inherit; display:block; text-decoration:none; transition:transform .12s, box-shadow .12s; } a.stat:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(30,36,55,.1); text-decoration:none; }
.stat .d { font-size:12px; color:var(--mute); margin-top:4px; } .stat .d.bad { color:var(--red); font-weight:600; }
.bar.b0 { background:#FF6115; } .bar.b1 { background:#3b82f6; } .bar.b2 { background:#7c4dff; } .bar.b3 { background:#0f9d8a; } .bar.b4 { background:#d6336c; } .bar.b5 { background:#c88a00; }
.drow { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); color:inherit; text-decoration:none; } .drow:last-child { border:0; }
.drow:hover { text-decoration:none; background:#fff8f3; } .drow > span:first-child { min-width:0; } .drow b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.drow .amt { font-weight:700; color:var(--ink); white-space:nowrap; }

/* ================= motion and polish ================= */
:root { --ease:cubic-bezier(.22,.8,.3,1); --glow:0 8px 24px rgba(255,97,21,.28); }
body { background:
  radial-gradient(900px 500px at 105% -10%, rgba(255,97,21,.09), transparent 60%),
  radial-gradient(700px 480px at -10% 110%, rgba(124,77,255,.07), transparent 60%),
  var(--bg); }
aside { background:rgba(255,255,255,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.brand .logo { box-shadow:0 6px 16px rgba(255,97,21,.4); transition:transform .4s var(--ease); }
.brand:hover .logo { transform:rotate(-8deg) scale(1.08); }

/* sidebar */
nav a { position:relative; transition:background .2s, color .2s, transform .2s var(--ease); }
nav a:hover { transform:translateX(3px); }
nav a .ni { transition:transform .3s var(--ease); }
nav a:hover .ni { transform:scale(1.18) rotate(-6deg); }
nav a.on::before { content:""; position:absolute; left:-14px; top:20%; bottom:20%; width:4px; border-radius:0 4px 4px 0; background:var(--c,var(--navy)); animation:pop .35s var(--ease); }
nav a.on { box-shadow:inset 0 0 0 1px rgba(0,0,0,.03); }

/* page enter: soft rise with a stagger */
@keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
@keyframes pop { from { transform:scale(.6); opacity:0; } to { transform:none; opacity:1; } }
@keyframes grow { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes slidein { from { opacity:0; transform:translateX(14px); } to { opacity:1; transform:none; } }
#view.enter > * { animation:rise .55s var(--ease) both; }
#view.enter > *:nth-child(2) { animation-delay:.06s; } #view.enter > *:nth-child(3) { animation-delay:.12s; }
#view.enter > *:nth-child(4) { animation-delay:.18s; } #view.enter > *:nth-child(5) { animation-delay:.24s; } #view.enter > *:nth-child(n+6) { animation-delay:.3s; }
#view.enter .cards > * { animation:rise .6s var(--ease) both; }
#view.enter .cards > *:nth-child(1) { animation-delay:.10s; } #view.enter .cards > *:nth-child(2) { animation-delay:.17s; } #view.enter .cards > *:nth-child(3) { animation-delay:.24s; }
#view.enter .cards > *:nth-child(4) { animation-delay:.31s; } #view.enter .cards > *:nth-child(5) { animation-delay:.38s; }
#view.enter .bar { transform-origin:left; animation:grow .9s var(--ease) both .35s; }
#view.enter tbody tr { animation:fade .4s both; }
#view.enter tbody tr:nth-child(1) { animation-delay:.05s; } #view.enter tbody tr:nth-child(2) { animation-delay:.09s; } #view.enter tbody tr:nth-child(3) { animation-delay:.13s; }
#view.enter tbody tr:nth-child(4) { animation-delay:.17s; } #view.enter tbody tr:nth-child(5) { animation-delay:.21s; } #view.enter tbody tr:nth-child(6) { animation-delay:.25s; }
#view.enter tbody tr:nth-child(n+7) { animation-delay:.3s; }
#view.enter .col { animation:rise .6s var(--ease) both; }
#view.enter .col:nth-child(2) { animation-delay:.07s; } #view.enter .col:nth-child(3) { animation-delay:.14s; } #view.enter .col:nth-child(4) { animation-delay:.21s; } #view.enter .col:nth-child(n+5) { animation-delay:.28s; }
#view.enter .tl li { animation:slidein .5s var(--ease) both; }
#view.enter .tl li:nth-child(2) { animation-delay:.07s; } #view.enter .tl li:nth-child(3) { animation-delay:.14s; } #view.enter .tl li:nth-child(4) { animation-delay:.21s; } #view.enter .tl li:nth-child(n+5) { animation-delay:.28s; }

/* cards */
.card { transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.card:hover { box-shadow:0 10px 30px rgba(30,36,55,.09); border-color:#ead9cf; }
a.stat { position:relative; }
a.stat:hover { transform:translateY(-4px); box-shadow:0 14px 34px rgba(30,36,55,.14); }
.stat .n { font-variant-numeric:tabular-nums; letter-spacing:-.5px; }
.stat::after { content:""; position:absolute; right:-30px; top:-30px; width:110px; height:110px; border-radius:50%; background:var(--k); opacity:.07; transition:transform .5s var(--ease), opacity .3s; }
a.stat:hover::after { transform:scale(1.5); opacity:.12; }
.hero { position:relative; overflow:hidden; }
.hero::before { content:""; position:absolute; right:-60px; top:-80px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle,rgba(255,97,21,.22),transparent 70%); animation:float 7s ease-in-out infinite; }
.hero::after { content:""; position:absolute; right:180px; bottom:-90px; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle,rgba(124,77,255,.14),transparent 70%); animation:float 9s ease-in-out infinite reverse; }
.hero > * { position:relative; z-index:1; }
@keyframes float { 50% { transform:translate(-18px,14px) scale(1.08); } }
.hero h1 { background:linear-gradient(90deg,#1e2437,#FF6115); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* buttons */
.btn { transition:transform .15s var(--ease), box-shadow .2s, background .2s, border-color .2s; position:relative; overflow:hidden; }
.btn:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 4px 12px rgba(30,36,55,.1); }
.btn:active:not(:disabled) { transform:translateY(0) scale(.97); box-shadow:none; }
.btn.primary { background:linear-gradient(135deg,#FF6115,#ff8a3d); border-color:transparent; }
.btn.primary:hover:not(:disabled) { background:linear-gradient(135deg,#f25500,#ff7a26); box-shadow:var(--glow); }
.btn.primary::after { content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-20deg); }
.btn.primary:hover::after { left:150%; transition:left .7s var(--ease); }
input, select, textarea { transition:border-color .2s, box-shadow .2s, background .2s; }
input:focus, select:focus, textarea:focus { outline:0; border-color:var(--navy); box-shadow:0 0 0 4px rgba(255,97,21,.16); }
.gsearch input:focus { background:#fff; }

/* tables and chips */
tbody tr { transition:background .15s, box-shadow .15s; }
tbody tr.click:hover, tbody tr:hover { background:#fff7f1; box-shadow:inset 3px 0 0 var(--navy); }
th { backdrop-filter:blur(6px); }
.av { transition:transform .25s var(--ease), box-shadow .25s; }
tr:hover .av, .rec-head .av:hover { transform:scale(1.12); box-shadow:0 4px 10px rgba(30,36,55,.18); }
.av.lg { box-shadow:0 8px 20px rgba(30,36,55,.14); }
.pill { transition:transform .2s var(--ease); } .pill:hover { transform:scale(1.06); }
.chip { transition:all .2s var(--ease); } .chip:hover { transform:translateY(-1px); } .chip.on { background:linear-gradient(135deg,#FF6115,#ff8a3d); border-color:transparent; box-shadow:var(--glow); }
.tabs button { transition:color .2s, background .2s; position:relative; }
.tabs button.on { border-bottom-color:transparent; }
.tabs button.on::after { content:""; position:absolute; left:8px; right:8px; bottom:-2px; height:3px; border-radius:3px; background:var(--navy); animation:grow .35s var(--ease); transform-origin:left; }
a { transition:color .15s; }
.task { transition:background .15s; } .task:hover { background:#fffaf6; }
.task input[type=checkbox], td.chk input { accent-color:#FF6115; cursor:pointer; transition:transform .15s var(--ease); } .task input:active, td.chk input:active { transform:scale(1.3); }
.drow { transition:background .15s, transform .2s var(--ease), padding .2s var(--ease); } .drow:hover { transform:translateX(4px); padding-left:6px; border-radius:8px; }
.tl li { transition:background .2s; } .tl li:hover { background:#fffaf6; }
.tl .ico { transition:transform .3s var(--ease); } .tl li:hover .ico { transform:scale(1.15) rotate(-6deg); }
.row .bar { transition:filter .2s; } .row:hover .bar { filter:brightness(1.1) saturate(1.2); }

/* deal board */
.deal-card { transition:transform .22s var(--ease), box-shadow .22s var(--ease); border-left:3px solid transparent; }
.deal-card:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(30,36,55,.14); border-left-color:var(--sc,var(--navy)); }
.col .deal-card { border-left-color:transparent; } .col:hover .deal-card:hover { border-left-color:var(--sc,var(--navy)); }
.deal-card.dragging { opacity:.55; transform:rotate(2.5deg) scale(1.03); box-shadow:0 16px 30px rgba(30,36,55,.25); }
.col { transition:background .2s, box-shadow .2s, transform .2s var(--ease); }
.col.over { background:#fff1e8; box-shadow:0 0 0 2px var(--navy) inset, 0 10px 26px rgba(255,97,21,.18); transform:scale(1.01); }

/* modal, toast, loading */
@keyframes modalIn { from { opacity:0; transform:translateY(24px) scale(.96); } to { opacity:1; transform:none; } }
.backdrop { backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); background:rgba(20,24,40,.4); animation:fade .2s both; }
.modal { animation:modalIn .35s var(--ease) both; box-shadow:0 24px 70px rgba(20,24,40,.3); }
@keyframes toastIn { from { opacity:0; transform:translateX(40px) scale(.95); } to { opacity:1; transform:none; } }
.toast { animation:toastIn .4s var(--ease) both; border-left:4px solid #FF6115; }
.toast.err { border-left-color:#fff; }
@keyframes shimmer { to { background-position:-200% 0; } }
.loading { color:transparent; height:220px; margin:20px 0; border-radius:16px; background:linear-gradient(100deg,#eceff6 30%,#f8f9fd 50%,#eceff6 70%) 0 0/200% 100%; animation:shimmer 1.3s linear infinite; }
.ta-list { animation:modalIn .2s var(--ease) both; box-shadow:0 12px 30px rgba(30,36,55,.16); border-radius:10px; }
.ta-list div { transition:background .12s, padding .15s var(--ease); } .ta-list div:hover { background:#fff1e8; padding-left:14px; }

/* login */
.login { position:relative; overflow:hidden; background:linear-gradient(135deg,#fff0e8,#f3efff 55%,#e6f2ff); }
.login::before, .login::after { content:""; position:absolute; border-radius:50%; filter:blur(10px); }
.login::before { width:520px; height:520px; left:-120px; top:-140px; background:radial-gradient(circle,rgba(255,97,21,.28),transparent 68%); animation:float 8s ease-in-out infinite; }
.login::after { width:560px; height:560px; right:-160px; bottom:-180px; background:radial-gradient(circle,rgba(124,77,255,.22),transparent 68%); animation:float 10s ease-in-out infinite reverse; }
.login .card { position:relative; z-index:1; animation:modalIn .7s var(--ease) both; backdrop-filter:blur(8px); background:rgba(255,255,255,.9); }
.login .brand .logo { animation:pop .7s var(--ease) .2s both; }

/* scrollbars */
* { scrollbar-width:thin; scrollbar-color:#d5d9e6 transparent; }
::selection { background:#ffd9c4; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }

/* ================= HubSpot-style navigation ================= */
.app { display:flex; min-height:100vh; }
.rail-wrap { position:sticky; top:0; height:100vh; z-index:40; flex:none; }
.rail { width:64px; height:100vh; background:linear-gradient(180deg,#1d2230,#262c3d); border-right:0; padding:12px 0; display:flex; flex-direction:column; align-items:center; gap:4px; position:relative; z-index:2; backdrop-filter:none; }
.rail .grow { flex:1; }
.rail-logo { margin-bottom:10px; } .rail-logo .logo { width:36px; height:36px; border-radius:11px; background:linear-gradient(135deg,#FF6115,#ff8a3d); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; box-shadow:0 6px 16px rgba(255,97,21,.45); transition:transform .4s var(--ease); }
.rail-logo:hover .logo { transform:rotate(-8deg) scale(1.1); }
.rail-sep { width:26px; height:1px; background:rgba(255,255,255,.14); margin:6px 0; }
.rail-btn { width:44px; height:44px; border-radius:12px; border:0; background:none; color:#b9c0d4; display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; transition:background .2s, color .2s, transform .2s var(--ease); }
.rail-btn .ni { width:22px; height:22px; margin:0; transition:transform .3s var(--ease); }
.rail-btn:hover { background:rgba(255,255,255,.1); color:#fff; transform:scale(1.06); text-decoration:none; }
.rail-btn:hover .ni { transform:scale(1.12) rotate(-5deg); }
.rail-btn.on { background:rgba(255,97,21,.2); color:#ff8a3d; }
.rail-btn.on::before { content:""; position:absolute; left:-10px; top:22%; bottom:22%; width:4px; border-radius:0 4px 4px 0; background:#FF6115; animation:pop .35s var(--ease); }
.rail-wrap[data-open] .rail-btn[data-menu] { }
.rail-wrap[data-open="crm"] [data-menu="crm"], .rail-wrap[data-open="marketing"] [data-menu="marketing"], .rail-wrap[data-open="content"] [data-menu="content"],
.rail-wrap[data-open="sales"] [data-menu="sales"], .rail-wrap[data-open="revenue"] [data-menu="revenue"], .rail-wrap[data-open="service"] [data-menu="service"],
.rail-wrap[data-open="data"] [data-menu="data"], .rail-wrap[data-open="automation"] [data-menu="automation"], .rail-wrap[data-open="reporting"] [data-menu="reporting"] { background:rgba(255,255,255,.16); color:#fff; }

.flyout { position:absolute; left:72px; top:70px; min-width:236px; background:#2a3042; color:#e8ebf5; border-radius:16px; padding:14px 8px 10px; box-shadow:0 22px 60px rgba(10,14,28,.45); opacity:0; visibility:hidden; transform:translateX(-14px) scale(.97); transform-origin:left top; transition:opacity .2s, transform .28s var(--ease), visibility .2s; z-index:1; }
.rail-wrap[data-open="crm"] [data-flyout="crm"], .rail-wrap[data-open="marketing"] [data-flyout="marketing"], .rail-wrap[data-open="content"] [data-flyout="content"],
.rail-wrap[data-open="sales"] [data-flyout="sales"], .rail-wrap[data-open="revenue"] [data-flyout="revenue"], .rail-wrap[data-open="service"] [data-flyout="service"],
.rail-wrap[data-open="data"] [data-flyout="data"], .rail-wrap[data-open="automation"] [data-flyout="automation"], .rail-wrap[data-open="reporting"] [data-flyout="reporting"] { opacity:1; visibility:visible; transform:none; }
.fo-title { font-weight:700; font-size:15px; padding:2px 12px 10px; color:#fff; }
.fo-group { padding:6px 0; } .fo-group + .fo-group { border-top:1px solid rgba(255,255,255,.12); }
.fo-item { display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:9px; color:#dfe3f0; font-size:13.5px; text-decoration:none; transition:background .15s, padding .2s var(--ease), color .15s; }
.fo-item:hover { background:rgba(255,255,255,.1); color:#fff; padding-left:16px; text-decoration:none; }
.fo-item.on { background:rgba(255,97,21,.25); color:#ffb68a; font-weight:600; }
.fo-item.soon { color:#9aa2bb; } .fo-item.soon:hover { color:#cfd5e8; }
.fo-tag { margin-left:auto; font-size:10.5px; font-weight:700; padding:1px 8px; border-radius:999px; background:#7c4dff; color:#fff; }
.fo-soon { margin-left:auto; font-size:10px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; padding:1px 7px; border-radius:999px; border:1px solid rgba(255,255,255,.18); color:#8f98b3; opacity:0; transition:opacity .15s; }
.fo-item.soon:hover .fo-soon { opacity:1; }

.stage { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar { position:sticky; top:0; z-index:30; height:60px; display:flex; align-items:center; gap:14px; padding:0 40px; background:rgba(244,246,251,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.topbar .grow { flex:1; }
.topbar .gsearch { margin:0; position:relative; width:min(460px,50vw); }
.topbar .gsearch .ni { position:absolute; left:13px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--mute); margin:0; pointer-events:none; }
.topbar .gsearch input { padding-left:38px; background:#fff; border:1px solid var(--line); border-radius:999px; box-shadow:var(--shadow); height:40px; }
.topbar .gsearch input:focus { box-shadow:0 0 0 4px rgba(255,97,21,.16); }
.user { display:flex; align-items:center; gap:10px; } .user .who { text-align:right; line-height:1.2; } .user .who b { display:block; font-size:13px; } .user .who small { color:var(--mute); font-size:11.5px; }
.user .av { margin:0; }
main { padding:26px 40px 60px; }
@media (max-width:760px) { aside.rail { display:flex !important; } .topbar { padding:0 14px; } .user .who { display:none; } .rail { width:52px; } .flyout { left:58px; } main { padding:18px 14px; } }
.flyout { max-height:calc(100vh - 84px); overflow-y:auto; overscroll-behavior:contain; } .flyout::-webkit-scrollbar { width:6px; } .flyout::-webkit-scrollbar-thumb { background:rgba(255,255,255,.2); border-radius:6px; }

/* ================= theme button ================= */
.theme-btn { width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--mute); cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); transition:transform .3s var(--ease), color .2s, border-color .2s; padding:0; }
.theme-btn:hover { transform:rotate(18deg) scale(1.08); color:var(--navy); border-color:var(--navy); }
.theme-btn .ni { width:19px; height:19px; margin:0; display:block; } .theme-btn span { display:flex; }
.theme-btn .t-sun { display:none; } html[data-theme="dark"] .theme-btn .t-sun { display:flex; } html[data-theme="dark"] .theme-btn .t-moon { display:none; }
.theme-btn.fab { position:absolute; top:18px; right:18px; z-index:2; }
html.theming *, html.theming *::before, html.theming *::after { transition:background-color .35s, color .35s, border-color .35s, box-shadow .35s !important; }

/* ================= dark mode ================= */
html[data-theme="dark"] { color-scheme:dark;
  --ink:#e8ebf6; --mute:#9aa3c0; --line:#2b3248; --bg:#12151f; --card:#1b2030; --soft:#33231b; --navy:#ff7a33; --navy-2:#ff6115;
  --red:#ff7b90; --green:#46d49a; --amber:#ffb45e; --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 20px rgba(0,0,0,.3); --glow:0 8px 24px rgba(255,97,21,.35); }
html[data-theme="dark"] body { background:
  radial-gradient(900px 500px at 105% -10%, rgba(255,97,21,.12), transparent 60%),
  radial-gradient(700px 480px at -10% 110%, rgba(124,77,255,.12), transparent 60%), var(--bg); color:var(--ink); }
html[data-theme="dark"] .rail { background:linear-gradient(180deg,#0d1019,#141824); box-shadow:1px 0 0 rgba(255,255,255,.05); }
html[data-theme="dark"] .topbar { background:rgba(18,21,31,.82); border-bottom-color:var(--line); }
html[data-theme="dark"] .flyout { background:#222839; border:1px solid rgba(255,255,255,.08); }
html[data-theme="dark"] h1 { color:var(--ink); } html[data-theme="dark"] h2 { color:#8791b0; }
html[data-theme="dark"] .hero { background:linear-gradient(135deg,#2e1f17,#1b2030 62%); border-color:#4a2e1e; }
html[data-theme="dark"] .hero h1 { background:linear-gradient(90deg,#fff,#ff8a3d); -webkit-background-clip:text; background-clip:text; color:transparent; }
html[data-theme="dark"] .card:hover { border-color:#3d4663; box-shadow:0 10px 30px rgba(0,0,0,.4); }
html[data-theme="dark"] a.stat:hover { box-shadow:0 14px 34px rgba(0,0,0,.45); }

/* forms and buttons */
html[data-theme="dark"] input[type=text], html[data-theme="dark"] input[type=search], html[data-theme="dark"] input[type=email], html[data-theme="dark"] input[type=tel],
html[data-theme="dark"] input[type=number], html[data-theme="dark"] input[type=date], html[data-theme="dark"] input[type=password], html[data-theme="dark"] input[type=datetime-local],
html[data-theme="dark"] select, html[data-theme="dark"] textarea { background:#151a28; border-color:#343c57; color:var(--ink); }
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color:#6f7899; }
html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus { box-shadow:0 0 0 4px rgba(255,97,21,.22); }
html[data-theme="dark"] .topbar .gsearch input { background:#1b2030; border-color:var(--line); }
html[data-theme="dark"] .btn { background:var(--card); border-color:#363e59; color:var(--ink); }
html[data-theme="dark"] .btn:hover:not(:disabled) { background:#262d42; border-color:#4a5578; box-shadow:0 4px 12px rgba(0,0,0,.35); }
html[data-theme="dark"] .btn.primary { color:#fff; border-color:transparent; }
html[data-theme="dark"] .btn.danger { color:var(--red); border-color:#5a2b35; }
html[data-theme="dark"] .btn.link { background:none; border:0; }
html[data-theme="dark"] .bulk { background:#2a2233; border-color:#4a3a55; }

/* tables */
html[data-theme="dark"] .tablewrap { background:var(--card); }
html[data-theme="dark"] th { background:#202638; color:#8e98b8; }
html[data-theme="dark"] tbody tr.click:hover, html[data-theme="dark"] tbody tr:hover { background:rgba(255,97,21,.08); }
html[data-theme="dark"] .task:hover, html[data-theme="dark"] .tl li:hover, html[data-theme="dark"] .drow:hover { background:rgba(255,255,255,.04); }

/* pills, tags, avatars */
html[data-theme="dark"] .pill { background:#2a3148; color:#b3bbd6; }
html[data-theme="dark"] .pill.won, html[data-theme="dark"] .pill.s-customer { background:rgba(70,212,154,.16); color:#6fe3b4; }
html[data-theme="dark"] .pill.lost { background:rgba(255,123,144,.16); color:#ff9aab; }
html[data-theme="dark"] .pill.warn, html[data-theme="dark"] .pill.s-salesqualifiedlead { background:rgba(255,180,94,.16); color:#ffc47f; }
html[data-theme="dark"] .pill.s-subscriber, html[data-theme="dark"] .pill.s-lead { background:rgba(90,155,255,.17); color:#8fbcff; }
html[data-theme="dark"] .pill.s-marketingqualifiedlead { background:rgba(150,115,255,.18); color:#bba3ff; }
html[data-theme="dark"] .pill.s-opportunity { background:rgba(255,122,51,.18); color:#ff9a60; }
html[data-theme="dark"] .pill.s-evangelist, html[data-theme="dark"] .pill.s-other { background:rgba(255,120,170,.16); color:#ff9cc2; }
html[data-theme="dark"] .pill.tag { background:rgba(255,97,21,.16); color:#ff9a60; }
html[data-theme="dark"] .av.c0 { --ab:rgba(255,122,51,.2); --af:#ff9a60; } html[data-theme="dark"] .av.c1 { --ab:rgba(40,190,170,.2); --af:#52dccb; }
html[data-theme="dark"] .av.c2 { --ab:rgba(150,115,255,.22); --af:#bba3ff; } html[data-theme="dark"] .av.c3 { --ab:rgba(255,150,80,.2); --af:#ffb47c; }
html[data-theme="dark"] .av.c4 { --ab:rgba(255,110,160,.2); --af:#ff9cc2; } html[data-theme="dark"] .av.c5 { --ab:rgba(90,155,255,.2); --af:#8fbcff; }
html[data-theme="dark"] .av.c6 { --ab:rgba(235,185,50,.2); --af:#f0cc5e; } html[data-theme="dark"] .av.c7 { --ab:rgba(70,212,154,.2); --af:#6fe3b4; }
html[data-theme="dark"] .chip { background:var(--card); } html[data-theme="dark"] .chip:hover { background:#262d42; }
html[data-theme="dark"] .tabs button:hover { background:rgba(255,255,255,.05); }
html[data-theme="dark"] .tl .ico { background:rgba(255,97,21,.18); color:#ff9a60; }
html[data-theme="dark"] .tl .ico.t-note { background:rgba(235,185,50,.2); color:#f0cc5e; } html[data-theme="dark"] .tl .ico.t-call { background:rgba(70,212,154,.18); color:#6fe3b4; }
html[data-theme="dark"] .tl .ico.t-email { background:rgba(90,155,255,.2); color:#8fbcff; } html[data-theme="dark"] .tl .ico.t-meeting { background:rgba(150,115,255,.2); color:#bba3ff; }
html[data-theme="dark"] .tl .ico.t-task { background:rgba(255,110,160,.2); color:#ff9cc2; }
html[data-theme="dark"] .rail-btn.on { background:rgba(255,97,21,.22); }

/* deal board, modal, pop-ups */
html[data-theme="dark"] .col { background:#171c2a; } html[data-theme="dark"] .col.over { background:#2b2019; }
html[data-theme="dark"] .deal-card { background:var(--card); }
html[data-theme="dark"] .deal-card:hover { box-shadow:0 10px 24px rgba(0,0,0,.5); }
html[data-theme="dark"] .backdrop { background:rgba(4,6,12,.6); }
html[data-theme="dark"] .modal { background:var(--card); box-shadow:0 24px 70px rgba(0,0,0,.6); border:1px solid var(--line); }
html[data-theme="dark"] .ta-list { background:var(--card); border-color:var(--line); } html[data-theme="dark"] .ta-list div:hover { background:#2a3148; }
html[data-theme="dark"] .toast { background:#2a3148; }
html[data-theme="dark"] .loading { background:linear-gradient(100deg,#1b2030 30%,#262d42 50%,#1b2030 70%) 0 0/200% 100%; }
html[data-theme="dark"] ::selection { background:rgba(255,97,21,.4); }
html[data-theme="dark"] * { scrollbar-color:#3a4260 transparent; }
html[data-theme="dark"] .login { background:linear-gradient(135deg,#1c1612,#17172a 55%,#10192b); }
html[data-theme="dark"] .login .card { background:rgba(27,32,48,.92); border:1px solid var(--line); box-shadow:0 12px 40px rgba(0,0,0,.5); }
html[data-theme="dark"] .login::before { background:radial-gradient(circle,rgba(255,97,21,.22),transparent 68%); }
html[data-theme="dark"] .login::after { background:radial-gradient(circle,rgba(124,77,255,.2),transparent 68%); }
html[data-theme="dark"] .brand { color:var(--ink); }
html[data-theme="dark"] .btn.primary { background:linear-gradient(135deg,#FF6115,#ff8a3d); }
html[data-theme="dark"] .btn.primary:hover:not(:disabled) { background:linear-gradient(135deg,#f25500,#ff7a26); box-shadow:var(--glow); }
html[data-theme="dark"] .chip.on { background:linear-gradient(135deg,#FF6115,#ff8a3d); color:#fff; }

/* ================= profile, users & teams ================= */
a.who-link { display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; border-radius:999px; padding:3px 4px 3px 12px; transition:background .2s; } a.who-link:hover { background:rgba(255,97,21,.1); text-decoration:none; }
.profile-grid { display:grid; grid-template-columns:340px 1fr; gap:18px; align-items:start; } @media (max-width:1000px) { .profile-grid { grid-template-columns:1fr; } }
.profile-forms { display:flex; flex-direction:column; gap:16px; }
.profile-top { text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; }
.profile-top .av.lg { width:84px; height:84px; font-size:30px; box-shadow:0 10px 26px rgba(30,36,55,.18); }
.pname { text-transform:none; letter-spacing:-.2px; font-size:20px; color:var(--ink); margin:8px 0 0; }
.mini-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); text-align:center; }
.mini-stats b { display:block; font-size:18px; color:var(--navy); } .mini-stats span { font-size:11px; color:var(--mute); }
.theme-pick { display:flex; gap:12px; flex-wrap:wrap; }
.theme-opt { display:flex; align-items:center; gap:10px; padding:10px 18px 10px 12px; border:2px solid var(--line); border-radius:12px; background:var(--card); cursor:pointer; color:var(--ink); font-weight:500; transition:border-color .2s, transform .2s var(--ease), box-shadow .2s; }
.theme-opt:hover { transform:translateY(-2px); box-shadow:var(--shadow); } .theme-opt.on { border-color:var(--navy); box-shadow:0 0 0 4px rgba(255,97,21,.14); }
.swatch { width:34px; height:34px; border-radius:9px; border:1px solid var(--line); } .swatch.light { background:linear-gradient(135deg,#fff 50%,#fff0e8 50%); } .swatch.dark { background:linear-gradient(135deg,#1b2030 50%,#ff7a33 50%); }
.subtabs { display:inline-flex; gap:4px; padding:4px; background:var(--card); border:1px solid var(--line); border-radius:12px; margin-bottom:16px; box-shadow:var(--shadow); }
.subtabs a { padding:7px 16px; border-radius:9px; color:var(--mute); font-weight:500; text-decoration:none; transition:background .2s, color .2s; } .subtabs a:hover { color:var(--ink); text-decoration:none; }
.subtabs a.on { background:var(--navy); color:#fff; box-shadow:0 4px 12px rgba(255,97,21,.3); }
.count-pill { display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:26px; padding:0 8px; border-radius:999px; background:var(--ink); color:var(--card); font-size:12px; font-weight:700; }
.pill.role-admin { background:rgba(124,77,255,.15); color:#6b3fd4; } .pill.role-manager { background:rgba(255,97,21,.15); color:#c24a06; } .pill.role-member { background:rgba(15,157,138,.15); color:#0b7a6b; }
html[data-theme="dark"] .pill.role-admin { color:#bba3ff; } html[data-theme="dark"] .pill.role-manager { color:#ff9a60; } html[data-theme="dark"] .pill.role-member { color:#52dccb; }
.team-grid, .role-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.team-head { display:flex; align-items:center; justify-content:space-between; gap:10px; } .team-head h3 { margin:0; font-size:16px; }
.team-members { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; } .member { display:inline-flex; align-items:center; background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:3px 12px 3px 4px; font-size:12.5px; } .member .av { width:24px; height:24px; font-size:10px; margin-right:7px; }
.team-card, .role-card { transition:transform .25s var(--ease), box-shadow .25s var(--ease); } .team-card:hover, .role-card:hover { transform:translateY(-3px); }
.pick-list { max-height:240px; overflow:auto; border:1px solid var(--line); border-radius:10px; padding:4px; }
label.pick { display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:8px; cursor:pointer; } label.pick:hover { background:var(--bg); } label.pick input { width:auto; accent-color:#FF6115; } label.pick .av { margin:0; }
html[data-theme="dark"] .pname { color:var(--ink); }

/* ================= duplicates ================= */
.dup-card { margin-bottom:14px; } .dup-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; } .dup-head .grow { flex:1; }
.dup-modal { max-width:1000px; } .dup-table th { white-space:normal; } .dup-table th.keep { background:rgba(255,97,21,.1); color:var(--navy); }
.dup-table td { white-space:normal; max-width:260px; vertical-align:top; word-break:break-word; }
.keep-pick, .val-pick { display:flex; align-items:flex-start; gap:7px; cursor:pointer; } .keep-pick input, .val-pick input { width:auto; margin-top:3px; accent-color:#FF6115; }
.val-pick:hover { color:var(--navy); }
.dup-summary { margin-top:14px; padding:12px 14px; border-radius:10px; background:var(--soft); border:1px solid rgba(255,97,21,.25); font-size:13px; }

/* ================= leads, products, quotes ================= */
.qi { width:92px; padding:5px 8px; } .quote-doc { padding:24px; }
.qhead { display:flex; justify-content:space-between; gap:16px; margin-bottom:16px; padding-bottom:14px; border-bottom:2px solid var(--navy); }
.qtotal { margin:14px 0 4px auto; width:260px; display:grid; gap:5px; text-align:right; } .qtotal span { margin-right:10px; }
.qtotal .grand { font-size:18px; font-weight:700; padding-top:8px; border-top:1px solid var(--line, #e3e6ee); } .qtotal .grand span { color:var(--navy); }
@media print {
  .rail-wrap, .topbar, .noprint, .page-head .btn, .page-head select, .toast, #modal-root { display:none !important; }
  .app, .stage { display:block !important; } body, .card { background:#fff !important; box-shadow:none !important; color:#000 !important; }
  .grid2 { display:block !important; } .qi { border:0; background:none; width:auto; padding:0; appearance:textfield; -moz-appearance:textfield; } .qi::-webkit-inner-spin-button { display:none; }
}

.page-head select { width:auto; min-width:150px; }