:root{background:#b9f3ef;color:#153c50}body{background:radial-gradient(ellipse at 15% 20%,#7ce8d5bb,transparent 45%),radial-gradient(ellipse at 90% 5%,#2584ca99,transparent 55%),radial-gradient(ellipse at 90% 90%,#096aabad,transparent 65%),linear-gradient(140deg,#dcfff1,#84dedc 45%,#9bd0f2);min-height:100vh;background-attachment:fixed}header{background:#eafff3a8;border-color:#ffffff90;backdrop-filter:blur(14px)}header p,.intro p{color:#326679}.brand span{color:#047aa0}main{background:#ebffff38;max-width:1160px}.intro{background:#f2ffffa6;border:1px solid #ffffffc9;border-radius:18px;padding:24px}.status{background:#d3f7ff;color:#076a94;border:1px solid #8bd3e7}.filters button,.filters input{background:#f3ffffbd;border-color:#8ed2de;backdrop-filter:blur(8px)}.filters button.active{background:linear-gradient(100deg,#0aabc0,#177baf);border-color:#1599b4}.card{background:#effffff0;border:1px solid #b0dce4;box-shadow:0 8px 22px #08627916;border-radius:16px;transition:transform .15s,box-shadow .15s}.card:hover{transform:translateY(-3px);box-shadow:0 12px 28px #08627925}.tag{color:#528190}.price{color:#057eb0}.card button{background:#ddf7fc;border-color:#a8d7e2;color:#076a94}.notice{background:#f3ffffce;border-color:#a8dce3;color:#386370}.intro h1{color:#153c50}.card small,footer{color:#527381}dialog{background:#f4ffff;border-color:#94cfda;max-height:92vh;overflow:auto}dialog h2{color:#153c50}dialog p{color:#507182}dialog button{background:#078fb5}.sample-payment{border-color:#b7dce4}.payment-placeholder{border-color:#80bfce;background:#e9f9fc}.demo-flow{border-top:1px solid #b7dce4;margin-top:20px;padding-top:18px}.demo-flow ol{line-height:1.9;padding-left:24px;font-size:14px;color:#527381}.demo-flow li.done{color:#16875b}.demo-flow li.current{color:#078bb0;font-weight:700}.demo-flow button{margin:10px 8px 0 0}.demo-flow #flow-reset{background:#dcf2f7;color:#316377}#flow-output{padding:14px;border-radius:10px;background:#e1f2f6;color:#316377;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px}button:disabled{opacity:.5;cursor:default}button:focus-visible,input:focus-visible{outline:3px solid #075d8c;outline-offset:3px}@media(max-width:600px){.intro{padding:18px}.card{padding:16px}.price{font-size:24px}}

#product-content{white-space:pre-wrap;line-height:1.8;font-size:14px;color:#426a7a;margin:14px 0}#product-images{display:flex;gap:10px;overflow:auto;margin:12px 0}#product-images img{width:100px;height:100px;object-fit:contain;border-radius:10px;background:white}
/* Shop layout and order confirmation patterned after the supplied reference. */
:root{background:#f6f9ff}body{background:radial-gradient(ellipse at 28% 6%,#c5ddff,transparent 47%),linear-gradient(130deg,#f3f1ff,#dbf4ff 48%,#f5f8ff);background-attachment:fixed}body::before{content:'';position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(white 1px,transparent 2px),radial-gradient(white 1px,transparent 2px);background-size:97px 113px,151px 173px;background-position:20px 40px,74px 18px;opacity:.75;z-index:-1}header{background:#eff6ffb8}.brand span,.price{color:#245eff}main{max-width:1120px}.intro{background:#ffffff80}.grid{grid-template-columns:repeat(5,minmax(0,1fr))}.card{padding:12px;gap:9px;background:#ffffffef;border-radius:10px;border-color:#e2e7f5}.catalog-image{width:100%;aspect-ratio:1;object-fit:contain;background:white;border-radius:7px}.card h2{font-size:14px}.card .price{font-size:19px}.card .tag{font-size:11px}.card small{font-size:11px}dialog{max-width:520px;background:white;padding:26px 34px;border:0;border-radius:16px;box-shadow:0 20px 70px #13234040}dialog::backdrop{background:#18202b99}.modal-heading{text-align:center;font-size:14px;padding-bottom:22px}dialog h2{font-size:17px;line-height:1.6;border-bottom:1px solid #f0f2f7;padding-bottom:20px}#product-images{display:none}#product-content{max-height:245px;overflow:auto;color:#252c38;font-size:14px;padding-right:12px}dialog button{background:#2460ff}.payment-placeholder{border-color:#d9e3ff;background:#f8faff;min-height:0}.payment-options button{background:#f4f6fa;color:#245eff}.sample-payment{margin-bottom:10px}.demo-flow{margin-top:12px}input{max-width:100%}@media(max-width:850px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:600px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}dialog{padding:20px;width:calc(100% - 24px)}.intro h1{font-size:23px}.card{padding:10px}.card h2{font-size:13px}}
[hidden]{display:none!important}.filters button{text-align:left;min-width:115px;padding:12px 14px;font-size:14px}.demo-flow label{display:flex;align-items:center;gap:10px;margin:12px 0;font-size:14px}.demo-flow input{min-width:0;width:100%;flex:1}.demo-flow small{display:block;color:#71809a;font-size:12px;line-height:1.6}
.brand span{font-size:40px;font-weight:850;letter-spacing:2px}.brand{display:flex;align-items:center;gap:10px}@media(max-width:600px){.brand span{font-size:36px}}
body{background:#27b5ca url('./ocean.svg') center center/cover fixed no-repeat}header{background:#e7fff4b8;backdrop-filter:blur(16px)}main{background:#ecffff45;border-radius:22px;margin-top:20px}.intro{background:#f6ffffcf}.card{background:#ffffffed;box-shadow:0 8px 24px #07547715}.filters button,.filters input{background:#f6ffffe8}.filters button.active{background:#079ac0;color:#fff}.notice{background:#f5ffffd9}footer{background:#efffffbc;padding:14px;border-radius:10px}body::before{z-index:0;pointer-events:none;opacity:.4}header,main{position:relative;z-index:1}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
/* Underwater motion inside the product dialog. */
dialog#detail{background:linear-gradient(150deg,#edfffaeF,#d8f7ffef),url('./ocean.svg') center/cover;isolation:isolate;position:fixed}dialog#detail .detail-ocean{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1;opacity:.65}dialog#detail .sea-bubble{position:absolute;bottom:-32px;width:var(--size);height:var(--size);left:var(--left);border:1px solid #ffffffdf;border-radius:50%;box-shadow:inset 2px 2px 4px #fff8;animation:detail-bubble var(--duration) linear infinite;animation-delay:var(--delay)}dialog#detail .sea-fish{position:absolute;top:var(--top);left:-50px;width:28px;height:12px;border-radius:65% 50%;background:#138fad25;animation:detail-fish var(--duration) linear infinite;animation-delay:var(--delay)}dialog#detail .sea-fish::after{content:'';position:absolute;right:-8px;top:1px;border-right:9px solid #138fad25;border-top:5px solid transparent;border-bottom:5px solid transparent}.sample-payment,.demo-flow,.real-order{position:relative;background:#ffffffbe;border-radius:12px;padding:16px}#product-content{background:#ffffffb5;padding:14px;border-radius:10px}.real-order{margin-top:16px;border:1px solid #aacfe0}.real-order input,.real-order textarea{display:block;width:100%;margin:10px 0;padding:10px;border:1px solid #c8dce6;border-radius:7px}.real-order pre{white-space:pre-wrap;overflow-wrap:anywhere}@keyframes detail-bubble{from{transform:translateY(0) translateX(0);opacity:0}15%{opacity:.8}to{transform:translateY(-1000px) translateX(25px);opacity:0}}@keyframes detail-fish{from{transform:translateX(-40px)}to{transform:translateX(640px)}}@media(prefers-reduced-motion:reduce){dialog#detail .sea-bubble,dialog#detail .sea-fish{animation:none;display:none}}
.real-order select,#my-orders{font:inherit;padding:10px 14px;border:1px solid #b5d5e3;border-radius:8px;background:#f4fbff;color:#165570}.real-order button{margin:8px 5px 8px 0}#manual-pay{background:#fff;border:1px dashed #b7d0dc;padding:12px;border-radius:10px}#manual-summary{font-weight:700;color:#185f79}#manual-pay p{white-space:pre-wrap}#live-result{padding:14px;background:#eff9ff;border-radius:8px;min-height:45px}

.brand{align-items:baseline;font-size:30px;line-height:1.2}.brand span{line-height:1.2}@media(max-width:600px){.brand{font-size:27px}}

.intro h1{margin:0 0 22px;line-height:1.4}.intro p{display:flex;align-items:center;flex-wrap:wrap;gap:10px;line-height:1.8}.grid{align-items:stretch}.card button{margin-top:auto;width:100%;flex-shrink:0}.card small{min-height:17px}

.grid{grid-template-columns:repeat(6,minmax(0,1fr))}@media(max-width:1000px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:850px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:600px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}