/* ==========================================
   INFLUENCER MARKETPLACE PRO - CORE CSS
   ========================================== */

/* Backend Ultra UI */
.im-master-wrap { margin: 20px 20px 0 0; border-radius: 20px; color: #fff; background: linear-gradient(-45deg, #1a0b2e, #4b1d52, #103783, #00c6ff); background-size: 400% 400%; animation: gradientBG 20s ease infinite; font-family: "Segoe UI", sans-serif; box-shadow: 0 20px 50px rgba(0,0,0,0.4); overflow: hidden; min-height: 85vh; display: flex; flex-direction: column; }
@keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.im-header { background: rgba(0,0,0,0.4); padding: 25px 40px; border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; align-items: center; }
.im-header-title { font-size: 36px; font-weight: 900; margin: 0; background: linear-gradient(to right, #00f2fe, #4facfe, #f093fb, #f5576c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.im-btn-group { display: flex; gap: 15px; flex-wrap:wrap; justify-content:center;}
.im-btn-glow { background: linear-gradient(90deg, #ff0844, #ffb199); color: white; padding: 12px 25px; border: none; border-radius: 30px; cursor: pointer; font-weight: bold; text-decoration:none; transition: 0.4s; display:inline-block; }
.im-btn-glow:hover { transform: translateY(-3px); box-shadow: 0 0 25px rgba(255, 8, 68, 0.7); color: white; }
.im-btn-glow.blue { background: linear-gradient(to right, #4facfe, #00f2fe); }
.im-btn-glow.green { background: linear-gradient(to right, #43e97b, #38f9d7); color: #000; }
.im-btn-glow.export { background: linear-gradient(to right, #fdbb2d, #b21f1f); color:#fff; }

.im-nav-tabs { display: flex; background: rgba(0,0,0,0.3); padding: 0 20px; border-bottom: 1px solid rgba(255,255,255,0.05); overflow-x: auto; }
.im-tab-link { padding: 18px 20px; color: #bbb; text-decoration: none; font-size: 15px; font-weight: bold; border-bottom: 3px solid transparent; transition: 0.3s; display: flex; align-items: center; gap: 8px; text-transform:uppercase; white-space: nowrap; }
.im-tab-link:hover, .im-tab-link.active { color: #fff; border-bottom-color: #00f2fe; background: rgba(255,255,255,0.05); }
.im-content { padding: 40px; flex-grow: 1; }
.im-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; }
.im-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); padding: 35px; border-radius: 15px; text-align: center; }
.im-card h2 { font-size: 60px; margin: 0; font-weight: 900; }

table.im-table { width: 100%; border-collapse: separate; border-spacing: 0; background: rgba(0,0,0,0.3); border-radius: 15px; overflow: hidden; margin-top: 20px; box-shadow:0 10px 30px rgba(0,0,0,0.3); }
table.im-table th { background: rgba(0,0,0,0.6); padding: 18px; text-align: left; font-weight: 800; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.1); }
table.im-table td { padding: 18px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.05); color: #eee; vertical-align: middle; }
.im-table-img { width: 50px; height: 50px; border-radius: 10px; object-fit: cover; border: 2px solid #00f2fe; }

/* Expanded Action Buttons */
.im-action-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:8px; font-weight:bold; text-decoration:none; transition:0.3s; font-size:13px; margin-right:8px; margin-bottom:5px; border:none; cursor:pointer;}
.im-action-btn.edit { background:rgba(0, 242, 254, 0.1); color:#00f2fe; border:1px solid rgba(0, 242, 254, 0.3); }
.im-action-btn.edit:hover { background:#00f2fe; color:#000; box-shadow:0 5px 15px rgba(0,242,254,0.4); }
.im-action-btn.view { background:rgba(255, 255, 255, 0.1); color:#fff; border:1px solid rgba(255, 255, 255, 0.3); }
.im-action-btn.view:hover { background:#fff; color:#000; box-shadow:0 5px 15px rgba(255,255,255,0.4); }
.im-action-btn.delete { background:rgba(255, 8, 68, 0.1); color:#ff0844; border:1px solid rgba(255, 8, 68, 0.3); }
.im-action-btn.delete:hover { background:#ff0844; color:#fff; box-shadow:0 5px 15px rgba(255,8,68,0.4); }
.im-action-btn.approve { background:rgba(40, 167, 69, 0.1); color:#28a745; border:1px solid rgba(40, 167, 69, 0.3); }
.im-action-btn.approve:hover { background:#28a745; color:#fff; box-shadow:0 5px 15px rgba(40,167,69,0.4); }
.im-action-btn.creds { background:rgba(253, 187, 45, 0.1); color:#fdbb2d; border:1px solid rgba(253, 187, 45, 0.3); }
.im-action-btn.creds:hover { background:#fdbb2d; color:#000; box-shadow:0 5px 15px rgba(253,187,45,0.4); }

.im-input-dark { width: 100%; padding: 15px; margin: 10px 0 25px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.5); color: white; font-size:16px; }
.im-badge { padding: 6px 15px; border-radius: 30px; font-size: 13px; font-weight: 800; display:inline-block;}
.im-badge.publish { background: linear-gradient(to right, #00b09b, #96c93d); color:white; }
.im-badge.draft { background: #fdbb2d; color:#000; }

.im-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); backdrop-filter: blur(8px); z-index: 999999; justify-content: center; align-items: center; perspective: 1000px; }
.im-modal-overlay.active { display: flex; }
.im-modal-content { background: #ffffff; color: #333; width: 100%; max-width: 800px; border-radius: 20px; padding: 40px; position: relative; transform: rotateX(-20deg) scale(0.8); opacity: 0; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); max-height: 90vh; overflow-y: auto; border-top: 5px solid #00f2fe; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.im-modal-overlay.active .im-modal-content { transform: rotateX(0) scale(1); opacity: 1; }
.im-modal-close { position: absolute; top: 20px; right: 25px; font-size: 28px; cursor: pointer; color: #888; background: none; border: none; font-weight: bold; transition: 0.3s; }
.im-modal-close:hover { color: #ff0844; transform: scale(1.1); }
.im-modal-content h3 { font-size: 28px; color: #111; margin-top:0; margin-bottom: 25px; font-weight: 900; }

/* Grid systems & Form controls */
.im-input-group { margin-bottom: 20px; text-align:left; }
.im-input-group label { display: block; font-weight: bold; margin-bottom: 8px; color: #555; font-size:14px; text-transform:uppercase; letter-spacing:0.5px;}
.im-form-control { width: 100%; padding: 15px; border-radius: 10px; border: 2px solid #e1e5eb; font-size: 15px; transition: 0.3s; background: #f8f9fa; box-sizing: border-box; }
.im-form-control:focus { border-color: #00f2fe; background: #fff; outline: none; box-shadow:0 0 10px rgba(0,242,254,0.2);}
.im-front-btn { background: linear-gradient(90deg, #00c6ff, #0072ff); color: white; padding: 18px 30px; border: none; border-radius: 10px; cursor: pointer; font-weight: bold; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; transition: 0.4s; width: 100%; margin-top:15px; position: relative; z-index: 10; box-sizing: border-box;}
.im-front-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,198,255,0.4); color: white; }
.im-grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap:20px; }
.im-grid-3 { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:20px; }
.im-live-preview { width: 100px; height: 100px; border-radius: 10px; border: 2px dashed #00f2fe; margin-top: 10px; object-fit: cover; display: none; }

/* Data Output Styles */
.im-data-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; background:#f9f9f9; padding:20px; border-radius:10px; border:1px solid #eee;}
.im-data-row { display:flex; flex-direction:column; margin-bottom:10px; }
.im-data-label { font-size:12px; color:#888; text-transform:uppercase; font-weight:bold; margin-bottom:3px;}
.im-data-value { font-size:16px; color:#111; font-weight:600;}

/* Frontend Premium UI */
.im-front-wrap { max-width: 1200px; margin: 40px auto; font-family: "Segoe UI", sans-serif; color: #333; }
.im-form-card { background: #ffffff; border-radius: 20px; padding: 40px; box-shadow: 0 15px 35px rgba(0,0,0,0.05); border-top: 5px solid #00f2fe; margin: 0 auto; max-width: 900px; position:relative; overflow:hidden;}
.im-form-card h3 { font-size: 28px; color: #111; margin-top:0; margin-bottom: 25px; font-weight: 900; text-align:center;}

.im-alert-success { background:#d4edda; color:#155724; padding:20px; border-radius:10px; border-left:5px solid #28a745; margin-bottom:25px; font-weight:bold; font-size:16px; text-align:center; }
.im-alert-error { background:#f8d7da; color:#721c24; padding:20px; border-radius:10px; border-left:5px solid #dc3545; margin-bottom:25px; font-weight:bold; font-size:16px; text-align:center; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.im-forgot-link { display:block; text-align:center; margin-top:20px; color:#555; font-weight:bold; text-decoration:none; transition:0.3s; cursor:pointer;}
.im-forgot-link:hover { color:#00f2fe; text-decoration:underline; }

.im-front-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); z-index: 999999; justify-content: center; align-items: center; perspective: 1000px; }
.im-front-modal-overlay.active { display: flex; }
.im-front-modal-content { background: #ffffff; color: #333; width: 100%; max-width: 900px; border-radius: 20px; padding: 50px 40px; position: relative; transform: rotateX(-20deg) scale(0.8); opacity: 0; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); text-align:left; border-top: 6px solid #00c6ff; box-shadow: 0 20px 60px rgba(0,0,0,0.5); max-height: 95vh; overflow-y: auto; }
.im-front-modal-overlay.active .im-front-modal-content { transform: rotateX(0) scale(1); opacity: 1; }
.im-front-modal-close { position: absolute; top: 15px; right: 25px; font-size: 32px; cursor: pointer; color: #888; transition: 0.3s; background:none; border:none;}
.im-front-modal-close:hover { color: #ff0844; transform: scale(1.2); }

.im-dashboard-layout { display: flex; gap: 30px; flex-wrap: wrap; }
.im-sidebar { flex: 1; min-width: 300px; background: #fff; border-radius: 20px; padding: 30px; box-shadow: 0 10px 40px rgba(0,0,0,0.08); align-self: flex-start; border-top: 5px solid #00f2fe; }
.im-main-panel { flex: 3; min-width: 300px; }
.im-user-avatar { width: 130px; height: 130px; border-radius: 50%; background: linear-gradient(45deg, #00f2fe, #4facfe); margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; color: white; font-size: 45px; font-weight: bold; text-transform:uppercase; object-fit:cover; border: 5px solid #f8f9fa; box-shadow:0 5px 15px rgba(0,0,0,0.1); }
.im-profile-details { text-align:center; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #eee; }
.im-meta-list { list-style:none; padding:0; margin:0; text-align:left; font-size:15px; color:#555; }
.im-meta-list li { margin-bottom:12px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px dashed #eee; padding-bottom:8px;}
.im-nav-list { list-style: none; padding: 0; margin: 0; }
.im-nav-list li a { display: block; padding: 15px 20px; color: #555; text-decoration: none; font-weight: bold; border-radius: 10px; margin-bottom: 8px; transition: 0.3s; background:#f8f9fa; cursor:pointer;}
.im-nav-list li a:hover, .im-nav-list li a.active { background: #e0f7fa; color: #0097a7; transform:translateX(5px); }

.im-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 40px; }
.im-stat-box { background: #fff; padding: 30px 25px; border-radius: 15px; box-shadow: 0 5px 25px rgba(0,0,0,0.06); border-left: 6px solid #00f2fe; transition:0.3s;}
.im-stat-box:hover { transform:translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.im-list-item { background: #fff; padding: 25px; border-radius: 15px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; border: 1px solid #eee; transition:0.3s; box-shadow:0 5px 15px rgba(0,0,0,0.02);}
.im-list-item:hover { box-shadow:0 10px 25px rgba(0,0,0,0.08); border-color:#00f2fe;}

.im-front-tab-content { display: none; animation: fadeIn 0.5s ease; }
.im-front-tab-content.active { display: block; }
@keyframes fadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.im-global-alert { position:fixed; top:20px; right:20px; background:#d4edda; color:#155724; padding:20px; border-radius:10px; border-left:5px solid #28a745; z-index:999999; font-weight:bold; box-shadow:0 10px 30px rgba(0,0,0,0.2); animation: slideInAlert 0.5s ease; }
@keyframes slideInAlert { from { transform: translateX(100%); opacity:0; } to { transform: translateX(0); opacity:1; } }

@media (max-width: 768px) { .im-grid-2, .im-grid-3 { grid-template-columns: 1fr; } .im-dashboard-layout { flex-direction:column; } }