*{box-sizing:border-box}
:root{
  --ink:#152542;
  --muted:#60708d;
  --line:#dde5ef;
  --blue:#2749e6;
  --blue-soft:#eef2ff;
  --green:#0f961f;
  --green-soft:#eaf7ed;
}
html,body{margin:0;padding:0;background:#fff}
body{font-family:"Inter",Arial,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
.demo-label{position:fixed;right:14px;bottom:14px;z-index:50;background:#111827;color:#fff;font-size:10px;font-weight:700;letter-spacing:.05em;padding:8px 11px;border-radius:999px;box-shadow:0 7px 18px rgba(0,0,0,.16)}
.edit-controls{position:fixed;left:14px;bottom:14px;z-index:60;display:flex;gap:7px;background:#fff;border:1px solid #dfe6ef;border-radius:12px;padding:7px;box-shadow:0 7px 20px rgba(20,40,75,.12)}
.edit-controls button{border:1px solid #d8e0eb;background:#fff;color:#18345d;border-radius:8px;padding:7px 10px;font:600 11px/1 Inter,Arial,sans-serif;cursor:pointer}
.edit-controls button.active{background:#2749e6;color:#fff;border-color:#2749e6}

.page{max-width:1180px;margin:0 auto;padding:28px 32px 42px}
.summary-card{background:linear-gradient(135deg,#f8fbff 0%,#ffffff 100%);border:1px solid #e5ebf3;border-radius:28px;box-shadow:0 6px 18px rgba(20,40,75,.07);overflow:hidden}
.summary-main{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:36px 38px 32px}
.company-block{display:flex;align-items:center;gap:26px;min-width:0}
.avatar-wrap{position:relative;flex:0 0 auto}
.avatar{width:82px;height:82px;border-radius:50%;background:#df0d3d;color:white;display:grid;place-items:center;font-size:36px;font-weight:500}
.shield{position:absolute;right:-5px;top:-7px;width:30px;height:30px;border-radius:9px;background:#0f961f;color:white;border:4px solid #fff;display:grid;place-items:center;font-size:15px;font-weight:700}
.company-copy h1{margin:0 0 10px;font-size:26px;line-height:1.15;font-weight:700;letter-spacing:-.02em}
.company-copy p{margin:0;font-size:20px;line-height:1.55;color:#344a72;overflow-wrap:anywhere}
.amount-block{text-align:left;flex:0 0 auto}
.amount-label{display:block;font-size:15px;color:#50627f;margin-bottom:14px}
.amount-line{display:flex;align-items:baseline;gap:10px}
.amount-line strong{font-size:42px;line-height:1;font-weight:600;letter-spacing:-.035em}
.amount-line span{font-size:18px;font-weight:500}
.summary-meta{border-top:1px solid #d9e1eb;display:grid;grid-template-columns:auto 1px auto 1fr auto;align-items:center;gap:34px;padding:26px 40px}
.meta-item{display:flex;align-items:center;gap:14px;font-size:20px;font-weight:500}
.icon{font-size:28px;color:var(--green)}.globe{color:#29416f}.caret{font-size:18px;margin-left:4px}
.divider{width:1px;height:40px;background:#d9e1eb}
.status-pill{display:flex;align-items:center;gap:10px;background:var(--green-soft);color:#08751d;border-radius:999px;padding:13px 22px;font-size:19px;font-weight:600}
.status-check{width:30px;height:30px;border:2px solid var(--green);border-radius:50%;display:grid;place-items:center;font-size:15px}

.timeline-card{margin-top:32px;background:#fff}
.timeline-title{display:flex;align-items:center;gap:18px;padding:0 6px 16px}
.trend-icon{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);font-size:30px;font-weight:700}
.timeline-title h2{margin:0;font-size:27px;font-weight:700;letter-spacing:-.02em}
.timeline-rule{height:1px;background:#d9e1eb;margin-bottom:24px}
.day-pill{display:inline-block;background:#f0f3ff;color:#173bcb;border-radius:10px;padding:10px 18px;font-size:19px;font-weight:700;margin:0 0 12px 0}
.timeline-row{position:relative;display:grid;grid-template-columns:120px 52px minmax(0,1fr);gap:14px;align-items:start;min-height:66px;padding:8px 0}
.timeline-row time{font-size:18px;font-weight:500;color:#273956;padding-top:5px}
.track{position:relative;min-height:48px}
.track:after{content:"";position:absolute;left:13px;top:26px;bottom:-39px;width:2px;background:#dce5ee}
.last-standard .track:after{display:none}
.check{position:relative;z-index:2;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:white;font-size:14px;font-weight:700}
.message{font-size:20px;line-height:1.42;font-weight:500;padding-top:2px;min-width:0}

/* Grouped transaction details */
.transfer-details{margin-top:10px;border:1px solid #dce9df;background:linear-gradient(180deg,#f8fcf9,#ffffff);border-radius:16px;overflow:hidden}
.detail-row{display:flex;align-items:center;gap:18px;padding:17px 20px;background:#f2faf4}
.detail-icon{width:46px;height:46px;flex:0 0 auto;border-radius:50%;background:#fff;border:1px solid #dbe6df;display:grid;place-items:center;color:var(--green);font-size:22px}
.detail-copy{display:flex;flex-direction:column;gap:4px}
.detail-label{color:#0f7f24;font-size:15px}
.detail-copy strong{font-size:18px}

.party-row{display:grid;grid-template-columns:120px 52px minmax(0,1fr) 48px;gap:14px;align-items:start;padding:20px}
.party-label{font-size:18px;font-weight:600;color:#223653;padding-top:4px}
.party-status{padding-top:1px}
.party-content{display:flex;flex-direction:column;gap:7px;min-width:0}
.party-content span{font-size:19px;font-weight:500;line-height:1.4}
.party-content strong{font-size:23px;line-height:1.25;overflow-wrap:anywhere}
.beneficiary-label{color:#61718a;font-size:16px!important}
.beneficiary-row{grid-template-columns:120px 52px minmax(0,1fr)}
.party-separator{height:1px;background:#e4e9f0;margin:0 20px}
.mail{width:44px;height:44px;border:1px solid #dce3ec;border-radius:50%;display:grid;place-items:center;color:#28406f;font-size:20px;background:#fff}

/* Editing behavior only */
.editable[contenteditable="true"]{outline:1px dashed rgba(39,73,230,.55);outline-offset:3px;border-radius:4px;cursor:text}
.editable[contenteditable="true"]:focus{outline:2px solid #2749e6;background:rgba(238,242,255,.45)}

@media(max-width:900px){
  .page{padding:20px}.summary-main{padding:28px}
  .company-copy h1{font-size:22px}.company-copy p{font-size:16px}.amount-line strong{font-size:34px}
  .summary-meta{padding:22px 28px;gap:20px}.meta-item{font-size:16px}.status-pill{font-size:16px}
  .message{font-size:17px}.party-content span{font-size:17px}.party-content strong{font-size:20px}
}
@media(max-width:700px){
  .summary-main{display:block}.amount-block{margin-top:28px}
  .summary-meta{grid-template-columns:1fr;gap:14px}.divider,.spacer{display:none}.status-pill{width:max-content}
  .timeline-row{grid-template-columns:82px 34px minmax(0,1fr);gap:9px}.timeline-row time{font-size:14px}.message{font-size:15px}
  .timeline-title h2{font-size:22px}.trend-icon{width:46px;height:46px;font-size:24px}.day-pill{font-size:15px}
  .party-row{grid-template-columns:70px 34px minmax(0,1fr);gap:9px;padding:16px 14px}
  .party-row .mail{display:none}.party-label{font-size:15px}.party-content span{font-size:15px}.party-content strong{font-size:18px}
  .beneficiary-row{grid-template-columns:70px 34px minmax(0,1fr)}
}
@media(max-width:480px){
  .page{padding:12px}.summary-card{border-radius:20px}.summary-main{padding:20px}.company-block{gap:14px}
  .avatar{width:58px;height:58px;font-size:25px}.shield{width:24px;height:24px;font-size:12px}
  .company-copy h1{font-size:17px}.company-copy p{font-size:13px}
  .amount-label{font-size:13px}.amount-line strong{font-size:29px}.amount-line span{font-size:14px}
  .summary-meta{padding:18px 20px}.timeline-card{margin-top:24px}
  .timeline-row{grid-template-columns:70px 30px minmax(0,1fr)}.check{width:24px;height:24px;font-size:12px}.track:after{left:11px;top:22px}
  .detail-row{padding:14px}.detail-icon{width:40px;height:40px;font-size:18px}.detail-copy strong{font-size:16px}
  .party-row,.beneficiary-row{grid-template-columns:55px 28px minmax(0,1fr)}
  .party-content strong{font-size:16px}.party-content span{font-size:14px}
  .edit-controls{left:8px;bottom:8px}.edit-controls button{padding:7px 8px;font-size:10px}
}