:root{
    --sky-blue:#1269d6;
    --sky-blue-2:#2584f3;
    --sky-deep:#061a3b;
    --sky-deeper:#020814;
    --sky-ink:#153b72;
    --sky-muted:#7189aa;
    --sky-line:#cfe0f5;
    --lamp-metal:#b9c0c8;
    --lamp-metal-dark:#4b5562;
    --lamp-shade-off:#e8e2d9;
    --lamp-shade-on:#fff7dc;
    --lamp-warm:#ffd86b;
}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body.skycbt-login-page{
    background:#020814;
    color:#fff;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    overflow-x:hidden;
}
.skycbt-login-shell{
    position:relative;
    min-height:100vh;
    width:100%;
    overflow:hidden;
    display:grid;
    grid-template-columns:minmax(360px,1fr) minmax(430px,560px);
    align-items:center;
    gap:clamp(35px,6vw,100px);
    padding:55px clamp(28px,7vw,120px);
    background:
        radial-gradient(circle at 27% 52%,rgba(18,105,214,.10),transparent 28%),
        radial-gradient(circle at 78% 45%,rgba(29,128,240,.10),transparent 32%),
        linear-gradient(135deg,#020814 0%,#061b3e 52%,#082b5a 100%);
    transition:background .8s ease;
}
.skycbt-login-shell:before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(90deg,rgba(255,255,255,.012),transparent 45%,rgba(255,255,255,.018));
}
.skycbt-scene-glow{
    position:absolute;left:23%;top:37%;width:430px;height:430px;border-radius:50%;
    background:rgba(255,208,86,0);filter:blur(60px);opacity:0;
    transition:opacity .8s ease,background .8s ease;pointer-events:none;
}
.skycbt-lamp-side{
    position:relative;z-index:2;min-height:650px;
    display:flex;align-items:center;justify-content:center;
}
.skycbt-lamp-stage{
    position:relative;width:min(420px,42vw);height:630px;
    filter:drop-shadow(0 25px 28px rgba(0,0,0,.34));
    aspect-ratio:2 / 3;
}
.skycbt-lamp-svg{
    position:absolute;inset:0;width:100%;height:100%;display:block;
    overflow:visible;z-index:3;
    pointer-events:none;
    preserveAspectRatio:xMidYMid meet;
}
.skycbt-lamp-glow{
    position:absolute;left:50%;top:120px;width:350px;height:390px;
    transform:translateX(-50%);border-radius:50%;
    background:transparent;filter:blur(45px);opacity:0;z-index:1;
    transition:opacity .8s ease,transform .8s ease;
}
/* Payung/dome lampu mengikuti siluet contoh: kubah membulat dengan bibir bawah melengkung. */
.skycbt-lamp-shade{
    stroke:rgba(255,255,255,.34);stroke-width:.8;
    fill:url(#skycbtShadeOff);
    filter:drop-shadow(0 7px 6px rgba(0,0,0,.28));
    transition:fill .55s ease,filter .55s ease,stroke .55s ease;
}
.skycbt-inner-glow{opacity:0;transition:opacity .55s ease;}
.skycbt-svg-neck,.skycbt-svg-pole,.skycbt-svg-base{vector-effect:non-scaling-stroke}
.skycbt-svg-neck{filter:drop-shadow(0 2px 3px rgba(0,0,0,.28))}
.skycbt-svg-pole{filter:drop-shadow(0 0 4px rgba(255,255,255,.10))}
.skycbt-svg-base{filter:drop-shadow(0 15px 18px rgba(0,0,0,.42))}
.skycbt-lamp-light-pool{
    position:absolute;left:50%;bottom:28px;width:315px;height:72px;
    transform:translateX(-50%);border-radius:50%;z-index:1;
    background:rgba(255,220,111,0);filter:blur(12px);
    transition:background .8s ease,box-shadow .8s ease,opacity .8s ease;
}
/* Tali berada di belakang shade. Hanya bagian kanan tali dan bandul yang terlihat,
   sehingga tidak tampak menempel pada permukaan lampu. */
.skycbt-pull-cord{
    position:absolute;z-index:2;left:65%;top:178px;
    width:60px;height:430px;border:0;background:none;padding:0;
    cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;pointer-events:auto;
    --pull:0px;--pull-progress:0;--snap-duration:420ms;
}
.skycbt-pull-cord:focus-visible{
    outline:2px solid #7eb6ff;outline-offset:4px;border-radius:24px;
}
.skycbt-pull-cord:active,.skycbt-pull-cord.is-pulling{cursor:grabbing}
.skycbt-pull-cord .cord-line{
    position:absolute;left:50%;top:0;width:2px;pointer-events:none;
    height:calc(105px + var(--pull));transform:translateX(-50%);
    transform-origin:top center;
    background:linear-gradient(#aab3bc,#58626d 70%,#303943);
    border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.30);
    transition:height .045s linear;
}
.skycbt-pull-cord .cord-handle{
    position:absolute;left:50%;top:105px;pointer-events:none;
    transform:translate(-50%,var(--pull));
    width:24px;height:42px;border-radius:48% 48% 45% 45%;
    background:linear-gradient(145deg,#b9c2cb 0%,#66727f 48%,#303b46 100%);
    border:1px solid #7d8995;
    box-shadow:4px 8px 13px rgba(0,0,0,.38),inset 2px 2px 4px rgba(255,255,255,.22),inset -3px -4px 5px rgba(0,0,0,.25);
    font-size:0;
    transition:transform var(--snap-duration) cubic-bezier(.16,1.35,.3,1),background .4s,box-shadow .25s;
}
.skycbt-pull-cord .cord-handle:after{
    content:"";position:absolute;left:50%;top:7px;width:5px;height:19px;
    transform:translateX(-50%);border-radius:4px;
    background:rgba(255,255,255,.20);
}
.skycbt-pull-cord.is-pulling .cord-handle{
    transition:none;
    box-shadow:7px 11px 18px rgba(0,0,0,.42),inset 2px 2px 4px rgba(255,255,255,.25),inset -3px -4px 5px rgba(0,0,0,.25);
}
.skycbt-pull-cord.pull-complete .cord-handle{animation:skycbt-cord-pop .18s ease-out}
.skycbt-pull-cord.is-snapping .cord-handle{
    transition:transform var(--snap-duration) cubic-bezier(.16,1.35,.3,1),background .4s,box-shadow .25s;
}
@keyframes skycbt-cord-pop{0%{scale:1}55%{scale:.91}100%{scale:1}}
.skycbt-lamp-instruction{
    position:absolute;left:4%;bottom:38px;color:#9eb7d7;font-size:18px;line-height:1.18;
    text-align:center;transform:rotate(-2deg);transition:opacity .5s;
}
.instruction-arrow{display:block;font-size:42px;color:#7eb6ff;margin-bottom:2px}
.skycbt-lamp-status{
    position:absolute;left:50%;bottom:4px;transform:translateX(-50%);
    font-size:11px;color:#637b9d;letter-spacing:.12em;text-transform:uppercase;
}
.skycbt-login-panel{
    position:relative;z-index:3;width:100%;opacity:0;visibility:hidden;
    transform:translateX(70px) scale(.97);
    transition:opacity .7s ease,transform .7s cubic-bezier(.2,.75,.25,1),visibility .7s;
}
.skycbt-login-card{
    width:100%;padding:32px 38px 24px;background:rgba(249,252,255,.98);
    border:1px solid rgba(255,255,255,.9);border-radius:26px;
    box-shadow:0 30px 80px rgba(0,0,0,.35),0 0 0 1px rgba(54,140,246,.08);
    color:var(--sky-ink);
}
.skycbt-card-logo{text-align:center;margin-bottom:20px}
.skycbt-card-logo img{display:block;width:min(100%,320px);height:auto;margin:0 auto}
.skycbt-login-heading{margin-bottom:22px}
.skycbt-login-heading .eyebrow{color:#1675e5;font-size:11px;font-weight:900;letter-spacing:.18em;margin-bottom:7px}
.skycbt-login-heading h1{margin:0;font-size:31px;line-height:1.1;font-weight:800;letter-spacing:-.5px;color:#173d73}
.skycbt-login-heading p{margin:7px 0 0;color:var(--sky-muted);font-size:14px}
.skycbt-message{min-height:0;margin-bottom:12px}
.skycbt-message .alert{border-radius:10px;font-size:13px;padding:10px 12px;margin-bottom:12px}
.skycbt-field{margin-bottom:17px}
.skycbt-field label{display:block;font-size:13px;font-weight:800;color:#34537c;margin-bottom:7px}
.skycbt-input-wrap{position:relative}
.skycbt-input-wrap .sky-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#7f95b2;font-size:14px;pointer-events:none;z-index:2}
.skycbt-input-wrap input{width:100%;height:50px;padding:0 44px 0 40px;border:1px solid var(--sky-line);border-radius:12px;background:#fff;color:#19365f;font-size:14px;outline:none;transition:border-color .15s,box-shadow .15s}
.skycbt-input-wrap input:focus{border-color:#4c8fe0;box-shadow:0 0 0 3px rgba(18,105,214,.11)}
.skycbt-input-wrap input.has-error{border-color:#d92d20}
.skycbt-toggle{position:absolute;right:0;top:0;width:46px;height:50px;border:0;background:transparent;color:#7d91ad;cursor:pointer}
.skycbt-help{font-size:12px;color:#b42318;margin-top:5px}
.skycbt-submit{width:100%;height:50px;border:0;border-radius:12px;background:linear-gradient(135deg,var(--sky-blue),#0b55b4);color:#fff;font-size:14px;font-weight:800;box-shadow:0 10px 22px rgba(18,105,214,.22);cursor:pointer}
.skycbt-submit:hover:not(:disabled){filter:brightness(1.05)}
.skycbt-submit:disabled{opacity:.65;cursor:wait}
.skycbt-forgot{display:block;text-align:center;margin-top:14px;color:#0d61c5;font-size:13px;font-weight:700;text-decoration:none}
.skycbt-forgot:hover{text-decoration:underline}
.skycbt-footer{text-align:center;margin-top:22px;padding-top:17px;border-top:1px solid #e6edf6;color:#879bb5;font-size:11px;line-height:1.7}
.skycbt-footer strong{color:#5e7595}
.skycbt-school-link{color:#0b56b6;font-weight:800;text-decoration:none}

.skycbt-login-shell.is-lit{
    background:
        radial-gradient(circle at 25% 51%,rgba(255,220,113,.13),transparent 28%),
        radial-gradient(circle at 78% 45%,rgba(29,128,240,.15),transparent 32%),
        linear-gradient(135deg,#06132b 0%,#082d5c 52%,#0a4482 100%);
}
.skycbt-login-shell.is-lit .skycbt-scene-glow{background:rgba(255,213,94,.22);opacity:1}
.skycbt-login-shell.is-lit .skycbt-lamp-glow{
    background:radial-gradient(circle,rgba(255,235,166,.88) 0%,rgba(255,211,91,.38) 30%,rgba(255,200,67,.09) 65%,transparent 76%);
    opacity:1;animation:skycbt-lamp-breathe 3.4s ease-in-out infinite;
}
.skycbt-login-shell.is-lit .skycbt-lamp-shade{
    fill:url(#skycbtShadeOn);
    stroke:#fff4c7;
    filter:drop-shadow(0 0 28px rgba(255,222,113,.38));
}
.skycbt-login-shell.is-lit .skycbt-inner-glow{opacity:.68;}
.skycbt-login-shell.is-lit .skycbt-lamp-light-pool{
    background:rgba(255,220,111,.28);
    box-shadow:0 0 35px 20px rgba(255,218,105,.11);
}
.skycbt-login-shell.is-lit .skycbt-pull-cord .cord-handle{
    background:linear-gradient(145deg,#fff8e4,#d9cba5);
    border-color:#fff6d3;
    box-shadow:5px 8px 15px rgba(0,0,0,.32),inset 2px 2px 4px rgba(255,255,255,.5),inset -3px -4px 5px rgba(145,107,28,.18);
}
.skycbt-login-shell.is-lit .skycbt-login-panel{opacity:1;visibility:visible;transform:none}
@keyframes skycbt-lamp-breathe{
    0%,100%{opacity:.88;transform:translateX(-50%) scale(.98)}
    50%{opacity:1;transform:translateX(-50%) scale(1.035)}
}

@media(max-width:980px){
    .skycbt-login-shell{grid-template-columns:1fr;gap:20px;padding:28px 20px 40px;overflow:auto}
    .skycbt-lamp-side{min-height:610px}
    .skycbt-lamp-stage{height:585px;width:min(390px,82vw)}
    .skycbt-login-panel{max-width:560px;margin:0 auto}
}
@media(max-width:600px){
    .skycbt-login-shell{padding:18px 12px 28px}
    .skycbt-lamp-side{min-height:515px}
    .skycbt-lamp-stage{height:500px;width:333px;max-width:96vw}
    .skycbt-lamp-glow{top:86px;width:280px;height:300px}
    .skycbt-lamp-light-pool{bottom:18px;width:235px}
    .skycbt-pull-cord{left:65%;top:150px;height:340px}
    .skycbt-pull-cord .cord-line{height:calc(105px + var(--pull))}
    .skycbt-pull-cord .cord-handle{top:105px}
    .skycbt-lamp-instruction{left:0;bottom:0;font-size:15px}
    .instruction-arrow{font-size:32px}
    .skycbt-lamp-status{display:none}
    .skycbt-login-card{padding:25px 20px 20px;border-radius:20px}
    .skycbt-card-logo img{width:min(100%,270px)}
    .skycbt-login-heading h1{font-size:27px}
}
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{transition:none!important;animation:none!important}
}

/* Prevent browser scrolling/text selection while the pull cord is being dragged. */
body.skycbt-dragging-lamp{cursor:grabbing!important;user-select:none!important;-webkit-user-select:none!important;}