:root{
  --ink:#20242e; --ink-soft:#535a68; --paper:#f5f3ee; --surface:#ffffff;
  --line:#e4e0d6; --seal:#9a3b34; --ok:#1f6f4f; --field:#fbfaf7;
  --radius:10px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:16px/1.6 "Segoe UI",system-ui,-apple-system,sans-serif;
}
a{color:var(--seal);text-decoration:none}
a:hover{text-decoration:underline}

.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 24px;background:var(--surface);border-bottom:1px solid var(--line);
}
.brand{font-weight:600;color:var(--ink);font-size:18px;letter-spacing:.2px}
.brand .seal{color:var(--seal);font-size:20px}
.topbar nav{display:flex;gap:18px;flex-wrap:wrap}
.topbar nav a{color:var(--ink-soft);font-size:15px}
.topbar nav a.muted{color:#9a9488}

main{max-width:920px;margin:28px auto;padding:0 24px}
h1{font-size:26px;font-weight:600;margin:0 0 4px}
h2{font-size:19px;font-weight:600;margin:0 0 8px}
h3{font-size:15px;font-weight:600;margin:18px 0 6px;color:var(--ink-soft)}
.muted{color:var(--ink-soft)}
.small{font-size:13px}

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;margin:18px 0;
}
.card.narrow{max-width:380px;margin:48px auto}
details.card>summary{cursor:pointer;font-weight:600;margin:-4px 0 12px}

label{display:block;margin:12px 0;font-size:14px;color:var(--ink-soft)}
input[type=text],input[type=email],input[type=password],input[type=file],select,textarea{
  display:block;width:100%;margin-top:5px;padding:10px 12px;
  background:var(--field);border:1px solid var(--line);border-radius:8px;
  font:inherit;color:var(--ink);
}
.row{display:flex;gap:16px}
.row>label{flex:1}
label.check{display:flex;align-items:center;gap:8px;color:var(--ink)}
label.check input{width:auto;margin:0}

button,.btn{
  display:inline-block;margin-top:14px;padding:10px 18px;border:0;border-radius:8px;
  background:var(--ink);color:#fff;font:inherit;font-weight:500;cursor:pointer;
}
button:hover,.btn:hover{background:#2c3340;text-decoration:none}
.btn-light{
  margin:0;padding:7px 13px;background:var(--field);color:var(--ink);
  border:1px solid var(--line);font-size:14px;
}
.btn-light:hover{background:#efece4;text-decoration:none}

.grid{width:100%;border-collapse:collapse;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.grid th,.grid td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.grid th{background:var(--field);font-size:13px;color:var(--ink-soft);font-weight:600}
.grid tr:last-child td{border-bottom:0}
.grid select{margin:0;padding:6px 8px;width:auto;min-width:110px}

.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600}
.badge.signed{background:#eaf3ee;color:var(--ok);border:1px solid #cfe6da}

.stats{display:flex;gap:16px;margin:20px 0}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 22px;min-width:150px}
.stat .n{display:block;font-size:30px;font-weight:600}
.stat .l{color:var(--ink-soft);font-size:14px}
.actions{display:flex;gap:12px;margin-top:8px}

.flash{padding:11px 16px;border-radius:8px;margin-bottom:18px;font-size:15px}
.flash-ok{background:#eaf3ee;color:var(--ok);border:1px solid #cfe6da}
.flash-info{background:#eef1f6;color:#3a4658;border:1px solid #d8dfea}
.error{color:var(--seal);font-weight:500;margin:8px 0}
.notice{background:#fbf3e8;border:1px solid #f0dcbf;color:#7a5a1e;padding:12px 16px;border-radius:8px;margin:14px 0}
.empty{background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius);
  padding:36px;text-align:center;color:var(--ink-soft)}

.sigpad{width:100%;max-width:600px;height:180px;background:#fff;border:1px dashed #bdb7a8;
  border-radius:8px;touch-action:none;display:block}
.sig-preview{max-width:280px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:6px;margin:6px 0}

.foot{max-width:920px;margin:30px auto;padding:16px 24px;color:#9a9488;font-size:13px;
  border-top:1px solid var(--line)}

/* ---------- Phase 2 / 3 additions ---------- */
.navcount{display:inline-block;min-width:18px;padding:0 5px;border-radius:999px;
  background:var(--seal);color:#fff;font-size:11px;font-weight:700;text-align:center;line-height:18px}

.badge.approved{background:#eaf3ee;color:var(--ok);border:1px solid #cfe6da}
.badge.rejected{background:#f7e9e8;color:var(--seal);border:1px solid #ecd2d0}
.badge.pending{background:#fbf3e8;color:#8a6d1e;border:1px solid #f0dcbf}

.card.highlight{border-color:#cfe6da;background:#f4faf6}

.btn-ok{background:var(--ok)}
.btn-ok:hover{background:#195c41}
.btn-danger{background:var(--seal)}
.btn-danger:hover{background:#7f312b}

/* timeline */
.timeline{list-style:none;margin:0;padding:0}
.timeline li{position:relative;padding:0 0 16px 24px;border-left:2px solid var(--line);margin-left:6px}
.timeline li:last-child{border-left-color:transparent}
.timeline li::before{content:"";position:absolute;left:-7px;top:3px;width:12px;height:12px;border-radius:50%;
  background:#fff;border:2px solid var(--line)}
.timeline li.tl-done::before{background:var(--ok);border-color:var(--ok)}
.timeline li.tl-active::before{background:var(--seal);border-color:var(--seal)}
.timeline li.tl-stopped::before{background:var(--seal);border-color:var(--seal)}
.tl-head{margin-bottom:4px}
.tl-state{float:right;font-size:12px;color:var(--ink-soft)}
.tl-state.active{color:var(--seal);font-weight:600}
.tl-state.done{color:var(--ok)}
.tl-task{font-size:14px;color:var(--ink-soft);margin:2px 0}

/* workflow editor */
.card.step{border-left:3px solid var(--line)}
.approvers{margin:10px 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:4px;background:var(--field);border:1px solid var(--line);
  border-radius:999px;padding:4px 6px 4px 12px;font-size:13px}
.chip-x{background:none;border:0;color:var(--ink-soft);cursor:pointer;font-size:16px;margin:0;padding:0 4px;line-height:1}
.chip-x:hover{color:var(--seal);background:none}
.addapprover select{margin:0;width:auto;min-width:120px}
.addapprover{align-items:center;gap:10px}

.notif.unread{border-left:3px solid var(--seal)}
.notif{padding:14px 18px}

/* ---------- Preview ---------- */
.preview-container{margin:16px 0}
.preview-frame{width:100%;height:70vh;border:1px solid var(--line);border-radius:6px;background:#fff}
.preview-image{max-width:100%;border-radius:6px;border:1px solid var(--line)}

/* ---------- Telegram link code ---------- */
.tg-code{font-size:28px;font-weight:700;letter-spacing:6px;color:var(--seal);
  background:var(--field);padding:12px 20px;border-radius:8px;display:inline-block;
  font-family:monospace;border:2px dashed var(--line)}

/* ---------- Office file preview card ---------- */
.office-preview{text-align:center;padding:48px 24px;background:#fff;border-radius:8px;border:1px solid var(--line)}
.office-icon{font-size:56px;margin-bottom:16px}
.office-preview h3{font-size:16px;font-weight:500;margin-bottom:8px}
.office-preview p{font-size:13px;color:var(--ink-soft);margin-bottom:8px}