/* G-SMART PPDB 2027/2028 — dashboard pendaftar HTML prototype
 * Independent local UI; all statuses derived from local draft, not real admissions. */
:root{--ink:#14283a;--sub:#647786;--forest:#073f3a;--forest-deep:#042c2a;--teal:#076653;--mint:#15a87e;--lime:#25bf80;--gold:#f4b847;--line:#e6ecea;--paper:#fff;--bg:#f5f8f7;--shadow:0 8px 30px rgba(14,45,47,.045);--r:15px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--bg);font:14px/1.55 Inter,'Segoe UI',Arial,sans-serif;-webkit-font-smoothing:antialiased}button,input{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}button:disabled{opacity:.55;cursor:default}svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #f5bc55;outline-offset:3px}[hidden]{display:none!important}.svg-sprite{position:absolute;width:0;height:0;pointer-events:none}.skip{position:fixed;top:-100px;left:16px;background:#f5b94b;color:#14283a;padding:12px 20px;z-index:2000}.skip:focus{top:14px}
.shell{min-height:100vh;display:grid;grid-template-columns:245px minmax(0,1fr)}.sidebar{min-height:100%;background:linear-gradient(160deg,#074b44 0%,#04312f 58%,#042625 100%);color:#fff;padding:24px 14px 28px;position:relative;display:flex;flex-direction:column}.sidebar:after{content:'';position:absolute;left:0;right:0;bottom:0;height:265px;background:linear-gradient(0deg,rgba(2,28,27,.95),rgba(3,44,39,.05)),url('assets/kampus-ilustrasi.jpg') center/cover;opacity:.28;pointer-events:none}.sidebar>*{position:relative;z-index:1}.side-logo{margin:0 9px 21px}.side-logo a{display:flex;align-items:center;gap:10px}.side-logo img{width:47px;height:47px;object-fit:contain}.side-logo strong{font-size:23px;letter-spacing:-1.2px;display:block;line-height:1.1}.side-logo small{font-size:10px;color:#b5d6cc;display:block;margin-top:3px;font-weight:650}.side-intro{display:grid;gap:2px;border-top:1px solid #ffffff22;border-bottom:1px solid #ffffff22;padding:19px 11px;margin:0 6px 23px}.side-season{font-size:9px;letter-spacing:1.2px;color:#86c6ae;font-weight:850}.side-intro strong{font-size:23px;letter-spacing:-1px;margin:2px 0}.side-intro>span:last-child{font-size:11px;color:#c1d9d1}.side-section{color:#85c0b1;letter-spacing:1.3px;font-size:10px;font-weight:800;margin:0 14px 11px}.sidebar nav{display:grid;gap:3px}.nav-link{background:transparent;border:0;text-align:left;font-size:12.5px;color:#d5eae3;padding:12px 13px;border-radius:9px;display:flex;align-items:center;gap:13px;font-weight:560;width:100%}.nav-link svg{width:18px;height:18px;stroke-width:1.8}.nav-link:hover{background:#ffffff14}.nav-link.active{background:linear-gradient(96deg,#098365,#08705e);font-weight:750;color:#fff;box-shadow:0 6px 22px #001f1f22}.nav-rule{height:1px;background:#ffffff27;margin:15px 10px}.side-bottom{margin-top:auto;padding:85px 14px 0}.side-quote{font:italic 18px/1.42 Georgia,serif;color:#e7f7e8;display:block;max-width:195px}.side-bottom small{border-top:1px solid #ffffff36;display:block;margin-top:22px;padding-top:15px;font-size:10px;color:#abc9bc;line-height:1.7}.mobile-only{display:none}.menu-toggle{display:none}.nav-backdrop{display:none}
.work-area{min-width:0;display:flex;flex-direction:column}.topbar{height:73px;background:#fff;border-bottom:1px solid #e9efec;display:flex;justify-content:space-between;align-items:center;padding:0 clamp(20px,2.5vw,42px);gap:18px;position:relative;z-index:20}.left-tools,.right-tools{display:flex;align-items:center;gap:13px}.right-tools{position:relative}.icon-button{border:1px solid transparent;background:transparent;width:37px;height:37px;display:grid;place-items:center;border-radius:8px;color:#1b6356}.icon-button:hover{background:#eaf7f1}.icon-button svg{width:20px}.topcrumb{font-size:12px;color:#83948f}.topcrumb span{margin:0 8px;color:#b8c9c0}.topcrumb strong{color:#264d47}.academic-pill{border:1px solid #e4ebe8;border-radius:8px;padding:8px 13px;font-size:9px;color:#8a9d92;font-weight:800;letter-spacing:.65px;display:grid;line-height:1.35}.academic-pill b{font-size:12px;letter-spacing:0;color:#315f54}.notice-button{position:relative}.notice-button i{position:absolute;right:5px;top:4px;width:7px;height:7px;border-radius:50%;background:#f59e0b;border:2px solid #fff}.account-chip{display:flex;align-items:center;gap:10px;border:0;background:transparent;text-align:left;padding:5px 0 5px 9px;border-left:1px solid #ecf0ed}.account-avatar{height:36px;width:36px;border-radius:50%;display:grid;place-items:center;background:#0c7058;color:#fff;font-weight:800}.account-chip b{display:block;font-size:12px}.account-chip small{display:block;color:#899b96;font-size:10px}.account-chip svg{height:16px;width:16px;color:#75948a}.top-popover{position:absolute;right:0;top:53px;width:265px;background:#fff;padding:16px;border:1px solid #e5ece9;border-radius:13px;box-shadow:0 18px 44px #15382d1c;z-index:100;display:grid;gap:8px}.top-popover strong{font-size:13px}.top-popover span{font-size:11px;color:#869790;overflow-wrap:anywhere}.top-popover a,.top-popover button{padding:9px 7px;background:#f5f8f6;border:0;border-radius:6px;text-align:left;font-size:12px;color:#155c4d}.top-popover .danger-link{color:#af424b}.top-popover small{font-size:10px;color:#788f82}.notifications p{font-size:12px;margin:2px 0;color:#38574c}
.main{max-width:1660px;width:100%;margin:0 auto;padding:25px clamp(16px,2.4vw,38px) 24px}.prototype-strip{border:1px solid #eddea9;background:#fff9eb;color:#755c27;border-radius:9px;padding:10px 14px;display:flex;align-items:center;gap:10px;font-size:11px;margin-bottom:17px}.prototype-strip svg{height:17px;width:17px}.prototype-strip span{flex:1}.prototype-strip button{border:0;background:transparent;color:#a98740;font-size:23px;line-height:1}
.hero{min-height:261px;position:relative;overflow:hidden;background:#06483c;display:grid;grid-template-columns:1fr 240px;align-items:center;border-radius:15px;isolation:isolate;box-shadow:var(--shadow);color:#fff}.hero-image{position:absolute;inset:0;z-index:-2;background:url('assets/hero-granada.jpg') center 52%/cover}.hero:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(1,53,48,.98) 0%,rgba(2,59,54,.94) 40%,rgba(3,56,54,.59) 70%,rgba(1,40,38,.35) 100%)}.hero:after{content:'';position:absolute;bottom:-90px;left:48%;width:400px;height:200px;background:rgba(12,156,115,.14);transform:rotate(-24deg);border-radius:100px;z-index:-1}.hero-content{padding:29px 40px}.hero-label{color:#abecd4;font-size:10px;font-weight:900;letter-spacing:1.9px}.hero h1{font-size:clamp(29px,2.65vw,43px);letter-spacing:-1.2px;line-height:1.12;margin:11px 0 9px;font-weight:800}.hero h1 span{color:#ffe4a3}.hero p{color:#dcece5;font-size:13px;max-width:525px;margin:0 0 19px}.hero-actions{display:flex;align-items:center;gap:17px;flex-wrap:wrap}.hero-cta{background:#f3bc55!important;color:#1c4238!important}.hero-side-note{font-size:11px;color:#cfe0d6}.btn{border:0;border-radius:8px;padding:11px 17px;min-height:39px;display:inline-flex;align-items:center;justify-content:center;gap:11px;font-size:12px;font-weight:800;white-space:nowrap;transition:transform .2s}.btn:hover{transform:translateY(-2px)}.btn svg{height:16px;width:16px}.btn-green{color:#fff;background:linear-gradient(110deg,#08705c,#0b9173)}.hero-art{justify-self:center;display:flex;align-items:center;justify-content:center}.hero-frame{width:158px;height:190px;border:1px solid #ffffff60;border-radius:90px 90px 22px 22px;display:flex;align-items:center;justify-content:center;flex-direction:column;backdrop-filter:blur(3px);background:#004a4455;text-align:center}.hero-frame img{width:48px;filter:drop-shadow(0 5px 9px #002c2666)}.hero-frame strong{line-height:1.08;font-size:24px;margin-top:7px;letter-spacing:-.8px}.hero-frame span{font-size:9px;letter-spacing:1.3px;color:#c5e8d4;margin-top:9px}
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:15px;margin:28px 0 13px}.section-overline{display:block;font-size:9px;font-weight:900;letter-spacing:1.6px;color:#0b8d72;margin-bottom:5px}.head-row h2{font-size:21px;letter-spacing:-.6px;margin:0}.last-update{font-size:11px;color:#8fa49b}.summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}.summary-card{border:1px solid #e9eeec;border-radius:12px;background:#fff;padding:18px;display:flex;align-items:center;gap:13px;box-shadow:var(--shadow)}.card-symbol{width:49px;height:49px;display:grid;place-items:center;border-radius:11px;flex:none}.card-symbol.green{color:#087e65;background:#e0f4ec}.card-symbol.blue{color:#247cae;background:#e7f3ff}.card-symbol.amber{color:#bd8331;background:#fff0d6}.card-symbol svg{width:24px;height:24px}.summary-card small{display:block;color:#83968f;font-size:11px}.summary-card strong{display:block;font-size:17px;color:#1a3341;line-height:1.4;margin:1px 0}.summary-card span{display:block;font-size:10.5px;color:#78928a}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.68fr) minmax(290px,.83fr);gap:15px}.dashboard-main,.dashboard-aside{min-width:0;display:flex;flex-direction:column;gap:15px}.panel{background:#fff;border-radius:13px;box-shadow:var(--shadow);border:1px solid #e8efec;padding:21px 22px}.panel-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:19px}.panel-heading h3{font-size:18px;line-height:1.25;letter-spacing:-.3px;margin:0}.panel-heading p{font-size:11px;margin:8px 0 0;color:#7c9589;line-height:1.5}.tag{font-size:10px;padding:7px 10px;border-radius:7px;white-space:nowrap;font-weight:800;display:inline-flex;align-items:center;align-self:flex-start;gap:5px}.tag-muted{background:#f0f4f2;color:#627a73}.tag-green{background:#e1f6ec;color:#0c7c58}.tag-amber{background:#fff3d9;color:#936723}.tag-blue{background:#eaf2ff;color:#4266a0}.simple-link{color:#0b8066;font-size:11px;font-weight:800;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}.simple-link svg{height:14px;width:14px}.simple-link:hover{text-decoration:underline}
.journey-track{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;list-style:none;margin:15px 0 25px;padding:0}.journey-track li{position:relative;display:flex;align-items:center;flex-direction:column;text-align:center;min-width:0;color:#899a96}.journey-track li:not(:last-child):after{content:'';position:absolute;top:17px;left:calc(50% + 22px);right:calc(-50% + 22px);height:2px;background:#e7eeea}.journey-track li.is-done:not(:last-child):after{background:#087d61}.journey-track li>span{height:35px;width:35px;display:grid;place-items:center;border-radius:50%;background:#ebf1ee;font-weight:800;font-size:12px;z-index:1}.journey-track li.is-done>span{background:#087b62;color:#fff}.journey-track li.is-current>span{color:#fff;background:#f2b647}.journey-track li b{font-size:11px;color:#4f7065;margin-top:10px}.journey-track li small{font-size:9px;color:#92a59e;margin-top:4px;line-height:1.3}.progress-row{display:flex;align-items:flex-end;justify-content:space-between;gap:15px}.progress-row strong{font-size:13px;display:block}.progress-row span:not(.progress-number){color:#80948c;font-size:11px;display:block;margin-top:3px}.progress-number{color:#087c62;font-size:19px;font-weight:850}.progress-rail{height:7px;border-radius:10px;background:#eaf0ed;overflow:hidden;margin:11px 0 19px}.progress-rail i{height:100%;width:0;background:linear-gradient(90deg,#08785d,#27b783);border-radius:10px;display:block;transition:width .3s}.next-action{background:#eaf7f1;border:1px solid #d5eee1;display:flex;align-items:center;gap:13px;padding:14px;border-radius:11px}.next-icon{width:39px;height:39px;display:grid;place-items:center;border-radius:10px;background:#d2eddf;color:#087b61;flex:none}.next-icon svg{height:20px;width:20px}.next-action>div:nth-child(2){flex:1}.next-action strong{font-size:12px;color:#175a48}.next-action p{font-size:10.5px;color:#66877b;margin:4px 0 0}.next-action .btn{flex:none}
.candidate-content{display:flex;gap:23px;align-items:center}.candidate-monogram{height:118px;width:106px;border-radius:11px;background:radial-gradient(circle at 50% 26%,#d5f1e5,#ebf5f0);color:#137761;font-size:39px;font-weight:900;letter-spacing:-2px;display:grid;place-items:center;flex:none;border:1px solid #dfece6}.candidate-info{flex:1;min-width:0}.micro-heading{color:#0e9772;font-weight:850;font-size:9px;letter-spacing:1.3px}.candidate-info h4{margin:6px 0 17px;font-size:19px;letter-spacing:-.3px}.candidate-rows{display:grid;grid-template-columns:1fr 1fr;gap:12px}.candidate-rows>div{padding:0 0 4px;min-width:0}.candidate-rows small{font-size:10px;color:#91a49b;display:block}.candidate-rows b{font-size:11px;color:#32504c;overflow-wrap:anywhere}
.documents-list{display:grid;gap:9px}.document-item{display:flex;align-items:center;gap:12px;border:1px solid #e8eeea;background:#fcfdfc;border-radius:9px;padding:11px}.doc-icon{height:36px;width:36px;display:grid;place-items:center;background:#eef8f4;border-radius:8px;color:#147a66;flex:none}.doc-icon svg{width:18px;height:18px}.document-item>div:nth-child(2){flex:1;min-width:0}.document-item b{display:block;font-size:11px}.document-item small{display:block;font-size:10px;color:#91a19a;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.doc-status{font-size:10px;white-space:nowrap;font-weight:750}.doc-status.saved{color:#0b956c}.doc-status.not-saved{color:#a4ada7}.panel-footer{border-top:1px solid #edf1ef;margin-top:16px;padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:15px}.panel-footer>span{font-size:10px;color:#879a8f;display:flex;align-items:center;gap:6px}.panel-footer svg{width:15px;height:15px}.empty-state{border:1px dashed #dce7e2;border-radius:9px;background:#fcfdfc;display:flex;align-items:center;gap:15px;padding:19px}.empty-symbol{height:49px;width:49px;border-radius:12px;background:#eaf5ed;color:#168366;display:grid;place-items:center;flex:none}.empty-symbol svg{height:25px;width:25px}.empty-state h4{font-size:13px;margin:0}.empty-state p{font-size:11px;color:#7a9186;line-height:1.65;margin:5px 0 0}
.small-icon{width:32px;height:32px;background:#edf8f3;border-radius:8px;color:#087960;display:grid;place-items:center}.small-icon svg{width:18px;height:18px}.schedule-list{display:grid;gap:0;margin-left:3px}.schedule-list>div{display:flex;align-items:flex-start;gap:12px;position:relative;padding:1px 0 19px}.schedule-list>div:not(:last-child):before{content:'';position:absolute;left:6px;top:14px;bottom:-3px;width:1px;background:#e4eae7}.schedule-dot{width:13px;height:13px;border:2px solid #b1c2ba;border-radius:50%;background:#fff;flex:none;margin-top:2px;z-index:1}.schedule-dot.green-dot{background:#128265;border-color:#128265}.schedule-list>div>div{flex:1}.schedule-list b{display:block;font-size:12px;color:#3d544e}.schedule-list small{display:block;font-size:10.5px;color:#8fa29a;margin-top:4px}.schedule-list .tag{font-size:9px}.soft-warning{display:flex;align-items:start;gap:8px;color:#876c3b;background:#fff8e7;border:1px solid #f4e8c4;border-radius:8px;padding:11px;font-size:10.5px}.soft-warning svg{width:16px;height:16px;flex:none}.payment-empty{background:#fafcfb;border-radius:9px;padding:16px 12px;text-align:center;border:1px solid #eef2ef;display:flex;flex-direction:column;align-items:center}.payment-icon{height:49px;width:49px;border-radius:50%;background:#e5f5ed;color:#0d8265;display:grid;place-items:center;margin-bottom:9px}.payment-empty strong{font-size:13px}.payment-empty p{font-size:11px;color:#81958e;line-height:1.65;margin:7px 0 13px}.outline-button{color:#0a7c63;border:1px solid #c8e5da;background:#fff;font-size:11px;font-weight:800;min-height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:9px;margin-top:11px}.outline-button svg{width:15px;height:15px}.outline-button:hover{background:#eef9f4}.full{width:100%}.quickhelp>p{font-size:11px;color:#819790;margin:-3px 0 14px}.faq details{border:1px solid #e7ece8;border-radius:9px;margin-bottom:8px}.faq summary{padding:11px 12px;cursor:pointer;font-weight:750;font-size:11px;list-style:none;display:flex;align-items:center;justify-content:space-between}.faq summary:after{content:'+';font-size:17px;color:#6b9988}.faq details[open] summary:after{content:'−'}.faq details p{font-size:10.5px;line-height:1.65;color:#758b82;margin:0 12px 12px}.help-link{display:flex;align-items:center;gap:7px;color:#087e66;font-size:11px;font-weight:850;margin-top:16px}.help-link svg{width:15px;height:15px}.footer{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:10px;color:#9baaa4;border-top:1px solid #e4ece7;margin-top:25px;padding-top:15px}
.modal-cover{position:fixed;inset:0;z-index:300;background:rgba(5,36,33,.68);display:grid;place-items:center;padding:24px}.modal-dialog{background:#fff;max-width:440px;width:100%;padding:29px;border-radius:17px;box-shadow:0 28px 70px #001d1a50;position:relative}.modal-x{position:absolute;right:13px;top:10px;border:0;background:none;font-size:26px;color:#789488}.modal-icon{background:#e8f6ef;width:55px;height:55px;display:grid;place-items:center;color:#057b5c;border-radius:14px}.modal-dialog h3{font-size:23px;margin:17px 0 9px}.modal-dialog p{font-size:12px;color:#6f8479;line-height:1.75}.modal-dialog .modal-note{background:#fff7e3;padding:10px;border-radius:7px;color:#8a6d3d}.modal-dialog .btn{min-width:175px;margin-top:17px}.toast{position:fixed;right:22px;bottom:22px;background:#073f36;color:#fff;padding:13px 18px;border-radius:10px;font-size:12px;box-shadow:0 12px 35px #002d2b4a;z-index:400;max-width:310px}
@media (max-width:1280px){.shell{grid-template-columns:218px minmax(0,1fr)}.hero-art{display:none}.hero{grid-template-columns:1fr}.hero-content{padding:28px}.dashboard-grid{grid-template-columns:minmax(0,1.4fr) minmax(270px,.8fr)}.summary-card{padding:13px}.summary-card strong{font-size:15px}}
@media (max-width:1050px){.menu-toggle{display:grid}.sidebar{position:fixed;left:0;top:0;bottom:0;z-index:120;width:265px;overflow-y:auto;transform:translateX(-100%);transition:transform .22s ease}.shell{display:block}.shell.nav-open .sidebar{transform:translateX(0)}.nav-backdrop{display:block;position:fixed;inset:0;background:#071e1bb3;z-index:110}.close-nav{display:inline-block;position:absolute;right:-3px;top:5px;border:0;background:#ffffff1a;color:#fff;font-size:25px;border-radius:8px;height:33px;width:33px}.dashboard-grid{grid-template-columns:minmax(0,1.5fr) minmax(270px,.95fr)}.summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:800px){.dashboard-grid{grid-template-columns:1fr}.dashboard-aside{display:grid;grid-template-columns:1fr 1fr;align-items:start}.dashboard-aside .quickhelp{grid-column:1/-1}.hero{min-height:242px}.summary-card strong{font-size:16px}}
@media (max-width:630px){.main{padding:13px 13px 26px}.topbar{padding:0 15px;height:61px}.topcrumb{font-size:11px}.account-chip span:nth-child(2),.account-chip svg,.academic-pill{display:none}.right-tools{gap:6px}.hero{min-height:236px}.hero-content{padding:25px 21px}.hero h1{font-size:30px}.hero p{font-size:11.5px}.hero-side-note{display:none}.hero-frame{display:none}.prototype-strip{padding:10px;font-size:10px}.head-row{align-items:flex-start}.head-row h2{font-size:19px}.last-update{max-width:115px;text-align:right;font-size:9.5px}.summary-grid{grid-template-columns:1fr;gap:8px}.summary-card{padding:12px}.card-symbol{height:41px;width:41px}.panel{padding:17px 14px}.panel-heading{margin-bottom:14px}.journey-track{overflow-x:auto;grid-template-columns:repeat(6,minmax(75px,1fr));padding-bottom:8px;margin-left:-2px;margin-right:-2px}.journey-track li b{font-size:10px}.journey-track li small{font-size:8px}.next-action{flex-wrap:wrap}.next-action>div:nth-child(2){flex-basis:calc(100% - 65px)}.next-action .btn{margin-left:auto}.candidate-content{gap:12px;align-items:flex-start}.candidate-monogram{width:64px;height:75px;font-size:25px}.candidate-info h4{font-size:16px}.candidate-rows{grid-template-columns:1fr;gap:7px}.dashboard-aside{display:flex}.panel-footer{flex-wrap:wrap}.doc-status{font-size:9px}.top-popover{right:-9px;max-width:calc(100vw - 24px)}.hero-cta{font-size:11px}.footer{font-size:9px}.panel-heading h3{font-size:16px}.progress-row strong{font-size:12px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}