:root {
  --ph-primary: #1d4ed8;
  --ph-primary-dark: #1e3a8a;
  --ph-accent: #0f766e;
  --ph-success: #047857;
  --ph-warning: #d97706;
  --ph-ink: #0f172a;
  --ph-muted: #64748b;
  --ph-soft: #f8fafc;
  --ph-line: #e2e8f0;
  --ph-radius: 1.15rem;
  --ph-shadow: 0 18px 45px rgba(15, 23, 42, .08);
}

* { box-sizing: border-box; }
body {
  color: var(--ph-ink);
  background: #f6f8fb;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}
img { max-width: 100%; height: auto; }
a { color: var(--ph-primary); }

/* Lightweight fallback layout helpers for previews where CDN CSS is unavailable. */
.container { width: min(1140px, calc(100% - 2rem)); margin-inline: auto; }
.container-fluid { width: min(100%, calc(100% - 2rem)); margin-inline: auto; }
.row { display: flex; flex-wrap: wrap; margin-inline: -.75rem; }
.row > * { padding-inline: .75rem; }
.g-3 > * { margin-bottom: 1rem; }
.g-4 > * { margin-bottom: 1.5rem; }
.col-md-4, .col-lg-4, .col-lg-6, .col-lg-8, .col-lg-3, .col-xl-3, .col-xl-4 { width: 100%; }
@media (min-width: 768px) { .col-md-4 { width: 33.333%; } .col-md-6 { width: 50%; } }
@media (min-width: 992px) { .col-lg-3 { width: 25%; } .col-lg-4 { width: 33.333%; } .col-lg-6 { width: 50%; } .col-lg-8 { width: 66.666%; } }
@media (min-width: 1200px) { .col-xl-3 { width: 25%; } .col-xl-4 { width: 33.333%; } }
.card { background: #fff; border-radius: var(--ph-radius); border: 1px solid var(--ph-line); }
.shadow-sm { box-shadow: var(--ph-shadow) !important; }
.btn { border-radius: .75rem; font-weight: 700; padding: .65rem 1rem; }
.btn-primary { background: var(--ph-primary); border-color: var(--ph-primary); }
.btn-primary:hover { background: var(--ph-primary-dark); border-color: var(--ph-primary-dark); }
.btn-outline-primary { border-color: var(--ph-primary); color: var(--ph-primary); }
.btn-outline-primary:hover { background: var(--ph-primary); color: #fff; }
.form-control, .form-select { border-radius: .85rem; border-color: #dbe3ef; padding: .72rem .9rem; }
.form-control:focus, .form-select:focus { border-color: rgba(29, 78, 216, .55); box-shadow: 0 0 0 .25rem rgba(29, 78, 216, .12); }
.badge { letter-spacing: .01em; }

.ph-navbar { backdrop-filter: blur(16px); box-shadow: 0 6px 18px rgba(15, 23, 42, .04); }
.site-logo { width: 34px; height: 34px; object-fit: contain; }
.brand-mark {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--ph-accent), var(--ph-primary));
  font-weight: 900;
  letter-spacing: -.04em;
}
.brand-mark-light { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.2); }

.hero-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(14, 165, 233, .22), transparent 32rem),
    radial-gradient(circle at bottom right, rgba(15, 118, 110, .2), transparent 30rem),
    linear-gradient(135deg, #0f172a, #1e3a8a 52%, #0f766e);
  color: #fff;
  padding: 5.5rem 0 4.5rem;
}
.hero-section::after {
  content: "";
  position: absolute;
  inset: auto -8rem -8rem auto;
  width: 22rem;
  height: 22rem;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .42rem .8rem;
  border-radius: 999px;
  background: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.18);
  color: #dbeafe;
  font-weight: 700;
  font-size: .9rem;
}
.hero-title { font-size: clamp(2.15rem, 5vw, 4.35rem); line-height: 1.03; letter-spacing: -.055em; font-weight: 900; }
.hero-subtitle { color: #dbeafe; max-width: 760px; font-size: 1.15rem; }
.hero-search-card {
  background: rgba(255,255,255,.96);
  border-radius: 1.25rem;
  padding: .85rem;
  box-shadow: 0 24px 70px rgba(2, 6, 23, .26);
}
.stat-pill {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 1rem;
  padding: 1rem;
}
.stat-pill strong { display: block; font-size: 1.7rem; line-height: 1; }
.stat-pill span { color: #cbd5e1; font-size: .9rem; }

.section-title { font-weight: 900; letter-spacing: -.035em; }
.section-kicker { color: var(--ph-accent); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; }

.petition-card { transition: transform .18s ease, box-shadow .18s ease; }
.petition-card:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(15, 23, 42, .12) !important; }
.petition-card-banner {
  height: 170px;
  background: linear-gradient(135deg, #dbeafe, #ccfbf1);
  background-size: cover;
  background-position: center;
  position: relative;
}
.petition-card-banner .badge { position: absolute; top: 1rem; left: 1rem; }
.campaign-logo-sm {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: #fff;
  display: grid;
  place-items: center;
  flex: 0 0 54px;
  border: 1px solid var(--ph-line);
  box-shadow: 0 10px 22px rgba(15,23,42,.08);
  overflow: hidden;
}
.campaign-logo-sm img { width: 100%; height: 100%; object-fit: contain; padding: .35rem; }
.campaign-logo-sm span { font-size: 1.35rem; font-weight: 900; color: var(--ph-primary); }
.petition-card-desc { min-height: 4.8em; }
.slim-progress { height: .55rem; border-radius: 999px; background: #e8eef7; }
.progress-bar { background: linear-gradient(90deg, var(--ph-accent), var(--ph-primary)); }

.category-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border-radius: 999px;
  border: 1px solid var(--ph-line);
  background: #fff;
  padding: .62rem 1rem;
  color: var(--ph-ink);
  text-decoration: none;
  font-weight: 700;
  transition: all .18s ease;
}
.category-chip:hover, .category-chip.active { border-color: rgba(29, 78, 216, .35); background: #eff6ff; color: var(--ph-primary); }

.petition-hero {
  background: #0f172a;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.petition-hero-bg {
  min-height: 390px;
  background: linear-gradient(135deg, rgba(15, 118, 110, .92), rgba(29, 78, 216, .92));
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: end;
  padding: 4rem 0;
}
.petition-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2,6,23,.25), rgba(2,6,23,.78));
  pointer-events: none;
}
.petition-hero .container { position: relative; z-index: 2; }
.petition-logo-lg {
  width: 112px;
  height: 112px;
  border-radius: 1.6rem;
  background: #fff;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.35);
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(2,6,23,.28);
}
.petition-logo-lg img { width: 100%; height: 100%; object-fit: contain; padding: .6rem; }
.petition-logo-lg span { color: var(--ph-primary); font-size: 3rem; font-weight: 900; }
.petition-title { font-size: clamp(2rem, 4.5vw, 4.1rem); line-height: 1.03; font-weight: 900; letter-spacing: -.055em; }
.signature-panel { position: sticky; top: 6rem; }
.signature-count { font-size: clamp(2.1rem, 4vw, 3.5rem); font-weight: 900; letter-spacing: -.06em; }
.content-card { font-size: 1.05rem; }
.supporter-item { border-bottom: 1px solid var(--ph-line); padding: .85rem 0; }
.supporter-avatar { width: 42px; height: 42px; border-radius: 999px; background: #eff6ff; color: var(--ph-primary); display: grid; place-items: center; font-weight: 900; }

.share-buttons .btn { padding: .48rem .75rem; }
.share-wa { background: #25D366; color: #fff; }
.share-fb { background: #1877F2; color: #fff; }
.share-x { background: #0f172a; color: #fff; }
.share-tg { background: #229ED9; color: #fff; }
.share-wa:hover, .share-fb:hover, .share-x:hover, .share-tg:hover { color: #fff; opacity: .92; }

.thank-you-card {
  margin-top: -4rem;
  position: relative;
  z-index: 2;
  border: 0;
  box-shadow: 0 30px 80px rgba(15,23,42,.16);
}
.support-letter-preview { border-radius: 1rem; border: 1px solid var(--ph-line); background: #fff; }

.site-footer { background: #0f172a; color: #fff; }

.admin-body { background: #eef2f7; }
.admin-navbar { background: linear-gradient(135deg, #0f172a, #1e3a8a); box-shadow: 0 12px 34px rgba(15,23,42,.18); }
.admin-main .card { border: 0; box-shadow: 0 14px 35px rgba(15,23,42,.07); }
.metric-card { overflow: hidden; position: relative; }
.metric-card::after { content: ""; position: absolute; width: 120px; height: 120px; border-radius: 999px; right: -38px; top: -42px; background: rgba(29,78,216,.1); }
.metric-value { font-size: 2.15rem; font-weight: 900; letter-spacing: -.055em; }
.table { vertical-align: middle; }
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: #64748b; }
.admin-thumb { width: 62px; height: 42px; border-radius: .65rem; background: linear-gradient(135deg, #dbeafe, #ccfbf1); object-fit: cover; }
.status-dot { width: .65rem; height: .65rem; border-radius: 50%; display: inline-block; }
.status-published { background: #10b981; }
.status-draft { background: #f59e0b; }

.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 2rem; background: radial-gradient(circle at top left, rgba(29,78,216,.16), transparent 30rem), linear-gradient(135deg, #f8fafc, #e0f2fe); }
.login-card { width: min(460px, 100%); border: 0; box-shadow: 0 24px 75px rgba(15,23,42,.16); }

@media (max-width: 991.98px) {
  .hero-section { padding: 4rem 0 3rem; }
  .signature-panel { position: static; }
  .petition-hero-bg { min-height: 330px; padding: 3rem 0; }
  .petition-logo-lg { width: 86px; height: 86px; border-radius: 1.2rem; }
}

@media print {
  .navbar, .site-footer, .share-buttons, .btn, .admin-navbar { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none !important; }
}

.letter-preview-wrap {
  position: relative;
  min-height: 360px;
  max-height: 640px;
  overflow: auto;
  border: 1px solid var(--ph-line);
  border-radius: 1rem;
  background: repeating-linear-gradient(45deg, #f8fafc 0, #f8fafc 12px, #eef2f7 12px, #eef2f7 24px);
}
.letter-preview-wrap img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
}
.letter-preview-name {
  position: absolute;
  z-index: 3;
  display: none;
  font-weight: 900;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(255,255,255,.55);
  pointer-events: none;
}
.letter-preview-placeholder {
  min-height: 360px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  gap: .35rem;
  padding: 2rem;
  color: var(--ph-muted);
}
.letter-preview-placeholder strong { color: var(--ph-ink); }
.letter-preview-placeholder span { max-width: 440px; }