/* ============================================================
   UndanganKu by Bacaunduh — Global Design System CSS
   Primary: Red | Font: Playfair Display + DM Sans
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── 1. CSS VARIABLES ──────────────────────────────────────── */
:root {
  --red-50:#fff1f1;--red-100:#ffd9d9;--red-200:#ffb0b0;--red-300:#ff7878;
  --red-400:#f94646;--red-500:#e81c1c;--red-600:#c70f0f;--red-700:#a10c0c;
  --red-800:#851010;--red-900:#6e1313;--red-950:#3e0606;
  --gray-0:#fff;--gray-50:#fafaf9;--gray-100:#f5f4f2;--gray-200:#e8e6e3;
  --gray-300:#d2cfc9;--gray-400:#a8a49d;--gray-500:#787470;--gray-600:#5a5652;
  --gray-700:#3f3c39;--gray-800:#282623;--gray-900:#141311;
  --color-success:#1a8a4a;--color-success-bg:#e8f8ee;
  --color-warning:#b07c10;--color-warning-bg:#fef7e6;
  --color-info:#1758a6;--color-info-bg:#eff5ff;
  --primary:var(--red-500);--primary-dark:var(--red-700);
  --primary-light:var(--red-100);--primary-ultra:var(--red-50);
  --surface-1:var(--gray-0);--surface-2:var(--gray-50);--surface-3:var(--gray-100);
  --border:var(--gray-200);--border-md:var(--gray-300);
  --text-primary:var(--gray-900);--text-secondary:var(--gray-600);--text-muted:var(--gray-400);
  --font-display:'Playfair Display',Georgia,serif;
  --font-body:'DM Sans',system-ui,sans-serif;
  --shadow-xs:0 1px 2px rgba(0,0,0,.06);
  --shadow-sm:0 1px 4px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 12px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:0 8px 24px rgba(0,0,0,.10),0 4px 8px rgba(0,0,0,.06);
  --shadow-xl:0 16px 48px rgba(0,0,0,.12),0 6px 16px rgba(0,0,0,.08);
  --shadow-red:0 4px 20px rgba(232,28,28,.25);
  --r-sm:4px;--r-md:8px;--r-lg:12px;--r-xl:16px;--r-2xl:24px;--r-full:9999px;
  --t-fast:150ms ease;--t-base:200ms ease;--t-slow:300ms ease;
  --t-spring:350ms cubic-bezier(.34,1.56,.64,1);
  --sidebar-w:256px;--navbar-h:64px;
}

/* ── 2. RESET ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-body);font-size:1rem;color:var(--text-primary);background:var(--surface-2);line-height:1.65}
img{display:block;max-width:100%}
a{color:var(--primary);text-decoration:none;transition:color var(--t-fast)}
a:hover{color:var(--primary-dark)}
ul,ol{list-style:none}
input,button,select,textarea{font-family:inherit}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:var(--r-full)}

/* ── 3. TYPOGRAPHY ─────────────────────────────────────────── */
.font-display{font-family:var(--font-display)}
h1,.h1{font-family:var(--font-display);font-size:clamp(2rem,5vw,3.5rem);font-weight:700;line-height:1.15;letter-spacing:-.02em}
h2,.h2{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.25rem);font-weight:600;line-height:1.2}
h3,.h3{font-family:var(--font-display);font-size:1.5rem;font-weight:600;line-height:1.3}
h4,.h4{font-size:1.125rem;font-weight:600;line-height:1.4}
h5,.h5{font-size:1rem;font-weight:500}
.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}.text-md{font-size:1.125rem}
.text-lg{font-size:1.25rem}.text-xl{font-size:1.5rem}.text-2xl{font-size:1.875rem}
.fw-300{font-weight:300}.fw-400{font-weight:400}.fw-500{font-weight:500}.fw-600{font-weight:600}.fw-700{font-weight:700}
.italic{font-style:italic}
.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}
.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}
.text-muted{color:var(--text-muted)}.text-red{color:var(--primary)}.text-white{color:#fff}
.text-success{color:var(--color-success)}.text-warning{color:var(--color-warning)}
.truncate{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* ── 4. LAYOUT ─────────────────────────────────────────────── */
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 1.5rem}
.container-sm{max-width:720px;margin:0 auto;padding:0 1.5rem}
.container-md{max-width:960px;margin:0 auto;padding:0 1.5rem}
.flex{display:flex}.flex-col{flex-direction:column}
.items-center{align-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}
.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}
.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}
.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}
.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-10{gap:2.5rem}
.grid{display:grid}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-auto{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.w-full{width:100%}.h-full{height:100%}.min-h-screen{min-height:100vh}
.hidden{display:none!important}.relative{position:relative}.absolute{position:absolute}
.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}
.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}
.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}
.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}
.ml-auto{margin-left:auto}.mx-auto{margin-left:auto;margin-right:auto}
.section{padding:5rem 0}
.divider{height:1px;background:var(--border);margin:1.5rem 0}

/* ── 5. BUTTONS ────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.625rem 1.25rem;font-size:.875rem;font-weight:500;line-height:1;border-radius:var(--r-md);border:1.5px solid transparent;cursor:pointer;transition:all var(--t-base);white-space:nowrap;text-decoration:none;outline:none;user-select:none}
.btn:focus-visible{box-shadow:0 0 0 3px rgba(232,28,28,.3)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.btn svg,.btn .icon{width:16px;height:16px;flex-shrink:0}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:var(--shadow-red)}
.btn-primary:hover{background:var(--red-600);border-color:var(--red-600);color:#fff;box-shadow:0 6px 24px rgba(232,28,28,.35)}
.btn-secondary{background:var(--surface-1);color:var(--text-primary);border-color:var(--border);box-shadow:var(--shadow-xs)}
.btn-secondary:hover{border-color:var(--border-md);background:var(--surface-2);color:var(--text-primary)}
.btn-ghost{background:transparent;color:var(--text-secondary);border-color:transparent}
.btn-ghost:hover{background:var(--surface-3);color:var(--text-primary)}
.btn-outline{background:transparent;color:var(--primary);border-color:var(--primary)}
.btn-outline:hover{background:var(--primary-ultra)}
.btn-danger{background:var(--red-50);color:var(--red-700);border-color:var(--red-200)}
.btn-danger:hover{background:var(--red-100);border-color:var(--red-300)}
.btn-success{background:var(--color-success-bg);color:var(--color-success);border-color:#a7dbb9}
.btn-success:hover{background:#d5f0e2}
.btn-xs{padding:.3rem .75rem;font-size:.75rem;border-radius:var(--r-sm)}
.btn-sm{padding:.5rem 1rem;font-size:.8125rem}
.btn-lg{padding:.875rem 1.5rem;font-size:1.125rem;border-radius:var(--r-lg)}
.btn-xl{padding:1rem 2rem;font-size:1.125rem;border-radius:var(--r-lg)}
.btn-full{width:100%;justify-content:center}
.btn-icon{padding:.625rem;aspect-ratio:1}
.btn-icon-sm{padding:.4rem;aspect-ratio:1;font-size:14px;border-radius:var(--r-md)}
.btn.loading::after{content:'';width:14px;height:14px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite;margin-left:.5rem}

/* ── 6. FORMS ──────────────────────────────────────────────── */
.form-group{display:flex;flex-direction:column;gap:.5rem}
.form-label{font-size:.875rem;font-weight:500;color:var(--text-secondary);letter-spacing:.01em}
.form-label .required{color:var(--primary);margin-left:2px}
.form-input,.form-select,.form-textarea{width:100%;padding:.625rem 1rem;font-size:.875rem;color:var(--text-primary);background:var(--surface-1);border:1.5px solid var(--border);border-radius:var(--r-md);outline:none;transition:border-color var(--t-fast),box-shadow var(--t-fast);-webkit-appearance:none}
.form-input:hover,.form-select:hover,.form-textarea:hover{border-color:var(--border-md)}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(232,28,28,.12)}
.form-input::placeholder,.form-textarea::placeholder{color:var(--text-muted)}
.form-textarea{resize:vertical;min-height:100px;line-height:1.6}
.form-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23787470' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:2.5rem;cursor:pointer}
.form-input.is-error{border-color:var(--primary);box-shadow:0 0 0 3px rgba(232,28,28,.12)}
.form-input.is-success{border-color:var(--color-success);box-shadow:0 0 0 3px rgba(26,138,74,.12)}
.form-hint{font-size:.75rem;color:var(--text-muted)}
.form-error{font-size:.75rem;color:var(--primary)}
.form-check{display:flex;align-items:center;gap:.75rem;cursor:pointer}
.form-check input[type="checkbox"],.form-check input[type="radio"]{width:18px;height:18px;accent-color:var(--primary);cursor:pointer;flex-shrink:0}
.form-check-label{font-size:.875rem;color:var(--text-primary)}
.toggle{position:relative;display:inline-flex;align-items:center;gap:.75rem;cursor:pointer}
.toggle input{display:none}
.toggle-track{width:44px;height:24px;background:var(--gray-300);border-radius:var(--r-full);transition:background var(--t-base);position:relative}
.toggle-track::after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:3px;left:3px;transition:transform var(--t-spring);box-shadow:var(--shadow-sm)}
.toggle input:checked~.toggle-track{background:var(--primary)}
.toggle input:checked~.toggle-track::after{transform:translateX(20px)}
.toggle-label{font-size:.875rem;color:var(--text-secondary)}
.input-group{display:flex;align-items:stretch}
.input-group .form-input{border-radius:var(--r-md) 0 0 var(--r-md);flex:1}
.input-group .btn{border-radius:0 var(--r-md) var(--r-md) 0;border-left:none}
.input-addon{display:flex;align-items:center;padding:0 .75rem;background:var(--surface-2);border:1.5px solid var(--border);border-right:none;border-radius:var(--r-md) 0 0 var(--r-md);color:var(--text-muted);font-size:.875rem}
.form-row{display:grid;gap:1rem}
.form-row-2{grid-template-columns:1fr 1fr}
.form-row-3{grid-template-columns:1fr 1fr 1fr}

/* ── 7. CARDS ──────────────────────────────────────────────── */
.card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-sm);overflow:hidden}
.card-body{padding:1.5rem}
.card-header{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.card-footer{padding:1rem 1.5rem;border-top:1px solid var(--border);background:var(--surface-2)}
.card-title{font-size:1rem;font-weight:600;color:var(--text-primary)}
.card-subtitle{font-size:.875rem;color:var(--text-muted);margin-top:.25rem}
.card-hover{transition:box-shadow var(--t-base),transform var(--t-base);cursor:pointer}
.card-hover:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.card-red{border-color:var(--red-200);background:linear-gradient(135deg,var(--red-50) 0%,var(--surface-1) 100%)}
.stat-card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-xl);padding:1.25rem;display:flex;align-items:flex-start;gap:1rem;box-shadow:var(--shadow-sm)}
.stat-icon{width:48px;height:48px;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.stat-icon-red{background:var(--red-50);color:var(--primary)}
.stat-icon-green{background:var(--color-success-bg);color:var(--color-success)}
.stat-icon-blue{background:var(--color-info-bg);color:var(--color-info)}
.stat-icon-amber{background:var(--color-warning-bg);color:var(--color-warning)}
.stat-value{font-size:1.75rem;font-weight:700;color:var(--text-primary);line-height:1}
.stat-label{font-size:.75rem;color:var(--text-muted);margin-top:.25rem;text-transform:uppercase;letter-spacing:.06em;font-weight:500}
.stat-change{font-size:.75rem;font-weight:500;margin-top:.5rem}
.stat-change.up{color:var(--color-success)}.stat-change.down{color:var(--primary)}

/* ── 8. BADGES ─────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:.25rem;padding:.2rem .5rem;font-size:.75rem;font-weight:500;border-radius:var(--r-full);white-space:nowrap;border:1px solid transparent}
.badge-red{background:var(--red-100);color:var(--red-700);border-color:var(--red-200)}
.badge-green{background:var(--color-success-bg);color:var(--color-success)}
.badge-amber{background:var(--color-warning-bg);color:var(--color-warning)}
.badge-blue{background:var(--color-info-bg);color:var(--color-info)}
.badge-gray{background:var(--gray-100);color:var(--gray-600);border-color:var(--gray-200)}
.badge-dot::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}

/* ── 9. TABLE ──────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;border-radius:var(--r-xl);border:1px solid var(--border)}
.table{width:100%;border-collapse:collapse}
.table th{padding:.75rem 1rem;text-align:left;font-size:.75rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;background:var(--surface-2);border-bottom:1px solid var(--border);white-space:nowrap}
.table td{padding:1rem;font-size:.875rem;color:var(--text-primary);border-bottom:1px solid var(--border);vertical-align:middle}
.table tr:last-child td{border-bottom:none}
.table tbody tr:hover td{background:var(--surface-2)}
.table-actions{display:flex;gap:.5rem;align-items:center}

/* ── 10. ALERT ─────────────────────────────────────────────── */
.alert{display:flex;align-items:flex-start;gap:.75rem;padding:1rem 1.25rem;border-radius:var(--r-lg);border:1px solid;font-size:.875rem;line-height:1.6}
.alert-icon{font-size:18px;flex-shrink:0;margin-top:1px}
.alert-success{background:var(--color-success-bg);border-color:#a7dbb9;color:#0f5c30}
.alert-error{background:var(--red-50);border-color:var(--red-200);color:var(--red-800)}
.alert-warning{background:var(--color-warning-bg);border-color:#f0d799;color:#785a0b}
.alert-info{background:var(--color-info-bg);border-color:#b3cfee;color:#10407c}
.alert-dismissible{position:relative}
.alert-close{position:absolute;top:.75rem;right:.75rem;background:none;border:none;cursor:pointer;color:inherit;opacity:.6;font-size:18px;line-height:1;padding:0}
.alert-close:hover{opacity:1}

/* ── 11. AVATAR ────────────────────────────────────────────── */
.avatar{width:40px;height:40px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.875rem;font-weight:600;overflow:hidden;flex-shrink:0}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar-sm{width:32px;height:32px;font-size:.75rem}
.avatar-lg{width:56px;height:56px;font-size:1.25rem}
.avatar-xl{width:80px;height:80px;font-size:1.75rem}
.avatar-group{display:flex}
.avatar-group .avatar{border:2px solid var(--surface-1);margin-left:-10px}
.avatar-group .avatar:first-child{margin-left:0}

/* ── 12. PROGRESS ──────────────────────────────────────────── */
.progress{height:8px;background:var(--gray-100);border-radius:var(--r-full);overflow:hidden}
.progress-bar{height:100%;background:linear-gradient(90deg,var(--red-400),var(--red-600));border-radius:var(--r-full);transition:width var(--t-slow)}
.progress-sm{height:4px}.progress-lg{height:12px}
.progress-green .progress-bar{background:linear-gradient(90deg,#34d399,#059669)}
.progress-blue .progress-bar{background:linear-gradient(90deg,#60a5fa,#2563eb)}

/* ── 13. DROPDOWN ──────────────────────────────────────────── */
.dropdown{position:relative;display:inline-flex}
.dropdown-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:180px;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);z-index:100;padding:.5rem;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity var(--t-fast),transform var(--t-fast)}
.dropdown-menu.open{opacity:1;transform:none;pointer-events:auto}
.dropdown-item{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;font-size:.875rem;color:var(--text-primary);border-radius:var(--r-md);cursor:pointer;transition:background var(--t-fast);border:none;background:none;width:100%;text-align:left;text-decoration:none}
.dropdown-item:hover{background:var(--surface-2)}
.dropdown-item.danger{color:var(--primary)}
.dropdown-item.danger:hover{background:var(--red-50)}
.dropdown-divider{height:1px;background:var(--border);margin:.5rem 0}

/* ── 14. TOAST ─────────────────────────────────────────────── */
.toast-container{position:fixed;top:1.25rem;right:1.25rem;z-index:400;display:flex;flex-direction:column;gap:.75rem;pointer-events:none;max-width:360px;width:100%}
.toast{display:flex;align-items:flex-start;gap:.75rem;padding:1rem 1.25rem;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);pointer-events:auto;animation:toastIn .35s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}
.toast::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:var(--r-sm) 0 0 var(--r-sm)}
.toast-success::before{background:var(--color-success)}
.toast-error::before{background:var(--primary)}
.toast-warning::before{background:var(--color-warning)}
.toast-info::before{background:var(--color-info)}
.toast-icon{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;margin-top:1px;font-weight:700}
.toast-success .toast-icon{background:var(--color-success-bg);color:var(--color-success)}
.toast-error .toast-icon{background:var(--red-100);color:var(--primary)}
.toast-warning .toast-icon{background:var(--color-warning-bg);color:var(--color-warning)}
.toast-info .toast-icon{background:var(--color-info-bg);color:var(--color-info)}
.toast-content{flex:1;min-width:0}
.toast-title{font-size:.875rem;font-weight:600;color:var(--text-primary)}
.toast-msg{font-size:.75rem;color:var(--text-muted);margin-top:.25rem;line-height:1.5}
.toast-close{width:24px;height:24px;border-radius:var(--r-full);border:none;background:none;cursor:pointer;color:var(--text-muted);font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background var(--t-fast);flex-shrink:0}
.toast-close:hover{background:var(--surface-3);color:var(--text-primary)}
.toast.removing{animation:toastOut .3s ease forwards}

/* ── 15. MODAL ─────────────────────────────────────────────── */
.modal-backdrop{position:fixed;inset:0;background:rgba(20,13,11,.55);z-index:300;display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;animation:fadeIn .2s ease forwards}
.modal{background:var(--surface-1);border-radius:var(--r-2xl);box-shadow:var(--shadow-xl);width:100%;max-width:520px;max-height:90vh;overflow-y:auto;animation:slideUp .3s cubic-bezier(.16,1,.3,1)}
.modal-sm{max-width:380px}.modal-lg{max-width:720px}.modal-xl{max-width:960px}
.modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.5rem;border-bottom:1px solid var(--border)}
.modal-title{font-family:var(--font-display);font-size:1.25rem;font-weight:600}
.modal-subtitle{font-size:.875rem;color:var(--text-muted);margin-top:.25rem}
.modal-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:var(--r-md);background:none;cursor:pointer;color:var(--text-muted);font-size:18px;transition:all var(--t-fast);flex-shrink:0}
.modal-close:hover{background:var(--surface-3);color:var(--text-primary)}
.modal-body{padding:1.5rem}
.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:.75rem;padding:1.25rem 1.5rem;border-top:1px solid var(--border);background:var(--surface-2);border-radius:0 0 var(--r-2xl) var(--r-2xl)}

/* ── 16. TABS ──────────────────────────────────────────────── */
.tabs{display:flex;gap:.25rem;border-bottom:1px solid var(--border);overflow-x:auto}
.tab{padding:.75rem 1rem;font-size:.875rem;font-weight:500;color:var(--text-muted);cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--t-fast),border-color var(--t-fast);white-space:nowrap;text-decoration:none}
.tab:hover{color:var(--text-primary)}
.tab.active{color:var(--primary);border-bottom-color:var(--primary)}
.tab-content{display:none}.tab-content.active{display:block}

/* ── 17. NAVBAR ────────────────────────────────────────────── */
.navbar{height:var(--navbar-h);background:rgba(255,255,255,.92);border-bottom:1px solid var(--border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);position:sticky;top:0;z-index:200;display:flex;align-items:center}
.navbar-inner{display:flex;align-items:center;justify-content:space-between;width:100%}
.navbar-brand{display:flex;align-items:center;gap:.75rem;font-family:var(--font-display);font-size:1.125rem;font-weight:700;color:var(--text-primary);text-decoration:none}
.navbar-logo{width:36px;height:36px;background:linear-gradient(135deg,var(--red-500),var(--red-700));border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;font-weight:700;box-shadow:var(--shadow-red)}
.navbar-nav{display:flex;align-items:center;gap:.25rem}
.nav-link{padding:.5rem .75rem;font-size:.875rem;font-weight:500;color:var(--text-secondary);border-radius:var(--r-md);text-decoration:none;transition:all var(--t-fast)}
.nav-link:hover{background:var(--surface-2);color:var(--text-primary)}
.nav-link.active{background:var(--red-50);color:var(--primary)}
.navbar-actions{display:flex;align-items:center;gap:.75rem}

/* ── 18. SIDEBAR ───────────────────────────────────────────── */
.admin-layout{display:flex;min-height:calc(100vh - var(--navbar-h))}
.sidebar{width:var(--sidebar-w);background:var(--surface-1);border-right:1px solid var(--border);padding:1.5rem 1rem;display:flex;flex-direction:column;gap:.25rem;position:sticky;top:var(--navbar-h);height:calc(100vh - var(--navbar-h));overflow-y:auto;flex-shrink:0}
.sidebar-section-label{font-size:.75rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;padding:.5rem .75rem;margin-top:1rem}
.sidebar-section-label:first-child{margin-top:0}
.sidebar-link{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;font-size:.875rem;font-weight:500;color:var(--text-secondary);border-radius:var(--r-lg);text-decoration:none;transition:all var(--t-fast);cursor:pointer;border:none;background:none;width:100%;text-align:left}
.sidebar-link:hover{background:var(--surface-2);color:var(--text-primary)}
.sidebar-link.active{background:var(--red-50);color:var(--primary);font-weight:600}
.sidebar-link .badge{margin-left:auto}
.sidebar-icon{width:18px;height:18px;flex-shrink:0;opacity:.7}
.sidebar-link.active .sidebar-icon,.sidebar-link:hover .sidebar-icon{opacity:1}
.main-content{flex:1;padding:2rem;min-width:0;overflow:hidden}
.page-header{margin-bottom:2rem;display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.page-title{font-family:var(--font-display);font-size:1.625rem;font-weight:700;color:var(--text-primary)}
.page-subtitle{font-size:.875rem;color:var(--text-muted);margin-top:.375rem}

/* ── 19. HERO ──────────────────────────────────────────────── */
.hero{min-height:90vh;display:flex;align-items:center;background:var(--gray-0);position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-200px;right:-200px;width:700px;height:700px;background:radial-gradient(circle,var(--red-50) 0%,transparent 65%);pointer-events:none}
.hero::after{content:'';position:absolute;bottom:-100px;left:-100px;width:500px;height:500px;background:radial-gradient(circle,var(--red-50) 0%,transparent 65%);pointer-events:none}
.hero-content{position:relative;z-index:1}
.hero-eyebrow{display:inline-flex;align-items:center;gap:.5rem;padding:.25rem 1rem .25rem .5rem;background:var(--red-50);border:1px solid var(--red-200);border-radius:var(--r-full);font-size:.75rem;font-weight:600;color:var(--primary);margin-bottom:1.25rem;letter-spacing:.04em}
.hero-eyebrow-dot{width:8px;height:8px;border-radius:50%;background:var(--primary);animation:pulse 2s infinite}
.hero-sub{font-size:1.125rem;color:var(--text-secondary);max-width:520px;line-height:1.7}
.hero-stats{display:flex;gap:2rem}
.hero-stat-num{font-family:var(--font-display);font-size:1.875rem;font-weight:700;color:var(--text-primary)}
.hero-stat-label{font-size:.75rem;color:var(--text-muted);font-weight:500}

/* ── 20. FEATURE & PRICING CARDS ───────────────────────────── */
.feature-card{padding:1.5rem;border-radius:var(--r-xl);border:1px solid var(--border);background:var(--surface-1);transition:all var(--t-base)}
.feature-card:hover{border-color:var(--red-200);box-shadow:var(--shadow-md)}
.feature-icon{width:48px;height:48px;border-radius:var(--r-lg);background:var(--red-50);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:1rem;border:1px solid var(--red-100)}
.pricing-card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-2xl);padding:2rem;transition:all var(--t-base)}
.pricing-card:hover{box-shadow:var(--shadow-lg)}
.pricing-card.popular{border-color:var(--primary);border-width:2px;box-shadow:var(--shadow-red);background:linear-gradient(160deg,var(--red-50) 0%,var(--surface-1) 40%)}
.pricing-popular-badge{background:var(--primary);color:#fff;font-size:.75rem;font-weight:700;padding:.25rem .75rem;border-radius:var(--r-full);display:inline-block;margin-bottom:1rem}
.pricing-price{font-family:var(--font-display);font-size:2.5rem;font-weight:700;color:var(--text-primary)}
.pricing-price span{font-size:1rem;color:var(--text-muted);font-weight:400;font-family:var(--font-body)}
.pricing-feature{display:flex;align-items:center;gap:.75rem;font-size:.875rem;color:var(--text-secondary)}
.pricing-check{width:18px;height:18px;border-radius:50%;background:var(--color-success-bg);color:var(--color-success);display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}

/* ── 21. CTA & FOOTER ──────────────────────────────────────── */
.cta-section{background:linear-gradient(135deg,var(--red-600) 0%,var(--red-900) 100%);border-radius:var(--r-2xl);padding:4rem 3rem;text-align:center;position:relative;overflow:hidden}
.cta-section::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23ffffff' fill-opacity='0.04'/%3E%3Ccircle cx='48' cy='48' r='8' fill='%23ffffff' fill-opacity='0.04'/%3E%3C/svg%3E")}
.footer{background:var(--gray-900);color:var(--gray-400);padding:4rem 0 2rem}
.footer-link{font-size:.875rem;color:var(--gray-400);text-decoration:none;transition:color var(--t-fast)}
.footer-link:hover{color:var(--gray-0)}
.footer-bottom{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--gray-700);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.75rem}

/* ── 22. PAGINATION ────────────────────────────────────────── */
.pagination-wrap{display:flex;flex-direction:column;align-items:center;gap:.75rem;margin-top:1.5rem}
.pagination{display:flex;gap:.25rem;flex-wrap:wrap;justify-content:center}
.pagination li a,.pagination li span{display:flex;align-items:center;justify-content:center;width:36px;height:36px;font-size:.875rem;font-weight:500;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface-1);color:var(--text-primary);text-decoration:none;transition:all var(--t-fast)}
.pagination li a:hover{border-color:var(--primary);color:var(--primary)}
.pagination li.active span{background:var(--primary);border-color:var(--primary);color:#fff}
.pagination li.disabled span{opacity:.4;cursor:not-allowed}
.pagination li.dots span{border:none;background:none}
.pagination-info{font-size:.75rem;color:var(--text-muted)}

/* ── 23. SKELETON ──────────────────────────────────────────── */
.skeleton{background:linear-gradient(90deg,var(--gray-100) 25%,var(--gray-200) 50%,var(--gray-100) 75%);background-size:400% 100%;animation:shimmer 1.5s infinite;border-radius:var(--r-md)}

/* ── 24. UTILITY ───────────────────────────────────────────── */
.rounded{border-radius:var(--r-md)}.rounded-lg{border-radius:var(--r-lg)}
.rounded-xl{border-radius:var(--r-xl)}.rounded-full{border-radius:var(--r-full)}
.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}
.border{border:1px solid var(--border)}.border-red{border-color:var(--red-200)}
.bg-white{background:var(--surface-1)}.bg-gray{background:var(--surface-2)}
.bg-red-50{background:var(--red-50)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.animate-fadeIn{animation:fadeIn .3s ease}
.animate-fadeInUp{animation:fadeInUp .5s ease both}
.delay-1{animation-delay:.1s}.delay-2{animation-delay:.2s}.delay-3{animation-delay:.3s}

/* ── 25. KEYFRAMES ─────────────────────────────────────────── */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@keyframes toastIn{from{opacity:0;transform:translateX(110%) scale(.9)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(110%) scale(.9)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes slideUp{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}

/* ── 26. RESPONSIVE ────────────────────────────────────────── */
@media(max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .sidebar{display:none}
  .main-content{padding:1.5rem}
}
@media(max-width:768px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr}
  .form-row-2,.form-row-3{grid-template-columns:1fr}
  .hero-stats{gap:1.5rem}
  .navbar-nav{display:none}
  .section{padding:3rem 0}
  .cta-section{padding:2.5rem 1.5rem}
  .page-header{flex-direction:column;gap:1rem}
}
@media(max-width:480px){
  .grid-3,.grid-4{grid-template-columns:1fr}
  .container{padding:0 1rem}
  .toast-container{left:1rem;right:1rem;max-width:none}
  .hero{min-height:auto;padding:4rem 0}
}