:root{
      --bg0:#12070A; --bg1:#1B0B10;
      --gold:#D8B25C; --gold2:#F0D48A;
      --ink:#F8F3E8;
      --muted: rgba(248,243,232,.72);
      --muted2: rgba(248,243,232,.55);
      --stroke: rgba(216,178,92,.22);
      --shadow: 0 18px 70px rgba(0,0,0,.55);
      --radius: 18px; --radius2: 26px;
      --focus: 0 0 0 4px rgba(216,178,92,.28);
      --max: 1100px;
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      --khmer: "Noto Sans Khmer","Battambang", system-ui, -apple-system, Segoe UI, Roboto, Arial;
    }
    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family: var(--khmer);
      color: var(--ink);
      background:
        radial-gradient(900px 600px at 15% 20%, rgba(216,178,92,.18), transparent 60%),
        radial-gradient(800px 520px at 85% 30%, rgba(240,212,138,.10), transparent 58%),
        radial-gradient(900px 600px at 55% 92%, rgba(216,178,92,.08), transparent 60%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
      overflow-x:hidden;
    }
    .noise{
      position:fixed; inset:0; pointer-events:none;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
      mix-blend-mode:overlay; opacity:.35;
    }
    .wrap{ width:min(var(--max), calc(100% - 40px)); margin: 26px auto 80px; }
    header{
      display:flex; gap:18px; align-items:flex-start; justify-content:space-between;
      padding: 12px 6px;
    }
    .brand{ display:flex; gap:14px; align-items:flex-start; }
    .logo{
      width:46px; height:46px; border-radius: 16px;
      background:
        radial-gradient(12px 12px at 30% 30%, rgba(255,255,255,.55), transparent 58%),
        linear-gradient(135deg, rgba(240,212,138,.95), rgba(216,178,92,.75));
      border: 1px solid rgba(216,178,92,.35);
      box-shadow: 0 18px 44px rgba(216,178,92,.18);
      position:relative; overflow:hidden;
    }
    .logo::after{
      content:""; position:absolute; inset:8px; border-radius: 12px;
      border: 1px solid rgba(255,255,255,.18);
      background: radial-gradient(120px 60px at 20% 10%, rgba(255,255,255,.16), transparent 55%);
    }
    h1{ margin:0; font-size: clamp(18px, 2.5vw, 28px); letter-spacing:-.01em; line-height:1.15; }
    .sub{
      margin:6px 0 0; color: var(--muted);
      font-size: 14px; line-height:1.55; max-width: 62ch;
    }
    .sub code{
      font-family: var(--mono);
      color: rgba(248,243,232,.9);
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(216,178,92,.22);
      padding: 2px 8px; border-radius: 999px;
    }
    .hero{
      margin-top: 16px; border-radius: var(--radius2);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      border: 1px solid rgba(216,178,92,.22);
      box-shadow: var(--shadow);
      backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
      overflow:hidden; position:relative;
    }
    .hero::before, .hero::after{
      content:""; position:absolute; left:0; right:0; height:34px;
      background:
        repeating-linear-gradient(90deg, rgba(216,178,92,.0) 0 10px, rgba(216,178,92,.16) 10px 12px, rgba(216,178,92,.0) 12px 22px),
        radial-gradient(24px 12px at 14px 18px, rgba(240,212,138,.18), transparent 60%),
        radial-gradient(24px 12px at 54px 18px, rgba(240,212,138,.16), transparent 60%);
      opacity:.85; pointer-events:none;
    }
    .hero::before{ top:0; border-bottom:1px solid rgba(216,178,92,.14); }
    .hero::after{ bottom:0; border-top:1px solid rgba(216,178,92,.12); transform: scaleY(-1); }

    .heroInner{ position:relative; padding: 24px 22px 26px; display:grid; grid-template-columns: 1fr; gap: 14px; }
    .searchCard{
      background: rgba(0,0,0,.16);
      border: 1px solid rgba(216,178,92,.18);
      border-radius: var(--radius);
      padding: 16px;
      position:relative; overflow:hidden;
    }
    .searchCard::before{
      content:""; position:absolute; inset:-2px;
      background: linear-gradient(90deg, rgba(255,255,255,.05), transparent 50%),
                repeating-linear-gradient(0deg, rgba(216,178,92,.06) 0 1px, rgba(216,178,92,.0) 1px 10px);
      opacity:.55; pointer-events:none;
    }
    .label{
      position:relative;
      font-size: 12px; color: var(--muted2);
      letter-spacing:.08em; text-transform:uppercase;
      margin-bottom: 10px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
    }
    .label code{
      font-family: var(--mono); font-size: 12px;
      color: rgba(248,243,232,.9);
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(216,178,92,.22);
      padding: 3px 8px; border-radius: 999px;
    }
    .bar{ display:flex; gap: 10px; align-items: stretch; }
    .input{ flex:1; position:relative; }
    input[type="text"]{
      width:100%;
      padding: 14px 14px 14px 44px;
      border-radius: 14px;
      border: 1px solid rgba(216,178,92,.22);
      background: rgba(255,255,255,.05);
      color: var(--ink);
      outline:none;
      font-size: 15px;
      transition: border .15s ease, box-shadow .15s ease, background .15s ease;
    }
    input[type="text"]::placeholder{ color: rgba(248,243,232,.42); }
    input[type="text"]:focus{
      border-color: rgba(240,212,138,.55);
      box-shadow: var(--focus);
      background: rgba(255,255,255,.07);
    }
    .mag{
      position:absolute; left: 14px; top: 50%;
      transform: translateY(-50%);
      width: 18px; height:18px;
      opacity:.85; fill: rgba(248,243,232,.75);
      pointer-events:none;
    }
    .metaRow{ position:relative; margin-top: 12px; display:flex; gap: 10px; flex-wrap:wrap; align-items:center; justify-content:space-between; }
    .status{ font-size: 13px; color: var(--muted); min-height: 18px; }

    .topRow{
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      padding: 0 2px;
    }
    .sectionTitle{
      margin:0;
      font-size: 14px;
      color: rgba(248,243,232,.92);
      letter-spacing:-.01em;
    }
    .smallBtn{
      border: 1px solid rgba(216,178,92,.22);
      background: rgba(255,255,255,.04);
      color: rgba(248,243,232,.9);
      padding: 8px 10px;
      border-radius: 12px;
      cursor:pointer;
      transition: transform .12s ease, filter .12s ease, background .12s ease;
      white-space:nowrap;
      font-weight:700;
      font-size: 12px;
    }
    .smallBtn:hover{ background: rgba(255,255,255,.06); transform: translateY(-1px); }
    .smallBtn:active{ transform: translateY(0); }

    .grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
    .card{
      grid-column: span 6;
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      border: 1px solid rgba(216,178,92,.18);
      box-shadow: 0 12px 38px rgba(0,0,0,.28);
      padding: 14px;
      overflow:hidden; position:relative;
      animation: pop .16s ease both;
    }
    @keyframes pop{ from { opacity:0; transform: translateY(6px);} to { opacity:1; transform: translateY(0);} }
    .card::before{
      content:""; position:absolute; inset:-2px;
      background:
        radial-gradient(520px 240px at 18% 0%, rgba(216,178,92,.14), transparent 62%),
        radial-gradient(420px 220px at 90% 0%, rgba(240,212,138,.08), transparent 62%);
      opacity:.9; pointer-events:none;
    }
    .cardInner{ position:relative; display:flex; flex-direction:column; gap:10px; }
    .row{ display:flex; justify-content:space-between; gap: 10px; align-items:flex-start; }
    .title{ font-weight: 900; letter-spacing:-.01em; font-size: 15px; line-height:1.35; margin:0; }
    .kbd{
      font-family: var(--mono);
      font-size: 12px;
      color: rgba(248,243,232,.9);
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(216,178,92,.20);
      padding: 4px 9px;
      border-radius: 10px;
      white-space:nowrap;
    }
    .desc{ color: var(--muted); font-size: 13px; line-height:1.7; margin:0; }
    .tagrow{ display:flex; gap:8px; flex-wrap:wrap; margin-top:2px; }
    .tag{
      font-size: 12px;
      color: rgba(248,243,232,.82);
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(216,178,92,.16);
      background: rgba(255,255,255,.04);
    }
    .empty{
      grid-column: span 12;
      border-radius: var(--radius);
      padding: 16px;
      border: 1px dashed rgba(216,178,92,.24);
      background: rgba(255,255,255,.03);
      color: var(--muted);
      line-height:1.8;
    }
    @media (max-width: 900px){
      .card{ grid-column: span 12; }
      .wrap{ width:min(var(--max), calc(100% - 26px)); }
    }
    @media (prefers-reduced-motion: reduce){
      *{ animation:none !important; transition:none !important; }
    }


.logo{
  width: 46px;              /* base size */
  aspect-ratio: 1 / 1;     /* ALWAYS square */
  min-width: 40px;         /* prevents shrinking too much */
  min-height: 40px;

  border-radius: 16px;
  background:
    radial-gradient(12px 12px at 30% 30%, rgba(255,255,255,.55), transparent 58%),
    linear-gradient(135deg, rgba(240,212,138,.95), rgba(216,178,92,.75));

  border: 1px solid rgba(216,178,92,.35);
  box-shadow: 0 18px 44px rgba(216,178,92,.18);

  flex: 0 0 auto;           /* prevent flexbox stretching */
  position: relative;
  overflow: hidden;
}

/* Button read */
.cardFooter {
  display: flex;
  justify-content: flex-end;   /* push button to right */
  margin-top: 8px;
}

.readBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 36px;
  padding: 0 14px;

  border-radius: 10px;
  border: none;

  background: var(--gold);
  color: #fff;                 /* 🔥 WHITE TEXT */

  font-size: 13px;
  font-weight: 700;

  text-decoration: none;       /* 🔥 remove link style */
  cursor: pointer;

  transition: all 0.15s ease;
}

/* hover */
.readBtn:hover {
  background: var(--gold2);
  transform: translateY(-1px);
}

/* disabled */
.readBtn.disabled,
.readBtn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.readBtn {
  background: rgba(216,178,92,0.9);
  backdrop-filter: blur(6px);
}