html,
body {
    height: 100%;
    margin: 0;
    overflow-x: hidden;
}
body {
    margin: 0;
    min-height: 100vh;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none;
    background-color: #2c68ee;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3CradialGradient id='a' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23FAFDFF'/%3E%3Cstop offset='1' stop-color='%232C68EE'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='750' x2='1550' y2='750'%3E%3Cstop offset='0' stop-color='%2393b3f7'/%3E%3Cstop offset='1' stop-color='%232C68EE'/%3E%3C/linearGradient%3E%3Cpath id='s' fill='url(%23b)' d='M1549.2 51.6c-5.4 99.1-20.2 197.6-44.2 293.6c-24.1 96-57.4 189.4-99.3 278.6c-41.9 89.2-92.4 174.1-150.3 253.3c-58 79.2-123.4 152.6-195.1 219c-71.7 66.4-149.6 125.8-232.2 177.2c-82.7 51.4-170.1 94.7-260.7 129.1c-90.6 34.4-184.4 60-279.5 76.3C192.6 1495 96.1 1502 0 1500c96.1-2.1 191.8-13.3 285.4-33.6c93.6-20.2 185-49.5 272.5-87.2c87.6-37.7 171.3-83.8 249.6-137.3c78.4-53.5 151.5-114.5 217.9-181.7c66.5-67.2 126.4-140.7 178.6-218.9c52.3-78.3 96.9-161.4 133-247.9c36.1-86.5 63.8-176.2 82.6-267.6c18.8-91.4 28.6-184.4 29.6-277.4c0.3-27.6 23.2-48.7 50.8-48.4s49.5 21.8 49.2 49.5c0 0.7 0 1.3-0.1 2L1549.2 51.6z'/%3E%3Cg id='g'%3E%3Cuse href='%23s' transform='scale(0.12) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.2) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.25) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(0.3) rotate(-20)'/%3E%3Cuse href='%23s' transform='scale(0.4) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(0.5) rotate(20)'/%3E%3Cuse href='%23s' transform='scale(0.6) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.7) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.835) rotate(-40)'/%3E%3Cuse href='%23s' transform='scale(0.9) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(1.05) rotate(25)'/%3E%3Cuse href='%23s' transform='scale(1.2) rotate(8)'/%3E%3Cuse href='%23s' transform='scale(1.333) rotate(-60)'/%3E%3Cuse href='%23s' transform='scale(1.45) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(1.6) rotate(10)'/%3E%3C/g%3E%3C/defs%3E%3Cg transform='rotate(0 0 0)'%3E%3Cg transform='rotate(0 0 0)'%3E%3Ccircle fill='url(%23a)' r='3000'/%3E%3Cg opacity='0.5'%3E%3Ccircle fill='url(%23a)' r='2000'/%3E%3Ccircle fill='url(%23a)' r='1800'/%3E%3Ccircle fill='url(%23a)' r='1700'/%3E%3Ccircle fill='url(%23a)' r='1651'/%3E%3Ccircle fill='url(%23a)' r='1450'/%3E%3Ccircle fill='url(%23a)' r='1250'/%3E%3Ccircle fill='url(%23a)' r='1175'/%3E%3Ccircle fill='url(%23a)' r='900'/%3E%3Ccircle fill='url(%23a)' r='750'/%3E%3Ccircle fill='url(%23a)' r='500'/%3E%3Ccircle fill='url(%23a)' r='380'/%3E%3Ccircle fill='url(%23a)' r='250'/%3E%3C/g%3E%3Cg transform='rotate(0 0 0)'%3E%3Cuse href='%23g' transform='rotate(10)'/%3E%3Cuse href='%23g' transform='rotate(120)'/%3E%3Cuse href='%23g' transform='rotate(240)'/%3E%3C/g%3E%3Ccircle fill-opacity='0.1' fill='url(%23a)' r='3000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
}
.btn:focus,
.btn:active,
.btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}
#app-shell {
    width: 400px;
    max-width: 100%;
    min-height: calc(100dvh - 30px);
    background: #fff;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    /* background: #fff8e5; */
    background: #ffffed;
    border: 3px solid #2b4865;
    overflow: hidden;
    container-type: size;
}
#app-header {
  padding: .75rem 1rem;
  border-bottom: 2px dotted rgba(0, 0, 0, 0.8);
  text-align: center;
  flex-shrink: 0;
}
#logo {
  width: 120px;
}
#btnFullscreen {
  border: none;
  background: transparent;
  font-size: 20px;
  color: inherit;
  outline: none;
  transition: opacity .2s, transform .2s;
}
#btnFullscreen:focus, #btnFullscreen:active {
  outline: none;
}
#btnFullscreen:hover { opacity: .8; }
#btnFullscreen:active { transform: scale(0.9); }
#app-main {
    flex: 1;
    position: relative;
    overflow-y: auto;
    min-height: 0;
}
.screen {
    height: 100%;
}
.screen-nav {
    display: flex;
    flex-direction: column;
}
.screen-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 15px;
}
.screen-title {
    font-size: 1.125rem;
    font-weight: 600;
}
.screen-footer {
    flex-shrink: 0;
    border-top: 2px dotted rgba(0, 0, 0, 0.8);
    padding: 12px 15px;
}
.screen-content::-webkit-scrollbar {
    width: 6px;
}

.screen-content::-webkit-scrollbar-track {
    background: transparent;
}

.screen-content::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.12);
    border-radius: 8px;
}

.screen-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,.2);
}
.aturan {
  font-size: 1.125rem;
}
.next-btn {
  width: 130px;
  padding: 3px 20px 5px 20px;
  border-radius: 999px;
  line-height: 30px;
  font-weight: bold;
  font-size: 20px;
  display: inline-block;
  background: #1e90ff;
  color: #fff;
  border: 2px solid #2b4865;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    1px 1px 0 #000;
  transition: 0.3s;
}
.next-btn:hover {
  opacity: 0.8;
}
.next-btn:active {
  transform: scale(0.9);
}
.prev-btn {
  line-height: 30px;
  font-size: 30px;
  cursor: pointer;
  transition: 0.3s;
  border-width: 0px;
  background: inherit;
}
.prev-btn:hover { opacity: .8; }
.prev-btn:active { transform: scale(0.9); }
#pilihan-waktu {
  margin: 20px 0;
}
#pilihan-waktu button {
  padding: 7px 20px;
  margin: 2px 0;
  border-radius: 10px;
  font-weight: bold;
  font-size: 18px;
  background: #0fb9b1;
  color: #fff;
  border: 2px solid #2b4865;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    1px 1px 0 #000;
  transition: 0.3s;
}
#hasil-pilihan-waktu button {
  padding: 3px 18px;
  margin: 2px 0;
  border-radius: 10px;
  font-weight: bold;
  font-size: 18px;
  background: #0fb9b1;
  color: #fff;
  border: 2px solid #2b4865;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    1px 1px 0 #000;
  transition: 0.3s;
}
.waktu-dipilih {
  background: #ea8685 !important;
}
#hitung-mundur {
  position: relative;
}
#mundur {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  font-size: 80px;
  font-weight: bold;
}
#tampil-nomor {
  position: relative;
  flex-grow: 1;
  font-weight: bold;
  padding: 0;
  margin: 0px 0px 20px 0;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none;
}
#tampil-nomor p {
  position: absolute;
  margin: 0;
  left: 50%;
  transform: translateX(-50%);
  transition: 0.3s;
}
#tampil-nomor p:nth-of-type(1) {
  top: 0;
  font-size: 25px;
  opacity: 0.5;
}
#tampil-nomor p:nth-of-type(2) {
  top: 33.33%;
  transform: translateX(-50%) translateY(-50%);
  font-size: 65px;
  margin: 0;
}
#tampil-nomor p:nth-of-type(3) {
  top: 66.66%;
  transform: translateX(-50%) translateY(-50%);
  font-size: 65px;
}
#tampil-nomor p:nth-of-type(4) {
  top: 100%;
  font-size: 25px;
  transform: translateX(-50%) translateY(-100%);
  opacity: 0.5;
}
#tampil-nomor p:nth-of-type(5) {
  top: 100%;
  font-size: 25px;
  transform: translateX(-50%);
  opacity: 0;
  z-index: -1;
}
#tampil-nomor div:nth-of-type(1) {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  transition: 0.3s;
}
#tampil-nomor div:nth-of-type(2) {
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translateX(-50%) translateY(-50%);
  opacity: 0;
  transition: 0.3s;
}
#tombol-nomor {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
}
#tombol-nomor div {
  background-color: rgba(255, 255, 255, 0.8);
  border-width: 1px 1px 5px 1px;
  border-style: solid;
  border-color: rgba(47, 54, 64, 1);
  border-radius: 20px;
  padding: 5px 20px;
  font-size: 30px;
  text-align: center;
  font-weight: bold;
  color: #fff;
  background: #ee5253;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    1px 1px 0 #000;
  cursor: pointer;
  transition: 0.3s;
}
#tombol-nomor div:active {
  opacity: 0.8;
  border-width: 1px 1px 3px 1px;
  transform: translateY(2px);
}
#tombol-nomor p {
  text-align: center;
  margin: 0;
  padding: 0;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}
#tombol-nomor p:active {
  transform: scale(80%);
}
#tombol-nomor p i {
  vertical-align: middle;
}
#tombol-kembali {
  opacity: 0.7;
}
#tombol-selesai {
  color: #27ae60;
}
/* #tombol-nomor div:last-child {
  grid-column: 2 / 3;
} */
.tombol-tes {
  padding: 5px 20px;
  border-radius: 999px;
  font-weight: bold;
  border-width: 3px;
  border-style: solid;
}
#tombol-tes-batal {
  border-color: rgba(255, 82, 82, 1);
  background: rgba(255, 82, 82, 0.1);
  color: rgba(255, 82, 82, 1);
}
#tombol-tes-tidak-batal {
  border-color: #3871ee;
  background: rgba(56, 113, 238, 0.1);
  color: #3871ee;
}
#tabel-hasil {
  border: 2px solid #2b4865;
  border-radius: 20px;
  padding: 7px 15px;
}
#tabel-hasil p {
  margin: 0;
}
#hasil-persen-benar {
  font-weight: bold;
  font-size: 50px;
  margin: 0;
  padding: 0;
}
#tombol-ulangi-tes {
  width: 160px;
}
.hasil-poin {
  padding: 3px 7px !important;
  border-radius: 5px;
  font-weight: bold;
  min-width: 20px;
  text-align: right;
}
@container (max-height: 600px) {
    #tombol-nomor {
      padding: 0px 20px;
      gap: 5px 20px;
    }
    #tombol-nomor div {
        font-size: 25px;
        border-radius: 15px;
        padding: 3px 20px;
    }
    #tombol-nomor p {
        font-size: 30px;
        border-radius: 15px;
        padding: 0px;
    }
    #tampil-nomor {
      margin: -10px 0px 10px 0;
    }
    #tampil-nomor p:nth-of-type(1) {
      font-size: 20px;
    }
    #tampil-nomor p:nth-of-type(2) {
      font-size: 40px;
      top: 30%;
      transform: translateX(-50%) translateY(-50%);
    }
    #tampil-nomor p:nth-of-type(3) {
      font-size: 40px;
      top: 68%;
      transform: translateX(-50%) translateY(-50%);
    }
    #tampil-nomor p:nth-of-type(4) {
      font-size: 20px;
    }
}
/* efek flash */
#tombol-nomor div.flash {
  box-shadow: 0 0 10px #000;
  opacity: 0.8;
  transition: 0.2s;
}
/* =========================
   BELAJARBRO DROPDOWN
   DARK GLASS PREMIUM
   ========================= */

#userMenu{
    width:300px;
    padding:8px;

    border-radius:20px;

    background:
        linear-gradient(
            180deg,
            rgba(20,22,28,.82) 0%,
            rgba(12,14,18,.86) 100%
        );

    backdrop-filter:
        blur(10px)
        saturate(140%);

    -webkit-backdrop-filter:
        blur(10px)
        saturate(140%);

    border:1px solid rgba(255,255,255,.06);

    box-shadow:
        0 8px 24px rgba(0,0,0,.18);

    overflow:hidden;
    position:relative;

    animation:fadeIn .15s ease;
}

/* efek kaca */

#userMenu::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.04),
            transparent 25%
        );

    pointer-events:none;
}

/* glow biru halus */

#userMenu::after{
    content:"";

    position:absolute;

    top:-80px;
    right:-80px;

    width:160px;
    height:160px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(44,104,238,.08),
            transparent 70%
        );

    pointer-events:none;
}

/* =========================
   PROFILE
   ========================= */

.menu-profile{
    display:flex;
    align-items:center;
    gap:12px;

    padding:10px;
}

.avatar-wrap{
    position:relative;
    flex-shrink:0;
}

.menu-avatar{
    width:44px;
    height:44px;

    object-fit:cover;
    border-radius:50%;

    border:2px solid rgba(255,255,255,.08);
}

.membership-corner{
    position:absolute;

    width:18px;
    height:18px;

    right:-4px;
    bottom:-4px;

    background:#fff;

    border-radius:50%;

    padding:2px;
}

.menu-user{
    flex:1;
    min-width:0;
}

.menu-name{
    color:#fff;

    font-size:.92rem;
    font-weight:700;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.menu-username{
    color:rgba(255,255,255,.50);

    font-size:.72rem;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* =========================
   DIVIDER
   ========================= */

#userMenu .dropdown-divider{
    margin:.45rem 0;
    border-color:rgba(255,255,255,.05);
}

/* =========================
   GRID MENU
   ========================= */

.menu-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;

    padding:4px;
}

/* =========================
   TILE
   ========================= */

.menu-tile{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:6px;

    min-height:44px;

    text-decoration:none;

    color:#eef2ff;

    font-size:.82rem;

    border-radius:12px;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.05);

    transition:.18s ease;
}

.menu-tile:hover{
    color:#fff;

    background:rgba(255,255,255,.07);

    border-color:rgba(255,255,255,.09);

    transform:translateY(-1px);
}

.menu-tile:active{
    transform:scale(.98);
}

/* =========================
   BROMAX
   ========================= */

.bromax-tile{
    background:
        linear-gradient(
            135deg,
            rgba(255,193,7,.14),
            rgba(255,140,0,.05)
        );

    border:1px solid rgba(255,193,7,.12);
    
}

.bromax-tile img{
    width:16px;
    height:16px;
}

.bromax-tile:hover{
    background:
        linear-gradient(
            135deg,
            rgba(255,193,7,.20),
            rgba(255,140,0,.08)
        );
}

/* =========================
   LOGOUT
   ========================= */

.logout-btn{
    display:flex;
    justify-content:center;
    align-items:center;

    color:#ff9b9b !important;

    font-weight:600;

    border-radius:12px;
}

.logout-btn:hover{
    background:rgba(255,80,80,.08);
    color:#ffc0c0 !important;
}

/* =========================
   AVATAR BUTTON
   ========================= */

#avatarImg{
    border-radius:50%;
    border:2px solid rgba(255,255,255,.08);

    transition:.2s;
}

#avatarImg:hover{
    transform:scale(1.05);
}

/* =========================
   ANIMATION
   ========================= */

@keyframes fadeIn {
    from { opacity:0; }
    to { opacity:1; }
}

#custom-waktu-wrap{
    margin-top:10px;
}

#custom-waktu-input{
    width:100%;
    padding:10px 14px;
    border:2px solid #2b4865;
    border-radius:12px;
    font-size:18px;
    font-weight:600;
    text-align:center;
    background:#fff;
    color:#2b4865;
    outline:none;
    transition:.2s;
}

#custom-waktu-input:focus{
    border-color:#1e90ff;
    box-shadow:0 0 0 3px rgba(30,144,255,.15);
}

#custom-waktu-input::placeholder{
    color:#95a5a6;
    font-weight:400;
}

.custom-label{
    display:block;
    margin-bottom:6px;
    font-size:14px;
    font-weight:600;
    color:#2b4865;
}