:root{--v950:#0d0a1c;--v900:#17112f;--v850:#211844;--v700:#6d4aff;--v600:#8b5cf6;--v400:#b9a4ff;--ink:#f8f7ff;--muted:#a8a1c2;--line:rgba(185,164,255,.16);--shadow:0 20px 55px rgba(5,2,18,.28)}
body:not(.login-page-violet){background:#f4f2fb;color:#27213d}
/* Animated login background and layout */
body.login-page-violet{min-height:100vh;overflow-x:hidden;color:var(--ink);background:#0d091b;font-family:"Montserrat","Poppins",sans-serif}
body.login-page-violet:before,body.login-page-violet:after{content:"";position:fixed;z-index:-1;width:38rem;height:38rem;border-radius:50%;filter:blur(18px);opacity:.34;pointer-events:none;animation:violetFloat 14s ease-in-out infinite alternate}
body.login-page-violet:before{top:-15rem;left:-12rem;background:#6938ef}body.login-page-violet:after{right:-14rem;bottom:-18rem;background:#ec4899;animation-delay:-5s}
body.login-page-violet .backstretch{z-index:-3!important;opacity:.48;filter:saturate(.72) hue-rotate(215deg) brightness(.62)}
body.login-page-violet .backstretch:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(13,9,27,.88),rgba(35,18,74,.78) 48%,rgba(10,7,24,.9));pointer-events:none}
.login-shell{position:relative;min-height:100vh;padding:3rem 1.5rem;display:flex;align-items:center}.login-shell:before{content:"";position:fixed;inset:0;z-index:-2;background:linear-gradient(135deg,rgba(13,9,27,.88),rgba(26,16,55,.76)),radial-gradient(circle at 70% 20%,rgba(139,92,246,.24),transparent 38%);pointer-events:none}
.login-grid{width:min(1120px,100%);margin:0 auto;display:grid;grid-template-columns:1fr .92fr;gap:2rem;align-items:center}.login-intro{padding:1.5rem;animation:riseIn .8s ease both}.login-brand{display:flex;align-items:center;gap:.9rem;margin-bottom:2.2rem}.login-brand img{width:58px;height:58px;object-fit:contain;padding:.65rem;border-radius:18px;background:linear-gradient(145deg,rgba(139,92,246,.35),rgba(236,72,153,.24));border:1px solid rgba(255,255,255,.15);box-shadow:0 12px 30px rgba(0,0,0,.24)}.login-brand-name{font-size:1.05rem;font-weight:700;color:#fff}.login-brand-meta{display:block;margin-top:.2rem;color:var(--muted);font-size:.72rem}.login-kicker{display:inline-flex;align-items:center;gap:.5rem;color:#c4b5fd;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em}.login-kicker:before{content:"";width:26px;height:2px;background:linear-gradient(90deg,#a78bfa,#ec4899)}.login-heading{margin:.9rem 0 1rem;max-width:560px;font-size:clamp(2.4rem,5vw,4.5rem);line-height:1.04;letter-spacing:-.055em;font-weight:800;color:#fff}.login-heading span{background:linear-gradient(100deg,#c4b5fd 12%,#a78bfa 52%,#f0abfc 90%);-webkit-background-clip:text;background-clip:text;color:transparent}.login-copy{max-width:490px;color:#b6afd0;font-size:.98rem;line-height:1.8}.login-pills{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}.login-pill{display:inline-flex;align-items:center;gap:.45rem;padding:.62rem .82rem;border:1px solid var(--line);border-radius:999px;color:#d8d0f5;background:rgba(255,255,255,.045);font-size:.72rem}.login-pill i{color:#a78bfa}
.login-card{position:relative;overflow:hidden;padding:clamp(1.45rem,4vw,2.6rem);border:1px solid rgba(196,181,253,.21);border-radius:28px;background:linear-gradient(145deg,rgba(39,26,78,.91),rgba(19,14,40,.86));box-shadow:0 25px 80px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.08);animation:riseIn .8s .12s ease both}.login-card:before{content:"";position:absolute;width:180px;height:180px;right:-90px;top:-90px;border-radius:50%;background:#8b5cf6;filter:blur(35px);opacity:.28}.login-card-head{position:relative;margin-bottom:1.7rem}.login-card-head h2{margin:0 0 .45rem;color:#fff;font-size:1.55rem;font-weight:750}.login-card-head p{margin:0;color:var(--muted);font-size:.82rem}.login-page-violet .login-box{width:auto;max-width:100%}.login-page-violet .login-logo,.login-page-violet>.container>.info-box{display:none}.login-page-violet .form-signin{max-width:none;margin:0;padding:0;background:transparent;box-shadow:none}.login-page-violet .container-fluid.h-100,.login-page-violet .row.h-100{height:auto!important}.login-page-violet .login-box .card{background:transparent;border:0;margin:0}.login-page-violet .login-box .card-body{padding:0}.login-page-violet .login-box .card-body>form{position:relative;padding:2.6rem;margin:2.6rem}.login-page-violet .login-box .card-body>form:before{content:"";position:absolute;inset:-2.6rem;z-index:-1;border:1px solid rgba(196,181,253,.21);border-radius:28px;background:linear-gradient(145deg,rgba(39,26,78,.91),rgba(19,14,40,.86));box-shadow:0 25px 80px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.08)}.login-page-violet .login-box .card-body>form:after{content:"Masuk ke ruang ujian Anda";display:block;position:absolute;left:2.6rem;top:-1rem;color:#bdb4d7;font-size:.8rem}.login-page-violet .login-box-msg{padding:0;text-align:left;color:#fff;font-size:1.55rem;font-weight:750;text-transform:none}.login-page-violet #infoMessage{min-height:1.7rem;border-radius:10px}.login-page-violet #infoMessage:not(:empty){padding:.65rem .8rem;background:rgba(255,255,255,.06)}.login-page-violet .input-group{border-radius:14px;overflow:hidden;margin-bottom:1rem!important}.login-page-violet .input-group-prepend,.login-page-violet .input-group-append{display:flex}.login-page-violet .input-group-text{height:52px;min-width:48px;justify-content:center;border:0;color:#a78bfa;background:rgba(255,255,255,.06)}.login-page-violet .input-group-prepend .input-group-text{border-radius:14px 0 0 14px}.login-page-violet .input-group-append .input-group-text{border-radius:0 14px 14px 0;cursor:pointer}.login-page-violet input.form-control{height:52px;border:0;border-radius:0;color:#fff;background:rgba(255,255,255,.06);box-shadow:none}.login-page-violet input.form-control::placeholder{color:#8d85aa}.login-page-violet .input-group:focus-within{box-shadow:0 0 0 2px rgba(167,139,250,.32)}.login-page-violet .input-group:focus-within .input-group-text,.login-page-violet .input-group:focus-within input.form-control{background:rgba(139,92,246,.13)}.login-page-violet .row>.col-8{display:none}.login-page-violet .row>.col-4{flex:0 0 100%;max-width:100%;padding:0}.login-page-violet #submit{float:none;width:100%;height:52px;border:0;border-radius:14px;color:#fff;background:linear-gradient(110deg,#6d4aff,#a855f7 52%,#ec4899);box-shadow:0 12px 28px rgba(109,74,255,.32);font-weight:700;transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}.login-page-violet #submit:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 16px 34px rgba(139,92,246,.42)}.login-page-violet .help-block{color:#fda4af;font-size:.7rem}.login-page-violet .has-error input{box-shadow:0 0 0 2px rgba(248,113,113,.45)!important}
/* Internal screens */
body:not(.login-page-violet) .main-sidebar{background:linear-gradient(180deg,#17112f 0%,#24184a 100%);box-shadow:12px 0 35px rgba(37,23,76,.14)}body:not(.login-page-violet) .brand-link{min-height:64px;display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.1);background:transparent!important;color:#fff!important}body:not(.login-page-violet) .brand-link .brand-image{opacity:1!important;border-radius:10px}body:not(.login-page-violet) .brand-text{color:#fff;font-weight:700!important}body:not(.login-page-violet) .main-sidebar .user-panel{border-bottom:1px solid rgba(255,255,255,.1)!important;padding-bottom:1rem}body:not(.login-page-violet) .main-sidebar .user-panel a,body:not(.login-page-violet) .main-sidebar .user-panel small{color:#e6dfff!important}body:not(.login-page-violet) .nav-sidebar .nav-header{color:#a78bfa;font-size:.67rem;letter-spacing:.12em}body:not(.login-page-violet) .nav-sidebar .nav-link{margin:2px 10px;border-radius:10px;color:#bcb4d5;transition:background .2s ease,color .2s ease,transform .2s ease}body:not(.login-page-violet) .nav-sidebar .nav-link:hover{color:#fff;background:rgba(167,139,250,.13);transform:translateX(2px)}body:not(.login-page-violet) .nav-sidebar .nav-link.active{color:#fff;background:linear-gradient(100deg,rgba(109,74,255,.94),rgba(168,85,247,.75));box-shadow:0 9px 20px rgba(79,46,173,.28)}body:not(.login-page-violet) .nav-sidebar .nav-icon{color:#a78bfa}body:not(.login-page-violet) .nav-sidebar .nav-link.active .nav-icon{color:#fff}body:not(.login-page-violet) .main-header.navbar{height:64px;border-bottom:1px solid #e7e1f4;background:rgba(255,255,255,.88)!important;backdrop-filter:blur(14px)}body:not(.login-page-violet) .main-header .nav-link{color:#4b4266!important}body:not(.login-page-violet) .content-wrapper{background:linear-gradient(135deg,#f7f5fc 0%,#f0ecfa 100%)}body:not(.login-page-violet) .content-header h1{color:#2d2447;font-weight:750}body:not(.login-page-violet) .card,body:not(.login-page-violet) .info-box,body:not(.login-page-violet) .small-box{border:1px solid #e9e3f5;border-radius:16px;box-shadow:0 12px 35px rgba(45,32,84,.08)}body:not(.login-page-violet) .card{overflow:hidden}body:not(.login-page-violet) .card-header{border-bottom:1px solid #eee9f7;background:rgba(255,255,255,.68)}body:not(.login-page-violet) .card-title{font-weight:700;color:#332752}body:not(.login-page-violet) .table thead th{border-top:0;border-bottom:1px solid #e9e3f5;background:#faf9fe;color:#62577e;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em}body:not(.login-page-violet) .table tbody tr:hover{background:#faf8ff}body:not(.login-page-violet) .form-control,body:not(.login-page-violet) .custom-select{border-color:#e4ddf1;border-radius:10px}body:not(.login-page-violet) .form-control:focus{border-color:#9b7bff;box-shadow:0 0 0 .2rem rgba(139,92,246,.14)}body:not(.login-page-violet) .btn-primary,body:not(.login-page-violet) .bg-primary{border:0;background:linear-gradient(110deg,#6d4aff,#8b5cf6)!important;box-shadow:0 8px 16px rgba(109,74,255,.2)}body:not(.login-page-violet) .modal-content{border:1px solid #e8e0f5;border-radius:16px;box-shadow:var(--shadow)}body:not(.login-page-violet) .modal-header{background:#faf9fe;border-bottom-color:#ece7f6}body:not(.login-page-violet) .sticky{background:linear-gradient(115deg,#1b1237,#43218a)!important;opacity:1}body:not(.login-page-violet) #timer{color:#e879f9}
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes violetFloat{from{transform:translate3d(-2%,-2%,0) scale(1)}to{transform:translate3d(3%,4%,0) scale(1.08)}}
@media(max-width:860px){.login-grid{grid-template-columns:1fr;max-width:620px}.login-intro{padding:.5rem;text-align:center}.login-brand{justify-content:center}.login-pills{justify-content:center}.login-copy{margin-inline:auto}.login-heading{font-size:2.65rem}}@media(max-width:480px){.login-shell{padding:1.2rem .85rem}.login-intro{display:none}.login-page-violet .login-box .card-body>form{padding:2rem 1.35rem;margin:2rem 1rem}.login-page-violet .login-box .card-body>form:after{left:1.35rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media print{body:not(.login-page-violet) .main-sidebar,body:not(.login-page-violet) .main-header{display:none!important}body:not(.login-page-violet) .content-wrapper{margin-left:0!important}}

/* Dark violet page backgrounds for authenticated admin, teacher, student, and exam screens. */
@media screen {
  body:not(.login-page-violet) { background: #100b24 !important; }
  body:not(.login-page-violet) .content-wrapper,
  body:not(.login-page-violet) .content-wrapper.bg-white,
  body:not(.login-page-violet) .content-wrapper.bg-light {
    background: radial-gradient(circle at 82% 8%, rgba(109,74,255,.22), transparent 28%), linear-gradient(135deg, #17112f 0%, #24184a 52%, #100b24 100%) !important;
    color: #eeeaff;
  }
  body:not(.login-page-violet) .content-header h1,
  body:not(.login-page-violet) .content-header .breadcrumb,
  body:not(.login-page-violet) .content-header .breadcrumb a { color: #eeeaff !important; }
  body:not(.login-page-violet) .content-header small { color: #bdb4d7 !important; }
  body:not(.login-page-violet) .content-wrapper > .content,
  body:not(.login-page-violet) .content-wrapper > section.content { background: transparent; }
  body.layout-top-nav:not(.login-page-violet) .main-header { background: rgba(23,17,47,.92) !important; border-bottom: 1px solid rgba(196,181,253,.16) !important; }
  body.layout-top-nav:not(.login-page-violet) .main-header .nav-link,
  body.layout-top-nav:not(.login-page-violet) .main-header .text-white { color: #f8f7ff !important; }
  body.layout-top-nav:not(.login-page-violet) .navbar-green { background: linear-gradient(100deg, #24184a, #54259a) !important; }
  body.layout-top-nav:not(.login-page-violet) .content-wrapper { min-height: calc(100vh - 64px); }
  body:not(.login-page-violet) .main-footer { background: #100b24 !important; border-top-color: rgba(196,181,253,.14) !important; color: #aaa0c5 !important; }
  body:not(.login-page-violet) .main-footer a { color: #c4b5fd; }
  body:not(.login-page-violet) .card,
  body:not(.login-page-violet) .info-box,
  body:not(.login-page-violet) .small-box { background-color: rgba(29,22,57,.92); color: #eeeaff; border-color: rgba(196,181,253,.16); }
  body:not(.login-page-violet) .card-header,
  body:not(.login-page-violet) .card-footer { background: rgba(255,255,255,.045); border-color: rgba(196,181,253,.14); }
  body:not(.login-page-violet) .card-title,
  body:not(.login-page-violet) .card-body label,
  body:not(.login-page-violet) .info-box-content { color: #f1edff; }
  body:not(.login-page-violet) .table { color: #eeeaff; }
  body:not(.login-page-violet) .table thead th { background: rgba(255,255,255,.07); color: #d6ccf2; border-color: rgba(196,181,253,.14); }
  body:not(.login-page-violet) .table td { border-color: rgba(196,181,253,.1); }
  body:not(.login-page-violet) .table tbody tr:hover { background: rgba(139,92,246,.12); }
  body:not(.login-page-violet) .form-control,
  body:not(.login-page-violet) .custom-select,
  body:not(.login-page-violet) textarea,
  body:not(.login-page-violet) select { color: #f8f7ff; background-color: rgba(255,255,255,.08); border-color: rgba(196,181,253,.2); }
  body:not(.login-page-violet) .form-control::placeholder { color: #aaa0c5; }
  body:not(.login-page-violet) .input-group-text { color: #c4b5fd; background: rgba(255,255,255,.08); border-color: rgba(196,181,253,.18); }
  body:not(.login-page-violet) .dropdown-menu { color: #eeeaff; background: #211844; border-color: rgba(196,181,253,.18); }
  body:not(.login-page-violet) .dropdown-item { color: #eeeaff; }
  body:not(.login-page-violet) .dropdown-item:hover { color: #fff; background: rgba(139,92,246,.22); }
  body:not(.login-page-violet) .modal-content { color: #eeeaff; background: #1d1639; }
  body:not(.login-page-violet) .modal-header { background: #211844; }
  body.layout-top-nav:not(.login-page-violet) .content-wrapper .card { background: rgba(29,22,57,.95); }
  body.layout-top-nav:not(.login-page-violet) .konten-soal-jawab,
  body.layout-top-nav:not(.login-page-violet) #konten-soal,
  body.layout-top-nav:not(.login-page-violet) #konten-jawaban { color: #f3efff; }
  body.layout-top-nav:not(.login-page-violet) .konten-soal-jawab > div[style*="border"] { border-color: rgba(196,181,253,.2) !important; background: rgba(255,255,255,.035); }
}
@media print {
  body:not(.login-page-violet) .content-wrapper,
  body:not(.login-page-violet) .content-wrapper.bg-white { background: #fff !important; color: #000 !important; }
}

/* Glassmorphism pass: translucent surfaces while preserving the existing violet palette. */
@media screen {
  body:not(.login-page-violet) { background: #100b24 !important; }
  body:not(.login-page-violet) .content-wrapper,
  body:not(.login-page-violet) .content-wrapper.bg-white,
  body:not(.login-page-violet) .content-wrapper.bg-light {
    background: radial-gradient(circle at 82% 8%, rgba(109,74,255,.22), transparent 28%), linear-gradient(135deg, rgba(23,17,47,.84) 0%, rgba(36,24,74,.74) 52%, rgba(16,11,36,.88) 100%) !important;
    backdrop-filter: blur(18px);
  }
  body:not(.login-page-violet) .main-sidebar {
    background: linear-gradient(180deg, rgba(23,17,47,.84), rgba(36,24,74,.72)) !important;
    backdrop-filter: blur(18px);
  }
  body:not(.login-page-violet) .main-header.navbar,
  body.layout-top-nav:not(.login-page-violet) .main-header,
  body.layout-top-nav:not(.login-page-violet) .navbar-green {
    background: linear-gradient(100deg, rgba(36,24,74,.84), rgba(84,37,154,.68)) !important;
    backdrop-filter: blur(18px);
  }
  body:not(.login-page-violet) .card,
  body:not(.login-page-violet) .info-box,
  body:not(.login-page-violet) .small-box,
  body.layout-top-nav:not(.login-page-violet) .content-wrapper .card {
    background: linear-gradient(145deg, rgba(42,31,78,.72), rgba(24,17,50,.64)) !important;
    border-color: rgba(196,181,253,.2) !important;
    backdrop-filter: blur(18px);
  }
  body:not(.login-page-violet) .card-header,
  body:not(.login-page-violet) .card-footer,
  body:not(.login-page-violet) .modal-header {
    background: rgba(255,255,255,.055) !important;
    border-color: rgba(196,181,253,.15) !important;
  }
  body:not(.login-page-violet) .table thead th { background: rgba(255,255,255,.07) !important; }
  body:not(.login-page-violet) .form-control,
  body:not(.login-page-violet) .custom-select,
  body:not(.login-page-violet) textarea,
  body:not(.login-page-violet) select,
  body:not(.login-page-violet) .input-group-text {
    background: rgba(255,255,255,.07) !important;
    backdrop-filter: blur(10px);
  }
  body:not(.login-page-violet) .dropdown-menu,
  body:not(.login-page-violet) .modal-content {
    background: rgba(33,24,68,.78) !important;
    backdrop-filter: blur(18px);
  }
  body:not(.login-page-violet) .main-footer {
    background: rgba(16,11,36,.72) !important;
    backdrop-filter: blur(14px);
  }
  body.layout-top-nav:not(.login-page-violet) .konten-soal-jawab > div[style*="border"] {
    background: rgba(255,255,255,.045) !important;
    backdrop-filter: blur(12px);
  }
  body:not(.login-page-violet) .nav-sidebar .nav-link.active {
    background: linear-gradient(100deg, rgba(109,74,255,.75), rgba(168,85,247,.58)) !important;
    backdrop-filter: blur(10px);
  }
  body:not(.login-page-violet) .btn-primary,
  body:not(.login-page-violet) .bg-primary {
    background: linear-gradient(110deg, rgba(109,74,255,.84), rgba(139,92,246,.72)) !important;
  }
}