/* ===== GVP Tap Viet – Theme-compat skin ===== */

/* Map to theme variables for instant consistency */
:root{
  --gvp-bg: var(--bg);
  --gvp-surface: var(--surface);
  --gvp-text: var(--txt);
  --gvp-muted: var(--muted);
  --gvp-border: var(--line);
  --gvp-primary: var(--brand);
  --gvp-primary-contrast: #ffffff;
  --gvp-radius: 12px;
  --gvp-radius-sm: 8px;
  --gvp-shadow: 0 10px 30px rgba(2,6,23,.12);
  --gvp-shadow-lg: 0 20px 60px rgba(2,6,23,.18);
  --gvp-blur: 8px;
  --gvp-transition: .22s cubic-bezier(.2,.6,.2,1);
}

.tap-viet-page .container{padding-top:0; padding-bottom:0;}

/* Grid (index) uses theme grid/card */
#gvp-tv-list.grid{margin-top: 8px;}

/* Character grid (detail) */
.gvp-tv-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap:12px; }
.gvp-tv-item{
  padding:14px; border:1px solid var(--gvp-border); border-radius: var(--gvp-radius);
  background: var(--gvp-surface); box-shadow: var(--gvp-shadow);
  display:flex; flex-direction:column; gap:8px; transition: transform var(--gvp-transition), box-shadow var(--gvp-transition);
}
.gvp-tv-item:hover{ transform: translateY(-2px); box-shadow: var(--gvp-shadow-lg); }
.gvp-tv-hz{ font-size: 30px; cursor: pointer; line-height:1; }
.gvp-tv-hz:hover{ text-decoration: underline; }
.gvp-tv-meta{ color: var(--gvp-muted); font-size:13px; text-align:center; margin-top:8px; }

/* Modal */
.gvp-write-backdrop{ position: fixed; inset: 0; background: rgba(2,6,23,.55); -webkit-backdrop-filter: blur(var(--gvp-blur)); backdrop-filter: blur(var(--gvp-blur)); display: none; align-items: center; justify-content: center; z-index: 9999; transition: opacity var(--gvp-transition), visibility var(--gvp-transition); opacity: 0; visibility: hidden; }
.gvp-write-backdrop.show{ display:flex; opacity:1; visibility:visible; }
.gvp-write-modal{ width: min(92vw, 560px); background: var(--gvp-surface); color: var(--gvp-text); border-radius: var(--gvp-radius); padding: 14px 14px 16px; box-shadow: var(--gvp-shadow-lg); position: relative; transform: translateY(10px); transition: transform var(--gvp-transition), box-shadow var(--gvp-transition); }
.gvp-write-backdrop.show .gvp-write-modal{ transform: translateY(0); }
.gvp-write-close{ position:absolute; top:10px; right:10px; width:32px; height:32px; border:1px solid var(--gvp-border); background: transparent; color: var(--gvp-text); border-radius: 50%; font-size:18px; cursor: pointer; display:flex; align-items:center; justify-content:center; transition: background var(--gvp-transition), transform var(--gvp-transition); }
.gvp-write-close:hover{ background: rgba(148,163,184,.12); transform: scale(1.05); }
.gvp-write-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.gvp-write-meta{ font-weight:600; color: var(--gvp-muted); }
#gvp-big-char{ font-size: 52px; line-height: 1; font-weight: 800; letter-spacing: .02em; }
.gvp-write-stage{ margin-top: 6px; }
#gvp-hw{ width:340px; height:340px; margin: 0 auto; }

/* Actions */
.gvp-write-actions{ display:flex; gap:8px; align-items:center; }
.gvp-write-actions.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; transition: opacity var(--gvp-transition), visibility var(--gvp-transition); }
.gvp-write-actions button{ min-width:40px; height:36px; padding: 0 10px; border: 1px solid var(--gvp-border); background: #f8fafc; color: #0f172a; border-radius: var(--gvp-radius-sm); cursor: pointer; transition: background var(--gvp-transition), transform var(--gvp-transition), border-color var(--gvp-transition); }
.gvp-write-actions button:hover{ background:#eef2f7; transform: translateY(-1px); }
.gvp-write-actions button:active{ transform: translateY(0); }
.gvp-write-controls{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top: 8px; }
.gvp-write-controls button{ padding:8px 12px; border: 1px solid var(--gvp-border); background: linear-gradient(263deg, #fcbdbd, #2986fa); color: var(--gvp-text); border-radius: var(--gvp-radius-sm); cursor: pointer; transition: box-shadow var(--gvp-transition), transform var(--gvp-transition), background var(--gvp-transition); }
.gvp-write-controls button:hover{ box-shadow: var(--gvp-shadow); transform: translateY(-1px); }
.gvp-write-controls button:active{ transform: translateY(0); }

/* Infobar + sentinel (for infinite scroll) */
.gvp-infobar{ margin-top:16px; text-align:center; font-size:13px; color: var(--gvp-muted); }
.gvp-infobar .dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:#cbd5e1; margin:0 2px; opacity:.6; animation:gvpblink 1.2s infinite; }
.gvp-infobar.loading .dot:nth-child(2){ animation-delay:.2s; }
.gvp-infobar.loading .dot:nth-child(3){ animation-delay:.4s; }
@keyframes gvpblink{ 0%{opacity:.2}50%{opacity:1}100%{opacity:.2} }