/* ══ components ══════════════════════════════════════════
   ปุ่ม / วิวเวอร์ 3D / แถบโหมด / การ์ดงาน / โลโก้แอป
   ═══════════════════════════════════════════════════════ */

/* ── ปุ่ม ─────────────────────────────────────────────── */
.cta-row{display:flex; gap:.75rem; flex-wrap:wrap; align-items:center}
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.8rem 1.5rem; border-radius:99px; text-decoration:none; cursor:pointer;
  font-weight:600; font-size:var(--fs1); line-height:1.35;
  border:1.5px solid transparent;
  transition:transform .16s ease, background .16s ease, color .16s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--green); color:#fff}
.btn-primary:hover{background:var(--green-dk)}
.btn-ghost{border-color:var(--ink); color:var(--ink); background:transparent}
.btn-ghost:hover{background:var(--ink); color:var(--paper)}
.btn-text{
  font-weight:600; text-decoration:none; color:var(--green-dk);
  display:inline-flex; align-items:center; gap:.45rem;
}
.btn-text::after{content:"→"; transition:transform .16s ease}
.btn-text:hover::after{transform:translateX(3px)}

/* ── วิวเวอร์ 3D — เวทีเทาสว่าง ให้ชิ้นงานมีมิติ ───────── */
.viewer{
  position:relative; width:100%; cursor:grab; touch-action:pan-y;
  background:var(--stage-bg); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
}
.viewer:active{cursor:grabbing}
.viewer canvas{display:block; width:100%; height:100%; position:relative; z-index:1}
.viewer::before{   /* แสงสาดพื้นเวที */
  content:""; position:absolute; inset:auto 0 0 0; height:44%;
  background:radial-gradient(56% 120% at 50% 122%, rgba(255,255,255,.85) 0%, transparent 70%);
}
.viewer .posterimg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; padding:5%; z-index:1;
}
.viewer[data-ready] .posterimg{display:none}

/* ── แถบเลือกโหมด ─────────────────────────────────────── */
.modebar{
  display:flex; gap:.35rem; flex-wrap:wrap; margin-top:var(--s1);
  border:1px solid var(--line); background:var(--card);
  padding:.3rem; border-radius:99px; width:max-content; max-width:100%;
  box-shadow:var(--shadow);
}
.modebar button{
  font-family:var(--body); font-size:var(--fs-1); font-weight:500;
  padding:.4rem .95rem; border-radius:99px; cursor:pointer;
  border:0; background:transparent; color:var(--ink-2);
  transition:background .15s ease, color .15s ease;
}
.modebar button:hover{color:var(--green-dk); background:var(--green-lt)}
.modebar button[aria-pressed="true"]{background:var(--ink); color:var(--paper)}

/* แถบโหมดในการ์ด — เต็มความกว้าง ไม่มีขอบมน */
.card .modebar{
  margin:0; width:100%; max-width:none; border-radius:0;
  border-width:0 0 1px 0; justify-content:center; box-shadow:none;
}
.card .modebar button{padding:.4rem .6rem; font-size:.72rem}

/* ── การ์ดงาน ─────────────────────────────────────────── */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:var(--s2)}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow); text-decoration:none;
  display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb, var(--ac) 45%, var(--line));
  box-shadow:0 1px 2px rgba(14,36,23,.05), 0 22px 40px -18px color-mix(in srgb, var(--ac) 55%, transparent);
}

.stage{
  position:relative; aspect-ratio:4/3; border-bottom:1px solid var(--line);
  background:var(--stage-bg); overflow:hidden;
}
.stage::before{   /* แสงสาดพื้น + กริดจาง */
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(56% 120% at 50% 120%, rgba(255,255,255,.9) 0%, transparent 68%),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:100% 100%, 34px 34px, 34px 34px;
  -webkit-mask-image:linear-gradient(to top, #000 0%, transparent 68%);
  mask-image:linear-gradient(to top, #000 0%, transparent 68%);
}
.stage canvas{display:block; width:100%; height:100%; position:relative; z-index:1}
.stage .posterimg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; padding:6% 6% 3%; z-index:1;
}
.load3d{
  position:absolute; inset:0; z-index:2; display:grid; place-items:center; gap:.65rem;
  align-content:center; cursor:pointer; border:0; background:transparent;
  width:100%; font-family:var(--body); font-size:var(--fs0); color:var(--ink-2);
}
.load3d .ring{
  width:56px; height:56px; border-radius:99px; display:grid; place-items:center;
  background:var(--card); border:1.5px solid color-mix(in srgb, var(--ac) 55%, var(--line));
  color:var(--ac); box-shadow:var(--shadow);
  transition:transform .16s ease, background .16s ease, color .16s ease;
}
.load3d:hover .ring{transform:scale(1.08); background:var(--ac); color:#fff}
.load3d .ring svg{display:block}
.load3d > span:last-child{
  background:color-mix(in srgb, var(--card) 88%, transparent);
  padding:.22rem .7rem; border-radius:99px;
}

.tag{
  position:absolute; left:12px; top:12px; z-index:2;
  font-family:var(--mono); font-size:var(--fs-2); letter-spacing:.12em;
  text-transform:uppercase; background:var(--card); border:1px solid var(--line);
  color:var(--ink); padding:.26rem .65rem; border-radius:99px;
  display:inline-flex; align-items:center; gap:.45rem;
}
.dot{width:7px; height:7px; border-radius:99px; flex:none}

.card .body{padding:var(--s2); display:flex; flex-direction:column; flex:1}
.card .body h3{margin-bottom:.35rem}
.card .body p{font-size:var(--fs0); color:var(--ink-2); margin-bottom:var(--s2)}
.stats{
  margin-top:auto; display:flex; gap:1.4rem; flex-wrap:wrap;
  font-size:var(--fs-1); color:var(--ink-3);
  border-top:1px dashed var(--line); padding-top:.9rem;
}
.stats b{
  display:block; font-family:var(--mono); font-variant-numeric:tabular-nums;
  color:var(--ink); font-weight:500; font-size:var(--fs0); line-height:1.5;
}

/* ── โลโก้แอป ─────────────────────────────────────────── */
.apps{border-block:1px solid var(--line); background:var(--card)}
.apps .wrap{
  display:flex; gap:var(--s1) var(--s3); flex-wrap:wrap;
  padding:var(--s2) 0; align-items:center;
}
.app{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:var(--fs-1); color:var(--ink-2); text-decoration:none;
}
.app img{width:23px; height:23px; display:block; flex:none}
.app span{white-space:nowrap}