*{box-sizing:border-box}:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#182230;background:#f6f7f9;font-synthesis:none;text-rendering:optimizeLegibility}body{margin:0;min-width:320px;min-height:100vh}button,input{font:inherit}button{cursor:pointer}.login-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top left,rgba(91,33,182,.12),transparent 34%),#f6f7f9}.login-card{width:min(420px,100%);padding:36px;background:#fff;border:1px solid #e8eaf0;border-radius:18px;box-shadow:0 24px 60px #15192314}.brand-mark{width:46px;height:46px;display:grid;place-items:center;border-radius:13px;background:#5f259f;color:#fff;font-weight:800;font-size:24px}.brand-mark.small{width:36px;height:36px;border-radius:10px;font-size:18px}.login-card h1{margin:18px 0 4px}.login-card p{color:#667085;margin:0 0 28px}.login-card label{display:block;font-size:14px;font-weight:600;margin-bottom:8px}.login-card input,.search-box input{width:100%;border:1px solid #d9dde5;background:#fff;border-radius:10px;outline:none}.login-card input{padding:12px 14px;margin-bottom:14px}.login-card input:focus,.search-box:focus-within{border-color:#5f259f;box-shadow:0 0 0 3px #5f259f17}.login-card button{width:100%;border:0;border-radius:10px;padding:12px 16px;background:#5f259f;color:#fff;font-weight:700}.shell{min-height:100vh;display:grid;grid-template-columns:250px minmax(0,1fr)}.sidebar{position:sticky;top:0;height:100vh;background:#111827;color:#fff;padding:24px 18px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:12px;padding:0 8px 26px}.brand strong,.brand span{display:block}.brand span{font-size:12px;color:#9ca3af;margin-top:2px}nav{display:grid;gap:6px}nav a,nav button,.logout{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:9px;color:#c7cbd4;text-decoration:none;background:transparent;border:0;text-align:left}nav a.active,nav a:hover,nav button.active,nav button:hover:not(:disabled),.logout:hover{color:#fff;background:#ffffff14}.logout{margin-top:auto;width:100%}.main{padding:32px;overflow:hidden}header{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:26px}header h1,.panel h2{margin:0}header p,.panel p{color:#667085;margin:6px 0 0}.secondary{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:9px;border:1px solid #d9dde5;background:#fff;color:#344054}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px}.stat-card{background:#fff;border:1px solid #e7e9ee;border-radius:14px;padding:20px;display:flex;gap:14px}.stat-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:#f2ebfa;color:#5f259f}.stat-card span,.stat-card strong,.stat-card small{display:block}.stat-card span{color:#667085;font-size:13px}.stat-card strong{font-size:22px;margin-top:5px}.panel{background:#fff;border:1px solid #e7e9ee;border-radius:14px;margin-bottom:18px}.integration-panel{padding:20px;display:flex;justify-content:space-between;align-items:center}.eyebrow{color:#5f259f;font-size:12px;text-transform:uppercase;font-weight:700;letter-spacing:.08em}.status-pill{display:inline-flex;align-items:center;width:-moz-fit-content;width:fit-content;border-radius:999px;padding:5px 9px;font-size:11px;text-transform:uppercase;font-weight:700;background:#eef0f4;color:#667085}.status-pill.success,.status-pill.completed{background:#e8f7ee;color:#18794e}.status-pill.pending,.status-pill.created{background:#fff4db;color:#9a6700}.status-pill.failed,.status-pill.expired{background:#fdecec;color:#b42318}.panel-head{padding:18px 20px;border-bottom:1px solid #edf0f3;display:flex;justify-content:space-between;gap:18px;align-items:center}.search-box{width:min(300px,100%);display:flex;align-items:center;gap:8px;border:1px solid #d9dde5;background:#fff;padding:0 10px;border-radius:10px}.search-box input{border:0;padding:10px 0;box-shadow:none!important}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:900px}th,td{padding:14px 20px;text-align:left;border-bottom:1px solid #edf0f3;vertical-align:middle}th{font-size:12px;color:#667085;background:#fafbfc;text-transform:uppercase;letter-spacing:.04em}td{font-size:14px}td strong,td small{display:block}td small{color:#8a94a3;margin-top:3px}.icon-button{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;border:1px solid #d9dde5;background:#fff}.empty{text-align:center;color:#667085;padding:30px}.error-box{border:1px solid #f1b4b4;background:#fff2f2;color:#a61b1b;padding:11px 13px;border-radius:9px;margin-bottom:14px}.spin{animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:1050px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.shell{grid-template-columns:1fr}.sidebar{position:static;height:auto}nav{grid-template-columns:repeat(2,minmax(0,1fr))}.logout{margin-top:12px}.main{padding:20px}header,.panel-head{flex-direction:column}.stats-grid{grid-template-columns:1fr}.search-box{width:100%}}nav button:disabled{opacity:.45;cursor:not-allowed}.transaction-panel{overflow:hidden}.transaction-filters{display:grid;grid-template-columns:minmax(240px,1fr) auto auto auto auto;gap:10px;align-items:center;padding:18px 20px;border-bottom:1px solid #edf0f3}.transaction-search{width:100%}.transaction-filters select,.date-filter{height:42px;border:1px solid #d9dde5;background:#fff;border-radius:10px;color:#344054}.transaction-filters select{padding:0 34px 0 12px;outline:none}.transaction-filters select:focus,.date-filter:focus-within{border-color:#5f259f;box-shadow:0 0 0 3px #5f259f17}.date-filter{display:flex;align-items:center;gap:8px;padding:0 10px;color:#667085}.date-filter input{border:0;outline:none;background:transparent;color:#344054}.primary-small{height:42px;border:0;border-radius:10px;padding:0 18px;background:#5f259f;color:#fff;font-weight:700}.primary-small:disabled{opacity:.6;cursor:not-allowed}.table-summary{min-height:48px;padding:10px 20px;display:flex;justify-content:space-between;align-items:center;gap:16px;color:#667085;font-size:13px;border-bottom:1px solid #edf0f3}.text-button{border:0;background:transparent;color:#5f259f;padding:6px 8px;font-weight:700}.text-button:hover{text-decoration:underline}.clickable-row{cursor:pointer}.clickable-row:hover td{background:#faf8fd}.pagination{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;border-top:1px solid #edf0f3;color:#667085;font-size:13px}.pagination>div{display:flex;gap:8px}.drawer-backdrop{position:fixed;inset:0;z-index:1000;background:#1118277a;display:flex;justify-content:flex-end}.transaction-drawer{width:min(560px,100%);height:100vh;background:#fff;box-shadow:-18px 0 50px #1118272e;overflow-y:auto}.drawer-head{position:sticky;top:0;z-index:2;background:#fff;padding:22px 24px;border-bottom:1px solid #edf0f3;display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.drawer-head h2{margin:5px 0 0;font-size:20px;overflow-wrap:anywhere}.drawer-loading{padding:32px 24px;display:flex;gap:10px;align-items:center;color:#667085}.drawer-body{padding:24px}.detail-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px;border:1px solid #e7e9ee;border-radius:14px;background:#fafbfc}.detail-hero span,.detail-hero strong{display:block}.detail-hero span{color:#667085;font-size:13px}.detail-hero strong{font-size:28px;margin-top:5px}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}.detail-grid>div{min-width:0;padding:14px;border:1px solid #edf0f3;border-radius:10px}.detail-grid span,.detail-grid strong{display:block}.detail-grid span{color:#667085;font-size:12px;margin-bottom:5px}.detail-grid strong{font-size:13px;overflow-wrap:anywhere}.drawer-section{margin-top:28px}.drawer-section h3{margin:0 0 12px;font-size:15px}.section-title-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.section-title-row>span{color:#667085;font-size:12px}.reconcile-button{width:100%;margin-top:18px;min-height:42px;display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:10px;background:#5f259f;color:#fff;font-weight:700}.reconcile-button:disabled{opacity:.6;cursor:not-allowed}.timeline{position:relative}.timeline-item{position:relative;display:grid;grid-template-columns:14px 1fr;gap:12px;padding:0 0 22px}.timeline-item:last-child{padding-bottom:0}.timeline-item:before{content:"";position:absolute;left:6px;top:14px;bottom:0;width:1px;background:#e1e5eb}.timeline-item:last-child:before{display:none}.timeline-dot{width:13px;height:13px;margin-top:2px;border-radius:999px;background:#5f259f;box-shadow:0 0 0 4px #f2ebfa}.timeline-item strong,.timeline-item span{display:block}.timeline-item strong{text-transform:capitalize;font-size:13px}.timeline-item>div:last-child>span:not(.status-pill){color:#667085;font-size:12px;margin:4px 0 8px}.empty.compact{padding:18px 0}@media(max-width:1180px){.transaction-filters{grid-template-columns:1fr 1fr}.transaction-search{grid-column:1 / -1}}@media(max-width:760px){.transaction-filters{grid-template-columns:1fr}.transaction-search{grid-column:auto}.pagination{align-items:flex-start;flex-direction:column}.pagination>div{width:100%}.pagination .secondary{flex:1;justify-content:center}.transaction-drawer{width:100%}.detail-grid{grid-template-columns:1fr}}.success-box{border:1px solid #a7d7b8;background:#edf9f1;color:#18794e;padding:11px 13px;border-radius:9px;margin-bottom:14px}.integration-health-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px}.integration-health-card{min-width:0;padding:18px;display:grid;grid-template-columns:36px 1fr;-moz-column-gap:10px;column-gap:10px;row-gap:2px;align-items:center;background:#fff;border:1px solid #e7e9ee;border-radius:14px}.integration-health-card>svg{grid-row:1 / 3;color:#5f259f}.integration-health-card span{color:#667085;font-size:12px}.integration-health-card strong{font-size:16px}.integration-section{overflow:hidden}.integration-detail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:20px}.integration-detail-grid>div{min-width:0;padding:15px;background:#fafbfc;border:1px solid #edf0f3;border-radius:10px}.integration-detail-grid span,.integration-detail-grid strong{display:block}.integration-detail-grid span{margin-bottom:6px;color:#667085;font-size:12px}.integration-detail-grid strong{overflow-wrap:anywhere;font-size:14px}.integration-add-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:18px 20px;border-bottom:1px solid #edf0f3}.integration-add-form input{width:100%;min-width:0;height:42px;padding:0 13px;border:1px solid #d9dde5;border-radius:10px;outline:none}.integration-add-form input:focus{border-color:#5f259f;box-shadow:0 0 0 3px #5f259f17}.integration-add-form .primary-small{display:inline-flex;align-items:center;justify-content:center;gap:7px}.integration-list{display:grid}.integration-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:16px 20px;border-bottom:1px solid #edf0f3}.integration-row:last-child{border-bottom:0}.integration-row-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:#f2ebfa;color:#5f259f}.integration-row-main strong,.integration-row-main code,.integration-row-main span{display:block}.integration-row-main strong{overflow-wrap:anywhere;font-size:14px}.integration-row-main code{width:-moz-fit-content;width:fit-content;margin:5px 0;color:#344054;font-size:13px}.integration-empty{padding:28px 20px;text-align:center;color:#667085}.break-value{word-break:break-word}@media(max-width:1050px){.integration-health-grid,.integration-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.integration-health-grid,.integration-detail-grid,.integration-add-form{grid-template-columns:1fr}.integration-row{grid-template-columns:38px minmax(0,1fr)}.integration-row>.status-pill,.integration-row>.secondary{grid-column:2;justify-self:start}}.new-key-panel{padding:20px;margin-bottom:18px;border:1px solid #f0c36d;border-radius:14px;background:#fffbeb}.new-key-warning{display:flex;gap:12px;color:#92400e}.new-key-warning p{margin:4px 0 0}.new-key-value{display:flex;gap:12px;align-items:center;margin:18px 0}.new-key-value code{flex:1;min-width:0;padding:13px;overflow-wrap:anywhere;border:1px solid #e5c07b;border-radius:9px;background:#fff}.security-note{color:#667085;line-height:1.55}.security-note code{margin:0 4px}.security-form{display:grid;gap:16px;padding:20px}.security-form label:not(.security-confirmation){display:grid;gap:7px;font-size:13px;font-weight:700}.security-form input[type=text],.security-form input[type=password],.security-form input:not([type]){height:42px;padding:0 13px;border:1px solid #d9dde5;border-radius:10px;outline:none}.security-confirmation{display:flex;gap:10px;align-items:flex-start;color:#667085;font-size:13px;line-height:1.5}.security-confirmation input{margin-top:3px}.danger-button{width:-moz-fit-content;width:fit-content;display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border:0;border-radius:9px;background:#b42318;color:#fff;font-weight:700}.danger-button:disabled{opacity:.55;cursor:not-allowed}.integration-row-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:9px;background:#f2ebfa;color:#5f259f}.integration-row-main{min-width:0}.integration-row-main strong,.integration-row-main span,.integration-row-main code{display:block}.integration-row-main span{margin-top:4px;color:#667085;font-size:12px}.integration-row-main code{margin-top:4px;overflow-wrap:anywhere}.integration-empty{padding:24px 20px;color:#667085;text-align:center}@media(max-width:760px){.new-key-value{align-items:stretch;flex-direction:column}.danger-button{width:100%;justify-content:center}}.new-webhook-secret-panel{margin-bottom:18px}.integration-actions{display:flex;gap:8px;align-items:center}.integration-actions .secondary,.webhook-delivery-table .secondary,.panel-head .secondary{display:inline-flex;align-items:center;justify-content:center;gap:7px}.webhook-delivery-table{min-width:1180px}.webhook-delivery-table td{max-width:260px}.webhook-delivery-table td small{max-width:260px;overflow-wrap:anywhere}.status-pill.succeeded{background:#e8f7ee;color:#18794e}.status-pill.delivering{background:#e8f1ff;color:#175cd3}@media(max-width:760px){.integration-actions{grid-column:2;align-items:stretch;flex-direction:column}}:root{--pp-purple-950: #271044;--pp-purple-900: #35135f;--pp-purple-800: #4a1885;--pp-purple-700: #6424a8;--pp-purple-600: #7a35bc;--pp-purple-500: #9754d1;--pp-violet: #7657e6;--pp-blue: #2f74e8;--pp-cyan: #16a6c7;--pp-green: #20a66a;--pp-amber: #e79819;--pp-red: #d94a54;--pp-surface: #ffffff;--pp-canvas: #f3f2fb;--pp-border: #e3def0;--pp-text: #171221;--pp-muted: #6f6980;--pp-shadow: 0 12px 30px rgba(64, 31, 105, .08)}body{color:var(--pp-text);background:radial-gradient(circle at 88% 6%,rgba(118,87,230,.12),transparent 28rem),radial-gradient(circle at 12% 92%,rgba(22,166,199,.08),transparent 30rem),var(--pp-canvas)}.sidebar{color:#fff;background:radial-gradient(circle at 15% 10%,rgba(195,132,255,.35),transparent 14rem),linear-gradient(165deg,var(--pp-purple-800) 0%,var(--pp-purple-950) 58%,#16102c 100%);border-right:0;box-shadow:12px 0 40px #2710442e}.sidebar .brand{color:#fff}.sidebar .brand span{color:#ffffffa3}.brand-mark,.brand-mark.small{color:#fff;background:linear-gradient(135deg,#bc78f0,#6e36bd);box-shadow:0 8px 20px #1a093047,inset 0 1px #ffffff40}.sidebar nav button{color:#ffffffb8;border:1px solid transparent;transition:transform .16s ease,background .16s ease,color .16s ease,border-color .16s ease}.sidebar nav button:hover{color:#fff;background:#ffffff17;transform:translate(3px)}.sidebar nav button.active{color:#fff;background:linear-gradient(90deg,#fff3,#ffffff1a);border-color:#ffffff29;box-shadow:inset 3px 0 #d9a4ff,0 8px 22px #1107202e}.sidebar .logout{color:#ffffffb8;border-color:#ffffff24;background:#ffffff0f}.main{background:transparent}.main>header{position:relative;padding:23px 26px;margin-bottom:22px;overflow:hidden;color:#fff;border-radius:18px;background:radial-gradient(circle at 92% 0,rgba(89,210,230,.28),transparent 19rem),linear-gradient(115deg,var(--pp-purple-800),var(--pp-violet) 72%,#5978e9);box-shadow:0 16px 36px #4e268833}.main>header h1,.main>header p{color:#fff}.main>header p{opacity:.8}.main>header .secondary{color:#fff;border-color:#ffffff52;background:#ffffff21;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.panel,.stat-card,.integration-health-card{border-color:var(--pp-border);box-shadow:var(--pp-shadow)}.panel{overflow:hidden}.stat-card{position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}.stat-card:hover,.integration-health-card:hover{transform:translateY(-3px);box-shadow:0 17px 35px #401f6921}.stat-card:after{content:"";position:absolute;width:88px;height:88px;right:-28px;bottom:-38px;border-radius:50%;opacity:.13;background:currentColor}.stat-card:nth-child(1){color:var(--pp-purple-700);background:linear-gradient(145deg,#fff,#f7efff)}.stat-card:nth-child(2){color:var(--pp-blue);background:linear-gradient(145deg,#fff,#edf5ff)}.stat-card:nth-child(3){color:var(--pp-green);background:linear-gradient(145deg,#fff,#ebfaf3)}.stat-card:nth-child(4){color:var(--pp-amber);background:linear-gradient(145deg,#fff,#fff7e7)}.stat-card span,.stat-card small{color:var(--pp-muted)}.stat-card strong{color:var(--pp-text)}.stat-icon,.integration-row-icon{background:linear-gradient(145deg,#f1e6fb,#e7dcf7);box-shadow:inset 0 0 0 1px #5f259f14}.integration-health-card:nth-child(1)>svg{color:var(--pp-purple-600)}.integration-health-card:nth-child(2)>svg{color:var(--pp-blue)}.integration-health-card:nth-child(3)>svg{color:var(--pp-cyan)}.integration-health-card:nth-child(4)>svg{color:var(--pp-green)}.panel-head{background:linear-gradient(100deg,#f7f3fce0,#f4f7ff8f)}.eyebrow{color:var(--pp-purple-700)}th{color:#513b70;background:linear-gradient(180deg,#f3edfa,#eee8f7)}tbody tr{transition:background .14s ease,transform .14s ease}tbody tr:hover{background:#faf7fd}.primary-small,.login-card button,.reconcile-button{color:#fff;border:0;background:linear-gradient(135deg,var(--pp-purple-700),var(--pp-violet));box-shadow:0 8px 18px #5f259f33}.primary-small:hover,.login-card button:hover,.reconcile-button:hover{filter:brightness(1.07);transform:translateY(-1px)}.secondary{color:#50316f;border-color:#d7cce5;background:linear-gradient(180deg,#fff,#faf7fd)}.status-pill.completed,.status-pill.success,.status-pill.succeeded,.status-pill.active{color:#087647;background:linear-gradient(135deg,#dcf8e9,#c9f2dc)}.status-pill.pending,.status-pill.created,.status-pill.delivering{color:#9a5c00;background:linear-gradient(135deg,#fff2c8,#ffe5a2)}.status-pill.failed,.status-pill.expired,.status-pill.revoked,.status-pill.disabled{color:#b42318;background:linear-gradient(135deg,#ffe2e3,#ffd1d4)}.transaction-drawer{border-left:1px solid #e0d5eb;box-shadow:-20px 0 55px #27104433}.drawer-head{color:#fff;background:linear-gradient(120deg,var(--pp-purple-800),var(--pp-violet))}.drawer-head h2,.drawer-head .eyebrow{color:#fff}.drawer-head .eyebrow{opacity:.72}.detail-hero{border-color:#ddd1eb;background:radial-gradient(circle at 92% 12%,rgba(118,87,230,.17),transparent 12rem),linear-gradient(135deg,#faf5ff,#f2f6ff)}.detail-grid>div{border-color:#e5def0;background:linear-gradient(145deg,#fff,#fbf9fd)}.timeline-dot{background:linear-gradient(135deg,var(--pp-purple-600),var(--pp-violet));box-shadow:0 0 0 5px #f0e6fa}.new-key-panel{border-color:#e5ac40;background:linear-gradient(135deg,#fff9de,#fff1c4);box-shadow:0 12px 28px #9a67001a}.success-box{border-color:#9fdbbd;background:linear-gradient(135deg,#edf9f1,#dcf7e9)}.error-box{border-color:#f0a6aa;background:linear-gradient(135deg,#fff0f0,#ffe4e5)}.login-page{background:radial-gradient(circle at 15% 15%,rgba(195,132,255,.38),transparent 26rem),radial-gradient(circle at 88% 84%,rgba(51,178,210,.24),transparent 28rem),linear-gradient(145deg,#291044,#17102d)}.login-card{border:1px solid rgba(255,255,255,.28);box-shadow:0 28px 70px #0a031659}@media(prefers-reduced-motion:reduce){.stat-card,.integration-health-card,.sidebar nav button,.primary-small,.login-card button,.reconcile-button{transition:none}}