:root{--green:#087f5b;--green-dark:#066747;--green-soft:#e8f7ed;--ink:#172b22;--muted:#718278;--line:#e2ebe5;--bg:#f5f8f6;--white:#fff;--shadow:0 14px 42px rgba(26,58,39,.045)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:14px 'DM Sans',sans-serif}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.6}.hidden{display:none!important}h1,h2,p{margin-top:0}h1,h2{font-family:Manrope,sans-serif}svg.lucide,i[data-lucide]{width:19px;height:19px;stroke-width:1.9;flex:none}.eyebrow{display:block;color:var(--green);font-size:11px;font-weight:800;letter-spacing:.16em;margin-bottom:12px}.logo-icon{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;background:var(--green);color:white;flex:none}.logo-icon svg{width:22px;height:22px}.logo-icon.light{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.22)}
.button{min-height:44px;border:1px solid transparent;border-radius:11px;padding:0 17px;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;transition:background .18s,transform .18s,box-shadow .18s;white-space:nowrap}.button:hover:not(:disabled){transform:translateY(-1px)}.button.primary{background:var(--green);color:white;box-shadow:0 8px 20px rgba(8,127,91,.14)}.button.primary:hover:not(:disabled){background:var(--green-dark)}.button.secondary{background:var(--green-soft);color:var(--green-dark)}.button.subtle{background:transparent;color:#607369}.button.subtle:hover{background:#eef6f0}.button.danger-text{color:#b64b4b;background:#fff2f2}.icon-button{width:39px;height:39px;display:inline-flex;align-items:center;justify-content:center;background:white;color:#6c7d72;border:1px solid var(--line);border-radius:10px;flex:none}.icon-button:hover{color:var(--green);border-color:#bedfca}.icon-button svg{width:17px;height:17px}.panel{background:white;border:1px solid var(--line);border-radius:17px;box-shadow:var(--shadow);padding:25px}.panel-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:24px}.panel-heading h2{font-size:17px;letter-spacing:-.025em;margin-bottom:6px}.panel-heading p{color:var(--muted);font-size:12px;line-height:1.5;margin:0}.panel-symbol{width:39px;height:39px;border-radius:11px;background:#eff8f1;color:var(--green);display:inline-flex;align-items:center;justify-content:center;flex:none}.panel-symbol svg{width:19px;height:19px}
.boot{min-height:100vh;display:flex;justify-content:center;align-items:center;gap:13px;color:var(--green);background:white;font:800 19px Manrope,sans-serif}.spinner{width:19px;height:19px;border:3px solid #d9ede1;border-top-color:var(--green);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.login-screen{min-height:100vh;display:grid;grid-template-columns:minmax(400px,48%) 1fr;background:white}.login-visual{padding:42px 9%;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;color:white;background:radial-gradient(circle at 90% 80%,#169b70 0,transparent 36%),linear-gradient(145deg,#075d44,#0b845c)}.login-visual:after{content:'';position:absolute;width:560px;height:560px;right:-280px;bottom:-250px;border:1px solid rgba(255,255,255,.15);border-radius:50%}.visual-brand{display:flex;align-items:center;gap:12px;font:800 18px Manrope,sans-serif;letter-spacing:-.03em;position:relative;z-index:1}.visual-copy{max-width:520px;position:relative;z-index:1}.visual-label{display:inline-block;padding:9px 13px;border-radius:30px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.17);font-size:11px;font-weight:800;letter-spacing:.15em;margin-bottom:20px}.visual-copy h1{font-size:clamp(34px,4.2vw,58px);line-height:1.13;letter-spacing:-.055em;margin-bottom:17px}.visual-copy p{max-width:450px;color:rgba(255,255,255,.76);line-height:1.7;font-size:16px}.login-visual small{color:rgba(255,255,255,.68);position:relative;z-index:1}.login-area{display:grid;place-items:center;padding:36px}.login-card{width:min(390px,100%)}.mobile-brand{display:none}.login-card h2{font-size:31px;letter-spacing:-.045em;margin-bottom:9px}.login-card>p{color:var(--muted);line-height:1.6;margin-bottom:30px}.login-footnote{display:flex;gap:9px;align-items:center;border-top:1px solid var(--line);padding-top:22px;margin-top:30px;color:var(--muted);font-size:12px}.login-footnote svg{color:var(--green);width:17px;height:17px}
.form-stack{display:grid;gap:16px}.field{display:grid;gap:8px}.field label,.form-stack>label,.new-link>label{font-size:12px;font-weight:800}.field input,.form-stack>input,.new-link input{height:47px;width:100%;border:1px solid #d9e5dc;border-radius:10px;padding:0 14px;outline:none;color:var(--ink);background:white;min-width:0}.field input:focus,.form-stack>input:focus,.new-link input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(8,127,91,.1)}input[readonly]{background:#f8faf8}.checkbox-field{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700}.checkbox-field input{width:17px;height:17px;accent-color:var(--green)}.input-actions{display:flex;align-items:center;gap:7px}.input-actions input{flex:1}.form-actions{display:flex;gap:9px;flex-wrap:wrap}
.app-header{height:74px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}.header-inner{max-width:1280px;height:100%;margin:auto;padding:0 30px;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);font:800 18px Manrope,sans-serif;letter-spacing:-.04em}.brand strong{color:var(--green)}.brand small{display:block;color:#9caba1;font:800 9px 'DM Sans',sans-serif;letter-spacing:.14em;margin-top:2px}.header-actions{display:flex;align-items:center;gap:13px}.admin-pill{display:inline-flex;align-items:center;gap:6px;color:var(--green);background:#ecf8ef;border-radius:30px;padding:9px 12px;font-size:11px;font-weight:800}.admin-pill svg{width:14px;height:14px}.app-main{max-width:1280px;margin:auto;padding:43px 30px 80px}.page-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:29px}.page-heading h1,.detail-heading h1{font-size:31px;letter-spacing:-.045em;margin-bottom:8px}.page-heading p{color:var(--muted);margin:0;line-height:1.5}.create-panel{margin-bottom:23px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.form-grid .wide{grid-column:1/-1}.website-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.website-card{background:white;border:1px solid var(--line);border-radius:17px;box-shadow:var(--shadow);padding:23px;display:flex;flex-direction:column;min-height:210px}.website-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.web-avatar{width:43px;height:43px;background:var(--green-soft);color:var(--green);border-radius:11px;display:inline-flex;align-items:center;justify-content:center;font:800 16px Manrope,sans-serif}.website-card h2{font-size:18px;margin:20px 0 7px;letter-spacing:-.03em;overflow-wrap:anywhere}.website-card code{font:700 11px 'DM Sans',sans-serif;color:#637569;background:#f2f6f3;padding:5px 8px;border-radius:6px}.card-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:15px;margin-top:auto}.card-bottom .button{min-height:36px;padding:0 12px;font-size:12px}.status-pill{display:inline-flex;align-items:center;gap:6px;background:#fff3e5;color:#a8681b;border-radius:30px;padding:7px 10px;font-size:11px;font-weight:800;white-space:nowrap}.status-pill.connected,.status-pill.paid,.status-pill.success{background:#e8f7ed;color:var(--green)}.status-pill.failed,.status-pill.expired{background:#fff0f0;color:#b44646}.status-pill.unverified{background:#fff3e5;color:#a8681b}.status-pill:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}.empty-state{border:1px dashed #cbdcd1;border-radius:16px;padding:52px 24px;text-align:center;background:#fbfdfb;color:var(--muted);grid-column:1/-1}.empty-state svg{width:31px;height:31px;color:var(--green);display:block;margin:0 auto 14px}.empty-state h2{color:var(--ink);font-size:17px;margin-bottom:6px}
.back-link{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--green);font-weight:800;padding:0;margin-bottom:26px}.back-link svg{width:17px;height:17px}.detail-heading{margin-bottom:25px}.detail-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.code-pill{display:inline-flex;align-items:center;padding:7px 10px;border-radius:7px;background:#edf2ee;color:#4b6655;font-size:11px;font-weight:800}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px}.metric{background:white;border:1px solid var(--line);border-radius:15px;padding:20px;position:relative;box-shadow:var(--shadow);min-height:130px}.metric span{display:block;color:#77877d;font-size:12px;font-weight:700;margin-right:28px}.metric strong{display:block;font:800 26px Manrope,sans-serif;letter-spacing:-.05em;margin-top:19px;overflow-wrap:anywhere}.metric svg{position:absolute;right:19px;top:18px;width:19px;height:19px;color:var(--green)}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;margin-bottom:18px}.session-summary{border:1px solid #e3eee5;background:#f5faf6;border-radius:11px;padding:15px;margin-bottom:22px;color:#4c6756;font-size:12px;line-height:1.5}.session-summary strong{display:block;font-size:13px;color:var(--ink);margin-bottom:4px}.new-link{display:grid;gap:9px;padding:15px;background:#f6faf7;border-radius:11px;margin-top:18px}.new-link input{font-size:12px}.link-list{max-height:330px;overflow:auto}.link-item{padding:13px 0;border-top:1px solid var(--line)}.link-item:first-child{border-top:0;padding-top:0}.link-item-head{display:flex;justify-content:space-between;gap:10px}.link-item strong{font-size:12px;overflow-wrap:anywhere}.link-item time{color:var(--muted);font-size:11px;white-space:nowrap}.link-item-foot{display:flex;gap:8px;align-items:center;margin-top:6px}.link-item-foot a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--green);font-size:11px}.link-item-foot button{border:0;background:transparent;color:var(--green);font-size:11px;font-weight:800;white-space:nowrap}.list-empty{color:var(--muted);font-size:12px;line-height:1.6;margin:0}.transaction-panel{padding:0;overflow:hidden}.transaction-panel .panel-heading{padding:24px 25px 0}.table-scroll{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:940px}th{text-align:left;background:#fafcfb;color:#91a196;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:13px 17px;white-space:nowrap}td{border-top:1px solid #edf2ee;padding:17px;color:#4d6255;font-size:12px;white-space:nowrap}td:nth-child(2){font-weight:800;color:var(--ink)}td .status-pill{font-size:10px}.empty-cell{text-align:center;color:var(--muted);padding:35px!important}.toast{position:fixed;right:22px;top:18px;z-index:50;max-width:360px;padding:13px 16px;border-radius:11px;background:#18382b;color:white;box-shadow:0 14px 35px rgba(17,53,30,.17);font-size:12px;line-height:1.5;opacity:0;transform:translateY(-8px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translateY(0)}.toast.error{background:#a03c3c}
@media(max-width:1080px){.website-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.login-screen{display:block}.login-visual{display:none}.login-area{min-height:100vh;padding:30px 23px}.mobile-brand{display:flex;align-items:center;gap:9px;font:800 17px Manrope,sans-serif;margin-bottom:48px}.app-main{padding:28px 17px 65px}.header-inner{padding:0 17px}.app-header{height:64px}.header-actions{gap:4px}.admin-pill{display:none}.header-actions .button{padding:0 9px}.page-heading{align-items:flex-start;gap:13px}.page-heading h1,.detail-heading h1{font-size:26px}.page-heading p{font-size:12px}.page-heading .button{font-size:12px;padding:0 11px;min-height:39px}.detail-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}.panel{padding:20px}.transaction-panel{padding:0}.transaction-panel .panel-heading{padding:20px 20px 0}}
@media(max-width:560px){.website-grid{grid-template-columns:1fr}.page-heading{display:block}.page-heading .button{margin-top:19px}.metrics{gap:10px}.metric{padding:15px;min-height:108px}.metric strong{font-size:21px;margin-top:18px}.metric span{font-size:11px}.brand{font-size:16px}.brand .logo-icon{width:36px;height:36px}.back-link{font-size:12px}}
.qris-settings-panel{max-width:560px}
#settings-current{margin:0;color:var(--muted);font-size:12px}
#nav-settings[aria-current="page"]{background:var(--green-soft);color:var(--green-dark)}
@media(max-width:560px){#nav-settings span{display:none}}