:root{--primary: #2563eb;--primary-hover: #1d4ed8;--primary-light: #eff6ff;--surface: #ffffff;--surface-secondary: #f8fafc;--border: #e2e8f0;--text: #1e293b;--text-secondary: #64748b;--text-light: #94a3b8;--error: #ef4444;--error-bg: #fef2f2;--success: #22c55e;--success-bg: #f0fdf4;--radius: 8px;--radius-lg: 12px;--shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;color:var(--text);background-color:var(--surface-secondary);line-height:1.6;-webkit-font-smoothing:antialiased}#root{min-height:100vh}.layout{min-height:100vh;display:flex;flex-direction:column}.main-content{flex:1;padding:32px;max-width:1200px;width:100%;margin:0 auto}.header{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}.header-inner{max-width:1200px;margin:0 auto;padding:0 32px;height:64px;display:flex;align-items:center;justify-content:space-between}.header-logo{font-size:18px;font-weight:700;color:var(--primary);cursor:pointer}.header-left{display:flex;align-items:center;gap:24px}.header-nav{display:flex;align-items:center;gap:8px}.nav-link{background:none;border:none;font-size:14px;font-weight:500;color:var(--text-secondary);cursor:pointer;padding:6px 12px;border-radius:var(--radius);transition:color .2s,background-color .2s}.nav-link:hover{color:var(--primary);background-color:var(--primary-light)}.header-user{position:relative}.user-menu-btn{background:none;border:1px solid var(--border);border-radius:var(--radius);padding:8px 14px;font-size:14px;color:var(--text);cursor:pointer;display:flex;align-items:center;gap:8px;transition:border-color .2s}.user-menu-btn:hover{border-color:var(--primary)}.chevron{font-size:10px;color:var(--text-secondary)}.user-dropdown{position:absolute;right:0;top:100%;margin-top:4px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);min-width:140px;overflow:hidden}.user-dropdown button{width:100%;background:none;border:none;padding:10px 16px;text-align:left;font-size:14px;color:var(--text);cursor:pointer;transition:background-color .15s}.user-dropdown button:hover{background-color:var(--surface-secondary)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:var(--radius);padding:12px 24px;font-size:15px;font-weight:600;cursor:pointer;transition:background-color .2s,opacity .2s}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background-color:var(--primary);color:#fff}.btn-primary:hover:not(:disabled){background-color:var(--primary-hover)}.btn-secondary{background-color:var(--surface-secondary);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover:not(:disabled){background-color:var(--border)}.btn-full{width:100%}.form-group{margin-bottom:20px}.form-group label{display:block;font-size:14px;font-weight:600;margin-bottom:6px;color:var(--text)}.form-group input,.form-group textarea{width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius);font-size:15px;color:var(--text);background:var(--surface);transition:border-color .2s;font-family:inherit}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #2563eb1a}.form-group textarea{resize:vertical}.form-error{color:var(--error);font-size:14px;margin-bottom:16px;padding:10px 14px;background:var(--error-bg);border-radius:var(--radius)}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--surface-secondary)}.login-card{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:48px 40px;width:100%;max-width:420px}.login-title{font-size:24px;font-weight:700;color:var(--primary);margin-bottom:4px}.login-subtitle{color:var(--text-secondary);font-size:15px;margin-bottom:32px}.spinner-overlay{position:fixed;inset:0;background:#ffffffb3;display:flex;align-items:center;justify-content:center;z-index:1000}.spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.toast{position:fixed;bottom:24px;right:24px;padding:14px 20px;border-radius:var(--radius);box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:12px;font-size:14px;z-index:2000;animation:toast-in .3s ease}.toast-error{background:var(--error);color:#fff}.toast-success{background:var(--success);color:#fff}.toast-close{background:none;border:none;color:inherit;font-size:18px;cursor:pointer;padding:0;line-height:1;opacity:.8}.toast-close:hover{opacity:1}@keyframes toast-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.admin-orders-page{max-width:1200px;margin:0 auto}.admin-orders-page h1{font-size:24px;font-weight:700;margin-bottom:24px}.admin-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px;padding:20px;background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow)}.admin-filters input,.admin-filters select{padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius);font-size:14px;color:var(--text);background:var(--surface);min-width:140px}.admin-filters input:focus,.admin-filters select:focus{outline:none;border-color:var(--primary)}.admin-table-wrapper{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow-x:auto}.admin-table{width:100%;border-collapse:collapse;font-size:14px}.admin-table th{text-align:left;padding:12px 16px;font-weight:600;color:var(--text-secondary);border-bottom:2px solid var(--border);white-space:nowrap}.admin-table td{padding:12px 16px;border-bottom:1px solid var(--border);white-space:nowrap}.admin-table-row{cursor:pointer;transition:background-color .15s}.admin-table-row:hover{background-color:var(--primary-light)}.status-badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;text-transform:capitalize}.status-submitted{background:#dbeafe;color:#1d4ed8}.status-processing{background:#fef3c7;color:#b45309}.status-completed{background:#d1fae5;color:#065f46}.status-cancelled{background:#fee2e2;color:#b91c1c}.payment-paid{background:#d1fae5;color:#065f46}.payment-unpaid{background:#fef3c7;color:#b45309}.status-packet-pending{background:#f1f5f9;color:#64748b}.status-packet-generating{background:#fef3c7;color:#b45309;animation:pulse-badge 1.5s ease-in-out infinite}@keyframes pulse-badge{0%,to{opacity:1}50%{opacity:.5}}.status-packet-generated{background:#d1fae5;color:#065f46}.status-packet-failed{background:#fee2e2;color:#b91c1c}.admin-detail-page{max-width:900px;margin:0 auto}.admin-detail-page>.btn{margin-bottom:20px}.order-detail-card{background:var(--surface);padding:32px;border-radius:var(--radius-lg);box-shadow:var(--shadow)}.order-detail-card h1{font-size:24px;font-weight:700;margin-bottom:24px;color:var(--primary)}.order-detail-card h2{font-size:18px;font-weight:600;margin-bottom:12px}.detail-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}.detail-field label{display:block;font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}.detail-field p{font-size:15px;color:var(--text)}.detail-field select,.detail-field input{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius);font-size:14px;color:var(--text);background:var(--surface)}.detail-field select:focus,.detail-field input:focus{outline:none;border-color:var(--primary)}.file-download-list{display:flex;flex-wrap:wrap;gap:8px}.file-download-link{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:var(--primary-light);color:var(--primary);border-radius:var(--radius);font-size:13px;font-weight:500;text-decoration:none;transition:background-color .15s}.file-download-link:hover{background:#dbeafe}.items-table{width:100%;border-collapse:collapse;font-size:14px}.items-table th{text-align:left;padding:10px 14px;font-weight:600;color:var(--text-secondary);border-bottom:2px solid var(--border);white-space:nowrap}.items-table td{padding:10px 14px;border-bottom:1px solid var(--border)}.batch-badge{display:inline-flex;align-items:center;justify-content:center;background:#f0f9ff;color:#0369a1;border:1px solid #bae6fd;border-radius:4px;font-size:10px;font-weight:700;width:16px;height:16px;margin-left:6px;vertical-align:middle;cursor:default}.bulk-actions-bar{display:flex;align-items:center;gap:12px;padding:12px 20px;background:var(--primary-light);border:1px solid var(--primary);border-radius:var(--radius-lg);margin-bottom:16px}.bulk-selected-count{font-size:14px;font-weight:600;color:var(--primary)}.bulk-status-select{padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius);font-size:14px;color:var(--text);background:var(--surface)}.bulk-status-select:focus{outline:none;border-color:var(--primary)}.row-actions{display:flex;gap:6px}.row-action-btn{padding:4px 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);font-size:12px;font-weight:600;color:var(--primary);cursor:pointer;transition:background-color .15s,border-color .15s;white-space:nowrap}.row-action-btn:hover{background-color:var(--primary-light);border-color:var(--primary)}.order-packet-section{margin-bottom:8px}.packet-status-generated{display:flex;align-items:center;flex-wrap:wrap;gap:12px}.packet-timestamp{font-size:13px;color:var(--text-secondary)}.packet-status-pending{padding:12px 0}.status-pending-badge{background:#fef3c7;color:#b45309}.packet-status-failed{padding:12px 0}.status-failed-badge{background:#fee2e2;color:#b91c1c}.packet-error-msg{margin-top:8px;font-size:13px;color:var(--error);background:var(--error-bg);padding:8px 12px;border-radius:var(--radius)}.catalog-tree{display:flex;flex-direction:column;gap:8px}.catalog-category{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}.catalog-category-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;cursor:pointer;transition:background-color .15s}.catalog-category-header:hover{background-color:var(--surface-secondary)}.catalog-category-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.catalog-expand-icon{font-size:11px;color:var(--text-secondary);width:16px;text-align:center}.catalog-name{font-weight:600;font-size:15px;color:var(--text)}.catalog-count{font-size:13px;color:var(--text-secondary)}.catalog-price{font-size:14px;font-weight:600;color:var(--primary)}.catalog-actions{display:flex;gap:6px}.catalog-children{padding:0 20px 16px 46px}.catalog-item{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px;background:var(--surface-secondary)}.catalog-item-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;cursor:pointer;transition:background-color .15s}.catalog-item-header:hover{background-color:var(--primary-light)}.catalog-size-row{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;border-bottom:1px solid var(--border)}.catalog-size-row:last-of-type{border-bottom:none}.catalog-size-info{display:flex;align-items:center;gap:12px}.catalog-add-form{display:flex;align-items:center;gap:8px;padding:10px 0;flex-wrap:wrap}.catalog-add-form input{padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius);font-size:14px;color:var(--text);background:var(--surface);min-width:140px}.catalog-add-form input:focus{outline:none;border-color:var(--primary)}.catalog-add-btn{background:none;border:1px dashed var(--border);border-radius:var(--radius);padding:8px 16px;font-size:13px;font-weight:600;color:var(--primary);cursor:pointer;transition:border-color .15s,background-color .15s;margin-top:8px}.catalog-add-btn:hover{border-color:var(--primary);background-color:var(--primary-light)}.catalog-inline-edit{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.catalog-inline-edit input{padding:6px 10px;border:1px solid var(--border);border-radius:var(--radius);font-size:14px;color:var(--text);background:var(--surface)}.catalog-inline-edit input:focus{outline:none;border-color:var(--primary)}.catalog-item-thumb{width:32px;height:32px;border-radius:4px;object-fit:cover;flex-shrink:0}.catalog-item-image-section{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--border)}.catalog-image-label{font-size:13px;font-weight:600;color:var(--text-secondary);display:block;margin-bottom:8px}.catalog-image-area{display:flex;align-items:flex-start;gap:12px}.catalog-image-preview-lg{display:flex;align-items:center;gap:12px}.catalog-image-preview-lg img{width:80px;height:80px;border-radius:6px;object-fit:cover;border:1px solid var(--border)}.catalog-image-actions{display:flex;flex-direction:column;gap:6px}.catalog-image-upload-btn{padding:6px 14px;font-size:13px;color:var(--primary);border:1px solid var(--primary);border-radius:var(--radius);background:transparent;cursor:pointer;white-space:nowrap;text-align:center}.catalog-image-upload-btn:hover{background:var(--primary);color:#fff}.catalog-image-remove-btn{color:var(--error);border-color:var(--error)}.catalog-image-remove-btn:hover{background:var(--error);color:#fff}.catalog-image-dropzone{width:120px;height:100px}.catalog-image-dropzone-label{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;height:100%;border:2px dashed var(--border);border-radius:8px;cursor:pointer;color:var(--text-secondary);font-size:12px;text-align:center;transition:border-color .15s,background .15s;padding:8px}.catalog-image-dropzone-label:hover{border-color:var(--primary);background:var(--primary-light);color:var(--primary)}.catalog-image-field{display:flex;align-items:center;gap:8px}.catalog-image-preview{position:relative;display:inline-flex}.catalog-image-remove{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;background:var(--error);color:#fff;border:none;font-size:12px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.admin-client-form{margin-bottom:20px}.admin-client-form .form-group{max-width:400px}@media(max-width:768px){.detail-grid{grid-template-columns:1fr 1fr}.admin-filters{flex-direction:column}.admin-filters input,.admin-filters select{min-width:auto;width:100%}}@media(max-width:640px){.main-content{padding:20px 16px}.header-inner{padding:0 16px}.login-card{padding:32px 24px}.detail-grid{grid-template-columns:1fr}.header-left{gap:12px}.order-detail-card{padding:24px 20px}}.btn-danger{background-color:#ef4444;color:#fff;border:none}.btn-danger:hover{background-color:#dc2626}.btn-sm{padding:4px 10px;font-size:13px}.status-active{background:#d1fae5;color:#065f46;cursor:pointer;border:none}.status-active:hover{opacity:.8}.status-inactive{background:#f1f5f9;color:#64748b;cursor:pointer;border:none}.status-inactive:hover{opacity:.8}.inline-edit-input{border:1px solid var(--border);border-radius:var(--radius);padding:4px 8px;font-size:14px;width:100%;background:var(--surface)}.empty-state{background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius-lg);padding:48px 24px;text-align:center;color:var(--text-secondary)}.referral-codes-page{max-width:1100px;margin:0 auto}.referral-codes-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.referral-codes-header h1{font-size:24px;font-weight:700}.referral-code-create-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;margin-bottom:24px;box-shadow:var(--shadow)}.referral-code-create-panel h3{font-size:16px;font-weight:600;margin-bottom:16px}.referral-code-form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:16px}.referral-code-form-actions{display:flex;gap:10px;margin-top:12px}.referral-codes-table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}.referral-note{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary);font-size:13px}.catalog-gallery-section{background:var(--surface-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px}.catalog-gallery-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.catalog-gallery-empty{color:var(--text-secondary);font-size:13px;font-style:italic}.catalog-gallery-grid{display:flex;flex-wrap:wrap;gap:12px}.catalog-gallery-card{position:relative;border:2px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface);width:120px}.catalog-gallery-card.gallery-primary{border-color:var(--primary)}.catalog-gallery-img{width:120px;height:90px;object-fit:cover;display:block}.gallery-primary-badge{position:absolute;top:4px;left:4px;background:var(--primary);color:#fff;font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px}.catalog-gallery-actions{display:flex;flex-direction:column;gap:4px;padding:6px;background:var(--surface)}.client-balance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}.client-balance-card{background:var(--surface-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:4px}.client-balance-card.balance-negative{background:var(--error-bg);border-color:#fca5a5}.client-balance-card.balance-positive{background:var(--success-bg);border-color:#86efac}.balance-card-label{font-size:12px;color:var(--text-secondary);font-weight:500;text-transform:uppercase;letter-spacing:.04em}.balance-card-value{font-size:22px;font-weight:700;color:var(--text)}.balance-card-hint{font-size:12px;color:var(--text-secondary)}.tx-form{display:flex;flex-direction:column;gap:12px}.tx-form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.tx-summary-bar{display:flex;gap:24px;align-items:center;padding:10px 0;font-size:14px;color:var(--text-secondary);flex-wrap:wrap}.tx-type-badge{display:inline-block;padding:2px 8px;border-radius:12px;font-size:12px;font-weight:500}.tx-deposit{background:var(--success-bg);color:#15803d}.tx-refund{background:#f0f9ff;color:#0369a1}.tx-adjustment{background:#fefce8;color:#a16207}.tx-order_charge{background:var(--error-bg);color:var(--error)}.tx-credit{color:#15803d;font-weight:600}.tx-debit{color:var(--error);font-weight:600}.link-btn{background:none;border:none;color:var(--primary);cursor:pointer;font-size:13px;padding:0;text-decoration:underline}.link-btn:hover{color:var(--primary-hover)}.catalog-order-btn{padding:2px 6px;font-size:11px;min-width:28px}.catalog-order-btn:disabled{opacity:.3;cursor:default}