/* ============================================================
   PromoCreator — Main Stylesheet
   Font  : Nunito (Google Fonts)
   Palet : Biru #1A56DB | Hijau #0EA66B | Orange #F97316
   File  : assets/css/app.css
   ============================================================ */

@import url('[fonts.googleapis.com](https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800;900&display=swap)');

/* ── CSS Variables ── */
:root {
  --pc-blue:         #1A56DB;
  --pc-blue-dark:    #1043B5;
  --pc-blue-light:   #EBF2FF;
  --pc-green:        #0EA66B;
  --pc-green-light:  #DCFAEE;
  --pc-orange:       #F97316;
  --pc-orange-light: #FFF1E6;
  --pc-dark:         #1E2A3B;
  --pc-gray:         #64748B;
  --pc-gray-light:   #F1F5F9;
  --pc-white:        #FFFFFF;
  --pc-border:       #E2E8F0;
  --pc-shadow:       0 2px 16px rgba(26,86,219,.09);
  --pc-shadow-lg:    0 8px 32px rgba(26,86,219,.15);
  --sidebar-w:       260px;
  --topbar-h:        60px;
  --bottombar-h:     64px;
  --radius:          14px;
  --radius-sm:       8px;
  --transition:      .22s ease;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family:    'Nunito', sans-serif;
  font-size:      0.9375rem;
  line-height:    1.55;
  color:          var(--pc-dark);
  background:     var(--pc-gray-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Typography ── */
h1 { font-size: 1.55rem; font-weight: 800; line-height: 1.2; }
h2 { font-size: 1.3rem;  font-weight: 700; line-height: 1.25; }
h3 { font-size: 1.1rem;  font-weight: 700; line-height: 1.3; }
h4 { font-size: 1rem;    font-weight: 600; }
h5 { font-size: .9rem;   font-weight: 600; }
p  { line-height: 1.55; margin-bottom: 0; }
small { font-size: .8rem; }
a  { transition: var(--transition); }

/* ══════════════════════════════════════════
   AUTH PAGES
══════════════════════════════════════════ */
.auth-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,
    var(--pc-blue-dark) 0%,
    var(--pc-blue) 50%,
    #3B82F6 100%);
  padding: 1.25rem;
}

.auth-card {
  background:    var(--pc-white);
  border-radius: 20px;
  padding:       2.25rem 2rem;
  width:         100%;
  max-width:     420px;
  box-shadow:    var(--pc-shadow-lg);
}

.auth-logo {
  display:         flex;
  align-items:     center;
  gap:             .55rem;
  justify-content: center;
  margin-bottom:   1.5rem;
}

.auth-logo .logo-icon {
  width:           42px;
  height:          42px;
  background:      linear-gradient(135deg, var(--pc-blue), var(--pc-green));
  border-radius:   12px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           white;
  font-size:       1.25rem;
}

.auth-logo .logo-text {
  font-size:   1.35rem;
  font-weight: 800;
  color:       var(--pc-dark);
}

.auth-logo .logo-text span { color: var(--pc-blue); }

/* CAPTCHA */
.captcha-box {
  background:    var(--pc-blue-light);
  border:        2px dashed var(--pc-blue);
  border-radius: var(--radius-sm);
  padding:       .65rem 1rem;
  display:       flex;
  align-items:   center;
  gap:           .75rem;
}

.captcha-question {
  font-weight: 700;
  font-size:   1.05rem;
  color:       var(--pc-blue-dark);
  flex:        1;
}

.captcha-refresh {
  cursor:     pointer;
  color:      var(--pc-gray);
  font-size:  1.1rem;
  transition: transform .4s ease, color .2s;
}

.captcha-refresh:hover { color: var(--pc-blue); }

/* ══════════════════════════════════════════
   APP LAYOUT
══════════════════════════════════════════ */
.app-layout { display: flex; min-height: 100vh; }

/* ── Sidebar ── */
.sidebar {
  width:      var(--sidebar-w);
  background: var(--pc-dark);
  min-height: 100vh;
  position:   fixed;
  left: 0; top: 0; bottom: 0;
  z-index:    1040;
  display:    flex;
  flex-direction: column;
  transform:  translateX(0);
  transition: transform var(--transition);
  box-shadow: 4px 0 24px rgba(0,0,0,.18);
}

.sidebar-header {
  padding:       1.25rem 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display:       flex;
  align-items:   center;
  gap:           .55rem;
  flex-shrink:   0;
}

.sidebar-logo-icon {
  width:           36px;
  height:          36px;
  background:      linear-gradient(135deg, var(--pc-blue), var(--pc-green));
  border-radius:   10px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           white;
  font-size:       1rem;
  flex-shrink:     0;
}

.sidebar-logo-text {
  font-size:   1.1rem;
  font-weight: 800;
  color:       white;
}

.sidebar-logo-text span { color: var(--pc-orange); }

.sidebar-nav {
  flex:       1;
  padding:    .75rem 0;
  overflow-y: auto;
}

.sidebar-nav .nav-label {
  font-size:      .7rem;
  font-weight:    700;
  letter-spacing: .08em;
  color:          rgba(255,255,255,.35);
  text-transform: uppercase;
  padding:        .75rem 1.25rem .25rem;
}

.sidebar-nav .nav-item { margin: .12rem .65rem; }

.sidebar-nav .nav-link {
  display:     flex;
  align-items: center;
  gap:         .75rem;
  padding:     .65rem .9rem;
  border-radius: var(--radius-sm);
  color:         rgba(255,255,255,.7);
  font-weight:   600;
  font-size:     .9rem;
  transition:    var(--transition);
  text-decoration: none;
}

.sidebar-nav .nav-link:hover { background: rgba(26,86,219,.25); color: white; }
.sidebar-nav .nav-link.active { background: var(--pc-blue); color: white; }
.sidebar-nav .nav-link .nav-icon {
  font-size:  1.05rem;
  width:      20px;
  text-align: center;
  flex-shrink: 0;
}

.sidebar-footer {
  padding:    .75rem .65rem;
  border-top: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}

.sidebar-footer .nav-link { color: #F87171; }
.sidebar-footer .nav-link:hover { background: rgba(239,68,68,.15); color: #FCA5A5; }

/* Overlay mobile */
.sidebar-overlay {
  display:    none;
  position:   fixed;
  inset:      0;
  background: rgba(0,0,0,.5);
  z-index:    1039;
  backdrop-filter: blur(2px);
}
.sidebar-overlay.show { display: block; }

/* ── Main Content ── */
.main-content {
  margin-left: var(--sidebar-w);
  min-height:  100vh;
  display:     flex;
  flex-direction: column;
  flex: 1;
  transition: margin var(--transition);
}

/* ── Topbar ── */
.topbar {
  height:      var(--topbar-h);
  background:  var(--pc-white);
  border-bottom: 1px solid var(--pc-border);
  display:     flex;
  align-items: center;
  padding:     0 1.25rem;
  gap:         .75rem;
  position:    sticky;
  top:         0;
  z-index:     100;
  box-shadow:  var(--pc-shadow);
  flex-shrink: 0;
}

.btn-sidebar-toggle {
  background: none;
  border:     none;
  cursor:     pointer;
  color:      var(--pc-gray);
  font-size:  1.25rem;
  padding:    .3rem .45rem;
  border-radius: var(--radius-sm);
  display:    none;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  line-height: 1;
}
.btn-sidebar-toggle:hover { background: var(--pc-gray-light); color: var(--pc-blue); }

.topbar-title {
  font-weight: 700;
  font-size:   1rem;
  color:       var(--pc-dark);
  flex:        1;
}

.topbar-user-name {
  font-weight: 600;
  font-size:   .875rem;
  color:       var(--pc-dark);
  white-space: nowrap;
}

.topbar-avatar {
  width:        36px;
  height:       36px;
  border-radius: 50%;
  object-fit:   cover;
  border:       2px solid var(--pc-blue-light);
  cursor:       pointer;
  transition:   var(--transition);
  flex-shrink:  0;
}
.topbar-avatar:hover { border-color: var(--pc-blue); }

/* ── Page Content ── */
.page-content {
  flex:    1;
  padding: 1.5rem 1.25rem;
  padding-bottom: calc(var(--bottombar-h) + 1.5rem);
}

/* ══════════════════════════════════════════
   BOTTOM NAVIGATION
══════════════════════════════════════════ */
.bottom-nav {
  display:    none;
  position:   fixed;
  bottom:     0; left: 0; right: 0;
  height:     var(--bottombar-h);
  background: var(--pc-white);
  border-top: 1px solid var(--pc-border);
  z-index:    200;
  box-shadow: 0 -4px 20px rgba(0,0,0,.07);
}

.bottom-nav-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-around;
  height:          100%;
  padding:         0 .5rem;
}

.bn-item {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             .18rem;
  text-decoration: none;
  flex:            1;
  color:           var(--pc-gray);
  font-size:       .68rem;
  font-weight:     600;
  padding:         .35rem .2rem;
  border-radius:   var(--radius-sm);
  transition:      var(--transition);
}

.bn-item i        { font-size: 1.2rem; transition: var(--transition); }
.bn-item.active   { color: var(--pc-blue); }
.bn-item:hover    { color: var(--pc-blue); }

/* Tombol Tengah Buat Campaign */
.bn-center {
  position:        relative;
  top:             -14px;
  background:      linear-gradient(135deg, var(--pc-blue), var(--pc-green));
  color:           white !important;
  width:           56px;
  height:          56px;
  border-radius:   50%;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  box-shadow:      0 4px 20px rgba(26,86,219,.45);
  border:          3px solid var(--pc-white);
  flex:            none;
  transition:      var(--transition);
}
.bn-center:hover  { transform: scale(1.08) translateY(-16px); box-shadow: 0 8px 28px rgba(26,86,219,.55); }
.bn-center i      { font-size: 1.35rem !important; }
.bn-center span   { font-size: .6rem !important; line-height: 1; }

/* ══════════════════════════════════════════
   STAT CARDS
══════════════════════════════════════════ */
.stat-card {
  background:    var(--pc-white);
  border-radius: var(--radius);
  padding:       1.25rem;
  box-shadow:    var(--pc-shadow);
  border:        1px solid var(--pc-border);
  display:       flex;
  align-items:   center;
  gap:           1rem;
  transition:    var(--transition);
  height:        100%;
}
.stat-card:hover { box-shadow: var(--pc-shadow-lg); transform: translateY(-2px); }

.stat-icon {
  width:           50px;
  height:          50px;
  border-radius:   14px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.4rem;
  flex-shrink:     0;
}
.stat-icon.blue   { background: var(--pc-blue-light);  color: var(--pc-blue); }
.stat-icon.green  { background: var(--pc-green-light); color: var(--pc-green); }
.stat-icon.orange { background: var(--pc-orange-light);color: var(--pc-orange); }

.stat-value { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.stat-label { font-size: .8rem;  color: var(--pc-gray); font-weight: 500; margin-top: .15rem; }

/* ══════════════════════════════════════════
   PC CARD
══════════════════════════════════════════ */
.pc-card {
  background:    var(--pc-white);
  border-radius: var(--radius);
  padding:       1.25rem;
  box-shadow:    var(--pc-shadow);
  border:        1px solid var(--pc-border);
  margin-bottom: 1.25rem;
}

.pc-card-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   1rem;
  padding-bottom:  .75rem;
  border-bottom:   1px solid var(--pc-border);
}

.pc-card-title {
  font-size:   1rem;
  font-weight: 700;
  color:       var(--pc-dark);
}

/* ══════════════════════════════════════════
   QUOTA BAR
══════════════════════════════════════════ */
.quota-bar {
  height:        10px;
  border-radius: 99px;
  background:    var(--pc-border);
  overflow:      hidden;
}

.quota-bar-fill {
  height:           100%;
  border-radius:    99px;
  background:       linear-gradient(90deg, var(--pc-blue), var(--pc-green));
  transition:       width .6s cubic-bezier(.4,0,.2,1);
}
.quota-bar-fill.warning {
  background: linear-gradient(90deg, var(--pc-orange), #EF4444);
}

/* ══════════════════════════════════════════
   FORM ELEMENTS
══════════════════════════════════════════ */
.form-label {
  font-weight:   600;
  font-size:     .875rem;
  color:         var(--pc-dark);
  margin-bottom: .35rem;
}

.form-control,
.form-select {
  border:        1.5px solid var(--pc-border);
  border-radius: var(--radius-sm);
  padding:       .6rem .85rem;
  font-size:     .9rem;
  font-family:   'Nunito', sans-serif;
  color:         var(--pc-dark);
  transition:    var(--transition);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--pc-blue);
  box-shadow:   0 0 0 3px rgba(26,86,219,.12);
  outline:      none;
}

.form-control.is-invalid { border-color: #EF4444; }
.invalid-feedback         { font-size: .8rem; color: #EF4444; }

.form-check-input:checked {
  background-color: var(--pc-blue);
  border-color:     var(--pc-blue);
}

.input-group-text {
  border:      1.5px solid var(--pc-border);
  font-size:   .9rem;
  color:       var(--pc-gray);
}
.input-group > .form-control:focus { z-index: 3; }

/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.btn-pc-primary {
  background:    linear-gradient(135deg, var(--pc-blue), var(--pc-blue-dark));
  color:         white;
  border:        none;
  border-radius: var(--radius-sm);
  padding:       .65rem 1.4rem;
  font-weight:   700;
  font-size:     .9rem;
  font-family:   'Nunito', sans-serif;
  cursor:        pointer;
  transition:    var(--transition);
  display:       inline-flex;
  align-items:   center;
  gap:           .45rem;
  text-decoration: none;
}
.btn-pc-primary:hover  { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(26,86,219,.35); color: white; }
.btn-pc-primary:active { transform: translateY(0); }

.btn-pc-green {
  background:    linear-gradient(135deg, var(--pc-green), #059669);
  color:         white;
  border:        none;
  border-radius: var(--radius-sm);
  padding:       .65rem 1.4rem;
  font-weight:   700;
  font-size:     .9rem;
  font-family:   'Nunito', sans-serif;
  cursor:        pointer;
  transition:    var(--transition);
  display:       inline-flex;
  align-items:   center;
  gap:           .45rem;
  text-decoration: none;
}
.btn-pc-green:hover  { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(14,166,107,.35); color: white; }
.btn-pc-green:active { transform: translateY(0); }

.btn-pc-orange {
  background:    linear-gradient(135deg, var(--pc-orange), #EA6C00);
  color:         white;
  border:        none;
  border-radius: var(--radius-sm);
  padding:       .65rem 1.4rem;
  font-weight:   700;
  font-size:     .9rem;
  font-family:   'Nunito', sans-serif;
  cursor:        pointer;
  transition:    var(--transition);
  display:       inline-flex;
  align-items:   center;
  gap:           .45rem;
  text-decoration: none;
}
.btn-pc-orange:hover  { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(249,115,22,.35); color: white; }
.btn-pc-orange:active { transform: translateY(0); }

.btn-pc-outline {
  background:    transparent;
  color:         var(--pc-blue);
  border:        1.5px solid var(--pc-blue);
  border-radius: var(--radius-sm);
  padding:       .6rem 1.3rem;
  font-weight:   600;
  font-size:     .9rem;
  font-family:   'Nunito', sans-serif;
  cursor:        pointer;
  transition:    var(--transition);
  display:       inline-flex;
  align-items:   center;
  gap:           .45rem;
  text-decoration: none;
}
.btn-pc-outline:hover { background: var(--pc-blue-light); }

/* ══════════════════════════════════════════
   TEMPLATE GRID
══════════════════════════════════════════ */
.template-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:                   .85rem;
}

.template-card {
  border:        2.5px solid var(--pc-border);
  border-radius: var(--radius);
  overflow:      hidden;
  cursor:        pointer;
  transition:    var(--transition);
  position:      relative;
  background:    var(--pc-white);
}
.template-card:hover    { border-color: var(--pc-blue); box-shadow: var(--pc-shadow-lg); transform: translateY(-3px); }
.template-card.selected { border-color: var(--pc-blue); box-shadow: 0 0 0 4px rgba(26,86,219,.18); }

.template-check {
  position:        absolute;
  top:             .5rem;
  right:           .5rem;
  background:      var(--pc-blue);
  color:           white;
  width:           22px;
  height:          22px;
  border-radius:   50%;
  display:         none;
  align-items:     center;
  justify-content: center;
  font-size:       .75rem;
}
.template-card.selected .template-check { display: flex; }

.template-preview { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.template-name    { padding: .5rem .65rem; font-size: .8rem; font-weight: 700; text-align: center; color: var(--pc-dark); }

/* ══════════════════════════════════════════
   LIBRARY GRID
══════════════════════════════════════════ */
.library-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
  gap:                   1rem;
}

.library-item {
  background:    var(--pc-white);
  border-radius: var(--radius);
  overflow:      hidden;
  box-shadow:    var(--pc-shadow);
  border:        1px solid var(--pc-border);
  transition:    var(--transition);
}
.library-item:hover { box-shadow: var(--pc-shadow-lg); transform: translateY(-2px); }

.library-item-img {
  width:       100%;
  aspect-ratio: 1;
  object-fit:  cover;
  background:  var(--pc-gray-light);
  display:     block;
}

.library-item-body    { padding: .75rem; }
.library-item-name    { font-size: .85rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.library-item-date    { font-size: .74rem; color: var(--pc-gray); margin-top: .1rem; }
.library-item-actions { display: flex; gap: .4rem; margin-top: .5rem; }

/* ══════════════════════════════════════════
   TIMELINE
══════════════════════════════════════════ */
.timeline {
  position:    relative;
  padding-left: 2rem;
}
.timeline::before {
  content:    '';
  position:   absolute;
  left:       .75rem;
  top:        0; bottom: 0;
  width:      2px;
  background: var(--pc-border);
  border-radius: 99px;
}

.timeline-item    { position: relative; margin-bottom: 1.1rem; }

.timeline-dot {
  position:     absolute;
  left:         -1.625rem;
  top:          .3rem;
  width:        14px;
  height:       14px;
  border-radius: 50%;
  border:       2.5px solid var(--pc-white);
  background:   var(--pc-blue);
  box-shadow:   0 0 0 2px var(--pc-blue);
}
.timeline-dot.green  { background: var(--pc-green);  box-shadow: 0 0 0 2px var(--pc-green); }
.timeline-dot.orange { background: var(--pc-orange); box-shadow: 0 0 0 2px var(--pc-orange); }
.timeline-dot.red    { background: #EF4444;           box-shadow: 0 0 0 2px #EF4444; }
.timeline-dot.blue   { background: var(--pc-blue);   box-shadow: 0 0 0 2px var(--pc-blue); }

.timeline-content {
  background:    var(--pc-white);
  border-radius: var(--radius-sm);
  padding:       .75rem 1rem;
  box-shadow:    var(--pc-shadow);
  border:        1px solid var(--pc-border);
}

.timeline-action { font-weight: 700; font-size: .875rem; color: var(--pc-dark); }
.timeline-detail { font-size: .8rem; color: var(--pc-gray); margin-top: .1rem; }
.timeline-time   { font-size: .74rem; color: var(--pc-gray); margin-top: .25rem; }

/* ══════════════════════════════════════════
   UPLOAD ZONE
══════════════════════════════════════════ */
.upload-zone {
  border:        2px dashed var(--pc-border);
  border-radius: var(--radius);
  padding:       1.75rem 1rem;
  text-align:    center;
  cursor:        pointer;
  transition:    var(--transition);
  background:    var(--pc-gray-light);
  position:      relative;
}
.upload-zone:hover,
.upload-zone.drag-over {
  border-color: var(--pc-blue);
  background:   var(--pc-blue-light);
}
.upload-zone input[type="file"] {
  position: absolute;
  inset:    0;
  opacity:  0;
  cursor:   pointer;
  width:    100%;
  height:   100%;
}

.upload-zone-icon { font-size: 2rem; color: var(--pc-blue); margin-bottom: .5rem; }
.upload-zone-text { font-size: .875rem; font-weight: 700; color: var(--pc-dark); }
.upload-zone-hint { font-size: .78rem; color: var(--pc-gray); margin-top: .2rem; }

.upload-preview {
  width:         100%;
  max-height:    220px;
  object-fit:    contain;
  border-radius: var(--radius-sm);
  margin-top:    .75rem;
  display:       none;
}

/* ══════════════════════════════════════════
   CANVAS PREVIEW
══════════════════════════════════════════ */
.canvas-wrap {
  background:    linear-gradient(135deg, #f8faff, var(--pc-blue-light));
  border-radius: var(--radius);
  padding:       1.5rem;
  text-align:    center;
  min-height:    300px;
  display:       flex;
  align-items:   center;
  justify-content: center;
}

#promoCanvas {
  max-width:     100%;
  border-radius: var(--radius);
  box-shadow:    var(--pc-shadow-lg);
  display:       block;
}

/* ══════════════════════════════════════════
   BADGE
══════════════════════════════════════════ */
.badge-pc {
  padding:       .28rem .7rem;
  border-radius: 99px;
  font-size:     .74rem;
  font-weight:   700;
  display:       inline-block;
}
.badge-blue   { background: var(--pc-blue-light);  color: var(--pc-blue); }
.badge-green  { background: var(--pc-green-light); color: var(--pc-green); }
.badge-orange { background: var(--pc-orange-light);color: var(--pc-orange); }
.badge-red    { background: #FEE2E2; color: #991B1B; }

/* ══════════════════════════════════════════
   ALERTS
══════════════════════════════════════════ */
.pc-alert {
  border-radius: var(--radius-sm);
  padding:       .75rem 1rem;
  font-size:     .875rem;
  font-weight:   500;
  display:       flex;
  align-items:   flex-start;
  gap:           .6rem;
  line-height:   1.5;
}
.pc-alert i { flex-shrink: 0; margin-top: .05rem; }

.pc-alert-info    { background: var(--pc-blue-light);  color: var(--pc-blue-dark); border-left: 3px solid var(--pc-blue); }
.pc-alert-success { background: var(--pc-green-light); color: #065F46;             border-left: 3px solid var(--pc-green); }
.pc-alert-warn    { background: var(--pc-orange-light);color: #9A3412;             border-left: 3px solid var(--pc-orange); }
.pc-alert-error   { background: #FEE2E2;               color: #991B1B;             border-left: 3px solid #EF4444; }

/* ══════════════════════════════════════════
   TOAST
══════════════════════════════════════════ */
.pc-toast-container {
  position:       fixed;
  top:            1rem;
  right:          1rem;
  z-index:        9999;
  display:        flex;
  flex-direction: column;
  gap:            .5rem;
  pointer-events: none;
}

.pc-toast {
  background:    var(--pc-dark);
  color:         white;
  border-radius: var(--radius-sm);
  padding:       .75rem 1rem;
  font-size:     .875rem;
  font-weight:   600;
  display:       flex;
  align-items:   center;
  gap:           .6rem;
  box-shadow:    var(--pc-shadow-lg);
  min-width:     260px;
  max-width:     340px;
  pointer-events: auto;
  animation:     toastIn .28s ease;
}
.pc-toast.success { border-left: 4px solid var(--pc-green); }
.pc-toast.error   { border-left: 4px solid #EF4444; }
.pc-toast.info    { border-left: 4px solid var(--pc-blue); }
.pc-toast.warn    { border-left: 4px solid var(--pc-orange); }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ══════════════════════════════════════════
   LOADING SPINNER
══════════════════════════════════════════ */
.pc-spinner {
  display:      inline-block;
  width:        22px;
  height:       22px;
  border:       2.5px solid rgba(255,255,255,.3);
  border-top-color: white;
  border-radius: 50%;
  animation:    spin .7s linear infinite;
  flex-shrink:  0;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(255,255,255,.72);
  backdrop-filter: blur(4px);
  z-index:         9998;
  display:         none;
  align-items:     center;
  justify-content: center;
  flex-direction:  column;
  gap:             1rem;
}
.loading-overlay.show { display: flex; }

.loading-text {
  font-weight: 700;
  font-size:   .95rem;
  color:       var(--pc-blue);
}

/* ══════════════════════════════════════════
   AVATAR UPLOAD
══════════════════════════════════════════ */
.avatar-upload-wrap {
  position:      relative;
  width:         100px;
  height:        100px;
  margin:        0 auto .75rem;
}

.avatar-upload-img {
  width:         100px;
  height:        100px;
  border-radius: 50%;
  object-fit:    cover;
  border:        3px solid var(--pc-blue-light);
  display:       block;
}

.avatar-upload-btn {
  position:        absolute;
  bottom:          0;
  right:           0;
  width:           30px;
  height:          30px;
  border-radius:   50%;
  background:      var(--pc-blue);
  color:           white;
  border:          2.5px solid white;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  font-size:       .8rem;
  transition:      var(--transition);
}
.avatar-upload-btn:hover { background: var(--pc-blue-dark); }

/* ══════════════════════════════════════════
   QUOTA / PLAN CARDS
══════════════════════════════════════════ */
.plan-card {
  background:    var(--pc-white);
  border-radius: var(--radius);
  padding:       1.5rem 1.25rem;
  border:        2px solid var(--pc-border);
  text-align:    center;
  transition:    var(--transition);
  position:      relative;
  overflow:      hidden;
  height:        100%;
}
.plan-card:hover  { border-color: var(--pc-blue); box-shadow: var(--pc-shadow-lg); transform: translateY(-3px); }
.plan-card.popular { border-color: var(--pc-blue); }

.plan-popular-badge {
  position:        absolute;
  top:             .85rem;
  right:           -1.75rem;
  background:      linear-gradient(135deg, var(--pc-orange), #EA6C00);
  color:           white;
  font-size:       .68rem;
  font-weight:     800;
  padding:         .22rem 2.2rem;
  transform:       rotate(35deg);
  letter-spacing:  .04em;
}

.plan-name  { font-weight: 800; font-size: 1.1rem; margin-bottom: .5rem; color: var(--pc-dark); }
.plan-price {
  font-size:   1.85rem;
  font-weight: 800;
  color:       var(--pc-blue);
  line-height: 1;
  margin-bottom: .35rem;
}
.plan-price sup   { font-size: .85rem; vertical-align: top; margin-top: .4rem; }
.plan-price small { font-size: .8rem; color: var(--pc-gray); display: block; margin-top: .15rem; }
.plan-quota       { font-size: .875rem; color: var(--pc-gray); margin-bottom: .75rem; }

/* ══════════════════════════════════════════
   QRIS
══════════════════════════════════════════ */
.qris-wrap {
  background:    linear-gradient(135deg, var(--pc-blue-light), #F0F9FF);
  border-radius: var(--radius);
  padding:       1.5rem;
  text-align:    center;
  border:        2px dashed var(--pc-blue);
}
.qris-wrap img { max-width: 200px; border-radius: var(--radius-sm); box-shadow: var(--pc-shadow); }

/* ══════════════════════════════════════════
   SETTINGS PAGE
══════════════════════════════════════════ */
.settings-section       { margin-bottom: 1.5rem; }
.settings-section-title {
  font-size:      .72rem;
  font-weight:    700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          var(--pc-gray);
  margin-bottom:  .75rem;
  padding-bottom: .5rem;
  border-bottom:  1px solid var(--pc-border);
}

.danger-zone {
  border:        1.5px solid #FCA5A5;
  border-radius: var(--radius);
  padding:       1.25rem;
  background:    #FFF5F5;
}

/* Step indicator */
.step-indicator {
  display:     flex;
  align-items: center;
  gap:         .35rem;
  margin-bottom: 1rem;
}

/* ══════════════════════════════════════════
   PAGINATION
══════════════════════════════════════════ */
.page-link {
  color:         var(--pc-blue);
  border-color:  var(--pc-border);
  font-weight:   600;
  font-size:     .875rem;
  font-family:   'Nunito', sans-serif;
}
.page-item.active .page-link {
  background-color: var(--pc-blue);
  border-color:     var(--pc-blue);
}
.page-link:hover { background: var(--pc-blue-light); color: var(--pc-blue); }

/* ══════════════════════════════════════════
   SCROLLBAR CUSTOM
══════════════════════════════════════════ */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--pc-border); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--pc-gray); }

/* ══════════════════════════════════════════
   MODAL OVERRIDE
══════════════════════════════════════════ */
.modal-content {
  border-radius: var(--radius) !important;
  border:        none !important;
  box-shadow:    var(--pc-shadow-lg);
}
.modal-header { padding: 1.1rem 1.25rem .75rem; }
.modal-body   { padding: 1rem 1.25rem 1.25rem; }
.modal-footer { padding: .75rem 1.25rem; border-top: 1px solid var(--pc-border); }
.btn-close    { opacity: .5; }
.btn-close:hover { opacity: 1; }

/* ══════════════════════════════════════════
   TABLE OVERRIDE
══════════════════════════════════════════ */
.table { font-size: .875rem; font-family: 'Nunito', sans-serif; }
.table th {
  font-weight:    700;
  font-size:      .8rem;
  letter-spacing: .03em;
  color:          var(--pc-gray);
  text-transform: uppercase;
  border-bottom:  2px solid var(--pc-border);
}
.table td { vertical-align: middle; border-color: var(--pc-border); }

/* ══════════════════════════════════════════
   UTILITY
══════════════════════════════════════════ */
.text-blue   { color: var(--pc-blue)   !important; }
.text-green  { color: var(--pc-green)  !important; }
.text-orange { color: var(--pc-orange) !important; }
.text-gray   { color: var(--pc-gray)   !important; }
.bg-blue-light   { background: var(--pc-blue-light)   !important; }
.bg-green-light  { background: var(--pc-green-light)  !important; }
.bg-orange-light { background: var(--pc-orange-light) !important; }
.fw-700 { font-weight: 700 !important; }
.fw-800 { font-weight: 800 !important; }
.radius  { border-radius: var(--radius)    !important; }
.radius-sm { border-radius: var(--radius-sm) !important; }
.gap-2 { gap: .5rem !important; }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 991.98px) {
  .sidebar            { transform: translateX(-100%); }
  .sidebar.open       { transform: translateX(0); }
  .main-content       { margin-left: 0; }
  .btn-sidebar-toggle { display: flex; }
  .bottom-nav         { display: block; }
  .page-content       { padding-bottom: calc(var(--bottombar-h) + 1rem); }
}

@media (max-width: 767.98px) {
  .page-content    { padding: 1.1rem .85rem; }
  .pc-card         { padding: 1rem; }
  .stat-value      { font-size: 1.35rem; }
  .library-grid    { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .template-grid   { grid-template-columns: repeat(2, 1fr); gap: .65rem; }
}

@media (max-width: 575.98px) {
  .auth-card       { padding: 1.65rem 1.1rem; }
  h1               { font-size: 1.3rem; }
  h2               { font-size: 1.1rem; }
  .plan-card       { padding: 1.1rem; }
  .pc-toast        { min-width: 220px; max-width: 290px; font-size: .82rem; }
  .pc-toast-container { right: .5rem; top: .5rem; }
}

@media (min-width: 992px) {
  .bottom-nav { display: none !important; }
}