/* ===========================================================
   E-Book Digital Library — warm "paper" theme
   =========================================================== */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
    font-family:Anuphan,system-ui,sans-serif;
    background:#eef1d6;
    color:#242a16;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
input::placeholder{color:#9ba67d;}
::selection{background:#5f8a2a;color:#f9fce9;}
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-thumb{background:#cdda9f;border-radius:6px;border:3px solid #eef1d6;}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

.serif{font-family:Anuphan;}
.page{max-width:1220px;min-height: 720px; margin:0 auto;padding:0 clamp(16px,4vw,40px);}

/* ---------- header ---------- */
.site-header{
    position:sticky;top:0;z-index:50;
    background:rgba(251,247,238,.92);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid #d9e2b3;
}
.header-inner{
    max-width:1220px;margin:0 auto;
    padding:13px clamp(16px,4vw,40px);
    display:flex;align-items:center;gap:clamp(10px,2vw,26px);flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto;}
.brand-img{height:70px;width:auto;display:block;}
@media(max-width:600px){.brand-img{height:34px;}}
.brand-logo{
    width:42px;height:42px;border-radius:9px;
    background:linear-gradient(150deg,#7aa63a,#456420);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 3px 10px rgba(124,70,38,.4);
}
.brand-logo span{font-family:Anuphan;color:#f9fce9;font-size:23px;font-weight:600;line-height:1;}
.brand-text{line-height:1.15;}
.brand-name{font-family:Anuphan;font-size:17px;font-weight:600;color:#242a16;white-space:nowrap;}
.brand-sub{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#9aa676;}

.header-search{
    flex:1 1 260px;display:flex;align-items:center;gap:8px;
    background:#fcfef2;border:1px solid #d9e2b3;border-radius:11px;
    padding:8px 13px;min-width:190px;
}
.header-search .search-ico{color:#9aa676;font-size:17px;line-height:1;}
.header-search input{
    border:none;outline:none;background:transparent;flex:1;
    font-family:Anuphan,sans-serif;font-size:14px;color:#242a16;min-width:0;
}
.header-search button{
    border:none;background:#5f8a2a;color:#f9fce9;
    font-family:Anuphan,sans-serif;font-size:13px;font-weight:600;
    padding:7px 15px;border-radius:8px;cursor:pointer;white-space:nowrap;
}
.header-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto;flex-wrap:wrap;}
.lang-toggle{display:flex;border:1px solid #d9e2b3;border-radius:9px;overflow:hidden;background:#fcfef2;}
.member-badge{
    display:flex;align-items:center;gap:6px;background:#e8f1d4;color:#43661d;
    font-size:13px;font-weight:600;padding:8px 13px;border-radius:9px;white-space:nowrap;
}
.member-badge .dot{font-size:9px;}
.btn-ghost{
    border:1px solid #c5d38f;background:transparent;color:#456420;
    font-size:13px;font-weight:600;padding:8px 14px;border-radius:9px;
    cursor:pointer;white-space:nowrap;text-decoration:none;
}
.btn-solid{
    border:none;background:#5f8a2a;color:#f9fce9;
    font-size:13px;font-weight:600;padding:8px 14px;border-radius:9px;
    cursor:pointer;white-space:nowrap;text-decoration:none;
    box-shadow:0 2px 8px rgba(154,91,52,.3);
}
/* header items: text on desktop, icon-only on mobile */
.hdr-ico{display:none;font-size:15px;line-height:1;}
@media(max-width:600px){
    .header-actions .hdr-label,
    .member-badge .dot{display:none;}
    .header-actions .hdr-ico{display:inline-flex;align-items:center;}
    .member-badge,
    .header-actions .btn-ghost{padding:8px 10px;}
    .header-actions{gap:7px;}
}

/* ---------- flash ---------- */
.flash{margin:16px 0 0;padding:12px 16px;border-radius:11px;font-size:14px;font-weight:500;}
.flash-success{background:#e8f1d4;color:#43661d;border:1px solid #cbe0a4;}
.flash-danger{background:#f6e3df;color:#8a3b2c;border:1px solid #e6c3bb;}

/* ---------- hero ---------- */
.hero{display:flex;gap:clamp(28px,4vw,60px);flex-wrap:wrap;align-items:center;
    padding:clamp(34px,5vw,68px) 0 clamp(20px,3vw,36px);}
.hero-left{flex:1 1 380px;min-width:288px;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:#efe9ad;color:#456420;
    font-size:12px;font-weight:600;letter-spacing:.04em;padding:6px 13px;border-radius:20px;}
.hero h1{font-family:Anuphan;font-size:clamp(31px,4.4vw,54px);line-height:1.16;
    color:#1a220d;font-weight:600;margin:16px 0 18px;}
.hero-sub{font-size:clamp(15px,1.4vw,18px);color:#5e6a3f;line-height:1.7;max-width:520px;margin:0;}
.hero-search{margin-top:28px;display:flex;gap:10px;flex-wrap:wrap;max-width:560px;}
.hero-search .box{flex:1 1 300px;display:flex;align-items:center;gap:9px;background:#fcfef2;
    border:1px solid #d9e2b3;border-radius:12px;padding:11px 16px;box-shadow:0 3px 14px rgba(44,36,24,.06);}
.hero-search .box span{color:#9aa676;font-size:19px;}
.hero-search input{border:none;outline:none;background:transparent;flex:1;
    font-family:Anuphan,sans-serif;font-size:15px;color:#242a16;min-width:0;}
.hero-search button{border:none;background:#5f8a2a;color:#f9fce9;font-family:Anuphan,sans-serif;
    font-size:15px;font-weight:600;padding:0 26px;border-radius:12px;cursor:pointer;
    box-shadow:0 3px 12px rgba(154,91,52,.32);}
.hero-stats{display:flex;gap:clamp(22px,3vw,44px);margin-top:32px;flex-wrap:wrap;}
.hero-stats .num{font-family:Anuphan;font-size:30px;font-weight:600;color:#456420;line-height:1;}
.hero-stats .lbl{font-size:13px;color:#788457;margin-top:5px;}
.hero-stats .sep{width:1px;background:#d1dc9d;}

/* ---------- featured slideshow ---------- */
.hero-right{flex:1 1 400px;min-width:300px;display:flex;justify-content:center;}
.feat-wrap{position:relative;width:100%;max-width:460px;}
.feat-card{background:#fcfef2;border:1px solid #e0e8bb;border-radius:20px;padding:24px;
    box-shadow:0 24px 56px rgba(44,36,24,.13);display:flex;gap:22px;align-items:stretch;min-height:248px;}
.feat-panel{align-items:flex-start;}   /* keep the cover a fixed size, don't stretch it to the body */
.feat-spine{flex:0 0 145px;cursor:pointer;animation:fadeUp .45s ease;text-decoration:none;}
.feat-body{flex:1;display:flex;flex-direction:column;min-width:0;}
.feat-tag{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;background:#f3eeb8;
    color:#5f8a2a;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    padding:5px 11px;border-radius:14px;}
.feat-body h3{font-family:Anuphan;font-size:20px;font-weight:600;color:#1a220d;line-height:1.32;margin:14px 0 0;}
.feat-creator{font-size:13px;color:#788457;margin-top:7px;}
.feat-subject{display:inline-flex;align-self:flex-start;margin-top:11px;background:#e9f2d6;
    color:#4f6b24;font-size:12px;padding:4px 11px;border-radius:7px;}
.feat-btn{margin-top:auto;align-self:flex-start;border:none;background:#5f8a2a;color:#f9fce9;
    font-family:Anuphan,sans-serif;font-size:14px;font-weight:600;padding:10px 20px;border-radius:9px;
    cursor:pointer;text-decoration:none;}
.feat-nav{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding:0 4px;}
.feat-dots{display:flex;gap:7px;align-items:center;}
.feat-dots a{height:5px;border-radius:3px;cursor:pointer;transition:all .3s ease;display:inline-block;}
.feat-arrows{display:flex;gap:9px;}
.feat-arrows a{width:38px;height:38px;border-radius:50%;border:1px solid #d9e2b3;background:#fcfef2;
    color:#456420;font-size:18px;cursor:pointer;line-height:36px;text-align:center;text-decoration:none;}

/* ---------- collection groups ---------- */
.groups{padding:clamp(18px,3vw,36px) 0 64px;}
.groups-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;}
.groups-head h2{font-family:Anuphan;font-size:clamp(24px,3vw,34px);font-weight:600;color:#1a220d;margin:0;}
.groups-head .sub{font-size:15px;color:#788457;}
.group{margin-top:40px;}
.group-title{display:flex;align-items:baseline;gap:13px;flex-wrap:wrap;border-bottom:1px solid #d3dda3;
    padding-bottom:11px;margin-bottom:20px;}
.group-title h3{font-family:Anuphan;font-size:21px;font-weight:600;color:#456420;margin:0;}
.group-title .desc{font-size:14px;color:#9aa676;}
.col-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px;}
.col-card{background:#fcfef2;border:1px solid #e0e8bb;border-radius:14px;padding:18px;cursor:pointer;
    display:flex;gap:15px;align-items:center;text-decoration:none;
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s;}
.col-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(44,36,24,.1);border-color:#c5d38f;}
.col-initial{flex:0 0 52px;height:66px;border-radius:5px;display:flex;align-items:center;justify-content:center;
    box-shadow:0 5px 14px rgba(44,36,24,.22);position:relative;}
.col-initial span.bar{position:absolute;left:0;top:0;bottom:0;width:5px;background:rgba(0,0,0,.2);border-radius:5px 0 0 5px;}
.col-initial span.ch{font-family:Anuphan;color:#f9fce9;font-size:24px;font-weight:600;}
.col-name{font-size:16px;font-weight:600;color:#242a16;line-height:1.3;}
.col-count{font-size:13px;color:#9aa676;margin-top:3px;}
.col-browse{font-size:13px;color:#5f8a2a;font-weight:600;margin-top:8px;}

/* ---------- list / search ---------- */
.crumb{font-size:13px;color:#9aa676;margin-bottom:16px;}
.crumb a{cursor:pointer;color:#5f8a2a;text-decoration:none;}
.crumb .sep{margin:0 8px;}
.list-sec{padding:26px 0 64px;animation:fadeUp .35s ease;}
.list-sec h1{font-family:Anuphan;font-size:clamp(26px,3.4vw,40px);font-weight:600;color:#1a220d;margin:0;}
.list-sub{font-size:15px;color:#788457;margin:9px 0 0;max-width:620px;line-height:1.6;}
.book-card-link .spine{transition:transform .2s ease,box-shadow .2s ease;}
.book-card-link:hover .spine{transform:translateY(-4px);box-shadow:0 16px 32px rgba(44,36,24,.26);}
.no-results{margin-top:40px;padding:56px 20px;text-align:center;background:#fcfef2;
    border:1px dashed #c5d38f;border-radius:16px;}
.no-results .ico{font-size:40px;color:#c5d38f;}
.no-results .msg{font-size:16px;color:#788457;margin-top:10px;}

/* ---------- advanced search ---------- */
.adv-form{margin-top:22px;}
.adv-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.adv-field{display:flex;flex-direction:column;}
.adv-field label{font-size:13px;font-weight:600;color:#5e6a3f;margin-bottom:5px;}
.adv-field input,.adv-field select{border:1px solid #d9e2b3;background:#fcfef2;border-radius:10px;
    padding:10px 13px;font-family:Anuphan,sans-serif;font-size:14px;color:#242a16;outline:none;}
.adv-field input:focus,.adv-field select:focus{border-color:#5f8a2a;}
.adv-actions{display:flex;gap:10px;margin-top:18px;}
/* responsive book slider (home: new arrivals / most popular) — items-per-view via --per */
.book-slider{--per:var(--bs-per,4);--bs-gap:clamp(14px,2vw,26px);margin:46px 0;}
.bs-head{display:flex;align-items:baseline;gap:12px;margin-bottom:20px;flex-wrap:wrap;}
.bs-head h2{font-size:clamp(20px,2vw,26px);color:#2f3a1c;margin:0;}
.bs-head .sub{color:#9aa676;font-size:14px;}
.bs-viewport{overflow:hidden;}
.bs-track{display:flex;gap:var(--bs-gap);align-items:stretch;transition:transform .45s ease;}
.bs-item{flex:0 0 calc((100% - (var(--per) - 1) * var(--bs-gap)) / var(--per));min-width:0;}
/* recommended-style card (hero featured look, minus the button) — 3 per row; image left, details right */
.bs-feat{display:flex;flex-direction:row;align-items:flex-start;gap:16px;text-decoration:none;background:#fff;border:1px solid #e4ead0;border-radius:16px;padding:18px;box-shadow:0 6px 18px rgba(44,36,24,.06);transition:transform .2s,box-shadow .2s;height:100%;}
.bs-feat:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(44,36,24,.12);}
/* fixed, identical cover size for every book (uploaded photo or colour spine) */
.bs-feat-cover{flex:0 0 92px;width:92px;}
.bs-feat-cover .spine{width:92px;height:123px;aspect-ratio:auto;}
.bs-feat-body{flex:1;min-width:0;display:flex;flex-direction:column;}
.bs-feat-tag{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;background:#f3eeb8;color:#5f8a2a;font-size:11px;font-weight:700;letter-spacing:.06em;padding:5px 11px;border-radius:14px;}
.bs-feat-title{font-family:Anuphan;font-size:15px;font-weight:600;color:#1a220d;line-height:1.34;margin:10px 0 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.bs-feat-creator{font-size:13px;color:#788457;margin-top:6px;}
.bs-feat-stats{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:9px;font-size:12px;color:#9aa676;}
.bs-feat-stats span{white-space:nowrap;}
.bs-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:22px;}
.bs-dots{display:flex;gap:7px;align-items:center;}
.bs-dots a{height:8px;width:8px;border-radius:20px;background:#cdda9f;cursor:pointer;transition:all .3s;}
.bs-dots a.on{width:26px;background:#5f8a2a;}
.bs-prev,.bs-next{width:38px;height:38px;border-radius:50%;border:1px solid #d9e2b3;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#5f8a2a;font-size:22px;background:#fff;user-select:none;line-height:1;}
.bs-prev:hover,.bs-next:hover{background:#eef1d6;}
@media(max-width:820px){.book-slider{--per:2;}}   /* tablet: 2 per view */
@media(max-width:600px){.book-slider{--per:1;}}   /* mobile: 1 per row */
/* compact in-collection search bar — half-page on desktop, tidy row on mobile */
.coll-search{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:22px 0 4px;max-width:50%;}
.coll-search select,.coll-search input[type=text]{padding:10px 12px;border:1px solid #d9e2b3;border-radius:9px;font-family:inherit;font-size:14px;background:#fff;color:#242a16;}
.coll-search input[type=text]{flex:1 1 140px;min-width:0;}
.coll-search select{flex:0 0 auto;cursor:pointer;}
.coll-search .btn{white-space:nowrap;}
@media(max-width:768px){
  .coll-search{max-width:100%;gap:8px;}
  .coll-search select,.coll-search input[type=text]{padding:8px 10px;font-size:13px;}
  .coll-search .btn{padding:8px 12px;font-size:13px;}
}
.adv-link{display:inline-block;margin-top:14px;font-size:14px;color:#5f8a2a;font-weight:600;text-decoration:none;}
.adv-link:hover{text-decoration:underline;}
@media(max-width:600px){.adv-grid{grid-template-columns:1fr;}}

/* ---------- detail ---------- */
.detail-sec{padding:26px 0 72px;animation:fadeUp .35s ease;}
.detail-wrap{display:flex;gap:clamp(26px,4vw,52px);flex-wrap:wrap;align-items:flex-start;}
.detail-left{flex:2 1 300px;min-width:280px;}
.detail-cover{max-width:300px;}
.detail-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;}
.detail-tags span{background:#fcfef2;border:1px solid #e0e8bb;color:#6b7544;font-size:12px;padding:6px 11px;border-radius:7px;}
.cc-block{margin-top:12px;}
.cc-desc{display:block;margin-top:6px;font-size:12px;line-height:1.5;color:#788457;max-width:300px;}
.cc-license{display:inline-block;line-height:0;}
.cc-license img{border-radius:3px;}
.cc-license.arr{line-height:1.4;font-size:12px;font-weight:600;color:#5e6a3f;background:#f6fae6;
    border:1px solid #d9e2b3;border-radius:7px;padding:5px 11px;text-decoration:none;}
.dl-box{background:#fcfef2;border:1px solid #e0e8bb;border-radius:14px;padding:20px;margin-top:20px;}
.dl-member{display:flex;align-items:center;gap:8px;font-size:13px;color:#5f8a2a;font-weight:700;}
.dl-member .sq{display:inline-block;width:8px;height:8px;border-radius:2px;background:#5f8a2a;}
.btn-preview{width:100%;margin-top:14px;border:1px solid #c5d38f;background:transparent;color:#456420;
    font-family:Anuphan,sans-serif;font-size:14px;font-weight:600;padding:12px;border-radius:10px;cursor:pointer;}
.btn-download{width:100%;margin-top:10px;border:none;color:#f9fce9;font-family:Anuphan,sans-serif;
    font-size:15px;font-weight:600;padding:13px;border-radius:10px;cursor:pointer;text-decoration:none;display:block;text-align:center;}
.btn-download.member{background:#5a7d2a;box-shadow:0 3px 12px rgba(90,106,58,.32);}
.btn-download.guest{background:#5f8a2a;box-shadow:0 3px 12px rgba(154,91,52,.3);}
.dl-note{font-size:12px;color:#9aa676;margin-top:10px;line-height:1.5;text-align:center;}
.dl-or{display:flex;align-items:center;gap:12px;margin:16px 0 14px;}
.dl-or .ln{flex:1;height:1px;background:#e0e8bb;}
.dl-or span{font-size:12px;color:#afbb87;}
.dl-auth{display:flex;gap:9px;}
.dl-auth a{flex:1;font-family:Anuphan,sans-serif;font-size:14px;font-weight:600;padding:11px;
    border-radius:10px;cursor:pointer;text-align:center;text-decoration:none;}
.dl-auth .login{border:1px solid #c5d38f;background:transparent;color:#456420;}
.dl-auth .reg{border:none;background:#1a220d;color:#f9fce9;}

.detail-right{flex:3 1 440px;min-width:300px;}
.meta-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:18px;}
.meta-head h2{font-family:Anuphan;font-size:clamp(22px,2.6vw,30px);font-weight:600;color:#1a220d;margin:0;}
.meta-head .pill{font-size:13px;color:#5f8a2a;font-weight:600;background:#f3eeb8;padding:4px 11px;border-radius:14px;}
/* each DC element = one card (big heading + bulleted sub-items); packed by height */
.dc-grid{columns:2 260px;column-gap:12px;}
.dc-cell{background:#fcfef2;border:1px solid #e0e8bb;border-radius:12px;padding:14px 16px;
    margin:0 0 12px;break-inside:avoid;-webkit-column-break-inside:avoid;}
.dc-cell .top{display:flex;align-items:center;gap:8px;}
.dc-cell .num{font-family:Anuphan;font-size:12px;color:#c2a51e;font-weight:600;}
.dc-cell .key{font-family:ui-monospace,Menlo,monospace;font-size:10.5px;color:#a99326;letter-spacing:.02em;}
.dc-cell .label{font-size:12px;color:#9aa676;margin-top:4px;font-weight:600;}
.dc-cell .value{font-size:14px;color:#242a16;margin-top:5px;line-height:1.55;}
/* sub-items (refinements) listed under the main heading */
.dc-subs{list-style:none;margin:11px 0 0;padding:0;}
.dc-subs li{position:relative;padding:8px 0 2px 16px;border-top:1px dashed #e6eccb;}
.dc-subs li:first-child{border-top:1px solid #e0e8bb;margin-top:3px;}
.dc-subs li:before{content:"•";position:absolute;left:2px;top:8px;color:#7aa63a;font-weight:700;}
.dc-subs .key{font-family:ui-monospace,Menlo,monospace;font-size:10px;color:#a99326;}
.dc-subs .label{font-size:12px;color:#9aa676;font-weight:600;margin-left:6px;}
.dc-subs .value{font-size:13.5px;color:#242a16;margin-top:3px;line-height:1.5;}
.dc-cell .value a{color:#5f8a2a;text-decoration:underline;word-break:break-all;}
.dc-cell .value a:hover{color:#456420;}

/* ---------- citation standards ---------- */
.cite-sec{margin-top:36px;}
.cite-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.cite-head h3{font-family:Anuphan;font-size:clamp(20px,2.4vw,26px);font-weight:600;color:#456420;margin:0;}
.cite-export{background:#5f8a2a;color:#f9fce9;font-size:12px;font-weight:600;padding:5px 12px;
    border-radius:7px;text-decoration:none;line-height:1.4;}
.cite-export:hover{background:#456420;}
.cite-tabs{display:flex;gap:6px;border-bottom:1px solid #d9e2b3;flex-wrap:wrap;}
.cite-tab{background:none;border:none;cursor:pointer;font-family:Anuphan,sans-serif;font-size:14px;
    font-weight:600;letter-spacing:.04em;color:#788457;padding:10px 16px;border-bottom:2px solid transparent;
    margin-bottom:-1px;}
.cite-tab:hover{color:#5f8a2a;}
.cite-tab.active{color:#456420;border-bottom-color:#5f8a2a;}
.cite-box{position:relative;background:#f9fce9;border:1px solid #e0e8bb;border-radius:0 0 12px 12px;
    padding:22px 24px;}
.cite-panel{font-size:15px;line-height:1.85;color:#242a16;}
.cite-panel em{font-style:italic;}
.cite-copy{position:absolute;top:12px;right:12px;background:#fcfef2;border:1px solid #d9e2b3;color:#5e6a3f;
    font-family:Anuphan,sans-serif;font-size:12px;font-weight:600;padding:5px 10px;border-radius:8px;cursor:pointer;}
.cite-copy:hover{border-color:#5f8a2a;color:#456420;}
@media(max-width:600px){.cite-box{padding:18px 16px;}}

/* ---------- auth pages ---------- */
.auth-overlay{min-height:calc(100vh - 220px);display:flex;align-items:center;justify-content:center;padding:40px 20px;}
.auth-card{background:#f9fce9;width:100%;max-width:420px;border-radius:20px;padding:30px;
    box-shadow:0 30px 80px rgba(0,0,0,.18);animation:pop .25s ease;border:1px solid #e0e8bb;}
.auth-card h3{font-family:Anuphan;font-size:25px;font-weight:600;color:#1a220d;margin:0;}
.auth-card .sub{font-size:13px;color:#788457;margin:6px 0 0;}
.auth-form{margin-top:22px;display:flex;flex-direction:column;gap:14px;}
.auth-form label{display:block;}
.auth-form .lab{font-size:13px;color:#5e6a3f;font-weight:600;}
.auth-form input{width:100%;margin-top:6px;border:1px solid #d9e2b3;background:#fcfef2;border-radius:10px;
    padding:11px 14px;font-family:Anuphan,sans-serif;font-size:14px;color:#242a16;outline:none;}
.auth-submit{width:100%;margin-top:22px;border:none;background:#5f8a2a;color:#f9fce9;font-family:Anuphan,sans-serif;
    font-size:15px;font-weight:600;padding:13px;border-radius:11px;cursor:pointer;box-shadow:0 4px 14px rgba(154,91,52,.32);}
.type-choice{display:flex;flex-direction:column;gap:9px;margin-top:8px;}
.type-opt{display:flex;flex-direction:column;border:1px solid #d9e2b3;background:#fcfef2;border-radius:11px;
    padding:11px 14px;cursor:pointer;transition:border-color .15s,background .15s;}
.type-opt.on{border-color:#5f8a2a;background:#f7f2c2;box-shadow:0 0 0 1px #5f8a2a inset;}
.type-opt input{position:absolute;opacity:0;}
.type-opt .t{font-weight:600;color:#242a16;font-size:14px;}
.type-opt .t::before{content:'○';color:#afbb87;margin-right:8px;}
.type-opt.on .t::before{content:'●';color:#5f8a2a;}
.type-opt .hint{font-size:12px;color:#9aa676;margin-top:3px;margin-left:20px;}

.access-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
    padding:4px 10px;border-radius:20px;letter-spacing:.02em;}
.access-pbru{background:#e7e0ef;color:#5a4a6b;}
.access-public{background:#e8f1d4;color:#43661d;}
.cover-lock{position:absolute;inset:0;background:rgba(36,28,17,.66);display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:8px;color:#f9fce9;text-align:center;padding:14px;
    backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);}
.cover-lock .ico{font-size:26px;}
.cover-lock .txt{font-size:11px;line-height:1.4;opacity:.92;}
/* PBRU-only lock / login prompt, shown inside the detail action box (.dl-box) */
.locked-panel{position:relative;text-align:center;padding:8px 6px 4px;
    background:radial-gradient(120% 90% at 50% 0%,#f6f2fb 0%,rgba(246,242,251,0) 62%);}
.lock-badge{width:60px;height:60px;margin:2px auto 15px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-size:27px;line-height:1;
    background:linear-gradient(135deg,#efeaf6,#e2d8ef);color:#5a4a6b;
    border:1px solid #e2d8ef;box-shadow:0 8px 20px rgba(90,74,107,.20),inset 0 1px 0 #fff;}
.lock-badge span{filter:drop-shadow(0 2px 3px rgba(90,74,107,.25));}
.locked-panel h3{font-family:Anuphan;color:#3f3350;margin:0 0 8px;font-size:17px;font-weight:700;}
.locked-panel p{color:#6b7550;font-size:13.5px;line-height:1.65;margin:0 auto 18px;max-width:34ch;}
.lock-actions{display:flex;gap:10px;}
.lock-btn{flex:1;font-family:Anuphan,sans-serif;font-size:14px;font-weight:600;padding:12px 10px;
    border-radius:12px;text-decoration:none;text-align:center;
    transition:transform .12s ease,box-shadow .12s ease,background .12s ease;}
.lock-btn.primary{background:#5f8a2a;color:#f9fce9;border:1px solid #5f8a2a;box-shadow:0 6px 16px rgba(95,138,42,.26);}
.lock-btn.primary:hover{background:#527a24;transform:translateY(-1px);box-shadow:0 10px 22px rgba(95,138,42,.34);}
.lock-btn.ghost{background:#fff;color:#456420;border:1px solid #c5d38f;}
.lock-btn.ghost:hover{background:#f3f7e4;transform:translateY(-1px);}
.lock-hint{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#8a7a9b;
    background:#f3eef9;border:1px solid #e6ddef;border-radius:20px;padding:6px 14px;}

.auth-switch{text-align:center;margin-top:16px;font-size:13px;color:#5f8a2a;cursor:pointer;text-decoration:none;display:block;}
.auth-err{background:#f6e3df;color:#8a3b2c;border:1px solid #e6c3bb;border-radius:10px;padding:10px 14px;font-size:13px;margin-top:18px;}

/* ---------- purpose-of-use popup ---------- */
.purpose-overlay{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;
    background:rgba(30,34,18,.55);backdrop-filter:blur(2px);padding:18px;}
.purpose-overlay.open{display:flex;}
.purpose-modal{background:#fff;border-radius:16px;width:100%;max-width:560px;max-height:88vh;display:flex;flex-direction:column;
    box-shadow:0 24px 60px rgba(30,34,18,.4);overflow:hidden;animation:purposeIn .18s ease;}
@keyframes purposeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.purpose-head{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;
    padding:20px 22px 14px;border-bottom:1px solid #eef1d6;}
.purpose-head .purpose-eyebrow{font-size:12px;color:#7c8a58;font-weight:600;margin-bottom:6px;}
.purpose-head h3{margin:0 0 4px;font-family:Anuphan;font-size:19px;color:#2f3a16;font-weight:700;}
.purpose-head p{margin:0;font-size:13px;color:#788457;line-height:1.55;}
.purpose-close{border:none;background:#f2f5e3;color:#5e6a3f;width:32px;height:32px;border-radius:9px;
    font-size:16px;cursor:pointer;flex:0 0 auto;line-height:1;}
.purpose-close:hover{background:#e6ecca;}
.purpose-body{padding:14px 22px;overflow-y:auto;display:flex;flex-direction:column;gap:9px;}
.purpose-item{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border:1px solid #e2e8c6;
    border-radius:11px;cursor:pointer;transition:background .12s,border-color .12s;}
.purpose-item:hover{background:#fbfdf3;border-color:#cddba0;}
.purpose-item input{margin-top:3px;width:17px;height:17px;flex:0 0 auto;accent-color:#5f8a2a;cursor:pointer;}
.purpose-item:has(input:checked){background:#f4f8e4;border-color:#8fb254;}
.pi-text{display:flex;flex-direction:column;gap:3px;min-width:0;}
.pi-name{font-size:14.5px;font-weight:600;color:#242a16;line-height:1.35;}
.pi-desc{font-size:12.5px;color:#7d8858;line-height:1.5;}
.purpose-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
    padding:14px 22px 18px;border-top:1px solid #eef1d6;}
.purpose-warn{font-size:13px;color:#b0432c;visibility:hidden;}
.purpose-warn.show{visibility:visible;}
.purpose-actions{display:flex;gap:10px;margin-left:auto;}
.purpose-actions .btn-out{background:#fff;color:#456420;border:1px solid #c5d38f;border-radius:10px;
    padding:10px 18px;font-family:Anuphan;font-size:14px;font-weight:600;cursor:pointer;}
.purpose-actions .btn-out:hover{background:#f3f7e4;}
.purpose-actions .btn-solid{padding:10px 20px;font-size:14px;border-radius:10px;}
.purpose-actions .btn-solid:disabled{opacity:.6;cursor:default;}

/* first-visit survey: grouped, two-column checkbox grid */
.survey-group-head{font-size:13.5px;font-weight:700;color:#456420;margin:6px 2px 2px;}
.survey-group-head + .survey-grid{margin-top:2px;}
.survey-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:4px;}
.survey-item{align-items:center;}
.survey-item .pi-name{font-size:14px;}
.survey-age-grid{grid-template-columns:repeat(3,1fr);}
@media(max-width:520px){.survey-grid{grid-template-columns:1fr 1fr;}.survey-age-grid{grid-template-columns:1fr 1fr;}}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid #d3dda3;background:#f9fce9;margin-top:20px;}
.footer-inner{max-width:1220px;margin:0 auto;padding:26px clamp(16px,4vw,40px);
    display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;}
.footer-brand{display:flex;align-items:center;gap:10px;}
.footer-img{height:60px;width:auto;display:block;}
.footer-logo{width:32px;height:32px;border-radius:7px;background:#456420;display:flex;align-items:center;justify-content:center;}
.footer-logo span{font-family:Anuphan;color:#f9fce9;font-size:17px;}
.footer-brand span{font-family:Anuphan;font-size:15px;color:#242a16;}
.footer-tag{font-size:13px;color:#9aa676;}
.footer-copy{font-size:13px;color:#afbb87;}

/* ---------- preview modal ---------- */
.preview-overlay{position:fixed;inset:0;z-index:110;display:none;align-items:center;justify-content:center;
    padding:clamp(12px,3vw,40px);background:rgba(36,28,17,.55);
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.preview-overlay.open{display:flex;animation:fadeUp .25s ease;}
.preview-modal{background:#f9fce9;width:100%;max-width:900px;height:88vh;max-height:88vh;
    border-radius:18px;overflow:hidden;display:flex;flex-direction:column;
    box-shadow:0 30px 80px rgba(0,0,0,.4);animation:pop .25s ease;border:1px solid #e0e8bb;}
.preview-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
    padding:16px 20px;border-bottom:1px solid #e0e8bb;background:#fcfef2;}
.preview-eyebrow{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5f8a2a;}
.preview-title{font-size:19px;font-weight:600;color:#1a220d;margin-top:3px;line-height:1.3;}
.preview-close{border:none;background:#eef1d6;color:#6b7544;width:36px;height:36px;border-radius:9px;
    cursor:pointer;font-size:15px;line-height:1;flex:0 0 auto;}
.preview-close:hover{background:#e0e8bb;}
.preview-body{flex:1;background:#cdda9f;min-height:0;}
.preview-body iframe{width:100%;height:100%;border:none;display:block;}
.preview-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
    padding:13px 20px;border-top:1px solid #e0e8bb;background:#fcfef2;}
.preview-note{font-size:13px;color:#788457;flex:1 1 200px;}
.preview-foot .dl-auth-btn{border:none;background:#1a220d;color:#f9fce9;font-family:Anuphan,sans-serif;
    font-size:14px;font-weight:600;padding:10px 20px;border-radius:10px;cursor:pointer;text-decoration:none;}
.preview-foot .btn-download{margin:0;}

/* ---------- admin "viewing as admin" floating badge ---------- */
.admin-viewing{position:fixed;top:74px;right:18px;z-index:115;display:flex;align-items:center;gap:11px;
    background:#1a220d;color:#f9fce9;padding:10px 12px 10px 14px;border-radius:13px;
    box-shadow:0 10px 30px rgba(0,0,0,.35);border:1px solid rgba(154,91,52,.6);
    max-width:280px;animation:fadeUp .3s ease;}
.admin-viewing .av-dot{width:30px;height:30px;flex:0 0 auto;border-radius:8px;display:flex;align-items:center;
    justify-content:center;background:linear-gradient(150deg,#7aa63a,#456420);font-size:15px;}
.admin-viewing .av-text strong{display:block;font-size:13px;font-weight:600;line-height:1.2;}
.admin-viewing .av-links{margin-top:3px;font-size:12px;}
.admin-viewing .av-links a{color:#e6d488;text-decoration:none;}
.admin-viewing .av-links a:hover{text-decoration:underline;}
.admin-viewing .av-links span{color:#5e6a3f;margin:0 5px;}
.admin-viewing .av-close{background:none;border:none;color:#9aa676;cursor:pointer;font-size:13px;
    line-height:1;padding:2px 4px;align-self:flex-start;}
.admin-viewing .av-close:hover{color:#f9fce9;}
@media(max-width:600px){.admin-viewing{top:auto;bottom:18px;right:12px;left:12px;max-width:none;}}

/* ---------- toast ---------- */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:120;
    background:#1a220d;color:#f9fce9;padding:13px 24px;border-radius:11px;
    box-shadow:0 12px 34px rgba(0,0,0,.35);font-size:14px;font-weight:500;
    animation:fadeUp .3s ease;max-width:90vw;text-align:center;}

/* ===========================================================
   Admin
   =========================================================== */
.admin-shell{display:flex;min-height:100vh;}
.admin-sidebar{width:240px;background:#1a220d;color:#cdda9f;flex-shrink:0;padding:1.2rem 0;}
.admin-sidebar .brand-a{display:flex;align-items:center;gap:10px;color:#f9fce9;font-weight:600;
    padding:.4rem 1.2rem 1rem;font-family:Anuphan;text-decoration:none;}
.admin-sidebar .brand-a-img{height:40px;width:auto;max-width:100%;border-radius:8px;display:block;}
.admin-sidebar .brand-a .lg{width:34px;height:34px;border-radius:8px;background:linear-gradient(150deg,#7aa63a,#456420);
    display:flex;align-items:center;justify-content:center;}
.admin-sidebar .brand-a .lg span{color:#f9fce9;font-size:18px;}
.admin-sidebar a.nav{display:flex;align-items:center;gap:10px;color:#cdda9f;padding:.7rem 1.4rem;
    text-decoration:none;font-weight:500;font-size:14px;border-left:3px solid transparent;}
.admin-sidebar a.nav:hover,.admin-sidebar a.nav.active{background:rgba(255,255,255,.06);color:#f9fce9;border-left-color:#5f8a2a;}
.admin-sidebar hr{border:none;border-top:1px solid rgba(255,255,255,.1);margin:1rem 0;}
/* content-management dropdown group */
.admin-sidebar .nav-group{display:block;}
.admin-sidebar summary.nav-parent{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
    color:#cdda9f;padding:.7rem 1.4rem;font-weight:500;font-size:14px;border-left:3px solid transparent;}
.admin-sidebar summary.nav-parent::-webkit-details-marker{display:none;}
.admin-sidebar summary.nav-parent:hover,.admin-sidebar summary.nav-parent.active{background:rgba(255,255,255,.06);color:#f9fce9;border-left-color:#5f8a2a;}
.admin-sidebar .nav-caret{margin-left:auto;font-size:11px;transition:transform .2s;}
.admin-sidebar .nav-group[open] .nav-caret{transform:rotate(180deg);}
.admin-sidebar a.nav-child{padding-left:2.6rem;font-size:13.5px;}
.admin-sidebar a.nav-child.active{background:rgba(255,255,255,.09);}
.admin-main{flex:1;padding:1.8rem clamp(16px,3vw,2.4rem);background:#eef1d6;}
.admin-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.6rem;flex-wrap:wrap;gap:10px;}
.admin-top h1{font-family:Anuphan;font-size:1.7rem;color:#1a220d;margin:0;}
.admin-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:#788457;margin-bottom:16px;}
.admin-crumb a{color:#5f8a2a;text-decoration:none;}
.admin-crumb a:hover{text-decoration:underline;}
.admin-crumb .sep{color:#c2ce98;}
.admin-crumb .cur{color:#456420;font-weight:600;}
.card{background:#fcfef2;border:1px solid #e0e8bb;border-radius:14px;padding:1.4rem;}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-bottom:1.4rem;}
.stat{background:#fcfef2;border:1px solid #e0e8bb;border-radius:14px;padding:1.2rem;display:flex;
    justify-content:space-between;align-items:center;text-decoration:none;}
.stat .num{font-family:Anuphan;font-size:1.9rem;font-weight:600;color:#5f8a2a;}
.stat .lbl{color:#788457;font-size:14px;margin-top:2px;}
.stat .ico{font-size:1.6rem;opacity:.35;}
.admin-login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
    background:radial-gradient(circle at 50% 20%,#1f3311,#1a220d 70%);}
.admin-login-card{background:#f9fce9;width:100%;max-width:400px;border-radius:18px;padding:34px 30px;
    box-shadow:0 30px 80px rgba(0,0,0,.45);text-align:center;animation:pop .25s ease;border:1px solid #e0e8bb;}
.admin-login-logo{width:56px;height:56px;border-radius:13px;margin:0 auto 16px;
    background:linear-gradient(150deg,#7aa63a,#456420);display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 18px rgba(124,70,38,.5);}
.admin-login-logo span{font-family:Anuphan;color:#f9fce9;font-size:30px;font-weight:600;}
.admin-login-img{height:62px;width:auto;max-width:100%;display:block;margin:0 auto 18px;}
.admin-login-card h1{font-family:Anuphan;font-size:23px;color:#1a220d;margin:0 0 4px;}
.admin-login-card .sub{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#9aa676;margin:0 0 22px;}
.admin-login-card .auth-form label{text-align:left;}
.admin-login-back{display:inline-block;margin-top:18px;font-size:13px;color:#5f8a2a;text-decoration:none;}

/* ---------- DataTables (green theme) ---------- */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{border:1px solid #d9e2b3;border-radius:8px;padding:6px 10px;
    font-family:Anuphan,sans-serif;color:#242a16;background:#fcfef2;outline:none;margin-left:6px;}
.dataTables_wrapper .dataTables_filter,.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info{color:#788457;font-size:13px;}
.dataTables_wrapper{margin-top:2px;}
.dataTables_wrapper .dataTables_paginate .paginate_button{color:#456420!important;border:1px solid transparent!important;
    border-radius:7px!important;padding:5px 11px!important;margin:0 2px;}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{background:#5f8a2a!important;
    color:#f9fce9!important;border-color:#5f8a2a!important;}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{background:#e8f1d4!important;
    border-color:#d9e2b3!important;color:#456420!important;}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled{color:#c2ce98!important;}
table.dataTable thead th{border-bottom:1px solid #d9e2b3;}
table.dataTable.no-footer{border-bottom:1px solid #ece2cd;}

/* ---------- Select2 (green theme) ---------- */
.select2-container{font-family:Anuphan,sans-serif;}
.select2-container--default .select2-selection--single{border:1px solid #d9e2b3;border-radius:10px;
    height:auto;min-height:40px;background:#fcfef2;padding:4px 2px;}
.select2-container--default .select2-selection--single .select2-selection__rendered{color:#242a16;
    line-height:30px;padding-left:11px;}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:38px;}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single{border-color:#5f8a2a;}
.select2-dropdown{border-color:#d9e2b3;font-family:Anuphan,sans-serif;}
/* selected + highlighted rows on-theme (extra class beats the later-loaded CDN rule) */
.select2-container--default .select2-results__option[aria-selected="true"]{background:#eef4dd;color:#43661d;}
.select2-container--default .select2-results__option.select2-results__option--highlighted[aria-selected]{background:#5f8a2a;color:#f9fce9;}
.select2-container--default .select2-results__group{color:#456420;font-weight:600;}
.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid #d9e2b3;
    border-radius:8px;padding:6px 9px;outline:none;}
.select2-container--default .select2-results__option{font-size:14px;padding:9px 13px;}

/* Advanced-search Select2 — match the sibling text inputs exactly */
.adv-field .select2-container{width:100% !important;}
.adv-field .select2-container--default .select2-selection--single{
    height:auto;min-height:0;padding:10px 13px;border:1px solid #d9e2b3;border-radius:10px;background:#fcfef2;font-size:14px;}
.adv-field .select2-container--default .select2-selection--single .select2-selection__rendered{
    padding:0;line-height:18px;color:#242a16;font-size:14px;}
.adv-field .select2-container--default .select2-selection--single .select2-selection__placeholder{color:#9aa676;}
.adv-field .select2-container--default .select2-selection--single .select2-selection__arrow{
    height:100%;top:0;right:11px;}
.adv-field .select2-container--default.select2-container--focus .select2-selection--single,
.adv-field .select2-container--default.select2-container--open .select2-selection--single{border-color:#5f8a2a;}

/* horizontal-scroll wrapper for wide tables on small screens */
.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.tbl{width:100%;border-collapse:collapse;}
/* columns hug their content; cells flagged .nowrap never wrap */
.tbl th.nowrap,.tbl td.nowrap{white-space:nowrap;}
.tbl th,.tbl td{text-align:left;padding:11px 12px;border-bottom:1px solid #e4ecca;font-size:14px;vertical-align:middle;}
.tbl th{color:#788457;font-weight:600;font-size:13px;}
.tbl tr:hover td{background:#f4f9e2;}
.btn{display:inline-block;border:none;border-radius:9px;padding:9px 16px;font-family:Anuphan,sans-serif;
    font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;}
.btn-pri{background:#5f8a2a;color:#f9fce9;}
.btn-out{background:transparent;border:1px solid #c5d38f;color:#456420;}
.btn-dng{background:transparent;border:1px solid #e0b3aa;color:#a23b2c;}
.btn-sm{padding:6px 11px;font-size:13px;}
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;}
.badge-g{background:#e8f1d4;color:#43661d;}
.badge-n{background:#eef1d6;color:#788457;}
.form-field{margin-bottom:14px;}
.form-field label{display:block;font-size:13px;font-weight:600;color:#5e6a3f;margin-bottom:5px;}
.form-field input,.form-field select,.form-field textarea{width:100%;border:1px solid #d9e2b3;background:#fcfef2;
    border-radius:10px;padding:10px 13px;font-family:Anuphan,sans-serif;font-size:14px;color:#242a16;outline:none;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.color-input{display:flex;align-items:center;gap:10px;}
.color-input .color-swatch{width:46px;height:40px;padding:2px;border:1px solid #d9e2b3;border-radius:9px;
    background:#fcfef2;cursor:pointer;flex:0 0 auto;}
.color-input .color-swatch::-webkit-color-swatch{border:none;border-radius:6px;}
.color-input .color-swatch::-webkit-color-swatch-wrapper{padding:0;}
.color-input .color-text{flex:1;}
.color-input .spine-prev{width:34px;height:44px;border-radius:4px;box-shadow:0 2px 6px rgba(0,0,0,.25);flex:0 0 auto;}
.field-group{border:1px solid #e0e8bb;border-radius:12px;padding:16px;margin-bottom:16px;background:#fcfef2;}
.field-group h4{font-family:Anuphan;margin:0 0 12px;color:#456420;font-size:16px;}

@media(max-width:760px){
    .form-row{grid-template-columns:1fr;}
    .admin-shell{flex-direction:column;}
    .admin-sidebar{width:100%;}
    .chart-row{grid-template-columns:1fr !important;}
}

/* ============ primary navigation ============ */
.main-nav{background:#fcfef2;border-top:1px solid #e4ebc6;border-bottom:1px solid #d9e2b3;}
.main-nav-inner{max-width:1220px;margin:0 auto;padding:0 clamp(16px,4vw,40px);}
.nav-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px;}
.nav-list > li{position:relative;}
.nav-link{
    display:inline-block;font-family:Anuphan,sans-serif;font-size:15px;font-weight:500;
    color:#3d4a24;text-decoration:none;padding:14px 15px;line-height:1;
    border:none;background:transparent;cursor:pointer;white-space:nowrap;
    border-bottom:3px solid transparent;transition:color .15s,border-color .15s;
}
.nav-link:hover{color:#5f8a2a;}
.nav-link.active{color:#c0392b;font-weight:600;border-bottom-color:#c0392b;}
.nav-dd-btn .caret{font-size:11px;color:#9aa676;}
.nav-dd.active .caret,.nav-dd-btn.active .caret{color:#c0392b;}
.nav-dd-menu{
    position:absolute;top:100%;left:0;min-width:180px;list-style:none;margin:0;padding:6px;
    background:#fff;border:1px solid #d9e2b3;border-radius:11px;
    box-shadow:0 14px 34px rgba(44,36,24,.16);display:none;z-index:60;
}
.nav-dd:hover .nav-dd-menu,.nav-dd.open .nav-dd-menu{display:block;}
.nav-dd-menu a{
    display:block;padding:10px 13px;border-radius:8px;text-decoration:none;
    font-size:14px;color:#3d4a24;font-family:Anuphan,sans-serif;
}
.nav-dd-menu a:hover{background:#eef4dd;color:#456420;}
.nav-toggle{
    display:none;width:100%;text-align:left;font-family:Anuphan,sans-serif;font-size:15px;font-weight:600;
    color:#3d4a24;background:transparent;border:none;padding:13px 2px;cursor:pointer;
}
@media(max-width:820px){
    .nav-toggle{display:block;}
    .nav-list{display:none;flex-direction:column;align-items:stretch;gap:0;padding-bottom:8px;}
    .main-nav.open .nav-list{display:flex;}
    .nav-link{padding:12px 6px;border-bottom:1px solid #eef899;border-left:3px solid transparent;}
    .nav-link.active{border-bottom-color:#eef899;border-left-color:#c0392b;}
    .nav-dd-menu{position:static;box-shadow:none;border:none;padding:0 0 0 16px;display:block;background:transparent;}
    .nav-dd-btn{width:100%;text-align:left;}
}

/* ============ generic info / content pages ============ */
.page-hero{padding:34px 0 8px;}
.page-hero .crumb{margin-bottom:14px;}
.page-hero h1{font-family:Anuphan;font-size:clamp(26px,3.4vw,38px);font-weight:600;color:#1a220d;margin:0 0 8px;}
.page-hero .lead{font-size:16px;color:#5e6a3f;line-height:1.7;max-width:760px;margin:0;}
.info-wrap{padding:14px 0 72px;display:grid;gap:18px;}
.info-card{background:#fcfef2;border:1px solid #e0e8bb;border-radius:16px;padding:24px 26px;}
.info-card h2{font-family:Anuphan;font-size:20px;font-weight:600;color:#456420;margin:0 0 12px;
    display:flex;align-items:center;gap:9px;}
.info-card h2 .ic{font-size:22px;}
.info-card h3{font-size:16px;font-weight:600;color:#3d4a24;margin:16px 0 6px;}
.info-card p{font-size:15px;color:#4a5535;line-height:1.8;margin:0 0 10px;}
.info-card ul,.info-card ol{margin:0 0 10px;padding-left:22px;color:#4a5535;line-height:1.85;font-size:15px;}
.info-card li{margin-bottom:5px;}
.info-card a{color:#5f8a2a;}
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;}
.step-list{counter-reset:step;list-style:none;padding:0;margin:0;display:grid;gap:12px;}
.step-list li{position:relative;padding:14px 16px 14px 56px;background:#f4f8e4;border:1px solid #e0e8bb;border-radius:12px;
    font-size:15px;color:#3d4a24;line-height:1.7;}
.step-list li::before{counter-increment:step;content:counter(step);position:absolute;left:14px;top:14px;
    width:28px;height:28px;border-radius:50%;background:#5f8a2a;color:#f9fce9;font-weight:700;font-size:14px;
    display:flex;align-items:center;justify-content:center;}
.info-note{background:#eef4dd;border:1px solid #cbe0a4;border-radius:12px;padding:14px 16px;font-size:14px;color:#43661d;}

/* FAQ accordion */
.faq-item{border:1px solid #e0e8bb;border-radius:12px;overflow:hidden;background:#fcfef2;margin-bottom:10px;}
.faq-q{width:100%;text-align:left;background:transparent;border:none;cursor:pointer;
    font-family:Anuphan,sans-serif;font-size:16px;font-weight:600;color:#3d4a24;
    padding:16px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.faq-q .fic{color:#5f8a2a;transition:transform .2s;flex:0 0 auto;}
.faq-item.open .fic{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.faq-item.open .faq-a{max-height:400px;}
.faq-a-inner{padding:0 18px 16px;font-size:15px;color:#4a5535;line-height:1.8;}

/* author-stats table */
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:8px;}
.stat-card{background:#fcfef2;border:1px solid #e0e8bb;border-radius:14px;padding:18px 20px;}
.stat-card .n{font-family:Anuphan;font-size:30px;font-weight:700;color:#456420;line-height:1;}
.stat-card .l{font-size:13px;color:#788457;margin-top:6px;}
.data-table{width:100%;border-collapse:collapse;background:#fcfef2;border:1px solid #e0e8bb;border-radius:14px;overflow:hidden;}
.data-table th,.data-table td{padding:12px 14px;text-align:left;font-size:14px;border-bottom:1px solid #eef1d6;}
.data-table th{background:#eef4dd;color:#456420;font-weight:600;white-space:nowrap;}
.data-table td.num,.data-table th.num{text-align:right;font-variant-numeric:tabular-nums;}
.data-table tbody tr:hover{background:#f4f8e4;}
.data-table tbody tr:last-child td{border-bottom:none;}
.rank-badge{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
    background:#e8f1d4;color:#43661d;font-weight:700;font-size:13px;}
.rank-badge.top{background:#f6e7a8;color:#8a6d12;}

/* contact / report form */
.info-form{display:grid;gap:14px;}
.info-form label{display:block;font-size:14px;font-weight:600;color:#3d4a24;margin-bottom:6px;}
.info-form input,.info-form select,.info-form textarea{
    width:100%;font-family:Anuphan,sans-serif;font-size:15px;color:#242a16;
    background:#fff;border:1px solid #d9e2b3;border-radius:10px;padding:11px 13px;outline:none;}
.info-form input:focus,.info-form select:focus,.info-form textarea:focus{border-color:#5f8a2a;}
.info-form .fg2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:600px){.info-form .fg2{grid-template-columns:1fr;}}
.contact-row{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:#4a5535;margin-bottom:12px;}
.contact-row .ic{font-size:20px;color:#5f8a2a;flex:0 0 auto;}

/* ============ admin rich-text editor ============ */
.rte{border:1px solid #d9e2b3;border-radius:10px;overflow:hidden;background:#fff;}
.rte-bar{display:flex;flex-wrap:wrap;gap:2px;padding:6px;background:#f4f8e4;border-bottom:1px solid #e0e8bb;}
.rte-btn{min-width:30px;height:30px;padding:0 8px;border:1px solid transparent;border-radius:7px;background:transparent;
    font-family:Anuphan,sans-serif;font-size:14px;color:#3d4a24;cursor:pointer;line-height:1;}
.rte-btn:hover{background:#e2ecc5;border-color:#cbe0a4;}
.rte-area{min-height:120px;max-height:340px;overflow-y:auto;padding:12px 14px;font-family:Anuphan,sans-serif;
    font-size:14px;line-height:1.7;color:#242a16;outline:none;}
.rte-area:focus{background:#fffef8;}
.rte-area p{margin:0 0 8px;}
.rte-area h3{font-size:16px;font-weight:600;color:#456420;margin:8px 0 6px;}
.rte-area ul,.rte-area ol{margin:0 0 8px;padding-left:22px;}
.rte-area a{color:#5f8a2a;}

/* ============ drag-drop reorder rows ============ */
.reorder-table td.drag-handle{cursor:grab;color:#9aa676;font-size:16px;text-align:center;user-select:none;}
.reorder-table tbody.reorder tr{transition:background .12s;}
.reorder-table tbody.reorder tr.dragging{opacity:.5;background:#eef4dd;}
.reorder-table tbody.reorder tr:hover{background:#f7faec;}

/* ============ usage statistics page ============ */
.stats-h{font-family:Anuphan;font-size:19px;font-weight:600;color:#456420;margin:22px 0 2px;}
.stats-2col{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media(max-width:760px){.stats-2col{grid-template-columns:1fr;}}

/* ---- usage stats page (stats.php) — fit + responsive ---- */
.info-wrap,.info-card{min-width:0;}                 /* let grid/flex children shrink, no overflow */
.info-card svg{max-width:100%;height:auto;}
.cat-row{display:flex;align-items:center;gap:12px;margin-bottom:11px;}
.cat-row .cat-name{flex:0 0 200px;font-size:13px;color:#242a16;text-align:right;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cat-row .cat-bar{flex:1 1 auto;min-width:0;background:#eef1d6;border-radius:6px;height:20px;overflow:hidden;}
.cat-row .cat-bar > i{display:block;height:100%;border-radius:6px;}
.cat-row .cat-num{flex:0 0 36px;text-align:right;font-weight:600;color:#456420;font-size:13px;}
@media(max-width:640px){
    .info-card{padding:18px 15px;}
    .cat-row{gap:9px;}
    .cat-row .cat-name{flex-basis:118px;font-size:12px;}
}
@media(max-width:420px){
    .cat-row .cat-name{flex-basis:84px;font-size:11px;}
    .cat-row .cat-num{flex-basis:26px;font-size:12px;}
}

/* ============ upload / save progress overlay ============ */
.upload-overlay{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;
    background:rgba(36,28,17,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);padding:20px;}
.upload-overlay.show{display:flex;}
.upload-box{background:#fcfef2;border:1px solid #e0e8bb;border-radius:16px;padding:28px 34px;text-align:center;
    box-shadow:0 30px 80px rgba(0,0,0,.4);font-family:Anuphan,sans-serif;max-width:340px;}
.upload-spinner{width:46px;height:46px;border:4px solid #e4ecca;border-top-color:#5f8a2a;border-radius:50%;
    margin:0 auto 16px;animation:uploadSpin .8s linear infinite;}
@keyframes uploadSpin{to{transform:rotate(360deg);}}
.upload-box .t{font-size:16px;font-weight:600;color:#1a220d;}
.upload-box .s{font-size:13px;color:#788457;margin-top:5px;line-height:1.6;}

/* ===== Online reader modal (read-online-only titles) ===== */
.reader-body{overflow:auto;padding:16px;background:#cdda9f;}
.reader-status{text-align:center;color:#3d4a24;font-size:14px;padding:36px 0;}
.reader-pages{display:flex;flex-direction:column;align-items:center;gap:16px;user-select:none;-webkit-user-select:none;}
.reader-canvas{max-width:100%;height:auto;box-shadow:0 6px 22px rgba(44,36,24,.28);border-radius:4px;background:#fff;}