* { margin: 0; padding: 0; box-sizing: border-box; }

body, html { font-family: Verdana, Arial, sans-serif; font-size: 22px; }

body.dark  { background: #111; color: #ccc; }
body.light { background: #f5f5f5; color: #222; }

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 60px;
}

/* TOP */
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-bottom: 3px solid;
}
body.dark  .top { border-color: #58a6ff; }
body.light .top { border-color: #133c8a; }

.logo { font-size: 24px; font-weight: bold; }
body.dark  .logo { color: #58a6ff; }
body.light .logo { color: #133c8a; }

.top-right { display: flex; align-items: center; gap: 20px; }

.nav-link { font-size: 13px; text-decoration: none; }
body.dark  .nav-link { color: #8b949e; }
body.light .nav-link { color: #555; }
.nav-link:hover { opacity: 0.75; }

#theme-toggle {
  background: none;
  border: 1px solid;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
body.dark  #theme-toggle { border-color: #333; color: #aaa; }
body.light #theme-toggle { border-color: #ccc; color: #555; }

/* HERO CONTENT */
.content {
  display: flex;
  gap: 60px;
  align-items: center;
  padding: 40px 0;
}

/* LEFT */
.left {
  flex: 0 0 680px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.version { font-size: 11px; }
body.dark  .version { color: #555; }
body.light .version { color: #999; }

h1 { font-size: 68px; font-weight: bold; line-height: 1; }

p { font-size: 17px; line-height: 1.6; }
body.dark  p { color: #aaa; }
body.light p { color: #555; }

.btn {
  display: inline-block;
  padding: 14px 30px;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 4px;
  width: fit-content;
  cursor: pointer;
  border: none;
}
body.dark  .btn { background: #1f6feb; color: #fff; }
body.light .btn { background: #133c8a; color: #fff; }
.btn:hover:not(:disabled) { opacity: 0.85; }
.btn:disabled { opacity: 0.4; cursor: default; }

.small { font-size: 11px; }
body.dark  .small { color: #444; }
body.light .small { color: #aaa; }

.divider { border-top: 1px solid; margin: 4px 0; }
body.dark  .divider { border-color: #222; }
body.light .divider { border-color: #ddd; }

.tip { font-size: 11px; margin-top: 6px; padding: 6px 10px; border-left: 3px solid; border-radius: 3px; }
body.dark  .tip { color: #aaa; background: #1a1a1a; border-color: #58a6ff; }
body.light .tip { color: #444; background: #eef4ff; border-color: #133c8a; }

.install-title { font-weight: bold; font-size: 13px; }

ol { padding-left: 28px; }
ol li { margin-bottom: 8px; line-height: 1.6; font-size: 13px; }

code {
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
  font-family: monospace;
}
body.dark  code { background: #1e1e1e; color: #79c0ff; }
body.light code { background: #eee;    color: #c7254e; }

.contact { font-size: 12px; }
body.dark  .contact { color: #555; }
body.light .contact { color: #999; }
body.dark  .contact a { color: #58a6ff; }
body.light .contact a { color: #133c8a; }
.contact a { text-decoration: none; }

/* RIGHT */
.right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

#main-screen {
  width: 100%;
  border-radius: 6px;
  border: 1px solid;
  object-fit: contain;
}
body.dark  #main-screen { border-color: #2a2a2a; }
body.light #main-screen { border-color: #ddd; }

.thumbs { display: flex; gap: 6px; }
.thumb {
  width: 32%;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.2s;
}
.thumb:hover  { opacity: 0.75; }
.thumb.active { opacity: 1; border-color: #58a6ff; }
body.light .thumb.active { border-color: #133c8a; }

/* SECTIONS */
.section {
  padding: 60px 0;
  border-top: 1px solid;
}
body.dark  .section { border-color: #222; }
body.light .section { border-color: #ddd; }

.section-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 36px;
}
body.dark  .section-title { color: #e6edf3; }
body.light .section-title { color: #111; }

/* PRICING */
.plans {
  display: flex;
  gap: 24px;
}

.plan {
  flex: 1;
  max-width: 340px;
  border-radius: 8px;
  padding: 32px;
  position: relative;
  border: 1px solid;
}
body.dark  .plan { background: #161b22; border-color: #30363d; }
body.light .plan { background: #fff;    border-color: #ddd; }

.plan-premium {
  border-color: #1f6feb !important;
}

.plan-lifetime {
  border-color: #f0b429 !important;
}

.plan-badge-gold {
  background: #f0b429 !important;
  color: #111 !important;
}

.plan-lifetime .plan-price { color: #f0b429 !important; }

.plan-btn-gold {
  background: #f0b429 !important;
  color: #111 !important;
}

.plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: bold;
  padding: 3px 12px;
  border-radius: 20px;
  background: #1f6feb;
  color: #fff;
  white-space: nowrap;
}

.plan-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}

.plan-price {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 24px;
}
.plan-price span { font-size: 14px; font-weight: normal; opacity: 0.6; }
body.dark  .plan-price { color: #58a6ff; }
body.light .plan-price { color: #133c8a; }

.plan-features {
  list-style: none;
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plan-features li { font-size: 13px; }
body.dark  .plan-features li { color: #aaa; }
body.light .plan-features li { color: #555; }

.plan-btn { width: 100%; text-align: center; }

/* REGISTER */
.register-wrap {
  max-width: 460px;
}

form { display: flex; flex-direction: column; gap: 16px; }

.field { display: flex; flex-direction: column; gap: 6px; }

.field label { font-size: 12px; font-weight: bold; }
body.dark  .field label { color: #8b949e; }
body.light .field label { color: #555; }

.field-hint { font-weight: normal; opacity: 0.6; }

.field input,
.field select {
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid;
  font-size: 14px;
  outline: none;
}
body.dark  .field input,
body.dark  .field select {
  background: #21262d;
  border-color: #30363d;
  color: #e6edf3;
}
body.light .field input,
body.light .field select {
  background: #fff;
  border-color: #ccc;
  color: #222;
}
.field input:focus,
.field select:focus {
  border-color: #58a6ff;
}

.reg-msg { font-size: 13px; min-height: 20px; }
.reg-success { color: #3fb950; }
.reg-error   { color: #f85149; }

.register-note { font-size: 12px; margin-top: 14px; }
body.dark  .register-note { color: #555; }
body.light .register-note { color: #aaa; }

/* FOOTER */
.footer {
  font-size: 11px;
  padding: 20px 0;
  border-top: 1px solid;
  text-align: center;
  margin-top: auto;
}
body.dark  .footer { border-color: #1e1e1e; color: #333; }
body.light .footer { border-color: #ddd;    color: #aaa; }