:root {
  --navy: #15233d;
  --navy-light: #1e3a5f;
  --navy-soft: #1f2f4d;
  --gold: #e8a838;
  --gold-dark: #c98c1f;
  --text-muted: #94a3b8;
  --bg-app: #f4f6fa;
  --card-radius: 14px;
}

/* ---------- Cards / KPI (ancien système, encore utilisé par les pages non converties) ---------- */
.kpi-card {
  background: #fff; border-radius: var(--card-radius);
  padding: 1.1rem 1.3rem; box-shadow: 0 2px 10px rgba(15,35,61,.06);
  border: 1px solid #eef1f6;
  height: 100%;
}
.kpi-card .kpi-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  font-size: 1.2rem; margin-bottom: .6rem;
}
.kpi-card .kpi-value { font-size: 1.7rem; font-weight: 800; color: var(--navy); }
.kpi-card .kpi-label { font-size: .8rem; color: #64748b; }

.bg-soft-navy { background: rgba(31,56,95,.1); color: var(--navy); }
.bg-soft-gold { background: rgba(232,168,56,.18); color: var(--gold-dark); }
.bg-soft-green { background: rgba(46,125,50,.12); color: #2e7d32; }
.bg-soft-red { background: rgba(192,57,43,.12); color: #c0392b; }

.card-app {
  background: #fff; border-radius: var(--card-radius);
  border: 1px solid #eef1f6; box-shadow: 0 2px 10px rgba(15,35,61,.05);
}
.card-app .card-app-header {
  padding: 1rem 1.3rem; border-bottom: 1px solid #f0f2f6;
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 700; color: var(--navy);
}
.card-app .card-app-body { padding: 1.3rem; }

/* ---------- Buttons ---------- */
.btn-navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-light); border-color: var(--navy-light); color:#fff; }
.btn-gold { background: var(--gold); border-color: var(--gold); color: var(--navy); font-weight: 600; }
.btn-gold:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: #fff; }

/* ---------- Badges statut ---------- */
.badge-statut { font-weight: 600; font-size: .72rem; padding: .35em .7em; border-radius: 20px; }
.badge-planifie { background:#dce6f1; color:#1f3864; }
.badge-encours { background:#ffe699; color:#7a5c00; }
.badge-termine { background:#c6e0b4; color:#1e5c25; }
.badge-bloque { background:#f8cbad; color:#8a3a1d; }
.badge-annule { background:#d9d9d9; color:#444; }

.badge-prio-haute { color:#c0392b; font-weight:700; }
.badge-prio-moyenne { color:#e08e0b; font-weight:700; }
.badge-prio-basse { color:#2e7d32; font-weight:700; }

/* ---------- Auth pages (login / 2FA) ---------- */
.auth-wrapper { min-height: 100vh; display: flex; }
.auth-left {
  flex: 1.1; background: linear-gradient(160deg, var(--navy) 0%, #0e1c33 100%);
  color: #fff; padding: 4rem; display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
}
.auth-left::after {
  content: ''; position: absolute; right: -120px; top: -80px;
  width: 380px; height: 380px; border-radius: 50%;
  background: rgba(255,255,255,.04);
}
.auth-left .brand-row { display:flex; align-items:center; gap:.8rem; margin-bottom: 2.5rem; }
.auth-left .brand-row .logo {
  width: 50px; height:50px; background: var(--gold); border-radius: 12px;
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; color: var(--navy);
}
.auth-left h1 { font-size: 2.1rem; font-weight: 800; line-height: 1.25; }
.auth-left h1 span { color: var(--gold); }
.auth-left p.lead-text { color: #c8d2e0; max-width: 460px; }
.auth-left .feature-item { display:flex; align-items:center; gap:.75rem; margin-top:1rem; color:#d6dee8; }
.auth-left .feature-item .ico {
  width: 34px; height:34px; border-radius:8px; background: rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
}
.auth-right {
  flex: 1; background: #fff; display:flex; align-items:center; justify-content:center; padding: 2rem;
}
.auth-card { width: 100%; max-width: 420px; }
.auth-card h2 { font-weight: 800; color: var(--navy); }
.auth-card .form-label { font-weight: 600; color: var(--navy); font-size: .85rem; }
.auth-card .form-control { padding: .65rem .9rem; border-radius: 9px; border-color: #dde3ec; }
.auth-card .btn-login {
  background: var(--navy); color: #fff; border-radius: 9px; padding: .65rem;
  font-weight: 700; border: none;
}
.auth-card .btn-login:hover { background: var(--navy-light); color:#fff; }

table.table-app thead th {
  background: var(--navy); color: #fff; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .03em; border: none; vertical-align: middle;
}
table.table-app tbody tr:hover { background: #f7f9fc; }
table.table-app td, table.table-app th { vertical-align: middle; }

.progress-bar-gold { background-color: var(--gold); }

@media (max-width: 900px) {
  .auth-left { display: none; }
}

/* =========================================================
   NOUVEAU GABARIT (sidebar/topbar/content) — porté depuis templates/assets/styles.css
   ========================================================= */
:root{
  --ink: #12213B;
  --ink-2: #1B2E4E;
  --paper: #EEF0EE;
  --card: #FFFFFF;
  --line: #DEE2E0;
  --text: #1E2328;
  --text-soft: #6B7280;
  --amber: #E38B29;
  --amber-soft: #FBE8D2;
  --green: #2E7D4F;
  --green-soft: #DCEFE1;
  --red: #B8402A;
  --red-soft: #F6DCD5;
  --blue-soft: #E7EAF3;
  --crate-empty: #E4E7E3;
  --sidebar-w: 240px;
  --sidebar-w-collapsed: 76px;
}
body{
  background: var(--paper);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
}
h1,h2,h3,.display{ font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.01em; }
.mono{ font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.01em; }
a{ text-decoration:none; }

/* ---- Layout shell ---- */
.shell{ display:flex; min-height:100vh; }

.sidebar{
  width: var(--sidebar-w);
  flex-shrink:0;
  background: linear-gradient(185deg, var(--ink) 0%, var(--ink-2) 100%);
  color: #DCE3EE;
  padding: 24px 20px;
  position: sticky;
  top:0;
  height: 100vh;
  overflow-y:auto;
  transition: width .2s ease, padding .2s ease;
  z-index: 20;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.25) transparent;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 3px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar.collapsed{ width: var(--sidebar-w-collapsed); padding: 24px 14px; }

.brand{ display:flex; align-items:center; gap:10px; margin-bottom: 30px; }
.brand-mark{
  width:34px; height:34px; border-radius:8px; background: var(--amber);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1.05rem; color:var(--ink);
}
.brand-mark svg{ width:18px; height:18px; }
.brand-text{ overflow:hidden; white-space:nowrap; transition: opacity .15s ease, width .15s ease; }
.sidebar.collapsed .brand-text{ opacity:0; width:0; }
.brand-name{ font-family:'Space Grotesk'; font-weight:700; font-size:1.05rem; color:#fff; line-height:1.1;}
.brand-sub{ font-size:.68rem; color:#8FA0BC; letter-spacing:.06em; text-transform:uppercase; }

.sidebar-toggle{
  width:26px; height:26px; border-radius:7px; border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05); color:#BFCBDE; display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0; margin-left:auto; text-decoration:none; font-size:.75rem;
}
.sidebar-toggle:hover{ background: rgba(255,255,255,.12); color:#fff; }
.sidebar.collapsed .sidebar-toggle svg{ transform: rotate(180deg); }
.sidebar.collapsed .brand{ justify-content:center; }
.sidebar.collapsed .sidebar-toggle{ margin-left:0; }

.nav-section-label{
  font-size: .68rem; text-transform:uppercase; letter-spacing:.09em;
  color:#5F7398; margin: 22px 0 8px 10px; font-weight:600; white-space:nowrap; overflow:hidden;
}
.sidebar.collapsed .nav-section-label{ text-align:center; margin:22px 0 8px 0; }
.sidebar.collapsed .nav-section-label span{ display:none; }
.sidebar.collapsed .nav-section-label::after{ content:'···'; letter-spacing:2px; }

.nav-link{
  display:flex; align-items:center; gap:11px; padding: 9px 10px; border-radius:8px;
  color:#BFCBDE; font-size:.88rem; font-weight:500; margin-bottom:2px;
  transition: background .15s ease, color .15s ease; white-space:nowrap; position:relative; cursor:pointer;
}
.nav-link i{ width:16px; text-align:center; opacity:.85; flex-shrink:0; }
.nav-link:hover{ background: rgba(255,255,255,.06); color:#fff; }
.nav-link.active{ background: rgba(227,139,41,.16); color:#fff; }
.nav-link.active i{ opacity:1; color:var(--amber); }
.nav-label{ overflow:hidden; transition: opacity .15s ease; flex:1; }
.sidebar.collapsed .nav-link{ justify-content:center; padding:9px; }
.sidebar.collapsed .nav-label{ display:none; }
.sidebar.collapsed .nav-badge{ position:absolute; top:2px; right:2px; margin-left:0; }
.nav-badge{
  margin-left:auto; background:var(--red); color:#fff; font-size:.65rem;
  font-weight:700; padding:1px 6px; border-radius:20px;
}

/* collapsible sub-menu (dropdown) */
.nav-group .chev{ margin-left:auto; font-size:.7rem; transition: transform .18s ease; opacity:.7; }
.nav-group.open > .nav-link .chev{ transform: rotate(90deg); }
.nav-sub{
  max-height:0; overflow:hidden; transition: max-height .2s ease;
  padding-left: 27px; border-left: 1px solid rgba(255,255,255,.08); margin-left:16px;
}
.nav-group.open .nav-sub{ max-height:600px; }
.nav-sub a{
  display:flex; align-items:center; gap:9px; padding:7px 8px; font-size:.82rem; color:#9FB0CB; border-radius:6px;
}
.nav-sub a i{ width:14px; text-align:center; font-size:.78rem; opacity:.8; flex-shrink:0; }
.nav-sub a .nav-label{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-sub a:hover{ color:#fff; background: rgba(255,255,255,.06); }
.nav-sub a:hover i{ opacity:1; }
.nav-sub a.active{ color:#fff; font-weight:600; }
.nav-sub a.active i{ opacity:1; color:var(--amber); }
.sidebar.collapsed .nav-group .chev{ display:none; }
.sidebar.collapsed .nav-sub{ display:none; }

.sidebar-foot{
  display:flex; align-items:center; gap:10px; margin-top:24px;
  padding-top:16px; border-top:1px solid rgba(255,255,255,.09);
}
.sidebar.collapsed .sidebar-foot{ justify-content:center; }
.avatar{
  width:32px; height:32px; border-radius:8px; background:#2A3F63; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk'; font-weight:700; color:#fff; font-size:.8rem;
}
.foot-text{ overflow:hidden; white-space:nowrap; }
.sidebar.collapsed .foot-text{ display:none; }
.foot-name{ font-size:.8rem; font-weight:600; color:#fff; }
.foot-role{ font-size:.68rem; color:#7C8FAE; }

/* mobile overlay */
.sidebar-scrim{ display:none; }
@media (max-width: 860px){
  .sidebar{ position:fixed; left:0; top:0; transform: translateX(-100%); width: var(--sidebar-w) !important; padding:24px 20px !important; }
  .sidebar.mobile-open{ transform: translateX(0); box-shadow: 0 0 0 100vmax rgba(0,0,0,.001); }
  .sidebar.mobile-open .brand-text, .sidebar.mobile-open .nav-label, .sidebar.mobile-open .foot-text{ opacity:1; width:auto; display:block; }
  .sidebar-scrim.show{
    display:block; position:fixed; inset:0; background:rgba(15,20,30,.45); z-index:19;
  }
  .hamburger{ display:flex !important; }
}

/* ---- Main ---- */
.main{ flex:1; min-width:0; }
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding: 20px 32px; border-bottom: 1px solid var(--line); background: var(--paper);
  position: sticky; top:0; z-index:5;
}
.hamburger{
  display:none; width:36px; height:36px; border-radius:9px; border:1px solid var(--line);
  background:#fff; align-items:center; justify-content:center; color:var(--ink); flex-shrink:0; cursor:pointer;
}
.search-wrap{
  display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:10px;
  padding: 8px 14px; width: 320px; color:var(--text-soft);
}
.search-wrap input{ border:none; outline:none; background:transparent; width:100%; font-size:.85rem; }
.icon-btn{
  width:36px; height:36px; border-radius:9px; border:1px solid var(--line);
  background:#fff; display:flex; align-items:center; justify-content:center; color:var(--text-soft); position:relative; flex-shrink:0;
}
.dot-flag{ position:absolute; top:6px; right:6px; width:7px; height:7px; border-radius:50%; background: var(--amber); border:1.5px solid #fff; }

.topbar-store{
  display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:8px 14px; font-size:.82rem; font-weight:600; color:var(--ink); white-space:nowrap;
}
.topbar-store i{ color:var(--amber); font-size:.85rem; }
.topbar-date{
  display:flex; align-items:center; gap:7px; font-size:.78rem; color:var(--text-soft); white-space:nowrap;
}
.topbar-shortcut{ padding:9px 14px; }
@media (max-width: 1100px){ .topbar-date{ display:none; } }
@media (max-width: 860px){
  .topbar-store span{ display:none; }
  .topbar-shortcut span{ display:none; }
  .topbar-shortcut{ padding:9px; }
}

.content{ padding: 28px 32px 60px; }
.page-title{ font-size:1.5rem; font-weight:700; margin-bottom:2px; }
.page-sub{ color:var(--text-soft); font-size:.86rem; margin-bottom: 26px; }
.crumb{ font-size:.76rem; color:var(--text-soft); margin-bottom:6px; }
.crumb b{ color:var(--text); font-weight:600; }

.footer-pro{ margin-top:auto !important; }

/* ---- Buttons ---- */
.btn-ink{
  background:var(--ink); color:#fff; border:none; border-radius:9px; padding:9px 16px;
  font-size:.85rem; font-weight:600; display:inline-flex; align-items:center; gap:8px;
}
.btn-ink:hover{ background: var(--ink-2); color:#fff; }
.btn-outline{
  background:#fff; color:var(--text); border:1px solid var(--line); border-radius:9px; padding:9px 16px;
  font-size:.85rem; font-weight:600; display:inline-flex; align-items:center; gap:8px;
}
.btn-outline:hover{ border-color:#C7CCC9; color:var(--text); }

/* ---- KPI cards ---- */
.kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px; }
.kpi{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding: 18px 20px; position:relative; overflow:hidden; }
.kpi-label{ font-size:.76rem; color:var(--text-soft); font-weight:500; margin-bottom:8px; }
.kpi-value{ font-family:'Space Grotesk'; font-size:1.65rem; font-weight:700; }
.kpi-delta{ font-size:.74rem; margin-top:6px; font-weight:600; }
.kpi-delta.up{ color:var(--green); }
.kpi-delta.down{ color:var(--red); }
.kpi-accent{ position:absolute; right:16px; top:16px; width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; }

/* ---- Panels ---- */
.panel{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding: 22px 24px; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:12px; }
.panel-title{ font-size:1rem; font-weight:700; font-family:'Space Grotesk'; }
.panel-title-sub{ font-size:.76rem; color:var(--text-soft); }
.link-quiet{ font-size:.78rem; color:var(--ink); font-weight:600; }
.link-quiet:hover{ color:var(--amber); }
.row-main{ display:grid; grid-template-columns: 2fr 1.05fr; gap:16px; align-items:start; }
.section-gap{ margin-top:16px; }

/* ---- Crate signature visual ---- */
.crate-row{ display:flex; align-items:center; gap:2px; }
.crate{ width:11px; height:14px; border-radius:2px; background:var(--crate-empty); flex-shrink:0; }
.crate.fill-green{ background: var(--green); }
.crate.fill-amber{ background: var(--amber); }
.crate.fill-red{ background: var(--red); }

/* ---- Tables ---- */
table.data-table{ width:100%; border-collapse:collapse; }
table.data-table th{
  text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-soft); font-weight:600; padding: 0 10px 10px 10px; border-bottom:1px solid var(--line); white-space:nowrap;
}
table.data-table td{ padding: 12px 10px; border-bottom:1px solid #EEF0EE; vertical-align:middle; }
table.data-table tr:last-child td{ border-bottom:none; }
table.data-table tr:hover td{ background:#FAFBFA; }
.prod-name{ font-weight:600; }
.prod-meta{ font-size:.74rem; color:var(--text-soft); }
.qty-mono{ font-weight:600; font-family:'IBM Plex Mono'; }

.status-pill{ font-size:.7rem; font-weight:600; padding:3px 9px; border-radius:20px; display:inline-block; white-space:nowrap; }
.status-ok{ background:var(--green-soft); color:var(--green); }
.status-low{ background:var(--amber-soft); color:var(--amber); }
.status-crit{ background:var(--red-soft); color:var(--red); }
.status-neutral{ background:var(--blue-soft); color:var(--ink); }

/* ---- Alerts list ---- */
.alert-item{ display:flex; gap:12px; padding: 13px 0; border-bottom:1px solid #EEF0EE; }
.alert-item:last-child{ border-bottom:none; }
.alert-ico{ width:32px; height:32px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.alert-title{ font-size:.85rem; font-weight:600; }
.alert-sub{ font-size:.75rem; color:var(--text-soft); }
.alert-time{ font-size:.7rem; color:#9AA3AC; white-space:nowrap; }

/* ---- Depot bars ---- */
.depot-row{ margin-bottom:16px; }
.depot-row:last-child{ margin-bottom:0; }
.depot-head{ display:flex; justify-content:space-between; font-size:.82rem; margin-bottom:6px; }
.depot-name{ font-weight:600; }
.depot-cap{ color:var(--text-soft); font-size:.76rem; }
.bar-track{ height:8px; background:#EDEFEE; border-radius:6px; overflow:hidden; }
.bar-fill{ height:100%; border-radius:6px; }

/* ---- Forms ---- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field label{ font-size:.78rem; font-weight:600; margin-bottom:6px; display:block; color:var(--text); }
.field input, .field select, .field textarea{
  width:100%; border:1px solid var(--line); border-radius:9px; padding:9px 12px; font-size:.85rem;
  font-family:'Inter'; background:#fff; color:var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--ink); outline-offset:1px; }
.field-full{ grid-column: 1 / -1; }

/* ---- Cards grid (depots/produits) ---- */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.depot-card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px; }
.depot-card-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.depot-card-ico{ width:36px; height:36px; border-radius:9px; background:var(--blue-soft); display:flex; align-items:center; justify-content:center; }
.depot-card-title{ font-weight:700; font-size:.95rem; }
.depot-card-sub{ font-size:.74rem; color:var(--text-soft); }
.depot-stat-row{ display:flex; justify-content:space-between; font-size:.82rem; padding:7px 0; border-bottom:1px solid #EEF0EE; }
.depot-stat-row:last-of-type{ border-bottom:none; }

@media (max-width: 1200px){
  .kpi-grid{ grid-template-columns:repeat(2,1fr); }
  .row-main{ grid-template-columns:1fr; }
  .card-grid{ grid-template-columns:repeat(2,1fr); }
  .form-grid{ grid-template-columns:1fr; }
}
@media (max-width: 860px){
  .search-wrap{ width:180px; }
  .content{ padding:20px; }
  .kpi-grid{ grid-template-columns:1fr; }
  .card-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   AUTH PAGES (login / mot de passe oublié) — nouveau gabarit
   ========================================================= */
.auth-shell{ display:flex; min-height:100vh; background:var(--paper); }
.auth-side{
  width: 44%;
  background: linear-gradient(165deg, var(--ink) 0%, var(--ink-2) 60%, #24406B 100%);
  color:#DCE3EE; padding: 48px 52px; display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
}
.auth-side::after{
  content:''; position:absolute; right:-60px; bottom:-60px; width:280px; height:280px; border-radius:50%;
  background: radial-gradient(circle, rgba(227,139,41,.16) 0%, rgba(227,139,41,0) 70%);
}
.auth-brand{ display:flex; align-items:center; gap:10px; position:relative; z-index:1; }
.auth-brand .brand-mark{ width:36px; height:36px; border-radius:9px; background:var(--amber); display:flex; align-items:center; justify-content:center; }
.auth-brand-name{ font-family:'Space Grotesk'; font-weight:700; font-size:1.15rem; color:#fff; }
.auth-brand-sub{ font-size:.7rem; color:#8FA0BC; letter-spacing:.06em; text-transform:uppercase; }
.auth-quote{ position:relative; z-index:1; }
.auth-quote-crates{ display:grid; grid-template-columns:repeat(10, 1fr); gap:4px; margin-bottom:26px; max-width:280px; }
.auth-quote-crates .crate{ width:100%; height:16px; background:rgba(255,255,255,.08); }
.auth-quote-crates .crate.on{ background: var(--amber); }
.auth-quote-title{ font-family:'Space Grotesk'; font-size:1.5rem; font-weight:700; color:#fff; line-height:1.25; max-width:360px; margin-bottom:10px; }
.auth-quote-sub{ font-size:.86rem; color:#A9B8D1; max-width:340px; line-height:1.5; }
.auth-foot{ position:relative; z-index:1; font-size:.72rem; color:#7C8FAE; }
.auth-main{ flex:1; display:flex; align-items:center; justify-content:center; padding: 40px 24px; }
.auth-card{ width:100%; max-width:400px; }
.auth-card-eyebrow{ font-size:.74rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--amber); margin-bottom:8px; }
.auth-card-title{ font-family:'Space Grotesk'; font-size:1.5rem; font-weight:700; margin-bottom:6px; }
.auth-card-sub{ font-size:.86rem; color:var(--text-soft); margin-bottom:28px; }
.auth-field{ margin-bottom:16px; }
.auth-field label{ font-size:.78rem; font-weight:600; margin-bottom:6px; display:block; }
.auth-input-wrap{ position:relative; }
.auth-input-wrap i{ position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size:.85rem; color:var(--text-soft); }
.auth-input-wrap input{
  width:100%; border:1px solid var(--line); border-radius:9px; padding:10px 12px 10px 36px; font-size:.88rem;
  font-family:'Inter'; background:#fff; color:var(--text);
}
.auth-input-wrap input:focus{ outline:2px solid var(--ink); outline-offset:1px; }
.auth-toggle-pass{ position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--text-soft); cursor:pointer; padding:4px; }
.auth-row-between{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; font-size:.82rem; }
.auth-check{ display:flex; align-items:center; gap:7px; color:var(--text-soft); }
.auth-check input{ accent-color: var(--ink); }
.auth-link{ color:var(--ink); font-weight:600; }
.auth-link:hover{ color:var(--amber); }
.auth-submit{
  width:100%; background:var(--ink); color:#fff; border:none; border-radius:9px; padding:11px 16px;
  font-size:.9rem; font-weight:600; display:flex; align-items:center; justify-content:center; gap:8px;
}
.auth-submit:hover{ background:var(--ink-2); color:#fff; }
.auth-submit:disabled{ opacity:.65; }
.auth-back{ display:inline-flex; align-items:center; gap:6px; font-size:.82rem; color:var(--text-soft); margin-bottom:22px; }
.auth-back:hover{ color:var(--ink); }
.auth-foot-note{ text-align:center; font-size:.82rem; color:var(--text-soft); margin-top:22px; }
.auth-steps{ display:flex; align-items:center; gap:8px; margin-bottom:28px; }
.auth-step-dot{ width:26px; height:26px; border-radius:50%; background:#EDEFEE; color:var(--text-soft); font-size:.74rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.auth-step-dot.done{ background:var(--green-soft); color:var(--green); }
.auth-step-dot.active{ background:var(--ink); color:#fff; }
.auth-step-line{ flex:1; height:2px; background:#EDEFEE; }
.auth-step-line.done{ background:var(--green-soft); }
.otp-row{ display:flex; gap:8px; margin-bottom:8px; }
.otp-box{
  width:44px; height:52px; text-align:center; font-size:1.2rem; font-family:'IBM Plex Mono'; font-weight:600;
  border:1px solid var(--line); border-radius:10px; background:#fff;
}
.otp-box:focus{ outline:2px solid var(--ink); outline-offset:1px; }
.step-panel{ display:none; }
.step-panel.active{ display:block; }
@media (max-width: 900px){
  .auth-side{ display:none; }
  .auth-main{ padding:32px 20px; }
}