:root { color-scheme:dark; --bg:#0a0a0b; --card:#171719; --surface:#242427; --ink:#f7f7f8; --muted:#aaaab0; --line:#333337; --accent:#f5f5f6; --accent-hover:#dddddf; --mint:#29292c; --lime:#f5f5f6; --alert:#e5e5e8; --alert-bg:#2b2b2e; --danger:#d2d2d6; --danger-bg:#29292c; --r:18px; --shadow:0 12px 36px rgba(0,0,0,.14); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--bg); font-size:14px; -webkit-font-smoothing:antialiased; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
button:disabled { opacity:.55; cursor:not-allowed; }
a { color:inherit; }
.hidden { display:none !important; }
.app-shell { min-height:100vh; display:flex; }
.sidebar { width:244px; min-width:244px; background:var(--card); border-right:1px solid var(--line); padding:26px 15px; display:flex; flex-direction:column; }
.brand { display:flex; align-items:center; gap:11px; padding:4px 15px 59px; }
.brand strong { font-size:19px; letter-spacing:-.7px; display:block; line-height:1; }
.brand small { font-size:9px; font-weight:800; letter-spacing:2.35px; color:#b0b0b0; display:block; margin-top:5px; }
.mark { background:var(--accent); color:#fdfdfd; width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:24px; letter-spacing:-2px; line-height:1; }
.mark span { color:var(--lime); }
.menu-heading { color:#9a9a9a; font-weight:800; font-size:10px; letter-spacing:1.5px; margin:0 15px 15px; }
.nav { display:flex; flex-direction:column; gap:7px; }
.nav-item { border:0; background:none; border-radius:11px; text-align:left; padding:13px 14px; display:flex; gap:13px; align-items:center; font-weight:650; color:#b8b8b8; }
.nav-item:hover { background:var(--surface); }
.nav-item.active { background:#383838; color:var(--accent); }
.nav-icon { font-size:21px; width:21px; text-align:center; line-height:1; font-weight:500; }
.side-bottom { margin-top:auto; display:flex; align-items:flex-start; padding:16px 12px 5px; border-top:1px solid var(--line); gap:10px; }
.tiny-dot { background:#b6b6b6; width:7px; height:7px; border-radius:50%; flex:none; margin-top:5px; }
.side-bottom strong { font-size:12px; font-weight:700; display:block; }
.side-bottom small { font-size:11px; color:var(--muted); display:block; line-height:1.65; margin-top:3px; }
.main-area { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar { height:78px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 clamp(24px,5vw,76px); background:rgba(15,15,17,.96); }
.top-left,.top-right { display:flex; align-items:center; gap:16px; }
.header-label { color:#b3b3b3; font-size:11px; letter-spacing:2px; font-weight:800; }
.today-label { font-size:12px; font-weight:650; color:#adadad; }
.top-right { position:relative; }
.icon-button { width:38px; height:38px; border-radius:11px; background:var(--card); border:1px solid var(--line); font-size:27px; letter-spacing:1px; color:#bebebe; line-height:0; padding-bottom:9px; }
.icon-button:hover { background:var(--mint); }
.more-popover { position:absolute; right:0; top:46px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:7px; box-shadow:0 15px 40px #2f2f2f21; z-index:10; width:212px; }
.more-popover button { display:block; width:100%; border:0; background:none; text-align:left; font-weight:650; color:var(--ink); padding:12px 14px; border-radius:9px; }
.more-popover button:hover { background:var(--bg); }
.mobile-mark,.mobile-nav { display:none; }
.content { width:min(100%,1090px); margin:0 auto; padding:48px clamp(24px,5vw,72px) 30px; flex:1; }
.page-foot { padding:15px 24px 25px; text-align:center; font-size:11px; color:#909090; }
.section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:24px; }
.eyebrow { color:#a8a8a8; font-size:10px; letter-spacing:2.4px; font-weight:850; text-transform:uppercase; margin-bottom:9px; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(29px,3vw,39px); line-height:1.18; letter-spacing:-1.65px; font-weight:760; margin-bottom:9px; }
h2 { font-size:18px; letter-spacing:-.5px; margin:0; }
h3 { font-size:15px; letter-spacing:-.25px; margin:0; }
.subtitle { color:var(--muted); font-size:13px; margin:0; line-height:1.7; }
.card { background:var(--card); border-radius:var(--r); border:1px solid var(--line); box-shadow:var(--shadow); }
.add-card { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:27px 30px; background:var(--accent); color:#fdfdfd; border-radius:20px; margin-bottom:37px; position:relative; overflow:hidden; }
.add-card:after { content:""; height:200px; width:200px; border:24px solid rgba(255,255,255,.035); position:absolute; border-radius:100%; right:165px; top:-95px; pointer-events:none; }
.add-card h2 { font-size:20px; margin-bottom:7px; }
.add-card p { color:#d2d2d2; margin:0; font-size:12.5px; line-height:1.6; }
.btn { background:var(--card); color:var(--accent); border:1px solid var(--line); border-radius:11px; padding:11px 17px; font-weight:760; min-height:43px; display:inline-flex; gap:9px; align-items:center; justify-content:center; white-space:nowrap; }
.btn:hover { background:#3f3f3f; }
.btn.primary { background:var(--accent); color:#fdfdfd; border-color:var(--accent); }
.btn.primary:hover { background:var(--accent-hover); }
.btn.on-dark { border-color:var(--accent); background:var(--card); color:var(--accent); }
.btn.ghost { background:transparent; border:1px solid var(--line); color:#e2e2e2; }
.btn.wide { width:100%; }
.btn.danger { background:#2e2e2e; color:var(--danger); border-color:#4e4e4e; }
.btn.small { min-height:34px; padding:7px 11px; font-size:12px; border-radius:9px; }
.meta-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.meta-head p { margin:0; color:#a2a2a2; font-size:12px; }
.group-list { display:grid; gap:11px; }
.group { background:var(--card); border:1px solid var(--line); border-radius:15px; overflow:hidden; box-shadow:var(--shadow); }
.group-trigger { width:100%; display:flex; align-items:center; background:var(--card); border:0; padding:17px 21px; gap:17px; text-align:left; }
.group-trigger:hover { background:#252525; }
.group-time { font-size:19px; font-weight:830; letter-spacing:-.7px; width:65px; flex:none; }
.group-sep { height:35px; width:1px; background:var(--line); flex:none; }
.group-info { min-width:0; flex:1; }
.group-name { font-size:14px; font-weight:760; }
.group-sub { font-size:12px; color:var(--muted); margin-top:4px; }
.count-pill { background:#2f2f2f; border:1px solid var(--line); border-radius:100px; font-size:12px; font-weight:750; min-width:35px; text-align:center; padding:6px 8px; }
.chevron { color:#959595; font-size:22px; margin-left:3px; transition:transform .2s; }
.group.open .chevron { transform:rotate(180deg); }
.group-members { border-top:1px solid var(--line); background:#181818; padding:5px 15px; }
.member-in-group { width:100%; display:flex; gap:10px; padding:11px 7px; align-items:center; border:0; border-bottom:1px solid var(--line); background:none; text-align:left; }
.member-in-group:last-child { border:0; }
.member-in-group:hover { background:#323232; border-radius:9px; }
.avatar { height:36px; width:36px; background:#3a3a3a; display:flex; align-items:center; justify-content:center; color:#e9e9e9; font-weight:830; border-radius:11px; flex:none; font-size:12px; }
.member-name { font-weight:740; font-size:13px; }
.member-sub { margin-top:3px; font-size:11px; color:var(--muted); }
.member-grow { flex:1; min-width:0; }
.mini-arrow { color:#a1a1a1; font-size:22px; }
.toolbar { display:flex; justify-content:space-between; gap:13px; align-items:center; margin-bottom:16px; }
.searchbox { background:var(--card); border:1px solid var(--line); display:flex; align-items:center; gap:9px; border-radius:12px; padding:0 13px; width:min(100%,365px); height:45px; color:#a3a3a3; }
.searchbox input { border:0; outline:0; flex:1; background:transparent; min-width:0; font-size:13px; color:var(--ink); }
.searchbox input::placeholder { color:#949494; }
.small-counter { color:#aaaaaa; font-size:12px; }
.client-list { background:var(--card); border-radius:17px; border:1px solid var(--line); overflow:hidden; }
.client-row { display:flex; align-items:center; gap:15px; padding:14px 19px; border:0; border-bottom:1px solid var(--line); width:100%; text-align:left; background:var(--card); color:var(--ink); min-height:69px; }
.client-row:last-child { border-bottom:0; }
.client-row:hover { background:#2a2a2a; }
.client-row .avatar { width:39px; height:39px; }
.client-person { width:30%; min-width:0; flex:1; }
.client-row .member-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.client-time { width:22%; min-width:95px; font-weight:700; color:#dedede; font-size:12px; }
.client-status { flex:0 0 154px; display:flex; justify-content:flex-start; }
.status { display:inline-block; padding:6px 9px; font-size:11px; font-weight:720; border-radius:8px; background:#353535; color:#dbdbdb; white-space:nowrap; }
.status.soon,.status.today { background:var(--alert-bg); color:var(--alert); }
.status.overdue,.status.archived { background:var(--danger-bg); color:var(--danger); }
.empty { text-align:center; border:1px dashed var(--line); border-radius:18px; padding:65px 20px; color:#a8a8a8; background:var(--card); }
.empty .empty-icon { font-size:32px; margin-bottom:10px; }
.empty h3 { color:#eeeeee; margin-bottom:8px; }
.empty p { margin:0; }
.note { border-radius:12px; background:#2a2a2a; padding:14px 16px; color:#bdbdbd; line-height:1.65; font-size:12px; }
.stats-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.stat-box { padding:23px 24px; }
.stat-box strong { font-size:28px; letter-spacing:-1px; display:block; margin:14px 0 7px; }
.stat-box span { color:#aaaaaa; font-size:12px; font-weight:650; }
.section-space { margin-top:25px; }
.modal-layer { position:fixed; inset:0; background:rgba(0,0,0,.68); z-index:30; display:flex; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(3px); }
.modal { width:min(100%,620px); max-height:min(88dvh,870px); overflow:auto; background:var(--card); border-radius:20px; box-shadow:0 28px 80px #0000003; position:relative; }
.modal-head { padding:24px 27px 20px; border-bottom:1px solid var(--line); display:flex; align-items:flex-start; justify-content:space-between; gap:15px; }
.modal-head h2 { font-size:23px; letter-spacing:-.9px; }
.modal-head .eyebrow { margin-bottom:6px; }
.close-modal { width:34px; height:34px; border-radius:10px; background:#323232; color:#c2c2c2; border:0; font-size:25px; line-height:1; }
.modal-body { padding:23px 27px 27px; }
.modal-sub { margin-bottom:20px; font-size:12.5px; color:var(--muted); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-grid .full { grid-column:1 / -1; }
label { display:flex; flex-direction:column; gap:8px; color:#dedede; font-size:12px; font-weight:730; }
label span.optional { color:#a2a2a2; font-weight:500; }
input,textarea,select { background:#181818; border:1px solid #4f4f4f; width:100%; color:var(--ink); border-radius:10px; padding:11px 12px; outline:none; font-size:14px; min-height:44px; }
input:focus,textarea:focus,select:focus { border-color:#8b8b8b; box-shadow:0 0 0 3px #b6b6b625; }
textarea { resize:vertical; min-height:72px; }
input::placeholder,textarea::placeholder { color:#929292; }
details { border:1px solid var(--line); padding:13px 14px; border-radius:12px; margin-top:17px; }
details summary { cursor:pointer; font-weight:750; color:#dfdfdf; font-size:13px; }
details .form-grid { margin-top:15px; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; padding-top:23px; }
.match-area { margin-top:14px; }
.match-row { border:1px solid #585858; background:#353535; padding:14px; border-radius:13px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.match-row strong { font-size:12px; flex:1; }
.match-row p { color:var(--muted); font-size:11px; margin:4px 0 0; }
.link-button { background:none; border:0; color:#d5d5d5; text-decoration:underline; padding:5px 0; font-size:12px; font-weight:700; }
.detail-name { font-size:23px; margin-bottom:10px; }
.detail-top { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.detail-data { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:20px 0; }
.data-tile { background:#2b2b2b; border-radius:12px; padding:15px; min-height:77px; }
.data-tile small { display:block; font-size:11px; color:#afafaf; margin-bottom:8px; }
.data-tile strong { font-size:14px; font-weight:800; }
.contact-row { display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-bottom:19px; }
.contact-row .phone-number { font-size:13px; font-weight:750; margin-right:auto; }
.horizontal-rule { border:0; border-top:1px solid var(--line); margin:22px 0; }
.detail-toolbar { display:flex; gap:9px; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.records { display:grid; gap:9px; margin-top:13px; }
.record { border:1px solid var(--line); border-radius:11px; padding:12px 14px; display:flex; justify-content:space-between; gap:12px; font-size:12px; }
.record strong { display:block; margin-bottom:4px; font-size:12.5px; }
.record small { color:var(--muted); font-size:11px; line-height:1.5; }
.confirm-box { background:#2c2c2c; border:1px solid #606060; border-radius:14px; padding:17px; margin-top:20px; }
.confirm-box strong { display:block; margin-bottom:6px; }
.confirm-box p { color:#d2d2d2; line-height:1.65; font-size:12px; margin:0 0 14px; }
.confirm-actions { display:flex; gap:8px; justify-content:flex-end; }
.auth-shell { min-height:100dvh; display:grid; place-items:center; padding:24px; background:radial-gradient(ellipse at 15% 0%,#ededed,transparent 48%),var(--bg); }
.auth-card { width:min(100%,430px); padding:44px 38px; background:var(--card); border:1px solid var(--line); border-radius:22px; box-shadow:0 24px 70px #34343412; }
.large-mark { width:50px; height:50px; font-size:30px; margin-bottom:27px; }
.auth-card h1 { font-size:31px; margin-bottom:12px; }
.auth-card > p { line-height:1.7; font-size:13px; color:#acacac; margin-bottom:28px; }
.stack { display:grid; gap:18px; }
.stack .btn { margin-top:3px; }
.login-foot { border-top:1px solid var(--line); margin-top:29px; padding-top:19px; font-size:11px; color:#9d9d9d; text-align:center; }
.error-text { margin:0; color:var(--danger); font-size:12px; }
.toast { z-index:40; position:fixed; right:26px; bottom:25px; border-radius:12px; padding:14px 18px; max-width:min(420px,calc(100vw - 42px)); box-shadow:0 12px 35px #0000002; background:#5e5e5e; color:#ffffff; font-weight:690; font-size:12px; }
.toast.bad { background:#555555; }
@media(max-width:850px){ .sidebar { width:215px; min-width:215px; } .content { padding:32px 26px 35px; } .topbar { padding:0 26px; } }
@media(max-width:650px){
 .sidebar { display:none; } .mobile-nav { display:flex; position:fixed; bottom:0; left:0; right:0; height:calc(67px + env(safe-area-inset-bottom)); background:var(--card); border-top:1px solid var(--line); z-index:12; padding:7px 17px env(safe-area-inset-bottom); justify-content:space-around; }
 .mobile-nav-item { border:0; background:none; min-width:75px; color:#acacac; display:flex; align-items:center; justify-content:center; gap:5px; flex-direction:column; font-size:10px; font-weight:800; }
 .mobile-nav-item span { font-size:25px; line-height:1; }
 .mobile-nav-item.active { color:var(--accent); }
 .topbar { height:70px; padding:0 20px; } .mobile-mark { display:flex; width:31px; height:31px; font-size:20px; border-radius:10px; }
 .header-label { font-size:10px; letter-spacing:1.7px; }
 .today-label { font-size:11px; } .content { padding:32px 16px 30px; }
 .page-foot { display:none; } .app-shell { padding-bottom:calc(67px + env(safe-area-inset-bottom)); }
 .add-card { padding:20px; margin-bottom:31px; gap:14px; } .add-card h2 { font-size:16px; } .add-card p { font-size:11px; } .add-card .btn { padding:9px 11px; font-size:12px; }
 .section-head { align-items:flex-start; } .client-row { padding:12px; gap:9px; min-height:64px; } .client-row .avatar { width:33px; height:33px; border-radius:9px; }
 .client-time { display:none; } .client-status { flex:0 0 auto; max-width:128px; } .status { font-size:10px; padding:5px 7px; white-space:normal; }
 .group-trigger { padding:15px; gap:12px; } .group-time { width:55px; font-size:17px; } .group-info { flex:1; }
 .modal-layer { padding:0; align-items:flex-end; } .modal { width:100%; max-height:93dvh; border-radius:21px 21px 0 0; padding-bottom:env(safe-area-inset-bottom); }
 .modal-head { padding:21px 19px 16px; } .modal-body { padding:19px 19px 25px; } .modal-head h2 { font-size:20px; }
 .form-grid { gap:12px; } .form-grid .span-mobile { grid-column:1/-1; } .detail-data { gap:9px; } .data-tile { padding:12px; }
 .auth-card { padding:33px 23px; } .toast { bottom:calc(77px + env(safe-area-inset-bottom)); right:12px; left:12px; max-width:none; }
}
@media(max-width:390px){ .add-card { flex-direction:column; align-items:stretch; } .group-sub { font-size:11px; } .today-label { display:none; } }

.nav-icon svg { display:block; width:21px; height:21px; }
.mobile-nav-item svg { display:block; width:22px; height:22px; margin:0 auto 1px; }

/* DZEKA — monochrome. Black surfaces, white actions, no accent colours. */
.brand strong { letter-spacing:1.4px; font-size:20px; }
.mark { background:#f5f5f6; color:#101012; letter-spacing:-1px; font-size:23px; }
.mark span { color:#101012; }
.header-label { color:#f5f5f6; }
.topbar { background:#111113; }
.nav-item.active { background:#303034; color:#ffffff; }
.mobile-nav-item.active { color:#ffffff; }
.tiny-dot { background:#eeeeef; }
.add-card { background:#202023; border:1px solid #3b3b3f; color:var(--ink); }
.add-card:after { display:none; }
.add-card p { color:var(--muted); }
.btn { background:#27272b; color:var(--ink); border-color:#414146; }
.btn:hover { background:#35353a; }
.btn.primary,.btn.on-dark { color:#111113; background:#f5f5f6; border-color:#f5f5f6; }
.btn.primary:hover,.btn.on-dark:hover { background:#dddddf; }
.btn.ghost { color:var(--ink); }
.btn.danger { color:#f0f0f0; background:#323235; border-color:#535359; }
.status { background:#29292d; color:#e9e9ec; border:1px solid #47474d; }
.status.soon,.status.today { background:#303034; color:#ffffff; border-color:#77777e; }
.status.overdue,.status.archived { background:#26262a; color:#ccccd0; border:1px dashed #88888f; }
label { color:#e4e4e7; }
input,textarea,select { background:#101012; color:var(--ink); border-color:#44444a; }
input:focus,textarea:focus,select:focus { border-color:#e8e8ec; box-shadow:0 0 0 3px rgba(255,255,255,.13); }
.match-row { background:#222225; border-color:#515156; }
.confirm-box { background:#232326; border-color:#636368; }
.confirm-box p { color:#d4d4d9; }
.link-button { color:#f5f5f6; }
.toast { background:#f0f0f1; color:#141415; }
.toast.bad { background:#bdbdc2; color:#141415; }
.auth-shell { background:#0a0a0b; }
.auth-card { box-shadow:0 24px 70px rgba(0,0,0,.3); }
.modal-layer { background:rgba(0,0,0,.74); }
.modal { box-shadow:0 28px 80px rgba(0,0,0,.65); }
.more-popover { box-shadow:0 15px 40px rgba(0,0,0,.4); }
@media(max-width:650px){ .mobile-nav { background:#141416; } .mobile-mark { font-size:19px; } }