/* ================================================================
   المنصة الأكاديمية — نظام تصميم موحد
   Academic Platform — Unified Design System
   ================================================================ */

/* ---------- 1. المتغيرات اللونية (Design Tokens) ---------- */
:root {
    /* الألوان الأساسية */
    --c-primary:        #4f46e5;
    --c-primary-dark:   #4338ca;
    --c-primary-light:  #818cf8;
    --c-primary-soft:   #eef2ff;

    --c-accent:         #06b6d4;
    --c-success:        #10b981;
    --c-danger:         #ef4444;
    --c-warning:        #f59e0b;

    /* الألوان المحايدة */
    --c-dark:           #0f172a;
    --c-dark-2:         #1e293b;
    --c-slate:          #334155;
    --c-muted:          #64748b;
    --c-light:          #f8fafc;
    --c-bg:             #f1f5f9;
    --c-white:          #ffffff;

    /* الحدود والظلال */
    --border-color:     rgba(148, 163, 184, .2);
    --border-radius:    14px;
    --border-radius-sm: 10px;
    --border-radius-lg: 20px;

    --shadow-xs:  0 1px 2px rgba(15, 23, 42, .06);
    --shadow-sm:  0 2px 8px rgba(15, 23, 42, .06);
    --shadow-md:  0 8px 24px rgba(15, 23, 42, .08);
    --shadow-lg:  0 16px 48px rgba(15, 23, 42, .12);
    --shadow-primary: 0 8px 24px rgba(79, 70, 229, .25);

    /* الانتقالات */
    --transition:      .25s cubic-bezier(.4, 0, .2, 1);
    --transition-slow: .4s cubic-bezier(.4, 0, .2, 1);

    /* الخطوط */
    --font-base: 'Tajawal', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ---------- 2. إعادة الضيفة (Reset) ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-base);
    background-color: var(--c-bg);
    color: var(--c-dark-2);
    margin: 0;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}

/* خلفية منقّطة خفيفة */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
        radial-gradient(circle at 20% 10%, rgba(79, 70, 229, .04), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(6, 182, 212, .04), transparent 40%);
}

a { text-decoration: none; }

/* ---------- 3. شريط التنقّل (Navbar) ---------- */
.app-navbar {
    background: linear-gradient(135deg, var(--c-dark) 0%, var(--c-dark-2) 100%);
    border: none;
    box-shadow: var(--shadow-md);
    padding: .85rem 0;
    position: sticky;
    top: 0;
    z-index: 1030;
    backdrop-filter: blur(12px);
}

.app-navbar .navbar-brand {
    font-weight: 800;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    letter-spacing: -.02em;
}

.app-navbar .navbar-brand .brand-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    box-shadow: var(--shadow-primary);
    flex-shrink: 0;
}

.app-navbar .nav-badge {
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .7);
    border: 1px solid rgba(255, 255, 255, .12);
    padding: .2rem .7rem;
    border-radius: 50px;
    font-size: .8rem;
    font-weight: 500;
}

/* أزرار شريط التنقّل */
.btn-outline-danger,
.app-navbar .btn {
    border-radius: 50px;
    font-weight: 600;
    font-size: .9rem;
    padding: .45rem 1.1rem;
    transition: var(--transition);
}

.btn-outline-danger {
    background: rgba(239, 68, 68, .1);
    border-color: rgba(239, 68, 68, .3);
    color: #fca5a5;
}

.btn-outline-danger:hover {
    background: var(--c-danger);
    border-color: var(--c-danger);
    color: #fff;
    transform: translateY(-1px);
}

/* ---------- 4. البطاقات (Cards) ---------- */
.glass-card {
    background: var(--c-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    overflow: hidden;
}

.glass-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.card-header-modern {
    padding: 1rem 1.25rem;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    border-bottom: 1px solid var(--border-color);
}

.card-header-modern .header-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .95rem;
}

.card-header-modern.bg-primary-soft {
    background: var(--c-primary-soft);
    color: var(--c-primary-dark);
}

.card-header-modern.bg-primary-soft .header-icon {
    background: var(--c-primary);
    color: #fff;
}

.card-header-modern.bg-dark-soft {
    background: #f1f5f9;
    color: var(--c-dark);
}

.card-header-modern.bg-dark-soft .header-icon {
    background: var(--c-slate);
    color: #fff;
}

.card-header-modern.bg-info-soft {
    background: rgba(6, 182, 212, .12);
    color: #0f766e;
}

.card-header-modern.bg-info-soft .header-icon {
    background: var(--c-accent);
    color: #fff;
}

.card-header-modern.bg-success-soft {
    background: rgba(16, 185, 129, .12);
    color: #047857;
}

.card-header-modern.bg-success-soft .header-icon {
    background: var(--c-success);
    color: #fff;
}

.card-header-modern.bg-warning-soft,
.card-header-modern.bg-amber-soft {
    background: rgba(245, 158, 11, .14);
    color: #b45309;
}

.card-header-modern.bg-warning-soft .header-icon,
.card-header-modern.bg-amber-soft .header-icon {
    background: var(--c-warning);
    color: #fff;
}

/* ---------- 5. عناصر النماذج (Forms) ---------- */
.form-control,
.form-select {
    border-radius: var(--border-radius-sm);
    border: 1.5px solid #e2e8f0;
    padding: .6rem .9rem;
    font-size: .92rem;
    transition: var(--transition);
    background-color: var(--c-white);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--c-primary-light);
    box-shadow: 0 0 0 4px rgba(79, 70, 229, .1);
}

.form-label {
    font-weight: 600;
    font-size: .88rem;
    color: var(--c-slate);
    margin-bottom: .4rem;
}

.input-group-modern {
    position: relative;
}

.input-group-modern .input-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    inset-inline-start: .9rem;
    color: var(--c-muted);
    z-index: 4;
    font-size: 1rem;
    pointer-events: none;
}

.input-group-modern .form-control {
    padding-inline-start: 2.6rem;
}

/* رفع الملف */
.custom-file-upload {
    position: relative;
}

.custom-file-upload input[type="file"] {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    overflow: hidden;
}

.custom-file-upload .file-display {
    border: 2px dashed #cbd5e1;
    border-radius: var(--border-radius-sm);
    padding: 1.3rem;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    background: #f8fafc;
    color: var(--c-muted);
    font-size: .9rem;
}

.custom-file-upload .file-display i {
    font-size: 1.8rem;
    display: block;
    margin-bottom: .4rem;
    color: var(--c-primary);
}

.custom-file-upload .file-display:hover {
    border-color: var(--c-primary-light);
    background: var(--c-primary-soft);
    color: var(--c-primary-dark);
}

.custom-file-upload .file-display.has-file {
    border-color: var(--c-success);
    background: #ecfdf5;
    color: var(--c-success);
}

.custom-file-upload .file-display.has-file i { color: var(--c-success); }

/* ---------- 6. الأزرار (Buttons) ---------- */
.btn { transition: var(--transition); font-weight: 600; }

.btn-primary {
    background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark));
    border: none;
    box-shadow: 0 4px 12px rgba(79, 70, 229, .3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--c-primary-dark), var(--c-primary));
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

.btn-primary:active { transform: translateY(0); }

.btn-success {
    background: linear-gradient(135deg, var(--c-success), #059669);
    border: none;
    box-shadow: 0 4px 12px rgba(16, 185, 129, .3);
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 185, 129, .4);
}

.btn-outline-primary {
    border: 1.5px solid var(--c-primary);
    color: var(--c-primary);
    border-radius: var(--border-radius-sm);
}

.btn-outline-primary:hover {
    background: var(--c-primary);
    transform: translateY(-2px);
}

.btn-outline-success {
    border: 1.5px solid var(--c-success);
    color: var(--c-success);
    border-radius: var(--border-radius-sm);
}

.btn-outline-success:hover {
    background: var(--c-success);
    transform: translateY(-2px);
}

.btn-outline-danger {
    border-radius: var(--border-radius-sm);
}

.btn-outline-danger.btn-card {
    border: 1.5px solid var(--c-danger);
    color: var(--c-danger);
    background: transparent;
}

.btn-outline-danger.btn-card:hover {
    background: var(--c-danger);
    color: #fff;
    transform: translateY(-2px);
}

/* ---------- 7. صفحة تسجيل الدخول (Auth) ---------- */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--c-dark) 0%, #1e1b4b 50%, #1e3a8a 100%);
}

/* أشكال زخرفية متحركة */
.auth-page .auth-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .35;
    animation: float 12s ease-in-out infinite;
}

.auth-page .blob-1 {
    width: 400px; height: 400px;
    background: var(--c-primary);
    top: -100px; inset-inline-start: -100px;
}

.auth-page .blob-2 {
    width: 350px; height: 350px;
    background: var(--c-accent);
    bottom: -80px; inset-inline-end: -80px;
    animation-delay: -4s;
}

.auth-page .blob-3 {
    width: 250px; height: 250px;
    background: var(--c-primary-light);
    top: 50%; inset-inline-end: 20%;
    animation-delay: -8s;
    opacity: .2;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(30px, -40px) scale(1.05); }
    66%      { transform: translate(-20px, 30px) scale(.97); }
}

.auth-card {
    background: rgba(255, 255, 255, .07);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--border-radius-lg);
    padding: 2.5rem;
    width: 100%;
    max-width: 420px;
    box-shadow: var(--shadow-lg);
    position: relative;
    z-index: 2;
}

/* تعديل حاوية الشعار الجديد ليتناسب مع الصور الحقيقية الشفافة */
.auth-card .auth-logo {
    width: auto;                  
    height: 75px;                 
    background: none;             
    box-shadow: none;             
    margin: 0 auto 0.2rem;        /* تم تقليل الهامش السفلي هنا لتقليص الفجوة */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ضبط تنسيق وحجم الصورة الشفافة داخل حاوية الشعار */
.auth-card .auth-logo .auth-custom-img {
    height: 100%;                 
    width: auto;                  
    object-fit: contain;          
}

.auth-card h3 {
    text-align: center;
    color: #fff;
    font-weight: 800;
    margin-top: 0;                /* تم تصفير الهامش العلوي لتقريب المسافة أكثر للشعار */
    margin-bottom: .3rem;
    letter-spacing: -.02em;
}

.auth-card .auth-subtitle {
    text-align: center;
    color: rgba(255, 255, 255, .5);
    font-size: .9rem;
    margin-bottom: 1.8rem;
}

/* تنسيق حقول صفحة الدخول */
.auth-card .form-label { color: rgba(255, 255, 255, .7); }

.auth-card .form-control {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
}

.auth-card .form-control::placeholder { color: rgba(255, 255, 255, .35); }

.auth-card .form-control:focus {
    background: rgba(255, 255, 255, .1);
    border-color: var(--c-primary-light);
    box-shadow: 0 0 0 4px rgba(79, 70, 229, .2);
    color: #fff;
}

.auth-card .input-group-modern .input-icon { color: rgba(255, 255, 255, .4); }

.auth-card .btn-primary { width: 100%; padding: .8rem; font-size: 1rem; }

.auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    color: rgba(255, 255, 255, .35);
    font-size: .8rem;
}

/* ---------- 8. البطاقات الفردية (Duty Cards) ---------- */
.duty-card {
    background: var(--c-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: var(--transition);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.duty-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.duty-card .duty-top-accent {
    height: 4px;
    width: 100%;
}

.duty-card .accent-primary  { background: linear-gradient(90deg, var(--c-primary), var(--c-primary-light)); }
.duty-card .accent-success  { background: linear-gradient(90deg, var(--c-success), #34d399); }
.duty-card .accent-danger   { background: linear-gradient(90deg, var(--c-danger), #fb7185); }

.duty-card .duty-body {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.duty-card .duty-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.duty-card .duty-icon.icon-primary {
    background: var(--c-primary-soft);
    color: var(--c-primary);
}

.duty-card .duty-icon.icon-success {
    background: #ecfdf5;
    color: var(--c-success);
}

.duty-card .duty-icon.icon-danger {
    background: #fef2f2;
    color: var(--c-danger);
}

.duty-card .duty-title {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--c-dark);
    margin-bottom: .4rem;
}

.duty-card .duty-desc {
    color: var(--c-muted);
    font-size: .88rem;
    margin-bottom: 0;
}

.duty-card .duty-status-available {
    background: #ecfdf5;
    border: 1px solid #d1fae5;
    color: #047857;
    border-radius: var(--border-radius-sm);
    padding: .6rem .8rem;
    font-size: .82rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .8rem;
}

.duty-card .duty-status-empty {
    background: #f8fafc;
    border: 1px dashed #e2e8f0;
    color: var(--c-muted);
    border-radius: var(--border-radius-sm);
    padding: .8rem;
    font-size: .82rem;
    text-align: center;
    margin-bottom: .8rem;
}

/* ---------- 9. الشارات (Badges) ---------- */
.badge-modern {
    padding: .35em .8em;
    border-radius: 50px;
    font-weight: 600;
    font-size: .75rem;
}

/* ---------- 10. رسائل التنبيه (Alerts) ---------- */
.alert {
    border-radius: var(--border-radius-sm);
    border: none;
    font-size: .9rem;
    box-shadow: var(--shadow-xs);
}

/* ---------- 11. عناوين الأقسام (Section Headers) ---------- */
.section-title {
    font-weight: 800;
    color: var(--c-dark);
    padding-bottom: .6rem;
    border-bottom: 2px solid var(--c-primary-soft);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.5rem;
}

/* ---------- 12. التذييل (Footer) ---------- */
.app-footer {
    text-align: center;
    padding: 1.5rem;
    color: var(--c-muted);
    font-size: .82rem;
    margin-top: 2rem;
}

.app-footer a { color: var(--c-primary); font-weight: 600; }

/* ---------- 13. مفاتيح التبديل (Switch) ---------- */
.form-switch .form-check-input {
    width: 2.5em;
    height: 1.4em;
    cursor: pointer;
}

.form-switch .form-check-input:checked {
    background-color: var(--c-success);
    border-color: var(--c-success);
}

/* ---------- 14. الرسوم المتحركة للظهور ---------- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.animate-in {
    animation: fadeInUp .5s cubic-bezier(.4, 0, .2, 1) both;
}

.animate-in-delay-1 { animation-delay: .08s; }
.animate-in-delay-2 { animation-delay: .16s; }
.animate-in-delay-3 { animation-delay: .24s; }
.animate-in-delay-4 { animation-delay: .32s; }

/* ---------- 15. الاستجابة للشاشات (Responsive) ---------- */
@media (max-width: 768px) {
    .auth-card { padding: 1.8rem 1.4rem; }
    .section-title { font-size: 1.1rem; }
    .app-navbar .navbar-brand { font-size: 1.05rem; }
}

@media (max-width: 576px) {
    .auth-card .auth-logo { height: 60px; } 
}

/* ---------- 16. تحسين الوصول (Accessibility) ---------- */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: 2px solid var(--c-primary-light);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ---------- 17. شريط التمرير (Scrollbar) ---------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 50px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-muted); }


/* ================================================================
   18. زر تبديل الوضع الليلي / النهاري (Theme Toggle)
   ================================================================ */
.theme-toggle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .15);
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, .15);
    color: #fff;
    transform: rotate(20deg) scale(1.1);
}

.theme-toggle .bi-sun { display: none; }
.theme-toggle .bi-moon-stars { display: inline; }

[data-theme="dark"] .theme-toggle .bi-sun { display: inline; }
[data-theme="dark"] .theme-toggle .bi-moon-stars { display: none; }


/* ================================================================
   19. الوضع الليلي (Dark Mode) — تجاوز المتغيّرات
   ================================================================ */
[data-theme="dark"] {
    --c-primary:        #818cf8;
    --c-primary-dark:   #6366f1;
    --c-primary-light:  #a5b4fc;
    --c-primary-soft:   rgba(99, 102, 241, .15);

    --c-accent:         #22d3ee;
    --c-success:        #34d399;
    --c-danger:         #fb7185;
    --c-warning:        #fbbf24;

    --c-dark:           #f1f5f9;
    --c-dark-2:         #e2e8f0;
    --c-slate:          #cbd5e1;
    --c-muted:          #94a3b8;
    --c-light:          #1e293b;
    --c-bg:             #0b1120;
    --c-white:          #1e293b;

    --border-color:     rgba(148, 163, 184, .15);
    --shadow-xs:  0 1px 2px rgba(0, 0, 0, .3);
    --shadow-sm:  0 2px 8px rgba(0, 0, 0, .3);
    --shadow-md:  0 8px 24px rgba(0, 0, 0, .4);
    --shadow-lg:  0 16px 48px rgba(0, 0, 0, .5);
}

[data-theme="dark"] body { background-color: var(--c-bg); color: var(--c-dark-2); }

[data-theme="dark"] body::before {
    background-image:
        radial-gradient(circle at 20% 10%, rgba(99, 102, 241, .08), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(6, 182, 212, .08), transparent 40%);
}

/* بطاقات في الوضع الليلي */
[data-theme="dark"] .glass-card,
[data-theme="dark"] .duty-card { background: rgba(30, 41, 59, .6); }

/* حقول الإدخال */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: rgba(15, 23, 42, .5);
    border-color: rgba(148, 163, 184, .2);
    color: var(--c-dark-2);
}

[data-theme="dark"] .form-control::placeholder { color: var(--c-muted); }

/* رفع الملف */
[data-theme="dark"] .custom-file-upload .file-display {
    background: rgba(15, 23, 42, .4);
    border-color: rgba(148, 163, 184, .25);
    color: var(--c-muted);
}

[data-theme="dark"] .custom-file-upload .file-display.has-file {
    background: rgba(16, 185, 129, .1);
    border-color: var(--c-success);
    color: var(--c-success);
}

/* ترويسات البطاقات */
[data-theme="dark"] .card-header-modern.bg-primary-soft {
    background: rgba(99, 102, 241, .12);
}
[data-theme="dark"] .card-header-modern.bg-dark-soft {
    background: rgba(51, 65, 85, .4);
}

/* حالات البطاقات */
[data-theme="dark"] .duty-status-available {
    background: rgba(16, 185, 129, .12);
    border-color: rgba(16, 185, 129, .3);
    color: var(--c-success);
}
[data-theme="dark"] .duty-status-empty {
    background: rgba(15, 23, 42, .4);
    border-color: rgba(148, 163, 184, .15);
}

/* أيقونات البطاقات */
[data-theme="dark"] .duty-icon.icon-primary { background: rgba(99, 102, 241, .15); }
[data-theme="dark"] .duty-icon.icon-success { background: rgba(16, 185, 129, .15); }
[data-theme="dark"] .duty-icon.icon-danger  { background: rgba(239, 68, 68, .15); }

/* العناوين والتنبيهات */
[data-theme="dark"] .section-title { color: var(--c-dark); }
[data-theme="dark"] .alert-secondary,
[data-theme="dark"] .alert-light { background: rgba(51, 65, 85, .4); color: var(--c-slate); }


/* ================================================================
   20. لوحة الأستاذ الفاخرة (Premium Glass Dashboard)
   ================================================================ */

/* متغيّرات الثيم الفاخر */
:root {
    --p-bg-1:        #faf6ee;
    --p-bg-2:        #f3ead8;
    --p-bg-3:        #ece0c8;
    --p-text:        #3d2b1f;
    --p-text-muted:  #7a6a52;
    --p-navbar-1:    rgba(61, 43, 31, .95);
    --p-navbar-2:    rgba(74, 52, 36, .95);
    --p-card-bg:     linear-gradient(135deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .6) 100%);
    --p-card-border: rgba(212, 175, 55, .3);
    --p-card-shadow: 0 8px 32px rgba(61, 43, 31, .1);
    --p-card-shadow-hover: 0 20px 60px rgba(61, 43, 31, .15), 0 0 40px rgba(212, 175, 55, .15);
    --p-status-empty-bg:   rgba(61, 43, 31, .04);
    --p-status-empty-bd:   rgba(61, 43, 31, .15);
    --p-status-empty-tx:   #9a8a72;
    --p-footer-text: rgba(61, 43, 31, .4);
    --p-footer-gold: rgba(180, 142, 50, .6);
    --p-halo-opacity: 1;
}

[data-theme="dark"] {
    --p-bg-1:        #0a0e27;
    --p-bg-2:        #150c2e;
    --p-bg-3:        #1a0f3d;
    --p-text:        #ffffff;
    --p-text-muted:  rgba(255, 255, 255, .5);
    --p-navbar-1:    rgba(10, 14, 39, .85);
    --p-navbar-2:    rgba(26, 15, 61, .85);
    --p-card-bg:     linear-gradient(135deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .03) 100%);
    --p-card-border: rgba(212, 175, 55, .18);
    --p-card-shadow: 0 8px 32px rgba(0, 0, 0, .3);
    --p-card-shadow-hover: 0 20px 60px rgba(0, 0, 0, .4), 0 0 40px rgba(212, 175, 55, .12);
    --p-status-empty-bg:   rgba(255, 255, 255, .04);
    --p-status-empty-bd:   rgba(255, 255, 255, .12);
    --p-status-empty-tx:   rgba(255, 255, 255, .35);
    --p-footer-text: rgba(255, 255, 255, .25);
    --p-footer-gold: rgba(212, 175, 55, .5);
    --p-halo-opacity: 1;
}

.premium-page {
    min-height: 100vh;
    background: linear-gradient(160deg, var(--p-bg-1) 0%, var(--p-bg-2) 45%, var(--p-bg-3) 100%);
    position: relative;
    overflow-x: hidden;
}

.premium-page::before {
    content: '';
    position: absolute;
    top: -180px;
    inset-inline-end: -120px;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(212, 175, 55, .18), transparent 70%);
    border-radius: 50%;
    filter: blur(40px);
    z-index: 0;
    pointer-events: none;
    opacity: var(--p-halo-opacity);
}

.premium-page::after {
    content: '';
    position: absolute;
    bottom: -200px;
    inset-inline-start: -150px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(180, 142, 50, .14), transparent 70%);
    border-radius: 50%;
    filter: blur(60px);
    z-index: 0;
    pointer-events: none;
    opacity: var(--p-halo-opacity);
}

.premium-page > * { position: relative; z-index: 1; }

.premium-navbar {
    background: linear-gradient(135deg, var(--p-navbar-1), var(--p-navbar-2));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(212, 175, 55, .2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
}

.premium-navbar .navbar-brand {
    color: #fff;
    font-weight: 800;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: .65rem;
}

.premium-navbar .brand-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: linear-gradient(135deg, #d4af37, #f0c75e);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #3d2b1f;
    font-size: 1.2rem;
    box-shadow: 0 4px 16px rgba(212, 175, 55, .4);
}

.premium-title {
    color: var(--p-text);
    font-weight: 800;
    padding-bottom: .7rem;
    border-image: linear-gradient(90deg, #d4af37, transparent) 1;
    border-bottom: 2px solid;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.8rem;
}

.premium-title .title-icon { color: #c9a227; }

.premium-title .title-sub {
    display: block;
    font-size: .85rem;
    font-weight: 400;
    color: var(--p-text-muted);
    margin-top: .2rem;
}

.premium-card {
    background: var(--p-card-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--p-card-border);
    border-radius: 20px;
    overflow: hidden;
    transition: var(--transition-slow);
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--p-card-shadow);
}

.premium-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(212, 175, 55, .6), transparent 40%, transparent 60%, rgba(212, 175, 55, .4));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--transition-slow);
    pointer-events: none;
}

.premium-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--p-card-shadow-hover);
    border-color: rgba(212, 175, 55, .5);
}

.premium-card:hover::before { opacity: 1; }

.premium-card .premium-top {
    height: 4px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.premium-top.gold { background: linear-gradient(90deg, #d4af37, #f0c75e, #d4af37); }
.premium-top.amethyst { background: linear-gradient(90deg, #9333ea, #c084fc, #9333ea); }
.premium-top.ruby { background: linear-gradient(90deg, #dc2626, #fb7185, #dc2626); }
.premium-top.sapphire { background: linear-gradient(90deg, #2563eb, #60a5fa, #2563eb); }

.premium-card .premium-top::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
    transform: translateX(-100%);
    animation: shimmer 3s infinite;
}

@keyframes shimmer { 100% { transform: translateX(100%); } }

.premium-body {
    padding: 1.75rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.premium-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.1rem;
    position: relative;
}

.premium-icon.icon-gold {
    background: linear-gradient(135deg, rgba(212, 175, 55, .3), rgba(212, 175, 55, .12));
    border: 1px solid rgba(212, 175, 55, .4);
    color: #b48e32;
    box-shadow: 0 4px 16px rgba(212, 175, 55, .18);
}

.premium-icon.icon-amethyst {
    background: linear-gradient(135deg, rgba(147, 51, 234, .25), rgba(147, 51, 234, .1));
    border: 1px solid rgba(147, 51, 234, .35);
    color: #7e22ce;
    box-shadow: 0 4px 16px rgba(147, 51, 234, .15);
}

.premium-icon.icon-ruby {
    background: linear-gradient(135deg, rgba(220, 38, 38, .22), rgba(220, 38, 38, .1));
    border: 1px solid rgba(220, 38, 38, .35);
    color: #b91c1c;
    box-shadow: 0 4px 16px rgba(220, 38, 38, .15);
}

.premium-card-title {
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--p-text);
    margin-bottom: .45rem;
    letter-spacing: -.01em;
}

.premium-card-desc {
    color: var(--p-text-muted);
    font-size: .88rem;
    margin-bottom: 0;
    line-height: 1.7;
}

.premium-status-available {
    background: rgba(16, 185, 129, .12);
    border: 1px solid rgba(16, 185, 129, .3);
    color: #047857;
    border-radius: 12px;
    padding: .65rem .9rem;
    font-size: .82rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .9rem;
}

.premium-status-empty {
    background: var(--p-status-empty-bg);
    border: 1px dashed var(--p-status-empty-bd);
    color: var(--p-status-empty-tx);
    border-radius: 12px;
    padding: .9rem;
    font-size: .82rem;
    text-align: center;
    margin-bottom: .9rem;
}

.btn-premium {
    border: 1px solid rgba(212, 175, 55, .5);
    background: linear-gradient(135deg, rgba(212, 175, 55, .2), rgba(212, 175, 55, .08));
    color: #a17a1f;
    border-radius: 12px;
    font-weight: 600;
    transition: var(--transition);
}

.btn-premium:hover {
    background: linear-gradient(135deg, #d4af37, #f0c75e);
    color: #3d2b1f;
    border-color: #f0c75e;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(212, 175, 55, .35);
}

.btn-premium-amethyst {
    border: 1px solid rgba(147, 51, 234, .5);
    background: linear-gradient(135deg, rgba(147, 51, 234, .2), rgba(147, 51, 234, .08));
    color: #7e22ce;
    border-radius: 12px;
    font-weight: 600;
    transition: var(--transition);
}

.btn-premium-amethyst:hover {
    background: linear-gradient(135deg, #9333ea, #c084fc);
    color: #fff;
    border-color: #c084fc;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(147, 51, 234, .3);
}

.btn-premium-ruby {
    border: 1px solid rgba(220, 38, 38, .5);
    background: linear-gradient(135deg, rgba(220, 38, 38, .2), rgba(220, 38, 38, .08));
    color: #b91c1c;
    border-radius: 12px;
    font-weight: 600;
    transition: var(--transition);
}

.btn-premium-ruby:hover {
    background: linear-gradient(135deg, #dc2626, #fb7185);
    color: #fff;
    border-color: #fb7185;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(220, 38, 38, .3);
}

.premium-page .alert {
    background: rgba(255, 255, 255, .75);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(212, 175, 55, .2);
    color: var(--p-text);
}

.premium-footer {
    text-align: center;
    padding: 1.5rem;
    color: var(--p-footer-text);
    font-size: .82rem;
}

.premium-footer .gold-text { color: var(--p-footer-gold); }

[data-theme="dark"] .premium-icon.icon-gold {
    background: linear-gradient(135deg, rgba(212, 175, 55, .25), rgba(212, 175, 55, .1));
    border-color: rgba(212, 175, 55, .3);
    color: #f0c75e;
}
[data-theme="dark"] .premium-icon.icon-amethyst {
    background: linear-gradient(135deg, rgba(147, 51, 234, .25), rgba(147, 51, 234, .1));
    border-color: rgba(147, 51, 234, .3);
    color: #c084fc;
}
[data-theme="dark"] .premium-icon.icon-ruby {
    background: linear-gradient(135deg, rgba(220, 38, 38, .25), rgba(220, 38, 38, .1));
    border-color: rgba(220, 38, 38, .3);
    color: #fb7185;
}
[data-theme="dark"] .premium-status-available {
    background: rgba(16, 185, 129, .12);
    border-color: rgba(16, 185, 129, .3);
    color: #34d399;
}
[data-theme="dark"] .premium-title .title-icon { color: #f0c75e; }
[data-theme="dark"] .btn-premium { color: #f0c75e; }
[data-theme="dark"] .btn-premium-amethyst { color: #c084fc; }
[data-theme="dark"] .btn-premium-ruby { color: #fb7185; }
[data-theme="dark"] .premium-page .alert {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .12);
    color: #fff;
}