/* GeoBangkit v2.4.0 Stabilization Build
   Loaded after legacy app.css to normalize focus/fullscreen layout across iPhone, Android, tablets and desktop.
*/

/* Core viewport variables */
:root{
  --gra-vh:1vh;
  --gra-focus-h:calc(var(--gra-vh, 1vh) * 100);
  --gra-bg:#020617;
  --gra-panel:#071026;
  --gra-line:rgba(250,204,21,.24);
  --gra-gold:#facc15;
  --gra-text:#f8fafc;
  --gra-muted:#cbd5e1;
}

/* Avoid old focus locks leaking after exit */
#gra-root.gra-app-mode:not(.gra-focus){
  position:relative!important;
  overflow:visible!important;
  height:auto!important;
  max-height:none!important;
  touch-action:auto!important;
}

/* App-style Focus Mode */
#gra-root.gra-app-mode.gra-focus{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:var(--gra-focus-h)!important;
  min-height:var(--gra-focus-h)!important;
  max-height:var(--gra-focus-h)!important;
  margin:0!important;
  padding:max(8px,env(safe-area-inset-top,0px)) max(8px,env(safe-area-inset-right,0px)) max(8px,env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))!important;
  background:
    radial-gradient(circle at top left,rgba(250,204,21,.08),transparent 28%),
    linear-gradient(135deg,#020617 0%,#061826 60%,#020617 100%)!important;
  border-radius:0!important;
  z-index:2147483000!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  overscroll-behavior:contain!important;
}

#gra-root.gra-app-mode.gra-focus .gra-wrap,
#gra-root.gra-app-mode.gra-focus .gra-app-shell,
#gra-root.gra-app-mode.gra-focus .gra-active-study,
#gra-root.gra-app-mode.gra-focus #chapterArea{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  min-height:0!important;
  margin:0!important;
  overflow:hidden!important;
}

#gra-root.gra-app-mode.gra-focus .gra-bottom-nav,
#gra-root.gra-app-mode.gra-focus .gra-music,
#gra-root.gra-app-mode.gra-focus .gra-chapter-panel,
#gra-root.gra-app-mode.gra-focus .gra-dashboard-panel,
#gra-root.gra-app-mode.gra-focus .gra-dashboard-screen,
#gra-root.gra-app-mode.gra-focus .gra-ranking-screen,
#gra-root.gra-app-mode.gra-focus .gra-quiz-screen{
  display:none!important;
}

/* Shared focus panel */
#gra-root.gra-app-mode.gra-focus .gra-study-panel{
  width:100%!important;
  max-width:1120px!important;
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  margin:0 auto!important;
  padding:clamp(10px,1.8vw,18px)!important;
  background:rgba(7,16,38,.96)!important;
  border:1px solid var(--gra-line)!important;
  border-radius:clamp(16px,2.6vw,30px)!important;
  box-shadow:0 20px 60px rgba(0,0,0,.25)!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr)!important;
  gap:clamp(8px,1.2vw,12px)!important;
}

/* Focus header */
#gra-root.gra-app-mode.gra-focus .gra-study-head,
#gra-root.gra-app-mode.gra-focus .gra-quiz-head{
  grid-row:1!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  min-height:0!important;
}

#gra-root.gra-app-mode.gra-focus .gra-study-head h2,
#gra-root.gra-app-mode.gra-focus .gra-quiz-head h2{
  margin:0!important;
  color:var(--gra-text)!important;
  font-size:clamp(22px,4.8vw,38px)!important;
  line-height:1.05!important;
}

#gra-root.gra-app-mode.gra-focus .gra-study-head .gra-note,
#gra-root.gra-app-mode.gra-focus .gra-quiz-head .gra-note{
  margin:4px 0 0!important;
  color:var(--gra-muted)!important;
  font-size:clamp(12px,2.6vw,17px)!important;
  line-height:1.18!important;
}

#gra-root.gra-app-mode.gra-focus .gra-study-actions{
  flex:0 0 auto!important;
  display:flex!important;
  justify-content:flex-end!important;
}

#gra-root.gra-app-mode.gra-focus #focusBtn{
  min-height:clamp(40px,8vw,52px)!important;
  padding:8px 14px!important;
  border-radius:16px!important;
  font-size:clamp(12px,2.8vw,16px)!important;
  white-space:nowrap!important;
}

/* Flash shell */
#gra-root.gra-app-mode.gra-focus #partArea{
  grid-row:2!important;
  min-height:0!important;
  height:100%!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr)!important;
}

#gra-root.gra-app-mode.gra-focus .gra-mobile-topic-modal,
#gra-root.gra-app-mode.gra-focus .gra-desktop-topics{
  display:none!important;
}

#gra-root.gra-app-mode.gra-focus .gra-flash-shell{
  min-height:0!important;
  height:100%!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:minmax(0,1fr) auto!important;
  gap:clamp(8px,1.4vw,14px)!important;
}

#gra-root.gra-app-mode.gra-focus .gra-card-stage{
  grid-row:1!important;
  min-height:0!important;
  height:100%!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:stretch!important;
  justify-content:center!important;
}

#gra-root.gra-app-mode.gra-focus .gra-flip-card{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  overflow:hidden!important;
  border-radius:clamp(18px,2.5vw,28px)!important;
  border:1px solid var(--gra-line)!important;
  background:rgba(4,10,28,.88)!important;
  color:var(--gra-text)!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  touch-action:pan-y!important;
}

/* Card faces */
#gra-root.gra-app-mode.gra-focus .gra-card-face{
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  padding:clamp(14px,2.6vw,28px)!important;
  box-sizing:border-box!important;
  color:var(--gra-text)!important;
  pointer-events:auto!important;
}

#gra-root.gra-app-mode.gra-focus .gra-card-face *{
  pointer-events:auto!important;
}

#gra-root.gra-app-mode.gra-focus .gra-card-front{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}

#gra-root.gra-app-mode.gra-focus .gra-flip-card .gra-card-back{display:none!important;}
#gra-root.gra-app-mode.gra-focus .gra-flip-card.flipped .gra-card-front{display:none!important;}
#gra-root.gra-app-mode.gra-focus .gra-flip-card.flipped .gra-card-back{display:grid!important;}

#gra-root.gra-app-mode.gra-focus .gra-card-front h3{
  color:var(--gra-gold)!important;
  font-size:clamp(32px,8vw,68px)!important;
  line-height:1.04!important;
  margin:.25em 0!important;
  max-width:100%!important;
  overflow-wrap:anywhere!important;
  white-space:normal!important;
}

#gra-root.gra-app-mode.gra-focus .gra-card-front p,
#gra-root.gra-app-mode.gra-focus .gra-card-front span{
  color:var(--gra-muted)!important;
  line-height:1.2!important;
}

/* Back card: title + scrollable list */
#gra-root.gra-app-mode.gra-focus .gra-card-back{
  grid-template-rows:auto auto minmax(0,1fr)!important;
  align-items:stretch!important;
  justify-content:stretch!important;
  overflow:hidden!important;
  text-align:left!important;
  gap:clamp(6px,1.1vw,12px)!important;
}

#gra-root.gra-app-mode.gra-focus .gra-card-back > span{
  grid-row:1!important;
  font-size:clamp(13px,2.7vw,17px)!important;
  font-weight:900!important;
  color:var(--gra-muted)!important;
  line-height:1.1!important;
}

#gra-root.gra-app-mode.gra-focus .gra-card-back > h3{
  grid-row:2!important;
  color:var(--gra-gold)!important;
  font-size:clamp(25px,6.4vw,48px)!important;
  line-height:1.05!important;
  margin:0!important;
  overflow-wrap:anywhere!important;
  white-space:normal!important;
}

#gra-root.gra-app-mode.gra-focus .gra-card-back > ul{
  grid-row:3!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-y!important;
  overscroll-behavior:contain!important;
  margin:0!important;
  padding:0 4px 8px!important;
  display:grid!important;
  align-content:start!important;
  gap:clamp(7px,1.2vw,12px)!important;
}

#gra-root.gra-app-mode.gra-focus .gra-card-back li{
  display:grid!important;
  grid-template-columns:clamp(26px,5.5vw,36px) minmax(0,1fr)!important;
  align-items:start!important;
  gap:clamp(8px,1.8vw,14px)!important;
  padding:clamp(9px,1.8vw,14px)!important;
  margin:0!important;
  border-radius:clamp(12px,2vw,18px)!important;
  background:rgba(30,41,59,.72)!important;
  border:1px solid rgba(148,163,184,.18)!important;
  color:var(--gra-text)!important;
  font-size:clamp(14px,3.7vw,22px)!important;
  line-height:1.22!important;
  overflow-wrap:anywhere!important;
  white-space:normal!important;
}

#gra-root.gra-app-mode.gra-focus .gra-card-back li:before{
  content:'✓'!important;
  position:static!important;
  transform:none!important;
  width:clamp(26px,5.5vw,36px)!important;
  height:clamp(26px,5.5vw,36px)!important;
  min-width:0!important;
  margin:0!important;
  border-radius:10px!important;
  background:rgba(22,101,52,.72)!important;
  color:#bbf7d0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:clamp(15px,3.5vw,20px)!important;
  line-height:1!important;
}

#gra-root.gra-app-mode.gra-focus .gra-card-back > .gra-note{display:none!important;}

/* Controls */
#gra-root.gra-app-mode.gra-focus .gra-controls-bottom{display:none!important;}
#gra-root.gra-app-mode.gra-focus .gra-controls-inline{
  grid-row:2!important;
  display:grid!important;
  visibility:visible!important;
  opacity:1!important;
  grid-template-columns:1fr 1fr!important;
  gap:clamp(10px,1.6vw,16px)!important;
  width:100%!important;
  min-height:clamp(52px,8vw,64px)!important;
  margin:0!important;
  padding:0!important;
  position:relative!important;
  z-index:50!important;
  background:transparent!important;
  pointer-events:auto!important;
}

#gra-root.gra-app-mode.gra-focus .gra-controls-inline .gra-btn{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-height:clamp(52px,8vw,64px)!important;
  padding:10px 14px!important;
  border-radius:16px!important;
  font-size:clamp(14px,3.4vw,18px)!important;
  line-height:1.12!important;
}

/* Quiz focus */
#gra-root.gra-app-mode.gra-focus .gra-quiz-focus-shell{
  height:100%!important;
  width:100%!important;
  max-width:100%!important;
  padding:0!important;
  overflow:hidden!important;
}

#gra-root.gra-app-mode.gra-focus .gra-quiz-focus-shell #chapterArea{
  height:100%!important;
  max-width:1120px!important;
  margin:0 auto!important;
  overflow:hidden!important;
}

#gra-root.gra-app-mode.gra-focus .gra-quiz-only-panel #partArea{
  display:block!important;
  height:100%!important;
  overflow:hidden!important;
}

#gra-root.gra-app-mode.gra-focus .gra-quiz-one{
  height:100%!important;
  min-height:0!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr) auto auto!important;
  gap:clamp(8px,1.4vw,12px)!important;
  overflow:hidden!important;
}

#gra-root.gra-app-mode.gra-focus .gra-qbox-one{
  min-height:0!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-y!important;
}

/* iPhone/Android portrait compacting */
@media(max-width:860px) and (orientation:portrait){
  #gra-root.gra-app-mode.gra-focus .gra-study-panel{
    padding:12px!important;
  }

  #gra-root.gra-app-mode.gra-focus .gra-card-back{
    padding:14px!important;
  }

  #gra-root.gra-app-mode.gra-focus .gra-card-back > h3{
    font-size:clamp(24px,6.7vw,38px)!important;
  }

  #gra-root.gra-app-mode.gra-focus .gra-card-back li{
    font-size:clamp(13px,3.75vw,18px)!important;
    line-height:1.18!important;
    padding:9px 10px!important;
    gap:8px!important;
  }

  #gra-root.gra-app-mode.gra-focus .gra-card-back li:before{
    width:26px!important;
    height:26px!important;
    font-size:15px!important;
  }
}

/* Landscape / short screen: allow full page scroll when height is too short */
@media(orientation:landscape) and (max-height:640px){
  #gra-root.gra-app-mode.gra-focus{
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
  }
  #gra-root.gra-app-mode.gra-focus .gra-wrap,
  #gra-root.gra-app-mode.gra-focus .gra-app-shell,
  #gra-root.gra-app-mode.gra-focus .gra-active-study,
  #gra-root.gra-app-mode.gra-focus #chapterArea{
    height:auto!important;
    min-height:100%!important;
    overflow:visible!important;
  }
  #gra-root.gra-app-mode.gra-focus .gra-study-panel{
    height:auto!important;
    min-height:calc(var(--gra-focus-h) - 18px)!important;
    max-height:none!important;
    overflow:visible!important;
  }
  #gra-root.gra-app-mode.gra-focus .gra-flash-shell,
  #gra-root.gra-app-mode.gra-focus .gra-card-stage,
  #gra-root.gra-app-mode.gra-focus .gra-flip-card{
    height:auto!important;
    min-height:260px!important;
    max-height:none!important;
    overflow:visible!important;
  }
  #gra-root.gra-app-mode.gra-focus .gra-card-face{
    height:auto!important;
    min-height:260px!important;
    max-height:none!important;
  }
}

/* Dashboard/navigation cleanup */
#gra-root.gra-app-mode .gra-bottom-nav{
  background:#020617!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border:1px solid rgba(250,204,21,.32)!important;
}


/* v2.4.1 Premium mobile flash-card back layout
   Goal: focus mode follows the clean non-fullscreen card style, even when browser address bar is visible.
*/
@media(max-width:860px) and (orientation:portrait){
  #gra-root.gra-app-mode.gra-focus .gra-study-panel{
    padding:10px!important;
    gap:8px!important;
  }

  #gra-root.gra-app-mode.gra-focus .gra-study-head{
    gap:8px!important;
  }

  #gra-root.gra-app-mode.gra-focus .gra-study-head h2{
    font-size:clamp(21px,5.7vw,30px)!important;
    line-height:1.06!important;
  }

  #gra-root.gra-app-mode.gra-focus .gra-study-head .gra-note{
    font-size:clamp(12px,3.15vw,15px)!important;
    line-height:1.15!important;
  }

  #gra-root.gra-app-mode.gra-focus #focusBtn{
    min-height:44px!important;
    padding:8px 12px!important;
    font-size:clamp(12px,3.1vw,14px)!important;
    border-radius:15px!important;
  }

  #gra-root.gra-app-mode.gra-focus .gra-flash-shell{
    gap:8px!important;
  }

  #gra-root.gra-app-mode.gra-focus .gra-flip-card{
    border-radius:18px!important;
    overflow:hidden!important;
  }

  #gra-root.gra-app-mode.gra-focus .gra-card-back{
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    align-items:stretch!important;
    overflow:hidden!important;
    padding:14px!important;
    gap:6px!important;
  }

  #gra-root.gra-app-mode.gra-focus .gra-card-back > span{
    font-size:clamp(13px,3.2vw,16px)!important;
    line-height:1.1!important;
    margin:0!important;
  }

  #gra-root.gra-app-mode.gra-focus .gra-card-back > h3{
    font-size:clamp(25px,6.2vw,34px)!important;
    line-height:1.05!important;
    margin:2px 0 8px!important;
    letter-spacing:.01em!important;
  }

  #gra-root.gra-app-mode.gra-focus .gra-card-back > ul{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
    overscroll-behavior:contain!important;
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
    padding:0 2px 6px!important;
    margin:0!important;
  }

  #gra-root.gra-app-mode.gra-focus .gra-card-back li{
    display:flex!important;
    align-items:flex-start!important;
    grid-template-columns:none!important;
    gap:9px!important;
    width:100%!important;
    box-sizing:border-box!important;
    min-height:auto!important;
    margin:0!important;
    padding:10px 11px!important;
    border-radius:14px!important;
    background:rgba(30,41,59,.72)!important;
    border:1px solid rgba(148,163,184,.24)!important;
    color:#f8fafc!important;
    font-size:clamp(13px,3.35vw,16px)!important;
    line-height:1.2!important;
    font-weight:800!important;
    overflow:visible!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

  #gra-root.gra-app-mode.gra-focus .gra-card-back li:before{
    content:'✓'!important;
    position:static!important;
    transform:none!important;
    flex:0 0 26px!important;
    width:26px!important;
    height:26px!important;
    min-width:26px!important;
    margin:0!important;
    border-radius:9px!important;
    background:rgba(22,101,52,.78)!important;
    color:#bbf7d0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:15px!important;
    line-height:1!important;
  }

  #gra-root.gra-app-mode.gra-focus .gra-controls-inline{
    min-height:54px!important;
    gap:10px!important;
  }

  #gra-root.gra-app-mode.gra-focus .gra-controls-inline .gra-btn{
    min-height:54px!important;
    font-size:clamp(14px,3.6vw,17px)!important;
    border-radius:16px!important;
  }
}

/* When browser chrome/address bar reduces real height, keep the clean box layout and make the list scroll earlier. */
@media(max-width:860px) and (orientation:portrait) and (max-height:820px){
  #gra-root.gra-app-mode.gra-focus .gra-card-back{
    padding:12px!important;
  }

  #gra-root.gra-app-mode.gra-focus .gra-card-back > h3{
    font-size:clamp(23px,5.8vw,31px)!important;
    margin-bottom:6px!important;
  }

  #gra-root.gra-app-mode.gra-focus .gra-card-back > ul{
    gap:7px!important;
  }

  #gra-root.gra-app-mode.gra-focus .gra-card-back li{
    font-size:clamp(12px,3.15vw,15px)!important;
    line-height:1.16!important;
    padding:8px 9px!important;
    gap:8px!important;
    border-radius:13px!important;
  }

  #gra-root.gra-app-mode.gra-focus .gra-card-back li:before{
    flex-basis:24px!important;
    width:24px!important;
    height:24px!important;
    min-width:24px!important;
    font-size:14px!important;
  }
}

/* Normal app view also receives a small consistency polish for long back-card lists. */
@media(max-width:860px){
  #gra-root.gra-app-mode:not(.gra-focus) .gra-card-back li{
    display:flex!important;
    align-items:flex-start!important;
    gap:10px!important;
  }
  #gra-root.gra-app-mode:not(.gra-focus) .gra-card-back li:before{
    position:static!important;
    transform:none!important;
    flex:0 0 28px!important;
    margin:0!important;
  }
}


/* v2.4.2 PWA install prompt + new GeoBangkit icon */
.gra-install-card{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px;
  border:1px solid rgba(250,204,21,.28);
  border-radius:22px;
  background:linear-gradient(135deg,rgba(2,6,23,.96),rgba(15,23,42,.92));
  box-shadow:0 16px 40px rgba(0,0,0,.28);
  color:#f8fafc;
  position:relative;
}
.gra-install-card img{
  width:58px;
  height:58px;
  border-radius:16px;
  object-fit:cover;
  flex:0 0 auto;
  box-shadow:0 8px 20px rgba(0,0,0,.28);
}
.gra-install-card div{
  flex:1 1 auto;
  min-width:0;
}
.gra-install-card b{
  display:block;
  font-size:18px;
  line-height:1.1;
}
.gra-install-card p{
  margin:4px 0 0;
  color:#cbd5e1;
  font-size:13px;
  line-height:1.35;
}
.gra-install-card .gra-btn{
  flex:0 0 auto;
  min-height:44px;
  padding:10px 16px;
  border-radius:14px;
}
.gra-install-close{
  position:absolute;
  top:8px;
  right:9px;
  border:0;
  background:rgba(15,23,42,.78);
  color:#cbd5e1;
  width:28px;
  height:28px;
  border-radius:999px;
  font-size:20px;
  line-height:1;
  cursor:pointer;
}
@media(max-width:640px){
  .gra-install-card{
    align-items:flex-start;
    padding:12px 42px 12px 12px;
  }
  .gra-install-card img{
    width:50px;
    height:50px;
    border-radius:14px;
  }
  .gra-install-card b{
    font-size:16px;
  }
  .gra-install-card p{
    font-size:12px;
  }
  .gra-install-card .gra-btn{
    width:100%;
    margin-top:8px;
    grid-column:1 / -1;
  }
}
#gra-root.gra-app-mode.gra-focus .gra-install-card{
  display:none!important;
}


/* v2.4.3 Welcome modal positioning + proper install card layout */
@media(max-width:860px){
  .gra-welcome-modal{
    align-items:center!important;
    justify-content:center!important;
    padding:14px!important;
  }
  .gra-welcome-card{
    width:min(680px,100%)!important;
    max-height:min(88dvh,760px)!important;
    overflow:auto!important;
    border-radius:24px!important;
    padding:20px!important;
  }
}
@media(max-width:430px){
  .gra-welcome-modal{
    align-items:flex-start!important;
    padding-top:max(16px,env(safe-area-inset-top,0px) + 10px)!important;
  }
  .gra-welcome-card{
    max-height:calc(100dvh - 32px)!important;
  }
}

/* Replace broken flex install card with stable responsive grid */
.gra-install-card{
  display:grid!important;
  grid-template-columns:58px minmax(0,1fr) auto!important;
  grid-template-areas:"icon copy action"!important;
  align-items:center!important;
  gap:14px!important;
  width:100%!important;
  box-sizing:border-box!important;
  padding:14px 48px 14px 14px!important;
  margin:0 0 14px!important;
  border:1px solid rgba(250,204,21,.28)!important;
  border-radius:22px!important;
  background:linear-gradient(135deg,rgba(2,6,23,.98),rgba(15,23,42,.94))!important;
  box-shadow:0 16px 40px rgba(0,0,0,.28)!important;
  color:#f8fafc!important;
  position:relative!important;
  overflow:hidden!important;
}
.gra-install-card .gra-install-icon{
  grid-area:icon!important;
  width:58px!important;
  height:58px!important;
  border-radius:16px!important;
  object-fit:cover!important;
  flex:none!important;
  box-shadow:0 8px 20px rgba(0,0,0,.28)!important;
}
.gra-install-card .gra-install-copy{
  grid-area:copy!important;
  min-width:0!important;
  width:auto!important;
}
.gra-install-card .gra-install-copy b{
  display:block!important;
  font-size:18px!important;
  line-height:1.1!important;
  color:#f8fafc!important;
  white-space:normal!important;
}
.gra-install-card .gra-install-copy p{
  margin:4px 0 0!important;
  color:#cbd5e1!important;
  font-size:13px!important;
  line-height:1.35!important;
  white-space:normal!important;
}
.gra-install-card .gra-install-action{
  grid-area:action!important;
  width:auto!important;
  min-width:132px!important;
  min-height:44px!important;
  padding:10px 16px!important;
  border-radius:14px!important;
  white-space:nowrap!important;
}
.gra-install-card .gra-install-close{
  position:absolute!important;
  top:8px!important;
  right:9px!important;
  z-index:3!important;
  border:0!important;
  background:rgba(15,23,42,.78)!important;
  color:#cbd5e1!important;
  width:28px!important;
  height:28px!important;
  border-radius:999px!important;
  font-size:20px!important;
  line-height:1!important;
  cursor:pointer!important;
}
@media(max-width:640px){
  .gra-install-card{
    grid-template-columns:52px minmax(0,1fr)!important;
    grid-template-areas:
      "icon copy"
      "action action"!important;
    align-items:start!important;
    gap:10px 12px!important;
    padding:12px 42px 12px 12px!important;
  }
  .gra-install-card .gra-install-icon{
    width:52px!important;
    height:52px!important;
    border-radius:14px!important;
  }
  .gra-install-card .gra-install-copy b{
    font-size:16px!important;
  }
  .gra-install-card .gra-install-copy p{
    font-size:12px!important;
    line-height:1.32!important;
  }
  .gra-install-card .gra-install-action{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    min-height:44px!important;
  }
}


/* v2.4.4 iPhone install card + proper in-app guide modal */
.gra-install-card{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:12px!important;
  width:100%!important;
  box-sizing:border-box!important;
  padding:14px 44px 14px 14px!important;
  margin:0 0 14px!important;
  border:1px solid rgba(250,204,21,.28)!important;
  border-radius:22px!important;
  background:linear-gradient(135deg,rgba(2,6,23,.98),rgba(15,23,42,.94))!important;
  box-shadow:0 16px 40px rgba(0,0,0,.28)!important;
  color:#f8fafc!important;
  position:relative!important;
  overflow:hidden!important;
}
.gra-install-card .gra-install-top{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  min-width:0!important;
}
.gra-install-card .gra-install-icon{
  width:58px!important;
  height:58px!important;
  border-radius:16px!important;
  object-fit:cover!important;
  flex:0 0 58px!important;
  box-shadow:0 8px 20px rgba(0,0,0,.28)!important;
}
.gra-install-card .gra-install-copy{min-width:0!important;flex:1 1 auto!important;}
.gra-install-card .gra-install-copy b{
  display:block!important;font-size:18px!important;line-height:1.1!important;color:#f8fafc!important;white-space:normal!important;
}
.gra-install-card .gra-install-copy p{
  margin:4px 0 0!important;color:#cbd5e1!important;font-size:13px!important;line-height:1.35!important;white-space:normal!important;
}
.gra-install-card .gra-install-action{width:100%!important;min-height:46px!important;border-radius:14px!important;}
.gra-install-card .gra-install-close{
  position:absolute!important;top:8px!important;right:9px!important;z-index:3!important;border:0!important;
  background:rgba(15,23,42,.82)!important;color:#cbd5e1!important;width:30px!important;height:30px!important;
  border-radius:999px!important;font-size:21px!important;line-height:1!important;cursor:pointer!important;
}
@media(max-width:640px){
  .gra-install-card{padding:12px 42px 12px 12px!important;gap:10px!important;}
  .gra-install-card .gra-install-icon{width:52px!important;height:52px!important;flex-basis:52px!important;border-radius:14px!important;}
  .gra-install-card .gra-install-copy b{font-size:16px!important;}
  .gra-install-card .gra-install-copy p{font-size:12px!important;line-height:1.32!important;}
}
.gra-install-guide{
  position:fixed!important;inset:0!important;z-index:2147483600!important;display:flex!important;
  align-items:center!important;justify-content:center!important;padding:18px!important;background:rgba(2,6,23,.72)!important;
  backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important;
}
.gra-install-guide-card{
  width:min(460px,100%)!important;border-radius:26px!important;padding:22px!important;
  background:linear-gradient(180deg,#071026,#020617)!important;border:1px solid rgba(250,204,21,.32)!important;
  box-shadow:0 24px 80px rgba(0,0,0,.42)!important;color:#f8fafc!important;position:relative!important;text-align:left!important;
}
.gra-install-guide-card img{
  width:78px!important;height:78px!important;border-radius:20px!important;object-fit:cover!important;display:block!important;margin:0 auto 12px!important;
}
.gra-install-guide-card h3{
  margin:0 0 12px!important;text-align:center!important;font-size:24px!important;line-height:1.12!important;color:#facc15!important;
}
.gra-install-guide-card ol{
  margin:0 0 18px!important;padding-left:24px!important;display:grid!important;gap:10px!important;
  color:#e2e8f0!important;font-size:16px!important;line-height:1.35!important;
}
.gra-install-guide-card .gra-btn{width:100%!important;}
.gra-install-guide-x{
  position:absolute!important;top:10px!important;right:10px!important;width:32px!important;height:32px!important;
  border-radius:999px!important;border:1px solid rgba(148,163,184,.22)!important;background:rgba(15,23,42,.82)!important;
  color:#cbd5e1!important;font-size:22px!important;line-height:1!important;
}


/* v2.4.5 App-style focus only: no native fullscreen toast + stable bottom controls on re-enter */
#gra-root.gra-app-mode.gra-focus{
  /* use app-like panel inside browser instead of native Fullscreen API */
  top:0!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  height:var(--gra-focus-h)!important;
  max-height:var(--gra-focus-h)!important;
  overflow:hidden!important;
}

/* Flash controls must always occupy a real row, never be fixed/off-screen */
#gra-root.gra-app-mode.gra-focus .gra-flash-shell{
  display:grid!important;
  grid-template-rows:minmax(0,1fr) auto!important;
  min-height:0!important;
  height:100%!important;
  overflow:hidden!important;
  padding-bottom:0!important;
}

#gra-root.gra-app-mode.gra-focus .gra-card-stage{
  min-height:0!important;
  height:100%!important;
  overflow:hidden!important;
}

#gra-root.gra-app-mode.gra-focus .gra-controls-bottom{
  display:none!important;
}

#gra-root.gra-app-mode.gra-focus .gra-controls-inline{
  display:grid!important;
  visibility:visible!important;
  opacity:1!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
  width:100%!important;
  min-height:56px!important;
  max-height:68px!important;
  position:relative!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  margin:0!important;
  padding:0!important;
  z-index:99!important;
  background:transparent!important;
  box-shadow:none!important;
  pointer-events:auto!important;
}

#gra-root.gra-app-mode.gra-focus .gra-controls-inline .gra-btn{
  min-height:56px!important;
  height:56px!important;
  max-height:64px!important;
  padding:10px 12px!important;
  width:100%!important;
  border-radius:16px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

/* Android/Chrome with visible address bar: make room so controls don't get cut after exit/re-enter */
@media(max-width:860px) and (orientation:portrait){
  #gra-root.gra-app-mode.gra-focus .gra-study-panel{
    padding-bottom:12px!important;
  }
  #gra-root.gra-app-mode.gra-focus .gra-flash-shell{
    gap:8px!important;
  }
  #gra-root.gra-app-mode.gra-focus .gra-card-back > ul{
    padding-bottom:10px!important;
  }
}

/* If legacy native fullscreen was active from old cache/session, don't show cut controls */
html:fullscreen #gra-root.gra-app-mode.gra-focus .gra-controls-inline,
body:fullscreen #gra-root.gra-app-mode.gra-focus .gra-controls-inline,
#gra-root:fullscreen .gra-controls-inline{
  display:grid!important;
  position:relative!important;
  bottom:auto!important;
}


/* v2.4.28 restore neat flash bullet rows after scroll/focus fixes.
   Keep internal scrolling, but make the tick and text sit on the same line on PC, tablet, phone and installed PWA. */
#gra-root .gra-card-back li,
#gra-root .gra-detail-card li{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  padding:12px 14px!important;
  position:relative!important;
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  white-space:normal!important;
  overflow-wrap:break-word!important;
  word-break:normal!important;
}
#gra-root .gra-card-back li:before,
#gra-root .gra-detail-card li:before{
  position:static!important;
  left:auto!important;
  top:auto!important;
  transform:none!important;
  flex:0 0 28px!important;
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  min-height:28px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
  line-height:1!important;
  align-self:center!important;
}
#gra-root.gra-app-mode.gra-focus:not(.gra-resume-quiz-mode) .gra-card-back ul{
  padding:0 4px 2px!important;
}
#gra-root.gra-app-mode.gra-focus:not(.gra-resume-quiz-mode) .gra-card-back li{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  padding:12px 14px!important;
}
#gra-root.gra-app-mode.gra-focus:not(.gra-resume-quiz-mode) .gra-card-back li:before{
  position:static!important;
  flex:0 0 28px!important;
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  min-height:28px!important;
  font-size:18px!important;
}
@media(max-width:860px){
  #gra-root .gra-card-back li,
  #gra-root .gra-detail-card li,
  #gra-root.gra-app-mode.gra-focus:not(.gra-resume-quiz-mode) .gra-card-back li{
    align-items:center!important;
    gap:10px!important;
    padding:10px 12px!important;
  }
  #gra-root .gra-card-back li:before,
  #gra-root .gra-detail-card li:before,
  #gra-root.gra-app-mode.gra-focus:not(.gra-resume-quiz-mode) .gra-card-back li:before{
    flex-basis:24px!important;
    width:24px!important;
    height:24px!important;
    min-width:24px!important;
    min-height:24px!important;
    font-size:15px!important;
  }
}
@media(orientation:landscape) and (max-height:820px){
  #gra-root .gra-card-back li,
  #gra-root .gra-detail-card li,
  #gra-root.gra-app-mode.gra-focus:not(.gra-resume-quiz-mode) .gra-card-back li{
    align-items:center!important;
    gap:8px!important;
    padding:7px 9px!important;
  }
  #gra-root .gra-card-back li:before,
  #gra-root .gra-detail-card li:before,
  #gra-root.gra-app-mode.gra-focus:not(.gra-resume-quiz-mode) .gra-card-back li:before{
    flex-basis:20px!important;
    width:20px!important;
    height:20px!important;
    min-width:20px!important;
    min-height:20px!important;
    border-radius:7px!important;
    font-size:12px!important;
  }
}


/* v2.4.29 smooth focus-exit scroll recovery: avoid first-scroll bounce while keeping normal page scroll premium on PC, Android, iPhone, iPad and PWA. */
html:not(.gra-focus-lock),
body:not(.gra-focus-lock){
  scroll-behavior:auto!important;
  overscroll-behavior:auto!important;
}
#gra-root.gra-app-mode:not(.gra-focus){
  pointer-events:auto!important;
  scroll-behavior:auto!important;
}

/* v2.4.30: focus exit no longer applies delayed scrollTo, so first user scroll remains smooth. */

/* v2.4.31 launch check: legacy delayed focus-exit scroll recovery removed from JS to prevent first-scroll bounce. */