:root{
  --blue:#0d5bc5;--blue2:#1677ff;--navy:#0b2f6b;--purple:#7f35e7;--orange:#ff7a00;--green:#09ae73;
  --soft-blue:#eef7ff;--line:#dbe9f7;--text:#12376b;--muted:#6c7f9b;--card:#fff;--shadow:0 16px 36px rgba(17,77,142,.13);
  font-family:Inter,ui-rounded,"Arial Rounded MT Bold","Trebuchet MS",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:linear-gradient(180deg,#c9f1ff 0 23%,#fff0b5 23% 100%);color:var(--text)}
button,input,a{font:inherit} button{cursor:pointer} img{display:block;max-width:100%} .hidden{display:none!important}
.page-shell{min-height:100vh;overflow:hidden}.marketing-hero{position:relative;max-width:1440px;margin:auto;min-height:425px;padding:24px 36px 10px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:18px;isolation:isolate}
.hero-bg-shape{position:absolute;z-index:-2;border-radius:999px;filter:blur(1px);opacity:.55}.hero-bg-one{width:500px;height:240px;background:#fff;left:-90px;top:-80px}.hero-bg-two{width:460px;height:260px;background:#fff2a8;right:-80px;bottom:-110px}
.hero-brand-block{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}.hero-signboard{width:min(100%,780px);filter:drop-shadow(0 15px 10px rgba(101,71,10,.14))}.hero-benefits{margin-top:-12px;display:grid;grid-template-columns:repeat(2,max-content);gap:9px 24px;font-weight:800;font-size:15px;color:#163c75}.hero-benefits span{display:flex;align-items:center;gap:7px}.dot{width:15px;height:15px;border-radius:50%;box-shadow:inset 0 0 0 4px #fff}.dot.blue{background:#1888ff}.dot.green{background:#19b77a}.dot.purple{background:#8a49f2}.dot.orange{background:#ff8615}
.hero-art-block{position:relative;align-self:end;min-width:0}.cabinet-art{width:min(100%,650px);margin-left:auto;filter:drop-shadow(0 18px 16px rgba(33,96,131,.12))}.choice-chip{position:absolute;z-index:2;top:-8px;left:35%;background:#ffd633;border:4px solid #fff;border-radius:24px;padding:8px 22px;font-weight:1000;color:#123e88;box-shadow:0 5px 0 #f1a900;transform:rotate(-1deg)}
.dashboard-window{position:relative;z-index:5;width:min(1370px,calc(100% - 34px));margin:-16px auto 30px;background:#f9fcff;border:1px solid rgba(57,120,180,.25);border-radius:22px 22px 28px 28px;box-shadow:0 26px 60px rgba(26,83,137,.24);overflow:hidden}
.topnav{height:72px;background:#fff;display:grid;grid-template-columns:auto auto minmax(220px,1fr) auto auto;align-items:center;gap:14px;padding:0 22px;border-bottom:1px solid var(--line)}
.brand-button{display:flex;align-items:center;gap:10px;border:0;background:transparent;color:#123b7a;padding:5px 8px;border-radius:10px}.brand-button strong{font-size:22px}.brand-button em{font-style:normal;color:#7d36db}.brand-mark{width:38px;height:36px;display:inline-block;position:relative;filter:drop-shadow(0 3px 2px rgba(0,0,0,.08))}.brand-mark .door{position:absolute;top:2px;width:16px;height:31px;border-radius:3px;border:2px solid #0d45aa}.d1{left:1px;background:#1f8cff}.d2{right:1px;background:#ffc326;border-color:#df7200!important}.shelf{position:absolute;left:16px;top:9px;width:6px;height:18px;background:#ff5a74;border-radius:2px}
.topnav-links{display:flex;align-items:center;gap:3px}.nav-link{border:0;background:transparent;color:#183f72;padding:10px 12px;border-radius:9px;font-weight:800}.nav-link:hover,.nav-link.active{background:#edf7ff;color:#086de8}.top-search{height:42px;display:flex;align-items:center;gap:8px;border:1px solid #d6e5f2;background:#fbfdff;border-radius:10px;padding:0 12px}.top-search svg,.hero-search svg{width:19px;fill:none;stroke:#6c8fbb;stroke-width:2}.top-search input,.hero-search input{width:100%;border:0;outline:0;background:transparent;color:#173a6f;font-size:14px}.cart-button,.icon-button{position:relative;border:0;background:transparent;color:#0b4ba8}.cart-button{width:44px;height:44px;border-radius:12px}.cart-button:hover{background:#eef7ff}.cart-button svg{width:29px;fill:none;stroke:currentColor;stroke-width:2}.cart-button span{position:absolute;top:1px;right:0;background:#ff3434;color:#fff;border-radius:50%;min-width:19px;height:19px;display:grid;place-items:center;font-size:11px;font-weight:900}.login-button{height:43px;border:0;background:linear-gradient(135deg,#8a3ef1,#6d26df);color:white;border-radius:10px;padding:0 18px;display:flex;align-items:center;gap:8px;font-weight:800;box-shadow:0 7px 16px rgba(120,48,223,.22)}.login-button svg{width:20px;fill:none;stroke:currentColor;stroke-width:2}
.dashboard-grid{display:grid;grid-template-columns:210px minmax(0,1fr) 320px;gap:14px;padding:15px;background:linear-gradient(180deg,#f6fbff,#fff)}.sidebar{min-width:0;display:flex;flex-direction:column;gap:15px}.side-menu{display:flex;flex-direction:column;gap:5px}.side-link{border:1px solid transparent;background:transparent;text-align:left;color:#284d7f;border-radius:10px;padding:11px 13px;font-weight:750;display:flex;align-items:center;gap:11px}.side-link:hover,.side-link.active{background:#e9f5ff;border-color:#cfe9ff;color:#0e4ba8}.side-icon{width:21px;text-align:center;color:#35679f}.sidebar-promo{margin-top:3px;padding:0;border:0;background:transparent;border-radius:16px;overflow:hidden;transition:.2s}.sidebar-promo:hover{transform:translateY(-2px)}.sidebar-promo img{width:100%;height:355px;object-fit:cover;object-position:50% 20%;border-radius:16px}
.main-content,.rightbar{display:flex;flex-direction:column;gap:14px;min-width:0}.card{background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:0 5px 16px rgba(18,70,125,.06)}
.search-hero{min-height:210px;position:relative;overflow:hidden;background:linear-gradient(105deg,#fffdf3 0 46%,#f0fbff 72%,#fff4dc 100%);display:grid;grid-template-columns:1.12fr .88fr}.search-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 8% 30%,#cef1d3 0 1%,transparent 22%),radial-gradient(circle at 80% 80%,#ffd96b 0 1%,transparent 22%);opacity:.6}.search-hero-copy{position:relative;z-index:2;padding:26px 26px 20px}.eyebrow{font-size:27px;font-weight:1000;line-height:1;color:#0a3c8c}.search-hero h1{margin:2px 0 3px;color:#f35a17;font-size:31px;line-height:1.05}.search-hero p{margin:0 0 16px;font-size:13px;font-weight:750;color:#26486e}.hero-search-wrap{display:flex;gap:8px}.hero-search{min-width:0;flex:1;height:45px;background:white;border:2px solid #cde0f4;border-radius:12px;display:flex;align-items:center;gap:9px;padding:0 13px;box-shadow:0 4px 10px rgba(28,84,135,.08)}.primary-button{border:0;background:#0e7af4;color:#fff;border-radius:11px;padding:0 23px;font-weight:900;box-shadow:0 5px 12px rgba(14,122,244,.22)}.hero-student{align-self:end;justify-self:end;width:100%;max-width:420px;height:210px;object-fit:cover;object-position:54% 48%;position:relative;z-index:1}
.picker-section{padding:10px 12px 13px}.section-title{display:flex;align-items:center;gap:7px;min-height:32px}.section-title h2{margin:0;font-size:18px;color:#123875}.section-title .small-link{margin-left:auto}.title-icon{font-size:18px}.small-link{border:0;background:transparent;color:#0d7bf4;font-size:12px;font-weight:850;padding:5px 3px}.year-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.subject-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.subject-title{margin-top:6px}.image-tile{border:2px solid transparent;background:transparent;border-radius:13px;padding:0;overflow:hidden;transition:.18s;min-width:0}.image-tile img{width:100%;height:88px;object-fit:contain}.image-tile.subject img{height:105px}.image-tile:hover,.image-tile.selected{border-color:#1685ff;background:#f5fbff;box-shadow:0 5px 14px rgba(22,133,255,.17);transform:translateY(-1px)}
.popular-section{padding:10px 12px 13px}.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.product-card{border:1px solid #d8e6f5;border-radius:12px;padding:7px;background:#fff;display:flex;flex-direction:column;min-width:0;transition:.16s}.product-card:hover{transform:translateY(-2px);box-shadow:0 9px 18px rgba(26,81,139,.12)}.product-cover{position:relative;height:128px;border-radius:9px;overflow:hidden;padding:10px 7px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center;color:#06397f;border:1px solid rgba(255,255,255,.75)}.cover-sains{background:linear-gradient(145deg,#fff94a,#70e75a 50%,#48c8ff)}.cover-math{background:linear-gradient(145deg,#57b8ff,#fff34f 45%,#ff7a55)}.cover-bm{background:linear-gradient(145deg,#ff81b1,#ffef7c 52%,#7ae58c)}.cover-pack{background:linear-gradient(145deg,#79daff,#f3ff6d 42%,#ff7a84)}.product-cover small{font-weight:1000;background:#fff;border-radius:6px;padding:2px 6px;font-size:9px}.product-cover strong{font-size:17px;line-height:.95;text-transform:uppercase;text-shadow:0 2px 0 rgba(255,255,255,.85)}.cover-characters{font-size:27px;letter-spacing:-7px;margin-left:-6px}.favorite-button{position:absolute;right:5px;top:5px;width:25px;height:25px;border-radius:50%;background:#fff;border:1px solid #dce7f2;color:#ff4d66;font-size:14px;display:grid;place-items:center}.favorite-button.active{background:#fff0f3;color:#e60036}.product-card h3{font-size:12px;line-height:1.15;margin:8px 0 5px;min-height:28px;color:#173a6a}.product-meta{display:flex;flex-direction:column;gap:2px;color:#6a7e9c;font-size:10px;min-height:35px}.rating{margin-top:3px;color:#f3ad00;font-size:10px}.rating span{color:#667e9b}.price{font-size:15px;font-weight:1000;margin:3px 0 6px;color:#0a3273}.product-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:auto}.ghost-button,.buy-button{height:31px;border-radius:7px;font-size:11px;font-weight:900}.ghost-button{border:1.5px solid #1080ff;background:#fff;color:#0d74e5}.buy-button{border:0;background:#0e7af4;color:#fff}.empty-state{padding:30px;text-align:center;color:#5e7695;display:flex;flex-direction:column;gap:6px}
.rightbar .card{padding:10px 12px}.section-title.compact h2{font-size:17px}.account-main{display:grid;grid-template-columns:55px 1fr 35px;align-items:center;gap:8px;padding:6px 3px 8px}.avatar{width:53px;height:53px;border-radius:50%;display:grid;place-items:center;background:#ffe0ee;font-size:35px}.account-main div:nth-child(2){display:flex;flex-direction:column}.account-main span{font-size:11px;color:#6a809d}.account-main strong{font-size:15px}.account-main b{margin-top:4px;align-self:flex-start;background:#ffe150;color:#614900;padding:3px 9px;border-radius:12px;font-size:10px}.icon-button{width:34px;height:34px;border:1px solid #d6e4f3;border-radius:8px}.account-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #e5edf6}.account-stats button{border:0;background:#fff;padding:9px 2px;display:flex;flex-direction:column;align-items:center;color:#54708e}.account-stats button+button{border-left:1px solid #e5edf6}.account-stats strong{font-size:18px;color:#113778}.account-stats span{font-size:10px}.mini-cart-items{display:flex;flex-direction:column;gap:7px}.mini-cart-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:7px;align-items:center;padding:5px 0;border-bottom:1px solid #edf2f7}.mini-thumb{width:42px;height:42px;border-radius:6px;background:linear-gradient(135deg,#ffea3a,#55d9ff);display:grid;place-items:center;font-size:18px}.mini-cart-info strong{font-size:11px;display:block;color:#183d72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-cart-info span{font-size:11px;font-weight:900}.qty-controls{display:flex;align-items:center;border:1px solid #dbe6f2;border-radius:7px;overflow:hidden}.qty-controls button{border:0;background:#fff;width:25px;height:26px;color:#185bb1}.qty-controls span{width:21px;text-align:center;font-size:11px}.remove-mini{border:0;background:transparent;color:#7b91ad;font-size:14px;padding:3px}.mini-control-wrap{display:flex;align-items:center;gap:3px}.cart-empty{padding:15px 0;text-align:center;color:#7288a5;font-size:12px}.cart-subtotal{display:flex;justify-content:space-between;align-items:center;padding:9px 0 7px;font-size:12px}.cart-subtotal strong{font-size:16px;color:#0a3273}.checkout-button{width:100%;height:38px;border:0;border-radius:8px;background:#1080f5;color:#fff;font-weight:900}.free-card{padding-bottom:8px!important}.resource-row{width:100%;border:0;background:#f9fcff;border-radius:9px;margin-top:7px;padding:9px;display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:8px;text-align:left;text-decoration:none;color:inherit}.resource-row:hover{background:#eef8ff}.resource-icon{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;font-weight:1000;font-size:20px}.resource-icon.green{background:#c9f8e5;color:#00a565}.resource-icon.purple{background:#e4d1ff;color:#7d35e7}.resource-row span:nth-child(2){display:flex;flex-direction:column}.resource-row strong{font-size:12px}.resource-row small{font-size:10px;color:#71839c}.resource-row>b{font-size:24px;color:#16467f}
.buy-steps{position:relative;margin:0 15px 15px;background:linear-gradient(90deg,#fff 0,#fffaf0 68%,#fff1ae 100%);border:1px solid #eadca7;border-radius:17px;padding:9px 12px 0;overflow:hidden}.bottom-title{margin-bottom:4px}.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:72%}.step-card{position:relative;border:0;border-radius:15px;min-height:120px;padding:13px 12px 10px;display:grid;grid-template-rows:34px auto auto;justify-items:center;align-items:center;color:#183c73}.step-card strong{font-size:13px}.step-card small{font-size:10px;max-width:130px}.step-no{position:absolute;left:7px;top:7px;width:31px;height:31px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:1000}.step-symbol{font-size:32px}.step-blue{background:#e9f6ff}.step-blue .step-no{background:#1381f4}.step-orange{background:#fff2df}.step-orange .step-no{background:#ff7a00}.step-green{background:#e9fbf5}.step-green .step-no{background:#08ab6b}.step-purple{background:#f3eaff}.step-purple .step-no{background:#8138e8}.trust-row{display:grid;grid-template-columns:1fr 1fr 1.2fr 2.4fr;gap:10px;align-items:center;margin-top:7px;min-height:100px}.trust-row>div{display:flex;align-items:center;gap:8px}.trust-row>div>span{font-size:27px;color:#1176e8}.trust-row p{margin:0;display:flex;flex-direction:column}.trust-row strong{font-size:12px}.trust-row small{font-size:10px;color:#657b98}.trust-row img{position:absolute;right:0;bottom:-20px;width:350px;max-height:185px;object-fit:contain;object-position:center bottom;pointer-events:none}
.toast{position:fixed;z-index:1000;left:50%;bottom:30px;transform:translate(-50%,20px);background:#123b73;color:#fff;padding:11px 18px;border-radius:11px;box-shadow:0 12px 30px rgba(0,0,0,.2);opacity:0;pointer-events:none;transition:.2s;font-weight:800;font-size:13px}.toast.show{opacity:1;transform:translate(-50%,0)}.modal-backdrop{position:fixed;z-index:900;inset:0;background:rgba(9,31,61,.55);display:grid;place-items:center;padding:20px}.modal{position:relative;background:#fff;width:min(640px,100%);max-height:min(86vh,800px);overflow:auto;border-radius:18px;box-shadow:0 24px 80px rgba(0,0,0,.27);padding:24px}.modal-close{position:absolute;right:14px;top:11px;border:0;background:#f0f5fb;color:#2f5684;width:34px;height:34px;border-radius:50%;font-size:22px}.modal h2{margin:0 42px 8px 0}.modal p{color:#627994}.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.modal-field{display:flex;flex-direction:column;gap:5px}.modal-field label{font-size:12px;font-weight:800}.modal-field input,.modal-field select{border:1px solid #cfdfef;border-radius:9px;height:42px;padding:0 11px;outline:0}.modal-field input:focus,.modal-field select:focus{border-color:#1685ff;box-shadow:0 0 0 3px #e8f4ff}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.modal-actions button,.modal-primary{border:0;border-radius:9px;padding:10px 16px;font-weight:900}.modal-secondary{background:#eef4fb;color:#2b5483}.modal-primary{background:#107cf2;color:#fff}.modal-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}.modal-list-item{border:1px solid #dce8f4;border-radius:10px;padding:10px;display:flex;align-items:center;justify-content:space-between;gap:10px}.modal-product-head{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:start}.modal-product-cover{height:170px}.modal-badge{display:inline-flex;background:#eaf6ff;color:#096edc;border-radius:13px;padding:4px 9px;font-size:11px;font-weight:850}.checkout-summary{border:1px solid #dce8f4;border-radius:12px;padding:12px;margin:10px 0;background:#f9fcff}.checkout-summary-row{display:flex;justify-content:space-between;padding:4px 0}.notice{background:#fff8dd;border:1px solid #ffe184;color:#6e5700;border-radius:10px;padding:10px;font-size:12px;margin-top:10px}
@media (max-width:1150px){.marketing-hero{min-height:360px}.dashboard-grid{grid-template-columns:180px minmax(0,1fr)}.rightbar{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.2fr 1fr}.topnav{grid-template-columns:auto minmax(220px,1fr) auto auto}.topnav-links{display:none}.steps-grid{width:100%}.trust-row{grid-template-columns:1fr 1fr 1.2fr}.trust-row img{display:none}}
@media (max-width:820px){body{background:#eaf8ff}.marketing-hero{grid-template-columns:1fr;min-height:auto;padding:18px 16px 0}.hero-art-block{margin-top:-10px}.cabinet-art{max-height:330px;object-fit:contain}.choice-chip{left:auto;right:2%;top:0}.hero-benefits{font-size:12px;gap:6px 15px;margin-top:-7px}.dashboard-window{width:100%;margin:0;border-radius:0;border-left:0;border-right:0}.topnav{position:sticky;top:0;z-index:50;grid-template-columns:auto 1fr auto auto;padding:0 10px;height:64px}.brand-button strong{font-size:17px}.brand-mark{width:32px;height:31px}.top-search{grid-column:1/-1;grid-row:2;height:39px;margin-bottom:8px}.topnav{height:auto;min-height:64px;padding-top:8px;padding-bottom:8px}.login-button span{display:none}.login-button{width:42px;padding:0;justify-content:center}.dashboard-grid{grid-template-columns:1fr;padding:10px}.sidebar{display:none}.rightbar{grid-column:auto;display:flex}.search-hero{grid-template-columns:1fr;min-height:250px}.search-hero-copy{padding:20px}.hero-student{position:absolute;right:-50px;bottom:-4px;opacity:.3;height:230px}.search-hero-copy{max-width:82%}.year-grid{grid-template-columns:repeat(3,1fr)}.subject-grid{grid-template-columns:repeat(2,1fr)}.product-grid{grid-template-columns:repeat(2,1fr)}.buy-steps{margin:0 10px 10px}.steps-grid{grid-template-columns:repeat(2,1fr)}.trust-row{grid-template-columns:1fr;gap:5px}.trust-row img{display:none}.marketing-hero .hero-signboard{width:100%}.hero-benefits{grid-template-columns:1fr 1fr}.modal-product-head{grid-template-columns:1fr}.modal-grid{grid-template-columns:1fr}}
@media (max-width:520px){.marketing-hero{padding-left:8px;padding-right:8px}.hero-benefits{grid-template-columns:1fr;font-size:11px}.cabinet-art{max-height:270px}.dashboard-grid{padding:7px}.search-hero-copy{max-width:100%;padding:16px}.search-hero h1{font-size:27px}.eyebrow{font-size:23px}.hero-student{display:none}.year-grid{gap:3px}.image-tile img{height:80px}.subject-grid{gap:4px}.image-tile.subject img{height:92px}.product-grid{gap:7px}.product-cover{height:115px}.product-card h3{font-size:11px}.steps-grid{grid-template-columns:1fr}.step-card{min-height:105px}.rightbar .card{padding:9px}.modal{padding:19px 14px}.brand-button{padding-left:0}.brand-button strong{font-size:15px}.cart-button{width:37px}.login-button{width:37px}}

/* === v5.1 separated-section polish === */
body{
  background:
    radial-gradient(circle at 8% 8%,rgba(255,255,255,.9) 0 8%,transparent 8.2%),
    radial-gradient(circle at 93% 16%,rgba(255,244,169,.75) 0 10%,transparent 10.2%),
    linear-gradient(180deg,#bfeeff 0 25%,#eefbff 25% 31%,#fff4c7 31% 100%);
}
.marketing-hero{
  min-height:390px;
  padding-top:16px;
  padding-bottom:0;
  background-image:url("assets/background/classroom-bg.svg");
  background-size:cover;
  background-position:center;
  border-radius:0 0 42px 42px;
}
.marketing-hero:before,.marketing-hero:after{
  content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(1px);opacity:.75
}
.marketing-hero:before{width:250px;height:250px;left:-110px;bottom:-35px;background:radial-gradient(circle,#89df9c 0 18%,#42bc72 19% 33%,transparent 34%)}
.marketing-hero:after{width:300px;height:300px;right:-125px;bottom:-45px;background:radial-gradient(circle,#9fe98c 0 18%,#36b96b 19% 31%,transparent 32%)}
.hero-brand-block{padding-top:10px}.hero-signboard{width:min(100%,760px)}
.hero-art-block{display:flex;align-items:flex-end;justify-content:flex-end}.cabinet-art{max-height:365px;width:auto;max-width:100%;object-fit:contain}
.dashboard-window{margin-top:-22px;background-image:url("assets/background/dashboard-bg.svg");background-size:cover;background-position:center;border-color:#cfe4f4}
.dashboard-grid{grid-template-columns:205px minmax(0,1fr) 315px;gap:11px;background:linear-gradient(180deg,#f7fbff,#fffdf7);padding:12px}
.card{border-color:#d8e8f5;box-shadow:0 4px 13px rgba(24,74,124,.055)}
.sidebar-promo img{height:345px;object-fit:contain;background:linear-gradient(180deg,#eff9ff,#fff7c8);padding:4px}

/* Account card: separated and rebuilt from the draft */
.account-card{overflow:hidden;background:linear-gradient(180deg,#fff 0,#fbfdff 100%)}
.account-card .section-title{padding-bottom:5px;border-bottom:1px solid #e7eff7}
.account-main{grid-template-columns:58px 1fr 36px;padding:10px 2px 11px}
.avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;border:3px solid #e7f4ff;background:#ffe4ef;box-shadow:0 2px 7px rgba(24,82,137,.12)}
.account-main span{font-size:10px}.account-main strong{font-size:14px;color:#113978}.account-main b{background:#ffdd45;padding:4px 10px;border-radius:13px;font-size:10px}
.account-stats{gap:5px;border-top:0;padding-top:2px}
.account-stats button{border:1px solid #e4edf6!important;background:linear-gradient(180deg,#fff,#f5f9ff);border-radius:8px;padding:9px 3px}
.account-stats button+button{border-left:1px solid #e4edf6!important}
.account-stats strong{font-size:18px}.account-stats span{font-size:9px}
.icon-button{background:#fff;border-color:#d8e5f1;box-shadow:0 1px 4px rgba(0,0,0,.04)}

/* Cart card: actual separated product thumbnails and draft-like rows */
.cart-card{background:#fff;overflow:hidden}
.cart-card .section-title{padding-bottom:5px;border-bottom:1px solid #e7eff7}
.mini-cart-items{gap:0}.mini-cart-row{grid-template-columns:48px minmax(0,1fr) auto;gap:8px;padding:8px 0;border-bottom:1px solid #eaf0f6}
.mini-thumb{width:46px;height:46px;border-radius:7px;object-fit:cover;border:1px solid #dbe7f2;background:#fff}
.mini-cart-info strong{font-size:10.5px;line-height:1.2;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mini-cart-info span{display:block;margin-top:2px;font-size:11px;color:#0a3776}.mini-control-wrap{gap:4px}.qty-controls{height:30px;border-color:#cfe0ef}.qty-controls button{width:24px;height:28px;font-weight:900}.qty-controls span{width:20px;font-weight:900;color:#123c75}.remove-mini{font-size:13px;color:#4875aa}.cart-subtotal{border-top:0;padding:10px 0 8px}.checkout-button{height:40px;background:linear-gradient(180deg,#1b8cff,#0874e7);box-shadow:0 4px 10px rgba(8,116,231,.18)}

/* Popular section: cards now use independent artwork instead of a fake CSS cover */
.popular-section{padding:9px 10px 12px}.product-grid{gap:8px}
.product-card{padding:6px;border-color:#d7e6f4;border-radius:11px;background:linear-gradient(180deg,#fff,#fbfdff)}
.product-cover-img-wrap{position:relative;height:123px;border-radius:8px;overflow:hidden;border:1px solid #d7e6f2;background:#eef8ff}
.product-cover-image{width:100%;height:100%;object-fit:cover;display:block}
.favorite-button{right:5px;top:5px;z-index:2;width:26px;height:26px;box-shadow:0 2px 6px rgba(31,79,132,.12)}
.product-card h3{font-size:11.5px;min-height:28px;margin:7px 0 4px}.product-meta{font-size:9.5px;min-height:32px}.rating{font-size:9.5px}.price{font-size:15px}.ghost-button,.buy-button{height:30px}
.modal-product-image{width:230px;max-width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;border:1px solid #d8e5f1;box-shadow:0 10px 24px rgba(27,74,123,.12)}

/* Main hero and pickers: tighter, closer to the original draft */
.search-hero{min-height:190px}.search-hero-copy{padding:22px 24px 17px}.hero-student{height:190px;max-width:400px;object-fit:contain;object-position:center bottom}
.picker-section{padding:8px 10px 10px}.image-tile img{height:80px}.image-tile.subject img{height:94px}
.section-title h2{font-size:17px}

/* fill the bottom area with a continuous poster-like surface */
.buy-steps{background:linear-gradient(90deg,#fff 0 70%,#fff5c0 100%);box-shadow:0 5px 16px rgba(30,83,132,.05)}
.trust-row{min-height:110px}.trust-row img{width:330px;bottom:-13px}

@media (max-width:1150px){
  .dashboard-grid{grid-template-columns:180px minmax(0,1fr)}
}
@media (max-width:820px){
  .marketing-hero{border-radius:0;min-height:auto}.marketing-hero:before,.marketing-hero:after{display:none}
  .dashboard-grid{grid-template-columns:1fr}
  .product-cover-img-wrap{height:150px}
}
@media (max-width:520px){
  .product-cover-img-wrap{height:138px}
  .account-main{grid-template-columns:54px 1fr 34px}.avatar{width:52px;height:52px}
}

/* === v5.2 regenerated background + account/cart icon polish === */
body{
  background:
    linear-gradient(rgba(235,249,255,.68),rgba(255,247,208,.72)),
    url("assets/background/generated-panel-bg.png") center top/cover fixed no-repeat;
}
.page-shell{position:relative;background:transparent}
.dashboard-window{
  background:
    linear-gradient(rgba(249,253,255,.78),rgba(255,253,244,.82)),
    url("assets/background/generated-panel-bg.png") center/cover no-repeat;
  border-color:#c6e4f8;
  box-shadow:0 26px 70px rgba(34,98,147,.22);
}
.dashboard-grid{
  background:rgba(248,252,255,.66);
  backdrop-filter:saturate(1.06);
  -webkit-backdrop-filter:saturate(1.06);
}
.sidebar{
  background:rgba(255,255,255,.62);
  border:1px solid rgba(211,233,247,.88);
  border-radius:15px;
  padding:7px;
  box-shadow:0 4px 14px rgba(48,107,154,.05);
}
.main-content,.rightbar{position:relative}
.main-content>.card,.rightbar>.card{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.title-icon-img{width:25px;height:25px;object-fit:contain;display:block;flex:0 0 auto}
.cart-title-icon{width:27px;height:27px}
.account-title,.cart-title{gap:6px}

/* Regenerated Account Saya artwork */
.account-card{
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,251,255,.97));
  border:1px solid #cfe5f7;
}
.account-main{grid-template-columns:64px 1fr 39px;gap:10px;padding:11px 3px 10px}
.avatar{
  width:62px;height:62px;object-fit:contain;border-radius:50%;
  border:3px solid #d9f0ff;background:#e8f8ff;
  box-shadow:0 4px 12px rgba(37,101,153,.12)
}
.account-copy{display:flex!important;flex-direction:column;min-width:0}
.account-copy>span:first-child{font-size:10px;color:#6a809d}
.account-copy>strong{font-size:15px;color:#103a77;line-height:1.15}
.buyer-badge{
  margin-top:4px;align-self:flex-start;display:inline-flex!important;align-items:center;gap:4px;
  background:#ffe65d;color:#5f4800;padding:3px 8px 3px 5px;border-radius:999px;font-size:9px!important;font-weight:900
}
.buyer-badge img{width:17px;height:17px;object-fit:contain}
.icon-button{width:38px;height:38px;padding:4px;border-radius:10px;background:#fff;display:grid;place-items:center}
.icon-button img{width:30px;height:30px;object-fit:contain}
.account-stats{gap:6px;padding-top:4px}
.account-stats button{
  min-height:78px;display:grid;grid-template-rows:24px 20px 14px;justify-items:center;align-content:center;
  gap:1px;padding:5px 2px;border-color:#dceaf5!important;background:linear-gradient(180deg,#fff,#f3f9ff)
}
.account-stat-icon{width:24px;height:24px;object-fit:contain}
.account-stats strong{font-size:16px;line-height:20px}
.account-stats span{font-size:9px;line-height:12px}

/* Troli Saya: use clean regenerated subject-book icons instead of full workbook thumbnails */
.cart-card{border:1px solid #cfe5f7;background:rgba(255,255,255,.97)}
.mini-cart-row{grid-template-columns:58px minmax(0,1fr) auto;gap:8px;min-height:65px;padding:7px 0}
.mini-thumb{
  width:56px;height:58px;object-fit:contain;border:0;border-radius:8px;background:transparent;padding:0;
  filter:drop-shadow(0 2px 3px rgba(25,76,124,.10))
}
.mini-cart-info strong{font-size:10.5px;line-height:1.22;color:#143d75}
.mini-cart-info span{font-size:11px;color:#083d86;font-weight:950}
.qty-controls{background:#fff}
.remove-mini{font-size:15px}
.checkout-button{border-radius:9px}

@media (max-width:820px){
  body{background-attachment:scroll;background-size:auto 1000px;background-repeat:repeat-y}
  .sidebar{display:none}
  .dashboard-grid{background:rgba(248,252,255,.82)}
}

/* === v5.5 — integrate generated sky/classroom background like the approved draft === */
html{background:#dff5ff;}
body{
  min-height:100vh;
  background:#dff5ff url("assets/background/outer-sky-bg.png") center top / cover fixed no-repeat;
}
.page-shell{
  position:relative;
  min-height:100vh;
  background:transparent;
}
/* The top artwork sits directly on the generated sky instead of on an extra translucent panel. */
.marketing-hero{
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border-radius:0!important;
  overflow:visible;
}
.marketing-hero:before,.marketing-hero:after,.hero-bg-shape{display:none!important;}
.hero-signboard,.cabinet-art{position:relative;z-index:2;}
/* Keep dashboard crisp and opaque, while allowing the decorative sky/leaf edges to remain visible around it. */
.dashboard-window{
  background:#f9fcff!important;
  border:1px solid rgba(57,120,180,.27);
  box-shadow:0 28px 65px rgba(23,81,137,.23),0 0 0 1px rgba(255,255,255,.75);
}
.dashboard-grid{
  background:linear-gradient(180deg,rgba(247,252,255,.98),rgba(255,253,247,.98))!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.sidebar{background:rgba(255,255,255,.97)!important;}
.main-content>.card,.rightbar>.card{background:rgba(255,255,255,.985)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
/* Wider desktop leaves a visible illustrated border, matching the reference poster. */
@media (min-width:1280px){
  .marketing-hero{max-width:1370px;padding-left:42px;padding-right:42px;}
  .dashboard-window{width:min(1370px,calc(100% - 54px));}
}
@media (min-width:1500px){
  .dashboard-window{width:min(1370px,calc(100% - 130px));}
}
@media (max-width:900px){
  body{background-size:auto 100vh;background-position:center top;background-attachment:scroll;background-repeat:repeat-y;}
}

/* === v5.6 — leafy garden outer background, preserving the existing hero/dashboard === */
html{background:#dff5ff;}
body{
  min-height:100vh;
  background-color:#dff5ff!important;
  background-image:url("assets/background/garden-edge-bg.png")!important;
  background-position:center top!important;
  background-size:cover!important;
  background-attachment:fixed!important;
  background-repeat:no-repeat!important;
}
.page-shell{background:transparent!important;}
.marketing-hero{background:transparent!important;}
.dashboard-window{position:relative;z-index:3;}
@media (min-width:1280px){
  body{background-size:100% auto!important;}
}
@media (max-width:900px){
  body{background-attachment:scroll!important;background-size:auto 100vh!important;background-position:center top!important;background-repeat:repeat-y!important;}
}

/* === v5.7 fix: decorative garden background only below the hero, not behind it === */
html{background:#dff5ff!important;}
body{
  min-height:100vh;
  background:linear-gradient(180deg,#dff5ff 0 360px,#eef9ff 360px 100%)!important;
}
.page-shell{
  position:relative;
  min-height:100vh;
  isolation:isolate;
}
.page-shell::before{
  content:"";
  position:absolute;
  top:320px;
  left:0;
  right:0;
  bottom:0;
  z-index:0;
  pointer-events:none;
  background:
    url("assets/background/tree-bg-below-hero.png") center top / cover no-repeat;
}
.marketing-hero,.dashboard-window,.toast,.modal-backdrop{position:relative;z-index:1;}
.marketing-hero{
  background:transparent!important;
}
.dashboard-window{
  margin-top:-10px;
}
@media (min-width:1280px){
  .page-shell::before{top:330px;background-size:100% auto;}
}
@media (max-width:900px){
  body{background:linear-gradient(180deg,#dff5ff 0 240px,#eef9ff 240px 100%)!important;}
  .page-shell::before{top:230px;background-size:auto 1200px;background-repeat:repeat-y;}
}

/* === v5.8 — whimsical leafy backdrop below the hero, matched to the approved draft === */
html{background:#dff5ff!important;}
body{
  background:linear-gradient(180deg,#dff5ff 0 355px,#eef9ff 355px 100%)!important;
}
.page-shell{
  position:relative;
  max-width:1440px;
  margin:0 auto;
  background:transparent!important;
  isolation:isolate;
}
.page-shell::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:338px;
  bottom:0;
  z-index:0;
  pointer-events:none;
  background:url("assets/background/whimsical-garden-backdrop.png") center top / cover no-repeat;
  opacity:1;
}
.marketing-hero,.dashboard-window,.toast,.modal-backdrop{position:relative;z-index:1;}
.marketing-hero{
  background:transparent!important;
  padding-bottom:8px;
}
.marketing-hero:before,.marketing-hero:after,.hero-bg-shape{display:none!important;}
.dashboard-window{
  margin-top:-18px;
  background:#f9fcff!important;
  box-shadow:0 24px 60px rgba(26,83,137,.20);
}
.dashboard-grid{
  background:linear-gradient(180deg,rgba(247,252,255,.98),rgba(255,253,247,.98))!important;
}
@media (max-width: 1100px){
  .page-shell::before{top:320px;background-size:cover;}
}
@media (max-width: 820px){
  body{background:linear-gradient(180deg,#dff5ff 0 245px,#eef9ff 245px 100%)!important;}
  .page-shell::before{
    top:230px;
    background-position:center top;
    background-size:auto 1120px;
    background-repeat:repeat-y;
  }
  .dashboard-window{margin-top:0;}
}


/* === v5.9 — leafy garden scene fills the hero/header background === */
.marketing-hero{
  background:
    linear-gradient(rgba(255,255,255,.04),rgba(255,255,255,.04)),
    url("assets/background/garden-header-bg.png") center center / cover no-repeat !important;
  overflow:hidden !important;
  border-radius:0 !important;
}
.marketing-hero:before,
.marketing-hero:after,
.hero-bg-shape{
  display:none !important;
}
.hero-brand-block,
.hero-art-block{
  position:relative;
  z-index:2;
}
.hero-signboard,
.cabinet-art{
  filter:drop-shadow(0 14px 14px rgba(25,74,110,.16));
}
.page-shell::before{
  top:390px !important;
}
.dashboard-window{
  margin-top:-18px !important;
}
@media (max-width:820px){
  .marketing-hero{
    background-position:center top !important;
    background-size:auto 100% !important;
  }
  .page-shell::before{
    top:300px !important;
  }
}


/* === v6.0 — full-width garden header, no blue side gaps === */
html{background:#dff5ff!important;}
body{background:#dff5ff!important;}
.page-shell{
  position:relative;
  max-width:none!important;
  margin:0!important;
  min-height:100vh;
  isolation:isolate;
  background:transparent!important;
}
.page-shell::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:500px;
  z-index:0;
  pointer-events:none;
  background:url("assets/background/sunny-school-garden-header.png") center top / cover no-repeat;
}
.marketing-hero,
.dashboard-window,
.toast,
.modal-backdrop{
  position:relative;
  z-index:1;
}
.marketing-hero{
  max-width:1370px!important;
  margin:0 auto!important;
  min-height:430px!important;
  padding:28px 42px 14px!important;
  background:transparent!important;
  border-radius:0!important;
  overflow:visible!important;
}
.marketing-hero:before,
.marketing-hero:after,
.hero-bg-shape{display:none!important;}
.hero-brand-block,.hero-art-block{position:relative;z-index:2;}
.hero-signboard{width:min(100%,760px)!important;}
.cabinet-art{width:min(100%,640px)!important;margin-left:auto!important;}
.hero-benefits{margin-top:-6px!important;}
.page-shell::before{
  top:392px!important;
  background:url("assets/background/tree-bg-below-hero.png") center top / cover no-repeat!important;
}
.dashboard-window{
  width:min(1370px,calc(100% - 56px))!important;
  margin:-8px auto 30px!important;
}
@media (min-width:1600px){
  .page-shell::after{height:520px;background-position:center top;}
}
@media (max-width:1280px){
  .page-shell::after{height:460px;background-position:center top;}
  .dashboard-window{width:min(1370px,calc(100% - 36px))!important;}
}
@media (max-width:900px){
  .page-shell::after{
    height:340px;
    background-position:64% top;
    background-size:cover;
  }
  .marketing-hero{
    min-height:285px!important;
    padding:18px 16px 8px!important;
  }
  .page-shell::before{
    top:250px!important;
    background-size:auto 1150px!important;
    background-repeat:repeat-y!important;
  }
  .dashboard-window{
    width:calc(100% - 16px)!important;
    margin:0 auto 20px!important;
  }
}

/* === v6.1 — connect hero to dashboard and remove 'Pilihan 4' chip === */
.choice-chip{display:none!important;}
.page-shell::after{
  height:460px!important;
  background-position:center 18%!important;
  background-size:cover!important;
}
.marketing-hero{
  min-height:390px!important;
  padding:28px 42px 0!important;
  align-items:end!important;
}
.hero-brand-block,
.hero-art-block{
  align-self:end!important;
}
.dashboard-window{
  margin:-34px auto 30px!important;
}
.page-shell::before{
  top:350px!important;
}
@media (min-width:1600px){
  .page-shell::after{height:475px!important;background-position:center 20%!important;}
}
@media (max-width:1280px){
  .page-shell::after{height:430px!important;background-position:center 22%!important;}
  .marketing-hero{min-height:370px!important;}
  .page-shell::before{top:334px!important;}
}
@media (max-width:900px){
  .page-shell::after{
    height:320px!important;
    background-position:62% 18%!important;
    background-size:cover!important;
  }
  .marketing-hero{
    min-height:270px!important;
    padding:16px 16px 0!important;
  }
  .dashboard-window{margin:-14px auto 20px!important;}
  .page-shell::before{top:230px!important;}
}

/* === v6.3 — lift signboard, readable benefits, new short slogan overlay === */
.page-shell::after{
  height:490px!important;
  background-position:center 10%!important;
  background-size:cover!important;
}
.marketing-hero{
  min-height:405px!important;
  padding:18px 42px 0!important;
  align-items:end!important;
}
.hero-brand-block{
  position:relative!important;
  align-self:start!important;
  transform:translateY(-18px)!important;
  z-index:3!important;
}
.hero-signboard{
  width:min(100%,790px)!important;
  position:relative;
  z-index:1;
}
.hero-tagline{
  position:absolute;
  left:50%;
  bottom:44px;
  transform:translateX(-50%);
  z-index:4;
  width:min(84%,700px);
  text-align:center;
  font-weight:1000;
  line-height:1.02;
  letter-spacing:.2px;
  color:#2367ff;
  font-size:clamp(24px,2.35vw,38px);
  -webkit-text-stroke:7px #fff;
  paint-order:stroke fill;
  text-shadow:0 4px 0 rgba(11,40,118,.15);
}
.hero-tagline::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:108%;
  height:118%;
  border-radius:999px;
  background:linear-gradient(180deg,#ffcc18 0%,#ff9d00 50%,#ff8400 100%);
  box-shadow:0 8px 18px rgba(255,146,0,.28);
  opacity:.98;
}
.hero-tagline br{display:block;}
.hero-benefits{
  margin-top:12px!important;
  display:grid;
  grid-template-columns:repeat(2,max-content);
  justify-content:center;
  gap:10px 22px;
  padding:10px 18px!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.88)!important;
  box-shadow:0 10px 24px rgba(19,77,128,.12)!important;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.hero-benefits span{padding:1px 0;}
.dashboard-window{margin:-28px auto 30px!important;}
.page-shell::before{top:360px!important;}
@media (max-width:1280px){
  .page-shell::after{height:452px!important;background-position:center 12%!important;}
  .marketing-hero{min-height:382px!important;}
  .hero-brand-block{transform:translateY(-10px)!important;}
  .hero-tagline{bottom:40px;width:min(86%,650px);font-size:clamp(22px,2.2vw,34px);}
  .page-shell::before{top:340px!important;}
}
@media (max-width:900px){
  .page-shell::after{height:350px!important;background-position:60% 12%!important;}
  .marketing-hero{min-height:292px!important;padding:10px 16px 0!important;}
  .hero-brand-block{transform:none!important;}
  .hero-signboard{width:min(100%,720px)!important;}
  .hero-tagline{bottom:30px;width:min(88%,520px);font-size:clamp(18px,4.2vw,28px);-webkit-text-stroke:4px #fff;}
  .hero-tagline::before{width:112%;height:122%;}
  .hero-benefits{margin-top:10px!important;padding:8px 12px!important;font-size:11px!important;grid-template-columns:1fr 1fr!important;width:min(100%,520px);}
  .dashboard-window{margin:0 auto 20px!important;}
  .page-shell::before{top:255px!important;}
}
@media (max-width:520px){
  .hero-tagline{bottom:24px;font-size:16px;-webkit-text-stroke:3px #fff;}
  .hero-benefits{grid-template-columns:1fr!important;row-gap:6px!important;}
}


/* v6.4: remove temporary overlay tagline; use updated signboard artwork instead */
.hero-tagline{display:none!important;}


/* v6.5 search hero poster replacement */
.search-hero{min-height:auto;display:block;background:#fff;padding:0;overflow:hidden}
.search-hero:before{display:none}
.search-hero-poster{display:block;width:100%;height:auto;border-radius:20px}
@media (max-width:820px){.search-hero{min-height:auto}.search-hero-poster{width:100%;height:auto}}
@media (max-width:520px){.search-hero{min-height:auto}.search-hero-poster{width:100%;height:auto}}

/* === v6.7 — functional search field over the poster artwork === */
.search-hero{position:relative!important;}
.poster-search-live{
  position:absolute;
  z-index:5;
  left:4.3%;
  top:64.1%;
  width:50.8%;
  height:15.2%;
  display:grid;
  grid-template-columns:minmax(0,1fr) 24.5%;
  align-items:stretch;
  gap:1.2%;
  pointer-events:auto;
}
.poster-search-input{
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 18px;
  background:#fff;
  border:2px solid #d8e9fb;
  border-radius:999px 22px 22px 999px;
  box-shadow:0 3px 9px rgba(24,78,130,.08);
}
.poster-search-input svg,
.poster-search-button svg{
  flex:0 0 auto;
  width:30px;
  height:30px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.1;
}
.poster-search-input svg{color:#5e7cad;}
.poster-search-input input{
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:#fff;
  color:#183e77;
  font-size:clamp(14px,1.3vw,23px);
  font-weight:700;
  line-height:1;
}
.poster-search-input input::placeholder{color:#748caf;opacity:1;}
.poster-search-button{
  border:0;
  border-radius:22px;
  color:#fff;
  background:linear-gradient(180deg,#168dff,#0878ef);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight:900;
  font-size:clamp(15px,1.35vw,24px);
  box-shadow:0 6px 14px rgba(8,120,239,.24);
}
.poster-search-button:hover{filter:brightness(1.04);transform:translateY(-1px);}
.poster-search-button:active{transform:translateY(0);}
.poster-search-input:focus-within{border-color:#2c8fff;box-shadow:0 0 0 4px rgba(44,143,255,.15);}
@media (max-width:820px){
  .poster-search-live{left:4.5%;top:63.8%;width:51%;height:15.8%;}
  .poster-search-input{gap:7px;padding:0 10px;border-radius:999px 14px 14px 999px;}
  .poster-search-input svg,.poster-search-button svg{width:20px;height:20px;}
  .poster-search-button{gap:5px;border-radius:14px;}
}
@media (max-width:520px){
  .poster-search-live{left:4.6%;top:63.6%;width:51.2%;height:16%;grid-template-columns:minmax(0,1fr) 27%;}
  .poster-search-input{padding:0 7px;gap:5px;}
  .poster-search-input input{font-size:10px;}
  .poster-search-input svg,.poster-search-button svg{width:16px;height:16px;}
  .poster-search-button{font-size:11px;gap:3px;}
}

/* === v6.8 — clean poster fit + one real functional search only === */
.search-hero{
  position:relative!important;
  display:block!important;
  width:100%!important;
  aspect-ratio:8 / 3!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  border-radius:15px!important;
  background:transparent!important;
  line-height:0!important;
}
.search-hero:before{display:none!important;}
.search-hero-poster{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  display:block!important;
  border-radius:inherit!important;
  margin:0!important;
  padding:0!important;
}
.poster-search-live{
  position:absolute!important;
  z-index:10!important;
  left:4.2%!important;
  top:67.0%!important;
  width:50.6%!important;
  height:14.2%!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 23%!important;
  gap:1.3%!important;
  align-items:stretch!important;
  pointer-events:auto!important;
}
.poster-search-input{
  min-width:0!important;
  height:100%!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:0 18px!important;
  background:#fff!important;
  border:2px solid #d7e8f8!important;
  border-radius:999px!important;
  box-shadow:0 4px 14px rgba(29,84,137,.12)!important;
  overflow:hidden!important;
}
.poster-search-input input{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  height:100%!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  color:#183e77!important;
  font-size:clamp(13px,1.35vw,21px)!important;
  font-weight:700!important;
  line-height:normal!important;
  padding:0!important;
}
.poster-search-input svg{
  width:26px!important;
  height:26px!important;
  flex:0 0 auto!important;
}
.poster-search-button{
  height:100%!important;
  border:0!important;
  border-radius:999px!important;
  color:#fff!important;
  background:linear-gradient(180deg,#168dff,#0878ef)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  font-weight:900!important;
  font-size:clamp(14px,1.3vw,21px)!important;
  box-shadow:0 5px 13px rgba(8,120,239,.24)!important;
  padding:0 14px!important;
}
.poster-search-button svg{width:25px!important;height:25px!important;}
@media (max-width:820px){
  .search-hero{aspect-ratio:8/3!important;border-radius:12px!important;}
  .poster-search-live{left:4%!important;top:67%!important;width:55%!important;height:15%!important;grid-template-columns:minmax(0,1fr) 28%!important;}
  .poster-search-input{padding:0 10px!important;gap:6px!important;}
  .poster-search-input svg,.poster-search-button svg{width:20px!important;height:20px!important;}
  .poster-search-button span{font-size:12px!important;}
}
@media (max-width:520px){
  .poster-search-live{left:3.8%!important;top:66.5%!important;width:59%!important;height:15.5%!important;}
  .poster-search-input input{font-size:10px!important;}
  .poster-search-button{padding:0 8px!important;gap:4px!important;}
  .poster-search-button span{font-size:10px!important;}
}


/* === v6.9 — smaller, cleaner search wording === */
.poster-search-input input{
  font-size:clamp(11px,1.02vw,16px)!important;
  font-weight:700!important;
  letter-spacing:0!important;
}
.poster-search-input input::placeholder{
  font-size:clamp(11px,1.02vw,16px)!important;
  color:#748caf!important;
  opacity:1!important;
  white-space:nowrap!important;
}
@media (max-width:820px){
  .poster-search-input input,
  .poster-search-input input::placeholder{
    font-size:clamp(9px,2.1vw,12px)!important;
  }
}
@media (max-width:520px){
  .poster-search-input input,
  .poster-search-input input::placeholder{
    font-size:9px!important;
  }
}


/* === v7.0 — enlarge laptop + phone showcase === */
.trust-row{
  min-height:135px!important;
}
.trust-row img{
  width:430px!important;
  max-height:225px!important;
  right:-8px!important;
  bottom:-18px!important;
}
@media (min-width:1280px){
  .trust-row img{
    width:455px!important;
    max-height:235px!important;
  }
}


/* === v7.1 — naikkan papan tanda hero supaya rapat ke atas, tiada gap === */
.marketing-hero{padding-top:0!important;}
.hero-brand-block{transform:translateY(-42px)!important;}
.hero-benefits{margin-top:4px!important;}
@media (max-width:1280px){
  .marketing-hero{padding-top:0!important;}
  .hero-brand-block{transform:translateY(-34px)!important;}
}
@media (max-width:900px){
  .marketing-hero{padding-top:0!important;}
  .hero-brand-block{transform:translateY(-12px)!important;}
  .hero-benefits{margin-top:8px!important;}
}


/* === v7.2 — turunkan sedikit papan tanda + redesign 4 langkah === */
/* Header: beri ruang tali tergantung nampak semula */
.marketing-hero{padding-top:10px!important;}
.hero-brand-block{transform:translateY(-18px)!important;}
@media (max-width:1280px){
  .marketing-hero{padding-top:8px!important;}
  .hero-brand-block{transform:translateY(-14px)!important;}
}
@media (max-width:900px){
  .hero-brand-block{transform:translateY(-4px)!important;}
}

/* Bahagian 4 langkah — lebih hampir dengan poster rujukan */
.buy-steps{
  position:relative!important;
  margin:0 15px 15px!important;
  padding:12px 16px 14px!important;
  border-radius:20px!important;
  border:1px solid #f1dda1!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 93% 88%,rgba(255,220,86,.32),transparent 24%),
    linear-gradient(180deg,#fffef9 0%,#fff 58%,#fff7d5 100%)!important;
  box-shadow:0 8px 22px rgba(29,77,121,.08)!important;
}
.bottom-title{margin-bottom:10px!important;}
.bottom-title h2{font-size:18px!important;font-weight:900!important;color:#173d78!important;}
.bottom-title .title-icon{color:#ffad00!important;}

.steps-grid{
  width:72%!important;
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  gap:14px!important;
  position:relative!important;
}
.step-card{
  min-height:132px!important;
  border-radius:22px!important;
  padding:18px 12px 12px!important;
  border:1px solid rgba(255,255,255,.95)!important;
  box-shadow:0 8px 18px rgba(25,77,124,.07)!important;
  grid-template-rows:42px auto auto!important;
  transition:.16s ease!important;
}
.step-card:hover{transform:translateY(-2px)!important;box-shadow:0 12px 24px rgba(25,77,124,.11)!important;}
.step-no{
  left:9px!important;top:9px!important;
  width:36px!important;height:36px!important;
  font-size:16px!important;
  box-shadow:0 3px 8px rgba(0,0,0,.10)!important;
}
.step-symbol{font-size:38px!important;line-height:1!important;}
.step-card strong{font-size:14px!important;font-weight:900!important;color:#163d78!important;}
.step-card small{font-size:11px!important;line-height:1.25!important;max-width:145px!important;color:#244c7f!important;}
.step-blue{background:linear-gradient(180deg,#eaf7ff,#dff1ff)!important;}
.step-orange{background:linear-gradient(180deg,#fff4e5,#ffecd2)!important;}
.step-green{background:linear-gradient(180deg,#e9fbf5,#dcf6ed)!important;}
.step-purple{background:linear-gradient(180deg,#f4ecff,#eadfff)!important;}

/* anak panah antara kad */
.step-card:not(:last-child)::after{
  content:'→';
  position:absolute;
  right:-18px;
  top:50%;
  transform:translateY(-50%);
  color:#0f55b9;
  font-size:28px;
  font-weight:1000;
  z-index:3;
  pointer-events:none;
}

.trust-row{
  margin-top:14px!important;
  min-height:112px!important;
  display:grid!important;
  grid-template-columns:1fr 1fr 1.15fr 2.2fr!important;
  gap:16px!important;
  align-items:center!important;
  padding:10px 0 4px!important;
  border-top:1px solid rgba(212,225,239,.72)!important;
}
.trust-row>div{gap:10px!important;}
.trust-row>div>span{
  width:42px!important;height:42px!important;
  border-radius:12px!important;
  display:grid!important;place-items:center!important;
  font-size:25px!important;
  color:white!important;
  box-shadow:0 5px 12px rgba(25,78,128,.12)!important;
  flex:0 0 auto!important;
}
.trust-row>div:nth-child(1)>span{background:linear-gradient(135deg,#22a2ff,#0b75e5)!important;}
.trust-row>div:nth-child(2)>span{background:linear-gradient(135deg,#9b4cf4,#6c2fd7)!important;}
.trust-row>div:nth-child(3)>span{background:linear-gradient(135deg,#20c783,#079c63)!important;}
.trust-row strong{font-size:13px!important;font-weight:900!important;color:#173d78!important;}
.trust-row small{font-size:10.5px!important;line-height:1.25!important;color:#617997!important;}
.trust-row img{
  width:430px!important;
  max-height:215px!important;
  right:-8px!important;
  bottom:-10px!important;
  object-fit:contain!important;
}

@media (min-width:1280px){
  .trust-row img{width:455px!important;max-height:225px!important;}
}
@media (max-width:1150px){
  .steps-grid{width:100%!important;gap:12px!important;}
  .step-card:not(:last-child)::after{display:none!important;}
  .trust-row{grid-template-columns:1fr 1fr 1.2fr!important;}
  .trust-row img{display:none!important;}
}
@media (max-width:820px){
  .buy-steps{margin:0 8px 10px!important;padding:10px!important;}
  .steps-grid{grid-template-columns:repeat(2,1fr)!important;gap:10px!important;}
  .step-card{min-height:116px!important;border-radius:16px!important;}
  .trust-row{grid-template-columns:1fr!important;gap:8px!important;}
}
@media (max-width:520px){
  .steps-grid{grid-template-columns:1fr!important;}
}


/* === v7.3 — tiny upward adjustment only === */
.hero-brand-block{
  transform:translateY(-24px)!important;
}
@media (max-width:1280px){
  .hero-brand-block{
    transform:translateY(-18px)!important;
  }
}
@media (max-width:900px){
  .hero-brand-block{
    transform:translateY(-8px)!important;
  }
}

/* v8.0 buyer reads products published by Admin v1 from localStorage */

/* v9.7 compact product detail */
.product-detail-compact{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:24px;
  align-items:start;
}
.product-detail-cover-wrap{
  position:relative;
  padding:10px;
  border:1px solid #e0e8f3;
  border-radius:18px;
  background:linear-gradient(145deg,#fff,#f5f9ff);
  box-shadow:0 12px 28px rgba(29,78,142,.10);
}
.product-detail-cover{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
  border-radius:14px;
}
.detail-popular{
  position:absolute;
  top:18px;left:18px;
  background:linear-gradient(135deg,#ff8a00,#ffb72b);
  color:#fff;
  font-weight:800;
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  box-shadow:0 6px 18px rgba(255,153,0,.25);
}
.product-detail-copy h2{
  margin:10px 0 8px;
  color:#123e75;
  font-size:26px;
  line-height:1.15;
}
.detail-chips{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.detail-chips span{
  background:#eef5ff;
  border:1px solid #d8e7fb;
  color:#1f5f9d;
  border-radius:999px;
  padding:6px 9px;
  font-size:12px;
  font-weight:700;
}
.detail-description{
  color:#60758e;
  line-height:1.6;
  margin:0 0 14px;
}
.detail-price{
  font-size:27px;
  font-weight:900;
  color:#0b4c8c;
  margin:8px 0 14px;
}
.detail-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.detail-actions button{min-width:145px}
.detail-note{
  display:block;
  margin-top:12px;
  color:#7b8da2;
}
@media(max-width:680px){
  .product-detail-compact{grid-template-columns:1fr}
  .product-detail-cover-wrap{max-width:260px;margin:auto}
  .product-detail-copy h2{font-size:22px}
  .detail-actions{flex-direction:column}
  .detail-actions button{width:100%}
}

/* v9.8 clickable product cover/title */
.product-open-target{cursor:pointer}
.product-title-open{
  transition:color .18s ease,transform .18s ease;
}
.product-title-open:hover{
  color:#6d36d9;
}
.product-image.product-open-target{
  transition:transform .18s ease,filter .18s ease;
}
.product-image.product-open-target:hover{
  transform:translateY(-2px) scale(1.015);
  filter:saturate(1.05);
}


/* === v9.9 Product Detail Modal Fix ===
   A later marketing selector accidentally changed .modal-backdrop from fixed to relative.
   Force all buyer modals back to a true viewport overlay.
*/
.modal-backdrop{
  position:fixed!important;
  inset:0!important;
  z-index:5000!important;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(9,31,61,.58)!important;
  backdrop-filter:blur(4px);
}
.modal-backdrop.hidden{
  display:none!important;
}
.modal{
  position:relative!important;
  z-index:5001!important;
  width:min(680px,calc(100vw - 32px))!important;
  max-height:min(88vh,820px)!important;
  overflow:auto!important;
  background:#fff!important;
  border:1px solid rgba(197,213,235,.78);
  box-shadow:0 28px 90px rgba(7,27,60,.30)!important;
}

/* Cover itself is clickable too */
.product-cover-image{
  cursor:pointer;
}

/* v10.0 two-page product preview */
.preview-viewer{display:flex;flex-direction:column;gap:14px}
.preview-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.preview-head small{color:#7b8da2;font-weight:700}
.preview-head h2{margin:4px 0 0;color:#123e75;font-size:22px}
.preview-count{background:#eef5ff;border:1px solid #d8e7fb;color:#1f5f9d;padding:7px 10px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap}
.preview-stage{background:linear-gradient(145deg,#f7fbff,#eef4fb);border:1px solid #dbe6f2;border-radius:16px;min-height:300px;max-height:62vh;display:flex;align-items:center;justify-content:center;overflow:auto;padding:12px}
.preview-stage img{max-width:100%;height:auto;display:block;border-radius:10px;box-shadow:0 12px 28px rgba(23,60,105,.14)}
.preview-nav{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.preview-nav button:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:680px){.preview-head{flex-direction:column}.preview-stage{max-height:58vh}.preview-nav{flex-direction:column}.preview-nav button{width:100%}}

/* v10.2 preview watermark protection */
.preview-protected{
  position:relative;
  isolation:isolate;
}
.preview-protected img{
  position:relative;
  z-index:1;
}
.preview-watermark-layer{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.11;
  mix-blend-mode:multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='180' viewBox='0 0 280 180'%3E%3Cg transform='rotate(-24 140 90)' fill='%236b36d9'%3E%3Ctext x='18' y='78' font-family='Arial,sans-serif' font-size='24' font-weight='700'%3EAlmari Cikgu%3C/text%3E%3Ctext x='18' y='108' font-family='Arial,sans-serif' font-size='17' font-weight='600'%3EPreview Sahaja%3C/text%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat;
  background-size:250px 160px;
}
@media(max-width:680px){
  .preview-watermark-layer{
    background-size:210px 140px;
    opacity:.12;
  }
}

/* v10.3 live checkout + pending order record */
.checkout-live-head h2{margin:8px 0 5px;color:#123e75}
.checkout-live-head p{margin:0 0 18px;color:#6a7d92}
.checkout-secure{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 10px;border-radius:999px;
  background:#edf9f1;border:1px solid #cfeeda;
  color:#237347;font-size:12px;font-weight:800
}
.order-success{text-align:center;padding:6px 4px}
.order-success-icon{
  width:62px;height:62px;border-radius:50%;margin:0 auto 12px;
  display:grid;place-items:center;font-size:30px;font-weight:900;color:#fff;
  background:linear-gradient(145deg,#50d793,#1ea864);
  box-shadow:0 12px 26px rgba(30,168,100,.24),inset 0 2px 0 rgba(255,255,255,.45)
}
.order-success h2{color:#123e75;margin:10px 0 8px}
.order-success p{color:#667b92;line-height:1.55}
.order-success-total{
  margin:18px auto;padding:14px 16px;max-width:360px;
  display:flex;justify-content:space-between;align-items:center;
  border:1px solid #dce7f3;border-radius:14px;background:#f8fbff;color:#34597d
}
.order-success-total strong{font-size:21px;color:#0b4c8c}

/* v10.5 Payment Status + Secure Download */
.payment-status-flow{text-align:center;padding:4px}
.payment-status-icon{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 10px;font-size:30px;font-weight:900;color:#fff;box-shadow:0 14px 28px rgba(25,64,110,.18),inset 0 2px 0 rgba(255,255,255,.45)}
.payment-status-icon.pending{background:linear-gradient(145deg,#ffca58,#f29b18)}
.payment-status-icon.paid{background:linear-gradient(145deg,#4ed78d,#1fa464)}
.payment-status-icon.cancelled{background:linear-gradient(145deg,#ff7a89,#d84859)}
.payment-status-pill{display:inline-flex;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:900;border:1px solid transparent}
.payment-status-pill.pending{background:#fff5db;color:#946200;border-color:#f2d78b}
.payment-status-pill.paid{background:#eaf9f0;color:#176f48;border-color:#bfe5d0}
.payment-status-pill.cancelled{background:#fff0f1;color:#ae3c49;border-color:#efc7cc}
.payment-status-flow h2{margin:9px 0 5px;color:#123e75}.payment-status-sub{margin:0 0 14px;color:#6f8196}
.payment-status-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:left;margin:14px 0}
.payment-status-summary>div{background:#f8fbff;border:1px solid #dfe8f2;border-radius:13px;padding:12px;display:flex;flex-direction:column;gap:4px}
.payment-status-summary span{font-size:11px;color:#7d8da1;font-weight:700}.payment-status-summary strong{color:#234b78;word-break:break-word}
.payment-status-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}.payment-status-area{margin-top:12px}
.success-note,.danger-note{border-radius:12px;padding:11px 12px;text-align:left;font-size:13px;line-height:1.45}
.success-note{background:#eaf9f0;border:1px solid #bee7d0;color:#176d47}.danger-note{background:#fff0f1;border:1px solid #efc7cc;color:#a63745}
.download-list{display:grid;gap:8px;text-align:left}.download-item{display:flex;align-items:center;gap:10px;text-decoration:none;border:1px solid #dce8f4;border-radius:13px;padding:11px 12px;background:#f8fbff}
.download-item>span{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#e8f3ff;color:#1673d1;font-weight:900}
.download-item div{display:flex;flex-direction:column;gap:2px}.download-item strong{color:#1b4d80}.download-item small{color:#7b8ca1}
@media(max-width:680px){.payment-status-summary{grid-template-columns:1fr}.payment-status-actions{flex-direction:column}.payment-status-actions button{width:100%}}

/* v10.6 Buyer Purchase History / Magic Link */
.buyer-access h2{margin:10px 0 5px;color:#123e75}
.buyer-access>p{color:#6f8196;line-height:1.55}
.purchase-history-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.purchase-history-head h2{margin:8px 0 0;color:#123e75}
.purchase-history-email{margin:5px 0 14px;color:#6f8196;font-size:13px}
.purchase-history-list{display:grid;gap:10px}
.purchase-history-card{border:1px solid #dce7f3;border-radius:14px;padding:13px;background:linear-gradient(145deg,#fff,#f8fbff);box-shadow:0 7px 18px rgba(27,66,110,.06)}
.purchase-history-top,.purchase-history-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px}
.purchase-history-top>div{display:flex;flex-direction:column;gap:2px}
.purchase-history-top strong{color:#244f7c}.purchase-history-top small{color:#8493a6}
.purchase-history-card p{margin:10px 0;color:#5e748c;line-height:1.45}
.purchase-history-bottom>strong{font-size:18px;color:#0d4c8b}
.purchase-status{display:inline-flex;padding:6px 9px;border-radius:999px;font-size:10px;font-weight:900;border:1px solid transparent;white-space:nowrap}
.purchase-status.paid{background:#eaf9f0;color:#176f48;border-color:#bfe5d0}
.purchase-status.pending{background:#fff5db;color:#946200;border-color:#f2d78b}
.purchase-status.cancelled{background:#fff0f1;color:#ae3c49;border-color:#efc7cc}
.small-purchase-btn{padding:8px 11px!important;min-width:auto!important}
@media(max-width:680px){
  .purchase-history-head{flex-direction:column}
  .purchase-history-head button{width:100%}
  .purchase-history-top,.purchase-history-bottom{align-items:flex-start}
}

/* v10.9 magic-link status feedback */
.magic-link-status{
  min-height:18px;
  margin-top:10px;
  font-size:12px;
  font-weight:700;
}
.magic-link-status.sending{color:#1769aa}
.magic-link-status.error{
  color:#a63745;
  background:#fff0f1;
  border:1px solid #efc7cc;
  border-radius:10px;
  padding:8px 10px;
}