:root{--bg:#f4f7f6;--surface:#fff;--surface-2:#f8fbfa;--ink:#17342d;--muted:#6b7d77;--line:#dfe8e5;--brand:#145846;--brand-2:#0d3f34;--brand-soft:#eaf5f1;--success:#247a55;--warning:#a66a00;--danger:#b64242;--shadow:0 12px 30px rgba(25,61,51,.08);--radius:18px;--sidebar:280px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:14px}a{color:inherit}.app-shell{min-height:100vh}.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar);background:linear-gradient(180deg,#ffd92f 0%,#f3c800 58%,#dbae00 100%);color:#242619;padding:18px 14px;z-index:40;display:flex;flex-direction:column;box-shadow:16px 0 45px rgba(133,103,0,.16)}.sidebar-head{display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;padding:8px}.brand-mark{width:44px;height:44px;border-radius:14px;background:linear-gradient(145deg,#fff,#e9f4f0);display:grid;place-items:center;color:#0f493b;font-weight:850;letter-spacing:-1px;box-shadow:0 8px 18px rgba(0,0,0,.12)}.brand-mark.light{background:rgba(255,255,255,.96)}.brand-copy{display:flex;flex-direction:column;gap:2px}.brand-copy strong{font-size:15px;letter-spacing:.2px}.brand-copy span,.showcase-brand span{font-size:11px;color:#6f5b00;letter-spacing:.55px}.nav-caption{font-size:10px;letter-spacing:1.25px;color:#735d00;font-weight:900;margin:24px 12px 8px}.nav-caption.section{margin-top:23px}.nav-menu{display:flex;flex-direction:column;gap:5px}.nav-link{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;text-decoration:none;color:#312d17;font-weight:750;transition:.18s ease}.nav-link:hover{background:rgba(255,255,255,.45);color:#171811;transform:translateX(2px)}.nav-link.active{background:#242619;color:#fff;box-shadow:0 8px 18px rgba(72,58,0,.16),inset 3px 0 0 #fff1a1}.nav-icon{width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.42);display:grid;place-items:center;font-size:16px;color:#2b2b1d}.sidebar-footer{margin-top:auto;padding-top:15px;border-top:1px solid rgba(82,65,0,.18)}.profile-mini{display:grid;grid-template-columns:40px 1fr 34px;gap:10px;align-items:center;padding:8px}.avatar,.top-avatar{display:grid;place-items:center;border-radius:50%;font-weight:800}.avatar{width:40px;height:40px;background:#d8efe7;color:#174e40}.profile-copy{min-width:0;display:flex;flex-direction:column}.profile-copy strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-copy span{font-size:10px;color:#725c00;margin-top:3px}.logout-mini{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;color:#2c2c1e;text-decoration:none}.logout-mini:hover{background:rgba(255,255,255,.42)}.icon-btn{border:0;background:transparent;cursor:pointer}.sidebar-close,.menu-btn{display:none}.main{margin-left:var(--sidebar);min-height:100vh}.topbar{min-height:122px;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:25px 32px 20px;display:flex;align-items:center;justify-content:space-between;gap:18px;position:sticky;top:0;z-index:20}.topbar-left{display:flex;align-items:center;gap:12px}.eyebrow{font-size:10px;letter-spacing:1.3px;color:#789087;font-weight:800;margin-bottom:5px}.topbar h1{font-size:24px;line-height:1.15;margin:0;letter-spacing:-.45px}.topbar p{margin:6px 0 0;color:var(--muted);font-size:13px}.topbar-right{display:flex;align-items:center;gap:12px}.date-chip{background:#f4f8f7;border:1px solid var(--line);padding:9px 12px;border-radius:12px;color:#48665d;font-size:12px;font-weight:650;display:flex;align-items:center;gap:7px}.dot-live{width:7px;height:7px;border-radius:50%;background:#31a06c;box-shadow:0 0 0 4px #dff2e8}.top-avatar{width:38px;height:38px;background:#123f35;color:#fff}.content-wrap{padding:26px 30px 20px;max-width:1700px;margin:auto}.page-footer{text-align:center;color:#8a9994;font-size:11px;padding:26px 0 6px}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-bottom:18px}.card h3{margin:0 0 14px;font-size:16px;letter-spacing:-.15px}.card h4{margin:20px 0 10px}.card-subtitle{color:var(--muted);margin:-7px 0 15px}.cards{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:14px;margin:0 0 18px}.metric{position:relative;overflow:hidden;min-height:126px}.metric:after{content:"";position:absolute;width:78px;height:78px;border-radius:50%;right:-23px;top:-22px;background:var(--brand-soft)}.metric .metric-icon{width:38px;height:38px;border-radius:12px;background:var(--brand-soft);display:grid;place-items:center;color:var(--brand);font-weight:800;margin-bottom:14px}.metric span{display:block;color:var(--muted);font-size:12px;font-weight:600}.metric strong{display:block;font-size:27px;letter-spacing:-1px;margin-top:5px;color:#123d33}.metric small{display:block;margin-top:4px;color:#899993}.toolbar{display:flex;gap:9px;align-items:end;justify-content:flex-start;flex-wrap:wrap;margin-bottom:18px}.toolbar label{font-size:11px;font-weight:750;color:#60766e}.toolbar input,.toolbar select{margin-top:5px}.btn{min-height:39px;border:1px solid #cad9d4;background:#fff;color:#244c41;border-radius:11px;padding:9px 14px;text-decoration:none;cursor:pointer;font-weight:700;font-size:12px;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:.18s ease}.btn:hover{transform:translateY(-1px);box-shadow:0 7px 16px rgba(19,66,54,.08)}.btn.primary{background:linear-gradient(135deg,#176450,#104b3e);border-color:#145846;color:#fff}.btn.soft{background:var(--brand-soft);border-color:#d6eae3;color:#135543}.btn.danger{color:var(--danger);border-color:#efc9c9;background:#fffafa}.btn.small{min-height:32px;padding:6px 10px;font-size:11px}.btn.full{width:100%}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px}table{width:100%;border-collapse:separate;border-spacing:0;background:#fff}th,td{padding:13px 12px;border-bottom:1px solid #e8eeec;text-align:left;vertical-align:middle}th{font-size:10px;text-transform:uppercase;letter-spacing:.55px;color:#72867f;background:#f7faf9;font-weight:800;white-space:nowrap}td{font-size:12.5px}tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:#fbfdfc}td small{color:#768983;line-height:1.4}.iku-code{display:inline-flex;padding:6px 9px;border-radius:9px;background:#eef6f3;color:#185747;font-weight:800;font-size:11px}.status{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:5px 9px;background:#edf2f0;color:#51655e;font-size:10px;font-weight:800;white-space:nowrap}.status:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}.status.hijau,.status.valid,.status.aktif{background:#e4f4eb;color:#23754f}.status.kuning,.status.diajukan{background:#fff2d7;color:#986200}.status.merah,.status.perlu-perbaikan{background:#fde8e8;color:#a83d3d}.status.draft{background:#eef1f6;color:#5d6675}.form-card{max-width:1150px}.field-label,.form-card label{display:block;font-size:11px;font-weight:800;color:#536b63;margin-bottom:14px}.form-card input,.form-card select,.form-card textarea,.toolbar input,.toolbar select,.evidence-form input,.verifikasi textarea,.input-shell input{width:100%;border:1px solid #cad9d4;background:#fff;color:#1d3d34;border-radius:11px;padding:10px 12px;outline:none;transition:.15s ease}.form-card input:focus,.form-card select:focus,.form-card textarea:focus,.toolbar input:focus,.input-shell input:focus{border-color:#4f917f;box-shadow:0 0 0 3px rgba(42,119,96,.1)}.form-card textarea{min-height:92px;resize:vertical}.grid2,.grid3,.info-grid{display:grid;gap:14px}.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}.info-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin:14px 0}.info-box{padding:13px;border:1px solid var(--line);border-radius:12px;background:#fbfdfc}.info-box span,.info-grid span{display:block;font-size:10px;letter-spacing:.3px;text-transform:uppercase;color:#7e9089;margin-bottom:5px}.row-between{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.evidence-form{display:grid;grid-template-columns:1.2fr 1fr 1.2fr auto;gap:9px}.alert{padding:12px 14px;border-radius:12px;margin-bottom:15px;display:flex;gap:10px;align-items:flex-start;border:1px solid transparent;transition:.3s}.alert span{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;font-weight:900}.alert.success{background:#e7f5ed;border-color:#d3ebdd;color:#216447}.alert.danger{background:#fdf0f0;border-color:#f2d6d6;color:#993b3b}.alert.fade{opacity:.15}.empty{text-align:center;color:#87958f;padding:32px!important}.section-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}.section-head h3{margin:0}.section-head p{margin:4px 0 0;color:var(--muted);font-size:12px}.progress{height:7px;background:#e8efec;border-radius:999px;overflow:hidden;margin-top:8px}.progress>span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#1b7059,#46a17f);max-width:100%}.details-panel{border:1px solid var(--line);border-radius:12px;background:#fafcfb;padding:12px 14px}.details-panel summary{cursor:pointer;font-weight:750;color:#34584f}.evidence-list{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:7px}.evidence-list li{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fbfdfc}.evidence-list a{color:#176450;font-weight:700;text-decoration:none}.mini-note{font-size:11px;color:#84938e}.check{display:flex!important;align-items:center;gap:8px}.check input{width:auto!important}.sidebar-backdrop{display:none}
/* Login */.login-page{min-height:100vh;background:linear-gradient(135deg,#e9f3ef 0%,#f8fbfa 52%,#e5f0ec 100%);position:relative;overflow:auto}.login-shell{position:relative;z-index:2;width:min(1180px,94vw);min-height:680px;margin:4vh auto;display:grid;grid-template-columns:1.05fr .95fr;border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 28px 80px rgba(13,58,48,.18);border:1px solid rgba(31,94,77,.12)}.login-showcase{padding:46px 48px;color:#fff;background:linear-gradient(145deg,#0b3b31,#155f4d 60%,#0e483b);display:flex;flex-direction:column;position:relative;overflow:hidden}.login-showcase:after{content:"";position:absolute;width:360px;height:360px;border-radius:50%;right:-150px;bottom:-130px;border:70px solid rgba(255,255,255,.055)}.showcase-brand{display:flex;align-items:center;gap:12px;position:relative;z-index:2}.showcase-brand>div:last-child{display:flex;flex-direction:column}.showcase-brand strong{font-size:15px}.showcase-copy{margin:auto 0;max-width:540px;position:relative;z-index:2}.showcase-badge{display:inline-flex;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);font-size:10px;letter-spacing:.6px;text-transform:uppercase}.showcase-copy h1{font-size:46px;line-height:1.04;letter-spacing:-1.8px;margin:20px 0 18px}.showcase-copy>p{font-size:15px;line-height:1.7;color:#d0e4de;max-width:490px}.showcase-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:33px}.showcase-stats div{padding:15px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.06);border-radius:15px}.showcase-stats strong,.showcase-stats span{display:block}.showcase-stats strong{font-size:20px}.showcase-stats span{font-size:10px;color:#c8ddd7;margin-top:4px}.showcase-foot{font-size:10px;color:#a9c7be;position:relative;z-index:2}.login-panel{display:grid;place-items:center;padding:42px}.login-form-wrap{width:min(410px,100%)}.mobile-login-brand{display:none}.login-heading .mini-label{font-size:10px;color:#518074;font-weight:850;letter-spacing:1.15px}.login-heading h2{font-size:30px;letter-spacing:-.8px;margin:9px 0 7px}.login-heading p{margin:0 0 25px;color:#72827d;line-height:1.55}.login-form .field-label{margin:0 0 13px}.input-shell{position:relative;display:flex;align-items:center}.input-shell input{padding-left:42px;height:47px}.input-icon{position:absolute;left:14px;color:#6f887f;font-weight:800;z-index:2}.password-toggle{position:absolute;right:8px;width:34px;height:34px;border:0;border-radius:9px;background:#f2f6f4;color:#56756b;cursor:pointer}.captcha-row{display:grid;grid-template-columns:1fr 48px;gap:9px;margin-bottom:9px}.captcha-image-wrap{height:60px;border:1px solid #cedbd6;border-radius:12px;overflow:hidden;background:#eef7f4}.captcha-image-wrap img{width:100%;height:100%;object-fit:cover}.captcha-refresh{border:1px solid #cad9d4;border-radius:12px;background:#f8fbfa;color:#245a4b;font-size:22px;cursor:pointer}.login-submit{height:49px;margin-top:17px;justify-content:space-between;padding-inline:18px}.security-note{display:flex;gap:9px;margin-top:22px;padding:12px 13px;border-radius:12px;background:#f6f9f8;color:#71817c}.security-note span{color:#2a755f}.security-note p{font-size:10.5px;line-height:1.5;margin:0}.login-orb{position:fixed;border-radius:50%;filter:blur(5px);opacity:.45}.orb-one{width:260px;height:260px;background:#b8d9cd;left:-90px;top:-70px}.orb-two{width:320px;height:320px;background:#cce2da;right:-120px;bottom:-120px}
@media(max-width:1200px){.cards{grid-template-columns:repeat(3,1fr)}}@media(max-width:980px){:root{--sidebar:270px}.sidebar{transform:translateX(-102%);transition:.22s ease}.sidebar-open .sidebar{transform:translateX(0)}.sidebar-backdrop{position:fixed;inset:0;background:rgba(6,30,25,.4);z-index:35}.sidebar-open .sidebar-backdrop{display:block}.sidebar-close,.menu-btn{display:grid;place-items:center}.sidebar-close{color:#242619;font-size:25px}.menu-btn{width:39px;height:39px;border:1px solid var(--line);border-radius:11px;background:#fff;color:#244c41}.main{margin-left:0}.topbar{padding:18px 20px;min-height:105px}.content-wrap{padding:20px}.login-shell{grid-template-columns:1fr;max-width:560px}.login-showcase{display:none}.login-panel{padding:38px 32px}.mobile-login-brand{display:flex;align-items:center;gap:10px;margin-bottom:32px}.mobile-login-brand>div:last-child{display:flex;flex-direction:column}.mobile-login-brand span{font-size:10px;color:#758880}}@media(max-width:700px){.topbar-right{display:none}.topbar h1{font-size:20px}.topbar p{font-size:11px}.content-wrap{padding:14px}.cards{grid-template-columns:1fr 1fr;gap:10px}.card{padding:15px;border-radius:15px}.metric{min-height:115px}.metric strong{font-size:23px}.grid3,.grid2,.info-grid{grid-template-columns:1fr}.evidence-form{grid-template-columns:1fr}.row-between,.section-head{display:block}.section-head .btn{margin-top:10px}.login-shell{margin:0;width:100%;min-height:100vh;border-radius:0}.login-panel{padding:28px 20px}.login-heading h2{font-size:27px}}@media(max-width:430px){.cards{grid-template-columns:1fr}.topbar{align-items:flex-start}.showcase-copy h1{font-size:36px}}
/* v3 master + public + phone login */
.master-layout{align-items:stretch}.compact-card{max-width:none}.org-summary{background:linear-gradient(145deg,#103e34,#17604e);color:#fff}.org-summary .section-head p{color:#bbd4cc}.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}.mini-stats div{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);padding:15px;border-radius:13px}.mini-stats span,.mini-stats strong{display:block}.mini-stats span{font-size:10px;color:#bcd5cd}.mini-stats strong{font-size:26px;margin-top:4px}.org-legend{display:flex;flex-wrap:wrap;gap:13px;margin-top:22px;font-size:11px;color:#d1e3dd}.legend-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;background:#8ecdb9}.legend-dot.prodi{background:#d4b86d}.legend-dot.unit{background:#91a9a1}.table-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.table-actions form{margin:0}.user-cell{display:flex;align-items:center;gap:10px}.table-avatar{width:34px;height:34px;font-size:12px;flex:0 0 34px}.user-cell small{display:block;margin-top:2px}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:#36594f}.role-badge{display:inline-flex;padding:6px 9px;border-radius:9px;background:#eef5f3;color:#325f52;font-size:10px;font-weight:800}.top-actions{align-items:end}.user-form-card{max-width:900px}.form-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:8px}.switch-line{padding:12px 14px;background:#f7faf9;border:1px solid var(--line);border-radius:12px}
.public-page{margin:0;background:#f5f9f7;color:#143e34}.public-nav{width:min(1220px,92vw);margin:18px auto 0;height:70px;border:1px solid #d9e5e1;background:rgba(255,255,255,.88);backdrop-filter:blur(16px);border-radius:18px;display:flex;align-items:center;justify-content:space-between;padding:0 16px 0 18px;position:sticky;top:12px;z-index:20;box-shadow:0 10px 30px rgba(23,73,60,.07)}.public-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}.public-brand>span:last-child{display:flex;flex-direction:column}.public-brand strong{font-size:13px}.public-brand small{font-size:9px;color:#748b83}.public-nav nav{display:flex;align-items:center;gap:22px}.public-nav nav>a:not(.btn){font-size:11px;color:#536e65;text-decoration:none;font-weight:750}.public-hero{width:min(1220px,92vw);margin:56px auto 30px;min-height:570px;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:60px}.hero-kicker,.section-title>span{font-size:10px;letter-spacing:1.4px;font-weight:900;color:#397966}.hero-copy h1{font-size:56px;line-height:1.02;letter-spacing:-2.7px;margin:17px 0 20px;max-width:690px}.hero-copy h1 em{font-style:normal;color:#18725a}.hero-copy>p{max-width:640px;font-size:15px;line-height:1.8;color:#6b7e78}.hero-actions{display:flex;gap:10px;margin-top:28px}.hero-btn{min-height:47px;padding-inline:20px}.hero-trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:25px;font-size:10px;color:#607a71;font-weight:700}.hero-console{background:linear-gradient(145deg,#0c382f,#155d4b);border-radius:27px;padding:13px;box-shadow:0 30px 70px rgba(16,65,52,.22);transform:perspective(1000px) rotateY(-3deg) rotateX(1deg)}.console-top{height:35px;display:flex;align-items:center;gap:5px;padding:0 8px;color:#b9d2ca}.console-top>span{width:7px;height:7px;border-radius:50%;background:#78bba5}.console-top small{margin-left:auto;font-size:9px}.console-card{background:#f8fbfa;border-radius:18px;padding:24px}.console-head{display:flex;justify-content:space-between;align-items:flex-start}.console-head small{display:block;font-size:9px;color:#7a8d86}.console-head strong{font-size:42px;letter-spacing:-2px}.console-chart{height:190px;display:flex;align-items:end;gap:10px;border-bottom:1px solid #dfe9e5;margin:23px 0}.console-chart i{flex:1;background:linear-gradient(180deg,#31a17e,#17604d);border-radius:7px 7px 2px 2px;opacity:.9}.console-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.console-row span{font-size:9px;color:#7c8e88;padding:10px;background:#eef5f2;border-radius:10px}.console-row strong{display:block;font-size:18px;color:#173f35;margin-top:2px}.public-stats{width:min(1220px,92vw);margin:20px auto 85px;display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid #dfe9e5;border-radius:20px;overflow:hidden}.public-stats article{padding:24px 26px;border-right:1px solid #e5ece9}.public-stats article:last-child{border-right:0}.public-stats small,.public-stats span{display:block;color:#7a8d86;font-size:9px}.public-stats strong{display:block;font-size:27px;margin:5px 0 4px}.public-section{width:min(1220px,92vw);margin:70px auto 95px}.section-title{max-width:620px;margin-bottom:30px}.section-title h2{font-size:37px;letter-spacing:-1.3px;line-height:1.08;margin:10px 0}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.feature-grid article{background:#fff;border:1px solid #dfe8e5;border-radius:17px;padding:23px;min-height:180px}.feature-grid b{font-size:10px;color:#4a8b77}.feature-grid h3{font-size:16px;margin:22px 0 8px}.feature-grid p{font-size:11.5px;line-height:1.65;color:#73857f;margin:0}.workflow-section{background:linear-gradient(135deg,#0b3b31,#155d4b);padding:70px max(4vw,calc((100vw - 1220px)/2));color:#fff}.section-title.light>span{color:#8fd1bb}.workflow-line{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:10px;margin-top:34px}.workflow-line>div{padding:20px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);border-radius:15px}.workflow-line b,.workflow-line strong,.workflow-line span{display:block}.workflow-line b{font-size:10px;color:#8fd1bb}.workflow-line strong{margin-top:16px}.workflow-line span{font-size:9px;color:#bdd4cc;margin-top:4px}.workflow-line i{font-style:normal;color:#80b9a6}.public-footer{min-height:110px;background:#082f28;color:#d7e6e1;display:flex;justify-content:space-between;align-items:center;padding:0 max(4vw,calc((100vw - 1220px)/2));font-size:9px}
.phone-login-page{min-height:100vh;margin:0;background:linear-gradient(145deg,#eaf4f0,#f8fbfa 55%,#e3f0eb);overflow:auto;position:relative;color:#173d34}.login-bg-grid{position:fixed;inset:0;background-image:linear-gradient(rgba(24,103,81,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(24,103,81,.04) 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(to bottom,#000,transparent)}.login-back{position:fixed;top:25px;left:30px;z-index:5;text-decoration:none;color:#3e695d;font-size:11px;font-weight:800}.phone-login-shell{width:min(1120px,92vw);min-height:100vh;margin:auto;display:grid;grid-template-columns:1fr 520px;gap:70px;align-items:center;position:relative;z-index:2;padding:55px 0}.login-message{max-width:560px}.login-message .showcase-brand{color:#154a3d;margin-bottom:40px}.login-message .showcase-brand span{color:#759188}.login-message .showcase-badge{background:#e1f0eb;color:#34705f;border-color:#cfe5dd}.login-message h1{font-size:48px;line-height:1.04;letter-spacing:-2px;margin:20px 0}.login-message>p{font-size:14px;line-height:1.75;color:#687d76}.login-points{display:flex;gap:16px;flex-wrap:wrap;margin-top:25px;font-size:10px;font-weight:800;color:#477368}.phone-stage{display:flex;justify-content:center;position:relative}.phone-frame{width:390px;height:790px;background:#101715;border:7px solid #141b19;border-radius:55px;padding:9px;box-shadow:0 35px 80px rgba(16,61,50,.28),inset 0 0 0 1px #39413e;position:relative}.phone-screen{height:100%;border-radius:40px;background:#fbfdfc;overflow:hidden;position:relative}.phone-status{height:43px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;font-size:9px;font-weight:800;color:#233c35;position:relative}.phone-notch{position:absolute;left:50%;top:7px;transform:translateX(-50%);width:112px;height:27px;border-radius:17px;background:#111816}.phone-content{padding:9px 28px 24px}.phone-logo{display:flex;gap:10px;align-items:center;margin-bottom:29px}.phone-logo>div:last-child{display:flex;flex-direction:column}.phone-logo strong{font-size:12px}.phone-logo small{font-size:8px;color:#83958f}.phone-welcome>span{font-size:8px;letter-spacing:1px;color:#4f8576;font-weight:900}.phone-welcome h2{font-size:26px;letter-spacing:-.8px;margin:8px 0 5px}.phone-welcome p{font-size:10px;line-height:1.5;color:#7b8b86;margin:0 0 18px}.phone-form label{display:block;font-size:9px;font-weight:850;color:#536c64;margin-bottom:7px}.phone-input{height:45px;border:1px solid #cfddd8;border-radius:12px;display:flex;align-items:center;position:relative;background:#fff;margin-bottom:12px}.phone-input>span{position:absolute;left:13px;color:#668179;font-size:10px}.phone-input input{border:0;outline:0;width:100%;height:100%;background:transparent;padding:0 41px 0 36px;font-size:11px;color:#173f35}.phone-input button{position:absolute;right:7px;border:0;background:#eff5f3;width:31px;height:31px;border-radius:9px;color:#506f66}.phone-captcha{display:grid;grid-template-columns:1fr 43px;gap:7px;margin-bottom:9px}.phone-captcha>div{height:55px;border:1px solid #d0ded9;border-radius:12px;overflow:hidden}.phone-captcha img{width:100%;height:100%;object-fit:cover}.phone-captcha button{border:1px solid #cedbd7;border-radius:12px;background:#f1f6f4;color:#286351;font-size:19px}.phone-submit{width:100%;height:47px;border:0;border-radius:13px;background:linear-gradient(135deg,#17654f,#0e493b);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-size:10px;font-weight:850;margin-top:15px;cursor:pointer}.phone-security{font-size:8.5px;color:#82918c;text-align:center;margin-top:15px}.home-indicator{width:116px;height:4px;border-radius:5px;background:#1f2a26;position:absolute;bottom:7px;left:50%;transform:translateX(-50%)}.phone-side{position:absolute;background:#222a27;border-radius:3px}.side-left{left:-10px;top:155px;width:4px;height:65px}.side-right{right:-10px;top:185px;width:4px;height:90px}.phone-shadow{position:absolute;width:360px;height:50px;border-radius:50%;background:rgba(19,65,53,.18);filter:blur(22px);bottom:-20px}.login-alert{padding:8px 9px;margin-bottom:10px;font-size:9px}.login-alert span{width:18px;height:18px}.phone-glow{position:fixed;border-radius:50%;filter:blur(10px);opacity:.5}.glow-a{width:350px;height:350px;background:#b9dbcf;right:-100px;top:-130px}.glow-b{width:300px;height:300px;background:#d2e8e0;left:-120px;bottom:-120px}
@media(max-width:980px){.public-nav nav>a:not(.btn){display:none}.public-hero{grid-template-columns:1fr;gap:30px;margin-top:45px}.hero-copy h1{font-size:45px}.hero-console{transform:none;max-width:620px}.public-stats{grid-template-columns:1fr 1fr}.public-stats article:nth-child(2){border-right:0}.feature-grid{grid-template-columns:1fr 1fr}.workflow-line{grid-template-columns:1fr}.workflow-line>i{transform:rotate(90deg);text-align:center}.phone-login-shell{grid-template-columns:1fr;justify-items:center;padding-top:80px}.login-message{display:none}.login-back{position:absolute}.phone-frame{transform:scale(.92);transform-origin:top center}.phone-stage{height:745px}}@media(max-width:620px){.public-nav{width:94vw}.public-nav nav .btn{padding:8px 11px;font-size:10px}.public-hero{width:90vw;margin-top:38px}.hero-copy h1{font-size:38px;letter-spacing:-1.7px}.hero-copy>p{font-size:13px}.hero-actions{flex-wrap:wrap}.hero-console{padding:8px;border-radius:20px}.console-card{padding:17px}.public-stats{width:90vw;grid-template-columns:1fr 1fr}.public-stats article{padding:18px}.feature-grid{grid-template-columns:1fr}.workflow-section{padding-inline:5vw}.public-footer{gap:20px;flex-direction:column;justify-content:center;align-items:flex-start}.phone-login-shell{width:100%;padding:63px 0 0}.phone-frame{width:360px;height:735px;border-radius:49px;transform:scale(.94)}.phone-screen{border-radius:36px}.phone-content{padding-inline:24px}.phone-stage{height:700px}.login-back{left:18px;top:18px}}

/* ===== Universitas Khairun Yellow Theme v4 ===== */
:root{--uk-yellow:#f3c800;--uk-yellow-2:#ffe45a;--uk-yellow-soft:#fff8cf;--uk-ink:#202516;--uk-green:#087b24;--uk-line:#ece7c9;--uk-muted:#747666}
body{background:#faf9f3;color:var(--uk-ink)}
.sidebar{background:linear-gradient(180deg,#ffd92f 0%,#f3c800 58%,#dbae00 100%)}.sidebar-logo{width:42px;height:42px;object-fit:contain;background:#fff;border-radius:12px;padding:4px}.brand-copy span{color:#6f5b00}.nav-link.active{background:#242619!important;color:#fff!important;box-shadow:0 8px 20px rgba(72,58,0,.18),inset 3px 0 0 #fff1a1}.nav-link.active .nav-icon{color:#fff;background:rgba(255,255,255,.14)}.topbar{border-bottom:1px solid #ebe7d7}.eyebrow{color:#9b7f00}.dot-live{background:#f3c800}.btn.primary,.uk-primary{background:linear-gradient(135deg,#e7bb00,#ffd72b)!important;color:#252719!important;border-color:#d9ad00!important}.btn.primary:hover,.uk-primary:hover{filter:brightness(.98);transform:translateY(-1px)}

/* Public navigation */
.unkhair-public{background:#fffdf6;overflow-x:hidden}.uk-nav{position:fixed;top:0;left:50%;transform:translateX(-50%);width:min(1240px,94vw);height:78px;margin:14px auto 0;padding:0 18px 0 14px;background:rgba(255,255,255,.9);border:1px solid rgba(226,219,184,.8);border-radius:20px;box-shadow:0 12px 40px rgba(67,59,9,.08);backdrop-filter:blur(18px);z-index:50;transition:.25s}.scrolled .uk-nav{margin-top:8px;box-shadow:0 16px 46px rgba(67,59,9,.13)}.uk-brand img{width:48px;height:48px;object-fit:contain}.uk-brand strong{font-size:13px;letter-spacing:-.1px;color:#202516}.uk-brand small{font-size:9px;color:#8a8979}.uk-nav nav{gap:28px}.uk-nav nav>a:not(.btn){position:relative;color:#636557;font-size:11px}.uk-nav nav>a:not(.btn):after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:2px;background:var(--uk-yellow);transform:scaleX(0);transition:.2s}.uk-nav nav>a.active:after,.uk-nav nav>a:hover:after{transform:scaleX(1)}.uk-login-btn{background:#202516!important;color:#fff!important;border:0!important;border-radius:12px!important;padding:11px 15px!important}.uk-login-btn span{color:var(--uk-yellow);margin-left:5px}

/* Hero */
.uk-hero{min-height:760px;padding:150px 0 70px;position:relative;background:linear-gradient(180deg,#fffdf6 0,#fff 70%);overflow:hidden}.uk-hero:before{content:"";position:absolute;top:-280px;right:-180px;width:690px;height:690px;border-radius:50%;background:radial-gradient(circle,#ffe252 0,#fff7c4 45%,transparent 70%);opacity:.75}.uk-hero:after{content:"";position:absolute;left:-170px;bottom:-330px;width:600px;height:600px;border-radius:50%;border:90px solid rgba(243,200,0,.07)}.hero-orb{position:absolute;border-radius:50%;border:1px solid rgba(198,161,0,.18)}.orb-one{width:130px;height:130px;right:14%;top:175px;animation:orbitFloat 6s ease-in-out infinite}.orb-two{width:52px;height:52px;right:7%;top:310px;background:#f3c800;box-shadow:0 0 0 16px rgba(243,200,0,.1);animation:orbitFloat 4s ease-in-out infinite reverse}.uk-hero-inner{width:min(1220px,91vw);margin:auto;display:grid;grid-template-columns:.92fr 1.08fr;align-items:center;gap:72px;position:relative;z-index:2}.uk-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #e8dfad;border-radius:999px;background:#fffdf0;color:#796400;font-size:9px;font-weight:900;letter-spacing:.7px}.uk-pill span{width:7px;height:7px;border-radius:50%;background:#f3c800;box-shadow:0 0 0 5px rgba(243,200,0,.13);animation:pulseDot 2s infinite}.uk-hero .hero-copy h1{font-size:62px;line-height:1.01;letter-spacing:-3.3px;margin:20px 0 21px;max-width:700px}.uk-hero .hero-copy h1 em{color:#a88400;background:linear-gradient(90deg,#836a00,#d6a900);-webkit-background-clip:text;color:transparent}.uk-hero .hero-copy>p{font-size:15px;line-height:1.8;max-width:650px;color:#6f7164}.uk-ghost{background:#fff!important;color:#36392a!important;border:1px solid #dfdccb!important}.uk-trust{color:#77796b}.uk-trust span::first-letter{color:#d0a700}.scroll-cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:10px;align-items:center;color:#a19d84;font-size:9px;z-index:2}.scroll-cue i{font-style:normal;width:28px;height:28px;border:1px solid #e4dec1;border-radius:50%;display:grid;place-items:center;animation:bounceDown 1.8s infinite}

/* Animated dashboard mockup */
.uk-dashboard-mockup{border:1px solid #eee6bd;border-radius:24px;background:#fff;box-shadow:0 36px 90px rgba(72,61,8,.17);overflow:hidden;position:relative}.uk-dashboard-mockup:after{content:"";position:absolute;inset:auto -90px -120px auto;width:250px;height:250px;border-radius:50%;background:#ffe24b;filter:blur(8px);opacity:.17}.mockup-top{height:47px;padding:0 16px;border-bottom:1px solid #f0ead1;display:flex;align-items:center;gap:13px;font-size:8px;color:#999584;background:#fffef9}.mockup-top>b{margin-left:auto;color:#4d5041}.mock-dots{display:flex;gap:5px}.mock-dots i{width:7px;height:7px;border-radius:50%;background:#e2dcbf}.mock-dots i:first-child{background:#f3c800}.mockup-body{height:455px;display:grid;grid-template-columns:66px 1fr}.mock-side{background:#25291d;display:flex;flex-direction:column;align-items:center;padding-top:18px;gap:20px}.mock-side img{width:35px;height:35px;object-fit:contain;background:#fff;border-radius:9px;padding:3px}.mock-side i{display:block;width:23px;height:5px;border-radius:4px;background:#585b4d}.mock-side i:nth-child(2){background:#f3c800;height:23px;width:23px;border-radius:7px}.mock-main{padding:25px 27px;background:#fbfaf4;position:relative}.mock-title{display:flex;align-items:flex-start;justify-content:space-between}.mock-title small{display:block;font-size:7px;letter-spacing:.9px;color:#979482;font-weight:900}.mock-title strong{display:block;font-size:34px;letter-spacing:-1.5px;margin-top:3px}.mock-badge{padding:6px 9px;border-radius:8px;background:#fff4b3;color:#7d6500;font-size:7px;font-weight:900}.mock-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}.mock-cards article{background:#fff;border:1px solid #eee8ce;border-radius:11px;padding:11px}.mock-cards small{display:block;font-size:7px;color:#9a9785}.mock-cards b{display:block;font-size:18px;margin-top:5px}.mock-chart{height:168px;border:1px solid #eee8d2;background:#fff;border-radius:12px;display:flex;gap:9px;align-items:flex-end;padding:25px 16px 14px;position:relative;overflow:hidden}.chart-grid{position:absolute;inset:20px 15px;background:repeating-linear-gradient(to bottom,#f0ede2 0,#f0ede2 1px,transparent 1px,transparent 33px)}.mock-chart>i{flex:1;max-width:31px;min-height:25%;border-radius:5px 5px 1px 1px;background:linear-gradient(180deg,#ffe85d,#e0b300);z-index:1;position:relative;animation:growBar 1.4s cubic-bezier(.2,.8,.2,1) both;transform-origin:bottom}.mock-chart>i:nth-of-type(2n){background:linear-gradient(180deg,#b6c691,#66744a)}.mock-list{height:23px;margin-top:9px;display:flex;align-items:center;gap:8px}.mock-list span{width:20px;height:20px;border-radius:6px;background:#fff1a0}.mock-list b{height:6px;width:48%;background:#e6e2d3;border-radius:5px}.mock-list em{margin-left:auto;height:6px;width:15%;background:#f1c800;border-radius:5px}.floaty{animation:floatPanel 5s ease-in-out infinite}

/* Stats */
.uk-stat-strip{width:min(1120px,90vw);margin:-15px auto 95px;display:grid;grid-template-columns:repeat(4,1fr);background:#202516;border-radius:20px;box-shadow:0 25px 60px rgba(42,43,31,.14);position:relative;z-index:5;overflow:hidden}.uk-stat-strip article{padding:26px 25px;display:flex;gap:15px;align-items:center;border-right:1px solid rgba(255,255,255,.09)}.uk-stat-strip article:last-child{border:0}.uk-stat-strip article>span{font-size:9px;color:#f3c800;border:1px solid rgba(243,200,0,.4);width:31px;height:31px;border-radius:9px;display:grid;place-items:center}.uk-stat-strip small{display:block;color:#a9aa9d;font-size:8px}.uk-stat-strip strong{display:block;color:#fff;font-size:25px;margin-top:2px}

/* Feature area */
.uk-feature-section{padding-top:20px}.section-heading{max-width:700px;margin-bottom:36px}.eyebrow-yellow{font-size:9px;font-weight:900;letter-spacing:1.5px;color:#9c7e00}.section-heading h2,.workflow-copy h2{font-size:42px;line-height:1.08;letter-spacing:-1.8px;margin:11px 0}.section-heading h2 span,.workflow-copy h2 span{color:#ae8b00}.section-heading p{font-size:13px;color:#77786d;line-height:1.75;max-width:610px}.uk-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.uk-feature-grid article{min-height:245px;padding:25px;background:#fff;border:1px solid #ece7d0;border-radius:18px;position:relative;overflow:hidden;transition:.25s}.uk-feature-grid article:after{content:"";position:absolute;right:-45px;bottom:-55px;width:120px;height:120px;border-radius:50%;background:#fff1a4;opacity:0;transition:.25s}.uk-feature-grid article:hover{transform:translateY(-5px);border-color:#e4d37d;box-shadow:0 20px 45px rgba(76,64,6,.08)}.uk-feature-grid article:hover:after{opacity:.45}.feature-icon{width:41px;height:41px;border-radius:12px;background:#fff3ad;color:#866c00;display:grid;place-items:center;font-size:18px;margin-bottom:23px}.uk-feature-grid small{font-size:8px;color:#aa8b00;font-weight:900;letter-spacing:.6px}.uk-feature-grid h3{font-size:17px;margin:9px 0}.uk-feature-grid p{font-size:11px;line-height:1.7;color:#7b7d71;max-width:330px}.feature-link{position:absolute;bottom:23px;font-size:9px;font-weight:850;color:#676951}

/* Workflow */
.uk-workflow-section{width:min(1220px,92vw);margin:120px auto;display:grid;grid-template-columns:.85fr 1.15fr;gap:90px;align-items:center;padding:70px;border-radius:30px;background:#25291d;color:#fff;position:relative;overflow:hidden}.uk-workflow-section:after{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:#f3c800;right:-160px;top:-160px;opacity:.1}.workflow-copy h2{color:#fff}.workflow-copy p{font-size:12px;color:#bdbeb3;line-height:1.8}.workflow-cta{display:inline-flex;gap:15px;margin-top:20px;color:#f3c800;text-decoration:none;font-size:10px;font-weight:900}.uk-timeline{position:relative}.uk-timeline:before{content:"";position:absolute;left:24px;top:24px;bottom:24px;width:1px;background:linear-gradient(#f3c800,#737767)}.uk-timeline>div{display:flex;gap:20px;align-items:center;position:relative;margin:13px 0}.uk-timeline b{width:49px;height:49px;border-radius:14px;background:#34382b;border:1px solid #4d5141;display:grid;place-items:center;color:#f3c800;font-size:9px;z-index:1}.uk-timeline>div:first-child b,.uk-timeline>div:last-child b{background:#f3c800;color:#27291d;border-color:#f3c800}.uk-timeline span{display:flex;flex-direction:column}.uk-timeline strong{font-size:13px}.uk-timeline small{font-size:9px;color:#9ea095;margin-top:4px}

/* CTA/Footer */
.uk-cta-section{width:min(1120px,90vw);margin:0 auto 110px;padding:34px 38px;background:linear-gradient(135deg,#fff4a4,#f3c800);border-radius:24px;display:grid;grid-template-columns:75px 1fr auto;gap:25px;align-items:center;box-shadow:0 24px 60px rgba(142,115,0,.16)}.uk-cta-section img{width:72px;height:72px;object-fit:contain}.uk-cta-section small{font-size:8px;font-weight:900;color:#7b6500}.uk-cta-section h2{font-size:26px;letter-spacing:-.7px;margin:5px 0}.uk-cta-section p{font-size:10px;color:#6f5f11;margin:0}.uk-dark-btn{background:#22261a!important;color:#fff!important;border-color:#22261a!important}.uk-dark-btn span{color:#f3c800}.uk-footer{min-height:125px;background:#202516;color:#d8d9ce;padding:0 max(4vw,calc((100vw - 1220px)/2));display:grid;grid-template-columns:1fr auto auto;gap:45px;align-items:center;font-size:9px}.uk-footer-brand{display:flex;align-items:center;gap:12px}.uk-footer-brand img{width:44px;height:44px;object-fit:contain;background:#fff;border-radius:10px;padding:3px}.uk-footer-brand strong,.uk-footer-brand span{display:block}.uk-footer-brand span{color:#8f9185;margin-top:3px}.footer-links{display:flex;gap:20px}.footer-links a{color:#c6c7ba;text-decoration:none}.footer-links a:hover{color:#f3c800}

/* Guide */
.guide-page{padding-top:100px}.guide-hero{width:min(1220px,91vw);min-height:460px;margin:35px auto 75px;padding:65px 65px;display:grid;grid-template-columns:1.2fr .8fr;align-items:center;border-radius:32px;background:linear-gradient(135deg,#fff9d1,#fff 70%);border:1px solid #eee3a9;position:relative;overflow:hidden}.guide-hero:after{content:"";position:absolute;width:330px;height:330px;border-radius:50%;right:-100px;top:-100px;background:#f3c800;opacity:.14}.guide-hero h1{font-size:52px;line-height:1.04;letter-spacing:-2.5px;margin:17px 0}.guide-hero h1 em{font-style:normal;color:#ad8b00}.guide-hero p{max-width:640px;font-size:14px;line-height:1.8;color:#737468}.guide-visual{display:grid;place-items:center;z-index:2}.guide-ring{width:230px;height:230px;border-radius:50%;border:1px dashed #d0ad14;display:grid;place-items:center;position:relative;animation:slowSpin 18s linear infinite}.guide-ring img{width:130px;height:130px;object-fit:contain;animation:slowSpinReverse 18s linear infinite}.guide-ring i{position:absolute;width:20px;height:20px;border-radius:50%;background:#f3c800;box-shadow:0 0 0 9px #fff4b1}.guide-ring i:nth-child(2){top:10px;left:32px}.guide-ring i:nth-child(3){right:0;top:105px;background:#536b35}.guide-ring i:nth-child(4){bottom:4px;left:78px;background:#fff;border:5px solid #f3c800}.guide-content{width:min(1120px,90vw);margin:0 auto 120px;display:grid;grid-template-columns:230px 1fr;gap:65px}.guide-nav{position:sticky;top:115px;height:max-content;padding:20px;border:1px solid #ebe5ce;border-radius:16px;background:#fff}.guide-nav>span{font-size:8px;color:#a38600;font-weight:900;letter-spacing:1px;display:block;margin-bottom:12px}.guide-nav a{display:block;padding:11px 8px;border-bottom:1px solid #f2eee0;color:#68695d;text-decoration:none;font-size:10px}.guide-nav a:hover{color:#967a00;padding-left:12px}.guide-step{display:grid;grid-template-columns:70px 1fr;gap:25px;padding:33px 0;border-bottom:1px solid #eee9d9;scroll-margin-top:120px}.guide-step>b{width:53px;height:53px;border-radius:15px;background:#25291d;color:#f3c800;display:grid;place-items:center;font-size:10px}.guide-step small{font-size:8px;font-weight:900;color:#aa8900;letter-spacing:1px}.guide-step h2{font-size:24px;margin:7px 0 9px}.guide-step p{font-size:12px;color:#77786e;line-height:1.8;max-width:670px}.guide-note{margin-top:15px;padding:12px 14px;background:#fff9d7;border:1px solid #eee0a2;border-radius:10px;font-size:9px;color:#6f6847}.guide-note span{font-weight:900;color:#9b7d00;margin-right:12px}.status-flow{display:flex;align-items:center;gap:8px;margin-top:17px}.status-flow span{padding:7px 10px;border-radius:8px;background:#fff3af;color:#705d00;font-size:8px;font-weight:900}.status-flow i{font-style:normal;color:#b1ab8c}.guide-help{width:min(1120px,90vw);margin:0 auto 90px;border-radius:23px;background:#f3c800;padding:34px 38px;display:flex;justify-content:space-between;align-items:center;gap:30px}.guide-help small{font-size:8px;font-weight:900;color:#755f00}.guide-help h2{font-size:26px;margin:6px 0}.guide-help p{font-size:10px;color:#6c5c17;margin:0}

/* Login yellow / Khairun */
.uk-login-page{background:linear-gradient(145deg,#fff9d7,#fff 50%,#fff2a3)}.uk-login-page .login-bg-grid{background-image:linear-gradient(rgba(173,140,0,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(173,140,0,.05) 1px,transparent 1px)}.login-guide-link{position:fixed;top:25px;right:30px;z-index:5;color:#726000;text-decoration:none;font-size:11px;font-weight:850}.login-uk-brand{display:flex;align-items:center;gap:13px;margin-bottom:38px}.login-uk-brand img{width:58px;height:58px;object-fit:contain}.login-uk-brand strong,.login-uk-brand span{display:block}.login-uk-brand strong{font-size:12px;letter-spacing:.5px}.login-uk-brand span{font-size:10px;color:#9c7f00;margin-top:4px}.uk-badge{background:#fff4b0!important;color:#816900!important;border-color:#ebd76d!important}.login-message h1 em{font-style:normal;color:#b18e00}.uk-phone-frame{border-color:#21251a;background:#21251a;box-shadow:0 35px 90px rgba(105,88,0,.25),inset 0 0 0 1px #4d5042}.uk-phone-screen{background:#fffef8}.uk-phone-logo img{width:43px;height:43px;object-fit:contain}.uk-phone-logo strong{font-size:12px}.uk-phone-logo small{font-size:8px;color:#9b9987}.uk-login-page .phone-welcome>span{color:#a48400}.uk-login-page .phone-input{border-color:#ded9ba;background:#fff}.uk-login-page .phone-input:focus-within{border-color:#e0b800;box-shadow:0 0 0 3px rgba(243,200,0,.13)}.uk-login-page .phone-captcha>div,.uk-login-page .phone-captcha button{border-color:#ded6ac;background:#fff9d4}.uk-phone-submit{background:linear-gradient(135deg,#d8ae00,#f3c800)!important;color:#242619!important;box-shadow:0 10px 24px rgba(190,151,0,.22)}.yellow-glow{position:fixed;border-radius:50%;filter:blur(35px);opacity:.38}.yglow-a{width:350px;height:350px;background:#ffde34;right:-110px;top:-110px}.yglow-b{width:300px;height:300px;background:#ffe979;left:-110px;bottom:-100px}

/* Reveal animations */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}.reveal-on-load{animation:fadeUp .8s ease both}.delay-1{animation-delay:.15s}
@keyframes fadeUp{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}@keyframes floatPanel{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes orbitFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}@keyframes pulseDot{0%,100%{box-shadow:0 0 0 4px rgba(243,200,0,.1)}50%{box-shadow:0 0 0 8px rgba(243,200,0,.18)}}@keyframes bounceDown{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}@keyframes growBar{from{transform:scaleY(.05);opacity:.2}to{transform:scaleY(1);opacity:1}}@keyframes slowSpin{to{transform:rotate(360deg)}}@keyframes slowSpinReverse{to{transform:rotate(-360deg)}}

@media(max-width:1000px){.uk-hero-inner{grid-template-columns:1fr;gap:45px}.uk-hero{padding-top:135px}.uk-hero .hero-copy h1{font-size:49px}.uk-dashboard-mockup{max-width:680px}.uk-stat-strip{grid-template-columns:1fr 1fr}.uk-stat-strip article:nth-child(2){border-right:0}.uk-feature-grid{grid-template-columns:1fr 1fr}.uk-workflow-section{grid-template-columns:1fr;padding:50px;gap:40px}.guide-hero{grid-template-columns:1fr}.guide-visual{margin-top:35px}.guide-content{grid-template-columns:1fr}.guide-nav{position:relative;top:auto;display:none}.uk-footer{grid-template-columns:1fr 1fr;padding-block:28px}.uk-footer>span{grid-column:1/-1}.uk-cta-section{grid-template-columns:70px 1fr}.uk-cta-section>a{grid-column:2}}
@media(max-width:680px){.uk-nav{width:94vw;height:67px;border-radius:17px}.uk-brand img{width:39px;height:39px}.uk-nav nav>a:not(.btn){display:none}.uk-login-btn{font-size:9px!important}.uk-hero{padding-top:115px;min-height:auto}.uk-hero-inner{width:89vw}.uk-hero .hero-copy h1{font-size:40px;letter-spacing:-2px}.uk-hero .hero-copy>p{font-size:13px}.uk-dashboard-mockup{border-radius:18px}.mockup-body{height:390px;grid-template-columns:48px 1fr}.mock-main{padding:17px}.mock-side{gap:17px}.mock-side img{width:29px;height:29px}.mock-chart{height:135px}.uk-stat-strip{grid-template-columns:1fr 1fr;margin-top:35px}.uk-stat-strip article{padding:18px 14px}.uk-stat-strip strong{font-size:21px}.public-section{width:89vw}.section-heading h2,.workflow-copy h2{font-size:33px}.uk-feature-grid{grid-template-columns:1fr}.uk-workflow-section{width:89vw;margin:80px auto;padding:34px 25px;border-radius:23px}.uk-cta-section{grid-template-columns:1fr;text-align:center}.uk-cta-section img{margin:auto}.uk-cta-section>a{grid-column:1}.uk-footer{grid-template-columns:1fr;gap:20px}.uk-footer>span{grid-column:auto}.guide-hero{width:89vw;padding:42px 25px;border-radius:23px}.guide-hero h1{font-size:39px}.guide-ring{width:190px;height:190px}.guide-content{width:87vw}.guide-step{grid-template-columns:48px 1fr;gap:17px}.guide-step>b{width:43px;height:43px}.guide-step h2{font-size:20px}.guide-help{width:89vw;flex-direction:column;align-items:flex-start}.login-guide-link{right:18px;top:18px}}

/* v6: darker gold theme + clickable public metrics + identity settings */
:root{--gold:#c29a00;--gold-dark:#967600;--gold-deep:#7c6200;--gold-soft:#f6edc6}
.sidebar{background:linear-gradient(180deg,#d7b21d 0%,#c29a00 58%,#a98100 100%);box-shadow:16px 0 45px rgba(91,70,0,.20)}
.brand-copy span,.showcase-brand span{color:#554400}.nav-caption{color:#594600}.nav-link{color:#242116}.nav-link:hover{background:rgba(255,255,255,.30)}.profile-copy span{color:#574500}.logout-mini:hover{background:rgba(255,255,255,.30)}
.sidebar-logo{background:rgba(255,255,255,.94)}.nav-link.active{background:#23251c!important;box-shadow:0 8px 20px rgba(55,42,0,.23),inset 3px 0 0 #f4df83!important}
.eyebrow{color:#876b00}.dot-live{background:var(--gold)}.btn.primary,.uk-primary{background:linear-gradient(135deg,#a98500,#c9a200)!important;border-color:#977800!important;color:#fff!important}.btn.primary:hover,.uk-primary:hover{filter:brightness(.94)}
.uk-login-btn{background:#b58f00!important}.uk-pill{color:#8a6b00!important}.uk-pill span{background:#b58f00!important}.uk-hero .hero-copy h1 em,.section-heading h2 span,.workflow-copy h2 span{color:#997800!important}.eyebrow-yellow{color:#957400!important}.feature-icon{background:#efe2a2!important;color:#6f5600!important}.workflow-cta{color:#d1aa16!important}
.uk-workflow-section:after,.guide-hero:after,.guide-ring i,.guide-help{background:#c29a00!important}.uk-timeline b{color:#d2ad19}.uk-timeline>div:first-child b,.uk-timeline>div:last-child b{background:#c29a00!important;border-color:#c29a00!important}.uk-cta-section{background:linear-gradient(135deg,#f2e5a8,#c9a200)!important}.uk-dark-btn span{color:#d6b420!important}.uk-footer a:hover{color:#d0ab13!important}
.uk-phone-submit{background:linear-gradient(135deg,#9f7d00,#c29a00)!important;color:#fff!important}.uk-login-page .phone-input:focus-within{border-color:#b08a00;box-shadow:0 0 0 3px rgba(174,137,0,.12)}.yellow-glow{opacity:.25}.yglow-a{background:#caaa31}.yglow-b{background:#ddc55e}

/* Public statistic cards now behave as actual navigation */
.uk-stat-strip{overflow:hidden}.uk-stat-strip .stat-link{display:block;text-decoration:none;color:inherit;border-right:1px solid rgba(255,255,255,.10)}.uk-stat-strip .stat-link:last-child{border-right:0}.uk-stat-strip .stat-link article{height:100%;border-right:0;cursor:pointer;transition:background .22s ease,transform .22s ease}.uk-stat-strip .stat-link:hover article{background:#282e1f;transform:translateY(-2px)}.uk-stat-strip .stat-link em{display:block;margin-top:6px;font-size:8px;font-style:normal;color:#cbb85c;opacity:.8;letter-spacing:.2px}.uk-stat-strip .stat-link:hover em{color:#ead66e;opacity:1}

/* Public detail pages */
.public-detail-page{background:#f7f6ef}.public-detail-main{min-height:calc(100vh - 125px);padding:135px 0 90px}.public-detail-hero{width:min(1120px,90vw);margin:0 auto 28px;background:linear-gradient(135deg,#fff,#f4ebbd);border:1px solid #e6dca9;border-radius:28px;padding:50px 52px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:35px;box-shadow:0 24px 60px rgba(91,70,0,.08)}.public-detail-hero h1{font-size:42px;line-height:1.05;letter-spacing:-1.8px;margin:17px 0 10px;color:#20251a}.public-detail-hero p{max-width:670px;color:#727467;line-height:1.7}.detail-back{display:inline-flex;margin-top:15px;text-decoration:none;color:#806400;font-size:11px;font-weight:850}.detail-hero-badge{width:150px;height:150px;border-radius:50%;background:#22271b;color:#fff;display:grid;place-content:center;text-align:center;box-shadow:inset 0 0 0 8px rgba(194,154,0,.20)}.detail-hero-badge b{font-size:38px;color:#d3ae1b}.detail-hero-badge span{font-size:9px;color:#b9bcae;margin-top:4px}.public-detail-list{width:min(1120px,90vw);margin:auto;display:grid;gap:11px}.public-data-card{display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:18px;padding:18px 22px;background:#fff;border:1px solid #e5e3d8;border-radius:16px;box-shadow:0 8px 24px rgba(36,38,27,.04);transition:.18s}.public-data-card:hover{transform:translateY(-2px);border-color:#d6c574}.data-code{width:54px;height:42px;border-radius:11px;background:#272b20;color:#d9b623;display:grid;place-items:center;font-size:9px;font-weight:900}.data-copy h3{margin:0 0 5px;font-size:14px;color:#25291f}.data-copy small{font-size:9px;color:#929386}.data-value{font-size:12px;font-weight:900;color:#6f5700;background:#f5edc5;border-radius:10px;padding:8px 11px;text-align:right}.public-empty{padding:44px;background:#fff;border:1px dashed #d5cfb1;border-radius:18px;text-align:center}.public-empty strong,.public-empty span{display:block}.public-empty span{margin-top:8px;color:#85867b;font-size:11px}

/* Identity web settings */
.identity-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:18px;align-items:start}.identity-grid .form-card{max-width:none}.form-card label small{display:block;margin-top:6px;color:#87958f;font-size:10px;font-weight:500}.identity-preview-card{position:sticky;top:145px}.identity-preview{text-align:center;padding:18px 10px 10px}.identity-logo-box{width:112px;height:112px;margin:0 auto 18px;border-radius:25px;background:linear-gradient(145deg,#fff,#f1e8bd);border:1px solid #e2d7a1;display:grid;place-items:center}.identity-logo-box img{width:88px;height:88px;object-fit:contain}.preview-kicker{font-size:9px;letter-spacing:1.2px;color:#927300;font-weight:900}.identity-preview h2{font-size:25px;margin:8px 0 4px;color:#20271e}.identity-preview>strong{font-size:12px;color:#755d00}.identity-preview>p{color:#7b817a;line-height:1.6;font-size:11px;max-width:340px;margin:10px auto 20px}.preview-favicon{border-top:1px solid var(--line);padding-top:14px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:10px;color:#7a8984}.preview-favicon img{width:30px;height:30px;object-fit:contain;border:1px solid var(--line);border-radius:7px;padding:2px}.preview-favicon em{font-style:normal;color:#a2aaa7}

@media(max-width:1000px){.uk-stat-strip .stat-link:nth-child(2){border-right:0}.identity-grid{grid-template-columns:1fr}.identity-preview-card{position:relative;top:auto}.public-detail-hero{grid-template-columns:1fr}.detail-hero-badge{width:110px;height:110px}}
@media(max-width:680px){.uk-stat-strip .stat-link{border-right:0;border-bottom:1px solid rgba(255,255,255,.09)}.uk-stat-strip .stat-link:nth-child(odd){border-right:1px solid rgba(255,255,255,.09)}.public-detail-main{padding-top:105px}.public-detail-hero{padding:32px 24px;border-radius:22px}.public-detail-hero h1{font-size:34px}.public-data-card{grid-template-columns:58px 1fr}.data-value{grid-column:2;text-align:left;width:max-content}.detail-hero-badge{display:none}}

/* ===== v7 visual refinement: green-gradient backend, richer yellow frontend ===== */
.backend-page{--bg:#edf5f1;--surface:#f8fcfa;--surface-2:#eaf5ef;--line:#cfe2d8;--ink:#14372d;--muted:#658077;--brand:#0b6b4f;--brand-2:#064c39;--brand-soft:#dcefe7;background:linear-gradient(135deg,#e8f4ef 0%,#f8fbfa 48%,#e5f1ec 100%);}
.backend-page .sidebar{background:linear-gradient(180deg,#0b6b4f 0%,#07543f 52%,#043b2e 100%);color:#fff;box-shadow:18px 0 48px rgba(4,59,46,.22)}
.backend-page .brand-copy strong{color:#fff}.backend-page .brand-copy span,.backend-page .nav-caption,.backend-page .profile-copy span{color:#bce4d5}
.backend-page .nav-link{color:#eaf8f3}.backend-page .nav-icon{background:rgba(255,255,255,.11);color:#f3fff9}.backend-page .nav-link:hover{background:rgba(255,255,255,.12);color:#fff}.backend-page .nav-link.active{background:linear-gradient(135deg,#f6c928,#d9a900);color:#17362d;box-shadow:0 10px 22px rgba(0,0,0,.18),inset 3px 0 0 #fff5bd}.backend-page .nav-link.active .nav-icon{background:rgba(255,255,255,.5);color:#17362d}
.backend-page .sidebar-footer{border-top-color:rgba(255,255,255,.15)}.backend-page .avatar{background:#f3cb34;color:#17362d}.backend-page .logout-mini{color:#e9fff7}.backend-page .logout-mini:hover{background:rgba(255,255,255,.12)}
.backend-page .topbar{background:linear-gradient(105deg,rgba(242,250,246,.96),rgba(226,243,235,.94));border-bottom:1px solid #cbded5;box-shadow:0 8px 30px rgba(17,79,61,.06)}
.backend-page .topbar h1{color:#0c503d}.backend-page .eyebrow{color:#598072}.backend-page .date-chip{background:#e2f1ea;border-color:#c8ded4;color:#265c4d}.backend-page .top-avatar{background:linear-gradient(135deg,#0c6a50,#084535)}
.backend-page .card{background:linear-gradient(145deg,#fbfefc,#eef7f2);border-color:#ccdfd6;box-shadow:0 14px 32px rgba(17,73,57,.07)}
.backend-page .metric{background:linear-gradient(145deg,#f7fcf9,#e4f2eb)}.backend-page .metric:after{background:#d1ebdf}.backend-page .metric .metric-icon{background:linear-gradient(135deg,#0d7658,#0a5d47);color:#fff;box-shadow:0 8px 18px rgba(8,91,67,.17)}.backend-page .metric strong{color:#0b533f}
.backend-page .form-card{background:linear-gradient(145deg,#f9fdfb,#eaf5ef)}.backend-page .form-card label,.backend-page .field-label{color:#285d4d}.backend-page .form-card input,.backend-page .form-card select,.backend-page .form-card textarea,.backend-page .toolbar input,.backend-page .toolbar select,.backend-page .evidence-form input,.backend-page .verifikasi textarea,.backend-page .input-shell input{background:#f4fbf7;border-color:#bcd7ca;color:#153e32}.backend-page .form-card input:focus,.backend-page .form-card select:focus,.backend-page .form-card textarea:focus,.backend-page .toolbar input:focus,.backend-page .input-shell input:focus{border-color:#1b7a5d;box-shadow:0 0 0 3px rgba(20,120,89,.12);background:#fff}
.backend-page .btn{background:#edf7f2;border-color:#bdd8cb;color:#245b4a}.backend-page .btn.soft{background:#dcefe7;border-color:#c5e0d4;color:#0d6048}.backend-page .btn.primary{background:linear-gradient(135deg,#0d7658,#07513d)!important;border-color:#07513d!important}.backend-page .btn.danger{background:#fff2f2}
.backend-page .table-wrap{border-color:#c8ddd3;box-shadow:0 8px 20px rgba(13,79,59,.04)}.backend-page table{background:#f9fdfb}.backend-page th{background:linear-gradient(180deg,#dceee6,#d3e9df);color:#235746;border-bottom-color:#bfd9cd}.backend-page td{border-bottom-color:#dcebe4}.backend-page tbody tr:hover{background:#ecf7f1}.backend-page .iku-code{background:#d9eee5;color:#0c6048}.backend-page .info-box,.backend-page .details-panel,.backend-page .evidence-list li{background:#edf7f2;border-color:#cbded5}.backend-page .progress{background:#d5e7df}.backend-page .progress>span{background:linear-gradient(90deg,#0e6d52,#27a375)}
.backend-page .page-footer{color:#668378}

/* Frontend clarity + content */
.unkhair-public{background:#fffdf5;color:#242719}.unkhair-public .uk-hero{background:radial-gradient(circle at 15% 20%,rgba(207,166,0,.14),transparent 30%),radial-gradient(circle at 80% 15%,rgba(255,217,63,.19),transparent 31%),linear-gradient(180deg,#fffdf7 0%,#fff 100%)}
.unkhair-public .hero-copy h1{color:#202317;text-shadow:0 1px 0 rgba(255,255,255,.8)}.unkhair-public .hero-copy>p{color:#65675e;font-size:14px;line-height:1.8}.unkhair-public .uk-nav{background:rgba(255,255,255,.93);border:1px solid #e9deb3;box-shadow:0 14px 36px rgba(90,70,0,.10)}
.unkhair-public .uk-stat-strip{background:linear-gradient(135deg,#282d20,#171b13);box-shadow:0 20px 52px rgba(37,40,25,.16)}.unkhair-public .uk-stat-strip small{color:#c8c8ba}.unkhair-public .uk-stat-strip strong{color:#fff}.unkhair-public .uk-stat-strip .stat-link em{font-size:9px;color:#e0c767}
.mock-real-list{display:grid;gap:7px;margin-top:10px}.mock-data-row{display:grid;grid-template-columns:42px 1fr 44px;gap:8px;align-items:center;padding:7px 9px;border-radius:8px;background:#f7f4e6;border:1px solid #e8dfb8}.mock-data-row b{font-size:8px;color:#7b6200}.mock-data-row span{font-size:7px;color:#55594e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mock-data-row strong{font-size:8px;text-align:right;color:#20271b}.mock-data-row.muted{opacity:.7}
.uk-overview-section{padding-top:85px}.section-heading.compact{margin-bottom:28px}.public-overview-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.overview-card{min-height:150px;border-radius:20px;padding:23px;background:linear-gradient(145deg,#fffdf7,#f6f0d8);border:1px solid #e6ddb9;display:flex;gap:16px;align-items:center;box-shadow:0 13px 32px rgba(83,67,0,.07);transition:.2s}.overview-card:hover{transform:translateY(-4px);box-shadow:0 20px 42px rgba(83,67,0,.11)}.overview-card.primary{background:linear-gradient(145deg,#2b2f22,#191d15);border-color:#2b2f22}.overview-card.primary small,.overview-card.primary span{color:#c5c7b9}.overview-card.primary strong{color:#fff}.ov-icon{width:48px;height:48px;border-radius:15px;background:#dfc04b;color:#342d0f;display:grid;place-items:center;font-weight:900;font-size:18px;flex:0 0 auto}.overview-card small{display:block;text-transform:uppercase;letter-spacing:.7px;color:#7f7b67;font-size:9px;font-weight:900}.overview-card strong{display:block;font-size:31px;line-height:1;margin:7px 0 5px;color:#272a20}.overview-card span{font-size:9px;color:#8a887a}
.performance-panel{margin-top:70px;margin-bottom:90px;padding:32px;border:1px solid #e8dfbd;border-radius:26px;background:linear-gradient(145deg,#fff,#fff9e6);box-shadow:0 20px 50px rgba(82,66,0,.07)}.performance-head{display:flex;justify-content:space-between;gap:25px;align-items:flex-end;margin-bottom:26px}.performance-head h2{font-size:29px;margin:5px 0 6px;color:#22261b}.performance-head p{margin:0;color:#74766b;max-width:650px;font-size:11px;line-height:1.6}.performance-head>a{font-size:10px;font-weight:900;color:#816500;text-decoration:none;white-space:nowrap}.performance-table{display:grid}.performance-row{display:grid;grid-template-columns:70px minmax(220px,1fr) minmax(180px,.8fr) 70px;gap:15px;align-items:center;padding:15px 6px;border-top:1px solid #ece5cc}.performance-row:first-child{border-top:0}.perf-code{width:54px;height:36px;border-radius:10px;background:#282d20;color:#e3c643;display:grid;place-items:center;font-size:9px;font-weight:900}.perf-name strong,.perf-name small{display:block}.perf-name strong{font-size:12px;color:#2a2d23}.perf-name small{font-size:8px;color:#929286;margin-top:4px}.perf-progress span{display:block;height:7px;background:#ece7d7;border-radius:999px;overflow:hidden}.perf-progress i{display:block;height:100%;background:linear-gradient(90deg,#a98400,#e0bd2f);border-radius:999px}.perf-value{text-align:right;font-size:13px;font-weight:900;color:#6e5600}.performance-empty{text-align:center;padding:30px;color:#8a887b;font-size:11px}
.unkhair-public .uk-feature-grid article{background:linear-gradient(145deg,#fff,#fff9e8);border-color:#e7dfc3;box-shadow:0 10px 28px rgba(74,62,8,.055)}.unkhair-public .uk-feature-grid article:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(74,62,8,.10)}.unkhair-public .uk-feature-grid h3{color:#24271d}.unkhair-public .uk-feature-grid p{color:#73756a;line-height:1.7}.unkhair-public .uk-workflow-section{background:linear-gradient(135deg,#24291d,#151911);box-shadow:0 25px 60px rgba(31,36,23,.16)}
@media(max-width:1000px){.public-overview-grid{grid-template-columns:1fr 1fr}.performance-row{grid-template-columns:60px 1fr 70px}.perf-progress{grid-column:2/4}.performance-head{align-items:flex-start}}
@media(max-width:680px){.public-overview-grid{grid-template-columns:1fr}.overview-card{min-height:118px}.performance-panel{padding:22px 18px}.performance-head{display:block}.performance-head>a{display:inline-block;margin-top:14px}.performance-row{grid-template-columns:52px 1fr 58px;gap:10px}.perf-name strong{font-size:11px}}

/* v8 — Green gradient public/login, smoother backend sidebar, pagination & period */
:root{--v8-green-950:#06392c;--v8-green-900:#074a37;--v8-green-800:#086247;--v8-green-700:#0b7655;--v8-green-600:#15906a;--v8-green-500:#21aa7d;--v8-green-100:#e5f5ee;--v8-green-50:#f4fbf8}
.backend-page .sidebar{background:linear-gradient(165deg,#0b7655 0%,#086247 26%,#074a37 62%,#052f25 100%)!important;box-shadow:18px 0 48px rgba(4,59,46,.25)}
.backend-page .sidebar:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 15% 5%,rgba(64,205,151,.22),transparent 28%),linear-gradient(135deg,rgba(255,255,255,.05),transparent 42%)}
.backend-page .sidebar>*{position:relative;z-index:1}.backend-page .nav-link{border:1px solid transparent}.backend-page .nav-link:hover{background:linear-gradient(90deg,rgba(255,255,255,.14),rgba(255,255,255,.06));border-color:rgba(255,255,255,.09)}.backend-page .nav-link.active{background:linear-gradient(135deg,#f4c93f,#d9ac20)!important;color:#123d30!important;box-shadow:0 10px 24px rgba(0,0,0,.17),inset 0 1px rgba(255,255,255,.28)!important}
.backend-page .content-wrap{background:linear-gradient(145deg,#eef8f3 0%,#f7fcf9 45%,#e5f3ec 100%)}.backend-page .card,.backend-page .form-card{background:linear-gradient(145deg,#fbfffd,#edf8f2);border-color:#c4ddd1}.backend-page input,.backend-page select,.backend-page textarea{background:#f8fffb;border-color:#b8d6c8}.backend-page input:focus,.backend-page select:focus,.backend-page textarea:focus{border-color:#1b9870;box-shadow:0 0 0 3px rgba(27,152,112,.13)}

/* Public frontend now uses green gradients while preserving legibility */
.unkhair-public{background:linear-gradient(180deg,#f6fcf9 0%,#edf8f3 42%,#fafffd 100%)!important;color:#15382e}.unkhair-public .uk-nav{background:rgba(246,252,249,.93)!important;border-color:rgba(27,120,87,.20)!important;box-shadow:0 15px 42px rgba(7,74,55,.12)!important;backdrop-filter:blur(16px)}
.unkhair-public .uk-nav nav>a:not(.btn){color:#285548}.unkhair-public .uk-nav nav>a.active,.unkhair-public .uk-nav nav>a:hover{color:#087053}.unkhair-public .uk-login-btn{background:linear-gradient(135deg,#0b7655,#15906a)!important;color:#fff!important;box-shadow:0 10px 24px rgba(11,118,85,.20)}
.unkhair-public .uk-hero{background:radial-gradient(circle at 11% 16%,rgba(38,180,130,.19),transparent 31%),radial-gradient(circle at 84% 15%,rgba(14,117,85,.18),transparent 33%),linear-gradient(145deg,#eefaf4 0%,#dff3e9 48%,#f8fcfa 100%)!important}.unkhair-public .hero-copy h1{color:#0b3e30!important}.unkhair-public .hero-copy h1 em,.unkhair-public .section-heading h2 span,.unkhair-public .workflow-copy h2 span{color:#0b7655!important}.unkhair-public .hero-copy>p{color:#4d7065!important}.unkhair-public .uk-pill{background:#dff4ea!important;border-color:#b9dfcf!important;color:#0a6b4e!important}.unkhair-public .uk-pill span{background:#15906a!important}.unkhair-public .uk-primary{background:linear-gradient(135deg,#087053,#16a176)!important;color:#fff!important;box-shadow:0 13px 28px rgba(8,112,83,.20)}.unkhair-public .uk-ghost{background:rgba(255,255,255,.72)!important;border-color:#add5c3!important;color:#0a644b!important}.unkhair-public .uk-trust span{color:#55756a!important}
.unkhair-public .uk-dashboard-mockup{background:linear-gradient(145deg,#ffffff,#eaf7f1)!important;border-color:#bcdccc!important;box-shadow:0 28px 65px rgba(7,74,55,.16)!important}.unkhair-public .mock-side{background:linear-gradient(180deg,#0b7655,#064332)!important}.unkhair-public .mock-badge{background:#daf2e7!important;color:#0b6a4e!important}.unkhair-public .mock-chart i{background:linear-gradient(180deg,#25b487,#0b7655)!important}.unkhair-public .uk-stat-strip{background:linear-gradient(135deg,#0b7655 0%,#074a37 50%,#052f25 100%)!important;box-shadow:0 22px 55px rgba(7,74,55,.22)!important}.unkhair-public .uk-stat-strip .stat-link em{color:#9fe6ca!important}.unkhair-public .uk-stat-strip .stat-link:hover{background:rgba(255,255,255,.06)}
.unkhair-public .overview-card{background:linear-gradient(145deg,#f9fffc,#e6f5ed)!important;border-color:#c2dfd1!important;box-shadow:0 13px 32px rgba(7,74,55,.08)!important}.unkhair-public .overview-card.primary{background:linear-gradient(145deg,#0b7655,#063e30)!important;border-color:#0b7655!important}.unkhair-public .ov-icon{background:#c9eddd!important;color:#075640!important}.unkhair-public .overview-card.primary .ov-icon{background:#f1c94b!important;color:#173d31!important}.unkhair-public .performance-panel{background:linear-gradient(145deg,#ffffff,#e9f7f0)!important;border-color:#c4e0d3!important;box-shadow:0 20px 50px rgba(7,74,55,.09)!important}.unkhair-public .performance-head h2,.unkhair-public .perf-name strong{color:#173f33!important}.unkhair-public .performance-head>a,.unkhair-public .perf-value,.unkhair-public .eyebrow-yellow{color:#087053!important}.unkhair-public .perf-code{background:#0b5d46!important;color:#c8f1df!important}.unkhair-public .perf-progress span{background:#d6ebe1!important}.unkhair-public .perf-progress i{background:linear-gradient(90deg,#0b7655,#25b487)!important}.unkhair-public .uk-feature-grid article{background:linear-gradient(145deg,#fbfffd,#e8f6ef)!important;border-color:#c6e1d5!important;box-shadow:0 10px 28px rgba(7,74,55,.07)!important}.unkhair-public .feature-icon{background:#d7f0e5!important;color:#087053!important}.unkhair-public .uk-workflow-section{background:linear-gradient(135deg,#0a6c50,#063e30)!important;box-shadow:0 25px 60px rgba(7,74,55,.21)!important}.unkhair-public .workflow-cta{color:#b8f0d8!important}.unkhair-public .uk-cta-section{background:linear-gradient(135deg,#dff4e9,#f7fcf9)!important;border-color:#bddfce!important}.unkhair-public .uk-footer{background:#073e30!important}

/* Login mockup HP — green gradient */
.phone-login-page.uk-login-page{background:radial-gradient(circle at 18% 15%,rgba(48,198,143,.28),transparent 31%),radial-gradient(circle at 83% 83%,rgba(11,118,85,.24),transparent 34%),linear-gradient(145deg,#eefaf4 0%,#d7efe4 46%,#f8fcfa 100%)!important;color:#133e31}.phone-login-page .login-bg-grid{opacity:.28;background-image:linear-gradient(rgba(11,118,85,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(11,118,85,.09) 1px,transparent 1px)!important}.phone-login-page .yellow-glow{background:#42c996!important;opacity:.22!important}.phone-login-page .login-back,.phone-login-page .login-guide-link{color:#075f47!important;border-color:#a9d4c1!important;background:rgba(255,255,255,.65)!important}.phone-login-page .login-message h1{color:#0a3d2f!important}.phone-login-page .login-message h1 em{color:#0b7655!important}.phone-login-page .login-message>p{color:#4e7065!important}.phone-login-page .uk-badge{background:#d8f1e6!important;color:#087053!important;border-color:#b8dfce!important}.phone-login-page .login-points span{color:#315f50!important}.phone-login-page .uk-phone-frame{background:linear-gradient(145deg,#123f33,#062c22)!important;box-shadow:0 35px 80px rgba(5,58,43,.28)!important}.phone-login-page .uk-phone-screen{background:linear-gradient(180deg,#f8fffb 0%,#ecf8f2 100%)!important}.phone-login-page .uk-phone-logo{background:linear-gradient(135deg,#e3f5ec,#fafffd)!important;border-color:#c3dfd2!important}.phone-login-page .phone-welcome span{color:#0b7655!important}.phone-login-page .phone-welcome h2{color:#133e31!important}.phone-login-page .phone-welcome p,.phone-login-page .phone-security{color:#69857b!important}.phone-login-page .phone-input{background:#fafffd!important;border-color:#b9d9ca!important}.phone-login-page .phone-input:focus-within{border-color:#15906a!important;box-shadow:0 0 0 3px rgba(21,144,106,.14)!important}.phone-login-page .phone-captcha>div{background:#e8f7ef!important;border-color:#b8dccc!important}.phone-login-page .phone-captcha button{background:#d9efe5!important;color:#075f47!important}.phone-login-page .uk-phone-submit{background:linear-gradient(135deg,#087053,#16a176)!important;color:#fff!important;box-shadow:0 12px 26px rgba(8,112,83,.22)}

/* public guide/detail green family */
.public-detail-page{background:linear-gradient(145deg,#eff9f4,#fafffd)!important}.public-detail-hero{background:linear-gradient(135deg,#fff,#e3f4eb)!important;border-color:#c1dfd1!important;box-shadow:0 24px 60px rgba(7,74,55,.09)!important}.detail-hero-badge{background:linear-gradient(145deg,#0b7655,#063e30)!important}.detail-hero-badge b{color:#bcebd6!important}.public-data-card{border-color:#cee4da!important}.public-data-card:hover{border-color:#58ae8c!important}.data-code{background:#0b5d46!important;color:#cef1e2!important}.data-value{color:#075f47!important;background:#e0f3ea!important}
.guide-page{background:linear-gradient(145deg,#eff9f4,#fbfffd)!important}.guide-hero{background:linear-gradient(135deg,#0b7655,#064332)!important}.guide-step b{background:linear-gradient(135deg,#0b7655,#1aa278)!important}

/* Pagination */
.pagination{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap;padding:18px 2px 2px}.page-btn{min-width:34px;height:34px;padding:0 10px;border-radius:10px;display:inline-grid;place-items:center;text-decoration:none;background:#f5fcf8;border:1px solid #bedbcd;color:#0b654c;font-size:11px;font-weight:850;transition:.18s}.page-btn:hover{transform:translateY(-1px);border-color:#25916e;background:#e7f5ee}.page-btn.active{background:linear-gradient(135deg,#0b7655,#15906a);color:#fff;border-color:transparent;box-shadow:0 7px 16px rgba(11,118,85,.18)}.page-btn.disabled{opacity:.38;pointer-events:none}.page-gap{color:#79958a}.page-meta{margin-left:8px;font-size:9px;color:#6e8a80;font-weight:700}
/* Period cards */
.period-guide{background:linear-gradient(145deg,#eaf8f1,#dff3e9)!important}.period-status-grid{display:grid;gap:10px}.period-status-grid article{padding:14px;border-radius:14px;background:rgba(255,255,255,.62);border:1px solid #c2dfd1}.period-status-grid b,.period-status-grid span{display:block}.period-status-grid b{color:#0b654c;font-size:12px}.period-status-grid span{color:#658177;font-size:9px;margin-top:5px}.checkline{display:flex!important;align-items:center;gap:8px}.checkline input{width:auto!important}.period-filter{margin-bottom:16px}
