/* Full width detail layout with readable form widths. */
.app-main{width:100%;max-width:none;margin:0;padding:40px 32px 80px}
.header-inner{width:100%;max-width:none;margin:0;padding:0 32px}
#website-detail-page{width:100%;min-width:0}
#website-detail-page .detail-heading{margin-bottom:26px}
#website-detail-page .detail-heading h1{font-size:clamp(31px,2.2vw,42px);line-height:1.2}
.detail-tabs{display:flex;align-items:stretch;gap:28px;width:100%;border-bottom:1px solid var(--line);margin-bottom:26px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.detail-tabs::-webkit-scrollbar{display:none}
.detail-tab{appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:51px;padding:0 4px;margin:0 0 -1px;border:0;border-bottom:3px solid transparent;background:transparent;color:#6b7c72;font-weight:800;font-size:13px;white-space:nowrap}
.detail-tab:hover{color:var(--green)}
.detail-tab.active{color:var(--green);border-bottom-color:var(--green)}
.detail-tab:focus-visible{outline:2px solid var(--green);outline-offset:-5px;border-radius:5px}
.detail-tab-panel{width:100%;min-width:0}
.detail-tab-panel>.panel{width:100%;margin:0 0 20px}
.detail-tab-panel .panel-heading h2{font-size:19px}
.detail-tab-panel .panel-heading p{font-size:13px}
.detail-tab-panel .field label,.detail-tab-panel .new-link>label{font-size:13px}
.detail-tab-panel .field input,.detail-tab-panel .new-link input{height:50px;font-size:14px}
.metrics{gap:18px;margin-bottom:22px}
.metric{min-height:142px;padding:24px}
.metric span{font-size:13px}
.metric strong{font-size:clamp(26px,1.8vw,34px)}
.settings-panel .form-stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:1120px;gap:20px 24px}
.settings-panel .checkbox-field,.settings-panel .form-actions{grid-column:1/-1}
.session-panel .session-summary,.session-panel .merchant-line{max-width:760px}
.session-panel .form-stack,.link-generator-panel .form-stack{max-width:560px}
.session-panel #session-otp-form{margin-top:18px}
.merchant-line{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:13px 15px;margin:-9px 0 22px;border:1px solid var(--line);border-radius:10px;font-size:13px}
.merchant-line span{color:var(--muted)}
.merchant-line strong{overflow-wrap:anywhere;text-align:right}
#detail-panel-links{display:grid;grid-template-columns:minmax(300px,38fr) minmax(0,62fr);gap:20px;align-items:start}
#detail-panel-links>.panel{min-width:0;margin:0;padding:24px;border-radius:14px;box-shadow:0 5px 20px rgba(26,58,39,.035)}
#detail-panel-links .panel-heading{margin-bottom:22px}
#detail-panel-links .panel-heading h2{font-size:19px;margin-bottom:6px}
#detail-panel-links .panel-heading p{font-size:13px}
#detail-panel-links .panel-symbol{width:42px;height:42px;border-radius:12px}
.link-generator-panel .form-stack{max-width:none;gap:17px}
.link-generator-panel .field{gap:9px}
.link-generator-panel #link-username{height:50px;font-size:14px}
.link-generator-panel #link-submit{width:100%;min-height:50px;font-size:14px}
.link-generator-panel .new-link{max-width:none;margin-top:20px;padding:15px;border:1px solid #dcece1;border-radius:12px;background:#f5faf6}
.link-generator-panel .new-link .input-actions{min-width:0}
.link-generator-panel #new-link-url{font-size:12px;text-overflow:ellipsis}
.link-generator-panel #copy-new-link{width:46px;height:46px}
.link-empty{min-height:172px;display:grid;place-items:center;text-align:center;padding:22px;border:1px dashed #d6e5da;border-radius:12px;background:#fafcfb;color:var(--muted);font-size:13px}
.link-table-scroll{width:100%;min-width:0;overflow-x:auto}
.link-list-panel .link-table{width:100%;min-width:0;table-layout:fixed}
.link-table th{padding:12px 13px;font-size:10px}
.link-table th:nth-child(1){width:19%}
.link-table th:nth-child(2){width:43%}
.link-table th:nth-child(3){width:24%}
.link-table th:nth-child(4){width:14%}
.link-table td{padding:14px 13px;font-size:12px;overflow:hidden;text-overflow:ellipsis}
.link-table td:first-child{color:var(--ink);font-weight:700}
.link-table td:nth-child(2){font-weight:500}
.link-table td a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--green);text-decoration:none}
.link-table td a:hover{text-decoration:underline}
.link-copy{min-height:34px;padding:0 12px;border:1px solid #cde5d5;border-radius:9px;background:#f0f8f2;color:var(--green);font-size:12px;font-weight:800}
.link-copy:hover{background:#e4f4e9}
.transaction-panel table{width:100%;min-width:1120px}
.transaction-panel th{padding:15px 20px;font-size:11px}
.transaction-panel td{padding:18px 20px;font-size:13px}
.transaction-action{min-height:34px;padding:0 11px;border:1px solid #cde5d5;border-radius:9px;background:#f0f8f2;color:var(--green);font-size:11px;font-weight:800;white-space:nowrap}
.transaction-action:hover{background:#e4f4e9}
.transaction-dialog{width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:25px;border:1px solid #dce9df;border-radius:18px;background:#fff;color:var(--ink);box-shadow:0 24px 80px rgba(13,47,29,.23);overflow:auto}
.transaction-dialog [hidden]{display:none!important}
.transaction-dialog::backdrop{background:rgba(14,39,25,.54);backdrop-filter:blur(3px)}
.transaction-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px}
.transaction-dialog-head .eyebrow{margin-bottom:6px}
.transaction-dialog-head h2{margin:0;font-size:21px;letter-spacing:-.03em}
.transaction-dialog-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
.transaction-dialog-details>div{min-width:0;padding:11px 13px;border:1px solid #e4eee7;border-radius:10px;background:#f8fbf9}
.transaction-dialog-details dt{margin-bottom:4px;color:var(--muted);font-size:11px;font-weight:700}
.transaction-dialog-details dd{margin:0;color:var(--ink);font-size:13px;font-weight:800;overflow-wrap:anywhere}
.manual-confirm-section{margin-top:18px;padding-top:17px;border-top:1px solid var(--line)}
.manual-confirm-section>p{margin:0 0 12px;font-size:14px;font-weight:800;line-height:1.5}
.manual-proof-check{display:flex;align-items:flex-start;gap:9px;padding:11px 12px;border:1px solid #dce9df;border-radius:10px;background:#f5faf6;color:#465f4e;font-size:12px;line-height:1.45;cursor:pointer}
.manual-proof-check input{width:16px;height:16px;flex:none;margin:1px 0 0;accent-color:var(--green)}
.transaction-dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:17px}
.transaction-dialog-actions .button{font-size:12px}
@media(max-width:560px){.transaction-dialog{padding:19px}.transaction-dialog-details{grid-template-columns:1fr 1fr;gap:8px}.transaction-dialog-details>div{padding:10px}.transaction-dialog-actions .button{flex:1;padding:0 10px}.transaction-dialog-head h2{font-size:19px}}
.api-docs-panel .api-docs-content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 32px}
.api-docs-section{min-width:0}
.api-docs-section h3{font-size:15px;margin:0 0 12px;color:var(--ink)}
.api-docs-section p{font-size:13px;line-height:1.65;color:var(--muted);margin:12px 0 0}
.api-docs-section code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere}
.api-docs-section pre{margin:0;padding:18px;border:1px solid var(--line);border-radius:11px;background:#f7faf8;color:#294435;overflow:auto;font-size:12px;line-height:1.6}
.api-docs-section pre code{overflow-wrap:normal}
.api-endpoint{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:11px;background:#f7faf8;min-width:0}
.api-endpoint code{font-size:13px;min-width:0}
.api-method{flex:none;color:var(--green);font-size:11px;font-weight:800}
.api-errors{border:1px solid var(--line);border-radius:11px;overflow:hidden}
.api-errors div{display:flex;gap:15px;padding:12px 15px;font-size:13px;border-top:1px solid var(--line)}
.api-errors div:first-child{border-top:0}
.api-errors strong{color:var(--green);min-width:32px}
.api-errors span{color:var(--muted)}
@media(max-width:900px){.app-main{padding:34px 24px 70px}.header-inner{padding:0 24px}.settings-panel .form-stack{grid-template-columns:1fr}.settings-panel .checkbox-field,.settings-panel .form-actions{grid-column:auto}}
@media(max-width:980px){#detail-panel-links{grid-template-columns:1fr;gap:16px}}
@media(max-width:900px){.api-docs-panel .api-docs-content{grid-template-columns:1fr}}
@media(max-width:760px){.app-main{padding:28px 17px 65px}.header-inner{padding:0 17px}.detail-tabs{gap:19px;margin-bottom:20px}.detail-tab{min-height:47px;font-size:12px}.detail-tab-panel .panel-heading h2{font-size:17px}.metric{min-height:112px;padding:16px}.metric span{font-size:11px}.metric strong{font-size:23px}#detail-panel-links>.panel{padding:20px}.link-list-panel .link-table,.link-table tbody,.link-table tr,.link-table td{display:block;width:100%}.link-table thead{display:none}.link-table tr{padding:12px 0;border-top:1px solid var(--line)}.link-table tr:first-child{border-top:0;padding-top:0}.link-table td{display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px;padding:6px 0;border:0;white-space:normal;overflow:visible}.link-table td:before{content:attr(data-label);color:var(--muted);font-size:11px;font-weight:700}.link-table td a{min-width:0;max-width:100%}.link-table td:last-child{align-items:center}}
@media(max-width:560px){.app-main{padding:26px 16px 60px}.header-inner{padding:0 16px}.detail-tab{font-size:12px}.metrics{gap:10px}.metric{padding:15px}.metric strong{font-size:21px}}

/* Website detail page */
#website-detail-page{min-width:0}
#website-detail-page .detail-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:122px;margin-bottom:18px;padding:24px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow)}
#website-detail-page .detail-identity{display:flex;align-items:center;gap:17px;min-width:0}
#website-detail-page .detail-avatar{width:68px;height:68px;flex:none;display:grid;place-items:center;border-radius:15px;background:#e9f8ef;color:var(--green);font:800 27px Inter,Arial,sans-serif}
#website-detail-page .detail-title{min-width:0}
#website-detail-page .detail-title .eyebrow{margin-bottom:5px;font-size:10px}
#website-detail-page .detail-heading h1{margin:0 0 9px;color:var(--ink);font:800 clamp(23px,2vw,29px)/1.2 Inter,Arial,sans-serif;letter-spacing:-.035em;overflow-wrap:anywhere}
#website-detail-page .detail-meta{gap:7px}
#website-detail-page .code-pill{padding:6px 9px;border-radius:7px;background:#f1f5f2;color:#526457;font-size:12px}
#website-detail-page .detail-meta .status-pill{padding:6px 9px;font-size:11px}
#website-detail-page .detail-meta .status-pill.inactive{background:#fff4e6;color:#8a6f4f}
.detail-back-button{min-height:41px;display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;padding:0 14px;border:1px solid #c7e3d1;border-radius:10px;background:#fff;color:var(--green-dark);font-size:13px;font-weight:700;white-space:nowrap}
.detail-back-button:hover{background:var(--green-soft)}
.detail-back-button svg{width:16px;height:16px}
.detail-back-button:focus-visible,.detail-refresh-button:focus-visible{outline:2px solid var(--green);outline-offset:3px}

#website-detail-page .detail-tabs{display:flex;align-items:center;gap:8px;width:100%;margin-bottom:18px;padding:5px;border:1px solid var(--line);border-radius:12px;background:#fff;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
#website-detail-page .detail-tab{min-height:42px;flex:none;margin:0;padding:0 15px;border:0;border-radius:10px;background:transparent;color:#667085;font-size:14px;font-weight:700}
#website-detail-page .detail-tab:hover{background:#f2f8f4;color:var(--green-dark)}
#website-detail-page .detail-tab.active{background:var(--green-soft);color:var(--green-dark)}
#website-detail-page .detail-tab:focus-visible{outline:2px solid var(--green);outline-offset:-2px}

#detail-panel-summary .metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px}
#detail-panel-summary .metric{min-width:0;min-height:110px;padding:20px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow)}
#detail-panel-summary .metric span{margin-right:48px;color:#667085;font-size:13px;font-weight:600;line-height:1.35}
#detail-panel-summary .metric strong{margin-top:14px;color:var(--ink);font:800 clamp(23px,2vw,28px)/1.2 Inter,Arial,sans-serif;letter-spacing:-.04em}
#detail-panel-summary .metric svg{top:17px;right:17px;width:42px;height:42px;padding:10px;border-radius:11px;background:var(--green-soft);color:var(--green)}

#detail-panel-summary .transaction-panel{min-width:0;margin:0;padding:0;border-radius:16px;overflow:hidden}
#detail-panel-summary .transaction-panel .panel-heading{align-items:center;margin:0;padding:20px 24px;border-bottom:1px solid var(--line)}
#detail-panel-summary .transaction-panel .panel-heading h2{margin:0 0 5px;font-size:18px}
#detail-panel-summary .transaction-panel .panel-heading p{margin:0;font-size:13px}
.detail-refresh-button{min-height:37px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 12px;border:1px solid #d6e7dc;border-radius:9px;background:#fff;color:var(--green-dark);font-size:13px;font-weight:700;white-space:nowrap}
.detail-refresh-button:hover{background:var(--green-soft)}
.detail-refresh-button svg{width:16px;height:16px}
#detail-panel-summary .table-scroll{width:100%;max-width:100%;overflow-x:auto}
#detail-panel-summary .transaction-panel table{width:100%;min-width:1240px;border-collapse:collapse}
#detail-panel-summary .transaction-panel th{height:45px;padding:10px 16px;background:#f8faf9;color:#667085;font-size:12px;font-weight:700;letter-spacing:0;text-transform:none;white-space:nowrap}
#detail-panel-summary .transaction-panel td{height:60px;padding:11px 16px;border-top:1px solid #edf1ee;color:#344054;font-size:13px;white-space:nowrap}
#detail-panel-summary .transaction-panel tbody tr:hover td{background:#f3faf5}
#detail-panel-summary .transaction-panel td:nth-child(2){color:var(--ink);font-weight:700}
#detail-panel-summary .transaction-panel th:nth-child(3),#detail-panel-summary .transaction-panel th:nth-child(5),#detail-panel-summary .transaction-panel td.amount-cell{text-align:right;font-variant-numeric:tabular-nums}
#detail-panel-summary .transaction-panel .status-pill{padding:6px 9px;font-size:11px}
#detail-panel-summary .transaction-panel .status-pill.pending,#detail-panel-summary .transaction-panel .status-pill.sending{background:#fff4df;color:#a66a18}
#detail-panel-summary .transaction-panel .status-pill.expired,#detail-panel-summary .transaction-panel .status-pill.failed,#detail-panel-summary .transaction-panel .status-pill.cancelled{background:#fff0f0;color:#b44646}
#detail-panel-summary .transaction-panel .status-pill.paid,#detail-panel-summary .transaction-panel .status-pill.success{background:#e9f8ef;color:var(--green)}
#detail-panel-summary .transaction-action{min-height:34px;padding:0 12px;border:1px solid #bce0ca;border-radius:9px;background:#fff;color:var(--green-dark);font-size:12px;font-weight:700}
#detail-panel-summary .transaction-action:hover{background:var(--green-soft)}

.transaction-dialog{width:min(560px,calc(100vw - 32px));padding:24px;border-color:var(--line);border-radius:16px;box-shadow:0 24px 70px rgba(16,40,27,.2)}
.transaction-dialog-head h2{font-size:22px}
.transaction-dialog-details{gap:9px}
.transaction-dialog-details>div{padding:12px 13px;border-color:var(--line);background:#f8faf9}
.transaction-dialog-details dt{font-size:12px}
.transaction-dialog-details dd{font-size:14px}
.transaction-dialog-details dd.status-pill.cancelled{display:inline-flex;padding:5px 9px;background:#fff0f0;color:#b44646;border-radius:999px}
.manual-proof-check{font-size:13px}
.transaction-dialog-actions .button{font-size:13px}
.cancel-deposit-section{margin-top:17px;padding-top:17px;border-top:1px solid var(--line);text-align:right}
.cancel-deposit-button{border:1px solid #e7a3a3;background:#fff;color:#b44646}
.cancel-deposit-button:hover{background:#fff0f0}

@media(max-width:1024px){#detail-panel-summary .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){#website-detail-page .detail-heading{align-items:flex-start;flex-direction:column;gap:15px;padding:20px}#website-detail-page .detail-avatar{width:58px;height:58px;font-size:23px}#website-detail-page .detail-tabs{gap:6px}#website-detail-page .detail-tab{min-height:40px;padding:0 13px;font-size:14px}#detail-panel-summary .transaction-panel .panel-heading{padding:18px 20px}}
@media(max-width:480px){#detail-panel-summary .metrics{grid-template-columns:1fr 1fr;gap:10px}#detail-panel-summary .metric{min-height:103px;padding:14px}#detail-panel-summary .metric span{margin-right:32px;font-size:12px}#detail-panel-summary .metric strong{font-size:22px}#detail-panel-summary .metric svg{top:12px;right:12px;width:34px;height:34px;padding:8px}#website-detail-page .detail-heading h1{font-size:22px}#website-detail-page .detail-identity{gap:12px}#website-detail-page .detail-meta .status-pill{font-size:10px}.transaction-dialog{padding:18px}.transaction-dialog-details{grid-template-columns:repeat(2,minmax(0,1fr))}}