/* ============================================
   ANGELUS RO WIKI - Clean Pastel CSS
   Mobile-safe, no framework required
============================================ */

:root{
  --bg1:#e9f6ff;
  --bg2:#eef9f4;
  --bg3:#f4f1ff;

  --card:#ffffffcc;
  --card2:#ffffffd9;

  --text:#22324a;
  --muted:#6b7a95;

  --line:#d8e7ff;
  --shadow: 0 18px 50px rgba(28, 75, 140, .10);

  --radius:18px;
  --radius2:22px;

  --mint:#bff3e1;
  --sky:#bfe7ff;
  --lilac:#d8ccff;

  --accent:#7aa7ff;
  --accent2:#76e0c5;

  --sideW: 280px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Thai", Arial, sans-serif;
  color:var(--text);

  background:
    radial-gradient(1200px 800px at 20% 10%, var(--bg1), transparent 60%),
    radial-gradient(1100px 800px at 85% 25%, var(--bg3), transparent 55%),
    radial-gradient(1200px 900px at 40% 90%, var(--bg2), transparent 55%),
    linear-gradient(180deg, #f6fbff 0%, #f2fbf7 60%, #f6f3ff 100%);

  overflow-x:hidden;
}

/* Shell */
.wki-shell{
  display:flex;
  min-height:100vh;
  padding:18px;
  gap:18px;
}

/* Sidebar */
.wki-side{
  width:var(--sideW);
  flex:0 0 var(--sideW);
  border-radius: var(--radius2);
  background: linear-gradient(180deg, #ffffffd9 0%, #ffffffb8 100%);
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  padding:14px;
  position: sticky;
  top:18px;
  height: calc(100vh - 36px);
  overflow:auto;
}

.wki-brand{
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px 10px 14px;
  border-bottom:1px solid var(--line);
}

.wki-logo{
  width:46px;
  height:46px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg, #c5ecff, #dcd0ff, #c9f7e8);
  box-shadow: 0 12px 26px rgba(65,120,220,.15);
  font-weight:800;
}

.wki-brand-title{
  font-weight:800;
  letter-spacing:.2px;
  line-height:1.1;
}
.wki-brand-sub{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

.wki-nav{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px 6px 10px;
}

.wki-nav-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:16px;
  text-decoration:none;
  color:var(--text);
  border:1px solid transparent;
  background: rgba(255,255,255,.55);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.wki-nav-item:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(40, 110, 210, .12);
  border-color: var(--line);
}

.wki-nav-ic{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background: linear-gradient(135deg, #e9f6ff, #f4f1ff);
  border:1px solid var(--line);
}

.wki-nav-txt{
  font-weight:650;
}

.wki-side-foot{
  margin-top:auto;
  padding:10px 6px 6px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.wki-chip{
  font-size:12px;
  color:var(--muted);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.6);
}

/* Main */
.wki-main{
  flex:1;
  min-width:0;
  border-radius: var(--radius2);
  background: linear-gradient(180deg, #ffffffb8 0%, #ffffff8f 100%);
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  padding:16px;
}

/* Topbar */
.wki-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 10px 14px;
  border-bottom:1px solid var(--line);
}

.wki-search{
  position:relative;
  flex:1;
  max-width: 640px;
}

.wki-search input{
  width:100%;
  height:42px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.75);
  padding:0 44px 0 42px;
  outline:none;
  font-size:14px;
  color:var(--text);
}

.wki-search input:focus{
  border-color: rgba(122,167,255,.7);
  box-shadow: 0 0 0 4px rgba(122,167,255,.18);
}

.wki-search-ic{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  opacity:.7;
  font-size:14px;
}

.wki-clear{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:999px;
  text-decoration:none;
  color:var(--muted);
  border:1px solid var(--line);
  background: rgba(255,255,255,.65);
}

.wki-top-actions{
  display:flex;
  gap:10px;
  flex:0 0 auto;
}

.wki-iconbtn{
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.7);
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.wki-iconbtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(45,110,200,.12);
}

/* Hero */
.wki-hero{
  padding:16px 10px 10px;
  text-align:center;
}
.wki-hero-title{
  margin:10px 0 6px;
  font-size:46px;
  letter-spacing:.2px;
  font-weight:900;
  color:#78a6ff;
  text-shadow: 0 10px 24px rgba(120,166,255,.25);
}
.wki-hero-sub{
  margin:0 auto;
  max-width: 760px;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}

/* 3-card grid */
.wki-grid3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
  padding:14px 6px 6px;
}

/* Card */
.wki-card{
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: linear-gradient(180deg, var(--card) 0%, var(--card2) 100%);
  box-shadow: 0 18px 40px rgba(45,110,200,.08);
  overflow:hidden;
}
.wki-card-head{
  padding:12px 14px;
  border-bottom:1px solid var(--line);
}
.wki-card-title{
  font-weight:850;
  letter-spacing:.2px;
}
.wki-card-body{
  padding:12px 14px 14px;
}

.wki-card--mint{
  background: linear-gradient(180deg, rgba(191,243,225,.45) 0%, rgba(255,255,255,.85) 60%);
}
.wki-card--sky{
  background: linear-gradient(180deg, rgba(191,231,255,.55) 0%, rgba(255,255,255,.86) 60%);
}
.wki-card--table{
  background: linear-gradient(180deg, rgba(216,204,255,.35) 0%, rgba(255,255,255,.86) 65%);
}

/* Mini blocks */
.wki-mini{
  border-radius:16px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.7);
  padding:10px 10px;
  margin-bottom:10px;
}
.wki-mini-title{
  font-weight:800;
  margin-bottom:8px;
}
.wki-mini-body{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.wki-kv{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:13px;
}
.wki-k{ color:var(--muted); }
.wki-v{ font-weight:750; }

/* Updates list */
.wki-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.wki-list-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.wki-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  margin-top:6px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 8px 16px rgba(122,167,255,.25);
}
.wki-list-title{ font-weight:850; font-size:13px; }
.wki-list-sub{ color:var(--muted); font-size:12px; margin-top:3px; line-height:1.35; }

/* Tips bullets */
.wki-bullets{
  margin:0;
  padding-left:18px;
  color:var(--text);
  font-size:13px;
  line-height:1.55;
}
.wki-bullets li{ margin:6px 0; color:var(--muted); }
.wki-bullets li::marker{ color: #8ab4ff; }

/* Quick links */
.wki-mini--links{ margin-top:12px; }
.wki-links{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.wki-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  text-decoration:none;
  color:var(--text);
  border:1px solid var(--line);
  background: rgba(255,255,255,.6);
  transition: transform .12s ease, box-shadow .12s ease;
}
.wki-link:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(45,110,200,.12);
}
.wki-link-ic{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background: linear-gradient(135deg, #e9f6ff, #f4f1ff);
  border:1px solid var(--line);
}

/* Sections */
.wki-section{
  padding:14px 6px 0;
}
.wki-section-title{
  font-weight:900;
  margin:10px 6px 10px;
}

/* Tables */
.wki-table-wrap{
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
.wki-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width: 520px;
}

.wki-table thead th{
  text-align:left;
  font-size:13px;
  color:var(--muted);
  font-weight:850;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  background: rgba(255,255,255,.5);
}

.wki-table tbody td{
  padding:12px 14px;
  border-bottom:1px solid rgba(216,231,255,.75);
  font-size:13px;
  vertical-align:middle;
}

.wki-table tbody tr:hover td{
  background: rgba(255,255,255,.55);
}

.wki-strong{ font-weight:850; }
.wki-rank{ font-weight:900; color:#4c79ff; }
.wki-score{ font-weight:900; }
.wki-price{ font-weight:900; }
.wki-iccell{ width:92px; }
.wki-item-ic{
  display:inline-grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.7);
}

/* Footer */
.wki-footer{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:18px 10px 6px;
  color:var(--muted);
  font-size:12px;
}
.wki-footer-right{ white-space:nowrap; }

/* ============================================
   Responsive: Tablet
============================================ */
@media (max-width: 1100px){
  :root{ --sideW: 250px; }
  .wki-hero-title{ font-size:40px; }
  .wki-grid3{ grid-template-columns: 1fr; }
  .wki-table{ min-width: 560px; }
}

/* ============================================
   Responsive: Mobile (no layout break)
============================================ */
@media (max-width: 820px){
  .wki-shell{
    flex-direction:column;
    padding:12px;
  }

  .wki-side{
    width:auto;
    flex: none;
    position:relative;
    top:auto;
    height:auto;
    overflow:visible;
    padding:12px;
  }

  .wki-nav{
    flex-direction:row;
    flex-wrap:wrap;
    gap:8px;
    padding:12px 2px 6px;
  }

  .wki-nav-item{
    width: calc(50% - 4px);
    padding:10px 10px;
  }

  .wki-main{
    padding:12px;
  }

  .wki-topbar{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }

  .wki-top-actions{
    justify-content:flex-end;
  }

  .wki-search{
    max-width:none;
  }

  .wki-hero{
    padding:14px 8px 6px;
  }
  .wki-hero-title{
    font-size:34px;
    line-height:1.08;
  }

  .wki-grid3{
    grid-template-columns: 1fr;
    padding:12px 2px 2px;
  }

  .wki-table{
    min-width: 620px; /* ให้เลื่อนแนวนอน ไม่เพี้ยน */
  }

  .wki-footer{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }
}

/* Small phones */
@media (max-width: 420px){
  .wki-nav-item{
    width:100%;
  }
  .wki-hero-title{ font-size:30px; }
}

/* =========================
   Angelus Wiki Color Pack
   (adds colors/emoji vibe, keeps font & sizes from base)
   ========================= */
:root{
  --wki-accent-1: rgba(255, 193, 214, .95);
  --wki-accent-2: rgba(165, 220, 255, .95);
  --wki-accent-3: rgba(206, 255, 230, .95);
  --wki-accent-4: rgba(255, 231, 172, .95);
  --wki-stroke: rgba(120, 150, 190, .18);
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  background:
    radial-gradient(600px 350px at 12% 8%, rgba(255,193,214,.12), transparent 60%),
    radial-gradient(680px 420px at 82% 14%, rgba(165,220,255,.12), transparent 60%),
    radial-gradient(680px 520px at 35% 88%, rgba(206,255,230,.10), transparent 60%),
    radial-gradient(520px 420px at 88% 86%, rgba(255,231,172,.10), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 10px, rgba(255,255,255,.00) 10px 24px);
  opacity: .9;
}

.wki-side{
  border: 1px solid var(--wki-stroke);
  box-shadow: 0 20px 50px rgba(30,60,120,.14);
}

.wki-logo{ position: relative; overflow:hidden; }
.wki-logo::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: rotate(25deg);
  animation: wkiShine 3.2s ease-in-out infinite;
  opacity: .55;
}
@keyframes wkiShine{
  0%{ transform: translateX(-40%) rotate(25deg); }
  55%{ transform: translateX(140%) rotate(25deg); }
  100%{ transform: translateX(140%) rotate(25deg); }
}

.wki-nav-item{
  border: 1px solid rgba(140,170,220,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.72));
}
.wki-nav-item:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(40,110,210,.16);
  border-color: rgba(122,167,255,.40);
}
.wki-nav-item.is-active{
  border-color: rgba(122,167,255,.70);
  box-shadow: 0 18px 40px rgba(40,110,210,.18);
  background:
    radial-gradient(220px 120px at 18% 20%, rgba(255,193,214,.35), transparent 60%),
    radial-gradient(240px 140px at 86% 30%, rgba(165,220,255,.35), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
}

.wki-section-title{ position: relative; padding-left: 14px; }
.wki-section-title::before{
  content:"";
  position:absolute;
  left:0; top: 6px;
  width: 6px; height: 70%;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--wki-accent-1), var(--wki-accent-2));
  box-shadow: 0 10px 22px rgba(120,160,220,.22);
}

.wki-card{
  border: 1px solid rgba(120,150,190,.16);
  box-shadow: 0 18px 40px rgba(30,60,120,.10);
}
.wki-card-head{
  background:
    radial-gradient(360px 140px at 10% 20%, rgba(255,193,214,.26), transparent 70%),
    radial-gradient(360px 140px at 92% 10%, rgba(165,220,255,.26), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  border-bottom: 1px solid rgba(120,150,190,.14);
}

.wki-callout{
  border: 1px dashed rgba(122,167,255,.45);
  background:
    radial-gradient(340px 160px at 16% 20%, rgba(206,255,230,.24), transparent 65%),
    radial-gradient(340px 160px at 88% 0%, rgba(255,231,172,.20), transparent 65%),
    rgba(255,255,255,.74);
  padding: 14px 16px;
  border-radius: 16px;
}

.wki-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(120,150,190,.18);
  background: rgba(255,255,255,.72);
  box-shadow: 0 12px 26px rgba(30,60,120,.10);
}
/* ===============================
   Angelus Wiki – Font Weight Fix
   =============================== */
body{
  font-size:14px;
  line-height:1.7;
  font-weight:400;
}

.wki-hero-title,
.wki-section-title,
.wki-card-title,
.wki-mini-title,
.wki-list-title,
.wki-rank,
.wki-score,
.wki-price,
.wki-brand-title,
.wki-nav-txt,
.wki-table thead th,
.wki-table tbody td,
.wki-v,
.wki-bullets,
.wki-bullets li,
.wki-badge,
.wki-chip,
.wki-strong{
  font-weight:400 !important;
}

b,strong{
  font-weight:500;
}

[hidden]{ display:none !important; }