/* Any App — palet netral (zinc) selaras dengan extension. Semua token terpusat di :root. */
:root{
  --brand:#18181b; --brand-ink:#fafafa;
  --ok:#16a34a; --warn:#b45309; --bad:#dc2626; --info:#52525b;
  --bg1:#fafafa; --bg2:#f4f4f5; --bg3:#ededee;
  --text:#18181b; --muted:#71717a; --line:rgba(9,9,11,.10);
  --glass:rgba(255,255,255,.74); --glass-strong:rgba(255,255,255,.94); --glass-line:rgba(9,9,11,.08); --hl:rgba(255,255,255,.9);
  --solid:#ffffff; --solid2:#f4f4f5; --shadow:0 1px 2px rgba(9,9,11,.05),0 8px 24px rgba(9,9,11,.06);
  --r:14px; --r-sm:10px; --blur:14px;
  --font:-apple-system,BlinkMacSystemFont,"Inter","SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
:root[data-theme=dark]{--brand:#fafafa;--brand-ink:#18181b;--ok:#4ade80;--warn:#fbbf24;--bad:#f87171;--info:#a1a1aa;
  --bg1:#09090b;--bg2:#111114;--bg3:#141418;--text:#fafafa;--muted:#a1a1aa;--line:rgba(255,255,255,.08);
  --glass:rgba(20,20,24,.74);--glass-strong:rgba(17,17,20,.95);--glass-line:rgba(255,255,255,.08);--hl:rgba(255,255,255,.05);--solid:#141418;--solid2:#1b1b20;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.45)}
@media (prefers-color-scheme:dark){:root[data-theme=auto]{--brand:#fafafa;--brand-ink:#18181b;--ok:#4ade80;--warn:#fbbf24;--bad:#f87171;--info:#a1a1aa;
  --bg1:#09090b;--bg2:#111114;--bg3:#141418;--text:#fafafa;--muted:#a1a1aa;--line:rgba(255,255,255,.08);
  --glass:rgba(20,20,24,.74);--glass-strong:rgba(17,17,20,.95);--glass-line:rgba(255,255,255,.08);--hl:rgba(255,255,255,.05);--solid:#141418;--solid2:#1b1b20;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.45)}}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--text);background:var(--bg1);line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh}
.bg-orbs{position:fixed;inset:0;z-index:-1;background:radial-gradient(70vw 50vw at 50% -10%,color-mix(in srgb,var(--text) 5%,transparent),transparent 70%),linear-gradient(180deg,var(--bg1),var(--bg2) 60%,var(--bg3))}
a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em;letter-spacing:-.01em} p{margin:0 0 1em}
.muted{color:var(--muted)} .small{font-size:.85rem} .right{text-align:right} .center{text-align:center} .nowrap{white-space:nowrap}
.ic{flex:none;vertical-align:middle}
:focus-visible{outline:2px solid var(--text);outline-offset:2px;border-radius:8px}
/* glass */
.glass,.glass-bar{background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--shadow),inset 0 1px 0 var(--hl)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .glass,.glass-bar,.toast,.menu,.dialog{-webkit-backdrop-filter:blur(var(--blur)) saturate(165%);backdrop-filter:blur(var(--blur)) saturate(165%)}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass,.glass-bar,.toast,.menu,.dialog{background:var(--glass-strong)}}
.glass{border-radius:var(--r)} .card{padding:22px} .card h2,.card h3{margin-bottom:.8em}
.glass-bar{border-radius:0;border-width:0 0 1px}
/* buttons / forms */
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;border:1px solid var(--line);background:var(--solid);color:var(--text);padding:10px 18px;border-radius:var(--r-sm);font:inherit;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s,opacity .2s;text-decoration:none!important}
.btn:hover{border-color:var(--muted)} .btn:active{transform:translateY(0) scale(.98)}
.btn-primary{background:var(--brand);color:var(--brand-ink);border-color:transparent;box-shadow:none}
.btn-primary:hover{background:color-mix(in srgb,var(--brand) 86%,var(--muted))}
.btn-ghost{background:transparent} .btn-danger{background:var(--bad);color:#fff;border-color:transparent} .btn-ok{background:var(--ok);color:#fff;border-color:transparent}
.btn-sm{padding:6px 14px;font-size:.88rem} .btn-lg{padding:14px 28px;font-size:1.05rem} .btn-block{width:100%}
.btn[disabled],.btn.is-loading{opacity:.55;pointer-events:none}
.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--solid);color:var(--text);cursor:pointer}
label{display:block;font-weight:600;font-size:.9rem;margin:0 0 14px} label .hint{font-weight:400;color:var(--muted)}
input,select,textarea{width:100%;margin-top:6px;padding:11px 14px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--solid);color:var(--text);font:inherit;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--muted);box-shadow:0 0 0 3px color-mix(in srgb,var(--text) 10%,transparent)}
input[type=checkbox],input[type=radio]{width:auto;margin:0 8px 0 0;accent-color:var(--text)} .check{display:flex;align-items:center;font-weight:500}
input[type=color]{padding:3px;height:44px} textarea{min-height:100px;resize:vertical} input[type=file]{padding:10px}
.row{display:grid;gap:16px}.row-2{grid-template-columns:repeat(2,1fr)}.row-3{grid-template-columns:repeat(3,1fr)}.row-4{grid-template-columns:repeat(4,1fr)}
.stack>*+*{margin-top:16px} .actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center} .between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.field-err{color:var(--bad);font-size:.85rem}
/* badge */
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.78rem;font-weight:600;border:1px solid var(--line);background:var(--solid2);color:var(--muted);white-space:nowrap}
.badge-ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.badge-warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 35%,transparent)}
.badge-bad{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
.badge-info{background:color-mix(in srgb,var(--info) 14%,transparent);color:var(--info);border-color:color-mix(in srgb,var(--info) 35%,transparent)}
.badge-muted{background:var(--solid2);color:var(--muted);border-color:var(--line)}
/* top nav (public) */
.topnav{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:12px clamp(16px,4vw,48px)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.1rem;color:var(--text)!important;text-decoration:none!important}
.brand img{max-height:28px;max-width:140px;width:auto;height:auto;object-fit:contain;display:block;border-radius:4px}
.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--brand);color:var(--brand-ink)}
.topnav-links{display:flex;align-items:center;gap:6px}.topnav-links>a:not(.btn){padding:8px 12px;border-radius:999px;color:var(--text);font-weight:500}.topnav-links>a:not(.btn):hover{background:var(--glass);text-decoration:none}
.nav-toggle{display:none}
/* sections */
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(16px,4vw,32px)} section.block{padding:clamp(40px,7vw,88px) 0}
.hero{padding:clamp(48px,9vw,120px) 0 40px;text-align:center}.hero h1{font-size:clamp(2.1rem,5.5vw,4rem);font-weight:800;max-width:16ch;margin:0 auto .4em;color:var(--text)}
.hero p.lead{font-size:clamp(1.05rem,2vw,1.3rem);color:var(--muted);max-width:60ch;margin:0 auto 1.6em}
.eyebrow{display:inline-block;padding:5px 14px;border-radius:999px;font-weight:600;font-size:.8rem;margin-bottom:18px;color:var(--muted);background:var(--solid2);border:1px solid var(--line)}
.section-title{text-align:center;max-width:640px;margin:0 auto 40px}.section-title h2{font-size:clamp(1.6rem,3.5vw,2.4rem)}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}.feature{padding:24px}.feature .stat-ic{margin-bottom:14px}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;align-items:stretch}
.plan{padding:28px;display:flex;flex-direction:column;gap:12px;position:relative}.plan.featured{border-color:var(--line-strong,var(--muted));box-shadow:var(--shadow),inset 0 0 0 1px var(--muted)}
.plan .price{font-size:2.2rem;font-weight:800;letter-spacing:-.02em}.plan .price small{font-size:.9rem;font-weight:500;color:var(--muted)}
.plan ul{list-style:none;padding:0;margin:0 0 8px;display:grid;gap:8px;flex:1}.plan li{display:flex;gap:8px;align-items:flex-start}.plan li .ic{color:var(--ok);margin-top:3px}
.app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.app-card{padding:18px;display:flex;flex-direction:column;gap:10px;transition:transform .2s,box-shadow .2s;color:var(--text)!important;text-decoration:none!important}.app-card:hover{transform:translateY(-3px)}
.app-ic{width:44px;height:44px;border-radius:12px;object-fit:cover;background:var(--solid2);flex:none}.app-ic-letter{display:grid;place-items:center;font-weight:700;color:var(--muted);font-size:1.2rem}
.app-card h3{margin:0;font-size:1rem}.app-card p{margin:0;font-size:.85rem;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.faq details{padding:16px 20px;margin-bottom:12px}.faq summary{cursor:pointer;font-weight:700;list-style:none}.faq summary::after{content:"+";float:right;font-weight:400}.faq details[open] summary::after{content:"–"}.faq details p{margin:10px 0 0;color:var(--muted)}
.cta-band{padding:40px;text-align:center}
.footer{border-top:1px solid var(--line);margin-top:40px;padding:32px clamp(16px,4vw,48px)}.footer-in{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px}.footer-links{display:grid;gap:6px}
.auth-wrap{min-height:calc(100vh - 220px);display:grid;place-items:center;padding:32px 16px}.auth-card{width:100%;max-width:440px;padding:32px}
.prose{max-width:760px;margin:0 auto;padding:40px 0}.prose .glass{padding:28px;white-space:pre-line}
/* shell */
.shell{display:grid;grid-template-columns:268px 1fr}
.sidebar{position:sticky;top:12px;margin:12px;height:calc(100vh - 24px);padding:18px;display:flex;flex-direction:column;gap:18px;z-index:40}
.side-nav{display:grid;gap:4px;flex:1;align-content:start;overflow:auto}
.side-nav a,.side-link{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;color:var(--text);font-weight:600;background:none;border:0;font:inherit;font-weight:600;cursor:pointer;text-decoration:none!important;width:100%;text-align:left}
.side-nav a:hover,.side-link:hover{background:color-mix(in srgb,var(--text) 6%,transparent)}
.side-nav a.active{background:color-mix(in srgb,var(--text) 10%,transparent);color:var(--text)}
.side-foot{display:grid;gap:4px;border-top:1px solid var(--line);padding-top:12px}
.dot-count{margin-left:auto;background:var(--bad);color:#fff;border-radius:999px;font-size:.72rem;padding:1px 8px}
.tag-admin{background:var(--brand);color:var(--brand-ink);border-radius:6px;padding:1px 6px;font-size:.65rem;vertical-align:middle}
.shell-main{min-width:0}.shell-top{display:flex;align-items:center;gap:12px;padding:12px 24px;position:sticky;top:0;z-index:30}.shell-title{font-size:1.25rem;margin:0;flex:1}
.shell-content{padding:24px;max-width:1240px}.menu-btn{display:none}
.avatar-btn{display:flex;align-items:center;gap:10px;background:none;border:0;cursor:pointer;color:var(--text);font:inherit;font-weight:600}.avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--solid2);border:1px solid var(--line);color:var(--text);font-weight:700}
.profile-menu{position:relative}.menu{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;padding:8px;border-radius:var(--r-sm);border:1px solid var(--glass-line);background:var(--glass-strong);box-shadow:var(--shadow);z-index:50}
.menu a,.menu button{display:flex;gap:10px;align-items:center;width:100%;padding:9px 12px;border-radius:10px;border:0;background:none;color:var(--text);font:inherit;cursor:pointer;text-decoration:none}.menu a:hover,.menu button:hover{background:color-mix(in srgb,var(--text) 6%,transparent)}
.menu-head{padding:8px 12px;display:grid;border-bottom:1px solid var(--line);margin-bottom:6px}.scrim{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:35}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}.page-head h2{margin:0}
.grid-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-bottom:20px}
.stat{padding:18px;display:flex;gap:14px;align-items:center}.stat-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--solid2);border:1px solid var(--line);color:var(--muted);flex:none}
.stat-v{font-size:1.5rem;font-weight:800;line-height:1.1}.stat-l{color:var(--muted);font-size:.85rem}.stat-h{font-size:.75rem;color:var(--muted)}
.cols{display:grid;grid-template-columns:2fr 1fr;gap:20px}.cols-eq{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.kv{display:grid;grid-template-columns:150px 1fr;gap:8px 16px;margin:0}.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:600;word-break:break-word}
.progress{height:10px;border-radius:99px;background:var(--solid2);overflow:hidden}.progress>i{display:block;height:100%;background:var(--text);border-radius:99px}
/* tables */
.table-wrap{overflow:auto;border-radius:var(--r);border:1px solid var(--glass-line);background:var(--glass-strong)}
table{width:100%;border-collapse:collapse;font-size:.92rem}th,td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}th{font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:var(--solid2);white-space:nowrap}tr:last-child td{border-bottom:0}tbody tr:hover{background:color-mix(in srgb,var(--text) 4%,transparent)}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:flex-end}.filters label{margin:0}.filters input,.filters select{margin:0;min-width:160px}
.pager{display:flex;gap:6px;align-items:center;margin-top:16px;flex-wrap:wrap}.pg{padding:6px 12px;border-radius:10px;border:1px solid var(--line);background:var(--solid);color:var(--text)}.pg.cur{background:var(--brand);color:var(--brand-ink);border-color:transparent}.pg.dis{opacity:.4}.pg-info{margin-left:auto;color:var(--muted);font-size:.85rem}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}.tabs a{padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:var(--solid);color:var(--text);font-weight:600}.tabs a.active{background:var(--brand);color:var(--brand-ink);border-color:transparent}
.empty{text-align:center;padding:40px 20px;color:var(--muted)}.empty-ic{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:18px;background:var(--solid2);margin-bottom:10px}
.skeleton{height:14px;border-radius:8px;background:linear-gradient(90deg,var(--solid2),var(--glass-strong),var(--solid2));background-size:200% 100%;animation:sk 1.4s infinite}@keyframes sk{to{background-position:-200% 0}}
.alert{padding:14px 18px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--glass-strong);margin-bottom:16px}.alert-warn{border-color:color-mix(in srgb,var(--warn) 50%,transparent)}.alert-bad{border-color:color-mix(in srgb,var(--bad) 50%,transparent)}.alert-info{border-color:color-mix(in srgb,var(--info) 50%,transparent)}.alert-ok{border-color:color-mix(in srgb,var(--ok) 50%,transparent)}
.toast{position:fixed;top:16px;right:16px;z-index:100;max-width:380px;padding:14px 18px;border-radius:14px;border:1px solid var(--glass-line);background:var(--glass-strong);box-shadow:var(--shadow);animation:in .3s ease;border-left:4px solid var(--info)}
.toast-success{border-left-color:var(--ok)}.toast-error{border-left-color:var(--bad)}.toast+.toast{top:80px}.toast.out{opacity:0;transform:translateX(20px);transition:.3s}@keyframes in{from{opacity:0;transform:translateY(-8px)}}
.dialog{border:1px solid var(--glass-line);border-radius:var(--r);padding:24px;max-width:440px;width:92%;color:var(--text);background:var(--glass-strong);box-shadow:var(--shadow)}.dialog::backdrop{background:rgba(0,0,0,.4)}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.notif{padding:14px 18px;display:flex;gap:12px;align-items:flex-start;border-bottom:1px solid var(--line)}.notif.unread{background:color-mix(in srgb,var(--text) 5%,transparent)}.notif:last-child{border:0}
.chart{width:100%;height:150px}.chart rect{fill:var(--text);opacity:.7}.chart-t{fill:var(--muted);font-size:11px}
.drop{border:2px dashed var(--line);border-radius:var(--r);padding:24px;text-align:center;background:var(--solid2)}.drop.over{border-color:var(--muted)}
.proof-img{max-width:100%;border-radius:var(--r-sm);border:1px solid var(--line)}
code,.mono{font-family:var(--mono);font-size:.9em;background:var(--solid2);padding:2px 6px;border-radius:6px}
.steps{counter-reset:s;display:grid;gap:14px;padding:0;list-style:none}.steps li{counter-increment:s;display:flex;gap:14px;align-items:flex-start}.steps li::before{content:counter(s);flex:none;width:30px;height:30px;border-radius:50%;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;font-weight:700}
@media (max-width:980px){.cols,.cols-eq,.row-3,.row-4{grid-template-columns:1fr}.footer-in{grid-template-columns:1fr}}
@media (max-width:860px){
 .shell{grid-template-columns:1fr}.sidebar{position:fixed;left:0;top:0;bottom:0;margin:0;height:100%;width:290px;border-radius:0 var(--r) var(--r) 0;transform:translateX(-105%);transition:transform .25s;background:var(--glass-strong)}.sidebar.open{transform:none}.menu-btn{display:inline-grid}
 .avatar-name{display:none}.shell-content{padding:16px}.shell-top{padding:10px 14px}.row-2{grid-template-columns:1fr}.kv{grid-template-columns:1fr}.kv dt{margin-top:8px}
 .nav-toggle{display:inline-grid}.topnav-links{position:absolute;left:12px;right:12px;top:64px;flex-direction:column;align-items:stretch;background:var(--glass-strong);border:1px solid var(--glass-line);border-radius:var(--r);padding:12px;display:none;box-shadow:var(--shadow)}.topnav-links.open{display:flex}
 .plan.featured{transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* pilih aplikasi (Only One) */
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.pick{position:relative;display:block;margin:0;padding:16px;border-radius:var(--r);cursor:pointer;font-weight:400;transition:border-color .15s,background .15s}
.pick input{position:absolute;top:16px;right:16px;margin:0}
.pick.is-on{border-color:var(--muted);background:var(--solid2)}
.pick-body{display:flex;flex-direction:column;gap:8px;padding-right:26px}
.pick-top{display:flex;gap:10px;align-items:center}
.pick-icon{width:34px;height:34px;border-radius:9px;object-fit:cover;background:var(--solid2);flex:none}
.pick-title{display:grid;font-weight:600;line-height:1.3}.pick-title small{font-weight:400;font-size:.76rem}
.pick-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pick-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:auto}
.pick-price{font-weight:700}
.pick-bar{position:sticky;bottom:12px;margin-top:18px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:16px 20px}
.pick-total{font-size:1.15rem;font-weight:700}
/* daftar berkas & rincian item */
.dl-list,.list-plain{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.dl-list>li{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;padding:14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--solid2)}
.dl-list>li>div:first-child{min-width:0;flex:1}
.dl-list form{margin:0}
.list-plain>li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.list-plain>li:last-child{border-bottom:0}
@media (max-width:860px){.pick-bar{position:static}}
/* Warna merek dari pengaturan dipakai sebagai aksen tipis, bukan palet utama. */
:root{--accent:#18181b}
a{color:var(--text);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
a:hover{text-decoration-color:var(--muted)}
.btn,.brand,.app-card,.side-nav a,.tabs a,.pg,.menu a{text-decoration:none}
.plan.featured::before,.side-nav a.active::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--accent)}
.side-nav a{position:relative}.plan{position:relative;overflow:hidden}
.plan.featured::before{left:0;top:0;bottom:auto;width:100%;height:3px;border-radius:0}

/* 2.2: calm, consistent website surfaces */
.profile-layout{max-width:760px;margin:0 auto}.app-card{display:flex;flex-direction:column;gap:10px;align-items:flex-start}.app-card p{flex:1}.app-unavailable{box-shadow:none}.page-head{gap:16px;flex-wrap:wrap}.card h3{margin-top:0}.backup-controls{margin:20px 0}.backup-controls form{display:grid;gap:12px}.backup-controls .row{align-items:end}.qris-image{display:block;max-width:280px;width:100%;height:auto;margin:16px auto;border-radius:10px}.payment-choice{max-width:380px;width:100%}.duration-choice{margin:10px 0;width:100%}.profile-layout .card{padding:24px}
@media(max-width:600px){.page-head .btn{width:100%}.pick-bar{position:static;flex-direction:column;align-items:stretch}.card{padding:18px}.table-wrap{max-width:100%;overflow-x:auto}.profile-layout .card{padding:18px}}