/* =========================
   GLOBAL RESET
========================= */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:var(--font-main);
}


body{
    min-height:100vh;
    font-size:13px;
    line-height:1.7;
    color:var(--text-body);
    background:
        radial-gradient(120% 120% at top, #151b35, var(--bg-main));
}



/* =========================
   TYPOGRAPHY SYSTEM
========================= */

/* Headings */
h1, h2, h3, h4, h5, h6{
    margin:0;
    font-weight:900;
    line-height:1.25;
    letter-spacing:.3px;
    color:var(--text-main);
}

/* Hierarchy */
h1{ font-size:clamp(22px,4vw,28px); }
h2{ font-size:clamp(18px,3vw,22px); }
h3{ font-size:16px; }
h4{ font-size:14px; }
h5{ font-size:13px; }
h6{
    font-size:12px;
    font-weight:700;
    color:var(--text-soft);
}

/* Paragraph */
p{
    font-size:13px;
    line-height:1.7;
    color:var(--text-body);
}

/* Text utilities */
.text-soft{ color:var(--text-soft); }
.text-muted{ color:var(--text-muted); }

small,
.label{
    font-size:11px;
    line-height:1.4;
    color:var(--text-muted);
}

b,
strong{
    font-weight:800;
    color:var(--text-main);
}



/* =========================
   APP LAYOUT
========================= */
.app{
    display:flex;
    min-height:100vh;
    width:100%;
}



/* =========================
   SIDEBAR
========================= */
.sidebar{
    width:240px;
    padding:28px 18px;
    display:flex;
    flex-direction:column;
    background:linear-gradient(180deg,#060a12,var(--bg-sidebar));
    border-right:1px solid var(--border-soft);
}

.logo{
    font-size:20px;
    font-weight:900;
    margin-bottom:28px;
}
.logo span{ color:var(--accent-main); }

.menu{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.menu a{
    padding:12px 14px;
    border-radius:12px;
    text-decoration:none;
    font-size:13px;
    color:var(--text-muted);
    transition:.25s;
}

.menu a:hover{
    background:rgba(255,255,255,.04);
    color:var(--text-main);
}

.menu a.active{
    background:var(--accent-soft);
    border:1px solid var(--accent-border);
    color:var(--text-main);
}

.menu a.logout{
    margin-top:auto;
    padding-top:16px;
    border-top:1px solid var(--border-soft);
    color:var(--danger);
}



/* =========================
   MAIN
========================= */
.main{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
}



/* =========================
   TOPBAR
========================= */
.topbar {
    min-height: 88px;
    padding: 16px 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15,20,34,.85);
    border-bottom: 1px solid var(--border-soft);
    position: relative;
    z-index: 10;
}

/* ⛔ backdrop-filter فقط اگر لازم داری */
@supports (backdrop-filter: blur(10px)) {
    .topbar {
        backdrop-filter: blur(10px);
    }
}


.topbar-cards{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    justify-content:center;
}



/* =========================
   TOP CARD
========================= */
.top-card{
    min-width:170px;
    padding:12px 16px;
    border-radius:14px;
    text-align:center;
    background:linear-gradient(180deg,var(--bg-card),var(--bg-card-soft));
    border:1px solid var(--border-soft);
    box-shadow:0 8px 24px rgba(0,0,0,.45);
}

.top-card .label{
    display:block;
    margin-bottom:6px;
    font-size:11px;
    color:var(--text-muted);
}

.top-card b{
    font-size:14px;
    font-weight:800;
    color:var(--text-main);
}

.top-card.plan.pro{
    color:var(--success);
    border-color:rgba(63,209,139,.45);
    background:linear-gradient(
        180deg,
        rgba(63,209,139,.12),
        var(--bg-card-soft)
    );
}



/* =========================
   CONTENT
========================= */
.content{
    flex:1;
    padding:26px 22px;
    display:flex;
    justify-content:center;
}

.content-center{
    width:100%;
    max-width:1000px;
}



/* =========================
   CARD
========================= */
.card{
    padding:26px;
    border-radius:18px;
    background:linear-gradient(180deg,var(--bg-card),var(--bg-card-soft));
    border:1px solid var(--border-soft);
    box-shadow:0 30px 70px rgba(0,0,0,.55);
}

.card h1{
    margin-bottom:6px;
    font-size:clamp(20px,4vw,26px);
}

.card p{
    margin-bottom:18px;
}



/* =========================
   UPLOAD (CLEAN REWRITE)
========================= */

.upload{
    position: relative; /* پایه overlay */
    padding:24px;
    border-radius:16px;
    background:var(--bg-panel);
    border:2px dashed var(--border-soft);
    transition: opacity .25s ease;
}

/* حالت غیرفعال (اشتراک منقضی) */
.upload.disabled{
    opacity:.45;
    pointer-events:none; /* ⛔ کلیک کامل قطع */
}

/* محتوای قابل کلیک */
.upload-inner{
    padding:18px;
    text-align:center;
    cursor:pointer;
    color:var(--text-soft);
    transition: color .2s ease, opacity .2s ease;
}

.upload-inner:hover{
    color:var(--accent-main);
}

/* input واقعی مخفی */
.upload input{
    display:none;
}

/* فقط در حالت فعال */
.upload.loading .upload-inner{
    opacity:.35;
    pointer-events:none;
}

/* =========================
   LOADING OVERLAY
========================= */

.upload-loading{
    position:absolute;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(10,12,22,.65);
    backdrop-filter:blur(4px);
    border-radius:inherit;
    z-index:50;
}

.upload-loading.active{
    display:flex;
}

/* اسپینر */
.upload-loading .loader{
    width:28px;
    height:28px;
    border:3px solid rgba(255,255,255,.25);
    border-top-color:#7c8cff;
    border-radius:50%;
    animation:uploadSpin .8s linear infinite;
}

@keyframes uploadSpin{
    to{ transform:rotate(360deg); }
}

/* =========================
   HINT
========================= */

.upload-hint{
    margin-top:10px;
    text-align:center;
    font-size:11px;
    color:var(--text-muted);
}




/* =========================
   TRIAL EXPIRED
========================= */
.trial-expired-box{
    margin-bottom:16px;
    padding:14px 16px;
    border-radius:12px;
    text-align:center;
    font-weight:800;
    color:#ffb4b4;
    background:var(--danger-soft);
    border:1px solid rgba(255,107,107,.35);
}



/* =========================
   TOAST
========================= */
.toast{
    position:relative;
    display:flex;
    gap:12px;
    padding:14px;
    border-radius:14px;
    background:rgba(15,20,34,.95);
    border:1px solid var(--border-soft);
    box-shadow:0 14px 50px rgba(0,0,0,.45);
    animation:toastIn .35s ease;
}

.toast.success{ border-color:rgba(63,209,139,.45); }
.toast.error{ border-color:rgba(255,107,107,.45); }
.toast.info{ border-color:var(--accent-border); }

.toast-icon{
    width:36px;
    height:36px;
    border-radius:10px;
    background:rgba(255,255,255,.06);
    display:flex;
    align-items:center;
    justify-content:center;
}

.toast-title{
    font-size:13px;
    font-weight:900;
    color:var(--text-main);
}

.toast-text{
    font-size:12px;
    line-height:1.6;
    color:var(--text-muted);
}

.toast-close{
    position:absolute;
    top:8px;
    right:8px;
    width:26px;
    height:26px;
    border-radius:8px;
    border:none;
    cursor:pointer;
    background:rgba(255,255,255,.06);
    color:var(--text-main);
}

.toast.hide{
    opacity:0;
    transform:translateY(-8px);
    transition:.25s;
}

@keyframes toastIn{
    from{ opacity:0; transform:translateY(-10px); }
    to{ opacity:1; transform:none; }
}



/* =========================
   BUTTONS
========================= */
button{
    padding:11px 16px;
    border-radius:12px;
    font-size:13px;
    font-weight:900;
    cursor:pointer;
    border:1px solid rgba(255,255,255,.15);
    color:#fff;
    background:linear-gradient(135deg,var(--cta-blue),var(--cta-blue-dark));
    box-shadow:0 10px 30px var(--cta-blue-glow);
    transition:.25s;
}

button:hover{
    transform:translateY(-1px);
    box-shadow:0 16px 45px rgba(47,107,255,.65);
}

button:active{
    transform:none;
    box-shadow:0 6px 18px rgba(47,107,255,.45);
}

button.secondary{
    background:var(--bg-panel);
    color:var(--text-main);
    border:1px solid var(--border-soft);
    box-shadow:none;
}

button.success{
    background:rgba(63,209,139,.18);
    color:var(--success);
    box-shadow:none;
}

button.danger{
    background:rgba(255,107,107,.18);
    color:var(--danger);
    box-shadow:none;
}

button.current{
    background:var(--bg-card);
    color:var(--success);
    border:1px solid rgba(63,209,139,.45);
    box-shadow:none;
    cursor:default;
}

button:disabled{
    background:var(--bg-panel);
    color:var(--text-muted);
    border:1px solid var(--border-soft);
    box-shadow:none;
    cursor:not-allowed;
}



/* =========================
   INLINE CARD TOAST
========================= */

.ig-inline-toast {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: linear-gradient( 180deg, rgba(255,255,255,.04), rgba(255,255,255,.02) );
    border: 1px solid var(--border-soft);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Variants */
.ig-inline-toast--success {
    border-right: 4px solid #3cc878;
}

.ig-inline-toast--error {
    border-right: 4px solid #ff6b6b;
}

.ig-inline-toast--info {
    border-right: 4px solid #7c7cff;
}

/* Icon */
.ig-inline-toast__icon {
    font-size: 22px;
    line-height: 1;
    margin-top: 2px;
}

/* Content */
.ig-inline-toast__content {
    flex: 1;
}

.ig-inline-toast__title {
    font-size: 14px;
    font-weight: 900;
    margin-bottom: 4px;
    color: var(--text-main);
}

.ig-inline-toast__text {
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-muted);
}

/* Close */
.ig-inline-toast__close {
    border: none;
    background: rgba(255,255,255,.06);
    color: var(--text-main);
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex; /* 👈 کلید حل مشکل */
    align-items: center; /* 👈 وسط عمودی */
    justify-content: center; /* 👈 وسط افقی */

    cursor: pointer;
    font-size: 18px; /* کمی خوشگل‌تر */
    line-height: 1; /* 👈 جلوگیری از جابه‌جایی */
    padding: 0; /* 👈 حذف offset پیش‌فرض */
}

    .ig-inline-toast__close:hover {
        background: rgba(255,255,255,.12);
    }






/* =========================
   RESPONSIVE (FIXED)
========================= */

/* =========================
   Dexctop
========================= */

@media (min-width: 1200px) {

    .app {
        display: flex;
    }

    .sidebar {
        display: flex;
    }

    .mobile-menu-btn {
        display: none;
    }
}

@media (max-width: 1199px) {

    /* ❌ سایدبار کلاً حذف */
    .sidebar {
        display: none !important;
    }

    /* محتوا تمام‌عرض */
    .main {
        width: 100%;
        padding-bottom: 0;
    }

    .content {
        padding: 18px 14px;
    }

    /* TOPBAR */
    .topbar {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px 48px 16px 16px; /* جا برای دکمه */
    }

    /* کارت‌ها وسط */
    .topbar-cards {
        width: 100%;
        justify-content: center;
    }

    /* ☰ منو باتن – RTL، کمی پایین‌تر، چسبیده به راست */
    .mobile-menu-btn {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-40%); /* 👈 کمی پایین‌تر از وسط */
        z-index: 10;
    }
}


.upload.loading{
  pointer-events:none;
  opacity:.7;
}

.upload-spinner{
  width:26px;
  height:26px;
  border:3px solid rgba(255,255,255,.25);
  border-top-color:#6cf;
  border-radius:50%;
  animation:spin .9s linear infinite;
  margin:0 auto;
}

@keyframes spin{
  to{ transform:rotate(360deg); }
}



/* =========================
   MOBILE / TABLET
========================= */
@media (max-width: 992px) {

    /* ❌ سایدبار کلاً حذف */
    .sidebar {
        display: none !important;
    }

    /* محتوا تمام‌عرض */
    .main {
        width: 100%;
        padding-bottom: 0;
    }

    .content {
        padding: 18px 14px;
    }

    /* TOPBAR */
    .topbar {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px 48px 16px 16px; /* جا برای دکمه */
    }

    /* کارت‌ها وسط */
    .topbar-cards {
        width: 100%;
        justify-content: center;
    }

    /* ☰ منو باتن – RTL، کمی پایین‌تر، چسبیده به راست */
    .mobile-menu-btn {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-40%); /* 👈 کمی پایین‌تر از وسط */
        z-index: 10;
    }
}