:root { --ink:#0F1F3D; --marigold:#F2A900; --marigold-2:#D99400; --bg:#F3F2EC; --card:#fff; --line:#E3E0D6; --slate:#55607A; --up:#1B9E5F; --down:#C8402B; --mono:"IBM Plex Mono",ui-monospace,monospace; }
* { box-sizing:border-box; }
body { margin:0; font-family:"IBM Plex Sans",system-ui,sans-serif; background:var(--bg); color:var(--ink); font-size:15px; line-height:1.5; }
a { color:inherit; }
.shell { display:grid; grid-template-columns:230px 1fr; min-height:100vh; }
.side { background:var(--ink); color:#fff; padding:22px 16px; display:flex; flex-direction:column; gap:22px; position:sticky; top:0; height:100vh; }
.side-brand { font-weight:600; font-size:1.25rem; letter-spacing:-.01em; }
.side-brand em { font-style:normal; color:var(--marigold); }
.side-brand span { display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:#8F9BB8; margin-top:2px; }
.side nav { display:flex; flex-direction:column; gap:4px; }
.side nav a { padding:10px 12px; border-radius:8px; text-decoration:none; color:#C9D2E6; font-weight:500; display:flex; justify-content:space-between; align-items:center; }
.side nav a:hover { background:rgba(255,255,255,.07); color:#fff; }
.side nav a.on { background:var(--marigold); color:var(--ink); font-weight:600; }
.pill { background:var(--down); color:#fff; font-size:.7rem; padding:2px 7px; border-radius:999px; font-family:var(--mono); }
.side nav a.on .pill { background:var(--ink); }
.side-user { margin-top:auto; border-top:1px solid rgba(255,255,255,.12); padding-top:14px; font-size:.85rem; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.side-user span { display:block; color:#8F9BB8; font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; }
.side-user a { color:#C9D2E6; }
.content { padding:28px 32px; max-width:1200px; width:100%; }
@media (max-width:820px) { .shell { grid-template-columns:1fr; } .side { position:static; height:auto; } .side nav { flex-direction:row; flex-wrap:wrap; } .content { padding:18px; } }

h1 { font-size:1.6rem; margin:0 0 4px; letter-spacing:-.01em; }
h2 { font-size:1.15rem; margin:0 0 12px; }
.page-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.page-head p { margin:0; color:var(--slate); }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px; margin-bottom:20px; }
.grid { display:grid; gap:16px; } .grid-2 { grid-template-columns:1fr 1fr; } .grid-3 { grid-template-columns:repeat(3,1fr); } .grid-4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:900px) { .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr 1fr; } } @media (max-width:560px) { .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; } }
.stat { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; }
.stat span { font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); display:block; }
.stat strong { font-size:1.8rem; font-weight:600; }

label { display:block; font-size:.85rem; font-weight:600; margin-bottom:12px; }
label input, label select, label textarea { display:block; width:100%; margin-top:4px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font:inherit; background:#fff; }
label textarea { min-height:90px; resize:vertical; }
label small { font-weight:400; color:var(--slate); }
input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible { outline:3px solid var(--marigold); outline-offset:1px; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:8px; border:1px solid var(--line); background:#fff; font:inherit; font-weight:600; font-size:.9rem; cursor:pointer; text-decoration:none; color:var(--ink); }
.btn:hover { background:#F7F5EE; }
.btn.primary { background:var(--marigold); border-color:var(--marigold); } .btn.primary:hover { background:var(--marigold-2); }
.btn.danger { color:var(--down); } .btn.danger:hover { background:#FDE8E4; border-color:var(--down); }
.btn.sm { padding:5px 10px; font-size:.8rem; }

table { width:100%; border-collapse:collapse; font-size:.9rem; }
th, td { text-align:left; padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); font-weight:600; }
td.num { font-family:var(--mono); }
tr:hover td { background:#FAF9F5; }
.up { color:var(--up); } .down { color:var(--down); }
.muted { color:var(--slate); }
.tag { display:inline-block; font-family:var(--mono); font-size:.7rem; padding:3px 8px; border-radius:6px; background:#EFECE3; text-transform:uppercase; letter-spacing:.06em; }
.tag.new { background:#FFF1CC; color:#8A5B00; } .tag.contacted { background:#DCEBFF; color:#1B4F9E; } .tag.in_progress { background:#E7E3FF; color:#4B2FA6; } .tag.converted { background:#E6F7EE; color:#0E6E3E; } .tag.closed { background:#EEE; color:#666; }
.flash { padding:12px 14px; border-radius:8px; margin-bottom:18px; font-size:.92rem; }
.flash.ok { background:#E6F7EE; border:1px solid var(--up); } .flash.err { background:#FDE8E4; border:1px solid var(--down); }
.empty { text-align:center; color:var(--slate); padding:36px; border:1px dashed var(--line); border-radius:12px; }
.filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.filters a { padding:6px 12px; border-radius:999px; border:1px solid var(--line); font-size:.85rem; text-decoration:none; background:#fff; }
.filters a.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.note { border-left:3px solid var(--marigold); padding:8px 12px; margin-bottom:10px; background:#FAF9F5; font-size:.9rem; }
.note small { display:block; color:var(--slate); font-family:var(--mono); font-size:.7rem; margin-top:2px; }
.inline-form { display:inline; }
.login-body { display:grid; place-items:center; min-height:100vh; }
.login-card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:30px; width:min(400px, 92vw); }
.login-card .btn { width:100%; justify-content:center; }