:root {
   --brand: #16a34a;
   --brand2: #10b981;
   --ink: #0f172a;
   --muted: #64748b;

   --bgA: #041f1b;
   --bgB: #063b32;
   --bgC: #0b5a4b;

   --card: rgba(255, 255, 255, .86);
   --stroke: rgba(15, 23, 42, .10);
   --shadow: 0 26px 80px rgba(0, 0, 0, .38);
   --radius: 24px;
 }

 * {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   box-sizing: border-box;
 }

 body {
   min-height: 100vh;
   margin: 0;
   color: #fff;
   overflow-x: hidden;
   background:
     radial-gradient(900px 600px at 10% 8%, rgba(16, 185, 129, .14), transparent 60%),
     radial-gradient(900px 600px at 92% 18%, rgba(253, 230, 138, .10), transparent 55%),
     linear-gradient(135deg, var(--bgA) 0%, var(--bgB) 45%, var(--bgC) 120%);
 }

 .auth-wrap {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 30px 16px;
 }

 .auth-shell {
   width: 100%;
   max-width: 1240px;
   border-radius: var(--radius);
   overflow: hidden;
   box-shadow: var(--shadow);
   border: 1px solid rgba(255, 255, 255, .14);
   background: rgba(255, 255, 255, .06);
   backdrop-filter: blur(16px);
 }

 .auth-grid {
   display: grid;
   grid-template-columns: 1.15fr .85fr;
 }

 @media (max-width: 991px) {
   .auth-grid {
     grid-template-columns: 1fr;
   }
 }

 .left {
   position: relative;
   padding: 54px 54px;
   background: linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .04) 100%);
 }

 .right {
   padding: 44px 40px;
   background: rgba(255, 255, 255, .07);
   border-left: 1px solid rgba(255, 255, 255, .12);
 }

 @media (max-width: 991px) {
   .right {
     border-left: none;
     border-top: 1px solid rgba(255, 255, 255, .12);
   }

   .left {
     padding: 44px 22px;
   }

   .right {
     padding: 34px 18px;
   }
 }

 .brand {
   display: flex;
   align-items: center;
   gap: 12px;
   font-weight: 700;
   letter-spacing: .3px;
   font-size: 1.08rem;
 }

 .brand i {
   color: #d9f99d;
 }

 .brand b {
   color: #d1fae5;
 }

 .headline {
   margin-top: 18px;
   font-size: 2.75rem;
   line-height: 1.08;
   font-weight: 800;
 }

 @media (max-width: 991px) {
   .headline {
     font-size: 2.15rem;
   }
 }

 .sub {
   margin-top: 14px;
   color: rgba(255, 255, 255, .90);
   font-size: 1.12rem;
   max-width: 680px;
   font-weight: 400;
 }

 .list {
   margin-top: 18px;
   display: grid;
   gap: 12px;
   max-width: 680px;
 }

 .li {
   display: flex;
   gap: 12px;
   align-items: flex-start;
   background: rgba(255, 255, 255, .08);
   border: 1px solid rgba(255, 255, 255, .12);
   border-radius: 16px;
   padding: 14px 16px;
   transition: box-shadow 0.3s ease;
 }

 .li:hover {
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
 }

 .li i {
   width: 40px;
   height: 40px;
   border-radius: 12px;
   display: grid;
   place-items: center;
   background: rgba(16, 185, 129, .22);
   color: #d1fae5;
   flex: 0 0 auto;
   font-size: 1.05rem;
 }

 .li b {
   display: block;
   font-size: 1.02rem;
   font-weight: 600;
 }

 .li p {
   margin: 2px 0 0;
   color: rgba(255, 255, 255, .88);
   font-size: 1.02rem;
   font-weight: 400;
 }

 .mini-badges {
   margin-top: 16px;
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
 }

 .mini-badges span {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: .55rem .8rem;
   border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, .14);
   background: rgba(0, 0, 0, .10);
   font-size: 1.02rem;
   color: rgba(255, 255, 255, .92);
   font-weight: 500;
 }

 .panel {
   background: var(--card);
   border: 1px solid var(--stroke);
   border-radius: 20px;
   padding: 26px;
   color: var(--ink);
 }

 .panel h3 {
   margin: 0 0 4px;
   font-weight: 700;
   font-size: 1.5rem;
 }

 .muted {
   color: var(--muted);
   font-size: 1.05rem;
 }

 .logo-badge {
   width: 70px;
   height: auto;
   border-radius: 16px;
   background: #fff;
   padding: 8px;
   border: 1px solid rgba(2, 6, 23, .10);
   box-shadow: 0 10px 28px rgba(2, 6, 23, .12);
 }

 .choice {
   margin-top: 14px;
   display: grid;
   gap: 12px;
 }

 .choice a {
   text-decoration: none;
   color: inherit;
 }

 .choice-card {
   background: rgba(255, 255, 255, .92);
   border: 1px solid rgba(2, 6, 23, .10);
   border-radius: 18px;
   padding: 16px 16px;
   display: flex;
   gap: 14px;
   align-items: flex-start;
   transition: .15s ease;
 }

 .choice-card:hover {
   transform: translateY(-1px);
   box-shadow: 0 12px 28px rgba(2, 6, 23, .14);
 }

 .choice-ic {
   width: 50px;
   height: 50px;
   border-radius: 16px;
   display: grid;
   place-items: center;
   background: rgba(16, 185, 129, .16);
   color: #065f46;
   border: 1px solid rgba(16, 185, 129, .22);
   flex: 0 0 auto;
   font-size: 1.2rem;
   transition: all 0.3s ease;
 }

 .choice-card:hover .choice-ic {
   background: rgba(16, 185, 129, .30);
   color: #047857;
   transform: rotate(45deg);
 }

 .choice-card h4 {
   margin: 0;
   font-weight: 700;
   font-size: 1.12rem;
 }

 .choice-card p {
   margin: 3px 0 0;
   color: var(--muted);
   font-size: 1.02rem;
 }

 .btn-soft {
   background: #fff;
   border: 1px solid rgba(2, 6, 23, .10);
   color: #0f172a;
   border-radius: 14px;
   padding: .82rem 1rem;
   font-weight: 700;
   font-size: 1.02rem;
 }

 .btn-soft:hover {
   background: #f8fafc;
 }

 .btn-brand {
   background: linear-gradient(135deg, #0c5a4b, #10b981);
   border: none;
   border-radius: 14px;
   padding: .86rem 1rem;
   font-weight: 700;
   color: #fff;
   font-size: 1.02rem;
 }

 .btn-brand:hover {
   filter: brightness(.98);
 }

 .btn-kembali {
   width: 35%;
 }

 .welcome-section {
   margin-top: 18px;
 }

 .features-section {
   margin: 24px 0;
 }

 .orb {
   position: absolute;
   inset: auto auto -180px -180px;
   width: 380px;
   height: 380px;
   border-radius: 50%;
   background:
     radial-gradient(circle at 30% 30%, rgba(16, 185, 129, .35), transparent 62%),
     radial-gradient(circle at 70% 70%, rgba(253, 230, 138, .20), transparent 58%);
   opacity: .9;
   pointer-events: none;
 }

 .gridline {
   position: absolute;
   inset: 0;
   background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px);
   background-size: 18px 18px;
   opacity: .18;
   pointer-events: none;
   mask-image: radial-gradient(circle at 30% 30%, #000 0%, transparent 62%);
 }