/* ============================================
    摄影展示平台 - 样式表
    ============================================ */
 
 /* Reset & Base */
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
 :root {
     --primary: #1a73e8;
     --primary-dark: #1557b0;
     --primary-light: #e8f0fe;
     --success: #0f9d58;
     --warning: #f9ab00;
     --danger: #d93025;
     --info: #4285f4;
     --gray-50: #f8f9fa;
     --gray-100: #f1f3f4;
     --gray-200: #e8eaed;
     --gray-300: #dadce0;
     --gray-400: #bdc1c6;
     --gray-500: #9aa0a6;
     --gray-600: #80868b;
     --gray-700: #5f6368;
     --gray-800: #3c4043;
     --gray-900: #202124;
     --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     --shadow-sm: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.1);
     --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
     --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
     --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
     --radius: 8px;
     --radius-sm: 4px;
     --radius-lg: 12px;
     --sidebar-width: 240px;
 }
 
 html { font-size: 15px; scroll-behavior: smooth; }
 body {
     font-family: var(--font);
     color: var(--gray-900);
     background: var(--gray-50);
     line-height: 1.6;
     min-height: 100vh;
 }
 a { color: var(--primary); text-decoration: none; }
 a:hover { color: var(--primary-dark); }
 img { max-width: 100%; height: auto; }
 
 /* ============================================
    Container
    ============================================ */
 .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
 
 /* ============================================
    Typography
    ============================================ */
 .text-muted { color: var(--gray-600); }
 .text-danger { color: var(--danger); }
 .text-center { text-align: center; }
 .required { color: var(--danger); }
 
 /* ============================================
    Header
    ============================================ */
 .site-header {
     background: #fff;
     border-bottom: 1px solid var(--gray-200);
     position: sticky;
     top: 0;
     z-index: 100;
     box-shadow: var(--shadow-sm);
 }
 .header-content {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 12px 0;
 }
 .site-title {
     font-size: 1.4rem;
     font-weight: 700;
 }
 .site-title a { color: var(--gray-900); }
 .site-title a:hover { color: var(--primary); }
 .header-nav { display: flex; gap: 10px; }
 
 /* ============================================
    Buttons
    ============================================ */
 .btn {
     display: inline-block;
     padding: 8px 20px;
     font-size: 0.95rem;
     font-weight: 500;
     border-radius: var(--radius);
     border: 1px solid transparent;
     cursor: pointer;
     transition: all 0.2s;
     text-align: center;
     line-height: 1.5;
 }
 .btn:hover { opacity: 0.9; }
 .btn:disabled { opacity: 0.6; cursor: not-allowed; }
 .btn-primary {
     background: var(--primary);
     color: #fff;
     border-color: var(--primary);
 }
 .btn-primary:hover { background: var(--primary-dark); color: #fff; }
 .btn-outline {
     background: transparent;
     color: var(--primary);
     border-color: var(--primary);
 }
 .btn-outline:hover { background: var(--primary-light); }
 .btn-danger {
     background: var(--danger);
     color: #fff;
     border-color: var(--danger);
 }
 .btn-success {
     background: var(--success);
     color: #fff;
     border-color: var(--success);
 }
 .btn-sm { padding: 4px 12px; font-size: 0.85rem; }
 .btn-block { display: block; width: 100%; }
 
 /* ============================================
    Forms
    ============================================ */
 .form-group { margin-bottom: 16px; }
 .form-group label {
     display: block;
     margin-bottom: 4px;
     font-weight: 500;
     color: var(--gray-800);
     font-size: 0.9rem;
 }
 .form-control {
     width: 100%;
     padding: 9px 12px;
     border: 1px solid var(--gray-300);
     border-radius: var(--radius);
     font-size: 0.95rem;
     background: #fff;
     transition: border-color 0.2s;
     color: var(--gray-900);
 }
 .form-control:focus {
     outline: none;
     border-color: var(--primary);
     box-shadow: 0 0 0 3px var(--primary-light);
 }
 .form-control:disabled { background: var(--gray-100); cursor: not-allowed; }
 textarea.form-control { resize: vertical; min-height: 80px; }
 .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
 .form-inline { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
 .form-actions { display: flex; gap: 10px; margin-top: 16px; }
 .filter-form { margin-bottom: 0; }
 select.form-control { cursor: pointer; }
 
 /* ============================================
    Alerts
    ============================================ */
 .alert {
     padding: 12px 16px;
     border-radius: var(--radius);
     margin-bottom: 16px;
     font-size: 0.9rem;
 }
 .alert-success {
     background: #e6f4ea;
     color: #1e7e34;
     border: 1px solid #b7e1cd;
 }
 .alert-error {
     background: #fce8e6;
     color: var(--danger);
     border: 1px solid #f5c6cb;
 }
 .alert-warning {
     background: #fef7e0;
     color: #e37400;
     border: 1px solid #fde293;
 }
 
 /* ============================================
    Homepage
    ============================================ */
 .home-main { min-height: calc(100vh - 140px); }
 
 .hero-section {
     background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
     color: #fff;
     padding: 80px 0;
     text-align: center;
 }
 .hero-content h2 {
     font-size: 2.5rem;
     margin-bottom: 12px;
     font-weight: 700;
 }
 .hero-content p {
     font-size: 1.2rem;
     opacity: 0.9;
     max-width: 500px;
     margin: 0 auto;
 }
 
 .photographers-section { padding: 60px 0; }
 .section-title {
     font-size: 1.6rem;
     text-align: center;
     margin-bottom: 40px;
     color: var(--gray-900);
 }
 
 .photographer-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
     gap: 24px;
 }
 
 .photographer-card {
     background: #fff;
     border-radius: var(--radius-lg);
     overflow: hidden;
     box-shadow: var(--shadow);
     transition: transform 0.2s, box-shadow 0.2s;
     color: var(--gray-900);
     display: block;
 }
 .photographer-card:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-md);
     color: var(--gray-900);
 }
 .card-cover {
     height: 160px;
     background: var(--gray-200);
     overflow: hidden;
 }
 .card-cover img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }
 .cover-placeholder {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 }
 .cover-placeholder span {
     font-size: 3rem;
     color: #fff;
     font-weight: 700;
 }
 .card-body {
     padding: 16px;
     text-align: center;
     position: relative;
 }
 .card-avatar {
     width: 64px;
     height: 64px;
     border-radius: 50%;
     overflow: hidden;
     margin: -48px auto 12px;
     border: 3px solid #fff;
     box-shadow: var(--shadow-sm);
 }
 .card-avatar img { width: 100%; height: 100%; object-fit: cover; }
 .avatar-placeholder {
     width: 64px;
     height: 64px;
     border-radius: 50%;
     background: var(--primary);
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
     font-weight: 700;
 }
 .card-name { font-size: 1.1rem; font-weight: 600; margin-bottom: 4px; }
 .card-city { font-size: 0.85rem; color: var(--gray-600); margin-bottom: 4px; }
 .card-specialty {
     font-size: 0.85rem;
     color: var(--gray-600);
     margin-bottom: 8px;
 }
 .card-stats {
     display: flex;
     justify-content: center;
     gap: 16px;
     font-size: 0.85rem;
     color: var(--gray-600);
     margin-bottom: 12px;
 }
 .card-stats .price { color: var(--danger); font-weight: 600; }
 .card-link {
     color: var(--primary);
     font-size: 0.9rem;
     font-weight: 500;
 }
 
 .empty-state {
     text-align: center;
     padding: 60px 0;
     color: var(--gray-500);
 }
 .empty-icon { font-size: 3rem; margin-bottom: 12px; }
 
 /* ============================================
    Auth Pages
    ============================================ */
 .auth-page {
     display: flex;
     align-items: center;
     justify-content: center;
     min-height: 100vh;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     padding: 20px;
 }
 .auth-container { width: 100%; max-width: 420px; }
 .auth-card {
     background: #fff;
     border-radius: var(--radius-lg);
     padding: 40px;
     box-shadow: var(--shadow-lg);
 }
 .auth-header {
     text-align: center;
     margin-bottom: 24px;
 }
 .auth-header h1 { font-size: 1.4rem; }
 .auth-header h1 a { color: var(--gray-900); }
 .auth-header p { color: var(--gray-600); margin-top: 4px; }
 .auth-form { margin-bottom: 20px; }
 .auth-footer {
     text-align: center;
     padding-top: 16px;
     border-top: 1px solid var(--gray-200);
     font-size: 0.9rem;
 }
 .auth-footer p { margin-bottom: 4px; }
 
 /* Install Page */
 .install-page {
     display: flex;
     align-items: center;
     justify-content: center;
     min-height: 100vh;
     background: var(--gray-100);
     padding: 20px;
 }
 .install-container { width: 100%; max-width: 520px; }
 .install-card {
     background: #fff;
     border-radius: var(--radius-lg);
     padding: 40px;
     box-shadow: var(--shadow-lg);
 }
 .install-card h1 { font-size: 1.5rem; margin-bottom: 16px; }
 .install-card ul { margin-bottom: 16px; padding-left: 20px; color: var(--gray-600); }
 .install-card ul li { margin-bottom: 4px; }
 
 /* ============================================
    Photographer Public Page
    ============================================ */
 .profile-header-section {
     background: #fff;
     padding: 40px 0;
     border-bottom: 1px solid var(--gray-200);
 }
 .profile-header {
     display: flex;
     align-items: center;
     gap: 30px;
 }
 .profile-avatar {
     flex-shrink: 0;
 }
 .profile-avatar img {
     width: 120px;
     height: 120px;
     border-radius: 50%;
     object-fit: cover;
     border: 3px solid #fff;
     box-shadow: var(--shadow);
 }
 .avatar-lg {
     width: 120px;
     height: 120px;
     border-radius: 50%;
     background: var(--primary);
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 3rem;
     font-weight: 700;
 }
 .profile-info h1 { font-size: 1.8rem; margin-bottom: 4px; }
 .profile-city { color: var(--gray-600); margin-bottom: 4px; }
 .profile-specialty {
     display: inline-block;
     background: var(--primary-light);
     color: var(--primary);
     padding: 2px 12px;
     border-radius: 20px;
     font-size: 0.85rem;
     margin-bottom: 8px;
 }
 .profile-bio { color: var(--gray-700); line-height: 1.7; max-width: 600px; }
 
 .profile-content {
     display: grid;
     grid-template-columns: 300px 1fr;
     gap: 30px;
     padding: 40px 0;
 }
 
 .sidebar-card {
     background: #fff;
     border-radius: var(--radius);
     padding: 20px;
     margin-bottom: 16px;
     box-shadow: var(--shadow);
 }
 .sidebar-card h3 {
     font-size: 1rem;
     font-weight: 600;
     margin-bottom: 12px;
     padding-bottom: 8px;
     border-bottom: 2px solid var(--primary-light);
 }
 
 .contact-list { list-style: none; }
 .contact-list li {
     padding: 6px 0;
     font-size: 0.9rem;
     display: flex;
     flex-wrap: wrap;
     gap: 4px;
 }
 .contact-label {
     color: var(--gray-600);
     min-width: 50px;
     flex-shrink: 0;
 }
 
 .price-list { margin-bottom: 12px; }
 .price-item {
     display: flex;
     justify-content: space-between;
     padding: 8px 0;
     border-bottom: 1px dashed var(--gray-200);
     font-size: 0.9rem;
 }
 .price-name { color: var(--gray-700); }
 .price-value { font-weight: 600; color: var(--danger); }
 .price-note {
     font-size: 0.85rem;
     color: var(--gray-600);
     background: var(--gray-50);
     padding: 8px 12px;
     border-radius: var(--radius-sm);
     margin-top: 8px;
 }
 
 .profile-main { min-height: 400px; }
 .section-tabs { margin-bottom: 20px; }
 .section-tabs h2 { font-size: 1.3rem; margin-bottom: 12px; }
 .album-filters {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
     margin-bottom: 16px;
 }
 .filter-btn {
     padding: 6px 16px;
     border: 1px solid var(--gray-300);
     background: #fff;
     border-radius: 20px;
     cursor: pointer;
     font-size: 0.85rem;
     transition: all 0.2s;
 }
 .filter-btn:hover { border-color: var(--primary); color: var(--primary); }
 .filter-btn.active {
     background: var(--primary);
     color: #fff;
     border-color: var(--primary);
 }
 
 .portfolio-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
     gap: 16px;
 }
 .portfolio-item {
     position: relative;
     border-radius: var(--radius);
     overflow: hidden;
     aspect-ratio: 4/3;
     background: var(--gray-200);
 }
 .portfolio-item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.3s;
 }
 .portfolio-item:hover img { transform: scale(1.05); }
 .portfolio-overlay {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     background: linear-gradient(transparent, rgba(0,0,0,0.6));
     padding: 16px;
     opacity: 0;
     transition: opacity 0.2s;
 }
 .portfolio-item:hover .portfolio-overlay { opacity: 1; }
 .portfolio-overlay span { color: #fff; font-size: 0.9rem; }
 
 /* ============================================
    Pagination
    ============================================ */
 .pagination {
     display: flex;
     justify-content: center;
     gap: 4px;
     margin: 24px 0;
 }
 .page-link {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-width: 36px;
     height: 36px;
     padding: 0 8px;
     border: 1px solid var(--gray-300);
     border-radius: var(--radius-sm);
     color: var(--gray-700);
     font-size: 0.9rem;
     background: #fff;
     transition: all 0.2s;
 }
 .page-link:hover { border-color: var(--primary); color: var(--primary); }
 .page-link.active {
     background: var(--primary);
     color: #fff;
     border-color: var(--primary);
 }
 
 /* ============================================
    Admin & Dashboard Layout
    ============================================ */
 .admin-layout,
 .dashboard-layout {
     display: flex;
     min-height: 100vh;
 }
 
 .admin-sidebar,
 .dashboard-sidebar {
     width: var(--sidebar-width);
     background: var(--gray-900);
     color: #fff;
     display: flex;
     flex-direction: column;
     position: fixed;
     top: 0;
     left: 0;
     bottom: 0;
     z-index: 200;
     transition: transform 0.3s;
 }
 .sidebar-brand {
     padding: 20px;
     font-size: 1.1rem;
     font-weight: 700;
     border-bottom: 1px solid rgba(255,255,255,0.1);
 }
 .sidebar-brand a { color: #fff; display: block; }
 .sidebar-nav {
     flex: 1;
     padding: 12px 0;
     overflow-y: auto;
 }
 .sidebar-nav a {
     display: block;
     padding: 12px 20px;
     color: rgba(255,255,255,0.75);
     font-size: 0.9rem;
     transition: all 0.2s;
 }
 .sidebar-nav a:hover { background: rgba(255,255,255,0.1); color: #fff; }
 .sidebar-nav a.active {
     background: var(--primary);
     color: #fff;
 }
 .sidebar-nav hr {
     border: none;
     border-top: 1px solid rgba(255,255,255,0.1);
     margin: 12px 20px;
 }
 .sidebar-footer {
     padding: 16px 20px;
     font-size: 0.8rem;
     color: rgba(255,255,255,0.5);
     border-top: 1px solid rgba(255,255,255,0.1);
 }
 
 .admin-topbar,
 .dashboard-topbar {
     display: none;
     background: #fff;
     border-bottom: 1px solid var(--gray-200);
     padding: 12px 16px;
     position: sticky;
     top: 0;
     z-index: 150;
     box-shadow: var(--shadow-sm);
 }
 .sidebar-toggle {
     background: none;
     border: none;
     font-size: 1.5rem;
     cursor: pointer;
     padding: 4px 8px;
     color: var(--gray-700);
 }
 .topbar-title { font-weight: 600; margin-left: 12px; }
 
 .admin-main,
 .dashboard-main {
     flex: 1;
     margin-left: var(--sidebar-width);
     padding: 24px;
     min-height: 100vh;
 }
 
 .page-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 24px;
 }
 .page-header h2 { font-size: 1.4rem; font-weight: 600; }
 
 /* ============================================
    Stats Grid
    ============================================ */
 .stats-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
     gap: 16px;
     margin-bottom: 24px;
 }
 .stat-card {
     background: #fff;
     border-radius: var(--radius);
     padding: 20px;
     box-shadow: var(--shadow);
     text-align: center;
     border-left: 4px solid var(--primary);
 }
 .stat-card.success { border-left-color: var(--success); }
 .stat-card.warning { border-left-color: var(--warning); }
 .stat-card.danger { border-left-color: var(--danger); }
 .stat-value {
     font-size: 2rem;
     font-weight: 700;
     color: var(--gray-900);
 }
 .stat-label {
     font-size: 0.85rem;
     color: var(--gray-600);
     margin-top: 4px;
 }
 .stat-notice {
     font-size: 0.8rem;
     color: var(--warning);
     margin-top: 4px;
 }
 
 /* ============================================
    Cards (Admin/Dashboard)
    ============================================ */
 .admin-card {
     background: #fff;
     border-radius: var(--radius);
     box-shadow: var(--shadow);
     margin-bottom: 24px;
 }
 .card-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 16px 20px;
     border-bottom: 1px solid var(--gray-200);
 }
 .card-header h3 { font-size: 1rem; font-weight: 600; }
 .card-body { padding: 20px; }
 .card-body:only-child { border-top: none; }
 .card-actions { display: flex; gap: 8px; }
 
 .admin-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 24px;
 }
 
 /* ============================================
    Tables
    ============================================ */
 .table {
     width: 100%;
     border-collapse: collapse;
     font-size: 0.9rem;
 }
 .table th {
     text-align: left;
     padding: 10px 12px;
     border-bottom: 2px solid var(--gray-200);
     font-weight: 600;
     color: var(--gray-700);
     white-space: nowrap;
 }
 .table td {
     padding: 10px 12px;
     border-bottom: 1px solid var(--gray-100);
     vertical-align: middle;
 }
 .table tr:hover td { background: var(--gray-50); }
 .table-thumb {
     width: 40px;
     height: 40px;
     object-fit: cover;
     border-radius: var(--radius-sm);
     margin-right: 8px;
     vertical-align: middle;
 }
 
 /* ============================================
    Badges
    ============================================ */
 .badge {
     display: inline-block;
     padding: 2px 10px;
     font-size: 0.8rem;
     font-weight: 500;
     border-radius: 12px;
 }
 .badge-success { background: #e6f4ea; color: #1e7e34; }
 .badge-warning { background: #fef7e0; color: #e37400; }
 .badge-danger { background: #fce8e6; color: var(--danger); }
 .badge-primary { background: var(--primary-light); color: var(--primary); }
 .badge-info { background: #e8f0fe; color: var(--info); }
 
 /* ============================================
    Photo Grid (Admin)
    ============================================ */
 .photo-grid-admin {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
     gap: 16px;
 }
 .photo-card-admin {
     background: var(--gray-50);
     border-radius: var(--radius);
     overflow: hidden;
     border: 1px solid var(--gray-200);
     transition: box-shadow 0.2s;
 }
 .photo-card-admin:hover { box-shadow: var(--shadow); }
 .photo-card-admin img {
     width: 100%;
     height: 150px;
     object-fit: cover;
     display: block;
 }
 .photo-card-info {
     padding: 10px;
     font-size: 0.85rem;
 }
 .photo-card-info p { margin-bottom: 4px; }
 .photo-card-title { font-weight: 500; }
 .photo-card-author { color: var(--gray-600); font-size: 0.8rem; }
 .photo-card-album { color: var(--gray-600); font-size: 0.8rem; }
 .photo-card-actions { margin-top: 8px; }
 
 /* ============================================
    Upload Area
    ============================================ */
 .upload-area {
     border: 2px dashed var(--gray-300);
     border-radius: var(--radius);
     padding: 60px 20px;
     text-align: center;
     cursor: pointer;
     transition: all 0.2s;
     margin-bottom: 16px;
     background: var(--gray-50);
 }
 .upload-area:hover { border-color: var(--primary); background: var(--primary-light); }
 .upload-icon { font-size: 3rem; margin-bottom: 12px; }
 .upload-placeholder p { margin-bottom: 4px; }
 .file-preview {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
     gap: 10px;
     margin-bottom: 16px;
 }
 .preview-item {
     position: relative;
     border-radius: var(--radius);
     overflow: hidden;
     border: 1px solid var(--gray-200);
 }
 .preview-item img {
     width: 100%;
     height: 100px;
     object-fit: cover;
     display: block;
 }
 .preview-name {
     display: block;
     padding: 4px 6px;
     font-size: 0.75rem;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     background: rgba(0,0,0,0.05);
 }
 .preview-size {
     position: absolute;
     top: 4px;
     right: 4px;
     background: rgba(0,0,0,0.6);
     color: #fff;
     padding: 2px 6px;
     border-radius: 4px;
     font-size: 0.7rem;
 }
 
 /* ============================================
    Quick Actions
    ============================================ */
 .quick-actions {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
     gap: 16px;
     margin-bottom: 24px;
 }
 .action-card {
     display: flex;
     align-items: center;
     gap: 16px;
     background: #fff;
     border-radius: var(--radius);
     padding: 20px;
     box-shadow: var(--shadow);
     transition: transform 0.2s, box-shadow 0.2s;
     color: var(--gray-900);
 }
 .action-card:hover {
     transform: translateY(-2px);
     box-shadow: var(--shadow-md);
     color: var(--gray-900);
 }
 .action-icon { font-size: 2rem; flex-shrink: 0; }
 .action-text h3 { font-size: 1rem; margin-bottom: 2px; }
 .action-text p { font-size: 0.8rem; color: var(--gray-600); }
 
 /* ============================================
    Detail Grid
    ============================================ */
 .detail-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 8px 20px;
     font-size: 0.9rem;
 }
 .detail-section { margin-top: 16px; font-size: 0.9rem; }
 
 /* ============================================
    Pricing Form
    ============================================ */
 .pricing-form {
     max-width: 500px;
 }
 
 /* ============================================
    Avatar Upload
    ============================================ */
 .avatar-upload,
 .cover-upload {
     text-align: center;
 }
 .avatar-preview {
     width: 120px;
     height: 120px;
     border-radius: 50%;
     object-fit: cover;
     margin-bottom: 12px;
     border: 3px solid var(--gray-200);
 }
 .avatar-placeholder-lg {
     width: 120px;
     height: 120px;
     border-radius: 50%;
     background: var(--primary);
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 2.5rem;
     font-weight: 700;
     margin: 0 auto 12px;
 }
 .cover-preview {
     width: 100%;
     max-height: 200px;
     object-fit: cover;
     border-radius: var(--radius);
     margin-bottom: 12px;
 }
 
 /* ============================================
    Generated Codes
    ============================================ */
 .code-list {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     margin-top: 8px;
 }
 .code-item {
     display: inline-block;
     padding: 6px 14px;
     background: var(--gray-100);
     border: 1px solid var(--gray-300);
     border-radius: var(--radius-sm);
     font-size: 0.9rem;
     font-family: "Courier New", monospace;
     letter-spacing: 1px;
 }
 
 /* ============================================
    Review Image
    ============================================ */
 .review-image {
     text-align: center;
     background: var(--gray-100);
     padding: 16px;
     border-radius: var(--radius);
 }
 
 /* ============================================
    Footer
    ============================================ */
 .site-footer {
     background: var(--gray-900);
     color: rgba(255,255,255,0.6);
     text-align: center;
     padding: 20px 0;
     font-size: 0.85rem;
 }
 
 /* ============================================
    Responsive
    ============================================ */
 @media (max-width: 1024px) {
     .profile-content {
         grid-template-columns: 260px 1fr;
     }
 }
 
 @media (max-width: 768px) {
     .admin-sidebar,
     .dashboard-sidebar {
         transform: translateX(-100%);
     }
     .admin-sidebar.collapsed,
     .dashboard-sidebar.collapsed {
         transform: translateX(0);
         width: 260px;
     }
     .admin-topbar,
     .dashboard-topbar {
         display: flex;
         align-items: center;
     }
     .admin-main,
     .dashboard-main {
         margin-left: 0;
         padding: 16px;
     }
     
     .profile-header {
         flex-direction: column;
         text-align: center;
     }
     .profile-content {
         grid-template-columns: 1fr;
     }
     .form-row {
         grid-template-columns: 1fr;
     }
     .admin-row {
         grid-template-columns: 1fr;
     }
     .portfolio-grid {
         grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
     }
     .photographer-grid {
         grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
     }
     .hero-content h2 {
         font-size: 1.8rem;
     }
     .stats-grid {
         grid-template-columns: repeat(2, 1fr);
     }
     .auth-card {
         padding: 24px;
     }
 }
 
 @media (max-width: 480px) {
     .header-content {
         flex-direction: column;
         gap: 12px;
     }
     .header-nav {
         width: 100%;
         justify-content: center;
     }
     .stats-grid {
         grid-template-columns: 1fr;
     }
     .photo-grid-admin {
         grid-template-columns: repeat(2, 1fr);
     }
     .portfolio-grid {
         grid-template-columns: repeat(2, 1fr);
     }
     .quick-actions {
         grid-template-columns: 1fr;
     }
 }