*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,'Noto Sans','Apple Color Emoji','Segoe UI Emoji';background:#0b0f14;color:#e9f1f7}
a{color:inherit;text-decoration:none}
.container{max-width:560px;margin:0 auto;padding:24px;text-align:center;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center}
.header-img{width:100%;border-radius:18px;display:block;box-shadow:0 10px 30px rgba(0,0,0,.4);margin-bottom:16px}
.title{font-size:20px;font-weight:600;margin:8px 0 18px;color:#b9c7d5}
.cta{display:inline-block;padding:14px 22px;border-radius:999px;background:#1fa855;font-weight:700;box-shadow:0 6px 16px rgba(31,168,85,.35)}
.cta:active{transform:translateY(1px)}

/* Nicer speech-bubble */
.bubble{display:none;position:relative;margin:18px auto 0;padding:10px 14px;width:max-content;max-width:90%;background:#101823;color:#c7d6e6;border:1px solid #1e2a39;border-radius:14px;font-size:14px;line-height:1.2;box-shadow:0 10px 24px rgba(0,0,0,.35);text-decoration:none;transform:translateY(6px);animation:bubbleIn .32s ease-out forwards}
.bubble::after{content:"";position:absolute;right:-8px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:10px solid #101823;filter:drop-shadow(-1px 0 0 #1e2a39)}
@keyframes bubbleIn{from{transform:translateY(6px);opacity:0}to{transform:translateY(0);opacity:1}}
.bubble .fa{margin-left:6px}

/* Admin */
.admin .card{max-width:980px;margin:36px auto;background:#0f1620;border:1px solid #1e2a39;padding:20px;border-radius:14px}
.admin h1{margin-top:0}
label{display:block;margin:14px 0 6px;color:#c7d6e6}
input[type=text],input[type=password],input[type=url],textarea{width:100%;background:#0b121b;border:1px solid #1e2a39;border-radius:8px;padding:12px;color:#e9f1f7}
textarea{resize:vertical;min-height:90px}
button,.btn{cursor:pointer;border:none;border-radius:10px;padding:12px 16px;background:#1fa855;color:#fff;font-weight:700;display:inline-block}
.btn.secondary{background:#1e2a39}
.btn.danger{background:#c0392b}
.preview{max-width:260px;max-height:260px;border-radius:10px;display:block;margin:8px 0 16px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.error{color:#ff6b6b}.success{color:#1dd1a1}.note{color:#adb9c7;font-size:13px}
table th,table td{font-size:14px}
/* make summary a positioning context */
summary{ position: relative; }

/* centered faded hint */
.summary-hint{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%, -50%);
  font-size:12px; color:#9fb0c3; opacity:.45;
  pointer-events:none; user-select:none; letter-spacing:.2px;
}
@media (max-width:640px){ .summary-hint{ display:none; } }

/* Toggle slider */
.switch {
  position: relative; display: inline-block; width: 52px; height: 28px;
  vertical-align: middle;
}
.switch input { display:none; }
.slider {
  position:absolute; cursor:pointer; inset:0; background:#1e2a39; border-radius:999px;
  transition: background .2s;
  box-shadow: inset 0 0 0 1px #2a3a55;
}
.slider:before {
  content:""; position:absolute; height:22px; width:22px; left:3px; top:3px;
  background:#e9f1f7; border-radius:50%; transition: transform .2s;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.switch input:checked + .slider { background:#1fa855; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.switch input:checked + .slider:before { transform: translateX(24px); }
/* Optional text label next to switch */
.switch-label { margin-left:10px; color:#cfe0f4; font-size:14px; font-weight:600; }