/*
 * ClickTech Account — Owner Preview brand theme.
 * Source of truth: live clicktech.cc CSS on 2026-10-30:
 * #070c14 background, #101827 surface, #397bf7 accent, #eff4ff text.
 * CSS only. No real account backend is enabled by this preview.
 */
:root {
  --green: #397bf7;
  --line: rgba(144,176,232,.18);
  --muted: #a3b2cc;
  --amber: #e6b777;
  color: #eff4ff;
  color-scheme: dark;
  background: #070c14;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
html { -webkit-text-size-adjust: 100%; }
body {
  min-width: 320px;
  color: #eff4ff;
  background: radial-gradient(ellipse 58% 45% at 50% -13%, #205fd62c 0%, transparent 85%), #070c14;
}
.top {
  height: 73px;
  padding: 0 clamp(19px, 4.7vw, 66px);
  background: #080e19;
  border-bottom: 1px solid rgba(144,176,232,.16);
  gap: 12px;
}
.brand {
  font-size: 1.43rem;
  color: #f0f5ff;
  letter-spacing: -.049em;
  gap: 12px;
}
.logo {
  height: 42px;
  width: 42px;
  border-radius: 12px;
  background: linear-gradient(143deg,#357cf5 0%,#1753c4 84%);
  color: #fff;
  box-shadow: 0 6px 16px #113d913d, inset 0 1px #ffffff4a;
  border: 1px solid #638ffa55;
  font-size: .94rem;
  letter-spacing: -.04em;
}
.brand-sub {
  color: #91a7c8;
  border-left-color: #25334a;
}
.top-product-label {
  color: #a3b2cc;
  font-size: .70rem;
  font-weight: 550;
  border: 1px solid #2c3c58;
  border-radius: 100px;
  padding: 5px 10px;
  letter-spacing: .02em;
  background: #141f32;
}
.language-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px clamp(19px, 4.7vw, 66px);
  background: #0b1321;
  border-bottom: 1px solid #22334c;
}
.language-label {
  color: #a8bddc;
  font-size: .77rem;
  font-weight: 640;
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}
.language-label .globe { color: #8db6fa; display: flex; align-items: center; justify-content: center; }
.language-label .language-short { display: none; }
.language-choices {
  display: flex;
  align-items: center;
  background: #101b2d;
  border: 1px solid #2a3e5a;
  border-radius: 11px;
  padding: 4px;
  gap: 3px;
}
.language-choice {
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #b5c5dd;
  font-size: .79rem;
  font-weight: 640;
  padding: 8px 12px;
  min-height: 37px;
  white-space: nowrap;
}
.language-choice:hover { background: #1a2a43; color: #f4f8ff; }
.language-choice[aria-pressed="true"] {
  color: #fff;
  background: linear-gradient(145deg, #3d82f8, #1f5fdf);
  border-color: #68a0ff60;
  box-shadow: 0 3px 10px #1b5cdb45;
}
.language-choice:focus-visible { outline: 2px solid #b7d3ff; outline-offset: 3px; }
.language-original-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  clip-path: inset(50%);
  white-space: nowrap;
}
.status-banner {
  padding: 10px clamp(19px, 4.7vw, 66px);
  background: #131925;
  color: #e2cfae;
  border-bottom: 1px solid #394054;
  font-size: .76rem;
  line-height: 1.45;
  align-items: center;
}
.status-banner > span { flex: 1; }
.status-banner strong {
  display: inline-flex;
  font-size: .70rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #efc784;
  margin-right: 7px;
}
.status-banner strong::before {
  content: "";
  height: 6px;
  width: 6px;
  margin: auto 7px auto 0;
  border-radius: 50%;
  background: #efc784;
  box-shadow: 0 0 10px #e4b86970;
}
.status-banner button { color: #a8c6f9; font-weight: 640; white-space: nowrap; }
.status-banner button:hover { color: #fff; }
.layout {
  max-width: 1400px;
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0,.92fr) minmax(0,1fr);
  min-height: calc(100vh - 187px);
  gap: 22px;
  padding: 25px;
}
.hero {
  margin: 0;
  padding: 55px 10% 34px;
  min-height: 670px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 68% 58%, #2356b048 0%, transparent 42%),
    radial-gradient(circle at 0% 10%, #17377588 0%, transparent 48%),
    linear-gradient(145deg, #101c35 0%, #0b1425 64%, #091321 100%);
  border: 1px solid #29406691;
  box-shadow: 0 25px 54px #00000051;
}
.hero::before {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  border: 1px solid #6b9ff543;
}
.hero .eyebrow { color: #8fbaff; font-size: .66rem; letter-spacing: .18em; }
.hero h1 {
  color: #f1f6ff;
  font-weight: 630;
  font-size: clamp(2.85rem,4.5vw,5rem);
  line-height: 1.12;
  letter-spacing: -.057em;
  margin: 24px 0 23px;
}
.hero p { color: #b5c5df; font-size: .96rem; line-height: 1.85; }
.orbit { opacity: .9; transform: scale(.92); }
.orbit::before, .orbit::after { border-color: #5d92e65c; }
.orbit-core {
  background: linear-gradient(135deg,#dce9ff,#a7caff);
  color: #0c2963;
  box-shadow: 0 10px 32px #050b1da9, 0 0 85px #397bf735;
  border: 1px solid #e4eeff8a;
}
.orbit-pill { background: #172c50; border-color: #467ac3; color: #c8ddff; }
.orbit-dot { background: #77acfa; border-color: #31568c; }
.hero-footer { border-top-color: #546a9380; color: #a9c3e8; }
.hero-footer strong { color: #eff6ff; }
.main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 10px 2% 33px;
}
.panel {
  margin: auto;
  max-width: 510px;
  width: 100%;
  padding: 35px 39px 37px;
  background: linear-gradient(165deg,#121c2d 0%,#0e1727 85%);
  border: 1px solid #273951;
  border-radius: 21px;
  box-shadow: 0 20px 48px #00000063, inset 0 1px #4b6f9d2c;
}
.panel .eyebrow { color: #8db6fa; font-size: .66rem; }
.panel h2 {
  font-size: clamp(1.82rem,2.4vw,2.16rem);
  font-weight: 710;
  letter-spacing: -.045em;
  line-height: 1.2;
  color: #f3f7ff;
  margin: 12px 0;
}
.lead { color: #a8b9d4; font-size: .88rem; line-height: 1.72; margin-bottom: 21px; }
.steps {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 3px;
  padding: 4px;
  border: 1px solid #273a55;
  background: #0a1220;
  border-radius: 12px;
  margin-bottom: 26px;
}
.step {
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  background: transparent;
  border-color: transparent;
  color: #8598b4;
  font-size: .71rem;
  font-weight: 570;
  padding: 8px 3px;
  line-height: 1.5;
  border-radius: 8px;
}
.step.active {
  background: #183a74;
  color: #f0f6ff;
  border: 1px solid #3765af;
  box-shadow: 0 2px 9px #0e326a88;
}
.step:hover { background: #172945; }
.step[data-go="account"][disabled] { opacity: .5; }
.screen[hidden] { display:none!important; }
.field { margin-top: 16px; }
.field label { color: #d7e3f5; font-size: .79rem; font-weight: 660; margin-bottom: 7px; }
input {
  min-height: 51px;
  font-size: 16px;
  background: #0b1423;
  border: 1px solid #334560;
  color: #f4f8ff;
  border-radius: 10px;
  padding: 11px 14px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
input:hover { border-color: #58749c; }
input:focus {
  outline: none;
  border-color: #6da5ff;
  box-shadow: 0 0 0 3px #397bf72e;
  background: #0b1829;
}
input::placeholder { color: #788da9; }
.input-wrap button {
  top: 7px;
  right: 7px;
  min-height: 36px;
  border-radius: 8px;
  padding: 5px 11px;
  font-weight: 650;
  font-size: .76rem;
  background: #192a42;
  border: 1px solid #344c6d;
  color: #d9e9ff;
}
.input-wrap button:hover { background: #253e62; }
.hint { color: #91a4bf; font-size: .71rem; line-height: 1.6; }
.btn {
  min-height: 50px;
  margin-top: 22px;
  border-radius: 10px;
  border: 1px solid #438aff;
  background: linear-gradient(115deg,#397bf7 0%,#2468e8 78%,#1854cb 100%);
  color: #fff;
  box-shadow: 0 7px 20px #205fd63b, inset 0 1px #ffffff28;
  font-size: .89rem;
  font-weight: 710;
  transition: transform .16s ease, box-shadow .16s ease;
}
.btn:hover { background: linear-gradient(115deg,#498bf9,#1b5cd5); box-shadow: 0 9px 24px #205fd659; }
.btn:active { transform: translateY(1px); }
.secondary {
  background: #142137;
  border-color: #355075;
  color: #c4dcff;
  box-shadow: none;
}
.secondary:hover { background: #1a2f4d; }
.link-btn { color: #93bfff; font-weight: 650; }
.link-btn:hover { color: #d6e6ff; }
.helper { color: #94a8c4; margin-top: 19px; }
.footer {
  margin-top: 23px;
  border-top: 1px solid #2b3a52;
  color: #889ab4;
}
.footer a { color: #a9cbff; }
.footer a[aria-disabled=true] { color: #94a7c0; }
.feedback { color: #ffbf99; }
.feedback.good { color: #91d6b0; }
.alert {
  background: #272319;
  border: 1px solid #655236;
  color: #f0cea1;
}
.iconbox {
  background: #162b49;
  border: 1px solid #315b94;
  color: #9dc5ff;
}
.mail, .mini {
  background: #101a2b;
  border: 1px solid #2a3d58;
  color: #eaf2ff;
}
.mail .mail-head { border-bottom-color: #354766; }
.mail p, .mini p { color: #a7b8d2; }
.trial {
  background:
    radial-gradient(circle at 90% 0%, #3c84f748 0, transparent 55%),
    linear-gradient(125deg,#193c80,#101c3b 80%);
  color: #f3f7ff;
  border: 1px solid #3d67ac;
  box-shadow: inset 0 1px #8ebcff25;
}
.trial h3 { color: #f4f8ff; }
.trial p { color: #c4d7f7; }
.trial code { color: #acd0ff; border-top: 1px solid #5679ae; overflow-wrap:anywhere; }
.trial .eyebrow { color: #bbd7ff!important; }
.tag { color: #d4e6ff; background: #244478; }
.tag.warn { background: #3b2b1e; color: #f0c397; }
.admin-nav div { background: #132138; border-color: #2e4563; color: #bed3f3; }
.note { color: #a3b2cc; }
@media(max-width:980px) {
  .layout { display:block; min-height: auto; padding: 0; }
  .hero { display:none; }
  .main { padding: 25px 18px 45px; }
  .panel { max-width: 560px; }
}
@media(max-width:600px) {
  .top { height: 66px; padding: 0 18px; }
  .brand { font-size: 1.36rem; gap: 10px; }
  .logo { width: 40px; height: 40px; }
  .brand-sub { font-size:.72rem; }
  .top-product-label { display:none; }
  .language-row { padding: 9px 16px; gap: 6px; }
  .language-label { font-size:.74rem; gap: 5px; }
  .language-label .language-long { display:none; }
  .language-label .language-short { display:inline; }
  .language-choices { padding: 3px; }
  .language-choice { padding: 8px 10px; font-size: .76rem; min-height: 37px; }
  .status-banner { padding: 10px 17px; gap: 11px; align-items:flex-start; font-size: .71rem; }
  .status-banner strong { font-size: .66rem; }
  .status-banner button { padding: 2px 0; font-size: .68rem; }
  .main { padding: 17px 13px 32px; }
  .panel {
    padding: 25px 23px 29px;
    background: linear-gradient(170deg,#111b2b,#0e1726);
    border:1px solid #26364e;
    border-radius:17px;
    box-shadow: 0 12px 30px #00000043;
  }
  .steps { margin-bottom: 22px; }
  .step { font-size: .69rem; padding: 7px 2px; white-space: normal; line-height: 1.2; min-height: 47px; }
  .step span { display: block; font-size: .66rem; line-height: 1.25; white-space: normal; }
  .panel h2 { font-size: 1.84rem; margin: 8px 0 10px; }
  .lead { font-size: .85rem; margin-bottom: 15px; }
  .field { margin-top: 14px; }
  .btn { margin-top: 19px; }
  .grid { grid-template-columns: 1fr; }
  .footer { margin-top: 18px; }
}
@media(max-width:355px) {
  .language-row { padding: 8px 12px; }
  .language-label { font-size:.7rem; }
  .language-choices { gap: 0; }
  .language-choice { padding: 7px 7px; font-size:.71rem; }
  .panel { padding: 23px 18px 27px; }
  .step { font-size: .66rem; }
}
@media(prefers-reduced-motion:reduce) {
  html{scroll-behavior:auto}
  .btn, input { transition: none; }
}