/* LetsGrow Suite – suite-core.css v1.0 */
/* Scoped ke .lgs-app (class, bukan id, supaya aman dipakai >1x dalam 1 halaman) */

.lgs-app *, .lgs-app *::before, .lgs-app *::after { box-sizing: border-box; }
.lgs-app { margin: 0; padding: 0; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; line-height: 1.5; font-size: 15px; color: #1e293b; }
.lgs-app ::placeholder { color: #c8d0dc; opacity: 1; }

/* ── WRAPPER ── */
.lgs-app .cg-wrap { max-width: 1200px; margin: 0 auto; background: white; border-radius: 0; box-shadow: 0 4px 24px rgba(0,0,0,0.07); overflow: hidden; }

/* ── HEADER ── */
.lgs-app .cg-header { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); padding: 22px 28px; text-align: center; }
.lgs-app .cg-header h1 { font-size: 1.35rem; font-weight: 700; margin: 0; color: #f8fafc; letter-spacing: -0.01em; }
.lgs-app .cg-header p { font-size: 0.8rem; color: #94a3b8; margin: 6px 0 0; }

/* ── TABS ── */
.lgs-app .cg-tabs { background: #1e293b; display: flex; width: 100%; padding: 0; overflow-x: auto; scrollbar-width: none; }
.lgs-app .cg-tabs::-webkit-scrollbar { display: none; }
.lgs-app .cg-tab { flex: 1; min-width: 0; padding: 10px 4px; border: none; border-right: 1px solid #334155; background: transparent; color: #64748b; font-weight: 600; cursor: pointer; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; font-family: inherit; transition: all 0.15s; text-align: center; }
.lgs-app .cg-tab:last-child { border-right: none; }
.lgs-app .cg-tab:hover { background: #273549; color: #94a3b8; }
.lgs-app .cg-tab.active { background: #c9a84c; color: #0f172a; font-weight: 800; border-radius: 9px 9px 0 0; }
.lgs-app .cg-tab.filled:not(.active) { color: #7dd3fc; background: rgba(30,58,95,0.5); }
.lgs-app .cg-tab .dot { position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; border-radius: 50%; background: #22c55e; }

/* ── PROGRESS BAR ── */
.lgs-app .cg-progress-bar { height: 3px; background: #0f172a; }
.lgs-app .cg-progress-fill { height: 100%; background: linear-gradient(90deg, #c9a84c, #f0c040); transition: width 0.3s ease; }

/* ── FORM ── */
.lgs-app .cg-form { padding: 24px; }
.lgs-app .cg-page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 2px solid #e2e8f0; }
.lgs-app .cg-page-kicker { font-size: 10px; font-weight: 700; color: #c9a84c; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 3px; }
.lgs-app .cg-page-title { font-size: 17px; font-weight: 800; color: #0f172a; margin: 0; }
.lgs-app .cg-nav-btns { display: flex; gap: 7px; flex-shrink: 0; }
.lgs-app .cg-nav-btn { padding: 7px 16px; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.15s; }
.lgs-app .cg-nav-prev { border: 1px solid #e2e8f0; background: white; color: #475569; }
.lgs-app .cg-nav-prev:hover { border-color: #94a3b8; }
.lgs-app .cg-nav-next { border: none; background: #0f172a; color: white; }
.lgs-app .cg-nav-next:hover { background: #1e293b; }

/* ── SECTION DIVIDER ── */
.lgs-app .section-divider { height: 1px; background: #e2e8f0; margin: 20px 0 16px; }
.lgs-app .sub-label { font-size: 10px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 8px; }

/* ── GRID ── */
.lgs-app .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.lgs-app .g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px 16px; }
.lgs-app .span2 { grid-column: span 2; }
.lgs-app .span3 { grid-column: span 3; }
.lgs-app .g-25-75 { display: grid; grid-template-columns: 1fr 3fr; gap: 14px 12px; }

/* ── FIELD GROUP ── */
.lgs-app .fg { display: flex; flex-direction: column; }
.lgs-app .fg label { font-size: 10px; font-weight: 700; color: #64748b; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.4px; }
.lgs-app .fg label .req { color: #ef4444; margin-left: 2px; }
.lgs-app .fg input,
.lgs-app .fg textarea,
.lgs-app .fg select { width: 100%; padding: 9px 11px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 0.875rem; font-family: inherit; background: #fafbfc; color: #1e293b; outline: none; transition: border-color .15s, box-shadow .15s; }
.lgs-app .fg input:focus,
.lgs-app .fg textarea:focus,
.lgs-app .fg select:focus { border-color: #2563a8; box-shadow: 0 0 0 3px rgba(37,99,168,0.1); background: white; }
.lgs-app .fg textarea { resize: vertical; }
.lgs-app .fg .hint { font-size: 0.7rem; color: #94a3b8; margin-top: 3px; }
.lgs-app .mg { margin-bottom: 14px; }

/* Select: vertical-center fix (placeholder/teks tidak terpotong) */
.lgs-app .fg select {
  height: 38px;
  line-height: 1.2;
  padding: 0 32px 0 11px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%2364748b' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-color: #fafbfc;
}
.lgs-app .font-select { height: 38px; padding: 0 32px 0 11px; line-height: 1.2; }

/* ── WEBSITE HINT ── */
.lgs-app .website-hint { font-size: 0.7rem; color: #94a3b8; margin-top: 5px; }
.lgs-app .website-hint a { color: #2563eb; text-decoration: none; }
.lgs-app .website-hint a:hover { text-decoration: underline; }

/* ── UPLOAD ── */
.lgs-app .upload-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lgs-app .upload-btn { padding: 7px 14px; background: #0f172a; color: white; border: none; border-radius: 7px; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; font-family: inherit; }
.lgs-app .upload-btn:hover { background: #1e293b; }
.lgs-app .upload-status { font-size: 11px; }
.lgs-app .upload-status.ok { color: #059669; }
.lgs-app .upload-status.empty { color: #94a3b8; }
.lgs-app .upload-clear { background: none; border: none; color: #ef4444; cursor: pointer; font-size: 12px; padding: 0; }

/* ── DYNAMIC CARDS ── */
.lgs-app .dyn-card { border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px; margin-bottom: 10px; background: #fafbfc; }
.lgs-app .dyn-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.lgs-app .dyn-card-label { font-size: 11px; font-weight: 700; color: #475569; }
.lgs-app .btn-del-card { padding: 4px 10px; background: #fee2e2; border: 1px solid #fecaca; border-radius: 6px; cursor: pointer; color: #dc2626; font-size: 11px; font-family: inherit; }
.lgs-app .btn-del-card:hover { background: #fecaca; }
.lgs-app .btn-add-card { padding: 8px 18px; background: #0f172a; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 700; margin-top: 4px; font-family: inherit; }
.lgs-app .btn-add-card:hover { background: #1e293b; }

.lgs-app .icon-select { font-size: 18px; padding: 7px 8px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fafbfc; cursor: pointer; width: 100%; height: auto; min-height: 38px; line-height: 1.4; }

/* ── MISI LIST ── */
.lgs-app .misi-row { display: flex; gap: 6px; margin-bottom: 7px; align-items: center; }
.lgs-app .misi-row input { flex: 1; }
.lgs-app .misi-del { background: none; border: none; color: #ef4444; cursor: pointer; font-size: 14px; flex-shrink: 0; }
.lgs-app .btn-add-misi { font-size: 11px; color: #2563eb; background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; }

/* ── CLIENT LOGOS ── */
.lgs-app .logo-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.lgs-app .logo-thumb { position: relative; border: 1px solid #e2e8f0; border-radius: 6px; padding: 4px; }
.lgs-app .logo-thumb img { width: 64px; height: 44px; object-fit: contain; display: block; }
.lgs-app .logo-thumb .logo-del { position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; background: #ef4444; color: white; border: none; border-radius: 50%; cursor: pointer; font-size: 10px; line-height: 18px; text-align: center; padding: 0; }
.lgs-app .logo-add-btn { width: 64px; height: 52px; border: 2px dashed #cbd5e1; border-radius: 6px; background: #f8fafc; cursor: pointer; color: #64748b; font-size: 22px; display: flex; align-items: center; justify-content: center; }
.lgs-app .logo-add-btn:hover { border-color: #94a3b8; }

/* ── TOC INFO ── */
.lgs-app .toc-info { background: linear-gradient(135deg, #f0f9ff, #e0f2fe); border: 1.5px dashed #7dd3fc; border-radius: 12px; padding: 28px 24px; text-align: center; }
.lgs-app .toc-info .toc-icon { font-size: 36px; margin-bottom: 10px; }
.lgs-app .toc-info h3 { font-size: 15px; font-weight: 800; color: #0369a1; margin: 0 0 8px; }
.lgs-app .toc-info p { font-size: 12px; color: #0284c7; line-height: 1.7; margin: 0; white-space: pre-line; }

/* ── STYLING PANEL ── */
.lgs-app .template-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 14px; }
.lgs-app .tpl-btn { border: 2px solid #e2e8f0; border-radius: 8px; padding: 8px 3px; cursor: pointer; background: white; text-align: center; transition: all .15s; }
.lgs-app .tpl-btn:hover { border-color: #94a3b8; }
.lgs-app .tpl-btn.active { border-color: #0f172a; background: #f0f9ff; }
.lgs-app .tpl-dots { display: flex; justify-content: center; gap: 3px; margin-bottom: 5px; }
.lgs-app .tpl-dot { width: 13px; height: 13px; border-radius: 50%; }
.lgs-app .tpl-label { font-size: 9px; font-weight: 700; color: #475569; }
.lgs-app .color-row { display: flex; gap: 8px; align-items: center; }
.lgs-app .color-row input[type="color"] { width: 40px; height: 38px; border: 1px solid #e2e8f0; border-radius: 7px; cursor: pointer; padding: 2px; flex-shrink: 0; }
.lgs-app .pattern-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.lgs-app .pat-btn { padding: 8px; border: 1px solid #e2e8f0; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 500; background: white; color: #475569; transition: all .15s; font-family: inherit; }
.lgs-app .pat-btn:hover { border-color: #94a3b8; }
.lgs-app .pat-btn.active { background: #0f172a; color: white; border-color: #0f172a; }

.lgs-app .range-box { border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 12px; background: #fafbfc; }
.lgs-app input[type="range"] { accent-color: #0f172a; cursor: pointer; width: 100%; display: block; }

/* ── ACTION BUTTON ── */
.lgs-app .cg-actions { display: flex; gap: 10px; margin-top: 20px; padding-top: 20px; border-top: 2px solid #e2e8f0; }
.lgs-app .btn-gen-pdf { flex: 1; padding: 13px 20px; border: none; border-radius: 10px; background: linear-gradient(135deg, #1a2744, #2563a8); color: white; font-weight: 800; font-size: 14px; cursor: pointer; font-family: inherit; letter-spacing: 0.02em; transition: filter .15s, transform .1s; box-shadow: 0 4px 16px rgba(37,99,168,0.35); }
.lgs-app .btn-gen-pdf:hover { filter: brightness(1.1); transform: translateY(-1px); }
.lgs-app .btn-gen-pdf:active { transform: translateY(0); }
.lgs-app .btn-gen-pdf:disabled { background: #94a3b8; cursor: not-allowed; box-shadow: none; transform: none; }

/* ── QUICK GENERATE BAR ── */
.lgs-app .quick-gen { background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.25); border-radius: 10px; padding: 10px 18px; margin: 0 24px 20px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: nowrap; }
.lgs-app .quick-gen span { font-size: 12px; color: #b8861e; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lgs-app .quick-gen button { padding: 7px 16px; border: none; border-radius: 7px; background: #c9a84c; color: #0f172a; font-weight: 800; font-size: 12px; cursor: pointer; font-family: inherit; white-space: nowrap; flex-shrink: 0; }
.lgs-app .quick-gen button:disabled { background: #94a3b8; cursor: not-allowed; color: white; }

/* ── STATUS ── */
.lgs-app .cg-status { margin-top: 12px; padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; text-align: center; display: none; }
.lgs-app .cg-status.show { display: block; }
.lgs-app .cg-status.info { background: #f0f9ff; color: #0369a1; }
.lgs-app .cg-status.success { background: #f0fdf4; color: #15803d; }
.lgs-app .cg-status.error { background: #fef2f2; color: #dc2626; }

/* ── FOOTER ── */
.lgs-app .cg-footer { border-top: 1px solid #e2e8f0; padding: 14px 24px; display: flex; justify-content: space-between; align-items: center; }
.lgs-app .reset-btn { background: none; border: none; color: #94a3b8; cursor: pointer; font-size: 12px; font-family: inherit; }
.lgs-app .reset-btn:hover { color: #ef4444; }
.lgs-app .draft-note { font-size: 11px; color: #94a3b8; }

/* ── ENGAGEMENT ── */
.lgs-app .engage-section { margin: 0 24px 24px; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px 24px; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); text-align: center; }
.lgs-app .engage-title { font-size: 0.92rem; font-weight: 700; color: #0f172a; margin-bottom: 16px; }
.lgs-app .engage-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.lgs-app .engage-col { background: white; border-radius: 10px; padding: 16px; border: 1px solid #e2e8f0; display: flex; flex-direction: column; justify-content: center; }
.lgs-app .engage-col-title { font-size: 0.78rem; font-weight: 700; color: #475569; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.3px; }
.lgs-app .rating-placeholder { background: #f8fafc; border: 2px dashed #e2e8f0; border-radius: 8px; padding: 8px 16px; font-size: 0.75rem; color: #94a3b8; display: flex; align-items: center; justify-content: flex-start; text-align: left; min-height: 70px; }
.lgs-app .rating-placeholder .rmp-rating-widget,
.lgs-app .rating-placeholder .rmp-rating-wrapper { text-align: left !important; margin-left: 0 !important; }
.lgs-app .engage-hint { font-size: 0.72rem; color: #94a3b8; }
.lgs-app .share-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.lgs-app .share-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 9px 8px; border-radius: 8px; border: 1px solid #d1d5db; font-size: 0.78rem; font-weight: 600; cursor: pointer; text-decoration: none; font-family: inherit; background: #f1f5f9; color: #475569; transition: background .15s, color .15s, border-color .15s, transform .1s; }
.lgs-app .share-btn:hover { background: #334155; color: white; border-color: #334155; transform: translateY(-1px); }
.lgs-app .engage-tools-hint { text-align: center; margin-top: 10px; }
.lgs-app .ext-hint { font-weight: 500; color: #94a3b8; text-transform: none; letter-spacing: 0; font-size: 10px; }
@media (max-width: 700px){
  .lgs-app .engage-cols { grid-template-columns: 1fr; }
}

/* Info hint — style sama seperti upload hint */
.lgs-app .info-hint {
  font-size: 0.7rem;
  color: #94a3b8;
  margin: 0 0 12px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* Website hint — samakan dengan .hint */
.lgs-app .website-hint {
  font-size: 0.7rem !important;
  color: #94a3b8 !important;
  margin-top: 4px;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.lgs-app .website-hint b { font-weight: 600; color: #64748b; }
.lgs-app .website-hint a { color: #2563eb; text-decoration: none; font-weight: 400; }
.lgs-app .website-hint a:hover { text-decoration: underline; }

/* Footer: draft kiri, reset kanan */
.lgs-app .cg-footer {
  flex-direction: row !important;
  justify-content: space-between !important;
}

/* Jabatan di struktur — read-only display */
.lgs-app .role-display {
  padding: 9px 11px;
  border: 1px solid #f1f5f9;
  border-radius: 8px;
  font-size: 0.875rem;
  background: #f8fafc;
  color: #94a3b8;
  font-style: italic;
  min-height: 38px;
  display: flex;
  align-items: center;
}

/* Rating wrapper — pastikan terlihat dan tidak ter-override */
/* Rating wrapper (Rate My Post plugin) — id berbeda per modul, override generik via attribute selector */
[id$="-rating-wrap"] { display: block !important; }
.lgs-app .engage-col .rmp-rating-wrapper { margin: 0; }

/* Range box height — sama dengan font-select */
.lgs-app .range-box {
  display: flex;
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0 12px;
  background: #fafbfc;
  height: 38px;
  min-height: 38px;
}
.lgs-app .range-box input[type="range"] {
  width: 100%;
  margin: 0;
}

/* Mobile fixes */
@media (max-width: 700px) {
  /* kontak: website full width */
  .lgs-app .contact-website { grid-column: span 2; }
  /* facebook hidden di mobile */
  .lgs-app .contact-facebook { display: none !important; }
  /* whatsapp & email tetap terlihat — override jika ada display:none */
  .lgs-app .contact-phone,
  .lgs-app .contact-email { display: flex !important; }
}

/* ── RESPONSIVE ── */
@media (max-width: 700px) {
  .lgs-app .cg-form { padding: 14px; }
  .lgs-app .g2 { grid-template-columns: 1fr 1fr; }
  .lgs-app .g3 { grid-template-columns: 1fr 1fr; }
  .lgs-app .span2 { grid-column: span 2; }
  .lgs-app .g-25-75 { grid-template-columns: 1fr 3fr; }
  .lgs-app .template-grid { grid-template-columns: repeat(3, 1fr); }
  .lgs-app .engage-section { margin: 0 14px 20px; }
  .lgs-app .engage-cols { grid-template-columns: 1fr 1fr; }
  .lgs-app .quick-gen { margin: 0 14px 16px; padding: 8px 12px; }
  .lgs-app .quick-gen span { font-size: 11px; }
  .lgs-app .cg-footer { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 12px 14px; }
  
  /* Mobile: Website full width, YouTube + Instagram grid, LinkedIn + TikTok grid */
  .lgs-app .contact-website { grid-column: span 2; }
  .lgs-app .contact-facebook { display: none !important; }
}

@media (max-width: 500px) {
  .lgs-app .g2 { grid-template-columns: 1fr 1fr; }
  .lgs-app .g3 { grid-template-columns: 1fr; }
  .lgs-app .span2 { grid-column: span 2; }
  .lgs-app .cg-tab { font-size: 9px; padding: 8px 2px; }
  .lgs-app .template-grid { grid-template-columns: repeat(3, 1fr); }
  .lgs-app .pattern-grid { grid-template-columns: repeat(2, 1fr); }
  .lgs-app .engage-cols { grid-template-columns: 1fr; }
  .lgs-app .g2.media-grid { grid-template-columns: 1fr 1fr; }
  .lgs-app .quick-gen { gap: 6px; }
  .lgs-app .quick-gen span { font-size: 10px; }
  .lgs-app .quick-gen button { padding: 7px 10px; font-size: 11px; }
  
  /* Mobile contact layout */
  .lgs-app .contact-website { grid-column: span 2; }
  .lgs-app .contact-facebook { display: none !important; }
}

@media (max-width: 380px) {
  .lgs-app .cg-tab { font-size: 8px; }
  .lgs-app .cg-nav-btn { padding: 6px 10px; font-size: 11px; }
  .lgs-app .template-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── v1.1.3: Contact closing extra spacing ── */
.lgs-app .contact-closing-spaced { margin-top: 22px; }

/* ── v1.1.3: Footer link (Riwayat) ── */
.lgs-app .history-link { font-size: 12px; color: #2563eb; text-decoration: none; font-weight: 600; }
.lgs-app .history-link:hover { text-decoration: underline; color: #1d4ed8; }

/* ── v1.1.3: MODAL (history + qris) ── */
.lgs-app .cg-modal { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 16px; }
.lgs-app .cg-modal[hidden] { display: none !important; }
.lgs-app .cg-modal-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,0.62); backdrop-filter: blur(2px); }
.lgs-app .cg-modal-box { position: relative; background: #fff; border-radius: 14px; max-width: 560px; width: 100%; max-height: 90vh; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.35); display: flex; flex-direction: column; animation: pgenModalIn .18s ease-out; }
@keyframes pgenModalIn { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.lgs-app .cg-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #e2e8f0; background: linear-gradient(135deg, #f8fafc, #f1f5f9); }
.lgs-app .cg-modal-head h3 { margin: 0; font-size: 15px; font-weight: 800; color: #0f172a; line-height: 1.35; }
.lgs-app .cg-modal-close { background: none; border: none; font-size: 26px; line-height: 1; color: #94a3b8; cursor: pointer; padding: 0 4px; font-family: inherit; }
.lgs-app .cg-modal-close:hover { color: #0f172a; }
.lgs-app .cg-modal-body { padding: 18px 20px 20px; overflow-y: auto; }
.lgs-app .cg-modal-sub { font-size: 12px; color: #64748b; margin: 0 0 12px; }

/* History list */
.lgs-app .history-list { display: flex; flex-direction: column; gap: 8px; }
.lgs-app .history-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fafbfc; }
.lgs-app .history-info { min-width: 0; flex: 1; }
.lgs-app .history-name { font-size: 13px; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lgs-app .history-meta { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.lgs-app .history-actions { display: flex; gap: 6px; flex-shrink: 0; }
.lgs-app .history-btn { padding: 6px 10px; border-radius: 7px; border: 1px solid #e2e8f0; background: #fff; color: #334155; font-size: 11px; font-weight: 700; cursor: pointer; font-family: inherit; }
.lgs-app .history-btn.primary { background: #0f172a; color: #fff; border-color: #0f172a; }
.lgs-app .history-btn.primary:hover { background: #1e293b; }
.lgs-app .history-btn.danger { color: #dc2626; }
.lgs-app .history-btn.danger:hover { background: #fee2e2; }
.lgs-app .history-empty { text-align: center; padding: 30px 10px; color: #94a3b8; font-size: 13px; }
.lgs-app .history-hint { margin-top: 14px !important; text-align: center; }

/* QRIS Modal */
.lgs-app .cg-modal-qris { max-width: 420px; }
.lgs-app .qris-body { text-align: center; }
.lgs-app .qris-wrap { position: relative; display: inline-block; margin: 4px auto 14px; }
.lgs-app .qris-img { width: 100%; max-width: 280px; height: auto; display: block; border-radius: 10px; border: 1px solid #e2e8f0; background: #fff; }
.lgs-app .qris-download { position: absolute; bottom: 10px; right: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: #0f172a; color: #fff; font-size: 12px; font-weight: 700; text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,0.25); transition: transform .12s, background .15s; }
.lgs-app .qris-download:hover { background: #c9a84c; color: #0f172a; transform: translateY(-1px); }
.lgs-app .qris-note { font-size: 12px; color: #475569; line-height: 1.55; margin: 6px 0 0; }

/* ── v1.1.4: SUCCESS / THANK-YOU MODAL ── */
.lgs-app .cg-modal-success { max-width: 440px; }
.lgs-app .cg-modal-success .success-close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 26px; line-height: 1; color: #cbd5e1; cursor: pointer; padding: 0 4px; font-family: inherit; z-index: 2; }
.lgs-app .cg-modal-success .success-close:hover { color: #0f172a; }
.lgs-app .success-body { text-align: center; padding: 30px 26px 24px; }
.lgs-app .success-emoji { font-size: 46px; line-height: 1; margin-bottom: 6px; animation: pgenPop .35s ease-out; }
@keyframes pgenPop { 0% { transform: scale(0.4); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
.lgs-app .success-title { font-size: 19px; font-weight: 800; color: #0f172a; margin: 0 0 10px; }
.lgs-app .success-desc { font-size: 13px; color: #475569; line-height: 1.6; margin: 0 0 6px; }
.lgs-app .success-desc b { color: #0f172a; }
.lgs-app .success-tag { display: inline-block; margin-top: 4px; font-weight: 800; color: #c9a84c; }
.lgs-app .success-share-label { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.4px; margin: 20px 0 10px; }
.lgs-app .success-share-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 4px; }
.lgs-app .success-share-btns .share-btn { padding: 10px 6px; font-size: 0.74rem; }
.lgs-app .success-share-btns .share-wa:hover { background: #25d366; border-color: #25d366; color: #fff; }
.lgs-app .success-share-btns .share-tg:hover { background: #229ed9; border-color: #229ed9; color: #fff; }
.lgs-app .success-share-btns .share-fb:hover { background: #1877f2; border-color: #1877f2; color: #fff; }
.lgs-app .success-dismiss { margin-top: 16px; background: none; border: none; color: #94a3b8; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.lgs-app .success-dismiss:hover { color: #0f172a; }
/* Selalu 3 kolom 1 baris, termasuk di layar mobile sempit */
.lgs-app .success-share-btns { grid-template-columns: repeat(3, 1fr) !important; }
@media (max-width: 460px){
  .lgs-app .success-share-btns { gap: 6px; }
  .lgs-app .success-share-btns .share-btn { padding: 9px 4px; font-size: 0.68rem; gap: 4px; }
  .lgs-app .success-share-btns .share-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
}
@media (max-width: 360px){
  .lgs-app .success-share-btns .share-btn { font-size: 0; gap: 0; padding: 10px 0; }
  .lgs-app .success-share-btns .share-btn svg { width: 16px; height: 16px; }
}

/* ── v1.0: PAKET / PRICING CARD ── */
.lgs-app .package-card { border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 16px; margin-bottom: 10px; background: #fafbfc; position: relative; }
.lgs-app .package-card.is-highlight { border-color: #c9a84c; background: #fffdf6; }
.lgs-app .package-highlight-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.lgs-app .package-highlight-row label { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: #b8861e; text-transform: none; cursor: pointer; }
.lgs-app .package-highlight-row input[type="checkbox"] { width: 15px; height: 15px; accent-color: #c9a84c; cursor: pointer; }
.lgs-app .pkg-feature-row { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; }
.lgs-app .pkg-feature-row input { flex: 1; }
.lgs-app .pkg-feature-del { background: none; border: none; color: #ef4444; cursor: pointer; font-size: 14px; flex-shrink: 0; }
.lgs-app .btn-add-feature { font-size: 11px; color: #2563eb; background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; margin-top: 2px; }

/* ── v1.0: TIMELINE ── */
.lgs-app .timeline-card { border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px; margin-bottom: 10px; background: #fafbfc; display: grid; grid-template-columns: 70px 1fr; gap: 10px; align-items: start; }
.lgs-app .timeline-badge { width: 36px; height: 36px; border-radius: 50%; background: #0f172a; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; }

/* ── v1.0: TERM LIST (Syarat & Ketentuan) ── */
.lgs-app .term-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: flex-start; }
.lgs-app .term-row .term-num { width: 22px; height: 22px; border-radius: 50%; background: #e2e8f0; color: #475569; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 6px; }
.lgs-app .term-row input { flex: 1; }
.lgs-app .term-del { background: none; border: none; color: #ef4444; cursor: pointer; font-size: 14px; flex-shrink: 0; margin-top: 8px; }

/* ── v1.0: LINE ITEM (rincian harga) ── */
.lgs-app .lineitem-card { display: grid; grid-template-columns: 2fr 70px 1fr 1fr auto; gap: 8px; align-items: end; margin-bottom: 8px; }
.lgs-app .lineitem-card .fg { margin-bottom: 0; }
@media (max-width: 700px) {
  .lgs-app .lineitem-card { grid-template-columns: 1fr 1fr; }
  .lgs-app .timeline-card { grid-template-columns: 50px 1fr; }
}