*{box-sizing:border-box}
:root{
  --bg:#02080d;--panel:#06131b;--line:#0c7890;--cyan:#42d9ee;
  --text:#d9e8ee;--muted:#8297a0;--gold:#ffbd22;--red:#ff3949;--green:#18e59b
}
body{
  margin:0;background:
  radial-gradient(circle at 50% 0,#09202a 0,transparent 34%),
  linear-gradient(180deg,#02080d,#010507);
  color:var(--text);font-family:Arial,sans-serif
}
.dashboard{width:min(1800px,96%);margin:22px auto 50px}
.panel{
  background:linear-gradient(145deg,rgba(7,24,33,.96),rgba(2,10,15,.98));
  border:1px solid var(--line);border-radius:7px;
  box-shadow:0 0 18px rgba(0,190,220,.08),inset 0 0 18px rgba(0,130,160,.04)
}
.top-grid{display:grid;grid-template-columns:1fr 1.6fr 1fr;gap:16px}
.info-panel,.vacation-panel{padding:22px}
.info-panel{display:flex;align-items:center;gap:22px}
.info-panel h2,.vacation-panel h2,.certificates h2{
  margin:0 0 18px;color:#e7f4f7;letter-spacing:1.5px
}
.info-panel p{color:var(--muted);font-size:14px}
.red{color:var(--red)!important}.gold{color:var(--gold)!important}
.green{color:var(--green)!important}

.donor-bag{display:flex;width:90px;height:118px;border:3px solid #cbd6d8;border-radius:7px;overflow:hidden;transform:rotate(-2deg)}
.bag{width:50%;height:100%}
.blood{background:linear-gradient(#c81328,#720516)}
.plasma{background:linear-gradient(#ffd34c,#d38d00)}

.honor-panel{padding:18px 24px;display:flex;align-items:center;gap:24px}
.medal{
  width:130px;height:130px;border-radius:50%;position:relative;overflow:hidden;
  border:7px solid #9a7422;background:#444a4d;
  box-shadow:0 0 20px rgba(255,184,25,.25)
}
.medal-fill{
  position:absolute;left:0;right:0;bottom:0;height:78.3%;
  background:linear-gradient(135deg,#6f4c00,#ffcf3f 55%,#8d6200)
}
.medal-content{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;font-size:11px;font-weight:bold;
  color:#fff;text-shadow:0 1px 3px #000
}
.medal-content strong{font-size:20px;color:#fff}
.medal-content i{font-style:normal;color:#ff243b;font-size:22px}
.honor-progress{flex:1}
.honor-progress h1{margin:0 0 8px;font-size:22px;letter-spacing:1px}
.progress-numbers{display:flex;justify-content:space-between;align-items:end}
.progress-numbers strong{font-size:29px}
.progress-numbers span{color:var(--gold);font-size:24px;font-weight:bold}
.progress{
  height:10px;background:#17323c;border-radius:8px;overflow:hidden;margin:9px 0 8px
}
.progress div{height:100%;background:linear-gradient(90deg,#b57c00,#ffd54d)}
.remaining{margin:5px 0;font-size:15px}
.remaining strong{color:var(--gold);font-size:19px}
.honor-progress small{color:var(--muted)}

.vacation-row{
  display:grid;grid-template-columns:1fr auto;align-items:center;
  border-bottom:1px solid #173642;padding:8px 0
}
.vacation-row strong{font-size:27px;color:var(--gold)}
.vacation-row small{grid-column:1/3;color:var(--muted)}
.vacation-left{display:flex;justify-content:space-between;align-items:center;padding-top:12px}
.vacation-left strong{font-size:34px;color:var(--green)}

.certificates{margin-top:16px;padding:20px}
.certificates>h2{text-align:center}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.stats>div{
  border:1px solid #164b5b;background:#061820;padding:13px 16px;border-radius:5px;
  display:flex;flex-direction:column
}
.stats span{color:var(--muted);font-size:13px}
.stats strong{font-size:24px;margin-top:4px}
.stats small{color:var(--muted)}
.used-count{color:var(--red)}
.used-count i,.status.used i{
  display:inline-flex;width:21px;height:21px;border-radius:50%;
  align-items:center;justify-content:center;background:var(--red);
  color:#fff;font-style:normal;font-weight:bold
}

.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:1450px;font-size:13px}
th{
  background:#082532;color:#b7dbe3;text-align:left;padding:10px 8px;
  border:1px solid #145166;white-space:nowrap
}
td{padding:10px 8px;border:1px solid #103945;white-space:nowrap}
tbody tr:nth-child(even){background:rgba(8,36,46,.45)}
tbody tr:hover{background:#0a2b36}
a{color:#2cc9ff;text-decoration:none}
.pdf{color:#ff4655;font-weight:bold}
.type{font-weight:bold}
.blood-type{color:#ff5360}.plasma-type{color:#ffc52e}
.status{font-weight:bold}
.status.free{color:var(--green)}
.status.free i{
  display:inline-flex;width:21px;height:21px;border-radius:50%;
  align-items:center;justify-content:center;background:var(--green);
  color:#00140e;font-style:normal;margin-right:4px
}
.status.used{color:var(--red)}

.bottom-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.bottom-grid .panel{padding:18px 22px}
.bottom-grid h3{margin:0 0 14px;color:#d9f3f8;letter-spacing:1px}
.bottom-grid p{margin:9px 0;color:#a7bbc2;font-size:14px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:9px}
.green-bg{background:var(--green);box-shadow:0 0 8px var(--green)}
.gold-bg{background:var(--gold);box-shadow:0 0 8px var(--gold)}
.red-bg{background:var(--red);box-shadow:0 0 8px var(--red)}

@media(max-width:1100px){
  .top-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .bottom-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .dashboard{width:96%;margin-top:10px}
  .honor-panel{flex-direction:column;text-align:center}
  .stats{grid-template-columns:1fr}
  .info-panel{flex-direction:column;text-align:center}
}

/* управление справками — не создаёт новых колонок */
.donor-actions{
  display:flex;
  justify-content:flex-end;
  margin:0 0 8px;
}

#addCertificateBtn{
  border:1px solid #00dff5;
  background:#00313a;
  color:#00f5d4;
  border-radius:7px;
  padding:8px 16px;
  font-weight:700;
  cursor:pointer;
}

#addCertificateBtn:hover{
  background:#004651;
}

/* CRUD внутри последней колонки */
.note-cell{
  position:relative;
}

.row-actions{
  float:right;
  display:flex;
  gap:3px;
}

.row-actions button{
  width:22px;
  height:22px;
  padding:0;
  border:1px solid #08778a;
  border-radius:4px;
  background:#031b22;
  color:#bcefff;
  cursor:pointer;
  font-weight:900;
}

.row-actions button:last-child{
  color:#ff4757;
}

.cert-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.72);
}

.cert-modal.open{
  display:flex;
}

.cert-modal-box{
  width:min(620px,calc(100vw - 30px));
  background:#03141b;
  border:1px solid #00cbe6;
  border-radius:10px;
  box-shadow:0 0 35px rgba(0,210,240,.18);
  padding:18px;
}

.cert-modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
  font-size:20px;
}

#certModalClose{
  border:0;
  background:transparent;
  color:#ff4757;
  font-size:28px;
  cursor:pointer;
}

.cert-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.cert-form label{
  display:flex;
  flex-direction:column;
  gap:5px;
  color:#9dc2cf;
  font-size:13px;
}

.cert-form input,
.cert-form select{
  box-sizing:border-box;
  width:100%;
  border:1px solid #075e70;
  border-radius:5px;
  background:#061f27;
  color:#fff;
  padding:9px;
}

.cert-modal-buttons{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:18px;
}

.cert-modal-buttons button{
  border:1px solid #00cbe6;
  border-radius:5px;
  background:#052a34;
  color:#fff;
  padding:8px 18px;
  cursor:pointer;
}

#certSave{
  color:#00f5c8;
}

.red{color:#ff4052}