/* =========================================================
   RESHOLUTION — Refresh "Lembar kerja" untuk Playground & Login Siswa/Guru
   Gaya sama dengan beranda baru: kertas berpetak, garis tebal navy,
   bayangan keras (tanpa blur), satu warna cerah per peran.
   Dimuat di: playground.php, login-siswa.php, login-guru.php
   Semua aturan di-scope (.rh-play / .rh-auth) sehingga halaman lain tidak terpengaruh.
   ========================================================= */

.rh-play,
.rh-auth{
  --navy:#14226b;
  --ink:#0f1a4d;
  --soft:#4b5586;
  --grid:#dde4fb;
  --yellow:#ffd43b;
  --cobalt:#3454f5;
  --mint:#2bc48a;
  --coral:#ff6a57;
  --sky:#eaf0ff;
  --cobalt-soft:#dfe6ff;
  --yellow-soft:#fff4c2;
  --mint-soft:#d5f5e6;
  --coral-soft:#ffe0db;
  --font-display:'Bricolage Grotesque','Arial Black',system-ui,sans-serif;
  --font-body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-family:var(--font-body);
  color:var(--ink);
}
.rh-play h1,.rh-play h2,.rh-play h3,
.rh-auth h1,.rh-auth h2,.rh-auth h3{
  font-family:var(--font-display);color:var(--navy);font-weight:800;letter-spacing:-.025em;
}
.rh-play :focus-visible,.rh-auth :focus-visible{outline:3px solid var(--cobalt);outline-offset:3px;border-radius:6px;}

/* =========================================================
   PLAYGROUND
   ========================================================= */
.rh-play{background:#fff;font-size:1.0625rem;line-height:1.6;}

/* Tombol (sama dengan beranda) */
.rh-play .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:#fff;color:var(--navy);border:2px solid var(--navy);border-radius:14px;
  padding:12px 22px;font:700 .98rem/1.1 var(--font-body);
  box-shadow:0 4px 0 var(--navy);
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.rh-play .btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--navy);}
.rh-play .btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--navy);}
.rh-play .btn-sm{padding:9px 16px;font-size:.88rem;box-shadow:0 3px 0 var(--navy);border-radius:12px;}
.rh-play .btn-primary{background:var(--navy);color:#fff;}
.rh-play .btn-primary:hover{background:#1b2d85;}
.rh-play .btn-ghost{background:#fff;color:var(--navy);}
.rh-play .btn-ghost:hover{background:var(--sky);}
.rh-play .btn[disabled]{opacity:.55;cursor:wait;transform:none;box-shadow:0 3px 0 var(--navy);}

/* Hero: kertas berpetak */
.rh-play .pg-hero{
  position:relative;text-align:center;color:var(--ink);
  padding:clamp(44px,7vw,84px) 24px clamp(64px,9vw,104px);
  border-bottom:2px solid var(--navy);
  background-color:#fff;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:34px 34px;background-position:-1px -1px;
}
.rh-play .pg-hero .eyebrow{
  display:inline-block;padding:5px 14px;margin:0 0 20px;
  border:2px solid var(--navy);border-radius:10px;background:var(--yellow);
  color:var(--navy);font:700 .84rem/1.3 var(--font-body);letter-spacing:0;text-transform:none;
  transform:rotate(-2deg);
}
.rh-play .pg-hero .eyebrow::before{display:none;}
.rh-play .pg-hero h1{
  color:var(--navy);margin:0 auto 16px;max-width:20ch;
  font-size:clamp(2rem,4.8vw,3.5rem);line-height:1.02;letter-spacing:-.04em;
}
.rh-play .pg-hero p{color:var(--soft);max-width:54ch;margin:0 auto;font-size:clamp(1rem,1.5vw,1.14rem);}

/* Lembar kerja editor */
.rh-play .pg-wrap{max-width:1180px;margin:-44px auto clamp(56px,8vw,96px);padding:0 24px;position:relative;z-index:2;}
.rh-play .pg-shell{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:0;
  background:#fff;border:2px solid var(--navy);border-radius:24px;overflow:hidden;
  box-shadow:9px 9px 0 var(--navy);
}
.rh-play .pg-editor-col{border-right:2px solid var(--navy);display:flex;flex-direction:column;min-width:0;}
.rh-play .pg-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 16px;border-bottom:2px solid var(--navy);background:var(--sky);
}

/* Tab bahasa: warna per bahasa, seperti tab di beranda */
.rh-play .pg-lang-tabs{display:flex;gap:8px;background:transparent;padding:0;border:0;border-radius:0;}
.rh-play .pg-lang-tab{
  --t:var(--cobalt-soft);--c:var(--cobalt);
  padding:8px 18px;border:2px solid var(--navy);border-radius:12px;
  background:var(--t);color:var(--navy);font:700 .9rem/1.2 var(--font-body);
  box-shadow:0 3px 0 var(--navy);transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.rh-play .pg-lang-tab[data-lang="python"]{--t:var(--yellow-soft);--c:var(--yellow);}
.rh-play .pg-lang-tab:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--navy);}
.rh-play .pg-lang-tab.active{background:var(--c);color:var(--navy);transform:translateY(2px);box-shadow:0 1px 0 var(--navy);}
.rh-play .pg-lang-tab[data-lang="c"].active{color:#fff;}
.rh-play .pg-toolbar-actions{display:flex;gap:10px;align-items:center;}
.rh-play #pgRunBtn{background:var(--mint);color:var(--navy);}
.rh-play #pgRunBtn:hover{background:#3ad39a;}

/* Editor (CodeMirror tema terang) */
.rh-play .CodeMirror{
  height:clamp(340px,52vh,480px);background:#fbfcff;color:var(--navy);
  font:600 .92rem/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.rh-play .CodeMirror-gutters{background:var(--sky);border-right:2px solid var(--navy);}
.rh-play .CodeMirror-linenumber{color:#7f8ac0;}
.rh-play .CodeMirror-cursor{border-left:2px solid var(--navy);}
.rh-play .CodeMirror-selected{background:#cfe0ff!important;}
.rh-play .CodeMirror-focused .CodeMirror-selected{background:#bcd0ff!important;}
.rh-play .CodeMirror-activeline-background{background:#f1f5ff;}
.rh-play .CodeMirror-matchingbracket{color:var(--navy)!important;background:var(--yellow);outline:1px solid var(--navy);}
.rh-play .cm-s-default .cm-keyword{color:#c2255c;font-weight:700;}
.rh-play .cm-s-default .cm-atom,.rh-play .cm-s-default .cm-number{color:var(--cobalt);}
.rh-play .cm-s-default .cm-def,.rh-play .cm-s-default .cm-variable-2,.rh-play .cm-s-default .cm-variable-3,.rh-play .cm-s-default .cm-type{color:var(--cobalt);}
.rh-play .cm-s-default .cm-string,.rh-play .cm-s-default .cm-string-2{color:#0b7a53;}
.rh-play .cm-s-default .cm-comment{color:#7f8ac0;font-style:italic;}
.rh-play .cm-s-default .cm-builtin{color:#8a4bd6;}
.rh-play .cm-s-default .cm-meta{color:#b45f06;}
.rh-play .cm-s-default .cm-operator,.rh-play .cm-s-default .cm-variable,.rh-play .cm-s-default .cm-punctuation{color:var(--navy);}

/* Input & output */
.rh-play .pg-io{display:flex;flex-direction:column;height:100%;min-width:0;}
.rh-play .pg-io-block{flex:1;display:flex;flex-direction:column;min-height:0;}
.rh-play .pg-io-block + .pg-io-block{border-top:2px solid var(--navy);}
.rh-play .pg-io-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 16px;border-bottom:2px solid var(--navy);background:var(--sky);
  font:800 .82rem/1.2 var(--font-body);color:var(--navy);letter-spacing:.01em;
}
.rh-play .pg-io-block:nth-child(1) .pg-io-head{background:var(--yellow-soft);}
.rh-play .pg-io-block:nth-child(2) .pg-io-head{background:var(--mint-soft);}
.rh-play .pg-stdin{
  width:100%;border:0;resize:vertical;padding:14px 16px;min-height:104px;
  font:600 .88rem/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:#fff;color:var(--navy);
}
.rh-play .pg-stdin::placeholder{color:#8e98c8;font-weight:500;}
.rh-play .pg-stdin:focus{outline:none;background:#fffdf2;}
.rh-play .pg-output{
  flex:1;min-height:200px;padding:16px 18px;overflow-y:auto;white-space:pre-wrap;word-break:break-word;
  background:var(--navy);color:#b9f3d9;
  font:600 .88rem/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.rh-play .pg-output .err{color:#ffb4a8;}
.rh-play .pg-output .muted{color:rgba(207,222,255,.6);font-weight:500;}

/* Status berbentuk stiker kecil */
.rh-play .pg-status{
  display:inline-block;padding:3px 11px;border:2px solid var(--navy);border-radius:999px;
  background:#fff;color:var(--navy);font:700 .74rem/1.4 var(--font-body);
}
.rh-play .pg-status.running{background:var(--yellow);color:var(--navy);}
.rh-play .pg-status.ok{background:var(--mint);color:var(--navy);}
.rh-play .pg-status.error{background:var(--coral);color:#fff;}

/* Ajakan di bawah editor */
.rh-play .pg-tips{padding:0 0 clamp(56px,8vw,96px);}
.rh-play .pg-tips-card{
  display:flex;align-items:center;gap:20px;max-width:880px;margin:0 auto;
  padding:clamp(20px,3vw,30px);background:var(--cobalt-soft);
  border:2px solid var(--navy);border-radius:22px;box-shadow:7px 7px 0 var(--navy);
}
.rh-play .pg-tips-ico{
  flex:0 0 auto;width:56px;height:56px;border-radius:16px;border:2px solid var(--navy);
  background:var(--yellow);display:flex;align-items:center;justify-content:center;transform:rotate(-6deg);
}
.rh-play .pg-tips-ico svg{width:28px;height:28px;color:var(--navy);}
.rh-play .pg-tips-card h2{font-size:clamp(1.3rem,2.4vw,1.75rem);margin:0 0 6px;line-height:1.1;}
.rh-play .pg-tips-card p{margin:0;color:var(--soft);}

@media(max-width:980px){
  .rh-play .pg-shell{grid-template-columns:1fr;}
  .rh-play .pg-editor-col{border-right:0;border-bottom:2px solid var(--navy);}
  .rh-play .pg-io{height:auto;}
}
@media(max-width:560px){
  .rh-play .pg-wrap{padding:0 14px;margin-top:-36px;}
  .rh-play .pg-shell{border-radius:20px;box-shadow:6px 6px 0 var(--navy);}
  .rh-play .pg-toolbar{padding:10px 12px;}
  .rh-play .pg-toolbar-actions{width:100%;}
  .rh-play .pg-toolbar-actions .btn{flex:1;}
  .rh-play .pg-tips-card{flex-direction:column;align-items:flex-start;box-shadow:5px 5px 0 var(--navy);}
}

/* =========================================================
   LOGIN SISWA & GURU
   Siswa = cobalt, Guru = mint (mengikuti warna kelas di beranda)
   ========================================================= */
.rh-auth{
  margin:0;min-height:100vh;background:#fff;line-height:1.55;
  --accent:var(--cobalt);--accent-soft:var(--cobalt-soft);--side-ink:#fff;--side-sub:rgba(255,255,255,.88);
}
.rh-auth-guru{--accent:var(--mint);--accent-soft:var(--mint-soft);--side-ink:var(--navy);--side-sub:#1d3a6b;}

.rh-auth .auth-wrap{min-height:100vh;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);}

/* Panel kiri berwarna */
.rh-auth .auth-side{
  position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(36px,6vw,72px);color:var(--side-ink);
  background-color:var(--accent);
  background-image:
    linear-gradient(rgba(255,255,255,.22) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.22) 1px,transparent 1px);
  background-size:34px 34px;background-position:-1px -1px;
  border-right:2px solid var(--navy);
}
.rh-auth .auth-side .brand{margin-bottom:36px;align-self:flex-start;position:relative;z-index:2;}
.rh-auth .brand-badge{
  background:#fff;border:2px solid var(--navy);border-radius:14px;padding:8px 16px;
  box-shadow:4px 4px 0 var(--navy);
}
.rh-auth .auth-side .brand img{height:36px;}
.rh-auth a:hover .brand-badge,.rh-auth a:focus-visible .brand-badge{
  transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--navy);
}
.rh-auth .auth-side h2{
  position:relative;z-index:2;color:var(--side-ink);
  font-size:clamp(2rem,3.6vw,3.1rem);line-height:1.02;letter-spacing:-.04em;max-width:13ch;margin:0 0 16px;
}
.rh-auth .auth-side p{position:relative;z-index:2;color:var(--side-sub);max-width:36ch;font-size:1.04rem;margin:0;font-weight:500;}

/* Hiasan geometris (murni dekorasi, tanpa teks) */
.rh-auth .auth-deco{position:absolute;inset:0;pointer-events:none;z-index:1;}
.rh-auth .auth-deco i{position:absolute;display:block;border:2px solid var(--navy);box-shadow:4px 4px 0 var(--navy);}
.rh-auth .auth-deco .d1{width:84px;height:84px;border-radius:50%;background:var(--yellow);right:9%;top:9%;}
.rh-auth .auth-deco .d2{width:64px;height:64px;border-radius:18px;background:var(--coral);right:22%;bottom:12%;transform:rotate(14deg);}
.rh-auth .auth-deco .d3{width:120px;height:44px;border-radius:999px;background:#fff;left:10%;bottom:7%;transform:rotate(-6deg);}
.rh-auth .auth-deco .d3::after{
  content:'';position:absolute;left:22px;top:11px;width:16px;height:8px;
  border-left:3px solid var(--navy);border-bottom:3px solid var(--navy);transform:rotate(-45deg);
}
.rh-auth-guru .auth-deco .d2{background:var(--cobalt);}

/* Sisi form: kertas berpetak */
.rh-auth .auth-form-side{
  display:flex;align-items:center;justify-content:center;
  padding:clamp(24px,5vw,56px);
  background-color:#fff;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:34px 34px;background-position:-1px -1px;
}
.rh-auth .auth-card{
  width:100%;max-width:440px;background:#fff;
  border:2px solid var(--navy);border-radius:24px;box-shadow:9px 9px 0 var(--navy);
  padding:clamp(22px,4vw,34px);
  animation:rhAuthIn .55s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes rhAuthIn{from{opacity:0;transform:translateY(18px) rotate(1deg);}to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){.rh-auth .auth-card{animation:none;}}

.rh-auth .auth-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px;}
.rh-auth .auth-brand-m{display:none;}
.rh-auth .auth-card-top .lang-switcher{margin-left:auto;}
.rh-auth .auth-card h1{font-size:clamp(1.7rem,3vw,2.15rem);line-height:1.05;margin:0 0 8px;}
.rh-auth .auth-card .sub{color:var(--soft);font-size:.98rem;margin:0 0 26px;}
.rh-auth .auth-card .sub::after{
  content:'';display:block;width:56px;height:6px;margin-top:16px;border:2px solid var(--navy);border-radius:999px;background:var(--accent);
}

/* Bahasa */
.rh-auth .lang-switcher{
  appearance:none;-webkit-appearance:none;
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2314226b'><path d='M5.5 7.5l4.5 4.5 4.5-4.5'/></svg>") no-repeat right 10px center/12px;
  border:2px solid var(--navy);border-radius:12px;padding:8px 30px 8px 12px;
  font:700 .84rem/1.2 var(--font-body);color:var(--navy);cursor:pointer;
  box-shadow:0 3px 0 var(--navy);
}

/* Form */
.rh-auth .field{margin-bottom:18px;}
.rh-auth .field label{display:block;font:800 .86rem/1.2 var(--font-body);color:var(--navy);margin-bottom:8px;}
.rh-auth .field input{
  width:100%;padding:13px 15px;border:2px solid var(--navy);border-radius:14px;
  font:600 1rem/1.3 var(--font-body);color:var(--navy);background:#fff;
  transition:box-shadow .12s ease,background .12s ease;
}
.rh-auth .field input::placeholder{color:#8e98c8;font-weight:500;}
.rh-auth .field input:focus{outline:none;background:#fffdf2;box-shadow:4px 4px 0 var(--yellow),4px 4px 0 2px var(--navy);}
.rh-auth #captcha_input{letter-spacing:.14em;text-transform:uppercase;font-weight:800;}

.rh-auth .captcha-box{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.rh-auth .captcha-img{height:56px;border:2px solid var(--navy);border-radius:12px;background:var(--sky);display:block;}
.rh-auth .captcha-refresh{
  flex:0 0 auto;width:48px;height:48px;padding:0;display:inline-flex;align-items:center;justify-content:center;
  background:var(--yellow);color:var(--navy);border:2px solid var(--navy);border-radius:12px;
  font-size:1.3rem;line-height:1;box-shadow:0 3px 0 var(--navy);
  transition:transform .12s ease,box-shadow .12s ease;
}
.rh-auth .captcha-refresh:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--navy);}
.rh-auth .captcha-refresh:active{transform:translateY(2px);box-shadow:0 1px 0 var(--navy);}

/* Tombol */
.rh-auth .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:#fff;color:var(--navy);border:2px solid var(--navy);border-radius:14px;
  padding:14px 22px;font:800 1.02rem/1.1 var(--font-body);
  box-shadow:0 4px 0 var(--navy);
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.rh-auth .btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--navy);}
.rh-auth .btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--navy);}
.rh-auth .btn-block{display:flex;width:100%;}
.rh-auth .btn-primary{background:var(--navy);color:#fff;margin-top:6px;}
.rh-auth .btn-primary:hover{background:#1b2d85;}

/* Peringatan */
.rh-auth .alert{padding:12px 15px;border:2px solid var(--navy);border-radius:14px;font-size:.92rem;font-weight:600;margin-bottom:18px;}
.rh-auth .alert-error{background:var(--coral-soft);color:var(--navy);}

/* Tombol install PWA */
.rh-auth .pwa-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 16px;border:2px dashed var(--navy);border-radius:14px;
  background:var(--accent-soft);color:var(--navy);font:800 .92rem/1.2 var(--font-body);
}
.rh-auth .pwa-btn[hidden]{display:none;}
.rh-auth .pwa-btn:hover{background:var(--yellow-soft);}

/* Tautan peran lain */
.rh-auth .auth-role-links{
  margin-top:24px;padding-top:18px;border-top:2px dashed var(--grid);
  text-align:center;font-size:.92rem;color:var(--soft);font-weight:500;
}
.rh-auth .auth-role-links a{
  color:var(--navy);font-weight:800;border-bottom:3px solid var(--yellow);
  transition:background .12s ease;
}
.rh-auth .auth-role-links a:hover{background:var(--yellow);}

/* Ponsel / tablet: panel kiri diganti header kecil di dalam kartu */
@media(max-width:860px){
  .rh-auth .auth-wrap{grid-template-columns:1fr;}
  .rh-auth .auth-side{display:none;}
  .rh-auth .auth-form-side{min-height:100vh;align-items:flex-start;padding:22px 16px 40px;}
  .rh-auth .auth-card{margin-top:4px;box-shadow:6px 6px 0 var(--navy);}
  .rh-auth .auth-brand-m{display:inline-flex;}
  .rh-auth .auth-brand-m .brand-badge{box-shadow:3px 3px 0 var(--navy);padding:6px 12px;}
  .rh-auth .auth-brand-m img{height:28px;}
}