/* G-SMART PPDB 2027/2028 — standalone five-stage form design system */
:root{--deep:#063f3a;--forest:#075c50;--jade:#0b806b;--mint:#19b486;--gold:#f3b946;--ink:#142d34;--muted:#74867f;--outline:#dce8e3;--canvas:#f6f9f8;--red:#c2474b;--shadow:0 8px 32px rgba(5,51,43,.055)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,'Segoe UI',Arial,sans-serif;background:var(--canvas);color:var(--ink);font-size:14px;-webkit-font-smoothing:antialiased}button,input,textarea,select{font:inherit}button{cursor:pointer}a{text-decoration:none;color:inherit}img{display:block;max-width:100%}[hidden]{display:none!important}*:focus-visible{outline:3px solid #f9c75e;outline-offset:2px}.skip-link{position:absolute;left:10px;top:-60px;z-index:12;background:#fff;border-radius:8px;padding:10px}.skip-link:focus{top:10px}
.shell-header{height:78px;background:#fff;border-bottom:1px solid #e8efeb;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,3.3vw,62px);gap:18px;position:relative;z-index:5}.brand-link{display:flex;align-items:center;gap:11px}.brand-link img{width:49px;height:49px;object-fit:contain}.brand-link span{display:flex;flex-direction:column}.brand-link strong{font-size:24px;color:#075748;font-weight:900;line-height:1.1;letter-spacing:-1.5px}.brand-link small{font-size:10px;color:#74918a;font-weight:800;letter-spacing:.45px;margin-top:4px}.header-right{display:flex;align-items:center;gap:23px}.header-year{font-size:10px;color:#7c9a91;letter-spacing:1px}.header-year b{color:#0a6c59;margin-left:7px;font-size:11px}.header-back{border:1px solid #daebe4;border-radius:8px;padding:10px 15px;color:#0b7560;font-size:12px;font-weight:800;background:#fff}.header-back:hover{background:#edf9f3}.user-dot{width:35px;height:35px;background:#0b7d66;color:#fff;border-radius:50%;display:grid;place-items:center;font-weight:850}
.app-layout{min-height:calc(100vh - 78px);display:grid;grid-template-columns:282px minmax(0,1fr)}.app-sidebar{background:#06463f;color:#fff;position:relative;isolation:isolate;overflow:hidden}.sidebar-scene{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#03463f 0%,#06574ee7 34%,#063c37cc 100%),url('assets/hero-granada.jpg') center bottom/cover;opacity:.99}.app-sidebar:after{content:"";z-index:-1;position:absolute;width:500px;height:500px;top:420px;left:-290px;border:1px solid #ffffff19;border-radius:50%;box-shadow:0 0 0 65px #ffffff06,0 0 0 130px #ffffff07}.sidebar-content{padding:43px 29px;position:sticky;top:0;min-height:calc(100vh - 78px);display:flex;flex-direction:column}.sidebar-label{letter-spacing:2.2px;font-size:10px;color:#8fe5cc;font-weight:800}.sidebar-content h2{font-family:Georgia,'Times New Roman',serif;font-weight:500;font-size:34px;line-height:1.15;letter-spacing:-1px;margin:23px 0}.sidebar-note{line-height:1.8;color:#cbe3da;font-size:13px;margin:0}.sidebar-path{margin-top:67px}.sidebar-path-label{font-size:10px;color:#8bdabf;font-weight:900;letter-spacing:1.5px}.side-steps{padding:0;margin:22px 0 0;list-style:none;display:grid;gap:6px}.side-steps li{display:flex;align-items:center;gap:15px;font-size:12px;color:#beddd1;padding:11px 9px;border-radius:10px;font-weight:700;position:relative}.side-steps li b{display:grid;place-items:center;border:1px solid #6a9f90;height:29px;width:29px;border-radius:8px;color:#c8eddb;font-size:11px}.side-steps li.active{color:white;background:#ffffff24}.side-steps li.active b,.side-steps li.completed b{background:#1cad83;border-color:#1cad83;color:#fff}.sidebar-bottom{border-top:1px solid #ffffff35;padding-top:22px;margin-top:auto;font-size:9px;letter-spacing:1.2px;color:#b0d5c7}
.app-main{min-width:0;max-width:1480px;padding:38px clamp(26px,4vw,74px) 20px;width:100%;margin:auto}.top-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.eyebrow{font-size:11px;letter-spacing:1.7px;color:#0c9c74;font-weight:900}.top-heading h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(28px,2.8vw,43px);font-weight:500;margin:10px 0 8px;letter-spacing:-1.2px;line-height:1.16}.top-heading h1 em{font-weight:400;color:#07836c}.top-heading p{margin:0;font-size:13px;color:#7e9790}.save-status{display:flex;align-items:center;white-space:nowrap;gap:8px;background:#edf8f2;border:1px solid #d9f0e5;padding:9px 13px;border-radius:50px;color:#267963;font-size:11px;font-weight:800}.status-dot{width:7px;height:7px;border-radius:50%;background:#22af81}.demo-banner{display:flex;gap:14px;padding:15px 19px;margin:28px 0 22px;background:#fffaf1;border:1px solid #f3e4be;border-radius:11px;line-height:1.65;color:#856632;font-size:12px}.demo-banner strong{color:#725522}.alert-icon{font-size:21px}.progress-wrap{background:#fff;border:1px solid #e6eeea;border-radius:14px;padding:24px 29px 21px;box-shadow:var(--shadow);margin-bottom:20px}.progress-top{display:flex;justify-content:space-between;font-size:12px;color:#6e8a7e;font-weight:800}.progress-top strong{color:#05856a}.progress-track{height:5px;border-radius:10px;background:#e5efe9;margin:14px 0 23px;overflow:hidden}.progress-track>div{height:100%;width:20%;background:linear-gradient(90deg,#08775e,#2bc48b);border-radius:10px;transition:width .22s}.step-nav{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.step-nav button{background:transparent;border:0;color:#96a7a0;display:flex;flex-direction:column;align-items:center;gap:9px;font-size:11px;position:relative;padding:0 5px;transition:color .15s}.step-nav button span{height:30px;width:30px;border-radius:50%;background:#edf2ef;color:#92a49a;display:grid;place-items:center;font-size:12px;font-weight:900}.step-nav button b{font-weight:700}.step-nav button:disabled{cursor:not-allowed}.step-nav button.current{color:#0a705f}.step-nav button.current span,.step-nav button.completed span{background:#0b7864;color:white}.step-nav button.completed{color:#218267}
#santriForm{background:#fff;border:1px solid #e5eeea;border-radius:15px;padding:clamp(20px,3vw,38px);box-shadow:var(--shadow)}.step-panel{animation:fade .24s ease both}.section-head{display:flex;align-items:flex-start;gap:14px;padding:5px 0 22px;margin-bottom:21px;border-bottom:1px solid #e7efeb}.section-head:not(:first-child){margin-top:42px}.section-icon{height:39px;width:39px;background:#e7f7ee;border-radius:11px;display:grid;place-items:center;color:#0b896c;font-size:24px;flex:none}.section-head h3{font-size:17px;margin:1px 0 6px;font-weight:850;letter-spacing:-.2px}.section-head p{margin:0;font-size:12px;line-height:1.55;color:#879990}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 22px}.form-field{min-width:0}.form-field.wide{grid-column:1/-1}.form-field label{display:block;font-size:12px;font-weight:800;color:#294b44;margin-bottom:9px}.req{color:#e47564}.form-field input,.form-field textarea,.form-field select{width:100%;min-height:46px;border:1px solid #dbe6e1;background:#fcfdfc;border-radius:8px;color:#173a33;padding:11px 13px;outline:none;transition:border-color .15s,box-shadow .15s;font-size:13px}.form-field textarea{min-height:89px;resize:vertical;line-height:1.7}.form-field input:focus,.form-field textarea:focus,.form-field select:focus{border-color:#1fa886;box-shadow:0 0 0 3px #1fa8861a}.form-field input::placeholder,.form-field textarea::placeholder{color:#a7b8b0}.form-field input.invalid,.form-field textarea.invalid,.form-field select.invalid{border-color:var(--red);box-shadow:0 0 0 2px #c2474b16}.form-field .hint{display:block;font-size:10px;line-height:1.5;color:#8b9c97;margin-top:5px}.field-error{display:block;font-size:11px;color:#c34b4e;margin-top:5px}.field-error:empty{display:none}.radio-row{display:flex;gap:22px;align-items:center;height:46px;flex-wrap:wrap}.radio-row label{display:flex;align-items:center;gap:7px;font-weight:650;font-size:12px;margin:0}.radio-row input,.check-control input,.confirm-line input{accent-color:#0c896e;flex:none}.family-box{border:1px solid #e3ede7;border-radius:13px;background:#fbfdfb;padding:22px;margin-top:15px}.family-heading{display:flex;align-items:center;gap:10px;margin-bottom:22px}.family-heading h4{font-size:14px;margin:0 0 5px}.family-heading span{color:#90a49a;font-size:11px}.inline-info{background:#f0f8f4;border:1px solid #dceddf;border-radius:9px;color:#577d6d;font-size:12px;line-height:1.7;padding:14px 16px;margin-bottom:16px}.inline-info strong{color:#0b6a56}.toggle-row{border:1px dashed #c4e5d7;background:#f9fdfb;padding:16px;border-radius:10px;margin:20px 0}.check-control,.confirm-line{display:flex;align-items:flex-start;gap:11px;font-size:12px;line-height:1.6;color:#517266;cursor:pointer}.check-control input,.confirm-line input{height:17px;width:17px;margin-top:1px}.upload-list{display:grid;gap:10px}.upload-card{display:flex;gap:14px;align-items:center;padding:14px 16px;border:1px solid #e2ebe7;border-radius:10px;background:#fbfdfc}.upload-card.ready{border-color:#9edbc7;background:#f6fdf9}.upload-card.error-card{border-color:#d99090}.file-icon{height:44px;width:44px;background:#e8f5ee;color:#07856a;display:grid;place-items:center;border-radius:10px;font-size:22px;flex:none}.upload-copy{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.upload-copy strong{font-size:12px;color:#29423a}.upload-copy small{font-size:10px;color:#9aaaa2}.file-status{font-size:10px;color:#89998f;overflow-wrap:anywhere}.ready .file-status{color:#07896d;font-weight:800}.upload-action{background:#edf8f2;color:#0b775c;border:1px solid #cbe7d8;padding:10px 12px;border-radius:7px;font-weight:850;font-size:11px;white-space:nowrap;cursor:pointer}.upload-action:hover{background:#d8f5e5}.upload-card input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.clear-upload{background:#fff1f1;border:1px solid #f9dfdf;border-radius:6px;color:#c24e4e;font-size:19px;width:26px;height:32px;flex:none}.optional-tag{color:#8eaaa0;font-size:10px;font-weight:500}.review-box{border:1px solid #deebe4;background:#f8fcf9;padding:20px;border-radius:12px;margin:32px 0 20px}.review-heading h3{margin:0 0 5px;font-size:17px}.review-heading p{margin:0 0 19px;color:#839891;font-size:12px}.review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.review-item{background:white;border:1px solid #e6efe9;padding:12px;border-radius:8px;display:flex;flex-direction:column;gap:6px}.review-item span{color:#84998c;font-size:10px}.review-item strong{color:#164739;font-size:12px;overflow-wrap:anywhere}.confirm-line{border-top:1px solid #e3ece6;padding-top:21px}.global-error{border-radius:9px;border:1px solid #f1bbbb;background:#fff3f3;color:#a5333c;padding:13px 16px;font-size:12px;line-height:1.7;margin-bottom:20px}.form-actions{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-top:36px;padding-top:24px;border-top:1px solid #e4ede7}.actions-right{display:flex;align-items:center;gap:10px}.btn-ghost,.btn-save,.btn-next{border-radius:8px;min-height:46px;padding:10px 16px;font-size:12px;font-weight:850;border:1px solid #dbe8e1;background:#fff;color:#48685d}.btn-save{color:#087c61;border-color:#c7e3d5}.btn-next{background:linear-gradient(105deg,#07664e,#10a077);border:0;color:white;min-width:150px;box-shadow:0 10px 22px #087f6021}.btn-next span{margin-left:10px;font-size:17px}.btn-next:hover{filter:brightness(1.06)}.btn-next:disabled{opacity:.6}.btn-save:hover,.btn-ghost:hover{background:#eef8f2}.mobile-tip{font-size:11px;margin:14px 0;color:#9aa9a0}.bottom-note{display:flex;justify-content:space-between;border-top:1px solid #e3ece7;padding:17px 0;margin-top:23px;font-size:10px;color:#96a9a0}.toast{position:fixed;bottom:25px;right:25px;z-index:20;background:#075b4c;color:#fff;padding:14px 19px;border-radius:9px;box-shadow:0 12px 35px #043c2d44;font-size:12px;max-width:390px;line-height:1.6}@keyframes fade{from{opacity:.5;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1240px){.app-layout{grid-template-columns:230px minmax(0,1fr)}.sidebar-content{padding:34px 19px}.sidebar-content h2{font-size:30px}.app-main{padding:33px 26px 20px}}
@media(max-width:950px){.app-layout{display:block}.app-sidebar{display:none}.app-main{max-width:800px;margin:auto;padding:28px 22px}.shell-header{padding:0 22px}.header-year{display:none}}
@media(max-width:680px){.shell-header{height:68px;padding:0 17px}.brand-link img{height:42px;width:42px}.brand-link strong{font-size:20px}.brand-link small{font-size:8px}.header-back{padding:8px 10px;font-size:10px}.header-right{gap:10px}.user-dot{display:none}.app-main{padding:23px 13px}.top-heading{align-items:flex-start}.top-heading h1{font-size:31px}.save-status{font-size:0;padding:9px}.save-status .status-dot{width:9px;height:9px}.demo-banner{margin:23px 0 17px;padding:13px;font-size:11px}.progress-wrap{padding:20px 12px}.step-nav{gap:2px}.step-nav button{font-size:9px}.step-nav button span{height:28px;width:28px;font-size:11px}.step-nav button b{max-width:60px}.form-grid,.review-grid{grid-template-columns:1fr;gap:17px}.form-field.wide{grid-column:auto}.radio-row{height:auto;min-height:45px}#santriForm{padding:19px 15px}.section-head{gap:10px}.section-icon{width:34px;height:34px}.section-head h3{font-size:16px}.section-head p{font-size:11px}.upload-card{padding:12px 10px;gap:9px}.file-icon{height:34px;width:34px;font-size:18px}.upload-action{font-size:10px;padding:9px 8px}.family-box{padding:15px}.form-actions{flex-wrap:wrap}.actions-right{flex:1;justify-content:flex-end}.btn-ghost,.btn-save,.btn-next{font-size:11px;padding:10px}.btn-next{min-width:auto}.bottom-note{gap:10px;flex-wrap:wrap}}
@media(max-width:370px){.step-nav button b{font-size:8px}.header-back{font-size:0}.header-back:first-letter{font-size:18px}.actions-right{gap:6px}.btn-save{padding:10px 8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.shell-header,.app-sidebar,.form-actions,.demo-banner,.save-status,.step-nav,.mobile-tip,.bottom-note{display:none!important}.app-layout{display:block}body{background:white}.app-main{padding:0}#santriForm{border:0;box-shadow:none}}

.sample-button{border:1px solid #e7c77d;background:#fff;border-radius:7px;color:#866021;font-size:11px;font-weight:850;padding:9px 12px;white-space:nowrap;align-self:center}.sample-button:hover{background:#fff0cc}@media(max-width:700px){.demo-banner{flex-wrap:wrap}.sample-button{margin-left:30px;align-self:auto}}