:root{
  --bg:#0b1220;
  --card:#0f1a2c;
  --muted:#9fb0c6;
  --text:#e7eef9;
  --line:rgba(255,255,255,.08);
  --primary:#2f81f7;
  --danger:#ef4444;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1000px 600px at 10% -10%, rgba(47,129,247,.18), transparent 55%),
              radial-gradient(900px 500px at 90% 0%, rgba(34,197,94,.10), transparent 55%),
              var(--bg);
  color:var(--text);
}

.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  background: rgba(11,18,32,.7);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand{display:flex; gap:12px; align-items:center}
.brand__mark{width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background: linear-gradient(180deg, rgba(47,129,247,.35), rgba(47,129,247,.12));
  border: 1px solid rgba(47,129,247,.35);
  font-weight:700;
}
.brand__name{font-weight:800; letter-spacing:.2px}
.brand__meta{font-size:12px; color:var(--muted)}

.shell{max-width:1100px; margin:24px auto; padding:0 16px;}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card__header{display:flex; justify-content:space-between; gap:12px; padding:18px 18px 10px; flex-wrap:wrap}
.card__title{margin:0; font-size:22px}
.card__meta{color:var(--muted); font-size:13px; margin-top:6px}
.card__body{padding:14px 18px 18px}
.card__footer{padding:12px 18px 18px; border-top:1px solid var(--line)}

.footer{max-width:1100px; margin:0 auto; padding:10px 16px 30px}

.muted{color:var(--muted)}
.small{font-size:12px}
.hidden{display:none !important}
.w-100{width:100%}
.kbd{display:inline-block; padding:2px 7px; border-radius:8px; border:1px solid var(--line); background:rgba(255,255,255,.05); font-size:12px}

.mt-0{margin-top:0}
.mt-1{margin-top:6px}
.mt-2{margin-top:12px}
.hr{height:1px; background:var(--line); margin:14px 0}

.grid{display:grid; gap:12px}
.grid--2{grid-template-columns:1fr 1fr}
@media (max-width:820px){.grid--2{grid-template-columns:1fr}}
@media (max-width:520px){
  .btnrow .right{margin-left:0}
  .btnrow{gap:8px}
  .card__title{font-size:20px}
  .shell{margin:16px auto}
}

.field .label{font-weight:700; font-size:13px; margin-bottom:6px}
.hint{color:var(--muted); font-size:12px}

.input{
  width:100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  color: var(--text);
  padding: 10px 12px;
  outline:none;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.input:focus{border-color: rgba(47,129,247,.55); box-shadow: 0 0 0 3px rgba(47,129,247,.18)}
.input::placeholder{color: rgba(159,176,198,.75)}
.input:disabled{opacity:.65; cursor:not-allowed}
.input--sm{padding:8px 10px; border-radius:10px}

.btnrow{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.btnrow .right{margin-left:auto}

.btn{
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding: 9px 12px;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.btn:focus-visible{outline:none; box-shadow: 0 0 0 3px rgba(47,129,247,.20)}
.btn:disabled{opacity:.55; cursor:not-allowed; transform:none !important}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22)}
.btn:active{transform: translateY(0px)}
.btn--primary{background: rgba(47,129,247,.20); border-color: rgba(47,129,247,.45)}
.btn--primary:hover{background: rgba(47,129,247,.26)}
.btn--ghost{background: transparent}
.btn--danger{background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.35)}

.badge{padding:6px 10px; border-radius: 999px; border:1px solid var(--line); background: rgba(255,255,255,.04); font-size:12px}

.notice{border:1px solid var(--line); background: rgba(255,255,255,.04); border-radius: 14px; padding:12px 12px}
.notice--danger{border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.10)}
.toast{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:50;
  box-shadow: var(--shadow);
  max-width:min(420px, calc(100vw - 32px));
}
.toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px}
.toolbar__right{display:flex; gap:10px; align-items:center}

.table{width:100%; border-collapse:collapse}
.table th,.table td{padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:top; text-align:left}
.table tr:hover td{background: rgba(255,255,255,.03)}
.table tr:nth-child(even) td{background: rgba(255,255,255,.015)}

.pill{display:inline-block; padding:4px 10px; border-radius: 999px; font-size:12px; border:1px solid var(--line)}
.pill--ok{border-color: rgba(34,197,94,.45); background: rgba(34,197,94,.12)}
.pill--warn{border-color: rgba(234,179,8,.45); background: rgba(234,179,8,.12)}
.pill--muted{opacity:.8}

.img-preview{width:100%; max-height:280px; object-fit:cover; border-radius:12px; border:1px solid var(--line)}

/* Loading overlay (app-level busy state) */
.loading{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(3px);
  z-index: 9999;
}
.loading.hidden{display:none !important}

.loading__inner{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid var(--line);
  color: var(--text);
  padding: 14px 16px;
  border-radius: 14px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
}

.spinner{
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,.18);
  border-top-color: rgba(47,129,247,.85);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  flex: 0 0 auto;
}

.loading__text{
  font-size: 13px;
  color: var(--text);
}

@keyframes spin{ to { transform: rotate(360deg); } }

/* Print: remove hover/transition and hide chrome */
@media print{
  *{transition:none !important; animation:none !important}
  body{background:#fff !important; color:#000 !important}
  .topbar,.footer,.btnrow,.toolbar,.loading{display:none !important}
  .card{box-shadow:none !important; border:0 !important}
  .card__body{padding:0 !important}
  .muted{color:#333 !important}
  .notice{border:1px solid #ddd !important; background:#f7f7f7 !important}
  .input{border:1px solid #ddd !important; background:#fff !important; color:#000 !important}

  /* Print-friendly images and tables */
  .img-preview{
    max-height: none !important;
    object-fit: contain !important;
    page-break-inside: avoid;
  }
  .table th, .table td{
    padding: 8px 6px !important;
  }
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}

/* Optional: subtle scrollbar to match dark UI */
*{scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent}
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-thumb{background: rgba(255,255,255,.18); border-radius: 999px; border:2px solid transparent; background-clip: padding-box}
::-webkit-scrollbar-thumb:hover{background: rgba(255,255,255,.24)}
::-webkit-scrollbar-track{background: transparent}