/* === Knowledge (Desktop) — Polished Light Theme === */
/* ใช้กับจอ >= 1025px (กำหนดใน <link media="(min-width:1025px)">) */

/* -------- Tokens / Variables -------- */
:root{
  --bg:#f7fafc; --bg-2:#ffffff; --text:#111827; --muted:#6b7280; --ring:#e5e7eb;
  --brand:#2563eb; --accent:#38bdf8; --shadow:0 12px 34px rgba(2,8,23,.08); --radius:16px;
  --good1:#7C3AED; --good2:#A78BFA; --skill1:#2563EB; --skill2:#38BDF8; --happy1:#10B981; --happy2:#34D399;
  --hero-drift-speed:26s;
  --fg:var(--text); --line:var(--ring);
}

/* -------- Base -------- */
*{box-sizing:border-box}
html,body{margin:0; font-family:'Prompt',system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Thai",sans-serif; background:var(--bg); color:var(--text)}
.container{max-width:1200px; margin:0 auto; padding:0 16px}
a{color:inherit; text-decoration:none}

/* -------- Header (Desktop) -------- */
.site-header{
  position:sticky; top:0; z-index:40; background:var(--bg-2);
  border-bottom:1px solid var(--ring); backdrop-filter:saturate(140%) blur(6px);
}
.header-inner{display:flex; align-items:center; gap:12px; padding:10px 0}
.brand{display:flex; align-items:center; gap:8px; font-weight:800; color:var(--brand)}
.brand .brand-name{color:var(--brand); text-decoration:none}
.nav{display:flex; gap:8px; margin-left:10px}
.nav-link{padding:8px 10px; border-radius:12px; color:var(--text); font-weight:600}
.nav-link.is-active, .nav-link:hover{background:rgba(99,102,241,.08)}
.auth{margin-left:auto; display:flex; gap:8px; align-items:center}
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid var(--ring); color:var(--text); font-weight:700; background:#fff; transition:transform .16s, box-shadow .16s}
.btn.ghost{background:transparent}
.btn.ghost:hover{background:#f1f5f9}
.btn.primary{background:linear-gradient(135deg, var(--brand), var(--accent)); border:none; color:#000; box-shadow:0 10px 24px rgba(37,99,235,.18)}
.btn.primary:hover{filter:saturate(110%) brightness(1.02)}
.btn.small{padding:8px 10px; border-radius:10px; font-size:14px}
.menu-btn{display:none}

/* Keyboard focus */
:where(a,button,.chip,.status,.card):focus{outline:none}
:where(a,button,.chip,.status,.card):focus-visible{
  box-shadow:0 0 0 3px rgba(37,99,235,.25), 0 0 0 6px rgba(37,99,235,.12);
  border-radius:12px;
}

/* -------- HERO -------- */
.hero{
  position:relative; overflow:hidden; padding:56px 0 18px; border-bottom:1px solid var(--ring);
  background:
    radial-gradient(1200px 600px at 50% -10%, #e7f2ff, transparent),
    linear-gradient(180deg, #f6fbff, #ffffff);
}
.hero > *{position:relative; z-index:1}
.hero::before{
  content:""; position:absolute; inset:-10% -5%; z-index:0; pointer-events:none;
  background:
    radial-gradient(1200px 600px at 20% -10%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 60%),
    radial-gradient(900px 520px at 80% 110%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%);
  filter:blur(28px); animation:heroBgDrift var(--hero-drift-speed) ease-in-out infinite alternate;
}
@keyframes heroBgDrift{
  0%{transform:translate3d(-2%,-1%,0)} 50%{transform:translate3d(2%,1%,0)} 100%{transform:translate3d(1%,-2%,0)}
}
.hero-inner{display:grid; grid-template-columns:1.35fr 1fr; gap:20px; align-items:center}
.hero-text h1{
  margin:0 0 6px; font-size:clamp(28px,3.6vw,44px); line-height:1.15; letter-spacing:-.02em; font-weight:900;
}
.hero-text h1 .gx{
  background:linear-gradient(135deg,var(--brand),var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lede{margin:6px 0 8px; color:var(--muted); max-width:62ch}
.subline{margin:4px 0 6px; color:var(--muted)}
.subline.small{font-size:12px}
.muted{color:var(--muted)}
.hero-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.btn.lg{padding:12px 16px; font-size:15px; border-radius:14px}

/* Search */
.search{margin-top:12px; position:relative; max-width:560px}
.search input[type="search"]{
  width:100%; padding:12px 42px 12px 14px; border-radius:14px; border:1px solid var(--ring); background:#fff; color:var(--text);
  box-shadow:0 6px 24px rgba(15,23,42,.06); font-size:15px; outline:none; transition:box-shadow .18s, border-color .18s;
}
.search input[type="search"]::placeholder{color:#94a3b8}
.search input[type="search"]:focus{
  border-color:#dbeafe; box-shadow:0 0 0 4px rgba(37,99,235,.15), 0 8px 26px rgba(15,23,42,.08)
}
.search .icon{position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:14px; color:#94a3b8; pointer-events:none}

/* Chips */
.filters{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap}
.chip{
  display:inline-flex; align-items:center; gap:8px; border:1px solid var(--ring); background:#fff; color:var(--text);
  padding:9px 12px; border-radius:999px; cursor:pointer; font-weight:700; transition:transform .14s, background .18s, box-shadow .18s;
}
.chip:hover{transform:translateY(-1px); background:#f8fafc}
.chip.active{
  color:#fff; border-color:transparent; background:linear-gradient(135deg,var(--brand),var(--accent)); box-shadow:0 10px 26px rgba(37,99,235,.22);
}

/* Hero panel */
.hero-panel{
  background:#fff; border:1px solid var(--ring); border-radius:20px; box-shadow:0 22px 60px rgba(15,23,42,.12), 0 10px 24px rgba(15,23,42,.06);
  padding:16px; align-self:center;
}
.hero-panel .pill{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid var(--ring);
  background:#f8fafc; font-weight:800; font-size:13px; color:#0f172a;
}
.hero-panel ul{margin:12px 0 6px; padding:0; list-style:none}
.hero-panel li{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:12px}
.hero-panel li::before{content:"•"; font-size:18px; line-height:1; transform:translateY(-2px)}
.hero-panel .note{font-size:12px; color:var(--muted); margin-top:4px}
.btn.ghost.disabled{opacity:.6; pointer-events:none}

/* Full-bleed hero inside container */
.container > .hero{margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); width:100vw}
.hero .hero-inner{max-width:1200px; margin:0 auto; padding:0 16px}

/* -------- Cards Grid -------- */
.cards{display:grid; grid-template-columns:repeat(12,1fr); gap:18px; margin:20px 0 32px}
.card{
  grid-column:span 4; background:#fff; border:1px solid var(--ring); border-radius:16px; overflow:hidden;
  box-shadow:0 12px 30px rgba(15,23,42,.06); transition:transform .18s, box-shadow .18s, border-color .18s;
}
@media(max-width:1100px){ .card{grid-column:span 6} }
@media(max-width:700px){ .card{grid-column:span 12} }
.card .thumb{position:relative; aspect-ratio:4/3; background:#f1f5f9; border-bottom:1px solid var(--ring); overflow:hidden}
.card .thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform .35s; filter:saturate(112%)}
.card .body{padding:14px}
.card .title{margin:0 0 6px; font-size:18px; font-weight:800; letter-spacing:.2px}
.meta{display:flex; gap:8px; flex-wrap:wrap; align-items:center; color:var(--muted); font-size:13px}
.meta .dot{display:inline-block; width:8px; height:8px; border-radius:50%}
.dot.good{background:linear-gradient(45deg,var(--good1),var(--good2))}
.dot.skill{background:linear-gradient(45deg,var(--skill1),var(--skill2))}
.dot.happy{background:linear-gradient(45deg,var(--happy1),var(--happy2))}
.actions{display:flex; gap:8px; align-items:center; margin-top:12px}
.card:hover{transform:translateY(-3px); box-shadow:0 18px 36px rgba(2,8,23,.12); border-color:#dbeafe}
.card:hover .thumb img{transform:scale(1.06)}

/* -------- Status Pills -------- */
.status{
  display:inline-flex; align-items:center; gap:6px; appearance:none; -webkit-appearance:none;
  border:1px solid var(--ring); border-radius:999px; padding:8px 12px; font-size:12px; color:var(--text);
  background:#fff; cursor:pointer; box-shadow:inset 0 -1px 0 rgba(0,0,0,.02);
  transition:background .15s, border-color .15s, transform .12s;
}
.status .dot{width:8px; height:8px; border-radius:50%}
.status:hover{background:#f8fafc}
.status:active{transform:translateY(1px)}
.status.unread .dot{background:#94a3b8}
.status.inprogress{background:#fef9c3; border-color:#fde68a}
.status.inprogress .dot{background:#f59e0b}
.status.done{background:#dcfce7; border-color:#bbf7d0}
.status.done .dot{background:#10b981}

/* -------- Toast -------- */
.toast{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(20px);
  background:#111827; color:#fff; padding:10px 14px; border-radius:12px; opacity:0; pointer-events:none; transition:.25s; z-index:50
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}