/* =========================================================================
   I-INSIGHT TUTOR · theme-nature.css  (2026-11-06)
   ธีม "Nature Lab": พื้นมิ้นต์อ่อน · เขียวใบไม้ · สีเน้นจากภาพปก
   (DNA แดงคอรัล/ฟ้าเทอร์ควอยซ์ · เซลล์ม่วง · ไมโทคอนเดรียส้ม · หนังสือเขียวเข้ม)
   หน้าเข้าสู่ระบบใช้ภาพ nature-cover.webp เป็นปกเต็มจอ
   โหลดเป็นไฟล์ CSS สุดท้ายใน index.html — ลบบรรทัด <link> ออกเพื่อกลับธีมเดิมได้ทันที
   ========================================================================= */
:root{
  /* ---- palette จากภาพปก ---- */
  --nt-mint:#E3F6E7;      /* พื้นหลังภาพ */
  --nt-mint-2:#D3EFDB;
  --nt-leaf:#3E9A4A;      /* ใบไม้ */
  --nt-leaf-2:#2C7A3A;
  --nt-forest:#1F5E3A;    /* ปกหนังสือ */
  --nt-lime:#8CC63F;
  --nt-coral:#EE6F5F;     /* DNA */
  --nt-teal:#2AA3B8;      /* DNA / น้ำ */
  --nt-violet:#8E62D0;    /* นิวเคลียส */
  --nt-orange:#F08A3C;    /* ไมโทคอนเดรีย */
  --nt-cream:#F6F1E4;     /* ตัวกล้องจุลทรรศน์ */

  /* ---- remap ตัวแปรของ theme-u2 / portal ---- */
  --u2-blue:#2AA3B8; --u2-aqua:#4DBFA0; --u2-mint:#8FDDB0;
  --u2-green:#2E8B3E; --u2-green-2:#226F31; --u2-lime:#8CC63F;
  --u2-grad:linear-gradient(90deg,#CDEFD8 0%,#DDF4E4 55%,#E3F6E7 100%);
  --u2-grad-deep:linear-gradient(120deg,#1F5E3A 0%,#2E8B3E 55%,#4FA94A 100%);
  --u2-logo:linear-gradient(90deg,#1F7A3C,#7DBE3A);

  --bg:#EEF8F1; --paper:#FFFFFF; --paper-2:#F6FBF7;
  --ink:#16392A; --ink-2:#365A47; --ink-3:#5A7766; --ink-4:#89A294;
  --line:rgba(22,57,42,.09); --line-2:rgba(22,57,42,.17);

  --acid:#2E8B3E; --acid-2:#226F31; --acid-ink:#FFFFFF;
  --acid-soft:rgba(46,139,62,.09); --acid-soft-2:rgba(46,139,62,.16);
  --green-900:#123D25; --green-800:#1F5E3A; --green-700:#2E8B3E; --green-600:#3E9A4A;
  --green-100:#DDF2E2; --green-50:#EEF8F0;

  --sh-1:0 1px 2px rgba(22,70,40,.06),0 2px 8px rgba(22,70,40,.06);
  --sh-2:0 4px 18px rgba(22,80,45,.11);
  --sh-3:0 16px 38px rgba(22,80,45,.15);
  --shadow:var(--sh-3); --shadow-sm:var(--sh-1);
}

/* ---------- พื้นหลัง: มิ้นต์ + ภาพปกจาง ๆ มุมขวาบน ---------- */
html{
  background:
    radial-gradient(900px 520px at 100% 0,rgba(141,221,176,.35),transparent 70%),
    linear-gradient(180deg,var(--nt-mint) 0,var(--bg) 520px) no-repeat,
    var(--bg);
  background-attachment:fixed;
}
body{background:transparent!important;position:relative;min-height:100vh}
body::after{
  content:"";position:absolute;top:0;right:0;z-index:-1;pointer-events:none;
  width:min(1100px,72vw);aspect-ratio:1672/941;
  background:url("nature-cover.webp") right top/100% auto no-repeat;
  opacity:.22;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 45%),linear-gradient(180deg,#000 40%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 45%),linear-gradient(180deg,#000 40%,transparent 100%);
  mask-composite:intersect;
}
.bio-bg{display:none!important}

::selection{background:var(--nt-leaf);color:#fff}
a{color:var(--nt-leaf-2)}

/* ---------- แถบหัว ---------- */
header{
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 4px 20px rgba(22,80,45,.10);
  border:1px solid rgba(255,255,255,.7);
}
.ilogo-mark{box-shadow:0 4px 12px rgba(46,139,62,.30)}
header #identity:not(:empty){background:var(--green-50)}

/* ---------- ปุ่ม ---------- */
button:hover:not(:disabled){background:#F3FAF5;border-color:rgba(62,154,74,.40);box-shadow:0 4px 12px rgba(22,80,45,.12)}
button.primary{
  background:linear-gradient(135deg,#2E8B3E,#56A845);color:#fff;border-color:transparent;
  box-shadow:0 6px 16px rgba(46,139,62,.28);
}
button.primary:hover:not(:disabled){background:linear-gradient(135deg,#1F6E30,#4A9A3A);color:#fff;border-color:transparent;box-shadow:0 8px 22px rgba(46,139,62,.36)}
button.primary.soft:hover:not(:disabled){background:var(--nt-leaf);border-color:var(--nt-leaf)}
button.on{background:var(--green-50);border-color:rgba(46,139,62,.35);color:var(--green-800)}

/* ---------- inputs ---------- */
input,select,textarea{border-color:#D3E2D8}
input:hover,select:hover,textarea:hover{border-color:#B2CCBA}
input:focus,select:focus,textarea:focus{border-color:var(--nt-leaf);box-shadow:0 0 0 3px rgba(62,154,74,.18)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline-color:var(--nt-leaf)}

/* ---------- surfaces ---------- */
.card:hover{border-color:rgba(62,154,74,.40)}
.empty{border-color:#C6DCCD}
#message:not(:empty){border-left-color:var(--nt-leaf)}

/* ---------- sidebar ---------- */
.pshell-side{box-shadow:0 6px 24px rgba(22,80,45,.10)}
.pnav button:hover:not(:disabled){background:#F1F8F3}
.pnav .pico{background:#EDF6F0}
.pnav button.active{background:linear-gradient(90deg,rgba(62,154,74,.14),rgba(140,198,63,.10))}
.pnav button.active .pico{box-shadow:0 4px 10px rgba(46,139,62,.35)}
.pnav .pcount{background:#EDF6F0}

/* ---------- KPI: สีเน้นจากภาพ ---------- */
.pmetric::after{background:radial-gradient(circle,rgba(141,221,176,.35),transparent 68%)}
.pmetric:nth-child(1) i{color:var(--nt-teal)}
.pmetric:nth-child(2) i{color:var(--nt-leaf-2)}
.pmetric:nth-child(3) i{color:var(--nt-violet)}
.pmetric:nth-child(4) i{color:var(--nt-orange)}
.pd-kpi b svg{color:var(--nt-leaf)}

/* ---------- คลังสื่อ ---------- */
.msearch input{background:#F3F9F5}
.mchip b{background:#EDF6F0}
.mchip.on{box-shadow:0 6px 16px rgba(46,139,62,.28)}
.mview button.on{background:var(--green-50);color:var(--nt-leaf-2)}
.mmore>summary:hover,.mmore[open]>summary,.mmenu button:hover:not(:disabled){background:#F1F8F3}
.mcard>.doc-cover{background:linear-gradient(135deg,#EEF8F1,#F6F1E4)}
.mcover-html{background:linear-gradient(135deg,#2AA3B8,#3E9A4A 70%,#8CC63F)}
.mcover-game{background:linear-gradient(135deg,#8E62D0,#2AA3B8)}
.mcover-link{background:linear-gradient(135deg,#1F5E3A,#8CC63F)}
.mcover-pdf,.mcover-drive{background:linear-gradient(135deg,#EE6F5F,#F08A3C)}
.mcover-video{background:linear-gradient(135deg,#16392A,#2AA3B8)}
.mcover.has-preview .mcover-ext{background:rgba(31,94,58,.88)}
#resourceForm{background:#F6FBF7}

/* ---------- dashboard / toast / dialog ---------- */
.pd-hero{box-shadow:0 20px 50px rgba(31,94,58,.26)}
.pd-hero::after{background:radial-gradient(420px 220px at 85% 10%,rgba(140,198,63,.38),transparent 70%),radial-gradient(360px 200px at 10% 110%,rgba(42,163,184,.30),transparent 70%)}
.pd-hero small{color:#DDF5E4}
dialog::backdrop{background:rgba(18,52,34,.42)}
@media(max-width:650px){
  .pmobilebar button.active{color:var(--nt-leaf-2);background:var(--green-50)}
}

/* =========================================================================
   หน้าเข้าสู่ระบบ · ภาพปกเต็มจอ
   ========================================================================= */
html:has(#loginBox:not([hidden])){background:var(--nt-mint)}
body:has(#loginBox:not([hidden]))::after{
  position:fixed;inset:0;width:auto;aspect-ratio:auto;opacity:1;
  background:
    linear-gradient(90deg,var(--nt-mint) 0,var(--nt-mint) 26%,rgba(227,246,231,.82) 40%,rgba(227,246,231,0) 58%),
    url("nature-cover.webp") right center/cover no-repeat,
    var(--nt-mint);
  -webkit-mask-image:none;mask-image:none;
  animation:ntCoverIn .9s ease-out both;
}
@keyframes ntCoverIn{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:none}}

main:has(#loginBox:not([hidden])){
  grid-template-columns:minmax(0,500px);justify-content:start;align-content:center;
  gap:22px;max-width:none;
  margin:0;padding:clamp(14px,3vh,34px) 20px 40px clamp(20px,7vw,120px);
  min-height:calc(100vh - 140px);
}
main:has(#loginBox:not([hidden])) .login-hero{max-width:500px}
.login-hero .hero-art{display:none!important}
.login-hero .eyebrow{background:rgba(255,255,255,.92);color:var(--nt-forest);box-shadow:var(--sh-1)}
.login-hero .eyebrow::before{background:var(--nt-coral);box-shadow:0 0 0 4px rgba(238,111,95,.2)}
.login-hero h1{color:var(--nt-forest);font-size:clamp(32px,3.6vw,48px);margin:16px 0 10px}
.login-hero h1 em{background:linear-gradient(90deg,#2E8B3E 0%,#2AA3B8 60%,#8E62D0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.login-hero p{color:var(--ink-2);font-size:15px;max-width:460px}
.login-hero ul{margin-top:14px}
.login-hero li{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.9);color:var(--ink-2);font-weight:500}
.login-hero li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--nt-teal)}
.login-hero li:nth-child(1)::before{background:var(--nt-coral)}
.login-hero li:nth-child(3)::before{background:var(--nt-violet)}

#loginBox{
  background:rgba(255,255,255,.93);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(62,154,74,.14);border-radius:24px;
  box-shadow:0 24px 60px rgba(31,94,58,.18),0 2px 6px rgba(31,94,58,.06);
  padding:28px 30px;position:relative;overflow:hidden;
}
#loginBox::before{
  content:"";position:absolute;left:0;right:0;top:0;height:5px;
  background:linear-gradient(90deg,var(--nt-coral),var(--nt-orange) 25%,var(--nt-lime) 50%,var(--nt-teal) 75%,var(--nt-violet));
}
#loginBox h1{color:var(--nt-forest)}
#loginBox input{background:#F7FBF8}
#loginBox input:focus{background:#fff}

/* แล็ปท็อปจอเตี้ย: ย่อหัวเรื่องให้ฟอร์มอยู่ในจอเดียว */
@media(min-width:901px) and (max-height:820px){
  .login-hero h1{font-size:34px;margin:12px 0 6px}
  .login-hero p{font-size:14px;margin:0}
  .login-hero ul{display:none}
  #loginBox{padding:22px 26px}
  #loginBox h1{font-size:24px}
}

/* แท็บเล็ต/มือถือ: ภาพปกเป็นแบนเนอร์ด้านบน */
@media(max-width:900px){
  body:has(#loginBox:not([hidden]))::after{display:none}
  main:has(#loginBox:not([hidden])){
    grid-template-columns:minmax(0,560px);justify-content:center;
    padding:6px 16px 32px;min-height:0;gap:16px;
  }
  .login-hero::before{
    content:"";display:block;width:100%;aspect-ratio:16/10;margin-bottom:16px;border-radius:22px;
    background:url("nature-cover-960.webp") right bottom/auto 100% no-repeat,var(--nt-mint);
    box-shadow:var(--sh-2);
  }
  .login-hero h1{font-size:30px;margin-top:14px}
  #loginBox{padding:24px 20px}
}

@media(prefers-reduced-motion:reduce){
  body:has(#loginBox:not([hidden]))::after{animation:none}
}