/* Shared visual system for the competition prototype. Screen-only document
   treatment keeps the existing A4 print layout intact. */
:root{--bg:#f3f6f3;--panel:#fff;--table:#fff;--line:#dfe7e1;--muted:#586d61;--muted2:#657c70;--kertas:#fbfcf6;--r-card:18px;--r-btn:10px}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:#c3e956;color:#06231d}
button,input,select,textarea{accent-color:#16694d}
.sidebar{width:264px;flex-basis:264px;padding:30px 20px 24px;background:radial-gradient(ellipse at top left,#184b38,transparent 65%),#082b23}
.sidebar>.logo{padding:0 12px;font-size:28px}
.sidebar .role{font-size:18px;line-height:1.45;margin:35px 12px 22px;font-weight:500}
.workspace-label{display:block;color:#9db8aa;font:600 9px/1.5 var(--font-body);letter-spacing:2px;margin-bottom:9px}
.sidebar nav{gap:6px}.sidebar nav a{padding:12px;border-radius:10px;gap:12px;font-size:13px;line-height:1.5;transition:background .18s,color .18s}
.sidebar nav a::before{display:none}.sidebar nav a:hover{background:#ffffff0c;color:#fff}
.sidebar nav a.active{background:#c3e956;color:#123426;box-shadow:0 4px 18px #00000010}
.nav-icon{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sidebar .foot{margin-top:auto;padding:26px 12px 0;font-size:11px;line-height:1.7;color:#abc4b6}
.workspace-org{border-top:1px solid #ffffff1c;padding-top:20px;color:#e3eee7;font-size:12px;font-weight:600}
.sidebar .foot p{margin:5px 0 12px}.sidebar .foot .sesi{display:block;font-size:11px;color:#c3e956}.sidebar .foot a{margin-top:12px;color:#b4cdbf}
.topbar{min-height:78px;padding:18px 38px;background:#ffffffb8;border-bottom:1px solid var(--line);font-size:12px;gap:16px}
.topbar .search{color:var(--muted);gap:12px;align-items:center}.workspace-section{font-weight:600;color:var(--ink)}.topbar-divider{color:#a4b5a8}
.topbar .right{gap:12px}.demo-badge{display:inline-flex;align-items:center;gap:7px;border:1px solid #dce6dc;border-radius:99px;padding:5px 10px;font-size:10px;color:#45634e}.demo-badge::before{content:'';width:5px;height:5px;background:#598446;border-radius:50%}
.user-avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#e7eedf;color:#254932;font-size:11px;font-weight:700;margin-left:7px}
.content{padding:32px 38px 48px;max-width:1600px;margin-inline:auto}
h1.page{font-size:36px;font-weight:500;letter-spacing:-.8px;line-height:1.2;margin:0 0 12px}.sub{font-size:14px;line-height:1.7}
.meta-chip{color:#597263;font-size:10px;font-weight:500;margin:14px 0 24px;letter-spacing:.2px}.meta-chip::before{width:5px;height:5px;background:#619347}
.card{padding:26px;border:1px solid var(--line);box-shadow:0 3px 12px #143d2403}
.card h2{font-size:22px;font-weight:500;letter-spacing:-.3px;margin-bottom:20px}.card h3{font-size:18px;font-weight:500}
.grid{gap:20px}.layout{gap:24px;grid-template-columns:minmax(0,1fr) 330px}.layout.rev{grid-template-columns:330px minmax(0,1fr)}
.stat .num,.stat-lg,.big-num{font-weight:500;letter-spacing:-1px;font-variant-numeric:tabular-nums}.stat .lab{font-size:12px}.stat .cap{font-size:12px}.stat .num{margin:12px 0 6px}.stat-lg{font-size:32px}
.demo-next{background:#edf4e6;border-color:#d7e5cb;border-radius:12px;padding:16px 20px;margin:0 0 24px;font-size:13px}.demo-next .btn{font-size:12px;padding:11px 16px}
.btn{min-height:44px;justify-content:center;padding:12px 19px;font-size:13px;line-height:1.4;transition:background .18s,box-shadow .18s,transform .18s}
.btn-primary{background:#143f30;color:#fff}.btn-primary:hover{background:#20543d;box-shadow:0 4px 12px #123f301a}.btn-ghost:hover{background:#f1f6ed;border-color:#bdcfbf}.btn-lime:hover{box-shadow:0 4px 12px #123f301a}.btn:active:not(:disabled){transform:translateY(1px)}
.btn-off,.btn:disabled{background:#e9eeea;color:#66786d;box-shadow:none}.btn-row{gap:10px;margin-top:22px}
.field{margin-bottom:22px}.field label{font-size:12px;line-height:1.6;margin-bottom:8px;color:#345242}
.field input,.field select,.field textarea,.pform .field textarea{border:1px solid #cfdbd1;border-radius:9px;padding:11px 13px;background:#fcfdfb;color:var(--ink);font:400 14px/1.5 var(--font-body);min-height:44px;transition:border-color .18s,box-shadow .18s;max-width:100%}
.field input:focus,.field select:focus,.field textarea:focus,.pform .field textarea:focus{border-color:#4a8562;outline:2px solid #88ad7733;outline-offset:1px;background:#fff}
.field input[type=file]{font-size:12px;padding:7px}.field input::file-selector-button{border:0;border-radius:5px;background:#e6efdf;color:#244d35;padding:7px 10px;margin-right:10px;cursor:pointer}
.field input::placeholder,.field textarea::placeholder{color:#718577}.check{font-size:12px;line-height:1.7;gap:10px}.check input{margin-top:5px}
.password-toggle{font-size:12px;min-height:44px}.tabs{background:#e7ede7;border:1px solid #dce5dc;border-radius:10px;padding:4px;max-width:100%;flex-wrap:wrap}.tabs button,.tabs a{font-size:12px;padding:10px 15px;border-radius:7px}.tabs .active{box-shadow:0 2px 5px #082b2310}
table.tbl{font-size:12.5px;border:1px solid var(--line);border-collapse:separate;border-spacing:0;background:#fff;border-radius:10px}
table.tbl th{background:#f1f5ef;color:#4b6253;font-size:11px;padding:13px 14px;font-weight:600;line-height:1.6}
table.tbl td{padding:15px 14px;line-height:1.65}table.tbl tr:hover td{background:#f9fbf7}table.tbl td a{color:#216044}
table.tbl .st-ok,table.tbl .st-tinjau,table.tbl .st-gagal,table.tbl .st-tunggu{display:inline-block;padding:3px 8px;border-radius:6px;font-size:11px;line-height:1.6}
table.tbl .st-ok{background:#e9f3e5;color:#286044}table.tbl .st-tinjau{background:#fbf2d9;color:#75601e}table.tbl .st-gagal{background:#f9eae5;color:#9b392e}table.tbl .st-tunggu{background:#edf1ed;color:#53695c}
.note,.warn,.alert{padding:18px 20px;font-size:13px;line-height:1.75;border-radius:10px}.note{background:#f0f6e8;border-color:#d8e7c9}.warn{background:#fcf8eb;border-color:#e9dfba}.alert{background:#fbefeb;border-color:#edcec5}.note b{font-size:13px}
.banner{background:radial-gradient(ellipse at right top,#34634a,transparent 65%),#123d2f;padding:30px;border:1px solid #26543e}.banner h2{font-weight:500;letter-spacing:-.6px}.banner .label{font-size:10px;letter-spacing:2px}
.larik .box{background:linear-gradient(#f2f6ec,#e7eee1);border:1px solid #dde6d4;border-radius:9px}.larik .bar{width:36%;background:linear-gradient(180deg,#bedb67,#3b8060);border-radius:5px 5px 2px 2px}.larik .nama{font-size:12px}.larik .nilai{font-size:14px;font-variant-numeric:tabular-nums}.larik .ambang{font-size:11px}
.pill{padding:5px 11px;font-size:11px;background:#edf4e5}.foot-note{font-size:11px;line-height:1.8}.quiz-option{padding:17px;background:#fbfcf9;border-color:#dce5d9;font-size:14px}.quiz-option:has(input:checked){background:#edf5e4;border-color:#87a86c}.mintbox{background:#f5f8f0}.track{font-size:12px;background:#eaf0e6}.tl .desc{line-height:1.8}.tl .what{font-size:14px}
.phead{background:#fbfcf6f5;backdrop-filter:blur(16px)}.phead .pin{height:84px;gap:38px}.pnav{gap:28px;font-size:13px}.pnav a{padding:10px 0}.phead .btn{font-size:12px}.pin,.psec,.pform{max-width:1400px}
.hero{padding-top:80px;background:radial-gradient(ellipse at 85% 30%,#e1edca,transparent 53%)}.hero h1{font-weight:500;letter-spacing:-2px;font-size:64px;line-height:1.08}.hero .sub{font-size:16px;line-height:1.85}.plabel{font-size:10px;letter-spacing:2px;color:#547150}.psec{padding-top:92px;padding-bottom:92px}.psec h2{font-weight:500;letter-spacing:-1px;font-size:42px}.psec .sub{font-size:15px;line-height:1.85}
.pcard{padding:28px;border-radius:16px;box-shadow:0 4px 16px #153c2704}.pcard h3{font-size:21px;font-weight:500}.pcard p{font-size:13px;line-height:1.85}.pcard .num{font-size:10px;letter-spacing:1.6px}.pcard .bignum{font-weight:500;letter-spacing:-.6px}.pgrid{gap:22px;margin-top:38px}
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:60px;align-items:center;padding-bottom:50px}.hero-copy{min-width:0}.hero-preview{border:1px solid #cfdcc7;border-radius:20px;overflow:hidden;box-shadow:0 24px 60px #1b432415;background:#fff;transform:rotate(1deg)}.hero-preview-head{background:#123d2f;display:flex;align-items:center;justify-content:space-between;padding:22px 26px;gap:12px}.hero-preview-head>span:last-child{color:#c8dbbf;font-size:8px;letter-spacing:1.4px}.hero-preview-body{padding:30px}.hero-preview h2{font-size:32px;letter-spacing:-.6px;line-height:1.2}.hero-preview .plabel{font-size:9px;letter-spacing:1.5px}.hero-steps{list-style:none;padding:0;margin:28px 0;display:grid;gap:22px}.hero-steps li{display:flex;align-items:flex-start;gap:16px}.hero-steps li>span{display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;border-radius:50%;background:#edf3e6;color:#427040;font-size:10px;font-weight:600}.hero-steps b{font-size:13px;font-weight:600}.hero-steps p{font-size:11px;color:var(--muted);margin:5px 0 0;line-height:1.6}.hero-preview-foot{display:flex;align-items:center;gap:9px;border-top:1px solid var(--line);padding-top:20px;font-size:10px;color:#4e6954}.hero-status-dot{width:6px;height:6px;background:#77a444;border-radius:50%;flex-shrink:0}
.hero{padding-left:48px;padding-right:48px}.hero-preview{min-width:0}
@media(max-width:1100px){.hero{grid-template-columns:1fr;gap:34px;padding-left:26px;padding-right:26px}.hero-preview{max-width:600px;transform:none}.hero h1{max-width:20ch}}
.pdark{background:radial-gradient(ellipse at top right,#234e38,transparent 60%),#082b23}.pcta{background:radial-gradient(ellipse at left,#295a3f,transparent 65%),#082b23}.pband{background:linear-gradient(120deg,#e4efb9,#b7d779)}.plarik{background:#fcfdf5;border:1px solid #d9e3cc;padding:30px;box-shadow:0 20px 50px #193c2710}.pmock{background:#fff;border-color:#d9e3d5;padding:24px}.pchat{background:#f0f5e9}.pbubble{background:#dfedcf;font-size:13px;line-height:1.8}
.pfoot{padding:58px 0;background:#082b23}.pfoot .tag{font-size:18px}.pfoot .rows{font-size:12px;line-height:2.6}.pform{padding-top:58px}.pform h1{font-weight:500;letter-spacing:-1px}.pform .crumb{font-size:10px;letter-spacing:2px}
.login{background:#f7f9f4}.login .left{width:42%;padding:54px;background:radial-gradient(ellipse at bottom right,#345a38,transparent 65%),#082b23;position:relative}.login .left .tag{margin-top:64px;font-size:10px;letter-spacing:2px;color:#c3e956}.login .left h1{font-size:clamp(38px,3.7vw,56px);font-weight:400;letter-spacing:-1px;line-height:1.15;margin-bottom:44px}.turi-card{background:#ffffff06;border-color:#ffffff20;padding:26px;align-items:flex-start;gap:18px}.turi-card p{font-size:13px;line-height:1.8}.login .left .small{font-size:12px;color:#b7c9b5;line-height:1.8;max-width:38ch}.login .right{padding:48px clamp(36px,5.3vw,84px);background:#f9fbf6;min-width:0}.login .right h1{font-size:36px;font-weight:500;letter-spacing:-.8px;margin-top:32px}.login .right .sub{font-size:12px;line-height:1.8}.login .right .back{font-size:12px}.login .right .note{font-size:12px}.login .right>.btn-primary{width:100%;margin-top:8px}.otp input{border-color:#cbd9c9;background:#fff}.help{max-width:1360px}.help h1{font-weight:500;letter-spacing:-1px}
@media screen{.doc{background:#edf1eb;padding:48px 60px}.doc .wrap{background:#fff;max-width:940px;margin:auto;padding:48px 54px;border:1px solid #dbe2d7;box-shadow:0 10px 40px #153c2708;border-radius:4px}.docbar{margin:-48px -60px 36px;background:#123d2f;padding:16px 60px}.doc h1{font-weight:500;letter-spacing:-.6px;font-size:32px}.doc .green{background:#eef4e5;border:1px solid #d8e5cd}.doc .green .big{font-size:44px;font-weight:500}.doc .side{background:#f8faf4}}
@media(max-width:1200px){.content{padding:28px}.topbar{padding:18px 28px}.layout,.layout.rev{grid-template-columns:1fr}.login .right{padding:40px}.sidebar{width:240px;flex-basis:240px}.hero h1{font-size:54px}.phead .pin{gap:24px}.pnav{gap:18px}}
@media(max-width:1100px){.login .left{width:100%}.login .left .tag{margin-top:32px}.hero h1{font-size:44px}.psec h2{font-size:34px}}
@media(max-width:760px){.shell{flex-direction:column}.sidebar{width:100%;flex-basis:auto;padding:20px}.sidebar .role{margin:16px 12px}.sidebar nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.sidebar .foot{padding-top:12px}.sidebar .foot>a,.sidebar .foot>p,.workspace-org{display:none}.topbar{padding:14px 20px;flex-wrap:wrap}.content{padding:24px 18px}.grid.g2,.grid.g3,.dfs{grid-template-columns:1fr}.demo-next{align-items:flex-start;flex-direction:column;gap:12px}.hero h1{font-size:40px}.psec{padding-top:54px;padding-bottom:54px}.login .left,.login .right{padding:30px 24px}.phead .pin{gap:12px}.phead .btn{padding:10px;font-size:11px}.doc{padding:28px 18px}.doc .wrap{padding:28px 22px}.docbar{margin:-28px -18px 24px;padding:16px 18px;flex-wrap:wrap}.card{padding:20px}.topbar .right{margin-left:0}.sidebar nav a{font-size:12px}.otp{gap:6px}.otp input{width:calc((100% - 30px)/6);max-width:58px}}
@media print{.nav-icon,.workspace-label{display:none}.card{box-shadow:none}table.tbl{font-size:11px}.doc .wrap{border:0;box-shadow:none}.btn{box-shadow:none}}