*{box-sizing:border-box}html{background:#d9f2ff}body{margin:0;font-family:ui-rounded,"Avenir Next",Avenir,system-ui,sans-serif;color:var(--text,#143b51)}button{font:inherit;cursor:pointer}#app{--primary:#115e78;--accent:#eb3845;--background:#d9f2ff;--surface:#fff;--text:#143b51;position:relative;max-width:540px;min-height:100dvh;margin:auto;background:linear-gradient(170deg,#f2fbff,var(--background) 60%,#f5fcff);padding-bottom:calc(80px + env(safe-area-inset-bottom));overflow:hidden;box-shadow:0 0 38px #234d6520}#view{position:relative;z-index:2;min-height:calc(100dvh - 90px)}#nav{position:fixed;z-index:12;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,540px);display:grid;grid-auto-columns:1fr;grid-auto-flow:column;background:#ffffffeb;backdrop-filter:blur(16px);border-radius:24px 24px 0 0;box-shadow:0 -5px 25px #1b557322;padding:8px 5px calc(7px + env(safe-area-inset-bottom))}#nav button{background:transparent;border:0;padding:3px;color:#7d97a3;font-size:11px;font-weight:800}#nav button.active{color:var(--accent)}#nav button span{display:block;font-size:24px;line-height:28px}.logo{width:185px;max-width:80%;max-height:100px;object-fit:contain;display:block}.welcome{display:flex;min-height:calc(100dvh - 85px);padding:24px 16px 18px;flex-direction:column;align-items:center;text-align:center}.welcome .logo{width:min(78%,285px);max-height:130px;margin-bottom:10px}.elf{width:min(94%,390px);height:min(47dvh,420px);object-fit:contain;object-position:center bottom;margin:auto auto 5px;filter:drop-shadow(0 12px 15px #174e6529);animation:bob 4s ease-in-out infinite}.welcome h1{font-size:clamp(32px,9vw,45px);line-height:.96;letter-spacing:-.055em;margin:4px 0 9px;color:#0e4d69;font-weight:900}.welcome p{font-size:14px;margin:0 0 20px;color:#477d91}.eyebrow{font-size:10px;letter-spacing:.23em;font-weight:900;color:#3a849b}.cta{border:0;background:linear-gradient(115deg,#fa5049,var(--accent));color:white;padding:15px 28px;border-radius:99px;font-weight:900;letter-spacing:.07em;box-shadow:0 8px 0 #b92a36,0 13px 22px #8c324133}.cta:active{transform:translateY(4px);box-shadow:0 4px 0 #b92a36}.page{padding:20px 17px 30px}.top{display:flex;justify-content:space-between;align-items:center}.top .logo{width:135px;max-height:70px}.refresh{border:0;background:#ffffffbd;border-radius:30px;width:38px;height:38px;font-size:22px;color:var(--primary)}.page h1{font-size:34px;letter-spacing:-.055em;line-height:1.03;margin:26px 0 8px;font-weight:900}.sub{font-size:13px;color:#59869b;line-height:1.5}.section{margin-top:23px}.section h2{font-size:23px;letter-spacing:-.045em;margin:0 0 13px}.hero{background:linear-gradient(125deg,var(--primary),#1593a2);color:white;border-radius:25px;padding:24px;box-shadow:0 10px 25px #125a7833}.hero h2{font-size:31px;line-height:1;max-width:260px;margin:6px 0}.hero p{font-size:13px;line-height:1.5;max-width:270px}.hero button{border:0;border-radius:50px;background:white;color:var(--primary);font-weight:900;font-size:11px;padding:12px 17px}.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}.chip{border:1px solid #c6e4ee;border-radius:30px;background:#fff9;color:#376d80;padding:9px 14px;font-size:12px;font-weight:800;white-space:nowrap}.chip.on{background:var(--primary);color:white}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.product{border:0;border-radius:20px;overflow:hidden;background:white;text-align:left;box-shadow:0 7px 18px #175b7918;color:var(--text);padding:0}.product .image{height:160px;display:grid;place-items:center;background:radial-gradient(circle at 25% 15%,#fff,#d8e9e6 75%);font-size:73px;position:relative}.product .image img{width:100%;height:100%;object-fit:cover}.tag{position:absolute;top:10px;left:10px;background:#fff;border-radius:20px;padding:5px 8px;font-size:10px;font-weight:900}.product .desc{padding:12px}.product strong{display:block;font-size:13px}.product small{display:block;color:#7e9aa5;font-size:11px;margin:4px 0}.product b{font-size:20px}.panel{background:#ffffffdb;border:1px solid #fff;border-radius:22px;padding:20px;box-shadow:0 10px 22px #1d66821b}.panel p{font-size:13px;line-height:1.5;color:#5e8597}.camera{height:235px;border:2px dashed #89bed0;border-radius:20px;background:linear-gradient(135deg,#e8faff,#add7ea);display:grid;place-content:center;text-align:center;font-size:65px}.camera small{font-size:12px}.field{padding:14px;background:#eef7fa;border-radius:12px;color:#7c9fae;margin:9px 0;font-size:13px}.row{display:flex;gap:9px;flex-wrap:wrap}.secondary{border:0;border-radius:13px;background:#eaf5f9;padding:12px;color:var(--primary);font-weight:800;font-size:12px}.baubles{display:flex;align-items:center;justify-content:center;margin:16px 0}.baubles img{width:35%;height:155px;object-fit:contain;filter:drop-shadow(0 7px 5px #145a7838);margin:0 -7px}.baubles img:nth-child(2){transform:translateY(12px);z-index:1}.list-item{padding:15px 0;border-bottom:1px solid #d7e8ed}.list-item b{display:block}.list-item small{color:#6d91a0}.detail-photo{height:290px;background:#e3eff0;border-radius:24px;display:grid;place-items:center;font-size:135px;margin:20px 0;overflow:hidden}.detail-photo img{width:100%;height:100%;object-fit:contain}.back{background:#fff9;border:0;border-radius:20px;padding:10px 14px;color:var(--primary);font-weight:800}.price{font-size:29px;font-weight:900}.status{font-size:11px;color:#527d8f;margin:12px 0}.loading{padding:50px 20px;text-align:center}.toast{position:fixed;z-index:30;bottom:100px;left:50%;transform:translateX(-50%);background:#174358;color:white;border-radius:14px;padding:12px 18px;max-width:88%;font-size:12px;text-align:center;box-shadow:0 8px 25px #123b5055}#snow{position:absolute;inset:0;pointer-events:none;z-index:1}.flake{position:absolute;top:-25px;color:#fff;opacity:.85;text-shadow:0 0 5px #fff;animation:fall linear infinite}@keyframes fall{to{transform:translate(20px,110vh)}}@keyframes bob{50%{transform:translateY(-8px) rotate(1deg)}}@media(prefers-reduced-motion:reduce){.flake,.elf{animation:none}}
/* FROSTED CHRISTMAS SKIN — separate from dynamic data */
:root{color-scheme:light}
#app{background:radial-gradient(ellipse at 10% 10%,#fff 0%,transparent 34%),radial-gradient(ellipse at 90% 44%,#e4f8ff 0%,transparent 38%),linear-gradient(170deg,#e7f8ff 0%,#b3def1 60%,#eaf9ff 100%);isolation:isolate}
#app:before{content:"";position:absolute;pointer-events:none;z-index:0;inset:0;background-image:radial-gradient(#fff 1.6px,transparent 2px),radial-gradient(#fff9 1px,transparent 2px);background-size:47px 61px,83px 93px;background-position:4px 7px,21px 31px;opacity:.72}
#nav{background:linear-gradient(140deg,#ffffffd9,#eaf9ffba);border:1px solid #ffffffed;border-bottom:0;box-shadow:0 -8px 30px #256d8d26,inset 0 1px 0 #fff;backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%)}
#nav button{transition:transform .2s,color .2s}
#nav button.active{transform:translateY(-3px);color:#d52c49}
.welcome{padding-top:28px}
.welcome:before{content:"";position:absolute;inset:12px 13px 12px;border:1px solid #ffffffaa;border-radius:32px;background:linear-gradient(150deg,#ffffff63,#c5eaff30 55%,#ffffff70);box-shadow:0 15px 40px #245a7821,inset 0 1px 0 #fff;backdrop-filter:blur(5px);z-index:-1}
.welcome .logo{background:#ffffffeb;border-radius:24px;padding:11px 17px;box-shadow:0 7px 28px #216d8623;max-height:136px}
.welcome .elf{filter:drop-shadow(0 16px 14px #155b793b);z-index:2}
.welcome h1{text-shadow:0 2px 0 #fff8;font-weight:900}
.welcome .cta{margin-bottom:9px}
.page .top{background:#ffffff9c;border:1px solid #ffffffd9;border-radius:21px;padding:9px 14px;box-shadow:0 8px 22px #23678619;backdrop-filter:blur(16px)}
.page>h1{color:#114963;text-shadow:0 1px 0 #fff9}
.hero,.panel,.product,.detail-photo{border:1px solid #ffffffcf;box-shadow:0 10px 26px #1b66842b,inset 0 1px 0 #ffffffad}
.hero{background:linear-gradient(125deg,#12617ce6,#1d8ea8d4);backdrop-filter:blur(12px)}
.panel{background:linear-gradient(145deg,#ffffffc7,#f5fcff9c);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%)}
.product{background:#ffffffc9;backdrop-filter:blur(12px);transition:transform .2s}
.product:active{transform:scale(.97)}
.product .image{background:radial-gradient(circle at 30% 10%,#fff,#d5edf5 80%)}
.chip{background:#ffffffa9;backdrop-filter:blur(12px);border-color:#fff}
.chip.on{background:#16657ddf}
.field{background:#ffffffa1;border:1px solid #fff}
.camera{background:linear-gradient(135deg,#f2fcffbc,#b3dfedbc);border-color:#ffffff}
#snow{z-index:1}
@media(min-width:600px){body{background:linear-gradient(120deg,#b9e7fa,#f4fbff)}#app{margin:20px auto;min-height:calc(100dvh - 40px);border-radius:35px;border:7px solid #16394a;box-shadow:0 24px 70px #1a435555}#nav{bottom:20px}}