:root{
    --purple-deep:#3E1F63;
    --purple-deep-2:#4A2574;
    --purple-mid:#7B4CA0;
    --purple-soft:#EFE6F7;
    --purple-line:#C9AEE0;
    --white:#FFFFFF;
    --ink:#241B2F;
    --ink-soft:#5B4C6B;
    --gold:#C9A227;
    --radius:14px;
    --step:0;
    --fs-base: calc(16px + (var(--step) * 1px));
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Sarabun', sans-serif;
    background:var(--white);
    color:var(--ink);
    font-size:var(--fs-base);
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  .display{font-family:'Chonburi', 'Sarabun', serif;}
  .label{font-family:'Mitr', sans-serif; letter-spacing:.06em;}
  .wrap{max-width:1200px; margin:0 auto; padding:0 24px;}

  /* ---------- Leaf divider signature ---------- */
  .leaf-divider{width:100%; height:34px; overflow:hidden; line-height:0;}
  .leaf-divider svg{width:100%; height:100%; display:block;}

  /* ---------- Utility bar ---------- */
  .utility-bar{
    background:var(--purple-deep);
    color:#EDE3F7;
    font-family:'Mitr', sans-serif;
    font-size:13px;
  }
  .utility-bar .wrap{
    display:flex; align-items:center; justify-content:flex-end; gap:20px;
    height:38px;
  }
  .util-group{display:flex; align-items:center; gap:8px;}

  .login-btn-top{
    font-family:'Mitr'; font-size:13px; color:var(--purple-deep); background:#fff;
    padding:6px 16px; border-radius:999px; font-weight:500; transition:opacity .15s ease;
  }
  .login-btn-top:hover{opacity:.85;}
  .fs-btn{
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.35);
    color:#fff; width:26px; height:26px; border-radius:6px;
    cursor:pointer; font-size:13px; line-height:1;
    transition:background .15s ease;
  }
  .fs-btn:hover, .fs-btn:focus-visible{background:rgba(255,255,255,.28);}
  .fs-btn:focus-visible{outline:2px solid #fff; outline-offset:2px;}

  .search-wrap{position:relative;}
  .search-toggle{
    display:flex; align-items:center; gap:6px; background:none; border:none;
    color:#EDE3F7; cursor:pointer; font-family:'Mitr',sans-serif; font-size:13px;
  }
  .search-panel{
    position:absolute; top:44px; right:0; background:#fff; color:var(--ink);
    border-radius:var(--radius); box-shadow:0 18px 40px rgba(62,31,99,.28);
    width:340px; padding:16px; display:none; z-index:60;
    border:1px solid var(--purple-line);
  }
  .search-panel.open{display:block;}
  .search-panel input{
    width:100%; padding:10px 12px; border:1.5px solid var(--purple-line);
    border-radius:10px; font-family:'Sarabun'; font-size:14px; outline:none;
  }
  .search-panel input:focus{border-color:var(--purple-mid);}
  .search-tabs{display:flex; gap:6px; margin:10px 0;}
  .search-tabs button{
    flex:1; background:var(--purple-soft); border:none; padding:6px 4px;
    border-radius:8px; font-family:'Mitr'; font-size:12px; color:var(--purple-deep);
    cursor:pointer;
  }
  .search-tabs button.active{background:var(--purple-deep); color:#fff;}
  .search-results{max-height:220px; overflow:auto; font-size:13px;}
  .search-results .r{padding:8px 6px; border-bottom:1px dashed var(--purple-line);}
  .search-results .r small{color:var(--ink-soft); display:block; font-family:'Mitr'; font-size:11px; margin-top:2px;}
  .search-empty{color:var(--ink-soft); font-size:13px; padding:8px 4px;}

  /* ---------- Header ---------- */
  header.site-header{
    background:var(--purple-deep-2);
    color:#fff;
  }
  .brand-row{
    display:flex; align-items:center; gap:16px;
    padding:16px 0;
  }
  .brand-row img.logo{height:56px; width:56px; object-fit:contain; background:#fff; border-radius:10px; padding:6px;}
  .brand-text .th{font-family:'Chonburi'; font-size:22px; line-height:1.3;}
  .brand-text .en{font-family:'Mitr'; font-size:12px; letter-spacing:.12em; color:#D9C6EC;}

  nav.main-nav{background:var(--purple-deep); border-top:1px solid rgba(255,255,255,.12);}
  nav.main-nav ul{
    display:flex; list-style:none; flex-wrap:wrap;
    font-family:'Mitr'; font-size:14.5px;
  }
  nav.main-nav a{
    display:block; padding:14px 18px; color:#EDE3F7; position:relative;
  }
  nav.main-nav a::after{
    content:""; position:absolute; left:18px; right:18px; bottom:8px; height:2px;
    background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
  }
  nav.main-nav a:hover::after, nav.main-nav a:focus-visible::after{transform:scaleX(1);}
  nav.main-nav a:focus-visible{outline:2px solid var(--gold); outline-offset:-2px;}

  .nav-toggle{display:none; background:none; border:none; color:#fff; font-size:24px; padding:10px 16px;}

  /* ---------- Hero slider ---------- */
  .hero{position:relative; background:var(--purple-deep); overflow:hidden;}
  .slides{position:relative; height:460px;}
  .slide{
    position:absolute; inset:0; opacity:0; transition:opacity .9s ease;
    display:flex; align-items:center;
    background-size:cover; background-position:center;
  }
  .slide.active{opacity:1;}
  .slide::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(43,17,71,.88) 0%, rgba(43,17,71,.55) 48%, rgba(43,17,71,.15) 100%);
  }
  .slide-content{position:relative; z-index:2; color:#fff; padding:0 24px; max-width:640px; margin:0 auto; width:100%;}
  .slide-content .eyebrow{font-family:'Mitr'; font-size:13px; letter-spacing:.18em; color:var(--gold); margin-bottom:10px;}
  .slide-content h1{font-family:'Chonburi'; font-size:clamp(26px,4vw,42px); line-height:1.35; margin-bottom:14px;}
  .slide-content p{color:#E4D6F2; margin-bottom:22px; max-width:520px; font-size:15px;}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Mitr'; font-size:14px; padding:12px 22px; border-radius:999px;
    cursor:pointer; border:1.5px solid transparent; transition:all .18s ease;
  }
  .btn-gold{background:var(--gold); color:#3A2A05;}
  .btn-gold:hover{background:#E0B92E;}
  .btn-outline{border-color:rgba(255,255,255,.6); color:#fff;}
  .btn-outline:hover{background:rgba(255,255,255,.12);}
  .btn-purple{background:var(--purple-deep-2); color:#fff;}
  .btn-purple:hover{background:var(--purple-deep);}

  .slide-dots{position:absolute; z-index:3; bottom:20px; left:0; right:0; display:flex; justify-content:center; gap:8px;}
  .slide-dots button{
    width:9px; height:9px; border-radius:50%; border:1.5px solid #fff; background:transparent; cursor:pointer; padding:0;
  }
  .slide-dots button.active{background:var(--gold); border-color:var(--gold);}
  .slide-nav-btn{
    position:absolute; top:50%; transform:translateY(-50%); z-index:3;
    background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.5); color:#fff;
    width:38px; height:38px; border-radius:50%; cursor:pointer; font-size:16px;
  }
  .slide-nav-btn:hover{background:rgba(255,255,255,.3);}
  .slide-nav-btn.prev{left:16px;} .slide-nav-btn.next{right:16px;}

  /* ---------- Stats ---------- */
  .stats{background:var(--purple-soft); padding:34px 0;}
  .stats .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center;}
  .stat b{display:block; font-family:'Chonburi'; font-size:clamp(24px,3vw,34px); color:var(--purple-deep-2);}
  .stat span{font-family:'Mitr'; font-size:13px; color:var(--ink-soft);}

  /* ---------- Section shell ---------- */
  section{padding:64px 0;}
  .section-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:34px; flex-wrap:wrap; gap:12px;}
  .section-head .eyebrow{font-family:'Mitr'; font-size:12.5px; letter-spacing:.18em; color:var(--purple-mid); margin-bottom:6px;}
  .section-head h2{font-family:'Chonburi'; font-size:clamp(22px,3vw,30px); color:var(--purple-deep-2);}
  .section-link{font-family:'Mitr'; font-size:13.5px; color:var(--purple-deep-2); border-bottom:1.5px solid var(--gold); padding-bottom:2px;}

  /* ---------- Herbarium plant cards ---------- */
  .plant-grid{
    display:grid; grid-template-columns:repeat(5,1fr); gap:18px;
  }
  .plant-card{
    background:#fff; border:1px solid var(--purple-line); border-radius:10px;
    padding:14px 14px 16px; position:relative;
    box-shadow:0 6px 18px rgba(62,31,99,.06);
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .plant-card:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(62,31,99,.16);}
  .plant-card .spec-no{
    position:absolute; top:10px; right:12px; font-family:'Mitr'; font-size:10px; color:var(--purple-mid);
  }
  .plant-thumb{
    height:96px; border-radius:8px; background:var(--purple-soft);
    display:flex; align-items:center; justify-content:center; margin-bottom:10px;
    border:1px dashed var(--purple-line);
  }
  .plant-thumb svg{width:44px; height:44px; color:var(--purple-mid);}
  .plant-card .th-name{font-family:'Sarabun'; font-weight:600; font-size:14.5px; color:var(--ink); margin-bottom:2px;}
  .plant-card .sci-name{font-style:italic; color:var(--ink-soft); font-size:12px; margin-bottom:10px;}
  .plant-card .school-count{
    display:flex; align-items:center; gap:6px; font-family:'Mitr'; font-size:11.5px;
    color:var(--purple-deep-2); border-top:1px dashed var(--purple-line); padding-top:8px;
  }
  .plant-card .school-count b{font-family:'Sarabun'; font-size:14px;}

  /* ---------- News grids ---------- */
  .news-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  .news-card{border-radius:var(--radius); overflow:hidden; border:1px solid var(--purple-line); background:#fff;}
  .news-thumb{height:150px; background:linear-gradient(135deg,var(--purple-deep-2),var(--purple-mid)); display:flex; align-items:center; justify-content:center; color:#fff;}
  .news-thumb svg{width:34px; height:34px; opacity:.85;}
  .news-body{padding:16px 18px 18px;}
  .news-date{font-family:'Mitr'; font-size:11.5px; color:var(--purple-mid); margin-bottom:6px;}
  .news-title{font-weight:600; font-size:15px; margin-bottom:6px; line-height:1.5;}
  .news-excerpt{font-size:13px; color:var(--ink-soft);}

  .tint-section{background:var(--purple-soft);}

  /* ---------- Map section ---------- */
  #school-map, #plant-map{height:420px; border-radius:var(--radius); border:1px solid var(--purple-line); overflow:hidden;}
  #school-map.school-map-full{height:640px;}
  @media (max-width:720px){
    #school-map.school-map-full{height:460px;}
  }
  .map-legend{display:flex; gap:18px; margin-top:14px; flex-wrap:wrap; font-family:'Mitr'; font-size:12.5px; color:var(--ink-soft);}
  .map-legend span{display:inline-flex; align-items:center; gap:6px;}

  .map-filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px;}
  .map-filter-btn{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Mitr'; font-size:13px; padding:9px 16px; border-radius:999px;
    border:1.5px solid var(--purple-line); background:#fff; color:var(--ink-soft);
    cursor:pointer; transition:all .15s ease;
  }
  .map-filter-btn::before{
    content:""; width:9px; height:9px; border-radius:50%; background:var(--dot, var(--purple-mid)); display:inline-block;
  }
  .map-filter-btn:hover{border-color:var(--purple-mid);}
  .map-filter-btn.active{background:var(--purple-deep-2); border-color:var(--purple-deep-2); color:#fff;}
  .map-filter-btn:focus-visible{outline:2px solid var(--purple-mid); outline-offset:2px;}
  .map-count{margin-top:12px; font-family:'Mitr'; font-size:13px; color:var(--ink-soft);}
  .map-count b{color:var(--purple-deep-2); font-family:'Sarabun'; font-weight:700;}
  .dot{width:10px; height:10px; border-radius:50%; display:inline-block;}

  /* ---------- Best school ---------- */
  .best-wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:center;}
  .best-media{
    height:320px; border-radius:var(--radius);
    background:linear-gradient(160deg,var(--purple-deep-2),var(--purple-mid));
    position:relative; overflow:hidden;
  }
  .best-media .ribbon{
    position:absolute; top:18px; left:-38px; background:var(--gold); color:#3A2A05;
    font-family:'Mitr'; font-size:12px; padding:6px 46px; transform:rotate(-40deg);
    box-shadow:0 4px 10px rgba(0,0,0,.2);
  }
  .best-media svg{position:absolute; inset:0; margin:auto; width:120px; height:120px; opacity:.25; color:#fff;}
  .best-badge{
    display:inline-flex; align-items:center; gap:8px; background:var(--purple-soft); color:var(--purple-deep-2);
    font-family:'Mitr'; font-size:12px; padding:6px 14px; border-radius:999px; margin-bottom:14px;
  }
  .best-wrap h3{font-family:'Chonburi'; font-size:24px; color:var(--purple-deep-2); margin-bottom:10px;}
  .best-wrap p{color:var(--ink-soft); margin-bottom:18px; font-size:14.5px;}
  .best-stats{display:flex; gap:26px; margin-bottom:22px;}
  .best-stats div b{display:block; font-family:'Chonburi'; font-size:22px; color:var(--purple-deep-2);}
  .best-stats div span{font-family:'Mitr'; font-size:11.5px; color:var(--ink-soft);}

  /* ---------- Membership CTA ---------- */
  .cta{
    background:var(--purple-deep-2); color:#fff; border-radius:20px; padding:44px 40px;
    display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
    position:relative; overflow:hidden;
  }
  .cta::after{
    content:""; position:absolute; right:-40px; top:-40px; width:220px; height:220px; border-radius:50%;
    background:rgba(255,255,255,.06);
  }
  .cta h3{font-family:'Chonburi'; font-size:24px; margin-bottom:8px; position:relative;}
  .cta p{color:#E4D6F2; font-size:14px; max-width:460px; position:relative;}
  .cta .btn{position:relative;}

  /* ---------- Page banner (sub-pages) ---------- */
  .page-banner{background:var(--purple-deep-2); color:#fff; padding:52px 0 40px;}
  .page-banner .eyebrow{font-family:'Mitr'; font-size:12.5px; letter-spacing:.18em; color:var(--gold); margin-bottom:10px;}
  .page-banner h1{font-family:'Chonburi'; font-size:clamp(24px,3.4vw,32px); margin-bottom:10px; max-width:760px;}
  .page-banner p{color:#E4D6F2; font-size:14.5px; max-width:620px;}

  /* ---------- Filter toolbar ---------- */
  .filter-toolbar{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:8px;}
  .filter-toolbar input[type="text"], .filter-toolbar select{
    font-family:'Sarabun'; font-size:14px; padding:11px 14px; border-radius:10px;
    border:1.5px solid var(--purple-line); outline:none; background:#fff; color:var(--ink);
  }
  .filter-toolbar input[type="text"]{flex:1; min-width:220px;}
  .filter-toolbar select{min-width:170px;}
  .filter-toolbar input:focus, .filter-toolbar select:focus{border-color:var(--purple-mid);}

  /* ---------- School directory list ---------- */
  .school-list{display:flex; flex-direction:column; gap:12px; margin-top:8px;}
  .school-row{
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    background:#fff; border:1px solid var(--purple-line); border-radius:12px; padding:16px 18px;
    scroll-margin-top:120px;
  }
  .school-name{font-weight:600; font-size:15px; margin-bottom:4px;}
  .school-meta{font-size:12.5px; color:var(--ink-soft); font-family:'Mitr';}
  .school-badges{display:flex; gap:6px; flex-wrap:wrap;}
  .chip{
    font-family:'Mitr'; font-size:11px; padding:4px 10px; border-radius:999px; white-space:nowrap;
  }
  .chip-gold{background:#F7ECC8; color:#7A5E0B;}
  .chip-blue{background:#DCE7F5; color:#2E5C8A;}
  .chip-green{background:#DCEFE8; color:#2C6E58;}
  .chip-grey{background:var(--purple-soft); color:var(--purple-deep-2);}
  .chip-off{background:#F1EEEC; color:#9C9490; border:1px dashed #D8D2CD;}

  /* ---------- Plant detail page ---------- */
  .plant-hero{
    background:var(--purple-deep-2); color:#fff; padding:0;
  }
  .plant-hero .wrap{display:grid; grid-template-columns:280px 1fr; gap:36px; align-items:center; padding:44px 24px;}
  .plant-hero-thumb{
    height:220px; border-radius:16px; background:rgba(255,255,255,.08); border:1px dashed rgba(255,255,255,.4);
    display:flex; align-items:center; justify-content:center;
  }
  .plant-hero-thumb svg{width:80px; height:80px; color:#E4D6F2;}
  .plant-hero .spec-no{font-family:'Mitr'; font-size:12px; color:var(--gold); margin-bottom:8px;}
  .plant-hero h1{font-family:'Chonburi'; font-size:clamp(24px,3.4vw,32px); margin-bottom:6px;}
  .plant-hero .sci-name{font-style:italic; color:#D9C6EC; font-size:16px; margin-bottom:14px;}
  .plant-hero .family-tag{display:inline-block; font-family:'Mitr'; font-size:12px; background:rgba(255,255,255,.12); padding:5px 12px; border-radius:999px; margin-bottom:14px;}
  .plant-hero p.desc{color:#E4D6F2; font-size:14.5px; max-width:600px;}

  .view-toggle{display:flex; gap:10px; margin-bottom:16px;}
  .view-toggle button{
    font-family:'Mitr'; font-size:13px; padding:9px 18px; border-radius:999px;
    border:1.5px solid var(--purple-line); background:#fff; color:var(--ink-soft); cursor:pointer;
  }
  .view-toggle button.active{background:var(--purple-deep-2); border-color:var(--purple-deep-2); color:#fff;}
  .view-toggle button:focus-visible{outline:2px solid var(--purple-mid); outline-offset:2px;}

  .pin-note{
    background:var(--purple-soft); border-radius:10px; padding:12px 16px; font-size:13px;
    color:var(--purple-deep-2); margin-top:14px; font-family:'Mitr'; display:none;
  }
  .pin-note.visible{display:block;}

  /* ---------- Results page ---------- */
  .results-stat-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:16px;}
  .results-stat-card{
    background:#fff; border:1px solid var(--purple-line); border-radius:14px; padding:20px; text-align:center;
  }
  .results-stat-card b{display:block; font-family:'Chonburi'; font-size:26px; color:var(--purple-deep-2); margin-bottom:4px;}
  .results-stat-card span{font-family:'Mitr'; font-size:12px; color:var(--ink-soft);}

  .chart-cols{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
  @media (max-width:800px){.chart-cols{grid-template-columns:1fr;}}
  .chart-card{background:#fff; border:1px solid var(--purple-line); border-radius:16px; padding:24px;}
  .chart-card h3{font-family:'Sarabun'; font-weight:700; font-size:15px; color:var(--ink); margin-bottom:18px;}
  .bar-row{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
  .bar-row .bar-label{width:110px; flex-shrink:0; font-family:'Mitr'; font-size:12px; color:var(--ink-soft);}
  .bar-row .bar-track{flex:1; background:var(--purple-soft); border-radius:999px; height:14px; overflow:hidden;}
  .bar-row .bar-fill{height:100%; background:var(--purple-deep-2); border-radius:999px; transition:width .4s ease;}
  .bar-row .bar-value{width:44px; text-align:right; font-family:'Sarabun'; font-size:12.5px; font-weight:700; color:var(--purple-deep-2); flex-shrink:0;}

  .bp-showcase-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:18px;}
  .bp-showcase-card{
    background:#fff; border:1px solid var(--purple-line); border-radius:16px; overflow:hidden; text-decoration:none; color:inherit;
    display:flex; flex-direction:column;
  }
  .bp-showcase-card:hover{box-shadow:0 14px 30px rgba(62,31,99,.14);}
  .bp-showcase-card .cover{height:130px; background:linear-gradient(135deg,var(--purple-deep-2),var(--purple-mid)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:28px;}
  .bp-showcase-card .cover img{width:100%; height:100%; object-fit:cover;}
  .bp-showcase-card .body{padding:16px; flex:1; display:flex; flex-direction:column;}
  .bp-showcase-card .title{font-weight:700; font-size:14.5px; margin-bottom:6px;}
  .bp-showcase-card .excerpt{font-size:12.5px; color:var(--ink-soft); flex:1;}
  .bp-showcase-card .meta{font-family:'Mitr'; font-size:11px; color:var(--purple-deep-2); margin-top:10px; border-top:1px dashed var(--purple-line); padding-top:8px;}
  .loading-state, .empty-state{padding:30px; text-align:center; color:var(--ink-soft); font-size:13.5px;}

  /* ---------- Footer ---------- */
  footer{background:var(--purple-deep); color:#EDE3F7;}
  .footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1.1fr; gap:32px; padding:52px 0 30px;}
  .footer-brand .th{font-family:'Chonburi'; font-size:18px; color:#fff; margin-bottom:10px;}
  .footer-brand p{font-size:13px; color:#C7B3DC; line-height:1.8;}
  footer h4{font-family:'Mitr'; font-size:13.5px; color:#fff; margin-bottom:14px; letter-spacing:.05em;}
  footer ul{list-style:none;}
  footer li{margin-bottom:9px; font-size:13.5px;}
  footer a:hover{color:var(--gold);}
  .footer-bottom{
    border-top:1px solid rgba(255,255,255,.14); padding:16px 0; font-size:12.5px; color:#B79CD1;
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  }

  /* ---------- Reduced motion ---------- */
  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
    html{scroll-behavior:auto;}
  }

  /* ---------- Responsive ---------- */
  @media (max-width:980px){
    .plant-grid{grid-template-columns:repeat(3,1fr);}
    .news-grid{grid-template-columns:repeat(2,1fr);}
    .best-wrap{grid-template-columns:1fr;}
    .stats .wrap{grid-template-columns:repeat(2,1fr);}
    .footer-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:720px){
    nav.main-nav ul{display:none; flex-direction:column; width:100%;}
    nav.main-nav ul.open{display:flex;}
    .nav-toggle{display:block; margin-left:auto;}
    nav.main-nav .wrap{display:flex; align-items:center;}
    .plant-grid{grid-template-columns:repeat(2,1fr);}
    .news-grid{grid-template-columns:1fr;}
    .slides{height:520px;}
    .search-panel{width:88vw; right:-8px;}
  }