:root{
  /* keep in sync with app.css variables */
}

/* Tabs */
.dashboard-header{padding:20px 20px 6px;}
.dashboard-title{font-size:22px;font-weight:800;letter-spacing:-0.02em;}
.dashboard-subtitle{margin-top:4px;color:var(--text-muted);font-size:14px;}

/* Subscription card */
.subscription-card{
  margin:16px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:18px;
  box-shadow:var(--shadow);
}
.subscription-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.subscription-title{font-size:16px;font-weight:800;color:var(--text-primary);}
.subscription-status{
  font-size:12px;
  font-weight:800;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(16,185,129,0.12);
  border:1px solid rgba(16,185,129,0.25);
  color:var(--success);
}
.subscription-status.is-expired{
  background:rgba(239,68,68,0.12);
  border:1px solid rgba(239,68,68,0.28);
  color:var(--error);
}

.subscription-info-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:12px 0 16px;
}
.subscription-info-grid .info-item{
  background:var(--bg-input);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
}
.info-label{font-size:12px;color:var(--text-muted);margin-bottom:4px;}
.info-value{font-size:14px;color:var(--text-primary);font-weight:700;}

.key-section{
  margin-top:10px;
  padding-top:12px;
  border-top:1px solid var(--border);
}
.key-title{font-weight:800;font-size:13px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.04em;}
.key-container{
  margin-top:10px;
  display:flex;
  gap:10px;
  align-items:stretch;
  background:var(--bg-input);
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
}
.key-text{
  flex:1;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:12px;
  line-height:1.35;
  color:var(--text-secondary);
}
.copy-btn{
  flex:0 0 auto;
  border:none;
  cursor:pointer;
  border-radius:12px;
  padding:10px 12px;
  font-weight:900;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:#fff;
  box-shadow:0 8px 22px rgba(30,64,175,0.35);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.copy-btn:active{transform:translateY(1px) scale(0.99);box-shadow:0 4px 14px rgba(30,64,175,0.28);filter:saturate(1.1);}
.key-hint{margin-top:10px;color:var(--text-muted);font-size:12px;line-height:1.35;}

.subscription-actions{margin-top:14px;display:flex;gap:10px;}
.action-btn{
  width:100%;
  border:none;
  cursor:pointer;
  border-radius:14px;
  padding:14px 14px;
  font-weight:900;
  font-size:15px;
  transition:transform .12s ease, box-shadow .12s ease;
}
.action-btn-primary{
  background:linear-gradient(135deg,var(--success),#059669);
  color:#fff;
  box-shadow:0 10px 26px rgba(16,185,129,0.25);
}
.action-btn-primary:active{transform:translateY(1px) scale(0.99);box-shadow:0 6px 18px rgba(16,185,129,0.22);}

/* Instructions / content cards */
.instructions-container{padding:16px;}
.instructions-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:18px;
  box-shadow:var(--shadow);
}
.instructions-title{font-size:18px;font-weight:900;letter-spacing:-0.02em;margin-bottom:6px;}
.instructions-subtitle{color:var(--text-muted);font-size:13px;line-height:1.4;margin-bottom:14px;}
.instructions-content{display:flex;flex-direction:column;gap:10px;}
.instruction-step{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px;
  background:var(--bg-input);
  border:1px solid var(--border);
  border-radius:14px;
}
.step-number{
  width:34px;height:34px;flex:0 0 auto;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:#fff;
  box-shadow:0 8px 20px rgba(30,64,175,0.25);
}
.step-title{font-weight:900;margin-bottom:2px;}
.step-description{color:var(--text-muted);font-size:13px;line-height:1.4;}

.support-card{
  margin-top:14px;
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(245,158,11,0.25);
  background:linear-gradient(135deg,rgba(245,158,11,0.12),rgba(30,64,175,0.08));
}
.support-title{font-weight:900;margin-bottom:4px;}
.support-text{color:var(--text-secondary);font-size:13px;}

a{color:var(--accent);text-decoration:none;}
a:active{text-decoration:underline;}

@media (max-width:420px){
  .subscription-info-grid{grid-template-columns:1fr;gap:10px;}
  .copy-btn{padding:10px 10px;font-size:13px;}
}