/* ===================================================================
   Nexim Global ID — SSO. Login split-screen (testo a sinistra),
   stile IdP enterprise. Responsive: su mobile le due aree si impilano.
   =================================================================== */
*{box-sizing:border-box;margin:0;padding:0;}
:root{
  --ink:#0b1626; --ink2:#11243d; --ink3:#1d3a5c;
  --accent:#ff8a1e; --accent2:#ec7211; --accent-d:#cf6109;
  --txt:#1d1f24; --muted:#5f6b7a; --line:#e2e6eb;
  --bg:#f6f7f9; --ok:#1d8102; --bad:#d13212;
}
html,body{height:100%;}
body{
  font-family:'Inter','Segoe UI',Helvetica,Arial,sans-serif;
  color:var(--txt);background:var(--bg);-webkit-font-smoothing:antialiased;
}
a{color:#2c6ecb;text-decoration:none;}
a:hover{text-decoration:underline;}

/* ====== AUTH — split screen ====== */
.auth{display:flex;min-height:100vh;}

/* -- pannello sinistro: brand + sicurezza -- */
.auth-side{
  flex:0 0 42%;position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(680px 420px at 16% 10%, rgba(255,138,30,.20), transparent 60%),
    radial-gradient(700px 540px at 92% 98%, rgba(36,103,184,.34), transparent 60%),
    linear-gradient(158deg,#0b1626 0%,#11243d 56%,#1d3a5c 100%);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:44px 48px;
}
.auth-side::before{
  content:"";position:absolute;inset:0;opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(circle at 28% 26%,#000,transparent 78%);
          mask-image:radial-gradient(circle at 28% 26%,#000,transparent 78%);
}
.auth-side > *{position:relative;z-index:1;}
.brand-lock{display:flex;align-items:center;gap:13px;}
.brand-lock img{height:30px;width:auto;display:block;}
.brand-lock .id{
  font-weight:800;font-size:30px;line-height:1;color:var(--accent);
  letter-spacing:.03em;border-left:2px solid rgba(255,255,255,.22);padding-left:13px;
}
.auth-hero{max-width:430px;}
.auth-hero .eyebrow{
  font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin-bottom:15px;
}
.auth-hero h2{font-size:31px;font-weight:800;line-height:1.2;letter-spacing:-.01em;}
.auth-hero p{margin-top:13px;color:#9fb2c9;font-size:14px;line-height:1.6;}
.sec-list{margin-top:26px;display:flex;flex-direction:column;gap:14px;}
.sec-item{display:flex;align-items:center;gap:13px;}
.sec-item .ic{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);
  display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:15px;
}
.sec-item .tx strong{color:#fff;font-size:13.5px;font-weight:700;}
.sec-item .tx span{color:#8ba0b8;font-size:12px;}
.auth-side-foot{font-size:11.5px;color:#5f7287;letter-spacing:.02em;}

/* -- pannello destro: form -- */
.auth-panel{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:44px 26px;background:var(--bg);
}
.auth-box{width:100%;max-width:410px;}
.auth-box .topline{
  font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-d);margin-bottom:8px;display:flex;align-items:center;gap:6px;
}
.auth-box h1{font-size:24px;font-weight:800;color:var(--ink);letter-spacing:-.01em;}
.auth-box .lead{font-size:13.5px;color:var(--muted);margin-top:6px;line-height:1.5;}
.auth-card2{
  background:#fff;border:1px solid var(--line);border-radius:13px;margin-top:20px;
  box-shadow:0 1px 2px rgba(11,22,38,.04),0 14px 36px -18px rgba(11,22,38,.30);
  padding:25px 26px 23px;
}

.fld{margin-bottom:16px;}
.fld label{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:6px;}
.fld .wrap{position:relative;}
.fld .wrap > i{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:#9aa6b4;font-size:14px;pointer-events:none;
}
.fld input{
  width:100%;height:46px;padding:0 14px 0 38px;font-size:14.5px;color:var(--txt);
  border:1.5px solid #c7cfd8;border-radius:9px;background:#fff;outline:none;
  transition:border-color .12s,box-shadow .12s;
}
.fld input:focus{border-color:var(--accent2);box-shadow:0 0 0 4px rgba(236,114,17,.14);}
.fld .hint{font-size:11.5px;color:var(--muted);margin-top:6px;display:flex;gap:6px;align-items:center;}

.btn{
  width:100%;height:47px;border:none;border-radius:9px;cursor:pointer;
  font-size:14.5px;font-weight:800;letter-spacing:.01em;
  transition:transform .05s,filter .12s;display:flex;align-items:center;justify-content:center;gap:9px;
}
.btn-primary{background:linear-gradient(180deg,var(--accent),var(--accent-d));color:#1a1206;
  box-shadow:0 6px 16px -7px rgba(236,114,17,.7);}
.btn-primary:hover{filter:brightness(1.05);}
.btn-primary:active{transform:translateY(1px);}
.btn-ghost{background:#fff;color:var(--ink);border:1.5px solid #c7cfd8;}
.btn-ghost:hover{background:#f4f6f9;}
.btn[disabled]{opacity:.55;cursor:not-allowed;}

.auth-links{margin-top:16px;display:flex;flex-direction:column;gap:10px;font-size:13px;}
.auth-divider{height:1px;background:var(--line);margin:18px 0 14px;}
.auth-foot2{margin-top:20px;text-align:center;font-size:11.5px;color:#8b95a3;}
.trust-row{margin-top:16px;display:flex;gap:7px;flex-wrap:wrap;justify-content:center;}
.trust-chip{
  font-size:10.5px;font-weight:700;color:#5f6b7a;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:5px 11px;display:flex;align-items:center;gap:6px;
}
.trust-chip i{color:var(--ok);font-size:11px;}
.lang-switch{margin-top:14px;display:flex;gap:3px;flex-wrap:wrap;justify-content:center;}
.lang-switch a:hover{text-decoration:none;}

.alert{
  padding:11px 13px;border-radius:9px;font-size:13px;margin-bottom:16px;
  display:flex;gap:9px;align-items:flex-start;line-height:1.45;
}
.alert i{margin-top:1px;}
.alert-bad{background:#fdf3f1;border:1px solid #f3c9bf;color:#8b2c11;}
.alert-ok{background:#f0f8ee;border:1px solid #bfe3b3;color:#1d5e02;}
.alert-info{background:#eef4fb;border:1px solid #c4d8ee;color:#1a4d80;}

.otp-row{display:flex;gap:9px;justify-content:center;margin:8px 0 6px;}
.otp-row input{
  width:48px;height:58px;text-align:center;font-size:24px;font-weight:800;
  border:1.5px solid #c7cfd8;border-radius:10px;font-family:'JetBrains Mono','Courier New',monospace;
  color:var(--ink);outline:none;transition:border-color .12s,box-shadow .12s;
}
.otp-row input:focus{border-color:var(--accent2);box-shadow:0 0 0 4px rgba(236,114,17,.14);}
.muted-strong{color:var(--ink);font-weight:700;}

/* ---- responsive: impila su mobile/tablet ---- */
@media(max-width:900px){
  .auth{flex-direction:column;}
  .auth-side{
    flex:none;padding:24px 26px;
    flex-direction:row;align-items:center;justify-content:center;gap:12px;
  }
  .auth-hero,.auth-side-foot{display:none;}
  .brand-lock img{height:26px;}
  .brand-lock .id{font-size:26px;}
  .auth-panel{padding:30px 18px 46px;}
}
@media(max-width:480px){
  .auth-card2{padding:21px 18px 19px;}
  .otp-row{gap:6px;} .otp-row input{width:44px;height:54px;font-size:21px;}
}

/* RTL (arabo) */
[dir="rtl"] .fld input{padding:0 38px 0 14px;}
[dir="rtl"] .fld .wrap > i{left:auto;right:13px;}
[dir="rtl"] .brand-lock .id{border-left:none;border-right:2px solid rgba(255,255,255,.22);
  padding-left:0;padding-right:13px;}

/* ====== PORTAL ====== */
.pnav{
  background:var(--ink);min-height:60px;display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  justify-content:space-between;padding:10px 22px;border-bottom:3px solid var(--accent);
}
.pnav .brand{display:flex;align-items:center;gap:10px;}
.pnav .brand img{height:22px;width:auto;}
.pnav .brand .id{color:var(--accent);font-weight:800;font-size:22px;line-height:1;}
.pnav .brand .sep{color:#3c5478;margin:0 3px;font-size:17px;}
.pnav .brand .ctx{color:#9fb0c6;font-size:13px;font-weight:600;}
.acct{position:relative;}
.acct-btn{display:flex;align-items:center;gap:9px;background:var(--ink2);border:1px solid var(--ink3);
  color:#e6ecf3;padding:8px 12px;border-radius:9px;cursor:pointer;font-size:13px;}
.acct-btn:hover{background:var(--ink3);}
.acct-av{width:28px;height:28px;border-radius:50%;
  background:linear-gradient(180deg,var(--accent),var(--accent-d));color:#1a1206;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;}
.acct-menu{position:absolute;right:0;top:48px;width:268px;background:#fff;border:1px solid var(--line);
  border-radius:11px;box-shadow:0 14px 40px rgba(11,22,38,.3);overflow:hidden;display:none;z-index:40;}
.acct-menu.open{display:block;}
.acct-menu .who{padding:15px 17px;border-bottom:1px solid var(--line);}
.acct-menu .who .nm{font-weight:700;font-size:14px;color:var(--ink);}
.acct-menu .who .em{font-size:12px;color:var(--muted);margin-top:2px;word-break:break-all;}
.acct-menu .who .rl{display:inline-block;margin-top:8px;font-size:10.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;padding:3px 9px;border-radius:5px;background:#eef1f5;color:#46505e;}
.acct-menu a{display:flex;align-items:center;gap:10px;padding:12px 17px;font-size:13px;color:var(--txt);}
.acct-menu a:hover{background:#f4f6f9;text-decoration:none;}
.acct-menu a i{width:15px;color:var(--muted);}
.acct-menu .sep{height:1px;background:var(--line);}

.phero{background:linear-gradient(170deg,var(--ink2),var(--ink));padding:32px 22px 28px;color:#fff;}
.phero .inner{max-width:1120px;margin:0 auto;}
.phero h1{font-size:24px;font-weight:800;letter-spacing:-.01em;}
.phero p{color:#9fb0c6;font-size:14px;margin-top:7px;}

.pwrap{max-width:1120px;margin:0 auto;padding:24px 22px 52px;}
.psec{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;
  letter-spacing:.13em;margin:8px 0 14px;}

.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;}
.tile{background:#fff;border:1px solid var(--line);border-radius:14px;padding:21px;
  display:flex;flex-direction:column;gap:12px;
  transition:box-shadow .15s,transform .09s,border-color .15s;}
.tile.live{cursor:pointer;}
.tile.live:hover{box-shadow:0 14px 34px -16px rgba(11,22,38,.4);
  border-color:#c2ccd6;transform:translateY(-3px);}
.tile-top{display:flex;align-items:center;gap:14px;}
.tile-ic{width:50px;height:50px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:21px;color:#fff;}
.tile h3{font-size:16px;font-weight:800;color:var(--ink);}
.tile .tg{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.45;}
.tile-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;
  border-top:1px solid #eef1f4;padding-top:12px;}
.tile-go{font-size:13px;font-weight:800;color:var(--accent-d);display:flex;align-items:center;gap:8px;}
.badge{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  padding:4px 9px;border-radius:6px;}
.badge-sso{background:#eaf6e6;color:#1d6b02;}

.pcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:19px;}
.pcard h3{font-size:14px;font-weight:800;color:var(--ink);margin-bottom:12px;}
.kv{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid #eef1f4;font-size:13px;}
.kv:last-child{border-bottom:none;}
.kv .k{color:var(--muted);}
.kv .v{color:var(--ink);font-weight:600;text-align:right;}
.pfoot{text-align:center;color:#8b95a3;font-size:11.5px;padding:26px 16px 36px;}

.utable{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);
  border-radius:12px;overflow:hidden;font-size:13px;}
.utable th{text-align:left;background:#f4f6f9;color:#5f6b7a;font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;padding:10px 13px;border-bottom:1px solid var(--line);}
.utable td{padding:11px 13px;border-bottom:1px solid #eef1f4;}
.utable tr:last-child td{border-bottom:none;}
.uchip{font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:5px;
  text-transform:uppercase;letter-spacing:.04em;}

@media(max-width:560px){
  .pnav .brand .ctx,.pnav .brand .sep{display:none;}
  .pnav{padding:10px 15px;}
  .utable{display:block;overflow-x:auto;white-space:nowrap;}
}