/* ============================================================================
   rv.css — Roviqo, the 2026 look: cream paper, white cards, a charcoal rail,
   one gold. Loaded last; it re-tokens the app and dresses the new screens.
   ============================================================================ */
:root, :root[data-theme="light"] {
  --bg: #F5F3EE; --bg-2: #ECE8E0; --card: #FFFFFF; --card-2: #FAF8F4;
  --line: rgba(30, 27, 22, .08); --line-2: rgba(30, 27, 22, .14); --line-3: rgba(184, 150, 90, .55);
  --ink: #1E1B16; --ink-2: #5C5449; --ink-3: #8A8073;
  --field: #FFFFFF; --field-line: rgba(30, 27, 22, .16);
  --blue: #B8965A; --violet: #8C6A3A; --cyan: #0E7490; --green: #1E9E5A; --amber: #C98A1C; --red: #D2394F; --pink: #C2255C;
  --grad: linear-gradient(135deg, #C4A06A 0%, #A8844C 100%);
  --hover: rgba(30, 27, 22, .045); --tint: rgba(184, 150, 90, .12);
  --glass: rgba(255, 255, 255, .92); --scrim: rgba(30, 27, 22, .45); --shadow-c: rgba(30, 27, 22, .16);
  --radius: 14px; --gold: #B8965A; --gold-deep: #8C6A3A;
  color-scheme: light;
}
:root[data-theme="dark"] { --gold: #C4A06A; --gold-deep: #A8844C; }
body { font-size: 13.5px; }

/* ---------- the rail: charcoal, always ---------- */
.rail { background: #1A1714; border-right: 0; color: #E9E2D6; padding: 18px 12px; gap: 2px; }
.rail .logo { padding: 2px 8px 16px; } .rail .logo-q { display: none; }
.rail .logo-w { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 30px; font-weight: 500; letter-spacing: .01em; color: #F3EBDD; text-transform: lowercase; }
.rail .logo-w b { background: none; -webkit-text-fill-color: #C4A06A; color: #C4A06A; font-weight: 500; }
.rail .logo-sub { color: #8F857A; font-size: 8px; letter-spacing: .12em; text-transform: none; }
.rail .nav-l { color: #CFC6B8; padding: 9px 12px; border-radius: 10px; font-size: 13px; font-weight: 500; }
.rail .nav-l svg { opacity: .8; }
.rail .nav-l:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.rail .nav-l.on { background: #2A2520; color: #F3EBDD; box-shadow: none; border-left: 3px solid #C4A06A; padding-left: 9px; }
.rail .nav-l.on svg { color: #C4A06A; opacity: 1; }
.rail .rail-sec { display: none; }
.rail .nav-badge { background: rgba(196, 160, 106, .22); color: #E9DCC4; }
.rail .nav-caret { margin-left: auto; color: #8F857A; }
.rail .nav-sub { padding-left: 14px; }
.rail .nav-sub a { color: #B5AB9C; padding: 7px 10px 7px 26px; border-radius: 8px; font-size: 12.5px; }
.rail .nav-sub a:hover, .rail .nav-sub a.on { color: #F3EBDD; background: rgba(255, 255, 255, .06); }
.rail .nav-sub a.on { background: #2A2520; }
.rail .nav-sub a i { display: none; }
.rail .nav-g { display: none; padding-left: 0; } .rail .nav-g.open { display: block; }
.rail .nav-g a { display: block; }
.rail .upgrade { background: #221E1A; border-color: rgba(255, 255, 255, .06); color: #E9E2D6; }
.rail .upgrade p { color: #B5AB9C; }
.rail .rail-me { border-top-color: rgba(255, 255, 255, .08); } .rail .rail-me .who span { color: #8F857A; }
.rail .biz, .rail #bizSwitch .card { background: #221E1A; border-color: rgba(255, 255, 255, .06); color: #E9E2D6; }
.rail .rail-tag { margin: auto 0 0; background: linear-gradient(160deg, #2A2520, #14110E); border: 1px solid rgba(196, 160, 106, .25); border-radius: 12px; padding: 18px 14px; }
.rail .rail-tag b { display: block; font-size: 15px; line-height: 1.3; color: #F3EBDD; font-weight: 600; }
.rail .rail-tag i { display: block; width: 28px; height: 2px; background: #C4A06A; margin-top: 12px; }
.rail .rail-ver { font-size: 10px; color: #6F665C; padding: 10px 8px 0; }

/* ---------- top bar ---------- */
.top { padding: 14px 0 18px; }
.search { background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgba(30, 27, 22, .04); }
.icon-btn { background: var(--card); border-color: var(--line); }
.icon-btn.grad { background: var(--gold); color: #fff; }
.me { background: var(--card); border-color: var(--line); }
.avatar { background: linear-gradient(135deg, #C4A06A, #8C6A3A); }
.avatar.g2 { background: linear-gradient(135deg, #6B5B95, #8C6A3A); } .avatar.g3 { background: linear-gradient(135deg, #9C7B49, #5C5449); }
.avatar.g4 { background: linear-gradient(135deg, #B8965A, #C98A1C); } .avatar.g5 { background: linear-gradient(135deg, #1E9E5A, #0E7490); }

/* ---------- cards, buttons, pills ---------- */
.card { border-color: var(--line); box-shadow: 0 1px 2px rgba(30, 27, 22, .03); }
.btn.primary { background: var(--gold); box-shadow: 0 6px 16px -8px rgba(140, 106, 58, .6); }
.btn.primary:hover { background: #A8844C; }
.nav-l.on .nav-badge { background: rgba(196, 160, 106, .3); }
.pill.ok { background: #E6F5EC; color: #1E7A47; border-color: transparent; } .pill.trial { background: #E8F0FA; color: #2B5BA8; border-color: transparent; } .pill.off { background: #F0EDE7; color: #6B6357; }
.kpi { border-color: var(--line); }
.kpi-ic { background: var(--tint) !important; color: var(--gold-deep); }

/* ---------- the new screens: page head with breadcrumb, KPI tiles, tables ---------- */
.rv-crumb { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); margin-bottom: 8px; }
.rv-crumb a { color: var(--ink-3); } .rv-crumb a:hover { color: var(--ink); } .rv-crumb b { color: var(--ink-2); font-weight: 500; }
.rv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.rv-head h1 { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.rv-head .sub { color: var(--ink-2); font-size: 13.5px; margin-top: 4px; }
.rv-head .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.rv-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 16px; }
.rv-tile { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.rv-tile .ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: none; background: var(--tint); color: var(--gold-deep); }
.rv-tile .ic svg { width: 19px; height: 19px; }
.rv-tile .ic.green { background: #E6F5EC; color: #1E7A47; } .rv-tile .ic.blue { background: #E8F0FA; color: #2B5BA8; } .rv-tile .ic.red { background: #FBE9EC; color: #C0304A; } .rv-tile .ic.violet { background: #EFE9F7; color: #6B4FA0; } .rv-tile .ic.amber { background: #FBF1DE; color: #A8711A; }
.rv-tile .l { font-size: 12px; color: var(--ink-2); }
.rv-tile .v { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin-top: 2px; font-variant-numeric: tabular-nums; }
.rv-tile .d { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; } .rv-tile .d.up { color: #1E7A47; } .rv-tile .d.down { color: #C0304A; }
@media (max-width: 1300px) { .rv-tiles { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px) { .rv-tiles { grid-template-columns: 1fr 1fr; } }
.rv-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.rv-chip { border: 1px solid var(--line); background: var(--card); color: var(--ink-2); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
.rv-chip b { font-weight: 600; color: var(--ink-3); margin-left: 5px; }
.rv-chip.on { background: var(--gold); border-color: var(--gold); color: #fff; } .rv-chip.on b { color: rgba(255, 255, 255, .8); }
.rv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rv-table th { text-align: left; font-size: 11px; letter-spacing: .04em; color: var(--ink-3); font-weight: 600; padding: 10px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rv-table td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.rv-table tr:last-child td { border-bottom: 0; } .rv-table tr.clicky { cursor: pointer; } .rv-table tr.clicky:hover td { background: var(--card-2); }
.rv-table .th { width: 56px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--bg-2); display: block; }
.rv-table .who { display: flex; gap: 10px; align-items: center; } .rv-table .who b { display: block; font-size: 13.5px; } .rv-table .who small { color: var(--ink-3); font-size: 11.5px; }
.rv-tag { display: inline-block; padding: 3px 9px; border-radius: 6px; font-size: 11.5px; font-weight: 600; background: var(--bg-2); color: var(--ink-2); white-space: nowrap; }
.rv-tag.red { background: #FBE9EC; color: #C0304A; } .rv-tag.green { background: #E6F5EC; color: #1E7A47; } .rv-tag.blue { background: #E8F0FA; color: #2B5BA8; } .rv-tag.violet { background: #EFE9F7; color: #6B4FA0; } .rv-tag.amber { background: #FBF1DE; color: #A8711A; } .rv-tag.gold { background: var(--tint); color: var(--gold-deep); } .rv-tag.grey { background: #F0EDE7; color: #6B6357; }
.rv-bar { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; } .rv-bar i { display: block; width: 90px; height: 6px; border-radius: 999px; background: var(--bg-2); overflow: hidden; } .rv-bar i b { display: block; height: 100%; background: #1E9E5A; border-radius: 999px; }
.rv-bar.gold i b { background: var(--gold); }
.rv-faces { display: inline-flex; } .rv-faces .avatar { width: 26px; height: 26px; font-size: 10px; margin-left: -8px; border: 2px solid var(--card); } .rv-faces .avatar:first-child { margin-left: 0; } .rv-faces small { align-self: center; margin-left: 4px; color: var(--ink-3); font-size: 11px; }
.rv-empty { padding: 34px 20px; text-align: center; color: var(--ink-3); font-size: 13px; } .rv-empty b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 4px; }
.rv-seg { display: inline-flex; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; }
.rv-seg button { border: 0; background: none; padding: 6px 12px; border-radius: 8px; font: inherit; font-size: 12px; color: var(--ink-2); cursor: pointer; } .rv-seg button.on { background: var(--bg-2); color: var(--ink); font-weight: 600; }
.rv-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.rv-toolbar .search { flex: 1; min-width: 200px; max-width: 340px; padding: 7px 12px; }
.rv-toolbar select { background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; color: var(--ink); font: inherit; font-size: 12.5px; }

/* ---------- the project workspace ---------- */
.pw-head { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.pw-head .cover { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; background: var(--bg-2); flex: none; }
.pw-head .cover.ph { display: grid; place-items: center; font-family: 'Cormorant Garamond', serif; font-size: 26px; color: var(--gold-deep); background: var(--tint); }
.pw-head h1 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; display: inline; margin-right: 10px; }
.pw-head .sub { color: var(--ink-2); font-size: 13.5px; margin-top: 4px; }
.pw-head .acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.pw-tabs { display: flex; gap: 2px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 4px; margin-bottom: 16px; overflow-x: auto; }
.pw-tabs a { padding: 8px 14px; border-radius: 9px; font-size: 13px; color: var(--ink-2); white-space: nowrap; font-weight: 500; }
.pw-tabs a.on { background: var(--tint); color: var(--gold-deep); font-weight: 600; box-shadow: inset 0 -2px 0 var(--gold); }
.pw-tabs a:hover { color: var(--ink); }
.pw-grid { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .pw-grid { grid-template-columns: 1fr; } }
.pw-side .card { margin-bottom: 12px; } .pw-side .kvrow { font-size: 12.5px; } .pw-side .kvrow b { text-align: right; }
.pw-side .hero { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; display: block; margin-bottom: 12px; background: var(--bg-2); }
.pw-sec-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.pw-sec-h h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; } .pw-sec-h .sub { color: var(--ink-2); font-size: 13px; margin-top: 2px; }
.pw-qa { display: grid; gap: 6px; } .pw-qa button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--card-2); border-radius: 9px; padding: 9px 11px; font: inherit; font-size: 12.5px; color: var(--ink); cursor: pointer; } .pw-qa button:hover { border-color: var(--line-2); } .pw-qa button svg { width: 15px; height: 15px; color: var(--gold-deep); }

/* moodboard & files grids */
.mb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.mb-card { position: relative; border-radius: 12px; overflow: hidden; background: var(--bg-2); aspect-ratio: 1; cursor: pointer; border: 2px solid transparent; }
.mb-card.on { border-color: var(--gold); }
.mb-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; } .mb-card:hover img { transform: scale(1.03); }
.mb-card .tags { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 4px; flex-wrap: wrap; }
.mb-card .tags span { background: rgba(20, 17, 14, .75); color: #fff; font-size: 10.5px; padding: 3px 8px; border-radius: 6px; } .mb-card .tags span.must { background: #D2394F; }
.mb-card .fav { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; background: rgba(20, 17, 14, .55); color: #fff; display: grid; place-items: center; border: 0; cursor: pointer; } .mb-card .fav.on { color: #FF6B8B; }
.mb-add { border: 2px dashed var(--line-2); border-radius: 12px; display: grid; place-items: center; aspect-ratio: 1; color: var(--ink-3); cursor: pointer; font-size: 12.5px; text-align: center; padding: 12px; } .mb-add:hover { border-color: var(--gold); color: var(--gold-deep); }
.fl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.fl-card { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card); cursor: pointer; }
.fl-card.on { border-color: var(--gold); box-shadow: 0 0 0 2px var(--tint); }
.fl-card .pv { aspect-ratio: 4/3; background: var(--bg-2); display: grid; place-items: center; color: var(--ink-3); overflow: hidden; } .fl-card .pv img, .fl-card .pv video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fl-card .pv .ext { font-size: 11px; font-weight: 700; letter-spacing: .1em; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.fl-card .nm { padding: 8px 10px; font-size: 12px; } .fl-card .nm b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fl-card .nm small { color: var(--ink-3); }
.fl-folders { display: grid; gap: 2px; } .fl-folders button { display: flex; justify-content: space-between; width: 100%; border: 0; background: none; padding: 8px 10px; border-radius: 8px; font: inherit; font-size: 12.5px; color: var(--ink-2); cursor: pointer; text-align: left; } .fl-folders button.on, .fl-folders button:hover { background: var(--tint); color: var(--gold-deep); } .fl-folders button small { color: var(--ink-3); }
.fl-side { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: start; } @media (max-width: 900px) { .fl-side { grid-template-columns: 1fr; } }

/* notes */
.nt-wrap { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; } @media (max-width: 900px) { .nt-wrap { grid-template-columns: 1fr; } }
.nt-item { display: flex; gap: 10px; padding: 12px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; }
.nt-item:hover { background: var(--card-2); } .nt-item.on { background: var(--tint); border-color: var(--line); }
.nt-item .ic { width: 32px; height: 32px; border-radius: 8px; background: var(--bg-2); display: grid; place-items: center; flex: none; color: var(--gold-deep); }
.nt-item b { display: block; font-size: 13px; } .nt-item p { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.nt-item small { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.nt-body { min-height: 260px; }
.nt-body textarea { width: 100%; min-height: 260px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 14px; line-height: 1.7; outline: none; resize: vertical; }
.nt-body input.t { width: 100%; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 20px; font-weight: 700; outline: none; margin-bottom: 8px; }

/* timeline (crew rows × hours) */
.tl-wrap { overflow-x: auto; } .tl { min-width: 900px; display: grid; grid-template-columns: 170px 1fr; }
.tl .rowh { padding: 10px 12px; border-top: 1px solid var(--line); display: flex; gap: 10px; align-items: center; font-size: 12.5px; } .tl .rowh b { display: block; } .tl .rowh small { color: var(--ink-3); display: block; }
.tl .lane { position: relative; border-top: 1px solid var(--line); height: 58px; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / 18 - 1px), var(--line) calc(100% / 18 - 1px), var(--line) calc(100% / 18)); }
.tl .hours { display: flex; font-size: 10.5px; color: var(--ink-3); } .tl .hours span { flex: 1; padding: 6px 0 6px 6px; border-left: 1px solid var(--line); }
.tl .blk { position: absolute; top: 8px; height: 42px; border-radius: 8px; padding: 5px 9px; font-size: 11.5px; overflow: hidden; cursor: pointer; border: 1px solid rgba(0, 0, 0, .06); }
.tl .blk b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tl .blk span { font-size: 10.5px; opacity: .8; }
.tl .blk.c0 { background: #E8F0FA; color: #2B5BA8; } .tl .blk.c1 { background: #E6F5EC; color: #1E7A47; } .tl .blk.c2 { background: #EFE9F7; color: #6B4FA0; } .tl .blk.c3 { background: #FBE9EC; color: #C0304A; } .tl .blk.c4 { background: #FBF1DE; color: #A8711A; } .tl .blk.c5 { background: #FCE7EE; color: #B0326B; }
.tl .now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--gold); }

/* dashboard v2 */
.dv-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 14px; margin-bottom: 14px; } @media (max-width: 1200px) { .dv-grid { grid-template-columns: 1fr; } }
.dv-ev { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); } .dv-ev:last-child { border-bottom: 0; }
.dv-ev .d { width: 46px; text-align: center; flex: none; } .dv-ev .d small { display: block; font-size: 9.5px; letter-spacing: .12em; color: var(--ink-3); text-transform: uppercase; } .dv-ev .d b { display: block; font-size: 20px; line-height: 1.1; } .dv-ev .d i { font-style: normal; font-size: 10.5px; color: var(--ink-3); }
.dv-ev .t { flex: 1; min-width: 0; border-left: 3px solid var(--gold); padding-left: 10px; } .dv-ev .t b { display: block; font-size: 13px; } .dv-ev .t span { display: block; font-size: 11.5px; color: var(--ink-3); }
.dv-ev .in { font-size: 11px; background: var(--tint); color: var(--gold-deep); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.dv-feat { position: relative; border-radius: 14px; overflow: hidden; min-height: 300px; background: #1A1714; color: #fff; display: flex; align-items: flex-end; padding: 22px; }
.dv-feat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; } .dv-feat::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(20, 17, 14, .9)); }
.dv-feat > div { position: relative; z-index: 1; } .dv-feat h3 { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 30px; line-height: 1.1; } .dv-feat p { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; opacity: .85; margin: 6px 0 12px; }
.dv-funnel { display: grid; gap: 6px; } .dv-funnel div { display: grid; grid-template-columns: 96px 1fr 30px; gap: 8px; align-items: center; font-size: 12px; } .dv-funnel i { display: block; height: 18px; background: var(--gold); border-radius: 4px; opacity: .9; } .dv-funnel b { text-align: right; font-variant-numeric: tabular-nums; }
.dv-task { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; } .dv-task:last-child { border-bottom: 0; } .dv-task i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line-2); flex: none; } .dv-task i.late { border-color: var(--red); } .dv-task span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dv-task small { color: var(--ink-3); white-space: nowrap; }
.dv-mods { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; } @media (max-width: 1100px) { .dv-mods { grid-template-columns: repeat(4, 1fr); } }
.dv-mod { border: 1px solid var(--line); border-radius: 12px; padding: 16px 10px; text-align: center; font-size: 12px; color: var(--ink-2); background: var(--card); display: block; } .dv-mod:hover { border-color: var(--gold); color: var(--ink); } .dv-mod svg { width: 22px; height: 22px; color: var(--gold-deep); display: block; margin: 0 auto 8px; } .dv-mod.on { border-color: var(--gold); background: var(--tint); color: var(--gold-deep); }
.dv-bottom { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 14px; } @media (max-width: 1200px) { .dv-bottom { grid-template-columns: 1fr; } }
.dv-team { display: flex; gap: 14px; flex-wrap: wrap; } .dv-team div { text-align: center; font-size: 11.5px; width: 78px; } .dv-team .avatar { width: 46px; height: 46px; font-size: 15px; margin: 0 auto 6px; } .dv-team b { display: block; font-size: 12px; } .dv-team small { display: block; color: var(--ink-3); } .dv-team em { display: inline-block; font-style: normal; font-size: 10.5px; margin-top: 4px; } .dv-team em::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #1E9E5A; margin-right: 4px; } .dv-team em.busy::before { background: #C98A1C; }
.dv-act { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; align-items: flex-start; } .dv-act:last-child { border-bottom: 0; } .dv-act i { width: 24px; height: 24px; border-radius: 7px; background: var(--tint); flex: none; display: grid; place-items: center; color: var(--gold-deep); } .dv-act i svg { width: 13px; height: 13px; } .dv-act span { flex: 1; } .dv-act small { color: var(--ink-3); white-space: nowrap; }
.dv-promo { background: #1A1714 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Ccircle cx='170' cy='40' r='90' fill='%23C4A06A' fill-opacity='.12'/%3E%3C/svg%3E") no-repeat right top; color: #F3EBDD; border-radius: 14px; padding: 24px; display: flex; flex-direction: column; justify-content: center; }
.dv-promo h3 { font-size: 22px; font-weight: 700; line-height: 1.2; } .dv-promo p { color: #B5AB9C; font-size: 12.5px; margin: 6px 0 14px; }
.dv-donut { display: flex; gap: 18px; align-items: center; } .dv-donut ul { list-style: none; font-size: 12.5px; display: grid; gap: 8px; flex: 1; } .dv-donut li { display: flex; justify-content: space-between; } .dv-donut li i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; }
.dv-greet { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.dv-greet h1 { font-size: 30px; font-weight: 700; letter-spacing: -.02em; } .dv-greet p { color: var(--ink-2); font-size: 14px; margin-top: 4px; }
.dv-greet .q { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 16px; color: var(--ink-2); text-align: right; max-width: 260px; }

/* ---------- the top bar, as drawn: "+ New", the bell, the person ---------- */
.top .icon-btn.grad { width: auto; padding: 0 16px; border-radius: 10px; font-weight: 600; font-size: 13px; height: 38px; }
.top #themeBtn { display: none; }
.top .me { padding: 5px 10px 5px 6px; border-radius: 12px; }
.top .me .who span { font-size: 11px; }
.rail .rail-tag { background: radial-gradient(120px 90px at 110% 10%, rgba(196, 160, 106, .35), transparent 70%), linear-gradient(160deg, #2A2520, #14110E); }

/* ---------- KPI tiles the dashboard way: icon and label on one line, the number under ---------- */
.rv-tile.dash { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; align-items: center; }
.rv-tile.dash .ic { grid-row: 1; width: 38px; height: 38px; }
.rv-tile.dash .l { grid-column: 2; font-size: 13px; color: var(--ink-2); }
.rv-tile.dash .v { grid-column: 1 / -1; font-size: 30px; margin-top: 8px; }
.rv-tile.dash .d { grid-column: 1 / -1; font-size: 12px; font-weight: 600; }
.rv-tile.dash .d span { font-weight: 400; color: var(--ink-3); }
.rv-datebtn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 9px 14px; font-size: 13px; color: var(--ink); }

/* ---------- dashboard rows as drawn: four across, then modules + promo, then three ---------- */
.dv-grid { grid-template-columns: 1.35fr 1fr 0.95fr 0.95fr; }
.dv-grid.two { grid-template-columns: 2.9fr 1.1fr; }
@media (max-width: 1300px) { .dv-grid, .dv-grid.two { grid-template-columns: 1fr 1fr; } } @media (max-width: 800px) { .dv-grid, .dv-grid.two { grid-template-columns: 1fr; } }
.dv-funnel div { grid-template-columns: 92px 1fr 30px; }
.dv-funnel i { margin: 0 auto; height: 20px; clip-path: polygon(0 0, 100% 0, 91% 100%, 9% 100%); border-radius: 0; background: linear-gradient(180deg, #C4A06A, #A8844C); }
.dv-tabs { display: inline-flex; background: var(--bg-2); border-radius: 9px; padding: 3px; gap: 2px; margin-bottom: 8px; } .dv-tabs span { padding: 5px 12px; border-radius: 7px; font-size: 12px; color: var(--ink-3); } .dv-tabs span.on { background: var(--card); color: var(--ink); font-weight: 600; }
.dv-ev .t { border-left: 0; position: relative; padding-left: 14px; } .dv-ev .t::before { content: ''; position: absolute; left: 0; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.dv-ev .d { background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; padding: 6px 2px; }

/* ---------- Leads, as drawn ---------- */
.lb-wrap { display: grid; grid-template-columns: 1fr 232px; gap: 14px; align-items: start; } @media (max-width: 1200px) { .lb-wrap { grid-template-columns: 1fr; } }
.lb-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .lb-bar h2 { font-size: 18px; font-weight: 700; margin-right: 6px; } .lb-bar .sp { flex: 1; } .lb-bar .search { padding: 7px 12px; min-width: 180px; }
.lb-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .lb-filters select { background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; color: var(--ink); font: inherit; font-size: 12.5px; }
.lb-board { display: grid; gap: 10px; align-items: start; }
.lb-col { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 8px; min-height: 220px; transition: background .15s; } .lb-col.over { background: var(--tint); }
.lb-head { display: grid; grid-template-columns: 1fr auto; padding: 6px 6px 10px; } .lb-head b { font-size: 13px; } .lb-head i { font-style: normal; font-size: 11px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; color: var(--ink-2); } .lb-head span { grid-column: 1 / -1; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.lb-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin-bottom: 8px; cursor: grab; } .lb-card:hover { border-color: var(--line-2); box-shadow: 0 6px 16px -10px var(--shadow-c); } .lb-card.dragging { opacity: .4; }
.lb-top { display: flex; gap: 10px; align-items: flex-start; } .lb-top .avatar { width: 40px; height: 40px; font-size: 13px; border-radius: 10px; flex: none; }
.lb-t { min-width: 0; } .lb-t b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lb-t span { display: block; font-size: 11px; color: var(--ink-3); margin-top: 1px; } .lb-t em { display: block; font-style: normal; font-weight: 700; font-size: 13px; margin-top: 3px; }
.lb-bot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; } .lb-bot small { font-size: 11px; color: var(--ink-3); }
.lb-add { width: 100%; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: 12.5px; padding: 8px; border-radius: 8px; cursor: pointer; text-align: left; } .lb-add:hover { background: var(--card); color: var(--ink); }
.lb-list .lb-row { display: grid; grid-template-columns: 36px 1fr auto auto 90px 60px; gap: 12px; align-items: center; padding: 10px 6px; border-bottom: 1px solid var(--line); } .lb-list .lb-row:last-child { border-bottom: 0; } .lb-list .lb-row small { color: var(--ink-3); font-size: 11px; text-align: right; }
.lb-side { display: grid; gap: 12px; }
.lb-qa { padding: 8px; display: grid; gap: 4px; } .lb-qa a { display: flex; align-items: center; gap: 10px; padding: 10px 10px; border: 1px solid var(--line); border-radius: 9px; font-size: 13px; color: var(--ink); } .lb-qa a:hover { background: var(--card-2); } .lb-qa a svg { color: var(--gold-deep); }
.lb-bottom { margin-top: 14px; grid-template-columns: 1fr 1fr 1fr; }
.lb-conv { display: grid; gap: 10px; } .lb-conv div { display: grid; grid-template-columns: 96px 1fr 40px 30px; gap: 10px; align-items: center; font-size: 12px; } .lb-conv i { display: block; height: 14px; border-radius: 4px; background: var(--bg-2); overflow: hidden; } .lb-conv i b { display: block; height: 100%; background: var(--gold); border-radius: 4px; } .lb-conv small { color: var(--ink-3); text-align: right; } .lb-conv em { font-style: normal; font-weight: 700; text-align: right; }

/* ---------- CRM pages: tiles with a number and a spark, status tabs, a table with a side panel ---------- */
.rv-tile.num { align-items: center; position: relative; overflow: hidden; }
.rv-tile.num .b { flex: 1; min-width: 0; } .rv-tile.num .v { font-size: 24px; margin-top: 0; } .rv-tile.num .l { font-size: 12.5px; margin-top: 2px; } .rv-tile.num .d { margin-top: 4px; font-weight: 600; font-size: 12px; }
.rv-tile.num .spark { position: absolute; right: 14px; bottom: 12px; width: 74px; height: 30px; opacity: .9; }
.rv-tiles.five { grid-template-columns: repeat(5, 1fr); } .rv-tiles.four { grid-template-columns: repeat(4, 1fr); }
.rv-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.rv-tabs button { border: 1px solid var(--line); background: var(--card); color: var(--ink-2); border-radius: 10px; padding: 8px 14px; font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.rv-tabs button b { margin-left: 6px; font-size: 11px; color: var(--ink-3); background: var(--bg-2); border-radius: 999px; padding: 1px 7px; }
.rv-tabs button.on { background: var(--gold); border-color: var(--gold); color: #fff; } .rv-tabs button.on b { background: rgba(255, 255, 255, .25); color: #fff; }
.cp-wrap { display: grid; grid-template-columns: 1fr 290px; gap: 14px; align-items: start; } @media (max-width: 1200px) { .cp-wrap { grid-template-columns: 1fr; } }
.rv-table th.ck, .rv-table td.ck { width: 28px; padding-right: 0; } .rv-table td.ck input, .rv-table th.ck input { accent-color: var(--gold); }
.rv-table tr.on td { background: var(--tint); }
.icon-btn.sm { width: 28px; height: 28px; font-size: 14px; }
.rv-pager { display: flex; align-items: center; gap: 6px; padding: 12px 10px; font-size: 12.5px; color: var(--ink-2); } .rv-pager .sp { flex: 1; }
.rv-pager button { border: 1px solid var(--line); background: var(--card); border-radius: 8px; min-width: 30px; height: 30px; font: inherit; font-size: 12.5px; color: var(--ink-2); cursor: pointer; } .rv-pager button.on { background: var(--gold); border-color: var(--gold); color: #fff; } .rv-pager button:disabled { opacity: .4; }
.rv-pager select { border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 12px; color: var(--ink-2); margin-left: 8px; }
.cp-panel .card { padding: 18px; }
.cp-top { display: flex; justify-content: space-between; align-items: flex-start; } .cp-av .avatar { width: 84px; height: 84px; font-size: 26px; border-radius: 50%; }
.cp-acts { display: flex; gap: 6px; }
.cp-name { font-size: 18px; margin-top: 10px; } .cp-name b { font-size: 18px; } .cp-role { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.cp-btns { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 14px 0; }
.cp-btns button { border: 1px solid var(--line); background: var(--card-2); border-radius: 10px; padding: 9px 4px; display: grid; justify-items: center; gap: 4px; font: inherit; font-size: 10.5px; color: var(--ink-2); cursor: pointer; } .cp-btns button:hover { border-color: var(--line-2); color: var(--ink); } .cp-btns button svg { color: var(--ink); }
.cp-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 12px; overflow-x: auto; }
.cp-tabs button { border: 0; background: none; padding: 8px 10px; font: inherit; font-size: 12.5px; color: var(--ink-3); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; } .cp-tabs button.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--gold); }
.cp-h { font-size: 13px; font-weight: 700; margin: 14px 0 8px; } .cp-h:first-child { margin-top: 0; }
.cp-kv { display: grid; gap: 9px; font-size: 12.5px; } .cp-kv > div { display: flex; gap: 10px; align-items: flex-start; } .cp-kv svg { color: var(--ink-3); flex: none; margin-top: 2px; } .cp-kv span, .cp-kv a { min-width: 0; overflow-wrap: anywhere; }
.cp-p { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.cp-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.cp-rel { display: flex; gap: 10px; align-items: center; padding: 6px 0; } .cp-rel .avatar { width: 34px; height: 34px; font-size: 12px; } .cp-rel b { display: block; font-size: 12.5px; } .cp-rel small { font-size: 11px; color: var(--ink-3); }
.cp-link { display: flex; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; font-size: 11.5px; color: var(--gold-deep); } .cp-link span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-row { display: grid; grid-template-columns: 1fr 64px 130px 26px; gap: 6px; margin-bottom: 6px; align-items: center; } .inv-row input { width: 100%; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-2); color: var(--ink); font: inherit; font-size: 12.5px; }
.inv-row .pb-pk-price { display: flex; align-items: center; gap: 4px; } .inv-row .pb-pk-price > span { color: var(--ink-3); font-size: 12px; }

/* ---------- Scheduler ---------- */
.sc-wrap { display: grid; grid-template-columns: 200px 1fr; gap: 12px; align-items: start; } .sc-wrap.with-side { grid-template-columns: 200px 1fr 300px; }
@media (max-width: 1200px) { .sc-wrap, .sc-wrap.with-side { grid-template-columns: 1fr; } }
.sc-left .card { padding: 12px 14px; margin-bottom: 10px; } .sc-left .card-h { margin-bottom: 6px; } .sc-left .card-h h3 { font-size: 13px; }
.sc-mini-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 13px; } .sc-mini-h button { border: 0; background: none; font-size: 15px; color: var(--ink-2); cursor: pointer; padding: 0 4px; }
.sc-mini-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; } .sc-mini-g i { font-style: normal; font-size: 10px; color: var(--ink-3); padding: 2px 0; }
.sc-mini-g button { border: 0; background: none; font: inherit; font-size: 11.5px; color: var(--ink-2); border-radius: 50%; width: 24px; height: 24px; margin: 0 auto; cursor: pointer; position: relative; } .sc-mini-g button.out { color: var(--ink-3); opacity: .5; } .sc-mini-g button.on { background: var(--gold); color: #fff; } .sc-mini-g button.has::after { content: ''; position: absolute; left: 50%; bottom: 1px; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); transform: translateX(-50%); } .sc-mini-g button.on.has::after { background: #fff; }
.sc-ck { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 4px 0; cursor: pointer; } .sc-ck input { accent-color: var(--gold); } .sc-ck i { width: 12px; height: 12px; border-radius: 4px; } .sc-ck .avatar { width: 22px; height: 22px; font-size: 9px; }
.sc-kind { display: inline-flex; align-items: center; gap: 6px; } .sc-kind i { width: 9px; height: 9px; border-radius: 50%; background: var(--kc); } .sc-kind.on { background: var(--card); color: var(--ink); border-color: var(--line-2); }
.sc-main { padding: 0; overflow: hidden; }
.sc-grid { display: grid; grid-auto-rows: auto; }
.sc-dh { text-align: center; padding: 10px 4px 8px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); } .sc-dh span { display: block; font-size: 11px; color: var(--ink-3); } .sc-dh b { font-size: 12.5px; } .sc-dh.today { background: var(--tint); } .sc-dh.today b { color: var(--gold-deep); }
.sc-allday { font-size: 10px; color: var(--ink-3); padding: 6px 4px; text-align: right; border-bottom: 1px solid var(--line); } .sc-allday-c { border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 3px; min-height: 24px; }
.sc-hours { display: grid; grid-template-rows: repeat(16, 46px); } .sc-hours div { font-size: 10.5px; color: var(--ink-3); text-align: right; padding: 2px 6px 0 0; border-top: 1px solid var(--line); }
.sc-col { position: relative; border-left: 1px solid var(--line); height: 736px; background: repeating-linear-gradient(180deg, var(--line) 0, var(--line) 1px, transparent 1px, transparent 46px); } .sc-col.today { background-color: rgba(184, 150, 90, .05); }
.sc-blk { position: absolute; left: 3px; right: 3px; border-radius: 8px; padding: 5px 8px; font-size: 11px; overflow: hidden; cursor: pointer; background: color-mix(in srgb, var(--kc) 14%, #fff); border-left: 3px solid var(--kc); color: var(--ink); } .sc-blk.on { box-shadow: 0 0 0 2px var(--kc); }
.sc-blk b { display: block; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sc-blk span { display: block; font-size: 10.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-chip { font-size: 10.5px; padding: 2px 6px; border-radius: 5px; margin-bottom: 2px; background: color-mix(in srgb, var(--kc) 16%, #fff); border-left: 2px solid var(--kc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .sc-chip.on { box-shadow: 0 0 0 1px var(--kc); }
.sc-month { display: grid; grid-template-columns: repeat(7, 1fr); } .sc-mdh { font-size: 11px; color: var(--ink-3); text-align: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.sc-md { min-height: 104px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 6px; font-size: 11px; } .sc-md b { display: block; font-size: 12px; margin-bottom: 4px; } .sc-md.out { opacity: .45; } .sc-md.today b { color: var(--gold-deep); } .sc-md small { color: var(--ink-3); }
.sc-agenda { padding: 10px 14px; } .sc-adh { font-size: 12.5px; font-weight: 700; margin: 10px 0 4px; }
.sc-ai { display: grid; grid-template-columns: 8px 130px 1fr auto; gap: 10px; align-items: center; padding: 8px 6px; border-bottom: 1px solid var(--line); font-size: 12.5px; cursor: pointer; } .sc-ai i { width: 8px; height: 8px; border-radius: 50%; } .sc-ai .t { color: var(--ink-3); } .sc-ai span { color: var(--ink-2); } .sc-ai small { color: var(--ink-3); } .sc-ai.on { background: var(--tint); }
.sc-side .card { padding: 16px; }
.sc-meta { display: grid; gap: 4px; font-size: 12.5px; color: var(--ink-2); margin: 8px 0 4px; } .sc-meta div { display: flex; gap: 8px; align-items: center; } .sc-meta svg { color: var(--ink-3); }
.sc-kv > div > div b { display: block; font-size: 12.5px; } .sc-kv > div > div small { display: block; font-size: 11.5px; color: var(--ink-3); }
.cp-wrap > .card, .cp-wrap > div > .card { overflow-x: auto; }
.cp-wrap .rv-table td .who b, .cp-wrap .rv-table td:nth-child(6), .cp-wrap .rv-table td:nth-child(5) { white-space: nowrap; }
.cp-btns button { min-width: 0; overflow: hidden; } .cp-btns button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sc-grid { grid-template-columns: 52px repeat(7, minmax(0, 1fr)); } .sc-allday-c, .sc-col, .sc-dh { min-width: 0; overflow: hidden; }

/* ---------- Proposals · Contracts · Communication · Forms · Automations ---------- */
.rv-tiles.six { grid-template-columns: repeat(6, 1fr); } .rv-tiles.three { grid-template-columns: repeat(3, 1fr); }
.rv-tiles.six .rv-tile.num .v { font-size: 20px; } .rv-tiles.six .rv-tile.num .spark { width: 54px; }
.rv-datebtn.sm { font-size: 11px; padding: 4px 8px; }
.cp-wrap.wide { grid-template-columns: 1fr 380px; }
.rv-bars { display: flex; gap: 10px; align-items: flex-end; height: 90px; margin-top: 12px; } .rv-bars > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.rv-bars i { display: block; width: 100%; max-width: 30px; background: #E3DDD2; border-radius: 6px 6px 2px 2px; min-height: 4px; } .rv-bars i.hi { background: var(--gold); } .rv-bars span { font-size: 10px; color: var(--ink-3); }
.pr-tplcard { display: flex; gap: 12px; align-items: flex-start; } .pr-tplcard .ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--tint); color: var(--gold-deep); flex: none; } .pr-tplcard p { font-size: 12px; color: var(--ink-2); margin: 4px 0 10px; }
.pr-win { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: center; position: relative; } .pr-donut svg { display: block; } .pr-donut-n { position: absolute; left: 0; width: 110px; text-align: center; font-size: 20px; font-weight: 700; }
.pr-legend { display: grid; gap: 6px; font-size: 12px; } .pr-legend > div { display: flex; align-items: center; gap: 8px; } .pr-legend i { width: 8px; height: 8px; border-radius: 50%; } .pr-legend span { flex: 1; color: var(--ink-2); } .pr-legend small { color: var(--ink-3); font-weight: 400; }
.pr-cover { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #2A2520 0%, #6B5A3E 60%, #B8965A 100%); }
.ct-paper { margin-top: 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px; } .ct-paper-in { background: #fff; color: #1E1A16; border-radius: 4px; padding: 16px 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, .08); font-size: 10px; min-height: 200px; }
.ct-logo { font-family: Georgia, serif; font-size: 18px; letter-spacing: .5px; } .ct-logo small { display: block; font-size: 7px; letter-spacing: 1px; text-transform: uppercase; color: #8A8073; font-family: inherit; }
.ct-paper-in h4 { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; margin: 16px 0 10px; line-height: 1.5; } .ct-arch { height: 60px; border-radius: 30px 30px 0 0; background: linear-gradient(180deg, #E6E1D8, #C9C1B4); margin: 0 auto 10px; width: 60%; } .ct-paper-in p { line-height: 1.6; } .ct-paper-in i { display: block; margin-top: 10px; font-size: 7px; letter-spacing: 1.5px; text-transform: uppercase; color: #8A8073; font-style: normal; }
.cm-wrap { display: grid; grid-template-columns: 300px 1fr 280px; gap: 12px; align-items: start; } @media (max-width: 1300px) { .cm-wrap { grid-template-columns: 1fr; } }
.cm-list { padding: 12px; } .cm-list .rv-tabs { margin-bottom: 8px; } .cm-list .rv-tabs button { padding: 6px 10px; font-size: 12px; }
.cm-item { display: flex; gap: 10px; padding: 10px 8px; border-radius: 10px; cursor: pointer; align-items: flex-start; } .cm-item:hover { background: var(--bg-2); } .cm-item.on { background: var(--tint); }
.cm-item .avatar { width: 40px; height: 40px; flex: none; } .cm-item-b { min-width: 0; flex: 1; } .cm-item-t { display: flex; justify-content: space-between; gap: 6px; font-size: 13px; } .cm-item-t small { color: var(--ink-3); font-size: 11px; white-space: nowrap; }
.cm-item-b > span { display: block; font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 2px 0 4px; } .cm-item-tags { display: flex; gap: 4px; align-items: center; } .cm-unread { margin-left: auto; background: var(--gold); color: #fff; border-radius: 999px; font-size: 10px; padding: 1px 7px; }
.cm-mid { padding: 0; display: flex; flex-direction: column; min-height: 640px; } .cm-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 6px; } .cm-mid .cp-tabs { padding: 0 12px; margin-bottom: 0; }
.cm-msgs { flex: 1; padding: 14px 16px; display: grid; gap: 14px; align-content: start; max-height: 520px; overflow-y: auto; }
.cm-msg { display: flex; gap: 10px; align-items: flex-start; } .cm-msg .avatar { width: 32px; height: 32px; flex: none; font-size: 11px; } .cm-msg.me { justify-content: flex-end; } .cm-msg > div { max-width: 78%; }
.cm-meta { font-size: 12px; margin-bottom: 4px; } .cm-meta small { color: var(--ink-3); } .cm-msg.me .cm-meta { text-align: right; }
.cm-bubble { background: var(--bg-2); border-radius: 12px; padding: 10px 14px; font-size: 13px; line-height: 1.55; white-space: pre-wrap; } .cm-msg.me .cm-bubble { background: var(--tint); } .cm-msg.note .cm-bubble { background: #FFF6DB; border: 1px dashed #E5C36A; }
.cm-compose { border-top: 1px solid var(--line); padding: 12px 16px; } .cm-compose textarea { width: 100%; border: 0; background: none; font: inherit; font-size: 13px; resize: none; color: var(--ink); } .cm-compose textarea:focus { outline: none; }
.cm-tools { display: flex; gap: 12px; align-items: center; color: var(--ink-3); margin-top: 6px; } .cm-tplsel { border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--ink-2); }
.cm-right .card { padding: 16px; } .cm-right .cp-btns { grid-template-columns: repeat(4, 1fr); }
.fm-ic { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; flex: none; } .fm-ic.red { background: #FCE7EA; color: #D2394F; } .fm-ic.blue { background: #E4ECFF; color: #3D7BFF; } .fm-ic.violet { background: #EDE7FD; color: #8B5CF6; }
.fp-hero { aspect-ratio: 2 / 1; background: linear-gradient(135deg, #2A2520 0%, #6B5A3E 60%, #B8965A 100%); border-radius: 10px; color: #fff; display: flex; align-items: flex-end; padding: 16px; } .fp-hero b { display: block; font-size: 18px; line-height: 1.25; max-width: 60%; } .fp-hero small { display: block; font-size: 11px; opacity: .85; margin-top: 4px; }
.fp-title { margin: 12px 0 10px; } .fp-title b { display: block; font-size: 15px; } .fp-title small { color: var(--ink-2); font-size: 12px; }
.fp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .fp-f { display: grid; gap: 4px; font-size: 12px; } .fp-f.wide { grid-column: 1 / -1; } .fp-f label { font-weight: 600; font-size: 12px; }
.fp-f input, .fp-f select, .fp-f textarea { width: 100%; border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 10px; background: var(--card); font: inherit; font-size: 12.5px; color: var(--ink); } .fp-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: 12px; } .fp-checks label { display: flex; gap: 6px; align-items: center; }
.fq-row { display: grid; grid-template-columns: 1.4fr 110px 1fr auto 26px; gap: 6px; margin-bottom: 6px; align-items: center; } .fq-row input, .fq-row select { width: 100%; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-2); color: var(--ink); font: inherit; font-size: 12.5px; } .fq-row.au-row { grid-template-columns: 150px 1fr 110px 26px; }
.au-wrap { display: grid; grid-template-columns: 330px 1fr 320px; gap: 12px; align-items: start; } @media (max-width: 1300px) { .au-wrap { grid-template-columns: 1fr; } }
.au-list { padding: 12px; } .au-list .cp-tabs { margin-bottom: 10px; }
.au-item { display: flex; gap: 10px; align-items: center; padding: 10px 8px; border-radius: 10px; cursor: pointer; } .au-item:hover { background: var(--bg-2); } .au-item.on { background: var(--tint); } .au-item > div { flex: 1; min-width: 0; } .au-item b { display: block; font-size: 13px; } .au-item small { display: block; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.au-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.au-canvas { padding: 0; min-height: 640px; position: relative; background-image: radial-gradient(var(--line) 1px, transparent 1px); background-size: 18px 18px; } .au-canvas-h { display: flex; align-items: center; gap: 8px; padding: 14px 16px; background: var(--card); border-bottom: 1px solid var(--line); border-radius: 14px 14px 0 0; } .au-canvas-h b { font-size: 16px; }
.au-flow { display: flex; flex-direction: column; align-items: center; padding: 24px 16px 60px; }
.au-node { display: flex; gap: 10px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; width: 250px; box-shadow: 0 2px 8px rgba(0, 0, 0, .04); } .au-node > div { flex: 1; min-width: 0; } .au-node b { display: block; font-size: 13px; } .au-node small { display: block; font-size: 11.5px; color: var(--ink-2); } .au-node .au-note { color: var(--ink-3); font-size: 10.5px; } .au-node.trig { border-color: #1E9E5A55; } .au-node.cond { border-color: #F59E0B77; }
.au-link { width: 2px; height: 26px; background: var(--line-2); position: relative; } .au-link::after { content: '+'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--card); font-size: 11px; line-height: 14px; text-align: center; color: var(--ink-3); }
.au-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; width: 100%; max-width: 620px; margin-top: 4px; position: relative; } .au-split::before { content: ''; position: absolute; left: 25%; right: 25%; top: 0; height: 2px; background: var(--line-2); }
.au-branch { display: flex; flex-direction: column; align-items: center; padding-top: 2px; } .au-branch::before { content: ''; width: 2px; height: 14px; background: var(--line-2); } .au-yn { font-size: 11px; padding: 2px 10px; border-radius: 999px; margin: 4px 0; } .au-yn.yes { background: #E3F5EA; color: #1E7A47; } .au-yn.no { background: #FCE7EA; color: #B42A3E; }
.au-add { border: 1px dashed var(--line-2); background: none; border-radius: 12px; padding: 12px 20px; font: inherit; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.au-zoom { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 4px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; font-size: 12px; } .au-zoom button { border: 0; background: none; font: inherit; cursor: pointer; padding: 2px 6px; color: var(--ink-2); }
.au-right .card { padding: 16px; } .au-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .au-stats > div { display: grid; justify-items: center; gap: 2px; font-size: 11px; color: var(--ink-3); padding: 8px; background: var(--bg-2); border-radius: 10px; } .au-stats b { font-size: 16px; color: var(--ink); }
.cp-wrap.wide { grid-template-columns: minmax(0, 1fr) 340px; } .cp-wrap > div { min-width: 0; }

/* ---------- the polish pass: the rail, the people, the tiles — drawn closer to the mockups ---------- */
.rq { grid-template-columns: 214px 1fr; }
.rail { background: #1B1815; padding: 20px 12px 16px; gap: 2px; }
.rail .logo { padding: 0 8px 18px; }
.rail .logo-w { font-size: 34px; letter-spacing: -.01em; color: #D6B87E; line-height: 1; } .rail .logo-w b { -webkit-text-fill-color: #D6B87E; color: #D6B87E; }
.rail .logo-sub { color: #8F857A; font-size: 9px; letter-spacing: .06em; margin-top: 4px; }
.rail .nav-l { color: #D8D0C3; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 500; gap: 12px; }
.rail .nav-l svg { width: 18px; height: 18px; opacity: .85; stroke-width: 1.7; }
.rail .nav-l.on { background: #2B2622; color: #FFFFFF; border-left: 0; padding-left: 12px; } .rail .nav-l.on svg { color: #fff; }
.rail .nav-sub a { color: #B9AF9F; padding: 8px 10px 8px 26px; font-size: 13px; } .rail .nav-sub a.on { background: #2B2622; color: #fff; }
.rail .biz { background: transparent; border: 0; border-radius: 10px; padding: 6px 8px; margin: -8px 0 10px; } .rail .biz:hover { background: rgba(255, 255, 255, .05); }
.rail .biz .biz-ic { width: 26px; height: 26px; border-radius: 7px; background: rgba(214, 184, 126, .14); color: #D6B87E; display: grid; place-items: center; } .rail .biz .biz-ic svg { width: 14px; height: 14px; }
.rail .biz .biz-t b { font-size: 12.5px; color: #E9E2D6; font-weight: 500; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; } .rail .biz .biz-t span { font-size: 10.5px; color: #8F857A; }
.rail .rail-tag { margin: 18px 0 0; border-radius: 12px; padding: 22px 16px 20px; background: radial-gradient(120% 90% at 100% 0%, rgba(214, 184, 126, .28), transparent 55%), radial-gradient(80% 60% at 0% 100%, rgba(214, 184, 126, .18), transparent 60%), linear-gradient(160deg, #26211C, #15120F); border: 1px solid rgba(214, 184, 126, .22); position: relative; overflow: hidden; }
.rail .rail-tag::before { content: ''; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; border: 18px solid rgba(214, 184, 126, .12); }
.rail .rail-tag b { font-size: 15.5px; line-height: 1.35; font-weight: 600; letter-spacing: -.01em; position: relative; }
.rail .rail-tag i { margin-top: 14px; width: 30px; height: 2px; background: #D6B87E; }
.rail .rail-ver { font-size: 10.5px; color: #6F665C; padding: 12px 6px 0; line-height: 1.6; }
.rail .upgrade { margin-top: 10px; border-radius: 12px; padding: 12px; }
.rail .rail-me { padding-top: 12px; margin-top: 8px; }
.rail .rail-me .avatar { width: 32px; height: 32px; font-size: 11px; }

/* the top bar: quieter, like the mockup */
.top { padding: 16px 0 20px; }
.search { border-radius: 12px; height: 42px; box-shadow: 0 1px 2px rgba(30, 27, 22, .03); }
.icon-btn.grad, .btn.grad { background: linear-gradient(135deg, #CDB07A, #B8965A); box-shadow: 0 2px 8px rgba(184, 150, 90, .35); }
.me { background: transparent; border: 0; box-shadow: none; padding: 4px 6px; gap: 10px; } .me:hover { background: var(--hover); }
.me .avatar { width: 36px; height: 36px; font-size: 12px; }

/* ---------- people: soft pastel avatars, two circles for a couple ---------- */
.avatar { color: #3F3529; background: #EFE3CF; font-weight: 600; font-size: 12px; box-shadow: none; border: 0; letter-spacing: .01em; }
.avatar.g2, .avatar.g3, .avatar.g4, .avatar.g5 { background: #EFE3CF; }
.avatar.p0 { background: #EFE3CF; color: #7A5A2E; } .avatar.p1 { background: #F6DFE1; color: #A33A50; } .avatar.p2 { background: #DDEBDD; color: #2F6B45; } .avatar.p3 { background: #DCE8F5; color: #2B5BA8; }
.avatar.p4 { background: #E9E1F5; color: #6B4FA0; } .avatar.p5 { background: #FBE3D3; color: #B4531E; } .avatar.p6 { background: #D9F0EA; color: #1E7A6B; } .avatar.p7 { background: #E6E4EA; color: #4A4A5C; }
.avatar.duo { background: transparent !important; position: relative; display: block; }
.avatar.duo span { position: absolute; width: 72%; height: 72%; border-radius: 50%; display: grid; place-items: center; font-size: .92em; border: 2px solid var(--card); box-sizing: border-box; }
.avatar.duo span:first-child { left: 0; top: 0; } .avatar.duo span:last-child { right: 0; bottom: 0; }
.avatar.duo.p0 span:first-child { background: #EFE3CF; color: #7A5A2E; } .avatar.duo.p0 span:last-child { background: #DCE8F5; color: #2B5BA8; }
.avatar.duo.p1 span:first-child { background: #F6DFE1; color: #A33A50; } .avatar.duo.p1 span:last-child { background: #DDEBDD; color: #2F6B45; }
.avatar.duo.p2 span:first-child { background: #DDEBDD; color: #2F6B45; } .avatar.duo.p2 span:last-child { background: #FBE3D3; color: #B4531E; }
.avatar.duo.p3 span:first-child { background: #DCE8F5; color: #2B5BA8; } .avatar.duo.p3 span:last-child { background: #F6DFE1; color: #A33A50; }
.avatar.duo.p4 span:first-child { background: #E9E1F5; color: #6B4FA0; } .avatar.duo.p4 span:last-child { background: #EFE3CF; color: #7A5A2E; }
.avatar.duo.p5 span:first-child { background: #FBE3D3; color: #B4531E; } .avatar.duo.p5 span:last-child { background: #D9F0EA; color: #1E7A6B; }
.avatar.duo.p6 span:first-child { background: #D9F0EA; color: #1E7A6B; } .avatar.duo.p6 span:last-child { background: #E9E1F5; color: #6B4FA0; }
.avatar.duo.p7 span:first-child { background: #E6E4EA; color: #4A4A5C; } .avatar.duo.p7 span:last-child { background: #EFE3CF; color: #7A5A2E; }
.rv-table .who .avatar, .cm-item .avatar, .lb-top .avatar { width: 40px; height: 40px; font-size: 12.5px; border-radius: 50%; }
.cp-av .avatar { width: 84px; height: 84px; font-size: 26px; } .cp-av .avatar.duo span { font-size: 22px; }
.dv-team .avatar { width: 52px; height: 52px; font-size: 15px; }

/* ---------- stat tiles: icon and label on one line, the number under, the change beside it ---------- */
.rv-tile { border-radius: 14px; box-shadow: 0 1px 2px rgba(30, 27, 22, .03); padding: 16px 18px; }
.rv-tile .ic { width: 38px; height: 38px; border-radius: 10px; background: #F3EBDD; color: #8C6A3A; } .rv-tile .ic svg { width: 18px; height: 18px; stroke-width: 1.8; }
.rv-tile.dash { grid-template-columns: auto 1fr; grid-template-rows: auto auto; row-gap: 10px; column-gap: 12px; align-items: center; }
.rv-tile.dash .l { font-size: 13px; color: var(--ink-2); margin: 0; } .rv-tile.dash .v { font-size: 30px; margin: 0; line-height: 1; grid-column: 1; }
.rv-tile.dash .d { margin: 0; font-size: 12px; line-height: 1.3; grid-column: 2; align-self: end; } .rv-tile.dash .d.up { color: #1E7A47; } .rv-tile.dash .d.down { color: #C0304A; } .rv-tile.dash .d small { display: block; color: var(--ink-3); font-size: 11px; font-weight: 400; }
.rv-tile.num .v { font-size: 26px; } .rv-tile.num .l { font-size: 12.5px; } .rv-tile.num .d { font-size: 12px; }

/* the dashboard hero: no photograph — the couple, drawn large */
.dv-feat { background: radial-gradient(90% 70% at 85% 15%, rgba(214, 184, 126, .35), transparent 60%), radial-gradient(70% 60% at 10% 100%, rgba(214, 184, 126, .18), transparent 60%), linear-gradient(165deg, #2A2520 0%, #17140F 100%); }
.dv-feat img { display: none; }
.dv-feat .dv-feat-av { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: 150px; height: 150px; font-size: 44px; } .dv-feat .dv-feat-av.duo span { font-size: 40px; border-width: 4px; border-color: #1E1A16; }
.dv-feat .dv-feat-ring { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: 196px; height: 196px; border-radius: 50%; border: 1px solid rgba(214, 184, 126, .35); }
.dv-feat .dv-feat-ring::after { content: ''; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(214, 184, 126, .15); }
.dv-feat h3 { font-size: 32px; }

/* the board card: round faces, a little more air */
.lb-top .avatar { border-radius: 50%; width: 44px; height: 44px; }
.lb-card { border-radius: 12px; }
.rail .rail-tag, .rail .rail-ver, .rail .upgrade, .rail .rail-me, .rail .logo, .rail #bizSwitch { flex: none; }
.rv-table .who .avatar.th { width: 44px; height: 44px; border-radius: 10px; font-size: 13px; }
.dv-feat .dv-feat-av { width: 128px; height: 128px; font-size: 40px; top: 42%; } .dv-feat .dv-feat-ring { width: 170px; height: 170px; top: 42%; }
.rv-table .who .avatar.th { display: grid; place-items: center; object-fit: unset; }
.pw-head .cover.ph { background: var(--tint); } .pw-head .cover.ph .avatar { width: 52px; height: 52px; font-size: 17px; }

/* ---------- room to breathe: bigger type, bigger tiles, bigger faces ---------- */
body { font-size: 14px; }
.rail .nav-l svg { width: 19px; height: 19px; stroke-width: 1.5; opacity: .9; }
.rv-head h1 { font-size: 30px; } .rv-head .sub { font-size: 14px; }
.rv-tiles { gap: 14px; margin-bottom: 18px; }
.rv-tile { padding: 20px 22px; min-height: 104px; }
.rv-tile .ic { width: 44px; height: 44px; border-radius: 12px; } .rv-tile .ic svg { width: 20px; height: 20px; stroke-width: 1.5; }
.rv-tile.num .v { font-size: 28px; } .rv-tile.num .l { font-size: 13px; } .rv-tile.num .d { font-size: 12.5px; } .rv-tile.num .spark { width: 84px; height: 34px; }
.rv-tiles.six .rv-tile.num .v { font-size: 24px; } .rv-tiles.six .rv-tile { padding: 18px; }
.rv-tile.dash .v { font-size: 32px; } .rv-tile.dash .l { font-size: 13.5px; }
.rv-tabs button { padding: 9px 16px; font-size: 13px; }
.rv-toolbar select, .rv-toolbar .search input { font-size: 13px; padding: 9px 12px; }
.rv-table th { font-size: 12px; padding: 12px 10px; } .rv-table td { font-size: 13.5px; padding: 13px 10px; }
.rv-table .who .avatar, .cm-item .avatar { width: 42px; height: 42px; font-size: 13px; }
.rv-tag { font-size: 11.5px; padding: 3px 10px; }
.cp-panel .card { padding: 20px; } .cp-btns button { padding: 11px 4px; font-size: 11px; } .cp-btns button svg { width: 18px; height: 18px; }
.cp-tabs button { font-size: 13px; padding: 9px 11px; } .cp-kv { font-size: 13px; gap: 10px; } .kvrow { font-size: 13px; }
.card { border-radius: 16px; } .card-h h3 { font-size: 15px; }
.lb-card { padding: 14px; } .lb-t b { font-size: 13.5px; } .lb-top .avatar { width: 46px; height: 46px; font-size: 13.5px; }
.dv-team .avatar { width: 56px; height: 56px; font-size: 16px; }
.dv-feat h3 { font-size: 34px; }
.sc-blk b { font-size: 12px; } .sc-hours div { font-size: 11px; }
.au-node { width: 270px; padding: 12px 14px; } .au-node b { font-size: 13.5px; }
.cm-bubble { font-size: 13.5px; } .cm-item-t { font-size: 13.5px; }
.rv-empty { padding: 36px 20px; font-size: 13.5px; }
.cp-wrap .rv-table td, .cp-wrap .rv-table th { padding-left: 8px; padding-right: 8px; }
.lb-top .avatar { width: 40px; height: 40px; font-size: 12.5px; }

/* ---------- the dashboard, drawn to the mockup: photographs, a working period, live modules ---------- */
.rv-datewrap { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; color: var(--ink-2); } .rv-datewrap select, select.rv-datebtn { border: 0; background: transparent; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; }
select.rv-datebtn { border: 1px solid var(--line); background: var(--card); border-radius: 9px; padding: 5px 8px; font-size: 12px; }
.dv-ev { text-decoration: none; color: inherit; padding: 12px 0; } .dv-ev .t b { font-size: 13.5px; display: flex; align-items: center; gap: 8px; } .dv-ev .t b .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .dv-ev .t span { font-size: 12.5px; }
.dv-ev .d b { font-size: 22px; } .dv-ev .in { background: var(--tint); color: var(--gold-deep); font-size: 12px; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.dv-feat img { opacity: 1; } .dv-feat::after { background: linear-gradient(180deg, rgba(20, 16, 12, 0) 35%, rgba(20, 16, 12, .88) 100%); }
.dv-feat .dv-feat-av, .dv-feat .dv-feat-ring { display: none; } .dv-feat h3 { font-size: 30px; letter-spacing: .01em; } .dv-feat p { font-size: 11.5px; letter-spacing: .16em; margin: 6px 0 14px; }
.dv-promo.photo { position: relative; overflow: hidden; padding: 0; background: #1A1714; } .dv-promo.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; } .dv-promo.photo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 16, 12, .92) 0%, rgba(20, 16, 12, .45) 70%, rgba(20, 16, 12, .2) 100%); }
.dv-promo.photo > div { position: relative; z-index: 1; padding: 26px 24px; display: flex; flex-direction: column; gap: 6px; height: 100%; justify-content: center; } .dv-promo.photo h3 { font-size: 24px; line-height: 1.2; } .dv-promo.photo p { font-size: 13px; opacity: .85; margin-bottom: 8px; } .dv-promo.photo .btn { align-self: flex-start; }
.dv-donut-w { position: relative; width: 120px; height: 120px; flex: none; } .dv-donut-n { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; } .dv-donut-n b { font-size: 20px; line-height: 1; } .dv-donut-n small { font-size: 10.5px; color: var(--ink-3); }
.dv-team div { width: 82px; } .dv-team img.avatar { object-fit: cover; } .dv-team em { font-style: normal; font-size: 11px; color: #1E7A47; display: inline-flex; align-items: center; gap: 4px; } .dv-team em::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #1E9E5A; } .dv-team em.busy { color: #C98A1C; } .dv-team em.busy::before { background: #C98A1C; } .dv-team em.off { color: #8A8073; } .dv-team em.off::before { background: #8A8073; }
.dv-act i { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex: none; } .dv-act span { flex: 1; font-size: 13px; } .dv-act small { color: var(--ink-3); font-size: 11.5px; white-space: nowrap; }
.dv-task { cursor: pointer; } .dv-task:hover span { color: var(--gold-deep); }
.dv-tabs span { cursor: pointer; }
.rail .rail-tag { background: #15120F; padding: 0; border: 0; position: relative; min-height: 190px; } .rail .rail-tag img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; } .rail .rail-tag::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21, 18, 15, .1) 0%, rgba(21, 18, 15, .92) 100%); } .rail .rail-tag::before { display: none; }
.rail .rail-tag > b, .rail .rail-tag > i { position: relative; z-index: 1; } .rail .rail-tag > b { display: block; padding: 96px 16px 0; font-size: 15px; } .rail .rail-tag > i { margin: 12px 16px 18px; }
.dv-feat img { display: block; }
.dv-ev .t b { display: block; } .dv-ev .t b .dot { display: inline-block; vertical-align: middle; margin-right: 8px; }
.dv-spark { position: static; width: 84px; height: 34px; margin-left: auto; }
.dv-team { display: flex; gap: 8px; flex-wrap: nowrap; justify-content: space-between; } .dv-team > div { flex: 1 1 0; min-width: 0; width: auto; max-width: 110px; text-align: center; font-size: 12px; }
.dv-team .avatar { width: 54px; height: 54px; font-size: 16px; margin: 0 auto 8px; } .dv-team b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dv-team small { display: block; font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; }
.dv-bottom { grid-template-columns: 1fr 1.3fr 1fr; } @media (max-width: 1300px) { .dv-bottom { grid-template-columns: 1fr; } }
.dv-donut { gap: 22px; } .dv-donut ul { font-size: 13px; gap: 10px; }
.dv-act { padding: 10px 0; align-items: center; }

/* ---------- the Scheduler, closer to the mockup ---------- */
.sc-blk { padding: 6px 8px 6px 9px; border-radius: 9px; background: color-mix(in srgb, var(--kc) 12%, #fff); border-left: 3px solid var(--kc); box-shadow: 0 1px 2px rgba(30, 27, 22, .06); }
.sc-blk b { display: flex; align-items: center; gap: 5px; font-size: 12px; } .sc-blk b svg { color: var(--kc); flex: none; } .sc-blk b span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-blk > span { font-size: 11px; color: var(--ink-2); } .sc-blk.tiny > span, .sc-blk.tiny .sc-faces { display: none; } .sc-blk.tiny { padding: 3px 8px; } .sc-blk.tiny b { font-size: 11.5px; }
.sc-faces { display: flex; margin-top: 6px; } .sc-faces .avatar { width: 22px; height: 22px; font-size: 8px; margin-left: -6px; border: 2px solid #fff; } .sc-faces .avatar:first-child { margin-left: 0; }
.sc-now { position: absolute; left: 0; right: 0; height: 2px; background: #D2394F; z-index: 3; pointer-events: none; } .sc-now::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #D2394F; }
.sc-hours { grid-template-rows: repeat(16, 48px); } .sc-col { height: 768px; background-size: 100% 48px; background-image: linear-gradient(180deg, var(--line) 0, var(--line) 1px, transparent 1px); }
.sc-col.today { background-color: rgba(184, 150, 90, .06); }
.sc-dh { padding: 12px 4px 10px; } .sc-dh span { font-size: 11.5px; } .sc-dh b { font-size: 13.5px; } .sc-dh.today b { color: var(--gold-deep); } .sc-dh.today { box-shadow: inset 0 -2px 0 var(--gold); }
.sc-allday-c { min-height: 30px; padding: 4px; } .sc-allday { padding: 9px 6px; }
.sc-ck { font-size: 13px; padding: 5px 0; } .sc-ck span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sc-left .card { padding: 14px 16px; } .sc-mini-g button { width: 26px; height: 26px; font-size: 12px; }

/* ---------- Add New Lead: the four-step wizard ---------- */
.lw-scrim { align-items: center; justify-content: center; padding: 24px; }
.lw { width: min(1380px, 96vw); max-height: 94vh; background: var(--card); border-radius: 22px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 80px rgba(20, 16, 12, .35); transform: translateY(12px); opacity: 0; transition: .2s; }
.scrim.on .lw { transform: none; opacity: 1; }
.lw-head { display: flex; gap: 18px; align-items: center; padding: 26px 30px 14px; position: relative; } .lw-ico { width: 68px; height: 68px; border-radius: 50%; background: #F6EEDF; color: var(--gold-deep); display: grid; place-items: center; flex: none; }
.lw-head h2 { font-size: 24px; font-weight: 700; margin: 0; } .lw-head p { font-size: 14px; color: var(--ink-2); margin: 4px 0 0; }
.lw-close { position: absolute; right: 24px; top: 24px; border: 0; background: none; color: var(--ink-2); cursor: pointer; padding: 6px; border-radius: 8px; } .lw-close:hover { background: var(--hover); }
.lw-body { display: grid; grid-template-columns: 260px 1fr 300px; gap: 18px; padding: 8px 30px 18px; overflow: auto; min-height: 0; flex: 1; }
.lw-steps { display: grid; align-content: start; gap: 4px; position: relative; padding-top: 6px; } .lw-steps::before { content: ''; position: absolute; left: 32px; top: 46px; bottom: 60px; border-left: 2px dashed var(--line-2); }
.lw-stepb { display: flex; gap: 14px; align-items: center; text-align: left; border: 0; background: none; padding: 14px 12px 14px 12px; border-radius: 12px; cursor: pointer; font: inherit; position: relative; }
.lw-stepb .n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #ECE8E0; color: var(--ink-2); font-weight: 600; font-size: 14px; flex: none; position: relative; z-index: 1; }
.lw-stepb b { display: block; font-size: 14.5px; } .lw-stepb small { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.lw-stepb.on { background: #F6EEDF; } .lw-stepb.on .n { background: var(--gold); color: #fff; } .lw-stepb.done .n { background: #E6F5EC; color: #1E7A47; } .lw-stepb .ok { margin-left: auto; color: #1E7A47; }
.lw-main { border: 1px solid var(--line); border-radius: 16px; padding: 24px 26px; min-width: 0; } .lw-main h3 { font-size: 19px; margin: 0; } .lw-main > p { font-size: 13.5px; color: var(--ink-2); margin: 4px 0 20px; }
.lw-side { border: 1px solid var(--line); border-radius: 16px; padding: 20px; align-self: start; } .lw-side-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .lw-side-h b { font-size: 15px; } .lw-side-h small { color: var(--ink-3); font-weight: 400; } .lw-side-h .link { background: none; border: 0; cursor: pointer; font-size: 12.5px; display: inline-flex; gap: 4px; align-items: center; }
.lw-f label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; } .lw-f label i { color: #D2394F; font-style: normal; } .lw-f label small { color: var(--ink-3); font-weight: 400; }
.lw-in { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); border-radius: 10px; padding: 0 12px; background: var(--card); min-height: 44px; } .lw-in > svg { color: var(--ink-3); flex: none; }
.lw-in input, .lw-in select, .lw-in textarea { flex: 1; border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--ink); padding: 10px 0; min-width: 0; } .lw-in input:focus, .lw-in select:focus, .lw-in textarea:focus { outline: none; } .lw-in:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184, 150, 90, .15); }
.lw-in.ta { align-items: flex-start; padding-top: 10px; } .lw-in.ta > svg { margin-top: 2px; } .lw-in.ta textarea { resize: vertical; padding: 0; }
.lw-in.dates span, .lw-in.times span { color: var(--ink-3); }
.lw-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .lw-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 16px; } .lw-row2.wide { grid-template-columns: 1.15fr 1fr; }
.lw-hr { border-top: 1px solid var(--line); margin: 8px 0 18px; }
.lw-names { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; } .lw-name { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); } .lw-name-h { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-weight: 600; font-size: 14px; } .lw-name.bride .lw-name-h { background: #FBEFF0; color: #A33A50; } .lw-name.groom .lw-name-h { background: #EAF0FA; color: #2B5BA8; } .lw-name .lw-row2 { padding: 14px; margin: 0; gap: 12px; }
.lw-quick { display: grid; gap: 8px; } .lw-qa { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line-2); border-radius: 10px; padding: 12px 14px; background: var(--card); font: inherit; font-size: 14px; cursor: pointer; text-align: left; } .lw-qa svg { color: var(--gold-deep); } .lw-qa.on { background: #FBF6EC; border-color: var(--gold); }
.lw-chips { display: flex; flex-wrap: wrap; gap: 8px; } .lw-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--bg-2); border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 12.5px; color: var(--ink); cursor: pointer; } .lw-chip.on { background: var(--gold); border-color: var(--gold); color: #fff; } #lwTagAdd { margin-top: 8px; background: var(--card); }
.lw-step { display: flex; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; min-height: 44px; } .lw-step button { width: 44px; border: 0; background: var(--bg-2); font-size: 18px; cursor: pointer; color: var(--ink-2); } .lw-step input { flex: 1; border: 0; text-align: center; font: inherit; font-size: 14px; background: var(--card); }
.lw-box { border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 16px; background: var(--card-2); } .lw-box-h { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; gap: 12px; } .lw-box-h b { font-size: 14.5px; display: block; } .lw-box-h small { display: block; color: var(--ink-3); font-size: 12px; margin-top: 2px; } .lw-box .lw-f { margin-bottom: 0; } .lw-box .lw-row2 { margin-bottom: 12px; }
.lw-ev { display: grid; grid-template-columns: 16px 40px 1.1fr 1fr 1.4fr 30px; gap: 10px; align-items: center; margin-bottom: 8px; } .lw-ev .grip { color: var(--ink-3); font-size: 12px; letter-spacing: -2px; cursor: grab; } .lw-ev > input { border: 1px solid var(--line-2); border-radius: 10px; padding: 11px 12px; font: inherit; font-size: 13.5px; background: var(--card); min-width: 0; }
.lw-ev-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: #E6F5EC; color: #1E7A47; flex: none; } .lw-ev-ic.dj { background: #EDE7FD; color: #6B4FA0; } .lw-ev-ic.weddings { background: #FCE7EA; color: #D2394F; } .lw-ev-ic.decor { background: #FFF1DB; color: #C98A1C; } .lw-ev-ic.photography { background: #E4ECFF; color: #3D7BFF; } .lw-ev-ic.events { background: #FBEFF0; color: #A33A50; } .lw-ev-ic.calendar { background: #ECE8E0; color: var(--ink-2); }
.lw-x { border: 0; background: none; color: var(--ink-3); cursor: pointer; padding: 6px; border-radius: 8px; } .lw-x:hover { background: var(--hover); color: #D2394F; }
.lw-photos { display: flex; gap: 10px; flex-wrap: wrap; } .lw-up { width: 96px; height: 76px; border: 1px dashed var(--line-2); border-radius: 10px; display: grid; place-items: center; align-content: center; gap: 2px; cursor: pointer; font-size: 12px; color: var(--ink-2); background: var(--card); } .lw-ph { position: relative; width: 104px; height: 76px; border-radius: 10px; overflow: hidden; } .lw-ph img { width: 100%; height: 100%; object-fit: cover; } .lw-ph button { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .9); cursor: pointer; display: grid; place-items: center; }
.lw-venue { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 10; margin-bottom: 12px; } .lw-venue img { width: 100%; height: 100%; object-fit: cover; display: block; } .lw-venue > div { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px; display: flex; gap: 8px; align-items: flex-start; color: #fff; background: linear-gradient(180deg, transparent, rgba(20, 16, 12, .85)); } .lw-venue b { display: block; font-size: 15px; } .lw-venue small { font-size: 11.5px; opacity: .9; }
.lw-tiles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 14px; } .lw-tiles > div { border: 1px solid var(--line); border-radius: 10px; padding: 10px; text-align: left; } .lw-tiles svg { color: var(--gold-deep); } .lw-tiles b { display: block; font-size: 13px; margin-top: 8px; } .lw-tiles small { font-size: 11px; color: var(--ink-3); }
.lw-sum-h { font-size: 14px; font-weight: 700; margin: 14px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.lw-tl > div { display: flex; gap: 10px; align-items: center; padding: 6px 0; position: relative; } .lw-tl b { display: block; font-size: 13.5px; } .lw-tl small { font-size: 12px; color: var(--ink-3); }
.lw-sum-ph { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .lw-sum-ph img, .lw-sum-ph span { width: 100%; aspect-ratio: 1; border-radius: 8px; object-fit: cover; background: var(--bg-2); display: grid; place-items: center; font-weight: 600; }
.lw-sum-top { display: flex; gap: 12px; align-items: flex-start; } .lw-sum-top img { width: 86px; height: 86px; border-radius: 12px; object-fit: cover; } .lw-sum-top b { font-size: 16px; display: block; } .lw-sum-top small { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-2); margin-top: 3px; } .lw-sum-top .rv-tag { display: inline-flex; gap: 4px; align-items: center; }
.lw-sum-kv { display: grid; gap: 10px; } .lw-sum-kv > div { display: flex; gap: 10px; align-items: flex-start; } .lw-sum-kv svg { color: var(--gold-deep); flex: none; margin-top: 1px; } .lw-sum-kv b { display: block; font-size: 13.5px; font-weight: 600; } .lw-sum-kv small { display: block; font-size: 12px; color: var(--ink-3); }
.lw-sub { margin: 4px 0 10px; } .lw-sub b { display: block; font-size: 14.5px; } .lw-sub small { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.lw-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; } .lw-card { position: relative; border: 1px solid var(--line-2); border-radius: 12px; padding: 22px 10px 16px; background: var(--card); display: grid; justify-items: center; gap: 10px; font: inherit; cursor: pointer; } .lw-card svg { color: var(--ink); } .lw-card b { font-size: 13.5px; } .lw-card .ck { position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--line-2); display: grid; place-items: center; background: var(--card); } .lw-card.on { background: #FBF6EC; border-color: var(--gold); } .lw-card.on .ck { background: var(--gold); border-color: var(--gold); color: #fff; }
.lw-pk { display: flex; gap: 8px; flex-wrap: wrap; } .lw-pkb { border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; background: var(--card); font: inherit; cursor: pointer; text-align: center; } .lw-pkb b { display: block; font-size: 13px; } .lw-pkb small { font-size: 11px; color: var(--ink-3); } .lw-pkb.on { background: #FBF6EC; border-color: var(--gold); }
.lw-radios { display: grid; gap: 8px; } .lw-radios label { display: flex; gap: 10px; align-items: center; font-size: 13.5px; cursor: pointer; } .lw-radios input { accent-color: var(--gold); width: 16px; height: 16px; }
.lw-link { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; } .lw-link .lw-in { flex: 1; }
.lw-prio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; } .lw-prio button { border: 1px solid var(--line-2); border-radius: 10px; padding: 11px; background: var(--card); font: inherit; font-size: 13.5px; cursor: pointer; } .lw-prio button.low.on { background: #ECE8E0; } .lw-prio button.medium.on { background: #FBF6EC; border-color: var(--gold); } .lw-prio button.high.on { background: #FCE7EA; border-color: #D2394F; color: #B42A3E; }
.lw-files { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 12px; margin-bottom: 18px; } .lw-drop { border: 1px dashed var(--line-2); border-radius: 12px; padding: 22px 14px; display: grid; justify-items: center; gap: 4px; text-align: center; cursor: pointer; color: var(--ink-2); background: var(--card-2); } .lw-drop.over { border-color: var(--gold); background: #FBF6EC; } .lw-drop b { font-size: 13px; color: var(--ink); } .lw-drop small { font-size: 11.5px; color: var(--ink-3); }
.lw-file { position: relative; border: 1px solid var(--line); border-radius: 12px; padding: 8px; background: var(--card); } .lw-file img, .lw-file .doc { width: 100%; height: 72px; object-fit: cover; border-radius: 8px; display: grid; place-items: center; background: var(--bg-2); color: #D2394F; } .lw-file b { display: block; font-size: 12px; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lw-file small { font-size: 11px; color: var(--ink-3); } .lw-file button { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .95); cursor: pointer; display: grid; place-items: center; }
.lw-foot { display: flex; gap: 10px; align-items: center; padding: 14px 30px 22px; border-top: 1px solid var(--line); } .lw-foot .sp { flex: 1; } .lw-foot .btn { padding: 12px 20px; font-size: 14px; } .lw-foot .btn.primary b { font-weight: 600; }
@media (max-width: 1200px) { .lw-body { grid-template-columns: 1fr; } .lw-steps { display: flex; overflow-x: auto; } .lw-steps::before { display: none; } .lw-cards { grid-template-columns: 1fr 1fr; } .lw-files { grid-template-columns: 1fr 1fr; } }
.lw-row2 > *, .lw-row3 > *, .lw-names > *, .lw-box, .lw-main, .lw-side { min-width: 0; } .lw-in input, .lw-in select { width: 100%; }
.lw-ev { grid-template-columns: 14px 40px minmax(110px, 1fr) minmax(150px, 1fr) minmax(230px, 1.4fr) 28px; } .lw-ev .lw-in { min-width: 0; } .lw-ev .lw-in input { min-width: 0; width: 100%; }
.lw-side, .lw-steps { position: sticky; top: 0; }
.lw-tiles b { font-size: 12.5px; }

/* ---------- the lead page: header, tabs, rail, and each tab ---------- */
.ld-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin: 4px 0 16px; } .ld-head h1 { font-size: 30px; font-weight: 700; margin: 0 0 12px; letter-spacing: -.01em; }
.ld-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .ld-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 9px 12px; font-size: 13px; color: var(--ink); text-decoration: none; } .ld-chip svg { color: var(--ink-3); }
.ld-stage { border: 0; border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 13px; font-weight: 600; background: #E6F5EC; color: #1E7A47; cursor: pointer; } .ld-stage.won { background: #E6F5EC; } .ld-stage.lost { background: #FCE7EA; color: #B42A3E; } .ld-stage.big { width: 100%; padding: 12px 14px; font-size: 14px; background: var(--card); border: 1px solid var(--line-2); color: var(--ink); margin-bottom: 14px; }
.ld-head-r { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex: none; } .ld-nav { display: flex; gap: 8px; } .ld-nav .btn { padding: 10px 12px; } .ld-nav .btn.primary { padding: 10px 18px; }
.ld-owner { display: flex; gap: 12px; align-items: center; } .ld-owner .who { display: flex; gap: 10px; align-items: center; } .ld-owner .who small { display: block; font-size: 11.5px; color: var(--ink-3); } .ld-owner .who b { font-size: 13.5px; } .ld-assign { border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 13px; }
.ld-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; } .ld-tabs a { padding: 12px 16px; font-size: 14px; color: var(--ink-2); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; } .ld-tabs a.on { color: var(--gold-deep); font-weight: 600; border-bottom-color: var(--gold); }
.ld-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; } .ld-grid.three { grid-template-columns: 330px minmax(0, 1fr) 320px; } .ld-grid.three.mail { grid-template-columns: 370px minmax(0, 1fr) 300px; } @media (max-width: 1300px) { .ld-grid, .ld-grid.three, .ld-grid.three.mail { grid-template-columns: 1fr; } }
.ld-main { display: grid; gap: 16px; min-width: 0; } .ld-rail { display: grid; gap: 16px; } .ld-rail .card, .ld-main .card { padding: 20px; } .ld-rail h3, .ld-main h3 { font-size: 15.5px; margin: 0 0 12px; } .card-h h3 { margin: 0; }
.ld-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .ld-row2 > * { min-width: 0; } .ld-row2.tight { gap: 14px; margin-top: 14px; } .ld-row2.tight small { display: block; font-size: 12px; color: var(--ink-3); margin-bottom: 6px; } .ld-big { font-size: 20px; font-weight: 700; }
.ld-acts { display: grid; gap: 8px; } .ld-acts .btn { width: 100%; justify-content: center; padding: 11px; }
.ld-person { display: flex; gap: 10px; align-items: center; padding: 7px 0; } .ld-person .avatar { width: 38px; height: 38px; font-size: 12.5px; } .ld-person b { display: block; font-size: 13.5px; } .ld-person small { font-size: 12px; color: var(--ink-3); }
.ld-contact { display: flex; gap: 16px; align-items: flex-start; } .ld-couple { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; flex: none; } .ld-people { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; flex: 1; } .ld-people b { font-size: 15px; } .ld-people .rv-tag { margin-left: 6px; }
.ld-kv { display: grid; gap: 6px; margin-top: 10px; font-size: 13px; } .ld-kv span { display: flex; align-items: center; gap: 8px; } .ld-kv svg { color: var(--ink-3); } .ld-kv.row { display: flex; flex-wrap: wrap; gap: 14px; }
.ld-facts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 16px; } .ld-facts > div { background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; } .ld-facts small { display: block; font-size: 11.5px; color: var(--ink-3); margin-bottom: 6px; } .ld-facts b { display: flex; align-items: center; gap: 6px; font-size: 13.5px; }
.ld-inline { border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 12.5px; color: var(--ink); }
.ld-steps { display: flex; justify-content: space-between; position: relative; margin: 8px 4px 4px; } .ld-steps::before { content: ''; position: absolute; left: 12px; right: 12px; top: 11px; height: 2px; background: var(--line-2); } .ld-steps > div { display: grid; justify-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-3); position: relative; z-index: 1; } .ld-steps i { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--card); display: grid; place-items: center; color: #fff; } .ld-steps .done i, .ld-steps .on i { background: var(--gold); border-color: var(--gold); } .ld-steps .on span { color: var(--gold-deep); font-weight: 600; }
.ld-prob { display: flex; align-items: center; gap: 10px; } .ld-prob .prog { flex: 1; margin: 0; height: 10px; } .ld-prob b { font-size: 14px; }
.ld-events { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } @media (max-width: 1400px) { .ld-events { grid-template-columns: repeat(3, 1fr); } } .ld-evcard { border: 1px solid var(--line); border-radius: 12px; padding: 8px; position: relative; cursor: pointer; } .ld-evcard img { width: 100%; aspect-ratio: 1.5; object-fit: cover; border-radius: 8px; display: block; } .ld-evcard .icon-btn { position: absolute; top: 12px; right: 12px; background: rgba(255, 255, 255, .9); } .ld-evcard b { display: block; font-size: 14px; margin: 10px 0 2px; } .ld-evcard small { display: block; font-size: 12px; color: var(--ink-2); } .ld-evcard .rv-tag { margin-top: 8px; }
.ld-note { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); } .ld-note:last-child { border-bottom: 0; } .ld-note .avatar { width: 38px; height: 38px; flex: none; font-size: 12.5px; } .ld-note > div { flex: 1; min-width: 0; } .ld-note-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .ld-note-h b { font-size: 13.5px; } .ld-note-h small { color: var(--ink-3); font-size: 12px; } .ld-note p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ink); }
.ld-todos { display: grid; gap: 6px; margin-top: 8px; } .ld-todos label { display: flex; gap: 8px; align-items: center; font-size: 13px; } .ld-todos input { accent-color: var(--gold); width: 16px; height: 16px; } .ld-todos .done { text-decoration: line-through; color: var(--ink-3); }
.ld-nfile { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-top: 8px; background: var(--card-2); } .ld-nfile svg { color: #D2394F; } .ld-nfile b { display: block; font-size: 13px; } .ld-nfile small { font-size: 11.5px; color: var(--ink-3); }
.ld-act > div { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); } .ld-act > div:last-child { border-bottom: 0; } .ld-act i { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex: none; } .ld-act b { display: block; font-size: 13px; } .ld-act small { display: block; font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; } .ld-act > div > div { flex: 1; min-width: 0; } .ld-act time { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.ld-evlist .ld-evrow { display: flex; gap: 10px; align-items: center; padding: 10px; border: 1px solid transparent; border-radius: 12px; cursor: pointer; margin-bottom: 4px; } .ld-evrow:hover { background: var(--bg-2); } .ld-evrow.on { border-color: var(--gold); background: #FBF6EC; } .ld-evrow img { width: 88px; height: 88px; border-radius: 10px; object-fit: cover; flex: none; } .ld-evrow > div { flex: 1; min-width: 0; } .ld-evrow b { display: block; font-size: 14.5px; } .ld-evrow small { display: flex; gap: 4px; align-items: center; font-size: 12px; color: var(--ink-2); } .ld-evrow .rv-tag { margin-top: 6px; } .ld-evrow > svg { color: var(--ink-3); }
.ld-evmain { display: grid; gap: 16px; min-width: 0; } .ld-evhero { display: flex; gap: 16px; align-items: center; } .ld-evhero img { width: 116px; height: 116px; border-radius: 12px; object-fit: cover; flex: none; } .ld-evhero small { color: var(--ink-3); font-size: 12.5px; } .ld-evhero h2 { font-size: 24px; margin: 2px 0 8px; } .ld-evhero .rv-tag { margin-top: 10px; }
.ld-venuebox { display: flex; gap: 12px; align-items: center; border: 1px solid var(--line-2); border-radius: 10px; padding: 12px 14px; } .ld-venuebox > div { flex: 1; } .ld-venuebox b { display: block; font-size: 14px; } .ld-venuebox small { font-size: 12.5px; color: var(--ink-2); } .ld-venuebox svg { color: var(--ink-3); }
.ld-svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; } .ld-svc button { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line-2); border-radius: 10px; padding: 12px 14px; background: var(--card); font: inherit; font-size: 13.5px; cursor: pointer; } .ld-svc button i { margin-left: auto; width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--line-2); display: grid; place-items: center; } .ld-svc button.on { background: #FBF6EC; border-color: var(--gold); } .ld-svc button.on i { background: var(--gold); border-color: var(--gold); color: #fff; }
.ld-sum > div { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; } .ld-sum > div:last-child { border-bottom: 0; } .ld-sum i { width: 22px; height: 22px; border-radius: 6px; background: var(--tint); color: var(--gold-deep); display: grid; place-items: center; } .ld-sum span { color: var(--ink-2); } .ld-sum b { text-align: right; max-width: 170px; } .ld-sum b small { color: var(--ink-3); font-weight: 400; font-size: 11.5px; }
.ld-qn { display: flex; gap: 10px; align-items: flex-start; background: #FBF6EC; border-radius: 10px; padding: 12px; } .ld-qn svg { color: var(--gold-deep); flex: none; margin-top: 2px; } .ld-qn textarea { flex: 1; border: 0; background: none; font: inherit; font-size: 13px; resize: vertical; color: var(--ink); } .ld-qn textarea:focus { outline: none; }
.ld-info { display: flex; gap: 10px; background: #EAF0FA; border-radius: 12px; padding: 14px; font-size: 12.5px; color: #2B5BA8; } .ld-info svg { flex: none; } .ld-info b { display: block; font-size: 13.5px; margin-bottom: 4px; } .ld-info small { font-size: 12.5px; line-height: 1.5; color: #3A5A8C; }
.ld-tip { display: flex; gap: 10px; background: #FBF6EC; border-radius: 12px; padding: 14px; } .ld-tip svg { color: var(--gold-deep); flex: none; } .ld-tip b { display: block; font-size: 13.5px; margin-bottom: 4px; } .ld-tip small { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.ld-composer { display: flex; gap: 12px; align-items: flex-start; } .ld-composer .avatar { width: 40px; height: 40px; flex: none; } .ld-composer > div { flex: 1; min-width: 0; } .ld-composer textarea { width: 100%; border: 1px solid var(--line-2); border-radius: 10px; padding: 12px; font: inherit; font-size: 13.5px; resize: vertical; color: var(--ink); background: var(--card); }
.ld-comp-tools { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; } .ld-comp-tools > span { display: flex; gap: 10px; align-items: center; color: var(--ink-3); font-size: 12px; } .ld-comp-tools > span b { font-weight: 600; } .ld-comp-tools .btn.primary { margin-left: auto; } .ld-file-btn { cursor: pointer; color: var(--ink-3); display: grid; }
.ld-filters { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .ld-filters .rv-tabs { margin: 0; } .ld-filters .search { min-width: 220px; }
.ld-cat { display: flex; gap: 10px; align-items: center; padding: 8px 0; font-size: 13.5px; cursor: pointer; } .ld-cat i { width: 26px; height: 26px; border-radius: 7px; background: var(--tint); color: var(--gold-deep); display: grid; place-items: center; } .ld-cat span { flex: 1; } .ld-cat b { color: var(--ink-3); font-weight: 500; }
.ld-tpl { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 11px 12px; font: inherit; font-size: 13.5px; margin-bottom: 8px; cursor: pointer; } .ld-tpl:hover { border-color: var(--gold); } .ld-tpl svg { color: var(--ink-3); }
.ld-maillist { padding: 14px; } .ld-mailtop { display: flex; gap: 8px; } .ld-mailtop .search { flex: 1; }
.ld-mailrow { display: flex; gap: 10px; align-items: flex-start; padding: 12px 10px; border-radius: 10px; cursor: pointer; } .ld-mailrow:hover { background: var(--bg-2); } .ld-mailrow.on { background: #FBF6EC; } .ld-mailrow .avatar { width: 40px; height: 40px; flex: none; font-size: 12.5px; } .ld-mailrow > div { flex: 1; min-width: 0; } .ld-mailrow b { display: flex; justify-content: space-between; font-size: 13.5px; } .ld-mailrow b time { font-size: 11.5px; color: var(--ink-3); font-weight: 400; } .ld-mailrow span { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ld-mailrow small { display: block; font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ld-mailic { color: var(--ink-3); }
.ld-mailview { padding: 0; } .ld-mailhead { padding: 20px 22px 12px; } .ld-mailhead h2 { font-size: 19px; margin: 0 0 12px; display: flex; gap: 10px; align-items: center; } .ld-mailfrom { display: flex; gap: 10px; align-items: center; font-size: 13px; } .ld-mailfrom .avatar { width: 40px; height: 40px; }
.ld-mailbody { padding: 10px 22px 20px; font-size: 14px; line-height: 1.7; min-height: 180px; } .ld-mailbody iframe { width: 100%; height: 420px; border: 0; border-radius: 10px; background: #fff; }
.ld-reply { background: var(--card-2); border-top: 1px solid var(--line); padding: 16px 22px 20px; border-radius: 0 0 16px 16px; } .ld-reply h3 { margin-bottom: 6px; } .ld-reply .cp-tabs { margin-bottom: 10px; } .ld-reply textarea { width: 100%; border: 1px solid var(--line-2); border-radius: 10px; padding: 12px; font: inherit; font-size: 13.5px; background: var(--card); color: var(--ink); resize: vertical; }
.ld-rel { display: flex; gap: 10px; align-items: center; padding: 8px 0; text-decoration: none; color: inherit; } .ld-rel i { width: 32px; height: 32px; border-radius: 8px; background: var(--tint); color: var(--gold-deep); display: grid; place-items: center; flex: none; } .ld-rel > div { flex: 1; min-width: 0; } .ld-rel b { display: block; font-size: 13px; } .ld-rel small { font-size: 12px; color: var(--ink-3); } .ld-rel > svg { color: var(--ink-3); }
.ld-tasktop { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 14px 16px !important; } .ld-tasktop .rv-tabs { margin: 0; } .ld-tasktop .search { flex: 1; min-width: 180px; } .ld-tasktop .btn.primary { padding: 10px 16px; }
.ld-tgroup { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; } .ld-tgh { display: flex; align-items: center; gap: 8px; padding: 12px 18px; font-weight: 700; font-size: 14px; } .ld-tgroup.red .ld-tgh { background: #FCE7EA; color: #B42A3E; } .ld-tgroup.amber .ld-tgh { background: #FFF1DB; color: #9A6510; } .ld-tgroup.blue .ld-tgh { background: #EAF0FA; color: #2B5BA8; } .ld-tgroup.green .ld-tgh { background: #E6F5EC; color: #1E7A47; }
.ld-task { display: grid; grid-template-columns: 22px minmax(0, 1fr) 130px 170px 90px 30px; gap: 14px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--line); cursor: pointer; } .ld-task input { width: 18px; height: 18px; accent-color: var(--gold); } .ld-task .t b { display: block; font-size: 14px; } .ld-task .t small { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 2px; } .ld-task .m small { display: block; font-size: 11.5px; color: var(--ink-3); margin-bottom: 4px; } .ld-task .m b { display: flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 500; } .ld-task .m .avatar { width: 24px; height: 24px; font-size: 9px; } .ld-task.done .t b, .ld-task.done .t small { text-decoration: line-through; color: var(--ink-3); } @media (max-width: 1100px) { .ld-task { grid-template-columns: 22px 1fr 30px; } .ld-task .m { display: none; } }
.ld-tprog { display: flex; gap: 14px; align-items: center; } .ld-tprog .dv-donut-w { width: 96px; height: 96px; } .ld-tprog ul { list-style: none; flex: 1; display: grid; gap: 8px; font-size: 13px; margin: 0; padding: 0; } .ld-tprog li { display: flex; justify-content: space-between; } .ld-tprog li span { display: flex; gap: 8px; align-items: center; } .ld-tprog li i { width: 8px; height: 8px; border-radius: 50%; } .ld-tprog li i.red { background: #D2394F; } .ld-tprog li i.amber { background: #C98A1C; } .ld-tprog li i.blue { background: #3D7BFF; } .ld-tprog li i.green { background: #1E9E5A; }
.ld-folders { display: flex; gap: 10px; flex-wrap: wrap; } .ld-folder { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); background: var(--card); border-radius: 12px; padding: 12px 14px; font: inherit; cursor: pointer; text-align: left; min-width: 170px; } .ld-folder svg { color: var(--gold-deep); background: var(--tint); border-radius: 8px; padding: 6px; width: 32px; height: 32px; } .ld-folder b { display: block; font-size: 13px; } .ld-folder small { font-size: 12px; color: var(--ink-3); } .ld-folder.on { border-color: var(--gold); background: #FBF6EC; }
.ld-fgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 1400px) { .ld-fgrid { grid-template-columns: repeat(3, 1fr); } } .ld-fcard { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px; cursor: pointer; } .ld-fcard input { position: absolute; top: 16px; left: 16px; width: 16px; height: 16px; accent-color: var(--gold); } .ld-fcard .icon-btn { position: absolute; top: 12px; right: 12px; background: rgba(255, 255, 255, .9); } .ld-fcard img, .ld-fth { width: 100%; aspect-ratio: 1.55; object-fit: cover; border-radius: 8px; display: grid; place-items: center; align-content: center; gap: 4px; background: var(--card-2); color: var(--ink-3); } .ld-fth.pdf { color: #D2394F; } .ld-fth.doc { color: #3D7BFF; } .ld-fth.video { color: #8B5CF6; } .ld-fth b { font-size: 12px; } .ld-fth.sm { width: 40px; height: 32px; aspect-ratio: auto; } .ld-fcard > b { display: block; font-size: 13px; margin: 10px 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ld-fcard > small { font-size: 12px; color: var(--ink-3); }
.ld-frow { display: grid; grid-template-columns: 18px 40px minmax(0, 1fr) 140px 80px 100px 30px; gap: 12px; align-items: center; padding: 10px 6px; border-bottom: 1px solid var(--line); font-size: 13px; cursor: pointer; } .ld-frow:last-child { border-bottom: 0; } .ld-frow img { width: 40px; height: 32px; object-fit: cover; border-radius: 6px; } .ld-frow span { color: var(--ink-3); font-size: 12.5px; }
.ld-pcard { display: grid; grid-template-columns: 96px minmax(0, 1fr) 260px; gap: 16px; border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 12px; } .ld-pcard.on { border-color: var(--gold); background: #FBF6EC; } .ld-pcard img { width: 96px; height: 130px; object-fit: cover; border-radius: 8px; } .ld-pcard-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .ld-pcard-h b { font-size: 16px; } .ld-pcard .who { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--ink-3); margin: 6px 0 12px; } .ld-pcard .who .avatar { width: 22px; height: 22px; font-size: 8px; }
.ld-pstats { display: flex; gap: 20px; } .ld-pstats > div { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; } .ld-pstats i { grid-row: span 2; color: var(--ink-3); } .ld-pstats b { font-size: 14px; } .ld-pstats small { font-size: 11.5px; color: var(--ink-3); }
.ld-pcard .r .kv { margin-bottom: 8px; } .ld-pcard .r .kv small { display: block; font-size: 11.5px; color: var(--ink-3); } .ld-pcard .r .kv b { font-size: 13px; font-weight: 500; } .ld-pcard .acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.ld-compare td:first-child { color: var(--ink-2); }
.ld-ppreview { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 3 / 4; background: #1A1714; } .ld-ppreview img { width: 100%; height: 100%; object-fit: cover; opacity: .55; display: block; } .ld-ppreview > div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #F3EBDD; padding: 20px; gap: 6px; } .ld-ppreview small { font-size: 10px; letter-spacing: .2em; } .ld-ppreview h2 { font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 500; letter-spacing: .1em; margin: 6px 0; color: #E9DCC4; } .ld-ppreview h2 i { font-style: italic; color: #C4A06A; } .ld-ppreview .logo { font-family: 'Cormorant Garamond', serif; font-size: 22px; margin-top: auto; color: #D6B87E; }
.ld-inter > div { display: flex; gap: 10px; align-items: center; padding: 8px 0; position: relative; } .ld-inter i { width: 28px; height: 28px; border-radius: 50%; background: var(--tint); color: var(--gold-deep); display: grid; place-items: center; flex: none; } .ld-inter b { display: block; font-size: 13px; } .ld-inter small { font-size: 12px; color: var(--ink-3); }
.ld-auto { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); } .ld-auto:last-child { border-bottom: 0; } .ld-auto i { width: 36px; height: 36px; border-radius: 9px; background: var(--tint); color: var(--gold-deep); display: grid; place-items: center; flex: none; } .ld-auto > div { flex: 1; } .ld-auto b { display: block; font-size: 14px; } .ld-auto small { font-size: 12.5px; color: var(--ink-3); }
.ld-day { background: var(--card-2); border-radius: 8px; padding: 8px 12px; font-size: 13px; font-weight: 700; margin: 12px 0 4px; }
.ld-hrow { display: grid; grid-template-columns: 10px 70px 44px minmax(0, 1fr) 110px 150px 30px; gap: 12px; align-items: center; padding: 12px 6px; border-bottom: 1px solid var(--line); } .ld-hrow .ld-dot { width: 10px; height: 10px; border-radius: 50%; } .ld-hrow time { font-size: 12.5px; color: var(--ink-2); } .ld-hrow i { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; } .ld-hrow .t b { display: block; font-size: 14px; } .ld-hrow .t span { display: block; font-size: 12.5px; color: var(--ink-2); } .ld-hrow .t span small { color: var(--ink-3); } .ld-hrow .who { display: flex; gap: 8px; align-items: center; font-size: 12.5px; } .ld-hrow .who .avatar { width: 28px; height: 28px; font-size: 10px; } @media (max-width: 1100px) { .ld-hrow { grid-template-columns: 10px 44px 1fr 30px; } .ld-hrow time, .ld-hrow .k, .ld-hrow .who { display: none; } }
.ld-hf { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; cursor: pointer; } .ld-hf.on { background: #FBF6EC; } .ld-hf input { accent-color: var(--gold); width: 16px; height: 16px; } .ld-hf i { width: 24px; height: 24px; border-radius: 6px; background: var(--tint); color: var(--gold-deep); display: grid; place-items: center; } .ld-hf b { margin-left: auto; color: var(--ink-3); font-weight: 500; }
.ld-ms > div { display: flex; gap: 10px; align-items: center; padding: 7px 0; } .ld-ms i { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--ink-3); } .ld-ms .done i { background: #1E9E5A; border-color: #1E9E5A; color: #fff; } .ld-ms b { display: block; font-size: 13.5px; } .ld-ms small { font-size: 12px; color: var(--ink-3); }
.ld-ma-h { font-size: 11px; letter-spacing: .08em; color: var(--ink-3); margin: 14px 0 8px; } .ld-ma { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ld-ma-b { display: flex; gap: 12px; align-items: center; text-align: left; border: 0; background: none; padding: 8px; border-radius: 10px; font: inherit; cursor: pointer; } .ld-ma-b:hover { background: var(--hover); } .ld-ma-b i { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; flex: none; } .ld-ma-b b { display: block; font-size: 14px; color: #2B4C8C; } .ld-ma-b.danger b { color: #B42A3E; } .ld-ma-b small { font-size: 12px; color: var(--ink-3); }
.ld-chip { padding: 7px 10px; font-size: 12.5px; } .ld-stage { padding: 8px 10px; font-size: 12.5px; } .ld-head h1 { margin-bottom: 10px; }

/* ---------- Create New Proposal: the nine-step wizard ---------- */
.pw-head { display: flex; justify-content: space-between; align-items: flex-start; margin: 4px 0 14px; gap: 16px; } .pw-head h1 { font-size: 28px; font-weight: 700; margin: 0; } .pw-head p { color: var(--ink-2); font-size: 14px; margin: 4px 0 0; } .pw-back { font-size: 13px; display: inline-flex; gap: 4px; align-items: center; margin-bottom: 6px; } .pw-back svg { transform: rotate(90deg); } .pw-head-r { display: flex; gap: 8px; } .btn.dark { background: #1E1B16; color: #fff; border-color: #1E1B16; }
.pw-steps { display: flex; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; margin-bottom: 14px; overflow-x: auto; }
.pw-step { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; font: inherit; font-size: 13px; color: var(--ink-3); cursor: pointer; padding: 6px 8px; white-space: nowrap; } .pw-step .n { width: 26px; height: 26px; border-radius: 50%; background: #ECE8E0; color: var(--ink-2); display: grid; place-items: center; font-weight: 600; font-size: 12px; } .pw-step.on .n, .pw-step.done .n { background: var(--gold); color: #fff; } .pw-step.on .t { color: var(--gold-deep); font-weight: 600; } .pw-step.done .t { color: var(--ink); } .pw-step .ok { color: var(--gold); } .pw-stepsep { flex: 1; min-width: 14px; height: 1px; background: var(--line-2); margin: 0 4px; }
.pw-body { min-height: 400px; } .pw-body .card { padding: 20px; margin: 0; } .pw-body h3 { font-size: 15.5px; margin: 0 0 6px; } .pw-body .card-h { margin-bottom: 12px; } .pw-body .card-h h3 { margin: 0; }
.pw-foot { display: flex; gap: 10px; align-items: center; padding: 16px 0 26px; margin-top: 14px; border-top: 1px solid var(--line); } .pw-foot .sp { flex: 1; } .pw-foot .btn { padding: 12px 20px; font-size: 14px; } .pw-foot #pwBack svg { transform: rotate(90deg); }
.pw-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; } .pw-grid.three { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 320px; } .pw-grid.three.ct, .pw-grid.three.qs, .pw-grid.three.rv { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 320px; } .pw-grid.three.qs .pw-col2, .pw-grid.three.rv .pw-col2 { grid-column: span 2; } .pw-grid.three.rv { grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr) 320px; } .pw-grid.three.rv .pw-col2 { grid-column: auto; }
@media (max-width: 1300px) { .pw-grid, .pw-grid.three, .pw-grid.three.ct, .pw-grid.three.qs, .pw-grid.three.rv { grid-template-columns: 1fr; } .pw-grid.three.qs .pw-col2 { grid-column: auto; } }
.pw-main, .pw-col, .pw-col2, .pw-rail { display: grid; gap: 14px; min-width: 0; align-content: start; } .pw-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .pw-row2.wide { grid-template-columns: 1.6fr 1fr; } .pw-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } .pw-row2 > *, .pw-row3 > * { min-width: 0; }
.pw-sech { display: flex; gap: 14px; align-items: center; } .pw-sech.small { margin-bottom: 12px; } .pw-secic { width: 48px; height: 48px; border-radius: 12px; background: #F6EEDF; color: var(--gold-deep); display: grid; place-items: center; flex: none; } .pw-sech.small .pw-secic { width: 40px; height: 40px; border-radius: 10px; } .pw-sech h3 { margin: 0; } .pw-sech small { color: var(--ink-2); font-size: 13px; } .pw-sech .r { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; } .pw-sech > div:not(.r) { flex: 1; min-width: 0; } .pw-num { width: 36px; height: 36px; border-radius: 8px; background: #F6EEDF; color: var(--gold-deep); display: grid; place-items: center; font-weight: 700; flex: none; }
.pw-side h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; } .pw-side.flush { padding: 0 !important; overflow: hidden; } .pw-side.flush h3 { padding: 16px 18px 10px; margin: 0; } .pw-side.flush > *:not(h3):not(.pw-cover) { margin-left: 18px; margin-right: 18px; } .pw-side.flush > *:last-child { margin-bottom: 16px; }
.pw-cover { position: relative; } .pw-cover img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; } .pw-cover .btn { position: absolute; right: 10px; bottom: 10px; background: rgba(255, 255, 255, .95); }
.pw-side-name { font-size: 20px; margin: 12px 0 0; } .pw-side-sub { display: block; color: var(--ink-3); font-size: 13px; margin-bottom: 10px; } .pw-facts { display: grid; gap: 8px; font-size: 13px; } .pw-facts > div { display: flex; gap: 8px; align-items: center; } .pw-facts svg { color: var(--ink-3); }
.pw-evsum > div { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); cursor: pointer; } .pw-evsum img { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; } .pw-evsum b { display: block; font-size: 13.5px; } .pw-evsum small { display: flex; gap: 4px; align-items: center; font-size: 12px; color: var(--ink-3); } .pw-evsum > div > div { flex: 1; } .pw-evsum > div > svg { color: var(--ink-3); }
.pw-people { display: grid; grid-template-columns: 1fr 1fr 190px; gap: 14px; } .pw-person-h { display: flex; gap: 8px; align-items: center; font-size: 14px; margin-bottom: 12px; } .pw-person-b { display: flex; gap: 14px; } .pw-av { position: relative; flex: none; } .pw-av .avatar { width: 84px; height: 84px; font-size: 26px; } .pw-av i { position: absolute; right: -2px; bottom: 6px; width: 24px; height: 24px; border-radius: 50%; background: var(--card); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-2); } .pw-person-b .lw-row2 { flex: 1; gap: 10px; margin: 0; } .pw-person .lw-f label { font-size: 12.5px; }
.pw-primary { display: grid; gap: 8px; align-content: start; } .pw-primary > b { display: flex; gap: 6px; align-items: center; color: var(--gold-deep); font-size: 13.5px; margin-bottom: 4px; } .pw-primary label { display: flex; gap: 8px; align-items: center; font-size: 13px; cursor: pointer; } .pw-primary input { accent-color: var(--gold); }
.pw-tglline { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; cursor: pointer; }
.pw-evstrip { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 8px; } .pw-evc { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 8px; background: var(--card); font: inherit; cursor: pointer; text-align: left; min-width: 190px; position: relative; flex: none; } .pw-evc img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; } .pw-evc b { display: block; font-size: 13.5px; } .pw-evc small { display: block; font-size: 11.5px; color: var(--ink-2); } .pw-evc.on { background: #FBF6EC; border-color: var(--gold); } .pw-evc .x { position: absolute; top: 6px; right: 6px; color: var(--ink-3); } .pw-evc.add { justify-content: center; flex-direction: column; gap: 4px; color: var(--gold-deep); min-width: 84px; font-size: 12px; text-align: center; }
.pw-evdet { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 6px; } .pw-evdet-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .pw-evdet-h b { font-size: 15px; } .link.danger { color: #B42A3E; } .pw-evdet-g { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; } .pw-evside { display: grid; gap: 10px; align-content: start; } .pw-evside .lw-f { margin: 0; } .lw-row2.four { grid-template-columns: repeat(4, 1fr); }
.pw-venue { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--card-2); } .pw-venue-h { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; } .pw-venue .lw-f { margin-bottom: 10px; }
.pw-pks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; } .pw-pk { position: relative; border: 1px solid var(--line-2); border-radius: 12px; padding: 12px; cursor: pointer; background: var(--card); } .pw-pk .radio { position: absolute; top: 12px; left: 12px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--card); z-index: 1; } .pw-pk.on { border-color: var(--gold); background: #FBF6EC; } .pw-pk.on .radio { border-color: var(--gold); box-shadow: inset 0 0 0 4px #fff; background: var(--gold); } .pw-pk img { width: calc(100% - 22px); margin-left: 22px; aspect-ratio: 1.6; object-fit: cover; border-radius: 8px; } .pw-pk > b { display: block; font-size: 15px; margin: 10px 0 0 22px; } .pw-pk .price { font-size: 16px; font-weight: 700; color: var(--gold-deep); margin: 2px 0 8px 22px; } .pw-pk ul { list-style: none; margin: 0 0 10px 22px; padding: 0; display: grid; gap: 5px; font-size: 12.5px; color: var(--ink-2); } .pw-pk li { display: flex; gap: 6px; align-items: center; } .pw-pk li svg { color: var(--ink-3); } .pw-pk .btn { width: 100%; justify-content: center; }
.pw-svc td { vertical-align: middle; } .pw-svc tr.off td { opacity: .5; } .pw-svcic { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-2); flex: none; background: var(--card); } .pw-price { width: 90px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 13px; text-align: right; }
.pw-pksum-h { display: flex; justify-content: space-between; align-items: center; margin: 12px 0 10px; } .pw-pksum-h b { font-size: 16px; } .pw-pksum-h b:last-child { font-size: 20px; }
.pw-quick { display: flex; gap: 10px; align-items: center; padding: 8px 0; cursor: pointer; } .pw-quick input { accent-color: var(--gold); width: 16px; height: 16px; } .pw-quick img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; } .pw-quick > div { flex: 1; } .pw-quick b { display: block; font-size: 13px; } .pw-quick small { color: var(--ink-3); } .pw-plus { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--gold); color: var(--gold-deep); display: grid; place-items: center; }
.pw-custom { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 14px; } .pw-cats { display: grid; gap: 4px; align-content: start; } .pw-cats button { display: flex; align-items: center; gap: 10px; border: 0; background: none; border-radius: 10px; padding: 11px 12px; font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer; text-align: left; } .pw-cats button svg { color: var(--ink-3); } .pw-cats button.on { background: #FBF6EC; color: var(--gold-deep); box-shadow: inset 3px 0 0 var(--gold); } .pw-cats button.on svg { color: var(--gold-deep); } .pw-cats button b { margin-left: auto; font-size: 11px; background: var(--bg-2); border-radius: 999px; padding: 1px 8px; color: var(--ink-3); } .pw-cats button.on b { background: var(--gold); color: #fff; } .pw-cats button.add { color: var(--gold-deep); }
.pw-items { background: var(--card-2); border-radius: 12px; padding: 10px 12px; } .pw-items h4 { display: flex; gap: 6px; align-items: center; margin: 4px 0 8px; font-size: 14px; } .pw-item { display: grid; grid-template-columns: 18px 40px minmax(0, 1fr) 100px 70px 70px 80px; gap: 10px; align-items: center; padding: 9px 6px; background: var(--card); border-radius: 10px; margin-bottom: 6px; } .pw-item input[type=checkbox] { accent-color: var(--gold); width: 16px; height: 16px; } .pw-item img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; } .pw-item b { display: block; font-size: 13px; } .pw-item small { font-size: 11.5px; color: var(--ink-3); } .pw-item .rate { font-size: 12px; color: var(--ink-2); text-align: right; } .pw-item .tot { text-align: right; font-size: 13px; } .pw-item.on { box-shadow: inset 0 0 0 1px var(--gold); }
.pw-cov { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 10px; } .pw-cov small { display: block; font-size: 12px; color: var(--ink-2); margin-bottom: 6px; } .pw-cov .lw-step { max-width: 130px; }
.pw-evhero { display: flex; gap: 12px; align-items: center; background: var(--card-2); border-radius: 12px; padding: 10px; margin-bottom: 12px; } .pw-evhero img { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; } .pw-evhero b { display: block; font-size: 15px; } .pw-evhero small { display: block; font-size: 12.5px; color: var(--ink-2); }
.pw-lines { display: grid; gap: 8px; font-size: 13px; } .pw-lines > div { display: flex; gap: 8px; align-items: center; } .pw-lines svg { color: var(--ink-3); flex: none; } .pw-lines span { flex: 1; } .pw-lines b { font-weight: 600; }
.pw-total { display: flex; justify-content: space-between; align-items: center; background: #FBF6EC; border: 1px solid #EBDDBF; border-radius: 10px; padding: 12px 14px; margin-top: 12px; font-size: 14px; font-weight: 700; } .pw-total b { font-size: 18px; } .pw-total.big b { font-size: 20px; color: var(--gold-deep); }
.pw-pktot > div { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; cursor: pointer; } .pw-pktot > div.on { background: #FBF6EC; box-shadow: inset 0 0 0 1px var(--gold); } .pw-pktot img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; } .pw-pktot span { flex: 1; font-size: 13px; } .pw-pktot b { font-size: 13.5px; }
.pw-adtable th.ck, .pw-adtable td.ck { width: 24px; } .pw-adtable tr.on td { background: #FBF6EC; } .pw-adsel { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); } .pw-adsel > div { flex: 1; } .pw-adsel b { display: block; font-size: 13px; } .pw-adsel small { color: var(--ink-3); font-size: 12px; }
.pw-assign { padding: 14px !important; background: var(--card-2) !important; } .pw-assign-h { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; font-size: 13.5px; } .pw-assign-h small { margin-left: auto; color: var(--ink-3); } .pw-tm { display: flex; gap: 10px; align-items: center; background: var(--card); border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; } .pw-tm .avatar { width: 36px; height: 36px; font-size: 12px; } .pw-tm > div { flex: 1; } .pw-tm b { display: block; font-size: 13.5px; } .pw-tm small { font-size: 12px; color: var(--ink-3); } .pw-addsel { width: 100%; border: 1px dashed var(--gold); background: #FBF6EC; color: var(--gold-deep); border-radius: 10px; padding: 10px; font: inherit; font-size: 13px; margin-top: 4px; }
.pw-extra { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); } .pw-extra:last-child { border-bottom: 0; } .pw-extra > div { flex: 1; } .pw-extra b { display: block; font-size: 13px; } .pw-extra small { font-size: 12px; color: var(--ink-3); }
.pw-radio { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; cursor: pointer; margin-bottom: 4px; } .pw-radio input { accent-color: var(--gold); margin-top: 3px; width: 16px; height: 16px; } .pw-radio b { display: block; font-size: 13.5px; } .pw-radio small { font-size: 12px; color: var(--ink-3); } .pw-radio.on { background: #FBF6EC; } .pw-radio.on b { color: var(--gold-deep); }
.pw-check { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; cursor: pointer; } .pw-check input { accent-color: var(--gold); margin-top: 2px; width: 16px; height: 16px; } .pw-check b { display: block; font-size: 13.5px; } .pw-check small { font-size: 12px; color: var(--ink-3); }
.pw-reqs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; } .pw-reqs label { display: flex; gap: 8px; align-items: center; font-size: 13px; cursor: pointer; } .pw-reqs input { accent-color: var(--gold); width: 16px; height: 16px; }
.pw-cost { margin-top: 12px; font-size: 13px; } .pw-cost > b { display: block; margin-bottom: 6px; } .pw-cost > div { display: flex; justify-content: space-between; padding: 4px 0; color: var(--ink-2); } .pw-cost > div b { color: var(--ink); }
.pw-dl { display: grid; grid-template-columns: 14px 32px minmax(0, 1.4fr) 44px minmax(0, 1fr) minmax(0, 1fr) 28px; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); } .pw-dl.off .t, .pw-dl.off .f { opacity: .45; } .pw-dl .grip { color: var(--ink-3); font-size: 11px; letter-spacing: -2px; } .pw-dl .t b { display: block; font-size: 13.5px; } .pw-dl .t small { font-size: 12px; color: var(--ink-3); } .pw-dl .f .lw-f { margin: 0; } .pw-dl .f label { font-size: 11.5px; color: var(--ink-3); font-weight: 500; } .pw-dl .lw-in { min-height: 38px; } .pw-dlh { display: grid; grid-template-columns: 14px 32px minmax(0, 1.4fr) 44px minmax(0, 1fr) minmax(0, 1fr) 28px; gap: 12px; font-size: 12px; color: var(--ink-3); padding: 6px 0; }
.pw-sum-h { font-size: 13.5px; font-weight: 700; margin: 14px 0 8px; } .pw-faces { display: flex; align-items: center; gap: 8px; } .pw-faces .avatar { width: 34px; height: 34px; }
.pw-kv { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; margin-bottom: 8px; font-size: 13.5px; } .pw-kv > span { color: var(--ink-2); } .pw-kv .box { background: var(--bg-2); border-radius: 8px; padding: 9px 12px; text-align: right; } .pw-kv .lw-in { min-height: 38px; } .pw-kv2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .pw-kv2 input { text-align: right; }
.pw-grand { display: flex; justify-content: space-between; align-items: center; background: #FBF6EC; border-radius: 10px; padding: 12px 14px; font-size: 15px; font-weight: 700; color: var(--gold-deep); margin: 8px 0 4px; } .pw-grand b { font-size: 20px; }
.pw-sched td, .pw-sched th { padding: 6px 4px; font-size: 12.5px; } .pw-sched input, .pw-sched select { width: 100%; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 12.5px; background: var(--card); } .pw-sched .grip { color: var(--ink-3); font-size: 10px; letter-spacing: -2px; width: 12px; } .pw-pct { display: flex; gap: 4px; align-items: center; } .pw-pct input { width: 52px; } .pw-pct b { font-size: 12.5px; white-space: nowrap; }
.pw-schedtot { display: flex; gap: 14px; align-items: center; background: #E6F5EC; color: #1E7A47; border-radius: 10px; padding: 10px 14px; margin-top: 8px; font-weight: 700; font-size: 13.5px; } .pw-schedtot.bad { background: #FCE7EA; color: #B42A3E; } .pw-schedtot span { flex: 1; } .pw-schedtot small { font-weight: 400; }
.pw-designs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } .pw-design { border: 2px solid transparent; border-radius: 10px; padding: 4px; background: none; font: inherit; cursor: pointer; position: relative; } .pw-design .th { display: block; aspect-ratio: .78; border-radius: 6px; overflow: hidden; background: #F3EBDD; } .pw-design .th img { width: 100%; height: 100%; object-fit: cover; } .pw-design .th.dark { filter: brightness(.35); } .pw-design .th.minimal { filter: saturate(.3) brightness(1.1); } .pw-design .th.editorial { filter: contrast(1.1); } .pw-design b { display: block; font-size: 12px; margin-top: 4px; font-weight: 500; } .pw-design.on { border-color: var(--gold); } .pw-design i { position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); color: #fff; display: grid; place-items: center; }
.pw-profit { display: flex; gap: 14px; align-items: center; } .pw-profit-t { display: grid; gap: 6px; flex: 1; } .pw-profit-t > div { background: var(--bg-2); border-radius: 8px; padding: 8px 10px; } .pw-profit-t small { display: block; font-size: 11px; color: var(--ink-3); } .pw-profit-t b { font-size: 15px; } .pw-profit-t .good { background: #E6F5EC; } .pw-profit-t .good b { color: #1E7A47; }
.pw-profit-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; } .pw-profit-3 > div { text-align: center; border-radius: 10px; padding: 10px; background: var(--bg-2); } .pw-profit-3 b { display: block; font-size: 16px; } .pw-profit-3 small { font-size: 11px; color: var(--ink-3); } .pw-profit-3 .g { background: #E6F5EC; } .pw-profit-3 .g b { color: #1E7A47; } .pw-profit-3 .r { background: #FCE7EA; } .pw-profit-3 .r b { color: #B42A3E; }
.pw-inc { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: none; padding: 9px 0; font: inherit; cursor: pointer; } .pw-inc:last-child { border-bottom: 0; } .pw-inc > div { flex: 1; } .pw-inc b { display: block; font-size: 13px; } .pw-inc small { font-size: 12px; color: var(--ink-3); } .pw-inc > svg { color: var(--ink-3); transform: rotate(-90deg); }
.pw-ct-tpl { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--line-2); border-radius: 12px; padding: 12px; } .pw-ct-thumb { width: 64px; height: 76px; border-radius: 6px; background: var(--bg-2); display: grid; place-items: center; color: var(--ink-3); flex: none; } .pw-ct-tpl > div { flex: 1; } .pw-ct-tpl > div > b { font-size: 14px; }
.pw-ct-ed { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-top: 10px; background: var(--card-2); } .pw-ct-edh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .pw-ct-edh b { font-size: 14px; } .pw-ct-ed textarea { width: 100%; border: 1px solid var(--line-2); border-radius: 8px; padding: 10px; font: inherit; font-size: 13px; line-height: 1.6; background: var(--card); color: var(--ink); resize: vertical; }
.pw-party { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); } .pw-party > div { flex: 1; } .pw-party b { display: block; font-size: 13.5px; } .pw-party small { font-size: 12px; color: var(--ink-3); }
.pw-ctprev { position: relative; aspect-ratio: .78; border-radius: 12px; overflow: hidden; background: #1A1714; } .pw-ctprev img { width: 100%; height: 100%; object-fit: cover; opacity: .55; display: block; } .pw-ctprev > div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 24px 16px; text-align: center; color: #F3EBDD; gap: 6px; } .pw-ctprev small { font-size: 9px; letter-spacing: .2em; } .pw-ctprev h2 { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 500; letter-spacing: .06em; line-height: 1.25; margin: 4px 0; color: #E9DCC4; } .pw-ctprev .logo { font-family: 'Cormorant Garamond', serif; font-size: 22px; color: #D6B87E; margin-top: auto; }
.pw-pager { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 10px 0; font-size: 12.5px; color: var(--ink-2); } .pw-pager button { border: 1px solid var(--line); background: var(--card); border-radius: 8px; width: 30px; height: 30px; cursor: pointer; display: grid; place-items: center; } .pw-pager button:first-child svg { transform: rotate(90deg); } .pw-pager button:last-child svg { transform: rotate(-90deg); }
.pw-ctsec { display: flex; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; } .pw-ctsec i { width: 24px; height: 24px; border-radius: 6px; background: var(--tint); color: var(--gold-deep); display: grid; place-items: center; } .pw-ctsec span { flex: 1; } .pw-ctsec > svg { color: var(--ink-3); }
.pw-qtpl { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; } .pw-qtpl input { accent-color: var(--gold); width: 16px; height: 16px; } .pw-qtpl > div { flex: 1; } .pw-qtpl b { font-size: 13.5px; } .pw-qtpl small { display: block; font-size: 12px; color: var(--ink-3); } .pw-qtpl.on { border-color: var(--gold); background: #FBF6EC; }
.pw-qgroup { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; } .pw-qgroup.off { opacity: .5; } .pw-qgroup .grip { color: var(--ink-3); font-size: 11px; letter-spacing: -2px; } .pw-qgroup b { font-size: 13.5px; } .pw-qgroup small { color: var(--ink-3); flex: 1; } .pw-qgroup > i { color: var(--ink-3); }
.pw-qprev { background: linear-gradient(180deg, #FBF6EC, #F3EBDD); border-radius: 12px; padding: 16px 12px; text-align: center; } .pw-qprev .logo { font-family: 'Cormorant Garamond', serif; font-size: 24px; color: var(--ink); } .pw-qprev > small { display: block; font-size: 10px; letter-spacing: .12em; margin: 4px 0 12px; } .pw-qcard { background: var(--card); border-radius: 10px; padding: 14px; text-align: left; } .pw-qcard .help { text-align: center; display: block; font-size: 11px; } .pw-qcard > b { display: block; font-size: 15px; margin-top: 4px; } .pw-qcard > small { display: block; color: var(--ink-3); font-size: 12px; margin-bottom: 10px; } .pw-qcard label { display: block; font-size: 11.5px; font-weight: 600; margin-top: 8px; } .pw-qcard label i { color: #D2394F; font-style: normal; } .pw-qcard label span { display: block; height: 30px; border: 1px solid var(--line-2); border-radius: 6px; margin-top: 4px; background: var(--card); }
.pw-preview { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 12px; } .pw-hero { position: relative; aspect-ratio: .78; border-radius: 12px; overflow: hidden; background: #1A1714; } .pw-hero img { width: 100%; height: 100%; object-fit: cover; opacity: .7; display: block; } .pw-hero > div { position: absolute; inset: 0; padding: 24px; color: #F3EBDD; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; } .pw-hero .logo { font-family: 'Cormorant Garamond', serif; font-size: 24px; position: absolute; top: 22px; left: 24px; } .pw-hero .logo i { display: block; font-style: normal; font-family: Inter, sans-serif; font-size: 9px; letter-spacing: .2em; } .pw-hero h1 { font-family: 'Cormorant Garamond', serif; font-size: 44px; font-weight: 500; line-height: 1; margin: 0 0 8px; } .pw-hero small { font-size: 10px; letter-spacing: .18em; } .pw-hero b { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 500; margin-top: 18px; }
.pw-thumbs { display: grid; gap: 8px; align-content: start; } .pw-thumbs > div { border: 1px solid var(--line); border-radius: 8px; padding: 6px; background: var(--card); } .pw-thumbs small { display: block; font-size: 9px; font-weight: 700; margin-bottom: 4px; } .pw-thumbs img { width: 100%; aspect-ratio: 1.7; object-fit: cover; border-radius: 4px; } .pw-thumbs .pw-pager { margin: 4px 0 0; }
.pw-brand { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; } .pw-brand small { display: block; font-size: 12px; color: var(--ink-2); margin-bottom: 6px; } .pw-swatches { display: flex; gap: 8px; } .pw-swatches button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line-2); cursor: pointer; } .pw-swatches button.on { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--gold); }
.pw-section { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; } .pw-section .grip { color: var(--ink-3); font-size: 11px; letter-spacing: -2px; } .pw-section b { flex: 1; font-size: 13px; font-weight: 500; }
.pw-mini { position: relative; aspect-ratio: 1.55; border-radius: 10px; overflow: hidden; background: #1A1714; } .pw-mini img { width: 100%; height: 100%; object-fit: cover; opacity: .65; display: block; } .pw-mini > div { position: absolute; inset: 0; padding: 14px; color: #F3EBDD; display: flex; flex-direction: column; justify-content: flex-end; } .pw-mini .logo { font-family: 'Cormorant Garamond', serif; font-size: 14px; position: absolute; top: 12px; left: 14px; } .pw-mini b { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 500; line-height: 1; } .pw-mini small { font-size: 8px; letter-spacing: .16em; margin-top: 4px; }
.pw-checkrow { display: flex; gap: 8px; align-items: center; font-size: 13px; padding: 5px 0; } .pw-checkrow i { width: 18px; height: 18px; border-radius: 4px; background: #FCE7EA; color: #B42A3E; display: grid; place-items: center; } .pw-checkrow.ok i { background: var(--gold); color: #fff; }
.pw-tm .avatar, .pw-faces .avatar, .pw-av .avatar { flex: 0 0 auto; } .pw-tm .avatar { width: 36px !important; height: 36px !important; } .pw-person-h > span { white-space: nowrap; }
.pw-back { display: flex; width: fit-content; } .pw-head > div:first-child { display: grid; gap: 2px; }

/* ---------- Finance & Invoicing ---------- */
.rv-tile.num.fin { text-decoration: none; color: inherit; } .rv-tile.num.fin .l { font-size: 13px; color: var(--ink-2); } .rv-tile.num.fin .v { font-size: 26px; margin-top: 2px; } .rv-tile.num.fin .d small { display: block; font-size: 11px; color: var(--ink-3); font-weight: 400; }
.rv-tile .ic.green { background: #E6F5EC; color: #1E7A47; } .rv-tile .ic.amber { background: #FFF1DB; color: #9A6510; } .rv-tile .ic.red { background: #FCE7EA; color: #B42A3E; } .rv-tile .ic.violet { background: #EDE7FD; color: #6B4FA0; } .rv-tile .ic.blue { background: #E4ECFF; color: #2B5BA8; }
.fn-range select { font-size: 13.5px; }
.fn-grid3 { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; align-items: start; } .fn-grid2 { display: grid; grid-template-columns: minmax(0, 3.2fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; align-items: start; } .fn-grid2.eq { grid-template-columns: 1fr 1fr; margin-bottom: 0; } @media (max-width: 1300px) { .fn-grid3, .fn-grid2 { grid-template-columns: 1fr; } }
.fn-legend { font-size: 12px; color: var(--ink-3); display: flex; gap: 6px; align-items: center; } .fn-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-left: 8px; }
.fn-seg { margin-bottom: 12px; } .fn-seg button.on { background: var(--gold); color: #fff; }
.fn-bars { display: grid; grid-template-columns: 52px 1fr; gap: 6px; height: 180px; } .fn-bars .ax { display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; color: var(--ink-3); text-align: right; padding-bottom: 18px; } .fn-bars .cols { display: flex; gap: 6px; align-items: flex-end; border-left: 1px solid var(--line); padding-left: 6px; } .fn-bars .cols > div { flex: 1; display: flex; gap: 2px; align-items: flex-end; justify-content: center; height: 100%; position: relative; padding-bottom: 18px; } .fn-bars .cols i { display: block; width: 38%; border-radius: 4px 4px 2px 2px; min-height: 2px; } .fn-bars .cols i.a { background: var(--gold); } .fn-bars .cols i.b { background: #E3DDD2; } .fn-bars .cols span { position: absolute; bottom: 0; font-size: 11px; color: var(--ink-3); }
.fn-donut { display: flex; gap: 14px; align-items: center; } .fn-donut ul { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; gap: 6px; font-size: 12.5px; } .fn-donut li { display: flex; justify-content: space-between; } .fn-donut li span { display: flex; gap: 6px; align-items: center; } .fn-donut li i { width: 8px; height: 8px; border-radius: 50%; } .fn-donut li small { color: var(--ink-3); font-weight: 400; }
.fn-toprow { display: flex; gap: 10px; align-items: center; padding: 8px 0; text-decoration: none; color: inherit; border-bottom: 1px solid var(--line); } .fn-toprow:last-child { border-bottom: 0; } .fn-toprow .n { width: 22px; height: 22px; border-radius: 50%; background: var(--tint); color: var(--gold-deep); font-size: 11px; display: grid; place-items: center; font-weight: 600; } .fn-toprow .avatar { width: 32px; height: 32px; font-size: 11px; } .fn-toprow b { flex: 1; font-size: 13px; font-weight: 500; } .fn-toprow .amt { font-weight: 600; }
.fn-upc { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; } .fn-upc:last-child { border-bottom: 0; } .fn-upc .d { width: 44px; text-align: center; background: var(--card-2); border: 1px solid var(--line); border-radius: 8px; padding: 4px 0; } .fn-upc .d small { display: block; font-size: 9px; letter-spacing: .1em; color: var(--ink-3); } .fn-upc .d b { font-size: 16px; } .fn-upc > div:not(.d) { flex: 1; } .fn-upc b { display: block; font-size: 13px; } .fn-upc small { font-size: 11.5px; color: var(--ink-3); } .fn-upc > span { font-weight: 600; }
.fn-quick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .fn-qa { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; color: inherit; padding: 16px !important; } .fn-qa b { display: block; font-size: 13.5px; } .fn-qa small { font-size: 12px; color: var(--ink-3); } .fn-qa i { display: block; color: var(--ink-3); margin-top: 6px; font-style: normal; } @media (max-width: 1300px) { .fn-quick { grid-template-columns: 1fr 1fr; } }
.fn-utabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 12px; } .fn-utabs a { padding: 10px 14px; font-size: 13.5px; color: var(--ink-2); text-decoration: none; border-bottom: 2px solid transparent; } .fn-utabs a.on { color: var(--gold-deep); font-weight: 600; border-bottom-color: var(--gold); }
.fn-pst { display: flex; gap: 10px; align-items: center; margin: 4px 0 12px; } .fn-pst i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; } .fn-pst.green i { background: #E6F5EC; color: #1E7A47; } .fn-pst.amber i { background: #FFF1DB; color: #9A6510; } .fn-pst.red i { background: #FCE7EA; color: #B42A3E; } .fn-pst.violet i { background: #EDE7FD; color: #6B4FA0; } .fn-pst b { display: block; font-size: 15px; } .fn-pst small { font-size: 12px; color: var(--ink-3); }
.fn-big { font-size: 30px; font-weight: 700; letter-spacing: -.01em; }
.fn-pbtns { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 6px; margin: 12px 0 14px; } .fn-pbtns .btn { padding: 9px 8px; font-size: 12px; justify-content: center; }
.fn-kv { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 13px; } .fn-kv span { color: var(--ink-2); } .fn-kv b { text-align: right; font-weight: 500; max-width: 60%; } .fn-kv.hi { background: #FBF6EC; border-radius: 8px; padding: 8px 10px; margin: 4px -10px; } .fn-kv.hi b { color: var(--gold-deep); font-weight: 700; }
.fn-applied { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; } .fn-applied > div:first-child { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; } .fn-applied small { display: block; text-align: right; font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }
.fn-receipt { display: flex; gap: 8px; } .fn-receipt .btn { flex: 1; justify-content: center; }
.fn-tl > div { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; position: relative; } .fn-tl i { width: 20px; height: 20px; border-radius: 50%; background: #1E9E5A; color: #fff; display: grid; place-items: center; flex: none; margin-top: 2px; } .fn-tl b { display: block; font-size: 13px; } .fn-tl small { font-size: 11.5px; color: var(--ink-3); }
.fn-rp { width: min(1000px, 94vw) !important; max-width: none !important; padding: 0 !important; } .fn-rp-h { display: flex; justify-content: space-between; align-items: flex-start; padding: 22px 26px 12px; } .fn-rp-h h3 { font-size: 20px; margin: 0; } .fn-rp-h small { color: var(--ink-2); font-size: 13px; }
.fn-rp-g { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; padding: 0 26px 6px; max-height: 68vh; overflow: auto; } .fn-rp-sec { display: flex; gap: 12px; background: var(--card-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 10px; } .fn-rp-n { width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: #fff; font-weight: 600; font-size: 12px; display: grid; place-items: center; flex: none; } .fn-rp-sec .w { flex: 1; min-width: 0; } .fn-rp-sec .w > b { font-size: 14.5px; }
.fn-rp-client { padding-left: 8px; } .fn-rp-client .avatar { width: 30px; height: 30px; font-size: 10px; } .fn-rp-side { background: var(--card-2); border: 1px solid var(--line); border-radius: 12px; padding: 16px; align-self: start; } .fn-rp-side h4 { font-size: 14.5px; margin: 12px 0 6px; } .fn-rp-who { display: flex; gap: 10px; align-items: center; } .fn-rp-who .avatar { width: 52px; height: 52px; font-size: 16px; } .fn-rp-who b { display: block; font-size: 15px; } .fn-rp-who small { display: block; font-size: 12px; color: var(--ink-3); }
.fn-rp .modal-foot { padding: 12px 26px 22px; }
.fn-invhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 4px 0 6px; } .fn-invno { display: flex; gap: 12px; align-items: center; } .fn-invno h1 { font-size: 30px; margin: 0; } .fn-invwho { display: flex; gap: 12px; align-items: center; margin-top: 10px; } .fn-invwho .avatar { width: 54px; height: 54px; font-size: 17px; } .fn-invwho b { font-size: 18px; display: block; } .fn-invwho small { color: var(--ink-2); font-size: 13px; }
.fn-invacts { display: grid; justify-items: end; gap: 10px; } .fn-invacts .row { display: flex; gap: 8px; } .fn-pager { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); } .fn-pager .btn { padding: 8px 10px; } .fn-pager .btn:first-child svg { transform: rotate(90deg); } .fn-pager .btn:last-child svg { transform: rotate(-90deg); }
.fn-items td small { display: block; font-size: 12px; color: var(--ink-3); } .fn-items td { vertical-align: middle; } .fn-qty { width: 56px; border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 8px; font: inherit; text-align: center; } .lw-in.sm { min-height: 36px; padding: 0 8px; width: 130px; }
.fn-inv-foot { display: grid; grid-template-columns: minmax(0, 1.4fr) 300px; gap: 16px; margin-top: 16px; } .fn-msgbox { background: var(--card-2); border-radius: 10px; padding: 14px; font-size: 13px; line-height: 1.6; } .fn-sums > div { display: flex; justify-content: space-between; padding: 8px 12px; font-size: 13.5px; } .fn-sums .tot { background: #FBF6EC; border-radius: 10px; font-weight: 700; font-size: 15px; margin-top: 6px; } .fn-sums .tot b { font-size: 18px; }
.fn-terms { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.7; color: var(--ink-2); }
.fn-venue { display: flex; gap: 12px; align-items: center; } .fn-venue img { width: 110px; height: 78px; border-radius: 10px; object-fit: cover; } .fn-venue b { display: block; font-size: 15px; } .fn-venue small { display: block; font-size: 12px; color: var(--ink-3); margin-bottom: 4px; }
.fn-sched { display: flex; gap: 10px; align-items: center; padding: 7px 0; } .fn-sched i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; flex: none; } .fn-sched i.ok { background: #1E9E5A; border-color: #1E9E5A; color: #fff; } .fn-sched > div { flex: 1; } .fn-sched b { display: block; font-size: 13px; } .fn-sched small { font-size: 11.5px; color: var(--ink-3); }
.fn-qgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .fn-qgrid .btn { justify-content: center; font-size: 12.5px; padding: 10px 6px; }
.fn-cgrid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; } @media (max-width: 1300px) { .fn-cgrid { grid-template-columns: 1fr; } } .fn-cmain { display: grid; gap: 14px; } .fn-cmain .card { padding: 20px; }
.fn-step { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; } .fn-step > span { width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: #fff; font-weight: 700; display: grid; place-items: center; flex: none; } .fn-step h3 { margin: 0; font-size: 17px; } .fn-step .r { margin-left: auto; display: flex; gap: 8px; align-items: center; } .fn-step .r .search { width: 240px; } .fn-step.clickable { cursor: pointer; margin-bottom: 0; } .fn-step .help { margin: 2px 0 0; }
.fn-row5 { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 1.2fr; gap: 12px; } .fn-row5 > * { min-width: 0; }
.fn-schedrow { display: grid; grid-template-columns: 30px minmax(0, 1.4fr) 80px 90px 160px 110px 30px; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); } .fn-schedrow .n { width: 26px; height: 26px; border-radius: 50%; background: var(--bg-2); display: grid; place-items: center; font-size: 12px; font-weight: 600; } .fn-schedrow .t input { border: 0; background: none; font: inherit; font-weight: 600; font-size: 13.5px; width: 100%; } .fn-schedrow .t small { display: block; font-size: 11.5px; color: var(--ink-3); } .fn-schedrow .p { display: flex; align-items: center; gap: 4px; } .fn-schedrow .p input { width: 54px; border: 1px solid var(--line-2); border-radius: 8px; padding: 6px; font: inherit; font-weight: 700; text-align: right; } .fn-schedrow .d { display: flex; align-items: center; gap: 6px; font-size: 12.5px; } .fn-schedrow .d input { border: 1px solid var(--line-2); border-radius: 8px; padding: 6px; font: inherit; font-size: 12.5px; } .fn-schedfoot { display: flex; gap: 14px; align-items: center; padding: 10px 0 0; font-size: 13.5px; } .fn-schedfoot span { margin-left: auto; font-weight: 600; } .fn-schedfoot b { font-size: 16px; }
.fn-cprev .card { padding: 16px; position: sticky; top: 0; } .fn-paper { background: #fff; color: #1E1B16; border: 1px solid var(--line); border-radius: 12px; padding: 22px; font-size: 12px; } .fn-paper.mobile { max-width: 380px; margin: 0 auto; } .fn-paper-h { display: flex; justify-content: space-between; align-items: flex-start; } .fn-paper-h .logo { font-family: 'Cormorant Garamond', serif; font-size: 30px; color: #B8965A; line-height: 1; } .fn-paper-h small { font-size: 10px; color: #8A8073; } .fn-paper-h .r { text-align: right; } .fn-paper-h .r b { display: block; font-size: 18px; letter-spacing: .04em; } .fn-paper-h .r small { display: block; margin: 2px 0 6px; }
.fn-paper-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; } .fn-paper-2 small { display: block; font-size: 11px; color: #8A8073; margin-bottom: 2px; } .fn-paper-2 b { display: block; font-size: 13px; } .fn-paper-2 span { display: block; font-size: 11.5px; color: #5C5449; } .fn-paper-2 .kv > div { display: flex; justify-content: space-between; padding: 3px 0; } .fn-paper-2 .kv span { color: #8A8073; } .fn-paper-2 .kv b { display: inline; }
.fn-paper table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 11.5px; } .fn-paper th { text-align: left; font-size: 10.5px; color: #8A8073; padding: 6px 4px; border-bottom: 1px solid #ECE8E0; } .fn-paper td { padding: 7px 4px; border-bottom: 1px solid #F3EBDD; } .fn-paper th:nth-child(n+3), .fn-paper td:nth-child(n+3) { text-align: right; }
.fn-paper-sums { margin: 10px 0 0 auto; width: 60%; } .fn-paper-sums > div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 12px; } .fn-paper-sums .tot { background: #FBF6EC; border-radius: 8px; padding: 8px 10px; font-weight: 700; font-size: 13.5px; margin-top: 4px; }
.fn-paper-sched { margin-top: 14px; padding-top: 10px; border-top: 1px solid #ECE8E0; } .fn-paper-sched > b { display: block; font-size: 12.5px; margin-bottom: 6px; } .fn-paper-sched > div { display: flex; gap: 8px; align-items: center; padding: 3px 0; font-size: 11.5px; } .fn-paper-sched i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #C9C1B4; } .fn-paper-sched i.ok { background: #1E9E5A; border-color: #1E9E5A; } .fn-paper-sched i.late { background: #D2394F; border-color: #D2394F; } .fn-paper-sched span { flex: 1; }
.fn-paper-msg { background: #FBF6EC; border-radius: 8px; padding: 10px 12px; margin-top: 14px; font-size: 12px; } .fn-paper-f { text-align: center; font-size: 11px; color: #8A8073; margin-top: 14px; }
.fn-ai { width: min(940px, 94vw) !important; max-width: none !important; padding: 0 !important; } .fn-ai-g { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; padding: 0 26px 6px; max-height: 68vh; overflow: auto; } .fn-ai-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; } .fn-ai-modes button { display: flex; gap: 10px; align-items: flex-start; text-align: left; border: 1px solid var(--line-2); border-radius: 12px; padding: 12px; background: var(--card); font: inherit; cursor: pointer; } .fn-ai-modes button b { display: block; font-size: 13.5px; } .fn-ai-modes button small { font-size: 11.5px; color: var(--ink-3); } .fn-ai-modes button.on { background: #FBF6EC; border-color: var(--gold); }
.fn-ai-list { max-height: 360px; overflow: auto; } .fn-ai-row { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; cursor: pointer; } .fn-ai-row:hover { background: var(--bg-2); } .fn-ai-row.on { background: #FBF6EC; } .fn-ai-row img { width: 56px; height: 40px; border-radius: 6px; object-fit: cover; } .fn-ai-row > div { flex: 1; } .fn-ai-row b { display: block; font-size: 13px; } .fn-ai-row small { font-size: 11.5px; color: var(--ink-3); } .fn-ai-row .pr { font-size: 13px; margin-right: 6px; }
.fn-ai-side { background: var(--card-2); border: 1px solid var(--line); border-radius: 12px; padding: 16px; align-self: start; } .fn-ai-hero { display: flex; gap: 12px; margin-bottom: 8px; } .fn-ai-hero img { width: 110px; height: 90px; border-radius: 10px; object-fit: cover; } .fn-ai-hero b { display: block; font-size: 15px; margin-bottom: 4px; } .fn-ai-hero small { display: block; font-size: 12px; color: var(--ink-2); margin-top: 6px; } .fn-ai-amt { background: #FBF6EC; border-radius: 10px; padding: 12px 14px; font-size: 20px; font-weight: 700; }
.fn-ai .modal-foot { padding: 12px 26px 22px; }
.fn-kv span { flex: none; white-space: nowrap; } .fn-kv b { flex: 1; max-width: none; }

/* ---------- Expenses ---------- */
.fn-cat { width: 28px; height: 28px; border-radius: 8px; display: inline-grid; place-items: center; flex: none; } .rv-table .who .fn-cat { width: 26px; height: 26px; }
.fn-catrow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-bottom: 14px; } @media (max-width: 1400px) { .fn-catrow { grid-template-columns: repeat(4, 1fr); } }
.fn-catcard { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; padding: 12px !important; text-align: left; cursor: pointer; font: inherit; border: 1px solid var(--line); } .fn-catcard small { display: block; font-size: 11.5px; color: var(--ink-2); } .fn-catcard b { font-size: 15px; } .fn-catcard i { font-style: normal; font-size: 11px; color: var(--ink-3); margin-left: 6px; } .fn-catcard .bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--bg-2); overflow: hidden; } .fn-catcard .bar i { display: block; height: 100%; margin: 0; }
.fn-tabrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .fn-tabrow .fn-utabs, .fn-tabrow .rv-tabs { margin-bottom: 0; border-bottom: 0; } .fn-tabrow .r { display: flex; gap: 8px; align-items: center; } .fn-tabrow .search { width: 220px; }
.fn-ex-top { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; } .fn-ex-top .fn-cat { width: 48px; height: 48px; border-radius: 12px; } .fn-ex-top b { font-size: 15px; }
.fn-pbtns.three { grid-template-columns: 1fr 1fr 1fr; }
.fn-insight { display: flex; gap: 12px; align-items: flex-start; background: #EAF0FA; border: 0; } .fn-insight .pw-svcic { background: #fff; border: 0; color: #2B5BA8; } .fn-insight b { display: block; font-size: 14px; margin-bottom: 2px; } .fn-insight b.l { font-size: 13px; margin: 4px 0; } .fn-insight small { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; } .fn-insight.violet { background: #EDE7FD; } .fn-insight.violet .pw-svcic { color: #6B4FA0; } .fn-insight.green { background: #E6F5EC; } .fn-insight.green .pw-svcic { color: #1E7A47; }
.fn-exm .fn-rp-g { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } .fn-exm h4 { font-size: 14.5px; } .fn-exm .lw-f { margin-bottom: 12px; } .fn-exm .lw-row2, .fn-exm .lw-row3 { margin-bottom: 0; }
.fn-qr { display: flex; gap: 10px; align-items: center; background: #EDE7FD; border-radius: 10px; padding: 12px; margin-top: 10px; } .fn-qr .pw-svcic { background: #fff; border: 0; color: #6B4FA0; } .fn-qr b { display: block; font-size: 13px; } .fn-qr small { font-size: 11.5px; color: var(--ink-2); }
.fn-exprev { background: #FBF6EC; border-radius: 10px; padding: 8px 12px; } .fn-exprev .fn-kv { padding: 5px 0; }
.fn-grid3.cat { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) 280px; } .fn-donut.big ul { font-size: 13.5px; gap: 9px; } .fn-rail { display: grid; gap: 14px; }
.fn-stack { display: flex; gap: 6px; align-items: flex-end; height: 170px; margin-top: 8px; } .fn-stack > div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; align-items: center; } .fn-stack .col { width: 70%; display: flex; flex-direction: column; border-radius: 4px 4px 0 0; overflow: hidden; min-height: 2px; } .fn-stack .col i { display: block; width: 100%; min-height: 2px; } .fn-stack span { font-size: 10.5px; color: var(--ink-3); margin-top: 4px; }
.fn-legend.wrap { flex-wrap: wrap; margin-top: 10px; row-gap: 4px; } .fn-legend.wrap span { display: inline-flex; gap: 6px; align-items: center; } .fn-legend.wrap i { margin-left: 4px; }
.fn-qa.small { display: flex; padding: 8px 4px !important; border: 0; background: none; text-align: left; font: inherit; cursor: pointer; width: 100%; border-radius: 10px; } .fn-qa.small:hover { background: var(--hover); } .fn-qa.small b { font-size: 13px; } .fn-qa.small small { font-size: 11.5px; }
.fn-evcover { position: relative; aspect-ratio: 2.2; } .fn-evcover img { width: 100%; height: 100%; object-fit: cover; display: block; } .fn-evcover .btn { position: absolute; right: 10px; top: 10px; background: rgba(255, 255, 255, .95); }
.fn-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 12px; } .fn-3col > div { border-right: 1px solid var(--line); padding-right: 8px; } .fn-3col > div:last-child { border-right: 0; } .fn-3col small, .fn-2col small { display: block; font-size: 11.5px; color: var(--ink-3); } .fn-3col b { font-size: 16px; }
.fn-2col { display: grid; grid-template-columns: 1fr 1.3fr; gap: 12px; background: var(--card-2); border-radius: 10px; padding: 10px; } .fn-ring { display: flex; gap: 10px; align-items: center; } .fn-ring b { font-size: 18px; } .fn-ring.big { gap: 16px; }
.fn-evhead { display: flex; gap: 16px; align-items: flex-start; margin: 4px 0 14px; } .fn-evhead img { width: 112px; height: 72px; border-radius: 10px; object-fit: cover; flex: none; } .fn-evhead h1 { font-size: 26px; margin: 0 0 8px; } .fn-evhead .ld-chip.on { background: var(--gold); color: #fff; border-color: var(--gold); } .fn-evstatus { display: grid; justify-items: center; gap: 4px; padding: 6px 0 0 10px; } .fn-evstatus small { font-size: 12px; color: var(--ink-3); } .fn-evhead .acts { margin-left: auto; display: flex; gap: 8px; }
.rv-tiles.five { grid-template-columns: repeat(5, 1fr); }
.fn-bva { display: flex; gap: 8px; align-items: flex-end; height: 160px; margin-top: 6px; } .fn-bva > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; } .fn-bva .pair { display: flex; gap: 3px; align-items: flex-end; height: 100%; width: 100%; justify-content: center; } .fn-bva .pair i { display: block; width: 30%; max-width: 22px; border-radius: 4px 4px 0 0; min-height: 2px; } .fn-bva span { font-size: 10.5px; color: var(--ink-3); margin-top: 4px; }
.fn-qrow { display: flex; gap: 10px; align-items: center; width: 100%; border: 0; border-bottom: 1px solid var(--line); background: none; padding: 10px 0; font: inherit; font-size: 13.5px; cursor: pointer; text-align: left; } .fn-qrow:last-child { border-bottom: 0; } .fn-qrow span { flex: 1; } .fn-qrow > svg:last-child { color: var(--ink-3); transform: rotate(-90deg); }
.cp-rel.hi { background: #FCE7EA; border-radius: 10px; padding: 8px; margin: 0 -8px; }
.fn-prov { width: 22px; height: 22px; border-radius: 6px; color: #fff; font-size: 10px; font-weight: 700; display: inline-grid; place-items: center; font-style: normal; margin-right: 6px; }
.fn-bars .cols.three > div { gap: 3px; } .fn-bars .cols.three i { width: 26%; }
.rv-tile.num.fin .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tgl { display: inline-block; vertical-align: middle; }

/* ---------- Financial Reports ---------- */
.cp-wrap.rep { grid-template-columns: minmax(0, 1fr) 250px; } .cp-wrap.rep .fn-utabs { margin-bottom: 14px; }
.fn-grid3.rep { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); } .fn-grid2.rep { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); }
.fn-area { width: 100%; height: 170px; display: block; }
.fn-rank { width: 22px; height: 22px; border-radius: 50%; background: var(--tint); color: var(--gold-deep); font-size: 11px; font-weight: 600; display: inline-grid; place-items: center; }
.cp-wrap.rep .cp-panel .lw-f { margin-bottom: 10px; } .cp-wrap.rep .cp-panel .lw-f label { font-size: 12.5px; } .cp-wrap.rep .cp-panel .lw-in { min-height: 38px; } .cp-wrap.rep .cp-panel .pw-extra { padding: 6px 0; }
.fn-area { height: auto; }
.fn-grid3.rep .card { overflow: hidden; } .fn-grid3.rep .rv-table td, .fn-grid3.rep .rv-table th { white-space: nowrap !important; font-size: 12.5px; padding: 9px 6px; } .fn-grid3.rep .rv-table td:nth-child(2) { white-space: normal !important; max-width: 120px; }
.rv-tile.num.fin .v { font-size: 26px; letter-spacing: -.02em; overflow: visible; text-overflow: clip; }
.fn-grid3.rep2 { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.2fr) minmax(0, 1fr); } .fn-grid3.rep .rv-table td, .fn-grid3.rep .rv-table th { padding: 8px 5px; font-size: 12px; } .fn-grid3.rep .rv-table td:nth-child(2) { white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; max-width: 118px; } .fn-grid3.rep .rv-table td:first-child, .fn-grid3.rep .rv-table th:first-child { padding-left: 2px; width: 24px; } .fn-grid3.rep .rv-bars { gap: 5px; } .fn-grid3.rep .fn-donut ul li span { font-size: 12px; }
.fn-grid3.rep .rv-table td, .fn-grid3.rep .rv-table th { padding: 8px 4px; font-size: 11.5px; } .fn-grid3.rep .rv-bars span { font-size: 9.5px; }

/* ---------- Meetings ---------- */
.mt-tabs { display: flex; gap: 6px; align-items: center; margin-bottom: 16px; border-bottom: 1px solid var(--line); } .mt-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; font-size: 14px; font-weight: 500; color: var(--ink-2); text-decoration: none; border-bottom: 2px solid transparent; border-radius: 10px 10px 0 0; } .mt-tabs a.on { color: var(--gold-deep); font-weight: 600; border-bottom-color: var(--gold); background: var(--card); } .mt-tabs .search { margin-bottom: 8px; }
.mt-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; } .mt-wrap.sched { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } @media (max-width: 1200px) { .mt-wrap, .mt-wrap.sched { grid-template-columns: 1fr; } }
.mt-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; } .mt-stat { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; color: inherit; text-decoration: none; position: relative; } .mt-stat .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; } .mt-stat .ic.violet { background: #EDE7FD; color: #6B4FA0; } .mt-stat .ic.blue { background: #E4EEFF; color: #2B5FD9; } .mt-stat .ic.amber { background: #FDF0DC; color: #9A6510; } .mt-stat .ic.green { background: #E3F5EA; color: #1E7A47; } .mt-stat b { font-size: 22px; display: block; line-height: 1.1; } .mt-stat small { color: var(--ink-3); font-size: 12.5px; } .mt-stat i { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; } .mt-stat i.up { background: #E3F5EA; color: #1E7A47; } .mt-stat i.down { background: #FBE4E8; color: #B42A3E; } .mt-stat i.dot { width: 9px; height: 9px; padding: 0; background: #E4B23A; } .mt-stat i.go { color: var(--ink-3); padding: 0; }
.mt-daynav { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 10px; } .mt-daynav h2 { font-size: 19px; margin: 0; } .mt-daynav h2 small, .mt-group h3 small { font-size: 13px; font-weight: 400; color: var(--ink-3); margin-left: 8px; } .mt-daynav .acts { display: flex; gap: 6px; }
.mt-group { margin-bottom: 18px; } .mt-group h3 { font-size: 17px; margin: 0 0 10px; }
.mt-row { display: grid; grid-template-columns: 84px minmax(0, 1.5fr) minmax(0, .9fr) minmax(0, .6fr) auto; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; } .mt-row.off { opacity: .55; } .mt-when b { display: block; font-size: 14px; } .mt-when small { color: var(--ink-3); font-size: 12px; } .mt-who { display: flex; gap: 12px; align-items: center; cursor: pointer; min-width: 0; } .mt-who .avatar { width: 44px; height: 44px; border-radius: 10px; font-size: 13px; } .mt-who b { display: block; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mt-who span { font-size: 12.5px; color: var(--ink-3); display: flex; gap: 8px; align-items: center; } .mt-loc { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); } .mt-host { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; } .avatar.sm { width: 28px; height: 28px; font-size: 10.5px; } .avatar.xs { width: 20px; height: 20px; font-size: 8.5px; } .mt-act { display: flex; gap: 8px; align-items: center; } .mt-join { display: inline-flex; } .mt-join .btn { border-radius: 10px 0 0 10px; } .mt-join .btn.caret { border-radius: 0 10px 10px 0; padding: 8px 10px; border-left: 1px solid rgba(255,255,255,.2); } .btn.dark { background: #1F1A14; color: #fff; border-color: #1F1A14; }
.mt-rail .card { margin-bottom: 14px; } .mt-qh { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; } .mt-qh h3 { margin: 0; font-size: 16px; } .mt-qh small { color: var(--ink-3); font-size: 12.5px; }
.mt-f { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px 10px; align-items: center; margin-bottom: 10px; } .mt-f > label { font-size: 13px; font-weight: 500; } .mt-f label i { color: var(--red); font-style: normal; } .mt-f .lw-in { min-height: 40px; } .mt-f .lw-in select, .mt-f .lw-in input { border: 0; background: transparent; flex: 1; min-width: 0; font: inherit; color: inherit; outline: none; } .mt-f .lw-in .avatar { width: 24px; height: 24px; font-size: 9px; } .mt-f .frow { grid-column: 2; } .mt-f textarea { grid-column: 1 / -1; width: 100%; border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; font: inherit; resize: vertical; } .mt-f .help { grid-column: 2; font-size: 11.5px; color: var(--ink-3); } .mt-f .mt-lbl { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; } .mt-count { grid-column: 1 / -1; text-align: right; font-size: 11.5px; color: var(--ink-3); }
.mt-tglrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); margin: 4px 0; cursor: pointer; } .mt-tglrow .tgl { display: inline-block; }
.mt-orlink { display: flex; gap: 12px; background: #EEF3FF; border-color: #DCE6FF; } .mt-orlink b { display: block; margin-bottom: 4px; } .mt-orlink small { display: block; color: var(--ink-2); font-size: 12.5px; margin-bottom: 10px; } .mt-orlink .btn { border-color: var(--gold); color: var(--gold-deep); }
.mt-form h2 { margin: 0 0 2px; font-size: 20px; } .mt-form > .sub { color: var(--ink-3); font-size: 13.5px; margin-bottom: 18px; }
.mt-fr { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 14px; align-items: center; margin-bottom: 14px; } .mt-fr > label { font-size: 14px; font-weight: 500; } .mt-fr > label i { color: var(--red); font-style: normal; } .mt-fr > label small { color: var(--ink-3); font-weight: 400; } .mt-fv { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .mt-fv .grow, .mt-fv > .grow { flex: 1; min-width: 0; } .mt-fv.three { display: grid; grid-template-columns: 1fr 1fr 1fr; } .mt-fv .lw-in select, .mt-fv .lw-in input { border: 0; background: transparent; flex: 1; min-width: 0; font: inherit; color: inherit; outline: none; } .mt-fv .lw-in .avatar { width: 24px; height: 24px; font-size: 9px; } .mt-fv > input { flex: 1; min-width: 120px; border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; font: inherit; } .mt-fv textarea { width: 100%; border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; font: inherit; resize: vertical; } .mt-fv .mt-count { display: block; }
.mt-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1; border: 1px solid var(--line-2); border-radius: 10px; padding: 6px 8px; min-height: 44px; } .mt-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 8px 4px 5px; font-size: 13px; } .mt-chip button { border: 0; background: none; cursor: pointer; color: var(--ink-3); font-size: 15px; line-height: 1; } .mt-chips input { flex: 1; min-width: 160px; border: 0; background: transparent; font: inherit; outline: none; }
.mt-foot { display: flex; gap: 10px; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.mt-side .card { margin-bottom: 14px; } .mt-side .card-h .help { font-size: 12.5px; }
.mt-week { display: flex; gap: 6px; align-items: stretch; margin: 12px 0; } .mt-wd { flex: 1; border: 1px solid var(--line-2); background: var(--card); border-radius: 10px; padding: 8px 2px; cursor: pointer; font: inherit; } .mt-wd b { display: block; font-size: 13px; } .mt-wd small { font-size: 11px; color: var(--ink-3); } .mt-wd.on { border-color: var(--gold); background: var(--tint); } .mt-wd.off { opacity: .45; } .mt-week .icon-btn { align-self: center; }
.mt-legend { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 12.5px; } .mt-legend .lw-in.sm { min-height: 30px; padding: 0 10px; font-size: 12.5px; } .mt-legend .lg i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 5px 0 10px; } .mt-legend .lg i.av { background: #1E9E5A; } .mt-legend .lg i.bz { background: #C9C2B6; } .mt-legend .lg i.sl { background: var(--gold); }
.mt-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .mt-slots.small { grid-template-columns: repeat(4, 1fr); margin: 10px 0; } .mt-slot { border: 1px solid var(--line-2); background: var(--card); border-radius: 10px; padding: 10px 4px; font: inherit; font-size: 13px; cursor: pointer; } .mt-slot.available:hover { border-color: #1E9E5A; background: #E3F5EA; } .mt-slot.busy, .mt-slot.past { background: var(--bg-2); color: var(--ink-3); cursor: not-allowed; } .mt-slot.busy { text-decoration: line-through; } .mt-slot.sel { background: var(--gold); border-color: var(--gold); color: #fff; font-weight: 600; } .mt-slot.available.first { background: #E3F5EA; border-color: #BFE7CD; }
.mt-prev { display: flex; gap: 16px; } .mt-pdate { width: 74px; flex: none; text-align: center; background: var(--bg-2); border-radius: 12px; padding: 10px 6px; } .mt-pdate small { display: block; font-size: 11px; color: var(--ink-3); letter-spacing: .06em; } .mt-pdate b { display: block; font-size: 28px; line-height: 1.1; } .mt-pbody h4 { margin: 0 0 8px; font-size: 16px; } .mt-pbody > div { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); margin-bottom: 6px; } .mt-pbody > div .ic { flex: none; margin-top: 2px; }
.mt-detail .mt-dh { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; } .mt-detail h2 { margin: 0; font-size: 19px; } .mt-detail .mt-dh small { color: var(--ink-3); display: flex; gap: 6px; align-items: center; } .mt-dl > div { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; margin-bottom: 9px; } .mt-dl .ic { flex: none; margin-top: 2px; color: var(--ink-3); } .mt-leadcard { display: flex; gap: 10px; align-items: center; background: var(--bg-2); border-radius: 12px; padding: 10px 12px; margin-top: 12px; color: inherit; text-decoration: none; } .mt-leadcard b { display: block; } .mt-leadcard small { color: var(--ink-3); } .mt-leadcard .ic:last-child { margin-left: auto; }
.pw-svcic.violet { background: #EDE7FD; color: #6B4FA0; } .pw-svcic.blue { background: #E4EEFF; color: #2B5FD9; } .pw-svcic.amber { background: #FDF0DC; color: #9A6510; } .pw-svcic.red { background: #FBE4E8; color: #B42A3E; } .pw-svcic.green { background: #E3F5EA; color: #1E7A47; } .pw-svcic.grey { background: var(--bg-2); color: var(--ink-2); } .pw-svcic.gold { background: var(--tint); color: var(--gold-deep); }
.tpl-mi.danger b { color: var(--red); } .btn.danger { background: var(--red); color: #fff; border-color: var(--red); } .btn.ghost { border-color: transparent; }
.mt-f[hidden] { display: none; } .mt-f .frow input { min-width: 0; flex: 1; border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 10px; font: inherit; } .mt-row { grid-template-columns: 96px minmax(0, 1.5fr) minmax(0, .9fr) minmax(0, .6fr) auto; } .mt-when b { white-space: nowrap; font-size: 13.5px; }

/* ---------- Meetings Settings ---------- */
.ms-hero { display: flex; gap: 12px; align-items: center; background: #EEF3FF; border: 1px solid #DCE6FF; border-radius: 14px; padding: 12px 18px; } .ms-hero b { display: block; } .ms-hero small { color: var(--ink-2); font-size: 12.5px; }
.ms-wrap { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 16px; align-items: start; } @media (max-width: 1100px) { .ms-wrap { grid-template-columns: 1fr; } }
.ms-nav .card { padding: 10px; } .ms-nav h4 { margin: 6px 8px 0; font-size: 15px; } .ms-nav .card > small { display: block; margin: 2px 8px 10px; color: var(--ink-3); font-size: 12px; } .ms-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-size: 13.5px; } .ms-nav a .ic { color: var(--ink-3); } .ms-nav a:hover { background: var(--bg-2); } .ms-nav a.on { background: var(--tint); color: var(--gold-deep); font-weight: 600; } .ms-nav a.on .ic { color: var(--gold-deep); }
.ms-help { background: #EEF3FF; border-color: #DCE6FF; padding: 16px !important; } .ms-help b { display: block; margin: 10px 0 2px; } .ms-help small { display: block; color: var(--ink-2); font-size: 12.5px; margin-bottom: 10px; } .ms-help .btn { width: 100%; justify-content: center; }
.ms-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .ms-head h2 { margin: 0; font-size: 20px; } .ms-head small { color: var(--ink-3); font-size: 13px; }
.ms-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; } .ms-tile { display: flex; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; color: inherit; text-decoration: none; } .ms-tile .pw-svcic { width: 44px; height: 44px; border-radius: 12px; border: 0; } .ms-tile b { display: block; font-size: 20px; line-height: 1.1; } .ms-tile span { display: block; font-size: 13.5px; } .ms-tile small { color: var(--ink-3); font-size: 12px; } .ms-tile > .ic { margin-left: auto; color: var(--ink-3); }
.ms-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } @media (max-width: 1300px) { .ms-grid3 { grid-template-columns: 1fr 1fr; } } .ms-card { display: flex; flex-direction: column; } .ms-ch { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; } .ms-ch .pw-svcic { width: 40px; height: 40px; border-radius: 12px; border: 0; flex: none; } .ms-ch b { display: block; font-size: 15px; } .ms-ch small { color: var(--ink-3); font-size: 12.5px; }
.ms-kv { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; font-size: 13.5px; } .ms-kv span { color: var(--ink-3); font-size: 12.5px; }
.ms-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; } .ms-row:last-of-type { border-bottom: 0; } .ms-row b { flex: 1; font-weight: 500; } .ms-row > span:first-child:not(.ms-brand) { flex: 1; color: var(--ink-2); } .ms-row .rv-tag { margin-left: auto; } .ms-row > .ic { color: var(--ink-3); }
.ms-on { display: inline-flex; align-items: center; gap: 6px; color: #1E7A47; font-weight: 600; font-size: 13px; } .ms-on i { width: 8px; height: 8px; border-radius: 50%; background: #1E9E5A; } .ms-on.off { color: var(--ink-3); } .ms-on.off i { background: #C9C2B6; }
.ms-brand { width: 22px; height: 22px; border-radius: 6px; flex: none; background: linear-gradient(135deg, #4285F4, #34A853); } .ms-brand.zoom { background: #2D8CFF; } .ms-brand.calendly { background: #006BFF; } .ms-brand.microsoft-teams { background: #5B5FC7; } .ms-brand.acuity-scheduling { background: #1F1A14; } .ms-brand.other-webhook { background: #8B5CF6; }
.ms-go { margin-top: auto; display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; color: inherit; text-decoration: none; font-size: 13.5px; font-weight: 500; } .ms-go:hover { background: var(--bg-2); }
.ms-faces { display: flex; align-items: center; margin: 4px 0 6px; } .ms-faces .avatar { width: 36px; height: 36px; margin-right: -8px; border: 2px solid var(--card); font-size: 11px; } .ms-plus { width: 36px; height: 36px; border-radius: 50%; border: 1px dashed var(--line-2); display: grid; place-items: center; margin-left: 12px; color: var(--ink-3); text-decoration: none; }
.lw-in.sm { min-height: 36px; padding: 0 8px 0 12px; font-size: 13px; } .lw-in.sm input { border: 0; background: transparent; flex: 1; min-width: 0; font: inherit; outline: none; } .lw-in.sm select { border: 0; background: transparent; font: inherit; outline: none; }
.ms-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; } .ms-cols.with-panel { grid-template-columns: minmax(0, 1fr) 380px; } .ms-cols.av { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ms-cols.links { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } .ms-cols.links > div > .card, .ms-cols.av > .card { margin-bottom: 14px; } @media (max-width: 1250px) { .ms-cols.with-panel, .ms-cols.av, .ms-cols.links { grid-template-columns: 1fr; } }
.ms-tools { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; } .ms-tools .search.grow { flex: 1; } .ms-tools select { border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 12px; font: inherit; background: var(--card); }
.ms-type, .ms-link { display: flex; gap: 14px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; } .ms-type.on { border-color: var(--gold); } .ms-type.off .b, .ms-link.off .b { opacity: .6; } .ms-type .pw-svcic, .ms-link .pw-svcic { width: 48px; height: 48px; border-radius: 12px; border: 0; flex: none; } .ms-type .b, .ms-link .b { flex: 1; min-width: 0; } .ms-type .b b, .ms-link .b b { display: flex; align-items: center; gap: 8px; font-size: 15px; } .ms-type .b span, .ms-link .b span { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--ink-2); } .ms-type .b small { display: block; color: var(--ink-3); font-size: 12.5px; margin-top: 2px; } .ms-act { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); } .ms-act .tgl { display: inline-block; } .ms-link.add { border-style: dashed; background: transparent; } .ms-link .b span .ic { margin-left: 4px; }
.ms-panel { position: sticky; top: 14px; } .ms-ph { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .ms-ph h3 { margin: 0; font-size: 17px; } .fn-utabs.small a { padding: 8px 10px; font-size: 13px; } .ms-panel .field { margin-bottom: 12px; } .ms-panel .field label i { color: var(--red); font-style: normal; } .ms-panel .lw-in select { border: 0; background: transparent; flex: 1; font: inherit; outline: none; }
.ms-locs { display: flex; flex-wrap: wrap; gap: 8px; } .ms-locb { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); background: var(--card); border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 13px; cursor: pointer; } .ms-locb.on { background: #E4EEFF; border-color: #2B5FD9; color: #2B5FD9; font-weight: 600; }
.ms-ci { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; } .pw-svcic.big { width: 56px; height: 56px; border-radius: 14px; border: 0; } .ms-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; display: grid; place-items: center; color: #fff; } .ms-swatch.violet { background: #8B5CF6; } .ms-swatch.blue { background: #BFD3FF; } .ms-swatch.amber { background: #F6D6B0; } .ms-swatch.red { background: #F7C1CB; } .ms-swatch.green { background: #BFE7CD; } .ms-swatch.grey { background: #D9D3C8; } .ms-swatch.on { border-color: var(--ink); } .ms-icons { display: flex; flex-wrap: wrap; gap: 6px; } .ms-icb { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--card); display: grid; place-items: center; cursor: pointer; color: var(--ink-2); } .ms-icb.on { border-color: var(--gold); background: var(--tint); color: var(--gold-deep); }
.mt-tglrow.big { display: flex; gap: 12px; align-items: flex-start; margin: 8px 0; } .mt-tglrow.big .tgl { margin-top: 2px; } .mt-tglrow.big b { display: block; color: var(--ink); } .mt-tglrow.big small { display: block; color: var(--ink-3); font-size: 12.5px; }
.ms-pfoot { display: flex; gap: 8px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); } .btn.danger-o { border-color: #F3C4CC; color: var(--red); }
.ms-radio { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; } .ms-radio i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-2); flex: none; margin-top: 2px; } .ms-radio.on { border-color: var(--gold); background: var(--tint); } .ms-radio.on i { border-color: var(--gold); background: radial-gradient(circle, var(--gold) 45%, transparent 50%); } .ms-radio b { display: block; font-size: 14px; } .ms-radio small { color: var(--ink-3); font-size: 12.5px; }
.ms-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-top: 6px; }
.ms-day { display: grid; grid-template-columns: 96px 40px minmax(0, 1fr) auto; gap: 10px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); } .ms-day:last-child { border-bottom: 0; } .ms-day b { font-weight: 500; font-size: 14px; } .ms-day .tgl { display: inline-block; } .ms-range { display: flex; gap: 6px; align-items: center; } .ms-range + .ms-range { grid-column: 3; } .ms-range select { border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 10px; font: inherit; background: var(--card); } .ms-range span { color: var(--ink-3); } .ms-unav { color: var(--ink-3); font-size: 13.5px; } .ms-dacts { display: flex; gap: 6px; grid-column: 4; }
.ms-weekh { display: flex; justify-content: center; align-items: center; gap: 12px; margin-bottom: 10px; font-size: 14px; } .ms-week { display: grid; grid-template-columns: 48px repeat(7, minmax(0, 1fr)); gap: 6px; } .ms-wh { text-align: center; border: 1px solid var(--line-2); border-radius: 10px; padding: 6px 2px; font-size: 12px; } .ms-wh:first-child { border: 0; } .ms-wh b { display: block; } .ms-wh small { color: var(--ink-3); font-size: 11px; } .ms-wax { display: flex; flex-direction: column; justify-content: space-between; height: 240px; font-size: 11px; color: var(--ink-3); } .ms-wc { position: relative; height: 240px; background: var(--bg-2); border-radius: 8px; } .ms-wc.off { display: grid; place-items: center; color: var(--ink-3); font-size: 12px; background: #F1EEE8; } .ms-wb { position: absolute; left: 3px; right: 3px; background: #D5F1DF; border: 1px solid #BFE7CD; border-radius: 8px; display: grid; place-items: center; text-align: center; font-size: 11px; color: #1E7A47; } .ms-wb.ov { background: #FDF0DC; border-color: #F6D6B0; color: #9A6510; } .ms-wlg { display: flex; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--ink-3); } .ms-wlg i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.ms-rule { display: grid; grid-template-columns: 170px 150px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 0; } .ms-rule.wide { grid-template-columns: 170px minmax(0, 1fr); } .ms-rule.wide small { grid-column: 2; } .ms-rule label { font-size: 13.5px; font-weight: 500; } .ms-rule select { border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 10px; font: inherit; background: var(--card); } .ms-rule small { color: var(--ink-3); font-size: 12px; } .ms-flags { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ms-ov { display: grid; grid-template-columns: 130px 120px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; } .ms-ov:last-child { border-bottom: 0; } .ms-ov .d b { display: block; } .ms-ov .d small, .ms-ov .n span { color: var(--ink-3); font-size: 12.5px; }
.ms-preview { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--pv-bg, #fff); color: var(--pv-text, #1F1A14); } .ms-preview.mobile { max-width: 320px; margin: 0 auto; } .ms-pvcover { height: 120px; background-size: cover; background-position: center; display: grid; place-content: center; text-align: center; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.6); position: relative; } .ms-pvcover::before { content: ''; position: absolute; inset: 0; background: rgba(20,14,8,.45); } .ms-pvcover b, .ms-pvcover small, .ms-pvcover img { position: relative; } .ms-pvcover b { font-size: 17px; letter-spacing: .14em; font-weight: 500; } .ms-pvcover small { font-size: 9px; letter-spacing: .2em; opacity: .9; } .ms-pvcover img { max-height: 48px; max-width: 200px; } .ms-pvbody { padding: 16px; } .ms-pvbody h3 { margin: 0 0 4px; font-size: 18px; } .ms-pvbody p { margin: 0 0 10px; font-size: 13px; color: var(--ink-2); } .ms-pvmeta { display: flex; gap: 14px; font-size: 12px; color: var(--ink-2); margin-bottom: 12px; } .ms-pvmeta span { display: inline-flex; gap: 4px; align-items: center; } .ms-pvh { display: block; font-size: 14px; margin-bottom: 8px; } .ms-pvmonth { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 8px; } .ms-pvmonth i { font-style: normal; color: var(--ink-3); } .ms-pvdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 10px; } .ms-pvdays div { text-align: center; border: 1px solid var(--line-2); border-radius: 8px; padding: 5px 0; font-size: 12px; } .ms-pvdays div small { display: block; color: var(--ink-3); font-size: 10.5px; } .ms-pvdays div.on { background: var(--tint); border-color: var(--pv-primary); } .ms-pvdays div.off { opacity: .4; } .ms-pvslots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .ms-pvslots span { text-align: center; border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 0; font-size: 12.5px; } .ms-pvslots span.on { background: var(--pv-primary); color: #fff; border-color: var(--pv-primary); } .ms-pvfoot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 12px; color: var(--ink-3); } .ms-pvfoot span { display: inline-flex; gap: 4px; align-items: center; }
.ms-rule.wide .lw-in.sm { width: 100%; max-width: 460px; } .ms-rule.wide .lw-in.sm input { min-width: 0; } .lw-in.sm select { max-width: 170px; }

/* ---------- Meetings Settings, part two ---------- */
.ms-cal { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); } .ms-cal:last-child { border-bottom: 0; } .ms-cal.out { background: var(--bg-2); border-radius: 12px; padding: 12px 14px; margin-top: 10px; } .ms-cal .b { flex: 1; min-width: 0; } .ms-cal .b b { display: flex; gap: 8px; align-items: center; font-size: 15px; } .ms-cal .b span { display: block; font-size: 13px; color: var(--ink-2); } .ms-cal .b small { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-3); } .ms-dotg { width: 8px; height: 8px; border-radius: 50%; background: #1E9E5A; display: inline-block; }
.ms-calbig { width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); display: grid; place-items: center; flex: none; } .ms-calbig.roviqo { background: var(--tint); color: var(--gold-deep); border: 0; } .ms-calic { width: 24px; height: 24px; border-radius: 6px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; background: #4285F4; flex: none; } .ms-calic.apple-calendar { background: #E5484D; } .ms-calic.microsoft-outlook { background: #0F6CBD; } .ms-calic.calendar-caldav, .ms-calic.other-caldav { background: #8B5CF6; }
.ms-addcal { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; border: 1px solid var(--line-2); background: var(--card); border-radius: 12px; padding: 12px 14px; margin-top: 10px; cursor: pointer; font: inherit; } .ms-addcal:hover { background: var(--bg-2); } .ms-addcal div { flex: 1; } .ms-addcal b { display: block; font-size: 14px; } .ms-addcal small { color: var(--ink-3); font-size: 12.5px; } .ms-addcal > .ic { color: var(--ink-3); }
.ms-cprev { display: grid; grid-template-columns: 44px repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 10px; } .ms-cph { text-align: center; border: 1px solid var(--line-2); border-radius: 10px; padding: 6px 2px; font-size: 12px; } .ms-cph:first-child { border: 0; } .ms-cph.today { background: var(--tint); border-color: var(--gold); } .ms-cph b { display: block; } .ms-cph small { color: var(--ink-3); font-size: 11px; } .ms-cpax { display: flex; flex-direction: column; justify-content: space-between; height: 260px; font-size: 10.5px; color: var(--ink-3); } .ms-cpc { position: relative; height: 260px; background: repeating-linear-gradient(to bottom, var(--bg-2) 0, var(--bg-2) 25px, transparent 25px, transparent 26px); border-radius: 8px; } .ms-cpb { position: absolute; left: 3px; right: 3px; border-radius: 6px; padding: 3px 5px; font-size: 10.5px; overflow: hidden; border: 1px solid; } .ms-cpb b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; } .ms-cpb small { display: block; opacity: .8; font-size: 10px; } .ms-cpb.rq { background: #D5F1DF; border-color: #BFE7CD; color: #1E7A47; } .ms-cpb.ext { background: #E4EEFF; border-color: #C9DAFF; color: #2B5FD9; } .ms-cpb.busy { background: #EDE7FD; border-color: #DCD1FA; color: #6B4FA0; }
.ms-igrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; } @media (max-width: 1400px) { .ms-igrid { grid-template-columns: 1fr 1fr; } } .ms-ig { border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .ms-igh { display: flex; gap: 10px; align-items: center; width: 100%; } .ms-igh div { flex: 1; } .ms-igh b { display: block; font-size: 14.5px; } .ms-igh small { color: var(--ink-3); font-size: 12px; } .ms-brand.big { width: 44px; height: 44px; border-radius: 12px; } .ms-ig p { margin: 0; font-size: 12.5px; color: var(--ink-2); flex: 1; } .ms-ig .btn { width: 100%; justify-content: center; }
.ms-code { background: var(--bg-2); border-radius: 10px; padding: 10px 12px; font-size: 11.5px; white-space: pre-wrap; word-break: break-all; }
.ms-chan { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin: -6px -6px 14px; padding: 0 6px; } .ms-chan button { display: inline-flex; gap: 8px; align-items: center; padding: 12px 18px; border: 0; background: none; font: inherit; font-size: 14px; color: var(--ink-2); border-bottom: 2px solid transparent; cursor: pointer; } .ms-chan button.on { color: var(--gold-deep); font-weight: 600; border-bottom-color: var(--gold); }
.ms-ntable { margin-top: 12px; } .ms-nth, .ms-nrow { display: grid; grid-template-columns: minmax(0, 1fr) 150px 70px 40px; gap: 12px; align-items: center; } .ms-nth { font-size: 12.5px; color: var(--ink-3); padding: 6px 0; border-bottom: 1px solid var(--line); } .ms-nrow { padding: 12px 0; border-bottom: 1px solid var(--line); } .ms-nrow .w { display: flex; gap: 12px; align-items: center; } .ms-nrow .w .pw-svcic { width: 40px; height: 40px; border-radius: 12px; border: 0; } .ms-nrow .w b { display: block; font-size: 14px; } .ms-nrow .w small { color: var(--ink-3); font-size: 12.5px; } .ms-nrow .r { display: flex; gap: 6px; flex-wrap: wrap; } .ms-nrow .tgl { display: inline-block; }
.ms-nadd { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; border: 1px dashed var(--line-2); background: transparent; border-radius: 12px; padding: 12px 14px; margin-top: 10px; cursor: pointer; font: inherit; } .ms-nadd b { display: block; color: var(--gold-deep); } .ms-nadd small { color: var(--ink-3); font-size: 12.5px; }
.ms-tpls { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } .ms-tpl { border: 1px solid var(--line-2); background: var(--card); border-radius: 12px; padding: 12px 8px; text-align: center; cursor: pointer; font: inherit; } .ms-tpl .ic { color: var(--gold-deep); } .ms-tpl b { display: block; font-size: 12.5px; margin: 6px 0 4px; } .ms-tpl span { font-size: 12px; color: var(--ink-3); }
.ms-mailframe { width: 100%; height: 420px; border: 1px solid var(--line); border-radius: 12px; background: #fff; } .ms-mailprev { border: 1px solid var(--line); border-radius: 12px; padding: 14px; } .ms-mailprev pre { white-space: pre-wrap; font: inherit; margin: 8px 0 0; }
.ms-cals { display: flex; gap: 6px; align-items: center; } .ms-more { font-size: 11px; background: var(--bg-2); border-radius: 999px; padding: 3px 7px; } .ms-hostsel { gap: 8px; } .ms-hostsel b { font-size: 13px; } .ms-hostsel select { flex: none; width: 22px; color: transparent; } .ms-faces.small { display: inline-flex; margin: 0; } .ms-faces.small .avatar { width: 26px; height: 26px; margin-right: -6px; font-size: 9px; }
.ms-sync { display: flex; gap: 12px; align-items: center; background: #EDE7FD; border-radius: 12px; padding: 12px 14px; margin-top: 12px; color: inherit; text-decoration: none; } .ms-sync .pw-svcic { background: #fff; border: 0; } .ms-sync b { display: block; font-size: 13.5px; } .ms-sync small { color: var(--ink-2); font-size: 12px; } .ms-sync > .ic { margin-left: auto; }
.ms-tabsrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; } .ms-tabsrow .fn-utabs { margin: 0; border: 0; } .ms-tabsrow .fn-utabs a { display: inline-flex; gap: 6px; align-items: center; } .ms-tabsrow .acts { display: flex; gap: 8px; }
.ms-field { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; } .ms-field .grip { color: var(--ink-3); cursor: grab; } .ms-field > div { flex: 1; min-width: 0; } .ms-field b { display: block; font-size: 14px; } .ms-field b i { color: var(--red); font-style: normal; } .ms-field small { color: var(--ink-3); font-size: 12.5px; } .ms-fmv { display: flex; gap: 2px; } .ms-fmv .icon-btn { font-size: 9px; }
.ms-fprev { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; } .ms-fprev.mobile { grid-template-columns: 1fr; max-width: 340px; margin: 0 auto; } .ms-fpform { padding: 18px; } .ms-fpbrand { display: block; font-size: 18px; color: var(--pv-primary); margin-bottom: 8px; } .ms-fplogo { max-height: 36px; margin-bottom: 8px; } .ms-fpform h3 { margin: 0 0 4px; font-size: 18px; } .ms-fpform p { margin: 0 0 12px; font-size: 12.5px; color: var(--ink-2); } .ms-fpgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ms-fpgrid label { display: block; font-size: 11.5px; } .ms-fpgrid label.wide { grid-column: 1 / -1; } .ms-fpgrid label span { display: block; margin-bottom: 4px; font-weight: 500; } .ms-fpgrid label span i { color: var(--red); font-style: normal; } .ms-fpgrid input, .ms-fpgrid select, .ms-fpgrid textarea { width: 100%; border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 12px; } .ms-fpchecks { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px 8px; font-size: 11.5px; font-weight: 400; } .ms-fpbtn { width: 100%; margin-top: 12px; border: 0; background: #1F1A14; color: #fff; border-radius: 10px; padding: 11px; font: inherit; font-weight: 600; } .ms-fpform > small { display: flex; gap: 4px; align-items: center; justify-content: center; margin-top: 8px; font-size: 10.5px; color: var(--ink-3); } .ms-fpside { background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #fff; padding: 20px; text-shadow: 0 1px 8px rgba(0,0,0,.6); } .ms-fpside b { font-size: 11px; letter-spacing: .2em; margin-bottom: 10px; } .ms-fpside span { font-size: 20px; line-height: 1.3; }
.ms-prow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); } .ms-prow:last-child { border-bottom: 0; } .ms-prow b { display: block; font-size: 14px; font-weight: 500; } .ms-prow small { color: var(--ink-3); font-size: 12.5px; } .ms-prow select { border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 10px; font: inherit; background: var(--card); flex: none; } .ms-prow .tgl { display: inline-block; } .ms-prow.clicky { cursor: pointer; }
.ms-logos { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-bottom: 14px; } .ms-logos label, .ms-lbl { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; } .ms-logo { position: relative; height: 72px; background: #1F1A14; border-radius: 12px; display: grid; place-items: center; color: #C8A96B; font-size: 22px; letter-spacing: .04em; margin-bottom: 8px; } .ms-logo.sq { width: 72px; } .ms-logo img { max-height: 48px; max-width: 80%; } .ms-logo .icon-btn { position: absolute; right: 6px; bottom: 6px; background: #fff; } .ms-logos small { display: block; color: var(--ink-3); font-size: 11.5px; margin-top: 6px; }
.ms-cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 14px; margin-top: 8px; } .ms-cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; } .ms-col label { display: block; font-size: 12.5px; margin-bottom: 4px; } .ms-col input[type=color] { width: 30px; height: 26px; border: 0; padding: 0; background: none; } .ms-col .lw-in.sm input:not([type=color]) { font-size: 13px; }
.ms-fontprev { display: flex; gap: 12px; align-items: center; border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 14px; } .ms-fontprev b { font-size: 30px; } .ms-fontprev span { font-size: 13px; color: var(--ink-2); } .ms-cols2 select { width: 100%; border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 12px; font: inherit; background: var(--card); }
.ms-cover { position: relative; height: 90px; border-radius: 12px; background-size: cover; background-position: center; display: grid; place-items: center; color: #fff; letter-spacing: .2em; font-size: 12px; text-shadow: 0 1px 8px rgba(0,0,0,.7); } .ms-cover .icon-btn { position: absolute; right: 8px; bottom: 8px; background: #fff; }
.ms-ehead { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; } .ms-ehead img { max-height: 32px; } .ms-ehead b { font-size: 20px; } .ms-cols2 textarea { width: 100%; border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 12px; font: inherit; } .ms-echecks { display: flex; flex-direction: column; gap: 10px; padding-top: 22px; } .ms-social { display: flex; gap: 8px; margin-top: 4px; } .ms-soc { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--card); display: grid; place-items: center; cursor: pointer; color: var(--ink-3); } .ms-soc.on { color: var(--ink); border-color: var(--ink-3); }
.ms-rule.wide > input { width: 100%; max-width: 460px; border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 12px; font: inherit; background: var(--card); }

/* ---------- Contact profile ---------- */
.ct-back { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); text-decoration: none; font-size: 13.5px; margin-bottom: 12px; } .ct-back .ic { transform: rotate(180deg); }
.ct-head { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 20px; align-items: start; margin-bottom: 16px; } @media (max-width: 1200px) { .ct-head { grid-template-columns: 1fr; } }
.ct-id { display: flex; gap: 22px; align-items: flex-start; } .ct-id > .avatar { width: 140px; height: 140px; font-size: 40px; border-radius: 50%; flex: none; } .ct-id h1 { display: flex; align-items: center; gap: 10px; font-size: 30px; margin: 6px 0 4px; } .ct-role { color: var(--ink-3); font-size: 14px; margin-bottom: 10px; } .ct-role span { margin: 0 6px; } .ct-reach { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13.5px; margin-bottom: 12px; } .ct-reach span { display: inline-flex; gap: 6px; align-items: center; } .ct-reach .ic { color: var(--ink-3); }
.ct-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .ct-tags span { background: var(--tint); color: var(--gold-deep); border-radius: 8px; padding: 5px 10px; font-size: 12.5px; font-weight: 500; } .ct-tags button { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--card); display: grid; place-items: center; cursor: pointer; color: var(--ink-2); }
.ct-side { display: grid; gap: 10px; } .ct-acts { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; } .ct-acts .btn { padding: 10px 16px; } .ct-quote { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 40px 14px 16px; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; } .ct-quote i { color: var(--ink-3); } .ct-quote .icon-btn { position: absolute; right: 10px; top: 10px; }
.ct-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 14px; } .ct-tile { display: flex; gap: 14px; align-items: center; padding: 16px 20px; border-right: 1px solid var(--line); color: inherit; text-decoration: none; } .ct-tile:last-child { border-right: 0; } .ct-tile .pw-svcic { width: 46px; height: 46px; border-radius: 12px; border: 0; } .ct-tile b { display: block; font-size: 20px; line-height: 1.1; } .ct-tile span { font-size: 13px; color: var(--ink-2); } .ct-tile > .ic { margin-left: auto; color: var(--ink-3); }
.ct-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; } @media (max-width: 1200px) { .ct-grid { grid-template-columns: 1fr; } } .ct-grid .card-h b { font-size: 15px; }
.ct-kv > div { display: grid; grid-template-columns: 18px 130px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 0; font-size: 13.5px; } .ct-kv .ic { color: var(--ink-3); } .ct-kv span { color: var(--ink-2); } .ct-kv b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.ct-rel { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); } .ct-rel:last-child { border-bottom: 0; } .ct-rel .avatar { width: 52px; height: 52px; font-size: 15px; } .ct-rel > div { flex: 1; min-width: 0; } .ct-rel b { display: block; font-size: 14.5px; } .ct-rel small { display: block; color: var(--ink-3); font-size: 12.5px; margin-bottom: 6px; } .ct-rel > div > span { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--ink-2); margin-top: 3px; } .ct-rel .icon-btn { flex: none; }
.ct-h4 { font-size: 13px; margin: 6px 0 8px; } .ct-h4 + .ct-tags { margin-bottom: 14px; } .ct-notes { position: relative; background: var(--tint); border-radius: 12px; padding: 14px 40px 14px 16px; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; } .ct-notes i { color: var(--ink-3); } .ct-notes .icon-btn { position: absolute; right: 10px; top: 10px; }
.pw-svcic.sm { width: 28px; height: 28px; border-radius: 8px; }
.ct-rel > div.avatar { flex: none; } .ct-back .ic { transform: rotate(90deg); } .ct-tile > .ic { transform: rotate(-90deg); }