:root{
      --bg-grad: #0A2237;
      --bg-page: linear-gradient(180deg,#f7f9fd 0%,#eef3f8 100%);
      --btn1:#212943;
      --btn2:#4a3fb5;
      --line: rgba(15,23,42,.08);
      --muted:#64748b;
      --ink:#0f172a;
      --shadow:0 12px 30px rgba(2,6,23,.09);
    }

    *{ box-sizing:border-box; }
    html, body { margin:0; padding:0; }
    body{
      min-height:100dvh;
      background:var(--bg-page);
      color:var(--ink);
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    }

    .container{
      max-width:1460px;
      margin:0 auto;
      padding:0 16px;
    }

    /* ===== HEADER (copie base dashboard_admin) ===== */
    header.hero{
      position:sticky;
      top:0;
      z-index:10;
      background:var(--bg-grad);
      color:#f9fafb;
      border-bottom:1px solid #111827;
      padding:0;
      margin-bottom:.55rem;
      box-shadow:0 10px 26px rgba(0,0,0,.55);
    }
    .headerbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding-top: calc(8px + env(safe-area-inset-top));
      padding-bottom: 8px;
      padding-left: 16px;
      padding-right: 16px;
      min-width:0;
      line-height:1;
    }

    .brand{
      min-width:0;
      display:flex;
      align-items:center;
      gap:12px;
      flex:1 1 auto;
    }
    .brand .logo{
      flex:0 0 auto;
      display:flex;
      align-items:center;
      justify-content:flex-start;
      height:44px;
      width:min(76vw, 356px);
      overflow:hidden;
      line-height:1;
    }
    .brand .logo img{
      display:block;
      height:44px;
      width:auto;
      object-fit:contain;
      transform:translateY(calc(8% + 1.5px)) scale(3.35);
      transform-origin:left center;
      margin-left:-45px;
      filter: drop-shadow(0 6px 12px rgba(0,0,0,.22));
      line-height:1;
    }
    .brand .title{ display:none; }
    .brand .title .t1{ display:none; }
    .brand .title .t2{ display:none; }

    .header-actions{
      min-width:0;
      display:flex;
      align-items:center;
      gap:.45rem;
      white-space:nowrap;
      flex-wrap:nowrap;
      justify-content:flex-end;
      align-self:stretch;
      flex:0 0 auto;
    }
    .desktop-nav{
      display:flex;
      align-items:center;
      gap:.45rem;
      white-space:nowrap;
      flex-wrap:nowrap;
    }
    .mobile-trigger-wrap{
      display:none;
      align-items:center;
      justify-content:center;
      flex:0 0 auto;
    }

    .gc-btn{
      border:1px solid transparent;
      cursor:pointer;
      background:linear-gradient(135deg,var(--btn1),var(--btn2));
      color:#fff !important;
      box-shadow:0 14px 26px rgba(17,24,39,.14);
      border-radius:12px;
      padding:.68rem .9rem;
      font-size:.9rem;
      font-weight:700;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.45rem;
      margin:0;
      white-space:nowrap;
      line-height:1;
    }
    .gc-btn:hover{ filter:brightness(1.03); color:#fff !important; }
    .btn-reset{
      border:1px solid rgba(255,255,255,.16);
      background:rgba(255,255,255,.08);
      color:#f9fafb !important;
      box-shadow:none;
    }

    .mobile-menu-btn{
      position: static !important;
      height:32px;
      width:44px;
      margin:0;
      padding:0;
      border:0;
      background:transparent;
      line-height:1;
      font-size:0;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:12px;
      cursor:pointer;
      vertical-align:middle;
      flex:0 0 auto;
      appearance:none;
      -webkit-appearance:none;
      transition:background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .12s ease;
    }
    .mobile-menu-btn{
      display:inline-flex;
      width:44px;
      height:44px;
      align-items:center;
      justify-content:center;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.20);
      background:rgba(255,255,255,.12);
      box-shadow:0 8px 18px rgba(2,6,23,.18), inset 0 1px 0 rgba(255,255,255,.08);
      color:#fff !important;
      line-height:1;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    .mobile-menu-btn:hover{
      background:rgba(255,255,255,.16);
      border-color:rgba(255,255,255,.28);
      box-shadow:0 10px 22px rgba(2,6,23,.22), inset 0 1px 0 rgba(255,255,255,.10);
    }
    .mobile-menu-btn:active{ transform:translateY(0.5px); }
    .mobile-menu-btn:focus-visible{
      outline:none;
      box-shadow:0 0 0 3px rgba(255,255,255,.16), 0 10px 22px rgba(2,6,23,.22), inset 0 1px 0 rgba(255,255,255,.10);
    }

    .mobile-menu-btn .icon{
      width:22px;
      height:22px;
      display:block;
      flex:0 0 22px;
      pointer-events:none;
    }
    .mobile-menu-btn .icon *{
      stroke-linecap:round;
      stroke-linejoin:round;
      vector-effect:non-scaling-stroke;
    }
    .mobile-menu-btn .icon-close{ display:none; }
    .mobile-menu-btn.is-open .icon-menu{ display:none; }
    .mobile-menu-btn.is-open .icon-close{ display:block; }

    .menu-overlay{
      position:fixed;
      inset:0;
      z-index:60;
      background:rgba(2,6,23,.46);
      backdrop-filter:blur(6px);
      -webkit-backdrop-filter:blur(6px);
      display:none;
    }
    .menu-overlay.open{ display:block; }

    .menu-panel{
      position:fixed;
      top:0;
      right:0;
      bottom:0;
      width:min(92vw, 370px);
      z-index:61;
      transform:translateX(100%);
      transition:transform .2s ease;
      background:var(--bg-grad);
      border-left:1px solid rgba(255,255,255,.12);
      box-shadow:-20px 0 42px rgba(2,6,23,.28);
      backdrop-filter:blur(16px);
      -webkit-backdrop-filter:blur(16px);
      color:#f9fafb;
      overflow:auto;
    }
    .menu-panel.open{ transform:translateX(0); }

    .menu-panel-head{
      position:sticky;
      top:0;
      z-index:1;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.65rem;
      padding:calc(12px + env(safe-area-inset-top)) 12px 12px;
      background:var(--bg-grad);
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .menu-panel-title{
      min-width:0;
      font-weight:800;
      font-size:.98rem;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .menu-close{
      width:38px;height:38px;
      border-radius:10px;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.06);
      color:#fff;
      font-weight:700;
      cursor:pointer;
      flex:0 0 auto;
    }

    .menu-panel-links{
      padding:12px;
      display:grid;
      gap:.55rem;
    }
    .menu-link{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.8rem;
      text-decoration:none;
      color:#f9fafb;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.06);
      border-radius:14px;
      padding:.9rem .95rem;
      font-weight:700;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .menu-link:hover{
      background:rgba(255,255,255,.08);
      border-color:rgba(255,255,255,.16);
      color:#fff;
    }
    .menu-link .arrow{
      color:#c7d2fe;
      flex:0 0 auto;
      margin-left:.3rem;
    }

    /* ===== Page login ===== */
    main.page-wrap{
      min-height: calc(100dvh - 64px);
      display:flex;
      flex-direction:column;
    }

    .login-layout{
      display:grid;
      grid-template-columns: 1.06fr .94fr;
      gap:1rem;
      align-items:stretch;
      padding: .35rem 0 1rem;
      flex:1 1 auto;
    }

    .panel-card{
      border-radius:18px;
      background:rgba(255,255,255,.82);
      backdrop-filter:blur(12px);
      border:1px solid rgba(255,255,255,.66);
      box-shadow:var(--shadow);
      overflow:hidden;
    }

    .intro-card{
      position:relative;
      padding:1.05rem;
      display:flex;
      flex-direction:column;
      gap:.9rem;
      min-height: 520px;
    }
    .intro-card::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(500px 220px at 12% 8%, rgba(59,130,246,.14), transparent 65%),
        radial-gradient(420px 200px at 90% 90%, rgba(79,70,229,.10), transparent 70%);
      pointer-events:none;
    }
    .intro-card > *{ position:relative; }

    .badge-soft{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.42rem .7rem;
      border-radius:999px;
      border:1px solid rgba(79,70,229,.20);
      background:rgba(79,70,229,.08);
      color:#312e81;
      font-weight:700;
      font-size:.83rem;
      width:max-content;
      max-width:100%;
    }
    .headline{
      font-size:1.38rem;
      line-height:1.07;
      margin:0;
      letter-spacing:-.02em;
    }
    .muted{ color:var(--muted); }

    .cap-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:.7rem;
    }
    .cap{
      border:1px solid var(--line);
      background:rgba(255,255,255,.78);
      border-radius:14px;
      padding:.75rem .8rem;
      box-shadow:0 8px 20px rgba(2,6,23,.04);
      min-width:0;
    }
    .cap .k{ font-size:.75rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
    .cap .v{ font-weight:800; line-height:1.15; margin-top:.18rem; }
    .cap .s{ color:var(--muted); font-size:.81rem; margin-top:.22rem; line-height:1.22; }

    .flow-shell{
      border:1px solid rgba(15,23,42,.07);
      background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(248,251,255,.88));
      border-radius:16px;
      padding:.85rem;
      box-shadow:0 10px 20px rgba(2,6,23,.04);
    }
    .flow-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.6rem;
      margin-bottom:.65rem;
    }
    .flow-head strong{ font-size:.95rem; }
    .live-pill{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      font-size:.76rem;
      font-weight:700;
      color:#065f46;
      background:rgba(16,185,129,.10);
      border:1px solid rgba(16,185,129,.18);
      padding:.3rem .5rem;
      border-radius:999px;
    }
    .live-dot{
      width:8px;height:8px;border-radius:50%;
      background:#10b981;
      box-shadow:0 0 0 5px rgba(16,185,129,.14);
      animation:pulseDot 1.7s ease-in-out infinite;
    }
    @keyframes pulseDot{
      0%,100%{ transform:scale(1); opacity:1; }
      50%{ transform:scale(1.18); opacity:.75; }
    }

    .flow-map{
      position:relative;
      height:250px;
      border-radius:14px;
      border:1px solid rgba(15,23,42,.06);
      background:
        linear-gradient(rgba(148,163,184,.10) 1px, transparent 1px) 0 0/100% 26px,
        linear-gradient(90deg, rgba(148,163,184,.10) 1px, transparent 1px) 0 0/26px 100%,
        radial-gradient(300px 140px at 50% 45%, rgba(79,70,229,.08), transparent 70%),
        #fff;
      overflow:hidden;
    }
    .flow-map::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg, transparent 0%, rgba(59,130,246,.06) 42%, rgba(99,102,241,.10) 50%, rgba(59,130,246,.06) 58%, transparent 100%);
      animation:scan 3.8s linear infinite;
      opacity:.9;
      pointer-events:none;
    }
    @keyframes scan{
      0%{ transform:translateX(-100%); }
      100%{ transform:translateX(100%); }
    }

    .node{
      position:absolute;
      width:132px;
      border-radius:14px;
      border:1px solid rgba(15,23,42,.08);
      background:rgba(255,255,255,.95);
      box-shadow:0 8px 18px rgba(2,6,23,.05);
      padding:.55rem .6rem;
      min-height:70px;
    }
    .node .tag{
      font-size:.68rem;
      color:#4338ca;
      font-weight:800;
      letter-spacing:.06em;
      text-transform:uppercase;
    }
    .node .title{
      font-weight:800;
      line-height:1.08;
      font-size:.86rem;
      margin-top:.18rem;
    }
    .node .sub{
      font-size:.75rem;
      color:var(--muted);
      margin-top:.14rem;
      line-height:1.2;
    }
    .node.edge{ left:10px; top:18px; }
    .node.ingest{ right:10px; top:18px; }
    .node.rules{ left:10px; bottom:18px; }
    .node.audit{ right:10px; bottom:18px; }

    .core{
      position:absolute;
      left:50%; top:50%;
      transform:translate(-50%,-50%);
      width:170px;
      border-radius:18px;
      background:linear-gradient(135deg,#0f172a,#1f2a44 55%, #312e81);
      color:#fff;
      border:1px solid rgba(255,255,255,.10);
      box-shadow:0 14px 28px rgba(15,23,42,.26);
      padding:.85rem .8rem;
      text-align:center;
    }
    .core .logo{
      font-size:.78rem;
      letter-spacing:.08em;
      font-weight:800;
      opacity:.95;
    }
    .core .name{
      font-size:.92rem;
      line-height:1.1;
      font-weight:800;
      margin:.15rem 0 .35rem;
    }
    .core .stats{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:.35rem;
      text-align:left;
    }
    .core .stats .mini{
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.06);
      border-radius:10px;
      padding:.35rem .4rem;
    }
    .core .stats .mini .l{ font-size:.62rem; opacity:.78; }
    .core .stats .mini .v{ font-size:.78rem; font-weight:800; line-height:1.1; margin-top:.1rem; }

    .link-line{
      position:absolute;
      height:2px;
      background:linear-gradient(90deg, rgba(99,102,241,.10), rgba(59,130,246,.55), rgba(99,102,241,.10));
      transform-origin:left center;
      border-radius:999px;
      overflow:hidden;
    }
    .link-line::after{
      content:"";
      position:absolute;
      top:50%;
      left:-18px;
      width:18px;
      height:6px;
      transform:translateY(-50%);
      border-radius:99px;
      background:linear-gradient(90deg, rgba(255,255,255,0), rgba(59,130,246,.9), rgba(255,255,255,0));
      animation:packet 2.4s linear infinite;
    }
    @keyframes packet{ to{ left:calc(100% + 18px); } }

    .line-edge{ left:142px; top:61px; width:160px; transform:rotate(18deg); }
    .line-ingest{ left:270px; top:61px; width:160px; transform:rotate(-18deg); }
    .line-rules{ left:142px; top:186px; width:160px; transform:rotate(-18deg); }
    .line-audit{ left:270px; top:186px; width:160px; transform:rotate(18deg); }

    .log-list{
      margin:0;
      padding:0;
      list-style:none;
      display:grid;
      gap:.42rem;
    }
    .log-list li{
      display:grid;
      grid-template-columns:auto 1fr auto;
      align-items:center;
      gap:.6rem;
      border:1px solid rgba(15,23,42,.06);
      background:rgba(255,255,255,.84);
      border-radius:12px;
      padding:.48rem .58rem;
      box-shadow:0 6px 14px rgba(2,6,23,.03);
      min-width:0;
    }
    .log-time{ font-weight:800; font-size:.77rem; color:#0f172a; }
    .log-text{
      min-width:0;
      font-size:.8rem;
      color:#334155;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .log-code{
      font-size:.67rem;
      font-weight:800;
      letter-spacing:.05em;
      color:#4338ca;
      border:1px solid rgba(79,70,229,.16);
      background:rgba(79,70,229,.05);
      border-radius:999px;
      padding:.15rem .4rem;
    }

    .login-card{
      padding:1rem;
      display:flex;
      flex-direction:column;
      gap:.8rem;
      min-height:520px;
    }
    .auth-head{
      border:1px solid rgba(15,23,42,.06);
      background:rgba(255,255,255,.84);
      border-radius:16px;
      padding:.95rem;
      box-shadow:0 8px 20px rgba(2,6,23,.04);
    }
    .auth-head-top{
      display:flex;
      align-items:center;
      gap:.7rem;
      justify-content:space-between;
    }
    .auth-logo{
      display:flex;
      align-items:center;
      gap:.65rem;
      min-width:0;
    }
    .auth-logo-badge{
      width:40px;height:40px;flex:0 0 40px;
      border-radius:12px;
      display:grid;
      place-items:center;
      font-size:1rem;
      background:linear-gradient(135deg, rgba(79,70,229,.12), rgba(59,130,246,.12));
      border:1px solid rgba(79,70,229,.16);
    }
    .auth-title{ margin:0; font-size:1.04rem; line-height:1.1; }
    .auth-sub{ margin:.15rem 0 0; color:var(--muted); font-size:.82rem; line-height:1.25; }

    .shield-pill{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.32rem .5rem;
      border-radius:999px;
      border:1px solid rgba(15,23,42,.08);
      background:#fff;
      color:#334155;
      font-size:.75rem;
      font-weight:700;
      white-space:nowrap;
      flex:0 0 auto;
    }

    .auth-form-wrap{
      border:1px solid rgba(15,23,42,.06);
      background:rgba(255,255,255,.88);
      border-radius:16px;
      padding:.95rem;
      box-shadow:0 10px 20px rgba(2,6,23,.04);
    }
    .auth-form-wrap label{
      color:#334155;
      font-weight:700;
      font-size:.85rem;
      margin-bottom:.35rem;
    }
    .auth-form-wrap .form-control{
      border-radius:12px;
      border:1px solid #e2e8f0;
      padding:.72rem .85rem;
      box-shadow:none;
    }
    .auth-form-wrap .form-control:focus{
      border-color:#818cf8;
      box-shadow:0 0 0 .18rem rgba(99,102,241,.12);
    }
    .submit-btn{
      width:100%;
      border:0;
      border-radius:13px;
      padding:.82rem .95rem;
      font-weight:800;
      color:#fff;
      background:linear-gradient(135deg,#1f2937,#4338ca);
      box-shadow:0 14px 24px rgba(67,56,202,.18);
      transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;
    }
    .submit-btn:hover{ filter:brightness(1.04); box-shadow:0 16px 28px rgba(67,56,202,.20); }
    .submit-btn:active{ transform:translateY(1px); }

    .mini-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:.65rem;
    }
    .mini-card{
      border:1px solid rgba(15,23,42,.06);
      background:rgba(255,255,255,.80);
      border-radius:14px;
      padding:.7rem .75rem;
      box-shadow:0 8px 18px rgba(2,6,23,.03);
    }
    .mini-card .mini-k{
      color:var(--muted);
      font-size:.75rem;
      font-weight:700;
      margin-bottom:.22rem;
    }
    .mini-card .mini-v{
      font-weight:800;
      line-height:1.15;
      font-size:.92rem;
    }
    .mini-card .mini-s{
      color:var(--muted);
      font-size:.77rem;
      margin-top:.15rem;
      line-height:1.2;
    }

    .helper-links{
      display:grid;
      gap:.55rem;
    }
    .helper-link{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.7rem;
      text-decoration:none;
      color:inherit;
      border:1px solid rgba(15,23,42,.06);
      background:rgba(255,255,255,.82);
      border-radius:14px;
      padding:.75rem .8rem;
      box-shadow:0 8px 18px rgba(2,6,23,.03);
    }
    .helper-link:hover{
      color:inherit;
      border-color:rgba(79,70,229,.18);
      background:#fff;
    }
    .helper-link .meta{
      font-size:.78rem;
      color:var(--muted);
      margin-top:.12rem;
    }
    .helper-link .arr{
      color:#4338ca;
      font-weight:800;
      flex:0 0 auto;
    }

    .debug-card{
      border:1px dashed rgba(245,158,11,.34);
      background:rgba(254,252,232,.70);
      border-radius:14px;
      padding:.7rem .8rem;
      color:#713f12;
      font-size:.82rem;
      line-height:1.28;
      word-break:break-word;
    }
    .debug-card code{
      background:rgba(255,255,255,.9);
      border:1px solid rgba(15,23,42,.06);
      color:#1f2937;
      padding:1px 4px;
      border-radius:6px;
      font-size:.78rem;
    }

    .foot-note{
      color:var(--muted);
      text-align:center;
      font-size:.88rem;
      padding:.3rem 0 calc(1.1rem + env(safe-area-inset-bottom, 0px));
    }
    .foot-note a{ color:inherit; font-weight:700; text-decoration:none; }
    .foot-note a:hover{ text-decoration:underline; }

    @media (max-width: 1450px){
      .desktop-nav{ display:none; }
      .mobile-trigger-wrap{ display:flex; }
    }

    @media (min-width:901px){
      .brand .logo{height:46px;width:min(56vw, 376px)}
      .brand .logo img{height:46px;transform:translateY(calc(8% + 1.5px)) scale(3.55);margin-left:-56px}
    }

    @media (max-width: 1180px){
      .login-layout{
        grid-template-columns:1fr;
      }
      .intro-card, .login-card{ min-height:unset; }
      .flow-map{ height:220px; }
    }

    @media (max-width: 640px){
      .brand .logo{height:44px;width:min(78vw, 316px)}
      .brand .logo img{height:44px;transform:translateY(calc(8% + 1.5px)) scale(3.70);margin-left:-56px}
      .container{ padding:0 12px; }
      .headerbar{
        padding-top: calc(8px + env(safe-area-inset-top));
        padding-bottom: 8px;
        padding-left: 12px;
        padding-right: 12px;
        gap:.6rem .75rem;
      }
      .mobile-trigger-wrap{ display:flex; align-items:center; justify-content:center; }

      main.page-wrap{ min-height:auto; }
      .login-layout{ gap:.8rem; padding:.3rem 0 .9rem; }
      .panel-card{ border-radius:16px; }
      .intro-card, .login-card{ padding:.85rem; }
      .headline{ font-size:1.18rem; }
      .cap-grid{ grid-template-columns:1fr; }
      .flow-map{ height:200px; }
      .node{
        width:118px;
        min-height:64px;
        padding:.48rem .52rem;
      }
      .node .title{ font-size:.8rem; }
      .node .sub{ font-size:.71rem; }
      .core{ width:150px; padding:.7rem .65rem; }
      .core .name{ font-size:.84rem; }
      .line-edge{ left:126px; top:52px; width:128px; }
      .line-ingest{ left:228px; top:52px; width:128px; }
      .line-rules{ left:126px; top:160px; width:128px; }
      .line-audit{ left:228px; top:160px; width:128px; }
      .mini-grid{ grid-template-columns:1fr; }
    }

    @media (max-width: 430px){
      .brand .logo{height:42px;width:min(82vw, 300px)}
      .brand .logo img{height:42px;transform:translateY(calc(8% + 1.5px)) scale(3.95);margin-left:-54px}
      .flow-map{
        height:188px;
      }
      .node{
        width:102px;
        min-height:58px;
      }
      .node .tag{ font-size:.63rem; }
      .node .title{ font-size:.73rem; }
      .node .sub{
        font-size:.67rem;
        line-height:1.15;
      }
      .core{
        width:132px;
        border-radius:14px;
      }
      .core .stats{ grid-template-columns:1fr 1fr; gap:.28rem; }
      .core .stats .mini .l{ font-size:.56rem; }
      .core .stats .mini .v{ font-size:.68rem; }
      .line-edge{ left:112px; top:49px; width:112px; }
      .line-ingest{ left:190px; top:49px; width:112px; }
      .line-rules{ left:112px; top:147px; width:112px; }
      .line-audit{ left:190px; top:147px; width:112px; }
      .log-text{ font-size:.76rem; }
    }

    @media (max-width: 390px){
      .brand .logo{height:40px;width:min(84vw, 286px)}
      .brand .logo img{height:40px;transform:translateY(calc(8% + 1.5px)) scale(4.10);margin-left:-52px}
    }
  
    /* ===== Login simple (version finale) ===== */
    .login-layout{
      grid-template-columns:minmax(0, 620px);
      justify-content:center;
      align-content:center;
      align-items:center;
      gap:.85rem;
      padding:.7rem 0 1rem;
    }
    .intro-card{ display:none !important; }
    .login-card{
      min-height:auto;
      max-width:620px;
      width:100%;
      margin:0 auto;
      padding:1rem;
      gap:.8rem;
    }
    .auth-head{
      padding:1rem;
      border-radius:18px;
      background:
        radial-gradient(420px 180px at 12% 10%, rgba(59,130,246,.08), transparent 68%),
        radial-gradient(380px 180px at 100% 100%, rgba(79,70,229,.08), transparent 70%),
        rgba(255,255,255,.88);
    }
    .auth-head-top{
      align-items:center;
      gap:.85rem;
    }
    .auth-logo-badge{
      width:46px;height:46px;flex-basis:46px;
      border-radius:14px;
      font-size:1.1rem;
      box-shadow:0 8px 18px rgba(67,56,202,.08);
    }
    .auth-title{
      font-size:1.16rem;
      line-height:1.12;
      margin:0;
      letter-spacing:-.02em;
    }
    .auth-sub{
      margin:.22rem 0 0;
      font-size:.84rem;
      line-height:1.25;
    }
    .shield-pill{
      margin-top:1px;
      font-size:.74rem;
      padding:.36rem .55rem;
    }
    .auth-form-wrap{
      border-radius:16px;
      padding:1rem;
    }
    .auth-form-wrap .form-control{
      padding:.78rem .9rem;
    }
    .submit-btn{
      margin-top:.1rem;
      border-radius:14px;
      padding:.88rem 1rem;
    }
    .login-simple-note{
      border:1px solid rgba(15,23,42,.06);
      background:rgba(255,255,255,.78);
      border-radius:14px;
      padding:.75rem .85rem;
      color:#475569;
      font-size:.82rem;
      line-height:1.25;
      display:flex;
      align-items:center;
      gap:.55rem;
    }
    .login-simple-note .dot{
      width:8px;height:8px;border-radius:50%;
      background:#10b981;
      flex:0 0 auto;
      box-shadow:0 0 0 5px rgba(16,185,129,.14);
    }
    .support-box{
      margin-top:.9rem;
      border:1px solid rgba(79,70,229,.14);
      background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,247,255,.95));
      border-radius:16px;
      padding:.9rem .95rem;
      box-shadow:0 10px 22px rgba(67,56,202,.07);
      display:flex;
      align-items:flex-start;
      gap:.75rem;
    }
    .support-icon{
      width:42px;height:42px;
      flex:0 0 42px;
      border-radius:13px;
      display:grid;
      place-items:center;
      font-size:1.05rem;
      color:#312e81;
      background:linear-gradient(135deg, rgba(79,70,229,.12), rgba(59,130,246,.12));
      border:1px solid rgba(79,70,229,.14);
      box-shadow:0 8px 18px rgba(67,56,202,.08);
    }
    .support-box h3{
      margin:0 0 .2rem;
      font-size:.95rem;
      font-weight:800;
      color:#0f172a;
    }
    .support-box p{
      margin:0;
      color:#475569;
      font-size:.84rem;
      line-height:1.4;
    }
    .support-box a{
      color:#4338ca;
      font-weight:800;
      text-decoration:none;
      word-break:break-word;
    }
    .support-box a:hover{
      text-decoration:underline;
    }
    @media (max-width: 1180px){
      .login-layout{ grid-template-columns:minmax(0, 620px); }
    }
    @media (max-width: 640px){
      .login-layout{
        grid-template-columns:1fr;
        padding:.45rem 0 .95rem;
      }
      .login-card{
        padding:.85rem;
      }
      .auth-head{
        padding:.9rem;
      }
      .auth-head-top{
        flex-direction:column;
        align-items:stretch;
      }
      .shield-pill{
        width:max-content;
      }
    }

/* ===== Autonomie V11 : remplacements des utilitaires Bootstrap utilisés par le gabarit ===== */
.mb-3{margin-bottom:1rem!important}
.mb-0{margin-bottom:0!important}
.mt-1{margin-top:.25rem!important}
.text-start{text-align:left!important}
.min-w-0{min-width:0!important}
.form-label{display:inline-block}
.form-control{
  display:block;
  width:100%;
  min-width:0;
  font:inherit;
  color:#0f172a;
  background:#fff;
  outline:0;
}
.alert{
  position:relative;
  padding:.72rem .85rem;
  border:1px solid transparent;
  border-radius:14px;
  font-size:.88rem;
  line-height:1.35;
}
.alert-danger{color:#842029;background:#f8d7da;border-color:#f5c2c7}
.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}
.auth-subtitle{font-size:1.02rem!important}
.brand .logo a{display:flex;align-items:center;height:100%;width:100%;text-decoration:none}
.login-footer-link{color:inherit;text-decoration:none;font-weight:700}
.login-footer-link:hover{text-decoration:underline}
button,input{font-family:inherit}
button{cursor:pointer}
@media (max-width:640px){
  .auth-form-wrap input{font-size:16px}
}