/* ==========================================================================
   VPNVO · contact page (service.html)
   channel cards · self-help links · ticket checklist
   ========================================================================== */

/* ---- channel cards ---- */

.chan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;min-width:0}
.chan-card{
  display:flex;flex-direction:column;gap:12px;min-width:0;
  padding:20px 18px;
  background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-1), var(--hi);
}
.chan-card--main{
  border-color:var(--accent-24);
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg-panel) 100%);
  box-shadow:0 24px 48px -32px var(--accent-40), var(--hi);
}
.chan-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.chan-name{margin:0;font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.35}
.chan-use{font-size:13.5px;line-height:1.7;color:var(--text-muted)}
.chan-meta{display:grid;gap:8px;margin-top:auto;padding-top:12px;border-top:1px dashed var(--border)}
.chan-meta > div{display:grid;gap:2px;min-width:0}
.chan-meta dt{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;color:var(--text-muted)}
.chan-meta dd{font-size:13px;line-height:1.6;color:var(--text)}
.chan-card .btn{align-self:flex-start;margin-top:2px;flex-shrink:0;white-space:nowrap}
.chan-note{margin-top:16px}

/* ---- self-help links ---- */

.self-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;min-width:0}
.self-card{
  display:flex;flex-direction:column;gap:6px;min-width:0;
  padding:16px;text-decoration:none;color:inherit;
  background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:var(--shadow-1), var(--hi);
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.self-card:hover{transform:translateY(-2px);border-color:var(--accent-24);box-shadow:var(--shadow-3), var(--hi)}
.self-title{font-size:14px;font-weight:700;line-height:1.45;color:var(--text)}
.self-desc{font-size:12.5px;line-height:1.65;color:var(--text-muted)}
.self-more{margin-top:auto;padding-top:6px;font-family:var(--font-mono);font-size:10.5px;color:var(--accent-dark)}

/* ---- ticket checklist ---- */

.ticket-panel{display:grid;gap:16px;padding:22px 20px;min-width:0}
.tick-list{display:grid;gap:10px;min-width:0}
.tick-list li{display:flex;gap:10px;min-width:0;font-size:14px;line-height:1.7;color:var(--text)}
.tick-list li::before{
  content:"";flex:none;width:6px;height:6px;margin-top:8px;border-radius:var(--r-pill);
  background:var(--accent);box-shadow:0 0 0 3px var(--accent-12);
}
.tick-list b{font-weight:600;color:var(--text)}

/* ---- responsive ---- */

@media (max-width:980px){
  .chan-grid{grid-template-columns:1fr}
  .self-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:640px){
  .self-grid{grid-template-columns:1fr}
  .ticket-panel{padding:18px 16px}
}