*{box-sizing:border-box}
:root{
  --navy:#111827;
  --navy-2:#172033;
  --blue:#3157d5;
  --blue-dark:#2647b5;
  --blue-soft:#eef3ff;
  --bg:#f6f8fc;
  --white:#ffffff;
  --text:#182033;
  --muted:#778096;
  --border:#e5e9f0;
  --green:#16845b;
  --green-soft:#ecf9f3;
  --red:#c83b4a;
  --red-soft:#fff1f2;
  --shadow:0 14px 40px rgba(21,34,61,.06);
}

html,body{margin:0;min-height:100%;font-family:"DM Sans",Arial,sans-serif;color:var(--text);background:var(--bg)}
button,input,select{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.overline{font-size:10px;letter-spacing:1.7px;font-weight:700;color:#8b95a9}
.blue-overline{color:#5a70c8}
.green-overline{color:var(--green)}

.auth-page{min-height:100vh;background:#fff}
.auth-shell{min-height:100vh;display:grid;grid-template-columns:46% 54%}
.auth-visual{position:relative;overflow:hidden;background:linear-gradient(145deg,#111827 0%,#1b2740 55%,#273e72 100%);color:#fff;padding:44px 7vw;display:flex;flex-direction:column}
.auth-visual:after{content:"";position:absolute;width:480px;height:480px;border:1px solid rgba(255,255,255,.08);border-radius:50%;right:-170px;bottom:-180px;box-shadow:0 0 0 90px rgba(255,255,255,.025),0 0 0 180px rgba(255,255,255,.018)}
.visual-brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:18px;position:relative;z-index:1}
.brand-mark{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#5d7df1,#3157d5);display:grid;place-items:center;color:#fff;font-weight:700;box-shadow:0 8px 22px rgba(49,87,213,.35)}
.visual-content{max-width:520px;margin:auto 0;position:relative;z-index:1}
.visual-content .overline{color:#9fb1e9}
.visual-content h1{font-size:clamp(38px,4vw,62px);line-height:1.05;letter-spacing:-2.2px;margin:18px 0 22px}
.visual-content p{max-width:500px;color:#b9c3d7;font-size:15px;line-height:1.8;margin:0}
.visual-footer{display:flex;justify-content:space-between;color:#77849d;font-size:11px;position:relative;z-index:1}

.auth-panel{display:grid;place-items:center;padding:40px;background:#fff}
.auth-card{width:min(420px,100%)}
.mobile-brand{display:none}
.auth-heading{margin-bottom:32px}
.auth-heading h2{font-size:32px;letter-spacing:-1px;margin:10px 0 8px}
.auth-heading p{margin:0;color:var(--muted);font-size:14px}
.field{margin-bottom:22px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:9px}
.field-label-row{display:flex;justify-content:space-between}
input,select{width:100%;height:48px;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--text);padding:0 14px;outline:none;transition:.18s}
input::placeholder{color:#a3abba}
input:focus,select:focus{border-color:#6d86df;box-shadow:0 0 0 4px rgba(49,87,213,.09)}
.password-field{position:relative}
.password-field input{padding-right:62px}
.password-field button{position:absolute;right:7px;top:7px;height:34px;border:0;background:transparent;color:var(--blue);font-size:12px;font-weight:600}
.btn{border:0;border-radius:10px;height:48px;padding:0 17px;display:inline-flex;align-items:center;justify-content:center;gap:22px;font-weight:600;font-size:13px;transition:.18s}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 8px 18px rgba(49,87,213,.18)}
.btn-primary:hover{background:var(--blue-dark);transform:translateY(-1px)}
.btn-large{height:52px}
.btn-arrow{font-size:17px;line-height:1}
.full{width:100%}
.btn:disabled{opacity:.62;cursor:wait;transform:none}
.form-message{padding:11px 13px;border-radius:9px;font-size:12px;margin:-4px 0 16px}
.error{color:var(--red);background:var(--red-soft);border:1px solid #ffd3d7}
.auth-note{margin-top:24px;padding-top:20px;border-top:1px solid var(--border);display:flex;justify-content:center;align-items:center;gap:7px;color:#929bad;font-size:11px}
.status-dot{width:6px;height:6px;background:#35a877;border-radius:50%}

.app-page{background:var(--bg)}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:252px;background:var(--navy);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:24px 15px;z-index:30}
.sidebar-top{min-height:0}
.app-brand{display:flex;align-items:center;gap:11px;padding:0 10px 31px}
.app-brand strong{display:block;font-size:15px}
.app-brand span:last-child{display:block;color:#77849a;font-size:10px;margin-top:3px}
.nav-label{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:#657188;font-weight:700;padding:0 12px 9px}
.nav-space{margin-top:25px}
.nav{display:flex;flex-direction:column}
.nav-link{height:43px;display:flex;align-items:center;gap:11px;border-radius:9px;padding:0 12px;color:#9ba6ba;text-decoration:none;font-size:12.5px;margin:2px 0;transition:.16s}
.nav-link:hover{background:#1a2539;color:#fff}
.nav-link.active{background:#2a3d73;color:#fff;box-shadow:inset 3px 0 0 #6c86ed}
.nav-icon{width:20px;text-align:center;font-size:16px;color:#8793aa}
.nav-link.active .nav-icon{color:#fff}
.sidebar-bottom{border-top:1px solid #252f42;padding-top:17px}
.user-mini{display:flex;align-items:center;gap:10px;padding:4px 6px}
.avatar{width:35px;height:35px;border-radius:9px;background:#2f447c;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700}
.user-mini-info{min-width:0;flex:1}
.user-mini-info strong{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-mini-info span{display:block;color:#738097;font-size:9px;margin-top:3px}
.icon-button{border:0;background:transparent;color:#78849a;font-size:18px;padding:6px}
.icon-button:hover{color:#fff}

.main-content{margin-left:252px;min-height:100vh}
.topbar{height:72px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 38px;position:sticky;top:0;z-index:20}
.breadcrumb{display:flex;align-items:center;gap:10px;font-size:11px;color:#9aa3b3}
.breadcrumb b{font-weight:400;color:#c5cad4}
.breadcrumb strong{font-weight:600;color:#35405a}
.topbar-actions{display:flex;align-items:center;gap:20px}
.top-icon{width:34px;height:34px;border:0;background:transparent;color:#657188;font-size:20px;position:relative}
.notification-dot{position:absolute;width:5px;height:5px;background:#d94b5b;border-radius:50%;top:7px;right:8px}
.top-profile{display:flex;align-items:center;gap:8px;font-size:11px;color:#414b60}
.small-avatar{width:31px;height:31px;border-radius:8px}
.chevron{color:#9ba4b5;font-size:15px}
.mobile-menu{display:none}

.page-content{max-width:1120px;margin:0 auto;padding:42px 38px 60px}
.page-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:28px}
.page-heading h1{font-size:29px;letter-spacing:-.8px;margin:8px 0 6px}
.page-heading p{margin:0;color:var(--muted);font-size:13px}
.activation-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,.85fr);gap:20px}
.panel,.info-panel,.result-panel{background:#fff;border:1px solid var(--border);border-radius:15px;box-shadow:var(--shadow)}
.generate-panel{padding:29px 30px}
.panel-header{display:flex;gap:15px;padding-bottom:24px;border-bottom:1px solid #edf0f5;margin-bottom:25px}
.panel-icon{width:42px;height:42px;border-radius:11px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;font-size:22px}
.panel-header h2{font-size:17px;margin:1px 0 5px}
.panel-header p{font-size:11.5px;color:var(--muted);margin:0;line-height:1.6}
.field-hint{display:block;color:#9aa3b3;font-size:10px;margin-top:7px}
.select-wrap{position:relative}
select{appearance:none;padding-right:38px}
.select-wrap:after{content:"⌄";position:absolute;right:14px;top:13px;color:#8c96a8;pointer-events:none}
.info-panel{padding:27px 25px}
.info-top{padding-bottom:17px;border-bottom:1px solid #edf0f5}
.info-top h3{font-size:16px;margin:8px 0 0}
.step{display:flex;gap:13px;padding:19px 0;border-bottom:1px solid #edf0f5}
.step:last-child{border-bottom:0;padding-bottom:0}
.step-number{font-size:10px;font-weight:700;color:#8c96a8;padding-top:2px}
.step strong{display:block;font-size:12px}
.step p{font-size:10.5px;line-height:1.55;color:var(--muted);margin:5px 0 0}
.result-panel{margin-top:20px;padding:22px 25px;display:flex;align-items:center;gap:15px;border-color:#cde9dc;background:#fbfefc}
.result-check{width:40px;height:40px;border-radius:50%;background:var(--green-soft);color:var(--green);display:grid;place-items:center;font-weight:700}
.result-details{flex:1}
.result-details h2{font-size:15px;margin:5px 0 10px}
.result-details p{font-size:10px;color:#8c96a8;margin:0 0 7px}
.key-row{display:flex;align-items:center;gap:9px}
.key-row code{background:#fff;border:1px dashed #9ed2b9;border-radius:8px;padding:10px 12px;font-size:13px;font-weight:700;letter-spacing:1px;color:#1b5f43}
.copy-button{height:37px;border:1px solid #c9dfd3;background:#fff;border-radius:8px;color:#25724f;font-size:11px;font-weight:600;padding:0 13px}
.copy-button:hover{background:#f2fbf6}
.toast{position:fixed;right:24px;bottom:24px;background:#182033;color:#fff;border-radius:9px;padding:11px 15px;font-size:11px;box-shadow:0 12px 30px rgba(15,23,42,.2);z-index:100}

@media(max-width:900px){
  .auth-shell{grid-template-columns:1fr}
  .auth-visual{display:none}
  .mobile-brand{display:flex;align-items:center;gap:10px;margin-bottom:45px}
  .activation-layout{grid-template-columns:1fr}
  .info-panel{display:none}
}
@media(max-width:760px){
  .sidebar{transform:translateX(-100%);transition:transform .22s ease}
  .sidebar.open{transform:translateX(0)}
  .mobile-overlay{display:none;position:fixed;inset:0;background:rgba(10,18,32,.35);z-index:25}
  .mobile-overlay.show{display:block}
  .main-content{margin-left:0}
  .topbar{padding:0 20px}
  .mobile-menu{display:block;border:0;background:transparent;color:#39445a;font-size:20px;margin-right:13px}
  .breadcrumb{flex:1}
  .top-profile span:not(.chevron){display:none}
  .page-content{padding:28px 20px 45px}
}
@media(max-width:520px){
  .auth-panel{padding:25px 20px}
  .auth-card{width:100%}
  .auth-heading h2{font-size:28px}
  .page-heading h1{font-size:25px}
  .generate-panel{padding:22px}
  .result-panel{align-items:flex-start;flex-wrap:wrap}
  .result-details{min-width:calc(100% - 55px)}
  .key-row{flex-wrap:wrap}
}