:root{
  --bg:#f3f5fb; --card:#ffffff; --ink:#1f2733; --muted:#7a8699;
  --line:#e8ecf4; --accent:#4f46e5; --accent2:#6366f1;
  --good:#12805c; --good-bg:#d9f6e9; --bad:#c0364a; --bad-bg:#fdE7ea;
  --warn:#b26a00; --neutral-bg:#eef1f6; --blue:#2563eb; --red:#ef4444; --gray:#cbd5e1;
  --shadow:0 4px 20px rgba(20,30,60,.06); --shadow2:0 2px 8px rgba(20,30,60,.05);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Segoe UI",-apple-system,Roboto,Arial,sans-serif;font-size:14px;line-height:1.45;}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}

/* верхняя панель */
.topbar{background:linear-gradient(90deg,#0f172a,#1e293b);color:#fff;
  padding:14px 22px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  position:sticky;top:0;z-index:5;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.topbar a{color:#a9bbff}
.brand{font-size:15px;display:flex;gap:12px;align-items:center}
.brand b{font-weight:600}
.topbar .nav a{color:#cbd5e1;margin-left:14px;font-size:13px}
.topbar .nav a:hover{color:#fff}
.user{font-size:13px;color:#cbd5e1}

.wrap{max-width:1120px;margin:22px auto;padding:0 18px}
.wrap.narrow{max-width:820px}
.muted{color:var(--muted);font-size:13px}
h2{font-size:16px;margin:0 0 14px;font-weight:600}
h3{font-weight:600}

/* панель фильтров периода */
.bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.bar .seg{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:var(--shadow2)}
.bar .seg a{padding:8px 14px;color:var(--ink);font-size:13px;border-right:1px solid var(--line)}
.bar .seg a:last-child{border-right:0}
.bar .seg a.active{background:var(--accent);color:#fff}
.bar .seg a:hover{text-decoration:none;background:#f5f6ff}
.bar input[type=date]{padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:#fff}
.btn{padding:9px 16px;background:var(--accent);color:#fff;border:0;border-radius:10px;font-size:14px;
  cursor:pointer;box-shadow:0 3px 10px rgba(79,70,229,.25);transition:.15s}
.btn:hover{background:var(--accent2);transform:translateY(-1px)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow2)}

/* карточки */
.card,.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:18px;margin-bottom:18px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow)}
.stat .n{font-size:28px;font-weight:700;letter-spacing:-.5px}
.stat .l{color:var(--muted);font-size:12px;margin-top:4px}
.stat.accent .n{color:var(--accent)}

/* таблицы */
table{width:100%;border-collapse:collapse}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);font-size:13.5px}
th{background:#fafbfe;color:#55617a;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.03em}
tbody tr:hover td,table tr:hover td{background:#fafbff}
.dist td{background:#fff5f6}

/* значки/пиллы */
.pill{padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;display:inline-block}
.good{background:var(--good-bg);color:var(--good)} .warn{background:var(--bad-bg);color:var(--bad)}
.p-productive{background:var(--good-bg);color:var(--good)}
.p-unproductive{background:var(--bad-bg);color:var(--bad)}
.p-neutral{background:var(--neutral-bg);color:#4a5568}
.tag{padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600}
.t-app{background:#e7 eaff;background:#e8eaff;color:#3730a3}.t-site{background:var(--good-bg);color:var(--good)}
a.name{font-weight:600}

/* выпадашка категории в таблицах */
.catsel{padding:4px 8px;border-radius:8px;border:1px solid var(--line);font-size:12px;cursor:pointer;font-weight:600}
.catsel.c-productive{background:var(--good-bg);color:var(--good);border-color:#b6ecd4}
.catsel.c-unproductive{background:var(--bad-bg);color:var(--bad);border-color:#f6c2c9}
.catsel.c-neutral{background:var(--neutral-bg);color:#4a5568}

/* формы */
label{display:block;font-size:13px;color:#44506a;margin-bottom:10px}
input[type=number],input[type=time],input[type=text],input[type=password],textarea,select{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:#fff;
  font-size:14px;font-family:inherit;margin-top:5px}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,70,229,.12)}
textarea{resize:vertical}
.hint{display:block;color:var(--muted);font-size:11.5px;margin-top:3px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.grid2col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.check{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:14px;color:var(--ink)}
.check input{width:auto;margin:0}
.days{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.day{display:inline-flex;align-items:center;gap:6px;background:#f6f7fb;border:1px solid var(--line);
  border-radius:9px;padding:7px 10px;margin:0;cursor:pointer}
.day input{width:auto;margin:0}
.sticky-save{position:sticky;bottom:0;padding:14px 0;background:linear-gradient(0deg,var(--bg),transparent)}
.toast{padding:11px 14px;border-radius:10px;margin-bottom:14px;font-size:14px}
.toast.ok{background:var(--good-bg);color:var(--good)}

/* алерты */
.alert{padding:10px 14px;background:#fafbff;border-radius:10px;margin-bottom:8px;font-size:13.5px;border-left:4px solid var(--gray)}
.alert-idle{border-left-color:#f59e0b} .alert-distraction{border-left-color:var(--red)}

/* галерея */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.gallery img{width:100%;border-radius:10px;border:1px solid var(--line);cursor:pointer;transition:.15s;aspect-ratio:16/10;object-fit:cover}
.gallery img:hover{transform:scale(1.02);box-shadow:var(--shadow)}
.cap{font-size:11px;color:var(--muted);margin-top:4px}
#modal{display:none;position:fixed;inset:0;background:rgba(10,15,30,.85);align-items:center;justify-content:center;z-index:20}
#modal img{max-width:94vw;max-height:94vh;border-radius:10px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

@media(max-width:860px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .grid2,.grid,.grid2col{grid-template-columns:1fr}
}
/* --- ТЕЛЕФОН --- */
@media(max-width:600px){
  body{font-size:15px}
  .topbar{padding:11px 14px;gap:6px}
  .brand{font-size:15px;flex-wrap:wrap;gap:8px 12px;width:100%}
  .topbar .nav{width:100%;margin-top:2px}
  .topbar .nav a{margin:0 14px 0 0;font-size:14px}
  .user{font-size:12px}
  .wrap{margin:14px auto;padding:0 12px}
  .card,.panel{padding:14px;border-radius:12px}
  .cards{grid-template-columns:repeat(2,1fr);gap:10px}
  .stat{padding:12px}
  .stat .n{font-size:22px}
  .bar{gap:6px}
  .bar .seg a{padding:9px 12px}
  /* широкие таблицы — горизонтальная прокрутка вместо ломки верстки */
  .card table,.panel table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  th,td{padding:9px 10px}
  .catsel{font-size:13px;padding:6px 8px}
  .gallery{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
  .btn,.btn.ghost{padding:10px 14px}
  input,select,textarea{font-size:16px}   /* 16px чтобы iOS не зумил */
  .login-card{width:auto;max-width:92vw}
}

/* вход */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#eef1fb,#e7 ecf8);background:linear-gradient(135deg,#eef1fb,#e9edfa)}
.login-card{background:#fff;border-radius:16px;box-shadow:0 12px 40px rgba(30,40,80,.12);padding:30px 32px;width:340px}
.login-card h1{font-size:19px;margin:0 0 4px}
.login-card .sub{color:var(--muted);font-size:13px;margin-bottom:18px}
.err{color:var(--bad);font-size:13px;margin:8px 0}