*{box-sizing:border-box}body{margin:0;background:#f4f5f7;color:#20242a;font:14px Inter,Segoe UI,Arial,sans-serif}.app{min-height:100vh;display:flex}.side{width:250px;position:fixed;inset:0 auto 0 0;background:#121417;color:#d7d9dc;padding:20px 14px;display:flex;flex-direction:column}.side-brand{height:70px;padding:3px 8px 18px}.side-brand img{max-width:205px;max-height:62px;object-fit:contain}.side a{display:block;color:#c9cdd2;text-decoration:none;padding:11px 12px;border-radius:8px;margin:2px 0}.side a:hover{background:#25282d;color:#fff}.navlabel{font-size:10px;letter-spacing:1.6px;color:#747a83;margin:18px 12px 5px}.side-bottom{margin-top:auto;border-top:1px solid #2a2d31;padding-top:12px;font-size:12px}.side-bottom span{display:block;color:#999fa7;padding:0 12px 8px}.side-bottom a{padding:8px 12px}.side+main{margin-left:250px;width:calc(100% - 250px)}.top{height:68px;background:#fff;border-bottom:1px solid #e2e5e8;display:flex;align-items:center;justify-content:space-between;padding:0 30px}.topuser{color:#7a818a;font-size:12px}.content{max-width:1500px;margin:auto;padding:28px}.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.card{background:#fff;border:1px solid #e4e7ea;border-radius:13px;padding:20px;box-shadow:0 2px 10px #00000008}.label{font-size:12px;color:#7b838d}.big{font-size:27px;font-weight:750;margin-top:8px}.red{color:#df252b}.layout2{display:grid;grid-template-columns:1.65fr 1fr;gap:18px;margin-top:18px}.layout3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}.card h2{font-size:17px;margin:0 0 17px}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:11px 9px;border-bottom:1px solid #edf0f2;text-align:left}.table th{font-size:10px;color:#858b93;text-transform:uppercase}.badge{border-radius:20px;padding:5px 9px;font-size:11px;background:#eef0f3}.ok{background:#e6f5eb;color:#176f37}.warn{background:#fff2d1;color:#855d00}.danger{background:#fde6e7;color:#a61920}.toolbar{display:flex;gap:9px;align-items:center;justify-content:space-between;margin-bottom:18px}.btn{display:inline-block;background:#df252b;color:white;border:0;border-radius:8px;padding:10px 14px;text-decoration:none;font-weight:650;cursor:pointer}.btn.dark{background:#25282d}.btn.light{background:#edf0f2;color:#30343a}.form{background:#fff;border:1px solid #e3e6e9;border-radius:13px;padding:22px}.formgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.field label{display:block;font-weight:650;font-size:12px;margin-bottom:6px}.field input,.field select,.field textarea{width:100%;padding:10px;border:1px solid #dce0e4;border-radius:8px;font:inherit}.field textarea{min-height:120px}.full{grid-column:1/-1}.notice,.success{padding:12px;border-radius:8px;margin-bottom:14px}.notice{background:#fff3d4;color:#735300}.success{background:#e7f6eb;color:#176f37}.login-page{min-height:100vh;background:#090b0e;display:grid;grid-template-columns:55% 45%;color:#fff;position:relative;overflow:hidden}.login-left{position:relative;padding:68px 7vw;background:linear-gradient(120deg,#080a0d 0%,#12161b 55%,#080a0d 100%);overflow:hidden}.login-left:after{content:'';position:absolute;width:1000px;height:360px;left:-180px;bottom:-80px;border-top:3px solid #f1252b;border-radius:50%;box-shadow:0 -8px 45px #f1252b55,0 -2px 8px #fff3}.login-left .logo{width:390px;max-width:85%;position:relative;z-index:2}.login-left h1{font-size:43px;line-height:1.12;margin:85px 0 4px;position:relative;z-index:2}.login-left h1 span{color:#f1262b}.login-left p{font-size:17px;line-height:1.55;color:#c2c6cb;max-width:560px;position:relative;z-index:2}.features{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px;position:relative;z-index:2}.feature{border:1px solid #353a40;background:#12161b;border-radius:12px;padding:18px 10px;text-align:center}.feature i{font-size:28px;color:#f1262b;display:block;margin-bottom:8px}.feature b{font-size:13px}.feature small{display:block;color:#9ca2aa;margin-top:5px}.trust{position:absolute;bottom:35px;left:7vw;color:#aeb3b9;font-size:12px;z-index:2}.login-right{display:grid;place-items:center;padding:35px;background:#0b0d10}.login-card{width:min(590px,92%);border:1px solid #3a3f45;border-radius:18px;padding:50px 54px;background:linear-gradient(145deg,#14181d,#0e1115);box-shadow:0 20px 60px #0008}.login-card h2{font-size:34px;margin:0 0 5px}.login-card .sub{color:#9ea4ab;margin-bottom:35px}.login-card label{display:block;margin:0 0 8px}.login-card input{width:100%;padding:16px;border:1px solid #454a51;background:#111419;color:#fff;border-radius:9px;margin-bottom:20px;font-size:15px}.login-btn{width:100%;padding:16px;background:#e51d25;color:#fff;border:0;border-radius:9px;font-size:16px;font-weight:700;cursor:pointer}.twofa{margin-top:25px;border:1px solid #343a41;border-radius:10px;padding:17px;text-align:center;color:#c7cbd0}.login-foot{text-align:center;color:#727981;font-size:11px;margin-top:35px}@media(max-width:1050px){.login-page{grid-template-columns:1fr}.login-left{display:none}.cards{grid-template-columns:repeat(2,1fr)}.layout2,.layout3{grid-template-columns:1fr}}@media(max-width:700px){.side{position:static;width:100%;min-height:auto}.app{display:block}.side+main{margin:0;width:100%}.cards{grid-template-columns:1fr}.formgrid{grid-template-columns:1fr}.content{padding:16px}.top{padding:0 16px}}
/* HARDbar CONNECT - brand refinement v1.1 */
.brand-lockup{display:flex;align-items:center;gap:22px;position:relative;z-index:3;width:max-content;max-width:100%}
.brand-lockup img{width:118px;height:118px;object-fit:contain;display:block}
.brand-lockup span{font-size:35px;line-height:1;font-weight:800;letter-spacing:1.2px;color:#f4f5f6;white-space:nowrap}
.brand-lockup em{font-style:normal;color:#ef242b}
.login-left .brand-lockup{margin-top:0}
@media(max-width:1250px){.brand-lockup{gap:16px}.brand-lockup img{width:98px;height:98px}.brand-lockup span{font-size:28px}}
@media(max-width:1050px){.brand-lockup img{width:92px;height:92px}.brand-lockup span{font-size:27px}}
@media(max-width:700px){.brand-lockup{gap:12px}.brand-lockup img{width:76px;height:76px}.brand-lockup span{font-size:22px;letter-spacing:.5px}}

/* v1.2 - approved login visual refinement */
.login-page{grid-template-columns:56% 44%;background:#05070a}
.login-left{padding:46px 6.2vw 34px;background:
 radial-gradient(circle at 18% 88%,rgba(238,27,36,.12),transparent 32%),
 linear-gradient(120deg,#080a0d 0%,#101419 62%,#07090c 100%)}
.login-left .logo{width:620px;max-width:92%;height:auto;object-fit:contain;object-position:left center;filter:drop-shadow(0 3px 16px rgba(0,0,0,.45))}
.login-left h1{font-size:44px;margin:76px 0 5px;letter-spacing:-.7px}
.login-left p{font-size:17px;max-width:620px}
.features{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:40px}
.feature{min-height:168px;padding:22px 12px 17px;display:flex;flex-direction:column;justify-content:center}
.feature .icon{width:52px;height:52px;margin:0 auto 15px;display:block}
.feature .icon svg{width:100%;height:100%;fill:none;stroke:#ff1f2a;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.feature b{font-size:15px}
.feature small{font-size:13px}
.login-right{padding:38px 5vw;background:#080a0d}
.login-card{width:min(610px,94%);padding:50px 52px 42px;border-radius:18px;background:linear-gradient(145deg,#13171c,#0b0e12);box-shadow:0 24px 80px rgba(0,0,0,.45)}
.login-card h2{font-size:34px}
.login-card input{height:54px;padding:15px 16px;margin-bottom:20px}
.login-card input:focus{outline:none;border-color:#ff2b32;box-shadow:0 0 0 3px rgba(255,35,43,.10)}
.login-btn{height:56px;font-size:17px;box-shadow:0 10px 24px rgba(229,29,37,.18)}
.login-btn:hover{background:#f3262d}
.login-options{display:flex;justify-content:space-between;align-items:center;margin:-4px 0 23px;font-size:13px;color:#b4bac1}
.login-options label{margin:0;display:flex;align-items:center;gap:8px}
.login-options input{width:17px;height:17px;margin:0;accent-color:#ed1c24}
.login-options a{color:#ff2b32;text-decoration:none}
.login-divider{display:flex;align-items:center;gap:15px;color:#8f969f;margin:30px 0 17px}
.login-divider:before,.login-divider:after{content:"";height:1px;background:#353a40;flex:1}
.twofa{margin-top:0;padding:20px;border-radius:11px;background:#101419}
.twofa .twofa-icon{color:#d8dde2;font-size:25px;display:block;margin-bottom:5px}
.login-foot{margin-top:42px}
.trust{bottom:26px}
@media(max-width:1050px){.login-page{grid-template-columns:1fr}.login-left{display:none}.login-right{min-height:100vh}}

/* v1.3 - definitive HD logo asset */
.login-left .logo{
  display:block;
  width:620px;
  max-width:92%;
  height:auto;
  max-height:190px;
  object-fit:contain;
  object-position:left center;
}

/* v1.4 definitive brand mark: single crisp vector logo */
.login-left .logo{
  display:block;
  width:min(620px,92%);
  height:auto;
  max-height:150px;
  object-fit:contain;
  object-position:left center;
  filter:drop-shadow(0 3px 14px rgba(0,0,0,.45));
}

/* v1.5 - ORIGINAL USER LOGO, complete and unmodified */
.login-left .logo{
  display:block;
  width:min(650px,92%);
  height:auto;
  max-height:none;
  object-fit:contain;
  object-position:left center;
  filter:drop-shadow(0 3px 14px rgba(0,0,0,.42));
}

/* v1.6 - original H mark only; no wordmark, no duplicate text */
.brand-lockup{display:block;position:relative;z-index:2;margin:0 0 78px}
.login-left .logo{
  display:block;
  width:205px;
  height:auto;
  max-width:205px;
  object-fit:contain;
  filter:drop-shadow(0 4px 18px rgba(0,0,0,.5));
}
.brand-lockup span{display:none!important}
.login-left h1{margin-top:0}

/* v2.0 QR readability: integer-module canvas rendering */
.users-actions{display:flex;gap:6px;flex-wrap:wrap}.users-actions .btn{padding:7px 9px;font-size:11px}