:root{--ink: #14120E;--paper: #FFFFFF;--mist: #EFECE4;--kunyit: #FFC93C;--cabai: #E0442F;--pandan: #0B6B4F;--muted: #6B655C;--bar: 60px;--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%}body{font:400 16px/1.55 var(--sans);background:var(--mist);color:var(--ink);-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}button,input,textarea,select{font:inherit;color:inherit}a{color:var(--pandan)}.shell{max-width:560px;margin:0 auto;min-height:100vh;background:var(--paper);border-inline:2px solid var(--ink);padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom))}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--paper);border-bottom:2px solid var(--ink)}.topbar h1{font-size:16px;font-weight:800;letter-spacing:-.01em;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topbar .back{background:none;border:none;font-size:20px;font-weight:800;padding:0 4px;cursor:pointer}.tabbar{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:560px;display:grid;grid-template-columns:repeat(3,1fr);background:var(--paper);border-top:2px solid var(--ink);padding-bottom:env(safe-area-inset-bottom);z-index:30}.tabbar a{height:var(--bar);display:grid;place-content:center;text-decoration:none;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.tabbar a[aria-current=page]{color:var(--ink);background:var(--kunyit)}.body{padding:18px 16px 28px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}h2{font-size:20px;font-weight:800;letter-spacing:-.015em;margin-bottom:6px}h3{font-size:14px;font-weight:800;margin-bottom:8px}.sub{color:var(--muted);font-size:14px;margin-bottom:18px}.tiny{font-size:12px;color:var(--muted)}.kartu{position:relative;display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;margin-bottom:12px;background:var(--paper);border:2px solid var(--ink);border-radius:3px;box-shadow:4px 4px 0 var(--kunyit);text-align:left;text-decoration:none;color:var(--ink);cursor:pointer;transition:transform .08s ease,box-shadow .08s ease}.kartu:before{content:"";position:absolute;left:-2px;top:50%;transform:translateY(-50%);width:8px;height:16px;background:var(--paper);border:2px solid var(--ink);border-left:none;border-radius:0 9px 9px 0}.kartu:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--kunyit)}.kartu:focus-visible{outline:3px solid var(--pandan);outline-offset:3px}.kartu .grow{flex:1;min-width:0}.kartu .name{display:block;font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kartu .meta{display:block;font-size:12px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kartu.flat{box-shadow:none}.kartu.off{opacity:.45}.type-tag{flex:none;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--mist);border:2px solid var(--ink);border-radius:2px;padding:3px 6px}.rowtools{display:flex;flex-direction:column;gap:2px;flex:none}.rowtools button{width:30px;height:22px;background:var(--mist);border:2px solid var(--ink);border-radius:2px;font-size:11px;font-weight:800;line-height:1;cursor:pointer}.rowtools button:disabled{opacity:.3;cursor:default}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 18px;border:2px solid var(--ink);border-radius:3px;background:var(--paper);color:var(--ink);font-weight:800;font-size:15px;box-shadow:4px 4px 0 var(--ink);cursor:pointer;transition:transform .08s ease,box-shadow .08s ease}.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}.btn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:4px 4px 0 var(--ink)}.btn:focus-visible{outline:3px solid var(--pandan);outline-offset:3px}.btn.primary{background:var(--kunyit)}.btn.danger{background:var(--cabai);color:#fff}.btn.ghost{box-shadow:none;background:var(--mist)}.btn.block{display:flex;width:100%}.btn.sm{padding:8px 12px;font-size:13px;box-shadow:3px 3px 0 var(--ink)}.btnrow{display:flex;gap:10px;flex-wrap:wrap}.field{margin-bottom:16px}.field label{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}.field input,.field textarea,.field select{width:100%;padding:12px 13px;background:var(--paper);border:2px solid var(--ink);border-radius:3px;font-size:16px}.field input:focus,.field textarea:focus,.field select:focus{outline:none;box-shadow:3px 3px 0 var(--kunyit)}.field textarea{min-height:88px;resize:vertical}.field .hint{font-size:12px;color:var(--muted);margin-top:5px}.field .count{float:right;font-variant-numeric:tabular-nums}.slugline{display:flex;align-items:center;border:2px solid var(--ink);border-radius:3px;overflow:hidden}.slugline span{padding:12px 0 12px 13px;color:var(--muted);font-size:15px;white-space:nowrap}.slugline input{border:none!important;padding-left:2px!important}.slugline input:focus{box-shadow:none!important}.notice{border:2px solid var(--ink);border-radius:3px;padding:12px 14px;margin-bottom:16px;font-size:14px}.notice.bad{background:#fde7e3;border-color:var(--cabai)}.notice.good{background:#e4f3ed;border-color:var(--pandan)}.notice.warn{background:#fff4d6}.empty{border:2px dashed var(--ink);border-radius:3px;padding:28px 20px;text-align:center;color:var(--muted);margin-bottom:16px}.empty strong{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}.scrim{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;background:#14120e80;display:flex;align-items:flex-end;justify-content:center}.sheet{width:100%;max-width:560px;max-height:92vh;overflow-y:auto;background:var(--paper);border:2px solid var(--ink);border-bottom:none;border-radius:8px 8px 0 0;padding:8px 16px calc(24px + env(safe-area-inset-bottom));animation:rise .18s ease-out}@keyframes rise{0%{transform:translateY(24px)}to{transform:none}}.sheet .grip{width:44px;height:4px;background:var(--ink);border-radius:2px;margin:8px auto 16px;opacity:.25}.sheet h3{font-size:17px;margin-bottom:14px}.preview{width:100%;height:78vh;border:2px solid var(--ink);border-radius:3px;background:var(--paper)}.kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}.kpi{border:2px solid var(--ink);border-radius:3px;box-shadow:4px 4px 0 var(--kunyit);padding:14px}.kpi .n{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}.kpi .l{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.bars{display:flex;align-items:flex-end;gap:3px;height:110px;border-bottom:2px solid var(--ink);margin-bottom:20px}.bars i{flex:1;background:var(--kunyit);border:2px solid var(--ink);border-bottom:none;min-height:3px;display:block}.plans{display:grid;gap:12px}.plan{border:2px solid var(--ink);border-radius:3px;box-shadow:4px 4px 0 var(--kunyit);padding:16px;display:flex;align-items:center;gap:12px}.plan .grow{flex:1}.plan .price{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}.plan .per{font-size:12px;color:var(--muted)}.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.swatch{border:2px solid var(--ink);border-radius:3px;padding:0;overflow:hidden;cursor:pointer;background:none}.swatch .band{height:46px;display:flex}.swatch .band i{flex:1}.swatch .nm{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:6px 4px;border-top:2px solid var(--ink)}.swatch[aria-pressed=true]{box-shadow:4px 4px 0 var(--kunyit)}.swatch[aria-pressed=true] .nm{background:var(--kunyit)}.spinner{width:18px;height:18px;border:3px solid var(--ink);border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){*,.sheet{animation:none!important;transition:none!important}}