:root {
    --bg-color: #fff0f5; 
    --card-bg: #ffffff;
    --primary-color: #ff85a2; 
    --primary-hover: #ff5c81; 
    --text-main: #4a4a4a;
    --text-muted: #8e8e8e;
    --border-color: #f7dbe3;
    --shadow: 0 10px 30px rgba(255, 133, 162, 0.15);
    --radius: 16px;
    --transition: all 0.3s ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

body { background-color: var(--bg-color); color: var(--text-main); display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; direction: rtl; padding-top: 2rem; }

.container { background: var(--card-bg); width: 100%; max-width: 450px; padding: 2rem; border-radius: var(--radius); box-shadow: var(--shadow); margin: 0 auto; }
.dashboard-container { max-width: 900px; }

h2 { text-align: center; color: var(--primary-color); margin-bottom: 1.5rem; }

.form-group { margin-bottom: 1rem; }
.form-group input { width: 100%; padding: 12px; border: 2px solid var(--border-color); border-radius: 8px; outline: none; transition: var(--transition); }
.form-group input:focus { border-color: var(--primary-color); }

.btn { width: 100%; padding: 12px; background-color: var(--primary-color); color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; font-size: 1rem; transition: var(--transition); }
.btn:hover { background-color: var(--primary-hover); transform: translateY(-2px); }

.toggle-form { text-align: center; margin-top: 1rem; font-size: 0.9rem; color: var(--text-muted); cursor: pointer; }
.toggle-form:hover { color: var(--primary-color); }

.upload-zone { border: 2px dashed var(--primary-color); background-color: rgba(255, 133, 162, 0.05); border-radius: var(--radius); padding: 3rem 2rem; text-align: center; cursor: pointer; transition: var(--transition); margin-bottom: 1rem; position: relative; }
.upload-zone.dragover { background-color: rgba(255, 133, 162, 0.2); border-style: solid; }
.upload-zone input[type="file"] { display: none; }
.upload-icon { font-size: 3rem; color: var(--primary-color); margin-bottom: 1rem; display: block; }

.progress-container { width: 100%; background-color: var(--border-color); border-radius: 8px; margin-top: 1rem; overflow: hidden; display: none; }
.progress-bar { height: 8px; background-color: var(--primary-color); width: 0%; transition: width 0.3s ease; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.gallery-item { border-radius: 8px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.05); display: flex; flex-direction: column; align-items: center; background: var(--bg-color); border: 1px solid var(--border-color); }
.gallery-item a { width: 100%; height: 120px; display: block; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); }
.gallery-item:hover img { transform: scale(1.05); }

.storage-status { display: flex; justify-content: space-between; align-items: center; background: var(--bg-color); padding: 1rem; border-radius: 8px; margin-bottom: 2rem; color: var(--text-main); font-weight: bold; }

/* استایل‌های صفحه‌بندی */
.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 2rem; flex-wrap: wrap; }
.pagination a { padding: 8px 14px; text-decoration: none; background: var(--card-bg); color: var(--text-main); border: 1px solid var(--border-color); border-radius: 8px; transition: var(--transition); font-size: 0.9rem; font-weight: bold; }
.pagination a:hover { background: var(--primary-color); color: white; border-color: var(--primary-color); }
.pagination a.active { background: var(--primary-color); color: white; border-color: var(--primary-color); cursor: default; }

@media (max-width: 600px) {
    .container { margin: 1rem; padding: 1.5rem; }
    .gallery { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    .storage-status { flex-direction: column; gap: 10px; text-align: center; }
}