:root{
  --bg:#0e0f13;
  --panel:#161820;
  --panel-2:#131620;
  --border:#24283a;
  --text:#e8eef2;
  --muted:#9aa4ad;
  --accent:#5fd7ff;      /* neona zilais */
  --accent2:#8aff80;     /* neona zaļais */
  --warn:#ffd166;
  --danger:#ff6b6b;
  --shadow:0 8px 24px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans','Helvetica Neue',Arial,sans-serif}

.app{min-height:100svh;display:flex;flex-direction:column}

/* Top / Bottom bars */
.topbar,.bottombar{
  background:linear-gradient(180deg,#141721,#0f1118);
  border-bottom:1px solid #1f2330;
  padding:14px 18px;
  display:flex;align-items:center;justify-content:space-between;
}
.bottombar{border-top:1px solid #1f2330;border-bottom:none;margin-top:auto}
h1{margin:0;font-weight:800;letter-spacing:.3px;font-size:40px}
.status{display:flex;gap:12px;align-items:center;color:var(--muted)}

.view{padding:18px;max-width:1100px;width:100%;margin:0 auto}

/* Panels / Cards */
.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:20px;
  box-shadow:var(--shadow);
}
.grid{display:grid;gap:16px}
.grid.cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{
  background:var(--panel-2);
  border:1px solid #22283a;
  border-radius:16px;
  padding:16px;
  display:flex;flex-direction:column;gap:10px;
  transition:transform .12s ease,border-color .12s ease;
}
.card:hover{border-color:#2d3550;transform:translateY(-1px)}
.card h3{margin:4px 0 2px;font-size:22px}
.card .desc{color:var(--muted);font-size:14.5px;line-height:1.4}

/* Buttons */
.btnbar{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
button{
  border:1px solid #3a4260;background:#1a2040;color:var(--text);
  border-radius:12px;padding:12px 16px;cursor:pointer;font-size:16px;
  box-shadow:0 4px 12px rgba(0,0,0,.25);transition:transform .12s ease
}
button:hover{transform:translateY(-1px)}
button.primary{background:linear-gradient(180deg,#263169,#1b2146);border-color:#4a5aa0}
button.ghost{background:transparent}
button.small{padding:6px 10px;font-size:14px}
button.success{border-color:#355a3d;background:#142315}
button.warn{border-color:#6b5a2a;background:#231c14}
button.danger{border-color:#754040;background:#2b1313}

/* Badges, misc */
.badge{display:inline-flex;align-items:center;gap:6px;background:#111520;border:1px solid #27304a;
  padding:6px 8px;border-radius:999px;font-size:12px;color:var(--muted)}
.badge.ok{border-color:#345a3c;color:var(--accent2)}
.badge.warn{border-color:#6b5a2a;color:var(--warn)}
.muted{color:var(--muted)}
.center{text-align:center}
.big{font-size:20px}
.success-text{color:var(--accent2)}
.warn-text{color:var(--warn)}
.danger-text{color:var(--danger)}
.hidden{display:none!important}

/* Inputs */
.fake-input{
  background:#0b0e14;border:1px solid #2b344a;border-radius:10px;
  padding:10px;display:flex;gap:8px;align-items:center
}
.fake-input input,.fake-input textarea,input,textarea,select{
  width:100%;background:transparent;border:none;outline:none;color:var(--text);font-family:inherit;font-size:16px
}

/* Progress bar */
.progress{height:10px;background:#0b0e14;border:1px solid #2b344a;border-radius:999px;overflow:hidden}
.progress>span{display:block;height:100%;background:linear-gradient(90deg,#40c9ff,#e81cff);width:0%;transition:width .4s ease}

/* Code areas */
kbd{background:#0b0e14;border:1px solid #2b344a;border-radius:6px;padding:2px 6px;font-family:ui-monospace,Menlo,Consolas,monospace}
pre.code{background:#0b0e14;border:1px solid #2b344a;border-radius:10px;padding:12px;overflow:auto}

/* Dividers / notes */
hr.sep{border:none;border-top:1px dashed #2a2f43;margin:14px 0}
.note{font-size:14px;color:var(--muted)}
ul.checklist{list-style:none;padding-left:0}
ul.checklist li::before{content:"✔ ";color:var(--accent2)}

/* Toast */
.toast{
  position:fixed;bottom:18px;right:18px;background:#0b0e14;color:var(--text);
  border:1px solid #2b344a;padding:10px 14px;border-radius:10px;opacity:0;
  transform:translateY(8px);transition:200ms ease
}
.toast.show{opacity:1;transform:translateY(0)}

/* Table (Rekordu tabula) */
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid #23293b;text-align:left}
thead th{background:#10131c;color:#b8c2cc;font-weight:600}

/* PRINTABLE CERTIFICATE — styled like site */
@media print{
  body{background:#fff}
}
.certificate{
  max-width:900px;margin:0 auto;background:linear-gradient(180deg,#141721,#0f1118);
  color:var(--text);border:2px solid #293047;border-radius:24px;padding:40px;
  box-shadow:var(--shadow)
}
.certificate .brand{
  display:flex;align-items:center;gap:12px;margin-bottom:10px;color:#cfe8ff
}
.certificate h1{
  margin:0 0 6px 0;font-size:32px;letter-spacing:.3px
}
.certificate .line{height:2px;background:linear-gradient(90deg,var(--accent),#e81cff);border-radius:999px;margin:14px 0}
.certificate .holder{
  background:#0b0e14;border:1px solid #2b344a;border-radius:16px;padding:18px;margin:14px 0
}
.certificate .field{display:flex;gap:10px;margin:6px 0}
.certificate .label{width:130px;color:var(--muted)}
.certificate .value{font-weight:700}
.certificate .footer{
  display:flex;justify-content:space-between;align-items:center;margin-top:18px
}
.certificate .stamp{
  border:2px dashed #37415e;border-radius:12px;padding:10px 14px;color:#b9c6d3
}
.certificate .qr{width:128px;height:128px;background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center}