/* assets/kami_style.css */
:root{
  --bg1:#667eea;
  --bg2:#764ba2;
  --white:#ffffff;
  --muted:#666;
  --success:#28a745;
  --danger:#dc3545;
}
*{box-sizing:border-box}
body{
  margin:0;font-family:'Microsoft YaHei',Arial,sans-serif;
  background: linear-gradient(135deg,var(--bg1),var(--bg2));
  color:#222;
}
.kp-container{
  max-width:980px;margin:32px auto;padding:24px;background:var(--white);
  border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,0.12);
}
.kp-title{font-size:22px;margin:6px 0 18px;text-align:center}
.kp-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center}
.kp-input{width:100%;max-width:520px;padding:10px 12px;border-radius:8px;border:1px solid #ddd}
.kp-btn{background:linear-gradient(135deg,var(--bg1),var(--bg2));color:#fff;padding:10px 14px;border:none;border-radius:10px;cursor:pointer}
.kp-btn-primary{box-shadow:0 6px 18px rgba(0,0,0,0.08)}
.error{background:#f8d7da;color:var(--danger);padding:12px;border-radius:10px;margin-top:10px}
.success{background:#d4edda;color:var(--success);padding:12px;border-radius:10px;margin-top:10px}
/* grid / card */
.kp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:12px}
.kp-card{background:#f8f9fa;padding:14px;border-radius:10px;font-family:'Courier New',monospace;word-break:break-all;white-space:pre-wrap;cursor:pointer;display:flex;flex-direction:column;gap:8px}
.kp-card-index{color:#888;font-size:13px}
.kp-card-copied{color:var(--success);font-weight:700}
.kp-btn-copy{background:var(--success);border-radius:10px;padding:10px 14px;border:none;color:#fff;cursor:pointer;display:block;width:100%;margin-top:12px}
/* table */
.kp-table{width:100%;border-collapse:collapse;margin-top:14px}
.kp-table th, .kp-table td{padding:10px;border:1px solid #e6e6e6;text-align:center}
.kp-table th{background:linear-gradient(135deg,var(--bg1),var(--bg2));color:#fff}
/* panels */
.kp-panel{background:#fbfbff;padding:12px;border-radius:10px;border:1px solid #f0f0f6}
/* responsive tweaks */
@media(max-width:640px){
  .kp-container{padding:18px}
  .kp-title{font-size:18px}
  .kp-card{font-size:13px;padding:10px}
}