* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: #081529;
  color: #eef2ff;
}
.wrap { max-width: 1180px; margin: 0 auto; padding: 40px 18px; }
.wrap.small { max-width: 840px; }
.wrap.wide { max-width: 1240px; }
.card {
  background: #0c1a33;
  border: 1px solid #1b3159;
  border-radius: 22px;
  padding: 28px;
  box-shadow: 0 20px 45px rgba(0,0,0,.28);
}
h1 { margin: 0 0 8px; font-size: 30px; line-height: 1.15; }
h2 { margin: 0 0 8px; font-size: 24px; line-height: 1.2; }
.sub { margin: 0; color: #b9c7e7; font-size: 16px; line-height: 1.45; }
.head-row { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.badge { display: inline-flex; align-items: center; padding: 10px 14px; border-radius: 999px; background: #11264b; border: 1px solid #29477d; color: #beddff; font-weight: 700; max-width: 100%; word-break: break-word; }
.badge.success { color: #b8f5c4; }
.status-box { margin-top: 22px; display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; border: 1px solid #28405f; max-width: 100%; }
.status-box .dot { width: 14px; height: 14px; min-width: 14px; border-radius: 999px; display: inline-block; }
.status-box.online .dot { background: #22c55e; box-shadow: 0 0 12px rgba(34,197,94,.8); }
.status-box.offline .dot { background: #ef4444; box-shadow: 0 0 12px rgba(239,68,68,.8); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.field.full, .actions.full { grid-column: 1 / -1; }
label { display: block; font-size: 14px; margin-bottom: 8px; color: #d5def5; font-weight: 700; }
input, select {
  width: 100%;
  height: 56px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid #2b4675;
  background: #07101f;
  color: #fff;
  font-size: 16px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
select {
  background-image: linear-gradient(45deg, transparent 50%, #b9c7e7 50%), linear-gradient(135deg, #b9c7e7 50%, transparent 50%);
  background-position: calc(100% - 20px) 23px, calc(100% - 14px) 23px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}
input:focus, select:focus { border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(37,99,235,.24); }
small { display: block; margin-top: 7px; color: #8fa9d8; line-height: 1.35; min-height: 18px; }
.actions, .right-links { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-width: 150px; min-height: 48px; border: 0; border-radius: 14px; padding: 13px 18px; font-weight: 700; color: #fff; text-decoration: none; cursor: pointer; text-align: center; font-size: 15px; }
.small-btn { min-width: 110px; min-height: 44px; padding: 10px 14px; }
.primary { background: #2563eb; }
.secondary { background: #475569; }
.danger { background: #dc2626; }
.btn:hover { filter: brightness(1.08); }
.msg { display: none; margin-top: 18px; padding: 14px 16px; border-radius: 14px; word-break: break-word; }
.msg.show { display: block; }
.msg.ok { background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.3); color: #a7f3d0; }
.msg.err { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3); color: #fecaca; }
.search-row { margin-top: 24px; display: grid; grid-template-columns: 1fr 210px; gap: 18px; align-items: start; }
table { width: 100%; border-collapse: collapse; margin-top: 22px; }
.desktop-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
th, td { padding: 14px 12px; border-bottom: 1px solid #1b3159; text-align: left; vertical-align: top; white-space: nowrap; }
th { color: #9dc1ff; }
.pill { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #11264b; color: #cfe0ff; font-size: 12px; }
.mobile-results { display: none; margin-top: 18px; }
.result-card { background: #091427; border: 1px solid #1b3159; border-radius: 16px; padding: 14px; margin-top: 14px; }
.result-title { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.result-item { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #173055; }
.result-item:last-of-type { border-bottom: 0; }
.result-item span { color: #9dc1ff; min-width: 72px; }
.result-item strong { text-align: right; word-break: break-word; }
.mobile-action, .mobile-full { width: 100%; }
.tool-tabs { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.panel-box { margin-top: 24px; padding-top: 24px; border-top: 1px solid #1b3159; }
.voucher-form {
  margin-top: 22px;
  display: grid;
  grid-template-columns: minmax(260px, 2fr) minmax(190px, 1fr) minmax(170px, 1fr);
  gap: 18px;
  align-items: start;
}
.form-field { min-width: 0; }
.profile-field { min-width: 260px; }
.voucher-actions { grid-column: 1 / -1; margin-top: 2px; }
.mt-title { margin-top: 30px; }
.voucher-result-head { margin-top: 20px; display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; padding: 16px; background: #091427; border: 1px solid #1b3159; border-radius: 14px; }
.section-head { margin-top: 10px; display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.empty-box, .loading-line { margin-top: 16px; padding: 16px; border: 1px dashed #29477d; border-radius: 14px; background: #091427; }
@media (max-width: 900px) {
  .voucher-form { grid-template-columns: 1fr; }
  .profile-field { min-width: 0; }
}
@media (max-width: 768px) {
  .wrap { padding: 18px 12px; }
  .card { padding: 18px; border-radius: 18px; }
  h1 { font-size: 24px; }
  h2 { font-size: 22px; }
  .form-grid, .search-row { grid-template-columns: 1fr; }
  .btn, .right-links .btn, .actions .btn { width: 100%; min-width: 0; }
  .right-links { width: 100%; }
  .right-links .badge { width: 100%; justify-content: center; }
  .tool-tabs .btn, .voucher-result-head .btn, .section-head .btn { width: 100%; }
  .desktop-table-wrap { display: none; }
  .mobile-results { display: block; }
}

.success { background: #16a34a; }
.saved-top-row { display: flex; justify-content: flex-start; }
.login-actions-row { justify-content: space-between; align-items: center; }
.left-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.saved-servers-panel { margin-top: 28px; padding-top: 24px; border-top: 1px solid #1b3159; }
.compact-head { margin-top: 0; }
.saved-server-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 16px; }
.saved-server-card { background: #091427; border: 1px solid #1b3159; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.saved-server-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.saved-server-actions .btn { flex: 1; min-width: 85px; }
@media (max-width: 768px) {
  .login-actions-row, .left-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .saved-top-row .btn { width: 100%; }
  .saved-server-actions { display: grid; grid-template-columns: 1fr; }
}


.saved-servers-page-list { margin-top: 22px; }
.saved-server-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 18px; }
.saved-server-card { background: #091427; border: 1px solid #1b3159; border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.saved-server-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.success { background: #16a34a; }
.left-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.login-actions-row { justify-content: space-between; }
@media (max-width: 768px) {
  .saved-server-actions .btn { width: 100%; }
  .left-actions { width: 100%; }
  .left-actions .btn { width: 100%; }
}


/* v5: index page saved/save button alignment */
.saved-right { display: flex; justify-content: flex-end; }
.login-actions-row.save-only-row { display: flex; justify-content: flex-end; align-items: center; }
.login-actions-row.save-only-row .btn { min-width: 130px; }


/* v6: force index Saved Servers and Save buttons to the right side */
.index-right-row { display: flex !important; justify-content: flex-end !important; text-align: right !important; width: 100%; }
.index-right-row .btn { margin-left: auto; }
@media (max-width: 768px) {
  .index-right-row .btn { width: auto; min-width: 130px; }
}


/* v7: final index alignment */
.saved-left, .index-left-row { display: flex !important; justify-content: flex-start !important; text-align: left !important; width: 100%; }
.saved-left .btn, .index-left-row .btn { margin-left: 0 !important; margin-right: auto !important; }
.index-actions-row { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 12px; width: 100%; }
.index-actions-row #loginBtn { margin-right: auto; }
.index-actions-row #saveServerBtn { margin-left: auto; }
@media (max-width: 768px) {
  .index-actions-row { display: flex !important; flex-direction: row !important; justify-content: space-between !important; }
  .index-actions-row .btn { width: auto !important; min-width: 130px; }
  .saved-left .btn, .index-left-row .btn { width: auto !important; min-width: 150px; }
}

/* Theme switcher v8: default is night mode; user can switch to day mode */
.top-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.theme-toggle {
  width: 66px;
  height: 48px;
  border: 0;
  border-radius: 10px;
  background: #211b55;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
}
.theme-toggle:hover { filter: brightness(1.08); transform: translateY(-1px); }

html.day-theme body {
  background: #f3f6fb;
  color: #0f172a;
}
html.day-theme .card {
  background: #ffffff;
  border-color: #dbeafe;
  box-shadow: 0 20px 45px rgba(15, 23, 42, .10);
}
html.day-theme h1,
html.day-theme h2,
html.day-theme label,
html.day-theme .result-title {
  color: #0f172a;
}
html.day-theme .sub,
html.day-theme small {
  color: #475569;
}
html.day-theme input,
html.day-theme select {
  background: #f8fafc;
  color: #0f172a;
  border-color: #bfdbfe;
}
html.day-theme input::placeholder {
  color: #64748b;
}
html.day-theme .badge,
html.day-theme .pill {
  background: #e0f2fe;
  border-color: #bae6fd;
  color: #075985;
}
html.day-theme .badge.success {
  background: #dcfce7;
  border-color: #bbf7d0;
  color: #166534;
}
html.day-theme .status-box {
  background: #ffffff;
  border-color: #cbd5e1;
}
html.day-theme .msg.ok {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}
html.day-theme .msg.err {
  background: #fee2e2;
  border-color: #fecaca;
  color: #991b1b;
}
html.day-theme table th,
html.day-theme th {
  color: #2563eb;
}
html.day-theme th,
html.day-theme td {
  border-bottom-color: #e2e8f0;
}
html.day-theme .result-card,
html.day-theme .saved-server-card,
html.day-theme .empty-box,
html.day-theme .loading-line,
html.day-theme .voucher-result-head {
  background: #f8fafc;
  border-color: #dbeafe;
}
html.day-theme .result-item {
  border-bottom-color: #e2e8f0;
}
html.day-theme .result-item span {
  color: #2563eb;
}
html.day-theme .panel-box,
html.day-theme .saved-servers-panel {
  border-top-color: #e2e8f0;
}
html.day-theme .theme-toggle {
  background: #f1f5f9;
  color: #0f172a;
  border: 1px solid #e2e8f0;
}
@media (max-width: 768px) {
  .top-actions { width: 100%; justify-content: flex-start; }
  .top-actions .theme-toggle { width: 66px; }
}