:root{
  --bg:#071319;
  --card:#0b1a1f;
  --card2:#0e222a;
  --text:#e9f3f5;
  --muted:#a9c2c7;
  --line:rgba(255,255,255,.10);
  --accent:#3ec7c2;
  --accent2:#7be2de;
  --danger:#ff6b6b;
  --ok:#44d17a;
  --warn:#ffcc66;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --r:16px;
  --r2:22px;
  --max:980px;
  --pad:16px;
  --pad2:22px;
  --font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background: radial-gradient(1200px 700px at 15% -10%, rgba(62,199,194,.20), transparent 60%),
              radial-gradient(900px 600px at 95% 0%, rgba(123,226,222,.12), transparent 55%),
              var(--bg);
}

a{color:inherit}
.hidden{display:none !important}
.container{max-width:var(--max); margin:0 auto; padding:0 var(--pad)}

.topbar{
  position:sticky; top:0; z-index:10;
  background: rgba(7,19,25,.72);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar__inner{
  max-width:var(--max);
  margin:0 auto;
  padding: 14px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.brand__mark{
  width:42px; height:42px; border-radius:14px;
  background:
    linear-gradient(135deg, rgba(62,199,194,.22), rgba(62,199,194,.04));
  border:1px solid rgba(62,199,194,.35);
  box-shadow: var(--shadow);
}
.brand__title{font-weight:800; letter-spacing:.4px}
.brand__subtitle{font-size:12px; color:var(--muted); margin-top:2px}
.muted{color:var(--muted)}
.topbar__actions{display:flex; align-items:center; gap:10px}

.badge{
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(62,199,194,.35);
  background: rgba(62,199,194,.08);
}

.card{
  margin: 18px auto 30px;
  border-radius: var(--r2);
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(14,34,42,.72), rgba(11,26,31,.85));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card__header{
  padding: var(--pad2);
  border-bottom:1px solid var(--line);
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
}
.card__title{font-size:18px; font-weight:800; margin:0}
.card__meta{margin-top:6px; font-size:12px; color:var(--muted)}
.card__body{padding: var(--pad2)}
.card__footer{
  padding: var(--pad2);
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  background: rgba(0,0,0,.08);
}

.grid{display:grid; gap:14px}
.grid--2{grid-template-columns: repeat(2, minmax(0, 1fr))}
@media (max-width:760px){ .grid--2{grid-template-columns:1fr} }

.field{display:flex; flex-direction:column; gap:7px}
.label{font-size:12px; color:var(--muted)}
.input, select, textarea{
  width:100%;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: var(--text);
  padding: 12px 12px;
  outline:none;
}
textarea{min-height:90px; resize:vertical}
.input:focus, select:focus, textarea:focus{border-color: rgba(62,199,194,.6); box-shadow: 0 0 0 4px rgba(62,199,194,.12)}
.hint{font-size:12px; color:var(--muted); line-height:1.35}

.btn{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  color: var(--text);
  padding: 11px 14px;
  border-radius: 14px;
  cursor:pointer;
  font-weight:700;
  transition: transform .06s ease, background .15s ease, border-color .15s ease;
  user-select:none;
}
.btn:hover{background: rgba(255,255,255,.10)}
.btn:active{transform: translateY(1px)}
.btn--primary{
  border-color: rgba(62,199,194,.5);
  background: rgba(62,199,194,.14);
}
.btn--primary:hover{background: rgba(62,199,194,.20)}
.btn--ghost{
  background: transparent;
  border-color: rgba(255,255,255,.14);
}
.btn--danger{
  border-color: rgba(255,107,107,.45);
  background: rgba(255,107,107,.12);
}
.btnrow{display:flex; gap:10px; flex-wrap:wrap}
.right{margin-left:auto}

.kbd{
  font-size:12px; padding:2px 6px; border-radius:8px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.25);
  color: var(--muted);
}

.table{
  width:100%;
  border-collapse: collapse;
  overflow:hidden;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
}
.table th,.table td{
  text-align:left;
  padding: 10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  vertical-align:top;
  font-size:13px;
}
.table th{color:var(--muted); font-weight:700; font-size:12px; letter-spacing:.2px}
.table tr:last-child td{border-bottom:0}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  font-size:12px; border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
}
.pill--ok{border-color: rgba(68,209,122,.45); background: rgba(68,209,122,.12)}
.pill--warn{border-color: rgba(255,204,102,.45); background: rgba(255,204,102,.10)}
.pill--muted{color:var(--muted)}

.stepper{
  display:flex; gap:8px; flex-wrap:wrap;
}
.step{
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.14);
}
.step--active{border-color: rgba(62,199,194,.55); background: rgba(62,199,194,.10)}
.step--done{border-color: rgba(68,209,122,.45); background: rgba(68,209,122,.10)}

.hr{height:1px; background: var(--line); margin: 18px 0}
.notice{
  border-radius: 16px;
  border:1px solid rgba(62,199,194,.30);
  background: rgba(62,199,194,.08);
  padding: 12px 14px;
  color: var(--text);
}
.disclaimer{
  font-size: 13px;
  color: rgba(255,255,255,.92);
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  background: rgba(255,255,255,.04);
}
.notice--danger{border-color: rgba(255,107,107,.35); background: rgba(255,107,107,.10)}
.footer{
  border-top:1px solid var(--line);
  background: rgba(7,19,25,.55);
}
.footer__inner{
  padding: 14px var(--pad);
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
  font-size:12px; color: var(--muted);
}

.skeleton__line{
  height:12px; border-radius: 10px;
  background: rgba(255,255,255,.08);
  margin: 10px 0;
  overflow:hidden;
  position:relative;
}
.skeleton__line:after{
  content:"";
  position:absolute; top:0; left:-40%;
  width:40%; height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  animation: shimmer 1.1s infinite;
}
@keyframes shimmer{
  0%{left:-40%}
  100%{left:100%}
}

/* printable */
@media print{
  body{background:#fff; color:#111}
  .topbar,.footer,.btnrow{display:none !important}
  .notice{display:none !important}
  .disclaimer{
    display:block !important;
    color:#111 !important;
    background: transparent !important;
    border: 1px solid #bbb !important;
  }
  .card{box-shadow:none; border:0; background:#fff}
  .table{border-color:#ddd}
  .table th,.table td{border-color:#eee; color:#111}

  a[href]:after{ content:"" !important; }

  .pdf-header{
    background: transparent !important;
    border: 1px solid #bbb !important;
  }
  .pdf-subtitle, .pdf-meta .k{
    color:#444 !important;
  }
}

.pdf-header{
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 14px 16px;
  background: rgba(255,255,255,.03);
}
.pdf-header__top{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
}
.pdf-title{ font-size: 18px; font-weight: 800; letter-spacing: .3px; }
.pdf-subtitle{ margin-top: 4px; font-size: 12px; color: rgba(255,255,255,.75); }
.pdf-id{ font-size: 13px; color: rgba(255,255,255,.9); }
.pdf-meta{
  margin-top: 10px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
  font-size: 12px;
}
.pdf-meta .k{ color: rgba(255,255,255,.7); }