@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Syne+Mono:wght@400&display=swap');

/* ── Variables ─────────────────────────────────────────────────── */
:root {
  --bg:     #090807;
  --panel:  #0d0b09;
  --lift:   #141210;
  --accent: #e8622a;
  --glow:   rgba(232, 98, 42, 0.14);
  --text:   #ede8df;
  --muted:  #4a4540;
  --faint:  #1e1a16;
  --syne:   'Syne', sans-serif;
  --mono:   'Syne Mono', monospace;
}

/* ── Reset & Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; overflow: hidden; }

body.login {
  background: var(--bg) !important;
  font-family: var(--syne) !important;
  height: 100vh !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* ── Left Brand Panel (injected) ───────────────────────────────── */
.tsm-panel {
  position: fixed;
  inset-block: 0;
  left: 0;
  width: 46vw;
  background: var(--panel);
  border-right: 1px solid var(--faint);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 52px 56px 44px;
  overflow: hidden;
  z-index: 50;
  animation: tsm-slide-left 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* CRT scanlines */
.tsm-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 3px,
    rgba(0,0,0,0.18) 3px,
    rgba(0,0,0,0.18) 4px
  );
  pointer-events: none;
  z-index: 0;
}

/* Warm depth gradient */
.tsm-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 0% 100%, rgba(232, 98, 42, 0.07) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 0%, rgba(232, 98, 42, 0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.tsm-panel-top,
.tsm-panel-mid,
.tsm-panel-bot { position: relative; z-index: 1; }

/* Watermark */
.tsm-watermark {
  position: absolute;
  bottom: -30px;
  right: -20px;
  font-family: var(--syne);
  font-weight: 800;
  font-size: clamp(80px, 12vw, 140px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px var(--faint);
  user-select: none;
  pointer-events: none;
  z-index: 0;
}

/* Wordmark */
.tsm-wordmark { display: flex; flex-direction: column; }

.tsm-wm-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  display: block;
}

.tsm-wm-main {
  font-family: var(--syne);
  font-weight: 800;
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--text);
  display: block;
}

.tsm-wm-product {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 14px;
  border-top: 1px solid var(--faint);
  padding-top: 14px;
  display: inline-block;
}

/* Center ornament + tagline */
.tsm-panel-mid {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  padding: 48px 0;
}

.tsm-ornament {
  width: 48px;
  height: 2px;
  background: var(--accent);
  position: relative;
  flex-shrink: 0;
}

.tsm-ornament::before {
  content: '';
  position: absolute;
  right: -14px;
  top: -5px;
  width: 12px;
  height: 12px;
  border: 1px solid var(--accent);
  transform: rotate(45deg);
}

.tsm-tagline {
  font-family: var(--syne);
  font-weight: 600;
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.35;
  color: var(--text);
  max-width: 260px;
}

.tsm-tagline em {
  font-style: normal;
  color: var(--accent);
}

.tsm-sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  line-height: 1.7;
  max-width: 260px;
}

/* Bottom meta strip */
.tsm-panel-bot {
  display: flex;
  align-items: center;
  gap: 0;
  border-top: 1px solid var(--faint);
  padding-top: 20px;
}

.tsm-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 16px;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(232, 98, 42, 0.5);
}

.tsm-meta {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted);
  padding-right: 16px;
  margin-right: 16px;
  border-right: 1px solid var(--faint);
  line-height: 1;
}

.tsm-meta:last-child {
  border-right: none;
  margin-right: 0;
  padding-right: 0;
}

/* Diagonal split accent */
.tsm-split {
  position: fixed;
  top: 0;
  left: calc(46vw - 1px);
  width: 40px;
  height: 100vh;
  background: linear-gradient(to right, var(--panel) 0%, var(--bg) 100%);
  clip-path: polygon(0 0, 12px 0, 40px 100%, 28px 100%);
  z-index: 49;
  pointer-events: none;
  animation: tsm-fade-in 0.4s ease 0.2s both;
}

/* ── Form header (injected via login_message) ───────────────────── */
.tsm-form-head {
  margin-bottom: 40px;
  max-width: 360px;
  width: 100%;
  animation: tsm-slide-right 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.14s both;
}

.tsm-form-head h2 {
  font-family: var(--syne) !important;
  font-weight: 800 !important;
  font-size: clamp(38px, 4.5vw, 56px) !important;
  letter-spacing: -0.03em !important;
  line-height: 0.95 !important;
  color: var(--text) !important;
  margin: 0 0 12px !important;
}

.tsm-form-head h2 span { color: var(--accent); }

.tsm-form-head p {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
  color: var(--muted) !important;
  margin: 0 !important;
}

/* ── Right Panel (WP #login) ────────────────────────────────────── */
body.login #login {
  position: fixed !important;
  left: 46vw !important;
  top: 0 !important;
  width: 54vw !important;
  height: 100vh !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 80px !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  animation: tsm-slide-right 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
}

/* Corner brackets */
body.login #login > #loginform {
  position: relative;
}

body.login #login > #loginform::before {
  content: '';
  position: absolute;
  top: -20px;
  left: -20px;
  width: 24px;
  height: 24px;
  border-top: 1px solid var(--muted);
  border-left: 1px solid var(--muted);
  pointer-events: none;
}

body.login #login > #loginform::after {
  content: '';
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 24px;
  height: 24px;
  border-bottom: 1px solid var(--muted);
  border-right: 1px solid var(--muted);
  pointer-events: none;
}

/* Hide WP logo */
body.login #login h1 { display: none !important; }

/* Form container */
body.login #loginform {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 360px !important;
  width: 100% !important;
  animation: tsm-slide-right 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

/* Labels */
body.login #loginform label {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.35em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  margin-bottom: 8px !important;
  display: block !important;
}

body.login .login-username,
body.login .login-password { margin-bottom: 18px !important; }

/* Inputs — left-border accent style */
body.login input[type="text"],
body.login input[type="password"] {
  background: var(--lift) !important;
  border: none !important;
  border-left: 2px solid var(--faint) !important;
  border-radius: 0 !important;
  color: var(--text) !important;
  font-family: var(--mono) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  padding: 14px 16px !important;
  width: 100% !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.18s ease, background 0.18s ease !important;
}

body.login input[type="text"]:focus,
body.login input[type="password"]:focus {
  border-left-color: var(--accent) !important;
  background: #171411 !important;
  box-shadow: inset 3px 0 0 0 var(--glow) !important;
}

/* Submit section */
body.login #loginform .submit {
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  margin-top: 28px !important;
}

body.login input#wp-submit {
  background: var(--accent) !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--bg) !important;
  font-family: var(--syne) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  padding: 13px 28px !important;
  cursor: pointer !important;
  float: none !important;
  display: inline-block !important;
  width: auto !important;
  box-shadow: none !important;
  transition: background 0.18s ease, transform 0.1s ease, box-shadow 0.18s ease !important;
}

body.login input#wp-submit:hover {
  background: #d4521c !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(232, 98, 42, 0.25) !important;
}

body.login input#wp-submit:active { transform: translateY(0) !important; }

/* Remember me */
body.login .forgetmenot {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  float: none !important;
  margin: 0 !important;
}

body.login .forgetmenot label {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.2em !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

body.login input[type="checkbox"] {
  accent-color: var(--accent) !important;
  width: 14px !important;
  height: 14px !important;
}

/* Nav links */
body.login #nav,
body.login #backtoblog {
  text-align: left !important;
  padding: 20px 0 0 !important;
  margin: 0 !important;
  max-width: 360px !important;
  width: 100% !important;
  border-top: 1px solid var(--faint) !important;
  clear: both !important;
}

body.login #nav { margin-top: 20px !important; }

body.login #nav a,
body.login #backtoblog a {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  color: var(--muted) !important;
  text-decoration: none !important;
  transition: color 0.18s ease !important;
}

body.login #nav a:hover,
body.login #backtoblog a:hover { color: var(--accent) !important; }

/* Error & message notices */
body.login #login_error {
  background: transparent !important;
  border: none !important;
  border-left: 2px solid #c0392b !important;
  padding: 10px 14px !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  color: #e05252 !important;
  max-width: 360px !important;
  width: 100% !important;
  margin: 0 0 20px !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

body.login .message {
  background: transparent !important;
  border: none !important;
  border-left: 2px solid var(--accent) !important;
  padding: 10px 14px !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  color: var(--muted) !important;
  max-width: 360px !important;
  width: 100% !important;
  margin: 0 0 20px !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ── Animations ─────────────────────────────────────────────────── */
@keyframes tsm-slide-left {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes tsm-slide-right {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes tsm-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .tsm-panel,
  .tsm-split { display: none !important; }

  body.login #login {
    left: 0 !important;
    width: 100vw !important;
    padding: 0 32px !important;
  }
}