:root{
  --bg:#0f1226; --panel:#161a35; --muted:#8fa0ff; --accent:#7cf; --ok:#2dd4bf; --bad:#f87171; --text:#f5f7ff;
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#0e1024,#0b0e22);color:var(--text);font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
.site-header{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid #20254d;background:rgba(15,18,38,.8);backdrop-filter:saturate(140%) blur(4px);position:sticky;top:0}
.brand{display:flex;gap:14px;align-items:center}
.logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#6df,#79f);display:grid;place-items:center;font-size:20px;color:#05162e;box-shadow:0 4px 16px rgba(124,200,255,.4)}
.title h1{margin:0;font-size:20px;letter-spacing:.3px}
.title .dotcom{color:var(--muted)}
.tagline{margin:2px 0 0;color:#aab2ff;font-size:12px}
.top-links a{color:#cfe3ff;text-decoration:none;margin-left:14px;padding:8px 10px;border-radius:10px}
.top-links a.active, .top-links a:hover{background:#1a2042}
main{max-width:1000px;margin:28px auto;padding:0 18px}
.tab{display:none}
.tab.active{display:block}
h2{margin:8px 0 16px}
.field{display:block;margin:12px 0}
.field.inline{display:inline-block;margin-right:10px}
.field span{display:block;margin-bottom:6px;color:#b6c0ff}
input[type="file"],input[type="url"],input[type="text"],select,textarea{
  width:100%;padding:10px 12px;border-radius:10px;border:1px solid #283069;background:#0f1430;color:#e6ebff;outline:none
}
textarea{resize:vertical}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.btn{appearance:none;border:0;border-radius:12px;background:linear-gradient(135deg,#4dd,#69f);color:#061425;font-weight:700;padding:12px 16px;cursor:pointer;box-shadow:0 8px 20px rgba(120,180,255,.25)}
.btn:hover{transform:translateY(-1px)}
.panel{margin-top:16px;padding:16px;background:#0e1431;border:1px solid #232a55;border-radius:14px}
.kv{display:flex;gap:10px;flex-wrap:wrap}
.pill{padding:4px 8px;border-radius:999px;background:#121a3a;border:1px solid #24306b;color:#cfe3ff;font-size:12px}
.pill.ok{border-color:#2dd4bf;color:#cff}
.pill.bad{border-color:#f87171;color:#ffd1d1}
table{width:100%;border-collapse:collapse;margin-top:12px}
th,td{border-bottom:1px solid #232a55;padding:8px;text-align:left;vertical-align:top}
code{background:#0c1029;border:1px solid #1b2250;border-radius:8px;padding:2px 6px}
.small{color:#9fb1ff;font-size:12px}
.site-footer{padding:24px 22px;color:#8ea4ff;border-top:1px solid #20254d;margin-top:48px}
/* Loading overlay */
.loading-overlay{
  position: fixed; inset: 0; display: none; place-items: center;
  background: rgba(5, 10, 25, .55); backdrop-filter: blur(2px) saturate(120%);
  z-index: 9999;
}
.loading-overlay[aria-busy="true"]{ display: grid; }
.loading-box{
  display: flex; align-items: center; gap: 12px;
  background: #0f1430; border: 1px solid #283069; border-radius: 14px;
  padding: 12px 16px; color: #e6ebff; box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.spinner{
  width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.2); border-top-color: #79f;
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .spinner{ animation: none; border-top-color: #79f; }
}
.loading-text{ font-weight: 600; letter-spacing:.2px }
/* Loading overlay (visibility controlled by [hidden]) */
.loading-overlay{
  position: fixed; inset: 0; display: grid; place-items: center;
  background: rgba(5, 10, 25, .55); backdrop-filter: blur(2px) saturate(120%);
  z-index: 9999;
}
.loading-overlay[hidden]{ display: none !important; }

.loading-box{
  display: flex; align-items: center; gap: 12px;
  background: #0f1430; border: 1px solid #283069; border-radius: 14px;
  padding: 12px 16px; color: #e6ebff; box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.spinner{
  width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.2); border-top-color: #79f;
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text{ font-weight: 600; letter-spacing:.2px }