/* ============================================================================
   rv2.css — Roviqo, Surya's September-27 look: near-white paper, white
   cards, a light grey rail, black for action, blue for data, soft pastel
   chips for status. Loaded after rv.css; it only re-tokens and re-dresses.
   ============================================================================ */
:root, :root[data-theme="light"] {
  --bg: #F7F7F8; --bg-2: #F1F1F3; --card: #FFFFFF; --card-2: #FAFAFB;
  --line: #E8E8EC; --line-2: #DCDCE1; --line-3: #111111;
  --ink: #0F0F11; --ink-2: #52525B; --ink-3: #8B8B94;
  --field: #FFFFFF; --field-line: #DCDCE1;
  --blue: #2563EB; --violet: #7C3AED; --cyan: #0891B2; --green: #16A34A; --amber: #D97706; --red: #DC2626; --pink: #DB2777;
  --grad: #111111;
  --hover: rgba(15, 15, 17, .045); --tint: #F1F1F3;
  --glass: rgba(255, 255, 255, .94); --scrim: rgba(15, 15, 17, .42); --shadow-c: rgba(15, 15, 17, .12);
  --radius: 12px; --gold: #111111; --gold-deep: #111111;
  --serif: 'DM Serif Display', 'Playfair Display', Georgia, serif;
  color-scheme: light;
}
body { background: var(--bg); color: var(--ink); font-family: Inter, system-ui, -apple-system, sans-serif; }

/* ---------- the rail: light grey, black when chosen ----------
   Colours come from the rail's own --ink/--line, so a sidebar colour picked
   under Settings → Theme stays readable; untouched, it is exactly the mockup. */
.rail { background: #F4F4F5; border-right: 1px solid #EAEAED; color: var(--ink); padding: 20px 14px 16px; gap: 1px; --rail-on: color-mix(in srgb, var(--ink) 9%, transparent); --rail-hover: color-mix(in srgb, var(--ink) 6%, transparent); }
.rail .logo { padding: 2px 8px 22px; }
.rail .logo-w { font-family: var(--serif); font-size: 32px; font-weight: 400; letter-spacing: -.01em; color: var(--ink); text-transform: lowercase; line-height: 1; background: none; -webkit-text-fill-color: currentColor; }
.rail .logo-w b { -webkit-text-fill-color: currentColor; color: var(--ink); background: none; font-family: Inter, sans-serif; font-size: 20px; margin-left: 4px; vertical-align: 6px; font-weight: 400; }
.rail .logo-sub { color: var(--ink-2); font-size: 10px; letter-spacing: .02em; margin-top: 8px; white-space: nowrap; }
.rail .nav-l { color: var(--ink); padding: 9px 12px; border-radius: 10px; font-size: 14px; font-weight: 500; gap: 12px; border-left: 0; }
.rail .nav-l svg { opacity: .9; color: currentColor; }
.rail .nav-l:hover { background: var(--rail-hover); color: var(--ink); }
.rail .nav-l.on { background: var(--rail-on); color: var(--ink); box-shadow: none; border-left: 0; padding-left: 12px; font-weight: 600; }
.rail .nav-l.on svg { color: currentColor; opacity: 1; }
.rail .nav-l[href="#dashboard"].on { background: #111; color: #fff; } .rail .nav-l[href="#dashboard"].on svg { color: #fff; }
.rail .nav-gt { font-weight: 600; }
.rail .nav-gt.on { background: transparent; font-weight: 700; }
.rail .nav-caret { margin-left: auto; color: var(--ink-2); display: inline-flex; transition: transform .15s; }
.rail .nav-badge { background: var(--rail-on); color: var(--ink); font-size: 11px; font-weight: 600; border-radius: 999px; padding: 1px 7px; margin-left: auto; }
.rail .nav-badge:empty { display: none; }
.rail .nav-badge.red { background: #EF4444; color: #fff; min-width: 22px; height: 22px; display: inline-grid; place-items: center; padding: 0 6px; }
.rail .nav-sub { padding-left: 0; }
.rail .nav-g a { display: flex; align-items: center; gap: 12px; color: var(--ink); opacity: .86; padding: 8px 12px 8px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 500; }
.rail .nav-g a svg { color: currentColor; flex: none; }
.rail .nav-g a:hover, .rail .nav-sub a:hover { background: var(--rail-hover); color: var(--ink); opacity: 1; }
.rail .nav-g a.on, .rail .nav-sub a.on { background: var(--rail-on); color: var(--ink); opacity: 1; font-weight: 600; }
.rail .nav-s2 { display: none; margin: 2px 0 6px 30px; border-left: 1px solid var(--line-2, #E0E0E4); }
.rail .nav-s2 a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail .nav-s2.open { display: block; }
.rail .nav-s2 a { display: block !important; padding: 5px 12px !important; font-size: 12.5px !important; color: var(--ink-2) !important; opacity: 1 !important; font-weight: 500 !important; border-radius: 0 8px 8px 0 !important; background: none !important; }
.rail .nav-s2 a:hover { color: var(--ink) !important; }
.rail .nav-s2 a.on { color: var(--ink) !important; font-weight: 600 !important; box-shadow: inset 2px 0 0 currentColor; }
.rail .rail-div { height: 1px; background: var(--line-2, #E0E0E4); margin: 12px 8px; flex: none; }
.rail .rail-tag { display: block; position: relative; margin: auto 0 0; background: #fff; border: 1px solid #EAEAED; border-radius: 12px; padding: 16px 16px 14px; color: #0F0F11; text-decoration: none; }
.rail .rail-tag img { display: none; }
.rail .rail-tag .spark { display: block; font-size: 20px; line-height: 1; margin-bottom: 12px; }
.rail .rail-tag b { display: block; font-size: 14.5px; line-height: 1.3; color: #0F0F11; font-weight: 500; padding-right: 20px; }
.rail .rail-tag i { position: absolute; right: 12px; bottom: 14px; width: auto; height: auto; background: none; margin: 0; color: #27272A; }
.rail .rail-me { border-top: 0; padding: 14px 6px 0; margin-top: 12px; display: flex; gap: 12px; align-items: center; }
.rail .rail-me .avatar { width: 44px; height: 44px; font-size: 14px; background: #111 !important; color: #fff !important; }
.rail .rail-me .who b { color: var(--ink); font-size: 13.5px; font-weight: 500; }
.rail .rail-me .who span { color: var(--ink-3); font-size: 12px; }
.rail .rail-ver, .rail #planCard { display: none; }
.rail .biz, .rail #bizSwitch .card { background: transparent; border: 1px solid var(--line-2, #E4E4E7); border-radius: 10px; color: var(--ink); padding: 7px 10px; margin: -6px 0 12px; }
.rail .biz:hover { background: var(--rail-hover); }
.rail .biz .biz-ic { background: var(--rail-on); color: var(--ink); }
.rail .biz .biz-t b { color: var(--ink); font-weight: 600; }
.rail .biz .biz-t span { color: var(--ink-3); }

/* ---------- top bar ---------- */
.top { background: rgba(247, 247, 248, .92); backdrop-filter: blur(8px); border-bottom: 1px solid #EDEDF0; }
.search { background: #F1F1F3; border: 1px solid transparent; border-radius: 12px; box-shadow: none; min-height: 44px; }
.search:focus-within { background: #fff; border-color: #DCDCE1; }
.search kbd { background: transparent; border: 0; border-left: 1px solid #DCDCE1; border-radius: 0; color: #3F3F46; font-weight: 600; padding-left: 12px; }
.top .icon-btn.grad, #quickAdd { background: #111 !important; color: #fff !important; border: 0; border-radius: 10px; height: 44px; padding: 0 18px; font-weight: 600; font-size: 14px; box-shadow: none; }
.icon-btn { background: transparent; border-color: transparent; }
#bellBtn { width: 44px; height: 44px; } #bellBtn .dot { background: #EF4444; color: transparent; width: 9px; height: 9px; min-width: 0; padding: 0; top: 8px; right: 10px; border: 2px solid var(--bg); font-size: 0; }
.top .me { background: transparent; border: 0; border-left: 1px solid #E4E4E7; border-radius: 0; padding: 2px 4px 2px 18px; gap: 12px; }
.top .me .avatar { width: 44px; height: 44px; font-size: 14px; background: #EDEDF0 !important; color: #0F0F11 !important; font-weight: 700; }
.top .me .who b { font-size: 14px; font-weight: 500; } .top .me .who span { font-size: 12px; color: #8B8B94; }

/* ---------- avatars: grey initials, like the mockups ---------- */
.avatar, .avatar.p0, .avatar.p1, .avatar.p2, .avatar.p3, .avatar.p4, .avatar.p5, .avatar.p6, .avatar.p7, .avatar.g2, .avatar.g3, .avatar.g4, .avatar.g5 { background: #EDEDF0; color: #27272A; box-shadow: none; font-weight: 600; }

/* ---------- surfaces and controls ---------- */
.card { background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 1px 2px rgba(15, 15, 17, .03); }
.btn { background: #fff; border: 1px solid #DCDCE1; color: #0F0F11; border-radius: 10px; font-weight: 500; box-shadow: none; }
.btn:hover { background: #F4F4F5; }
.btn.primary { background: #111; border-color: #111; color: #fff; box-shadow: none; }
.btn.primary:hover { background: #27272A; }
.btn.danger { background: #DC2626; border-color: #DC2626; color: #fff; }
.link, a.link, button.link { color: #2563EB; }
.tgl.on { background: #111; }
.rv-head h1 { font-size: 36px; font-weight: 700; letter-spacing: -.025em; }
.rv-head .sub { color: #52525B; font-size: 15px; }
.rv-crumb { color: #52525B; font-size: 12.5px; } .rv-crumb b { color: #0F0F11; font-weight: 600; }
.rv-tile { border-radius: 12px; border-color: var(--line); }
.rv-tile .ic { background: #F1F1F3; color: #27272A; }
.rv-tabs button.on { background: #111; border-color: #111; color: #fff; }
.fn-utabs a.on, .ld-tabs a.on, .mt-tabs a.on { color: #0F0F11; border-bottom-color: #111; }
.rv-table th { color: #52525B; font-weight: 500; }
.rv-tag { border-radius: 6px; font-weight: 500; background: #F1F1F3; color: #3F3F46; }
.rv-tag.blue { background: #EAF1FF; color: #2F6BEA; } .rv-tag.green { background: #E7F6EC; color: #1E8E4E; } .rv-tag.violet { background: #F1EAFE; color: #7C3AED; }
.rv-tag.amber { background: #FFF3DF; color: #B7791F; } .rv-tag.red { background: #FDECEC; color: #C62828; } .rv-tag.pink { background: #FDE8F1; color: #C0266D; } .rv-tag.gold { background: #F1F1F3; color: #27272A; }
.pw-svcic.gold { background: #F1F1F3; color: #27272A; }

/* ---------- Client Portal (the list) ---------- */
.cpo-row { display: grid; grid-template-columns: minmax(0, 1.4fr) 140px 150px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 6px; border-bottom: 1px solid var(--line); }
.cpo-row:last-child { border-bottom: 0; }
.cpo-row .who { display: flex; gap: 12px; align-items: center; } .cpo-row .who b { display: block; } .cpo-row .who small { color: var(--ink-3); }
.cpo-row .acts { display: flex; gap: 6px; }

/* ---------- Dashboard (September-27) ---------- */
.d2-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin: 4px 0 20px; }
.d2-hello { font-size: 17px; color: #3F3F46; }
.d2-name { font-family: var(--serif); font-size: 60px; font-weight: 400; line-height: 1; letter-spacing: -.01em; margin: 6px 0 8px; color: #0F0F11; }
.d2-name span { font-family: Inter, sans-serif; font-size: 30px; vertical-align: 12px; }
.d2-head p { font-size: 17px; color: #52525B; margin: 0; }
.d2-hr { display: flex; align-items: center; gap: 22px; padding-top: 6px; } .d2-date { color: #52525B; font-size: 14.5px; } .d2-hr .btn { padding: 10px 16px; font-size: 14px; }
.d2-tiles { display: grid; gap: 16px; margin-bottom: 18px; }
.d2-tile { display: flex; gap: 20px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.d2-tile:hover { border-color: #D4D4D8; box-shadow: 0 6px 18px -12px rgba(15, 15, 17, .25); }
.d2-tic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.d2-tile .l { font-size: 15px; color: #27272A; } .d2-tile .v { font-size: 32px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin: 2px 0 4px; font-variant-numeric: tabular-nums; }
.d2-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 600; } .d2-delta.up { color: #16A34A; } .d2-delta.down { color: #DC2626; }
.d2-vs { font-size: 14px; color: #6B6B74; }
.d2-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 16px; align-items: stretch; }
@media (max-width: 1100px) { .d2-grid, .d2-tiles { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 720px) { .d2-grid, .d2-tiles { grid-template-columns: 1fr !important; } .d2-head { flex-direction: column; } .d2-name { font-size: 46px; } }
.d2-w { min-width: 0; display: flex; } .d2-w > .card { flex: 1; }
.d2-card { padding: 18px 20px; display: flex; flex-direction: column; min-width: 0; }
.d2-ch { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.d2-ch h3 { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; margin: 0; }
.d2-ch h3 svg { color: #0F0F11; } .d2-w[data-w="revenue"] .d2-ch h3 svg { color: #2563EB; }
.d2-ch .link { font-size: 13.5px; font-weight: 500; }
.d2-sel { border: 1px solid #DCDCE1; border-radius: 10px; padding: 7px 30px 7px 12px; font: inherit; font-size: 13px; background-color: #fff; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%2352525B' stroke-width='1.5'/></svg>"); background-repeat: no-repeat; background-position: right 11px center; -webkit-appearance: none; appearance: none; cursor: pointer; }
.d2-big { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; } .d2-big b { font-size: 30px; letter-spacing: -.02em; } .d2-big .d2-delta { font-size: 16px; }
.d2-bars { display: grid; grid-template-columns: 40px minmax(0, 1fr); height: 170px; margin-top: auto; }
.d2-bars .ax { display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; color: #8B8B94; padding-bottom: 20px; }
.d2-bars .cols { display: flex; align-items: stretch; gap: 8px; border-bottom: 1px solid #ECECEF; position: relative; margin-bottom: 20px; background-image: linear-gradient(#F1F1F3 1px, transparent 1px); background-size: 100% 33.33%; }
.d2-bars .col { flex: 1; position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.d2-bars .col i { display: block; width: 72%; max-width: 22px; background: #D5DDFB; border-radius: 3px 3px 0 0; transition: background .15s; }
.d2-bars .col span { position: absolute; bottom: -20px; font-size: 11px; color: #52525B; }
.d2-bars .col.hi i, .d2-bars .col:hover i { background: #2563EB; } .d2-bars .col.hi span { font-weight: 700; color: #0F0F11; }
.d2-bars .tip { display: none; position: absolute; top: 0; left: 50%; transform: translate(-50%, -8px); background: #fff; border: 1px solid #E4E4E7; border-radius: 8px; box-shadow: 0 8px 20px -10px rgba(15, 15, 17, .25); padding: 6px 10px; font-style: normal; white-space: nowrap; z-index: 2; }
.d2-bars .tip small { display: block; font-size: 11px; color: #6B6B74; } .d2-bars .tip b { display: flex; align-items: center; gap: 6px; font-size: 13.5px; } .d2-bars .tip b::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #2563EB; }
.d2-bars .col.hi .tip, .d2-bars .col:hover .tip { display: block; } .d2-bars .cols:hover .col.hi:not(:hover) .tip { display: none; }
.d2-pipe { display: flex; flex-direction: column; gap: 4px; }
.d2-pipe a { display: grid; grid-template-columns: 18px 120px minmax(0, 1fr) 30px; gap: 10px; align-items: center; padding: 8px 4px; border-radius: 8px; color: inherit; text-decoration: none; font-size: 14px; }
.d2-pipe a:hover { background: #F7F7F8; } .d2-pipe .hex { display: inline-flex; } .d2-pipe .tr { height: 9px; background: #F1F1F3; border-radius: 999px; overflow: hidden; } .d2-pipe .tr i { display: block; height: 100%; border-radius: 999px; } .d2-pipe b { text-align: right; font-size: 15px; }
.d2-sched { display: flex; flex-direction: column; }
.d2-sched .it { display: grid; grid-template-columns: 74px 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 56px; }
.d2-sched .tm { font-size: 13.5px; color: #3F3F46; align-self: start; padding-top: 4px; }
.d2-sched .rl { align-self: stretch; position: relative; display: flex; justify-content: center; } .d2-sched .rl::before { content: ''; position: absolute; top: 0; bottom: 0; width: 1px; background: #E4E4E7; } .d2-sched .it:first-child .rl::before { top: 10px; } .d2-sched .it:last-child .rl::before { bottom: calc(100% - 12px); }
.d2-sched .rl i { position: relative; width: 11px; height: 11px; border-radius: 50%; margin-top: 7px; box-shadow: 0 0 0 3px #fff; }
.d2-sched .tx { align-self: start; min-width: 0; } .d2-sched .tx b { display: block; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .d2-sched .tx small { color: #6B6B74; font-size: 13px; }
.d2-join { border-radius: 999px !important; padding: 7px 16px !important; font-size: 13px !important; }
.d2-go { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #E4E4E7; background: #fff; display: grid; place-items: center; cursor: pointer; color: #0F0F11; } .d2-go svg { transform: rotate(-90deg); } .d2-go:hover { background: #F4F4F5; }
.d2-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.d2-table th { text-align: left; font-weight: 500; color: #6B6B74; padding: 6px 6px 10px; border-bottom: 1px solid #ECECEF; font-size: 13px; }
.d2-table td { padding: 10px 6px; border-bottom: 1px solid #F1F1F3; } .d2-table tr:last-child td { border-bottom: 0; } .d2-table tbody tr { cursor: pointer; } .d2-table tbody tr:hover td { background: #FAFAFB; }
.d2-table .who { display: flex; align-items: center; gap: 12px; } .d2-table .avatar { width: 38px; height: 38px; font-size: 12px; flex: none; } .d2-table .mut { color: #6B6B74; }
.d2-chip { display: inline-flex; align-items: center; gap: 7px; border-radius: 8px; padding: 5px 12px; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.d2-chip i { width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); background: currentColor; }
.d2-chip.blue { background: #EAF1FF; color: #2F6BEA; } .d2-chip.amber { background: #FFF3DF; color: #C47A12; } .d2-chip.green { background: #E7F6EC; color: #1E8E4E; } .d2-chip.pink { background: #FDE8F1; color: #C0266D; } .d2-chip.violet { background: #F1EAFE; color: #7C3AED; } .d2-chip.grey { background: #F1F1F3; color: #52525B; }
.d2-more { border: 0; background: none; cursor: pointer; color: #0F0F11; padding: 4px; border-radius: 6px; } .d2-more:hover { background: #F1F1F3; }
.d2-tasks .hd { display: flex; justify-content: space-between; font-size: 13px; color: #6B6B74; padding: 0 2px 8px; border-bottom: 1px solid #ECECEF; }
.d2-tasks .tk { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 2px; border-bottom: 1px solid #F1F1F3; } .d2-tasks .tk:last-child { border-bottom: 0; }
.d2-tasks input { width: 18px; height: 18px; accent-color: #111; cursor: pointer; }
.d2-tasks .tx { cursor: pointer; min-width: 0; } .d2-tasks .tx b { display: block; font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .d2-tasks .tx small { color: #6B6B74; font-size: 12.5px; } .d2-tasks .tx small.late { color: #DC2626; }
.d2-pri { border-radius: 8px; padding: 6px 12px; font-size: 12.5px; font-weight: 500; min-width: 66px; text-align: center; } .d2-pri.red { background: #FDECEC; color: #DC2626; } .d2-pri.amber { background: #FFF3DF; color: #C47A12; } .d2-pri.green { background: #E7F6EC; color: #1E8E4E; }
.d2-act .it { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; }
.d2-act .ai { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; } .d2-act .tx { min-width: 0; } .d2-act .tx b { display: block; font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .d2-act .tx small { color: #6B6B74; font-size: 12.5px; } .d2-act .tm { color: #6B6B74; font-size: 12px; white-space: nowrap; }
.d2-lead { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 14px; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid #F1F1F3; color: inherit; text-decoration: none; } .d2-lead:last-child { border-bottom: 0; } .d2-lead b { display: block; font-size: 13.5px; font-weight: 500; } .d2-lead small { color: #6B6B74; font-size: 12px; } .d2-lead > svg { transform: rotate(-90deg); color: #8B8B94; }
.d2-team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .d2-team div { background: #F7F7F8; border-radius: 12px; padding: 12px; } .d2-team i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; } .d2-team b { font-size: 20px; } .d2-team small { display: block; color: #6B6B74; font-size: 12px; }
.d2-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .d2-quick a { display: flex; align-items: center; gap: 8px; border: 1px solid #E4E4E7; border-radius: 10px; padding: 12px; font-size: 13px; color: inherit; text-decoration: none; } .d2-quick a:hover { background: #F7F7F8; }
.d2-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; flex: 1; padding: 18px 10px; color: #6B6B74; font-size: 13px; } .d2-empty b { color: #0F0F11; font-size: 14px; } .d2-empty .btn { margin-top: 6px; } .d2-empty.big { padding: 60px; }
/* the Configure Dashboard dialog */
.modal.d2-cfgm { width: min(560px, calc(100vw - 32px)); max-width: 560px; padding: 36px 36px 24px; border-radius: 16px; }
.modal.d2-cfgm > h3:empty { display: none; }
.d2-cfgh { position: relative; margin-bottom: 20px; } .d2-cfgh h2 { font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 6px; } .d2-cfgh p { color: #52525B; font-size: 15px; margin: 0; }
.d2-x { position: absolute; right: -6px; top: -4px; border: 0; background: none; cursor: pointer; color: #0F0F11; padding: 6px; border-radius: 8px; } .d2-x:hover { background: #F1F1F3; }
.d2-cfgl { display: flex; flex-direction: column; gap: 6px; max-height: min(560px, 60vh); overflow: auto; padding-right: 4px; }
.d2-cfg { display: grid; grid-template-columns: 26px 44px minmax(0, 1fr) auto 50px; gap: 14px; align-items: center; border: 1px solid #ECECEF; border-radius: 12px; padding: 7px 14px; background: #fff; }
.d2-cfg.drag { opacity: .45; } .d2-cfg .grip { color: #8B8B94; cursor: grab; display: inline-flex; }
.d2-cfg .ci { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; } .d2-cfg b { font-size: 15.5px; font-weight: 500; }
.d2-cfg .mv { display: flex; gap: 2px; opacity: 0; transition: opacity .15s; } .d2-cfg:hover .mv, .d2-cfg:focus-within .mv { opacity: 1; } .d2-cfg .mv button { border: 0; background: #F4F4F5; border-radius: 6px; font-size: 9px; padding: 4px 6px; cursor: pointer; color: #52525B; }
.d2-cfg .tgl { display: inline-block; width: 46px; height: 26px; } .d2-cfg .tgl::after { width: 20px; height: 20px; } .d2-cfg .tgl.on::after { transform: translateX(20px); } .d2-cfg .tgl:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }
.modal.d2-cfgm .modal-foot { border-top: 1px solid #ECECEF; margin-top: 20px; padding-top: 20px; }
.d2-cfgf { display: grid; grid-template-columns: auto auto 1fr; gap: 12px; width: 100%; align-items: start; }
.d2-cfgf > a.btn { display: inline-flex; gap: 8px; align-items: center; padding: 11px 16px; font-size: 14.5px; position: relative; } .d2-cfgf > a.btn small { position: absolute; top: calc(100% + 6px); left: 0; white-space: nowrap; font-size: 11px; color: #8B8B94; font-weight: 400; }
.d2-cfgf > a.btn svg:last-of-type { transform: rotate(-90deg); }
.d2-cfgf #cfgReset { padding: 11px 16px; font-size: 14px; } .d2-cfgf #cfgSave { padding: 12px 22px; font-size: 15px; justify-self: end; }
/* rail fixes after the first look */
.rail .logo-sub { white-space: nowrap; font-size: 10px; }
.rail .nav-caret { transform: none; } .rail .nav-gt:not(.open) .nav-caret { transform: rotate(-90deg); }
.rail .nav-badge.red:empty { display: none; }
.rail #chromeLeadCount, .rail #chromeTaskCount { display: none !important; }

.d2-act .tx .t1 { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .d2-act .tx .t1 b { font-weight: 600; }
.d2-table td:first-child { white-space: nowrap; }
.d2-cfgf #cfgSave { white-space: nowrap; }

/* ============================================================================
   The Dashboard mockup, measured: a 224px rail with Sales Hub and Project Hub,
   a 79px top bar with a wide search, and the dashboard's own rows.
   ============================================================================ */
:root, :root[data-theme="light"] { --bg: #F6F7FA; --bg-2: #ECEDF2; --line: #ECEEF3; --line-2: #E1E3EA; --ink: #0B0F1E; --ink-2: #4A5070; --ink-3: #7A819C; }
.rq { grid-template-columns: 224px 1fr; } @media (max-width: 900px) { .rq { grid-template-columns: 1fr; } .rail { width: 264px; } }
.main { padding: 0 22px 34px; }

/* ---------- rail ---------- */
.rail { background: #F1F2F6; border-right: 1px solid #E8EAF0; padding: 20px 16px 28px 17px; gap: 0; }
.rail .logo { padding: 0 9px 19px; }
.rail .logo-w { font-size: 38px; letter-spacing: -.015em; }
.rail .logo-w b { font-size: 25px; margin-left: 9px; vertical-align: 2px; }
.rail .logo-sub { font-size: 10.5px; color: #5A6080; margin-top: 9px; letter-spacing: 0; }
.rail #bizSwitch { display: none; }
.rail svg { stroke-width: 2; }
.rail .nav-l { padding: 0 10px 0 22px; height: 36.5px; border-radius: 10px; font-size: 13px; font-weight: 400; gap: 14px; color: #0B0F1E; white-space: nowrap; }
.rail .nav-l svg { width: 20px; height: 20px; opacity: 1; flex: none; }
.rail .nav-l.on { background: #E4E6EC; font-weight: 600; padding-left: 22px; }
.rail .nav-l[href="#dashboard"] { height: 40px; margin-bottom: 12px; font-weight: 500; padding-left: 14px; gap: 21px; }
.rail .nav-l[href="#dashboard"].on { background: #0B0B0F; color: #fff; box-shadow: 0 6px 14px -8px rgba(11, 11, 15, .6); }
.rail .nav-l[href="#dashboard"].on svg { color: #fff; }
.rail .nav-l[href="#dashboard"] svg { --door: #F1F2F6; } .rail .nav-l[href="#dashboard"].on svg { --door: #0B0B0F; }
.rail .nav-gt.hub { height: 34px; background: #E9EAEF; font-weight: 600; margin-bottom: 0; padding-left: 13px; gap: 22px; } .rail .nav-g { padding-top: 1px; margin: 0; }
.rail .nav-gt.hub:hover { background: #E1E3EA; }
.rail .nav-gt.hub svg { fill: currentColor; }
.rail .nav-gt.hub .nav-caret { color: #07090F; opacity: 1; } .rail .nav-gt.hub .nav-caret svg { fill: none; width: 15px; height: 15px; stroke-width: 3; opacity: 1; }
.rail .nav-gt.hub[data-g="projects"] { margin-top: 23px; }
.rail .nav-gt.hub[data-g="projects"] svg { fill: none; }
.rail .nav-caret { color: #0B0F1E; }
.rail .nav-gt:not(.open) .nav-caret { transform: rotate(-90deg); }
.rail .nav-g a { padding: 0 10px 0 28px; height: 31.5px; gap: 20px; font-size: 13px; font-weight: 400; opacity: 1; color: #151A30; border-radius: 9px; white-space: nowrap; }
.rail .nav-g a svg { width: 17px; height: 17px; stroke-width: 2.2; }
.rail .nav-g a.on, .rail .nav-sub a.on { background: #E4E6EC; font-weight: 600; }
.rail .nav-s2 { margin: 2px 0 6px 38px; }
.rail #ng-projects .nav-s2 { margin-left: 36px; }
.rail .nav-s2 a { height: auto !important; }
.rail > * { flex-shrink: 0; } .rail { overflow-y: auto; scrollbar-width: none; } .rail::-webkit-scrollbar { display: none; }
.rail .rail-gap { height: 18px; flex: none; }
.rail .rail-fill { flex: 1 1 auto; min-height: 14px; }
.rail .nav-badge.dark { background: #0B0B0F; color: #fff; min-width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; padding: 0; font-size: 12px; font-weight: 600; margin-left: auto; }
.rail .nav-badge.dark:empty { display: none; }
.rail .rail-me { border-top: 1px solid #E1E3EA; padding: 21px 0 6px 1px; margin-top: 8px; gap: 12px; flex: none; position: relative; }
.rail .rail-me .avatar { width: 48px; height: 48px; font-size: 15px; font-weight: 700; flex: none; }
.rail .rail-me .who { min-width: 0; flex: 1; } .rail .rail-me .who b { display: block; font-size: 12px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rail .rail-me .who span { font-size: 12px; color: #7A819C; }
.rail-more { border: 0; background: none; cursor: pointer; color: #0B0F1E; padding: 3px; border-radius: 8px; display: inline-grid; place-items: center; flex: none; } .rail-more:hover { background: #E4E6EC; } .rail-more svg { stroke-width: 3; }

/* ---------- top bar ---------- */
.top { margin: 0 -22px 0; padding: 16px 22px 16px 20px; height: 79px; gap: 0; background: rgba(246, 247, 250, .94); border-bottom: 1px solid #E8EAF0; }
.top .search-wrap { flex: 1000 1 320px; max-width: 762px; } .top .search { max-width: none; width: 100%; } .top .top-sp { flex: 1 1 34px; min-width: 34px; }
.search { background: #E9EAF0; border-radius: 10px; min-height: 46px; padding: 0 12px 0 16px; gap: 12px; }
.top .search svg { width: 21px !important; height: 21px !important; color: #0B0F1E !important; stroke-width: 2.3; opacity: 1 !important; flex: none; }
.search input { font-size: 14px; color: #0B0F1E; } .search input::placeholder { color: #5C6280; opacity: 1; }
.search kbd { background: #DCDEE6; border: 0; border-radius: 8px; padding: 5px 11px; font: 600 12px Inter, sans-serif; color: #151A30; }
.top .icon-btn.grad, #quickAdd { display: inline-flex; align-items: center; gap: 14px; width: auto; height: 46px; padding: 0 10px 0 12px; border-radius: 8px; background: #0B0B0F !important; font-size: 14px; font-weight: 400 !important; margin-right: 19px; width: 114px; min-width: 114px; justify-content: center; gap: 13px; } #quickAdd span { font-weight: 400; }
#quickAdd svg { stroke-width: 2.2; } #quickAdd svg:last-child { margin-left: 2px; }
#bellBtn { width: 40px; height: 46px; border: 0; background: none; } #bellBtn svg { width: 27px !important; height: 27px !important; stroke-width: 2.1; color: #0B0F1E; }
#bellBtn .dot { width: 10px; height: 10px; top: 7px; right: 3px; border: 0; }
.bell-wrap { margin-right: 7px; }
.top .me { border-left: 1px solid #E1E3EA; padding: 0 0 0 17px; gap: 18px; cursor: pointer; height: 48px; align-items: center; }
.top .me .avatar { width: 48px; height: 48px; font-size: 16px; background: #E6E8EF !important; }
.top .me .who { min-width: 162px; } .top .me .who b { font-size: 14px; font-weight: 400; color: #0B0F1E; } .top .me .who span { font-size: 12px; color: #7A819C; margin-top: 3px; }
.me-caret { border: 0 !important; background: none !important; width: 32px; height: 32px; color: #0B0F1E; } .me-caret svg { stroke-width: 2.4; }
.acct-pop { position: fixed; z-index: 300; background: #fff; border: 1px solid #E1E3EA; border-radius: 14px; box-shadow: 0 24px 60px -20px rgba(11, 15, 30, .35); padding: 8px; }
.acct-pop .acct-h { padding: 10px 12px 12px; border-bottom: 1px solid #ECEEF3; margin-bottom: 6px; } .acct-pop .acct-h b { display: block; font-size: 14px; } .acct-pop .acct-h span { font-size: 12.5px; color: #7A819C; }
.acct-pop a, .acct-pop button { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; border: 0; background: none; font: inherit; font-size: 13.5px; color: #0B0F1E; padding: 10px 12px; border-radius: 9px; cursor: pointer; text-decoration: none; }
.acct-pop a:hover, .acct-pop button:hover { background: #F1F2F6; } .acct-pop small { display: block; font-size: 11.5px; color: #7A819C; } .acct-pop .out { color: #DC2626; border-top: 1px solid #ECEEF3; border-radius: 0 0 9px 9px; margin-top: 6px; }

/* ---------- the dashboard ---------- */
.d2-head { margin: 19px 0 13px 8px; align-items: flex-start; }
.d2-hello { font-size: 16px; color: #3B4060; line-height: 20px; }
.d2-name { font-family: Inter, system-ui, sans-serif; font-size: 54px; font-weight: 800; letter-spacing: -.04em; line-height: 56px; margin: 4px 0 3px; color: #07090F; }
.d2-name span { font-size: 30px; vertical-align: 8px; margin-left: 8px; font-weight: 400; letter-spacing: 0; }
.d2-head p { font-size: 16px; line-height: 22px; color: #5C6486; }
.d2-hr { gap: 38px; padding-top: 0; margin-top: 2px; } .d2-date { color: #7A819C; font-size: 13.5px; letter-spacing: -.01em; }
.d2-hr .btn { height: 38px; padding: 0 15px 0 14px; font-size: 12px; font-weight: 500; letter-spacing: -.01em; border-radius: 8px; border-color: #E1E3EA; box-shadow: 0 2px 6px -2px rgba(11, 15, 30, .12); gap: 7px; } .d2-hr .btn svg { stroke-width: 1.6; fill: #07090F; stroke: #fff; width: 20px; height: 20px; } .d2-hr .btn svg circle { fill: #fff; stroke: #fff; }
.d2-tiles { gap: 14px; margin-bottom: 17px; grid-template-columns: 1.057fr 1fr 1.125fr 1.196fr !important; }
.d2-tiles.n1 { grid-template-columns: 1fr !important; } .d2-tiles.n2 { grid-template-columns: 1fr 1fr !important; } .d2-tiles.n3 { grid-template-columns: repeat(3, 1fr) !important; } .d2-tiles.n5 { grid-template-columns: repeat(5, 1fr) !important; } .d2-tiles.n6 { grid-template-columns: repeat(6, 1fr) !important; }
.d2-tile { gap: 22px; height: 141px; padding: 16px 16px 0 17px; border-radius: 14px; border-color: #ECEEF3; box-shadow: 0 1px 3px rgba(11, 15, 30, .03); }
.d2-tic { width: 64px; height: 64px; margin-top: 2px; } .d2-tic svg { width: 28px; height: 28px; stroke-width: 2.2; }
.d2-tile .l { font-size: 14px; letter-spacing: -.012em; color: #1B2140; margin-top: 2px; } .d2-tile .v { font-size: 30px; font-weight: 700; letter-spacing: -.025em; line-height: 1.18; margin: 7px 0 4px; color: #07090F; }
.d2-delta { gap: 8px; font-size: 15px; font-weight: 500; } .d2-delta svg { stroke-width: 2.2; width: 17px; height: 17px; } .d2-delta.up { color: #12A150; }
.d2-vs { font-size: 14px; letter-spacing: -.012em; color: #7A819C; margin-top: -3px; }
.d2-tiles.n5 .d2-tile, .d2-tiles.n6 .d2-tile { gap: 12px; } .d2-tiles.n5 .d2-tic, .d2-tiles.n6 .d2-tic { width: 46px; height: 46px; } .d2-tiles.n5 .d2-tile .v, .d2-tiles.n6 .d2-tile .v { font-size: 24px; }
.d2-grid { display: grid; gap: 17px 15px; margin-bottom: 17px; grid-template-columns: 1.44fr 1fr .96fr; }
.d2-grid.r2 { grid-template-columns: 1.53fr 1fr 1.09fr; }
.d2-grid.n1 { grid-template-columns: 1fr; } .d2-grid.n2 { grid-template-columns: 1.44fr 1fr; }
.d2-grid.r1 .d2-card { min-height: 275px; } .d2-grid.r2 .d2-card { min-height: 310px; } .d2-grid { align-items: stretch; }
@media (max-width: 1100px) { .d2-grid, .d2-grid.r2, .d2-tiles { grid-template-columns: 1fr 1fr !important; } .d2-tile { height: auto; padding-bottom: 16px; } }
@media (max-width: 720px) { .d2-grid, .d2-grid.r2, .d2-tiles { grid-template-columns: 1fr !important; } }
.d2-card { padding: 12px 20px 10px 18px; border-radius: 14px; border-color: #ECEEF3; box-shadow: 0 1px 3px rgba(11, 15, 30, .03); }
.d2-ch { margin-bottom: 9px; min-height: 32px; } .d2-ch h3 { gap: 14px; font-size: 14.5px; font-weight: 600; letter-spacing: -.015em; color: #07090F; } .d2-ch h3 svg { width: 22px; height: 22px; stroke-width: 2; color: #07090F; }
.d2-w[data-w="revenue"] .d2-ch h3 svg { color: #2F54EB; }
.d2-ch .link { font-size: 13.5px; font-weight: 400; color: #2563EB; text-decoration: none; }
.d2-sel { height: 32px; padding: 0 34px 0 13px; border-radius: 8px; border-color: #E1E3EA; font-size: 12.5px; color: #0B0F1E; background-position: right 13px center; }
.d2-big { gap: 26px; margin: -2px 0 21px; align-items: baseline; } .d2-big b { font-size: 28px; font-weight: 700; letter-spacing: -.025em; color: #07090F; } .d2-big .d2-delta { font-size: 16px; gap: 10px; } .d2-big .d2-vs { font-size: 15px; margin-left: -18px; }
.d2-bars { grid-template-columns: 34px minmax(0, 1fr); height: 143px; margin-top: 0; }
.d2-bars .ax { font-size: 11.5px; color: #7A819C; padding-bottom: 22px; }
.d2-bars .cols { gap: 0; margin-bottom: 22px; border-bottom: 1px solid #E8EAF0; background-image: linear-gradient(#EEF0F5 1px, transparent 1px), linear-gradient(90deg, #EEF0F5 1px, transparent 1px); background-size: 100% 33.34%, 8.3334% 100%; border-right: 1px solid #EEF0F5; }
.d2-bars .col i { width: 62%; max-width: 24px; background: #D6DBFA; border-radius: 5px 5px 0 0; }
.d2-bars .col.hi i, .d2-bars .col:hover i { background: #2457E6; }
.d2-bars .col span { bottom: -22px; font-size: 11.5px; color: #5C6486; } .d2-bars .col.hi span { color: #07090F; font-weight: 700; }
.d2-bars .tip { border-color: #E8EAF0; border-radius: 9px; padding: 8px 12px 9px; box-shadow: 0 10px 24px -12px rgba(11, 15, 30, .3); transform: translate(-50%, -9px); top: auto; bottom: var(--h, 60%); }
.d2-bars .tip small { font-size: 11.5px; color: #7A819C; margin-bottom: 4px; } .d2-bars .tip b { font-size: 14px; gap: 8px; } .d2-bars .tip b::before { width: 10px; height: 10px; background: #2457E6; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); border-radius: 0; }
.d2-pipe { gap: 0; margin-top: 6px; }
.d2-pipe a { grid-template-columns: 20px 92px minmax(0, 1fr) 40px; gap: 12px; padding: 0 0 0 4px; height: 33.3px; font-size: 13px; letter-spacing: -.015em; color: #151A30; }
.d2-pipe .hex svg { width: 16px; height: 16px; } .d2-pipe .tr { height: 10px; background: #E9EAF1; } .d2-pipe b { font-size: 15px; font-weight: 700; color: #07090F; }
.d2-sched { margin-top: 3px; }
.d2-sched .it { grid-template-columns: 68px 24px minmax(0, 1fr) auto; gap: 6px; min-height: 54px; align-items: start; } .d2-sched .it:last-child { min-height: 44px; }
.d2-sched .tm { font-size: 13px; letter-spacing: -.01em; color: #4A5070; padding-top: 7px; }
.d2-sched .rl::before { width: 2px; background: #CFDDFB; top: 0; bottom: 0; } .d2-sched .it:first-child .rl::before { top: -8px; } .d2-sched .it:last-child .rl::before { bottom: -6px; }
.d2-sched .rl i { width: 12px; height: 12px; margin-top: 10px; box-shadow: 0 0 0 3px #fff; }
.d2-sched .tx { padding-top: 2px; } .d2-sched .tx b { font-size: 13px; font-weight: 600; letter-spacing: -.015em; color: #07090F; } .d2-sched .tx small { font-size: 12.5px; letter-spacing: -.01em; color: #5C6486; }
.d2-join { height: 30px; min-width: 50px; padding: 0 14px !important; font-size: 12.5px !important; font-weight: 500; background: #0B0B0F !important; margin-top: 8px; display: inline-grid !important; place-items: center; }
.d2-go { width: 34px; height: 34px; border-color: #E1E3EA; margin-top: 6px; } .d2-go svg { transform: none; stroke-width: 2.4; width: 16px; height: 16px; }
.d2-table { font-size: 12.5px; letter-spacing: -.012em; } .d2-table th { font-size: 12.5px; font-weight: 400; color: #5C6486; padding: 6px 4px 12px; border-bottom-color: #E8EAF0; }
.d2-table td { height: 47.5px; padding: 0 4px; border-bottom-color: #ECEEF3; color: #151A30; } .d2-table .avatar { width: 38px; height: 38px; font-size: 12.5px; font-weight: 700; background: #E9EAF0; color: #151A30; } .d2-table .who { gap: 14px; } .d2-table .mut { color: #7A819C; }
.d2-table td:first-child, .d2-table th:first-child { width: 52px; padding-left: 1px; } .d2-table td.avc { width: 50px; padding: 0; } .d2-table td:last-child { width: 30px; text-align: right; } .d2-table td.pst { width: 120px; } .d2-table td.psv { width: 100px; }
.d2-chip { gap: 9px; border-radius: 8px; height: 31px; min-width: 100px; padding: 0 12px 0 12px; font-size: 12px; letter-spacing: -.01em; font-weight: 400; } .d2-chip svg { width: 13px; height: 13px; flex: none; }
.d2-chip.blue { background: #E6EEFF; color: #2563EB; } .d2-chip.amber { background: #FFF1DE; color: #E08A1E; } .d2-chip.green { background: #E2F6EA; color: #178F4A; } .d2-chip.pink { background: #FFE6F1; color: #E0218A; }
.d2-more svg { stroke-width: 3.4; width: 18px; height: 18px; }
.d2-tasks .hd { font-size: 13px; color: #5C6486; padding: 4px 0 10px 2px; border-bottom-color: #E8EAF0; } .d2-tasks .hd span:last-child { width: 58px; }
.d2-tasks .tk { grid-template-columns: 20px minmax(0, 1fr) 58px; gap: 12px; padding: 0 0 0 2px; height: 43px; border-bottom: 0; }
.d2-tasks input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 1.6px solid #B4B9C9; border-radius: 4px; background: #fff; margin: 0; display: inline-grid; place-items: center; } .d2-tasks input:checked { background: #0B0B0F; border-color: #0B0B0F; } .d2-tasks input:checked::after { content: '✓'; color: #fff; font-size: 12px; line-height: 1; }
.d2-tasks .tx b { font-size: 12.5px; font-weight: 400; letter-spacing: -.015em; color: #07090F; } .d2-tasks .tx small { font-size: 12px; letter-spacing: -.01em; color: #7A819C; }
.d2-pri { height: 30px; min-width: 58px; padding: 0; border-radius: 8px; font-size: 12.5px; font-weight: 400; display: inline-grid; place-items: center; } .d2-pri.red { background: #FFE4E6; color: #E5484D; } .d2-pri.amber { background: #FFF1DE; color: #E08A1E; } .d2-pri.green { background: #E2F6EA; color: #178F4A; }
.d2-act { margin-top: -4px; border-top: 1px solid #ECEEF3; padding-top: 4px; }
.d2-act .it { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; padding: 0; height: 47.6px; }
.d2-act .ai { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; } .d2-act .ai svg { width: 22px; height: 22px; stroke-width: 2.2; }
.d2-act .tx .t1 { font-size: 12.5px; letter-spacing: -.015em; color: #07090F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .d2-act .tx small { display: block; font-size: 12.5px; letter-spacing: -.01em; color: #5C6486; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .d2-act .tm { font-size: 11.5px; color: #7A819C; }

/* the demo banner sits over the foot of the page: keep the person in the rail clear of it */
body:has(.demo-banner) .rail { padding-bottom: 62px; }
.rail, .top { letter-spacing: -.012em; }

/* small screens: the top bar keeps only what fits */
@media (max-width: 900px) { .top { height: auto; padding: 10px 14px; margin: 0 -14px; gap: 8px; } .top .search-wrap { flex: 1 1 auto; } .top .top-sp { display: none; } .railtoggle { width: 40px; height: 40px; } .d2-tile { height: auto; padding-bottom: 16px; } .top .me .who, .me-caret { display: none; } .top .me { border-left: 0; padding-left: 6px; } #quickAdd { width: 46px; min-width: 46px; margin-right: 8px; padding: 0; } #quickAdd span, #quickAdd svg:last-child { display: none; } .bell-wrap { margin-right: 2px; } .top .search kbd { display: none; } .d2-head { margin-left: 0; } .d2-hr .d2-date { display: none; } .main { padding: 0 14px 34px; } }

/* ============================================================================
   Leads list, measured from the mockup (1536 wide: content 231→1511).
   ============================================================================ */
.lz-crumb { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: #4A5070; margin: 0 0 0 8px; } .lz-crumb a { color: #4A5070; text-decoration: none; } .lz-crumb b { color: #07090F; font-weight: 500; }
.lz-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin: 2px 0 13px 8px; }
.lz-head h1 { font-size: 40px; font-weight: 700; letter-spacing: -.035em; line-height: 1; margin: 0 0 -1px; color: #07090F; }
.lz-head p { font-size: 16px; color: #5C6486; margin: 0; letter-spacing: -.01em; }
.lz-hr { display: flex; align-items: center; gap: 16px; padding-top: 8px; }
.lz-motto { font-size: 9.5px; letter-spacing: .32em; text-transform: uppercase; color: #6B7194; margin-right: 12px; white-space: nowrap; }
.lz-btn { height: 40px; padding: 0 20px; font-size: 14px; font-weight: 500; border-radius: 8px; gap: 12px; letter-spacing: -.01em; white-space: nowrap; } .lz-btn.primary { padding: 0 22px; } .lz-btn.sq { width: 48px; padding: 0; justify-content: center; }
.lz-btn svg { stroke-width: 2; } .lz-btn.primary svg { stroke-width: 2.2; }
.lz-tiles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; margin-bottom: 15px; }
.lz-tile { display: flex; flex-direction: column; justify-content: space-between; height: 87px; background: #fff; border: 1px solid #ECEEF3; border-radius: 12px; padding: 16px 20px 14px 21px; color: inherit; text-decoration: none; box-shadow: 0 1px 3px rgba(11, 15, 30, .03); }
.lz-tile .l { font-size: 13.5px; color: #4A5070; letter-spacing: -.01em; } .lz-tile .row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.lz-tile b { font-family: var(--serif); font-size: 33px; font-weight: 400; letter-spacing: -.01em; line-height: 1; color: #07090F; font-variant-numeric: tabular-nums; }
.lz-tile i { display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 9px 0 7px; border-radius: 6px; font-style: normal; font-size: 12.5px; font-weight: 500; letter-spacing: -.01em; } .lz-tile i.up { background: #E2F6EA; color: #178F4A; } .lz-tile i.down { background: #FFE4E6; color: #E5484D; } .lz-tile i svg { stroke-width: 2.4; }
.lz-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 19px; }
.lz-tabs { display: flex; gap: 10px; } .lz-tabs button { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px 0 16px; border: 0; border-radius: 8px; background: #EEEFF3; color: #1B2140; font: inherit; font-size: 13.5px; font-weight: 500; letter-spacing: -.01em; cursor: pointer; } .lz-tabs button b { font-weight: 500; font-size: 13px; color: #4A5070; } .lz-tabs button.on { background: #0B0B0F; color: #fff; padding-right: 10px; } .lz-tabs button.on b { background: #fff; color: #0B0B0F; border-radius: 999px; min-width: 28px; height: 22px; display: inline-grid; place-items: center; padding: 0 7px; font-weight: 600; }
.lz-tools { display: flex; align-items: center; gap: 12px; }
.lz-search { display: flex; align-items: center; gap: 14px; width: 256px; height: 40px; border: 1px solid #E1E3EA; border-radius: 8px; background: #fff; padding: 0 14px 0 15px; } .lz-search svg { color: #0B0F1E; stroke-width: 2; flex: none; } .lz-search input { border: 0; background: none; font: inherit; font-size: 13.5px; width: 100%; outline: none; color: #0B0F1E; } .lz-search input::placeholder { color: #8B8FA6; }
.lz-tools .lz-btn { padding: 0 15px 0 16px; gap: 11px; font-size: 13.5px; } .lz-tools .lz-btn svg:last-child:not(:first-child) { margin-left: 2px; } .lz-n { background: #0B0B0F; color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 7px; }
.lz-bulk { display: flex; align-items: center; gap: 10px; background: #0B0B0F; color: #fff; border-radius: 10px; padding: 8px 14px; margin: -8px 0 12px; font-size: 13px; } .lz-bulk .btn.sm { background: #fff; } .lz-bulk .link { color: #C9CBD6; margin-left: auto; background: none; border: 0; cursor: pointer; }
.lz-card { padding: 0; border-radius: 12px; overflow: hidden; }
.lz-table { width: 100%; border-collapse: collapse; }
.lz-table th { height: 38px; padding: 0 6px; text-align: left; font-size: 13px; font-weight: 400; color: #3B4060; background: #FBFBFC; border-bottom: 1px solid #ECEEF3; white-space: nowrap; letter-spacing: -.01em; }
.lz-table .c-status { width: 143px; } .lz-table .c-received { width: 125px; } .lz-table .c-kind { width: 129px; } .lz-table .c-budget { width: 137px; } .lz-table .c-intent { width: 152px; } .lz-table .c-assignee { width: 153px; } .lz-table .c-activity { width: 196px; }
.lz-table th span { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; } .lz-table th span svg { color: #4A5070; } .lz-table th.on span { color: #07090F; } .lz-table th.on span svg { color: #07090F; stroke-width: 2.4; }
.lz-table th.ck, .lz-table td.ck { width: 44px; padding-left: 18px; } .lz-table th.more, .lz-table td.more { width: 46px; text-align: right; padding-right: 14px; }
.lz-table th.ck { padding-left: 18px; } .lz-table th:nth-child(2) { padding-left: 4px; }
.lz-table td { height: 51.5px; padding: 0 6px; border-bottom: 1px solid #F0F1F5; font-size: 13.5px; color: #07090F; letter-spacing: -.012em; vertical-align: middle; } .lz-table tr:last-child td { border-bottom: 0; }
.lz-table tbody tr { cursor: pointer; } .lz-table tbody tr:hover td { background: #FAFAFC; } .lz-table tbody tr.sel td { background: #F3F6FF; }
.lz-table input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 17px; height: 17px; border: 1.6px solid #B4B9C9; border-radius: 4px; background: #fff; margin: 0; display: block; cursor: pointer; } .lz-table input[type=checkbox]:checked { background: #0B0B0F; border-color: #0B0B0F; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><path d='M20 6 9 17l-5-5'/></svg>"); background-size: 12px; background-position: center; background-repeat: no-repeat; }
.lz-table td.nm { padding-left: 4px; } .lz-table .who { display: flex; align-items: center; gap: 10px; } .lz-av { width: 40px; height: 40px; flex: none; font-size: 13px; font-weight: 600; background: #E9EAF0; color: #151A30; object-fit: cover; }
.lz-table .who b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; } .lz-table .who small { display: block; font-size: 12.5px; color: #6B7194; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; margin-top: 1px; }
.lz-table td.mut { color: #4A5070; font-size: 13px; line-height: 19px; }
.lz-st { display: inline-grid; place-items: center; min-width: 86px; height: 32px; padding: 0 12px; border-radius: 6px; font-size: 13px; font-weight: 400; letter-spacing: -.01em; }
.lz-st.blue { background: #E9F0FF; color: #2563EB; } .lz-st.blue2 { background: #E6EEFF; color: #2F6BEA; } .lz-st.green { background: #E3F7EE; color: #178F4A; } .lz-st.violet { background: #F1EAFE; color: #7C3AED; } .lz-st.teal { background: #DDF5EA; color: #0F7A5A; } .lz-st.grey { background: #F0F1F5; color: #4A5070; }
.lz-int { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; color: #07090F; border: 0; background: none; font-family: inherit; cursor: pointer; padding: 4px 8px; margin: -4px -8px; border-radius: 6px; } .lz-int:hover { background: #F1F1F4; } .lz-int i { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.lz-who { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; color: #4A5070; } .lz-who .avatar.sm { width: 32px; height: 32px; font-size: 11.5px; font-weight: 600; background: #E9EAF0; color: #151A30; }
.lz-table td.act b { display: block; font-size: 13px; font-weight: 400; color: #3B4060; letter-spacing: -.01em; } .lz-table td.act small { display: block; font-size: 12.5px; color: #6B7194; margin-top: 2px; }
.lz-more { width: 30px; height: 30px; border: 0; background: none; border-radius: 6px; cursor: pointer; color: #07090F; display: inline-grid; place-items: center; } .lz-more:hover { background: #F0F1F5; } .lz-more svg { stroke-width: 3.2; }
.lz-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 70px 20px; text-align: center; color: #6B7194; font-size: 13.5px; } .lz-empty b { font-size: 16px; color: #07090F; } .lz-empty .btn { margin-top: 8px; }
.lz-foot { display: flex; justify-content: space-between; align-items: center; height: 84px; padding: 0 0 0 7px; border-bottom: 1px solid #ECEEF3; font-size: 13.5px; color: #4A5070; letter-spacing: -.01em; }
.lz-pager { display: flex; align-items: center; gap: 4px; } .lz-pager button { width: 36px; height: 36px; border: 1px solid #E1E3EA; border-radius: 8px; background: #fff; font: inherit; font-size: 13.5px; color: #4A5070; cursor: pointer; display: inline-grid; place-items: center; } .lz-pager button[data-lzpg]:not([data-lzpg="prev"]):not([data-lzpg="next"]) { border-color: transparent; } .lz-pager button.on { background: #0B0B0F; color: #fff; border-color: #0B0B0F; font-weight: 600; } .lz-pager button:disabled { opacity: .45; cursor: default; } .lz-pager button[data-lzpg="prev"] svg { transform: rotate(90deg); } .lz-pager button[data-lzpg="next"] svg { transform: rotate(-90deg); } .lz-pager button svg { stroke-width: 2.4; }
.lz-pager .rpp { margin: 0 12px 0 40px; } .lz-pager select { height: 36px; width: 70px; border: 1px solid #E1E3EA; border-radius: 8px; padding: 0 28px 0 12px; font: inherit; font-size: 13.5px; color: #07090F; background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='7'><path d='M1 1l5 5 5-5' fill='none' stroke='%230B0F1E' stroke-width='1.8'/></svg>") no-repeat right 11px center; -webkit-appearance: none; appearance: none; }
.lz-pop { position: absolute; z-index: 200; min-width: 220px; background: #fff; border: 1px solid #E1E3EA; border-radius: 12px; box-shadow: 0 24px 60px -24px rgba(11, 15, 30, .35); padding: 6px; }
.lz-pop > button { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: none; font: inherit; font-size: 13.5px; color: #0B0F1E; padding: 9px 12px; border-radius: 8px; cursor: pointer; } .lz-pop > button:hover { background: #F4F4F6; } .lz-pop > button.danger { color: #DC2626; }
.lz-fpop { padding: 8px 8px 4px; width: 300px; } .lz-fpop > b { display: block; font-size: 14px; margin: 2px 4px 10px; } .lz-fpop label { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 8px; font-size: 13px; color: #4A5070; margin-bottom: 8px; } .lz-fpop label.ck { grid-template-columns: 20px 1fr; color: #0B0F1E; padding: 2px 4px; } .lz-fpop select { height: 34px; border: 1px solid #E1E3EA; border-radius: 8px; font: inherit; font-size: 13px; padding: 0 8px; background: #fff; } .lz-fpop .acts { display: flex; justify-content: flex-end; gap: 8px; padding: 6px 0 4px; border-top: 1px solid #ECEEF3; margin-top: 6px; }
.lz-picks { display: grid; gap: 6px; } .lz-pick { text-align: left; border: 1px solid #E1E3EA; background: #fff; border-radius: 10px; padding: 11px 14px; font: inherit; font-size: 14px; cursor: pointer; } .lz-pick:hover { background: #F4F4F6; } .lz-pick.on { border-color: #0B0B0F; background: #0B0B0F; color: #fff; }
@media (max-width: 1250px) { .lz-tiles { grid-template-columns: repeat(4, 1fr); } .lz-tile { height: auto; } .lz-motto { display: none; } .lz-bar { flex-wrap: wrap; } .lz-card { overflow-x: auto; } .lz-table { min-width: 1100px; } }
@media (max-width: 720px) { .lz-tools { flex-wrap: wrap; width: 100%; } .lz-search { width: 100%; } .lz-tabs { flex-wrap: wrap; } .lz-tiles { grid-template-columns: 1fr 1fr; } .lz-head { flex-direction: column; } .lz-hr { padding-top: 0; } .lz-foot { flex-direction: column; height: auto; gap: 12px; padding: 16px 0; } .lz-pager .rpp { margin-left: 8px; } }

/* ============================================================================
   A lead's page, measured from the mockups (content 231→1511).
   ============================================================================ */
.l3 { display: block; } .l3.with-rail { display: grid; grid-template-columns: minmax(0, 1fr) 286px; gap: 16px; align-items: start; } .l3-main { min-width: 0; } .l3-rail { display: grid; gap: 14px; padding-top: 10px; min-width: 0; }
.l3-crumb { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: #6B7194; margin: 2px 0 0 4px; } .l3-crumb a { color: #6B7194; text-decoration: none; } .l3-crumb b { color: #07090F; font-weight: 500; }
.l3-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 10px 0 0 4px; }
.l3-id { display: flex; gap: 24px; align-items: flex-start; min-width: 0; max-width: 100%; }
.l3-av { width: 114px; height: 114px; border-radius: 50%; background: #EEEFF3; color: #07090F; display: grid; place-items: center; font-size: 44px; font-weight: 600; letter-spacing: -.02em; flex: none; object-fit: cover; }
.l3-idt { padding-top: 2px; min-width: 0; }
.l3-st { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .l3-st small { font-size: 12px; color: #8B8FA6; }
.l3-chip { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 12px 0 10px; border-radius: 8px; background: #F1F1F4; font-size: 12.5px; font-weight: 500; color: #07090F; } .l3-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--c, #0B0F1E); }
.l3-idt h1 { display: flex; align-items: center; gap: 10px; font-size: 30px; font-weight: 700; letter-spacing: -.03em; margin: 0 0 3px; line-height: 1.1; }
.l3-star { border: 0; background: none; cursor: pointer; color: #9CA0B4; display: inline-grid; place-items: center; padding: 2px; } .l3-star.on { color: #B8935A; } .l3-star.on svg { fill: #B8935A; }
.l3-quote { font-size: 14px; color: #52525B; margin: 0 0 8px; cursor: text; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: min(620px, 100%); } .l3-quote i { color: #9CA0B4; font-style: italic; }
.l3-tags { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .l3-tags span { height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 13px; border-radius: 8px; background: #EEEFF3; font-size: 13px; color: #07090F; letter-spacing: -.01em; } .l3-tags span.own b { font-weight: 400; color: #8B8FA6; cursor: pointer; margin-left: 2px; } .l3-tags span.hl { background: #E6EEFF; color: #2F6BEA; }
.l3-tags .add { height: 30px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid #E1E3EA; border-radius: 8px; background: #fff; font: inherit; font-size: 13.5px; cursor: pointer; color: #07090F; }
.l3-tags.small span, .l3-tags.small .add { height: 30px; font-size: 13px; padding: 0 12px; }
.l3-acts { display: flex; gap: 14px; align-items: center; flex: none; padding-top: 0; }
.l3-btn { height: 42px; padding: 0 22px; font-size: 14.5px; font-weight: 500; border-radius: 8px; gap: 10px; letter-spacing: -.01em; white-space: nowrap; } .l3-btn.sq { width: 48px; padding: 0; justify-content: center; } .l3-btn.wide { width: 100%; justify-content: center; margin-top: 18px; } .l3-btn.primary { padding: 0 24px; }
.l3-na svg { margin-left: 2px; }
.l3-tabs { display: flex; gap: 0; border-bottom: 1px solid #E8EAF0; margin: 10px 0 14px; overflow-x: auto; scrollbar-width: none; } .l3-tabs::-webkit-scrollbar { display: none; }
.l3.with-rail .l3-tabs a { padding: 8px 13px 12px; font-size: 13.5px; }
.l3-tabs a { display: inline-block; padding: 8px 20px 12px; font-size: 14px; color: #4A5070; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; letter-spacing: -.01em; } .l3-tabs a:first-child { padding-left: 4px; } .l3-tabs a.on { color: #07090F; font-weight: 600; border-bottom-color: #0B0B0F; }
.l3-card { padding: 20px 16px 18px; border-radius: 14px; border-color: #ECEEF3; }
.l3-ch { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; } .l3-ch h3 { font-size: 16.5px; font-weight: 600; margin: 0; letter-spacing: -.015em; } .l3-ch .btn.sm { height: 30px; padding: 0 12px; font-size: 13px; gap: 6px; } .l3-ch .link { font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.l3-ch.big { align-items: flex-start; margin-bottom: 16px; } .l3-ch.big h2 { font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 4px; } .l3-ch.big p { margin: 0; font-size: 14.5px; color: #6B7194; }
.l3-tools { display: flex; gap: 12px; align-items: center; } .l3-tools .lz-search { width: 178px; height: 42px; gap: 10px; } .l3-tools .lz-search.wide { width: 284px; } .l3-sel { height: 42px; border: 1px solid #E1E3EA; border-radius: 8px; padding: 0 34px 0 18px; font: inherit; font-size: 14px; background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='7'><path d='M1 1l5 5 5-5' fill='none' stroke='%230B0F1E' stroke-width='1.8'/></svg>") no-repeat right 14px center; -webkit-appearance: none; appearance: none; }
.l3-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.l3-tile { background: #fff; border: 1px solid #ECEEF3; border-radius: 14px; padding: 17px 18px 14px; height: 96px; display: flex; flex-direction: column; } .l3-tile .l { font-size: 13.5px; color: #4A5070; } .l3-tile b { display: flex; align-items: center; gap: 12px; font-size: 24px; font-weight: 700; letter-spacing: -.025em; margin: 4px 0 3px; line-height: 1.1; } .l3-tile small { font-size: 13px; color: #8B8FA6; } .l3-tile small em { font-style: normal; color: #DC2626; }
.l3-dot { width: 10px; height: 10px; border-radius: 50%; background: #F03E3E; box-shadow: 0 0 0 6px #FDE8E8; margin-left: auto; margin-right: 20px; }
.l3-grid { display: grid; grid-template-columns: 1.14fr 1.2fr 1fr; gap: 16px; align-items: start; } .l3-col { display: grid; gap: 16px; }
@media (max-width: 1250px) { .l3-grid { grid-template-columns: 1fr 1fr; } .l3-tiles { grid-template-columns: 1fr 1fr; } .l3.with-rail { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .l3-grid { grid-template-columns: 1fr; } .l3-head { flex-direction: column; } .l3-quote { white-space: normal; } .l3-st small { white-space: nowrap; } .l3-tools { flex-wrap: wrap; } .l3-ch.big { flex-direction: column; } .l3-card { overflow-x: auto; } .l3-chips { flex-wrap: wrap; } .l3-acts { padding-top: 0; flex-wrap: wrap; } .l3-id { gap: 14px; } .l3-av { width: 72px; height: 72px; font-size: 26px; } }
.l3-kv > div { display: grid; grid-template-columns: 165px minmax(0, 1fr); gap: 10px; padding: 4.5px 0; font-size: 13.5px; line-height: 1.4; } .l3-kv span { color: #4A5070; } .l3-kv b { font-weight: 400; color: #07090F; } .l3-side .l3-kv > div { grid-template-columns: 150px minmax(0, 1fr); padding: 6px 0 12px; align-items: start; } .l3-side .l3-kv span { line-height: 1.5; }
.l3-sep { height: 1px; background: #ECEEF3; margin: 18px 0 16px; } .l3-h3 { font-size: 17px; font-weight: 600; margin: 0 0 12px; }
.l3-evs { display: grid; gap: 0; } .l3-ev { display: grid; grid-template-columns: minmax(0, 1.35fr) .95fr 1.25fr; gap: 8px; align-items: center; padding: 6px 0 6px 14px; border-left: 3px solid var(--c); margin-bottom: 6px; font-size: 13px; white-space: nowrap; } .l3-ev b { font-weight: 500; color: var(--c); } .l3-ev span { color: #4A5070; }
.l3-story > div { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 3px 12px; padding: 7px 0; align-items: start; } .l3-story i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #0B0B0F; margin-top: 3px; } .l3-story i.solid { background: #0B0B0F; } .l3-story b { display: block; font-size: 13.5px; font-weight: 400; } .l3-story small { grid-column: 2; font-size: 12.5px; color: #8B8FA6; }
.l3-todo { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid #F0F1F5; font-size: 13.5px; cursor: pointer; } .l3-todo:last-of-type { border-bottom: 0; } .l3-todo input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 1.6px solid #B4B9C9; border-radius: 50%; margin: 0; cursor: pointer; } .l3-todo input:checked { background: #0B0B0F; border-color: #0B0B0F; } .l3-todo small { font-size: 12.5px; color: #4A5070; } .l3-todo small.red { color: #DC2626; }
.l3-notebox { background: #F5F6F9; border-radius: 12px; padding: 14px 16px; font-size: 13.5px; line-height: 1.5; } .l3-notebox b { display: block; font-size: 14px; } .l3-notebox small { display: block; color: #8B8FA6; font-size: 12.5px; margin: 2px 0 8px; } .l3-notebox p { margin: 0; color: #4A5070; } .l3-notebox.soft { color: #4A5070; } .l3-notebox.soft i { color: #9CA0B4; }
.l3-file { display: flex; gap: 12px; align-items: center; padding: 8px 0; } .l3-file .fi { width: 40px; height: 40px; border-radius: 10px; background: #F1F1F4; display: grid; place-items: center; color: #4A5070; flex: none; } .l3-file > div { flex: 1; min-width: 0; } .l3-file b { display: block; font-size: 14px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .l3-file small { color: #8B8FA6; font-size: 12.5px; }
.l3-more { width: 30px; height: 30px; border: 0; background: none; border-radius: 6px; cursor: pointer; color: #07090F; display: inline-grid; place-items: center; flex: none; } .l3-more:hover { background: #F0F1F5; } .l3-more svg { stroke-width: 3; }
.l3-empty { color: #6B7194; font-size: 13.5px; padding: 8px 0; } .l3-empty.tall { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 60px 20px; } .l3-empty b { color: #07090F; font-size: 16px; }
.l3-pop { position: absolute; z-index: 200; min-width: 206px; background: #fff; border: 1px solid #E1E3EA; border-radius: 12px; box-shadow: 0 24px 60px -24px rgba(11, 15, 30, .35); padding: 6px; }
.l3-pop > button { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; border: 0; background: none; font: inherit; font-size: 13.5px; color: #0B0F1E; padding: 9px 12px; border-radius: 8px; cursor: pointer; } .l3-pop > button:hover, .l3-pop > button.on { background: #F1F1F4; } .l3-pop > button.danger { color: #DC2626; } .l3-pop .sep { height: 1px; background: #ECEEF3; margin: 6px 4px; }
/* tables on the tabs */
.l3-two { display: grid; grid-template-columns: minmax(0, 1fr) 368px; gap: 16px; align-items: start; } .l3-two.ct { grid-template-columns: minmax(0, 1fr) 330px; } @media (max-width: 1150px) { .l3-two, .l3-two.ct { grid-template-columns: 1fr; } }
.l3-table { width: 100%; border-collapse: collapse; } .l3-table th { text-align: left; font-size: 13.5px; font-weight: 400; color: #4A5070; padding: 0 8px 10px; border-bottom: 1px solid #ECEEF3; white-space: nowrap; } .l3-table th i { color: #8B8FA6; margin-left: 4px; display: inline-flex; vertical-align: middle; } .l3-table th.c, .l3-table td.c { text-align: center; } .l3-table th.r, .l3-table td.r { text-align: right; }
.l3-table td { padding: 10px 8px; border-bottom: 1px solid #F0F1F5; font-size: 13.5px; color: #07090F; vertical-align: middle; letter-spacing: -.01em; } .l3-table tbody tr { cursor: pointer; } .l3-table tbody tr:hover td { background: #FAFAFC; } .l3-table tbody tr.on td { background: #F6F7FA; } .l3-table td.mut { color: #4A5070; } .l3-table td.red { color: #DC2626; } .l3-table td small { display: block; color: #6B7194; font-size: 12.5px; margin-top: 2px; } .l3-table td b { font-weight: 500; } .l3-table td small.red { color: #DC2626; display: inline; }
.l3-table th.ck, .l3-table td.ck { width: 40px; padding-left: 10px; } .l3-table input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 17px; height: 17px; border: 1.6px solid #B4B9C9; border-radius: 4px; background: #fff; margin: 0; display: block; cursor: pointer; } .l3-table input[type=checkbox]:checked { background: #0B0B0F; border-color: #0B0B0F; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><path d='M20 6 9 17l-5-5'/></svg>"); background-size: 12px; background-position: center; background-repeat: no-repeat; }
.l3-table.ev td { height: 56px; } .l3-evname { display: inline-block; border-left: 3px solid var(--c); padding: 4px 0 4px 12px; color: var(--c); font-weight: 500; }
.l3-showing { font-size: 13.5px; color: #6B7194; padding: 16px 0 0; }
.l3-evside { padding: 22px 20px; } .l3-evtitle { font-size: 21px; font-weight: 600; letter-spacing: -.02em; margin: 0; border-left: 3px solid var(--c); padding-left: 14px; color: var(--c); }
.l3-subtabs { display: flex; border-bottom: 1px solid #ECEEF3; margin: 14px 0 12px; } .l3-subtabs a { padding: 8px 22px 10px; font-size: 14px; color: #4A5070; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; } .l3-subtabs a.on { color: #07090F; font-weight: 600; border-bottom-color: #0B0B0F; }
.l3-side { font-size: 14px; } .l3-side h4 { font-size: 14px; font-weight: 600; margin: 14px 0 8px; } .l3-lines > div { display: flex; gap: 12px; align-items: flex-start; padding: 5px 0; font-size: 14px; color: #07090F; } .l3-lines svg { color: #4A5070; flex: none; margin-top: 2px; } .l3-lines > div span { flex: 1; } .l3-dates > div { display: grid; grid-template-columns: 16px 1fr auto; gap: 12px; padding: 4px 0; font-size: 14px; } .l3-dates span { color: #4A5070; } .l3-dates b { font-weight: 400; } .l3-added { display: block; color: #8B8FA6; font-size: 12.5px; margin-top: 12px; }
.l3-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; } .l3-chips button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 0; border-radius: 8px; background: #EEEFF3; font: inherit; font-size: 13.5px; color: #1B2140; cursor: pointer; letter-spacing: -.01em; } .l3-chips button.on { background: #0B0B0F; color: #fff; }
.l3-who { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; } .l3-who .avatar.sm { width: 32px; height: 32px; font-size: 11px; font-weight: 600; background: #E9EAF0; color: #151A30; } .l3-who .avatar.md { width: 40px; height: 40px; font-size: 12.5px; font-weight: 600; background: #E9EAF0; color: #151A30; } .l3-who.top { align-items: flex-start; } .l3-table.em td.ft { width: 250px; background: transparent !important; } .l3-table.em td.ft .l3-who span > b { font-size: 13.5px; } .l3-table.em td.ft .l3-who span > small { margin-top: 1px; } .l3-who b { display: block; font-weight: 500; } .l3-who small { display: block; color: #6B7194; font-size: 12.5px; }
.l3-role { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px 0 12px; border-radius: 8px; font-size: 13px; white-space: nowrap; } .l3-role select { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; } .l3-role em { font-style: normal; } .l3-role.pink { background: #FBE7F3; color: #C0266D; } .l3-role.blue { background: #E6EEFF; color: #2F6BEA; } .l3-role.amber { background: #FFF1DE; color: #B7791F; } .l3-role.green { background: #E3F7EE; color: #178F4A; } .l3-role.violet { background: #F1EAFE; color: #7C3AED; } .l3-role.grey { background: #F0F1F5; color: #4A5070; }
.l3-radio { width: 18px; height: 18px; border-radius: 50%; border: 1.6px solid #B4B9C9; background: #fff; cursor: pointer; display: block; } .l3-radio.on { border-color: #4F46E5; box-shadow: inset 0 0 0 3px #fff; background: #4F46E5; }
.l3-ctside { padding: 18px 18px 20px; } .l3-cthead { display: flex; gap: 14px; align-items: center; } .l3-cthead .avatar.big { width: 56px; height: 56px; font-size: 17px; font-weight: 600; } .l3-cthead .avatar.pink { background: #FBE7F3; color: #C0266D; } .l3-cthead .avatar.blue { background: #E6EEFF; color: #2F6BEA; } .l3-cthead .avatar.amber { background: #FFF1DE; color: #B7791F; } .l3-cthead .avatar.green { background: #E3F7EE; color: #178F4A; } .l3-cthead .avatar.violet { background: #F1EAFE; color: #7C3AED; } .l3-cthead .avatar.grey { background: #F0F1F5; color: #4A5070; } .l3-cthead > div { flex: 1; } .l3-cthead h2 { font-size: 18px; font-weight: 600; margin: 0 0 6px; letter-spacing: -.015em; }
.l3-foot { display: flex; justify-content: space-between; align-items: center; padding: 18px 0 0; font-size: 13.5px; color: #4A5070; } .l3-foot .lz-pager select { width: auto; padding-right: 30px; }
.l3-pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; } @media (max-width: 900px) { .l3-pgrid { grid-template-columns: 1fr; } }
.l3-pcard { display: flex; gap: 16px; align-items: flex-start; border: 1px solid #ECEEF3; border-radius: 14px; padding: 18px 20px 14px; background: #FCFCFD; } .l3-pcard .pw-svcic { width: 46px; height: 46px; border-radius: 50%; border: 0; flex: none; } .l3-pcard .pw-svcic.pink { background: #FBE7F3; color: #DB2777; } .l3-pcard h3 { font-size: 16px; font-weight: 600; margin: 4px 0 10px; letter-spacing: -.015em; } .l3-pcard > div { flex: 1; min-width: 0; }
.l3-pkv > div { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 10px; padding: 3px 0; font-size: 13.5px; } .l3-pkv span { color: #4A5070; } .l3-pkv b { font-weight: 400; color: #07090F; } .l3-pkv b i { color: #B4B9C9; font-style: normal; }
.l3-pform h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: #6B7194; margin: 14px 0 8px; } .l3-pform h4:first-child { margin-top: 0; } .l3-pform .field { margin-bottom: 8px; }
.l3-agrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; } @media (max-width: 900px) { .l3-agrid { grid-template-columns: 1fr; } }
.l3-fld { margin-bottom: 16px; } .l3-fld label { display: block; font-size: 13.5px; font-weight: 600; color: #3B4060; margin-bottom: 7px; letter-spacing: -.01em; } .l3-fld .v { background: #F5F6F9; border-radius: 10px; padding: 9px 14px; min-height: 38px; font-size: 13.5px; color: #07090F; line-height: 1.55; } .l3-fld .v.tall { min-height: 100px; }
.l3-notes { margin-top: 4px; } .l3-note { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 30px; gap: 16px 20px; align-items: start; padding: 20px 0; border-bottom: 1px solid #ECEEF3; } .l3-note:last-child { border-bottom: 0; } .l3-note .avatar.md { width: 44px; height: 44px; font-size: 13px; font-weight: 600; background: #E9EAF0; color: #151A30; } .l3-note .b b { display: block; font-size: 15px; font-weight: 500; margin-bottom: 4px; } .l3-note .b p { margin: 0; font-size: 14px; color: #3B4060; line-height: 1.55; white-space: pre-wrap; } .l3-note .tm { font-size: 13.5px; color: #6B7194; white-space: nowrap; padding-top: 2px; }
.l3-table.em td b { display: block; font-weight: 400; font-size: 14px; } .l3-table.em td { height: 70px; } .l3-table.em td:nth-child(2) b { font-weight: 500; } .l3-table.em td:nth-child(2) small { display: block; margin-top: 4px; } .l3-table.tk td { height: 68px; } .l3-table.tk tr.done td b { text-decoration: line-through; color: #8B8FA6; } .l3-table.fl td { height: 56px; } .l3-table.pr td { height: 64px; } .l3-table.pr td b { font-weight: 400; }
.l3-ficon { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; margin-right: 14px; vertical-align: middle; background: #EEEFF3; color: #4A5070; } .l3-ficon.pdf { background: #FDECEC; color: #DC2626; } .l3-ficon.pdf b { font-size: 8px; font-weight: 800; } .l3-ficon.img { background: #E6EEFF; color: #2F6BEA; } .l3-ficon.doc { background: #E6EEFF; color: #2563EB; } .l3-ficon.xls { background: #E3F7EE; color: #178F4A; }
.lz-st.teal { background: #DDF5EA; color: #0F7A5A; }
/* history */
.l3-day { display: flex; gap: 10px; align-items: center; font-size: 14.5px; margin: 12px 0 8px; } .l3-day b { font-weight: 600; } .l3-day span, .l3-day small { color: #8B8FA6; font-size: 13.5px; }
.l3-tl { border-left: 2px solid #ECEEF3; margin-left: 6px; padding-left: 0; } .l3-tli { position: relative; display: grid; grid-template-columns: 48px 64px minmax(0, 1fr) 150px; gap: 12px; align-items: center; padding: 6px 0 6px 12px; min-height: 50px; } .l3-tli > i { position: absolute; left: -5px; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: #B4B9C9; transform: translateY(-50%); }
.l3-tli .ki { width: 36px; height: 36px; border-radius: 10px; border: 1px solid #E1E3EA; background: #fff; display: grid; place-items: center; color: #07090F; } .l3-tli .tm { font-size: 12.5px; color: #4A5070; white-space: nowrap; } .l3-tli .tx b { display: block; font-size: 14px; font-weight: 500; } .l3-tli .tx small { display: block; font-size: 13px; color: #6B7194; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .l3-tli .tx small.done { text-decoration: line-through; }
.l3-tli .wh { display: flex; gap: 10px; align-items: center; } .l3-tli .wh .avatar.sm { width: 34px; height: 34px; font-size: 11px; font-weight: 600; background: #E9EAF0; color: #151A30; display: inline-grid; place-items: center; } .l3-tli .wh .avatar.sys { background: #F0F1F5; color: #4A5070; } .l3-tli .wh b { display: block; font-size: 13.5px; font-weight: 400; } .l3-tli .wh small { display: block; font-size: 12.5px; color: #8B8FA6; }
.l3-rcard { padding: 14px 16px 16px; border-radius: 14px; border-color: #ECEEF3; } .l3-rcard h3 { font-size: 15px; font-weight: 600; margin: 0; letter-spacing: -.015em; } .l3-rcard > h3 { margin-bottom: 10px; } .l3-rcard .l3-ch { margin-bottom: 10px; }
.l3-score { display: flex; gap: 14px; align-items: center; } .l3-score svg { width: 70px; height: 70px; flex: none; } .l3-score b { display: block; font-size: 16px; font-weight: 600; } .l3-score small { display: block; font-size: 12.5px; color: #6B7194; margin: 2px 0 6px; line-height: 1.35; } .l3-score .link { font-size: 13px; color: #07090F; text-decoration: none; display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; } .l3-score .link svg { width: 14px; height: 14px; flex: none; }
.l3-rkv > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px; padding: 3px 0; font-size: 13px; align-items: center; } .l3-rkv .who { padding: 4px 0; } .l3-rkv > div:nth-child(8) { padding-top: 8px; } .l3-rkv span { color: #4A5070; } .l3-rkv b { font-weight: 400; } .l3-rkv .who b { display: inline-flex; align-items: center; gap: 8px; } .l3-rkv .who .avatar.sm { width: 30px; height: 30px; font-size: 10.5px; } .l3-int { display: inline-flex; align-items: center; gap: 10px; } .l3-int i { width: 10px; height: 10px; border-radius: 50%; }
.l3-qa { display: grid; gap: 6px; } .l3-qa button { display: flex; align-items: center; gap: 12px; height: 32px; padding: 0 14px; border: 1px solid #E1E3EA; border-radius: 8px; background: #fff; font: inherit; font-size: 13.5px; cursor: pointer; text-align: left; color: #07090F; } .l3-qa button:hover { background: #F5F6F9; }
.l3-fu { background: #FFF1F1; border-color: #FDDCDC; } .l3-fu .h { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; } .l3-fu .ex { width: 22px; height: 22px; border-radius: 50%; background: #DC2626; color: #fff; display: inline-grid; place-items: center; font-size: 13px; font-weight: 700; } .l3-fu .h b { font-size: 16px; font-weight: 600; } .l3-fu .w { font-size: 15px; font-weight: 600; margin-left: 32px; } .l3-fu small { display: block; margin: 4px 0 12px 32px; font-size: 13px; color: #6B7194; } .l3-fu .btn { width: 100%; justify-content: center; height: 34px; }


/* ============================================================================
   Proposals list (.pz-*), measured from Surya's mockup at 1536 × 1024.
   ============================================================================ */
.pz { padding-top: 25px; }
.pz-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin: 0 0 13px; }
.pz-head h1 { font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 36px; margin: 0 0 3px; color: #07090F; } .pz-head p { font-size: 14px; color: #5C6486; margin: 0; letter-spacing: -.01em; }
.pz-tpl { height: 48px; padding: 0 18px; font-size: 14px; gap: 10px; margin-right: 10px; text-decoration: none; margin-top: -6px; } .pz-head .r { display: flex; align-items: center; }
.pz-new { height: 48px; padding: 0 16px 0 14px; font-size: 15px; font-weight: 500; gap: 10px; border-radius: 8px; margin-top: -6px; } .pz-new svg { stroke-width: 2.2; }
.pz-tiles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; }
.pz-tile { height: 96px; background: #F7F8FA; border: 1px solid #EEF0F3; border-radius: 10px; padding: 16px 16px 0 26px; display: flex; flex-direction: column; } .pz-tile b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 28px; color: #07090F; font-variant-numeric: tabular-nums; } .pz-tile span { font-size: 14px; color: #3B4060; margin-top: 3px; line-height: 18px; letter-spacing: -.01em; } .pz-tile small { font-size: 13px; color: #6B7194; margin-top: 2px; line-height: 16px; }
.pz-bar { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 1px solid #E5E7EB; margin-bottom: 26px; }
.pz-tabs { display: flex; gap: 12px; } .pz-tabs button { position: relative; height: 42px; padding: 0 13px; border: 0; background: none; font: inherit; font-size: 14px; color: #3B4060; cursor: pointer; letter-spacing: -.01em; white-space: nowrap; } .pz-tabs button.on { color: #07090F; font-weight: 600; } .pz-tabs button.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #0B0B0F; }
.pz-tools { display: flex; align-items: center; gap: 10px; padding-bottom: 2px; }
.pz-search { display: flex; align-items: center; gap: 13px; width: 216px; height: 40px; background: #F1F2F5; border-radius: 8px; padding: 0 12px 0 11px; } .pz-search svg { color: #0B0F1E; stroke-width: 2; flex: none; } .pz-search input { border: 0; background: none; font: inherit; font-size: 14px; width: 100%; outline: none; color: #0B0F1E; } .pz-search input::placeholder { color: #8B8FA6; }
.pz-btn { height: 40px; padding: 0 19px 0 17px; gap: 11px; font-size: 14px; font-weight: 400; border-radius: 8px; background: #fff; border: 1px solid #E3E6ED; color: #07090F; } .pz-btn.sq { width: 54px; padding: 0; justify-content: center; } .pz-btn svg { stroke-width: 2; } .pz-btn .pz-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 999px; background: #0B0B0F; color: #fff; font-size: 11px; font-weight: 600; margin-left: 2px; }
.pz-card { border: 1px solid #E9EBF0; border-radius: 12px; background: #fff; overflow: hidden; }
.pz-table { width: 100%; border-collapse: collapse; }
.pz-table th { height: 35px; padding: 0 6px; text-align: left; font-size: 13px; font-weight: 500; color: #1B2140; background: #F4F5F7; white-space: nowrap; letter-spacing: -.01em; } .pz-table th span { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; } .pz-table th span svg { color: #4A5070; } .pz-table th.on span svg { color: #07090F; }
.pz-table th.ck, .pz-table td.ck { width: 66px; padding-left: 20px; } .pz-table th.more, .pz-table td.more { width: 65px; text-align: left; padding-left: 0; } .pz-table th.more { padding-left: 0; text-align: center; }
.pz-table .c-no { width: 104px; } .pz-table .c-client { width: 205px; } .pz-table .c-event { width: 174px; } .pz-table .c-amount { width: 100px; } .pz-table .c-status { width: 112px; } .pz-table .c-sent { width: 121px; } .pz-table .c-viewed { width: 140px; } .pz-table .c-activity { width: 176px; }
.pz-table th:nth-child(2), .pz-table td:nth-child(2) { padding-left: 0; }
.pz-table td { height: 47px; padding: 0 6px; font-size: 13px; color: #07090F; letter-spacing: -.012em; vertical-align: middle; border-top: 1px solid #F0F1F5; } .pz-table tbody tr:nth-child(odd) td { background: #F9F9FA; } .pz-table tbody tr { cursor: pointer; } .pz-table tbody tr:hover td { background: #F3F4F7; } .pz-table tbody tr.sel td, .pz-table tbody tr.open td { background: #F3F6FF; }
.pz-table td.mut { color: #4A5070; } .pz-table td.c-amount b { font-weight: 600; font-size: 13.5px; }
.pz-table .who { display: flex; align-items: center; gap: 14px; } .pz-av { width: 32px; height: 32px; border-radius: 50%; background: #EEF0F3; color: #151A30; display: inline-grid; place-items: center; font-size: 12px; font-weight: 600; flex: none; } .pz-table .who b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; } .pz-table .who small { display: block; font-size: 12.5px; color: #6B7194; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; margin-top: 1px; }
.pz-chip { display: inline-grid; place-items: center; height: 24px; padding: 0 12px; border-radius: 6px; background: #EBEBEC; color: #1B2140; font-size: 13px; letter-spacing: -.01em; }
.pz-table td.act b { display: block; font-size: 13px; font-weight: 400; color: #3B4060; } .pz-table td.act small { display: block; font-size: 12.5px; color: #6B7194; margin-top: 1px; }
.pz-table input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border: 1.5px solid #B4B9C9; border-radius: 4px; background: #fff; margin: 0; display: block; cursor: pointer; } .pz-table input[type=checkbox]:checked { background: #0B0B0F; border-color: #0B0B0F; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><path d='M20 6 9 17l-5-5'/></svg>"); background-size: 11px; background-position: center; background-repeat: no-repeat; }
.pz-foot { display: flex; align-items: center; gap: 13px; padding: 20px 10px 20px 17px; border-top: 1px solid #F0F1F5; font-size: 13.5px; color: #4A5070; } .pz-foot > span { flex: 1; }
.pz-pg { display: flex; align-items: center; gap: 9px; } .pz-pg button { width: 33px; height: 33px; border: 0; background: none; border-radius: 8px; font: inherit; font-size: 13.5px; color: #07090F; cursor: pointer; display: inline-grid; place-items: center; } .pz-pg button.on { background: #0B0B0F; color: #fff; } .pz-pg button:disabled { color: #B4B9C9; cursor: default; } .pz-pg button[data-pzpg="prev"] svg { transform: rotate(180deg); } .pz-pg i { font-style: normal; color: #8B8FA6; padding: 0 4px; }
.pz-per { position: relative; display: inline-flex; align-items: center; width: 103px; height: 41px; border: 1px solid #E3E6ED; border-radius: 8px; padding: 0 10px 0 4px; background: #fff; } .pz-per select { -webkit-appearance: none; appearance: none; border: 0; background: none; font: inherit; font-size: 13.5px; color: #07090F; padding: 0 22px 0 10px; height: 100%; cursor: pointer; outline: none; } .pz-per svg { position: absolute; right: 12px; pointer-events: none; }
.pz-empty { padding: 60px 20px; text-align: center; color: #6B7194; font-size: 13.5px; } .pz-empty b { display: block; font-size: 16px; color: #07090F; margin-bottom: 6px; }
.pz-pop { position: absolute; z-index: 60; background: #fff; border: 1px solid #E3E6ED; border-radius: 12px; box-shadow: 0 20px 50px -20px rgba(11, 15, 30, .3); padding: 6px; min-width: 200px; }
.pz-fpop { padding: 8px; width: 260px; display: grid; gap: 10px; } .pz-fpop .field label { font-size: 12px; color: #4A5070; } .pz-fpop.cols label { display: flex; gap: 10px; align-items: center; font-size: 13.5px; padding: 4px 2px; cursor: pointer; } .pz-fx { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
/* the drawer: a wide panel on the right with the proposal's preview, actions and details */
.pz-drawer { position: fixed; top: 79px; right: 0; bottom: 0; width: 480px; max-width: 100vw; background: #fff; border-left: 1px solid #E9EBF0; box-shadow: -24px 0 60px -30px rgba(11, 15, 30, .25); z-index: 45; overflow: auto; padding: 14px 18px 24px; transform: translateX(24px); opacity: 0; transition: .18s; } .pz-drawer.on { transform: none; opacity: 1; }
.pz-dh { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .pz-dh b { font-size: 14px; font-weight: 600; letter-spacing: -.01em; } .pz-x { margin-left: auto; width: 32px; height: 32px; border: 0; background: none; border-radius: 8px; cursor: pointer; display: inline-grid; place-items: center; color: #07090F; } .pz-x:hover { background: #F1F1F4; }
.pz-drawer .card { border: 1px solid #E9EBF0; border-radius: 12px; } .pz-drawer .cp-btns { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .pz-drawer .cp-btns button { font-size: 12px; } .pz-drawer .pr-cover { height: 170px; aspect-ratio: auto; width: 100%; }
@media (max-width: 1250px) { .pz-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pz-bar { flex-wrap: wrap; } .pz-tabs { overflow-x: auto; max-width: 100%; } }
@media (max-width: 900px) { .pz-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pz-card { overflow-x: auto; } .pz-table { min-width: 1100px; } .pz-drawer { width: 100vw; top: 0; } .pz-head { flex-wrap: wrap; } }
/* ============================================================================
   Create Proposal (.cpb-*), measured from Surya's mockups at 1536 × 1024.
   ============================================================================ */
.cpb { padding-top: 12px; }
.cpb-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 4px; }
.cpb-back { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: #07090F; text-decoration: none; margin-bottom: 6px; } .cpb-back svg { stroke-width: 2; }
.cpb-head h1 { font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 36px; margin: 0 0 2px; color: #07090F; } .cpb-head p { font-size: 15px; color: #5C6486; margin: 0; letter-spacing: -.01em; }
.cpb-acts { display: flex; align-items: center; gap: 11px; margin-top: 18px; }
.cpb-btn { height: 40px; min-height: 0; padding: 0 20px; font-size: 13px; font-weight: 400; border-radius: 8px; background: #fff; border: 1px solid #E3E6ED; color: #07090F; gap: 10px; white-space: nowrap; } .cpb-btn.sq { width: 74px; padding: 0; justify-content: center; } .cpb-btn svg { stroke-width: 2; } .cpb-btn.w { width: 100%; justify-content: center; }
.cpb-next { height: 40px; padding: 0 22px 0 26px; font-size: 16px; font-weight: 500; border-radius: 8px; gap: 14px; letter-spacing: -.01em; min-width: 273px; justify-content: center; } .cpb-next.w { width: 100%; min-width: 0; height: 44px; font-size: 14px; }
.cpb-grid { display: grid; grid-template-columns: 255px minmax(0, 1fr) 272px; gap: 18px; align-items: start; } .cpb-grid > .cpb-main { margin-left: -13px; }
.cpb-nav { border: 1px solid #ECEEF3; border-radius: 12px; background: #FAFAFA; padding: 18px 12px 18px 13px; position: relative; align-self: stretch; }
.cpb-nav::before { content: ''; position: absolute; left: 35px; top: 60px; bottom: 60px; width: 1px; background: #E1E3EA; }
.cpb-step { position: relative; display: flex; gap: 19px; align-items: flex-start; width: 100%; text-align: left; border: 0; background: none; padding: 0 0 0 0; min-height: 62px; margin-bottom: 24px; cursor: pointer; font: inherit; } .cpb-step:last-child { margin-bottom: 0; }
.cpb-step .n { width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 1px solid #E1E3EA; color: #07090F; display: grid; place-items: center; font-size: 15px; font-weight: 500; flex: none; position: relative; z-index: 1; }
.cpb-step.on .n { background: #0B0B0F; border-color: #0B0B0F; color: #fff; } .cpb-step.done .n { background: #fff; border-color: #0B0B0F; }
.cpb-step b { display: block; font-size: 14px; font-weight: 600; color: #07090F; letter-spacing: -.01em; line-height: 20px; margin-top: 3px; } .cpb-step small { display: block; font-size: 12.5px; color: #5C6486; line-height: 18px; margin-top: 2px; }
.cpb-main { display: grid; gap: 6px; align-content: start; min-width: 0; font-size: 12.5px; }
.cpb-card { border: 1px solid #ECEEF3; border-radius: 12px; background: #fff; padding: 14px 16px 14px; } .cpb-card.main { padding: 12px 16px 10px; }
.cpb-sech { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; } .cpb-sech h3 { font-size: 18px; font-weight: 700; letter-spacing: -.02em; margin: 0; line-height: 24px; } .cpb-sech p { font-size: 12px; color: #5C6486; margin: 0; line-height: 17px; letter-spacing: -.01em; } .cpb-sech > div:first-child { flex: 1; min-width: 0; } .cpb-sech.sm h3 { font-size: 16px; } .cpb-sech .r { display: flex; gap: 8px; flex: none; }
.cpb-sub h4 { font-size: 15px; font-weight: 600; margin: 0; letter-spacing: -.01em; } .cpb-sub p { font-size: 13px; color: #5C6486; margin: 2px 0 12px; }
.cpb-hr { height: 1px; background: #ECEEF3; margin: 22px 0 18px; }
.cpb-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 18px; } .cpb-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.cpb-f label { display: block; font-size: 13.5px; font-weight: 500; color: #07090F; margin-bottom: 8px; } .cpb-f label i { color: #DC2626; font-style: normal; } .cpb-f label em { color: #5C6486; font-style: normal; font-weight: 400; }
.cpb-in { display: flex; align-items: center; gap: 12px; height: 40px; border: 1px solid #E3E6ED; border-radius: 8px; padding: 0 12px 0 13px; background: #fff; position: relative; } .cpb-in > svg { color: #07090F; flex: none; } .cpb-in input, .cpb-in select { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 14px; color: #07090F; outline: none; padding: 0; height: 100%; } .cpb-in input::placeholder { color: #8B8FA6; } .cpb-in.sel { padding-right: 36px; } .cpb-in.sel select { -webkit-appearance: none; appearance: none; cursor: pointer; } .cpb-in.sel > svg:last-child { position: absolute; right: 12px; pointer-events: none; }
.cpb-in.pick .v { flex: 1; font-size: 14px; } .cpb-in.pick input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.cpb-in.venue .x { border: 0; background: none; font-size: 18px; line-height: 1; color: #07090F; cursor: pointer; padding: 0 4px; } .cpb-in.venue > svg:last-child { color: #07090F; }
.cpb-datecb { display: flex; align-items: center; gap: 14px; } .cpb-datecb .cpb-in { width: 140px; flex: none; padding-right: 8px; }
.cpb-cb { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; cursor: pointer; } .cpb-cb input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 1.5px solid #B4B9C9; border-radius: 4px; margin: 0; background: #fff; cursor: pointer; } .cpb-cb input:checked { background: #0B0B0F url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><path d='M20 6 9 17l-5-5'/></svg>") no-repeat center / 12px; border-color: #0B0B0F; }
.cpb-check { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border: 1.5px solid #B4B9C9; border-radius: 4px; margin: 0; background: #fff; cursor: pointer; display: block; } .cpb-check:checked { background: #0B0B0F url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><path d='M20 6 9 17l-5-5'/></svg>") no-repeat center / 11px; border-color: #0B0B0F; }
.cpb-table { width: 100%; border-collapse: collapse; margin: 0; } .cpb-table th { height: 25px; padding: 0 8px; text-align: left; font-size: 12px; font-weight: 400; color: #5C6486; background: #F4F5F7; white-space: nowrap; } .cpb-table th:first-child { border-radius: 8px 0 0 8px; } .cpb-table th:last-child { border-radius: 0 8px 8px 0; } .cpb-table th.c, .cpb-table td.c { text-align: center; } .cpb-table th.r, .cpb-table td.r { text-align: right; }
.cpb-table td { padding: 8px 8px; font-size: 12.5px; color: #07090F; border-bottom: 1px solid #F0F1F5; vertical-align: middle; } .cpb-table tr:last-child td { border-bottom: 0; } .cpb-table td.mut { color: #5C6486; } .cpb-table tr.off td { opacity: .55; }
.cpb-table .who { display: flex; align-items: center; gap: 12px; } .cpb-table .who b { display: block; font-size: 14px; font-weight: 500; } .cpb-table .who small { display: block; font-size: 12.5px; color: #5C6486; margin-top: 2px; }
.cpb-av { width: 36px; height: 36px; border-radius: 50%; background: #EEF0F3; color: #151A30; display: inline-grid; place-items: center; font-size: 12.5px; font-weight: 600; flex: none; }
.cpb-table.contacts td { height: 47px; } .cpb-table.contacts .cpb-in { height: 36px; width: 162px; } .cpb-table.contacts th:nth-child(1) { width: 40%; } .cpb-table.contacts th:nth-child(3), .cpb-table.contacts th:nth-child(4), .cpb-table.contacts th:nth-child(5) { width: 15%; }
.cpb-radio { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #B4B9C9; background: #fff; display: inline-block; vertical-align: middle; position: relative; cursor: pointer; padding: 0; flex: none; } .cpb-radio.on { border-color: #0B0B0F; } .cpb-radio.on::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #0B0B0F; }
.cpb-tgl { width: 36px; height: 20px; border-radius: 999px; background: #E1E3EA; border: 0; position: relative; cursor: pointer; padding: 0; vertical-align: middle; } .cpb-tgl::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: .15s; } .cpb-tgl.on { background: #0B0B0F; } .cpb-tgl.on::after { left: 18px; }
.cpb-more { width: 30px; height: 30px; border: 0; background: none; border-radius: 6px; cursor: pointer; color: #07090F; display: inline-grid; place-items: center; } .cpb-more:hover { background: #F0F1F5; } .cpb-more svg { stroke-width: 3; }
.cpb-grip { color: #8B8FA6; display: inline-flex; cursor: grab; }
.cpb-note { display: flex; gap: 12px; align-items: flex-start; background: #F4F5F7; border-radius: 10px; padding: 14px 16px; margin-top: 16px; } .cpb-note > svg { flex: none; margin-top: 1px; color: #07090F; } .cpb-note b { display: block; font-size: 13px; font-weight: 600; } .cpb-note p { font-size: 12.5px; color: #5C6486; margin: 3px 0 0; line-height: 17px; }
.cpb-empty { color: #5C6486; font-size: 13.5px; }
/* rail */
.cpb-rail { display: grid; gap: 14px; align-content: start; margin-top: -22px; }
.cpb-rail .cpb-card { padding: 10px 16px 14px; font-size: 13px; } .cpb-rail .h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; white-space: nowrap; } .cpb-rail .h b { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; flex: 1; } .cpb-rail .h .link { font-size: 13px; color: #07090F; text-decoration: underline; text-underline-offset: 3px; border: 0; background: none; cursor: pointer; font-family: inherit; padding: 0; }
.cpb-sum .rows > div { display: flex; gap: 14px; align-items: flex-start; padding: 2px 0 7px; font-size: 14px; } .cpb-sum .rows svg { flex: none; color: #07090F; margin-top: 1px; } .cpb-sum .rows small { display: block; font-size: 13.5px; color: #4A5A8A; margin-top: 1px; line-height: 15px; } .cpb-sum .rows > div:last-child { padding-bottom: 2px; }
.cpb-econ .h svg { color: #07090F; } .cpb-econ .kv > div { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 2px 0; } .cpb-econ .kv span { color: #3B4060; } .cpb-econ .kv b { font-weight: 600; } .cpb-econ .kv.total { border-top: 1px solid #ECEEF3; border-bottom: 1px solid #ECEEF3; margin: 4px 0; padding: 4px 0; } .cpb-econ .kv.total span { font-weight: 600; color: #07090F; font-size: 15px; } .cpb-econ .kv.total b { font-size: 17px; } .cpb-econ .kv .sum { border-top: 1px solid #ECEEF3; margin-top: 2px; padding-top: 6px; } .cpb-econ .kv .sum span { font-weight: 600; color: #07090F; }
.cpb-target { margin: 6px 0 4px; } .cpb-target > span { display: block; font-size: 13.5px; color: #4A5A8A; } .cpb-target .row { display: flex; align-items: center; gap: 10px; } .cpb-target .row b { font-weight: 400; font-size: 13.5px; width: 34px; } .cpb-target input { -webkit-appearance: none; appearance: none; flex: 1; height: 4px; background: #E1E3EA; border-radius: 2px; margin: 0; outline: none; } .cpb-target input::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #0B0B0F; cursor: pointer; } .cpb-target i { font-style: normal; font-size: 13px; font-weight: 600; width: 44px; text-align: right; margin-top: 12px; }
.cpb-break { border-top: 1px solid #ECEEF3; margin-top: 0; padding-top: 6px; } .cpb-break .h { margin-bottom: 8px; } .cpb-break .h b { font-size: 14px; } .cpb-break > div:not(.h) { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 4px 0; } .cpb-break > div:not(.h) svg { color: #07090F; flex: none; } .cpb-break > div:not(.h) span { flex: 1; color: #1B2140; } .cpb-break > div:not(.h) b { font-weight: 500; } .cpb-break .sum { border-top: 1px solid #ECEEF3; margin-top: 4px; padding-top: 8px !important; } .cpb-break .sum span { font-weight: 600; } .cpb-break .sum b { font-weight: 600; }
.cpb-notes .h small { font-size: 12px; color: #5C6486; margin-left: -4px; flex: 1; white-space: nowrap; } .cpb-notes .h b { flex: none; } .cpb-notes textarea { width: 100%; border: 1px solid #E3E6ED; border-radius: 8px; padding: 9px 12px; font: inherit; font-size: 13px; resize: vertical; min-height: 44px; height: 44px; display: block; margin-top: 8px; } .cpb-notes textarea::placeholder { color: #8B8FA6; }
.cpb-cts .ct { display: flex; align-items: center; gap: 14px; padding: 6px 0; } .cpb-cts .ct b { display: block; font-size: 14px; font-weight: 500; } .cpb-cts .ct small { display: block; font-size: 13px; color: #4A5A8A; margin-top: 1px; }
.cpb-nextcard b { display: block; font-size: 16px; font-weight: 600; margin-bottom: 6px; } .cpb-nextcard p { font-size: 13.5px; color: #4A5A8A; line-height: 18px; margin: 0 0 14px; }
/* packages */
.cpb-types { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .cpb-type { display: flex; gap: 14px; align-items: flex-start; text-align: left; border: 1px solid #E3E6ED; border-radius: 10px; background: #fff; padding: 8px 16px 12px; cursor: pointer; font: inherit; } .cpb-type .cpb-radio { margin-top: 2px; width: 22px; height: 22px; } .cpb-type b { display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; } .cpb-type p { margin: 0; font-size: 13px; color: #5C6486; line-height: 17px; } .cpb-type.on { background: #F3F4F4; border-color: #DCDFE5; }
.cpb-ev { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px 0 10px; border-radius: 6px; font-size: 13px; font-weight: 500; white-space: nowrap; } .cpb-ev svg { flex: none; }
.cpb-ev.green, .cpb-tag.green { background: #E6F4EA; color: #2F7D32; } .cpb-ev.violet, .cpb-tag.violet { background: #ECE9FB; color: #5B47D6; } .cpb-ev.red, .cpb-tag.red { background: #FBE7E7; color: #C63D3D; } .cpb-ev.blue, .cpb-tag.blue { background: #E7EEFB; color: #2F55C7; } .cpb-ev.amber, .cpb-tag.amber { background: #FFF4D6; color: #B7791F; } .cpb-ev.orange, .cpb-tag.orange { background: #FFE9D6; color: #C05621; } .cpb-ev.grey, .cpb-tag.grey { background: #EEF0F3; color: #1B2140; }
.cpb-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .cpb-tag { display: inline-flex; align-items: center; gap: 8px; height: 24px; padding: 0 8px 0 10px; border-radius: 6px; font-size: 12.5px; white-space: nowrap; } .cpb-tag button { border: 0; background: none; color: inherit; font-size: 14px; line-height: 1; cursor: pointer; padding: 0; } .cpb-tag.add { background: #fff; border: 1px dashed #C9CDD9; color: #5C6486; padding: 0 8px; cursor: pointer; }
.cpb-date { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #3B4060; white-space: nowrap; }
.cpb-isel { position: relative; display: inline-flex; align-items: center; height: 30px; border: 1px solid #E3E6ED; border-radius: 8px; padding: 0 28px 0 12px; background: #fff; font-size: 13.5px; min-width: 68px; } .cpb-isel select { -webkit-appearance: none; appearance: none; border: 0; background: none; font: inherit; font-size: 13.5px; color: #07090F; outline: none; cursor: pointer; padding: 0; } .cpb-isel > svg { position: absolute; right: 9px; pointer-events: none; }
.cpb-rate input, .cpb-qty, .cpb-cost { border: 0; background: none; font: inherit; font-size: 13.5px; color: #3B4060; width: 64px; outline: none; height: 24px; padding: 0; line-height: 24px; border-radius: 0; } .cpb-rate input:focus, .cpb-qty:focus, .cpb-cost:focus { border-bottom: 1px solid #0B0B0F; } .cpb-qty { width: 34px; text-align: right; } .cpb-cost { width: 70px; }
.cpb-table.cov th, .cpb-table.cov td { padding-left: 6px; padding-right: 6px; } .cpb-table.cov td { height: 42px; padding-top: 0; padding-bottom: 0; } .cpb-table.cov { table-layout: fixed; } .cpb-table.cov th, .cpb-table.cov td { overflow: hidden; white-space: nowrap; } .cpb-table.cov th:first-child, .cpb-table.cov td:first-child { width: 22px; padding-left: 6px; } .cpb-table.cov th:nth-child(2) { width: 118px; } .cpb-table.cov th:nth-child(3) { width: 104px; } .cpb-table.cov th:nth-child(4) { width: 74px; } .cpb-table.cov th:nth-child(5) { width: 70px; } .cpb-table.cov th:nth-child(6) { width: 70px; } .cpb-table.cov th:nth-child(7) { width: 64px; } .cpb-table.cov th:last-child { width: 32px; } .cpb-table.cov .cpb-isel { min-width: 0; padding: 0 20px 0 8px; } .cpb-table.cov .cpb-ev { padding: 0 8px 0 7px; font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .cpb-table.cov .cpb-rate input { width: 100%; } .cpb-table.cov td b { font-size: 14px; font-weight: 700; }
.cpb-tfoot { display: flex; align-items: center; gap: 14px; padding-top: 8px; } .cpb-tfoot .cpb-btn { height: 32px; min-height: 32px; font-size: 13.5px; } .cpb-tfoot .sp { flex: 1; } .cpb-tfoot .lbl { font-size: 14px; color: #5C6486; } .cpb-tfoot > b { font-size: 16px; font-weight: 700; margin-left: 14px; } .cpb-tfoot .cpb-btn { width: 242px; justify-content: center; }
.cpb-cic { width: 22px; height: 22px; display: inline-grid; place-items: center; color: #07090F; } .cpb-table.incl td { height: 32px; padding-top: 0; padding-bottom: 0; } .cpb-table.incl th:first-child, .cpb-table.incl td:first-child { width: 44px; padding-left: 12px; } .cpb-table.incl th:nth-child(2) { width: 138px; } .cpb-table.incl th:nth-child(3) { width: 95px; } .cpb-table.incl th:nth-child(4) { width: 230px; } .cpb-table.incl th:nth-child(5) { width: 44px; } .cpb-table.incl th:nth-child(6) { width: 88px; } .cpb-table.incl td { white-space: nowrap; } .cpb-table.incl .cpb-tags { flex-wrap: nowrap; } .cpb-table.incl td b { font-weight: 500; font-size: 13.5px; }
.cpb-pks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 6px; } .cpb-pk { position: relative; text-align: left; border: 1px solid #E3E6ED; border-radius: 12px; background: #fff; padding: 14px 16px 16px; cursor: pointer; font: inherit; color: #07090F; } .cpb-pk.on { border: 2px solid #0B0B0F; padding: 13px 15px 15px; } .cpb-pk .cpb-radio { display: block; width: 22px; height: 22px; margin-bottom: 14px; } .cpb-pk b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.015em; } .cpb-pk small { display: block; font-size: 13px; color: #5C6486; margin-top: 2px; min-height: 17px; } .cpb-pk .price { font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin-top: 12px; } .cpb-pk em { display: block; font-style: normal; font-size: 13px; color: #5C6486; margin: 2px 0 12px; padding-bottom: 12px; border-bottom: 1px solid #ECEEF3; } .cpb-pk ul { list-style: none; margin: 0; padding: 0; } .cpb-pk li { display: flex; gap: 12px; align-items: center; font-size: 13px; padding: 3px 0; } .cpb-pk li svg { flex: none; color: #07090F; stroke-width: 2.4; }
.cpb-table.pkg th:nth-child(1), .cpb-table.pkg td:nth-child(1) { width: 24px; padding-right: 0; } .cpb-table.pkg th:nth-child(2), .cpb-table.pkg td:nth-child(2) { width: 30px; } .cpb-table.pkg td { height: 40px; padding-top: 3px; padding-bottom: 3px; } .cpb-table.pkg td b { font-weight: 500; font-size: 13.5px; }
.cpb-pksum h2 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: 6px 0 0; } .cpb-pksum .price { font-size: 24px; font-weight: 700; letter-spacing: -.02em; } .cpb-pksum small { display: block; font-size: 13.5px; color: #5C6486; margin-top: 4px; } .cpb-pksum .cpb-hr { margin: 16px 0 14px; } .cpb-pksum .lbl, .cpb-pktot .lbl { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; } .cpb-pksum ul { list-style: none; margin: 0; padding: 0; } .cpb-pksum li { display: flex; gap: 14px; align-items: center; font-size: 14px; padding: 5px 0; } .cpb-pksum li svg { stroke-width: 2.4; }
.cpb-pktot .kv > div { display: flex; justify-content: space-between; font-size: 14px; padding: 4px 0; } .cpb-pktot .kv span { color: #3B4060; } .cpb-pktot .cpb-btn { margin: 8px 0 10px; justify-content: flex-start; background: #F4F5F7; border-color: #F4F5F7; height: 36px; font-size: 13px; } .cpb-pktot .kv.total { border-top: 1px solid #ECEEF3; padding-top: 6px; } .cpb-pktot .kv.total b { font-size: 16px; font-weight: 700; }
.cpb-need .h svg { color: #07090F; } .cpb-need p { font-size: 12.5px; color: #5C6486; line-height: 17px; margin: 0 0 14px; }
.cpb-checks { display: grid; gap: 6px; } .cpb-checks label { display: flex; gap: 10px; align-items: center; font-size: 13.5px; cursor: pointer; }
.cpb-pop { position: absolute; z-index: 1200; background: #fff; border: 1px solid #E3E6ED; border-radius: 12px; box-shadow: 0 20px 50px -20px rgba(11, 15, 30, .3); padding: 6px; min-width: 210px; }
@media (max-width: 1250px) { .cpb-grid { grid-template-columns: 220px minmax(0, 1fr); } .cpb-rail { grid-column: 1 / -1; grid-template-columns: repeat(2, 1fr); } .cpb-grid > .cpb-main { margin-left: 0; } }
@media (max-width: 900px) { .cpb-grid { grid-template-columns: 1fr; } .cpb-nav { display: flex; overflow-x: auto; gap: 14px; padding: 10px; } .cpb-nav::before { display: none; } .cpb-step { width: auto; margin: 0; flex: none; } .cpb-step small { display: none; } .cpb-rail { grid-template-columns: 1fr; } .cpb-row2, .cpb-row3, .cpb-types, .cpb-pks { grid-template-columns: 1fr; } .cpb-head { flex-wrap: wrap; } .cpb-acts { margin-top: 0; flex-wrap: wrap; } .cpb-next { min-width: 0; } .cpb-card.main { overflow-x: auto; } }
/* --- shared bits for steps 3–9 --- */
.cpb-tools { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .cpb-search { display: flex; align-items: center; gap: 10px; height: 34px; border: 1px solid #E3E6ED; border-radius: 8px; padding: 0 12px; background: #fff; width: 190px; } .cpb-search input { border: 0; background: none; font: inherit; font-size: 13px; outline: none; width: 100%; } .cpb-search svg { color: #4A5070; flex: none; }
.cpb-in.sm { height: 34px; font-size: 13px; } .cpb-in.sm select { font-size: 13px; } .cpb-btn.sm { height: 34px; padding: 0 14px; font-size: 13px; gap: 8px; } .cpb-btn.sq.sm { width: 40px; padding: 0; justify-content: center; } .cpb-btn.danger { color: #C63D3D; border-color: #F3C9C9; } .cpb-btn.gold { background: #FBF6EC; border-color: #F1E3C4; } .cpb-btn:disabled { opacity: .5; cursor: default; }
.cpb-tabs2 { display: inline-flex; background: #F1F2F5; border-radius: 8px; padding: 3px; margin-bottom: 14px; } .cpb-tabs2 button { height: 30px; padding: 0 34px; border: 0; background: none; border-radius: 6px; font: inherit; font-size: 13px; color: #4A5070; cursor: pointer; } .cpb-tabs2 button.on { background: #fff; color: #07090F; font-weight: 500; box-shadow: 0 1px 2px rgba(11, 15, 30, .08); } .cpb-tabs2.four { display: flex; } .cpb-tabs2.four button { flex: 1; padding: 0; } .cpb-tabs2.sidetabs { display: flex; margin: 0; } .cpb-tabs2.sidetabs button { flex: 1; padding: 0; }
.cpb-tabs2.plain { background: none; padding: 0; border-bottom: 1px solid #ECEEF3; border-radius: 0; margin-bottom: 12px; } .cpb-tabs2.plain button { border-radius: 0; height: 34px; padding: 0 14px; position: relative; } .cpb-tabs2.plain button.on { box-shadow: none; background: none; } .cpb-tabs2.plain button.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #0B0B0F; }
.cpb-chip { display: inline-grid; place-items: center; height: 22px; padding: 0 9px; border-radius: 6px; font-size: 12px; white-space: nowrap; } .cpb-chip.grey { background: #EDEEF2; color: #1B2140; } .cpb-chip.grey2 { background: #F4F5F7; color: #5C6486; } .cpb-chip.green { background: #E6F4EA; color: #2F7D32; } .cpb-chip.amber { background: #FFF4D6; color: #B7791F; }
.cpb-cost.blue { color: #4A5A8A; } .cpb-cost.r { text-align: right; } .cpb-table .who .cpb-cic { margin-right: 2px; }
.cpb-tfoot.adds { border-top: 1px solid #F0F1F5; padding-top: 12px; margin-top: 4px; } .cpb-tfoot.adds .cpb-btn { width: auto; } .cpb-tfoot.adds .cpb-btn:last-child { width: 240px; }
.cpb-card.sugg h4 { font-size: 14px; font-weight: 600; margin: 0; } .cpb-card.sugg > p { font-size: 12px; color: #5C6486; margin: 2px 0 12px; } .cpb-sugg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .cpb-sg { display: flex; gap: 10px; align-items: flex-start; border: 1px solid #E3E6ED; border-radius: 10px; padding: 12px 12px 12px 14px; } .cpb-sg > div { flex: 1; } .cpb-sg b { display: block; font-size: 12.5px; font-weight: 600; } .cpb-sg em { display: block; font-style: normal; font-size: 13px; font-weight: 700; margin-top: 2px; } .cpb-sg small { display: block; font-size: 11.5px; color: #5C6486; margin-top: 2px; } .cpb-sg button { width: 22px; height: 22px; border-radius: 50%; border: 0; background: #0B0B0F; color: #fff; display: grid; place-items: center; cursor: pointer; align-self: flex-end; }
.cpb-table.adds { table-layout: fixed; } .cpb-table.adds th, .cpb-table.adds td { padding-left: 5px; padding-right: 5px; font-size: 12px; overflow: hidden; } .cpb-table.adds th:nth-child(2) { width: 118px; } .cpb-table.adds th:nth-child(3) { width: 72px; } .cpb-table.adds th:nth-child(4) { width: 136px; } .cpb-table.adds th:nth-child(5) { width: 86px; } .cpb-table.adds th:nth-child(6) { width: 34px; } .cpb-table.adds th:nth-child(7) { width: 66px; } .cpb-table.adds th:nth-child(8) { width: 60px; } .cpb-table.adds th:nth-child(9) { width: 62px; } .cpb-table.adds th:nth-child(10) { width: 34px; } .cpb-table.adds .who b { white-space: normal; line-height: 15px; } .cpb-table.adds .cpb-cost, .cpb-table.adds .cpb-qty { width: 100%; } .cpb-table.adds td { height: 42px; padding-top: 3px; padding-bottom: 3px; } .cpb-table.adds th:first-child, .cpb-table.adds td:first-child { width: 28px; padding-left: 8px; } .cpb-table.adds td b { font-weight: 500; font-size: 12.5px; } .cpb-table.adds .cpb-isel { height: 28px; font-size: 12px; min-width: 0; padding: 0 22px 0 8px; } .cpb-table.adds .cpb-isel select { font-size: 12px; } .cpb-table.adds .cpb-tags { max-width: 150px; gap: 4px; } .cpb-table.adds .cpb-tag { height: 20px; font-size: 11px; padding: 0 6px 0 8px; gap: 5px; }
/* the Add Add-on modal */
.cpb-mscrim { align-items: center; justify-content: center; padding: 20px; } .cpb-modal { width: min(1000px, calc(100vw - 40px)); max-height: calc(100vh - 40px); background: #fff; border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 40px 120px -40px rgba(11, 15, 30, .5); font-size: 13px; }
.cpb-mh { display: flex; align-items: flex-start; gap: 16px; padding: 22px 24px 16px; border-bottom: 1px solid #ECEEF3; } .cpb-mic { width: 40px; height: 40px; border-radius: 10px; background: #0B0B0F; color: #fff; display: grid; place-items: center; flex: none; } .cpb-mh h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 3px; } .cpb-mh p { font-size: 13.5px; color: #5C6486; margin: 0; } .cpb-mh > div { flex: 1; } .cpb-x { width: 32px; height: 32px; border: 0; background: none; border-radius: 8px; cursor: pointer; display: grid; place-items: center; color: #07090F; } .cpb-x:hover { background: #F1F1F4; }
.cpb-mbody { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 16px; padding: 16px 24px; overflow: auto; } .cpb-mmain { border: 1px solid #ECEEF3; border-radius: 12px; padding: 14px 16px 6px; } .cpb-mmain h4 { font-size: 14px; font-weight: 600; margin: 0 0 10px; } .cpb-msub { font-size: 12.5px; color: #5C6486; margin: -6px 0 10px; } .cpb-mhr { height: 1px; background: #ECEEF3; margin: 14px 0; }
.cpb-row2.tight { gap: 14px; margin-bottom: 12px; } .cpb-row4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 10px; } .cpb-row2.opts { gap: 16px; margin-bottom: 6px; } .cpb-row2.opts .cpb-row2.tight { margin-bottom: 8px; }
.cpb-ta { position: relative; } .cpb-ta textarea { width: 100%; display: block; border: 1px solid #E3E6ED; border-radius: 8px; padding: 10px 12px 20px; font: inherit; font-size: 13px; line-height: 18px; resize: vertical; min-height: 60px; } .cpb-ta small { position: absolute; right: 12px; bottom: 8px; font-size: 11px; color: #8B8FA6; }
.cpb-in.money span { color: #4A5070; font-size: 13px; } .cpb-in.money input { padding-left: 4px; }
.cpb-evlist { display: grid; gap: 8px; } .cpb-evlist label { display: flex; align-items: center; gap: 12px; cursor: pointer; } .cpb-evbox { display: inline-grid; place-items: center; height: 28px; min-width: 96px; padding: 0 14px; border-radius: 6px; background: #F1F2F5; font-size: 12.5px; } .cpb-evlist small { color: #5C6486; font-size: 12.5px; }
.cpb-cb.top { align-items: flex-start; margin-bottom: 12px; } .cpb-cb.top input { margin-top: 2px; } .cpb-cb span b { display: block; font-size: 13px; font-weight: 500; } .cpb-cb span small { display: block; font-size: 11.5px; color: #5C6486; margin-top: 2px; } .cpb-cb.sm { font-size: 12.5px; gap: 8px; margin: 10px 0 12px; } .cpb-cb.sm input { width: 15px; height: 15px; }
.cpb-tglrow { display: flex; align-items: center; gap: 12px; cursor: pointer; margin-top: 4px; } .cpb-tglrow span b { display: block; font-size: 13px; font-weight: 500; } .cpb-tglrow span small { display: block; font-size: 11.5px; color: #5C6486; } .cpb-tglrow.line { justify-content: space-between; margin: 0; padding: 6px 0; font-size: 13px; } .cpb-tglrow.line > span { display: inline-flex; align-items: center; gap: 6px; }
.cpb-mside { display: grid; gap: 14px; align-content: start; } .cpb-mside .cpb-card { padding: 14px 16px; } .cpb-mside .h { display: flex; align-items: center; margin-bottom: 10px; } .cpb-mside .h b { flex: 1; font-size: 14px; font-weight: 600; } .cpb-mside .h .link { font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; }
.cpb-pv { display: flex; gap: 12px; align-items: flex-start; } .cpb-pv > div { flex: 1; min-width: 0; } .cpb-pv b { display: block; font-size: 13.5px; font-weight: 600; } .cpb-pv p { font-size: 12px; color: #5C6486; margin: 3px 0 8px; line-height: 16px; } .cpb-pv .cpb-tags small { font-size: 11.5px; color: #5C6486; margin-right: 2px; } .cpb-pv .pr { font-size: 15px; }
.cpb-kv > div { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; padding: 3px 0; } .cpb-kv span { color: #4A5070; } .cpb-kv b { font-weight: 500; } .cpb-kv.top { border-top: 1px solid #ECEEF3; margin-top: 8px; padding-top: 8px; } .cpb-kv .sum { border-top: 1px solid #ECEEF3; margin-top: 4px; padding-top: 8px; } .cpb-kv .sum span, .cpb-kv .sum b { font-weight: 600; color: #07090F; } .cpb-kv .sum.big { border-bottom: 1px solid #ECEEF3; padding-bottom: 8px; margin-bottom: 4px; } .cpb-kv .sum.big b { font-size: 17px; } .cpb-kv b.green, b.green { color: #1E8E3E; }
.cpb-mfoot { display: flex; align-items: center; gap: 12px; padding: 14px 24px 18px; border-top: 1px solid #ECEEF3; } .cpb-mfoot .sp { flex: 1; } .cpb-mfoot .cpb-next { min-width: 150px; } .cpb-mfoot.tight { padding: 12px 0 0; border: 0; margin-top: 6px; } .cpb-next.sm { height: 36px; font-size: 13.5px; min-width: 0; padding: 0 18px; }
/* team */
.cpb-tiles4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; } .cpb-t4 { display: flex; gap: 12px; align-items: center; border: 1px solid #E3E6ED; border-radius: 10px; padding: 14px 14px; } .cpb-t4 b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 24px; } .cpb-t4 small { display: block; font-size: 12px; color: #5C6486; } .cpb-t4 em { display: block; font-style: normal; font-size: 11px; color: #8B8FA6; } .cpb-cic.ring { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #E3E6ED; flex: none; }
.cpb-evcard { border: 1px solid #ECEEF3; border-radius: 12px; padding: 12px 14px 10px; margin-top: 12px; } .cpb-evh { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .cpb-evh > div { flex: 1; } .cpb-evh b { display: block; font-size: 15px; font-weight: 600; } .cpb-evh small { display: block; font-size: 12px; color: #5C6486; margin-top: 1px; }
.cpb-table.team { table-layout: fixed; } .cpb-table.team th, .cpb-table.team td { font-size: 12px; padding-left: 5px; padding-right: 5px; overflow: hidden; white-space: nowrap; } .cpb-table.team th:first-child { width: 150px; } .cpb-table.team th:nth-child(2) { width: 140px; } .cpb-table.team th:nth-child(3) { width: 56px; } .cpb-table.team th:nth-child(4) { width: 58px; } .cpb-table.team th:nth-child(5) { width: 62px; } .cpb-table.team th:last-child { width: 30px; } .cpb-table.team .cpb-isel.plain select { max-width: 110px; text-overflow: ellipsis; } .cpb-table.team .cpb-cost { width: 100%; } .cpb-table.team .cpb-hrs { width: 100%; max-width: 46px; } .cpb-table.team td { height: 34px; padding-top: 2px; padding-bottom: 2px; } .cpb-table.team .cpb-av { width: 26px; height: 26px; font-size: 10px; } .cpb-table.team .cpb-isel { height: 26px; font-size: 12px; padding: 0 22px 0 8px; } .cpb-table.team .cpb-isel select { font-size: 12px; } .cpb-isel.plain { border: 0; padding: 0 18px 0 0; height: auto; background: none; } .cpb-isel.plain select { font-weight: 500; } .cpb-hrs { width: 44px; border: 1px solid #E3E6ED; border-radius: 6px; height: 26px; padding: 0 8px; font: inherit; font-size: 12px; } .cpb-resp { border: 0; background: none; font: inherit; font-size: 12px; color: #4A5070; width: 100%; outline: none; }
.cpb-addrow { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; font: inherit; font-size: 12.5px; color: #07090F; cursor: pointer; padding: 6px 4px; } .cpb-addrow.box { width: 100%; justify-content: center; border: 1px solid #E3E6ED; border-radius: 8px; height: 32px; margin-top: 6px; }
.cpb-table.tov { table-layout: fixed; } .cpb-table.tov th, .cpb-table.tov td { white-space: nowrap; overflow: hidden; font-size: 12px; } .cpb-table.tov td { height: 40px; } .cpb-table.tov th:first-child { width: 132px; } .cpb-table.tov th:last-child { width: 30px; } .cpb-table.tov .cpb-av { width: 26px; height: 26px; font-size: 10px; }
/* deliverables */
.cpb-leadbox { display: flex; justify-content: space-between; align-items: center; gap: 16px; border: 1px solid #E3E6ED; border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; } .cpb-leadbox b { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; } .cpb-leadbox > div { flex: 1; } .cpb-leadbox small { display: block; font-size: 12px; color: #5C6486; margin-top: 2px; } .cpb-who { display: inline-flex; align-items: center; gap: 8px; } .cpb-who.big { border: 1px solid #E3E6ED; border-radius: 8px; padding: 4px 12px 4px 6px; min-width: 250px; } .cpb-who.big .cpb-isel { flex: 1; } .cpb-who .cpb-isel.plain { display: grid; } .cpb-who .cpb-av { width: 28px; height: 28px; font-size: 10.5px; } .cpb-av.un { background: #F1F2F5; color: #8B8FA6; } .cpb-who .cpb-isel small { display: block; font-size: 11px; color: #5C6486; margin-top: -2px; } .cpb-isel.stack { display: inline-grid; } .cpb-isel.stack small { font-size: 11px; color: #5C6486; }
.cpb-table.dl { table-layout: fixed; } .cpb-table.dl th, .cpb-table.dl td { font-size: 12px; padding-left: 5px; padding-right: 5px; overflow: hidden; } .cpb-table.dl th:nth-child(3) { width: 178px; } .cpb-table.dl th:nth-child(4) { width: 78px; } .cpb-table.dl th:nth-child(5) { width: 142px; } .cpb-table.dl th:nth-child(6) { width: 76px; } .cpb-table.dl th:nth-child(7) { width: 96px; } .cpb-table.dl th:last-child { width: 32px; } .cpb-table.dl.video th:nth-child(3) { width: 150px; } .cpb-table.dl.video th:nth-child(4) { width: 92px; } .cpb-table.dl.video th:nth-child(5) { width: 124px; } .cpb-table.dl.video th:nth-child(6) { width: 70px; } .cpb-table.dl.video th:nth-child(7) { width: 84px; } .cpb-table.dl.video th:nth-child(8) { width: 56px; } .cpb-table.dl .cpb-who { max-width: 100%; } .cpb-table.dl .cpb-who .cpb-isel { min-width: 0; } .cpb-table.dl .cpb-who .cpb-isel select { max-width: 76px; text-overflow: ellipsis; } .cpb-table.dl .cpb-turn { width: 100%; max-width: 70px; } .cpb-table.dl .cpb-cost { width: 100%; } .cpb-table.dl td { height: 46px; padding-top: 4px; padding-bottom: 4px; } .cpb-table.dl td b { display: block; font-weight: 600; font-size: 12.5px; } .cpb-table.dl td small { display: block; font-size: 11px; color: #5C6486; line-height: 14px; max-width: 200px; } .cpb-table.dl th:first-child, .cpb-table.dl td:first-child { width: 22px; padding-left: 6px; } .cpb-table.dl th:nth-child(2), .cpb-table.dl td:nth-child(2) { width: 24px; } .cpb-turn { width: 64px; border: 1px solid #E3E6ED; border-radius: 6px; height: 26px; padding: 0 8px; font: inherit; font-size: 12px; } .cpb-table.dl .cpb-isel { height: 26px; font-size: 12px; padding: 0 22px 0 8px; } .cpb-table.dl .cpb-isel select { font-size: 12px; } .cpb-table.dl .cpb-who { border: 1px solid #E3E6ED; border-radius: 8px; padding: 2px 8px 2px 4px; }
.cpb-chev { border: 0; background: none; cursor: pointer; display: inline-grid; place-items: center; color: #07090F; transition: .15s; } .cpb-chev.on { transform: rotate(180deg); } tr.cpb-sub td { background: #FAFAFB; padding: 8px 14px 12px; height: auto; } .cpb-struct { display: flex; align-items: center; gap: 22px; font-size: 12px; margin-bottom: 8px; } .cpb-struct .lbl { color: #5C6486; } .cpb-struct label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; } .cpb-struct label input { display: none; } .cpb-struct small { color: #5C6486; } .cpb-struct .cpb-chip { margin-left: auto; }
.cpb-table.films th, .cpb-table.films td { font-size: 12px; } .cpb-table.films td { height: 30px; padding-top: 1px; padding-bottom: 1px; } .cpb-table.films th { background: #F0F1F4; }
.cpb-addbig { display: block; width: 100%; border: 0; background: #F4F5F7; border-radius: 10px; padding: 12px; margin-top: 12px; text-align: center; cursor: pointer; font: inherit; } .cpb-addbig b { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; } .cpb-addbig svg { vertical-align: middle; } .cpb-addbig small { display: block; font-size: 11.5px; color: #5C6486; margin-top: 2px; }
.cpb-note.row { align-items: center; } .cpb-note.row > div { flex: 1; } .cpb-note.q { background: #F4F5F7; }
.cpb-thumb { display: inline-block; width: 46px; height: 32px; border-radius: 4px; background: #E9EAEE; flex: none; } .cpb-thumb.album { background: linear-gradient(135deg, #E9EAEE, #D6D8DE); } .cpb-thumb.print { background: linear-gradient(135deg, #F4F5F7, #E1E3EA); border: 1px solid #D6D8DE; }
.cpb-table.al { table-layout: fixed; } .cpb-table.al th, .cpb-table.al td { font-size: 12px; padding-left: 5px; padding-right: 5px; overflow: hidden; } .cpb-table.al th:first-child { width: 22px; } .cpb-table.al th:nth-child(2) { width: 160px; } .cpb-table.al th:nth-child(3) { width: 112px; } .cpb-table.al th:nth-child(4) { width: 70px; } .cpb-table.al th:nth-child(5) { width: 122px; } .cpb-table.al th:nth-child(6) { width: 70px; } .cpb-table.al th:nth-child(7) { width: 90px; } .cpb-table.al th:nth-child(8) { width: 58px; } .cpb-table.al th:last-child { width: 30px; } .cpb-table.al .cpb-who .cpb-isel select { max-width: 70px; text-overflow: ellipsis; } .cpb-table.al .cpb-turn { width: 100%; max-width: 66px; } .cpb-table.al .cpb-cost { width: 100%; } .cpb-table.al td b { white-space: normal; line-height: 14px; } .cpb-table.al td { height: 44px; padding-top: 3px; padding-bottom: 3px; } .cpb-table.al td b { font-weight: 600; font-size: 12.5px; } .cpb-table.al td.mut { font-size: 11.5px; line-height: 15px; } .cpb-table.al .cpb-isel { height: 26px; font-size: 12px; padding: 0 22px 0 8px; } .cpb-table.al .cpb-who { border: 1px solid #E3E6ED; border-radius: 8px; padding: 2px 8px 2px 4px; }
.cpb-sech.gap { margin-top: 18px; } .cpb-flow { display: flex; align-items: center; gap: 10px; } .cpb-flow > div { display: flex; align-items: center; gap: 8px; flex: 1; } .cpb-flow b { display: block; font-size: 12px; font-weight: 600; } .cpb-flow small { display: block; font-size: 11px; color: #5C6486; } .cpb-flow i { color: #8B8FA6; font-style: normal; }
/* investment */
.cpb-cur { display: inline-flex; align-items: center; gap: 6px; height: 34px; border: 1px solid #E3E6ED; border-radius: 8px; padding: 0 12px; font-size: 13px; position: relative; } .cpb-cur select { -webkit-appearance: none; appearance: none; border: 0; background: none; font: inherit; font-weight: 600; padding-right: 16px; outline: none; cursor: pointer; } .cpb-cur > svg { position: absolute; right: 10px; pointer-events: none; }
.cpb-box { border: 1px solid #ECEEF3; border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; } .cpb-box.last { margin-bottom: 0; } .cpb-h3 { font-size: 15px; font-weight: 600; margin: 0 0 8px; } .cpb-sub3 { font-size: 12.5px; color: #5C6486; margin: -4px 0 10px; } .h4, .cpb-sech h3.h4 { font-size: 15px; }
.cpb-table.inv { table-layout: fixed; } .cpb-table.inv th, .cpb-table.inv td { font-size: 12px; padding-left: 6px; padding-right: 6px; overflow: hidden; } .cpb-table.inv th:first-child { width: 22px; } .cpb-table.inv th:nth-child(2) { width: 132px; } .cpb-table.inv th:nth-child(4) { width: 52px; } .cpb-table.inv th:nth-child(5) { width: 70px; } .cpb-table.inv th:nth-child(6) { width: 34px; } .cpb-table.inv th:nth-child(7) { width: 78px; } .cpb-table.inv th:last-child { width: 30px; } .cpb-table.inv td:nth-child(2) { line-height: 15px; } .cpb-table.inv td { height: 36px; padding-top: 3px; padding-bottom: 3px; } .cpb-table.inv td b { font-weight: 600; } .cpb-tfoot.inv { padding-top: 10px; } .cpb-tfoot.inv .cpb-btn { width: auto; } .cpb-tfoot.inv .link { white-space: nowrap; } .link.blue { color: #2F55C7; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; cursor: pointer; font-family: inherit; }
.cpb-disc { display: flex; align-items: center; gap: 12px; border: 1px solid #F1E3C4; background: #FDFAF3; border-radius: 10px; padding: 10px 14px; font-size: 13px; } .cpb-disc > div { flex: 1; } .cpb-disc b { font-weight: 500; font-size: 13px; margin-right: 8px; } .cpb-disc small { display: block; font-size: 11.5px; color: #5C6486; margin-top: 2px; } .cpb-disc .mut { color: #5C6486; font-size: 12.5px; } .cpb-disc > b { font-weight: 600; } .cpb-ib { width: 28px; height: 28px; border: 0; background: none; border-radius: 6px; cursor: pointer; display: inline-grid; place-items: center; color: #4A5070; font-size: 16px; } .cpb-ib:hover { background: #F0F1F5; } .cpb-ib.red { color: #C63D3D; } .cpb-discadd { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: #4A5070; border: 1px dashed #E3C98A; background: #FDFAF3; border-radius: 8px; padding: 8px 14px; cursor: pointer; }
.cpb-totals > div { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding: 6px 4px; border-bottom: 1px solid #F0F1F5; } .cpb-totals span { display: inline-flex; align-items: center; gap: 6px; color: #1B2140; } .cpb-totals b { font-weight: 600; } .cpb-totals .grand { background: #F5EFE3; border-radius: 8px; padding: 10px 12px; margin-top: 6px; border: 0; } .cpb-totals .grand span { font-size: 16px; font-weight: 600; color: #6B5B3E; } .cpb-totals .grand b { font-size: 18px; } .cpb-taxnote { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #5C6486; margin-top: 8px; padding: 0 4px; } .cpb-taxnote span { flex: 1; } .cpb-taxnote .link.blue { font-size: 12px; }
.cpb-table.pay th, .cpb-table.pay td { font-size: 12.5px; } .cpb-table.pay td { height: 32px; padding-top: 2px; padding-bottom: 2px; } .cpb-cell { border: 0; background: none; font: inherit; font-size: 12.5px; color: #07090F; width: 100%; outline: none; } .cpb-cell.sm { width: 50px; } .cpb-cell.mut { color: #5C6486; } .cpb-cell:focus { border-bottom: 1px solid #0B0B0F; }
.cpb-rail .h.top { margin-top: 12px; padding-top: 12px; border-top: 1px solid #ECEEF3; } .cpb-lock { display: flex; gap: 8px; align-items: flex-start; background: #F4F5F7; border-radius: 8px; padding: 10px 12px; font-size: 11.5px; color: #4A5070; margin-top: 12px; } .cpb-lock svg { flex: none; margin-top: 1px; }
.cpb-tiles4.inv .cpb-t4 { padding: 12px 14px; } .cpb-tiles4.inv b { font-size: 18px; } .cpb-types.three { grid-template-columns: repeat(3, 1fr); margin-bottom: 16px; } .cpb-types.three .cpb-type { padding: 12px 14px; } .cpb-types.three .cpb-type p { font-size: 12px; }
.cpb-row2.inv { gap: 24px; margin-bottom: 16px; } .cpb-in.sel.pkg { justify-content: space-between; } .cpb-in.sel.pkg select { flex: 1; } .cpb-in.sel.pkg > b { margin-right: 28px; font-size: 13.5px; } .cpb-hint { font-size: 11.5px; color: #5C6486; margin: 8px 0 4px; } .cpb-row2.inv .link { font-size: 12.5px; color: #07090F; border: 0; background: none; cursor: pointer; font-family: inherit; text-decoration: none; padding: 0; }
.cpb-list > div { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 6px 6px; border-bottom: 1px solid #F0F1F5; } .cpb-list .nm { flex: 1; } .cpb-list b { font-weight: 500; } .cpb-list .cpb-cost.r { width: 70px; } .cpb-list .cpb-ib { width: 22px; height: 22px; color: #8B8FA6; } .cpb-list.pay .nm { display: grid; } .cpb-list.pay .nm small { display: block; } .cpb-list.pay .cpb-cell { font-size: 12.5px; }
.cpb-paylist > div { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 6px 0; } .cpb-paylist > div > div { flex: 1; } .cpb-paylist b { font-weight: 500; font-size: 13px; } .cpb-paylist small { display: block; font-size: 12px; color: #5C6486; } .cpb-paylist > div > b { font-weight: 600; }
.cpb-dpop { position: absolute; z-index: 1200; width: 292px; background: #fff; border: 1px solid #E3E6ED; border-radius: 14px; box-shadow: 0 24px 60px -20px rgba(11, 15, 30, .35); padding: 14px 16px 16px; } .cpb-dpop .h { display: flex; align-items: center; margin-bottom: 10px; } .cpb-dpop .h b { flex: 1; font-size: 17px; font-weight: 700; } .cpb-seg { display: flex; background: #F1F2F5; border-radius: 8px; padding: 3px; margin-bottom: 10px; } .cpb-seg button { flex: 1; height: 28px; border: 0; background: none; border-radius: 6px; font: inherit; font-size: 12.5px; cursor: pointer; color: #4A5070; } .cpb-seg button.on { background: #fff; color: #07090F; font-weight: 500; box-shadow: 0 1px 2px rgba(11, 15, 30, .08); } .cpb-dpop .cpb-f { margin-bottom: 10px; } .cpb-dpop .cpb-f label { font-size: 12.5px; margin-bottom: 6px; } .cpb-dpop .cpb-in { height: 36px; }
/* questionnaires */
.cpb-qrow { display: flex; align-items: center; gap: 14px; border: 1px solid #E3E6ED; border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; } .cpb-qrow > div { flex: 1; } .cpb-qrow b { display: block; font-size: 14px; font-weight: 600; } .cpb-qrow small { display: block; font-size: 12.5px; color: #5C6486; margin-top: 2px; } .cpb-qrow .cpb-chip { height: 28px; padding: 0 14px; border-radius: 999px; }
.cpb-stepfoot { display: flex; justify-content: space-between; margin-top: 190px; padding-top: 16px; border-top: 1px solid #ECEEF3; } .cpb-card.progcard b { display: block; font-size: 15px; font-weight: 600; } .cpb-card.progcard small { display: block; font-size: 13px; color: #5C6486; margin: 2px 0 8px; } .cpb-card.progcard .bar { display: flex; align-items: center; gap: 10px; height: 6px; background: #E9EAEE; border-radius: 3px; position: relative; margin-bottom: 4px; } .cpb-card.progcard .bar i { display: block; height: 6px; border-radius: 3px; background: #0B0B0F; } .cpb-card.progcard .bar span { position: absolute; right: -40px; top: -6px; font-size: 13px; font-weight: 600; } .cpb-card.progcard .bar { width: calc(100% - 44px); } .cpb-card.tip .h { margin-bottom: 6px; } .cpb-card.tip p { font-size: 12.5px; color: #5C6486; line-height: 17px; margin: 0; }
.cpb-picks { display: flex; flex-wrap: wrap; gap: 8px; }
/* contract */
.cpb-box.ct { padding: 12px 16px 14px; } .cpb-ct3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 12px; } .cpb-ct3 > div > b, .cpb-ct2 > div > b { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; } .cpb-ct3 .row, .cpb-ct2 .row { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; padding: 4px 0; } .cpb-ct3 .row svg, .cpb-ct2 .row svg { flex: none; color: #4A5070; margin-top: 1px; } .cpb-ct3 .row small, .cpb-ct2 .row small { display: block; font-size: 11.5px; color: #5C6486; } .cpb-ct2 { display: grid; grid-template-columns: 1fr 1.3fr; gap: 16px; border-top: 1px solid #ECEEF3; padding-top: 12px; } .cpb-ct2 big { font-size: 14px; font-weight: 600; } .cpb-ct2 .sched > div { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; font-size: 12px; padding: 2px 0; } .cpb-ct2 .sched b { font-weight: 500; } .cpb-ct2 .sched small { color: #5C6486; text-align: right; }
.cpb-doc { border: 1px solid #ECEEF3; border-radius: 12px; overflow: hidden; } .cpb-dtool { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #F4F5F7; font-size: 12.5px; } .cpb-dtool .sp { flex: 1; } .cpb-dtool .z { min-width: 40px; text-align: center; } .cpb-dtool .pgn { white-space: nowrap; } .cpb-dtool .pgn b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border: 1px solid #E3E6ED; border-radius: 4px; background: #fff; font-weight: 500; margin-right: 4px; } .cpb-dtool .cpb-isel { background: #fff; height: 28px; font-size: 12px; } .cpb-dtool.bottom { border-top: 1px solid #ECEEF3; margin-top: 12px; border-radius: 8px; }
.cpb-dbody { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; padding: 12px; background: #F9F9FA; max-height: 300px; overflow: auto; } .cpb-thumbs { display: grid; gap: 10px; align-content: start; } .cpb-th { border: 1px solid #E3E6ED; background: #fff; border-radius: 6px; padding: 8px 8px 4px; cursor: pointer; display: grid; justify-items: center; gap: 4px; } .cpb-th.on { border: 2px solid #0B0B0F; } .cpb-th .pg { display: grid; gap: 3px; width: 44px; } .cpb-th .pg i { display: block; height: 3px; background: #D6D8DE; border-radius: 2px; } .cpb-th .pg i:first-child { width: 60%; background: #07090F; height: 5px; } .cpb-th small { font-size: 11px; }
.cpb-page { background: #fff; border: 1px solid #E3E6ED; padding: 20px 26px; font-size: 12px; line-height: 17px; color: #1B2140; font-family: Georgia, "Times New Roman", serif; } .cpb-pgh { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; } .cpb-pgh .logo { font-family: var(--serif, Georgia); font-size: 22px; font-weight: 400; letter-spacing: -.02em; display: block; line-height: 1; } .cpb-pgh small { font-family: Inter, sans-serif; font-size: 9px; letter-spacing: .06em; color: #5C6486; text-transform: uppercase; } .cpb-pgh .tag { text-align: right; font-weight: 600; color: #07090F; } .cpb-page h1 { font-size: 20px; margin: 0 0 8px; font-weight: 700; } .cpb-page h2 { font-size: 14px; margin: 14px 0 6px; } .cpb-page p { margin: 0 0 8px; } .cpb-ctable { width: 100%; border-collapse: collapse; font-family: Inter, sans-serif; font-size: 11.5px; } .cpb-ctable td { border: 1px solid #E3E6ED; padding: 5px 8px; } .cpb-ctable td:first-child { width: 42%; color: #4A5070; } .cpb-ctable small { color: #8B8FA6; }
.cpb-tpl { display: flex; gap: 12px; align-items: center; margin: 6px 0 12px; } .cpb-tpl b { display: block; font-size: 13px; font-weight: 600; line-height: 17px; } .cpb-tpl small { display: block; font-size: 11.5px; color: #5C6486; margin-top: 2px; }
/* review */
.cpb-preview { position: relative; background: #F4F5F7; border-radius: 12px; padding: 14px; } .cpb-cover h1 { font-size: 40px; } .cpb-cover .img { filter: grayscale(1) contrast(.92) brightness(1.05); } .cpb-cover { display: grid; grid-template-columns: 1fr 1fr; background: #fff; min-height: 340px; } .cpb-cover .txt { padding: 20px 26px 22px; display: flex; flex-direction: column; } .cpb-cover h1 { font-family: var(--serif, Georgia); font-size: 46px; font-weight: 400; letter-spacing: -.02em; line-height: 1.05; margin: 24px 0 4px; } .cpb-cover h3 { font-family: var(--serif, Georgia); font-size: 24px; font-weight: 400; margin: 0 0 24px; } .cpb-cover .meta { font-size: 9.5px; letter-spacing: .14em; color: #4A5070; line-height: 16px; } .cpb-cover em { font-family: var(--serif, Georgia); font-size: 16px; margin-top: auto; padding-top: 30px; } .cpb-cover .img { background-size: cover; background-position: center; filter: grayscale(1) contrast(.9); }
.cpb-pnext { position: absolute; right: 22px; top: 50%; width: 32px; height: 32px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 4px 12px rgba(11, 15, 30, .2); cursor: pointer; display: grid; place-items: center; }
.cpb-pv2 { background: #fff; padding: 22px 26px; min-height: 340px; font-size: 12.5px; line-height: 18px; } .cpb-pv2 h2 { font-family: var(--serif, Georgia); font-size: 26px; font-weight: 400; margin: 10px 0 12px; } .cpb-pv2 h2 small { display: block; font-size: 14px; color: #5C6486; } .cpb-pvimg { height: 120px; background-size: cover; background-position: center; margin-bottom: 12px; filter: grayscale(1); } .cpb-pv2 ul, .cpb-pv2 ol { margin: 0; padding-left: 18px; } .cpb-pv2 li { margin: 3px 0; }
.cpb-thumbrow { display: flex; gap: 8px; margin-top: 12px; padding-bottom: 12px; } .cpb-th2 { width: 66px; border: 1px solid #E3E6ED; border-radius: 6px; background: #fff; padding: 6px 6px 3px; cursor: pointer; display: grid; justify-items: center; gap: 3px; } .cpb-th2.on { border: 2px solid #0B0B0F; } .cpb-th2 .pg { width: 100%; height: 56px; border-radius: 3px; background: #F4F5F7; display: flex; flex-direction: column; gap: 3px; padding: 4px; overflow: hidden; } .cpb-th2 .pg b { font-size: 6px; font-family: var(--serif, Georgia); font-weight: 400; white-space: nowrap; overflow: hidden; } .cpb-th2 .pg small { font-size: 5px; white-space: nowrap; overflow: hidden; } .cpb-th2 .pg i { display: block; height: 3px; background: #D6D8DE; border-radius: 2px; } .cpb-th2 .pg.photo i { height: 22px; background: #C9CDD9; } .cpb-th2 > small { font-size: 11px; } .cpb-th2.more { align-content: center; height: 78px; }
.cpb-card.mail .cpb-mrow { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; font-size: 12px; } .cpb-card.mail .cpb-mrow > small { color: #5C6486; width: 22px; padding-top: 4px; } .cpb-chips { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; } .cpb-chips .cpb-chip { gap: 6px; display: inline-flex; font-size: 11.5px; } .cpb-chips .cpb-chip button { border: 0; background: none; cursor: pointer; padding: 0; font-size: 13px; line-height: 1; } .cpb-chips input { border: 0; background: none; font: inherit; font-size: 11.5px; outline: none; width: 70px; } .cpb-card.mail .cc button { border: 0; background: none; font: inherit; font-size: 12px; color: #5C6486; cursor: pointer; padding: 4px 2px; }
.cpb-mf { display: block; margin-bottom: 8px; } .cpb-mf small { display: block; font-size: 11.5px; color: #5C6486; margin-bottom: 4px; } .cpb-mf input, .cpb-mf textarea { width: 100%; border: 1px solid #E3E6ED; border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 12.5px; background: #FAFAFB; } .cpb-mf textarea { resize: vertical; line-height: 17px; }
.cpb-opt { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; border: 0; background: none; padding: 8px 0; cursor: pointer; font: inherit; } .cpb-opt svg { flex: none; margin-top: 2px; } .cpb-opt b { display: block; font-size: 13px; font-weight: 600; } .cpb-opt small { display: block; font-size: 11.5px; color: #5C6486; }
.cpb-internal .cpb-tiles4 { margin-bottom: 14px; } .cpb-ct3.rv { margin-top: 14px; } .cpb-ct3.rv .row span { line-height: 16px; }
@media (max-width: 1100px) { .cpb-sugg, .cpb-tiles4 { grid-template-columns: repeat(2, 1fr); } .cpb-mbody { grid-template-columns: 1fr; } .cpb-row4 { grid-template-columns: 1fr 1fr; } .cpb-ct3, .cpb-ct2, .cpb-row2.inv { grid-template-columns: 1fr; } .cpb-cover { grid-template-columns: 1fr; } .cpb-cover .img { min-height: 160px; } }
/* --- the proposal's template: rail card, Choose Template modal, thumbnails --- */
.cpb-tth { position: relative; height: 150px; flex: none; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #1B1B1F, #3A3A42); } .cpb-tth img { width: 100%; height: 100%; object-fit: cover; display: block; } .cpb-tth .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 12, .15), rgba(10, 10, 12, .65)); } .cpb-tth .txt { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: #fff; padding: 10px; } .cpb-tth .txt span { font-size: 8px; letter-spacing: .22em; text-transform: uppercase; opacity: .8; } .cpb-tth .txt b { font-family: var(--serif, Georgia); font-weight: 400; font-size: 16px; font-style: italic; margin-top: 4px; } .cpb-tth .txt i { font-family: var(--serif, Georgia); font-style: normal; font-size: 13px; margin-top: 2px; } .cpb-tth.big { height: 170px; } .cpb-tth.big .txt span { font-size: 9px; } .cpb-tth.big .txt b { font-size: 20px; } .cpb-tth.big .txt i { font-size: 15px; } .cpb-tth:not(.dark):not(:has(img)) { background: linear-gradient(135deg, #F4F1EA, #DDD6C7); } .cpb-tth:not(.dark):not(:has(img)) .txt { color: #1B1B1F; } .cpb-tth:not(.dark):not(:has(img)) .veil { display: none; }
.cpb-tplcard .h .link { margin-left: auto; font-size: 12.5px; color: #07090F; text-decoration: underline; text-underline-offset: 3px; border: 0; background: none; cursor: pointer; font-family: inherit; padding: 0; } .cpb-tplcard .h b { flex: none; } .cpb-tplcard .nm { display: flex; align-items: center; gap: 8px; margin-top: 10px; } .cpb-tplcard .nm b { font-size: 13.5px; font-weight: 600; } .cpb-tplcard > small { display: block; font-size: 12px; color: #5C6486; margin-top: 2px; } .cpb-tplcard .row { display: flex; gap: 8px; margin-top: 10px; } .cpb-tplcard .row .cpb-btn { flex: 1; justify-content: center; padding: 0 8px; }
.cpb-modal.tpl { width: min(1080px, calc(100vw - 40px)); } .cpb-mbody.one { display: block; }
.cpb-tplgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .cpb-tpl { position: relative; border: 1px solid #E3E6ED; border-radius: 12px; background: #fff; padding: 10px; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 10px; color: inherit; text-decoration: none; } .cpb-tpl.on { border-color: #0B0B0F; box-shadow: inset 0 0 0 1px #0B0B0F; } .cpb-tpl > .cpb-radio { position: absolute; top: 18px; left: 18px; z-index: 2; background: #fff; } .cpb-tpl .b { padding: 0 4px 2px; } .cpb-tpl .nm { display: flex; align-items: center; gap: 8px; } .cpb-tpl .nm b { font-size: 14px; font-weight: 600; } .cpb-tpl .b > small { display: block; font-size: 12px; color: #5C6486; margin-top: 2px; } .cpb-tpl .row { display: flex; gap: 6px; margin-top: 10px; align-items: center; } .cpb-tpl .row .cpb-btn { padding: 0 10px; text-decoration: none; } .cpb-tpl .row .cpb-more { margin-left: auto; }
.cpb-tpl.new { align-items: center; justify-content: center; text-align: center; border-style: dashed; background: #FAFAFB; min-height: 240px; gap: 8px; } .cpb-tpl.new b { font-size: 14px; font-weight: 600; } .cpb-tpl.new small { font-size: 12px; color: #5C6486; max-width: 220px; line-height: 16px; }
.cpb-mfoot .link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #07090F; text-decoration: none; }
/* the preview popup */
.pv-scrim { align-items: center; justify-content: center; padding: 18px; } .pv { width: min(1360px, calc(100vw - 36px)); height: calc(100vh - 36px); background: #F4F5F7; border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 40px 120px -40px rgba(11, 15, 30, .55); }
.pv-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 12px 16px 12px 18px; background: #fff; border-bottom: 1px solid #ECEEF3; flex: none; } .pv-t { display: flex; align-items: center; gap: 12px; min-width: 0; } .pv-ic { width: 36px; height: 36px; border-radius: 10px; background: #0B0B0F; color: #fff; display: grid; place-items: center; flex: none; } .pv-t b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pv-t small { display: block; font-size: 12px; color: #5C6486; }
.pv-seg { display: inline-flex; background: #F1F2F5; border-radius: 8px; padding: 3px; } .pv-seg button { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 14px; border: 0; background: none; border-radius: 6px; font: inherit; font-size: 13px; color: #4A5070; cursor: pointer; } .pv-seg button.on { background: #fff; color: #07090F; font-weight: 500; box-shadow: 0 1px 2px rgba(11, 15, 30, .08); }
.pv-acts { display: flex; align-items: center; gap: 8px; justify-content: flex-end; } .pv-btn { height: 36px; padding: 0 14px; font-size: 13px; gap: 8px; border-radius: 8px; text-decoration: none; } .pv-x { width: 36px; height: 36px; border: 0; background: none; border-radius: 8px; cursor: pointer; display: grid; place-items: center; color: #07090F; margin-left: 4px; } .pv-x:hover { background: #F1F1F4; }
.pv-body { flex: 1; min-height: 0; display: grid; place-items: center; padding: 18px; overflow: hidden; } .pv-frame { position: relative; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px -24px rgba(11, 15, 30, .45), 0 0 0 1px #E3E6ED; display: flex; flex-direction: column; transition: width .2s; width: 100%; height: 100%; } .pv-frame.phone { width: 400px; border-radius: 34px; box-shadow: 0 30px 70px -24px rgba(11, 15, 30, .5), 0 0 0 10px #17171A, 0 0 0 12px #2C2C31; } .pv-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: #F4F5F7; border-bottom: 1px solid #ECEEF3; flex: none; } .pv-bar i { width: 10px; height: 10px; border-radius: 50%; background: #D6D8DE; } .pv-bar i:nth-child(1) { background: #F26D5B; } .pv-bar i:nth-child(2) { background: #F5BF4F; } .pv-bar i:nth-child(3) { background: #62C554; } .pv-bar span { margin-left: 10px; font-size: 12px; color: #5C6486; background: #fff; border-radius: 6px; padding: 3px 10px; flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pv-frame.phone .pv-bar { display: none; } .pv-frame iframe { flex: 1; width: 100%; border: 0; background: #fff; } .pv-load { position: absolute; inset: 34px 0 0; display: grid; place-items: center; background: #fff; color: #5C6486; font-size: 13px; pointer-events: none; }
@media (max-width: 900px) { .pv-head { grid-template-columns: 1fr auto; } .pv-seg { display: none; } .pv { height: calc(100vh - 20px); width: calc(100vw - 20px); } .pv-scrim { padding: 10px; } .pv-body { padding: 8px; } .cpb-tplgrid { grid-template-columns: 1fr; } }
/* the designs page in the new look */
.tpl-grid { gap: 16px; } .tpl-card { border-radius: 12px; border-color: #ECEEF3; box-shadow: none; } .tpl-card:hover { border-color: #C9CDD9; transform: none; box-shadow: 0 10px 30px -18px rgba(11, 15, 30, .25); } .tpl-card.def { border-color: #0B0B0F; } .tpl-actions .btn { border-radius: 8px; } .tpl-lib { gap: 14px; } .tpl-pre { border-radius: 12px; border-color: #ECEEF3; background: #fff; } .tpl-pre-b .quick .btn { border-radius: 8px; } .tpl-pre-b i { color: #5C6486; } .tag.vip { background: #0B0B0F; color: #fff; }
/* --- Deliverables, the newer layout: lead on top, tabs under it, search-to-add, a roomier table --- */
.cpb-leadbox.new { margin: 4px 0 14px; padding: 12px 14px 12px 16px; } .cpb-leadbox.new b { font-size: 13.5px; } .cpb-leadbox.new small { font-size: 12.5px; } .cpb-who.big.lead { min-width: 372px; padding: 5px 14px 5px 8px; gap: 10px; } .cpb-who.big.lead .cpb-av { width: 30px; height: 30px; } .cpb-who.big.lead .cpb-isel.plain select { font-size: 13.5px; } .cpb-who.big.lead .cpb-isel small { font-size: 12px; } .cpb-who.big.lead > svg:last-child { margin-left: auto; color: #4A5070; }
.cpb-tabs2.four.dl { margin-bottom: 14px; } .cpb-tabs2.four.dl button { height: 32px; font-size: 13.5px; }
.cpb-dlsearch { position: relative; display: flex; justify-content: flex-end; margin-bottom: 12px; } .cpb-dlq { display: flex; align-items: center; gap: 12px; width: 300px; height: 38px; border: 1.5px solid #2B2B30; border-radius: 8px; padding: 0 12px; background: #fff; } .cpb-dlq input { border: 0; background: none; font: inherit; font-size: 13.5px; width: 100%; outline: none; } .cpb-dlq input::placeholder { color: #8B8FA6; } .cpb-dlq svg { color: #07090F; flex: none; }
.cpb-dlmenu { position: absolute; right: 0; top: 46px; width: 380px; background: #fff; border: 1px solid #E3E6ED; border-radius: 12px; box-shadow: 0 20px 50px -20px rgba(11, 15, 30, .3); padding: 6px; z-index: 40; max-height: 360px; overflow: auto; } .cpb-dlmenu button { display: block; width: 100%; text-align: left; border: 0; background: none; border-radius: 8px; padding: 8px 10px; cursor: pointer; font: inherit; } .cpb-dlmenu button:hover { background: #F4F5F7; } .cpb-dlmenu b { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; } .cpb-dlmenu small { display: block; font-size: 11.5px; color: #5C6486; margin-top: 2px; }
.cpb-table.dl2 { table-layout: fixed; } .cpb-table.dl2 th, .cpb-table.dl2 td { font-size: 12.5px; padding-left: 6px; padding-right: 6px; overflow: hidden; } .cpb-table.dl2 th { height: 30px; color: #6B7194; font-weight: 400; } .cpb-table.dl2 th:first-child, .cpb-table.dl2 td:first-child { width: 26px; padding-left: 10px; } .cpb-table.dl2 th:nth-child(2), .cpb-table.dl2 td:nth-child(2) { width: 34px; } .cpb-table.dl2 th:nth-child(4) { width: 86px; } .cpb-table.dl2 th:nth-child(5) { width: 150px; } .cpb-table.dl2 th:nth-child(6) { width: 82px; } .cpb-table.dl2 th:nth-child(7) { width: 104px; } .cpb-table.dl2 th:last-child { width: 34px; }
.cpb-table.dl2 td { height: 70px; padding-top: 8px; padding-bottom: 8px; vertical-align: middle; } .cpb-table.dl2 td b { display: block; font-size: 13px; font-weight: 600; line-height: 16px; white-space: normal; } .cpb-table.dl2 td small { display: block; font-size: 12px; color: #4A5A8A; line-height: 16px; margin-top: 2px; white-space: normal; max-width: 200px; } .cpb-table.dl2 .cpb-who { border: 1px solid #E3E6ED; border-radius: 8px; padding: 3px 8px 3px 5px; height: 36px; width: 140px; } .cpb-table.dl2 .cpb-who .cpb-isel.plain select { font-size: 12.5px; font-weight: 500; } .cpb-table.dl2 .cpb-turn { width: 72px; height: 36px; font-size: 12.5px; padding: 0 8px; } .cpb-table.dl2 .cpb-isel { height: 36px; font-size: 12.5px; padding: 0 24px 0 8px; } .cpb-table.dl2 .cpb-isel select { font-size: 12.5px; } .cpb-table.dl2 .cpb-chip { height: 24px; font-size: 12px; } .cpb-table.dl2 th:nth-child(3) { width: auto; }
.cpb-table.dl2.video th:nth-child(4) { width: 118px; } .cpb-table.dl2.video th:nth-child(5) { width: 150px; } .cpb-table.dl2.video th:nth-child(6) { width: 84px; } .cpb-table.dl2.video th:nth-child(7) { width: 104px; } .cpb-table.dl2.video th:nth-child(8) { width: 64px; } .cpb-table.dl2.video .cpb-who { width: 140px; }
.cpb-empty.pad { padding: 30px 10px; text-align: center; }
/* --- Add another event: a panel over the main column --- */
.cpb-evscrim { position: fixed; inset: 0; background: rgba(120, 122, 128, .55); z-index: 70; } .cpb-evpanel { position: fixed; width: 360px; background: #fff; border-radius: 12px; box-shadow: 0 30px 80px -30px rgba(11, 15, 30, .5), 0 0 0 1px #E3E6ED; z-index: 71; display: flex; flex-direction: column; overflow: hidden; }
.cpb-evh2 { position: relative; padding: 14px 18px 4px; flex: none; } .cpb-evh2 h2 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 5px; } .cpb-evh2 p { font-size: 12px; color: #4A5A8A; margin: 0; line-height: 15px; } .cpb-evh2 .cpb-x { position: absolute; top: 14px; right: 14px; }
.cpb-evbody { flex: 1; min-height: 0; overflow: auto; padding: 4px 18px 8px; } .cpb-evbody .cpb-f { margin-bottom: 8px; } .cpb-evbody .cpb-f label { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-bottom: 4px; } .cpb-evbody .cpb-in { height: 32px; font-size: 12.5px; } .cpb-evbody .cpb-in input, .cpb-evbody .cpb-in select { font-size: 13px; } .cpb-evbody .cpb-row2.tight { gap: 12px; margin-bottom: 0; } .cpb-evbody .cpb-in.pick > svg:last-child { margin-left: auto; color: #4A5070; } .cpb-evbody .cpb-in.pick input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; } .cpb-evbody .cpb-in.pick .v { font-size: 13px; } .cpb-evbody .cpb-in.pick .v.ph { color: #8B8FA6; } .cpb-in.ro { background: #F4F5F7; border-color: #F4F5F7; color: #8B8FA6; font-size: 13px; }
.cpb-covseg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .cpb-covseg button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 32px; font-size: 12px; border: 1px solid #E3E6ED; border-radius: 8px; background: #fff; font: inherit; font-size: 13px; color: #07090F; cursor: pointer; } .cpb-covseg button.on { background: #0B0B0F; border-color: #0B0B0F; color: #fff; } .cpb-hint2 { display: block; font-size: 11.5px; color: #4A5A8A; margin-top: 5px; }
.cpb-in.money.step { padding-right: 6px; } .cpb-in.money.step .st { display: grid; margin-left: auto; } .cpb-in.money.step .st button { border: 0; background: none; cursor: pointer; padding: 0 4px; height: 14px; display: grid; place-items: center; color: #4A5070; } .cpb-in.money.step .st button:first-child svg { transform: rotate(180deg); }
.cpb-evtotal { display: flex; justify-content: space-between; align-items: center; background: #F4F5F7; border-radius: 8px; padding: 0 14px; height: 36px; font-size: 13px; font-weight: 600; margin: 0 0 8px; } .cpb-evtotal b { font-size: 14px; }
.cpb-evmore { border: 1px solid #E3E6ED; border-radius: 10px; } .cpb-evmore .h { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: none; padding: 7px 14px; cursor: pointer; font: inherit; } .cpb-evmore .h > svg { transform: rotate(-90deg); transition: .15s; color: #07090F; } .cpb-evmore.open .h > svg { transform: none; } .cpb-evmore .h b { display: block; font-size: 13px; font-weight: 600; } .cpb-evmore .h b small { font-weight: 400; color: #5C6486; } .cpb-evmore .h > div > small { display: block; font-size: 12px; color: #4A5A8A; margin-top: 2px; } .cpb-evmore .b { padding: 4px 14px 2px; border-top: 1px solid #ECEEF3; }
.cpb-evfoot { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 6px 18px 12px; flex: none; } .cpb-evfoot .cpb-btn { height: 36px; justify-content: center; font-size: 13px; } .cpb-evfoot .cpb-next { height: 36px; min-width: 0; font-size: 13px; }
@media (max-width: 900px) { .cpb-evpanel { left: 10px !important; right: 10px; width: auto; top: 10px !important; height: calc(100vh - 20px) !important; } .cpb-who.big.lead { min-width: 0; width: 100%; } .cpb-leadbox.new { flex-wrap: wrap; } .cpb-dlq { width: 100%; } }
/* ============================================================================
   Add New Lead, measured from the mockups (dialog 1208 × 1157 in a 1312 frame).
   ============================================================================ */
.w2-scrim { align-items: center; justify-content: center; padding: 20px; }
.w2 { width: min(1208px, calc(100vw - 40px)); max-height: min(1157px, calc(100vh - 40px)); background: #fff; border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 40px 120px -40px rgba(11, 15, 30, .5); font-size: 12.5px; color: #07090F; }
.w2-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 22px 25px 20px 26px; border-bottom: 1px solid #EEF0F3; flex: none; }
.w2-head h2 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 30px; margin: 0 0 3px; } .w2-head p { font-size: 15.5px; color: #5C6486; margin: 0; line-height: 22px; }
.w2-close { border: 0; background: none; cursor: pointer; color: #07090F; padding: 4px; margin: 1px -4px 0 0; border-radius: 8px; display: inline-flex; } .w2-close:hover { background: #F1F1F4; }
.w2-body { display: grid; grid-template-columns: 255px minmax(0, 1fr); flex: 1; min-height: 0; }
.w2-steps { padding: 13px 24px 13px 15px; border-right: 1px solid #F0F1F4; background: #FBFCFC; }
.w2-step { display: flex; gap: 20px; align-items: center; width: 100%; text-align: left; border: 0; background: none; border-radius: 12px; padding: 14px 6px 15px 14px; cursor: pointer; font: inherit; margin-bottom: 8px; color: #07090F; }
.w2-step .n { width: 36px; height: 36px; border-radius: 50%; background: #D9DDE1; color: #2B3148; display: grid; place-items: center; font-size: 14px; font-weight: 600; flex: none; }
.w2-step b { display: block; font-size: 13px; font-weight: 600; line-height: 16px; letter-spacing: -.005em; white-space: nowrap; } .w2-step small { display: block; font-size: 11px; color: #6B7194; line-height: 16px; margin-top: 4px; white-space: nowrap; }
.w2-step.on { background: #F2F0F0; } .w2-step.on .n { background: #0B0B0F; color: #fff; } .w2-step.done .n { background: #2563EB; color: #fff; }
.w2-content { overflow: auto; overflow-x: hidden; scrollbar-gutter: stable; scrollbar-color: #D9DDE1 transparent; padding: 7px 20px 0 3px; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-content: start; }
.w2-content:not(:has(.w2-aside)) { grid-template-columns: 1fr; }
.w2-main { min-width: 0; display: grid; align-content: start; } .w2-aside { display: grid; gap: 14px; align-content: start; }
.w2-card { border: 1px solid #F0F1F4; border-radius: 12px; padding: 14px 16px 22px 14px; background: #fff; margin-bottom: 9px; } .w2-card h3 { font-size: 19px; font-weight: 700; letter-spacing: -.02em; margin: 0; line-height: 24px; } .w2-card > p, .w2-ch p { font-size: 13px; color: #6B7194; margin: 5px 0 0; line-height: 18px; }
.w2-ch { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 17px; }
.w2-seg { display: flex; background: #fff; border: 1px solid #E3E6ED; border-radius: 8px; height: 38px; margin-top: -3px; overflow: hidden; flex: none; } .w2-seg button { height: 36px; width: 124px; padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; color: #07090F; } .w2-seg button.on { background: #0B0B0F; color: #fff; border-radius: 7px; }
.w2-row4 { display: grid; grid-template-columns: 228fr 221fr 202fr 202fr; gap: 18px; } .w2-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .w2-row3v { display: grid; grid-template-columns: 322fr 344fr 139fr; gap: 26px; } .w2-row3l { display: grid; grid-template-columns: 1.4fr 1fr 1.3fr; gap: 16px; } .w2-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .w2-row2.v { grid-template-columns: 1.9fr 1fr; } .w2-row2.tight { gap: 14px; }
.w2-f { min-width: 0; } .w2-f label { display: block; font-size: 12px; font-weight: 500; line-height: 16px; color: #1B2140; margin-bottom: 9px; } .w2-f label i { color: #DC2626; font-style: normal; }
.w2-in { display: flex; align-items: center; gap: 12px; height: 44px; border: 1px solid #DFE1EB; border-radius: 8px; padding: 0 13px 0 15px; background: #fff; position: relative; } .w2-in > svg { color: #3E4560; flex: none; width: 16px; height: 16px; } .w2-in:has(> svg) { padding-left: 12px; } .w2-in input, .w2-in select { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 12.5px; color: #07090F; outline: none; padding: 0; height: 100%; } .w2-in input::placeholder { color: #8B8FA6; } .w2-in:focus-within { border-color: #B4B9C9; }
.w2-in.sel { padding-right: 36px; } .w2-in.sel select { -webkit-appearance: none; appearance: none; cursor: pointer; } .w2-in.sel > svg { position: absolute; right: 13px; pointer-events: none; }
.w2-in.pick .v { flex: 1; font-size: 12.5px; color: #07090F; } .w2-in.pick .v.ph { color: #8B8FA6; } .w2-in.pick input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.w2-in.plain { padding: 0 14px; } .w2-in.chips { height: auto; min-height: 42px; padding: 5px 8px; } .w2-cur { color: #3E4560; font-size: 12.5px; }
.w2-ta { position: relative; } .w2-ta textarea { width: 100%; display: block; border: 1px solid #E3E6ED; border-radius: 8px; padding: 10px 14px 20px; font: inherit; font-size: 12.5px; line-height: 18px; resize: vertical; min-height: 62px; background: #fff; color: #07090F; } .w2-ta textarea::placeholder { color: #8B8FA6; } .w2-count { position: absolute; right: 12px; bottom: 7px; font-size: 10.5px; color: #8B8FA6; }
.w2-btn { height: 40px; padding: 0 21px; font-size: 12.5px; font-weight: 500; border-radius: 8px; gap: 13px; white-space: nowrap; } .w2-btn.primary { padding: 0 21px; } .w2-btn svg { width: 16px; height: 16px; }
.w2-ev { border: 1px solid #EFF1F4; border-radius: 10px; margin-bottom: 6px; background: #fff; } .w2-card.events { padding-bottom: 12px; } .w2-card.intent { padding-top: 4px; }
.w2-evh { display: grid; grid-template-columns: 33px 114px 175px 236px minmax(0, 1fr) 51px 30px; gap: 8px; align-items: center; height: 45px; padding: 0 12px 0 16px; cursor: pointer; font-size: 12.5px; } .w2-evh i { width: 16px; height: 16px; border-radius: 50%; } .w2-evh b { font-weight: 600; font-size: 13px; } .w2-evh span { color: #5C6486; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .w2-evh span svg { width: 15px; height: 15px; flex: none; } .w2-evh em { color: #07090F; display: inline-flex; justify-self: start; width: 30px; justify-content: center; transition: transform .15s; } .w2-ev.open .w2-evh em { transform: rotate(180deg); }
.w2-more { width: 30px; height: 30px; border: 0; background: none; border-radius: 6px; cursor: pointer; color: #07090F; display: inline-grid; place-items: center; } .w2-more:hover { background: #F0F1F5; } .w2-more svg { stroke-width: 2.6; }
.w2-evb { background: #F3F5F7; margin: 2px 8px 8px; border-radius: 10px; padding: 12px 13px 18px 15px; } .w2-evb .w2-in, .w2-evb textarea { background: #fff; } .w2-evb .w2-f label { font-size: 11px; line-height: 14px; margin-bottom: 9px; } .w2-evb .w2-in { height: 36px; border-color: #DCDFE6; } .w2-evb .w2-in input, .w2-evb .w2-in .v, .w2-evb textarea { font-size: 11.5px; } .w2-evb .w2-chip { font-size: 11.5px; } .w2-evb .w2-row4 { grid-template-columns: 230fr 204fr 205fr 176fr; gap: 14px; margin-bottom: 14px; } .w2-evb .w2-row3v { margin-bottom: 16px; } .w2-evb .w2-chips { margin-bottom: 19px; } .w2-evb .w2-f.svc label { margin-bottom: 5px; } .w2-evb .w2-f.notes label { margin-bottom: 4px; } .w2-evb textarea { padding: 9px 14px 19px; min-height: 64px; }
.w2-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .w2-chip { display: inline-flex; align-items: center; gap: 10px; height: 30px; padding: 0 11px 0 12px; border-radius: 8px; background: #E8EAEE; font-size: 12px; color: #07090F; } .w2-chip button { border: 0; background: none; cursor: pointer; color: #4A5070; font-size: 15px; line-height: 1; padding: 0; } .w2-chip.add { background: #fff; border: 1px solid #E3E6ED; cursor: pointer; font: inherit; font-size: 12px; gap: 7px; padding: 0 13px 0 12px; } .w2-chip.add svg { width: 12px; height: 12px; } .w2-chip.add.sq { width: 26px; height: 26px; padding: 0; justify-content: center; border-radius: 7px; }
.w2-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .w2-two.split { grid-template-columns: 466fr 438fr; gap: 0; } .w2-two.split > div:first-child { padding-right: 16px; } .w2-two.split > div:last-child { padding-left: 19px; border-left: 1px solid #EEF0F3; }
.w2-sec h4, .w2-two h4 { font-size: 13.5px; font-weight: 600; margin: 0; letter-spacing: -.01em; line-height: 18px; } .w2-two p.s, .w2-sec > p { font-size: 12px; color: #6B7194; margin: 6px 0 10px; line-height: 16px; }
.w2-intent { display: flex; gap: 10px; } .w2-intent button { width: 135px; height: 74px; display: flex; gap: 12px; align-items: flex-start; text-align: left; border: 1px solid #E3E6ED; border-radius: 10px; background: #fff; padding: 12px 6px 10px 13px; cursor: pointer; font: inherit; } .w2-intent button:nth-child(2) { width: 156px; } .w2-intent button:nth-child(3) { width: 138px; } .w2-intent button i { width: 12px; height: 12px; border-radius: 50%; margin-top: 3px; flex: none; } .w2-intent b { display: block; font-size: 12px; font-weight: 600; line-height: 16px; } .w2-intent small { display: block; font-size: 10.5px; color: #6B7194; line-height: 13px; margin-top: 3px; } .w2-intent button.on { border-color: #0B0B0F; box-shadow: inset 0 0 0 1px #0B0B0F; }
.w2-tags .w2-in { height: 35px; padding: 0 14px; } .w2-tags .w2-chips { margin-top: 10px; gap: 8px; } .w2-tags .w2-chip { height: 26px; font-size: 11px; gap: 9px; padding: 0 11px 0 12px; border-radius: 7px; background: #E6E7ED; } .w2-tags .w2-in { border-color: #E7E9EF; }
.w2-sub { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 12px; } .w2-sub h4 { font-size: 15px; font-weight: 600; margin: 0; letter-spacing: -.015em; display: inline; } .w2-sub p { font-size: 12px; color: #6B7194; margin: 2px 0 0; } .w2-req { display: inline-grid; place-items: center; height: 24px; padding: 0 11px; border-radius: 999px; background: #EEEFF3; font-size: 11px; color: #4A5070; margin-left: 10px; }
.w2-hr { height: 1px; background: #EEF0F3; margin: 6px 0 18px; }
.w2-ct { background: #F7F8FA; border: 1px solid #EEF0F3; border-radius: 12px; padding: 16px 16px 4px; margin-bottom: 14px; } .w2-ct .w2-in { background: #fff; } .w2-cth { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .w2-cth b { font-size: 13.5px; font-weight: 600; } .w2-cth .w2-more { margin-left: auto; } .w2-ct .w2-row3 { margin-bottom: 12px; }
.w2-relchip { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px 0 12px; border-radius: 999px; background: #EEEFF3; font-size: 11.5px; } .w2-relchip select { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; } .w2-relchip em { font-style: normal; } .w2-relchip.static { padding: 0 12px; height: 24px; }
.w2-empty { color: #6B7194; font-size: 12.5px; padding: 6px 0 12px; }
.w2-aside .w2-tip { background: #F7F8FA; border-radius: 12px; padding: 18px 18px 20px; } .w2-tic { width: 48px; height: 48px; border-radius: 50%; background: #EEEFF3; display: grid; place-items: center; color: #07090F; margin-bottom: 16px; } .w2-tip b { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; } .w2-tip p { font-size: 12.5px; color: #4A5070; line-height: 1.5; margin: 0; } .w2-tip .w2-ta { margin-top: 12px; } .w2-tip .w2-ta textarea { background: #fff; }
.w2-tip.sum .h { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; } .w2-tip.sum .h b { margin: 0; } .w2-tip.sum > div:not(.h) { display: flex; gap: 10px; align-items: center; font-size: 12.5px; color: #4A5070; padding: 4px 0; } .w2-tip.sum i { width: 18px; height: 18px; border-radius: 50%; background: #E1E3EA; color: #fff; display: inline-grid; place-items: center; flex: none; } .w2-tip.sum > div.on { color: #07090F; } .w2-tip.sum > div.on i { background: #16A34A; }
.w2-sec { margin-bottom: 18px; }
.w2-svcs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } .w2-svc { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; height: 78px; border: 1px solid #E3E6ED; border-radius: 10px; background: #fff; cursor: pointer; font: inherit; color: #07090F; padding: 8px; } .w2-svc b { font-size: 12px; font-weight: 500; text-align: center; line-height: 1.2; } .w2-svc .ck { position: absolute; top: 8px; right: 8px; width: 15px; height: 15px; border: 1.5px solid #B4B9C9; border-radius: 4px; background: #fff; display: grid; place-items: center; color: #fff; } .w2-svc.on { border-color: #0B0B0F; box-shadow: inset 0 0 0 1px #0B0B0F; } .w2-svc.on .ck { background: #0B0B0F; border-color: #0B0B0F; }
.w2-pills { display: flex; flex-wrap: wrap; gap: 8px; } .w2-pill { height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: #EEEFF3; font: inherit; font-size: 12px; color: #1B2140; cursor: pointer; } .w2-pill.on { background: #0B0B0F; color: #fff; }
.w2-checks { display: grid; gap: 4px; } .w2-checks label { display: flex; gap: 12px; align-items: center; font-size: 12.5px; cursor: pointer; padding: 3px 0; } .w2-checks input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 1.5px solid #B4B9C9; border-radius: 5px; margin: 0; cursor: pointer; flex: none; background: #fff; } .w2-checks input:checked { background: #0B0B0F url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><path d='M20 6 9 17l-5-5'/></svg>") no-repeat center / 12px; border-color: #0B0B0F; }
.w2-yn { display: flex; gap: 4px; background: #F1F1F4; border-radius: 8px; padding: 3px; height: 44px; } .w2-yn button { flex: 1; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 12.5px; cursor: pointer; color: #4A5070; } .w2-yn button.on { background: #0B0B0F; color: #fff; }
.w2-rgrid { display: grid; grid-template-columns: 1fr 1.07fr; gap: 16px; } .w2-rc { border: 1px solid #EEF0F3; border-radius: 12px; padding: 14px 16px 12px; } .w2-rch { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .w2-rci { width: 26px; height: 26px; border-radius: 7px; background: #EEEFF3; display: grid; place-items: center; color: #07090F; } .w2-rch b { font-size: 15px; font-weight: 600; flex: 1; letter-spacing: -.015em; } .w2-rch .link { font-size: 12.5px; display: inline-flex; gap: 6px; align-items: center; border: 0; background: none; cursor: pointer; font-family: inherit; color: #07090F; }
.w2-kv > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 10px; padding: 4px 0; font-size: 12.5px; } .w2-kv span { color: #4A5070; } .w2-kv b { font-weight: 400; color: #07090F; }
.w2-revs > div { display: grid; grid-template-columns: 16px 100px 120px minmax(0, 1fr); gap: 12px; align-items: center; padding: 7px 0; font-size: 12.5px; } .w2-revs i { width: 16px; height: 16px; border-radius: 50%; } .w2-revs b { font-weight: 500; } .w2-revs span { color: #4A5070; }
.w2-rct { padding: 5px 0 10px; } .w2-rct b { font-size: 13px; font-weight: 600; margin-right: 8px; } .w2-rct small { display: block; font-size: 12.5px; color: #4A5070; margin-top: 3px; }
.w2-next { display: flex; align-items: center; gap: 18px; border: 1px solid #EEF0F3; border-radius: 12px; padding: 14px 18px; margin-top: 16px; } .w2-next .w2-tic { margin: 0; width: 44px; height: 44px; } .w2-next > div { flex: 1; } .w2-next b { display: block; font-size: 13.5px; font-weight: 600; } .w2-next p { margin: 2px 0 0; font-size: 12.5px; color: #6B7194; } .w2-tgl { display: flex; gap: 12px; align-items: center; cursor: pointer; } .w2-tgl .tgl { display: inline-block; flex: none; } .w2-tgl b { font-size: 12.5px; } .w2-tgl small { display: block; font-size: 11.5px; color: #6B7194; }
.w2-foot { display: flex; align-items: center; gap: 12px; padding: 21px 21px 15px 24px; border-top: 1px solid #EEF0F3; flex: none; } .w2-foot .sp { flex: 1; } .w2-foot .btn.ghost { border-color: transparent; background: none; } .w2-foot .w2-btn { height: 42px; font-size: 12px; padding: 0 20px; gap: 12px; }
@media (max-width: 1100px) { .w2-content { grid-template-columns: 1fr !important; } .w2-aside { grid-template-columns: 1fr 1fr; } .w2-svcs { grid-template-columns: repeat(3, 1fr); } .w2-row4, .w2-row3v, .w2-row3l, .w2-evb .w2-row4 { grid-template-columns: 1fr 1fr; } .w2-rgrid, .w2-two { grid-template-columns: 1fr; } .w2-two.split > div { padding: 0 !important; border: 0 !important; } .w2-evh { grid-template-columns: 33px 114px 175px minmax(0, 1fr) 51px 30px; } .w2-evh span:nth-of-type(2) { display: none; } }
@media (max-width: 720px) { .w2-body { grid-template-columns: 1fr; } .w2-steps { display: flex; overflow-x: auto; padding: 8px; border-right: 0; border-bottom: 1px solid #EEF0F3; } .w2-step { flex: none; padding: 8px 10px; margin: 0; } .w2-step small { display: none; } .w2-aside, .w2-row4, .w2-row3, .w2-row3v, .w2-row3l, .w2-row2, .w2-evb .w2-row4 { grid-template-columns: 1fr !important; } .w2-evh { grid-template-columns: 24px minmax(0, 1fr) 30px 30px; } .w2-evh span { display: none; } .w2-head { padding: 20px 16px 14px; } .w2-content { padding: 12px; } .w2-foot { padding: 12px 16px; flex-wrap: wrap; } .w2-svcs { grid-template-columns: 1fr 1fr; } .w2-intent { flex-wrap: wrap; } }
/* step 2 — Contact Information: an open column, two rules, grey contact cards, tips on the right */
.w2-content.s2 { grid-template-columns: minmax(0, 1fr) 256px; gap: 16px; padding: 13px 12px 5px 3px; }
.w2-main.s2 { padding: 3px 6px 0 8px; display: block; }
.w2-h3 { font-size: 19px; font-weight: 700; letter-spacing: -.02em; margin: 0; line-height: 24px; } .w2-sub3 { font-size: 13px; color: #6B7194; margin: 4px 0 0; line-height: 18px; }
.w2-rule { height: 1px; background: #EEF0F3; margin: 24px 0 15px; } .w2-rule.two { margin: 32px 0 22px; }
.w2-sh { display: flex; align-items: center; gap: 12px; height: 26px; font-size: 15px; font-weight: 600; line-height: 20px; letter-spacing: -.01em; margin: 0 0 17px; } .w2-req { display: inline-grid; place-items: center; height: 26px; padding: 0 11px; border-radius: 999px; background: #EEEFF3; font-size: 11px; font-weight: 400; color: #4A5070; }
.w2-fields { padding: 0 2px 0 5px; } .w2-fields .w2-f label { margin-bottom: 8px; } .w2-fields .w2-row3, .w2-fields .w2-row2 { gap: 18px; margin-bottom: 18px; } .w2-fields .w2-row3.r2 { grid-template-columns: 241fr 194fr 162fr; } .w2-fields .w2-row2.r3 { grid-template-columns: 241fr 374fr; margin-bottom: 0; }
.w2-shrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; } .w2-shrow .w2-sh { margin: 0; } .w2-shrow .w2-sub3 { margin-top: 3px; font-size: 12px; }
.w2-btn.line { height: 44px; background: #fff; border: 1px solid #E5E7ED; padding: 0 19px 0 21px; gap: 12px; }
.w2-ct { background: #FBFBFC; border: 1px solid #EDF0F3; border-radius: 12px; padding: 16px 15px 19px 17px; margin-bottom: 7px; } .w2-ct .w2-in { background: #fff; border-color: #E9EBF0; height: 40px; } .w2-cth { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .w2-cth b { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; } .w2-cth .w2-more { margin-left: auto; width: 28px; height: 28px; } .w2-ct .w2-f label { margin-bottom: 6px; } .w2-ct .w2-row3 { gap: 16px; margin-bottom: 0; } .w2-ct .w2-row3.c1 { grid-template-columns: 182fr 168fr 228fr; margin-bottom: 20px; } .w2-ct .w2-row3.c2 { grid-template-columns: 196fr 189fr 193fr; }
.w2-relchip { position: relative; display: inline-flex; align-items: center; gap: 9px; height: 28px; padding: 0 10px 0 12px; border-radius: 999px; background: #EAEBEF; font-size: 12px; } .w2-relchip select { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; } .w2-relchip em { font-style: normal; } .w2-relchip.static { padding: 0 12px; height: 24px; }
.w2-aside .w2-tip { background: #F6F7F9; border-radius: 12px; padding: 20px 20px 18px; } .w2-tic { width: 50px; height: 50px; border-radius: 50%; background: #E7E8EB; display: grid; place-items: center; color: #07090F; margin-bottom: 19px; } .w2-tip b { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 8px; line-height: 18px; } .w2-tip p { font-size: 12.5px; color: #4A5070; line-height: 20px; margin: 0; }
.w2-aside { gap: 13px; }
.w2-step.done .n { background: #0B0B0F; color: #fff; }
/* step 3 — Preferences: the tips float top-right, the sections flow around them */
.w2-content.s3 { display: block; padding: 13px 12px 5px 3px; }
.w2-aside.s3 { float: right; width: 256px; margin: 0 0 16px 16px; display: grid; gap: 14px; }
.w2-aside.s3 .w2-tip .w2-ta { margin-top: 13px; } .w2-aside.s3 .w2-tip textarea { min-height: 126px; font-size: 12.5px; line-height: 20px; padding: 10px 12px 22px; border-color: #E9EBF0; resize: none; } .w2-aside.s3 .w2-tip:first-child { padding-bottom: 15px; }
.w2-main.s3 { display: block; align-content: normal; padding: 3px 0 0; } .w2-main.s3 .w2-rule.r1 { margin: 15px 0 12px; } .w2-main.s3 .w2-rule.r2 { margin: 19px 0 21px; } .w2-main.s3 .w2-rule.r3 { margin: 15px 0 13px; }
.w2-sec3 h4 { font-size: 14px; font-weight: 600; line-height: 18px; margin: 0; letter-spacing: -.01em; } .w2-sec3 > p { font-size: 12px; color: #6B7194; line-height: 16px; margin: 3px 0 9px; }
.w2-sec3.style { margin-top: 31px; }
.w2-svcs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 10px; margin-top: -1px; } .w2-svc { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; height: 78px; border: 1px solid #E9EAEF; border-radius: 10px; background: #fff; cursor: pointer; font: inherit; color: #07090F; padding: 3px 6px 0; } .w2-svc b { font-size: 12px; font-weight: 500; text-align: center; line-height: 15px; } .w2-svc .ck { position: absolute; top: 8px; right: 10px; width: 16px; height: 16px; border: 1.5px solid #B4B9C9; border-radius: 4px; background: #fff; display: grid; place-items: center; color: #fff; } .w2-svc.on { background: #F8F8F8; border-color: #3A3A40; box-shadow: inset 0 0 0 .5px #3A3A40; } .w2-svc.on .ck { background: #0B0B0F; border-color: #0B0B0F; }
.w2-pills { display: flex; flex-wrap: wrap; gap: 8px 6px; } .w2-pill { height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: #EEEFF3; font: inherit; font-size: 11.5px; color: #1B2140; cursor: pointer; white-space: nowrap; } .w2-pill.on { background: #0B0B0F; color: #fff; }
.w2-cols3 { display: grid; grid-template-columns: 382px minmax(0, 1fr); gap: 18px; } .w2-cols3 .w2-sec3 > p { margin-bottom: 7px; } .w2-cols3.low .w2-sec3 > p { margin-bottom: 8px; }
.w2-checks { display: grid; gap: 0; } .w2-checks label { display: flex; gap: 12px; align-items: center; font-size: 13px; cursor: pointer; padding: 0; height: 25.5px; color: #07090F; } .w2-checks input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 1.5px solid #B4B9C9; border-radius: 5px; margin: 0 0 0 2px; cursor: pointer; flex: none; background: #fff; } .w2-checks input:checked { background: #0B0B0F url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><path d='M20 6 9 17l-5-5'/></svg>") no-repeat center / 13px; border-color: #0B0B0F; }
.w2-how { display: grid; grid-template-columns: 249fr 267fr; gap: 13px; align-items: end; margin-top: 41px; } .w2-how .w2-sec3 > p { margin-bottom: 5px; } .w2-how .w2-f label { margin-bottom: 8px; }
.w2-sec3.w2-tlsec { margin-top: 22px; }
/* step 3 fixes: the tips sit at the top, the two columns flow under them */
.w2-content.s3, .w2-content.s4 { display: block; padding: 6px 12px 5px 3px; }
.w2-aside.s3, .w2-aside.s4 { float: right; width: 256px; margin: 0 0 0 16px; display: grid; gap: 14px; }
.w2-main.s3, .w2-main.s4 { display: block; align-content: normal; padding: 10px 0 0; }
.w2-aside.s3 .w2-tip:first-child { padding: 25px 20px 15px; } .w2-aside.s3 .w2-tip:nth-child(2) { padding: 25px 20px 15px; }
.w2-aside .w2-tic { margin-bottom: 18px; } .w2-aside .w2-tip b { margin-bottom: 7px; }
.w2-cols3 { display: block; } .w2-cols3::after { content: ''; display: block; clear: both; } .w2-cols3 > :first-child { float: left; width: 382px; } .w2-cols3 > :last-child { margin-left: 400px; } .w2-cols3:not(.low) > :last-child { max-width: 382px; } .w2-rule.r3 { clear: both; }
/* step 4 — Additional Information */
.w2-aside.s4 .w2-tip { padding: 25px 20px 18px; } .w2-aside.s4 .w2-tip p { line-height: 20px; }
.w2-tip.sum { padding: 20px 20px 16px !important; } .w2-tip.sum .h { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; } .w2-tip.sum .h b { margin: 0; font-size: 13.5px; } .w2-tip.sum > div:not(.h) { display: flex; gap: 10px; align-items: center; font-size: 12.5px; color: #4A5070; height: 32px; } .w2-tip.sum i { width: 20px; height: 20px; border-radius: 50%; background: #E1E3EA; color: #fff; display: inline-grid; place-items: center; flex: none; } .w2-tip.sum > div.on { color: #1B2140; } .w2-tip.sum > div.on i { background: #1F9D55; }
.w2-main.s4 .w2-rule.r1 { margin: 15px 0 13px; }
.w2-sec4 h4 { font-size: 14px; font-weight: 600; line-height: 18px; margin: 0; letter-spacing: -.01em; } .w2-sec4 > p { font-size: 12px; color: #6B7194; line-height: 16px; margin: 2px 0 0; } .w2-sec4 { margin-bottom: 9px; } .w2-sec4.gap { margin-top: 26px; } .w2-sec4.gap2 { margin-top: 24px; } .w2-sec4.gap3 { margin-top: 19px; margin-bottom: 5px; } .w2-sec4.gap4 { margin-top: 19px; }
.w2-main.s4 .w2-f label { margin-bottom: 8px; } .w2-main.s4 .w2-in { height: 40px; } .w2-main.s4 .w2-in.chips { min-height: 40px; padding: 4px 8px; gap: 8px; } .w2-main.s4 .w2-in.chips > svg { margin: 0 2px 0 4px; } .w2-main.s4 .w2-chip { height: 30px; font-size: 12px; } .w2-main.s4 .w2-ta textarea { min-height: 72px; padding: 10px 14px 20px; line-height: 18px; font-size: 12.5px; } .w2-main.s4 .w2-g2.a .w2-ta textarea { min-height: 81px; } .w2-main.s4 .w2-ta.one textarea { min-height: 46px; padding: 12px 70px 12px 14px; }
.w2-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 19px; margin-bottom: 15px; } .w2-g2.b { grid-template-columns: 383fr 268fr; gap: 20px; margin-bottom: 16px; } .w2-g2.b + .w2-g2.b, .w2-g2.a + .w2-g2.a { margin-bottom: 0; } .w2-g2.d { grid-template-columns: 431fr 220fr; gap: 20px; margin-bottom: 0; }
.w2-g3 { display: grid; gap: 19px; margin-bottom: 12px; } .w2-sec4.gap2 { margin-top: 29px; } .w2-sec4.gap3 { margin-top: 24px; } .w2-g3.c { grid-template-columns: 242fr 170fr 220fr; } .w2-g3.e { grid-template-columns: 251fr 329fr 308fr; margin-bottom: 0; }
.w2-yn { display: flex; gap: 5px; background: #F1F1F4; border-radius: 8px; padding: 0; height: 40px; } .w2-yn button { flex: 1; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; color: #4A5070; } .w2-yn button.on { background: #0B0B0F; color: #fff; }
/* step 3/4 rhythm */
.w2-aside .w2-tip { padding: 20px 20px 18px !important; } .w2-aside.s3 .w2-tip, .w2-aside.s4 .w2-tip { padding: 20px 16px 18px !important; } .w2-aside.s3 .w2-tip:first-child { padding-bottom: 15px !important; } .w2-aside.s3 .w2-tip p, .w2-aside.s4 .w2-tip p { font-size: 12px; }
.w2-main.s4 .w2-rule.r1 { margin: 6px 0 13px; } .w2-main.s4 .w2-f label { margin-bottom: 4px; } .w2-main.s4 .w2-in { height: 38px; } .w2-main.s4 .w2-in.chips { min-height: 38px; padding: 3px 8px; }
/* step 5 — Review & Create */
.w2-content.s5 { display: block; padding: 6px 12px 5px 3px; } .w2-main.s5 { display: block; align-content: normal; padding: 9px 0 0; }
.w2-rhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 19px; } .w2-rhead .w2-btn.edit { height: 40px; padding: 0 22px 0 21px; gap: 12px; margin-top: 2px; }
.w2-rgrid { display: grid; grid-template-columns: 443fr 476fr; gap: 18px 17px; } .w2-rc { border: 1px solid #EDEFF3; border-radius: 12px; padding: 15px 16px 14px; background: #fff; } .w2-rch { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; height: 24px; } .w2-rci { width: 24px; height: 24px; border-radius: 6px; background: #EEF0F4; display: grid; place-items: center; color: #07090F; } .w2-rch b { font-size: 14.5px; font-weight: 600; flex: 1; letter-spacing: -.015em; } .w2-rch .link { font-size: 12.5px; display: inline-flex; gap: 7px; align-items: center; border: 0; background: none; cursor: pointer; font-family: inherit; color: #07090F; padding: 0 9px 0 0; }
.w2-kv > div { display: grid; grid-template-columns: 167px minmax(0, 1fr); gap: 10px; padding: 0; min-height: 27px; align-items: start; font-size: 12.5px; line-height: 19px; padding: 4px 0; } .w2-kv span { color: #6B7194; } .w2-kv b { font-weight: 400; color: #1B2140; } .w2-kv.tight > div { min-height: 22px; padding: 2px 0; line-height: 18px; }
.w2-revs > div { display: grid; grid-template-columns: 16px 90px 105px minmax(0, 1fr); gap: 12px; align-items: center; height: 34px; font-size: 12.5px; } .w2-revs i { width: 16px; height: 16px; border-radius: 50%; margin-left: 8px; } .w2-revs b { font-weight: 600; } .w2-revs span { color: #6B7194; }
.w2-rcts { padding-top: 5px; } .w2-rct { padding: 0 0 22px; } .w2-rct:last-child { padding-bottom: 2px; } .w2-rct b { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; margin: 0; line-height: 24px; } .w2-rct small { display: block; font-size: 12.5px; color: #1B2140; line-height: 24px; } .w2-relchip.static { padding: 0 11px; height: 24px; font-size: 11.5px; font-weight: 400; }
.w2-next { display: flex; align-items: center; gap: 16px; border: 1px solid #EDEFF3; border-radius: 12px; padding: 15px 18px; margin-top: 18px; height: 70px; } .w2-next .w2-tic { margin: 0; width: 40px; height: 40px; } .w2-next > div { flex: 1; } .w2-next b { display: block; font-size: 13.5px; font-weight: 600; line-height: 18px; } .w2-next p { margin: 2px 0 0; font-size: 12px; color: #6B7194; line-height: 16px; } .w2-tgl { display: flex; gap: 12px; align-items: center; cursor: pointer; } .w2-tgl .tgl { display: inline-block; flex: none; width: 36px; height: 20px; } .w2-tgl b { font-size: 12.5px; font-weight: 500; display: block; } .w2-tgl small { display: block; font-size: 11px; color: #6B7194; margin-top: 1px; }
/* last touches: completed steps in the mockup's navy, the summary's green, rows beside the tips keep their width */
.w2-step.done .n { background: #1C4272; color: #fff; } .w2-tip.sum > div.on i { background: #1E7A2E; }
.w2-g2.d { max-width: 656px; } .w2-next p { font-size: 11.5px; }
/* narrower screens: one column, the tips above, nothing scrolls sideways */
@media (max-width: 1100px) { .w2-rgrid { grid-template-columns: 1fr; } .w2-svcs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .w2-content.s2 { grid-template-columns: 1fr; } .w2-aside.s3, .w2-aside.s4 { float: none; width: auto; margin: 0 0 16px; } .w2-cols3 > :first-child { float: none; width: auto; } .w2-cols3 > :last-child { margin-left: 0; max-width: none !important; margin-top: 18px; } .w2-g2.d { max-width: none; } .w2-main.s3, .w2-main.s4 { padding-top: 0; } }
@media (max-width: 720px) { .w2-svcs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .w2-ch { flex-wrap: wrap; } .w2-g2, .w2-g3, .w2-how, .w2-fields .w2-row3, .w2-fields .w2-row2, .w2-ct .w2-row3 { grid-template-columns: 1fr !important; } .w2-kv > div { grid-template-columns: 120px minmax(0, 1fr); } .w2-revs > div { grid-template-columns: 16px 80px minmax(0, 1fr); } .w2-revs > div span:last-child { display: none; } .w2-next { height: auto; flex-wrap: wrap; } .w2-rhead { flex-wrap: wrap; } .w2-intent button { width: auto !important; flex: 1 1 40%; } .w2-two.split > div:last-child { border-left: 0; padding-left: 0; margin-top: 16px; } .w2-tags .w2-in { margin-top: 0; } .w2-shrow { flex-wrap: wrap; } }

/* ============================================================================
   Companies (.co-*), drawn to Surya's mockups at 1536 × 1024.
   ============================================================================ */
.co { padding-top: 6px; } .co-crumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #6B7194; margin-bottom: 8px; } .co-crumb a { color: #6B7194; text-decoration: none; } .co-crumb i { font-style: normal; } .co-crumb span { color: #6B7194; }
.co-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 22px; } .co-head h1 { font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 36px; margin: 0 0 3px; color: #07090F; } .co-head p { font-size: 14px; color: #5C6486; margin: 0; letter-spacing: -.01em; }
.co-add { height: 40px; padding: 0 18px 0 16px; font-size: 14px; font-weight: 500; gap: 10px; border-radius: 8px; margin-top: 0; }
.co-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; } .co-tile { height: 102px; background: #F7F8FA; border: 1px solid #EEF0F3; border-radius: 10px; padding: 16px 18px 0; } .co-tile span { display: block; font-size: 13px; color: #3B4060; letter-spacing: -.01em; } .co-tile b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 30px; margin-top: 2px; } .co-tile small { display: block; font-size: 12px; color: #6B7194; margin-top: 2px; }
.co-tabs { display: flex; gap: 12px; border-bottom: 1px solid #E5E7EB; margin-bottom: 18px; } .co-tabs button { position: relative; height: 42px; padding: 0 13px; border: 0; background: none; font: inherit; font-size: 14px; color: #3B4060; cursor: pointer; letter-spacing: -.01em; white-space: nowrap; } .co-tabs button.on { color: #07090F; font-weight: 600; } .co-tabs button.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #0B0B0F; }
.co-card { border: 1px solid #E9EBF0; border-radius: 12px; background: #fff; overflow: hidden; }
.co-tools { display: flex; align-items: center; gap: 10px; padding: 14px 16px; } .co-tools .co-sp { flex: 1; }
.co-search { display: flex; align-items: center; gap: 12px; width: 240px; height: 40px; background: #F1F2F5; border-radius: 8px; padding: 0 12px; } .co-search svg { color: #0B0F1E; flex: none; } .co-search input { border: 0; background: none; font: inherit; font-size: 13.5px; width: 100%; outline: none; } .co-search input::placeholder { color: #8B8FA6; }
.co-sel { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 40px; border: 1px solid #E3E6ED; border-radius: 8px; padding: 0 12px 0 14px; background: #fff; font-size: 13.5px; color: #07090F; cursor: pointer; white-space: nowrap; } .co-sel select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; } .co-sel svg { color: #4A5070; }
.co-view { display: flex; border: 1px solid #E3E6ED; border-radius: 8px; overflow: hidden; } .co-view button { width: 40px; height: 40px; border: 0; background: #fff; display: grid; place-items: center; cursor: pointer; color: #4A5070; } .co-view button.on { background: #0B0B0F; color: #fff; } .co-ib { width: 40px; height: 40px; border: 1px solid #E3E6ED; border-radius: 8px; background: #fff; display: grid; place-items: center; cursor: pointer; color: #07090F; }
.co-bulk { margin: 0 16px 10px; }
.co-table { width: 100%; border-collapse: collapse; } .co-table th { height: 40px; padding: 0 8px; text-align: left; font-size: 13px; font-weight: 500; color: #1B2140; background: #F4F5F7; white-space: nowrap; } .co-table th.ck, .co-table td.ck { width: 50px; padding-left: 18px; } .co-table th.r, .co-table td.r { text-align: right; padding-right: 20px; }
.co-table td { height: 47px; padding: 4px 8px; font-size: 13px; color: #07090F; border-top: 1px solid #F0F1F5; vertical-align: middle; } .co-table tbody tr { cursor: pointer; } .co-table tbody tr:hover td { background: #FAFAFC; } .co-table tbody tr.sel td { background: #F3F6FF; } .co-table td.mut { color: #4A5070; }
.co-table .who { display: flex; align-items: center; gap: 12px; } .co-table .who b { font-weight: 500; font-size: 13.5px; }
.co-av { width: 30px; height: 30px; border-radius: 50%; background: #EEF0F3; color: #151A30; display: inline-grid; place-items: center; font-size: 11.5px; font-weight: 600; flex: none; } .co-av.img { object-fit: cover; } .co-av.lg { width: 44px; height: 44px; font-size: 15px; } .co-av.xl { width: 96px; height: 96px; font-size: 30px; border-radius: 12px; font-family: var(--serif, Georgia); font-weight: 400; }
.co-chip { display: inline-grid; place-items: center; height: 24px; padding: 0 10px; border-radius: 6px; background: #EBEBEC; color: #1B2140; font-size: 12.5px; white-space: nowrap; } .co-tags { display: flex; gap: 6px; }
.co-table td.act b { display: block; font-size: 13px; font-weight: 400; color: #3B4060; } .co-table td.act small { display: block; font-size: 12.5px; color: #6B7194; margin-top: 1px; } .co-table td.act .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #1E9E5A; margin-right: 6px; vertical-align: 1px; }
.co-table input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border: 1.5px solid #B4B9C9; border-radius: 4px; background: #fff; margin: 0; display: block; cursor: pointer; } .co-table input[type=checkbox]:checked { background: #0B0B0F url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><path d='M20 6 9 17l-5-5'/></svg>") no-repeat center / 11px; border-color: #0B0B0F; }
.co-foot { display: flex; align-items: center; gap: 14px; padding: 18px 16px 18px 16px; border-top: 1px solid #F0F1F5; font-size: 13.5px; color: #4A5070; } .co-foot > span { flex: 1; }
.co-pg { display: flex; align-items: center; gap: 6px; } .co-pg button { width: 32px; height: 32px; border: 0; background: none; border-radius: 8px; font: inherit; font-size: 13.5px; color: #07090F; cursor: pointer; display: inline-grid; place-items: center; } .co-pg button.on { background: #0B0B0F; color: #fff; } .co-pg button:disabled { color: #B4B9C9; cursor: default; } .co-pg button[data-copg="prev"] svg { transform: rotate(180deg); } .co-pg i { font-style: normal; color: #8B8FA6; padding: 0 4px; }
.co-per { position: relative; display: inline-flex; align-items: center; height: 40px; border: 1px solid #E3E6ED; border-radius: 8px; padding: 0 10px 0 4px; background: #fff; } .co-per select { -webkit-appearance: none; appearance: none; border: 0; background: none; font: inherit; font-size: 13.5px; color: #07090F; padding: 0 22px 0 10px; height: 100%; cursor: pointer; outline: none; } .co-per svg { position: absolute; right: 12px; pointer-events: none; }
.co-empty { padding: 60px 20px; text-align: center; color: #6B7194; font-size: 13.5px; } .co-empty b { display: block; font-size: 16px; color: #07090F; margin-bottom: 6px; }
.co-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 4px 16px 16px; } .co-gcard { border: 1px solid #E9EBF0; border-radius: 12px; padding: 16px; text-decoration: none; color: inherit; display: block; } .co-gcard:hover { border-color: #C9CDD9; } .co-gcard b { display: block; font-size: 14.5px; font-weight: 600; margin-top: 10px; } .co-gcard small { display: block; font-size: 12.5px; color: #6B7194; margin: 2px 0 8px; } .co-gcard .meta { display: flex; justify-content: space-between; font-size: 12.5px; color: #4A5070; margin-top: 10px; } .co-gcard em { display: block; font-style: normal; font-size: 12px; color: #6B7194; margin-top: 8px; }
.co-pop { position: absolute; z-index: 1200; background: #fff; border: 1px solid #E3E6ED; border-radius: 12px; box-shadow: 0 20px 50px -20px rgba(11, 15, 30, .3); padding: 6px; min-width: 210px; }
/* the Add company panel */
.co-pscrim { position: fixed; inset: 0; background: rgba(120, 122, 128, .55); z-index: 80; display: flex; justify-content: flex-end; opacity: 0; transition: .18s; } .co-pscrim.on { opacity: 1; } .co-panel { width: 434px; max-width: 100vw; height: 100%; background: #fff; display: flex; flex-direction: column; box-shadow: -24px 0 60px -30px rgba(11, 15, 30, .35); transform: translateX(16px); transition: .18s; } .co-pscrim.on .co-panel { transform: none; }
.co-ph { position: relative; padding: 24px 28px 14px 32px; flex: none; } .co-ph h2 { font-size: 26px; font-weight: 700; letter-spacing: -.025em; margin: 0 0 6px; } .co-ph p { font-size: 14px; color: #4A5A8A; margin: 0; } .co-x { position: absolute; top: 20px; right: 22px; width: 36px; height: 36px; border: 0; background: none; border-radius: 8px; cursor: pointer; display: grid; place-items: center; color: #07090F; } .co-x:hover { background: #F1F1F4; }
.co-pb { flex: 1; min-height: 0; overflow: auto; padding: 6px 28px 10px 32px; } .co-f { margin-bottom: 18px; } .co-f label { display: block; font-size: 13.5px; font-weight: 500; color: #07090F; margin-bottom: 8px; } .co-f label i { color: #DC2626; font-style: normal; } .co-f label em { color: #6B7194; font-style: normal; font-weight: 400; } .co-f input, .co-f textarea { width: 100%; height: 44px; border: 1px solid #E3E6ED; border-radius: 8px; padding: 0 14px; font: inherit; font-size: 14px; color: #07090F; background: #fff; outline: none; } .co-f textarea { height: auto; padding: 10px 14px; resize: vertical; } .co-f input::placeholder, .co-f textarea::placeholder { color: #8B8FA6; } .co-f input:focus, .co-f textarea:focus { border-color: #0B0B0F; } .co-f input.bad { border-color: #DC2626; }
.co-in.sel { position: relative; display: flex; align-items: center; height: 44px; border: 1px solid #E3E6ED; border-radius: 8px; background: #fff; } .co-in.sel select { -webkit-appearance: none; appearance: none; flex: 1; border: 0; background: none; font: inherit; font-size: 14px; color: #07090F; padding: 0 36px 0 14px; height: 100%; outline: none; cursor: pointer; } .co-in.sel > svg { position: absolute; right: 12px; pointer-events: none; color: #4A5070; } .co-in.sel.tags input { border: 0; height: 100%; padding-right: 36px; }
.co-kinds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .co-kinds button { height: 74px; border: 1px solid #E3E6ED; border-radius: 10px; background: #fff; display: grid; place-items: center; align-content: center; gap: 6px; font: inherit; font-size: 13px; color: #07090F; cursor: pointer; } .co-kinds button.on { border: 2px solid #0B0B0F; background: #F7F8FA; }
.co-tglrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 18px; } .co-tglrow b { display: block; font-size: 13.5px; font-weight: 500; } .co-tglrow small { display: block; font-size: 12.5px; color: #4A5A8A; margin-top: 3px; }
.co-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.co-morebtn { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: none; padding: 4px 0 14px; font: inherit; font-size: 13.5px; color: #07090F; cursor: pointer; } .co-morebtn svg { transform: rotate(-90deg); transition: .15s; } .co-morebtn.open svg { transform: none; } .co-morebtn small { color: #6B7194; font-size: 12px; margin-left: 4px; }
.co-pf { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 28px 22px 32px; border-top: 1px solid #ECEEF3; flex: none; } .co-btn { height: 44px; justify-content: center; font-size: 15px; font-weight: 500; border-radius: 8px; white-space: nowrap; }
@media (max-width: 1250px) { .co-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .co-tools { flex-wrap: wrap; } .co-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .co-tiles { grid-template-columns: 1fr 1fr; } .co-card { overflow-x: auto; } .co-table { min-width: 1100px; } .co-panel { width: 100vw; } .co-head { flex-wrap: wrap; } .co-tabs { overflow-x: auto; } .co-grid { grid-template-columns: 1fr; } .co-kinds { grid-template-columns: 1fr 1fr; } .co-row2 { grid-template-columns: 1fr; } }
/* --- a company's page (.cd-*), from the mockup (1200-wide export, ×1.28) --- */
.cd { padding-top: 6px; } .cd .co-crumb { margin-bottom: 14px; }
.cd-head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 20px; } .cd-av { width: 80px; height: 80px; border-radius: 50%; background: #F0F1F5; color: #151A30; display: grid; place-items: center; font-size: 26px; font-weight: 600; flex: none; object-fit: cover; }
.cd-t { flex: 1; min-width: 0; } .cd-t h1 { display: flex; align-items: center; gap: 10px; font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 36px; margin: 2px 0 4px; color: #07090F; } .cd-t p { font-size: 14px; color: #4A5070; margin: 0 0 10px; } .cd-t p i { font-style: normal; margin: 0 4px; color: #8B8FA6; }
.cd-star { border: 0; background: none; cursor: pointer; color: #4A5070; display: grid; place-items: center; padding: 2px; } .cd-star.on { color: #F59E0B; } .cd-star.on svg { fill: #F59E0B; }
.co-chip.pref { background: #F0F1F5; font-size: 12px; height: 24px; margin-left: 4px; } .co-chip.arch { background: #FEE2E2; color: #B91C1C; font-size: 12px; height: 24px; }
.cd-rels { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .co-chip.rel { border: 0; cursor: pointer; height: 26px; font: inherit; font-size: 13px; } .co-chip.rel:hover { background: #E0E1E5; } .cd-addrel { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 1px solid #E3E6ED; border-radius: 6px; background: #fff; font: inherit; font-size: 13px; color: #07090F; cursor: pointer; }
.cd-acts { display: flex; align-items: center; gap: 10px; flex: none; } .co-hb { height: 38px; padding: 0 16px; font-size: 13.5px; font-weight: 500; gap: 8px; border-radius: 8px; background: #fff; border: 1px solid #E3E6ED; } .co-hb.sq { width: 38px; padding: 0; justify-content: center; } .co-hb.sq.off { pointer-events: none; opacity: .4; } .cd-nav { display: inline-flex; gap: 6px; margin-left: 4px; } .cd-nav a:first-child svg { transform: rotate(180deg); }
.cd-tabs { margin-bottom: 20px; gap: 6px; } .cd-tabs a { position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 16px; font-size: 14px; color: #3B4060; text-decoration: none; white-space: nowrap; letter-spacing: -.01em; } .cd-tabs a.on { color: #07090F; font-weight: 600; } .cd-tabs a.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #0B0B0F; }
.cd-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; } .cd-tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cd-tile { display: flex; align-items: center; gap: 16px; height: 96px; padding: 0 20px; background: #F7F8FA; border: 1px solid #EEF0F3; border-radius: 12px; } .cd-tile .ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: #07090F; flex: none; } .cd-tile b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 24px; } .cd-tile span { display: block; font-size: 13px; color: #3B4060; margin-top: 1px; } .cd-tile small { display: block; font-size: 12px; color: #6B7194; margin-top: 2px; }
.cd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 345px; gap: 16px; align-items: start; } .cd-left { display: grid; gap: 16px; min-width: 0; } .cd-two { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr); gap: 16px; align-items: start; } .cd-col { display: grid; gap: 16px; } .cd-right { display: grid; gap: 16px; }
.cd-card { background: #fff; border: 1px solid #E9EBF0; border-radius: 12px; padding: 14px 16px 16px; min-width: 0; } .cd-card.full { padding-bottom: 6px; } .cd-ch { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .cd-ch h3 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; margin: 0; } .co-sb { height: 30px; padding: 0 12px; font-size: 12.5px; font-weight: 500; gap: 6px; border-radius: 6px; background: #fff; border: 1px solid #E3E6ED; }
.cd-ir { display: grid; grid-template-columns: 16px 130px 1fr; align-items: center; gap: 12px; min-height: 32px; padding: 3px 0; border-top: 1px solid #F3F4F7; font-size: 13px; } .cd-ir:first-of-type { border-top: 0; } .cd-ir > svg { color: #6B7194; } .cd-ir span { color: #4A5070; } .cd-ir b { font-weight: 400; color: #07090F; word-break: break-word; } .cd-ir b em { color: #8B8FA6; font-style: normal; } .cd-ir b a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } .cd-ir b a svg { color: #4A5070; }
.cd-about { font-size: 13px; line-height: 20px; color: #3B4060; margin: 0; } .cd-about em { color: #8B8FA6; font-style: normal; }
.cd-notes { display: grid; gap: 10px; } .cd-note { background: #F7F8FA; border-radius: 8px; padding: 10px 12px; } .cd-note p { margin: 0 0 6px; font-size: 13px; line-height: 19px; color: #07090F; white-space: pre-wrap; } .cd-note small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #6B7194; } .cd-note small i { font-style: normal; } .cd-nx { margin-left: auto; border: 0; background: none; cursor: pointer; color: #8B8FA6; display: grid; place-items: center; padding: 2px; opacity: 0; } .cd-note:hover .cd-nx { opacity: 1; } .cd-notes.wide .cd-note { padding: 12px 14px; }
.cd-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: #07090F; text-decoration: none; font-weight: 500; }
.cd-table { width: 100%; border-collapse: collapse; margin-top: 2px; } .cd-table th { height: 32px; padding: 0 10px; text-align: left; font-size: 12.5px; font-weight: 500; color: #1B2140; background: #F4F5F7; white-space: nowrap; } .cd-table th.r, .cd-table td.r { text-align: right; } .cd-table td { height: 38px; padding: 2px 10px; font-size: 13px; color: #3B4060; border-top: 1px solid #F0F1F5; vertical-align: middle; } .cd-table td b { font-weight: 500; color: #07090F; } .cd-table tbody tr[data-cdlead] { cursor: pointer; } .cd-table tbody tr:hover td { background: #FAFAFC; } .cd-table .who { display: flex; align-items: center; gap: 10px; } .cd-table td a { color: inherit; }
.cd-st { display: inline-grid; place-items: center; height: 22px; padding: 0 9px; border-radius: 5px; font-size: 12px; background: #EBEBEC; color: #1B2140; white-space: nowrap; } .cd-st.prog { background: #E8EEFF; color: #2563EB; } .cd-st.book { background: #E6F6EC; color: #1E9E5A; } .cd-st.lost { background: #FEE2E2; color: #B91C1C; } .cd-st.open { background: #FFF4E0; color: #B45309; }
.cd-ct { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #F3F4F7; } .cd-ct:first-of-type { border-top: 0; } .cd-ct .co-av { width: 36px; height: 36px; font-size: 12.5px; } .cd-ct > div { flex: 1; min-width: 0; } .cd-ct b { display: block; font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cd-ct small { display: block; font-size: 12px; color: #6B7194; } .cd-ib { width: 28px; height: 28px; border: 0; background: none; border-radius: 6px; display: grid; place-items: center; color: #07090F; cursor: pointer; text-decoration: none; flex: none; } .cd-ib:hover { background: #F0F1F5; } .cd-ib.off { color: #C9CDD9; }
.cd-tags { display: flex; flex-wrap: wrap; gap: 8px; } .cd-tags .co-chip { border: 0; font: inherit; font-size: 12.5px; cursor: pointer; } .cd-tags .co-chip.dots { padding: 0 8px; } .co-chip.x { gap: 6px; display: inline-flex; align-items: center; } .co-chip.x button { border: 0; background: none; cursor: pointer; display: grid; place-items: center; color: #4A5070; padding: 0; }
.cd-sl { display: grid; grid-template-columns: 16px 76px 1fr 16px; align-items: center; gap: 12px; min-height: 34px; border-top: 1px solid #F3F4F7; font-size: 12.5px; } .cd-sl:first-of-type { border-top: 0; } .cd-sl > svg { color: #07090F; } .cd-sl span { color: #3B4060; } .cd-sl b { font-weight: 400; color: #4A5070; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cd-sl a { color: #07090F; display: grid; place-items: center; }
.cd-mut { font-size: 13px; color: #6B7194; margin: 0; } .cd-mut.pad { padding: 20px 0 14px; } .cd-mut .link { border: 0; background: none; color: #2563EB; cursor: pointer; font: inherit; padding: 0; }
.cd-acts2 { display: grid; } .cd-act { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #F3F4F7; } .cd-act:first-child { border-top: 0; } .cd-act .ico { width: 34px; height: 34px; border-radius: 8px; border: 1px solid #E9EBF0; display: grid; place-items: center; color: #07090F; flex: none; } .cd-act > div { flex: 1; min-width: 0; } .cd-act b { display: block; font-size: 13.5px; font-weight: 500; } .cd-act small { display: block; font-size: 12px; color: #6B7194; } .cd-act time { font-size: 12px; color: #4A5070; white-space: nowrap; } .cd-act time i { font-style: normal; margin-left: 10px; }
/* --- dialogs (.cm-*): Add Relationship, Archive Company, Merge Companies, small editors --- */
.cm-scrim { position: fixed; inset: 0; background: rgba(120, 122, 128, .55); z-index: 90; display: grid; place-items: center; padding: 20px; } .cm { background: #fff; border-radius: 14px; box-shadow: 0 30px 80px -30px rgba(11, 15, 30, .5); width: 100%; max-height: calc(100vh - 40px); display: flex; flex-direction: column; overflow: hidden; }
.cm.rel { max-width: 582px; } .cm.text { max-width: 520px; } .cm.arch { max-width: 450px; } .cm.merge.s1 { max-width: 750px; } .cm.merge.s2 { max-width: 1174px; } .cm.merge.s3 { max-width: 1094px; }
.cm-h { display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px 14px; flex: none; position: relative; } .cm-h h2 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 3px; } .cm-h p { font-size: 13px; color: #4A5A8A; margin: 0; } .cm-h.plain { padding: 20px 22px 4px; } .cm-ico { width: 40px; height: 40px; border-radius: 10px; background: #F4F5F7; display: grid; place-items: center; color: #07090F; flex: none; } .cm-ico.red { width: 48px; height: 48px; border-radius: 50%; background: #FEE2E2; color: #DC2626; } .cm-x { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border: 0; background: none; border-radius: 8px; cursor: pointer; display: grid; place-items: center; color: #07090F; } .cm-x:hover { background: #F1F1F4; }
.cm.rel .cm-h { align-items: center; padding-bottom: 10px; } .cm.rel .cm-ico { background: none; width: 30px; height: 30px; }
.cm-b { padding: 4px 22px 14px; overflow: auto; flex: 1; min-height: 0; } .cm-two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; margin-bottom: 8px; } .cm-l { display: block; font-size: 13px; font-weight: 500; margin: 8px 0 6px; } .cm-l i { color: #DC2626; font-style: normal; } .cm-l em { color: #6B7194; font-style: normal; font-weight: 400; } .cm-two .cm-l:first-child { margin-top: 0; }
.cm-types { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cm-types button { position: relative; text-align: left; border: 1px solid #E3E6ED; border-radius: 8px; background: #F7F8FA; padding: 11px 10px 11px 40px; cursor: pointer; font: inherit; min-height: 72px; } .cm-types button > svg { position: absolute; left: 13px; top: 13px; color: #07090F; } .cm-types button b { display: block; font-size: 12px; font-weight: 600; } .cm-types button small { display: block; font-size: 10.5px; color: #4A5A8A; line-height: 13px; margin-top: 3px; } .cm-types button .ck { position: absolute; top: 7px; right: 7px; color: #07090F; opacity: 0; } .cm-types button .ck svg { fill: #0B0B0F; stroke: #fff; } .cm-types button.on { border: 1.5px solid #0B0B0F; background: #fff; } .cm-types button.on .ck { opacity: 1; }
.co-in.date { position: relative; display: flex; align-items: center; gap: 10px; height: 38px; border: 1px solid #E3E6ED; border-radius: 8px; padding: 0 12px; background: #fff; font-size: 13px; } .co-in.date input { border: 0; background: none; font: inherit; font-size: 13px; width: 100%; outline: none; color: #07090F; } .co-in.date.pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .co-in.date .v { font-size: 13px; color: #07090F; } .co-in.date .v.ph { color: #8B8FA6; } .cm .co-in.sel { height: 38px; } .cm .co-in.sel select { font-size: 13px; }
.cm-tgl { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; } .cm-tgl b { display: block; font-size: 12.5px; font-weight: 600; } .cm-tgl small { display: block; font-size: 11px; color: #4A5A8A; margin-top: 2px; }
.cm-ta { width: 100%; min-height: 96px; border: 1px solid #E3E6ED; border-radius: 8px; padding: 10px 12px; font: inherit; font-size: 13px; resize: vertical; outline: none; } .cm-ta:focus { border-color: #0B0B0F; } .cm-ta.tall { min-height: 140px; } .cm-count { text-align: right; font-size: 11.5px; color: #6B7194; margin-top: 4px; }
.cm-f { display: flex; align-items: center; gap: 12px; padding: 14px 22px 22px; border-top: 1px solid #ECEEF3; flex: none; } .cm-f .cm-sp { flex: 1; } .cm-f .co-btn { height: 44px; padding: 0 22px; } .cm-f .co-btn.wide { padding: 0 24px; } .cm-f.tight { padding: 8px 22px 18px; border-top: 0; } .co-btn.sm { height: 38px; padding: 0 18px; font-size: 13.5px; } .co-btn.red { background: #DC2626; border-color: #DC2626; color: #fff; gap: 8px; } .co-btn.red:disabled { opacity: .45; cursor: default; } .co-btn.ghost.danger { border-color: transparent; color: #DC2626; }
.cm-ah { display: flex; align-items: flex-start; gap: 14px; padding: 22px 22px 8px; position: relative; } .cm-ah h2 { font-size: 18px; font-weight: 700; letter-spacing: -.02em; margin: 6px 0 4px; } .cm-ah p { font-size: 12.5px; line-height: 18px; color: #3B4060; margin: 0; }
.cm-warn { display: flex; align-items: center; gap: 10px; margin: 8px 22px 12px; padding: 10px 12px; background: #FEF2F2; border-radius: 8px; font-size: 12px; line-height: 16px; color: #3B4060; } .cm-warn svg { color: #DC2626; flex: none; }
.cm-ck { display: flex; align-items: flex-start; gap: 10px; margin: 0 22px 6px; font-size: 12px; line-height: 16px; color: #3B4060; cursor: pointer; } .cm-ck input { margin: 1px 0 0; accent-color: #0B0B0F; }
/* merge */
.cm-mb { display: flex; flex: 1; min-height: 0; overflow: hidden; } .cm-rail { width: 220px; flex: none; padding: 16px 16px 16px 20px; border-right: 1px solid #ECEEF3; display: flex; flex-direction: column; gap: 4px; background: #fff; } .cm.s2 .cm-rail, .cm.s3 .cm-rail { width: 266px; } .cm-rs { display: flex; align-items: flex-start; gap: 12px; padding: 12px 10px; border-radius: 8px; } .cm-rs.on { background: #F4F5F7; } .cm-rs .n { width: 28px; height: 28px; border-radius: 50%; background: #F0F1F5; color: #4A5070; display: grid; place-items: center; font-size: 13px; font-weight: 600; flex: none; } .cm-rs.on .n { background: #0B0B0F; color: #fff; } .cm-rs.done .n { background: #E6F6EC; color: #1E9E5A; } .cm-rs b { display: block; font-size: 13.5px; font-weight: 600; margin-top: 4px; } .cm-rs small { display: block; font-size: 11.5px; color: #4A5A8A; margin-top: 3px; } .cm-info { margin-top: auto; display: flex; gap: 10px; align-items: flex-start; padding: 12px; background: #EEF2FF; border-radius: 8px; font-size: 11.5px; line-height: 15px; color: #3B4060; } .cm-info svg { color: #2563EB; flex: none; margin-top: 1px; }
.cm-main { flex: 1; min-width: 0; overflow: auto; padding: 18px 22px 20px; } .cm-main h3 { font-size: 16px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 4px; } .cm-main > p, .cm-rh p { font-size: 12.5px; color: #4A5A8A; margin: 0 0 14px; line-height: 17px; } .cm-main h4 { font-size: 14px; font-weight: 700; margin: 18px 0 10px; }
.cm-pair { display: grid; grid-template-columns: 1fr 24px 1fr; gap: 10px; align-items: stretch; margin-bottom: 12px; } .cm-pair .arr { display: grid; place-items: center; color: #8B8FA6; } .cm-mc { border: 1px solid #E3E6ED; border-radius: 10px; padding: 12px; background: #fff; } .cm-mc.p { border-color: #C9CDD9; } .cm-mc.empty { display: grid; place-content: center; text-align: center; color: #6B7194; font-size: 12px; } .cm-mc.empty b { display: block; color: #07090F; font-size: 13px; margin-bottom: 4px; } .cm-radio { display: inline-flex; align-items: center; gap: 8px; height: 22px; padding: 0 10px 0 6px; border-radius: 6px; background: #F4F5F7; font-size: 11px; color: #3B4060; } .cm-radio::before { content: ''; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #8B8FA6; box-sizing: border-box; } .cm-radio.on { background: #E8EEFF; color: #2563EB; } .cm-radio.on::before { border: 4px solid #2563EB; } .cm-mc .who { display: flex; align-items: center; gap: 10px; margin: 12px 0 10px; } .co-av.box { border-radius: 8px; width: 36px; height: 36px; font-family: var(--serif, Georgia); font-weight: 400; font-size: 15px; } .cm-mc .who b { display: block; font-size: 14px; font-weight: 700; } .cm-mc .who small { display: block; font-size: 12px; color: #4A5A8A; } .cm-mc .ls { display: grid; gap: 6px; } .cm-mc .ls span { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #3B4060; } .cm-mc .ls svg { color: #4A5070; flex: none; }
.cm-change { width: 100%; border: 1px solid #E3E6ED; border-radius: 10px; background: #fff; padding: 12px; text-align: center; cursor: pointer; font: inherit; } .cm-change b { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; } .cm-change small { display: block; font-size: 11.5px; color: #4A5A8A; margin-top: 3px; } .cm-change.open { text-align: left; cursor: default; } .cm-change.open .co-search { width: 100%; height: 36px; } .cm-hits { display: grid; margin-top: 6px; } .cm-hits button { display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; align-items: center; text-align: left; border: 0; background: none; border-radius: 8px; padding: 6px 8px; cursor: pointer; font: inherit; } .cm-hits button:hover { background: #F4F5F7; } .cm-hits b { grid-column: 2; font-size: 13px; font-weight: 500; } .cm-hits small { grid-column: 2; font-size: 11.5px; color: #6B7194; } .cm-hits .co-av { grid-row: 1 / 3; }
.cm-swap { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; border: 0; background: none; color: #2563EB; font: inherit; font-size: 12.5px; cursor: pointer; padding: 0; } .cm-swap:disabled { color: #B4B9C9; cursor: default; }
.cm-rh { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; } .cm-yellow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #FFF8E6; border-radius: 8px; font-size: 11.5px; line-height: 15px; color: #3B4060; flex: none; max-width: 310px; } .cm-yellow svg { color: #B45309; flex: none; }
.cm-pair2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 14px; } .cm-rc { border: 1px solid #E3E6ED; border-radius: 10px; padding: 12px 14px 14px; } .cm-tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 10px; border-radius: 6px; font-size: 11px; font-weight: 500; } .cm-tag.green { background: #E6F6EC; color: #1E9E5A; } .cm-tag.grey { background: #F0F1F5; color: #3B4060; } .cm-rc .who { display: flex; gap: 14px; margin-top: 10px; } .cm-rc .who b { display: block; font-size: 15px; font-weight: 700; } .cm-rc .who small { display: block; font-size: 12px; color: #4A5A8A; margin: 2px 0 6px; } .cm-rc .who > div > span { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #3B4060; margin-top: 4px; } .cm-rc .who > div > span svg { color: #4A5070; }
.cm-ft { width: 100%; border-collapse: collapse; border: 1px solid #E3E6ED; border-radius: 8px; overflow: hidden; } .cm-ft th { height: 34px; background: #F4F5F7; font-size: 12.5px; font-weight: 600; text-align: left; padding: 0 12px; } .cm-ft th.k { background: #E6F6EC; } .cm-ft th button { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 0; } .cm-ft th .cm-radio { padding: 0; background: none; height: auto; } .cm-ft td { border-top: 1px solid #ECEEF3; font-size: 12.5px; padding: 0 12px; height: 34px; color: #3B4060; } .cm-ft td:first-child { display: flex; align-items: center; gap: 10px; height: 34px; color: #3B4060; } .cm-ft td:first-child svg { color: #4A5070; } .cm-ft td button { width: 100%; text-align: left; border: 0; background: none; font: inherit; font-size: 12.5px; color: #3B4060; cursor: pointer; padding: 0; height: 34px; } .cm-ft td.on { background: #F1FAF4; } .cm-ft td.on button { color: #1E9E5A; font-weight: 500; } .cm-ft td em { color: #8B8FA6; font-style: normal; }
.cm-rel { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; } .cm-rd { display: flex; align-items: center; gap: 10px; border: 1px solid #E3E6ED; border-radius: 8px; padding: 10px; } .cm-rd .ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; } .cm-rd .ico.c1 { background: #EEF2FF; color: #2563EB; } .cm-rd .ico.c2 { background: #E6F6EC; color: #1E9E5A; } .cm-rd .ico.c3 { background: #FFF4E0; color: #B45309; } .cm-rd .ico.c4 { background: #FEF2F2; color: #DC2626; } .cm-rd .ico.c5 { background: #F3E8FF; color: #7C3AED; } .cm-rd .ico.c6 { background: #E0F2FE; color: #0284C7; } .cm-rd b { display: block; font-size: 12px; font-weight: 600; } .cm-rd small { display: block; font-size: 11px; color: #6B7194; }
.cm-main.done { padding: 22px 26px 22px; } .cm-conf { position: relative; height: 130px; display: grid; place-items: center; margin-bottom: 6px; } .cm-conf .big { width: 96px; height: 96px; border-radius: 50%; background: #E6F6EC; color: #1E9E5A; display: grid; place-items: center; } .cm-conf i { position: absolute; width: 8px; height: 14px; border-radius: 2px; opacity: .9; animation: cmconf 1.2s ease-out both; } .cm-conf i:nth-child(1) { left: 22%; top: 20%; background: #22C55E; transform: rotate(20deg); } .cm-conf i:nth-child(2) { left: 30%; top: 60%; background: #7C3AED; transform: rotate(-30deg); } .cm-conf i:nth-child(3) { left: 38%; top: 12%; background: #F59E0B; transform: rotate(45deg); } .cm-conf i:nth-child(4) { left: 26%; top: 42%; background: #2563EB; transform: rotate(10deg); } .cm-conf i:nth-child(5) { left: 60%; top: 8%; background: #7C3AED; transform: rotate(-20deg); } .cm-conf i:nth-child(6) { left: 68%; top: 30%; background: #2563EB; transform: rotate(30deg); } .cm-conf i:nth-child(7) { left: 76%; top: 60%; background: #22C55E; transform: rotate(-40deg); } .cm-conf i:nth-child(8) { left: 64%; top: 72%; background: #F59E0B; transform: rotate(15deg); } .cm-conf i:nth-child(9) { left: 18%; top: 78%; background: #F59E0B; transform: rotate(-15deg); } .cm-conf i:nth-child(10) { left: 82%; top: 22%; background: #22C55E; transform: rotate(50deg); } .cm-conf i:nth-child(11) { left: 44%; top: 82%; background: #2563EB; transform: rotate(-5deg); } .cm-conf i:nth-child(12) { left: 56%; top: 88%; background: #7C3AED; transform: rotate(25deg); } @keyframes cmconf { from { opacity: 0; translate: 0 -30px; } to { opacity: .9; translate: 0 0; } } @media (prefers-reduced-motion: reduce) { .cm-conf i { animation: none; } }
.cm-main h3.c { text-align: center; font-size: 22px; margin: 0 0 4px; } .cm-main p.c { text-align: center; font-size: 13.5px; margin-bottom: 18px; }
.cm-res { display: flex; gap: 18px; border: 1px solid #E3E6ED; border-radius: 10px; padding: 14px; margin-bottom: 14px; } .cm-res > div { flex: 1; min-width: 0; } .cm-res > div > b { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; } .cm-res > div > small { display: block; font-size: 12.5px; color: #4A5A8A; margin: 4px 0 12px; } .cm-nums { display: grid; grid-template-columns: repeat(4, 1fr); } .cm-nums > div { display: flex; align-items: center; gap: 8px; padding: 0 14px; border-left: 1px solid #ECEEF3; } .cm-nums > div:first-child { border-left: 0; padding-left: 0; } .cm-nums svg { color: #07090F; } .cm-nums b { display: block; font-size: 14px; font-weight: 700; } .cm-nums small { display: block; font-size: 11px; color: #6B7194; }
.cm-green { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: #F1FAF4; border: 1px solid #D7F0E0; border-radius: 8px; margin-bottom: 14px; } .cm-green svg { color: #1E9E5A; flex: none; } .cm-green b { display: block; font-size: 13px; font-weight: 600; } .cm-green small { display: block; font-size: 12px; color: #3B4060; margin-top: 2px; }
.cm-cta { display: flex; gap: 12px; margin-bottom: 18px; } .cm-cta .co-btn { height: 40px; padding: 0 18px; gap: 10px; text-decoration: none; }
.cm-next { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #F7F8FA; border-radius: 8px; } .cm-next .ico { width: 30px; height: 30px; border-radius: 50%; background: #F3E8FF; color: #7C3AED; display: grid; place-items: center; flex: none; } .cm-next b { font-size: 13px; flex: none; margin-right: 6px; } .cm-next ul { margin: 0; padding-left: 18px; font-size: 12px; line-height: 18px; color: #3B4060; }
@media (max-width: 1100px) { .cd-grid { grid-template-columns: 1fr; } .cd-tiles { grid-template-columns: 1fr 1fr; } .cm-rel { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .cd-two { grid-template-columns: 1fr; } .cd-card { overflow-x: auto; } .cd-table { min-width: 640px; } .cd-head { flex-wrap: wrap; } .cd-acts { width: 100%; } .cd-tabs { overflow-x: auto; } .cm-two { grid-template-columns: 1fr; } .cm-mb { flex-direction: column; overflow: auto; } .cm-rail { width: auto !important; border-right: 0; border-bottom: 1px solid #ECEEF3; flex-direction: row; overflow-x: auto; } .cm-rs { min-width: 180px; } .cm-info { display: none; } .cm-pair { grid-template-columns: 1fr; } .cm-pair .arr { transform: rotate(90deg); } .cm-pair2 { grid-template-columns: 1fr; } .cm-rh { flex-direction: column; } .cm-yellow { max-width: none; } .cm-nums { grid-template-columns: 1fr 1fr; gap: 8px; } .cm-nums > div { border: 0; padding: 0; } .cm-cta { flex-direction: column; } .cm-next { flex-direction: column; align-items: flex-start; } .cd-tiles.three { grid-template-columns: 1fr; } }