/* Redesigned sign-in page. Loaded only on Login when config/login_theme.php says 'new'.
   Pure look: colours, layout, decoration and animation. Nothing here touches how sign-in works. */
.theme-v2 {
  --bg: #0b0b10;
  --card: rgba(22, 22, 30, .72);
  --card-border: rgba(255, 255, 255, .10);
  --field: rgba(255, 255, 255, .055);
  --field-border: rgba(255, 255, 255, .14);
  --text: #f6f6f9;
  --text-2: #c2c4d0;
  --text-3: #8b8e9e;
  --accent: #2563eb;
  --accent-2: #38bdf8;
  --brand-red: #2563eb;
  --brand-grey: #9ea3ad;
}
.theme-v2 a { color: #93c5fd; }
.theme-v2 :focus-visible { outline-color: #93c5fd; }

/* ── backdrop: charcoal with cool blue light and a slow paver sheen ── */
.theme-v2 .bg {
  background:
    radial-gradient(900px 600px at 8% -8%, rgba(37, 99, 235, .30) 0%, transparent 60%),
    radial-gradient(800px 600px at 105% 105%, rgba(158, 163, 173, .16) 0%, transparent 60%),
    linear-gradient(160deg, #0b0b10, #14141c 55%, #0b0b10);
}
.theme-v2 .b1 { background: #2563eb; opacity: .22; }
.theme-v2 .b2 { background: #9ea3ad; opacity: .10; }
.theme-v2 .b3 { background: #38bdf8; opacity: .12; }
.theme-v2 .bg::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, transparent 70%);
}

/* ── brand panel ── */
.theme-v2 .brand-panel { position: relative; }
.theme-v2 .brand img { filter: drop-shadow(0 6px 18px rgba(37, 99, 235, .45)); }
.theme-v2 .brand span { letter-spacing: .12em; text-transform: uppercase; font-weight: 800; }
.theme-v2 .brand-panel h1 {
  background: linear-gradient(100deg, #fff 30%, #bfdbfe 70%, #38bdf8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: v2-rise .7s .05s cubic-bezier(.2, .8, .2, 1) both;
}
.theme-v2 .brand-panel p { animation: v2-rise .7s .15s cubic-bezier(.2, .8, .2, 1) both; }
.theme-v2 .brand-points li::before { background: var(--brand-red); box-shadow: 0 0 0 4px rgba(37, 99, 235, .2); }
.theme-v2 .brand-points { animation: v2-rise .7s .25s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes v2-rise { from { opacity: 0; transform: translateY(18px); } }

.v2-art { display: none; }
@media (min-width: 1024px) {
  .v2-art { display: block; position: relative; margin: 18px 0 0; height: 270px; }
  .v2-hex { -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 98%), linear-gradient(180deg, #000 70%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, #000 55%, transparent 98%), linear-gradient(180deg, #000 70%, transparent); mask-composite: intersect; }
  .v2-hex { position: absolute; inset: 0; width: 100%; height: 100%; }
  .v2-hex polygon { fill: rgba(255, 255, 255, .025); stroke: rgba(255, 255, 255, .10); stroke-width: 1.2; }
  .v2-hex polygon.r { fill: rgba(37, 99, 235, .55); stroke: rgba(147, 197, 253, .7); animation: v2-glow 5s ease-in-out infinite; }
  .v2-hex polygon.g { fill: rgba(158, 163, 173, .35); stroke: rgba(210, 214, 222, .5); animation: v2-glow 6s ease-in-out infinite; }
  .v2-hex polygon.d1 { animation-delay: .6s; } .v2-hex polygon.d2 { animation-delay: 1.4s; } .v2-hex polygon.d3 { animation-delay: 2.2s; } .v2-hex polygon.d4 { animation-delay: 3s; }
  @keyframes v2-glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
  .v2-chip {
    position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px;
    background: rgba(24, 24, 32, .78); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8); font-size: 13px; color: var(--text-2); white-space: nowrap;
    animation: v2-float 7s ease-in-out infinite;
  }
  .v2-chip b { display: block; color: var(--text); font-size: 14px; line-height: 1.2; }
  .v2-chip i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 15px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
  .v2-chip.grey i { background: linear-gradient(135deg, #6b7280, #9ea3ad); }
  .v2-chip.c1 { left: 0; top: 18px; }
  .v2-chip.c2 { left: 190px; top: 96px; animation-delay: -2s; }
  .v2-chip.c3 { left: 40px; top: 176px; animation-delay: -4s; }
  @keyframes v2-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
}

/* ── the card ── */
.theme-v2 .card {
  position: relative;
  background: var(--card);
  border: 1px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .06) inset;
}
.theme-v2 .card::before {   /* thin blue edge */
  content: ""; position: absolute; inset: -1px; border-radius: 23px; z-index: -1;
  background: linear-gradient(145deg, rgba(37, 99, 235, .85), rgba(255, 255, 255, .08) 38%, rgba(255, 255, 255, .04) 62%, rgba(158, 163, 173, .6));
}
.theme-v2 .card::after {    /* blue accent bar across the top */
  content: ""; position: absolute; left: 32px; right: 32px; top: -1px; height: 3px; border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--brand-red), var(--accent-2), var(--brand-grey));
}
.theme-v2 .card h2 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.theme-v2 .card h2::after { content: ""; display: block; width: 44px; height: 4px; border-radius: 4px; margin-top: 10px; background: linear-gradient(90deg, var(--brand-red), var(--accent-2)); }
.theme-v2 .sub { margin-top: -4px; }

.theme-v2 input[type=email], .theme-v2 input[type=password], .theme-v2 input[type=text], .theme-v2 input[type=tel] { border-radius: 13px; }
.theme-v2 input:focus { border-color: rgba(96, 165, 250, .85); background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 4px rgba(37, 99, 235, .20); }
.theme-v2 .check input { accent-color: var(--brand-red); }

.theme-v2 .btn-primary {
  position: relative; overflow: hidden; text-transform: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 16px 34px -12px rgba(37, 99, 235, .75);
}
.theme-v2 .btn-primary:hover { box-shadow: 0 20px 42px -12px rgba(56, 189, 248, .85); transform: translateY(-1px); }
.theme-v2 .btn-primary::after {   /* sheen that sweeps across on hover */
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); transition: left .6s;
}
.theme-v2 .btn-primary:hover::after { left: 130%; }
.theme-v2 .btn-ghost:hover { border-color: rgba(96, 165, 250, .5); }
.theme-v2 .divider::before, .theme-v2 .divider::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent); }
.theme-v2 .alert-info { background: rgba(37, 99, 235, .12); color: #dbeafe; border-color: rgba(37, 99, 235, .35); }
.theme-v2 .avatar, .theme-v2 .steps span.on { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.theme-v2 .credit { letter-spacing: .04em; }

@media (max-width: 1023px) {
  .theme-v2 .brand-mobile img { width: 52px; height: 52px; }
  .theme-v2 .card h2 { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-v2 .v2-hex polygon, .theme-v2 .v2-chip, .theme-v2 .brand-panel h1, .theme-v2 .brand-panel p, .theme-v2 .brand-points { animation: none !important; }
}