:root{
  --ink:#101820; --ink2:#1B2430; --muted:#3D4854; --muted2:#5C6670; --muted3:#8A94A0;
  --line:#E3E7EA; --line2:#C9D1D8; --bg:#F6F7F8; --accent:#2E7D9E; --navy:#0F3D5C;
  --danger:#A32D2D; --ok:#2F7D4F;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Golos Text',system-ui,sans-serif;color:var(--ink);background:var(--bg);font-size:15px;line-height:1.5}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--navy)}
h1{font-family:'Cormorant Garamond',Georgia,serif;font-size:34px;font-weight:600;margin:0 0 6px}
.sub{font-size:13px;color:var(--muted3);margin:0 0 26px}

.atop{position:sticky;top:0;z-index:50;background:#fff;border-top:3px solid var(--accent);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px 26px;flex-wrap:wrap;padding:14px 24px}
.abrand{font-weight:600;letter-spacing:.14em;font-size:14px}
.atop nav{display:flex;gap:4px;flex-wrap:wrap}
.atop nav a{padding:8px 14px;font-size:14px;font-weight:500;border:1px solid transparent}
.atop nav a.on{background:var(--ink);color:#fff}
.atop nav a:not(.on):hover{border-color:var(--line2)}
.aright{margin-left:auto;display:flex;gap:18px;font-size:13px;color:var(--muted2)}
.aright a{color:var(--muted2)}
.aright a:hover{color:var(--ink)}

.amain{max-width:1100px;margin:0 auto;padding:36px 24px 80px}

.card{background:#fff;border:1px solid var(--line);padding:22px 24px;margin-bottom:18px}
.tablewrap{background:#fff;border:1px solid var(--line);overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{background:#fff;text-align:left;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted3);
  padding:12px 14px;border-bottom:2px solid var(--ink);white-space:nowrap}
td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:none}
td.dim{color:var(--muted3);font-size:13px}

.abtn{display:inline-block;cursor:pointer;background:#fff;color:var(--ink);border:1px solid var(--ink);padding:10px 18px;
  font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-family:inherit;transition:all .15s}
.abtn:hover{background:var(--ink);color:#fff}
.abtn--dark{background:var(--ink);color:#fff}
.abtn--dark:hover{background:var(--navy);border-color:var(--navy)}
.abtn--sm{padding:6px 10px;font-size:11px;letter-spacing:.06em}
.abtn--ghost{border-color:var(--line2);color:var(--muted2)}
.abtn--ghost:hover{background:#fff;color:var(--ink);border-color:var(--ink)}
.abtn--danger{border-color:var(--danger);color:var(--danger)}
.abtn--danger:hover{background:var(--danger);color:#fff}
.iconb{cursor:pointer;background:#fff;border:1px solid var(--line2);width:30px;height:30px;font-size:14px;color:var(--muted2);font-family:inherit}
.iconb:hover{border-color:var(--ink);color:var(--ink)}

.afield{width:100%;border:1px solid var(--line2);background:#fff;padding:12px 14px;font-size:15px;outline:none;color:var(--ink);font-family:inherit}
.afield:focus{border-color:var(--ink)}
label.f{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);margin:18px 0 8px}
label.f:first-child{margin-top:0}
.check{display:flex;align-items:center;gap:10px;font-size:14px;margin-top:18px;cursor:pointer}
.formrow{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.formrow>div{flex:1;min-width:180px}
.hint{font-size:12px;color:var(--muted3);margin-top:8px;line-height:1.5}

.badge{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.06em;padding:5px 10px;border:1px solid var(--line2);color:var(--muted2);white-space:nowrap}
.badge.new{border-color:var(--accent);color:var(--accent)}
.badge.called{border-color:#B07A1E;color:#B07A1E}
.badge.done{border-color:var(--ok);color:var(--ok)}
.badge.spam{border-color:var(--line2);color:var(--muted3)}
.kind{font-size:11px;letter-spacing:.06em;color:var(--muted3);text-transform:uppercase}

.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.filters a{font-size:13px;font-weight:500;padding:8px 14px;background:#fff;border:1px solid var(--line)}
.filters a.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.filters b{font-weight:600}

.statusform{display:inline}
.statusform button{cursor:pointer;background:none;border:1px solid var(--line2);padding:5px 9px;font-size:11px;color:var(--muted2);font-family:inherit;margin:1px}
.statusform button:hover{border-color:var(--ink);color:var(--ink)}

.notesform{display:flex;gap:4px;margin-top:8px;max-width:320px}
.notesform input{flex:1;min-width:0;border:1px solid var(--line);background:#fff;padding:5px 8px;font-size:12px;font-family:inherit;color:var(--ink);outline:none}
.notesform input:focus{border-color:var(--ink)}
.notesform button{cursor:pointer;background:none;border:1px solid var(--line2);padding:0 10px;font-size:12px;color:var(--ok);font-family:inherit}
.notesform button:hover{border-color:var(--ok);background:var(--ok);color:#fff}

.thumb{width:52px;height:52px;object-fit:cover;display:block;border:1px solid var(--line)}
.thumb--empty{display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--muted3);font-size:18px}

.head-actions{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}

/* --- обзор дня: карточки в стиле Google Calendar --- */
.day-nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.day-wrap{background:#fff;border:1px solid var(--line);overflow-x:auto}
.day-grid{display:grid;gap:0;min-width:640px}
.day-head{position:sticky;top:0;background:#fff;border-bottom:1px solid #dadce0;border-right:1px solid #e8eaed;
  padding:10px 12px;font-size:13px;z-index:3}
.day-head b{display:block}
.day-head span{font-size:11px;color:#70757a}
.day-times{position:relative}
.day-hour{position:absolute;right:10px;transform:translateY(-50%);font-size:10px;color:#70757a;background:#fff;padding:0 2px}
.day-col{position:relative;border-left:1px solid #e8eaed;background:#fff;overflow:hidden}
.gc-hline{position:absolute;left:0;right:0;border-top:1px solid #eef0f2;pointer-events:none}
.gc-off{position:absolute;left:0;right:0;background:#f1f3f4;pointer-events:none}
.gc-block{position:absolute;left:3px;right:6px;box-sizing:border-box;border-radius:6px;overflow:hidden;
  background:repeating-linear-gradient(135deg,#e8eaed,#e8eaed 5px,#f1f3f4 5px,#f1f3f4 10px);
  color:#5f6368;font-size:11px;padding:3px 8px;border:1px solid #dadce0;z-index:1}
.gc-event{position:absolute;left:3px;right:6px;box-sizing:border-box;border-radius:6px;overflow:hidden;
  padding:3px 8px;font-size:12px;line-height:1.3;color:#fff;cursor:default;z-index:2;
  border:1px solid rgba(255,255,255,.9);box-shadow:0 1px 2px rgba(60,64,67,.2);transition:box-shadow .12s}
.gc-event:hover{box-shadow:0 2px 6px rgba(60,64,67,.35);z-index:4}
.gc-event.st-new{background:#039be5}
.gc-event.st-confirmed{background:#0b8043}
.gc-event.st-called{background:#f6bf26;color:#3c4043}
.gc-event.st-called a{color:#3c4043}
.gc-line1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.gc-line2{font-size:11px;opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-line3{display:flex;align-items:center;gap:8px;margin-top:3px;font-size:11px}
.gc-line3 a{color:#fff;text-decoration:underline}
.gc-confirm{display:inline}
.gc-confirm button{cursor:pointer;border:none;border-radius:4px;background:rgba(255,255,255,.28);
  color:inherit;font-family:inherit;font-size:11px;padding:2px 8px}
.gc-confirm button:hover{background:rgba(255,255,255,.45)}
.gc-now{position:absolute;left:0;right:0;height:2px;background:#ea4335;z-index:5;pointer-events:none}
.gc-now::before{content:"";position:absolute;left:-1px;top:-4px;width:10px;height:10px;border-radius:50%;background:#ea4335}
.msg-ok{background:#EAF3DE;border:1px solid #97C459;color:#27500A;padding:12px 16px;font-size:14px;margin-bottom:18px}
.login-wrap{max-width:400px;margin:80px auto;padding:0 20px}
.login-card{background:#fff;border:1px solid var(--line);border-top:3px solid var(--accent);padding:36px}
.login-card h1{font-size:30px}
.err{color:var(--danger);font-size:13px;margin-top:12px}
.inline-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.inline-form .afield{flex:1;min-width:200px;width:auto}
@media (max-width:700px){.amain{padding:24px 14px 60px}.card{padding:16px}}