/* glass.css - unify with login glassmorphism */
*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Microsoft YaHei",sans-serif;
  background: url(/login/image/bg.jpg) no-repeat center center fixed;
  background-size: cover;
  color: rgba(255,255,255,0.92);
}

.tp-wrap{max-width:1100px;margin:0 auto;padding:24px}

.tp-nav{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 18px;margin-bottom:18px;
  border-radius:14px;
  border-top:1px solid rgba(255,255,255,0.45);
  border-left:1px solid rgba(255,255,255,0.45);
  border-bottom:1px solid rgba(255,255,255,0.25);
  border-right:1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(12px);
  background: rgba(40,40,55,0.25);
}

.tp-title{display:flex;gap:10px;align-items:baseline}
.tp-title strong{font-size:18px}
.tp-muted{opacity:.85;font-size:13px}

.tp-pill{display:inline-block;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,0.18);border:1px solid rgba(255,255,255,0.25);font-size:12px}

a{color:rgba(255,255,255,0.9);text-decoration:none}
a:hover{color:#fff;text-decoration:underline}

.tp-btn{
  appearance:none;border:1px solid rgba(192, 119, 91, 0.7);
  background: rgba(192, 119, 91, 0.5);
  color: rgba(255,255,255,0.95);
  padding:10px 14px;border-radius:10px;cursor:pointer;
  transition:.2s;
  font-size:14px;
}
.tp-btn:hover{border:1px solid rgba(251, 128, 71, 0.7);background: rgba(251, 128, 71, 0.5);}
.tp-btn.secondary{border:1px solid rgba(255,255,255,0.35);background: rgba(255,255,255,0.16)}

.tp-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.tp-card{
  grid-column: span 6;
  padding:16px;border-radius:14px;
  border-top:1px solid rgba(255,255,255,0.45);
  border-left:1px solid rgba(255,255,255,0.45);
  border-bottom:1px solid rgba(255,255,255,0.25);
  border-right:1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(12px);
  background: rgba(50,50,50,0.22);
}
@media (max-width: 900px){.tp-card{grid-column:span 12}}

.tp-card h3{margin:0 0 6px 0;font-size:16px}
.tp-card .tp-muted{margin-top:6px}
.tp-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tp-row.space{justify-content:space-between}

.tp-kv{display:flex;gap:10px;align-items:center}
.tp-kv code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;opacity:.95}

.tp-pre{
  width:100%;
  max-height:520px;overflow:auto;
  padding:14px;border-radius:14px;
  border:1px solid rgba(255,255,255,0.25);
  background: rgba(10,10,18,0.55);
  color: rgba(255,255,255,0.92);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.55;
}

.tp-field{margin-top:10px}
.tp-field label{display:block;margin-bottom:6px;font-size:13px;opacity:.9}
.tp-input{
  width:100%;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.95);
  outline:none;
  padding:12px 14px;
  font-size:14px;
}

.tp-checklist{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:10px;margin-top:12px}
@media (max-width: 900px){.tp-checklist{grid-template-columns:repeat(2, minmax(0, 1fr));}}

.tp-check{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.25);
  background: rgba(10,10,18,0.20);
  cursor:pointer;
  user-select:none;
}
.tp-check input{width:18px;height:18px;accent-color: rgba(251,128,71,0.9)}

.tp-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,0.45)}
.tp-modal.open{display:flex}
.tp-modal .tp-card{grid-column:auto;max-width:980px;width:min(980px,100%)}