/* QR Lotto Peek 3.0 — refined navy, gold, accessible visual hierarchy */
:root{--bg:#f7f8fa;--ink:#14233a;--muted:#6c7687;--purple:#c29a4b;--purple-hover:#a87c28;--soft:#f9f4e8;--line:#e4e7ec;--shadow:0 12px 38px rgba(18,32,54,.065)}
html{scroll-padding-top:1.5rem}body{font-family:'Noto Sans Thai','Plus Jakarta Sans',Tahoma,Arial,sans-serif;font-size:15px;line-height:1.75;color:var(--ink);background:radial-gradient(ellipse 100% 420px at 50% 0,#faf4e9 0,transparent 78%),#f7f8fa}
button,input,select,textarea{font:inherit}body button{font-weight:700}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #cba45f;outline-offset:3px}
.container{width:min(1260px,calc(100% - 44px))}.topbar{min-height:95px;height:auto;padding-block:15px}.brand{gap:12px;font-size:23px;letter-spacing:-.7px;color:#15233a}.brand-accent{color:#b38a3c}.brand-mark{width:51px;height:51px;display:grid;place-items:center;background:linear-gradient(135deg,#11213c,#182e4d);border-radius:16px;box-shadow:0 7px 22px #1d2a4480;overflow:hidden;flex:0 0 51px}.brand-mark img{display:block;width:48px;height:48px;object-fit:contain}.brand small{font-size:9px;letter-spacing:2px;font-weight:750;color:#8b774f;margin-top:7px}.header-nav{color:#42516a}.header-nav a:hover{color:#aa812d}.header-nav a:after{background:#c3a05a}.header-cta{background:#13233e;color:#fff;border:1px solid #32415b;border-radius:12px;font-weight:700}.header-cta:hover{background:#213857}.language-select{border-color:#d7dce4;background:#fff}.free-badge{color:#866321;background:#fbf5e6;border:1px solid #e9d8b0}
.hero{background:radial-gradient(ellipse 520px 350px at 82% 8%,#51452a70 0,transparent 72%),radial-gradient(ellipse 430px 430px at 110% 120%,#2b436859 0,transparent 75%),linear-gradient(110deg,#0e1b32 0,#1c2e4c 75%,#17243a 100%);box-shadow:0 30px 65px #15253b27;border:1px solid #756b544d;border-radius:28px;min-height:337px}.hero:before{opacity:.23;background-image:radial-gradient(#d8bb7b 0.8px,transparent 0.8px)}.hero:after{border-color:#cdb67b24}.eyebrow{color:#f1dfb9;border-color:#b9a16a55;background:#c9a7671a}.pulse{background:#e0bd78;box-shadow:0 0 0 3px #b28c4130}.hero h1{font-size:clamp(35px,3.8vw,54px);font-weight:800;letter-spacing:-1.3px;line-height:1.32}.hero h1 em{background:linear-gradient(90deg,#f6e3ac,#caa660);background-clip:text}.hero p{font-size:15px;line-height:1.95;color:#d1d8e7;max-width:670px}.hero-points{font-size:12.5px;color:#e2e9f1;flex-wrap:wrap}.hero-decor-chip{color:#28405b}.hero-decor-chip span{color:#bb8b37}.floating-code{border:4px solid #d5bd7e}.hero .qr-illusion{filter:grayscale(1) sepia(.3)}
.workspace-topline{margin-top:8px}.workspace-heading strong{font-size:16px}.workspace-heading small{font-size:12px}.workspace-heading .workspace-symbol{background:#fbf4e6;color:#ad8736}.tabs{border:1px solid #e7e3da;box-shadow:0 6px 23px #142b4612;padding:7px}.tab{font-size:13px;font-weight:750}.tab.active{background:linear-gradient(120deg,#1b2c49,#263b59);color:#f7e4b5;box-shadow:0 4px 14px #14283c2d}.tab:hover:not(.active){background:#faf5ea;color:#8d6a2e}
.panel-card{border:1px solid #e2e6ec;box-shadow:0 10px 32px #2030470d;border-radius:21px}.section-heading h2{font-size:19px}.mini-label{color:#9b7d45;letter-spacing:1.3px}.category-button{min-height:85px;border-color:#e6e9ef;background:#fff;color:#273a52;font-size:12px}.category-button.active{background:#fffaf0;border-color:#cda866;box-shadow:0 0 0 1px #d6ba83 inset}.category-button:hover{border-color:#be994f}.count-pill{background:#faf2e1;color:#937139}.field{font-size:13px}.field input,.field select,.field textarea{font-size:14px;min-height:46px;border:1px solid #dfe5ed;background:#fff}.field input:focus,.field select:focus,.field textarea:focus{border-color:#c5a15e;box-shadow:0 0 0 3px #e7d7b169}.search-box{background:#fcfcfd}.search-box:focus-within{border-color:#c4a365;box-shadow:0 0 0 3px #eddfc1}.logo-box{background:#fffcf6;border:1px dashed #dfcda7}.upload-button{background:#faf3e4;color:#805e28;border:1px solid #d8c08d}.upload-button:hover{background:#f1e7d2}.download-btn.primary,.big-primary{background:linear-gradient(110deg,#b98c38,#d8b978);border-color:#bc9958;color:#18263b;box-shadow:0 8px 20px #9e7f4238}.download-btn.primary:hover,.big-primary:hover{background:linear-gradient(110deg,#a67b31,#c9a35c)}.download-btn{min-height:45px;font-size:13px;font-weight:700}.action-button{font-size:12px}.preview-card{border:1px solid #dfd8c7}.preview-surface{background:radial-gradient(circle,#ffffff 0%,#fefbf5 65%,#f8f4eb 100%)}.preview-surface:after{color:#a68a54}.status-pill{color:#257254}.feature-icon{background:#f9f1df}.feature-card h3{font-size:15px}.feature-card p,.faq-list p{font-size:13px;color:#6c7788}.faq-list summary{font-size:14px}.faq-list summary:after{color:#ac8130}.footer{font-size:12px}.footer-brand strong{color:#a47b35}.toast{background:#132743;color:#fff}
.breadcrumbs{display:flex;gap:11px;align-items:center;margin:10px auto 15px;font-size:12px;color:#6c7688}.breadcrumbs a{color:#946c31}.breadcrumbs span:last-child{font-weight:650}
.seo-guide,.seo-directory{margin-top:65px}.seo-guide-head,.directory-heading{max-width:810px;margin-bottom:23px}.seo-guide-head h2,.directory-heading h2{font-size:clamp(23px,2.8vw,31px);line-height:1.4;margin:5px 0 12px}.seo-guide-head p,.directory-heading p{color:#58677c;font-size:15px;line-height:1.95}.guide-layout{display:grid;grid-template-columns:1.45fr 1fr;gap:20px}.guide-steps{display:grid;gap:12px}.guide-step{display:flex;align-items:flex-start;gap:20px;background:#fff;border:1px solid #e6e8ed;border-radius:15px;padding:17px 20px}.guide-step>span{color:#9e782e;border:1px solid #e5d1a9;background:#faf3e4;font-size:14px;font-weight:850;padding:5px 9px;border-radius:9px}.guide-step p{margin:0;color:#3c4e65;font-size:14px}.guide-tip{padding:28px;border-radius:17px;color:#fff;background:linear-gradient(140deg,#152742,#263c5c);align-self:stretch;border:1px solid #dec48b33}.guide-tip strong{color:#f0d7a2;font-size:17px}.guide-tip p{color:#e0e6ef;font-size:14px;margin-top:13px}.seo-directory{padding:43px 35px;background:#fff;border:1px solid #e6e8eb;box-shadow:0 10px 30px #112b4410;border-radius:22px}.directory-heading{margin-bottom:20px}.seo-link-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px}.seo-link{display:flex;align-items:center;gap:10px;border:1px solid #e6e5e2;border-radius:12px;padding:14px 12px;color:#263854;min-height:70px;background:#fff;font-size:12px;transition:.18s}.seo-link:hover{background:#faf4e8;border-color:#cfb881;transform:translateY(-1px)}.seo-link strong{font-weight:750;flex:1}.seo-link-icon{color:#bd9751;font-size:14px}
.policy-page{max-width:880px;padding:45px 0 75px}.policy-page .panel-card{padding:36px}.policy-page h1{font-size:32px;margin-top:12px}.policy-page h2{font-size:19px;margin-top:26px}.policy-page p{font-size:15px;color:#4c5d70}
@media(max-width:1050px){.seo-link-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:790px){.container{width:min(100% - 28px,680px)}.brand{font-size:19px}.brand small{font-size:7px}.hero{padding:33px 27px}.hero p{font-size:13px}.seo-guide,.seo-directory{margin-top:42px}.guide-layout{grid-template-columns:1fr}.seo-directory{padding:24px}.seo-link-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:440px){.container{width:calc(100% - 22px)}.brand-mark{width:41px;height:41px;flex:0 0 41px;border-radius:12px}.brand-mark img{width:39px;height:39px}.brand{font-size:16px}.brand small{font-size:6px;letter-spacing:1.15px}.hero{padding:28px 22px}.hero h1{font-size:31px}.seo-link-grid{grid-template-columns:1fr 1fr}.seo-link{min-height:74px;font-size:11px;padding:11px 9px}.seo-link-icon{font-size:12px}.policy-page .panel-card{padding:21px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
@media print{.seo-guide,.seo-directory{display:none!important}}