/* =============================================
   Khita Gold Rates v2 — Frontend CSS
   ============================================= */
.kgr-wrap { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; max-width: 860px; margin: 0 auto 30px; color: #222; }

/* Header */
.kgr-header {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    background: linear-gradient(135deg, #7b5a00 0%, #c9960c 40%, #f5c518 60%, #c9960c 100%);
    border-radius: 14px; padding: 20px 24px; margin-bottom: 18px;
    box-shadow: 0 6px 24px rgba(180,130,0,.3);
}
.kgr-header-left { display: flex; align-items: center; gap: 14px; }
.kgr-icon { font-size: 46px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.2)); }
.kgr-title { margin: 0 0 3px; font-size: 21px; font-weight: 800; color: #1a0f00; }
.kgr-sub   { margin: 0; font-size: 12px; color: #5a3b00; }
.kgr-meta  { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.45); border-radius: 30px; padding: 7px 14px; font-size: 12px; color: #2a1800; font-weight: 600; white-space: nowrap; }
.kgr-dot   { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex-shrink: 0; animation: kgr-pulse 1.6s infinite; }
@keyframes kgr-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.5)} 50%{box-shadow:0 0 0 5px rgba(34,197,94,0)} }

/* Cards */
.kgr-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 18px; }
@media(max-width:680px){ .kgr-cards{ grid-template-columns: repeat(2,1fr); } }
.kgr-card { border-radius: 12px; padding: 16px 12px; text-align: center; }
.kgr-24k { background: linear-gradient(145deg,#ffd700,#f0a800); color:#1a0f00; box-shadow:0 4px 14px rgba(255,215,0,.4); }
.kgr-22k { background: linear-gradient(145deg,#f0c030,#d99000); color:#1a0f00; box-shadow:0 4px 14px rgba(240,192,48,.3); }
.kgr-21k { background: linear-gradient(145deg,#e0a828,#b87600); color:#fff;    box-shadow:0 4px 14px rgba(184,118,0,.3); }
.kgr-18k { background: linear-gradient(145deg,#b87820,#8a5800); color:#fff;    box-shadow:0 4px 14px rgba(138,88,0,.3); }
.kgr-card-karat { font-size:11px; font-weight:800; letter-spacing:1px; background:rgba(0,0,0,.15); display:inline-block; border-radius:20px; padding:2px 10px; margin-bottom:6px; }
.kgr-card-unit  { font-size:11px; opacity:.8; margin-bottom:5px; }
.kgr-card-price { font-size:16px; font-weight:800; line-height:1.2; }

/* Table */
.kgr-table-wrap { border-radius: 12px; overflow: hidden; box-shadow: 0 2px 14px rgba(0,0,0,.08); margin-bottom: 14px; }
.kgr-table { width:100%; border-collapse:collapse; font-size:14px; background:#fff; }
.kgr-table thead tr { background:#1a0f00; }
.kgr-table thead th { padding:13px 16px; text-align:left; color:#f5c518; font-size:13px; font-weight:700; }
.kgr-table thead th em { font-style:normal; font-size:10px; opacity:.65; font-weight:400; }
.kgr-table tbody tr { border-bottom:1px solid #fdf0c0; transition:background .12s; }
.kgr-table tbody tr:hover { background:#fffbee; }
.kgr-table tbody tr:last-child { border:none; }
.kgr-table td { padding:13px 16px; vertical-align:middle; }
.kgr-table td:first-child { display:flex; align-items:center; gap:10px; }
.kgr-badge { background:#f5c518; color:#1a0f00; border-radius:6px; padding:2px 9px; font-size:11px; font-weight:800; flex-shrink:0; }
.kgr-label { font-weight:600; color:#333; font-size:13px; }
.kgr-tola  { font-size:15px; font-weight:800; color:#8a5800; }
.kgr-price { font-size:14px; font-weight:600; color:#b87820; }

/* Footer */
.kgr-footer { background:#fffbee; border:1px solid #f0e0a0; border-radius:10px; padding:11px 16px; }
.kgr-footer p { margin:0; font-size:12px; color:#666; line-height:1.6; }

/* Error */
.kgr-error { background:#fff3f3; border:1.5px solid #fca5a5; border-radius:10px; padding:16px 20px; color:#b91c1c; font-size:14px; }