/* ریشه هوم */
.home-root{padding:12px}

/* کارت ورود */
.login-card{max-width:520px;margin:8px auto}

/* ====== استوری فول‌اسکرین سبک WhatsApp ====== */
.stories-shell{
  position:relative; width:100%; height:100vh; max-height:100dvh;
  overflow:hidden; background:#000; border-radius:0;
}
.story-frame{
  position:relative; width:100%; height:100%;
  touch-action:manipulation; user-select:none;
}
.story-slide{
  position:absolute; inset:0; opacity:0; transform:scale(.98);
  transition:opacity .35s ease, transform .35s ease; color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.story-slide > *{max-width:92%; max-height:86%; border-radius:12px; background:#111; padding:0}
.story-slide.active{opacity:1; transform:scale(1)}
.story-slide img, .story-slide video{max-width:100%; max-height:100%; border-radius:12px; display:block}

/* بالا: پروگرس بارها و بستن */
.story-topbar{
  position:absolute; top:10px; left:10px; right:10px; display:flex; gap:6px; align-items:center; z-index:5;
}
.story-bar{flex:1; height:3px; background:rgba(255,255,255,.25); border-radius:2px; overflow:hidden}
.story-bar-fill{height:100%; background:linear-gradient(90deg,#2A72C0,#5CA9E6)}
.story-close{
  margin-inline-start:8px; width:36px; height:36px; border-radius:50%;
  border:0; background:rgba(255,255,255,.15); color:#fff; font-size:18px
}

/* دکمه‌های قبلی/بعدی */
.story-prev,.story-next{
  position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%;
  border:0; background:rgba(255,255,255,.18); color:#fff; display:flex; align-items:center; justify-content:center; z-index:5
}
.story-prev{right:10px} .story-next{left:10px}

/* حالت بارگذاری/خالی */
.stories-loading,.stories-empty{display:flex; align-items:center; justify-content:center; height:60vh; color:#666}

.calc-page {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
    background: linear-gradient(180deg, #f6f9ff 0%, #ffffff 100%);
    min-height: 90vh;
}

.calc-card {
    width: 100%;
    max-width: 480px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 6px 24px rgba(42, 114, 192, 0.15);
    color: #333;
    text-align: center;
    animation: fadeIn 0.5s ease;
}

.calc-header {
    border-bottom: 1px solid #e6ecf3;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.calc-logo {
    width: 60px;
    margin-bottom: 10px;
}

.calc-header h2 {
    color: #2A72C0;
    font-weight: 800;
    margin-bottom: 4px;
}

.calc-header p {
    font-size: 0.85rem;
    color: #666;
}

.calc-row {
    text-align: right;
    margin: 10px 0;
}

    .calc-row label {
        font-size: 0.9rem;
        color: #2A72C0;
        font-weight: 600;
    }

.calc-input {
    width: 100%;
    text-align: center;
    border-radius: 10px;
    border: 1px solid #ccd6e0;
    padding: 8px 6px;
    font-size: 1rem;
}

.calc-value {
    font-weight: 700;
    font-size: 1rem;
    color: #333;
    text-align: left;
}

.calc-btn {
    margin-top: 16px;
    background: linear-gradient(135deg, #2A72C0, #5CA9E6);
    color: #fff;
    border: none;
    font-weight: 600;
    border-radius: 12px;
    padding: 12px 0;
    font-size: 1.1rem;
    transition: all 0.2s;
}

    .calc-btn:hover {
        transform: scale(1.03);
    }

.calc-result {
    background: rgba(245, 249, 255, 0.8);
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
    color: #333;
    text-align: center;
    border: 1px solid #e6ecf3;
}

    .calc-result h3 {
        color: #2A72C0;
        margin-bottom: 8px;
    }

.calc-price {
    font-size: 1.4rem;
    font-weight: 800;
    color: #28a745;
}

.calc-footer {
    margin-top: 10px;
    font-size: 0.75rem;
    color: #777;
}

/* انیمیشن‌ها */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-in {
    animation: fadeIn 0.5s ease forwards;
}
.settings-page {
    display: flex;
    justify-content: center;
    padding: 20px;
    min-height: 90vh;
    background: linear-gradient(180deg, #f5f8fc 0%, #ffffff 100%);
}

.settings-card {
    width: 100%;
    max-width: 480px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 6px 24px rgba(42, 114, 192, 0.12);
    text-align: center;
    animation: fadeIn 0.4s ease;
}

.settings-header {
    border-bottom: 1px solid #e3e9f2;
    margin-bottom: 12px;
    padding-bottom: 8px;
}

.settings-logo {
    width: 60px;
    margin-bottom: 10px;
}

.settings-header h2 {
    color: #2A72C0;
    font-weight: 800;
    margin-bottom: 4px;
}

.settings-header p {
    font-size: 0.85rem;
    color: #555;
}

.settings-body {
    text-align: right;
    direction: rtl;
    margin-top: 12px;
}

.settings-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem;
    margin: 8px 0;
}

    .settings-row span:first-child {
        color: #2A72C0;
        font-weight: 600;
    }

.ver-number {
    color: #333;
    font-family: monospace;
}

.settings-sep {
    border: none;
    height: 1px;
    background: #dde4ef;
    margin: 12px 0;
}

.settings-btn {
    border-radius: 12px;
    padding: 12px;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    border: none;
    margin-bottom: 10px;
    transition: transform 0.2s ease;
}

    .settings-btn:hover {
        transform: scale(1.03);
    }

.gradient-blue {
    background: linear-gradient(135deg, #2A72C0, #5CA9E6);
}

.gradient-highlight {
    background: linear-gradient(135deg, #28a745, #42c67b);
}

.settings-status {
    font-size: 0.9rem;
    text-align: center;
    color: #555;
}

    .settings-status i {
        margin-left: 5px;
    }

.settings-footer {
    margin-top: 18px;
    font-size: 0.75rem;
    color: #888;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}