/* ==========================================================
   CloudNotes — Modern Bright Blue Theme
   Mobile-first (Android & iPhone) + tetap rapi di laptop
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --blue-50:  #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;
    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --violet-500: #6366f1;
    --ink:      #0f172a;
    --muted:    #64748b;
    --muted-soft: #94a3b8;
    --border:   #e6ebf2;
    --card-bg:  #ffffff;
    --danger:   #ef4444;
    --success:  #10b981;
    --radius-xl: 26px;
    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-sm: 10px;
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.07);
    --shadow-md: 0 10px 28px rgba(37, 99, 235, 0.12);
    --shadow-lg: 0 24px 50px rgba(37, 99, 235, 0.18);
    /* Safe-area helpers untuk notch/home-indicator iPhone & gesture-nav Android */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --gutter: 24px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Helvetica, Arial, sans-serif;
    font-size: 16px;
    color: var(--ink);
    background: var(--blue-50);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    width: 100%;
    letter-spacing: -0.01em;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
img, svg { max-width: 100%; display: block; }
.icon { width: 1em; height: 1em; flex-shrink: 0; }

.container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 var(--gutter);
    padding-left: calc(var(--gutter) + var(--safe-left));
    padding-right: calc(var(--gutter) + var(--safe-right));
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 10px 20px;
    border-radius: 999px;
    border: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; }
.btn:active { transform: scale(0.97); }
.btn-primary {
    background: linear-gradient(135deg, var(--blue-500), var(--violet-500));
    color: #fff;
    box-shadow: var(--shadow-md);
}
.btn-primary:hover { box-shadow: var(--shadow-lg); }
.btn-outline {
    background: #fff;
    color: var(--blue-600);
    border: 1.5px solid var(--blue-200);
}
.btn-outline:hover { border-color: var(--blue-500); background: var(--blue-50); }
.btn-ghost { background: transparent; color: var(--blue-700); }
.btn-ghost:hover { background: var(--blue-100); }
.btn-danger { background: #fee2e2; color: var(--danger); }
.btn-danger:hover { background: #fecaca; }
.btn-block { width: 100%; }
.btn-lg { padding: 14px 28px; font-size: 16px; min-height: 50px; }
.btn-sm { padding: 6px 14px; font-size: 13px; min-height: 36px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Header / Nav ---------- */
.site-header, .app-header {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid rgba(226, 232, 240, 0.7);
    position: sticky;
    top: 0;
    z-index: 20;
    padding-top: var(--safe-top);
}
.header-inner, .app-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px var(--gutter);
    padding-left: calc(var(--gutter) + var(--safe-left));
    padding-right: calc(var(--gutter) + var(--safe-right));
    gap: 12px;
    flex-wrap: wrap;
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 19px;
    font-weight: 800;
    color: var(--ink);
    flex-shrink: 0;
}
.brand-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--blue-500), var(--violet-500));
    color: #fff;
    box-shadow: 0 6px 14px rgba(59, 130, 246, 0.35);
    flex-shrink: 0;
}
.brand-mark svg { width: 19px; height: 19px; }
.brand-center { justify-content: center; margin-bottom: 8px; }
.header-nav { display: flex; gap: 8px; flex-shrink: 0; }

/* ---------- Hero ---------- */
.hero {
    position: relative;
    overflow: hidden;
    padding: 64px 0 52px;
}
.hero::before, .hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    z-index: 0;
}
.hero::before {
    width: 340px; height: 340px;
    background: radial-gradient(circle, rgba(59,130,246,0.30), transparent 70%);
    top: -120px; left: -80px;
}
.hero::after {
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(99,102,241,0.22), transparent 70%);
    bottom: -160px; right: -100px;
}
.hero-inner { position: relative; z-index: 1; text-align: center; max-width: 760px; }
.hero h1 {
    font-size: clamp(28px, 7vw, 46px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
    color: var(--ink);
}
.hero h1 .accent {
    background: linear-gradient(135deg, var(--blue-600), var(--violet-500));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero-sub { color: var(--muted); font-size: clamp(15px, 4vw, 18px); margin-bottom: 28px; }
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-cta .btn { flex: 1 1 220px; max-width: 280px; }
.hero-install-btn { margin: 16px auto 0; }
.ios-hint-steps { margin: 0 0 18px; padding-left: 20px; text-align: left; font-size: 14px; line-height: 1.7; color: var(--ink); }
.ios-share-icon { display: inline-block; }

/* ---------- Feature strip ---------- */
.feature-strip { padding: 44px 0; position: relative; z-index: 1; }
.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.feature-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px 18px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.feature-icon-badge {
    width: 46px; height: 46px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 14px;
    color: #fff;
}
.feature-icon-badge svg { width: 22px; height: 22px; }
.feature-icon-badge.tint-blue   { background: linear-gradient(135deg, var(--blue-500), var(--blue-600)); }
.feature-icon-badge.tint-green  { background: linear-gradient(135deg, #34d399, var(--success)); }
.feature-icon-badge.tint-violet { background: linear-gradient(135deg, #818cf8, var(--violet-500)); }
.feature-icon-badge.tint-amber  { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.feature-card h3 { margin: 6px 0; font-size: 16px; }
.feature-card p { color: var(--muted); font-size: 14px; margin: 0; line-height: 1.5; }

/* ---------- Pricing ---------- */
.pricing { padding: 48px 0 64px; position: relative; z-index: 1; }
.section-title { text-align: center; font-size: clamp(22px, 5.5vw, 30px); margin-bottom: 6px; letter-spacing: -0.01em; }
.section-sub { text-align: center; color: var(--muted); margin-bottom: 32px; font-size: 15px; }
.plan-grid {
    display: grid;
    /* Otomatis menyesuaikan jumlah paket yang ada (sekarang 2: Gratis & Pro)
       tanpa kartu jadi terlalu lebar atau ada kolom kosong yang aneh. */
    grid-template-columns: repeat(auto-fit, minmax(240px, 360px));
    justify-content: center;
    gap: 20px;
}
.plan-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 28px 22px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
}
.plan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.plan-popular { border-color: var(--blue-400); box-shadow: var(--shadow-md); }
.plan-current { border-color: var(--blue-400); background: linear-gradient(180deg, var(--blue-50), #fff 40%); }
.plan-badge {
    position: absolute;
    top: -12px;
    left: 22px;
    background: linear-gradient(135deg, var(--blue-500), var(--violet-500));
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
}
.plan-badge-current { left: auto; right: 22px; background: var(--success); }
.plan-card h3 { margin: 10px 0 4px; font-size: 20px; }
.plan-price { font-size: 26px; font-weight: 800; color: var(--blue-700); margin-bottom: 8px; letter-spacing: -0.02em; }
.plan-desc { color: var(--muted); font-size: 14px; min-height: 40px; }
.plan-features { margin: 16px 0 24px; flex: 1; }
.plan-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-top: 1px solid var(--border);
    font-size: 14px;
    color: var(--ink);
}
.plan-features li::before {
    content: '';
    flex-shrink: 0;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--blue-100);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 10px;
}
.pricing-note { text-align: center; color: var(--muted-soft); font-size: 13px; margin-top: 30px; }

/* Kotak perpanjangan akun ringkas -- dipakai menggantikan .plan-grid saat
   user SEDANG di paket berbayar (lihat account.php), supaya tidak perlu
   tampilkan ulang perbandingan semua paket cuma untuk memperpanjang,
   karena pilihan paket berbayar cuma satu jenis. */
.renewal-box {
    max-width: 420px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 26px 24px;
    text-align: center;
}
.renewal-note { color: var(--muted); font-size: 12.5px; margin: 10px 0 0; line-height: 1.5; }
.renewal-downgrade {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    text-align: left;
}
.renewal-downgrade summary {
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--muted);
    text-align: center;
    list-style: none;
}
.renewal-downgrade summary::-webkit-details-marker { display: none; }
.renewal-downgrade summary:hover { color: var(--ink); }
.renewal-downgrade p { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 12px 0; }
.renewal-downgrade form { display: flex; justify-content: center; }

/* ---------- Footer ---------- */
.site-footer {
    padding: 24px 0 calc(24px + var(--safe-bottom));
    text-align: center;
    color: var(--muted-soft);
    font-size: 13px;
    border-top: 1px solid var(--border);
    position: relative; z-index: 1;
}

/* ---------- Auth pages ---------- */
.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 24px 16px;
    padding-top: calc(24px + var(--safe-top));
    padding-bottom: calc(24px + var(--safe-bottom));
    background:
        radial-gradient(circle at 15% 10%, rgba(59,130,246,0.14), transparent 55%),
        radial-gradient(circle at 90% 90%, rgba(99,102,241,0.12), transparent 55%),
        var(--blue-50);
}
.auth-wrap { width: 100%; display: flex; justify-content: center; }
.auth-card {
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 32px 24px;
    width: 100%;
    max-width: 420px;
    text-align: center;
}
.auth-card-wide { max-width: 640px; }
.auth-card h1 { font-size: clamp(20px, 5vw, 24px); margin: 6px 0 4px; letter-spacing: -0.01em; }
.auth-sub { color: var(--muted); margin-bottom: 24px; font-size: 14px; }
.auth-switch { margin-top: 20px; font-size: 14px; color: var(--muted); }
.auth-switch a { color: var(--blue-600); font-weight: 700; }

.form-grid { display: flex; flex-direction: column; gap: 16px; text-align: left; }
.form-grid label { font-size: 13px; font-weight: 700; color: var(--ink); display: flex; flex-direction: column; gap: 6px; }
.form-grid input, .form-grid textarea {
    font: inherit;
    font-size: 16px; /* cegah auto-zoom Safari iOS saat fokus input */
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
    width: 100%;
    background: #f8fafc;
}
.form-grid input:focus, .form-grid textarea:focus { border-color: var(--blue-500); background: #fff; box-shadow: 0 0 0 4px var(--blue-100); }

.alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin-bottom: 18px;
    font-size: 14px;
    text-align: left;
    line-height: 1.5;
}
.alert-icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.alert-error { background: #fef2f2; color: #b91c1c; }
.alert-error .alert-icon { color: var(--danger); }
.alert-success { background: #f0fdf4; color: #15803d; }
.alert-success .alert-icon { color: var(--success); }
.banner-mt { margin: 14px 0 0; }

.plan-picker { margin-top: 4px; }
.plan-picker-label { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.plan-picker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.plan-pick-card {
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    cursor: pointer;
    font-weight: 400;
    text-align: center;
    transition: border-color .15s ease, background .15s ease;
    touch-action: manipulation;
}
.plan-pick-card input { display: none; }
.plan-pick-card strong { font-size: 14px; }
.plan-pick-price { color: var(--blue-600); font-size: 13px; font-weight: 700; }
.plan-pick-cap { color: var(--muted); font-size: 12px; }
.plan-pick-active, .plan-pick-card:hover { border-color: var(--blue-500); background: var(--blue-50); }

/* ---------- App / Dashboard ---------- */
.app-page { min-height: 100vh; min-height: 100dvh; background: linear-gradient(180deg, var(--blue-50), #f4f7fe 240px, #f4f7fe); }

/* Bar pencarian catatan/checklist -- disembunyikan bawaan (cuma ikon kaca
   pembesar yang tampil, di sebelah ikon Pengaturan di header), baru
   muncul sebagai bar penuh di bawah header begitu ikonnya diklik (lihat
   #searchToggleBtn/#searchCloseBtn di app.js). Ini menghemat tempat di
   header dibanding kolom cari yang selalu tampil penuh. */
.app-search-bar {
    display: none;
    border-top: 1px solid rgba(226, 232, 240, 0.7);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
}
.app-search-bar.open { display: block; }
.app-search-bar-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px var(--gutter);
    padding-left: calc(var(--gutter) + var(--safe-left));
    padding-right: calc(var(--gutter) + var(--safe-right));
}
.app-search { flex: 1; max-width: 520px; position: relative; }
.app-search .search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px; height: 17px;
    color: var(--muted-soft);
    pointer-events: none;
}
.app-search input {
    width: 100%;
    font: inherit;
    font-size: 15px; /* cegah auto-zoom iOS (>=16px efektif dgn zoom browser default) */
    padding: 11px 16px 11px 40px;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    outline: none;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.app-search input:focus { border-color: var(--blue-400); box-shadow: 0 0 0 4px var(--blue-100); }
.app-header-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.plan-chip {
    background: linear-gradient(135deg, var(--blue-100), #e0e7ff);
    color: var(--blue-700);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 999px;
    white-space: nowrap;
}
.user-menu { display: flex; align-items: center; gap: 10px; }
.user-name { font-size: 14px; font-weight: 600; color: var(--muted); }
.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: #fff;
    color: var(--muted);
    flex-shrink: 0;
    touch-action: manipulation;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn:hover { background: var(--blue-50); color: var(--blue-600); border-color: var(--blue-200); }

.quota-bar-wrap { padding-top: 18px; }
.quota-bar-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}
.quota-bar-top { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; gap: 12px; flex-wrap: wrap; }
.quota-track { height: 8px; border-radius: 999px; background: var(--blue-100); margin-top: 10px; overflow: hidden; }
.quota-fill { height: 100%; background: linear-gradient(90deg, var(--blue-400), var(--violet-500)); border-radius: 999px; transition: width .3s ease; }
.quota-fill-danger { background: linear-gradient(90deg, #f97316, var(--danger)); }

.notes-area { padding: 22px var(--gutter) calc(110px + var(--safe-bottom)); }
.empty-state { text-align: center; padding: 70px 20px; color: var(--muted); }
.empty-illustration {
    width: 88px; height: 88px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue-100), #e0e7ff);
    display: flex; align-items: center; justify-content: center;
    color: var(--blue-500);
}
.empty-illustration svg { width: 40px; height: 40px; }
.empty-state h3 { color: var(--ink); margin: 0 0 6px; font-size: 17px; }
.empty-state p { margin: 0; font-size: 14px; max-width: 320px; margin-inline: auto; }

.notes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
.note-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    transition: transform .18s ease, box-shadow .18s ease;
    animation: card-in .35s ease backwards;
}
.note-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.note-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.note-heading { display: flex; align-items: center; gap: 10px; min-width: 0; }
.note-icon-badge {
    width: 32px; height: 32px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: #fff;
}
.note-icon-badge svg { width: 16px; height: 16px; }
.note-emoji-icon { font-size: 17px; line-height: 1; }
.note-title { margin: 0; font-size: 15px; font-weight: 700; word-break: break-word; }
.note-content { margin: 0; font-size: 14px; color: var(--ink); white-space: pre-wrap; word-break: break-word; max-height: 160px; overflow: hidden; line-height: 1.5; }

/* ==========================================================
   Gaya huruf catatan (font). Sengaja dipakaikan keluarga font
   GENERIK bawaan CSS (sans-serif/serif/monospace/cursive) -- bukan
   nama font tertentu sebagai andalan utama -- supaya dijamin tampil
   di semua perangkat tanpa perlu unduh font tambahan. Emoji/karakter
   unicode otomatis ditangani browser lewat fallback font emoji
   bawaan OS meski tidak disebut eksplisit di sini -- ini sudah
   perilaku standar semua browser modern, dan sengaja TIDAK dituliskan
   eksplisit di tumpukan font di bawah karena kombinasi nama font yang
   tidak tersedia + nama font emoji eksplisit terbukti bisa memicu bug
   render (spasi antar kata jadi lebar tidak wajar) pada sebagian
   kombinasi browser/OS.
   ========================================================== */
.note-font-sans {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Helvetica, Arial, sans-serif;
}
.note-font-serif {
    font-family: Georgia, 'Noto Serif', Cambria, "Times New Roman", Times, serif;
}
.note-font-mono {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Monaco, "Courier New", monospace;
}
.note-font-cursive {
    font-family: 'Segoe Script', 'Bradley Hand', 'Brush Script MT', 'Comic Sans MS', cursive;
}

/* Ukuran huruf catatan (terpisah dari gaya huruf di atas) -- 'md' adalah
   ukuran bawaan jadi tidak perlu override (sudah sama dengan base
   .note-title/.note-content/.checklist-view li di atas). */
.note-title.note-size-sm { font-size: 13px; }
.note-title.note-size-lg { font-size: 18px; }
.note-title.note-size-xl { font-size: 21px; }

.note-content.note-size-sm { font-size: 12px; }
.note-content.note-size-lg { font-size: 17px; }
.note-content.note-size-xl { font-size: 20px; }

.checklist-view.note-size-sm li { font-size: 12px; }
.checklist-view.note-size-lg li { font-size: 17px; }
.checklist-view.note-size-xl li { font-size: 20px; }

.pin-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted-soft);
    touch-action: manipulation;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -6px -6px 0 0;
    border-radius: 50%;
    transition: background .15s ease, color .15s ease;
}
.pin-btn:hover { background: var(--blue-50); }
.pin-btn svg { width: 17px; height: 17px; }
.pin-active { color: var(--blue-600); }
.pin-active svg { fill: currentColor; }

.note-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 4px; }
.note-meta { font-size: 12px; color: var(--muted-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-edit-btn {
    background: none;
    border: none;
    color: var(--blue-600);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    padding: 4px 0;
    touch-action: manipulation;
    flex-shrink: 0;
}

.checklist-progress { display: flex; align-items: center; gap: 8px; }
.checklist-progress-track { flex: 1; height: 6px; border-radius: 999px; background: rgba(15,23,42,0.08); overflow: hidden; }
.checklist-progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--blue-400), var(--success)); transition: width .3s ease; }
.checklist-progress-label { font-size: 11.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }

.checklist-view { display: flex; flex-direction: column; gap: 2px; }
.checklist-view li { font-size: 14px; }
.checklist-view label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 5px 0; touch-action: manipulation; }
.checklist-view input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    margin-top: 1px;
    width: 20px; height: 20px;
    border-radius: 6px;
    border: 2px solid var(--border);
    background: #fff;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    transition: background .15s ease, border-color .15s ease;
}
.checklist-view input[type="checkbox"]:checked {
    background: linear-gradient(135deg, var(--blue-500), var(--success));
    border-color: transparent;
}
.checklist-view input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 6px; top: 2px;
    width: 5px; height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(40deg);
}
.checklist-view input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }
.item-checked span { text-decoration: line-through; color: var(--muted-soft); }

.note-color-blue   .note-icon-badge { background: linear-gradient(135deg, var(--blue-500), var(--blue-600)); }
.note-color-yellow .note-icon-badge { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.note-color-green  .note-icon-badge { background: linear-gradient(135deg, #34d399, var(--success)); }
.note-color-pink   .note-icon-badge { background: linear-gradient(135deg, #f472b6, #ec4899); }
.note-color-purple .note-icon-badge { background: linear-gradient(135deg, #a78bfa, #8b5cf6); }
.note-color-gray   .note-icon-badge { background: linear-gradient(135deg, #94a3b8, #64748b); }

.note-color-blue   { background: linear-gradient(180deg, #f3f8ff, #fff 60%); }
.note-color-yellow { background: linear-gradient(180deg, #fffbf0, #fff 60%); }
.note-color-green  { background: linear-gradient(180deg, #f2fdf8, #fff 60%); }
.note-color-pink   { background: linear-gradient(180deg, #fef4f9, #fff 60%); }
.note-color-purple { background: linear-gradient(180deg, #f8f5ff, #fff 60%); }
.note-color-gray   { background: linear-gradient(180deg, #f8fafc, #fff 60%); }

@keyframes card-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- FAB ---------- */
.fab {
    position: fixed;
    right: calc(24px + var(--safe-right));
    bottom: calc(24px + var(--safe-bottom));
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--blue-500), var(--violet-500));
    color: #fff;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    touch-action: manipulation;
    z-index: 30;
    transition: transform .15s ease, box-shadow .15s ease;
}
.fab svg { width: 26px; height: 26px; }
.fab:hover { transform: scale(1.06); box-shadow: 0 26px 55px rgba(99,102,241,0.32); }
.fab:active { transform: scale(0.95); }

/* ---------- Modal ---------- */
.modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(3px);
    align-items: center;
    justify-content: center;
    z-index: 50;
    padding: 20px;
    padding-bottom: calc(20px + var(--safe-bottom));
}
.modal-backdrop.open { display: flex; }
.modal {
    background: #fff;
    border-radius: var(--radius-xl);
    padding: 26px;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: var(--shadow-lg);
}
.modal-sm { max-width: 360px; }
.modal h3 { margin: 0 0 18px; font-size: 19px; letter-spacing: -0.01em; }

/* Modal Catatan/Checklist dibuat setinggi mungkin (nyaris satu layar penuh)
   dan kolom isi catatan/checklist mengisi sisa ruang yang ada, supaya
   nyaman dipakai menulis catatan panjang -- warna & icon sudah dipindah
   ke dropdown ringkas supaya ruang ini tersedia. */
.modal-note {
    height: 90vh;
    height: 90dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.modal-note-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-shrink: 0; margin: 0 0 18px; }
.modal-note-head h3 { margin: 0; }
.modal-note form { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.modal-note #noteContentWrap,
.modal-note #checklistWrap {
    flex: 1;
    min-height: 140px;
    display: flex;
    flex-direction: column;
}
.modal-note #noteContentWrap label { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.modal-note #noteContentInput { flex: 1; min-height: 140px; }
.modal-note #checklistItems { flex: 1; overflow-y: auto; }

.type-choice { display: flex; gap: 14px; margin-bottom: 18px; }
.type-choice-btn {
    flex: 1;
    padding: 22px 10px;
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
    background: #f8fafc;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    font-size: 14px;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    touch-action: manipulation;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.type-choice-btn:hover { border-color: var(--blue-400); background: var(--blue-50); transform: translateY(-2px); }
.type-choice-icon {
    width: 44px; height: 44px;
    border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
}
.type-choice-icon svg { width: 21px; height: 21px; }
.type-choice-btn[data-type="note"] .type-choice-icon { background: linear-gradient(135deg, var(--blue-500), var(--blue-600)); }
.type-choice-btn[data-type="checklist"] .type-choice-icon { background: linear-gradient(135deg, #34d399, var(--success)); }

.modal form { display: flex; flex-direction: column; gap: 14px; }
.modal label { font-size: 13px; font-weight: 700; display: flex; flex-direction: column; gap: 6px; }
.modal input[type="text"], .modal textarea {
    font: inherit;
    font-size: 16px; /* cegah auto-zoom iOS */
    padding: 11px 12px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    outline: none;
    font-weight: 400;
    width: 100%;
    background: #f8fafc;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.modal input[type="text"]:focus, .modal textarea:focus { border-color: var(--blue-500); background: #fff; box-shadow: 0 0 0 4px var(--blue-100); }
.modal textarea { min-height: 220px; resize: vertical; line-height: 1.5; }

/* Preview ukuran huruf langsung di kolom judul/isi/item saat mengetik.
   Sengaja HANYA "Besar"/"Sangat Besar" yang membesarkan kolomnya (naik
   dari 16px) -- ukuran "Kecil" tidak dikecilkan di kolom edit (tetap
   16px) supaya tidak memicu auto-zoom Safari iOS saat fokus ke input
   (itu terjadi kalau font-size elemen yang difokus < 16px). Efek
   "Kecil" baru terlihat setelah disimpan, di tampilan kartu catatan
   (lihat .note-title/.note-content.note-size-sm di atas). */
.modal input[type="text"].note-size-lg,
.modal textarea.note-size-lg { font-size: 18px; }
.modal input[type="text"].note-size-xl,
.modal textarea.note-size-xl { font-size: 20px; }

.field-label { font-size: 13px; font-weight: 700; margin: 4px 0 8px; }

.checklist-item-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.checklist-item-row input[type="text"] { flex: 1; }
.checklist-item-row input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    width: 20px; height: 20px;
    border-radius: 6px;
    border: 2px solid var(--border);
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    background: #fff;
}
.checklist-item-row input[type="checkbox"]:checked {
    background: linear-gradient(135deg, var(--blue-500), var(--success));
    border-color: transparent;
}
.checklist-item-row input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 6px; top: 2px;
    width: 5px; height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(40deg);
}
.item-remove-btn {
    background: none;
    border: none;
    color: var(--danger);
    cursor: pointer;
    line-height: 1;
    touch-action: manipulation;
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.item-remove-btn:hover { background: #fee2e2; }
.item-remove-btn svg { width: 16px; height: 16px; }

/* Warna dasar swatch -- dipakai ulang oleh .color-dot di dropdown Warna
   (dulu tombol pilihan warna, sekarang dropdown supaya kolom isi catatan
   dapat ruang lebih besar). */
.swatch-blue   { background: linear-gradient(135deg, var(--blue-500), var(--blue-600)); }
.swatch-yellow { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.swatch-green  { background: linear-gradient(135deg, #34d399, var(--success)); }
.swatch-pink   { background: linear-gradient(135deg, #f472b6, #ec4899); }
.swatch-purple { background: linear-gradient(135deg, #a78bfa, #8b5cf6); }
.swatch-gray   { background: linear-gradient(135deg, #94a3b8, #64748b); }

/* Baris Warna + Gaya Huruf + Ukuran Font + Icon Penanda + tombol Hapus
   sejajar dalam satu baris (semuanya dropdown, kecuali Hapus yang berupa
   tombol icon ringkas), supaya hemat tempat vertikal, tetap muat dalam
   satu baris bahkan di layar HP sempit (lebar modal maks 480px), dan
   kolom isi catatan bisa lebih besar/penuh. Tulisan label (Warna/Gaya
   Huruf/dst) sengaja dihilangkan dari tampilan -- cukup diwakili preview
   ikon/dot di sampingnya -- tapi tetap ada sebagai aria-label di masing-
   masing <select> untuk pembaca layar. */
.style-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.style-row .field-group { flex: 1 1 68px; display: flex; flex-direction: column; min-width: 0; }
.style-row .field-group-delete { flex: 0 0 auto; }

.font-preview, .size-preview {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--blue-600);
    line-height: 1;
}
/* Preview ukuran huruf di dropdown Ukuran Font -- karakter "A" ikut
   membesar/mengecil sesuai pilihan supaya kelihatan langsung bedanya. */
.size-preview.note-size-sm { font-size: 10px; }
.size-preview.note-size-md { font-size: 13px; }
.size-preview.note-size-lg { font-size: 16px; }
.size-preview.note-size-xl { font-size: 19px; }

.modal select {
    font: inherit;
    font-size: 13px;
    padding: 9px 6px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    outline: none;
    width: 100%;
    background: #f8fafc;
    color: var(--ink);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.modal select:focus { border-color: var(--blue-500); background: #fff; box-shadow: 0 0 0 4px var(--blue-100); }
.modal select:disabled { opacity: .5; cursor: not-allowed; }

.select-with-dot { display: flex; align-items: center; gap: 6px; }
.select-with-dot select { flex: 1; min-width: 0; }
.color-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px var(--border);
}

/* Tombol Hapus versi icon ringkas supaya tetap muat sejajar dalam satu baris
   bersama ketiga dropdown, sejajar tinggi dengan kotak select (lihat
   .style-row align-items: flex-end). */
.btn-icon-danger {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 1.5px solid transparent;
    background: #fee2e2;
    color: var(--danger);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease;
}
.btn-icon-danger:hover { background: #fecaca; }
.btn-icon-danger:disabled { opacity: .5; cursor: not-allowed; }

.form-msg { font-size: 13px; color: var(--danger); min-height: 16px; line-height: 1.5; }
.modal-actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.spacer { flex: 1; }

/* ==========================================================
   Responsive breakpoints
   Laptop/desktop di atas, tablet & ponsel (Android/iPhone) di bawah
   ========================================================== */

/* Tablet & laptop kecil */
@media (max-width: 900px) {
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .plan-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
    .plan-picker-grid { grid-template-columns: 1fr; }
}

/* Ponsel (Android & iPhone, termasuk landscape kecil) */
@media (max-width: 640px) {
    :root { --gutter: 16px; }

    .header-inner, .app-header-inner { padding-top: 12px; padding-bottom: 12px; gap: 10px; }
    .header-nav .btn { padding: 9px 14px; }

    .hero { padding: 40px 0 36px; }
    .hero-cta { flex-direction: column; align-items: stretch; }
    .hero-cta .btn { flex: none; width: 100%; max-width: none; }

    .feature-grid { grid-template-columns: 1fr; }

    .auth-card { padding: 26px 20px; }

    .notes-grid { grid-template-columns: 1fr; }
    .notes-area { padding-left: 16px; padding-right: 16px; }

    .quota-bar-top { font-size: 13px; }

    /* Modal jadi bottom-sheet ala aplikasi mobile */
    .modal-backdrop { align-items: flex-end; padding: 0; }
    .modal {
        max-width: 100%;
        max-height: 88dvh;
        border-radius: 24px 24px 0 0;
        padding: 22px 18px calc(18px + var(--safe-bottom));
        animation: sheet-up .22s ease-out;
    }
    .modal-sm { max-width: 100%; }
    .type-choice { flex-direction: column; }

    /* Modal catatan/checklist dibuat FULL LAYAR (bukan bottom-sheet) khusus
       di HP -- sampai paling atas layar, supaya area menulisnya maksimal.
       Modal lain (mis. pemilih tipe catatan/checklist di atas) tetap
       bottom-sheet seperti biasa. */
    .modal-note {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        padding: calc(16px + var(--safe-top)) 18px calc(18px + var(--safe-bottom));
        animation: sheet-up .22s ease-out;
    }
}

@keyframes sheet-up {
    from { transform: translateY(24px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Ponsel sangat sempit (iPhone SE, Android kecil ~360-375px) */
@media (max-width: 380px) {
    .brand { font-size: 17px; }
    .plan-chip { display: none; }
    .btn-lg { padding: 13px 20px; }
}

/* Landscape ponsel pendek: jaga FAB & modal tidak menutup konten penting */
@media (max-height: 480px) and (orientation: landscape) {
    .fab { width: 50px; height: 50px; }
    .fab svg { width: 22px; height: 22px; }
    .modal { max-height: 94dvh; }
}

/* Laptop / layar besar: batasi lebar grid catatan biar tidak terlalu lebar & tetap enak dibaca */
@media (min-width: 1200px) {
    .notes-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

/* ---------- Panel Admin (Superadmin) ---------- */
.admin-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}
.admin-tab {
    flex-shrink: 0;
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.admin-tab:hover { background: var(--blue-50); color: var(--blue-600); }
.admin-tab.active { background: linear-gradient(135deg, var(--blue-500), var(--violet-500)); color: #fff; }

.admin-main { padding: 22px var(--gutter) 60px; }
.admin-section-title { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; margin: 26px 0 14px; }
.admin-section-title:first-child { margin-top: 0; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.stat-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    box-shadow: var(--shadow-sm);
}
.stat-value { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.stat-label { font-size: 13px; color: var(--muted); margin-top: 2px; }

.admin-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 20px;
    margin-bottom: 20px;
}
.admin-card-title { font-size: 15px; font-weight: 800; margin: 0 0 14px; }

.admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 560px; }
.admin-table th {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted-soft);
    font-weight: 700;
    padding: 0 12px 10px;
    border-bottom: 1.5px solid var(--border);
    white-space: nowrap;
}
.admin-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table .cell-muted { color: var(--muted); font-size: 12.5px; }
.admin-select {
    font: inherit;
    font-size: 13.5px;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    background: #f8fafc;
    color: var(--ink);
}
.admin-select:focus { outline: none; border-color: var(--blue-500); }
.admin-row-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    background: var(--blue-100);
    color: var(--blue-700);
}
.admin-badge-admin { background: linear-gradient(135deg, var(--blue-500), var(--violet-500)); color: #fff; }
.admin-empty { color: var(--muted); font-size: 14px; padding: 30px 0; text-align: center; }

.plan-edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.plan-edit-card { border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 16px; }
.plan-edit-card h4 { margin: 0 0 12px; font-size: 15px; }
.plan-edit-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.plan-edit-row label { flex: 1; font-size: 13px; font-weight: 700; color: var(--muted); }
.plan-edit-row input[type="text"],
.plan-edit-row input[type="number"] {
    flex: 1.4;
    font: inherit;
    font-size: 14px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    background: #f8fafc;
}
.plan-edit-row input:focus { outline: none; border-color: var(--blue-500); background: #fff; }
.note-preview-content { font-size: 13px; color: var(--muted); max-width: 320px; white-space: pre-wrap; word-break: break-word; }
.note-preview-items { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.note-preview-items li { display: inline; }
.note-preview-items li:not(:last-child)::after { content: ' \00b7 '; }
.note-preview-items li.item-checked { text-decoration: line-through; color: var(--muted-soft); }
.search-form { display: flex; gap: 8px; margin-bottom: 16px; max-width: 360px; }
.search-form input { flex: 1; font: inherit; font-size: 14px; padding: 9px 14px; border-radius: 999px; border: 1.5px solid var(--border); background: #fff; }
.search-form input:focus { outline: none; border-color: var(--blue-500); }

/* ----------------------------------------------------------
   Halaman Pengaturan (account.php): tab Kapasitas / Langganan /
   Ubah Password, dan kartu instruksi pembayaran kode unik.
   ---------------------------------------------------------- */
.settings-main { max-width: 720px; margin: 0 auto; padding: 22px var(--gutter) 60px; }
.settings-tabs { margin-bottom: 20px; }
.settings-panel-title { font-size: 15px; font-weight: 800; margin: 0 0 6px; }
.settings-panel-sub { color: var(--muted); font-size: 13.5px; margin: 0 0 16px; }

.alert-info { background: var(--blue-50); color: var(--blue-700); }
.alert-info .alert-icon { color: var(--blue-500); }

.payment-instructions { flex-direction: column; align-items: stretch; gap: 14px; }
.payment-instructions-head { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 14.5px; }
.payment-amount-box {
    background: #fff;
    border: 1.5px dashed var(--blue-400);
    border-radius: var(--radius-md);
    padding: 16px;
    text-align: center;
}
.payment-amount-total { display: block; font-size: 28px; font-weight: 800; color: var(--blue-700); letter-spacing: -0.02em; }
.payment-amount-breakdown { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; }
.payment-code { display: inline-block; background: var(--blue-100); color: var(--blue-700); font-weight: 800; padding: 1px 7px; border-radius: 6px; }
.payment-bank-details { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.payment-bank-details li { display: flex; justify-content: space-between; gap: 12px; background: #fff; border-radius: var(--radius-sm); padding: 8px 12px; border: 1px solid var(--border); }
.payment-bank-details li span { color: var(--muted); }
.payment-note { font-size: 12.5px; color: var(--muted); margin: 0; }

/* Pembatas "atau" antara opsi transfer bank dan QRIS di kotak instruksi
   pembayaran -- garis tipis kiri-kanan dengan teks di tengah. */
.payment-divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.payment-divider::before, .payment-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.payment-qris-box { display: flex; flex-direction: column; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; text-align: center; }
.payment-qris-box img { width: 190px; height: 190px; max-width: 100%; object-fit: contain; border-radius: var(--radius-sm); }
.payment-qris-box p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }

@media (max-width: 640px) {
    .admin-main { padding-left: 16px; padding-right: 16px; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .settings-main { padding-left: 16px; padding-right: 16px; }
}

/* Hormati preferensi user yang mematikan animasi */
@media (prefers-reduced-motion: reduce) {
    .note-card, .modal { animation: none; }
    * { transition-duration: 0.01ms !important; }
}