.scroll{position:absolute;top:54px;bottom:78px;left:0;right:0;overflow-y:auto;}
.brand{display:flex;align-items:center;justify-content:space-between;padding:6px 16px 12px;}
.brand .logo-mini{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle,#4A90D9,#2F6CB0);display:grid;place-items:center;color:#FAF7E8;}
.brand h1{font-family:var(--f-serif);font-size:18px;font-weight:600;letter-spacing:.18em;}
.brand .sub{font-size:9.5px;color:var(--ink-3);letter-spacing:.3em;margin-top:1px;}
.brand .br{display:flex;gap:6px;}
.brand .ic{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.7);display:grid;place-items:center;color:var(--ink-2);position:relative;}
.brand .ic .dt{position:absolute;top:8px;right:9px;width:6px;height:6px;background:var(--error);border-radius:50%;border:1.5px solid #fff;}
.hero{margin:8px 16px 0;border-radius:18px;overflow:hidden;position:relative;height:208px;
  background-image:linear-gradient(90deg,rgba(10,39,65,.78) 0%,rgba(20,69,105,.48) 54%,rgba(15,48,73,.18) 100%),
    url("./images/home-daily-recommendation.webp");
  background-size:cover;background-position:center;box-shadow:0 8px 28px rgba(47,108,176,.28);}
.hero .pat{position:absolute;inset:0;opacity:.07;background:repeating-linear-gradient(45deg,transparent 0 14px,rgba(255,255,255,.4) 14px 15px);}
.hero .frame{position:absolute;inset:14px;border:1px solid rgba(201,162,39,.55);border-radius:12px;pointer-events:none;}
.hero .frame::before,.hero .frame::after{content:'';position:absolute;width:14px;height:14px;border:0 solid var(--gold);}
.hero .frame::before{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px;}
.hero .frame::after{top:-1px;right:-1px;border-top-width:2px;border-right-width:2px;}
.hero .lb{position:absolute;top:18px;left:24px;color:#FAF7E8;font-size:11px;letter-spacing:.5em;}
.hero .ti{position:absolute;top:46px;left:24px;right:90px;font-family:var(--f-serif);font-size:24px;font-weight:600;color:#fff;line-height:1.35;}
.hero .mt{position:absolute;top:118px;left:24px;color:rgba(250,247,232,.85);font-size:12px;letter-spacing:.08em;}
.hero .mt b{color:var(--gold-soft);font-weight:500;}
.hero .pl{position:absolute;right:22px;bottom:22px;width:52px;height:52px;border-radius:50%;background:var(--gold);color:#3a2a00;display:grid;place-items:center;box-shadow:0 6px 18px rgba(201,162,39,.5);cursor:pointer;border:none;}
.hero .pl svg{width:22px;height:22px;margin-left:2px;}
.hero .sv{position:absolute;right:22px;top:18px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;display:grid;place-items:center;cursor:pointer;border:.5px solid rgba(255,255,255,.35);}
.hero .sv svg{width:16px;height:16px;}
.sh{display:flex;align-items:baseline;justify-content:space-between;padding:24px 16px 12px;}
.sh .l{display:flex;align-items:center;gap:8px;}
.sh .br2{width:3px;height:14px;background:var(--gold);border-radius:2px;}
.sh h2{font-family:var(--f-serif);font-size:17px;font-weight:600;}
.sh .more{font-size:11px;color:var(--ink-3);letter-spacing:.22em;}
.g4{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 16px;}
.md{background:#fff;border-radius:14px;padding:16px;position:relative;overflow:hidden;box-shadow:var(--shadow-card);min-height:96px;cursor:pointer;}
.md h3{font-family:var(--f-serif);font-size:15px;font-weight:600;}
.md .d{font-size:11px;color:var(--ink-3);margin-top:4px;letter-spacing:.05em;}
.md .ib{position:absolute;right:-8px;bottom:-8px;width:60px;height:60px;opacity:.16;}
.md.lib{background:linear-gradient(135deg,#fff,#EAF2FB);} .md.lib .ib{color:var(--sky);}
.md.ms{background:linear-gradient(135deg,#fff,#FBF3D9);} .md.ms .ib{color:var(--gold);}
.md.lr{background:linear-gradient(135deg,#fff,#ECF3DF);} .md.lr .ib{color:var(--meadow);}
.md.it{background:linear-gradient(135deg,#fff,#F4E6F0);} .md.it .ib{color:#C04A8E;}
.md .bg{position:absolute;top:14px;right:14px;font-size:10px;color:var(--ink-3);letter-spacing:.18em;font-family:var(--f-mono);}
.ct{margin:0 16px;padding:14px 16px;background:#fff;border-radius:14px;box-shadow:var(--shadow-card);display:flex;align-items:center;gap:14px;}
.ct .cv{width:48px;height:48px;border-radius:8px;background:linear-gradient(135deg,#C9A227,#E8C95A);display:grid;place-items:center;color:#3a2a00;font-family:var(--f-serif);font-size:18px;font-weight:600;flex-shrink:0;}
.ct .if{flex:1;min-width:0;}
.ct .if .lb{font-size:10px;color:var(--meadow);letter-spacing:.2em;}
.ct .if h4{font-family:var(--f-serif);font-size:15px;font-weight:600;margin-top:2px;}
.ct .if .pg{margin-top:6px;height:3px;background:#EFEAD9;border-radius:2px;overflow:hidden;}
.ct .if .pg i{display:block;width:62%;height:100%;background:linear-gradient(90deg,#6B9B37,#C9A227);}
.ct .if .pc{font-size:10px;color:var(--ink-3);font-family:var(--f-mono);margin-top:4px;}
.ct .bt{padding:0 14px;height:36px;border-radius:999px;background:var(--sky);color:#fff;font-size:12.5px;font-weight:600;border:none;cursor:pointer;display:flex;align-items:center;gap:4px;flex-shrink:0;}
.tm{display:flex;gap:12px;padding:0 16px;overflow-x:auto;scroll-snap-type:x mandatory;}
.tm::-webkit-scrollbar{display:none;}
.tc{flex:0 0 200px;height:128px;border-radius:14px;position:relative;overflow:hidden;scroll-snap-align:start;cursor:pointer;box-shadow:0 4px 14px rgba(31,42,51,.08);}
.tc .lb{position:absolute;top:12px;left:14px;font-size:10px;color:rgba(255,255,255,.85);letter-spacing:.3em;}
.tc h3{position:absolute;bottom:14px;left:14px;font-family:var(--f-serif);font-size:17px;color:#fff;font-weight:600;}
.tc .nm{position:absolute;top:8px;right:14px;font-family:var(--f-serif);font-size:38px;color:rgba(255,255,255,.18);font-weight:600;line-height:1;}
.t1{background:linear-gradient(135deg,#2F6CB0,#0D1B2A);}
.t2{background:linear-gradient(135deg,#C04A8E,#5C1F46);}
.t3{background:linear-gradient(135deg,#C9A227,#7A6010);}
.t4{background:linear-gradient(135deg,#6B9B37,#3E5C20);}
.toast{position:absolute;left:50%;bottom:120px;transform:translateX(-50%);background:rgba(31,42,51,.92);color:#fff;padding:10px 18px;border-radius:999px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .25s;z-index:50;}
.toast.show{opacity:1;}
.pb{height:24px;}