/* dev-expert: reference-aligned layout; P5 H4 E4 S5 R5 V4. */
:root { --local-border: #d1d5db; --local-text: #4b5563; --local-bg: #fff; --local-focus: #047a34; }
.local-copy-label { position: fixed; right: 16px; bottom: 12px; z-index: 50; max-width: calc(100vw - 32px); padding: 6px 10px; border: 1px solid var(--local-border); border-radius: 7px; background: var(--local-bg); color: var(--local-text); font: 12px/1.5 system-ui, sans-serif; }
.local-loader-mark { width: 60px; height: 60px; border-radius: 16px; font-size: 40px; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--local-focus); outline-offset: 3px; }
.pagination-bar { flex-wrap: wrap; }
.pager-actions { flex-wrap: wrap; }
@media (max-width: 480px) { .local-copy-label { right: 8px; bottom: 8px; max-width: calc(100vw - 16px); font-size: 11px; } .admin-shell { padding-bottom: 64px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
.super-content { min-width: 0; display: grid; gap: 18px; }
.admin-shell { padding-bottom: 80px; }
.admin-panel h2 { margin: 0 0 14px; }
.admin-panel label { display: grid; gap: 7px; margin-bottom: 14px; }
.admin-panel .toggle-row, .toggle-row { display: flex; align-items: flex-start; gap: 8px; }
.toggle-row input { width: auto; flex: 0 0 auto; margin-top: 3px; }
.demo-role { display: grid; gap: 8px; margin-top: 16px; font-size: 13px; font-weight: 700; }
.demo-role select { min-width: 0; max-width: 100%; }
.sidebar-brand span { overflow-wrap: anywhere; }
.sidebar-actions a { text-align: center; text-decoration: none; }
.form-hint { color: #647184; font-size: 13px; line-height: 1.6; }
.demo-chip { display: inline-block; border: 1px solid #b6e9c9; background: #ecfdf3; color: #007438; padding: 3px 8px; border-radius: 6px; font-size: 12px; white-space: nowrap; }
.demo-filters { background: #f8f9fb; border: 1px solid #e5e7eb; padding: 12px; border-radius: 10px; display: flex; align-items: end; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.demo-filters label { flex: 1 1 140px; margin: 0; font-size: 12px; }
.demo-filters .toggle-row { flex-basis: auto; align-items: center; align-self: center; }
.demo-filters input, .demo-filters select { width: 100%; min-width: 0; }
.demo-filters .toggle-row input { width: auto; }
.balance-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 16px 0; }
.balance-grid .stat-card strong { font-size: 21px; overflow-wrap: anywhere; }
.demo-chart { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 10px; margin-top: 22px; }
.demo-chart-day { display: grid; gap: 8px; text-align: center; font-size: 13px; }
.demo-chart-day small { overflow-wrap: anywhere; }
.demo-chart-track { height: 110px; display: flex; align-items: end; background: #f1f3f5; border-radius: 7px; overflow: hidden; }
.demo-chart-track > div { width: 100%; background: linear-gradient(#10a34c,#00c853); min-height: 0; border-radius: 6px 6px 0 0; }
.cell-meta, .fee-text { display: block; margin-top: 6px; font-size: 12px; line-height: 1.4; }
.cell-meta { color: #647184; }.fee-text { color: #b52839; }
.status-pill { display: inline-block; padding: 4px 7px; border-radius: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.status-pill.paid { background: #dcfce7; color: #08783f; }.status-pill.pending { background: #fff1cf; color: #885500; }.status-pill.expired { background: #ffe2e5; color: #b12032; }
.table-wrap { overflow-x: auto; }.table-wrap table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table-wrap th { font-size: 12px; color: #637085; text-align: left; }
.table-wrap th, .table-wrap td { padding: 12px 8px; border-bottom: 1px solid #e7ebef; vertical-align: top; }
.table-wrap td:first-child { min-width: 145px; }.table-wrap details { min-width: 160px; max-width: 300px; }
.table-actions { display: flex; flex-wrap: wrap; gap: 6px; min-width: 140px; }.table-actions button { font-size: 12px; padding: 7px 10px; }
.table-wrap summary { cursor: pointer; overflow-wrap: anywhere; }.empty-cell { padding: 35px 15px !important; color: #647184; text-align: center; }
.mono-wrap, .address-line { overflow-wrap: anywhere; }.pagination-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; font-size: 13px; }.pager-actions { display: flex; gap: 8px; }
.detail-grid { display: grid; grid-template-columns: minmax(75px,auto) 1fr; gap: 10px 14px; font-size: 13px; line-height: 1.6; text-align: left; }.detail-grid dt { color: #647184; }.detail-grid dd { margin: 0; overflow-wrap: anywhere; }
.withdrawal-summary { background: #f2fcf6; border: 1px solid #ceeedb; border-radius: 9px; padding: 15px; margin-bottom: 18px; display: grid; gap: 8px; }
.withdrawal-summary .inline-actions { align-items: end; flex-wrap: wrap; }.withdrawal-summary label { flex: 1; margin: 0; }
.withdraw-dialog { width: min(520px,calc(100vw - 32px)); padding: 24px; border: 1px solid #d9dfe6; border-radius: 14px; color: #11233b; max-height: 90vh; overflow: auto; }.withdraw-dialog::backdrop { background: #10203866; }.withdraw-dialog .toggle-row { margin: 22px 0; }.withdraw-dialog .inline-actions { flex-wrap: wrap; }
.registration-layout { max-width: 980px; margin: 55px auto; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); gap: 48px; align-items: center; }.registration-layout .auth-copy p { max-width: 310px; }.registration-preview { display: grid; gap: 8px; background: #effbf4; padding: 14px; border: 1px solid #c4edd3; border-radius: 9px; overflow-wrap: anywhere; margin-bottom: 16px; }.registration-preview small { color: #587166; font-size: 13px; }
.registration-layout .auth-card { display: grid; gap: 8px; }.auth-card label { display: grid; gap: 8px; }.auth-card .toggle-row { display: flex; }
.share-link-item { display: flex; align-items: start; gap: 10px; }.share-link-primary { flex: 1; min-width: 0; display: grid; gap: 7px; }.share-link-primary input { width: 100%; min-width: 0; }.share-link-item > a { margin-top: 10px; }.share-link-create { margin-top: 20px; padding-top: 20px; border-top: 1px solid #e5e7eb; }
.invoice-total { font-size: 34px; font-weight: 800; text-align: center; margin: 20px 0; }.demo-invoice-placeholder { border: 2px dashed #b8c5bf; border-radius: 12px; width: 240px; max-width: 100%; min-height: 210px; display: grid; align-content: center; gap: 16px; margin: 20px auto; color: #496456; font-weight: 700; text-align: center; background: #f6faf8; }.demo-invoice-placeholder small { font-weight: 400; line-height: 1.7; }.checkout-card > .ghost-btn { width: 100%; margin-top: 12px; }.checkout-card > .soft-btn { display: block; margin: 18px 0; text-align: center; }
.fee-settings { display: grid; gap: 14px; }.fee-setting-row { display: grid; grid-template-columns: 1fr 130px auto; align-items: center; gap: 12px; border-top: 1px solid #e5e7eb; padding-top: 14px; }.fee-setting-row label { margin: 0; }.fee-setting-row input { width: 100%; }.fee-setting-row small { color: #647184; display: block; margin-top: 5px; }
button:disabled { cursor: not-allowed; opacity: .5; }
.checkout-card > .form-hint { margin: 16px 0; }
.demo-role select { padding: 9px; border: 1px solid #d1d5db; border-radius: 8px; background: white; color: #172c41; }
@media(max-width: 480px) { .local-copy-label { position: static; margin: 0 8px 8px; } }
@media(max-width: 700px) { .registration-layout { margin: 12px auto; grid-template-columns: 1fr; gap: 20px; }.balance-grid { grid-template-columns: 1fr; }.demo-chart { gap: 5px; }.demo-chart-day { font-size: 11px; }.share-link-item { flex-wrap: wrap; }.share-link-primary { flex-basis: 100%; }.fee-setting-row { grid-template-columns: 1fr 100px; }.fee-setting-row button { grid-column: 1 / -1; }.table-wrap { max-width: calc(100vw - 70px); } }