@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');*{box-sizing:border-box}body{margin:0;font-family:'Noto Sans Thai',sans-serif;background:#f5f7f4;color:#17231b}button,input,select{font:inherit}button{border:0;border-radius:10px;padding:10px 14px;background:#edf1ed;cursor:pointer}button:hover{filter:brightness(.97)}.primary{background:#176438;color:#fff}.danger{background:#fff0f0;color:#a02d2d}.hidden{display:none!important}.muted{color:#6c776f}.tiny{font-size:12px}header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid #dfe6df;padding:10px 5%;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{display:flex;align-items:center;gap:12px;cursor:pointer}.brand img{width:54px;height:54px;object-fit:contain;border-radius:10px}.brand b{display:block;font-size:17px}.brand small{display:block;color:#6c776f;letter-spacing:.05em}nav{display:flex;gap:7px;flex-wrap:wrap}.hero-image{min-height:370px;background:linear-gradient(90deg,rgba(9,47,25,.80),rgba(9,47,25,.20)),url('assets/banner.jpg') center/cover no-repeat;display:flex;align-items:center;padding:54px 7%;color:#fff}.hero-copy{max-width:820px}.eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;color:#37704b}.hero-image .eyebrow{color:#dcecdf}.hero-image h1{font-size:clamp(32px,5vw,58px);line-height:1.2;margin:8px 0}.hero-image p{font-size:18px}.hero-search{display:flex;max-width:760px;margin-top:24px;background:#fff;padding:6px;border-radius:14px}.hero-search input{flex:1;border:0;outline:0;padding:10px 12px;min-width:0}.section{padding:40px 7%}.section-head,.pagehead,.admin-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:18px}.section h2,.pagehead h1{margin:3px 0}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:-30px;position:relative}.stat{background:#fff;border:1px solid #e0e7e0;border-radius:16px;padding:18px;text-align:center;box-shadow:0 8px 28px #173e2912}.stat b{display:block;font-size:30px;color:#176438}.stat span{font-size:13px;color:#6c776f}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.type-card{background:#fff;border:1px solid #dfe6df;border-radius:16px;padding:22px;cursor:pointer;transition:.15s}.type-card:hover{transform:translateY(-2px);border-color:#94b89e}.type-icon{font-size:28px}.type-card h3{margin:9px 0}.type-card b{font-size:26px;color:#176438}.type-card span{color:#6c776f;margin-left:5px}.chips{display:flex;flex-wrap:wrap;gap:9px}.chips button{background:#fff;border:1px solid #dfe6df}.chips b{color:#176438}.notice{margin:20px 7% 0;background:#fff7df;border:1px solid #ead598;padding:13px 16px;border-radius:12px}.filters{display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;gap:9px;margin-bottom:16px}.filters input,.filters select,label input,label select{width:100%;padding:11px;border:1px solid #cdd7cf;border-radius:10px;background:#fff}.project-list{display:grid;gap:10px}.project-card{background:#fff;border:1px solid #dfe6df;border-radius:15px;padding:18px;display:flex;justify-content:space-between;gap:20px;cursor:pointer}.project-card:hover{border-color:#95b89f}.project-card h3{margin:9px 0 5px}.project-card p,.project-card small{margin:0;color:#68736b}.badge{display:inline-block;background:#e6f2e9;color:#245f39;border-radius:20px;padding:4px 9px;font-size:12px;margin-right:5px}.badge.light{background:#f0f2ef;color:#667069}.year{font-size:22px;font-weight:700;color:#176438}.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:22px}.empty{background:#fff;border-radius:15px;padding:40px;text-align:center;color:#6b756e}.detail{max-width:900px;margin:0 auto;padding:42px 7%}.detail h1{font-size:clamp(27px,4vw,42px)}.meta{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:25px 0}.meta div{background:#fff;border:1px solid #e0e6e1;border-radius:12px;padding:14px}.meta span{display:block;color:#6c776f;font-size:13px}.download{background:#eaf3ec;border-radius:16px;padding:22px}.admin-tabs{display:flex;gap:8px;margin-bottom:18px}.admin-list{background:#fff;border:1px solid #e0e6e1;border-radius:15px;overflow:hidden}.admin-list>div{padding:13px 15px;border-bottom:1px solid #e8ece8;display:flex;justify-content:space-between;gap:15px}.admin-list small{display:block;color:#6c776f}.formwrap{max-width:800px;margin:0 auto;padding:42px 7%}.formwrap form{display:grid;gap:12px;background:#fff;padding:22px;border-radius:16px;border:1px solid #e0e6e1}.formwrap label{font-weight:600}.formwrap input,.formwrap select{margin-top:5px}.import-box{background:#fff;border:1px solid #e0e6e1;border-radius:16px;padding:20px;margin-bottom:18px}.import-box code{background:#f1f4f1;padding:2px 5px;border-radius:5px}.member-row{display:grid!important;grid-template-columns:1fr 160px auto;align-items:center}.dialog-logo{display:block;width:90px;height:90px;object-fit:contain;margin:auto}dialog{border:0;border-radius:17px;padding:26px;min-width:min(430px,92vw);box-shadow:0 20px 70px #0004}dialog::backdrop{background:#10201799}dialog label{display:block;margin:12px 0;font-weight:600}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}footer{background:#fff;border-top:1px solid #e0e6e1;padding:25px 7%;display:flex;align-items:center;justify-content:center;gap:12px;color:#68736b;text-align:left}footer img{width:48px;height:48px;object-fit:contain}@media(max-width:900px){header{align-items:flex-start;flex-direction:column}.grid4,.stats{grid-template-columns:repeat(2,1fr)}.filters{grid-template-columns:1fr 1fr}.filters input{grid-column:1/-1}.member-row{grid-template-columns:1fr!important}.hero-image{min-height:320px}}@media(max-width:560px){.brand b{font-size:14px}.brand small{font-size:10px}.brand img{width:46px;height:46px}.grid4,.stats,.meta,.filters{grid-template-columns:1fr}.hero-search{display:block}.hero-search button{width:100%;margin-top:5px}.project-card{display:block}.year{margin-top:10px}.section,.detail,.formwrap{padding-left:5%;padding-right:5%}}

dialog{position:fixed;max-height:90dvh;overflow-y:auto;max-width:92vw}dialog form{position:relative}.dialog-close{position:absolute;right:0;top:0;background:transparent;font-size:19px}dialog .dialog-actions button{min-height:42px}

.analytics-table{width:100%;border-collapse:collapse;margin:12px 0 22px}.analytics-table th,.analytics-table td{padding:10px;border-bottom:1px solid #d8e4dc;text-align:left}.analytics-table th{background:#edf5ef}.analytics-table td:nth-child(n+2){text-align:right}

/* Official Banner Integration: maintain complete image at every viewport */
.hero-banner{width:100%;background:#eaf1e8;line-height:0}
.hero-banner img{display:block;width:100%;height:auto;object-fit:contain}
.banner-search-section{padding:16px 7% 42px;background:#f5f7f4}
.banner-search-section .hero-search{margin:0 auto;max-width:900px;box-shadow:0 3px 16px #173e2912;border:1px solid #dfe6df}
@media(max-width:560px){.banner-search-section{padding:12px 5% 28px}}


/* Public homepage analytics — responsive and accessible */
.public-analytics{padding-top:18px}
.usage-summary{margin-bottom:18px}
.usage-chart-card{background:#fff;border:1px solid #dfe8e0;border-radius:18px;padding:20px;box-shadow:0 6px 24px rgba(20,60,30,.04)}
.usage-chart-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.usage-chart-head h3{margin:0;font-size:1.05rem}
.usage-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.85rem;color:#50635a}
.usage-legend span{display:flex;align-items:center;gap:6px}
.usage-legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
.legend-visits,.usage-bar.visits{background:#237b48}
.legend-downloads,.usage-bar.downloads{background:#e0a43d}
.usage-chart{display:flex;align-items:stretch;gap:5px;min-height:205px;overflow-x:auto;padding:12px 0 0;border-bottom:1px solid #dfe8e0}
.usage-day{min-width:24px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:7px}
.usage-bars{height:165px;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:2px}
.usage-bar{width:40%;max-width:17px;min-width:3px;border-radius:4px 4px 0 0;display:block}
.usage-day>span{font-size:.62rem;color:#718178;white-space:nowrap}
@media(max-width:700px){.usage-chart{gap:4px}.usage-day{min-width:22px}.usage-chart-card{padding:12px}.usage-day>span{font-size:.57rem;writing-mode:vertical-rl;transform:rotate(180deg)}}


/* Agroforestry modern theme: keep official banner/logo unchanged */
body{background:#eaf4e8 url('background.webp') center top / cover fixed no-repeat}
header{background:rgba(255,255,255,.95);backdrop-filter:blur(10px)}
.banner-search-section{background:rgba(243,250,245,.75)}
.section{max-width:1480px;margin:0 auto}
.stat,.type-card,.usage-chart-card,.radar-card{background:rgba(255,255,255,.93);backdrop-filter:blur(9px)}
.category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.category-card{min-height:104px;position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:12px;text-align:left;padding:14px;border:1px solid rgba(210,226,214,.9);border-radius:14px;background:#eef5ef;color:#163225;box-shadow:0 5px 20px #183b2912;transition:transform .2s,box-shadow .2s}
.category-card::before{content:'';position:absolute;inset:0;z-index:-2;background-image:var(--category-image);background-position:center right;background-size:cover}
.category-card::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(250,254,250,.99) 0%,rgba(249,253,250,.95) 37%,rgba(249,253,250,.70) 62%,rgba(249,253,250,.04) 100%)}
.category-card:hover,.category-card:focus-visible{transform:translateY(-3px);box-shadow:0 10px 25px #183b2925;border-color:#8ab89b}
.category-icon{flex:0 0 49px;height:49px;border-radius:13px;display:grid;place-items:center;font-size:27px;font-weight:700;color:#0d623e;background:rgba(255,255,255,.91);box-shadow:0 2px 12px #123e2712}
.category-text{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}.category-text strong{font-size:13px;line-height:1.35}.category-text small{font-size:11px;color:#435e4b}.category-arrow{font-size:25px;color:#0c6038;font-weight:700}
.radar-card{border:1px solid #dce9de;border-radius:18px;padding:22px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:24px;align-items:center;box-shadow:0 7px 22px #183b2910}
.radar-visual{text-align:center}.radar-visual svg{width:100%;max-width:410px;height:auto}.radar-key{display:flex;justify-content:center;flex-wrap:wrap;gap:15px;font-size:12px}.radar-key span{display:flex;align-items:center;gap:6px}.radar-key i{display:inline-block;width:12px;height:12px;border-radius:3px}
.radar-details h3{margin-top:0}.radar-table-wrap{overflow-x:auto}.radar-table{width:100%;border-collapse:collapse;font-size:12px}.radar-table th,.radar-table td{padding:9px 7px;border-bottom:1px solid #e5eee6;text-align:left}.radar-table td:nth-child(n+2),.radar-table th:nth-child(n+2){text-align:right;white-space:nowrap}.radar-num{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;background:#eaf4ed;color:#21673f;margin-right:6px}
@media(max-width:1100px){.category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){body{background-attachment:scroll;background-position:center top}.radar-card{grid-template-columns:1fr}.category-card{min-height:95px}}
@media(max-width:540px){.category-grid{grid-template-columns:1fr}.category-card{min-height:90px}.radar-card{padding:13px}}
@media(prefers-reduced-motion:reduce){.category-card{transition:none}.category-card:hover{transform:none}}

.category-icon svg{display:block;width:31px;height:31px;color:#075d3b;flex-shrink:0}
.category-icon{font-size:initial}

/* Homepage unified translucent section design — October 2026 */
:root{--glass-green:#0c4933;--glass-border:rgba(23,91,60,.16)}
#app>.section.public-analytics,#app>.section.category-radar-section,#app>.section:has(.category-grid),#app>.section.home-library-section{
  width:calc(100% - 7%);max-width:1480px;margin:22px auto 26px;
  padding:22px 24px 26px;border:1px solid var(--glass-border);border-radius:22px;
  background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 12px 36px rgba(12,54,32,.10)
}
#app>.section.public-analytics .section-head,#app>.section.category-radar-section .section-head,
#app>.section:has(.category-grid) .section-head,#app>.section.home-library-section .section-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:rgba(255,255,255,.90);border:1px solid rgba(28,96,62,.12);
  border-radius:16px;padding:16px 20px;margin:0 0 18px;
  box-shadow:0 5px 18px rgba(12,54,32,.05)
}
#app>.section.public-analytics .section-head h2,#app>.section.category-radar-section .section-head h2,
#app>.section:has(.category-grid) .section-head h2,#app>.section.home-library-section .section-head h2{
  color:var(--glass-green);font-size:clamp(20px,2.2vw,29px);font-weight:700;
  line-height:1.45;margin:4px 0 5px;text-wrap:balance
}
#app>.section .section-head .eyebrow{color:#226746;letter-spacing:.1em;font-weight:700}
#app>.section .section-head .muted{color:#536f61;line-height:1.65;margin:0}
#app>.section.public-analytics .usage-summary{margin-top:10px}
#app>.section.public-analytics .stat,#app>.section.category-radar-section .radar-card{
  background:rgba(255,255,255,.88);border-color:rgba(25,94,60,.13)
}
.home-library-search{display:flex;gap:10px;margin-bottom:16px}
.home-library-search input{flex:1;min-width:0;background:rgba(255,255,255,.95);border:1px solid #ccded2;border-radius:12px;padding:12px 15px;color:#183d2b}
.library-all-btn{color:#0d5137;background:rgba(255,255,255,.94);border:1px solid #b6d2c0;font-weight:700}
.home-library-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.home-library-item{min-width:0;display:flex;align-items:flex-start;gap:11px;padding:14px 12px;border:1px solid #dce9df;border-radius:14px;background:rgba(255,255,255,.90);cursor:pointer;transition:transform .15s,box-shadow .15s}
.home-library-item:hover,.home-library-item:focus-visible{transform:translateY(-2px);box-shadow:0 7px 18px #123e2719;outline-color:#216b47}
.home-library-icon{flex:0 0 42px;width:42px;height:42px;border-radius:12px;background:#eaf5ed;display:grid;place-items:center;color:#0d5d3d}
.home-library-icon svg{width:25px;height:25px}
.home-library-content{min-width:0;flex:1}.home-library-content h3{font-size:13px;line-height:1.5;margin:5px 0;color:#173c2b;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.home-library-category{color:#236744;font-size:10px;line-height:1.5}.home-library-content small{color:#718577}
.home-library-arrow{color:#155b3a;font-size:25px;line-height:1}
@media(max-width:1050px){.home-library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){#app>.section.public-analytics,#app>.section.category-radar-section,#app>.section:has(.category-grid),#app>.section.home-library-section{width:94%;padding:14px 12px;margin:14px auto 18px;border-radius:16px}#app>.section.public-analytics .section-head,#app>.section.category-radar-section .section-head,#app>.section:has(.category-grid) .section-head,#app>.section.home-library-section .section-head{padding:13px 14px}.home-library-grid{grid-template-columns:1fr}.home-library-search{flex-direction:column}}
@media(prefers-reduced-motion:reduce){.home-library-item{transition:none}.home-library-item:hover{transform:none}}

/* Consistent glass header for main work types */
#app>.section.main-types-section{width:calc(100% - 7%);max-width:1480px;margin:22px auto 26px;padding:22px 24px 26px;border:1px solid var(--glass-border);border-radius:22px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 12px 36px rgba(12,54,32,.10)}
#app>.section.main-types-section .section-head{background:rgba(255,255,255,.90);border:1px solid rgba(28,96,62,.12);border-radius:16px;padding:16px 20px;margin:0 0 18px;box-shadow:0 5px 18px rgba(12,54,32,.05)}
#app>.section.main-types-section .section-head h2{color:var(--glass-green);font-size:clamp(20px,2.2vw,29px);font-weight:700;line-height:1.45;margin:4px 0 5px}
.home-library-downloads{display:block;margin-top:7px;color:#0c5938;font-size:12px;font-weight:700}
@media(max-width:650px){#app>.section.main-types-section{width:94%;padding:14px 12px;margin:14px auto 18px;border-radius:16px}#app>.section.main-types-section .section-head{padding:13px 14px}}

/* Radar axes numbered 1–8, matching the category table */
.radar-visual svg{max-width:440px;overflow:visible}
.radar-num{font-weight:700;min-width:23px}
@media(max-width:540px){.radar-visual svg{max-width:100%}}