/* =========================================================
   ASMATA — auth pages (login + register)
   Brand palette extracted from logo:
     forest green  #1a5c2e   (primary)
     golden yellow #f2b91c   (accent)
     ocean blue    #1668d6   (secondary)
     cream         #f7f5ee   (base surface)
     green-black   #0d2416   (ink)
   Set data-theme on <html> (document.documentElement).
   ========================================================= */

/* =========================================================
   Theme tokens
   ========================================================= */

   :root,
   [data-theme="light"] {
     /* Brand core */
     --brand-green:       #1a5c2e;
     --brand-green-dark:  #0f3d1e;
     --brand-green-soft:  #e6f1e9;
     --brand-yellow:      #f2b91c;
     --brand-yellow-dark: #c9930a;
     --brand-yellow-soft: #fdf3d4;
     --brand-blue:        #1668d6;
     --brand-blue-dark:   #0f4fa8;
     --brand-blue-soft:   #e3eefc;
     --brand-ink:         #0d2416;
   
     /* Surfaces */
     --auth-bg:       #f7f5ee;   /* cream */
     --surface:       #ffffff;
     --surface-alt:   #f2efe4;
     --surface-hover: #ebe7d8;
   
     /* Borders */
     --border:        rgba(26, 92, 46, 0.12);
     --border-strong: rgba(26, 92, 46, 0.28);
   
     /* Text */
     --text:            #0d2416;
     --text-muted:      #3d5546;
     --text-faint:      #7a8a7f;
     --text-on-primary: #ffffff;
     --text-on-accent:  #0d2416;
   
     /* Accent / primary */
     --primary:        #1a5c2e;
     --primary-hover:  #0f3d1e;
     --primary-soft:   #e6f1e9;
     --accent:         #f2b91c;
     --accent-hover:   #c9930a;
     --accent-soft:    #fdf3d4;
   
     /* Status */
     --danger:       #b91c1c;
     --danger-soft:  #fde2e2;
     --danger-text:  #5c0000;
     --success:      #1a5c2e;
     --success-soft: #e6f1e9;
     --warn:         #b26a00;
     --warn-soft:    #fdf3d4;
   
     /* Focus ring */
     --focus-ring: #1668d6;
   
     /* Shadows */
     --shadow-card: 0 12px 32px rgba(13, 36, 22, 0.08);
   
     color-scheme: light;
   }
   
   [data-theme="dark"] {
     /* Surfaces */
     --auth-bg:       #0a1410;
     --surface:       #12201a;
     --surface-alt:   #16261f;
     --surface-hover: #1c2f26;
   
     /* Borders */
     --border:        rgba(242, 185, 28, 0.14);
     --border-strong: rgba(242, 185, 28, 0.30);
   
     /* Text */
     --text:            #f4f4f5;
     --text-muted:      #b0b8b2;
     --text-faint:      #7a8a7f;
     --text-on-primary: #0d2416;
     --text-on-accent:  #0d2416;
   
     /* Accent / primary — yellow becomes primary on dark */
     --primary:        #f2b91c;
     --primary-hover:  #ffcd3d;
     --primary-soft:   #2a2410;
     --accent:         #f2b91c;
     --accent-hover:   #ffcd3d;
     --accent-soft:    #2a2410;
   
     /* Status */
     --danger:       #f87171;
     --danger-soft:  #3b1414;
     --danger-text:  #fecaca;
     --success:      #6bbf59;
     --success-soft: #17301e;
     --warn:         #f2b91c;
     --warn-soft:    #2a2410;
   
     /* Focus ring */
     --focus-ring: #f2b91c;
   
     /* Shadows */
     --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.6);
   
     color-scheme: dark;
   }
   
   /* =========================================================
      Reset
      ========================================================= */
   
   *,
   *::before,
   *::after { box-sizing: border-box; }
   
   /* =========================================================
      Body
      ========================================================= */
   
   body.auth-body {
     min-height: 100vh;
     min-height: 100dvh;
     background: var(--auth-bg);
     color: var(--text);
     display: flex;
     flex-direction: column;
   }
   
   /* =========================================================
      Top bar
      ========================================================= */
   
   .auth-top {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 14px 16px;
     max-width: 1440px;
     margin: 0 auto;
     width: 100%;
   }
   @media (min-width: 768px) {
     .auth-top { padding: 20px 32px; }
   }
   
   .auth-brand {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     text-decoration: none;
     color: var(--text);
   }
   .auth-brand-mark {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 36px;
     height: 36px;
     background: var(--primary);
     color: var(--text-on-primary);
     border-radius: 10px;
   }
   [data-theme="dark"] .auth-brand-mark {
     color: var(--brand-ink);
   }
   
   .auth-brand-name {
     display: flex;
     flex-direction: column;
     line-height: 1.1;
   }
   .auth-brand-name strong {
     font-size: 15px;
     letter-spacing: -0.01em;
     color: var(--text);
   }
   .auth-brand-name span {
     font-size: 10px;
     font-weight: 700;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     color: var(--primary);
   }
   [data-theme="dark"] .auth-brand-name span {
     color: var(--accent);
   }
   
   .auth-top-link {
     font-size: 13px;
     font-weight: 600;
     color: var(--text-muted);
     text-decoration: none;
   }
   .auth-top-link:hover { color: var(--text); }
   .auth-top-link strong {
     color: var(--primary);
   }
   [data-theme="dark"] .auth-top-link strong {
     color: var(--accent);
   }
   
   /* =========================================================
      Center container
      ========================================================= */
   
   .auth-wrap {
     flex: 1;
     display: flex;
     align-items: flex-start;
     justify-content: center;
     padding: 8px 16px 40px;
   }
   @media (min-width: 768px) {
     .auth-wrap { padding: 24px 32px 64px; align-items: center; }
   }
   
   .auth-card {
     width: 100%;
     max-width: 460px;
     background: var(--surface);
     color: var(--text);
     border-radius: 20px;
     box-shadow: var(--shadow-card);
     padding: 24px 20px;
   }
   @media (min-width: 480px) {
     .auth-card { padding: 32px 28px; }
   }
   
   .auth-head {
     margin-bottom: 20px;
   }
   .auth-eyebrow {
     display: inline-block;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: var(--primary);
     margin-bottom: 6px;
   }
   [data-theme="dark"] .auth-eyebrow { color: var(--accent); }
   
   .auth-title {
     font-size: clamp(22px, 4.6vw, 28px);
     line-height: 1.15;
     font-weight: 700;
     letter-spacing: -0.015em;
     color: var(--text);
     margin: 0 0 6px;
   }
   .auth-lede {
     font-size: 14px;
     line-height: 1.5;
     color: var(--text-muted);
     margin: 0;
   }
   
   /* =========================================================
      Fields
      ========================================================= */
   
   .field {
     display: flex;
     flex-direction: column;
     gap: 6px;
     margin-bottom: 14px;
   }
   .field label {
     font-size: 12px;
     font-weight: 600;
     color: var(--text);
     letter-spacing: 0.01em;
   }
   .field .hint {
     font-size: 11px;
     color: var(--text-faint);
   }
   .field .row {
     display: grid;
     grid-template-columns: 1fr;
     gap: 12px;
   }
   @media (min-width: 480px) {
     .field .row { grid-template-columns: 1fr 1fr; }
   }
   
   .input-wrap {
     position: relative;
     display: flex;
     align-items: center;
   }
   .input-wrap .material-symbols-outlined {
     position: absolute;
     left: 12px;
     top: 50%;
     transform: translateY(-50%);
     font-size: 20px;
     color: var(--text-faint);
     pointer-events: none;
   }
   
   .input {
     width: 100%;
     padding: 12px 14px 12px 40px;
     font-size: 14px;
     font-family: inherit;
     color: var(--text);
     background: var(--surface-alt);
     border: 1px solid transparent;
     border-radius: 12px;
     outline: none;
     transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
   }
   .input:focus {
     background: var(--surface);
     border-color: var(--focus-ring);
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 15%, transparent);
   }
   .input[aria-invalid="true"] {
     border-color: var(--danger);
     background: var(--danger-soft);
   }
   .input::placeholder { color: var(--text-faint); }
   
   .input-toggle {
     position: absolute;
     right: 8px;
     top: 50%;
     transform: translateY(-50%);
     width: 32px;
     height: 32px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border: 0;
     background: transparent;
     color: var(--text-faint);
     cursor: pointer;
     border-radius: 8px;
     transition: background-color 120ms ease, color 120ms ease;
   }
   .input-toggle:hover {
     color: var(--primary);
     background: color-mix(in srgb, var(--primary) 10%, transparent);
   }
   [data-theme="dark"] .input-toggle:hover {
     color: var(--accent);
     background: color-mix(in srgb, var(--accent) 12%, transparent);
   }
   
   .field-error {
     font-size: 12px;
     color: var(--danger);
     min-height: 14px;
   }
   
   /* =========================================================
      Buttons
      ========================================================= */
   
   .btn-block {
     width: 100%;
     padding: 13px 18px;
     font-size: 15px;
     font-weight: 600;
     font-family: inherit;
     border-radius: 12px;
     border: 0;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     transition: background-color 160ms ease, transform 120ms ease;
   }
   .btn-block:active { transform: scale(0.99); }
   .btn-block:disabled { opacity: 0.65; cursor: not-allowed; }
   
   .btn-block-primary {
     background: var(--primary);
     color: var(--text-on-primary);
   }
   .btn-block-primary:hover:not(:disabled) {
     background: var(--primary-hover);
     color: var(--text-on-primary);
   }
   [data-theme="dark"] .btn-block-primary,
   [data-theme="dark"] .btn-block-primary:hover:not(:disabled) {
     color: var(--brand-ink);
   }
   
   /* Spinner */
   .spinner {
     width: 16px;
     height: 16px;
     border: 2px solid color-mix(in srgb, currentColor 40%, transparent);
     border-top-color: currentColor;
     border-radius: 999px;
     animation: spin 700ms linear infinite;
   }
   @keyframes spin { to { transform: rotate(360deg); } }
   
   /* =========================================================
      Alerts
      ========================================================= */
   
   .alert {
     display: flex;
     align-items: flex-start;
     gap: 8px;
     padding: 10px 12px;
     border-radius: 12px;
     font-size: 13px;
     line-height: 1.4;
     margin-bottom: 14px;
   }
   .alert-icon { font-size: 18px; line-height: 1; flex-shrink: 0; margin-top: 1px; }
   .alert-error { background: var(--danger-soft); color: var(--danger-text); }
   .alert-success { background: var(--success-soft); color: var(--success); }
   .alert-info { background: var(--accent-soft); color: var(--text-on-accent); }
   .alert[hidden] { display: none; }
   
   /* =========================================================
      Utility rows
      ========================================================= */
   
   .auth-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
     margin: 4px 0 16px;
     font-size: 13px;
   }
   
   .auth-link {
     color: var(--primary);
     text-decoration: none;
     font-weight: 600;
   }
   .auth-link:hover { color: var(--primary-hover); text-decoration: underline; }
   [data-theme="dark"] .auth-link { color: var(--accent); }
   [data-theme="dark"] .auth-link:hover { color: var(--accent-hover); }
   
   .checkbox {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     font-size: 13px;
     color: var(--text-muted);
     cursor: pointer;
     user-select: none;
   }
   .checkbox input {
     width: 16px;
     height: 16px;
     accent-color: var(--primary);
   }
   [data-theme="dark"] .checkbox input {
     accent-color: var(--accent);
   }
   
   .auth-foot {
     margin-top: 20px;
     padding-top: 16px;
     border-top: 1px solid var(--border);
     font-size: 13px;
     color: var(--text-muted);
     text-align: center;
   }
   .auth-foot a {
     color: var(--primary);
     font-weight: 600;
     text-decoration: none;
   }
   .auth-foot a:hover { text-decoration: underline; }
   [data-theme="dark"] .auth-foot a { color: var(--accent); }
   
   /* =========================================================
      Password strength
      ========================================================= */
   
   .strength {
     display: flex;
     gap: 4px;
     margin-top: 6px;
   }
   .strength-bar {
     height: 4px;
     flex: 1;
     border-radius: 999px;
     background: var(--surface-alt);
     transition: background-color 200ms ease;
   }
   .strength-bar.filled-weak   { background: var(--danger); }
   .strength-bar.filled-fair   { background: var(--brand-yellow-dark); }
   .strength-bar.filled-good   { background: var(--brand-blue); }
   .strength-bar.filled-strong { background: var(--success); }
   
   /* =========================================================
      Side note (right column, desktop only)
      ========================================================= */
   
   .auth-shell {
     width: 100%;
     max-width: 1040px;
     display: grid;
     grid-template-columns: 1fr;
     gap: 24px;
     align-items: center;
   }
   @media (min-width: 1024px) {
     .auth-shell { grid-template-columns: minmax(0, 460px) 1fr; gap: 56px; }
   }
   
   .auth-aside {
     display: none;
     color: var(--text);
   }
   @media (min-width: 1024px) {
     .auth-aside { display: block; }
   }
   .auth-aside h2 {
     font-size: 28px;
     font-weight: 700;
     letter-spacing: -0.015em;
     line-height: 1.15;
     margin: 0 0 12px;
     color: var(--text);
   }
   .auth-aside p {
     font-size: 15px;
     line-height: 1.55;
     color: var(--text-muted);
     margin: 0 0 20px;
     max-width: 34rem;
   }
   .auth-aside ul {
     list-style: none;
     padding: 0;
     margin: 0;
     display: flex;
     flex-direction: column;
     gap: 10px;
   }
   .auth-aside li {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     font-size: 14px;
     color: var(--text);
   }
   .auth-aside li .material-symbols-outlined {
     color: var(--primary);
     font-size: 20px;
     flex-shrink: 0;
     margin-top: 1px;
   }
   [data-theme="dark"] .auth-aside li .material-symbols-outlined {
     color: var(--accent);
   }
   
   /* =========================================================
      Footer strip
      ========================================================= */
   
   .auth-legal {
     text-align: center;
     font-size: 12px;
     color: var(--text-faint);
     padding: 0 16px 24px;
   }
   .auth-legal a {
     color: var(--text-muted);
     text-decoration: none;
   }
   .auth-legal a:hover {
     color: var(--text);
     text-decoration: underline;
   }
   
   /* =========================================================
      Focus rings
      ========================================================= */
   
   .input:focus-visible,
   .btn-block:focus-visible,
   .checkbox input:focus-visible {
     outline: none;
   }
   
   .auth-link:focus-visible,
   .auth-top-link:focus-visible {
     outline: 2px solid var(--focus-ring);
     outline-offset: 2px;
     border-radius: 6px;
   }

   /* Success panel line */
.trader-login-success-line {
  font-size: 14px;
  color: var(--sf-text-muted, var(--admin-text-muted, #3d5546));
  margin: 0 0 12px;
}
.trader-login-success-line strong {
  color: var(--sf-text, var(--admin-text, #0d2416));
}

.auth-brand-logo {
  height: 36px;          /* tune to taste — auth headers usually a bit taller than the topbar */
  width: auto;
  display: block;
  object-fit: contain;
}

[data-theme="dark"] .auth-brand-logo {
  content: url("../assets/asmatalogo.png");
}
   
   /* =========================================================
      Print
      ========================================================= */
   
   @media print {
     .auth-top,
     .auth-legal { display: none; }
   }