@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',Arial,sans-serif;color:#27324b;background:#f5f6fc;font-synthesis:none;--navy:#111827;--primary:#4b46b5;--muted:#76839e;--line:#e3e8f4;--accent:#ece9ff}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #8178ef;outline-offset:3px}input:focus,select:focus{outline:2px solid #655de0;outline-offset:1px}button{transition:background .15s,transform .15s}a{color:inherit;text-decoration:none}.masthead{background:var(--navy);color:white;border-bottom:4px solid var(--primary)}.masthead-inner{max-width:1240px;margin:auto;padding:28px 40px;display:flex;justify-content:space-between;align-items:center}.identity{display:flex;flex-direction:column;align-items:flex-start;gap:5px}.logo{width:40px;height:40px;border-radius:10px;background:var(--accent);color:var(--primary);font-weight:800;font-size:29px;line-height:40px;padding-left:9px;margin-bottom:6px;letter-spacing:-4px}.logo span{font-size:19px;vertical-align:top}.identity strong{font-family:Manrope,Arial,sans-serif;font-size:22px;letter-spacing:1px}.brand-sub{font-size:10px;letter-spacing:1.5px;color:#c3cce0}.header-right{display:flex;flex-direction:column;gap:14px;align-items:flex-end}.secure-label{font-size:14px;border:1px solid #36435b;border-radius:30px;padding:9px 15px}.edition{font-size:10px;letter-spacing:2px;color:#95a7c8}main{max-width:1240px;margin:auto;padding:0 40px}.breadcrumb{padding:25px 0;font-size:12px;color:var(--muted);display:flex;gap:13px}.breadcrumb b{color:#465573;font-weight:500}.intro{display:flex;justify-content:space-between;align-items:center;padding:13px 0 35px;gap:20px}.eyebrow{font-size:10px;letter-spacing:1.9px;font-weight:700;color:#76839e}h1{font-family:Manrope,Arial,sans-serif;font-size:42px;line-height:1.24;letter-spacing:-1.6px;margin:13px 0 15px;font-weight:800}h1 span{color:#4b46b5}.intro p{color:var(--muted);font-size:14px;line-height:1.7;margin:0}.clock-card{display:flex;gap:15px;align-items:center;border-left:1px solid #e3e8f4;padding:10px 0 10px 32px}.clock-icon{font-size:34px;color:#7466e8}.clock-card>div{display:flex;flex-direction:column;gap:8px}.small-label{font-size:10px;letter-spacing:1.4px;color:var(--muted)}#clock{font-family:Manrope,Arial,sans-serif;font-size:28px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:1px}#date{font-size:12px;color:var(--muted)}.workspace{display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:start}.filter-panel,.results-panel{background:white;border:1px solid var(--line);border-radius:15px}.filter-panel{padding:24px}.section-title{display:flex;gap:10px;align-items:center}h2{font-family:Manrope,Arial,sans-serif;font-size:16px;margin:0;font-weight:800}.icon-box{font-size:24px}.panel-description{font-size:12px;color:var(--muted);line-height:1.7;margin:10px 0 25px}label{display:block;font-size:13px;font-weight:600;margin:20px 0 9px}.required{color:#c05b65}input,select{width:100%;height:46px;background:#fff;border:1px solid #e3e8f4;border-radius:7px;padding:0 12px;color:#27324b;font-size:13px;min-width:0}input::placeholder{color:#8b96ae}.field-help{font-size:11px;color:#76839e;margin-top:8px;line-height:1.5}.divider{border-top:1px solid var(--line);margin:24px 0}.search-input{position:relative}.search-input>span{position:absolute;left:12px;top:8px;font-size:24px;color:#8b96ae}.search-input input{padding-left:34px}.primary{border:0;background:var(--primary);color:white;padding:13px 20px;border-radius:7px;font-size:14px;font-weight:600;min-height:44px}.primary:hover{background:#3d3799}.search-button{display:flex;justify-content:space-between;width:100%;margin-top:24px}.reset-button{width:100%;border:0;background:transparent;font-size:12px;color:#76839e;padding:17px 5px}.access-note{margin-top:18px;border-radius:8px;background:#f0eeff;padding:15px;display:flex;gap:10px}.access-note>span{color:#7466e8;font-size:20px}.access-note strong{font-size:12px}.access-note p{font-size:11px;line-height:1.7;color:#76839e;margin:7px 0 0}.results-heading{display:flex;align-items:center;justify-content:space-between;padding:24px;gap:10px}.results-heading h2{font-size:18px;display:flex;align-items:center;gap:10px}#count{border-radius:5px;background:#eeebff;font-family:'DM Sans',Arial,sans-serif;font-size:11px;padding:4px 7px;color:#6555c7}.results-heading p{font-size:12px;color:var(--muted);margin:8px 0 0}.data-label{font-size:9px;color:#76839e;letter-spacing:1px}.list-heading{display:grid;grid-template-columns:1fr 100px 25px;gap:15px;background:#f8f9fc;padding:12px 24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:9px;letter-spacing:1.3px;color:#76839e}.archive-row{display:grid;width:100%;grid-template-columns:1fr 100px 25px;gap:15px;align-items:center;border:0;border-bottom:1px solid #e8ecf5;background:white;padding:18px 24px;text-align:left;color:inherit}.archive-row:hover{background:#f5f4ff}.file-main{display:flex;gap:13px;align-items:center;min-width:0}.file-icon{display:grid;place-content:center;flex:0 0 36px;width:36px;height:44px;border:1px solid #e4defc;background:#eeebff;border-radius:6px;color:#7160db;font-size:9px;font-weight:700;position:relative}.file-icon:before{content:'≡';display:block;text-align:center;font-size:20px;font-weight:400;line-height:20px}.file-title{display:block;font-size:13px;font-weight:600;line-height:1.5;margin-bottom:6px}.file-meta{display:flex;flex-wrap:wrap;gap:7px;align-items:center;color:#76839e;font-size:10px}.tag{padding:3px 6px;background:#eaf0ff;color:#5268b5;border-radius:4px}.row-date{font-size:11px;color:#76839e}.row-arrow{color:#929fba;font-size:19px}.pagination{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;gap:12px;font-size:11px;color:#76839e}.pagination nav{display:flex;gap:5px}.pagination button{border:1px solid var(--line);background:white;border-radius:6px;min-width:32px;height:34px;color:#687997;font-size:12px}.pagination button.active{background:var(--primary);border-color:var(--primary);color:white}.demo-note{display:flex;gap:10px;align-items:center;font-size:11px;color:#76839e;margin:20px 0}.demo-note p{line-height:1.6}footer{display:flex;justify-content:space-between;gap:20px;font-size:10px;color:#76839e;padding:24px 0 30px;border-top:1px solid #e3e8f4}footer strong{color:#526080;letter-spacing:1px}.empty{padding:65px 20px;text-align:center;color:#76839e;font-size:14px}.empty strong{display:block;font-size:18px;margin-bottom:10px}dialog{border:0;border-radius:18px;padding:26px;max-width:560px;width:calc(100% - 32px);max-height:90dvh;color:#27324b;box-shadow:0 24px 100px #11182738}dialog::backdrop{background:#111827a8;backdrop-filter:blur(4px)}.dialog-header{display:flex;justify-content:space-between;align-items:center;gap:15px}.close{width:40px;height:40px;border:0;background:#f0eeff;border-radius:50%;font-size:24px;color:#6655bc}dialog h2{font-size:23px;line-height:1.4;margin:20px 0 14px}dialog p{font-size:14px;line-height:1.7;color:#76839e}dl{display:grid;grid-template-columns:130px 1fr;gap:15px;font-size:13px;border-block:1px solid var(--line);padding:20px 0}dt{color:#76839e}dd{margin:0;overflow-wrap:anywhere}.actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px;flex-wrap:wrap}.secondary{border:1px solid #e3e8f4;background:white;border-radius:7px;padding:12px 18px;color:#596b8f;font-size:14px;min-height:44px}.preview{background:#eef0f7;padding:20px;border-radius:10px;text-align:center;overflow:hidden}.preview canvas{background:white;width:100%;max-width:260px;image-rendering:pixelated;box-shadow:0 4px 12px #17255422}.preview-label{display:block;font-size:10px;letter-spacing:1.5px;color:#76839e;margin-top:15px}.otp{font-size:28px;letter-spacing:10px;text-align:center;height:60px}.error{color:#b94350!important;font-size:13px;min-height:20px}.notice{background:#f0eeff;padding:14px;border-radius:8px;font-size:13px!important}.success-icon{font-size:40px;color:#20a486}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--primary);color:white;border-radius:10px;font-size:14px;padding:14px 22px;max-width:90%;display:none;z-index:10}.admin-card{background:white;padding:24px;border-radius:12px;margin:20px 0;border:1px solid var(--line)}.admin-code{font-size:30px;letter-spacing:6px}
@media(min-width:1300px){main,.masthead-inner{max-width:1250px}.workspace{grid-template-columns:310px 1fr}}@media(max-width:900px){main,.masthead-inner{padding-left:24px;padding-right:24px}.workspace{grid-template-columns:260px 1fr;gap:16px}.filter-panel{padding:20px}.archive-row,.list-heading{grid-template-columns:1fr 20px;padding-left:18px;padding-right:18px}.row-date,.list-heading>span:nth-child(2){display:none}.results-heading{padding:20px 18px}.clock-card{padding-left:20px}h1{font-size:36px}.data-label{display:none}}@media(max-width:650px){.masthead-inner{padding:22px}.header-right{display:none}.identity{align-items:center;width:100%}.brand-sub{font-size:9px}.identity strong{font-size:20px}.logo{width:36px;height:36px;line-height:36px;font-size:26px}.breadcrumb{padding:20px 0;font-size:11px}main{padding:0 18px}.intro{display:block;padding:9px 0 24px}h1{font-size:34px;letter-spacing:-1.2px}.intro p{font-size:14px}.clock-card{margin-top:25px;padding:14px 18px;border:1px solid #e3e8f4;border-radius:10px;background:#eef0f9}.clock-card>div{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:4px 16px;flex:1}.small-label{grid-column:1/-1;font-size:9px}#clock{font-size:22px}#date{font-size:10px;text-align:right}.workspace{grid-template-columns:1fr;gap:20px}.filter-panel{padding:22px}.panel-description{margin-bottom:20px}input,select{font-size:16px;height:48px}label{font-size:14px}.access-note{margin-top:8px}.field-help,.access-note p{font-size:12px}.file-title{font-size:14px}.file-meta{font-size:11px}.archive-row{padding:17px 16px;gap:8px}.file-main{gap:11px}.pagination{padding:18px 14px}.pagination button{min-width:34px;height:40px}.results-heading h2{font-size:18px}footer{flex-direction:column;gap:10px;font-size:11px}.demo-note{font-size:12px}dialog{padding:22px}dialog h2{font-size:21px}.actions>button{flex:1}.otp{letter-spacing:6px}.desktop{display:none}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Admin — riwayat permintaan */
.admin-page{background:#f5f6fc;min-height:100vh}.admin-header{max-width:1240px;margin:0 auto;padding:42px 40px 26px;display:flex;justify-content:space-between;gap:30px;align-items:flex-end}.admin-header h1{font-size:36px;margin:8px 0 8px}.admin-header p{margin:0;color:var(--muted);font-size:13px}.admin-nav{display:flex;gap:10px;flex-wrap:wrap}.admin-nav a{border:1px solid var(--line);background:white;border-radius:8px;padding:11px 14px;font-size:12px;color:#596b8f}.admin-main{max-width:1240px;padding:0 40px 50px}.admin-auth-card{display:grid;grid-template-columns:1fr minmax(360px,520px);gap:18px;align-items:center;background:#111827;color:white;border-radius:14px;padding:20px 22px;margin-bottom:20px}.admin-auth-card strong{font-family:Manrope,Arial,sans-serif}.admin-auth-card p{margin:5px 0 0;color:#aeb9ce;font-size:11px}.admin-auth-controls{display:grid;grid-template-columns:1fr auto;gap:10px}.admin-auth-controls input{background:#fff}.admin-status{grid-column:1/-1!important;margin:0!important;min-height:15px}.request-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(260px,1.3fr);gap:14px;margin-bottom:20px}.stat-card{background:white;border:1px solid var(--line);border-radius:14px;padding:20px;min-height:132px;display:flex;flex-direction:column}.stat-card>span{font-size:10px;text-transform:uppercase;letter-spacing:1.1px;color:var(--muted);font-weight:700}.stat-card>strong{font-family:Manrope,Arial,sans-serif;font-size:31px;line-height:1.1;margin:16px 0 8px;color:#26324a}.stat-card small{color:var(--muted);font-size:11px}.stat-card-wide>strong{font-size:20px;line-height:1.35}.request-admin-grid{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:20px;align-items:start}.request-history-panel,.leaderboard-panel{background:white;border:1px solid var(--line);border-radius:14px}.request-history-panel{overflow:hidden}.request-panel-head{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:22px 24px}.request-panel-head h2{font-size:20px;margin-top:6px}.result-pill{font-size:11px;padding:6px 9px;border-radius:20px;background:#eeebff;color:#6555c7;font-weight:700}.request-filter{padding:0 24px 20px;display:grid;grid-template-columns:minmax(220px,1fr) 170px auto auto;gap:10px;align-items:end}.request-filter label{font-size:11px;margin:0 0 7px;color:#65728d}.request-filter button{height:46px}.request-table-wrap{overflow:auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.request-table{border-collapse:collapse;width:100%;min-width:800px}.request-table th{background:#f8f9fc;color:#7a879f;font-size:9px;letter-spacing:1px;text-transform:uppercase;text-align:left;padding:12px 16px;border-bottom:1px solid var(--line)}.request-table td{font-size:12px;padding:15px 16px;border-bottom:1px solid #edf0f6;vertical-align:top}.request-table tbody tr:last-child td{border-bottom:0}.request-table tbody tr:hover{background:#fafaff}.request-time{white-space:nowrap;color:#6e7b93}.request-file{display:flex;flex-direction:column;gap:5px;max-width:310px}.request-file strong{font-size:12px;line-height:1.45}.request-file small{color:#7b879c}.request-status{display:inline-flex;align-items:center;border-radius:20px;padding:5px 8px;font-size:10px;font-weight:700;white-space:nowrap}.status-used{background:#e7f7ef;color:#16815a}.status-active{background:#eae8ff;color:#5c51b4}.status-expired{background:#fff3dd;color:#9a6915}.status-cancelled{background:#fdebed;color:#ad4550}.status-neutral{background:#eef1f6;color:#69768c}.request-empty{text-align:center!important;color:#7c889f!important;padding:28px 15px!important;font-weight:400!important}.request-pagination{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:16px 20px;color:var(--muted);font-size:11px}.request-pagination>div{display:flex;gap:8px}.request-pagination button{padding:8px 11px;min-height:36px}.leaderboard-panel{padding:22px;position:sticky;top:18px}.leaderboard-panel h2{font-size:18px;margin:7px 0 7px}.leaderboard-panel>p{font-size:11px;color:var(--muted);line-height:1.6;margin:0 0 18px}.leaderboard{list-style:none;margin:0;padding:0}.leaderboard li{display:grid;grid-template-columns:28px 1fr auto;gap:9px;align-items:center;padding:12px 0;border-top:1px solid #edf0f6}.leader-rank{width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:#f0eeff;color:#6255c1;font-size:10px;font-weight:800}.leader-main{display:flex;flex-direction:column;gap:4px;min-width:0}.leader-main strong{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leader-main small,.leader-count small{font-size:9px;color:var(--muted)}.leader-count{text-align:right;display:flex;flex-direction:column}.leader-count strong{font-size:15px;color:#4b46b5}
@media(max-width:1000px){.request-stats{grid-template-columns:repeat(2,1fr)}.request-admin-grid{grid-template-columns:1fr}.leaderboard-panel{position:static}.request-filter{grid-template-columns:1fr 170px auto auto}.admin-header{align-items:flex-start;flex-direction:column}}
@media(max-width:700px){.admin-header,.admin-main{padding-left:18px;padding-right:18px}.admin-header{padding-top:26px}.admin-header h1{font-size:29px}.admin-auth-card{grid-template-columns:1fr;padding:18px}.admin-auth-controls{grid-template-columns:1fr}.request-stats{grid-template-columns:1fr 1fr;gap:10px}.stat-card{padding:15px;min-height:112px}.stat-card>strong{font-size:26px;margin-top:12px}.stat-card-wide{grid-column:1/-1}.request-filter{grid-template-columns:1fr 1fr}.request-filter .request-search-wrap{grid-column:1/-1}.request-filter button{width:100%}.request-panel-head{padding:18px}.request-filter{padding-left:18px;padding-right:18px}.request-pagination{align-items:flex-start;flex-direction:column}.request-pagination>div{width:100%}.request-pagination button{flex:1}.admin-nav{width:100%}.admin-nav a{flex:1;text-align:center}}
.logo-circle {
    width: 64px;
    height: 64px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    padding: 4px;
    box-sizing: border-box;
}

.logo-circle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}