/* V28: composition and hierarchy refinement. Existing data and controls are shared. */
html{background:#e7e9ea}body{font-weight:400;color:#26312e}.sample-app{max-width:500px;box-shadow:0 8px 45px #25332e12;border:1px solid #dce1dd70}.app-header{min-height:76px;padding:18px 22px;gap:12px}.brand b{font-size:17px;font-weight:800;letter-spacing:.3px}.brand small{font-size:7px;letter-spacing:1.15px;margin-top:2px;opacity:.8}.brand>img{width:34px;height:34px}.back{font-size:27px;color:inherit;opacity:.55;width:15px}.music-toggle{border:1px solid #93a09925;border-radius:50%;width:30px;height:30px;padding:6px}.music-toggle svg{width:16px;height:16px}.money-part b,.row-money b{font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.9px}.money-part b{font-size:44px}.money-part small{font-size:11px;letter-spacing:.5px}.summary-title{font-size:12px;font-weight:600;letter-spacing:.2px}.summary-note{font-size:9px;opacity:.65;font-weight:400}.summary-foot{font-size:9px;gap:8px;line-height:1.8;padding-top:12px;opacity:.7}.summary-foot>span{min-width:0;overflow-wrap:anywhere}.section-heading{margin-bottom:13px;align-items:center}.section-heading h2{font-size:21px;font-weight:800;letter-spacing:.3px;line-height:1.6}.mode-link{font-size:9px;letter-spacing:.2px;line-height:1.5;border:0;padding:6px 8px;background:#f2f4f3;color:#6d7d74;border-radius:6px;font-weight:500}.view-tabs{border-bottom:1px solid var(--line);gap:22px;padding-bottom:0;margin-bottom:14px}.view-tabs button{position:relative;background:none!important;border:0!important;border-radius:0;padding:9px 0 12px;font-size:12px;font-weight:500;color:var(--muted)}.view-tabs button.active{font-weight:700;color:var(--accent)}.view-tabs button.active:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--accent);border-radius:2px}.view-tabs span{font-size:9px;font-weight:500;margin-left:5px;opacity:.7}.filter-tools{gap:8px;margin-bottom:14px}.search,.filter-tools select{height:36px;border:0;background:#eef2f0;border-radius:8px}.search{padding:0 11px}.search input{font-size:10px}.search svg{width:13px;height:13px}.filter-tools select{width:88px;font-size:10px;padding:0 7px}.records,.bank-list{scrollbar-width:none}.records::-webkit-scrollbar,.bank-list::-webkit-scrollbar{display:none}.bank-logo{width:34px;height:34px;padding:5px;border-radius:9px;background:#fff;box-shadow:0 0 0 1px #18322406}.record-bank strong{font-weight:600;font-size:12px;line-height:1.6}.record-bank time{font-size:9px;line-height:1.6;letter-spacing:0;margin-top:3px}.row-money b{font-size:25px;font-weight:750;line-height:1.2}.row-money small{font-size:8px;font-weight:500;opacity:.65;letter-spacing:.2px}.record-outcome>small{font-size:8px;margin-top:5px}.classic-row{grid-template-columns:34px minmax(0,1fr) minmax(80px,40%);gap:11px;padding:15px 0;min-height:75px}.date-heading{font-size:10px;letter-spacing:.4px;padding-top:17px;padding-bottom:3px}.ledger-footer{font-size:9px;padding-top:15px;opacity:.75}.clear{font-size:10px;font-weight:500}.bottom-nav{width:min(500px,100%);height:66px;padding-top:11px;border-top:1px solid var(--line);box-shadow:none;background:var(--panel)}.bottom-nav svg{width:20px;height:20px;stroke-width:1.6}.bottom-nav button,.bottom-nav a{font-size:9px;gap:5px;font-weight:400;letter-spacing:.3px}.bottom-nav button.active{font-weight:600}.brand-footer{font-weight:400;opacity:.55;padding-top:23px}.brand-footer b{font-weight:500}.brand-footer small{font-size:7px}.sample-source{max-width:500px;margin-top:18px;line-height:1.8;font-size:9px}.preview-bar{max-width:500px;padding:6px 13px;margin-top:10px;margin-bottom:8px}.preview-bar select{background:#fff;border:1px solid #d5dcd7;border-radius:6px;font-size:10px;padding:6px 8px;font-weight:500}.preview-bar>a{font-weight:500;font-size:10px}.preview-bar>span{opacity:.6;font-size:8px}.context-line{font-size:10px;color:var(--muted);line-height:1.8;margin:0;overflow-wrap:anywhere}.bank-list>button{padding:14px 2px;gap:12px}.bank-list b{font-size:12px;font-weight:600}.bank-list small{font-size:9px;margin-top:3px}.bank-list>button>strong{font-weight:400;font-size:10px}.art-dialog{border-radius:14px;padding:15px}.art-dialog h2{font-weight:700;font-size:17px}.dialog-close{border:1px solid #ddd;box-shadow:none}
/* 01 — a calm bill cover above clearly separated receipts. */
.sample-1{--accent:#e96e42;--ink:#28342f;--muted:#8a9690;--line:#e8ede9;background:#f4f6f3}.sample-1 .app-header{background:#fff}.sample-1 .brand>img{background:#f4f1e6;border-radius:10px;padding:4px}.bill-overview{padding:0 22px;background:#fff;border-radius:0 0 22px 22px;border-bottom:1px solid #e5ebe6}.sample-1 .summary{margin:0;border-radius:0;background:none;padding:20px 0 13px}.sample-1 .summary-title{color:#829087}.sample-1 .summary .money{margin:7px 0 10px;color:#263c30}.sample-1 .summary .money-part b{font-size:46px;letter-spacing:-1.2px}.sample-1 .summary .money-part small{color:#909b94;font-weight:500}.sample-1 .summary-foot{border-top:1px solid #edf0ec;opacity:1;color:#929f96}.sample-1 .context-line{border-top:1px solid #f1f3ef;padding:9px 0 14px;color:#a2aaa4;font-size:9px}.sample-1 .ledger{margin:22px 18px 0;padding:0}.sample-1 .ledger>.section-heading{justify-content:space-between;margin-bottom:10px}.sample-1 .ledger>.section-heading h2{display:block}.sample-1 .view-tabs{border-bottom:1px solid #e4eae5;gap:22px}.sample-1 .mode-link{background:#e9eee8;color:#75887b}.sample-1 .search,.sample-1 .filter-tools select{background:#e9eee8}.sample-1 .receipt{margin:0 0 10px;border-radius:13px;padding:14px;background:#fff;border:1px solid #e9eee7;box-shadow:0 2px 0 #243b2c03}.sample-1 .receipt-top{grid-template-columns:34px minmax(0,1fr) minmax(80px,40%);gap:10px}.sample-1 .receipt-top>strong{font-size:12px;font-weight:600;line-height:1.65}.sample-1 .receipt .row-money{color:#cd683f}.sample-1 .receipt-foot{font-size:9px;margin-top:12px;padding-top:10px;border-color:#edf0ea}.sample-1 .receipt-foot>span{color:#91a093}.sample-1 .records{height:500px}.sample-1 .receipt .bank-logo{box-shadow:none;background:#f7f8f4}
/* 02 — the campaign and account share one composition, not four large action cards. */
.sample-2{--accent:#eb7043;--muted:#a68e80;--line:#f0e7df;background:#fffdf9}.sample-2 .promo-wrap{border-radius:0;background:linear-gradient(123deg,#f69061 0%,#f5b27d 55%,#f6c492 100%);position:relative;overflow:hidden}.sample-2 .promo-wrap:before{content:"";position:absolute;width:310px;height:310px;border:1px solid #fff3;border-radius:50%;right:-120px;top:-80px;box-shadow:0 0 0 30px #fff1,0 0 0 60px #fff1}.sample-2 .app-header{color:#6f3928;padding-bottom:11px}.sample-2 .brand small{color:#8c5b40;opacity:.65}.sample-2 .music-toggle{border-color:#92583424}.sample-2 .promo-hero{padding:17px 24px 38px;grid-template-columns:minmax(0,1fr) 44%;gap:17px;min-height:246px;align-items:center}.sample-2 .promo-eyebrow{font-size:7px;letter-spacing:1.5px;color:#9b5a3d;font-weight:500;line-height:1.7}.sample-2 .promo-hero h1{font-size:27px;line-height:1.55;font-weight:800;color:#643321;text-shadow:none;margin:11px 0 10px;letter-spacing:.4px}.sample-2 .promo-hero p{font-size:10px;line-height:1.9;color:#a06445}.campaign-open{display:flex;align-items:center;gap:5px;color:#713b29;border:0;border-bottom:1px solid #a16a4580;padding:0 0 5px;margin-top:15px;background:none;font-size:9px;letter-spacing:.4px}.campaign-open svg{width:12px;height:12px}.sample-2 .hero-photo{border:5px solid #fff8;border-radius:64px 64px 12px 12px;transform:rotate(0);box-shadow:0 12px 25px #b9754a22;aspect-ratio:3/4.1;align-self:center}.sample-2 .hero-photo img{object-position:50% 48%;border-radius:48px 48px 4px 4px}.sample-2 .promo-content{margin-top:-19px;border-radius:20px 20px 0 0;padding:18px 20px 0;background:#fffdf9}.sample-2 .summary{position:relative;background:#fff;margin:0 0 18px;padding:16px 18px 13px;border-radius:12px;color:#7a5140;border:1px solid #f1e4d6;box-shadow:0 7px 20px #ac846509}.sample-2 .summary .money-part b{font-size:39px;color:#c66f42}.sample-2 .summary-title{font-size:11px;font-weight:500}.sample-2 .summary-foot{font-size:8px;color:#b8a393;border-top:1px solid #f3ece3}.shortcut-heading{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#aa8c77;margin-bottom:12px}.shortcut-heading>button{border:0;background:none;color:#af9b8a;font-size:9px;padding:0}.shortcut-heading svg{width:10px;height:10px}.sample-2 .bank-shortcuts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:23px;padding-bottom:18px;border-bottom:1px solid #f0e7df}.sample-2 .bank-shortcuts button{border:0;border-radius:0;padding:0;background:none;display:flex;flex-direction:column;gap:7px;color:#8f7b6d;text-align:center;min-width:0}.sample-2 .bank-shortcuts .bank-logo{width:37px;height:37px;background:#fff;border:1px solid #f0e5d8;box-shadow:0 3px 6px #b38f6907;border-radius:12px;padding:7px}.sample-2 .bank-shortcuts button>span:nth-child(2){width:100%;min-width:0}.sample-2 .bank-shortcuts b{font-size:8px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5}.sample-2 .bank-shortcuts small{display:none}.sample-2 .section-heading h2{color:#614334;font-size:20px}.sample-2 .mode-link{background:#f5ede2;color:#aa8a73}.sample-2 .search,.sample-2 .filter-tools select{background:#f4f0e9}.sample-2 .row-money{color:#b96841}.sample-2 .records{height:470px}.sample-2 .classic-row{border-color:#f1eae1}.sample-2 .bottom-nav{background:#fffdf9}
/* 03 — one gold account card, two compact routes and immediate history. */
.sample-3{--accent:#d6b877;--ink:#e2eae5;--muted:#859d99;--line:#ffffff0e;--panel:#24443f;background:linear-gradient(140deg,#244b44,#1d3938)}.sample-3 .app-header{background:none;color:#d9e9e0}.sample-3 .brand small{color:#8ca99c}.sample-3 .music-toggle{border-color:#a5bfab33}.sample-3 .wallet-stage{padding:3px 20px 0}.sample-3 .summary{border:1px solid #c6ad7466;background:linear-gradient(120deg,#302d24,#22231e);box-shadow:0 10px 25px #071e1a22;border-radius:16px;padding:23px 22px 18px}.sample-3 .summary-title{color:#b4a58b;font-size:11px;font-weight:500}.sample-3 .summary-note{color:#b2a690;font-size:8px}.sample-3 .summary .money{margin:12px 0 18px}.sample-3 .summary .money-part b{font-size:46px;font-weight:750;color:#f3e8d0}.sample-3 .summary .money-part small{color:#b4a07c;font-weight:500}.sample-3 .summary-foot{border-color:#e3c3811c;color:#9b9483;opacity:1;font-size:8px}.wallet-quick{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:15px 0 10px}.wallet-quick>button{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;text-align:left;position:relative;border:1px solid #a7b5a91f;background:#ffffff05;border-radius:11px;padding:12px 13px;color:#9fb8aa;min-width:0}.wallet-quick>button>span{grid-column:1/-1;display:flex;align-items:center;gap:6px;font-size:9px;line-height:1.8}.wallet-quick>button>span svg{width:13px;height:13px;color:#a0b9a6}.wallet-quick strong{font-size:22px;font-weight:650;letter-spacing:.2px;color:#e1ddbf;margin-top:6px}.wallet-quick strong small{font-size:9px;color:#9baf9f;font-weight:400;margin-left:5px}.wallet-quick>button>svg{width:14px;height:14px;color:#6c8c7d}.sample-3 .context-line{font-size:9px;color:#6f9383;padding:3px 1px 18px}.sample-3 .ledger{background:#1a302d70;border:0;border-radius:16px;padding:19px 17px 1px;margin:0 -4px}.sample-3 .section-heading h2{font-size:20px;color:#d9e4d7}.sample-3 .mode-link{background:#ffffff08;color:#a9bba9}.sample-3 .view-tabs{border-color:#c2d3b719}.sample-3 .search,.sample-3 .filter-tools select{background:#122b2780;color:#b0c4b7}.sample-3 .view-tabs button.active{color:#d4bf84}.sample-3 .bank-logo{border-radius:8px;padding:6px;background:#f5f3e9}.sample-3 .row-money{color:#e0c996}.sample-3 .row-money b{font-size:24px}.sample-3 .record-bank strong{color:#d2dfd5;font-weight:500}.sample-3 .record-bank time{color:#638376}.sample-3 .record-outcome>small{color:#718d7e}.sample-3 .record-outcome>small svg{color:#81977e}.sample-3 .records{height:480px}.sample-3 .bottom-nav{background:#1c3431}.sample-3 .date-heading{color:#67897b}
/* 04 — a softer coral balance, white amount cards and more deliberate detail rows. */
.sample-4{--accent:#d5545b;--line:#ebdde0;--muted:#a08e94;background:linear-gradient(#f7dadd,#f6e9e8 45%,#f2f0ee 90%)}.sample-4 .app-header{background:none}.sample-4 .brand small{color:#ad8188}.coral-overview{padding:0 19px 18px}.sample-4 .summary{background:linear-gradient(115deg,#b94555,#d2636c);color:#fff1ee;border:1px solid #ffffff50;box-shadow:0 8px 17px #9c475116;border-radius:15px;margin:8px 0 0;padding:17px 19px 14px}.sample-4 .summary-title{font-size:11px;font-weight:500}.sample-4 .summary .money{margin-top:8px;margin-bottom:9px}.sample-4 .summary .money-part b{font-size:40px;font-weight:750}.sample-4 .summary .money-part small{color:#f1c6c8;font-weight:400}.sample-4 .summary-foot{border-color:#ffebe22b;font-size:8px;color:#ebc6c8;opacity:1;padding-top:9px}.sample-4 .context-line{font-size:9px;color:#b39399;margin:11px 2px 0}.sample-4 .ledger{margin:0 19px;padding:0}.sample-4 .ledger>.section-heading{justify-content:space-between;margin-bottom:9px}.sample-4 .ledger>.section-heading h2{display:block;color:#724951;font-size:21px}.sample-4 .mode-link{background:#f5dadd;color:#a77d83}.sample-4 .view-tabs{gap:20px;border-color:#dfc9cc}.sample-4 .search,.sample-4 .filter-tools select{background:#ffffff85;color:#947d83}.sample-4 .amount-card{border:1px solid #e8e1df;background:#fffefb;box-shadow:0 3px 10px #976b6b04;border-radius:16px;padding:16px 17px;margin-bottom:11px}.sample-4 .amount-card:first-child{border-color:#d99ba2}.sample-4 .amount-card summary{padding-right:28px}.sample-4 .amount-card .row-money{gap:6px}.sample-4 .amount-card .row-money b{color:#3b3030;font-size:32px;font-weight:750;line-height:1.4;letter-spacing:-.8px}.sample-4 .amount-card .row-money small{font-size:11px;color:#b69b9c;font-weight:500;opacity:1}.sample-4 .card-arrow{width:25px;height:25px;top:8px;right:0;background:#f1ebe6;color:#c5afa8}.sample-4 .amount-card:first-child .card-arrow{background:#efced0;color:#b95b65}.sample-4 .card-arrow svg{width:14px;height:14px}.sample-4 .card-meta{gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid #f5f0eb}.sample-4 .card-meta .bank-logo{width:24px;height:24px;padding:3px;box-shadow:none;background:#f6f7f2}.sample-4 .card-meta b{font-size:11px;font-weight:500;color:#9a8c86}.sample-4 .card-meta small{font-size:8px;color:#b5aaa4;letter-spacing:.2px}.sample-4 .record-detail{color:#af9b97;font-size:9px}.sample-4 .amount-card[open]{border-color:#d99ba2}.sample-4 .records{height:510px}.sample-4 .bottom-nav{background:#fffaf5}
/* 05 — a restrained green catalogue with compact, readable two-column receipts. */
.sample-5{--accent:#367c64;--ink:#3b5147;--line:#e6ece6;--muted:#93a398;background:#f4f6f2}.sample-5 .app-header{background:#f4f6f2}.catalog-top{padding-top:1px}.sample-5 .summary{margin:0 20px 19px;padding:18px 20px 13px;border-radius:14px;background:#477f69;color:#e9f3e8;border:1px solid #699781;box-shadow:none}.sample-5 .summary-title{font-size:11px;font-weight:500}.sample-5 .summary .money{margin:9px 0 12px}.sample-5 .summary .money-part b{font-size:39px;font-weight:750;letter-spacing:-.8px}.sample-5 .summary .money-part small{color:#a8c5af;font-weight:400}.sample-5 .summary-foot{font-size:8px;color:#b6d0b9;opacity:1;border-color:#d6e7cb26;padding-top:9px}.sample-5 .product-section{padding:0 20px 19px}.sample-5 .product-section .section-heading{margin-bottom:12px}.sample-5 .product-section .section-heading h2{font-size:18px;font-weight:700}.sample-5 .product-rail{gap:10px;padding-bottom:5px}.sample-5 .product-card{padding:0;border:0;border-radius:11px;background:none;box-shadow:none;flex-basis:37%;color:#47614e}.sample-5 .product-card>img{height:116px;aspect-ratio:auto;border-radius:10px;object-fit:cover}.sample-5 .product-card strong{font-size:10px;font-weight:600;margin:8px 0 3px;letter-spacing:.3px}.sample-5 .product-card>small{font-size:7px;line-height:1.7;color:#a0aea2;max-height:2em;overflow:hidden}.sample-5 .catalog-body{padding:0 20px}.sample-5 .section-heading h2{font-size:20px}.sample-5 .view-tabs{gap:20px}.sample-5 .view-tabs button{padding-left:0;padding-right:0}.sample-5 .mode-link{font-size:8px;background:#e7eee3;color:#8a9d85}.sample-5 .search,.sample-5 .filter-tools select{background:#e9eee6}.sample-5 .records{gap:11px;height:510px;padding:1px 0 5px}.sample-5 .grid-record{border:1px solid #e0e7dc;border-radius:13px;padding:13px 12px;background:#fffef9;box-shadow:0 2px 1px #3b5a3a03}.sample-5 .grid-record>time{font-size:8px;color:#a2aea0;gap:4px;line-height:1.8}.sample-5 .grid-record>time svg{width:12px;height:12px;color:#7eaa8b}.sample-5 .grid-record>time span{font-size:8px}.sample-5 .grid-record .row-money{margin:14px 0;color:#3d8165;gap:4px}.sample-5 .grid-record .row-money b{font-size:27px;letter-spacing:-.6px;font-weight:750}.sample-5 .grid-record .row-money small{font-size:8px;color:#9eb49a}.sample-5 .grid-bank{border-color:#edf1e7;padding-top:10px;gap:6px}.sample-5 .grid-bank .bank-logo{width:24px;height:24px;padding:3px;background:#f5f7f0;box-shadow:none}.sample-5 .grid-bank strong{font-size:9px;font-weight:500;color:#8e9f89;line-height:1.7}.sample-5 .grid-status{font-size:8px;color:#abb6a4;margin-top:8px}.sample-5 .bottom-nav{background:#fdfef8}
/* 06 — the mascot supports the brand and leaves room for account history. */
.sample-6{--accent:#1c9a71;--muted:#99aaa2;--line:#e7eee9;background:#fff}.sample-6 .mascot-stage{background:linear-gradient(120deg,#108b64,#20ac7b);position:relative;overflow:hidden}.sample-6 .mascot-stage:before{content:"";position:absolute;width:260px;height:260px;border:1px solid #ffffff10;border-radius:50%;right:-95px;top:52px;box-shadow:0 0 0 23px #ffffff05,0 0 0 46px #ffffff03}.sample-6 .app-header{background:none;color:#e9f6ea;position:relative}.sample-6 .brand small{color:#9bd5b4;opacity:.8}.sample-6 .music-toggle{border-color:#ffffff25}.sample-6 .mascot-hero{min-height:255px;padding:15px 24px 31px;text-align:left;position:relative;isolation:isolate}.mascot-hero-copy{position:relative;z-index:1;width:66%;min-width:0}.sample-6 .mascot-title{display:block;border:0;padding:0;margin:0;color:#a5ddbc;font-size:11px;font-weight:500;letter-spacing:1px}.sample-6 .mascot-hero>.money,.sample-6 .mascot-hero-copy>.money{max-width:100%;margin:10px 0 10px}.sample-6 .mascot-hero .money-part{justify-content:flex-start;gap:5px;max-width:100%}.sample-6 .mascot-hero .money-part b{font-size:43px;font-weight:750;letter-spacing:-1.3px;line-height:1.4;color:#f1ffeb}.sample-6 .mascot-hero .money-part small{font-size:9px;color:#9bd5aa;font-weight:500}.mascot-hero-copy>p{font-size:9px;line-height:1.9;color:#9ed9b2;margin:0;max-width:95%;overflow-wrap:anywhere}.sample-6 .mascot{position:absolute;width:40%;height:190px;max-width:210px;right:2px;bottom:56px;margin:0;filter:drop-shadow(0 9px 6px #0b6c3933);z-index:0;object-position:50% 100%}.sample-6 .mascot-stats{position:relative;z-index:2;justify-content:flex-start;gap:32px;margin:30px 0 0;border-top:1px solid #c4ebc629;padding-top:15px;font-size:8px;color:#97d2ac}.sample-6 .mascot-stats b{font-size:21px;font-weight:650;color:#ddf2dc;margin-right:2px}.sample-6 .mascot-ledger{border-radius:20px 20px 0 0;margin-top:-17px;padding:22px 22px 0;background:#fff}.sample-6 .section-heading h2{font-size:21px;color:#456754}.sample-6 .mode-link{background:#edf5ec;color:#7f9e82;font-size:8px}.sample-6 .view-tabs{gap:23px}.sample-6 .search,.sample-6 .filter-tools select{background:#f0f5ef}.sample-6 .row-money{color:#418868}.sample-6 .bank-logo{border:1px solid #edf1e8!important;border-radius:9px;box-shadow:none}.sample-6 .record-bank strong{color:#65816e;font-weight:500}.sample-6 .record-bank time{color:#b1c1b2}.sample-6 .record-outcome>small{color:#a5b6a7}.sample-6 .record-outcome>small svg{color:#a4bba2}.sample-6 .records{height:510px}.sample-6 .date-heading{color:#b6c5b6;font-size:9px}
/* 07 — a quieter dark boutique, without duplicate menu rows before its history. */
.sample-7{--accent:#d57c98;--ink:#e4dbe0;--line:#ffffff0a;--muted:#93808b;--panel:#272127;background:#211c22}.sample-7 .app-header{background:#211c22;color:#e7dce1}.sample-7 .brand small{color:#8f737f}.sample-7 .music-toggle{border-color:#bea4b11e}.dark-overview{padding:0 20px 0}.sample-7 .summary{background:linear-gradient(120deg,#935069,#b05d77);border:1px solid #c8889b60;border-radius:14px;box-shadow:0 10px 18px #0e060c1a;margin:5px 0 21px;padding:18px 20px 14px}.sample-7 .summary-title{font-size:11px;font-weight:500;color:#e4bacb}.sample-7 .summary-note{color:#e4bacb;opacity:.7}.sample-7 .summary .money{margin:9px 0 11px}.sample-7 .summary .money-part b{font-size:40px;font-weight:750;color:#fff1f4}.sample-7 .summary .money-part small{color:#d4a1b4;font-weight:400}.sample-7 .summary-foot{font-size:8px;color:#d9aabd;border-color:#f9dce61e;opacity:1;padding-top:9px}.sample-7 .product-section{padding:0 20px 21px}.sample-7 .product-section .section-heading h2{font-size:19px;font-weight:650;color:#d0bdc8}.sample-7 .product-section .section-heading>button{color:#77616e;font-size:9px}.sample-7 .product-card{flex-basis:35%;border-radius:10px}.sample-7 .product-card>img{height:156px;aspect-ratio:auto;object-fit:cover;object-position:50% 45%;border-radius:9px;filter:saturate(.85)}.sample-7 .product-card strong{font-size:10px;font-weight:500;letter-spacing:.3px;color:#b8a2b0;margin-top:9px}.sample-7 .product-card>small{font-size:7px;line-height:1.6;max-height:1.7em;overflow:hidden;color:#69515f}.sample-7 .product-rail{gap:11px;padding-bottom:2px}.sample-7 .ledger{margin:0 20px;border:0;padding-top:0}.sample-7 .section-heading h2{color:#c6b0bf;font-size:20px;font-weight:650}.sample-7 .mode-link{background:#352833;color:#a38296;font-size:8px}.sample-7 .view-tabs{border-color:#ffffff0b;gap:22px}.sample-7 .view-tabs button.active{color:#d69eb5}.sample-7 .search,.sample-7 .filter-tools select{background:#2a222a;color:#a28a9a}.sample-7 .search input::placeholder{color:#6e5766}.sample-7 .row-money{color:#e4c3d4}.sample-7 .record-bank strong{color:#b59bab;font-weight:500}.sample-7 .record-bank time{color:#6a5261}.sample-7 .record-outcome>small{color:#765b6d}.sample-7 .record-outcome>small svg{color:#957087}.sample-7 .bank-logo{border-radius:8px;background:#f1eee9;padding:6px}.sample-7 .records{height:490px}.sample-7 .bottom-nav{background:#29212b;border-top-color:#ffffff08}.sample-7 .date-heading{color:#725768}
/* The gallery shows the actual page compositions rather than decorative swatches. */
.gallery-body{background:#eeeFEB;color:#38463e}.sample-gallery{max-width:1120px;padding:34px 30px 45px}.gallery-home{font-size:11px;color:#909d91;font-weight:400}.gallery-heading{padding:37px 0 28px;max-width:650px}.gallery-heading>span{font-size:8px;letter-spacing:2px;color:#9da799}.gallery-heading h1{font-size:36px;line-height:1.6;font-weight:750;letter-spacing:.3px;margin:12px 0}.gallery-heading p{font-size:11px;line-height:2;color:#9ca695;max-width:590px}.sample-grid{gap:22px}.sample-choice{border-radius:14px;background:#fafbf6;border:1px solid #e1e6db;box-shadow:none}.sample-swatch{height:252px;padding:0;background:#e7eae4!important;position:relative;border-bottom:1px solid #e4e8de}.sample-swatch iframe{position:absolute;top:15px;left:50%;margin-left:-220px;width:440px;height:700px;border:0;border-radius:13px;transform:scale(.64);transform-origin:top center;pointer-events:none;background:transparent;box-shadow:0 8px 24px #20342512}.preview-number{position:absolute;left:13px;top:13px;border:1px solid #e9eadea0;background:#fcfef8e8;border-radius:20px;padding:4px 9px;font-size:9px;color:#8c9c85;font-weight:500;z-index:2;line-height:1.4}.sample-choice-copy{padding:17px 18px 19px}.sample-choice-copy h2{font-weight:650;font-size:15px;letter-spacing:.3px;margin-bottom:6px}.sample-choice-copy p{font-size:9px;color:#a2ac9c;margin-bottom:15px}.sample-choice-copy a:first-child{border-radius:6px;padding:7px 11px;background:#526d56;font-weight:500;font-size:9px}.sample-choice-copy a:last-child{font-size:9px;color:#8d9f86}.sample-gallery>footer{font-size:9px;color:#a8b2a0;line-height:2.1}.is-embedded{padding:0!important;background:transparent}.is-embedded .preview-bar,.is-embedded .sample-source,.is-embedded .bottom-nav,.is-embedded .brand-footer{display:none!important}.is-embedded .sample-app{margin:0;width:100%;border:0;border-radius:13px;box-shadow:none;min-height:850px}.is-embedded .art-dialog{display:none}
@media(max-width:800px){.sample-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery-heading h1{font-size:32px}}
@media(max-width:480px){.sample-app{border:0;box-shadow:none}.app-header{padding-left:20px;padding-right:20px}.sample-gallery{padding:23px 19px}.sample-grid{grid-template-columns:1fr}.sample-swatch{height:280px}.sample-swatch iframe{top:14px;transform:scale(.72)}.gallery-heading{padding-top:25px}.gallery-heading h1{font-size:28px}.gallery-heading p{font-size:10px}}
@media(max-width:360px){.app-header{padding:15px 17px;gap:8px;min-height:70px}.brand b{font-size:15px}.brand small{font-size:6px;letter-spacing:.8px}.brand>img{width:29px;height:29px}.back{font-size:25px;width:13px}.music-toggle{width:28px;height:28px}.section-heading h2{font-size:19px}.view-tabs{gap:18px}.view-tabs button{font-size:11px}.search input{font-size:9px}.filter-tools select{width:77px;font-size:9px}.row-money b{font-size:22px}.row-money small{font-size:7px}.classic-row{grid-template-columns:29px minmax(0,1fr) minmax(73px,39%);gap:8px}.classic-row .bank-logo{width:29px;height:29px;padding:4px}.record-bank strong{font-size:10px}.record-bank time{font-size:8px}.record-outcome>small{font-size:8px}.bill-overview{padding-left:18px;padding-right:18px}.sample-1 .summary{padding-top:18px}.sample-1 .summary .money-part b{font-size:39px}.sample-1 .summary-foot{font-size:8px}.sample-1 .ledger{margin-left:14px;margin-right:14px;margin-top:19px}.sample-1 .receipt{padding:12px}.sample-1 .receipt-top{grid-template-columns:28px minmax(0,1fr) minmax(73px,40%);gap:7px}.sample-1 .receipt .bank-logo{width:28px;height:28px;padding:4px}.sample-1 .receipt-top>strong{font-size:10px}.sample-1 .receipt-foot{font-size:8px}.sample-2 .promo-hero{padding:13px 20px 35px;gap:12px;min-height:218px}.sample-2 .promo-hero h1{font-size:23px;line-height:1.6}.sample-2 .promo-hero p{font-size:8px}.campaign-open{font-size:8px;margin-top:12px}.sample-2 .promo-eyebrow{font-size:6px;letter-spacing:1px}.sample-2 .hero-photo{border-width:4px}.sample-2 .promo-content{padding-left:16px;padding-right:16px}.sample-2 .summary{padding:15px 17px 12px}.sample-2 .summary .money-part b{font-size:35px}.sample-2 .bank-shortcuts{gap:7px;margin-bottom:19px}.sample-2 .bank-shortcuts .bank-logo{width:32px;height:32px;border-radius:10px;padding:6px}.sample-2 .bank-shortcuts b{font-size:7px}.sample-2 .section-heading h2{font-size:18px}.sample-3 .wallet-stage{padding-left:17px;padding-right:17px}.sample-3 .summary{padding:21px 19px 16px}.sample-3 .summary .money-part b{font-size:39px}.sample-3 .summary-foot{font-size:7px}.wallet-quick>button{padding:11px 12px}.wallet-quick strong{font-size:20px}.wallet-quick>button>span{font-size:8px}.sample-3 .ledger{padding-left:13px;padding-right:13px}.sample-3 .row-money b{font-size:21px}.coral-overview{padding-left:16px;padding-right:16px}.sample-4 .summary{padding:16px 17px 12px}.sample-4 .summary .money-part b{font-size:35px}.sample-4 .summary-foot{font-size:7px}.sample-4 .ledger{margin-left:16px;margin-right:16px}.sample-4 .ledger>.section-heading h2{font-size:19px}.sample-4 .amount-card{padding:15px 16px}.sample-4 .amount-card .row-money b{font-size:29px}.sample-4 .amount-card .row-money small{font-size:10px}.sample-4 .card-meta b{font-size:9px}.sample-4 .card-meta small{font-size:7px}.sample-5 .summary{margin-left:16px;margin-right:16px;padding:16px 18px 12px}.sample-5 .summary .money-part b{font-size:35px}.sample-5 .summary-foot{font-size:7px}.sample-5 .product-section{padding-left:16px;padding-right:16px;padding-bottom:18px}.sample-5 .product-card{flex-basis:39%}.sample-5 .product-card>img{height:98px}.sample-5 .product-card strong{font-size:9px}.sample-5 .product-card>small{font-size:6px}.sample-5 .catalog-body{padding-left:16px;padding-right:16px}.sample-5 .records{gap:9px}.sample-5 .grid-record{padding:12px 10px}.sample-5 .grid-record .row-money b{font-size:23px}.sample-5 .grid-record>time{font-size:7px}.sample-5 .grid-bank strong{font-size:8px}.sample-5 .grid-bank .bank-logo{width:21px;height:21px}.sample-5 .view-tabs{gap:18px}.sample-6 .mascot-hero{min-height:236px;padding:13px 20px 31px}.mascot-hero-copy{width:68%}.sample-6 .mascot-hero .money-part b{font-size:36px;letter-spacing:-1px}.sample-6 .mascot-hero .money-part small{font-size:8px}.sample-6 .mascot-title{font-size:10px}.mascot-hero-copy>p{font-size:8px;line-height:1.9}.sample-6 .mascot{height:164px;width:39%;bottom:57px;right:-1px}.sample-6 .mascot-stats{gap:25px;margin-top:27px;font-size:7px}.sample-6 .mascot-stats b{font-size:19px}.sample-6 .mascot-ledger{padding-left:18px;padding-right:18px}.sample-6 .section-heading h2{font-size:19px}.sample-7 .dark-overview{padding-left:16px;padding-right:16px}.sample-7 .summary{padding:16px 18px 12px;margin-bottom:20px}.sample-7 .summary .money-part b{font-size:35px}.sample-7 .summary-foot{font-size:7px}.sample-7 .product-section{padding-left:16px;padding-right:16px;padding-bottom:19px}.sample-7 .product-card{flex-basis:37%}.sample-7 .product-card>img{height:135px}.sample-7 .product-card strong{font-size:9px}.sample-7 .product-card>small{font-size:6px}.sample-7 .ledger{margin-left:16px;margin-right:16px}.sample-7 .section-heading h2{font-size:19px}.sample-7 .row-money b{font-size:21px}.sample-7 .view-tabs{gap:18px}.preview-bar select{max-width:150px}.sample-swatch iframe{transform:scale(.65)}}

/* Reading contrast and a shorter campaign keep the first receipt in reach. */
.sample-app .mode-link{font-size:10px}.sample-app .summary-foot{opacity:1}.sample-1 .summary-foot{color:#87978b}.sample-1 .receipt-foot{color:#929e93}.sample-1 .receipt-foot>span{color:#849686}.sample-2 .summary-foot{color:#a28d7c}.sample-2 .promo-hero{min-height:210px;padding-top:12px;padding-bottom:30px}.sample-2 .hero-photo{height:170px;aspect-ratio:auto;width:100%}.sample-2 .summary{padding-top:13px;padding-bottom:11px;margin-bottom:15px}.sample-2 .summary .money{margin-top:5px;margin-bottom:8px}.sample-2 .summary .money-part b{font-size:36px}.sample-2 .summary-foot{padding-top:8px}.sample-2 .bank-shortcuts{margin-bottom:18px;padding-bottom:12px}.sample-2 .bank-shortcuts .bank-logo{width:33px;height:33px;padding:5px}.sample-2 .shortcut-heading{margin-bottom:10px}.sample-3 .record-bank time{color:#85a18f}.sample-3 .date-heading{color:#7f9f8c}.sample-3 .record-outcome>small{color:#91a490}.sample-3 .summary-foot{color:#a69e8a}.sample-3 .wallet-quick>button>span{color:#adc0ae}.sample-4 .card-meta b{color:#948078}.sample-4 .card-meta small{color:#a1938b}.sample-4 .summary-foot{color:#ebc5c5}.sample-5 .grid-record>time{font-size:9px;color:#8a9a86}.sample-5 .grid-bank strong{font-size:10px;color:#73876d}.sample-5 .grid-status{color:#8c9d83}.sample-5 .grid-record .row-money small{color:#7e9e78}.sample-5 .summary-foot{color:#c4d8c3}.sample-6 .record-bank time{color:#8fa491}.sample-6 .record-bank strong{color:#54745e}.sample-6 .record-outcome>small{color:#91a38e}.sample-6 .date-heading{color:#9bad95}.sample-6 .mascot-hero-copy>p{color:#b1dfbe}.sample-7 .record-bank time{color:#94778a}.sample-7 .record-outcome>small{color:#a08095}.sample-7 .date-heading{color:#96768e}.sample-7 .product-card>small{color:#8c7182}.sample-7 .summary-foot{color:#dfb7c7}.sample-7 .product-section .section-heading>button{color:#a58a9a}.sample-7 .search input::placeholder{color:#a08b98}.sample-7 .view-tabs button{color:#a990a1}
@media(max-width:360px){.sample-app .mode-link{font-size:9px}.sample-2 .promo-hero{min-height:192px;padding-bottom:29px}.sample-2 .hero-photo{height:147px}.sample-2 .summary .money-part b{font-size:33px}.sample-5 .grid-record>time{font-size:8px}.sample-5 .grid-bank strong{font-size:9px}}

.sample-2 .promo-hero{min-height:184px;padding-bottom:25px}.sample-2 .hero-photo{height:147px}.sample-2 .hero-photo:after{content:"查看海报 ↗";position:absolute;bottom:8px;left:9px;right:9px;background:#fffdf4d9;color:#a37b60;border-radius:5px;padding:4px;font-size:8px;font-weight:400}.sample-2 .promo-hero h1{font-size:25px;line-height:1.5}.sample-2 .bank-shortcuts{margin-bottom:15px}.sample-7 .product-card>img{height:143px}.sample-7 .summary{margin-bottom:18px}
@media(max-width:360px){.sample-2 .promo-hero{min-height:174px;padding-bottom:24px}.sample-2 .hero-photo{height:134px}.sample-2 .promo-hero h1{font-size:22px}.sample-7 .product-card>img{height:125px}}