:root {
    --tg-theme-bg-color: #1a1a1a;
    --tg-theme-text-color: #ffffff;
    --tg-theme-button-color: #5E5CE6;
    --tg-theme-button-text-color: #ffffff;
    --tg-theme-hint-color: #98989d;
    --tg-theme-secondary-bg-color: #2c2c2e;
    --gold-color: #FFD700;
    --card-bg-color: rgba(44, 44, 46, 0.7);
    --card-border-color: rgba(255, 255, 255, 0.1);
    --live-dot-color: #34C759;
    --fixed-white-color: #ffffff;
    --fixed-secondary-bg-color: #2c2c2e; 
    --error-color: #ff3b30;
    --success-color: #34c759;
}

* {
    font-family: 'Vazirmatn', sans-serif !important;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0; 
    background-color: transparent;
    color: var(--fixed-white-color);
    overflow-x: hidden;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#app {
    padding: 15px;
    position: relative;
    z-index: 1;
}

.hidden { display: none !important; }

/* === START: استایل‌های لودر و پس‌زمینه فضایی === */
.starfield-background, .starfield-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
    overflow: hidden;
    z-index: -1;
}
.starfield-loader {
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.5s ease;
}
.starfield-loader.hidden {
    opacity: 0;
    pointer-events: none;
}
.starfield-content {
    position: relative;
    text-align: center;
    z-index: 10;
}
.starfield-logo {
    width: 100px;
    height: auto;
    filter: brightness(0) invert(1);
    animation: breathing 2.5s ease-in-out infinite;
}
.starfield-loading-text {
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.8);
}
@keyframes breathing {
    0%, 100% { transform: scale(0.98); opacity: 0.8; }
    50% { transform: scale(1.02); opacity: 1; }
}

.starfield-progress-container {
    width: 150px;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    margin: 15px auto 0;
    overflow: hidden;
}
.starfield-progress-bar {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    transform: translateX(-100%);
    animation: fill-progress 2.5s linear infinite;
}
@keyframes fill-progress {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    background: transparent;
    animation: move-stars 150s linear infinite;
}
#stars2_bg, #stars2_loader {
    width: 2px;
    height: 2px;
    animation-duration: 100s;
}
#stars3_bg, #stars3_loader {
    width: 3px;
    height: 3px;
    animation-duration: 50s;
}
@keyframes move-stars {
    from { transform: translateY(0); }
    to { transform: translateY(-2000px); }
}

#stars1_bg, #stars1_loader {
  box-shadow: 531px 1502px #FFF, 194px 938px #FFF, 1260px 1461px #FFF, 545px 1205px #FFF, 1799px 123px #FFF, 1898px 570px #FFF, 1142px 1324px #FFF, 1974px 1475px #FFF, 214px 1735px #FFF, 1489px 1383px #FFF, 1531px 406px #FFF, 1423px 186px #FFF, 171px 1133px #FFF, 423px 1018px #FFF, 1332px 1327px #FFF, 719px 1362px #FFF, 1957px 1138px #FFF, 1204px 1406px #FFF, 1431px 1038px #FFF, 521px 10px #FFF, 1009px 1251px #FFF, 34px 1105px #FFF, 1201px 197px #FFF, 48px 1272px #FFF, 1976px 1628px #FFF, 1081px 1341px #FFF, 1840px 1198px #FFF, 1283px 1845px #FFF, 1512px 1173px #FFF, 1354px 1152px #FFF, 789px 456px #FFF, 1888px 999px #FFF, 250px 300px #FFF, 1600px 1700px #FFF, 820px 200px #FFF;
}
#stars2_bg, #stars2_loader {
  box-shadow: 1972px 1088px #FFF, 1072px 1935px #FFF, 100px 1008px #FFF, 1373px 122px #FFF, 1476px 1664px #FFF, 1146px 1846px #FFF, 543px 1650px #FFF, 1437px 143px #FFF, 552px 1445px #FFF, 1979px 1131px #FFF, 523px 1941px #FFF, 1268px 177px #FFF, 1429px 1563px #FFF, 839px 1251px #FFF, 930px 1249px #FFF, 178px 184px #FFF, 1832px 1138px #FFF, 1493px 886px #FFF, 1334px 1032px #FFF, 762px 1099px #FFF, 400px 1500px #FFF, 1800px 300px #FFF, 1100px 600px #FFF, 650px 1850px #FFF;
}
#stars3_bg, #stars3_loader {
  box-shadow: 104px 1125px #FFF, 848px 1449px #FFF, 1228px 233px #FFF, 130px 819px #FFF, 1034px 1482px #FFF, 1153px 1538px #FFF, 1034px 339px #FFF, 1402px 1386px #FFF, 135px 1292px #FFF, 115px 1421px #FFF, 1750px 250px #FFF, 300px 800px #FFF, 1900px 1300px #FFF, 500px 500px #FFF;
}
/* === END: استایل‌های لودر و پس‌زمینه === */

.user-header { padding: 20px; background: var(--card-bg-color); backdrop-filter: blur(15px); border-radius: 20px; margin-bottom: 20px; position: relative; z-index: 1; border: 1px solid var(--card-border-color); text-align: center; }
.user-profile-main { display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; }
.user-photo-container { width: 84px; height: 84px; position: relative; margin-bottom: 10px; }
.user-photo { width: 100%; height: 100%; border-radius: 50%; background-color: #48484a; background-size: cover; background-position: center; position: relative; z-index: 2; }
.rotating-border { position: absolute; top: -4px; left: -4px; width: calc(100% + 8px); height: calc(100% + 8px); border-radius: 50%; padding: 3px; background: conic-gradient(from 0deg, var(--tg-theme-button-color), transparent 50%, var(--tg-theme-button-color)); animation: rotation 3s linear infinite; z-index: 1; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
@keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.user-info h1 { margin: 0; font-size: 1.5em; font-weight: 700; }
.user-stats { display: flex; justify-content: space-around; width: 100%; padding-top: 15px; border-top: 1px solid var(--card-border-color); }
.stat-item { display: flex; align-items: center; gap: 8px; color: var(--tg-theme-hint-color); font-size: 0.9em; }
.stat-icon-wrapper { background-color: rgba(255, 255, 255, 0.1); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }
.stat-icon-svg { width: 20px; height: 20px; color: var(--fixed-white-color); fill: currentColor; }
.stat-text { text-align: right; }
.stat-item .stat-value { display: block; font-weight: 600; color: var(--fixed-white-color); font-size: 1.1em; }
.live-info-box { text-align: center; margin-bottom: 20px; padding: 10px; background: rgba(0, 0, 0, 0.2); border-radius: 12px; }
#live-datetime { font-size: 0.95em; color: var(--fixed-white-color); margin-bottom: 8px; direction: ltr; display: flex; justify-content: center; align-items: center; gap: 15px; font-variant-numeric: tabular-nums; }
.live-status { display: flex; justify-content: center; align-items: center; gap: 8px; font-weight: bold; }
.live-dot { width: 8px; height: 8px; background-color: var(--live-dot-color); border-radius: 50%; animation: blink 1.5s infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
.main-action-btn { width: 100%; padding: 15px; font-size: 1.1em; font-weight: 600; border-radius: 12px; border: none; background-color: var(--fixed-secondary-bg-color); color: var(--fixed-white-color); cursor: pointer; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.main-action-icon { width: 22px; height: 22px; fill: currentColor; }
.info-note { text-align: center; font-size: 0.8em; color: var(--tg-theme-hint-color); margin: -10px 0 20px 0; }
.accordion { background: var(--card-bg-color); backdrop-filter: blur(10px); border-radius: 16px; margin-bottom: 20px; position: relative; z-index: 1; border: 1px solid var(--card-border-color); }
.accordion-header { padding: 15px 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.accordion-header h2 { margin: 0; font-size: 1.1em; display: flex; align-items: center; gap: 10px; }
.accordion-arrow { transition: transform 0.3s ease; }
.accordion.open .accordion-arrow { transform: rotate(180deg); }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; }
.accordion-content-inner { padding: 15px 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.service-list { display: flex; flex-direction: column; gap: 12px; }
.service-item { background-color: #3a3a3c; border-radius: 10px; padding: 15px; display: flex; justify-content: space-between; align-items: center; border-left: 4px solid var(--tg-theme-button-color); }
.service-details { text-align: right; }
.service-details h3 { margin: 0 0 8px 0; font-size: 1.1em; font-weight: 700; }
.service-item .price-label { font-size: 0.8em; color: var(--tg-theme-hint-color); margin-bottom: 4px; }
.service-item .final-price { font-size: 1em; font-weight: 600; color: var(--fixed-white-color); }
.service-action button { background-color: var(--tg-theme-button-color); color: var(--tg-theme-button-text-color); border: none; padding: 10px 20px; border-radius: 8px; font-size: 0.9em; font-weight: 600; cursor: pointer; white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 8px; }
.service-item.special-item { padding: 0; border-radius: 12px; position: relative; background: #3a3a3c; overflow: hidden; border-left: none; }
.service-item.special-item::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; z-index: 1; background: conic-gradient(from 0deg, transparent, var(--gold-color), transparent 35%); animation: rotation 4s linear infinite; }
.special-item .service-details { position: relative; z-index: 2; background-color: #3a3a3c; border-radius: 10px; margin: 2px; padding: 15px; width: calc(100% - 4px); display: flex; justify-content: space-between; align-items: center; }
.special-item h3 { color: var(--gold-color); margin: 0; font-weight: 700; }
.special-item .final-price b { color: var(--gold-color); font-weight: 700; }
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px); display: flex; justify-content: center; align-items: center; z-index: 1000; }
.modal-content { background: var(--fixed-secondary-bg-color); padding: 20px; border-radius: 16px; width: 90%; max-width: 400px; position: relative; border: 1px solid rgba(255, 255, 255, 0.1); }
.modal-close-btn { position: absolute; top: 10px; left: 15px; background: none; border: none; font-size: 24px; color: var(--tg-theme-hint-color); cursor: pointer; }
.modal-content h3 { margin-top: 0; }
.sim-selection { display: flex; gap: 10px; margin-top: 15px; }
.sim-selection button { flex-grow: 1; padding: 12px; font-size: 1em; background-color: #3a3a3c; color: var(--fixed-white-color); border: 1px solid #555; border-radius: 8px; cursor: pointer; }
.sim-selection button.selected { background-color: var(--tg-theme-button-color); border-color: var(--tg-theme-button-color); }
.form-group { margin-bottom: 15px; }
.label-wrapper { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.form-group label { font-size: 0.9em; }
.char-counter { font-size: 0.8em; color: var(--tg-theme-hint-color); direction: ltr; }
.form-group input { width: 100%; padding: 10px; background: #3a3a3c; border: 1px solid #555; border-radius: 8px; color: var(--fixed-white-color); font-size: 1em; transition: border-color 0.3s ease; }
.form-group input.input-success { border-color: var(--success-color); }
.imei-warning-note { font-size: 0.8em; color: var(--tg-theme-hint-color); background-color: rgba(255, 159, 10, 0.15); padding: 8px; border-radius: 6px; text-align: center; margin: 10px 0 20px 0; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }
#custom-alert-modal .modal-content { border-top: 4px solid var(--error-color); text-align: center; }
#custom-alert-modal p { color: var(--tg-theme-hint-color); font-size: 0.95em; line-height: 1.6; margin: 10px 0 20px 0; }
.modal-action-btn { width: 100%; padding: 12px; margin-top: 10px; font-size: 1.1em; font-weight: 600; background: var(--tg-theme-button-color); color: var(--tg-theme-button-text-color); border: none; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center;}
.modal-action-btn.confirm { background-color: #34C759; }
#reg-order-summary { background: #3a3a3c; padding: 15px; border-radius: 8px; margin-bottom: 15px; font-size: 0.9em; line-height: 1.6; }
.notes-textarea { width: 100%; height: 80px; background: #3a3a3c; border: 1px solid #555; border-radius: 8px; color: var(--fixed-white-color); padding: 10px; margin-top: 15px; resize: vertical; }
#rejection-order-modal .modal-content { max-height: 85vh; display: flex; flex-direction: column; }
.modal-scroll-content { overflow-y: auto; margin-bottom: 15px; padding-right: 5px; }
#rej-upload-fields { display: block; }
.upload-group { margin-bottom: 15px; }
.upload-group label:first-of-type { display: block; margin-bottom: 8px; font-weight: 500; font-size: 0.9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fixed-white-color); }
.upload-box { border: 2px dashed #555; border-radius: 12px; padding: 8px; min-height: auto; text-align: center; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; position: relative; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; }
.upload-box:hover { background-color: rgba(255, 255, 255, 0.05); border-color: var(--tg-theme-button-color); }
.upload-box .upload-icon-svg { width: 1.5em; height: 1.5em; fill: var(--fixed-white-color); margin: 0; }
.upload-box p { margin: 0; color: var(--tg-theme-hint-color); font-size: 0.9em; line-height: 1.2; }
.upload-box .file-name { color: var(--fixed-white-color); font-weight: bold; font-size: 0.85em; word-break: break-all; line-height: 1.3; margin-left: auto; text-align: left; }
.upload-box.has-file .upload-icon-svg,
.upload-box.has-file p { display: none; }
.upload-box input[type="file"] { display: none; }
#rej-final-confirm-btn { margin-top: auto; }
#my-orders-list-container { max-height: 60vh; overflow-y: auto; padding-right: 10px; }
.my-order-item { background-color: #3a3a3c; border-radius: 10px; padding: 15px; margin-bottom: 10px; border-right: 4px solid; }
.my-order-item.status-completed { border-color: var(--success-color); }
.my-order-item.status-pending { border-color: #FF9500; }
.my-order-item p { margin: 0 0 8px 0; font-size: 0.9em; }
.my-order-item strong { color: var(--fixed-white-color); }
.order-notes { background-color: rgba(0, 0, 0, 0.2); padding: 10px; border-radius: 6px; margin-top: 10px; font-style: italic; font-size: 0.85em; }
.activation-code { background-color: rgba(0, 0, 0, 0.3); padding: 8px; border-radius: 6px; margin-top: 10px; text-align: center; font-weight: bold; letter-spacing: 2px; cursor: pointer; user-select: all; }
.btn-loader { width: 18px; height: 18px; border: 2px solid #FFF; border-bottom-color: transparent; border-radius: 50%; display: inline-block; box-sizing: border-box; animation: rotation 1s linear infinite; }